/* --- 基本設定 --- */
:root {
  --primary: #004d80;       /* 信頼感のある濃い青 */
  --accent: #d9534f;        /* アクセント（合格などの強調） */
  --bg-body: #f4f7f9;       /* 淡いグレーの背景 */
  --bg-card: #ffffff;
  --text-main: #333333;
  --text-muted: #666666;
  --muted: #666666;
  --line: #e0e0e0;
  --radius: 8px;            /* 角丸のサイズ */
  --shadow: 0 4px 6px rgba(0,0,0,0.05); /* ふんわりした影 */
  --header-h: 94px;        /* 固定ヘッダー高さ目安(PC) */
  --header-h-sp: 80px;      /* 固定ヘッダー高さ目安(SP) */
  --header-bg: rgba(255,255,255,0.84); /* ガラス背景 */
  --header-blur: 10px;      /* ガラスぼかし */
  --header-shadow: 0 2px 14px rgba(0,0,0,0.08);
}

body{
  margin: 0;
  padding-top: var(--header-h);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
}



/* --- iOS 横ズレ（バウンス）対策 --- */
html, body{
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* 縦スクロール優先 */
body, main{
  touch-action: pan-y;
}

/* 横スクロール領域（表など）だけ横パン許可 */
div[style*="overflow-x:auto"], .scroll-x{
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
a {
  color: var(--primary);
  text-decoration: none;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}




/* --- 固定ヘッダー環境：ページ先頭の余白ゆらぎ対策 --- */
/* 先頭要素の margin-top がページごとに異なると、body の padding-top に上乗せされて「下がり過ぎ」になる */
main,
.main{
  display: flow-root; /* margin collapse を抑止 */
}

main > :first-child,
.main > :first-child{
  margin-top: 0 !important;
}

/* 先頭がラッパ要素（div/section等）で、その内側に見出しが来るケースの保険 */
main > :first-child > :first-child,
.main > :first-child > :first-child{
  margin-top: 0 !important;
}

/* --- カード無しで見出し・文章から始まるページの先頭余白補正 --- */
/* main直下にテキスト要素が来るページだけ余白が大きくなる問題を解消 */
main > h1:first-child,
main > h2:first-child,
main > h3:first-child,
main > p:first-child,
main > ul:first-child,
main > ol:first-child,
.main > h1:first-child,
.main > h2:first-child,
.main > h3:first-child,
.main > p:first-child,
.main > ul:first-child,
.main > ol:first-child{
  margin-top: 0 !important;
}

/* (1b) カードなしで本文が始まるページの先頭余白をさらに詰める */
.main .hero > :first-child{ margin-top:0 !important; }
.main .page-head{ margin-top:0 !important; }
.main .page-head > :first-child{ margin-top:0 !important; }



/* --- カード内の先頭余白ゆらぎ対策 --- */
/* .card の先頭要素（見出し等）のデフォルト margin-top が残ると、カード上部がページごとに広く見える */
.card > :first-child{
  margin-top: 0 !important;
}
/* 先頭がラッパ要素の場合の保険 */
.card > :first-child > :first-child{
  margin-top: 0 !important;
}

/* --- レイアウト共通 --- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.main {
  padding: 12px 0;
}

/* wrap（既存互換） */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- ヘッダー --- */
.header {
  background: var(--header-bg);
  border-bottom: 1px solid rgba(224,224,224,0.65);
  padding: 4px 0;
  box-shadow: var(--header-shadow);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* スマホで折り返し */
  gap: 15px;
}

/* 固定ヘッダー分のオフセット */
html { scroll-padding-top: var(--header-h); }

@media (max-width: 768px){
  body{ padding-top: var(--header-h-sp); }
  html{ scroll-padding-top: var(--header-h-sp); }
}

.brand .title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary);
}

.nav {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

/* --- カード（白い枠） --- */
.card {
  background: var(--bg-card);
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: 100%; /* 高さ揃え */
  box-sizing: border-box;
}

.card h1, .card h2 {
  color: var(--primary);
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* 既存の小さな注記 */
.note {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --- グリッドシステム --- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.span7 { grid-column: span 7; }
.span6 { grid-column: span 6; }
.span5 { grid-column: span 5; }

/* スマホ対応：画面が狭いときは1列にする */
@media (max-width: 768px) {
  .grid { display: flex; flex-direction: column; }
  .nav { flex-direction: column; gap: 10px; width: 100%; }
  .header .container { flex-direction: column; align-items: flex-start; }
}

/* --- ボタン --- */
.pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 0.9rem;
  box-shadow: 0 4px 6px rgba(0,77,128, 0.2);
  transition: transform 0.2s, background 0.2s;
}

.btn:hover {
  background: #003355;
  color: #fff;
  opacity: 1;
  transform: translateY(-2px);
}

/* --- ボタン（控えめ） --- */
.btn-secondary{
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
}

.btn-secondary:hover{
  background: #eaf1ff;
  color: var(--primary);
  border-color: var(--primary);
}

/* --- ページ末尾CTA --- */
.cta-bottom{
  justify-content: center;
  margin-top: 6px;
}

/* --- テーブル（合格実績など） --- */
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: #f9f9f9;
  font-weight: bold;
  color: var(--primary);
}

tr:last-child td {
  border-bottom: none !important;
}

/* --- フッター --- */
.footer {
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;
}

/* --- スライダー簡易CSS（JS動作前でも崩れないように） --- */
.slider {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}
.slider img {
  width: 100%;
  height: auto;
  display: block;
}


/* --- st-joseph風：右上2ボタン（青系）＋オーバーレイ --- */
.brand-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}


.brand-logo{
  height: 36px; /* PC */
  width: auto;
  display:block;
}
.brand-link:hover{ opacity:1; }

.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.subtitle{
  color:var(--muted);
  font-size:0.8rem;
}

.header-actions{
  display:flex;
  gap:10px;
  align-items:center;
   transform: translateY(-4px);
}

.iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--primary);
  font-weight:700;
  font-size:0.9rem;
  text-decoration:none;
}

.iconbtn:hover{
  opacity:1;
  color:var(--accent);
}

/* オーバーレイ */
.menu-overlay{
  position: fixed;
  inset: 0;
  /* width/height を 100vw/100vh にしない（iOS横ズレ対策） */
background: rgba(0,0,0,0.08);
  display: none;
  z-index: 2500;
}

.menu-overlay.open{ display:block; }

.menu-panel{
  position: fixed;
  z-index: 2600;

  position: fixed;
  top: 0;
  right: 0;
  width: clamp(240px, 20vw, 300px);
  height: 100dvh;
  background: #fff;
  box-shadow: -10px 0 24px rgba(0,0,0,0.18);
  padding: 14px;
}
@media (max-width: 768px){
  .menu-panel{
  position: fixed;
  z-index: 2600;

    width: 52vw;   /* スマホは広め */
  }
}
.menu-close{
  border:none;
  background:none;
  font-weight:800;
  color:var(--primary);
  cursor:pointer;
  padding:6px 0;   /* 10 → 6 */
  line-height:1.1; /* 無駄な高さを抑える */
  font-size: 14px;      /* 小さすぎ問題の補正 */
  letter-spacing: .02em;/* 少し締める */
  opacity: .85;         /* 主張しすぎない */
}
.menu-close:hover{ opacity: 1; }

.menu-links{
  margin-top:6px;
  display:flex;
  flex-direction:column;
}

.menu-links a{
  padding:10px 8px;
  border-bottom:1px solid #eef3f8;
  color:var(--primary);
  font-weight:700;
}

.menu-links a:hover{ color:var(--accent); }

@media (max-width: 768px){
  .nav{ display:none !important; }
}


/* --- ヘッダー（スマホ時）MENUボタンを右上・タイトル行に揃える上書き --- */
.header .container.header-row{
  flex-wrap: nowrap;
}

.header-actions{
  margin-left: auto;
}

/* 既存の .header .container のモバイル縦並び指定を打ち消す */
@media (max-width: 768px){
  .header .container.header-row{
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; /* タイトル先頭と同じ高さに寄せる */
  }
  .header-actions{
    align-self: flex-start;
    padding-top: 23px; /* 微調整：必要なら 0〜6px で調整 */
  }
}

/* --- FAQ mini accordion --- */
.faq-accordion details {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.faq-accordion details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-accordion summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--text-main);
  list-style: none;
}
.faq-accordion summary::-webkit-details-marker {
  display: none;
}
.faq-accordion summary::after {
  content: "＋";
  float: right;
  color: var(--text-muted);
}
.faq-accordion details[open] summary::after {
  content: "－";
}
.faq-body {
  margin-top: 10px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Back button styled like a text link (for stories detail pages) */
.backlinkbtn{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.backlinkbtn:focus{
  outline: 2px solid rgba(0,77,128,0.35);
  outline-offset: 3px;
}


/* Top page story accordion teaser (2-line clamp) */
.story-teaser{
  display:block;
  margin-top:0.35rem;
  font-size:0.95em;
  color:#555;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* Story accordion (top page): 2-row summary and plus icon on the second row right */
.story-accordion summary{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 0.45rem; /* this creates a "blank line" feel */
  align-items:start;
}
.story-accordion .story-title{
  grid-column: 1;
  grid-row: 1;
}
.story-accordion .story-teaser{
  grid-column: 1;
  grid-row: 2;
  margin-top: 0; /* handled by grid gap */
}
.story-accordion summary::after{
  float:none;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin-left: 12px;
}


/* --- 教室ページ共通 --- */
.section-title{
  margin: 0 0 10px 0;
  font-size: 1.35rem;
  color: var(--primary);
}

.breadcrumb{
  margin: 0 0 6px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb a{
  text-decoration: underline;
}

/* schools/index.html 専用（CSSへ集約） */
.findbar.findbar-schools{
  margin-top:12px;
  margin-bottom:20px;  
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.near-status{
  font-size:14px;
  color:var(--muted);
}

/* 学校一覧カード */
.grid.grid-schools .card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}
.grid.grid-schools .card-title{
  margin:0;
  font-size:1.2rem;
}
.grid.grid-schools .head-actions{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;          /* ← wrap をやめる */
  white-space:nowrap;
}
.grid.grid-schools .head-actions .btn{
  padding:8px 12px;
}

/* タイトル＆サムネをリンク化（見た目は維持） */
.grid.grid-schools .card-title-link{
  color: inherit;
  text-decoration: none;
}
.grid.grid-schools .card-title-link:hover{
  text-decoration: underline;
}
.grid.grid-schools .thumb-link{
  display:block;
  color: inherit;
  text-decoration: none;
}

/* サムネ */
.grid.grid-schools .thumb{ margin-top:10px; }


/* スマホ時はトリミングして高さを揃える */
@media (max-width: 640px){
  .grid.grid-schools .thumb{
    position: relative;
    height: 130px;
    overflow: hidden;
    border-radius: 12px;
  }

  .grid.grid-schools .thumb::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: 48px;
    pointer-events:none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  }
}


/* --- メニュー開時の背景制御（全ページ共通） --- */



body.menu-open header,
body.menu-open .header{
  filter: blur(1px);
  transition: filter .25s ease;
}

/* --- メニュー開時：ヘッダー＋メインのみブラー（メニュー自体は除外） --- */
body.menu-open header,
body.menu-open main {
  filter: blur(1px);
  transition: filter .25s ease;
}

body.menu-open #menuOverlay,
body.menu-open .menu-overlay,
body.menu-open .menu-panel {
  filter: none !important;
}

/* ===== card first heading normalize ===== */

/* カード先頭要素の余白リセット */
.card > :first-child{
  margin-top:0;
}

/* 見出しの場合だけ少し上へ寄せる */
.card > h1:first-child{
  margin-top:-16px;
}
/* ===== visual adjust (padding影響回避) ===== */

/* paddingの影響を受けず視覚位置だけ上げる */
.card > h1:first-child{
  transform: translateY(-10px);
}
/* ===== non-card page first heading normalize ===== */

.main > .container > h1:first-of-type{
  margin-top: 0;
  transform: translateY(-20px);
}
/* ===== Quick Schedule (トップ: 時間割をすぐ確認) : final override ===== */
.quick-schedule{ margin-top:16px; }

.quick-schedule .qs-row{
  display:grid;
  grid-template-columns: 1fr; /* SP/タブレットは縦積み */
  gap:10px;
  align-items:end;
}

.quick-schedule .qs-field label{
  display:block;
  font-size:12px;
  line-height:1.2;
  margin:0 0 6px 2px;
  opacity:.85;
}

.quick-schedule select{
  width:100%;
  font-size:16px; /* iOSズーム防止 */
  line-height:1.2;
  padding:10px 10px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
}

.quick-schedule select:disabled{
  opacity:.55;
  background:#f7f7f7;
}

/* PCでも縦積みを維持しつつ、入力しやすさだけ少し上げる */
@media (min-width: 981px){
  .quick-schedule .qs-row{
    grid-template-columns: 1fr;
    gap:12px;
  }
  .quick-schedule select{
    font-size:18px;
    padding:12px 14px;
    min-height:48px;
  }
  .quick-schedule select option{ font-size:18px; }
}

/* 結果エリア（常設） */
.quick-schedule .qs-result{
  margin-top:14px;
  padding:12px 12px;
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
}

.quick-schedule.is-empty .qs-result{ opacity:.75; }

.quick-schedule .qs-hint{
  font-size:13px;
  opacity:.8;
  margin:0;
}

.quick-schedule .qs-list{
  margin:0;
  padding:0;
  list-style:none;
}

.quick-schedule .qs-item + .qs-item{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #f0f0f0;
}

.quick-schedule .qs-title{
  font-weight:800;
  margin:0 0 6px 0;
}

.quick-schedule .qs-line{
  margin:0;
  font-size:14px;
  line-height:1.45;
}

.quick-schedule .qs-when{
  white-space:nowrap;
  margin-right:8px;
}

.quick-schedule .qs-none{
  margin:0;
  font-size:13px;
  opacity:.8;
}

/* ===== Quick Schedule : 結果ハイライト ===== */
#qs-result.qs-result-active{
  background-color:#e6f0ff;
  border-left: 4px solid #cfe4ff;
  padding-left: 10px;
  animation: qsPulse 3s ease forwards;
}
@keyframes qsPulse{
  0%   { background-color:#ffffff; }
  20%  { background-color:#cfe4ff; } /* 点灯 */
  40%  { background-color:#ffffff; }
  60%  { background-color:#cfe4ff; } /* 点灯 */
  100% { background-color:#e6f0ff; } /* 最終固定 */
}
/* ===== course-qs セクション区切り ===== */
.course-qs{
  border-top: 1px solid #e6e6e6;
  margin-top: 14px;
  padding-top: 14px;
}

/* ===== Courses Mini Schedule : 学年/教室 整列 ===== */
.course-qs__row{
  display:grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap:10px 12px;
  align-items:center;
}

.course-qs__row label{
  white-space:nowrap;
}

.course-qs__row select{
  width:100%;
  min-width:0;
}

/* 珠算科の固定表示だけに限定（推奨） */
.course-qs .qs-line{ padding-left:2em; }
.course-qs .qs-when{ display:inline-block; width:4.5em; }

/* ================================
   珠算科（そろばん） 固定表示 調整
   ※Quick Schedule（トップの .quick-schedule）には影響させない
================================ */
.course-acc__body > .course-qs{
  margin-top: -8px; /* 上を詰める（調整可） */
}

.course-qs__result .qs-line{
  padding-left: 2em; /* 行全体を2文字分右へ */
}

.course-qs__result .qs-when{
  display: inline-block;
  width: 4.5em; /* 「曜日：」「時間：」のラベル幅揃え */
}
/* 月謝： 2列（左=回数 / 右=金額を右寄せ） */
.qs-fee-grid{
  display:inline-grid;                 /* ← 重要：内容幅だけ。画面右端には伸びない */
  grid-template-columns:auto auto;
  column-gap:1.2em;
  row-gap:4px;
  align-items:baseline;
}

.qs-fee-price{
  text-align:right;                    /* 金額列だけ右揃え */
  white-space:nowrap;                  /* 改行で崩れない */
  font-variant-numeric: tabular-nums;  /* 数字の桁が揃って見やすい（対応ブラウザのみ） */
}

/* --- 珠算科 月謝（固定表示）: ラベル列 + 2列グリッドを安定させる --- */
.qs-line--fee{
  display:flex;
  align-items:flex-start;
  gap:.6em;
}

.qs-line--fee .qs-when{
  flex:0 0 4.5em; /* 既存のラベル幅に合わせる */
}
/* ===== Section Title Accent (A) ===== */
.section-title{
  position: relative;
  padding-bottom: 12px; /* 既存と近い値に */
  border-bottom: 1px solid rgba(0,0,0,.08); /* 薄い補助線 */
}

.section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 96px;          /* アクセントバーの長さ */
  height: 4px;          /* 太さ（華の源） */
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--primary, #1f5fbf),
    rgba(31,95,191,.35)
  );
}
.card-sakura{
  position: relative;
  overflow: hidden;
}

.card-sakura::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to left,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0.4) 70%,
      rgba(255,255,255,0.8) 100%
    ),
url("../img/sakura_bg.jpg") right center / cover no-repeat;  opacity: 0.2; /* 右端最大40% */
  z-index: 0;
}

.card-sakura > *{
  position: relative;
  z-index: 1;
}
.card-sakura h2,
.card-sakura p,
.card-sakura summary{
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}
/* 既に縁取りを付けたあとに追加（下に置く） */
.card-sakura a.btn,
.card-sakura a.btn *{
  text-shadow: none !important;
}
.card-trophy{
  position: relative;
  overflow: hidden;
}

/* =========================================
   Card Title Color System (index)
   - タイトル背景をカードごとに個別設定
========================================= */

.card-title-bar{
  padding: .65em .9em;
  border-radius: 8px;
  margin-bottom: .6em;
}

/* 導入コピー（h1） */
.title-lead{
  background: rgba(95,228,255,.20);
}

/* 個別色（h2） */
.title-results{   background: rgba(240,120,160,.10); } /* 合格実績 */
.title-test{      background: rgba(0,150,120,.08); } /* 定期テスト */
.title-grade{     background: rgba(120,90,200,.08); } /* 学年別案内 */
.title-schedule{  background: rgba(255,150,0,.10); } /* 時間割 */
.title-faq{       background: rgba(80,120,160,.08); } /* FAQ */
.title-story{     background: rgba(240,120,160,.10); } /* 合格体験談 */
.title-contact{   background: rgba(0,120,200,.08); } /* 資料請求 */

/* ===== index: moved inline styles (scoped) ===== */
.page-index #quick-schedule { text-align:left; }

.page-index #quick-schedule select {width:100%;max-width:100%;}

.page-index #quick-schedule label { text-align:left; }

.page-index #quick-schedule .grid { justify-items:start; }

@media (max-width: 900px){
  .page-index #quick-schedule .grid{ align-items:start; }
}

.page-index .btn-strong {
    background:#fff;
    color:var(--brand-color);
    border:2px solid var(--brand-color);
    font-weight:700;
  }

.page-index .btn-strong:hover {
    background:var(--brand-color);
    color:#fff;
  }

.page-index .pills .btn.btn-strong {
    background:#fff !important;
    color:#0B4F8A !important;
    border:3px solid #0B4F8A !important;
    font-weight:700;
  }

.page-index .pills .btn.btn-strong:hover, .page-index .pills .btn.btn-strong:active, .page-index .pills .btn.btn-strong:focus, .page-index .pills .btn.btn-strong:focus-visible {
    background:#f4f8fc !important;
    color:#0B4F8A !important;
    border:3px solid #0B4F8A !important;
    text-decoration:none !important;
  }

/* =========================================================
   index: Section titles (icon + underline) + title bars
   - scoped to .page-index to avoid side effects
   ========================================================= */
.page-index .section-title{
  display:flex;
  align-items:center;
  gap:.6em;
  line-height:1.2;
  position:relative;
  padding-bottom:.45em;
  letter-spacing:.02em;
}

.page-index .section-title .icon-wrap{
  width:1.7em;
  height:1.7em;
  min-width:1.7em;
  min-height:1.7em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:.55em;
  background:rgba(0,64,152,.06);
}

.page-index .section-title svg.icon{
  width:1.05em;
  height:1.05em;
  display:block;
  flex:0 0 auto;
  color:var(--brand-color);
}

.page-index .section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:2.2em;
  height:2px;
  background:var(--brand-color);
  border-radius:999px;
  opacity:.75;
}

/* タイトル帯（card-title-bar）適用時：アイコン枠を白に */
.page-index .section-title.card-title-bar .icon-wrap{
  background:#fff;
  border:1px solid rgba(11,79,138,.14);
}
/* =========================================================
   Contact modal polish
   ========================================================= */
#contactModal .modal-panel{
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  overflow:hidden;
}

#contactModal .modal-head{
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line);
}

#contactModal .modal-body{
  padding-top:14px;
}

#contactModal .modal-title{
  font-weight:700;
  letter-spacing:.02em;
}

#contactModal .pills{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

#contactModal .btn{
  border-radius:8px;
  padding:12px 16px;
  font-weight:600;
  transition:all .15s ease;
}

#contactModal .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,0,0,.15);
}

#contactModal .pills .btn:not(.btn-strong){
  background:#fff;
  color:var(--primary);
  border:1px solid rgba(0,77,128,0.35);
  box-shadow:none;
}

#contactModal .pills .btn:not(.btn-strong):hover{
  background:rgba(0,77,128,0.06);
}

#contactModal .pills .btn.btn-strong{
  background:var(--primary);
  color:#fff;
}

#contactModal .pills .btn.btn-strong:hover{
  background:#003b62;
}

#contactModal .note{
  font-size:.9rem;
  color:var(--muted);
  margin-top:10px;
  line-height:1.6;
}

/* ===============================
   Schools thumbnails: 4-corner rounding (SP/PC)
   =============================== */

/* サムネ枠そのものを角丸＋クリップする */
.grid.grid-schools .thumb{
  margin-top:10px;           /* 既存があればそのまま */
  position:relative;         /* ::after を使っているので必須 */
  overflow:hidden;           /* 角丸からはみ出す画像を切る */
  border-radius:12px;        /* 四隅すべて */
}

/* 画像もブロック化して隙間を無くす */
.grid.grid-schools .thumb-img{
  display:block;
  width:100%;
  height:auto;
}

/* もし別のCSSが thumb-img に角丸を部分指定していた場合の上書き（保険） */
.grid.grid-schools .thumb-img{
  border-radius:0;
}
.course-note-block{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.course-note-block__text{
  flex:1 1 auto;
  min-width:0;
  line-height:1.8;
}

.course-note-block__text p{
  margin:0;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

.course-note-block__illust{
  flex:0 0 auto;
  width:120px;
}

.course-note-block__illust img{
  display:block;
  width:100%;
  height:auto;
  opacity:.45;
}
/* ===== 本読みヒラメキ ===== */

.card-hirameki{
  position:relative;
  overflow:hidden;
}

/* 背景画像 + フェード */
.card-hirameki::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to left,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.5) 40%,
      rgba(255,255,255,0.85) 70%,
      rgba(255,255,255,1) 100%
    ),
    url("../img/honyomi_hira.png") right bottom / 90px auto no-repeat;

  opacity:.30;
  z-index:0;
}

/* 文字を前面に */
.card-hirameki > *{
  position:relative;
  z-index:1;
}

/* 文字の白縁 */
.card-hirameki p{
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}
.course-note-block__text{
  flex:1 1 auto;
  min-width:0;
  max-width:85%;   /* ←追加：2/3で折り返す */
  line-height:1.8;
}
.menu-divider{
  margin:14px 0;
  border-top:1px solid #eef3f8;
  opacity:.6;
}

/* -----------振り向きヒラメキ君セクション-------------*/

.card-hira_hurimuki{
  position: relative;
  overflow: hidden;
  padding-bottom: 24px;
}

.card-hira_hurimuki::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to left,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.40) 40%,
      rgba(255,255,255,0.80) 70%,
      rgba(255,255,255,1) 100%
    ),
    url("../img/hira_hurimuki.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100px auto;
  background-position: 0 0, right 10px bottom 15px;
  opacity: .30;
  z-index: 0;
  pointer-events: none;
}
.card-hira_hurimuki > *{
  position: relative;
  z-index: 1;
}
.card-hira_hurimuki .note-kicker{
  margin: 0 0 6px 0;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary);
}

.card-hira_hurimuki .note-title{
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.4;
  color: #4a4f8a;
}
.card-hira_hurimuki .note-body{
  margin: 0;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--muted);
}
.card-hira_hurimuki .course-note-block__text{
  max-width: 80%;
}

/* ===== ヒラメキくん歩きトップページ１枚目 ===== */
.card-hira-walk{
  position: relative;
  overflow: hidden;
}

.card-hira-walk::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to left,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.10) 32%,
      rgba(255,255,255,0.55) 62%,
      rgba(255,255,255,0.92) 100%
    ),
    url("../img/hira_walk.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 130px auto;
  background-position: 0 0, right 30px bottom 5px;
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
}

.card-hira-walk > *{
  position: relative;
  z-index: 1;
}
.card-hira-walk .lead-copy{
  max-width: calc(100% - 150px);
}
.card-hira-walk .lead-copy{
  max-width: calc(100% - 180px);
  margin-bottom: 0em;
}
.card-hira-walk .lead-copy{
  margin-left: 40px;
}

/* =========================================================
   Company page (consolidated)
   - company 関連の重複定義を統合
   - 旧構造 / 新構造の両方に対応
   ========================================================= */

.page-company .container{
  max-width:1100px;
}

.page-company .company-hero{
  margin-bottom:24px;
}

.page-company .company-lead{
  margin:0;
  font-size:1.02rem;
  line-height:1.9;
  color:var(--text-main);
}

.page-company .company-lead-sub{
  margin:8px 0 0;
}

.page-company .company-section{
  margin-top:26px;
}

.page-company .company-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

/* --- 新構造（company-profile-stack / photo-wrap） --- */
.page-company .company-profile-stack{
  display:grid;
  gap:20px;
}

.page-company .company-profile{
  overflow:hidden;
  border:1px solid rgba(30, 60, 120, 0.12);
  box-shadow:0 10px 28px rgba(20, 30, 60, 0.06);
}

.page-company .company-profile__head{
  padding:14px 20px;
  border-bottom:1px solid rgba(30, 60, 120, 0.10);
}

.page-company .company-profile--chairman .company-profile__head{
  background:linear-gradient(135deg, #eef2ff 0%, #e4ebff 100%);
}

.page-company .company-profile--president .company-profile__head{
  background:linear-gradient(135deg, #eaf7ef 0%, #dff1e7 100%);
}

.page-company .company-profile--principal .company-profile__head{
  background:linear-gradient(135deg, #e7f4ff 0%, #d8ecff 100%);
}

.page-company .company-profile__role{
  display:inline-block;
  font-weight:700;
  color:var(--primary);
  letter-spacing:.04em;
}

.page-company .company-profile__photo-wrap{
  border-radius:14px;
  overflow:hidden;
  background:#eef3f7;
  min-height:280px;
}

.page-company .company-profile__photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.page-company .company-role-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.page-company .company-role-chip{
  display:inline-flex;
  align-items:center;
  min-height:2.4em;
  padding:.45em .9em;
  border-radius:999px;
  background:rgba(120, 90, 200, .10);
  color:var(--primary);
  font-weight:800;
  line-height:1.2;
}

.page-company .company-role-chip--green{
  background:rgba(142, 178, 66, .18);
}

.page-company .company-role-chip--sub{
  background:rgba(142, 178, 66, .10);
}

/* --- 旧構造：PCでも画像を小さめ固定し、横に略歴 --- */
.page-company .company-profile__body{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  align-items:start;
  padding:22px;
}

.page-company figure.company-profile__photo{
  width:100%;
  max-width:180px;
  margin:0;
  justify-self:start;
  align-self:start;
  min-height:auto;
  aspect-ratio:auto;
  border-radius:14px;
  overflow:hidden;
  background:#f2f4f8;
}

.page-company figure.company-profile__photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center top;
}

.page-company .company-profile__content{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-self:start;
}

.page-company .company-profile__name{
  margin: 0 0 6px 0;
  line-height:1.3;
  color:var(--primary);
}

.page-company .company-profile__name span{
  font-size:.72em;
  color:var(--text-muted);
  font-weight:700;
}

.page-company .company-profile__meta{
  margin:6px 0 0;
  color:var(--muted, #5f6b7a);
  font-size:.98rem;
}

.page-company .company-profile__history{
  margin-top:12px;
}

.page-company .company-profile__history h4{
  margin:0 0 8px;
  font-size:1rem;
  color:var(--primary);
}

.page-company .company-profile__history ul{
  margin:0;
  padding-left:1.15em;
}

.page-company .company-profile__history li{
  margin:6px 0;
  line-height:1.7;
}

.page-company .company-profile__history p{
  margin-top:10px;
  line-height:1.8;
}

/* --- 新構造の経歴/情報 --- */
.page-company .company-career-list{
  margin:0;
  display:grid;
  gap:12px;
}

.page-company .company-career-item{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:16px;
  align-items:start;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#fbfcfd;
}

.page-company .company-career-item dt,
.page-company .company-career-item dd{
  margin:0;
}

.page-company .company-career-item dt{
  font-weight:800;
  color:var(--primary);
}

.page-company .company-career-item dd{
  font-size:1.02rem;
}

.page-company .company-career-item--sub dt{
  visibility:hidden;
}

.page-company .company-info-grid{
  align-items:start;
}

.page-company .company-info-card,
.page-company .company-info-side{
  height:auto;
}

.page-company .company-info-list{
  margin:0;
  display:grid;
  gap:0;
}

.page-company .company-info-row{
  display:grid;
  grid-template-columns:170px minmax(0, 1fr);
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}

.page-company .company-info-row:first-child{
  padding-top:0;
}

.page-company .company-info-row:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.page-company .company-info-row dt,
.page-company .company-info-row dd{
  margin:0;
}

.page-company .company-info-row dt{
  font-weight:800;
  color:var(--primary);
}

.page-company .company-info-inline{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  margin-top:10px;
}

.page-company .company-tel{
  font-weight:700;
}

.page-company .company-side-title{
  margin:0 0 14px;
  font-size:1.2rem;
  color:var(--primary);
}

.page-company .company-business-list{
  margin:0;
  padding-left:1.2em;
  line-height:1.95;
}

.page-company .company-business-list li + li{
  margin-top:4px;
}

.page-company .btn-small{
  padding:10px 14px;
  font-size:.92rem;
}

.page-company .btn-ghost{
  background:#fff;
  color:var(--primary);
  border:1px solid rgba(0,77,128,.22);
}

/* --- 旧構造の情報カード --- */
.page-company .company-info{
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border:1px solid rgba(30, 60, 120, 0.08);
  box-shadow:0 6px 20px rgba(20, 30, 60, 0.04);
}

.page-company .company-info__list{
  margin:0;
  padding:10px 0;
}

.page-company .company-info__row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:0;
  border-top:1px solid #e8edf5;
}

.page-company .company-info__row:first-child{
  border-top:none;
}

.page-company .company-info__row dt,
.page-company .company-info__row dd{
  margin:0;
  padding:18px 22px;
}

.page-company .company-info__row dt{
  background:#f7f9fd;
  color:var(--primary);
  font-weight:700;
}

.page-company .company-info__row dd{
  background:#fff;
  line-height:1.9;
}

.page-company .company-service{
  background:linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
  border:1px solid rgba(0,0,0,0.06);
}

.page-company .company-service__list{
  margin:0;
  padding:24px 28px 24px 46px;
}

.page-company .company-service__list li{
  margin:10px 0;
  line-height:1.9;
}

@media (max-width: 900px){
  .page-company .company-profile{
    grid-template-columns:1fr;
  }

  .page-company .company-profile__photo-wrap{
    min-height:240px;
  }

  .page-company .company-profile__photo{
    object-position:center top;
  }
}

@media (max-width: 860px){
  .page-company .company-profile__body{
    grid-template-columns:96px 1fr;
    gap:12px;
  }

  .page-company figure.company-profile__photo{
    max-width:96px;
    width:96px;
  }

  .page-company .company-profile__name{
    font-size:1.18rem;
  }

  .page-company .company-profile__meta{
    font-size:.92rem;
  }

  .page-company .company-profile__history{
    margin-top:8px;
  }

  .page-company .company-profile__history h4{
    margin-bottom:6px;
    font-size:.95rem;
  }

  .page-company .company-profile__history li{
    margin:4px 0;
    line-height:1.6;
    font-size:.94rem;
  }

  .page-company .company-profile__history p{
    margin-top:8px;
    font-size:.94rem;
    line-height:1.7;
  }

  .page-company .company-info__row,
  .page-company .company-info-row,
  .page-company .company-career-item{
    grid-template-columns:1fr;
    gap:8px;
  }

  .page-company .company-career-item--sub dt{
    display:none;
  }
}

@media (max-width: 768px){
  .page-company .company-profile__name{
    font-size:1.4rem;
  }

  .page-company .company-career-item,
  .page-company .company-info-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .page-company .company-career-item--sub dt{
    display:none;
  }
}
/* ロゴ隠しリンク */
.logo-wrap{
  position:relative;
  display:inline-block;
}

/* 「舘」の位置に透明リンク */
.logo-secret{
  position:absolute;
  right:2px;     /* 右端 */
  bottom:4px;    /* 下寄り */
  width:22px;
  height:22px;
  display:block;
}
.header-actions{
  display:flex;
  gap:10px;
  align-items:center;

  transform: translateY(-6px);
}




/* ==== Index card smartphone-width layout patch ==== */
.page-index .index-card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
}

.page-index .index-card-grid > .card,
.page-index .index-card-grid > article.card,
.page-index .index-card-grid > aside.card,
.page-index .index-card-grid > section.card{
  width:100%;
  min-width:0;
  max-width:none;
  margin-top:0 !important;
  grid-column:auto !important;
}

@media (min-width:768px){
  .page-index .index-card-grid{
    grid-template-columns:repeat(auto-fit, minmax(320px, 360px));
    justify-content:center;
  }

  .page-index .index-card-grid > .card,
  .page-index .index-card-grid > article.card,
  .page-index .index-card-grid > aside.card,
  .page-index .index-card-grid > section.card{
    width:100%;
    max-width:none;
  }

  .page-index .index-card-grid .span5,
  .page-index .index-card-grid .span6,
  .page-index .index-card-grid .span7{
    grid-column:auto !important;
    width:100% !important;
    max-width:none !important;
  }

  .page-index .index-card-grid .card-hira-walk .lead-copy{
    max-width:none;
    margin-left:0;
  }
}

@media (max-width:767px){
  .page-index .index-card-grid .card-hira-walk .lead-copy{
    max-width:calc(100% - 180px);
    margin-left:40px;
  }
}
/* schoolsページ タイトル調整 */
.hero h1{
  margin-top:0px;
  margin-bottom:-10px;
}
/* schoolsページ タイトル調整 */
.hero h1{
  margin-top:6px;
  margin-bottom:8px;
  color:var(--primary);
}

/* =========================================================
   Courses page cleanup patch (conservative)
   - inline style を class 化
   - 見た目は維持
   ========================================================= */
.page-courses .courses-intro{
  margin-top:8px;
}

.page-courses .courses-anchor-pills{
  margin-top:14px;
}

.page-courses .courses-divider{
  margin:26px 0;
  border:none;
  border-top:1px solid var(--line);
}

.page-courses .courses-divider--compact{
  margin:16px 0;
}

.page-courses .courses-divider--block{
  margin:26px;
}

.page-courses .courses-strong-lead{
  margin-top:0;
  font-weight:700;
}

.page-courses .courses-subhead{
  margin:0 0 8px 0;
}

.page-courses .courses-note-top{
  margin-top:12px;
}

.page-courses .course-qs--tight{
  margin-top:5px;
}

.page-courses .is-hidden{
  display:none;
}

.page-courses .courses-bottom-pills{
  margin-top:18px;
}

.page-courses .courses-footer-links{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.page-courses .courses-footer-link{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:700;
}

.page-courses .courses-contact-phone{
  margin-top:0;
}

.page-courses .courses-btn-icon-tel{
  width:1.3em;
  height:1.3em;
}


/* courses/index trial: hint above selectors */
.course-qs__hint{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* ===== company profile name + birth year inline patch ===== */
.page-company .company-profile__history > .company-profile__name{
  margin:0 0 8px;
}

.page-company .company-profile__history > .company-profile__name span{
  display:inline;
  margin-left:.5em;
  white-space:nowrap;
}
.school-card-grid .card{
  padding:40px;
}