/*
Theme Name: calend
Theme URI: https://calend.co.jp
Author: calend
Version: 4.0.0
*/

/* ============================================================
   calend — style.css (WordPress テーマ版)
   clnd3 デザインをベースにリニューアル
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-2:#F4F1EA;
  --bg-3:#EAF1F2;
  --ink:#0F1A1D;
  --ink-soft:#445257;
  --line:#E3E6E5;
  --line-2:#CDD6D7;

  --teal:#1F5560;
  --teal-deep:#0E3A44;
  --teal-mid:#2E7A88;
  --teal-soft:#B6D2D6;
  --teal-pale:#E4EEEF;

  --logo-cyan:#00BBFF;
  --logo-magenta:#FF00FF;
  --logo-yellow:#FDB400;
  --logo-green:#00B900;

  --jp:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --jp-display:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
  --en:"Inter", system-ui, sans-serif;
  --display-en:"Inter", system-ui, sans-serif; /* Archivo 削除済み・--en と同値 */
  --brand:"Quicksand", "Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --shell-pad:clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--ink); font-family:var(--jp); font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{overflow-x:hidden; line-height:1.7;}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul, ol{list-style:none}
::selection{background:var(--teal); color:#fff}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--teal); color:#fff;
  display:grid; place-items:center;
  transition:opacity .2s ease, transform .25s cubic-bezier(.77,0,.18,1);
}
.loader.is-out{ transform:translateY(-100%); pointer-events:none; }
.loader__count{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--en); font-weight:900; font-size:clamp(80px,18vw,240px);
  letter-spacing:-.04em; line-height:1; display:flex; align-items:baseline; gap:.05em;
}
.loader__pct{ font-size:.35em; font-weight:700; opacity:.6 }
.loader__bar{
  position:absolute; left:8vw; right:8vw; bottom:10vh; height:2px; background:rgba(255,255,255,.15);
}
.loader__bar-fill{ width:0%; height:100%; background:var(--teal-mid); transition:width .15s linear;}
.loader__shapes{ position:absolute; left:8vw; top:8vh; display:flex; gap:8px; }
.loader__shape{ width:14px; height:14px; background:var(--c); border-radius:2px; }

/* ============================================================
   HEADER
   ============================================================ */
.g-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(16px, 3vw, 40px);
  padding:14px var(--shell-pad);
  background:rgba(250,248,243,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, padding .35s ease;
}
.g-header.is-stuck{
  background:rgba(255,255,255,.95);
  border-bottom-color:var(--line);
  padding-top:10px; padding-bottom:10px;
}
.g-header__brand{ display:flex; align-items:center; gap:12px; }
.g-header__mark{ width:28px; height:28px; display:block; }
.g-header__name{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.g-header__name-en{ font-family:var(--brand); font-weight:600; font-size:18px; letter-spacing:.22em; color:#222;}
.g-header__name-ja{ font-family:var(--jp); font-weight:700; font-size:10px; letter-spacing:.12em;}

.g-nav{ justify-self:center; }
.g-nav ul{ display:flex; gap:clamp(14px, 2.4vw, 36px); }
.g-nav a{
  display:flex; align-items:baseline; gap:6px; padding:6px 0;
  position:relative; transition: opacity .25s;
  white-space: nowrap;
}
.g-nav__num{ font-family:var(--mono); font-size:10px; opacity:.55; }
.g-nav__en{ font-family:var(--en); font-weight:700; font-size:12px; letter-spacing:.08em;}
.g-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:currentColor;
  transition:right .35s cubic-bezier(.77,0,.18,1);
}
.g-nav a:hover::after{ right:0; }

.g-header__cta{
  display:inline-flex; align-items:center;
  font-family:var(--en); font-weight:700; font-size:12px; letter-spacing:.08em;
  padding:6px 0; position:relative;
  transition: opacity .25s;
}
.g-header__cta::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:currentColor;
  transition:right .35s cubic-bezier(.77,0,.18,1);
}
.g-header__cta:hover::after{ right:0; }
.g-header__cta-arr{ display:none; }

/* ハンバーガー */
.g-hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:6px;
  z-index:200; margin-left:auto;
}
.g-hamburger span{
  display:block; width:100%; height:2px; background:var(--ink);
  transition: transform .3s, opacity .3s;
}
.g-hamburger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.g-hamburger.is-open span:nth-child(2){ opacity:0; }
.g-hamburger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ドロワー */
.g-drawer{
  position:fixed; inset:0; z-index:100;
  background:var(--teal); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:translateY(-100%);
  transition: transform .6s cubic-bezier(.77,0,.18,1);
  pointer-events:none;
  padding-bottom:80px;
}
.g-drawer.is-open{ transform:translateY(0); pointer-events:auto; }
.g-drawer__close{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  cursor:pointer; background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.5);
  border-radius:999px; color:#fff; font-family:var(--en); font-weight:700;
  font-size:13px; letter-spacing:.12em; padding:12px 28px; line-height:1;
  transition: background .25s;
}
.g-drawer__close:hover{ background:rgba(255,255,255,.25); }
.g-drawer__close::before{ content:"✕"; font-size:11px; }
.g-drawer__nav{ text-align:center; }
.g-drawer__nav ul{ list-style:none; display:flex; flex-direction:column; gap:16px; margin:0; }
.g-drawer__nav li a{
  display:flex; align-items:baseline; gap:12px; justify-content:center;
  font-family:var(--en); font-weight:900; font-size:clamp(26px, 6vw, 44px); letter-spacing:.08em;
  color:#fff; transition: opacity .2s;
}
.g-drawer__nav li a:hover{ opacity:.7; }
.g-drawer__nav li a em{
  font-style:normal; font-family:var(--jp); font-size:.38em; font-weight:700;
  opacity:.7; letter-spacing:.12em; align-self:center;
}
.g-drawer__cta{
  display:inline-flex; align-items:center;
  margin-top:32px; color:#fff;
  font-family:var(--en); font-weight:900; font-size:clamp(26px, 6vw, 44px); letter-spacing:.08em;
  transition: opacity .2s;
}
.g-drawer__cta:hover{ opacity:.7; }
.g-drawer__cta em{
  font-style:normal; font-family:var(--jp); font-size:.38em; font-weight:700;
  opacity:.7; letter-spacing:.12em; align-self:center; margin-left:12px;
}
.g-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none;
  transition: opacity .4s;
}
.g-overlay.is-open{ opacity:1; pointer-events:auto; }

@media (max-width: 1100px){
  .g-nav, .g-header__cta{ display:none; }
  .g-hamburger{ display:flex; }
  .g-header{ grid-template-columns: auto 1fr auto; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh;
  padding:0 var(--shell-pad);
  display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
  background:var(--bg);
}
.hero__stage{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  visibility: hidden; /* ローダー退場まで非表示（CLSを防止） */
  transition: visibility 0s linear 0s;
}
body.is-loaded .hero__stage{
  visibility: visible;
}
.hero__tile{ position:absolute; display:block; will-change:transform; }
.hero__tile--cyan{
  left:0; top:0; width:36%; height:46%; background:var(--logo-cyan);
  animation: tileIn .9s cubic-bezier(.16,1,.3,1) .2s both;
  transform-origin: top left;
}
.hero__tile--pink{
  right:0; top:0; width:18%; height:60%; background:var(--logo-magenta);
  animation: tileIn .9s cubic-bezier(.16,1,.3,1) .35s both;
  transform-origin: top right;
}
.hero__tile--green{
  left:34%; bottom:0; width:14%; height:34%; background:var(--logo-green);
  animation: tileIn .85s cubic-bezier(.16,1,.3,1) .55s both;
  transform-origin: bottom center;
}
.hero__tile--orange{
  right:14%; bottom:8%; width:10%; height:16%; background:var(--logo-cyan);
  animation: tileIn .8s cubic-bezier(.16,1,.3,1) .7s both;
  transform-origin: bottom right;
}
.hero__tile--ink{
  left:8%; bottom:6%; width:24%; height:8%; background:var(--logo-yellow);
  animation: tileIn .8s cubic-bezier(.16,1,.3,1) .85s both;
  transform-origin: bottom left;
}
.hero__triangle{
  position:absolute; width:14vw; height:18vw; left:24%; top:46%;
  fill:var(--logo-magenta); opacity:.92;
  animation: triIn 1s cubic-bezier(.34,1.56,.64,1) 1s both;
}
.hero__triangle--2{
  left:auto; right:0; bottom:0; top:auto; width:10vw; height:14vw;
  fill:var(--logo-yellow); opacity:.92;
  animation: triIn 1s cubic-bezier(.34,1.56,.64,1) 1.15s both;
}
@keyframes tileIn{ from { transform: scale(0,1); } to { transform: scale(1,1); } }
@keyframes triIn{ from { transform: scale(0) rotate(20deg); opacity:0; } to { transform: scale(1) rotate(0); opacity:1; } }

.hero__type{
  position:relative; z-index:2; max-width:min(1400px, 100%); padding-top:80px;
}
.hero__title{
  font-family:var(--jp); font-weight:900;
  font-size: clamp(40px, 9vw, 140px);
  line-height:.92; letter-spacing:-.03em; color:var(--ink);
  text-shadow: 5px 5px 0 var(--bg);
}
.hero__line{ display:block; }
.hero__line--1{ animation: lineRise .9s cubic-bezier(.16,1,.3,1) 1.1s both; }
.hero__line--2{
  animation: lineRise .9s cubic-bezier(.16,1,.3,1) 1.3s both;
  padding-left: clamp(40px, 12vw, 220px);
}
@keyframes lineRise{
  from { opacity:0; transform: translateY(60px) rotate(-2deg); }
  to { opacity:1; transform: translateY(0) rotate(0); }
}
.hero__sub{
  margin-top:clamp(20px,3vw,40px);
  display:flex; align-items:center; gap:14px;
  font-family:var(--en); font-weight:700; font-size:clamp(12px,1.2vw,16px);
  letter-spacing:.16em; color:var(--ink);
  animation: fadeUp .7s ease 1.6s both;
}
.hero__sub-bar{ display:block; width:48px; height:2px; background:var(--ink); }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.hero__brand{
  display:flex; align-items:center; gap:18px; margin-top:clamp(28px,4vw,60px);
  animation: fadeUp .7s ease 1.6s both; flex-wrap:wrap;
}
.hero__brand-en{
  font-family:var(--brand); font-weight:600;
  font-size:clamp(20px, 2.4vw, 34px); letter-spacing:.22em; line-height:1; color:#333;
}
.hero__brand-bar{ display:inline-block; width:48px; height:2px; background:var(--ink); }
.hero__brand-tag{ font-family:var(--jp); font-weight:700; font-size:clamp(12px, 1.4vw, 16px); letter-spacing:.14em; line-height:1.5; color:var(--ink); }


/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:30px 0; white-space:nowrap; position:relative;
}
.marquee__track{
  display:inline-flex; align-items:center; gap:36px;
  animation: marq 30s linear infinite; will-change:transform;
}
.marquee__track--rev{ animation-direction: reverse; animation-duration: 22s;}
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee__big{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(22px, 3vw, 48px); letter-spacing:-.02em; line-height:1;
  color:var(--ink); display:inline-flex; align-items:baseline; gap:.4em;
}
.marquee__big small{
  font-family:var(--mono); font-weight:500;
  font-size:.28em; letter-spacing:.18em; color:var(--ink-soft);
}
.marquee__bullet{
  width:14px; height:14px; background:var(--teal-mid); display:inline-block; flex-shrink:0;
  transform:rotate(45deg);
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.sec-head{
  padding: 80px var(--shell-pad) 40px;
  display:grid; grid-template-columns: 1fr auto; align-items:end; gap:24px;
  position: relative; z-index: 1;
}
.sec-head__num{ display:none; }
.sec-head__ttl{ display:flex; flex-direction:column; gap:6px; line-height:.9; }
.sec-head__en{
  font-family:var(--en); font-weight:900;
  font-size:clamp(44px, 7vw, 110px); letter-spacing:-.04em;
}
.sec-head__en a{ color:inherit; }
.sec-head .ring-btn{
  align-self: end;
  padding-bottom: 8px;
}

/* sec-head内のring-btnをスマホで非表示 */
@media (max-width: 600px) {
  .sec-head .ring-btn {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .sec-head{
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ============================================================
   SERVICE — sticky stacking panels
   ============================================================ */
.service{ background:var(--bg); padding-bottom:0; }
.service__stack{ position:relative; }
.svc{
  height:100vh; min-height:680px;
  position:sticky; top:0;
  display:flex; align-items:stretch; overflow:hidden;
}
.svc__sticky{
  width:100%; background:var(--bg); color:var(--ink);
  border-top:1px solid var(--line);
  padding:80px var(--shell-pad) 60px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "num num" "main art";
  gap:32px; position:relative;
}
.svc__num{
  grid-area:num;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--ink-soft);
  border:1px solid var(--line); padding:6px 12px; border-radius:999px; justify-self:start;
}
.svc__main{ grid-area:main; display:flex; flex-direction:column; gap:36px; align-self:start; }
.svc__title-block{ display:flex; flex-direction:column; gap:6px; }
.svc__ttl-jp{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(32px, 4.5vw, 72px); line-height:1.0; letter-spacing:-.02em;
}
.svc__ttl-accent{
  font-family:var(--jp-display); font-style:italic; font-weight:800; color:var(--svc-accent);
}
.svc__ttl-en{
  font-family:var(--en); font-weight:700; font-size:14px; letter-spacing:.15em; color:var(--ink-soft);
}
.svc__body{ max-width:560px; }
.svc__lead{ font-size:clamp(15px, 1.15vw, 18px); line-height:1.85; font-weight:500; }
.svc__tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:6px; }
.svc__tags li{
  font-family:var(--mono); font-size:11px; padding:5px 10px;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:2px;
}
.svc__art{
  grid-area:art; position:relative;
  display:flex; align-items:center; justify-content:center; min-height:240px;
}
.svc-glyph{ position:relative; width:100%; max-width:520px; aspect-ratio:1/1; }

/* Service 01: Window */
.svc-glyph--system{ display:grid; grid-template-columns: 1.4fr 1fr; gap:16px; }
.svc-glyph__win{
  background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column;
  box-shadow: 14px 14px 0 var(--svc-accent); position:relative; overflow:hidden;
}
.svc-glyph__win-bar{
  display:flex; align-items:center; gap:6px; padding:10px 12px;
  border-bottom:1px solid var(--line); background:var(--bg-2);
}
.svc-glyph__win-bar i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.svc-glyph__win-bar i:nth-child(1){ background:var(--logo-magenta); }
.svc-glyph__win-bar i:nth-child(2){ background:var(--logo-yellow); }
.svc-glyph__win-bar i:nth-child(3){ background:var(--logo-green); }
.svc-glyph__win-body{ flex:1; padding:14px; display:flex; flex-direction:column; gap:12px; }
.svc-glyph__bars{ display:flex; align-items:flex-end; gap:8px; flex:1; }
.svc-glyph__bars span{ flex:1; background:var(--teal-mid); animation: barRise 2.2s cubic-bezier(.7,0,.3,1) infinite alternate; transform-origin:bottom; }
.svc-glyph__bars span:nth-child(1){ height:40%; animation-delay:0s; }
.svc-glyph__bars span:nth-child(2){ height:75%; animation-delay:.15s; background:var(--svc-accent); }
.svc-glyph__bars span:nth-child(3){ height:55%; animation-delay:.3s; }
.svc-glyph__bars span:nth-child(4){ height:88%; animation-delay:.45s; background:var(--svc-accent); }
.svc-glyph__bars span:nth-child(5){ height:65%; animation-delay:.6s; }
.svc-glyph__bars span:nth-child(6){ height:48%; animation-delay:.75s; }
@keyframes barRise{ from{ transform:scaleY(.6); } to{ transform:scaleY(1); } }
.svc-glyph__line{ height:5px; background:var(--line); border-radius:1px; }
.svc-glyph__line--short{ width:50%; }
.svc-glyph__code{
  background:var(--ink); color:#fff; padding:12px;
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--mono); font-size:9px; border:1px solid var(--ink);
}
.svc-glyph__code span{ display:block; height:5px; background:rgba(255,255,255,.18); }
.svc-glyph__code span:nth-child(1){ width:60%; background:var(--logo-cyan); }
.svc-glyph__code span:nth-child(2){ width:80%; }
.svc-glyph__code span:nth-child(3){ width:40%; background:var(--logo-green); }
.svc-glyph__code span:nth-child(4){ width:72%; }
.svc-glyph__code span:nth-child(5){ width:55%; background:var(--svc-accent); }
.svc-glyph__code span:nth-child(6){ width:38%; }
.svc-glyph__cursor{ width:8px; height:12px; background:#fff; animation: blink 1.1s steps(2) infinite; }
@keyframes blink{ 50%{opacity:0} }

/* Service 02: Browser */
.svc-glyph--site{
  background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column;
  box-shadow: 14px 14px 0 var(--svc-accent);
}
.svc-glyph--site .svc-glyph__addr{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg-2);
}
.svc-glyph--site .svc-glyph__dots{ display:flex; gap:5px; }
.svc-glyph--site .svc-glyph__dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-2); }

/* URLバー: タイピングアニメーション */
.svc-glyph--site .svc-glyph__url{
  flex:1; height:18px; background:#fff; border:1px solid var(--line); border-radius:3px;
  display:flex; align-items:center; padding:0 8px;
  font-family:var(--mono); font-size:8px; color:var(--ink-soft); letter-spacing:.04em;
  overflow:hidden; white-space:nowrap;
}
.svc-glyph--site .svc-glyph__url::after{
  content:"calend.co.jp";
  display:inline-block;
  overflow:hidden; white-space:nowrap;
  width:72px;
  transform-origin:left center;
  transform:scaleX(0);
  animation: siteTyping 4s cubic-bezier(.4,0,.2,1) infinite;
  border-right:1px solid var(--ink-soft);
}
@keyframes siteTyping{
  0%   { transform:scaleX(0); opacity:1; }
  40%  { transform:scaleX(1); opacity:1; }
  75%  { transform:scaleX(1); opacity:1; }
  90%  { transform:scaleX(1); opacity:0; }
  100% { transform:scaleX(0); opacity:0; }
}

.svc-glyph--site .svc-glyph__page{
  flex:1; padding:18px; display:grid; gap:10px;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto;
}

/* ヒーロー: 左から光が流れるシマーアニメーション */
.svc-glyph--site .svc-glyph__hero{
  grid-column: 1/-1;
  background: linear-gradient(135deg, var(--svc-accent) 0%, var(--teal-mid) 100%);
  position:relative; overflow:hidden;
  animation: heroFadeIn 4s ease infinite;
}
@keyframes heroFadeIn{
  0%   { opacity:0; transform:scaleY(.6); }
  20%  { opacity:1; transform:scaleY(1); }
  75%  { opacity:1; transform:scaleY(1); }
  90%  { opacity:0; }
  100% { opacity:0; transform:scaleY(.6); }
}
.svc-glyph--site .svc-glyph__hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  animation: shimmer 2.4s ease-in-out 0.6s infinite;
  transform:translateX(-100%);
}
@keyframes shimmer{
  0%   { transform:translateX(-100%); }
  60%  { transform:translateX(200%); }
  100% { transform:translateX(200%); }
}
.svc-glyph--site .svc-glyph__hero::after{
  content:""; position:absolute; left:14px; top:50%; width:42%; height:8px;
  background:#fff; transform:translateY(-12px); box-shadow: 0 14px 0 rgba(255,255,255,.6);
  opacity:0; animation: heroTextIn 4s ease infinite;
}
@keyframes heroTextIn{
  0%,18% { opacity:0; }
  28%    { opacity:1; }
  75%    { opacity:1; }
  88%    { opacity:0; }
  100%   { opacity:0; }
}

/* ブロック・テキストバー: 順番に現れる */
.svc-glyph--site .svc-glyph__block{
  height:34px; background:var(--bg-2); border:1px solid var(--line);
  opacity:0; transform:translateY(6px);
  animation: blockIn 4s ease infinite;
}
.svc-glyph--site .svc-glyph__block:nth-child(2){ animation-delay:.5s; }
.svc-glyph--site .svc-glyph__block:nth-child(3){ animation-delay:.75s; }
@keyframes blockIn{
  0%,30% { opacity:0; transform:translateY(6px); }
  45%    { opacity:1; transform:translateY(0); }
  75%    { opacity:1; transform:translateY(0); }
  88%    { opacity:0; }
  100%   { opacity:0; transform:translateY(6px); }
}
.svc-glyph--site .svc-glyph__textbar{
  grid-column:1/-1; height:5px; background:var(--line);
  transform-origin:left;
  animation: barGrow 4s ease 1s infinite;
}
@keyframes barGrow{
  0%,35% { transform:scaleX(0); opacity:0; }
  50%    { transform:scaleX(1); opacity:1; }
  75%    { transform:scaleX(1); opacity:1; }
  88%    { opacity:0; }
  100%   { opacity:0; transform:scaleX(0); }
}

/* Service 03: Support */
.svc-glyph--support{
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.svc-glyph__dial{ position:relative; width:55%; aspect-ratio:1; }
.svc-glyph__dial-ring{
  width:100%; height:100%; border-radius:50%;
  border:12px solid var(--bg-2);
  position:absolute; inset:0;
}
.svc-glyph__dial-center{
  position:absolute; inset:25%; border-radius:50%; background:var(--teal-pale);
  display:grid; place-items:center;
}
.svc-glyph__dial-center::before{
  content:"DX"; font-family:var(--en); font-weight:900; font-size:clamp(14px,2vw,24px);
  color:var(--teal); letter-spacing:.08em;
}
.svc-glyph__dial-hand{
  position:absolute; top:50%; left:50%;
  width:36%; height:3px; background:var(--svc-accent);
  transform-origin:0 50%;
  animation: dialSpin 4s linear infinite;
}
@keyframes dialSpin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.svc-glyph__chat{
  display:flex; flex-direction:column; gap:10px; flex:1; max-width:160px;
}
.svc-glyph__chat span{
  display:block; background:#fff; border:1px solid var(--line);
  padding:8px 10px; font-family:var(--mono); font-size:10px; height:32px;
  animation: chatPop .6s cubic-bezier(.16,1,.3,1) both;
}
.svc-glyph__chat span:nth-child(1){ animation-delay:.2s; }
.svc-glyph__chat span:nth-child(2){
  background:var(--svc-accent); color:#fff; border-color:var(--svc-accent);
  margin-left:24px; animation-delay:.8s;
}
.svc-glyph__chat span:nth-child(3){ animation-delay:1.4s; }
@keyframes chatPop{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

@media (max-width: 820px){
  .svc{
    height:auto; min-height:0; overflow:visible; position:relative;
  }
  .svc__sticky{
    grid-template-columns: 1fr;
    grid-template-areas: "art" "main";
    padding-top:60px;
  }
  .svc__art{ min-height:200px; }
}

/* ============================================================
   WORKS — horizontal rail
   ============================================================ */
.works{
  background:var(--bg); color:var(--ink);
  padding-bottom:100px; overflow:hidden; border-top:1px solid var(--line);
}
.works__rail{ overflow:hidden; padding:20px 0 30px; }
.works__track{
  display:flex; gap:28px; padding:0 var(--shell-pad);
  width:max-content;
  animation: worksScroll 38s linear infinite; will-change:transform;
}
.works__rail:hover .works__track{ animation-play-state:paused; }
@keyframes worksScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.wk{
  flex:0 0 clamp(280px, 28vw, 400px);
  display:flex; flex-direction:column; gap:16px; color:var(--ink); position:relative;
}
.wk__idx{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--ink-soft); }
.wk__media{
  position:relative; aspect-ratio:4/3; background:var(--teal-pale);
  border:1px solid var(--line); overflow:hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.wk:hover .wk__media{ transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(15,26,29,.18); }
.wk__hover{
  position:absolute; left:14px; bottom:14px;
  background:var(--ink); color:#fff;
  font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.12em; padding:8px 12px;
  opacity:0; transform:translateY(10px); transition:all .4s cubic-bezier(.16,1,.3,1);
}
.wk:hover .wk__hover{ opacity:1; transform:translateY(0); }
.wk-art{ position:absolute; inset:0; overflow:hidden; }

/* Work art 01 */
.wk-art--01{ background:#fff; padding:14% 12%; }
.wk-art--01::before{
  content:"受注 ORDER #2451"; position:absolute; left:12%; top:10%;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--ink-soft);
}
.wk-art--01 .wk-rows{ position:absolute; inset:22% 12% 14% 12%; display:flex; flex-direction:column; gap:8%; }
.wk-art--01 .wk-row{ display:flex; align-items:center; gap:8px; }
.wk-art--01 .wk-row>i{ display:block; height:6px; background:var(--line); border-radius:1px; }
.wk-art--01 .wk-row>i:first-child{ width:22%; background:var(--ink-soft); }
.wk-art--01 .wk-row>i:last-child{ flex:1; }
.wk-art--01 .wk-row.is-on>i:last-child{ background:var(--logo-cyan); }
.wk-art--01 .wk-check{
  position:absolute; right:10%; bottom:12%; width:34%; aspect-ratio:1; background:var(--logo-green);
  display:grid; place-items:center; animation: wkCheck 3.6s ease-in-out infinite;
}
.wk-art--01 .wk-check::after{
  content:""; width:40%; height:18%;
  border-left:3px solid #fff; border-bottom:3px solid #fff;
  transform:rotate(-45deg) translate(15%,-25%);
}
@keyframes wkCheck{ 0%,40%,100%{transform:scale(1)} 20%{transform:scale(1.08) rotate(-3deg)} }

/* Work art 02 */
.wk-art--02{
  background:
    linear-gradient(transparent calc(100% - 1px), var(--line) calc(100% - 1px)) 0 0 / 100% 16.66%,
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) calc(100% - 1px)) 0 0 / 12.5% 100%,
    var(--teal-pale);
}
.wk-art--02 .wk-path{ position:absolute; inset:0; width:100%; height:100%; }
.wk-art--02 .wk-node{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--teal-deep); border:3px solid #fff; box-shadow:0 0 0 1px var(--teal-deep);
}
.wk-art--02 .wk-node--depot{ background:var(--logo-magenta); }
.wk-art--02 .wk-node--active{ background:var(--logo-cyan); animation:wkPulseDot 1.6s ease-in-out infinite; }
@keyframes wkPulseDot{
  0%,100%{ outline:1px solid var(--teal-deep); outline-offset:0px; opacity:1; }
  50%{ outline:1px solid rgba(0,187,255,0); outline-offset:14px; opacity:0; }
}

/* Work art 03 */
.wk-art--03{ background:#fff; }
.wk-art--03 .wk-paper{
  position:absolute; width:22%; aspect-ratio:3/4;
  background:#fff; border:1.5px solid var(--ink); left:10%; top:18%;
  box-shadow:6px 6px 0 var(--logo-yellow);
}
.wk-art--03 .wk-paper::before, .wk-art--03 .wk-paper::after{
  content:""; position:absolute; left:14%; right:14%; height:7%; background:var(--ink-soft);
}
.wk-art--03 .wk-paper::before{ top:24%; }
.wk-art--03 .wk-paper::after{ top:46%; right:38%; }
.wk-art--03 .wk-arrow{
  position:absolute; left:36%; top:46%; width:18%; height:4px; background:var(--ink);
  animation:wkArrow 2.4s ease-in-out infinite;
}
.wk-art--03 .wk-arrow::after{
  content:""; position:absolute; right:-2px; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left:10px solid var(--ink);
}
@keyframes wkArrow{ 0%,100%{transform:translateX(0); opacity:1} 50%{transform:translateX(8px); opacity:.5} }
.wk-art--03 .wk-bot{
  position:absolute; right:10%; top:18%; width:34%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--logo-green) 0 38%, transparent 38%), var(--teal-pale);
  border:1.5px solid var(--ink);
}
.wk-art--03 .wk-bot::before, .wk-art--03 .wk-bot::after{
  content:""; position:absolute; width:14%; height:14%; background:#fff; border-radius:50%; top:34%;
}
.wk-art--03 .wk-bot::before{ left:26%; }
.wk-art--03 .wk-bot::after{ right:26%; }
.wk-art--03 .wk-bar{
  position:absolute; left:10%; right:10%; bottom:14%; height:6px; background:var(--line);
}
.wk-art--03 .wk-bar::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:100%;
  transform-origin:left center; transform:scaleX(.12);
  background:var(--logo-green); animation:wkProg 3s ease-in-out infinite;
}
@keyframes wkProg{ 0%{transform:scaleX(.12)} 60%,100%{transform:scaleX(.88)} }

/* Work art 04 */
.wk-art--04{
  background:var(--teal-pale);
  display:grid; grid-template-columns:repeat(3,1fr); gap:6%; padding:10% 8%;
}
.wk-art--04 .wk-col{
  background:#fff; border:1px solid var(--line); padding:8% 8%;
  display:flex; flex-direction:column; gap:8%;
}
.wk-art--04 .wk-col-h{ height:6px; width:60%; background:var(--teal-deep); }
.wk-art--04 .wk-card{ height:14%; background:var(--bg-2); border-left:3px solid var(--teal-mid); }
.wk-art--04 .wk-card.is-hot{ border-left-color:var(--logo-magenta); background:#fff5fc; }
.wk-art--04 .wk-card.is-done{ border-left-color:var(--logo-green); background:#f0faf0; }

/* Work art 05 */
.wk-art--05{
  background:#fff; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:14% 8%; gap:6%;
}
.wk-art--05 .wk-store, .wk-art--05 .wk-ec{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:4px;
}
.wk-art--05 .wk-store>i, .wk-art--05 .wk-ec>i{
  background:var(--teal-pale); border:1px solid var(--line); aspect-ratio:1;
}
.wk-art--05 .wk-store>i:nth-child(2),
.wk-art--05 .wk-store>i:nth-child(6),
.wk-art--05 .wk-ec>i:nth-child(3),
.wk-art--05 .wk-ec>i:nth-child(7){ background:var(--logo-cyan); border-color:var(--logo-cyan); }
.wk-art--05 .wk-sync{
  width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; font-weight:700; animation:spin 6s linear infinite;
}
@keyframes spin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.wk-art--05 .wk-label{
  position:absolute; bottom:8%; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--ink-soft);
}

.wk__meta{ display:flex; gap:6px; flex-wrap:wrap; }
.wk__tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  padding:4px 10px; border:1px solid var(--line-2); color:var(--ink-soft);
}
.wk__tag--solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
.wk__ttl{
  font-family:var(--jp); font-weight:700;
  font-size:clamp(18px,1.5vw,22px); line-height:1.4; letter-spacing:.01em;
}
.works__hint{
  padding:30px var(--shell-pad) 0;
  display:flex; align-items:center; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-soft);
}
.works__hint-bar{
  display:block; flex:1; max-width:280px; height:2px; background:var(--line); overflow:hidden;
}
.works__hint-bar>span{ display:block; height:100%; background:var(--teal-mid); width:10%; }

/* ============================================================
   NEWS
   ============================================================ */
.news{ background:var(--bg); padding-bottom:80px; }
.news__list{ padding:0 var(--shell-pad); border-top:1px solid var(--ink); }
.news-row{ border-bottom:1px solid var(--ink); }
.news-row a{
  display:grid;
  grid-template-columns: auto auto 1fr auto;
  align-items:center; gap:clamp(16px,3vw,60px);
  padding:26px 0; position:relative; overflow:hidden;
  transition:padding .35s cubic-bezier(.16,1,.3,1);
}
.news-row a::before{
  content:""; position:absolute; inset:0;
  background:var(--teal); transform-origin:left; transform:scaleX(0);
  transition:transform .55s cubic-bezier(.77,0,.18,1); z-index:0;
}
.news-row a:hover::before{ transform:scaleX(1); }
.news-row a>*{ position:relative; z-index:1; transition:color .35s; }
.news-row a:hover>*{ color:#fff; }
.news-row a:hover{ padding-left:24px; padding-right:24px; }
.news-row__date{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; min-width:96px; }
.news-row__tag{
  font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.14em;
  padding:5px 10px; border:1px solid currentColor;
}
.news-row__ttl{
  font-family:var(--jp); font-weight:700; font-size:clamp(15px,1.3vw,20px);
}
.news-row__arr{ font-family:var(--en); font-weight:700; font-size:20px; transition:transform .35s; }
.news-row a:hover .news-row__arr{ transform:translateX(8px); }

@media (max-width: 720px){
  .news-row a{
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    grid-template-areas:"date tag" "ttl ttl";
    row-gap:10px;
  }
  .news-row__date{ grid-area:date; }
  .news-row__tag{ grid-area:tag; justify-self:start; }
  .news-row__ttl{ grid-area:ttl; }
  .news-row__arr{ display:none; }
}

/* ============================================================
   COMPANY
   ============================================================ */
.company{
  background:var(--bg); color:var(--ink); padding-bottom:120px;
  position:relative; overflow:hidden; border-top:1px solid var(--line);
}
.company__grid{ padding:0 var(--shell-pad); max-width:880px; margin:0 auto; }
.company__right{ display:flex; flex-direction:column; gap:30px; }
.company__info{ border-top:1px solid var(--ink); }
.company__info>div{
  display:grid; grid-template-columns:110px 1fr; gap:32px;
  padding:22px 0; border-bottom:1px solid var(--line); align-items:start;
  opacity:0; transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.company__right.is-in .company__info>div{ opacity:1; transform:translateY(0); }
.company__right.is-in .company__info>div:nth-child(1){ transition-delay:.10s; }
.company__right.is-in .company__info>div:nth-child(2){ transition-delay:.20s; }
.company__right.is-in .company__info>div:nth-child(3){ transition-delay:.30s; }
.company__right.is-in .company__info>div:nth-child(4){ transition-delay:.40s; }
.company__right.is-in .company__info>div:nth-child(5){ transition-delay:.50s; }
.company__info dt{
  font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.18em;
  padding-top:5px; color:var(--ink-soft);
}
.company__info dd{
  font-family:var(--jp); font-weight:500; font-size:clamp(14px,1.1vw,17px); line-height:1.75;
}


/* ============================================================
   CONTACT BAND
   ============================================================ */
.cta-band{
  position:relative; background:var(--bg); padding-bottom:140px;
  overflow:hidden; isolation:isolate; text-align:center; border-top:1px solid var(--line);
}
.sec-head--center{
  grid-template-columns:1fr; justify-items:center; text-align:center; padding-bottom:32px;
}
.sec-head--center .sec-head__ttl{ align-items:center; }
.sec-head--center .sec-head__num{ padding-bottom:0; }
.cta-band__shapes{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cta-shape{ position:absolute; display:block; }
.cta-shape--circle{
  left:14%; top:-90px; width:clamp(140px,16vw,240px); aspect-ratio:1;
  background:var(--logo-magenta); border-radius:50%; animation:sway1 7s ease-in-out infinite;
}
.cta-shape--rect{
  right:6%; top:22%; width:clamp(150px,18vw,240px); height:clamp(54px,6vw,84px);
  background:var(--logo-cyan); transform:rotate(-8deg); animation:sway2 8s ease-in-out infinite;
}
.cta-shape--tri{
  left:3%; top:54%; width:clamp(150px,18vw,240px); height:clamp(110px,13vw,180px);
  background:var(--logo-yellow); clip-path:polygon(0% 0%, 100% 50%, 0% 100%);
  transform:rotate(-6deg); animation:sway3 9s ease-in-out infinite;
}
.cta-shape--square{
  right:8%; bottom:6%; width:clamp(110px,13vw,180px); aspect-ratio:1;
  background:var(--logo-green); transform:rotate(12deg); animation:sway4 8.5s ease-in-out infinite;
}
@keyframes sway1{ 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(10px,14px) rotate(8deg)} }
@keyframes sway2{ 0%,100%{transform:rotate(-8deg) translate(0,0)} 50%{transform:rotate(-2deg) translate(-14px,10px)} }
@keyframes sway3{ 0%,100%{transform:rotate(-6deg) translate(0,0)} 50%{transform:rotate(4deg) translate(12px,-12px)} }
@keyframes sway4{ 0%,100%{transform:rotate(12deg) translate(0,0)} 50%{transform:rotate(22deg) translate(-10px,-14px)} }
.cta-band__inner{ position:relative; z-index:1; max-width:880px; margin:0 auto; padding:0 var(--shell-pad); }
.cta-band__ttl{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(26px,3.8vw,54px); line-height:1.3; letter-spacing:-.01em; color:var(--ink);
}
.cta-band__lead{
  margin:28px auto 0; max-width:52ch;
  font-family:var(--jp); font-weight:500; font-size:clamp(14px,1.1vw,17px); line-height:1.95;
  color:var(--ink-soft); letter-spacing:.04em;
}
.cta-band__cta{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:44px; padding:20px 56px;
  background:#fff; border:1.5px solid var(--ink);
  text-decoration:none; cursor:pointer;
  transition:background 0s;
}
.cta-band__cta span:first-child{
  font-family:var(--jp); font-weight:700; font-size:20px; letter-spacing:.1em;
  color:var(--ink); position:relative;
  transition:color 0s;
}
.cta-band__cta span:first-child::after{
  content:""; position:absolute;
  left:0; right:0; bottom:-4px;
  height:1.5px; background:#fff;
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.77,0,.18,1);
}
.cta-band__cta:hover{ background:var(--ink); }
.cta-band__cta:hover span:first-child{ color:#fff; }
.cta-band__cta:hover span:first-child::after{ transform:scaleX(1); }
.cta-band__cta-arr{ display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.g-footer{
  background:var(--bg); color:var(--ink); border-top:1px solid var(--line);
  padding:80px var(--shell-pad) 30px;
}
.g-footer__top{ padding-bottom:60px; border-bottom:1px solid var(--line); }
.g-footer__cols{ display:grid; grid-template-columns:1fr 1.4fr; gap:60px; align-items:start; }
.g-footer__cols h4{
  font-family:var(--en); font-weight:700; font-size:12px; letter-spacing:.18em;
  margin-bottom:20px; color:var(--teal); padding-bottom:12px; border-bottom:1px solid var(--line);
}
.g-footer__cols ul li{ margin-bottom:14px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
.g-footer__cols a{ position:relative; display:inline-block; }
.g-footer__cols a:hover{ color:var(--ink); }
.g-footer__cols a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:currentColor;
  transition:width .3s;
}
.g-footer__cols a:hover::after{ width:100%; }
.g-footer__bottom{
  display:flex; justify-content:flex-start; gap:30px; flex-wrap:wrap;
  padding-top:30px; margin-top:40px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-soft);
}
@media (max-width: 820px){
  .g-footer__cols{ grid-template-columns:1fr; gap:30px; }
}

/* ============================================================
   PAGE UP
   ============================================================ */
.pageup{
  position:fixed; right:24px; bottom:32px; z-index:50;
  width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transform:translateY(12px);
  transition:opacity .3s, transform .3s;
  cursor:pointer;
}
.pageup.is-in{ opacity:1; pointer-events:auto; transform:translateY(0); }
.pageup svg{ width:16px; height:16px; stroke:#fff; stroke-width:2; fill:none; }

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-in{ opacity:1; transform:translateY(0); }

/* ============================================================
   GLOBAL MAIN PADDING
   ============================================================ */
.global-main{ padding-top:0; }

/* ============================================================
   SUBPAGE — 新デザイン共通
   ============================================================ */
.sub-hero{
  padding: calc(80px + 60px) var(--shell-pad) 60px;
  border-bottom: 1px solid var(--line);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.sub-hero__en{
  font-family:var(--en); font-weight:900;
  font-size:clamp(44px, 7vw, 110px); letter-spacing:-.04em; line-height:.9;
  color:var(--ink);
}
.sub-hero__ja{
  font-family:var(--jp); font-weight:700;
  font-size:clamp(14px, 1.3vw, 18px); letter-spacing:.18em;
  color:var(--ink-soft); margin-top:12px;
}
.sub-hero__desc{
  max-width: 860px;
  margin-top: 40px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.9;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

.sub-body{
  max-width:1100px; margin:0 auto;
  padding: 80px var(--shell-pad) 140px;
}

/* サービスカード */
.sub-svc-list{ display:flex; flex-direction:column; gap:0; }
.sub-svc-item{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
  padding:80px 0; border-bottom:1px solid var(--line);
}
.sub-svc-item:first-child{ padding-top:0; }
.sub-svc-item__num{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-soft);
  margin-bottom:16px;
}
.sub-svc-item__ttl{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(28px, 3.5vw, 52px); line-height:1.1; letter-spacing:-.02em;
  margin-bottom:8px;
}
.sub-svc-item__en{
  font-family:var(--en); font-weight:700; font-size:13px; letter-spacing:.14em;
  color:var(--ink-soft); margin-bottom:28px;
}
.sub-svc-item__body{
  font-size:clamp(15px, 1.1vw, 17px); line-height:1.9;
}
.sub-svc-item__tags{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:24px;
}
.sub-svc-item__tags span{
  font-family:var(--mono); font-size:11px; padding:5px 10px;
  border:1px solid var(--line); color:var(--ink-soft); border-radius:2px;
}
.sub-svc-item__accent{
  height:4px; width:60px; margin-bottom:24px;
}
.sub-svc-item__img{
  display:flex; align-items:center; justify-content:center;
  background:var(--teal-pale); aspect-ratio:1/1; max-width:400px;
  border:1px solid var(--line);
}
.sub-svc-item__img img{ max-width:70%; }

@media(max-width:820px){
  .sub-svc-item{ grid-template-columns:1fr; gap:32px; }
  .sub-svc-item__img{ max-width:100%; }
  /* 1カラム時はコンテナが広くなるので縮小率を戻す */
  .sub-svc-item__img--art .svc-glyph--site{
    transform: scale(0.9);
  }
  .sub-svc-item__img--art .svc-glyph--support{
    transform: scale(0.9);
  }
  .sub-hero__desc{
    font-size: clamp(15px, 3.5vw, 18px);
    max-width: 100%;
    margin-top: 28px;
  }
}

/* 実績一覧 */
.sub-works-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.sub-wk-card{
  background:var(--bg); display:flex; flex-direction:column; gap:16px;
  padding:32px; transition: background .25s;
}
.sub-wk-card:hover{ background:var(--teal-pale); }
.sub-wk-card__media{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:75%; /* 4:3 */
  background:var(--teal-pale);
  overflow:hidden;
}
.sub-wk-card__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.sub-wk-card__media .wk-art{
  position:absolute; inset:0; width:100%; height:100%;
}
.sub-wk-card__meta{ display:flex; gap:6px; flex-wrap:wrap; }
.sub-wk-card__tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  padding:4px 10px; border:1px solid var(--line-2); color:var(--ink-soft);
}
.sub-wk-card__tag--solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sub-wk-card__ttl{
  font-family:var(--jp); font-weight:700; font-size:clamp(16px,1.3vw,20px); line-height:1.4;
}
.sub-wk-card__arr{
  font-family:var(--en); font-weight:700; font-size:13px; letter-spacing:.1em;
  color:var(--teal); margin-top:auto; display:flex; align-items:center; gap:8px;
}

/* 実績詳細 */
.sub-works-detail{ max-width:800px; }
.sub-works-detail__kv{
  aspect-ratio:16/9; background:var(--teal-pale);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); margin-bottom:60px;
  overflow:hidden;
}
.sub-works-detail__kv img{ max-width:80%; }
/* CSSアートKV */
.sub-works-detail__kv--art{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.25%; /* 16:9 */
  border:1px solid var(--line);
  margin-bottom:60px;
  overflow:hidden;
  background:var(--teal-pale);
}
.sub-works-detail__kv--art .wk-art{
  position:absolute; inset:0; width:100%; height:100%;
}
.sub-works-meta{ display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.sub-works-meta span{
  font-family:var(--mono); font-size:12px; padding:6px 14px;
  border:1px solid var(--line); color:var(--ink-soft);
}
.sub-works-meta span.solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sub-works-body h2{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(22px,2.5vw,34px); letter-spacing:-.01em;
  margin:48px 0 20px; padding-bottom:12px; border-bottom:2px solid var(--teal);
}
.sub-works-body h3{
  font-family:var(--jp); font-weight:700;
  font-size:clamp(18px,1.6vw,22px); margin:36px 0 14px; color:var(--teal-deep);
}
.sub-works-body p{ font-size:clamp(15px,1.1vw,17px); line-height:1.9; margin-bottom:20px; }
.sub-works-body ul{ padding-left:1.5em; margin-bottom:20px; }
.sub-works-body li{ font-size:clamp(15px,1.1vw,17px); line-height:1.9; margin-bottom:8px; list-style:disc; }

/* DL テーブル */
.sub-dl{ border-top:1px solid var(--ink); }
.sub-dl > div{
  display:grid; grid-template-columns:140px 1fr; gap:32px;
  padding:22px 0; border-bottom:1px solid var(--line); align-items:start;
}
.sub-dl dt{
  font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.18em;
  color:var(--ink-soft); padding-top:4px;
}
.sub-dl dd{ font-size:clamp(14px,1.1vw,16px); line-height:1.8; }
@media(max-width:600px){
  .sub-dl > div{ grid-template-columns:1fr; gap:6px; }
}

/* ニュースリスト */
.sub-news-list{ border-top:1px solid var(--ink); }
.sub-news-item{ border-bottom:1px solid var(--line); }
.sub-news-item a{
  display:grid; grid-template-columns:auto auto 1fr;
  gap:clamp(14px,3vw,48px); padding:24px 0; align-items:center;
  position:relative; overflow:hidden;
  transition: padding .35s cubic-bezier(.16,1,.3,1);
}
.sub-news-item a::before{
  content:""; position:absolute; inset:0; background:var(--teal);
  transform-origin:left; transform:scaleX(0);
  transition:transform .5s cubic-bezier(.77,0,.18,1); z-index:0;
}
.sub-news-item a:hover::before{ transform:scaleX(1); }
.sub-news-item a>*{ position:relative; z-index:1; transition:color .35s; }
.sub-news-item a:hover>*{ color:#fff; }
.sub-news-item__date{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; min-width:90px; }
.sub-news-item__tag{
  font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.12em;
  padding:4px 10px; border:1px solid currentColor;
}
.sub-news-item__ttl{ font-family:var(--jp); font-weight:700; font-size:clamp(15px,1.2vw,18px); }

/* 企業理念 */
.sub-phil-lead{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(24px, 3.5vw, 52px); line-height:1.5; letter-spacing:-.01em;
  margin-bottom:80px; max-width:800px;
}
.sub-phil-block{ margin-bottom:100px; }
.sub-phil-block h2{
  font-family:var(--en); font-weight:900; font-size:clamp(32px,4vw,60px);
  letter-spacing:-.03em; margin-bottom:36px; color:var(--teal);
  padding-top:20px;
}
.sub-phil-block p{ font-size:clamp(15px,1.1vw,17px); line-height:2; max-width:720px; }

/* 共通ページフッターナビ */
.sub-pagenav{
  border-top:1px solid var(--line); padding-top:60px; margin-top:80px;
}
.sub-pagenav h3{
  font-family:var(--en); font-weight:900; font-size:clamp(20px,2vw,28px);
  letter-spacing:.08em; margin-bottom:32px; color:var(--teal);
}
.sub-pagenav ul{ display:flex; flex-direction:column; gap:0; }
.sub-pagenav li a{
  display:flex; align-items:baseline; gap:16px; padding:18px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--en); font-weight:700; font-size:clamp(18px,2vw,26px);
  letter-spacing:.06em; position:relative; overflow:hidden;
  transition:padding .35s cubic-bezier(.16,1,.3,1);
}
.sub-pagenav li a::before{
  content:""; position:absolute; inset:0; background:var(--teal-pale);
  transform-origin:left; transform:scaleX(0);
  transition:transform .5s cubic-bezier(.77,0,.18,1); z-index:0;
}
.sub-pagenav li a:hover::before{ transform:scaleX(1); }
.sub-pagenav li a:hover{ padding-left:20px; }
.sub-pagenav li a span{ position:relative; z-index:1; }
.sub-pagenav li a em{
  font-style:normal; font-family:var(--jp); font-weight:700;
  font-size:.55em; letter-spacing:.12em; color:var(--ink-soft);
  position:relative; z-index:1;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form{
  max-width:720px;
}
.contact-form__group{
  margin-bottom:36px;
}
.contact-form__label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--en); font-weight:700; font-size:12px; letter-spacing:.16em;
  color:var(--ink-soft); margin-bottom:10px;
}
.contact-form__req{
  font-family:var(--jp); font-size:10px; font-weight:700; letter-spacing:.08em;
  background:var(--teal); color:#fff; padding:2px 8px; border-radius:2px;
}
.contact-form__input,
.contact-form__textarea{
  width:100%; padding:16px 18px;
  border:1px solid var(--line); background:var(--bg);
  font-family:var(--jp); font-size:15px; color:var(--ink);
  outline:none;
  transition: border-color .25s, box-shadow .25s;
  border-radius:0;
  appearance:none; -webkit-appearance:none;
}
.contact-form__input:focus,
.contact-form__textarea:focus{
  border-color:var(--teal);
  box-shadow: 0 0 0 3px var(--teal-pale);
}
.contact-form__textarea{ resize:vertical; min-height:180px; }
.contact-form__submit{ margin-top:48px; }
.contact-form__btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:20px 56px;
  background:var(--ink); color:#fff;
  border-radius:999px; border:none; cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:15px; letter-spacing:.08em;
  position:relative; overflow:hidden; isolation:isolate;
  transition: transform .3s;
}
.contact-form__btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--teal);
  transform:translateY(101%);
  transition: transform .5s cubic-bezier(.77,0,.18,1);
}
.contact-form__btn:hover{ transform:translateY(-2px); }
.contact-form__btn:hover::before{ transform:translateY(0); }

/* CF7 override */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-textarea{
  width:100%; padding:16px 18px;
  border:1px solid var(--line); background:var(--bg);
  font-family:var(--jp); font-size:15px; color:var(--ink);
  outline:none; border-radius:0;
  transition: border-color .25s;
}
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-textarea:focus{ border-color:var(--teal); }
.wpcf7-form input[type="submit"]{
  display:inline-flex; align-items:center;
  padding:20px 56px;
  background:var(--ink); color:#fff;
  border-radius:999px; border:none; cursor:pointer;
  font-family:var(--jp); font-weight:700; font-size:15px; letter-spacing:.08em;
  transition: background .3s;
}
.wpcf7-form input[type="submit"]:hover{ background:var(--teal); }

/* ============================================================
   SERVICE PAGE — CSS art (reuse top-page wk-art & svc-glyph)
   ============================================================ */
.sub-svc-item__img--art{
  background:var(--teal-pale);
  border:1px solid var(--line);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  padding:0; max-width:none; width:100%;
}
/* wk-art--01 をサービスページ枠内で正しく配置 */
.sub-svc-item__img--art .wk-art--01{
  position:absolute; inset:0;
  width:100%; height:100%;
}
/* svc-glyph: 固定サイズで描画してからscaleで縮小 — はみ出し防止 */
.sub-svc-item__img--art .svc-glyph{
  flex-shrink:0;
  transform-origin: center center;
}
.sub-svc-item__img--art .svc-glyph--site{
  width:460px;
  aspect-ratio:4/3;
  transform: scale(min(1, calc((var(--art-w, 460px)) / 460px)));
}
.sub-svc-item__img--art .svc-glyph--support{
  width:340px;
  aspect-ratio:4/3;
  gap:18px;
}
/* scaleはJS不要 — コンテナ幅に対してclampで対応 */
@media(max-width:600px){
  .sub-svc-item__img--art .svc-glyph--site{
    transform: scale(0.62);
  }
  .sub-svc-item__img--art .svc-glyph--support{
    transform: scale(0.75);
  }
}
@media(min-width:601px) and (max-width:820px){
  .sub-svc-item__img--art .svc-glyph--site{
    transform: scale(0.82);
  }
}
/* support glyphのダイヤルサイズ調整 */
.sub-svc-item__img--art .svc-glyph--support .svc-glyph__dial{
  width:48%;
}
.sub-svc-item__img--art .svc-glyph--support .svc-glyph__chat{
  max-width:140px;
}

/* ============================================================
   PHILOSOPHY — 追加スタイル
   ============================================================ */
.sub-phil-founding{
  margin-bottom:100px; max-width:720px;
  border-left:4px solid var(--teal-pale);
  padding-left:36px;
}
.sub-phil-founding p{
  font-size:clamp(15px,1.1vw,17px); line-height:2.2;
  margin-bottom:36px; color:var(--ink-soft);
}
.sub-phil-founding p:last-child{ margin-bottom:0; }

.sub-phil-block p{
  font-size:clamp(15px,1.1vw,17px); line-height:2.2;
  margin-bottom:32px; max-width:720px;
}
.sub-phil-block p:last-child{ margin-bottom:0; }
.sub-phil-block strong{ color:var(--teal); font-weight:700; }

.sub-phil-sign{
  margin-top:60px !important;
  font-family:var(--jp); font-weight:700;
  font-size:clamp(14px,1.1vw,16px); letter-spacing:.12em;
  color:var(--ink-soft); text-align:right;
  border-top:1px solid var(--line); padding-top:32px;
}

/* ============================================================
   RING BUTTON — 4色ロゴリング
   ============================================================ */
.ring-btn{
  display:inline-flex; align-items:center; gap:16px;
  text-decoration:none; border:none; background:none; cursor:pointer;
}
.ring-btn__icon{
  width:64px; height:64px; position:relative; flex-shrink:0;
}
.ring-btn__ring{
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
  transform-origin:50% 50%;
}
.ring-btn:hover .ring-btn__ring{ transform:rotate(180deg) scale(.82); }
.ring-btn__ring .arc{ transition:stroke .5s ease; }
.ring-btn__ring .arc-cyan   { stroke:#00BBFF; }
.ring-btn__ring .arc-magenta{ stroke:#FF00FF; }
.ring-btn__ring .arc-green  { stroke:#00B900; }
.ring-btn__ring .arc-yellow { stroke:#FDB400; }
.ring-btn:hover .ring-btn__ring .arc-cyan   { stroke:#00BBFF; }
.ring-btn:hover .ring-btn__ring .arc-magenta{ stroke:#FF00FF; }
.ring-btn:hover .ring-btn__ring .arc-green  { stroke:#00B900; }
.ring-btn:hover .ring-btn__ring .arc-yellow { stroke:#FDB400; }
.ring-btn__arrow{
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  transform-origin:50% 50%;
  pointer-events:none;
}
.ring-btn:hover .ring-btn__arrow{ transform:rotate(360deg); }
.ring-btn__label{
  font-family:var(--en); font-weight:700; font-size:13px; letter-spacing:.12em;
  color:var(--ink); position:relative;
}
.ring-btn__label::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:#2E7A88;
  transition:width .4s ease;
}
.ring-btn:hover .ring-btn__label::after{ width:100%; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* --- スキップリンク --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 10px 20px;
  background: var(--teal);
  color: #fff;
  font-family: var(--jp);
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top .2s ease;
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--logo-yellow);
  outline-offset: 2px;
}

/* --- フォーカスリング（キーボードナビ用） --- */
:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 3px;
  border-radius: 2px;
}
/* マウス操作では outline を非表示（:focus-visible が非対応環境向けフォールバック付き） */
:focus:not(:focus-visible) {
  outline: none;
}

/* リンク・ボタン類の focus-visible を個別に調整 */
.g-nav a:focus-visible,
.g-header__cta:focus-visible,
.g-drawer__nav a:focus-visible,
.ring-btn:focus-visible,
.g-header__brand:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 4px;
  border-radius: 4px;
}
.wk:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 6px;
  border-radius: 8px;
}
.cta-band__cta:focus-visible {
  outline: 3px solid var(--logo-yellow);
  outline-offset: 4px;
}
.g-hamburger:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 4px;
  border-radius: 4px;
}
#pageup:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 4px;
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  /* ローダー・ページイン系アニメを即完了 */
  .loader { transition: none; }
  .loader.is-out { transition: none; }
  .loader__bar-fill { transition: none; }

  /* ヒーロー入場アニメ */
  .hero__tile,
  .hero__triangle,
  .hero__line--1,
  .hero__line--2,
  .hero__sub,
  .hero__brand { animation: none; opacity: 1; transform: none; }

  /* マーキー停止 */
  .marquee__track { animation-play-state: paused; }

  /* スクロール連動アニメ */
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* サービスグリフのループアニメ */
  .svc-glyph__bars span,
  .svc-glyph__cursor,
  .svc-glyph__url { animation: none; }

  /* Works rail の自動スクロール */
  .works__track { animation-play-state: paused; }

  /* グローバルなトランジション抑制 */
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- ハイコントラストモード対応 --- */
@media (forced-colors: active) {
  .skip-link { border: 2px solid ButtonText; }
  .g-header { border-bottom: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}