@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

/*
  キッチンカー車両研究所 / FOOD TRUCK VEHICLE LAB
  デザインシステム（トークン／リセット／共通コンポーネント）
  Version: 3.0.0 — 専門メディア × 車両研究所 × ライフスタイル
  ------------------------------------------------------------
  ※ --red / --blue / --green / --ink / --soft の変数名は
     CMS編集エンジンのカラーピッカーが参照するため変更しないこと。
  ※ 色・余白・書体・角丸・影は、すべてここの変数を経由すること。
     個別ページで直接カラーコードを書かない。
*/

/* ============================================================
   1. トークン
============================================================ */
:root{
  /* --- 色 --- */
  --paper:#F6F7F5;        /* ページ背景（オフホワイト） */
  --card:#FFFFFF;         /* カード・写真の下地 */
  --ink:#172C39;          /* メイン文字 */
  --muted:#607079;        /* サブ文字 */
  --line:#D9DFDE;         /* 薄いボーダー */
  --line-strong:#B7C4C7;
  --soft:#EBEFEC;         /* 少し沈んだ背景 */
  --soft2:#DFE6E3;
  --sage:#DFE8E3;         /* 補助（少量だけ） */
  --charcoal:#122B3A;     /* 部分的な濃色（修理カルテ・最終CTA） */

  --red:#B94A2B;          /* アクセント：CTA・数字・小ラベル・hover */
  --red-dark:#9D3A20;
  --red-soft:#F9ECE5;
  --blue:#31596B;         /* データ系の補助（控えめ） */
  --green:#4A7A5E;        /* 良好 */
  --amber:#A8763A;        /* 要確認 */

  /* --- 余白（8pxグリッド） --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:96px; --sp-10:128px;
  --sec-y:96px;           /* セクション上下（PC） */
  --sec-y-sp:64px;        /* セクション上下（SP） */

  /* --- レイアウト --- */
  --max:1240px;
  --max-narrow:900px;
  --read:780px;           /* 記事本文の最大幅 */
  --r-sm:4px;
  --r:3px;                /* カード（大きく丸めない） */
  --r-lg:3px;            /* 写真 */
  --shadow:0 1px 2px rgba(29,37,43,.04);
  --shadow-hover:0 6px 18px rgba(29,37,43,.06);
  --header-h:80px;

  /* --- 書体 --- */
  --ja:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --mono:'Roboto Mono','SFMono-Regular','Consolas',monospace;
  --en:var(--mono);       /* 旧ルール互換：英字ラベルはモノスペース */
}

/* ============================================================
   2. リセット
============================================================ */
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--ja);
  font-size:16.5px;
  line-height:1.9;
  letter-spacing:.015em;
  color:var(--ink);
  background:var(--paper);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
table{border-collapse:collapse}
h1,h2,h3,h4{line-height:1.5;letter-spacing:.01em;margin:0}
p{margin:0}

/* ============================================================
   3. レイアウト
============================================================ */
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.container--narrow{width:min(calc(100% - 40px),var(--max-narrow));margin-inline:auto}
.container--read{width:min(calc(100% - 40px),var(--read));margin-inline:auto}
.section,.lp-sec{padding:var(--sec-y) 0;position:relative}
.lp-sec--soft,.section--soft{background:var(--soft)}
.lp-sec--white{background:var(--card)}
.lp-sec--sage{background:var(--sage)}
.lp-sec--dark{background:var(--charcoal);color:#EDE9E3}

/* ============================================================
   4. タイポグラフィ（共通見出し）
============================================================ */
/* 英字の小ラベル。ここだけモノスペースを使う */
.sec-en,.label-en{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 var(--sp-3);
  display:flex;align-items:center;gap:10px;
}
.sec-en::before{
  content:"";width:20px;height:1px;background:currentColor;
  display:inline-block;flex-shrink:0;
}
.label-en{display:inline-block;margin:0}
.label-en::before{content:none}

.section-title{
  font-size:clamp(22px,2.8vw,32px);
  font-weight:700;
  line-height:1.55;
  margin:0 0 var(--sp-4);
  letter-spacing:.005em;
}
.section-lead{
  font-size:15.5px;
  line-height:2;
  color:var(--muted);
  margin:0;
  max-width:760px;
}
.sec-head{margin:0 0 var(--sp-7);max-width:820px}
.lp-sec--dark .section-title{color:#fff}
.lp-sec--dark .section-lead{color:rgba(237,233,227,.72)}
.lp-sec--dark .sec-en{color:#F08A6E}

/* ============================================================
   5. ボタン
============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 26px;border-radius:var(--r-sm);
  font-size:15.5px;font-weight:700;letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dark)}
.btn--outline{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
.btn--outline:hover{border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);background:var(--card)}
.btn--sm{min-height:44px;padding:0 18px;font-size:14px}
/* 濃色背景の上 */
.lp-sec--dark .btn--ghost,.contact-strip .btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.34);
}
.lp-sec--dark .btn--ghost:hover,.contact-strip .btn--ghost:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);
}
/* テキストリンク（→つき） */
.link-more{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:700;color:var(--red);
}
.link-more::after{content:"→";transition:transform .2s ease}
.link-more:hover::after{transform:translateX(3px)}

/* ============================================================
   6. カード・写真
============================================================ */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.card--link{transition:border-color .2s ease;display:block}
.card--link:hover{border-color:var(--line-strong)}

/* --- 写真枠。画像が無い間はプレースホルダーを表示する ---
   使い方：
     <figure class="ph" data-file="hero-vehicle.webp" style="--ar:4/3">
       <img src="assets/images/vehicle-lab/hero-vehicle.webp" alt="…" loading="lazy">
     </figure>
   画像ファイルを置くだけで自動的に表示に切り替わります。 */
.ph{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:var(--ar,3/2);
  background:var(--sage);
  border-radius:var(--r-lg);
  isolation:isolate;
}
.ph::after{
  content:"PHOTO\A" attr(data-file);
  white-space:pre;text-align:center;
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;line-height:2.2;letter-spacing:.12em;
  color:#8C9A92;
}
.ph img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease,transform .5s ease;
}
.ph img.is-loaded{opacity:1}
.ph--square{--ar:1/1}
.ph--wide{--ar:16/10}
.ph--tall{--ar:4/5}
.ph--flat{border-radius:0}
a:hover > .ph img.is-loaded,
.card--link:hover .ph img.is-loaded{transform:scale(1.02)}

/* ============================================================
   7. ラベル・数値・注記
============================================================ */
.num{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:0}
.unit{font-size:.72em;color:var(--muted);margin-left:2px}
.tag{
  display:inline-block;padding:4px 10px;
  border:1px solid var(--line-strong);border-radius:999px;
  font-size:12px;letter-spacing:.04em;color:var(--muted);background:var(--card);
}
.tag--red{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.tag--muted{border-color:var(--line);color:var(--muted)}
.tag--blue{border-color:var(--blue);color:var(--blue)}
.tag--green{border-color:var(--green);color:var(--green)}

/* 未確定データの明示 */
.pending{color:var(--muted);font-size:13px;letter-spacing:.04em}
.pending::before{content:"—　";color:var(--line-strong)}

.notice{
  border:1px solid var(--line);border-left:3px solid var(--amber);
  background:var(--card);border-radius:var(--r-sm);
  padding:18px 20px;font-size:14px;line-height:1.95;color:var(--ink);
  margin:0 0 var(--sp-5);
}
.notice b{font-weight:700}
.notice a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   8. ヘッダー
============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,245,241,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:var(--sp-5);
}
.site-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-logo__mark{display:flex;flex-direction:column;line-height:1.25}
.site-logo__mark b{font-size:16.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.site-logo__mark i{
  font-family:var(--mono);font-style:normal;font-size:9.5px;
  letter-spacing:.16em;color:var(--muted);font-weight:400;white-space:nowrap;
}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none;display:flex;align-items:center;gap:var(--sp-5);margin:0;padding:0}
.main-nav a{
  font-size:14px;font-weight:700;white-space:nowrap;
  display:flex;flex-direction:column;line-height:1.35;
  transition:color .18s ease;
}
.main-nav a small{
  display:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  color:var(--muted);font-weight:400;
}
.main-nav a:hover{color:var(--red)}
.site-header.is-compact{background:rgba(247,245,241,.96)}
.site-header.is-compact .header-inner{height:56px}
.site-header.is-compact .site-logo__mark i{display:none}
/* ハンバーガーメニューの中だけに出すCTA（PCではヘッダー右のボタンを使う） */
.main-nav .nav-cta{display:none}
.header-contact{flex-shrink:0}
.header-contact .btn{min-height:44px;padding:0 18px;font-size:14px}
.menu-toggle{
  display:none;margin-left:auto;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  position:relative;cursor:pointer;
}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{
  content:"";position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);
  transition:transform .25s ease,opacity .2s ease;
}
.menu-toggle::before{top:15px}
.menu-toggle span{top:21px}
.menu-toggle::after{top:27px}
.menu-toggle[aria-expanded="true"]::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span{opacity:0}
.menu-toggle[aria-expanded="true"]::after{transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   9. フッター
============================================================ */
.site-footer{
  background:var(--charcoal);color:rgba(237,233,227,.78);
  padding:var(--sp-8) 0 var(--sp-5);
  font-size:14px;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer-logo{
  font-family:var(--mono);font-size:14px;letter-spacing:.16em;color:#fff;
}
.footer-tag{color:rgba(237,233,227,.62);font-size:13px;margin:8px 0 16px}
.site-footer p{margin:0 0 8px;line-height:1.95;font-size:13.5px}
.footer-title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#F08A6E;
  margin:0 0 14px;font-weight:500;
}
.footer-nav{list-style:none;margin:0;padding:0}
.footer-nav li{margin-bottom:10px}
.footer-nav a{color:rgba(237,233,227,.82);font-size:13.5px}
.footer-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.copyright{
  margin-top:var(--sp-7);padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:11px;color:rgba(237,233,227,.45);letter-spacing:.04em;
}

/* ============================================================
   10. 固定CTA（スマホのみ）
============================================================ */
.lp-float{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.lp-float a{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:58px;font-size:14px;font-weight:700;
}
.lp-float .f-contact{background:var(--red);color:#fff}
.lp-float .f-stock{background:var(--card);color:var(--ink)}

/* ============================================================
   11. レスポンシブ
============================================================ */
@media(max-width:1240px){
  .main-nav ul{gap:var(--sp-4)}
  .main-nav a{font-size:13.5px}
}
@media(max-width:1140px){
  /* ヘッダーが1行に収まらなくなる幅。重複するナビを1つ減らす */
  .main-nav ul{gap:14px}
  .main-nav a{font-size:12.5px}
  .main-nav li:nth-child(5){display:none}   /* 研究記事＝研究MAPと同じ行き先 */
  .site-logo__mark b{font-size:15px}
  .header-contact .btn{padding:0 14px;font-size:13px}
  .header-inner{gap:var(--sp-4)}
}
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
}
@media(max-width:900px){
  :root{--header-h:64px;--sec-y:64px}
  .container,.container--narrow,.container--read{width:calc(100% - 32px)}
  .menu-toggle{display:block}
  .header-contact{display:none}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto;margin:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .main-nav.is-open{max-height:calc(100vh - var(--header-h));overflow:auto}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px}
  .main-nav li{border-bottom:1px solid var(--line)}
  .main-nav li:last-child{border-bottom:0}
  .main-nav a{padding:17px 4px;font-size:16px;flex-direction:row;align-items:baseline;gap:10px;min-height:44px}
  .main-nav a small{display:inline;font-size:9.5px}
  .main-nav li:nth-child(5){display:list-item}
  .main-nav .nav-cta{display:block;border-bottom:0;margin-top:18px}
  .main-nav .nav-cta a{padding:0;justify-content:center}
  .main-nav .nav-cta .btn{width:100%}
  .lp-float{display:flex}
  body{padding-bottom:58px}
}
@media(max-width:520px){
  body{font-size:16px}
  .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   12. アニメーション（控えめに）
============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.rv{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.rv.is-in{opacity:1;transform:none}

/* Light, precise typography across the public site. CMS controls retain their own styles. */
body.page{font-weight:400}
body.page .hero h1{
  font-weight:300;
  letter-spacing:.035em;
}
body.page :is(.section-title,.pg-hero h1,.trust__body h2,.contact-strip h2){
  font-weight:300;
  letter-spacing:.035em;
}
body.page :is(.pg-sec h2,.pg-sec h3,.pg-sec h4,.vl-risk-content h3){
  font-weight:400;
  letter-spacing:.025em;
}
body.page :is(.site-header,main,.site-footer) :is(b,strong){font-weight:500}
body.page :is(.main-nav a,.btn,.link-more,.idx-item__ttl,.qa-card__q,.art-card__cat,.lp-float a){font-weight:500}
body.page .site-logo__mark b{font-weight:500;letter-spacing:.035em}
body.page .hero :is(.eyebrow,#heroEn){font-weight:400}
body.page :is(.vl-risk-label,.vl-risk-points dt,.tbl th,.ck-tbl th,.pg-tbl th){font-weight:500}
@media(max-width:700px){
  body.page .hero h1{letter-spacing:.025em}
  body.page :is(.section-title,.pg-hero h1){letter-spacing:.025em}
}