:root{
  --navy:#0A1B4C;
  --navy-deep:#071230;
  --teal:#00B7C3;
  --paper:#F4F6F9;
  --paper-2:#ECEFF4;
  --ink:#10182B;
  --ink-soft:#4B5568;
  --mist:#DEE4EC;
  --sunrise:#FF6A45;
  --line:rgba(10,27,76,0.14);
  --radius:2px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.disp{
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--navy);
}
.mono{ font-family:"JetBrains Mono",monospace; letter-spacing:0.08em; }
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
@media (max-width:720px){.wrap{padding:0 20px;}}

a:focus-visible, button:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,249,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1160px; margin:0 auto; }
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{height:26px; width:auto; flex:none;}
.logo-text{font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:17px;color:var(--navy);letter-spacing:0.04em;}
.logo-sub{font-family:"JetBrains Mono";font-size:9px;color:var(--ink-soft);letter-spacing:0.12em;display:block;margin-top:1px;}
nav.links{display:flex; gap:28px; font-size:13.5px; font-weight:500;}
nav.links a{position:relative; color:var(--ink); opacity:0.72; transition:opacity .2s;}
nav.links a:hover{opacity:1;}
nav.links a[aria-current="page"]{opacity:1; color:var(--teal);}
nav.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
nav.links a:hover::after, nav.links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-cta{ font-family:"JetBrains Mono"; font-size:11.5px; letter-spacing:0.08em; border:1px solid var(--navy); padding:9px 16px; white-space:nowrap; }
.burger{display:none;}
@media (max-width:900px){
  nav.links{display:none;}
  .burger{display:block; font-family:"JetBrains Mono"; font-size:11px; border:1px solid var(--navy); padding:8px 12px; background:none;}
}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:"JetBrains Mono"; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow .num{color:var(--navy); opacity:.45;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal);}

/* ---------- page hero (sub pages) ---------- */
.page-hero{ padding:70px 0 56px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{ font-size:clamp(30px,4vw,44px); line-height:1.35; margin-bottom:18px; max-width:720px;}
.page-hero p.lead{ font-size:15.5px; color:var(--ink-soft); max-width:520px;}
.page-hero .deco-line{
  position:absolute; right:-40px; top:-20px; width:340px; height:340px; opacity:.5; pointer-events:none;
}
.crumbs{ font-family:"JetBrains Mono"; font-size:11px; color:var(--ink-soft); margin-bottom:26px; display:flex; gap:8px; align-items:center;}
.crumbs a{color:var(--ink-soft);}
.crumbs a:hover{color:var(--teal);}

/* ---------- home hero ---------- */
.hero{ position:relative; padding:88px 0 60px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; }
.hero-content{max-width:640px;}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} }
.hero.photo-surface{min-height:600px; display:flex; align-items:center; padding:110px 0;}
@media (max-width:640px){ .hero.photo-surface{min-height:460px; padding:80px 0;} }
.hero h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.28; letter-spacing:0.01em; margin-bottom:26px; }
.hero h1 .accent{
  background:linear-gradient(92deg,var(--navy) 0%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ font-size:16.5px; color:var(--ink-soft); max-width:460px; margin-bottom:34px; }
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:46px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid var(--navy); transition:transform .18s, background .18s, color .18s;
}
.btn.primary{background:var(--navy); color:#fff;}
.btn.primary:hover{background:var(--navy-deep); transform:translateY(-2px);}
.btn.ghost{background:transparent; color:var(--navy);}
.btn.ghost:hover{background:var(--navy); color:#fff; transform:translateY(-2px);}
.btn .arrow{transition:transform .18s;}
.btn:hover .arrow{transform:translateX(3px);}
.bg-dark .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.bg-dark .btn.ghost:hover{ background:#fff; color:var(--navy); }

.hero-stats{display:flex; gap:34px; border-top:1px solid var(--line); padding-top:22px;}
.hero-stats .stat b{ font-family:"Zen Kaku Gothic New"; font-size:26px; color:var(--navy); display:block; }
.hero-stats .stat span{ font-family:"JetBrains Mono"; font-size:10.5px; color:var(--ink-soft); letter-spacing:0.06em; }

/* ---------- route graphic ---------- */
.route-box{position:relative; width:100%; aspect-ratio:1/1; max-width:460px; margin:0 auto;}
.route-box svg{width:100%; height:100%;}
.route-path{ fill:none; stroke:var(--teal); stroke-width:1.6; stroke-dasharray:5 6; animation:dash 20s linear infinite; }
@keyframes dash{to{stroke-dashoffset:-400;}}
.route-dot{fill:var(--navy);}
.route-dot.pulse{ animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{r:5; opacity:1;} 50%{r:8; opacity:.55;} }
.route-tag{ font-family:"JetBrains Mono"; font-size:9.5px; fill:var(--ink-soft); letter-spacing:.04em; }
.route-tag.strong{ fill:var(--navy); font-weight:600; }

/* ---------- section base ---------- */
section{padding:96px 0;}
section.tight{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(26px,3.2vw,36px); line-height:1.4; margin-bottom:18px;}
.section-head p{color:var(--ink-soft); font-size:15px;}

/* ---------- mission ---------- */
.mission-quote{
  font-family:"Zen Kaku Gothic New"; font-weight:700;
  font-size:clamp(24px,3vw,34px); color:var(--navy); line-height:1.6;
  padding:44px 0 56px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:64px;
}
.mission-quote span{color:var(--teal);}
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
@media (max-width:820px){.value-grid{grid-template-columns:1fr;}}
.value-card{background:var(--paper); padding:36px 32px;}
.value-card .vc-icon{width:38px; height:38px; margin-bottom:22px;}
.value-card h3{font-size:16.5px; margin-bottom:6px;}
.value-card .vc-en{ font-family:"JetBrains Mono"; font-size:10.5px; color:var(--teal); letter-spacing:.06em; display:block; margin-bottom:14px; }
.value-card p{font-size:13.8px; color:var(--ink-soft);}

/* ---------- info table (company overview) ---------- */
.info-table{ width:100%; border-collapse:collapse; margin-bottom:20px;}
.info-table tr{ border-bottom:1px solid var(--line); }
.info-table th{ text-align:left; font-size:13px; color:var(--navy); font-weight:600; padding:16px 20px 16px 0; width:170px; vertical-align:top; white-space:nowrap;}
.info-table td{ font-size:14px; color:var(--ink); padding:16px 0; vertical-align:top;}
@media (max-width:640px){
  .info-table th{white-space:normal; width:110px; font-size:12px;}
  .info-table td{font-size:13px;}
}

/* ---------- business steps ---------- */
.bg-dark{background:var(--navy); color:#EDF1FA;}
.bg-dark .section-head h2, .bg-dark.page-hero h1{color:#fff;}
.bg-dark .section-head p, .bg-dark.page-hero p.lead{color:#AEB9DC;}
.bg-dark .eyebrow{color:var(--teal);}
.bg-dark .eyebrow .num{color:#7B87B8;}
.bg-dark .crumbs, .bg-dark .crumbs a{color:#8891B3;}

.steps{position:relative;}
.step-line{
  position:absolute; left:29px; top:26px; bottom:26px; width:1px;
  background:repeating-linear-gradient(to bottom, rgba(0,183,195,.55) 0 6px, transparent 6px 12px);
}
@media (max-width:640px){.step-line{display:none;}}
.step{ display:grid; grid-template-columns:60px 1fr; gap:28px; padding:30px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.step:last-child{border-bottom:none;}
.step-num{
  width:58px; height:58px; border-radius:50%; border:1px solid rgba(0,183,195,.6);
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono"; font-size:13px; color:var(--teal); background:var(--navy); z-index:2;
}
.step-body h3{color:#fff; font-size:19px; margin-bottom:8px; display:flex; align-items:baseline; gap:12px;}
.step-body h3 .en{font-family:"JetBrains Mono"; font-size:11px; color:#7B87B8; font-weight:400;}
.step-body p{color:#B7C0DE; font-size:14px; max-width:560px;}

/* ---------- platform / meta cards ---------- */
.meta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:56px;}
@media (max-width:820px){.meta-grid{grid-template-columns:1fr;}}
.meta-card{background:#fff; padding:30px 28px;}
.meta-card span.tag{ font-family:"JetBrains Mono"; font-size:10px; color:var(--teal); letter-spacing:.08em; display:block; margin-bottom:12px;}
.meta-card h3{font-size:16px; margin-bottom:8px;}
.meta-card p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- brands ---------- */
.brand-panel{
  background:var(--navy-deep); border-radius:var(--radius); padding:56px;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center;
  position:relative; overflow:hidden;
}
@media (max-width:860px){.brand-panel{grid-template-columns:1fr; padding:40px 28px;}}
.brand-mark{
  width:100%; max-width:220px; margin:0 auto;
  background:#fff; border-radius:16px; padding:26px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.brand-copy .eyebrow{color:var(--sunrise);}
.brand-copy .eyebrow::before{background:var(--sunrise);}
.brand-copy h3{color:#fff; font-size:28px; margin-bottom:6px; font-family:"Zen Kaku Gothic New";}
.brand-copy .tagline{font-family:"JetBrains Mono"; font-size:11.5px; color:#C9B99A; letter-spacing:.1em; margin-bottom:22px; display:block;}
.brand-copy p.desc{color:#C7CCDE; font-size:14.5px; margin-bottom:26px; max-width:460px;}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.tag-row span{ font-family:"JetBrains Mono"; font-size:11px; color:#EDF1FA; border:1px solid rgba(255,255,255,.22); padding:6px 12px; border-radius:100px; }
.brand-meta{display:flex; gap:28px; margin-bottom:30px; flex-wrap:wrap;}
.brand-meta div span{display:block; font-family:"JetBrains Mono"; font-size:10px; color:#8891B3; letter-spacing:.06em; margin-bottom:4px;}
.brand-meta div b{color:#fff; font-size:14px; font-weight:500;}
.btn.store{
  border:1px solid rgba(255,255,255,.3); color:#fff; background:transparent; font-family:"JetBrains Mono"; font-size:12.5px;
  opacity:.65; cursor:default;
}
.btn.store .dot{width:6px;height:6px;border-radius:50%;background:var(--sunrise); display:inline-block;}

.category-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:20px;}
@media (max-width:820px){.category-grid{grid-template-columns:repeat(2,1fr);}}
.category-card{background:#fff; padding:26px 22px;}
.category-card span.tag{font-family:"JetBrains Mono"; font-size:9.5px; color:var(--sunrise); letter-spacing:.06em; display:block; margin-bottom:10px;}
.category-card h4{font-size:15px; margin-bottom:6px;}
.category-card p{font-size:12.5px; color:var(--ink-soft);}

/* ---------- strengths ---------- */
.strength-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:820px){.strength-grid{grid-template-columns:1fr;}}
.strength-card{border:1px solid var(--line); padding:30px 26px; background:#fff;}
.strength-card .sc-icon{width:40px; height:40px; margin-bottom:20px;}
.strength-card .sc-tag{font-family:"JetBrains Mono"; font-size:10px; color:var(--teal); letter-spacing:.08em; margin-bottom:14px; display:block;}
.strength-card h3{font-size:16px; margin-bottom:10px;}
.strength-card p{font-size:13.5px; color:var(--ink-soft);}
.strength-detail{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.strength-detail li{ list-style:none; font-size:13px; color:var(--ink-soft); padding-left:16px; position:relative; margin-bottom:8px;}
.strength-detail li::before{content:"—"; position:absolute; left:0; color:var(--teal);}

/* ---------- case studies empty state ---------- */
.empty-state{ border:1px dashed var(--mist); padding:70px 40px; text-align:center; }
.empty-state .mono{display:block; color:var(--teal); font-size:11px; margin-bottom:16px; letter-spacing:.1em;}
.empty-state h3{font-size:19px; margin-bottom:10px;}
.empty-state p{color:var(--ink-soft); font-size:13.8px; max-width:420px; margin:0 auto;}

/* ---------- partners ---------- */
.partners-cta{
  background:var(--paper-2); padding:56px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
  border:1px solid var(--line); margin-top:20px;
}
.partners-cta h2{font-size:24px; margin-bottom:10px;}
.partners-cta p{color:var(--ink-soft); font-size:14px; max-width:420px;}
.flow-list{ counter-reset:flow; margin-top:20px;}
.flow-item{ display:grid; grid-template-columns:44px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
.flow-item:first-child{border-top:1px solid var(--line);}
.flow-num{ counter-increment:flow; font-family:"JetBrains Mono"; font-size:13px; color:var(--teal);}
.flow-num::before{content: counter(flow, decimal-leading-zero);}
.flow-item h3{font-size:15.5px; margin-bottom:6px;}
.flow-item p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- recruit ---------- */
.recruit-strip{ display:flex; justify-content:space-between; align-items:center; gap:30px; padding:40px 0; flex-wrap:wrap; }
.recruit-strip .rs-copy{font-family:"Zen Kaku Gothic New"; font-size:19px; color:var(--navy);}
.recruit-strip .rs-copy .en{font-family:"JetBrains Mono"; font-size:11px; color:var(--ink-soft); display:block; margin-bottom:8px; font-weight:400;}
.role-list{ margin-top:10px;}
.role-item{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.role-item:first-child{border-top:1px solid var(--line);}
.role-item h3{font-size:15.5px;}
.role-item span.loc{font-family:"JetBrains Mono"; font-size:11px; color:var(--ink-soft);}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{background:#fff; padding:34px 28px;}
.contact-card span.tag{font-family:"JetBrains Mono"; font-size:10px; color:var(--teal); letter-spacing:.08em; display:block; margin-bottom:14px;}
.contact-card h3{font-size:16px; margin-bottom:10px;}
.contact-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px;}

/* ---------- footer ---------- */
footer{background:var(--navy-deep); color:#B7C0DE; padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-brand .logo-text{color:#fff;}
.footer-brand p{font-size:12.5px; color:#8891B3; margin-top:16px; max-width:240px;}
.footer-col h4{font-family:"JetBrains Mono"; font-size:10.5px; letter-spacing:.1em; color:#7B87B8; margin-bottom:16px;}
.footer-col a{display:block; font-size:13px; color:#D6DAEE; margin-bottom:11px; opacity:.85;}
.footer-col a:hover{opacity:1; color:var(--teal);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:22px;
  display:flex; justify-content:space-between; font-family:"JetBrains Mono"; font-size:10.5px; color:#6C77A0;
  flex-wrap:wrap; gap:10px;
}
.footer-bottom a{color:#6C77A0;}
.footer-bottom a:hover{color:var(--teal);}

/* ---------- heading system: English title + Japanese gloss ---------- */
.hero-title{margin-bottom:18px; max-width:760px;}
.hero-title .en{
  display:block; font-family:"JetBrains Mono",monospace; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.05;
  font-size:clamp(34px,5.4vw,58px); color:var(--navy);
}
.hero-title .ja{
  display:block; margin-top:16px; font-family:"Noto Sans JP",sans-serif; font-weight:500;
  font-size:15.5px; color:var(--ink-soft); letter-spacing:.02em;
}
.bg-dark .hero-title .en, .photo-surface .hero-title .en{color:#fff;}
.bg-dark .hero-title .ja{color:#AEB9DC;}
.photo-surface .hero-title .ja{color:#D6DAEE;}

.sec-title{margin-bottom:18px;}
.sec-title .en{
  display:block; font-family:"JetBrains Mono",monospace; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.18;
  font-size:clamp(22px,2.8vw,30px); color:var(--navy);
}
.sec-title .ja{
  display:block; margin-top:10px; font-family:"Noto Sans JP",sans-serif; font-weight:500;
  font-size:14px; color:var(--ink-soft); letter-spacing:.02em;
}
.bg-dark .sec-title .en, .photo-surface .sec-title .en{color:#fff;}
.bg-dark .sec-title .ja{color:#AEB9DC;}
.photo-surface .sec-title .ja{color:#D6DAEE;}

/* ---------- news list ---------- */
.news-list{margin-top:8px;}
.news-item{
  display:grid; grid-template-columns:104px 96px 1fr 22px; gap:22px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--line); transition:opacity .15s;
}
.news-item:first-child{border-top:1px solid var(--line);}
a.news-item{color:inherit;}
a.news-item:hover h3{color:var(--teal);}
a.news-item:hover .go{transform:translateX(3px);}
.news-item .date{font-family:"JetBrains Mono"; font-size:12px; color:var(--ink-soft);}
.news-item .cat{
  font-family:"JetBrains Mono"; font-size:10px; color:var(--teal); letter-spacing:.06em;
  border:1px solid var(--line); padding:5px 10px; border-radius:100px; text-align:center; white-space:nowrap;
}
.news-item h3{font-size:14.5px; font-weight:500; color:var(--ink); transition:color .15s;}
.news-item .go{color:var(--teal); font-size:15px; transition:transform .15s;}
@media (max-width:680px){
  .news-item{grid-template-columns:1fr; gap:6px; padding:20px 0;}
  .news-item .go{display:none;}
}

/* ---------- article (news detail) ---------- */
.article-meta{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.article-meta .date{font-family:"JetBrains Mono"; font-size:12.5px; color:var(--ink-soft);}
.article-meta .cat{
  font-family:"JetBrains Mono"; font-size:10.5px; color:var(--teal); letter-spacing:.06em;
  border:1px solid var(--line); padding:5px 12px; border-radius:100px;
}
.article-title{font-size:clamp(24px,3.4vw,34px); line-height:1.5; margin-bottom:8px; max-width:720px;}
.article-body{max-width:680px; margin-top:36px;}
.article-body p{margin-bottom:22px; font-size:15px; color:var(--ink); line-height:1.9;}
.article-nav{
  display:flex; justify-content:space-between; margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  font-size:13px;
}
.article-nav a{color:var(--ink-soft);}
.article-nav a:hover{color:var(--teal);}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- photo surface (hero / section with background photo) ---------- */
.photo-surface{ position:relative; overflow:hidden; border-bottom:none; }
.photo-surface .photo-bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;}
.photo-surface .photo-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,18,48,.86), rgba(7,18,48,.78)); z-index:0;}
.photo-surface > .wrap{position:relative; z-index:1;}
.photo-surface h1, .photo-surface h2{color:#fff;}
.photo-surface p.lead, .photo-surface .section-head p{color:#D6DAEE;}
.photo-surface .crumbs, .photo-surface .crumbs a{color:#AEB9DC;}
.photo-surface .eyebrow{color:var(--teal);}
.photo-surface .eyebrow .num{color:#7B87B8;}
.hero.photo-surface h1 .accent{
  background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--teal);
}
.photo-surface .btn.ghost{color:#fff; border-color:rgba(255,255,255,.45);}
.photo-surface .btn.ghost:hover{background:#fff; color:var(--navy);}
.photo-surface .hero-stats{border-top-color:rgba(255,255,255,.22);}
.photo-surface .hero-stats .stat b{color:#fff;}
.photo-surface .hero-stats .stat span{color:#AEB9DC;}

/* ---------- photo band (inline supporting image with caption) ---------- */
.photo-band{ position:relative; height:320px; overflow:hidden; margin:48px 0; }
.photo-band img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-band .cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 30px;
  background:linear-gradient(0deg, rgba(7,18,48,.88), rgba(7,18,48,0));
  color:#fff; font-size:13px; letter-spacing:.02em;
}
.photo-band .cap b{font-weight:600;}
@media (max-width:640px){ .photo-band{height:220px;} }

/* ---------- contact form ---------- */
.form-card{ border:1px solid var(--line); background:#fff; padding:40px; margin-top:48px; }
@media (max-width:640px){ .form-card{padding:28px 22px;} }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px; }
@media (max-width:640px){ .form-row{grid-template-columns:1fr;} }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.field label{ font-size:13px; font-weight:600; color:var(--navy); }
.field label .req{ color:var(--sunrise); font-size:11px; margin-left:4px; font-weight:500; }
.field input, .field select, .field textarea{
  border:1px solid var(--mist); padding:12px 14px; font-size:14px; font-family:"Noto Sans JP",sans-serif;
  color:var(--ink); background:var(--paper); border-radius:2px; width:100%;
}
.field textarea{resize:vertical; min-height:140px;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal); background:#fff;
}
.form-note{ font-size:12px; color:var(--ink-soft); margin-top:18px; }
.form-submit{ margin-top:8px; }

/* ---------- sitemap page ---------- */
.sitemap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
@media (max-width:780px){ .sitemap-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .sitemap-grid{grid-template-columns:1fr;} }
.sitemap-col h3{
  font-family:"JetBrains Mono"; font-size:11px; letter-spacing:.08em; color:var(--teal);
  margin-bottom:16px; text-transform:uppercase;
}
.sitemap-col a{ display:block; font-size:14px; color:var(--ink); padding:9px 0; border-bottom:1px solid var(--line); }
.sitemap-col a:hover{ color:var(--teal); }

/* ---------- legal text page ---------- */
.legal-body{ max-width:720px; }
.legal-body h2{ font-size:18px; margin:38px 0 14px; color:var(--navy); font-family:"Zen Kaku Gothic New"; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ font-size:14.5px; color:var(--ink); line-height:1.9; margin-bottom:14px; }
.legal-body ul{ padding-left:20px; margin-bottom:14px; }
.legal-body .updated{ font-family:"JetBrains Mono"; font-size:12px; color:var(--ink-soft); margin-bottom:40px; display:block; }

/* ---------- nav hover Japanese tooltip ---------- */
nav.links a{ overflow:visible; }
nav.links a .ja-tip{
  position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(6px);
  white-space:nowrap; font-size:11px; font-family:"Noto Sans JP",sans-serif; font-weight:500;
  color:var(--ink); background:#fff; border:1px solid var(--line); padding:5px 11px;
  border-radius:4px; box-shadow:0 6px 16px rgba(10,27,76,0.12);
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:20;
}
nav.links a:hover .ja-tip{ opacity:1; transform:translateX(-50%) translateY(10px); }

/* ---------- footer logo ---------- */
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.footer-logo .logo-mark{ height:24px; width:auto; }

/* ---------- hero content width fix ---------- */
.hero-content{ max-width:860px; }

/* ---------- illustrative icons (about / recruit value cards) ---------- */
.value-card .vc-icon{ width:48px; height:48px; margin-bottom:20px; }

/* ---------- meta card icon (business page) ---------- */
.meta-card .mc-icon{ width:44px; height:44px; margin-bottom:16px; }

/* ---------- form error banner ---------- */
.form-error-banner{
  background:#FDECEA; border:1px solid #F3B4AC; color:#8A2E22;
  padding:16px 20px; font-size:13.5px; margin-bottom:8px; border-radius:2px;
}

/* ---------- small helper classes (replace former inline styles) ---------- */
.vi-logo-wrap{ max-width:340px; margin:0 0 40px; }
.mission-cta{ text-align:right; margin-top:-40px; }

/* ==================================================================
   MOBILE-ONLY REFINEMENTS
   Everything below is scoped to narrow / phone widths via media
   queries and does not change desktop (PC) layout.
   ================================================================== */

/* ---- header: tighter bar, working hamburger drawer ---- */
@media (max-width:900px){
  .nav{ padding:14px 16px; gap:10px; }
  .logo-mark{ height:22px; }
  .logo span{ line-height:1; display:flex; align-items:center; }
  .logo-text{ font-size:14.5px; line-height:1; display:inline-block; }
  .logo-sub{ display:none; }

  .nav-cta{
    margin-left:auto;
    border:none; background:none;
    padding:8px 4px; font-size:11.5px;
  }

  .burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; width:32px; height:32px; padding:0; margin:0;
    border:none; background:none; cursor:pointer; position:relative; z-index:70;
  }
  .burger span{
    display:block; width:20px; height:2px; background:var(--navy);
    transition:transform .2s ease, opacity .2s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  nav.links{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; right:0; bottom:0;
    width:min(78vw,320px); height:100vh;
    background:var(--paper); box-shadow:-8px 0 30px rgba(10,27,76,.14);
    padding:90px 28px 40px; overflow-y:auto;
    transform:translateX(100%); transition:transform .28s ease;
    z-index:60;
  }
  header.nav-open nav.links{ transform:translateX(0); }
  nav.links a{ font-size:15px; padding:15px 0; border-bottom:1px solid var(--line); opacity:1; }
  nav.links a .ja-tip{ display:none; }
  nav.links a::after{ display:none; }

  .nav-scrim{
    display:block; position:fixed; inset:0; background:rgba(7,18,48,.4);
    opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:55;
  }
  header.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
}
@media (min-width:901px){ .nav-scrim{ display:none; } }

/* ---- generic section spacing on phones ---- */
@media (max-width:640px){
  section{ padding:52px 0; }
  section.tight{ padding:36px 0; }
  .page-hero{ padding:44px 0 36px; }
  .section-head{ margin-bottom:26px; }
  .hero.photo-surface{ padding:64px 0; }
}

/* ---- buttons: smaller footprint on phones ---- */
@media (max-width:640px){
  .btn{ padding:11px 18px; font-size:13px; gap:8px; }
  .cta-row{ margin-bottom:32px; }
}

/* ---- news list: fix oversized category pill ---- */
@media (max-width:640px){
  .news-item .cat{ width:fit-content; font-size:9.5px; padding:4px 9px; }
}

/* ---- "explore" cards (about/business/brands/... index links) ---- */
@media (max-width:640px){
  .meta-card{ padding:20px 18px; }
  .meta-card p{
    font-size:13px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* ---- mission quote: readable size + tighter rhythm ---- */
@media (max-width:640px){
  .mission-quote{
    font-size:15px; line-height:1.5; padding:26px 0 30px; margin-bottom:28px;
    white-space:nowrap; letter-spacing:0; text-align:center;
  }
  .mission-cta{ margin-top:0; }
}

/* ---- recruit strip (home page) ---- */
@media (max-width:640px){
  /* use padding-top/bottom only so .wrap's left/right padding is preserved */
  .recruit-strip{ flex-direction:column; align-items:flex-start; gap:16px; padding-top:26px; padding-bottom:26px; }
  .recruit-strip .btn{ align-self:flex-end; }
}

/* ---- business steps: compact vertical list (not too tall, num + heading readable) ---- */
@media (max-width:640px){
  .steps{ display:block; }
  .step{
    display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:start;
    padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .step-num{ width:36px; height:36px; font-size:11px; margin:0; }
  .step-body h3{ flex-direction:row; align-items:baseline; gap:8px; font-size:14.5px; margin-bottom:5px; }
  .step-body h3 .en{ font-size:9.5px; }
  .step-body p{ font-size:11.5px; line-height:1.65; }
  .photo-band{ margin:26px 0; }
}

/* ---- explore cards (index "株式会社ECラボについて"): 2-up grid, less height ---- */
@media (max-width:640px){
  .meta-grid{ grid-template-columns:repeat(2,1fr); margin-top:18px; }
  .meta-card{ padding:16px 14px; }
  .meta-card .tag{ font-size:9px; margin-bottom:8px; }
  .meta-card h3{ font-size:14px; margin-bottom:6px; }
  .meta-card p{
    font-size:11.5px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* ---- contact page: 3 category cards in one compact row ---- */
@media (max-width:640px){
  .contact-grid{ grid-template-columns:repeat(3,1fr); gap:1px; }
  .contact-card{ padding:14px 8px; }
  .contact-card span.tag{
    display:block; font-size:8.5px; margin-bottom:6px; white-space:nowrap;
  }
  .contact-card h3{
    font-size:11.5px; line-height:1.4; margin-bottom:6px;
  }
  .contact-card p{
    font-size:11px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* ---- value-grid: about "Curator's Eye" cards / recruit "who we look for" ---- */
@media (max-width:640px){
  .value-grid{ grid-template-columns:repeat(3,1fr); gap:1px; }
  .value-card{ padding:14px 8px; }
  .value-card .vc-icon{ width:22px; height:22px; margin-bottom:8px; }
  .value-card .vc-en{
    display:block; font-size:8.5px; margin-bottom:6px; white-space:nowrap;
  }
  .value-card h3{
    font-size:12px; line-height:1.4; margin-bottom:6px;
  }
  .value-card p{
    font-size:11px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  .vi-logo-wrap{ margin-bottom:20px; }
}

/* ---- home page: drop the RECRUIT teaser strip on mobile ---- */
@media (max-width:640px){
  #recruit{ display:none; }
}