/* ==========================================================================
   GARAGE ART -tokyo- — モードB ブラッシュアップ層（2026-09-06・ファブル）
   正本: C:\Users\PC\.claude\skills\site-brushup\SKILL.md「4. 確定の型」
   方針: 各テンプレートのインライン<style>・common.css・既存JS（fade-in／hamburger／chatbot）は書き換えない。
         このCSS＋decor.js＋hero-fx.js を結線するだけ（戻し＝functions.php の GA_BRU_ON を false）。
   読込位置: wp_head（テンプレのインライン<style>より後・common.css より後＝同点でも勝つ）。
   強さ: 強（発光.85・浮上10px・拡大1.05・写真で切り抜いた数字・ニュース/FAQ行のカード化・拭き取り出現・光の帯・3Dチルト）
         ＝ノンウーヴンズ v3／泉ヶ岳「特に画像を攻めて」と同じ段。常時アニメは足さない（動きはホバーと1回だけの出現のみ）。
   当てた型: 1 行間字間／2 PC広幅（1320）＋ヒーロー拡大／5 角丸・立体／6 SP固定フッター立体／9 右端の固定帯／10 フッター増量／
            12 装飾層「強」／13E 拡大表示／14 ヒーローのギミック／15 reduce＝減らす≠消す／16 カード／17 ヘッダー寸法不変
   採らなかった型: 4 実績帯（確定数値なし・数字を作らない）／12D 波（暗幕→暗幕で見えない）／13A-D,F スライダー（ヒーローは1枚・カルーセル無し）
   ========================================================================== */

:root{
  --ga-gold:#d29a45; --ga-gold-l:#e8b86a; --ga-gold-d:#b9802f; --ga-ink:#ece6d8; --ga-sub:#9c9281;
  --ga-bg:#0d0c0b; --ga-dark:#141210; --ga-surf:#1b1813;
  --ga-glow:rgba(210,154,69,.85); --ga-glow-mid:rgba(210,154,69,.55); --ga-glow-soft:rgba(210,154,69,.32);
  --ga-r-card:20px; --ga-r-photo:16px;
  --ga-shadow:0 6px 20px rgba(0,0,0,.45);
  --ga-shadow-hi:0 30px 60px -18px rgba(0,0,0,.75);
  --ga-ease:cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   型1 行間・字間（本文 2.1／字間 .06em・ボタンは .04em）
   ========================================================================== */
body{line-height:2.1;letter-spacing:.06em}
.commitment-card-text,.owner-body,.concept-body,.faq-a,.feature-card-text,.menu-note,.def-note{line-height:2.2}
.commitment-card-text{font-size:14.5px}
.section-header{margin-bottom:56px}

/* ==========================================================================
   型2 PC広幅＝コンテナ 1320・大見出しに金の光・ヒーローのコピーを一段大きく
   ========================================================================== */
@media(min-width:1081px){
  .section-inner,.header-inner,.footer-inner,.hero-access-inner,.breadcrumb-inner,.work-hero-inner{width:min(90%,1320px)}
  .single-inner,.single-pager{max-width:1180px}
  .models-tease-grid{max-width:1240px}
  .hero-en{font-size:clamp(72px,6.4vw,92px)}
  .hero-catch{font-size:clamp(28px,2.5vw,36px)}
  .hero-sub{max-width:760px;font-size:14px}
}
.section-en{text-shadow:0 0 34px rgba(210,154,69,.30),0 2px 0 rgba(0,0,0,.4)}
.hero-en{text-shadow:0 0 40px rgba(210,154,69,.55),0 4px 24px rgba(0,0,0,.5)}
.hero-catch{text-shadow:0 0 26px rgba(236,230,216,.28),0 3px 18px rgba(0,0,0,.55)}
.cta-en,.form-en,.cta-access-en{text-shadow:0 0 30px rgba(210,154,69,.45),0 3px 18px rgba(0,0,0,.45)}
.lead-head h2{text-shadow:0 0 28px rgba(210,154,69,.22)}
/* 見出し下の二重罫→金のグラデ罫＋中央ダイヤ（lead-head .rule と同じ型に揃える） */
.section-line,.form-line{width:88px;height:10px;border:0;position:relative;margin-top:18px}
.section-line::before,.form-line::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--ga-gold),transparent);box-shadow:0 0 12px var(--ga-glow-soft)}
.section-line::after,.form-line::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;background:var(--ga-gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 12px var(--ga-glow-mid)}
.lead-head .rule::before{box-shadow:0 0 12px var(--ga-glow-soft)}
.lead-head .rule::after{box-shadow:0 0 12px var(--ga-glow-mid)}
.section-jp{letter-spacing:.12em}

/* ==========================================================================
   型17 ヘッダー＝寸法不変（変えてよいのは影だけ）・ナビ下線は中央から・Contact は塗りピル
   ========================================================================== */
.site-header{transition:box-shadow .25s ease,background-color .25s ease}
body.is-scrolled .site-header{box-shadow:0 10px 30px rgba(0,0,0,.5),0 1px 0 rgba(210,154,69,.16)}
.header-nav a::after{height:2px;bottom:-6px;transform-origin:center;background:linear-gradient(90deg,transparent,var(--ga-gold),transparent);box-shadow:0 0 10px var(--ga-glow-soft)}
.header-nav:hover a.active:not(:hover)::after{transform:scaleX(0)}
.header-nav a{transition:color .25s ease,text-shadow .25s ease}
.header-nav a:hover{color:var(--ga-gold-l);text-shadow:0 0 12px rgba(210,154,69,.45)}
.header-nav a.bru-nav-cta{margin-left:10px;padding:9px 18px!important;border-radius:999px;color:#0d0c0b;font-weight:600;letter-spacing:.1em;
  background-image:linear-gradient(135deg,#e8b86a 0%,#d29a45 55%,#b9802f 100%);
  box-shadow:0 8px 22px rgba(210,154,69,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .22s var(--ga-ease),box-shadow .28s var(--ga-ease)}
.header-nav a.bru-nav-cta::after{display:none}
.header-nav a.bru-nav-cta:hover{color:#0d0c0b;text-shadow:none;transform:translateY(-2px) scale(1.04);box-shadow:0 12px 30px var(--ga-glow),0 0 0 4px rgba(210,154,69,.18),inset 0 1px 0 rgba(255,255,255,.4)}
.header-en{border-radius:999px;transition:background-color .22s ease,color .22s ease,box-shadow .28s var(--ga-ease)}
.header-en:hover{box-shadow:0 0 18px var(--ga-glow-soft)}
@media(min-width:1081px) and (max-width:1280px){.header-nav a{padding:0 9px;font-size:13px}.header-nav a.bru-nav-cta{padding:8px 14px!important}}

/* ==========================================================================
   型5 角丸・立体（カード20／写真16／ボタンはピル）
   ========================================================================== */
.commitment-card,.work-card,.mt-card,.model-card,.voice-card,.single-spec-card,.works-filter,.works-model-banner,.def-note,.form-target,.access-map{border-radius:var(--ga-r-card);overflow:hidden}
.feature-card,.gallery-item,.interior-item,.concept-img,.owner-img,.sg-main,.sg-sub,.work-card .ph,.mt-img,.commitment-card-img{border-radius:var(--ga-r-photo);overflow:hidden}
.concept-img::after,.owner-img-wrap::after{border-radius:var(--ga-r-photo)}
.mt-img{border-radius:var(--ga-r-photo) var(--ga-r-photo) 0 0}
.owner-quote{border-radius:0 14px 14px 0}
.faq-cat-head::before,.work-badge,.spec-badge,.item-badge,.news-list .ntag,.wh-cat,.mt-flag{border-radius:999px}
.form-group input,.form-group textarea,.form-group select,.fsearch input{border-radius:12px}
.form-radio label,.ftag{border-radius:999px}
.wpcf7-form .form-group label .required{border-radius:999px}
.single-spec-card,.works-filter,.voice-card{box-shadow:var(--ga-shadow),0 0 0 1px rgba(210,154,69,.08)}

/* ==========================================================================
   型12A ボタン＝金のグラデピル・常時発光・ホバーで浮上と拡大1.05＋光の帯が1回走る・押下で沈む
   主: .cta-form-btn（塗り）/.footer-cta-contact/.spec-cta/.form-submit/.wpcf7-submit/.mobile-nav-tel/.tompy-ig-btn
   副: .cta-tel-btn/.footer-cta-tel/.mn-ig/.sp-back/.cta-form-btn[style]（ヒーロー等のインライン透過＝縁取り扱い）
   ========================================================================== */
.cta-form-btn,.footer-cta-contact,.spec-cta,.form-submit,.wpcf7-submit,.mobile-nav-tel,.tompy-ig-btn,
.cta-tel-btn,.footer-cta-tel,.mn-ig,.single-pager .sp-back,.partner-cta .sp-back{border-radius:999px;letter-spacing:.14em}
.cta-form-btn,.footer-cta-contact,.spec-cta,.form-submit,.wpcf7-submit,.mobile-nav-tel{
  position:relative;overflow:hidden;isolation:isolate;color:#0d0c0b!important;border-color:transparent!important;
  background-color:var(--ga-gold)!important;
  background-image:linear-gradient(135deg,#e8b86a 0%,#d29a45 52%,#b9802f 100%)!important;
  box-shadow:0 12px 30px var(--ga-glow-mid),0 0 0 3px rgba(210,154,69,.16),inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .24s var(--ga-ease),box-shadow .3s var(--ga-ease),color .22s ease,filter .22s ease}
.cta-form-btn:hover,.footer-cta-contact:hover,.spec-cta:hover,.form-submit:hover,.wpcf7-submit:hover,.mobile-nav-tel:hover{
  color:#0d0c0b!important;opacity:1!important;filter:brightness(1.06);transform:translateY(-4px) scale(1.05);
  box-shadow:0 20px 44px var(--ga-glow),0 0 0 6px rgba(210,154,69,.2),inset 0 1px 0 rgba(255,255,255,.45)}
.cta-form-btn:active,.footer-cta-contact:active,.spec-cta:active,.form-submit:active,.wpcf7-submit:active,.mobile-nav-tel:active{transform:translateY(1px) scale(1);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.cta-form-btn::before,.footer-cta-contact::before,.spec-cta::before,.form-submit::before,.wpcf7-submit::before,.mobile-nav-tel::before,.tompy-ig-btn::before,.works-model-banner::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);transform:translateX(-130%)}
.cta-form-btn:hover::before,.footer-cta-contact:hover::before,.spec-cta:hover::before,.form-submit:hover::before,.wpcf7-submit:hover::before,.mobile-nav-tel:hover::before,.tompy-ig-btn:hover::before,.works-model-banner:hover::before{opacity:1;animation:ga-shimmer .8s var(--ga-ease) 1}
@keyframes ga-shimmer{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
/* インラインで透過指定されたボタン（ヒーロー「オーダー相談」・WORKS「すべての作品を見る」）＝副ボタン扱い：縁取り＋内側発光 */
.cta-form-btn[style*="transparent"]{background-image:none!important;background-color:rgba(13,12,11,.42)!important;color:var(--ga-gold-l)!important;backdrop-filter:blur(3px);
  border-color:var(--ga-gold)!important;box-shadow:inset 0 0 0 1px rgba(210,154,69,.35),0 0 22px -4px var(--ga-glow-soft),0 8px 22px rgba(0,0,0,.35)}
.cta-form-btn[style*="transparent"]:hover{color:#0d0c0b!important;background-color:var(--ga-gold)!important;background-image:linear-gradient(135deg,#e8b86a,#d29a45 55%,#b9802f)!important;
  box-shadow:0 16px 36px var(--ga-glow),0 0 0 5px rgba(210,154,69,.18)}
.cta-form-btn[style*="transparent"]::before{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%)}
/* 副ボタン＝縁取り＋内側発光 */
.cta-tel-btn,.footer-cta-tel,.mn-ig,.single-pager .sp-back,.partner-cta .sp-back{position:relative;isolation:isolate;
  border-color:rgba(210,154,69,.7);box-shadow:inset 0 0 0 1px rgba(210,154,69,.22),0 8px 22px rgba(0,0,0,.35);
  transition:transform .24s var(--ga-ease),box-shadow .3s var(--ga-ease),background-color .25s ease,color .25s ease}
.cta-tel-btn:hover,.footer-cta-tel:hover,.mn-ig:hover,.single-pager .sp-back:hover,.partner-cta .sp-back:hover{transform:translateY(-3px);
  box-shadow:0 14px 34px var(--ga-glow-mid),0 0 0 4px rgba(210,154,69,.16)}
.cta-tel-btn:active,.footer-cta-tel:active{transform:translateY(1px)}
.cta-tel-btn:hover{color:#0d0c0b}
.cta-tel-btn:hover svg{fill:#0d0c0b}
.cta-tel-btn:hover small{color:rgba(13,12,11,.7)}
.footer-cta-tel:hover{color:#0d0c0b}
.footer-cta-tel:hover svg{fill:#0d0c0b}
.single-pager .sp-back{border:1px solid rgba(210,154,69,.55);padding:12px 28px;border-bottom-width:1px}
.tompy-ig-btn{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 12px 30px rgba(220,39,67,.35),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .24s var(--ga-ease),box-shadow .3s var(--ga-ease)}
.tompy-ig-btn:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 20px 44px rgba(220,39,67,.5),0 0 0 5px rgba(220,39,67,.14)}
/* VIEW MORE＝罫が伸びて金に光る・矢印が付く */
.view-more{position:relative;padding-right:22px;transition:color .3s ease,letter-spacing .35s var(--ga-ease),text-shadow .3s ease}
.view-more::after{content:"→";position:absolute;right:0;top:50%;translate:0 -50%;font-family:var(--ff-en);font-size:18px;color:var(--ga-gold);opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s var(--ga-ease)}
.view-more:hover{color:var(--ga-gold-l);letter-spacing:.14em;text-shadow:0 0 14px rgba(210,154,69,.55)}
.view-more:hover::before{border-color:var(--ga-gold);box-shadow:0 1px 10px var(--ga-glow-soft)}
.view-more:hover::after{opacity:1;transform:none}
/* ヒーローCTA＝ひと回り大きく */
.hero .cta-form-btn{padding:20px 46px;font-size:13px}
/* フィルターのタグ＝押した時に光る */
.ftag{transition:all .25s var(--ga-ease)}
.ftag:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.ftag.on{box-shadow:0 6px 18px var(--ga-glow-soft),inset 0 1px 0 rgba(255,255,255,.3)}
.fsearch input:focus{box-shadow:0 0 0 3px rgba(210,154,69,.18)}
/* 車種バナー（WORKS）＝金の縁が光り、光の帯が走る */
.works-model-banner{position:relative;isolation:isolate;border-radius:var(--ga-r-card);box-shadow:var(--ga-shadow);transition:transform .3s var(--ga-ease),box-shadow .3s var(--ga-ease),border-color .3s ease,background-color .3s ease}
.works-model-banner:hover{transform:translateY(-4px);box-shadow:0 22px 48px -16px var(--ga-glow-mid),0 0 0 2px rgba(210,154,69,.45)}

/* ==========================================================================
   型12C 背景＝地色の節に点格子（明度差3%以内）・暗い帯にメッシュ発光（写真のある帯は ::after で上に載せる）
   ========================================================================== */
.section.concept,.commitment-section,.owner-section,.interior-section,.lead-sec,.single-body,.form-section,.menu-block,.page-privacy .section{
  background-image:radial-gradient(rgba(220,205,170,.075) 1px,transparent 1.3px);background-size:26px 26px}
.commitment-section[style*="--dark"],.section[style*="--dark"]{background-image:radial-gradient(rgba(220,205,170,.06) 1px,transparent 1.3px),
  radial-gradient(60% 40% at 0% 0%,rgba(210,154,69,.10),transparent 70%),radial-gradient(50% 40% at 100% 100%,rgba(210,154,69,.08),transparent 70%)!important;
  background-size:26px 26px,100% 100%,100% 100%!important}
.features::after,.voice::after,.cta::after,.cta-access::after,.tel-section::after,.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(ellipse 60% 55% at 85% 10%,rgba(232,184,106,.22),transparent 70%),radial-gradient(ellipse 55% 60% at 8% 92%,rgba(185,128,47,.28),transparent 70%)}
.features,.voice,.cta,.cta-access,.tel-section,.page-hero{position:relative}
.tel-section{isolation:isolate}
.tel-section>*{position:relative;z-index:1}
.site-footer{background-image:radial-gradient(rgba(220,205,170,.06) 1px,transparent 1.3px),radial-gradient(70% 50% at 50% 0%,rgba(210,154,69,.12),transparent 70%);background-size:26px 26px,100% 100%}

/* ==========================================================================
   型16 カード＝エフェクトコードB「強」（出現の時間差・浮上10px・金の縁・写真1.08・継ぎ目に金の線・見出しが金に・押下で沈む）
   対象: .commitment-card／.work-card／.feature-card／.mt-card／.model-card／.voice-card
   ※ .fade-in.visible{transform:translateY(0)}(0,2,0) に負けないよう 3クラス以上の同点以上で書く
   ========================================================================== */
.commitment-card,.work-card,.feature-card,.mt-card,.model-card,.voice-card{transition:transform .45s var(--ga-ease),box-shadow .45s var(--ga-ease),border-color .3s ease,background-color .3s ease,opacity .9s ease}
.commitment-card.fade-in,.work-card.fade-in,.feature-card.fade-in{transition:opacity .9s ease,transform .9s ease,box-shadow .45s var(--ga-ease),border-color .3s ease}
.commitment-card.fade-in.visible,.work-card.fade-in.visible,.feature-card.fade-in.visible{transition:transform .45s var(--ga-ease),box-shadow .45s var(--ga-ease),border-color .3s ease,opacity .9s ease}
.works-grid .work-card:nth-child(3n+2){transition-delay:.12s}
.works-grid .work-card:nth-child(3n+3){transition-delay:.24s}
.works-grid .work-card.visible{transition-delay:0s}
.commitment-grid .commitment-card:hover,.works-grid .work-card:hover,.features-grid .feature-card:hover,.models-tease-grid .mt-card:hover,.model-cat-grid .model-card:hover,.voice-grid .voice-card:hover,
.commitment-grid .commitment-card:focus-within,.works-grid .work-card:focus-within,.features-grid .feature-card:focus-within{
  transform:translateY(-10px) scale(1.01);border-color:rgba(210,154,69,.6);
  box-shadow:var(--ga-shadow-hi),0 30px 56px -26px var(--ga-glow),0 0 0 2px rgba(210,154,69,.5)}
.commitment-grid .commitment-card:active,.works-grid .work-card:active,.features-grid .feature-card:active{transform:translateY(-9px) scale(1.01)}
.commitment-card{border:1px solid rgba(210,154,69,.08)}
.commitment-card-img img,.work-card .ph img,.interior-item img,.mt-img{transition:transform .9s var(--ga-ease),filter .45s ease,scale 1.3s var(--ga-ease)}
.commitment-grid .commitment-card:hover .commitment-card-img img,.works-grid .work-card:hover .ph img,.interior-grid .interior-item:hover img{transform:scale(1.08);filter:brightness(1.06) saturate(1.06)}
.features-grid .feature-card:hover .feature-card-bg{transform:scale(1.08);filter:brightness(1.05)}
.feature-card-bg{transition:transform .9s var(--ga-ease),filter .45s ease}
/* 写真と本文の継ぎ目に金の線が左から走る */
.commitment-card-body,.work-card .wbody{position:relative}
.commitment-card-body::before,.work-card .wbody::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--ga-gold-l),var(--ga-gold) 60%,transparent);box-shadow:0 0 12px var(--ga-glow-mid);
  transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ga-ease)}
.commitment-grid .commitment-card:hover .commitment-card-body::before,.works-grid .work-card:hover .wbody::before{transform:scaleX(1)}
.commitment-card-title,.work-card .wname,.mt-jp,.model-card .mc-jp{transition:color .3s ease,text-shadow .3s ease}
.commitment-grid .commitment-card:hover .commitment-card-title,.works-grid .work-card:hover .wname,.models-tease-grid .mt-card:hover .mt-jp,.model-cat-grid .model-card:hover .mc-jp{color:var(--ga-gold-l);text-shadow:0 0 16px rgba(210,154,69,.45)}
.feature-card-line{transition:width .5s var(--ga-ease),box-shadow .4s ease}
.features-grid .feature-card:hover .feature-card-line{width:88px;box-shadow:0 0 12px var(--ga-glow-mid)}
.feature-card-en{transition:letter-spacing .4s var(--ga-ease),text-shadow .4s ease}
.features-grid .feature-card:hover .feature-card-en{letter-spacing:4px;text-shadow:0 0 22px rgba(232,184,106,.6)}
.feature-card-overlay{transition:opacity .5s ease}
.features-grid .feature-card:hover .feature-card-overlay{opacity:.85}
.feature-card-content{transition:transform .6s var(--ga-ease)}
.features-grid .feature-card:hover .feature-card-content{transform:translateY(-6px)}
/* 数字（01〜04・ORDER/LEASE/ARTIST）＝大きく・写真で切り抜く（decor.js が --ga-num-img と data-n を付ける）・後ろに輪郭 */
.commitment-card-num{position:relative;z-index:0;font-size:56px;line-height:.95;font-style:italic;letter-spacing:.02em;margin-bottom:12px;
  color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(135deg,#e8b86a,#d29a45 55%,#b9802f);background-size:cover;background-position:50% 50%;
  transition:background-position 1.2s var(--ga-ease),letter-spacing .35s var(--ga-ease)}
.commitment-card-num.has-img{background-image:var(--ga-num-img);filter:saturate(1.15) contrast(1.1)}
.commitment-card-num::before{content:attr(data-n);position:absolute;left:3px;top:4px;z-index:-1;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(210,154,69,.35);background:none}
.commitment-card-num::after{content:"";display:block;width:36px;height:2px;margin-top:10px;background:linear-gradient(90deg,var(--ga-gold),transparent);box-shadow:0 0 12px var(--ga-glow-soft);transition:width .5s var(--ga-ease)}
.commitment-grid .commitment-card:hover .commitment-card-num{background-position:50% 30%;letter-spacing:.06em}
.commitment-grid .commitment-card:hover .commitment-card-num::after{width:72px}
.commitment-card[style*="repeat(4"] .commitment-card-num,.commitment-grid[style*="repeat(4"] .commitment-card-num{font-size:48px}
/* 車種カード（TOP）・モデルカード */
.mt-card{isolation:isolate}
.models-tease-grid .mt-card:hover .mt-img{transform:scale(1.08)}
.mt-en,.model-card .mc-en{transition:letter-spacing .35s var(--ga-ease)}
.models-tease-grid .mt-card:hover .mt-en,.model-cat-grid .model-card:hover .mc-en{letter-spacing:.12em}
.model-card{position:relative;isolation:isolate;overflow:hidden}
.model-card::after{content:"→";position:absolute;right:20px;bottom:18px;font-family:var(--ff-en);font-size:20px;color:var(--ga-gold);opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s var(--ga-ease)}
.model-cat-grid .model-card:hover::after{opacity:1;transform:none}
.model-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(135deg,rgba(210,154,69,.16),transparent 60%);transition:opacity .35s ease}
.model-cat-grid .model-card:hover::before{opacity:1}
/* 導入事例・作品の一例（interior）＝ホバーで拡大・金の縁・VIEW */
.interior-item{position:relative;isolation:isolate;transition:transform .45s var(--ga-ease),box-shadow .45s var(--ga-ease)}
.interior-grid .interior-item:hover{transform:translateY(-8px);box-shadow:var(--ga-shadow-hi),0 0 0 2px rgba(210,154,69,.55),0 30px 56px -26px var(--ga-glow)}
.interior-item::before{content:"VIEW";position:absolute;left:50%;top:50%;z-index:2;translate:-50% -50%;font-family:var(--ff-en);font-size:13px;letter-spacing:4px;color:var(--ga-ink);opacity:0;
  padding:10px 22px;border:1px solid rgba(236,230,216,.5);border-radius:999px;background:rgba(13,12,11,.45);backdrop-filter:blur(3px);transition:opacity .35s ease;pointer-events:none}
.interior-grid .interior-item:hover::before{opacity:1}
/* コンセプト写真（TOP）・作家写真＝金の額縁が光る・PCは傾いた写真が起きる（3Dチルト） */
.concept-img,.owner-img-wrap{transition:transform .6s var(--ga-ease)}
.concept-img::after,.owner-img-wrap::after{transition:opacity .4s ease,box-shadow .4s ease,transform .6s var(--ga-ease)}
.concept-grid .concept-img:hover::after,.owner-grid .owner-img-wrap:hover::after{opacity:.9;box-shadow:0 0 22px var(--ga-glow-soft)}
.owner-img{transition:transform .7s var(--ga-ease),box-shadow .5s var(--ga-ease);cursor:zoom-in}
@media(min-width:1081px){
  .owner-img-wrap{perspective:1000px}
  .owner-grid .owner-img-wrap:hover .owner-img{transform:translateY(-6px) rotateY(-7deg) rotateX(3deg) scale(1.03);
    box-shadow:-20px 30px 56px -12px rgba(0,0,0,.7),0 0 0 2px rgba(210,154,69,.55),0 0 40px -6px var(--ga-glow-soft)}
  .concept-grid .concept-img:hover{transform:translateY(-6px) scale(1.02)}
}
/* 作品詳細（single-works）＝ギャラリーの写真に金の縁・拡大 */
.single-gallery .sg-main,.single-gallery .sg-sub{transition:box-shadow .4s var(--ga-ease)}
.single-gallery .sg-main:hover,.single-gallery .sg-sub:hover{box-shadow:0 0 0 2px rgba(210,154,69,.6),0 24px 48px -18px var(--ga-glow)}
.single-gallery .sg-main:hover img,.single-gallery .sg-sub:hover img{transform:scale(1.08)}
.single-spec-card{border-color:rgba(210,154,69,.18)}
.spec-price{padding:14px 16px;margin:0 -4px 8px;border-radius:12px;background:rgba(210,154,69,.06)}
/* お客様の声カード・定義ノート */
.voice-card{border-radius:var(--ga-r-card)}
.def-note{position:relative;isolation:isolate;border-left-width:3px;box-shadow:var(--ga-shadow)}

/* ==========================================================================
   型16転用 ニュース行・FAQ行＝カード化（出現の時間差・浮上・左に金の縦線・矢印・見出しが金に）
   ========================================================================== */
.news-list{display:grid;gap:12px;max-width:960px}
.news-list a{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:18px 54px 18px 24px;border:1px solid rgba(210,154,69,.14);border-radius:16px;
  background-color:rgba(27,24,19,.72);box-shadow:var(--ga-shadow);
  transition:transform .4s var(--ga-ease),box-shadow .4s var(--ga-ease),border-color .3s ease,background-color .26s ease,padding-left .24s var(--ga-ease)}
.news-list a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--ga-gold-l),var(--ga-gold-d));box-shadow:0 0 12px var(--ga-glow-mid);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ga-ease)}
.news-list a::after{content:"→";position:absolute;right:22px;top:50%;translate:0 -50%;font-family:var(--ff-en);font-size:20px;color:var(--ga-gold);opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s var(--ga-ease)}
.news-list a:hover{transform:translateY(-6px);padding-left:30px;border-color:rgba(210,154,69,.6);background-color:rgba(27,24,19,.92);
  box-shadow:var(--ga-shadow-hi),0 24px 44px -24px var(--ga-glow),0 0 0 1px rgba(210,154,69,.3)}
.news-list a:hover::before{transform:scaleY(1)}
.news-list a:hover::after{opacity:1;transform:none}
.news-list a:hover .nt{color:var(--ga-gold-l)}
.news-list .nt{transition:color .25s ease}
.faq-strip{display:grid;gap:12px;max-width:960px}
.faq-strip a{position:relative;isolation:isolate;overflow:hidden;padding:20px 54px 20px 24px;border:1px solid rgba(210,154,69,.14);border-radius:16px;background-color:rgba(27,24,19,.6);box-shadow:var(--ga-shadow);
  transition:transform .4s var(--ga-ease),box-shadow .4s var(--ga-ease),border-color .3s ease,background-color .26s ease,padding-left .24s var(--ga-ease)}
.faq-strip a span{padding:5px 12px;border:1px solid rgba(210,154,69,.5);border-radius:999px;font-size:12px;transition:background-color .25s ease,color .25s ease,box-shadow .3s ease}
.faq-strip a::after{content:"→";position:absolute;right:22px;top:50%;translate:0 -50%;font-family:var(--ff-en);font-size:20px;color:var(--ga-gold);opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s var(--ga-ease)}
.faq-strip a:hover{transform:translateY(-6px);padding-left:30px;border-color:rgba(210,154,69,.6);background-color:rgba(27,24,19,.92);
  box-shadow:var(--ga-shadow-hi),0 24px 44px -24px var(--ga-glow),0 0 0 1px rgba(210,154,69,.3)}
.faq-strip a:hover span{background-color:var(--ga-gold);color:#0d0c0b;box-shadow:0 0 14px var(--ga-glow-mid)}
.faq-strip a:hover::after{opacity:1;transform:none}
/* FAQページ＝Qに光・Aのカード化 */
.faq-q{font-size:17px}
.faq-q::before{text-shadow:0 0 14px rgba(210,154,69,.55);font-style:italic}
.faq-a{padding:20px 24px 24px 28px;margin-bottom:28px;border:1px solid rgba(210,154,69,.10);border-radius:14px;background-color:rgba(27,24,19,.55)}
.faq-a:last-child{border-bottom:1px solid rgba(210,154,69,.10)}
.faq-cat-head{text-shadow:0 0 14px rgba(210,154,69,.4)}
.faq-cat-head::before{box-shadow:0 0 10px var(--ga-glow-mid)}

/* ==========================================================================
   型14 ヒーローのギミック
   TOP: 既存の textIn（時間差出現）と kenBurns（7秒ワンショット）は残す → 追加＝英字の下に金のマーカーが1回走る／スクロール視差／マウス追随（hero-fx.js）
   下層 page-hero／work-hero: 高さを一段（180→clamp 220〜300）・タイトルに光・出現の時間差・金の罫が1回走る・視差（hero-fx.js が background-position を書く）
   初期非表示は head 先頭の `<script>document.documentElement.classList.add('hfx-js')</script>` で当てる（フラッシュ防止）＋JS不達フォールバック2.5秒
   ========================================================================== */
.hero-slides{will-change:transform}
.hero-en{position:relative;display:inline-block}
.hero-en::after{content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:2px;background:linear-gradient(90deg,transparent,var(--ga-gold),transparent);box-shadow:0 0 14px var(--ga-glow-mid)}
.hero-text-group.active .hero-en::after{animation:ga-marker .9s var(--ga-ease) 1.25s forwards}
@keyframes ga-marker{to{left:8%;right:8%}}
.hero-scroll::after{box-shadow:0 0 10px rgba(236,230,216,.6)}
.hero-overlay{background:linear-gradient(180deg,rgba(8,7,6,.16) 0%,rgba(8,7,6,.42) 55%,rgba(8,7,6,.7) 100%)}
.page-hero{height:clamp(220px,20vw,300px);isolation:isolate}
.page-hero::before{background:linear-gradient(180deg,rgba(8,7,6,.5) 0%,rgba(8,7,6,.66) 60%,rgba(8,7,6,.82) 100%)}
.page-hero-content{position:relative;z-index:1}
.page-hero-en{font-size:clamp(38px,4.4vw,58px);letter-spacing:.06em;text-shadow:0 0 34px rgba(210,154,69,.5),0 4px 22px rgba(0,0,0,.6);line-height:1.1;margin-bottom:6px}
.page-hero-jp{font-size:13px;letter-spacing:.32em;opacity:.92}
.page-hero-content::after{content:"";display:block;width:0;height:1px;margin:16px auto 0;background:linear-gradient(90deg,transparent,var(--ga-gold),transparent);box-shadow:0 0 12px var(--ga-glow-mid)}
.page-hero.hfx-on .page-hero-content::after{width:120px;transition:width .9s var(--ga-ease) .6s}
.work-hero-title{text-shadow:0 0 36px rgba(210,154,69,.45),0 4px 24px rgba(0,0,0,.6)}
.hfx-js .page-hero-content>*,.hfx-js .work-hero-inner>*{opacity:0;translate:0 14px;animation:hfx-fallback .01s linear 2.5s forwards}
@keyframes hfx-fallback{to{opacity:1;translate:none}}
.page-hero.hfx-on .page-hero-content>*,.work-hero.hfx-on .work-hero-inner>*{opacity:1;translate:none;transition:opacity .85s var(--ga-ease),translate .85s var(--ga-ease)}
.page-hero.hfx-on .page-hero-content>*:nth-child(1),.work-hero.hfx-on .work-hero-inner>*:nth-child(1){transition-delay:.08s}
.page-hero.hfx-on .page-hero-content>*:nth-child(2),.work-hero.hfx-on .work-hero-inner>*:nth-child(2){transition-delay:.26s}
.work-hero.hfx-on .work-hero-inner>*:nth-child(3){transition-delay:.44s}
@media(max-width:768px){.page-hero{height:clamp(150px,34vw,180px)}.page-hero-en{font-size:30px}}

/* ==========================================================================
   「特に画像を攻める」＝写真の拭き取り出現（1回だけ・decor.js が data-pic を付ける）＋ホバーで光の帯が斜めに走る＋金の縁
   ========================================================================== */
html.ga-pic [data-pic]{clip-path:inset(0 100% 0 0 round var(--ga-r-photo))}
html.ga-pic [data-pic].is-pic-in{clip-path:inset(0 0 0 0 round var(--ga-r-photo));transition:clip-path .95s cubic-bezier(.65,0,.2,1)}
html.ga-pic [data-pic][data-pic-d="1"].is-pic-in{transition-delay:.12s}
html.ga-pic [data-pic][data-pic-d="2"].is-pic-in{transition-delay:.24s}
html.ga-pic [data-pic][data-pic-d="3"].is-pic-in{transition-delay:.36s}
html.ga-pic [data-pic][data-pic-d="4"].is-pic-in{transition-delay:.48s}
html.ga-pic [data-pic][data-pic-d="5"].is-pic-in{transition-delay:.6s}
html.ga-pic [data-pic] img,html.ga-pic [data-pic] .feature-card-bg{scale:1.12}
html.ga-pic [data-pic].is-pic-in img,html.ga-pic [data-pic].is-pic-in .feature-card-bg{scale:1;transition:scale 1.3s var(--ga-ease)}
html.ga-pic [data-pic].is-pic-in img{transition:scale 1.3s var(--ga-ease),transform .9s var(--ga-ease),filter .45s ease}
/* 光の帯（写真の器に ::after）＝.owner-img-wrap は既存 ::after（額縁）があるので ::before を使う */
.commitment-card-img,.work-card .ph,.interior-item,.sg-main,.sg-sub,.mt-img,.concept-img{position:relative;isolation:isolate}
.commitment-card-img::after,.work-card .ph::after,.interior-item::after,.sg-main::after,.sg-sub::after,.mt-img::after,.concept-img::before,.feature-card .feature-card-overlay::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,rgba(232,184,106,.22) 52%,transparent 70%);transform:translateX(-140%) skewX(-8deg)}
.mt-img::after{background:linear-gradient(180deg,rgba(8,7,6,.15) 0%,rgba(8,7,6,.55) 100%);opacity:1;transform:none}
.commitment-grid .commitment-card:hover .commitment-card-img::after,.works-grid .work-card:hover .ph::after,.interior-grid .interior-item:hover::after,
.single-gallery .sg-main:hover::after,.single-gallery .sg-sub:hover::after,.concept-grid .concept-img:hover::before,.features-grid .feature-card:hover .feature-card-overlay::after{
  opacity:1;animation:ga-sweep .9s var(--ga-ease) 1}
@keyframes ga-sweep{from{transform:translateX(-140%) skewX(-8deg)}to{transform:translateX(140%) skewX(-8deg)}}
.feature-card-overlay{overflow:hidden}
.concept-img{transition:transform .6s var(--ga-ease),box-shadow .5s var(--ga-ease)}
.concept-grid .concept-img:hover{box-shadow:0 0 0 2px rgba(210,154,69,.5),0 30px 60px -20px var(--ga-glow)}

/* ==========================================================================
   型9 右端の固定帯（PC≥1081・既存 .side-cta＝作品相談／InstagramDM）＝金グラデ＋発光・角丸・ホバーで大きく出る・チャット展開中は引っ込める
   ========================================================================== */
@media(min-width:1081px){
  .side-cta{gap:8px;transition:transform .35s var(--ga-ease),opacity .3s ease}
  .side-cta.is-hidden{transform:translate(110%,-50%);opacity:0;pointer-events:none}
  .side-cta a{border-radius:12px 0 0 12px;padding:28px 0;width:56px;font-size:14px;letter-spacing:.14em;font-weight:500;line-height:1.4;
    display:flex;align-items:center;justify-content:center;text-align:center;
    box-shadow:-8px 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
    transition:transform .26s var(--ga-ease),box-shadow .3s var(--ga-ease),width .26s var(--ga-ease),opacity .2s ease}
  .side-cta a:first-child{color:#0d0c0b;background-color:var(--ga-gold);background-image:linear-gradient(180deg,#e8b86a,#d29a45 55%,#b9802f);
    box-shadow:-8px 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12),0 0 30px -4px var(--ga-glow)}
  .side-cta a:last-child{background-color:#141210;background-image:linear-gradient(180deg,#1f1a13,#141210);color:var(--ga-ink);
    box-shadow:-8px 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(210,154,69,.35)}
  .side-cta a:hover{opacity:1;transform:translateX(-8px);width:64px}
  .side-cta a:first-child:hover{box-shadow:-12px 12px 32px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.15),0 0 40px -2px var(--ga-glow)}
  .side-cta a:last-child:hover{box-shadow:-12px 12px 32px rgba(0,0,0,.55),0 0 0 1px rgba(210,154,69,.7),0 0 30px -6px var(--ga-glow-mid)}
  .side-cta a:active{transform:translateX(0)}
}
@media(min-width:1081px) and (max-height:760px){.side-cta a{padding:20px 0;font-size:13px}}

/* ==========================================================================
   型10 フッター＝点格子の地（上に指定済）・見出しの金の罫・索引のホバー・住所を大きく・CTAはピル
   ========================================================================== */
.site-footer{padding-top:96px}
.footer-top{padding-bottom:56px}
.footer-logo{font-size:28px;letter-spacing:4px;text-shadow:0 0 24px rgba(210,154,69,.3)}
.footer-logo-sub{letter-spacing:5px}
.footer-col-en{display:flex;align-items:center;gap:10px;font-size:15px}
.footer-col-en::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ga-gold-l),var(--ga-gold-d));box-shadow:0 0 10px var(--ga-glow-soft);flex:none}
.footer-col-jp{padding-bottom:12px;border-bottom:1px solid rgba(210,154,69,.16);margin-bottom:18px}
.footer-col a{position:relative;padding:5px 0 5px 14px;transition:color .2s ease,transform .22s var(--ga-ease)}
.footer-col a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--ga-gold);opacity:.6;transition:width .22s var(--ga-ease),opacity .2s ease}
.footer-col a:hover{color:var(--ga-gold-l);transform:translateX(4px)}
.footer-col a:hover::before{width:10px;opacity:1}
.footer-info{font-size:13px;line-height:2}
.footer-bottom{padding:28px 0}
.footer-copy{letter-spacing:3px}
.footer-cta{border-radius:999px}

/* ==========================================================================
   型6 SP固定フッター＝既存3枠（作品を見る／DMで相談／フォーム相談）を置換せず立体化（上辺ハイライト＋上向き二重影＋金枠グラデ＋押下1px沈み）
   ========================================================================== */
@media(max-width:768px){
  .mobile-bar{box-shadow:0 -1px 0 rgba(210,154,69,.35) inset,0 -10px 26px rgba(0,0,0,.6),0 -2px 8px rgba(0,0,0,.4)!important;border-top-color:rgba(210,154,69,.45)}
  .mobile-bar .mb-item{transition:transform .12s ease,opacity .2s ease}
  .mobile-bar .mb-item:active{transform:translateY(1px);opacity:.85}
  .mobile-bar .mb-form{background-image:linear-gradient(180deg,#e8b86a 0%,#d29a45 55%,#b9802f 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 20px rgba(0,0,0,.18),0 0 24px -4px var(--ga-glow-mid)}
  .mobile-bar .mb-ig{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -12px 20px rgba(0,0,0,.2)}
  .mobile-bar .mb-item svg{filter:drop-shadow(0 0 6px rgba(210,154,69,.35))}
  .mobile-nav{box-shadow:-10px 0 30px rgba(0,0,0,.5)}
  .mn-grid a{transition:background-color .25s ease,color .25s ease,padding-left .2s var(--ga-ease)}
  .mn-grid a:active{background:rgba(210,154,69,.14)}
  /* ボタンは字間を詰めて2行に折らない・CTAは縦積み全幅 */
  .cta-form-btn,.cta-tel-btn,.footer-cta{letter-spacing:.04em}
  .cta-buttons .cta-form-btn,.cta-buttons .cta-tel-btn{width:min(100%,420px);justify-content:center}
  .hero .cta-form-btn{padding:16px 30px}
  .commitment-card-num{font-size:46px}
  .news-list a::after,.faq-strip a::after{right:16px}
  .news-list a,.faq-strip a{padding-right:44px}
}

/* 中幅・SP：インラインで列数固定されたグリッド（TOP Craft=2列／ORDER Flow=4列）が狭い画面で縦積み文字になるのを止める（既存不具合・2026-09-06 検証で検出） */
@media(min-width:769px) and (max-width:1080px){
  .commitment-grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  .commitment-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .works-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .commitment-grid[style*="repeat("]{grid-template-columns:1fr!important;gap:24px!important}
}

/* ==========================================================================
   型13E 写真の拡大表示（decor.js の自作ライトボックス・[hidden]{display:none} 必須・single-works の既存 data-zoom は対象外）
   ========================================================================== */
.ga-zoom{cursor:zoom-in}
.ga-lbx[hidden]{display:none!important}
.ga-lbx{position:fixed;inset:0;z-index:99997;display:grid;place-items:center;background:rgba(5,4,3,.94);padding:clamp(16px,4vw,48px);backdrop-filter:blur(4px)}
.ga-lbx figure{margin:0;max-width:min(1200px,92vw);max-height:86vh;display:grid;gap:14px;justify-items:center}
.ga-lbx img{max-width:100%;max-height:76vh;width:auto;border-radius:14px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(210,154,69,.35),0 0 60px -10px var(--ga-glow-mid)}
.ga-lbx figcaption{color:var(--ga-ink);font-family:var(--ff-jp);font-size:13px;line-height:1.8;text-align:center;letter-spacing:.08em}
.ga-lbx button{position:absolute;top:18px;right:18px;width:46px;height:46px;border:1px solid rgba(210,154,69,.5);border-radius:50%;
  background:rgba(27,24,19,.8);color:var(--ga-ink);font-size:26px;line-height:1;cursor:pointer;transition:background-color .2s ease,box-shadow .25s ease}
.ga-lbx button:hover{background:var(--ga-gold);color:#0d0c0b;box-shadow:0 0 20px var(--ga-glow-mid)}

/* ==========================================================================
   フォーム（CF7）＝入力欄にフォーカスで金の光・同意チェック・送信ボタンはピル（上で指定）
   ========================================================================== */
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{box-shadow:0 0 0 3px rgba(210,154,69,.18),0 0 18px rgba(210,154,69,.18);outline:none}
.form-radio label{transition:border-color .25s ease,background-color .25s ease,box-shadow .3s ease}
.form-radio label:hover{background-color:rgba(210,154,69,.06);box-shadow:0 0 14px rgba(210,154,69,.15)}
.form-target{box-shadow:0 0 24px -6px var(--ga-glow-soft)}

/* ==========================================================================
   型15 reduced-motion＝減らす≠消す（連続系＝視差・追随・光の帯・拭き取りは止める／1回だけの出現・ホバーの縁・矢印は残す）
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .cta-form-btn:hover::before,.footer-cta-contact:hover::before,.spec-cta:hover::before,.form-submit:hover::before,.wpcf7-submit:hover::before,.mobile-nav-tel:hover::before,.tompy-ig-btn:hover::before,.works-model-banner:hover::before{animation:none}
  .commitment-grid .commitment-card:hover .commitment-card-img::after,.works-grid .work-card:hover .ph::after,.interior-grid .interior-item:hover::after,
  .single-gallery .sg-main:hover::after,.single-gallery .sg-sub:hover::after,.concept-grid .concept-img:hover::before,.features-grid .feature-card:hover .feature-card-overlay::after{animation:none}
  html.ga-pic [data-pic]{clip-path:none}
  html.ga-pic [data-pic] img,html.ga-pic [data-pic] .feature-card-bg{scale:1}
  .commitment-grid .commitment-card:hover,.works-grid .work-card:hover,.features-grid .feature-card:hover,.models-tease-grid .mt-card:hover,.model-cat-grid .model-card:hover{transform:none}
  .commitment-grid .commitment-card:hover .commitment-card-img img,.works-grid .work-card:hover .ph img,.interior-grid .interior-item:hover img,.features-grid .feature-card:hover .feature-card-bg{transform:none}
  .owner-grid .owner-img-wrap:hover .owner-img,.concept-grid .concept-img:hover{transform:none}
  .cta-form-btn:hover,.footer-cta-contact:hover,.spec-cta:hover,.form-submit:hover,.wpcf7-submit:hover{transform:none}
  .page-hero.hfx-on .page-hero-content>*,.work-hero.hfx-on .work-hero-inner>*{transition:opacity .6s ease,translate .6s ease}
}