/* ============================================================
   common.css — サイト全体で共有するスタイル (ver2 / redesign)
   (ヘッダー / フッター / ハンバーガーメニュー / トップへ戻るボタン /
    モバイル固定CTAバー / reveal演出 / 基本要素)
   ページ固有のスタイルは各HTMLの <style> 側に書く。
   ── ver2での変更点 ──
   ・デザイントークンを拡張(サーフェス階調・シャドウ・イージング・角丸)
   ・ボタン/フォーカスリング/ナビゲーションの視認性とホバー演出を強化
   ・スキップリンクを追加(キーボード操作のアクセシビリティ向上)
   ・タッチターゲット/フォーム要素の余白を44px基準に調整
============================================================ */
:root{
  --bg:#0B0C0E;
  --panel:#15171A;
  --panel-2:#1B1E22;
  --panel-3:#20232A;
  --ink:#F2F3F5;
  --ink-dim:#9AA0A6;
  --ink-faint:#858B92; /* 背景とのコントラスト比4.5:1以上を確保 */
  --accent:#FF6B1A;
  --accent-2:#FFB020;
  --blue:#5FB8FF;
  --green:#4FC97E;
  --line:rgba(236,237,239,0.12);
  --line-strong:rgba(236,237,239,0.24);
  --shadow-sm:0 2px 10px rgba(0,0,0,.28);
  --shadow-md:0 16px 40px -12px rgba(0,0,0,.55);
  --shadow-glow:0 0 0 1px rgba(255,107,26,.4),0 10px 28px -6px rgba(255,107,26,.35);
  --radius-sm:4px;
  --radius-md:10px;
  --radius-lg:18px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --display:'Noto Sans JP',sans-serif;
  --cond:'Oswald',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --header-h:64px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
}
h1,h2,h3{font-family:var(--display);font-weight:900;margin:0;letter-spacing:-0.01em;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}

/* ─── Skip link (キーボード操作: 本文へジャンプ) ─── */
.skip-link{
  position:fixed;top:-80px;left:16px;z-index:300;
  background:var(--accent);color:#15110A;
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:14px 22px;border-radius:var(--radius-sm);text-decoration:none;
  transition:top .25s var(--ease-out);
  box-shadow:var(--shadow-md);
}
.skip-link:focus{top:16px;}

.btn{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:600;
  padding:15px 28px;border-radius:var(--radius-sm);text-decoration:none;display:inline-block;
  min-height:44px;
  transition:transform .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s var(--ease-out);
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#15110A;box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow);}
.btn-primary:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-sm);}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink-dim);background:rgba(236,237,239,.05);transform:translateY(-2px);}
.btn-ghost:active{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .btn,.btn-primary,.btn-ghost{transition:background .2s,color .2s;}
  .btn:hover,.btn:active{transform:none;}
}

/* ─── Generic section (used on sub-pages too) ─── */
section{padding:120px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,4vw,42px);margin-top:14px;}
.section-head p{color:var(--ink-dim);margin-top:16px;font-size:16px;}

/* ─── 水面の線(航跡): 見出しの下を、ボートの航跡のような線が左から右へ走る ─── */
.section-head h2::after{
  content:'';display:block;width:160px;height:14px;margin-top:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FF6B1A' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23FF6B1A' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23FFB020'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 7 Q10 2 18 7 T34 7 T50 7 T66 7 T82 7 T98 7 T114 7 T130 7 T146 7' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M20 11 Q40 9 60 11 T100 11 T140 10' fill='none' stroke='url(%23g)' stroke-width='1' stroke-opacity='.5' stroke-linecap='round'/%3E%3Ccircle cx='153' cy='7' r='3' fill='%23FFB020'/%3E%3C/svg%3E") no-repeat left center/160px 14px;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.3s var(--ease-out) .35s;
}
.is-visible .section-head h2::after,
.section-head.is-visible h2::after{clip-path:inset(0 0 0 0);}
@media(prefers-reduced-motion:reduce){.section-head h2::after{clip-path:none;transition:none;}}

/* ─── Reveal animation ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ============================================================
   Header / Navigation
============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:rgba(11,12,14,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.02),0 16px 32px -20px rgba(0,0,0,.6);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);max-width:1360px;}
.logo{font-family:var(--cond);font-weight:700;letter-spacing:.04em;font-size:15px;text-decoration:none;transition:opacity .2s;}
.logo:hover{opacity:.85;}
.logo span{color:var(--accent);}
.logo{display:inline-flex;align-items:center;}
.logo img{display:block;height:30px;width:auto;}
/* メニュー項目を絞ったため、PCでもエンブレム+LAXASロゴを表示。
   横幅が狭いPC(1024〜1200px)ではロゴを少し小さくしてメニューと重ならないようにする */
@media(min-width:1024px) and (max-width:1200px){.logo img{height:24px;}nav#siteNav ul{gap:16px;}}
@media(max-width:480px){.logo img{height:26px;}}

nav#siteNav ul{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
nav#siteNav a{
  font-family:var(--cond);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-dim);transition:color .2s var(--ease-out);position:relative;
  padding:12px 0;white-space:nowrap;display:inline-block;
}
nav#siteNav a:hover{color:var(--ink);}
nav#siteNav a.active{color:var(--ink);}
nav#siteNav a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px;
}
nav#siteNav li.nav-sep{width:1px;height:20px;background:var(--line);margin:0 2px;}
/* お問い合わせはボタン表示にして目立たせる */
nav#siteNav a.nav-cta{
  padding:10px 18px;border-radius:var(--radius-sm);color:#15110A;font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  transition:box-shadow .25s var(--ease-out),transform .2s var(--ease-out);
}
nav#siteNav a.nav-cta:hover{color:#15110A;box-shadow:var(--shadow-glow);}
nav#siteNav a.nav-cta.active{color:#15110A;}
nav#siteNav a.nav-cta.active::after{display:none;}

.nav-toggle{
  display:none;background:none;border:0;padding:12px;margin:-12px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
  min-width:44px;min-height:44px;align-items:center;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .25s var(--ease-out),opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:1023px){
  .nav-toggle{display:flex;}
  nav#siteNav{
    position:fixed;top:var(--header-h);left:0;right:0;
    background:rgba(11,12,14,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;
    transition:max-height .3s var(--ease-out),opacity .25s var(--ease-out);
    opacity:0;
  }
  nav#siteNav.is-open{max-height:calc(100vh - var(--header-h));overflow-y:auto;opacity:1;}
  nav#siteNav ul{flex-direction:column;gap:0;padding:8px 0;}
  nav#siteNav li.nav-sep{display:none;}
  nav#siteNav a{display:block;padding:14px 24px;font-size:14px;min-height:44px;}
  nav#siteNav a.active::after{display:none;}
  nav#siteNav a.active{color:var(--accent);}
  nav#siteNav a.nav-cta{margin:8px 24px 12px;text-align:center;display:block;}
}

/* ============================================================
   Sub-page intro banner (simulator / color / company)
============================================================ */
.page-banner{
  padding:calc(var(--header-h) + 64px) 0 64px;
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.page-banner .back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;margin-bottom:22px;transition:color .2s,gap .2s;
}
.page-banner .back-link:hover{color:var(--ink);gap:11px;}
.page-banner h1{font-size:clamp(26px,4.2vw,40px);margin-top:14px;line-height:1.3;}
.page-banner p.lead{color:var(--ink-dim);margin-top:16px;max-width:56ch;font-size:15.5px;}

/* ============================================================
   Footer
============================================================ */
footer{border-top:1px solid var(--line);padding:32px 0 calc(32px + env(safe-area-inset-bottom,0px));background:var(--bg);}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
footer .f-links{display:flex;gap:20px;flex-wrap:wrap;}
footer .f-links{column-gap:24px;row-gap:0;}
footer .f-links a{
  font-family:var(--cond);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;transition:color .2s;
  display:inline-flex;align-items:center;min-height:44px; /* タップしやすい高さを確保 */
}
footer .f-links a:hover{color:var(--ink);}
footer .f-logo{font-family:var(--cond);font-size:13px;letter-spacing:.06em;color:var(--ink-dim);text-decoration:none;}
footer .f-logo span{color:var(--accent);}
footer .f-logo{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;}
footer .f-logo img{display:block;height:26px;width:auto;opacity:.9;}
footer .f-logo small{font-family:var(--display);font-size:12px;letter-spacing:.04em;color:var(--ink-dim);}
footer .copy{font-family:var(--mono);font-size:11px;color:var(--ink-faint);width:100%;padding-top:12px;border-top:1px solid var(--line);margin-top:8px;}

/* ============================================================
   Mobile CTA bar (fixed, bottom)
============================================================ */
.mobile-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(11,12,14,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:none;
  transform:translateY(100%);
  transition:transform .3s var(--ease-out);
}
.mobile-cta-bar.is-visible{transform:translateY(0);}
.mobile-cta-bar a.btn{width:100%;text-align:center;}
@media(max-width:720px){
  .mobile-cta-bar{display:block;}
}

/* ============================================================
   Back-to-top button
============================================================ */
.back-to-top{
  position:fixed;right:20px;bottom:20px;z-index:55;
  width:48px;height:48px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  box-shadow:var(--shadow-sm);
  transition:opacity .2s ease,transform .2s var(--ease-out),visibility .2s,bottom .2s ease,border-color .2s,box-shadow .2s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{border-color:var(--accent);box-shadow:var(--shadow-glow);}
.back-to-top svg{width:18px;height:18px;}
@media(max-width:720px){
  body.cta-bar-active .back-to-top{bottom:84px;}
}