/*
Theme Name: Erabu Pilates
Description: erabu-pilates.com 比較サイト用オリジナルテーマ（白×ベージュ）
Version: 1.6.35
Author: erabu-pilates
Text Domain: erabu-pilates
*/

  :root{
    --bg:#FAF7F1;
    --bg-card:#F1EAE0;
    --ink:#2B2620;
    --ink-soft:#584F42;
    --line:#DED2BF;
    --accent:#A9865B;
    --accent-deep:#8A6A42;
    --white:#FFFFFF;
    --women:#B5748C;
    --women-bg:#F7EDF0;
    --mixed:#4F7A6B;
    --mixed-bg:#EAF1EC;

    /* --- トップページ刷新で追加したトークン（既存の値は変更していない） --- */
    --surface:#FFFDFA;        /* カード面 */
    --bg-hero-top:#FBF6EE;    /* ヒーロー帯の上端 */
    --bg-hero:#F7F0E4;        /* ヒーロー帯の下端 */
    --bg-tint:#F7F1E7;        /* 資格・スクールカードなどの面 */
    --line-soft:#EBE2D4;      /* 細い区切り線 */
    --ink-muted:#7A7062;      /* 補助テキスト */
    --circle:#F0E3D2;         /* ヒーローイラスト背後の円 */
    --tag-bg:#F6EFE3;         /* 特徴タグの下地 */
    --tag-line:#E2D5C0;       /* 特徴タグの枠線 */
    --tag-ink:#6E5B44;        /* 特徴タグの文字 */
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Noto Sans JP', sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
  }
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent-deep); outline-offset:3px;
  }
  h1,h2,h3,.serif{
    font-family:'Shippori Mincho', serif;
    font-weight:600;
    letter-spacing:.02em;
    margin:0;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

  /* Header */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(253,251,247,.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav{
    display:flex; align-items:center; gap:24px;
    padding:16px 0;
  }
  .logo{font-family:'Shippori Mincho',serif; font-weight:600; font-size:21px; letter-spacing:.06em; white-space:nowrap;}
  .site-nav{display:flex; align-items:center; gap:24px; flex:1;}
  .nav-links{display:flex; gap:30px; font-size:13.5px; color:var(--ink-soft); margin:0 auto;}
  .nav-links a:hover{color:var(--accent-deep);}
  .nav-cta{
    border:1px solid var(--line); padding:11px 22px; font-size:13px; border-radius:3px;
    background:var(--white); white-space:nowrap;
  }
  .nav-cta:hover{background:var(--ink); color:var(--white); border-color:var(--ink);}

  /* ハンバーガーボタン（860px以下でのみ表示） */
  .nav-toggle{
    display:none; width:40px; height:40px; padding:0; margin-left:auto;
    background:none; border:1px solid var(--line); border-radius:3px; cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
  }
  .nav-toggle__bar{display:block; width:18px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0;}
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  /* =====================================================================
     ファーストビュー（全幅の写真の上にコピーと装飾をのせる）
     写真は .fv__media に1枚入れるだけで完成する構造。
     URL未設定なら .fv__media--empty の淡いベージュ面になり、崩れない。
     ===================================================================== */
  .fv{
    position:relative; overflow:hidden; padding:0;
    display:flex; align-items:center;
    /* 写真（約16:9）の人物が縦に収まる高さ。42vwを下回ると足元が切れる */
    min-height:clamp(490px, 44vw, 840px);
    background:var(--bg-hero-top);
    border-bottom:1px solid var(--line-soft);
  }
  .fv__media{ position:absolute; inset:0; z-index:0; }
  /* PC：写真は全幅。左端の観葉植物から右端のリフォーマーまで入る */
  .fv__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
  .fv__media--empty{
    background:linear-gradient(135deg, #F4EADB 0%, #EADCC7 55%, #E3D3BC 100%);
  }
  /* 左側をサイト背景へなじませ、コピーの可読性を確保する */
  .fv__scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg,
        rgba(251,246,238,.97) 0%,
        rgba(251,246,238,.92) 22%,
        rgba(251,246,238,.62) 42%,
        rgba(251,246,238,.18) 60%,
        rgba(251,246,238,0) 74%),
      linear-gradient(180deg, rgba(251,246,238,.55) 0%, rgba(251,246,238,0) 18%);
  }
  .fv__inner{
    position:relative; z-index:2; width:100%;
    padding-top:40px; padding-bottom:40px;
  }
  .fv__copy{ max-width:560px; }
  .fv__title{
    font-size:clamp(30px, 2.95vw, 50px); line-height:1.3; color:var(--ink); margin:0;
    letter-spacing:.01em;
  }
  .fv__title em{ font-style:normal; color:var(--accent-deep); }
  .fv__lead{
    margin:24px 0 0; font-size:clamp(14px, 1.02vw, 16.5px); color:var(--ink-soft); line-height:1.85;
  }

  /* FVのCTA 2つ（塗り／白抜きで対比させる） */
  .fv-actions{ display:flex; gap:16px; margin-top:26px; flex-wrap:wrap; }
  .fv-cta{
    display:inline-flex; align-items:center; gap:12px;
    padding:15px 26px; border-radius:4px;
    font-size:15px; letter-spacing:.02em;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .fv-cta__icon{ flex:none; width:24px; height:24px; }
  .fv-cta__icon svg{ width:100%; height:100%; display:block; }
  .fv-cta__label{ white-space:nowrap; }
  .fv-cta__arrow{ font-size:14px; }
  .fv-cta--primary{ background:var(--accent-deep); color:var(--white); }
  .fv-cta--primary:hover{ background:var(--ink); }
  .fv-cta--secondary{ background:rgba(255,255,255,.86); color:var(--ink); border:1px solid var(--accent); }
  .fv-cta--secondary:hover{ border-color:var(--accent-deep); background:var(--white); }

  /* FV下部の特徴3点（細い縦罫で区切る） */
  .fv-features{
    display:flex; flex-wrap:wrap; align-items:center;
    margin:38px 0 0; padding:0; list-style:none;
  }
  .fv-feature{ display:flex; align-items:center; gap:12px; padding-right:26px; }
  .fv-feature + .fv-feature{ padding-left:26px; border-left:1px solid var(--line-soft); }
  .fv-feature__icon{ flex:none; width:30px; height:30px; color:var(--accent-deep); }
  .fv-feature__icon svg{ width:100%; height:100%; display:block; }
  .fv-feature__text{ font-size:12.5px; line-height:1.65; color:var(--ink-soft); }

  /* --- 写真の上にのせる装飾 --- */
  .fv__deco{
    position:absolute; z-index:2; right:5.5%; top:9%;
    width:max-content;
  }
  .fv-script{
    font-family:'Italianno', cursive;
    font-size:clamp(56px, 5.9vw, 94px); line-height:.82;
    color:var(--accent); margin:0; white-space:nowrap;
    transform:rotate(-4deg); transform-origin:left center;
  }
  .fv-script span{ display:block; padding-left:1.6em; }
  .fv-note{
    margin:30px 0 0 6px; padding-left:18px;
    border-left:1px solid var(--accent);
    font-family:'Shippori Mincho', serif;
    font-size:14px; line-height:2.4; color:var(--ink); font-weight:600;
    white-space:nowrap;
  }
  .fv-tagline{
    position:absolute; z-index:2; right:5.5%; bottom:7%;
    margin:0; text-align:right;
    font-size:12.5px; line-height:1.85; letter-spacing:.2em;
    color:rgba(255,255,255,.96);
    text-shadow:0 1px 3px rgba(74,58,40,.5), 0 0 14px rgba(74,58,40,.35);
  }
  .fv-tagline::after{
    content:""; display:inline-block; vertical-align:middle;
    width:26px; height:1px; margin-left:10px;
    background:rgba(255,255,255,.8);
  }

  .eyebrow{
    font-size:13px; color:var(--accent-deep); margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:"";width:28px;height:1px;background:var(--accent-deep);}
  .btn-primary{
    display:inline-flex; align-items:center; gap:14px;
    background:var(--accent-deep); color:var(--white); padding:15px 28px; font-size:14px; border-radius:3px;
    transition:background .15s ease;
  }
  .btn-primary:hover{background:var(--ink);}
  .btn-primary--sm{padding:12px 22px; font-size:13px;}
  .btn-ghost{
    display:inline-flex; align-items:center; gap:14px;
    border:1px solid var(--line); background:var(--white);
    padding:15px 28px; font-size:14px; border-radius:3px; color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--ink);}
  /* ボタン／テキストリンクの矢印（デザイン画像に合わせて付与） */
  .btn-primary::after,
  .btn-ghost::after,
  .more::after,
  .card-link::after{content:"\2192"; line-height:1;}

  /* Hero visual: comparison card motif */
  .compare-card{
    background:var(--white); border:1px solid var(--line); border-radius:4px; padding:26px;
    box-shadow:0 24px 48px -28px rgba(43,38,32,.25);
  }
  .compare-card .row{
    display:grid; grid-template-columns:1.3fr .8fr .8fr; gap:10px;
    padding:13px 0; border-bottom:1px solid var(--line); font-size:13px;
  }
  .compare-card .row:first-child{color:var(--ink-soft); font-size:11px; letter-spacing:.04em;}
  .compare-card .row:last-child{border-bottom:none;}
  .compare-card .name{font-family:'Shippori Mincho',serif; font-size:14.5px;}
  .tag{
    display:inline-block; font-size:11px; padding:3px 10px; border-radius:20px; margin-top:5px; font-weight:500;
  }
  .tag-mixed{background:var(--mixed-bg); color:var(--mixed);}
  .tag-women{background:var(--women-bg); color:var(--women);}

  section{padding:72px 0;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:34px; border-bottom:1px solid var(--line-soft); padding-bottom:20px;
  }
  .section-head h2{font-size:26px;}
  .more{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--ink-soft); border-bottom:1px solid var(--line);
    padding-bottom:3px; white-space:nowrap;
  }
  .more:hover{color:var(--accent-deep); border-bottom-color:var(--accent-deep);}

  /* 全幅の帯セクション（旧: margin:0 -1000px のハックを置き換え） */
  .section-band{
    background:var(--bg);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
    padding:64px 0 72px;
  }

  /* 帯の小見出し（— 条件から絞り込む） */
  .band-title{
    display:flex; align-items:center; gap:14px;
    font-size:16.5px; margin-bottom:22px;
  }
  .band-title::before{content:""; width:24px; height:1px; background:var(--accent-deep); flex:none;}

  /* スクリーンリーダー専用テキスト */
  .screen-reader-text{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  /* Articles */
  .articles{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .article-card .cat{font-size:11.5px; color:var(--accent-deep); margin-bottom:10px;}
  .article-card .thumb{
    height:150px; background:var(--bg-card); border:1px solid var(--line); margin-bottom:16px;
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:12px;
  }
  .article-card h3{font-size:16.5px; line-height:1.6; font-weight:500; font-family:'Noto Sans JP',sans-serif;}
  .article-card p{font-size:13.5px; color:var(--ink-soft); margin-top:8px; line-height:1.7;}

  /* Comparison table */
  .table-wrap{
    background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  }
  table{width:100%; border-collapse:collapse; font-size:14.5px;}
  th,td{padding:18px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
  thead th{
    background:var(--bg-card); font-weight:600; color:var(--ink); font-size:12.5px; letter-spacing:.03em;
  }
  tbody tr:nth-child(even){background:#FBF8F3;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#F3ECDF;}
  td.studio{font-family:'Shippori Mincho',serif; font-size:15px;}
  td.studio span{display:block; font-size:12px; color:var(--ink-soft); font-family:'Noto Sans JP',sans-serif; margin-top:4px;}
  td.price{font-variant-numeric:tabular-nums; font-weight:500;}
  td.unknown{color:var(--ink-soft); font-style:italic;}
  .pill{
    display:inline-block; font-size:12px; padding:4px 12px; border-radius:20px; font-weight:500; white-space:nowrap;
  }
  /* 特徴タグ: 淡いベージュの下地＋枠線。派手な色は使わず視認性だけ上げる */
  .pill--outline{
    background:var(--tag-bg); color:var(--tag-ink); border:1px solid var(--tag-line);
    border-radius:4px; font-weight:500; font-size:11.5px; padding:4px 11px; line-height:1.6;
  }

  /* 比較セクションの見出し（見出し／説明／注記の3分割） */
  .compare-head{
    display:grid;
    grid-template-columns:minmax(0,auto) minmax(0,1fr) 268px;
    gap:34px; align-items:center;
    padding-bottom:30px; margin-bottom:34px;
  }
  .compare-head h2{font-size:28px; line-height:1.45;}
  .compare-head__title .eyebrow{margin-bottom:12px;}
  .compare-head__lead{
    font-size:12.5px; color:var(--ink-soft); line-height:2.0; margin:0; max-width:34em;
  }
  /* 注記は2行で自然に読める幅（約248px）を確保する */
  .compare-head__note{
    font-size:11.5px; color:var(--ink-muted); line-height:2.0; margin:0;
    border-left:1px solid var(--line); padding-left:26px;
  }
  .compare-more{text-align:right; margin-top:24px;}
  .pill-women{background:var(--women-bg); color:var(--women);}
  .pill-mixed{background:var(--mixed-bg); color:var(--mixed);}

  /* Listing banners（見本の雰囲気を保ったまま一回り小さく） */
  .banners{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  .banner{
    border:1px solid var(--line-soft); border-radius:6px; padding:22px 24px; background:var(--white);
  }
  .banner .num{font-size:11px; color:var(--accent-deep); margin-bottom:10px;}
  .banner h3{font-size:16px; margin-bottom:9px;}
  .banner p{font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; line-height:1.85;}
  .banner a{font-size:12.5px; border-bottom:1px solid var(--ink);}
  .banner__coming-soon{font-size:12.5px; color:var(--ink-muted);}
  .is-coming-soon{cursor:default; opacity:.72; pointer-events:none;}

  /* Footer */
  .site-footer{
    border-top:1px solid var(--line-soft); padding:0; margin-top:0; background:var(--bg);
  }
  .foot-main{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:32px; align-items:center;
    border-top:1px solid var(--line-soft);
    padding:26px 0;
  }
  .foot-brand__logo{font-family:'Shippori Mincho',serif; font-weight:600; font-size:17px; margin-bottom:6px;}
  .foot-brand__tagline{font-size:12px; color:var(--ink-muted); margin:0;}
  .foot-nav{display:flex; gap:26px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--ink-soft);}
  .foot-nav a:hover{color:var(--accent-deep);}
  .foot-actions{display:flex; align-items:center; gap:12px;}
  .foot-social, .foot-totop{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; color:var(--ink-soft);
  }
  .foot-social:hover{color:var(--accent-deep);}
  .foot-totop{border:1px solid var(--line); background:var(--white);}
  .foot-totop:hover{border-color:var(--ink); color:var(--ink);}
  .foot-legal{
    border-top:1px solid var(--line-soft);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    padding:18px 0 28px; font-size:12px; color:var(--ink-muted);
  }
  .foot-legal__links{display:flex; gap:26px; flex-wrap:wrap;}
  .foot-legal__menu{display:flex; gap:26px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
  .foot-legal a:hover{color:var(--ink);}

  @media(max-width:860px){
    .articles,.banners{grid-template-columns:1fr;}
    .section-head{flex-direction:column; align-items:flex-start; gap:10px;}
    table{font-size:12px;}
    th,td{padding:12px 10px;}
  }
  /* Filter search bar */
  .filter-band{
    border-bottom:1px solid var(--line-soft);
    padding:32px 0 30px;
  }
  .filter-bar{
    background:var(--white); border:1px solid var(--line); border-radius:4px;
    padding:28px 32px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:20px; align-items:end;
  }
  .filter-field label{
    display:block; font-size:12px; color:var(--ink-soft); margin-bottom:8px; letter-spacing:.02em;
  }
  .filter-field select{
    width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:2px; background:var(--bg);
    font-family:'Noto Sans JP',sans-serif; font-size:14px; color:var(--ink);
  }
  .filter-tags{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px; margin-top:2px;}
  .filter-tag{
    font-family:inherit; line-height:1.4; cursor:pointer;
    font-size:13px; padding:11px 26px; border:1px solid var(--tag-line); border-radius:999px;
    color:var(--ink-soft); background:var(--white);
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .filter-tag:hover{border-color:var(--accent); color:var(--accent-deep);}
  .filter-tag.active{background:var(--accent-deep); color:var(--white); border-color:var(--accent-deep);}
  .filter-submit{
    background:var(--ink); color:var(--white); padding:12px 30px; border-radius:2px; font-size:14px; white-space:nowrap;
  }
  @media(max-width:860px){
    .filter-bar{grid-template-columns:1fr; padding:24px 20px;}
  }
  /* Area image cards */
  .area-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .area-card{position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line);}
  .area-card .ph{
    width:100%; height:100%; background:linear-gradient(160deg,var(--bg-card),#E4D8C4);
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:11px;
  }
  .area-card .label{
    position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
    background:linear-gradient(0deg, rgba(43,38,32,.72), rgba(43,38,32,0));
    color:#fff; font-family:'Shippori Mincho',serif; font-size:17px;
  }
  .area-card .label span{display:block; font-family:'Noto Sans JP',sans-serif; font-size:11px; font-weight:400; opacity:.85; margin-top:2px;}
  @media(max-width:860px){
    .area-grid{grid-template-columns:repeat(2,1fr);}
  }

/* ポイント・注意ボックス（記事内で使用） */
.point-box, .caution-box{
  margin:28px 0;
  padding:20px 22px;
  border-radius:4px;
  border:1px solid;
}
.point-box{
  background:#FBF3DC;
  border-color:var(--accent);
}
.point-box::before{
  content:"POINT";
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--accent-deep);
  font-weight:700;
  margin-bottom:8px;
}
.caution-box{
  background:#FBEAEA;
  border-color:#C97B7B;
}
.caution-box::before{
  content:"注意";
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  color:#A94442;
  font-weight:700;
  margin-bottom:8px;
}
.point-box p, .caution-box p{ margin:0; }
mark{
  background:#FFF3A0;
  padding:0 3px;
  border-radius:2px;
}
/* 記事内の注意書き・補足ボックス */
.point-box {
  background: #f5f0e6;
  border: 1px solid #c9a97a;
  border-left: 4px solid #c9a97a;
  border-radius: 4px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 0.95em;
  line-height: 1.7;
}
.article-body h2 {
  background: #e9967a;
  color: #573122;
  padding: 10px 16px;
  border-radius: 4px;
  margin: 40px 0 20px;
}

.article-body h3 {
  color: #573122;
  border-bottom: 2px solid #e9967a;
  padding-bottom: 6px;
  margin: 32px 0 16px;
}
/* コラム本文のテキストリンク（「まとめ」「あわせて読みたい」などの関連記事リンク）。v1.6.33
   全体の a{color:inherit;text-decoration:none} で本文と見分けられなかったため、記事（.single）の
   段落・リスト・point-box 内の class なしリンクだけに色と下線を付ける。ボタン・カード（class 付き）、
   比較表のセル、固定ページ、ナビ・フッターには適用しない。#A84912 は背景 #FAF7F1 で 5.4:1 */
.single .article-body :is(p, li, .point-box) a:not([class]){
  color: #A84912;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.single .article-body :is(p, li, .point-box) a:not([class]):hover,
.single .article-body :is(p, li, .point-box) a:not([class]):focus-visible{
  color: #7F360B;
  text-decoration-thickness: 2px;
}
/* フッター「エリアから探す」（全国47都道府県の導線） */
.foot-area-section{
  padding: 40px 0 34px;
}
.foot-area-section__title{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 22px;
}
.foot-area-section__title::before{
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent-deep);
  flex: none;
}
.foot-areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 28px;
}
.foot-area-group h4 {
  font-size: 11.5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: .04em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.foot-area-group a {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 3px 0;
}
.foot-area-group a:hover {
  color: var(--accent-deep);
}
/* 現在スタジオを掲載しているエリア */
.foot-area-group a.is-current {
  font-weight: 600;
  color: var(--accent-deep);
}
@media(max-width:860px){
  .foot-area-section{ padding: 30px 0 26px; }
  .foot-areas{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .foot-area-group a{ font-size: 12.5px; padding: 5px 0; }
}.studio-rank-note{
  font-size:11px; color:var(--ink-soft); margin-bottom:16px;
}
.studio-rank-list{ display:flex; flex-direction:column; gap:14px; }
.studio-rank-item{
  display:grid; grid-template-columns:32px 100px 1fr; gap:16px;
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:18px;
  align-items:start;
}
.rank-num{
  font-family:'Shippori Mincho',serif; font-size:20px; color:var(--accent-deep);
}
.rank-photo{
  background:var(--bg-card); border-radius:4px; height:80px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:11px;
}
.rank-name{ font-size:15px; font-weight:500; margin-bottom:6px; }
.rank-tags{ display:flex; gap:6px; margin-bottom:8px; }
.rank-desc{ font-size:13px; color:var(--ink-soft); margin:0 0 10px; line-height:1.7; }
.rank-cta{
  display:block; text-align:center; font-size:13.5px; font-weight:500;
  background:var(--ink); color:var(--white); padding:11px 16px; border-radius:2px;
  transition:background .15s ease;
}
.rank-cta:hover{ background:var(--accent-deep); }
@media(max-width:860px){
  .studio-rank-item{ grid-template-columns:1fr; }
  .rank-photo{ height:120px; }
}
#articles, #compare, #area-list {
  scroll-margin-top: 90px;
}
.studio-rank-item.featured{
  background:#FFF8E9;
  border:2px solid var(--accent);
  padding:22px;
  grid-template-columns:40px 140px 1fr;
}

.studio-rank-item.featured .rank-photo{
  height:120px;
}
.studio-rank-item.featured .rank-name{
  font-size:17px;
}
.studio-rank-item.featured .rank-pick{
  font-size:11px; color:var(--accent-deep); letter-spacing:.06em; margin-bottom:6px;
}
.studio-rank-item.featured .rank-catch{
  font-size:13px; color:var(--accent-deep); font-weight:500; margin-bottom:8px; line-height:1.6;
}
.studio-rank-item.featured .rank-cta-group{
  display:flex; gap:10px; margin-top:12px;
}
.studio-rank-item.featured .rank-cta{
  border-color:var(--ink);
}
.studio-rank-item.featured .rank-cta.outline{
  border-color:var(--line); color:var(--ink-soft);
}
.studio-rank-item.featured .rank-cta-group{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.studio-rank-item.featured .rank-cta{
  white-space:nowrap;
}
.cond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 28px;
}
.cond-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13.5px;
}
.cond-item .cond-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 12px;
  color: #fff;
}
.cond-item.yes .cond-icon { background: var(--mixed); }
.cond-item.no .cond-icon { background: #C97B7B; }
.cond-item.unknown .cond-icon { background: var(--ink-soft); }
.cond-item .cond-status { font-size: 11.5px; color: var(--ink-soft); }
@media(max-width:860px){
  .cond-grid { grid-template-columns: 1fr 1fr; }
}
.studio-list-meta{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px;
  margin-bottom:16px;
}
.studio-list-meta .studio-rank-note,
.studio-list-meta .studio-count{ font-size:11px; color:var(--ink-muted); margin:0; }

.studio-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;
}
.studio-card{
  border:1px solid var(--line-soft); border-radius:10px; background:var(--surface);
  display:flex; flex-direction:column; padding:14px;
}
/* 画像はカードの内側に余白を取って配置する。
   枠の縦横比は無料掲載イラスト（1723×913）に合わせてあるので、
   イラストは切り取られずぴったり収まる。 */
.studio-card__photo{
  position:relative; aspect-ratio:1723/913; height:auto; background:var(--bg-card);
  border-radius:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--ink-muted); font-size:11px;
}
.studio-card__photo img{ width:100%; height:100%; object-fit:cover; }
/* 無料掲載はイラスト。文字・人物・器具が切れないよう、必ず全体を表示する */
.studio-card__photo--illustration{ background:#FEFDF9; }
.studio-card__photo--illustration img{ object-fit:contain; }
.studio-card__body{ padding:16px 4px 0; display:flex; flex-direction:column; flex:1; }
.studio-card__pick{
  font-size:10.5px; color:var(--accent-deep); letter-spacing:.06em; margin-bottom:5px;
}
.studio-card__name{
  font-family:'Shippori Mincho',serif; font-weight:600; font-size:17.5px; line-height:1.5; margin:0 0 11px;
}
.studio-card__catch{
  font-size:11.5px; color:var(--accent-deep); line-height:1.7; margin:0 0 8px;
}
.studio-card__tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:11px; }
.studio-card__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-bottom:13px;
}
.studio-card__meta > div + div{ border-left:1px solid var(--line-soft); padding-left:11px; }
.studio-card__meta > div{ padding-right:9px; }
.studio-card__meta-label{ display:block; font-size:10.5px; color:var(--ink-muted); margin-bottom:4px; }
.studio-card__meta-value{ display:block; font-size:12px; line-height:1.55; font-variant-numeric:tabular-nums; }
/* 説明文は3行で打ち切り、文章量の差でカードの高さが崩れないようにする
   （データは一切変更せず、表示上だけ行数を揃える） */
.studio-card__desc{
  font-size:12px; color:var(--ink-soft); line-height:1.75; margin:0 0 12px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden;
}
/* ボタン行は常にカード下端に揃える */
.studio-card__actions{
  display:flex; align-items:stretch; gap:10px; flex-wrap:nowrap;
  padding-top:4px; margin-top:auto;
}
/* 「詳しく見る」「公式サイト」は四角いアウトラインボタンにする */
.card-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:1 1 0; min-width:0;
  font-size:12.5px; border-radius:4px;
  border:1px solid var(--accent-deep); background:var(--accent-deep); color:var(--white);
  padding:12px 12px; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.card-link:hover{ background:var(--ink); border-color:var(--ink); color:var(--white); }
/* 「公式サイト」は従の導線として白抜きにする */
.card-link--sub{
  font-size:12.5px; background:var(--white); color:var(--ink); border-color:var(--accent);
}
.card-link--sub:hover{ background:var(--bg-hero-top); border-color:var(--accent-deep); color:var(--accent-deep); }
.card-link::after{ font-size:.95em; }
/* PR枠もデザイン画像に合わせ他カードと同じ見た目にし、PRバッジのみで区別する */
.studio-card.featured{
  border-color:var(--line);
}

/* =========================================================================
   「ピラティスを知る」＋「資格・スクールを探す」の2カラム
   ※ index.php で使う .article-card / .articles とは別クラスにして影響を避けている
   ========================================================================= */
.know-section{ padding-top:64px; }
/* 資格・スクールカードは記事カラムに対して縦中央に置き、
   見出しの高さぶん上に寄って見えるのを防ぐ */
.know-row{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:center;
}
.know-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  margin-bottom:26px;
}
.know-head h2{ font-size:24px; margin-bottom:12px; }
.know-head__lead{ font-size:12.5px; color:var(--ink-soft); line-height:1.9; margin:0; }

.columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.column-card{ display:block; color:inherit; }
.column-card__thumb{
  position:relative; aspect-ratio:16/9; border-radius:6px;
  background:var(--bg-card); border:1px solid var(--line-soft);
}
.column-card__thumb img{ width:100%; height:100%; object-fit:cover; border-radius:5px; }
/* カテゴリは写真の下端にまたがるように置く */
.column-card__cat{
  position:absolute; left:10px; bottom:-14px;
  background:var(--white); color:var(--ink); border:1px solid var(--line-soft);
  font-size:11.5px; padding:6px 14px; border-radius:999px; white-space:nowrap;
}
.column-card__title{
  font-family:'Noto Sans JP',sans-serif; font-weight:500;
  font-size:13.5px; line-height:1.75; margin:26px 0 0;
}
.column-card:hover .column-card__title{ color:var(--accent-deep); }
.column-card__date{ display:block; font-size:11.5px; color:var(--ink-muted); margin-top:8px; }

.school-card{
  background:var(--bg-tint); border:1px solid var(--line-soft); border-radius:10px;
  padding:28px 28px; display:flex; align-items:center; gap:22px;
}
/* 線画イラストは左側に。地色は透過済みなので、カードのベージュにそのままなじむ。
   枠の縦横比を素材（1199×1312）に合わせ、contain で全体を切らずに表示する。 */
.school-card__illustration{ flex:0 0 38%; min-width:0; }
.school-card__illustration img{
  display:block; width:100%; height:auto; aspect-ratio:1199/1312;
  object-fit:contain;
}
.school-card__body{ flex:1 1 auto; min-width:0; }
.school-card__body h2{ font-size:21px; margin-bottom:14px; line-height:1.5; }
.school-card__body p{ font-size:13px; color:var(--ink-soft); line-height:1.95; margin:0 0 22px; }
/* 見本に合わせて白抜きのボタンにする */
/* 細いカード幅でもボタンが2行に折れないよう、詰めて1行に固定する */
.school-card__body .btn-primary{
  background:transparent; color:var(--ink); border:1px solid var(--accent);
  padding:13px 18px; gap:10px; font-size:13px; white-space:nowrap;
}
.school-card__body .btn-primary:hover{ background:var(--white); border-color:var(--accent-deep); color:var(--accent-deep); }
/* 資格・スクール比較へのCTA（オレンジ・白文字・太字）。細いカードでも収まるよう折り返しを許し、押しやすい高さを確保する */
.school-card__body .btn-primary.school-card__cta{
  background:#E56B16; border-color:#E56B16; color:#fff; font-weight:700;
  display:flex; width:100%; max-width:320px; min-height:48px; padding:12px 14px; gap:8px; justify-content:center; text-align:center;
  white-space:normal; word-break:keep-all; line-height:1.5;
}
.school-card__body .btn-primary.school-card__cta:hover{ background:#C9580C; border-color:#C9580C; color:#fff; }
.school-card__body .btn-primary.school-card__cta:focus-visible{ outline:3px solid #E56B16; outline-offset:3px; }

.listing-section{ padding-top:24px; }

/* ページ内アンカーがヘッダーに隠れないように */
#articles, #compare, #school, #listing, #area-list{ scroll-margin-top:90px; }

/* =========================================================================
   レスポンシブ（タブレット／スマートフォン）
   ========================================================================= */
@media(max-width:1024px){
  /* FV：1024px以下では写真の上にコピーを重ねると人物と文字がぶつかるため、
     コピー → 装飾 → 写真 の縦積みに切り替える。 */
  .fv{ display:flex; flex-direction:column; min-height:0; align-items:stretch; }
  .fv__media{
    position:relative; inset:auto; order:2; width:100%; overflow:hidden;
    aspect-ratio:2/1;
  }
  /* 画像は絶対配置にして、枠の高さを aspect-ratio 側で決められるようにする
     （通常フローのままだと画像の実寸比率が枠の高さを決めてしまう） */
  .fv__media img{ position:absolute; inset:0; object-position:50% 50%; }
  .fv__scrim{ display:none; }
  .fv__inner{ order:1; padding:52px 28px 34px; }
  .fv__copy{ max-width:none; }
  .fv__title{ font-size:36px; }
  .fv-cta{ padding:14px 22px; }
  /* 装飾は写真の上ではなくコピーの下に置き、読みやすさを保つ */
  /* width:100% を明示する。flexアイテムに auto マージンを使うと
     stretch が効かず、内容幅のまま中央寄せになってしまうため。 */
  .fv__deco{
    position:static; order:1; width:100%;
    display:flex; align-items:center; gap:26px;
    max-width:1120px; margin:34px auto 0; padding:0 28px;
  }
  .fv-script{ font-size:60px; transform:rotate(-3deg); }
  .fv-note{ margin:0; }
  .fv-tagline{ right:26px; bottom:18px; }

  .compare-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
  .know-row{ align-items:start; }
  .compare-head__note{ border-left:none; padding-left:0; max-width:none; }
  .compare-head__lead{ max-width:none; }
  .know-row{ grid-template-columns:1fr; gap:36px; }
  /* 1カラムになるとカードが全幅になるため、イラストが大きくなりすぎないよう上限を設ける */
  .school-card{ padding:26px 28px; gap:28px; }
  .school-card__illustration{ flex:0 0 clamp(170px, 24%, 230px); }
  .school-card__body h2{ font-size:22px; }
  .columns{ gap:18px; }
  .studio-grid{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ gap:20px; font-size:13px; }
}

@media(max-width:860px){
  /* ヘッダー：ハンバーガーメニューに切り替え */
  .nav{ gap:12px; padding:12px 0; }
  .nav-toggle{ display:flex; }
  .site-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); border-bottom:1px solid var(--line);
    padding:8px 28px 20px;
    box-shadow:0 18px 24px -20px rgba(43,38,32,.35);
  }
  .site-nav.is-open{ display:flex; }
  .nav-links{
    display:flex; flex-direction:column; gap:0; margin:0; font-size:14px;
  }
  .nav-links a{ padding:14px 2px; border-bottom:1px solid var(--line-soft); }
  .nav-cta{ margin-top:16px; text-align:center; }

  /* FV：縦積みは1024px以下で適用済み。ここではスマホ向けの差分だけを指定する。
     写真はやや縦長（16:10）にし、人物の頭からマットまでが入る位置に寄せる。 */
  .fv__media{ aspect-ratio:16/10; }
  .fv__media img{ object-position:96% 50%; }
  .fv__inner{ padding:40px 18px 30px; }
  .fv__title{ font-size:30px; }
  .fv__lead{ font-size:14.5px; margin-top:20px; }
  .fv__lead br, .compare-head__lead br, .know-head__lead br{ display:none; }
  .fv-actions{ gap:12px; margin-top:24px; flex-direction:column; align-items:stretch; }
  .fv-cta{ width:100%; justify-content:flex-start; }
  .fv-cta__arrow{ margin-left:auto; }
  /* 特徴3点は横3分割にして収める */
  .fv-features{
    margin:28px 0 0;
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line-soft);
  }
  .fv-feature{
    flex-direction:column; align-items:center; text-align:center; gap:8px;
    padding:20px 4px;
  }
  .fv-feature + .fv-feature{ padding-left:4px; border-left:1px solid var(--line-soft); }
  .fv-feature__icon{ width:26px; height:26px; }
  .fv-feature__text{ font-size:11.5px; }
  /* 装飾は筆記体と縦書き風テキストを縦に積む */
  .fv__deco{ display:block; margin-top:24px; padding:0 18px; }
  .fv-script{ font-size:52px; }
  .fv-note{ margin-top:16px; font-size:13px; line-height:2.2; }
  .fv-tagline{ right:16px; bottom:18px; font-size:11px; }
  .btn-primary, .btn-ghost{ padding:14px 22px; font-size:13.5px; }

  .filter-band{ padding:26px 0 24px; }
  .filter-tag{ font-size:12.5px; padding:8px 16px; }

  .section-band{ padding:44px 0 48px; }
  .compare-head h2{ font-size:23px; }
  .studio-grid{ grid-template-columns:1fr; gap:20px; }
  .studio-card__photo{ aspect-ratio:2/1; }
  .studio-card__desc{ -webkit-line-clamp:3; line-clamp:3; }

  .know-section{ padding-top:48px; }
  .know-head{ flex-direction:column; gap:12px; }
  .know-head h2{ font-size:21px; }
  .columns{ grid-template-columns:1fr; gap:20px; }
  .column-card{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:start; }
  .column-card__thumb{ aspect-ratio:1/1; }
  /* 横並びでは、カテゴリを写真からはみ出させず内側に収める */
  .column-card__cat{ left:6px; bottom:6px; font-size:10.5px; padding:4px 10px; }
  .column-card__title{ margin-top:0; }
  .columns{ gap:22px; }
  .school-card{ padding:26px 24px; gap:24px; }

  .banners{ grid-template-columns:1fr; }
  .listing-section{ padding-bottom:56px; }

  .foot-main{ grid-template-columns:1fr; gap:22px; text-align:left; padding:24px 0; }
  .foot-nav{ justify-content:flex-start; gap:16px 20px; }
  .foot-actions{ justify-content:flex-start; }
  .foot-legal{ flex-direction:column; align-items:flex-start; gap:12px; }
  .foot-legal__links, .foot-legal__menu{ gap:14px 20px; }
}

@media(max-width:560px){
  /* 資格・スクールカード：横並びのままだと見出しとボタンが折れて窮屈になるため、
     イラストを上に置いて縦積みにする。イラストには上限を付け、縦に伸びすぎないようにする。 */
  .school-card{ flex-direction:column; align-items:stretch; gap:18px; padding:24px 22px; }
  .school-card__illustration{ flex:none; width:100%; max-width:175px; margin:0 auto; }
  .school-card__body h2{ font-size:20px; }
  .school-card__body .btn-primary{ padding:13px 20px; }
  .school-card__body .btn-primary.school-card__cta{ max-width:none; min-height:52px; font-size:15px; }
}

@media(max-width:480px){
  .wrap{ padding:0 18px; }
  .site-nav{ padding:8px 18px 20px; }
  .fv__title{ font-size:26px; }
  .fv-feature__text{ font-size:11px; }
  .fv-feature{ padding:18px 4px; }
  .studio-card__meta{ grid-template-columns:1fr 1fr; }
  .column-card{ grid-template-columns:96px minmax(0,1fr); }
  .card-link{ font-size:12px; padding:9px 8px; }
}

/* ==========================================================================
   スタジオ個別ページ（/studio/{slug}/）
   すべて .studio-detail 配下のセレクタです。トップページには影響しません。
   ========================================================================== */
.studio-detail{ padding-bottom:72px; }

/* パンくず */
.studio-detail .sd-breadcrumb{
  padding:22px 28px 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:12px; color:var(--ink-soft);
}
.studio-detail .sd-breadcrumb a:hover{ color:var(--accent-deep); }
.studio-detail .sd-breadcrumb__current{ color:var(--ink); }

/* ページヘッダー */
.studio-detail .sd-head{
  padding:26px 28px 28px; border-bottom:1px solid var(--line);
}
.studio-detail .sd-head__name{ font-size:34px; line-height:1.5; }
.studio-detail .sd-head__catch{
  margin:14px 0 0; font-size:14.5px; color:var(--ink-soft); line-height:1.8; max-width:44em;
}
.studio-detail .sd-head__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

/* 完成済み画像（横長バナー型）：全幅で、画像の縦横比のまま表示する */
.studio-detail .sd-banner{
  margin:36px auto 0; padding:0 28px;
}
.studio-detail .sd-banner img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:4px; background:var(--white);
}

/* 画像 ＋ 基本情報 */
.studio-detail .sd-overview{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:44px; align-items:start; padding:40px 28px 0;
}
/* バナー型画像を使う場合は、リード文と基本情報の2カラムにする */
.studio-detail .sd-overview--banner{ grid-template-columns:1fr; }
.studio-detail .sd-overview--banner .sd-summary{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px; align-items:start;
}
.studio-detail .sd-overview--banner .sd-summary__lead{ margin:0; }

/* 完成済みの線画はトリミングせず、枠側で余白を調整する */
.studio-detail .sd-visual{
  background:var(--bg-card); border:1px solid var(--line); border-radius:4px;
  padding:28px; display:flex; align-items:center; justify-content:center;
}
/* 画像は実寸の縦横比のまま。切り抜き・変形は行わない */
.studio-detail .sd-visual img{ width:100%; height:auto; object-fit:contain; }
.studio-detail .sd-visual--empty{ aspect-ratio:4/3; }
.studio-detail .sd-visual__placeholder{ font-size:11px; color:var(--ink-soft); letter-spacing:.06em; }

.studio-detail .sd-summary__lead{
  margin:0 0 24px; font-size:14.5px; color:var(--ink-soft); line-height:1.9;
}
.studio-detail .sd-spec{
  margin:0; background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.studio-detail .sd-spec__row{
  display:grid; grid-template-columns:132px 1fr; gap:16px;
  padding:13px 20px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.studio-detail .sd-spec__row:last-child{ border-bottom:none; }
.studio-detail .sd-spec dt{ color:var(--ink-soft); font-size:12.5px; }
.studio-detail .sd-spec dd{ margin:0; font-variant-numeric:tabular-nums; }
.studio-detail .sd-spec dd.is-unknown{ color:var(--ink-soft); font-style:italic; }
.studio-detail .sd-spec--wide .sd-spec__row{ grid-template-columns:132px 1fr; }

/* CTA：体験予約をメイン、公式サイトをサブ導線にする */
.studio-detail .sd-cta-group{ margin-top:22px; }
.studio-detail .sd-cta{
  display:block; text-align:center;
  background:var(--ink); color:var(--white); padding:15px 24px;
  font-size:14px; font-weight:500; border-radius:2px; transition:background .15s ease, border-color .15s ease;
}
.studio-detail .sd-cta:hover{ background:var(--accent-deep); }
.studio-detail .sd-cta--sub{
  margin-top:10px; background:var(--white); color:var(--ink);
  border:1px solid var(--line); font-weight:400;
}
.studio-detail .sd-cta--sub:hover{ background:var(--white); border-color:var(--ink); }
.studio-detail .sd-cta-caption{
  /* 「予約は公式サイトで行います」を見落とさないよう、落ち着いたダークレッド＋やや太字で強調（全店舗共通） */
  margin:10px 0 0; font-size:11.5px; font-weight:600; color:#9E3A2F; text-align:center; line-height:1.7;
}
.studio-detail .sd-cta-note{ margin:22px 0 0; font-size:12.5px; color:var(--ink-soft); }

/* 体験レッスンのキャンペーン価格は、通常料金と混同しないよう明示する */
.studio-detail .sd-badge-campaign{
  display:inline-block; font-size:11px; line-height:1.6; font-weight:500;
  color:var(--accent-deep); border:1px solid var(--accent); border-radius:2px;
  padding:1px 8px; white-space:nowrap;
}
.studio-detail .sd-trial-note{ display:block; margin-top:4px; font-size:12px; color:var(--ink-soft); }

/* 体験レッスンセクションのCTAは中央に置き、幅を抑える */
.studio-detail .sd-section .sd-cta-group{ max-width:420px; margin-left:auto; margin-right:auto; margin-top:28px; }

/* 各セクション */
.studio-detail .sd-section{ margin:52px auto 0; padding:0 28px; }
.studio-detail .sd-section__title{
  font-size:21px; padding-bottom:14px; margin-bottom:24px; border-bottom:1px solid var(--line);
}

/* 特徴 */
.studio-detail .sd-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.studio-detail .sd-feature{
  background:var(--white); border:1px solid var(--line); border-radius:4px; padding:24px 22px;
}
.studio-detail .sd-feature__title{
  font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:15.5px;
  line-height:1.6; margin:0 0 10px;
}
.studio-detail .sd-feature__body{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.8; }

.studio-detail .sd-note{ margin:12px 0 0; font-size:12px; color:var(--ink-soft); }

/* こんな方に向いています */
.studio-detail .sd-recommend{
  list-style:none; margin:0; padding:22px 26px;
  background:var(--white); border:1px solid var(--line); border-radius:4px; font-size:14px;
}
.studio-detail .sd-recommend li{ display:flex; align-items:baseline; gap:12px; padding:7px 0; }
.studio-detail .sd-recommend li::before{
  content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--accent);
  transform:translateY(-3px);
}

/* 注意事項 */
.studio-detail .sd-disclaimer{
  background:var(--bg-card); border-radius:4px; padding:20px 24px;
  font-size:12.5px; color:var(--ink-soft); line-height:1.9;
}
.studio-detail .sd-disclaimer p{ margin:0 0 6px; }
.studio-detail .sd-disclaimer p:last-child{ margin:0; }
.studio-detail .sd-disclaimer__date{ color:var(--ink); }

/* 比較へ戻る */
.studio-detail .sd-section--back{ text-align:center; }
.studio-detail .sd-back{
  display:inline-block; font-size:13.5px; color:var(--ink);
  border:1px solid var(--line); border-radius:2px; padding:13px 30px; background:var(--white);
}
.studio-detail .sd-back:hover{ border-color:var(--ink); }

@media(max-width:860px){
  .studio-detail .sd-overview{ grid-template-columns:1fr; gap:28px; padding-top:28px; }
  .studio-detail .sd-overview--banner .sd-summary{ grid-template-columns:1fr; gap:24px; }
  .studio-detail .sd-banner{ margin-top:24px; }
  .studio-detail .sd-features{ grid-template-columns:1fr; }
  .studio-detail .sd-head__name{ font-size:26px; }
  .studio-detail .sd-spec__row,
  .studio-detail .sd-spec--wide .sd-spec__row{ grid-template-columns:104px 1fr; gap:12px; }
  .studio-detail .sd-section{ margin-top:40px; }
}

/* ==========================================================================
   有料掲載スタジオの詳細ページ v1（listing_plan = paid）
   完成イメージ（1024px描画）の実測値を基準にしています。

   サイズの基準単位 --sp-u
     完成イメージは1024px幅で描かれているため、そのままの px を使うと
     1280px で見たときに一回り小さく見えます。1024px→1280px で
     文字・アイコン・余白が比例して大きくなるよう、単位を1つ定義して
     そこからの倍率で指定しています。
       1024px → --sp-u = 16px（完成イメージと同じ見え方）
       1280px → --sp-u = 20px（完成イメージを1280pxで見たときと同じ見え方）

   すべて .studio-paid 配下のセレクタです。
   トップページ・無料掲載ページ・既存CSSには影響しません。
   ========================================================================== */
.studio-paid{
  /* 記事等で使っているオレンジ系アクセント。CTA・重要な金額に限定して使う */
  --sp-orange:#C0664A;
  --sp-orange-deep:#A5533B;
  --sp-orange-soft:#FBEFEA;
  /* 選ばれる理由のアイコンに使うゴールド（完成イメージから採取） */
  --sp-gold:#C09652;
  /* キャンペーン専用の黄色。ひと目で気づく明るさにする（ここ以外では使わない） */
  --sp-yellow:#FDCB4E;
  --sp-yellow-ink:#6B4A12;
  /* 口コミカード。料金表の隣で別導線だと分かるクリーム＋ゴールド枠 */
  --sp-cream:#FEF9EF;
  --sp-cream-line:#E8C079;

  /* 本文の幅（コンテンツ幅）と厳密に比例させる。
     1024px（完成イメージと同条件）で 16px、本文が最大幅になる1280px以上で 18.58px。
     文字だけが先に大きくなって表が折り返す、という状態を防ぎます。 */
  --sp-u:clamp(16px, calc((100vw - 56px) / 60.5), 19.64px);

  padding-bottom:calc(var(--sp-u) * 4.5);
}

/* 完成イメージの占有率に合わせ、有料掲載ページだけコンテナを広くする。
   ヘッダー・フッターも body.is-studio-paid のときだけ同じ幅に揃えるので、
   本文と左右の位置がずれません。トップ・無料掲載ページには適用されません。 */
.studio-paid .wrap,
body.is-studio-paid .site-header .wrap,
body.is-studio-paid .site-footer .wrap,
body.is-studio-paid footer .wrap{ max-width:1244px; }
/* .nav{padding:16px 0} が .wrap の左右パディングを打ち消すため、
   有料ページだけ左右を戻してロゴと本文の左端を揃える */
body.is-studio-paid .site-header .nav{ padding-left:28px; padding-right:28px; }

.studio-paid .sp-icon{ width:calc(var(--sp-u) * 1.25); height:calc(var(--sp-u) * 1.25); display:block; }
.studio-paid .sp-ext{ margin-left:.4em; font-size:.9em; }

/* パンくず */
.studio-paid .sp-breadcrumb{
  padding:calc(var(--sp-u) * 1) 28px 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:calc(var(--sp-u) * .75); color:var(--ink-muted);
}
.studio-paid .sp-breadcrumb a:hover{ color:var(--sp-orange); }
.studio-paid .sp-breadcrumb__current{ color:var(--ink); }

/* レイアウト確認用プレビューの注意書き（本番では出力されません） */
.studio-paid .sp-preview{ margin-top:calc(var(--sp-u) * .9); }
.studio-paid .sp-preview-flag{
  margin:0;
  padding:calc(var(--sp-u) * .6) calc(var(--sp-u) * 1);
  background:var(--sp-yellow); color:var(--sp-yellow-ink);
  border-radius:6px; font-size:calc(var(--sp-u) * .75); line-height:1.7;
}

/* ---------- ① ファーストビュー ---------- */
.studio-paid .sp-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(var(--sp-u) * 2.25); align-items:start;
  padding:calc(var(--sp-u) * 1.25) 28px 0;
}

/* グリッドの子が中身の最小幅で押し広げられないようにする（横オーバーフローの原因側対策） */
.studio-paid .sp-hero__media,
.studio-paid .sp-hero__body,
.studio-paid .sp-hero__thumbs{ min-width:0; }

/* 写真エリア。写真が無くても枠は残す（レイアウトの土台のため） */
.studio-paid .sp-hero__main{
  margin:0; border-radius:8px; overflow:hidden; background:var(--bg-tint);
  aspect-ratio:16 / 10;
}
.studio-paid .sp-hero__main img{ width:100%; height:100%; display:block; object-fit:cover; }
.studio-paid .sp-hero__main--empty{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); background:var(--bg-card);
}
.studio-paid .sp-hero__empty-label{ font-size:calc(var(--sp-u) * .78); color:var(--ink-muted); letter-spacing:.04em; }

/* サムネイルは完成イメージに合わせて「4枚が写真幅いっぱいに並ぶ」大きさ。
   5枚目以降は横スクロールし、‹ › は写真の上に重ねて置きます。 */
.studio-paid .sp-hero__thumbs{
  position:relative; margin-top:calc(var(--sp-u) * .5);
}
.studio-paid .sp-hero__thumblist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--sp-u) * 1.5) / 4);
  gap:calc(var(--sp-u) * .5);
  overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;
}
.studio-paid .sp-hero__thumblist::-webkit-scrollbar{ display:none; }
.studio-paid .sp-hero__thumb{
  display:block; width:100%; padding:0; border:2px solid transparent; border-radius:6px;
  overflow:hidden; background:var(--bg-tint); cursor:pointer; line-height:0;
  transition:border-color .15s ease, opacity .15s ease;
}
.studio-paid .sp-hero__thumb img{ width:100%; aspect-ratio:5 / 4; object-fit:cover; display:block; }
.studio-paid .sp-hero__thumb:hover{ opacity:.85; }
.studio-paid .sp-hero__thumb.is-current{ border-color:var(--sp-orange); }
.studio-paid .sp-hero__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:calc(var(--sp-u) * 1.75); height:calc(var(--sp-u) * 1.75);
  border-radius:50%; cursor:pointer;
  background:var(--white); border:1px solid var(--line); color:var(--ink);
  font-size:calc(var(--sp-u) * .95); line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  transition:border-color .15s ease, color .15s ease;
}
.studio-paid .sp-hero__nav--prev{ left:calc(var(--sp-u) * -.4); }
.studio-paid .sp-hero__nav--next{ right:calc(var(--sp-u) * -.4); }
.studio-paid .sp-hero__nav:hover{ border-color:var(--sp-orange); color:var(--sp-orange); }

.studio-paid .sp-hero__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:calc(var(--sp-u) * .7); }
.studio-paid .sp-tag{
  font-size:calc(var(--sp-u) * .72); background:var(--tag-bg); border:1px solid var(--tag-line);
  color:var(--tag-ink); border-radius:4px; padding:.35em .85em; white-space:nowrap;
}
.studio-paid .sp-hero__name{ font-size:calc(var(--sp-u) * 1.875); line-height:1.4; margin:0; }
.studio-paid .sp-hero__catch{
  margin:calc(var(--sp-u) * .55) 0 0; font-size:calc(var(--sp-u) * .8125);
  color:var(--ink-soft); line-height:1.8;
}

/* 重要情報カード（3秒で料金・形式・対象・アクセス・営業時間が分かる） */
.studio-paid .sp-specs{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--sp-u) * .5); margin-top:calc(var(--sp-u) * .9);
}
.studio-paid .sp-spec{
  display:flex; align-items:flex-start; gap:calc(var(--sp-u) * .65);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px;
  padding:calc(var(--sp-u) * .26) calc(var(--sp-u) * .6);
}
.studio-paid .sp-spec__icon{ flex:none; color:var(--sp-orange); margin-top:.15em; }
.studio-paid .sp-spec__icon .sp-icon{ width:calc(var(--sp-u) * 1.2); height:calc(var(--sp-u) * 1.2); }
.studio-paid .sp-spec__text{ min-width:0; }
.studio-paid .sp-spec__label{
  display:block; font-size:calc(var(--sp-u) * .75); color:var(--ink-muted);
  line-height:1.3; margin-bottom:.1em;
}
.studio-paid .sp-spec__value{
  display:block; font-size:calc(var(--sp-u) * .84); line-height:1.4; font-variant-numeric:tabular-nums;
}
.studio-paid .sp-spec__value--price{ font-size:calc(var(--sp-u) * 1.25); font-weight:600; color:var(--sp-orange); line-height:1.35; }
.studio-paid .sp-spec__sub{ display:block; font-size:calc(var(--sp-u) * .75); color:var(--ink-soft); line-height:1.3; }

/* ---------- CTA ---------- */
.studio-paid .sd-cta-group{ margin-top:calc(var(--sp-u) * .9); }
.studio-paid .sd-cta{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  text-align:center; background:var(--sp-orange); color:var(--white);
  padding:calc(var(--sp-u) * .82) calc(var(--sp-u) * 1.5);
  font-size:calc(var(--sp-u) * .95); font-weight:600; border-radius:6px;
  border:1px solid var(--sp-orange);
  transition:background .15s ease, border-color .15s ease;
}
.studio-paid .sd-cta::after{ content:"→"; font-weight:400; }
.studio-paid .sd-cta:hover{ background:var(--sp-orange-deep); border-color:var(--sp-orange-deep); }
.studio-paid .sd-cta--sub{
  margin-top:calc(var(--sp-u) * .55); background:var(--white); color:var(--ink);
  border-color:var(--line); font-size:calc(var(--sp-u) * .85); font-weight:400;
  padding:calc(var(--sp-u) * .75) calc(var(--sp-u) * 1.5);
}
.studio-paid .sd-cta--sub::after{ content:"↗"; }
.studio-paid .sd-cta--sub:hover{ background:var(--white); border-color:var(--sp-orange); color:var(--sp-orange-deep); }
.studio-paid .sd-cta-note{
  margin:calc(var(--sp-u) * 1.1) 0 0; font-size:calc(var(--sp-u) * .78);
  color:var(--ink-muted); text-align:center;
}

/* ---------- 共通セクション ---------- */
.studio-paid .sp-section{ margin:calc(var(--sp-u) * 2.1) auto 0; padding:0 28px; }
.studio-paid .sp-section__title{
  font-size:calc(var(--sp-u) * 1.1875); margin:0 0 calc(var(--sp-u) * .55);
  padding-left:.63em; border-left:3px solid var(--sp-orange); line-height:1.5;
}
.studio-paid .sp-note{
  margin:calc(var(--sp-u) * .75) 0 0; font-size:calc(var(--sp-u) * .72);
  color:var(--ink-muted); line-height:1.8;
}

/* ---------- ② 選ばれる理由（アイコンは左、見出し・本文は右） ---------- */
.studio-paid .sp-reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--sp-u) * 1); }
.studio-paid .sp-reason{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px;
  padding:calc(var(--sp-u) * 1.1) calc(var(--sp-u) * 1.2);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:calc(var(--sp-u) * 1); row-gap:calc(var(--sp-u) * .55);
  align-items:center;
}
.studio-paid .sp-reason__icon{ grid-column:1; grid-row:1; display:block; color:var(--sp-gold); }
.studio-paid .sp-reason__icon .sp-icon{
  width:calc(var(--sp-u) * 2.625); height:calc(var(--sp-u) * 2.625); stroke-width:1.9;
}
.studio-paid .sp-reason__title{
  grid-column:2; grid-row:1;
  font-family:'Noto Sans JP',sans-serif; font-weight:700; font-size:calc(var(--sp-u) * 1.0625);
  line-height:1.5; margin:0;
}
.studio-paid .sp-reason__text{
  grid-column:2; grid-row:2; margin:0;
  font-size:calc(var(--sp-u) * .78); color:var(--ink-soft); line-height:1.7;
}

/* ---------- ③ スタジオの雰囲気 ---------- */
.studio-paid .sp-gallery--with-note{
  display:grid; grid-template-columns:minmax(0,1fr) calc(var(--sp-u) * 10.25);
  gap:calc(var(--sp-u) * 1); align-items:center;
}
.studio-paid .sp-gallery__grid{ display:grid; gap:calc(var(--sp-u) * .75); }
.studio-paid .sp-gallery__grid[data-count="2"]{ grid-template-columns:repeat(2,1fr); }
.studio-paid .sp-gallery__grid[data-count="3"]{ grid-template-columns:repeat(3,1fr); }
.studio-paid .sp-gallery__grid[data-count="4"]{ grid-template-columns:repeat(4,1fr); }
.studio-paid .sp-gallery__item{ margin:0; }
.studio-paid .sp-gallery__item img{
  width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover;
  display:block; border-radius:8px; background:var(--bg-tint);
}
.studio-paid .sp-gallery__note{
  margin:0; font-size:calc(var(--sp-u) * .8125); color:var(--ink-soft); line-height:1.9;
}

/* ---------- ④ こんな方におすすめ ---------- */
.studio-paid .sp-audience{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--sp-u) * .6);
}
.studio-paid .sp-audience__item{
  display:flex; align-items:center; gap:calc(var(--sp-u) * .6);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px;
  padding:calc(var(--sp-u) * .42) calc(var(--sp-u) * .7);
  font-size:calc(var(--sp-u) * .78); line-height:1.5;
}
.studio-paid .sp-audience .sp-icon{
  flex:none; width:calc(var(--sp-u) * 1.125); height:calc(var(--sp-u) * 1.125); color:var(--sp-orange);
}

/* ---------- ⑤ 料金プラン ＋ 口コミ導線 ---------- */
.studio-paid .sp-pricing--with-aside{
  display:grid; grid-template-columns:minmax(0,1fr) calc(var(--sp-u) * 14.7);
  gap:calc(var(--sp-u) * .9); align-items:start;
}
.studio-paid .sp-plans{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px; overflow:hidden;
}
/* 完成イメージに合わせ、料金列を広くしてキャンペーン表示が1行に収まるようにする */
.studio-paid .sp-plans__head,
.studio-paid .sp-plans__row{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,2.05fr) minmax(0,1.7fr);
  align-items:center;
}
.studio-paid .sp-plans__head > *,
.studio-paid .sp-plans__row > *{
  padding:calc(var(--sp-u) * .22) calc(var(--sp-u) * .45);
}
/* 列の区切り線（完成イメージと同じ） */
.studio-paid .sp-plans__head > * + *,
.studio-paid .sp-plans__row > * + *{ border-left:1px solid var(--line-soft); }
.studio-paid .sp-plans__head{
  background:var(--bg-tint); font-size:calc(var(--sp-u) * .72);
  color:var(--ink-muted); letter-spacing:.03em;
}
.studio-paid .sp-plans__row{ border-top:1px solid var(--line-soft); font-size:calc(var(--sp-u) * .75); line-height:1.45; }
.studio-paid .sp-plans__name{ font-weight:500; }
.studio-paid .sp-plans__price{ display:flex; align-items:center; flex-wrap:wrap; gap:.5em; }
.studio-paid .sp-plans__single{ font-variant-numeric:tabular-nums; }
.studio-paid .sp-plans__regular{
  color:var(--ink-muted); text-decoration:line-through; font-variant-numeric:tabular-nums;
}
.studio-paid .sp-plans__arrow{ color:var(--ink-muted); }
.studio-paid .sp-plans__campaign{
  font-size:calc(var(--sp-u) * 1.05); font-weight:700; color:var(--sp-orange); font-variant-numeric:tabular-nums;
}
/* キャンペーンのラベルだけ明るい黄色にする（装飾目的では使わない） */
.studio-paid .sp-campaign-link{
  font-size:calc(var(--sp-u) * .65); background:var(--sp-yellow); color:var(--sp-yellow-ink);
  font-weight:700; border-radius:5px; padding:.3em .65em; white-space:nowrap; line-height:1.5;
}
.studio-paid .sp-campaign-link:hover{ filter:brightness(.95); }
.studio-paid .sp-plans__note{ font-size:calc(var(--sp-u) * .78); color:var(--ink-soft); line-height:1.7; }

/* 口コミ・評判カード（料金表の隣で別導線だと分かる見た目にする） */
.studio-paid .sp-reviews{
  background:var(--sp-cream); border:2px solid var(--sp-cream-line);
  border-radius:10px; padding:calc(var(--sp-u) * 1) calc(var(--sp-u) * 1);
}
.studio-paid .sp-reviews__head{ display:flex; align-items:center; gap:calc(var(--sp-u) * .6); }
.studio-paid .sp-reviews__head .sp-icon{
  flex:none; width:calc(var(--sp-u) * 3.15); height:calc(var(--sp-u) * 3.15);
  color:var(--sp-orange); stroke-width:1.7;
}
.studio-paid .sp-reviews__title{
  margin:0; font-family:'Noto Sans JP',sans-serif; font-weight:700;
  font-size:calc(var(--sp-u) * 1.3); line-height:1.3; letter-spacing:0;
}
.studio-paid .sp-reviews__title span{
  display:block; font-weight:400; font-size:calc(var(--sp-u) * .72);
  color:var(--ink-soft); letter-spacing:0; margin-bottom:.2em;
}
.studio-paid .sp-reviews__lead{
  margin:calc(var(--sp-u) * .62) 0 calc(var(--sp-u) * .62);
  font-size:calc(var(--sp-u) * .75); color:var(--ink-soft); line-height:1.75;
}
.studio-paid .sp-reviews__link{
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid #DED5C6; color:var(--sp-orange-deep);
  border-radius:6px; padding:calc(var(--sp-u) * .55) calc(var(--sp-u) * .6);
  font-size:calc(var(--sp-u) * .85); font-weight:600;
}
.studio-paid .sp-reviews__link:hover{ background:var(--sp-orange); border-color:var(--sp-orange); color:var(--white); }

/* ---------- ⑥店舗情報 ＋ ⑦FAQ（横並び） ---------- */
.studio-paid .sp-duo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(var(--sp-u) * 1.85); align-items:start;
}
.studio-paid .sp-duo--single{ grid-template-columns:minmax(0,1fr); }
/* 既存CSSの section{padding:72px 0} を有料ページ内では打ち消す
   （sp-duo__col は <section> のため、放置すると上下に72pxずつ余白が入ります） */
.studio-paid section{ padding:0; }
.studio-paid .sp-duo__col{ min-width:0; padding:0; }

.studio-paid .sp-info{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px;
  padding:calc(var(--sp-u) * 1) calc(var(--sp-u) * 1.05);
}
.studio-paid .sp-info--with-map{
  display:grid; grid-template-columns:calc(var(--sp-u) * 7.8) minmax(0,1fr);
  gap:calc(var(--sp-u) * .85); align-items:start;
}
.studio-paid .sp-info__map-thumb{
  display:block; border-radius:6px; overflow:hidden; background:var(--bg-tint);
}
.studio-paid .sp-info__map-thumb img{
  width:100%; height:auto; aspect-ratio:5 / 4; object-fit:cover; display:block;
}
.studio-paid .sp-info__list{ margin:0; }
.studio-paid .sp-info__row{
  display:grid; grid-template-columns:calc(var(--sp-u) * 3.4) 1fr; gap:calc(var(--sp-u) * .6);
  padding:calc(var(--sp-u) * .3) 0; border-bottom:1px solid var(--line-soft);
  font-size:calc(var(--sp-u) * .78); line-height:1.55;
}
.studio-paid .sp-info__row:first-child{ padding-top:0; }
.studio-paid .sp-info__row:last-child{ border-bottom:none; padding-bottom:0; }
.studio-paid .sp-info dt{ color:var(--ink-muted); font-size:calc(var(--sp-u) * .75); }
.studio-paid .sp-info dd{ margin:0; }
.studio-paid .sp-map-link{
  display:flex; align-items:center; justify-content:center; margin-top:calc(var(--sp-u) * .6);
  font-size:calc(var(--sp-u) * .72); font-weight:500; white-space:nowrap;
  color:var(--sp-orange-deep); border:1px solid var(--sp-orange); border-radius:6px;
  padding:calc(var(--sp-u) * .55) calc(var(--sp-u) * .35); background:var(--white); text-align:center;
}
.studio-paid .sp-map-link:hover{ background:var(--sp-orange); color:var(--white); }

/* ---------- ⑦ FAQ（アコーディオン） ---------- */
.studio-paid .sp-faq{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px; overflow:hidden;
}
.studio-paid .sp-faq__item{ border-bottom:1px solid var(--line-soft); }
.studio-paid .sp-faq__item:last-child{ border-bottom:none; }
.studio-paid .sp-faq__q{
  display:flex; align-items:flex-start; gap:calc(var(--sp-u) * .6); cursor:pointer; list-style:none;
  padding:calc(var(--sp-u) * .5) calc(var(--sp-u) * 2.2) calc(var(--sp-u) * .5) calc(var(--sp-u) * .9);
  font-size:calc(var(--sp-u) * .78); font-weight:500; line-height:1.6; position:relative;
}
.studio-paid .sp-faq__q::-webkit-details-marker{ display:none; }
.studio-paid .sp-faq__q::after{
  content:""; position:absolute; right:calc(var(--sp-u) * 1.1); top:calc(var(--sp-u) * .85);
  width:.45em; height:.45em; border-right:1.5px solid var(--ink-muted); border-bottom:1.5px solid var(--ink-muted);
  transform:rotate(45deg); transition:transform .15s ease;
}
.studio-paid .sp-faq__item[open] .sp-faq__q::after{ transform:rotate(-135deg); top:calc(var(--sp-u) * 1.05); }
.studio-paid .sp-faq__mark{
  flex:none; font-family:'Shippori Mincho',serif; color:var(--sp-orange);
  font-size:calc(var(--sp-u) * .85); line-height:1.65;
}
.studio-paid .sp-faq__a{
  margin:0;
  padding:0 calc(var(--sp-u) * .9) calc(var(--sp-u) * .7) calc(var(--sp-u) * 2.1);
  font-size:calc(var(--sp-u) * .78); color:var(--ink-soft); line-height:1.9;
}

/* ---------- ⑧ 最終CTA（横長） ---------- */
.studio-paid .sp-closing{
  background:var(--sp-orange-soft); border-radius:10px;
  padding:calc(var(--sp-u) * 1.15) calc(var(--sp-u) * 1.9);
  display:grid; grid-template-columns:minmax(0,1fr) calc(var(--sp-u) * 23.75);
  gap:calc(var(--sp-u) * 2.25); align-items:center;
}
.studio-paid .sp-closing__title{ font-size:calc(var(--sp-u) * 1.375); margin:0; line-height:1.5; }
.studio-paid .sp-closing__text{
  margin:calc(var(--sp-u) * .6) 0 0; font-size:calc(var(--sp-u) * .8125);
  color:var(--ink-soft); line-height:1.9;
}
.studio-paid .sp-closing .sd-cta-group{ margin-top:0; }
.studio-paid .sp-closing .sd-cta{ padding:calc(var(--sp-u) * .85) calc(var(--sp-u) * 1.5); font-size:calc(var(--sp-u) * .95); }
/* 完成イメージでは最終CTAの副導線は枠なしのテキストリンク */
.studio-paid .sp-closing .sd-cta--sub{
  background:transparent; border-color:transparent; color:var(--sp-orange-deep);
  margin-top:calc(var(--sp-u) * .7); padding:0; font-size:calc(var(--sp-u) * .8125);
}
.studio-paid .sp-closing .sd-cta--sub:hover{
  background:transparent; border-color:transparent; text-decoration:underline;
}

/* ---------- 注意事項・比較へ戻る ---------- */
.studio-paid .sp-disclaimer{
  background:var(--bg-card); border-radius:8px;
  padding:calc(var(--sp-u) * 1) calc(var(--sp-u) * 1.25);
  font-size:calc(var(--sp-u) * .72); color:var(--ink-soft); line-height:1.9;
}
.studio-paid .sp-disclaimer p{ margin:0 0 4px; }
.studio-paid .sp-disclaimer p:last-child{ margin:0; }
.studio-paid .sp-disclaimer__date{ color:var(--ink); }
.studio-paid .sp-section--back{ text-align:center; }
.studio-paid .sp-back{
  display:inline-block; font-size:calc(var(--sp-u) * .8125); color:var(--ink);
  border:1px solid var(--line); border-radius:6px;
  padding:calc(var(--sp-u) * .75) calc(var(--sp-u) * 1.75); background:var(--white);
}
.studio-paid .sp-back:hover{ border-color:var(--ink); }

/* ---------- タブレット ---------- */
/* 完成イメージは1024pxでも左右2カラムのため、切り替えは1000px以下にしています */
@media(max-width:1000px){
  .studio-paid .sp-hero{ gap:calc(var(--sp-u) * 1.6); }
  .studio-paid .sp-specs{ grid-template-columns:1fr; }
  .studio-paid .sp-audience{ grid-template-columns:repeat(2,1fr); }
  .studio-paid .sp-pricing--with-aside{ grid-template-columns:minmax(0,1fr) calc(var(--sp-u) * 13); }
  .studio-paid .sp-closing{ grid-template-columns:minmax(0,1fr) calc(var(--sp-u) * 18); }
  .studio-paid .sp-reason{ padding:calc(var(--sp-u) * 1.1); column-gap:calc(var(--sp-u) * .8); }
}

/* ---------- スマートフォン ---------- */
@media(max-width:860px){
  .studio-paid{ padding-bottom:calc(var(--sp-u) * 3.5); }
  .studio-paid .sp-hero{ grid-template-columns:1fr; gap:calc(var(--sp-u) * 1.4); padding-top:calc(var(--sp-u) * .9); }
  .studio-paid .sp-hero__name{ font-size:calc(var(--sp-u) * 1.45); }
  .studio-paid .sp-section{ margin-top:calc(var(--sp-u) * 2); }
  .studio-paid .sp-reasons{ grid-template-columns:1fr; gap:calc(var(--sp-u) * .75); }
  .studio-paid .sp-gallery--with-note{ grid-template-columns:1fr; gap:calc(var(--sp-u) * .9); }
  .studio-paid .sp-gallery__grid[data-count="3"],
  .studio-paid .sp-gallery__grid[data-count="4"]{ grid-template-columns:repeat(2,1fr); }
  .studio-paid .sp-audience{ grid-template-columns:1fr; }
  .studio-paid .sp-pricing--with-aside{ grid-template-columns:1fr; gap:calc(var(--sp-u) * 1); }
  .studio-paid .sp-plans__head{ display:none; }
  .studio-paid .sp-plans__row{ grid-template-columns:1fr; padding:calc(var(--sp-u) * .5) 0; }
  .studio-paid .sp-plans__row > *{ padding:calc(var(--sp-u) * .3) calc(var(--sp-u) * 1); }
  .studio-paid .sp-plans__row > * + *{ border-left:none; }
  .studio-paid .sp-plans__name{ font-size:calc(var(--sp-u) * .78); color:var(--ink-muted); }
  .studio-paid .sp-duo{ grid-template-columns:1fr; gap:calc(var(--sp-u) * 2); }
  .studio-paid .sp-info--with-map{ grid-template-columns:calc(var(--sp-u) * 8.5) minmax(0,1fr); }
  .studio-paid .sp-closing{
    grid-template-columns:1fr; gap:calc(var(--sp-u) * 1.25);
    padding:calc(var(--sp-u) * 1.6) calc(var(--sp-u) * 1.25); text-align:center;
  }
}

@media(max-width:480px){
  .studio-paid .sp-hero,
  .studio-paid .sp-section,
  .studio-paid .sp-breadcrumb{ padding-left:18px; padding-right:18px; }
  .studio-paid .sp-info--with-map{ grid-template-columns:1fr; }
  .studio-paid .sp-info__map-col{ display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:.75em; align-items:center; }
  .studio-paid .sp-map-link{ margin-top:0; }
  .studio-paid .sp-reason{ padding:calc(var(--sp-u) * 1.05); column-gap:calc(var(--sp-u) * .75); }
  .studio-paid .sp-reason__icon .sp-icon{ width:calc(var(--sp-u) * 2.1); height:calc(var(--sp-u) * 2.1); }
}

/* ==========================================================================
   お問い合わせ（/contact/・contact-form.php）  v1.6.8
   既存ページには影響しないよう、すべて .contact-page 配下に限定。
   ========================================================================== */
.contact-page{ padding-bottom:88px; }
.contact-page .contact-breadcrumb{
  padding-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:12px; color:var(--ink-soft);
}
.contact-page .contact-breadcrumb a:hover{ color:var(--accent-deep); }
.contact-page .contact-breadcrumb__current{ color:var(--ink); }

/* 見出し＋説明（左）／線画イラスト（右） */
.contact-page .contact-hero{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  align-items:center; gap:32px; padding-top:28px; padding-bottom:28px;
}
.contact-page .contact-hero__title{
  font-family:'Shippori Mincho',serif; font-weight:600; font-size:40px; line-height:1.3;
  letter-spacing:.06em; margin:0 0 26px; padding-bottom:18px; position:relative;
}
.contact-page .contact-hero__title::after{
  content:""; position:absolute; left:0; bottom:0; width:48px; height:3px; border-radius:2px; background:var(--tag-line);
}
.contact-page .contact-hero__lead{ margin:0; font-size:16px; line-height:1.95; color:var(--ink); letter-spacing:.03em; }
.contact-page .contact-hero__art{ position:relative; justify-self:end; width:100%; max-width:400px; }
.contact-page .contact-hero__art::before{
  content:""; position:absolute; left:4%; top:-6%; width:58%; aspect-ratio:1; border-radius:50%;
  background:var(--circle); opacity:.55; z-index:0;
}
.contact-page .contact-hero__art img{ position:relative; z-index:1; display:block; width:100%; height:auto; }

/* フォームカード */
.contact-page .contact-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:34px 32px 30px;
}
.contact-page .cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-page .cf-row{
  display:grid; grid-template-columns:260px minmax(0,1fr); align-items:start; gap:24px;
  margin:0 0 20px; padding:0; border:0; min-width:0;
}
.contact-page .cf-label{
  display:flex; align-items:center; gap:14px; padding:12px 0 0; margin:0;
  font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.04em;
}
.contact-page fieldset.cf-row > legend.cf-label{ float:left; width:260px; }
.contact-page .cf-row--radio{ display:block; }
.contact-page .cf-row--radio::after{ content:""; display:block; clear:both; }
.contact-page .cf-row--radio > .cf-field{ margin-left:284px; }
.contact-page .cf-req{
  display:inline-block; margin-left:auto; margin-right:22px; padding:3px 9px; border-radius:3px;
  background:var(--tag-bg); color:var(--tag-ink); font-size:11px; font-weight:500; letter-spacing:.08em; line-height:1.5;
}
.contact-page .cf-field{ min-width:0; }
.contact-page .cf-input{
  display:block; width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:6px; padding:13px 16px; line-height:1.6;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-page .cf-input::placeholder{ color:#A8A095; }
.contact-page .cf-input:focus{ outline:none; border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(169,134,91,.18); }
.contact-page .cf-textarea{ min-height:120px; resize:vertical; }
.contact-page .cf-input[aria-invalid="true"]{ border-color:#B0413E; }
.contact-page .cf-radios{ display:flex; flex-wrap:wrap; gap:14px 34px; padding-top:10px; }
.contact-page .cf-radio,
.contact-page .cf-check{ display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); cursor:pointer; }
.contact-page .cf-radio input,
.contact-page .cf-check input{ width:20px; height:20px; margin:0; accent-color:var(--ink); cursor:pointer; flex:none; }
.contact-page .cf-row--agree{ display:block; margin:6px 0 26px; }
.contact-page .cf-row--agree > .cf-field{ margin-left:284px; }
.contact-page .cf-check a{ color:var(--ink); border-bottom:1px solid var(--ink); }
/* プライバシーポリシーが未公開の間はリンクにしない（押せそうで押せない見た目にしないため下線なし） */
.contact-page .cf-policy{ color:var(--ink); }
.contact-page .cf-check a:hover{ color:var(--accent-deep); border-bottom-color:var(--accent-deep); }
.contact-page .cf-error{ margin:8px 0 0; font-size:13px; color:#B0413E; line-height:1.6; }
.contact-page .cf-alert{
  margin:0 0 24px; padding:12px 16px; border-radius:6px; border:1px solid #E8C6C3; background:#FBF1F0;
  color:#8E3431; font-size:14px;
}
.contact-page .cf-actions{ text-align:center; }
.contact-page .cf-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  width:100%; max-width:450px; min-height:60px; padding:14px 28px; border:0; border-radius:999px;
  background:var(--ink); color:var(--white); font:inherit; font-size:18px; font-weight:500; letter-spacing:.1em; cursor:pointer;
  transition:opacity .15s ease;
}
.contact-page .cf-submit:hover{ opacity:.88; }
.contact-page .cf-submit:disabled{ opacity:.6; cursor:default; }
.contact-page .cf-submit__arrow{ font-size:1.1em; letter-spacing:0; }
.contact-page .cf-note{ margin:16px 0 0; font-size:13px; color:var(--ink-soft); }

/* 送信完了 */
.contact-page .cf-done{ text-align:center; padding:28px 8px 18px; }
.contact-page .cf-done__title{ font-family:'Shippori Mincho',serif; font-weight:600; font-size:24px; margin:0 0 16px; color:var(--ink); }
.contact-page .cf-done__text{ margin:0 0 26px; font-size:15px; line-height:1.95; color:var(--ink); }
.contact-page .cf-done__back{ font-size:14px; border-bottom:1px solid var(--ink); }

/* スマホ：縦積み */
@media (max-width: 760px){
  .contact-page{ padding-bottom:56px; }
  .contact-page .contact-breadcrumb{ padding-top:18px; }
  .contact-page .contact-hero{ display:block; padding-top:22px; padding-bottom:22px; }
  .contact-page .contact-hero__text{ position:relative; z-index:1; }
  .contact-page .contact-hero__title{ font-size:28px; margin-bottom:18px; padding-bottom:14px; }
  .contact-page .contact-hero__lead{ font-size:14px; line-height:1.9; }
  .contact-page .contact-hero__art{
    position:absolute; right:0; top:0; width:56%; max-width:240px; opacity:.6; z-index:0;
  }
  .contact-page .contact-hero__art::before{ display:none; }
  .contact-page .contact-card{ padding:24px 20px 24px; border-radius:10px; }
  .contact-page .cf-row{ display:block; margin-bottom:18px; }
  .contact-page .cf-label{ padding:0 0 8px; font-size:14px; gap:10px; }
  .contact-page fieldset.cf-row > legend.cf-label{ float:none; width:auto; }
  .contact-page .cf-req{ margin-left:0; margin-right:0; }
  .contact-page .cf-row--radio > .cf-field,
  .contact-page .cf-row--agree > .cf-field{ margin-left:0; }
  .contact-page .cf-radios{ flex-direction:column; gap:10px; padding-top:2px; }
  .contact-page .cf-radio, .contact-page .cf-check{ font-size:14px; }
  .contact-page .cf-input{ font-size:16px; padding:11px 14px; } /* iOS のズーム防止のため16px */
  .contact-page .cf-submit{ min-height:54px; font-size:16px; }
}

/* ==========================================================
   固定ページ・記事・記事一覧（page.php / single.php / index.php）
   テンプレートのインライン指定 padding:○px 0 が .wrap の左右余白を打ち消し、
   スマホで本文が画面端に接していたため、スマホ幅だけ .wrap と同じ余白に戻す（PCは変更なし）。
   ========================================================== */
.plain-wrap .section-head h1{ font-size:26px; } /* 記事一覧の見出し（コラム一覧）。従来の h2 と同じ大きさ */
@media(max-width:860px){
  .plain-wrap{ padding-left:28px !important; padding-right:28px !important; }
  .plain-wrap .articles{ grid-template-columns:1fr !important; } /* 記事一覧はスマホで1カラム */
}
@media(max-width:480px){
  .plain-wrap{ padding-left:18px !important; padding-right:18px !important; }
}

/* 記事一覧カードのアイキャッチ：枠（.thumb 高さ150px）は承認済みデザインのまま変えず、
   画像を枠いっぱいに中央トリミングして収める（未指定だと画像の原寸で上下にはみ出していた） */
.article-card .thumb{ overflow:hidden; }
.article-card .thumb img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================
   スマホのファーストビュー（860px以下のみ。PC・タブレットは変更なし）
   PC版（写真の上に「A better me」・日本語コピー・英字タグラインを重ねる）を正として、
   スマホでも写真と装飾文字を1つのビジュアルにまとめる。HTMLは変えない。
   - .fv__inner / .fv__copy を display:contents にし、中の要素を .fv のグリッドで直接配置する
   - 並び：見出し・説明 → 写真（装飾文字とタグラインを重ねる）→ CTA 2つ → 特徴3点
   - 写真・装飾文字・タグラインは同じグリッド領域（visual）に重ねる
   ========================================================== */
@media(max-width:860px){
  .fv{
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-areas:"eyebrow" "title" "lead" "visual" "actions" "features";
  }
  .fv__inner, .fv__copy{ display:contents; }
  /* .fv__inner にあった余白（上40px・左右18px・下30px）を各要素に付け直す */
  .fv .eyebrow{ grid-area:eyebrow; margin-top:40px; padding:0 18px; }
  .fv__title{ grid-area:title; padding:0 18px; }
  .fv__lead{ grid-area:lead; padding:0 18px; }
  .fv__media{ grid-area:visual; margin-top:26px; aspect-ratio:4/3; }
  /* 装飾文字：写真の左側の、人物（斜めに上げた腕）より下の明るい余白に重ねる（PC版と同じ考え方）。
     写真は幅に比例して拡大縮小するため、上の余白も幅に対する割合で指定する */
  .fv__deco{
    grid-area:visual; align-self:start; justify-self:start; z-index:2;
    width:max-content; margin:calc(26px + 27%) 0 0 18px; padding:0;
  }
  .fv-script{ font-size:44px; }
  .fv-note{ margin:14px 0 0 4px; padding-left:14px; font-size:12px; line-height:2.1; }
  /* 英字タグライン：写真の右下に重ねる（従来どおり） */
  .fv-tagline{
    grid-area:visual; align-self:end; justify-self:end; position:relative;
    right:auto; bottom:auto; margin:0 16px 18px 0;
  }
  .fv-actions{ grid-area:actions; margin:24px 18px 0; }
  .fv-features{ grid-area:features; margin:28px 18px 30px; }
}
@media(max-width:480px){
  /* 480px以下では .wrap{padding:0 18px} により .fv__inner の上下余白が0だったため、それに合わせる */
  .fv .eyebrow{ margin-top:0; }
  .fv-features{ margin-bottom:0; }
}

/* ------------------------------------------------------------------
   全国の都道府県から探す（トップ #area）
   47都道府県を地域順にコンパクトなボタンで表示。掲載店舗がある都道府県だけリンク、ほかは「準備中」。
   ------------------------------------------------------------------ */
.pref-section{ padding-top:64px; padding-bottom:8px; }
.pref-section .pref-head{ display:block; }
.pref-head .eyebrow{ margin-bottom:10px; }
.pref-head__lead{ margin:10px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.8; }
.pref-region{ display:grid; grid-template-columns:96px 1fr; gap:10px 16px; align-items:start; padding:12px 0; border-bottom:1px dashed var(--line-soft); }
.pref-region:last-child{ border-bottom:none; }
.pref-region__name{ margin:0; padding-top:9px; font-size:12.5px; font-weight:500; color:var(--ink-muted); letter-spacing:.04em; }
.pref-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:8px; }
.pref-btn{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  min-height:38px; padding:0 10px 0 12px; border:1px solid var(--tag-line); border-radius:3px;
  background:var(--surface); color:var(--ink); font-size:13px; line-height:1.3; white-space:nowrap;
  text-decoration:none; transition:background-color .15s ease, border-color .15s ease;
}
a.pref-btn:hover, a.pref-btn:focus-visible{ background:var(--tag-bg); border-color:var(--accent); }
a.pref-btn:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.pref-btn__arrow{ color:var(--accent-deep); font-size:15px; line-height:1; }
.pref-btn.is-coming-soon{ background:transparent; border-color:var(--line-soft); color:var(--ink-muted); cursor:default; }
.pref-btn__soon{ font-size:10px; color:var(--ink-muted); letter-spacing:.02em; }
@media (prefers-reduced-motion: reduce){ .pref-btn{ transition:none; } }
@media(max-width:700px){
  .pref-section{ padding-top:48px; }
  .pref-region{ grid-template-columns:1fr; gap:8px; }
  .pref-region__name{ padding-top:0; }
  .pref-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
  .pref-btn{ min-height:44px; padding:0 8px 0 10px; font-size:12.5px; }
}
@media(max-width:340px){
  .pref-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* 掲載中のエリア＋「全国47都道府県を見る」（<details> で開閉） */
.pref-region--listed{ border-bottom:none; }
.pref-all{ margin-top:6px; }
.pref-all__toggle{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px;
  border:1px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink);
  font-size:13px; cursor:pointer; list-style:none; user-select:none;
}
.pref-all__toggle::-webkit-details-marker{ display:none; }
.pref-all__toggle::after{ content:""; width:7px; height:7px; border-right:1.5px solid var(--accent-deep); border-bottom:1.5px solid var(--accent-deep); transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; }
.pref-all[open] > .pref-all__toggle::after{ transform:rotate(-135deg) translateY(-2px); }
.pref-all__toggle:hover{ background:var(--tag-bg); border-color:var(--accent); }
.pref-all__toggle:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.pref-all__close{ display:none; }
.pref-all[open] .pref-all__open{ display:none; }
.pref-all[open] .pref-all__close{ display:inline; }
.pref-all__body{ margin-top:14px; border-top:1px solid var(--line-soft); }
@media (prefers-reduced-motion: reduce){ .pref-all__toggle::after{ transition:none; } }
@media(max-width:700px){
  .pref-all__toggle{ display:flex; justify-content:center; width:100%; }
}

/* ==========================================================================
   柏の比較記事：スマホの比較カード（v1.6.28・承認デザイン「B案」準拠）
   inc/compare-cards.php が対象2記事の比較表の直後に出力する。カードが無いページには効かない。
   PC（861px以上）は従来の比較表、860px以下はカードを表示する。
   ========================================================================== */
.erabu-compare-cards{ display:none; }
@media (max-width:860px){
  .article-body .erabu-compare-table{ display:none; }
  .article-body .erabu-compare-cards{ display:block; margin:0 0 22px; }
}
.article-body .erabu-cc-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.article-body .erabu-cc{
  position:relative; margin:0; padding:10px 12px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
}
.article-body .erabu-cc p, .erabu-cc dl, .erabu-cc dd, .erabu-cc dt{ margin:0; }

/* 上段：店舗番号・店舗名・開閉の印 */
.erabu-cc__head{ position:relative; padding-right:26px; margin-bottom:8px; }
.erabu-cc__count{ font-size:10.5px; letter-spacing:.06em; line-height:1.3; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.article-body .erabu-cc .erabu-cc__name{
  margin-top:3px; padding-left:8px; border-left:2px solid var(--accent);
  font-size:15px; font-weight:600; line-height:1.4; color:var(--ink);
}
.erabu-cc__chev{
  position:absolute; top:50%; right:4px; width:8px; height:8px; margin-top:-6px;
  border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg); transition:transform .2s ease;
}
.erabu-cc:has(> .erabu-cc__more[open]) .erabu-cc__chev{ display:none; }

/* 中段：画像（統一イラスト／有料掲載の店舗写真）。どちらも同じ比率・寸法で表示する */
.erabu-cc__media{
  aspect-ratio:720 / 229; margin-bottom:8px; overflow:hidden;
  background:var(--bg-card); border-radius:6px;
}
.erabu-cc__media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* 下段：月額・体験・対象の3項目（横並び） */
.erabu-cc__key{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.85fr); gap:5px;
}
.erabu-cc__key--two{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.erabu-cc__fact{
  min-width:0; padding:5px 4px; text-align:center;
  background:var(--white); border:1px solid var(--line-soft); border-radius:6px;
}
.erabu-cc .erabu-cc__fact dt{ font-size:10.5px; line-height:1.35; color:var(--ink-muted); margin-bottom:1px; }
/* B案どおり、項目名は各一覧の1枚目と開いたカードだけに表示（2枚目以降は同じ並び。読み上げでは常に項目名を読む） */
.erabu-cc:not(:first-child):not(:has(> .erabu-cc__more[open])) .erabu-cc__fact dt{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.erabu-cc:not(:first-child):not(:has(> .erabu-cc__more[open])) .erabu-cc__fact{ display:flex; flex-direction:column; justify-content:center; padding:6px 4px; }
.erabu-cc__fact dd{
  font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.erabu-cc__fact dd small{ display:block; font-size:10.5px; font-weight:400; line-height:1.35; color:var(--ink-soft); }
.erabu-cc__fact--target{ display:flex; align-items:center; justify-content:center; padding:5px 6px; background:var(--tag-bg); border-color:var(--tag-line); }
.erabu-cc__fact--target dd{ font-size:11.5px; font-weight:600; line-height:1.4; color:var(--tag-ink); }
@media (max-width:359px){
  .erabu-cc__fact dd{ font-size:12.5px; }
}
.erabu-cc__sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 最下段：詳細を見る ＋（閉じているときはカード全体が押せる。開くと右上の × になる） */
.erabu-cc__more{ margin-top:7px; }
.erabu-cc__toggle{
  display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px;
  list-style:none; cursor:pointer; user-select:none;
  background:var(--circle); border:1px solid var(--circle); border-radius:999px;
  font-size:12.5px; font-weight:500; color:var(--tag-ink);
}
.erabu-cc__toggle::-webkit-details-marker{ display:none; }
.erabu-cc__toggle::after{ content:"＋"; font-size:13px; line-height:1; }
.erabu-cc__more:not([open]) > .erabu-cc__toggle::before{ content:""; position:absolute; inset:0; border-radius:8px; }
.erabu-cc__label-close{ display:none; }
.erabu-cc__more[open] > .erabu-cc__toggle{
  position:absolute; top:6px; right:6px; z-index:1; width:32px; height:32px; min-height:0; padding:0;
  background:none; border:none;
}
.erabu-cc__more[open] .erabu-cc__label-open{ display:none; }
.erabu-cc__more[open] .erabu-cc__label-close{
  display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.erabu-cc__more[open] > .erabu-cc__toggle::after{ content:"×"; font-size:20px; font-weight:400; color:var(--ink-soft); }
.erabu-cc__toggle:hover{ border-color:var(--accent); }
.erabu-cc__toggle:focus-visible,
.erabu-cc__link:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }

/* 展開後：レッスン形式・アクセスなど ＋ 店舗の詳細を見る */
.erabu-cc .erabu-cc__rows{ margin:2px 0 10px; }
.erabu-cc__rows > div{
  display:grid; grid-template-columns:8.6em minmax(0,1fr); gap:8px;
  padding:7px 2px; border-bottom:1px solid var(--line-soft); font-size:13px; line-height:1.55;
}
.erabu-cc .erabu-cc__rows dt{ font-size:11.5px; line-height:1.75; color:var(--ink-muted); }
.erabu-cc__rows dd{ color:var(--ink); overflow-wrap:anywhere; }
.erabu-cc__link{
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; padding:9px 14px;
  background:var(--accent-deep); color:var(--white); border-radius:8px;
  font-size:13px; font-weight:500; text-decoration:none; transition:background .15s ease;
}
.erabu-cc__link::after{ content:"\2192"; line-height:1; }
.erabu-cc__link:hover{ background:var(--ink); color:var(--white); }