/* =============================================================
   Grand Power - 共通デザインシステム (common.css)
   モバイルファースト設計
   全ページ共通:
     - RESET / COLOR TOKENS / BASE / CONTAINER
     - HEADER / HAMBURGER / MOBILE NAV
     - PAGE HERO (.ph-*, #page-hero)
     - PAGE NAV (sticky in-page tabs)
     - SECTION HEADINGS (.sec-lbl / .sec-ttl / .sec-lead)
     - ARROW ICON (.arr)
     - FOOTER
     - FADE IN
   ブレイクポイント (mobile-first):
     - Base:         〜559px (Mobile)
     - min-width:560px  (Small Tablet)
     - min-width:860px  (Tablet / Desktop chrome切替)
     - min-width:1160px (Wide Desktop)
   ============================================================= */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── COLOR & SYSTEM TOKENS ─── */
:root{
  /* ── Warm Amber ── PRIMARY */
  --amber:#a06845; --amber2:#8c5936; --amber3:#c8956a; --amber4:#e8d0b8; --amber5:#fdf2e4;
  /* ── Teal ── SECONDARY (logo only) */
  --teal:#00a5be; --teal2:#4dc0d0; --teal3:#cce8f0;
  /* ── Text ── warm */
  --dark:#1a1008; --brown:#180e06; --body:#3d2e22; --muted:#7a6250;
  /* ── Backgrounds ── */
  --white:#fff; --offwhite:#faf8f4; --cream:#f5ede0;
  /* ── System ── */
  --r:8px; --rM:16px; --rBtn:48px;
  --shadow:0 1px 8px rgba(26,16,8,.07); --shadowM:0 4px 24px rgba(26,16,8,.12);
}

/* ─── BASE ─── */
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font-family:'Noto Sans JP',sans-serif;color:var(--body);background:var(--white);line-height:1.75;overflow-x:hidden}
a{text-decoration:none;color:inherit}
/* 電話番号リンクは既定で無効（会社概要・住所など"説明の中の番号"はタップで発信させない） */
a[href^="tel"]{color:inherit!important;text-decoration:none!important;pointer-events:none;cursor:text}
/* お問い合わせ先として開示する番号にだけ .tel-call を付与。スマホ等タッチ端末のみタップで電話アプリが起動する */
@media (hover:none) and (pointer:coarse){
  a[href^="tel"].tel-call{pointer-events:auto;cursor:pointer}
}
ul{list-style:none}
/* ── CONTAINER ── モバイルは padding:0 20px, 560px以上で 0 32px */
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}

/* ─── HEADER ─── */
header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(253,250,245,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--amber4);transition:box-shadow .3s}
header.scrolled{box-shadow:0 2px 16px rgba(26,16,8,.08)}
.h-inner{max-width:1160px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px}
.logo-emblem{height:30px;width:auto;flex-shrink:0;object-fit:contain}
.logo-text{line-height:1.2}
.logo-en{font-family:'Montserrat',sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.22em;color:var(--teal);text-transform:uppercase}
.logo-jp{font-family:'Noto Serif JP',serif;font-size:.92rem;font-weight:700;color:var(--dark)}
/* デスクトップナビ ── モバイルでは非表示、860px以上で表示 */
nav ul{display:none;gap:28px;align-items:center}
nav a{font-size:.875rem;color:var(--muted);letter-spacing:.02em;transition:color .2s;position:relative;padding-bottom:3px}
nav a::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:1px;background:var(--amber3);transition:all .25s}
nav a:hover{color:var(--amber)}
nav a:hover::after{left:0;right:0}
nav a.active{color:var(--amber)}
nav a.active::after{left:0;right:0}

/* ─── HAMBURGER ── モバイル既定で表示、860px以上で非表示 */
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--dark);transition:all .3s}
.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 NAV ─── */
.mobile-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--offwhite);z-index:99;padding:32px;flex-direction:column;overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:1rem;color:var(--dark);padding:18px 0;border-bottom:1px solid var(--amber4);display:flex;justify-content:space-between;align-items:center}
.mobile-nav a:hover{color:var(--amber)}
.mobile-nav .m-cta{margin-top:28px;background:var(--amber);color:#fff;text-align:center;padding:16px;border-radius:var(--rM);font-weight:600;border-bottom:none;justify-content:center}

/* ─── PAGE HERO (dark strip under fixed header) ─── */
#page-hero{padding-top:64px;background:var(--brown);min-height:240px;display:flex;align-items:flex-end}
.ph-inner{position:relative;z-index:1;padding:56px 0 48px;width:100%}
.ph-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ph-breadcrumb a{font-size:.85rem;color:rgba(255,255,255,.45);transition:color .2s}
.ph-breadcrumb a:hover{color:rgba(255,255,255,.8)}
.ph-breadcrumb-sep{font-size:.85rem;color:rgba(255,255,255,.25)}
.ph-breadcrumb span{font-size:.85rem;color:rgba(255,255,255,.6)}
.ph-title{font-family:'Noto Serif JP',serif;font-size:clamp(1.5rem,4vw,2.75rem);font-weight:700;color:var(--white);line-height:1.35;letter-spacing:.02em}

/* ─── PAGE NAV (sticky in-page tabs) ─── */
.page-nav{background:var(--white);border-bottom:1px solid var(--amber4);position:sticky;top:64px;z-index:90;box-shadow:0 2px 8px rgba(26,16,8,.05)}
.page-nav-inner{display:flex;max-width:1160px;margin:0 auto;padding:0 20px;overflow-x:auto}
.page-nav a{font-size:.875rem;font-weight:500;color:var(--muted);padding:16px 20px;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap}
.page-nav a:hover{color:var(--amber);border-bottom-color:var(--amber3)}
.page-nav a.active{color:var(--amber);border-bottom-color:var(--amber);font-weight:700}

/* ─── SECTION HEADINGS (common) ─── */
.sec-lbl{font-family:'Noto Serif JP',serif;font-size:1.35rem;font-weight:700;letter-spacing:.05em;color:var(--dark);margin-bottom:20px;display:inline-block;border-left:3px solid var(--amber);padding-left:14px;line-height:1.4}
.sec-ttl{font-family:'Noto Serif JP',serif;font-size:clamp(1.5rem,2.8vw,2rem);font-weight:700;color:var(--dark);line-height:1.45;margin-bottom:16px}
.sec-lead{font-size:1rem;color:var(--body);line-height:2.0}
.sec-lead .em{font-weight:700;color:var(--dark)}

/* ─── ARROW ICON ─── */
.arr{width:13px;height:13px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex-shrink:0}

/* ─── FOOTER ── モバイル既定は縦積み、860px以上で横並び */
footer{background:var(--brown);padding:36px 0 20px}
.foot-top{display:flex;flex-direction:column;gap:32px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px}
.foot-logo .logo-jp{color:var(--white)!important}
.foot-logo .logo-en{color:var(--teal2)!important}
.foot-nav-title{font-family:'Montserrat',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:10px}
.foot-nav-list{display:flex;flex-direction:column;gap:6px}
.foot-nav-list--2col{display:grid;grid-template-columns:1fr;gap:5px 20px}
.foot-nav-list a{font-size:.8125rem;color:rgba(255,255,255,.5);transition:color .2s}
.foot-nav-list a:hover{color:rgba(255,255,255,.88)}
.foot-address{font-size:.85rem;color:rgba(255,255,255,.35);line-height:1.8;margin-top:16px}
/* モバイル既定: 事務所ラベル・住所・TEL を縦積み分割表示 */
.foot-office{display:block;margin-bottom:10px}
.foot-office-name{display:block;font-weight:500;color:rgba(255,255,255,.55)}
.foot-sep{display:none}
.foot-office-addr{display:block}
.foot-office-tel{display:block}
.foot-address a{color:rgba(255,255,255,.45);transition:color .2s}
.foot-address a:hover{color:rgba(255,255,255,.75)}
.foot-copy{font-size:.75rem;text-align:center;color:rgba(255,255,255,.25)}

/* ─── FADE IN ─── */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.fade-up.visible{opacity:1;transform:none}

/* =============================================================
   ─── RESPONSIVE (mobile-first) ───
   ============================================================= */

/* ─── Small Tablet 以上 (560px+) ─── */
@media(min-width:560px){
  .container{padding:0 32px}
  .h-inner{padding:0 32px}
  .page-nav-inner{padding:0 32px}
  .foot-nav-list--2col{grid-template-columns:1fr 1fr}
  /* 事務所ラベル・住所を1行表示に戻す (foot-office 自体は block のまま、内側 span を inline に) */
  .foot-office{margin-bottom:3px}
  .foot-office-name{display:inline;font-weight:inherit;color:inherit}
  .foot-sep{display:inline}
  .foot-office-addr{display:inline}
  .foot-office-tel{display:inline}
}

/* ─── Tablet / Desktop chrome (860px+) ─── */
@media(min-width:860px){
  nav ul{display:flex}
  .hamburger{display:none}
  .foot-top{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
  .page-nav a{padding:16px 24px}
}