@charset "utf-8";

/**
 * shogaku
 */
/* ========================================
 * Variables - 設定値
 * ======================================== */
@property --zoom-factor {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

:root {
  --min-viewport-width: 0px;
  /* viewportの最小値を下回ったら縮小をやめる */
  --max-viewport-width: 750px;
  /* viewportの最大値を上回ったら拡大をやめる */
  --zoom-value: clamp(tan(atan2(var(--min-viewport-width), var(--max-viewport-width))),
      tan(atan2(var(--zoom-factor), var(--max-viewport-width))),
      1);
  --zoom-factor: clamp(var(--min-viewport-width),
      100dvi,
      var(--max-viewport-width));

  --header-height-pc: 90px;

  --color-brown: #B71B2C;
  --color-brown-light: #f5f4ec;
  --color-white: #fff;
  --color-gray: #585858;
  --color-gray-white: #f7f7f7;
  --color-gray-blue: #717F87;
  --color-text: #513530;
  --color-orange: #EB6000;
  --color-orange-light: #FBE7DB;
  --color-orange-light-500: #FCE5D5;
  --color-orange-white: #FEF4ED;
  --color-blue:#0BB5CC;
  --color-green: #99CC24;

  --font-family-noto: 'Noto Sans JP', sans-serif;
  --font-family-number: 'DM Sans', 'Noto Sans JP', sans-serif;
  --font-family-roboto: 'Roboto', 'Noto Sans JP', sans-serif;

  --font-weight-regular: 400;
  --font-weight-normal: 500;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.1;
  }
}

@keyframes beacon {
  0% {
    opacity: 0.66;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.5;
  }
}

/* ========================================
 * Site - サイトの大枠
 * ======================================== */
html {
  scroll-behavior: smooth;
}

body.ab-pattern-b {
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-family-noto);
  font-weight: var(--font-weight-normal);
  line-height: 1.3;
  letter-spacing: 0.06em;
}

:where(body.ab-pattern-b) {
  em {
    font-style: normal;
    font-weight: var(--font-weight-bold);
  }

  a {
    transition: opacity 300ms linear;
  }

  a:hover,
  a:active,
  a:focus {
    opacity: 0.7;

    & img {
      opacity: 1;
    }
  }

  dialog {
    color: var(--color-text);
    padding: 0;
  }

  .s-main {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    margin-top: -130px;
  }

  /* 既存を打ち消し */
  .l-header--2024 {
    border: none;

    & > .l-header--2024__inner {
      background: transparent;
      box-shadow: none;
    }

    @media (min-width: 768px) {
      background-color: var(--color-white);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }
  }

  /* フッターボタンのアイコンを消す */
  #footer_btn-area {

    .btn-request-ele {
      font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
      font-weight: 600;
      background: -moz-linear-gradient(top, rgb(106, 194, 74) 0%, rgb(123, 230, 16) 100%);
      background: -webkit-linear-gradient(top, rgb(106, 194, 74) 0%, rgb(123, 230, 16) 100%);
      background: linear-gradient(to top, rgb(106, 194, 74) 0%, rgb(123, 230, 16) 100%);
      box-shadow: 0 2px 0 #58aa3c;
      border: 0;
      text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);

      &::before {
        display: none;
      }
    }

    .btn-agreement-ele {
      font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
      font-weight: 600;
      background: -moz-linear-gradient(top, rgb(245, 118, 44) 0%, rgb(239, 164, 15) 100%);
      background: -webkit-linear-gradient(top, rgb(245, 118, 44) 0%, rgb(239, 164, 15) 100%);
      background: linear-gradient(to top, rgb(245, 118, 44) 0%, rgb(239, 164, 15) 100%);
      box-shadow: 0 2px 0 #d16324;
      border: 0;

      &::before {
        display: none;
      }
    }

  }
}

/* ========================================
 * Components - コンポーネント
 * ======================================== */

.c-zoom-wrapper {
  zoom: var(--zoom-value); /* ビューポートのサイズに合わせて拡大縮小 */
  -webkit-text-size-adjust: initial; /* iOS Safariのバグを修正 */
}

.c-wrapper {
  width: 100%;
  max-width: var(--max-viewport-width);
  margin-inline: auto;

  @media (min-width: 768px) {
    &.\-only-sp {
      max-width: none;
      zoom: calc( 1 / var(--max-viewport-width));
    }
  }
}

.c-bg-shape {
  border-radius: 60px 0 60px 0;
  background-color: var(--color-brown-light);

  &.\-white {
    background-color: var(--color-white);
  }
}

.c-button {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 40px 60px;
  letter-spacing: 0.06em;
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); */
  font-size: 32px;
  transition: opacity 300ms linear;

  &:hover {
    opacity: 0.7;
  }

  &.\-number {
    font-family: var(--font-family-roboto);
    border-radius: 20px;
    padding: 20px;
    box-shadow: none;
  }

  &.\-orange {
    background-color: var(--color-orange);
    --_bg-color: var(--color-orange);
    --_text-color: var(--color-white);
  }

  &.\-green {
    background-color: var(--color-green);
    --_bg-color: var(--color-green);
    --_text-color: var(--color-white);
  }

  &.\-blue {
    background-color: var(--color-blue);
    --_bg-color: var(--color-blue);
    --_text-color: var(--color-white);
  }

  &.\-brown {
    background-color: var(--color-brown);
    --_bg-color: var(--color-brown);
    --_text-color: var(--color-white);
  }

  & > span {
    color: var(--_text-color, var(--color-white));
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    flex: 1 1 auto;
    text-align: center;
  }

  &.\-arrow::after {
    flex: 0 0 17px;
    width: 17px;
    height: 28px;
    background-color: var(--_text-color, var(--color-white));
    mask: url('data:image/svg+xml;charset=utf-8,%3Csvg width="17" height="28" viewBox="0 0 17 28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2.06348 2.125L13.9358 13.9973L2.06348 25.8697" stroke="black" stroke-width="2.96809" stroke-linecap="round"/%3E%3C/svg%3E') no-repeat center;
    mask-size: contain;
    content: '';
  }
}

.c-btn-detail {
  & > summary {
    display: inline-block;
    background-color: #d9d9d9;
    border-radius: 10px;
    font-weight: var(--font-weight-bold);
    font-size: 20px;
    line-height: 1;
    padding: 10px 15px;
    color: var(--color-gray);
    list-style: none;
    -webkit-details-marker: none;
    cursor: pointer;

    & > span {
      display: inline-flex;
      width: 10px;
      aspect-ratio: 1 / 1;
      justify-content: center;
      align-items: center;
      margin-left: 8px;
    }
  }

  & > div {
    font-size: 20px;
    margin-top: 10px;
    line-height: 1.5;
  }

  &:not([open]) > summary span:nth-child(2) {
    display: none;
  }

  &[open] > summary span:nth-child(1) {
    display: none;
  }
}

.c-dialog {
  --_transition-duration: 250ms;
  background-color: transparent;
  opacity: 0;
  transform: scale(0.95);
  transition-delay: 0ms;
  transition:
    display var(--_transition-duration) linear allow-discrete,
    overlay var(--_transition-duration) ease allow-discrete,
    opacity var(--_transition-duration) linear,
    transform var(--_transition-duration) ease;

  &[open] {
    opacity: 1;
    transform: scale(1);

    @starting-style {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  &::backdrop {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color var(--_transition-duration) linear;
  }

  &[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.35);
  }

  &.\-small {
    width: 100%;
  }

  .c-dialog__content {
    padding: 30px 0;
    border-radius: 20px;
    overflow: auto;
    background-color: var(--color-white);
    position: relative;
    opacity: 0;
    transition: opacity 1000ms linear;
  }

  &[open] .c-dialog__content {
    opacity: 1;
  }

  &.\-small {
    .c-dialog__content {
      display: grid;
      place-items: center;
      padding-inline: 40px;
      min-height: 200px;
    }
  }

  .c-dialog__close {
    position: fixed;
    right: 50%;
    translate: 320px 0;
    z-index: 1;
  }

  &.\-small {
    .c-dialog__close {
      position: absolute;
      right: 20px;
      top: 20px;
      translate: 0 0;
    }
  }
}

.c-hr-dashed {
  display: block;
  border-top: 4px dashed var(--_border-color, #FCE5DC);
  width: 650px;
  margin-inline: auto;

  &.\-blue {
    --_border-color: #C6EEF3;
  }
}

.js-circle {
  aspect-ratio: 1 / 1;
  position: relative;

  .js-circle__ornament {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    display: flex;
    justify-content: center;
  }

  .js-circle__number-box {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    font-size: 74px;
    z-index: 2;
    position: relative;
    text-align: center;
  }

  .js-circle__number {
    font-size: 120px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-family: var(--font-family-roboto);
  }

  .js-circle__graph {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

.c-chat-coachez {
  width: fit-content;
  margin-right: auto;
  padding-left: 24px;

  .c-chat-coachez__avatar {
    width: 110px;
    height: 110px;
    border-radius: 9999px;
    overflow: clip;

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .c-chat-coachez__balloon {
    &:not(:first-child) {
      margin-top: 10px;
    }

    & > p {
      margin-top: 24px;
      width: fit-content;
      background: var(--color-orange);
      color: var(--color-white);
      padding: 16px 40px;
      border-radius: 9999px;
      position: relative;

      &::before {
        display: block;
        width: 30px;
        height: 24px;
        position: absolute;
        top: -16px;
        left: 100px;
        content: '';
        background-image: url('/assets/shogaku/images/balloon-tail_coachez.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }

  .c-chat-coachez__description {
    padding-left: 20px;
    margin-top: 10px;

    & > p {
      font-size: 28px;
      color: var(--color-orange);
      font-weight: var(--font-semi-bold);
    }
  }
}

.c-chat-boy {
  width: fit-content;
  margin-left: auto;
  padding-right: 24px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;

  .c-chat-boy__avatar {
    width: 110px;
    height: 110px;
    border-radius: 9999px;
    overflow: clip;
    display: flex;
    justify-content: flex-end;

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .c-chat-boy__balloon {

    &:not(:first-child) {
      margin-bottom: 10px;
    }

    margin-bottom: 10px;

    & > p {
      width: fit-content;
      border: 4px solid var(--color-blue);
      background: var(--color-white);
      color: var(--color-blue);
      padding: 16px 40px 16px 88px;
      margin-bottom: 24px;

      border-radius: 9999px;
      position: relative;

      &::before {
        content: '';
        display: block;
        width: 33px;
        height: 61px;
        background-image: url('/assets/shogaku/images/icon_mic.svg');
        position: absolute;
        top: 12px;
        left: 36px;
      }

      &::after {
        display: block;
        width: 30px;
        height: 24px;
        position: absolute;
        bottom: -24px;
        right: 100px;
        content: '';
        background-image: url('/assets/shogaku/images/balloon-tail_boy.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }

  .c-chat-boy__description {
    padding-left: 20px;
    margin-bottom: 10px;

    & > p {
      font-size: 28px;
      color: var(--color-blue);
      font-weight: var(--font-semi-bold);
    }
  }
}

.c-heading-01 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 44px;
  font-weight: var(--font-weight-medium);

  &:before {
    content: '';
    display: block;
    width: 32px;
    aspect-ratio: 32 / 26;
    background-image: url('/assets/shogaku/images/heading-01_before.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  &:after {
    content: '';
    display: block;
    width: 32px;
    aspect-ratio: 32 / 26;
    background-image: url('/assets/shogaku/images/heading-01_after.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.c-heading-ribbon {
  text-align: center;
  font-size: 26px;
  letter-spacing: 0.1em;
  font-weight: var(--font-weight-bold);
  position: relative;
  container: c-heading-ribbon / inline-size;
  margin-inline: auto;
  z-index: 1;

  &.\-medium {
    width: 240px;
  }

  &.\-large {
    width: 290px;
  }

  &.\-orange {
    --_bg-color: var(--color-orange);
    color: var(--color-white);
  }

  &.\-blue {
    --_bg-color: var(--color-blue);
    color: var(--color-white);
  }

  &::before {
    content: '';
    display: block;
    height: 100%;
    border-width: 2cqi 50cqi;
    border-color: transparent var(--_bg-color);
    border-style: solid;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  span {
    vertical-align: middle;
  }
  
  .c-heading-ribbon__num {
    margin-left: 0.1em;
    font-size: 50px;
    font-family: var(--font-family-number);
  }
}

/* zoomすると計算に不具合が生じるので逆数で解除する */
.js-slider-in-modal {
  zoom: calc(1 / var(--zoom-value));
  width: 100%;

  .splide__arrows {
    position: relative;
    margin-top: calc(40px * var(--zoom-value));
    padding-bottom: calc(40px * var(--zoom-value));

    .splide__arrow {
      display: block;
      width: calc(80px * var(--zoom-value));
      height: calc(80px * var(--zoom-value));

      & > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

.js-open-modal {
  &.\-plus {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    background-color: #EFEFEF;
    padding: 24px 20px;
    gap: 20px;
    width: 500px;
    position: relative;
  
    .js-open-modal__text {
      flex-grow: 1;
      font-size: 32px;
      font-weight: var(--font-weight-bold);
      text-align: center;
    }

    &::after {
      position: absolute;
      right: 20px;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      content: url('/assets/shogaku/images/plus.svg');
      font-size: 32px;
      width: 55px;
      height: 55px;
      aspect-ratio: 1/1;
      border-radius: 9999px;
      background-color: #513530;
      color: #fff;
      line-height: 0;
    }
  }
}

.c-fukidashi {
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
  background-color: var(--_bg-color, var(--color-white));

  &.\-gray {
    --_bg-color: #60717b;
  }

  &.\-orange {
    --_bg-color: #eb6000;
  }

  &.\-light {
    --_bg-color: var(--color-brown-light);
  }

  &::after {
    content: "";
    border-width: 21px 12px 0;
    border-color: var(--_bg-color) transparent transparent;
    position: absolute;
    bottom: -20px;
    left: 50%;
    translate: -50% 0;
  }

  &.\-top {
    &::after {
      border-width: 0 24px 40px;
      border-color: transparent transparent var(--_bg-color);
      top: -32px;
      bottom: auto;
      translate: -50% 0;
    }
  }
}

.c-fukidashi-02 {
  border-radius: 9999px;
  padding: 20px;
  position: relative;

  &.\-gray {
    background-color: var(--color-gray-blue);
    --_bg-color: var(--color-gray-blue);
    color: var(--color-white);
  }

  &::before {
    content: '';
    border-style: solid;
    border-width: 12px 32px;
    border-color: transparent var(--_bg-color) transparent transparent;
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    top: 50%;
    left: -24px;
    translate: -50% -50%;
  }

  &.\-right {
    &::before {
      left: auto;
      right: -24px;
      border-color: transparent transparent transparent var(--_bg-color);
      translate: 50% -50%;
    }
  }
}



/* ========================================
 * Layout - セクション別
 * ======================================== */
.l-sect-fv {

  .l-sect-fv__inner {
    width: fit-content;
    margin-inline: auto;
    position: relative;
    height: 1100px;
    aspect-ratio: 750 / 1100;
    clip-path: inset(0 0 0 0);
    border-radius: 0 0 0 150px;
    overflow: hidden;
    /* 左下角丸 */
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='750' height='1110' viewBox='0 0 750 1110' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H750V1110H150C67.1573 1110 0 1042.84 0 960V0Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='750' height='1110' viewBox='0 0 750 1110' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H750V1110H150C67.1573 1110 0 1042.84 0 960V0Z' fill='white'/%3E%3C/svg%3E");

    @media (min-width: 768px) {
      width: 100%;
      height: auto;
      max-height: calc(100vh - var(--header-height-pc) - 30px);
      aspect-ratio: 1440 / 900;
      mask: none;
    }
  }

  .l-sect-fv__bg {
    position: fixed;
    width: var(--max-viewport-width);
    aspect-ratio: 750 / 1110;
    z-index: -1;
    scale: 1;
    will-change: scale, filter; /* for JS Animation */
    /* animation: zoomIn 10000ms 0ms ease-in-out forwards; */

    @media (min-width: 768px) {
      width: 100%;
      height: auto;
      max-height: calc(100vh - var(--header-height-pc) - 30px);
      aspect-ratio: 1440 / 900;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .l-sect-fv__copy {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    position: fixed;
    top: 150px;
    left: 50%;
    translate: -250px 0;
    clip-path: inset(0 0 0 0);
    z-index: -1;

    .l-sect-fv__copy-dot {
      translate: 0.65em -0.5em;

      @media (min-width: 768px) {
        translate: none;
      }
    }

    .l-sect-fv__copy-btn {
      width: fit-content;
      padding-block: clamp(20px, calc( (40 / 1440) * 100vw ), 40px);
      padding-inline: clamp(40px, calc( (80 / 1440) * 100vw ), 80px);
      font-size: clamp(20px, calc( (36 / 1440) * 100vw ), 36px);

      &::after {
        flex: 0 0 auto;
        width: clamp(12px, calc( (24 / 1440) * 100vw ), 24px);
        height: clamp(24px, calc( (48 / 1440) * 100vw ), 48px);
        background-color: var(--_text-color, var(--color-white));
        mask: url('data:image/svg+xml;charset=utf-8,%3Csvg width="17" height="28" viewBox="0 0 17 28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2.06348 2.125L13.9358 13.9973L2.06348 25.8697" stroke="black" stroke-width="2.96809" stroke-linecap="round"/%3E%3C/svg%3E') no-repeat center;
        mask-size: contain;
        content: '';
      }
    }

    > p {
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      font-weight: var(--font-weight-bold);
      color: var(--color-text);
      font-size: 36px;
      letter-spacing: 0;

      > span {
        rotate: -90deg;
        display: inline-block;
        width: 1em;
        height: 1em;
        margin-inline: 0.15em;
      }
    }
    
    @media (min-width: 768px) {
      position: absolute;
      writing-mode: horizontal-tb;
      line-height: 1.4;
      top: 40%;
        border-radius: 50%;
        margin-right: 10px;
      left: 10%;
      translate: none;

      > p {
        font-size: calc( (64 / 1440) * 100vw );
        letter-spacing: 0.05em;

        > span {
          display: inline;
          width: auto;
          height: auto;
          margin-inline: 0;
        }
      }
    }
  }

  .l-sect-fv__nav {
    position: relative;
    margin-top: -260px;
    z-index: 1;

    @media (min-width: 768px) {
      margin-top: 40px;
    }
  }

  .l-sect-fv__copy-text {
    will-change: filter;
    padding: 20px;
    margin-top: -20px;
    margin-left: -20px;

    @media (min-width: 768px) {
      margin: 0;
      padding: 0;
    }
  }

  .l-sect-fv__nav-inner {
    display: flex;
    width: 280px;
    padding: 0 50px;
    margin: 0 0 0 auto;
  }

  .l-sect-fv__bnr-box {
    width: 451px;
    aspect-ratio: 451/227;
    border-radius: 10px;
    overflow: hidden;

    @media (min-width: 768px) {
      width: 100%;
      height: auto;
    }

    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .l-sect-fv__cta-btn {
    width: 190px;
    position: relative;
    padding-top: 30px;

    @media (min-width: 768px) {
      display: none;
    }

    .l-sect-fv__cta-btn-pop {
      display: block;
      font-size: 20px;
      line-height: 1;
      height: auto;
      font-weight: var(--font-weight-bold);
      text-align: center;
      padding: 12px 16px;
      font-size: 23px;
      color: var(--color-orange);
      background-color: #FEFBE4;
      position: absolute;
      top: 0;
      left: 50%;
      translate: -50% 0;
      width: max-content;
      background-color: #FEFBE4;
      border-radius: 9999px;

      &.\-green {
        background-color: var(--color-white);
        color: var(--color-green);
      }
    }

    .l-sect-fv__cta-btn-core {
      display: block;
      width: 190px;
      aspect-ratio: 1/1;
      justify-content: center;
      align-items: center;
      border-radius: 9999px;
      background-color: var(--color-orange);
      color: var(--color-white);
      border: 5px solid var(--color-white);
      font-size: 28px;
      text-align: center;

      &.\-green {
        background-color: var(--color-green);
      }
    }
  }
}

.l-sect-lead {
  .l-sect-lead__title {
    font-size: 58px;
    line-height: 1.5;
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  .l-sect-lead__text {
    font-size: 28px;
    line-height: 2.15;
    text-align: center;
    font-weight: var(--font-weight-regular);
  }

  .l-sect-lead__image-box {
    aspect-ratio: 750 / 834;
    margin-inline: auto;
    position: relative;
  }

  .l-sect-lead__img {
    &.\-01 {
      position: absolute;
      inset: 0 auto auto 0;
      margin: auto;
    }
    &.\-02 {
      position: absolute;
      inset: 240px 0 auto auto;
      margin: auto;
    }
    &.\-03 {
      position: absolute;
      inset: 540px auto auto 21px;
      margin: auto;
    }
  }
}

.l-sect-adoption {
  .l-sect-adoption__circle {
    margin-top: -30px;
    width: 480px;
    margin-inline: auto;
  }

  .l-sect-adoption__title {
    font-size: 50px;
    line-height: 1.5;
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  .l-sect-adoption__inner {
    border-radius: 60px 0 60px 0;
    background-color: var(--color-brown-light);
  }

  .l-sect-adoption__boy {
    max-width: 291px;
    aspect-ratio: 291 / 311;
    margin-inline: auto;
    margin-top: -240px;
    position: relative;
    z-index: 3;

    > img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.l-sect-reason {
  .l-sect-reason__title {
    line-height: 1.3;

    &::before {
      content: '“';
      font-size: 128px;
      color: #E4E3D6;
      vertical-align: middle;
    }

    &::after {
      content: '”';
      font-size: 128px;
      color: #E4E3D6;
      vertical-align: middle;
    }

    span {
      font-size: 72px;
      text-decoration: underline;
      color: var(--color-orange);
      font-weight: var(--font-weight-bold);
      text-underline-offset: 20px;
      vertical-align: baseline;
      letter-spacing: 0.06em;
    }
  }

  .l-sect-reason__01 {
    position: relative;
    width: 750px;
    aspect-ratio: 750 / 620;
  }

  .l-sect-reason__01-tablet {
    position: absolute;
    top: 0;
    left: 0;
  }
  .l-sect-reason__01-pen {
    position: absolute;
    top: 0;
    right: 0;
  }

  .l-sect-reason__modal {
    width: calc(var(--max-viewport-width) - 70px);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .l-sect-reason__list {
    & > li {
      position: relative;
      padding-left: 60px;
      font-size: 30px;
      line-height: 1.5;
      font-weight: var(--font-weight-regular);

      &:not(:first-child) {
        margin-top: 32px;
      }

      &::before {
        content: '';
        display: block;
        width: 45px;
        height: 45px;
        background: url('/assets/shogaku/images/icon_check.svg') no-repeat center center / contain;
        position: absolute;
        left: 0;
      }
    }
  }

  .l-sect-reason__modal-slide {
    border: 1px solid var(--color-text);
    padding: calc(24px * var(--zoom-value));
    border-radius: calc(20px * var(--zoom-value));
  }

  .l-sect-reason__modal-cta-title {
    font-size: 28px;
    line-height: 1;
    color: var(--color-green);
    position: relative;
    padding-inline: 32px;
    width: fit-content;
    margin-inline: auto;

    &::before {
      content: '';
      display: block;
      width: 24px;
      height: 24px;
      background: url('/assets/shogaku/images/sect-reason_modal_cta_title-left.svg') no-repeat center center / contain;
      position: absolute;
      left: 0;
      top: 50%;
      translate: 0 -50%;
    }

    &::after {
      content: '';
      display: block;
      width: 24px;
      height: 24px;
      background: url('/assets/shogaku/images/sect-reason_modal_cta_title-right.svg') no-repeat center center / contain;
      position: absolute;
      right: 0;
      top: 50%;
      translate: 0 -50%;
    }
  }

  .l-sect-reason__modal-cta-text {
    font-size: 38px;
    line-height: 1.6;
    margin-top: 20px;
    text-align: center;
  }
  
  .l-sect-reason__02-modal-03 {
    position: relative;
  }

  .l-sect-reason__02-modal-03-balloon {
    position: absolute;
    top: 0;
    right: 0;
  }

  .l-sect-reason__02-modal-03__picture {
    & > img {
      margin-right: auto;
    }
  }

  .l-sect-reason__card {
    border-radius: 20px;
    border: 1px solid var(--color-text);
    padding: 30px;
  }

  .l-sect-reason__card-tag {
    border-radius: 15px;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    padding: 12px 24px;
    width: fit-content;
    background-color: var(--_bg-color, var(--color-gray));
    color: var(--_text-color, var(--color-white));

    &.\-blue {
      --_bg-color: #2666A0;
      --_text-color: var(--color-white);
    }
    &.\-green {
      --_bg-color: #5A904F;
      --_text-color: var(--color-white);
    }
    &.\-purple {
      --_bg-color: #6D578E;
      --_text-color: var(--color-white);
    }
  }

  .l-sect-reason__card-text {
    font-size: 24px;
    line-height: 1.6;
    font-weight: var(--font-weight-regular);
  }
}

.l-sect-method {
  .l-sect-method__title {
    line-height: 1.3;
    text-align: center;

    &::before {
      content: '“';
      font-size: 128px;
      color: #E4E3D6;
      vertical-align: top;
    }

    &::after {
      content: '”';
      font-size: 128px;
      color: #E4E3D6;
      vertical-align: top;
    }

    span {
      font-size: 72px;
      text-decoration: underline;
      color: #0BB5CC;
      font-weight: var(--font-weight-bold);
      text-underline-offset: 30px;
      vertical-align: baseline;
      letter-spacing: 0.06em;
      padding-inline: 0.15em;
      line-height: 1.8;
    }
  }
}


.l-sect-method-01 {
  .l-sect-method-01__accordion-container {
    margin-top: -40px;
  }
  
  .l-sect-method-01__accordion {
    padding-top: 80px;
    border-radius: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-gray-white);
    overflow: clip;
    max-height: 1120px;
  }

  &.is-open {
    .l-sect-method-01__accordion {
      border-radius: 10px;
      padding-bottom: 200px;
      max-height: 5000px;
    }
  }

  .l-sect-method-01__accordion-bottom {
    width: fit-content;
    margin-top: -280px;
    position: relative;
    margin-inline: auto;
    display: none;

    & > p {
      font-size: 50px;
      line-height: 1.3;
      color: var(--color-blue);
      font-weight: var(--font-weight-bold);
      position: absolute;
      left: -120px;
      top: 50px;
      rotate: -15deg;
      letter-spacing: -0.02em;
    }
  }

  &.is-open {
    .l-sect-method-01__accordion-bottom {
      display: block;
    }
  }

  .l-sect-method-01__accordion-open-btn {
    width: 100%;
    margin-inline: auto;
    background-color: var(--color-gray-white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 36px;
    padding-bottom: 36px;
    border-radius: 0 0 10px 10px;

    & > span {
      font-size: 26px;
      line-height: 1.5;
      font-weight: var(--font-weight-bold);
    }

    &::after {
      content: '';
      display: block;
      width: 21px;
      height: 12px;
      background-image: url('/assets/shogaku/images/arrow_down_brown.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }

  &.is-open {
    .l-sect-method-01__accordion-open-btn {
      display: none;
    }
  }
}

.l-sect-grade {

  .l-sect-grade__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .l-sect-grade__list {
    display: grid;
    grid-template: 1fr 1fr / auto auto;
    gap: 40px;
  }
}

.l-sect-improve {

  .l-sect-improve__title {
    font-size: 50px;
    line-height: 1.5;
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  .l-sect-improve__inner {
    padding-bottom: 100px;
    border-radius: 60px 0 60px 0;
    background-color: var(--color-brown-light);
  }

  .l-sect-improve__circle {
    margin-top: -36px;
    width: 480px;
    margin-inline: auto;
  }

  .l-sect-improve__inner-02 {
    border-radius: 60px 0 60px 0;
    background-color: #F7F7F7;
  }

  .l-sect-improve__girl {
    max-width: 460px;
    aspect-ratio: 460 / 304;
    margin-inline: auto;
    margin-top: -240px;
    position: relative;
    z-index: 3;

    > img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.l-sect-motivation {
  .l-sect-motivation__title {
    line-height: 1.3;
    &::before {
      content: '“';
      font-size: 128px;
      color: #E4E3D6;
      vertical-align: middle;
    }
  
    &::after {
      content: '”';
      font-size: 128px;
      color: #E4E3D6;
      vertical-align: middle;
    }

    span:nth-child(1) {
      font-size: 48px;
      font-weight: var(--font-weight-bold);
      padding-right: 12px;
    }

    span:nth-child(2) {
      font-size: 96px;
      text-decoration: underline;
      color: var(--color-orange);
      font-weight: var(--font-weight-bold);
      text-underline-offset: 20px;
      vertical-align: baseline;
      letter-spacing: 0.06em;
    }
  }
}


.l-sect-watch {
  .l-sect-watch__screen {
    position: relative;
    overflow: clip;
  }

  .l-sect-watch__bg {
    position: relative;
    z-index: -1;
  }

  .l-sect-watch__balloon-01 {
    position: absolute;
    top: 70px;
    left: 30px;
    z-index: 1;
  }

  .l-sect-watch__balloon-02 {
    position: absolute;
    top: 350px;
    left: 360px;
    z-index: 2;
  }

  .l-sect-watch__balloon-03 {
    position: absolute;
    top: 670px;
    left: 350px;
    z-index: 3;
  }

  .l-sect-watch__balloon-04 {
    position: absolute;
    top: 940px;
    left: 110px;
    z-index: 5;
  }

  .l-sect-watch__balloon-05 {
    position: absolute;
    top: 915px;
    left: 220px;
    z-index: 4;
  }
}

.l-sect-feature {
  .l-sect-feature__inner {
    background-color: var(--color-brown-light);
    padding-block: 120px;
  }

  .l-sect-feature__concept-art {
    position: relative;
    width: 500px;
    aspect-ratio: 500 / 500;
    margin-inline: auto;
  }

  .l-sect-feature__honeycomb {
    position: absolute;
    width: 250px;
    aspect-ratio: 250 / 288;
    inset: 0;
    margin: auto;

    &.\-01 {
      transform: translate(0, -100px);
    }

    &.\-02 {
      transform: translate(-123px, 112px);
    }

    &.\-03 {
      transform: translate(123px, 112px);
    }
  }

  .l-sect-feature__beacon {
    position: absolute;
    width: 151px;
    aspect-ratio: 151 / 174;
    inset: 30px 0 0 00;
    margin: auto;

    & > svg {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      object-fit: contain;
      animation: beacon 2000ms ease-out forwards infinite;

      &:nth-of-type(1) {
      }
      &:nth-of-type(2) {
        animation-delay: 1000ms;
      }

    }

  }

  .l-sect-feature__smile-zemi {
    position: absolute;
    width: 150px;
    aspect-ratio: 150 / 173;
    inset: 30px 0 0 00;
    margin: auto;
  }

  .l-sect-feature__text {
    position: absolute;
    width: fit-content;
    height: fit-content;
    inset :0;
    margin: auto;
    font-size: 25px;
    color: var(--color-orange);

    &.\-01 {
      transform: translate(0, -123px);
    }

    &.\-02 {
      transform: translate(-123px, 123px);
    }

    &.\-03 {
      transform: translate(123px, 123px);
    }
  }
  
}

.l-sect-faq {
  .l-sect-faq__inner {
    padding-top: 100px;
    padding-bottom: 80px;
    padding-inline: 45px;
    background-color: var(--color-brown-light);
  }

  h2 {
    text-align: center;
    margin: 0 auto;
  }

  .l-sect-faq__grid {
    margin-top: 43px;
    display: grid;
    gap: 40px;
  }

  .l-sect-faq__item {
    border-radius: 60px 0 60px 0;
    background-color: var(--color-white);
    padding: 72px 52px;

    & > details {
      & > summary {
        display: flex;
        gap: 24px;
        list-style: none;
        cursor: pointer;
        margin-block: -72px;
        padding-block: 72px;
        margin-inline: -52px;
        padding-inline: 52px;

        &::-webkit-details-marker {
          display: none;
        }

        & > :is(h1, h2, h3, h4, h5, h6) {
          font-size: 32px;
          line-height: 1.5;
          flex-grow: 1;
        }

        &::before {
          content: '';
          display: block;
          flex-shrink: 0;
          width: 37px;
          height: 43px;
          background: url('/assets/shogaku/images/q.svg') no-repeat center center / contain;
        }

        &::after {
          content: '';
          display: block;
          flex-shrink: 0;
          width: 45px;
          height: 45px;
          align-self: center;
          background: url('/assets/shogaku/images/icon_collapsed.svg') no-repeat center center / contain;
        }
      }

      & > div {
        display: flex;
        gap: 24px;
        transition:
          max-height 500ms,
          height 500ms,
          opacity 500ms,
          content-visibility 500ms allow-discrete;

        max-height: 0;
        height: 0;
        opacity: 0;
        overflow: clip;
        border-top: 2px solid var(--color-orange-light);
        margin-top: 60px;
        padding-top: 52px;
        line-height: 2;

        &::before {
          content: '';
          display: block;
          flex-shrink: 0;
          width: 37px;
          height: 43px;
          background: url('/assets/shogaku/images/a.svg') no-repeat center center / contain;
          margin-top: 8px;
        }
      }

      &[open] {
        & > summary::after {
          background: url('/assets/shogaku/images/icon_expanded.svg') no-repeat center center / contain;
        }

        & > div {
          max-height: 0;
          height: auto;
          opacity: 1;
        }
      }

      @supports (interpolate-size: allow-keywords) {
        :root {
          interpolate-size: allow-keywords;
          /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
        }

        &[open] > div {
          max-height: 2000px;
          height: auto;
        }
      }

      /* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
      @supports not (interpolate-size: allow-keywords) {
        &[open] > div {
          max-height: 2000px;
          overflow-y: auto;
        }
      }
    }
  }
}

.l-sect-trial-01 {
  padding-top: 120px;

  .l-sect-trial-01__main {
    position: relative;
    z-index: 2;

    & > img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .l-sect-trial-01__content {
    position: relative;
    width: 100%;
    background-color: var(--color-brown-light);
    padding-top: 320px;
    padding-bottom: 120px;
    padding-inline: 90px;
    margin-top: -200px;
    z-index: 1;
  }

  .l-sect-trial-01__list {
    & > li {
      position: relative;
      padding-left: 60px;
      font-size: 30px;
      line-height: 1.5;

      &:not(:first-child) {
        margin-top: 40px;
      }

      &::before {
        content: '';
        display: block;
        width: 45px;
        height: 45px;
        background: url('/assets/shogaku/images/icon_check.svg') no-repeat center center / contain;
        position: absolute;
        left: 0;
      }
    }
  }

  .l-sect-trial-01__box {
    border: 8px solid var(--color-text);
    display: flex;
    flex-flow: column;
    padding: 52px 27px;
    width: 100%;
    border-radius: 20px;
    position: relative;
    margin-top: 80px;

    &::before {
      content: '';
      width: 0;
      height: 0;
      border-width: 0 24px 40px;
      border-color: transparent transparent var(--color-text);
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
    }

    & > p {
      font-size: 32px;
      text-align: center;
      font-weight: var(--font-weight-bold);
    }

    & > ul {
      margin-top: 24px;

      & > li {
        font-size: 28px;
        line-height: 1.6;
        margin-top:4px;
        font-weight: var(--font-weight-regular);
      }
    }
  }

  .l-sect-trial-01__price {
    width: 100%;
    background-color: var(--color-text);
    color: var(--color-white);
    text-align: center;
    padding-block: 64px;
  }
}

.l-sect-trial-02 {
  .l-sect-trial-02__inner {
    padding-top: 120px;
    padding-bottom: 20px;
    border-radius: 60px 0 60px 0;
    background-color: var(--color-brown-light);
  }

  .l-sect-trial-02__box {
    border-radius: 20px;
    position: relative;
    width: 100%;
    background-color: var(--color-white);
    display: flex;
    flex-flow: column;
    font-size: 32px;
    text-align: center;
    padding-top: 80px;
    font-family: var(--font-family-roboto);

    &::after {
      content: '';
      border-width: 32px 20px 0;
      border-color: var(--color-text) transparent transparent;
      position: absolute;
      bottom: -32px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .l-sect-trial-02__box-header {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-brown);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    border-radius: 9999px;
    padding: 12px 40px;
    width: 370px;
  }

  .l-sect-trial-02__box-text {
    font-size: 46px;
    line-height: 1.8;
    font-weight: var(--font-weight-semibold);

    & em {
      font-size: 106px;
      padding-inline: 12px;
      line-height: 1;
    }
  }

  .l-sect-trial-02__box-footer {
    background: var(--color-text);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:  0 0 20px 20px;
    margin-top: 40px;
    padding: 22px;
    font-size: 48px;
  }
}

.l-sect-trial-03 {
  .l-sect-trial-03__inner {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.l-sect-inquiry {
  .l-sect-inquiry__inner {
    padding-top: 150px;
    padding-bottom: 130px;
    padding-inline: 45px;
    background-color: var(--color-text);
  }

  .l-sect-inquiry__contents {
    background-color: var(--color-white);
    border-radius: 100px 0 100px 0;
    margin-top: 60px;
    padding: 20px 50px 100px;
    position: relative;
    display: grid;
    justify-content: center;

    &::before {
      content: '';
      width: 200px;
      height: 128px;
      background: url('/assets/shogaku/images/illust_ornament_tr.svg') no-repeat center center / contain;
      position: absolute;
      top: -35px;
      right: -20px;
    }

    &::after {
      content: '';
      width: 205px;
      height: 122px;
      background: url('/assets/shogaku/images/illust_ornament_bl.svg') no-repeat center center / contain;
      position: absolute;
      bottom: -45px;
      left: -20px;
    }
  }
}

/* ========================================
 * Utilities - ユーティリティクラス
 * ======================================== */
.u-text-white {
  color: #fff;
}

.u-text-text {
  color: var(--color-text);
}

.u-text-gray {
  color: var(--color-gray);
}

.u-text-gray-blue {
  color: var(--color-gray-blue);
}

.u-text-orange {
  color: var(--color-orange);
}

.u-text-blue {
  color: var(--color-blue);
}

.u-text-brown {
  color: var(--color-brown);
}

.u-bg-gray-blue {
  background-color: var(--color-gray-blue);
}

.u-bg-white {
  background-color: var(--color-white);
}

.u-bg-gray-white {
  background-color: var(--color-gray-white);
}

.u-bg-orange {
  background-color: var(--color-orange);
}

.u-bg-orange-light {
  background-color: var(--color-orange-light);
}

.u-bg-orange-light-500 {
  background-color: var(--color-orange-light-500);
}

.u-bg-orange-white {
  background-color: var(--color-orange-white);
}

.u-bg-blue {
  background-color: var(--color-blue);
}

.u-bg-text {
  background-color: var(--color-text);
}

.u-font-regular {
  font-weight: var(--font-weight-regular);
}

.u-font-semibold {
  font-weight: var(--font-weight-semibold);
}

.u-font-bold {
  font-weight: var(--font-weight-bold);
}

.u-font-noto {
  font-family: var(--font-family-noto);
}

.u-font-roboto {
  font-family: var(--font-family-roboto);
}

.u-font-number {
  font-family: var(--font-family-number);
}

.u-text-zoom-24 {
  font-size: calc(24px * var(--zoom-value));
}

.u-text-20 {
  font-size: 20px;
}

.u-text-24 {
  font-size: 24px;
}

.u-text-26 {
  font-size: 26px;
}

.u-text-28 {
  font-size: 28px;
}

.u-text-30 {
  font-size: 30px;
}

.u-text-32 {
  font-size: 32px;
}

.u-text-34 {
  font-size: 34px;
}

.u-text-38 {
  font-size: 38px;
}

.u-text-40 {
  font-size: 40px;
}

.u-text-42 {
  font-size: 42px;
}

.u-text-43 {
  font-size: 43px;
}

.u-text-44 {
  font-size: 44px;
}

.u-text-46 {
  font-size: 46px;
}

.u-text-48 {
  font-size: 48px;
}

.u-text-50 {
  font-size: 50px;
}

.u-text-52 {
  font-size: 52px;
}

.u-text-86 {
  font-size: 86px;
}

.u-leading-tight {
  line-height: 1.25;
}

.u-leading-snug {
  line-height: 1.375;
}

.u-leading-relaxed {
  line-height: 1.625;
}

.u-leading-loose {
  line-height: 2;
}

.u-text-center {
  text-align: center;
}

.u-relative {
  position: relative;
}

.u-rounded-full {
  border-radius: 9999px;
}

.u-rounded-10 {
  border-radius: 10px;
}

.u-rounded-15 {
  border-radius: 15px;
}

.u-rounded-20 {
  border-radius: 20px;
}

.u-rounded-full {
  border-radius: 9999px;
}

.u-no-shadow {
  box-shadow: none;
}

.u-zoom-half {
  zoom: 0.5;
}