@charset "UTF-8";
/* ==========================================================================
   p-shiminuki  シミ抜き「匠」コース（下層①・4枚目）
   出典: Figma PC 937:421（1440×5138）/ SP 913:7763（390×5695）
   数値・色は 2026-08-17 に複製ファイルから REST /nodes で実取得。目視推測ゼロ。
   voice は共通パーツ c-voice（common.scss）へ切り出し済み。

   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）
   設計座標（PC）: FV y-40 / point01 y622 / stain y1402 / price y1914 / voice y2492 / contact y4079
   設計座標（SP）: FV y24 / point01 y393 / stain y1452 / price y1927 / voice y2458 / contact y4334
   ========================================================================== */
/* --- 共通見出し（泡＋テキスト・中央） --- */
.p-shiminuki__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px; /* 実測(PC): 泡右端177 -> 見出し201 */
  margin: 0;
  color: #333333; /* 実測 937:520: #333333 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px); /* 実測: SP24 / PC32 */
  font-weight: 700;
  line-height: 1.448;
}

.p-shiminuki__heading-bubble {
  width: 42px;
  height: 42px;
}

/* 注記（グレー小文字・複数箇所で使う） */
.p-shiminuki__note {
  margin: 20px 0 0;
  color: #828282; /* 実測 937:450 / 937:513: #828282 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   point01  こだわり（本文＋写真2枚）
   ========================================================================== */
.p-shiminuki__point01 {
  /* 実測(SP): FV帯下端343（canvas_h_sp=343・FV本文込み）-> point01 y393 ＝ 50。
     旧60はFV本文欠落時代の値（帯248前提）＝同席指摘 匠①の修正で帯を実測高に直したため再計算 */
  margin-top: 50px;
  padding: 0 22px;
}

/* 🔒 49件「（SP：テキスト・写真の順番が違うので、そちらもご確認ください。）」
   実測(SP 913:7783): **写真(y498) → テキスト(y724)** の順。実装はDOM順が
   テキスト→写真だったため、SPだけ order で入れ替える（PCは横並びなので影響なし） */
.p-shiminuki__point01-body {
  display: flex;
  flex-direction: column;
  margin-top: 70px; /* 実測(SP): 見出し下端428 -> card_01 y498 */
}

.p-shiminuki__point01-imgs {
  order: 1;
}

.p-shiminuki__point01-text {
  order: 2;
  margin-top: 26px; /* 実測(SP): 写真下端704 -> テキスト724 */
}

.p-shiminuki__point01-imgs {
  /* SPは写真が本文の上（実測: point_img y498 → card y724） */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-shiminuki__point01-img01 {
  display: block;
  width: 100%;
  max-width: 361px; /* 実測(SP) 913:7790: 361×206 */
  height: auto;
  aspect-ratio: 361/206;
  /* 🔒 左上・左下のみ角丸（実測(SP) 913:7790: [18,0,0,18]）＝右は画面端まで裁ち落とす */
  border-radius: 18px 0 0 18px;
  object-fit: cover;
  /* 下地なし: 画像の角がアルファ透過（8/24黒角修復）のため、下地があるとグレーの弧が透ける */
}

/* 2枚目の小さい写真はSPでは非表示（Figma SPに存在しない） */
.p-shiminuki__point01-img02 {
  display: none;
}

/* 🔴 監査#28: FigmaがPC(4行)とSP(5行)で不一致のため、**表を2つ出してCSSで出し分ける**
   （共通パーツ c-price-table は変更しない）。SP既定＝5行版を表示。 */
.p-shiminuki__price-pc {
  display: none;
}

.p-shiminuki__lead {
  margin: 24px 0 0;
  color: #005ca7; /* 実測 937:523: #005CA7 */
  font-family: "Zen Old Mincho", serif; /* 実測: Zen Old Mincho 700 */
  font-size: clamp(24px, 19.5428571429px + 1.1428571429vw, 36px); /* 実測: SP24 / PC36 */
  font-weight: 700;
  line-height: 1.448;
}

.p-shiminuki__sublead {
  margin: 20px 0 0;
  color: #333333;
  font-size: 20px; /* 実測 937:524: 20px 700 */
  font-weight: 700;
  line-height: 1.6;
}

.p-shiminuki__text {
  margin: 20px 0 0;
  color: #333333;
  font-size: 18px; /* 実測 937:525: 18px 500 */
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   stain  対応できるシミ（水色パネル）
   ========================================================================== */
.p-shiminuki__stain {
  margin-top: 90px; /* 実測(SP): point01下端1362 -> stain y1452 */
  padding: 0 22px;
}

.p-shiminuki__stain-panel {
  /* 実測(PC) 937:510: 1200×216 r24 #F3FBFF / SP 390×280 */
  margin-top: 70px;
  padding: 25px;
  border-radius: 24px;
  background: #f3fbff;
  text-align: center;
}

.p-shiminuki__stain-label {
  margin: 0;
  color: #333333;
  font-size: clamp(20px, 18.5142857143px + 0.380952381vw, 24px); /* 実測: 24px 500 */
  font-weight: 500;
  line-height: 1.448;
}

.p-shiminuki__stain-text {
  margin: 20px 0 0;
  color: #333333;
  font-size: clamp(18px, 15.7714285714px + 0.5714285714vw, 24px); /* 実測(PC) 937:512: 24px / SP 18px */
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================================================
   price（1表のみ・性別区分なし）
   ========================================================================== */
.p-shiminuki__price {
  margin-top: 90px; /* 実測(SP): stain下端1837 -> price y1927 */
  padding: 0 9px; /* 実測(SP): price枠 x9 w372 */
}

/* ==========================================================================
   タブレット以上（769px〜）＝比率で組む
   ========================================================================== */
@media (min-width: 769px) {
  /* 🔒 49件「浜松白洋舎のこだわり：タイトル中央揃えです」
     実測(PC): このセクションの見出しだけ **左寄せ**（frame x135・中央328／ページ中央は720）。
     他の見出し（対応できるシミ722 / 料金720 / お客様の声740）は中央＝共通の center のまま。
     SPは実測どおり中央（title frame 中央196 ≒ フレーム中央195）＝SPは変更しない */
  .p-shiminuki__point01 .p-shiminuki__heading {
    justify-content: flex-start;
  }
  /* 🔒 実測(PC1440): point01枠は x125 -> 右端1445（フレーム右端1440を超える）＝**右へ裁ち落とす**。
     従来の「1320px中央寄せ」だと写真が右端に届かず、角丸が4隅とも見えてしまう */
  .p-shiminuki__point01 {
    width: auto;
    /* 実測(PC): FV帯下端594 -> 見出し937:520 y622 ＝ 28（旧100はFV本文欠落時代の目分量・DOM実測694で72px低かった） */
    margin: 28px 0 0;
    padding: 0 0 0 8.68%; /* 実測: 左125px / 1440 */
  }
  /* 🔴 監査#26: PCは Figma 937:521 のとおり **左テキスト（937:522 x125 w662）／右に写真2枚**の横並び。
     ここに `display:flex; gap` はあったが **SP基底の `flex-direction: column` と `order` を
     打ち消していなかった**ため、実際には縦積みのまま＝写真が左上に重なり本文がその下へ落ちていた
     （＝監査の「横並びが崩壊」）。∴ 方向と order を明示的に戻す。 */
  .p-shiminuki__point01-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 7.4%; /* 実測(PC): 本文右端801 -> 写真x885 ＝ 98/1320 */
    margin-top: 80px; /* 実測(PC): 見出し下端668 -> contents y748 */
  }
  /* SPは「写真→本文」だがPCは「本文→写真」＝order を実測どおりに戻す */
  .p-shiminuki__point01-text {
    order: 1;
    margin-top: 0;
  }
  .p-shiminuki__point01-imgs {
    order: 2;
  }
  /* 写真列は右端まで（Figma: 写真 x885 w560 -> 右端1445） */
  .p-shiminuki__point01-imgs {
    margin-right: 0;
  }
  .p-shiminuki__point01-text {
    flex: 1;
    min-width: 0;
  }
  .p-shiminuki__point01-imgs {
    position: relative;
    flex-shrink: 0;
    width: 42.4%; /* 実測(PC): 560/1320 */
    gap: 0;
  }
  .p-shiminuki__point01-img01 {
    max-width: none;
    aspect-ratio: 560/319; /* 実測(PC) 937:526 */
    /* 🔒 実測(PC) 937:526: [36,0,0,36]＝左側のみ角丸（従来の 0 は取りこぼし） */
    border-radius: 36px 0 0 36px;
  }
  /* 2枚目＝1枚目の右下に重ねる（実測 937:527: 232×268 r16・x1165 y1003） */
  .p-shiminuki__point01-img02 {
    display: block;
    position: relative;
    z-index: 2;
    width: 41.4%; /* 232/560 */
    max-width: 232px;
    height: auto;
    aspect-ratio: 232/268;
    margin-top: -13%;
    /* 実測(PC) 937:527: x1165 右端1397＝**右端まで行かない**（写真01の右端1445から48px内側） */
    margin-right: 8.57%; /* 48/560 */
    margin-left: auto;
    border-radius: 16px;
    object-fit: cover;
    /* 下地なし: 画像の角がアルファ透過（8/24黒角修復）のため、下地があるとグレーの弧が透ける */
  }
  /* 監査#28: PCは4行版（実測 937:466「ズボン・スカート」1行） */
  .p-shiminuki__price-pc {
    display: block;
  }
  .p-shiminuki__price-sp {
    display: none;
  }
  .p-shiminuki__lead {
    margin-top: 0;
  }
  .p-shiminuki__stain {
    width: min(1200px, 100% - 80px); /* 実測(PC): point枠 1200幅 */
    margin: 160px auto 0;
    padding: 0;
  }
  .p-shiminuki__stain-panel {
    margin-top: 90px; /* 実測(PC): 見出し下端1448 -> パネル y1538 */
    padding: 44px 25px;
  }
  .p-shiminuki__price {
    width: min(451px, 100% - 80px); /* 実測(PC): price枠 451幅 */
    margin: 160px auto 0;
    padding: 0;
  }
  .p-shiminuki__price .c-price-table {
    margin-top: 90px; /* 実測(PC): 見出し下端1960 -> contents y2050 */
  }
}
/* ==========================================================================
   PC 1440px以上＝Figma固定値の厳密再現
   ========================================================================== */
@media (min-width: 1440px) {
  .p-shiminuki__point01-body {
    gap: 98px; /* 実測(PC): 本文右端801 -> 写真x885（誤差込みで98） */
  }
  .p-shiminuki__point01-imgs {
    width: 560px; /* 実測(PC) 937:526 */
  }
  .p-shiminuki__point01-img02 {
    width: 232px;
    margin-top: -76px; /* 実測: 写真1下端1079 -> 写真2 y1003 */
  }
}
/* ==========================================================================
   SP周回（2026-08-27）: Figma SP 913:7763 実測に合わせたSP限定修正。768px以下限定。
   ========================================================================== */
@media (max-width: 768px) {
  /* 料金表: ヘッダfs24・行fs20/padding8（実測 913:7801系。btob/deluxeと同一パターン） */
  .p-shiminuki .c-price-table__table thead .c-price-table__col {
    font-size: 24px;
    white-space: nowrap;
  }
  .p-shiminuki .c-price-table__table tbody .c-price-table__col {
    padding-block: 8px;
    font-size: 20px;
    line-height: 1.45;
  }
  /* お客様の声: SPは左寄せ・本文幅318（実測 913:7840系 align=LEFT x34.5 w318。中央寄せは別ページの既定） */
  .p-shiminuki .c-voice__text {
    max-width: 318px;
    margin-inline: auto;
    text-align: left;
  }
  /* 対応できるシミ: 本文fs18/lh1.45（実測 913:7796: fs18 lh26.1） */
  .p-shiminuki__stain-text {
    font-size: 18px;
    line-height: 1.45;
  }
  /* 🔴 実測(2026-08-28) 913:7788: Figmaは letterSpacing=0。実装は body の
     $letter-spacing-base(0.03em=0.54px) が効いて 1行あたり約8px詰まり、
     **本文が14行→16行**に増えて以降のセクションを押し下げていた（S-10/罠#41と同型）。
     共通FV要素（__subtitle/__body）は既に ls:0 で個別に打ち消されているが、
     ページ本文には入っていなかった。 */
  .p-shiminuki__text,
  .p-shiminuki__sublead,
  .p-shiminuki__lead {
    letter-spacing: 0;
  }
  /* 🔴 実測(2026-08-28) 913:7790: 画像は x31 y498 361.6×206（内側22pxより右へ出る）。
     実装は max-width:361 がコンテナ346に切られ 346×197.4 に縮んでいた（-8.6px）。
     ∴ 右へはみ出させて実寸361を確保する（Figmaは右端で裁ち落とす意匠）。 */
  .p-shiminuki__point01-img01 {
    width: 361px;
    max-width: none;
    margin-left: 9px; /* 実測: Figma x31 − カード左端22 */
  }
  /* 実測: 画像下端704 → lead 724 ＝ 20px（実装は gap20 + margin24 で約50pxあった） */
  .p-shiminuki__lead {
    margin-top: 0;
  }
  /* 🔴 罠#41（際どい幅）: 913:7787「匠の技術で、一着一着に最適な復元を。」は
     Figma SPで **w368 h32 ＝ 1行**。実装のコンテナ幅346では22px足りず2行に折り返し、
     この+32pxが以降のセクションを丸ごと押し下げていた（本文 y866→925.9 ＝ +59.9）。
     箱・文字位置は動かさず、負のmargin-rightで折返し限界だけ広げる。 */
  .p-shiminuki__sublead {
    margin-right: -24px;
  }
}
/* SP修正（ユーザー実機指摘 匠①②④・2026-08-28夜・Figma SP 913:7763 実測） */
@media (max-width: 768px) {
  /* ② 見出し円29×29・gap10（Figma実測。42/24はPC値の漏れ） */
  .p-shiminuki__heading {
    gap: 10px;
  }
  .p-shiminuki__heading-bubble {
    width: 29px;
    height: 29px;
  }
  /* ① FVタイトルの括弧「」をFigma同様に詰める（palt）。全角のままだと
     タイトルが横に伸びFVイラストへ食い込む（Figma実測: 文字ボックス294/実装約308） */
  .c-page-title__title {
    font-feature-settings: "palt" 1;
  }
  /* ④ 料金見出し→表の間隔＝Figma 見出し上端1927→表上端2032=105px
     （見出し高は円29px化で35＝余白70。実測で105を確認済み） */
  .p-shiminuki__price-sp {
    margin-top: 70px;
  }
}