@charset "utf-8";
body.kodomo {
  background-color: var(--color-kodomo-bg-default, #fafdfb);
}
.kodomo div.locus {
  /* style */
  background: var(--color-kodomo-bg-subtle, #effad3);
  border-bottom: var(--border-width-md, 1px) solid var(--color-kodomo-border-subtle);
}
.kodomo-page {
  /* size */
  width: 100%;
  min-height: calc(100vh - var(--header-height, 80px) - var(--footer-height, 200px));
  /* spacing */
  padding-block-end: var(--space-64, 64px);
  /* style */
  background-repeat: no-repeat;
  background-position: center top;
}
.kodomo-page__wrapper {
  margin-block-start: var(--space-128, 128px);
  padding-inline: var(--space-32, 32px);
  padding-block: var(--space-32, 32px) var(--space-48, 48px);
  background: var(--color-background-white);
  border-radius: var(--rounded-16, 16px);
  border: var(--border-width-md, 1px) solid var(--border-bg-neutral);
}
.kodomo h1.page-title {
  /* spacing */
  padding-block: var(--space-12, 12px);
  /* style */
  background: var(--color-kodomo-bg-subtle);
  border-radius: var(--rounded-6, 6px);
  border: var(--border-width-md, 1px) solid var(--color-kodomo-border-subtle);
  /* typography */
  color: var(--color-kodomo-text-default);
  padding-inline: var(--space-16, 16px);
  padding-block: var(--space-12, 12px);
}
.kodomo h1.page-title::after {
  content: none;
}
.kodomo .txtbox h2 {
  /* style */
  background: none;
  border-radius: none;
  border: none;
  /* typography */
  color: var(--color-kodomo-text-default);
  padding-inline: var(--space-16, 16px);
  padding-block: var(--space-12, 12px);
}
.kodomo .txtbox h2:before {
  content: "";
  /* position */
  position: absolute;
  inset-inline-start: 0.5em;
  inset-block-end: 0;
  z-index: calc(var(--stack-foreground) + 1);
  /* size */
  width: 32px;
  height: 2px;
  /* style */
  background: var(--color-kodomo-border-default);
}
.kodomo .txtbox h2:after {
  content: "";
  /* position */
  position: absolute;
  inset-inline-start: 0.5em;
  inset-block-end: 0;
  z-index: var(--stack-foreground);
  /* size */
  width: calc(100% - var(--space-32, 32px));
  height: 2px;
  /* style */
  background: var(--color-kodomo-border-subtler);
}
.kodomo .txtbox h3 {
  padding-inline-start: 1.2em;
  margin-block-end: var(--space-4, 4px);
  border-bottom: none;
}
.kodomo .txtbox h3:before {
  inset-block-start: 0.5em;
  inset-inline-start: 0.1em;
  width: 1em;
  height: 1em;
  background: url(/core/img/kodomo-marker.png) center center no-repeat;
  background-size: contain;
}
.kodomo .txtbox h4 {
  padding-inline-start: 1.4em;
}
.kodomo .txtbox h4::before {
  inset-inline-start: 0.2em;
  width: calc(22 / 16 * 1rem);
  height: calc(22 / 16 * 1rem);
  box-shadow: inset 0 0 0 calc(6 / 16 * 1rem) var(--color-kodomo-border-default);
}
.kodomo .txtbox h5 {
  padding-inline-start: 1.6em;
}
.kodomo .txtbox h5::before {
  background: var(--color-kodomo-border-default);
}
.kodomo .txtbox ul > li:before {
  /* style */
  background: var(--color-kodomo-border-default);
}
/* table */
.kodomo .txtbox table {
}
.kodomo .txtbox table th {
  border: 1px solid var(--table-border-color);
}
.kodomo .txtbox table td {
  border: 1px solid var(--table-border-color);
}
.kodomo .txtbox table th {
  color: var(--table-header-text-color);
  background: var(--color-kodomo-bg-subtle);
}
.kodomo .txtbox table th[scope="col"] {
  background: var(--color-kodomo-bg-subtle);
}
.kodomo .txtbox table th[scope="row"] {
  background: var(--color-kodomo-bg-subtle);
  border: 1px solid var(--table-border-color);
}
.kodomo .txtbox table td {
  background: var(--table-cell-bg-color);
}
@media (width >= 1440px) {
  .kodomo-page {
    background-image: url(/core/img/kodomo-bg-lg.png);
    background-size: 4320px auto;
  }
}
@media (width < 1440px) {
  .kodomo-page {
    background-image: url(/core/img/kodomo-bg.png);
    background-size: 100% auto;
  }
}
.kodomo-title {
  display: grid;
  place-items: center;
  /* size */
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
}
.kodomo-title__img {
  width: 100%;
  height: auto;
}
.kodomo-title__img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.kodomo-main {
  /* background */
  background: url(/core/img/kodomoMain-bg.png) no-repeat center center;
  background-size: 1660px auto;
  background-position: center top 280px;
}
.kodomo-gnav {
  width: 100%;
  max-width: 796px;
  margin-inline: auto;
  /* spacing */
  margin-block-start: var(--space-96, 96px);
}
.kodomo-gnav__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  grid-auto-flow: row;
  row-gap: var(--space-12, 12px);
  column-gap: var(--space-48, 48px);
  place-items: center;
}
.kodomo-gnav__item {
  width: 100%;
  max-width: 214px;
  height: auto;
}
.kodomo-gnav__item a {
  /* layout */
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  /* size */
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  /* spacing */
  padding-block: var(--space-4, 4px) var(--space-12, 12px);
  padding-inline: var(--space-12, 12px);
  /* style */
  border: var(--border-width-lg, 2px) dashed var(--color-kodomo-border-default);
  outline: var(--border-width-xl, 4px) solid var(--border-inverse-link);
  border-radius: var(--rounded-12, 12px);
  background-color: var(--color-kodomo-bg-subtle);
  /* transition */
  transition: background-color 0.3s ease-in-out, outline-color 0.3s ease, border-color 0.3s ease;
}
.kodomo-gnav__item a:hover,
.kodomo-gnav__item a:focus-within {
  /* style */
  background-color: var(--color-kodomo-bg-accent);
  border-color: var(--border-inverse);
  outline-color: var(--color-kodomo-border-default);
}
.kodomo-gnav__icon-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 120px;
  height: auto;
}
.kodomo-gnav__icon-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.kodomo-gnav__label {
  /* typography */
  color: var(--color-kodomo-text-default-link);
  font-size: var(--font-size-20);
  font-weight: var(--fontweight-bold);
  line-height: 1.2;
  text-align: center;
}
.kodomo-text-nav {
  width: 100%;
  height: auto;
  /* spacing */
  margin-block-start: calc(var(--space-160, 160px) * 1.65);
}
.kodomo-text-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-flow: row;
  place-items: center;
  column-gap: var(--space-24, 24px);
  row-gap: var(--space-16, 16px);
  /* size */
  width: 100%;
  height: auto;
}
.kodomo-text-nav__item {
  width: 100%;
  height: auto;
}
.kodomo-text-nav__item a {
  /* layout */
  display: grid;
  grid-template-columns: 1fr auto;
  place-items: center start;
  /* size */
  width: 100%;
  height: auto;
  /* spacing */
  padding-block: var(--space-24, 24px);
  padding-inline: var(--space-16, 16px) var(--space-12, 12px);
  /* style */
  border: var(--border-width-md, 1px) dashed var(--color-kodomo-border-default);
  outline: var(--border-width-lg, 2px) solid var(--border-inverse-link);
  border-radius: var(--rounded-6, 6px);
  background-color: var(--color-kodomo-bg-accent);
  /* transition */
  transition: background-color 0.3s ease-in-out, outline-color 0.3s ease, border-color 0.3s ease;
}
.kodomo-text-nav__item a::after {
  content: "";
  width: 12px;
  height: auto;
  aspect-ratio: 1;
  border-right: 3px solid var(--color-kodomo-border-default);
  border-bottom: 3px solid var(--color-kodomo-border-default);
  transform: rotate(-45deg);
}
.kodomo-text-nav__item a:hover,
.kodomo-text-nav__item a:focus-within {
  /* style */
  background-color: var(--color-kodomo-bg-subtler);
  border-color: var(--border-inverse);
  outline-color: var(--color-kodomo-border-default);
}
.kodomo-text-nav__label {
  /* typography */
  color: var(--color-kodomo-text-default-link);
  font-size: var(--font-size-22);
  font-weight: var(--fontweight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-4);
}
.kodomotop-txtbox {
  /* spacing */
  margin-block-start: var(--space-64, 64px);
  padding-inline: var(--space-40, 40px);
  padding-block: var(--space-32, 32px) var(--space-48, 48px);
  /* style */
  background: var(--color-background-white);
  border-radius: var(--rounded-16, 16px);
  border: var(--border-width-md, 1px) dashed var(--border-bg-neutral);
}
.kodomotop-description {
  width: 100%;
  height: auto;
}
.kodomotop-description h2 {
  /* layout */
  display: block;
  /* position */
  position: relative;
  /* size */
  width: fit-content;
  height: auto;
  /* spacing */
  margin-inline: auto;
  margin-block-start: var(--space-8, 8px);
  /* typography */
  color: var(--color-kodomo-text-default);
  font-size: var(--font-size-36);
  font-weight: var(--fontweight-bold);
  line-height: 1.5;
  letter-spacing: var(--tracking-4);
  text-align: center;
}
.kodomotop-description h2::after {
  content: "";
  display: block;
  height: 8px;
  margin-top: var(--space-6, 6px);
  background: repeating-linear-gradient(90deg, #cc9e4e 0 30px, transparent 30px 37px, #c1d689 37px 67px, transparent 67px 74px, #eec9ac 74px 104px, transparent 104px 111px, #b9dbc9 111px 141px, transparent 141px 148px);
}
.kodomotop-description h3 {
  /* layout */
  width: fit-content;
  height: auto;
  /* position */
  position: relative;
  /* spacing */
  padding-inline-start: 0.65em;
  margin-block-start: var(--space-32, 32px);
  margin-block-end: var(--space-2, 2px);
  /* typography */
  color: var(--color-kodomo-text-default);
  font-size: var(--font-size-24);
  font-weight: var(--fontweight-bold);
  line-height: 1.5;
  letter-spacing: var(--tracking-4);
}
.kodomotop-description h3::before {
  /* layout */
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 8px;
  height: 1em;
  /* style */
  background: var(--color-kodomo-border-default);
  border-radius: var(--rounded-full);
}
.kodomotop-description:not(h2, h3, h4, h5, h6) {
  /* typography */
  color: var(--color-kodomo-text-default);
  font-size: var(--font-size-20);
  font-weight: var(--fontweight-regular);
  line-height: 1.7;
  letter-spacing: var(--tracking-5);
}
.kodomotop-description ul,
.kodomotop-description ol {
  padding-inline-start: 1.2em;
}
.kodomotop-description ul > li,
.kodomotop-description ol > li {
  position: relative;
}
.kodomotop-description ul > li:before {
  /* layout */
  content: "";
  display: block;
  /* position */
  position: absolute;
  inset-inline-start: -1.2em;
  inset-block-start: 0.5em;
  /* size */
  width: 0.8em;
  height: 0.8em;
  /* style */
  background: url(/core/img/kodomo-marker.png) center center no-repeat;
  background-size: contain;
}
.kodomo .menu {
  padding-block-start: var(--space-16, 16px);
}
.kodomo .menu-nav__list {
  gap: var(--space-16, 16px) var(--space-32, 32px);
}
@media (width >= 1440px) {
  .kodomo-title {
    margin-block-start: 160px;
  }
}
@media (width < 1440px) {
  .kodomo-title {
    margin-block-start: 20%;
  }
  .kodomo-main {
    background-size: 118% auto;
    background-position: left 60% top 375px;
  }
  .kodomo-gnav__list {
    column-gap: var(--space-48, 48px);
  }
}
@media (width < 1200px) {
  .kodomo-main {
    background-size: 132% auto;
    background-position: left 60% top 360px;
  }
}
@media (width < 1080px) {
  .kodomo-main {
    background-position: left 60% top 400px;
  }
  .kodomo-gnav {
    margin-block-start: var(--space-64, 64px);
  }
  .kodomo-gnav__list {
    column-gap: var(--space-32, 32px);
  }
}
@media (width < 992px) {
  .kodomo-main {
    background-position: left 60% top 420px;
  }
}
@media (width < 768px) {
  .kodomo-main {
    background-position: left 60% top 420px;
  }
  .kodomo-page__wrapper {
    margin-block-start: var(--space-64, 64px);
    padding-inline: var(--space-16, 16px);
  }
  .kodomo-gnav {
    margin-block-start: var(--space-48, 48px);
  }
  .kodomo-gnav__list {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .kodomo-gnav__item {
    max-width: 361px;
  }
  .kodomo-gnav__item a {
    /* size */
    min-width: 160px;
    max-width: 214px;
  }
  .kodomo-gnav__icon-wrap {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 80px;
    height: auto;
  }
  .kodomo-text-nav__item a {
    /* spacing */
    padding-block: var(--space-12, 12px);
    padding-inline: var(--space-16, 16px) var(--space-12, 12px);
  }
  .kodomo-text-nav__label {
    /* typography */
    font-size: var(--font-size-16);
  }
  .kodomotop-txtbox {
    margin-block-start: var(--space-32, 32px);
    padding-inline: var(--space-32, 32px);
  }
  .kodomotop-description:not(h2, h3, h4, h5, h6) {
    /* typography */
    font-size: var(--font-size-18);
  }
  .kodomotop-description h2 {
    font-size: var(--font-size-28);
  }
  .kodomotop-description h3 {
    font-size: var(--font-size-22);
  }
}
@media (width < 576px) {
  .kodomo-page {
    /* size */
    padding-block-end: var(--space-24, 24px);
  }
  .kodomo-page__wrapper {
    margin-block-start: var(--space-40, 40px);
    padding-block: var(--space-12, 12px) var(--space-24, 24px);
    padding-inline: var(--space-12, 12px);
  }
  .kodomo-main {
    background-position: left 60% top 390px;
  }
  .kodomo-gnav {
    margin-block-start: var(--space-24, 24px);
  }
  .kodomo-gnav__list {
    grid-template-columns: 1fr;
  }
  .kodomo-gnav__item a {
    grid-template-columns: auto 1fr;
    /* size */
    min-width: 100%;
    /* spacing */
    padding-block: var(--space-8, 8px);
    padding-inline: var(--space-24, 24px) var(--space-12, 12px);
    aspect-ratio: auto;
  }
  .kodomo-gnav__icon-wrap {
    max-width: 60px;
  }
  .kodomo-text-nav {
    margin-block-start: var(--space-160, 160px);
  }
  .kodomo-text-nav__list {
    grid-template-columns: 1fr;
    place-items: center;
    /* max-width: unset; */
    margin-inline: auto;
  }
  .kodomotop-txtbox {
    margin-block-start: var(--space-24, 24px);
    padding-inline: var(--space-16, 16px);
  }
  .kodomotop-description:not(h2, h3, h4, h5, h6) {
    /* typography */
    font-size: var(--font-size-16);
  }
  .kodomotop-description h2 {
    font-size: var(--font-size-22);
  }
  .kodomotop-description h3 {
    font-size: var(--font-size-20);
  }
}