/* --------------------------------------------------
   BASIC RESET
-------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fff;
}

/* --------------------------------------------------
   UTILITIES
-------------------------------------------------- */
.container          { width: min(92%, 1200px); margin-inline: auto; }
.flex               { display: flex; gap: 0.75rem; }
.flex-wrap          { flex-wrap: wrap; }
.grid               { display: grid; }
.g2                 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

/* --------------------------------------------------
   TYPOGRAPHY & SPACING
-------------------------------------------------- */
.section            { padding: 4.5rem 0; }
.section--light     { background: #fafafa; }

.h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 1.25rem; text-align: center; }
.h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 600; margin-bottom: 0.75rem; text-align: center; }
.h3 { font-size: 1.15rem; font-weight: 600; margin: 0.5rem 0; }
.logo { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }

/* --------------------------------------------------
   GLOBAL COMPONENTS
-------------------------------------------------- */
/* --- Card --- */
.card       { background:#fff; border:1px solid #e5e5e5; border-radius:6px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,.04); }
.card-body  { padding:1rem; }
.card-body p{ font-size:.9rem; }

/* --- Buttons --- */
.btn{ display:inline-block; padding:.65rem 1.4rem; border-radius:4px; background:#0069aa; color:#fff; font-size:.9rem; text-decoration:none; transition:background .2s; }
.btn:hover{ background:#004f7f; }

/* --------------------------------------------------
   HEADER CTA
-------------------------------------------------- */
.header-cta{ display:flex; gap:.75rem; }
@media (max-width:767px){
  .header-cta{ display:none; }  /* モバイルはハンバーガー化想定 */
}

/* --------------------------------------------------
   HERO SECTION
-------------------------------------------------- */
.hero{
  min-height:80vh;
  display:flex; flex-direction:column; justify-content:center;
  background:url('/mirror-kananomo/assets/images/heroimg_dance_studio.jpg') center/cover no-repeat;
}
.hero h1{ font-size:clamp(1.9rem,4.5vw,2.8rem); font-weight:700; text-align:center; margin-bottom:1rem; color:#fff; }
.hero p { max-width:700px; margin-inline:auto; text-align:center; font-size:1rem; color:#fff; }
.cta-buttons{ margin-top:2rem; display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.cta-buttons a{ background:#0069aa; color:#fff; padding:.75rem 1.5rem; border-radius:4px; font-size:.9rem; text-decoration:none; transition:background .2s; }
.cta-buttons a:hover{ background:#004f7f; }

/* --------------------------------------------------
   NAVIGATION
-------------------------------------------------- */
/* --- Anchor nav (上部のセクションリンク) --- */
.anchor-nav{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid #ddd;
}
.anchor-nav ul{ display:flex; overflow-x:auto; padding:.5rem 0 .25rem; }
.anchor-nav li{ white-space:nowrap; margin:0 .75rem; }
.anchor-nav a{ color:#0069aa; font-size:.85rem; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:.25rem; }
.anchor-nav a:hover, .anchor-nav a.active{ border-color:#0069aa; }

/* --------------------------------------------------
   CATEGORY CARD NAV & FILTER
-------------------------------------------------- */
/* --- Category image cards (grid) --- */
.card-nav{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
  margin-bottom:2rem;
}
.card-item{ position:relative; overflow:hidden; border-radius:8px; cursor:pointer; transition:transform .2s; }
.card-item:hover{ transform:translateY(-4px); }
.card-item img{ width:100%; height:240px; object-fit:cover; display:block; }
.card-overlay{ position:absolute; bottom:0; width:100%; background:rgba(0,0,0,.5); color:#fff; text-align:center; padding:.5rem 0; font-size:.9rem; font-weight:600; }

@media (max-width: 1024px){ .card-nav{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .card-nav{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .card-nav{ grid-template-columns: 1fr; } }

/* --- Filter bar (select) --- */
.filter-bar select{
  width: 320px;        /* 好みで 280〜360px に調整可 */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* --------------------------------------------------
   PRODUCT LISTING （整理版）
   - 上段：画像1・画像2を横並び
   - 下段：商品情報の表を全幅
   - 画像はカラム幅の 75%（= 約1/4小さく）
-------------------------------------------------- */
#product-area  { margin-top: 40px; }
.loading       { padding: 40px; text-align: center; }

/* 1カード=1行に見せたいので縦リスト */
.product-group{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ベースカード（※ここだけに一本化） */
.product-card{
  /* レイアウト */
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 上段の画像は左右1:1 */
  column-gap: 12px;
  row-gap: 0;

  /* 見た目 */
  width: 100%;
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: 6px 12px;                /* 上下は1/4程度に圧縮済み */
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
  overflow: hidden;
}

/* 画像（上段） */
.product-card > img.product-image{
  grid-row: 1;                      /* 上段 */
  width: 60%;                       /* 各カラム幅の75%＝約1/4小さく */
  height: auto;
  display: block;
  margin: 0 auto;                   /* カラム内で中央寄せ */
  object-fit: contain;              /* 図面が切れないように */
}
.product-card > img.product-image:nth-of-type(1){ grid-column: 1; }
.product-card > img.product-image:nth-of-type(2){ grid-column: 2; }

/* 画像が1枚しか無い場合は上段で全幅表示 */
.product-card > img.product-image:only-of-type{ grid-column: 1 / -1; width: 50%; }

/* 表（下段・全幅） */
.product-card > .product-info{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 10px;                 /* 画像との間隔 */
  font-size: .9rem;
}

/* 表の体裁（従来を流用） */
.product-table{ width:100%; border-collapse:collapse; margin-top:.5rem; font-size:.95em; }
.product-table th, .product-table td{ border:1px solid #ddd; padding:.35em .7em; }
.product-table th{ background:#f7f7f7; text-align:left; width:6em; }

/* --- モバイル：画像を縦積み（1→2枚目の間だけ 2px） --- */
@media (max-width: 640px){
  .product-card{ grid-template-columns: 1fr; }
  .product-card > img.product-image{ width:100%; margin:0; }
  .product-card > img.product-image:nth-of-type(1){ grid-column:1; grid-row:1; }
  .product-card > img.product-image:nth-of-type(2){
    grid-column:1; grid-row:2; margin-top:2px;       /* 1→2枚目だけ極小 */
  }
  .product-card > .product-info{ grid-column:1; grid-row:3; margin-top:8px; }
}

/* 必須：カテゴリの表示制御 */
.products { display: none; }
.products.active { display: block; }

.product-group{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 商品カード内の「表の外の見出し（商品名）」だけ消す */
.product-card .product-info > :not(table):first-child {
  display: none !important;
}

/* 見出しセルを折り返さない＋幅を少し広げる */
.product-card .product-table th{
  white-space: nowrap;
  word-break: keep-all;   /* 和文の任意改行も防止 */
  width: 7.5em;           /* 6em → 7.5em くらいに拡張（必要なら8emなどに） */
}

/* ==== ① カテゴリーを画像→ラベル（4カラム）で並べる ==== */
.card-nav{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* 常に3列 */
  gap: 18px 24px;                                   /* 行/列の間隔 */
}

/* 画像の下に“ボタン風ラベル”を配置（オーバーレイをやめる） */
.card-item{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: static;   /* 既存の absolute 配置を無効化 */
  overflow: visible;
}
.card-item img{
  width: 100%;
  height: 240px;              /* 必要なら 100〜130px で調整 */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 下のラベル（ボタン風） */
.card-overlay{
  position: static !important;     /* 既存の absolute を上書き */
  width: 100%;
  margin-top: .5rem;
  padding: .55rem .75rem;
  background: #7b7b7b;             /* 通常色（グレー） */
  color: #fff;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}
.card-item:hover .card-overlay{ filter: brightness(0.95); }

/* 選択中（active）のカテゴリ：ラベル色を変更して“クリック済み”を明確に */
.card-item.active .card-overlay{
  background: #0069aa;             /* アクティブ色 */
}

/* 画面幅が狭い時の段階的なカラム数（任意） */
@media (max-width: 1024px){ .card-nav{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px) { .card-nav{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .card-nav{ grid-template-columns: 1fr; } }

/* ==== ② プルダウンの幅を一定に・選択テキストの位置を「上」へ ==== */
.filter-ui{ display: flex; flex-direction: column; }   /* まとめて縦配置 */
.selection-indicator{ order:-1; margin: .25rem 0 .5rem; } /* 選択表示をセレクトの上に */
.filter-bar select{
  width: 320px;       /* 一定幅：280〜360pxで好み調整 */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* ==== ③ 「カテゴリ名 × フィルター名」を大きく見せる ==== */
.selection-indicator{
  font-size: 1.2rem;       /* 大きく */
  font-weight: 700;
  color: #334155;
}
.selection-indicator .sel-cat{
  background: #0069aa;
  color: #fff;
  padding: .3rem .7rem;
  border-radius: 14px;
  margin-right: .4rem;
  display: inline-block;
}
.selection-indicator .sel-filter{
  background: #eef2f7;
  padding: .3rem .7rem;
  border-radius: 14px;
  display: inline-block;
}

/* プルダウン直下に出る“フィルター名の見出し”だけ非表示 */
#product-area .products :is(h1, h2, h3, .h3):has(+ .product-group, ~ .product-group){
  display: none !important;
}

/* ===== Service：中央に画像の3カラム ===== */
.svc-wrapper{
  display:grid;
  grid-template-columns: 1fr minmax(280px, 360px) 1fr; /* 左｜中央(画像)｜右 */
  gap: 2.5rem 3rem;
  align-items:start;
  grid-template-areas: "left center right";
}
.svc-list{ 
  grid-area:left;
  list-style: disc;          /* 箇条書きに戻す */
  padding-left: 1.2rem;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap: 1rem;
}
.svc-illust{
  grid-area:center;
  display:flex;
  justify-content:center;
  align-items:center;
}
.svc-illust img{
  max-width: 480px;          /* 画像サイズ（好みで 280–360px） */
  width: 100%;
  height: auto;
  display:block;
}
/* ダミーの緑枠を使うとき用（imgの代わりに .ph を置いた場合） */
.svc-illust .ph{
  width: 320px; height: 320px; background:#74d44f; border-radius:8px;
}

.svc-desc{
  grid-area:right;
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap: 1rem;
}

/* モバイルは 画像→左→右 の縦並び */
@media (max-width: 900px){
  .svc-wrapper{
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "left"
      "right";
  }
  .svc-illust{ margin-bottom: 1.25rem; }
}
/* Service：サブ見出しと3カラムのあいだに余白を入れる */
#service .svc-wrapper{
  margin-top: 40px;   /* お好みで 24〜40px くらいに調整 */
}

/* モバイルは少しだけ狭める場合 */
@media (max-width: 900px){
  #service .svc-wrapper{ margin-top: 16px; }
}

/* === Service：3カラム・01/02/03の1枚表示 === */
#service .svc-wrapper{
  display:grid;
  grid-template-columns: 1fr minmax(420px, 560px) 1fr;
  gap: 2.5rem 3rem;
  align-items:center;
}

/* 左：番号＋見出し（アクティブだけ表示） */
#service .svc-list{ position:relative; list-style:none; padding:0; margin:0; }
#service .svc-list li{ display:none; font-weight:700; color:#49566a; line-height:1.6; }
#service .svc-list li.active{ display:block; max-width: 28ch; }

/* 「Service」ラベルを小さく上に */
#service .svc-list li.active::before{
  content:"Service";
  display:block;
  font-size:.9rem;
  letter-spacing:.06em;
  color:#E5A736;
  margin-bottom:.25rem;
}

/* 背景に大きい 01/02/03 を薄く */
#service .svc-list li .num{
  position:absolute; left:-10px; top:-36px;
  font-size:clamp(96px, 16vw, 160px);
  font-weight:800; line-height:1; color:#ececec;
  z-index:-1; opacity:0;
}
#service .svc-list li.active .num{ opacity:1; }

/* 右：説明文（アクティブだけ表示） */
#service .svc-desc{ margin:0; padding-left:1.2rem; }
#service .svc-desc li{ display:none; color:#334155; line-height:2; }
#service .svc-desc li.active{ display:list-item; }

/* 下部の 01/02/03 タブ */
#service .svc-tabs{
  grid-column: 1 / -1;
  display:flex; justify-content:center; gap:.5rem;
  margin-top: 1rem;
}
#service .svc-tabs button{
  border:0; border-radius:999px; padding:.45rem .8rem;
  background:#e7edf5; color:#475569; font-weight:700; cursor:pointer;
}
#service .svc-tabs button.active{ background:#0069aa; color:#fff; }

/* モバイルは縦並び（画像→左→右） */
@media (max-width: 900px){
  #service .svc-wrapper{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  #service .svc-illust{ justify-content:center; margin-bottom:1rem; }
  #service .svc-list li.active{ max-width: none; }
}
/* ===== Service：スクロールで切替（sticky + sentinel） ===== */
#service.scrolly .svc-wrapper{
  position: sticky;
  top: 12vh;                /* 画面上からの固定位置 */
  z-index: 1;
}

#service .svc-steps{        /* スクロールの高さを作る“空”のレール */
  position: relative;
}
#service .svc-step{
  height: 80vh;            /* 1ステップ = 1画面ぶん */
}

/* 画像のフェード切替（読み替え時にふわっと） */
#service .svc-illust img{
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}
#service .svc-illust img.is-fading{
  opacity: 0;
  transform: translateY(6px);
}

/* スマホ：stickyのトップを少し詰める（お好みで） */
@media (max-width: 900px){
  #service.scrolly .svc-wrapper{ top: 8vh; }
}

/* Service：左テキストを1行表示にする */
#service .svc-list li.active{
  max-width: none;         /* 幅制限を外す */
  white-space: nowrap;     /* 折り返し禁止 */
  word-break: keep-all;    /* 和文の任意改行も抑止 */
}

/* フッターのロゴは表示のまま（ヘッダーは上で非表示に） */
footer .logo { display: block !important; }

/* CTA 行の最後のボタン＝「施工会社として登録する」を非表示 */
.header-cta a[href="#contractor"] { display: none !important; }

/* ヘッダーロゴ（999Shimano画像リンク）を隠す */
header > a[aria-label="Ho me"] { display: none !important; }

/* Service 見出しをスクロール固定 */
#service .svc-title{
  position: sticky;
  top: 0;               /* もし上部に固定ヘッダーがあれば、その高さに合わせて調整 */
  z-index: 20;
  background: #fff;     /* 下の画像に重なっても読みやすく */
  padding: .75rem 0;    /* お好みで */
  border-bottom: 1px solid #eee; /* うっすら区切り線（任意） */
}

/* FAQ アコーディオン */
.faq-item{ border-bottom:1px solid #eee; padding:.75rem 0; }
.faq-question{
  cursor:pointer; font-weight:700; position:relative; padding-right:1.25rem;
}
.faq-question::after{         /* プラス/マイナスのアイコン */
  content:'＋'; position:absolute; right:0; top:0; line-height:1;
}
.faq-item.active .faq-question::after{ content:'－'; }

.faq-answer{
  display:none; margin-top:.5rem; color:#334155;
}
.faq-item.active .faq-answer{ display:block; }

/* 1) FAQの「すべての質問を見る」を中央に */
#faq .faq-actions{
  display: flex;
  justify-content: center;   /* 中央寄せ */
  width: 100%;
}
#faq .faq-actions .btn{
  display: block;
  width: fit-content;
  margin: 12px auto 0;       /* 上だけ余白、左右は自動で中央 */
}

/* 2) ほかのセクションの単独ボタンも中央に */
#consult .btn,
#stainless .btn,
#contact .btn{
  display: block;
  width: fit-content;         /* 文字幅にフィット */
  margin: 12px auto 0;        /* 中央寄せ */
}

/* （任意）スマホは押しやすく全幅寄りに */
@media (max-width: 640px){
  #faq .faq-actions .btn,
  #consult .btn,
  #stainless .btn,
  #contact .btn{
    width: 100%;
    max-width: 320px;         /* 好みで 280–360px */
  }
}

/* Service：01〜03 共通（表示中＝.active の見出しを大きく） */
#service .svc-list li.active{
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
  line-height: 1.4;
  letter-spacing: .01em;
}

/* スマホ時は少し控えめ（必要なら） */
@media (max-width: 900px){
  #service .svc-list li.active{
    font-size: 1.1rem;
    /* 1行維持のままで良ければ何もしない。
       折り返したい場合は↓を有効化 */
    /* white-space: normal !important; */
  }
}