* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* 別ページからの遷移してきた場合はスクロール不要 */
html.no-smooth-scroll {
  scroll-behavior: auto;
}

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  background-color: #e9ecec;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  width: 100%;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.key-visual {
  background-color: white;
  background-image: url("../assets/Background_B.svg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: clamp(6.816px, 2.13vw, 13.632px);
  background-repeat: repeat-x;
  background-position: 5% 95%;
  overflow: hidden;
}

.key-visual img {
  width: 100%;
  height: auto;
  max-width: 1080px;
}

.key-visual div {
  display: flex;
  width: 100%;
  max-width: 1080px;
  padding: clamp(6.816px, 2.13vw, 20px) clamp(3.424px, 1.07vw, 16px);
}

.key-visual .sp-title {
  display: none;
  width: clamp(176.64px, 55.2vw, 529.92px);
  height: auto;
}

.key-visual .pc-title {
  display: none;
  width: 923px;
  height: 72px;
}

.key-visual .sp-text {
  display: none;
  width: clamp(300.384px, 93.87vw, 898.56px);
  margin-top: clamp(10.24px, 3.2vw, 20.48px);
}

.key-visual .pc-text {
  display: none;
  margin-top: 32px;
}

@media screen and (max-width: 1079px) {
  .key-visual .sp-title {
    display: block;
  }

  .key-visual .sp-text {
    display: block;
  }
}

@media screen and (min-width: 1080px) {
  .key-visual .pc-title {
    display: block;
  }

  .key-visual .pc-text {
    display: block;
  }
}

.key-visual div img {
  width: clamp(131.424px, 41.07vw, 293px);
}

.key-visual .picture {
  margin-top: clamp(-80px, -10.67vw, -34.144px);
  width: clamp(512px, 160vw, 1728px);
}

.key-visual p {
  margin-top: clamp(8.544px, 2.67vw, 17.088px);
  color: #616f6f;
  font-size: clamp(9.376px, 2.93vw, 18.752px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}

.kids-title {
  background-color: white;
  padding: clamp(13.664px, 4.27vw, 40.992px) 0 clamp(13.664px, 4.27vw, 40.992px)
    0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: clamp(3.424px, 1.07vw, 6.848px);
}

.kids-title img {
  height: clamp(40.96px, 12.8vw, 81.92px);
  width: clamp(40.96px, 12.8vw, 81.92px);
}

.kids-title h2 {
  color: #3d4545;
  text-align: center;
  font-size: clamp(17.056px, 5.33vw, 34.112px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.kids-contents {
  background-color: #fdf0cd;
  background-image: url("../assets/Background_B.svg");
  background-size: cover;
  background-position: 70% 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: clamp(8.544px, 2.67vw, 17.088px);
  padding-top: clamp(13.664px, 4.27vw, 27.328px);
  background-repeat: repeat-x;
  overflow: hidden;
}

.kids-contents h2 {
  color: #e97400;
  text-align: center;
  font-size: clamp(15.36px, 4.8vw, 30.72px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-radius: clamp(20.48px, 6.4vw, 40.96px);
  background: #fff;
  padding: clamp(5.12px, 1.6vw, 10.24px) clamp(13.664px, 4.27vw, 27.328px);
}

.kids-contents p {
  color: #3d4545;
  font-size: clamp(12.8px, 4vw, 25.6px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: clamp(279.04px, 87.2vw, 941.76px);
}

.kids-contents img {
  width: 100%;
  max-width: 1080px;
  height: auto;
}

.aeon-title {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: clamp(3.424px, 1.07vw, 10.272px);
  padding-top: clamp(13.664px, 4.27vw, 27.328px);
  padding-bottom: clamp(13.664px, 4.27vw, 27.328px);
}

.aeon-title img {
  width: clamp(134.816px, 42.13vw, 269.632px);
  height: auto;
}

.aeon-title h2 {
  color: #3d4545;
  text-align: center;
  font-size: clamp(11.936px, 3.73vw, 23.872px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.aeon-contents {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.aeon-contents img {
  border-top-left-radius: clamp(13.664px, 4.27vw, 27.328px);
  border-top-right-radius: clamp(13.664px, 4.27vw, 27.328px);
  width: clamp(300.384px, 93.87vw, 960px);
  height: auto;
}

.aeon-contents video {
  border: solid clamp(3.424px, 1.07vw, 11.556px) #fff;
  border-radius: clamp(13.664px, 4.27vw, 27.328px);
  height: clamp(133.12px, 41.6vw, 449.28px);
}

.aeon-contents div {
  background-color: #bae8f1;
  background-image: url("../assets/bg_pattern.svg");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(300.384px, 93.87vw, 960px);
  padding: clamp(13.664px, 4.27vw, 46.116px) 0 clamp(17.056px, 5.33vw, 57.564px)
    0;
  border-bottom-left-radius: clamp(13.664px, 4.27vw, 27.328px);
  border-bottom-right-radius: clamp(13.664px, 4.27vw, 27.328px);
  background-repeat: repeat-x;
  overflow: hidden;
}

.kidzania-title {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: clamp(3.424px, 1.07vw, 10.272px);
  padding: clamp(13.664px, 4.27vw, 40.992px) 0;
}

.kidzania-title img {
  width: clamp(102.4px, 32vw, 204.8px);
  height: auto;
}

.kidzania-title h2 {
  color: #3d4545;
  text-align: center;
  font-size: clamp(11.936px, 3.73vw, 23.872px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.kidzania-contents {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.kidzania-contents img {
  border-top-left-radius: clamp(13.664px, 4.27vw, 46.116px);
  border-top-right-radius: clamp(13.664px, 4.27vw, 46.116px);
  width: clamp(300.384px, 93.87vw, 1010.88px);
  max-width: 960px;
  height: auto;
}

.kidzania-contents div {
  background-color: #f4c4c4;
  background-image: url("../assets/bg_pattern.svg");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: clamp(300.384px, 93.87vw, 960px);
  padding-top: clamp(13.664px, 4.27vw, 46.116px);
  border-bottom-left-radius: clamp(13.664px, 4.27vw, 46.116px);
  border-bottom-right-radius: clamp(13.664px, 4.27vw, 46.116px);
  background-repeat: repeat-x;
  overflow: hidden;
}

.kidzania-contents .copyright {
  width: clamp(95.584px, 29.87vw, 322.596px);
  border-radius: 0%;
  margin-left: clamp(187.744px, 58.67vw, 633.636px);
  margin-top: clamp(10.24px, 3.2vw, 34.56px);
}

.kidzania-contents video {
  border: solid clamp(3.424px, 1.07vw, 11.556px) #fff;
  border-radius: clamp(13.664px, 4.27vw, 27.328px);
  height: clamp(133.12px, 41.6vw, 449.28px);
}

.border {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: clamp(34.144px, 10.67vw, 102.432px);
  padding-bottom: clamp(17.056px, 5.33vw, 51.168px);
}

.border div {
  background-color: #dbe0e0;
  height: clamp(1.696px, 0.53vw, 3.392px);
  width: clamp(292.704px, 91.47vw, 987.876px);
  border-radius: clamp(0.864px, 0.27vw, 1.728px);
}

@media screen and (min-width: 1080px) {
  .border div {
    width: 100%;
  }
}

.parents-title {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: clamp(10.24px, 3.2vw, 30.72px) 0 clamp(13.664px, 4.27vw, 40.992px) 0;
}

.parents-title img {
  height: clamp(54.624px, 17.07vw, 109.248px);
  width: clamp(54.624px, 17.07vw, 109.248px);
}

.parents-title h2 {
  color: #3d4545;
  text-align: center;
  font-size: clamp(17.056px, 5.33vw, 34.112px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  max-width: clamp(187.744px, 58.67vw, 375.488px);
}

.parents-contents {
  background-color: #fdf0cd;
  background-image: url("../assets/Background_B.svg");
  background-size: cover;
  background-position: 70% 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: clamp(13.664px, 4.27vw, 40.992px);
  padding: clamp(13.664px, 4.27vw, 40.992px) clamp(6.816px, 2.13vw, 20.448px)
    clamp(17.056px, 5.33vw, 51.168px) clamp(6.816px, 2.13vw, 20.448px);
  background-repeat: repeat-x;
  overflow: hidden;
}

.parents-contents h2 {
  width: clamp(279.04px, 87.2vw, 941.76px);
  max-width: 888px;
  color: #3d4545;
  font-size: clamp(12.8px, 4vw, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.parents-contents div {
  display: flex;
  gap: clamp(3.424px, 1.07vw, 8px);
}

.parents-contents p {
  color: #3d4545;
  font-size: clamp(10.24px, 3.2vw, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
}

.parents-contents img {
  width: clamp(307.2px, 96vw, 960px);
  height: auto;
}

.study-report {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: clamp(27.296px, 8.53vw, 54.592px) 0 clamp(13.664px, 4.27vw, 27.328px)
    0;
}

.study-report h2 {
  color: #3d4545;
  text-align: center;
  font-size: clamp(15.36px, 4.8vw, 30.72px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.study-report p {
  color: var(--Semantic-Text-Primary, #3d4545);
  text-align: center;
  font-size: clamp(11.936px, 3.73vw, 23.872px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-top: clamp(6.816px, 2.13vw, 13.632px);
}

.study-report img {
  width: clamp(300.384px, 93.87vw, 960px);
  height: auto;
  border-radius: clamp(13.664px, 4.27vw, 27.328px);
  margin-top: clamp(15.36px, 4.8vw, 30.72px);
}

.assessment {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: clamp(13.664px, 4.27vw, 27.328px);
  padding: clamp(13.664px, 4.27vw, 27.328px) 0 clamp(20.48px, 6.4vw, 40.96px) 0;
}

.assessment h2 {
  color: #3d4545;
  text-align: center;
  font-size: clamp(17.056px, 5.33vw, 34.112px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.assessment p {
  color: #3d4545;
  text-align: center;
  font-size: clamp(11.936px, 3.73vw, 23.872px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: clamp(6.816px, 2.13vw, 13.632px);
}

.assessment .supervision {
  display: flex;
  padding: clamp(6.816px, 2.13vw, 22px) 0 clamp(6.816px, 2.13vw, 22px)
    clamp(6.816px, 2.13vw, 22px);
  align-items: center;
  justify-content: center;
  width: clamp(300.384px, 93.87vw, 960px);
  gap: clamp(6.816px, 2.13vw, 24px);
  border-radius: clamp(10.24px, 3.2vw, 20.48px);
  background: #e6f4cb;
}

.assessment h3 {
  color: #06a057;
  text-align: center;
  font-size: clamp(11.936px, 3.73vw, 38px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.assessment h4 {
  color: #3d4545;
  font-size: clamp(11.936px, 3.73vw, 38px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.assessment .separation {
  background-color: #06a057;
  width: clamp(1.696px, 0.53vw, 5.724px);
  height: clamp(35.84px, 11.2vw, 120.96px);
  border-radius: clamp(0.864px, 0.27vw, 2.916px);
}

.assessment img {
  width: clamp(300.384px, 93.87vw, 960px);
  height: auto;
  border-radius: clamp(13.664px, 4.27vw, 27.328px);
}

/* 下記はアプリからは見えない */

.bottom-description {
  background-color: #f7f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.bottom-description > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: clamp(20.48px, 6.4vw, 40px);
  padding: clamp(27.296px, 8.53vw, 40px) clamp(13.664px, 4.27vw, 32px)
    clamp(23.904px, 7.47vw, 48px) clamp(13.664px, 4.27vw, 32px);
}

.bottom-description h2 {
  color: #3d4545;
  text-align: center;
  font-size: clamp(17.056px, 5.33vw, 36px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.bottom-description h2 > span {
  font-size: clamp(13.664px, 4.27vw, 24px);
}

.bottom-description h3 {
  width: clamp(291.84px, 91.2vw, 1016px);
  border-radius: clamp(10.24px, 3.2vw, 20.48px);
  background: #e9ecec;
  padding: clamp(6.816px, 2.13vw, 13.632px) clamp(13.664px, 4.27vw, 27.328px);
  color: #3d4545;
  font-size: clamp(13.664px, 4.27vw, 27.328px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.bottom-description .main-description {
  max-width: clamp(291.84px, 91.2vw, 952px);
  display: flex;
  flex-direction: column;
}

.bottom-description h4 {
  color: #3d4545;
  font-size: clamp(13.664px, 4.27vw, 27.328px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.bottom-description h4:nth-of-type(2) {
  margin-top: clamp(13.664px, 4.27vw, 32px);
}

.bottom-description p {
  margin-top: clamp(6.816px, 2.13vw, 13.632px);
  color: #3d4545;
  font-size: clamp(11.936px, 3.73vw, 23.872px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.bottom-description p:nth-of-type(2) {
  max-width: clamp(201.376px, 62.93vw, 402.752px);
}

.bottom-description ul {
  margin-top: clamp(6.816px, 2.13vw, 13.632px);
  list-style: none;
  padding-left: 1em;
  color: #616f6f;
  font-size: clamp(10.24px, 3.2vw, 20.48px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
  max-width: 952px;
}

.bottom-description ul li::marker {
  content: "※ ";
}

.bottom-description ul li {
  margin-top: clamp(6.816px, 2.13vw, 13.632px);
  max-width: 952px;
}

.bottom-description ul:nth-of-type(1) {
  margin-top: 0;
}

.bottom-description .about-plan {
  margin-top: 16px;
  display: flex;
  padding: 4px 4px 8px 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-radius: 8px;
  background: #fff;
}

.bottom-description .separation {
  display: none;
}

.bottom-description h5 {
  white-space: nowrap;
  color: var(--Semantic-Text-SubText, #889797);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 15.6px */
  text-decoration: underline;
}

.bottom-description h6 {
  white-space: nowrap;
  color: var(--Semantic-Text-Primary, #3d4545);
  text-align: right;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.bottom-description .links {
  display: flex;
  flex-direction: row;
  justify-content: end;
  width: 100%;
  gap: 8px;
}

.bottom-description .links a {
  display: flex;
}

.bottom-description .links .link-text {
  color: #2f6cdc;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-decoration-line: underline;
  white-space: nowrap;
}

@media screen and (min-width: 725px) {
  .bottom-description .about-plan {
    flex-direction: row;
    align-items: center;
    padding: 16px 24px;
    gap: 16px;
  }

  .bottom-description h5 {
    text-decoration: none;
    font-size: 16px;
  }

  .bottom-description h6 {
    font-size: 16px;
  }

  .bottom-description .links {
    justify-content: start;
  }

  .bottom-description .links .link-text {
    font-size: 16px;
  }

  .bottom-description .separation {
    display: block;
    background-color: #889797;
    width: 2px;
    height: 24px;
    border-radius: 1px;
  }
}

.bottom-description .how-to-start {
  width: 100%;
  margin-top: clamp(20.48px, 6.4vw, 69.12px);
}

.bottom-description .end-line {
  height: 1px;
  width: 100%;
  padding-left: -32px;
  background-color: #616f6f;
}

.bottom-description .line {
  height: 2px;
  padding: 0;
  background-color: #e9ecec;
  width: 100%;
  max-width: none;
}

.bottom-description > .downloads-now {
  padding-top: 20px;
  padding-bottom: clamp(17.056px, 5.33vw, 28px);
}

.bottom-description .downloads {
  display: flex;
  flex-direction: row;
  gap: clamp(10.24px, 3.2vw, 31px);
  margin-top: 12px;
}

.bottom-description .apple-store {
  width: clamp(92.16px, 28.8vw, 208px);
}

.bottom-description .google-play {
  width: clamp(116.064px, 36.27vw, 259px);
}

.bottom-description > .contact-us {
  padding-top: clamp(6.816px, 2.13vw, 28px);
  padding-bottom: clamp(23.904px, 7.47vw, 48px);
  gap: 0;
}

.bottom-description > .contact-us h2 {
  font-size: clamp(13.664px, 4.27vw, 30px);
}

.bottom-description > .contact-us a:first-of-type {
  margin-top: clamp(6.816px, 2.13vw, 15px);
}

.bottom-description > .contact-us a:nth-of-type(2) {
  margin-top: clamp(13.664px, 4.27vw, 30px);
}

.bottom-description > .other-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  gap: 22px;
  padding: 11px 24px;
}

.bottom-description > .other-links > a {
  color: #616f6f;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
}

.bottom-description .company {
  margin-top: 0;
  padding-top: 24px;
  padding-bottom: 16px;
  color: #616f6f;
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

@media screen and (min-width: 725px) {
  .bottom-description > .other-links {
    flex-direction: row;
    justify-content: flex-end;
    padding: 11px 36px;
  }

  .bottom-description > .other-links > a {
    font-size: 14px;
  }

  .bottom-description .company {
    padding-top: 96px;
    padding-bottom: 48px;
    font-size: 14px;
  }
}

/* ボタン */

.basic-button {
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(300.384px, 93.87vw, 954px);
  height: clamp(34.144px, 10.67vw, 77px);
  border-radius: 61.44px;
  border: 1.92px solid var(--Neutral-600, #b2bbbb);
  position: relative;
}

.basic-button span {
  white-space: nowrap;
  color: #616f6f;
  text-align: center;
  font-size: clamp(11.104px, 3.47vw, 25px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.basic-button img {
  position: absolute;
  right: clamp(13.664px, 4.27vw, 30px);
  display: block;
  width: clamp(13.664px, 4.27vw, 30px);
}