/* ==========================================================================
   雄喜晃株式会社 — Motion Layer  v1
   --------------------------------------------------------------------------
   既存の style.css / 各ページのCSSには一切手を入れず、
   「動き」だけを上から重ねるレイヤーです。
   JS が付けたクラスにだけ効くので、JS が動かない環境でも
   コンテンツは必ず表示されます（真っ白にならない設計）。
   ========================================================================== */

/* ---------- 1. スクロール進捗バー ---------- */
.mo-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:400;pointer-events:none}
.mo-progress i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#d97843,#f1b083);box-shadow:0 0 10px rgba(217,120,67,.5)}

/* ---------- 2. ヘッダー（スクロールで少し締まる） ---------- */
.header{transition:box-shadow .35s ease,background .35s ease}
.header .header-inner{transition:padding .35s cubic-bezier(.22,1,.36,1)}
.header.is-scrolled{box-shadow:0 8px 28px rgba(10,37,64,.10)}
.header.is-scrolled .header-inner{padding-top:9px;padding-bottom:9px}
.site-hd{transition:box-shadow .35s ease}
.site-hd.is-scrolled{box-shadow:0 8px 28px rgba(10,37,64,.10)}

/* ---------- 3. ヒーロー：背景で線と光点がつながり続ける ---------- */
.mo-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.mo-hero-canvas.is-on{opacity:1}
.hero-inner,.hero-grid,.page-header .container{position:relative;z-index:2}

/* ---------- 4. ヒーロー：行ごとにマスクで立ち上がる ---------- */
.mo-line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.mo-line > i{display:block;font-style:inherit;transform:translateY(114%);opacity:0;
  animation:mo-lineup 1.05s cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--d,0s)}
@keyframes mo-lineup{to{transform:translateY(0);opacity:1}}

/* 強調語の下線がスッと引かれる */
.mo-underline{display:inline-block;position:relative}
.mo-underline::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:2px;
  background:rgba(217,120,67,.55);transform:scaleX(0);transform-origin:0 50%;
  animation:mo-draw .9s cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--ud,.85s)}
@keyframes mo-draw{to{transform:scaleX(1)}}

/* web-design の h1 内マーカーを左から塗る */
.hero h1 .mo-uwipe{background-repeat:no-repeat;background-size:0% 100%;
  animation:mo-uwipe .95s cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--ud,.85s)}
@keyframes mo-uwipe{to{background-size:100% 100%}}

/* ヒーロー各要素の時差フェード */
.mo-up{opacity:0;transform:translateY(22px);
  animation:mo-upin .95s cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--d,0s)}
@keyframes mo-upin{to{opacity:1;transform:none}}
.hero-copy{animation:none}

/* ---------- 5. スクロール連動リビール（時差つき） ---------- */
.mo-rev{opacity:0;transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.19,1,.22,1),transform .95s cubic-bezier(.19,1,.22,1)}
.mo-rev.is-in{opacity:1;transform:none}

/* ---------- 5b. 価格のポップ登場（数字は書き換えない） ---------- */
.mo-pop{opacity:0;transform:scale(.84);transform-origin:50% 60%;
  transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .95s cubic-bezier(.19,1,.22,1)}
.mo-pop.is-in{opacity:1;transform:none}

/* ---------- 6. カードの3D傾き ---------- */
.mo-tilt{will-change:transform}

/* ---------- 7. カスタムカーソル（デスクトップのみ・標準カーソルは残す） ---------- */
.mo-cursor{position:fixed;top:0;left:0;width:0;height:0;z-index:9999;pointer-events:none;
  opacity:0;transition:opacity .35s ease}
.mo-cursor::before{content:"";position:absolute;left:-19px;top:-19px;width:38px;height:38px;
  border-radius:50%;border:1.5px solid rgba(10,37,64,.26);
  transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .3s ease,background-color .3s ease}
.mo-cursor.is-on{opacity:1}
.mo-cursor.on-dark::before{border-color:rgba(255,255,255,.48)}
.mo-cursor.is-hot::before{transform:scale(1.7);border-color:#d97843;background:rgba(217,120,67,.12)}

/* ---------- 8. マグネットボタン ---------- */
.mo-mag{will-change:transform}

/* ---------- 9. スクロールキュー ---------- */
.mo-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.6rem;letter-spacing:.34em;color:rgba(255,255,255,.45);
  pointer-events:none;opacity:0;animation:mo-upin 1s ease 1.6s forwards}
.mo-cue i{display:block;width:1px;height:46px;background:rgba(255,255,255,.22);
  position:relative;overflow:hidden}
.mo-cue i::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;
  background:#d97843;animation:mo-cue 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mo-cue{0%{transform:translateY(0)}55%,100%{transform:translateY(92px)}}
@media(max-width:860px){.mo-cue{display:none}}

/* ---------- 10. ページ遷移 ---------- */
/* ★2026-09-04：クロスフェード（@view-transition）は廃止。
   stage.css のカーテン遷移（C-6）に置き換えたので、ここで二重に animate しない。 */

/* ---------- 動きを減らす設定を尊重 ---------- */
@media(prefers-reduced-motion:reduce){
  .mo-line > i,.mo-up,.mo-cue{animation:none;opacity:1;transform:none}
  .mo-underline::after{animation:none;transform:scaleX(1)}
  .hero h1 .mo-uwipe{animation:none;background-size:100% 100%}
  .mo-rev,.mo-pop{opacity:1;transform:none;transition:none}
  .mo-cue,.mo-cursor,.mo-progress{display:none}
  .mo-hero-canvas{opacity:.5;transition:none}
}

/* ---------- 11. 制作実績カード＝ブラウザ枠＋ホバーで中身がスクロール ---------- */
/* portfolio.js の shot があるカードだけ .mo-win になります（無ければ従来の1枚絵） */
.hp-work .ph.mo-win,
.pf-card .pf-thumb.mo-win{aspect-ratio:auto;overflow:hidden;background:#fff}
.mo-win-bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  background:linear-gradient(#f5f7f9,#e8edf2);border-bottom:1px solid rgba(10,37,64,.09)}
.mo-win-bar i{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:#d7dce3}
.mo-win-bar i:nth-child(1){background:#ff5f57}
.mo-win-bar i:nth-child(2){background:#febc2e}
.mo-win-bar i:nth-child(3){background:#28c840}
.mo-win-bar b{margin-left:7px;height:8px;flex:1;border-radius:4px;background:rgba(10,37,64,.07)}
.mo-win-port{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:#fff}
.hp-work .ph.mo-win .mo-win-port img,
.pf-card .pf-thumb.mo-win .mo-win-port img{width:100%;height:auto;object-fit:fill;display:block;
  transform:translateY(0);transition:transform .9s cubic-bezier(.19,1,.22,1);will-change:transform}
/* カテゴリバッジがブラウザバーに重ならないよう下げる */
.hp-work .ph.mo-win .cat{top:31px}
.pf-card .pf-thumb.mo-win .pf-cat{top:34px}

@media(hover:hover){
  .hp-work:hover .ph.mo-win .mo-win-port img,
  .pf-card:hover .pf-thumb.mo-win .mo-win-port img{
    transform:translateY(calc(-100% + (100% / var(--r,1))));
    transition-duration:clamp(2s,calc((var(--r,1) - 1) * 3s),6.5s);
    transition-timing-function:linear}
}
@media(prefers-reduced-motion:reduce){
  .hp-work:hover .ph.mo-win .mo-win-port img,
  .pf-card:hover .pf-thumb.mo-win .mo-win-port img{transform:none;transition:none}
}

/* ==========================================================================
   v2（2026-09-04）スマホ最適化 ＋ PCの見せ場
   ========================================================================== */

/* ---------- 12. 横スワイプのスナップ（スマホの実績・料金） ---------- */
.mo-swipe{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:none;mask-image:none}
.mo-swipe::-webkit-scrollbar{display:none}
.mo-swipe > *{animation:none}
.hp-works-marquee.mo-swipe .hp-works-track{padding:2px 18px 6px}
.pf-marquee.mo-swipe .pf-track{padding:2px 18px 6px}
.mo-swipe .hp-work{width:min(76vw,290px);scroll-snap-align:center}
.mo-swipe .pf-card{width:min(82vw,330px);max-width:none;scroll-snap-align:center}

/* 料金プランを横スワイプに（スマホのみ・JSがクラスを付けたときだけ） */
.mo-swipe-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:24px 18px 6px;margin-inline:-18px}
.mo-swipe-grid::-webkit-scrollbar{display:none}
.mo-swipe-grid > *{flex:0 0 min(80vw,320px);scroll-snap-align:center}

/* 位置ドット */
/* ★マーキー直下に入るので下の余白を必ず持たせる。
   持たせないと下のCTAボタンと隙間ゼロで接触する（2026-09-04 実機で発覚） */
.hp-works-marquee.mo-swipe,.pf-marquee.mo-swipe{margin-bottom:6px}
.mo-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin:16px 0 34px}
.mo-swipe-grid + .mo-dots{margin:14px 0 12px}
.mo-dots button{width:7px;height:7px;padding:0;border:none;border-radius:50%;
  background:rgba(10,37,64,.2);cursor:pointer;
  transition:width .3s cubic-bezier(.22,1,.36,1),background .3s ease,border-radius .3s ease}
.mo-dots button[aria-current="true"]{width:22px;border-radius:4px;background:#d97843}

/* ---------- 13. ヘッダーの自動隠し（スマホのみ） ---------- */
/* ★ハマりどころ：ヘッダーに transform が乗ると、その中の position:fixed な
   メニュードロワーの基準がヘッダーに変わり、閉じた状態（translateX(100%)）が
   そのまま横スクロール量になって画面が320pxはみ出す。
   overflow-x:clip では止まらない（scrollWidth は増えたまま）。
   ヘッダーが隠れている間は閉じたドロワー自体を消すのが確実。
   will-change:transform も同じ理由で付けないこと。 */
@media(max-width:860px){
  .header.is-hidden .nav:not(.is-open),
  .site-hd.is-hidden .nav:not(.is-open){display:none}
}
.header{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background .35s ease}
.header.is-hidden,.site-hd.is-hidden{transform:translateY(-102%)}

/* ---------- 14. タップの押し込み（タッチ端末のみ） ---------- */
@media(hover:none){
  .hp-btn,.btn,.cta-button,.hero-cta,.nav-cta,.pc-link,.service-link,.m-visit,
  .sticky-cta a,.mo-dots button{transition:transform .12s ease}
  .hp-btn:active,.btn:active,.cta-button:active,.hero-cta:active,.nav-cta:active,
  .pc-link:active,.service-link:active,.m-visit:active,.sticky-cta a:active{transform:scale(.965)}
  .hp-work:active,.pf-card:active,.plan:active,.service-card:active,
  .mvv-card:active,.product-card:active,.hp-point:active{transform:scale(.985)}
}

/* ---------- 15. 見出しラベルの罫線が引かれる ---------- */
.mo-label::before{content:"";display:inline-block;vertical-align:middle;
  width:0;height:2px;background:currentColor;opacity:.75;margin-right:0;
  transition:width .75s cubic-bezier(.19,1,.22,1) .12s,margin-right .75s cubic-bezier(.19,1,.22,1) .12s}
.mo-label.mo-drawn::before{width:26px;margin-right:11px}

/* ---------- 16. セクション境界の斜め切り（色はJSが前セクションから取る） ---------- */
/* ★::before は使わない。style.css の .cta::before（オレンジの光）と
   取り合いになって両方壊れる。専用の要素をJSが差し込む。 */
.mo-cut{position:relative}
.mo-cut-shape{position:absolute;top:-1px;left:0;width:100%;height:clamp(30px,4.5vw,64px);
  background:var(--mo-cut-color,#fff);clip-path:polygon(0 0,100% 0,0 100%);
  z-index:1;pointer-events:none}
.mo-cut > *:not(.mo-cut-shape){position:relative;z-index:2}

/* ---------- 17. PCのカードの浮き上がりを少し深く ---------- */
@media(hover:hover){
  .service-card,.mvv-card,.product-card,.hp-point,.why-card,.plan{transition:box-shadow .3s ease}
  .service-card:hover,.mvv-card:hover,.product-card:hover,
  .hp-point:hover,.why-card:hover,.plan:hover{box-shadow:0 18px 44px rgba(10,37,64,.14)}
}

@media(prefers-reduced-motion:reduce){
  .mo-label::before{transition:none;width:26px;margin-right:11px}
  .header.is-hidden,.site-hd.is-hidden{transform:none}
  .mo-swipe,.mo-swipe-grid{scroll-behavior:auto}
}