@charset "UTF-8";
/* ============================= 共通パーツレイアウト ============================= */
@media screen {
   :root {
      --color-text: #333;
      --color-yellow: #F4F2B0;
      --color-blue: #CBE2ED;
      --color-green: #E9F5E1;

      --font-default: 'Zen Old Mincho', serif;
      --font-sans: 'Noto Sans JP', sans-serif;
      --font-num: 'WindSong', cursive;

      --fs-10: 10px;
      --fs-12: 12px;
      --fs-14: 14px;
      --fs-16: 16px;
      --fs-18: 18px;
      --fs-20: 20px;
      --fs-22: 22px;
      --fs-24: 24px;
      --fs-26: 26px;
      --fs-32: 32px;
      --fs-36: 36px;
      --fs-40: 40px;
      --fs-48: 48px;
      --fs-56: 56px;
      --fs-80: 80px;
   }

   html {
      scroll-behavior: smooth;
   }

   body {
      font-family: var(--font-default);
      font-weight: 400;
      color: var(--color-text);
      font-size: var(--fs-16);
      line-height: 2;
      background-color: #fff;
      letter-spacing: .2em;
      position: relative;
   }

   a {
      transition: opacity .3s;
   }

   a:hover {
      opacity: 0.7;
   }

   img {
      width: 100%;
   }

   .sp {
      display: none;
   }

   .innerWrap {
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
   }







   .h2_common {
      display: flex;
      align-items: center;
      margin-bottom: 100px;
      position: relative;
   }

   .h2_common .heading_text {
      display: flex;
      flex-direction: column;
      line-height: 1.4;
      letter-spacing: .2em;
      flex-shrink: 0;
      align-items: center;
   }

   .h2_common .heading_text:has(> .en:only-child)::after {
      content: '\00a0';
      visibility: hidden;
      font-size: var(--fs-20);
      display: block;
   }

   .h2_common .en {
      font-family: 'Zen Old Mincho', serif;
      font-size: var(--fs-80);
      background-image: linear-gradient(to bottom,
            #333333 64%,
            #aaaaaa 36%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
   }

   header .h2_common {
      margin-bottom: 0;
   }

   header .h2_common .en {
      font-size: var(--fs-40);
   }

   .h2_common span:not(.en) {
      font-size: var(--fs-20);
      font-weight: 500;
      color: #333;
   }

   .h2_common::before,
   .h2_common::after {
      content: '';
      display: none;
      height: 1px;
      background-color: var(--color-text);
      flex-grow: 1;
   }

   .h2_common.h2_left .heading_text {
      margin-right: 40px;
   }

   .h2_common.h2_left::after {
      display: block;
      position: relative;
   }

   .h2_common.h2_left::before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      right: 0;
      width: 4px;
      height: 4px;
      background-color: var(--color-text);
      transform: translateY(-50%) rotate(45deg);
   }

   .h2_common.h2_right .heading_text {
      margin-left: 40px;
   }

   .h2_common.h2_right::before {
      display: block;
      position: relative;
   }

   .h2_common.h2_right::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      width: 4px;
      height: 4px;
      background-color: var(--color-text);
      transform: translateY(-50%) rotate(45deg);
   }


   .has_underline {
      position: relative;
      border-bottom: 1px solid var(--color-text);
      padding-bottom: 40px;
   }

   .has_underline::before {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: var(--color-text);
      bottom: -2px;
      left: 0;
      transform: rotate(45deg);
   }

   .has_underline::after {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: var(--color-text);
      bottom: -2px;
      right: 0;
      transform: rotate(45deg);
   }



   ul.mainCatch {
      font-size: var(--fs-24);
      z-index: 10;
   }

   ul.mainCatch li span {
      font-size: var(--fs-40);
   }

   ul.mainCatch li span:first-child {
      display: inline-block;
      width: 7.8em;
   }


   a.btn_common {
      display: block;
      background-color: var(--color-yellow);
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 20px;
      border: .2px solid var(--color-text);
      box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
      margin-top: 8px;
      background-image: linear-gradient(to right, #F4F2B0, #FFFEE0, #F4F2B0);
   }

   .contactBox {
      font-size: var(--fs-16);
      text-align: center;
   }

   .contactBox span {
      display: inline-block;
   }

   span.marker {
      background-color: var(--color-yellow);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
   }

   span.marker span {
      display: inline-block;
   }

   header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      background-color: rgba(255, 255, 255, .7);
      z-index: 1000;
   }

   header .innerWrap {
      max-width: unset;
      height: 140px;
      padding: 0 180px 0 120px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   header h1 {
      font-size: var(--fs-36);
      line-height: 1;
   }

   header h1 span {
      font-size: var(--fs-40);
      display: inline-block;
      margin-right: 20px;
   }

   footer>div {
      background-image: linear-gradient(to right, #E9F5E1, #CBE2ED);
      padding-top: 56px;
      padding-bottom: 30px;
   }

   footer>div .innerWrap {
      max-width: 1000px;
   }

   footer>div .innerWrap .ftTop {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
   }

   footer>div .innerWrap .ftTop>div {
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: var(--fs-20);
      line-height: 1.6;
   }

   footer>div .innerWrap .ftTop>div span span {
      display: inline-block;
   }

   footer>div .innerWrap .ftTop>div p {
      font-size: var(--fs-32);
   }

   footer>div .innerWrap .ftTop>div p span {
      font-size: var(--fs-40);
      display: inline-block;
      margin-right: 20px;
   }

   footer ul.ftIcons {
      display: flex;
      gap: 32px;
   }

   footer ul.ftIcons li a {
      display: block;
      width: 88px;
   }

   footer ul.ftIcons li a img {
      filter: drop-shadow(0 6px 4px rgb(51 51 51 / 0.4));
   }

   footer>div .innerWrap .ftBtm ul:first-child {
      display: flex;
      justify-content: center;
      gap: 60px;
   }

   footer>div .innerWrap .ftBtm ul.sp {
      display: none;
   }

   footer>p {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-family: var(--font-sans);
      font-size: var(--fs-20);
      background-color: var(--color-text);
   }
}

/* ============================= トップ各セクション ============================= */
@media screen {
   main {
      padding-top: 140px;
      padding-bottom: 200px;
   }

   main>section:not(.MV) {
      padding-top: 200px;
   }

   main .MV {
      position: relative;
   }

   main .MV>section::after {
      content: '';
      position: absolute;
      width: calc(56.0606vw + 97.2727px);
      max-width: 770px;
      aspect-ratio: 770 / 700;
      bottom: 0;
      right: max(0px, calc(((100vw - 1200px) / 2)) - 120px);
      background-image: url(../img/img_MV.png);
      background-size: contain;
      background-position: right bottom;
      background-repeat: no-repeat;
   }

   main .MV>div.achievement {
      background-image: url(../img/bg_MV01.png);
      background-position: bottom center;
      background-size: cover;
      /* background: radial-gradient(circle at bottom center, #eef3f0, #a9bdaa); */
   }

   main .MV>div.achievement .innerWrap {
      padding-top: 40px;
      padding-bottom: 24px;
      font-size: var(--fs-24);
      text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
   }

   main .MV>section {
      background-image: url(../img/bg_MV02.png);
      background-position: top center;
      background-size: cover;
      /* background: radial-gradient(circle at top center, #d4e5ea, #a8c5d1); */
      position: relative;
   }

   main .MV>section .innerWrap {
      padding-top: 54px;
      padding-bottom: 120px;
      display: flex;
      flex-direction: column-reverse;
      justify-content: flex-end;
   }

   main .MV>section .innerWrap h2 {
      font-size: var(--fs-56);
      font-weight: 700;
      text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
      padding-left: 22px;
      letter-spacing: .2em;
      z-index: 10;
   }

   main .MV ul.mainCatch {
      z-index: 10;
   }

   main .MV .contactBox {
      display: none;
   }

   main .profile .h2_common {
      margin-bottom: 80px;
   }

   main .profile .innerWrap {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
   }

   main .profile .innerWrap>section {
      width: 42.5%;
   }

   main .profile .innerWrap>div {
      width: 50.8%;
      position: relative;
   }

   main .profile .innerWrap>section>div {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      gap: 64px;
   }

   main .profile .innerWrap>div p {
      box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
   }

   main .profile .innerWrap>div p:first-child {
      position: absolute;
      left: 0;
      top: 40px;
      width: calc(100% * 528 / 610);
   }

   main .profile .innerWrap>div p:last-child {
      position: absolute;
      right: 0;
      bottom: -10px;
      width: calc(100% * 464 / 610);
   }

   main .concept .h2_common::before,
   main .concept .h2_common::after {
      all: revert;
   }

   main .concept ul.mainCatch {
      margin-bottom: 80px;
      line-height: 1.6;
   }

   main .concept .innerWrap {
      padding-bottom: 190px;
      background-image: url(../img/bg_concept.png);
      background-size: cover;
      background-position: top left;
   }

   main .concept .innerWrap>div {
      padding-left: 80px;
   }

   main .concept .innerWrap>div p {
      display: flex;
      flex-direction: column;
      font-size: var(--fs-24);
      align-items: flex-start;
      gap: 10px;
   }

   main .concept .innerWrap>div p.sp {
      display: none;
   }

   main .concept .innerWrap>div p span {
      line-height: 1.6;
   }

   main .program {
      margin-bottom: 100px;
   }

   main .program .h2_common {
      margin-bottom: 40px;
   }

   main .program ul {
      font-size: var(--fs-24);
      padding-left: 340px;
      line-height: 1.6;
      margin-bottom: 18px;
   }

   main .program ul li span:first-child {
      font-size: var(--fs-48);
      font-family: var(--font-num);
      display: inline-block;
      margin-right: 12px;
      width: 1em;
   }

   main .program ul li span.pgTitle {
      font-size: var(--fs-32);
      display: inline-block;
      margin-right: 36px;
      width: 6em;
      background-image: url(../img/bg_program.png);
      background-size: contain;
      background-position: center bottom;
      background-repeat: no-repeat;
      line-height: 1.8;
   }

   main .program .innerWrap>div p {
      text-align: center;
      font-size: var(--fs-24);
      margin-bottom: 40px;
   }

   main section.case {
      background-color: var(--color-blue);
      padding-top: 100px;
      padding-bottom: 100px;
   }

   main .case .innerWrap {
      padding-bottom: 80px;
   }

   main .case h3 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 54px;
      font-size: var(--fs-24);
   }

   main .case h3 span {
      padding-left: 12px;
      line-height: 1.6;
   }

   main .case li>section>p {
      margin-bottom: 32px;
      font-size: var(--fs-20);
   }

   main .case li>section>span {
      display: block;
      text-align: right;
   }

   main .case .innerWrap>p {
      font-size: var(--fs-14);
      width: calc(100% - 140px);
      margin: 0 auto;
   }



   main section.news {
      background-color: var(--color-green);
      padding-top: 100px;
      padding-bottom: 100px;
   }

   main .news .innerWrap {
      padding-bottom: 80px;
   }

   main .news .h2_common {
      margin-bottom: 20px;
   }

   main .news .innerWrap>div>p {
      font-size: var(--fs-24);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
   }

   main .news .innerWrap>div>p::before {
      content: "";
      width: 80px;
      height: 80px;
      background-image: url(../img/icon_insta_color.png);
      background-size: contain;
      background-repeat: no-repeat;
   }

   main .news .innerWrap>div>a {
      display: block;
      text-align: center;
   }


   main section.price {
      padding-top: 100px;
   }

   main .price .innerWrap {
      padding-bottom: 80px;
   }

   main .price dl {
      width: 100%;
      max-width: 800px;
      margin: 0 auto 24px;
      font-size: var(--fs-24);
   }

   main .price dl div {
      display: flex;
   }

   main .price dt {
      width: 40%;
      line-height: 3;
   }

   main .price dd {
      width: 60%;
      line-height: 3;
   }

   main .price .innerWrap>div>p {
      font-size: var(--fs-24);
      text-align: center;
   }

   main .faq .innerWrap {
      padding-bottom: 80px;
   }


   main section.faq .h2_common .en {
      letter-spacing: .4em;
   }

   main .faq .innerWrap>div>a {
      display: block;
      text-align: center;
   }

}

/* ============================= 下層ページ ============================= */
@media screen {
   .page-faq main>section {
      padding-top: 20px;
   }

   .page-faq .h2_common {
      margin-bottom: 40px;
   }

   .page-faq h3 {
      text-align: center;
      font-size: var(--fs-24);
      margin-bottom: 40px;
      text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);

   }

   .page-faq .faq .innerWrap>ul {
      display: flex;
      gap: 60px;
      width: 100%;
      max-width: 1040px;
      margin: 0 auto 100px;
   }

   .page-faq .faq .innerWrap>ul li .btn_common {
      display: inline-block;
      padding-left: 64px;
      padding-right: 64px;
      border: none;
   }

   .page-faq .faq .innerWrap>div div.faqContainer:first-child {
      margin-bottom: 120px;
   }

   .page-legal main .innerWrap {
      max-width: 800px;
   }

   .page-legal main>section:first-child {
      padding-top: 20px;
   }

   .page-legal main>section h2 {
      display: flex;
      justify-content: center;
      font-size: var(--fs-20);
      margin-bottom: 80px;
   }

   .page-legal main>section h2 span.has_underline {
      padding-bottom: 0;
      text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
   }

   .page-legal main>section .innerWrap>div>p,
   .page-legal main>section .innerWrap>div>ol>*:not(:last-child) {
      margin-bottom: 40px;
   }

   .page-legal main>section .innerWrap>div>ol ul,
   .page-legal main>section.law li div ul {
      list-style-type: disc;
      padding-left: 40px;
   }
}

/* ============================= レスポンシブ〜1440px ============================= */
@media screen and (max-width:1440px) {
   header .innerWrap {
      padding-left: calc((100vw - 1200px) / 2);
   }
}

/* ============================= レスポンシブ〜1200px ============================= */
@media screen and (max-width:1200px) {
   .innerWrap.has_underline {
      background-image: linear-gradient(to right, var(--color-text), var(--color-text));
      background-repeat: no-repeat;
      background-size: calc(100% - 40px) 1px;
      background-position: bottom center;
      border-bottom: none;
   }

   .innerWrap.has_underline::before {
      left: 20px;
   }

   .innerWrap.has_underline::after {
      right: 20px;
   }

   .innerWrap,
   header .innerWrap {
      padding-left: 20px;
      padding-right: 20px;
   }

   header .innerWrap {
      height: 120px;
   }

   header .innerWrap>div {
      display: none;
   }

   main {
      padding-top: 120px;
   }

   main .MV {
      overflow-x: hidden;
   }

   main .MV>section::after {
      right: -120px;
   }

   main .MV .contactBox {
      display: block;
      width: 100%;
      max-width: 600px;
      padding: 0 20px 20px;
      margin: 40px auto 0;
   }

   main .profile .innerWrap>div p:last-child {
      top: min(340px, calc(340px - (1200px - 100vw) * 0.3));
      bottom: unset;
   }

   main .case h3 {
      font-size: var(--fs-20);
   }

   main .case li>section>p {
      font-size: var(--fs-18);
   }

   main .case li>section>span {
      font-size: var(--fs-16);
   }

   main .case .innerWrap>p {
      font-size: var(--fs-14);
      width: calc(100% - 100px);
   }
}

/* ============================= レスポンシブ〜1000px ============================= */
@media screen and (max-width:1000px) {
   ul.mainCatch {
      font-size: var(--fs-14);
   }

   ul.mainCatch li span {
      font-size: var(--fs-24);
   }

   main .MV>section .innerWrap h2 {
      font-size: var(--fs-32);
   }

   main .MV>div.achievement .innerWrap {
      font-size: var(--fs-16);
   }

   ul.mainCatch li span:first-child {
      width: 8em;
   }

   main .profile .innerWrap {
      flex-direction: column;
   }

   main .profile .innerWrap>section {
      width: 100%;
   }

   main .profile .innerWrap>div {
      width: 100%;
      display: flex;
   }

   main .profile .innerWrap>div p {
      box-shadow: unset;
      aspect-ratio: 250 / 232;
   }

   main .profile .innerWrap>div p:first-child {
      position: relative;
      width: 50%;
      top: 0;
   }

   main .profile .innerWrap>div p:last-child {
      position: relative;
      width: 50%;
      top: 0;
   }

   main .profile .innerWrap>div p img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   main .profile .innerWrap>div {
      position: relative;
      border-bottom: 1px solid var(--color-text);
      padding-bottom: 40px;
   }

   main .profile .innerWrap>div::before {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: var(--color-text);
      bottom: -2px;
      left: 0;
      transform: rotate(45deg);
   }

   main .profile .innerWrap>div::after {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: var(--color-text);
      bottom: -2px;
      right: 0;
      transform: rotate(45deg);
   }

   .profile section.has_underline {
      border-bottom: none;
      padding-bottom: 40px;
   }

   .profile section.has_underline::before {
      all: revert;
   }

   .profile section.has_underline::after {
      all: revert;
   }

   main .concept .innerWrap>div {
      padding-left: 0;
   }

   main .concept .innerWrap>div p {
      font-size: var(--fs-20);
      gap: 10px;
   }

   main .program .innerWrap>div {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   main .program ul {
      padding-left: 0;
      font-size: var(--fs-20);
   }

   main .program ul li span:first-child {
      font-size: var(--fs-36);
   }

   main .program ul li span.pgTitle {
      font-size: var(--fs-24);
      display: inline-block;
      margin-right: 24px;
      width: 6em;
   }

   main .program .innerWrap>div p {
      font-size: var(--fs-20);
   }

   main .case h3 {
      font-size: var(--fs-18);
   }

   main .case li>section>p {
      font-size: var(--fs-16);
   }

   main .case li>section>span {
      font-size: var(--fs-12);
   }

   main .price dl {
      font-size: var(--fs-20);
   }

   main .price .innerWrap>div>p {
      font-size: var(--fs-20);
   }
}

/* ============================= レスポンシブ〜768px ============================= */
@media screen and (max-width:768px) {
   .pc {
      display: none;
   }

   .sp {
      display: initial;
   }

   .h2_common {
      margin-bottom: 60px;
   }

   .h2_common::before,
   .h2_common::after {
      transform: translateY(-10px);
   }

   .h2_common.h2_right::after {
      transform: translateY(calc(-50% - 10px)) rotate(45deg);
   }

   .h2_common.h2_left::before {
      transform: translateY(calc(-50% - 10px)) rotate(45deg);
   }

   .h2_common .heading_text::after {
      font-size: var(--fs-16);
   }

   .h2_common span:not(.en) {
      font-size: var(--fs-16);
   }

   .h2_common .en {
      font-size: var(--fs-48);
      background-image: linear-gradient(to bottom,
            #333333 58%,
            #aaaaaa 42%);
   }

   main .profile .h2_common {
      margin-bottom: 32px;
   }

   header .innerWrap {
      height: 90px;
   }

   header h1 {
      font-size: var(--fs-24);
   }

   header h1 span {
      font-size: var(--fs-26);
      margin-right: 12px;
   }

   main {
      padding-top: 90px;
   }

   footer>div {
      padding-top: 32px;
      padding-bottom: 20px;
   }

   footer>div .innerWrap .ftTop ul {
      display: none;
   }

   footer>div .innerWrap .ftBtm ul.sp {
      display: flex;
   }

   footer>div .innerWrap .ftTop {
      margin-bottom: 40px;
   }

   footer>div .innerWrap .ftTop>div {
      align-items: flex-start;
      font-size: var(--fs-16);
   }

   footer>div .innerWrap .ftTop>div p {
      font-size: var(--fs-24);
   }

   footer>div .innerWrap .ftTop>div p span {
      font-size: var(--fs-26);
      margin-right: 12px;
   }

   footer>div .innerWrap .ftBtm {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
   }

   footer>div .innerWrap .ftBtm ul:first-child {
      flex-direction: column;
      gap: 8px;
   }

   footer ul.ftIcons {
      gap: 12px;
   }

   footer ul.ftIcons li a {
      width: 75px;
   }

   footer>p {
      height: 35px;
      font-size: var(--fs-14);
   }

   main .MV>div.achievement .innerWrap {
      padding-top: 12px;
      padding-bottom: 12px;
   }

   main .MV>section .innerWrap {
      padding-top: clamp(0px, calc(100vw / 11 - 100px / 11), 40px);
      padding-bottom: clamp(0px, calc(50vw - 30px), 240px);
   }

   main .MV ul.mainCatch,
   main .MV>section .innerWrap h2 {
      text-shadow:
         0 0.5px 0 #B3D5E1,
         0 -0.5px 0 #B3D5E1,
         -0.5px 0 0 #B3D5E1,
         0.5px 0 0 #B3D5E1;
   }

   main .MV>section::after {
      width: calc(820vw / 11 + 90px / 11);
      max-width: 450px;
      aspect-ratio: 453 / 624;
      bottom: 0;
      right: calc(-180vw / 11 - 240px / 11);
      background-image: url(../img/img_MV_sp.png);
      background-position: right bottom;
   }

   main>section:not(.MV) {
      padding-top: 100px;
   }

   main .profile .innerWrap>div {
      padding-bottom: 60px;
   }

   main .profile .innerWrap>section>div {
      padding: 0;
      gap: 32px;
   }

   main .concept .innerWrap {
      padding-bottom: 80px;
   }

   main .concept ul.mainCatch {
      margin-bottom: 60px;
   }

   main .concept ul.mainCatch li {
      width: min(100%, 26em);
      margin: 0 auto;
   }

   main .concept .innerWrap>div p.pc {
      display: none;
   }

   main .concept .innerWrap>div p.sp {
      display: flex;
      width: 26em;
      margin: 0 auto;
      padding-left: .5em;
   }

   main .concept .innerWrap>div p {
      font-size: var(--fs-14);
   }

   main .program ul {
      padding-left: 0;
      font-size: var(--fs-16);
   }

   main .program ul li span:first-child {
      font-size: var(--fs-32);
   }

   main .program ul li span.pgTitle {
      font-size: var(--fs-22);
      margin-right: 20px;
   }

   main .program .innerWrap>div p {
      font-size: var(--fs-16);
   }

   main .case h3 {
      font-size: var(--fs-20);
      margin-bottom: 40PX;
   }

   main .case li>section>p {
      font-size: var(--fs-16);
   }

   main .case li>section>span {
      font-size: var(--fs-12);
   }

   main .news .innerWrap>div>p::before {
      width: 62px;
      height: 62px;
   }

   main .news .innerWrap>div>p {
      font-size: var(--fs-18);
      margin-bottom: 20px;
   }

   main .price .innerWrap>div>p {
      font-size: var(--fs-16);
   }



   main .price dl {
      font-size: var(--fs-16);
      margin-bottom: 60px;
   }

   main .price dl>div {
      justify-content: space-between;
   }

   main .price dl>div:not(:last-child) {
      margin-bottom: 32px;
   }

   main .price dl dt,
   main .price dl dd {
      line-height: 1.4;
      letter-spacing: .1em;
   }

   main .price dl dd span {
      display: inline-block;
   }

   main .price dt {
      width: 10em;
   }

   main .price dd {
      width: calc(100% - 10em - 20px);
   }

   main .faq dt span:first-child,
   main .faq dd span:first-child {
      font-size: var(--fs-20);
      margin-right: 12px;
   }

   main .faq dt span:last-child {
      font-size: var(--fs-16);
   }

   main .faq dd {
      font-size: var(--fs-16);
   }

   main section.faq dl {
      margin: 0 auto 60px;
   }




   .page-faq main>section {
      padding-top: 20px;
   }

   .page-faq h3 {
      font-size: var(--fs-20);
      margin-bottom: 60px;

   }

   .page-faq .faq .innerWrap>ul {
      gap: 10px;
      margin: 0 auto 80px;
   }

   .page-faq .faq .innerWrap>ul li {
      width: calc((100% - 10px) / 2);
   }

   .page-faq .faq .innerWrap>ul li .btn_common {
      width: 100%;
      padding: 0;
      text-align: center;
   }

   .page-faq .faq .innerWrap>div div.faqContainer:first-child {
      margin-bottom: 120px;
   }

   .page-legal main>section {
      padding-top: 20px;
   }

   .page-legal main>section:not(:last-child) {
      margin-bottom: 100px;
   }

   .page-legal main>section h2 {
      display: flex;
      justify-content: center;
      margin-bottom: 60px;
   }
}

/* ============================= レスポンシブ〜540px ============================= */
@media screen and (max-width:540px) {
   body {
      letter-spacing: .05em;
   }

   header h1 {
      font-size: var(--fs-22);
   }

   header h1 span {
      font-size: var(--fs-24);
      margin-right: 8px;
   }

   footer>div .innerWrap .ftBtm ul:first-child {
      font-size: var(--fs-14);
   }

   footer ul.ftIcons {
      gap: 6px;
   }

   footer ul.ftIcons li a {
      width: 56px;
   }



   main .MV ul.mainCatch {
      transform: translateX(-12px);
   }

   ul.mainCatch li span {}

   ul.mainCatch li span:first-child {
      width: 8.4em;
   }

   main .MV>section .innerWrap h2 {
      padding-left: 0;
   }

   main .concept ul.mainCatch li {
      width: min(100%, 22em);
   }

   main .concept .innerWrap>div p.sp {
      width: 22em;
   }

   main .program ul {
      padding-left: 0;
      font-size: var(--fs-12);
      letter-spacing: .1em;
   }

   main .program ul li span:first-child {
      font-size: var(--fs-24);
   }

   main .program ul li span.pgTitle {
      font-size: var(--fs-18);
      margin-right: 12px;
      letter-spacing: .2em;
   }

   main .program .innerWrap>div p {
      font-size: var(--fs-12);
      margin-bottom: 20px;
   }

   main .case h3 {
      font-size: var(--fs-16);
      margin-bottom: 40PX;
   }

   main .case li>section>p {
      font-size: var(--fs-14);
   }

   main .case li>section>span {
      font-size: var(--fs-12);
   }

   main .case .innerWrap>p {
      font-size: var(--fs-12);
      width: calc(100% - 60px);
   }

   main .price dl>div {
      flex-direction: column;
   }

   main .price dt {
      width: 100%;
      margin-bottom: 8px;
   }

   main .price dd {
      width: 100%;
   }

   .page-faq .faq .innerWrap>ul {
      flex-direction: column;
      gap: 8px;
   }

   .page-faq .faq .innerWrap>ul li {
      width: 100%;
   }
}

/* ============================= レスポンシブ〜500px ============================= */
@media screen and (max-width:500px) {
   main .MV>div.achievement .innerWrap {
      font-size: var(--fs-12);
   }

   main .MV ul.mainCatch {
      font-size: var(--fs-10);
   }

   ul.mainCatch li span {
      font-size: var(--fs-18);
   }


   main .MV>section .innerWrap h2 {
      font-size: var(--fs-22);
   }
}
/* ============================= レスポンシブ〜375px ============================= */
@media screen and (max-width:375px) {
ul.mainCatch li span:first-child {
    width: 7.4em;
}
}

/* ============================= ハンバーガーメニュー ============================= */
@media screen {

   /* --- 2. ハンバーガーボタン (index.html の .menu-toggle) --- */
   .hmbgrbtn-container {
      display: block;
      z-index: 1001;

      position: absolute;
      top: 46px;
      right: 20px;

      width: 70px;
      height: 48px;
   }

   .menu-toggle {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      filter: drop-shadow(0 6px 4px rgb(51 51 51 / 0.3));
   }

   .menu-toggle span {
      display: block;
      height: 7px;
      width: 100%;
      background: var(--color-yellow);
      transition: all 0.3s ease-in-out;
      transform-origin: center;
   }

   .menu-toggle span:nth-child(2) {
      width: 80%;
   }

   /* ✗ボタンの変形ロジック (中心で交差させる) */
   .menu-toggle.active span:nth-child(1) {
      transform: translateY(21px) rotate(45deg);
   }

   .menu-toggle.active span:nth-child(2) {
      opacity: 0;
   }

   .menu-toggle.active span:nth-child(3) {
      transform: translateY(-21px) rotate(-45deg);
   }

   /* --- 3. ナビゲーションメニュー --- */
   header nav {
      position: fixed;
      top: 0;
      right: 0;
      width: 375px;
      height: 100vh;
      height: 100dvh;
      background: #f5f5f5;
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
      transform: translateX(100%);
      transition: transform 0.35s ease-in-out;
      z-index: 1000;
      padding: 80px 20px 40px 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
   }

   header nav.open {
      transform: translateX(0);
   }

   header nav>a.btn_common {
      font-size: var(--fs-20);
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      margin-bottom: 30px;
   }

   header nav>ul.has_underline {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-bottom: 24px;
   }

   header nav>ul li {
      padding-left: 20px;
   }

   header nav>ul li a {
      font-size: var(--fs-20);
      display: flex;
      align-items: center;
   }

   header nav>ul li a::before {
      content: '';
      width: 20px;
      height: 20px;
      background-image: url(../img/icon_plane.png);
      background-size: contain;
      background-repeat: no-repeat;
      margin-right: 8px;
   }

   .menu-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      cursor: pointer;

      opacity: 0;
      transition: opacity 0.35s ease-in-out;
   }

   .menu-overlay.active {
      display: block;
      opacity: 1;
   }


   @media screen and (max-width: 768px) {
      header nav {
         width: 100%;
         max-width: none;
      }
   }
}

@media screen and (max-width:1200px) {
   .hmbgrbtn-container {
      top: 36px;
   }
}

@media screen and (max-width:768px) {
   .hmbgrbtn-container {
      top: 29px;
      width: 45px;
      height: 32px;
   }

   .menu-toggle span {
      height: 5px;
   }

   .menu-toggle.active span:nth-child(1) {
      transform: translateY(14px) rotate(45deg);
   }

   .menu-toggle.active span:nth-child(3) {
      transform: translateY(-14px) rotate(-45deg);
   }

}


/* ============================= カルーセル ============================= */
@media screen {
   .case-slider {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 32px;
   }

   .carousel-viewport {
      width: calc(100% - 140px);
      overflow: hidden;
   }

   .carousel-track {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
      transition: transform 0.5s ease-in-out;
   }

   .carousel-track>li {
      width: 100%;
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
   }

   .carousel-track>li>p {
      width: calc(100% * 468 / 1040);
   }

   .carousel-track>li>section {
      width: calc(100% * 520 / 1040);
   }

   .carousel-control {
      width: 70px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;

      img {
         width: 35px;
         height: 74px;
         object-fit: contain;
         transition: opacity 0.3s;
         filter: drop-shadow(0 4px 4px rgb(51 51 51 / 0.3));

      }
   }

   .carousel-control.next {
      justify-content: flex-end;
   }

   .carousel-control.next img {
      transform: scaleX(-1);
   }

   .carousel-control:hover img {
      opacity: 0.7;
   }

   .carousel-control:disabled img {
      opacity: 0.3;
      cursor: not-allowed;
   }
}

@media screen and (max-width:1200px) {
   .carousel-viewport {
      width: calc(100% - 100px);
   }

   .carousel-control {
      width: 50px;

      img {
         width: 30px;
         height: 63px;
      }
   }
}

@media screen and (max-width:1000px) {
   .carousel-track>li>p {
      width: calc(100% * 368 / 1040);
   }

   .carousel-track>li>section {
      width: calc(100% * 620 / 1040);
   }
}

@media screen and (max-width:768px) {
   .carousel-viewport {
      width: calc(100% - 100px);
   }

   .carousel-control {
      width: 50px;

      img {
         width: 26px;
         height: 50px;
      }
   }

   .carousel-track>li {
      flex-direction: column;
      justify-content: flex-start;
   }

   .carousel-track>li>p {
      width: 100%;
      margin-bottom: 40px;
   }

   .carousel-track>li>section {
      width: 100%;
   }
}

@media screen and (max-width:540px) {
   .carousel-viewport {
      width: calc(100% - 60px);
   }

   .carousel-control {
      width: 30px;

      img {
         width: 20px;
         height: 41px;
      }
   }
}



/* ============================= FAQ ============================= */
@media screen {
   div.faqContainer {
      width: 100%;
      max-width: 1040px;
      margin: 0 auto 16px;
   }

   div.faqContainer dl {
      margin-bottom: 24px;
   }

   div.faqContainer dt {
      display: flex;
      align-items: center;
      font-weight: 400;
      line-height: 1.6;
      margin-bottom: 8px;
   }

   div.faqContainer dd {
      display: flex;
      align-items: flex-start;
   }

   div.faqContainer dt,
   div.faqContainer dd {
      position: relative;
      padding-left: 56px;
   }

   div.faqContainer dt::before,
   div.faqContainer dd::before {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      font-size: var(--fs-36);
      line-height: 1;
   }

   div.faqContainer dt::before {
      content: "Q";
   }

   div.faqContainer dd::before {
      content: "A";
   }

   div.faqContainer dt span {
      font-size: var(--fs-24);
      border-bottom: 2px dotted var(--color-text);
   }

   div.faqContainer dd {
      font-size: var(--fs-18);
   }
}

@media screen and (max-width:768px) {

   div.faqContainer dt,
   div.faqContainer dd {
      padding-left: 32px;
   }

   div.faqContainer dt::before,
   div.faqContainer dd::before {
      font-size: var(--fs-20);
      line-height: 1.2;
   }

   div.faqContainer dd::before {
      line-height: 1.5;
   }

   div.faqContainer dt span:last-child {
      font-size: var(--fs-16);
   }

   div.faqContainer dd {
      font-size: var(--fs-16);
   }

   div.faqContainer dl {
      margin: 0 auto 60px;
   }
}


/* ============================= Instagram ============================= */
@media screen {
    /* 1. プラグインが計算した「高さ固定」を解除して、テキストが入るようにする */
    #sb_instagram .sbi_item,
    #sb_instagram .sbi_photo_wrap {
        height: auto !important;
        min-height: 0 !important;
    }
    #sb_instagram .sbi_item {
        margin-bottom: 30px !important;
    }
    
    /* 2. 表示順序を入れ替えるための設定（Flexbox） */
    #sb_instagram .sbi_photo {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
    }
    
    /* 3. 画像の設定（順序を1番目に・正方形を維持） */
    #sb_instagram .sbi_photo img {
        order: 1;
        width: 100% !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }
    
    /* 4. アイコン（動画マーク等）の設定（位置ズレ防止） */
    #sb_instagram .sbi_photo svg {
        order: 1;
        z-index: 2;
    }
    
    /* 5. テキストの設定（順序を2番目に・スタイル調整） */
    #sb_instagram .sbi_photo .sbi-screenreader {
        order: 2;
        
        position: static !important;
        text-indent: 0 !important;
        width: auto !important;
        height: auto !important;
        line-height: 1.6 !important;
        overflow: hidden !important;
        
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important; /* 2行で省略 */
        
        margin-top: 12px !important; /* 画像との距離 */
        color: #333 !important;
        font-size: 14px !important;
        text-align: left !important;
        text-decoration: none !important;
    }
    
    /* Instagram画像の上に CLICK画像を重ねる設定 */

    /* 1. 基準点の設定 */
    #sb_instagram .sbi_photo {
        position: relative !important;
    }
    
    /* 2. 画像を重ねる（疑似要素） */
    #sb_instagram .sbi_photo::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../img/img_click.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 66% auto;
        z-index: 10;
        pointer-events: none;
    }
}

@media screen and (max-width: 768px) {
    #sb_instagram #sbi_images {
        gap: 24px !important;
    }
}