@charset "UTF-8";
/* ==========================================================================
   p-tokusyu  特殊品クリーニング（下層①・9枚目＝ラスト）
   出典: Figma PC 937:1120（1440×5815）/ SP 983:1298（390×7143）
   数値・色は 2026-08-17 に複製ファイルから REST /nodes で実取得。目視推測ゼロ。

   🔒 SPの正＝983:1298（瀬野尾さん 8/17 完了コメント）。913:7508 は旧版＝不使用。
   🔒 料金表は「仕上がり」列なしの2列（岡田さんコメントの修正指示を反映）。
   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）＝サービス一覧の溢れ44件の再発防止。

   設計座標（PC）: FV y-40 / point y626 / item y2773 / price y3617 / advice y4421 / contact y4849
   設計座標（SP）: FV y24 / point y278 / item y3790 / price y4926 / advice y5611 / contact y6059
   ========================================================================== */
/* --- 共通見出し（泡＋テキスト・中央） --- */
.p-tokusyu__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px; /* 実測(PC): 泡右端584 -> 見出し609 */
  margin: 0;
  color: #333333; /* 実測 937:1239: #333333 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px); /* 実測: SP24 / PC32 */
  font-weight: 700;
  line-height: 1.448;
}

/* 🔴 監査#33: 「その他、特殊アイテムのご紹介」だけ SP が **fs22**（実測 983:1361・w298・1行）。
   共通の fs-clamp(24,32) だとSPで24pxになり、この見出しだけ2行に折返していた。
   PCは他の見出しと同じ32px（実測 937:1278）＝SPのみ下げる。 */
.p-tokusyu__heading--long {
  /* 実測 SP `983:1359` の title 行＝ 泡29 + gap10 + テキスト298（＝337 / フレーム390）。
     共通の 泡42 + gap25 だと文字に回る幅が足りず、fs22 にしても2行のままになる。 */
  gap: 10px;
  font-size: clamp(22px, 18.2857142857px + 0.9523809524vw, 32px);
}

.p-tokusyu__heading--long .p-tokusyu__heading-bubble {
  width: 29px; /* 実測 983:1360: 29×29（PCは42） */
  height: 29px;
}

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

/* 注記（グレー小文字） */
.p-tokusyu__note {
  margin: 20px 0 0;
  color: #828282; /* 実測 937:1235: #828282 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   point  5項目（SP=写真が上／PC=写真とテキストの左右交互）
   ========================================================================== */
.p-tokusyu__point {
  margin-top: 60px; /* 実測(SP): FV下端247 -> point y278 */
}

.p-tokusyu__point-item {
  padding: 0 22px; /* 実測(SP): card内容 x22 */
}
.p-tokusyu__point-item + .p-tokusyu__point-item {
  margin-top: 56px; /* 実測(SP): card_01下端973 -> card_02 y1023 */
}
.p-tokusyu__point-item {
  /* 02・04 は薄水色の帯（実測 983:1323 / 983:1341: #F3FBFF） */
}
.p-tokusyu__point-item:nth-child(even) {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
}
.p-tokusyu__point-item:nth-child(even)::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3fbff;
  content: "";
}

.p-tokusyu__point-media {
  display: block;
}

/* 🔒 写真は**左上・左下だけ角丸**（実測 SP 983:1315 = [18,0,0,18] / PC 937:1326 = [36,0,0,36]）。
   右側は角丸なし＝**画面右端まで裁ち落とす**デザイン（実測: 画像右端がフレーム右端と一致）。
   49件「画像の角丸に写真が入り切ってない」＝4隅を丸めて枠内に収めていたのが誤り */
.p-tokusyu__point-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px 0 0 18px;
  object-fit: cover;
}

/* SPも右端まで裁ち落とす（実測 983:1315: x34 w359 → 右端393 > フレーム390） */
.p-tokusyu__point-media {
  margin-right: -22px; /* item の padding 22px を打ち消して画面右端へ */
}

.p-tokusyu__point-body {
  margin-top: 20px; /* 実測(SP): 画像下端500 -> Frame 988 y520 */
}

.p-tokusyu__point-head {
  display: flex;
  align-items: baseline;
  gap: 17px; /* 実測(SP): 番号右端89 -> タイトル106 */
}

.p-tokusyu__point-num {
  color: #5fcafd; /* 実測 983:1318: #5FCAFD */
  font-family: "Buenard", serif;
  font-size: clamp(64px, 61.5188571429px + 0.6361904762vw, 70.68px); /* 実測: SP64 / PC70.68 */
  font-weight: 500;
  line-height: 1.3;
}

.p-tokusyu__point-title {
  margin: 0;
  color: #005ca7; /* 実測 983:1319: #005CA7 */
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px); /* 実測: SP24 / PC32 */
  font-weight: 700;
  line-height: 1.448;
}

/* Figma実測: pointセクションの字間は全て0（8/24同席確認⓪・既定の字間だと本文の折返し位置がズレる） */
.p-tokusyu__point-item {
  letter-spacing: 0;
}

.p-tokusyu__point-subtitle {
  margin: 20px 0 0; /* 実測(SP): head下端627 -> subtitle y647 */
  color: #333333;
  font-size: clamp(20px, 20px + 0vw, 20px); /* 実測 983:1320 / 937:1324: 20px */
  font-weight: 700;
  line-height: 1.448;
}

.p-tokusyu__point-text {
  margin: 20px 0 0; /* 実測(SP): subtitle下端705 -> text y725 */
  color: #333333;
  font-size: 18px; /* 実測 983:1321 / 937:1325: 18px */
  font-weight: 500;
  line-height: 1.7;
}
.p-tokusyu__point-text + .p-tokusyu__point-text {
  margin-top: 1.7em; /* 実測: point05 の本文は2段落 */
}

.p-tokusyu__point-note {
  margin: 8px 0 0;
  color: #828282;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   item  その他、特殊アイテムのご紹介（8点のタイル）
   ========================================================================== */
.p-tokusyu__item {
  margin-top: 80px; /* 実測(SP): point下端3700 -> item y3790 */
  padding: 0 17px; /* 実測(SP): item x16 */
}

/* SPは千鳥をやめて2列で素直に積む（実測 983:1358: SPは2列構成） */
.p-tokusyu__item-list {
  display: grid;
  /* 🔒 比率化（固定pxにしない）＝タブレット帯で溢れないこと優先 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.p-tokusyu__item-cell {
  display: flex;
  flex-direction: column;
}

.p-tokusyu__item-label {
  display: flex;
  align-items: center;
  gap: 8px; /* 実測(PC): 泡右端248 -> ラベル256 */
  margin: 0 0 12px;
  color: #005ca7; /* 実測 937:1283: #005CA7 */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.448;
}

.p-tokusyu__item-bubble {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.p-tokusyu__item-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* 🔒 タイルの縦横比＝Figma実測（937:1284 ほか）。
   幅は fr で伸縮させ、比だけを固定する＝どの幅でも意匠の形が保たれる。 */
.p-tokusyu__item-img--wide {
  aspect-ratio: 272/154; /* 実測 937:1284 まくら */
}

.p-tokusyu__item-img--tall {
  aspect-ratio: 272/182; /* 実測 937:1291 クッション */
}

.p-tokusyu__item-img--mid {
  aspect-ratio: 247/165; /* 実測 937:1286 / 1296 / 1306 */
}

.p-tokusyu__item-img--square {
  aspect-ratio: 1/1; /* 実測 937:1301 キーケース173 / 937:1314 バック185 */
}

/* ==========================================================================
   price  主要アイテムの料金（2列表・「仕上がり」列なし）
   ========================================================================== */
.p-tokusyu__price {
  margin-top: 80px; /* 実測(SP): item下端4835 -> price y4926 */
  padding: 0 10px; /* 実測(SP): price x10 */
}

.p-tokusyu__price-table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
  font-size: clamp(16px, 13.0285714286px + 0.7619047619vw, 24px); /* 実測: PC24 */
  text-align: left;
}
.p-tokusyu__price-table th,
.p-tokusyu__price-table td {
  padding: 16px 12px;
  font-weight: 500;
  vertical-align: middle;
}
.p-tokusyu__price-table thead th {
  color: #005ca7; /* 実測 937:1270: #005CA7 */
  font-size: clamp(18px, 12.8px + 1.3333333333vw, 32px); /* 実測(PC): ヘッダー32px */
  white-space: nowrap;
}
.p-tokusyu__price-table tbody th {
  padding-left: 27px; /* Figma SP実測: アイテム文字=表左端+27（列内の字下げ） */
  color: #333333;
  font-weight: 500;
}
.p-tokusyu__price-table {
  /* 監査#32: 料金列は **中央揃え**（実測 983:1465等 textAlign=CENTER）。旧 right は誤り */
}
.p-tokusyu__price-table tbody td {
  color: #333333;
  text-align: center;
  white-space: nowrap;
}
.p-tokusyu__price-table {
  /* 見出しは両列とも列内中央（8/24再訂正: SPの「アイテム」もFigmaのtextAlign=CENTER明示・
     箱の中心=列中心を実測。属性だけ/見た目だけの判定はどちらも誤りだった） */
}
.p-tokusyu__price-table thead th {
  text-align: center;
}
.p-tokusyu__price-table {
  /* 罫線（実測 937:1247 等: 全幅の横罫）
     監査#32: 見出し行は**上下**に #5FCAFD（実測 SP 983:1437 y5029 / 983:1435 y5080） */
}
.p-tokusyu__price-table thead tr {
  border-top: 1px solid #5fcafd;
  border-bottom: 1px solid #5fcafd;
}
.p-tokusyu__price-table tbody tr {
  border-bottom: 1px solid #cfcfcf;
}
.p-tokusyu__price-table {
  /* 偶数行の帯（実測 937:1241-1243: #F3FBFF） */
}
.p-tokusyu__price-table tbody tr:nth-child(even) {
  background-color: #f3fbff;
}
.p-tokusyu__price-table {
  /* 🔒 監査#32・#51「見出し行に背景＋列の縦罫線あり（枠で囲まれた表）→実装は横罫線のみ」
     実測: PC 937:1273 ＝ **縦線 #CFCFCF** x719（表x279 w879.7 の**ちょうど50%**）を
           見出し行の上端 y3743 から最終行下端 y4241 まで（h498）通す。
           SP 983:1460 も同じく縦線 #CFCFCF（x191・h400）で**SP/PCとも縦罫線が在る**。
     ∴ 1列目の右側に縦罫を引く（thead も含めて全行＝表を枠として見せる）。 */
}
.p-tokusyu__price-table thead th:first-child,
.p-tokusyu__price-table tbody th {
  border-right: 1px solid #cfcfcf;
}
.p-tokusyu__price-table {
  /* 列の分割位置＝実測50%（PC 440/879.7・SP 163/335 とも概ね半々） */
}
.p-tokusyu__price-table th:first-child,
.p-tokusyu__price-table td:first-child {
  width: 50%;
}

/* ==========================================================================
   advice  ご利用にあたっての注意事項
   ========================================================================== */
.p-tokusyu__advice {
  margin-top: 80px; /* 実測(SP): price下端5560 -> advice y5611 */
}

.p-tokusyu__advice-panel {
  padding: 25px; /* 実測(SP): advice内容 x25 */
  background-color: #f3fbff; /* 実測 983:1405 / 937:1215: #F3FBFF */
}

.p-tokusyu__advice-title {
  margin: 0;
  color: #333333; /* 実測 937:1217: #333333 */
  font-size: clamp(20px, 18.5142857143px + 0.380952381vw, 24px); /* 実測(PC): 24px */
  font-weight: 500;
  line-height: 1.448;
  text-align: center;
}

.p-tokusyu__advice-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.p-tokusyu__advice-item {
  position: relative;
  padding-left: 54px; /* 実測(PC): アイコンx286 -> テキストx340 ＝ 54 */
  color: #333333;
  font-size: 16px; /* 実測 937:1223: 16px */
  font-weight: 500;
  line-height: 1.448;
}
.p-tokusyu__advice-item + .p-tokusyu__advice-item {
  margin-top: 20px; /* 実測(PC): 4548 -> 4595 の送り47 - 行高27 */
}
.p-tokusyu__advice-item {
  /* 🔒 監査#31「Figmaは⚠三角アイコン3つ→実装は●ビュレット」
     旧実装は「SVG未書き出しのため簡略化」した紺の丸だった。
     Figma `937:1220`（注意マークのフリーアイコン・27×27・塗り#005CA7）を
     SVGで書き出して差し替える（maskで currentColor を効かせる）。 */
}
.p-tokusyu__advice-item::before {
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 27px; /* 実測 937:1220 */
  height: 27px;
  background-color: #005ca7; /* 実測 937:1222: #005CA7 */
  mask-image: url("../img/tokusyu/icon-caution.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("../img/tokusyu/icon-caution.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  content: "";
}

/* ==========================================================================
   タブレット以上（769px〜）
   ========================================================================== */
@media (min-width: 769px) {
  .p-tokusyu__point {
    margin-top: 100px;
  }
  .p-tokusyu__point-item {
    display: grid;
    align-items: center;
    /* 🔒 実測(PC1440): 文章 x120 w662 ／ 写真 x880 w560（右端1440＝フレーム右端に裁ち落とし）
       ＝写真は右端まで届くので、右側に余白を作らない（max-width や右paddingで止めない） */
    grid-template-columns: minmax(0, 662fr) minmax(0, 560fr);
    gap: 6.81%; /* 実測: 782 -> 880 の98px / 1440 */
    padding: 0 0 0 8.33%; /* 実測: 左120px / 1440 */
  }
  .p-tokusyu__point-item + .p-tokusyu__point-item {
    margin-top: 80px;
  }
  .p-tokusyu__point-item {
    /* 🔒 実測: **5項目すべて 文章が左・写真が右**（全カードで画像 x=880・右端1440＝フレーム右端）。
       従来の「左右交互」は誤り（Figma書き出し画像でも5枚とも右）。 */
  }
  .p-tokusyu__point-item .p-tokusyu__point-media {
    order: 2;
    margin-right: 0;
  }
  .p-tokusyu__point-item {
    /* PCの角丸は左側のみ36px（実測 937:1326: [36,0,0,36]） */
  }
  .p-tokusyu__point-item .p-tokusyu__point-img {
    border-radius: 36px 0 0 36px;
  }
  .p-tokusyu__point-body {
    margin-top: 0;
  }
  .p-tokusyu__item {
    padding: 0 32px;
  }
  /* 🔒 2段の千鳥（Figma実測）。列幅はFigmaのタイル幅比を fr で再現する＝固定pxにしない。
     1段目 まくら272 / クッション272 / 絨毯247 / 玄関マット247
     2段目 財布247 / バック185 / キーケース173（1段目の隙間へ食い込むよう左右に余白を置く） */
  .p-tokusyu__item-list {
    max-width: 1172px; /* 実測(PC) 937:1275: item枠1172 */
    margin-inline: auto;
    gap: 40px 24px;
  }
  .p-tokusyu__item-list--upper {
    grid-template-columns: minmax(0, 272fr) minmax(0, 272fr) minmax(0, 247fr) minmax(0, 247fr);
  }
  .p-tokusyu__item-list--lower {
    /* 左右の余白列で千鳥にずらす（実測: 2段目は x263 から始まり x1176 で終わる） */
    grid-template-columns: minmax(0, 129fr) minmax(0, 247fr) minmax(0, 185fr) minmax(0, 173fr) minmax(0, 129fr);
    margin-top: 40px;
  }
  .p-tokusyu__item-list--lower .p-tokusyu__item-cell:first-child {
    grid-column: 2;
  }
  .p-tokusyu__price {
    padding: 0 32px;
  }
  /* 監査#33: PCは他の見出しと同じ 泡42 / gap25（実測 937:1277/1278）＝SPの縮小を打ち消す */
  .p-tokusyu__heading--long {
    gap: 25px;
  }
  .p-tokusyu__heading--long .p-tokusyu__heading-bubble {
    width: 42px;
    height: 42px;
  }
  .p-tokusyu__price-table {
    max-width: 880px; /* 実測(PC) 937:1234: price枠880 */
    margin-inline: auto;
  }
  .p-tokusyu__note {
    max-width: 880px;
    margin-inline: auto;
  }
  .p-tokusyu__advice-panel {
    max-width: 1080px; /* 実測(PC) 937:1215: advice枠1080 */
    margin-inline: auto;
    padding: 52px 106px; /* 実測(PC): 4421 -> Container y4473 / x179 -> 285 */
  }
  /* 8/24同席確認⓪: PCのFigma実測=タイトル下47/サブ見出し下24/※注記は本文と同じfs18・#333・行続き */
  .p-tokusyu__point-subtitle {
    margin-top: 36px; /* 描画gap47に着地（行ボックス差込み） */
  }
  .p-tokusyu__point-text {
    margin-top: 24px;
  }
  .p-tokusyu__point-note {
    margin-top: 0;
    color: #333333;
    font-size: 18px;
    line-height: 1.7;
  }
  /* 8/24同席確認 追加: アイテム列の字下げ＝Figma PC実測で表左端+124px */
  .p-tokusyu__price-table tbody th {
    padding-left: 124px;
  }
}
/* ==========================================================================
   PC専用（1440px〜）＝Figma実数値に着地させる
   ========================================================================== */
@media (min-width: 1440px) {
  .p-tokusyu__point-item {
    /* 実測(PC1440): 文章右端782 -> 写真 x880 ＝ 98px（旧値58pxは max-width:1320 前提の残骸） */
    gap: 98px;
    padding-left: 120px;
  }
  .p-tokusyu__point-item + .p-tokusyu__point-item {
    margin-top: 80px; /* 実測(PC): point01 y626 -> point02 y1030（324+80） */
  }
  .p-tokusyu__item {
    margin-top: 120px;
  }
  .p-tokusyu__price {
    margin-top: 120px;
  }
  .p-tokusyu__advice {
    margin-top: 120px; /* 実測(PC): price下端4321 -> advice y4421 */
  }
  /* contact帯との余白だけ実測が他ページと異なる（実測128px・共通の既定は100px） */
  .p-tokusyu__advice + .c-contact-band {
    margin-top: 128px;
  }
}
/* ==========================================================================
   SP周回（2026-08-27）: Figma SP 983:1298 実測に合わせたSP限定修正。768px以下限定
   ========================================================================== */
@media (max-width: 768px) {
  /* canvas下端248 → point 278 ＝ 30（旧60） */
  .p-tokusyu__point {
    margin-top: 30px;
  }
  /* point下端3700.5 → item 3790.5 ＝ 90（旧80） */
  .p-tokusyu__item {
    margin-top: 90px;
  }
  /* item下端4836 → price 4926 ＝ 90（旧80） */
  .p-tokusyu__price {
    margin-top: 90px;
  }
  /* price下端5561 → advice 5611 ＝ 50（旧80） */
  .p-tokusyu__advice {
    margin-top: 50px;
  }
  /* 料金表: ヘッダfs24・行fs20/lh1.45・行padding8（983:1424系 実測） */
  .p-tokusyu__price-table thead th {
    font-size: 24px;
    white-space: nowrap;
  }
  .p-tokusyu__price-table tbody th,
  .p-tokusyu__price-table tbody td {
    padding-block: 8px;
    font-size: 20px;
    line-height: 1.45;
  }
  /* 注意事項: 本文lh1.7（実測 lh27.2/16。現1.45） */
  .p-tokusyu__advice li,
  .p-tokusyu__advice p {
    line-height: 1.7;
  }
}
/* 見出し左の円＝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-tokusyu__heading {
    gap: 10px;
  }
  .p-tokusyu__heading-bubble {
    width: 29px;
    height: 29px;
  }
}