/* ============================================
 * 塗装ファッション一覧ページ (page-paint-fashion.php)
 * 2026.06 新規作成
 *
 * 設計方針（page-menu.css に準拠）:
 * - box-sizing: border-box / width:100% + max-width でレスポンシブ
 * - フォントサイズ・余白・gap は clamp() で可変
 * - レイアウト構造の切り替え（グリッド列数等）のみメディアクエリ
 *
 * TODO: Figmaデザイン確定後に実装
 * ============================================ */

/* ============================================
 * MV（メインビジュアル） .pf-mv
 * Figma実装（PC版）。ロゴ＋リード文＋ギャラリー（Swiperセンターモード）。
 * 中央スライドが最大、両隣が中、外側が小かつ薄い。
 * ※スライダーの仕組み上、可変幅スロット＋transform拡大で表現するため
 *   Figma静止画と完全な数値一致ではなく見た目を合わせる方針。
 * ============================================ */
/* パンくずの上に余白（このページのみ） */
.pf-pageheader {
  padding-top: 20px;
}

.pf-mv {
  background: #fff;
  /* SP(375)→PC(1920) で流体化。top 22→42 / bottom 22→60 */
  padding-block: clamp(22px, 17.15px + 1.29vw, 42px) clamp(22px, 12.78px + 2.46vw, 60px);
  overflow: hidden; /* 左右にはみ出す外側スライドを隠す */
  box-sizing: border-box;
}

.pf-mv *,
.pf-mv *::before,
.pf-mv *::after {
  box-sizing: border-box;
}

/* ---- ヘッダー（ロゴ＋リード文） ---- */
.pf-mv__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 17.15px + 1.29vw, 42px);
  margin-bottom: clamp(22px, 17.15px + 1.29vw, 42px);
}

.pf-mv__logo {
  margin: 0;
  line-height: 0;
}

.pf-mv__logo img {
  display: block;
  width: 258px;
  height: 26px;
}

.pf-mv__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 5.57px + 0.65vw, 18px);
  text-align: center;
}

.pf-mv__catch {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(18px, 16.06px + 0.52vw, 26px);
  line-height: 1;
  letter-spacing: 0.12em; /* 3.12px / 26px */
  color: #000;
}

.pf-mv__sub {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(14px, 13.51px + 0.13vw, 16px);
  line-height: 1;
  letter-spacing: 0.1em; /* 1.6px / 16px */
  color: #616161;
  white-space: nowrap;
}

/* キャッチコピーのSP専用改行（PCでは1行・SPで「、」後に改行） */
.pf-mv__br-sp {
  display: none;
}

/* ---- ギャラリー（Swiperセンターモード） ---- */
.pf-mv__slider {
  width: 100%;
  overflow: visible; /* 中央スライドの拡大が切れないように */
}

.pf-mv__slider .swiper-wrapper {
  align-items: center; /* 高さの異なるスライドを縦中央揃え */
}

.pf-mv__slide {
  width: 398.667px; /* アクティブ（最大）サイズを基準スロットに */
  display: flex;
  justify-content: center;
}

.pf-mv__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7px, 5.30px + 0.45vw, 14px);
  opacity: 0.1; /* 既定（外側スライド）の透明度 */
  transform: scale(0.6271); /* 250 / 398.667 */
  transform-origin: center center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pf-mv__img {
  display: block;
  width: 398.667px;
  height: 460px;
  overflow: hidden;
  line-height: 0;
}

.pf-mv__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-mv__label {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 8.54px + 0.39vw, 16px);
  line-height: 1;
  color: #4a4a4a;
  white-space: nowrap;
}

/* 隣接スライド（中サイズ） */
.pf-mv__slider .swiper-slide-prev .pf-mv__card,
.pf-mv__slider .swiper-slide-next .pf-mv__card {
  transform: scale(0.8153); /* 325.01 / 398.667 */
  opacity: 0.3;
}

/* アクティブスライド（中央・最大） */
.pf-mv__slider .swiper-slide-active .pf-mv__card {
  transform: scale(1);
  opacity: 1;
}

/* ---- SP対応 ----
 * PC版を約1/2にスケールした構成（中央画像 398.667×460 → 200×230）。
 * 拡大率（scale 0.6271 / 0.8153 / 1）は共通のためそのまま流用し、
 * 基準スロット幅・画像サイズ・テキスト・余白のみSP値に差し替える。 */
@media (max-width: 767px) {
  /* サイズ・余白・gap は PC側 clamp() に統合済み。ここはレイアウト変更のみ残す。 */
  .pf-mv__header {
    padding-inline: 24px; /* SP専用の左右ガター */
  }

  .pf-mv__logo img {
    width: 170px;
    height: 17px;
  }

  .pf-mv__catch {
    line-height: 1.5; /* 2行折返し用 */
  }

  .pf-mv__br-sp {
    display: inline;
  }

  .pf-mv__sub {
    line-height: 1.4;
    white-space: normal; /* SPでは折返す */
  }

  .pf-mv__slide {
    width: 200px; /* アクティブ（最大）サイズ */
  }

  .pf-mv__img {
    width: 200px;
    height: 230px;
  }
}

/* ============================================
 * イントロ説明セクション .pf-intro
 * Figma実装。見出し（Noto Serif JP 26px）＋リード文（16px / 行間2）。
 * Figmaの px-220（=コンテンツ幅1000px）は max-width で再現。
 * ============================================ */
.pf-intro {
  background: #fff;
  padding-block: clamp(24px, 19.63px + 1.17vw, 42px) 60px;
  box-sizing: border-box;
}

.pf-intro *,
.pf-intro *::before,
.pf-intro *::after {
  box-sizing: border-box;
}

.pf-intro__inner {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: clamp(20px, 24.97px - 0.26vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 4.12px + 1.04vw, 24px);
}

.pf-intro__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(18px, 16.06px + 0.52vw, 26px);
  line-height: 1;
  letter-spacing: 0.12em; /* 3.12px / 26px */
  color: #000;
  text-align: center;
}

.pf-intro__text {
  width: 100%;
  max-width: 620px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(14px, 13.51px + 0.13vw, 16px);
  line-height: 2;
  color: #616161;
  text-align: center;
}

.pf-intro__line {
  margin: 0;
}

/* ---- SP対応 ---- */
@media (max-width: 767px) {

  .pf-intro__title {
    line-height: 1.5;
    letter-spacing: 0.12em; /* 2.16px / 18px */
  }

}

/* ============================================
 * スタイルから探す .pf-style
 * Figma実装（PC版）。見出し＋スタイルタブ（11種）＋
 * 詳細スライダー（Swiper／左右矢印）。
 * Figmaの px-220（=コンテンツ幅1000px）は max-width で再現。
 * 各スタイルのテーマ色は .pf-style-accent--<key> の --pf-accent で切替。
 * ============================================ */
.pf-style {
  background: #f7f7f7;
  overflow: hidden; /* 左右にはみ出す矢印が横スクロールを生まないように */
  box-sizing: border-box;
}

.pf-style *,
.pf-style *::before,
.pf-style *::after {
  box-sizing: border-box;
}

/* スタイル別テーマ色（.pf-style / .pf-cases 共通） */
.pf-style-accent--wa-modern    { --pf-accent: #485261; }
.pf-style-accent--california   { --pf-accent: #6392ab; }
.pf-style-accent--brooklyn     { --pf-accent: #6b5451; }
.pf-style-accent--south-europe { --pf-accent: #e9cdb6; }
.pf-style-accent--nordic       { --pf-accent: #005257; }
.pf-style-accent--country      { --pf-accent: #8c8c66; }
.pf-style-accent--french       { --pf-accent: #007fae; }
.pf-style-accent--lohas        { --pf-accent: #7e7164; }
.pf-style-accent--retro        { --pf-accent: #e8a857; }
.pf-style-accent--shabby       { --pf-accent: #636f6d; }
.pf-style-accent--sp-pop       { --pf-accent: #ca5951; }

/* ---- 見出し＋タブ ---- */
.pf-style__head {
  padding-block: 60px 30px;
}

.pf-style__head-inner {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: clamp(20px, 24.97px - 0.26vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 15.09px + 0.78vw, 30px);
}

.pf-style__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(18px, 16.06px + 0.52vw, 26px);
  line-height: 1;
  letter-spacing: 0.12em; /* 3.12px / 26px */
  color: #616161;
  text-align: center;
}

.pf-style__tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pf-style__tab-item {
  display: flex;
}

.pf-style__tab {
  width: 70px;
  height: 60px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f1f1f1;
  border-radius: 6px;
  background: #fff;
  color: #616161;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em; /* 0.44px / 11px */
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pf-style__tab.is-active {
  background: var(--pf-accent, #485261);
  border-color: var(--pf-accent, #485261);
  color: #fff;
}

/* 南欧はアクセント色が淡く白文字が読みにくいため、文字色を黒にする */
.pf-style__tab.pf-style-accent--south-europe.is-active {
  color: #221714;
}

/* ---- 詳細スライダー ---- */
.pf-style__detail {
  padding-block: 0 60px;
}

.pf-style__detail-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}

.pf-style__slider {
  width: 100%;
}

.pf-style__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.pf-style__arrow:hover {
  opacity: 0.6;
}

.pf-style__arrow.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.pf-style__arrow img {
  display: block;
  width: auto;
  height: 74px;
}

.pf-style__arrow--prev {
  left: -60px;
  transform: translateY(-50%) scaleX(-1); /* 矢印を左向きに反転 */
}

.pf-style__arrow--next {
  right: -60px;
}

/* ---- スライド（1スタイル分の詳細） ---- */
.pf-style-slide {
  height: auto; /* 高さの異なるスライドに対応 */
}

.pf-style-slide__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 17.03px + 0.26vw, 22px);
}

.pf-style-slide__divider {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--pf-accent, #485261);
}

.pf-style-slide__content {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 6.54px + 0.39vw, 14px);
}

/* ヘッダー（見出し＋タグ） */
.pf-style-slide__head {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 4.6px + 0.91vw, 22px);
  padding-inline: clamp(8px, 4.12px + 1.04vw, 24px);
}

.pf-style-slide__heading {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-block: 2px;
}

.pf-style-slide__name {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(28px, 25.09px + 0.78vw, 40px);
  line-height: 1;
  letter-spacing: 0.01em; /* 0.4px / 40px */
  color: var(--pf-accent, #485261);
}

.pf-style-slide__sub {
  padding-block: 2px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(12px, 11.03px + 0.26vw, 16px);
  line-height: 1;
  letter-spacing: 0.12em; /* 1.92px / 16px */
  color: #616161;
}

.pf-style-slide__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-style-slide__tag {
  padding: clamp(4px, 3.51px + 0.13vw, 6px) 9px;
  background: var(--pf-accent, #485261);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 9.51px + 0.13vw, 12px);
  line-height: 1;
}

/* 南欧はアクセント色が淡く白文字が読みにくいため、文字色を黒にする */
.pf-style-accent--south-europe .pf-style-slide__tag {
  color: #221714;
}

/* 画像＋テキスト */
.pf-style-slide__body {
  display: flex;
  align-items: center;
  padding-inline: clamp(8px, 4.12px + 1.04vw, 24px);
}

.pf-style-slide__image {
  flex: 0 0 auto;
  width: 414px;
  height: 258px;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

.pf-style-slide__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-style-slide__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, -3.88px + 1.04vw, 16px);
  padding: clamp(0px, -1.94px + 0.52vw, 8px) clamp(0px, -5.83px + 1.55vw, 24px);
}

.pf-style-slide__catch {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(16px, 14.54px + 0.39vw, 22px);
  line-height: 1.8;
  letter-spacing: 0.04em; /* 0.88px / 22px */
  color: var(--pf-accent, #485261);
}

.pf-style-slide__desc {
  margin: 0;
  padding-inline: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  color: #616161;
}

/* カラー情報（カラーイメージ＋コーディネート例） */
.pf-style-slide__colors {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 9.09px + 0.78vw, 24px);
  padding-inline: clamp(8px, 4.12px + 1.04vw, 24px);
}

.pf-style-slide__color-images {
  flex: 0 0 306px;
  max-width: 306px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-style-slide__color-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #616161;
}

.pf-style-slide__swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PCは2列 */
  gap: clamp(5px, 4.76px + 0.06vw, 6px);
}

.pf-style-slide__swatch {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 11.51px + 0.13vw, 14px);
  line-height: 1;
  letter-spacing: 0.08em; /* 1.12px / 14px */
}

.pf-style-slide__coordinates {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-style-slide__coord-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-style-slide__coord-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
}

.pf-style-slide__coord-cell {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 11.51px + 0.13vw, 14px);
  line-height: 1;
  letter-spacing: 0.08em; /* 1.12px / 14px */
  white-space: nowrap; /* セル内ラベルは折り返さない */
}

/* コーディネート行のセル幅（Figmaの幅比 = flex-grow） */
.pf-g-103 { flex-grow: 103; }
.pf-g-178 { flex-grow: 178; }
.pf-g-229 { flex-grow: 229; }
.pf-g-230 { flex-grow: 230; }
.pf-g-289 { flex-grow: 289; }
.pf-g-290 { flex-grow: 290; }
.pf-g-341 { flex-grow: 341; }

/* カラーパレット（伝統色） */
.pf-c-b7ab9d { background-color: #b7ab9d; } /* 枯野色 */
.pf-c-7e746a { background-color: #7e746a; } /* 利休鼠 */
.pf-c-3d4144 { background-color: #3d4144; } /* 羊羹色 */
.pf-c-1e1e1e { background-color: #1e1e1e; } /* 濡羽色 */
.pf-c-b4a98d { background-color: #b4a98d; } /* 枇杷茶 */
.pf-c-835524 { background-color: #835524; } /* 山吹茶 */
.pf-c-54372f { background-color: #54372f; } /* 赤褐色 */
.pf-c-202e21 { background-color: #202e21; } /* 深碧色 */
.pf-c-c7915c { background-color: #c7915c; } /* アクセント */
.pf-c-84806c { background-color: #84806c; } /* アクセント */
.pf-c-794c35 { background-color: #794c35; } /* アクセント */

/* カラーパレット（カリフォルニア） */
.pf-c-37473c { background-color: #37473c; } /* 45-30D */
.pf-c-7f9387 { background-color: #7f9387; } /* 45-60D */
.pf-c-8f8e8c { background-color: #8f8e8c; } /* N-60 */
.pf-c-647680 { background-color: #647680; } /* 69-50D */
.pf-c-9fb0b8 { background-color: #9fb0b8; } /* 72-70D */
.pf-c-adc7c8 { background-color: #adc7c8; } /* 65-80D */
.pf-c-344151 { background-color: #344151; } /* 75-30D */
.pf-c-beab9d { background-color: #beab9d; } /* アクセント */

/* カラーパレット（ブルックリン） */
.pf-c-636466 { background-color: #636466; } /* N-45 */
.pf-c-a8a8a6 { background-color: #a8a8a6; } /* N-70 */
.pf-c-8d9298 { background-color: #8d9298; } /* 75-60B */
.pf-c-545e68 { background-color: #545e68; } /* 75-40D */
.pf-c-513a42 { background-color: #513a42; } /* 95-30D */
.pf-c-d8c1b3 { background-color: #d8c1b3; } /* 15-80D */
.pf-c-9d9e98 { background-color: #9d9e98; } /* アクセント */
.pf-c-303846 { background-color: #303846; } /* アクセント */
.pf-c-7a7168 { background-color: #7a7168; } /* アクセント */

/* カラーパレット（南欧） */
.pf-c-eae6dd { background-color: #eae6dd; } /* 19-90A */
.pf-c-e9e0d1 { background-color: #e9e0d1; } /* 19-90B */
.pf-c-f2e1cd { background-color: #f2e1cd; } /* 19-90C */
.pf-c-dbd2c9 { background-color: #dbd2c9; } /* 19-85A */
.pf-c-e1d5c7 { background-color: #e1d5c7; } /* 19-85B */
.pf-c-d3c4b1 { background-color: #d3c4b1; } /* 19-80C */
.pf-c-e2d1bf { background-color: #e2d1bf; } /* 19-85C */
.pf-c-d2c6b8 { background-color: #d2c6b8; } /* 19-80B */

/* 南欧は淡色背景が多く白文字が沈むため、スウォッチ／コーデ例は黒文字に切替（南欧のみ） */
.pf-style-accent--south-europe .pf-style-slide__swatch,
.pf-style-accent--south-europe .pf-style-slide__coord-cell {
  color: #1e1e1e;
}
/* アクセントセル（#9d9e98 / #303846 / #7a7168）は白文字を維持 */
.pf-style-accent--south-europe .pf-style-slide__coord-cell.pf-c-9d9e98,
.pf-style-accent--south-europe .pf-style-slide__coord-cell.pf-c-303846,
.pf-style-accent--south-europe .pf-style-slide__coord-cell.pf-c-7a7168 {
  color: #fff;
}
/* 見出し・キャッチは淡ピーチ文字だと白背景で沈むため、縁取りはやめて南欧パレットに馴染む深ブラウン文字にする */
.pf-style-accent--south-europe .pf-style-slide__name,
.pf-style-accent--south-europe .pf-style-slide__catch {
  color: #6c4e34;
}

/* カラーパレット（北欧） */
.pf-c-b32b2b { background-color: #b32b2b; } /* 07-40V */
.pf-c-7e832f { background-color: #7e832f; } /* 32-50L */
.pf-c-3e422b { background-color: #3e422b; } /* 35-30D */
.pf-c-c8c9ad { background-color: #c8c9ad; } /* 32-90D */
.pf-c-1b7a3e { background-color: #1b7a3e; } /* 45-40P */
.pf-c-8eadad { background-color: #8eadad; } /* 55-70D */
.pf-c-2c3e45 { background-color: #2c3e45; } /* 65-30D */
.pf-c-1c6262 { background-color: #1c6262; } /* 65-40H */

/* カラーパレット（カントリー） */
.pf-c-c1684a { background-color: #c1684a; } /* 12-50L */
.pf-c-c2b8b0 { background-color: #c2b8b0; } /* 15-75A */
.pf-c-3d2b25 { background-color: #3d2b25; } /* 15-30B */
.pf-c-dcc3bb { background-color: #dcc3bb; } /* 15-80D */
.pf-c-9b6010 { background-color: #9b6010; } /* 19-40L */
.pf-c-d4c99a { background-color: #d4c99a; } /* 22-80D */
.pf-c-eddfc0 { background-color: #eddfc0; } /* 22-90D */
.pf-c-726860 { background-color: #726860; } /* 25-50B */

/* カントリーは濃淡が混在。淡色セル（c2b8b0 / dcc3bb / d4c99a / eddfc0）のみ
   白文字が沈むため黒文字に切替。濃色セルは白文字を維持（カントリーのみ） */
.pf-style-accent--country .pf-style-slide__swatch.pf-c-c2b8b0,
.pf-style-accent--country .pf-style-slide__swatch.pf-c-dcc3bb,
.pf-style-accent--country .pf-style-slide__swatch.pf-c-d4c99a,
.pf-style-accent--country .pf-style-slide__swatch.pf-c-eddfc0,
.pf-style-accent--country .pf-style-slide__coord-cell.pf-c-c2b8b0,
.pf-style-accent--country .pf-style-slide__coord-cell.pf-c-dcc3bb,
.pf-style-accent--country .pf-style-slide__coord-cell.pf-c-d4c99a,
.pf-style-accent--country .pf-style-slide__coord-cell.pf-c-eddfc0 {
  color: #1e1e1e;
}

/* カラーパレット（フレンチ） */
.pf-c-c0a899 { background-color: #c0a899; } /* 19-70D */
.pf-c-6b3f22 { background-color: #6b3f22; } /* 19-40F */
.pf-c-6a9080 { background-color: #6a9080; } /* 45-60D */
.pf-c-4e8850 { background-color: #4e8850; } /* 39-50H */
.pf-c-a8cece { background-color: #a8cece; } /* 59-80D */
.pf-c-12a0bf { background-color: #12a0bf; } /* 62-60L */
.pf-c-b89a68 { background-color: #b89a68; } /* 22-70H */
.pf-c-4a5235 { background-color: #4a5235; } /* 35-40D */

/* フレンチは濃淡が混在。淡色セル（c0a899 / a8cece）のみ
   白文字が沈むため黒文字に切替。濃色セルは白文字を維持（フレンチのみ） */
.pf-style-accent--french .pf-style-slide__swatch.pf-c-c0a899,
.pf-style-accent--french .pf-style-slide__swatch.pf-c-a8cece,
.pf-style-accent--french .pf-style-slide__coord-cell.pf-c-c0a899,
.pf-style-accent--french .pf-style-slide__coord-cell.pf-c-a8cece {
  color: #1e1e1e;
}

/* カラーパレット（ロハス） */
.pf-c-c4a07a { background-color: #c4a07a; } /* 19-70F */
.pf-c-c8b8a8 { background-color: #c8b8a8; } /* 19-75C */
.pf-c-ddd0bc { background-color: #ddd0bc; } /* 19-85C */
.pf-c-e8e0d0 { background-color: #e8e0d0; } /* 19-90B */
.pf-c-787060 { background-color: #787060; } /* 22-50B */
.pf-c-c0bcb4 { background-color: #c0bcb4; } /* 22-75A */
.pf-c-6e6858 { background-color: #6e6858; } /* 25-50A */
.pf-c-9c9278 { background-color: #9c9278; } /* 27-60D */

/* ロハスは淡色が多い。淡色セル（c8b8a8 / ddd0bc / e8e0d0 / c0bcb4）のみ
   白文字が沈むため黒文字に切替。濃色セルは白文字を維持（ロハスのみ） */
.pf-style-accent--lohas .pf-style-slide__swatch.pf-c-c8b8a8,
.pf-style-accent--lohas .pf-style-slide__swatch.pf-c-ddd0bc,
.pf-style-accent--lohas .pf-style-slide__swatch.pf-c-e8e0d0,
.pf-style-accent--lohas .pf-style-slide__swatch.pf-c-c0bcb4,
.pf-style-accent--lohas .pf-style-slide__coord-cell.pf-c-c8b8a8,
.pf-style-accent--lohas .pf-style-slide__coord-cell.pf-c-ddd0bc,
.pf-style-accent--lohas .pf-style-slide__coord-cell.pf-c-e8e0d0,
.pf-style-accent--lohas .pf-style-slide__coord-cell.pf-c-c0bcb4 {
  color: #1e1e1e;
}

/* カラーパレット（レトロ）※ b89a68 / 3d2b25 は既出のため再定義しない */
.pf-c-e8dfc0 { background-color: #e8dfc0; } /* 25-90D */
.pf-c-c8b8a0 { background-color: #c8b8a0; } /* 19-80B */
.pf-c-888070 { background-color: #888070; } /* 19-50B */
.pf-c-3e2e20 { background-color: #3e2e20; } /* 19-30B */
.pf-c-a85020 { background-color: #a85020; } /* 15-40P */
.pf-c-a03028 { background-color: #a03028; } /* 07-40P */

/* レトロは淡色（e8dfc0 / c8b8a0）のみ白文字が沈むため黒文字に切替。濃色は白文字を維持 */
.pf-style-accent--retro .pf-style-slide__swatch.pf-c-e8dfc0,
.pf-style-accent--retro .pf-style-slide__swatch.pf-c-c8b8a0,
.pf-style-accent--retro .pf-style-slide__coord-cell.pf-c-c8b8a0 {
  color: #1e1e1e;
}

/* カラーパレット（シャービック） */
.pf-c-8ab4a0 { background-color: #8ab4a0; } /* 45-70D */
.pf-c-3a5c48 { background-color: #3a5c48; } /* 45-40D */
.pf-c-6e5848 { background-color: #6e5848; } /* 19-40B */
.pf-c-c0c0bc { background-color: #c0c0bc; } /* 75-80A */
.pf-c-d4c4a8 { background-color: #d4c4a8; } /* 19-80C */
.pf-c-b85850 { background-color: #b85850; } /* 07-50L */
.pf-c-ede0cc { background-color: #ede0cc; } /* 19-90C */
.pf-c-b09090 { background-color: #b09090; } /* 09-70D */

/* シャービックは淡色（c0c0bc / d4c4a8 / ede0cc）のみ白文字が沈むため黒文字に切替。濃色は白文字を維持 */
.pf-style-accent--shabby .pf-style-slide__swatch.pf-c-c0c0bc,
.pf-style-accent--shabby .pf-style-slide__swatch.pf-c-d4c4a8,
.pf-style-accent--shabby .pf-style-slide__swatch.pf-c-ede0cc,
.pf-style-accent--shabby .pf-style-slide__coord-cell.pf-c-c0c0bc,
.pf-style-accent--shabby .pf-style-slide__coord-cell.pf-c-d4c4a8 {
  color: #1e1e1e;
}

/* カラーパレット（スターペイントPOP） */
.pf-c-b82040 { background-color: #b82040; } /* 07-40X */
.pf-c-e8c820 { background-color: #e8c820; } /* 27-85V */
.pf-c-d04080 { background-color: #d04080; } /* 99-50X */
.pf-c-a0b8c0 { background-color: #a0b8c0; } /* 65-80D */
.pf-c-2888b8 { background-color: #2888b8; } /* 72-50P */
.pf-c-50a878 { background-color: #50a878; } /* 45-60L */
.pf-c-e0e0dc { background-color: #e0e0dc; } /* N-90 */
.pf-c-181810 { background-color: #181810; } /* N-10 */
.pf-c-585850 { background-color: #585850; } /* N-30a */

/* スターペイントPOPは淡色（e8c820 / a0b8c0 / e0e0dc）のみ白文字が沈むため黒文字に切替。濃色は白文字を維持 */
.pf-style-accent--sp-pop .pf-style-slide__swatch.pf-c-e8c820,
.pf-style-accent--sp-pop .pf-style-slide__swatch.pf-c-a0b8c0,
.pf-style-accent--sp-pop .pf-style-slide__swatch.pf-c-e0e0dc,
.pf-style-accent--sp-pop .pf-style-slide__coord-cell.pf-c-a0b8c0,
.pf-style-accent--sp-pop .pf-style-slide__coord-cell.pf-c-e0e0dc {
  color: #1e1e1e;
}

/* ============================================
 * .pf-style SP対応（max-width: 767px）
 * Figma node 2426-19914 準拠。PC版を縦積み・縮小に組み替える。
 * letter-spacing はすべて em 基準のため font-size 変更に追従し再指定不要。
 * ============================================ */
@media (max-width: 767px) {
  /* ---- 見出し＋タブ ---- */

  /* タブは折り返さず横スクロール */
  .pf-style__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* 端のタブも中央へスクロールできるよう、左右に半画面分の余白を確保
       （35px = タブ幅70pxの半分） */
    padding-inline: calc(50% - 35px);
    scroll-behavior: smooth;
  }

  .pf-style__tabs::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
  }

  .pf-style__tab-item {
    flex-shrink: 0; /* スクロール時にタブを潰さない */
  }

  /* ---- 詳細スライダー：矢印を内側に配置 ---- */
  .pf-style__detail-inner {
    padding-inline: 21px; /* 矢印(14px)＋端余白(7px) ぶんコンテンツを内側へ */
  }

  .pf-style__arrow img {
    height: 14px;
  }

  .pf-style__arrow--prev {
    left: 7px;
  }

  .pf-style__arrow--next {
    right: 7px;
  }

  /* ---- スライド構造を縦積みに ---- */

  /* 見出し＋タグ */
  .pf-style-slide__head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 画像＋テキスト */
  .pf-style-slide__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .pf-style-slide__image {
    width: 100%;
    height: auto;
    aspect-ratio: 414 / 258;
  }

  .pf-style-slide__catch {
    padding-inline: 4px;
  }

  /* 本文（desc）はSPでは非表示（Figmaアノテーション準拠） */
  .pf-style-slide__desc {
    display: none;
  }

  /* カラー情報 */
  .pf-style-slide__colors {
    flex-direction: column;
  }

  .pf-style-slide__color-images {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }

  .pf-style-slide__coordinates {
    width: 100%;
  }

  .pf-style-slide__swatches {
    grid-template-columns: repeat(4, 1fr); /* SPは4列 */
  }

  .pf-style-slide__swatch {
    height: auto;
    padding: 6px 9px;
  }

  .pf-style-slide__coord-row {
    height: 24px;
  }

  /* SPはFigma SP（node 2228-158772）の幅比に切替。
     flex-basis:0 ＋ pf-gsp-XXX の flex-grow で、各行の合計grow=317（=コンテナ幅）の
     ため「grow値＝実px」になる。pf-gsp は .pf-g-XXX より後に定義されるため
     flex-grow を上書きでき、PC版（.pf-g-XXX）には影響しない。 */
  .pf-gsp-70  { flex-grow: 70; }
  .pf-gsp-81  { flex-grow: 81; }
  .pf-gsp-85  { flex-grow: 85; }
  .pf-gsp-116 { flex-grow: 116; }
  .pf-gsp-151 { flex-grow: 151; }
  .pf-gsp-162 { flex-grow: 162; }
}

/* ============================================
 * 事例をスタイルから探す .pf-cases
 * Figma実装（PC版）。見出し＋スタイルタブ（ALL＋11種）＋
 * 施工事例カードグリッド（3列）＋もっと見るリンク＋ショールーム相談CTA。
 * Figmaの px-220（=コンテンツ幅1000px）は max-width で再現。
 * カードグリッドのコンテンツ幅は 920px（292px×3 + gap22px×2）。
 * スタイルタグ色は .pf-style-accent--<key> の --pf-accent で切替。
 * ============================================ */
.pf-cases {
  background: #f7f7f7;
  box-sizing: border-box;
}

.pf-cases *,
.pf-cases *::before,
.pf-cases *::after {
  box-sizing: border-box;
}

/* ---- 見出し＋タブ ---- */
.pf-cases__head {
  padding-block: 60px clamp(20px, 32.43px - 0.65vw, 30px);
}

.pf-cases__head-inner {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: clamp(20px, 24.97px - 0.26vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 15.09px + 0.78vw, 30px);
}

.pf-cases__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(18px, 16.06px + 0.52vw, 26px);
  line-height: 1;
  letter-spacing: 0.12em; /* 3.12px / 26px */
  color: #616161;
  text-align: center;
}

.pf-cases__tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pf-cases__tab-item {
  display: flex;
}

.pf-cases__tab {
  width: 70px;
  height: 60px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f1f1f1;
  border-radius: 6px;
  background: #fff;
  color: #616161;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.04em; /* 0.48px / 12px */
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ALL は元の灰色のまま */
.pf-cases__tab.is-active {
  background: #ebebeb;
  border-color: #ebebeb;
}

/* スタイル別タブ（アクセント色を持つ）はアクティブ時に各スタイルの色＋白文字に
   （「スタイルから探す」のタブと同仕様） */
.pf-cases__tab[class*="pf-style-accent--"].is-active {
  background: var(--pf-accent, #485261);
  border-color: var(--pf-accent, #485261);
  color: #fff;
}

/* 南欧はアクセント色が淡く白文字が読みにくいため、文字色を黒にする */
.pf-cases__tab.pf-style-accent--south-europe.is-active {
  color: #221714;
}

/* ---- カードグリッド ---- */
.pf-cases__body {
  padding-block: clamp(0px, -5.34px + 1.42vw, 22px) 0px;
}

.pf-cases__body-inner {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding-inline: clamp(20px, 24.97px - 0.26vw, 24px);
}

.pf-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  transition: opacity 0.2s ease;
}

/* Ajax取得中はグリッドを半透明にしてローディングを示す */
.pf-cases__grid.is-loading {
  opacity: 0.4;
  pointer-events: none;
}

/* 該当事例が0件のときのメッセージ */
.pf-cases__empty {
  margin: 0;
  padding-block: 24px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: #999999;
}

/* タブ絞り込みで非表示にするカード */
.pf-cases__card.is-hidden {
  display: none;
}

/* ---- カード ---- */
.pf-cases__card {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* カード全体を施工事例詳細へのリンクにする（ホバー演出なし） */
.pf-cases__card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.pf-cases__card-img {
  margin: 0;
  width: 100%;
  aspect-ratio: 292 / 200;
  overflow: hidden;
  line-height: 0;
}

.pf-cases__card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-cases__card-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 9px 11px;
}

.pf-cases__card-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pf-cases__card-date {
  margin: 0;
  padding-inline: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #cccccc;
}

.pf-cases__card-title {
  margin: 0;
  padding-inline: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.04em; /* 0.72px / 18px */
  color: #616161;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-cases__card-desc {
  margin: 0;
  padding-inline: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em; /* 0.48px / 12px */
  color: #616161;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* カラードット */
.pf-cases__dots {
  list-style: none;
  margin: 0;
  padding-inline: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pf-cases__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.pf-dot--white  { background: #ffffff; border: 1px solid #707070; }
.pf-dot--black  { background: #221714; }
.pf-dot--gray   { background: #c6c0be; }
.pf-dot--blue   { background: #305ac9; }
.pf-dot--green  { background: #038e73; }
.pf-dot--beige  { background: #f2dfca; }
.pf-dot--red    { background: #d12924; }
/* paint_color の残り5色（get_color_map() の hex に合わせる） */
.pf-dot--yellow { background: #ffd700; }
.pf-dot--orange { background: #ff8c00; }
.pf-dot--brown  { background: #8b4513; }
.pf-dot--pink   { background: #ff69b4; }
.pf-dot--purple { background: #8b008b; }

/* タグ */
.pf-cases__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.pf-cases__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 7px;
  border-radius: 9999px;
  background: #f7f7f7;
  color: #616161;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em; /* 0.52px / 13px */
  white-space: nowrap;
}

.pf-cases__tag--style {
  background: var(--pf-accent, #485261);
  color: #fff;
}

/* 南欧はアクセント色が淡く白文字が読みにくいため、文字色を黒にする */
.pf-cases__tag--style.pf-style-accent--south-europe {
  color: #221714;
}

/* ---- もっと見るリンク ---- */
.pf-cases__more {
  margin: 0;
  padding-block: clamp(15px, 13.79px + 0.32vw, 20px) 0px;
  display: flex;
  justify-content: flex-end;
}

.pf-cases__more-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #e7141a;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.pf-cases__more-link:hover {
  opacity: 0.7;
}

.pf-cases__more-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
}

.pf-cases__more-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7141a;
  border-radius: 50%;
  line-height: 0;
}

.pf-cases__more-btn img {
  display: block;
  width: 8px;
  height: auto;
}

/* ---- ショールーム相談CTA ---- */
.pf-cases__cta {
  padding-block: clamp(32px, 29.57px + 0.65vw, 42px) clamp(32px, 25.2px + 1.81vw, 60px);
  display: flex;
  justify-content: center;
}

.pf-cases__cta-btn,
.pf-gallery__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 36px;
  border-radius: 9999px;
  background: #2cac6e;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em; /* 0.8px / 20px */
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.pf-cases__cta-btn:hover,
.pf-gallery__cta-btn:hover {
  opacity: 0.85;
}

/* ============================================
 * .pf-cases SP対応（max-width: 767px）
 * Figma node 2427-19947 準拠。PC版（3列グリッド）を1列縦積みに組み替える。
 * タブは横スクロール、CTAボタンは全幅。
 * カード内部（余白・gap・date/title/desc・dot・tag）はPCと同値のため再指定不要。
 * letter-spacing はすべて em 基準のため font-size 変更に追従し再指定不要。
 * ============================================ */
@media (max-width: 767px) {
  /* ---- 見出し＋タブ ---- */

  /* タブは折り返さず横スクロール（タブ寸法 70×60・gap8 はPCと共通） */
  .pf-cases__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* 端のタブも中央へスクロールできるよう、左右に半画面分の余白を確保
       （35px = タブ幅70pxの半分） */
    padding-inline: calc(50% - 35px);
    scroll-behavior: smooth;
  }

  .pf-cases__tabs::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
  }

  .pf-cases__tab-item {
    flex-shrink: 0; /* スクロール時にタブを潰さない */
  }

  /* ---- カードグリッド：1列 ---- */

  .pf-cases__grid {
    grid-template-columns: 1fr;
  }

  /* SPはカード幅いっぱい（327px相当）に対し画像 327×200 の比率 */
  .pf-cases__card-img {
    aspect-ratio: 327 / 200;
  }

  /* ---- もっと見るリンク ---- */

  /* ---- ショールーム相談CTA：全幅ボタン ---- */
  .pf-cases__cta {
    padding-inline: 24px;
  }

  .pf-cases__cta-btn {
    width: 100%;
  }
}

/* ============================================
 * メッセージ説明セクション .pf-message
 * Figma実装（PC版）。見出し（Noto Serif JP 26px / 下線付き強調）＋
 * リード文（16px / 行間2）。
 * Figmaの px-220（=コンテンツ幅1000px）は max-width で再現。
 * ============================================ */
.pf-message {
  background: #fff;
  padding-block: clamp(42px, 32.78px + 2.46vw, 80px) clamp(24px, 15.26px + 2.33vw, 60px);
  box-sizing: border-box;
}

.pf-message *,
.pf-message *::before,
.pf-message *::after {
  box-sizing: border-box;
}

.pf-message__inner {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: clamp(20px, 24.97px - 0.26vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 21.51px + 0.13vw, 24px);
}

.pf-message__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(18px, 16.06px + 0.52vw, 26px);
  line-height: 1;
  letter-spacing: 0.12em; /* 3.12px / 26px */
  color: #000;
  text-align: center;
}

.pf-message__text {
  width: 100%;
  max-width: 600px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(14px, 13.51px + 0.13vw, 16px);
  line-height: 2;
  color: #616161;
  text-align: center;
}

.pf-message__line {
  margin: 0;
}

/* ============================================
 * .pf-message SP対応（max-width: 767px）
 * Figma node 2228-159038 準拠。PC版レイアウトを縮小。
 * 本文は1行目を独立させ、2・3行目を連続flow（display:inline）で繋ぐ。
 * letter-spacing は em 基準のため font-size 変更に追従し再指定不要。
 * ============================================ */
@media (max-width: 767px) {

  .pf-message__title {
    line-height: 1.5;
  }

  /* 2・3行目を連続テキストとして繋ぐ（1行目は block のまま独立） */
  .pf-message__line--flow {
    display: inline;
  }
}

/* ============================================
 * 素材ギャラリー .pf-gallery
 * Figma実装（PC版）。Swiperセンターモード。
 * 全カード同サイズ（398.667×460）で透明度のみ変化：
 * 中央=1 / 両隣=0.3 / 外側=0.1。
 * 自動スライダーはゆっくり＋pagination（インジケーター）表示。
 * ============================================ */
.pf-gallery {
  background: #fff;
  padding-block: 0 60px;
  overflow: hidden; /* 左右にはみ出す外側スライドを隠す */
  box-sizing: border-box;
}

.pf-gallery *,
.pf-gallery *::before,
.pf-gallery *::after {
  box-sizing: border-box;
}

.pf-gallery__slider {
  width: 100%;
  overflow: visible; /* 中央モードの外側スライドが見えるように */
}

.pf-gallery__slider .swiper-wrapper {
  align-items: flex-start; /* 高さの異なるテキストを上揃え */
}

.pf-gallery__slide {
  width: 398.667px; /* カード基準幅 */
  display: flex;
  justify-content: center;
}

.pf-gallery__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 6.54px + 0.39vw, 14px);
  width: 398.667px;
  opacity: 0.1; /* 既定（外側スライド） */
  transition: opacity 0.3s ease;
}

.pf-gallery__img {
  display: block;
  width: 398.667px;
  height: 460px;
  overflow: hidden;
  line-height: 0;
}

.pf-gallery__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-gallery__text {
  display: block;
  padding-inline: clamp(12px, 9.09px + 0.78vw, 24px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 12.27px + 0.19vw, 16px);
  line-height: 1.4;
  color: #4a4a4a;
  text-align: center;
}

.pf-gallery__title,
.pf-gallery__desc {
  display: block;
}

/* 隣接スライド */
.pf-gallery__slider .swiper-slide-prev .pf-gallery__card,
.pf-gallery__slider .swiper-slide-next .pf-gallery__card {
  opacity: 0.3;
}

/* アクティブスライド（中央） */
.pf-gallery__slider .swiper-slide-active .pf-gallery__card {
  opacity: 1;
}

.pf-gallery__slider .swiper-slide-active .pf-gallery__text {
  color: #616161;
}

/* インジケーター（pagination） */
.pf-gallery__pagination.swiper-pagination {
  position: static;
  margin-top: clamp(20px, 18.06px + 0.52vw, 28px);
  text-align: center;
  line-height: 0;
}

.pf-gallery__pagination .swiper-pagination-bullet {
  width: 80px;
  height: 4px;
  margin-inline: 11.5px; /* gap 23px の半分 */
  border-radius: 0;
  background: #b5b5b5;
  opacity: 1;
  transition: background-color 0.2s ease;
}

.pf-gallery__pagination .swiper-pagination-bullet-active {
  background: #e7141a;
}

/* ショールーム相談CTA（.pf-cases__cta と同デザイン） */
.pf-gallery__cta {
  margin-top: clamp(32px, 29.57px + 0.65vw, 42px);
  display: flex;
  justify-content: center;
}

/* ============================================
 * .pf-gallery SP対応（max-width: 767px）
 * Figma node 2228-159045 準拠。PC版（カード398.667×460）を縮小。
 * カード239.2px / 画像239.2×276（比率はPCと同一）/ テキスト13px。
 * カード間隔42pxはJS側 breakpoints で設定。
 * インジケーターは 20×4 / gap6px。CTAは全幅ボタン。
 * ============================================ */
@media (max-width: 767px) {
  .pf-gallery__slide {
    width: 239.2px;
  }

  .pf-gallery__card {
    width: 239.2px;
  }

  .pf-gallery__img {
    width: 239.2px;
    height: 276px;
  }

  /* アクティブテキストもSPは #4a4a4a（Figma準拠） */
  .pf-gallery__slider .swiper-slide-active .pf-gallery__text {
    color: #4a4a4a;
  }

  /* インジケーター（20×4 / gap 6px） */

  /* Swiper既定 margin:0 4px(詳細度0,3,0) を上回るため詳細度を上げる */
  .pf-gallery .pf-gallery__pagination.swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    margin-inline: 3px; /* gap 6px の半分 */
  }

  /* ショールーム相談CTA：全幅ボタン */
  .pf-gallery__cta {
    padding-inline: 24px;
  }

  .pf-gallery__cta-btn {
    width: 100%;
  }
}

.paint-fashion {
  padding: clamp(0px, 4vw, 60px) 0 clamp(60px, 7vw, 80px);
  background: #fff;
  box-sizing: border-box;
}

.paint-fashion *,
.paint-fashion *::before,
.paint-fashion *::after {
  box-sizing: border-box;
}

.paint-fashion__inner {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw, 20px);
}

/* ----------------------------------------
 * 絞り込みフィルター
 * TODO: Figmaに沿って実装
 * ---------------------------------------- */
.paint-fashion__filter {
  /* placeholder */
}

/* ----------------------------------------
 * 一覧グリッド
 * TODO: Figmaに沿って実装
 * ---------------------------------------- */
.paint-fashion__grid {
  /* placeholder */
}