@charset "UTF-8";
/* ==========================================================================
   p-clothing  衣類クリーニング（下層①）固有スタイル
   出典: Figma PC 937:1593（1440×3511）/ SP 913:8136（390×3855）
   数値はすべて 2026-08-09 API実取得（MCP get_design_context + REST /images SVG実測）
   設計座標（PC）: 見出し帯y594 / sec01 y720 / sec02帯y1264 / sec03見出しy1814
                   動画y1966 / contact y2523
   設計座標（SP）: 見出しy248 / card01 y353.5 / sec02帯y1359.5 / sec03見出しy2174.5
                   動画y2287.5 / contact y2503
   ========================================================================== */
/* --- 見出し帯「浜松白洋舎のこだわり」（泡＋ゴシック太字） --- */
.p-clothing__heading {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px; /* SP実測 */
  color: #333333;
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px); /* SP24/PC32 実測 */
  font-weight: 700;
  line-height: normal;
}

.p-clothing__heading-bubble {
  width: 29px; /* SP実測 */
  height: auto;
}

.p-clothing__heading-text {
  letter-spacing: 0;
}

/* --- セクション共通（番号見出し＋本文＋写真） --- */
.p-clothing__sec-body {
  margin-top: 20px; /* SP実測: 見出し下gap20 */
  font-size: 18px; /* PC/SP共通実測 */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

.p-clothing__sec-body p {
  margin: 0;
}

.p-clothing__sec-photo img {
  display: block;
  width: 359px; /* SP実測 */
  height: auto;
  margin-left: 9px; /* SP実測: カード内で右端付け */
  border-radius: 18px 0 0 18px; /* SP実測: 左のみ角丸 */
}

/* --- sec01 --- */
.p-clothing__sec--01 {
  margin-top: 70.5px; /* SP実測: 見出し下端283 → card01 top353.5 */
}

.p-clothing__sec--01 .p-clothing__sec-inner {
  display: flex;
  flex-direction: column;
  width: 368px; /* SP実測: x22で右端付け */
  margin-left: 22px;
}

.p-clothing__sec--01 .p-clothing__sec-text {
  order: 2; /* SP: 写真が上・テキストが下 */
  width: 354px;
  margin-top: 20px; /* SP実測: 写真下gap20 */
}

.p-clothing__sec--01 .p-clothing__sec-photo {
  order: 1;
}

/* --- sec02（薄水色帯） --- */
.p-clothing__sec--02 {
  position: relative;
  margin-top: 50px; /* SP実測: card01下端1261.5 → item02 top1311.5 */
  padding-bottom: 22px; /* SP実測: テキスト下端2102.5 → 帯下端2124.5 */
}

/* 帯: SP実測 390×765・写真上端+48から・右下のみ角丸24 */
.p-clothing__sec--02::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  height: calc(100% - 48px);
  background: #f3fbff;
  border-radius: 0 0 24px 0;
}

.p-clothing__sec--02 .p-clothing__sec-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 368px;
  margin-left: auto; /* SP実測: 右端付け */
}

.p-clothing__sec--02 .p-clothing__sec-text {
  order: 2;
  width: 354px;
  margin-top: 20px;
}

.p-clothing__sec--02 .p-clothing__sec-photo {
  order: 1;
}

.p-clothing__sec--02 .p-clothing__sec-body {
  line-height: 1.7; /* SP実測（PCは1.6・sec01と異なる設計値のまま再現） */
}

/* --- sec03（見出し＋YouTube動画）---
   🔴 白洋舎様FB 8/29 で旧動画を削除中＝`page-clothing.php` の $press_video_id が空の間は
      セクション自体が出力されない（このスタイルは未使用）。新しい動画IDを入れれば即復活する。 */
.p-clothing__sec--03 {
  margin-top: 50px; /* SP実測: 帯下端2124.5 → 見出しtop2174.5 */
}

.p-clothing__sec-head {
  display: flex;
  justify-content: center;
}

/* lite-youtube facade: サムネ＋再生アイコン → クリックでiframe化（p-clothing.js） */
.p-clothing__video {
  position: relative;
  width: 346px; /* SP実測 */
  height: 165.2px; /* SP実測 */
  margin: 30px auto 0; /* SP実測: 見出し下端2257.5 → 動画top2287.5 */
  overflow: hidden;
  background: #d9d9d9;
  border-radius: 3.6px; /* SP実測 */
}

.p-clothing__video-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.p-clothing__video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-clothing__video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85.7px; /* SP実測 */
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.35)); /* サムネ上での視認性（枠色実測は#D9D9D9地に白ロゴ） */
}

.p-clothing__video-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* c-contact-band の直前余白（動画なしのときは sec02帯下端からの余白として効く） */
.c-contact-band {
  margin-top: 50px; /* SP実測 */
}

/* ==========================================================================
   PC（769px〜）: 1440設計の実測座標へ
   ========================================================================== */
@media (min-width: 769px) {
  .p-clothing__heading {
    gap: 24px; /* PC実測 */
  }
  .p-clothing__heading-bubble {
    width: 42px; /* PC実測 */
  }
  /* sec01タイトルの改行はSPのみ（PC実測は1行） */
  .p-clothing__sec--01 .c-num-title br {
    display: none;
  }
  /* sec02タイトル2行は行間1.6（PC実測・SPはnormal） */
  .p-clothing__sec--02 .c-num-title__title {
    line-height: 1.6;
  }
  .p-clothing__sec-inner {
    align-items: center;
    gap: 98px; /* PC実測 */
    padding-left: min(8.34vw, 120px); /* 1440で120px（実測）・タブレット帯は比例縮小 */
  }
  .p-clothing__sec--01 .p-clothing__sec-inner,
  .p-clothing__sec--02 .p-clothing__sec-inner {
    flex-direction: row;
    width: auto;
    margin-left: 0;
  }
  .p-clothing__sec--01 .p-clothing__sec-text,
  .p-clothing__sec--02 .p-clothing__sec-text {
    order: 1;
    flex: 0 1 662px; /* PC実測: テキスト列662 */
    width: auto;
    margin-top: 0;
  }
  .p-clothing__sec--01 .p-clothing__sec-photo,
  .p-clothing__sec--02 .p-clothing__sec-photo {
    order: 2;
    flex: 0 1 560px;
  }
  .p-clothing__sec-photo img {
    width: 560px; /* PC実測 */
    max-width: 100%;
    margin-left: 0;
    border-radius: 36px 0 0 36px; /* PC実測 */
  }
  .p-clothing__sec-body {
    margin-top: 24px; /* PC実測: 見出し(92/138)+gap24 */
  }
  .p-clothing__sec--01 {
    margin-top: 80px; /* PC実測: 見出し下端640 → sec01 top720 */
  }
  .p-clothing__sec--02 {
    margin-top: 80px; /* PC実測: sec01下端1184 → 帯top1264 */
    padding: 38px 0; /* PC実測: 帯470・コンテンツ394・上下38 */
  }
  .p-clothing__sec--02::before {
    top: 0;
    width: 1047px; /* PC実測: 帯1047×470・右のみ角丸24 */
    height: 470px;
    max-width: 72.71%;
    border-radius: 0 24px 24px 0;
  }
  .p-clothing__sec--02 .p-clothing__sec-body {
    line-height: 1.6; /* PC実測 */
  }
  .p-clothing__sec--03 {
    margin-top: 80px; /* PC実測: 帯下端1734 → 見出しtop1814 */
  }
  .p-clothing__video {
    width: 957px; /* PC実測 */
    height: 457px; /* PC実測 */
    max-width: calc(100% - 40px);
    margin-top: 60px; /* PC実測: 見出し下端1906 → 動画top1966 */
    border-radius: 10px; /* PC実測 */
  }
  .p-clothing__video-icon {
    width: 237px; /* PC実測 */
  }
  .c-contact-band {
    margin-top: 100px; /* PC実測 */
  }
}