/* 光トランシーバーLP — ページスタイル
   デザイントークンは css/tokens/ を参照。ブレークポイントは900px。 */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:72px; }
body{ margin:0; background:#fff; overflow-x:clip; }

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

/* ---- 共通パーツ ---- */
.eyebrow{ font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); display:inline-flex; align-items:flex-start; gap:10px; }
.eyebrow--center{ justify-content:center; }
.eyebrow--invert{ color:#a9bcd8; }
.eyebrow-dash{ width:24px; height:2px; background:currentColor; display:inline-block; flex-shrink:0; margin-top:7px; }

.hh{ font-weight:700; line-height:var(--lh-heading); letter-spacing:var(--ls-heading); color:var(--text-heading); }
.hh--invert{ color:#fff; }
.title-lg{ font-size:var(--fs-h2); margin-top:16px; }
.title-md{ font-size:var(--fs-h3); margin-top:16px; }
.body-copy{ color:var(--ft-black); font-size:16px; line-height:var(--lh-body); letter-spacing:var(--ls-body); margin:0; }

.section{ padding:var(--section-y) 40px; background:#fff; }
.section--surface{ background:var(--color-surface); }
.section--dark{ position:relative; background:var(--ft-blue); overflow:hidden; }
.container{ max-width:1200px; margin:0 auto; }
.section-head--center{ text-align:center; }
.sec-lead{ max-width:1000px; margin:20px auto 0; color:var(--text-secondary); font-size:16px; line-height:1.8; }
.pc-br{ display:inline; } /* PC専用の意味区切り改行。モバイルでは自然折返しに任せる */

.cover-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dark-overlay{ position:absolute; inset:0; background:rgba(9,20,42,.78); }

/* ---- ナビゲーション ---- */
.site-header{ position:sticky; top:0; z-index:30; background:var(--ft-blue); }
.nav-inner{ position:relative; max-width:1440px; margin:0 auto; padding:16px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo-link{ display:inline-flex; align-items:center; text-decoration:none; }
.nav-logo{ height:26px; display:block; }
.nav-links{ display:flex; gap:22px; align-items:center; }
.navlink{ color:#cdd7e6; font-size:14px; text-decoration:none; font-weight:500; letter-spacing:0.02em; padding-top:4px; padding-bottom:4px; border-top:2px solid transparent; border-bottom:2px solid transparent; transition:color 150ms ease-out, border-color 150ms ease-out; white-space:nowrap; }
.navlink:hover{ color:#fff; }
.navlink.active{ color:#fff; border-bottom-color:var(--ft-red); }
.nav-cta{ text-decoration:none; padding:10px 20px; background:var(--cta-bg); color:#fff; border-radius:var(--radius-btn); font-size:14px; font-weight:700; white-space:nowrap; }
.nav-cta:hover{ background:var(--cta-bg-hover); color:#fff; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:11px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; width:100%; background:#fff; border-radius:1px; transition:transform .2s ease, opacity .2s ease; }
.progress-track{ height:3px; background:rgba(255,255,255,.14); }
.progress-bar{ width:0%; height:100%; background:var(--ft-red); transition:width .12s linear; }

/* ---- ボタン ---- */
.btn{ display:inline-block; text-decoration:none; border-radius:var(--radius-btn); font-size:15px; }
.btn--primary{ padding:14px 30px; background:var(--cta-bg); color:#fff; font-weight:700; }
.btn--primary:hover{ background:var(--cta-bg-hover); color:#fff; }
.btn--ghost{ padding:14px 30px; border:1px solid #FFFFFF59; color:#fff; font-weight:500; }
.btn--ghost:hover{ color:#fff; border-color:rgba(255,255,255,.8); }

/* ---- 01 ヒーロー ---- */
.hero{ position:relative; background:var(--ft-blue); padding:140px 40px 120px; text-align:center; overflow:hidden; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,20,42,.72) 0%, rgba(9,20,42,.62) 55%, rgba(9,20,42,.82) 100%); }
.hero-content{ position:relative; max-width:920px; margin:0 auto; }
.hero-title{ color:#fff; font-size:48px; margin-top:24px; line-height:1.4; }
.hero-lead{ max-width:920px; margin:24px auto 0; color:#fff; font-size:18px; line-height:1.9; }
/* 英語版はタイトルが長いため、1行を意味の区切りで収める */
html[lang="en"] .hero-content{ max-width:1000px; }
html[lang="en"] .hero-title{ font-size:clamp(28px, 3.7vw, 40px); }
.pill-row{ display:flex; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.stat-pill{ padding:10px 22px; border:1px solid rgba(255,255,255,.28); border-radius:999px; font-family:var(--font-mono); font-size:15px; color:#dbe3ef; }
.stat-pill.hot{ border-color:var(--ft-red); color:#fff; background:rgba(183,19,19,.22); }
.btn-row{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }

/* ---- 2カラム(split)レイアウト ---- */
.split{ display:flex; gap:64px; align-items:center; flex-wrap:wrap; }
.split--top{ align-items:flex-start; margin-top:48px; }
.split--reverse{ flex-direction:row-reverse; }
.split-text{ flex:1.1; min-width:320px; }
.split-text--wide{ flex:1.15; min-width:320px; }
.split-media{ flex:1; min-width:320px; }
.split-media--wide{ flex:1.15; min-width:320px; }
.media-img{ width:100%; border-radius:var(--radius-card); box-shadow:var(--shadow-md); background:#fff; display:block; }

/* ---- 02 市場グラフ 拡大表示 ---- */
.img-zoom{ display:block; width:100%; padding:0; border:none; background:none; cursor:zoom-in; }
.zoom-hint{ margin:10px 0 0; font-size:12px; color:var(--text-secondary); text-align:center; }
.lightbox{ position:fixed; inset:0; z-index:100; background:rgba(9,20,42,.92); display:flex; align-items:center; justify-content:center; padding:24px; }
.lightbox[hidden]{ display:none; }
.lightbox-img{ max-width:80vw; max-height:80vh; border-radius:var(--radius-card); cursor:zoom-out; }
.lightbox-close{ position:absolute; top:16px; right:16px; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.lightbox-close:hover{ background:rgba(255,255,255,.3); }
body.no-scroll{ overflow:hidden; }

/* ---- 03 製品群マッピング ---- */
.mapping-stage{ position:relative; max-width:960px; margin:64px auto 0; min-height:560px; }
.map-card{ width:220px; background:#fff; border:1px solid var(--border-default); border-radius:var(--radius-card); padding:20px; text-align:center; box-shadow:var(--shadow-sm); }
.map-card--left{ position:absolute; left:0; top:0; }
.map-card--right{ position:absolute; right:0; top:0; }
.map-card--center{ position:absolute; left:480px; top:310px; transform:translateX(-50%); }
.map-diagram{ position:absolute; left:480px; top:150px; transform:translate(-50%,-50%); width:480px; height:300px; }
.card-num{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em; color:var(--color-accent); font-weight:700; }
.map-card .card-num{ font-size:16px; }
.map-img{ width:100%; height:130px; object-fit:contain; margin-top:12px; }
.map-label{ font-weight:700; color:var(--text-heading); font-size:15px; margin-top:12px; }

/* ---- 07 競争優位性 ---- */
.adv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
.adv-card{ background:#fff; border:1px solid var(--border-default); border-radius:var(--radius-card); padding:32px; }
.adv-title{ font-weight:700; color:var(--text-heading); font-size:20px; margin-top:12px; line-height:1.5; }
.adv-text{ color:var(--text-secondary); font-size:15px; line-height:1.9; margin:16px 0 0; padding-left:1em; text-indent:-1em; }
.adv-text + .adv-text{ margin-top:0; }

/* ---- 08 生産体制カルーセル ---- */
.carousel{ position:relative; width:100%; height:340px; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-md); }
.carousel-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.carousel-slide.is-active{ opacity:1; }
.carousel-dots{ display:flex; gap:10px; justify-content:center; margin-top:20px; }
.dot{ width:9px; height:9px; padding:0; border-radius:50%; border:none; background:var(--neutral-300); cursor:pointer; }
.dot.is-active{ background:var(--ft-blue); }
.factory-block{ margin-top:80px; }
.factory-heading{ text-align:center; font-size:22px; }
.factory-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
.factory-img{ display:block; width:100%; height:220px; object-fit:cover; border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.factory-label{ margin-top:14px; text-align:center; font-weight:700; color:var(--text-heading); font-size:15px; }

/* ---- 09 展望 ---- */
.future-content{ position:relative; max-width:960px; margin:0 auto; text-align:center; }
.future-body{ max-width:900px; margin:28px auto 0; color:#c9d4e6; font-size:16px; line-height:1.9; text-align:left; }
.future-body p{ margin:0; padding-left:1em; text-indent:-1em; }
.future-body p + p{ margin-top:16px; }
.future-body .future-sub{ padding-left:2.5em; text-indent:-1em; }
.future-close{ margin-top:24px !important; padding-left:0 !important; text-indent:0 !important; font-weight:700; color:#fff; }

/* ---- 10 コンタクト ---- */
.contact-section{ background:var(--ft-blue); padding:88px 40px 0; }
.contact-lead{ color:#c9d4e6; font-size:15px; margin:16px 0 0; }
.link-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.link-btn{ text-decoration:none; padding:14px 24px; border:1px solid rgba(255,255,255,.32); border-radius:var(--radius-btn); color:#dbe3ef; font-size:14px; font-weight:500; white-space:nowrap; }
.link-btn:hover{ color:#fff; border-color:rgba(255,255,255,.7); }
.link-btn--primary{ padding:14px 26px; background:var(--cta-bg); border:none; color:#fff; font-weight:700; }
.link-btn--primary:hover{ background:var(--cta-bg-hover); }
.footer-bar{ margin-top:64px; border-top:1px solid rgba(255,255,255,.14); padding:24px 0 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-logo{ height:20px; opacity:.85; }
.disclaimer{ font-family:var(--font-mono); font-size:11px; color:#7c8ba9; line-height:1.8; text-align:right; max-width:980px; }

/* ============ モバイル (〜900px) ============ */
@media (max-width: 900px){
  html{ scroll-padding-top:64px; }

  /* ナビ → ハンバーガーメニュー */
  .nav-inner{ padding:12px 20px; }
  .nav-toggle{ display:flex; }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--ft-blue); padding:4px 20px 20px; border-top:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow-lg); max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain; }
  .site-header.menu-open .nav-links{ display:flex; }
  .navlink{ padding:14px 4px; font-size:15px; border-bottom:1px solid rgba(255,255,255,.08); }
  .navlink.active{ border-bottom-color:rgba(255,255,255,.08); }
  .nav-cta{ margin-top:16px; text-align:center; padding:13px 20px; }
  .site-header.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-header.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* セクション余白・見出し */
  .section{ padding:var(--section-y-mobile) 24px; }
  .contact-section{ padding:56px 24px 0; }
  .title-lg{ font-size:26px; }
  .title-md{ font-size:22px; }
  .sec-lead{ font-size:15px; }
  .pc-br{ display:none; }

  /* ヒーロー */
  .hero{ padding:96px 24px 72px; }
  .hero-title{ font-size:28px; line-height:1.45; }
  .hero-lead{ font-size:15px; }
  .btn--primary, .btn--ghost{ padding:13px 24px; font-size:14px; }

  /* 2カラム → 縦積み */
  .split{ gap:32px; }
  .split--top{ margin-top:32px; }
  .split-text, .split-text--wide, .split-media, .split-media--wide{ flex:1 1 100%; min-width:0; }

  /* 04-06 製品セクション: SPでは 見出し → 画像 → 本文 の順 */
  #tec .split, #thermistor .split, #dpc .split{ flex-direction:column; align-items:stretch; gap:0; }
  #tec .split-text, #thermistor .split-text, #dpc .split-text{ display:contents; }
  #tec .split-text .eyebrow, #thermistor .split-text .eyebrow, #dpc .split-text .eyebrow{ order:-3; }
  #tec .split-text .hh, #thermistor .split-text .hh, #dpc .split-text .hh{ order:-2; }
  #tec .split-media, #thermistor .split-media, #dpc .split-media{ order:-1; margin-top:24px; }

  /* 製品群マッピング: 絶対配置 → 縦積み */
  .mapping-stage{ min-height:0; margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:20px; }
  .map-card--left, .map-card--right, .map-card--center{ position:static; transform:none; width:100%; max-width:320px; }
  .map-diagram{ position:static; transform:none; width:100%; max-width:480px; height:auto; order:-1; }

  /* 競争優位性: 1カラム */
  .adv-grid{ grid-template-columns:1fr; margin-top:32px; }

  /* カルーセル */
  .carousel{ height:240px; }
  .factory-grid{ grid-template-columns:1fr; }

  /* フッター */
  .footer-bar{ flex-direction:column; align-items:flex-start; }
  .disclaimer{ text-align:left; }
}