/* =====================================
 * クリニック一覧 (archive-clinic.php) 専用の CSS
 * 一覧ページと、同じカードを使うテンプレート templates/page-access.php でだけ読み込む (functions.php)。
 * 2026-10-20 に、管理画面の「追加 CSS」と new_style.css に分かれていた指定をここへまとめた。
 * 見た目を変えないため、元の読み込み順 (new_style.css の分 → 追加 CSS の分) のまま並べている。
 * 設計: docs/2026-10-20_AGAヘアクリHP_CSS整理_設計.md
 * ===================================== */

/* ---- 元 new_style.css: 提携院の注記・カード内ボタン ---- */
.access-card-title .access-card-title-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
}
/* 提携院の注記行を含む一覧 (クリニック一覧) のみ、タイトルを2行分確保して下線位置を揃える。
   サロン一覧や1カラムの SP 表示には影響させない */
@media (min-width: 768px) {
  .access-clinic-items:has(.access-card-title-note) .access-card-title {
    min-height: 45px;
  }
}
/* カード内ボタンのテキストを上下中央に (既存は padding-top 6px で下に2pxズレていた) */
.access-card-buttons .access-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ---- 元 new_style.css: 東京都・大阪府の区・市アコーディオン ---- */
/* =====================================
 * クリニック一覧: 東京都サロンの区・市アコーディオン (入れ子)
 * SP (768px以下) は2列、PC (769px以上) は3列。開いた区は全幅に広げてカードを読みやすくする
 * ===================================== */
.pref-ward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .pref-ward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
/* 開いた区を全幅にするのはPCのみ。SP(768px以下)は2列を保つため、開いても自分の列に収める */
@media (min-width: 769px) {
  .pref-accordion.is-ward[open] {
    grid-column: 1 / -1;
  }
}
/* 区の見出し: 閉じている時は白地・+、開いた時は反転して −
   （東京都の外側のアコーディオンには効かせない。.pref-accordion.is-ward に限定） */
.pref-accordion.is-ward:not([open]) > .pref-accordion-summary {
  padding: 10px 40px 10px 12px;
  border: 1px solid #313131;
  background: #fff;
  color: #313131;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}
.pref-accordion.is-ward > .pref-accordion-summary::-webkit-details-marker {
  display: none;
}
/* 閉じている時の「+」。サイト共通の .pref-accordion[open] 配下ルール（「−」）は外側の東京都が開いていると区にも当たるため、:not([open]) で詳細度を上げて打ち消す */
.pref-accordion.is-ward:not([open]) > .pref-accordion-summary::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #313131;
  font-size: 18px;
  line-height: 1;
}
.pref-accordion.is-ward[open] > .pref-accordion-summary {
  background: #fff;
  color: #313131;
}
.pref-accordion.is-ward[open] > .pref-accordion-summary::after {
  content: "−";
  color: #333;
}
.pref-accordion.is-ward > .pref-accordion-body {
  padding: 0 12px 12px;
}

/* ---- 元 管理画面の「追加 CSS」: カード・都道府県アコーディオン・東日本/西日本の青帯 ---- */
/* =========================
   クリニック一覧カード 完全版
========================= */

/* 一覧全体 */
.access-clinic-items{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.access-clinic-item{
  width: calc(33.333% - 16px);
  margin: 0;
  list-style: none;
  display: flex;
}

/* カード本体 */
.access-card{
  width: 100%;
  padding: 10px 18px 16px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
  border: none;
}

/* タイトル */
.access-card-title{
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  min-height: auto;
}

/* 区切り線 */
.access-card-line{
  height: 1px;
  background: #000;
  margin: 0 0 12px;
}

/* カード内部 */
.access-card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 140px;
}

/* 上段：画像＋テキスト */
.access-card-top{
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}

/* 画像 */
.access-card-thumb{
  width: 120px;
  flex: 0 0 120px;
  display: flex;
  align-items: center;
}

.access-card-thumb picture,
.access-card-thumb img{
  display: block;
  width: 100%;
}

.access-card-thumb img{
  width: 120px;
  height: 96px;
  object-fit: cover;
  object-position: center;
}

/* テキスト */
.access-card-info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.access-card-info .is-access-from-station{
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  color: #f07d00;
}

.access-card-info p{
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: #222;
  word-break: break-word;
}

.access-card-info p + p{
  margin-top: 6px;
}

/* 住所欄高さを固定してボタン位置を揃える */
.access-card-info > p:last-of-type{
  min-height: 58px;
}

/* 下段：ボタン2つ横並び */
.access-card-buttons{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 12px;
}

.access-card-buttons .access-btn{
  flex: 1;
  min-width: 0;
  text-align: center;
  margin: 0;
}

.access-card-buttons .access-btn.is-reserve{
  background: #f07d00;
  border-color: #d86b00;
  color: #fff;
}

/* 念のため旧構造のp崩れ防止 */
.access-card-buttons .access-btn p{
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
}

/* タブレット */
@media screen and (max-width: 1024px){
  .access-clinic-item{
    width: calc(50% - 12px);
  }
}

/* スマホ */
@media screen and (max-width: 767px){
  .access-clinic-item{
    width: 100%;
  }

  .access-card{
    min-height: auto;
    padding: 10px 14px 14px;
  }

  .access-card-title{
    font-size: 16px;
    margin-bottom: 4px;
  }

  .access-card-line{
    margin: 0 0 10px;
  }

  .access-card-body{
    min-height: auto;
  }

  .access-card-top{
    gap: 12px;
  }

  .access-card-thumb{
    width: 110px;
    flex: 0 0 110px;
  }

  .access-card-thumb img{
    width: 110px;
    height: 82px;
  }

  .access-card-info .is-access-from-station{
    font-size: 12px;
    line-height: 1.5;
  }

  .access-card-info p{
    font-size: 12px;
    line-height: 1.6;
  }
  .access-card-info > p:last-of-type{
   min-height: 0;
  }
  .access-card-buttons{
   gap: 8px; margin-top: 10px;
 }
 }

/* =========================
   サロン一覧 都道府県アコーディオン
========================= */

.salon-pref-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}

.pref-accordion{
  border: none;
  background: transparent;
}

.pref-accordion-summary {
  list-style: none;
}
.pref-accordion-summary::-webkit-details-marker {
  display: none;
}

.pref-accordion-summary{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 36px 12px 16px;
  border: 1px solid #313131;
  border-radius: 999px;
  background: #313131;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-sizing: border-box;
}

.pref-accordion-summary::after{
  content: "＋";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.pref-accordion[open] .pref-accordion-summary{
  background: #313131;
  border-color: #313131;
  color: #fff;
}

.pref-accordion[open] .pref-accordion-summary::after{
  content: "−";
  color: #fff;
}

.pref-accordion-body{
  grid-column: 1 / -1;
  padding-top: 16px;
}

.pref-accordion[open]{
  grid-column: 1 / -1;
}

.pref-accordion-body .access-clinic-items{
  margin-top: 0;
}

@media screen and (max-width: 1024px){
  .salon-pref-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px){
  .salon-pref-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 24px;
  }

  .pref-accordion-summary{
    min-height: 48px;
    padding: 10px 34px 10px 12px;
    font-size: 14px;
    border-radius: 999px;
  }

  .pref-accordion-summary::after{
    right: 12px;
    font-size: 15px;
  }

  .pref-accordion-body{
    padding-top: 12px;
  }
}

/* =========================
   東日本・西日本 見出し（青帯 最終版）
========================= */

.salon-area-title{
  background: #4a72be;
  padding: 14px 0;
  text-align: center;
}

.salon-area-title .is-page-title{
  background: none;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.salon-area-title .is-page-title span{
  display: none !important;
}

.salon-area-title > span{
  display: none !important;
}