@charset "UTF-8";

/* ==========================================================================
   ヘッダー（英語プレミアムページ限定：ハンバーガーボタン／閉じるボタンをグラデーションに）
   ========================================================================== */
.l-header--2024__btn--koukou {
  background: linear-gradient(90deg, #2E72FF 0%, #43B9DB 100%);
}

.l-header--2024__modal--koukou .modal-body > button.close {
  background: linear-gradient(90deg, #2E72FF 0%, #43B9DB 100%);
  border: none;
  color: #fff !important;
  text-shadow: 0 0 1px #fff, 0 0 1px #fff;
}

/* ==========================================================================
   共通（ボタン・フェードイン）
   ========================================================================== */
.index {
  font-feature-settings: "palt";
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-align: center;
  overflow-x: hidden;
}

.fadein-up {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fadein-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.c-btn {
  transition: opacity 0.3s;
}

.c-btn:hover {
  opacity: 0.7;
}

.c-btn--admission {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(310px, calc(620 / 750 * 100vw), 620px);
  height: clamp(59px, calc(118 / 750 * 100vw), 118px);
  margin: 0 auto;
  background: linear-gradient(90deg, #ef7b1b 0%, #ffa812 100%);
  box-shadow: none;
  border-radius: 999px;
  margin-top: clamp(16px, calc(32 / 750 * 100vw), 32px);
}

.js-show-when-req_info-off .c-btn--admission {
  background: linear-gradient(90deg, #68a900 0%, #89d300 100%) !important;
  box-shadow: none;
}

body .c-btn__text {
  color: #fff;
  font-size: clamp(16px, calc(30 / 750 * 100vw), 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
  display: block;
  width: 100%;
  text-align: center;
  margin-left: 0;
}

.c-btn__icon {
  position: absolute;
  right: clamp(20px, calc(40 / 750 * 100vw), 40px);
  top: 50%;
  transform: translateY(-50%);
}

.c-btn__icon img {
  display: block;
  width: clamp(16px, calc(26 / 750 * 100vw), 26px);
  height: auto;
}

.p-button {
  .c-btn {
    padding-right: 15px;
  }

  .c-btn__text {
    letter-spacing: 0.08em;
  }
}

.p-button__attention {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 5px;
}

.p-eiken-cta {
  padding: 0 16px;
  max-width: 750px;
  margin: 0 auto;
}

/* ==========================================================================
   KV
   ========================================================================== */
.p-eiken-kv {
  position: relative;
}

.p-eiken-kv__sp img {
  display: block;
  width: 100%;
  height: auto;
}

.p-eiken-kv__pc {
  position: relative;
  background: linear-gradient(160deg, #1b6fd6 0%, #3fa9e0 60%, #7fd0e8 100%);
  overflow: hidden;
}

.p-eiken-kv__pc-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
}

.p-eiken-kv__pc-text {
  flex: 1;
  min-width: 0;
}

.p-eiken-kv__title {
  color: #0b2b57;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 28px;
}

.p-eiken-kv__title-accent {
  color: #1a63c4;
}

.p-eiken-kv__stat {
  background: #fff;
  border-radius: 16px;
  padding: 20px 28px;
  max-width: 340px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.p-eiken-kv__stat-row {
  padding: 12px 0;
  font-size: 17px;
  font-weight: 700;
  color: #17335c;
}

.p-eiken-kv__stat-row + .p-eiken-kv__stat-row {
  border-top: 1px solid #e3e8ef;
}

.p-eiken-kv__stat-num {
  color: #ff5c72;
  font-size: 24px;
  margin-right: 4px;
}

.p-eiken-kv__pc-photo {
  flex-shrink: 0;
  width: 320px;
  height: 460px;
  border-radius: 12px;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .p-eiken-kv__pc-inner {
    padding: 40px 24px;
  }
  .p-eiken-kv__pc-photo {
    width: 240px;
    height: 340px;
  }
}

/* ==========================================================================
   リード＋CTA
   ========================================================================== */
.p-eiken-lead {
  background: #fff;
  padding: 28px 16px 8px;
  text-align: center;
}

.p-eiken-lead__text {
  max-width: 750px;
  margin: 0 auto 4px;
  font-size: clamp(14px, calc(28 / 750 * 100vw), 28px);
  color: #17335c;
  font-weight: 700;
  line-height: 1.8;
}

.p-eiken-lead__text-accent {
  color: #1a63c4;
}

.p-eiken-lead__text--pink {
  color: #ff5c72;
}


/* リード直下のCTAボタンの余白調整（ボタン自体の見た目は共通スタイルを使用） */
.p-eiken-lead .p-eiken-cta {
  position: relative;
  z-index: 1;
  max-width: 750px;
  padding-top: 8px;
  padding-bottom: 28px;
}

/* ==========================================================================
   共通：セクション見出しキッカー（青グラデーションのピルバッジ）
   ========================================================================== */
.p-eiken-kicker {
  display: inline-block;
  background: linear-gradient(90deg, #2e72ff 0%, #43b9db 100%);
  color: #fff;
  font-size: clamp(14px, calc(14 / 375 * 100vw), 28px);
  font-weight: 700;
  border-radius: 4px;
  padding: clamp(6px, calc(6 / 375 * 100vw), 12px) clamp(20px, calc(20 / 375 * 100vw), 40px);
  margin-bottom: clamp(16px, calc(16 / 375 * 100vw), 32px);
}

/* ==========================================================================
   導入（ご存知ですか？）
   ========================================================================== */
.p-eiken-intro {
  position: relative;
  overflow: hidden;
  max-width: 750px;
  margin: 0 auto;
  padding: clamp(25px, calc(75 / 750 * 100vw), 75px) 16px 24px;
  text-align: center;
}

/* 半円ヒル：intro自身のボックス内だけで完結させる（前セクションへの重ね合わせに依存しない）。
   幅はコンテナ幅に対する相対値(120%)のままにして、どの画面幅でも
   楕円の比率（＝端でのカーブの深さ）が一定になるようにする。 */
.p-eiken-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: clamp(50px, calc(150 / 750 * 100vw), 150px);
  background: #ecf6fc;
  border-radius: 50%;
  z-index: 0;
}

/* ヒルの下から続く平らな背景（同じボックス内）。
   幅120%の楕円は、両端（コンテナの左右端）でも高さゼロまでは沈み込まず、
   ellipseの計算上「高さの22.36%」分だけ残る。そこに合わせてtopを設定し、
   楕円と平らな背景の間に隙間（＝段差）ができないようにする。 */
.p-eiken-intro::after {
  content: "";
  position: absolute;
  top: clamp(25px, calc(75 / 750 * 100vw), 75px);
  left: 0;
  right: 0;
  bottom: 0;
  background: #ecf6fc;
  z-index: 0;
}

.p-eiken-intro > * {
  position: relative;
  z-index: 1;
}

.p-eiken-intro__heading {
  max-width: 750px;
  margin: 0 auto;
  font-size: clamp(24px, calc(24 / 375 * 100vw), 48px);
  font-weight: 700;
  color: #17335c;
  line-height: 1.6;
}

.p-eiken-intro__heading-sub {
  font-size: clamp(24px, calc(24 / 375 * 100vw), 48px);
}

.p-eiken-intro__heading-accent {
  font-size: clamp(36px, calc(36 / 375 * 100vw), 72px);
  color: #307afb;
}

/* ==========================================================================
   REASON
   ========================================================================== */
.p-eiken-reason {
  max-width: 750px;
  margin: 0 auto;
  background: #ecf6fc;
  padding: 0 16px clamp(40px, calc(40 / 375 * 100vw), 80px);
}

.p-eiken-reason__item {
  max-width: 750px;
  margin: 0 auto clamp(64px, calc(64 / 375 * 100vw), 128px);
  text-align: center;
}

.p-eiken-reason__item:last-child {
  margin-bottom: 0;
}

.p-eiken-reason__label {
  display: block;
  width: clamp(90px, calc(90 / 375 * 100vw), 180px);
  height: auto;
  margin: 0 auto clamp(12px, calc(12 / 375 * 100vw), 24px);
}

.p-eiken-reason__heading {
  font-size: clamp(20px, calc(20 / 375 * 100vw), 40px);
  font-weight: 700;
  color: #17335c;
  line-height: 1.6;
  margin-bottom: clamp(20px, calc(20 / 375 * 100vw), 40px);
}

.p-eiken-reason__heading span {
  color: #ff5c72;
}

.p-eiken-reason__box {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   POINT 導入
   ========================================================================== */
.p-eiken-point-intro {
  position: relative;
  overflow: hidden;
  max-width: 750px;
  margin: clamp(30px, calc(30 / 375 * 100vw), 60px) auto 0;
  padding: clamp(45px, calc(45 / 375 * 100vw), 90px) 16px;
  text-align: center;
}

.p-eiken-point-intro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(230px, calc(230 / 375 * 100vw), 460px);
  height: clamp(230px, calc(230 / 375 * 100vw), 460px);
  background: url(../img/p-eiken-point-intro-bg.png) no-repeat;
  background-size: contain;
  pointer-events: none;
}

.p-eiken-point-intro > * {
  position: relative;
  z-index: 1;
}

.p-eiken-point-intro__heading {
  font-size: clamp(26px, calc(26 / 375 * 100vw), 52px);
  font-weight: 700;
  color: #17335c;
  line-height: 1.6;
}

.p-eiken-point-intro__heading span {
  background: linear-gradient(90deg, #2E72FF 0%, #43B9DB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   POINT 共通
   ========================================================================== */
.p-eiken-point {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #e1f1ff 100%);
  border-bottom: 1px solid #e3e8ef;
  padding-bottom: clamp(40px, calc(40 / 375 * 100vw), 80px);
}

/* 2つ目以降のPOINTセクションにだけ上部の余白を追加 */
.p-eiken-point ~ .p-eiken-point {
  padding-top: clamp(40px, calc(40 / 375 * 100vw), 80px);
}

.p-eiken-point__label {
  display: block;
  width: clamp(90px, calc(90 / 375 * 100vw), 180px);
  height: auto;
  margin: 0 auto clamp(16px, calc(16 / 375 * 100vw), 32px);
}

.p-eiken-point__heading {
  font-size: clamp(24px, calc(24 / 375 * 100vw), 48px);
  font-weight: 700;
  color: #17335c;
  line-height: 1.6;
  margin-bottom: clamp(16px, calc(16 / 375 * 100vw), 32px);
}

.p-eiken-point__heading span {
  color: #ff5c72;
}

.p-eiken-point__text {
  padding: 0 clamp(45px, calc(45 / 375 * 100vw), 90px);
  font-size: clamp(12px, calc(12 / 375 * 100vw), 24px);
  color: #121B44;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: clamp(8px, calc(8 / 375 * 100vw), 16px);
  font-weight: 500;
}

.p-eiken-point__attention {
  display: block;
  font-size: clamp(11px, calc(11 / 375 * 100vw), 22px);
  color: #8a94a6;
  text-align: left;
  margin-bottom: clamp(20px, calc(20 / 375 * 100vw), 40px);
}

.p-eiken-point__photo,
.p-eiken-point__img {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(24px, calc(24 / 375 * 100vw), 48px) auto;
  border-radius: 8px;
}

.p-eiken-point__notes {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(10 / 375 * 100vw), 20px);
  text-align: justify;
  font-size: clamp(10px, calc(10 / 375 * 100vw), 20px);
  color: #777777;
  line-height: 1.7;
  margin-top: clamp(16px, calc(16 / 375 * 100vw), 32px);
  list-style: none;
  padding: 0;
}

/* スライダー（Swiper） */
.p-eiken-point__slider {
  position: relative;
  width: 100vw;
  margin: clamp(24px, calc(24 / 375 * 100vw), 48px) calc(50% - 50vw) 0;
  overflow: hidden;
}

@media (min-width: 750px) {
  .p-eiken-point__slider {
    width: calc(100% + 64px);
    margin-left: -32px;
    margin-right: -32px;
  }
}

.p-eiken-point__slider .swiper-slide {
  opacity: 0.45;
  transform: translateY(10%);
  transition: opacity 0.3s, transform 0.3s;
}

.p-eiken-point__slider .swiper-slide-active {
  opacity: 1;
  transform: translateY(0);
}

.p-eiken-point__slider img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.p-eiken-point__slider-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: clamp(32px, calc(32 / 375 * 100vw), 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
  z-index: 2;
}

.p-eiken-point__slider-prev,
.p-eiken-point__slider-next {
  pointer-events: auto;
  width: clamp(40px, calc(40 / 375 * 100vw), 80px);
  height: clamp(40px, calc(40 / 375 * 100vw), 80px);
  border-radius: 50%;
  border: none;
  background-color: #fff;
  background-image: url('/assets/koukou/merit/img/slider-arrow-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(14px, calc(14 / 375 * 100vw), 28px) clamp(16px, calc(16 / 375 * 100vw), 32px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  cursor: pointer;
}

.p-eiken-point__slider-prev {
  transform: scaleX(-1);
}

.p-eiken-point__stepup {
  margin-top: clamp(25px, calc(25 / 375 * 100vw), 50px);
  text-align: center;
}

.p-eiken-point__stepup-heading {
  font-size: clamp(24px, calc(24 / 375 * 100vw), 48px);
  font-weight: 700;
  color: #17335c;
  line-height: 1.6;
  margin-bottom: clamp(12px, calc(12 / 375 * 100vw), 24px);
}

.p-eiken-point__stepup-heading span {
  color: #ff5c72;
}

.p-eiken-point__stepup-img {
  display: block;
  width: clamp(270px, calc(270 / 375 * 100vw), 540px);
  height: auto;
  margin: 0 auto 0;
}

/* ==========================================================================
   準1級 新登場
   ========================================================================== */
.p-eiken-newlevel {
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

.p-eiken-newlevel__top {
  position: relative;
  padding: clamp(56px, calc(56 / 375 * 100vw), 112px) 16px clamp(110px, calc(110 / 375 * 100vw), 220px);
  text-align: center;
  color: #fff;
}

.p-eiken-newlevel__top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 750 / 340;
  background-image: url('/assets/koukou/merit/img/newlevel-wave-flow.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  pointer-events: none;
}

/* 半円形の青いカード背景。p-eiken-newlevel__img の高さ半分あたりから始まる想定の
   仮位置（top / height）。実際の見え方はブラウザで確認しながら微調整してください。 */
.p-eiken-newlevel__top::after {
  content: "";
  position: absolute;
  top: clamp(190px, calc(190 / 375 * 100vw), 380px);
  left: 50%;
  transform: translateX(-50%);
  width: 175%;
  bottom: 0;
  background: linear-gradient(to left, #2E72FF 0%, #43B9DB 100%);
  border-radius: 50% 50% 0 0;
  z-index: 0;
}

.p-eiken-newlevel__top > * {
  position: relative;
  z-index: 1;
}

.p-eiken-newlevel__heading {
  font-size: clamp(36px, calc(36 / 375 * 100vw), 72px);
  font-weight: 700;
  margin-bottom: clamp(24px, calc(24 / 375 * 100vw), 48px);
  background: linear-gradient(90deg, #2E72FF 0%, #43B9DB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.p-eiken-newlevel__img {
  display: block;
  width: clamp(240px, calc(280 / 375 * 100vw), 560px);
  height: auto;
  margin: 0 auto clamp(24px, calc(24 / 375 * 100vw), 48px);
  border-radius: 12px;
}

.p-eiken-newlevel__badge {
  display: block;
  width: clamp(120px, calc(120 / 375 * 100vw), 240px);
  height: auto;
  margin: 0 auto clamp(12px, calc(12 / 375 * 100vw), 24px);
}

.p-eiken-newlevel__title {
  font-size: clamp(32px, calc(32 / 375 * 100vw), 64px);
  font-weight: 700;
  margin-bottom: clamp(8px, calc(8 / 375 * 100vw), 16px);
}

.p-eiken-newlevel__lead {
  font-size: clamp(16px, calc(16 / 375 * 100vw), 32px);
}

.p-eiken-newlevel__bottom {
  position: relative;
  overflow: visible;
  background: #fff;
  padding: 0 16px clamp(56px, calc(56 / 375 * 100vw), 112px);
  text-align: center;
}

/* __top の上に被せるため、top をマイナス値にして自分の箱の外（上方向）へ
   はみ出させている。__top の実際の高さはコンテンツ量で変わるので、この
   数値は仮置き。ブラウザで見ながら top の値を調整してください。 */
.p-eiken-newlevel__bottom::after {
  content: "";
  position: absolute;
  top: clamp(-140px, calc(-70 / 375 * 100vw), -70px);
  left: 50%;
  transform: translateX(-50%);
  width: 175%;
  bottom: 0;
  background: linear-gradient(to left, #fff 0%, #fff 100%);
  border-radius: 50% 50% 0 0;
  z-index: 0;
}

.p-eiken-newlevel__bottom > * {
  position: relative;
  z-index: 1;
}

.p-eiken-newlevel__price {
  position: relative;
  color: #17335c;
  max-width: clamp(460px, calc(460 / 375 * 100vw), 920px);
  margin: 0 auto;
}

.p-eiken-newlevel__price-lead {
  font-size: clamp(16px, calc(16 / 375 * 100vw), 32px);
  font-weight: 500;
  margin-bottom: clamp(16px, calc(16 / 375 * 100vw), 32px);
}

.p-eiken-newlevel__price-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.p-eiken-newlevel__price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a63c4;
  color: #fff;
  font-size: clamp(22px, calc(22 / 375 * 100vw), 44px);
  font-weight: 700;
  border-radius: 999px;
  padding: 0px clamp(12px, calc(12 / 375 * 100vw), 24px) 2px;
  flex-shrink: 0;
}

.p-eiken-newlevel__price-num {
  color: #17335c;
  font-size: clamp(64px, calc(64 / 375 * 100vw), 128px);
  font-weight: 700;
}

.p-eiken-newlevel__price-unit {
  font-size: clamp(24px, calc(24 / 375 * 100vw), 48px);
}

.p-eiken-newlevel__price-tax {
  display: block;
  font-size: clamp(18px, calc(18 / 375 * 100vw), 36px);
  color: #121B44;
  text-align: right;
  margin-bottom: clamp(16px, calc(16 / 375 * 100vw), 32px);
  font-weight: 500;
}

.p-eiken-newlevel__price-note {
  font-size: clamp(10px, calc(10 / 375 * 100vw), 20px);
  color: #8a94a6;
  line-height: 1.7;
  text-align: left;
}

.p-eiken-newlevel .p-eiken-cta {
  position: relative;
  margin-top: clamp(32px, calc(32 / 375 * 100vw), 64px);
}

/* ==========================================================================
   クロージング
   ========================================================================== */
.p-eiken-closing {
  position: relative;
  overflow: hidden;
  max-width: 750px;
  margin: 0 auto;
  padding: clamp(56px, calc(56 / 375 * 100vw), 112px) 16px 0;
  text-align: center;
}

.p-eiken-closing__bg-wave,
.p-eiken-closing__bg-confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.p-eiken-closing__inner {
  position: relative;
  z-index: 1;
}

.p-eiken-closing__heading {
  font-size: clamp(19px, calc(21 / 375 * 100vw), 42px);
  font-weight: 700;
  color: #17335c;
  line-height: 1.6;
  margin-bottom: clamp(24px, calc(24 / 375 * 100vw), 48px);
}

.p-eiken-closing__heading span {
  color: #1a63c4;
}

.p-eiken-closing__photo {
  display: block;
  width: 100%;
  max-width: 750px;
  height: auto;
  margin: 0 auto;
}

/* ==========================================================================
   PC（750px以上）：各セクションの左右パディングを2倍に拡張
   ========================================================================== */
@media (min-width: 750px) {
  .p-eiken-cta,
  .p-eiken-lead,
  .p-eiken-intro,
  .p-eiken-reason,
  .p-eiken-point-intro,
  .p-eiken-point,
  .p-eiken-newlevel__top,
  .p-eiken-newlevel__bottom,
  .p-eiken-closing {
    padding-left: 32px;
    padding-right: 32px;
  }
}