@charset "UTF-8";
/* ==========================================================================
   p-shops  店舗一覧（下層②・4枚目）— 全38店舗・7エリア
   出典: Figma PC 1048:1052（1440×3816）/ SP 1078:730（390×5746）
   数値・色は 2026-08-22 に複製 V6Sm5ziY59T6IiCDl4Cq6m から figma_spec.py で全プロパティ実取得
   （PC 229ノード / SP 265ノード）。目視推測ゼロ。

   🔒 MAPボタン＝GoogleマップへPC/SPとも別タブ遷移（岡田さん8/17回答で確定）
   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）
   設計座標（PC）: FV y150 / エリア帯 y635 / タブ y759・851 / テーブル y1023 / contact y2853
   ========================================================================== */
/* --- 共通見出し（泡＋テキスト・中央） --- */
.p-shops__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* 実測 1078:805（SP title）: gap 10px */
  margin: 0;
  color: #333333; /* 実測 1048:1254 / 1078:807: #333333 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px); /* 実測 SP24 / PC32 */
  font-weight: 700;
  line-height: 1.45; /* 実測 1048:1254: 32px→lh46.3 / 1078:807: 24px→lh34.8 */
}

.p-shops__heading-bubble {
  flex-shrink: 0;
  width: 29px; /* 実測 1078:806（SP）: 29×29 */
  height: 29px;
}

/* ==========================================================================
   エリアから探す（実測 1048:1150: #F3FBFF の帯 / 1048:1232: タブ群 970×290）
   ========================================================================== */
/* 帯（実測 1048:1150: y600・h354・#F3FBFF）。
   FV（c-page-title）の実描画終端は y594 ＝ 帯開始まで 6px。
   帯内の見出しは y635 ＝ 帯上端から 35px。 */
.p-shops__area {
  /* 実測 SP: FV終端318.8 → 帯y357 ＝ 38px ／ 帯y357 → 見出しy407 ＝ 50px
     （PC値は下のタブレット/1440ブロックで上書き） */
  margin-top: 38px;
  padding: 50px 16px 97px;
  background-color: #f3fbff; /* 実測 1048:1150: #F3FBFF */
}

/* タブ群（実測 1048:1232: 970×290）。
   見出し 1048:1252 は y635 h46（終端681）→ タブ行1 y739 ＝ 58px あける。
   行1 y739(h70) → 行2 y829 ＝ 行間20px。 */
/* 🔴 #61 SPのエリアタブは Figma で**2列グリッド・左揃え**（実測 1078:808 枠353/SP390）:
     行1 1078:810 w184 x-2.75 ／ 1078:813 w152 x197.25
     行2 1078:817 w152 x-2.75 ／ 1078:820 w152 x165.25
     行3 1078:824 w135 x-2.75 ／ 1078:827 w135 x148.25
     行4 1078:830 w267 x-2.75（最後の1件は横いっぱい）
   ＝各行の左端が揃う。実装は `justify-content:center` の折返しでラグ幅ぶん左端がばらついていた。
   ∴ SPは2列グリッドにして左揃え・最後の孤立要素は2列ぶん使う。PCは従来の中央寄せ折返しへ戻す。 */
.p-shops__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: start;
  gap: 8px; /* 実測 1078:810（SP）: gap 8px */
  max-width: 970px; /* 実測 1048:1232: タブ枠970 */
  margin: 38px auto 0;
  /* 奇数個のとき最後の1件が横いっぱい（実測 1078:830: w267＝1列ぶんより広い） */
}
.p-shops__tabs > :last-child:nth-child(odd) {
  grid-column: 1/-1;
}

/* タブ＝ピル型（実測 1048:1235 アクティブ / 1048:1237 非アクティブ・SP 1078:810 / 1078:813）
   🔒 非アクティブは「白地＋水色の枠線」。枠線を落とすとFigmaと別物になる */
.p-shops__tab {
  /* 実測 SP 1078:813: 54×padding15px 20px・border1.5px は align=INSIDE
     ＝枠線は54pxの内側。∴ padding から枠線分を引いて総高54pxに合わせる */
  padding: 13.5px 18.5px;
  border: 1.5px solid #5fcafd; /* 実測 SP 1078:813: 1.5px #5FCAFD */
  border-radius: 52.5px; /* 実測 SP 1078:813: 52.5px（PCは70px＝下の1440ブロック） */
  background-color: #ffffff; /* 実測 1048:1237 / 1078:813: #FFFFFF */
  color: #333333; /* 実測 1048:1238 / 1078:832: #333333 */
  font-family: inherit;
  font-size: clamp(16px, 14.5142857143px + 0.380952381vw, 20px); /* 実測 SP 1078:812: 16px / PC 1048:1236: 20px */
  font-weight: 500;
  line-height: 1.5; /* 実測 20px→lh30.0 / 16px→lh24.0 */
  text-align: center;
  cursor: pointer;
}
.p-shops__tab[aria-selected=true] {
  border-color: #5fcafd; /* アクティブも同色の縁で高さを揃える（実測 1048:1235 は塗りのみ） */
  background-color: #5fcafd; /* 実測 1048:1235 / 1078:810: #5FCAFD */
  color: #ffffff; /* 実測 1048:1236 / 1078:812: #FFFFFF */
}

/* ==========================================================================
   店舗テーブル
   SPは「1店舗＝1カード」に積み替える（6列は物理的に入らないため）
   ========================================================================== */
/* 帯（1048:1150）の終端は y954、エリア名 1048:1161 は y1019 ＝ 65px あける */
.p-shops__list {
  /* 実測 SP: 帯終端y813 → エリア名y903 ＝ 90px */
  margin-top: 90px;
  padding: 0 16px 40px;
}

.p-shops__panel {
  max-width: 1328px; /* 実測 1048:1151: contents枠1328 */
  margin-inline: auto;
}

/* エリア名（実測 1048:1161: 左に#5FCAFDの縦バー10×38 / SP 1078:837: 8×32） */
.p-shops__area-name {
  margin: 0;
  padding-left: 12px;
  border-left: 8px solid #5fcafd; /* 実測 SP 1078:837: 8px幅 */
  color: #333333; /* 実測 1048:1162 / 1078:836: #333333 */
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px); /* 実測 SP 1078:836: 24px / PC 1048:1162: 32px */
  font-weight: 700;
  letter-spacing: 0.29px; /* 実測 1048:1162 / 1078:836: ls 0.29 */
  line-height: 1.32;
}

.p-shops__empty {
  margin: 32px 0 0;
  color: #828282;
  font-size: clamp(14px, 13.2571428571px + 0.1904761905vw, 16px);
  font-weight: 500;
}

.p-shops__table {
  width: 100%;
  margin-top: 32px;
  border-collapse: collapse;
  text-align: left;
  /* --- SP: テーブルをカードへ積み替える ---
     🔒 thead は display:none にしない（列見出しがアクセシビリティツリーから消え、
        代わりに読まれる ::before ラベルと二重・不整合になるため）。
        視覚的にだけ隠し、列見出しとセルの対応は table セマンティクスに任せる。
        視覚ラベルは PHP 側の .p-shops__label（SPのみ表示）で出す。 */
}
.p-shops__table thead {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}
.p-shops__table tbody,
.p-shops__table tr,
.p-shops__table th,
.p-shops__table td {
  display: block;
}
.p-shops__table {
  /* SPは各セルを「ラベル｜値」の2カラムにする（実測: ラベル x20 / 値 x115 が同じy）。
     🔒 直上の `td { display: block }` と同じ詳細度以上で書く必要があるためここに置く */
  /* 🔒 SP専用（max-width で閉じる）。テーブル配下に置かないと `td{display:block}` に負けるが、
     media で閉じないと 769px以上の table-cell 化に勝ってしまい表が崩れる＝両方必要 */
}
@media (max-width: 768px) {
  .p-shops__table .p-shops__cell-name,
  .p-shops__table .p-shops__cell-address,
  .p-shops__table .p-shops__cell-tel,
  .p-shops__table .p-shops__cell-time,
  .p-shops__table .p-shops__cell-holiday {
    display: flex;
    align-items: baseline;
  }
  .p-shops__table .p-shops__cell-address {
    align-items: flex-start; /* 住所は2行＝先頭行で揃える */
  }
  .p-shops__table {
    /* 店舗名は値20px・ラベル16pxで行高が違う。Figmaは両方 y1253 で並ぶ（1078:863 / 1078:861）
       ＝ベースラインでなく行ボックスの先頭で揃える */
  }
  .p-shops__table .p-shops__cell-name {
    align-items: flex-start;
  }
  .p-shops__table {
    /* 実測 SP: MAP 1078:852 y1363(h26) → 電話 1078:844 y1399 ＝ 10px。
       住所ブロックの行高端数を吸収して以降の3項目を設計位置へ戻す */
  }
  .p-shops__table .p-shops__cell-tel {
    margin-top: 7px;
  }
}
.p-shops__table {
  /* 1枚のカード＝画像y1005 → 次カードy1621 のピッチ616px（実測 1078:840 / 1078:865）。
     区切り線 1078:864 は y1571 ＝ カード上端から566px */
}
.p-shops__table tr {
  padding: 38px 0 61px;
  border-bottom: 1px solid #cfcfcf; /* 実測 1048:1156-1160 / 1078:864: 1px #CFCFCF */
}

/* 見出しラベル（PCのthead相当をSPでは各セルの左に出す・PCでは非表示）
   🔒 SPは「ラベル｜値」の2カラム（実測: ラベル x20 / 値 x115 が同じyに並ぶ。
      1078:863『店舗名』x20 y1253 ⇔ 1078:861『ジャブ浅田店』x115 y1253）。
      縦に積むとデザインと別物になる。
   実測 1078:845「電話番号」ほか: #005CA7 / 16px / 700 / ls0.29 */
.p-shops__label {
  flex-shrink: 0;
  width: 95px; /* 実測: ラベル x20 → 値 x115 ＝ 95px */
  color: #005ca7; /* 実測 1078:863 ほか: #005CA7 */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.29px;
}

.p-shops__cell-img .p-shops__label {
  display: none;
}

/* 店舗写真（実測 1048:1225: 279×174 / radius4 / border 7px #E1F5FF align=OUTSIDE）
   🔒 枠線は写真の外側に付く＝box-shadow で外側に描く（widthを279に保つため）
   ⚠️ 素材31点は原本が221×146しかない＝拡大していない（疑義#23） */
.p-shops__img {
  display: block;
  width: 100%;
  max-width: 350px; /* 実測 SP 1078:841: 350×218 */
  height: auto;
  border-radius: 5px; /* 実測 SP 1078:841: 5.01792px */
  aspect-ratio: 279/174;
  box-shadow: 0 0 0 8.78px #e1f5ff; /* 実測 SP 1078:841: 8.78136px #E1F5FF 外側 */
  object-fit: cover;
}

/* 店舗名（実測 PC 1048:1191: 'ジャブ\n浅田店' 20px/700/lh30/ls0.42 ＝ブランドと支店名で改行。
   SP 1078:861 は 'ジャブ浅田店' の1行＝SPでは改行しない） */
.p-shops__cell-name {
  display: flex; /* SPは「ラベル｜値」の横並び */
  /* 実測 SP: 画像下端y1223 → 店舗名y1253 ＝ 30px */
  margin-top: 30px;
  align-items: baseline; /* ラベル16px と値20px のベースラインを揃える（実測は同じy） */
  color: #333333;
  font-size: 20px; /* 実測 PC/SPとも20px（固定値＝clampを継承させない） */
  font-weight: 700;
  letter-spacing: 0.42px; /* 実測 1048:1191 / 1078:861: ls 0.42 */
  line-height: 1.5; /* 実測: 20px→lh30.0 */
}

.p-shops__name-brand,
.p-shops__name-branch {
  display: inline; /* SPは1行（実測 1078:861「ジャブ浅田店」） */
}

/* 店名下の補足（白洋舎様FB 8/29: SL飯田店・於呂店「コインランドリー」＝stores.json の name_note） */
.p-shops__name-note {
  display: block;
  margin-top: 2px;
  color: #828282;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.p-shops__cell-address,
.p-shops__cell-tel,
.p-shops__cell-time,
.p-shops__cell-holiday {
  display: flex; /* SPは「ラベル｜値」の横並び（上記 .p-shops__label 参照） */
  align-items: baseline;
  margin-top: 10px;
  color: #333333;
  font-size: 16px; /* 実測 1048:1200 ほか: PC/SPとも16px固定 */
  font-weight: 500;
  letter-spacing: 0.29px; /* 実測 1048:1200 ほか: ls 0.29 */
  line-height: 1.8375; /* 実測: 16px→lh29.4 */
}

/* 住所セル＝ラベル｜値の2カラム。値カラムの中で「住所テキスト → MAPボタン」を縦に積む
   （実測 SP: ラベル 1078:855 x20 y1293 ⇔ 住所 1078:851 x115 y1293、
     MAP 1078:852 は x144 y1363 ＝ 値カラム内の下） */
.p-shops__cell-address {
  /* 住所は2行になるため baseline 揃えだと値カラムが下がる＝先頭行で揃える */
  align-items: flex-start;
  flex-wrap: nowrap;
}

.p-shops__addr-body {
  display: block;
  flex: 1;
  min-width: 0;
}

.p-shops__address {
  display: block;
}

/* 営業時間の注記（都田店・アピタ浜北店の工場定休日の但し書き＝stores.json の note） */
.p-shops__note {
  display: block;
  margin-top: 4px;
  color: #828282;
  font-size: 14px;
  line-height: 1.6;
}

/* MAPボタン（実測 1048:1201 / 1078:852: 95×27 radius65 #E1F5FF padding 1px 15px 0 16px
   ・別タブでGoogleマップ） */
.p-shops__map {
  display: inline-block;
  /* 実測 SP: 住所 1078:851 y1293(h59) → MAP 1078:852 y1363 ＝ 11px。
     x144 ＝ 値カラム(x115)から 29px 内側 */
  margin-top: 11px;
  margin-left: 29px;
  padding: 1px 15px 0 16px;
  border-radius: 65px;
  background-color: #e1f5ff;
  color: #000000; /* 実測 1048:1202: #000000（本文#333とは別値） */
  font-size: 18px; /* 実測 1048:1202 / 1078:853: PC/SPとも18px */
  font-weight: 500;
  letter-spacing: 0.29px;
  line-height: 1.4; /* 実測: 18px→lh25.2 */
}

/* 電話番号（実測 1048:1175 / 1078:844: 20px/700/lh42/ls0.42。SPはタップで発信できるようリンク化） */
.p-shops__tel {
  color: #333333;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.42px;
  line-height: 2.1; /* 実測: 20px→lh42.0 */
}

/* ==========================================================================
   タブレット以上（769px〜）＝テーブルを本来の6列へ戻す
   ========================================================================== */
@media (min-width: 769px) {
  .p-shops__area {
    margin-top: 6px; /* 実測: FV終端y594 → 帯y600 */
    /* 上35＝帯y600→見出しy635 ／ 下51＝タブ終端y903→帯終端y954 */
    padding: 35px 32px 51px;
  }
  /* 見出し 1048:1252 は y635 h46（終端681）→ タブ行1 y739 ＝ 58px あける */
  /* 🔴 S-44: 折返し行は左詰め（実測: 行1 1048:1234 x84534・行2 1048:1243 x84534 ＝左端一致。
     行1は総幅970が枠970と同じため中央に「見える」だけ＝旧コメント「中央寄せ」は誤読。
     SP #61「各行の左端が揃う」と同じ思想） */
  .p-shops__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 58px;
  }
  .p-shops__list {
    margin-top: 103px; /* 実測: 帯終端y950.4 → エリア名テキストy1023 */
    padding: 0 32px 60px;
  }
  /* エリア名 1048:1161 は y1019(h38)、列見出し 1048:1166 ほかは y1132 ＝ 75px あける */
  .p-shops__table {
    margin-top: 67px; /* エリア名テキストy1023 → 列見出しテキストy1134 */
  }
  .p-shops__table thead {
    position: static;
    overflow: visible;
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    white-space: normal;
  }
  .p-shops__table tbody {
    display: table-row-group;
  }
  .p-shops__table tr {
    display: table-row;
    padding: 0;
    /* 店舗間の横罫（実測 1048:1156-1160: 1px #CFCFCF・全幅1328） */
    border-bottom: 1px solid #cfcfcf;
  }
  .p-shops__table {
    /* 行の高さ＝罫線間ピッチ245px（実測 1048:1156-1160: 1182/1427/1672/1917/2162/2407）。
       写真は罫線+36px、店舗名は罫線+93px の位置に来る（1048:1225 y1218 / 1048:1191 y1275） */
  }
  .p-shops__table th,
  .p-shops__table td {
    display: table-cell;
    padding: 36px 12px 34px;
    vertical-align: top;
  }
  .p-shops__table {
    /* 列見出しの下＝2px #5FCAFD の太罫（実測 1048:1153 y1182 / 1048:1154 y1191）。
       見出しテキストは y1132 ＝ 罫まで 50px */
  }
  .p-shops__table thead th {
    padding: 0 12px 48px;
    border-bottom: 2px solid #5fcafd;
    color: #005ca7; /* 実測 1048:1190 ほか: #005CA7 22px */
    font-size: clamp(16px, 13.7714285714px + 0.5714285714vw, 22px);
    font-weight: 700;
    letter-spacing: 0.29px;
    white-space: nowrap;
  }
  .p-shops__table {
    /* 列幅＝Figma実測（279/102/245/121/100/67）を比率で配分 */
  }
  .p-shops__table thead th:nth-child(1) {
    width: 25%;
  }
  .p-shops__table thead th:nth-child(2) {
    width: 11%;
  }
  .p-shops__table thead th:nth-child(3) {
    width: 26%;
  }
  .p-shops__table thead th:nth-child(4) {
    width: 14%;
  }
  .p-shops__table thead th:nth-child(5) {
    width: 15%;
  }
  .p-shops__table thead th:nth-child(6) {
    width: 9%;
  }
  /* PCは店舗名をブランド／支店名の2行にする（実測 1048:1191 の改行を保持） */
  .p-shops__name-brand {
    display: block;
  }
  /* 各列のテキスト開始位置（実測・行の上罫線からの距離）:
     写真 +36 / 店舗名・住所 +93 / 電話 +102 / 営業時間・定休日 +108
     （1048:1225 y1218 / 1048:1191・1048:1200 y1275 / 1048:1175 y1284 / 1048:1183・1048:1167 y1290）
     🔒 `.p-shops__table th/td` の一括 padding より詳細度を上げる必要があるため
        テーブル配下として書く（フラットに書くと一括指定に負ける） */
  .p-shops__table .p-shops__cell-name,
  .p-shops__table .p-shops__cell-address {
    padding-top: 54px;
  }
  .p-shops__table .p-shops__cell-tel {
    padding-top: 57px;
  }
  .p-shops__table .p-shops__cell-time,
  .p-shops__table .p-shops__cell-holiday {
    padding-top: 67px;
  }
  /* テキストを包む span（機械照合で「箱＝テキスト」を一致させるため。
     セルの padding を測ってしまうと実装は正しいのに差が出る＝偽陽性になる） */
  .p-shops__value {
    display: block;
  }
  .p-shops__cell-name,
  .p-shops__cell-address,
  .p-shops__cell-tel,
  .p-shops__cell-time,
  .p-shops__cell-holiday {
    margin-top: 0;
  }
  /* 実測 PC: 住所 1048:1200 y1275(h59) → MAP 1048:1201 y1362 ＝ 28px */
  .p-shops__map {
    margin-top: 28px;
  }
  .p-shops__img {
    max-width: 279px; /* 実測 1048:1225: 279×174 */
    border-radius: 4px; /* 実測 1048:1225: 4px */
    box-shadow: 0 0 0 7px #e1f5ff; /* 実測 1048:1225: 7px #E1F5FF 外側 */
  }
  /* PCはtheadが見出しを担うのでセル内ラベルは不要。
     セルもテーブルセルへ戻す（SPのflexを引きずるとレイアウトが崩れる） */
  .p-shops__label {
    display: none;
  }
  .p-shops__cell-name,
  .p-shops__cell-address,
  .p-shops__cell-tel,
  .p-shops__cell-time,
  .p-shops__cell-holiday {
    display: table-cell;
  }
  .p-shops__address {
    width: auto;
  }
  .p-shops__map {
    margin-left: 0;
  }
}
/* ==========================================================================
   PC専用（1440px〜）＝Figma実数値に着地させる
   ========================================================================== */
@media (min-width: 1440px) {
  .p-shops__list {
    margin-top: 74px; /* 実測: 帯終端y954 → エリア名テキストy1023 */
  }
  .p-shops__tabs {
    gap: 20px; /* 実測 1048:1234: タブ間20px（260/210/220/220 の並び） */
  }
  /* 実測 1048:1235（アクティブ・260×70）/ 1048:1237（非アクティブ・210×70）:
     padding 20px 30px・border 2px は align=INSIDE ＝ 枠線は70pxの内側に含まれる。
     ∴ CSSでは padding から枠線分2pxを引いて総高70pxに合わせる（18+30+18+2+2=70）。 */
  .p-shops__tab {
    padding: 18px 28px;
    border-width: 2px; /* 実測 1048:1237: 2px #5FCAFD */
    border-radius: 70px; /* 実測 1048:1235: 70px */
  }
  .p-shops__heading {
    gap: 25px; /* 実測 1048:1252: gap 25px */
  }
  .p-shops__heading-bubble {
    width: 42px; /* 実測 1048:1253: 42×42 */
    height: 42px;
  }
  .p-shops__area-name {
    padding-left: 20px;
    border-left-width: 10px; /* 実測 1048:1163: 10×38 */
  }
}
/* contact帯との余白＝PCのみ実測160px（SPは共通の既定50pxと一致） */
@media (min-width: 769px) {
  .p-shops__list + .c-contact-band {
    margin-top: 160px;
  }
}
/* SP周回（2026-08-27）: Figma SP 1078:730 実測に合わせたSP限定修正。768px以下限定 */
@media (max-width: 768px) {
  /* エリアチップは文字量hugで1行（1078:809系 実測 h54） */
  .p-shops__tab {
    padding: 13.5px 15px;
    white-space: nowrap;
  }
  /* 🔴 SP行間（2026-08-28 実測）: Figma 1078:809系の行ピッチは 74/74/76px。
     行の高さ54/54/56 に対し gap は 3行とも 20px（553.6-(479.6+54)=20.0 ほか）。
     基底の gap:8px だと 61px ピッチになり、最終行が 40.8px 上へずれていた。 */
  .p-shops__tabs {
    gap: 20px;
  }
  /* 🔴 3行目の対（浜名区・天竜区 / 磐田市）は Figma SP で等幅135px（1078:824 / 1078:827）。
     文字量hugのままだと磐田市が80pxになる。※PCは 1048 実測で140/60＝内容なり幅のため
     この等幅はSP限定の意匠（基底・PCブロックには入れない）。 */
  .p-shops__tab:nth-child(5),
  .p-shops__tab:nth-child(6) {
    width: 135px;
  }
  /* canvas下端307 → エリア帯357 ＝ 50（実測。旧38） */
  .p-shops__area {
    margin-top: 50px;
  }
}