/* A案の動き（html.motion が付いている間だけ有効。「動きを減らす」設定・JS無効では静的表示） */
:root{--ease-lux:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* オープニング（セッション中の初回のみ。黒い幕が上へ抜ける） */
.intro{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:#0b0b0b;color:#fff;transition:transform 1.2s var(--ease-io) .1s}
.intro.is-done{transform:translateY(-100%)}
.intro__inner{text-align:center}
.intro__word{display:block;overflow:hidden;font-family:var(--font-en,Hind,sans-serif);font-size:clamp(64px,10vw,120px);font-weight:700;line-height:1.1}
.intro__word span{display:block;transform:translateY(110%);animation:aIntroUp 1.1s var(--ease-lux) .15s forwards}
.intro__line{display:block;width:0;height:2px;margin:22px auto 0;background:#fff;animation:aIntroLine 1.1s var(--ease-io) .35s forwards}
.intro__sub{display:block;margin-top:12px;overflow:hidden;font-size:13px;font-weight:700;letter-spacing:.5em}
.intro__sub span{display:block;transform:translateY(120%);animation:aIntroUp 1s var(--ease-lux) .55s forwards}
@keyframes aIntroUp{to{transform:none}}
@keyframes aIntroLine{to{width:120px}}
body.is-intro{overflow:hidden}
html:not(.motion) .intro{display:none}

/* 進捗バー */

/* ヒーロー: 写真がゆっくり拡大し、見出しが1文字ずつせり上がる */
.motion .hero__bg{transform:translate3d(0,var(--py,0),0) scale(1.06)}
.motion .hero__title .ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.motion .hero__title .ch>span{display:inline-block;transform:translateY(115%) rotate(4deg);opacity:0;transition:transform 1.1s var(--ease-lux),opacity .8s ease;transition-delay:calc(var(--i)*60ms + 150ms)}
.motion.is-ready .hero__title .ch>span{transform:none;opacity:1}
.motion .hero__lead,.motion .hero__btns,.motion .page-hero .hero__lead{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s var(--ease-lux)}
.motion.is-ready .hero__lead{opacity:1;transform:none;transition-delay:.85s}
.motion.is-ready .hero__btns{opacity:1;transform:none;transition-delay:1.05s}
.motion .site-header{transform:translateY(-100%);transition:transform .9s var(--ease-lux),background .2s,color .2s}
.motion.is-ready .site-header{transform:none;transition-delay:.5s,0s,0s}
.motion .strip{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform 1s var(--ease-lux)}
.motion.is-ready .strip{opacity:1;transform:none;transition-delay:1.2s}

/* スクロールで現れる */
.motion [data-reveal]{opacity:0;transform:translate3d(0,40px,0);transition:opacity .9s ease var(--d,0ms),transform 1.1s var(--ease-lux) var(--d,0ms)}
.motion [data-reveal].is-in{opacity:1;transform:none}
/* 見出しは左から書き出す */
.motion .headline__title{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-io)}
.motion .headline.is-in .headline__title{clip-path:inset(0 0 0 0)}
/* 写真はカーテンを引くように */
.motion .curtain{position:relative;overflow:hidden}
.motion .curtain>img{transform:scale(1.15);clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-io),transform 1.5s var(--ease-lux)}
.motion .curtain.is-in>img{clip-path:inset(0);transform:scale(1)}
.motion .curtain[data-reveal]{opacity:1;transform:none}
.motion .ncard figure.curtain{overflow:hidden}

/* ホバー（位置は動かさない。色・拡大のみ。ゴールドなし） */
.card__img,.ncard img{transition:transform 1.3s var(--ease-lux)}
.card:hover .card__img{transform:scale(1.05)}
.svc-card{transition:box-shadow .5s,background .5s}
.svc-card:hover{background:#fff}
.svc-card .service__icon{transition:transform .8s var(--ease-lux)}
.svc-card:hover .service__icon{transform:scale(1.06)}
.news__list li{transition:opacity .5s}
.faq details{transition:background .4s}
.button,.button-outline,.hbtn,.ntop__more{transition:background .4s,color .4s,opacity .3s}

/* LINE固定ボタンは遅れて入る */
.motion .line-fab{opacity:0;translate:0 24px;transition:opacity .8s ease,translate .9s var(--ease-lux)}
.motion .line-fab.is-in{opacity:1;translate:0 0}
.motion .line-fab.is-in.is-hidden{opacity:0}

@media(max-width:1079px){.motion [data-reveal]{transform:translate3d(0,28px,0)}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}

/* 代表挨拶の写真は元のレイアウト（画面右端まで広がる絶対配置）を保つ。カーテンの position 指定で上書きしない */
.motion .information__image.curtain{position:absolute}
@media(max-width:1079px){.motion .information__image.curtain{position:static}}


/* ---- header「在庫情報」: 常にきらっと光る ---- */
.motion .global-nav__stock a{position:relative;overflow:hidden;isolation:isolate}
.motion .global-nav__stock a::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;z-index:-1;width:42%;background:linear-gradient(105deg,transparent 0%,rgb(255 255 255/0) 20%,rgb(255 255 255/70%) 50%,rgb(255 255 255/0) 80%,transparent 100%);transform:translateX(-150%) skewX(-18deg);animation:stockSheen 3.48s ease-in-out 2.61s infinite}
.motion .site-header.is-scrolled .global-nav__stock a::before{background:linear-gradient(105deg,transparent 0%,rgb(196 160 74/0) 20%,rgb(196 160 74/80%) 50%,rgb(196 160 74/0) 80%,transparent 100%)}
@keyframes stockSheen{0%{transform:translateX(-150%) skewX(-18deg)}38%,100%{transform:translateX(330%) skewX(-18deg)}}
.motion .global-nav__stock a{animation:stockGlow 3.48s ease-in-out 2.61s infinite}
@keyframes stockGlow{ 0%,100%{box-shadow:var(--btn-shadow),0 0 0 0 rgb(196 160 74/0)}42%{box-shadow:var(--btn-shadow),0 0 18px 2px rgb(196 160 74/45%)}}
.stock-spark{position:absolute;z-index:2;width:11px;height:11px;pointer-events:none;opacity:0;background:var(--gold);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle 3.05s ease-in-out infinite}
.stock-spark:nth-child(1){top:5px;left:14%;animation-delay:2.83s}
.stock-spark:nth-child(2){bottom:5px;left:58%;width:8px;height:8px;animation-delay:3.81s}
.stock-spark:nth-child(3){top:7px;right:12%;width:9px;height:9px;animation-delay:4.78s}
@keyframes twinkle{0%,60%,100%{opacity:0;transform:scale(.2) rotate(0)}18%{opacity:1;transform:scale(1) rotate(45deg)}34%{opacity:0;transform:scale(.3) rotate(90deg)}}
@media(max-width:1180px){.motion .global-nav__stock a::before,.stock-spark{display:none}.motion .global-nav__stock a{animation:none}}
@media(prefers-reduced-motion:reduce){.motion .global-nav__stock a::before,.stock-spark{animation:none;display:none}.motion .global-nav__stock a{animation:none}}

/* ---- ヒーローのスライドショー（B案と同じ：クロスフェード＋ゆっくりズーム） ---- */
.hero__bg[data-slides]{background:none}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center 60%;opacity:0;transform:scale(1.02);transition:opacity 2.8s ease-in-out}
.hero__slide.is-active{opacity:1;animation:slideZoom 10s ease-out forwards}
@keyframes slideZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hero__dots{position:absolute;left:50%;bottom:26px;z-index:2;display:flex;gap:10px;transform:translateX(-50%)}
.hero__dots button{width:34px;height:3px;background:rgb(255 255 255/35%);transition:background .4s}
.hero__dots button.is-active{background:var(--gold)}