@charset "UTF-8";
/* ============================================================
   カミヤダンスエモーション 共通スタイル（全ページ）
   デザイン言語：Elegant First Step（ver2-1）
   ・見出し＝Shippori Mincho／本文＝Noto Sans JP／欧文ラベル＝Playfair
   ・金は明背景の文字に使わない（#8C6A15 を使う）
   ============================================================ */
:root{
  --color-main:var(--wp--preset--color--primary, #002CA8);         /* 青（ver6〜：サイトの青は #002CA8 に統一。--color-deep と同じ値） */
  --color-accent:var(--wp--preset--color--accent, #D4AF37);       /* シャンパンゴールド（明背景の文字には使用禁止） */
  --color-accent-text:var(--wp--preset--color--accent-deep, #8C6A15);  /* ディープゴールド（明背景の文字用） */
  --color-base:var(--wp--preset--color--base, #F4F6FC);         /* うすい青みのオフホワイト */
  --color-deep:var(--wp--preset--color--primary, #002CA8);         /* ミッドナイト（深色面） */
  --color-cta:var(--wp--preset--color--cta, #C0001E);          /* 赤（ver6〜：サイトの赤は #C0001E に統一。予約CTA・丸囲み矢印） */
  --color-text:var(--wp--preset--color--contrast, #1F2328);
  --color-text-sub:var(--wp--preset--color--contrast-muted, #6B7280);
  --color-border:var(--wp--preset--color--line, #E2E1DC);
  --color-white:var(--wp--preset--color--surface, #FFFFFF);
  /* 踊りごとの色分けはやめて、5種類とも紺（--color-main）に統一している。
     変数名は残してあるので、あとで踊りごとに色を分けたくなったらここだけ戻せばよい */
  --color-ballroom:#002CA8;     /* 社交ダンス */
  --color-junior:#002CA8;       /* ジュニア社交ダンス */
  --color-tango:#002CA8;        /* アルゼンチンタンゴ */
  --color-flamenco:#002CA8;     /* フラメンコ */
  --color-wheelchair:#002CA8;   /* 車いすダンス */
  --font-serif-jp:var(--wp--preset--font-family--serif-jp, "Shippori Mincho B1","Hiragino Mincho ProN",serif);
  --font-sans-jp:var(--wp--preset--font-family--sans-jp, "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif);
  --font-serif-en:var(--wp--preset--font-family--serif-en, "Playfair Display",Georgia,serif);
}
*,*::before,*::after{ box-sizing:border-box; }
/* カーソルはブラウザ標準（矢印／リンク上は指マーク）。
   金のリング型カスタムカーソルを使いたくなったら、ここに cursor:url(...) を戻す */
html{ cursor:auto; }
a, button, [role="button"], .btn, .tlink, .float-badge, .nav a, .sns a, summary, select, label{
  cursor:pointer; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--color-base); color:var(--color-text);
  font-family:var(--font-sans-jp); font-size:17px; line-height:1.9; letter-spacing:.03em; overflow-x:hidden; }
/* iOS Safari は body の overflow-x:hidden で横スクロールを止めきれないことがある。
   clip はスクロールコンテナを作らないので position:sticky を壊さずに確実に切り取れる
   （未対応ブラウザはこの行を無視して上の hidden が効く） */
html,body{ overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:-1px; }

/* ============================================================
   Header
   ============================================================ */
#hd{ position:fixed; top:0; left:0; right:0; height:88px; z-index:100;
  display:flex; align-items:center; color:var(--color-white);
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color .4s, border-color .4s, color .4s, height .35s ease; }
/* 透明のあいだ、下から流れてくる明るい面（ゴールドのバッジなど）の上でも
   白いメニューが読めるよう、ヘッダーの帯にうすい暗幕を敷いておく */
#hd::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,14,52,.62) 0%, rgba(0,14,52,.34) 58%, rgba(0,14,52,0) 100%);
  transition:opacity .4s ease; }
#hd.is-stuck{ height:64px; background:var(--color-white); color:var(--color-text); border-bottom-color:var(--color-border); }
#hd.is-stuck::before{ opacity:0; }
.hd{ display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.2vw,24px); width:100%; padding:0 28px; }
.logo{ display:flex; align-items:center; flex:0 0 auto; padding:6px 0; }
.logo img{ height:36px; width:auto; display:block;
  filter:brightness(0) invert(1); transition:filter .4s ease; }
#hd.is-stuck .logo img{ filter:none; }
.nav{ display:flex; align-items:center; gap:clamp(12px,1.3vw,26px); }
.nav a{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:15px; font-weight:500; white-space:nowrap; padding:6px 2px 10px; }
.nav a .en{ font-family:var(--font-serif-en); font-weight:400; font-size:9.5px; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); }
#hd.is-stuck .nav a .en{ color:var(--color-accent-text); }
.nav a::after{ content:""; position:absolute; left:10%; right:10%; bottom:2px; height:1px;
  background:var(--color-accent); transform:scaleX(0); transform-origin:center;
  transition:transform .35s ease; }
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }
.hd-right{ display:flex; align-items:center; gap:clamp(12px,1.2vw,20px); }
.tel-hd{ font-weight:500; font-size:18px; letter-spacing:.06em; white-space:nowrap; }
.tel-hd small{ font-family:var(--font-serif-en); font-size:12px; letter-spacing:.16em; margin-right:6px; color:var(--color-accent); }
/* スクロールして白くなっても電話番号は出したままにする。
   地が白のときは金がとんでしまうので、TEL の字だけ濃い金に差し替える */
#hd.is-stuck .tel-hd small{ color:var(--color-accent-text); }
/* 電話番号まで並ぶ幅（およそ1421〜1560px）は横がぎりぎりになるので、
   ナビと右側の間隔・左右の余白を詰めて予約ボタンが切れないようにする */
@media (max-width:1560px){
  .hd{ padding:0 18px; }
  .nav{ gap:clamp(10px,1.05vw,18px); }
  .hd-right{ gap:12px; }
  .tel-hd{ font-size:17px; }
  .hd-note{ padding:5px 10px; font-size:12px; letter-spacing:.06em; }
}
/* 1221〜1420px は「ナビ7項目＋土日も営業＋電話＋予約ボタン」が並びきらないので電話は隠す */
@media (max-width:1420px){ .hd .tel-hd{ display:none; } }
/* バーガーに切り替わるとナビぶんの幅が空くので、電話番号を出し直す */
@media (max-width:1220px){ .hd .tel-hd{ display:inline; } }
/* 1181〜1280px は「ナビ7項目＋土日も営業＋予約ボタン」を並べるのが最も苦しい帯。
   欧文の小見出しと間隔をさらに詰めて収める */
@media (max-width:1320px){
  .nav{ gap:clamp(8px,.8vw,14px); }
  .nav a{ font-size:14.5px; }
  .nav a .en{ font-size:8.5px; letter-spacing:.1em; }
  .hd-note{ font-size:11.5px; padding:4px 9px; }
}
/* ヘッダー右の一言（土日も営業）。文言は common.js の OPEN_NOTE */
.hd-note{ display:inline-flex; align-items:center; white-space:nowrap;
  padding:5px 12px; border:1px solid rgba(212,175,55,.72); border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; line-height:1.4;
  color:var(--color-white); background:rgba(0,44,168,.28);
  transition:color .4s ease, background-color .4s ease, border-color .4s ease; }
#hd.is-stuck .hd-note{ color:var(--color-accent-text); background:rgba(212,175,55,.1);
  border-color:rgba(212,175,55,.85); }
@media (max-width:1100px){ .hd-note{ display:none; } }
/* 「土日祝日も営業」（ver7〜）は1行だと、ナビと予約ボタンが最も詰まる幅（1221〜1280px・1421〜1480px）で
   ボタンが右にはみ出すので、その幅だけ「土日祝日も／営業」の2行にする。ほかの幅とSPメニューは1行 */
.nb{ display:none; }
@media (min-width:1221px) and (max-width:1280px), (min-width:1421px) and (max-width:1480px){
  .hd-note{ text-align:center; line-height:1.3; padding:4px 11px; border-radius:18px; }
  .hd-note .nb{ display:inline; }
}

/* ============================================================
   ボタン（額装の二重線＋四隅の飾り金具）
   ============================================================ */
/* ボタンはサイト全体で角のないピル形。ふちと内側の金の細罫で装飾する
   （ボタンの外側に浮いていた金のリングは ver6 で廃止） */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:49px; padding:0 26px;
  font-family:var(--font-sans-jp); font-weight:700; font-size:16px; letter-spacing:.06em; border:1px solid transparent; white-space:nowrap;
  border-radius:999px;
  background-color:transparent; transition:box-shadow .35s, background-color .35s, color .35s, border-color .35s; }
/* 内側の金の細罫 */
.btn::before{ content:""; position:absolute; inset:3px; pointer-events:none;
  border:1px solid rgba(212,175,55,.40); border-radius:999px; transition:border-color .35s ease; }
.btn:hover::before{ border-color:rgba(212,175,55,.95); }
.btn--primary{ background-color:var(--color-cta); color:var(--color-white); border-color:rgba(212,175,55,.75); }
.btn--primary:hover{ box-shadow:0 0 24px rgba(212,175,55,.45); border-color:var(--color-accent); }
#hd.is-stuck .btn--primary{ border-color:transparent; }
.btn--navy{ background-color:var(--color-main); color:var(--color-white); }
.btn--navy:hover{ box-shadow:0 0 24px rgba(212,175,55,.45); border-color:var(--color-accent); }
.btn--ghost{ border-color:var(--color-white); color:var(--color-white); background-color:transparent; }
.btn--ghost:hover{ background-color:var(--color-white); color:var(--color-main); }
.btn--ghostnavy{ border-color:var(--color-main); color:var(--color-main); background-color:transparent; }
.btn--ghostnavy:hover{ background-color:var(--color-main); color:var(--color-white); }

/* ============================================================
   ボタンの「＞」（丸囲みの矢印）
   ・リンクだと気づかれにくいので、.btn／.tlink／追従ボタンの吹き出しに付ける
   ・丸の色は --ico-bg、矢印の色は --ico-fg。サイト全体で「赤い丸＋白い矢印」に統一している（ver6〜）
     （えんじ地のボタンの上でも丸が埋もれないよう、丸の外側に白い細い輪郭を添えている。
       白い面ではこの輪郭は見えず、赤い丸だけが見える）
   ・ホバー／フォーカスでも色は変えない（.btn／.tlink は右へ2px動くだけ）
   ・common.js が要素を差し込むので、HTML側に書く必要はない
   ============================================================ */
.btn-ico{ --ico-bg:var(--color-cta); --ico-fg:var(--color-white);
  flex:0 0 auto; width:21px; height:21px; margin-left:11px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background-color:var(--ico-bg);
  /* えんじ地のボタンに置いても丸が消えないよう、外側に白い細い輪郭を持たせる */
  box-shadow:0 0 0 1px rgba(255,255,255,.85);
  vertical-align:middle;
  transition:transform .35s ease; }
.btn-ico::after{ content:""; display:block; width:5px; height:5px; margin-left:-1px;
  border-top:1.7px solid var(--ico-fg); border-right:1.7px solid var(--ico-fg);
  transform:rotate(45deg);
  transition:border-color .35s ease; }
.btn:hover .btn-ico,.tlink:hover .btn-ico{ transform:translateX(2px); }

/* テキストリンク（「詳しく見る ＞」など）は一回り小さく */
.tlink .btn-ico{ width:19px; height:19px; margin-left:9px; }
/* ヘッダー内のボタンには付けない（ナビと並ぶ場所で横幅が足りなくなる） */
#hd .btn-ico{ display:none; }
.spbar .btn-ico{ display:none; }
/* 追従ボタンの吹き出し */
.float-badge .btn-ico{ width:19px; height:19px; margin-left:8px; }

/* ============================================================
   レイアウト共通
   ============================================================ */
main{ display:block; }
.wrap{ width:100%; max-width:1344px; margin:0 auto; padding:0 48px; }
.wrap--narrow{ max-width:960px; }
.wrap-sp{ padding:0 24px; }
section.blk{ position:relative; padding:104px 0; }
.s-base { background:var(--color-base); color:var(--color-text); }
.s-white{ background:var(--color-white); color:var(--color-text); }
.s-deep { background:var(--color-deep); color:var(--color-white); }

.label{ display:flex; align-items:center; gap:14px; margin:0 0 20px;
  font-family:var(--font-serif-en); font-weight:400; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent-text); }
.label::before{ content:""; width:24px; height:1px; background:var(--color-accent); flex:0 0 24px; }
.label.c{ justify-content:center; }
.s-deep .label{ color:var(--color-accent); }

h1,h2{ font-family:var(--font-serif-jp); font-weight:600; letter-spacing:.03em; }
h2{ font-size:34px; line-height:1.6; margin:0 0 20px; }
h3{ font-family:var(--font-sans-jp); font-weight:700; font-size:22px; line-height:1.7; letter-spacing:.02em; margin:0 0 12px; }
.lead{ max-width:38em; margin:0; color:var(--color-text-sub); }
.lead.c{ margin:0 auto; text-align:center; }
.s-deep .lead{ color:rgba(255,255,255,.86); }
.cap{ font-size:15px; line-height:1.7; color:var(--color-text-sub); }
.s-deep .cap{ color:rgba(255,255,255,.72); }

/* 写真枠 */
.ph{ position:relative; background:#DDE0E4; overflow:hidden; }
.ph img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.06) contrast(1.02) sepia(.08); }
/* .ph の中の <picture>（SP だけ別の写真にするとき）は箱を作らず、img を .ph いっぱいに表示する ver10〜 */
.ph > picture{ display:contents; }
/* 初めての方へ・車いすダンス：SP は4種類のダンスと同じ見え方（写真 sp_kurumaisu、4:3＋30px の高さ、表示位置 50% 35%） */
@media (max-width:920px){
  /* ver11：カードの写真を正方形にしたので、高さの指定（4:3＋30px）はやめ、写真と表示位置だけ残す */
  .dgrid .dcell .ph.ph--sp-kuruma img{ object-position:50% 35%; }
}
/* 写真の内側に引いていた金の細枠（.ph--framed::before）は ver6 で廃止。
   HTML側の ph--framed クラスは残してあるので、戻したいときは次の1行を復活させる：
   .ph--framed::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(212,175,55,.55); pointer-events:none; z-index:2; }
   ※ TOPのFV中央の写真の金枠は index.html の .fv-photo::before / ::after で、こちらは残している */
/* 写真プレースホルダ（差し替え前提の枠） */
.ph--empty{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#E7EAEE 0%,#DDE0E4 60%,#D5D9DE 100%); }
.ph--empty span{ font-size:13px; letter-spacing:.08em; color:#8A9097; text-align:center; padding:0 12px; }

/* 背面のリボンタイポ */
.ghost{ position:absolute; font-family:var(--font-serif-en); font-weight:700; line-height:1;
  color:rgba(212,175,55,.07); white-space:nowrap; pointer-events:none; user-select:none; z-index:0; }

.tlink{ display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--color-main);
  border-bottom:1px solid rgba(212,175,55,.5); padding-bottom:2px; transition:border-color .3s; }
.tlink:hover{ border-bottom-color:var(--color-accent-text); }

/* セクションの継ぎ目。
   いまは直線（地色がまっすぐ切り替わる）にしているので、この枠は描画しない。
   波形に戻すときは common.js の SEC_WAVE を true にして、下の display:none を外す */
.sec-wave{ display:none;
  position:absolute; left:0; right:0; bottom:100%; height:48px;
  pointer-events:none; z-index:3; }
.sec-wave svg{ display:block; width:100%; height:100%; }
.sec-wave.flip svg{ transform:scaleX(-1); }
@media (max-width:920px){ .sec-wave{ height:26px; } }

/* ============================================================
   下層共通：ページヘッダー（深紺の帯）
   ============================================================ */
/* 高さは画面の3割（ver6〜。以前は半分＝50vh）。中身は上下中央に置き、上の余白はヘッダー（88px）のぶんを確保する。
   ※ min-height なので、見出し・パンくずが3割に収まらない画面（高さの低い画面）では中身の高さまで伸びる。
     3割に近づけるため、下の余白・ラベル下・パンくず上のすき間も少し詰めている */
.page-hero{ position:relative; overflow:hidden; background-color:var(--color-deep); color:var(--color-white);
  min-height:50vh;   /* PC（921px〜）は50vh。SPは下の @media で30vh（ver8〜） */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:104px 20px 28px; text-align:center; }
/* 写真を敷く下層ページ。
   ページの指定は <body data-page="..."> を見て下で振り分ける
   （画像のパスはこのCSSファイルからの相対パスなので ../img/ になる）。
   写真の上に紺のベールを重ねて、白い文字が読めるようにしている。
   差し替えるときは下の url(...) を書き換えるだけでよい */
body[data-page="dance"]  .page-hero.has-photo{ --hero-img:url("../img/lesson.webp"); }
body[data-page="first"]  .page-hero.has-photo{ --hero-img:url("../img/DSC_8868.webp"); --hero-pos:center 37%; }   /* ver7〜（以前 lesson2.png） */
body[data-page="price"]  .page-hero.has-photo{ --hero-img:url("../img/price.webp"); }
body[data-page="staff"]  .page-hero.has-photo{ --hero-img:url("../img/staff.webp"); }
body[data-page="access"] .page-hero.has-photo{ --hero-img:url("../img/S__165306373.webp"); }   /* ver9〜（以前 access.png） */
body[data-page="gallery"] .page-hero.has-photo{ --hero-img:url("../img/1783.webp"); --hero-pos:center 30%; }   /* ver7〜 */
body[data-page="news"]   .page-hero.has-photo{ --hero-img:url("../img/IMG_2304.webp"); --hero-pos:72% 22%; }   /* ver7〜 */
.page-hero.has-photo{
  background-image:
    linear-gradient(180deg, rgba(0,18,74,.74) 0%, rgba(0,20,84,.56) 42%, rgba(0,16,66,.82) 100%),
    var(--hero-img);
  background-size:cover; background-position:center, var(--hero-pos, center); background-repeat:no-repeat; }   /* --hero-pos：写真の見せる位置（ページごとに指定可） */
.page-hero.has-photo h1,.page-hero.has-photo .hero-lead,.page-hero.has-photo .label{
  text-shadow:0 2px 10px rgba(0,12,40,.7); }
.page-hero.has-photo .ghost{ color:rgba(255,255,255,.09); }
.page-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 720px 420px at 50% 30%, rgba(212,175,55,.13), transparent 68%); }
.page-hero .ghost{ font-size:min(13vw,180px); left:50%; transform:translateX(-50%); bottom:-6%; color:rgba(212,175,55,.08); }
.page-hero .label{ justify-content:center; color:var(--color-accent); margin-bottom:10px; }
.page-hero h1{ position:relative; z-index:1; font-size:clamp(30px,4vw,42px); line-height:1.5; margin:0; }
.page-hero .hero-lead{ position:relative; z-index:1; margin:14px auto 0; max-width:40em;
  font-size:16px; line-height:1.9; color:rgba(255,255,255,.86); }
/* パンくず */
.bc{ position:relative; z-index:1; margin:16px 0 0; font-size:13px; letter-spacing:.05em; color:rgba(255,255,255,.72); }
.bc ol{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:4px; }
.bc li{ display:flex; align-items:center; gap:4px; }
.bc a{ display:inline-block; padding:6px 2px; }
.bc li+li::before{ content:"—"; color:rgba(212,175,55,.6); margin:0 6px; }
.bc a:hover{ color:var(--color-accent); }
/* 明背景ページ内のパンくず（記事など） */
.bc--dark{ color:var(--color-text-sub); }
.bc--dark ol{ justify-content:flex-start; }
.bc--dark li+li::before{ content:"—"; color:rgba(140,106,21,.5); }
.bc--dark a:hover{ color:var(--color-accent-text); }
@media (max-width:920px){ .page-hero{ min-height:30vh; padding:80px 20px 26px; } }

/* ============================================================
   下層共通：パーツ
   ============================================================ */
/* 安心チップ（初めての方へ ほか） */
.tchips{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:30px 0 0; padding:0; list-style:none; }
.tchips li{ display:inline-flex; align-items:center; gap:10px; padding:11px 22px;
  background:var(--color-white); border:1px solid rgba(212,175,55,.55);
  font-size:15px; font-weight:500; color:var(--color-main); white-space:nowrap; }
.tchips li::before{ content:"✓"; font-size:14px; color:var(--color-accent-text); }

/* アンカーチップ（ダンスの種類 ほか） */
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; padding:0; list-style:none; }
.chips.c{ justify-content:center; }
.chips a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 20px;
  border:1px solid var(--color-border); background:var(--color-white);
  font-size:15px; font-weight:500; transition:border-color .3s, color .3s; }
.chips a::after{ content:"↓"; font-size:12px; color:var(--color-accent-text); }
.chips a:hover{ border-color:var(--color-accent); color:var(--color-main); }
.chips--go a::after{ content:"›"; }
/* ダンスの種類ページ上部の種目リンク：TOP「4種類のダンス」の種目ボタン（.htabs）と同じ見た目（ver8〜）
   白い丸型・グレーの細枠・濃い太字。ホバーで枠と文字が青。矢印（↓）は付けない */
.chips--tab{ gap:8px; }
.chips--tab a{ min-height:44px; padding:9px 20px; border-radius:999px; background:var(--color-white);
  border:1px solid var(--color-border); color:var(--color-text);
  font-family:var(--font-sans-jp); font-size:14.5px; font-weight:700; letter-spacing:.04em; line-height:1.4; white-space:nowrap;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease; }
.chips--tab a::after{ content:none; }
.chips--tab a:hover{ background:var(--color-main); border-color:var(--color-main); color:var(--color-white); }   /* ホバーで青地＋白文字（ver8〜） */
.chips--tab a:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
@media (max-width:920px){
  .chips--tab{ gap:6px; }
  .chips--tab a{ padding:8px 13px; font-size:13.5px; }
}

/* メディア行（写真＋テキストの交互配置） */
.mrow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.mrow + .mrow{ margin-top:96px; }
.mrow .ph{ aspect-ratio:4/3; width:100%; }
/* .ph--plus30：4:3 より高さを +30px（ダンスの種類・車いすダンス） */
.mrow .ph--plus30{ aspect-ratio:auto; }
.mrow .ph--plus30::after{ content:""; display:block; padding-top:calc(75% + 30px); }
.mrow .ph--plus30 img{ position:absolute; inset:0; }
/* スタッフ紹介（野本）：4:5 より高さを +30px */
.sprof .ph.ph--plus30{ aspect-ratio:auto; }
.sprof .ph.ph--plus30::after{ content:""; display:block; padding-top:calc(125% + 30px); }
.sprof .ph.ph--plus30 img{ position:absolute; inset:0; }
.mrow .mtxt .label{ margin-bottom:14px; }
.mrow h2{ font-size:30px; color:var(--dc, var(--color-main)); margin-bottom:16px; }
.mrow p{ margin:0 0 16px; }
.mrow .btn{ margin-top:8px; }
/* 見出しの右にタグ（車いすダンス「教室の独自メニュー」） ver10〜 */
.mrow .mhead{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:16px; }
.mrow .mhead h2{ margin:0; }
.mrow .mhead .tags{ margin:0; }
.mrow.rev .ph{ order:2; }
.mrow.rev .mtxt{ order:1; }
/* 写真の隅に置く種目リボン */
.mrow .ph .ribbon{ position:absolute; left:14px; bottom:2px; z-index:2; pointer-events:none;
  font-family:var(--font-serif-en); font-weight:700; font-size:64px; line-height:1;
  color:var(--dc,var(--color-main)); opacity:.14; }
.only-tag{ display:inline-flex; align-items:center; margin:0 0 12px; padding:5px 14px;
  border:1px solid rgba(212,175,55,.6); background:rgba(212,175,55,.08);
  font-size:13px; letter-spacing:.08em; color:var(--color-accent-text); }
@media (max-width:920px){
  .mrow{ grid-template-columns:1fr; gap:24px; }
  .mrow.rev .ph{ order:0; } .mrow.rev .mtxt{ order:0; }
  .mrow + .mrow{ margin-top:64px; }
  .mrow h2{ font-size:24px; }
  .mrow .ph .ribbon{ font-size:44px; }
}

/* FAQ（アコーディオン） */
.faq{ margin:36px 0 0; border-top:1px solid var(--color-border); }
.faq details{ border-bottom:1px solid var(--color-border); }
.faq summary{ position:relative; list-style:none; display:flex; align-items:baseline; gap:16px;
  padding:22px 48px 22px 4px; font-size:17px; font-weight:700; line-height:1.7; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q{ flex:0 0 auto; font-family:var(--font-serif-en); font-size:15px; letter-spacing:.1em;
  color:var(--color-accent-text); }
.faq summary::after{ content:""; position:absolute; right:12px; top:50%; width:14px; height:14px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--color-accent-text),var(--color-accent-text)) center/14px 1px,
    linear-gradient(var(--color-accent-text),var(--color-accent-text)) center/1px 14px;
  background-repeat:no-repeat; transition:transform .3s ease; }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq .a{ display:flex; gap:16px; padding:0 24px 24px 4px; }
.faq .a .m{ flex:0 0 auto; font-family:var(--font-serif-en); font-size:15px; letter-spacing:.1em; color:var(--color-main); }
/* 回答が2段落以上になる場合があるので、本文はひとまとめにして「A.」の隣に置く */
.faq .a-body{ flex:1 1 auto; min-width:0; }
.faq .a p{ margin:0; color:var(--color-text-sub); }
.faq .a p + p{ margin-top:12px; }

/* CTA帯（額装の招待状：全ページ共通） */
.final{ text-align:center; }
.final .ghost{ font-size:min(15vw,200px); left:50%; transform:translateX(-50%); bottom:-2%; }
.final-frame{ position:relative; z-index:1; max-width:880px; margin:0 auto; padding:64px 40px;
  border:1px solid rgba(212,175,55,.6); }
.final-frame::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(212,175,55,.3); pointer-events:none; }
.final h2{ font-size:36px; margin:0 0 18px; color:var(--color-white); }
.final .lead{ margin:0 auto 32px; }
.final-row{ display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; }
.final .tel-big{ font-weight:500; font-size:26px; letter-spacing:.06em; color:var(--color-white); }
.final .tel-big small{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.16em; color:var(--color-accent); margin-right:8px; }

/* ============================================================
   コンポーネント（TOP・下層で共用）
   ============================================================ */
/* 種目カード */
.card{ background:var(--color-white); border:1px solid var(--color-border);
  border-top:4px solid var(--dc, var(--color-main)); display:flex; flex-direction:column; }
.card-photo{ position:relative; width:100%; height:420px; overflow:hidden; }
.card-ribbon{ position:absolute; left:-10px; bottom:-34px; z-index:2; pointer-events:none; user-select:none;
  font-family:var(--font-serif-en); font-weight:700; font-size:120px; line-height:1;
  color:var(--dc, var(--color-main)); opacity:.11; white-space:nowrap; }
.card-body{ padding:34px 32px 32px; }
.card-body h3{ font-family:var(--font-serif-jp); font-weight:600; color:var(--dc, var(--color-main)); margin-bottom:10px; }
.card-body p{ margin:0 0 18px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none; }
.tags li{ height:26px; display:inline-flex; align-items:center; padding:0 12px;
  border:1px solid color-mix(in srgb, var(--dc, var(--color-main)) 50%, transparent); font-size:13px; letter-spacing:.04em; color:var(--dc, var(--color-main)); }

.tags li.tag--only{ border-color:rgba(212,175,55,.6); background:rgba(212,175,55,.08); color:var(--color-accent-text); }
/* 小さめの種目カード（初めての方へ：4枚グリッド） */
.dgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:40px; }
.dgrid .dcell .ph{ aspect-ratio:1/1; margin-bottom:16px; }   /* ver11：正方形（以前は 4:3）。横幅はそのまま */
.dgrid .dcell .ph img{ filter:grayscale(1) contrast(1.04); transition:filter .55s ease; }
.dgrid .dcell:hover .ph img{ filter:grayscale(0) saturate(1.08) contrast(1.02); }
@media (hover:none){ .dgrid .dcell .ph img{ filter:saturate(1.06) contrast(1.02); } }
.dgrid h3{ font-family:var(--font-serif-jp); font-weight:600; font-size:19px; color:var(--color-text); margin:0 0 10px; }   /* ver10：ダンス名は黒（以前は各ダンスの色）。下の説明文を削除したのでリンクとの間を 4px → 10px */
.dgrid .cap{ margin:0 0 10px; }
@media (max-width:1080px){ .dgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .dgrid{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } }

/* 講師（TOP 3カラム） */
.staff{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:44px; }
.staff-card .ph{ width:100%; height:300px; margin-bottom:22px; }
.staff-card .role{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--color-accent-text); margin:0 0 8px; }
.staff-card h3{ font-family:var(--font-serif-jp); font-weight:600; margin-bottom:14px; }
.staff-card h3 span{ font-family:var(--font-sans-jp); font-size:15px; font-weight:400; color:var(--color-text-sub); margin-left:10px; }
.creds{ list-style:none; margin:0 0 18px; padding:0 0 18px; border-bottom:1px solid rgba(212,175,55,.4); min-height:126px; }
.creds li{ position:relative; padding-left:18px; font-size:15px; line-height:1.8; }
.creds li::before{ content:""; position:absolute; left:0; top:.85em; width:8px; height:1px; background:var(--color-accent-text); }
.staff-card p{ margin:0; font-size:15px; line-height:1.8; color:var(--color-text-sub); }

/* 講師プロフィール（スタッフ紹介ページ：交互の大レイアウト） */
.sprof{ display:grid; grid-template-columns:minmax(0,460px) 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.sprof + .sprof{ margin-top:104px; }
.sprof .ph{ aspect-ratio:4/5; width:100%; grid-area:1 / 1; }
.sprof .stxt{ grid-area:1 / 2; }
/* 写真を右に置く行。order で入れ替えると写真が広い側の列に入って
   サイズが変わってしまうので、列の幅ごと入れ替えて写真の大きさをそろえる
   （行も明示しないと写真と文章が上下に分かれてしまう） */
.sprof.rev{ grid-template-columns:1fr minmax(0,460px); }
.sprof.rev .ph{ grid-area:1 / 2; }
.sprof.rev .stxt{ grid-area:1 / 1; }
.sprof .role{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-accent-text); margin:0 0 6px; }
.sprof .jrole{ font-size:15px; font-weight:700; color:var(--color-main); margin:0 0 8px; }
.sprof h2{ font-size:32px; margin-bottom:16px; }
.sprof h2 .en{ display:block; font-family:var(--font-serif-en); font-weight:400; font-size:14px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent-text); margin-top:6px; }
.qual{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; padding:0; list-style:none; }
.qual li{ display:inline-flex; align-items:center; padding:7px 16px; border:1px solid rgba(212,175,55,.55);
  background:var(--color-white); font-size:13.5px; font-weight:500; letter-spacing:.03em; color:var(--color-main); }
.sprof p{ margin:0 0 14px; }
/* 2人を1つにまとめて紹介する行（スタッフ紹介ページの 神谷 敬一・千尋）。
   ・左の列に写真を2枚、縦に並べる（.sph）。1枚目は縦長 4:5、2枚目は横長 4:3
   ・右の列は「2人の名前（h2）」のあと、1人ずつの紹介（.pmem）を上下に並べる
   ・写真が2枚ぶん縦に長いので、文章は中央ではなく上にそろえる */
.sprof--pair{ align-items:start; }
.sprof--pair .sph{ grid-area:1 / 1; display:grid; gap:20px; }
.sprof--pair .sph .ph{ grid-area:auto; }
.sprof--pair .sph .ph:nth-child(2){ aspect-ratio:4 / 3; }
.sprof--pair h2{ margin-bottom:24px; }
/* 資格・所属の一覧（1行が長いので、タグではなく縦に並べる） */
.sprof .qlist{ list-style:none; margin:24px 0 26px; padding:22px 0; display:grid; gap:12px;
  border-top:1px solid rgba(212,175,55,.45); border-bottom:1px solid rgba(212,175,55,.45); }
.sprof .qlist li{ position:relative; padding-left:1.5em; font-weight:500; line-height:1.75; color:var(--color-main); }
.sprof .qlist li::before{ content:""; position:absolute; left:.1em; top:.56em; width:.6em; height:.6em;
  border:2px solid var(--color-accent); border-radius:50%; box-sizing:border-box; }
.sprof .stxt > p:last-child{ margin-bottom:0; }
.sprof .pmem{ margin-top:30px; padding-top:28px; border-top:1px solid rgba(212,175,55,.45); }
.sprof .pmem h3{ font-family:var(--font-serif-jp); font-weight:600; font-size:25px; line-height:1.5; margin:0 0 14px; }
.sprof .pmem h3 .en{ display:block; font-family:var(--font-serif-en); font-weight:400; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent-text); margin-top:4px; }
.sprof .pmem p:last-child{ margin-bottom:0; }
@media (max-width:920px){
  /* 1列に畳むときは、写真が先・文章が後ろの順に戻す */
  .sprof,.sprof.rev{ grid-template-columns:1fr; gap:24px; }
  .sprof .ph,.sprof.rev .ph{ grid-area:1 / 1; }
  .sprof .stxt,.sprof.rev .stxt{ grid-area:2 / 1; }
  .sprof + .sprof{ margin-top:72px; }
  .sprof h2{ font-size:26px; }
  .sprof .ph{ max-width:420px; margin:0 auto; }
  .sprof--pair .sph{ grid-area:1 / 1; width:100%; max-width:420px; margin:0 auto; gap:14px; }
  .sprof--pair .sph .ph{ grid-area:auto; max-width:none; }
  .sprof--pair h2{ margin-bottom:18px; }
  .sprof .qlist{ padding:18px 0; margin:18px 0 22px; gap:10px; }
  .sprof .pmem{ margin-top:24px; padding-top:22px; }
  .sprof .pmem h3{ font-size:22px; }
}

/* 料金 */
.fees{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:40px 0 32px;
  border-top:1px solid rgba(212,175,55,.5); border-bottom:1px solid rgba(212,175,55,.5); }
.fee-item{ padding:32px 28px; border-left:1px solid var(--color-border); text-align:center; }
.fee-item:first-child{ border-left:0; }
.fee-item dt{ font-size:15px; color:var(--color-text-sub); margin:0 0 10px; }
.fee-item dd{ margin:0; font-family:var(--font-serif-jp); font-weight:600; font-size:30px; letter-spacing:.04em; line-height:1.4; color:var(--color-main); }
.fee-item dd small{ display:block; font-family:var(--font-sans-jp); font-size:15px; font-weight:400; letter-spacing:.02em; color:var(--color-text-sub); margin-top:6px; }

/* 料金表（料金ページ） */
.pzero{ display:flex; justify-content:center; margin:40px 0 0; }
.pzero .in{ position:relative; padding:36px 72px; border:1px solid rgba(212,175,55,.6); text-align:center;
  background:var(--color-white); }
.pzero .in::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(212,175,55,.3); pointer-events:none; }
.pzero dt{ font-size:15px; font-weight:700; color:var(--color-text-sub); margin:0 0 6px; letter-spacing:.1em; }
.pzero dd{ margin:0; font-family:var(--font-serif-jp); font-weight:600; font-size:56px; line-height:1.2; color:var(--color-main); }
.pzero dd small{ font-size:22px; margin-left:2px; }
.lformats{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px; }
.lformat{ background:var(--color-white); border:1px solid var(--color-border); border-top:3px solid var(--color-main);
  padding:30px 28px; }
.lformat h3{ font-family:var(--font-serif-jp); font-weight:600; font-size:20px; color:var(--color-main); margin-bottom:8px; }
.lformat p{ margin:0; font-size:15px; line-height:1.8; color:var(--color-text-sub); }
@media (max-width:920px){ .lformats{ grid-template-columns:1fr; gap:16px; } }
/* ver7〜：レッスン形式は5項目を縦に並べる。PCは「見出し（左）＋説明（右）」の横長の帯、
   上の青い太線は左の縦線に置きかえ。SPは見出しの下に説明 */
.lformats{ grid-template-columns:1fr; gap:14px; max-width:960px; margin-left:auto; margin-right:auto; }   /* カードの列はセンター寄せ */
.lformat{ display:grid; grid-template-columns:160px 1fr; gap:22px; align-items:center;
  border-top:1px solid var(--color-border); border-left:3px solid var(--color-main); padding:22px 26px; }
.lformat h3{ margin:0; }
.lformat{ grid-template-columns:160px 1fr auto; }   /* 料金表と同じ幅（864px）に収めるため見出し列は160px */
/* 各カード右の「料金を見る」：下の料金表の該当箇所へ移動するページ内リンク（丸の中は下向きの矢印） */
.lf-link{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-size:14.5px; font-weight:700; color:var(--color-main); padding:6px 0;
  border-bottom:1px solid rgba(212,175,55,.7); }
.lf-ico{ flex:0 0 21px; width:21px; height:21px; border-radius:50%; background:var(--color-cta);
  display:inline-flex; align-items:center; justify-content:center; transition:transform .35s ease; }
.lf-ico::after{ content:""; width:5px; height:5px; margin-top:-2px;
  border-right:1.7px solid #fff; border-bottom:1.7px solid #fff; transform:rotate(45deg); }
.lf-link:hover .lf-ico{ transform:translateY(2px); }
/* 料金表の飛び先：固定ヘッダーに隠れないよう上に余白 */
.pjump{ scroll-margin-top:200px; }   /* ver7〜 110px→160px→200px（着地が上すぎたため） */
@media (max-width:920px){
  .lformat{ grid-template-columns:1fr; gap:6px; padding:18px 20px; }
  .lf-link{ justify-self:start; margin-top:6px; }
  .pjump{ scroll-margin-top:160px; }
}
.ptable{ margin:36px 0 0; border-top:1px solid rgba(212,175,55,.5); }
.ptable .row{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:26px 8px; border-bottom:1px solid var(--color-border); }
.ptable .row:last-child{ border-bottom:1px solid rgba(212,175,55,.5); }
.ptable .nm{ flex:1 1 320px; }
.ptable .nm b{ font-size:18px; font-weight:700; }
.ptable .nm .sub{ display:block; font-size:14px; color:var(--color-text-sub); margin-top:4px; }
.ptable .pr{ font-family:var(--font-serif-jp); font-weight:600; font-size:28px; letter-spacing:.04em; color:var(--color-main); white-space:nowrap; }
.ptable .pr small{ font-family:var(--font-sans-jp); font-size:14px; font-weight:400; color:var(--color-text-sub); margin-left:6px; }
.jr-panel{ margin:28px 0 0; background:var(--color-white); border:1px solid var(--color-border); padding:8px 32px 12px; }
.jr-panel .ptable{ margin-top:0; border-top:0; }
.jr-panel h3{ margin:24px 0 4px; font-size:18px; color:var(--color-main); }
.jr-panel h3 .sub{ font-size:13.5px; font-weight:400; color:var(--color-text-sub); margin-left:12px; }
.jr-panel .row{ padding:18px 0; }
.jr-panel .row .pr{ font-size:24px; }
/* ver11：ジュニアクラスの「幼稚園児」「小学生（〜）」などは、団体レッスンの種目名（.gsched .gn）と同じ 16px に（PC・SP とも。以前は 18px） */
.jr-panel:not(.pcard) .nm b{ font-size:16px; }
/* ver11：SP（名前と金額が2段になる幅）では、ジュニアの金額の上下の余白を半分に */
@media (max-width:520px){
  .jr-panel:not(.pcard) .row{ row-gap:4px; padding-bottom:9px; }
  .jr-panel:not(.pcard) .row .pr{ line-height:1.4; }
}

/* 生徒様のお声 */
/* 生徒さんの声：文章が長いので1列で、行長は読みやすい幅に収める */
.voices{ display:grid; grid-template-columns:1fr; gap:26px; margin:34px auto 0; max-width:980px; }
/* 左に生徒さんの写真（縦長）、右に本文の2段組み。
   写真の幅は画面に合わせて 132〜176px。大きくしすぎず、本文の読みやすさを優先する */
.voice{ position:relative; background:var(--color-white); border:1px solid var(--color-border);
  padding:30px 34px 30px;
  display:grid; grid-template-columns:clamp(132px,15vw,176px) 1fr;
  gap:clamp(20px,2.4vw,34px); align-items:start; }
.voice .vph{ width:100%; aspect-ratio:3/4; }
.voice .vbody{ min-width:0; }
.voice::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(212,175,55,.35); pointer-events:none; }
/* カード冒頭の引用符（“）は ver6 で廃止 */
/* 「松山市・女性・社交ダンス」 */
.voice .vwho{ margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid rgba(212,175,55,.4);
  font-family:var(--font-serif-jp); font-weight:600; font-size:17px; letter-spacing:.04em;
  color:var(--color-main); }
/* 「ダンスを始めたきっかけ」などの小見出しつきブロック */
.vblk + .vblk{ margin-top:24px; }
/* 小見出しと左の横棒は青（ver6〜。以前は金） */
.vblk h4{ display:flex; align-items:center; gap:10px; margin:0 0 9px;
  font-family:var(--font-sans-jp); font-weight:700; font-size:15px; letter-spacing:.08em;
  color:var(--color-main); }
.vblk h4::before{ content:""; width:18px; height:1px; background:var(--color-main); flex:0 0 18px; }
.vblk p{ margin:0; font-size:16px; line-height:1.95; }
.vblk p + p{ margin-top:12px; }
@media (max-width:640px){
  /* スマホは1段に。写真は幅を絞って左寄せで置く */
  .voice{ padding:26px 22px; grid-template-columns:1fr; gap:0; }
  .voice .vph{ width:min(46%,180px); margin:0 0 18px; }
  .vblk + .vblk{ margin-top:20px; }
}

/* セクション見出し行（右に「すべて見る」） */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.sec-head h2{ margin:0; }

/* ギャラリー（TOP 4枚） */
.gal{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:36px; }
.gal figure{ margin:0; }
.gal .ph{ height:200px; }
@media (max-width:1180px){ .gal{ grid-template-columns:repeat(3,1fr); gap:22px; } }
@media (max-width:860px){ .gal{ grid-template-columns:repeat(2,1fr); } }

/* ギャラリー一覧カード */
.gcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 28px; margin-top:44px; }
.gcard .ph{ aspect-ratio:3/2; margin-bottom:14px; }
.gcard .ph img{ filter:grayscale(.2) saturate(1.02); transition:filter .5s ease, opacity .3s; }
.gcard:hover .ph img{ filter:none; }
.gcard .meta{ display:flex; align-items:center; gap:12px; margin:0 0 6px; }
.gcard .date{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.12em; color:var(--color-accent-text); }
.gcard .cat{ font-size:12px; letter-spacing:.06em; padding:2px 10px; border:1px solid var(--color-border); color:var(--color-text-sub); }
.gcard h3{ font-family:var(--font-serif-jp); font-weight:600; font-size:18px; margin:0; line-height:1.6; }
.gcard:hover h3{ color:var(--color-main); }
/* ver11：ギャラリー一覧のカードは カテゴリー → タイトル → アイキャッチ（日付なし）。タイトルの行数が違っても写真の上端がそろうよう、写真は下に寄せる */
.gcard--title{ display:flex; flex-direction:column; }
.gcard--title h3{ margin:0 0 12px; }
.gcard--title .ph{ margin:auto 0 0; width:100%; }
/* ver11：一覧のカテゴリーのタグは黒、文字の大きさはタイトル（h3）と同じ 18px */
.gcard--title .cat{ font-size:18px; color:var(--color-text); padding:2px 12px; }
/* ver11：写真の下に「他の写真はこちら ＞」（カード全体が記事へのリンク。見た目は .tlink と同じ） */
.gcard--title .gmore{ align-self:flex-start; margin-top:10px; }
.gcard--title:hover .gmore{ border-bottom-color:var(--color-accent-text); }
@media (max-width:920px){ .gcards{ grid-template-columns:repeat(2,1fr); gap:28px 18px; } }
@media (max-width:600px){ .gcards{ grid-template-columns:1fr; } }

/* 絞り込みチップ */
.fchips{ display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 0; padding:0; list-style:none; }
.fchips button{ appearance:none; border:1px solid var(--color-border); background:var(--color-white);
  font-family:var(--font-sans-jp); font-size:14.5px; font-weight:500; letter-spacing:.04em; color:var(--color-text);
  min-height:44px; padding:4px 22px; border-radius:999px;
  transition:background-color .3s,color .3s,border-color .3s; }
.fchips button:hover{ border-color:var(--color-accent); }
.fchips button.is-on{ background:var(--color-main); border-color:var(--color-main); color:var(--color-white); }

/* ページネーション */
.pgn{ display:flex; justify-content:center; align-items:center; gap:10px; margin:56px 0 0; }
/* min-height / padding を打ち消しているのは、お知らせ一覧の .news a（min-height:112px）が
   同じセクション内にあるページ送りにも効いてしまい、縦長になるため */
nav.pgn a,nav.pgn span{ width:46px; height:46px; min-height:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border); background:var(--color-white); font-size:15px; font-weight:500;
  border-radius:50%; transition:border-color .3s,color .3s; }
.pgn a:hover{ border-color:var(--color-accent); color:var(--color-main); }
.pgn .cur{ background:var(--color-main); border-color:var(--color-main); color:var(--color-white); }
.pgn .dots{ border:0; background:none; width:auto; }

/* お知らせリスト */
/* 記事リンクの指定は「.news li a」に限定している（ver6〜）。
   以前は「.news a」で、同じセクション内の「すべて見る」（.tlink）にまで
   min-height:112px や余白・ホバー背景が効いてしまい、文字と下線のあいだが大きくあいていた */
.news ul{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--color-border); }
.news li{ border-bottom:1px solid var(--color-border); }
.news li a{ display:flex; align-items:center; gap:26px; min-height:112px; padding:16px 12px; transition:background-color .3s; }
.news li a:hover{ background:var(--color-white); }
.s-white .news li a:hover,.news.on-white li a:hover{ background:var(--color-base); }
.news .thumb{ width:88px; height:88px; flex:0 0 88px; }
.news .date{ font-weight:500; font-size:16px; letter-spacing:.06em; color:var(--color-accent-text); flex:0 0 auto; }
.news .cat{ font-size:13px; letter-spacing:.06em; padding:3px 10px; border:1px solid var(--color-border); color:var(--color-text-sub); flex:0 0 auto; }
.news .ttl{ font-size:17px; line-height:1.7; }
.news li a:hover .ttl{ color:var(--color-main); }
.news .txt{ flex:1; min-width:0; }
.news .txt .ttl{ display:block; }
.news .txt .ex{ display:block; font-size:14px; line-height:1.7; color:var(--color-text-sub); margin-top:4px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
@media (max-width:920px){
  .news li a{ flex-wrap:wrap; gap:12px 16px; min-height:0; padding:18px 8px; }
  .news .ttl{ width:100%; }
  /* 日付・カテゴリの隣で潰れないよう、本文ブロックは次の行へ回す */
  .news .txt{ flex:1 1 100%; }
}
/* 深紺の面に置いたとき（TOPのお知らせ・ブログ）：罫線と文字色を反転させる */
.s-deep.news ul{ border-top-color:rgba(255,255,255,.26); }
.s-deep.news li{ border-bottom-color:rgba(255,255,255,.26); }
.s-deep.news li a{ color:var(--color-white); }
.s-deep.news li a:hover{ background:rgba(255,255,255,.09); }
.s-deep.news .date{ color:var(--color-accent); }
.s-deep.news .cat{ border-color:rgba(255,255,255,.4); color:rgba(255,255,255,.82); }
.s-deep.news li a:hover .ttl{ color:var(--color-accent); }
.s-deep.news .txt .ex{ color:rgba(255,255,255,.74); }
.s-deep.news .thumb{ background:rgba(255,255,255,.14); }
.s-deep .tlink{ color:var(--color-white); border-bottom-color:rgba(212,175,55,.7); }
.s-deep .tlink:hover{ color:var(--color-accent); border-bottom-color:var(--color-accent); }

/* 記事ページ（お知らせ詳細・ギャラリー詳細） */
.art{ max-width:880px; margin:0 auto; }
.art-head .cat{ display:inline-block; font-size:13px; letter-spacing:.06em; padding:3px 12px;
  border:1px solid var(--color-border); color:var(--color-text-sub); margin:0 0 14px; }
.art-head h1{ font-size:clamp(26px,3.2vw,34px); line-height:1.6; margin:0 0 12px; }
.art-head .date{ font-family:var(--font-serif-en); font-size:14px; letter-spacing:.14em; color:var(--color-accent-text); }
.art .eyecatch{ aspect-ratio:16/9; margin:32px 0 0; }
.art-body{ margin-top:44px; }
.art-body h2{ position:relative; font-size:24px; padding-left:20px; margin:48px 0 18px; }
.art-body h2::before{ content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:3px;
  background:linear-gradient(var(--color-accent), rgba(212,175,55,.35)); }
.art-body p{ margin:0 0 18px; }
.art-body .ph{ aspect-ratio:16/9; margin:28px 0; }
/* 当日の様子：縦位置・横位置が混ざるので、写真の縦横比はそのままに
   段組み（column）へ流し込んでタイル状に敷き詰める。
   高さをそろえないので、トリミングも余白も出ない */
.pgrid{ column-count:3; column-gap:14px; margin:24px 0; }
.pgrid .ph{ width:100%; height:auto; aspect-ratio:auto; margin:0 0 14px;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; }
/* 高さを写真まかせにするため、cover の切り抜きを解除する */
.pgrid .ph img{ width:100%; height:auto; object-fit:fill; }
/* 写真プレースホルダは中身がないので、仮の縦横比で場所を確保する
   （写真を入れたら、その写真の比率が優先される） */
.pgrid .ph--empty{ display:flex; aspect-ratio:4/3; }
.pgrid .ph--empty:nth-child(3n+2){ aspect-ratio:3/4; }
.pgrid .ph--empty:nth-child(4n+3){ aspect-ratio:1/1; }
@media (max-width:860px){ .pgrid{ column-count:2; } }
@media (max-width:480px){ .pgrid{ column-count:1; } }
/* シェア */
.share{ display:flex; align-items:center; gap:12px; margin:44px 0 0; padding-top:24px; border-top:1px solid var(--color-border); }
.share .lb{ font-family:var(--font-serif-en); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent-text); margin-right:6px; }
.share a{ min-width:52px; height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border); font-size:13.5px; font-weight:700; letter-spacing:.04em; color:var(--color-text-sub);
  transition:border-color .3s,color .3s; }
.share a:hover{ border-color:var(--color-accent); color:var(--color-main); }
/* 前後記事ナビ */
.pn-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin:56px 0 0;
  padding-top:28px; border-top:1px solid rgba(212,175,55,.5); }
.pn-nav .pn{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--color-text-sub); transition:color .3s; }
.pn-nav .pn:hover{ color:var(--color-main); }
.pn-nav .btn{ min-height:44px; padding:0 20px; font-size:15px; }
@media (max-width:600px){ .pn-nav{ flex-wrap:wrap; justify-content:center; } }
/* 関連記事 */
.rel h2{ font-size:24px; }

/* ============================================================
   教室案内（アクセス）
   ============================================================ */
.icards{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px; }
.icard{ background:var(--color-white); border:1px solid var(--color-border); padding:26px 26px 24px; }
.icard dt{ display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-family:var(--font-serif-en); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent-text); }
.icard dt::before{ content:""; width:18px; height:1px; background:var(--color-accent); flex:0 0 18px; }
.icard .jt{ display:block; font-size:15px; font-weight:700; margin:0 0 6px; }
.icard dd{ margin:0; font-size:15px; line-height:1.8; }
.icard dd .big{ display:inline-block; padding:6px 0; font-size:20px; font-weight:500; letter-spacing:.04em; color:var(--color-main); }
.icard dd .tbd{ font-size:14px; color:var(--color-text-sub); }
@media (max-width:1080px){ .icards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .icards{ grid-template-columns:1fr; } }

.map{ width:100%; height:420px; border:1px solid var(--color-border); position:relative; overflow:hidden; background:#E9ECF1; }
.map::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(212,175,55,.55); z-index:2; pointer-events:none; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:28px; margin-top:64px; align-items:stretch; }
.map-grid .map{ height:auto; min-height:420px; }
.room-shots{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; }
.room-shots .ph{ height:100%; min-height:150px; }
/* ver10：写真を入れた。写真の元の大きさでマスが伸びないよう、img は枠いっぱいに重ねる */
.room-shots .ph img{ position:absolute; inset:0; }
@media (max-width:920px){
  .map-grid{ grid-template-columns:1fr; }
  .map-grid .map{ min-height:320px; }
}
/* 右側の補足文は削除し、「駐車場あり（7台）」だけを出す（ver6〜）。
   ver7〜：幅は文字に合わせ（width:fit-content）、角は左右とも半円の丸形に */
.parking{ display:flex; align-items:center; gap:16px; padding:9px 28px; margin:0 0 26px;
  width:fit-content; max-width:100%;
  background:var(--color-deep); color:var(--color-white); border:1px solid rgba(212,175,55,.5);
  border-radius:999px; }
.parking b{ font-size:21px; font-weight:700; letter-spacing:.04em; white-space:nowrap; color:var(--color-accent); }
.parking span{ font-size:15px; line-height:1.7; color:rgba(255,255,255,.88); }
@media (max-width:920px){ .parking{ flex-direction:column; align-items:flex-start; gap:8px; } }
dl.info{ margin:0; }
dl.info + .btn{ margin-top:32px; }   /* TOP ACCESS「教室案内を見る」の上の余白（ver7〜。以前は0） */
dl.info > div{ display:grid; grid-template-columns:104px 1fr; gap:20px; padding:16px 0;
  border-bottom:1px solid var(--color-border); min-height:62px; align-items:center; }
dl.info > div:first-child{ border-top:1px solid var(--color-border); }
dl.info dt{ font-size:15px; font-weight:700; color:var(--color-text-sub); margin:0; }
dl.info dd{ margin:0; line-height:1.8; }
dl.info dd.tel{ font-weight:500; font-size:26px; letter-spacing:.06em; color:var(--color-main); }
dl.info dd .tbd{ font-size:15px; color:var(--color-text-sub); }
@media (max-width:920px){ dl.info > div{ grid-template-columns:1fr; gap:4px; padding:14px 0; } }
/* アクセス方法 */
.how{ margin:40px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }   /* 車・徒歩・バスの3枚（ver7〜。以前は2列） */
.how .hcard{ background:var(--color-white); border:1px solid var(--color-border); padding:26px 28px; }
.how .hcard b{ display:flex; align-items:center; gap:10px; font-size:17px; color:var(--color-main); margin:0 0 8px; }
.how .hcard b::before{ content:""; width:18px; height:1px; background:var(--color-accent); }
.how .hcard p{ margin:0; font-size:15px; line-height:1.8; color:var(--color-text-sub); }
@media (max-width:860px){ .how{ grid-template-columns:1fr; } }

/* アクセスまとめ（TOP用グリッド） */
.access-grid{ display:grid; grid-template-columns:560px 1fr; gap:72px; align-items:start; margin-top:34px; }
.access-grid .map{ width:560px; }
@media (max-width:1280px){ .access-grid{ grid-template-columns:1fr; gap:36px; } .access-grid .map{ width:100%; } }

/* ============================================================
   お問い合わせフォーム
   ============================================================ */
.form-note{ text-align:center; margin:0 0 8px; }
.form-note .tel-line{ display:inline-flex; align-items:baseline; gap:10px; margin-top:10px;
  font-size:15px; color:var(--color-text-sub); }
.form-note .tel-line a{ font-weight:500; font-size:24px; letter-spacing:.06em; color:var(--color-main); }
/* ver11：SP は電話番号を「お急ぎの場合は〜」の下の行に（中央そろえ） */
@media (max-width:920px){ .form-note .tel-line{ flex-direction:column; align-items:center; gap:2px; } }
form.cform{ max-width:760px; margin:48px auto 0; }
.frow{ margin:0 0 26px; }
.frow label,.frow .flabel{ display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:700; margin:0 0 8px; }
.req,.opt{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  padding:2px 8px; line-height:1.6; }
.req{ background:var(--color-cta); color:var(--color-white); }
.opt{ background:var(--color-border); color:var(--color-text-sub); }
.frow input[type=text],.frow input[type=tel],.frow input[type=email],.frow select,.frow textarea{
  width:100%; font-family:var(--font-sans-jp); font-size:16px; line-height:1.6; color:var(--color-text);
  background:var(--color-white); border:1px solid var(--color-border); padding:13px 16px; border-radius:0;
  transition:border-color .3s; }
.frow input:focus,.frow select:focus,.frow textarea:focus{ outline:2px solid var(--color-accent); outline-offset:0; border-color:var(--color-accent); }
.frow input::placeholder,.frow textarea::placeholder{ color:#A7ADB5; }
.frow select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22%3E%3Cpath d=%22M1 1l5 5 5-5%22 fill=%22none%22 stroke=%22%238C6A15%22 stroke-width=%221.5%22/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.frow textarea{ min-height:180px; resize:vertical; }
.f2col{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
@media (max-width:640px){ .f2col{ grid-template-columns:1fr; } }
.fhint{ font-size:13.5px; color:var(--color-text-sub); margin:6px 0 0; }
/* プライバシーポリシー同意 */
.pp-box{ background:var(--color-white); border:1px solid var(--color-border); padding:24px 26px; margin:36px 0 0; }
.pp-box h3{ font-size:16px; margin:0 0 12px; }
.pp-scroll{ height:170px; overflow-y:auto; border:1px solid var(--color-border); background:var(--color-base);
  padding:14px 18px; font-size:13.5px; line-height:1.8; color:var(--color-text-sub); }
.pp-scroll h4{ font-size:13.5px; margin:12px 0 4px; color:var(--color-text); }
.pp-scroll p{ margin:0 0 8px; }
.agree{ display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0 0; font-size:15.5px; font-weight:700; }
.agree input{ width:24px; height:24px; accent-color:var(--color-main); }
.fsubmit{ text-align:center; margin:36px 0 0; }
.fsubmit .btn{ min-width:280px; min-height:56px; font-size:17px; }
.fsubmit .btn[disabled]{ opacity:.45; box-shadow:none; }

/* ============================================================
   サンクス／404（簡易ヘッダー・フッターのページ）
   ============================================================ */
body.plain main{ padding-top:64px; }
.plain-hero{ padding:110px 24px 120px; text-align:center; }
.done-mark{ width:96px; height:96px; margin:0 auto 34px; border-radius:50%; position:relative;
  background:var(--color-deep);
  display:flex; align-items:center; justify-content:center; }
.done-mark::before{ content:""; position:absolute; inset:-8px; border:1px solid rgba(212,175,55,.5); border-radius:50%; }
.done-mark svg{ width:40px; height:40px; }
.plain-hero h1{ font-size:clamp(26px,3.6vw,36px); margin:0 0 20px; }
.plain-hero .lead{ max-width:34em; margin:0 auto 10px; }
.plain-hero .tel-line{ display:block; margin:26px 0 38px; font-size:15px; color:var(--color-text-sub); }
.plain-hero .tel-line a{ font-weight:500; font-size:24px; letter-spacing:.06em; color:var(--color-main); margin-left:10px; }
.e404{ font-family:var(--font-serif-en); font-weight:700; font-size:clamp(88px,14vw,150px); line-height:1;
  color:var(--color-main); margin:0 0 10px; }
.e404 span{ color:var(--color-accent-text); }
.qlinks{ margin:46px 0 0; }
.qlinks p{ font-size:14px; letter-spacing:.08em; color:var(--color-text-sub); margin:0 0 14px; }

/* ============================================================
   Footer
   ============================================================ */
/* 深紺の面に写真を透かしで敷く。
   ::before＝写真（低不透明度＋軽くぼかす）／::after＝上下の紺のグラデーション。
   写真を替えるときは ::before の background-image を差し替える。 */
footer{ position:relative; isolation:isolate; overflow:hidden;
  background:var(--color-deep); color:var(--color-white); padding:72px 0 36px; }
footer::before{ content:""; position:absolute; inset:-10px; z-index:-2;
  background:url("../img/footerback.webp") center 56% / cover no-repeat;
  opacity:1; filter:grayscale(.25) brightness(.56) contrast(1.04) blur(1px); }
footer::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,44,168,.84) 0%, rgba(0,44,168,.52) 40%, rgba(0,44,168,.5) 72%, rgba(0,44,168,.66) 100%),
    linear-gradient(180deg, rgba(0,20,80,.4) 0%, rgba(0,20,80,.06) 34%, rgba(0,20,80,.52) 100%); }
footer > .wrap{ position:relative; z-index:1; }
/* SPはフッターが縦長になり cover だと極端に拡大されるので、
   写真は上部に帯として置き、下へ向かって紺に溶かす */
@media (max-width:920px){
  footer::before{ background-position:center top; background-size:165% auto;
    filter:grayscale(.2) brightness(.74) contrast(1.04) blur(1px); }
  footer::after{ background:linear-gradient(180deg,
    rgba(0,44,168,.42) 0%, rgba(0,44,168,.5) 22%, rgba(0,44,168,.9) 38%, var(--color-deep) 48%); }
}
.fcols{ display:grid; grid-template-columns:repeat(4,1fr); gap:56px; }
.fcol h4{ font-family:var(--font-serif-en); font-weight:400; font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--color-accent); margin:0 0 16px; }
.fcol ul{ list-style:none; margin:0; padding:0; }
.fcol li{ font-size:15px; line-height:1.9; color:rgba(255,255,255,.84); }
.fcol li a{ display:inline-block; padding:7px 0; }
.fcol a:hover{ color:var(--color-accent); }
/* SNSアイコン（白抜きのアイコン画像。深紺の面に置く前提） */
.sns{ display:flex; align-items:center; gap:14px; margin-top:10px; }
.sns a{ width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  opacity:.92; transition:transform .3s ease, opacity .3s ease, filter .3s ease; }
.sns a img{ width:100%; height:100%; display:block; object-fit:contain; }
.sns a:hover{ opacity:1; transform:translateY(-3px);
  filter:drop-shadow(0 6px 14px rgba(212,175,55,.45)); }
.fbot{ display:flex; justify-content:space-between; gap:20px; margin-top:48px; padding-top:22px;
  border-top:1px solid rgba(212,175,55,.3); font-size:13px; color:rgba(255,255,255,.7); }
body.plain footer{ padding:34px 0 30px; }
body.plain .fcols{ display:none; }
body.plain .fbot{ margin-top:0; padding-top:0; border-top:0; justify-content:center; }
@media (max-width:1280px){ .fcols{ grid-template-columns:repeat(2,1fr); gap:36px; } }
@media (max-width:920px){ .fcols{ grid-template-columns:1fr; gap:32px; } .fbot{ flex-direction:column; gap:10px; }
  .fcol li a{ padding:10px 0; } }

/* ============================================================
   SPメニュー・下部固定バー・フローティングバッジ
   ============================================================ */
.burger{ display:none; position:relative; width:48px; height:48px; align-items:center; justify-content:center;
  background:none; border:0; color:inherit; padding:0; border-radius:50%; }
/* FV写真の明るい部分に重なっても見失わないよう、透明ヘッダーのときは受け皿を敷く */
.burger::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:rgba(0,18,54,.42); border:1px solid rgba(212,175,55,.6);
  transition:opacity .35s ease; }
#hd.is-stuck .burger::before{ opacity:0; }
.burger span{ display:block; position:relative; z-index:1; width:23px; height:2px; background:currentColor; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:23px; height:2px; background:currentColor; }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger span,.burger span::before,.burger span::after{ transition:transform .3s ease, top .3s ease, background-color .3s ease; }
/* 開いている間は × に切り替える */
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
/* メニューは固定ヘッダー（ロゴ・×ボタン）の下から始める。
   ・上の余白（padding-top）でヘッダーのぶんを空けておくので、ロゴと「トップ」が重ならない
   ・中身（.wrap-sp）は margin:auto で、画面に余裕があれば上下中央、
     入りきらないときは上づめになって下へスクロールできる
     （以前の justify-content:center は、入りきらないと上がヘッダーの下に隠れていた）
   ・画面の高さが低い端末では、下の @media (max-height) で文字と行間を詰めて1画面に収める */
.spmenu{ position:fixed; inset:0; z-index:99; background:var(--color-deep); color:var(--color-white);
  display:flex; flex-direction:column; justify-content:flex-start; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:100px 0 28px;
  transform:translateY(-100%); transition:transform .45s ease; }
.spmenu.is-open{ transform:translateY(0); }
.spmenu .wrap-sp{ margin:auto 0; width:100%; }
.spmenu a{ font-size:19px; font-weight:500; line-height:2.4; display:block; }
.spmenu a .en{ font-family:var(--font-serif-en); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-accent); margin-left:12px; }
/* 各ページへのリンク：左に項目名（＋英字）、右端に丸囲みの＞。
   項目名と英字は文字の下端でそろえ、＞だけ行の上下中央に置く */
/* タブレットなど幅の広い画面で＞が項目名から離れすぎないよう、行の幅に上限を付けている */
.spmenu a.sp-link{ display:flex; align-items:baseline; max-width:520px;
  padding:3px 0; }   /* 項目どうしの間隔を少し広げる（ver7〜。上下3pxずつ＝1行あたり+6px） */
.spmenu a.sp-link .btn-ico{ margin-left:auto; align-self:center; width:22px; height:22px; flex:0 0 22px;
  /* メニュー内だけ「青い丸＋金の輪郭＋金の矢印」（ver7〜）。サイトの他の場所は赤い丸＋白い矢印のまま */
  --ico-bg:var(--color-main); --ico-fg:var(--color-accent);
  box-shadow:0 0 0 1px var(--color-accent); }
.spmenu a.sp-link:active .btn-ico{ transform:translateX(2px); }
/* 英字と右端の丸矢印がくっつかないよう最低8pxあける。
   「NEWS&BLOG」が長いので、幅の狭いスマホ（〜360px）では英字の字間を少し詰める（ver7〜） */
.spmenu a.sp-link .en{ margin-right:8px; }
@media (max-width:360px){ .spmenu a.sp-link .en{ letter-spacing:.1em; } }
.spmenu .sp-note{ display:inline-block; margin:22px 0 0; padding:5px 14px;
  border:1px solid rgba(212,175,55,.72); border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.08em; line-height:1.5; }
.spmenu .sp-tel{ font-size:24px; color:var(--color-accent); margin-top:10px; }
@media (max-width:920px){ .spmenu{ padding:74px 0 22px; } }   /* ヘッダーが64pxになる幅 */
/* 高さの低い画面：文字と行間を詰めて、スクロールなしで全部見えるようにする */
@media (max-height:700px){
  .spmenu a{ font-size:17.5px; line-height:2.1; }
  .spmenu a.sp-link{ padding:2px 0; }
  .spmenu .sp-note{ margin-top:14px; }
  .spmenu .sp-tel{ font-size:21px; margin-top:6px; }
}
@media (max-height:560px){
  .spmenu a{ font-size:16.5px; line-height:1.85; }
  .spmenu a.sp-link{ padding:0; }
  .spmenu .sp-note{ margin-top:10px; font-size:12px; }
  .spmenu .sp-tel{ font-size:19px; margin-top:4px; }
}
/* ヘッダーのSNSアイコン（ハンバーガーボタンの左）。
   白抜きの画像なので、青いメニューを開いている間（#hd.is-menu）だけ出す。
   以前はメニューのいちばん下にあったが、高さを節約するためここへ移した */
.hd-sns{ display:none; margin-top:0; gap:8px; }
.hd-sns a{ width:34px; height:34px; }
#hd.is-menu .hd-sns{ display:flex; animation:hdSnsIn .35s ease .1s both; }
@keyframes hdSnsIn{ from{ opacity:0; } to{ opacity:1; } }
/* 画面下の固定ボタン：左＝電話の丸ボタン／右＝予約の横長ボタン。
   背景の帯は置かず、2つのボタンだけがページの上に浮いて見えるようにしている。
   角はどちらも目いっぱい丸める（border-radius:999px）。
   帯がないぶん、透明な部分が下のリンクを塞がないよう当たり判定はボタンだけに持たせる */
.spbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  align-items:center; pointer-events:none;
  background:none; border-top:0;
  padding:0 14px 14px; gap:10px; }
.spbar a{ pointer-events:auto;
  display:flex; align-items:center; justify-content:center;
  min-height:56px; border-radius:999px;
  font-weight:700; letter-spacing:.04em; white-space:nowrap;
  transition:background-color .3s ease, color .3s ease, box-shadow .3s ease; }
/* 電話：紺地に白い受話器アイコンの丸ボタン */
.spbar .tel{ flex:0 0 56px; width:56px; height:56px; padding:0;
  background:var(--color-main); color:var(--color-white);
  border:1px solid rgba(212,175,55,.5);
  box-shadow:0 6px 18px rgba(0,20,60,.34), 0 2px 6px rgba(0,20,60,.22); }
.spbar .tel svg{ width:25px; height:25px; display:block; }
.spbar .tel:active{ background:var(--color-deep); }
/* 「初心者の方はこちら」：残り幅いっぱいの横長ボタン。
   PCのひよこの吹き出しと同じ意匠（えんじ地＋金の二重罫＋丸囲みの＞）にそろえている */
.spbar .rsv{ position:relative; flex:1 1 auto; min-width:0; padding:0 20px;
  background:var(--color-cta); color:var(--color-white);
  border:1px solid rgba(212,175,55,.85);
  font-size:clamp(15px, 4.2vw, 17px);
  box-shadow:0 6px 18px rgba(80,10,25,.34), 0 2px 6px rgba(80,10,25,.22); }
/* 内側の金の細罫 */
.spbar .rsv::before{ content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid rgba(212,175,55,.55); border-radius:999px; }
/* 丸囲みの＞。ほかの .spbar 内アイコンは隠しているので、ここだけ出す */
.spbar .rsv .btn-ico{ display:inline-flex; }

/* ---------- 追従ボタン：ひよこ＋ホバーで左から出るラベル ---------- */
.float-badge{ position:fixed; right:24px; bottom:24px; z-index:90;
  display:flex; align-items:center; gap:11px;   /* 吹き出しのしっぽ（三角）のぶん */
  /* 出現は不透明度だけを動かす（transform はホバーの動きに空けておく） */
  opacity:0; animation:fbIn .9s ease-out 1.4s forwards;
  /* 透明な余白部分が後ろのリンクを塞がないよう、当たり判定は中の要素だけに持たせる */
  pointer-events:none; }
@keyframes fbIn{ to{ opacity:1; } }

.float-badge .fb-chick{ flex:0 0 auto; width:92px; height:92px; display:block;
  pointer-events:auto;
  filter:drop-shadow(0 8px 16px rgba(0,20,60,.26));
  transition:transform .35s ease, filter .35s ease; }
.float-badge .fb-chick svg{ width:100%; height:100%; display:block; overflow:visible; }
.float-badge:hover .fb-chick{ transform:translateY(-4px);
  filter:drop-shadow(0 12px 22px rgba(0,20,60,.32)); }

/* 羽ばたきはSVG側が持っている。常に同じ速さ（1往復 0.7秒）で羽ばたかせる。
   ホバー／フォーカスで速さは変えない（以前のホバー時の速さを標準にした）。
   「動きを減らす」設定の環境でも止めない */
.float-badge .hy-wl,.float-badge .hy-wr,.float-badge .hy-bd{ animation-play-state:running; }

/* ラベル（吹き出し）：ひよこの左に常に出したまま。
   赤地＋ふちの金線を、角のない丸い吹き出しの形にしている
   （内側の金の細罫は ver6 で廃止。金線はふちの1本だけ） */
.float-badge .fb-label{ order:-1; position:relative;
  padding:5px; background:var(--color-cta); color:var(--color-white);
  border:1px solid rgba(212,175,55,.85); border-radius:999px;
  box-shadow:0 10px 26px rgba(0,20,60,.3), 0 0 22px rgba(212,175,55,.3);
  pointer-events:auto;
  transition:transform .35s ease, box-shadow .35s ease; }
.float-badge .fb-txt{ display:block; padding:10px 21px;
  /* 「こちら」と丸矢印を1行に収める */
  font-size:15px; font-weight:700; line-height:1.55; letter-spacing:.06em;
  white-space:nowrap; text-align:center; }
/* 吹き出しの外側に浮いていた金のリングは ver6 で廃止 */
/* ひよこ側へ向くしっぽ。吹き出しらしい三角。
   ピル形の右端は中央がいちばん張り出すので、そこに継ぐと隙間なくつながる */
.float-badge .fb-label::after{ content:""; position:absolute; top:50%; left:100%;
  margin:-8px 0 0 -1px; border:8px solid transparent;
  border-left-color:var(--color-cta);
  filter:drop-shadow(1px 0 0 rgba(212,175,55,.85)); }
/* ホバー時：吹き出しもひよこと一緒に少し浮く */
.float-badge:hover .fb-label,
.float-badge:focus-visible .fb-label{ transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,20,60,.34), 0 0 30px rgba(212,175,55,.5); }

.float-badge:focus-visible{ outline:2px solid var(--color-accent); outline-offset:6px; }
/* タブレット・スマホでは、画面下の「電話・予約」ボタンの右隣にひよこを並べる。
   横幅は --fab-w で共有し、予約ボタン側はそのぶん右に余白をとる */
@media (max-width:920px){
  /* ひよこは下部ボタンと同じ高さで下端をそろえる（吹き出しは上へ伸びる） */
  .float-badge{ right:14px; bottom:14px; align-items:flex-end; --fab-w:56px; }
  .float-badge .fb-chick{ width:var(--fab-w); height:var(--fab-w); }
}
/* スマホ：吹き出しはPCと同じ意匠のまま、画面幅に合わせて小さく
   （ver6 でさらに一段小さくした：文字 13px → 12px、内側の余白も詰めた） */
@media (max-width:767px){
  .float-badge .fb-label{ display:block; padding:2px; }
  .float-badge .fb-txt{ padding:6px 11px; font-size:12px; line-height:1.5; letter-spacing:.03em; }
  .float-badge .fb-label::after{ margin:-7px 0 0 -1px; border-width:7px;
    border-top-color:transparent; border-bottom-color:transparent; border-right-color:transparent; }
  .float-badge .btn-ico{ width:15px; height:15px; margin-left:6px; }
  /* 左下の電話ボタンも一回り小さく（56px → 48px、受話器 25px → 22px）。
     指で押しやすい大きさの目安（44px）は下回らないようにしている */
  .spbar .tel{ flex:0 0 48px; width:48px; height:48px; min-height:48px; }
  .spbar .tel svg{ width:22px; height:22px; }
}

/* ============================================================
   出現アニメーション
   ============================================================ */
@keyframes rise{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
@keyframes riseX{ from{ opacity:0; transform:translateX(12px);} to{ opacity:1; transform:none;} }
.io{ opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; }
.io.is-in{ opacity:1; transform:none; }
.io-x{ opacity:0; transform:translateX(56px); transition:opacity .9s ease, transform .9s ease; }
.io-x.is-in{ opacity:1; transform:none; }

/* ============================================================
   Responsive（ヘッダー切替・共通）
   ============================================================ */
/* ナビ7項目が無理なく並ぶのは 1221px 以上。それ未満はハンバーガーに切り替える
   （以前は1180pxで、1181〜1220pxではナビが右のボタンを押し出していた） */
@media (max-width:1220px){
  .nav{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:920px){
  #hd{ height:64px; }
  .hd{ padding:0 18px; }
  .hd-right .tel-hd,.hd-right .btn{ display:none; }
  .logo img{ height:28px; }
  /* 電話ボタン・吹き出し・ひよこが画面下でひとまとまりに見えるよう、
     追従バーもひよこと同じタイミング・同じ速度で出現させる。
     「初心者の方はこちら」はひよこの吹き出しが担うので、バーは電話ボタンだけ */
  .spbar{ display:flex; opacity:0; animation:fbIn .9s ease-out 1.4s forwards;
    padding-right:14px; }
  .spbar .rsv{ display:none; }
  body{ padding-bottom:84px; }   /* 画面下に浮くボタンのぶん */
  body.plain{ padding-bottom:0; }
  section.blk{ padding:68px 0; }
  .wrap{ padding:0 20px; }
  h2{ font-size:25px; }
  .final-frame{ padding:44px 20px; }
  .final h2{ font-size:25px; }
  /* ひよこぶんの余白は上の2つのメディアクエリで指定している */
  .sec-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .card-photo{ height:56vw; }
  .card-ribbon{ font-size:64px; bottom:-18px; }
  .card-body{ padding:26px 22px 24px; }
  .staff{ grid-template-columns:1fr; max-width:520px; gap:40px; }
  .fees{ grid-template-columns:1fr; }
  .fee-item{ border-left:0; border-top:1px solid var(--color-border); }
  .fee-item:first-child{ border-top:0; }
  .pzero .in{ padding:28px 44px; }
  .pzero dd{ font-size:44px; }
  .ptable .pr{ font-size:24px; }
  .jr-panel{ padding:4px 20px 8px; }
}
@media (max-width:1280px){
  .wrap{ padding:0 40px; }
  .staff{ grid-template-columns:1fr 1fr; gap:40px; }
}
@media (max-width:920px){ .wrap{ padding:0 20px; } .staff{ grid-template-columns:1fr; } }

/* 「動きを減らす」設定（Windowsのアニメーション効果オフ等）でも、
   アニメーションは通常どおり動かす方針（ver6〜）。そのため prefers-reduced-motion での
   一括停止は置いていない。ページ内リンクのなめらかスクロールは common.js が担当 */

/* 文章の中に置くリンク（ver7〜）。丸い「＞」は付けず、青い文字＋下線だけにして文の流れを切らない */
.ilink{ color:var(--color-main); font-weight:700; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.25em; text-decoration-color:rgba(0,44,168,.45); transition:text-decoration-color .3s ease; }
.ilink:hover{ text-decoration-color:var(--color-main); }

/* 改行の調整用（ver7〜）
   .nw：このまとまりの途中では改行しない（見出しの「体験レッスンから。」など）
   .pc-br：PC（921px〜）だけ効く改行。SPでは改行しない */
.nw{ white-space:nowrap; }
/* 320px級の狭い画面：CTA（FIRST STEP）の見出しが3行になり言葉の途中で切れるので、文字を少し小さくして2行に収める */
@media (max-width:359px){ .final-frame h2{ font-size:21px; } }
.pc-br{ display:inline; }
@media (max-width:920px){ .pc-br{ display:none; } }
/* .sp-br：SP（〜920px）だけ効く改行 */
.sp-br{ display:none; }
/* .em-gold：本文中の強調（太字＋ゴールド。明背景なのでディープゴールド） */
.em-gold{ font-weight:700; color:var(--color-accent-text); }
@media (max-width:920px){ .sp-br{ display:inline; } }
/* ギャラリーのCTA見出し（ワクワクの非日常を一緒に楽しんでみませんか？）は長いので、SPでは少し小さくして
   「ワクワクの非日常を一緒に／楽しんでみませんか？」の2行に収める（320px級は3行） */
@media (max-width:767px){ .final h2.h-long{ font-size:21px; } }

/* ===== 料金表（ver7〜：体験・初心者5回・個人・団体＋ジュニア・カルチャースクール） ===== */
.ptable .nm b small{ font-size:14px; font-weight:400; color:var(--color-text-sub); margin-left:4px; }
/* チケットのアイコン（色は文字色に合わせる） */
.tk{ display:inline-block; width:1.25em; height:1.25em; vertical-align:-.28em; margin-right:.25em;
  background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5H19a2 2 0 0 1 2 2V9.5a2.5 2.5 0 0 0 0 5V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V14.5a2.5 2.5 0 0 0 0-5V7a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M15 6.5v11' stroke='black' stroke-width='1.6' stroke-dasharray='1.8 1.8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5H19a2 2 0 0 1 2 2V9.5a2.5 2.5 0 0 0 0 5V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V14.5a2.5 2.5 0 0 0 0-5V7a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M15 6.5v11' stroke='black' stroke-width='1.6' stroke-dasharray='1.8 1.8'/%3E%3C/svg%3E") center/contain no-repeat; }
.tkline{ color:var(--color-accent-text) !important; font-weight:700; }
/* 個人レッスンの注記（行の下に全幅で） */
.pnote{ flex:0 0 100%; margin:4px 0 0; padding:16px 20px; list-style:none; background:var(--color-base);
  font-size:14px; line-height:1.85; color:var(--color-text-sub); }
.pnote li{ text-indent:-1em; padding-left:1em; }
/* ver11：レッスン形式・料金案内ページのグレーの文字（説明文・（25分）・時間・注意書きなど）はすべて黒に */
body[data-page="price"] .lformat p,
body[data-page="price"] .lformat p .nw,
body[data-page="price"] .jr-panel small,
body[data-page="price"] .jr-panel .sub,
body[data-page="price"] .jr-panel .gt,
body[data-page="price"] .jr-panel .pnote li{ color:var(--color-text); }
/* ver11：同じ文字は大きさも「お問い合わせは、愛媛新聞カルチャースクール〜」と同じ 15px に（PC・SP とも） */
body[data-page="price"] .lformat p,
body[data-page="price"] .jr-panel small,
body[data-page="price"] .jr-panel .sub,
body[data-page="price"] .jr-panel .gt,
body[data-page="price"] .jr-panel .pnote li{ font-size:15px; }
/* ver10：※なしの行（（例）〜）は、上の行の※の後ろ（本文の頭）にそろえる */
.pnote li.pnote-ex{ text-indent:-.5em; }   /* 「（」は文字の左半分が空白なので半文字ぶん左へ（見た目で「初心者」の頭とそろう） */
.pnote li + li{ margin-top:6px; }
.pnote .tk{ color:var(--color-accent-text); }
/* 団体レッスンの時間割（行の下に全幅で） */
.gsched{ flex:0 0 100%; margin:2px 0 0; padding:0; list-style:none; }
.gsched li{ display:grid; grid-template-columns:220px 1fr auto; gap:16px; align-items:baseline;   /* ver10：ダンス名→曜日・時間→料金の順に（以前は時間が先で 170px） */
  padding:12px 0; border-top:1px dashed var(--color-border); }
.gsched .gt{ font-size:15px; color:var(--color-text-sub); white-space:nowrap; }
.gsched .gn{ font-size:16px; font-weight:700; }
.gsched .gp{ font-family:var(--font-serif-jp); font-weight:600; font-size:22px; letter-spacing:.04em; color:var(--color-main); white-space:nowrap; text-align:right; }
.gsched .gp small{ font-family:var(--font-sans-jp); font-size:13.5px; font-weight:400; color:var(--color-text-sub); margin-left:6px; }
.gsched .gp small .tk{ color:var(--color-accent-text); }
/* 愛媛新聞カルチャースクールの案内 */
.pinfo{ margin:40px 0 0; padding:20px 24px; border:1px solid rgba(212,175,55,.6); background:var(--color-white); }
.pinfo p{ margin:0; font-size:15px; line-height:1.85; }
.pinfo .pinfo-ttl{ font-weight:700; color:var(--color-main); margin-bottom:4px; }
.pinfo a{ color:var(--color-main); font-weight:700; }
@media (max-width:767px){
  /* SP：時間 → クラス名 → 料金（チケット枚数）の3段に縦積み（ver7〜。クラス名が途中で折り返していたため） */
  .gsched li{ grid-template-columns:1fr; gap:2px; }
  .gsched .gt{ font-size:14px; }
  .gsched .gp{ font-size:24px; text-align:left; margin-top:2px; }   /* ver11：ほかの金額（.pr 24px）とそろえた。以前は 20px */
  .gsched .gp small{ margin-left:8px; }
  .pnote{ padding:14px 16px; font-size:13.5px; }
  .pinfo{ padding:16px 18px; }
}
/* 料金表の一般レッスン（体験〜団体）もジュニアクラスと同じ白いカードに（ver7〜）。1カード1項目 */
.pcards{ margin:31px 0 0; }   /* ver10：36px → 31px（上の一言との間を5px詰める） */
.pcards .pcard:first-child{ margin-top:0; }
.pcard{ margin-top:20px; padding:4px 32px; }
.pcard .row,.pcard .row:last-child{ border-bottom:0; padding:24px 0; }
.pcard .nm > b{ color:var(--color-main); }   /* 項目名はジュニアクラスのカード見出しと同じ青 */
@media (max-width:920px){ .pcard{ padding:2px 20px; } .pcard .row,.pcard .row:last-child{ padding:20px 0; } }
/* 写真ぼかし＋青の背景（TOPの FOR BEGINNERS と同じ）。料金ページの Price List で使用（ver7〜） */
.bgsec{ overflow:hidden; }
.bgsec .bgph{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bgsec .bgph img{ width:100%; height:100%; object-fit:cover; filter:blur(14px) saturate(1.05); transform:scale(1.08); }
.bgsec .bgph::after{ content:""; position:absolute; inset:0; background:rgba(0,44,168,.88); }
.bgsec .wrap{ position:relative; z-index:1; }
/* 青い面の上でも、白いカード・案内枠の中は通常の濃い文字に戻す */
.s-deep .jr-panel,.s-deep .pinfo{ color:var(--color-text); }
/* 青い面の上の文中リンク（料金ページの注記「初めての方へ」） */
.s-deep .ilink{ color:var(--color-white); text-decoration-color:rgba(212,175,55,.85); }
.s-deep .ilink:hover{ text-decoration-color:var(--color-accent); }
/* スタッフ紹介：野本 ひとみ（ver7〜）
   右＝1枚目の写真（人物に寄せて拡大して切り抜く）、左＝文章＋2枚目の写真（横長）。左右の高さをそろえる */
.sprof--split{ align-items:start; }
.sprof--split h2{ margin-bottom:24px; }
.ph--zoom img{ object-position:53% 50%; transform:scale(1.22); transform-origin:55% 64%; }   /* 人物を中央に寄せて拡大（左端の別の方のスカートが入らない） */
.sprof .sub-ph{ aspect-ratio:16 / 9; width:100%; max-width:520px; margin-top:30px; }   /* 左右の高さがそろうよう幅を抑える */
@media (max-width:920px){
  .sprof--split h2{ margin-bottom:18px; }
  .sprof .sub-ph{ margin-top:24px; max-width:none; }
}
/* レッスン・料金：「料金表」見出しの右の「入会金0円」（丸みのある金の枠、ver8〜）。TOPの「初心者大歓迎！」横のピルと同じ作り */
.ph2-free{ display:inline-flex; align-items:center; vertical-align:middle; margin-left:16px; padding:3px 16px; border-radius:999px;
  border:1px solid rgba(212,175,55,.85); background:rgba(212,175,55,.15);
  font-family:var(--font-sans-jp); font-weight:700; font-size:16px; letter-spacing:.06em; line-height:1.5; color:var(--color-accent); }
/* 料金表見出しの行（「入会金0円」ピル付き） */
.ph2{ display:flex; align-items:center; flex-wrap:wrap; }
.ph2 .ph2-free{ margin-left:16px; }   /* ver8：一度右端に寄せたが、左（「すべて税込」の横）に戻した */
/* 「入会金0円」の下の一言（左寄せ、ver8〜） */
.ph2{ margin-bottom:16px; }   /* ver10：8px → 16px（下の一言との間を2倍に） */
/* ver10：「料金表」の文字をゴールドに（濃い背景なのでシャンパンゴールド。「すべて税込」は白のまま） */
.s-deep .ph2{ color:var(--color-accent); }
.ph2-note{ margin:0; text-align:left; font-size:14px; line-height:1.7; color:rgba(255,255,255,.85); }
@media (max-width:767px){ .ph2-free, .ph2 .ph2-free{ margin-left:10px; padding:2px 12px; font-size:14px; } }
/* ジュニアクラス：個人・団体を1枚のカードにまとめたときの2つ目の見出し（ver8〜）。上に少し間をあける */
.jr-panel h3.jr-h2nd{ margin-top:36px; }
/* ver11：ジュニア団体レッスンの曜日・時間は見出しの下の段に（PC・SP とも2段） */
.jr-panel h3 .sub.jr-time{ display:block; margin:4px 0 0; }
.jr-panel h3.jr-h2nd .sub:first-of-type{ margin-left:2px; }   /* 「団体レッスン（45分）」と詰める */
/* TOP の FV 下の一文（.fv-lead：長期海外ダンス留学で…）と同じ書体の設定（ver8〜。ダンスの種類ページのリード文で使用）
   明朝・中太・16〜18px・行間2.2・字間.08em。SP は 15px・行間2.05・字間.05em。色は置く面に合わせて各ページのまま */
.lead--serif{ font-family:var(--font-serif-jp); font-weight:500;
  font-size:clamp(16px, 1.3vw, 18px); line-height:2.2; letter-spacing:.08em; }
@media (max-width:700px){ .lead--serif{ font-size:15px; line-height:2.05; letter-spacing:.05em; } }

/* ============================================================
   WordPress テーマ化で追加（ver9 ベース）
   ============================================================ */
/* width/height 属性を付けた画像の縦横比を保つ */
img{ height:auto; }
/* スキップリンク・読み上げ専用テキスト */
.screen-reader-text{ border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important; }
.skip-link:focus{ clip-path:none; height:auto; width:auto; z-index:100000; left:8px; top:8px; padding:12px 18px;
  background:var(--color-white); color:var(--color-main); font-weight:700; border:2px solid var(--color-accent); }
/* 絞り込みチップ：WordPress版はカテゴリページへのリンク */
.fchips a{ display:inline-flex; align-items:center; border:1px solid var(--color-border); background:var(--color-white);
  font-family:var(--font-sans-jp); font-size:14.5px; font-weight:500; letter-spacing:.04em; color:var(--color-text);
  min-height:44px; padding:4px 22px; border-radius:999px; text-decoration:none;
  transition:background-color .3s,color .3s,border-color .3s; }
.fchips a:hover{ border-color:var(--color-accent); }
.fchips a.is-on{ background:var(--color-main); border-color:var(--color-main); color:var(--color-white); }
/* ページ送り（paginate_links の出力） */
.pgn .current{ background:var(--color-main); border-color:var(--color-main); color:var(--color-white); }
/* 一覧の写真なしサムネイル */
.news .thumb img,.gcard .ph img{ width:100%; height:100%; object-fit:cover; }
/* 記事本文（ブロックエディタ） */
.art-body > *{ max-width:100%; }
.art-body img{ height:auto; }
.art-body figure{ margin:28px 0; }
.art-body .wp-block-image img{ display:block; }
.art-body figcaption{ font-size:14px; color:var(--color-text-sub); margin-top:8px; }
.art-body .wp-block-gallery{ gap:14px; margin:24px 0; }
.art-body a{ color:var(--color-main); text-decoration:underline; text-underline-offset:3px; }
.art-body ul,.art-body ol{ margin:0 0 18px; padding-left:1.4em; }
.art .eyecatch img{ width:100%; height:100%; object-fit:cover; }
.alignleft{ float:left; margin:0 24px 16px 0; }
.alignright{ float:right; margin:0 0 16px 24px; }
.aligncenter{ margin-left:auto; margin-right:auto; }
.wp-caption-text,.gallery-caption{ font-size:14px; color:var(--color-text-sub); }
.sticky,.bypostauthor{ }
/* 固定ページ（汎用：プライバシーポリシー等） */
.page-body{ max-width:880px; margin:0 auto; }
.page-body h2{ font-size:24px; margin:48px 0 18px; }
.page-body p{ margin:0 0 18px; }
/* Contact Form 7 */
.wpcf7 form.cform .wpcf7-form-control-wrap{ display:block; }
.wpcf7 form.cform .wpcf7-not-valid-tip{ font-size:14px; color:var(--color-cta); margin-top:6px; }
.wpcf7 form.cform .wpcf7-response-output{ margin:24px 0 0; padding:14px 18px; border-radius:8px; font-size:15px; }
.wpcf7 form.cform .wpcf7-spinner{ display:block; margin:12px auto 0; }
.wpcf7 form.cform .agree .wpcf7-list-item{ margin:0; }
.cform-empty{ text-align:center; color:var(--color-text-sub); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
.wpcf7 form.cform textarea{ height:180px; }
.wpcf7 form.cform .agree label{ display:inline-flex; align-items:center; gap:10px; }
/* お知らせ一覧の中のチップは、記事リンク用の .news li a の指定を打ち消す */
.news .fchips li a{ display:inline-flex; gap:0; min-height:44px; padding:4px 22px; }
.news .fchips li a:hover{ background:var(--color-white); border-color:var(--color-accent); }
.news .fchips li a.is-on,.news .fchips li a.is-on:hover{ background:var(--color-main); border-color:var(--color-main); color:var(--color-white); }
/* 記事の前後リンク：「一覧に戻る」を常に中央に置く */
@media (min-width:601px){
  .pn-nav{ display:grid; grid-template-columns:1fr auto 1fr; }
  .pn-nav .pn:last-child{ justify-self:end; }
}