@charset "utf-8";
/* ============================================================
   JRK Prototype – 共通スタイル
   フォント: サブセット（玄石ゴシック2 / しっぽりゴシックB2）
   ============================================================ */

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:root {
  --red: #e60012;
  --ink: #1a1a1a;
  --ink2: #1e1e1e;
  --page-bg: #f2f2f2;
  --card-border: #b3b3b3;
  --line: #dcdcdc;
  --jp: 'Gen Seki Gothic 2 Palt', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --shippori: 'Shippori Gothic B2 Palt', 'Hiragino Mincho ProN', serif;
  --page-w: 1440px;
}

body {
  font-family: var(--jp);
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-width: 1440px;   /* レスポンシブ未対応のため 1440px 未満にしない（横スクロール） */
}

/* ---- フォント・ユーティリティ ---- */
.f-shippori { font-family: var(--shippori); font-weight: 700; font-feature-settings: 'palt' 1; }
.f-gen-r { font-family: var(--jp); font-weight: 400; }
.f-gen-m { font-family: var(--jp); font-weight: 500; }
.f-gen-b { font-family: var(--jp); font-weight: 700; }
.palt { font-feature-settings: 'palt' 1; }

/* ---- アイコン ---- */
.mi-round {
  font-family: 'Material Icons Round';
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal;
  text-transform: none; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none;
}
.ms-sharp {
  font-family: 'Material Symbols Sharp';
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal;
  text-transform: none; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none;
}

/* ============================================================
   ページの土台
   ============================================================ */
.page {
  max-width: var(--page-w);
  margin: 0 auto;
  background: var(--page-bg);
  position: relative;
  overflow-x: clip;
}

/* ============================================================
   ヘッダー（ウィンドウ上端に固定 / 浮遊カード型）
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  pointer-events: none;
  min-width: 1440px;   /* 本体と同様に 1440px 未満にしない */
  will-change: transform;
}
.site-header .header-inner {
  width: 100%;
  max-width: var(--page-w);
  padding: 32px;
  pointer-events: auto;
}

/* 通常 / 縮小 状態の出し分け */
.header-compact { display: none; }
.site-header.is-shrunk .header-full { display: none; }
.site-header.is-shrunk .header-compact { display: block; }
.site-header.is-shrunk .header-inner { padding: 12px 32px; }

/* 白いカード */
.header-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px 16px 24px;
  position: relative;
  z-index: 2;
}

/* 行1：ユーティリティ / ロゴ / アイコン */
.h-row1 {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding: 0 8px;
}
.h-util {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--shippori);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink2);
  white-space: nowrap;
}
.h-logo { width: 102px; height: 74px; flex-shrink: 0; }
.h-logo img { width: 100%; height: 100%; }
.h-icons {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
.h-icons .ic {
  display: flex; align-items: center; justify-content: center;
  padding: 8px; cursor: pointer;
}
.h-icons .mi-round { font-size: 28px; color: #000; }

/* 行2：ナビ / ボタン */
.h-row2 {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
}
.h-row2 .spacer { flex: 1 0 0; min-width: 0; align-self: stretch; }
.h-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.h-nav .nav-item {
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
}
.h-nav .nav-item .label {
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
  font-family: var(--shippori); font-weight: 700;
  font-size: 19px; line-height: 1.2; letter-spacing: 1.14px;
  color: var(--ink2); white-space: nowrap;
  font-feature-settings: 'palt' 1;
}
.h-nav .nav-item .ms-sharp { font-size: 22px; color: #000; }
.h-cta {
  flex: 1 0 0; min-width: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px;
}
.btn-corp {
  background: #333;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 3px 4px;
  cursor: pointer;
}
.btn-corp .label {
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  font-family: var(--shippori); font-weight: 700;
  font-size: 17px; line-height: 1.2; color: #fff; white-space: nowrap;
  font-feature-settings: 'palt' 1;
}
.btn-corp .ms-sharp { font-size: 22px; color: #fff; }

/* 企業情報ページのヘッダー差分（左右ユーティリティ幅固定・ナビ大きめ） */
.header--corp .h-row1 { justify-content: space-between; padding: 0 16px; gap: 48px; }
.header--corp .h-util { flex: 0 0 400px; width: 400px; }
.header--corp .h-icons { flex: 0 0 400px; width: 400px; }
.header--corp .h-nav { gap: 4px; }
.header--corp .h-nav .nav-item { padding: 4px 6px; }
.header--corp .h-nav .nav-item .label { font-size: 19px; letter-spacing: 1.14px; padding: 0 4px; }
.header--corp .btn-corp .label { font-size: 17px; }

/* ---- 運行情報（公式トップのみ・カードに8px重なる） ---- */
.unkou-wrap {
  width: 100%;
  padding: 0 40px;
  margin-top: -8px;
  position: relative;
  z-index: 3;   /* ヘッダー（白カード）の上に重ねる */
}
.unkou {
  background: #f0f0f0;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.unkou-main {
  flex: 1 0 0; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
}
.unkou-title {
  display: flex; align-items: center;
  padding-right: 16px;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
  font-family: var(--jp); font-weight: 700;
  font-size: 16px; line-height: 1.2; color: var(--ink2);
  white-space: nowrap;
}
.unkou-regions {
  flex: 1 0 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.unkou-region {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.unkou-region .label {
  font-family: var(--shippori); font-weight: 700;
  font-size: 16px; line-height: 1.2; color: var(--ink2); white-space: nowrap;
}
.status {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.status--ok { border: 4px solid #278118; }
.status--warn { border: 3px solid var(--red); }
.status--warn .mk { font-family: var(--jp); font-weight: 700; font-size: 16px; color: var(--red); line-height: 1; }
.status--delay { background: var(--red); }
.status--delay .mk { font-family: var(--jp); font-weight: 700; font-size: 16px; color: #fff; line-height: 1; }
.unkou-side {
  border-left: 1px solid #b0b0b0;
  padding: 10px 16px;
  display: flex; flex-direction: column; align-items: flex-start;
  flex-shrink: 0;
}
.unkou-side .inner {
  height: 30px; display: flex; align-items: center;
}
.unkou-side .txt {
  padding: 0 8px;
  font-family: var(--jp); font-weight: 500;
  font-size: 16px; line-height: 1.2; color: var(--ink2); white-space: nowrap;
}
.unkou-side .ms-sharp { font-size: 16px; color: #000; }

/* ---- 縮小ヘッダー ---- */
.header-card--compact {
  padding: 13px 16px;
  gap: 0;
}
.compact-row {
  display: flex; align-items: center; gap: 48px; width: 100%;
}
.compact-row .c-logo {
  flex: 1 0 0; min-width: 0; height: 100%;
  display: flex; align-items: center; padding-left: 4px; overflow: hidden;
}
.compact-row .c-logo img { width: 44px; height: 32px; }
.header-compact .h-nav .nav-item .label { font-size: 16px; letter-spacing: 0.96px; }
.header-compact .h-nav .nav-item .ms-sharp { font-size: 18px; }
.header-compact .btn-corp .label { font-size: 16px; }
.header--corp .header-compact .h-nav .nav-item .label { font-size: 16px; letter-spacing: 0.96px; }

/* ============================================================
   ヒーロー（MV）
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 公式トップ MV */
.hero--top { height: 943px; }
.hero--top .hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-card {
  position: absolute;
  right: 0; bottom: 32px;
  width: 556px;
  max-width: 90%;
  background: #fff;
  border-radius: 16px 0 0 16px;
  padding: 20px 32px 20px 72px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 3;
}
.hero-card__swoosh { position: absolute; left: 24px; top: 25px; width: 41px; height: 25px; }
.hero-card .eyebrow {
  font-family: var(--shippori); font-weight: 700;
  font-size: 16px; line-height: 1.5; letter-spacing: 1.28px; color: #1a1a1a;
  padding: 5px 0; font-feature-settings: 'palt' 1;
}
.hero-card .title {
  font-family: var(--shippori); font-weight: 700;
  font-size: 28px; line-height: 1.2; letter-spacing: 0.98px; /* 3.5% に縮めて一行に収める */
  color: #1a1a1a; white-space: nowrap;
  font-feature-settings: 'palt' 1;
}
.hero-card .desc {
  font-family: var(--shippori); font-weight: 700;
  font-size: 13px; line-height: 1.5; letter-spacing: 1.3px; color: #1a1a1a;
  font-feature-settings: 'palt' 1; margin-top: 8px;
}
.hero-card__btn {
  align-self: flex-start;
  display: flex; align-items: center;
  background: #fff; border: 1px solid #acacac; border-radius: 4px;
  padding: 8px 12px; cursor: pointer;
}
.hero-card__btn .t {
  padding: 0 12px;
  font-family: var(--shippori); font-weight: 700;
  font-size: 16px; line-height: 1.5; letter-spacing: 1.28px; color: #1a1a1a;
  font-feature-settings: 'palt' 1; white-space: nowrap;
}
.hero-card__btn .ms-sharp { font-size: 18px; color: #1a1a1a; }

/* 企業情報 MV（公式トップ同様、固定ヘッダーが上端に重なる） */
.hero--corp {
  height: 898px;
  margin-top: 0;
}
.hero--corp .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-corp-container {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 56px; width: 540px; max-width: 92%;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  z-index: 2;
}
.hero-corp-container .eyebrow {
  font-family: var(--shippori); font-weight: 700;
  font-size: 18px; line-height: 2; letter-spacing: 2.16px; color: #fff; text-align: center;
  width: 100%; font-feature-settings: 'palt' 1;
}
.hero-corp-container .title {
  font-family: var(--shippori); font-weight: 700;
  font-size: 32px; line-height: 2; letter-spacing: 16px; color: #fff; text-align: center;
  width: 100%; font-feature-settings: 'palt' 1; padding-left: 16px; white-space: nowrap;
}
.hero-corp-container .btn-white {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 4px; padding: 4px 16px; cursor: pointer;
}
.hero-corp-container .btn-white .t {
  padding: 0 6px;
  font-family: var(--jp); font-weight: 500;
  font-size: 16px; line-height: 2; letter-spacing: 0.64px; color: #1a1a1a; white-space: nowrap;
}
.hero-corp-container .btn-white .ms-sharp { font-size: 18px; color: #1a1a1a; }

/* 公式トップは固定ヘッダーが MV 上端に重なる前提。MV自身が画面上端から始まる */
.hero--top { margin-top: 0; }

/* ============================================================
   セクション共通（白い角丸カード）
   ============================================================ */
.sections {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
}
.section {
  background: #fff;
  border-radius: 20px;
  padding: 56px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
}
.section--half { width: calc(50% - 8px); }
.section--magazine { background: transparent; border: 1px solid var(--red); overflow: hidden; }

/* 見出し（左に赤いバー） */
.sec-head { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sec-head::before {
  content: ""; position: absolute; left: -56px; top: 10px; bottom: 6px;
  width: 4px; background: var(--red);
}
.sec-head .title {
  font-family: var(--shippori); font-weight: 700;
  font-size: 42px; line-height: 1.5; letter-spacing: 1.68px; color: var(--ink);
  font-feature-settings: 'palt' 1;
}
.sec-head .sub {
  font-family: var(--shippori); font-weight: 700;
  font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink);
  font-feature-settings: 'palt' 1;
}
.sec-head--nobar::before { display: none; }

/* 「○○から探す」ボタン（中央） */
.more-center { display: flex; justify-content: center; width: 100%; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 4px;
  padding: 9px 16px; cursor: pointer;
}
.btn-outline .t {
  padding: 0 8px;
  font-family: var(--jp); font-weight: 700;
  font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink);
  white-space: nowrap;
}
.btn-outline .ms-sharp { font-size: 18px; color: #000; }

/* カード見出し（GenSeki B 28px ＋ chevron） */
.card-title {
  display: flex; align-items: center; gap: 6px; width: 100%; white-space: nowrap;
}
.card-title .t {
  font-family: var(--jp); font-weight: 700;
  font-size: 28px; line-height: 1.5; letter-spacing: 1.12px; color: var(--ink);
  font-feature-settings: 'palt' 1;
}
.card-title .ms-sharp { font-size: 24px; color: var(--ink); }

.link-row { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.link-row .t { font-family: var(--jp); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink); font-feature-settings: 'palt' 1; }
.link-row .ms-sharp { font-size: 18px; }

/* ============================================================
   公式トップ：鉄道・きっぷ
   ============================================================ */
.tetsudo { padding-bottom: 40px; }
.tetsudo .sec-body { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.tetsudo .group { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.tetsudo .group > h3 {
  margin: 0; font-family: var(--jp); font-weight: 700;
  font-size: 28px; line-height: 1.5; letter-spacing: 1.12px; color: var(--ink); font-feature-settings: 'palt' 1;
}
.tetsudo .row { display: flex; gap: 32px; align-items: stretch; width: 100%; }
.tetsudo .col-text { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.tetsudo .item .hd { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tetsudo .item .hd .t { font-family: var(--jp); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: 0.8px; color: var(--ink); font-feature-settings: 'palt' 1; }
.tetsudo .item .hd .ms-sharp { font-size: 22px; }
.tetsudo .item .ds { font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink); margin-top: 6px; }
.tetsudo .item { margin-bottom: 0; }
.tetsudo .item + .item { margin-top: 16px; }
.tetsudo .col-img { flex: 1 0 0; min-width: 0; position: relative; }
.tetsudo .col-img img { width: 100%; height: 100%; object-fit: contain; }
.tetsudo .col-img--map { background: #f8f9f7; min-height: 199px; }
.tetsudo .col-img--map img { object-fit: contain; object-position: bottom; }

/* ============================================================
   公式トップ：楽々お得（4カード・flex-wrap）
   ============================================================ */
.cards-flex { display: flex; flex-wrap: wrap; gap: 32px; width: 100%; align-items: flex-start; }
.mini-card { flex: 1 0 0; min-width: 200px; display: flex; flex-direction: column; gap: 12px; }
.mini-card .thumb { width: 100%; aspect-ratio: 240 / 151; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mini-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-card .thumb--contain img { object-fit: contain; }
.mini-card .meta { display: flex; flex-direction: column; gap: 2px; }
.mini-card .meta .hd { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.mini-card .meta .hd .t { font-family: var(--jp); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: 0.8px; color: var(--ink); }
.mini-card .meta .hd .ms-sharp { font-size: 22px; }
.mini-card .meta .ds { font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink); }
.mini-card .thumb--jqyupo { background: #ed3033; }

/* ============================================================
   公式トップ：おでかけ（D&S列車 ＋ おすすめ）
   ============================================================ */
.odekake .sec-body { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.odekake .two-col { display: flex; gap: 48px; align-items: flex-start; width: 100%; }
.odekake .feature { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.odekake .feature .ph { width: 100%; aspect-ratio: 688 / 308; }
.odekake .feature .ph img { width: 100%; height: 100%; object-fit: cover; }
.odekake .feature .ph--bordered { border: 1px solid #1a1a1a; }

/* D&S 列車リンク：2列×5 を横並び → 1440px未満で縦積み（要件#5） */
.ds-cols { display: flex; gap: 16px; width: 100%; }
.ds-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ds-link { display: flex; gap: 8px; align-items: center; width: 100%; }
.ds-link .tag {
  width: 100px; flex-shrink: 0;
  border: 1px solid #999; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  padding: 2px 6px;
  font-family: var(--jp); font-weight: 400; font-size: 13px; line-height: 1.5; letter-spacing: 0.52px;
  color: var(--ink); white-space: nowrap; font-feature-settings: 'palt' 1;
}
.ds-link .nm { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ds-link .nm .t { font-family: var(--jp); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink); font-feature-settings: 'palt' 1; }
.ds-link .nm .ms-sharp { font-size: 16px; }

.osusume-links { display: flex; flex-direction: column; gap: 16px; width: 100%; }

/* ============================================================
   公式トップ：くらし / 安心・安全
   ============================================================ */
.feature-row { display: flex; gap: 48px; width: 100%; }
.feature-row--center { align-items: center; }
.feature-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.feature-col .ph { width: 100%; aspect-ratio: 688 / 308; overflow: hidden; }
.feature-col .ph img { width: 100%; height: 100%; object-fit: cover; }
.feature-col .ds { font-family: var(--jp); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0.56px; color: #000; font-feature-settings: 'palt' 1; }
.feature-col .sublinks { display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* ============================================================
   公式トップ：開催中のイベント（カルーセル）
   ============================================================ */
.events .carousel-wrap { display: flex; flex-direction: column; gap: 24px; width: 100%; align-items: center; }
.carousel { display: flex; gap: 40px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.event-card { width: 282px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.event-card .thumb { width: 100%; aspect-ratio: 320 / 200; border-radius: 4px; overflow: hidden; }
.event-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-card .cap { font-family: var(--jp); font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink); }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 16px 24px; }
.carousel-nav .ms-sharp { font-size: 20px; color: #000; cursor: pointer; }
.carousel-nav .arr-disabled { opacity: 0.2; }
.dot { width: 16px; height: 16px; border-radius: 999px; background: #d9d9d9; cursor: pointer; }
.dot.is-active { background: #707070; }

/* ============================================================
   お知らせ（ニュースリスト）
   ============================================================ */
.news .news-list { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.news .news-row { display: flex; gap: 4px; align-items: center; width: 100%; }
.news .date { width: 160px; flex-shrink: 0; font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink); font-feature-settings: 'palt' 1; }
.news .body { display: flex; gap: 10px; align-items: center; min-width: 0; }
.news .cat { border: 1px solid #ccc; border-radius: 4px; padding: 2px 6px; min-width: 106px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--jp); font-weight: 400; font-size: 13px; line-height: 1.5; letter-spacing: 0.52px; color: var(--ink); white-space: nowrap; }
.news .ttl { display: inline-flex; gap: 4px; align-items: center; font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: var(--ink); font-feature-settings: 'palt' 1; }
.news .ttl .ms-sharp { font-size: 16px; }
.news .ttl .txt { overflow: hidden; text-overflow: ellipsis; }
.news .head-row { display: flex; align-items: center; width: 100%; }
.news .sec-head .title { font-size: 28px; letter-spacing: 1.12px; }
.news .news-foot { display: flex; flex-direction: column; gap: 32px; width: 100%; }

/* ============================================================
   九州から、元気を！ / わたしたちの夢を実現する取り組み（マガジン6枚）
   ============================================================ */
.magazine-head { flex-direction: row; gap: 24px; align-items: flex-start; }
.magazine-head .swoosh { width: 69px; height: 57px; flex-shrink: 0; }
.magazine-head .hgroup { display: flex; flex-direction: column; gap: 8px; }
.magazine-head .title { font-size: 38px; letter-spacing: 7.22px; white-space: nowrap; }
.magazine-head .sub { font-family: var(--shippori); font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: #000; font-feature-settings: 'palt' 1; }
.mag-title-corp { font-family: var(--shippori); font-weight: 700; font-size: 38px; line-height: 1.5; letter-spacing: 1.52px; color: var(--red); font-feature-settings: 'palt' 1; }

.mag-grid { display: flex; flex-wrap: wrap; gap: 40px; width: 100%; align-items: flex-start; }
.mag-card { flex: 1 0 0; min-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.mag-card .ph { width: 100%; aspect-ratio: 394.67 / 194.68; overflow: hidden; background: #fff; }
.mag-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.mag-card .ph--contain img { object-fit: contain; }
.mag-card .meta { display: flex; flex-direction: column; gap: 6px; }
.mag-card .cat { font-family: var(--jp); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0.56px; color: #000; font-feature-settings: 'palt' 1; }
.mag-card .ttl { font-family: var(--jp); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: 0.8px; color: #000; font-feature-settings: 'palt' 1; }
.mag-card .ttl--shippori { font-family: var(--shippori); font-weight: 700; }
.mag-card .ds { font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: #000; font-feature-settings: 'palt' 1; }
.mag-foot {
  background: #fff; border-radius: 4px; width: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 28px 33px; overflow: hidden;
}
.mag-foot .lk { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.mag-foot .lk .t { font-family: var(--shippori); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: 0.8px; color: var(--ink2); font-feature-settings: 'palt' 1; }
.mag-foot .lk .ms-sharp { font-size: 22px; color: #000; }
.mag-foot--corp .lk .t { font-size: 16px; letter-spacing: 0.64px; }

/* ============================================================
   企業情報：フルワイド画像バンド
   ============================================================ */
.band { position: relative; width: 100%; aspect-ratio: 1440 / 640; overflow: hidden; }
.band > .band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__box {
  position: absolute; right: 0; bottom: 0; width: 600px; max-width: 80%;
  background: #fff; border-radius: 2px;
  padding: 24px 32px 24px 48px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.band__box .hgroup { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.band__box .hgroup::before { content: ""; position: absolute; left: -48px; top: 37px; bottom: 8px; width: 6px; background: var(--red); }
.band__box .label { font-family: var(--jp); font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: #1a1a1a; font-feature-settings: 'palt' 1; }
.band__box .label--shippori { font-family: var(--shippori); }
.band__box .ttl { font-family: var(--shippori); font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: 1.04px; color: #1a1a1a; font-feature-settings: 'palt' 1; }
.band__box .btn-grey {
  background: #f5f5f5; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 16px; overflow: hidden;
}
.band__box .btn-grey .t { padding: 0 6px; font-family: var(--jp); font-weight: 500; font-size: 16px; line-height: 2; letter-spacing: 0.64px; color: #1a1a1a; white-space: nowrap; font-feature-settings: 'salt' 1, 'palt' 1; }
.band__box .btn-grey .ms-sharp { font-size: 18px; color: #1a1a1a; }

/* 企業情報の Sections1（ニュース＋6枚）：背景は薄いベージュ */
.sections--corp { padding: 24px; display: flex; flex-direction: column; gap: 24px; background: #fbf9f4; }
.sections--corp .stack { display: flex; flex-direction: column; gap: 24px; }

/* ============================================================
   パンくず / フッター
   ============================================================ */
.breadcrumb { background: #fff; padding: 26px 56px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.breadcrumb .crumbs { flex: 1 0 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb .crumbs a { font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: #666; font-feature-settings: 'palt' 1; white-space: nowrap; }
.breadcrumb .crumbs a.current { font-weight: 500; color: #1a1a1a; }
.breadcrumb .crumbs .sep { width: 24px; height: 24px; flex-shrink: 0; }
.breadcrumb .to-top { width: 48px; height: 48px; flex-shrink: 0; border-radius: 999px; background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.breadcrumb .to-top .ms-sharp { font-size: 24px; color: #fff; }

.footer { background: #494949; padding: 64px 88px; color: #fff; display: flex; flex-direction: column; gap: 48px; }
.footer__cols { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; width: 1272px; max-width: 100%; }
.footer__col {
  flex: 1 0 0; min-width: 200px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 2px solid var(--red); padding-top: 16px;
}
.footer__col h4 { margin: 0; font-family: var(--shippori); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: 0.8px; color: #fff; font-feature-settings: 'palt' 1; }
.footer__col a { font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: #fff; }
.footer__bottom { display: flex; gap: 24px; align-items: center; width: 100%; }
.footer__logo { width: 102px; height: 74px; flex-shrink: 0; }
.footer__bottom-right { flex: 1 0 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: flex-end; }
.footer__copy { flex: 1 0 0; min-width: 0; font-family: var(--jp); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: 0.48px; color: #fff; }
.footer__linkcol { width: 248.5px; display: flex; flex-direction: column; gap: 6px; }
.footer__linkcol a { font-family: var(--jp); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.64px; color: #fff; }

/* ============================================================
   レスポンシブ：初期幅(1440px)より狭いとき
   ============================================================ */
/* レスポンシブ未対応のため、表示は 1440px 固定（min-width で 1440px 未満にしない）。
   1440px 未満のビューポートでは横スクロールで全体を表示する。 */

/* ============================================================
   画像比率の固定（修正）
   aspect-ratio ボックス内の画像を絶対配置にして、
   中身の自然比でボックスが伸びるのを防ぐ
   ============================================================ */
.odekake .feature .ph,
.feature-col .ph,
.mini-card .thumb,
.mag-card .ph,
.event-card .thumb { position: relative; overflow: hidden; }
.odekake .feature .ph > img,
.feature-col .ph > img,
.mini-card .thumb > img,
.mag-card .ph > img,
.event-card .thumb > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.mini-card .thumb--contain > img,
.mag-card .ph--contain > img { object-fit: contain; }

/* 鉄道・きっぷ：画像列（ネット予約／路線図）の比率固定 */
.tetsudo .col-img { position: relative; }
.tetsudo .col-img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.tetsudo .col-img--map {
  align-self: flex-start;   /* 行の高さに引き伸ばされない */
  height: 199px;            /* Figma 同様の固定高さ */
}
/* 路線図は Figma 同様、枠（224×199）いっぱいに伸ばす（object-fit: fill） */
.tetsudo .col-img--map > img { object-fit: fill; object-position: bottom; }

/* ============================================================
   背景色（Figma 設定の反映）
   ============================================================ */
/* 公式トップ Main：Sections 1 = 薄ベージュ→ピンクのグラデーション、
   Sections 2 も同じピンク（全体に一つのグラデーションを敷く） */
.sections--top {
  background: linear-gradient(180deg, #faf7f0 0%, #fcf7f7 70%, #fcf7f7 100%);
}