@charset "UTF-8";
/* ==========================================================================
   新聞印刷・発送代行ページ専用CSS
   すべて body.page-shinbun の中に閉じ込めてあるので、他ページには影響しません。
   読み込み順： style.css → micro-interactions.css → kasou.css → shinbun.css
   ========================================================================== */

body.page-shinbun{
  /* --- 色：style.css のトークンがあればそれを使い、無ければ右のフォールバック --- */
  --sn-navy:      var(--c-navy, #12306e);   /* 見出し・ボタンの紺 */
  --sn-navy-deep: #0b2456;                  /* CTA帯の濃い紺 */
  --sn-blue:      #1c4fa5;                  /* アイコン・アクセント */
  --sn-ink:       #2c3646;                  /* 本文 */
  --sn-note:      #5a6577;                  /* 小さい説明文 */
  --sn-beige:     #fdf7f0;                  /* 対応媒体・メリット・確認事項の地色 */
  --sn-line:      #e2e8f2;                  /* 罫線 */
  --sn-line-soft: #eef2f8;
  --sn-hd:        var(--header-h, 64px);    /* 固定ヘッダーの高さ */
  --sn-tabs-h:    52px;                     /* 目次バーの高さ */
  --sn-gap:       clamp(20px, 2.6vw, 34px); /* カラム間の余白 */

  color: var(--sn-ink);
}

/* このページだけ内容幅を少し広く（カンプが他の下層ページより広いため）。
   他ページと揃えたい場合はこの3行を削除すれば kasou.css の 1080px に戻ります。 */
body.page-shinbun .l-wide{ width: min(100% - 40px, 1180px); margin-inline:auto; }

/* ヒーローの背景を固定ヘッダーの裏まで敷くため、main の上余白を消す */
body.page-shinbun main#main{ padding-top:0; margin-top:0; }

/* 目次でジャンプしたとき、ヘッダー＋目次バーの下に隠れないように */
body.page-shinbun :where(h2,h3)[id]{
  scroll-margin-top: calc(var(--sn-hd) + var(--sn-tabs-h) + 20px);
}

/* 共通パーツ ------------------------------------------------------------- */
body.page-shinbun .sn-sec{ padding: 34px 0; }

/* 文字サイズ拡大（2026-09）：本文 12〜13.5px → 15〜16px を基準に、ページ全体を一回り大きく */
body.page-shinbun .sn-h2{
  font-size: clamp(20px, 1.75vw, 24px);   /* 17〜20px → 20〜24px */
  line-height:1.5;
  font-weight:700;
  color: var(--sn-navy);
  margin:0 0 6px;
  letter-spacing:.02em;
}
body.page-shinbun .sn-h3{
  font-size:17px; font-weight:700; color:var(--sn-navy);   /* 15 → 17px */
  margin:0 0 12px;
}
body.page-shinbun .sn-text{
  font-size:16px; line-height:2; margin:0; color:var(--sn-ink);   /* 13.5 → 16px */
}
body.page-shinbun .sn-note{
  font-size:15px; line-height:1.85; color:var(--sn-note); margin:0 0 16px;   /* 12.5 → 15px */
}

/* 折り返し位置の固定（2026-09）
   文字を大きくして2行になりやすい見出し・質問は、HTML の <wbr> と「、・」と空白の位置でだけ折り返す。
   （word-break:auto-phrase は Safari・Firefox 非対応で、Chrome でも「おまか／せください」のように切れることがあるため）
   入りきらない時だけ overflow-wrap:anywhere で途中でも折り返す（はみ出し防止） */
body.page-shinbun .sn-merit-title,
body.page-shinbun .sn-merit-catch,
body.page-shinbun .sn-merit-list h3,
body.page-shinbun .sn-faq-item summary,
body.page-shinbun .sn-panel-beige .sn-h2,
body.page-shinbun .sn-panel-beige .sn-dots li{
  word-break:keep-all;
  overflow-wrap:anywhere;
}

/* 黒丸の箇条書き */
body.page-shinbun .sn-dots{ list-style:none; margin:0; padding:0; }
body.page-shinbun .sn-dots li{
  position:relative; padding-left:1.1em; margin:0 0 .55em;
  font-size:15px; line-height:1.75;   /* 12.5 → 15px */
}
body.page-shinbun .sn-dots li::before{
  content:""; position:absolute; left:.15em; top:.75em;
  width:5px; height:5px; border-radius:50%; background:var(--sn-ink);
}
body.page-shinbun .sn-dots-2col{
  display:grid; grid-template-columns:1fr 1fr; column-gap:22px;
}

/* 写真プレースホルダー（.ph / .ph2 は style.css のもの）。
   <img> に差し替えても同じ枠に収まるようにしてあります。 */
body.page-shinbun .sn-setsubi-photo > *,
body.page-shinbun .sn-col-photo > *,
body.page-shinbun .sn-related-photo > *,
body.page-shinbun .sn-cta-photo > *{
  display:block; width:100%; height:100%; object-fit:cover; margin:0;
}

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
body.page-shinbun .sn-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex; align-items:center;          /* 写真の高さに対して文字を上下中央に */
  min-height:clamp(400px, 30vw, 560px);      /* 写真が細長く切れすぎないよう高さを確保 */
  background:
    radial-gradient(120% 90% at 8% 0%, #ffffff 0%, #f7fafd 55%, #eef4fb 100%);
  padding: calc(var(--sn-hd) + 18px) 0 26px;
}
body.page-shinbun .sn-hero-inner{ position:relative; z-index:2; }

/* ヘッダー：ラフ（SVC-01）どおり最初から白い帯にする。
   値は style.css の header.scrolled と同じなので、スクロールしても見た目は変わらない。
   メガメニューが開いている間は style.css の header.is-mega-open に任せる */
body.page-shinbun header:not(.is-mega-open){
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(5px) saturate(1.3);
          backdrop-filter:blur(5px) saturate(1.3);
  border-bottom-color:var(--border);
}

/* 右側のメインビジュアル（images/mv_shinbun）
   ・ヘッダーの下からヒーローの下端まで、画面の中央＋20px から右端いっぱい
     （幅を%にすると 1440〜1600px で見出しの2行目に写真がかかるため、中央基準にしている）
   ・画像の左端がもともと斜めに透明にぼかしてあるので、切り抜きや枠は付けずに背景へ溶かす
   ・幅が足りない時に左右が切れる場合は、ぼかしのある左端を残して右側を切る（object-position の 0%） */
body.page-shinbun .sn-hero-media{
  position:absolute; top:var(--sn-hd); right:0; bottom:0;
  left:calc(50% + 20px); z-index:0; pointer-events:none;
}
body.page-shinbun .sn-hero-media picture,
body.page-shinbun .sn-hero-img{
  display:block; width:100%; height:100%;
}
body.page-shinbun .sn-hero-img{
  object-fit:cover;
  object-position:0% 55%;   /* 横：左端（ぼかし側）を基準／縦：「Pursuit Of Quality」の幕が入る高さ */
  /* 画像の左端のぼかしは、いちばん端（約2.6%）だけ急に白いもやが始まり縦の筋に見えるため、
     左から14%をなだらかに溶かして筋を消す */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 14%);
}

body.page-shinbun .sn-breadcrumb{
  background:transparent; border:0; padding:0; margin:0 0 18px;
}
body.page-shinbun .sn-breadcrumb ol{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:.4em; margin:0; padding:0; font-size:13px;   /* 11.5 → 13px */
}
body.page-shinbun .sn-breadcrumb li + li::before{
  content:"›"; margin-right:.5em; color:#9aa7ba;
}
body.page-shinbun .sn-breadcrumb a{
  color:var(--sn-navy); font-weight:700; text-decoration:none;
}
body.page-shinbun .sn-breadcrumb a:hover{ text-decoration:underline; }
body.page-shinbun .sn-breadcrumb li[aria-current]{ color:var(--sn-note); }  /* #6b7788 だと背景に対して4.4:1で基準（4.5:1）を少し下回るため */

body.page-shinbun .sn-hero-title{
  font-size: clamp(24px, 2.4vw, 34px);
  line-height:1.42;
  letter-spacing:.01em;
  font-weight:500;
  color:var(--sn-navy);
  margin:0 0 18px;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
body.page-shinbun .sn-hero-title b{ font-weight:800; }
/* 折り返す時は文節で（「一括／サポート」「一貫対／応」を防ぐ。Chrome・Edge 119以降。未対応は通常の折り返し） */
body.page-shinbun .sn-hero-title,
body.page-shinbun .sn-hero-lead{ word-break:auto-phrase; }

body.page-shinbun .sn-hero-lead{
  font-size:16px; line-height:1.95; margin:0 0 20px; color:var(--sn-ink);   /* 13.5 → 16px */
}

body.page-shinbun .sn-hero-tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 14px; padding:0;
}
body.page-shinbun .sn-hero-tags li{
  border:1px solid #c9d6e8; border-radius:4px;
  background:rgba(255,255,255,.86);
  padding:7px 14px; font-size:14px; line-height:1.4; color:var(--sn-ink);   /* 12 → 14px */
  white-space:nowrap;
}
body.page-shinbun .sn-hero-media-list{
  display:inline-block; max-width:100%;
  border:1px solid #c9d6e8; border-radius:4px;
  background:rgba(255,255,255,.86);
  padding:9px 16px; margin:0;
  font-size:14px; line-height:1.7; color:var(--sn-ink);   /* 12 → 14px */
}
body.page-shinbun .sn-hero-media-list b{ font-weight:700; }

/* ==========================================================================
   2. ページ内目次（sticky）
   ========================================================================== */
body.page-shinbun .sn-tabs{
  position:sticky; top:var(--sn-hd); z-index:30;
  background:#f6f8fb;
  border-top:1px solid var(--sn-line);
  border-bottom:1px solid var(--sn-line);
}
body.page-shinbun .sn-tabs-inner{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
body.page-shinbun .sn-tabs-inner::-webkit-scrollbar{ height:3px; }
body.page-shinbun .sn-tabs-inner::-webkit-scrollbar-thumb{ background:#c8d4e6; border-radius:3px; }
/* 幅が足りるときは中央寄せ、足りないときは左詰め＋横スクロール
   （width:max-content + min-width:100% で、あふれても先頭が切れません） */
body.page-shinbun .sn-tabs ul{
  list-style:none; display:flex; gap:clamp(10px, 1.2vw, 18px);
  margin:0; padding:0; white-space:nowrap;
  justify-content:center;
  width:max-content; min-width:100%;
}
body.page-shinbun .sn-tabs a{
  display:block; padding:0 2px; line-height:var(--sn-tabs-h);
  font-size:13px; color:var(--sn-navy); text-decoration:none;   /* 12.5 → 13px（9項目がPC幅で1行に収まる上限） */
  border-bottom:2px solid transparent;
  transition:border-color .2s, opacity .2s;
}
body.page-shinbun .sn-tabs a:hover{ opacity:.65; }
body.page-shinbun .sn-tabs a.is-current{
  font-weight:700; border-bottom-color:var(--sn-navy);
}

/* ==========================================================================
   3. 概要 ＋ 対応できる媒体
   ========================================================================== */
body.page-shinbun .sn-overview-grid{
  display:grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(24px, 4vw, 56px); align-items:start;
}
body.page-shinbun .sn-media-panel{
  background:var(--sn-beige); border-radius:3px; padding:18px 22px 22px;
}
body.page-shinbun .sn-chips{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
body.page-shinbun .sn-chips li{
  border:1px solid #d6e0ee; border-radius:3px; background:#fff;
  text-align:center; padding:12px 4px;
  font-size:15px; line-height:1.3; color:var(--sn-ink);   /* 12.5 → 15px */
}

/* ==========================================================================
   4. きかんしに任せるメリット
   ========================================================================== */
body.page-shinbun .sn-merit{
  position:relative;
  border:1px solid #cfdcee; border-radius:6px;
  background:var(--sn-beige);
  padding:clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 38px);
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);   /* 1 : 1.12 → 1 : 1.3（右の4項目の文字が大きくなった分） */
  gap:clamp(24px, 3.4vw, 48px);
}
body.page-shinbun .sn-merit-lead{ position:relative; }
body.page-shinbun .sn-merit-title{
  font-size:clamp(24px, 2.5vw, 32px); line-height:1.35;   /* 見出しは元から大きいので据え置き */
  font-weight:800; color:var(--sn-navy); margin:0 0 14px;
  padding-bottom:14px; border-bottom:1.5px solid var(--sn-navy);
}
body.page-shinbun .sn-merit-sub{
  font-size:15.5px; line-height:1.9; margin:0 0 16px; color:var(--sn-ink);   /* 13 → 15.5px */
}
body.page-shinbun .sn-merit-catch{
  font-size:clamp(18px, 1.6vw, 21px); line-height:1.7; font-weight:700;   /* 17〜22 → 18〜21px（3行のまま収まる上限） */
  color:var(--sn-navy); margin:0 0 16px;
}
body.page-shinbun .sn-merit-note{
  font-size:14.5px; line-height:1.9; color:var(--sn-note); margin:0;   /* 12 → 14.5px */
}
body.page-shinbun .sn-merit-deco{
  position:absolute; right:6%; bottom:-6px; width:110px; height:60px;
  color:#dfe8f4; pointer-events:none;
}

body.page-shinbun .sn-merit-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:26px clamp(20px, 2.6vw, 34px);
}
body.page-shinbun .sn-merit-list li{
  display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start;
  position:relative;
}
/* カンプの十字の区切り線 */
body.page-shinbun .sn-merit-list li:nth-child(2n)::before,
body.page-shinbun .sn-merit-list li:nth-child(2n)::after{ content:none; }
body.page-shinbun .sn-merit-list li:nth-child(odd)::after{
  content:""; position:absolute; top:0; bottom:0;
  right:calc(-1 * clamp(10px, 1.3vw, 17px));
  border-left:1px dotted #cdd9e8;
}
body.page-shinbun .sn-merit-list li:nth-child(-n+2)::before{
  content:""; position:absolute; left:0; right:calc(-1 * clamp(20px, 2.6vw, 34px));
  bottom:-13px; border-top:1px dotted #cdd9e8;
}
body.page-shinbun .sn-merit-list li:nth-child(2)::before{ right:0; }
body.page-shinbun .sn-check{
  display:block; width:30px; height:30px; color:var(--sn-navy);
}
body.page-shinbun .sn-check svg{ width:100%; height:100%; display:block; }
body.page-shinbun .sn-merit-list h3{
  font-size:16px; line-height:1.5; font-weight:700;   /* 14.5 → 16px */
  color:var(--sn-navy); margin:3px 0 8px;
}
body.page-shinbun .sn-merit-list p{
  font-size:14.5px; line-height:1.85; margin:0; color:var(--sn-ink);   /* 12 → 14.5px */
}
/* 文字を大きくすると HTML の <br> の位置では1行に収まらず、半端な位置で折り返すため、
   <br> は無効にして文節で自然に折り返す */
body.page-shinbun .sn-merit-list p br{ display:none; }

/* ==========================================================================
   5. 設備構成
   ========================================================================== */
body.page-shinbun .sn-setsubi-sec{ border-top:1px solid var(--sn-line-soft); }
body.page-shinbun .sn-setsubi{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,0.9fr);
  gap:clamp(20px, 3vw, 42px); align-items:start;
}
body.page-shinbun .sn-setsubi-photo{
  aspect-ratio:33/20; background:#e6ebf2; overflow:hidden; border-radius:2px;
}
body.page-shinbun .sn-eq-list{
  list-style:none; margin:0; padding:0;
}
body.page-shinbun .sn-eq-list li{
  position:relative; padding-left:1.1em; margin:0 0 .85em;
  font-size:15px; line-height:1.75;   /* 12.5 → 15px */
}
body.page-shinbun .sn-eq-list li::before{
  content:""; position:absolute; left:.15em; top:.75em;
  width:5px; height:5px; border-radius:50%; background:var(--sn-ink);
}

/* ==========================================================================
   6. 3カラム（できること／できること／流れ）
   ========================================================================== */
body.page-shinbun .sn-cols-sec{ border-top:1px solid var(--sn-line); }
/* 2026-09：3カラム → 「新聞印刷／発送代行」の2カラム＋「印刷から発送までの流れ」を下の段に全幅で
   （横並びだと流れの図が小さすぎるため）。HTMLは変えていない */
body.page-shinbun .sn-cols{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:var(--sn-gap);
}
body.page-shinbun .sn-col{ position:relative; }
/* 列と列の真ん中に細い縦罫 */
body.page-shinbun .sn-col + .sn-col{
  padding-left:calc(var(--sn-gap) / 2);
  border-left:1px solid var(--sn-line);
  margin-left:calc(var(--sn-gap) / -2);
}
/* 「ご依頼前に確認したいこと」：左の列は短い項目だけなので中身の幅に合わせ、残りを右の列に回す
   （「発送エリア・納品先」「原稿素材の有無　など」が1行に収まる） */
body.page-shinbun .sn-panel-beige .sn-dots-2col{
  grid-template-columns:auto minmax(0,1fr);
  column-gap:28px;
}
body.page-shinbun .sn-panel-beige .sn-dots li{ margin-bottom:.85em; }   /* 行間を少し広げて左の枠と高さのバランスをとる */
/* 2カラムになって列が広くなったので、箇条書きは1列に（2列だと1項目が2行に割れて読みにくい） */
body.page-shinbun .sn-col .sn-dots-2col{ grid-template-columns:1fr; }
body.page-shinbun .sn-col-photo{
  aspect-ratio:62/31; background:#e6ebf2; overflow:hidden;
  border-radius:2px; margin:0 0 14px;
}

/* 流れ（01〜06）：下の段に全幅。淡いグレーの帯の中に6ステップを並べる
   （.sn-col + .sn-col の縦罫・左余白を打ち消すため、詳細度をそろえて .sn-col.sn-col-flow で指定） */
body.page-shinbun .sn-col.sn-col-flow{
  grid-column:1 / -1;
  margin-left:0; padding-left:0; border-left:0;
  border-top:1px solid var(--sn-line);
  padding-top:calc(var(--sn-gap) + 4px);
}
body.page-shinbun .sn-flow{
  list-style:none; margin:0; padding:24px clamp(16px, 3vw, 44px) 22px;
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:10px 8px;
  background:#f6f8fb; border:1px solid var(--sn-line); border-radius:4px;
}
body.page-shinbun .sn-flow-item{
  flex:1 1 0; min-width:0; text-align:center; color:var(--sn-blue);
}
body.page-shinbun .sn-flow-icon{
  display:block; width:48px; height:48px; margin:0 auto 10px;   /* 34 → 48px */
}
body.page-shinbun .sn-flow-icon svg{ width:100%; height:100%; display:block; }
body.page-shinbun .sn-flow-no{
  display:block; font-size:14px; font-weight:700; letter-spacing:.06em;   /* 11 → 14px */
  color:var(--sn-blue); margin:0 0 4px;
}
body.page-shinbun .sn-flow-label{
  display:block; font-size:15px; line-height:1.55; color:var(--sn-navy);   /* 10 → 15px */
  /* 改行位置は HTML の <br> で決めています */
  white-space:nowrap;
}
body.page-shinbun .sn-flow-arrow{
  flex:0 0 10px; margin-top:18px;   /* アイコン（48px）の中央の高さ */
}
body.page-shinbun .sn-flow-arrow::before{
  content:""; display:block;
  border-left:9px solid var(--sn-navy);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

/* ==========================================================================
   7. ご依頼範囲 ＋ 確認したいこと
   ========================================================================== */
/* 2026-09：2つの枠の高さをそろえる（align-items:stretch）。横幅は 6.5：3.5
   （7：3 だと右の見出し「ご依頼前に確認したいこと」が2行に折れ、項目も2行に割れて右の枠だけ高くなるため。
     6.5：3.5 なら 1280〜1920px で見出し・項目とも1行。中身の高さは 1280px幅で左318px／右307px（Chromium実測）） */
body.page-shinbun .sn-range-grid{
  display:grid; grid-template-columns:minmax(0,6.5fr) minmax(0,3.5fr); gap:clamp(20px, 2.6vw, 34px);
  align-items:stretch;
}
body.page-shinbun .sn-panel{ border-radius:4px; padding:18px 22px 20px; }
body.page-shinbun .sn-panel-outline{ border:1px solid #d9e3f0; background:#fff; }
body.page-shinbun .sn-panel-beige{ border:1px solid #f0e6da; background:var(--sn-beige); }

body.page-shinbun .sn-deflist{ margin:0; }
body.page-shinbun .sn-deflist > div{
  display:grid; grid-template-columns: 8.5em 1fr; gap:0 14px;   /* 9.5em → 8.5em（「データ管理・報告」が1行に収まる幅。説明文を1行に収めるため） */
  padding:11px 6px; border-top:1px solid var(--sn-line-soft);
  font-size:15px; line-height:1.7;   /* 12.5 → 15px */
}
body.page-shinbun .sn-deflist > div:last-child{ border-bottom:1px solid var(--sn-line-soft); }
body.page-shinbun .sn-deflist dt{ font-weight:700; color:var(--sn-ink); }
body.page-shinbun .sn-deflist dd{ margin:0; color:var(--sn-ink); text-wrap:pretty; }   /* 最終行が「す。」1文字だけにならないように（対応ブラウザのみ） */

/* ==========================================================================
   8. 関連ページ ＋ よくある質問
   ========================================================================== */
body.page-shinbun .sn-bottom-sec{ padding-bottom:44px; }
body.page-shinbun .sn-bottom-grid{
  display:grid; grid-template-columns: minmax(0,0.78fr) minmax(0,1.22fr);
  gap:clamp(24px, 4vw, 56px); align-items:start;
}
body.page-shinbun .sn-related-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
body.page-shinbun .sn-related-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid #dce5f1; border-radius:3px; overflow:hidden; background:#fff;
  transition:box-shadow .25s, transform .25s;
}
body.page-shinbun .sn-related-card:hover{
  box-shadow:0 6px 18px rgba(18,48,110,.12); transform:translateY(-2px);
}
body.page-shinbun .sn-related-photo{
  display:block; aspect-ratio:48/22; background:#e6ebf2; overflow:hidden;
}
body.page-shinbun .sn-related-label{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 15px; font-size:15.5px; font-weight:700; color:var(--sn-navy);   /* 13 → 15.5px */
}
body.page-shinbun .sn-related-label svg{ width:14px; height:14px; flex:none; }

body.page-shinbun .sn-faq-list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px clamp(14px, 1.8vw, 24px);
  align-content:start;
}
body.page-shinbun .sn-faq-item{
  border:1px solid #dce5f1; border-radius:3px; background:#fff;
  align-self:start;
}
body.page-shinbun .sn-faq-item summary{
  position:relative; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:9px;
  padding:13px 36px 13px 14px;
  font-size:15px; line-height:1.55; color:var(--sn-ink);   /* 12.5 → 15px */
}
body.page-shinbun .sn-faq-item summary::-webkit-details-marker{ display:none; }
body.page-shinbun .sn-faq-item summary::before{
  content:""; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--sn-navy) no-repeat center/10px 10px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
/* ＋ / − */
body.page-shinbun .sn-faq-item summary::after{
  content:""; position:absolute; right:13px; top:50%; width:11px; height:11px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--sn-navy),var(--sn-navy)) center/11px 1.5px no-repeat,
    linear-gradient(var(--sn-navy),var(--sn-navy)) center/1.5px 11px no-repeat;
}
body.page-shinbun .sn-faq-item[open] summary::after{
  background:linear-gradient(var(--sn-navy),var(--sn-navy)) center/11px 1.5px no-repeat;
}
body.page-shinbun .sn-faq-body{
  padding:0 14px 14px 41px; font-size:14.5px; line-height:1.85; color:var(--sn-note);   /* 12 → 14.5px */
}
body.page-shinbun .sn-faq-body p{ margin:0; }

/* ==========================================================================
   9. ページ末CTA（紺帯）
   ========================================================================== */
body.page-shinbun .sn-cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--sn-navy-deep);
  padding:38px 16px;
  display:flex; align-items:center; justify-content:center;
}
body.page-shinbun .sn-cta-photo{
  position:absolute; top:0; bottom:0; width:17%; min-width:130px;
  background:#16315f; overflow:hidden;
}
body.page-shinbun .sn-cta-photo-l{ left:0;  border-radius:0 90px 90px 0; }
body.page-shinbun .sn-cta-photo-r{ right:0; border-radius:90px 0 0 90px; }
body.page-shinbun .sn-cta-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:18px 26px; text-align:center;
}
body.page-shinbun .sn-cta-title{
  margin:0; color:#fff; font-weight:700;
  font-size:clamp(19px, 2.1vw, 28px); line-height:1.5; letter-spacing:.02em;   /* 17〜25 → 19〜28px */
}
body.page-shinbun .sn-cta-btn{ margin:0; }
body.page-shinbun .sn-cta-btn .btn{
  border:1px solid rgba(255,255,255,.75); color:#fff; background:transparent;
  border-radius:3px; padding:12px 24px; font-size:15px;   /* 13 → 15px */
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
body.page-shinbun .sn-cta-btn .btn:hover{ background:rgba(255,255,255,.12); }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width:1180px){
  /* 流れは全幅になったので、ここで小さくする必要はない（旧：ラベル10px・アイコン30px） */
  body.page-shinbun .sn-flow-label{ font-size:14px; }
  body.page-shinbun .sn-flow-icon{ width:44px; height:44px; }
  body.page-shinbun .sn-flow-arrow{ margin-top:16px; }
}

/* ヘッダーを 1000px 以下でハンバーガーに【このページ独自・任意】
   style.css はナビを 767px 以下でしか隠さないため、768〜980px ではロゴの文字が縦に潰れ、
   白いヘッダーの帯からはみ出す（recruit.css と同じ指定）。全ページで揃えるなら style.css へ */
@media screen and (max-width:1000px){
  body.page-shinbun #g_navi{ display:none; }
  body.page-shinbun .hamburger{ display:flex; }
}

/* 3カラム → 2カラム（流れは下段に全幅） */
@media screen and (max-width:1024px){
  body.page-shinbun .sn-cols{ grid-template-columns:1fr 1fr; }
  body.page-shinbun .sn-col + .sn-col{ margin-left:0; }
  body.page-shinbun .sn-col-flow{
    grid-column:1 / -1; padding-left:0; border-left:0;
    border-top:1px solid var(--sn-line); padding-top:22px;
  }
  body.page-shinbun .sn-merit{ grid-template-columns:1fr; }
  body.page-shinbun .sn-merit-deco{ display:none; }
  /* 左に「見出し＋写真」、右にリスト2本を縦に積む */
  body.page-shinbun .sn-setsubi{ grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); }
  body.page-shinbun .sn-setsubi-lead{ grid-column:1; grid-row:1 / span 2; }
  body.page-shinbun .sn-eq-list{ grid-column:2; }
}

@media screen and (max-width:900px){
  /* ヒーローは「テキスト → 写真」の縦積みに */
  body.page-shinbun .sn-hero{
    padding-bottom:0;
    display:flex; flex-direction:column;
  }
  body.page-shinbun .sn-hero-inner{ order:1; }
  body.page-shinbun .sn-hero{ min-height:0; align-items:stretch; }
  body.page-shinbun .sn-hero-media{
    order:2;
    position:relative; top:auto; left:auto; width:100%; margin-top:22px;
    height:clamp(200px, 48vw, 340px);
  }
  /* 縦積みの時は写真の上端もぼかして、文字の下からなじませる（左端のぼかしと重ねがけ） */
  body.page-shinbun .sn-hero-img{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%), linear-gradient(90deg, transparent 0%, #000 14%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to bottom, transparent 0%, #000 22%), linear-gradient(90deg, transparent 0%, #000 14%);
            mask-composite:intersect;
  }
  body.page-shinbun .sn-hero-title{ font-size:clamp(23px, 4.6vw, 32px); }

  body.page-shinbun .sn-tabs ul{ justify-content:flex-start; }
  body.page-shinbun .sn-bottom-grid{ grid-template-columns:1fr; }
  body.page-shinbun .sn-overview-grid{ grid-template-columns:1fr; }
  body.page-shinbun .sn-range-grid{ grid-template-columns:1fr; }
}

@media screen and (max-width:767px){
  body.page-shinbun{ --sn-tabs-h:46px; }
  body.page-shinbun .sn-sec{ padding:26px 0; }

  body.page-shinbun .sn-hero-tags{ gap:8px; }
  body.page-shinbun .sn-hero-tags li{ padding:6px 11px; font-size:13px; white-space:normal; }   /* 11.5 → 13px */
  body.page-shinbun .sn-hero-media-list{ font-size:13px; }

  body.page-shinbun .sn-tabs ul{ gap:16px; }
  body.page-shinbun .sn-tabs a{ line-height:var(--sn-tabs-h); font-size:13px; }

  body.page-shinbun .sn-chips{ grid-template-columns:1fr 1fr; }
  body.page-shinbun .sn-cols{ grid-template-columns:1fr; }
  body.page-shinbun .sn-col + .sn-col{
    padding-left:0; border-left:0; border-top:1px solid var(--sn-line); padding-top:22px;
  }
  /* 写真が縦に伸びすぎないように高さで固定 */
  body.page-shinbun .sn-setsubi-photo{ aspect-ratio:auto; height:200px; }
  body.page-shinbun .sn-col-photo{ aspect-ratio:auto; height:160px; }

  body.page-shinbun .sn-setsubi{ grid-template-columns:1fr; }
  body.page-shinbun .sn-setsubi-lead{ grid-column:1; grid-row:auto; }
  body.page-shinbun .sn-eq-list{ grid-column:1; }
  body.page-shinbun .sn-eq-list + .sn-eq-list{ margin-top:-.6em; }

  body.page-shinbun .sn-merit-list{ grid-template-columns:1fr; gap:20px; }
  body.page-shinbun .sn-merit-list li::before,
  body.page-shinbun .sn-merit-list li::after{ content:none !important; }

  body.page-shinbun .sn-faq-list{ grid-template-columns:1fr; }
  body.page-shinbun .sn-related-list{ grid-template-columns:1fr 1fr; }

  body.page-shinbun .sn-deflist > div{ grid-template-columns:1fr; gap:3px; }
  body.page-shinbun .sn-deflist dt{ color:var(--sn-navy); }

  body.page-shinbun .sn-cta{ padding:30px 16px; }
  body.page-shinbun .sn-cta-photo{ display:none; }
}

@media screen and (max-width:520px){
  body.page-shinbun .sn-dots-2col{ grid-template-columns:1fr; }
  body.page-shinbun .sn-flow-item{ flex:0 0 calc(33.333% - 10px); }
  body.page-shinbun .sn-flow-arrow{ display:none; }
  body.page-shinbun .sn-flow{ gap:18px 8px; justify-content:flex-start; }
}

/* アニメーションを減らす設定のときは動かさない */
@media (prefers-reduced-motion: reduce){
  body.page-shinbun .sn-related-card{ transition:none; }
  body.page-shinbun .sn-related-card:hover{ transform:none; }
}