@charset "UTF-8";
/* =========================================================
   中部コーポレーション 設立80周年記念特設サイト
   FIRE & ICE — 熱と冷
   完全独立 / 他CSSの影響を受けない自己完結スタイル
   ========================================================= */

/* ---- 自己ホスト日本語フォント（既存 /fonts/ を参照） ---- */
@font-face{font-family:"Noto Sans JP 80th";src:url("/fonts/noto-sans-jp-v53-japanese_latin-regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Noto Sans JP 80th";src:url("/fonts/noto-sans-jp-v53-japanese_latin-500.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Noto Sans JP 80th";src:url("/fonts/noto-sans-jp-v53-japanese_latin-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Noto Serif JP 80th";src:url("/fonts/noto-serif-jp-v30-japanese_latin-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Noto Serif JP 80th";src:url("/fonts/noto-serif-jp-v30-japanese_latin-900.woff2") format("woff2");font-weight:900;font-display:swap;}

/* =========================================================
   トークン
   ========================================================= */
.is-80th-root,:root{
  --ice:#0671BF; --ice-bright:#16A0E0; --ice-deep:#044a86; --ice-pale:#e9f4fb;
  --fire:#E8552B; --fire-bright:#F2A03D; --fire-deep:#b73a18; --fire-pale:#fcefe7;
  --navy:#1B2A38; --ink:#3D4850; --mute:#7c8a96;
  --bg:#ffffff; --bg-soft:#F4F6F8; --line:#e3e8ec;

  --grad-ice:linear-gradient(135deg,var(--ice-bright),var(--ice-deep));
  --grad-fire:linear-gradient(135deg,var(--fire-bright),var(--fire-deep));
  --grad-duo:linear-gradient(100deg,var(--ice) 0%,var(--ice-bright) 42%,var(--fire-bright) 58%,var(--fire) 100%);

  --serif:"Shippori Mincho","Noto Serif JP 80th",serif;
  --latin:"Cormorant Garamond",serif;
  --sans:"Noto Sans JP 80th","Noto Sans JP",system-ui,sans-serif;

  --hd-h:74px;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,6vw,120px);
  --maxw:1240px;
}

/* =========================================================
   リセット（このページ限定）
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:clamp(14px,1.6vw,16px);
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
sup{font-size:.5em;vertical-align:super;}
em{font-style:normal;}
::selection{background:var(--fire);color:#fff;}

/* 強調テキスト */
.ice-text{color:var(--ice);}
.fire-text{color:var(--fire);}
.ink-grad{background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;}

/* =========================================================
   汎用：セクションタグ見出し
   ========================================================= */
.sec-tag{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--latin);font-size:clamp(18px,2.4vw,26px);
  font-weight:600;font-style:italic;letter-spacing:.04em;color:var(--ice);
}
.sec-tag i{width:38px;height:2px;background:var(--grad-duo);display:inline-block;}
.sec-tag span{
  font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:13px;letter-spacing:.22em;color:var(--mute);
}
.sec-tag--light,.sec-tag--ondark{color:#fff;}
.sec-tag--light span,.sec-tag--ondark span{color:rgba(255,255,255,.7);}
.sec-tag--ondark i{background:linear-gradient(100deg,var(--ice-bright),var(--fire-bright));}

/* =========================================================
   画像プレースホルダー（あとで <img> に差し替え）
   ========================================================= */
.ph{
  position:relative;overflow:hidden;background:var(--bg-soft);
  border-radius:4px;aspect-ratio:var(--ar,4/3);
  display:flex;align-items:center;justify-content:center;
  background-image:
    repeating-linear-gradient(45deg,rgba(6,113,191,.06) 0 12px,transparent 12px 24px),
    linear-gradient(135deg,var(--ice-pale),var(--fire-pale));
  isolation:isolate;
}
.ph::after{
  content:"IMG: " attr(data-img);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--navy);opacity:.5;background:rgba(255,255,255,.7);
  padding:.5em 1em;border-radius:99px;white-space:nowrap;
}
.ph--cover{width:100%;height:100%;aspect-ratio:auto;border-radius:0;}
.ph--cover::after{font-size:12px;opacity:.35;}
.ph--cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* 実画像に差し替え済みの figure（class から ph を外したもの） */
figure.message__photo:not(.ph),
figure.tl__photo:not(.ph),
figure.pillar__photo:not(.ph){
  position:relative;overflow:hidden;aspect-ratio:var(--ar,4/3);
  background:var(--bg-soft);border-radius:4px;
}
figure.pillar__photo:not(.ph){border-radius:0;}
figure.message__photo:not(.ph) img,
figure.tl__photo:not(.ph) img,
figure.pillar__photo:not(.ph) img,
.hero__half figure:not(.ph) img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* =========================================================
   ローダー
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease),visibility .8s;
}
.loader.is-done{opacity:0;visibility:hidden;}
.loader__inner{text-align:center;color:#fff;}
.loader__num{
  font-family:var(--latin);font-weight:600;font-size:clamp(80px,18vw,200px);
  line-height:1;background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;
}
.loader__sub{display:block;font-size:11px;letter-spacing:.4em;opacity:.6;margin-top:.4em;}
.loader__bar{display:block;width:160px;height:2px;background:rgba(255,255,255,.15);margin:1.6em auto 0;overflow:hidden;}
.loader__bar i{display:block;height:100%;width:0;background:var(--grad-duo);animation:load 1.3s var(--ease) forwards;}
@keyframes load{to{width:100%;}}

/* =========================================================
   ヘッダー
   ========================================================= */
.hd{
  position:fixed;top:0;left:0;width:100%;height:var(--hd-h);z-index:1000;
  display:flex;align-items:center;gap:24px;
  padding:0 clamp(16px,4vw,48px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease);
}
.hd.is-stuck{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line),0 8px 30px rgba(27,42,56,.06);height:64px;}
.hd__brand{display:flex;align-items:center;gap:12px;margin-right:auto;}
.hd__logo{height:26px;width:auto;filter:brightness(0) invert(1);transition:filter .4s;}
.hd.is-stuck .hd__logo{filter:none;}
.hd__brand-mark{
  font-family:var(--latin);font-weight:600;font-size:24px;line-height:1;color:#fff;
  padding-left:12px;border-left:1px solid rgba(255,255,255,.4);transition:color .4s,border-color .4s;
}
.hd.is-stuck .hd__brand-mark{color:var(--navy);border-color:var(--line);}

.hd__nav ul{display:flex;gap:4px;}
.hd__nav a{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:8px 16px;color:#fff;transition:color .4s;
}
.hd.is-stuck .hd__nav a{color:var(--ink);}
.hd__nav-en{font-family:var(--latin);font-style:italic;font-size:17px;font-weight:600;line-height:1;}
.hd__nav-jp{font-size:10px;letter-spacing:.1em;opacity:.7;margin-top:2px;}
.hd__nav a::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:2px;background:var(--grad-duo);transition:width .35s var(--ease),left .35s var(--ease);}
.hd__nav a:hover::after{width:60%;left:20%;}

.hd__back{
  display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:10px 18px;border-radius:99px;color:#fff;border:1px solid rgba(255,255,255,.5);
  transition:.35s var(--ease);
}
.hd.is-stuck .hd__back{color:var(--navy);border-color:var(--line);}
.hd__back:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.hd__back svg{transition:transform .3s;}
.hd__back:hover svg{transform:translateX(3px);}

.hd__burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;}
.hd__burger span{position:absolute;left:10px;width:24px;height:2px;background:#fff;transition:.35s var(--ease);}
.hd.is-stuck .hd__burger span{background:var(--navy);}
.hd__burger span:nth-child(1){top:15px;}
.hd__burger span:nth-child(2){top:22px;}
.hd__burger span:nth-child(3){top:29px;}
body.nav-open .hd__burger span{background:#fff;}
body.nav-open .hd__burger span:nth-child(1){top:22px;transform:rotate(45deg);}
body.nav-open .hd__burger span:nth-child(2){opacity:0;}
body.nav-open .hd__burger span:nth-child(3){top:22px;transform:rotate(-45deg);}

/* モバイルナビ */
.mnav{
  position:fixed;inset:0;z-index:999;background:var(--navy);
  display:flex;flex-direction:column;justify-content:center;padding:0 12vw;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.mnav::before{content:"";position:absolute;inset:0;background:var(--grad-duo);opacity:.08;}
body.nav-open .mnav{opacity:1;visibility:visible;}
.mnav__list li{overflow:hidden;}
.mnav__list a{
  display:block;font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(26px,7vw,42px);line-height:1.4;padding:.25em 0;
  transform:translateY(110%);transition:transform .6s var(--ease);
}
body.nav-open .mnav__list a{transform:translateY(0);}
.mnav__list li:nth-child(1) a{transition-delay:.10s;}
.mnav__list li:nth-child(2) a{transition-delay:.16s;}
.mnav__list li:nth-child(3) a{transition-delay:.22s;}
.mnav__list li:nth-child(4) a{transition-delay:.28s;}
.mnav__list li:nth-child(5) a{transition-delay:.34s;}
.mnav__list a::before{content:attr(data-en);display:block;font-family:var(--latin);font-style:italic;font-size:.42em;color:var(--ice-bright);letter-spacing:.05em;}
.mnav__back{display:inline-block;margin-top:3em;color:rgba(255,255,255,.7);font-size:14px;letter-spacing:.05em;}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__half {
  position: absolute;
  top: 0;
  height: 100%;
  width: 62%;
  overflow: hidden;!important;
}
.hero__half--ice {
  left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18vw) 100%, 0 100%);
}
.hero__half--fire {
  right: 0;
  clip-path: polygon(18vw 0, 100% 0, 100% 100%, 0 100%);
}
.hero__half .ph--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.hero__half .ph--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の縦横比を崩さず枠いっぱいに収める */
  display: block;
}
.hero__half .ph {
  background-image: none;
}
.hero__half--ice .ph {
  background: linear-gradient(160deg, #0a3a66, #0671BF 55%, #16A0E0);
}
.hero__half--fire .ph {
  background: linear-gradient(160deg, #7a2410, #E8552B 55%, #F2A03D);
}
.hero__half .ph::after {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.18);
}
.hero__half figure.ph--cover {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.hero__half figure.ph--cover img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.hero__seam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%) skewX(-10deg);
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.2));
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
  opacity: 0.7;
  mix-blend-mode: overlay;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(10, 20, 30, 0.45) 100%),
    linear-gradient(180deg, rgba(10, 20, 30, 0.35), transparent 25%, transparent 70%, rgba(10, 20, 30, 0.55));
}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.hero__since{font-family:var(--latin);font-style:italic;font-weight:600;font-size:clamp(15px,2vw,22px);letter-spacing:.12em;margin-bottom:.7em;text-shadow:0 2px 20px rgba(0,0,0,.35);}
.hero__since sup{font-size:.55em;}
.hero__copy{font-family:var(--serif);font-weight:800;line-height:1.18;letter-spacing:.02em;text-shadow:0 4px 30px rgba(0,0,0,.9);}
.hero__line{display:block;font-size:clamp(38px,8vw,104px);}
.hero__line--ice{color:#ffe6d6;}
.hero__line--fire{color:#dff1ff;}
.hero__sub-copy{font-size:clamp(20px,3.6vw,46px);margin-top:.25em;color:#fff;}
.hero__lead{margin-top:1.8em;font-size:clamp(14px,1.8vw,18px);font-weight:500;line-height:2;text-shadow:0 2px 16px rgba(0,0,0,.4);max-width:34em;}
.hero__lead b{font-weight:700;border-bottom:2px solid var(--fire-bright);padding-bottom:1px;}

.hero__giant{position:absolute;right:max(2vw,10px);bottom:-4vw;z-index:1;pointer-events:none;line-height:1;}
.hero__giant span{font-family:var(--latin);font-weight:600;font-size:42vw;color:rgba(255,255,255,.35);display:block;}

.hero__scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.3em;color:#fff;}
.hero__scroll i{width:1px;height:46px;background:rgba(255,255,255,.5);position:relative;overflow:hidden;}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:#fff;animation:scr 1.8s var(--ease) infinite;}
@keyframes scr{0%{transform:translateY(-110%);}60%,100%{transform:translateY(280%);}}

/* =========================================================
   メッセージ
   ========================================================= */
.message{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,14vw,180px) var(--pad);}
.message__grid{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"lead photo" "body photo" "stats stats";gap:clamp(30px,5vw,70px) clamp(30px,6vw,80px);margin-top:48px;}
.message__lead{grid-area:lead;}
.message__head{font-family:var(--serif);font-weight:800;font-size:clamp(26px,4.4vw,52px);line-height:1.45;color:var(--navy);}
.message__head em{background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent;}
.message__photo{grid-area:photo;align-self:stretch;--ar:3/4;min-height:100%;}
.message__photo figcaption{position:absolute;left:0;bottom:0;width:100%;padding:1em;font-size:11px;color:#fff;background:linear-gradient(transparent,rgba(27,42,56,.8));z-index:2;}
.message__body{grid-area:body;}
.message__body p{margin-bottom:1.5em;}
.message__body .hl{font-weight:700;color:var(--navy);border-bottom:2px solid var(--ice-bright);}
.message__motto{font-family:var(--serif);font-weight:800;font-size:clamp(28px,5vw,52px);line-height:1.3;color:var(--navy);margin:.4em 0 .6em!important;}

.message__stats{grid-area:stats;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);padding-top:40px;}
.message__stats li{text-align:center;}
.message__stats .num{font-family:var(--latin);font-weight:600;font-size:clamp(44px,7vw,86px);line-height:1;color:var(--navy);display:flex;align-items:baseline;justify-content:center;gap:.05em;}
.message__stats .num small{font-family:var(--sans);font-size:.22em;font-weight:700;color:var(--mute);}
.message__stats li:nth-child(1) .num{color:var(--ice);}
.message__stats li:nth-child(2) .num{color:var(--fire);}
.message__stats li:nth-child(3) .num{background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent;}
.message__stats .lbl{display:block;margin-top:1em;font-size:12px;letter-spacing:.08em;color:var(--mute);}

/* =========================================================
   強み（ダーク背景・2本柱）
   ========================================================= */
.strength{position:relative;background:var(--navy);color:#fff;padding:clamp(90px,14vw,170px) 0;overflow:hidden;}
.strength::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 80% at 15% 0%,rgba(6,113,191,.4),transparent 60%),
  radial-gradient(60% 80% at 85% 100%,rgba(232,85,43,.35),transparent 60%);}
.strength__head{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.strength__title{font-family:var(--serif);font-weight:800;font-size:clamp(30px,5.5vw,68px);line-height:1.35;margin:.5em 0;}
.strength__desc{max-width:40em;font-size:clamp(14px,1.7vw,17px);color:rgba(255,255,255,.8);line-height:2;}

.pillars{position:relative;max-width:var(--maxw);margin:clamp(40px,6vw,80px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);}
.pillar{position:relative;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);}
.pillar__photo{--ar:16/10;border-radius:0;}
.pillar__body{padding:clamp(24px,3.5vw,48px);position:relative;}
.pillar__season{font-family:var(--latin);font-style:italic;font-size:18px;letter-spacing:.05em;}
.pillar__name{font-family:var(--serif);font-weight:800;font-size:clamp(24px,3.4vw,40px);margin:.2em 0 .5em;}
.pillar__text{font-size:14px;color:rgba(255,255,255,.78);line-height:1.95;}
.pillar__icon{position:absolute;right:clamp(20px,3vw,40px);top:clamp(20px,3vw,40px);font-size:48px;line-height:1;opacity:.5;}
.pillar--ice{box-shadow:inset 0 3px 0 var(--ice-bright);}
.pillar--ice .pillar__season,.pillar--ice .pillar__icon{color:var(--ice-bright);}
.pillar--ice .pillar__photo{background:linear-gradient(160deg,#0a3a66,#0671BF);}
.pillar--fire{box-shadow:inset 0 3px 0 var(--fire-bright);}
.pillar--fire .pillar__season,.pillar--fire .pillar__icon{color:var(--fire-bright);}
.pillar--fire .pillar__photo{background:linear-gradient(160deg,#7a2410,#E8552B);}
.pillar__photo::after{color:rgba(255,255,255,.55);background:rgba(0,0,0,.2);}
.pillar{transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.pillar:hover{transform:translateY(-8px);}

/* =========================================================
   ブランド（開発×製造×営業）
   ========================================================= */
.brand{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,14vw,180px) var(--pad);text-align:center;}
.brand .sec-tag{justify-content:center;}
.brand__title{font-family:var(--serif);font-weight:800;font-size:clamp(26px,4.6vw,56px);line-height:1.4;color:var(--navy);margin:.6em 0 1.4em;}
.brand__title span{display:inline-block;}
.brand__title em{background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 .15em;}
.brand__flow{display:flex;align-items:stretch;justify-content:center;gap:clamp(8px,1.5vw,20px);flex-wrap:wrap;}
.brand__node{
    flex:1 1 200px;
    max-width:300px;
    padding:clamp(28px,3vw,44px) 20px;
    border-radius:8px;
    background-color:var(--bg-soft);
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:.5s var(--ease);
}
.brand__node:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(27,42,56,.1);}
.brand__node:nth-child(1){border-top:3px solid var(--ice);}
.brand__node:nth-child(3){border-top:3px solid var(--ice-bright);}
.brand__node:nth-child(5){border-top:3px solid var(--fire);}
.brand__step{font-family:var(--latin);font-style:italic;font-size:20px;color:var(--mute);}
.brand__node h3{font-family:var(--serif);font-weight:800;font-size:clamp(26px,3.4vw,38px);color:var(--navy);margin:.1em 0 .3em;}
.brand__node p{font-size:13px;color:#1a2c3c;}
.brand__plus{display:flex;align-items:center;font-family:var(--latin);font-size:clamp(28px,4vw,48px);color:var(--fire);font-style:italic;}
.brand__note{margin-top:2.6em;font-size:clamp(14px,1.8vw,18px);color:var(--ink);}
.brand__node--01{
    background-image:url("../images/img-kaihatsu.jpg");
}
.brand__node--02{
    background-image:url("../images/img-seizou.jpg");
}
.brand__node--03{
    background-image:url("../images/img-eigyo.jpg");
}
.brand__node::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.82);
    transition:.4s;
}
.brand__node > *{
    position:relative;
    z-index:2;
}
.brand__node:hover::before{
    background:rgba(255,255,255,.55);
}

/* =========================================================
   ヒストリー / タイムライン
   ========================================================= */
.history{
  position:relative;
  overflow:hidden;
  padding: clamp(90px,14vw,170px) 0 0;
  background:var(--bg-soft);
}
.history::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--grad-duo);}
.history__intro{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad) clamp(80px,10vw,120px);
  overflow:hidden;
}
.history::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:1px;
  height:620px;
    background:
    linear-gradient(
      90deg,
      rgba(18,40,70,.80) 0%,
      rgba(18,40,70,.55) 40%,
      rgba(18,40,70,.20) 75%,
      rgba(18,40,70,0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(248,248,248,0) 70%,
      rgba(248,248,248,.55) 85%,
      rgba(248,248,248,1) 100%
    ),
    url("../images/history-bg.png") center top / cover no-repeat;
  z-index:0;
    -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 75%,
    transparent 100%
  );
}
.history__intro,
.timeline{
    position:relative;
    z-index:1;
}
.history__title{font-family:var(--serif);font-weight:800;font-size:clamp(30px,5.5vw,64px);line-height:1.35;color:#ffffff;margin:.4em 0 0;}
.history__progress{margin-top:32px;height:3px;background:var(--line);border-radius:99px;overflow:hidden;}
.history__progress i{display:block;height:100%;width:0;background:var(--grad-duo);border-radius:99px;}

.timeline{position:relative;max-width:var(--maxw);margin:clamp(40px,6vw,72px) auto 0;padding:0 var(--pad);}
.timeline::before{content:"";position:absolute;left:calc(var(--pad) + 7px);top:10px;bottom:60px;width:2px;background:linear-gradient(var(--ice),var(--fire));opacity:.25;}
.tl{position:relative;display:grid;grid-template-columns:280px 1fr;grid-template-areas:"era photo" "era body";gap:8px clamp(30px,5vw,70px);padding:clamp(30px,4vw,56px) 0 clamp(30px,4vw,56px) clamp(36px,5vw,64px);}
.tl::before{content:"";position:absolute;left:0;top:calc(clamp(30px,4vw,56px) + 6px);width:16px;height:16px;border-radius:50%;background:var(--bg-soft);border:3px solid var(--ice);box-shadow:0 0 0 5px var(--bg-soft);transition:.4s var(--ease);}
.tl:nth-child(n+5)::before{border-color:var(--fire);}
.tl.is-in::before{transform:scale(1.25);box-shadow:0 0 0 5px var(--bg-soft),0 0 30px rgba(6,113,191,.4);}
.tl__era{grid-area:era;}
.tl__decade{font-family:var(--latin);font-weight:600;font-size:clamp(48px,7vw,92px);line-height:.9;color:var(--navy);display:block;}
.tl__decade i{font-size:.5em;font-style:italic;color:var(--ice);}
.tl:nth-child(n+5) .tl__decade i{color:var(--fire);}
.tl__cap{display:block;margin-top:.6em;font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--mute);max-width:18em;}
.tl__photo{grid-area:photo;--ar:16/9;max-width:520px;}
.tl__body{grid-area:body;max-width:520px;}
.tl__body h3{font-family:var(--serif);font-weight:700;font-size:clamp(18px,2.6vw,26px);color:var(--navy);line-height:1.5;margin:.2em 0 .6em;}
.tl__body p{font-size:14px;color:var(--ink);line-height:1.95;}
.tl--now .tl__decade{background:var(--grad-duo);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tl--now::before{background:var(--navy);border-color:var(--fire-bright);}
.tl--now .tl__body h3{color:var(--fire);}

/* =========================================================
   ビジョン
   ========================================================= */
.vision{
    position:relative;
    color:#fff;
    overflow:hidden;
    padding:clamp(100px,16vw,220px) 0;
}
.vision__bg{
    position:absolute;
    inset:0;
    /* 背景画像 */
    background:
        url("../images/vision-bg.jpg") center center / cover no-repeat;
}
/* 暗めのフィルター */
.vision__bg::before{
    content:"";
    position:absolute;
    inset:0;

    background:var(--grad-duo);

    /* ←ここを0.9→0.45に変更 */
    opacity:.45;

    mix-blend-mode:multiply;
}
/* 青・オレンジの光 */
.vision__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(50% 60% at 20% 20%,rgba(22,160,224,.7),transparent 60%),
        radial-gradient(50% 60% at 80% 85%,rgba(242,160,61,.6),transparent 60%),
        radial-gradient(80% 80% at 50% 50%,transparent 40%,rgba(10,16,24,.6));
}

.vision__inner{
    position:relative;
    z-index:2;
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 var(--pad);
    text-align:center;
}

.vision .sec-tag{
    justify-content:center;
}

.vision__title{
    font-family:var(--serif);
    font-weight:800;
    font-size:clamp(28px,5.2vw,66px);
    line-height:1.5;
    margin:.6em 0;
    text-shadow:0 4px 30px rgba(0,0,0,.3);
}

.vision__title .ice-text{
    color:#bfe6ff;
}

.vision__title .fire-text{
    color:#ffd2ad;
}

.vision__text{
    max-width:42em;
    margin:0 auto;
    font-size:clamp(14px,1.8vw,17px);
    line-height:2.1;
    color:rgba(255,255,255,.85);
}

.vision__pledge{
    margin:2.4em 0 1.6em;
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(20px,3.6vw,40px);
    line-height:1.7;
}

.vision__pledge .ice-text{
    color:#bfe6ff;
}

.vision__pledge .fire-text{
    color:#ffd2ad;
}

.vision__last{
    font-family:var(--serif);
    font-weight:800;
    font-size:clamp(24px,4.4vw,52px);
    margin-top:.8em;
}

.vision__sign{
    margin-top:1.6em;
    font-size:clamp(13px,1.6vw,16px);
    color:rgba(255,255,255,.8);
    letter-spacing:.06em;
}

.vision__next{
    margin-top:3em;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:.2em;
}

.vision__next span{
    font-size:11px;
    letter-spacing:.4em;
    color:rgba(255,255,255,.6);
}

.vision__next b{
    font-family:var(--latin);
    font-weight:600;
    font-size:clamp(56px,12vw,150px);
    line-height:1;
    background:linear-gradient(100deg,#bfe6ff,#ffd2ad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
/* =========================================================
   フッター
   ========================================================= */
.ft{background:var(--navy);color:#fff;padding:clamp(50px,7vw,80px) var(--pad) 40px;}
.ft__brand{display:flex;align-items:center;gap:16px;justify-content:center;}
.ft__logo{height:30px;filter:brightness(0) invert(1);}
.ft__mark{font-family:var(--latin);font-style:italic;font-size:18px;color:rgba(255,255,255,.75);}
.ft__info{text-align:center;margin-top:28px;line-height:2;}
.ft__name{font-weight:700;font-size:16px;}
.ft__addr{font-size:13px;color:rgba(255,255,255,.65);}
.ft__link{display:inline-block;margin-top:14px;font-size:13px;letter-spacing:.06em;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.4);transition:.3s;}
.ft__link:hover{color:var(--ice-bright);border-color:var(--ice-bright);}
.ft__copy{text-align:center;margin-top:40px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4);}

/* =========================================================
   スクロール演出の初期状態（JSなし/失敗時はフォールバックで表示）
   ========================================================= */
/* 初期状態を隠すのは js-ready のときだけ → JS無効/失敗時は常に表示 */
.js-ready [data-reveal]{opacity:0;transform:translateY(40px);will-change:opacity,transform;}
.js-ready [data-rise]{opacity:0;transform:translateY(30px);will-change:opacity,transform;}

/* ヒーローの登場演出：GSAP非依存。ローダー解除（body.ready）後にCSSで再生 */
body.ready .hero [data-rise]{
  animation-name:riseIn;animation-duration:1.05s;
  animation-timing-function:var(--ease);animation-fill-mode:both;
}
body.ready .hero__since{animation-delay:.05s;}
body.ready .hero__line--ice{animation-delay:.20s;}
body.ready .hero__line--fire{animation-delay:.34s;}
body.ready .hero__sub-copy{animation-delay:.50s;}
body.ready .hero__lead{animation-delay:.66s;}
@keyframes riseIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:980px){
  .hd__nav,.hd__back{display:none;}
  .hd__burger{display:block;}
  .message__grid{grid-template-columns:1fr;grid-template-areas:"lead" "photo" "body" "stats";}
  .message__photo{min-height:0;}
  .tl{grid-template-columns:1fr;grid-template-areas:"era" "photo" "body";gap:16px;}
  .tl__photo{max-width:none;}
}
@media (max-width:680px){
  :root{--hd-h:60px;}
  .hero__half{width:78%;}
  .hero__half--ice{clip-path:polygon(0 0,100% 0,100% 100%,0 78%);width:100%;height:90%;}
  .hero__half--fire{clip-path:polygon(0 62%,100% 48%,100% 100%,0 100%);width:100%;height:100%;top:0;}
  .hero__seam{display:none;}
  .hero__since{text-align: center;}
  .hero__copy{text-align: center;}
  .message__motto{text-align: center;}
  .message__head{text-align: center;}
  .strength__head{text-align: center;}
  .sec-tag{display: inline-flex;}
  #message > .sec-tag{
    justify-content:center;
    width:100%;
    text-align:center;
  }
  .sec-tag--light{text-align: center;}
  .pillars{grid-template-columns:1fr;}
  .brand__flow{flex-direction:column;align-items:center;}
  .brand__plus{transform:rotate(90deg);}
  .message__stats{grid-template-columns:1fr;gap:32px;}
  .message__stats li{display:flex;align-items:baseline;justify-content:center;gap:16px;}
  .message__stats .lbl{margin-top:0;}
  .history__intro{text-align: center;}
}

/* アクセシビリティ：動きを減らす */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  [data-reveal],[data-rise]{opacity:1!important;transform:none!important;}
  .hero__scroll i::after{display:none;}
}

.pillar__icon{
  position:absolute;
  right:clamp(20px,3vw,40px);
  top:clamp(20px,3vw,40px);
  opacity:.15;
}
.pillar__icon img{
  display:block;
  width:48px;
  height:48px;
}

.products{
    max-width:1200px;
    margin:auto;
    padding:0px 20px 100px 10px;
}
.products__title{
    text-align:center;
    margin-bottom:50px;
}
.products__sub{
    font-size:12px;
    letter-spacing:.3em;
    color:#999;
}
.products__title h2{
    font-size:30px;
    margin-top:15px;
    letter-spacing:.1em;
}
.products__title span{
    display:block;
    width:40px;
    height:1px;
    background:#ccc;
    margin:20px auto 0;
}
.products__grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
}
.product-item{
    position: relative;
    overflow: hidden;
    border: none;
    background: #fff;
    cursor: pointer;
    box-shadow:
        0 3px 10px rgba(0,0,0,.10),
        0 1px 3px rgba(0,0,0,.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}
.product-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    background:#f5f5f5;
    transition:.4s;
}
.product-item:hover img{
    transform:scale(1.05);
}
.product-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    transition:.3s;
}
.product-item:hover::after{
    background:rgba(0,0,0,.15);
}

@media (max-width:768px){
.products__grid{
    grid-template-columns:repeat(3,1fr);
}
.products{
    padding:70px 20px;
}
.products__title h2{
    font-size:24px;
}
}


/* モーダル */
.modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}
.modal.active{
    display:flex;
}
.modal__bg{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
}
.modal__content{
    position:relative;
    width:min(500px,90%);
    background:#fff;
    z-index:2;
}
.modal__content img{
    width:100%;
    display:block;
}
.modal__close{
    position:absolute;
    top:15px;
    right:15px;
    width:36px;
    height:36px;
    border:none;
    background:#fff;
    cursor:pointer;
    font-size:24px;
}

.modal__body{
    padding:24px 20px;
    border-top:1px solid #eee;
}

.modal__body p{
    margin:0 0 18px;
    padding:0;
    border:none;

    font-size:18px;
    font-weight:500;
    color:#333;
}

.btn-detail{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 16px;

    background:#fff;
    color:#444;
    text-decoration:none;

    border:1px solid #d9d9d9;

    font-size:13px;
    line-height:1;

    transition:.3s ease;
}

.btn-detail:hover{
    background:#333;
    color:#fff;
    border-color:#333;
}
.btn-detail__arrow{
    display:inline-block;
    font-size:14px;
    line-height:1;
    transition:transform .3s ease;
}
.btn-detail:hover .btn-detail__arrow{
    transform:translateX(3px);
}

/* =========================================================
   ワイドビジュアル
========================================================= */

.history__visual{
    width:100vw;
    margin:0 calc(50% - 50vw);
}

.history__visual img{
    display:block;
    width:100%;
    height:auto;
}