/* ============================
   FIELD DIAGNOSIS (クリヤマフィールド診断)

   設問画面: Figma 実測 (1440 幅) で本番デザイン適用済み
     背景 1440x878 / タイトル 564x233 (y=61) / 設問 y=376 / ボタン 1240x86 (y=462, 588)
   結果画面: 暫定表示。デザイン確定後に差し替える

   1440〜768px はコンテンツ幅 1240 を基準に vw で比例縮小、767px 以下は SP レイアウト。
============================ */

/* display 指定が hidden 属性 (UA の display:none) に勝ってしまうため打ち消す。
   .fd__quiz / .fd__result / .fd-modal の出し分けは hidden 属性で行う */
.fd [hidden]:not(.fd__back),
.fd-modal[hidden] {
  display: none !important;
}

/* 「前の質問へ戻る」は Q1 でも場所だけ残す。
   display:none にすると Q1→Q2 でモーダルの高さが変わり、背景の拡大率が動いてしまう */
.fd__back[hidden] {
  visibility: hidden;
}

/* --- 診断ブロック本体 --- */
.fd {
  position: relative;
  background-image: url(../../images/field-diagnosis/fd_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* Figma: 上 61 / 下 878-674=204。
     下余白のうち 61px 分は「前の質問へ戻る」が使うので、その分を引いて
     全体の高さを Figma の 878 に保つ */
  padding-top: clamp(24px, calc(61 / 1440 * 100vw), 61px);
  padding-bottom: clamp(20px, calc(143 / 1440 * 100vw), 143px);
}
@media (max-width: 767px) {
  .fd {
    padding-top: 32px;
    padding-bottom: 24px;
  }
}

.fd__inner {
  /* Figma: 1440 の中にコンテンツ 1240 + 左右 100 */
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, calc(100 / 1440 * 100vw), 100px);
}
@media (max-width: 767px) {
  .fd__inner {
    max-width: 500px;
    padding-inline: 30px;
  }
}

.fd__noscript {
  padding: 16px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 14px;
  text-align: center;
}

/* --- タイトル (7問でわかる！クリヤマフィールド診断) --- */
.fd__title {
  width: clamp(240px, calc(564 / 1440 * 100vw), 564px);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .fd__title {
    width: 260px;
  }
}

/* --- 設問文 --- */
.fd__question {
  /* Figma: タイトル下端 294 → 設問上端 376 */
  margin-top: clamp(28px, calc(82 / 1440 * 100vw), 82px);
  color: #000;                    /* Figma 実測。本文色 (--color-text #231815) ではなく純黒 */
  font-size: clamp(16px, calc(30 / 1440 * 100vw), 30px);
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;               /* Figma: 30px の行に対してテキスト枠 36px */
  text-align: center;
}
@media (max-width: 767px) {
  .fd__question {
    margin-top: 28px;
    font-size: 16px;
    letter-spacing: 0.08em;
    line-height: 1.5;             /* SP は折り返す想定なので広げる */
    /* 2行になる設問があるので常に2行分確保し、設問ごとに高さが変わらないようにする */
    min-height: calc(16px * 1.5 * 2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- 選択肢 --- */
.fd__choices {
  /* Figma: 設問下端 412 → ボタン上端 462 */
  margin-top: clamp(20px, calc(50 / 1440 * 100vw), 50px);
}
@media (max-width: 767px) {
  .fd__choices {
    margin-top: 24px;
  }
}

.fd__choice + .fd__choice {
  margin-top: clamp(16px, calc(40 / 1440 * 100vw), 40px);
}
@media (max-width: 767px) {
  .fd__choice + .fd__choice {
    margin-top: 16px;
  }
}

.fd__choice-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(56px, calc(86 / 1440 * 100vw), 86px);
  /* Figma: A マーク左端 38 / テキスト左端 109 */
  padding-inline: clamp(16px, calc(38 / 1440 * 100vw), 38px);
  background-color: var(--color-white);
  border-radius: 8px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
  color: var(--color-primary);
  font-size: clamp(14px, calc(30 / 1440 * 100vw), 30px);
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-align: left;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
@media (max-width: 767px) {
  .fd__choice-btn {
    /* 選択肢も2行になるものがあるので2行分を確保する (14px × 1.4 × 2 + 上下 padding) */
    min-height: calc(14px * 1.4 * 2 + 28px);
    padding: 14px 16px;
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    letter-spacing: 0.05em;
  }
}

@media (hover: hover) {
  .fd__choice-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
  }
}

/* 前の設問へ戻ったときに、前回の選択が分かるようにする */
.fd__choice-btn.is-selected {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.fd__choice-mark {
  flex-shrink: 0;
  /* Figma: 38 → 109 の 71px 分を A/B マークの領域として確保する */
  width: clamp(32px, calc(71 / 1440 * 100vw), 71px);
  font-weight: 700;
}

/* reset.css が span を font-weight: normal にするため、子要素にも明示する */
.fd__choice-text,
.fd__question-no,
.fd__question-text {
  font-weight: 700;
}
@media (max-width: 767px) {
  .fd__choice-mark {
    width: 28px;
  }
}

.fd__back {
  display: block;
  margin-top: clamp(20px, calc(40 / 1440 * 100vw), 40px);
  margin-inline: auto;
  color: var(--color-primary);
  font-size: 14px;
  text-decoration: underline;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .fd__back:hover {
    opacity: 0.7;
  }
}

/* ============================
   RESULT (診断結果 / 4タイプ)

   Figma 実測 (1440 幅・フレーム高 3757):
     診断結果ラベル y=411 / タイプ 632 / キーワード 1192 / 価値 1539 / 記事 2821 / ボタン 3611
   コンテンツ幅は設問画面と同じ 1240。1440〜768px は 1440 基準で vw 比例縮小、
   767px 以下は SP レイアウト。

   4タイプ分をあらかじめ出力しておき、JS が該当する1枚の hidden を外す。
============================ */
.fd__result {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
}

.fd-result {
  /* 内側の実測値をまとめて持つ。SP では下の @media で上書きする */
  --fd-notch: clamp(10px, calc(17.915 / 1440 * 100vw), 17.915px);   /* 白ボックスの四隅えぐれ半径 */
  --fd-shadow: drop-shadow(6.754px 6.754px 9.649px rgba(0, 0, 0, 0.2));
  --fd-gradient: linear-gradient(90deg, #013887 0%, #003B8A 24.3%, #004796 48.5%, #005CA9 72.8%, #0077C4 96.9%, #007CC8 100%);
  --fd-heading: #00A0E9;            /* 見出しの水色 (Figma 実測) */

  text-align: center;
}
@media (max-width: 767px) {
  .fd-result {
    --fd-notch: 10px;
    --fd-shadow: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
  }
}

/* --- 「診断結果」ラベル --- */
.fd-result__badge {
  /* Figma: タイトル下端 293.7 → ラベル上端 411 */
  width: clamp(180px, calc(376 / 1440 * 100vw), 376px);
  margin: clamp(40px, calc(117 / 1440 * 100vw), 117px) auto 0;
}
@media (max-width: 767px) {
  .fd-result__badge {
    width: 180px;
    margin-top: 32px;
  }
}

/* --- 白ボックス (四隅えぐれ・枠線なし・影のみ) ---
   影がマスクで切れないよう、マスクは ::before に持たせ、filter は親に掛ける
   (filter → mask の順に適用されるため、同一要素だと影が刈り取られる) */
.fd-result__box {
  position: relative;
  z-index: 0;
  padding-inline: clamp(16px, calc(50 / 1440 * 100vw), 50px);
  text-align: center;
}
@media (max-width: 767px) {
  .fd-result__box {
    padding-inline: 18px;
  }
}

.fd-result__box-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: var(--fd-shadow);
  pointer-events: none;
}

.fd-result__box-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-white);

  -webkit-mask:
    radial-gradient(var(--fd-notch) at 0    0,    #0000 98%, #000) 0    0,
    radial-gradient(var(--fd-notch) at 100% 0,    #0000 98%, #000) 100% 0,
    radial-gradient(var(--fd-notch) at 0    100%, #0000 98%, #000) 0    100%,
    radial-gradient(var(--fd-notch) at 100% 100%, #0000 98%, #000) 100% 100%;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  mask:
    radial-gradient(var(--fd-notch) at 0    0,    #0000 98%, #000) 0    0,
    radial-gradient(var(--fd-notch) at 100% 0,    #0000 98%, #000) 100% 0,
    radial-gradient(var(--fd-notch) at 0    100%, #0000 98%, #000) 0    100%,
    radial-gradient(var(--fd-notch) at 100% 100%, #0000 98%, #000) 100% 100%;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

/* --- ボックス共通の見出し (水色・字間広め) --- */
.fd-result__lead,
.fd-result__heading {
  color: var(--fd-heading);
  font-size: clamp(15px, calc(30.877 / 1440 * 100vw), 30.877px);
  font-weight: 900;
  letter-spacing: 0.35em;
  /* 字間の分だけ右に寄るので、1文字分ぶん戻して光学的に中央へ */
  text-indent: 0.35em;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .fd-result__lead,
  .fd-result__heading {
    font-size: 14px;
    letter-spacing: 0.15em;
    text-indent: 0.15em;
  }
  /* 「「◯◯タイプ」に知ってほしいクリヤマ」だけ長く、SP では2行になる。
     末尾に「ヤマ」だけ残らないよう字間を詰めて行を均す */
  .fd-result__box--articles .fd-result__heading {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    text-wrap: balance;
  }
}

/* 見出し下の罫線 */
.fd-result__heading::after {
  content: "";
  display: block;
  width: calc(947.5 / 1140 * 100%);
  height: clamp(1px, calc(3 / 1440 * 100vw), 3px);
  margin: clamp(14px, calc(32 / 1440 * 100vw), 32px) auto 0;
  background-color: var(--color-primary);
}
@media (max-width: 767px) {
  .fd-result__heading::after {
    width: 100%;
    margin-top: 14px;
  }
}

/* ----------------------------------------------------------
   1. あなたのタイプは…
   ---------------------------------------------------------- */
.fd-result__box--type {
  /* Figma: ラベル下端 523.3 → ボックス上端 632.1 */
  margin-top: clamp(36px, calc(109 / 1440 * 100vw), 109px);
  padding-top: clamp(20px, calc(44 / 1440 * 100vw), 44px);
  padding-bottom: clamp(24px, calc(62 / 1440 * 100vw), 62px);
}
@media (max-width: 767px) {
  .fd-result__box--type {
    margin-top: 28px;
    padding-top: 24px;
    padding-bottom: 28px;
  }
}

/* タイプ名の紺グラデ帯。幅は文字数に追従する (Figma も文字数ぶんのハグ) */
.fd-result__name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin-top: clamp(16px, calc(36 / 1440 * 100vw), 36px);
  padding-block: clamp(10px, calc(24 / 1440 * 100vw), 24px);
  padding-left: clamp(14px, calc(38.6 / 1440 * 100vw), 38.6px);
  padding-right: calc(clamp(14px, calc(38.6 / 1440 * 100vw), 38.6px) - 0.35em);
  background: linear-gradient(90deg, #013887 0%, #017AC6 100%);
  color: var(--color-white);
  font-size: clamp(17px, calc(48.245 / 1440 * 100vw), 48.245px);
  font-weight: 900;
  letter-spacing: 0.35em;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .fd-result__name {
    margin-top: 14px;
    padding-block: 10px;
    padding-left: 14px;
    padding-right: calc(14px - 0.1em);
    /* 最長 16文字 (提案者・推進者) が1行に収まる上限。
       字間 0.1em 込みで 1文字 ≒ 1.1em、外側の余白が計 124px + 安全マージン 8px */
    font-size: clamp(12px, calc((100vw - 132px) / 17.4), 16px);
    letter-spacing: 0.1em;
  }
}

/* 開拓型／課題発見型／個人突破型 */
.fd-result__axis {
  margin-top: clamp(12px, calc(32 / 1440 * 100vw), 32px);
  color: var(--color-primary);
  font-size: clamp(14px, calc(30.877 / 1440 * 100vw), 30.877px);
  font-weight: 900;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .fd-result__axis {
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }
}

/* 第3軸だけ JS が差し替えるので span で切り出している。
   reset.css の span { font-weight: normal } が親からの継承に勝ってしまい、
   ここだけ 900 → 400 に落ちるため打ち消す */
.fd-result__axis-third {
  font-weight: inherit;
}

/* 軸の下の罫線 */
.fd-result__axis::after {
  content: "";
  display: block;
  width: calc(846.7 / 1140 * 100%);
  height: clamp(1px, calc(1.93 / 1440 * 100vw), 1.93px);
  margin: clamp(12px, calc(25 / 1440 * 100vw), 25px) auto 0;
  background-color: var(--color-primary);
}
@media (max-width: 767px) {
  .fd-result__axis::after {
    width: 100%;
    margin-top: 14px;
  }
}

.fd-result__body {
  width: min(100%, 823px, calc(823 / 1440 * 100vw));
  margin-inline: auto;
  margin-top: clamp(14px, calc(23 / 1440 * 100vw), 23px);
  color: var(--color-primary);
  font-size: clamp(12px, calc(23.158 / 1440 * 100vw), 23.158px);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.667;
}
@media (max-width: 767px) {
  .fd-result__body {
    width: 100%;
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.8;
  }
}

/* ----------------------------------------------------------
   2. ◯◯タイプ (3キーワード)
   ---------------------------------------------------------- */
.fd-result__box--keywords {
  /* Figma: タイプボックス下端 1130.7 → 1192.0 */
  margin-top: clamp(24px, calc(61 / 1440 * 100vw), 61px);
  padding-top: clamp(20px, calc(43 / 1440 * 100vw), 43px);
  padding-bottom: clamp(24px, calc(66 / 1440 * 100vw), 66px);
}
@media (max-width: 767px) {
  .fd-result__box--keywords {
    margin-top: 24px;
    padding-top: 24px;
    padding-bottom: 26px;
  }
}

.fd-result__keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, calc(26 / 1440 * 100vw), 26px);
  margin-top: clamp(16px, calc(37 / 1440 * 100vw), 37px);
}
@media (max-width: 767px) {
  .fd-result__keywords {
    /* 「長期パートナーシップ」など横並びだと縮みすぎるので縦積み */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
  }
}

.fd-result__keyword {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(150px, calc(270.17 / 1440 * 100vw), 270.17px);
  padding-block: clamp(6px, calc(10 / 1440 * 100vw), 10px);
  padding-left: clamp(14px, calc(33.77 / 1440 * 100vw), 33.77px);
  padding-right: calc(clamp(14px, calc(33.77 / 1440 * 100vw), 33.77px) - 0.2em);
  background: var(--fd-gradient);
  border-radius: 999px;
  color: var(--color-white);
  font-size: clamp(14px, calc(28.947 / 1440 * 100vw), 28.947px);
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .fd-result__keyword {
    width: 100%;
    min-width: 0;
    padding-block: 8px;
    padding-left: 16px;
    padding-right: calc(16px - 0.1em);
    font-size: 14px;
    letter-spacing: 0.1em;
  }
}

/* ----------------------------------------------------------
   3. クリヤマで発揮できる価値
   ---------------------------------------------------------- */
.fd-result__box--value {
  /* Figma: キーワードボックス下端 1465.2 → 1539.1 */
  margin-top: clamp(24px, calc(74 / 1440 * 100vw), 74px);
  padding-top: clamp(20px, calc(38 / 1440 * 100vw), 38px);
  padding-bottom: clamp(16px, calc(29 / 1440 * 100vw), 29px);
}
@media (max-width: 767px) {
  .fd-result__box--value {
    margin-top: 24px;
    padding-top: 24px;
    padding-bottom: 20px;
  }
}

.fd-result__value {
  margin-top: clamp(14px, calc(31 / 1440 * 100vw), 31px);
  color: var(--color-primary);
  font-size: clamp(18px, calc(48.245 / 1440 * 100vw), 48.245px);
  font-weight: 900;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .fd-result__value {
    margin-top: 16px;
    font-size: clamp(15px, calc((100vw - 104px) / 13.1), 20px);
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }
}

/* BE ACTIVE 円形図 (タイプごとに差し替え。背景の M マークも焼き込み済み) */
.fd-result__beactive {
  width: calc(1069.24 / 1140 * 100%);
  max-width: 1069.24px;
  margin: clamp(12px, calc(16 / 1440 * 100vw), 16px) auto 0;
}
@media (max-width: 767px) {
  .fd-result__beactive {
    width: 100%;
    margin-top: 16px;
  }
}

.fd-result__beactive img {
  aspect-ratio: 2139 / 1940;
}

/* ----------------------------------------------------------
   4. 「◯◯タイプ」に知ってほしいクリヤマ
   ---------------------------------------------------------- */
.fd-result__box--articles {
  /* Figma: 価値ボックス下端 2752.2 → 2821 */
  margin-top: clamp(24px, calc(69 / 1440 * 100vw), 69px);
  padding-top: clamp(20px, calc(45 / 1440 * 100vw), 45px);
  padding-bottom: clamp(24px, calc(81 / 1440 * 100vw), 81px);
}
@media (max-width: 767px) {
  .fd-result__box--articles {
    margin-top: 24px;
    padding-top: 24px;
    padding-bottom: 28px;
  }
}

/* PC は 2列 (中央の縦罫を境に左=先輩インタビュー / 右=クリヤマ秘話)。
   左右で列幅が違うので、罫線が中央に来るよう 2等分グリッドの内側に寄せる */
.fd-result__columns {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(16px, calc(40 / 1440 * 100vw), 40px);
}
@media (max-width: 767px) {
  .fd-result__columns {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 20px;
  }
}

/* 中央の縦罫。1列しか無いとき (インタビュー未選択) は出さない */
.fd-result__columns:has(.fd-result__column + .fd-result__column)::before {
  content: "";
  position: absolute;
  top: clamp(16px, calc(38 / 1440 * 100vw), 38px);
  bottom: clamp(6px, calc(10 / 1440 * 100vw), 10px);
  left: 50%;
  width: 1px;
  background-color: var(--color-primary);
}
@media (max-width: 767px) {
  /* 打ち消し側も :has() を付けて詳細度を揃える (無いと縦罫が SP でも出る) */
  .fd-result__columns:has(.fd-result__column + .fd-result__column)::before {
    content: none;
  }
}

.fd-result__column:nth-child(1) {
  width: calc(348.6 / 570 * 100%);
  margin-left: auto;
  margin-right: calc(113.5 / 570 * 100%);
}

.fd-result__column:nth-child(2) {
  width: calc(303.78 / 570 * 100%);
  margin-left: calc(114 / 570 * 100%);
  margin-right: auto;
}

/* 1列だけのときは中央に置く */
.fd-result__columns:not(:has(.fd-result__column + .fd-result__column)) {
  grid-template-columns: 1fr;
}
.fd-result__columns:not(:has(.fd-result__column + .fd-result__column)) .fd-result__column {
  /* 1列のときは % の基準が内側幅そのものになるので指定し直す */
  width: calc(303.78 / 1140 * 100%);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .fd-result__column:nth-child(1),
  .fd-result__column:nth-child(2) {
    width: 100%;
    margin-inline: auto;
  }
}

.fd-result__column-title {
  color: var(--fd-heading);
  font-size: clamp(12px, calc(18 / 1440 * 100vw), 18px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 1.667;
}
@media (max-width: 767px) {
  .fd-result__column-title {
    font-size: 13px;
  }
}

.fd-result__cards {
  margin-top: clamp(12px, calc(23 / 1440 * 100vw), 23px);
}
@media (max-width: 767px) {
  .fd-result__cards {
    margin-top: 12px;
  }
}

.fd-result__card + .fd-result__card {
  margin-top: clamp(8px, calc(15 / 1440 * 100vw), 15px);
}
@media (max-width: 767px) {
  .fd-result__card + .fd-result__card {
    margin-top: 10px;
  }
}

.fd-result__card-link {
  display: block;
  border: 2px solid var(--color-primary);
  transition: opacity 0.3s;
}
@media (max-width: 767px) {
  .fd-result__card-link {
    border-width: 1px;
  }
}
/* 先輩インタビュー2件・マガジン2件の4枚とも、枠線ごと薄くする */
@media (hover: hover) {
  .fd-result__card-link:hover {
    opacity: 0.7;
  }
}

/* 動画サムネイル / 記事サムネイルとも、比率違いの差し替えでも枠が崩れないようにする */
.fd-result__cards--interview img {
  aspect-ratio: 1600 / 900;
  object-fit: cover;
}

.fd-result__cards--magazine img {
  aspect-ratio: 320 / 208;
  object-fit: cover;
}

/* サムネイル未設定のインタビュー用のフォールバック */
.fd-result__card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1600 / 900;
  padding: 12px;
  color: var(--color-primary);
  font-size: clamp(12px, calc(18 / 1440 * 100vw), 18px);
  font-weight: 700;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   5. 募集職種を見る (2ボタン横並び)
   ---------------------------------------------------------- */
.fd-result__buttons {
  display: flex;
  justify-content: center;
  gap: clamp(20px, calc(88 / 1440 * 100vw), 88px);
  /* Figma: 記事ボックス下端 3521.2 → ボタン上端 3611 */
  margin-top: clamp(28px, calc(90 / 1440 * 100vw), 90px);
}
@media (max-width: 767px) {
  .fd-result__buttons {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
  }
}

.fd-result__button-item {
  width: clamp(200px, calc(576 / 1440 * 100vw), 576px);
}
@media (max-width: 767px) {
  .fd-result__button-item {
    width: 100%;
    max-width: 320px;
  }
}

.fd-result__button {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, calc(28 / 1440 * 100vw), 28px);
  min-height: clamp(48px, calc(93 / 1440 * 100vw), 93px);
  padding: clamp(8px, calc(12 / 1440 * 100vw), 12px) clamp(14px, calc(30 / 1440 * 100vw), 30px);
  color: var(--color-white);
  transition: opacity 0.3s;
}
@media (max-width: 767px) {
  .fd-result__button {
    gap: 10px;
    min-height: 52px;
    padding: 8px 16px;
  }
}
/* 枠・グラデーション面・影は ::before / ::after を持つ .fd-result__button-bg 側に
   あるので、a 自体を透過させて中身ごと一緒に薄くする */
@media (hover: hover) {
  .fd-result__button:hover {
    opacity: 0.7;
  }
}

.fd-result__button-label {
  font-size: clamp(13px, calc(28 / 1440 * 100vw), 28px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 1.43;
}
@media (max-width: 767px) {
  .fd-result__button-label {
    font-size: 15px;
  }
}

.fd-result__button-arrow {
  flex-shrink: 0;
  width: clamp(16px, calc(24 / 1440 * 100vw), 24px);
  height: auto;
}
@media (max-width: 767px) {
  .fd-result__button-arrow {
    width: 16px;
  }
}

/* 白ボックスと同じ考え方: マスク (clip-path) を持つ子の親に影を掛ける。
   ::before = 白枠の面 / ::after = 3.24px 内側のグラデーション面 */
.fd-result__button-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: drop-shadow(6.117px 6.117px 9.176px rgba(8, 57, 99, 0.32));
  pointer-events: none;
}
@media (max-width: 767px) {
  .fd-result__button-bg {
    filter: drop-shadow(3px 3px 5px rgba(8, 57, 99, 0.32));
  }
}

.fd-result__button-bg::before,
.fd-result__button-bg::after {
  content: "";
  position: absolute;
  /* 左上と右下を斜めに落とす (Figma: 22.8 × 22.95px) */
  clip-path: polygon(
    var(--fd-cut-x) 0,
    100% 0,
    100% calc(100% - var(--fd-cut-y)),
    calc(100% - var(--fd-cut-x)) 100%,
    0 100%,
    0 var(--fd-cut-y)
  );
}

.fd-result__button-bg::before {
  inset: 0;
  background-color: var(--color-white);
}

.fd-result__button-bg::after {
  inset: 3.237px;
  background: var(--fd-gradient);
}

.fd-result__button {
  --fd-cut-x: clamp(12px, calc(22.8 / 1440 * 100vw), 22.8px);
  --fd-cut-y: clamp(12px, calc(22.95 / 1440 * 100vw), 22.95px);
}
@media (max-width: 767px) {
  .fd-result__button {
    --fd-cut-x: 12px;
    --fd-cut-y: 12px;
  }
  .fd-result__button-bg::after {
    inset: 2px;
  }
}

/* --- もう一度診断する (デザインには無いが、モーダルを閉じずにやり直せるよう残す) --- */
.fd__retry {
  display: block;
  min-width: 280px;
  margin: clamp(28px, calc(60 / 1440 * 100vw), 60px) auto 0;
  padding: 14px 16px;
  background-color: var(--color-primary);
  border-radius: 4px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  transition: opacity 0.3s;
}
@media (max-width: 767px) {
  .fd__retry {
    min-width: 0;
    width: 100%;
    max-width: 320px;
    margin-top: 28px;
    font-size: 14px;
  }
}
@media (hover: hover) {
  .fd__retry:hover {
    opacity: 0.7;
  }
}

/* --- 結果画面の背景 (設問画面の fd_bg.jpg とは別) ---
   グラデーションと幾何学模様は背景専用のレイヤーに分ける。
   .fd 自体に opacity を掛けると白ボックスや文字まで薄くなるため。
   ボタン下の余白も設問画面より狭い (Figma: 3704 → 3757) */
.fd[data-fd-screen="result"] {
  z-index: 0;                       /* 背景レイヤー (z-index 負) を閉じ込める */
  background-image: none;           /* 設問画面の背景画像を打ち消す */
  background-color: var(--color-white);
  padding-bottom: clamp(24px, calc(53 / 1440 * 100vw), 53px);
}
@media (max-width: 767px) {
  .fd[data-fd-screen="result"] {
    padding-bottom: 32px;
  }
}

/* 背景1: グラデーション。opacity はこのレイヤーだけに掛かる。
   角度は Figma が書き出す 21deg ではなく 224deg。
   Figma の CSS 書き出しは縦長のボックスで角度を取り違えるため、
   Figma のレンダリングを実測 (774点) して最小二乗で求めた値を使う。
   向きは「右上が白 → 左下が最も濃い」(21deg だと上下左右が逆になる) */
.fd[data-fd-screen="result"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.3;
  background: linear-gradient(224deg, #FFF 0%, #E5F4FC 7.4%, #CEEBFA 16.2%, #BDE4F9 25.6%, #B4E0F8 36.1%, #B1DFF8 49.7%, #A4D2EE 62.6%, #84B1D7 86.1%, #6E9BC7 100%);
  pointer-events: none;
}

/* 背景2: 左上の幾何学模様 (グラデーションの上に重なる)。
   Figma の不透明度 0.3 は SVG 側に入っているので、ここでは opacity を掛けない
   (掛けると 0.3 × 0.3 = 0.09 になって消える) */
.fd[data-fd-screen="result"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(624 / 1440 * 100%);   /* Figma: 1440 の枠に対して 624×724 */
  aspect-ratio: 624 / 724;
  background-image: url(../../images/field-diagnosis/fd_result_bg_pattern.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
@media (max-width: 767px) {
  .fd[data-fd-screen="result"]::after {
    /* 比例させると 160px 程度まで縮んで模様が読めなくなるため固定値にする */
    width: 280px;
  }
}

/* コンテンツ幅は Figma の 1240。モーダルは左右 20px の余白を持つぶん、
   設問画面と同じ内側余白 (100px) では 1240 に届かないので、結果画面だけ
   余白を詰めて max-width で 1240 に止める */
.fd[data-fd-screen="result"] .fd__inner {
  position: relative;               /* 背景レイヤーより前に出す */
  z-index: 1;
  padding-inline: clamp(20px, calc(60 / 1440 * 100vw), 60px);
}
@media (max-width: 767px) {
  .fd[data-fd-screen="result"] .fd__inner {
    padding-inline: 30px;
  }
}

/* ============================
   MODAL (診断をモーダルで開く)
============================ */
.fd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s;
}
@media (max-width: 767px) {
  .fd-modal {
    padding: 56px 0 0;
    align-items: flex-start;
  }
}

.fd-modal.is-open {
  opacity: 1;
}

.fd-modal__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.fd-modal__panel {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  outline: none;
}

/* 閉じるボタン。パネルが画面より高くなっても隠れないよう画面に固定する。
   診断の背景 (淡い水色) の上に重なっても見えるよう円形の地を敷く */
.fd-modal__close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transition: opacity 0.3s;
}
@media (max-width: 767px) {
  .fd-modal__close {
    top: 12px;
    right: 12px;
  }
}
@media (hover: hover) {
  .fd-modal__close:hover {
    opacity: 0.7;
  }
}

.fd-modal__close-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--color-white);
}

.fd-modal__close-bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.fd-modal__close-bar:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.fd-modal__body {
  overflow: hidden;
}
@media (max-width: 767px) {
  .fd-modal__body {
    border-radius: 0;
  }
}

/* 背景のスクロール固定 (JS が body に付ける) */
body.is-fd-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}