/* ===========================================================
   トップページ（front-page.php）固有。元は top.html の <style>
   =========================================================== */

/* 見出し：トップは文字を中央寄せ（2026-10-14 top.html） */
.gm-front .gm-h2{text-align:center}

/* メインビジュアル */
.gm-hero{padding:0;background:var(--gm-mist)}
.gm-hero-view{position:relative;overflow:hidden;padding:24px 0;touch-action:pan-y;overscroll-behavior-x:contain;cursor:grab;container-type:inline-size}
.gm-hero-view.is-single{cursor:auto}
.gm-hero-view.is-drag{cursor:grabbing}
.gm-hero-view.is-drag a{pointer-events:none}
.gm-slide img{-webkit-user-drag:none;user-select:none}
.gm-hero-track{display:flex;gap:16px;will-change:transform}
.gm-hero-view.is-single .gm-hero-track{justify-content:center}
.gm-hero-track.is-anim{transition:transform .55s cubic-bezier(.4,0,.2,1)}
.gm-slide{flex:0 0 var(--slide-w,1112px);position:relative;max-width:100%}
/* 2枚以上：スライドの幅と並びの位置を CSS で決める（JS が動く前から動いた後と同じ形。2026-10-30 STEP13）。
   100cqw＝表示枠の幅（.gm-hero-view がコンテナ）。slider.js は幅を読むだけで、--i（中央に来る位置。複製を含めて0から）と --dx（ドラッグ中のずれ）を書き換える。
   幅：min(1112, 表示枠の幅, (画面の高さ−300)×1112/593) と min(表示枠の幅, 600) の大きいほう。低い画面では縮めて次のセクションを見せる。
   位置：表示枠の幅/2 −（位置×(幅+16) + 幅/2）。最初は 2（前に複製が2枚あるため）。整数pxにそろえる（小数だと移動中に画像が揺れる） */
@supports (width:round(1.5px,1px)) and (width:1cqw){
  .gm-hero-view:not(.is-single){--slide-w:round(nearest,max(min(1112px,100cqw,(100vh - 300px)*1112/593),min(100cqw,600px)),1px)}
  .gm-hero-view:not(.is-single) .gm-hero-track{transform:translateX(calc(round(nearest,50cqw - (var(--i,2)*(var(--slide-w) + 16px) + var(--slide-w)/2),1px) + var(--dx,0px)))}
}
.gm-slide img,.gm-slide .gm-ph{width:100%;aspect-ratio:1112/593;object-fit:cover;display:block;height:auto}
/* 暗幕は別レイヤー（移動中の再描画を防ぐ。2026-10-15 カクつき対策） */
.gm-slide::after{content:"";position:absolute;inset:0;background:rgba(20,26,12,.38);transition:opacity .55s;pointer-events:none;will-change:opacity}
.gm-slide img{transform:translateZ(0);backface-visibility:hidden}
.gm-slide.is-active::after{opacity:0}
.gm-hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.85);cursor:pointer;z-index:2;display:grid;place-items:center;transition:background .15s,opacity .25s}
.gm-hero-view.is-drag .gm-hero-nav{opacity:0;pointer-events:none}
.gm-hero-nav:hover{background:#fff}
.gm-hero-nav i{display:block;width:12px;height:12px;border-top:2px solid var(--gm-ink);border-right:2px solid var(--gm-ink)}
.gm-hero-nav.prev{left:calc(50% - var(--slide-w,1112px)/2 - 16px);transform:translate(-100%,-50%)}
.gm-hero-nav.prev i{transform:rotate(-135deg);margin-left:4px}
.gm-hero-nav.next{right:calc(50% - var(--slide-w,1112px)/2 - 16px);transform:translate(100%,-50%)}
.gm-hero-nav.next i{transform:rotate(45deg);margin-right:4px}
.gm-dots{display:flex;justify-content:center;gap:10px;padding-bottom:20px}
.gm-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#c4cbb5;cursor:pointer;transition:background .2s}
.gm-dots button.is-active{background:var(--gm-green)}

/* お知らせ */
.gm-news .gm-wrap{display:flex;align-items:center;gap:16px;padding-top:22px;padding-bottom:0;font-size:1rem}
.gm-news .lbl{white-space:nowrap;background:var(--gm-green);color:#fff;padding:4px 16px;border-radius:999px;font-size:.85rem;font-weight:700}
.gm-news time{color:var(--gm-sub);font-variant-numeric:tabular-nums}
.gm-news .more{margin-left:auto;color:var(--gm-green-dark);font-size:.9rem}

/* バナー2枚（お見積り・送料無料）。画像はサイト設定から */
.gm-two{padding:34px 0 0}
.gm-two .gm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gm-bnr{border-radius:14px;display:block;overflow:hidden;background:#fff;border:2px solid var(--gm-pale);color:var(--gm-ink);transition:border-color .15s,box-shadow .15s}
.gm-bnr:hover{border-color:var(--gm-green);box-shadow:0 2px 10px rgba(40,50,20,.10)}
.gm-bnr img,.gm-bnr .gm-ph{width:100%;height:auto;aspect-ratio:690/115;object-fit:cover;object-position:center}

/* 売れ筋商品のランク */
.gm-item .rank{position:absolute;top:0;left:0;background:var(--gm-orange);color:#fff;font-size:.8rem;font-weight:700;padding:3px 10px}
/* 全ての商品：11件目以降は隠し、「もっと見る」で開く（assets/js/all-items.js。JS が無効なら inc/setup.php の <noscript> で全件） */
.gm-allitems:not(.is-open) .gm-item:nth-child(n+11){display:none}
.gm-allitems-sec{scroll-margin-top:calc(var(--gm-head-h,86px) + 16px)}
button.gm-btn{border:0;font-family:inherit;letter-spacing:inherit;cursor:pointer}
.gm-btn[hidden]{display:none}
.gm-allitems-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.gm-rank li:nth-child(1) .rank{background:#C9A227}
.gm-rank li:nth-child(2) .rank{background:#9CA3A8}
.gm-rank li:nth-child(3) .rank{background:#A9713F}

/* 篠田ゴムについて */
.gm-about{padding:64px 0 0}
.gm-about>.gm-wrap{scroll-margin-top:calc(var(--gm-head-h,86px) - var(--gm-head-gap,0px) + 16px)} /* /#about の飛び先（STEP22b）。ふだんは header.js の jumpTo() が縮んだヘッダーの下 16px に置く。これは JS が効かないとき等の保険 */
/* 写真を重ねながら切り替える（assets/js/about-slides.js。2026-10-30 STEP13。見本 renewal/_demo-about.html の「中央・重ねる・一言ずつ・太い」）。
   1枚目は HTML の段階で .is-on（JS が動く前から表示中）。時間の数値はここの変数にまとめ、1枚の表示時間（4秒。2026-11-02 STEP21 で 7秒→4秒）は about-slides.js の SHOW */
.gm-about-box{position:relative;overflow:hidden;background:#3c4a2a;aspect-ratio:21/9;
  --fade:1.2s;      /* 写真の重なり（ease-out。STEP21 で 2s→1.2s） */
  --zoom:1.06;      /* 表示中の拡大（1→1.06） */
  --zoom-t:5.2s;    /* 拡大の時間（表示4秒＋次の写真が重なる1.2秒。linear。STEP21 で 9s→5.2s） */
  --line-t:1.1s;    /* 文の1行がふわっと出る時間 */
  --line-gap:1.1s;  /* 次の行が出るまでの遅れ */
  --out-t:.8s;      /* 次の写真が重なり始めたときに文が消える時間 */
}
.gm-about-box>.gm-ph{position:absolute;inset:0}
.gm-about-ph{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity var(--fade) ease-out}
.gm-about-ph img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1)}
.gm-about-ph.is-on{opacity:1;z-index:3}
.gm-about-ph.is-prev{opacity:1;z-index:2;transition:none} /* 前の写真は次の写真の下で出したまま（拡大も止めない） */
/* 拡大は animation（2026-10-30 STEP13c）。.is-on が付くたびに最初から始まる。タブが裏のあいだ（と、枠が初めて見える前）は JS が .is-paused を付け、その位置で止める（transition だと裏で最後まで進んでしまう）。枠が画面から外れても止めない（STEP36） */
@keyframes gm-about-zoom{from{transform:scale(1)}to{transform:scale(var(--zoom))}}
.gm-about-box.is-run :is(.gm-about-ph.is-on,.gm-about-ph.is-prev) img{animation:gm-about-zoom var(--zoom-t) linear forwards}
.gm-about-box.is-run.is-paused :is(.gm-about-ph.is-on,.gm-about-ph.is-prev) img{animation-play-state:paused} /* 上の animation（一括指定）より強くする。弱いと running に戻される */
/* 暗幕：写真全体に同じ濃さ（28%）＋右下の角から広がる境目の無い暗幕（リンク用）。文の位置の指定は当てない */
.gm-about-dim{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.45) 0%,rgba(0,0,0,.25) 15%,rgba(0,0,0,.08) 28%,rgba(0,0,0,0) 40%),rgba(0,0,0,.28)}
/* 写真ごとの文：中央・1行ずつ・太字・全部同じ大きさ。幅は左右に8%の余白を取った幅（left:50% にすると幅が半分になり細かく改行される） */
.gm-about-lead{position:absolute;z-index:7;left:8%;right:8%;top:50%;translate:0 -50%;margin:0;text-align:center;color:#fff;font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:.12em;line-height:1.6;word-break:auto-phrase;text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.35);pointer-events:none}
.gm-about-lead span{display:block;text-wrap:balance;opacity:0;transform:translateY(10px);filter:blur(6px);transition:opacity var(--line-t) ease,transform var(--line-t) ease,filter var(--line-t) ease}
.gm-about-lead.is-in span{opacity:1;transform:none;filter:none;transition-delay:calc(var(--t0,0s) + var(--k,0) * var(--line-gap))}
.gm-about-lead.is-out span{opacity:0;transition-duration:var(--out-t);transition-delay:0s}
/* 右下のリンク（いつも出す） */
.gm-about-more{position:absolute;z-index:8;right:4%;bottom:8%;color:#fff;font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.7;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.35)}
.gm-about-more:hover{color:#fff;border-bottom-color:#fff}
@media (prefers-reduced-motion:reduce){
  .gm-about-ph,.gm-about-ph img,.gm-about-lead span{transition:none!important}
  .gm-about-ph img{animation:none!important}
}
/* 4つの強み。アイコンはサイト設定の画像、未設定なら緑の線画SVG（2026-10-15 確定） */
.gm-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:32px;padding:34px 20px 30px;background:var(--gm-mist);border-radius:4px;text-align:center}
.gm-facts li{padding:0 16px;border-left:1px solid var(--gm-pale)}
.gm-facts li:first-child{border-left:0}
.gm-facts .ic{width:76px;height:76px;border-radius:50%;margin:0 auto 14px;background:#fff;border:1.5px solid var(--gm-green);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--gm-green);overflow:hidden}
.gm-facts .ic svg{width:60px;height:60px;fill:none;stroke:var(--gm-green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gm-facts .ic img{width:100%;height:100%;object-fit:contain}
.gm-facts b{display:block;font-size:1.9rem;font-weight:700;color:var(--gm-green-dark);line-height:1.2;letter-spacing:.02em}
.gm-facts b small{font-size:.95rem}
.gm-facts span{display:block;font-size:.92rem;color:var(--gm-sub);margin-top:4px}

/* 縦が短い画面：最初の画面にお知らせ行まで入れる（2026-10-15） */
@media (min-width:961px) and (max-height:760px){
  .gm-about{padding-top:48px}
  .gm-hero-view{padding:14px 0}
  .gm-dots{padding-bottom:12px} /* 641px以上は下の横棒の指定（padding:0）が後にあるので効かない */
  .gm-news .gm-wrap{padding-top:14px}
  .gm-two{padding-top:24px}
  /* 篠田ゴムについて：21:9のままだと張り付くヘッダーの下に収まらない。高さを画面に合わせ、上下を少し切り抜く */
  .gm-about-box{aspect-ratio:auto;height:max(calc(100vh - 140px),360px)}
}

/* メインビジュアル PC（641px以上）：カード型（中央のカード＋両隣が少し見える。1112:593）。
   2026-10-21 に画面幅いっぱいにしたが、2026-10-22 にカード型へ戻した（ユーザー決定）。
   スライドの位置は点ではなく横棒（2026-10-21 ユーザー指示。参考 y-yokohama.com）。中央のカードの下端に重ね、今のスライドだけ白・他は半透明の白。
   押せる範囲は棒より上下に広く（高さ 24px）、棒は ::before で描く。棒の列の空いた所はドラッグを邪魔しない。
   棒の位置＝表示枠の上下の余白（961px以上 24px・低い画面 14px・960px以下 0）＋12px */
@media (min-width:641px){
  .gm-hero{position:relative}
  .gm-dots{position:absolute;left:0;right:0;bottom:36px;z-index:2;gap:8px;padding:0;pointer-events:none}
  .gm-dots button{pointer-events:auto;width:48px;height:24px;border-radius:0;background:transparent;display:grid;align-items:center}
  /* 明るい写真でも棒が読めるよう、カードの下端 90px に黒のグラデーション（下 35%→上 0%。2026-10-21）。暗幕（::after）より下 */
  .gm-slide::before{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,0));pointer-events:none}
  .gm-dots button::before{content:"";display:block;height:3px;background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:background .2s}
  .gm-dots button:hover::before{background:rgba(255,255,255,.8)}
  .gm-dots button.is-active{background:transparent}
  .gm-dots button.is-active::before{background:#fff}
}
@media (min-width:961px) and (max-height:760px){
  .gm-dots{bottom:26px}
}
@media (min-width:641px) and (max-width:960px){
  .gm-dots{bottom:12px}
}

@media (max-width:960px){
  .gm-hero-view{padding:0}
  .gm-hero-nav{display:none}
  .gm-slide::after{background:rgba(20,26,12,.35)}
  .gm-about-box{aspect-ratio:16/9}
  .gm-about-lead{font-size:20px;letter-spacing:.08em}
  .gm-about-more{font-size:13px;bottom:6%}
  .gm-facts{grid-template-columns:1fr 1fr;row-gap:28px;padding:28px 12px}
  .gm-facts li:nth-child(odd){border-left:0}
  .gm-two .gm-wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* 篠田ゴムについて：写真が低いので、文は右下のリンクより上の範囲の中央に置く（重ならないように。2026-10-30 STEP13） */
  .gm-about-lead{top:4%;bottom:calc(6% + 40px);translate:none;display:flex;flex-direction:column;justify-content:center}
  .gm-news .gm-wrap{flex-wrap:wrap;gap:8px 12px}
  .gm-news .more{flex-basis:100%;margin-left:0;text-align:right}
  .gm-facts{margin-top:24px;padding:22px 8px 20px;row-gap:22px}
  .gm-facts li{padding:0 8px}
  .gm-facts .ic{width:56px;height:56px;margin-bottom:10px;font-size:.6rem}
  .gm-facts .ic svg{width:46px;height:46px}
  .gm-facts b{font-size:1.25rem;white-space:nowrap}
  .gm-facts b small{font-size:.75rem}
  .gm-facts span{font-size:.82rem}
}
@media (max-width:480px){
  .gm-about-lead{top:3%;left:5%;right:5%;letter-spacing:.04em;line-height:1.4} /* 8%・.08em・1.6 のままだと 3枚目の文が5行になりリンクに重なる（2026-10-30 STEP13） */
}