body {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

.kids-mainvisual {
  /* layout */
  position: relative;
  width: 100%;
  background: linear-gradient(to bottom, #9dacdc, #f4f6fb 100%);
  overflow: hidden;
  padding-block-end: clamp(0.5rem, -1.136rem + 8.18vw, 5rem);
}

.kids-mainvisual::before {
  /* layout */
  content: '';
  position: absolute;
  inset-inline-start: -50px;
  inset-block-start: 0;
  width: 100%;
  max-width: calc(1054px / 2);
  height: 100%;
  max-height: calc(656px / 2);
  /* style */
  background: url(../img/kidsmainvisual-left.png) no-repeat;
  background-size: contain;
}

.kids-mainvisual::after {
  /* layout */
  content: '';
  position: absolute;
  inset-inline-end: -50px;
  inset-block-start: 0;
  width: 100%;
  max-width: calc(1015px / 2);
  height: 100%;
  max-height: calc(996px / 2);
  /* style */
  background: url(../img/kidsmainvisual-right.png) no-repeat;
  background-size: contain;
}

.kids-mainvisual__decoration {
  /* layout */
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.kids-mainvisual__container {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-40, 40px);
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-block: var(--space-64, 64px) 200px;
  /* style */
  z-index: 1;
}

.kids-mainvisual__container::before {
  /* layout */
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(204 / 1400 * 100%);
  width: calc(229 / 1400 * 100%);
  height: auto;
  aspect-ratio: 229 / 366;

  /* style */
  background: url(../img/kidsmv-deco.png) center center no-repeat;
  background-size: contain;
}

.kids-mainvisual__container::after {
  /* layout */
  content: '';
  position: absolute;
  inset-inline-end: calc(calc(18 / 1400 * 100%) * -1);
  inset-block-start: calc(123 / 1400 * 100%);
  width: calc(269 / 1400 * 100%);
  height: 100%;
  max-height: 237px;
  /* style */
  background: url(../img/kidsmv-sun.png) center center no-repeat;
  background-size: contain;
}

.kids-mainvisual__title {
  /* layout */
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 300px;
  max-width: 822.2px;
  margin-inline: auto;
  padding-inline: var(--space-16, 16px);
}

.kids-mainvisual__title img {
  /* layout */
  width: 100%;
  height: auto;
}

.kids-mainvisual__title img:nth-child(1) {
  display: block;
}

.kids-mainvisual__title img:nth-child(2) {
  display: none;
}

.kids-mainvisual__link {
  /* layout */
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 280px;
  max-width: 580px;
  margin-inline: auto;
  padding-inline: var(--space-16, 16px);
  /* style */
  z-index: 2;
}

.kids-mainvisual__link img {
  /* layout */
  width: 100%;
  height: auto;
  /* transition */
  transition: opacity 0.3s ease-in-out;
  grid-area: 1 / 1;
}

.kids-mainvisual__link::before {
  /* layout */
  content: '';
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  /* style */
  background: url(../img/kidsmv-link-hover.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  /* transition */
  transition: opacity 0.3s ease-in-out;
}

.kids-mainvisual__link:hover img {
  opacity: 0;
}

.kids-mainvisual__link:hover::before {
  opacity: 1;
}

.kids-nav {
  /* layout */
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-block-start: var(--space-40, 40px);
  padding-inline: var(--space-16, 16px);
}

.kids-nav__list {
  /* layout */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-32, 32px);
  width: 100%;
  margin-inline: auto;
}

.kids-nav__item {
  /* layout */
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* 8分割して配置 */
.kids-nav__item:nth-child(1) {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.kids-nav__item:nth-child(2) {
  grid-column: 4 / span 2;
  grid-row: 1;
}

.kids-nav__item:nth-child(3) {
  grid-column: 6 / span 2;
  grid-row: 1;
}

.kids-nav__item:nth-child(4) {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.kids-nav__item:nth-child(5) {
  grid-column: 3 / span 2;
  grid-row: 2;
}

.kids-nav__item:nth-child(6) {
  grid-column: 5 / span 2;
  grid-row: 2;
}

.kids-nav__item:nth-child(7) {
  grid-column: 7 / span 2;
  grid-row: 2;
}

.kids-nav__link {
  /* layout */
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 230px;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  cursor: pointer;
}

.kids-nav__image {
  width: 100%;
  height: auto;
  position: relative;
}

.kids-nav__image img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}

.kids-nav__image::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.kidsmenu-01::after {
  background-image: url(../img/kidsmenu01hover.png);
}

.kidsmenu-02::after {
  background-image: url(../img/kidsmenu02hover.png);
}

.kidsmenu-03::after {
  background-image: url(../img/kidsmenu03hover.png);
}

.kidsmenu-04::after {
  background-image: url(../img/kidsmenu04hover.png);
}

.kidsmenu-05::after {
  background-image: url(../img/kidsmenu05hover.png);
}

.kidsmenu-06::after {
  background-image: url(../img/kidsmenu06hover.png);
}

.kidsmenu-07::after {
  background-image: url(../img/kidsmenu07hover.png);
}

/* ホバー時の動作 */
.kids-nav__link:hover .kids-nav__image img {
  opacity: 0;
}

.kids-nav__link:hover .kids-nav__image::after {
  opacity: 1;
}

/* お知らせ */
.kids-news {
  position: relative;
  width: 100%;
  margin-block-start: -20px;
}

.kids-news::before {
  /* layout */
  content: '';
  position: absolute;
  inset-inline-start: 0;
  /* 画像の下端を親要素の上端に合わせる */
  inset-block-end: 99%;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 300;

  /* style */
  background: url(../img/kidsmv-bgbottom.png) center top no-repeat;
  background-size: 100% auto;
}

.kids-news::after {
  /* layout */
  content: '';
  position: absolute;
  /* inset-inline-start: calc(1200 / 1400 * 100%); */
  inset-inline-end: 0;
  inset-block-start: calc(calc(680 / 1400 * 100%) * -1);
  width: clamp(4.375rem, -0.852rem + 26.14vw, 13.4rem);
  height: 100%;
  /* style */
  background: url(../img/submarine.png) center center no-repeat;
  background-size: contain;
  overflow: hidden;
  z-index: 1;
}

.kids-news__wrapper {
  /* layout */
  width: 100%;
  height: 100%;
  background: #4a79b5;
  margin-block-start: calc(var(--space-16, 16px) * -1);
  /* padding-block-start: var(--space-40, 40px); */
  padding-block-end: var(--space-80, 80px);
}

.kids-news__container {
  /* layout */
  display: flex;
  flex-direction: column;
  row-gap: var(--space-40, 40px);
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--space-16, 16px);
}

.kids-news__heading {
  /* layout */
  position: relative;
  width: fit-content;
  margin-inline: auto;
  padding-block-end: var(--space-12, 12px);
  /* style */
  color: var(--color-text-inverse);
  font-size: var(--font-size-32);
  font-weight: var(--fontweight-bold);
  text-align: center;
}

.kids-news__heading::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  transform: translateY(50%);
  display: block;
  background: url(../img/kids-ribbon.png) center center no-repeat;
  background-size: contain;
  width: 100%;
  height: 50px;
}

.kids-news__list {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-24, 24px);
}

.kids-news__link {
  display: grid;
  grid-template-columns: minmax(auto, 14em) 1fr 40px;
  column-gap: var(--space-24, 24px);
  padding-block: var(--space-24, 24px);
  padding-inline: var(--space-40, 40px) var(--space-24, 24px);
  align-items: center;
  /* style */
  background: var(--color-background-default);
  border-radius: var(--rounded-16, 16px);
  border: 1px solid #68d8e1;
  color: var(--color-text-accent);
  text-decoration: none;
  /* transition */
  transition: background-color 0.3s ease-in-out;
}

.kids-news__date {
  /* layout */
  width: fit-content;
  text-align: start;
  /* style */
  color: var(--color-text-default);
  /* typography */
  font-size: var(--font-size-22);
  font-weight: var(--fontweight-regular);
  letter-spacing: var(--tracking-50);
}

.kids-news__title {
  display: block;
  width: fit-content;
  text-align: start;
  /* style */
  color: var(--color-text-default);
  /* typography */
  font-size: var(--font-size-23);
  font-weight: var(--fontweight-semibold);
  line-height: 1.4;
}

.kids-news__link::after {
  content: '';
  background: url(../img/kids-arrow.png) center center no-repeat;
  background-size: contain;
  width: 32px;
  height: 32px;
  justify-self: center;
}

.kids-news__link:hover {
  background: #c8f1f3;
}

.kids-news__more {
  display: grid;
  grid-template-columns: 1fr 13px;
  place-items: center;
  column-gap: var(--space-40, 40px);
  width: fit-content;
  margin-inline: auto;
  padding-block: var(--space-24, 24px);
  padding-inline: var(--space-64, 64px) var(--space-24, 24px);
  /* style */
  color: var(--color-text-accent);
  background: #b4edf0;
  border-radius: var(--rounded-10, 10px);
  outline: 6px solid var(--border-inverse);
  text-decoration: none;
  text-align: center;
  /* typography */
  font-size: var(--font-size-23);
  font-weight: var(--fontweight-medium);
  /* transition */
  transition: background-color 0.3s ease-in-out;
}

.kids-news__more:hover {
  background: #b5cef1;
}

.kids-news__more::after {
  content: '';
  display: block;
  background: url(../img/kids-chevron.png) center center no-repeat;
  background-size: contain;
  width: 13px;
  height: 21px;
}

.kids .site-footer {
  margin-block-start: unset;
}
@media (width > 1400px) {
  .kids-news::after {
    /* layout */
    content: '';
    position: absolute;
    inset-inline-end: calc((100% - 1400px) / 2 + (-30px));
    inset-block-start: -300px;
    width: 200px;
    height: 100%;
    /* style */
    background: url(../img/submarine.png) center center no-repeat;
    background-size: contain;
    z-index: 1;
  }
}
@media (width <= 1080px) {
  .kids-mainvisual::before,
  .kids-mainvisual::after {
    width: 50%;
    height: 50%;
    max-width: unset;
    max-height: unset;
  }

  .kids-mainvisual__container::before {
    inset-block-start: calc(300 / 1400 * 100%);
  }

  .kids-mainvisual__container::after {
    inset-block-start: -2%;
  }

  .kids-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-32, 32px);
    width: 100%;
    margin-inline: auto;
  }

  .kids-nav__item {
    /* layout */
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 230px;
    height: 100%;
  }
}

@media (width <= 768px) {
  .kids-news__wrapper {
    padding-block-start: var(--spce-32, 32px);
  }
  .kids-news__link {
    grid-template-columns: 1fr 32px;
    gap: var(--space-4, 4px) var(--space-16, 16px);
    padding-block: var(--space-16, 16px);
    padding-inline: var(--space-16, 16px) var(--space-8, 8px);
  }

  .kids-news__date {
    grid-column: 1;
    font-size: var(--font-size-16);
  }

  .kids-news__link::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .kids-news__title {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--font-size-16);
  }
}
@media (width <= 540px) {
  .kids-nav__item {
    max-width: 160px;
  }

  .kids-nav__link {
    max-width: 160px;
  }

  .kids-news__wrapper {
    padding-block-end: var(--space-40, 40px);
  }

  .kids-news__heading {
    /* typography */
    font-size: var(--font-size-24);
  }

  .kids-news__more {
    display: grid;
    grid-template-columns: 1fr 13px;
    place-items: center;
    column-gap: var(--space-40, 40px);
    width: fit-content;
    margin-inline: auto;
    padding-block: var(--space-24, 24px);
    padding-inline: var(--space-40, 40px) var(--space-24, 24px);
    /* typography */
    font-size: var(--font-size-18);
    white-space: nowrap;
  }
}

@media (width <= 480px) {
  .kids-mainvisual__container {
    row-gap: var(--space-32, 32px);
    padding-block-end: var(--space-64, 64px);
  }

  .kids-mainvisual__container::before {
    inset-block-start: 26%;
  }

  .kids-mainvisual__container::after {
    inset-block-start: -4%;
  }

  .kids-news__wrapper {
    padding-block-end: var(--space-40, 40px);
  }

  .kids-news__heading {
    /* typography */
    font-size: var(--font-size-24);
  }

  .kids-nav__item {
    max-width: 140px;
  }

  .kids-news__more {
    display: grid;
    grid-template-columns: 1fr 13px;
    place-items: center;
    column-gap: var(--space-40, 40px);
    width: fit-content;
    margin-inline: auto;
    padding-block: var(--space-24, 24px);
    padding-inline: var(--space-40, 40px) var(--space-24, 24px);
    /* typography */
    font-size: var(--font-size-18);
    white-space: nowrap;
  }
}