/* page-renovation 専用CSS（旧: テンプレート<head>のインライン<style>・2026-07-30に外部化） */
  html,body{margin:0;padding:0;}
  :root{
    --paper:#ffffff; --paper-2:#F5F4F1; --ink:#242220; --ink-soft:#514d47;
    --stone:#8f8b82; --line:#E7E4DE; --dark:#26241F; --dark-2:#1E1C18;
    --brass:#A89878; --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） */
    --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;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(24px,5vw,64px);}
  .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;}
  .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;}

  .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);text-decoration:none;}
  .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);}

  /* 下層ヒーロー（型: 短いダーク帯＋縦書き見出し＋リード左下） */
  .pg-hero{
    position:relative;isolation:isolate;min-height:74vh;overflow:hidden;overflow:clip;/* hiddenのままだとview()の基準を奪う */
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 var(--gutter) clamp(44px,6vh,72px);
    background:linear-gradient(120deg,#2f3730 0%,#242a24 50%,#191d18 100%);
    color:var(--paper-on-dark);
  }
  .pg-hero-bg{position:absolute;inset:0;z-index:-1;}
  .pg-hero-bg .ph-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.95) brightness(.92) contrast(1.03);}
  .pg-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,16,.55) 0%,rgba(20,19,16,.18) 40%,rgba(20,19,16,.62) 100%);}
  .pg-vert{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:row-reverse;gap:clamp(14px,2vw,26px);}
  .pg-vert span{writing-mode:vertical-rl;font-size:clamp(22px,2.5vw,36px);letter-spacing:.22em;line-height:1.9;text-shadow:0 22px 54px rgba(0,0,0,.52);display:block;}
  .pg-lead{max-width:28em;margin:0;font-size:clamp(13.5px,1.2vw,16px);letter-spacing:.1em;color:rgba(237,232,223,.85);}
  .pg-en{font-family:var(--serif-en);font-style:normal;font-size:clamp(15px,1.6vw,20px);letter-spacing:.12em;color:rgba(237,232,223,.66);}

  /* 空気感の道具: 短い真鍮罫・薄いゴースト英字 */
  .rule{display:block;width:46px;height:1px;background:var(--brass);margin-bottom:clamp(28px,4vw,48px);}
  .ghost-en{position:absolute;z-index:0;font-family:var(--serif-en);font-style:normal;line-height:.8;color:rgba(36,34,32,.045);pointer-events:none;white-space:nowrap;user-select:none;}

  /* 章頭（Contents / Reform） */
  .rn-sec{padding:clamp(140px,19vw,280px) 0 0;}
  .rn-head{position:relative;}
  .rn-head .lbl{display:block;}
  .rn-head h2{margin:clamp(36px,5vw,60px) 0 0;font-weight:400;font-size:clamp(26px,4.2vw,52px);letter-spacing:.14em;line-height:1.8;}
  .rn-head h2.en{font-family:var(--serif-en);font-style:normal;letter-spacing:.04em;}
  .rn-head p{max-width:none;margin:clamp(28px,3.6vw,44px) 0 0;font-size:15px;line-height:2.4;letter-spacing:.08em;color:var(--ink-soft);}
  /* Dialogue / Architecture / Real Estate の章頭と同じ縦構造。
     英字を上段、和文を共通の章頭余白位置に置く。 */
  .rn-head.rn-head--service{/* 左右は.wrapと同じ固定gutterに（超広幅で--gutterが育ち.wrap内で中身が752pxまで痩せて見出しが2行化・2026-07-30） */padding:clamp(140px,19vw,280px) clamp(24px,5vw,64px) 0;}
  .rn-head.rn-head--service h2{position:relative;z-index:1;margin-top:0;}

  /* トップページと同型の散らしコラージュ。
     3セットを横へ流し、画像内はスクロール量に応じて縦に視差移動する。 */
  .sg-gap{height:clamp(80px,12vw,180px);background:var(--paper);}
  .sg-gallery{--gs:1;position:relative;height:clamp(560px,100vh,900px);overflow:hidden;overflow:clip;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のまま） */
  .gal-item .gal-img{
    position:absolute;left:0;right:0;top:-46%;height:192%;
    box-shadow:none;
  }
  /* 縦視差で動かすのはマウス環境のみ（JS側もpointer:fine限定）。
     タッチ端末で24枚をレイヤー昇格させるとGPUメモリを浪費するだけなので、
     will-changeはマウス環境に限定する（2026-08-07） */
  @media (pointer:fine){
    .gal-item .gal-img{will-change:transform;}
  }
  /* タッチ端末も対応環境ではgal-driftで結局全枚レイヤー昇格するため、
     事前に昇格させて「出現瞬間の一斉昇格」のカクつきを避ける（2026-08-08）。
     視差なしの旧環境は従来どおり昇格させない（GPUメモリ節約） */
  @supports (animation-timeline: view()) {
    @media (pointer:coarse){
      .gal-item .gal-img{will-change:transform;}
    }
  }
  .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;}
  .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;}
  .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;}

  /* カード段違い3列（元: fp-card-grid の内容を works と同じ段違い型で） */
  .rn-cards{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(36px,5vw,80px);margin-top:clamp(80px,10vw,140px);}
  .rn-cards .rn-card:nth-child(2){margin-top:clamp(70px,9vw,130px);}
  .rn-card .ph{aspect-ratio:4/3;}
  .rn-card .en{display:block;margin-top:clamp(18px,2.4vw,26px);font-family:var(--serif-en);font-style:normal;font-size:12.5px;color:var(--brass);letter-spacing:.14em;}
  .rn-card h3{margin:8px 0 0;font-weight:400;font-size:clamp(17px,1.7vw,20px);letter-spacing:.14em;line-height:1.7;}
  .rn-card p{margin:clamp(14px,1.8vw,20px) 0 0;font-size:14px;line-height:2.2;letter-spacing:.05em;color:var(--ink-soft);}

  /* dark statement band（全幅写真＋スクリム） */
  .sp-statement{position:relative;isolation:isolate;overflow:hidden;overflow:clip;color:var(--paper-on-dark);text-align:center;padding:clamp(140px,19vw,260px) 0;}
  .sp-statement .st-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;filter:saturate(.88) brightness(.45) contrast(1.05);}
  .sp-statement .en-title{display:block;color:rgba(237,232,223,.6);font-size:16px;letter-spacing:.2em;margin-bottom:clamp(28px,4vw,44px);}
  .sp-statement h2{margin:0 auto;max-width:18em;font-weight:400;font-size:clamp(26px,4.4vw,54px);letter-spacing:.14em;line-height:1.7;text-shadow:0 12px 44px rgba(0,0,0,.45);}
  .sp-statement p{max-width:42em; /* 30emは狭い→拡幅（オーナー指示 2026-07-28・4ページ共通） */ margin:clamp(38px,5vw,56px) auto 0;font-size:15px;line-height:2.3;color:rgba(237,232,223,.85);letter-spacing:.06em;padding:0 clamp(24px,5vw,64px);}

  /* pillar rows: 画像は画面端までブリード・文は狭い版面 */
  .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);}
  /* 写真上の data-cap キャプションは全廃（2026-07-20 オーナー指示） */

  .sp-pillar{padding:clamp(90px,12vw,160px) 0;}
  .sp-row{
    display:grid;align-items:center;position:relative;
    grid-template-columns:minmax(0,900px) clamp(48px,7vw,120px) minmax(0,30em) minmax(var(--gutter),1fr);
  }
  .sp-row .sp-media{grid-column:1;}
  .sp-row .sp-copy{grid-column:3;}
  .sp-row.rev{grid-template-columns:minmax(var(--gutter),1fr) minmax(0,30em) clamp(48px,7vw,120px) minmax(0,900px);}
  .sp-row.rev .sp-media{grid-column:4;}
  .sp-row.rev .sp-copy{grid-column:2;}
  .sp-row .sp-ghost{position:absolute;top:-64px;font-family:var(--serif-en);font-size:clamp(78px,11.7vw,166px);color:rgba(36,34,32,.05);line-height:1;pointer-events:none;z-index:0;}
  .sp-media{position:relative;min-height:clamp(440px,58vh,620px);}
  .sp-media .m-lg{position:absolute;inset:0;width:88%;height:100%;}
  .sp-media .m-sm{position:absolute;right:0;bottom:-28px;width:44%;height:46%;z-index:3;}
  .sp-row.rev .sp-media .m-lg{left:auto;right:0;}
  .sp-row.rev .sp-media .m-sm{right:auto;left:0;}
  .sp-copy{position:relative;z-index:2;padding:clamp(50px,7vw,100px) 0;}
  .sp-copy .en-title{display:block;font-size:clamp(22px,2.6vw,34px);margin-bottom:10px;}
  .sp-copy h3{margin:0 0 clamp(24px,3.4vw,38px);font-weight:400;font-size:clamp(19px,2vw,25px);letter-spacing:.1em;line-height:1.8;}
  .sp-copy p{margin:0;max-width:28em;font-size:15px;letter-spacing:.05em;line-height:2.3;color:var(--ink-soft);}
  .sp-copy p+p{margin-top:22px;}
  .sp-row.rev .sp-ghost{right:var(--gutter);}
  .sp-row:not(.rev) .sp-ghost{left:var(--gutter);}

  /* CTA */
  /* 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);}
  .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);}
  @media(max-width:860px){
    .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;}
  }

  /* footer */
  .sg-footer{background:var(--dark-2);color:rgba(237,232,223,.75);padding:clamp(70px,9vw,110px) 0 56px;}
  .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:23px;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);margin-top:16px;}
  .foot-nav{display:flex;gap:28px;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:60px;font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;color:rgba(237,232,223,.4);text-transform:uppercase;}

  @media(max-width:860px){
    .sg-nav{display:none;}
    .pg-hero{min-height:70vh;}
    .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%;}
    .rn-cards{grid-template-columns:1fr;row-gap:clamp(60px,10vw,90px);}
    .rn-cards .rn-card:nth-child(2){margin-top:0;}
    .ghost-en{font-size:clamp(73px,20.8vw,117px) !important;}
    .sp-row,.sp-row.rev{display:block;padding:0;}
    .sp-media{min-height:0;height:320px;margin:0;}
    .sp-media .m-lg{position:relative;inset:auto;width:100%;height:250px;}
    .sp-media .m-sm{width:46%;height:120px;bottom:-14px;}
    .sp-copy{padding:44px var(--gutter) 0;}
  }

  /* ---------- 表示アニメーション（shinwa.local = margin-design 移植・トップと同一体系） ---------- */
  .m-page-veil{
    position:fixed;inset:0;z-index:9400;pointer-events:none;background:#fff;
    -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%;
    animation:m-page-veil-out 1.5s cubic-bezier(.645,.045,.355,1) .1s both 1;
  }
  @keyframes m-page-veil-out{
    from{opacity:1;-webkit-mask-position:100% 100%;mask-position:100% 100%;}
    82%{opacity:1;}
    to{opacity:0;-webkit-mask-position:0% 0%;mask-position:0% 0%;}
  }
  @media (prefers-reduced-motion:reduce){.m-page-veil{display:none;}}

  @media (prefers-reduced-motion:no-preference){
    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;}}
    /* 画像リビール本家構造。※このページも dialo 同様 position:relative を掛けない —
       .sp-media の .m-lg/.m-sm は position: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);
    }
    html.m-on .m-group:not(.is-visible) .m-reveal-img::before{-webkit-mask-position:center 100%;mask-position:center 100%;scale:1.075;}
    html.m-on .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;}}

    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::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%;}}
