/* ===== Base ===== */
:root{
  --navy:#0d2240;
  --navy-deep:#0a1b33;
  --navy-soft:#13315c;
  --ink:#1a1a1a;
  --gray:#666;
  --line:#e3e6ea;
  --bg:#fff;
  --bg-alt:#f4f6f8;
  --gold:#c8a96a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);
  line-height:1.9;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.bx{display:inline-block}
.eyebrow{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold);
  display:block;
  margin-bottom:1rem;
}
.eyebrow.dark{color:var(--gold)}
.arrow{display:inline-block;margin-left:.6em;transition:transform .3s}
.btn-dark:hover .arrow,.btn-light:hover .arrow{transform:translateX(6px)}

/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  transition:background .4s,box-shadow .4s,padding .4s;
  padding:.4rem 0;
}
.header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 2px 20px rgba(0,0,0,.08)}
.header-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;transition:color .4s}
.header.scrolled .brand{color:var(--navy)}
.brand-mark{display:flex;color:inherit}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-ja{font-weight:700;font-size:1.15rem;letter-spacing:.04em}
.brand-en{font-family:"Montserrat",sans-serif;font-size:.56rem;letter-spacing:.18em;opacity:.7}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{
  font-size:.86rem;font-weight:500;color:#fff;transition:color .3s;position:relative;
}
.header.scrolled .nav a{color:var(--navy)}
.nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:width .3s;
}
.nav a:not(.nav-cta):hover::after{width:100%}
.nav-cta{
  background:var(--navy);color:#fff!important;padding:.7rem 1.5rem;border-radius:4px;
  font-weight:600;transition:background .3s;
}
.header.scrolled .nav-cta{background:var(--navy)}
.nav-cta:hover{background:var(--navy-soft)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:26px;height:2px;background:#fff;transition:.3s}
.header.scrolled .hamburger span{background:var(--navy)}

/* ===== Cinematic intro ===== */
.intro{
  position:fixed;inset:0;z-index:2000;background:#060d18;
  display:flex;align-items:center;justify-content:center;
  /* Safety net: auto-dismiss even if JS never runs, so the overlay can't get stuck. */
  animation:introSafety .9s 5s forwards;
}
@keyframes introSafety{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.intro-mark{color:var(--gold);opacity:0;transform:translateY(8px);animation:introFade 1s .2s ease forwards}
.intro-en{
  font-family:"Montserrat",sans-serif;letter-spacing:.42em;font-size:.82rem;font-weight:500;
  color:#cdd7e4;margin:1.4rem 0 1rem;opacity:0;animation:introFade 1.1s .8s ease forwards;
}
.intro-line{width:0;height:1px;background:var(--gold);animation:introLine 1.1s 1.1s cubic-bezier(.6,0,.2,1) forwards}
.intro-ja{
  font-size:1.45rem;font-weight:700;letter-spacing:.16em;color:#fff;
  margin-top:1.1rem;opacity:0;animation:introFade 1.1s 1.5s ease forwards;
}
@keyframes introFade{to{opacity:1;transform:none}}
@keyframes introLine{to{width:230px}}
/* intro exit */
body.cinematic-in .intro{animation:introOut 1.1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes introOut{to{opacity:0;visibility:hidden;transform:scale(1.07)}}
.intro.intro-done{display:none}
body.intro-lock{overflow:hidden}

/* Letterbox bars */
.cine-bar{position:fixed;left:0;width:100%;height:13vh;background:#060d18;z-index:1900;pointer-events:none}
.cine-bar.top{top:0;transform:translateY(-100%)}
.cine-bar.bottom{bottom:0;transform:translateY(100%)}
body.cinematic-in .cine-bar{animation:barFrame 2.4s 1.15s cubic-bezier(.6,0,.2,1) forwards}
@keyframes barFrame{
  0%{transform:translateY(var(--from,-100%))}
  34%,60%{transform:translateY(0)}      /* slide in & hold — film framing beat */
  100%{transform:translateY(var(--from,-100%))} /* retract */
}
.cine-bar.bottom{--from:100%}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background:url("images/truck-lineup.jpg") center center/contain no-repeat;
  background-color:#0d2240;
}
.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 120% at 48% 42%,transparent 52%,rgba(4,10,22,.6) 100%);
}
/* Cinematic hero text reveal (only when JS adds .cinematic).
   Transition between two static states — if the transition is ever skipped,
   the revealed state is a plain opacity:1, so the text can never stay hidden. */
body.cinematic .hero-content>*{
  opacity:0;transform:translateY(34px);filter:blur(7px);
  transition:opacity 1.2s cubic-bezier(.16,.7,.2,1),transform 1.2s cubic-bezier(.16,.7,.2,1),filter 1.2s cubic-bezier(.16,.7,.2,1);
}
body.cinematic-in .hero-content>*{opacity:1;transform:none;filter:blur(0)}
body.cinematic-in .hero-eyebrow{transition-delay:.15s}
body.cinematic-in .hero-title{transition-delay:.42s}
body.cinematic-in .hero-lead{transition-delay:.78s}
body.cinematic-in .hero-badges{transition-delay:1.05s}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(8,22,43,.88) 0%,rgba(8,22,43,.55) 45%,rgba(8,22,43,.25) 100%);
}
.hero-content{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 28px;width:100%;color:#fff}
.hero-eyebrow{
  font-family:"Montserrat",sans-serif;letter-spacing:.32em;font-size:.78rem;font-weight:600;
  color:#dfe6ef;margin-bottom:1.5rem;
}
.hero-title{
  font-weight:900;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.28;letter-spacing:.02em;margin-bottom:1.8rem;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.hero-title .bx{display:block}  /* 各フレーズを必ず1行ずつ（「海上コンテナ輸送の」／「プロフェッショナル」） */
.hero-title .accent{color:#fff}
.hero-lead{font-size:clamp(.95rem,1.5vw,1.15rem);line-height:2;max-width:34ch;margin-bottom:3rem;color:#eef2f7}
.hero-badges{list-style:none;display:flex;gap:2.6rem;flex-wrap:wrap}
.hero-badges li{display:flex;align-items:center;gap:.9rem}
.badge-icon{
  width:52px;height:52px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.badge-icon svg{width:24px;height:24px;fill:#fff}
.badge-text{display:flex;flex-direction:column;line-height:1.45}
.badge-text b{font-size:1rem;font-weight:700}
.badge-text small{font-size:.74rem;opacity:.78}

/* ===== About ===== */
.about{padding:6.5rem 0;background:var(--bg)}
.about-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center;
}
.about-title{
  font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;line-height:1.6;color:var(--navy);margin-bottom:1.8rem;
}
.about-body{color:#444;font-size:.96rem;line-height:2.1;margin-bottom:1.6rem}
.about-person{font-size:.92rem;color:#555;margin-bottom:2.2rem;font-weight:500}
.btn-dark{
  display:inline-flex;align-items:center;background:var(--navy);color:#fff;
  padding:1rem 2.4rem;border:0;border-radius:4px;font-family:inherit;font-weight:600;font-size:.92rem;
  cursor:pointer;transition:background .3s;
}
.btn-dark:hover{background:var(--navy-soft)}
.about-media{position:relative}
.about-img{
  position:relative;overflow:hidden;
  width:100%;aspect-ratio:4/3;border-radius:4px;
  background:url("images/truck-wanhai.jpg") center/cover no-repeat;
  box-shadow:0 24px 60px rgba(13,34,64,.22);
}
/* Traced signature watermark (vectorized from the reference image) */
.sig-trace{
  position:absolute;right:3.5%;bottom:4%;
  width:40%;height:auto;
  color:#ffffff;opacity:.45;pointer-events:none;
}

/* ===== Section heads ===== */
.section-head{text-align:center;margin-bottom:3.6rem}
.section-head .eyebrow{margin-bottom:.6rem}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:700;letter-spacing:.05em}
.section-head.light h2{color:#fff}
.section-head.dark h2{color:var(--navy)}

/* ===== Service ===== */
.service{padding:5.5rem 0 6rem;background:var(--navy);color:#fff}
.service-grid{
  max-width:820px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;
}
.service-card{background:var(--navy-deep);border:1px solid rgba(255,255,255,.07);border-radius:4px;overflow:hidden;transition:transform .35s,box-shadow .35s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.service-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center}
.service-img.s1{background-image:url("images/svc-container.jpg")}
.service-img.s2{background-image:url("images/svc-freight.jpg")}
.service-img.s3{background-image:url("images/truck-lineup.jpg")}
.service-body{padding:1.8rem 1.6rem 2.2rem;text-align:center}
.service-body h3{font-size:1.2rem;font-weight:700;margin-bottom:.9rem}
.service-body p{font-size:.86rem;color:#c3cdda;line-height:1.95}

/* ===== Strength ===== */
.strength{padding:5.5rem 0 6rem;background:var(--bg-alt)}
.strength-grid{
  max-width:1080px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.8rem;
}
.strength-item{text-align:center}
.strength-num{
  font-family:"Montserrat",sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);display:block;margin-bottom:1rem;
}
.strength-icon{
  width:84px;height:84px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;
}
.strength-icon svg{width:34px;height:34px;fill:#fff}
.strength-text h3{font-size:1.18rem;font-weight:700;color:var(--navy);margin-bottom:.8rem}
.strength-text p{font-size:.88rem;color:#555;line-height:1.95;max-width:24ch;margin:0 auto}

/* ===== CTA ===== */
.cta{position:relative;padding:4.5rem 0;overflow:hidden}
.cta-bg{
  position:absolute;inset:0;
  background:url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1900&q=80") center/cover no-repeat;
}
.cta-overlay{position:absolute;inset:0;background:rgba(8,22,43,.9)}
.cta-inner{
  position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;color:#fff;
}
.cta-text{display:flex;align-items:center;gap:1.6rem}
.cta-icon{
  width:74px;height:74px;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cta-icon svg{width:34px;height:34px;stroke:#fff}
.cta-text h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:700;margin-bottom:.4rem}
.cta-text p{font-size:.94rem;color:#dbe2ec}
.btn-light{
  display:inline-flex;align-items:center;background:#fff;color:var(--navy);
  padding:1.15rem 2.6rem;border-radius:4px;font-weight:700;font-size:.95rem;transition:background .3s,color .3s;
}
.btn-light:hover{background:var(--gold);color:#fff}
/* Multi-channel contact CTA */
.cta-contact{flex-direction:column;align-items:flex-start;gap:1.8rem}
.cta-methods{display:flex;flex-wrap:wrap;gap:.8rem;width:100%}
.cta-method{
  display:inline-flex;align-items:center;gap:.75rem;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  border-radius:8px;padding:.7rem 1.15rem;min-width:230px;
  transition:background .25s,border-color .25s,transform .25s;
}
a.cta-method:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.cta-method--static{cursor:default}
.cta-method svg{width:22px;height:22px;color:var(--gold);flex-shrink:0}
.cta-method span{display:flex;flex-direction:column;line-height:1.35;font-size:.92rem}
.cta-method b{font-size:.68rem;letter-spacing:.1em;color:var(--gold);font-weight:700}
@media(max-width:560px){.cta-method{min-width:0;width:100%}}
.footer-tel a{color:inherit;word-break:break-all}
.company-table dd a,.access-info dd a{word-break:break-all}

/* ===== Career support flow ===== */
.flow{padding:5.5rem 0 6rem;background:var(--bg)}
.flow-grid{
  max-width:1080px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;
}
.flow-step{
  position:relative;isolation:isolate;overflow:hidden;border-radius:8px;
  min-height:300px;padding:2.4rem 2.2rem;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:#fff;
  background-size:cover;background-position:center;
  box-shadow:0 14px 36px rgba(8,16,30,.25);
  transition:transform .4s ease;
}
.flow-step::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(155deg,rgba(8,16,30,.62) 0%,rgba(8,16,30,.82) 55%,rgba(8,16,30,.9) 100%);
  transition:background .4s ease;
}
.flow-step:hover{transform:translateY(-6px)}
.flow-step:hover::before{background:linear-gradient(155deg,rgba(8,16,30,.5) 0%,rgba(8,16,30,.78) 55%,rgba(8,16,30,.88) 100%)}
.flow-step.f1{background-image:url("images/svc-container.jpg")}
.flow-step.f2{background-image:url("images/hero-truck.jpg")}
.flow-step.f3{background-image:url("images/svc-freight.jpg")}
.flow-step.f4{background-image:url("images/truck-wanhai.jpg")}
.flow-num{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.18em;
  color:var(--gold);display:block;margin-bottom:.5rem;
}
.flow-step h3{font-size:1.45rem;font-weight:700;color:#fff;margin-bottom:1.3rem;letter-spacing:.02em}
.flow-icon{
  width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(200,169,106,.85);
  background:rgba(8,16,30,.25);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;
}
.flow-icon svg{width:26px;height:26px;fill:none;stroke:var(--gold)}
.flow-step p{font-size:.9rem;color:#dde3ec;line-height:1.95;margin-top:auto}

/* ===== Instagram ===== */
.insta{padding:5.5rem 0 6rem;background:var(--navy);color:#fff}
.insta .section-head h2{color:#fff}
.insta-handle{
  display:inline-block;margin-top:.5rem;font-family:"Montserrat",sans-serif;font-weight:600;
  letter-spacing:.06em;color:var(--gold);font-size:.95rem;transition:opacity .25s;
}
.insta-handle:hover{opacity:.75}
.insta-grid{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
}
.insta-cell{
  position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden;
  background-size:cover;background-position:center;
  transition:transform .35s,box-shadow .35s;
}
.insta-cell::after{
  content:"";position:absolute;inset:0;background:rgba(13,34,64,.35);opacity:0;transition:opacity .3s;
}
.insta-cell:hover{transform:scale(1.04);z-index:2;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.insta-cell:hover::after{opacity:1}
.insta-follow{
  background:var(--navy-deep);border:1px dashed rgba(200,169,106,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  color:var(--gold);
}
.insta-follow svg{stroke:var(--gold)}
.insta-follow span{font-size:.78rem;font-weight:600;letter-spacing:.05em;color:#f1e6cf}

/* ===== Access ===== */
.access{padding:5.5rem 0 6rem;background:var(--bg-alt)}
.access-inner{
  max-width:1080px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;align-items:stretch;
}
.access-info dl{margin-bottom:1.8rem}
.access-info dt{
  font-family:"Montserrat",sans-serif;font-size:.72rem;letter-spacing:.14em;font-weight:600;
  color:var(--gold);margin-top:1.2rem;
}
.access-info dt:first-child{margin-top:0}
.access-info dd{font-size:1rem;color:var(--ink);line-height:1.7;margin-top:.3rem}
.access-info dd a{color:var(--navy);font-weight:700}
.access-map{border-radius:6px;overflow:hidden;box-shadow:0 14px 36px rgba(13,34,64,.16);min-height:340px}
.access-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* ===== Company overview (collapsible) ===== */
.btn-dark .arrow-down{transition:transform .35s ease}
#companyToggle[aria-expanded="true"] .arrow-down{transform:rotate(180deg)}
.about-extra{
  max-width:1180px;margin:0 auto;padding:0 28px;
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .55s ease,opacity .45s ease;
}
.about-extra.open{max-height:1600px;opacity:1}
@media(max-width:600px){.about-extra.open{max-height:2200px}}
.company-panel{
  margin-top:3rem;padding:2.6rem 2.4rem 2.8rem;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;
}
.company-panel .eyebrow{margin-bottom:.4rem}
.company-panel-title{font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:1.6rem}
.company-table dl{display:grid;grid-template-columns:200px 1fr;border-top:1px solid var(--line)}
.company-table dt,.company-table dd{padding:1.05rem .5rem;border-bottom:1px solid var(--line)}
.company-table dt{font-weight:700;color:var(--navy);font-size:.92rem}
.company-table dd{color:#444;font-size:.95rem;line-height:1.7}
.company-table dd a{color:var(--navy);font-weight:700}
.company-table dd.tbd{color:#a9b0ba}
.company-note{font-size:.78rem;color:#888;margin-top:1.1rem;text-align:right}
@media(max-width:600px){
  .company-panel{padding:1.8rem 1.4rem 2rem}
  .company-table dl{grid-template-columns:1fr}
  .company-table dt{padding:.9rem .4rem .1rem;border-bottom:0}
  .company-table dd{padding:.1rem .4rem 1rem}
  .company-note{text-align:left}
}

/* ===== 募集要項 ===== */
.requirements{padding:5rem 0 5.5rem;background:var(--bg-alt)}
.req-table{max-width:820px;margin:0 auto;padding:0 28px}
.req-table dl{display:grid;grid-template-columns:160px 1fr;border-top:1px solid #dce0e6}
.req-table dt,.req-table dd{padding:1.1rem .5rem;border-bottom:1px solid #dce0e6}
.req-table dt{font-weight:700;color:var(--navy);font-size:.92rem}
.req-table dd{color:#3a3a3a;font-size:.95rem;line-height:1.85}
.req-table dd .req-sub{color:#777;font-size:.85rem}
.req-btn{margin-top:1.8rem}
@media(max-width:600px){
  .req-table dl{grid-template-columns:1fr}
  .req-table dt{padding:.9rem .4rem .1rem;border-bottom:0}
  .req-table dd{padding:.1rem .4rem 1rem}
}

/* ===== Footer ===== */
.footer{background:#fff;padding:4.5rem 0 0;border-top:1px solid var(--line)}
.footer-inner{
  max-width:1180px;margin:0 auto;padding:0 28px 3.5rem;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;
}
.brand-mark.dark{color:var(--navy);display:inline-flex}
.footer-name{font-size:1.2rem;font-weight:700;color:var(--navy);margin:.6rem 0 1rem}
.footer-addr,.footer-tel{font-size:.85rem;color:#555;line-height:1.8}
.footer-col h4{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:1.1rem}
.footer-col ul{list-style:none}
.footer-col li{font-size:.85rem;color:#555;margin-bottom:.7rem}
.footer-col a{transition:color .3s}
.footer-col a:hover{color:var(--gold)}
.sns-icon{color:var(--navy);display:inline-flex;margin-bottom:.9rem;transition:color .3s}
.sns-icon:hover{color:var(--gold)}
.sns-note{font-size:.8rem;color:#666}
.copyright{border-top:1px solid var(--line);padding:1.6rem 28px;text-align:center}
.copyright p{font-size:.74rem;color:#999;font-family:"Montserrat",sans-serif;letter-spacing:.04em}

/* ===== Sample banner ===== */
.sample-banner{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:90;display:inline-flex;align-items:center;gap:10px;
  background:rgba(10,18,33,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(200,169,106,.55);color:#f1e6cf;
  padding:9px 16px 9px 14px;border-radius:999px;
  font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:500;letter-spacing:.03em;white-space:nowrap;
  max-width:min(600px,calc(100vw - 24px));
  box-shadow:0 12px 32px rgba(0,0,0,.5);cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  animation:sb-in .6s 1s ease both;
}
.sample-banner:hover{
  transform:translateX(-50%) translateY(-3px);
  border-color:rgba(200,169,106,.95);
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 0 1px rgba(200,169,106,.25);
}
.sample-banner:hover .sb-arrow{transform:translate(2px,-2px)}
@keyframes sb-in{from{opacity:0}to{opacity:1}}
.sb-arrow{color:var(--gold);opacity:.85;transition:transform .22s ease}
.sb-dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;
  box-shadow:0 0 0 4px rgba(200,169,106,.18);animation:sb-pulse 2s ease-in-out infinite;
}
@keyframes sb-pulse{0%,100%{box-shadow:0 0 0 3px rgba(200,169,106,.22)}50%{box-shadow:0 0 0 6px rgba(200,169,106,.06)}}
.sb-tag{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.18em;
  color:#1a1205;background:var(--gold);padding:2px 8px;border-radius:5px;flex-shrink:0;
}
.sb-text{color:#f1e6cf}
@media(max-width:480px){
  .sample-banner{font-size:11px;padding:9px 16px;gap:8px;bottom:12px;white-space:normal;text-align:center;line-height:1.45;border-radius:16px;width:min(94vw,360px);justify-content:center;flex-wrap:wrap}
  .sample-banner .sb-text{font-size:11px}
  .sb-dot{display:none}
}

/* ===== Reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .cine-bar{display:none}
  .hero-bg{animation:none}
  body.cinematic .hero-content>*{opacity:1;transform:none;filter:none}
  .reveal{transition:none}
}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:900px){
  .nav{
    position:fixed;top:0;right:0;height:100vh;width:75%;max-width:320px;
    background:var(--navy);flex-direction:column;justify-content:center;gap:2rem;
    transform:translateX(100%);transition:transform .4s;padding:2rem;
  }
  .nav.open{transform:translateX(0)}
  .nav a{color:#fff!important;font-size:1.05rem}
  .header.scrolled .nav a{color:#fff!important}
  .hamburger{display:flex;z-index:120}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .header.scrolled .hamburger.open span{background:#fff}
  .about-inner{grid-template-columns:1fr;gap:3.5rem}
  .about-media{order:-1}
  .service-grid,.strength-grid{grid-template-columns:1fr;gap:2rem}
  .strength-grid{gap:3rem}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .access-inner{grid-template-columns:1fr;gap:2rem}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .cta-inner{flex-direction:column;text-align:center;align-items:center}
  .cta-text{flex-direction:column;text-align:center}
}
@media(max-width:560px){
  .hero-title{font-size:clamp(1.75rem,7.6vw,2.5rem);line-height:1.3;margin-bottom:1.4rem}
  .hero-badges{gap:1.4rem}
  .hero-badges li{width:100%}
  .brand-ja{font-size:1rem}
  .flow-grid{grid-template-columns:1fr;gap:1.2rem}
  .insta-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .footer-inner{grid-template-columns:1fr}
}