/*
  姿・響・凪のサービスページ(軽量版)
  ・3Dの背景は使わず、NFCタグのページと同じ、静かな黒い背景とフェードインで見せる
  ・最初の画面の右側に、CSSだけで動くアイコンの演出を置く(重くならないよう、動かすのは位置と透明度だけ)
*/

/* ページに入るとき・移るときの暗転を、ゆっくり明ける */
.page-veil{transition:opacity .9s ease}

/* 1. 最初の画面:左に言葉、右に動くアイコン(NFCタグのページと同じ組み方) */
.svc-hero{height:auto;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:calc(var(--header-h) + 40px) var(--gutter) 80px;max-width:1240px;margin:0 auto;box-sizing:border-box}
.svc-hero__text{margin-left:clamp(0px,3vw,48px)}
/* 入ってくるスマートフォンや光の輪で、横にはみ出してスクロールできてしまわないように */
.svc-hero{overflow-x:clip}

/* 区切りの余白:3Dの演出のために空けていた分を、NFCタグのページと同じくらいに詰める */
.svc-message,.svc-values{padding:clamp(90px,15vh,170px) var(--gutter)}
.svc-plans__frame{padding:clamp(80px,13vh,150px) var(--gutter) clamp(50px,8vh,90px)}
.svc-flow{padding:clamp(90px,15vh,170px) var(--gutter)}

/* 料金カード:ふつうに並べる(中身に合わせて高さが伸びるので、文字がはみ出さない) */
@media(min-width:821px){.ai-page .plan__num{font-size:clamp(1.7rem,2.9vw,2.3rem)}}
.plan .plan__features li{word-break:keep-all}

/* 流れ:見えたところで、1から5へ順に灯る */
.flow__fill{transition:transform .8s var(--ease-out)}
.is-flow-ready .flow__seg{--fill: 0}
.is-flow-ready .flow__step.is-seg-on .flow__seg{--fill: 1}

/* ============ 動くアイコン(共通) ============ */
.svc-art{--loop:7s;--glass-edge:rgba(124,196,255,.35);position:relative;width:min(100%,400px);aspect-ratio:1;justify-self:center}
.svc-art:before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(124,196,255,.12),transparent 65%);pointer-events:none}
.svc-art *,.svc-art *:before,.svc-art *:after{box-sizing:border-box}
.svc-art.is-paused *,.svc-art.is-paused *:before,.svc-art.is-paused *:after{animation-play-state:paused}
.art-glass{border:1px solid var(--glass-edge);background:linear-gradient(150deg,rgba(124,196,255,.12),rgba(124,196,255,.03) 60%);box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.5)}
.art-phone{border-radius:22px;border:1px solid rgba(232,238,247,.32);background:linear-gradient(160deg,rgba(20,30,52,.92),rgba(8,12,24,.96));box-shadow:inset 0 1px rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.55)}
.art-phone__notch{position:absolute;top:6px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:3px;background:rgba(232,238,247,.14)}
.art-line{display:block;height:5px;border-radius:3px;background:rgba(232,238,247,.5)}
.art-ring{position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(124,196,255,.7);box-shadow:0 0 18px rgba(124,196,255,.35),inset 0 0 18px rgba(124,196,255,.2);opacity:0;transform:scale(.2)}

/* ============ 姿:ガラスの画面にページが組み上がり、スマホが重なる ============ */
.art-web__window{position:absolute;left:2%;top:14%;width:84%;aspect-ratio:16/11;border-radius:14px;padding:24px 10px 10px;overflow:hidden;animation:art-web-window var(--loop) var(--ease-out) infinite}
.art-web__bar{position:absolute;top:9px;left:12px;display:flex;gap:5px}
.art-web__bar i{width:5px;height:5px;border-radius:50%;background:rgba(232,238,247,.25)}
.art-web__page,.art-web__mini{position:relative;height:100%;border-radius:8px;background:rgba(5,7,15,.55);display:grid;align-content:start;gap:7%;padding:7% 8%;overflow:hidden}
.art-web__page>*,.art-web__mini>*{opacity:0;animation:art-block var(--loop) var(--ease-out) infinite}
.art-web__nav{display:flex;justify-content:space-between;align-items:center}
.art-web__nav .art-line{width:22%;background:rgba(124,196,255,.6)}
.art-web__nav span:last-child{width:34%;background:rgba(232,238,247,.25)}
.art-web__hero{height:2.6em;border-radius:6px;background:linear-gradient(120deg,rgba(124,196,255,.45),rgba(124,196,255,.08));animation-delay:.3s}
.art-web__page>.art-line:nth-child(3){width:78%;animation-delay:.55s}
.art-web__page>.art-line:nth-child(4){width:60%;animation-delay:.75s}
.art-web__page>.art-cols{animation-delay:.95s}
.art-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.art-cols i{display:block;height:1.6em;border-radius:4px;border:1px solid rgba(124,196,255,.25);background:rgba(124,196,255,.06)}
.art-web__sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.art-web__sheen:after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-150%) skewX(-12deg);animation:art-sheen var(--loop) ease-in-out infinite}
.art-web__phone{position:absolute;right:3%;bottom:8%;width:30%;aspect-ratio:9/18.5;padding:20px 6px 8px;z-index:2;opacity:0;animation:art-web-phone var(--loop) var(--ease-out) infinite}
.art-web__mini{gap:8%;padding:12% 10%;border-radius:12px}
.art-web__mini>*{animation-name:art-mini-block}
.art-web__mini .art-web__hero{height:3.4em;animation-delay:.15s}
.art-web__mini>.art-line:nth-child(3){width:86%;animation-delay:.3s}
.art-web__mini>.art-line:nth-child(4){width:60%;animation-delay:.45s}
.art-web__mini>.art-line:nth-child(5){width:74%;animation-delay:.6s}

@keyframes art-block{0%,5%{opacity:0;transform:translateY(10px)}15%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes art-mini-block{0%,42%{opacity:0;transform:translateY(8px)}52%,84%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes art-web-phone{0%,26%{opacity:0;transform:translate(46px,34px) rotate(9deg)}42%,84%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate(24px,12px) rotate(4deg)}}
@keyframes art-sheen{0%,50%{transform:translateX(-150%) skewX(-12deg)}72%,100%{transform:translateX(420%) skewX(-12deg)}}
@keyframes art-web-window{0%,36%{border-color:rgba(124,196,255,.35)}44%{border-color:rgba(124,196,255,.8)}60%,100%{border-color:rgba(124,196,255,.35)}}

/* ============ 響:投稿に「いいね」が付き、光の輪と反応が広がる ============ */
.art-sns__phone{position:absolute;left:50%;top:6%;width:44%;aspect-ratio:9/18.5;margin-left:-22%;padding:22px 9px 10px;z-index:2}
.art-sns__screen{position:relative;height:100%;border-radius:14px;background:rgba(5,7,15,.55);display:grid;align-content:start;gap:7px;padding:10% 9%}
.art-sns__user{display:flex;align-items:center;gap:7px}
.art-sns__user b{width:18px;height:18px;border-radius:50%;background:linear-gradient(140deg,rgba(124,196,255,.7),rgba(124,196,255,.15))}
.art-sns__user .art-line{width:46%}
.art-sns__photo{aspect-ratio:1;border-radius:8px;background:radial-gradient(circle at 30% 30%,rgba(232,244,255,.35),transparent 35%),linear-gradient(150deg,rgba(124,196,255,.5),rgba(40,70,140,.25))}
.art-sns__actions{position:relative;display:flex;align-items:center;gap:9px;padding-top:2px}
.art-sns__actions svg{width:17px;height:17px;fill:none;stroke:rgba(232,238,247,.6);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art-sns__heart{position:relative;width:17px;height:17px}
.art-sns__heart svg{position:absolute;inset:0}
.art-sns__heart .is-fill{fill:var(--color-glow);stroke:var(--color-glow);opacity:0;transform:scale(.6);animation:art-heart var(--loop) var(--ease-out) infinite}
.art-sns__screen>.art-line:nth-last-child(2){width:80%;opacity:.7}
.art-sns__screen>.art-line:last-child{width:54%;opacity:.5}
.art-sns__rings{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.art-sns__rings .art-ring{animation:art-ring var(--loop) cubic-bezier(.2,.7,.3,1) infinite}
.art-sns__rings .art-ring:nth-child(2){animation-delay:.38s}
.art-sns__rings .art-ring:nth-child(3){animation-delay:.76s}
.art-sns__chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 13px 8px 10px;border-radius:999px;opacity:0;animation:art-chip var(--loop) var(--ease-out) infinite}
.art-sns__chip svg{width:16px;height:16px;fill:none;stroke:var(--color-glow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art-sns__chip .art-line{width:34px;height:4px;background:rgba(232,238,247,.45)}
.art-sns__chip--a{right:0;top:22%}
.art-sns__chip--b{left:0;top:44%;animation-delay:.35s}
.art-sns__chip--c{right:4%;top:66%;animation-delay:.7s}

@keyframes art-heart{0%,30%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.35)}41%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
@keyframes art-ring{0%,32%{opacity:0;transform:scale(.15)}36%{opacity:.9}76%,100%{opacity:0;transform:scale(1.9)}}
@keyframes art-chip{0%,40%{opacity:0;transform:translateY(16px) scale(.92)}50%,82%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-14px)}}

/* ============ 凪:散らばった仕事が球に吸い込まれ、チェックリストが静かに整う ============ */
.art-ai__orb{position:absolute;left:50%;top:6%;width:44%;aspect-ratio:1;margin-left:-22%;border-radius:50%;overflow:hidden;border:1px solid rgba(124,196,255,.45);background:radial-gradient(circle at 34% 28%,rgba(232,244,255,.28),transparent 22%),radial-gradient(circle at 50% 60%,rgba(124,196,255,.1),rgba(5,7,15,.4) 70%);box-shadow:inset 0 0 26px rgba(124,196,255,.22),0 0 40px rgba(124,196,255,.12),0 24px 50px rgba(0,0,0,.5);z-index:2}
.art-ai__water{position:absolute;left:-10%;right:-10%;top:56%;bottom:-10%;background:linear-gradient(to bottom,rgba(124,196,255,.32),rgba(60,110,200,.18) 40%,rgba(20,40,90,.2));animation:art-water 5s ease-in-out infinite}
.art-ai__water:before{content:"";position:absolute;left:8%;right:8%;top:-7px;height:14px;border-radius:50%;border:1px solid rgba(160,214,255,.7);background:rgba(124,196,255,.18);box-shadow:0 0 14px rgba(124,196,255,.4)}
.art-ai__pulse{position:absolute;left:50%;top:calc(6% + 22%);width:0;height:0;z-index:1}
.art-ai__pulse .art-ring{animation:art-pulse var(--loop) cubic-bezier(.2,.7,.3,1) infinite}
.art-ai__pulse .art-ring:nth-child(2){animation-delay:.5s}
.art-ai__task{position:absolute;left:50%;top:calc(6% + 22%);z-index:3;display:flex;align-items:center;gap:7px;margin:-15px 0 0 -40px;width:80px;height:30px;padding:0 9px;border-radius:9px;opacity:0;animation:art-task var(--loop) cubic-bezier(.5,0,.3,1) infinite}
.art-ai__task svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--color-glow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art-ai__task .art-line{flex:1;height:4px}
.art-ai__task--a{--x:-150%;--y:-40%;--r:-12deg}
.art-ai__task--b{--x:165%;--y:-10%;--r:10deg;animation-delay:.45s}
.art-ai__task--c{--x:-170%;--y:130%;--r:7deg;animation-delay:.9s}
.art-ai__list{position:absolute;left:14%;right:14%;bottom:5%;display:grid;gap:10px;padding:16px 18px;border-radius:14px;z-index:2}
.art-ai__row{display:flex;align-items:center;gap:11px}
.art-ai__check{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:1px solid rgba(124,196,255,.35)}
.art-ai__check svg{position:absolute;inset:3px;fill:none;stroke:var(--color-glow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);animation:art-check var(--loop) var(--ease-out) infinite}
.art-ai__row .art-line{width:70%;opacity:.55}
.art-ai__row:nth-child(2) .art-line{width:56%}
.art-ai__row:nth-child(3) .art-line{width:64%}
.art-ai__row:nth-child(2) svg{animation-delay:.45s}
.art-ai__row:nth-child(3) svg{animation-delay:.9s}

@keyframes art-water{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes art-task{0%,4%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.9)}12%,26%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}40%{opacity:0;transform:translate(0,0) rotate(0) scale(.25)}100%{opacity:0;transform:translate(0,0) scale(.25)}}
@keyframes art-pulse{0%,36%{opacity:0;transform:scale(.4)}42%{opacity:.7}80%,100%{opacity:0;transform:scale(1.5)}}
@keyframes art-check{0%,50%{opacity:0;transform:scale(.5)}56%,86%{opacity:1;transform:none}96%,100%{opacity:0}}

/* スマホ:縦に並べる */
@media(max-width:820px){
  .svc-hero{grid-template-columns:1fr;text-align:center;padding-top:calc(var(--header-h) + 24px);gap:2.6rem;align-content:center}
  .svc-hero__text{justify-items:center;margin-left:0}
  .svc-hero__kanji{justify-content:center}
  .svc-hero__en{margin-right:-.55em}
  .svc-art{width:min(82%,330px)}
}
@media(max-aspect-ratio:4/5){
  .svc-hero{align-items:center;padding-bottom:64px}
}

/* 動きを減らす設定:組み上がった状態で、静かに止めて見せる */
@media(prefers-reduced-motion:reduce){
  .svc-art *,.svc-art *:before,.svc-art *:after{animation:none!important}
  .art-web__page>*,.art-web__mini>*,.art-web__phone,.art-sns__chip,.art-ai__check svg,.art-sns__heart .is-fill{opacity:1;transform:none}
  .art-sns__rings .art-ring{opacity:.4;transform:scale(.8)}
  .art-sns__rings .art-ring:nth-child(2){opacity:.2;transform:scale(1.3)}
  .flow__fill{transition:none}
}

/* 凪:仕組みの例(NFCタグを入口にした自動化) */
.ai-example{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.8rem);width:100%;max-width:680px;margin-top:clamp(1.4rem,4vh,2.4rem);padding:clamp(1.3rem,2.6vw,1.8rem) clamp(1.3rem,3vw,2.2rem);border:1px solid rgba(124,196,255,.26);border-radius:18px;background:linear-gradient(160deg,rgba(124,196,255,.08),rgba(124,196,255,.015) 60%);box-shadow:inset 0 1px rgba(255,255,255,.06);color:inherit;text-decoration:none;text-align:left;transition:border-color .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.ai-example:hover,.ai-example:focus-visible{border-color:rgba(124,196,255,.55);box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 36px rgba(124,196,255,.12)}
.ai-example__icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(124,196,255,.4);background:rgba(124,196,255,.06);box-shadow:0 0 18px rgba(124,196,255,.15)}
.ai-example__icon svg{width:24px;fill:none;stroke:var(--color-glow);stroke-width:1.3;stroke-linecap:round}
.ai-example__body{flex:1;display:grid;gap:.35rem}
.ai-example__label{font-family:var(--font-en);font-size:.72rem;letter-spacing:.3em;color:var(--color-glow);opacity:.85}
.ai-example__title{font-family:var(--font-mincho);font-weight:500;font-size:1.1rem;letter-spacing:.16em}
.ai-example__text{font-size:.84rem;line-height:1.95;letter-spacing:.06em;color:var(--color-text-sub);word-break:keep-all}
.ai-example__price{margin-top:.3rem;font-size:.8rem;letter-spacing:.08em;color:var(--color-text);word-break:keep-all}
.ai-example__arrow{flex:none;width:26px;height:1px;background:currentColor;opacity:.5;transition:width .6s var(--ease-out),opacity .6s var(--ease-out)}
.ai-example:hover .ai-example__arrow{width:38px;opacity:1}
@media(max-width:600px){.ai-example{flex-direction:column;align-items:flex-start}.ai-example__arrow{display:none}}
.ai-example__nowrap{white-space:nowrap}

/* 最初の画面の言葉:漢字一文字・英語・サービス名・ひと言を、1本の縦の軸で真ん中にそろえる
   (字間を広げた行は、最後の字のうしろにも字間が付くので、その分を右から引いて真ん中を合わせる) */
.svc-hero__text{justify-items:center;text-align:center}
.svc-hero__kanji{justify-content:center}
.svc-hero__mark{display:none}
.svc-hero__en{margin-right:-.55em}
.svc-hero__name{margin-right:-.26em}
/* ひと言:字間の分を右から引く(文末の「。」の半字ぶんは、最後のまとまり copy-phrase--end で引く) */
.svc-hero__lead{margin-right:-.14em}

/* 流れの目安:「公開までの目安/約1週間〜1か月/(プランにより異なります)」と3行に分けて、まん中の期間を少しだけ大きく */
.svc-flow__note--stack{display:grid;justify-items:center;gap:.15rem}
.svc-flow__note--stack .svc-flow__note-label{font-size:.74rem;letter-spacing:.24em;margin-right:-.24em;color:var(--color-text-faint)}
.svc-flow__note--stack .svc-flow__note-main{font-size:1rem;letter-spacing:.14em;margin-right:-.14em;color:var(--color-text)}
.svc-flow__note--stack .svc-flow__note-sub{display:block;font-size:.74rem;margin-right:-.12em}