/* =========================================================
   scarecrow 無料診断ページ — スタイルシート
   SWELL子テーマ page-shindan.php 専用
   ※ このファイルは lp-style.css と同時に読み込む前提。
     :root変数・.sc-header/.sc-footer/.sc-btn/.sc-eyebrow/.sc-h2等の
     共通スタイルは lp-style.css 側の定義を流用する。
     ここには診断ツール固有のコンポーネント（.sd-*）のみを定義する。

   ※確定仕様：Q1(種別)→Q2(体重帯)→Q3(年齢帯)→Q4(気になること・複数選択)→1商品収束。
   ========================================================= */

.sd-intro{ padding-bottom:40px; }

/* ---- プログレスバー（sd-intro内・白背景に収まる） ---- */
.sd-progress-wrap{ margin-bottom:0; }
.sd-progress{
  background:rgba(0,65,131,0.08); border-radius:99px;
  height:6px; overflow:hidden; position:relative;
}
.sd-progress__bar{
  position:absolute; left:0; top:0; height:100%;
  background:var(--sc-navy); border-radius:99px;
  transition:width .4s ease;
}
.sd-progress__label{
  display:block; text-align:right; font-size:12px;
  color:var(--sc-ink-mute); margin-top:8px; font-family:var(--sc-body);
}

/* ---- ステップ番号 ---- */
.sd-step__num{
  font-family:var(--sc-body); font-size:12px; font-weight:700;
  color:var(--sc-accent); letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 12px; text-align:center;
}

.sd-step{ text-align:center; }
.sd-q{
  font-family:var(--sc-head); font-size:24px; font-weight:700;
  color:var(--sc-navy); line-height:1.6; margin:0 0 36px;
}
.sd-q__sub{
  display:block; font-size:14px; font-weight:500;
  color:var(--sc-ink-mute); margin-top:6px;
}

/* ---- 選択肢ボタン（共通） ---- */
.sd-options{ display:flex; flex-direction:column; gap:12px; max-width:480px; margin:0 auto; }
.sd-options--stack{ flex-direction:column; }
.sd-options--grid2{
  flex-direction:row !important; gap:16px; justify-content:center;
  max-width:400px;
}

.sd-option{
  padding:20px; font-family:var(--sc-body); font-size:16px; font-weight:700;
  color:var(--sc-navy); background:#fff; border:1.5px solid rgba(0,65,131,0.14);
  border-radius:14px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  text-align:left;
}
.sd-option:hover{ border-color:var(--sc-navy); background:rgba(0,65,131,0.04); transform:translateY(-1px); }
.sd-option:focus-visible{ outline:2px solid var(--sc-accent); outline-offset:2px; }

/* Q1 種別：縦並びテキスト中央揃え */
.sd-option--species{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px 24px; gap:8px;
  min-width:140px; flex:1; max-width:180px;
}
.sd-option__icon{ font-size:15px; font-weight:900; color:var(--sc-navy); letter-spacing:.05em; }
.sd-option__note{ font-size:13px; font-weight:500; color:var(--sc-ink-mute); }

/* Q2・Q3 ラベル＋補足文の2段構成 */
.sd-option--withnote{
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; gap:5px;
}
.sd-option__label{ font-size:16px; font-weight:700; color:var(--sc-navy); }
.sd-option__note{ font-family:var(--sc-body); font-size:12.5px; font-weight:500; color:var(--sc-ink-mute); }

/* 戻るボタン */
.sd-back{
  background:none; border:none; color:var(--sc-ink-mute); font-size:13.5px;
  font-family:var(--sc-body); cursor:pointer; margin-top:20px;
  text-decoration:underline; text-underline-offset:3px; padding:4px; display:block; margin-inline:auto;
}
.sd-back:hover{ color:var(--sc-navy); }

/* ---- 結果画面 ---- */
.sd-result__head{ text-align:center; margin-bottom:32px; }

.sd-result__card{
  background:#fff; border:1px solid rgba(0,65,131,0.08); border-radius:16px;
  padding:32px; text-align:center; box-shadow:var(--sc-shadow); margin-bottom:32px;
}
.sd-result__img{
  width:auto; height:auto;
  max-width:308px; max-height:210px; /* 2026-07-20：診断結果の商品画像が小さいとのフィードバックにより140%へ拡大 */
  object-fit:contain; margin:0 auto 20px; display:block;
}
.sd-result__role{ font-size:15px; color:var(--sc-navy); line-height:1.8; margin:0 0 20px; font-weight:500; }

/* 給与量目安ボックス */
.sd-result__dose{
  background:rgba(0,65,131,0.04); border:1px solid rgba(0,65,131,0.10);
  border-radius:10px; padding:16px 20px; margin:0 0 20px; text-align:left;
}
.sd-result__dose-label{
  font-size:12px; font-weight:700; color:var(--sc-navy); letter-spacing:.05em;
  margin:0 0 6px; font-family:var(--sc-body);
}
.sd-result__dose-text{
  font-size:14px; color:var(--sc-navy); line-height:1.8; margin:0;
}
.sd-result__dose-text small{ font-size:12px; color:var(--sc-ink-mute); }

.sd-result__note{
  font-size:13px; color:var(--sc-ink-mute); line-height:1.8; margin:0;
  padding-top:16px; border-top:1px solid var(--sc-line); text-align:left;
}

.sd-ctas{ text-align:center; padding-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.sd-ctas__sub{ width:100%; margin-top:4px; font-size:13.5px; }
.sd-ctas__sub a{ color:var(--sc-navy); }

/* ヘッダーナビの現在地表示 */
.sc-nav a.is-current{ color:#fff; font-weight:700; border-bottom:2px solid var(--sc-accent); padding-bottom:3px; }

@media (max-width:680px){
  .sd-q{ font-size:20px; }
  .sd-options--grid2{ gap:12px; }
  .sd-option--species{ min-width:100px; padding:24px 16px; }
  .sd-option__icon{ font-size:13px; }
  .sd-result__dose{ padding:14px 16px; }
  .sd-result__img{ max-width:280px; max-height:182px; } /* 2026-07-20：同上、140%へ拡大 */
  .sd-ctas{ flex-direction:column; align-items:stretch; }
  .sd-ctas .sc-btn{ justify-content:center; }
}