/* 動画の演出「雨上がりから虹へ」（2026-10-17 追加）
   style.css に重ねて、動画の演出だけを足すスタイル。
   色・書体・余白は公開サイトの変数（--bg, --ink, --r-blue など）をそのまま使う。 */

/* ---------- Hero：暗い画面のうち、カーソルの周りだけ映像が見える ---------- */
.hero__spot{
  position:absolute;inset:0;pointer-events:none;
  /* 光の外側の暗さ（0で暗くしない、1で真っ暗）。カフェの動画は元々暗めなので控えめにしている */
  background:rgba(14,16,20,.38);
  -webkit-mask-image:radial-gradient(circle var(--spot-r,260px) at var(--mx,32%) var(--my,46%),transparent 0,rgba(0,0,0,.25) 45%,#000 100%);
          mask-image:radial-gradient(circle var(--spot-r,260px) at var(--mx,32%) var(--my,46%),transparent 0,rgba(0,0,0,.25) 45%,#000 100%);
}
.hero__hint{
  margin-top:clamp(28px,4vw,44px);
  font-size:clamp(.82rem,1.3vw,.92rem);letter-spacing:.12em;color:var(--ink-soft);
}

/* ---------- About：スクロールで雨が上がり、虹がかかる ---------- */
.story-stage{padding-block:0;height:320vh}
.stage__sticky{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.stage__media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:#15171B center/cover no-repeat; /* 下地の静止画は motion.js がスクロール開始時に入れる */
  /* 入ってくるとき：小さめの角丸の窓から、全画面へ広がる（--enter は motion.js） */
  transform:scale(calc(.88 + var(--enter,1) * .12));
  border-radius:calc((1 - var(--enter,1)) * 24px);
  will-change:transform;
}
.stage__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage__video--rain{
  transform:scale(calc(1.08 - var(--p,0) * .08));transform-origin:50% 60%;
  opacity:0;transition:opacity 1.2s var(--ease); /* 再生が始まったら下地の静止画の上にふわっと重ねる */
}
.stage__video--rain.is-ready{opacity:1}
.stage__video--rainbow{opacity:var(--rainbow,0)}
.stage__shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,22,27,.86) 0%,rgba(20,22,27,.62) 55%,rgba(20,22,27,.38) 100%);
  opacity:calc(1 - var(--rainbow,0) * .3);
}
.stage__content{position:relative;z-index:1}
.story-stage .about__body{max-width:640px}
.story-stage .about__body p{color:var(--ink)}
.stage__line{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stage__line.is-on{opacity:1;transform:none}

/* 「雨上がりの空に虹がかかるように、」に、左から虹色が差していく */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rainbow-text{
    background-image:linear-gradient(90deg,#8FC6F2 0%,#B3B6F2 16%,#F2B4D0 33%,#9BE6D4 49.9%,#EEF0F4 50%,#EEF0F4 100%);
    background-size:200% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    transition:background-position 1.8s var(--ease);
  }
  .is-rainbow .rainbow-text{background-position:0 0}
}

/* 右端の進み具合 */
.stage__progress{
  position:absolute;z-index:1;right:var(--pad);top:50%;translate:0 -50%;
  width:1px;height:140px;background:rgba(255,255,255,.18);
}
.stage__progress i{
  display:block;width:100%;height:calc(var(--p,0) * 100%);
  background:linear-gradient(#8FC6F2,#B3B6F2,#F2B4D0);
}

/* ---------- 線のイラスト（事業内容 01〜05・強み 4項目）----------
   線は文字の白、要の1か所だけ見出しラベルと同じ緑。画面に入ると線が描かれ、そのあと緑の部分が少し動き続ける */
.service .svc{align-items:flex-start}
.svc__head{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex:0 0 auto}
.svc__head .svc__no{padding-top:0}
.service .svc__main{padding-top:clamp(4px,1vw,12px)}
.svc__icon{width:clamp(52px,5.4vw,64px);height:clamp(52px,5.4vw,64px);flex:0 0 auto}
.str__icon{display:block;flex:0 0 auto;width:clamp(44px,4.4vw,52px);height:clamp(44px,4.4vw,52px)}
.exp__icon{display:block;flex:0 0 auto;width:clamp(44px,4.4vw,52px);height:clamp(44px,4.4vw,52px)} /* Experience（2026-10-20） */
/* 強みのカード：アイコンの右横に見出しを並べて、ひとかたまりの「顔」にする（2026-10-18 Nao「全部左寄りでバランスは？」） */
.str__head{display:flex;align-items:center;gap:clamp(14px,1.6vw,18px);margin-bottom:.9em}
.strength .str__head h3{margin-bottom:0}
.str__head .nb{display:inline-block} /* 狭い画面で折り返すときは、言葉の区切りで折り返す */
.licon{overflow:visible;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.licon .k{stroke:var(--ink);stroke-opacity:.85}
.licon .g{stroke:var(--accent)}
.licon .kf{fill:var(--ink);fill-opacity:.85;stroke:none}
.licon .gf{fill:var(--accent);stroke:none}
.licon .knob{fill:var(--bg)}
.licon .m-fill{fill:var(--accent);stroke:none;opacity:0}
.licon .m-ping{fill:none;stroke:var(--accent);opacity:0}
.licon .m-comet{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-dasharray:.06 1.2;opacity:0}
.licon .m-comet--ink{stroke:var(--ink)}
.licon .m-press,.licon .m-rip1,.licon .m-rip2,.licon .m-twinkle,.licon .m-ping,.licon .m-scan,
.licon .m-k1,.licon .m-k2,.licon .m-k3,.licon .m-bar{transform-box:fill-box;transform-origin:center}
.licon .m-bar{transform-origin:center bottom}
.licon .m-spin{transform-box:fill-box;transform-origin:center} /* Experience「支える」の歯車 */
/* 線を描く：motion.js が html に .licon-draw を付けたときだけ隠して描く（動かない環境では最初から完成した絵）
   線の部品（.k と .g、どれも pathLength="1"）はクラスで指定する。[pathLength] で指定すると、
   Chrome では .is-on を付けても白い線（.k）が描き直されないことがあった（2026-10-18） */
.licon-draw .licon .k,.licon-draw .licon .g{stroke-dasharray:1;stroke-dashoffset:1}
.licon-draw .licon.is-on .k{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1) .15s}
.licon-draw .licon.is-on .g{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1) .6s}
.licon-draw .licon .kf,.licon-draw .licon .gf{opacity:0}
.licon-draw .licon.is-on .kf,.licon-draw .licon.is-on .gf{opacity:1;transition:opacity .4s ease 1s}
/* 描き終わったあと、画面に見えている間だけ緑の部分が少し動く（.is-live は motion.js が付け外し） */
.licon.is-live .m-glow{animation:licon-glow 3.4s ease-in-out infinite}
.licon.is-live .m-press{animation:licon-press 2.4s ease-in-out infinite}
.licon.is-live .m-rip1{animation:licon-rip 2.4s ease-out infinite}
.licon.is-live .m-rip2{animation:licon-rip 2.4s ease-out .3s infinite}
.licon.is-live .m-redraw{animation:licon-redraw 4s cubic-bezier(.22,.61,.36,1) infinite}
.licon.is-live .m-twinkle{animation:licon-twinkle 2.6s ease-in-out infinite}
.licon.is-live .m-ping{animation:licon-ping 2.8s ease-out infinite}
.licon.is-live .m-comet{animation:licon-comet 3s linear infinite}
.licon.is-live .m-scan{animation:licon-scan 4.2s ease-in-out infinite}
.licon.is-live .m-bar1{animation:licon-bar 3.6s ease-in-out infinite}
.licon.is-live .m-bar2{animation:licon-bar 3.6s ease-in-out .4s infinite}
.licon.is-live .m-bar3{animation:licon-bar 3.6s ease-in-out .8s infinite}
.licon.is-live .m-k1{animation:licon-knob 4s ease-in-out infinite}
.licon.is-live .m-k2{animation:licon-knob 4s ease-in-out -1.3s infinite reverse}
.licon.is-live .m-k3{animation:licon-knob 4s ease-in-out -2.6s infinite}
.licon.is-live .m-spin{animation:licon-spin 9s linear infinite}
.licon.is-live .m-spin--rev{animation:licon-spin 6s linear infinite reverse}
@keyframes licon-glow{0%,100%{opacity:0}50%{opacity:.35}}
@keyframes licon-press{0%,60%,100%{transform:scale(1)}70%{transform:scale(.9)}80%{transform:scale(1)}}
@keyframes licon-rip{0%{opacity:0;transform:scale(.7)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes licon-redraw{0%{stroke-dashoffset:1;opacity:1}35%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes licon-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.4}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
@keyframes licon-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes licon-comet{0%{stroke-dashoffset:.06;opacity:1}100%{stroke-dashoffset:-1;opacity:1}}
@keyframes licon-scan{0%,100%{transform:translate(-2.5px,0)}50%{transform:translate(2.5px,1px)}}
@keyframes licon-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}
@keyframes licon-knob{0%,100%{transform:translateX(-4px)}50%{transform:translateX(5px)}}
@keyframes licon-spin{to{transform:rotate(360deg)}}

/* ---------- Message：代表者名を本文のすぐ下に。略歴は小さな見出しをつけて、小さく控えめに ---------- */
.story .story__sign{margin-top:clamp(28px,3.4vw,40px)}
/* 略歴：最初は閉じておき、「略歴を見る」ボタンで開く（<details>）。ボタンは右寄せの名前のすぐ下に置き、
   開いた略歴も右側にまとめる（2026-10-18 Nao「ボタンを右寄せの名前の下あたりに」） */
.story__career-box{margin-top:clamp(16px,2vw,22px);text-align:right} /* details は flex にしない（Safari で効かないことがある） */
.story__career-box .story__career{width:min(100%,560px);margin-left:auto;text-align:left}
.story__career-btn{
  list-style:none;display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  padding:10px 20px;border:1px solid var(--line);border-radius:100px;
  font-size:.8rem;letter-spacing:.16em;color:var(--ink-soft);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.story__career-btn::-webkit-details-marker{display:none}
.story__career-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.story__career-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.story__career-box .when-open,.story__career-box[open] .when-closed{display:none}
.story__career-box[open] .when-open{display:inline}
.story__career-icon{position:relative;width:10px;height:10px;flex:0 0 auto}
.story__career-icon::before,.story__career-icon::after{
  content:"";position:absolute;left:0;top:50%;width:10px;height:1px;background:currentColor;
  transition:transform .3s var(--ease);
}
.story__career-icon::after{transform:rotate(90deg)}
.story__career-box[open] .story__career-icon::after{transform:rotate(0)}
.story__career-box[open] .story__career{animation:career-in .45s var(--ease)}
@keyframes career-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.story .story__career{margin-top:18px;border-top:0;max-width:640px}
.story .story__career>div{gap:16px;padding:4px 0;border-bottom:0;align-items:baseline}
.story .story__career dt{flex:0 0 58px;font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft)} /* 年号は強調しない（本文と同じ控えめな色） */
.story .story__career dd{font-size:.8rem;line-height:1.65;color:var(--ink-soft)}

/* ---------- Strength：つなぐ線の映像を背景に、4つの強みを1本の線で結ぶ ---------- */
.strength{overflow:clip}
.strength__bg{position:absolute;inset:0;z-index:0}
.strength__bg::before,.strength__bg::after{
  content:"";position:absolute;left:0;right:0;height:22vh;z-index:1;pointer-events:none;
}
.strength__bg::before{top:0;background:linear-gradient(var(--bg),transparent)}
.strength__bg::after{bottom:0;background:linear-gradient(transparent,var(--bg))}
.strength__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.strength__sticky video{width:100%;height:100%;object-fit:cover;display:block}
.strength__shade{position:absolute;inset:0;background:rgba(30,33,39,.5)}
.strength__content{position:relative;z-index:2}
.strength .str-grid{position:relative}
.str-path{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(179,182,242,.7));
}
.strength .str{position:relative;z-index:1}
[data-theme="dark"] .strength .str{
  background:rgba(44,47,53,.84);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* ---------- Message：輪郭だけの「AD」に、光の流れる「R」が加わって「RAD」になる ---------- */
.r-visual{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2.6vw,28px);margin-block:clamp(44px,6vw,84px);
}
.r-visual__canvas{
  display:block;align-self:center;
  /* 横幅は画面いっぱい（R が画面の左端の外から入ってこられるように。2026-10-18 Nao「画面の途中から浮いて出てくる」）。
     はみ出した分は .story の overflow:hidden で隠れる */
  width:100vw;max-width:none;
  /* 文字の大きさは今までどおり（見出しとのバランスで控えめに）：高さ＝以前の横幅 clamp(220px,34vw,440px) の 5/12 */
  height:calc(clamp(220px,34vw,440px) * 5 / 12);
}
.r-visual__caption{
  margin:0;text-align:center;color:var(--ink-soft);font-size:clamp(.9rem,1.4vw,1rem);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
/* R・RAD・4語は、見出しラベル（Message など）と同じ --accent の緑に揃える。光の rgba(84,220,200) は --accent（#54DCC8）と同じ色 */
.r-visual__caption b{font-family:var(--ff-en);font-weight:600;letter-spacing:.06em;color:var(--accent);text-shadow:0 0 14px rgba(84,220,200,.4)}
.r-visual__caption span{display:inline-block}
.r-visual.is-done .r-visual__caption{opacity:1;transform:none}
.r-visual__words{
  list-style:none;margin:0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);
}
.r-visual__words li{
  display:flex;flex-direction:column;gap:4px;
  padding-top:14px;border-top:1px solid rgba(84,220,200,.35);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.r-visual__words li.is-on{opacity:1;transform:none}
.r-visual__words b{
  font-family:var(--ff-en);font-weight:500;letter-spacing:.04em;line-height:1.3;
  font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--accent);
  text-shadow:0 0 12px rgba(84,220,200,.35); /* R と同じ緑の光をうっすら */
}
.r-visual__words span{color:var(--ink-soft);font-size:.9rem;line-height:1.6}
.is-reduced .r-visual__words li,.is-reduced .r-visual__caption{opacity:1;transform:none}

/* ---------- Contact：雨上がりの街の空 ---------- */
.contact{overflow:hidden}
.contact__media{position:absolute;inset:0;z-index:0}
.contact__media picture{position:absolute;inset:0}
.contact__media img{width:100%;height:100%;object-fit:cover;display:block}
.contact__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(44,47,53,.45) 30%,rgba(30,33,39,.6) 100%);
}
.contact__inner{position:relative;z-index:1}
.contact .contact__lead,.contact .contact__mail{color:#D9DDE5}

/* ---------- スマホ ---------- */
@media (max-width:760px){
  /* 事業内容（スマホ）：左にアイコン、右に小さな番号と見出し。本文はその下に全幅で */
  .service .svc{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"icon no" "icon title" "text text";
    column-gap:16px;row-gap:0;align-items:center;
  }
  .service .svc__head,.service .svc__main{display:contents}
  .service .svc__icon{grid-area:icon;width:48px;height:48px}
  .service .svc__no{grid-area:no;align-self:end;line-height:1.2}
  .service .svc__main h3{grid-area:title;align-self:start;margin:4px 0 0}
  .service .svc__main p{grid-area:text;margin-top:14px}
  .str__icon{width:44px;height:44px}
  .service .svc__main{padding-top:0}
  .story-stage{height:280vh}
  .story-stage .about__lead{font-size:clamp(1.3rem,6.2vw,1.9rem);margin-bottom:22px}
  .story-stage .about__body p{font-size:.9rem;line-height:1.8}
  .story-stage .about__body p+p{margin-top:1em}
  .stage__shade{background:linear-gradient(180deg,rgba(20,22,27,.55),rgba(20,22,27,.82))}
  .stage__progress{display:none}
  /* 1列のときは、カードの左に「導線」を引く余白をとる */
  .strength .str-grid{padding-left:20px}
  .r-visual{gap:18px}
  .r-visual__words{grid-template-columns:1fr 1fr;gap:16px 18px}
  .r-visual__words b{font-size:1.15rem}
  .r-visual__words span{font-size:.8rem}
}

/* ---------- 「視差効果を減らす」設定の端末：動画を使わず、静止画で同じ流れを見せる ---------- */
.is-reduced .story-stage{height:auto}
.is-reduced .stage__media{transform:none;border-radius:0}
.is-reduced .stage__sticky{position:relative;height:auto;min-height:100svh;padding-block:clamp(90px,13vw,180px)}
.is-reduced .stage__line{opacity:1;transform:none}
.is-reduced .hero__spot{display:none}