/* 全体レイアウト */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", sans-serif;
  background: #ffffff;
  /* background-image:
    linear-gradient(135deg, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.7) 40%, rgba(238,243,251,0.9) 40%, rgba(238,243,251,0.9) 100%); */
  margin: 0;
  padding: 0px;
}
/* 1) padding込みで幅計算させる */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2) 画像がはみ出さない */
img {
  max-width: 100%;
  height: auto;
}

/* 3) 結果ページのラッパーがはみ出さない */
.screen-result .result-wrap,
.screen-result .result-lower {
  width: 100%;
  max-width: 100%;
}


.d-none{
  display: none;
}
#app {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

/* 共通レイアウト */
.grid {
  display: grid;
  gap: 16px;
}

/* カード（結果画面など） */
.card {
  background: #ffffff;
  border-radius: 24px;
  padding: 18px 18px 20px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

/* ボタン */
.btn {
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  background: #21407d;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 6px rgba(33, 64, 125, 0.2);
}

.btn[disabled] {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* 下部のメインボタン（次の設問へ 等） */
.btn-next {
  width: 70%;
  max-width: 260px;
  padding: 10px 16px;
  font-size: 14px;


  /* ここを追加（or 上書き） */
  display: block;
  margin: 0 auto;
}

/* テキストリンクボタン */
.btn-link {
  border: none;
  background: none;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

/* テキストだけの選択肢ボタン（Q3 / レベル / スタイル 共通） */
.option {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 16px;
  text-align: center;
  border-radius: 32px;
  padding: 18px 16px;
  background: #ffffff;
  border: 3px solid #ffffff;          /* ★通常時は枠線が見えないように白 */
  font-size: 16px;
  font-weight: 600;
  color: #1f3b78;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  transition: all 0.18s ease;
}

/* クリックして選択されたときの見た目 */
.option.selected {
  background: #ffffff;
  border-color: #21407d;              /* ★選択時だけ枠線が浮き出る感じ */
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.20);
  transform: translateY(-1px);
}

/* タップ時の軽い押し込み */
.option:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}
/* 行レイアウト（今は主に結果画面用で使用） */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.row-right {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* プログレス＋ヘッダー */
.q-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.q-index-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.q-index {
  font-size: 18px;
  font-weight: 800;
  color: #21407d;
}

.q-total {
  font-size: 12px;
  color: #9ca3af;
}

.progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.progress > div {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #21407d;
  transition: width 0.25s ease-out;
}

/* 入力系 */
input[type="text"],
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  box-sizing: border-box;
}

label {
  display: block;
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 4px;
}

/* 質問テキスト */
.q-title {
  font-weight: 700;
  font-size: 17px;
  margin: 4px 0 0;
  text-align: center;
  color: #374151;
  text-align: center;
}

.q-sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  text-align: center;
}

/* スタート画面 */
.start-wrap {
  min-height: 70vh;
  place-items: center;
}

.start-inner {
  gap: 12px;
  text-align: center;
}

.start-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

.start-lead {
  font-size: 13px;
  color: #4b5563;
  margin: 0;
}

.start-note {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
}

/* 結果見出しなど */
.result-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
  margin: 0 0 8px;
}

.result-main-title {
  font-size: 22px;
  font-weight: 900;
  margin: 6px 0 2px;
}

.result-stance-card {
  background: #e0ebff;
  border-radius: 24px;
  padding: 18px;
  text-align: center;
}

/* 画面下フッター（次へ／戻る／コピーライト） */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  text-align: center;
  background: transparent;
}

.footer-back {
  border: none;
  background: none;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 10px;
    background: transparent;
}

.footer-copy {
  font-size: 11px;
  color: #4b5563;
  margin-top: 4px;
}
.text-c{
  text-align: center;
}



/* トップページ */
.start-hero-wrap {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "YuGothic", "Yu Gothic", "Meiryo", sans-serif;
}

/* 黄色い背景＋Sマークのパターン */
.start-hero-bg {
  position: absolute;
  inset: 0;
  background-color: #ffe633; /* 近い黄色。画像と合わせたい場合は back-01.png に差し替え */
  background-image: url("./back-01.png");
  background-size: cover;
  background-position: center bottom;
  z-index: 0;
}

.start-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* タイトル */
.start-hero-head {
  display: flex;
  justify-content: flex-start;
}

.start-hero-title-block {
  color: #1f3b78;
}

.start-hero-60 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  line-height: 1;
}

.start-hero-60-num {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.start-hero-60-unit {
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 6px;
}

.start-hero-main-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-top: 4px;
}

.start-hero-powered {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
}

.start-hero-logo {
  height: 20px;
  width: auto;
}

/* イラスト */
.start-hero-illust {
  display: flex;
  justify-content: center;
}

.start-hero-illust-img {
  max-width: 200px;
  width: 80%;
  height: auto;
}

/* 説明文 */
.start-hero-text-block {
  font-size: 12px;
  line-height: 1.8;
  color: #1a1a1a;
}

.start-hero-text {
  margin: 0;
}

/* ボタン */
.start-hero-btn-wrap {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.start-hero-btn {
  width: 100%;
  max-width: 320px;
  border-radius: 999px;
  font-size: 16px;
  padding: 14px 16px;
}
.content-c{
  margin:  0 auto;
}

/* 質問ページ共通ラッパー（背景） */
.question-wrap {
  gap: 10px;
  padding: 24px 16px 40px;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #e9eff5;
  background-image: url("./back-02.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* Q1などの選択肢リスト */
.option-list {
  gap: 16px;
}

/* 画像付きカードボタン（通常状態：イメージ1） */
.option-card {
  width: 100%;
  border-radius: 32px;
  padding: 16px 16px 20px;
  background: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}

/* カード内の画像 */
.option-card-img {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
}

/* ラベルテキスト（必要なら font-size を小さくしてもOK） */
.option-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f3b78;
  text-align: center;
  line-height: 1.4;
}

/* ホバー時ちょっと浮く感じ */
.option-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

/* クリック後（選択状態：イメージ2） */
.option-card.selected {
  border-color: #24457f;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
}

/* 選択時ラベル色を少し濃く */
.option-card.selected .option-card-label {
  color: #1b366e;
}

/* 画像内に文字を入れた場合、選択肢下のテキストを消す */
/* .option-card-label {
  display: none !important;
} */

/* 質問横のイラスト（Q2など） */
.q-illust-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 12px;
}

.q-illust-img {
  max-width: 220px;
  width: 55%;
  height: auto;
}

/* 質問タイトル＋イラスト横並び（Q2用） */
.q-title-illust {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start; /* ← 上揃えにする */
  padding: 0 40px;
}

.q-title-block {
  flex: 1;
}

/* 質問タイトルを少し左寄せに */
.q-title-illust .q-title {
  text-align: left;
  line-height: 1.6;
  position: absolute;
}

/* サイドのイラスト */
.q-title-illust-img-wrap {
  flex-shrink: 0;
}

.q-title-illust-img {
  max-width: 200px;
  width: 45vw;
  height: auto;
  /* margin-top: 24px;   */
  /* ← ここで足の位置に合わせて全体を少し下げる */
}

/* 画面が狭いときは縦並びに切り替え（オプション） */
@media (max-width: 480px) {
  .q-title-illust {
    flex-direction: column;
    align-items: flex-start;
  }

  .q-title-illust-img {
    align-self: flex-end;
    width: 60vw;
    /* margin-top: 12px;  */
    /* モバイル用には少し弱めの値でもOK */
  }

  .q-title-illust .q-title {
    text-align: left;
  }
}


.compare-block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
}

.compare-img {
  width: 80%;
  max-width: 400px;
}

/* Q3 の真ん中のイラスト用レイアウト */
.q-mid-illust {
  display: flex;
  justify-content: center;
  margin: 16px 0 20px;
}

/* 画像が画面からはみ出ないように制御 */
.q-mid-illust-img {
  display: block;
  max-width: 420px;   /* PC でもこれ以上大きくならない */
  width: 80%;         /* スマホでは 8 割くらいの幅に */
  height: auto;
}
.q1-choice-1-label,.q1-choice-2-label,.q2-choice-1-label,.q2-choice-2-label,.q2-choice-3-label{
  display: none;
}
.q2-choice-1,.q2-choice-2,.q2-choice-3{
  padding: 0;
}

.result-card {
  background: #fff;
  border-radius: 24px;
  padding: 16px 18px 16px;
  /* box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); */
}
.result-boot-block{
  padding-bottom: 38px;
}

.result-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px;
}

.result-section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

.result-main-stance {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 4px 0 8px;
}

.result-text {
  font-size: 13px;
  margin: 4px 0;
  text-align: center;
}

.result-note {
  font-size: 11px;
  color: #6b7280;
  margin-top: 6px;
  text-align: center;
}



.result-illust-wrap {
  margin: 6px auto 6px;
  text-align: center;
}

.result-illust-board {
  max-width: 320px;
  width: 100%;
  height: auto;
}

.result-illust-half {
  max-width: 220px;
  width: 100%;
  height: auto;
}

.result-illust-full {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.result-illust-logo {
  max-width: 160px;
  width: 100%;
  margin: 0 auto;
  display: block;
}


/* スタンスカード内のレイアウト */
.stance-board {
  margin: 8px auto 10px;
  max-width: 320px;
  text-align: center;
}

.stance-board-img {
  width: 100%;
  height: auto;
  display: block;
}


/* 推奨ボード長の表示 */
.board-length-block {
  text-align: center;
  margin: 4px 0 10px;
}

.board-length-label {
  font-size: 13px;
  margin-bottom: 2px;
}

.board-length-value {
  font-size: 22px;
  font-weight: 700;
  color: #243b6b;
}

/* 板の形状／板の硬さの横並び */
.board-info-row {
  display: flex;
  justify-content: space-around;
  gap: 24px;
  margin-top: 12px;
}

.board-info-col {
  flex: 1;
  text-align: center;
}

.board-info-label {
  font-size: 13px;
  margin-bottom: 2px;
}

.board-info-value {
  font-size: 18px;
  font-weight: 700;
  color: #243b6b;
}

/* ボードイラストの余白を少し整える */
.result-illust-board {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 4px auto 0;
  display: block;
}


/* ブーツ結果ブロックのレイアウト */
.result-boot-block .boot-result-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-top: 0px;
}

.result-boot-block .boot-result-col {
  flex: 1;
  text-align: center;
}
.result-boot-block .boot-result-col img{
  height: 130px;
  width: auto;
}
.result-boot-block .boot-result-col .boot-value{
  height: 20px;
}
.result-boot-block .boot-illust {
  max-width: 160px;
  width: 100% !important;
  height: auto !important;
}

/* 「ブーツサイズ」「ブーツの固さ」 */
.result-boot-block .boot-label {
  margin-top: 12px;
  font-size: 14px;
  color: #1f3151;
}

/* 「26cm」「柔らかめ」など数値・結果部分 */
.result-boot-block .boot-value {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #1f3151;
}



/* ビンディング結果カード */
/* .result-binding-card {
  margin-top: 24px;
} */

/* 中央寄せイラスト（他の結果でも使い回し可） */
.result-illust-center {
  max-width: 260px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 「ビンディングの固さ」＋結果 の縦並びブロック */
.result-flex-block {
  text-align: center;
  margin-top: 16px;
}

.result-flex-label {
  font-size: 14px;
  line-height: 1.6;
  color: #0f3566; /* 既存の青に合わせて調整してください */
  margin-bottom: 4px;
}

.result-flex-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #0f3566;
  margin-top: 4px;
}

/* ===========================
   ロング矢印（Horizontal Arrow）
   =========================== */

.stance-arrow-long {
  width: 80%;              /* 長さ調整：お好みで変更可 */
  max-width: 260px;
  height: 12px;            /* 位置調整用の高さ */
  margin: 0 auto 8px;
  position: relative;
}

/* 水平線 */
.stance-arrow-long::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;              /* 三角の幅に合わせる */
  width: calc(100% - 14px);
  height: 3px;
  background: #6b7280;     /* 線の色（グレー） */
  transform: translateY(-50%);
}

/* 左向き三角形（レギュラー） */
.stance-arrow-regular.stance-arrow-long::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 14px solid #6b7280;  /* 三角形（右向き） */
}

/* 右向き三角形（グーフィー） */
.stance-arrow-goofy.stance-arrow-long::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 14px solid #6b7280; /* 三角形（左向き） */
}

/* ニュートラル（↔︎）は左右に三角を配置 */
.stance-arrow-neutral.stance-arrow-long::before,
.stance-arrow-neutral.stance-arrow-long::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.stance-arrow-neutral.stance-arrow-long::before {
  left: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 14px solid #6b7280;
}

.stance-arrow-neutral.stance-arrow-long::after {
  right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 14px solid #6b7280;
}


/* 結果ページ全体の背景 */
.result-wrap {
  background-color: #e9eff5;   /* デザインの水色 */
  padding: 32px 16px 40px;
  box-sizing: border-box;
  display: grid;
  gap: 24px;
}


/* 1つの結果ブロック（見出し＋カード） */
.result-section {
  max-width: 460px;
  margin: 0 auto;
}



/* 一番上の「診断結果」用 */
.result-title-main {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}

/* 「あなたのスタンスは…」「あなたにオススメの板は…」など */
.result-title-sub {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}






/* ===== 結果ページ全体レイアウト ===== */

.result-wrap {
  padding: 32px 12px 40px;
  box-sizing: border-box;
  background-color: #e9eff5;
  background-image: url("./back-02.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  gap: 24px;
}

.result-section {
  max-width: 460px;
  margin: 0 auto 0px;
  width: 100%;
}

.result-section-head {
  text-align: center;
  margin: 12px 0 10px;
}

.result-info-kicker {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
   color: #243b6b;
}

/* 大見出し */
.result-info-subtitle {
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  color: #243b6b; /* 濃いネイビー寄せ */
  letter-spacing: 0.02em;
}

.result-title-main {
  font-size: 25px;
  font-weight: 700;
  margin: 0;
  margin-bottom: 5px;
}

.result-title-sub {
  font-size: 12px;
  color: #4b5563;
  margin-top: 2px;
}


/* ===== 中盤以降の情報セクション共通 ===== */



.result-info-title {
  font-size: 14px;
  font-weight: 700;
  white-space: pre-line; /* 改行をそのまま反映 */
  line-height: 1.6;
  color: #0f3566;
  margin: 0;
}




.result-info-card {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.result-info-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* STANCER 図カード */

.result-stancer-card {
  background: #e9eff5;
  border-radius: 24px;
  padding: 40px 30px 40px; /* ← 少しコンパクト */
}

.result-stancer-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  max-width: 420px;   /* ← ここ重要 */
  margin: 0 auto 12px;
}

.result-info-caption {
font-size: 14px;
  line-height: 1.6;
  color: #334155;
  margin: 14px 0 0;
  text-align: left;
}

/* 店舗検索ボタン & マップ */

.btn-store-search {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 12px;
  display: block;
  font-size: 13px;
}

.result-map-card {
  padding: 0;
  overflow: hidden;
}

.result-map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* 雪山NAVI ロゴ */

.result-navi-logo {
  max-width: 220px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}
/* 上部：今まで通り水色＋背景画像 */
.result-wrap {
  padding: 32px 12px 40px;
  box-sizing: border-box;
  background-color: #e9eff5;
  background-image: url("./back-02.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  gap: 24px;
}

/* 中盤以降（セッティング解説～雪山NAVI）：全面白背景ゾーン */
.result-lower {
  background: #ffffff;
  /* margin: 16px -12px -8px;    */
  /* 左右いっぱいまで白にしたいのでマイナスマージン */
  padding: 24px 12px 32px;
}

/* result-info-section はそのままでOK（中央寄せ） */
.result-info-section {
  max-width: 460px;
  margin: 0 auto 24px;
  margin-bottom: 40px; /* デフォルトより詰める */
}

/* 画像を白カードに乗せる */
.result-info-card {
  padding: 16px 14px 18px;
  background: #ffffff;
  border-radius: 24px;
  /* box-shadow: 0 4px 6px rgba(15, 23, 42, 0.06); */
}


/* スマホ用微調整 */
@media (max-width: 480px) {
  body {
    padding: 0px;
  }
  .q-title-illust {
    padding: 0 15px;
  }
  .q-title-illust-img-wrap{
    margin-left: auto;
  }
  /* Q3 の真ん中のイラスト用レイアウト */
.q-mid-illust {
  display: flex;
  justify-content: center;
  margin: 0px 0 0px;
}
}


/* ▼トップ画面（60秒スノボ診断）だけ黄色 */
body.screen-top {
  background-color: #F6E002; /* 好きな黄色に変えてOK */
}

/* ▼質問画面・結果画面は水色 */
body.screen-qa {
  background-color: #E9EDF3; /* いま使っている水色に合わせてOK */
}

/* Q3 中央イラスト：クリックしても縦に伸びないよう固定 */
.q-mid-illust {
  width: 100%;
  max-width: 520px;      /* 必要なら調整 */
  margin: 16px auto 8px;
}

.q-mid-illust-img {
  display: block;
  width: 100%;
  height: auto !important;   /* これで縦伸びを強制的に止める */
  max-height: 360px;         /* 必要なら調整（スマホで暴れない） */
  object-fit: contain;       /* 枠内で比率維持 */
}


/* ===== Q6: あなたのスタイル（結果表示） ===== */

.result-style-section {
  max-width: 460px;
  margin: 0px auto 24px;
  text-align: center;
   background-color: #e9eff5;
  padding: 18px 16px 20px;
}
@media (max-width: 480px) {
  .result-style-section {
  padding: 18px 0px 20px;
}
}

.result-style-kicker {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #0f3566;
}

.result-style-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0f3566;
}

.result-style-img-wrap {
  display: flex;
  justify-content: center;
}

.result-style-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  background: #ffffff;
  border-radius: 14px;
}

.result-style-desc {
  margin: 14px 10px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
  text-align: left;
}



/* ===== スタイル別インフルエンサー ===== */
.influencer-section{
  max-width: 520px;
  margin: 22px auto 28px;
  text-align: center;
}

.influencer-title{
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 800;
  color: #0f3566;
}

.influencer-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  justify-items: center;
}

.influencer-card{
  width: 100%;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.influencer-avatar-wrap{
  max-width:120px;
  max-height: 120px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.influencer-avatar{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.influencer-name{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #0f3566;
}

.influencer-ig-link{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
}

.influencer-ig-icon{
  width: 30px;
  height: 30px;
  display: block;
}

.influencer-ig-link.is-disabled{
  opacity: 0.35;
  pointer-events: none;
}


.influencer-avatar-link { display: inline-block; }
.influencer-avatar-link { cursor: pointer; }

/* 雪山応援ナビ */
.result-navi-section {
  text-align: center;
  margin-bottom: 0px;
}

.result-navi-title {
  font-size: 20px;
  font-weight: 700;
  color: #2a3f7a; /* 画像の青っぽい色 */
  margin-bottom: 12px;
  
}

.result-navi-text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 24px;
  margin-left: 10px;
  margin-right: 10px;
}
@media (max-width: 480px) {
  .result-navi-text {
  margin-left: 15px;
  margin-right: 15px;
}
}

.result-navi-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}

.result-navi-logo {
  max-width: 240px;
  width: 100%;
  height: auto;
}

/* 見出し：スノボ上達のカギはセッティングに?! */
.result-reason-head{
  text-align: center;
  margin: 18px 0 14px;
}

.result-reason-title{
  font-size: 18px;        /* 好みで調整OK */
  font-weight: 800;
  letter-spacing: .02em;
 color: #243b6b;       /* 既存のネイビーに合わせる */
  margin: 0 0 10px;
}

/* 黄色ライン */
.result-reason-underline{
  width: min(520px, 86%);
  height: 8px;
  background: #F2E04D;    /* 既存の黄色に合わせて調整OK */
  border-radius: 999px;
  margin: 0 auto;
}

.result-navi-link {
  display: inline-block;
}

.result-navi-link:hover {
  opacity: 0.85;
}

/* 通常は透明 */
.footer {
  background: transparent;
}

/* 結果ページだけの .result-wrap に適用 */
body.screen-result .result-wrap {
  /* ここに書く */
  background-image: none;
  
}


/* あなたのスタイル＋インフルエンサーを一体化 */
.result-style-block {
  background-color: #e9eff5;
  padding: 18px 16px 18px;
}

body.result-wrap{
  background-image: none;
}

.start-hero-title-logo {
  width: 100px;      /* 好みで調整 */
  max-width: 80%;
  height: auto;
  margin: 16px auto 16px;
  display: block;
}

.option-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.option-label {
  font-size: 18px;      /* 右目 / 左目 */
  font-weight: 700;
}

.option-sublabel {
  font-size: 12px;      /* ← ここを自由に調整 */
  /* color: #64748b; */
  margin-top: 4px;
  line-height: 1.4;
}

.flex-sub {
  display: block;
  font-size: 0.75em; /* ←ここだけ小さく調整 */
  line-height: 1.2;
  color: #243b6b;
}

/* * { outline: 1px solid rgba(255,0,0,.2); } */

.result-reason-text{
  color: #243b6b;
  padding: 0 10px;
  font-size: 13px;
  text-align: justify;
  margin: 0px;
}

.result-main-stance {
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
}

.result-main-stance .stance-main {
  display: block;
  color: #243b6b;
}

.result-main-stance .stance-sub {
  display: block;
  margin-top: 6px;
  font-size: 12px;     /* ← 小さく表示 */
  font-weight: 600;
  color: #243b6b;
}