/* ============================================================
   studio/ 配下14ページ 固有スタイル
   前提：svc-common.css（デザイントークン・header/footer/inst-card）を先に読む
   事業2＝黒#000＋黄#FFEB3B／白ベース最大面積・黄はアクセント
   2026/07/16 旧 svc-studio-pages.css ＋ svc-shared-ui.css から移行
   ============================================================ */

/* ---------- ページヘッダー（講師一覧 .page-hero と同型） ---------- */
.page-hero{
  margin-top:var(--header-h);
  background:linear-gradient(180deg,var(--y50),#fff);
  padding:clamp(46px,7vw,80px) 0 clamp(30px,4vw,44px);
  text-align:center; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(rgba(249,168,37,.12) 1.4px, transparent 1.4px);
  background-size:22px 22px;
}
.page-hero .container{position:relative; z-index:1;}
.page-hero .lead{
  max-width:660px; margin:14px auto 0; font-size:clamp(13px,2vw,15px);
  font-weight:700; color:var(--g700); line-height:1.9;
}
.page-hero .lead em{background:linear-gradient(transparent 62%,var(--y300) 62%); font-weight:800; color:var(--ink);}

/* ---------- パンくず ---------- */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  margin-bottom:clamp(20px,3.4vw,30px);
  font-size:12px; font-weight:700; color:var(--label); line-height:1.7;
}
.crumb a{color:var(--g700); transition:color .2s ease;}
.crumb a:hover{color:var(--y800); text-decoration:underline; text-underline-offset:3px;}
.crumb .sep{color:var(--g200); font-weight:800;}
.crumb .here{color:var(--ink);}

/* ---------- セクション ---------- */
.studio-sec{padding:clamp(30px,5vw,52px) 0 clamp(56px,8vw,92px);}

/* ---------- スタジオカード一覧（.inst-card を流用） ---------- */
.studio-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:clamp(16px,2.6vw,26px);
}
/* 1枚のカードに導線が2本（アクセス／写真）並ぶ */
.studio-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;}
.studio-actions .more{margin-top:0;}
.more.ghost{
  background:#fff; border:1.5px solid var(--ink); color:var(--ink); box-shadow:none;
}
.more.ghost:hover{background:var(--y50);}

/* ---------- 詳細ページ本文 ---------- */
.studio-doc{max-width:820px; margin:0 auto;}

/* 最寄り駅・住所 */
.studio-facts{
  display:grid; grid-template-columns:1fr; gap:12px;
  margin-bottom:clamp(24px,4vw,36px);
}
@media (min-width:620px){.studio-facts{grid-template-columns:1fr 1fr;}}
.fact{
  background:#fff; border:1px solid var(--g200); border-radius:14px;
  padding:16px 18px; box-shadow:0 4px 14px rgba(26,26,26,.04);
}
.fact dt{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--y800); margin-bottom:6px;
}
.fact dt::before{content:""; width:14px; height:3px; background:var(--y500); border-radius:2px; flex:none;}
.fact dd{font-size:clamp(13px,1.9vw,14.5px); font-weight:700; color:var(--g800); line-height:1.8;}

/* 相互導線（アクセス⇄ギャラリー） */
.studio-cta{margin-bottom:clamp(24px,4vw,34px);}
.studio-cta .btn{padding:.8em 2em;}

/* CMS本文（studio.json の localBody。既存クラス名を維持） */
.studio-rich{display:grid; gap:clamp(16px,2.6vw,24px);}
.studio-rich p{
  font-size:clamp(13.5px,2vw,15px); color:var(--g800); line-height:1.95; font-weight:600;
}
.studio-rich a{color:var(--info); text-decoration:underline; text-underline-offset:3px; font-weight:700;}
.studio-rich figure,
.studio-rich .svc-studio-figure{margin:0;}
.studio-rich img{
  width:100%; max-height:760px; object-fit:contain;
  border-radius:var(--radius); background:var(--g100); box-shadow:var(--shadow);
}
.studio-rich .svc-map{
  overflow:hidden; border-radius:var(--radius); background:var(--g100); box-shadow:var(--shadow);
}
.studio-rich iframe{
  display:block; width:100%; aspect-ratio:16/9; height:auto; border:0;
}
/* 「道に迷ったらLINEで連絡する」 */
.studio-rich .svc-line-help{
  display:flex; justify-content:center;
  background:var(--y50); border:1.4px solid var(--y300); border-radius:14px;
  padding:16px; text-align:center;
}
.studio-rich .svc-line-help a{
  display:inline-flex; align-items:center; gap:.55em;
  color:var(--ink); text-decoration:none; font-weight:800; font-size:clamp(13px,2vw,14.5px);
}
.studio-rich .svc-line-help a::before{
  content:""; width:1.3em; height:1.3em; flex:none;
  background:url("icon_line.webp") center/contain no-repeat; border-radius:4px;
}
.studio-rich .svc-line-help a:hover{text-decoration:underline; text-underline-offset:3px;}