/* ===================================================================
   かんたん検索 — 共通スタイル
   -------------------------------------------------------------------
   このファイルは全店舗・全ジャンルで同一。中身は一切変わらない。
   そのため 1店舗につき 1つ置けば、その店舗の全ジャンルで共有できる。

   店舗やジャンルによって変わる値（配色・フォント・最大幅・
   アニメーションの長さ）は、各HTMLの <style> が書き出す。
   ここではその変数を参照するだけ。

   **指定はすべて .ks の中に閉じる。** 自社EC（EC-CUBE）では iframe を
   使わず、ショップのヘッダとフッタの間に直接置く。html / body / * への
   指定があると、ショップ全体の文字や余白まで変わってしまう。
   iframe で表示するページの土台だけは body.ks-frame に書く。
   =================================================================== */

.ks {
  /* 全店舗で共通の色。変わるのは --brand 系だけ。
     :root に置くと、ショップのテーマが同じ名前の変数を使っていたときに衝突する */
  --text: #333;
  --text-weak: #666;
  --line: #D4D4D4;
  /* 無効な選択肢。白いカードと見分けがつく濃さにする。
     背景は白と 1.31:1、文字は背景と 5.94:1（AA を満たす）。
     旧値 #F3F4F6 / #6B7280 は白と 1.10:1 でカードの区別が弱く、
     文字も 4.39:1 で AA をわずかに割っていた */
  --disabled-bg: #DEE1E6;
  --disabled-text: #4B535E;

  --radius: 10px;
  --ease-soft: cubic-bezier(.22, .61, .36, 1);

  max-width: var(--max); margin: 0 auto;
  font-family: var(--font);
  font-size: var(--size);
  line-height: 1.6;
  color: var(--text);
  text-align: left;
}

/* OS側で「視差効果を減らす」を設定している場合はすべて止める */
@media (prefers-reduced-motion: reduce) {
  .ks, .ks *, .ks *::before, .ks *::after {
    animation: none !important; transition: none !important;
  }
}

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

/* iframe で表示するページ（Yahoo!・楽天）の土台。EC-CUBE では使わない */
.ks-frame {
  margin: 0;
  padding: 16px;
  background: #FFF;
  -webkit-text-size-adjust: 100%;
}

/* --- 自社EC（EC-CUBE）だけで使う部品 ---------------------------------
   iframe の店舗ではページの外（ECサイト側）に見出しがあるので出さない。
   EC-CUBE ではショップのレイアウトの中に直接置くので、何のページか
   分かるよう見出しと説明をサーバー側で出す（検索エンジンにも伝わる）。 */
.ks-page-heading { font-size: 1.3em; font-weight: 700; margin: 0 0 8px; line-height: 1.4; }
.ks-page-lead { color: var(--text-weak); margin: 0 0 24px; font-size: .9em; }
.ks-back { margin: 0 0 12px; font-size: .8em; }
.ks-back a { color: var(--brand-dark); }
.ks-back a::before { content: "\2039\00A0"; }
/* ジャンル一覧（/kantan-search）。バナー 1440×300 をスマホは1列、PCは2列で並べる
   （PCで横幅いっぱいにすると大きすぎる）。
   バナーの無いジャンルは同じ比率の枠に名前を出す（画像の無い選択肢と同じ地色） */
.ks-banner-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .ks-banner-list { grid-template-columns: repeat(2, 1fr); } }
.ks-banner-item { margin: 0; }
.ks-banner-link {
  display: block; border-radius: var(--radius); overflow: hidden;
  color: var(--text); text-decoration: none;
  transition: transform .18s var(--ease-soft), opacity .2s;
}
.ks-banner-link img { display: block; width: 100%; height: auto; }
/* 枠線はバナーの絵柄と合わないので、少し透かして押せることを伝える */
.ks-banner-link:hover { opacity: .75; }
.ks-banner-link:active { transform: scale(.985); }
.ks-banner-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ks-banner-text {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1440 / 300; padding: 0 5%;
  background: #F7F7F7; border: 2px solid var(--line); border-radius: var(--radius);
  font-size: 1.2em; font-weight: 700; text-align: center;
}

/* 非公開のジャンルを管理者が見ているときの注意書き */
.ks-preview {
  border: 2px dashed var(--brand); border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 20px; font-size: .8em; font-weight: 700;
}

/* --- 選択済みサマリ ------------------------------------------------ */
.ks-summary { margin: 0 0 20px; }
.ks-summary[hidden] { display: none; }
.ks-summary-heading {
  font-size: .8em; font-weight: 700; color: var(--text-weak);
  margin: 0 0 8px; letter-spacing: .04em;
}
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ks-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 2px solid var(--brand); border-radius: 999px;
  background: var(--brand-tint); color: var(--text);
  font: inherit; font-size: .85em;
  padding: 8px 16px; min-height: 44px;
  cursor: pointer; text-align: left;
}
.ks-chip:hover, .ks-chip:focus-visible {
  background: #FFF; outline: 2px solid var(--brand); outline-offset: 1px;
}
.ks-chip-axis { color: var(--text-weak); font-size: .85em; }
.ks-chip-value { font-weight: 700; }
.ks-chip-edit { color: var(--brand); font-size: .8em; font-weight: 700; white-space: nowrap; }

/* 新しく増えた条件はふわりと出す。瞬時に現れると点滅して見えるため */
.ks-chip.is-new { animation: ks-fade var(--dur-in) var(--ease-soft); }
@keyframes ks-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- 見出しと進捗 -------------------------------------------------- */
.ks-progress { font-size: .75em; color: var(--text-weak); margin: 0 0 4px; font-weight: 700; }
.ks-heading { font-size: 1.15em; font-weight: 700; margin: 0 0 16px; line-height: 1.4; }

/* ステップの入れ替え。退場を挟まないと画面が点滅して見える */
.ks-stage.is-leaving { animation: ks-out var(--dur-out) ease-in forwards; }
.ks-stage.is-entering { animation: ks-in var(--dur-in) var(--ease-soft); }
@keyframes ks-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes ks-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* --- 選択肢 --------------------------------------------------------- */
.ks-group { margin: 0 0 20px; }
.ks-group-label {
  font-size: .8em; font-weight: 700; color: #FFF; background: var(--text-weak);
  border-radius: 4px; padding: 4px 12px; display: inline-block; margin: 0 0 10px;
}
.ks-options {
  display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
.ks-options[data-display="swatch"] { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) {
  .ks-options { grid-template-columns: repeat(3, 1fr); }
  .ks-options[data-display="swatch"] { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 900px) {
  .ks-options { grid-template-columns: repeat(4, 1fr); }
  .ks-options[data-display="swatch"] { grid-template-columns: repeat(6, 1fr); }
}

.ks-option { margin: 0; }
.ks-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.ks-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: #FFF; padding: 12px; cursor: pointer; position: relative;
  transition: border-color .2s, background-color .2s, transform .18s var(--ease-soft);
}
/* 押した感触 — 押し込んで、ゆるやかに戻る */
.ks-card:active { transform: scale(.97); }
.ks-option.is-picked .ks-card { animation: ks-pop var(--dur-press) cubic-bezier(.22,.68,.3,1); }
@keyframes ks-pop {
  0%   { transform: scale(.955); }
  45%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.ks-options[data-display="text"] .ks-card {
  justify-content: center; align-items: center; text-align: center;
  min-height: 76px; padding: 16px 12px;
}
.ks-card:hover { border-color: var(--brand); background: var(--brand-tint); }

/* 選択状態は色だけで示さない。太い枠線とチェックマークを併用する */
.ks-option input:checked + .ks-card {
  border-color: var(--brand); border-width: 3px; padding: 11px;
  background: var(--brand-tint);
}
.ks-options[data-display="text"] .ks-option input:checked + .ks-card { padding: 15px 11px; }
.ks-option input:focus-visible + .ks-card { outline: 3px solid var(--brand); outline-offset: 2px; }
.ks-option input:checked + .ks-card::after {
  content: "✓"; position: absolute; top: -10px; right: -10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #FFF; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #FFF;
}

/* 依存関係で選べない選択肢。非表示にはせず、存在は見せる。
   選べるカードは「白地 + グレーの枠線」なので、無効はその逆の
   「グレー地 + 枠線なし」にして、輪郭の有無でも見分けられるようにする */
.ks-option input:disabled + .ks-card {
  background: var(--disabled-bg); border-color: var(--disabled-bg);
  color: var(--disabled-text); cursor: not-allowed;
}
.ks-option input:disabled + .ks-card:hover {
  border-color: var(--disabled-bg); background: var(--disabled-bg);
}
/* 画像は彩度を落として沈める。カラーの選択肢で特に効く */
.ks-option input:disabled + .ks-card .ks-thumb {
  opacity: .35; filter: grayscale(1); background: transparent;
}
.ks-unavailable { font-size: .7em; color: var(--disabled-text); margin-top: auto; }

.ks-thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  background: #F7F7F7; border-radius: 6px; overflow: hidden; position: relative;
}
.ks-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 画像の無い値の枠。画像と同じ正方形に名前を出して並びを揃える。
   地は画像の既定と同じ #F7F7F7（文字 #333 と 12:1）。
   無効時の #DEE1E6 とは別の色なので「選べない」と取り違えない */
.ks-thumb-text {
  display: flex; align-items: center; justify-content: center;
  padding: 10%; box-sizing: border-box; text-align: center;
  color: var(--text); font-weight: 700; font-size: 1.05em; line-height: 1.4;
  overflow-wrap: anywhere;
}
.ks-options[data-display="swatch"] .ks-thumb-text { font-size: .8em; padding: 8%; }
.ks-options[data-display="swatch"] .ks-card { padding: 8px; }
.ks-options[data-display="swatch"] .ks-label { font-size: .7em; }

.ks-label { font-size: .85em; font-weight: 700; line-height: 1.35; }
.ks-note { font-size: .7em; color: var(--text-weak); line-height: 1.4; }
.ks-option input:disabled + .ks-card .ks-note { color: var(--disabled-text); }

/* PC/スマホで文言を出し分ける。両方DOMに持ち、CSSで切り替える */
.ks-sp { display: none; }
@media (max-width: 599px) {
  .ks-pc { display: none; }
  .ks-sp { display: inline; }
}

/* --- 確認ステップ --------------------------------------------------- */
.ks-confirm {
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin: 0 0 20px; background: #FAFAFA;
}
.ks-confirm dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.ks-confirm dt { font-size: .8em; color: var(--text-weak); }
.ks-confirm dd { margin: 0; font-weight: 700; font-size: .9em; }

/* --- 単品へ誘導する店舗の部品ボタン ---------------------------------
   部品ごとに1つ。押したものはチェックと「開きました」を添える
   （色だけで示さない）。押したあとも開き直せるよう無効にはしない。 */
.ks-parts { margin: 0 0 20px; }
.ks-parts-lead { margin: 0 0 12px; font-weight: 700; line-height: 1.6; }
.ks-part-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ks-part { width: 100%; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 4px 12px; text-align: center; }
.ks-part.is-opened { background: #FFF; color: var(--brand-dark); border-color: var(--brand); }
.ks-part.is-opened:hover { background: var(--brand-tint); }
.ks-part-opened { font-size: .8em; }
.ks-part-opened::before { content: "\2713\00A0"; }

/* --- ボタン --------------------------------------------------------- */
.ks-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ks-btn {
  font: inherit; font-weight: 700; border-radius: var(--radius);
  padding: 16px 28px; min-height: 56px; cursor: pointer; border: 2px solid transparent;
}
.ks-btn-primary { background: var(--brand); color: #FFF; flex: 1 1 260px; }
.ks-btn-primary:hover { background: var(--brand-dark); }
.ks-btn-secondary { background: #FFF; color: var(--text); border-color: var(--line); }
.ks-btn-secondary:hover { border-color: var(--text-weak); }
.ks-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* --- 該当なし ------------------------------------------------------- */
.ks-message {
  border: 2px solid var(--brand); border-radius: var(--radius);
  background: var(--brand-tint); padding: 16px 20px; margin: 0 0 20px; font-size: .9em;
}
.ks-message[hidden] { display: none; }

/* --- スクリプトが動かない場合 ---------------------------------------- */
.ks-noscript {
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; font-size: .9em;
}

/* --- 総合ページ ------------------------------------------------------
   個別ページへのリンクを並べるだけの索引。選択の仕組みは持たない。
   カードの見た目は選択肢に揃える（同じサイトだと分かるように）。 */
.ks-index-heading { font-size: 1.3em; font-weight: 700; margin: 0 0 8px; line-height: 1.4; }
.ks-index-lead { color: var(--text-weak); margin: 0 0 24px; font-size: .9em; }
.ks-index-section { margin: 0 0 28px; }
.ks-index-section-heading {
  font-size: .8em; font-weight: 700; color: #FFF; background: var(--text-weak);
  border-radius: 4px; padding: 4px 12px; display: inline-block; margin: 0 0 12px;
}
.ks-index-section-note { font-size: .85em; color: var(--text-weak); margin: 0 0 12px; }
/* セクションの帯。雰囲気を伝える横長の施工写真を想定している */
.ks-index-banner { margin: 0 0 14px; }
.ks-index-banner img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
}
.ks-index-list {
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) { .ks-index-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ks-index-list { grid-template-columns: repeat(4, 1fr); } }

.ks-index-item { margin: 0; }
.ks-index-link {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: #FFF; padding: 12px; color: inherit; text-decoration: none;
  transition: border-color .2s, background-color .2s, transform .18s var(--ease-soft);
}
.ks-index-link:hover { border-color: var(--brand); background: var(--brand-tint); }
.ks-index-link:active { transform: scale(.97); }
.ks-index-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.ks-index-thumb { display: block; }
.ks-index-thumb img { width: 100%; height: auto; display: block; border-radius: 4px; }
.ks-index-label { font-weight: 700; line-height: 1.4; }
.ks-index-note { font-size: .8em; color: var(--text-weak); line-height: 1.5; }