@charset "UTF-8";
/* ==========================================================================
   p-ryokin  クリーニング料金（下層②・2枚目）
   出典: Figma PC 衣類937:2653 / 特殊品937:3561 / リフォーム937:3776
         SP   衣類1028:16 / 特殊品1028:275 / リフォーム1028:476
   数値・色は 2026-08-17 に複製ファイルから REST /nodes で実取得。目視推測ゼロ。

   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）
   設計座標（PC）: FV y0 / tabs y655 / accordion y775 / contact y2439
   ========================================================================== */
.p-ryokin__body {
  margin-top: 40px;
  /* SPは実測 1028:16 に合わせる＝表がx5・幅380で入る（外余白1px + 枠4px = 5px）。
     PCは下のタブレットブロックで 16px へ戻す */
  padding: 0 1px;
}

/* ==========================================================================
   カテゴリタブ（衣類 / 特殊品 / リフォーム料金）
   実測 937:2797: タブ高78・アクティブ#5FCAFD+白文字 / 非アクティブ#E1F5FF+#333333
   ========================================================================== */
.p-ryokin__tabs {
  display: flex;
  gap: 2px;
  max-width: 1235px;
  margin-inline: auto;
  /* 🔴 S-101（2026-08-28 ユーザー指摘③）: SPはFigmaの左起点が x9（1028:90 category_tabs）。
     実装は親のpadding由来で x1 に出ており**左に寄っていた**。SP幅のみ9pxへ寄せる
     （PCは margin-inline:auto の中央寄せが正＝下のPCブロックで打ち消さない）。 */
  padding-left: 8px;
}

/* 🔴 #63 タブは全幅3等分ではなく Figma の実寸で左寄せ。
   実測 937:2797 category_tabs = 幅574（パネル左端起点）:
   衣類 178（937:2751/2798）／特殊品 178（937:2798）／リフォーム料金 263（937:2799）・高さ78。
   ∴ flex:1 で伸ばさず、内容幅＋左右padding で 178/263 に収める（PCブロックで確定）。 */
.p-ryokin__tab {
  /* SP実測 1028:90 category_tabs（幅372/390・左x9起点）:
     衣類 94.5（1028:98）／特殊品 94.7（1028:95）／リフォーム料金 181.1（1028:92）・高さ49。
     PC同様に3等分へ伸ばさない＝実寸で左寄せ */
  flex: 0 0 auto;
  width: 94.5px;
  min-height: 49px;
  min-width: 0;
  /* S-101: 帯49 − タイトル箱32(fs22×lh1.448=31.9) = 上下8.5px。
     旧14pxは fs15 前提の値で、fs22 にすると帯が59.8pxへ伸びていた（Figma実測49）。 */
  padding: 8.5px 4px;
  border: none;
  border-radius: 8px 8px 0 0;
  background-color: #e1f5ff; /* 実測 937:2798: #E1F5FF（非アクティブ） */
  color: #333333; /* 実測 937:2801: #333333 */
  font-family: inherit;
  /* 🔴 S-101: SP側の実測を取り違えていた。**Figma SP 1028:90 の Tab Title は fs22**
     （旧値15はSP実測ではなく当方の縮小推定）。PCは937:2802=32で正。 */
  font-size: clamp(22px, 18.2857142857px + 0.9523809524vw, 32px); /* 実測 SP=22（1028:90）/ PC=32（937:2802） */
  font-weight: 700;
  line-height: 1.448;
  cursor: pointer;
  /* 「リフォーム料金」だけラベルが長く、Figmaでも幅が広い */
}
.p-ryokin__tab:last-child {
  width: 181px; /* 実測 1028:92 Rectangle 270 */
}
.p-ryokin__tab[aria-selected=true] {
  background-color: #5fcafd; /* 実測 937:2751: #5FCAFD（アクティブ） */
  color: #ffffff; /* 実測 937:2802: #FFFFFF */
}

/* ==========================================================================
   パネル（タブの中身）
   ========================================================================== */
/* パネルの外枠（実測 937:2750 Rectangle 18: 1235×1606・border 10px #5FCAFD align=INSIDE・radius16）
   🔒 枠は内側に描かれる＝border-box（reset.scss で全要素 border-box 済み）で幅1235を保つ */
.p-ryokin__panels {
  max-width: 1235px;
  margin-inline: auto;
  padding: 24px 0 40px;
  border: 4px solid #5fcafd; /* SPは細め。PCで10pxへ（下の1440ブロック） */
  border-radius: 16px; /* 実測 937:2750: 16px */
  background-color: #ffffff; /* 実測 937:2750: #FFFFFF の面 */
}

/* ==========================================================================
   アコーディオン（グループ別）
   実測 937:2803: 行高77・背景#E1F5FF
   ========================================================================== */
.p-ryokin__acc-item + .p-ryokin__acc-item {
  margin-top: 10px;
}

.p-ryokin__acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background-color: #e1f5ff; /* 実測 937:2804: #E1F5FF */
  color: #333333;
  font-family: inherit;
  font-size: clamp(18px, 15.0285714286px + 0.7619047619vw, 26px); /* 実測 937:2811: 26px */
  font-weight: 700;
  line-height: 1.448;
  text-align: left;
  cursor: pointer;
}

/* 円バッジ（実測 937:2810: 60×60の白丸）
   ⚠️Figmaでは中にエアコンアイコンが入っているが全グループ共通の流用＝内容と不整合のため出さない（疑義#16） */
/* アコーディオンのアイコン（実測 937:2810: 60×60 / SP 1028:38 相当: 40×40）。
   🔒 PNGに白丸＋水色リングまで含まれた完成形＝ここで背景や枠を足さない
      （疑義#16「全部エアコン」は当方の誤読で解消済み＝上層ELLIPSEの画像fillが本物） */
.p-ryokin__acc-badge {
  display: block;
  flex-shrink: 0;
  width: 40px; /* SP実測: 40×40 */
  height: 40px;
}

.p-ryokin__acc-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

/* 開閉マーク（実測 937:2805: 23×11 の V 字） */
.p-ryokin__acc-mark {
  position: relative;
  flex-shrink: 0;
  width: 23px;
  height: 11px;
}
.p-ryokin__acc-mark::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 13px;
  height: 13px;
  border-right: 2px solid #005ca7;
  border-bottom: 2px solid #005ca7;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

/* 🔴 S-102（2026-08-28 ユーザー裁定・デザイン厳守）: **開いても矢印の向きを変えない**。
   Figmaは PC/SP・全ページで矢印ノードが**全て同一サイズ・同一向き**（house 13個/option 10個/
   料金3タブ 11個＝いずれも展開状態の節を含む）＝開閉で反転しない設計。
   反転は当方が足した挙動だった。開閉は背景色と中身の出現で判別できる（aria-expandedも付与済み）。 */
.p-ryokin__acc-body {
  display: none;
  /* 🔒 SPでも表内横スクロールにしない（2026-08-23 記録タブ差戻し K-1）。
     Figma SP 1028:16 は**3列が390幅に収まる**設計（表幅380・縦罫 x135/x241 ＝ 列幅130/106/144）。
     項目名と見出しを折り返して収める。 */
  overflow-x: visible;
}

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

/* 料金データ未確定のグループ（疑義リスト#17）＝開いた時に空にしない */
.p-ryokin__empty {
  margin: 0;
  padding: 20px 16px;
  color: #828282;
  font-size: clamp(14px, 13.2571428571px + 0.1904761905vw, 16px);
  font-weight: 500;
}

/* ==========================================================================
   料金表
   実測 937:2766: 行高44・罫線1px / 937:2753: 偶数行 #F3FBFF
   ========================================================================== */
.p-ryokin__table {
  width: 100%;
  border-collapse: collapse;
  /* 🔒 実測 1028:16（SP）: 本文16px / 見出し18px。
     旧値 fs-clamp(13,18) はSPで13pxまで縮み、文字が細って中央揃えが約6pxずれていた（K-1）。
     PC実測（937:2653）も本文16px・見出し20pxのため、clampを使わず固定値で持つ */
  font-size: 16px;
  table-layout: fixed; /* 実測の列比（130/106/144）で固定し、390幅に収める */
  text-align: left;
}
.p-ryokin__table th,
.p-ryokin__table td {
  /* SPは実測 1028:16 に合わせて詰める（PCは下のブロックで 12px 16px へ戻す） */
  padding: 10px 8px;
  font-weight: 500;
  vertical-align: middle;
  /* 日本語の任意位置で折り返す（K-1）。
     `overflow-wrap: anywhere` だけでは**全角スペース(À0)を含む文字列が分割されず**、
     「破れ・ほつれ　小（5cm未満）」等が列幅を超えて表がはみ出したため
     `word-break: auto-phrase` で文節単位に折る。
     🔴 `break-all` は金額まで割る（「1,7／60円〜」）ので使わない。
     ⚠️ 実測 1028:16/275/476 のデザインも文節位置で折り返している */
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.p-ryokin__table {
  /* 列幅＝各タブSPの縦罫実測（表幅380基準）。タブごとに列比が違うため個別に持つ。
     ・衣類     1028:16  縦罫 x135/x241 → 130/106/144
     ・特殊品   1028:275 縦罫 x235      → 230/150
     ・リフォーム 1028:476 縦罫 x112/x261 → 107/149/124
     🔴 全タブを衣類比で組むと、リフォームの「ボタン交換 1ヶ所（ボタン代別途）」が
        105px列に入りきらず表がはみ出す（K-1の再発）。 */
}
.p-ryokin__table thead th:nth-child(1) {
  width: 34.2%;
}
.p-ryokin__table thead th:nth-child(2) {
  width: 27.9%;
}
.p-ryokin__table thead th:nth-child(3) {
  width: 37.9%;
}
.p-ryokin__table {
  /* 実測 1028:16 の揃え:
     ・**見出しは3列とも中央**（アイテム-1.0 / デラックス料金+1.0 の中央ズレ＝中央揃え）
     ・**データは1列目だけ左寄せ**（ワイシャツ立体 x17＝左余白12px）、2・3列目は中央
       （297円〜 -2.0 / 825円〜 -1.5 ＝ 中央揃え） */
}
.p-ryokin__table thead th {
  text-align: center;
}
.p-ryokin__table tbody th:first-child,
.p-ryokin__table tbody td:first-child {
  padding-left: 12px;
  text-align: left;
}
.p-ryokin__table tbody td:not(:first-child) {
  text-align: center;
}
.p-ryokin__table {
  /* 縦罫（実測 1028:16: x135・x241 に 1px #CFCFCF が表の高さいっぱいに入る） */
}
.p-ryokin__table th + th,
.p-ryokin__table td + td,
.p-ryokin__table tbody th + td {
  border-left: 1px solid #cfcfcf;
}
.p-ryokin__table thead th {
  color: #005ca7; /* 実測 937:2833 ほか: 見出しは紺 */
  font-size: 18px; /* 実測 1028:205「アイテム」: 18px/700/lh26.1 */
  font-weight: 700;
  /* 🔒 nowrap にしない＝「デラックス料金（税込）」は実測どおり2行で折り返す（K-1） */
  white-space: normal;
}
.p-ryokin__table tbody th {
  color: #333333;
  font-weight: 500;
}
.p-ryokin__table tbody td {
  color: #333333;
  /* 🔒 SPは nowrap にしない＝390幅に3列を収めるため折り返す（K-1）。
     PCは下のタブレットブロックで nowrap に戻す（実測どおり1行で入る） */
  white-space: normal;
}
.p-ryokin__table {
  /* 罫線（実測 937:2767-2793: 全幅の横罫が行ごとに入る） */
  /* 🔴 S-106（2026-08-28 ユーザー指摘）: **表の上端の罫線が無かった**。
     Figma SP は表の最上部に `Line 73` が実在する
     （衣類 1028:16 y420.5 ／ 特殊品 1028:275 y412.6 ＝ どちらも表の上端）。
     実装は thead に border-bottom しか無く、帯との間の21pxが「切れて」見えていた。 */
}
.p-ryokin__table thead tr {
  border-top: 1px solid #5fcafd;
  border-bottom: 1px solid #5fcafd;
}
.p-ryokin__table tbody tr {
  border-bottom: 1px solid #cfcfcf;
}
.p-ryokin__table {
  /* 偶数行の帯（実測 937:2753 ほか: #F3FBFF） */
}
.p-ryokin__table tbody tr:nth-child(even) {
  background-color: #f3fbff;
}

/* ==========================================================================
   タブレット以上（769px〜）
   ========================================================================== */
@media (min-width: 769px) {
  .p-ryokin__body {
    margin-top: 60px;
    padding: 0 32px;
  }
  .p-ryokin__tabs {
    gap: 2px; /* 実測 937:2797: 178+2+178+... で 574 に収まる＝隙間2px */
    padding-left: 0; /* S-101: SPのx9寄せをPCでは打ち消す（PCは中央寄せが正） */
  }
  /* 実測 937:2797（PC1440基準）: 高さ78・幅 178/178/263。
     1455基準の実装幅にそのまま置く（タブはコンテンツ幅に連動しない固定幅） */
  .p-ryokin__tab {
    width: 178px;
    min-height: 78px;
    padding: 16px 8px;
  }
  .p-ryokin__tab:last-child {
    width: 263px; /* 実測 937:2799 Rectangle 270: 263幅（「リフォーム料金」） */
  }
  .p-ryokin__panels {
    padding: 40px 24px 60px;
  }
  .p-ryokin__acc-head {
    padding: 8px 24px;
    /* 実測(PC) 937:2803: 行高77 */
    min-height: 77px;
  }
  .p-ryokin__acc-badge {
    width: 60px; /* 実測 937:2810: 60×60 */
    height: 60px;
  }
  .p-ryokin__body {
    padding-inline: 16px;
  }
  /* PCは実測 937:2653 の余白・列幅に戻す（SP側の詰めた値を上書き） */
  .p-ryokin__table {
    table-layout: auto;
  }
  .p-ryokin__table th,
  .p-ryokin__table td {
    padding: 12px 16px;
    overflow-wrap: normal;
  }
  .p-ryokin__table thead th {
    font-size: 20px; /* 実測 937:2840「アイテム」: 20px/700/lh29 */
    white-space: nowrap; /* PCは見出しが1行で入る（実測 937:2840/2867/2894） */
  }
  .p-ryokin__table {
    /* PCは実測どおり本文も1行（幅に余裕があるため折り返さない） */
  }
  .p-ryokin__table tbody td {
    white-space: nowrap;
  }
  .p-ryokin__table thead th:nth-child(1),
  .p-ryokin__table thead th:nth-child(2),
  .p-ryokin__table thead th:nth-child(3) {
    width: auto;
  }
  .p-ryokin__table {
    /* 🔒 監査#64「Figma PCは列の縦罫線あり→実装は横罫線のみ」
       旧コメントは「PC表には縦罫が無い」と断定していたが**誤り**。
       実測すると PC `937:2795`(x576) / `937:2796`(x901) の **縦線 #CFCFCF・h1144** が在る
       （表は x172〜1269＝幅1097 なので 36.83% と 66.45% の位置＝3列の境界）。
       ∴ PCでも縦罫を出す（SPと同じ指定を引き継ぐので打ち消さない）。 */
  }
}
/* ==========================================================================
   PC専用（1440px〜）＝Figma実数値に着地させる
   ========================================================================== */
@media (min-width: 1440px) {
  .p-ryokin__acc-head {
    /* 実測(PC): アコーディオン幅1100 が枠1235 の内側に入る */
    padding-inline: 18px;
  }
  .p-ryokin__panels {
    padding-inline: 67px; /* 実測: 枠1235 -> 中身1100 の差 */
    border-width: 10px; /* 実測 937:2750: 10px #5FCAFD */
  }
}
/* タブ別の列幅（SP実測。上の既定＝衣類比を特殊品・リフォームで上書きする） */
.p-ryokin__panel--tokusyu .p-ryokin__table thead th:nth-child(1) {
  width: 60.5%;
}
.p-ryokin__panel--tokusyu .p-ryokin__table { /* 実測 1028:275 縦罫 x235 → 230/150 */ }
.p-ryokin__panel--tokusyu .p-ryokin__table thead th:nth-child(2) {
  width: 39.5%;
}

.p-ryokin__panel--reform .p-ryokin__table thead th:nth-child(1) {
  width: 28.2%;
}
.p-ryokin__panel--reform .p-ryokin__table { /* 実測 1028:476 縦罫 x112/x261 → 107/149/124 */ }
.p-ryokin__panel--reform .p-ryokin__table thead th:nth-child(2) {
  width: 39.2%;
}
.p-ryokin__panel--reform .p-ryokin__table thead th:nth-child(3) {
  width: 32.6%;
}

/* SP周回（2026-08-27）: リフォームだけ「修理内容」列が左寄せ（実測 1028:476: 全行 x122固定）。
   衣類/特殊品の2列目は中央（1028:16/275 実測）。🔒768px以下限定＝PCは従来の中央のまま */
@media (max-width: 768px) {
  .p-ryokin__panel--reform .p-ryokin__table tbody td:nth-child(2) {
    padding-left: 10px; /* 実測 1028:476: 列左端105 → テキストx122 ＝ +17（380基準）→ 405幅で+10.4 */
    text-align: left;
  }
}
/* ==========================================================================
   🔴 S-104（2026-08-28 ユーザー指摘・SP限定）
   Figma SP 1028:90 実測 = 帯 x15 w360 h50／アイコン40×40（帯左端+8）／
   ラベル fs24 lh34.8（アイコン右端+gap8）／見出しは letterSpacing 0。
   実装は h64・fs18・padding16・帯幅380 だった。
   ⚠️ **必ず SP メディアクエリ内に書く**。基底に書くとPCの承認済み描画を壊す
   （2026-08-28 に実際にPC回帰3面FAIL＝価格列が横ズレ・罠#20）。
   ========================================================================== */
@media (max-width: 768px) {
  .p-ryokin__acc-head {
    gap: 8px;
    width: calc(100% - 20px); /* 帯 x15 w360（表 x5 w380 の左右10px内側） */
    margin-inline: auto;
    padding: 5px 8px; /* (50-40)/2 ＝ アイコン40px基準 */
    font-size: 24px; /* Figma SP 1028:90 実測（PCは基底の fs-clamp が26を出す） */
  }
  .p-ryokin__table thead th {
    /* 既定の $letter-spacing-base(0.03em=0.42px) が乗ると「デラックス料金」が
       実幅129px > 内寸128px で1px足りずに3行へ折返す（common.scss:916 と同型・S-10）。 */
    letter-spacing: 0;
  }
  /* 🔴 S-105（2026-08-28 ユーザー指摘②）: 帯と表は**くっついていない**。
     Figma SP 実測 = 帯 y341.5 h50（下端391.5）／表 y412.5 ＝ **gap 21px**。
     S-104で帯を x15 w360 へ内側に寄せた結果、表(x5 w380)との段差だけが残り
     「崩れて見える」状態だった。正しくは**間隔21pxを空ける**のが実測どおり。 */
  .p-ryokin__acc-body {
    margin-top: 21px;
  }
}