/* =========================================================
   THERAPIST / SCHEDULE 一覧ページ 共通レイアウト（1920基準）
   header/nav/footer は style.css 共通。カードは .therapist_card を流用。
   ★position は使わず flex/grid/フローで構成（ユーザー方針）
   PSD実測: タイトル en Anton80/jp ZenKaku24 / 日付box640x64 / カード304x560・4列gap32 / 本文左64・右ナビ手前64
   ========================================================= */

.list_page{
  /* 本文左右の余白：デザイン幅(≥1800)はPSD通り64、狭まるほど40まで詰める(3カラム中ページの左右40に揃える)。1024以下は固定40へ連続 */
  --list-pad:clamp(40px, calc(8.33px + 3.093vw), 64px);
  padding:160px calc(var(--navw,480px) + var(--list-pad)) 80px var(--list-pad);
}

/* ── 見出し(左)＋日付ドロップダウン(右)を1行に ── */
.list_head{
  display:flex;
  align-items:center;/* 見出しブロックに対し日付ドロップダウンを縦中央(PSD: en top160 / box top186) */
  justify-content:space-between;
  gap:40px;
  margin-bottom:80px;
  width:100%;
}
.list_title{
  flex:0 0 auto;
  margin-left:40px;/* PSD実測:タイトルx107=カード左64+約40(カードより内側) */
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
}
.list_title_en{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:80px;
  letter-spacing:.1em;
  line-height:1;
  color:#000;
  text-transform:uppercase;
}
.list_title_jp{
  margin-bottom:16px;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:.1em;
  line-height:1;
  color:#000;
}

/* ── 日付ドロップダウン(白box・中央テキスト・右▼) ── */
.list_date{
  flex:0 1 640px;/* PSD実測:640px固定(狭い時のみ収縮)。space-betweenで右端=メイン右端 */
  min-width:0;
  height:64px;
  border:1px solid #000;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M1.5 3 L10 9 L18.5 3' fill='none' stroke='%23767676' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 40px center;/* PSD実測:矢印は右端から40px */
  background-size:20px 12px;
  appearance:none;
  -webkit-appearance:none;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:0;
  line-height:1;
  color:#000;
  text-align:center;
  text-align-last:center;
  cursor:pointer;
}
.list_date option[value$=".html"]{
  font-weight:700;
}

/* ── カードグリッド(カードは固定304px) ──
   justify-content:center ＋ column-gap:clamp(8〜64)。gapが64以内の幅では余り幅を全部gapに使い(実質フル)、
   64を超える幅ではgap64で頭打ち＋中央寄せ(開きすぎ回避)。縦(row-gap)はPSD実測32固定。
   1920ではfill値=32=PSD一致(cap64には未達)。列落ち(4→3→2)境界は1800/1280。 */
.list_grid{
  display:grid;
  grid-template-columns:repeat(4,304px);
  justify-content:center;
  column-gap:clamp(8px, calc((100% - 1216px) / 3), 64px);
  row-gap:32px;/* PSD実測:行間32固定(行1下端915/行2上端947)。横gapと連動させない */
  width:100%;
}
@media (max-width:1799px){
  .list_grid{
    grid-template-columns:repeat(3,304px);
    column-gap:clamp(8px, calc((100% - 912px) / 2), 64px);
  }
}
@media (max-width:1279px){
  .list_grid{
    grid-template-columns:repeat(2,304px);
    column-gap:clamp(8px, calc(100% - 608px), 64px);
  }
}

/* ── タブレット(ナビ消滅 ≤1024)：本文を全幅に ── */
@media (max-width:1024px){
  .list_page{
    padding:160px 40px 80px 40px;
  }
  .list_head{
    flex-direction:column;
    align-items:stretch;
    gap:40px;
  }
  .list_title{margin-left:0;}
  .list_date{
    flex:0 0 auto;
    width:100%;
  }
  .list_grid{
    grid-template-columns:repeat(auto-fill,304px);
    column-gap:clamp(8px, calc(100% - 608px), 64px);
  }
}

/* ── SP(≤768)：見出しと日付を縦積み・カードは2列(他ページ準拠) ── */
@media (max-width:768px){
  .list_page{
    padding:120px 16px 64px;
  }
  .list_head{
    flex-direction:column;
    align-items:stretch;
    margin-bottom:64px;
  }
  
  .list_title_en{
    font-size:80px;
    letter-spacing:clamp(0px, calc((100vw - 346px) / 9), .1em);
    white-space:nowrap;
  }
  .list_date{
    flex:0 0 auto;
    width:100%;
    background-position:right 24px center;
    font-size:20px;
  }
}