/* ============================================================
 * 細大株式会社サイト — レスポンシブ統合CSS（全ページ共通）
 * RESPONSIVE_CHECKLIST.md A〜I + D'(改行ヘルパー) を一括実装
 * 既存CSSの後にロード（最後に読み込まれる前提）
 * ============================================================ */

/* === H. 基盤（最重要） === */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip は新しいスクロールコンテナを作らないため position:sticky が壊れない */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  /* 古いブラウザ用フォールバック（sticky破壊する代わりに body 全体に hidden） */
  html { overflow-x: hidden; }
  body { overflow-x: visible; }
}
img, video, svg { max-width: 100%; height: auto; }
/* 親が固定サイズの装飾画像（.circle 内など）にも保険的に効かせる */
.circle img, .circle_area img, [class*="illust"] img { max-width: 100% !important; height: auto !important; }
iframe { max-width: 100%; }
table { max-width: 100%; }

/* 下層FVヘッドラインの異常巨大化を抑制（saidai-base.css の clamp(48,8vw,110px) を上書き） */
.s-story-fv__hero { font-size: clamp(28px, 5.6vw, 72px) !important; line-height: 1.1 !important; }
@media (max-width: 599px) { .s-story-fv__hero { font-size: clamp(26px, 6.5vw, 38px) !important; } }

/* スクロール可能テーブルラッパー */
.table-scroll, .scroll-table {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 0 16px;
}
.table-scroll > table, .scroll-table > table { min-width: 600px; }

/* === D'. 改行位置ヘルパー === */
.br-pc, .br-tab, .br-sp, .br-pc-tab, .br-not-sp { display: none; }
@media (min-width: 1100px) { .br-pc, .br-pc-tab, .br-not-sp { display: inline; } }
@media (min-width: 600px) and (max-width: 1099px) { .br-tab, .br-pc-tab, .br-not-sp { display: inline; } }
@media (max-width: 599px) { .br-sp { display: inline; } }
.no-break { display: inline-block; white-space: nowrap; }

/* 禁則・自然な折返し */
h1, h2, h3, h4, .s-story-fv__hero, .s-hero__h1, [class*="title"], [class*="heading"], [class*="catch"] {
  text-wrap: pretty;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
}
p, li { text-wrap: pretty; }

/* === A. ヘッダー追加調整（page-header 全幅でレスポンシブ表示） === */
/* Tablet (600-1099px): コンパクト表示 */
@media (max-width: 1099px) {
  .page-header__inner { padding: 12px 16px !important; gap: 10px !important; }
  .page-header__logo img { height: 44px !important; }
  .page-header__nav { gap: 2px !important; }
  .page-header__nav .en { font-size: 12px !important; margin-bottom: 2px !important; }
  .page-header__nav .ja { font-size: 9px !important; padding: 1px 6px !important; }
  .page-header__tel { padding: 5px 10px !important; }
  .page-header__tel-label { display: none !important; }
  .page-header__tel-num { font-size: 12px !important; }
  .page-header__free { padding: 7px 10px !important; font-size: 11px !important; }
}
/* 小タブレット (600-839px): nav 非表示、ロゴ＋CTA のみ */
@media (max-width: 839px) {
  .page-header__nav { display: none !important; }
  .page-header__inner { grid-template-columns: auto 1fr !important; gap: 12px !important; }
  .page-header__cta { justify-self: end; }
}
/* SP (<600px): 下層ページのみミニマル表示（TOPは saidai-sticky に任せる） */
@media (max-width: 599px) {
  body.is-subpage .page-header { display: block !important; }
  .page-header__inner { padding: 10px 14px !important; grid-template-columns: auto 1fr !important; gap: 8px !important; }
  .page-header__logo img { height: 32px !important; }
  .page-header__cta { gap: 6px !important; }
  .page-header__tel { padding: 4px 10px !important; }
  .page-header__tel-num { font-size: 11px !important; }
  .page-header__free { padding: 6px 10px !important; font-size: 10px !important; }
}

/* 下層ページではTOPのインラインCSS @media(max-width:840px){.page-header{display:none}} を打ち消す */
body.is-subpage .page-header { display: block !important; }

/* === B. メインビジュアル全般 === */
[class*="-mv"], [class*="-fv"], [class*="hero"], .mv, .fv {
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .s-story-fv__hero, .s-hero__h1 { font-size: clamp(28px, 6.5vw, 36px) !important; line-height: 1.35; }
  .s-story-fv__lead, .s-hero__lead { font-size: 14px !important; line-height: 1.85; }
}

/* === C. グリッド（共通カードレイアウト） === */
@media (max-width: 1099px) {
  .s-partners-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .s-products-grid, [class*="products-grid"], [class*="card-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
  .s-effect-grid, .s-feature-grid, .s-merit-grid, .s-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .s-partners-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .s-products-grid, [class*="products-grid"], [class*="card-grid"] { grid-template-columns: 1fr !important; gap: 16px !important; }
  .s-partner-card { padding: 16px 12px !important; min-height: 70px !important; }
  /* 効果・特徴・メリット系カードグリッドは SP 1列 */
  .s-effect-grid, .s-feature-grid, .s-merit-grid,
  .s-card-grid, [class*="-grid"]:not(.s-partners-grid) {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .s-effect-item, .s-feature-item, .s-merit-item {
    padding: 18px 16px !important;
  }
}

/* === D. タイポグラフィ（fluid type） === */
h1 { font-size: clamp(28px, 4.6vw, 56px); line-height: 1.3; }
h2 { font-size: clamp(22px, 3.4vw, 40px); line-height: 1.35; }
h3 { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4; }
@media (max-width: 599px) {
  body { font-size: 15px; line-height: 1.8; }
}

/* === E. ボタン / CTA === */
a[class*="btn"], button, [class*="__btn"], [class*="cta"] {
  min-height: 44px;
}
@media (max-width: 599px) {
  .s-cta, .cta-row, [class*="cta-row"], [class*="btn-row"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .s-cta > *, .cta-row > *, [class*="btn-row"] > * { width: 100% !important; text-align: center; }
}

/* === F. テーブル === */
@media (max-width: 599px) {
  /* スペック・比較表向け block変換 */
  table.spec-table tbody, table.spec-table tr, table.spec-table th, table.spec-table td {
    display: block; width: 100%;
  }
  table.spec-table th { background: #DFF6FD; padding: 8px 12px; font-size: 13px; }
  table.spec-table td { padding: 10px 12px; border-bottom: 1px solid #E0F2FE; }
  /* デフォルトテーブルは横スクロール */
  main table:not(.spec-table) {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* === G. フッター（TOP & 下層共通） === */
@media (max-width: 768px) {
  .footer .inr { grid-template-columns: 1fr !important; }
  .footer .inr > .footer-map { grid-column: 1 !important; grid-row: auto !important; }
  .footer .inr > .footer-map iframe { min-height: 280px !important; }
}

/* === I. ページ固有 === */

/* I-interview: 3名プロフィール（旧interviewページは削除済 — .s-interview__grid のみ残す） */
.s-interview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1099px) { .s-interview__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } }
@media (max-width: 767px) { .s-interview__grid { grid-template-columns: 1fr !important; gap: 20px !important; } }
.s-interview__profile-photo {
  width: 160px; height: 160px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
}
@media (max-width: 599px) {
  .s-interview__profile-photo { width: 130px; height: 130px; }
}

/* I-company: 会社概要 dt/dd */
@media (max-width: 599px) {
  dl.s-company-info, dl[class*="company-info"], .s-company__list {
    display: block !important;
  }
  dl.s-company-info dt, .s-company__list dt {
    display: block; width: 100% !important;
    background: #DFF6FD; padding: 8px 14px; font-weight: 700; font-size: 13px;
  }
  dl.s-company-info dd, .s-company__list dd {
    display: block; width: 100% !important;
    padding: 10px 14px 18px; margin: 0; font-size: 14px;
  }
}

/* I-water-test: フォーム */
@media (max-width: 767px) {
  form input, form select, form textarea, form button {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px; /* iOS自動ズーム回避 */
  }
  form .form-row, form .field-row, form .s-form__row {
    flex-direction: column !important;
    gap: 6px !important;
  }
  form label { display: block; margin-bottom: 4px; }
  /* .s-form の SP用padding縮小 */
  .s-form { padding: 18px !important; }
}
@media (max-width: 599px) {
  .s-form { padding: 14px !important; }
}

/* TOP 装飾画像の overflow 防止（視覚は overflow:hidden で隠れているが測定上） */
.news .circle, .news .circle img { max-width: 100% !important; }
/* news circle は top.css の元仕様（width:858px / right:-280px）を踏襲、
   recruitセクションへ張り出して上のバナー直下に密着 */
.news { overflow: visible !important; z-index: 30 !important; }
.recruit { overflow: visible !important; }
.news .circle { z-index: 50; top: -120px !important; }
/* SPでは切れた装飾丸が見苦しいので完全非表示 */
@media (max-width: 767px) {
  .news .circle, .news .circle_area { display: none !important; }
  /* 「最新情報はこちら」ボタンの低コントラスト解消 */
  .news .v_txt.frame-s_tit, .news .frame-s_tit, .news a .v_txt, .news .tit_area .v_txt {
    background: #0E5BA8 !important;
    color: #fff !important;
    border-color: #0E5BA8 !important;
  }
  .news .v_txt .border_txt, .news .frame-s_tit .border_txt {
    color: #fff !important;
  }
}

/* intro_curcle.svg は装飾用に意図的に2458pxで配置（親 overflow:hidden で隠れる）。原寸維持 */
/* 親が overflow:hidden になっていない場合の保険（newsはcircleが上のバナーに張り出すためvisible） */
.intro, .works, .voice { overflow: hidden; }
.intro .circle_area, .news .circle, .works .illust_area { overflow: hidden; }

/* I-qa: アコーディオン */
.s-qa__btn, [class*="qa-btn"], summary {
  min-height: 56px;
  display: flex; align-items: center;
  cursor: pointer;
}
@media (max-width: 599px) {
  .s-qa__q, [class*="qa-question"] { font-size: 15px; line-height: 1.6; padding-right: 36px; }
}

/* I-column: 記事一覧 */
.s-column-grid, [class*="column-grid"], [class*="article-grid"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1099px) { .s-column-grid, [class*="column-grid"] { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; } }
@media (max-width: 599px) { .s-column-grid, [class*="column-grid"] { grid-template-columns: 1fr !important; gap: 18px !important; } }

/* I-products: 個別ページ商品ヒーロー */
@media (max-width: 767px) {
  .s-product-hero, .s-product__hero {
    flex-direction: column !important;
    text-align: center;
    gap: 18px !important;
  }
  .s-product__hero img { max-width: 80% !important; margin: 0 auto; }
}

/* === コンテナ統一 === */
.s-section__inner, .s-container, [class*="container"] {
  max-width: 1200px; margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px;
}
@media (max-width: 599px) {
  .s-section__inner, .s-container, [class*="container"] {
    padding-left: 18px; padding-right: 18px;
  }
}

/* === セクションパディング === */
section { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
@media (max-width: 599px) {
  section { padding-top: 36px; padding-bottom: 36px; }
}

/* === SP: hover系を tap-highlight 抑制 === */
@media (hover: none) and (pointer: coarse) {
  a, button { -webkit-tap-highlight-color: rgba(9,119,210,0.15); }
  a:hover, button:hover { transform: none !important; }
}

/* === セーフティ: 危険な100vw使用を予防 === */
@media (max-width: 1099px) {
  [style*="100vw"] { max-width: 100% !important; }
}

/* === D'-自動制御: SP では見出し/リード内の <br> を無効化 === */
/* PC/Tabで読みやすい改行は維持しつつ、SPでは折り返しを自然に任せる */
@media (max-width: 599px) {
  h1 br, h2 br, h3 br, h4 br,
  .s-story-fv__hero br, .s-hero__h1 br,
  .s-section__lead br,
  .s-story-fv__lead br, .s-hero__lead br,
  p[class*="lead"] br, p[class*="catch"] br, p[class*="copy"] br,
  [class*="title"] br, [class*="heading"] br {
    display: none;
  }
  /* 住所・データ行は改行維持 */
  address br, dd br, .keep-br br { display: inline !important; }
}

/* PC でだけ表示する改行（タブレット以下では結合） */
@media (max-width: 1099px) {
  br.br-pc-only { display: none; }
}
/* SP のみで強制改行したい箇所 */
@media (min-width: 600px) {
  br.br-sp-only { display: none; }
}

/* === 商品名・ブランド名の改行禁止（自動適用）=== */
.product-name, .brand-name, [class*="product-name"], [class*="brand-name"] {
  display: inline-block;
  white-space: nowrap;
}

/* ============================================================
 * SP用 ハンバーガー & ドロワーメニュー
 * ============================================================ */

/* ハンバーガーボタン（SPのみ表示） */
.s-burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: transparent; border: 0;
  cursor: pointer;
  position: relative;
  z-index: 10001;
  flex-shrink: 0;
  justify-self: end;
}
.s-burger__bar,
.s-burger > .s-burger__bar,
.s-burger span.s-burger__bar,
button.s-burger > span.s-burger__bar {
  display: block !important;
  width: 26px !important; height: 2px !important;
  background: #0B3B5A !important;
  margin: 6px auto !important;
  border-radius: 2px !important;
  transition: transform .35s cubic-bezier(0.22,0.61,0.36,1), opacity .25s;
  transform-origin: center;
}
.s-burger.is-open .s-burger__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); background: #0977D2; }
.s-burger.is-open .s-burger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.s-burger.is-open .s-burger__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: #0977D2; }
.s-burger:hover .s-burger__bar { background: #0977D2; }

/* タブレット以下（<1100px）でハンバーガー表示、CTA非表示 */
@media (max-width: 1099px) {
  .s-burger { display: block !important; }
  .page-header__cta { display: none !important; }
  .page-header__nav { display: none !important; }
  .page-header__inner { grid-template-columns: 1fr auto !important; }
  /* TOPの<840px page-header非表示インラインCSSを打ち消し */
  .page-header { display: block !important; }
  /* TOPの追従ヘッダーはタブレット以下では不要 */
  .saidai-sticky { display: none !important; }
}

/* スクロールロック */
body.s-drawer-locked { overflow: hidden !important; }

/* ドロワー本体 */
.s-drawer {
  position: fixed; inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.s-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}

/* バックドロップ */
.s-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 59, 90, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  cursor: pointer;
}

/* パネル（右からスライドイン） */
.s-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: -16px 0 50px rgba(11, 59, 90, .25);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.s-drawer.is-open .s-drawer__panel { transform: translateX(0); }

/* ヘッダー部 */
.s-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #E0F2FE;
  background: linear-gradient(180deg, #F0F9FF, #fff);
  flex-shrink: 0;
}
.s-drawer__logo { line-height: 0; }
.s-drawer__logo img { height: 36px; width: auto; }
.s-drawer__close {
  width: 44px; height: 44px;
  background: transparent; border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border-radius: 50%;
  transition: background .2s;
}
.s-drawer__close:hover { background: #DFF6FD; }
.s-drawer__close span {
  display: block;
  position: absolute;
  width: 22px; height: 2px;
  background: #475569;
  border-radius: 2px;
  transition: background .2s;
}
.s-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.s-drawer__close span:nth-child(2) { transform: rotate(-45deg); }
.s-drawer__close:hover span { background: #0977D2; }

/* ナビゲーション */
.s-drawer__nav {
  flex: 1;
  padding: 6px 0;
  overflow-y: auto;
}
.s-drawer__link {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  text-decoration: none;
  color: #0B3B5A;
  border-bottom: 1px solid #F0F9FF;
  position: relative;
  transition: background .2s, padding-left .2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 64px;
}
.s-drawer__link:hover, .s-drawer__link:active {
  background: #F0F9FF;
  padding-left: 26px;
}
.s-drawer__link.is-current {
  background: linear-gradient(90deg, #DFF6FD 0%, transparent 70%);
}
.s-drawer__link.is-current::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #0977D2, #38BDF8);
}
.s-drawer__link.is-current .s-drawer__en { color: #034F6D; }

.s-drawer__icon {
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.s-drawer__text {
  display: flex; flex-direction: column; gap: 2px;
}
.s-drawer__en {
  font-family: 'Belanosima', 'Poppins', sans-serif;
  font-size: 17px; font-weight: 700;
  color: #0977D2;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.s-drawer__ja {
  font-size: 12px; color: #475569;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.s-drawer__arrow {
  font-size: 16px;
  color: #BAE6FD;
  transition: transform .25s, color .25s;
}
.s-drawer__link:hover .s-drawer__arrow { transform: translateX(4px); color: #0977D2; }

/* FREE TEST 強調リンク */
.s-drawer__link--accent {
  background: linear-gradient(90deg, #FEF3C7 0%, #FFFBEB 100%);
}
.s-drawer__link--accent .s-drawer__en { color: #C2410C; }
.s-drawer__badge {
  display: inline-block;
  padding: 4px 10px;
  background: #FACC15;
  color: #78350F;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(250, 204, 21, .35);
}

/* CTA セクション */
.s-drawer__cta {
  padding: 18px 18px 12px;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, #F0F9FF, #DFF6FD);
  border-top: 1px solid #BAE6FD;
  flex-shrink: 0;
}
.s-drawer__tel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid #0977D2;
  border-radius: 14px;
  text-decoration: none;
  color: #0B3B5A;
  transition: transform .2s, box-shadow .2s;
}
.s-drawer__tel:hover, .s-drawer__tel:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(9, 119, 210, .25);
}
.s-drawer__tel-icon {
  font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: #DFF6FD;
  border-radius: 50%;
}
.s-drawer__tel-body { display: flex; flex-direction: column; gap: 2px; }
.s-drawer__tel-label { font-size: 10px; color: #475569; letter-spacing: 0.06em; }
.s-drawer__tel-num {
  font-family: 'Belanosima', sans-serif;
  font-size: 22px; font-weight: 800;
  color: #0977D2;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.s-drawer__tel-hours { font-size: 10px; color: #64748B; }

.s-drawer__btn {
  display: block;
  padding: 16px;
  background: linear-gradient(135deg, #FACC15, #F59E0B);
  color: #0B3B5A !important;
  text-decoration: none;
  text-align: center;
  border-radius: 14px;
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 16px rgba(250, 204, 21, .35);
  transition: transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.s-drawer__btn:hover, .s-drawer__btn:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(250, 204, 21, .5);
}

.s-drawer__copy {
  text-align: center;
  font-size: 11px;
  color: #94A3B8;
  padding: 10px 0 18px;
  margin: 0;
  background: #DFF6FD;
}

/* デスクトップ（>=1100px）では完全非表示（保険） */
@media (min-width: 1100px) {
  .s-drawer, .s-burger { display: none !important; }
}

/* ============================================================
 * TOPページ専用 SP 最適化
 * SWELL由来テーマの巨大padding/余白をSPで圧縮
 * ============================================================ */
@media (max-width: 767px) {
  /* 巨大なセクションpaddingを圧縮 */
  .intro { padding-top: 60px !important; padding-bottom: 40px !important; }
  .works { padding-top: 50px !important; padding-bottom: 50px !important; }
  .news { padding-top: 50px !important; padding-bottom: 60px !important; }
  .recruit { padding-top: 50px !important; padding-bottom: 50px !important; }
  .voice { padding-top: 50px !important; padding-bottom: 50px !important; }
  .interview { padding-top: 50px !important; padding-bottom: 50px !important; }

  /* introの装飾circle_areaの高さ圧縮（rotating SVGを縮小） */
  .intro .circle_area { height: auto !important; min-height: 0 !important; position: relative !important; top: 0 !important; }
  .intro .circle_area h2 img { width: 200vw !important; left: -50vw !important; }
  .news .circle { width: 180px !important; right: -30px !important; top: -40px !important; }

  /* news セクションの巨大装飾を縮小 */
  .news .inr { width: 92% !important; }

  /* MV/FV テキストカラー強化（薄シアン→濃ブルー） */
  .fv .read_area, .mv .read_area, .fv h1, .mv h1, .fv .text, .mv .text {
    color: #034F6D !important;
  }
  .fv .accent, .mv .accent, .s-story-fv__hero .accent { color: #0977D2 !important; }

  /* footer link_list を縦積み */
  .footer .link_list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .footer .link_list > * {
    width: 100% !important;
    text-align: center;
    padding: 12px 14px !important;
  }
  /* footer info_area / logo_area もSP整列 */
  .footer .logo_area, .footer .info_area {
    text-align: center;
    margin: 12px auto !important;
  }

  /* MV内のキャッチコピー画像を可読サイズに */
  .fv .read_area img, .mv .read_area img { max-width: 92% !important; height: auto !important; }
}

/* ============================================================
 * TOP SP 個別修正（Image #2〜#8 対応）
 * ============================================================ */
@media (max-width: 767px) {
  /* #2 intro 説明テキスト: 中央寄せ→左寄せ + 空白圧縮 */
  .intro .text_area,
  .intro .text_area p,
  .intro .text_area h3,
  .intro .text_area .read,
  .intro .text_area .b_txt {
    text-align: left !important;
    /* #13 自然な日本語改行 */
    word-break: keep-all !important;
    line-break: strict !important;
    overflow-wrap: break-word !important;
    text-wrap: pretty !important;
    hanging-punctuation: allow-end;
  }
  .intro .text_area p {
    margin: 0 0 14px !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    line-height: 1.95 !important;
    letter-spacing: -0.01em;
  }
  .intro .text_area p br { display: none; }
  .intro .text_area h3 {
    margin: 18px 0 10px !important;
    padding: 0 4px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
  .intro .text_area > * + * { margin-top: 8px !important; }

  /* #3 「家族の毎日を、もっと豊かに」フキダシのはみ出し対策＋高さ縮小 */
  /* SWELLテーマの aspect-ratio + position:absolute を SP で無効化 */
  .works .-w1300 h2,
  .works .-w1300 h2.wk-tit,
  .works .-w1300 h2.tit,
  .works h2.wk-tit, .works h2.tit.wk-tit {
    position: static !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    margin: 0 auto 18px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }
  /* worksの inr -w1300 SPで巨大padding-topを縮小（transform/translateY解除） */
  .works .-w1300 {
    padding-top: 0 !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 5;
    transform: none !important;
    -webkit-transform: none !important;
    top: auto !important;
    width: auto !important;
  }
  .works .slide_area { margin-bottom: 0 !important; }
  /* #18 「浄水器の特徴」 wk-tit と 本体永久保証 inr-w1200 の隙間圧縮 */
  .works .-w1200 { margin-top: 0 !important; padding-top: 16px !important; }
  .works .wk-tit { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  .wk-tit > * { flex: 0 0 auto !important; }
  .wk-tit-01, .wk-tit-02, .wk-tit-03 {
    box-sizing: border-box !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    word-break: keep-all !important;
    line-break: strict !important;
    overflow-wrap: anywhere !important;
  }
  /* #14 wk-tit chips の UI 強化 */
  .wk-tit-01 {
    background: #fff !important;
    border: 1.5px solid #BAE6FD !important;
    color: #0977D2 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(11, 59, 90, 0.06);
    letter-spacing: 0.04em;
    position: relative;
  }
  .wk-tit-01::after {
    content: '';
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    filter: drop-shadow(0 2px 2px rgba(11,59,90,0.06));
  }
  .wk-tit-02 {
    background: linear-gradient(135deg, #0977D2, #034F6D) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    line-height: 1.4 !important;
    box-shadow: 0 8px 20px rgba(9, 119, 210, 0.28);
    letter-spacing: 0.02em;
  }
  .wk-tit-03 {
    color: #034F6D !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em;
    margin-top: 8px !important;
    padding-bottom: 14px !important;
    position: relative;
    text-shadow: 2px 3px 0 rgba(186, 230, 253, 0.55);
  }
  .wk-tit-03::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 4px;
    background: linear-gradient(90deg, #0977D2, #38BDF8);
    border-radius: 2px;
  }

  /* #15 「製品ラインナップ」付近の重複ラベル非表示 */
  .read_area .tit01, .read_area .tit02, .read_area .tit03,
  .read_area .iv-sub, .read_area .cate, .read_area .en-deco,
  .works .read_area > .label, .works .read_area > .deco { display: none !important; }
  /* swiperのカテゴリ重複ラベルを抑止 */
  .read_area:has(.iv-c-tit) > p:not(.b_txt):not([class]),
  .read_area:has(.iv-c-tit) > span:not(.iv-c-tit) {
    display: none !important;
  }

  /* #4/#17 「製品ラインナップ」見出し vs 「ウェルモア WELLMORE」ラベル の重なり */
  /* SWELLテーマで .read_area が .interview/.works/.voice 等にあるため幅広く対応 */
  .read_area:has(.iv-c-tit) {
    padding: 24px 18px !important;
    position: relative;
    z-index: 50 !important;
    background: #fff !important;
    border-radius: 18px;
    margin: 60px 16px 0 !important;
    box-shadow: 0 12px 32px rgba(11,59,90,.12);
    isolation: isolate;
  }
  /* 商品画像と白枠を完全分離 — 画像の下に余白を入れる */
  .interview > .inr,
  .voice > .inr,
  .works > .inr {
    position: relative;
    z-index: 1 !important;
  }
  .read_area .iv-c-tit, .read_area h4.iv-c-tit, body .iv-c-tit {
    color: #034F6D !important;
    text-shadow: none !important;
    margin: 0 0 10px !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    -webkit-text-stroke: 0 !important;
  }
  .read_area .b_txt {
    font-size: 14px !important;
    line-height: 1.85 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 8px 0 14px !important;
  }
  /* 製品スライドの上に被さらない */
  .slide_box, .slides {
    position: relative !important; z-index: 1 !important;
  }

  /* #5 斜め帯（slide_area）の文字小さすぎ問題 — 拡大or可視化 */
  /* すべてのslide_areaにoverflow:hidden（ラベルが下にはみ出るのを防ぐ） */
  .works .slide_area, .recruit .slide_area, .voice .slide_area, .interview .slide_area, .slide_area {
    font-size: 16px !important;
    overflow: hidden !important;
  }
  /* swiper-slide内の text_area（カテゴリラベル）が下方にはみ出して下のカードと被る → SP非表示 */
  .interview .swiper-slide .text_area,
  .works .swiper-slide .text_area,
  .voice .swiper-slide .text_area,
  .recruit .swiper-slide .text_area,
  .slide_area .swiper-slide .text_area {
    display: none !important;
  }

  /* SP: 斜め帯（Free water test 画像）は完全非表示、余白も詰める */
  .recruit .text_deg, .recruit .text_deg.-rev { display: none !important; }
  .recruit { padding-top: 30px !important; padding-bottom: 20px !important; }
  /* news セクションの上余白も詰める（recruit との間） */
  .news { padding-top: 30px !important; padding-bottom: 30px !important; }
  /* interview と recruit の間も詰める */
  .interview { padding-bottom: 20px !important; }

  /* "Have a PURE Water Day!" 見出しが見切れる問題 */
  h2.iv-tit, .interview h2.iv-tit, .iv-tit {
    white-space: normal !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    padding: 0 12px !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .interview .tit_area { padding: 0 8px !important; }
}

/* PC/Tab: 斜め帯（Free water test 画像）の文字を拡大 */
@media (min-width: 768px) {
  .recruit .text_deg {
    height: 180px !important;
    padding-top: 50px !important;
    top: -100px !important;
  }
  .recruit .text_deg p img {
    width: 3070px !important;
    height: 88px !important;
    max-width: none !important;
  }
  .recruit .text_deg.-rev {
    bottom: -90px !important;
    height: 180px !important;
  }
  .works .slide_area p, .works .slide_area span,
  .recruit .slide_area p, .recruit .slide_area span,
  .voice .slide_area p, .voice .slide_area span {
    font-size: 18px !important;
    letter-spacing: 0.04em !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 767px) {
  /* ============================================================
   * SP用 フッター — 高可読性ダーク版
   * 紺青ベース + 大きめフォント + 適切なコントラスト
   * ============================================================ */
  .footer {
    background: linear-gradient(180deg, #0E5BA8 0%, #034F6D 50%, #0B3B5A 100%) !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
  }
  /* 上端の細いゴールドライン */
  .footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #FACC15 25%, #F59E0B 75%, transparent 100%);
    z-index: 1;
  }
  /* 装飾削除 */
  .footer::after { display: none !important; }

  .footer .w_bg {
    background: transparent !important;
    padding: 40px 22px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    position: relative;
    z-index: 2;
  }
  .footer .w_bg .inr {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 24px !important;
    width: 100% !important;
  }
  /* mapのPC用 grid-row 強制リセット */
  .footer .inr > .footer-map, .footer .w_bg .inr > .footer-map {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .footer .w_bg .inr > .lb_illust,
  .footer .w_bg .inr > .rt_illust,
  .footer .w_bg .inr > .bado,
  .footer .w_bg .inr > .circle_area,
  .footer .w_bg .inr > .top-bado,
  .footer > .lb_illust,
  .footer > .rt_illust,
  .footer > .bado,
  .footer > .circle_area { display: none !important; }

  /* === ブランドエリア（ロゴ＆住所、横中央寄せ） === */
  .footer .logo_area {
    background: transparent !important;
    padding: 0 !important;
    text-align: center !important;
    margin: 0 auto !important;
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
  }
  .footer .logo_area, .footer .logo_area * { text-align: center !important; }
  .footer .logo_area h2 {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    display: block !important;
  }
  .footer .logo_area h2 a {
    display: inline-block !important;
    margin: 0 auto !important;
  }
  .footer .logo_area p {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.04em !important;
    font-weight: 500 !important;
  }
  .footer .logo_area p, .footer .logo_area p * {
    color: rgba(255, 255, 255, 0.92) !important;
  }
  body .footer .logo_area p { color: rgba(255, 255, 255, 0.92) !important; }
  /* マップ位置: ロゴ＆住所→CTA の後、コピー前 */
  .footer .inr > .footer-map {
    order: 3 !important;
    margin: 6px 0 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }
  .footer .inr > .footer-map iframe { border-radius: 14px !important; }
  .footer .logo_area h2 {
    margin: 0 0 14px !important;
    line-height: 0;
  }
  .footer .logo_area h2 a img {
    max-height: 40px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.95;
  }
  .footer .logo_area p {
    font-size: 13px !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    letter-spacing: 0.04em;
    font-weight: 500;
  }

  /* === メインCTAエリア === */
  .footer .info_area {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    gap: 12px;
    margin: 0 auto !important;
    padding: 0 !important;
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
  }
  .footer .info_area .info {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 20px 18px !important;
    margin: 0 auto !important;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 1. 電話 — メインCTA（光る青） */
  .footer .info_area .info:nth-child(1) {
    background: linear-gradient(135deg, rgba(56,189,248,0.30), rgba(9,119,210,0.20)) !important;
    border: 1.5px solid rgba(56,189,248,0.5);
    box-shadow: 0 16px 38px rgba(9,119,210,0.4), 0 0 0 1px rgba(255,255,255,0.08) inset;
  }
  .footer .info_area .info .gb_txt {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    font-size: 13px !important;
    color: #fff !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    width: auto !important;
    display: block !important;
    text-transform: none;
    opacity: 0.9;
  }
  .footer .info_area .info .en {
    display: block !important;
    font-family: 'Belanosima', 'Yu Gothic', sans-serif !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    padding-left: 0 !important;
    line-height: 1.1 !important;
  }
  .footer .info_area .info a.en::before { display: none !important; }
  .footer .info_area .info:nth-child(1) .en {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 14px rgba(56,189,248,0.5);
  }
  .footer .info_area .info:nth-child(1)::after {
    content: '受付：平日 9:00 – 18:00';
    display: block;
    margin-top: 10px;
    font-size: 12px !important;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.08em;
    font-weight: 500;
  }

  /* 2. メール */
  .footer .info_area .info:nth-child(2) {
    background: rgba(255,255,255,0.08) !important;
  }
  .footer .info_area .info:nth-child(2) .gb_txt { color: #BAE6FD !important; }
  .footer .info_area .info:nth-child(2) .en {
    font-size: 18px !important;
    color: #fff !important;
    font-weight: 700 !important;
    word-break: break-all;
  }

  /* 3. 水質検査 — 黄ゴールドCTA */
  .footer .info_area .info:nth-child(3) {
    background: linear-gradient(135deg, #FACC15 0%, #F59E0B 100%) !important;
    border: 0 !important;
    box-shadow: 0 14px 32px rgba(245,158,11,0.45);
  }
  .footer .info_area .info:nth-child(3) .gb_txt {
    color: #78350F !important;
    font-weight: 800 !important;
  }
  .footer .info_area .info:nth-child(3) .en, .footer .info_area .info:nth-child(3) a.en {
    font-size: 20px !important;
    color: #0B3B5A !important;
    font-weight: 800 !important;
  }

  /* === ナビゲーション SPでは完全非表示 === */
  .footer .link_list, .footer .link_list * { display: none !important; }
  .footer .link_list--keep {
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    margin: 18px -22px 0 !important;
    padding: 28px 22px 18px !important;
    order: 3;
    position: relative;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer .link_list--keep::before {
    content: 'SITEMAP';
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.32em;
    color: #FACC15;
  }
  .footer .link_list > div {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .footer .link_list > div::before,
  .footer .link_list > div::after { display: none !important; content: none !important; }
  .footer .link_list > div > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px;
    padding: 16px 6px !important;
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0 !important;
    text-decoration: none;
    font-size: 14px !important;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.3;
    transition: color .25s, padding-left .2s;
    position: relative;
  }
  .footer .link_list > div > a::before {
    content: '›';
    color: #FACC15;
    margin-right: 6px;
    font-weight: 900;
    font-size: 16px;
    transition: transform .2s;
  }
  .footer .link_list > div > a:hover, .footer .link_list > div > a:active {
    color: #FACC15 !important;
    padding-left: 8px !important;
  }
  .footer .link_list > div > a:hover::before { transform: translateX(2px); }
  .footer .link_list > div > a > .icon, .footer .link_list > div > a > .icon img { display: none !important; }
  /* 5番目の会社概要は2列幅に */
  .footer .link_list > div:nth-child(5):last-child {
    grid-column: 1 / -1;
  }
  .footer .link_list > div:nth-child(5):last-child > a {
    border-bottom: 0 !important;
    justify-content: center !important;
  }

  /* === コピーライト === */
  .footer .copy {
    margin: 0 -22px !important;
    padding: 22px 18px !important;
    background: rgba(0,0,0,0.55) !important;
    text-align: center;
    font-size: 12px !important;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.16em;
    order: 4;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
}

/* MV直下CTAは廃止 */
.s-mv-cta { display: none !important; }

/* === PC用フッターサイトマップ（旧サイト準拠 About us / Business 区分） === */
.s-footer-sitemap {
  display: none;
}
@media (min-width: 1100px) {
  .s-footer-sitemap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 30px 24px;
    border-top: 1px solid #BAE6FD;
    border-bottom: 1px solid #BAE6FD;
  }
  .s-footer-sitemap__col h3 {
    font-family: 'Belanosima', sans-serif;
    font-size: 13px;
    color: #034F6D;
    letter-spacing: 0.16em;
    margin: 0 0 12px;
    font-weight: 800;
  }
  .s-footer-sitemap__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
  }
  .s-footer-sitemap__col li a {
    color: #0B3B5A;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
    transition: color .2s, padding-left .2s;
  }
  .s-footer-sitemap__col li a:hover {
    color: #0977D2;
    padding-left: 4px;
  }
  .s-footer-sitemap__col li a::before {
    content: '› ';
    color: #FACC15;
    font-weight: 900;
  }
}

/* === フッター コピーライト 横中央 === */
.footer .copy, .footer .s-footer__bottom {
  text-align: center !important;
  padding: 18px 24px !important;
}

/* === PC用フッター 2カラムレイアウト（全ページ共通）=== */
@media (min-width: 769px) {
  .footer .inr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 48px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
    align-items: start !important;
  }
  .footer .inr > .top-bado { grid-column: 1; grid-row: 1; }
  .footer .inr > .logo_area { grid-column: 1; grid-row: 2; }
  .footer .inr > .info_area { grid-column: 1; grid-row: 3; }
  .footer .inr > .link_list { grid-column: 1; grid-row: 4; }
  .footer .inr > .footer-map {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    align-self: stretch !important;
    min-height: 100% !important;
    margin-top: 0 !important;
  }
  .footer .inr > .footer-map iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 460px !important;
  }
}

/* === スペックテーブル / 水質試験データ === */
.s-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}
.s-table th, .s-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #E0F2FE;
  word-break: keep-all;
  white-space: normal;
}
.s-table th {
  background: #034F6D;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.s-table thead th { white-space: nowrap; padding: 14px 16px; }
.s-table tbody td { font-size: 13.5px; color: #0B3B5A; line-height: 1.7; }
.s-table tbody tr:nth-child(even) { background: #F0F9FF; }
.s-table tbody td strong { color: #0977D2; font-weight: 800; }

/* データ表（試験結果）は4列で横スクロール許容 */
.s-table--data {
  min-width: 560px;
}
/* テーブル親に横スクロール用ラッパー */
.s-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(11,59,90,0.08);
}

/* SP（767px以下）テーブル対応 */
@media (max-width: 767px) {
  /* === データ表（4列）はカード化 ─ 1行を grid で表示 === */
  .s-table--data {
    display: block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .s-table--data thead { display: none; } /* SP では thead 非表示 */
  .s-table--data tbody { display: block; }
  .s-table--data tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #DBEEFC;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(11,59,90,0.06);
  }
  .s-table--data tbody tr:nth-child(even) { background: #F6FBFF; }
  .s-table--data tbody td {
    display: block;
    padding: 0;
    border: none;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    color: #0B3B5A;
  }
  /* 1列目（項目名）は行幅いっぱい・大文字でヘッダ風 */
  .s-table--data tbody td:first-child {
    grid-column: 1 / -1;
    font-weight: 800;
    font-size: 14.5px;
    color: #034F6D;
    padding-bottom: 6px;
    border-bottom: 1px solid #E0F2FE;
    margin-bottom: 4px;
  }
  /* 2〜4列目は data-label をミニラベルに */
  .s-table--data tbody td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
  }
  .s-table--data tbody td strong {
    color: #0977D2;
    font-weight: 800;
    font-size: 14px;
  }

  /* === スペック系テーブル（th + td の2列） === */
  .s-table:not(.s-table--data) {
    display: block;
    max-width: 100%;
  }
  .s-table:not(.s-table--data) > thead { display: table-header-group; }
  .s-table:not(.s-table--data) > tbody { display: table-row-group; }
  .s-table:not(.s-table--data) > thead > tr,
  .s-table:not(.s-table--data) > tbody > tr { display: table-row; }
  .s-table:not(.s-table--data) th,
  .s-table:not(.s-table--data) td {
    display: table-cell;
    white-space: normal;
    word-break: break-word;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.6;
  }
}

/* PC: データ表だけ強制改行禁止（試験データはセル内で改行されないように） */
@media (min-width: 768px) {
  .s-table--data thead th,
  .s-table--data tbody td {
    white-space: nowrap;
  }
}

/* === SNS リンクは廃止（旧サイトに無いため） === */
.s-sns { display: none !important; }
.s-sns--unused {
  text-align: center;
  margin: 20px auto;
  padding: 16px 0;
}
.s-sns__label {
  font-family: 'Belanosima', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.32em;
  margin: 0 0 12px;
  font-weight: 700;
}
.s-sns__list {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.s-sns__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  transition: transform .25s, background .25s, border-color .25s;
}
.s-sns__list a:hover {
  transform: translateY(-3px);
  background: #FACC15;
  border-color: #FACC15;
}
.s-sns__list img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter .25s;
}
.s-sns__list a:hover img {
  filter: none;
}

/* SP は少し小さく */
@media (max-width: 767px) {
  .s-sns { margin: 10px auto 4px; padding: 8px 0; }
  .s-sns__label { color: rgba(255,255,255,0.6); }
  .s-sns__list a { width: 44px; height: 44px; }
  .s-sns__list img { width: 20px; height: 20px; }
}

/* SP: 縦書きを横書きに強制（viewter/wellwater等で重なるため） */
@media (max-width: 767px) {
  .s-interview__quote, .s-interview__quote *,
  [style*="writing-mode"], .vertical, [class*="vertical"]:not([class*="vertical-align"]),
  [class*="-quote"], [class*="__quote"] {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    height: auto !important;
    letter-spacing: 0.04em !important;
    line-height: 1.7 !important;
    padding: 16px !important;
  }
  .s-interview__quote {
    font-size: 20px !important;
    text-align: center !important;
    color: #034F6D !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #DFF6FD, #BAE6FD) !important;
    border-radius: 16px !important;
    margin: 18px 0 !important;
    border-left: 4px solid #0977D2 !important;
    box-shadow: 0 8px 20px rgba(11,59,90,0.08);
    height: auto !important;
    min-height: 0 !important;
    /* 日本語の自然な折返し（文節保持） */
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: pretty !important;
    line-height: 1.7 !important;
    /* 句読点・長音の不自然な余白を解消 */
    letter-spacing: 0 !important;
    font-feature-settings: "palt" 1, "pkna" 1, "kern" 1 !important;
    -webkit-font-feature-settings: "palt" 1, "pkna" 1, "kern" 1 !important;
    font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif !important;
    padding: 22px 18px !important;
    hanging-punctuation: allow-end;
    text-spacing-trim: trim-start;
  }
  /* 同種ブロックも同じ改行ルール */
  .s-interview__qa-q, .s-interview__qa-a,
  [class*="__quote"], [class*="-quote"] {
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    text-wrap: pretty !important;
  }
  .s-interview__quote .tcy {
    writing-mode: horizontal-tb !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    text-combine-upright: none !important;
    -webkit-text-combine: none !important;
    -ms-text-combine-horizontal: none !important;
    font-feature-settings: normal !important;
    -webkit-font-feature-settings: normal !important;
    text-orientation: mixed !important;
  }

  /* インタビューのグリッド（PC前提の固定行高がSPで巨大空白）→ block化 */
  .s-interview__inner, .s-interview, [class*="__inner"][class*="interview"] {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    height: auto !important;
  }
  .s-interview__inner > * {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin-bottom: 16px !important;
  }
  .s-interview__qa {
    margin-top: 18px !important;
  }
  .s-interview__qa-item {
    margin-bottom: 18px !important;
    padding: 16px !important;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(11,59,90,0.06);
  }
  .s-interview__qa-q {
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
    color: #034F6D !important;
    line-height: 1.5 !important;
  }
  .s-interview__qa-a {
    font-size: 14px !important;
    line-height: 1.85 !important;
    color: #0B3B5A !important;
    margin: 0 !important;
  }
}

/* ===== SP セクション余白を圧縮（リボン見出し→スペックカードの巨大空白対策） ===== */
@media (max-width: 767px) {
  /* 上下 90/96px ある共通セクションpaddingを大幅圧縮 */
  .s-section { padding: 28px 16px !important; }
  /* リボン見出し直後の inline padding-top:60px を打ち消す */
  .s-ribbon-wrap[style*="padding-top"] { padding-top: 24px !important; }
  .s-ribbon-wrap { padding: 0 16px !important; margin-bottom: 4px !important; }
  /* spec-card 上の margin-top:50px も圧縮 */
  .s-spec-card { margin-top: 16px !important; }
  .s-spec-card__head { padding: 20px 18px 18px !important; }
  /* 連続するセクション間の上下マージンも詰める */
  .s-section + .s-section { padding-top: 0 !important; }
  /* 共通：見出し直下→次セクションまでの大きい gap を抑制 */
  .s-h2, .s-ribbon-title { margin-bottom: 12px !important; }
}

/* ===== 全ページ ヘッダー追従化（PC/タブレット/SP共通） ===== */
.page-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255,255,255,0.96) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 2px 12px rgba(11,59,90,0.08);
}
/* sticky を阻害する祖先 overflow を解除（html/body は visible に） */
html, body { overflow-x: clip; } /* clip は sticky を阻害しない */
/* SP（840px以下）でもヘッダーは表示・追従 */
@media (max-width: 840px) {
  .page-header { display: block !important; }
}