/* ============================================================
   MTB redesign concept
   References translated into an original MTB corporate site:
   bold editorial MV, numbered solution structure, rich action paths.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

:root{
  --ink:#06111f;
  --ink-2:#122133;
  --paper:#ffffff;
  --mist:#f4f8fb;
  --line:rgba(6,17,31,.12);
  --line-dark:rgba(255,255,255,.16);
  --blue:#0068ff;
  --cyan:#00a7b7;
  --coral:#ff465e;
  --green:#46c082;
  --text:#182230;
  --muted:#5e6b7c;
  --en:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --header:82px;
  --pad:clamp(22px,5vw,72px);
  --wide:1320px;
}

html{scroll-behavior:smooth}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
@supports (overflow: clip){
  html,body{overflow-x:clip}
}
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--jp);
  font-size:clamp(14px,1vw,15px);
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.op{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  pointer-events:all;
  overflow:hidden;
  background:transparent;
}
.op-logo{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  width:clamp(190px,24vw,330px);
  transform:translate(-50%,-50%) scale(.86);
  opacity:0;
  transition:opacity .55s ease,transform .9s var(--ease),filter .9s ease;
}
.op-logo img{
  width:100%;
  filter:brightness(0) invert(1);
}
.op.logo-in .op-logo{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.op.logo-out .op-logo{
  opacity:0;
  transform:translate(-50%,-50%) scale(1.08);
  filter:blur(8px);
}
.op-line{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:2px;
  height:250vh;
  background:#fff;
  transform:translate(-50%,-50%) rotate(58deg);
  clip-path:inset(0 0 100% 0);
}
.op.line-in .op-line{
  clip-path:inset(0 0 0 0);
  transition:clip-path .72s cubic-bezier(.4,0,.2,1);
}
.op-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  background:
    radial-gradient(circle at 72% 22%,rgba(0,104,255,.2),transparent 30%),
    var(--ink);
}
.op-panel-left{clip-path:polygon(0 0,100% 0,0 100%)}
.op-panel-right{clip-path:polygon(100% 0,100% 100%,0 100%)}
.op.split .op-panel-left{
  transform:translate(-86%,-86%);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
}
.op.split .op-panel-right{
  transform:translate(86%,86%);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
}
.op.split .op-line{
  opacity:0;
  transition:opacity .34s ease .18s;
}
.op.split{pointer-events:none}
.op.done{display:none}

main{
  opacity:1;
  transform:none;
}
body.ready main{
  opacity:1;
  transform:none;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:var(--header);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(18px,2.4vw,30px);
  padding:0 var(--pad);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(6,17,31,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:height .3s ease,background .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{
  height:68px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 44px rgba(8,20,38,.08);
}
.site-logo{display:block;width:132px}
.site-logo img{width:100%;height:auto}
.site-nav{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:0;
  font-family:var(--en);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  color:var(--ink);
}
.site-nav a+a{margin-left:clamp(16px,2vw,28px)}
.site-nav a{
  position:relative;
  padding:6px 0;
  white-space:nowrap;
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:right .28s var(--ease);
}
.site-nav a:hover::after{right:0}
.header-contact{
  display:inline-flex;
  min-width:136px;
  min-height:42px;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  font-family:var(--en);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  transition:transform .25s var(--ease),background .25s ease;
}
.header-contact:hover{transform:translateY(-2px);background:var(--blue);border-color:var(--blue)}
.menu-button{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
}
.menu-button span{
  width:18px;
  height:2px;
  background:var(--ink);
  transition:transform .25s var(--ease);
}
.menu-button.is-open span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-button.is-open span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mobile-menu{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  max-width:100vw;
  z-index:90;
  display:none;
  place-items:center;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-menu.is-open{opacity:1;pointer-events:auto}
.mobile-menu nav{
  display:grid;
  gap:22px;
  text-align:center;
  font-family:var(--en);
  font-size:clamp(20px,6vw,24px);
  font-weight:900;
  letter-spacing:.1em;
}

main{position:relative}
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  contain:paint;
  display:flex;
  align-items:center;
  background:#fff;
  isolation:isolate;
}
.hero-visual{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  opacity:1;
}
.hero-visual img{
  position:absolute;
  right:0;
  bottom:0;
  z-index:0;
  width:100%;
  height:auto;
  max-width:none;
  transform:translate3d(2.5%,-2%,0) scale(1.12) rotate(-1.6deg);
  transform-origin:70% 72%;
  transition:transform 9.2s cubic-bezier(.16,1,.3,1);
}
body.hero-motion .hero-visual img{
  transform:translate3d(0,0,0) scale(1) rotate(0deg);
}
.hero-grid,
.hero::before,
.hero::after{
  display:none;
}
.hero-grid{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:
    linear-gradient(to right,rgba(6,17,31,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(6,17,31,.04) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 86%);
}
.hero::before{
  content:"";
  position:absolute;
  top:-18vh;
  right:15vw;
  width:30vw;
  height:150vh;
  border-left:1px solid rgba(0,104,255,.45);
  border-right:1px solid rgba(0,167,183,.28);
  transform:rotate(21deg);
}
.hero::after{
  content:"MTB";
  position:absolute;
  left:var(--pad);
  bottom:-.18em;
  font-family:var(--en);
  font-size:clamp(120px,24vw,360px);
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  color:transparent;
  -webkit-text-stroke:1px rgba(6,17,31,.07);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - var(--pad) * 2));
  margin-left:var(--pad);
  padding-top:calc(var(--header) + 20px);
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  font-family:var(--en);
  font-size:12px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
}
.hero-kicker::before{
  content:"";
  width:46px;
  height:2px;
  background:var(--coral);
}
.hero-title{
  font-weight:900;
  line-height:.98;
  letter-spacing:0;
  color:var(--ink);
}
.hero-title span{
  display:block;
  font-size:clamp(54px,7.6vw,118px);
  white-space:nowrap;
}
.hero-title .accent{color:var(--blue)}
.hero-copy{
  max-width:560px;
  margin-top:32px;
  font-size:clamp(17px,1.6vw,22px);
  font-weight:700;
  line-height:1.9;
  color:var(--ink-2);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:42px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  min-width:178px;
  padding:0 24px;
  border:1px solid var(--ink);
  font-family:var(--en),var(--jp);
  font-size:clamp(11px,.9vw,12px);
  font-weight:900;
  letter-spacing:.08em;
  transition:transform .25s var(--ease),background .25s ease,border-color .25s ease,color .25s ease;
}
.button::after{
  content:"";
  width:22px;
  height:1px;
  margin-left:14px;
  background:currentColor;
}
.button:hover{transform:translateY(-3px)}
.button-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.button-secondary{background:transparent;color:var(--ink)}
.button-secondary:hover{background:var(--ink);color:#fff}
.button-secondary.light{border-color:rgba(255,255,255,.42);color:#fff}
.button-secondary.light:hover{background:#fff;color:var(--ink)}
.hero-scroll{
  position:absolute;
  left:24px;
  bottom:34px;
  z-index:3;
  writing-mode:vertical-rl;
  font-family:var(--en);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  color:rgba(6,17,31,.42);
}
.hero-scroll::after{
  content:"";
  display:block;
  width:1px;
  height:58px;
  margin-top:12px;
  background:var(--blue);
}

.section-pad{padding:clamp(88px,10vw,150px) var(--pad)}
.section-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:34px;
  font-family:var(--en);
}
.section-label span{
  color:var(--blue);
  font-size:13px;
  font-weight:900;
  letter-spacing:.14em;
}
.section-label strong{
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
}
.section-label::after{
  content:"";
  width:54px;
  height:1px;
  background:currentColor;
  opacity:.24;
}
.eyebrow{
  font-family:var(--en);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--coral);
}
.section-title h2,
.statement-heading h2,
.cta-inner h2{
  margin-top:12px;
  font-size:clamp(34px,4.5vw,62px);
  font-weight:900;
  line-height:1.18;
  letter-spacing:0;
  color:var(--ink);
}
.statement-heading h2{
  font-size:clamp(34px,3.85vw,56px);
}
.statement{
  position:relative;
  background:var(--mist);
  overflow:hidden;
}
.statement::before{
  content:"ABOUT";
  position:absolute;
  top:36px;
  right:4vw;
  font-family:var(--en);
  font-size:clamp(96px,18vw,250px);
  font-weight:900;
  line-height:1;
  color:rgba(6,17,31,.045);
}
.statement-layout{
  position:relative;
  z-index:1;
  width:min(var(--wide),100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(610px,.92fr) minmax(360px,.78fr);
  gap:clamp(34px,4vw,64px);
  align-items:start;
}
.statement-body{
  max-width:590px;
  padding-top:54px;
  font-size:16px;
  color:var(--ink-2);
}
.statement-body p+p{margin-top:22px}
.keep-line{white-space:nowrap}
.principles{
  position:relative;
  z-index:1;
  width:min(var(--wide),100%);
  margin:86px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.principle-card{
  min-height:300px;
  padding:38px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.56);
  position:relative;
}
.principle-icon,
.process-icon{
  width:clamp(80px,8vw,120px);
  height:clamp(80px,8vw,120px);
  margin:0 auto 4px;
  display:block;
  object-fit:contain;
  position:relative;
  color:var(--blue);
}
.principle-icon::before,
.principle-icon::after,
.process-icon::before,
.process-icon::after{
  content:"";
  position:absolute;
  border:2px solid currentColor;
}
.principle-icon-question::before{
  left:10%;
  top:10%;
  width:64%;
  height:64%;
  border-radius:50%;
}
.principle-icon-question::after{
  right:8%;
  bottom:8%;
  width:30%;
  height:2px;
  border-width:2px 0 0;
  transform:rotate(45deg);
}
.principle-icon-design::before{
  left:12%;
  top:14%;
  width:68%;
  height:50%;
  transform:skewX(-12deg);
}
.principle-icon-design::after{
  left:18%;
  bottom:12%;
  width:54%;
  height:16%;
  border-width:2px 0 0;
}
.principle-icon-move::before{
  left:8%;
  top:18%;
  width:70%;
  height:42%;
  border-left:0;
  border-bottom:0;
  transform:skewX(-18deg);
}
.principle-icon-move::after{
  right:8%;
  top:32%;
  width:24%;
  height:24%;
  border-left:0;
  border-bottom:0;
  transform:rotate(45deg);
}
.principle-card{text-align:center}
.principle-card span{
  display:inline-block;
  margin-bottom:12px;
  font-family:var(--en);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:900;
  letter-spacing:normal;
  color:var(--blue);
}
.principle-card span::after{content:"."}
.principle-card h3{
  display:inline-block;
  margin-bottom:12px;
  margin-left:8px;
  font-size:clamp(24px,2.4vw,32px);
  font-weight:900;
  color:var(--ink);
}
.principle-card p{text-align:left;color:var(--muted)}

.vision-band{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  gap:48px;
  align-items:end;
  padding:clamp(90px,11vw,160px) var(--pad);
  background:
    linear-gradient(135deg,rgba(0,104,255,.2),transparent 32%),
    linear-gradient(90deg,#06111f 0%,#0a2136 58%,#10374a 100%);
  color:#fff;
  overflow:hidden;
}
.vision-band::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:82px 82px;
}
.vision-copy,
.vision-panel{
  position:relative;
  z-index:1;
}
.vision-copy span{
  display:block;
  font-family:var(--en);
  font-size:clamp(54px,8.4vw,128px);
  font-weight:900;
  line-height:.88;
  letter-spacing:0;
}
.vision-copy span:nth-child(2){color:var(--cyan)}
.vision-copy span:nth-child(3){color:var(--coral)}
.vision-panel{
  padding:36px 0 0 34px;
  border-left:1px solid rgba(255,255,255,.34);
  color:rgba(255,255,255,.8);
  font-size:clamp(15px,1.35vw,17px);
  font-weight:700;
}
.vision-panel p+p{margin-top:18px}

.services{
  background:#fff;
  position:relative;
}
.services::after{
  content:"SERVICE";
  position:absolute;
  top:90px;
  right:var(--pad);
  font-family:var(--en);
  font-size:clamp(74px,13vw,180px);
  font-weight:900;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(6,17,31,.08);
  pointer-events:none;
}
.section-head{
  position:relative;
  z-index:1;
  width:min(var(--wide),100%);
  margin:0 auto 64px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:48px;
  align-items:start;
}
.service-list{
  position:relative;
  z-index:1;
  width:min(var(--wide),100%);
  margin:0 auto;
  border-top:1px solid var(--line);
}
.service-item{
  display:grid;
  grid-template-columns:78px minmax(260px,.78fr) 1fr;
  gap:28px;
  align-items:center;
  min-height:150px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.service-num{
  font-family:var(--en);
  font-size:clamp(18px,1.6vw,22px);
  font-weight:900;
  color:var(--blue);
}
.service-icon{
  width:68px;
  height:68px;
  background-size:cover;
  background-position:center;
  border:1px solid var(--line);
}
.service-text p{
  margin-bottom:8px;
  font-family:var(--en);
  font-size:12px;
  font-weight:900;
  letter-spacing:.15em;
  color:var(--cyan);
  text-transform:uppercase;
}
.service-text h3{
  font-size:clamp(20px,2vw,30px);
  line-height:1.35;
  color:var(--ink);
}
.service-desc{color:var(--muted)}

.process{
  position:relative;
  background:
    linear-gradient(135deg,rgba(255,70,94,.14),transparent 30%),
    #071421;
  color:#fff;
  overflow:hidden;
}
.process::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:84px 84px;
}
.process .section-label strong,
.process .section-title h2{color:#fff}
.process .section-label::after{background:#fff}
.process-head{position:relative;z-index:1}
.process-grid{
  position:relative;
  z-index:1;
  width:min(var(--wide),100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
}
.process-card{
  min-height:360px;
  padding:34px 28px;
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.process-icon{
  filter:brightness(0) invert(1);
}
.process-icon::before,
.process-icon::after{border-color:currentColor}
.process-icon-audit::before{
  left:8%;
  top:8%;
  width:54%;
  height:54%;
  border-radius:50%;
}
.process-icon-audit::after{
  right:8%;
  bottom:14%;
  width:30%;
  height:2px;
  border-width:2px 0 0;
  transform:rotate(45deg);
}
.process-icon-strategy::before{
  left:8%;
  top:18%;
  width:76%;
  height:52%;
  border-radius:999px;
  border-left-color:transparent;
}
.process-icon-strategy::after{
  right:12%;
  top:32%;
  width:22%;
  height:22%;
  border-left:0;
  border-bottom:0;
  transform:rotate(45deg);
}
.process-icon-build::before{
  left:12%;
  top:12%;
  width:64%;
  height:58%;
}
.process-icon-build::after{
  left:24%;
  top:30%;
  width:64%;
  height:46%;
  border-color:rgba(0,167,183,.55);
}
.process-icon-growth::before{
  left:10%;
  bottom:16%;
  width:72%;
  height:48%;
  border-top:0;
  border-right:0;
}
.process-icon-growth::after{
  right:10%;
  top:16%;
  width:24%;
  height:24%;
  border-left:0;
  border-bottom:0;
  transform:rotate(45deg);
}
.process-card span{
  display:inline-block;
  margin-bottom:12px;
  font-family:var(--en);
  font-size:clamp(20px,2.4vw,28px);
  font-weight:900;
  letter-spacing:normal;
  color:var(--cyan);
}
.process-card span::after{content:"."}
.process-card h3{
  display:inline-block;
  margin-bottom:12px;
  margin-left:8px;
  font-size:clamp(22px,2.15vw,30px);
  color:#fff;
}
.process-card p{
  text-align:left;
  color:rgba(255,255,255,.7);
  font-size:clamp(13px,1.05vw,15px);
}

.cases{
  background:
    linear-gradient(90deg,#f7f8fa 0%,#f7f8fa 64%,#edf5f8 64%,#edf5f8 100%);
  position:relative;
}
.case-board{
  width:min(var(--wide),100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,.42fr) minmax(0,1fr);
  min-height:620px;
  border:1px solid var(--line);
  background:#fff;
}
.case-board-visual{
  min-height:100%;
  background-size:cover;
  background-position:center;
  border-right:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.case-board-visual::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,104,255,.08));
}
.case-rows{
  display:grid;
  grid-template-rows:repeat(4,1fr);
}
.case-row{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) 1fr;
  gap:28px;
  align-items:center;
  padding:36px clamp(28px,4vw,58px);
  border-bottom:1px solid var(--line);
}
.case-row:last-child{border-bottom:0}
.case-num{
  font-family:var(--en);
  font-size:clamp(18px,1.7vw,24px);
  font-weight:900;
  color:var(--blue);
}
.case-main p{
  margin-bottom:10px;
  font-family:var(--en);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  color:var(--cyan);
}
.case-main h3{
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.35;
  color:var(--ink);
}
.case-desc{
  color:var(--muted);
  font-size:clamp(13px,1vw,15px);
}

.company{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,1fr);
  gap:clamp(44px,7vw,110px);
  align-items:center;
  background:#fff;
}
.company::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:34%;
  background:#eef4f8;
  clip-path:polygon(0 0,100% 0,72% 100%,0 100%);
}
.company-visual,
.company-content{
  position:relative;
  z-index:1;
}
.company-visual{
  justify-self:center;
  width:min(430px,82vw);
  min-height:clamp(260px,30vw,420px);
  display:grid;
  place-items:center;
  padding:clamp(44px,6vw,82px);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 28px 70px rgba(6,17,31,.08);
}
.company-visual img{
  width:100%;
  filter:drop-shadow(0 20px 32px rgba(0,104,255,.18));
}
.company-content{max-width:780px}
.company-table{
  margin-top:42px;
  border-top:1px solid var(--line);
}
.company-table div{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:28px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.company-table dt{
  font-family:var(--en),var(--jp);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  color:var(--blue);
  text-transform:uppercase;
}
.company-table dd{
  font-weight:700;
  color:var(--ink);
}
.business-list{
  margin:0;
  padding-left:1.25em;
  display:grid;
  gap:7px;
  line-height:1.72;
}
.business-list li{padding-left:.25em}

.contact-cta{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:grid;
  place-items:center;
  padding:100px var(--pad);
  background:#071421;
  color:#fff;
}
.cta-bg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:
    linear-gradient(90deg,rgba(7,20,33,.95),rgba(7,20,33,.72),rgba(7,20,33,.96)),
    url("images/global_bg.png") center / cover no-repeat;
}
.contact-cta::after{
  content:"CONTACT";
  position:absolute;
  right:-.05em;
  bottom:-.18em;
  font-family:var(--en);
  font-size:clamp(90px,18vw,260px);
  font-weight:900;
  line-height:1;
  color:rgba(255,255,255,.06);
}
.cta-inner{
  position:relative;
  z-index:1;
  width:min(var(--wide),100%);
}
.cta-inner h2{color:#fff}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:42px;
}

.site-footer{
  background:#030912;
  color:#fff;
  padding:54px var(--pad) 30px;
}
.footer-main{
  width:min(var(--wide),100%);
  margin:0 auto 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.footer-logo img{
  width:180px;
  filter:brightness(0) invert(1);
}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  font-family:var(--en);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  color:rgba(255,255,255,.62);
}
.site-footer p{
  width:min(var(--wide),100%);
  margin:0 auto;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--en);
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.38);
}

.contact-body{
  background:var(--mist);
}
.contact-site-header .header-contact{
  background:#fff;
  color:var(--ink);
}
.contact-main{
  position:relative;
  overflow:hidden;
}
.contact-hero{
  position:relative;
  min-height:clamp(520px,72vh,760px);
  display:flex;
  align-items:center;
  padding:calc(var(--header) + clamp(70px,9vw,120px)) var(--pad) clamp(90px,10vw,140px);
  background:#fff;
  overflow:hidden;
}
.contact-hero-art{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  pointer-events:none;
}
.contact-hero-art img{
  position:absolute;
  right:-8vw;
  bottom:-8vw;
  width:clamp(760px,72vw,1160px);
  max-width:none;
}
.contact-hero-inner{
  position:relative;
  z-index:1;
  width:min(900px,100%);
}
.contact-hero h1{
  margin-top:12px;
  font-family:var(--en);
  font-size:clamp(40px,10vw,124px);
  font-weight:900;
  line-height:.94;
  letter-spacing:0;
  color:var(--ink);
}
.contact-lead{
  max-width:620px;
  margin-top:clamp(24px,3vw,38px);
  font-size:clamp(15px,1.35vw,19px);
  font-weight:700;
  color:var(--ink-2);
}
.contact-section{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  width:min(var(--wide),100%);
  margin:0 auto;
}
.contact-info-panel,
.contact-form-panel{
  background:#fff;
  border:1px solid var(--line);
}
.contact-info-panel{
  padding:clamp(30px,4.5vw,56px);
  align-self:start;
  position:sticky;
  top:calc(var(--header) + 28px);
}
.contact-info-panel h2{
  margin-bottom:clamp(32px,4vw,52px);
  font-size:clamp(26px,3.2vw,44px);
  line-height:1.28;
  color:var(--ink);
}
.contact-info-panel dl{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.contact-info-panel dl div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.contact-info-panel dt{
  font-family:var(--en);
  font-size:clamp(10px,.8vw,12px);
  font-weight:900;
  letter-spacing:.14em;
  color:var(--blue);
}
.contact-info-panel dd{
  color:var(--ink);
  font-size:clamp(13px,1vw,15px);
  font-weight:700;
}
.contact-form-panel{
  padding:clamp(30px,4.5vw,58px);
  width:100%;
}
.contact-form{
  display:grid;
  gap:clamp(22px,2.6vw,34px);
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2vw,28px);
}
.contact-form label{
  display:grid;
  gap:10px;
  font-weight:900;
  color:var(--ink);
}
.contact-form label span{
  font-size:clamp(12px,.95vw,14px);
}
.contact-form b{
  margin-left:8px;
  color:var(--coral);
  font-size:clamp(10px,.8vw,12px);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
  padding:16px 14px;
  color:var(--ink);
  font:inherit;
  font-size:clamp(14px,1vw,16px);
  outline:none;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.contact-form textarea{resize:vertical;min-height:180px}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 16px 34px rgba(0,104,255,.08);
}
.privacy-check{
  display:flex !important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px !important;
  font-weight:700 !important;
}
.privacy-check input{
  width:18px;
  height:18px;
  accent-color:var(--blue);
  box-shadow:none;
}
.privacy-check span{
  color:var(--muted);
  font-size:clamp(12px,.95vw,14px);
}
.contact-submit{
  width:min(280px,100%);
  cursor:pointer;
}
.contact-complete{
  display:none;
  min-height:520px;
  place-content:center;
  justify-items:center;
  text-align:center;
  gap:22px;
}
.contact-complete.is-visible{
  display:grid;
}
.contact-complete h2{
  font-size:clamp(24px,2.6vw,36px);
  font-weight:900;
  line-height:1.4;
  color:var(--ink);
}
.contact-complete p:not(.eyebrow){
  max-width:560px;
  color:var(--muted);
  font-size:clamp(14px,1.05vw,16px);
}
.sp-br{display:none}

.reveal{
  opacity:0;
  transform:translateY(46px) scale(.965);
  filter:blur(14px);
  clip-path:inset(0 0 18% 0);
  transition:
    opacity 1.05s var(--ease),
    transform 1.05s var(--ease),
    filter 1.05s var(--ease),
    clip-path 1.05s var(--ease);
  will-change:opacity,transform,filter,clip-path;
}
.section-label.reveal,
.eyebrow.reveal{
  transform:translateX(-42px);
  clip-path:inset(0 22% 0 0);
}
.service-item.reveal{
  transform:translateX(-70px);
  clip-path:inset(0 12% 0 0);
}
.process-card.reveal{
  transform:perspective(900px) translateY(78px) rotateX(13deg);
  transform-origin:center top;
  clip-path:inset(0 0 28% 0);
}
.case-board-visual.reveal{transform:translateX(-72px) scale(.96)}
.case-row.reveal{transform:translateX(76px);clip-path:inset(0 0 0 18%)}
.company-visual.reveal{
  transform:translateX(-64px) rotate(-2deg) scale(.94);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
}
.hero .reveal:nth-child(2){transition-delay:.08s}
.hero .reveal:nth-child(3){transition-delay:.16s}
.hero .reveal:nth-child(4){transition-delay:.24s}
.principle-card:nth-child(2),
.service-item:nth-child(2),
.process-card:nth-child(2),
.case-row:nth-child(2){transition-delay:.08s}
.principle-card:nth-child(3),
.service-item:nth-child(3),
.process-card:nth-child(3),
.case-row:nth-child(3){transition-delay:.16s}
.service-item:nth-child(4),
.process-card:nth-child(4),
.case-row:nth-child(4){transition-delay:.24s}
.service-item:nth-child(5){transition-delay:.32s}
.service-item:nth-child(6){transition-delay:.4s}

@media(max-width:1120px){
  .site-header{grid-template-columns:auto auto;justify-content:space-between;gap:18px}
  .site-nav{display:none}
  .header-contact{display:none}
  .menu-button{display:flex}
  .mobile-menu{display:grid}
  .section-head,
  .statement-layout,
  .case-board,
  .company{
    grid-template-columns:1fr;
  }
  .keep-line{white-space:normal}
  .statement-body{padding-top:0;max-width:none}
  .principles,
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .process-card{min-height:auto}
  .service-item{grid-template-columns:72px 1fr}
  .service-desc{grid-column:2/3}
  .vision-band{grid-template-columns:1fr}
  .case-board-visual{min-height:320px;border-right:0;border-bottom:1px solid var(--line)}
  .case-row{grid-template-columns:minmax(240px,.8fr) 1fr}
  .company::before{width:100%;height:34%;bottom:auto;clip-path:polygon(0 0,100% 0,100% 74%,0 100%)}
}

@media(max-width:750px){
  .footer-main{
    flex-direction:column;
    align-items:center;
    gap:42px;
  }
  .footer-nav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    gap:24px 12px;
  }
}

@media(max-width:720px){
  :root{--header:70px}
  .sp-br{display:block}
  .op-logo{width:clamp(180px,56vw,280px)}
  .site-header{
    width:100%;
    max-width:100vw;
    padding:0 18px;
  }
  .site-logo{width:104px}
  .header-contact{display:none}
  .hero{min-height:820px;align-items:flex-start}
  .hero-visual{
  }
  .hero-visual img{
    right:-25vw;
    bottom:0;
    width:150vw;
    transform:translate3d(5%,-5%,0) scale(1.1) rotate(-2deg);
    transform-origin:center center;
    transition-duration:10.5s;
  }
  body.hero-motion .hero-visual img{
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  .hero-inner{
    width:calc(100% - 36px);
    margin-left:18px;
    padding-top:132px;
  }
  .hero-title span{font-size:clamp(45px,15vw,82px)}
  .hero-title span,
  .keep-line{white-space:normal}
  .hero-copy{font-size:clamp(15px,4.1vw,16px)}
  .hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
  .button{width:100%}
  .hero-scroll{display:none}
  .section-pad{padding:76px 18px}
  .section-label{margin-bottom:24px}
  .section-title h2,
  .cta-inner h2{font-size:clamp(24px,7vw,36px)}
  .statement-heading h2{font-size:clamp(28px,8vw,42px)}
  .principles{
    margin-top:40px;
    grid-template-columns:1fr;
  }
  .process-grid{grid-template-columns:1fr}
  .principle-card,
  .process-card{min-height:auto;padding:28px}
  .vision-band{padding:80px 18px}
  .vision-copy span{font-size:clamp(40px,14vw,76px)}
  .vision-panel{padding-left:22px}
  .service-item{
    grid-template-columns:58px 1fr;
    gap:18px;
    min-height:auto;
    padding:28px 0;
  }
  .service-icon{grid-row:2;grid-column:1;width:52px;height:52px}
  .service-text{grid-column:2;grid-row:1/span 2}
  .service-desc{grid-column:1/3}
  .case-board{min-height:0}
  .case-row{grid-template-columns:1fr;gap:12px;padding:28px}
  .case-num{font-size:clamp(16px,4.6vw,18px)}
  .contact-hero{
    min-height:640px;
    padding:calc(var(--header) + 72px) 18px 86px;
  }
  .contact-hero-art img{
    right:-78vw;
    bottom:-8vw;
    width:190vw;
  }
  .contact-section{grid-template-columns:1fr;padding-left:18px;padding-right:18px}
  .contact-form-panel{padding:24px 8px}
  .contact-info-panel{position:relative;top:auto}
  .contact-info-panel dl div{grid-template-columns:1fr;gap:6px}
  .form-grid{grid-template-columns:1fr}
  /* iOSの自動ズームを防ぐためフォーム要素を16px固定 */
  .contact-form input,
  .contact-form select,
  .contact-form textarea{font-size:16px}
  .section-label.reveal,
  .eyebrow.reveal,
  .service-item.reveal,
  .case-board-visual.reveal,
  .case-row.reveal,
  .company-visual.reveal{
    transform:translateY(0) scale(1);
    clip-path:inset(0 0 0 0);
  }
  .company-table div{grid-template-columns:1fr;gap:8px}
}