@charset "UTF-8";
/* ============================================================
   トップページ  css/index.css
   ============================================================ */

/* ================= オープニングアニメーション ================= */
body.is-splash{ overflow:hidden; }
.splash{
  position:fixed; inset:0; z-index:2000;
  background: var(--blue);
  display:grid; place-items:center;
  overflow:hidden;
}
.splash.is-leave{ animation: splashOut .8s cubic-bezier(.76,0,.24,1) .1s forwards; }
@keyframes splashOut{ to{ translate:0 -100%; } }
.splash.is-hidden{ display:none; }

/* CMYKバーが横切る */
.splash__bars{ position:absolute; inset:0; }
.splash__bars .bar{
  position:absolute; left:0; width:100%; height:25%;
  translate:-101% 0;
}
.bar--c{ top:0;   background:var(--cyan);    animation: barSweep 1.05s cubic-bezier(.76,0,.24,1) .05s forwards; }
.bar--m{ top:25%; background:var(--magenta); animation: barSweep 1.05s cubic-bezier(.76,0,.24,1) .17s forwards; }
.bar--y{ top:50%; background:var(--yellow);  animation: barSweep 1.05s cubic-bezier(.76,0,.24,1) .29s forwards; }
.bar--b{ top:75%; background:var(--navy);    animation: barSweep 1.05s cubic-bezier(.76,0,.24,1) .41s forwards; }
@keyframes barSweep{
  0%{ translate:-101% 0; }
  45%{ translate:0 0; }
  55%{ translate:0 0; }
  100%{ translate:101% 0; }
}

.splash__stage{ position:relative; text-align:center; padding:0 24px; }
.splash__regmark{
  position:absolute; left:50%; top:50%; translate:-50% -62%;
  width: clamp(140px, 26vw, 230px); color:#fff; opacity:0;
  animation: regIn .5s ease .95s forwards, regOut .45s ease 1.75s forwards;
}
.splash__regmark svg{ width:100%; height:auto; animation: regSpin 1.4s cubic-bezier(.5,0,.3,1) .95s forwards; }
@keyframes regIn{ from{ opacity:0; scale:.4; } to{ opacity:.9; scale:1; } }
@keyframes regSpin{ from{ rotate:0deg; } to{ rotate:200deg; } }
@keyframes regOut{ to{ opacity:0; scale:1.6; } }

.splash__logo{
  width: clamp(240px, 44vw, 460px); height:auto;
  opacity:0; scale:.6; filter: blur(14px);
  animation: logoStamp .7s cubic-bezier(.2,1.4,.3,1) 1.55s forwards;
}
@keyframes logoStamp{
  0%{ opacity:0; scale:1.7; filter: blur(14px); }
  60%{ opacity:1; scale:.96; filter: blur(0); }
  100%{ opacity:1; scale:1; filter: blur(0); }
}
.splash__copy{
  margin-top: 26px;
  color:#fff; font-weight:700;
  font-size: clamp(15px, 2.6vw, 21px);
  letter-spacing:.5em; text-indent:.5em;
  display:flex; justify-content:center;
}
.splash__copy span{
  opacity:0; translate:0 16px;
  animation: charIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.splash__copy span:nth-child(1){ animation-delay:2.05s; }
.splash__copy span:nth-child(2){ animation-delay:2.12s; }
.splash__copy span:nth-child(3){ animation-delay:2.19s; }
.splash__copy span:nth-child(4){ animation-delay:2.26s; }
.splash__copy span:nth-child(5){ animation-delay:2.33s; }
.splash__copy span:nth-child(6){ animation-delay:2.40s; }
.splash__copy span:nth-child(7){ animation-delay:2.47s; }
.splash__copy span:nth-child(8){ animation-delay:2.54s; }
.splash__copy span:nth-child(9){ animation-delay:2.61s; }
.splash__copy span:nth-child(10){ animation-delay:2.68s; }
.splash__copy span:nth-child(11){ animation-delay:2.75s; }
@keyframes charIn{ to{ opacity:1; translate:0 0; } }

.splash__skip{
  position:absolute; right:26px; bottom:26px;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5);
  border-radius:999px; padding:.55em 1.6em;
  font-family:var(--font-en); letter-spacing:.22em; font-size:12px;
  transition: background .3s, color .3s;
}
.splash__skip:hover{ background:#fff; color:var(--blue); }

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; align-items:center;
  padding: calc(var(--header-h) + 30px) 0 90px;
  overflow:hidden;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(0,160,233,.4), transparent 62%),
    radial-gradient(900px 500px at -10% 110%, rgba(15,30,61,.55), transparent 60%),
    linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 48%, var(--blue-bright) 100%);
}

/* --- 動く網点（halftone dots） --- */
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.dots{
  position:absolute; inset:-60px;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  animation: dotsDrift 30s linear infinite;
  mask-image: radial-gradient(closest-side at 72% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 72% 40%, #000 30%, transparent 100%);
}
.dots--2{
  background-image: radial-gradient(rgba(255,255,255,.09) 2.6px, transparent 2.7px);
  background-size: 54px 54px;
  animation-duration: 46s; animation-direction: reverse;
  mask-image: radial-gradient(closest-side at 18% 80%, #000 26%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 18% 80%, #000 26%, transparent 100%);
}
@keyframes dotsDrift{ to{ translate: 52px 26px; } }

/* --- 流れる線（インクの流れ） --- */
.hero__waves{ position:absolute; inset:0; width:100%; height:100%; }
.wave{
  stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray: 14 18;
  animation: waveFlow 9s linear infinite;
}
.wave--1{ stroke:rgba(0,160,233,.65); }
.wave--2{ stroke:rgba(255,212,0,.5); animation-duration:12s; animation-direction:reverse; }
.wave--3{ stroke:rgba(255,255,255,.32); animation-duration:15s; }
@keyframes waveFlow{ to{ stroke-dashoffset:-320; } }

/* --- 浮遊するトンボ（レジストレーションマーク） --- */
.reg{ position:absolute; color:rgba(255,255,255,.4); animation: floaty 7s ease-in-out infinite; }
.reg svg{ width:100%; height:auto; }
.reg--1{ width:64px; top:16%; right:8%; }
.reg--2{ width:40px; bottom:20%; left:6%; animation-delay:-3.2s; color:rgba(255,212,0,.55); }
@keyframes floaty{
  0%,100%{ translate:0 0; rotate:0deg; }
  50%{ translate:0 -20px; rotate:12deg; }
}

/* --- CMYKチップ --- */
.cmyk-chip{
  position:absolute; top:22%; left:42%;
  display:flex; gap:8px; animation: floaty 9s ease-in-out -2s infinite;
}
.cmyk-chip i{ width:14px; height:14px; border-radius:4px; display:block; }
.cmyk-chip i:nth-child(1){ background:var(--cyan); }
.cmyk-chip i:nth-child(2){ background:var(--magenta); }
.cmyk-chip i:nth-child(3){ background:var(--yellow); }
.cmyk-chip i:nth-child(4){ background:var(--navy); }

/* --- HERO レイアウト --- */
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr .95fr;
  align-items:center; gap: clamp(20px, 4vw, 50px);
}
.hero__lead{
  font-family:var(--font-en); font-weight:600;
  color:var(--yellow); letter-spacing:.34em;
  font-size: clamp(11px, 1.5vw, 14px);
  margin-bottom: 18px;
  display:flex; align-items:center; gap:1em;
}
.hero__lead::before{ content:""; width:3em; height:2px; background:var(--yellow); flex:none; }
.hero__title{
  color:var(--white); font-weight:900;
  font-size: clamp(40px, 6.6vw, 76px);
  line-height:1.22; letter-spacing:.06em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .in{
  display:inline-block; translate:0 110%;
  animation: lineUp 1s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__title .line:nth-child(2) .in{ animation-delay:.14s; }
@keyframes lineUp{ to{ translate:0 0; } }
.hero__title .dot{ color:var(--yellow); font-style:normal; }
.hero__desc{
  margin-top: 26px;
  color:var(--text-on-blue);
  font-size: clamp(14px, 1.7vw, 16px);
  text-shadow: 0 1px 14px rgba(15,30,61,.4);
}
.hero__btns{ margin-top: 36px; display:flex; gap:16px; flex-wrap:wrap; }

.hero__visual{ position:relative; }
.hero__stage{
  position:relative;
  height: clamp(380px, 46vw, 560px);
}
.hv{
  position:absolute; width:auto;
  filter: drop-shadow(0 26px 36px rgba(10,22,48,.55));
  animation: itemsFloat 7s ease-in-out infinite;
}
.hv--1{ height: 86%; left: 4%; top: 10%; z-index:2; }
.hv--2{ height: 92%; right: 6%; top: 0; z-index:1; animation-delay: -2.8s; }
@keyframes itemsFloat{
  0%,100%{ translate:0 0; rotate:0deg; }
  50%{ translate:0 -16px; rotate:.8deg; }
}
.hv-ring{
  position:absolute; right: 12%; bottom: 4%;
  width: 200px; height: 200px; border-radius:50%;
  border: 2px dashed rgba(255,212,0,.55);
  animation: ringSpin 24s linear infinite;
}
@keyframes ringSpin{ to{ rotate:360deg; } }
.hv-dots{
  position:absolute; left: -6%; bottom: 10%;
  width: 150px; height: 110px;
  background-image: radial-gradient(rgba(255,255,255,.5) 2px, transparent 2.4px);
  background-size: 18px 18px;
  mask-image: linear-gradient(#000, transparent);
  -webkit-mask-image: linear-gradient(#000, transparent);
}

/* --- SCROLL --- */
.hero__scroll{
  position:absolute; left:50%; bottom:22px; translate:-50% 0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--white); font-family:var(--font-en);
  font-size:10.5px; letter-spacing:.32em;
}
.hero__scroll .bar{
  width:2px; height:54px; background:rgba(255,255,255,.3);
  position:relative; overflow:hidden; border-radius:2px;
}
.hero__scroll .bar::after{
  content:""; position:absolute; left:0; top:-40%;
  width:100%; height:40%; background:var(--yellow);
  animation: scrollDrop 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scrollDrop{ 0%{ top:-40%; } 60%,100%{ top:110%; } }

/* ================= MARQUEE ================= */
.marquee{
  background: var(--navy-deep);
  border-block: 1px solid rgba(255,255,255,.08);
  overflow:hidden; padding: 16px 0;
}
.marquee__track{ display:flex; width:max-content; animation: marquee 26s linear infinite; }
.marquee__track span{
  font-family:var(--font-en); font-weight:600;
  font-size: clamp(15px, 2.2vw, 21px); letter-spacing:.24em;
  color:transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55);
  white-space:nowrap; padding-right:.6em;
}
.marquee__track i{ font-style:normal; -webkit-text-stroke:0; color:var(--yellow); font-size:.55em; vertical-align:.25em; }
@keyframes marquee{ to{ translate:-50% 0; } }

/* ================= SERVICE ================= */
.service{
  position:relative;
  background:
    radial-gradient(800px 400px at 110% 10%, rgba(0,160,233,.22), transparent 60%),
    var(--blue);
  overflow:hidden;
}
.service::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.4px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: linear-gradient(160deg, transparent 45%, #000);
  -webkit-mask-image: linear-gradient(160deg, transparent 45%, #000);
}
.service__intro{
  color:var(--text-on-blue);
  margin: -14px 0 46px;
}
.service__grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 30px);
}
.svc-card{
  position:relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  overflow:hidden;
}
.svc-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:5px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow), var(--navy));
  transform: scaleX(0); transform-origin:left;
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
.svc-card:hover{ transform: translateY(-10px); box-shadow: 0 22px 44px rgba(10,22,48,.32); }
.svc-card:hover::after{ transform: scaleX(1); }
.svc-card__num{
  position:absolute; top:14px; right:20px;
  font-family:var(--font-en); font-weight:700;
  font-size: 46px; line-height:1;
  color:transparent; -webkit-text-stroke:1.4px var(--line);
}
.svc-card__fig{ margin-bottom: 8px; }
.svc-card__fig img{ width:100%; height:auto; }
.svc-card h3{
  font-size: clamp(19px, 2.2vw, 22px); font-weight:900; color:var(--navy);
  letter-spacing:.08em;
}
.svc-card h3 small{
  display:block; font-family:var(--font-en); font-weight:600;
  font-size:11px; letter-spacing:.26em; color:var(--blue-bright);
  margin-top:4px;
}
.svc-card p{ font-size:14px; margin-top:14px; flex:1; }
.svc-card__link{
  margin-top:20px;
  display:inline-flex; align-items:center; gap:.7em;
  font-weight:700; font-size:14px; color:var(--blue);
  letter-spacing:.1em;
}
.svc-card__link svg{ width:14px; height:14px; transition: translate .3s; }
.svc-card:hover .svc-card__link svg{ translate:5px 0; }

/* ================= ITEMS ================= */
.items{ position:relative; overflow:hidden; }
.items::before{ /* ロゴ透かし */
  content:""; position:absolute; left:-7%; top:-60px;
  width: 560px; height: 200px;
  background:url(../images/logo_blue.png) no-repeat center/contain;
  opacity:.05; pointer-events:none;
}
.items__grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.item-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
  display:flex; flex-direction:column;
}
.item-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: var(--blue-bright);
}
.item-card figure{
  height: 190px;
  background:
    radial-gradient(circle at 30% 20%, #fff, var(--paper));
  display:grid; place-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  position:relative;
}
.item-card figure::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(43,85,160,.12) 1.2px, transparent 1.3px);
  background-size:16px 16px;
  mask-image: linear-gradient(120deg, #000 10%, transparent 55%);
  -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 55%);
}
.item-card figure img{
  max-height: 156px; width:auto; max-width: 86%;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 8px 14px rgba(15,30,61,.18));
}
.item-card:hover figure img{ transform: scale(1.07) rotate(-1.2deg); }
.item-card h3{
  padding: 18px 22px 0;
  font-size:18px; font-weight:900; color:var(--navy); letter-spacing:.06em;
}
.item-card h3 small{
  font-family:var(--font-en); font-weight:600; font-size:10px;
  letter-spacing:.26em; color:var(--blue-bright); margin-left:10px;
}
.item-card p{ padding: 8px 22px 22px; font-size:13.5px; color:#475064; flex:1; }
.items__more{ margin-top: clamp(34px,5vw,50px); text-align:center; }

/* ================= REASON ================= */
.reason{
  position:relative; overflow:hidden;
  background: linear-gradient(150deg, var(--navy-deep), var(--blue-deep) 60%, var(--blue));
  color:var(--white);
}
.reason__bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(0,160,233,.2) 2px, transparent 2.4px),
    radial-gradient(rgba(255,255,255,.07) 1.4px, transparent 1.5px);
  background-size: 70px 70px, 24px 24px;
  animation: dotsDrift 40s linear infinite;
}
.reason__grid{
  position:relative;
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(18px, 2.6vw, 30px);
}
.reason-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  transition: background .4s, transform .4s;
}
.reason-card:hover{ background: rgba(255,255,255,.12); transform: translateY(-6px); }
.reason-card__icon{
  width:74px; height:74px; border-radius:22px;
  background: linear-gradient(135deg, var(--cyan), var(--blue-bright));
  color:#fff; display:grid; place-items:center;
  box-shadow: 0 10px 22px rgba(0,160,233,.35);
  margin-bottom: 20px;
}
.reason-card:nth-child(2) .reason-card__icon{ background: linear-gradient(135deg, var(--magenta), #ff5fae); box-shadow: 0 10px 22px rgba(228,0,127,.35); }
.reason-card:nth-child(3) .reason-card__icon{ background: linear-gradient(135deg, var(--yellow), #ffb800); box-shadow: 0 10px 22px rgba(255,212,0,.3); color:var(--navy); }
.reason-card__icon svg{ width:40px; height:40px; }
.reason-card h3{
  font-family:var(--font-en); font-weight:600; font-size:13px;
  letter-spacing:.3em; color:rgba(255,255,255,.7);
  display:flex; flex-direction:column; gap:4px;
}
.reason-card h3 em{
  font-style:normal; font-family:var(--font-jp); font-weight:900;
  font-size:24px; letter-spacing:.12em; color:#fff;
}
.reason-card p{ margin-top:14px; font-size:14px; color:var(--text-on-blue); }

.reason__counts{
  margin-top: clamp(40px, 6vw, 60px);
  display:grid; grid-template-columns: repeat(3,1fr);
  text-align:center;
  border-block: 1px solid rgba(255,255,255,.18);
}
.reason__counts li{ padding: 26px 8px; position:relative; }
.reason__counts li + li::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  height:56%; width:1px; background:rgba(255,255,255,.18);
}
.reason__counts .num{
  font-family:var(--font-en); font-weight:700;
  font-size: clamp(40px, 6vw, 62px); line-height:1;
  background: linear-gradient(180deg, #fff, #9cc3ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.reason__counts .unit{ display:block; margin-top:8px; font-size:13px; letter-spacing:.18em; color:var(--text-on-blue); }

/* ================= ECO ================= */
.eco__grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.eco-card{
  background:var(--white);
  border-radius: var(--radius);
  border:1px solid var(--line);
  padding: 30px 26px;
  text-align:center;
  transition: transform .4s, box-shadow .4s;
}
.eco-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.eco-card figure{
  height: 96px; display:grid; place-items:center; margin-bottom:16px;
}
.eco-card figure img{ max-height:92px; width:auto; }
.eco-card h3{ font-size:17px; font-weight:900; color:var(--navy); letter-spacing:.08em; }
.eco-card p{ margin-top:10px; font-size:13.5px; color:#475064; text-align:left; }

/* ================= NEWS ================= */
.news__inner{
  display:grid; grid-template-columns: 280px 1fr;
  gap: clamp(26px, 5vw, 70px);
  align-items:start;
}
.news__head p{ font-size:14px; color:#475064; margin-top:-20px; }
.news__list li + li{ border-top:1px dashed var(--line); }
.news__list a{
  display:grid;
  grid-template-columns: auto auto 1fr;
  align-items:center; gap: 18px;
  padding: 20px 10px;
  transition: background .3s;
  border-radius:10px;
}
.news__list a:hover{ background: var(--paper); }
.news__list time{
  font-family:var(--font-en); font-weight:600; font-size:14px;
  color:var(--blue); letter-spacing:.06em;
}
.news__list .cat{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--blue); border:1px solid var(--blue-bright);
  border-radius:999px; padding:3px 14px; white-space:nowrap;
}
.news__list .ttl{
  font-size:14.5px; font-weight:500; color:var(--ink);
  position:relative; padding-right:26px;
}
.news__list .ttl::after{
  content:""; position:absolute; right:4px; top:50%;
  width:8px; height:8px;
  border-top:2px solid var(--blue); border-right:2px solid var(--blue);
  translate:0 -50%; rotate:45deg;
  transition: right .3s;
}
.news__list a:hover .ttl::after{ right:-2px; }

/* ================= COMPANY DIGEST ================= */
.company-digest{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 360px at -10% 0%, rgba(0,160,233,.25), transparent 60%),
    var(--blue);
  color:var(--white);
}
.company-digest::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.5px);
  background-size:24px 24px;
  mask-image: linear-gradient(40deg, #000 20%, transparent 60%);
  -webkit-mask-image: linear-gradient(40deg, #000 20%, transparent 60%);
}
.company-digest__inner{
  position:relative;
  display:grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items:center;
}
.company-digest__photo{ position:relative; }
.company-digest__photo img{
  width:100%; height:auto; border-radius: var(--radius);
  background: linear-gradient(160deg, #eaf1ff, #cfe0ff);
  padding: 22px 16px;
  box-shadow: var(--shadow);
  position:relative; z-index:1;
}
.company-digest__photo .frame{
  position:absolute; inset:-16px auto auto -16px;
  width:60%; height:60%;
  border-top:3px solid var(--yellow); border-left:3px solid var(--yellow);
  border-radius: 14px 0 0 0;
}
.company-digest__photo::after{
  content:""; position:absolute; right:-16px; bottom:-16px;
  width:60%; height:60%;
  border-bottom:3px solid var(--cyan); border-right:3px solid var(--cyan);
  border-radius: 0 0 14px 0;
}
.company-digest .catch{
  font-size: clamp(22px, 3.2vw, 30px); font-weight:900;
  letter-spacing:.14em; margin: -16px 0 16px;
}
.company-digest__body > p{ color:var(--text-on-blue); font-size:14.5px; }
.company-digest__info{ margin: 24px 0 30px; border-top:1px solid rgba(255,255,255,.2); }
.company-digest__info > div{
  display:grid; grid-template-columns: 110px 1fr;
  padding: 12px 4px;
  border-bottom:1px solid rgba(255,255,255,.2);
  font-size:14px;
}
.company-digest__info dt{ font-weight:700; color:var(--yellow); letter-spacing:.12em; }

/* ================= CTA ================= */
.cta{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--navy-deep), var(--blue-deep) 55%, var(--blue));
  color:var(--white);
  padding: clamp(70px, 11vw, 130px) 0;
  text-align:center;
}
.cta__deco span{
  position:absolute; border-radius:50%;
  filter: blur(2px); opacity:.5;
  animation: ctaFloat 11s ease-in-out infinite;
}
.cta__deco .c1{ width:200px; height:200px; left:-60px; top:-40px; background:radial-gradient(circle at 30% 30%, var(--cyan), transparent 70%); }
.cta__deco .c2{ width:280px; height:280px; right:-90px; bottom:-110px; background:radial-gradient(circle at 30% 30%, var(--magenta), transparent 70%); animation-delay:-4s; }
.cta__deco .c3{ width:140px; height:140px; right:16%; top:-50px; background:radial-gradient(circle at 30% 30%, var(--yellow), transparent 70%); animation-delay:-7s; }
@keyframes ctaFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 26px; } }
.cta__inner{ position:relative; }
.cta__title{
  font-size: clamp(24px, 3.6vw, 36px); font-weight:900; letter-spacing:.1em;
}
.cta__title .en{
  display:block; font-family:var(--font-en); font-weight:700;
  font-size: clamp(13px, 1.6vw, 15px); letter-spacing:.4em;
  color:var(--yellow); margin-bottom:14px;
}
.cta p{ margin-top:18px; color:var(--text-on-blue); font-size:14.5px; }
.cta__btns{
  margin-top: 40px;
  display:flex; justify-content:center; align-items:center;
  gap: clamp(18px, 4vw, 46px); flex-wrap:wrap;
}
.cta__tel{ display:flex; flex-direction:column; gap:6px; }
.cta__tel small{ font-size:12px; letter-spacing:.08em; color:var(--text-on-blue); }
.cta__tel span{
  font-family:var(--font-en); font-weight:700;
  font-size: clamp(30px, 4.6vw, 44px); letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:12px;
  transition: color .3s;
}
.cta__tel span svg{ width:.8em; height:.8em; color:var(--yellow); }
.cta__tel:hover span{ color:var(--yellow); }

/* ================= レスポンシブ ================= */
@media (max-width: 1024px){
  .hero__stage{ height: clamp(340px, 44vw, 480px); }
}
@media (max-width: 860px){
  .hero{ min-height: auto; padding-bottom: 110px; }
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual{ order:2; margin-top: 18px; }
  .hero__stage{ height: clamp(320px, 78vw, 420px); max-width: 480px; margin-inline:auto; }
  .pc{ display:none; }
  .service__grid,
  .reason__grid,
  .eco__grid{ grid-template-columns: 1fr; }
  .items__grid{ grid-template-columns: repeat(2, 1fr); }
  .news__inner{ grid-template-columns: 1fr; gap: 8px; }
  .news__head p{ margin: -26px 0 8px; }
  .news__list a{ grid-template-columns: auto auto; }
  .news__list .ttl{ grid-column: 1 / -1; padding-top: 2px; }
  .company-digest__inner{ grid-template-columns: 1fr; }
  .company-digest__photo{ max-width: 420px; margin-inline:auto; }
  .reason__counts{ grid-template-columns: 1fr; border:0; }
  .reason__counts li{ border-bottom:1px solid rgba(255,255,255,.18); }
  .reason__counts li:first-child{ border-top:1px solid rgba(255,255,255,.18); }
  .reason__counts li + li::before{ content:none; }
}
@media (max-width: 560px){
  .items__grid{ grid-template-columns: 1fr; }
  .item-card figure{ height: 170px; }
  .hero__btns .btn{ width:100%; }
  .cta__btns{ flex-direction:column; }
}