@charset "utf-8";
/* ==========================================================================
   変数の設定
   ========================================================================== */
:root {
    /* 汎用的な色 */
    --black-color: #1c1c1c;
    --white-color: #fff;
    --gray-color: #d9d9d9;
    --red-color: #d11717;
    --yellow-color: #f8fb66;
    --green-color: #0ab727;

    --orange: #f18525;

    /* メインの色 */
    /* --primary-color: #a9853b; */
    --primary-color: #6e4d09;
    --primary-middle-color: #c9bc9c;
    --primary-light-color: #ffecc9;
    --primary-white-color: #fffdf8;
    --primary-gradation-color:  linear-gradient(45deg, var(--primary-color) 0%, var(--primary-middle-color) 100%);
    --primary-light-gradation-color:  linear-gradient(45deg, var(--primary-light-color) 0%, var(--primary-white-color) 100%);
    
    /* サブの色 */
    --secondary-color: #022b61;
    --secondary-middle-color: #386fb6;
    --secondary-light-color: #5f90d1;
    --secondary-gradation-color:  linear-gradient(45deg, var(--secondary-color) 0%, var(--secondary-middle-color) 100%);

    /* ボタンの色 */
    --accent-color: #ce4607;

    /* 影の色 */
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* 満足度スコアの星の色 */
    --star-color: #F4CE2D;
    --star-empty-color: #999;

    /* 要素間のマージン */
    --spacer-0: 0;
    --spacer-ss: 8px;
    --spacer-s: 16px;
    /* --spacer-m: 40px; */
    --spacer-m: clamp(20px, 4.72vw + 3.77px, 40px);
    /* --spacer-l: 72px; */
    --spacer-l: clamp(36px, 8.49vw + 6.8px, 72px);
  
    --spacer-l-double: 144px;

    /* タイトルのフォント */
    /* --title-font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif; */
    --title-font-family: 'Noto Serif JP', serif;
    /* --title-font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; */

    /* CTAボタンのフォント */
    --cta-btn-font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;

    /* フォントサイズ */
    /* --font-size-maincatch: clamp(36px, 4.72vw + 19.77px, 56px); */
    /* --font-size-maincatch: clamp(36px, 8.49vw + 6.79px, 72px); */
    /* --font-size-maincatch-pc: clamp(48px, 6.9vw - 5px, 64px); */
    /* --font-size-maincatch-pc: clamp(46px, 7.76vw - 13.6px, 64px); */
    /* --font-size-maincatch-pc: clamp(40px, 10.345vw - 39.45px, 64px); */
    --font-size-maincatch-pc: clamp(40px, 8.62vw - 26.21px, 60px);
    --font-size-maincatch-sp: clamp(34px, 7.075vw + 9.66px, 64px);
    /* --font-size-subcatch: clamp(20px, 3.77vw + 7.02px, 36px); */
    /* --font-size-subcatch: clamp(20px, 4.72vw + 3.77px, 40px); */
    --font-size-subcatch-pc: clamp(32px, 3.45vw + 5.52px, 40px);
    /* --font-size-subcatch-sp: clamp(20px, 4.72vw + 3.77px, 40px); */
    /* --font-size-subcatch-sp: clamp(18px, 5.189vw + 0.15px, 40px); */
    --font-size-subcatch-sp: clamp(24px, 3.77vw + 11.02px, 40px);

    /* --font-size-sss: 12px; */
    --font-size-sss: clamp(10px, 0.47vw + 8.38px, 12px);
    /* --font-size-ss: 16px; */
    --font-size-ss: clamp(12px, 0.94vw + 8.75px, 16px);
    /* テキストの基準サイズ */
    /* --font-size-s: 20px; */
    --font-size-s: clamp(16px, 0.94vw + 12.75px, 20px);
    --font-size-s-dynamic: clamp(12px, 1.89vw + 5.5px, 20px);
    /* --font-size-m: 26px; */
    --font-size-m: clamp(16px, 2.36vw + 7.89px, 26px);
    /* --font-size-m-plus: 30px; */
    --font-size-m-plus: clamp(20px, 2.83vw + 10.26px, 32px);
    --font-size-m-plus-dynamic: clamp(16px, 3.77vw + 3.02px, 32px);
    /* --font-size-l: 44px; */
    /* --font-size-l: clamp(24px, 4.72vw + 7.77px, 44px); */
    /* --font-size-l: clamp(22px, 5.19vw + 4.15px, 44px); */
    --font-size-l: clamp(22px, 4.25vw + 7.4px, 40px);
    /* メインキャッチのみ使用 */
    /* --font-size-ll: 60px; */
    --font-size-ll: clamp(36px, 4.72vw + 19.77px, 56px);/*画面幅344pxで36px、画面幅768pxで56px*/
}

/* ==========================================================================
   共通の設定
   ========================================================================== */
html {
    scroll-behavior: smooth;
    /* overflow-y: scroll; */
}

body {
    color: var(--black-color);
    line-height: 1.5;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-size: var(--font-size-s);
}

body.is-modal-open {
    overflow: hidden /* 講師紹介のモーダルウィンドウ表示中に背景がスクロールされるのを防ぐ */
}

.inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 50px;
}

.inner.padding-zero {
    padding: 0;
}

@media (max-width:768px) {
    .inner {
        padding: 0 20px;
    }
}

.sp-only {
    display: none;
}

.pc-only {
    display: block;
}

@media (max-width:768px) {
    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }
}

.spacer-ss {
    margin-bottom: var(--spacer-ss);
}

.spacer-s {
    margin-bottom: var(--spacer-s);
}

.spacer-s-top {
    margin-top: var(--spacer-s);
}

.spacer-m {
    margin-bottom: var(--spacer-m);
}

.spacer-l {
    margin-bottom: var(--spacer-l);
}

.spacer-l-double {
    margin-bottom: var(--spacer-l-double);
}

.bold {
    font-weight: 600;
}

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

.underline {
    text-decoration: underline;
}
/* ==========================================================================
   フローティングボタン
   ========================================================================== */
#floating_btn {
    position: fixed;
    bottom: 8px;
    transition: opacity 0.5s, visibility 0.5s;
    z-index: 1000;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    padding: 0 10px;
}
/* #floating_btn .scroll_btn {
    width: 90%;
    text-align: center;
    display: block; */
    /* display: none; */
    /* margin: 0 auto; */
    /* opacity: 0;
    visibility: hidden; */
    /* font-size: 22px;
    padding: 12px; */
/* background: rgb(18,167,3); */
/* background: linear-gradient(0deg, rgba(18,167,3,1) 0%, rgba(32,198,10,1) 100%); */
/* } */
/* #floating_btn .scroll_btn span {
    background-color: white;
    color: #1eac06;
    padding: 2px 4px;
    display: inline-block;
    margin-right: 8px;
} */

#floating_btn.show {
    /* display: block; */
    opacity: 1;
    visibility: visible;
     /* opacity: 0;
    visibility: hidden; */
}
 
#floating_btn.hide {
    opacity: 0;
    visibility: hidden;
}

/* @media (min-width:768px) {
#floating_btn .scroll_btn {
    width: 600px; */
    /* padding: 24px;
    font-size:30px; */
/* }
} */
/* ==========================================================================
   ファーストビューセクション
   ========================================================================== */
/* =========================================
   ファーストビューセクション（AI出力画像版）（PC画面）
   ========================================= */
    .fv {
      width: 100%;
      background: #fffaf0;
      display: flex;
      justify-content: center;
      overflow: hidden;
    }

    .fv-inner {
      position: relative;
      width: 100%;
      /* max-width: 1448px; */
      /* max-width: 1080px; */
      max-width: 1000px;
      margin: 0 auto;
    }

    .fv-image {
      display: block;
      width: 97.8%;
      height: auto;
      margin: 0 auto;
    }

    .fv-cta {
      position: absolute;
      /* left: 5.5%;
      bottom: 2.2%; */
      left: 5.5%;
      bottom: 19.0%;
      width: 87%;
      /* height: 11.8%; */
      height: 11.0%;
      display: block;
      border-radius: 999px;
      overflow: hidden;
      text-indent: -9999px;
      z-index: 10;
      animation: ctaFloat-pc 1.8s ease-in-out infinite;
    }

    .fv-cta::before {
      content: "";
      position: absolute;
      top: -45%;
      left: -40%;
      width: 26%;
      height: 190%;
      background: linear-gradient(
        115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 35%,
        rgba(255,255,255,0.88) 50%,
        rgba(255,255,255,0.18) 65%,
        rgba(255,255,255,0) 100%
      );
      transform: rotate(18deg);
      animation: ctaShine-pc 2.5s ease-in-out infinite;
    }

    .fv-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      box-shadow: 0 0 0 0 rgba(255, 96, 32, .45);
      animation: ctaGlow-pc 1.8s ease-in-out infinite;
    }

    .fv-cta:focus-visible {
      outline: 4px solid rgba(255, 122, 60, .55);
      outline-offset: 5px;
    }

    @keyframes ctaFloat-pc {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-5px);
      }
    }

    @keyframes ctaShine-pc {
      0% {
        left: -40%;
        opacity: 0;
      }
      18% {
        opacity: 1;
      }
      55% {
        left: 116%;
        opacity: 1;
      }
      100% {
        left: 116%;
        opacity: 0;
      }
    }

    @keyframes ctaGlow-pc {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 96, 32, .35);
      }
      50% {
        box-shadow: 0 0 24px 9px rgba(255, 96, 32, .34);
      }
    }

    @media (max-width: 768px) {
      .fv-image {
        width: 100%;
      }

      .fv-cta {
        left: 5.2%;
        bottom: 0.4%;
        width: 76.8%;
        height: 10.4%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .fv-cta,
      .fv-cta::before,
      .fv-cta::after {
        animation: none;
      }
    }
/* =========================================
   ファーストビューセクション（AI出力画像版）（SP画面）
   ========================================= */
    .sp-fv {
      width: 100%;
      /* min-height: 100svh; */
      background: #fffaf0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
    }

    .sp-fv-inner {
      position: relative;
      width: 100%;
      /* max-width: 375px; */
      max-width: 768px;
      margin: 0 auto;
      background: #fffaf0;
    }

    .sp-fv-image {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 auto;
    }

    .sp-fv-cta {
      position: absolute;
      left: 3.6%;
      /* bottom: 1.7%; */
      bottom: 14.8%;
      width: 92.7%;
      /* height: 10.5%; */
      height: 9.0%;
      display: block;
      border-radius: 999px;
      overflow: hidden;
      text-indent: -9999px;
      z-index: 10;
      animation: ctaFloat-sp 1.8s ease-in-out infinite;
    }

    .sp-fv-cta::before {
      content: "";
      position: absolute;
      top: -45%;
      left: -45%;
      width: 30%;
      height: 190%;
      background: linear-gradient(
        115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 35%,
        rgba(255,255,255,0.88) 50%,
        rgba(255,255,255,0.18) 65%,
        rgba(255,255,255,0) 100%
      );
      transform: rotate(18deg);
      animation: ctaShine-sp 2.5s ease-in-out infinite;
    }

    .sp-fv-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      box-shadow: 0 0 0 0 rgba(255, 96, 32, .45);
      animation: ctaGlow-sp 1.8s ease-in-out infinite;
    }

    .sp-fv-cta:focus-visible {
      outline: 3px solid rgba(255, 122, 60, .55);
      outline-offset: 3px;
    }

    @keyframes ctaFloat-sp {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-4px);
      }
    }

    @keyframes ctaShine-sp {
      0% {
        left: -45%;
        opacity: 0;
      }
      18% {
        opacity: 1;
      }
      55% {
        left: 116%;
        opacity: 1;
      }
      100% {
        left: 116%;
        opacity: 0;
      }
    }

    @keyframes ctaGlow-sp {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 96, 32, .32);
      }
      50% {
        box-shadow: 0 0 18px 6px rgba(255, 96, 32, .34);
      }
    }

    @media (max-width: 374px) {
      .sp-fv-inner {
        max-width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .sp-fv-cta,
      .sp-fv-cta::before,
      .sp-fv-cta::after {
        animation: none;
      }
    }

/* =========================================
   ファーストビューセクション（PC画面）
   ========================================= */
.fv__container {
    position: relative;
    /* background: center / cover url("../images/fv-bg.png") no-repeat; */
    /* background: center / cover url("../images/fv-bg-many-circles-grid.png") no-repeat; */
    background: center / cover url("../images/fv-bg-many-circles.png") no-repeat;
    /* font-family: var(--title-font-family); */
    padding-bottom: var(--spacer-l);
    z-index: 1; /* スタックコンテキストを作成（マイナスにはしない） */
}

.fv__container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-light-gradation-color);
    opacity: 0.5; /* 下の画像が見えるように透過させる */
    z-index: -1;  /* 画像（親）とテキストの間に差し込む */
}

.fv__flex {
    display: flex;
    padding-top: var(--spacer-m);
    /* padding-bottom: var(--spacer-m); */
    align-items: flex-end;
}

.fv__left {
  max-width: 600px;
  flex: 1;
  margin: 0 auto;
}

.fv__right {
  max-width: 600px;
  flex: 0.63;
}

.fv__main-catch {
    color: var(--primary-color);
    /* color: var(--secondary-color); */
    font-size: var(--font-size-maincatch-pc);
    line-height: 1.3;
    font-weight: 600;
    margin: 0 auto;
    text-align: center;
    font-family: var(--title-font-family);
    padding-bottom: var(--spacer-s);
}

.fv__sub-catch {
    /* font-size: var(--font-size-m-plus); */
    font-size: var(--font-size-subcatch-pc);
    line-height: 1.3;
    font-weight: 600;
    margin: 0 auto;
    text-align: center;
    font-family: var(--title-font-family);
    padding-bottom: var(--spacer-s);
}

.fv__sub-catch span {
    /* color: var(--primary-color); */
    color: var(--secondary-color)
}

.fv__title {
    /* width: 70%; */
    /* width: 90%; */
    width: 100%;
    margin: 0 auto;
    padding-bottom: var(--spacer-s);
}

.fv__title picture {
    margin: 0 auto;
}

.fv__title img {
    width: 90%;
    margin: 0 auto;
}

/* .fv__sub-title {
    font-size: var(--font-size-m-plus);
    font-weight: 600;
    text-align: center;
    font-family: var(--title-font-family);
    padding-bottom: var(--spacer-s);
} */

.fv__stats {
    /* width: 70%; */
    /* width: 90%; */
    width: 100%;
    /* width: 40%; */
    margin: 0 auto;
}

.fv__stats p {
    font-family: var(--title-font-family);
    font-size: var(--font-size-sss);
    /* padding-bottom: var(--spacer-s); */
    padding-bottom: 24px;
    text-align: end;
    font-weight: 600;
}

.fv__sachin {
    /* max-width: 360px; */
    /* width: 100%; */
    max-width: 520px;
    height: auto;
}

.fv__sachin img {
    width: 100%; /* 枠に合わせて画像をフィットさせる */
    height: auto;
}

/* =========================================
   ファーストビューセクション（SP画面）
   ========================================= */
@media (max-width:768px) {
    .fv__main-catch {
        font-size: var(--font-size-maincatch-sp);
        padding-top: var(--spacer-m);
        /* padding-bottom: 0; */
    }

    .fv__flex {
        padding-top: 0;
    }
    .fv__sub-catch {
        font-size: var(--font-size-subcatch-sp);
        padding-top: 0;
        /* max-width: 328px; */
        /* padding-bottom: var(--spacer-ss); */
        padding-bottom: var(--spacer-s);
    }

    .fv__title {
        padding-bottom: var(--spacer-s);
    }
    /* .fv__sub-title {
        font-size: var(--font-size-m);
        padding-bottom: var(--spacer-sss);
    } */

    /* .fv__right {
        position: relative;
    } */

    .fv__sachin {
        max-width: 440px;
        /* position: absolute;
        z-index: 100;
        top: 100px;
        right: 0; */
    }

    .fv__stats p {
    /* padding-bottom: var(--spacer-ss); */
    /* padding-bottom: var(--spacer-s); */
    padding-bottom: 24px;
}
}

/* ==========================================================================
　　CTAボタン
　　========================================================================== */
/* .cta-btn__container {
    padding-bottom: var(--spacer-l);   
} */

.cta-btn__box {
    background-color: var(--accent-color);
    max-width: 800px;
    height: 92px;
    border-radius: 46px;
    padding: 4px;
    margin: 0 auto;
    box-shadow: 0 0 5px 0 var(--shadow-color);
}

.cta-btn__inner-line {
    border: solid 1px var(--white-color);
    width: 100%;
    height: 84px;
    border-radius: 44px;
    margin: 0 auto;
    /* font-size: 32px; */
    font-size: var(--font-size-m-plus);
    font-family: var(--cta-btn-font-family);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-btn__text-container {
    width: fit-content;
    height: auto;
    display: flex;
    margin: 0 auto;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

.cta-btn__accent {
    width: fit-content;
    padding: 0 8px;
    /* height: 60px; */
    /* height: clamp(28px, 7.55vw + 2.04px, 60px); */
    height: clamp(28px, 5.66vw + 8.53px, 52px);
    background-color: var(--white-color);
    color: var(--accent-color);
    border-radius: 2px;
    /* line-height: 60px; */
    /* line-height: clamp(28px, 7.55vw + 2.04px, 60px); */
    line-height: clamp(28px, 5.66vw + 8.53px, 52px);
    /* margin-left: 10%; */
    margin-right: 10px;
}

.cta-btn__text {
    color: var(--white-color);
    padding: 0 8px;
    /* line-height: 60px; */
    /* line-height: clamp(28px, 7.55vw + 2.04px, 60px); */
    line-height: clamp(28px, 5.66vw + 8.53px, 52px);
}

/* =========================================
   CTAボタン（SP画面）
   ========================================= */
@media (max-width:768px) {
    .cta-btn__box {
        max-width: 800px;
        height: 80px;
        border-radius: 40px;
        /* padding: 4px; */
    }

    .cta-btn__inner-line {
        height: 72px;
        border-radius: 36px;
    }
}

/* ==========================================================================
   特典セクション
   ========================================================================== */
.tokuten__container {
    padding-top: var(--spacer-m);
    padding-bottom: var(--spacer-l);
    /* background: var(--primary-light-gradation-color); */
    /* padding-left: clamp(20px, 3.77vw + 7.02px, 36px);
    padding-right: clamp(20px, 3.77vw + 7.02px, 36px); */
}

.tokuten__image-all {
  max-width: 900px;
  margin: 0 auto;
}

.tokuten__title-image {
  max-width: 800px;
  margin: 0 auto clamp(10px, 4.717vw + -6.226px, 30px);
}

.tokuten__box-image {
  width: 70%;
  margin: 0 auto 30px;
}

.title {
    color: var(--primary-color);
    font-size: var(--font-size-l);
    font-family: var(--title-font-family);
    font-weight: 600;
    text-align: center;
}

.sub-title {
    color: var(--secondary-color);
    font-size: var(--font-size-m);
    font-family: var(--title-font-family);
    font-weight: 600;
    text-align: center;
    padding-bottom: var(--spacer-m);
}

.tokuten-set-container {
    padding-bottom: var(--spacer-m);
    padding-left: clamp(20px, 3.77vw + 7.02px, 36px);
    padding-right: clamp(20px, 3.77vw + 7.02px, 36px);
}

/* .tokuten-set-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: fit-content;
    margin: 0 auto;
    gap: 2%;
} */

.tokuten-set-row {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    /* position: relative; */
    gap: 10px;
}

.tokuten-set-row.upper {
    margin-bottom: clamp(10px, 4.717vw + -6.226px, 30px);
}

.fv-tokuten-annotation {
  margin-top: clamp(8px, 0.943vw + 4.755px, 12px);
  font-size: clamp(8px, 0.943vw + 4.755px, 12px);;
  text-align: end;
}

.tokuten__image {
    max-width: 309px; /* 全ての画像を均一のサイズにするための微調整 */
    /* width: calc((100% - 40px) / 3); */
    /* flex: 0 0 auto; */
    /* width: 300px; */
    /* max-width: 25vw; */
    /* max-width: 30vw; */
    /* max-width: 26vw; */
    /* position: absolute; */
}

@media (max-width: 1000px) {
    .tokuten__image {
        max-width: 30vw; /* 全ての画像を均一のサイズにするための微調整 */
    }
}

.tokuten__list-container {
    background: var(--primary-light-gradation-color);
    padding: 36px;
}

.tokuten__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-s);
    background: var(--white-color);
    box-shadow: 0 0 5px 0 var(--shadow-color);
    border-radius: 4px;
    padding: 36px;
}

.tokuten__item {
    /* padding: 0 40px; */
    border-radius: 10px;
}

.tokuten__title-container {
    display: flex;
    align-items: center;
    padding-bottom: var(--spacer-s);
}

.tokuten__number {
    background: var(--primary-gradation-color);
    width: fit-content;
    padding: 8px;
    border-radius: 4px;
    color: var(--white-color);
    font-family: var(--title-font-family);
    font-weight: 600;
    /* font-size: var(--font-size-s); */
    margin-right: 20px;
}

.tokuten__image {
    width: 70%;
    margin-left:auto;
    margin-right:auto;
}

.tokuten__spacer-line {
    background: var(--gray-color);
    height: 1px;
    margin-bottom: var(--spacer-s);
}

/* =========================================
   特典セクション（SP画面）
   ========================================= */
@media (max-width:800px) { /* 文字数が多いため、早めにレイアウト変更 */
    .tokuten__title-container {
      display: block;
    }

    .tokuten__number {
        margin-bottom: var(--spacer-ss);
    }
}
@media (max-width:768px) {
    .tokuten__list-container {
        padding: 20px;
    }

    .tokuten__list {
      padding: 20px;
    }
}

/* ==========================================================================
   問題提起セクション
   ========================================================================== */
@media (min-width: 800px) {
  .problem-title-break {
    display: none;
  }
}

.word-example__container {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    background: var(--secondary-gradation-color);
    border-radius: 12px;
    margin-bottom: var(--spacer-l);
    box-shadow: 0 0 5px 0 var(--shadow-color);
}

.word-example__item {
    background: var(--white-color);
    border-radius: 4px;
    text-align: center;
    padding: 4px;
}

.word-text p {
    font-size: var(--font-size-s-dynamic);
    font-weight: 600;
}

.line-break {
      display: none;
    }

@media (max-width:1000px) { /* 文字数が多いため、早めにレイアウト変更 */
    .line-break {
      display: block;
    }
}
@media (max-width:600px) {
    .word-example__container {
      padding: 12px;
        gap: 12px;
    }
}
/* ==========================================================================
   解決策セクション
   ========================================================================== */
.phrase-example__container {
    /* width: fit-content; */
    max-width: 480px;
    background: var(--primary-light-gradation-color);
    border-radius: 10px;
    /* padding: 40px; */
    padding: clamp(20px, 3.77vw + 7.02px, 36px);
    /* margin: 0 auto; */
    margin-bottom: var(--spacer-l);
    box-shadow: 0 0 5px 0 var(--shadow-color);
}

@media (min-width: 940px) {
  .title-break {
    display: none;
  }
}

.center-image {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.center-image-annotation {
  font-size: var(--font-size-ss);
  text-align: center;
}

@media (max-width:768px) {
  .phrase-example__container {
    margin: 0 auto var(--spacer-l);
  }
}

@media (max-width:600px) {
    .phrase-example__container {
      max-width: 400px;
    }
}

@media (max-width:500px) {
    .phrase-example__container {
      max-width: 340px;
    }

    .center-image {
      width: 95%;
    }
}

.phrase__text-box p {
    font-size: var(--font-size-m);
    /* font-weight: 600; */
}

.phrase-accent {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 4px;
}

.title-annotation {
    font-size: var(--font-size-sss);
    /* color: #757474; */
    max-width: 460px;
    width: 80%;
    /* text-align: center; */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 800px) {
  .solution-title-break {
    display: none;
  }
}


.negative-voice__container {
    max-width: 800px;
    margin: 0 auto;
    border: solid 4px var(--secondary-color);
    display: flex;
    flex-direction: row-reverse;
    gap: 4%;
    margin-bottom: var(--spacer-l);
    border-radius: 12px;
    padding: clamp(20px, 3.77vw + 7.02px, 36px);
}

.negative-voice__list {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: 600;
}

.negative-voice__item {
  width: fit-content;
    display: flex;
    gap: 2%;
    white-space: nowrap; /* これを追加！ */
}

.negative-image {
  /* width: 36%; */
  width: 25vw;
  margin: 0 auto;
  overflow: hidden;
}

/* @media screen and (max-width:768px) { */
@media screen and (max-width:900px) {
    .negative-voice__container {
        display: block;
        /* width: 70%; */
        max-width: 600px;
        margin: 0 auto var(--spacer-l);
    }

    .negative-voice__list {
        width: 100%;
        width: fit-content;
        margin: 0 auto;
    }

    .negative-image {
        width: 60%;
        margin: 0 auto;
        margin-bottom: var(--spacer-m);
    }
}
@media screen and (max-width:500px) {
  .negative-voice__item {
        white-space: normal; 
  }
}

/* ==========================================================================
   オファーセクション
   ========================================================================== */
.offer-contents__container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--primary-light-gradation-color);
    /* padding: 40px; */
    padding: clamp(20px, 3.77vw + 7.02px, 36px);
    border-radius: 12px;
    margin-bottom: var(--spacer-l);
    box-shadow: 0 0 5px 0 var(--shadow-color);
    font-weight: 600;
}

.offer__item {
    display: flex;
    align-items: start;
    gap: 2%;
}

.check-mark-circle {
    /* width: 20px;
    height: 20px; */
    width: var(--font-size-s);
    height: var(--font-size-s);
    border-radius: 10px;
    /* margin: 5px 0; */
    margin: clamp(4px, 0.24vw + 3.19px, 5px) 0;
    background: var(--green-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-mark {
    /* color: var(--green-color); */
    /* font-size: 12px; */
    font-size: var(--font-size-sss);
    color: var(--white-color);
}

/* ==========================================================================
   セミナー日程セクション
   ========================================================================== */
.schedule__area {
  position: relative;
  overflow: hidden;
  /*-    min-height: 1300px;-*/
  margin-bottom: var(--spacer-l);
}
.schedule__area .schedule__inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  /* padding: 0 80px; */
  box-sizing: border-box;
}
.sch-title {
  text-align: center;
  /* background: #F4CE2D; */
  background: var(--primary-gradation-color);
  /* color: #102341; */
  color: var(--white-color);
  border-radius: 10px;
  padding: 15px;
  /* font-size: 2.5rem; */
  font-size: var(--font-size-l);
  font-family: var(--title-font-family);
  font-weight: bold;
}
/* @media screen and (max-width:480px) {
  .sch-title {
    font-size: 2.0rem;
  }
} */
.sch-title-tri {
  /* width: 0;
  height: 0; */
  /* border-style: solid; */
  /* border-width: 15px 30px 0 30px; */
  width: 60px;  /* 30px + 30px 分の横幅 */
  height: 15px; /* border-width の 15px 分 */
  /* background: var(--primary-color); */
  background: var(--primary-gradation-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  /* border-color: #F4CE2D transparent transparent transparent; */
  margin: 0 auto 20px;
  ;
}
.schedule__area .line {
  font-size: 44px;
  font-family: "notosans_bold";
  text-align: center;
  margin-bottom: 15px;
  padding-top: 200px;
}
.schedule__area .txt, .schedule__area .note {
  font-size: 16px;
  text-align: center;
}
.schedule__area .note {
  margin-bottom: 40px;
}
/* スケジュール表 */
.schedule_bg {
  background: url("../img/sche_bg.png") center center no-repeat;
  background-size: cover;
}
/* .schedule__area {
  padding: 60px 0 0;
} */
.scheduleBox {
  width: 96%;/* 両橋の影を見せるため */
  /* width: 100%; */
  margin: auto;
  /*- margin-bottom: 4px;-*/
  /*background-color: #f5f5f5;-*/
  padding: 20px 0;
  /* padding: 20px 20px; */
  /* box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); */
  box-shadow: 0 0 5px 0 var(--shadow-color);
  margin-bottom: 20px;
  background-color: #fff;
  display: -ms-flexbox; /* IE10 */
  display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
  display: -webkit-flex; /* Safari6.1以降 */
  display: flex;
  align-items: center;
}
.scheduleBox2 {
  width: 100%;
  display: -ms-flexbox; /* IE10 */
  display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
  display: -webkit-flex; /* Safari6.1以降 */
  display: flex;
  /*- margin-bottom: 4px;-*/
  background-color: #fff;
  padding: 20px 0;
  /* box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); */
  box-shadow: 0 0 5px 0 var(--shadow-color);
  margin-bottom: 20px;
}
.scheduleBox a {
  padding: 10px;
  text-align: center;
  width: 100%;
  /* max-width: 200px; */
  max-width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  /* background-color: #11c40b; */
  background-color: var(--accent-color);
  border-radius: 10px;
  /* box-shadow: 0px 5px 0px 0px #0c540a; */
  box-shadow: 0 0 5px 0 var(--shadow-color);
  color: #fff;
  /* font-size: 22px; */
  font-size: var(--font-size-m);
  font-weight: bold;
  height: 50px;
  transition: 0.2s all ease;
}
.scheduleBox a:hover {
  text-decoration: none;
  box-shadow: none;
  transform: translateY(5px);
}
.scheduleBox a.out {
  background-color: #eee;
  color: #999;
  box-shadow: none !important;
}
.scheduleBox a.out:hover {
  transform: none;
}
.scheduleBox > div, .scheduleBox2 > div {
  text-align: left;
  box-sizing: border-box;
  width: 70%;
  border-right: solid 1px #aaa;
}
@media screen and (max-width:768px) {
  .scheduleBox > div, .scheduleBox2 > div {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    border-right: none;
    padding: 10px 0
  }
  .scheduleBox a {
    width: 90%;
    max-width: 500px;
    margin: 10px auto 15px;
    /* font-size: 22px; */
    height: 50px;
  }
}
.scheduleBox .scheduleDate, .scheduleBox2 .scheduleDate {
  /* -ms-flex: 0 0 100%;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%; */
  max-width: 100%;
  /*-    background-color: #2c96b0;-*/
  font-size: 20px;
  /*- color: #fff;-*/
  text-align: center;
  /*-display: flex;-*/
  align-items: center;
  justify-content: center;
  line-height: 1.5;
}
/*-
.scheduleBox .scheduleTitle {
    -ms-flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.scheduleBox .scheduleTitle > strong {
    display: block;
    font-size: 20px;
    font-family: "notosans_bold";
}
-*/
.scheduleBox .scheduleApply {}
/* 残席 */
.scheduleBox .remaining, .scheduleBox2 .remaining {
  /* -ms-flex: 0 0 100%; */
  /* -webkit-flex: 0 0 100%; */
  /* flex: 0 0 100%; */
  /* max-width: 100%; */
  max-width: 900px;
  display: flex;
  /* font-size: 20px; */
  font-size: var(--font-size-m);
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 10px;
  background: #eee;
}
.scheduleBox .remaining > span, .scheduleBox2 .remaining > span {
  /* color: #cc1313; */
  color: var(--accent-color);
}
.scheduleBox .remaining strong, .scheduleBox2 .remaining strong {
  /* font-size: 20px; */
  font-size: var(--font-size-m);
  font-weight: bold;
}
.scheduleBox .pay, .scheduleBox2 .pay {
  /* -ms-flex: 0 0 100%;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%; */
  max-width: 100%;
  display: flex;
  gap: 5%;
  /* font-size: 20px; */
  font-size: var(--font-size-m);
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
@media screen and (max-width:767px) {
  .scheduleBox .remaining, .scheduleBox2 .remaining {
    position: relative;
    /* font-size: 24px; */
    /* margin: 0 auto; */
    margin: 0 auto 20px;
    text-align: center;
    -ms-flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    /* max-width: 50%; */
    max-width: 80%;
    display: flex;
  }
  .scheduleBox .pay, .scheduleBox2 .pay {
    /* -ms-flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%; */
    max-width: 50%;
    display: flex;
    flex-direction: column;
    /* font-size: 20px; */
    font-size: var(--font-size-m);
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
}
/* 満員 */
.scheduleBox .full, .scheduleBox2 .full {
  text-align: center;
  /* color: #cc1313; */
  color: var(--accent-color);
}
@media screen and (max-width:1024px) {
  .scheduleBox ul.scheduleBtn li a.btn_schedule {
    font-size: 20px;
    height: 45px;
    line-height: 45px;
  }
}
.scheduleBox ul.scheduleBtn li a.btn_schedule.apply {
  /* background-color: #ce0048; */
  background: var(--accent-color);
  margin-bottom: 10px;
  color: #fff;
}
.scheduleBox ul.scheduleBtn li a.btn_schedule.more {
  background-color: #67b6cd;
}
.scheduleBox ul.scheduleBtn li a.btn_schedule::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 52%;
  left: 8px;
  margin-top: -5px;
}
@media screen and (max-width:1024px) {
  .scheduleBox ul.scheduleBtn li a.btn_schedule::before {
    width: 10px;
    height: 10px;
    left: 15px;
  }
}
.scheduleBox ul.scheduleBtn li a.btn_schedule.apply:hover {
  color: #333;
  border: 1px solid #ce0048;
  background-color: #fff;
  box-sizing: border-box;
}
.scheduleBox ul.scheduleBtn li a.btn_schedule.apply:hover::before {
  content: "";
  border-top: 2px solid #ce0048;
  border-right: 2px solid #ce0048;
}
.scheduleBox ul.scheduleBtn li a.btn_schedule.more:hover {
  color: #333;
  border: 1px solid #67b6cd;
  background-color: #fff;
  box-sizing: border-box;
}
.scheduleBox ul.scheduleBtn li a.btn_schedule.more:hover::before {
  content: "";
  border-top: 2px solid #67b6cd;
  border-right: 2px solid #67b6cd;
}
.sch-br {
  display: none;
}
@media screen and (max-width: 1024px) {
  .scheduleBox .detBox, .scheduleBox .scheBtn, .scheduleBox2 .detBox, .scheduleBox2 .scheBtn {
    display: block;
  }
  .schedule__area {
    background: url("../images/20180901/schedule_bg.jpg") no-repeat #fff;
    background-size: cover;
    background-position: right;
  }
  .schedule__area::before {
    display: none;
  }
  .schedule__area .line {
    padding-top: 120px;
  }
  .scheduleBox, .scheduleBox2 {
    -ms-flex-wrap: wrap; /*IE10*/
    -webkit-flex-wrap: wrap; /* Safari6.1以降 */
    flex-wrap: wrap;
    padding: 20px;
  }
}
@media screen and (max-width:767px) {
  .scheduleBox .scheduleDate, .scheduleBox2 .scheduleDate {
    -ms-flex: 0 0 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    /* font-size: 20px !important; */
    font-size: var(--font-size-m);
    border-right: none;
    border-bottom: solid 1px #aaa;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .scheduleinner {
    display: block;
  }
}
@media screen and (max-width:414px) {
  .scheduleBox .scheduleDate, .scheduleBox2 .scheduleDate {
    /* font-size: 20px !important; */
    font-size: var(--font-size-m);
    border-right: none;
    border-bottom: solid 1px #aaa;
    margin-bottom: 10px;
    padding-bottom: 10px;
    line-height: 1.5;
  }
  .sch-br {
    display: block;
  }
}
.scheduleBox .scheduleTitle > strong, .scheduleBox2 .scheduleTitle > strong {
  font-size: 18px;
}
.scheduleBox .scheduleApply, .scheduleBox2 .scheduleApply {
  -ms-flex: 0 0 50%;
  -webkit-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
ul.scheduleBtn {
  margin-left: -10px;
  box-sizing: border-box;
}
ul.scheduleBtn li {
  float: left;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
}
.scheduleBox .full, .scheduleBox2 .full {
  float: none;
  width: 80%;
  padding-left: 0;
  margin: 0 auto;
  font-size: 18px;
}
@media screen and (max-width: 1024px) {
  /* .schedule__area .schedule__inner {
    padding: 0 40px;
  } */
  .scheduleBox .scheduleApply {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 15px;
    display: grid;
    grid-template-columns: 33% 66%;
    align-items: center;
  }
}
@media screen and (max-width:768px) {
  .scheduleBox .scheduleApply {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 15px;
    display: block;
    text-align: center;
  }
}
@media screen and (max-width:575.98px) {
  .scheduleBox .scheduleApply {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 15px;
    display: block;
  }
}
@media screen and (max-width: 768px) {
  /* .schedule__area .schedule__inner {
    padding: 0 20px;
  } */
}
@media screen and (max-width: 640px) {
  .schedule__area {
    margin-top: 0;
    padding: 40px 0 0;
  }
  .schedule__area::before {
    background-position: 80%;
  }
  .schedule__area .schedule__inner {
    /* padding: 0 15px; */
  }
  .schedule__area .line {
    font-size: 24px;
    padding-top: 70px;
  }
  .schedule__area .txt, .schedule__area .note {
    font-size: 14px;
  }
  .scheduleBox .scheduleTitle.firstview {
    padding: 10px 10px 0 10px;
  }
}
   
/* ==========================================================================
   講師紹介セクション
   ========================================================================== */
.teacher {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
}
.teacher-l {
  margin-right: 2%;
  border: solid 2px #b88135;
  padding: 20px 0px;
  border-radius: 10px;
  background: rgba(255, 250, 232, 0.3);
}
.teacher-l img, .teacher-r img, .teacher-c img {
  width: 180px;
  margin: 0 auto;
}
.teacher-c {
  border: solid 2px #b88135;
  padding: 20px 0px;
  border-radius: 10px;
  background: rgba(255, 250, 232, 0.3);
}
.teacher-r {
  border: solid 2px #279dda;
  padding: 20px 0px;
  border-radius: 10px;
  background: rgba(230, 243, 250, 0.3);
  margin-right: 2%;
}

@media screen and (max-width:400px) {
  .teacher-l img, .teacher-r img, .teacher-c img {
    width: 150px;
    margin: 0 auto;
  }
  .tokuten {
    padding: 0px 10px 20px;
  }
  .tokuten-num {
    font-size: 20px;
  }
  .tokuten-title {
    font-size: 1.6rem;
  }
  .tokuten-title span {
    font-size: 1.2rem;
  }
}
/*---------プロフィール表示非表示切り替え---------------------------*/
.hidden_box {
  padding: 0;
  flex: 0 0 50%;
  max-width: 47%;
  margin: 0 auto;
}
@media screen and (max-width:640px) {
  .hidden_box {
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}
/*ボタン装飾*/
.hidden_box label {
  padding: 10px 0;
  font-weight: bold;
  border: solid 2px black;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
  background: #fff;
  box-shadow: 0 2px 0 0 rgb(50 50 50);
  width: 200px;
  border-radius: 5px;
}
/*ボタンホバー時*/
#open::before {
  content: 'プロフィール詳細'
}
#open::before:cehckd {
  content: '閉じる';
}
/*チェックは見えなくする*/
.hidden_box input {
  display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}
.btn::before {
  content: "プロフィール詳細";
}
.btn.open::before {
  content: "閉じる";
}
/* =========================================
   modal.css部分
   ========================================= */
.content{
    margin: 0 auto;
    padding: 20px 20px 0;
	display: flex;
	justify-content: space-between;
}
.box{
    background: #eee;
    height: 200px;
    margin-bottom: 100px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 65%;
	  text-align: center;/* 「閉じる」ボタンを中央に寄せるため */
    max-height:85%;   /*高さを表示デバイスの85％に固定*/
    overflow-y: scroll;    /*はみ出ているy軸方向の要素はスクロール*/
}
.modal__content p{
line-height: 180%;
text-align: left;
margin: 20px 0;
font-size: 16px;
}

.content a:link{
	text-decoration: none;
	font-weight: normal;
	
}
.content a:visited{
	color: #1C2333;
}
.content li .js-modal-open > img{
	max-width: 90%;
  margin: 0 auto;/* ！！追加！！ */
}

.name{
	margin-top: 20px;
	border-bottom:solid 1px #ccc;
	padding-bottom:20px;
    text-align: center;
}
.js-modal-close{
	font-size: 14px;
	background-color: #333;
	padding: 5px 10px;
	border-radius: 5px;
    /* display: block; */
    /* display: inline-block;
    margin: 0 auto; */
    /* width: fit-content; */
}
.js-modal-close:link{
	text-decoration: none;
	font-weight: normal;
}
.js-modal-close:visited{
	color: #fff;
	
}
.teacher--box{
	/* border:solid 5px #f4ce2d; */
	box-shdow:1px 2px 10px rgb(255 227 102 / 40%);
	position: relative;
    /* padding: 0px 20px 20px; */
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: var(--spacer-l);
}

.teacher--box p {
    text-align: center;
}

@media screen and (max-width:767px){
	.content li .js-modal-open > img{
	max-width: 100%;
}
	.content{
    margin: 0 auto;
    padding: 20px 5px;
	display: flex;
	justify-content:space-between;
		flex-wrap: wrap;
}
	.content li{
		margin-bottom:20px;
		width: 48%;
	}
	.content li:nth-child(5){
		margin-bottom: 0;
	}
	.teacher--box{
	position: relative;
    padding: 0px 20px 20px;
	
}
}
@media screen and (max-width:500px){

	.content li{
		margin-bottom:30px;
	}
	.modal__content{
    background: #fff;
    left: 50%;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
	
}
	.content li .js-modal-open > p{
	margin-top: 10px;
		
}
	.teacher--box{
   padding: 0px 5px 0px;
		margin-bottom: 10px;
	
}
	.teacher--box p{
		font-size: 16px;
	}
}
/* ==========================================================================
　　フォームセクション
　　========================================================================== */
.caution-title {
  font-size: var(--font-size-m);
  text-align: center;
  padding-bottom: var(--spacer-s);
}

@media screen and (max-width: 320px) {}
.def-sec.form-sec .liquid-inner h3 {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 2px solid #222222;
  /* font-size: 28px; */
  font-size: var(--font-size-m-plus);
  font-weight: bold;
  margin-bottom: var(--spacer-s);
}
.def-sec.form-sec .liquid-inner h3:after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  /* background-color: #F4CE2D; */
  content: '';
}
.def-sec.form-sec {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #f1f2f6;
  margin-bottom: var(--spacer-l);
}
/* @media (max-width:768px){

.def-sec.form-sec {
  padding-top: 60px;
  padding-bottom: 60px;
 }
} */
/* .def-sec.form-sec .liquid-container { */
.liquid-container {
  min-width: inherit;
  /* padding: 0 20px; */
  /* padding: 0 36px; */
  padding: 0 clamp(20px, 3.77vw + 7.02px, 36px);
}
/* .def-sec.form-sec .liquid-inner { */
.liquid-inner {
  /* -webkit-box-sizing: border-box; */
  box-sizing: border-box;
  /* padding: 100px 60px; */
  padding: var(--spacer-m) clamp(20px, 3.77vw + 7.02px, 36px);
  background-color: #fff;
}
/* .def-sec.form-sec .liquid-inner .sec-ttl__sub { */
.sec-ttl__sub {
  /* font-size: 28px; */
  font-size: var(--font-size-l);
  text-align: center;
}
/* .def-sec.form-sec .liquid-inner .sec-ttl { */
.sec-ttl {
  /* font-size: 50px; */
  font-size: var(--font-size-l);
  font-family: var(--title-font-family);
  font-weight: bold;
  text-align: center;
}
.def-sec.form-sec .liquid-inner .sec-main_txt {
/* .sec-main_txt { */
  /* margin-top: 30px; */
  margin-top: var(--spacer-m);
  /* color: #e30b31; */
  color: var(--accent-color);
  text-align: center;
}
.def-sec.form-sec .liquid-inner .form-current {
/* .form-current { */
  display: flex;
  width: calc(100% - 23px);
  margin-top: 36px;
}
.def-sec.form-sec .liquid-inner .form-current li {
/* .form-current li { */
  position: relative;
  width: calc(100% / 3);
  padding: 15px;
  border: none;
  background-color: #333333;
  color: #adadad;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.def-sec.form-sec .liquid-inner .form-current li.active {
  background-color: #d7a200;
  color: #fff;
}
.def-sec.form-sec .liquid-inner .form-current li.active:after {
  background-image: url(/multi/img/icon_currentArrow_active.png);
}
.def-sec.form-sec .liquid-inner .form-current li:after {
  z-index: 1;
  position: absolute;
  top: 0;
  right: -23px;
  width: 23px;
  height: 100%;
  background-image: url(/multi/img/icon_currentArrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
}
.def-sec.form-sec .liquid-inner .form-desc__01 {
  margin-top: 30px;
  font-size: 18px;
  line-height: 1.6;
  /* padding-top: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-desc__01 .bold {
  font-weight: bold;
}
.def-sec.form-sec .liquid-inner .form-wrapper {
  margin-top: 49px;
  /* padding-top: var(--spacer-s); */
}

/* .form-input-title {
  font-size: var(--font-size-m);
} */

.def-sec.form-sec .liquid-inner .form-list[aria-selected="false"] {
  display: none;
}

.js-BtnCheck {
  margin-bottom: var(--spacer-s);
}

.def-sec.form-sec .liquid-inner .form-list dt {
  font-size: 16px;
  padding-top: var(--spacer-s);
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dt .term-main {
  /* display: -webkit-box;
  display: -ms-flexbox; */
  display: flex;
  /* -webkit-box-align: baseline;
  -ms-flex-align: baseline; */
  align-items: baseline;
  font-weight: bold;
  /* padding-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dt .term-main .required {
  margin-left: 16px;
  padding: 3px 10px;
  border-radius: 3px;
  /* background-color: #e30b31; */
  background: var(--accent-color);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  /* padding-top: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dt .term-main .any {
  margin-left: 16px;
  padding: 3px 10px;
  border-radius: 3px;
  background-color: #60a9e7;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  /* padding-top: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dt .term-main .main-txt {
  font-size: 18px;
  font-weight: bold;
}
.def-sec.form-sec .liquid-inner .form-list dt .term-main .main-txt .sub-txt {
  display: block;
  margin-top: 5px;
  color: #777;
  font-size: 12px;
  font-weight: normal;
}
.def-sec.form-sec .liquid-inner .form-list dd:not(:last-child) {
  border-bottom: 1px solid #d2d2d2;
}
.def-sec.form-sec .liquid-inner .form-list dd .valid-txt {
  display: none;
  margin-bottom: 10px;
  color: #e30b31;
  font-size: 16px;
}
.def-sec.form-sec .liquid-inner .form-list dd input {
  padding: 12px 16px;
  border: 2px solid #b0b7c1;
  border-radius: 5px;
  background-color: #f8f8fa;
  font-size: 16px;
  -webkit-transition: .1s linear;
  transition: .1s linear;
}
.def-sec.form-sec .liquid-inner .form-list dd input[data-valid="error"] {
  border-color: #e30b31;
  background-color: #feebeb;
  color: #e30b31;
}
.def-sec.form-sec .liquid-inner .form-list dd input[data-valid="error"]:hover {
  border-color: #a9001e;
  background-color: #fef5f5;
  color: #333;
}
.def-sec.form-sec .liquid-inner .form-list dd input[data-valid="error"]:focus {
  border-color: #a9001e;
  color: #333;
}
.def-sec.form-sec .liquid-inner .form-list dd input:hover {
  border-color: #6a7380;
}
.def-sec.form-sec .liquid-inner .form-list dd input:focus {
  border-color: #6a7380;
}
.def-sec.form-sec .liquid-inner .form-list dd input.readOnly {
  width: 100%;
  border: none;
  background-color: #fff;
  font-size: 16px;
}
.def-sec.form-sec .liquid-inner .form-list dd input[name="mail"] {
  width: 100%;
}
.def-sec.form-sec .liquid-inner .form-list dd .readOnlyDammy {
  padding: 15px 0;
  font-size: 16px;
}
.def-sec.form-sec .liquid-inner .form-list dd select {
  position: relative;
  padding: 20px 40px 20px 15px;
  border: 2px solid #b0b7c1;
  border-radius: 5px;
  background-color: #f8f8fa;
  color: #222222;
  -webkit-transition: .1s linear;
  transition: .1s linear;
  width: 100%;
}
@media (max-width:500px) {
  .def-sec.form-sec .liquid-inner .form-list dd select {
    padding: 16px 40px 16px 15px;
  }
}
.def-sec.form-sec .liquid-inner .form-list dd select:hover {
  border-color: #6a7380;
}
.def-sec.form-sec .liquid-inner .form-list dd select:focus {
  border-color: #6a7380;
}
.def-sec.form-sec .liquid-inner .form-list dd select[value=""] {
  color: #777777;
}
.def-sec.form-sec .liquid-inner .form-list dd select[data-valid="error"] {
  border-color: #e30b31;
  background-color: #feebeb;
  color: #e30b31;
}
.def-sec.form-sec .liquid-inner .form-list dd select[data-valid="error"]:hover {
  border-color: #a9001e;
  color: #333;
}
.def-sec.form-sec .liquid-inner .form-list dd select[data-valid="error"]:focus {
  border-color: #a9001e;
  color: #333;
}
.def-sec.form-sec .liquid-inner .form-list dd select[name="address"] {
  width: 250px;
}
.def-sec.form-sec .liquid-inner .form-list dd select[name="birth_year"] {
  width: 120px;
}
.def-sec.form-sec .liquid-inner .form-list dd select[name="birth_month"] {
  width: 95px;
}
.def-sec.form-sec .liquid-inner .form-list dd select[name="birth_day"] {
  width: 95px;
}
.def-sec.form-sec .liquid-inner .form-list dd .select-wrapper {
  display: inline-block;
  position: relative;
}
.def-sec.form-sec .liquid-inner .form-list dd .select-wrapper:after {
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto 0;
  border-width: 7.8px 4.5px 0 4.5px;
  border-style: solid;
  border-color: #b0b7c1 transparent transparent transparent;
  content: '';
}
.def-sec.form-sec .liquid-inner .form-list dd .name-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.def-sec.form-sec .liquid-inner .form-list dd .name-column li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.def-sec.form-sec .liquid-inner .form-list dd .name-column li:not(:last-child) {
  margin-right: 20px;
}
.def-sec.form-sec .liquid-inner .form-list dd .name-column li .category {
  width: 40px;
  margin-top: 14px;
  margin-right: 7px;
}
.def-sec.form-sec .liquid-inner .form-list dd .birthday-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.def-sec.form-sec .liquid-inner .form-list dd .birthday-column li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.def-sec.form-sec .liquid-inner .form-list dd .birthday-column li:not(:last-child) {
  margin-right: 20px;
}
.def-sec.form-sec .liquid-inner .form-list dd .birthday-column li .category {
  width: 40px;
  margin-top: 14px;
  margin-right: 7px;
}
.def-sec.form-sec .liquid-inner .form-list dd .birthday-column li .option-txt {
  margin-top: 14px;
  margin-left: 8px;
}
.def-sec.form-sec .liquid-inner .form-list dd .checkbox-wrap input:checked + label:before {
  border-color: #00a77b;
  background-color: #00a77b;
  background-image: url(/multi/img/icon_checked.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 11px;
}
.def-sec.form-sec .liquid-inner .form-list dd .checkbox-wrap input:checked + label {
  font-weight: bold;
}
.def-sec.form-sec .liquid-inner .form-list dd .checkbox-wrap label {
  display: block;
  position: relative;
  padding-left: 33px;
  font-size: 16px;
}
.def-sec.form-sec .liquid-inner .form-list dd .checkbox-wrap label:not(:last-child) {
  margin-bottom: 20px;
}
.def-sec.form-sec .liquid-inner .form-list dd .checkbox-wrap label:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: auto 0;
  border: 2px solid #b0b7c1;
  border-radius: 3px;
  background-color: #f8f8fa;
  content: '';
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dd .checkbox-wrap label:hover:before {
  border-color: #6a7380;
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dd .radio-wrap input:checked + label:before {
  border-color: #00a77b;
  background-image: url(/multi/img/icon_radio.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}
.def-sec.form-sec .liquid-inner .form-list dd .radio-wrap input:checked + label {
  font-weight: bold;
}
.def-sec.form-sec .liquid-inner .form-list dd .radio-wrap label {
  display: block;
  position: relative;
  padding-left: 33px;
}
.def-sec.form-sec .liquid-inner .form-list dd .radio-wrap label:not(:last-child) {
  margin-bottom: 20px;
}
.def-sec.form-sec .liquid-inner .form-list dd .radio-wrap label:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: auto 0;
  border: 2px solid #b0b7c1;
  border-radius: 50%;
  background-color: #f8f8fa;
  content: '';
  -webkit-transition: .1s linear;
  transition: .1s linear;
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dd .radio-wrap label:hover:before {
  border-color: #6a7380;
  /* margin-bottom: var(--spacer-s); */
}

.input-wrap {
    /* width: 100%; */
    /* margin-bottom: var(--spacer-m); */
}

.def-sec.form-sec .liquid-inner .form-list dd .input-wrap input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1;
  width: 100%;
  padding-bottom: var(--spacer-s);
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-list dd .input-wrap p {
  margin-top: 5px;
  color: #888;
  font-size: 16px;
  text-decoration: none;
  pointer-events: none;
  padding-bottom: var(--spacer-s);
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-button {
  margin: 0 0 60px;
  text-align: center;
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .liquid-inner .form-button a.select-backButton {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  padding: 20px;
  border: 1px solid #333333;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  -webkit-transition: .1s linear;
  transition: .1s linear;
}
.def-sec.form-sec .liquid-inner .form-button a.select-backButton:hover {
  background-color: #eeeff2;
}
.def-sec.form-sec .form-notJoin {
  padding: 30px 0;
}
.def-sec.form-sec .form-notJoin[aria-selected="false"] {
  display: none;
}
.def-sec.form-sec .form-notJoin .main-txt {
  padding: 22px;
  border-radius: 5px;
  background-color: #f1f2f6;
  font-size: 18px;
  text-align: center;
}
.def-sec.form-sec .form-notJoin .main-txt span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #e30b31;
}
.def-sec.form-sec .form-notJoin .main-txt i {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-image: url(/multi/img/icon_warning.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.def-sec.form-sec .form-notJoin .desc-txt {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}
.def-sec.form-sec .form-notJoin .desc-txt span {
  font-weight: bold;
}
.def-sec.form-sec .form-desc__02 {
  margin-top: 60px;
  color: #e30b31;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.def-sec.form-sec .form-desc__03 {
  margin-top: 29px;
  color: #333333;
  font-size: 16px;
  text-align: center;
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec .form-desc__03 a {
  color: #333;
  font-weight: bold;
  text-decoration: underline;
  /* margin-bottom: var(--spacer-s); */
}
.def-sec.form-sec button.form-submit, button.form-submit-glay {
  display: block;
  -webkit-transition: .1s linear;
  transition: .1s linear;
  margin-top: var(--spacer-m);
  /* margin-bottom: var(--spacer-l); */
  margin-left: auto;
  margin-right: auto;
  /* width: 80%; */
  width: 90%;
  padding: 40px;
  font-family: var(--title-font-family);
  background: var(--accent-color);
  box-shadow: 0 0 5px 0 var(--shadow-color);
}
.def-sec.form-sec button.form-submit[aria-able="false"] {
  /* background-color: #dbdfe3; */
  background: var(--accent-color);
  max-width: 800px;
  height: 92px;
  border-radius: 46px;
  padding: 4px;
  /* margin: 0 auto; */
  /* text-align: center; */
  color: #fff;
  cursor: unset;
}

.form-submit__inner-line {
    border: solid 1px var(--white-color);
    width: 100%;
    height: 84px;
    border-radius: 44px;
    margin: 0 auto;
    /* font-size: 32px; */
    font-size: var(--font-size-m-plus);
    font-family: var(--title-font-family);
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: center; /* 【追加】（左右中央） */
}

.form-btn-annotation {
  max-width: 540px;
  width: 84%;
  margin: 0 auto;
  color: #333333;
  font-size: var(--font-size-sss);
  padding: var(--spacer-s);
  border: solid 1px var(--black-color);
  margin-top: var(--spacer-s);
}

@media (max-width: 500px) {
  .form-btn-annotation {
    padding: var(--spacer-ss);
  }
}

@media (max-width:768px) {
    .def-sec.form-sec button.form-submit[aria-able="false"] {
        max-width: 800px;
        height: 80px;
        border-radius: 40px;
        /* padding: 4px; */
    }

    .form-submit__inner-line {
        height: 72px;
        border-radius: 36px;
    }
}

/* .form-submit__inner-line p {
    text-align: center;
} */

.def-sec.form-sec button.form-submit[aria-able="true"] {
  background: #11c40b;
  -webkit-box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.2), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.2), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.15);
  color: #fff;
}
button.form-submit-glay {
  background-color: #777;
  -webkit-box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.2), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.2), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.15);
  color: #fff;
}
.def-sec.form-sec button.form-submit[aria-able="true"]:hover {
  background-color: #11c40b;
}
.def-sec.form-sec button.form-submit .small {
  display: block;
  font-size: 16px;
  /* margin-top: var(--spacer-l);
  margin-bottom: var(--spacer-l); */
}
.def-sec.form-sec button.form-submit .large, button.form-submit-glay .large {
  display: block;
  font-size: 28px;
  font-weight: bold;
  /* margin-top: var(--spacer-l);
  margin-bottom: var(--spacer-l); */
}
/* ==========================================================================
　　特典詳細セクション
　　========================================================================== */
.tokuten-detail__container {
    /* padding-top: var(--spacer-m); */
    padding-bottom: var(--spacer-l);
}

.title {
    color: var(--primary-color);
    font-size: var(--font-size-l);
    font-family: var(--title-font-family);
    font-weight: 600;
    text-align: center;
}

.sub-title {
    color: var(--secondary-color);
    font-size: var(--font-size-m);
    font-family: var(--title-font-family);
    font-weight: 600;
    text-align: center;
    padding-bottom: var(--spacer-m);
}

.tokuten-detail__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-m);
    /* padding-bottom: var(--spacer-l); */
    padding-bottom: var(--spacer-s);
}

.tokuten-detail__item {
    background: var(--primary-light-gradation-color);
    /* padding: 40px; */
    padding: clamp(20px, 3.77vw + 7.02px, 36px);
    border-radius: 10px;
    box-shadow: 0 0 5px 0 var(--shadow-color);
}

.tokuten-detail__title-container {
    display: flex;
    padding-bottom: var(--spacer-s);
}

@media (max-width:768px) {
    .tokuten-detail__title-container {
        display: block;
    }
}

.tokuten-detail__number {
    background: var(--primary-gradation-color);
    width: fit-content;
    height: fit-content;
    padding: 8px;
    border-radius: 4px;
    color: var(--white-color);
    font-family: var(--title-font-family);
    font-weight: 600;
    font-size: var(--font-size-s);
    /* margin-right: 20px; */
    margin-right: clamp(12px, 1.89vw + 5.5px, 20px);;
}

.tokuten-detail__title-text {
    /* font-size: var(--font-size-m); */
    font-size: var(--font-size-m);
    padding: 4px;
}

.tokuten-detail__title-text span {
    /* font-size: var(--font-size-m-plus); */
    font-size: var(--font-size-m-plus-dynamic);
    /* font-size: var(--font-size-l); */
}

.tokuten-detail__image {
    width: 70%;
    margin: 0 auto;
    padding-bottom: var(--spacer-m);
}

@media (max-width: 768px) {
  .tokuten-detail__image {
    width: 90%;
  }
}

.tokuten-detail-annotation {
  font-size: var(--font-size-sss);
  padding-bottom: var(--spacer-l);
}

.cta-micro-copy {
    text-align: center;
    font-size: var(--font-size-m);
    font-weight: 600;
    font-family: var(--title-font-family);
}

/* ==========================================================================
　　CTAボタン（マイクロコピー付き）
　　========================================================================== */
/* .cta-btn-microcopy__container {
    padding-bottom: var(--spacer-l);
} */

.cta-micro-copy {
    padding-bottom: var(--spacer-ss);
}

.cta-btn-microcopy__text {
    color: var(--white-color);
    font-size: var(--font-size-m-plus);
    margin: 0 auto;
}

/* .cta-btn-microcopy__container {
    padding: 0 50px;
}

@media (max-width:768px) {
    .cta-btn-microcopy__container {
        padding: 0 20px;
    }
} */

/* ==========================================================================
　　参加者の声セクション
　　========================================================================== */
.voice__container {
    padding-bottom: var(--spacer-l);
}

.voice__group-photo {
    padding-bottom: var(--spacer-m);
}

.voice__group-photo img {
  margin: 0 auto;
}

.seminar-satisfaction-container {
    width: fit-content;
    margin: 0 auto;
    font-weight: 600;
    padding-bottom: var(--spacer-m);
}

.seminar-satisfaction-title {
    text-align: center;
    color: var(--secondary-color);
    font-size: var(--font-size-m-plus);
    /* font-family: var(--title-font-family); */
}

.seminar-satisfaction-percent {
    text-align: center;
    font-size: var(--font-size-l);
}

.seminar-satisfaction-score {
    text-align: center;
    font-size: var(--font-size-m);
}

.seminar-satisfaction-star {
    width: fit-content;
    color: var(--star-color);
    position: relative;
    margin: 0 auto;
    font-size: var(--font-size-m);
    padding-bottom: var(--spacer-ss);
}

.star__color {
    position: absolute;
    color: var(--star-color);
    width: 94%;
    overflow: hidden;
}

.seminar-satisfaction-annotation {
    font-size: var(--font-size-sss);
    font-weight: 300;
}

.seminar-satisfaction-star-individual {
    width: fit-content;
    height: auto;
    color: var(--star-color);
    position: relative;
    padding-bottom: var(--spacer-ss);
}

.star__color-five {
    position: absolute;
    color: var(--star-color);
    width: 100%;
    overflow: hidden;
}

.star__color-four {
    position: absolute;
    color: var(--star-color);
    width: 80%;
    overflow: hidden;
}

.voice__list {
    display: flex;
    flex-direction: column;
    background: var(--gray-color);
    /* padding: 36px; */
    padding: clamp(20px, 3.77vw + 7.02px, 36px);
    /* border-radius: 4px; */
    box-shadow: 0 0 5px 0 var(--shadow-color);
    gap: 36px;
    margin-bottom: var(--spacer-s);
}

.voice__item {
    background: var(--white-color);
    border-radius: 4px;
    box-shadow: 0 0 5px 0 var(--shadow-color);
    /* padding: 40px; */
    padding: clamp(20px, 3.77vw + 7.02px, 36px);
}

.voice__list-title {
    font-size: var(--font-size-s);
    font-weight: 700;
    /* padding-bottom: var(--spacer-ss); */
}

.voice__list-name {
    font-size: var(--font-size-ss);
    padding-bottom: var(--spacer-s);
}

.voice-annotation {
  /* font-size: var(--font-size-sss); */
  font-size: clamp(8px, 4.755px + 0.943vw, 12px);
  margin-bottom: var(--spacer-l);
  padding: 0 clamp(20px, 3.77vw + 7.02px, 36px);
}

/* ==========================================================================
　　開発者プロフィールセクション
　　========================================================================== */
.developer-profile-container {
    padding-bottom: var(--spacer-l);
}

/* #profile {
  background-size: auto auto;
  background-color: rgba(250, 250, 250, 1);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255, 255, 255, 1) 3px, rgba(255, 255, 255, 1) 6px);
} */
.pro_box {
  background-color: #eaeaea;
  padding: 20px 12px;
  border-radius: 10px;
  margin: 28px auto 0;
  max-width: 760px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
}

.pro_box.spacer-l {
  margin: 28px auto var(--spacer-l);
}

.pro_text {
  margin-bottom: var(--spacer-ss);
}

.annotation_text {
  /* color: #777; */
  text-align: left;
  font-size: var(--font-size-sss);
  margin-bottom: 30px;
}

.pro_img {
  max-width: 500px;
  width: 85%;
  text-align: center;
  margin: 0 auto var(--spacer-s);
}

.pro_img2 {
  max-width: 500px;
  width: 85%;
  text-align: center;
  /* margin: 20px auto; */
  margin: 0 auto var(--spacer-m);
}

.pro_img2 img {
  width: 100%;
  /* height: 200px; */
  /* aspect-ratio: 400 / 200;
  object-fit: cover;   
  object-position: top; */
}

/* .pro_img3 {
  margin: 20px auto;
} */

.pro_img3 {
  max-width: 500px;
  width: 85%;
  text-align: center;
  margin: 0 auto var(--spacer-s);
}

.pro_img3 img {
  width: 100%;          /* 横幅は親要素いっぱい */
  /* height: 200px; */
  /* aspect-ratio: 400 / 150;
  object-fit: cover;  
  object-position: bottom;  */
}

.group-photo-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-s);
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: var(--spacer-m);
}

.profile_title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: clamp(1.25rem, 0.886rem + 1.82vw, 2.25rem);
}
.pro_name {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 110%;
}
.pro_name span {
  font-weight: normal;
  font-size: 90%;
}
@media (min-width:550px) {
  .profile_title {
    margin-bottom: 40px;
  }
  .pro_box {
    padding: 40px 32px;
    margin-top: 40px;
  }
  .pro_name {
    margin-bottom: 28px;
    font-size: 130%;
  }
  /* .pro_img2 {
    max-width: 400px;
  } */
}
/* ==========================================================================
　　有料講座についての説明セクション
　　========================================================================== */
  .service-title {
    font-size: var(--font-size-m);
    /* font-family: var(--title-font-family); */
    width: fit-content;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--spacer-ss);
    border-bottom: solid 2px var(--black-color);
    font-weight: 600;
  }

  @media (min-width: 540px) {
    .service-title-break {
      display: none;
    }

  }

  @media (max-width: 540px) {
    .service-title {
      width: 100%;
      border-bottom: solid 1px var(--black-color);
      padding-bottom: var(--spacer-s);
    }
  }

  .service-container {
    padding-bottom: var(--spacer-l);
  }

  .service-box {
    border: solid 1px var(--black-color);
    padding: var(--spacer-m);
  }

/* ==========================================================================
　　Q&Aセクション
　　========================================================================== */
.faq__container {
    margin-bottom: var(--spacer-l);
}
.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-m);
    margin-bottom: var(--spacer-m);
}

.faq__item {
    /* padding: 36px; */
    padding: clamp(20px, 3.77vw + 7.02px, 36px);
    border-radius: 4px;
    box-shadow: 0 0 5px 0 var(--shadow-color);
}

.question__container {
    display: flex;
    gap: 8px;
    padding-bottom: var(--spacer-s);
}

.question__icon {
    width: fit-content;
    height: fit-content;
    padding: 0 4px;
    background: var(--secondary-light-color);
    color: var(--white-color);
    font-weight: 600;
    border-radius: 4px;
}

.faq__spacer-line {
    height: 1px;
    background: var(--gray-color);
    margin-bottom: var(--spacer-s);
}

.answer__container {
    display: flex;
    gap: 8px;
    padding-bottom: var(--spacer-s);
}

.answer__icon {
    width: fit-content;
    height: fit-content;
    padding: 0 4px;
    background: var(--accent-color);
    color: var(--white-color);
    font-weight: 600;
    border-radius: 4px;
}

.faq__item a {
  text-decoration: underline;
  color: #007bff;
}

.answer-annotation {
  font-size: var(--font-size-ss);
  padding-top: var(--spacer-ss);
}

/* ==========================================================================
   スマニュー時の配信設定
   ========================================================================== */
.sec_pad {
  padding: 28px 0;
}
@media screen and (min-width:768px) {
  .sec_pad {
    padding: 60px 0;
  }
}

.title-sn {
  text-align: center;
  font-weight: bold;
  /* font-size: min(6.5vw, 40px); */
  font-size: min(6.5vw, 36px);
}

#service {
  background-color: #efefef;
}
.contents-title {
  border-left: solid 8px var(--orange);
  margin: 20px 0;
  padding-left: 16px;
  /* font-size: min(6vw, 32px); */
  font-size: min(6vw, 28px);
  /* font-weight: 700; */
}
.free-contents {
  padding: 12px;
  border: solid 1px #ccc;
  border-radius: 12px;
  background-color: white;
}
.free-contents + .caution {
  margin-bottom: 40px;
  display: block;
}
.price {
  margin-top: 20px;
  font-size: min(6vw, 46px);
	text-align: center;
	font-weight: 700;
	}
.price span {
  font-size: 70%;
}
.arrow{
	text-align: center;
	max-width: 40px;
	margin: 3rem auto;
}
.banner{
	margin: 0 auto 4rem;
	max-width: 680px;
	text-align: center;
}
.banner p{
	font-size: 85%;
}
.index-list {
  margin: 28px auto;
  background-color: white;
  border-radius: 12px;
  border: solid 1px #ccc;
  padding: 12px;
}
.index-list li {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: dotted 1px #ccc;
}
.index-list li:nth-child(1) {
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  font-size: 115%;
  border-bottom: none;
  padding-bottom: 0;
}
@media (min-width:768px) {
  .contents-title {
    margin: 36px 0;
    padding-left: 24px;
  }
  .free-contents {
    padding: 24px;
  }
  .free-contents + .caution {
    margin-bottom: 80px;
  }

  .index-list {
    margin: 40px auto;
    padding: 24px;
  }
  .index-list li {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .index-list li:nth-child(1) {
    margin-bottom: 40px;
  }
}
#office {
  background-color: #ccc;
}
.table-container {
  margin: 48px auto 0;
}
.table-container table {
  background-color: white;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
}
.table-container table th, .table-container table td {
  padding: 16px;
  border: solid 1px #9a9a9a;
  text-align: left;
}
.table-container table th {
  font-weight: normal;
  width: 30%
}
@media (max-width:767px) {
  .table-container table th, .table-container table td {
    display: block;
    width: 100%;
    padding: 8px;
  }
  .table-container table th {
    text-align: center;
    background-color: #efefef;
  }
}

/* ==========================================================================
　　フッターセクション
　　========================================================================== */
.footer-container {
    background: var(--black-color);
    /* background: var(--secondary-color); */
    color: var(--white-color);
    text-align: center;
    /* padding: 32px 0; */
    padding: var(--spacer-m) 0;
    /* font-size: 14px; */
    font-size: var(--font-size-sss);
}

footer ul {
  margin-bottom: 40px;
}
footer ul li {
  padding-bottom: 12px;
  margin-bottom: 12px;
  /* border-bottom: solid 1px #fff; */
}
footer ul li:nth-child(1) {
  /* border-top: solid 1px #fff; */
  padding-top: 12px;
}
footer ul li a {
  width: 100%;
  height: 100%;
  display: block;
}
.copyright {
  /* font-size: 12px; */
  font-size: var(--font-size-sss);
}
.company-name {
  margin-bottom: 12px;
}

.company-address {
  margin-bottom: 12px;
}

.company-number {
  margin-bottom: 40px;
}

@media (min-width:568px) {
  /* footer {
    padding: 60px 0;
  } */
  footer ul {
    display: flex;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto 40px;
  }
  footer ul li {
    /* border-bottom: none; */
    /* border-right: solid 1px #fff; */
    padding: 0 16px;
    margin-bottom: 0;
    transition: 0.2s all ease;
  }
  footer ul li:nth-child(1) {
    /* border-left: solid 1px #fff; */
    /* border-top: none; */
    padding-top: 0;
  }
  /* footer ul li:hover {
    color: var(--gold);
  } */
}

/* ==========================================================================
　　ポップアップセクション
　　========================================================================== */
/* ポップアップの基本スタイル */
        .exit-popup {
            position: fixed;
            top: -100%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 400px;
            /* max-width: 500px; */
            text-align: center;
            border-radius: 10px;
            display: none;
            z-index: 1005;
        }
        /* ポップアップのスライドイン */
	@keyframes slideIn {
	    from {
	        top: -100%;
	    }
	    to {
	        top: 30%;
          /* top: 10%; */
	    }
	} 

       /* 背景のオーバーレイ */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index:1001;
        }
        /* 閉じるボタン */
        .close-btn {
            margin-top: 10px;
            padding: 10px 15px;
            background-color: #555;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            max-width: 70px;
            font-size: 12px;
        }


/* 画像をまとめるコンテナ */
.popup-container {
    position: relative;
    display: inline-block;
}

/* 基本のポップアップ画像（最下層） */
.popup-container img:first-child {
    width: 100%;
    display: block;
    position:relative;
    z-index:1001;
}

/* pop_kurisu と pop_huki の基本スタイル */
.pop-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
}