/* ============================================
   PAAN Corporate Site v2
   menupaan.com 完全踏襲、 色のみ Royal Navy 系に置換
   ============================================ */

:root {
  /* === Color tokens === */
  /* menupaan: 主軸赤 #9B1C31 → PAAN: 主軸紺 #1A2E5C */
  --paan-primary:      #1A2E5C;   /* 主軸 royal navy (= menupaan #9B1C31 相当) */
  --paan-primary-deep: #0E1C3D;   /* hover 用 deep (= menupaan #7A1025 相当) */
  --paan-primary-soft: #6B7DA0;   /* sub label 紺グレー (= menupaan #C27680 相当) */
  --paan-gold:         #C9A961;   /* heritage gold (= menupaan diners theme と共通) */

  /* === Surfaces & lines === */
  --paan-bg:        #FFFFFF;
  --paan-card:      #FAFBFD;       /* 微寒色 (紺系の極淡い背景、 旧 #FDFAFB から青寄りへ) */
  --paan-line:      #E4E8F0;       /* menupaan #F0E4D9 相当 (紺系) */
  --paan-line-2:    #E0E5ED;       /* footer border 相当 (紺系統) */

  /* === Type colors === */
  --paan-ink:       #1A2040;       /* 本文 (= menupaan #3A1420 相当の濃紺) */
  --paan-ink-mid:   #5A6378;       /* 中間 (= menupaan #7A6968 相当) */
  --paan-ink-soft:  #8898B2;       /* 弱 (= menupaan #C27680 相当) */
}

* { margin:0; padding:0; box-sizing:border-box; }

/* v30.37: html背景を明示 (=ページ遷移時の黒チラつき防止) */
html {
  background:#FFFFFF;
}

body {
  font-family:'Noto Sans JP', -apple-system, 'Helvetica Neue', sans-serif;
  background:#FFFFFF;
  color:var(--paan-ink);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* fixed header オフセット (menupaan踏襲) */
  padding-top:96px;
}

html { scroll-padding-top:108px; scroll-behavior:smooth; }

a { color:inherit; text-decoration:none; }

img { max-width:100%; height:auto; display:block; }

/* ============================================
   HEADER — menupaan.com 完全踏襲 (fixed + blur)
   ============================================ */
.mp-site-header {
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--paan-line);
  background:rgba(255,255,255,0.96);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  font-family:'Noto Sans JP', -apple-system, sans-serif;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  will-change:transform;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
}

.mp-site-header.mp-scrolled {
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}

.mp-site-header a { text-decoration:none; color:inherit; }

/* ロゴ — menupaan の MENU-PAAN 表記と完全同形式
   v3 (2026-05-10 ろくちゃん指示「ヘッダーnavの中央揃え微調整」):
   flex:1 を持たせて右側の mp-header-spacer (= flex:1) と対称化、
   ロゴ幅に依存せず mp-lp-nav が画面物理中央に揃う仕組み。 */
.mp-site-logo {
  font-family:'Marcellus', 'Noto Serif JP', serif;
  font-size:26px;
  color:var(--paan-primary);
  letter-spacing:3px;
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  white-space:nowrap;
  flex-shrink:0;
  flex:1;
  justify-content:flex-start;
}

/* LP ナビ (menupaan踏襲: 中央寄せ、 下線 active 表示) */
.mp-lp-nav {
  display:flex;
  align-items:center;
  gap:28px;
  flex:1;
  justify-content:center;
}

.mp-lp-link {
  font-size:13px;
  letter-spacing:0.06em;
  color:#5a6378;
  padding:6px 2px;
  position:relative;
  transition:color 0.15s;
  white-space:nowrap;
}

.mp-lp-link:hover {
  color:var(--paan-primary);
}

.mp-lp-link.active {
  color:var(--paan-primary);
  font-weight:500;
}

.mp-lp-link.active::after {
  content:'';
  position:absolute;
  bottom:-2px;
  left:0; right:0;
  height:2px;
  border-radius:2px;
  background:var(--paan-primary);
}

/* 言語ドロップダウン (= 右側、 menupaan.com 完全踏襲)
   v17 (2026-05-11): 12言語対応の locale dropdown を追加
   ヘッダー右側に配置し、 mp-lp-nav (= 中央揃え) との左右対称を維持 */
.mp-locale-wrapper {
  position:relative;
  flex:1;
  display:flex;
  justify-content:flex-end;
}

.mp-locale-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--paan-line);
  border-radius:999px;
  padding:6px 12px;
  font-family:'Noto Sans JP', sans-serif;
  font-size:12.5px;
  color:var(--paan-ink);
  cursor:pointer;
  transition:all 0.15s;
}

.mp-locale-button:hover {
  border-color:var(--paan-primary-soft);
  background:var(--paan-card);
}

.mp-locale-flag {
  font-size:14px;
  line-height:1;
}

.mp-locale-name {
  font-weight:500;
  letter-spacing:0.04em;
}

.mp-locale-arrow {
  font-size:9px;
  color:var(--paan-ink-mid);
  margin-left:2px;
}

.mp-locale-menu {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:280px;
  background:#FFFFFF;
  border:1px solid var(--paan-line);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(26,32,64,0.10);
  padding:6px;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:2px;
  z-index:1000;
}

.mp-locale-menu.is-open {
  display:grid;
}

.mp-locale-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
  color:var(--paan-ink);
  font-size:12.5px;
  font-family:'Noto Sans JP', sans-serif;
  letter-spacing:0.02em;
  transition:background 0.12s;
}

.mp-locale-item:hover {
  background:var(--paan-card);
}

.mp-locale-item.is-current {
  background:var(--paan-card);
  font-weight:500;
}

.mp-locale-item-flag {
  font-size:15px;
  line-height:1;
  flex-shrink:0;
}

.mp-locale-item-name {
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mp-locale-item-check {
  color:var(--paan-primary);
  font-size:12px;
  margin-left:auto;
}

/* ============================================================
   v18: モバイル ハンバーガーメニュー + 全画面ドロワー
   デスクトップでは display:none、 モバイル (≤720px) で出現
   ============================================================ */
.mp-burger {
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:28px;
  height:20px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}

.mp-burger-bar {
  display:block;
  width:100%;
  height:2px;
  background:var(--paan-primary);
  border-radius:2px;
  /* v30.36: 時間延長 + cubic-bezier で上品な変形 */
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.25s ease;
}

/* 開いた状態 (= ✕ 形に変形、 closeBtn を別途置くので任意) */
.mp-burger[aria-expanded="true"] .mp-burger-bar:nth-child(1) {
  transform:translateY(9px) rotate(45deg);
}
.mp-burger[aria-expanded="true"] .mp-burger-bar:nth-child(2) {
  opacity:0;
}
.mp-burger[aria-expanded="true"] .mp-burger-bar:nth-child(3) {
  transform:translateY(-9px) rotate(-45deg);
}

/* v30.10: MENU-PAAN完全踏襲のハンバーガー
   - ヘッダー直下、 右側に寄せた縦長パネル (= 全幅ではない)
   - 背景白 + 控えめshadow
   - 言語セクションはアコーディオン (= 初期は閉じて、 タップで展開) */
.mp-mobile-drawer {
  /* v30.37: 外側コンテナは即時表示/非表示。 アニメは drawer-inner で担当 */
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  z-index:9999;
  pointer-events:none;
  /* 閉じてる時は内側がアニメ後に invisible になるので、 クリックを透過 */
}

@media (max-width:480px) {
  .mp-mobile-drawer { top:60px; }
}

.mp-mobile-drawer.is-open {
  pointer-events:auto;
}

.mp-mobile-drawer-inner {
  position:absolute;
  top:0;
  right:0;
  /* v30.37: 上品な開閉アニメ */
  width:240px;
  max-width:calc(100vw - 28px);
  max-height:calc(100vh - 70px);
  background:#FFFFFF;
  padding:8px 0;
  overflow-y:auto;
  overflow-x:hidden;
  /* 動きの起点を右上 = 「メニューアイコンから生まれる」 ように
     初期 opacity:0 + translateY(-8px) + scale(0.96)
     開く時 (= is-open) はゆっくりふわっと開く (0.45秒)
     閉じる時 (= is-open外す) は素早く消える (0.22秒) */
  transform-origin: 100% 0;
  transform: translateY(-8px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.18s ease-out,
    visibility 0s linear 0.22s;
  box-shadow:0 14px 40px rgba(26, 46, 92, 0.18), 0 2px 10px rgba(26, 46, 92, 0.08);
  border:1px solid var(--paan-line);
  border-radius:10px;
  box-sizing:border-box;
}

.mp-mobile-drawer.is-open .mp-mobile-drawer-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  /* 開く時はゆっくり、 上品なオーバーシュート風 cubic-bezier */
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s ease-out,
    visibility 0s linear 0s;
}

/* v30.37: ドロワー閉じる時もアニメを保持 (=is-open外しでcubic-bezier効く) */

/* v30.37: ドロワー内のメニュー項目を staggered で順番に登場
   ドロワー枠が動いてる途中から項目が現れ始める = 一連の流れに */
.mp-mobile-drawer .mp-mobile-link,
.mp-mobile-drawer .mp-mobile-locale-toggle {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s ease-out,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mp-mobile-drawer.is-open .mp-mobile-link,
.mp-mobile-drawer.is-open .mp-mobile-locale-toggle {
  opacity: 1;
  transform: translateY(0);
}

/* 順番遅延 — ドロワー枠が開き始めてから 0.15s 後に項目1番目が現れる、 以後 0.06s 間隔
   nav 5項目 + トグル = 計6項目 */
.mp-mobile-drawer.is-open .mp-mobile-link:nth-child(1)  { transition-delay: 0.15s; }
.mp-mobile-drawer.is-open .mp-mobile-link:nth-child(2)  { transition-delay: 0.21s; }
.mp-mobile-drawer.is-open .mp-mobile-link:nth-child(3)  { transition-delay: 0.27s; }
.mp-mobile-drawer.is-open .mp-mobile-link:nth-child(4)  { transition-delay: 0.33s; }
.mp-mobile-drawer.is-open .mp-mobile-link:nth-child(5)  { transition-delay: 0.39s; }
.mp-mobile-drawer.is-open .mp-mobile-locale-toggle      { transition-delay: 0.45s; }

/* v30.40: 言語アコーディオン展開時の locale-item を staggered で登場 */
.mp-mobile-locale-item {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.25s ease-out,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* アコーディオン展開状態 (= aria-expanded=true) */
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item {
  opacity: 1;
  transform: translateY(0);
}

/* locale-item の staggered (= 12言語、 各40msずつ遅延) */
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(1)  { transition-delay: 0.04s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(2)  { transition-delay: 0.08s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(3)  { transition-delay: 0.12s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(4)  { transition-delay: 0.16s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(5)  { transition-delay: 0.20s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(6)  { transition-delay: 0.24s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(7)  { transition-delay: 0.28s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(8)  { transition-delay: 0.32s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(9)  { transition-delay: 0.36s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(10) { transition-delay: 0.40s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(11) { transition-delay: 0.44s; }
.mp-mobile-locale-toggle[aria-expanded="true"] + .mp-mobile-locale-grid .mp-mobile-locale-item:nth-child(12) { transition-delay: 0.48s; }

/* reduced-motion: アニメ無効 */
@media (prefers-reduced-motion: reduce) {
  .mp-mobile-drawer-inner,
  .mp-mobile-drawer .mp-mobile-link,
  .mp-mobile-drawer .mp-mobile-locale-toggle,
  .mp-mobile-drawer .mp-mobile-locale-item {
    transition: none !important;
    transform: none !important;
  }
}

/* v30.10: クローズボタンは表示不要 */
.mp-mobile-close {
  display:none;
}

.mp-mobile-nav {
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:0;
}

.mp-mobile-link {
  /* v30.12: MENU-PAAN .mp-gear-item 完全踏襲
     padding:10px 18px / font-size:13px / 区切り線なし (= hover背景のみ) */
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  font-weight:400;
  color:var(--paan-ink);
  text-decoration:none;
  letter-spacing:0.02em;
  border-bottom:0;
  transition:background 0.12s, color 0.12s;
  box-sizing:border-box;
}

/* v30.15: ホームSVGアイコン */
.mp-mobile-link-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--paan-ink-mid);
  flex-shrink:0;
  transition:color 0.12s;
}

.mp-mobile-link:hover .mp-mobile-link-icon,
.mp-mobile-link.active .mp-mobile-link-icon {
  color:var(--paan-primary);
}

.mp-mobile-link:hover {
  background:#F5F7FB;
  color:var(--paan-primary);
}

.mp-mobile-link.active {
  background:#F5F7FB;
  color:var(--paan-primary);
  font-weight:500;
}

.mp-mobile-locale-section {
  margin-top:0;
  padding-top:0;
  border-top:0;
}

/* v30.12: 言語アコーディオントグル MENU-PAAN .mp-gear-lang-summary 準拠
   = .mp-gear-item と同じパディング 10px 18px、 font-size 13px */
.mp-mobile-locale-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:10px 18px;
  background:transparent;
  border:0;
  border-top:1px solid var(--paan-line);
  cursor:pointer;
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  font-weight:400;
  color:var(--paan-ink);
  letter-spacing:0.02em;
  text-align:left;
  transition:background 0.12s, color 0.12s;
  box-sizing:border-box;
}

.mp-mobile-locale-toggle:hover {
  background:#F5F7FB;
  color:var(--paan-primary);
}

.mp-mobile-locale-toggle-label {
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  letter-spacing:0.02em;
  color:inherit;
  flex:1;
}

/* v30.15: 言語トグルの地球儀SVG */
.mp-mobile-locale-toggle-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  color:var(--paan-ink-mid);
  flex-shrink:0;
  transition:color 0.12s;
}

.mp-mobile-locale-toggle:hover .mp-mobile-locale-toggle-icon,
.mp-mobile-locale-toggle[aria-expanded="true"] .mp-mobile-locale-toggle-icon {
  color:var(--paan-primary);
}

.mp-mobile-locale-toggle-chevron {
  font-size:11px;
  color:var(--paan-ink-mid);
  transition:transform 0.15s ease;
  margin-left:8px;
}

.mp-mobile-locale-toggle[aria-expanded="true"] .mp-mobile-locale-toggle-chevron {
  transform:rotate(180deg);
}

.mp-mobile-locale-label {
  display:none;
}

/* v30.12: アコーディオン本体 MENU-PAAN .mp-gear-lang-list 準拠
   2列grid + 紺の薄背景 + fadeInアニメ */
.mp-mobile-locale-grid {
  display:none;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:#F5F7FB;
  border-top:1px solid var(--paan-line);
  animation:paanLangFadeIn 0.18s ease-out;
}

.mp-mobile-locale-grid.is-expanded {
  display:grid;
}

@keyframes paanLangFadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

.mp-mobile-locale-item {
  display:flex;
  align-items:center;
  gap:5px;
  /* v30.14: padding 14px/8px → 10px/6px、 gap 6px → 5px (= 240px幅に収める) */
  padding:9px 6px 9px 10px;
  border-radius:0;
  text-decoration:none;
  color:var(--paan-ink);
  font-size:12px;
  font-family:'Noto Sans JP', sans-serif;
  transition:background 0.12s, color 0.12s;
}

.mp-mobile-locale-item:hover,
.mp-mobile-locale-item:active {
  background:rgba(26,46,92,0.05);
  color:var(--paan-primary);
}

.mp-mobile-locale-item.is-current {
  color:var(--paan-primary);
  font-weight:500;
  background:rgba(26,46,92,0.04);
}

.mp-mobile-locale-flag {
  font-size:14px;
  line-height:1;
  flex-shrink:0;
}

.mp-mobile-locale-name {
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mp-mobile-locale-check {
  color:var(--paan-primary);
  font-size:11px;
  margin-left:auto;
}

@media (max-width:720px) {
  /* v18: モバイルでは PC用ナビ・言語ドロップダウンを隠して、 ハンバーガー方式に切替 */
  .mp-lp-nav { display:none !important; }
  .mp-locale-wrapper { display:none !important; }
  .mp-burger { display:flex !important; }
}

@media (max-width:720px) {
  body { padding-top:72px; }
  html { scroll-padding-top:84px; }
  .mp-site-header { padding:14px 18px; justify-content:space-between; }
  .mp-site-logo { font-size:20px; letter-spacing:2px; flex:0 0 auto; }
}

@media (max-width:480px) {
  .mp-site-header { padding:12px 16px; }
}

/* ============================================
   HERO (menupaan踏襲: 背景画像 + 白いoverlay)
   ============================================ */
/* ============================================
   HERO (v30: アイラ島写真を主役、 白文字 + 下からダークグラデーション)
   v30.1: bodyのpadding-top:96px に重ねるため、 margin-top:-96px + padding-top:96px
   ============================================ */
.hero {
  position:relative;
  /* v30.1: body の padding-top:96px を相殺してヘッダー裏まで広げる */
  margin-top:-96px;
  padding:96px 24px 0;
  /* v30: テキスト位置を下寄りに (= 道の手前 = ユーザー視点) */
  min-height:640px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:center;
  /* v34: プレースホルダを Royal Navy 暗系に統一
     旧 #FFFFFF (v31.3): 画像 fade-in 中に白が透けて「白フラッシュ」感が出てた
     新 #0E1C3D: 画像と同系色なので fade-in が静かに収まる */
  background-color: #0E1C3D;
  overflow:hidden;
}

/* v30.33: hero-bg = picture/img を背景画像のように敷く */
.hero-bg,
.hero-bg-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}

.hero-bg-img {
  /* v34: シンプル fade-in、 0.6s
     Royal Navy 暗背景の上に画像が静かに現れる */
  opacity:0;
  animation: heroFadeIn 0.6s ease-out forwards;
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* hero-content は picture の上に重ねる */
.hero-content {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  flex:1;
}

/* デスクトップ高解像度 (v30.33: 画像はpicture要素が担当、 サイズだけ) */
@media (min-width:1280px) {
  .hero {
    min-height:720px;
  }
}

/* モバイル: 高さ調整 (v30.33: picture が縦構図 4:5 画像を担当) */
@media (max-width:720px) {
  .hero {
    min-height:620px;
    padding:96px 20px 0;
  }
  /* モバイルは縦構図、 道の真ん中をフォーカス */
  .hero .hero-bg-img {
    object-position:center 35%;
  }
}

@media (max-width:480px) {
  .hero {
    min-height:600px;
  }
}

/* v34.3: 下からのダークグラデーションオーバーレイ
   - 画像が現れた後 (0.4s delay) に暗グラデが上から乗ってくる
   - 旧 v34: 0s から opacity:1 → 画像 fade 中に 「暗背景+暗グラデ+薄画像」 で黒ちらつき発生
   - 新 v34.3: 画像が出揃ったタイミングで暗グラデが重なる → 黒ちらつき解消 */
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(14,28,61,0.05) 0%,
    rgba(14,28,61,0.15) 40%,
    rgba(14,28,61,0.55) 75%,
    rgba(14,28,61,0.78) 100%
  );
  z-index:1;
  pointer-events:none;
  opacity:0;
  animation: heroOverlayIn 0.5s ease-out 0.4s forwards;
}

@keyframes heroOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* v30.36: .hero > * は hero-content と ::before のみに適用 (= picture を除外)
   旧 .hero > * { position:relative; z-index:2 } は picture の position:absolute を潰してた */
.hero > .hero-content {
  position:relative;
  z-index:2;
}

.hero-title {
  font-family:'Noto Serif JP', serif;
  font-size:32px;
  font-weight:500;
  /* v30: 紺 → 白文字 */
  color:#FFFFFF;
  letter-spacing:0.04em;
  line-height:1.55;
  margin:0 auto 18px;
  max-width:680px;
  /* v30: 影で可読性ブースト */
  text-shadow:0 2px 24px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
}

.hero-sub {
  font-family:'Noto Serif JP', serif;
  font-size:16px;
  font-weight:400;
  /* v30: 中間グレー → 白に近い淡色 */
  color:rgba(255,255,255,0.92);
  letter-spacing:0.04em;
  line-height:2;
  margin:0 auto 48px;
  max-width:620px;
  /* v22: CJK改行 (= 「乗り越える」割れ防止) — 維持 */
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
  text-wrap:pretty;
  /* v30: 影 */
  text-shadow:0 1px 16px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.35);
}

@media (max-width:720px) {
  .hero-title { font-size:26px; line-height:1.55; margin:0 auto 14px; }
  .hero-sub { font-size:14.5px; line-height:1.95; margin-bottom:36px; }
}

@media (max-width:480px) {
  .hero-title { font-size:23px; }
  .hero-sub { font-size:13.5px; margin-bottom:32px; }
}

/* ============================================
   SUB-HERO (v30: サブページ用ヒーロー、 4ページ個別画像)
   v30.2: 高さをトップヒーローと同等に拡大、 可読性改善
   ============================================ */
.sub-hero {
  position:relative;
  /* body padding-top:96px を相殺 */
  margin-top:-96px;
  padding:96px 24px 0;
  /* v30.2: トップヒーローと同等の存在感 */
  min-height:640px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:center;
  /* v34: プレースホルダを Royal Navy 暗に統一 (= 白フラッシュ防止) */
  background-color: #0E1C3D;
  overflow:hidden;
}

/* v30.33: sub-hero 内の picture/img を背景画像のように敷く (= hero と同じ仕組み) */
.sub-hero .hero-bg,
.sub-hero .hero-bg-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}

.sub-hero .hero-bg-img {
  /* v34: シンプル fade-in、 0.6s */
  opacity:0;
  animation: heroFadeIn 0.6s ease-out forwards;
}

.sub-hero .hero-content {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  flex:1;
}

@media (min-width:1280px) {
  .sub-hero { min-height:720px; }
}

@media (max-width:720px) {
  .sub-hero {
    /* v30.7: モバイルでも3:2横長を維持 (= 元画像の比率そのまま) */
    min-height:0;
    height:auto;
    aspect-ratio:3/2;
    padding:96px 16px 20px;
  }

  /* モバイル用グラデーション: 上はクリア、 下を濃くしてテキスト可読性確保 */
  .sub-hero::before {
    background:linear-gradient(
      180deg,
      rgba(14,28,61,0.10) 0%,
      rgba(14,28,61,0.10) 35%,
      rgba(14,28,61,0.50) 65%,
      rgba(14,28,61,0.80) 100%
    );
  }
}

@media (max-width:480px) {
  .sub-hero {
    aspect-ratio:3/2;
    min-height:0;
  }
}

/* v34: sub-hero の背景色プレースホルダも Royal Navy 暗に統一 (= 白フラッシュ防止) */
.sub-hero-mission,
.sub-hero-brand,
.sub-hero-message,
.sub-hero-company,
.sub-hero-contact { background-color: #0E1C3D; }

/* v34.3: sub-hero グラデーション、 画像が見え始めてから乗せる (黒ちらつき防止) */
.sub-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(14,28,61,0.18) 0%,
    rgba(14,28,61,0.10) 35%,
    rgba(14,28,61,0.60) 70%,
    rgba(14,28,61,0.85) 100%
  );
  z-index:1;
  pointer-events:none;
  opacity:0;
  animation: heroOverlayIn 0.5s ease-out 0.4s forwards;
}

.sub-hero > * { position:relative; z-index:2; }

.sub-hero .page-eyebrow {
  font-family:'Marcellus', serif;
  font-size:13px;
  letter-spacing:0.28em;
  /* v30: ゴールド on dark (= 上品さブースト) */
  color:var(--paan-gold);
  text-transform:uppercase;
  margin:0 auto 18px;
  text-shadow:0 1px 12px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
}

.sub-hero .page-title {
  font-family:'Noto Serif JP', serif;
  font-size:32px;
  font-weight:500;
  color:#FFFFFF;
  letter-spacing:0.04em;
  line-height:1.55;
  margin:0 auto 48px;
  max-width:680px;
  /* v30.2: 影を強化、 屋根や暗いエリアでも読めるように */
  text-shadow:0 2px 24px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.4);
}

.sub-hero .page-title strong {
  font-weight:500;
  /* v30.3: main内の .page-title strong = 紺(--paan-primary) を上書き、 ヒーロー内では白 */
  color:#FFFFFF;
}

@media (max-width:720px) {
  .sub-hero .page-eyebrow { font-size:11px; letter-spacing:0.22em; margin-bottom:10px; }
  /* v30.7: 3:2比モバイル時、 高さ250px内にテキスト収めるためコンパクト化 */
  .sub-hero .page-title { font-size:21px; margin-bottom:16px; }
}

@media (max-width:480px) {
  .sub-hero .page-eyebrow { font-size:10px; margin-bottom:8px; }
  .sub-hero .page-title { font-size:18px; margin-bottom:14px; }
}

/* ============================================
   PAGE WRAP (menupaan踏襲: 760px / 48-24-40)
   ============================================ */
.page-wrap {
  max-width:760px;
  margin:0 auto;
  padding:48px 24px 40px;
}

.page-eyebrow {
  font-family:'Marcellus', serif;
  font-size:13px;
  color:var(--paan-primary-soft);
  letter-spacing:0.22em;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:14px;
}

.page-title {
  font-family:'Noto Serif JP', serif;
  font-size:30px;
  font-weight:500;
  letter-spacing:0.05em;
  line-height:1.55;
  color:var(--paan-ink);
  text-align:center;
  margin-bottom:32px;
}

/* ============================================
   SECTIONS (menupaan info-section 完全踏襲)
   ============================================ */
.info-section {
  margin-bottom:40px;
}

.info-h {
  font-family:'Noto Serif JP', serif;
  font-size:20px;
  font-weight:500;
  letter-spacing:0.06em;
  color:var(--paan-ink);
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--paan-line);
}

.info-grid {
  background:var(--paan-card);
  border:1px solid var(--paan-line);
  border-radius:6px;
  padding:8px 24px;
}

.info-row {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--paan-line);
}

.info-row:last-child { border-bottom:none; }

.info-key {
  font-family:'Noto Serif JP', serif;
  font-size:13.5px;
  color:var(--paan-ink-mid);
  letter-spacing:0.06em;
  /* v23: CJKの意味単位で折り返し (= 「ジェネラルカウンセ/ル」が割れる問題対応) */
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}

.info-val {
  /* v30.29: 旧 Noto Sans (ボディ継承) → セリフ統一で温かみUP */
  font-family:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size:14.5px;
  color:var(--paan-ink);
  line-height:1.85;
  letter-spacing:0.02em;
}

.info-val a {
  color:var(--paan-primary);
  border-bottom:1px solid var(--paan-primary);
  padding-bottom:1px;
}

/* ============================================
   NEWS LIST (info-section 内に置く想定)
   ============================================ */
.news-list {
  list-style:none;
  border-top:1px solid var(--paan-line);
}

.news-item {
  display:grid;
  grid-template-columns:120px 90px 1fr;
  gap:20px;
  align-items:center;
  padding:16px 4px;
  border-bottom:1px solid var(--paan-line);
}

.news-date {
  /* v30.16: 旧 Marcellus は数字「2026.06.03」 が旧スタイル数字 (oldstyle figures) で
     表示されて「へんてこりん」 だったため、 モダンな等幅寄りフォントに変更 */
  font-family:'SF Mono', 'Menlo', 'Consolas', 'Roboto Mono', 'Noto Sans JP', monospace, sans-serif;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--paan-ink-mid);
  font-variant-numeric:tabular-nums;
}

.news-tag {
  display:inline-block;
  font-family:'Noto Serif JP', serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.10em;
  padding:3px 10px;
  border-radius:2px;
  text-align:center;
  white-space:nowrap;
}

.tag-release { background:var(--paan-primary); color:#FFFFFF; }
.tag-product { background:var(--paan-gold); color:#FFFFFF; }
.tag-info    { background:var(--paan-card); color:var(--paan-primary); border:1px solid var(--paan-line); }
.tag-story   { background:transparent; color:var(--paan-ink-mid); border:1px solid var(--paan-ink-mid); }

.news-body {
  /* v30.28: 旧 Noto Sans JP は人工的すぎたため、 サイト全体のセリフ系統に統一 */
  font-family:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size:14.5px;
  color:var(--paan-ink);
  letter-spacing:0.02em;
  line-height:1.85;
  /* v37: i18n辞書の \n を改行として表示 (= 4/18 ストーリーの2行表示) */
  white-space:pre-line;
}

.news-body a {
  color:var(--paan-primary);
  border-bottom:1px solid var(--paan-primary);
  padding-bottom:1px;
}

@media (max-width:720px) {
  /* v30.17: モバイル時は「日付+タグ」 を1行目、 本文を2行目に
     縦方向の節約 (= 旧3行: 日付→タグ→本文 → 新2行: [日付タグ]→本文) */
  .news-item {
    grid-template-columns:auto auto 1fr;
    grid-template-areas:
      "date tag spacer"
      "body body body";
    column-gap:12px;
    row-gap:8px;
    padding:14px 4px;
    align-items:center;
  }
  .news-date { grid-area:date; }
  .news-tag { grid-area:tag; justify-self:start; }
  .news-body { grid-area:body; }
}

/* ============================================
   MISSION PAGE — menupaan 完全踏襲、 5章構成 + Founder's Story
   ============================================ */

/* セクション (info-section と並列の汎用) */
.section {
  margin-bottom:48px;
}

/* v30.8: page-wrap内の最後のセクションは下マージン削除 (= page-wrapのpadding-bottomで足りる) */
.page-wrap > .section:last-child,
.page-wrap > .info-section:last-child {
  margin-bottom:0;
}

.section-eyebrow-sm {
  font-family:'Marcellus', serif;
  font-size:12px;
  color:var(--paan-primary-soft);
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.section-h {
  font-family:'Noto Serif JP', serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:0.05em;
  line-height:1.6;
  color:var(--paan-ink);
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--paan-line);
}

.section-body p {
  font-family:'Noto Serif JP', serif;
  font-size:15.5px;
  line-height:1.95;
  letter-spacing:0.04em;
  color:var(--paan-ink);
  margin-bottom:20px;
}

.section-body p strong {
  color:var(--paan-primary);
  font-weight:500;
}

.section-body p:last-child { margin-bottom:0; }

/* v37: PAAN の由来 3項目リスト (= 汎/Pan/擬音) */
.name-origin-list {
  list-style:none;
  margin:0 0 24px;
  padding:0;
}
.name-origin-list li {
  font-family:'Noto Serif JP', serif;
  font-size:15px;
  line-height:1.9;
  letter-spacing:0.04em;
  color:var(--paan-ink);
  padding:14px 0 14px 28px;
  position:relative;
  border-bottom:1px solid var(--paan-line);
}
.name-origin-list li:last-child { border-bottom:none; }
.name-origin-list li::before {
  content:'◆';
  position:absolute;
  left:0;
  top:14px;
  color:var(--paan-gold, #C9A24B);
  font-size:11px;
  line-height:1.9;
}

/* page-title 内の strong (= 強調) */
.page-title strong {
  color:var(--paan-primary);
  font-weight:500;
}

/* ============ FOUNDER'S STORY (menupaan v315 踏襲) ============ */
.founder-section {
  margin-top:64px;
  padding:48px 0 0;
  border-top:1px solid var(--paan-line);
}

.founder-section .section-eyebrow-sm {
  font-family:'Marcellus', serif;
  font-size:11px;
  color:var(--paan-primary-soft);
  letter-spacing:0.24em;
  text-transform:uppercase;
  margin-bottom:14px;
  text-align:center;
}

.founder-section .section-h {
  font-family:'Noto Serif JP', serif;
  font-size:24px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:0.04em;
  color:var(--paan-ink);
  text-align:center;
  margin-bottom:32px;
  padding-bottom:0;
  border-bottom:none;
}

.founder-story-body {
  font-family:'Noto Serif JP', serif;
  font-size:15px;
  line-height:1.95;
  color:var(--paan-ink);
  letter-spacing:0.03em;
}

.founder-story-body p {
  margin:0 0 18px;
}

.founder-story-body p:last-of-type {
  margin-bottom:0;
}

.founder-story-body em {
  font-family:'Marcellus', 'Noto Serif JP', serif;
  font-style:normal;
  font-weight:500;
  color:var(--paan-primary);
  letter-spacing:0.05em;
}

.founder-story-body strong {
  color:var(--paan-primary);
  font-weight:500;
}

.founder-divider {
  width:32px;
  height:1px;
  background:var(--paan-primary-soft);
  margin:24px auto;
  border:none;
}

/* 著者署名 (右揃え、 menupaan v316-perf15 踏襲) */
.founder-signature {
  text-align:right;
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.founder-signature-name {
  font-family:'Noto Serif JP', serif;
  font-size:18px;
  color:var(--paan-ink);
  letter-spacing:0.18em;
  font-weight:500;
  line-height:1.4;
}

.founder-signature-title {
  font-family:'Noto Serif JP', serif;
  font-size:12.5px;
  color:var(--paan-ink-mid);
  letter-spacing:0.06em;
  line-height:1.5;
  font-style:italic;
}

@media (max-width:720px) {
  .section { margin-bottom:32px; }
  .founder-section { margin-top:48px; padding-top:36px; }
  .founder-section .section-h { font-size:20px; line-height:1.55; margin-bottom:22px; }
  .founder-story-body { font-size:14px; line-height:1.9; }
  .founder-story-body p { margin-bottom:14px; }
}

/* ============================================
   MISSION PAGE — v6 全面書き直し対応
   ============================================ */

/* Opening statement card (page-title 直下の引用ブロック) */
.mission-statement {
  margin:8px 0 56px;
  padding:40px 32px;
  background:var(--paan-card);
  border:1px solid var(--paan-line);
  border-radius:6px;
  text-align:center;
}

.mission-lead {
  font-family:'Noto Serif JP', serif;
  font-size:18px;
  font-weight:500;
  line-height:2.1;
  letter-spacing:0.08em;
  color:var(--paan-primary);
  margin:0;
}

/* Story-style sections (Five Small Regrets) */
.story-lead {
  font-family:'Noto Serif JP', serif;
  font-size:17px;
  font-weight:500;
  letter-spacing:0.06em;
  color:var(--paan-primary);
  margin:32px 0 12px !important;
  line-height:1.6;
}

.section-body > .story-lead:first-child {
  margin-top:8px !important;
}

.story-divider {
  width:32px;
  height:1px;
  background:var(--paan-primary-soft);
  margin:32px auto;
  border:none;
  opacity:0.5;
}

.story-coda {
  margin-top:40px !important;
  padding-top:32px;
  border-top:1px solid var(--paan-line);
  font-family:'Noto Serif JP', serif;
  font-size:15.5px !important;
  line-height:2.0 !important;
  letter-spacing:0.04em !important;
  color:var(--paan-ink) !important;
}

@media (max-width:720px) {
  .mission-statement { padding:28px 22px; margin-bottom:40px; }
  .mission-lead { font-size:15px; line-height:2.0; letter-spacing:0.06em; }
  .story-lead { font-size:15px; margin:24px 0 10px !important; }
  .story-divider { margin:24px auto; }
  .story-coda { font-size:14px !important; padding-top:24px; margin-top:32px !important; }
}

/* ============================================
   BRAND PAGE
   ============================================ */
.brand-card {
  background:var(--paan-card);
  border:1px solid var(--paan-line);
  border-radius:6px;
  padding:32px 28px;
  margin-bottom:20px;
}

/* MENU-PAAN テーマカラーバリアント (= ボルドー基調)
   左側に2pxのアクセント帯を入れて、 ブランドの存在を視覚的に明示 */
.brand-card--menupaan {
  border-left:3px solid #9B1C31;
  background:linear-gradient(to right, rgba(155,28,49,0.025) 0%, var(--paan-card) 8%);
}

.brand-card--menupaan .status-dot-live {
  background:#9B1C31;
  box-shadow:0 0 0 0 rgba(155,28,49,0.55);
  animation:pulse-menupaan 2.4s infinite;
}

.brand-card--menupaan .brand-card-name {
  color:#9B1C31;
}

.brand-card--menupaan .brand-card-tagline {
  color:#7A1525;
}

@keyframes pulse-menupaan {
  0%   { box-shadow:0 0 0 0 rgba(155,28,49,0.45); }
  70%  { box-shadow:0 0 0 9px rgba(155,28,49,0); }
  100% { box-shadow:0 0 0 0 rgba(155,28,49,0); }
}

.brand-card-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Marcellus', serif;
  font-size:11.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--paan-ink-mid);
  margin-bottom:18px;
}

.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
}

.status-dot-live {
  background:var(--paan-primary);
  box-shadow:0 0 0 0 rgba(26,46,92,0.55);
  animation:pulse 2.4s infinite;
}

@keyframes pulse {
  0%   { box-shadow:0 0 0 0   rgba(26,46,92,0.55); }
  70%  { box-shadow:0 0 0 9px rgba(26,46,92,0); }
  100% { box-shadow:0 0 0 0   rgba(26,46,92,0); }
}

.status-dot-soon { background:var(--paan-line); border:1px solid var(--paan-ink-soft); }

/* v38.1: プロダクトA「テスト中」 を赤で強調 (= 進行中の活気) */
.brand-card-status--testing { color:#9B1C31; }
.status-dot-testing {
  background:#9B1C31;
  box-shadow:0 0 0 0 rgba(155,28,49,0.55);
  animation:pulse-testing 2.4s infinite;
}
@keyframes pulse-testing {
  0%   { box-shadow:0 0 0 0   rgba(155,28,49,0.55); }
  70%  { box-shadow:0 0 0 9px rgba(155,28,49,0); }
  100% { box-shadow:0 0 0 0   rgba(155,28,49,0); }
}

.brand-card-name {
  font-family:'Marcellus', serif;
  font-size:28px;
  letter-spacing:0.10em;
  color:var(--paan-primary);
  margin-bottom:6px;
  font-weight:400;
}

.brand-card-name-sm {
  font-family:'Noto Serif JP', serif;
  font-size:17px;
  letter-spacing:0.05em;
  color:var(--paan-ink);
  margin-bottom:6px;
  font-weight:500;
}

.brand-card-tagline {
  font-family:'Noto Serif JP', serif;
  font-size:14px;
  letter-spacing:0.06em;
  color:var(--paan-primary);
  font-weight:500;
  margin-bottom:22px;
}

.brand-card-tagline-sm {
  font-size:12.5px;
  letter-spacing:0.04em;
  color:var(--paan-ink-soft);
  margin-bottom:18px;
}

.brand-card-body {
  font-family:'Noto Serif JP', serif;
  font-size:14px;
  line-height:1.95;
  color:var(--paan-ink);
  margin-bottom:22px;
  letter-spacing:0.03em;
}

.brand-card-body p { margin-bottom:14px; }
.brand-card-body p:last-child { margin-bottom:0; }

.brand-card-body strong {
  color:var(--paan-primary);
  font-weight:500;
}

.brand-features {
  list-style:none;
  background:#FFFFFF;
  border:1px solid var(--paan-line);
  padding:14px 18px;
  margin-top:14px;
  border-radius:4px;
}

.brand-features li {
  font-size:13px;
  line-height:1.95;
  color:var(--paan-ink-mid);
  padding:3px 0;
  letter-spacing:0.02em;
}

.brand-features strong {
  color:var(--paan-primary);
  font-weight:500;
  margin-right:6px;
}

/* CTA — menupaan の hero-cta 踏襲 */
.brand-card-cta {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.brand-cta-primary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  letter-spacing:0.10em;
  color:#FFFFFF;
  background:var(--paan-primary);
  padding:14px 32px;
  border:1.5px solid var(--paan-primary);
  border-radius:999px;
  font-weight:500;
  transition:all 0.15s;
}

.brand-cta-primary:hover {
  background:var(--paan-primary-deep);
  border-color:var(--paan-primary-deep);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(26,46,92,0.25);
}

.cta-arrow {
  transition:transform 0.15s;
}

.brand-cta-primary:hover .cta-arrow { transform:translateX(2px); }

/* MENU-PAAN テーマカラー (= ボルドー #9B1C31) オーバーライド
   /mission ページの MENU-PAAN プロダクト導線ボタンに適用 */
.brand-cta-primary--menupaan {
  background:#9B1C31;
  border-color:#9B1C31;
}
.brand-cta-primary--menupaan:hover {
  background:#7A1525;
  border-color:#7A1525;
  box-shadow:0 6px 18px rgba(155,28,49,0.28);
}

.brand-cta-secondary {
  display:inline-flex;
  align-items:center;
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  letter-spacing:0.10em;
  color:var(--paan-primary);
  background:#FFFFFF;
  padding:14px 28px;
  border:1.5px solid var(--paan-primary);
  border-radius:999px;
  font-weight:500;
  transition:all 0.15s;
}

.brand-cta-secondary:hover {
  background:rgba(26,46,92,0.06);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(26,46,92,0.15);
}

@media (max-width:720px) {
  .brand-card { padding:26px 22px; }
  .brand-card-name { font-size:24px; }
  .brand-card-cta { flex-direction:column; }
  .brand-cta-primary, .brand-cta-secondary { justify-content:center; text-align:center; }
}

/* ============================================
   BUSINESS LIST — 事業内容 (会社概要ページ)
   ============================================ */
.business-list {
  list-style:none;
  padding:0;
  margin:8px 0 0;
}

.business-list li {
  position:relative;
  padding:18px 0 18px 22px;
  border-bottom:1px solid var(--paan-line);
  /* v30.29: Noto Sans → Noto Serif でセリフ統一 */
  font-family:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size:14.5px;
  line-height:1.85;
  color:var(--paan-ink);
}

.business-list li:first-child {
  padding-top:8px;
}

.business-list li:last-child {
  border-bottom:none;
  padding-bottom:8px;
}

.business-list li::before {
  content:"—";
  position:absolute;
  left:0;
  top:18px;
  color:var(--paan-primary-soft);
  font-weight:500;
}

.business-list li:first-child::before {
  top:8px;
}

.business-list li strong {
  color:var(--paan-primary);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.02em;
}

/* v30.8: タイトル後半の span (= 「の企画・開発・運営」 等) を strong と同じ太字・色に統一 */
.business-list li > span:not(.business-sub) {
  color:var(--paan-primary);
  font-weight:500;
  font-size:15px;
  letter-spacing:0.02em;
}

.business-sub {
  display:block;
  margin-top:4px;
  font-size:12.5px;
  color:var(--paan-ink-mid);
  letter-spacing:0.02em;
  line-height:1.7;
  /* v27: CJK の単語の途中で改行しない (= 「シーン特/化型」 が割れる問題対応) */
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}

@media (max-width:720px) {
  .business-list li { font-size:13.5px; padding:14px 0 14px 18px; }
  .business-list li strong { font-size:14px; }
  .business-list li > span:not(.business-sub) { font-size:14px; }
  .business-sub { font-size:12px; }
}

/* ============================================
   FOUNDERS GRID — menupaan完全踏襲
   ============================================ */
.founders-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:8px;
}

.founder-card {
  padding:0;
  background:var(--paan-card);
  border:1px solid var(--paan-line);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* 役員写真 (= 4:3 長方形、 オリジナル構図を活かす) */
.founder-photo-wrap {
  width:100%;
  aspect-ratio:4 / 3;
  background:#F0EDE6;
  overflow:hidden;
}

.founder-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

.founder-photo--inui {
  /* 上半身が中心、 やや上寄りで顔がしっかり見えるように */
  object-position:center 22%;
}

.founder-photo--yui {
  /* 元写真の被写体が小さめなので scale で軽くズームイン
     乾さん写真と被写体サイズを揃える */
  object-position:center 35%;
  transform:scale(1.15);
  transform-origin:center 35%;
}

.founder-card-body {
  padding:28px 28px 32px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.founder-role {
  font-family:'Marcellus', serif;
  font-size:11.5px;
  color:var(--paan-primary-soft);
  letter-spacing:0.22em;
  margin-bottom:10px;
  text-transform:uppercase;
}

.founder-name {
  font-family:'Noto Serif JP', serif;
  font-size:20px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--paan-ink);
  margin-bottom:6px;
}

.founder-name-en {
  font-family:'Marcellus', serif;
  font-size:13px;
  color:var(--paan-ink-mid);
  letter-spacing:0.06em;
  margin-bottom:18px;
}

.founder-bio {
  font-family:'Noto Serif JP', serif;
  font-size:13.5px;
  line-height:1.95;
  color:var(--paan-ink);
  letter-spacing:0.02em;
  /* v30: 自然な禁則処理に戻す (= 句点ごとの強制改行を解消)
     word-break:keep-all は長文bioでは句点を境界扱いし、 各文ごとに改行されて読みにくい
     overflow-wrap:break-word のみで自然な折り返し */
  word-break:normal;
  overflow-wrap:break-word;
  line-break:auto;
  /* v35.1: text-wrap:pretty を撤去
     pretty は最終行のバランス取りで右端に余白を残す挙動があり、
     ろくちゃん要望の「幅いっぱい綺麗に改行」 が満たせなかった
     default (auto) で全幅を使いきる折り返しに戻す */
  text-wrap:auto;
  /* v30.4: i18n辞書の \n\n を段落区切りとして表示 */
  white-space:pre-line;
}

/* v30.21: 長い固有名詞・役職を改行禁止にする塊 (= founder bio用)
   例: 「1950年創業の串カツ専門店・株式会社串の坊」 が中途で改行されないように
   親 .founder-bio が white-space:pre-line だが、 子要素で nowrap を明示すれば上書きされる */
.founder-bio .nobr {
  white-space:nowrap;
  display:inline;
}

@media (max-width:720px) {
  .founders-grid { grid-template-columns:1fr; gap:14px; }
  .founder-card-body { padding:22px 22px 26px; }
  .founder-name { font-size:18px; }
  .founder-bio { font-size:13px; }
}

/* ============================================
   CONTACT
   ============================================ */
.contact-lead {
  font-family:'Noto Serif JP', serif;
  font-size:14.5px;
  line-height:2.0;
  color:var(--paan-ink-mid);
  text-align:center;
  max-width:600px;
  margin:0 auto 28px;
  letter-spacing:0.03em;
}

.contact-card {
  background:var(--paan-primary);
  color:#FFFFFF;
  padding:40px 32px;
  border-radius:6px;
  text-align:center;
}

.contact-card-eyebrow {
  font-family:'Marcellus', serif;
  font-size:12px;
  color:rgba(255,255,255,0.7);
  letter-spacing:0.22em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.contact-email {
  display:inline-block;
  font-family:'Marcellus', serif;
  font-size:24px;
  color:#FFFFFF;
  letter-spacing:0.06em;
  border-bottom:1px solid rgba(255,255,255,0.5);
  padding-bottom:5px;
  margin-bottom:20px;
  transition:opacity 0.15s ease;
}

.contact-email:hover { opacity:0.8; }

.contact-note {
  font-family:'Noto Serif JP', serif;
  font-size:13px;
  line-height:1.95;
  color:rgba(255,255,255,0.8);
  max-width:500px;
  margin:0 auto;
  letter-spacing:0.02em;
}

.inquiry-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:8px;
}

.inquiry-item {
  background:var(--paan-card);
  border:1px solid var(--paan-line);
  padding:22px 22px;
  border-radius:6px;
}

.inquiry-title {
  font-family:'Noto Serif JP', serif;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--paan-primary);
  margin-bottom:8px;
}

.inquiry-body {
  font-family:'Noto Serif JP', serif;
  font-size:13px;
  line-height:1.95;
  color:var(--paan-ink-mid);
  letter-spacing:0.02em;
}

.inquiry-body a {
  color:var(--paan-primary);
  border-bottom:1px solid var(--paan-primary);
}

@media (max-width:720px) {
  .inquiry-grid { grid-template-columns:1fr; gap:10px; }
  .contact-card { padding:32px 22px; }
  .contact-email { font-size:18px; letter-spacing:0.04em; word-break:break-all; }
}

/* ============================================
   FOOTER — menupaan.com 完全踏襲
   ============================================ */
.mp-site-footer {
  background:#FFFFFF;
  color:var(--paan-primary);
  padding:24px 20px 32px;
  /* v30.9: フッター上余白を 48px → 24px に削減 (= page-wrap末尾の余白とのコンボで広すぎたため) */
  margin-top:24px;
  border-top:1px solid var(--paan-line-2);
  text-align:center;
  font-family:'Noto Sans JP', -apple-system, sans-serif;
}

.mp-site-footer a { text-decoration:none; color:inherit; }

.mp-footer-logo-link {
  display:inline-block;
  transition:opacity 0.15s;
}

.mp-footer-logo-link:hover { opacity:0.75; }

.mp-footer-logo {
  font-family:'Marcellus', serif;
  font-size:18px;
  letter-spacing:2.5px;
  color:var(--paan-primary);
  margin-bottom:2px;
}

.mp-footer-tag {
  font-family:'Noto Serif JP', serif;
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--paan-primary-soft);
  margin-bottom:14px;
  font-weight:400;
}

.mp-footer-links {
  display:flex;
  justify-content:center;
  gap:14px;
  font-size:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.mp-footer-link {
  color:var(--paan-primary);
  opacity:0.85;
}

.mp-footer-link:hover {
  opacity:1;
  text-decoration:underline;
}

.mp-footer-copy {
  font-size:10px;
  color:var(--paan-primary-soft);
  letter-spacing:0.08em;
  margin-top:10px;
}

@media (max-width:380px) {
  .mp-footer-copy { font-size:9px; letter-spacing:0.04em; }
}

/* ============================================
   RESPONSIVE (menupaan踏襲)
   ============================================ */
@media (max-width:720px) {
  .page-wrap { padding:32px 22px 32px; }
  .page-title { font-size:23px; line-height:1.5; margin-bottom:20px; }
  .info-section { margin-bottom:32px; }
  .info-h { font-size:18px; }
  .info-grid { padding:4px 18px; }
  .info-row { grid-template-columns:140px 1fr; gap:12px; padding:14px 0; font-size:12.5px; }
  .info-key { font-size:12.5px; }
  .info-val { font-size:13px; }
  .section-h { font-size:19px; line-height:1.6; }
  .section-body p { font-size:14.5px; }
}

/* ============================================
   MESSAGE PAGE (v30.31) — 代表メッセージ
   ============================================ */
.message-article {
  max-width:720px;
  margin:0 auto;
  padding:8px 0 0;
}

.message-body {
  font-family:'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size:15.5px;
  line-height:2.1;
  color:var(--paan-ink);
  letter-spacing:0.03em;
}

/* v30.31 修正: 段落ごとに p で囲み、 word-break 系を section-body と同じ自然な挙動に */
.message-body p {
  margin:0 0 1.6em;
}

.message-body p:last-child {
  margin-bottom:0;
}

.message-body strong {
  font-weight:500;
  color:var(--paan-primary);
}

.message-signature {
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--paan-line);
  text-align:right;
}

.message-signature-role {
  font-family:'Noto Serif JP', serif;
  font-size:13px;
  color:var(--paan-ink-mid);
  letter-spacing:0.1em;
  margin-bottom:6px;
}

.message-signature-name {
  font-family:'Noto Serif JP', serif;
  font-size:20px;
  font-weight:500;
  color:var(--paan-ink);
  letter-spacing:0.06em;
}

.message-back {
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--paan-line);
  text-align:center;
}

.message-back a {
  font-family:'Noto Serif JP', serif;
  font-size:13.5px;
  color:var(--paan-primary);
  letter-spacing:0.06em;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.18s;
  padding-bottom:2px;
}

.message-back a:hover {
  border-bottom-color:var(--paan-primary);
}

@media (max-width:720px) {
  .message-body { font-size:14.5px; line-height:2.0; }
  .message-signature-name { font-size:18px; }
  .message-signature { margin-top:48px; padding-top:24px; }
}

/* ============================================
   MESSAGE CTA (v30.31) — 会社概要から代表メッセージへの導線
   ============================================ */
.message-cta {
  margin-top:40px;
  text-align:center;
}

.message-cta-link {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:24px 48px;
  background:var(--paan-card);
  border:1px solid var(--paan-line);
  border-radius:6px;
  text-decoration:none;
  transition:background 0.18s, border-color 0.18s, transform 0.18s;
}

.message-cta-link:hover {
  background:#FFFFFF;
  border-color:var(--paan-primary);
  transform:translateY(-1px);
}

.message-cta-eyebrow {
  font-family:'Marcellus', serif;
  font-size:11.5px;
  letter-spacing:0.22em;
  color:var(--paan-primary-soft);
  text-transform:uppercase;
}

.message-cta-label {
  font-family:'Noto Serif JP', serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.06em;
  color:var(--paan-primary);
}

@media (max-width:720px) {
  .message-cta-link { padding:20px 32px; }
  .message-cta-label { font-size:14px; }
}

/* ============================================
   FOOTER LEGAL LINKS (v30.31)
   ============================================ */
.mp-footer-legal {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:4px 8px;
  margin-top:8px;
  margin-bottom:12px;
  font-family:'Noto Sans JP', sans-serif;
  font-size:11.5px;
  color:var(--paan-ink-mid);
}

.mp-footer-legal-link {
  color:var(--paan-ink-mid);
  text-decoration:none;
  transition:color 0.18s;
}

.mp-footer-legal-link:hover {
  color:var(--paan-primary);
}

.mp-footer-legal-sep {
  color:var(--paan-line-2);
}

/* ============================================
   v30.33 UX ANIMATIONS (3G配慮、 軽量)
   ============================================ */

/* prefers-reduced-motion: アニメ無効化 (= アクセシビリティ) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ----- ヒーロー内テキスト staggered fade-in (= v31.2 CSS only)
   JS依存をなくして HTMLパース時点でアニメ確実発動、 戻り時の一瞬チラつき解消 ----- */
.hero-content .hero-title,
.hero-content .hero-sub,
.sub-hero .page-eyebrow,
.sub-hero .page-title {
  opacity: 0;
  transform: translateY(8px);
  animation: heroTextIn 0.9s ease-out forwards;
}

/* staggered delays (v34.3: 画像 0.6s → 暗グラデ 0.4-0.9s → テキスト 0.7s/0.85s の3段階) */
.hero-content .hero-title         { animation-delay: 0.7s; }
.hero-content .hero-sub           { animation-delay: 0.85s; }
.sub-hero .page-eyebrow           { animation-delay: 0.7s; }
.sub-hero .page-title             { animation-delay: 0.85s; }

/* 旧 .anim-hero-text クラス (= 後方互換) */
.anim-hero-text {
  opacity:0;
  transform:translateY(8px);
  animation:heroTextIn 0.9s ease-out forwards;
}

@keyframes heroTextIn {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* JS無効時のフォールバック (= 即表示) */
.no-js .anim-hero-text {
  opacity:1;
  transform:none;
  animation:none;
}

/* ----- スクロール reveal (=セクション登場) ----- */
.anim-reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change:opacity, transform;
}

.anim-reveal.revealed {
  opacity:1;
  transform:translateY(0);
}

/* JS無効時 / no-js: 即表示 */
.no-js .anim-reveal {
  opacity:1;
  transform:none;
  transition:none;
}

/* will-change を完了後にリセット (= GPU リソース節約) */
.anim-reveal.revealed {
  will-change:auto;
}

/* ----- リンク hover の滑らかさ (= 既存にtransitionが入ってない箇所への補強) ----- */
a {
  transition:color 0.2s ease-out, opacity 0.2s ease-out;
}

/* ----- ボタン subtle interaction ----- */
.btn-primary,
.message-cta-link,
.contact-cta {
  transition:background 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.btn-primary:hover,
.contact-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(26, 46, 92, 0.12);
}

/* ----- 画像 fade-in の汎用版 (=lazyロード時) ----- */
.fade-in-img {
  opacity:0;
  transition:opacity 0.5s ease-out;
}
.fade-in-img.loaded {
  opacity:1;
}

/* ============================================
   v30.34 ページ遷移フェード (= View Transitions API)
   - 対応ブラウザ: Chrome 111+, Edge 111+, Safari 18+
   - 非対応ブラウザでは何も起きない (= 通常遷移、 ユーザーは違和感なし)
   ============================================ */
@view-transition {
  navigation: auto;
}

/* デフォルトの View Transition を上書き */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: ease-out;
}

::view-transition-old(root) {
  animation-name: page-fade-out;
}

::view-transition-new(root) {
  animation-name: page-fade-in;
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* reduced-motion なら遷移アニメ無効 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* v30.34: ページ遷移フェードアウト用 (= View Transitions非対応ブラウザ用 fallback) */
body {
  transition:opacity 0.28s ease-out;
}

body.page-fading-out {
  opacity:0;
}

@media (prefers-reduced-motion: reduce) {
  body, body.page-fading-out {
    transition:none;
    opacity:1;
  }
}

/* ============================================================
   v30.35 高級・知的・素敵化アップグレード (21項目)
   ============================================================ */

/* ========== TYPOGRAPHY REFINEMENTS ========== */

/* #1+#7: 黄金比系統の余白トークン (= 1.5x ratio: 8/12/20/32/52/84/136) */
:root {
  --paan-space-2xs: 8px;
  --paan-space-xs:  12px;
  --paan-space-sm:  20px;
  --paan-space-md:  32px;
  --paan-space-lg:  52px;
  --paan-space-xl:  84px;
  --paan-space-2xl: 136px;

  /* 黄金比をベースにした line-height */
  --paan-lh-tight:  1.45;
  --paan-lh-base:   1.7;
  --paan-lh-loose:  2.05;

  /* タイポ stack 階層 */
  --paan-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --paan-sans:  'Noto Sans JP', -apple-system, 'Helvetica Neue', sans-serif;
  --paan-display: 'Marcellus', 'Playfair Display', 'Noto Serif JP', serif;
}

/* #3: 数字を比例フォント + 旧スタイル数字 (= 上品な数字組版) */
body {
  font-feature-settings: 'palt' 1, 'pkna' 1, 'pnum' 1;
  /* palt: 句読点の prop, pkna: かな prop, pnum: 数字 prop */
  text-spacing: trim-end;
}

/* #2: 句読点の二分四分処理 — 日本語組版の最高峰 */
/* CSS Text 4 の text-spacing で対応 (= 対応ブラウザは自動最適化) */
.section-body p,
.message-body p,
.info-val,
.business-list li,
.news-body,
.founder-bio {
  /* 句読点の前後を詰める = 日本語組版の品格 */
  text-spacing: auto;
  font-feature-settings: 'palt' 1, 'pnum' 1, 'pkna' 1, 'kern' 1;
  /* hanging punctuation: ぶら下げ組み = #6 */
  hanging-punctuation: allow-end last;
}

/* #5: 見出し letter-spacing 階層化 (= 大きい字ほど狭く) */
.hero-title {
  /* hero は最大級、 letter-spacing は控えめ */
  letter-spacing: 0.04em !important;
}
.page-title {
  letter-spacing: 0.06em !important;
}
.section-h {
  letter-spacing: 0.08em !important;
}
.info-h,
.founder-name {
  letter-spacing: 0.1em !important;
}
.page-eyebrow,
.section-eyebrow-sm {
  /* 小見出しは広く展開 (= シャネル等の高級ブランドの定番) */
  letter-spacing: 0.32em !important;
}

/* #4: 欧文と和文の間にエアスペース (= text-spacing: ideograph-alpha) */
.section-body p,
.message-body p,
.info-val,
.business-list li {
  text-spacing-trim: space-all;
}

/* #5 続き: 見出しのウェイト微調整 (= より繊細に) */
.section-h {
  font-weight: 400 !important;
}
.page-title strong {
  font-weight: 500 !important;
}

/* ========== SPACING REFINEMENTS ========== */

/* #7: page-wrap の余白 (= v30.37 更に詰めた、 フッターと本文の隙間最小化) */
.page-wrap {
  padding-top: 40px !important;
  padding-bottom: 32px !important;
}

/* モバイルではさらに詰める */
@media (max-width: 720px) {
  .page-wrap {
    padding-top: 28px !important;
    padding-bottom: 20px !important;
  }
}

/* #8: セクション間の余白 */
.info-section + .info-section {
  margin-top: 40px !important;
}

/* section-divider 自体の上下マージン (= 過剰だった) */
.section-divider {
  margin: 32px auto !important;
}

/* ========== GOLD GRADIENT BORDERS ========== */

/* #10: 罫線にゴールドグラデーション (= 中央が濃く端が薄い、 印刷物のような繊細さ) */
.info-h,
.section-h {
  border-bottom: none !important;
  position: relative;
  padding-bottom: var(--paan-space-xs) !important;
}

.info-h::after,
.section-h::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--paan-line) 8%,
    var(--paan-gold) 50%,
    var(--paan-line) 92%,
    transparent 100%
  );
}

/* ========== SECTION DIVIDERS ========== */

/* #11: section 間に微小な装飾モチーフ (= 控えめに) */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px auto;
  max-width: 480px;
  color: var(--paan-gold);
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--paan-line),
    transparent
  );
}

.section-divider::after {
  background: linear-gradient(
    to left,
    transparent,
    var(--paan-line),
    transparent
  );
}

.section-divider-mark {
  font-size: 8px;
  letter-spacing: 0.5em;
  color: var(--paan-gold);
  font-family: serif;
  opacity: 0.7;
}

/* #12: page-eyebrow に細い縦罫を添える (= 章扉のような格) */
.section-eyebrow-sm {
  position: relative;
  display: inline-block;
  padding-left: 24px;
}

.section-eyebrow-sm::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--paan-gold);
  opacity: 0.55;
}

/* ========== IMAGE FRAMES ========== */

/* #13: 画像の四隅にゴールドL字フレーム (= OGPと統一感) */
.founder-photo-wrap {
  position: relative;
  overflow: visible;
}

.founder-photo-wrap::before,
.founder-photo-wrap::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--paan-gold);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.founder-photo-wrap::before {
  top: -6px;
  left: -6px;
  border-right: none;
  border-bottom: none;
}

.founder-photo-wrap::after {
  bottom: -6px;
  right: -6px;
  border-left: none;
  border-top: none;
}

.founder-card:hover .founder-photo-wrap::before,
.founder-card:hover .founder-photo-wrap::after {
  opacity: 0.85;
}

/* #14: founder 写真にセピア寄りトーン (= わずか、 5%程度) */
.founder-photo {
  filter: sepia(0.05) saturate(0.95);
  transition: filter 0.4s ease-out;
}

.founder-card:hover .founder-photo {
  filter: sepia(0) saturate(1);
}

/* ========== INTERACTIONS ========== */

/* #16: カーソルが繊細な丸点に (= デスクトップのみ) */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  /* リンク・ボタンのhoverで上品な変化 */
  a:not(.mp-logo-link):not(.mp-footer-logo-link):hover {
    text-decoration-color: var(--paan-gold);
  }
}

/* #17: スクロール上でヒーロー画像が0.1倍 zoom-out (= 落ち着いたパララックス) */
.hero-bg-img,
.sub-hero .hero-bg-img {
  transform-origin: center center;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
}

.hero.scrolled .hero-bg-img,
.sub-hero.scrolled .hero-bg-img {
  transform: scale(1.04);
}

/* #19: ハンバーガーメニューのオープン時に背景がうっすらブラー */
body.menu-open::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(26, 32, 64, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99;
  opacity: 0;
  animation: menuBackdropIn 0.32s ease-out forwards;
  pointer-events: none;
}

@keyframes menuBackdropIn {
  to { opacity: 1; }
}

/* ハンバーガーメニュー本体は最上層 (=既存のz-indexを上書き保証)
   v32: クラス名を実装に合わせて .mp-mobile-menu → .mp-mobile-drawer に修正 */
.mp-mobile-drawer {
  z-index: 100 !important;
}

/* ========== FOOTER FINISHING ========== */

/* #22: フッターに印章モチーフ (= 老舗・公式感、 微細に) */
.mp-site-footer {
  position: relative;
}

.mp-site-footer::before {
  content: '◆';
  display: block;
  text-align: center;
  font-size: 7px;
  color: var(--paan-gold);
  opacity: 0.35;
  margin-bottom: 14px;
  letter-spacing: 0.5em;
}

/* reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img,
  .sub-hero .hero-bg-img,
  .hero.scrolled .hero-bg-img,
  .sub-hero.scrolled .hero-bg-img {
    transform: none !important;
  }
  body.menu-open::after {
    animation: none;
    opacity: 1;
  }
}


/* ============================================================
   v30.41 上品な追加アニメ 6項目セット
   ============================================================ */

/* ----- #1: リンク hover で下線が左から右にスーッと伸びる ----- */
.section-body p a,
.info-val a,
.business-list a,
.contact-card a,
.contact-email,
.message-back a {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease-out;
}

.section-body p a:hover,
.info-val a:hover,
.business-list a:hover,
.contact-card a:hover,
.contact-email:hover,
.message-back a:hover {
  background-size: 100% 1px;
}

/* contact-email は既に下線あるので、 hover時のゴールド色変化のみ */
.contact-email {
  background: none;
  transition: border-color 0.3s ease-out, opacity 0.2s ease;
}
.contact-email:hover {
  border-bottom-color: var(--paan-gold);
  opacity: 1;
}

/* ----- #3: founder写真 Ken Burns効果 (= 微小なズーム + パン、 静止画が生きる) ----- */
.founder-photo {
  /* 既存の filter は維持、 transform 追加 */
  transform: scale(1.0);
  transition: transform 12s ease-out, filter 0.4s ease-out;
}

/* hover時 (= 写真にカーソルが乗った時) は通常 transform を Ken Burns 起動 */
.founder-card:hover .founder-photo {
  transform: scale(1.06) translate(-1%, -0.5%);
}

/* スクロール reveal で見えた時、 自動的に Ken Burns が動き出す */
.founder-card.revealed .founder-photo {
  animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.05) translate(-1%, -1%); }
}

/* ----- #4: 見出しの下線 (=ゴールドグラデ) が viewport in 時に左→右に描画 ----- */
.info-h::after,
.section-h::after {
  /* 既存のグラデ罫線、 初期は幅 0 から開始 */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

/* セクションが revealed (= viewport in) になったら下線が伸びる */
.info-section.revealed .info-h::after,
.section.revealed .section-h::after {
  transform: scaleX(1);
}

/* JS無効時のフォールバック: 即表示 */
.no-js .info-h::after,
.no-js .section-h::after {
  transform: scaleX(1);
  transition: none;
}

/* ----- #10: section-divider ◆ が viewport in 時に透明→ゴールド ----- */
.section-divider .section-divider-mark {
  opacity: 0;
  transition: opacity 1.2s ease-out 0.3s;
}

/* セクションが revealed になった隣の divider も発光 */
.section.revealed + .section-divider .section-divider-mark,
.info-section.revealed + .section-divider .section-divider-mark {
  opacity: 0.7;
}

/* 単独で divider が viewport にある場合 (= IntersectionObserver の対象に追加) */
.section-divider.revealed .section-divider-mark {
  opacity: 0.7;
}

.no-js .section-divider .section-divider-mark {
  opacity: 0.7;
  transition: none;
}

/* ----- #11: brand カード hover時、 ゴールド枠が外側からスッと出る ----- */
.brand-card {
  position: relative;
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.brand-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.5s ease-out, inset 0.4s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 46, 92, 0.10);
  }

  .brand-card:hover::after {
    inset: -5px;
    border-color: var(--paan-gold);
    opacity: 0.5;
  }
}

/* ----- #12: page-eyebrow の縦罫が中央起点で上下に伸びる ----- */
.section-eyebrow-sm {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 24px;
}

.section-eyebrow-sm::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  background: var(--paan-gold);
  opacity: 0.55;
  /* 中央起点で上下に伸ばす */
  transform-origin: center center;
  transform: translateY(-50%) scaleY(0);
  height: 14px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.section.revealed .section-eyebrow-sm::before {
  transform: translateY(-50%) scaleY(1);
}

.no-js .section-eyebrow-sm::before {
  transform: translateY(-50%) scaleY(1);
  transition: none;
}

/* reduce-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .founder-photo,
  .founder-card.revealed .founder-photo {
    animation: none !important;
    transform: none !important;
  }
  .info-h::after,
  .section-h::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .section-eyebrow-sm::before {
    transform: translateY(-50%) scaleY(1) !important;
    transition: none !important;
  }
  .section-divider .section-divider-mark {
    opacity: 0.7;
    transition: none;
  }
}


/* ============================================
   v31.1 ページ遷移時のハンバーガー残像完全解消
   ============================================ */

/* リンクタップ時、 drawer を transition 無しで即消す
   (= page-fading-out も drawer-instant-hide も両方カバー) */
body.page-fading-out .mp-mobile-drawer,
body.page-fading-out .mp-mobile-drawer-inner,
body.page-fading-out .mp-mobile-drawer-inner *,
body.page-fading-out .mp-mobile-link,
body.page-fading-out .mp-mobile-locale-toggle,
body.page-fading-out .mp-mobile-locale-item,
body.page-fading-out .mp-mobile-locale-grid,
body.drawer-instant-hide .mp-mobile-drawer,
body.drawer-instant-hide .mp-mobile-drawer-inner,
body.drawer-instant-hide .mp-mobile-drawer-inner *,
body.drawer-instant-hide .mp-mobile-link,
body.drawer-instant-hide .mp-mobile-locale-toggle,
body.drawer-instant-hide .mp-mobile-locale-item,
body.drawer-instant-hide .mp-mobile-locale-grid {
  transition: none !important;
  animation: none !important;
}

/* drawer を即非表示 */
body.page-fading-out .mp-mobile-drawer,
body.drawer-instant-hide .mp-mobile-drawer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* backdrop blur も即消す */
body.page-fading-out::after,
body.drawer-instant-hide::after {
  display: none !important;
}


/* v34.2: Cookie 同意バナー CSS は /cookie-consent.css に分離
   理由: SW/CDN キャッシュ独立、 banner 単独動作の保証 */

/* v33: brand.html の inline style="margin-top:18px;" を CSS化 (= CSP 完全準拠) */
.brand-card-body--others {
  margin-top: 18px;
}