@charset "utf-8";

:root {
  --yellow: #FFFD94;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

/* ===================================
   Base Styles
=================================== */
a:hover {
  opacity: .8;
  transition: .2s;
}

img {
  max-width: 100%;
}

.yellow {
  color: var(--yellow);
}

.relative {
  position: relative;
}

.font-cabin {
  font-family: "Cabin", sans-serif;
  font-weight: 600;
}

.font-inter {
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* ===================================
   Header
=================================== */
header {
  width: 100%;
  max-width: 630px;
  height: 12vw;
  margin: 0 auto;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  width: 15vw;
  margin-left: 6vw;
}

.header__cv {
  font-size: 14px;
  line-height: 12vw;
  color: #fff;
  background: #E34B6F;
  padding: 0 14px;
  text-align: center;
}

.header__cv a {
  transition: all .3s;
  font-weight: bold;
}

/* ===================================
   Wrapper
=================================== */
#wrapper {
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
  overflow: hidden;
}

/* ===================================
   MV Section
=================================== */
#mv {
  background: #FFF5F3;
  padding-bottom: 9.5vw;
}

#mv .mv__text {
  padding: 4.8vw 10px 0;
}

#mv .mv__text__sub {
  font-size: 13px;
  color: #fff;
  background: #008CA7;
  margin: 2.9vw auto 0;
  padding: 1.6vw;
  text-align: center;
  border-radius: 50vw;
  letter-spacing: .226em;
}

#mv .mv__text__headline {
  font-size: 7vw;
  margin-top: 2.9vw;
  text-align: center;
  letter-spacing: .12em;
}

#mv .mv__text__headline .large {
  font-size: 9.5vw;
}

#mv .mv__text__headline .small {
  font-size: 6vw;
}

/* ===================================
   CTA Button
=================================== */
.btn__cv {
  display: flex;
  width: 89vw;
  margin: 4vw auto 0;
  background: #EA4A70;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 16px 10px;
  line-height: 1.5;
  border-radius: 50px;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, .25);
  transition: all .3s;
}

.btn__cv:hover {
  background: #fff;
  border: 1px solid #EA4A70;
  color: #EA4A70;
  font-weight: bold;
  cursor: pointer;
}

/* ===================================
   Method Section
=================================== */
#method {
  padding: 12.7vw 3.3vw 9.5vw;
  background: #EAF6F6;
}

#method .headline__sub {
  font-size: 16px;
  font-weight: 400;
  margin: 0 auto;
  padding: 1.6vw;
  color: #fff;
  background: #1F4D5D;
  text-align: center;
  border-radius: 50vw;
  letter-spacing: .347em;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#method .headline {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 4vw;
  font-weight: 500;
  margin-top: 4.8vw;
  letter-spacing: .0625em;
}

#method .headline span {
  font-size: 4.5vw;
  color: #fff;
  background: #007A92;
  margin-right: 1vw;
  padding: 0.5vw 3.5vw;
  border-radius: 1.6vw;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: .114em;
}

#method .contentsBox {
  background: #fff;
  margin: 7.9vw auto 0;
  border-radius: 3.2vw;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#method .small {
  font-size: 10px;
  margin: 8px 0;
  color: #333;
  line-height: 1.3;
}

#method .contentsBox__headline {
  color: #fff;
  background: #15B4D3;
  padding: 2.4vw 2.4vw 3.2vw;
  border-radius: 3.2vw 3.2vw 0 0;
  text-align: center;
  letter-spacing: .068em;
}

#method .contentsArea .contentsBox .contentsBox__headline {
  font-size: 14px;
  letter-spacing: .147em;
  line-height: 1.333;
}

#method .contentsArea .contentsBox:first-of-type .contentsBox__headline .small,
#method .contentsArea .contentsBox:first-of-type .contentsBox__headline .middle {
  font-size: 14px;
  margin: 0 -1%;
}

#method .contentsArea .contentsBox:first-of-type .contentsBox__headline .large {
  font-size: 16px;
}

#method .contentsArea .contentsBox__area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#method .contentsArea .contentsBox .contentsBox__area img {
  width: 26.5vw;
  margin: -1.6vw 6vw 0 2.7vw;
}

#method .contentsArea .contentsBox__area .contentsBox__area__text {
  font-size: 14px;
  font-weight: 500;
  color: #2A3234;
  line-height: 1.739;
  letter-spacing: .076em;
}

#method .contentsArea .contentsBox:nth-child(2) .contentsBox__headline {
  font-size: 14px;
}

#method .contentsArea .contentsBox:nth-child(2) .contentsBox__headline .middle {
  font-size: 14px;
}

#method .contentsArea .contentsBox:nth-child(2) .contentsBox__headline .large {
  font-size: 16px;
}

#method .contentsArea .contentsBox:nth-child(3) .contentsBox__area__text {
  margin: 3.2vw 0;
}

/* ===================================
   Why Section
=================================== */
#why {
  padding: 12.7vw 16px 9.5vw;
  background: url("../img/why/bg.png") no-repeat;
  background-size: cover;
}

#why .headline__sub {
  font-size: 16px;
  font-weight: 400;
  margin: 0 auto;
  padding: 1.6vw;
  color: #fff;
  background: #007890;
  text-align: center;
  border-radius: 50vw;
  letter-spacing: .347em;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#why .headline__sub .font-cabin {
  font-family: "Cabin", sans-serif;
}

#why .headline {
  margin-top: 3.2vw;
}

#why table {
  font-weight: 400;
  width: 100%;
  margin-top: 7.6vw;
}

#why thead th {
  font-weight: 400;
  width: 100%;
}

#why thead th,
#why table td {
  vertical-align: bottom;
  text-align: center;
}

#why thead th:nth-child(2) div {
  font-size: 14px;
  width: 34vw;
  color: #fff;
  background: #15B4D3;
  margin-right: 0.3vw;
  padding: 5.7vw 0;
  letter-spacing: .154em;
  border-radius: 2.7vw 2.7vw 0 0;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

#why thead th:nth-child(3) div {
  font-size: 14px;
  width: 30vw;
  color: #fff;
  background: #797770;
  margin-top: 4vw;
  margin-left: 0.3vw;
  padding: 5.7vw 0;
  letter-spacing: .258em;
  border-radius: 2.7vw 2.7vw 0 0;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

#why tbody tr {
  margin: 0.16vw;
}

#why tbody td:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  background: #478AA4;
  margin: 0.16vw;
  padding: 1.6vw 0.6vw;
  letter-spacing: .176em;
  border-radius: 2.7vw 0 0 2.7vw;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border: 1px solid #CCEBF6;
}

#why tbody td {
  font-size: 14px;
  font-weight: 600;
  height: 19.5vw;
  color: #1F4D5D;
  background: #fff;
  margin: 0.16vw;
  padding: 1.6vw;
  letter-spacing: .129em;
  vertical-align: middle;
  border: 4px solid #CCEBF6;
}

#why tbody td span {
  font-size: 16px;
  color: #E34B6F;
  margin: 0.16vw;
  padding: 1.6vw 0;
}

#why .text {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 10px;
  color: #1F4D5D;
}

/* ===================================
   Voice Section
=================================== */
#voice {
  padding-top: 15.9vw;
  background: url("../img/voice/bg.png") top center no-repeat, #FFF5F3;
  background-size: contain;
}

#voice .headline__sub {
  font-size: 16px;
  font-weight: 400;
  margin: 0 auto;
  width: 90%;
  padding: 1.6vw 0;
  color: #fff;
  background: #D85268;
  text-align: center;
  border-radius: 50vw;
  letter-spacing: .233em;
  text-shadow: 2px 2px 7px rgba(141, 0, 0, 1);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#voice .headline__sub span {
  font-size: 14px;
}

#voice .img01 {
  margin-top: 7.9vw;
}

#voice .img02 {
  display: block;
  width: 87vw;
  margin: 4.4vw auto 0;
}

/* ===================================
   Curriculum Section
=================================== */
#curriculum {
  padding: 18.1vw 0 7vw;
  background: url("../img/curriculum/bg.png") top center no-repeat, #EAF6F6;
  background-size: contain;
}

#curriculum .text {
  font-size: 14px;
  color: #25476C;
  margin-top: 8.7vw;
  text-align: center;
  line-height: 1.88;
  letter-spacing: .2em;
  padding: 0 2vw;
}

#curriculum .headline__sub {
  width: 90%;
  font-size: 16px;
  font-weight: 400;
  margin: 0 auto;
  padding: 1.6vw;
  color: #fff;
  background: #008CA7;
  text-align: center;
  border-radius: 50vw;
  letter-spacing: .233em;
  text-shadow: 2px 2px 7px rgba(7, 129, 169, 1);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#curriculum .img01 {
  display: block;
  width: 66.8vw;
  margin: 7.1vw auto 0;
}

#curriculum .img02 {
  margin-top: 5.2vw;
}

/* ===================================
   Plans Section
=================================== */
#plans {
  padding: 4.8vw 3.2vw 6.3vw;
  background: #FFF5F3;
}

#plans h2 img {
  display: block;
  width: 90vw;
  margin: 0 auto;
}

#plans .headline {
  margin-top: 9.5vw;
  font-size: 14px;
  color: #25476C;
  text-align: center;
  letter-spacing: .11em;
}

#plans .headline .small {
  font-size: 14px;
  color: #25476C;
  text-align: center;
}

#plans .headline>span {
  position: relative;
}

#plans .headline>span::before,
#plans .headline>span::after {
  content: "";
  background: url("../img/plans/line.png") no-repeat;
  background-size: cover;
  width: 3.8vw;
  height: 7.1vw;
  position: absolute;
  top: -30%;
  left: -6%;
}

#plans .headline>span::after {
  left: initial;
  right: -6%;
  transform: scale(-1, 1);
}

#plans .headline:has(+.plan__box02) {
  letter-spacing: .074em;
}

#plans .headline:has(+.plan__box02) .small {
  font-size: 14px;
}

#plans .headline:has(+.plan__box03) {
  font-size: 16px;
}

#plans .headline:has(+.plan__box03) .small {
  font-size: 14px;
}

#plans .headline:has(+.plan__box03)>span::before {
  left: -10%;
}

#plans .headline:has(+.plan__box03)>span::after {
  left: initial;
  right: -10%;
  transform: scale(-1, 1);
}

#plans .plan__box {
  margin-top: 3.2vw;
  padding: 3.2vw 3.2vw 4.8vw;
  background: #fff;
  border: 5px solid #FF7684;
  border-radius: 0 9.5vw 0 9.5vw;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#plans .plan__box.plan__box02 {
  border-color: #F08C01;
}

#plans .plan__box.plan__box03 {
  border-color: #D58BDD;
}

#plans .plan__box h3 {
  font-size: 16px;
  color: #FFFFFF;
  background: url("../img/plans/bg_h3_pink.png") no-repeat;
  background-size: 88% auto;
  width: 83.5vw;
  height: 10.5vw;
  letter-spacing: .01em;
  text-shadow: 1.5px 2.3px 3.8px rgba(111, 111, 111, .68);
  transform: translateX(-6%);
  padding: 2.2% 0 0 5.5%;
}

#plans .plan__box.plan__box02 h3 {
  background: url("../img/plans/bg_h3_orange.png") no-repeat;
  background-size: 88% auto;
}

#plans .plan__box.plan__box03 h3 {
  background: url("../img/plans/bg_h3_purple.png") no-repeat;
  background-size: 88% auto;
}

#plans .plan__box h3 .small {
  font-size: 14px;
}

#plans .plan__box.plan__box03 h3 .middle {
  font-size: 16px;
  letter-spacing: .013em;
}

#plans .plan__box.plan__box03 h3 .small {
  font-size: 14px;
  letter-spacing: .013em;
  margin-left: -2%;
}

#plans .plan__box .title {
  font-size: 14px;
  font-weight: 600;
  color: #25476C;
  margin: 4.8vw 3.2vw 0;
  line-height: 1.46;
  letter-spacing: .16em;
}

#plans .plan__box.plan__box03 .title .small {
  font-size: 14px;
  letter-spacing: .012em;
}

#plans .introduce {
  margin: 6.3vw 3.2vw 0;
}

#plans .introduce__box {
  margin-top: 1.6vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#plans .introduce__box .item {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  width: 17.6vw;
  color: #fff;
  background: #1F4D5D;
  margin-right: 8.9vw;
  padding: 1.3vw 0 1.3vw 1.3vw;
  border-radius: 1.6vw;
  text-align: center;
  letter-spacing: .214em;
}

#plans .plan__box .introduce__box-price .text {
  font-size: 16px;
  font-weight: 400;
  color: #FF2C5E;
}

#plans .plan__box .introduce__box-price .text .large {
  font-size: 9vw;
  font-weight: 600;
  letter-spacing: .014em;
}

#plans .plan__box .introduce__box-frequency .text {
  font-size: 14px;
  color: #25476C;
  letter-spacing: .01315em;
}

#plans .plan__box .introduce__box-frequency .text .large {
  font-size: 7vw;
  font-weight: 600;
}

#plans .plan__box .introduce__box-frequency .text .small {
  font-size: 14px;
  font-weight: 400;
}

#plans .plan__box .introduce__box-period .text {
  font-size: 14px;
  font-weight: 400;
  color: #25476C;
}

#plans .plan__box .introduce__box-period .text .large {
  font-size: 7vw;
  font-weight: 600;
}

#plans .plan__box.plan__box03 .introduce__box-period .text .middle,
#plans .plan__box.plan__box03 .introduce__box-period .text .small {
  font-size: 14px;
}

#plans .feature__box {
  margin-top: 7vw;
  padding: 7vw 2.9vw 3.5vw;
  border: 3px solid #008CA7;
  border-radius: 3.2vw;
  position: relative;
}

#plans .feature {
  font-size: 14px;
  width: 24vw;
  color: #fff;
  background: #008CA7;
  margin: 0 auto;
  padding: 1.3vw 0 1.3vw 1.3vw;
  border-radius: 1.6vw;
  text-align: center;
  letter-spacing: .214em;
  position: absolute;
  top: -8%;
  left: 0;
  right: 0;
}

#plans .feature__box .text {
  font-size: 14px;
  color: #25476C;
  line-height: 1.76;
  font-weight: normal;
  text-align: center;
}

#plans .feature__box .text .pink {
  font-size: 14px;
  font-weight: bold;
  color: #FF2C5E;
}

#plans .feature__box .text .bold {
  font-weight: bold;
}

/* ===================================
   FAQ Section
=================================== */
#faq {
  padding: 9.4vw 0;
  background: url("../img/faq/bg.png") top center no-repeat, #76B6D1;
  background-size: contain;
}

#faq .headline__sub {
  display: block;
  font-size: 16px;
  width: 64vw;
  margin: 0 auto;
  padding: 1.6vw;
  color: #25476C;
  background: #fff;
  text-align: center;
  border-radius: 50vw;
  letter-spacing: .269em;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#faq .headline__sub span {
  font-size: 14px;
}

#faq .headline-q {
  font-size: 14px;
  margin: 4.4vw auto 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, .25);
  line-height: 1.428;
  letter-spacing: .1304em;
}

#faq .headline-q .large {
  font-size: 14px;
  margin: 4.4vw auto 0;
  color: #FFFEAA;
}

#faq .headline-a {
  font-size: 14px;
  margin: 10vw auto 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, .25);
  line-height: 1.428;
  letter-spacing: .1304em;
  transform: translateX(-6%);
}

#faq .headline-a .large {
  font-size: 16px;
}

#faq .headline-a .large.underline {
  color: #FFE9E5;
  padding-bottom: 0.6vw;
  position: relative;
}

#faq .headline-a .large.underline::after {
  content: "";
  background: url("../img/faq/line_headline.png") no-repeat;
  width: 52.5vw;
  height: 1vw;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: 0;
}

#faq .headline-a .large .pink {
  color: #FFE9E5;
}

#faq .headline-a .large .pink .small {
  font-size: 14px;
}

#faq .box__area .faq__box {
  width: 90%;
  margin: 8.6vw auto 0;
  padding: 10px;
  background: #fff;
  border-radius: 3.2vw;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

#faq .box__area .faq__box:nth-child(n+2) {
  margin-top: 2.7vw;
}

#faq .box__area .faq__box .q,
#faq .faq__box .a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#faq .box__area .faq__box .q {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 1.6vw;
  position: relative;
  color: #1F4D5D;
}

#faq .box__area .faq__box .q::after {
  content: "";
  background: url("../img/faq/line_qa.png") no-repeat;
  width: 92vw;
  height: 0.5vw;
  background-size: contain;
  position: absolute;
  bottom: 0;
}

#faq .box__area .faq__box .q .ico {
  width: 10.8vw;
  margin-right: 4.4vw;
}

#faq .box__area .faq__box .a {
  font-size: 14px;
  font-weight: 400;
  margin-top: 1.6vw;
  line-height: 1.636;
}

#faq .box__area .faq__box .a .ico {
  width: 10.8vw;
  margin-left: 0;
  margin-right: 4.4vw;
  margin-bottom: auto;
}

/* ===================================
   Footer Visual
=================================== */
#footer__visual {
  position: relative;
}

#footer__visual .visual__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.8vw;
  margin: 0 auto;
}

#footer__visual .visual__text .text {
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 1.3714;
  letter-spacing: .142em;
}

#footer__visual .visual__text .text .large {
  font-size: 16px;
}

/* ===================================
   Footer
=================================== */
footer {
  padding: 12.4vw 0;
  color: #fff;
  background: #F6A1B6;
  text-align: center;
}

footer .footer__text {
  font-size: 14px;
  font-weight: normal;
}

footer .footer__text p {
  margin-top: 3.2vw;
}

/* ===================================
   PC Styles (630px以上)
=================================== */
@media screen and (min-width: 630px) {

  /* Header */
  header {
    height: 75px;
  }

  .header__logo {
    width: 94px;
    margin-left: 37px;
  }

  .header__cv {
    font-size: 21px;
    line-height: 75px;
  }

  /* MV */
  #mv {
    padding-bottom: 60px;
  }

  #mv .mv__text {
    padding: 30px 24px 0;
  }

  #mv .mv__text__sub {
    font-size: 18px;
    margin: 18px 20px 0;
    padding: 10px;
  }

  #mv .mv__text__headline {
    font-size: 44px;
    margin-top: 18px;
  }

  #mv .mv__text__headline .large {
    font-size: 60px;
  }

  #mv .mv__text__headline .small {
    font-size: 42px;
  }

  /* CTA Button */
  .btn__cv {
    width: 560px;
    margin: 25px auto 0;
    font-size: 25px;
  }

  /* Method */
  #method {
    padding: 80px 21px 60px;
  }

  #method .headline__sub {
    font-size: 19px;
    margin: 0 85px;
    padding: 10px;
  }

  #method .headline {
    font-size: 25px;
    margin-top: 30px;
  }

  #method .headline span {
    font-size: 29px;
    margin-right: 6px;
    padding: 3px 22px;
    border-radius: 10px;
  }

  #method .contentsBox {
    margin: 50px 30px 0;
    border-radius: 20px;
  }

  #method .contentsBox__headline {
    padding: 15px 15px 20px;
    border-radius: 20px 20px 0 0;
  }

  #method .contentsArea .contentsBox .contentsBox__headline {
    font-size: 25px;
  }

  #method .contentsArea .contentsBox:first-of-type .contentsBox__headline .small {
    font-size: 21px;
  }

  #method .contentsArea .contentsBox:first-of-type .contentsBox__headline .middle {
    font-size: 24px;
  }

  #method .contentsArea .contentsBox:first-of-type .contentsBox__headline .large {
    font-size: 28px;
  }

  #method .contentsArea .contentsBox .contentsBox__area img {
    width: 140px;
    margin: -10px 32px 0 14px;
  }

  #method .contentsArea .contentsBox__area .contentsBox__area__text {
    font-size: 19px;
  }

  #method .contentsArea .contentsBox:nth-child(2) .contentsBox__headline {
    font-size: 21px;
  }

  #method .contentsArea .contentsBox:nth-child(2) .contentsBox__headline .middle {
    font-size: 25px;
  }

  #method .contentsArea .contentsBox:nth-child(2) .contentsBox__headline .large {
    font-size: 28px;
  }

  #method .contentsArea .contentsBox:nth-child(3) .contentsBox__area__text {
    margin: 20px 0;
  }

  /* Why */
  #why {
    padding: 80px 72px 60px;
  }

  #why .headline__sub {
    font-size: 25px;
    width: 340px;
    padding: 10px;
  }

  #why .headline {
    margin-top: 20px;
  }

  #why table {
    margin-top: 48px;
  }

  #why thead th:nth-child(2) div {
    font-size: 29px;
    width: 237px;
    padding: 30px 0;
    border-radius: 14px 14px 0 0;
  }

  #why thead th:nth-child(3) div {
    font-size: 14px;
    width: 139px;
    margin-top: 21px;
    padding: 30px 0;
    border-radius: 14px 14px 0 0;
  }

  #why tbody td:first-of-type {
    font-size: 19px;
    width: 102px;
    padding: 10px 4px;
    border-radius: 14px 0 0 14px;
  }

  #why tbody td {
    font-size: 21px;
    height: 103px;
    padding: 10px;
  }

  #why tbody td span {
    font-size: 25px;
    padding: 10px;
  }

  /* Voice */
  #voice {
    padding-top: 100px;
  }

  #voice .headline__sub {
    font-size: 25px;
    margin: 0 71px;
    padding: 10px;
  }

  #voice .headline__sub span {
    font-size: 19px;
  }

  #voice .img01 {
    margin-top: 50px;
  }

  #voice .img02 {
    width: 546px;
    margin: 28px auto 0;
  }

  /* Curriculum */
  #curriculum {
    padding: 114px 0 44px;
  }

  #curriculum .text {
    font-size: 21px;
    margin-top: 55px;
  }

  #curriculum .headline__sub {
    width: 340px;
    font-size: 25px;
    padding: 10px;
  }

  #curriculum .img01 {
    width: 354px;
    margin: 45px auto 0;
  }

  #curriculum .img02 {
    margin-top: 33px;
  }

  /* Plans */
  #plans {
    padding: 30px 17px 40px;
  }

  #plans h2 img {
    width: 479px;
  }

  #plans .headline {
    margin-top: 60px;
    font-size: 23px;
  }

  #plans .headline .small {
    font-size: 20px;
  }

  #plans .headline>span::before,
  #plans .headline>span::after {
    width: 20px;
    height: 38px;
  }

  #plans .headline:has(+.plan__box02) .small {
    font-size: 21px;
  }

  #plans .headline:has(+.plan__box03) {
    font-size: 27px;
  }

  #plans .headline:has(+.plan__box03) .small {
    font-size: 23px;
  }

  #plans .plan__box {
    margin-top: 20px;
    padding: 20px 20px 30px;
    border-radius: 0 50px 0 50px;
  }

  #plans .plan__box h3 {
    font-size: 34px;
    width: 526px;
    height: 66px;
  }

  #plans .plan__box h3 .small {
    font-size: 27px;
  }

  #plans .plan__box.plan__box03 h3 .middle {
    font-size: 29px;
  }

  #plans .plan__box.plan__box03 h3 .small {
    font-size: 19px;
  }

  #plans .plan__box .title {
    font-size: 25px;
    margin: 30px 20px 0;
  }

  #plans .plan__box.plan__box03 .title .small {
    font-size: 21px;
  }

  #plans .introduce {
    margin: 40px 20px 0;
  }

  #plans .introduce__box {
    margin-top: 10px;
  }

  #plans .introduce__box .item {
    font-size: 24px;
    width: 93px;
    margin-right: 47px;
    padding: 8px 0 8px 8px;
    border-radius: 10px;
  }

  #plans .plan__box .introduce__box-price .text {
    font-size: 33px;
  }

  #plans .plan__box .introduce__box-price .text .large {
    font-size: 57px;
  }

  #plans .plan__box .introduce__box-frequency .text {
    font-size: 28px;
  }

  #plans .plan__box .introduce__box-frequency .text .large {
    font-size: 44px;
  }

  #plans .plan__box .introduce__box-frequency .text .small {
    font-size: 19px;
  }

  #plans .plan__box .introduce__box-period .text {
    font-size: 28px;
  }

  #plans .plan__box .introduce__box-period .text .large {
    font-size: 44px;
  }

  #plans .plan__box.plan__box03 .introduce__box-period .text .middle {
    font-size: 22px;
  }

  #plans .plan__box.plan__box03 .introduce__box-period .text .small {
    font-size: 19px;
  }

  #plans .feature__box {
    margin-top: 44px;
    padding: 44px 18px 22px;
    border-radius: 20px;
  }

  #plans .feature {
    font-size: 24px;
    width: 128px;
    padding: 8px 0 8px 8px;
    border-radius: 10px;
  }

  #plans .feature__box .text {
    font-size: 19px;
  }

  #plans .feature__box .text .pink {
    font-size: 21px;
  }

  /* FAQ */
  #faq {
    padding: 59px 0;
  }

  #faq .headline__sub {
    font-size: 24px;
    width: 340px;
    padding: 10px;
  }

  #faq .headline__sub span {
    font-size: 22px;
  }

  #faq .headline-q {
    font-size: 19px;
    margin: 28px auto 0;
  }

  #faq .headline-q .large {
    font-size: 24px;
    margin: 28px auto 0;
  }

  #faq .headline-a {
    font-size: 22px;
    margin: 63px auto 0;
  }

  #faq .headline-a .large {
    font-size: 25px;
  }

  #faq .headline-a .large.underline {
    padding-bottom: 4px;
  }

  #faq .headline-a .large.underline::after {
    width: 278px;
    height: 5px;
  }

  #faq .headline-a .large .pink .small {
    font-size: 22px;
  }

  #faq .box__area .faq__box {
    margin: 54px 42px 0;
    padding: 10px 30px 18px;
    border-radius: 20px;
  }

  #faq .box__area .faq__box:nth-child(n+2) {
    margin-top: 17px;
  }

  #faq .box__area .faq__box .q {
    font-size: 20px;
    padding-bottom: 10px;
  }

  #faq .box__area .faq__box .q::after {
    width: 487px;
    height: 3px;
  }

  #faq .box__area .faq__box .q .ico {
    width: 57px;
    margin-right: 24px;
  }

  #faq .box__area .faq__box .a {
    font-size: 18px;
    margin-top: 10px;
  }

  #faq .box__area .faq__box .a .ico {
    width: 57px;
    margin-left: 17px;
    margin-right: 24px;
  }

  /* Footer Visual */
  #footer__visual .visual__text {
    bottom: 43px;
  }

  #footer__visual .visual__text .text {
    font-size: 25px;
  }

  #footer__visual .visual__text .text .large {
    font-size: 29px;
  }

  /* Footer */
  footer {
    padding: 78px 0;
  }

  footer .footer__text {
    font-size: 20px;
  }

  footer .footer__text p {
    margin-top: 20px;
  }
}