@charset "UTF-8";
/* ==========================================================================
   p-option  オプション加工（下層①・7枚目）
   出典: Figma PC 937:1384（1440×3012）/ SP 913:7948（390×3378）
   数値・色は 2026-08-17 に複製ファイルから REST /nodes で実取得。目視推測ゼロ。

   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）
   設計座標（PC）: FV y-40 / 一覧 y589 / contact y1999
   ========================================================================== */
.p-option__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px; /* 実測(PC): 泡右端617 -> 見出し641 */
  margin: 0;
  color: #333333;
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  font-weight: 700;
  line-height: 1.448;
  text-align: center;
}

.p-option__heading-bubble {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}

.p-option__list {
  margin-top: 30px;
  padding: 0 10px;
}

.p-option__acc {
  margin-top: 60px; /* 実測(PC): 見出し下端635 -> 一覧 y725 */
}

.p-option__acc-item + .p-option__acc-item {
  margin-top: 10px; /* 実測(PC): 行送り87 - 行高77 */
}

/* 行見出し（番号バッジ＋名称＋開閉マーク） */
.p-option__acc-head {
  display: flex;
  align-items: center;
  gap: 25px; /* 実測(PC): 番号右端266 -> 名称291 */
  width: 100%;
  min-height: 77px; /* 実測 937:1484: 1100×77 */
  padding: 8px 20px;
  border: 0;
  background: #f3fbff; /* 実測: #F3FBFF */
  color: #333333;
  font-size: clamp(20px, 17.7714285714px + 0.5714285714vw, 26px); /* 実測 937:1485: 26px 700 */
  font-weight: 700;
  line-height: 1.46;
  text-align: left;
  cursor: pointer;
}

/* 番号（実測 937:1502: 36.8px 700 #FFFFFF・水色丸の上） */
.p-option__acc-num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  /* 🔒 円はEllipse 937:1501=55×55の正円（旧57は親フレーム937:1500の高さ＝取り違え。S-32） */
  width: 55px;
  height: 55px;
  color: #ffffff;
  font-family: "Buenard", serif;
  font-size: clamp(28px, 24.724px + 0.84vw, 36.82px);
  font-weight: 700;
  line-height: 1;
  background: #5fcafd;
  border-radius: 50%;
}

/* 🔒 同席指摘 オプション①（8/25 S-32）: Buenardのメトリクスで数字が円中心より**下+6.5/右+2.6px**に
   描画される（flex中央では直らない＝罠#16）。実装/Figma両側を**円内r<26マスクの白画素重心**で同式測定し
   （⚠️正方形走査だと円外四隅の白背景が重心を支配して誤測定＝S-26と同型の罠・8/25実証）、
   Figma重心(+0.2,+0.65)へ内側spanのtransformで合わせる（padding補正はグリフを動かさない＝実測済み） */
.p-option__acc-num-in {
  display: inline-block;
  transform: translate(-0.4px, -5.4px); /* 8/25再測定: 残差(0,+0.9)を吸収した最終値＝平均差(0.0,-0.0) */
}

.p-option__acc-title {
  flex: 1;
  min-width: 0;
}

/* 開閉マーク（実測 937:1486: Vector 23×11 #5FCAFD） */
.p-option__acc-mark {
  position: relative;
  flex-shrink: 0;
  width: 23px;
  height: 11px;
}

.p-option__acc-mark::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid #5fcafd;
  border-left: 2px solid #5fcafd;
  transform: translateX(-50%) rotate(-45deg);
  transition: transform 0.25s ease;
  content: "";
}

/* 🔴 S-102（2026-08-28 ユーザー裁定・デザイン厳守）: **開いても矢印の向きを変えない**。
   Figmaは PC/SP・全ページで矢印ノードが**全て同一サイズ・同一向き**（house 13個/option 10個/
   料金3タブ 11個＝いずれも展開状態の節を含む）＝開閉で反転しない設計。
   反転は当方が足した挙動だった。開閉は背景色と中身の出現で判別できる（aria-expandedも付与済み）。 */
.p-option__acc-body {
  display: none;
  padding: 20px 0 0;
}

.p-option__acc-item--open .p-option__acc-body {
  display: block;
}

.p-option__acc-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 579/388; /* 実測 937:1487: 579×388 r24 */
  border-radius: 24px;
  object-fit: cover;
  /* 下地なし: 画像の角がアルファ透過（8/24黒角修復）のため、下地があるとグレーの弧が透ける */
}

.p-option__acc-detail {
  margin-top: 24px;
}

.p-option__acc-name {
  margin: 0;
  color: #005ca7; /* 実測 937:1488: #005CA7 */
  font-size: clamp(20px, 18.5142857143px + 0.380952381vw, 24px);
  font-weight: 700;
  line-height: 1.46;
}

/* 料金＋タグの行（S-33: PCは同一行・SPは縦積み。区切り線はこの行の下＝従来のタグ下と同位置） */
.p-option__price-row {
  margin-top: 15px;
  padding-bottom: 20px; /* 実測(SP): タグ下端899 -> 線919 */
  border-bottom: 1px solid #d9d9d9; /* 実測 937:1490 / 913:8048: #D9D9D9 */
}

.p-option__acc-price {
  margin: 0;
  color: #333333;
  font-size: clamp(16px, 14.5142857143px + 0.380952381vw, 20px); /* 実測 937:1489: 20px 500 */
  font-weight: 500;
  line-height: 1.45;
}

.p-option__acc-lead {
  margin: 20px 0 0;
  color: #333333;
  font-size: clamp(18px, 17.2571428571px + 0.1904761905vw, 20px); /* 実測 937:1491: 20px 700 */
  font-weight: 700;
  line-height: 1.4;
}

.p-option__acc-text {
  margin: 15px 0 0;
  color: #333333;
  font-size: 18px; /* 実測 937:1492: 18px 500 */
  font-weight: 500;
  line-height: 1.7;
}

/* 適用アイテムのタグ（実測 937:1494: h26 r19 stroke #D9D9D9）
   🔒 実測(SP 913:8050): タグは料金の直後・区切り線の手前（y828→873→線919）。区切り線は __price-row 側 */
.p-option__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.p-option__tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  border-radius: 19px;
  color: #333333;
  font-size: 16px; /* 実測 937:1495: 16px 500 */
  font-weight: 500;
  line-height: 1;
}

/* ==========================================================================
   タブレット以上（769px〜）＝比率で組む
   ========================================================================== */
@media (min-width: 769px) {
  /* S-33: PCは料金とタグが同一行（Figma実測: 料金x778左端・タグ右端=詳細右端1270・縦は中央揃い） */
  .p-option__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  /* S-33b（8/25ユーザー指摘）: タグ4枚の項目（虫よけ等）で「料金 605円〜」が語中折返しして
     いた。Figmaに02以降の展開デザインは無い＝実装判断: 金額は折返し禁止・タグ側だけ折返す */
  .p-option__acc-price {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .p-option__tags {
    margin-top: 0;
  }
  .p-option__list {
    width: min(1100px, 100% - 80px); /* 実測(PC): Container 1100幅 */
    margin: 100px auto 0;
    padding: 0;
  }
  .p-option__acc {
    margin-top: 90px; /* 実測(PC): 見出し下端635 -> y725 */
  }
  .p-option__acc-head {
    padding: 8px 41px; /* 実測(PC): 番号 x211（枠x170から41） */
  }
  /* 展開時は写真左・テキスト右（実測: 画像x176 w579 / テキストx779 w491） */
  .p-option__acc-body {
    display: none;
    grid-template-columns: 52.6% 44.6%; /* 579/1100・491/1100 */
    gap: 2.2%;
    padding: 30px 6px 0;
  }
  .p-option__acc-item--open .p-option__acc-body {
    display: grid;
  }
  .p-option__acc-detail {
    margin-top: 0;
  }
}
/* ==========================================================================
   SP周回（2026-08-27）: Figma SP 913:7948 実測に合わせたSP限定修正。
   768px以下限定＝769px以上には影響しない（PC22面承認済み）。
   fsはSP実測値（clamp下限のSP推定値を置換）。
   ========================================================================== */
@media (max-width: 768px) {
  .p-option .c-page-title__subtitle {
    width: 264px; /* 実測 913:7956: w264（3行に折る） */
  }
  .p-option__list {
    margin-top: 0; /* 実測: 見出しy248＝canvas下端に密着 */
  }
  .p-option__acc {
    margin-top: 63px; /* 実測: 見出し下端283 → head01 353 ＝ 70（見出し箱42と文字35の差7を吸収） */
  }
  .p-option__acc-name {
    font-size: 24px; /* 実測 913:7966系: fs24（clamp下限20はSP推定だった） */
  }
  .p-option__acc-num {
    width: 45px; /* 実測 913:7976: 円45φ（基底は55） */
    height: 45px;
    font-size: 29.92px; /* 実測 913:7977 */
  }
  .p-option__acc-img {
    aspect-ratio: 346/232; /* 実測 913:8057: 346×231.9（基底はPC比579/388） */
  }
  .p-option__acc-title {
    font-size: 24px; /* 実測: 開閉行タイトル fs24 */
  }
  .p-option__acc-img {
    margin-top: 30px; /* 実測: head下端465 → 写真515 ＝ 50（パネル既定padding20と合算） */
  }
  .p-option__acc-detail {
    margin-top: 30px; /* 実測: 写真下端747 → 題776.5 */
  }
  .p-option__tags {
    margin-top: 15px; /* 実測: 料金下端857.9 → タグ872.5 ＝ 15 */
  }
  .p-option__acc-price {
    font-size: 20px; /* 実測 913:8049 */
  }
  .p-option__tag {
    font-size: 16px; /* 実測 913:8051系 */
  }
  .p-option__acc-lead {
    font-size: 20px; /* 実測 913:8046 */
  }
  .p-option__acc-text {
    margin-top: 20px; /* 実測: リード下端994.5 → 本文1014.5 */
  }
  .p-option__acc-detail {
    padding-bottom: 40px; /* 実測: 本文下端1293.5 → 次head 1343.9 ＝ 50（item gap10と合算） */
  }
}
/* 見出し左の円＝Figma SP実測 29×29・円→文字の間隔10px（全ページ一様・2026-08-28夜 実測
   deluxe/futon/house/tokusyu/option/btob/kaiin/shiminuki の各SPフレームで円29.0を確認）。
   従来の42pxはPC実測値がSPへ漏れていたもの（ユーザー指摘 匠②） */
@media (max-width: 768px) {
  .p-option__heading {
    gap: 10px;
  }
  .p-option__heading-bubble {
    width: 29px;
    height: 29px;
  }
}