/* ============================
   Base Reset & Variables
============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:    #0165b1;
  --dark:    #111111;
  --gray:    #6b7280;
  --light:   #e8f2fa;
  --white:   #ffffff;
  --accent:  #0165b1;
  --border:  #c8dff0;
  --section-pad: 120px;
  --font-body:    'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-heading: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-en:      'Inter', sans-serif;
  /* 後方互換 */
  --font-ja: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.8;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================
   Header
============================ */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 80px;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .4s ease, box-shadow .4s ease, height .4s ease;
}
#header.scrolled {
  height: 68px;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 32px rgba(0,0,0,.08) !important;
}

/* ロゴ — 透過時は白 */
.logo { display: flex; align-items: center; }
.logo img {
  height: 36px; width: auto; display: block;
  filter: none;
  transition: filter .4s ease, height .4s ease;
}
#header.scrolled .logo img { filter: none; height: 32px; }

/* ダークヒーローページ — スクロール前はロゴ・ナビを白に */
body.dark-hero #header:not(.scrolled) .logo img { filter: brightness(0) invert(1); }
body.dark-hero #header:not(.scrolled) nav a:not(.nav-contact) { color: #ffffff; }
.logo span { color: var(--accent); }

nav { display: flex; align-items: center; gap: 36px; }

nav a {
  font-family: var(--font-en);
  font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dark);
  transition: color .3s;
  padding-bottom: 4px;
}
#header.scrolled nav a { color: var(--dark); }
nav a:hover { color: var(--accent); }
#header.scrolled nav a:hover { color: var(--accent); }
#header.scrolled nav a.active { color: var(--accent); }

.nav-contact {
  border-radius: 50px !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  padding: 10px 24px !important;
  border: 1px solid transparent !important;
  text-transform: uppercase !important;
  transition: background .3s !important;
}
.nav-contact:hover { background: rgba(255,255,255,.32) !important; }
#header.scrolled .nav-contact {
  background: var(--navy) !important;
  border-color: transparent !important;
}
#header.scrolled .nav-contact:hover { background: var(--accent) !important; }

/* ハンバーガー — 透過時は白 */
.hamburger span { background: var(--white); transition: background .4s, transform .3s, opacity .3s; }
#header.scrolled .hamburger span { background: var(--navy); }

/* ============================
   Page Hero (sub pages)
============================ */
.page-hero {
  background: var(--navy);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.page-hero-deco {
  position: absolute;
  right: 8%;
  bottom: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.page-hero-deco::before {
  content: '';
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
}
.page-hero-deco::after {
  content: '';
  position: absolute;
  inset: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.05);
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
}
.page-hero-en {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-hero-en::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,.3);
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  color: var(--white);
  letter-spacing: .06em;
  line-height: 1.3;
}
.page-hero h1 strong { font-weight: 900; }

/* ============================
   Section Commons
============================ */
section { padding: var(--section-pad) 0; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
}

.section-label {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 24px;
}
.section-title strong { font-weight: 600; }

.section-desc {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--gray);
  line-height: 2;
  max-width: 560px;
}

.divider {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0 0 32px 0;
}

/* ============================
   Buttons
============================ */
.btn {
  display: inline-block;
  padding: 14px 40px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: 50px;
  transition: all .3s;
}
.btn:hover { background: var(--navy); color: var(--white); }

.btn-white {
  border-color: rgba(255,255,255,.5);
  color: var(--white);
}
.btn-white:hover { background: var(--white); color: var(--navy); }

/* ============================
   Sitemap Section
============================ */
/* ============================
   Footer
============================ */
.site-footer {
  background: #ffffff;
  position: relative;
  overflow: hidden;
  padding: 48px max(64px, calc((100vw - 1320px) / 2)) 0;
}

.footer-symbol {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  width: 90%;
}
.footer-symbol img {
  opacity: 0.08;
  filter: brightness(0);
}
.footer-symbol-logo {
  width: 100%;
  height: auto;
}
.footer-symbol-mark {
  display: none;
  height: 320px;
  width: auto;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.footer-left { align-self: start; }

.footer-logo-wrap {
  margin-bottom: 14px;
}
.footer-logo-wrap img {
  height: 36px;
  width: auto;
  filter: none;
}

.footer-company {
  font-family: var(--font-body);
  font-size: 12px;
  color: #000000;
  line-height: 1.9;
  margin-bottom: 2px;
}
.footer-address {
  font-family: var(--font-body);
  font-size: 12px;
  color: #000000;
  line-height: 1.9;
  margin-bottom: 14px;
}
.footer-tel {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: .04em;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-email {
  font-family: var(--font-en);
  font-size: 13px;
  color: #000000;
  letter-spacing: .04em;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-email svg {
  flex-shrink: 0;
  color: #000000;
}

.footer-tel svg {
  flex-shrink: 0;
  color: var(--navy);
}

/* フッター連絡先・ロゴのリンク：文字色を継承しデフォルト青下線を消す */
.footer-tel a,
.footer-email a {
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}
.footer-tel a:hover,
.footer-email a:hover { color: var(--accent); }
.footer-logo-wrap a { display: inline-block; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 24px;
  align-self: start;
  align-items: start;
  margin-bottom: 36px;
}
.footer-nav-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav-main {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color .25s;
  white-space: nowrap;
}
.footer-nav-main:hover { color: var(--accent); }
.footer-nav-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: #000000;
  letter-spacing: .06em;
  transition: color .25s;
}
.footer-nav-sub:hover { color: var(--accent); }


.footer-copy-bar {
  position: relative;
  z-index: 1;
  padding: 48px 0 24px;
  text-align: right;
}
.footer-copy-bar span {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .1em;
  color: #000000;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .site-footer { padding: 60px 28px 0; }
  .footer-nav { gap: 24px; }
  /* モバイル：フッターの現在ページ下線（青線）を非表示 */
  .footer-nav a:not(.nav-contact)::after { display: none; }
}

/* ============================
   Fade-in animation
============================ */
.fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .75s cubic-bezier(0,.9,.4,1), transform .75s cubic-bezier(0,.9,.4,1);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================
   文字スライドアップ
============================ */
.char-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.char-inner {
  display: inline-block;
  animation: charUp .7s cubic-bezier(0,.9,.4,1) both;
}
@keyframes charUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ============================
   セクションラベル描画
============================ */
.section-label::before {
  width: 0;
  transition: width .6s cubic-bezier(0,.9,.4,1);
}
.section-label.label-visible::before { width: 28px; }

/* ============================
   ボタン hover — fill from left
============================ */
.btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: translateX(-101%);
  transition: transform .35s cubic-bezier(0,.9,.4,1);
  z-index: -1;
}
.btn:hover { color: var(--white); }
.btn:hover::after { transform: translateX(0); }

/* ============================
   サービスビジュアル hover
============================ */
.business-visual,
.service-visual {
  transition: transform .4s cubic-bezier(0,.9,.4,1);
  cursor: none;
}
.business-visual.visual-hover,
.service-visual.visual-hover {
  transform: scale(1.03);
}
.business-visual svg,
.service-visual svg {
  transition: opacity .4s;
}
.business-visual.visual-hover svg,
.service-visual.visual-hover svg {
  opacity: 1.15;
}

/* ============================
   ナビリンク — underline slide
============================ */
nav a:not(.nav-contact) {
  position: relative;
  border-bottom: none !important;
  padding-bottom: 4px;
}
nav a:not(.nav-contact)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width .3s cubic-bezier(0,.9,.4,1);
}
nav a:not(.nav-contact):hover::after,
nav a:not(.nav-contact).active::after { width: 100%; }

/* ============================
   other-card hover
============================ */
.other-card {
  transition: transform .35s cubic-bezier(0,.9,.4,1), box-shadow .35s;
}
.other-card:hover {
  transform: translateY(-6px);
}

/* ============================
   Hamburger Button
============================ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 200;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--navy);
  transition: transform .3s, opacity .3s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================
   Mobile Menu Drawer
============================ */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: 280px;
  height: 100dvh;
  background: var(--white);
  z-index: 150;
  padding: 96px 40px 40px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 32px rgba(0,0,0,.08);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-nav a {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.mobile-nav a:first-child { border-top: 1px solid var(--border); }
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav a.nav-contact {
  margin-top: 32px;
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  padding: 14px 32px;
  border-radius: 50px;
  border: none;
  text-align: center;
}
.mobile-nav a.nav-contact:hover { background: var(--accent); }

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 140;
  opacity: 0;
  pointer-events: none; /* 閉状態ではクリックを素通りさせる（全ボタン反応なしバグ対策） */
  transition: opacity .35s;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* ============================
   Responsive
============================ */
/* ============================
   Responsive — tablet (max 900px)
============================ */
@media (max-width: 900px) {
  :root { --section-pad: 72px; }

  /* Header */
  #header { padding: 0 24px; }
  nav { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }
  .mobile-overlay { display: block; }

  /* Layout */
  .container { padding: 0 24px; }
  .page-hero-inner { padding: 0 24px; }

  /* Page hero */
  .page-hero { min-height: 240px; padding: 100px 24px 48px; }
  .page-hero h1 { font-size: clamp(32px, 8vw, 52px); }

  /* Grids → single column */
  .features-grid,
  .strength-grid,
  .other-grid,
  .business-grid,
  .flow-list,
  .qa-list { grid-template-columns: 1fr !important; }

  /* Service layout */
  .service-section { flex-direction: column !important; gap: 40px; }
  .service-visual { width: 100% !important; max-width: 100%; }

  /* Footer */
  .site-footer { padding: 48px 24px 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-tel { font-size: 22px; }
  .footer-tel svg { width: 18px; height: 18px; }
  .footer-symbol { right: -20px; transform: translateY(-50%); width: auto; bottom: auto; top: 50%; left: auto; }
  .footer-symbol-logo { display: none; }
  .footer-symbol-mark { display: block; }
}

/* ============================
   Responsive — mobile (max 600px)
============================ */
@media (max-width: 600px) {
  body { padding-top: 0; }
  #header { height: 64px; }

  /* Footer */
  .footer-nav { grid-template-columns: 1fr; }
  .footer-company { font-size: 16px; }
  .footer-tel { font-size: 20px; gap: 6px; }
  .footer-tel-label { font-size: 20px; }
  .footer-copy-bar { text-align: center; }
}

/* ============================
   Guide Panels (shared)
   index.html + business.html
============================ */
.guide-panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 72px;
  padding: 72px max(64px, calc((100vw - 1320px) / 2)) 80px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-decoration: none;
  cursor: pointer;
}

/* カラーバリアント（background-color のみで指定し、background-image を打ち消さない） */
.gp-col-white { background-color: #ffffff; border-bottom: none; }
.gp-col-navy  { background-color: #0165b1; border-bottom-color: rgba(255,255,255,.1); position: relative; z-index: 1; margin-top: -80px; clip-path: polygon(0 0, 100% 80px, 100% 100%, 0 100%); padding-top: 152px; }
.gp-col-light { background-color: #eef4fa; position: relative; z-index: 1; margin-top: -80px; clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); padding-top: 152px; }
.gp-col-dark  { background-color: #1a3a5c; border-bottom-color: rgba(255,255,255,.1); }

.guide-panel::before { display: none; }

/* 左カラム */
.gp-left {
  display: flex;
  flex-direction: column;
  position: relative; z-index: 1;
}

.gp-num {
  font-family: var(--font-en);
  font-size: 13px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 20px;
  margin-bottom: 72px;
}
.gp-num::after {
  content: '';
  display: inline-block; width: 56px; height: 1px;
}
.gp-col-white .gp-num,
.gp-col-light .gp-num  { color: var(--accent); }
.gp-col-white .gp-num::after,
.gp-col-light .gp-num::after { background: var(--accent); }
.gp-col-navy  .gp-num,
.gp-col-dark  .gp-num  { color: rgba(255,255,255,.5); }
.gp-col-navy  .gp-num::after,
.gp-col-dark  .gp-num::after { background: rgba(255,255,255,.35); }

.gp-sub {
  font-size: 13px; font-weight: 400;
  letter-spacing: .1em;
  margin-bottom: 20px; display: block;
}
.gp-col-white .gp-sub { color: #000000; }
.gp-col-light .gp-sub { color: #000000; }
.gp-col-navy  .gp-sub,
.gp-col-dark  .gp-sub { color: #ffffff; }

.gp-title {
  font-family: var(--font-en);
  font-size: clamp(52px, 6.8vw, 100px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 36px;
  display: block;
}
.gp-col-white .gp-title,
.gp-col-light .gp-title { color: var(--navy); }
.gp-col-navy  .gp-title,
.gp-col-dark  .gp-title { color: #ffffff; }

.gp-overview {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.8; letter-spacing: .15em;
  display: block;
}
.gp-col-white .gp-overview { color: #000000; }
.gp-col-light .gp-overview { color: #000000; }
.gp-col-navy  .gp-overview,
.gp-col-dark  .gp-overview { color: #ffffff; }

/* 右カラム */
.gp-right {
  display: flex;
  flex-direction: column;
  position: relative; z-index: 1;
}
.gp-right-spacer { flex: 1; }

.gp-desc {
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.9; letter-spacing: .04em;
  display: block;
  margin-bottom: 32px;
}
.gp-col-white .gp-desc { color: #000000; }
.gp-col-light .gp-desc { color: #000000; }
.gp-col-navy  .gp-desc,
.gp-col-dark  .gp-desc { color: #ffffff; }

.gp-cta-wrap {
  display: flex;
  justify-content: flex-end;
}
.gp-cta-btn {
  display: inline-flex;
  align-items: center; gap: 12px;
  padding: 16px 36px;
  border-radius: 50px;
  font-family: var(--font-en);
  font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  background: transparent;
  transition: background .35s, color .35s;
}
.gp-cta-btn .arr {
  display: inline-block; font-size: 16px;
  transition: transform .35s cubic-bezier(0,.9,.4,1);
}
.guide-panel:hover .gp-cta-btn .arr { transform: translateX(6px); }
.gp-col-white .gp-cta-btn,
.gp-col-light .gp-cta-btn { border: 1.5px solid var(--navy); color: var(--navy); }
.gp-col-white .gp-cta-btn:hover,
.gp-col-light .gp-cta-btn:hover { background: var(--navy); color: #fff; }
.gp-col-navy .gp-cta-btn,
.gp-col-dark .gp-cta-btn { border: 1.5px solid rgba(255,255,255,.5); color: rgba(255,255,255,.85); }
.gp-col-navy .gp-cta-btn:hover,
.gp-col-dark .gp-cta-btn:hover { background: rgba(255,255,255,.15); }

/* 背景ウォーターマーク */
.gp-bg {
  position: absolute;
  top: 50%; right: -24px;
  transform: translateY(-50%) translateX(280px);
  opacity: 0;
  font-family: var(--font-en);
  font-size: clamp(160px, 22vw, 320px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .85;
  text-transform: uppercase;
  user-select: none; pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  transition: transform 1.2s cubic-bezier(0,.9,.4,1), opacity 1s ease;
}
.guide-panel.visible .gp-bg {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.guide-panel:hover .gp-bg { transform: translateY(-50%) translateX(-12px); }
.gp-col-white .gp-bg { color: rgba(0,0,0,.06); }
.gp-col-light .gp-bg { color: rgba(0,0,0,.06); }
.gp-col-navy  .gp-bg { color: rgba(0,0,0,.08); }
.gp-col-dark  .gp-bg { color: rgba(0,0,0,.1); }

/* ===== サービス詳細ページ ヒーロー ===== */
.svc-detail-hero {
  min-height: 30vh;
  background: url('../images/FV背景.jpg') center center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 120px max(64px, calc((100vw - 1320px) / 2)) 64px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.svc-detail-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(1,101,177,.82);
  z-index: 0;
}
.svc-detail-hero-bg {
  position: absolute;
  top: 50%; right: -20px;
  transform: translateY(-50%);
  z-index: 1;
  font-family: var(--font-en);
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 900;
  color: rgba(255,255,255,.06);
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.svc-detail-hero-inner { position: relative; z-index: 1; }
.svc-detail-hero-label {
  font-family: var(--font-en);
  font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 24px;
}
.svc-detail-hero-label::after { content: ''; display: inline-block; width: 48px; height: 1px; background: rgba(255,255,255,.4); }
.svc-detail-hero-title {
  font-family: var(--font-en);
  font-size: clamp(52px, 8vw, 120px);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.svc-detail-hero-sub {
  font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,.55);
  letter-spacing: .08em;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .svc-detail-hero { padding: 100px 28px 48px; min-height: auto; }
}

@media (max-width: 900px) {
  .guide-panel { grid-template-columns: 1fr; gap: 0; padding: 48px 28px 56px; min-height: auto; overflow: hidden; }
  .gp-left, .gp-right { width: 100%; min-width: 0; }
  .gp-right { margin-top: 32px; min-height: 0; }
  .gp-right-spacer { display: none; }
  .gp-cta-wrap { justify-content: flex-start; }
  .gp-title { font-size: clamp(28px, 7vw, 44px); }
  .gp-bg { font-size: 80px; right: -8px; }
  .gp-col-navy { margin-top: 0; clip-path: none; padding-top: 48px; }
  .gp-col-light { margin-top: 0; clip-path: none; padding-top: 48px; }
}

/* SP専用改行ユーティリティ（PCでは改行しない） */
.br-sp { display: none; }
@media (max-width: 900px) {
  .br-sp { display: inline; }
}

/* ============================
   PRINT (PDF出力用)
   ============================ */
@media print {
  @page {
    size: 1280px 1810px;
    margin: 0;
  }
  html, body {
    width: 1280px;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
  }
  /* fade-in 等の透明状態を強制表示 */
  .fade-in, [class*="fade-"] { opacity: 1 !important; transform: none !important; }
  /* 不要要素の非表示 */
  .scroll-indicator, .hamburger, .mobile-overlay, .mobile-menu { display: none !important; }
  #header { position: absolute !important; }
  /* clip-path の斜め断面を維持しつつ確実に印刷 */
  .gp-col-navy, .gp-col-light { clip-path: none !important; margin-top: 0 !important; padding-top: 152px !important; }