@charset "utf-8";

/* article-5「道」に繋がるプラットフォーム専用 */
body { background: #222626; }
.n5-main { overflow: hidden; background: #222626; color: #fff; font-family: var(--font-hiragino); font-feature-settings: "palt"; }
.n5-hero { position: relative; z-index: 0; width: 100%; }
.n5-hero img { display: block; width: 100%; height: auto; }
.n5-body { padding: 3rem 0 11.8rem; background: #000; }
.n5-body__content { width: 54.6rem; max-width: 90%; margin: 0 auto; }
.n5-body__inner { margin: 0 2.5rem; }
.n5-body__inner > p { margin-bottom: 3.4rem; color: #fff; line-height: 2.08; letter-spacing: .03em; word-wrap: break-word; }
.n5-body__inner > p:last-child { margin-bottom: 0; }
.n5-lead { margin-bottom: 7rem; text-align: center; color: #fff; }
.n5-lead__ttl { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.6; letter-spacing: .06em; }
.n5-lead__en { margin-top: 1.4rem; font-size: 1.4rem; font-style: italic; letter-spacing: .06em; }
.n5-body strong { display: inline; font-size: 1.8rem; font-weight: 700; }
.n5-body .inline-banner { margin: 5.6rem -2.5rem; }
.n5-body .inline-banner a { display: block; border-radius: var(--radius-card); overflow: hidden; }
.n5-body .inline-banner img { display: block; width: 100%; aspect-ratio: 700 / 258; object-fit: cover; }
.n5-cards-ttl { margin: 7.2rem 0 7.07rem; text-align: center; font-size: 3.95rem; font-weight: 700; letter-spacing: .06em; color: #fff; }
.n5-cards-ttl span { display: inline-block; transform: skewX(-7deg); }
.banner-list { margin-bottom: 18.9rem; }
#footer { padding: 0 1.95rem 6.27rem; background: none; color: #fff; position: relative; }
#footer::before { content: ''; position: absolute; left: 1.95rem; right: 1.95rem; bottom: 4.2rem; height: 8.6rem; border-radius: 0 0 var(--radius-header) var(--radius-header); background: rgba(0,0,0,.15); filter: blur(1.3rem); pointer-events: none; }
.footer__wrap { padding-bottom: 9.03rem; background: #222626; }
.n3-footer-line { margin: 0 auto 7.82rem; width: 88.7%; max-width: 121.1rem; height: 0; border: 0; border-top: 1px solid rgba(255,255,255,.2); }
.n5-page .header__inner { background: rgba(0,0,0,.2); transition: background 0.3s ease-out 0.28s; }
/* 水色の光彩は別の層（::before）に描く（KENTA指示 2026-09-29）。
   ・スクロールした内容はステータスバーへ流れて入ること。iOS 26 Safari は画面の上端から8px以内に
     固定ヘッダーの光彩が入ると、それを拾ってステータスバーを灰色で塗りつぶす。
     SPのバーは上端から17pxなので、上側のにじみは最大8pxまで
   ・境目を clip で切ると線になるので NG。影の大きさだけで上側を8pxに収める
   上側の光彩の量に、左右と下も揃える（KENTA指示 2026-09-29）。
   1つ目：上下左右8pxの濃い光彩
   2つ目：7px縮めた15pxの光彩。以前の上側（4px下げて3px縮めた形の上辺）と同じにじみ方を四辺に当てる。
   どちらも外へのにじみは8pxで、四辺とも同じ光彩量になる */
.n5-page .header__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 8px rgba(0,255,255,.88), 0 0 15px -7px rgba(0,255,255,.88); pointer-events: none; transition: opacity 0.3s ease-out 0.28s; }
/* メニューを開いている間はバーの光彩を消す。パネルの後ろから光彩と黒い縁がはみ出して見えるため */
html.is-menu-open .n5-page .header__inner { transition: background 0s linear 0s; }
html.is-menu-open .n5-page .header__inner::before { opacity: 0; transition: opacity 0.15s linear 0s; }
/* ロゴは元色 #353b47 のため invert だけだと薄いグレーになる。一度黒にしてから反転して白100%に（KENTA指示）。
   メニューを開いた時の複製バー（.menu__bar）は白パネルの上なので元の色のまま */
.n5-page #header .header__logo img { position: relative; z-index: 1; filter: brightness(0) invert(1); }
.n5-page #header .header__menu span { background: #fff; }
.n5-page .footer__wrap { color: #fff; }
.n5-page .footer__logo img { filter: brightness(0) invert(1); }
@media (min-width: 768px) and (max-width: 1023px) {
  .n5-body__content { max-width: 89.3%; }
  .n5-body__inner > p { font-size: 1.32rem; line-height: 2.09; }
  .n5-body strong { font-size: 1.5rem; }
  .n5-lead { margin-bottom: 5.5rem; }
  .n5-lead__ttl { font-size: 2rem; }
  .n5-lead__en { font-size: 1.32rem; line-height: 2.09; }
  .n5-cards-ttl { margin: 5.2rem 0 5.7rem; font-size: 3.1rem; }
  .banner-list { margin-bottom: 14.9rem; }
  .n3-footer-line { margin-bottom: 5.8rem; }
  #footer { padding: 0 1.7rem 5rem; }
  #footer::before { left: 1.7rem; right: 1.7rem; bottom: 3.4rem; height: 6.9rem; filter: blur(1rem); }
  .footer__wrap { padding-bottom: 7rem; }
}
@media (max-width: 767px) {
  /* SPは専用画像 hero_sp3（375×375・KENTA支給）を <picture> で出し分け、横幅いっぱいに表示する */
  /* hero_sp3 も最下段1px（@2x は1行）が半透明で書き出されていて、下地が透けて白い線に見えた。
     下地を本文と同じ黒にし、その1pxははみ出させて切り落とす */
  .n5-hero { overflow: hidden; background: #000; }
  .n5-hero img { margin-bottom: -1px; }
  .n5-body { padding: 1rem 0 9.5rem; }
  .n5-body__content { width: auto; max-width: none; margin: 0 1.9rem; }
  .n5-body__inner { margin: 0; }
  .n5-body__inner > p { font-size: 1.4rem; line-height: 2; text-align: justify; }
  .n5-body strong { font-size: 1.6rem; }
  .n5-lead { margin-bottom: 4.5rem; }
  .n5-lead__ttl { font-size: 2rem; line-height: 1.65; letter-spacing: 0; }
  .n5-lead__en { margin-top: 1.2rem; font-size: 1rem; line-height: 2; }
  .n5-body .inline-banner { margin: 3.6rem 0; }
  .n5-cards-ttl { margin: 3.9rem 0 4.4rem; font-size: 2.6rem; }
  .banner-list { margin-bottom: 11rem; }
  .n3-footer-line { width: auto; margin: 0 1.9rem 4.6rem; max-width: none; }
  #footer { padding: 0 1.5rem 2.2rem; }
  #footer::before { left: 1.5rem; right: 1.5rem; bottom: 1.2rem; height: 4.7rem; filter: blur(.7rem); }
  .footer__wrap { padding-bottom: 2.4rem; }
}