@charset "utf-8";

:root {
  --width-s: min(800px, 100%);
  --width-m: min(1080px, 100%);
  --width-l: min(1240px, 100%);

  --color-base--bk: #222;
  --color-base--gray: #788291;

  --color-bk: #111;
  --color-bk-pale: rgba(0, 0, 0, 0.6);
  --color-wh: #fff;
  --color-wh-pale-x: rgba(255, 255, 255, 0.1);
  --color-wh-pale: rgba(255, 255, 255, 0.4);
  --color-lgry: #e4e4e4;

  --color-bl: #2A2ACD;
  --color-bl-pale: rgba(42, 42, 205, 0.8);
  --color-dbl: #1E325F;
  --color-dbl-pale: #5d6a82;
  --color-rd: #CE0000;
  --color-drd: #aa1414;
  --color-lrd: #E14D4D;
  --color-or: #CE9416;

  --size-xs: calc(var(--size-base) * 1.6); /* 12px */
  --size-s: calc(var(--size-base) * 1.8); /* 14px */
  --size-m: calc(var(--size-base) * 2); /* 16px */
  --size-l: calc(var(--size-base) * 2.5); /* 20px */
  --size-2l: calc(var(--size-base) * 3); /* 24px */
  --size-3l: calc(var(--size-base) * 3.5); /* 28px */
  --size-4l: calc(var(--size-base) * 5); /* 40px */
  --size-5l: calc(var(--size-base) * 7); /* 56px */

  --size-min: calc(var(--size-base) / 2); /* 4px */
  --size-max: calc(var(--size-base) * 10); /* 80px */
  --size-half: calc(var(--size-base) * 2.5); /* 20px */

  --lheight-xs: 1.2;
  --lheight-s: 1.4;
  --lheight-m: 1.58;
  --lheight-l: 2;
  --lheight-base: 1.75;

  --family-en: "Literata", serif;
  --family-ja--zenkaku: "Zen Kaku Gothic New", sans-serif;
}

html, body {
  min-height: 100svh;
}
body {
  overflow-y: scroll;
  line-height: var(--lheight-base);
  letter-spacing: 0.02em;
  color: var(--color-wh);
  font-size: var(--size-m);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  text-align: justify;
  background: var(--color-base--gray);
}
a {
  color: inherit;
  text-decoration: none;
  .fa-solid {
    display: inline-block;
    margin-left: 0.5em;
  }
}
li {
  list-style: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
picture {
  display: block;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

.service-name {
  display: block;
  letter-spacing: 0.1em;
  font-weight: 400;
  font-family: var(--family-en);
  & span {
    display: block;
  }
  & span:nth-of-type(2) {
    font-size: 40%;
  }
}


/* layout
==================================================== */
.l-area--dbl-pale {
  background: var(--color-dbl-pale);
}
.l-area--dbl {
  background: var(--color-dbl);
}
.l-box--wh {
  color: var(--color-base--bk);
  background: var(--color-wh-pale);
}

/* inner ----------------------------- */
*[class*="l-inner--"] {
  margin: 0 auto;
}
.l-inner--s {
  width: var(--width-s);
}
.l-inner--m {
  width: var(--width-m);
}
.l-inner--l {
  width: var(--width-l);
}


/* module
==================================================== */
/* link / btn ----------------------------- */
.m-link--opacity,
.m-link--more {
  display: inline-block;
}
.m-link--line {
  color: var(--color-bl);
  text-decoration: underline;
}
.m-link--more {
  position: relative;
  display: inline-block;
  margin-left: var(--size-l);
  line-height: var(--lheight-s);
  font-weight: 500;
  &::before {
    content: "\e5df";
    position: relative;
    top: -0.05em;
    display: inline-block;
    font-size: 1.5em;
    font-weight: 500;
    font-family: "Material Symbols Outlined";
    vertical-align: middle;
  }
  & span {
    text-decoration: underline;
  }
  &:hover span {
    text-decoration: none;
  }
}

.m-btn {
  position: relative;
  display: block;
  padding: var(--size-m);
  text-align: center;
  border-radius: var(--size-base);
  &::before {
    content: "\e5df";
    display: block;
    position: absolute;
    top: 50%;
    left: var(--size-m);
    line-height: 1;
    font-size: var(--size-4l);
    font-weight: 500;
    font-family: "Material Symbols Outlined";
    transform: translateY(-50%);
  }
  & strong {
    font-size: var(--size-l);
  }
}

/* title ----------------------------- */
*[class^="m-title--"] {
  display: block;
  line-height: var(--lheight-s);
  letter-spacing: 0.06em;
  font-family: var(--family-ja--zenkaku);
}
.m-title--l {
  margin-bottom: var(--size-l);
  font-size: var(--size-3l);
  text-align: center;
}
.m-title--m {
  margin: var(--size-4l) 0 var(--size-l);
  font-size: var(--size-2l);
}
.m-title--s {
  margin-bottom: var(--size-base);
  font-size: var(--size-l);
}

.m-form {
  margin-top: var(--size-4l);
  line-height: var(--lheight-s);
  & .m-form__list {
    width: min(540px, 100%);
    margin: 0 auto var(--size-base);
  }
  & .m-form__label,
  & .m-form__input {
    margin-bottom: var(--size-m);
  }
  & .m-form__label {
    padding-top: var(--size-base);
    font-weight: 500;
  }
  & .m-form__input {
    & input,
    & textarea {
      display: block;
      width: 100%;
      padding: var(--size-base) var(--size-m);
      background: var(--color-lgry);
      border-radius: var(--size-min);
    }
    & textarea {
      height: 8em;
    }
  }
  & .m-form__error {
    margin-top: var(--size-min);
    color: var(--color-rd);
    font-size: var(--size-xs);
    font-weight: 500;
  }
  & .m-form__action {
    display: block;
    width: 240px;
    margin: var(--size-4l) auto 0;
    padding: var(--size-s) var(--size-l);
    color: var(--color-wh);
    font-weight: 500;
    border-radius: var(--size-base);
    background: var(--color-bl);
  }
  & .s-required {
    position: relative;
    top: -0.2em;
    display: inline-block;
    margin-left: var(--size-min);
    padding: calc(var(--size-min) / 2) var(--size-min);
    color: var(--color-wh);
    font-size: 10px;
    background: var(--color-lrd);
  }
}

/* list / dlist ----------------------------- */
.m-list__dot,
.m-list__num {
  & > li {
    margin-left: 1.5em;
  }
}
.m-list__dot > li {
  list-style: disc;
}
.m-list__num > li {
  list-style: decimal;
}

/* state
==================================================== */
.s-fs--s {
  font-size: 0.8em;
}
.s-fw--b {
  font-weight: 700;
}
.s-fc--wh {
  color: var(--color-wh);
}
.s-fc--rd {
  color: var(--color-drd);
}
.s-ff--en {
  font-weight: 400;
  font-family: var(--family-en);
}
.s-ta--l {
  text-align: left;
}
.s-ta--r {
  text-align: right;
}
p + .s-ta--r {
  margin-top: 0.5em;
}
.s-ta--c {
  text-align: center;
}

.s-mt--s {
  margin-top: var(--size-base) !important;
}
.s-mt--m {
  margin-top: var(--size-m) !important;
}
.s-mt--l {
  margin-top: var(--size-4l) !important;
}
.s-mt--0 {
  margin-top: 0 !important;
}
.s-mb--s {
  margin-bottom: var(--size-base) !important;
}
.s-mb--m {
  margin-bottom: var(--size-m) !important;
}
.s-mb--l {
  margin-bottom: var(--size-4l) !important;
}
.s-mb--0 {
  margin-bottom: 0 !important;
}

/* js
==================================================== */
/* modal ----------------------------- */
.js-modal {
  overflow: visible;
  width: min(800px, calc(100% - var(--size-2l)));
  max-width: none;
  height: auto;
  max-height: calc(100dvh - var(--size-2l));
  margin: auto;
  padding: 0;
  border: none;
  &::backdrop {
    background: rgba(0, 0, 0, 0.8);
  }
  & .js-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--size-2l);
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    z-index: 100;
  }
  & .js-modal__inner {
    overflow-y: scroll;
    position: relative;
    height: 100%;
    padding: var(--size-4l);
    & .m-title--modal {
      margin-bottom: var(--size-m);
      text-align: center;
    }
  }
}
.js-modal__inner::-webkit-scrollbar {
  width: var(--size-base);
}
.js-modal__inner::-webkit-scrollbar-thumb {
  background: var(--color-mgry);
}
.js-modal__inner::-webkit-scrollbar-track {
  background: var(--color-lgry);
}
.js-modal[open],
.js-modal[open]::backdrop {
  animation: fadeIn 0.2s ease normal;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.js-modal.is-hide,
.js-modal.is-hide::backdrop {
  animation: fadeOut 0.2s ease normal;
}
@keyframes fadeOut {
  to { opacity: 0; }
}
body.is-noscroll {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* accordion ----------------------------- */
.js-accordion {
  & .js-accordion__title:not(.is-active) + .js-accordion__content {
    opacity: 0;
    display: none;
  }
  & .js-accordion__title.is-active::after {
    content: "\e316";
  }
  & .js-accordion__title,
  & .js-accordion__content {
    position: relative;
  }
  & .js-accordion__title {
    margin-top: var(--size-base);
    font-weight: 500;
    background: var(--color-dbl);
    cursor: pointer;
    &::after {
      content: "\e313";
      position: absolute;
      top: 50%;
      display: block;
      font-size: var(--size-2l);
      font-weight: 500;
      font-family: "Material Symbols Outlined";
      transform: translateY(-50%);
    }
    & .s-fs--s {
      font-weight: 400;
    }
  }
  & .js-accordion__content {
    color: var(--color-base--bk);
    background: var(--color-wh-pale);
    transition: all 0.2s;
  }
}


/* header / footer
==================================================== */
.header {
  & .header--mainvisual {
    background: no-repeat 50% 50%;
    background-size: cover;
    & .l-inner {
      & .m-title--overview {
        line-height: var(--lheight-s);
        letter-spacing: 0.1em;
        font-family: var(--family-ja--zenkaku);
        & span {
          display: block;
        }
      }
      & .service-name {
        margin: var(--size-4l) calc(var(--size-max) * -1);
        line-height: var(--lheight-xs);
        font-size: min(128px, 10vw);
      }
    }
  }
  & .header--nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: calc(var(--size-m) * 4);
    background: var(--color-bk-pale);
    z-index: 10;
    & .m-list {
      font-family: var(--family-ja--zenkaku);
      & .m-link--opacity {
        letter-spacing: 0.06em;
        &:not(.--register-inquiry) {
          padding: var(--size-base) var(--size-half);
        }
      }
    }
  }
}
.footer {
  margin-top: var(--size-4l);
  background: var(--color-base--bk);
  & .service-name {
    margin: -0.4em 0 var(--size-l);
    line-height: var(--lheight-s);
    font-size: var(--size-4l);
  }
  & .footer--copyright {
    display: block;
    color: var(--color-base--gray);
    font-size: var(--size-xs);
  }
  & .footer--nav {
    margin-left: auto;
    & .m-list {
      & .__item {
        position: relative;
        padding-left: 1em;
        line-height: var(--lheight-l);
        font-size: var(--size-s);
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          display: block;
          width: 0.25em;
          height: 1px;
          background: var(--color-wh);
        }
      }
    }
  }
}


/* 各コンテンツ
==================================================== */
#intro {
  & .m-list--intro {
    & .__item {
      position: relative;
      background: var(--color-dbl);
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(var(--size-l) * 0.8 * -1 + 1px);
        width: var(--size-l);
        height: calc(var(--size-l) * 0.8);
        background: var(--color-dbl);
        transform: translateX(-50%);
        clip-path: polygon(0 0, 100% 0%, 50% 100%);
      }
      & .__text {
        display: block;
        position: relative;
        z-index: 1;
      }
      & .__img {
        position: absolute;
        width: 120px;
      }
    }
  }
  & .s-ta--c {
    font-size: var(--size-l);
  }
}
#service {
  margin-top: var(--size-4l);
  & .l-inner--l > .m-title--l {
    line-height: var(--lheight-s);
    letter-spacing: 0.1em;
    font-weight: 500;
    & .service-name {
      text-indent: 0.05em;
    }
  }
  & .m-list--plan {
    & li[class^="plan__item--"] {
      color: var(--color-base--bk);
      background: var(--color-wh);
      & .m-title {
        line-height: var(--lheight-m);
        & span {
          display: block;
        }
        & .__name {
          font-weight: 700;
          font-family: var(--family-ja--zenkaku);
        }
      }
      & .m-content {
        margin: var(--size-l) 0;
        padding: var(--size-2l) 0;
        border-top: 1px solid var(--color-lgry);
        border-bottom: 1px solid var(--color-lgry);
        & .__title {
          line-height: var(--lheight-xs);
          font-weight: 500;
        }
        & .__detail {
          & .m-contentt__list {
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            margin: 0 calc(var(--size-min) * -1) calc(var(--size-min) * -1) 0;
            & li {
              margin: 0 var(--size-min) var(--size-min) 0;
              padding: calc(var(--size-base) * 0.8) var(--size-base);
              line-height: var(--lheight-s);
              color: var(--color-wh);
              font-size: var(--size-s);
              text-align: left;
              border-radius: var(--size-min);
              &.--lesson {
                background: var(--color-lrd);
              }
              &.--test {
                background: var(--color-or);
              }
              &.--other {
                background: var(--color-base--gray);
              }
              & span {
                display: inline-block;
                margin-right: -0.5em;
              }
            }
            
          }
        }
      }
      & .m-text--price {
        margin: auto calc(var(--size-base) * -1) 0 0;
        padding-top: var(--size-m);
        line-height: 1;
        letter-spacing: 0.02em;
        font-family: var(--family-ja--zenkaku);
        font-weight: 700;
        text-align: right;
        & span {
          display: inline-block;
        }
        & .__num {
          position: relative;
          padding-left: 0.6em;
          color: var(--color-rd);
        }
        & .__unit {
          font-size: 50%;
        }
      }
    }
    & .plan__item--l {
      & .m-title {
        & .__sub {
          font-weight: 500;
        }
        & .__name {
          font-size: var(--size-2l);
        }
      }
      & .m-text--price {
        font-size: var(--size-4l);
      }
    }
    & .plan__item--m {
      & .m-title {
        & .__name {
          font-size: var(--size-l);
        }
      }
      & .m-text--price {
        font-size: var(--size-3l);
      }
    }
  }
}
#flow .l-flex__detail,
#faq .l-flex__detail {
  width: var(--width-s);
}
#flow {
  & .js-accordion {
    margin-top: var(--size-m);
    & .js-accordion__title {
      padding: var(--size-m) var(--size-5l) var(--size-m) var(--size-l);
    }
    & .js-accordion__content {
      padding: var(--size-m) var(--size-l) var(--size-3l) var(--size-l);
    }
  }
  & li {
    & h3 {
      margin-bottom: var(--size-min);
      line-height: var(--lheight-s);
      &::before {
        content: counter(list-item) ".";
        display: inline-block;
        width: 1.25em;
        color: var(--color-dbl);
        font-size: var(--size-2l);
        font-weight: 400;
        font-family: var(--family-en);
        text-align: center;
      }
    }
    & + li {
      position: relative;
      margin-top: var(--size-l);
      padding-top: var(--size-base);
      border-top: 1px solid var(--color-wh-pale);
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        width: var(--size-l);
        height: calc(var(--size-l) /2);
        background: var(--color-wh);
        transform: translateX(-50%);
        clip-path: polygon(0 0, 100% 0%, 50% 100%);
      }
    }
  }
  
}
#faq {
  & .js-accordion {
    & .js-accordion__title,
    & .js-accordion__content {
      &::before {
        position: absolute;
        display: block;
        padding-right: var(--size-s);
        line-height: 1;
        font-size: var(--size-l);
        font-weight: 400;
        font-family: var(--family-en);
        border-right: 1px solid var(--color-wh-pale);
      }
    }
    & .js-accordion__title,
    & .js-accordion__content {
      &::before {
        transform: translateY(0.2em);
      }
    }
    & .js-accordion__title {
      padding: var(--size-m) var(--size-4l) var(--size-m) calc(var(--size-3l) + var(--size-m) * 2);
      &::before {
        content: "Q";
      }
    }
    & .js-accordion__content {
      padding: var(--size-l) var(--size-l) var(--size-l) calc(var(--size-3l) + var(--size-m) * 2);
      &::before {
        content: "A";
        color: var(--color-drd);
      }
      & .s-fs--s {
        display: inline-block;
        margin-top: var(--size-min);
      }
    }
  }
}
#register-inquiry {
  & .m-list--btn {
    margin: var(--size-4l) 0 var(--size-5l);
    & .__item .m-btn {
      margin-bottom: var(--size-base);
      background: var(--color-bl);
    }
  }
  & .s-ta--c + .m-btn {
    width: min(540px, 100%);
    margin: var(--size-m) auto 0;
    background: var(--color-dbl);
  }
}
#about {
  .m-title--s {
    margin-top: var(--size-m);
  }
}
#note {
  & .s-fs--s {
    width: fit-content;
    margin: 0 auto;
  }
}


/* レスポンシブ
====================================================*/
@media screen and (max-width: 1272px) {
  *:not([class*="l-inner--"]) > *[class*="l-inner--"] {
    padding: 0 var(--size-m);
  }
}

@media screen and (min-width: 768px) {
  :root {
    --size-base: 8px;
  }
  .is-only--sp {
    display: none !important;
  }

  .l-section {
    margin-top: calc(var(--size-4l) * 2);
    padding-top: calc(var(--size-4l) * 2);
  }
  .l-area {
    padding: var(--size-max) 0 calc(var(--size-4l) * 3);
  }
  .l-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    & .l-flex__title {
      flex-shrink: 0;
      margin-right: var(--size-4l);
    }
    & .l-flex__img,
    & .l-flex__img + .l-flex__detail {
      width: calc(50% - var(--size-half));
    }
  }
  .l-box--wh {
    padding: var(--size-4l);
  }

  .m-link--opacity,
  .m-link--more,
  .m-btn,
  .m-form__action,
  .js-modal .js-modal__close,
  .js-accordion .js-accordion__title {
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.6;
    }
  }
  .m-link--line:hover {
    text-decoration: none;
  }

  ul[class^="m-list--"] {
    display: flex;
    justify-content: space-between;
  }

  
  .m-form { 
    & .m-form__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    & .m-form__label {
      width: 10em;
    }
    & .m-form__input {
      width: calc(100% - 10em - var(--size-m));
    }
  }

  .js-modal {
    & .js-modal__close {
      position: absolute;
      top: -0.25em;
      right: -1.5em;
      width: 1.5em;
      height: 1.5em;
    }
    & .m-title--modal {
      font-size: var(--size-3l);
    }
  }
  .js-accordion .js-accordion__title {
    &::after {
      right: var(--size-2l);
    }
    & .s-fs--s {
      margin-left: var(--size-m);
    }
  }
  
  .header {
    & .header--mainvisual {
      background-image: url("/cest/assets/img/mainvisual_pc.jpg?1");
      & .l-inner {
        min-height: 85svh;
        margin: 0 var(--size-4l);
        padding: calc(var(--size-max) + 64px) var(--size-max) var(--size-max);
        & .m-title--overview {
          & .__main {
            font-size: var(--size-5l);
          }
          & .__sub {
            font-size: var(--size-3l);
          }
        }
        & .service-name {
          opacity: 0.4;
          & span:nth-of-type(2) {
            font-size: 25%;
          }
        }
        & .m-text {
          width: fit-content;
          margin-left: auto;
          font-size: var(--size-half);
        }
      }
    }
    & .header--nav {
      & .m-logo {
        position: relative;
        top: calc(var(--size-min) / 2 * -1);
        width: 140px;
        margin-left: var(--size-half);
      }
      & .header--nav--menu,
      & .m-list,
      & .m-list .__item,
      & .m-list .m-link--opacity {
        display: flex;
        align-items: center;
        height: 100%;
      }
      & .m-list {
        & .m-link--opacity {
          font-size: var(--size-s);
          &.--register-inquiry {
            padding: var(--size-base) var(--size-4l);
            margin-left: var(--size-m);
            background: var(--color-bl-pale);
          }
        }
      }
    }
  }
  .footer {
    padding: var(--size-max) 0;
    & .l-inner,
    & .footer--nav {
      display: flex;
    }
    & .footer--nav {
      & .m-list  + .m-list {
        margin-left: var(--size-4l);
        padding-left: var(--size-4l);
        border-left: 1px solid var(--color-wh-pale-x);
      }
    }
  }

  #intro {
    & .m-list--intro {
      margin: var(--size-4l) 0;
      & .__item {
        width: calc(33.33% - var(--size-m));
        padding: var(--size-4l) 0;
        &:nth-of-type(1),
        &:nth-of-type(3) {
          padding-left: calc(var(--size-4l) * 4);
          & .__img {
            bottom: 0;
          }
        }
        &:nth-of-type(2) {
          padding-left: calc(var(--size-4l) * 3);
          & .__img {
            left: var(--size-3l);
            bottom: var(--size-min);
          }
        }
        &:nth-of-type(1) .__img {
          left: var(--size-half);
        }
        &:nth-of-type(3) .__img {
          left: var(--size-4l);
        }
      }
    }
  }
  #service {
    & .l-inner--l > .m-title--l .service-name {
      margin-top: calc(var(--size-m) * -1);
      font-size: 360%;
    }
    & .m-list--plan {
      & li[class^="plan__item--"] {
        display: flex;
        flex-direction: column;
        padding: var(--size-4l);
      }
      & .plan__item--l {
        width: calc(50% - var(--size-4l) / 4);
        & .m-content {
          display: flex;
          flex-wrap: wrap;
          & .__title {
            width: calc(6em + var(--size-m));
            padding-top: 0.4em;
          }
          & .__detail {
            width: calc(100% - 6em - var(--size-m));
          }
        }
      }
      & .plan__item--m {
        width: calc(33.33% - var(--size-4l) / 3);
        & .m-content .__detail {
          margin-top: var(--size-base);
        }
      }
      & .m-content .__detail {
        & + .__title,
        & + .__title + .__detail {
          margin-top: var(--size-m);
        }
      }
    }
  }
  #faq {
    & .js-accordion {
      & .js-accordion__title,
      & .js-accordion__content {
        &::before {
          left: var(--size-l);
        }
      }
    }
  }
  #register-inquiry {
    & .m-list--btn .__item {
      width: calc(50% - var(--size-base));
    }
  }

}

@media screen and (max-width: 767px) {
  :root {
    --size-base: 7px;
  }
  .is-only--pc {
    display: none !important;
  }

  .l-section {
    margin-top: var(--size-4l);
    padding-top: var(--size-4l);
  }
  .l-area {
    padding: var(--size-5l) 0;
  }
  .l-box--wh {
    padding: var(--size-3l);
  }

  .js-modal {
    & .js-modal__inner {
      padding: var(--size-4l) var(--size-2l) var(--size-2l);
    }
    & .m-title--modal {
      margin-left: calc(var(--size-m) * -1);
      margin-right: calc(var(--size-m) * -1);
      font-size: var(--size-2l);
    }
    & .js-modal__close {
      position: fixed;
      top: var(--size-base);
      right: var(--size-base);
      width: 2em;
      height: 2em;
      color: var(--color-base--bk);
    }
  }
  .js-modal .js-modal__inner {
    padding: var(--size-2l) var(--size-m);
  }
  .js-accordion .js-accordion__title::after {
    right: var(--size-s);
  }

  .header {
    & .header--mainvisual {
      background-image: url("/cest/assets/img/mainvisual_sp.jpg?1");
      & .l-inner {
        display: flex;
        flex-direction: column;
        height: min(750px, 95svh);
        margin: 0 var(--size-2l);
        padding: calc(var(--size-3l) + var(--size-5l)) 0 var(--size-3l);
        & .m-title--overview .__main {
          margin-bottom: var(--size-min);
          font-size: 7vw;
        }
        & .service-name {
          margin: var(--size-m) 0 auto;
          opacity: 0.6;
          & span:nth-of-type(1) {
            font-size: 18vw;
            line-height: 1;
          }
          & span:nth-of-type(2) {
            margin-top: var(--size-base);
            font-size: 4vw;
          }
        }
      }
    }
    & .header--nav {
      & .m-logo,
      & .header--btn {
        position: relative;
        z-index: 11;
      }
      & .m-logo {
        width: 105px;
        margin-left: var(--size-m);
      }
      & .header--nav--menu {
        position: fixed;
        top: 0;
        left: 0;
        padding: calc(var(--size-4l) + var(--size-m) * 4) var(--size-4l) var(--size-4l);
        width: 100%;
        height: 100svh;
        background: var(--color-dbl-pale);
        visibility: hidden;
        opacity: 0;
        transition: all 0.2s;
        z-index: -1;
        & .m-list .__item {
          border-top: 1px solid var(--color-wh-pale-x);
          & .m-link--opacity {
            position: relative;
            display: block;
            padding: var(--size-m) var(--size-4l) var(--size-m) var(--size-2l);
            &::before {
              content: "\e5db";
              position: absolute;
              top: 50%;
              right: var(--size-m);
              display: block;
              font-size: 1.5em;
              font-weight: 500;
              font-family: "Material Symbols Outlined";
              transform: translateY(-50%);
            }
            &.--register-inquiry {
              margin-top: var(--size-2l);
              border-radius: var(--size-base);
              background: var(--color-bl);
            }
          }
          
        }
      }
    }
    & .header--btn {
      overflow: hidden;
      width: calc(var(--size-m) * 4);
      height: 100%;
      letter-spacing: 0.06em;
      font-size: var(--size-xs);
      text-align: center;
      background: var(--color-bl-pale);
      &::before {
        content: "\e5d2";
        display: block;
        font-size: 3em;
        font-family: "Material Symbols Outlined";
      }
    }
  }
  body.is-open {
    & .header {
      & .header--nav .header--nav--menu {
        visibility: visible;
        opacity: 1;
        z-index: 9;
      }
      & .header--btn::before {
        content: "\e5cd";
      }
    }
  }
  .footer {
    position: relative;
    padding: var(--size-5l) 0 calc(var(--size-5l) + 2em);
    & .footer--nav .m-list + .m-list {
      margin-top: var(--size-l);
      padding-top: var(--size-l);
      border-top: 1px solid var(--color-wh-pale-x);
    }
    & .footer--copyright {
      position: absolute;
      bottom: var(--size-4l);
    }
  }

  #intro {
    & > .m-title--l {
      margin-left: calc(var(--size-m) * -1);
      margin-right: calc(var(--size-m) * -1);
    }
    & .m-list--intro .__item {
      margin-bottom: var(--size-2l);
      padding: var(--size-2l) var(--size-2l) var(--size-2l) 30%;
      &:nth-of-type(1) .__img {
        left: 5%;
        bottom: 0;
      }
      &:nth-of-type(2) .__img {
        left: 6%;
        bottom: var(--size-min);
      }
      &:nth-of-type(3) .__img {
        left: 7%;
        bottom: 0;
      }
      & .__img {
        width: 20%;
      }
    }
  }
  #service {
    & .l-inner--l > .m-title--l .service-name {
      margin-top: var(--size-min);
      font-size: 10vw;
    }
    & .m-list--plan {
      & li[class^="plan__item--"] {
        padding: var(--size-3l);
        & + li[class^="plan__item--"] {
          margin-top: var(--size-m);
        }
      }
      & .m-content {
        & .__title {
          margin-bottom: var(--size-base);
        }
        & .__detail + .__title {
          margin-top: var(--size-l);
        }
      }
    }
  }
  #flow {
    & .js-accordion {
      & .js-accordion__title {
        padding: var(--size-m) calc(var(--size-4l) + var(--size-base)) var(--size-m) var(--size-l);
      }
    }
  }
  #faq {
    & .js-accordion {
      & .js-accordion__title,
      & .js-accordion__content {
        &::before {
          left: var(--size-m);
        }
      }
    }
  }
  #register-inquiry {
    & .m-list--btn .__item + .__item {
      margin-top: var(--size-3l);
    }
  }

}


/* thanks
====================================================*/
body.thanks {
  display: flex;
  flex-direction: column;
  & .main {
    margin: var(--size-5l) 0;
  }
  & .l-section {
    padding-top: 0;
  }
  & .footer {
    margin-top: auto;
  }
}
@media screen and (max-width: 767px) {
  body.thanks {
    & p + .s-ta--r {
      margin-top: var(--size-m);
    }
  }
}