/* =========================================================
   盛岡菜園刺繍 — Corporate Uniform & Team Wear
   Design tokens
   ========================================================= */
:root {
  /* アクセント＝紫（旧サイトのCTAカラー）。ボタン・リンク・現在地表示に使う */
  --brand: #5f2f8a;
  --brand-soft: #8258b0;
  --brand-tint: #f5f1fa;      /* 紫のごく薄い面 */

  /* ベース＝モスグリーン。ヒーロー・濃色セクション・フッターの地色 */
  --brand-deep: #3a3446;   /* 2026-09-25 モスグリーン→紫みのあるチャコールグレー */
  --navy-mid: #5b5566;

  /* サブアクセント＝グレー。見出しラベル・金額の強調・下線に使う */
  --accent: #9a9c9e;          /* 暗い面・図形用 */
  --accent-light: #cdcfd1;    /* 暗い背景の上の文字用 */
  --accent-deep: #5e6164;     /* 白背景の上の文字用（コントラスト確保） */

  --ink: #1e1a24;
  --body: #443f4d;
  --muted: #6f6879;
  --line: #e4e0e8;
  --canvas: #f7f5f9;
  --canvas-deep: #ede8f1;
  --white: #ffffff;
  --dark-panel: #15171c;      /* ヒーロー直下の数字帯などの暗い面 */

  --max: 1120px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 4px;

  --font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", Meiryo, sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* ヘッダーが sticky なので、アンカー移動先が header の下に潜らないよう逃がす */
html { scroll-padding-top: 116px; }
@media (max-width: 900px) { html { scroll-padding-top: 100px; } }
@media (max-width: 560px) { html { scroll-padding-top: 88px; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--white);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: .02em;
}
/* 見出しが自動折り返しで不自然な位置（単語の途中・1〜2文字だけ）で
   割れないよう、狭い画面向けに任意の位置で改行を入れるための印。
   PCなど広い画面では出さない。使い方: 見出し<br class="br-sp">の続き */
.br-sp { display: none; }
@media (max-width: 560px) { .br-sp { display: inline; } }

p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gap);
}

.narrow { max-width: 800px; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.gold { color: var(--accent); }
.small { font-size: .875rem; }
.tiny { font-size: .8rem; color: var(--muted); }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(8px);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 104px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 80px;
  height: auto;
  flex-shrink: 0;
}

/* フッターは全体ロゴを白抜きで表示 */
.brand-footer { display: block; }
.brand-lockup {
  width: 168px;
  height: auto;
}

.brand-text { line-height: 1.25; min-width: 0; }
.brand-name {
  display: block;
  font-size: 2.04rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .06em;
}
.brand-sub {
  display: block;
  font-size: 1.24rem;
  color: var(--muted);
  letter-spacing: .14em;
}

/* 画面が狭いところではロゴを少し落として、ナビと干渉させない */
@media (max-width: 900px) {
  .header-bar { min-height: 88px; }
  .brand-mark { width: 62px; }
  .brand-name { font-size: 1.44rem; }
  .brand-sub { font-size: .96rem; }
}
@media (max-width: 560px) {
  .header-bar { min-height: 68px; }
  .brand { gap: .5rem; flex-shrink: 1; min-width: 0; }
  .brand-mark { width: 44px; }
  .brand-name { font-size: 1.13rem; }
  .brand-sub { font-size: .62rem; letter-spacing: .06em; }
  /* ハンバーガーが崩れないよう、入りきらない分は社名側を
     省略記号で詰める（ハンバーガーの幅は絶対に犠牲にしない） */
  .brand-name, .brand-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 右端ぎりぎりに張り付いて見えないよう、少し内側に寄せる */
  .nav-toggle { margin-right: .3rem; }
}

.nav { display: flex; align-items: center; gap: 1.2rem; }

.nav-links {
  display: flex;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
  padding: .3rem 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color .18s, color .18s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--brand);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* =========================================================
   Top bar（電話番号だけの薄い帯。ヘッダー本体とは役割を分離）
   ========================================================= */
.top-bar {
  background: var(--brand);
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  min-height: 36px;
  font-size: .78rem;
}
.top-bar-tel {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.top-bar-tel:hover { text-decoration: none; color: var(--accent); }
.top-bar-tel svg { width: 15px; height: 15px; flex-shrink: 0; }
.top-bar-hours {
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}

@media (max-width: 1180px) { .top-bar { display: none; } }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 44px;
  height: 40px;
  flex-shrink: 0; /* 幅が足りない時に社名側ではなくここが潰れるのを防ぐ */
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--brand);
  transition: transform .22s, opacity .22s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 2rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .12s;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

/* 主CTA：紫 */
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: #47216a; border-color: #47216a; color: #fff; }

/* 副CTA：モスグリーン */
.btn-navy { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.btn-navy:hover { background: #2a3423; border-color: #2a3423; color: #fff; }

/* グレーのボタンを使う場合は必ず濃い文字色で */
.btn-accent { background: var(--accent); color: #232527; border-color: var(--accent); }
.btn-accent:hover { background: #85878a; border-color: #85878a; color: #232527; }

.btn-ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover { background: var(--brand); color: #fff; }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: #fff; color: var(--brand); border-color: #fff; }

.btn-lg { padding: 1.15rem 2.6rem; font-size: 1.02rem; }
.site-header .btn { white-space: nowrap; padding-inline: 1.3rem; }
.btn-block { display: flex; width: 100%; }

/* ピル型ボタン＋丸アイコン */
.btn-pill { border-radius: 999px; padding-right: 1.9rem; }
.btn-pill.btn-lg { padding-right: 2.3rem; }
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  font-size: .82em;
  line-height: 1;
  margin-left: .3em;
  flex-shrink: 0;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}
.btn-row.left { justify-content: flex-start; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  background: var(--brand-deep);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(58,52,70,.96) 0%, rgba(76,70,88,.88) 45%, rgba(95,47,138,.72) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px);
}
.hero-inner {
  position: relative;
  padding-top: clamp(3.4rem, 9vw, 6.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.hero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--accent-light);
  border-left: 3px solid var(--accent);
  padding-left: .7rem;
  margin-bottom: 1.3rem;
  font-weight: 600;
}
.hero h1 {
  color: #fff;
  font-size: clamp(1.85rem, 5vw, 3.05rem);
  line-height: 1.32;
  letter-spacing: .01em;
  margin-bottom: 1.1rem;
  max-width: 20em;
}
.hero h1 .accent {
  background: linear-gradient(transparent 62%, rgba(154,156,158,.45) 62%);
  padding: 0 .1em;
}
.hero-lead {
  font-size: clamp(1rem, 2vw, 1.14rem);
  color: rgba(255,255,255,.9);
  max-width: 40em;
  margin-bottom: 2rem;
}

/* =========================================================
   トップのヒーロー：白背景・ロゴを最上部に
   ========================================================= */
.hero-light { background: #fff; color: var(--body); }
.hero-light::before { display: none; }
.hero-light .hero-inner {
  text-align: center;
  padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(2.4rem, 5vw, 3.6rem);
}

/* ロゴ（マーク＋社名のセット） */
.hero-brand { margin: 0 auto clamp(1.1rem, 2.4vw, 1.6rem); }
.hero-brand img {
  width: clamp(220px, 26vw, 300px);
  height: auto;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-14px) scale(.94);
  animation: brandIn .8s cubic-bezier(.16,.84,.44,1) .05s forwards;
}
@keyframes brandIn { to { opacity: 1; transform: none; } }

.hero-light .hero-eyebrow {
  color: var(--accent-deep);
  border-left: none;
  padding-left: 0;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .3rem;
}
.hero-light h1 { color: var(--ink); margin-inline: auto; font-size: clamp(1.5rem, 4vw, 2.3rem); max-width: 26em; }
.hero-light .hero-lead { color: var(--body); margin-inline: auto; }
.hero-light .btn-row { justify-content: center; }

.hero-light .hero-badges { justify-content: center; }
.hero-light .hero-badges li {
  color: var(--brand);
  background: var(--brand-tint);
  border-color: #ddd0ea;
}

.hero-light .hero-stats {
  margin-inline: auto;
  background: var(--line);
  border-color: var(--line);
}
.hero-light .hero-stats div { background: #fff; }
.hero-light .hero-stats .n { color: var(--brand); }
.hero-light .hero-stats .l { color: var(--muted); }

/* =========================================================
   ヒーロー：全面写真＋ダークオーバーレイに文字を重ねる構成
   ========================================================= */
.hero-photo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 38vh, 380px);
  overflow: hidden;
  /* 動画が読み込まれるまでの地色。帯と揃えて緑が一瞬見えないようにする */
  background: var(--dark-panel);
}
.hero-photo-media { position: absolute; inset: 0; z-index: 0; }
.hero-photo-media img,
.hero-photo-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  display: block;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(18,15,23,.9) 0%, rgba(18,15,23,.66) 40%, rgba(18,15,23,.22) 68%, rgba(18,15,23,.05) 100%),
    linear-gradient(to top, rgba(18,15,23,.82) 0%, rgba(18,15,23,.1) 55%, rgba(18,15,23,0) 78%);
}
.hero-photo-shine {
  position: absolute;
  inset: -25% -15%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.10) 49%, rgba(255,255,255,.16) 51%, rgba(255,255,255,.10) 53%, transparent 60%);
  pointer-events: none;
}
/* 動画帯を半分の高さにしたぶん、見出し〜ボタンを詰めて収める */
.hero-photo-content {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.4rem, 3.2vw, 2.2rem);
}
.hero-photo-content h1 {
  max-width: 22em;
  font-size: clamp(1.42rem, 3.2vw, 2.2rem);
  line-height: 1.3;
  margin-bottom: .7rem;
}
.hero-photo-content .hero-lead {
  font-size: clamp(.88rem, 1.4vw, 1rem);
  line-height: 1.75;
  margin-bottom: 1.1rem;
}
.hero-photo-content .btn-row { justify-content: flex-start; align-items: center; margin-bottom: 0; }
.hero-photo-sublink {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 数字は動画の外（直下の帯）に出して、動画の高さを取らないようにする。
   地色はダークグレー。カードは面で塗らず、わずかな明度差と1pxの縁だけで
   浮かせる（暗い面の上で情報だけが立ち上がって見えるようにする） */
.hero-stats-band {
  background: var(--dark-panel);
  padding-block: clamp(.85rem, 2vw, 1.15rem);
}
.hero-stats-band .hero-stats {
  margin: 0;
  max-width: none;
  /* 帯なので横3列を保つ（縦積みにすると帯が高くなりすぎる） */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.45rem, 1.2vw, .7rem);
  background: none;
  border: 0;
}
.hero-stats-band .hero-stats div {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.018) 100%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: .7rem clamp(.7rem, 2vw, 1.15rem);
  text-align: left;
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
/* 上辺だけに走る細いハイライト。カードの輪郭を光らせて奥行きを出す */
.hero-stats-band .hero-stats div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
}
.hero-stats-band .hero-stats div:hover {
  border-color: rgba(255,255,255,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 100%);
}
.hero-stats-band .hero-stats .n {
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.hero-stats-band .hero-stats .l {
  font-size: .66rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  margin-top: .3rem;
  line-height: 1.45;
}
/* スマートフォンでも3枚を1行に並べる。
   1枚あたり約110pxしかないので、中央揃えにして余白と文字を詰め、
   数字は折り返さないようにする（ラベルだけは necessary なら2行に落ちる） */
@media (max-width: 560px) {
  .hero-stats-band .hero-stats { gap: .4rem; }
  .hero-stats-band .hero-stats div {
    padding: .6rem .4rem;
    border-radius: 12px;
    text-align: center;
  }
  .hero-stats-band .hero-stats .n {
    font-size: 1rem;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  .hero-stats-band .hero-stats .l {
    font-size: .6rem;
    letter-spacing: .01em;
    margin-top: .22rem;
  }
}
/* iPhone SE 幅（320px）用の詰め。ラベルは短くしてあるので文字は小さくしすぎない */
@media (max-width: 380px) {
  .hero-stats-band .hero-stats div { padding: .55rem .35rem; }
  .hero-stats-band .hero-stats .n { font-size: .94rem; }
}

/* ヒーローの主CTAボタン：Wix埋め込み経由など実効幅が狭い環境でも
   「無料見積りを依頼する」が2行に割れないよう、余白と文字を詰める */
@media (max-width: 480px) {
  .hero-photo-content .btn-row .btn.btn-lg {
    padding: .85rem 1.3rem;
    font-size: .92rem;
    white-space: nowrap;
  }
  .hero-photo-content .btn-row .btn.btn-pill.btn-lg { padding-right: 1.6rem; }
}
@media (max-width: 360px) {
  .hero-photo-content .btn-row .btn.btn-lg {
    padding: .8rem 1rem;
    font-size: .86rem;
  }
  .hero-photo-content .btn-row .btn.btn-pill.btn-lg { padding-right: 1.3rem; }
}

@media (max-width: 720px) {
  .hero-photo { text-align: center; }
  .hero-photo-content .btn-row { justify-content: center; }
  .hero-photo-media img,
  .hero-photo-media video { object-position: 68% 35%; }
}

/* =========================================================
   実作品の3Dカルーセル
   カードが右へ回り込み、奥へ下がって、手前に戻ってくる
   ========================================================= */
.rotator-section {
  background: var(--canvas);
  padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(2.6rem, 6vw, 4.4rem);
  overflow: hidden;
}
/* 見出しとカルーセルの間は詰める（写真は見出しの続きとして見せる） */
.rotator-section .section-head { margin-bottom: clamp(.6rem, 1.6vw, 1.1rem); }

/* カードは右から左へ一定速度で流れ、中央に近づくほど大きくなる。
   --span はカードが走る片道の距離。全カードが同じ軌道を辿り、
   animation-delay をずらすだけで等間隔に並ぶ（8枚 × 5秒 = 40秒で1周）。
   translateX は 0%→100% で線形に span → -span と動くので、
   各キーフレームの位置は span×(1-2×進捗) を calc で表している。 */
.rotator {
  position: relative;
  --span: 110vw;
  height: clamp(250px, 32vw, 340px);
  /* 画像の上を指でなぞっても縦スクロールとして扱う（横方向の
     ジェスチャー扱いにされてスクロールが引っかかるのを防ぐ） */
  touch-action: pan-y;
}
.rotator-stage {
  position: absolute;
  inset: 0;
}

.rot-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(174px, 22vw, 252px);
  height: clamp(174px, 22vw, 252px);
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(58,52,70,.20);
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.rot-card img { width: 100%; height: 100%; object-fit: cover; }

/* 8枚を等間隔（40秒 ÷ 8 = 5秒ずつ）にずらす */
.rc1 { animation-delay:  0s; }
.rc2 { animation-delay: -5s; }
.rc3 { animation-delay: -10s; }
.rc4 { animation-delay: -15s; }
.rc5 { animation-delay: -20s; }
.rc6 { animation-delay: -25s; }
.rc7 { animation-delay: -30s; }
.rc8 { animation-delay: -35s; }

/*
  画面の左右端あたりで 90%、中央へ向かって 100% → 110% → 120% と育つ。
  27%／73% が画面端（±50vw）に相当する位置。
*/
@keyframes marquee {
  0%   { transform: translate(-50%, -50%) translateX(var(--span))                scale(.90); }
  27%  { transform: translate(-50%, -50%) translateX(calc(var(--span) *  .46))   scale(.90); }
  35%  { transform: translate(-50%, -50%) translateX(calc(var(--span) *  .30))   scale(1.00); }
  43%  { transform: translate(-50%, -50%) translateX(calc(var(--span) *  .14))   scale(1.10); }
  50%  { transform: translate(-50%, -50%) translateX(0)                          scale(1.20); }
  57%  { transform: translate(-50%, -50%) translateX(calc(var(--span) * -.14))   scale(1.10); }
  65%  { transform: translate(-50%, -50%) translateX(calc(var(--span) * -.30))   scale(1.00); }
  73%  { transform: translate(-50%, -50%) translateX(calc(var(--span) * -.46))   scale(.90); }
  100% { transform: translate(-50%, -50%) translateX(calc(var(--span) * -1))     scale(.90); }
}

/* マウスを乗せている間は止めて、じっくり見られるようにする。
   ただし :hover はスマホ等のタップでも発火し、しかも指を離しても
   解除されないままアニメーションが止まって見える（＝タップした画像が
   固まる）うえ、スクロールしようとした指の動きまで拾ってしまい
   「スクロールの効き目が悪い」原因になる。実際にマウスを持つ環境
   （hover:hover かつ pointer:fine）だけに限定し、タッチ環境では
   一切 :hover の影響を受けないようにする。 */
@media (hover: hover) and (pointer: fine) {
  .rotator:hover .rot-card { animation-play-state: paused; }
  .rot-card:hover { box-shadow: 0 26px 56px rgba(58,52,70,.34); }
}

/* カルーセル下：「うちでも頼めるのか」に先回りして答える3点 */
.proof-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  padding: 0;
  list-style: none;
}
.proof-points li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.3rem, 3vw, 1.7rem);
}
.proof-points h3 {
  font-size: 1.02rem;
  line-height: 1.5;
  margin-bottom: .6rem;
  color: var(--brand);
}
.proof-points p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--body);
}

.proof-more {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  text-align: center;
}
.proof-more a {
  font-weight: 700;
  font-size: .96rem;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* カルーセル下のキャプション */
.rotator-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.rotator-cap p {
  margin: 0;
  font-size: .92rem;
  color: var(--body);
}
.rotator-stamp {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--accent);
  color: #232527;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  transform: rotate(-7deg);
  box-shadow: 0 8px 20px rgba(154,156,158,.4);
  border: 3px solid #fff;
  outline: 1px solid var(--accent);
}
.rotator-stamp b { font-size: .82rem; font-weight: 700; }
.rotator-stamp i { font-style: normal; font-size: .72rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .rot-card { animation: none; }
  .rotator { height: auto; }
  .rotator-stage { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
  .rot-card { position: static; width: auto; height: auto; aspect-ratio: 1/1; transform: none; opacity: 1; }
  .hero-brand img { animation: none; opacity: 1; transform: none; }
}

/* 画面が狭いとカード幅の比率が上がるので、走行距離を伸ばして重なりを防ぐ */
@media (max-width: 620px) {
  .rotator { --span: 190vw; height: 215px; }
  .rot-card { width: 140px; height: 140px; }
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.6rem;
  padding: 0;
  list-style: none;
}
.hero-badges li {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: .35rem 1rem;
  margin: 0;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.15);
  margin-top: 2.6rem;
  max-width: 640px;
}
.hero-stats div {
  background: rgba(58,52,70,.55);
  padding: 1.1rem .8rem;
  text-align: center;
}
.hero-stats .n {
  display: block;
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1.2;
}
.hero-stats .l {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
  margin-top: .25rem;
}

/* =========================================================
   Section shell
   ========================================================= */
.section { padding: clamp(3.2rem, 7vw, 5.4rem) 0; }
.section-canvas { background: var(--canvas); }
.section-navy { background: var(--brand-deep); color: rgba(255,255,255,.88); }

/* 薄いグレーの面。濃色セクションと同じ構成のまま、明るい配色で使う */
.section-mute { background: #f3f4f4; }
.section-mute h2, .section-mute h3 { color: var(--ink); }
.section-mute p { color: var(--body); }
.section-mute .reason { border-top-color: #dcdedd; }
.section-mute .reason .num { color: var(--accent-deep); }
.section-mute .video-copy p { color: var(--body); }
.section-mute .video-points li { color: var(--body); }
.section-mute .video-frame { border-color: #d6d8d7; box-shadow: 0 18px 40px rgba(58,52,70,.18); }
.section-mute .btn-ghost-light { color: var(--brand); border-color: var(--brand); }
.section-mute .btn-ghost-light:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.section-mute .notice-navy {
  background: #fff;
  border-left-color: var(--brand-deep);
  color: var(--body);
}
.section-mute .notice-navy strong { color: var(--ink); }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .section-label,
.section-navy .reason .num { color: var(--accent-light); }
.cta .section-label { color: var(--accent-deep); }

.section-head {
  text-align: center;
  max-width: 46em;
  margin: 0 auto clamp(2.2rem, 5vw, 3.2rem);
}
.section-head.left { text-align: left; margin-inline: 0; }

.section-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--accent-deep);
  font-weight: 700;
  margin-bottom: .7rem;
}
.section-head h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  margin-bottom: .7rem;
  letter-spacing: .02em;
}
.section-head p { color: var(--body); margin-bottom: 0; }
.section-navy .section-head p { color: rgba(255,255,255,.82); }

/* =========================================================
   Target cards (誰向けか)
   ========================================================= */
.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.target-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  padding: 1.9rem 1.5rem 1.5rem;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.target-card:hover {
  box-shadow: 0 14px 32px rgba(95,47,138,.14);
  transform: translateY(-3px);
  border-top-color: var(--accent);
  text-decoration: none;
}
.target-card .ico {
  width: 44px; height: 44px;
  color: var(--brand);
  margin-bottom: 1rem;
}
.target-card h3 {
  font-size: 1.12rem;
  margin-bottom: .5rem;
  color: var(--brand);
}
.target-card p {
  font-size: .89rem;
  color: var(--body);
  flex-grow: 1;
  margin-bottom: 1rem;
}
.target-card .price-from {
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: .8rem;
  margin-bottom: .6rem;
}
/* 料金表への入り口バナー：ヒーロー直下で「だいたいの金額」だけ先に見せる薄い帯 */
.price-banner { background: var(--brand-tint); padding: 1.5rem 0; }
.price-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem 1.6rem;
  text-align: center;
}
.price-banner-text {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
}
.price-banner-text strong { color: var(--brand); }
.price-banner .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .price-banner { padding: 1.2rem 0; }
  .price-banner-text { font-size: .92rem; }
}

/* 見積りフォームの見出しブロック。
   直後の #orderTop が section の余白を持つので、ここは上だけ空けて下は詰める */
.calc-intro { padding-top: clamp(2.6rem, 6vw, 4.4rem); }
.calc-intro .section-head { margin-bottom: 0; }
.calc-intro + .section { padding-top: clamp(1.2rem, 3vw, 2rem); }

/* 「30,000」と「円〜（税抜）」が泣き別れないよう、金額はひとかたまりで折る */
.price-from { word-break: keep-all; }
/* 品名と金額を明示的に上下に分け、金額は「（税抜）」まで必ず1行に収める */
.price-from .pf-label { display: block; }
.price-from .pf-amount { display: block; white-space: nowrap; }
.target-card .price-from strong {
  font-size: 1.28rem;
  color: var(--accent-deep);
  font-weight: 700;
  letter-spacing: .01em;
}
.target-card .more {
  font-size: .84rem;
  font-weight: 700;
  color: var(--brand);
}
.target-card .more::after { content: " →"; }

/* =========================================================
   Pack cards (パック商品)
   ========================================================= */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.pack-card {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pack-card.featured { border: 2px solid var(--brand); }
.pack-card .ribbon {
  position: absolute;
  top: 0; right: 0;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .3rem .9rem;
}
.pack-head {
  background: var(--brand);
  color: #fff;
  padding: 1.2rem 1.4rem;
}

.pack-head .cat {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--accent-light);
  margin-bottom: .3rem;
}
.pack-head h3 {
  color: #fff;
  font-size: 1.08rem;
  margin: 0;
  line-height: 1.4;
}
.pack-body { padding: 1.4rem; flex-grow: 1; display: flex; flex-direction: column; }
.pack-price {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.pack-price .unit { font-size: .78rem; color: var(--muted); display: block; }
.pack-price .amount {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.pack-price .amount small { font-size: .95rem; font-weight: 600; }
.pack-price .per {
  display: block;
  font-size: .8rem;
  color: var(--accent-deep);
  font-weight: 700;
  margin-top: .2rem;
}
.pack-spec {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  font-size: .85rem;
  flex-grow: 1;
}
.pack-spec li {
  padding-left: 1.35rem;
  position: relative;
  margin-bottom: .45rem;
}
.pack-spec li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* =========================================================
   Reason / feature blocks
   ========================================================= */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.5rem, 4vw, 2.6rem);
}
.reason {
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: 1.4rem;
}
.section:not(.section-navy) .reason { border-top-color: var(--line); }
.reason .num {
  display: block;
  font-size: .8rem;
  letter-spacing: .16em;
  color: var(--accent-deep);
  font-weight: 700;
  margin-bottom: .6rem;
}
.reason h3 { font-size: 1.14rem; margin-bottom: .55rem; }
.reason p { font-size: .89rem; margin-bottom: 0; }

/* =========================================================
   Workshop video
   ========================================================= */
.video-split {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(1.8rem, 5vw, 3.4rem);
  align-items: center;
}
.video-frame {
  position: relative;
  border: 1px solid rgba(255,255,255,.2);
  background: #000;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
}
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 608 / 1080;
  object-fit: cover;
}
.video-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(58,52,70,.62);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, transform .2s, opacity .2s;
  backdrop-filter: blur(2px);
}
.video-btn svg { width: 32px; height: 32px; margin-left: 3px; }
.video-btn:hover { background: var(--brand); transform: scale(1.06); }
.video-frame.playing .video-btn { opacity: 0; pointer-events: none; }
.video-frame.playing:hover .video-btn { opacity: 1; pointer-events: auto; }

.video-copy h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.video-copy p { color: rgba(255,255,255,.86); }
.video-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  font-size: .9rem;
}
.video-points li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: .5rem;
  color: rgba(255,255,255,.9);
}
.video-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

@media (max-width: 760px) {
  .video-split { grid-template-columns: 1fr; }
  .video-frame { max-width: 300px; margin-inline: auto; }
}

/* =========================================================
   Comparison table
   ========================================================= */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  background: #fff;
}
table.tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: .9rem;
}
table.tbl th, table.tbl td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
/* 表の中身は常に白地なので、濃色セクションの中でも文字色を固定する */
table.tbl td { color: var(--body); }
table.tbl tbody th { color: var(--ink); }
table.tbl thead th {
  background: var(--brand);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .05em;
  font-weight: 700;
  border-bottom: none;
  white-space: nowrap;
}
table.tbl tbody th {
  background: var(--canvas);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
table.tbl tbody tr:last-child th,
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tbl .hl { color: var(--accent-deep); font-weight: 700; }

/* =========================================================
   Flow steps
   ========================================================= */
.flow {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.2rem;
}
.flow-step {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.6rem 1.3rem 1.3rem;
  position: relative;
  counter-increment: step;
}
.flow-step::before {
  content: "STEP " counter(step);
  position: absolute;
  top: -.7rem; left: 1.2rem;
  background: var(--brand);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .2rem .75rem;
}
.flow-step h3 { font-size: 1rem; margin: .4rem 0 .5rem; }
.flow-step p { font-size: .85rem; margin-bottom: 0; }

/* =========================================================
   Works / case cards
   ========================================================= */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.case-card {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.case-thumb {
  aspect-ratio: 4 / 3;
  background: var(--canvas-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.case-card:hover .case-thumb img { transform: scale(1.04); }

/* =========================================================
   実作品ギャラリー
   ========================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
}
.gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gallery .ph {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--canvas-deep);
}
.gallery .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery figure:hover .ph img { transform: scale(1.05); }
.gallery figcaption {
  padding: .85rem 1rem 1rem;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--body);
  flex-grow: 1;
}
.gallery figcaption b {
  display: block;
  color: var(--ink);
  font-size: .9rem;
  margin-bottom: .2rem;
}
.gallery figcaption .tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--brand-soft);
  padding: .12rem .55rem;
  margin-bottom: .5rem;
}

/* ボディ（無地アイテム）のグリッド */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.item-grid figure {
  margin: 0;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  padding: .8rem .6rem 1rem;
}
.item-grid .ph {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .6rem;
}
.item-grid .ph img { max-width: 100%; max-height: 100%; object-fit: contain; }
.item-grid figcaption { font-size: .82rem; font-weight: 700; color: var(--ink); line-height: 1.5; }
.item-grid figcaption small { display: block; font-weight: 400; color: var(--muted); font-size: .75rem; }
.case-body { padding: 1.3rem; flex-grow: 1; display: flex; flex-direction: column; }
.case-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: var(--brand-soft);
  padding: .18rem .7rem;
  margin-bottom: .7rem;
}
.case-body h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.case-body p { font-size: .86rem; flex-grow: 1; }
.case-meta {
  border-top: 1px dashed var(--line);
  padding-top: .8rem;
  font-size: .82rem;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.case-meta .total { font-weight: 700; color: var(--accent-deep); font-size: 1rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  padding: 1.15rem 2.4rem 1.15rem 2.2rem;
  cursor: pointer;
  position: relative;
  line-height: 1.6;
}
.faq-q::before {
  content: "Q";
  position: absolute;
  left: 0; top: 1.1rem;
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 1.02rem;
}
.faq-q::after {
  content: "";
  position: absolute;
  right: .5rem; top: 1.55rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform .22s;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(-135deg); }
.faq-a {
  display: none;
  padding: 0 1rem 1.3rem 2.2rem;
  font-size: .92rem;
  position: relative;
}
.faq-a::before {
  content: "A";
  position: absolute;
  left: 0; top: 0;
  color: var(--brand-soft);
  font-weight: 700;
  font-size: 1.02rem;
}
.faq-item.open .faq-a { display: block; }
.faq-a p:last-child { margin-bottom: 0; }

/* =========================================================
   Notice / callout
   ========================================================= */
.spec-dl dd { color: var(--body); }

.notice {
  background: var(--canvas);
  border-left: 4px solid var(--accent);
  padding: 1.3rem 1.5rem;
  font-size: .9rem;
}
.notice h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.notice { color: var(--body); }
.notice-navy { color: rgba(255,255,255,.9); }
.notice-navy h3 { color: #fff; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }

.notice-navy {
  background: rgba(255,255,255,.06);
  border-left-color: var(--accent);
  color: rgba(255,255,255,.9);
}

/* =========================================================
   CTA band
   ========================================================= */
.cta {
  /* グラデーションは使わず、ごく薄いドットだけの地に */
  background-color: #f6f6f7;
  background-image: radial-gradient(rgba(58,52,70,.16) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  color: var(--body);
  text-align: center;
  padding: clamp(3rem, 7vw, 4.6rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta h2 { color: var(--ink); font-size: clamp(1.4rem, 3.4vw, 2rem); }
.cta p { color: var(--body); max-width: 40em; margin-inline: auto; }
.cta .addr { color: var(--ink); font-weight: 700; }
/* 明るい地になったので、白抜きボタンは紫の枠線ボタンに読み替える */
.cta .btn-ghost-light { color: var(--brand); border-color: var(--brand); }
.cta .btn-ghost-light:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.cta-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
  font-size: .9rem;
}
.cta-contacts .num {
  display: block;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .01em;
  line-height: 1.4;
  word-break: break-all;
}
.cta-contacts .lbl { color: var(--muted); font-size: .78rem; }

/* =========================================================
   Form
   ========================================================= */
.form-grid { display: grid; gap: 1.2rem; }
.field label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.req {
  display: inline-block;
  font-size: .66rem;
  background: var(--accent);
  color: #fff;
  padding: .1rem .45rem;
  margin-left: .5rem;
  vertical-align: 2px;
  font-weight: 700;
  letter-spacing: .06em;
}
.opt {
  display: inline-block;
  font-size: .66rem;
  background: var(--canvas-deep);
  color: var(--muted);
  padding: .1rem .45rem;
  margin-left: .5rem;
  vertical-align: 2px;
  font-weight: 700;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(95,47,138,.14);
}
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: .78rem; color: var(--muted); margin: .35rem 0 0; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* =========================================================
   数量スライダー（見積りシミュレーター）
   ========================================================= */
.qty-live {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand);
}
.qty-slider-only {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.qty-edge {
  flex: 0 0 auto;
  font-size: .74rem;
  color: var(--muted);
  min-width: 1.6em;
}
.qty-edge:last-child { text-align: right; }
.qty-slider-only input[type="range"] {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--brand) 0%, var(--brand) 0%, var(--line) 0%, var(--line) 100%);
  outline: none;
  cursor: pointer;
}
.qty-slider-only input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 26px;
  border-radius: 2px;
  background: var(--brand);
  border: none;
  box-shadow: 0 1px 4px rgba(95,47,138,.4);
  cursor: pointer;
  margin-top: 0;
}
.qty-slider-only input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 26px;
  border-radius: 2px;
  background: var(--brand);
  border: none;
  box-shadow: 0 1px 4px rgba(95,47,138,.4);
  cursor: pointer;
}
.qty-slider-only input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

/* =========================================================
   Footer
   ========================================================= */
/* =========================================================
   Footer — 旧サイトと同じく白基調
   モスグリーンは面としては使わず、区切り線などの差し色にとどめる
   ========================================================= */
.site-footer {
  background: #fff;
  color: var(--body);
  padding: clamp(2.6rem, 6vw, 4rem) 0 1.6rem;
  font-size: .87rem;
  border-top: 3px solid var(--brand-deep);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--line);
}
.site-footer h4 {
  color: var(--ink);
  font-size: .88rem;
  letter-spacing: .1em;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.site-footer a { color: var(--body); }
.site-footer a:hover { color: var(--brand); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-company { font-size: .82rem; line-height: 1.9; margin-top: 1rem; color: var(--muted); }
.footer-company strong { color: var(--ink); }
.footer-company a { color: var(--brand); font-weight: 700; }
.footer-sub {
  padding: 1.3rem 0 .2rem;
  border-bottom: 1px solid var(--line);
}
.footer-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-size: .8rem;
}
.footer-inline li { margin: 0; }
.footer-inline a { color: var(--muted); }

.copyright {
  text-align: center;
  padding-top: 1.5rem;
  font-size: .78rem;
  color: var(--muted);
}

/* =========================================================
   Sticky mobile CTA
   ========================================================= */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(58,52,70,.97);
  padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  gap: .55rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.sticky-cta a {
  flex: 1;
  padding: .8rem .5rem;
  font-size: .88rem;
}

/* =========================================================
   Breadcrumb
   ========================================================= */
.crumb {
  font-size: .78rem;
  color: var(--muted);
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumb li::after { content: "›"; margin-left: .4rem; color: var(--line); }
.crumb li:last-child::after { content: ""; }

/* =========================================================
   LP hero variant
   ========================================================= */
.lp-hero .hero-inner { padding-block: clamp(2.8rem, 7vw, 4.8rem); }
.lp-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.6rem); }

/* Problem list */
.problem-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}
.problem-list li {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.1rem 1.2rem 1.1rem 2.8rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  margin: 0;
}
.problem-list li::before {
  content: "✓";
  position: absolute;
  left: 1rem; top: 1.05rem;
  color: var(--accent);
  font-weight: 700;
}

/* Spec list (定義リスト) */
.spec-dl {
  border-top: 1px solid var(--line);
  margin: 0;
}
.spec-dl > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--line);
}
.spec-dl dt {
  background: var(--canvas);
  padding: .95rem 1.1rem;
  font-weight: 700;
  color: var(--ink);
  font-size: .88rem;
}
.spec-dl dd {
  padding: .95rem 1.1rem;
  margin: 0;
  font-size: .9rem;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .nav-tel { display: none; }
  .nav {
    position: fixed;
    inset: 68px 0 auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gap) 1.4rem;
    box-shadow: 0 16px 30px rgba(0,0,0,.1);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    display: none;
  }
  .nav.open { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a {
    display: block;
    padding: .95rem .2rem;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
  }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] { border-bottom-color: var(--line); }
  .nav > .btn { margin-top: 1rem; }

  .sticky-cta { display: flex; }
  body:has(.sticky-cta) { padding-bottom: 68px; }

  .hero-stats { grid-template-columns: 1fr; max-width: none; }
  .field-2 { grid-template-columns: 1fr; }
  .spec-dl > div { grid-template-columns: 1fr; }
  .spec-dl dt { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .btn-row .btn { width: 100%; }
  .cta-contacts { flex-direction: column; gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Print */
@media print {
  .site-header, .sticky-cta, .cta, .site-footer { display: none; }
}

/* =========================================================
   スクロールで下から現れるアニメーション
   ========================================================= */
/*
  重要：初期状態を透明にするのは、JSがアニメーションを引き受けられると
  確認できたとき（<html> に .has-reveal が付いたとき）だけにする。
  こうしておけば、JSが失敗しても本文が消えることはない。
*/
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity .7s cubic-bezier(.16,.84,.44,1),
    transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.has-reveal .reveal.in { opacity: 1; transform: none; }

/* 子要素を1つずつ遅らせて「シャッ、シャッ」と出す */
.has-reveal .reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .6s cubic-bezier(.16,.84,.44,1),
    transform .6s cubic-bezier(.16,.84,.44,1);
}
.has-reveal .reveal-stagger.in > * { opacity: 1; transform: none; }
.has-reveal .reveal-stagger.in > *:nth-child(1) { transition-delay: .00s; }
.has-reveal .reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
.has-reveal .reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.has-reveal .reveal-stagger.in > *:nth-child(4) { transition-delay: .21s; }
.has-reveal .reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.has-reveal .reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }
.has-reveal .reveal-stagger.in > *:nth-child(7) { transition-delay: .42s; }
.has-reveal .reveal-stagger.in > *:nth-child(8) { transition-delay: .49s; }
.has-reveal .reveal-stagger.in > *:nth-child(9) { transition-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal, .has-reveal .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-brand img { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* =========================================================
   ホバー効果の強化
   ========================================================= */

/* --- ボタン：持ち上げ＋影＋光沢の走査 --- */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    background .22s, color .22s, border-color .22s,
    transform .22s cubic-bezier(.34,1.4,.64,1),
    box-shadow .22s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }

.btn:hover, .btn:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(45,22,70,.34);
}
.btn:active { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(45,22,70,.3); }

.btn-primary:hover  { box-shadow: 0 14px 28px rgba(95,47,138,.48); }
.btn-navy:hover     { box-shadow: 0 14px 28px rgba(58,52,70,.48); }
.btn-ghost:hover    { box-shadow: 0 14px 26px rgba(95,47,138,.3); }
.btn-ghost-light:hover { box-shadow: 0 14px 28px rgba(0,0,0,.34); }

/* --- 用途カード：大きく持ち上げ、上辺の帯が伸びる --- */
.target-card {
  position: relative;
  border-top-width: 0;
  transition:
    box-shadow .3s, transform .3s cubic-bezier(.34,1.4,.64,1),
    border-color .3s, background .3s;
}
.target-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  width: 100%;
  background: var(--brand);
  transform: scaleX(1);
  transform-origin: left;
  transition: background .3s, height .3s;
}
.target-card:hover,
.target-card:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 26px 54px rgba(58,52,70,.24);
  background: var(--brand-tint);
}
.target-card:hover::before { background: var(--accent); height: 6px; }
.target-card .ico { transition: transform .3s cubic-bezier(.34,1.4,.64,1), color .3s; }
.target-card:hover .ico { transform: scale(1.12) rotate(-4deg); color: var(--brand); }
.target-card .more { transition: gap .25s, color .25s; }
.target-card:hover .more { color: var(--accent-deep); }
.target-card .more::after { transition: transform .25s; display: inline-block; }
.target-card:hover .more::after { transform: translateX(6px); }

/* --- パックカード --- */
.pack-card {
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .3s;
}
.pack-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 54px rgba(58,52,70,.26);
  border-color: var(--brand-soft);
}
.pack-card:hover .pack-head { background: var(--brand); }
.pack-card .pack-head { transition: background .3s; }

/* --- ギャラリー：拡大＋枠が紫に --- */
.gallery figure {
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .3s;
}
.gallery figure:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(58,52,70,.24);
  border-color: var(--brand-soft);
}
.gallery figure:hover .ph img { transform: scale(1.09); }
.gallery .ph img { transition: transform .45s cubic-bezier(.16,.84,.44,1); }

/* --- 取扱いボディ --- */
.item-grid figure {
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s, border-color .28s;
}
.item-grid figure:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(58,52,70,.2);
  border-color: var(--brand-soft);
}
.item-grid figure img { transition: transform .3s cubic-bezier(.34,1.4,.64,1); }
.item-grid figure:hover img { transform: scale(1.08); }

/* --- 事例カード --- */
.case-card { transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .3s; }
.case-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(58,52,70,.24);
  border-color: var(--brand-soft);
}

/* --- 流れのステップ --- */
.flow-step { transition: transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s, border-color .28s; }
.flow-step:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 40px rgba(58,52,70,.2);
  border-color: var(--brand-soft);
}
.flow-step::before { transition: background .28s, transform .28s; }
.flow-step:hover::before { background: var(--accent); color: #232527; transform: translateY(-2px); }

/* --- FAQ --- */
.faq-q { transition: background .2s, color .2s, padding-left .2s; }
.faq-q:hover { background: var(--brand-tint); color: var(--brand); padding-left: 2.6rem; }
.faq-q::after { transition: transform .25s, border-color .2s; }
.faq-q:hover::after { border-color: var(--brand); }

/* --- 課題リスト --- */
.problem-list li { transition: transform .25s, box-shadow .25s, border-color .25s; }
.problem-list li:hover {
  transform: translateX(6px);
  border-color: var(--brand-soft);
  box-shadow: 0 10px 24px rgba(58,52,70,.14);
}

/* --- 表の行 --- */
table.tbl tbody tr { transition: background .2s; }
table.tbl tbody tr:hover { background: var(--brand-tint); }

/* --- ナビ --- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s cubic-bezier(.16,.84,.44,1);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-links a:hover { color: var(--brand); }

/* --- フッターリンク --- */
.footer-links a, .footer-inline a { transition: color .2s, padding-left .2s; }
.footer-links a:hover, .footer-inline a:hover { padding-left: 5px; }

/* --- ロゴ --- */
.brand-mark { transition: transform .3s cubic-bezier(.34,1.4,.64,1); }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }

/* --- 動画 --- */
.video-frame { transition: box-shadow .3s, transform .3s; }
.video-frame:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,.45); }

/* =========================================================
   料金の構成（3つの足し算）
   ========================================================= */
.cost-formula {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.cost-item {
  flex: 1 1 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  padding: 1.4rem 1.1rem 1.2rem;
  text-align: center;
  position: relative;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s;
}
.cost-item:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(58,52,70,.2); }
.cost-item.accent-item { border-top-color: var(--accent); background: #f6f7f7; }
.cost-item .n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin: 0 auto .7rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
}
.cost-item.accent-item .n { background: var(--accent); color: #232527; }
.cost-item b { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: .45rem; }
.cost-item .d { display: block; font-size: .82rem; color: var(--muted); line-height: 1.7; }
.cost-formula .op {
  align-self: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--muted);
  flex: 0 0 auto;
}
@media (max-width: 700px) {
  .cost-formula { flex-direction: column; }
  .cost-formula .op { align-self: center; }
}

/* =========================================================
   パックカードの写真
   ========================================================= */
.pack-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--canvas-deep);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pack-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.16,.84,.44,1);
}
.pack-card:hover .pack-photo img { transform: scale(1.07); }

/* 写真がまだない枠 */
.pack-photo.pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, #eceef0 0 10px, #f4f5f6 10px 20px);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.pack-photo .note {
  position: absolute;
  left: 0; bottom: 0;
  background: rgba(58,52,70,.82);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .25rem .6rem;
}

/* =========================================================
   取扱いウェアのカタログ
   ========================================================= */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.2rem;
}
.catalog-item {
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s, border-color .28s;
}
.catalog-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(58,52,70,.2);
  border-color: var(--brand-soft);
}
.catalog-ph {
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .9rem;
  background: #fafafa;
  border-bottom: 1px solid var(--line);
}
/* 縦長・横長どちらの写真でも枠を崩さず中央に収める */
.catalog-ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.catalog-item:hover .catalog-ph img { transform: scale(1.07); }
.catalog-ph.pending {
  background: repeating-linear-gradient(45deg, #eceef0 0 10px, #f4f5f6 10px 20px);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}
.catalog-body { padding: .9rem 1rem 1.1rem; flex-grow: 1; display: flex; flex-direction: column; }
.catalog-body h3 { font-size: 1rem; margin-bottom: .3rem; }
.catalog-body .sub { font-size: .78rem; color: var(--muted); margin: 0 0 .7rem; flex-grow: 1; }
.catalog-price {
  border-top: 1px dashed var(--line);
  padding-top: .6rem;
  font-size: .78rem;
  color: var(--muted);
}
.catalog-price strong {
  display: block;
  font-size: 1.15rem;
  color: var(--accent-deep);
  font-weight: 700;
  letter-spacing: .01em;
}

/* =========================================================
   電話・対面でのお問い合わせボックス（2026-09-25 追加）
   実際の問い合わせは電話・来店が中心のため、見やすい位置に複数配置する
   ========================================================= */
.tel-band { background: var(--brand-tint); padding: clamp(1.6rem, 4vw, 2.4rem) 0; }
.tel-box {
  max-width: 34em;
  margin: 1.6rem auto 0;
  padding: 1.3rem 1.2rem 1.2rem;
  background: var(--white);
  border: 2px solid var(--brand);
  border-radius: 8px;
  text-align: center;
}
.tel-band .tel-box { margin-top: 0; }
.tel-box-lead { margin: 0 0 .3rem; font-weight: 700; color: var(--ink); font-size: .95rem; }
.tel-box-num {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  font-weight: 800;
  color: var(--brand);
  letter-spacing: .02em;
  line-height: 1.25;
  white-space: nowrap;
}
.tel-box-num:hover { text-decoration: none; color: var(--brand-soft); }
.tel-box-num svg { width: .85em; height: .85em; flex-shrink: 0; }
.tel-box-note { margin: .5rem 0 0; font-size: .82rem; color: var(--body); line-height: 1.7; }
.tel-box-note strong { color: var(--ink); }
.cta .tel-box-lead, .cta .tel-box-note { max-width: none; }

/* ヘッダー上の帯：店名を追加。狭い画面でも電話番号だけは出す */
.top-bar-shop { color: rgba(255,255,255,.85); white-space: nowrap; font-size: .76rem; }
@media (max-width: 1180px) {
  .top-bar { display: block; }
  .top-bar-inner { justify-content: center; min-height: 32px; }
  .top-bar-shop, .top-bar-hours { display: none; }
}


/* Instagram へのリンク（2026-09-25 追加） */
.top-bar-ig { display: flex; align-items: center; gap: .35rem; color: #fff; font-weight: 700; white-space: nowrap; }
.top-bar-ig:hover { text-decoration: none; color: var(--accent-light); }
.top-bar-ig svg { width: 15px; height: 15px; }
@media (max-width: 1180px) { .top-bar-ig { display: none; } }
.tel-box-ig {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .7rem; font-size: .85rem; font-weight: 700; color: var(--brand);
}
.tel-box-ig svg { width: 17px; height: 17px; flex-shrink: 0; }

/* キャップの色見本（ゴルフウェアのページ） */
.color-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; max-width: 820px; margin: 0 auto; }
.color-tile { margin: 0; text-align: center; width: 104px; }
.color-tile img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); background: #f6f6f4; }
.color-tile figcaption { margin-top: .35rem; font-size: .8rem; color: var(--body); }

/* ヘッダーのInstagramマーク（メニューの隣・全ページ） */
.brand { order: 1; }
.nav { order: 2; margin-left: auto; }
.header-ig { order: 3; }
.nav-toggle { order: 4; }
.header-ig {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.header-ig:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.header-ig svg { width: 24px; height: 24px; }
@media (max-width: 1000px) {
  .header-ig { margin-left: auto; width: 40px; height: 40px; }
}

/* 料金表（よくある枚数）：スマホでも3列を1画面に収める */
.tbl.tbl-fit { min-width: 0; width: 100%; }
@media (max-width: 600px) {
  .tbl.tbl-fit th, .tbl.tbl-fit td { padding: .65rem .55rem; font-size: .86rem; }
  .tbl.tbl-fit thead th { font-size: .8rem; }
}

/* スマホ：3列以下の表は画面幅に収める（4列以上は従来どおり横スクロール） */
@media (max-width: 600px) {
  .tbl:not(:has(tr > :nth-child(4))) { min-width: 0; width: 100%; }
  .tbl:not(:has(tr > :nth-child(4))) th,
  .tbl:not(:has(tr > :nth-child(4))) td { padding: .65rem .55rem; font-size: .86rem; }
}

/* スマホ：表を横スクロールさせない（2026-09-25）
   - 3列以下：見出しを折り返して画面幅に収める
   - 4列以上：1行ずつカード状に縦並び（見出しは各セルの左に表示。main.js が data-label を付与） */
@media (max-width: 600px) {
  table.tbl thead th, table.tbl tbody th { white-space: normal; }
  .tbl:not(:has(tr > :nth-child(4))) th,
  .tbl:not(:has(tr > :nth-child(4))) td { padding: .6rem .5rem; font-size: .84rem; line-height: 1.5; }
  .table-wrap:has(.tbl-stack) { overflow: visible; border: 0; }
  table.tbl.tbl-stack { min-width: 0; width: 100%; border: 0; }
  table.tbl.tbl-stack thead { display: none; }
  table.tbl.tbl-stack tbody tr { display: block; margin-bottom: .9rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
  table.tbl.tbl-stack tbody th { display: block; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
  table.tbl.tbl-stack tbody td { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .8rem; text-align: right; font-size: .86rem; }
  table.tbl.tbl-stack tbody td::before { content: attr(data-label); color: var(--muted); font-weight: 600; text-align: left; flex-shrink: 0; max-width: 55%; }
  table.tbl.tbl-stack tbody tr:last-child td { border-bottom: 1px solid var(--line); }
  table.tbl.tbl-stack tbody tr td:last-child { border-bottom: none; }
}

/* トップ：写真つきボタン（ゴルフ／道着の帯／クラスマッチ） */
.photo-links-head { margin-top: clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.photo-links-head h3 { font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--ink); margin: 0 0 1.2rem; }
.photo-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.photo-link {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 2px solid var(--line); border-radius: 12px; color: var(--body);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.photo-link:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(58,52,70,.14); }
.photo-link-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f3f6; }
.photo-link-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-link-body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.photo-link-title { font-weight: 800; font-size: 1.08rem; color: var(--ink); }
.photo-link-text { font-size: .86rem; line-height: 1.6; }
.photo-link-price { font-weight: 700; color: var(--brand); font-size: .92rem; }
.photo-link-more { margin-top: auto; padding-top: .4rem; font-size: .84rem; font-weight: 700; color: var(--brand); }
@media (max-width: 760px) {
  .photo-links { grid-template-columns: 1fr; gap: .8rem; }
  .photo-link { flex-direction: row; }
  .photo-link-img { width: 118px; flex-shrink: 0; aspect-ratio: auto; }
  .photo-link-body { padding: .75rem .85rem; gap: .2rem; }
  .photo-link-title { font-size: 1rem; }
  .photo-link-text { font-size: .8rem; }
  .photo-link-price { font-size: .84rem; }
}

/* ヘッダー：Instagramマークが入るよう、パソコン幅でメニューの間隔を少し詰める */
@media (min-width: 1001px) {
  .header-bar { gap: .8rem; }
  .nav { gap: .9rem; }
  .nav-links { gap: .85rem; }
  .header-ig { width: 38px; height: 38px; }
  .header-ig svg { width: 22px; height: 22px; }
}
@media (min-width: 1001px) and (max-width: 1240px) {
  .nav-links a { font-size: .78rem; }
  .brand-sub { display: none; }
}
/* 道着の帯の写真は、名前の部分が見えるように少し上寄せ */
.photo-link-img img[src*="obi-name"] { object-position: center 38%; }

/* トップの「よくある枚数の加工代」：通常のセクションより上下を詰める */
.section.section-compact { padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.section-compact .table-wrap { max-width: 760px; margin-inline: auto; }
.section-compact .tiny { max-width: 760px; margin-inline: auto; }