/* front-page 専用CSS（旧: テンプレート<head>のインライン<style>・2026-07-30に外部化） */
  html,body{margin:0;padding:0;}
  :root{
    --paper:#ffffff;      /* pure white ground */
    --paper-2:#F5F4F1;    /* whisper-off-white panel for separation */
    --ink:#242220;        /* body ink */
    --ink-soft:#514d47;   /* secondary ink */
    --stone:#8f8b82;      /* muted labels / captions */
    --line:#E7E4DE;       /* hairlines */
    --dark:#26241F;       /* warm near-black sections */
    --dark-2:#1E1C18;
    --brass:#A89878;      /* restrained warm accent (underlines / pill) */
    --paper-on-dark:#EDE8DF;
    --serif-jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* フォント統一（オーナー指示 2026-07-28） */
    --serif-en:"Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    --sans:"Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* 旧: システムゴシック。フォント統一（オーナー指示 2026-07-28） */
    --measure:60ch;
    --gutter:max(clamp(24px,5vw,64px),calc((100vw - 1472px)/2)); /* 大画面ではガターが伸び、コンテンツを中央1472px枠に整列（画像ブリードは全幅維持） */
  }
  *{box-sizing:border-box;}
  .sg{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif-jp);
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
    position:relative;
  }
  /* faint paper grain */
  .sg::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    opacity:.35;mix-blend-mode:multiply;
    background-image:radial-gradient(rgba(120,115,105,.035) 1px,transparent 1px);
    background-size:3px 3px;
  }
  .sg > *{position:relative;z-index:2;}

  /* ---------- label / utility type ---------- */
  .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--stone);font-weight:500;}
  .en-title{font-family:var(--serif-en);font-style:normal;font-weight:400;color:var(--ink);letter-spacing:.01em;}

  /* ---------- header ---------- */
  .sg-header{
    position:absolute;top:0;left:0;right:0;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:34px var(--gutter);
  }
  .sg-logo{display:flex;align-items:center;gap:18px;color:var(--paper-on-dark);}
  .sg-logo .mark{width:34px;height:34px;border:1px solid rgba(237,232,223,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif-en);font-size:15px;font-style:normal;}
  .sg-logo .jp{font-family:var(--serif-jp);font-size:19px;letter-spacing:.14em;line-height:1;}
  .sg-logo .en{font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;color:rgba(237,232,223,.7);margin-top:5px;text-transform:uppercase;}
  .sg-nav{display:flex;align-items:center;gap:34px;}
  .sg-nav a{font-family:var(--serif-en);font-size:15px;color:rgba(237,232,223,.82);text-decoration:none;letter-spacing:.02em;transition:opacity .3s;}
  .sg-nav a:hover{opacity:.6;}
  .sg-pill{font-family:var(--serif-en);font-size:14px;color:var(--paper-on-dark);border:1px solid rgba(237,232,223,.45);border-radius:40px;padding:11px 26px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:background .35s,color .35s;}
  .sg-pill:hover{background:var(--paper-on-dark);color:var(--dark);}

  /* ---------- hero ---------- */
  /* KVの画面固定（sticky カバー構成）は解除（オーナー指示 2026-08-02）。
     iOSで勢いよくスクロールすると sticky 層の合成が追いつかず、後続
     セクションとの継ぎ目に地色（紙色）が一瞬見えるため、通常フローで
     一緒にスクロールさせる */
  .sg-hero{
    min-height:100vh;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 var(--gutter) clamp(48px,7vh,88px);
    /* クリップをメディア層（.hero-bg）に掛ける構成のため、地は紙色。
       周囲の余白に衛星写真（.kv-sat）を散らす */
    background:var(--paper);
    color:var(--paper-on-dark);overflow:hidden;
  }
  /* 地色が透明なセクションはヒーローが透けるため紙色を明示 */
  .sg-concept,.sg-contact{background:var(--paper);}
  /* 管理バー用の sticky オフセットは、sticky 解除（2026-08-02）に伴い撤去。
     position:relative に top を残すとログイン時だけKVが下へずれるため */
  /* KV拡張の連動（スクリプトが is-kv-framed を駆動）:
     額装中は端の飾りがクリップで中途半端に切れるため隠し、展開後に
     本来の入場アニメを短い遅延で再生 */
  .sg-hero.is-kv-framed .kv-en,
  .sg-hero.is-kv-framed .sg-scroll{animation:none !important;opacity:0;}
  .sg-hero:not(.is-kv-framed) .kv-en{animation-delay:.15s;}
  .sg-hero:not(.is-kv-framed) .sg-scroll{animation-delay:.3s;}
  /* 額装中は固定ヘッダーが紙余白に乗るため墨ロゴ・墨ハンバーガーへ */
  .m-header.is-kvframe .m-logo .m-logo__light{opacity:0;}
  .m-header.is-kvframe .m-logo .m-logo__dark{opacity:1;}
  .m-header.is-kvframe .m-menu span{background:#1f1d1a;}
  /* 拡張ランウェイは撤去（オーナー指示 2026-07-20: 窓拡張をやめ全画面固定）。
     sticky ヒーローの上に opening が通常フローで滑り重なる（カバー構成は維持） */
  /* 写真は別レイヤーに分離（filterを本文に波及させないため。z:-1×isolationで基礎グラデの上・文字の下）
     中身=スライドショー（本家 margin-motion: クロスフェード1.9s＋Ken Burns 8.5s、6.5s間隔）
     ＋ ::after の暗幕グラデ。JS死亡時はマークアップの1枚が静止表示（安全弁） */
  .hero-bg{
    /* メイン写真（余白を、設計するの窓）は衛星写真(z1)より前面
       （オーナー指示 2026-07-19）。飾り（kv-en/sg-scroll）は z4 で写真の上 */
    position:absolute;inset:0;z-index:2;overflow:hidden;
    /* 旧 .sg-hero の基礎グラデ（写真ロード前・透過部の下地）を移設 */
    background:linear-gradient(120deg,#3a4239 0%,#2c322c 45%,#20241e 100%);
  }
  /* KV背景の散らしコラージュは撤去（オーナー指示 2026-07-20）。
     全画面ヒーロー（.hero-bg スライドショー）＋中央コピーのみに */
  .hero-bg .m-hero-slide{
    position:absolute;inset:0;background-size:cover;background-position:center 56%;
    opacity:0;transform:scale(1.1);
    filter:saturate(.95) brightness(.92) contrast(1.03); /* 本家の定常グレーディング */
    transition:opacity 1.9s ease,transform 8.5s linear;will-change:opacity,transform;
  }
  .hero-bg .m-hero-slide.is-m-slide-active{opacity:1;transform:scale(1.02);}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(20,19,16,.55) 0%,rgba(20,19,16,.12) 34%,rgba(20,19,16,.30) 72%,rgba(20,19,16,.66) 100%);
  }
  @media (prefers-reduced-motion:reduce){
    .hero-bg .m-hero-slide{transition:none;transform:none;opacity:0;}
    .hero-bg .m-hero-slide.is-m-slide-active{opacity:1;}
  }
  /* ③ 中央見出し「余白を、設計する」。ヒーロー中央に横組みで最前面（z6）。
     既定は素の表示（reduced-motion/JS死亡時の保険）。モーション時のみ
     no-preference ブロックで opacity:0 に伏せ、is-kvready で最後に出す */
  .kv-center{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:0 24px;}
  .kv-center h1{
    margin:0;font-family:var(--serif-jp);font-weight:400;writing-mode:vertical-rl;
    font-size:clamp(34px,3.8vw,56px);letter-spacing:.22em;line-height:1.9;color:#fff;
    /* 明るいスライドでも白文字が沈まない密着ハロー＋落ち影（薄見え対策 2026-07-20） */
    text-shadow:0 0 18px rgba(0,0,0,.55),0 2px 30px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.4);
  }
  /* ① ローディング画面＝白い幕（社ロゴ）。退場はページ遷移(.m-exit-veil)と
     同じ135°ソフトエッジの白幕。遷移は「覆う」向き(0%→100%)だが、ローディング
     明けは逆向き(100%→0%)＝左上から右下へ抜ける（オーナー指示 2026-07-21） */
  .m-loader{
    position:fixed;inset:0;z-index:9500;background:var(--paper,#fff);
    display:flex;align-items:center;justify-content:center;
    -webkit-mask-image:linear-gradient(135deg,transparent,transparent 30%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.32) 38%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.68) 42%,rgba(0,0,0,.92) 46%,#000 50%,#000);
    mask-image:linear-gradient(135deg,transparent,transparent 30%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.32) 38%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.68) 42%,rgba(0,0,0,.92) 46%,#000 50%,#000);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:220% 220%;mask-size:220% 220%;
    -webkit-mask-position:100% 100%;mask-position:100% 100%;   /* 既定=全面を白で覆う */
  }
  /* ローディング幕のソフトエッジ越しに固定ヘッダーが透けないよう、
     幕をDOMから外す直前までロゴとメニューを完全に伏せる。 */
  html.sg-loader-active .m-header{
    opacity:0 !important;
    transform:translateY(-12px) !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:none !important;
  }
  .m-loader__logo{width:clamp(180px,22vw,300px);height:auto;animation:m-blur-in 1.6s cubic-bezier(.165,.84,.44,1) .2s both;}
  /* ① ロゴがゆっくりふわっと消える（幕が流れる前）。専用アニメで確実に再生 */
  .m-loader.is-logoout .m-loader__logo{animation:m-logo-out 1.6s cubic-bezier(.4,0,.2,1) forwards;}
  @keyframes m-logo-out{from{opacity:1;}to{opacity:0;}}
  .m-loader.is-out{animation:m-loader-wipe 1.5s cubic-bezier(.645,.045,.355,1) both 1;}   /* ② 白い幕が左上→右下へゆったり流れる */
  @keyframes m-loader-wipe{
    from{opacity:1;-webkit-mask-position:100% 100%;mask-position:100% 100%;}
    82%{opacity:1;}
    /* マスク終端は右下に薄い白が残るため、最後にopacityで完全に消す
       （m-page-veil-out と同じ終端処理・2026-07-29） */
    to{opacity:0;-webkit-mask-position:0% 0%;mask-position:0% 0%;}
  }
  @media (prefers-reduced-motion:reduce){.m-loader{display:none;}}
  /* Scroll: 下中央に縦並び（文字→棒線）。棒線は下へ流れて視線を誘導する */
  .sg-scroll{position:absolute;z-index:4;left:50%;bottom:clamp(24px,4.5vh,48px);transform:translateX(-50%);font-family:var(--serif-en);font-style:normal;font-size:13px;letter-spacing:.14em;color:rgba(237,232,223,.72);display:flex;flex-direction:column;align-items:center;gap:12px;}
  .sg-scroll::after{
    content:"";width:1px;height:60px;display:block;
    background:linear-gradient(rgba(237,232,223,.12),rgba(237,232,223,.9));
    transform:scaleY(0);transform-origin:50% 0;
    animation:m-scroll-draw 2.6s cubic-bezier(.65,0,.35,1) infinite;
  }
  /* 上から線が引かれ（origin上）→ 下端へ吸い込まれて抜ける（origin下）＝視線を下へ誘導 */
  @keyframes m-scroll-draw{
    0%{transform:scaleY(0);transform-origin:50% 0;}
    42%{transform:scaleY(1);transform-origin:50% 0;}
    58%{transform:scaleY(1);transform-origin:50% 100%;}
    100%{transform:scaleY(0);transform-origin:50% 100%;}
  }
  @media (prefers-reduced-motion:reduce){
    .sg-scroll::after{animation:none;transform:scaleY(1);background:linear-gradient(rgba(237,232,223,.7),transparent);}
  }

  /* ---------- generic section frame ---------- */
  /* 幅制限は撤廃し横いっぱいに（オーナー指示 2026-07-19）。
     文字が画面端に張り付かないよう左右 padding のみ残す */
  .sg-wrap{margin:0 auto;padding:0 clamp(24px,5vw,64px);}
  .sec{padding:clamp(90px,13vw,190px) 0;}
  .sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:14px;}
  .sec-head .num{font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--stone);}

  /* opening statement */

  /* shared photo placeholder（実写真は inline style の background-image が優先） */
  .ph{position:relative;background:linear-gradient(135deg,#8f9184,#6f7267 60%,#54564c);background-size:cover;background-position:center;overflow:hidden;box-shadow:0 24px 60px -30px rgba(38,36,31,.4);}
  /* 画像左下のキャプションは削除（2026-07-11オーナー指示）。data-cap属性は残置＝サービスサムネのタブラベルでのみ表示 */
  .ph.warm{background:linear-gradient(135deg,#b9a88f,#93805f);}
  .ph.moss{background:linear-gradient(135deg,#5f6b52,#39422f);}

  /* concept: editorial offset composition (縦書き見出し＋重ね画像＋More罫) */
  .sg-concept{padding:clamp(80px,11vw,170px) 0;}
  .concept-stage{position:relative;max-width:1120px;margin:0 auto;min-height:760px;}
  .concept-stage .ph{position:absolute;overflow:hidden;}
  /* CONCEPT写真のスライドショー層（オーナー指示 2026-07-29）:
     基底画像（リビール・視差の ::before）の上に重ね、opacityでクロスフェード。
     上下16%ブリード＋var(--py)追従で基底と同じ視差挙動にする */
  .concept-stage .ph .ph-slide{
    position:absolute;inset:-16% 0;z-index:0;pointer-events:none;
    background-size:cover;background-position:center;
    opacity:0;transition:opacity 1.5s ease;translate:0 var(--py,0);
  }
  /* スマホ視差: スライド層は--py追従のみだと切替後に視差が消える（オーナー報告
     2026-08-07「2枚目以降がパララックスきかない」）。基底::beforeと同じdriftを与える */
  @supports (animation-timeline: view()) {
    @media (pointer: coarse) {
      .concept-stage .ph .ph-slide{animation:sg-mplx-drift auto linear both;animation-timeline:view();}
    }
  }
  .concept-stage .ph .ph-slide.is-on{opacity:1;}
  @media (prefers-reduced-motion:reduce){.concept-stage .ph .ph-slide{display:none;}}
  /* 位置・幅は%（設計幅1120px時の比率）— 固定pxだと狭い幅で縦書き見出しと本文が衝突する */
  .c-img-a{top:0;left:10.7%;width:26.8%;height:clamp(130px,16vw,180px);z-index:3;}
  .c-img-b{top:130px;left:0;width:32.1%;height:400px;z-index:2;}
  .c-img-c{top:505px;left:73.5%;right:-3%;height:210px;z-index:3;} /* 左端=縦書き見出しのラインに揃える（左へはみ出さない）／右は少しブリード */
  .concept-copy{position:absolute;top:128px;left:39.3%;width:30%;} /* 右端が縦書き見出しのL字罫を越えない幅 */
  .concept-copy p{margin:0 0 24px;font-size:15.5px;letter-spacing:.05em;line-height:2.05;color:var(--ink-soft);}
  .concept-vhead{position:absolute;top:44px;right:13.4%;writing-mode:vertical-rl;font-family:var(--serif-jp);font-weight:400;font-size:clamp(24px,2.9vw,38px);letter-spacing:.3em;line-height:1.9;}
  /* L字罫はユーザー希望で削除。(Concept) 縦ラベルも 2026-07-18 に削除 */
  .concept-more{position:absolute;left:39.3%;top:566px;width:30%;display:flex;align-items:center;justify-content:space-between;font-family:var(--serif-en);font-style:normal;font-size:clamp(22px,2.4vw,28px);color:var(--ink);text-decoration:none;padding-bottom:14px;border-bottom:1px solid var(--brass);transition:opacity .35s;}
  .concept-more:hover{opacity:.55;}
  .concept-more .arw{font-size:15px;font-style:normal;}

  /* shared 'More' link (works/dialogue) */
  .more{display:inline-block;margin-top:26px;font-family:var(--serif-en);font-style:normal;font-size:19px;color:var(--ink);text-decoration:none;position:relative;padding-bottom:8px;}
  .more::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);transform-origin:left;transition:transform .4s;}
  .more:hover::after{transform:scaleX(.4);}

  /* ---------- gallery collage marquee（全画面コラージュが右→左へ・画像ごとに視差） ---------- */
  .sg-gallery{--gs:1;position:relative;height:clamp(560px,100vh,900px);overflow:hidden;overflow:clip;background:var(--paper);}
  /* ギャラリー上の余白（透明マージンだと sticky ヒーローが透けるため、紙色の実体ブロックで開ける） */
  .sg-gap{height:clamp(80px,12vw,180px);background:var(--paper);}
  /* 背景のぼかしブロブ（白地に薄灰の雲） */
  .sg-gallery::before,.sg-gallery::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(120,115,105,.18),transparent 70%);pointer-events:none;}
  .sg-gallery::before{width:46vw;height:46vw;left:-10vw;top:22%;}
  .sg-gallery::after{width:38vw;height:38vw;right:-8vw;bottom:-14%;}
  .gal-track{position:absolute;inset:0;display:flex;width:max-content;height:100%;will-change:transform;}
  /* マーキーのCSSアニメ化（2026-08-07 根治）。
     iOSはタッチスクロール中にJSのrAFを停止するため、JSでtransformを
     書き続ける方式は流れが止まって跳ねる（カクカク）。コンポジタ駆動の
     CSSアニメならスクロール中も絶対に途切れない。
     トラックは同一セット×3（各33.333%）なので、1セットぶん（-33.33%→-66.67%）を
     周期にすれば継ぎ目なく無限ループする。周期(--gal-dur)はJSが従来と同じ
     速度（PC約3.5vw/秒・SPは3倍）から換算してセットする。
     is-flowing はIntersectionObserverが±1.5画面で付け外し（画面遠方では停止） */
  .gal-track.is-marquee{
    animation:gal-marquee var(--gal-dur,60s) linear infinite;
    animation-play-state:paused;
  }
  .gal-track.is-marquee.is-flowing{animation-play-state:running;}
  @keyframes gal-marquee{
    from{transform:translate3d(-33.3333%,0,0);}
    to{transform:translate3d(-66.6667%,0,0);}
  }

  .gal-set{position:relative;width:calc(var(--gs) * 153vw);height:100%;flex:none;}
  .gal-item{position:absolute;overflow:hidden;overflow:clip;}/* hiddenはスクロールコンテナ扱いになりview()の基準を奪うため、対応環境ではclipへ（見た目同一・旧環境はhiddenのまま） */
  /* 内側画像はフレームより縦に広くし、位置に応じて縦に滑らせて視差を出す（振幅は data-amp・他画像と同じ縦視差に統一 2026-07-21） */
  .gal-item .gal-img{position:absolute;left:0;right:0;top:-20%;height:140%;box-shadow:none;}
  /* 縦視差はマウス環境のみのため、レイヤー昇格もマウス環境限定（2026-08-07） */
  @media (pointer:fine){
    .gal-item .gal-img{will-change:transform;}
  }
  /* 参考動画の1ループを実測した配置（左端の大判を0vwとする・9枚/ループ153vw）
     位置=left(vw)/top(%) サイズ=width(vw)+実測アスペクト比 重なり=z-index も動画準拠 */
  .gi1{left:calc(var(--gs) * 0vw);    top:12%;  width:calc(var(--gs) * 28.9vw);aspect-ratio:318/274;z-index:3;} /* 大判・上段 */
  .gi2{left:calc(var(--gs) * 23.5vw); top:32.5%;width:calc(var(--gs) * 22vw);  aspect-ratio:242/278;z-index:4;} /* 縦め・gi1に重なる(手前) */
  .gi3{left:calc(var(--gs) * 41.6vw); top:3.8%; width:calc(var(--gs) * 14.7vw);aspect-ratio:162/105;z-index:1;} /* 小・最上段 */
  .gi4{left:calc(var(--gs) * 51.2vw); top:33%;  width:calc(var(--gs) * 36.4vw);aspect-ratio:400/265;z-index:2;} /* 最大・中段 */
  /* gi5（小和滝の家）はコリーナ(gi4)の後ろに94%隠れていたため削除（2026-07-12オーナー指示） */
  .gi6{left:calc(var(--gs) * 81.6vw); top:12%;  width:calc(var(--gs) * 22.3vw);aspect-ratio:245/205;z-index:2;} /* 中・上段 */
  .gi7{left:calc(var(--gs) * 99.8vw); top:46.8%;width:calc(var(--gs) * 14.5vw);aspect-ratio:159/230;z-index:2;} /* 縦長・下段 */
  .gi8{left:calc(var(--gs) * 110.7vw);top:3.8%; width:calc(var(--gs) * 21.7vw);aspect-ratio:239/203;z-index:2;} /* 中・最上段 */
  .gi9{left:calc(var(--gs) * 127.1vw);top:31.4%;width:calc(var(--gs) * 32.7vw);aspect-ratio:360/307;z-index:2;} /* 大判・中段(次ループのgi1が上に重なる) */
  /* gallery-slide の焦点位置。建物・室内の見せ場が各フレーム内に残るよう
     横方向のトリミングを写真ごとに調整する。 */
  .gi1 .gal-img{background-position:62% center;}
  .gi2 .gal-img{background-position:32% center;}
  .gi3 .gal-img{background-position:54% center;}
  .gi4 .gal-img{background-position:50% center;}
  .gi6 .gal-img{background-position:52% center;}
  .gi7 .gal-img{background-position:56% center;}
  .gi8 .gal-img{background-position:50% center;}
  .gi9 .gal-img{background-position:55% center;}

  /* ---------- information (blog/news list) ---------- */
  /* 余白重視: コンテンツ幅を締めて左右の間延びを解消し、行と上下に息を入れる */
  .sg-info{--info-content-width:88%;background:var(--paper);padding:clamp(100px,14vw,190px) 0;}
  .sg-info .info-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;width:var(--info-content-width);max-width:1000px;margin:0 auto clamp(52px,7vw,96px);}
  .sg-info .info-title{margin:0;font-family:var(--serif-jp);font-weight:400;font-size:clamp(21px,2.3vw,31px);letter-spacing:.24em;line-height:1.2;color:var(--ink);}
  .sg-info .info-en{display:block;margin-top:16px;font-size:clamp(11px,1.1vw,13px);letter-spacing:.28em;text-transform:uppercase;color:var(--stone);}
  .sg-info .info-all{display:inline-flex;align-items:center;gap:16px;flex:none;text-decoration:none;color:var(--ink);font-family:var(--serif-en);font-style:normal;font-size:14px;letter-spacing:.14em;}
  .sg-info .info-all__circle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--dark);color:var(--paper-on-dark);border:1px solid var(--dark);transition:background .4s,color .4s,border-color .4s;}
  .sg-info .info-all__circle .arw{font-style:normal;font-size:14px;transition:transform .4s;}
  /* ホバーはモノクロ: 塗り→白抜き反転 */
  .sg-info .info-all:hover .info-all__circle{background:transparent;color:var(--ink);border-color:rgba(36,34,32,.4);}
  .sg-info .info-all:hover .info-all__circle .arw{transform:translateX(3px);}
  .sg-info .info-list{list-style:none;width:var(--info-content-width);max-width:1000px;margin:0 auto;padding:0;border-top:1px solid rgba(36,34,32,.12);}
  .sg-info .info-item{border-bottom:1px solid rgba(36,34,32,.12);}
  .sg-info .info-item a{display:block;text-decoration:none;padding:clamp(30px,3.4vw,46px) 0;transition:padding-left .4s;}
  .sg-info .info-item a:hover{padding-left:16px;}
  .sg-info .info-meta{display:flex;align-items:center;gap:18px;font-family:var(--serif-en);font-style:normal;font-size:12.5px;letter-spacing:.16em;color:var(--stone);}
  .sg-info .info-cat{position:relative;padding-left:19px;text-transform:uppercase;}
  .sg-info .info-cat::before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;background:rgba(36,34,32,.24);transform:translateY(-50%);}
  .sg-info .info-ttl{display:block;margin-top:14px;font-family:var(--serif-jp);font-weight:400;font-size:clamp(16px,1.5vw,20px);letter-spacing:.08em;line-height:1.55;color:var(--ink);transition:color .35s;}
  /* ホバーはモノクロ: 行を右にインデント＋日付/カテゴリを濃色化（タイトルは墨のまま） */
  .sg-info .info-item a:hover .info-meta{color:var(--ink-soft);}

  /* works */
  .sg-works{background:var(--dark);position:relative;overflow:hidden;color:var(--paper-on-dark);}
  /* works背景: 全面の写真モザイクが流れる（2026-07-20 オーナー再指示・
     sola footer 準拠の構図）。上下2段が逆方向にゆっくりループし、
     濃い暗幕の上に白抜きのコンテンツが載る。ループは2セット複製→-50% */
  .works-bg{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;flex-direction:column;gap:10px;}
  .works-bg .wrow{flex:1;overflow:hidden;}
  .works-bg .wrow-track{display:flex;height:100%;width:max-content;animation:works-flow 180s linear infinite;}
  .works-bg .wrow:nth-child(2) .wrow-track{animation-duration:220s;animation-direction:reverse;}
  .wbg-set{display:flex;gap:10px;padding-right:10px;height:100%;}
  .wbg-set span{flex:0 0 auto;height:100%;aspect-ratio:3/2;background-size:cover;background-position:center;filter:saturate(.85);}
  .works-bg::after{content:"";position:absolute;inset:0;background:rgba(23,21,17,.78);}
  @keyframes works-flow{to{transform:translateX(-50%);}}
  .sg-works .sg-wrap{position:relative;z-index:2;}
  .sg-works .works-head{color:var(--paper-on-dark);}
  .works-cta{text-align:center;padding:clamp(30px,5vw,70px) 0;}
  .works-cta .works-head{display:inline-block;}
  .works-lead{margin:clamp(22px,3vw,38px) auto 0;max-width:34em;font-size:15px;line-height:2.3;letter-spacing:.08em;color:rgba(237,232,223,.85);}
  .works-btn{display:inline-flex;align-items:center;margin-top:clamp(36px,5vw,60px);padding:16px 44px;
    border:1px solid rgba(237,232,223,.5);color:var(--paper-on-dark);
    font-family:var(--serif-en);font-style:normal;font-size:17px;letter-spacing:.04em;text-decoration:none;
    transition:background .35s,color .35s,border-color .35s;}
  .works-btn:hover{background:var(--paper-on-dark);color:var(--dark);border-color:var(--paper-on-dark);}
  @media (prefers-reduced-motion:reduce){.works-bg .wrow-track{animation:none;}}
  /* Works見出し（クリック可）と More（オーナー指示 2026-07-19） */
  .works-head{display:block;font-style:normal;font-size:clamp(64px,12.5vw,180px);line-height:.95;letter-spacing:.01em;text-decoration:none;}
  .works-more{text-align:center;margin-top:clamp(36px,5vw,64px);}
  .work-link{display:block;color:inherit;text-decoration:none;}
  .work-link .ph{transition:filter .5s ease;}
  .work-link:hover .ph{filter:saturate(1.05) brightness(1.03);}
  .work-link:hover h3{opacity:.7;}
  .work h3{transition:opacity .35s;}
  .works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,36px);margin-top:60px;}
  .work .ph{aspect-ratio:3/4;}
  .work h3{margin:22px 0 4px;font-weight:400;font-size:22px;letter-spacing:.16em;}
  .work .en-title{font-size:14px;color:var(--stone);}

  /* ---------- service (tabbed + scroll-linked: 対話 / 再生 / 建築) ---------- */
  .sg-service{position:relative;height:300vh;background:#171511;color:var(--paper-on-dark);}
  .svc-sticky{position:sticky;top:0;height:100vh;overflow:hidden;}
  .svc-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;}
  .svc-panel.active{opacity:1;visibility:visible;}
  .svc-bg{position:absolute;inset:0;z-index:0;}
  .svc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(15,14,11,.82) 0%,rgba(15,14,11,.5) 40%,rgba(15,14,11,.22) 70%,rgba(15,14,11,.55) 100%);}
  .svc-bg.d0{background:url('/wp-content/themes/shinwa2026/assets/images/luxury/dialo.jpg') center/cover no-repeat,linear-gradient(135deg,#3b4a3a,#20271f 55%,#141912);}
  .svc-bg.d1{background:url('/wp-content/themes/shinwa2026/assets/images/service/renovation_keyvisual_pc.jpg') center/cover no-repeat,linear-gradient(135deg,#4a3f34,#2a241d 55%,#181510);}
  .svc-bg.d2{background:url('/wp-content/themes/shinwa2026/assets/images/service/ninotec.jpg') center/cover no-repeat,linear-gradient(135deg,#37434f,#20272e 55%,#12161a);}
  .svc-ghost{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(118px,17vh,182px);z-index:1;font-family:var(--serif-en);font-weight:400;font-size:clamp(78px,14.3vw,195px);line-height:.9;color:rgba(237,232,223,.85);letter-spacing:.01em;pointer-events:none;text-shadow:0 8px 40px rgba(0,0,0,.3);}
  .svc-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:clamp(120px,17vh,190px) clamp(24px,5vw,64px) 0;}
  .svc-head{display:flex;align-items:baseline;gap:20px;margin-bottom:34px;}
  .svc-jp{font-family:var(--serif-jp);font-weight:400;font-size:clamp(40px,6vw,74px);letter-spacing:.14em;line-height:1;}
  .svc-label{font-family:var(--serif-en);font-style:normal;font-size:14px;letter-spacing:.2em;color:rgba(237,232,223,.6);}
  .svc-body p{margin:0 0 6px;font-size:clamp(14px,1.15vw,16px);letter-spacing:.08em;line-height:2.2;color:rgba(237,232,223,.9);}
.svc-more{display:flex;align-items:center;justify-content:space-between;width:min(300px,60%);min-height:58px;margin-top:44px;padding:0 22px;border:1px solid rgba(237,232,223,.9);background:transparent;font-family:var(--serif-en);font-style:normal;font-size:22px;color:var(--paper-on-dark);text-decoration:none;transition:opacity .35s;}
  .svc-more:hover{opacity:.6;}
  .svc-more .arw{font-style:normal;font-size:14px;}
  .svc-thumbs{position:absolute;left:var(--gutter);bottom:clamp(28px,5vh,54px);z-index:6;display:flex;gap:14px;}
  .svc-thumb{width:clamp(108px,13vw,168px);aspect-ratio:5/2.2;padding:0;border:0;background:none;cursor:pointer;position:relative;opacity:.5;transition:opacity .4s,filter .4s;filter:grayscale(.35);}
  .svc-thumb .ph{position:absolute;inset:0;box-shadow:none;}
  /* サムネ上のラベル（対話/リノベ/一般建築）は視認不良のため削除（2026-07-20 オーナー指示）。名前は aria-label で維持 */
  .svc-thumb::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--paper-on-dark);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
  .svc-thumb.active{opacity:1;filter:none;}
  .svc-thumb.active::after{transform:scaleX(1);}
  .svc-thumb:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

  /* dialogue band */
  .sg-dialo{background:var(--dark);color:var(--paper-on-dark);text-align:center;padding:clamp(120px,16vw,210px) 0;position:relative;overflow:hidden;}
  .sg-dialo .en-title{color:rgba(237,232,223,.55);font-size:clamp(18px,2.2vw,28px);display:block;margin-bottom:38px;}
  .sg-dialo h2{margin:0;font-weight:400;font-size:clamp(28px,4.6vw,58px);letter-spacing:.14em;line-height:1.5;}
  .sg-dialo .more{color:var(--paper-on-dark);margin-top:46px;}
  .sg-dialo .more::after{background:var(--brass);}

  /* contact CTA — 非対称の編集的レイアウト（大英字＋縦書き和文＋ブラス罫線）に戻す（オーナー指示 2026-07-21） */
  .sg-contact{padding:clamp(120px,17vw,220px) 0;}
  .sg-contact .c-inner{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:clamp(44px,7vw,120px);max-width:1080px;margin:0 auto;padding:0 clamp(24px,5vw,64px);}
  /* 主役の大英字（左） */
  .sg-contact .c-lead{display:flex;flex-direction:column;align-items:flex-start;}
  .sg-contact .c-title{display:block;font-size:clamp(64px,11vw,150px);letter-spacing:.02em;line-height:.92;color:var(--ink);}
  .sg-contact .c-rule{display:block;width:clamp(48px,6vw,92px);height:1px;background:var(--brass);margin:clamp(26px,3.4vw,44px) 0;transform-origin:left;}
  /* 縦書き和文（右） */
  .sg-contact .c-vmsg{writing-mode:vertical-rl;margin:0;font-family:var(--serif-jp);font-weight:400;font-size:clamp(16px,1.7vw,20px);letter-spacing:.2em;line-height:2.5;color:var(--ink-soft);}
  /* ボタンは他セクション(.works-btn)と同じ細枠線の長方形。地が紙色なので墨で反転 */
  .sg-contact .contact-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 44px;
    border:1px solid rgba(36,34,32,.32);color:var(--ink);
    font-family:var(--serif-en);font-style:normal;font-size:17px;letter-spacing:.04em;text-decoration:none;
    transition:background .35s,color .35s,border-color .35s;}
  .sg-contact .contact-btn .arw{font-style:normal;font-size:15px;}
  .sg-contact .contact-btn:hover{background:var(--dark);color:var(--paper-on-dark);border-color:var(--dark);}

  /* footer */
  .sg-footer{background:var(--dark-2);color:rgba(237,232,223,.75);padding:clamp(70px,9vw,110px) 0 60px;}
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
  .foot-logo .jp{font-family:var(--serif-jp);font-size:24px;letter-spacing:.16em;color:var(--paper-on-dark);}
  .foot-logo .en{font-family:var(--sans);font-size:10px;letter-spacing:.34em;color:rgba(237,232,223,.55);margin-top:8px;text-transform:uppercase;}
  .foot-addr{font-size:13px;letter-spacing:.08em;line-height:2.1;color:rgba(237,232,223,.6);}
  .foot-nav{display:flex;gap:30px;flex-wrap:wrap;}
  .foot-nav a{font-family:var(--serif-en);font-size:14px;color:rgba(237,232,223,.72);text-decoration:none;}
  .foot-nav a:hover{color:var(--paper-on-dark);}
  .foot-copy{margin-top:64px;font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;color:rgba(237,232,223,.4);text-transform:uppercase;}

  .note{background:#1b1a16;color:#cfc8ba;font-family:var(--sans);font-size:12px;letter-spacing:.06em;line-height:1.7;padding:14px 20px;text-align:center;}

  @media(max-width:991px){
    .sg-info{--info-content-width:84%;}
  }

  @media(max-width:860px){
    .sg-nav{display:none;}
    /* 中央KV見出し(縦書き): 8字×字送りが画面高に収まるサイズ */
    .kv-center h1{font-size:clamp(28px,9.4vw,36px);}
    /* CONTACT(SP): 縦積み・和文は横組みに戻して中央寄せ */
    .sg-contact .c-inner{flex-direction:column;align-items:center;text-align:center;gap:clamp(30px,8vw,48px);}
    .sg-contact .c-lead{align-items:center;}
    .sg-contact .c-title{font-size:clamp(56px,18vw,92px);}
    .sg-contact .c-rule{margin:clamp(22px,6vw,32px) auto;}
    .sg-contact .c-vmsg{writing-mode:horizontal-tb;text-align:center;font-size:clamp(14px,4vw,17px);line-height:2.1;letter-spacing:.1em;}
    /* INFORMATION(SP) */
    .sg-info .info-title{font-size:clamp(19px,5vw,25px);}
    .sg-info .info-ttl{font-size:clamp(15px,4vw,18px);}
    .sg-info .info-item a:hover{padding-left:0;}
    .sg-info .info-all__txt{display:none;}
    .works-grid{grid-template-columns:1fr;gap:40px;}
    /* SP調整（2026-07-20 オーナー指摘）: 2バンドの律動を保ちつつ、
       縦位置を交差させて3つの重なりペアを作る
       （gi1×gi2 / gi6×gi7 / gi9×次ループgi1・前後はz-indexが既定） */
    .sg-gallery{--gs:2.2;height:min(72vh,560px);}
    .gi1{top:10%;} .gi3{top:6%;}  .gi6{top:12%;} .gi8{top:6%;}
    .gi2{top:34%;} .gi4{top:44%;} .gi7{top:36%;z-index:3;} .gi9{top:42%;}
    /* 幅500〜860pxの帯域では写真(vw比例×2.2)がセクション(≤560px)の下端を
       はみ出し、水平に切れた縁が「ボーダー」に見える（オーナー報告 2026-07-29・
       幅700pxで最大104px超過）。下段の大判3枚に高さ上限を入れて収める。
       小さいSP幅では上限に届かず従来と同じ見た目（.gal-imgはcoverで追従） */
    .gi2{max-height:60%;} .gi4{max-height:52%;} .gi9{max-height:54%;}
    /* concept: スマホもサンガーデン構図（上に重ね画像／下段=左に本文・右に縦書き見出し／最下部にMore＋小画像） */
    .concept-stage{position:relative;min-height:0;display:grid;grid-template-columns:1.12fr .88fr;grid-template-areas:"img img" "copy head" "more more" "thumb thumb";column-gap:16px;row-gap:28px;}
    /* デスクトップの .concept-stage .ph{position:absolute}(詳細度020) に勝つため .concept-stage を前置 */
    .concept-stage .c-img-a{position:absolute;top:0;left:50%;transform:translateX(-50%);width:46%;height:104px;z-index:3;}
    .concept-stage .c-img-b{grid-area:img;position:relative;top:auto;left:auto;width:100%;height:clamp(230px,58vw,320px);margin-top:50px;}
    .concept-stage .c-img-c{grid-area:thumb;position:relative;top:auto;left:auto;right:auto;width:100%;height:clamp(200px,52vw,260px);margin-top:8px;} /* Moreボタンの下に全幅で配置 */
    .concept-copy{grid-area:copy;position:relative;top:auto;left:auto;width:auto;}
    .concept-copy p{font-size:14.5px;line-height:2.0;margin-bottom:20px;}
    .concept-vhead{grid-area:head;position:relative;top:auto;right:auto;writing-mode:vertical-rl;justify-self:end;align-self:start;margin-right:26px;font-size:clamp(24px,6.4vw,32px);letter-spacing:.24em;}
    .concept-more{grid-area:more;position:relative;top:auto;left:auto;width:100%;align-self:center;margin-top:8px;font-size:22px;}
    /* モバイルもスクロール連動(sticky)は維持。表示領域内へ全要素を収める */
    .svc-sticky{height:100svh;height:100dvh;}/* svh固定だとiOSでアドレスバー収納時に下へ黒帯（セクション背景）が出る（オーナー報告 2026-08-08）。dvhでバーの伸縮に追従（非対応環境はsvhのまま） */
    .svc-inner{padding:clamp(82px,14svh,110px) clamp(20px,5vw,40px) 0;}
    .svc-head{margin-bottom:clamp(18px,3svh,26px);}
    .svc-jp{font-size:clamp(34px,10vw,46px);}
    .svc-ghost{font-size:clamp(44px,15vw,78px);bottom:clamp(128px,calc(21vw + 52px),228px);right:12px;}
    .svc-body p{margin-bottom:3px;font-size:clamp(13px,3.7vw,14px);line-height:1.85;}
    .svc-more{
      width:min(240px,100%);
      min-height:52px;
      margin-top:clamp(20px,4svh,30px);
      padding:0 18px;
      border:1px solid rgba(237,232,223,.9);
      background:transparent;
      color:var(--paper-on-dark);
      box-shadow:none;
      text-shadow:none;
      font-size:26px;
      line-height:1.15;
      letter-spacing:normal;
    }
    .svc-more .arw{
      display:inline;
      flex:none;
      width:auto;
      height:auto;
      border:0;
      border-radius:0;
      font-size:16px;
      text-shadow:none;
    }
    .svc-thumbs{left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));gap:8px;}
    .svc-thumb{flex:1;width:auto;aspect-ratio:3/2;}
    .svc-thumb .ph::after{font-size:9.5px;letter-spacing:.03em;}
  }
  /* ---------- 表示アニメーション（shinwa.local = margin-design の演出体系をそのまま移植） ----------
     出典: themes/shinwa2026/assets/css/margin.css / margin-motion.css / renewal.css末尾
     観測=親（.m-group）→ .is-visible 付与。初期非表示は html.m-on ゲート配下の子のみ
     （JS死亡時は素の表示・margin-flow-guard遵守）。発火は全て animation（backwards）＝
     ホバー等のUI操作系 transition を上書きしないため。ずらしは --d。
     .m-reveal      = blur(14px)→結像 1.6s（本家 汎用[data-reveal]）
     .m-reveal-h    = 上記＋字間セトル .24em→定常 2.6s（本家 opening h2）
     .m-reveal-img  = -30度斜めマスク拭き上げ 1.4s linear ＋ scale(1.075→1)（本家 統一画像リビール）
     ヒーロー光スイープ / 白飛びブラー結像 / KVテキストは本家の値そのまま（入場幕は全廃） */

  /* ローディング復活（オーナー指示 2026-07-21）: ①白幕(社ロゴ)→②幕が上へ抜ける
     →③中央見出し「余白を、設計する」を最後に出す。見出しは is-kvready まで完全非表示 */


  @media (prefers-reduced-motion:no-preference){
    /* ヒーロー: 最初の1枚だけ白飛びブラー→結像。ローディング撤去に伴い
       遅延を詰めて即座に立ち上げる（2026-07-20） */
    .hero-bg .m-hero-slide:first-child{animation:m-hero-kv-air 2.4s cubic-bezier(.215,.61,.355,1) .2s backwards 1;}
    /* blurは要素の縁を半透明に滲ませ、上端に地の白が「空き」のように見える
       （オーナー報告 2026-07-29・SP顕著）。ブラー量に応じて拡大し縁を画面外へ。
       終端は is-m-slide-active の定常 scale(1.02) と同値で滑らかに合流 */
    @keyframes m-hero-kv-air{
      0%{opacity:0;transform:scale(1.07);filter:saturate(.7) brightness(1.9) contrast(.98) blur(18px);}
      30%{opacity:1;transform:scale(1.045);filter:saturate(.8) brightness(1.5) contrast(1) blur(10px);}
      100%{opacity:1;transform:scale(1.02);filter:saturate(.95) brightness(.92) contrast(1.03) blur(0);}
    }
    /* ③ 中央見出し・Scroll は既定で完全非表示（薄見えの中間状態を一切通さない）。
       白幕(.m-loader)が抜けきった後、JSが .sg-hero に is-kvready を付与。
       見出しは位置を変えず、サイト共通のブラー結像(m-blur-in)で徐々に見えてくる */
    .kv-center h1,.sg-hero .sg-scroll{opacity:0;}
    .sg-hero.is-kvready .kv-center h1{opacity:1;animation:m-blur-in 2.4s cubic-bezier(.165,.84,.44,1) both;}
    .sg-hero.is-kvready .sg-scroll{opacity:1;animation:m-kv-fade-in 1.6s ease .9s both;}
    @keyframes m-kv-fade-in{from{opacity:0;}to{opacity:1;}}

    /* スクロールリビール（テキスト）: fromのみ指定＝終端は各要素の定常値へ */
    html.m-on .m-group:not(.is-visible) .m-reveal,
    html.m-on .m-group:not(.is-visible) .m-reveal-h{opacity:0;}
    html.m-on .m-group.is-visible .m-reveal{
      animation:m-blur-in 1.6s cubic-bezier(.165,.84,.44,1) backwards;animation-delay:var(--d,0s);
    }
    html.m-on .m-group.is-visible .m-reveal-h{
      animation:m-blur-in 1.6s cubic-bezier(.165,.84,.44,1) backwards,
                m-ls-in 2.6s cubic-bezier(.22,.61,.36,1) backwards;
      animation-delay:var(--d,0s);
    }
    @keyframes m-blur-in{from{opacity:0;filter:blur(14px);}}
    @keyframes m-ls-in{from{letter-spacing:.24em;}}

    /* スクロールリビール（画像）: -30度斜めマスク拭き上げ＋scaleセトル（本家 統一画像リビール） */
    /* 画像リビールは「外枠固定・内側だけ動かす」本家構造に準拠:
       枠(.m-reveal-img)は動かさず、::before（背景を継承した内層）にマスクとscaleを掛ける。
       枠ごとscaleすると端がサブピクセルで震える（カクカク・ブルブル）ため（2026-07-12修正） */
    /* ※position は掛けない — .concept-stage .ph 等の absolute 配置を relative 化すると
       top/right が「ずらし」に化けて c-img-c が左下へ流れる（2026-07-15 実測バグ）。
       positioning は各クラス側（.ph=relative / .concept-stage .ph=absolute / .gal-img=absolute）が持つ */
    html.m-on .m-group .m-reveal-img{background-size:0 0;overflow:hidden;}
    html.m-on .m-group .m-reveal-img::before{
      content:"";position:absolute;inset:0;
      background-image:inherit;background-size:cover;background-position:center;
      -webkit-mask-image:linear-gradient(-30deg,transparent,transparent 40%,rgba(0,0,0,.02) 42%,rgba(0,0,0,.08) 44%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.32) 48%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.68) 52%,rgba(0,0,0,.82) 54%,rgba(0,0,0,.92) 56%,rgba(0,0,0,.98) 58%,#000 60%,#000);
      mask-image:linear-gradient(-30deg,transparent,transparent 40%,rgba(0,0,0,.02) 42%,rgba(0,0,0,.08) 44%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.32) 48%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.68) 52%,rgba(0,0,0,.82) 54%,rgba(0,0,0,.92) 56%,rgba(0,0,0,.98) 58%,#000 60%,#000);
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
      -webkit-mask-size:100% max(300%,100vh);mask-size:100% max(300%,100vh);
      -webkit-mask-position:center 0;mask-position:center 0;
      will-change:mask-position,transform;transform:translateZ(0);
    }
    /* 隠れている状態: 親グループ未到達、または画像自身が未到達（is-img-in 無し）
       .m-group が画面高より高いと（concept-stage は1222px＝1.45画面）、
       グループ先頭が16%交差した時点で内側の全画像が一斉に発火し、
       下端の c-img-c は画面に入る823px手前で演出を終えていた
       （オーナー指摘「Moreの次の画像がパッと表示される」・2026-08-06 実測）。
       画像ごとの到達を is-img-in（JSが個別に付与）で待つ */
    html.m-on .m-group:not(.is-visible) .m-reveal-img::before,
    html.m-on .m-group .m-reveal-img:not(.is-img-in)::before{-webkit-mask-position:center 100%;mask-position:center 100%;scale:1.075;}
    html.m-on .m-group.is-visible .m-reveal-img.is-img-in::before{
      animation:m-img-wipe 1.4s linear backwards,m-img-settle 1.4s cubic-bezier(.165,.84,.44,1) backwards;
      animation-delay:var(--d,0s);
    }
    /* JS不在・失敗時の安全弁: is-img-in が一切付かない環境では
       グループ到達で従来どおり表示する（素の表示に戻す） */
    html.m-on.m-noimgobs .m-group.is-visible .m-reveal-img::before{
      animation:m-img-wipe 1.4s linear backwards,m-img-settle 1.4s cubic-bezier(.165,.84,.44,1) backwards;
      animation-delay:var(--d,0s);
    }
    @keyframes m-img-wipe{from{-webkit-mask-position:center 100%;mask-position:center 100%;}}
    @keyframes m-img-settle{from{scale:1.075;}}

    /* ギャラリー: 白い幕が「左→右」へ抜けて画像帯を現す（本家 m-collage-lightleak）
       ※.sg-galleryの::before/::afterは背景ぼかしブロブで使用済みのため専用div（.gal-veil） */
    html.m-on .gal-veil{
      position:absolute;inset:0;z-index:6;pointer-events:none;background:#fff;
      -webkit-mask-image:linear-gradient(90deg,transparent,transparent 30%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.32) 38%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.68) 42%,rgba(0,0,0,.92) 46%,#000 50%,#000);
      mask-image:linear-gradient(90deg,transparent,transparent 30%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.32) 38%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.68) 42%,rgba(0,0,0,.92) 46%,#000 50%,#000);
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
      -webkit-mask-size:220% 220%;mask-size:220% 220%;
      -webkit-mask-position:100% 0%;mask-position:100% 0%;
    }
    html.m-on .sg-gallery.is-visible .gal-veil{
      animation:m-collage-lightleak 2.6s cubic-bezier(.645,.045,.355,1) both;
    }
    @keyframes m-collage-lightleak{
      from{opacity:1;-webkit-mask-position:100% 0%;mask-position:100% 0%;}
      82%{opacity:1;}
      to{opacity:0;-webkit-mask-position:0% 0%;mask-position:0% 0%;}
    }
  }

  /* スマホのコラージュ縦視差の復活（2026-08-07・CSSスクロール駆動）。
     JS視差はpointer:fine限定のため、タッチは view() タイムラインで
     コンポジタ駆動の漂いを付ける（カクつきゼロ・非対応端末は静止）。
     振幅は data-amp をCSS変数に写像。当初は旧JSの振幅比だったが実機で知覚できず約2倍に増幅（2026-08-07・ブリード内に収まる）。
     gal-imgは上下ブリード済みのため端は見えない */
  @supports (animation-timeline: view()) {
    @media (pointer: coarse) {
      .gal-item .gal-img{
        animation: gal-drift auto linear both; /* durationはauto必須（省略は0s扱いでタイムラインに乗らない） */
        animation-timeline: view();
      }
      .gal-item[data-amp="30"]{--gd:4.5%;}
      .gal-item[data-amp="45"]{--gd:6.5%;}
      .gal-item[data-amp="55"]{--gd:7.6%;}
      .gal-item[data-amp="60"]{--gd:8.4%;}
      .gal-item[data-amp="70"]{--gd:9.6%;}
      .gal-item[data-amp="85"]{--gd:11.2%;}
      .gal-item[data-amp="90"]{--gd:12%;}
    }
  }
  @keyframes gal-drift{
    from{ translate:0 var(--gd,4%); }
    to{ translate:0 calc(0% - var(--gd,4%)); }
  }

/* --- スマホ視差（CSS scroll-driven・2026-08-07） ----------------------
   PCの sg-scrollfx（JSが--pyを書き込む）はタッチ端末では起動しないため
   （コンポジタ先行スクロールでJS駆動は原理的にカクつく）、リビール画像の
   内層をスクロール連動アニメーションで縦に流す。
   ・wipe/settle（リビール）と drift（視差）は同じ animation プロパティに
     同居させる（別ルールに分けるとカスケードで片方が消える）
   ・drift の duration は auto 必須（省略は 0s 扱いでタイムラインに乗らない）
   ・overflow:hidden はスクロールコンテナ扱いになり view() の基準を奪うため
     対応環境では clip に切り替える（見た目同一） */
@supports (animation-timeline: view()) {
  @media (pointer: coarse) {
    html.m-on .m-group .m-reveal-img{overflow:hidden;overflow:clip;}
    html.m-on .m-group .m-reveal-img::before{top:-14%;bottom:-14%;}
    html.m-on .m-group.is-visible .m-reveal-img.is-img-in::before,
    html.m-on.m-noimgobs .m-group.is-visible .m-reveal-img::before{
      animation:m-img-wipe 1.4s linear backwards,m-img-settle 1.4s cubic-bezier(.165,.84,.44,1) backwards,sg-mplx-drift auto linear both;
      animation-delay:var(--d,0s),var(--d,0s),0s;
      animation-timeline:auto,auto,view();
    }
  }
}
@keyframes sg-mplx-drift{from{translate:0 6%;}to{translate:0 -6%;}}
