/* ============================================================
   鈴木工務店HP 共通カスタムCSS
   場所: 子テーマ/css/custom.css
   読み込み: functions.php の wp_enqueue_style
   追記する場合はセクションコメントを付けて下に追加していく
   （カスタマイザーの「追加CSS」は使わず、こちらに集約する）
   ============================================================ */


/* ------------------------------------------------------------
   02. 一体型テーブルアコーディオン
   対応JS: js/site.js の「02」セクション
   PC   : 通常のテーブル（ゼブラ縞・余白広め）
   スマホ: カード型に自動変換（横スクロールなし）
   ------------------------------------------------------------ */

/* 閉じている間、7行目以降（.is-extra-row）を隠す */
.js-more-table:not(.is-open) .is-extra-row {
  display: none;
}

/* --- PC・タブレット共通の調整 --- */
.js-more-table table {
  font-size: 14px;
}
/* 左揃えに統一（is-all-centered の中央寄せを打ち消す） */
.wp-block-table.js-more-table th,
.wp-block-table.js-more-table td {
  text-align: left;
}
.wp-block-table.js-more-table th {
  background: #f5f5f5;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 10px;
  white-space: nowrap;
}
.js-more-table td {
  padding: 12px 10px;
  line-height: 1.5;
}
/* 1行おきに薄い背景（ゼブラ縞） */
.js-more-table tbody tr:nth-child(even) {
  background: #fafafa;
}
/* 列幅を内容量に合わせて最適化（fixed-layoutはthの幅指定が全行に効く） */
.js-more-table th:nth-child(1) { width: 11%; }
.js-more-table th:nth-child(2) { width: 20%; }
.js-more-table th:nth-child(3) { width: 27%; }
.js-more-table th:nth-child(4) { width: 25%; }
.js-more-table th:nth-child(5) { width: 7%; }
.js-more-table th:nth-child(6) { width: 10%; }
/* 年月・工期は折り返さない */
.js-more-table td:nth-child(1),
.js-more-table td:nth-child(5) {
  white-space: nowrap;
}
/* 費用帯は右揃え（数字が比較しやすい） */
.wp-block-table.js-more-table th:nth-child(6),
.wp-block-table.js-more-table td:nth-child(6) {
  text-align: right;
}
/* 費用帯（最終列）を強調 */
.js-more-table td:last-child {
  font-weight: 700;
  color: #004098;
  white-space: nowrap;
}

/* --- 開閉ボタン（JSが自動生成） --- */
.js-more-table-btn {
  display: block;
  width: 100%;
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  background: #f5f5f5;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  color: #333;
  transition: background 0.2s;
}
.js-more-table-btn:hover {
  background: #ececec;
}
/* クリック後に黒いフォーカス枠が残らないように（キーボード操作時のみ表示） */
.js-more-table-btn:focus:not(:focus-visible) {
  outline: none;
}
.js-more-table-btn:focus-visible {
  outline: 2px solid #004098;
  outline-offset: 2px;
}
.js-more-table-btn::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}
.js-more-table-btn[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-3px);
}

/* --- スマホ（599px以下）: カード型に変換 --- */
@media (max-width: 599px) {

  /* テーブル構造を解除 */
  .js-more-table table,
  .js-more-table tbody,
  .js-more-table tr,
  .js-more-table td {
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    background: none;
  }
  .js-more-table thead {
    display: none;
  }

  /* 1件 = 1カード（フレックスで並べ替え） */
  .js-more-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 6px;
    padding: 16px 4px;
    border-bottom: 1px solid #e5e5e5;
  }
  .js-more-table tbody tr:nth-child(even) {
    background: none;
  }

  /* 1行目左: 工事内容 = タイトル */
  .js-more-table td:nth-child(3) {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* 1行目右: 費用帯 = 大きく強調 */
  .js-more-table td:nth-child(6) {
    order: 2;
    width: auto;
    margin-left: 12px;
    font-size: 17px;
    font-weight: 700;
    color: #004098;
  }

  /* 2行目: 商品名 */
  .js-more-table td:nth-child(4) {
    order: 3;
    width: 100%;
    font-size: 13px;
    color: #666;
  }

  /* 3行目: 施工年月・地域（左）、工期（右） */
  .js-more-table td:nth-child(1),
  .js-more-table td:nth-child(2),
  .js-more-table td:nth-child(5) {
    width: auto;
    font-size: 12px;
    color: #999;
  }
  .js-more-table td:nth-child(1) { order: 4; }
  .js-more-table td:nth-child(2) { order: 5; }
  .js-more-table td:nth-child(2)::before { content: "・"; }
  .js-more-table td:nth-child(5) { order: 6; margin-left: auto; }
  .js-more-table td:nth-child(5)::before { content: "工期 "; }

  /* スマホではスクロールヒント不要（カード型なので） */
  .c-scrollHint:has(+ .js-more-table) {
    display: none;
  }
}


/* ------------------------------------------------------------
   03. お客様の声カード
   対応JS: js/site.js の「03」セクション（DOMを組み替える）
   ------------------------------------------------------------ */

/* エンボスボックス標準の黒い上枠線を消して角丸カードに */
.voice-card.is-style-emboss_box {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.voice-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.voice-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #004098;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.voice-card__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.voice-card__name {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.voice-card__date {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.voice-card__rating {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: #b8860b;
}
.voice-card__score {
  color: #333;
}
.voice-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 10px;
}
.voice-card__tag {
  font-size: 11px;
  line-height: 1.4;
  background: #f0f4fa;
  color: #004098;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.voice-card .voice-card__body {
  font-size: 14px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 0;
}


/* ------------------------------------------------------------
   04. 「できること」カード（/bath ほか）
   使い方: カラムブロックに p-needsCards クラスを追加
   カード構成: 画像（CSSで先頭に移動）→ タイトル → 説明 → 実例ボックス
   ------------------------------------------------------------ */

.p-needsCards .swell-block-column {
  display: flex;
  flex-direction: column;
}
/* 画像を先頭へ（高さを抑えてトリミング表示） */
.p-needsCards .swell-block-column > .wp-block-image {
  order: -1;
  margin: 0 0 14px;
}
.p-needsCards .swell-block-column > .wp-block-image img {
  width: 100% !important;
  height: auto !important; /* インラインの高さ指定を打ち消す */
  aspect-ratio: 5 / 2;
  object-fit: cover;
}
/* タイトル: 枠線ボックスをやめて左アクセントバーに */
.p-needsCards .swell-block-column > p.has-border {
  border: none;
  border-left: 4px solid #004098;
  border-radius: 0;
  padding: 2px 0 2px 10px;
  text-align: left !important;
  font-size: 15px;
  margin-bottom: 8px;
}
/* 説明文 */
.p-needsCards .swell-block-column > p:not(.has-border):not(.p-needsCards__case) {
  font-size: 13.5px;
  line-height: 1.7;
  color: #555;
}
/* 実例ボックス（カード下端に揃える） */
.p-needsCards__case {
  margin-top: auto;
  background: #f4f7fb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.6;
}
.p-needsCards__case .case-label {
  color: #004098;
  font-weight: 700;
  margin-right: 2px;
}


/* ------------------------------------------------------------
   05. 浴室タイプの用語解説（在来浴室／ユニットバス）
   /bath のカスタムHTMLブロックで使用
   ------------------------------------------------------------ */

.p-bathTypes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 2em 0;
}
.p-bathTypes__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px 16px;
}
.p-bathTypes__item img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.p-bathTypes__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}
.p-bathTypes__desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}
@media (max-width: 599px) {
  .p-bathTypes {
    grid-template-columns: 1fr;
  }
}