@charset "utf-8";
/* =========================================================================
   news.css — 新着情報（一覧 /news/ ＋ 記事詳細 /news/detail.php）
   共通（ヘッダー/フッター/パンくず/色変数/タイポ/基準線）は common.css。
   ========================================================================= */
:root{
  --code-bg:#1d1d1d;
  --code-ink:#E8E8E8;
  --code-keyword:#FF8B5A;
  --code-string:#9EE493;
  --code-comment:#7a7a7a;
  --code:"Space Mono", ui-monospace, monospace;
}

/* =========================================================================
   一覧（/news/）
   ========================================================================= */
.phero{ position:relative; background:var(--cream); color:#000; padding:80px 0 60px; border-bottom:2px solid #000; overflow:hidden }
.phero-inner{ position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1.6fr .9fr; gap:32px; align-items:end }
.phero-text{ padding-top:24px }
.phero-text .eyebrow{ color:var(--red); opacity:1 }
.phero-text h1{ font-family:var(--jp); font-weight:900; font-size:clamp(60px,8.5vw,140px); line-height:.9; letter-spacing:-0.04em; margin:24px 0 16px; text-wrap:balance; color:#000 }
.phero-text h1 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.3em; opacity:.4 }
.phero-text p{ font-size:17px; line-height:1.85; max-width:42ch; margin:0; opacity:.85 }
.phero-mascot{ display:flex; justify-content:flex-end; align-items:flex-end; position:relative; z-index:2 }
.phero-mascot img{ height:340px; width:auto; filter:drop-shadow(0 10px 0 rgba(0,0,0,0.15)) }

/* カテゴリタブ（スティッキー・サーバ側 ?type 絞り込みのリンク） */
.tabs-wrap{ background:#000; color:#fff; border-bottom:2px solid #000; position:sticky; top:var(--header-h); z-index:20 }
.tabs{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:stretch; gap:0; overflow-x:auto }
.tabs::-webkit-scrollbar{ display:none }
.tab{ display:inline-flex; align-items:center; gap:14px; padding:22px 28px; font-family:var(--jp); font-weight:900; font-size:16px; letter-spacing:-0.01em; border:none; background:transparent; color:rgba(255,255,255,0.6); cursor:pointer; position:relative; transition:color .15s ease,background .15s ease; white-space:nowrap; text-decoration:none }
.tab:first-child{ padding-left:0 }
.tab:hover{ color:#fff }
.tab.is-active{ color:#fff; background:var(--red) }
.tab.is-active:first-child{ padding-left:28px }
.tab .label-wrap{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.05 }
.tab-en{ font-family:var(--en); font-weight:800; font-size:11px; letter-spacing:.18em; display:block; opacity:.6; margin-bottom:2px }
.tab.is-active .tab-en{ opacity:.9 }

.list{ padding:80px 0 120px; background:var(--cream) }
.list-head{ max-width:var(--maxw); margin:0 auto 40px; padding-inline:var(--gutter); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap }
.list-head .count-line{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; opacity:.7; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.list-head .count-line .big{ font-family:var(--en); font-weight:900; font-size:32px; color:var(--red); letter-spacing:-0.02em; line-height:1 }
.list-head .count-line .sub{ opacity:.5 }

.cards{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:28px }
.card{ display:flex; flex-direction:column; border:2px solid #000; background:#fff; transition:transform .15s ease,box-shadow .15s ease }
.card:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 var(--red) }
.card-thumb{ aspect-ratio:16/10; background:var(--cream); position:relative; overflow:hidden; border-bottom:2px solid #000 }
.card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.card:hover .card-thumb img{ transform:scale(1.05) }
.thumb--default{ display:flex; align-items:center; justify-content:center; position:relative; color:#fff; background:#000; overflow:hidden }
.thumb--default::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:32px 32px }
.thumb--default::after{ content:""; position:absolute; right:-30px; bottom:-30px; width:140px; height:140px; background:var(--red); transform:rotate(45deg) }
.thumb--default .ph{ position:relative; z-index:1; font-family:var(--en); font-weight:900; font-size:48px; letter-spacing:-0.02em; line-height:.95; text-align:center; color:#fff; text-shadow:3px 3px 0 var(--red) }
.thumb--default .ph small{ display:block; font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.25em; margin-top:8px; text-shadow:none; opacity:.85; color:#fff }
.card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1 }
.card-meta{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.05em }
.card-cat{ display:inline-flex; align-items:center; justify-content:center; min-width:88px; box-sizing:border-box; text-align:center; font-family:var(--en); font-weight:800; letter-spacing:.1em; font-size:11px; padding:4px 8px; color:#fff; background:var(--red) }
.card-date{ opacity:.6 }
.card-title{ font-family:var(--jp); font-weight:700; font-size:16px; line-height:1.5; margin:12px 0 0; letter-spacing:-0.005em; text-wrap:pretty; flex:1 }
.card-foot{ margin-top:18px; display:flex; justify-content:space-between; align-items:center; font-family:var(--en); font-weight:800; font-size:13px; letter-spacing:.1em; opacity:.55; transition:opacity .15s }
.card:hover .card-foot{ opacity:1 }
.card-foot .arrow{ transition:transform .25s }
.card:hover .card-foot .arrow{ transform:translateX(6px); color:var(--red) }

.list-empty{ max-width:var(--maxw); margin:40px auto 0; padding-inline:var(--gutter); font-family:var(--jp); font-weight:700; opacity:.7 }

/* ページネーション */
.pager{ max-width:var(--maxw); margin:80px auto 0; padding-inline:var(--gutter); display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--en); font-weight:800; font-size:16px; letter-spacing:.05em }
.pager a,.pager .ellipsis,.pager .current{ display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:48px; padding:0 14px; border:2px solid #000; background:#fff; color:#000; transition:background .15s,color .15s,transform .15s }
.pager .ellipsis{ border:none; background:transparent; cursor:default; opacity:.4; min-width:28px }
.pager a:hover{ background:#000; color:#fff; transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--red) }
.pager .current{ background:#000; color:#fff; pointer-events:none }
.pager .prev,.pager .next{ padding:0 18px; letter-spacing:.1em }
.pager .prev.disabled,.pager .next.disabled{ opacity:.25; pointer-events:none }

/* =========================================================================
   記事詳細（/news/detail.php）
   ========================================================================= */
.article-head{ background:var(--cream); padding:80px 0 64px; border-bottom:2px solid #000; position:relative; overflow:hidden }
.article-head-inner{ width:min(880px, calc(100% - 2 * var(--gutter))); margin-inline:auto; position:relative; z-index:2 }
.article-head .eyebrow{ color:var(--red) }
.article-meta{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; margin:18px 0 24px }
.article-cat{ font-family:var(--en); font-weight:800; letter-spacing:.1em; font-size:12px; padding:5px 10px; background:#000; color:#fff }
.article-date{ opacity:.65 }
h1.article-title{ font-family:var(--jp); font-weight:900; font-size:clamp(32px,4.4vw,56px); line-height:1.2; letter-spacing:-0.03em; margin:0; text-wrap:balance; color:#000 }

/* アイキャッチ（全幅） */
.article-thumb{ background:#000; padding:0; display:flex; justify-content:center; border-bottom:2px solid #000 }
.article-thumb-inner{ max-width:1200px; width:100%; aspect-ratio:16/8; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden }
.article-thumb-inner img{ width:100%; height:100%; object-fit:cover }
.article-thumb-inner.is-default{ background:repeating-linear-gradient(45deg,var(--red) 0 18px,#e0203f 18px 36px) }
.article-thumb-inner .ph{ font-family:var(--en); font-weight:900; font-size:120px; letter-spacing:-0.03em; text-shadow:6px 6px 0 #000; line-height:.9; text-align:center }
.article-thumb-inner .ph small{ display:block; font-family:var(--mono); font-size:14px; font-weight:400; letter-spacing:.3em; margin-top:8px; text-shadow:none; opacity:.95 }

/* 本文（幅780px） */
.article-wrap{ background:#fff; padding:96px 0 120px; display:flex; justify-content:center }
.article-body{ width:min(780px, calc(100% - 2 * var(--gutter))); font-family:var(--jp); font-size:17px; line-height:1.95; letter-spacing:.01em; color:#0d0d0d; overflow-wrap:anywhere; word-break:break-word }
.article-body > * + *{ margin-top:1.5em }
.article-body p{ margin:0 }

/* 見出し h3/h4/h5（h1/h2はページ構造側で予約） */
.article-body h3{ font-family:var(--jp); font-weight:900; font-size:clamp(24px,2.4vw,32px); line-height:1.4; letter-spacing:-0.02em; margin:2.4em 0 1em; padding:0 0 .5em; border-bottom:3px solid #000; position:relative }
.article-body h3::before{ content:""; display:inline-block; width:12px; height:24px; background:var(--red); margin-right:14px; transform:translateY(4px) }
.article-body h4{ font-family:var(--jp); font-weight:900; font-size:clamp(20px,1.9vw,24px); line-height:1.5; letter-spacing:-0.015em; margin:2em 0 .6em; padding-left:16px; border-left:5px solid var(--red) }
.article-body h5{ font-family:var(--jp); font-weight:900; font-size:17px; line-height:1.6; letter-spacing:-0.01em; margin:1.6em 0 .4em; color:#000; display:inline-flex; align-items:baseline; gap:8px }
.article-body h5::before{ content:"//"; font-family:var(--mono); font-size:13px; color:var(--red); font-weight:700; letter-spacing:0 }

/* リスト */
.article-body ul,.article-body ol{ padding-left:1.6em; margin:1.2em 0 }
.article-body ul li,.article-body ol li{ margin:.4em 0; line-height:1.85 }
.article-body ol li::marker{ color:var(--red); font-family:var(--en); font-weight:800 }
.article-body ul li{ list-style:none; position:relative; padding-left:6px }
.article-body ul li::before{ content:""; position:absolute; left:-20px; top:13px; width:10px; height:2px; background:var(--red) }

/* リンク */
.article-body a{ color:#000; border-bottom:2px solid var(--red); padding-bottom:1px; transition:background .15s,color .15s; font-weight:700 }
.article-body a:hover{ background:var(--red); color:#fff }
.article-body a[target="_blank"]::after{ content:"↗"; display:inline-block; margin-left:3px; font-family:var(--en); font-weight:800; font-size:.85em }

/* インラインコード */
.article-body code{ font-family:var(--code); font-size:.9em; background:#f1efe9; padding:2px 7px; border:1px solid rgba(0,0,0,0.12); border-radius:2px; color:#000 }
.article-body pre code{ background:transparent; border:none; padding:0; color:inherit; border-radius:0 }

/* 強調・em */
.article-body strong{ font-weight:900; background:linear-gradient(transparent 60%, rgba(248,39,79,0.25) 60%); padding:0 .04em }
.article-body em{ font-style:normal; color:var(--red); font-weight:700 }

/* ピンクマーカー下線（class="marker" で固定） */
.article-body .marker{ background:linear-gradient(transparent 58%, rgba(248,39,79,0.45) 58%, rgba(248,39,79,0.45) 92%, transparent 92%); padding:0 .04em; font-weight:700 }

/* 引用（左縦線を使わない・背景＋囲み＋大引用符） */
.article-body blockquote{ margin:2.4em 0; padding:48px 36px 28px; background:var(--cream); border:2px solid #000; font-family:var(--jp); font-weight:500; position:relative }
.article-body blockquote::before{ content:"\201C"; position:absolute; left:18px; top:-30px; font-family:var(--en); font-weight:900; font-size:140px; line-height:1; color:var(--red); text-shadow:4px 4px 0 #000; pointer-events:none }
.article-body blockquote p{ font-size:17px; line-height:1.9; margin:0; font-weight:500 }
.article-body blockquote cite{ display:block; margin-top:18px; padding-top:14px; font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.12em; opacity:.6; border-top:1px dashed rgba(0,0,0,0.3) }

/* 注意書き（引用デザインが土台。引用符 ::before は付けない／背景を薄ピンクに。
   class名 .note は contact の .confirm-head .note で使用済みのため .notice を採用） */
.article-body .notice{ margin:2.4em 0; padding:28px 36px; background:#fdecef; border:2px solid #000; font-family:var(--jp); font-weight:400; position:relative }
.article-body .notice p{ font-size:17px; line-height:1.9; margin:0; font-weight:400 }

/* 本文画像 */
.article-body img{ margin:2em auto; max-width:100%; height:auto; border:2px solid #000 }
.article-body figure{ margin:2em 0; display:flex; flex-direction:column; align-items:center }
.article-body figure img{ margin:0 0 12px }
.article-body figcaption{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; opacity:.65; text-align:center }

/* 動画埋め込み（YouTube等）：記事幅いっぱい・16:9で自動リサイズ（width/height属性より優先） */
.article-body iframe{ display:block; width:100%; max-width:100%; height:auto; aspect-ratio:16/9; margin:2em auto; border:2px solid #000 }
.article-body video{ display:block; width:100%; max-width:100%; height:auto; margin:2em auto; border:2px solid #000 }

/* 本文中の内部記事リンク埋め込みカード（横型・描画時に detail.php が生成。配色/フォント/角丸なしは一覧カードと統一） */
.news-embed-card{ display:flex; align-items:stretch; margin:2em 0; border:2px solid #000; background:#fff; color:#000; text-decoration:none; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease }
/* 本文汎用リンク(.article-body a)の装飾を打ち消す：赤下線・太字、hover時の全面ピンク塗り＋白文字を無効化 */
.article-body a.news-embed-card{ border:2px solid #000; padding-bottom:0; font-weight:400; color:#000 }
/* hover: 背景・文字色・枠線は変えず、左上への移動＋ピンクの影のみ */
.article-body a.news-embed-card:hover{ background:#fff; color:#000; transform:translate(-4px,-4px); box-shadow:8px 8px 0 var(--red) }
.news-embed-thumb{ flex:0 0 220px; align-self:stretch; aspect-ratio:16/10; background:var(--cream); border-right:2px solid #000; overflow:hidden; position:relative; display:block }
.article-body .news-embed-thumb img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; border:0; max-width:none }
.news-embed-thumb.thumb--default{ display:flex; align-items:center; justify-content:center; color:#fff; background:#000 }
.news-embed-thumb .ph{ font-family:var(--en); font-weight:900; font-size:30px; letter-spacing:-0.02em; line-height:.9; text-align:center; text-shadow:3px 3px 0 var(--red) }
.news-embed-thumb .ph small{ display:block; font-family:var(--mono); font-size:9px; font-weight:400; letter-spacing:.2em; margin-top:4px; text-shadow:none }
.news-embed-body{ flex:1 1 auto; min-width:0; padding:18px 22px; display:flex; flex-direction:column; justify-content:center; gap:10px }
.news-embed-meta{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.05em }
.news-embed-cat{ display:inline-flex; align-items:center; justify-content:center; min-width:88px; box-sizing:border-box; text-align:center; font-family:var(--en); font-weight:800; letter-spacing:.1em; font-size:11px; padding:4px 8px; color:#fff; background:var(--red) }
.news-embed-date{ opacity:.6 }
.news-embed-title{ font-family:var(--jp); font-weight:700; font-size:16px; line-height:1.5; letter-spacing:-0.005em; margin:0; text-wrap:pretty }
.article-body hr{ border:none; height:2px; background:#000; margin:3em 0; opacity:.15 }

/* コードブロック（ダークグレー・等幅・ブロック内のみ横スクロール） */
.article-body pre{ margin:2em 0; background:var(--code-bg); color:var(--code-ink); border:2px solid #000; padding:24px 26px; overflow-x:auto; font-family:var(--code); font-size:14px; line-height:1.75; letter-spacing:.01em; position:relative; box-shadow:6px 6px 0 var(--red) }
.article-body pre::before{ content:"CODE"; position:absolute; top:8px; right:14px; font-family:var(--en); font-weight:800; font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,0.3) }
.article-body pre code{ display:block; white-space:pre; color:inherit; font-size:inherit; line-height:inherit }
.article-body pre code .k{ color:var(--code-keyword) }
.article-body pre code .s{ color:var(--code-string) }
.article-body pre code .c{ color:var(--code-comment); font-style:italic }

/* 前/一覧/次 ナビ */
.article-nav{ background:#000; color:#fff; border-top:2px solid #000; padding:24px 0; display:flex; justify-content:center }
.article-nav-inner{ width:min(1200px, calc(100% - 2 * var(--gutter))); display:grid; grid-template-columns:1fr auto 1fr; gap:0; border:2px solid #fff }
.nav-cell{ padding:32px 28px; display:flex; flex-direction:column; gap:6px; border-right:2px solid #fff; color:#fff; transition:background .15s,color .15s; min-height:140px; justify-content:center }
.nav-cell:last-child{ border-right:none }
.nav-cell:hover{ background:#fff; color:#000 }
.nav-cell .label{ font-family:var(--en); font-weight:900; font-size:12px; letter-spacing:.18em; opacity:.6; display:flex; align-items:center; gap:8px }
.nav-cell .arrow{ font-family:var(--en); font-weight:900; font-size:24px; color:var(--red) }
.nav-cell .nav-title{ font-family:var(--jp); font-weight:700; font-size:15px; line-height:1.5; letter-spacing:-0.005em; margin:0; text-wrap:pretty; max-width:36ch }
.nav-cell.prev{ text-align:left }
.nav-cell.next{ text-align:right; align-items:flex-end }
.nav-cell.next .nav-title{ margin-left:auto }
.nav-cell.list{ justify-content:center; align-items:center; flex:0 0 auto; width:200px; background:#000; padding:16px 28px }
.nav-cell.list .icon{ font-family:var(--en); font-weight:900; font-size:40px; line-height:1; color:var(--red); letter-spacing:-0.03em }
.nav-cell.list .label{ justify-content:center; opacity:.85 }
.nav-cell.list:hover{ background:#fff; color:#000 }   /* 常時黒背景の打ち消しでhover反転が効かなくなるため明示 */
.nav-cell.disabled{ opacity:.35; pointer-events:none }

/* 関連記事 */
.related{ background:var(--cream); padding:96px 0 120px; border-top:2px solid #000 }
.related-inner{ width:min(1200px, calc(100% - 2 * var(--gutter))); margin-inline:auto }
.related-head{ margin-bottom:48px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap }
.related-head h2{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,3vw,44px); line-height:1.0; letter-spacing:-0.03em; margin:12px 0 0 }
.related-head h2 .en{ font-family:var(--en); font-weight:900; font-size:.7em; margin-right:.4em; opacity:.5 }
.related-head .more-link{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; border-bottom:2px solid var(--red); padding-bottom:2px }
.related-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.rcard{ display:flex; flex-direction:column; border:2px solid #000; background:#fff; transition:transform .15s,box-shadow .15s }
.rcard:hover{ transform:translate(-4px,-4px); box-shadow:8px 8px 0 var(--red) }
.rcard-thumb{ aspect-ratio:16/10; border-bottom:2px solid #000; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--en); font-weight:900; font-size:32px; text-shadow:3px 3px 0 #000; background:repeating-linear-gradient(45deg,var(--red) 0 14px,#e0203f 14px 28px) }
.rcard-thumb img{ width:100%; height:100%; object-fit:cover }
.rcard-thumb small{ display:block; font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.2em; margin-top:4px; text-shadow:none; opacity:.9 }
.rcard-body{ padding:20px 22px 24px }
.rcard-meta{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px }
.rcard-cat{ display:inline-flex; align-items:center; justify-content:center; min-width:88px; box-sizing:border-box; text-align:center; font-family:var(--en); font-weight:800; letter-spacing:.1em; font-size:11px; padding:4px 8px; color:#fff; background:var(--red) }
.rcard-date{ opacity:.65 }
.rcard-title{ font-family:var(--jp); font-weight:700; font-size:15px; line-height:1.55; margin:12px 0 0; text-wrap:pretty }

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width:1280px){
  .cards{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:960px){
  .phero{ padding:48px 0 40px }
  .phero-inner{ grid-template-columns:1fr; gap:24px }
  .phero-mascot{ justify-content:center }
  .phero-mascot img{ height:220px }
  .tab{ padding:16px 18px; font-size:15px }
  .tab-en{ font-size:10px }
  .tab:first-child{ padding-left:0 }
  .list{ padding:48px 0 80px }
  .list-head .count-line{ font-size:12px }
  .list-head .count-line .big{ font-size:28px }
  .cards{ grid-template-columns:1fr }
  .card-title{ font-size:17px; text-wrap:wrap }   /* SP：pretty解除＝カード幅いっぱいで素直に折り返す */
  .pager{ flex-wrap:wrap; font-size:14px }

  .article-head{ padding:48px 0 40px }
  .article-meta{ font-size:11px }
  .article-cat{ font-size:11px }
  h1.article-title{ font-size:30px; text-wrap:wrap }   /* balance解除：画面幅いっぱいで素直に折り返す */
  .article-thumb-inner .ph{ font-size:64px }
  .article-thumb-inner .ph small{ font-size:11px }
  .article-wrap{ padding:56px 0 80px }
  .article-body{ font-size:16px; line-height:1.9 }
  .article-body h3{ font-size:23px }
  .article-body h4{ font-size:19px }
  .article-body h5{ font-size:16px }
  .article-body code{ font-size:.88em }
  .article-body blockquote::before{ font-size:110px }
  .article-body blockquote p{ font-size:16px }
  .article-body .notice p{ font-size:16px }
  .article-body pre{ font-size:13px }
  /* 埋め込みカード SP：横型維持・サムネ縮小・文字調整 */
  .news-embed-card{ margin:1.6em 0 }
  .news-embed-thumb{ flex-basis:108px }
  .news-embed-body{ padding:12px 14px; gap:7px }
  .news-embed-meta{ font-size:10px; gap:8px }
  .news-embed-cat{ min-width:72px; font-size:10px; padding:3px 6px }
  .news-embed-title{ font-size:14px; line-height:1.45; text-wrap:wrap }
  .news-embed-thumb .ph{ font-size:20px }
  .article-nav-inner{ grid-template-columns:1fr }
  .nav-cell{ border-right:none; border-bottom:2px solid #fff; min-height:auto }
  .nav-cell:last-child{ border-bottom:none }
  .nav-cell.list{ width:auto }
  .nav-cell.next{ text-align:left; align-items:flex-start }
  .nav-cell.next .nav-title{ margin-left:0 }
  .nav-cell .nav-title{ text-wrap:wrap; max-width:none }   /* SPはセル幅いっぱいで折り返す（pretty/36ch解除）*/
  .nav-cell .arrow{ font-size:22px }
  .nav-cell.list .icon{ font-size:32px }
  .related{ padding:56px 0 80px }
  .related-head{ flex-wrap:nowrap; gap:12px }          /* 見出しの右隣にリンクを並べ、左右端寄せ */
  .related-head h2{ font-size:30px }
  .related-head .more-link{ white-space:nowrap; font-size:12px }
  .rcard-thumb{ font-size:30px }
  .rcard-title{ font-size:16px; text-wrap:wrap }   /* SP：pretty解除＝カード幅いっぱいで素直に折り返す */
  .related-cards{ grid-template-columns:1fr }
}
@media (min-width:961px) and (max-width:1280px){
  .cards{ grid-template-columns:repeat(2,1fr) }
}