/* =========================================================
   和心学院 桑名校  -  下層ページ共通スタイル
   ・sub-hero：全下層共通のページヒーロー
   ・style.css のデザイントークン・共通パーツを継承して拡張
   ========================================================= */

/* ---------- 共通コンテナ ---------- */
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--gutter);
}

/* 表示切替ヘルパー */
.sp-only{ display:none; }
@media (max-width:600px){ .sp-only{ display:inline; } }

/* 下層ページ：固定ヘッダーを白基調に */
.header,
.header.is-scrolled{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* =========================================================
   下層共通ヒーロー（sub-hero）
   ========================================================= */
.sub-hero{
  --header-offset: 30px;
  --hero-visual-w: min(46vw, 680px);
  --hero-visual-h: calc(var(--hero-visual-w) * 493 / 649);
  --content-w: 90%;
  --side: clamp(20px, 5.5vw, 120px);
  position:relative;
  background:#fff;
  padding-top:var(--header-offset);
  height:calc(var(--hero-visual-h) + var(--header-offset));
}

.sub-hero__visual{
  position:absolute;
  top:var(--header-offset);
  right:0;
  width:var(--hero-visual-w);
  z-index:0;
}

.sub-hero__pattern{
  display:block;
  width:100%;
  height:auto;
}

.sub-hero__note{
  position:absolute;
  right:clamp(12px, 2vw, 28px);
  bottom:8%;
  width:min(280px, 70%);
  font-size:13px;
  line-height:1.5;
  font-weight:400;
}

.sub-hero__content{
  position:absolute;
  top:var(--header-offset);
  right:0;
  bottom:0;
  left:0;
  z-index:1;
  display:grid;
  grid-template-rows:1fr auto;
  width:var(--content-w);
  max-width:var(--content-w);
  margin:0 auto;
  pointer-events:none;
}

.sub-hero__copy{
  align-self:center;
  margin-top:50px;
  pointer-events:auto;
}

.sub-hero__title{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:clamp(48px, 5.5vw, 60px);
  line-height:1.2;
  letter-spacing:.02em;
}

.sub-hero__sub{
  margin-top:4px;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
}

.sub-hero__breadcrumb{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 0 28px;
  font-size:13px;
  line-height:1.5;
  pointer-events:auto;
}

.sub-hero__breadcrumb a:hover{ color:var(--red); }

.sub-hero__breadcrumb-sep{
  width:6px;
  height:10px;
  background:var(--ink);
  clip-path:polygon(0 0,100% 50%,0 100%);
  opacity:.5;
}

/* 旧パンくず（ページ内で残存する場合用） */
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:"Poppins",sans-serif;
  font-size:12px; letter-spacing:.1em;
  margin-bottom:24px;
  opacity:.92;
}
.breadcrumb a{ transition:opacity .25s; }
.breadcrumb a:hover{ opacity:.7; text-decoration:underline; }
.breadcrumb span{ opacity:.7; }
.breadcrumb__current{ font-weight:600; opacity:1; }

/* =========================================================
   汎用セクション
   ・トップの幾何学モチーフを薄いテクスチャとして全面に踏襲
   ========================================================= */
.page-section{ position:relative; padding:clamp(64px,8vw,112px) 0; }

/* グレー背景：幾何学タイルをごく薄く敷く（青海波→幾何学へ刷新） */
.page-section--gray{
  position:relative; overflow:hidden;
  background-color:var(--gray-light);
}
.page-section--gray::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/common/wa-geo-tile.svg) repeat;
  background-size:150px 150px;
  opacity:.05;
}
.page-section--gray > *{ position:relative; z-index:1; }

/* 大きな幾何学パターンを“透かし”として配置するセクション（任意付与） */
.page-section--geo::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-90px; top:-60px; width:min(46vw,440px); aspect-ratio:710/556;
  background:url(../img/common/wa-geo.svg) center/contain no-repeat;
  opacity:.08;
}
.page-section--geo > *{ position:relative; z-index:1; }

/* リード文・本文 */
.lead{
  position:relative;
  font-size:clamp(18px,2.4vw,25px);
  font-weight:700; line-height:1.85; letter-spacing:.02em;
  margin-bottom:30px;
}
.lead .accent{ color:var(--red); }
.prose p{ font-size:16px; line-height:2; margin-bottom:20px; color:var(--ink-soft); }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:700; }

/* =========================================================
   セクション見出し（刷新）
   ・トップの「英字グリーンラベル＋太い和文」のリズムを踏襲
   ・赤×緑のアクセントバーをアンダーラインに
   ========================================================= */
.head-line-wrap{ position:relative; margin-bottom:clamp(34px,4.4vw,48px); }
.head-line__en{
  display:block;
  font-family:"Poppins",sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.22em; color:var(--green);
  text-transform:uppercase; margin-bottom:12px;
}
.head-line{
  display:block;
  font-size:clamp(24px,3.2vw,34px); font-weight:900;
  letter-spacing:.05em; line-height:1.4;
}
.head-line::after{
  content:""; display:block; width:56px; height:5px; margin-top:18px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--red) 0 62%, var(--green) 62% 100%);
}
.head-line__sub{
  font-size:14px; letter-spacing:.04em; color:var(--ink-soft);
  margin-top:16px; margin-bottom:0;
}

/* 縦書き和テイストの見出し（任意で併用可） */
.heading-jp{ display:flex; gap:16px; align-items:flex-start; margin-bottom:36px; }
.heading-jp__en{
  writing-mode:vertical-rl;
  font-family:"Poppins",sans-serif; font-size:12px; letter-spacing:.3em;
  color:var(--green); font-weight:600; margin-top:4px;
}
.heading-jp__jp{
  writing-mode:vertical-rl;
  font-size:clamp(30px,4vw,42px); font-weight:900; letter-spacing:.22em; line-height:1;
}

/* 中央帯見出し（情報セクションの区切り）※幾何チップで刷新 */
.section-band{
  position:relative; overflow:hidden;
  background:var(--pink-light);
  padding:36px var(--gutter); text-align:center;
}
.section-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/common/wa-geo-tile.svg) repeat;
  background-size:120px 120px; opacity:.06;
}
.section-band__title{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:22px;
  font-size:clamp(19px,2.6vw,28px); font-weight:900;
  letter-spacing:.08em; color:var(--ink);
}
.section-band__title::before,
.section-band__title::after{
  content:""; width:30px; height:30px; flex:none;
  background:url(../img/common/wa-geo-tile.svg) center/contain no-repeat;
}
.section-band__title::after{ transform:scaleX(-1); }

/* =========================================================
   2カラム（テキスト＋画像）和の額縁付き
   ========================================================= */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px); align-items:center;
}
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{
  width:100%; border-radius:6px; display:block;
  box-shadow:0 22px 50px rgba(0,0,0,.12);
}
/* コーナーブラケット（緑＋赤） */
.split__media::before{
  content:""; position:absolute; top:-14px; left:-14px;
  width:54px; height:54px; z-index:2;
  border-top:3px solid var(--green); border-left:3px solid var(--green);
}
.split__media::after{
  content:""; position:absolute; bottom:-14px; right:-14px;
  width:54px; height:54px; z-index:2;
  border-bottom:3px solid var(--red); border-right:3px solid var(--red);
}
.split__title{ font-size:clamp(22px,3vw,30px); font-weight:900; margin-bottom:22px; line-height:1.5; }
.split__title .en{
  display:block; font-family:"Poppins",sans-serif; font-size:12px;
  letter-spacing:.2em; color:var(--green); font-weight:600; margin-bottom:8px;
}
.split + .split{ margin-top:clamp(50px,7vw,96px); }

/* =========================================================
   特徴・情報カード（3カラム）※トップの card 意匠を踏襲
   ========================================================= */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.feature{
  position:relative; overflow:hidden;
  background:var(--white);
  border-top:4px solid var(--green);
  padding:40px 30px;
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature::after{
  content:""; position:absolute; right:-34px; top:-34px;
  width:96px; height:96px; border-radius:50%;
  background:rgba(13,138,70,.06);
  transition:transform .5s var(--ease);
}
.feature:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,.12); }
.feature:hover::after{ transform:scale(1.5); }
.feature > *{ position:relative; z-index:1; }
.feature__icon{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:20px;
  background:rgba(195,13,35,.08); color:var(--red);
  font-size:26px; font-family:"Noto Sans JP",sans-serif; font-weight:900;
  box-shadow:inset 0 0 0 2px rgba(195,13,35,.2);
}
.feature__title{ font-size:17px; font-weight:700; margin-bottom:14px; line-height:1.6; }
.feature__text{ font-size:13px; color:var(--ink-soft); line-height:1.95; }

/* =========================================================
   定義テーブル（会社概要・アクセス・学費など）
   ========================================================= */
.spec-table{ width:100%; border-collapse:collapse; font-size:15px; }
.spec-table th,
.spec-table td{
  text-align:left; padding:22px 4px 22px 20px; border-bottom:1px solid #e4e4e4;
  vertical-align:top; line-height:1.9;
}
.spec-table th{
  width:30%; font-weight:700; color:var(--ink); white-space:nowrap; position:relative;
}
.spec-table th::before{
  content:""; position:absolute; left:0; top:28px;
  width:9px; height:9px; background:var(--green); border-radius:2px;
}
.spec-table td{ color:var(--ink-soft); padding-left:8px; }
.spec-table tr:first-child th,
.spec-table tr:first-child td{ border-top:1px solid #e4e4e4; }
.spec-table tr{ transition:background .2s var(--ease); }
.spec-table tbody tr:hover td,
.spec-table tr:hover td{ background:#fafafa; }
.spec-table .price{ font-family:"Poppins",sans-serif; font-weight:700; color:var(--red); font-size:18px; }

/* =========================================================
   入学までの流れ（ステップ）
   ========================================================= */
.flow{ display:flex; flex-direction:column; gap:0; }
.flow__step{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:32px;
  padding:0 0 46px 0;
}
.flow__step:last-child{ padding-bottom:0; }
.flow__num{
  position:relative; z-index:1;
  width:66px; height:66px; border-radius:50%;
  background:var(--red); color:var(--white);
  display:grid; place-items:center;
  font-family:"Poppins",sans-serif; font-weight:700; font-size:22px;
  box-shadow:0 10px 24px rgba(195,13,35,.3), 0 0 0 6px rgba(195,13,35,.08);
}
.flow__step:not(:last-child) .flow__num::after{
  content:""; position:absolute; top:74px; left:50%; transform:translateX(-50%);
  width:2px; height:calc(100% - 8px); background:var(--pink);
}
.flow__body{
  align-self:center;
  background:var(--white); border-radius:12px;
  padding:22px 26px; box-shadow:0 8px 26px rgba(0,0,0,.05);
  border-left:3px solid var(--pink);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.flow__step:hover .flow__body{ transform:translateX(4px); box-shadow:0 14px 34px rgba(0,0,0,.1); }
.flow__step-en{
  font-family:"Poppins",sans-serif; font-size:11px; letter-spacing:.2em;
  color:var(--green); font-weight:600; display:block; margin-bottom:4px;
}
.flow__title{ font-size:19px; font-weight:700; margin-bottom:10px; }
.flow__text{ font-size:14px; color:var(--ink-soft); line-height:1.95; }

/* =========================================================
   タイムテーブル（学習コース）
   ========================================================= */
.timetable{ width:100%; border-collapse:collapse; font-size:14px; }
.timetable caption{ text-align:left; font-weight:700; margin-bottom:14px; font-size:16px; }
.timetable th,
.timetable td{ border:1px solid #e4e4e4; padding:16px 18px; text-align:left; }
.timetable thead th{ background:var(--red); color:var(--white); font-weight:700; letter-spacing:.04em; }
.timetable tbody th{
  background:var(--gray-light); font-family:"Poppins",sans-serif; white-space:nowrap; color:var(--ink);
}
.timetable td{ color:var(--ink-soft); line-height:1.8; }
.timetable .is-break{ background:#faf4f5; color:var(--red); font-weight:600; text-align:center; }

/* =========================================================
   データテーブル（複数列・横スクロール対応）
   ========================================================= */
.table-scroll{
  position:relative;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.grid-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
.grid-table th,
.grid-table td{
  border:1px solid #e4e4e4; padding:14px 12px; text-align:center;
  vertical-align:middle; line-height:1.7;
}
.grid-table thead th{
  background:linear-gradient(180deg,#fbe3e7,#f5ccd3);
  border-bottom:2px solid var(--red);
  font-weight:700; color:var(--ink); white-space:nowrap;
}
.grid-table tbody th{ background:#fbeef0; font-weight:700; white-space:nowrap; }
.grid-table tbody tr{ transition:background .2s var(--ease); }
.grid-table tbody tr:hover td{ background:#fdf4f5; }
.grid-table .num{ font-family:"Poppins",sans-serif; }
.grid-table .subtotal{ background:#fafafa; font-weight:700; }
.grid-table .total td,
.grid-table .total th{ background:#f4f4f4; font-weight:700; }
/* 左寄せ版（書類一覧など） */
.grid-table--left th,
.grid-table--left td{ text-align:left; }
.grid-table--left tbody th{ width:46px; text-align:center; white-space:normal; }
.grid-table--left .doc-name{ width:30%; }
.table-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; line-height:1.85; }
.table-note span{ display:block; }
/* スクロール可能ヒント（狭い画面のみ） */
.table-scroll::after{
  content:"← 横にスクロールできます →";
  display:none;
  font-size:11px; letter-spacing:.05em; color:var(--gray);
  text-align:center; padding:8px 0 0;
}

/* 文中の小見出し（書類区分など） */
.sub-label{
  position:relative; font-size:15px; font-weight:700; margin:36px 0 14px; padding-left:16px;
}
.sub-label::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:18px; border-radius:2px; background:var(--red);
}
.sub-label:first-child{ margin-top:0; }

/* =========================================================
   お問い合わせフォーム
   ========================================================= */
.form{ max-width:760px; margin:0 auto; }
.form__row{ margin-bottom:30px; }
.form__label{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; margin-bottom:12px; }
.form__req{
  font-size:11px; font-weight:700; letter-spacing:.05em;
  background:var(--red); color:#fff; padding:3px 10px; border-radius:3px;
}
.form__req--any{ background:var(--gray); }
.form__input,
.form__textarea,
.form__select{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  padding:15px 18px; border:1px solid #d6d6d6; border-radius:6px;
  background:var(--white); transition:border-color .25s, box-shadow .25s;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(195,13,35,.12);
}
.form__textarea{ min-height:170px; resize:vertical; }
.form__note{ font-size:12px; color:var(--gray); margin-top:8px; }
.form__agree{
  display:flex; align-items:flex-start; gap:10px; justify-content:center;
  font-size:14px; color:var(--ink-soft); margin:36px 0;
}
.form__agree input{ margin-top:5px; }
.form__agree a{ color:var(--red); text-decoration:underline; }
.form__submit{ text-align:center; }
.btn-submit{
  display:inline-flex; align-items:center; gap:16px;
  background:var(--red); color:#fff;
  font-family:"Poppins",sans-serif; font-weight:600; letter-spacing:.12em; font-size:15px;
  padding:18px 52px; border-radius:50px;
  transition:.35s var(--ease);
}
.btn-submit:hover{ background:var(--red-dark); transform:translateY(-3px); box-shadow:0 14px 30px rgba(195,13,35,.3); }
.btn-submit__circle{
  width:34px; height:34px; border:1px solid rgba(255,255,255,.7); border-radius:50%;
  display:grid; place-items:center; font-size:14px;
}

/* =========================================================
   アクセス（地図）
   ========================================================= */
.map-wrap{
  position:relative; width:100%; aspect-ratio:16/8;
  border-radius:8px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.12);
}
.map-wrap iframe{ width:100%; height:100%; border:0; display:block; }

.access-ways{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:40px; }
.access-way{
  display:flex; gap:18px; align-items:flex-start; padding:26px;
  background:var(--white); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.access-way:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.1); }
.access-way__mark{ font-size:26px; }
.access-way__title{ font-size:16px; font-weight:700; margin-bottom:6px; }
.access-way__text{ font-size:13px; color:var(--ink-soft); line-height:1.9; }

/* =========================================================
   ニュース一覧（タグ絞り込み・ページネーション）
   ========================================================= */
.news-filter{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.news-filter__btn{
  font-size:13px; font-weight:600; letter-spacing:.04em;
  padding:9px 22px; border:1px solid #ddd; border-radius:50px;
  color:var(--ink-soft); transition:.25s var(--ease);
}
.news-filter__btn.is-active,
.news-filter__btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }

.pagination{ display:flex; justify-content:center; gap:10px; margin-top:54px; }
.pagination a,
.pagination span{
  min-width:46px; height:46px; padding:0 6px;
  display:grid; place-items:center;
  font-family:"Poppins",sans-serif; font-size:14px; border-radius:50%;
  border:1px solid #ddd; transition:.25s var(--ease);
}
.pagination a:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.pagination .is-current{ background:var(--red); border-color:var(--red); color:#fff; }

/* =========================================================
   下部CTA（お問い合わせ誘導）※トップの contact 意匠を踏襲
   ・赤背景に幾何学パターンを重ねる
   ========================================================= */
.sub-cta{
  position:relative; overflow:hidden;
  background:var(--red-dark); color:#fff; text-align:center;
  padding:clamp(64px,8vw,104px) var(--gutter);
}
/* ブランドの幾何学パターンを「織り地」として全面に均一に敷く（トップの意匠を踏襲した単一の背景） */
.sub-cta::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/common/wa-geo-tile.svg) repeat;
  background-size:128px 128px;
  opacity:.1;
}
.sub-cta > *{ position:relative; z-index:1; }
.sub-cta__en{ font-family:"Poppins",sans-serif; font-size:13px; letter-spacing:.2em; opacity:.85; }
.sub-cta__title{ font-size:clamp(24px,3.4vw,34px); font-weight:900; margin:12px 0 16px; }
.sub-cta__text{ font-size:15px; opacity:.92; margin-bottom:34px; line-height:1.9; }
.sub-cta .btn-more{ color:#fff; }
.sub-cta .btn-more__circle{ border-color:#fff; }
.sub-cta .btn-more:hover .btn-more__circle{ background:#fff; color:var(--red); }

/* =========================================================
   注記ボックス・チェックリスト
   ========================================================= */
.note-box{
  background:var(--gray-light); border-left:4px solid var(--green);
  padding:22px 26px; border-radius:0 6px 6px 0; margin-top:30px;
}
.note-box p{ font-size:13px; color:var(--ink-soft); line-height:1.9; }

.check-list{ display:flex; flex-direction:column; gap:14px; }
.check-list li{
  position:relative; padding:15px 18px 15px 48px;
  background:#fafafa; border-left:3px solid var(--green); border-radius:0 8px 8px 0;
  font-size:15px; line-height:1.8;
}
.check-list li::before{
  content:"✓"; position:absolute; left:15px; top:15px;
  width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff;
  font-size:12px; display:grid; place-items:center;
}

/* =========================================================
   校長メッセージ
   ========================================================= */
.message{
  display:grid; grid-template-columns:240px 1fr; gap:clamp(30px,4vw,60px);
  align-items:start;
}
.message__person{ text-align:center; }
.message__avatar{
  width:150px; height:150px; margin:0 auto 18px;
  border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center;
  font-size:64px; font-weight:900;
  box-shadow:0 16px 36px rgba(195,13,35,.28);
  overflow:hidden;
}
.message__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.message__name{ font-size:22px; font-weight:900; letter-spacing:.06em; }
.message__role{ font-family:"Poppins",sans-serif; font-size:12px; color:var(--gray); margin-top:6px; letter-spacing:.06em; }
.message__title{
  font-size:clamp(19px,2.6vw,26px); font-weight:900; line-height:1.6;
  margin-bottom:22px; color:var(--red);
}

/* =========================================================
   沿革タイムライン
   ========================================================= */
.timeline{ position:relative; }
.timeline__item{
  position:relative;
  display:grid; grid-template-columns:130px 1fr; gap:30px;
  padding:0 0 36px 36px;
  border-left:3px solid var(--pink);
}
.timeline__item:last-child{ padding-bottom:4px; }
.timeline__item::before{
  content:""; position:absolute; left:-10px; top:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--red); border:3px solid #fff; box-shadow:0 0 0 1px var(--red);
}
.timeline__item:last-child::before{ background:var(--green); box-shadow:0 0 0 1px var(--green); }
.timeline__date{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:16px;
  color:var(--red); letter-spacing:.02em;
}
.timeline__item:last-child .timeline__date{ color:var(--green); }
.timeline__text{ font-size:14px; color:var(--ink-soft); line-height:1.95; }

/* =========================================================
   写真ギャラリー（3列・キャプション付き）
   ========================================================= */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.photo-grid figure{ margin:0; }
.photo-grid img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.photo-grid figure:hover img{ transform:translateY(-5px) scale(1.01); box-shadow:0 20px 44px rgba(0,0,0,.14); }
.photo-grid figcaption{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:12px; }
/* 画像プレースホルダー（実写真未配置の枠） */
.ph{
  display:grid; place-items:center;
  width:100%; aspect-ratio:4/3; border-radius:6px;
  background:#dcdcdc; box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.ph::after{
  content:""; width:46px; height:46px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ababab'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2M8.5 13.5l2.5 3 3.5-4.5 4.5 6H5z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3C/svg%3E");
}

/* =========================================================
   スクロール演出のカスケード（下層ページ用）
   ※ .reveal 本体は style.css 側で定義
   ========================================================= */
.feature-grid .feature:nth-child(2){ transition-delay:.1s; }
.feature-grid .feature:nth-child(3){ transition-delay:.2s; }
.photo-grid figure:nth-child(2){ transition-delay:.1s; }
.photo-grid figure:nth-child(3){ transition-delay:.2s; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:900px){
  .sub-hero{
    height:auto;
    min-height:0;
    overflow:visible;
    padding:120px var(--side) 0;
    display:flex;
    flex-direction:column;
  }
  .sub-hero__visual{
    position:relative;
    top:auto;
    right:auto;
    order:2;
    width:min(100%, 420px);
    margin:0 auto 16px;
  }
  .sub-hero__content{
    position:static;
    inset:auto;
    width:100%;
    max-width:none;
    margin:0;
    display:contents;
  }
  .sub-hero__copy{
    order:1;
    align-self:auto;
    margin-top:0;
  }
  .sub-hero__note{
    position:static;
    width:auto;
    margin-top:12px;
  }
  .sub-hero__breadcrumb{
    order:3;
    padding:20px 0 28px;
  }
  .photo-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .timeline__item{ grid-template-columns:96px 1fr; gap:16px; }
  .message{ grid-template-columns:1fr; gap:30px; }
  .message__avatar{ width:120px; height:120px; font-size:52px; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split--reverse .split__media{ order:0; }
  .feature-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .access-ways{ grid-template-columns:1fr; }
  /* 狭い画面ではテキストの可読性優先で織り地を控えめに */
  .sub-cta::before{ opacity:.07; }
}
@media (max-width:720px){
  .spec-table th{ width:34%; }
  .flow__step{ grid-template-columns:auto 1fr; gap:20px; }
  .flow__num{ width:54px; height:54px; font-size:18px; }
  .flow__step:not(:last-child) .flow__num::after{ top:62px; }
  .timetable{ font-size:12.5px; }
  .timetable th, .timetable td{ padding:11px 10px; }
  .table-scroll::after{ display:block; }
}
@media (max-width:560px){
  .spec-table th{ display:block; width:100%; padding:18px 0 4px 20px; border-bottom:none; }
  .spec-table th::before{ top:22px; }
  .spec-table td{ display:block; width:100%; padding:4px 0 18px 8px; }
  .spec-table tr:first-child td{ border-top:none; }
  .split__media::before{ top:-8px; left:-8px; width:38px; height:38px; }
  .split__media::after{ bottom:-8px; right:-8px; width:38px; height:38px; }
  .section-band__title{ gap:14px; }
  .section-band__title::before,
  .section-band__title::after{ width:22px; height:22px; }
}

/* ===== ニュース詳細（WordPress single.php 用に追加） ===== */
.news-single{ max-width:880px; margin:0 auto; }
.news-single__head{ margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid #e5e5e5; }
.news-single__meta{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.news-single__title{ font-size:clamp(22px,3vw,30px); font-weight:700; line-height:1.6; }
.news-single__thumb{ margin-bottom:32px; }
.news-single__thumb img{ width:100%; height:auto; border-radius:8px; }
.news-single__body{ font-size:15px; line-height:2; color:var(--ink-soft); }
.news-single__body p{ margin-bottom:1.2em; }
.news-single__body img{ max-width:100%; height:auto; }
.news-single__back{ margin-top:48px; display:flex; justify-content:center; }
.news__empty{ text-align:center; padding:40px 0; color:var(--gray); }

/* CF7 のラッパー要素でフォーム部品の幅が崩れないように */
.wpcf7-form-control-wrap{ display:block; width:100%; }
.wpcf7-form .form__row{ margin-bottom:26px; }
.wpcf7-spinner{ display:block; margin:8px auto 0; }
