@charset "UTF-8";
/* ==========================================================================
   ジョブドラフトFes ウィザードLP  ver.3（ultrathermスキン＋ペンキ青／方眼紙）
   - 青セクション: ペンキ（漆喰）風テクスチャ（SVGノイズで近似生成）
     ★お手元のペンキ素材を assets/img/bg-paint-blue.jpg に置き、
       .u-paint の background-image 1行目を url(../img/bg-paint-blue.jpg) に
       差し替えると実素材になります（background-size: cover に変更）
   - 白セクション: ultrathermのstrength項目と同じ「方眼紙」テクスチャ
   ========================================================================== */

:root {
  /* 支給MV（mv_pc.png）から採取したトンマナ:
     白〜ライトグレー基調＋ロイヤルブルー＋墨色見出し。斜めファセットとドット装飾 */
  --blue:       #1B5ED9;  /* プライマリ（MVの見出し青） */
  --blue-d:     #0A3EA8;  /* 濃青（グラデの締め） */
  --navy:       #1B2333;  /* 見出しの墨色（真っ黒より少し青い） */
  --paint:      #1350C4;  /* 青ベタブロックの基準色 */
  --blue-g1:    #0A3EA8;  /* 青ボタングラデ */
  --blue-g2:    #2A6BE8;
  --sky:        #7FB0F5;  /* STEP番号・淡い青アクセント */
  --sky-light:  #B9D3F8;
  --pale:       #F3F6FA;  /* セクション背景（ライトグレー） */
  --pale2:      #E7EDF6;
  /* CTAのオレンジ。グラデーション／影は使わずベタ塗り1色で統一 */
  --cv:         #F56600;
  --cv-edge:    #C64E00;  /* ホバー時の文字色・枠色 */
  --yellow:     #FFD84D;  /* 青ベタ上の強調（控えめに） */
  --marker:     #FFE44D;  /* 白地の黄マーカー（可読性デバイス） */
  --red:        #D8002E;  /* 必須・残枠わずか等の機能色のみ */
  --ink:        #20242E;
  --white:      #fff;
  --line:       #D9E2F0;

  --shadow-card: 0 0 20px rgba(0, 0, 0, .1);   /* ultratherm実測 */
  --skew: matrix(1, 0, -0.17, 0.98, 0, 0);      /* ultratherm実測 */
  --inner: 108rem;
  --bar-h: 4.8rem;   /* 固定ヘッダー（プログレス）の高さ */
}

/* 1rem = 10px（ultrathermと同じ） */
html { font-size: 62.5%; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* 装飾要素による横スクロールの保険 */
}

img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: var(--blue); }
p { margin: 0 0 1.6rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.inner { width: min(var(--inner), 92%); margin-inline: auto; }
.center { text-align: center; }
.en { font-family: "Jost", sans-serif; }
.sp-only { display: none; }
@media (max-width: 767px) { .sp-only { display: inline; } }

/* 日本語の改行を文節単位に（対応ブラウザのみ） */
h1, h2, h3, .p-choice, .c-btn, .p-question__ttl, .p-voice__quote,
.p-number__label, .p-tile__label, .p-tile__sub, .p-solution__catch, .p-solution__worry { word-break: auto-phrase; }

/* ==========================================================================
   テクスチャ
   ========================================================================== */

/* 青ベタブロック（MVの青バンドと同じ雰囲気）:
   ロイヤルブルーの斜めグラデ＋大きな半透明ファセット（切子面）＋右上のハイライト */
.u-paint {
  background-color: var(--paint);
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, .07) 0 26%, rgba(255, 255, 255, 0) 26.4%),
    linear-gradient(295deg, rgba(5, 24, 82, .30) 0 14%, rgba(5, 24, 82, 0) 40%),
    radial-gradient(52rem 30rem at 90% -10%, rgba(255, 255, 255, .16), transparent 62%),
    linear-gradient(112deg, #2264E4 0%, #0B41AC 82%);
}

/* 方眼紙（ultrathermのstrength項目背景と同じ雰囲気） */
.u-paper {
  background-color: var(--white);
  background-image:
    linear-gradient(to right, rgba(27, 94, 217, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 94, 217, .09) 1px, transparent 1px);
  background-size: 2.3rem 2.3rem;
}

/* ドット装飾（MVの網点モチーフ）。淡い背景セクションに敷く */
.u-dots {
  background-image: radial-gradient(rgba(27, 94, 217, .13) 1.1px, transparent 1.2px);
  background-size: 1.5rem 1.5rem;
}

/* ==========================================================================
   ユーティリティ（ultrathermの署名的パーツ）
   ========================================================================== */

/* シアー（斜体風の変形） */
.skew { display: inline-block; transform: var(--skew); }

/* 点線の下線（文字の下に点を並べる）。
   縦組みの傍点は文字上だが、横組みでは下線として読ませたいので bottom 基準にする */
.boten {
  padding-bottom: .34em;
  background-image: radial-gradient(.28em .28em at center .14em, currentColor 98%, transparent);
  background-size: 1em .34em;
  background-repeat: repeat-x;
  background-position: bottom left;
}

/* 黄色マーカー（白カード上の強調） */
.mk { background: linear-gradient(transparent 60%, var(--marker) 60%); font-style: normal; }

/* カラーアンダーバー（文字の下に黄色い帯を引いて要所を強調する）
   使い方: <span class="bar">強調したい語</span>
   wizard.js のリード文では [[強調したい語]] と書けば自動でこのspanになる */
.bar {
  padding-bottom: .18em;
  background-image: linear-gradient(var(--cv), var(--cv));
  background-size: 100% .4rem; background-repeat: no-repeat; background-position: 0 100%;
}

/* スクロール／ステップ表示で発火するフェードアップ */
.anim { opacity: 0; transform: translateY(2.4rem); transition: opacity .7s ease, transform .7s ease; }
.anim.is-inview { opacity: 1; transform: none; }
.anim-d1 { transition-delay: .12s; }
.anim-d2 { transition-delay: .24s; }
.anim-d3 { transition-delay: .36s; }

/* 見出しのスライドイン（青→水色のカバーが横に走る）*/
.slide-text { position: relative; display: inline-block; overflow: hidden; padding: 0 .2em; }
.slide-text .slide-text-inner { opacity: 0; display: inline-block; }
.slide-text .slide-cover-blue,
.slide-text .slide-cover-white {
  content: ""; position: absolute; inset: 0; z-index: 2;
  transform: scaleX(0); transform-origin: left;
}
.slide-text .slide-cover-blue { background: var(--blue); }
.slide-text .slide-cover-white { background: var(--sky-light); }
.is-inview .slide-text .slide-text-inner,
.slide-text.is-inview .slide-text-inner { animation: stShow .01s .5s forwards; }
.is-inview .slide-text .slide-cover-blue,
.slide-text.is-inview .slide-cover-blue { animation: stSweep .95s cubic-bezier(.77, 0, .18, 1) both; }
.is-inview .slide-text .slide-cover-white,
.slide-text.is-inview .slide-cover-white { animation: stSweep .95s .12s cubic-bezier(.77, 0, .18, 1) both; }
@keyframes stSweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  46%  { transform: scaleX(1); transform-origin: left; }
  54%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes stShow { to { opacity: 1; } }

/* セクション見出し（背景の英字ウォーターマークは廃止） */
.c-ttl { position: relative; text-align: center; padding: 0 0 .4rem; margin-bottom: 3.2rem; }
.c-ttl__ja {
  position: relative; z-index: 1; margin: 0;
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; line-height: 1.45;
  color: var(--navy); letter-spacing: .02em;
}
.c-ttl--navy .c-ttl__ja { color: #fff; }
.c-ttl__ja .is-blue { color: var(--blue); }
.c-ttl__lead { position: relative; z-index: 1; margin: 1.6rem 0 0; font-size: 1.6rem; }

/* 大きな下向き矢印（worry→solution の橋渡し） */
.c-arrow-down {
  width: 7.3rem; height: 5.4rem; margin: 0 auto 2.4rem;
  background: linear-gradient(180deg, var(--sky), var(--blue));
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* ==========================================================================
   ボタン（ultrathermのグラデーションピル＋白丸矢印）
   ========================================================================== */
.c-btn {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; min-height: 6.8rem;
  padding: 1.4rem 7.6rem 1.4rem 5.2rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: inherit; font-size: 1.8rem; font-weight: 700; line-height: 1.4;
  color: var(--white); text-align: center; text-decoration: none;
  cursor: pointer; transition: all .3s ease;
  --btn-c: var(--blue-g1);
}
.c-btn::after {  /* 白丸 */
  content: ""; position: absolute; right: 1.4rem; top: 50%; translate: 0 -50%;
  width: 4rem; height: 4rem; border-radius: 50%; background: var(--white);
  transition: all .3s ease;
}
.c-btn::before {  /* シェブロン */
  content: ""; position: absolute; right: 3.05rem; top: 50%;
  translate: 0 -50%; rotate: 45deg; z-index: 1;
  width: .95rem; height: .95rem;
  border-top: .25rem solid var(--btn-c); border-right: .25rem solid var(--btn-c);
  transition: all .3s ease;
}
.c-btn small { font-size: 1.2rem; font-weight: 500; opacity: .92; }

/* 次へ進む・CV ＝ オレンジのベタ塗り（グラデーション／影なし） */
.c-btn--next,
.c-btn--cv {
  background: var(--cv);
  --btn-c: var(--cv-edge);
  box-shadow: none;
}
.c-btn:hover { background: var(--white); color: var(--btn-c); border-color: var(--btn-c); }
.c-btn:hover::after { background: var(--btn-c); }
.c-btn:hover::before { border-color: var(--white); }
.c-btn:disabled {
  background: #C3CEDD; color: var(--white); box-shadow: none; cursor: not-allowed;
}
.c-btn:disabled::before { border-color: #C3CEDD; }
.c-btn--lg { min-width: min(52rem, 100%); font-size: 2rem; }

/* ペンキ青の上では白フチで浮かせる */
.u-paint .c-btn--next { border: .25rem solid var(--white); }
.u-paint .c-btn--next:disabled { border-color: rgba(255, 255, 255, .5); }

/* 戻る（控えめなゴースト） */
.c-btn--back {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4.8rem; padding: .8rem 2.8rem; border-radius: 999px;
  background: var(--white); color: var(--blue); border: 1px solid var(--line);
  font-family: inherit; font-size: 1.4rem; font-weight: 700; cursor: pointer; transition: .2s;
}
.c-btn--back:hover { border-color: var(--blue); }

.c-textlink {
  display: inline-block; font-size: 1.4rem; font-weight: 700;
  color: var(--blue); text-decoration: underline;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}

/* セクション内の飛び先リンク（例:「先に企業の声を見る」）。
   本文より一段大きく、白地に青枠のピルで“押せる”ことを明示する */
.c-jumplink {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.2rem 2.6rem 1.2rem 2.8rem;
  border: .2rem solid var(--blue); border-radius: 999px;
  background: var(--white); color: var(--blue);
  font-family: inherit; font-size: 1.7rem; font-weight: 700; line-height: 1.5;
  cursor: pointer; text-align: left;
  box-shadow: 0 .4rem 0 0 #C9D9F2;
  transition: transform .15s, box-shadow .15s, background .2s, color .2s;
}
.c-jumplink::after {           /* 下向きシェブロン（MVの診断ボタンと同じ向き） */
  content: ""; flex: 0 0 auto; width: .9rem; height: .9rem; rotate: 45deg;
  margin-top: -.4rem;
  border-right: .28rem solid currentColor; border-bottom: .28rem solid currentColor;
}
.c-jumplink:hover {
  background: var(--blue); color: var(--white);
  transform: translateY(.4rem); box-shadow: 0 0 0 0 #C9D9F2;
}
@media (max-width: 767px) {
  .c-jumplink { font-size: 1.55rem; padding: 1.1rem 2rem 1.1rem 2.2rem; gap: .8rem; }
}
.p-stepnav { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; margin-top: 3.6rem; }

/* ==========================================================================
   ヘッダー＋プログレス（1つのstickyブロック）
   ========================================================================== */
.l-sticky { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 .2rem 1.4rem rgba(13, 29, 96, .1); }

/* ヘッダー（プログレス）は position:fixed。MV表示中は上へ退避し、
   お悩みセクション以降で出現する（body.is-mv で制御） */
.l-sticky {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--white); box-shadow: 0 .2rem 1.4rem rgba(13, 29, 96, .1);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
body.is-mv .l-sticky { transform: translateY(-100%); }
/* fixed化に伴い、本文はバーの高さぶん下げる。ただしMVだけは画面最上部から始める */
main { padding-top: var(--bar-h); }
#step1 { margin-top: calc(var(--bar-h) * -1); }

.p-progress { background: var(--white); height: var(--bar-h); display: flex; align-items: center; }
.p-progress__inner { width: min(var(--inner), 94%); margin-inline: auto; display: flex; align-items: center; gap: 1.6rem; }
.p-progress__count {
  margin: 0; font-family: "Jost", sans-serif; font-weight: 700; font-style: italic;
  font-size: 1.3rem; color: var(--navy); white-space: nowrap; letter-spacing: .06em;
}
.p-progress__count b { font-size: 2.1rem; color: var(--blue); }
.p-progress__track { flex: 1; height: .7rem; border-radius: 999px; background: var(--pale2); overflow: hidden; }
.p-progress__bar {
  height: 100%; width: 14.3%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sky), var(--blue-g2));
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.p-progress__dots { display: flex; gap: .5rem; }
.p-progress__dot {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  font-family: "Jost", sans-serif; font-weight: 600; font-size: 1.2rem; color: #9DB4D2;
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: .2s;
}
.p-progress__dot[aria-current="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.p-progress__dot.is-done { background: var(--pale2); border-color: var(--sky-light); color: var(--blue); }
.p-progress__dot:disabled { cursor: default; opacity: .45; }

/* ==========================================================================
   ステップ共通
   ========================================================================== */
.p-step { display: none; }
.p-step.is-active { display: block; animation: stepIn .45s ease both; }
@keyframes stepIn { from { opacity: 0; } to { opacity: 1; } }

.l-section { padding: 7.5rem 0 8.5rem; }
.l-section--pale { background: var(--pale); }
.l-section--tightbottom { padding-bottom: 4rem; }

/* ==========================================================================
   STEP1 / FV
   ========================================================================== */
/* MV = 支給画像を全幅・原寸比でそのまま表示（トリミングなし）。
   高さ上限は設けない＝誌面が縮まないので、ピルの位置も画像の割合と1:1で一致する */
.p-fv { position: relative; background: var(--pale); line-height: 0; }
.p-fv__img { display: block; width: 100%; height: auto; }

/* 診断スタート：MV画像の“空白帯”に重ねる。
   位置は画素実測で決定（修正MV: PC 余白帯 x5〜64%×縦75〜93% ／ SP 会場写真 縦46〜75%）*/
.p-fv__cue {
  position: absolute; z-index: 5;
  /* SPは会場写真の上（縦46〜75%が写真）。その下寄り＝66%に配置（白フチで写真から分離） */
  left: 50%; top: 66%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: 1.5rem 3.4rem; border: .25rem solid var(--white); border-radius: 999px;
  background: var(--cv);
  color: var(--white); font-family: inherit; font-size: 1.6rem; font-weight: 700; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
  /* ベタ塗り・影なし。写真からの分離は白フチ（border）で担保する */
  box-shadow: none;
  transition: scale .2s;
}
@media (min-width: 768px) {
  /* PCは横中央・大きめ。実測で x5〜64% × 縦75〜93% が空白なので、
     浮遊アニメの振幅を含めてもその内側に収まるサイズに設定している */
  .p-fv__cue {
    left: 50%; top: 83%;
    font-size: 2.2rem; padding: 2rem 6.4rem; border-width: .3rem; gap: 1.3rem;
  }
  .p-fv__cue::after { width: 1.3rem; height: 1.3rem; border-width: .34rem; margin-top: -.65rem; }
}

/* ① 少し遅れて、下からゆっくり浮き上がりながらフェードイン
   ② その後は上下にゆっくり浮遊し続けて視線を集める
   位置合わせは translate プロパティなので、transform を使うアニメと干渉しない。
   2つのアニメは同じ transform を扱うため、後勝ちの性質を利用して受け渡す
   （cueIn は fill:both で translateY(0) を保持 → 同値で cueFloat が引き継ぐので段差なし）*/
@keyframes cueIn {
  from { opacity: 0; transform: translateY(2.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cueFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.7rem); }
}
.p-fv__cue {
  animation:
    cueIn 1s 1s cubic-bezier(.2, .8, .3, 1) both,
    cueFloat 2.8s 2s ease-in-out infinite;
}
.p-fv__cue:hover { animation-play-state: paused; scale: 1.04; }

.p-fv__cue::after {
  content: ""; width: 1rem; height: 1rem; rotate: 45deg; margin-top: -.5rem;
  border-right: .28rem solid var(--white); border-bottom: .28rem solid var(--white);
  animation: cueBob 1.4s ease-in-out infinite;
}
@keyframes cueBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 .45rem; } }

/* Q1セクション（MVの次。スクロール or 上のボタンで到達） */
.p-q1 { padding: 4.8rem 0 7rem; background-color: var(--pale); }
.p-q1 .p-menu { max-width: 56rem; margin-inline: auto; }
.p-stepnav--fv { margin-top: 2.2rem; gap: 1.2rem; }
.p-stepnav--fv .c-btn { width: 100%; font-size: 1.7rem; min-height: 6.2rem; }

/* ==========================================================================
   選択肢
   ========================================================================== */
.p-choices { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); max-width: 92rem; margin-inline: auto; }
.p-choices--1 { grid-template-columns: 1fr; }
.p-choices--3 { grid-template-columns: repeat(3, 1fr); }

.p-choice {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 1.65rem; font-weight: 700; line-height: 1.55; color: var(--ink);
  background: var(--white); border: .2rem solid var(--line); border-radius: 1.2rem;
  padding: 1.7rem 1.8rem 1.7rem 6rem;
  /* タイルと同じ「ぼかしなしの実線影」で立体感を出す */
  box-shadow: 0 .4rem 0 0 #E3E9F2;
  transition: transform .15s, box-shadow .15s, border-color .2s, background .2s;
}
.p-choice::before {  /* ラジオ円 */
  content: ""; position: absolute; left: 1.8rem; top: 50%; translate: 0 -50%;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: .2rem solid #9DB8DA; background: var(--white); transition: .2s;
}
.p-choice::after {  /* チェックマーク */
  content: ""; position: absolute; left: 2.55rem; top: 50%; translate: 0 calc(-50% - .1rem); rotate: 45deg;
  width: .55rem; height: 1.05rem;
  border-right: .28rem solid transparent; border-bottom: .28rem solid transparent; transition: .2s;
}
/* 押し込み挙動もタイルと統一 */
.p-choice:hover { border-color: var(--blue); transform: translateY(.4rem); box-shadow: 0 0 0 0 #E3E9F2; }
.p-choice[aria-pressed="true"] { border-color: var(--blue); background: var(--pale); box-shadow: 0 .4rem 0 0 #BFD4EE; }
.p-choice[aria-pressed="true"]:hover { transform: translateY(.4rem); box-shadow: 0 0 0 0 #BFD4EE; }

/* 人気順のバッジ。選択肢の右端に置く（テキストと重ならないよう右の余白を広げる） */
.p-choice--rank { padding-right: 9.6rem; }
.p-choice__rank {
  position: absolute; right: 1.4rem; top: 50%; translate: 0 -50%;
  padding: .4rem 1.1rem; border-radius: 99px; white-space: nowrap;
  background: var(--cv); color: var(--white);
  font-size: 1.15rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em;
  box-shadow: 0 .2rem .5rem rgba(245, 102, 0, .38);
  animation: rankPop 2.6s ease-in-out infinite;
}
/* No.2は少し落ち着いた青系にして序列をつける */
.p-choice__rank--2 {
  background: var(--blue); box-shadow: 0 .2rem .5rem rgba(27, 94, 217, .34);
  animation-delay: .5s;
}
@keyframes rankPop { 0%, 84%, 100% { transform: scale(1); } 92% { transform: scale(1.09); } }

/* 「その他」選択時の自由記入欄（選択肢の下に開く） */
.p-other {
  max-width: 92rem; margin: 1.4rem auto 0;
  background: var(--white); border: .2rem solid var(--blue); border-radius: 1.2rem;
  padding: 1.6rem 1.8rem;
}
.p-other[hidden] { display: none; }
.p-other__label { display: block; margin-bottom: .8rem; font-size: 1.35rem; font-weight: 700; color: var(--blue); }
.p-other__input {
  width: 100%; font-family: inherit; font-size: 1.55rem; line-height: 1.6; color: var(--ink);
  background: var(--white); border: .1rem solid var(--line); border-radius: .8rem;
  padding: 1.1rem 1.2rem;
}
.p-other__input::placeholder { color: #9DB0C8; }
.p-other__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 .3rem rgba(27, 94, 217, .16); }
.p-choice[aria-pressed="true"]::before { background: var(--blue); border-color: var(--blue); }
.p-choice[aria-pressed="true"]::after { border-color: #fff; }
/* 申込締切を過ぎたエリアなど、選択不可の選択肢 */
.p-choice:disabled {
  filter: grayscale(1); opacity: .5; cursor: not-allowed;
  transform: none; box-shadow: 0 .4rem 0 0 #E3E9F2;
}
.p-choice:disabled:hover { border-color: var(--line); }
/* Q4：受付中の会場は青枠＋青い締切バッジで前に出す（wizard.js applyAreaChoices が付与） */
.p-choice.is-open { border-color: var(--cv); }
.p-choice.is-open small { color: var(--cv); font-weight: 700; }
/* Q4：受付終了の会場は通常の選択肢と同じ見た目（is-closed は判定用のクラスのみ。区切り見出しで説明する） */

.p-choice small { display: block; font-size: 1.3rem; font-weight: 500; color: #7a8ca5; margin-top: .1rem; }
/* 選択肢内の <b> は黄マーカーで強調（AIっぽい単色太字を避ける） */
.p-choice b { font-weight: inherit; color: inherit; background: linear-gradient(transparent 62%, var(--marker) 62%); }

/* ==========================================================================
   メニュー表UI（auns.biz のナビを参考に実測値で再現）
     タブ radius 10px 10px 0 0 → パネル radius 0 20px 20px 20px
     白タイルは「ぼかしなしの実線影 0 4px 0」、押すと translateY(4px) で沈む
   ========================================================================== */
.p-menu { --menu-accent: var(--blue); }
.p-menu__tabs { display: flex; gap: 1rem; }
/* タブは参考サイト同様「タブごとに固有色」。非選択は沈ませて選択側を立てる */
.p-menu__tab {
  flex: 1 1 0; min-width: 0; height: 5.4rem; padding: .2rem 1rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 0; border-radius: 1rem 1rem 0 0; cursor: pointer;
  font-family: inherit; font-size: 1.3rem; font-weight: 700; line-height: 1.35;
  color: var(--white);
  transition: filter .25s, transform .25s;
}
.p-menu__tab:nth-child(1) { background: linear-gradient(112deg, #2264E4, #0B41AC); }
.p-menu__tab:nth-child(2) { background: var(--navy); }
.p-menu__tab[aria-selected="false"] { filter: brightness(.62) saturate(.7); transform: translateY(.4rem); }
.p-menu__tab[aria-selected="false"]:hover { filter: brightness(.8) saturate(.85); }

.p-menu__panel { border-radius: 0 2rem 2rem 2rem; padding: 2.6rem 2rem 2.4rem; }
.p-menu__panel[hidden] { display: none; }
/* タブを持たない単独パネル（MVのお悩みのみ構成）は四隅とも丸める */
.p-menu__panel--solo { border-radius: 2rem; }
/* タブ2（相談・情報系）は墨色。青パネルとの対比で切り替わりが分かる */
.p-menu__panel--alt { background: var(--navy); }

.p-menu__lead {
  margin: 0 0 2rem; text-align: center; color: var(--white);
  font-size: 1.9rem; font-weight: 700; line-height: 1.55;
  text-shadow: 0 .2rem .8rem rgba(6, 20, 55, .35);
}
.p-menu__lead em { font-style: normal; color: var(--yellow); }
.p-menu__lead small { display: block; margin-top: .6rem; font-size: 1.2rem; font-weight: 500; opacity: .92; text-shadow: none; }

/* 2列タイル */
/* minmax(0,1fr) にしないと、中身（長い見出しや横長アイコン）の最小幅に押されて
   左右の列幅が揃わない。SPで顕著に崩れるため必須 */
.p-menu__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }

.p-tile {
  position: relative; width: 100%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .6rem;
  background: var(--white); border: 0; border-radius: 1rem;
  padding: 1.6rem .8rem 1.2rem;
  box-shadow: 0 .4rem 0 0 #E5E5E5;            /* ぼかしなしの実線影 */
  font-family: inherit; color: var(--navy);
  transition: transform .15s, box-shadow .15s, background .2s;
}
/* アイコンは320x320の正方形に統一済み（余白を除いた実体を同じ割合で配置している）。
   ここも正方形で受けることで、4枚が同じ大きさに見える */
.p-tile__icon { width: 8.5rem; height: 8.5rem; max-width: 100%; object-fit: contain; display: block; }
/* テキスト部の座布団（淡い青の下敷きで文字を引き立てる） */
.p-tile__body {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 100%; margin-top: .2rem; padding: 1.1rem .8rem 1.2rem;
  background: #EDF3FC; border-radius: .8rem;
}
.p-tile__label { font-size: 1.25rem; font-weight: 700; line-height: 1.5; text-align: center; }
.p-tile__sub { font-size: 1.05rem; font-weight: 500; color: #7a8ca5; line-height: 1.35; text-align: center; }
/* 強調語のカラーアンダーバーは共通クラス .bar（ユーティリティ）を使用 */
.p-tile:hover { transform: translateY(.4rem); box-shadow: 0 0 0 0 #E5E5E5; }

/* 選択状態: オレンジ枠＋ウォーム地＋右上チェック。
   パネルの青地とチェック／枠の色がかぶらないよう、選択の合図はCV色（オレンジ）で統一する */
.p-tile[aria-pressed="true"] {
  background: #FFF6EE;
  box-shadow: 0 0 0 .32rem var(--cv), 0 .4rem 0 0 #E0B491;
}
.p-tile[aria-pressed="true"] .p-tile__label { color: var(--cv-edge); }
/* 座布団の色は選択しても変えない（カード地がウォームになるので、そのままでも境目は分かる） */
.p-tile[aria-pressed="true"]::after {
  content: ""; position: absolute; top: -1.1rem; right: -1.1rem;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: .25rem solid var(--white);          /* 白フチで青パネルからも分離させる */
  background: var(--cv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") no-repeat 50% 50% / 1.5rem;
  box-shadow: 0 .2rem .6rem rgba(6, 20, 55, .35);
}

/* 点線の区切り（白50%→透明50%を12px間隔で繰り返す） */
.p-menu__hr {
  height: 1px; margin: 2rem 0 1.6rem;
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-size: 12px 100%; background-repeat: repeat-x;
}

/* 横長カード（アイコンがカードから少しはみ出す） */
.p-menu__cards { display: grid; gap: 1.2rem; }
.p-mcard {
  position: relative; width: 100%; min-height: 6.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 1.4rem 6rem 1.4rem 2rem;
  background: var(--white); border: 0; border-radius: 1rem;
  box-shadow: 0 .4rem 0 0 #E5E5E5;
  font-family: inherit; font-size: 1.45rem; font-weight: 700; color: var(--navy); text-align: center;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.p-mcard:hover { transform: translateY(.4rem); box-shadow: 0 0 0 0 #E5E5E5; }
.p-mcard__icon {
  position: absolute; right: -.4rem; top: 50%; translate: 0 -50%;
  width: 5.6rem; height: 5.6rem;
}
.p-mcard--cv { background: var(--cv); color: var(--white); box-shadow: 0 .4rem 0 0 var(--cv-edge); }
.p-mcard--cv:hover { box-shadow: 0 0 0 0 var(--cv-edge); }

/* ==========================================================================
   写真が流れる帯（auns.biz の .p-slide を実測して再現）
     同一の列を2本並べ、各列を translateX(-100%) で送ると継ぎ目なくループする
   ========================================================================== */
.p-marquee { display: flex; overflow: hidden; }
.p-marquee__row {
  display: flex; width: max-content;
  /* 7枚構成。枚数を変えたら流れる速さが変わるので秒数も調整する（1枚あたり約7.5秒） */
  animation: marquee 53s linear infinite;
}
.p-marquee__img { width: 26rem; aspect-ratio: 70 / 47; flex: 0 0 auto; }
.p-marquee__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.p-marquee:hover .p-marquee__row { animation-play-state: paused; }
.p-marquee__cap { margin: 1.2rem 0 0; text-align: center; font-size: 1.2rem; color: #7a8ca5; }

/* ==========================================================================
   セクション → 設問への導線（目立たせる帯＋落ちる矢印）
   ========================================================================== */
.p-bridge { text-align: center; margin: 5.6rem auto 0; }
.p-bridge__txt {
  display: inline-block; position: relative; margin: 0;
  padding: 1.6rem 3.4rem; border-radius: 99px;
  background: linear-gradient(112deg, #2264E4 0%, #0B41AC 82%);
  color: var(--white); font-weight: 700; line-height: 1.5;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  box-shadow: 0 .6rem 1.8rem rgba(13, 29, 96, .28);
  overflow: hidden;                       /* 光沢を帯の内側だけで走らせる */
  animation: bridgeBob 2.4s ease-in-out infinite;
}
.p-bridge__txt em { font-style: normal; color: var(--yellow); }
/* 斜めの光沢が定期的に横切る */
.p-bridge__txt::after {
  content: ""; position: absolute; top: -50%; left: -60%;
  width: 40%; height: 200%; rotate: 18deg;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
  animation: bridgeShine 2.8s ease-in-out infinite;
}
.p-bridge__inner { position: relative; z-index: 1; }
/* 下向きの三角。帯から設問へ視線を落とす */
.p-bridge__arrow {
  display: block; width: 3.4rem; height: 2.2rem; margin: 1.4rem auto 0;
  background: var(--blue);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  animation: bridgeDrop 1.4s ease-in-out infinite;
}
@keyframes bridgeBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6rem); } }
@keyframes bridgeShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes bridgeDrop  { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(.7rem); opacity: 1; } }

/* ==========================================================================
   質問カード（明色セクション用）
   ========================================================================== */
.p-question {
  position: relative; max-width: 96rem; margin: 6.4rem auto 0;
  background: var(--white); border-radius: 1.6rem;
  border-top: .6rem solid var(--blue);
  box-shadow: var(--shadow-card);
  padding: 4rem 3.4rem 4.4rem;
}
.p-question__no {
  display: inline-block; margin-bottom: 1.4rem; padding: .35rem 2rem;
  border-radius: 999px; color: var(--white);
  background: linear-gradient(283.92deg, var(--blue-g1) 30.14%, var(--blue-g2) 69.86%);
  font-family: "Jost", sans-serif; font-style: italic; font-weight: 700;
  font-size: 1.4rem; letter-spacing: .12em;
}
.p-question__ttl {
  margin: 0 0 .6rem; text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 700; color: var(--navy); line-height: 1.55;
}
.p-question__note { text-align: center; font-size: 1.35rem; color: #7a8ca5; margin-bottom: 2.6rem; }

/* ==========================================================================
   STEP2 / 解決宣言 ＋ ABOUTポイント
   ========================================================================== */
.p-solution { padding: 6.4rem 0 5rem; text-align: center; }
/* 選んだお悩みのエコー（回答の引用チップ） */
.p-solution__worry {
  position: relative;
  display: inline-flex; align-items: center; gap: 1rem;
  margin: 0 0 2.4rem; padding: 1.3rem 2.6rem 1.3rem 5.4rem;
  background: var(--white); border: .2rem solid var(--blue); border-radius: 1.2rem;
  font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight: 700; color: var(--navy);
  box-shadow: 0 .4rem 0 0 #E5E5E5;
}
.p-solution__worry::before {  /* 青丸チェック */
  content: ""; position: absolute; left: 1.6rem; top: 50%; translate: 0 -50%;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") no-repeat 50% 50% / 1.5rem;
}
.p-solution__catch {
  margin: 0 0 2.4rem; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; color: var(--navy); line-height: 1.6;
}
.p-solution__catch .skew { color: var(--blue); }
.p-solution__lead { max-width: 78rem; margin: 0 auto; font-size: 1.7rem; font-weight: 500; text-align: left; }
.p-solution__lead p { margin: 0; }
.p-solution__lead p + p { margin-top: 1.8rem; }

/* POINT/MERITカード＝ultrathermのstrength項目（方眼紙＋右上巨大アウトライン番号） */
.p-point {
  position: relative; border-radius: .6rem;
  box-shadow: var(--shadow-card);
  padding: 6.4rem 3.4rem 3.6rem; margin-top: 3.4rem;
}
.p-point__num {
  position: absolute; top: .6rem; right: 1.6rem; line-height: .9; text-align: right;
  font-family: "Jost", sans-serif; font-style: italic; font-weight: 700;
  font-size: 9.2rem; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: .18rem rgba(27, 94, 217, .25);
  pointer-events: none;
}
.p-point__num small {
  display: block; font-size: .26em; letter-spacing: .34em;
  -webkit-text-stroke: 0; color: rgba(0, 79, 185, .35);
  font-weight: 600; margin-bottom: .2rem;
}
.p-point__ttl { position: relative; z-index: 1; margin: 0 0 1.8rem; text-align: center; font-weight: 700; line-height: 1.5; }
.p-point__ttl .s { display: inline-block; font-size: clamp(1.7rem, 2.6vw, 2.3rem); transform: var(--skew); }
.p-point__ttl .l { display: inline-block; font-size: clamp(2.3rem, 3.8vw, 3.4rem); transform: var(--skew); color: var(--blue); }
/* MERITカードの差し込み画像。中央に置き、素材の縦横比が違っても大きさが揃うよう比率を固定する */
.p-point__img {
  position: relative; z-index: 1;
  margin: 0 auto 2.2rem; max-width: 46rem;
}
.p-point__img img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center;
  border-radius: .8rem; box-shadow: var(--shadow-card); display: block;
}
.p-point__txt { position: relative; z-index: 1; margin: 0; font-size: 1.5rem; }
.p-point__txt b { color: var(--blue); }

.c-grid { display: grid; gap: 2.4rem; }
.c-grid--2 { grid-template-columns: repeat(2, 1fr); }
.c-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* 写真 */
.c-figure { margin: 0; }
/* 縦横比の違う写真を並べても高さが揃うよう、比率を固定して切り抜く */
.c-figure img {
  width: 100%; aspect-ratio: 1100 / 703; object-fit: cover; object-position: center;
  border-radius: .8rem; box-shadow: var(--shadow-card); display: block;
}
.c-figure figcaption { font-size: 1.25rem; color: #7a8ca5; margin-top: .8rem; text-align: center; }
.c-figure--ph {
  aspect-ratio: 16 / 9; border-radius: .8rem;
  border: .2rem dashed var(--sky-light);
  background: rgba(237, 248, 255, .75);
  display: grid; place-items: center; text-align: center;
  color: var(--blue); font-size: 1.35rem; font-weight: 700; padding: 2rem;
}
.c-figure--ph span { display: block; font-size: 1.15rem; color: #7a8ca5; font-weight: 400; margin-top: .3rem; }
.c-figure--ph--43 { aspect-ratio: 4 / 3; }
.c-figure--ph--45 { aspect-ratio: 4 / 5; }
/* ペンキ青の上のプレースホルダ */
.c-figure--ph--dark {
  border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .1);
  color: var(--white);
}
.c-figure--ph--dark span { color: rgba(255, 255, 255, .75); }

/* 業種別のおしごと体験（回答パーソナライズ枠） */
.p-industrybox {
  max-width: 96rem; margin: 0 auto 5.6rem;
  background: var(--white); border-radius: 1.2rem; box-shadow: var(--shadow-card);
  border-left: .8rem solid var(--blue); padding: 2.8rem 3rem;
}
/* 黒ベタのピルをやめ、青の細字ラベルに（本文と主従がはっきりする） */
.p-industrybox__label {
  display: block; margin: 0 0 .8rem; padding: 0;
  color: var(--blue); font-size: 1.3rem; font-weight: 700; letter-spacing: .04em;
}
.p-industrybox__txt { margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.8; color: var(--navy); }

/* ==========================================================================
   STEP3 / 数字（ペンキ青＋白カード）・動画・メディア
   ========================================================================== */
.p-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: 96rem; margin-inline: auto; }
.p-number {
  background: var(--white); border-radius: 1rem;
  box-shadow: 0 .6rem 1.8rem rgba(6, 20, 55, .3);
  padding: 2.4rem 1.2rem 2rem; text-align: center;
  border-bottom: .5rem solid var(--sky);
}
.p-number__label { display: block; font-size: 1.3rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }
.p-number__label sup { font-size: .78em; font-weight: 500; color: #7a8ca5; margin-left: .1em; }
/* 本文末に添える出典注記 */
.p-note { display: block; margin-top: .8rem; font-size: 1.15rem; font-weight: 400; color: #7a8ca5; line-height: 1.6; }
.p-number__value {
  margin: 0; font-family: "Jost", sans-serif; font-style: italic; font-weight: 700;
  font-size: clamp(3rem, 5vw, 4.4rem); color: var(--blue); line-height: 1.1; letter-spacing: .01em;
}
.p-number__value small { font-family: "Noto Sans JP", sans-serif; font-style: normal; font-size: .42em; color: var(--navy); font-weight: 700; margin-left: .2rem; }
.p-numbers__note { max-width: 96rem; margin: 2rem auto 0; font-size: 1.25rem; color: rgba(255, 255, 255, .8); }

/* YouTube埋め込み（クリックで再生開始） */
.p-video {
  position: relative; max-width: 76rem; margin: 0 auto 2rem;
  aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden;
  background: var(--navy); box-shadow: var(--shadow-card); cursor: pointer;
}
.p-video img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: .3s; }
.p-video:hover img { opacity: 1; scale: 1.03; }
.p-video__play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: 7.6rem; height: 7.6rem; border-radius: 50%;
  background: rgba(255, 255, 255, .95); box-shadow: 0 .6rem 2rem rgba(4, 14, 46, .4);
  transition: .3s; pointer-events: none;
}
.p-video__play::after {
  content: ""; position: absolute; inset: 50% auto auto 54%; translate: -50% -50%;
  border-left: 2.2rem solid var(--blue-d); border-top: 1.4rem solid transparent; border-bottom: 1.4rem solid transparent;
}
.p-video:hover .p-video__play { scale: 1.08; }
.p-video__label {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 1rem 1.6rem .9rem; text-align: left;
  background: linear-gradient(transparent, rgba(4, 14, 46, .85));
  color: var(--white); font-size: 1.35rem; font-weight: 700; pointer-events: none;
}
.p-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.p-video.is-playing { cursor: default; }
.p-video__cap { max-width: 76rem; margin: 0 auto 4.4rem; font-size: 1.25rem; color: #7a8ca5; text-align: center; }

.p-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 96rem; margin-inline: auto; }
.p-media__item {
  display: flex; gap: 1.4rem; align-items: center;
  background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card);
  padding: 1.8rem 2rem;
}
/* 動画が公開されているものはリンクにする（aタグでも見た目は同じ） */
a.p-media__item { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.p-media__item:hover { transform: translateY(-.3rem); box-shadow: 0 .6rem 1.6rem rgba(13, 29, 96, .16); }
.p-media__ext { display: inline-block; margin-left: .8rem; font-size: 1.15rem; font-weight: 700; color: var(--blue); white-space: nowrap; }
.p-media__icon {
  flex: 0 0 auto; width: 4.4rem; height: 4.4rem; border-radius: .8rem;
  background: linear-gradient(283.92deg, var(--blue-g1), var(--blue-g2)); color: var(--white);
  display: grid; place-items: center;
  font-family: "Jost", sans-serif; font-style: italic; font-weight: 700; font-size: 1.4rem;
}
.p-media__name { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1.5; }
.p-media__date { margin: 0; font-size: 1.2rem; color: #7a8ca5; }

/* ==========================================================================
   STEP4 / 企業の声（写真つきcase風カード）＋当日の流れ（flow）
   ========================================================================== */

.p-voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.8rem 2.4rem; max-width: 100rem; margin-inline: auto; }
.p-voice {
  position: relative; background: var(--white); border-radius: 1rem;
  box-shadow: var(--shadow-card); transition: .25s;
}
/* 業種名ラベル。全カードに常時表示し、カード上辺の中央に配置する */
.p-voice__flag {
  position: absolute; top: -1.5rem; left: 50%; translate: -50% 0; z-index: 2;
  padding: .4rem 1.8rem; border-radius: 999px; white-space: nowrap;
  background: var(--cv); color: var(--white);
  font-size: 1.3rem; font-weight: 700; letter-spacing: .04em;
}
/* 回答に合致したカードは枠でも強調（ラベルは全カード共通なので枠で差をつける） */
.p-voice.is-match { box-shadow: 0 0 0 .3rem var(--cv), var(--shadow-card); }
.p-voice__img { margin: 0; border-radius: 1rem 1rem 0 0; overflow: hidden; aspect-ratio: 16 / 8.5; }
.p-voice__img img { width: 100%; height: 100%; object-fit: cover; }
.p-voice__body { padding: 2.6rem 2.4rem 2.2rem; }
.p-voice__quote {
  /* 引用符が1行目に被らないよう、上に逃がし場所をつくる */
  position: relative; margin: 0 0 1.2rem; padding-top: 2.4rem;
  font-size: clamp(1.65rem, 2.6vw, 1.95rem); font-weight: 700; color: var(--navy); line-height: 1.65;
}
.p-voice__quote::before {
  content: "“"; position: absolute; top: 0; left: -.4rem;
  font-family: "Jost", sans-serif; font-size: 5rem; line-height: .78; color: var(--sky-light);
}
.p-voice__company { margin: 0; font-size: 1.4rem; font-weight: 700; }
.p-voice__industry { font-size: 1.2rem; color: #7a8ca5; font-weight: 500; }
.p-voice__note { margin: .8rem 0 0; font-size: 1.35rem; color: #5c6f8a; }

/* 当日の流れ: ペンキ青＋STEP番号Jost（番号は#57CFFF） */
.p-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem 3.2rem; max-width: 104rem; margin-inline: auto; }
.p-flow__item { position: relative; display: flex; flex-direction: column; }
/* STEP間をつなぐ矢印。PCは横並びなので右向き、SPは縦並びなので下向きにする。
   最後のSTEPには付けない */
.p-flow__item:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1;
  width: 1.6rem; height: 1.9rem; background: var(--sky);
  clip-path: polygon(0 0, 100% 50%, 0 100%);   /* 右向き三角 */
  top: 50%; right: -2.4rem; translate: 0 -50%;
  animation: flowNudge 1.6s ease-in-out infinite;
}
@keyframes flowNudge { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(.4rem); opacity: 1; } }
.p-flow__num {
  margin: 0 0 1.2rem; text-align: center;
  font-family: "Jost", sans-serif; font-weight: 600; font-size: 1.7rem; color: var(--white); line-height: 1;
}
.p-flow__num b { font-size: 2.6rem; color: var(--sky); font-weight: 600; margin-left: .5rem; }
.p-flow__body {
  flex: 1; background: var(--white); color: var(--ink); border-radius: 1rem;
  box-shadow: 0 .6rem 1.8rem rgba(6, 20, 55, .3);
  overflow: hidden; display: flex; flex-direction: column;
  font-size: 1.35rem; line-height: 1.7; text-align: center;
}
/* 各STEPの画像枠。figure を消せばテキストのみで自然に詰まる */
.p-flow__img { margin: 0; aspect-ratio: 4 / 3; background: var(--pale2); }
.p-flow__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-flow__txt { margin: 0; padding: 1.6rem 1.4rem 1.8rem; }
.p-flow__txt b { display: block; color: var(--blue); font-size: 1.5rem; margin-bottom: .4rem; }

/* ==========================================================================
   STEP5 / スケジュール
   ========================================================================== */
.p-schedule { display: grid; gap: 1.2rem; max-width: 96rem; margin-inline: auto; }
.p-schedule__row {
  position: relative; display: grid; grid-template-columns: 12rem 8rem 1fr 11rem 12rem;
  align-items: center; gap: 1.4rem;
  background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card);
  padding: 1.6rem 2rem; transition: .2s;
}
/* 申込締切を過ぎた会場（.is-closed は wizard.js の applyDeadlines が付与） */
.p-schedule__row.is-closed { filter: grayscale(1); opacity: .55; }
.p-schedule__row.is-match { box-shadow: 0 0 0 .3rem var(--cv), var(--shadow-card); }
.p-schedule__row.is-match::before {
  content: "ご検討エリア"; position: absolute; top: -1.1rem; left: 1.6rem;
  padding: .2rem 1.2rem; border-radius: 999px;
  background: var(--cv);
  color: var(--white); font-size: 1.1rem; font-weight: 700;
}
.p-schedule__date {
  margin: 0; font-family: "Jost", sans-serif; font-style: italic; font-weight: 700;
  font-size: 2.4rem; color: var(--blue); line-height: 1.1; letter-spacing: .01em;
}
.p-schedule__date small { font-family: "Noto Sans JP", sans-serif; font-style: normal; font-size: .55em; color: #7a8ca5; font-weight: 700; }
.p-schedule__area { margin: 0; font-size: 1.9rem; font-weight: 700; color: var(--navy); }
.p-schedule__venue { margin: 0; font-size: 1.45rem; font-weight: 500; }
.p-schedule__venue small { display: block; font-size: 1.15rem; color: #7a8ca5; }
/* 申込締切（販売期日）。開催日と見間違えないよう小ラベル＋赤字、日付は赤アンダーバーで強調 */
.p-schedule__deadline { margin: 0; text-align: center; line-height: 1.3; }
.p-schedule__deadline small { display: block; font-size: 1.05rem; color: #7a8ca5; font-weight: 700; }
.p-schedule__deadline b {
  font-family: "Jost", sans-serif; font-style: italic; font-weight: 700;
  font-size: 1.8rem; color: var(--red); letter-spacing: .01em;
  border-bottom: .3rem solid var(--red); padding-bottom: .1rem;
}
.p-schedule__deadline b span { font-family: "Noto Sans JP", sans-serif; font-style: normal; font-size: .65em; }
/* 会場ごとの「問い合わせる」。押すと無料相談へ遷移し会場名が自動入力される */
.p-schedule__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4.2rem; padding: .4rem 1.2rem; border: 0; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-family: inherit; font-size: 1.35rem; font-weight: 700; white-space: nowrap;
  cursor: pointer; transition: .2s;
}
.p-schedule__cta:hover { background: var(--white); color: var(--blue-d); box-shadow: inset 0 0 0 .2rem var(--blue-d); }
.p-schedule__cta:disabled { background: #C3CEDD; color: var(--white); cursor: not-allowed; box-shadow: none; }
.p-schedule__note { max-width: 96rem; margin: 1.6rem auto 0; font-size: 1.25rem; color: #7a8ca5; }

/* STEP5：今秋・受付中の会場（締切前の行だけを wizard.js applyScheduleLayout が移す） */
.p-schedule__open { display: grid; gap: 1rem; }
/* wizard.js が hidden を付けたブロックは display 指定より優先して隠す */
.p-schedule__open[hidden], .p-schedule__closed[hidden], .p-why[hidden] { display: none; }
.p-schedule__openttl { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.p-schedule__openbadge { padding: .2rem 1.2rem; border-radius: 999px; background: var(--red); color: var(--white); font-size: 1.15rem; font-weight: 700; }
.p-schedule__openlist { display: grid; gap: 1.2rem; }
/* 残り日数（締切14日前から表示） */
.p-schedule__left { display: block; margin-top: .4rem; font-size: 1.1rem; font-weight: 700; color: var(--red); }

/* STEP5：来年の開催予定をメインに据える（.p-schedule グリッドの1要素として全幅） */
/* 基底 .p-nextyear（margin:auto／max-width）より後ろで定義されていないため、詳細度を上げて確実に全幅にする */
.p-schedule .p-nextyear--main { margin: 1.2rem 0 0; max-width: none; width: 100%; }
.p-nextyear--main .p-nextyear__ttl { font-size: 2.6rem; }
.p-nextyear__cta { margin: 2.6rem 0 0; text-align: center; }
.p-nextyear__cta .c-btn { width: 100%; max-width: 50rem; }
/* Q4で選んだエリアと同じ開催地をハイライト */
.p-nextyear__list li.is-match { position: relative; background: var(--white); box-shadow: 0 0 0 .25rem var(--cv); }
.p-nextyear__list li.is-match::after {
  content: "ご検討エリア"; position: absolute; top: -1rem; left: 50%; translate: -50% 0;
  padding: .1rem 1rem; border-radius: 999px; background: var(--cv); color: var(--white);
  font-size: 1rem; font-weight: 700; white-space: nowrap;
}

/* STEP5：今秋の受付を終了した会場（折りたたみ。控えめに） */
.p-schedule__closed { margin-top: 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: 1rem; }
.p-schedule__closedttl {
  display: flex; align-items: center; gap: .8rem; margin: 0; padding: 1.4rem 2rem;
  font-size: 1.45rem; font-weight: 700; color: #55667D; line-height: 1.4;
  cursor: pointer; list-style: none; user-select: none;
}
.p-schedule__closedttl::-webkit-details-marker { display: none; }
.p-schedule__closedcount { font-size: 1.2rem; color: #7a8ca5; }
.p-schedule__closedttl::after {
  content: ""; margin-left: auto; flex-shrink: 0;
  width: .9rem; height: .9rem; rotate: 45deg; translate: 0 -.2rem;
  border-right: .25rem solid #7a8ca5; border-bottom: .25rem solid #7a8ca5;
  transition: rotate .2s, translate .2s;
}
.p-schedule__closed[open] .p-schedule__closedttl::after { rotate: 225deg; translate: 0 .2rem; }
.p-schedule__closedttl:hover { background: var(--pale); border-radius: 1rem; }
.p-schedule__closedlist { display: grid; gap: 1.2rem; padding: .6rem 1.6rem 1.6rem; }
.p-schedule__closedlist .p-schedule__row { box-shadow: none; border: 1px solid var(--line); }
.p-schedule__closedlist .p-schedule__row.is-match { box-shadow: 0 0 0 .3rem var(--cv); }

/* 来年の開催予定（おしごとフェア2027）: p-why と同じ方眼紙カード */
.p-nextyear {
  max-width: 96rem; margin: 5.6rem auto 0;
  border-radius: 1rem; box-shadow: var(--shadow-card);
  padding: 3.6rem 3.4rem;
}
.p-nextyear__badge {
  width: fit-content; margin: 0 auto .8rem; padding: .2rem 1.6rem; border-radius: 999px;
  background: var(--blue); color: var(--white); font-size: 1.2rem; font-weight: 700;
}
.p-nextyear__ttl { margin: 0 0 2rem; text-align: center; font-size: 2.2rem; line-height: 1.5; color: var(--navy); }
.p-nextyear__ttl span { display: block; font-size: 1.35rem; color: var(--blue); }
/* 開催地はアコーディオン（details/summary）。summaryを押すと会場一覧が開く */
.p-nextyear__group {
  margin-bottom: 1.2rem;
  background: var(--white); border: 1px solid var(--line); border-radius: .8rem;
}
.p-nextyear__group:last-of-type { margin-bottom: 0; }
.p-nextyear__month {
  display: flex; align-items: center; gap: 1rem;
  margin: 0; padding: 1.2rem 1.8rem;
  font-size: 1.5rem; font-weight: 700; color: var(--blue); line-height: 1.4;
  cursor: pointer; list-style: none; user-select: none;
}
.p-nextyear__month::-webkit-details-marker { display: none; }
.p-nextyear__count { font-size: 1.2rem; color: #7a8ca5; font-weight: 700; }
/* 右端のシェブロン。開いたら上向きに回転 */
.p-nextyear__month::after {
  content: ""; margin-left: auto; flex-shrink: 0;
  width: .9rem; height: .9rem; rotate: 45deg; translate: 0 -.2rem;
  border-right: .25rem solid var(--blue); border-bottom: .25rem solid var(--blue);
  transition: rotate .2s, translate .2s;
}
.p-nextyear__group[open] .p-nextyear__month::after { rotate: 225deg; translate: 0 .2rem; }
.p-nextyear__month:hover { background: var(--pale); border-radius: .8rem; }
.p-nextyear__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem;
  padding: .2rem 1.8rem 1.6rem;
}
.p-nextyear__list li { background: var(--pale); border-radius: .8rem; padding: .7rem .6rem .8rem; text-align: center; line-height: 1.4; }
.p-nextyear__list b { display: block; font-size: 1.5rem; color: var(--navy); }
.p-nextyear__list small { font-size: 1.1rem; color: #7a8ca5; }
.p-nextyear__note { margin: 1.8rem 0 0; font-size: 1.25rem; color: #7a8ca5; }

/* なぜ秋か（方眼紙カード＋傍点見出し） */
.p-why {
  max-width: 96rem; margin: 5.6rem auto 0;
  border-radius: 1rem; box-shadow: var(--shadow-card);
  padding: 3.6rem 3.4rem; text-align: center;
}
.p-why__ttl { margin: 0 0 1.8rem; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; color: var(--navy); }
.p-why__ttl .skew { color: var(--blue); }
.p-why__txt { margin: 0; text-align: left; font-size: 1.55rem; }
.p-why__txt b { color: var(--blue); }

/* ==========================================================================
   STEP6 / サービス（サムネイルつきカード）
   ========================================================================== */
.p-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.6rem 2.4rem; max-width: 100rem; margin-inline: auto; }
.p-service {
  position: relative; background: var(--white); border-radius: 1rem;
  box-shadow: var(--shadow-card); padding: 2.4rem 2.6rem 2.4rem; transition: .25s;
}
/* 「おすすめ」バッジ。カード上辺の中央・オレンジ（企業の声のラベルと同じ扱い） */
.p-service__flag {
  display: none; position: absolute; top: -1.4rem; left: 50%; translate: -50% 0;
  padding: .4rem 1.8rem; border-radius: 999px; white-space: nowrap;
  background: var(--cv); color: var(--white);
  font-size: 1.3rem; font-weight: 700; letter-spacing: .04em;
}
.p-service.is-match .p-service__flag { display: block; }
.p-service.is-match { box-shadow: 0 0 0 .3rem var(--cv), var(--shadow-card); }
.p-service__head { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.2rem; }
.p-service__thumb { flex: 0 0 9.2rem; }
.p-service__thumb img { border-radius: .8rem; aspect-ratio: 1; object-fit: cover; }
/* サムネイル未設定のときは見出しが左端から始まるように */
.p-service__head:not(:has(.p-service__thumb)) { display: block; }
.p-service__name { margin: 0; font-size: 1.9rem; font-weight: 700; color: var(--blue); line-height: 1.45; }
.p-service__name span { display: block; font-size: 1.2rem; color: #7a8ca5; font-weight: 500; }
.p-service__desc { margin: 0; font-size: 1.4rem; }

/* ==========================================================================
   CTAバンド（＼傍点タイトル／＋吹き出し＋人物写真＋ボタン2本）
   ========================================================================== */
.p-ctaband {
  position: relative;
  background:
    radial-gradient(60rem 24rem at 85% 110%, rgba(87, 207, 255, .35), transparent),
    linear-gradient(180deg, var(--pale2), var(--pale));
  padding: 5.6rem 0 6rem; text-align: center; overflow: hidden;
}
.p-ctaband__ttl {
  margin: 0 0 3rem; font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 700; color: var(--navy);
}
/* 見出し下の傍点（点々）は青。文字色（墨色）はそのまま */
.p-ctaband__ttl .boten {
  background-image: radial-gradient(.28em .28em at center .14em, var(--blue) 98%, transparent);
}
.p-ctaband__ttl .skew { display: inline-block; }
.p-ctaband__btns {
  position: relative; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
  max-width: 92rem; margin-inline: auto;
}
.p-ctaband__btns .c-btn { flex: 1 1 34rem; max-width: 44rem; }
/* 人物写真（PCのみ・左下） */
.p-ctaband__person { position: absolute; left: 3.5%; bottom: -.6rem; width: 15rem; margin: 0; }
.p-ctaband__person .c-figure--ph { aspect-ratio: 1; border-radius: 50%; font-size: 1.1rem; padding: 1.4rem; background: rgba(255, 255, 255, .8); }
.p-ctaband__person img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: .4rem solid var(--white); box-shadow: var(--shadow-card); }
.p-ctaband__note { margin: 1.8rem 0 0; font-size: 1.3rem; color: #5c6f8a; }

/* ==========================================================================
   STEP7 / 診断結果＋フォーム
   ========================================================================== */
.p-result {
  max-width: 92rem; margin: 0 auto 6rem;
  background: var(--white); border-radius: 1.4rem; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.p-result__head { color: var(--white); text-align: center; padding: 2.2rem 2rem; }
.p-result__head .en { display: block; font-style: italic; font-weight: 600; letter-spacing: .3em; font-size: 1.2rem; color: var(--sky); }
.p-result__ttl { margin: .2rem 0 0; font-size: clamp(1.9rem, 3.2vw, 2.4rem); font-weight: 700; }
.p-result__body { padding: 2.8rem 3rem 3.2rem; }
.p-result__list { display: grid; gap: 1rem; }
.p-result__item {
  display: grid; grid-template-columns: 18rem minmax(0, 1fr) auto; gap: 1.6rem; align-items: center;
  background: var(--pale); border-radius: .8rem; padding: 1.3rem 1.8rem;
}
/* 各行の右端「修正する」。押すとその設問へ戻れる */
.p-result__edit {
  justify-self: end; white-space: nowrap; cursor: pointer;
  font-family: inherit; font-size: 1.25rem; font-weight: 700; color: var(--blue);
  background: var(--white); border: .1rem solid var(--blue); border-radius: 99px;
  padding: .5rem 1.4rem; transition: background .2s, color .2s;
}
.p-result__edit:hover { background: var(--blue); color: var(--white); }

/* 「修正する」で設問へ戻っているあいだ、まとめへ戻るためのボタン */
.c-btn--editback {
  display: block; margin: 2rem auto 0; min-height: 5.4rem;
  padding: 1.2rem 6rem 1.2rem 3.4rem; font-size: 1.5rem;
}
.p-result__key { font-size: 1.3rem; font-weight: 700; color: var(--blue); }
.p-result__val { font-size: 1.6rem; font-weight: 700; }
.p-result__val:empty::after { content: "未選択"; color: #9DB4D2; font-weight: 400; }
.p-result__lead {
  margin: 2.4rem 0 0; padding: 2rem 2.2rem; border-radius: 1rem;
  background: var(--pale); border-left: .6rem solid var(--blue);
  font-size: 1.55rem; font-weight: 700; line-height: 1.9;
}

.p-form {
  max-width: 92rem; margin-inline: auto;
  background: var(--white); border-radius: 1.4rem; box-shadow: var(--shadow-card);
  padding: 4rem 3.6rem;
}
.p-form__field { margin-bottom: 2.2rem; }
.p-form__label { display: flex; align-items: center; gap: .8rem; font-size: 1.45rem; font-weight: 700; color: var(--navy); margin-bottom: .7rem; }
.p-form__label .req {
  display: inline-block; padding: .1rem .9rem; border-radius: .4rem;
  background: var(--red); color: var(--white); font-size: 1.15rem; font-weight: 700;
}
.p-form input[type="text"], .p-form input[type="email"], .p-form input[type="tel"], .p-form select, .p-form textarea {
  width: 100%; font-family: inherit; font-size: 1.6rem;
  padding: 1.3rem 1.5rem; border: 1px solid #C7D6E8; border-radius: .7rem; background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.p-form input:focus, .p-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 .3rem rgba(0, 79, 185, .14); }
.p-form textarea { min-height: 11rem; resize: vertical; }
.p-form__note { font-size: 1.2rem; color: #7a8ca5; }
.p-form__hidden { display: none; }
.p-form__embed-note {
  background: var(--pale); border: .2rem dashed var(--sky-light); border-radius: 1rem;
  padding: 1.6rem 1.8rem; font-size: 1.3rem; color: var(--blue); margin-bottom: 2.6rem;
}

/* ==========================================================================
   無料相談CTA（プログレスバー右端の“よくある右上ボタン”）
   MV表示中は .l-sticky ごと隠れ、最終ステップでは wizard.js が非表示にする
   ========================================================================== */
.p-progress__cta {
  flex-shrink: 0; margin-left: .4rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.6rem; padding: .2rem 2.4rem; border-radius: 999px;
  background: var(--cv); color: var(--white);
  font-size: 1.4rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: .2s;
}
.p-progress__cta:hover { background: var(--white); color: var(--cv-edge); box-shadow: inset 0 0 0 .2rem var(--cv-edge); }

/* フォーム直前の「ご希望」選択（無料相談 or 出展申込）。
   選択内容はお問い合わせ内容に自動記載される */
.p-request { max-width: 92rem; margin: 0 auto 3.2rem; }
.p-request__ttl { margin: 0 0 1.4rem; text-align: center; font-size: 1.7rem; font-weight: 700; color: var(--navy); }

/* ==========================================================================
   フッター
   ========================================================================== */
/* フッター = コピーライト1行。MV下端と同じ青グラデバンド。
   （固定ボトムCTAは右上ボタンに移設したため、退避用の下余白は不要） */
.l-footer { background: linear-gradient(105deg, #2264E4 0%, #0A3EA8 100%); padding: 1.6rem 2rem; text-align: center; }
.l-footer__copy {
  margin: 0; color: var(--white);
  font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: .12em;
}
.l-footer a { color: var(--sky-light); }

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 1.5rem; }

  .p-progress { padding: .7rem 0; }
  .p-progress__dots { display: none; }
  .p-progress__count b { font-size: 1.8rem; }

  .l-section { padding: 5.2rem 0 6rem; }

  /* SPは大きめに。実測の空白帯 48.2〜55.2% に収まり、下端だけ写真の縁へわずかに掛かる */
  .p-fv__cue { font-size: 1.65rem; padding: 1.6rem 2.8rem; border-width: .25rem; gap: .9rem; }
  .p-q1 { padding: 4rem 0 5.4rem; }
  .p-stepnav--fv .c-btn { font-size: 1.6rem; }

  /* お悩みタイル：幅が狭いのでPC用の強制改行を解除し、文節単位の自動改行に任せる。
     4枚とも同じ高さに揃えて2×2をきれいに見せる */
  .p-menu__tiles { gap: 1rem; grid-auto-rows: 1fr; }
  .p-tile__label br, .p-tile__sub br { display: none; }
  .p-tile__label { font-size: 1.2rem; }
  .p-tile__sub { font-size: 1rem; }
  .p-tile { padding: 1.4rem .6rem 1rem; }
  .p-tile__body { padding: 1rem .6rem 1.1rem; }

  .p-choices, .p-choices--3 { grid-template-columns: 1fr; gap: 1.1rem; }
  .p-choice { font-size: 1.55rem; padding: 1.5rem 1.4rem 1.5rem 5.4rem; }
  .p-choice--rank { padding-right: 8.6rem; }
  .p-choice__rank { right: 1.1rem; font-size: 1.05rem; padding: .35rem .9rem; }
  .p-choice::before { left: 1.5rem; }
  .p-choice::after { left: 2.25rem; }

  .p-question { padding: 2.8rem 1.8rem 3.2rem; margin-top: 4.4rem; }

  .c-grid--2, .c-grid--3 { grid-template-columns: 1fr; }
  .p-numbers { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .p-media { grid-template-columns: 1fr; }
  .p-voices, .p-services { grid-template-columns: 1fr; gap: 2.4rem; }

  .p-point { padding: 5.6rem 1.8rem 2.8rem; }
  .p-point__num { font-size: 6.2rem; right: 1.2rem; }

  .p-video__play { width: 6rem; height: 6rem; }

  /* SPは縦並び。矢印も下向きに切り替え、カードの間に置く */
  .p-flow { grid-template-columns: 1fr; gap: 3rem; max-width: 44rem; }
  .p-flow__item:not(:last-child)::after {
    width: 1.9rem; height: 1.6rem;
    clip-path: polygon(0 0, 100% 0, 50% 100%);   /* 下向き三角 */
    /* 次のSTEPは「STEP番号ラベル＋カード」なので、見た目の隙間はグリッドgapより広い。
       ラベルぶんを含めた隙間の中央に来るよう下げる */
    top: auto; bottom: -4.2rem; right: auto; left: 50%; translate: -50% 0;
    animation-name: flowNudgeSp;
  }
  @keyframes flowNudgeSp { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(.4rem); opacity: 1; } }
  .p-flow__body { text-align: left; }
  .p-flow__txt { padding: 1.4rem 1.8rem 1.6rem; }
  .p-flow__txt b { display: inline; margin-right: .8rem; }
  /* SPは横並び（左に画像・右にテキスト）にして縦の伸びを抑える */
  .p-flow__body { flex-direction: row; align-items: center; }
  .p-flow__img { flex: 0 0 11rem; aspect-ratio: 1; }
  .p-flow__num { text-align: left; padding-left: .4rem; }

  /* SPは「日付＋エリア」を1行目にまとめ、右の余白を活かす（左寄り解消）。
     「問い合わせる」はカード右側の縦中央に置く */
  .p-schedule__row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "date area cta"
      "venue venue cta"
      "deadline deadline cta";
    align-items: center; gap: .3rem 1.2rem;
    padding: 1.5rem 1.8rem 1.5rem;
  }
  .p-schedule__date { grid-area: date; }
  .p-schedule__area { grid-area: area; }
  .p-schedule__venue { grid-area: venue; }
  /* 締切はラベルと日付を横並びに */
  .p-schedule__deadline { grid-area: deadline; text-align: left; }
  .p-schedule__deadline small { display: inline; margin-right: .8rem; }
  .p-schedule__cta { grid-area: cta; align-self: center; justify-self: end; }

  .p-nextyear { padding: 2.6rem 1.8rem; }
  .p-nextyear--main .p-nextyear__ttl { font-size: 2rem; }
  .p-schedule__closedlist { padding: .4rem 1rem 1.2rem; }
  .p-schedule__openttl { font-size: 1.35rem; }
  .p-nextyear__ttl { font-size: 1.9rem; }
  .p-nextyear__list { grid-template-columns: repeat(3, 1fr); gap: .6rem; }

  .p-service__head { gap: 1.2rem; }
  .p-service__thumb { flex-basis: 7.6rem; }

  .p-ctaband__person { display: none; }

  /* SPは「項目名（左）＋修正する（右）」を1行目、回答を2行目に置く。
     自動配置に任せると順番が入れ替わるため、行と列を明示する */
  .p-result__item { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: 1.1rem 1.5rem; align-items: center; }
  .p-result__key { grid-column: 1; grid-row: 1; justify-self: start; }
  .p-result__edit { grid-column: 2; grid-row: 1; font-size: 1.15rem; padding: .4rem 1.1rem; }
  .p-result__val { grid-column: 1 / -1; grid-row: 2; }
  .p-form { padding: 2.6rem 1.8rem; }

  .c-btn { font-size: 1.6rem; min-height: 6rem; padding: 1.2rem 6.6rem 1.2rem 4rem; width: 100%; }
  .c-btn--lg { min-width: 0; }
  .p-stepnav { gap: 1.2rem; }

  /* 導線の帯は横幅いっぱいに逃がす（丸帯のままだと文字が詰まるため） */
  .p-bridge { margin-top: 4.4rem; }
  .p-bridge__txt { display: block; padding: 1.4rem 1.8rem; border-radius: 1.6rem; }

  .p-ctaband__btns .c-btn { flex-basis: 100%; }

  /* 右上CTAはSPでは一回り小さく（プログレスバーの高さに収める） */
  .p-progress__cta { font-size: 1.25rem; min-height: 3.2rem; padding: .2rem 1.6rem; }

  .l-footer { padding: 1.4rem 1.6rem; }

}

@media (min-width: 768px) {
  .p-choices[data-qname="area"] { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; }
  .slide-text .slide-text-inner { opacity: 1; }
  /* 流れる帯は停止（無限アニメを .01ms にすると点滅するため個別指定） */
  .p-marquee__row { animation: none !important; }
  .p-marquee { overflow-x: auto; }
  /* 導線の帯も同様に停止し、光沢は隠す */
  .p-bridge__txt, .p-bridge__arrow { animation: none !important; }
  .p-bridge__txt::after { display: none; }
  .p-choice__rank { animation: none !important; }
  /* 浮遊アニメも停止し、静止時の見た目（影あり）を保つ */
  .p-fv__cue, .p-fv__cue::after { animation: none !important; }
}