@charset "utf-8";

/* ============================================================
# Components
============================================================ */

/* ## ページ上部の説明欄
======================================== */

.contentHeader_bg {
  background-color: var(--theme-1-200);
}
/* ----- お役立ち情報・汎用 ----- */
.color-theme-1 .contentHeader_bg {
  background-color: var(--theme-1-200);
}
/* ----- 子ども会運営アイデア集 ----- */
.color-theme-2 .contentHeader_bg {
  background-color: var(--theme-2-200);
}
/* ----- お知らせ ----- */
.color-theme-3 .contentHeader_bg {
  background-color: var(--theme-3-200);
}
/* ----- 子ども会サポーター ----- */
.color-theme-4 .contentHeader_bg {
  background-color: var(--theme-4-200);
}
/* ----- お問い合わせ ----- */
.color-theme-5 .contentHeader_bg {
  background-color: var(--theme-5-200);
}


/* ## Heading
======================================== */

.headingXl {
  background-image: url("../img/common/heading_xl_bg_theme1.webp");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  border: 6px solid var(--theme-1);
  display: flex;
  margin-bottom: 1rem;
}
.headingXl__icon {
  width: clamp(64px, 8vw, 80px);
}
.headingXl__text {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  padding: 0.25em 1rem;
}
@media (width < 768px) {
  .headingXl {
    background-image: none;
  }
}

.headingLg {
  border: 3px solid var(--theme-1);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.25em 1rem;

  background-image: url("../img/common/heading_lg_icon_theme1.svg");
  background-position: left 1rem center;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  padding-left: calc(1rem + 0.375em + 32px);
}


/* ### トップページ
---------------------------------------- */
.headingFrontPage {
  --iconHeight: 1em;
  --iconWidth: 8px;
  margin-bottom: 0.75rem;
  padding-left: calc(0.5em + var(--iconWidth));
  position: relative;
}
.headingFrontPage::before {
  background-color: var(--theme-1);
  content: "";
  line-height: 1.5;
  height: var(--iconHeight);
  position: absolute;
  top: calc((100% - var(--iconHeight)) / 2);
  left: 0;
  width: var(--iconWidth);
}


/* ### お役立ち情報・汎用
---------------------------------------- */
.color-theme-1 .headingXl {
  background-image: url("../img/common/heading_xl_bg_theme1.webp");
  border-color: var(--theme-1);
}

/* ### 子ども会運営アイデア集
---------------------------------------- */
.color-theme-2 .headingXl {
  background-image: url("../img/common/heading_xl_bg_theme2.webp");
  border-color: var(--theme-2);
}
.color-theme-2 .headingLg {
  background-image: url("../img/common/heading_lg_icon_theme2.svg");
  border-color: var(--theme-2);
}

/* ### お知らせ
---------------------------------------- */
.color-theme-3 .headingXl {
  background-image: url("../img/common/heading_xl_bg_theme3.webp");
  border-color: var(--theme-3);
}
.color-theme-3 .headingLg {
  background-image: url("../img/common/heading_lg_icon_theme3.svg");
  border-color: var(--theme-3);
}

/* ### 子ども会サポーター
---------------------------------------- */
.color-theme-4 .headingXl {
  background-image: url("../img/common/heading_xl_bg_theme4.webp");
  border-color: var(--theme-4);
}
.color-theme-4 .headingLg {
  background-image: url("../img/common/heading_lg_icon_theme4.svg");
  border-color: var(--theme-4);
}

/* ### お問い合わせ
---------------------------------------- */
.color-theme-5 .headingXl {
  background-image: url("../img/common/heading_xl_bg_theme5.webp");
  border-color: var(--theme-5);
}
.color-theme-5 .headingLg {
  background-image: url("../img/common/heading_lg_icon_theme5.svg");
  border-color: var(--theme-5);
}


/* ## Buttons
======================================== */

.btn {
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  color: var(--btn-color);
  cursor: pointer;
  display: inline-block;
  font-size: clamp(0.9375rem, 0.87rem + 0.28vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
  padding: 0.5em 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, border 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
  user-select: none;
  vertical-align: middle;
}
@media (hover: hover) {
  .btn:hover {
    background-color: var(--btn-hover-bg);
    border: 1px solid var(--btn-hover-border);
    color: var(--btn-hover-color);
  }
}
.btn:focus {
  background-color: var(--btn-hover-bg);
  border: 1px solid var(--btn-hover-border);
  color: var(--btn-hover-color);
}
.btn:active {
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-border-color);
  color: var(--btn-active-color);
}
.btn.disabled, .btn:disabled {
  pointer-events: none;
  opacity: 0.65;
}

.btn_backIcon {
  padding-left: 2.5em;
  padding-right: 2em;
}
.btn_backIcon::before {
  border-color: currentColor currentColor transparent transparent;
  border-width: 0.125em 0.125em 0 0;
  border-style: solid;
  color: inherit;
  content: "";
  height: 0.4em;
  width: 0.4em;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(225deg);
}

.btn_endIcon {
  padding-right: 2.5em;
  padding-left: 2em;
}
.btn_endIcon::after {
  border-color: currentColor currentColor transparent transparent;
  border-width: 0.125em 0.125em 0 0;
  border-style: solid;
  color: inherit;
  content: "";
  height: 0.4em;
  width: 0.4em;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.btn_primary {
  background-color: var(--primary);
  border-color: transparent;
  color: var(--white);
}
@media (hover: hover) {
  .btn_primary:hover {
    background-color: var(--primary);
    border-color: transparent;
    color: var(--white);
    filter: saturate(1.1);
  }
}
.btn_primary:focus {
  background-color: var(--primary);
  border-color: transparent;
  color: var(--white);
  filter: saturate(1.1);
}

/* 色テーマボタン */
.btn_theme1 {
  background-color: var(--theme-1-600);
  border-color: transparent;
  color: var(--white);
}
@media (hover: hover) {
  .btn_theme1:hover {
    background-color: var(--theme-1-600);
    border-color: transparent;
    color: var(--white);
    filter: saturate(1.1);
  }
}
.btn_theme1:focus {
  background-color: var(--theme-1-600);
  border-color: transparent;
  color: var(--white);
  filter: saturate(1.1);
}

.btn_theme1Light {
  background-color: var(--theme-1-200);
  border-color: var(--theme-1);
  color: var(--body-color);
}
@media (hover: hover) {
  .btn_theme1Light:hover {
    background-color: var(--theme-1-200);
    border-color: var(--theme-1);
    color: var(--body-color);
    filter: brightness(1.1);
  }
}
.btn_theme1Light:focus {
  background-color: var(--theme-1-200);
  border-color: var(--theme-1);
  color: var(--body-color);
  filter: brightness(1.1);
}

.btn_theme2 {
  background-color: var(--theme-2-600);
  border-color: transparent;
  color: var(--white);
}
@media (hover: hover) {
  .btn_theme2:hover {
    background-color: var(--theme-2-600);
    border-color: transparent;
    color: var(--white);
    filter: saturate(1.1);
  }
}
.btn_theme2:focus {
  background-color: var(--theme-2-600);
  border-color: transparent;
  color: var(--white);
  filter: saturate(1.1);
}

.btn_theme3 {
  background-color: var(--theme-3-600);
  border-color: transparent;
  color: var(--white);
}
@media (hover: hover) {
  .btn_theme3:hover {
    background-color: var(--theme-3-600);
    border-color: transparent;
    color: var(--white);
    filter: saturate(1.1);
  }
}
.btn_theme3:focus {
  background-color: var(--theme-3-600);
  border-color: transparent;
  color: var(--white);
  filter: saturate(1.1);
}

.btn_theme4 {
  background-color: var(--theme-4-600);
  border-color: transparent;
  color: var(--white);
}
@media (hover: hover) {
  .btn_theme4:hover {
    background-color: var(--theme-4-600);
    border-color: transparent;
    color: var(--white);
    filter: saturate(1.1);
  }
}
.btn_theme4:focus {
  background-color: var(--theme-4-600);
  border-color: transparent;
  color: var(--white);
  filter: saturate(1.1);
}

.btn_theme5 {
  background-color: var(--theme-5-600);
  border-color: transparent;
  color: var(--white);
}
@media (hover: hover) {
  .btn_theme5:hover {
    background-color: var(--theme-5-600);
    border-color: transparent;
    color: var(--white);
    filter: saturate(1.1);
  }
}
.btn_theme5:focus {
  background-color: var(--theme-5-600);
  border-color: transparent;
  color: var(--white);
  filter: saturate(1.1);
}

/* グローバルナビ用色テーマボタン */
.btn_gNavTheme {
  background-color: var(--theme-1-600);
  background-image: url("");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-blend-mode: multiply;
  border-color: var(--white);
  border-width: 3px;
  border-radius: 0.5rem;
  color: var(--white);
  font-size: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
  font-weight: 700;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  padding: 1rem;
  position: relative;
}
@media (hover: hover) {
  .btn_gNavTheme:hover {
    background-color: var(--theme-1-600);
    border-color: var(--white);
    border-width: 3px;
    color: var(--white);
    filter: saturate(1.1);
  }
}
.btn_gNavTheme:focus {
  background-color: var(--theme-1-600);
  border-color: var(--white);
  border-width: 3px;
  color: var(--white);
  filter: saturate(1.1);
}
.btn_gNavTheme1 {
  background-color: var(--theme-1-600);
  background-image: url("../img/common/global-nav_icon01.svg");
}
@media (hover: hover) {
  .btn_gNavTheme1:hover {
    background-color: var(--theme-1-600);
  }
}
.btn_gNavTheme1:focus {
  background-color: var(--theme-1-600);
}
.btn_gNavTheme2 {
  background-color: var(--theme-2-600);
  background-image: url("../img/common/global-nav_icon02.svg");
}
@media (hover: hover) {
  .btn_gNavTheme2:hover {
    background-color: var(--theme-2-600);
  }
}
.btn_gNavTheme2:focus {
  background-color: var(--theme-2-600);
}
.btn_gNavTheme3 {
  background-color: var(--theme-3-600);
  background-image: url("../img/common/global-nav_icon03.svg");
}
@media (hover: hover) {
  .btn_gNavTheme3:hover {
    background-color: var(--theme-3-600);
  }
}
.btn_gNavTheme3:focus {
  background-color: var(--theme-3-600);
}
.btn_gNavTheme4 {
  background-color: var(--theme-4-600);
  background-image: url("../img/common/global-nav_icon04.svg");
}
@media (hover: hover) {
  .btn_gNavTheme4:hover {
    background-color: var(--theme-4-600);
  }
}
.btn_gNavTheme4:focus {
  background-color: var(--theme-4-600);
}
.btn_gNavTheme5 {
  background-color: var(--theme-5-600);
  background-image: url("../img/common/global-nav_icon05.svg");
}
@media (hover: hover) {
  .btn_gNavTheme5:hover {
    background-color: var(--theme-5-600);
  }
}
.btn_gNavTheme5:focus {
  background-color: var(--theme-5-600);
}

/* アクティブページが所属するカテゴリーにアイコンを付ける */
.color-theme-1 .btn_gNavTheme1::after,
.color-theme-2 .btn_gNavTheme2::after,
.color-theme-3 .btn_gNavTheme3::after,
.color-theme-4 .btn_gNavTheme4::after,
.color-theme-5 .btn_gNavTheme5::after {
  border: 16px solid transparent;
  border-top: 16px solid var(--white);
  border-bottom-width: 0;
  bottom: -16px;
  content: "";
  display: block;
  left: calc(50% - 16px);
  position: absolute;
  width: 0;
}



/* ## Badges
======================================== */

.badge {
  border-radius: 4px;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  margin-left: 0.375rem;
  padding: 0.3em 0.7em;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}



/* ## Card
======================================== */

a.cardItem {
  color: var(--body-color);
  text-decoration: none;
}
@media (hover: hover) {
  a.cardItem {
    color: var(--body-color);
    text-decoration: none;
  }
}

.cardItem p {
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  line-height: 1.5;
  margin-bottom: 0;
}



/* ## Form
======================================== */

.formGridTable {
  display: grid;
  gap: 0 20px;
}
.formGridTable__head {
  padding: 1em 1em 0.25em 1em;
}
.formGridTable__body {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
  padding: 0.25em 1em 1em 1em;
}
.formGridTable__head:nth-child(-n+2) {
  border-top: 1px solid var(--border-color);
}
/* .formGridTable__head {} */
@media (width >= 992px) {
  .formGridTable {
    grid-template-columns: auto 1fr;
  }
  .formGridTable__head,
  .formGridTable__body {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5em;
  }
  .formGridTable__head:nth-child(-n+2),
  .formGridTable__body:nth-child(-n+2) {
    border-top: 1px solid var(--border-color);
  }
}

.formBadge {
  background: var(--theme-1);
  border-radius: 4px;
  color: var(--white);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  margin-left: 0.375rem;
  padding: 0.3em 0.7em;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.color-theme-1 .formBadge {
  background: var(--theme-1-600);
}
.color-theme-2 .formBadge {
  background: var(--theme-2-600);
}
.color-theme-3 .formBadge {
  background: var(--theme-3-600);
}
.color-theme-4 .formBadge {
  background: var(--theme-4-600);
}
.color-theme-5 .formBadge {
  background: var(--theme-5-600);
}



/* ## Tables
======================================== */

/* ### Responsive tables
---------------------------------------- */

.tableResponsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}