@charset "utf-8";
/* ==========================================================
   由工房 — Refined Wa-Modern ／ commercial.css v1.8（2026-08-06）
   page-commercial.php（店舗・施設）専用スタイル
   ----------------------------------------------------------
   ※ 本ページの他要素（page-hero / sub-nav / page-section / pillar /
     works / voice / process-steps / callout / link-cards / cta-final）は
     housing・akiya-project・about・top と共有のため common.css 側に残置
     （mac_wordpress_common_rules.md §6-4）。
     本ファイルは commercial のみで使う Strength セクションだけを持つ。
   ※ 変数は v5 標準名（--brand-main / --text-main / --font-serif 等）を使用。
   ※ 読み込みは functions.php のスラッグ連動 enqueue（deps: common）。
========================================================== */

/* ==============================
   Section: service（手がける店舗・施設）
   共通 .pillar-grid を置き換える本ページ専用カード（v7.2）。
   施工写真を4:3でカード上部全幅に大きく見せ、
   予算の目安・工事期間を dt/dd の表形式で明示する。
   ============================== */
.service-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.service-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(26,22,20,.10);
}

/* 施工写真（カード上部全幅・4:3） */
.service-card .service-card-img{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-alt);
}
.service-card .service-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

.service-card .service-card-body{
  padding:24px 26px 26px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.service-card .service-card-num{
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--brand-main);
  font-weight:500;
  margin:0 0 8px;
}

.service-card .service-card-ttl{
  font-family:var(--font-serif);
  font-size:19px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--text-main);
  margin:0 0 12px;
}
/* v7.3: 見出しの添え書き .sub は説明文と内容が重複するため廃止。
   具体的な業種例（料亭・カフェ／サロン・小売 等）は service-card-desc 側に集約 */

.service-card .service-card-desc{
  font-family:var(--font-base);
  font-size:13.5px;
  line-height:1.95;
  color:rgba(0,0,0,.78);
  margin:0 0 20px;
}

/* 予算・期間の表（見る人の関心が高い情報を項目立てで明示） */
.service-card .service-card-spec{
  margin:auto 0 0;               /* カード下端に揃える */
  border-top:1px solid var(--border-light);
}
.service-card .spec-row{
  display:grid;
  grid-template-columns:96px 1fr;
  align-items:baseline;
  gap:12px;
  padding:10px 0;
}
.service-card .spec-row + .spec-row{
  border-top:1px dashed rgba(0,0,0,.14);
}
.service-card .spec-row dt{
  font-family:var(--font-base);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--text-mute);
  font-weight:500;
}
.service-card .spec-row dd{
  margin:0;
  font-family:var(--font-base);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--text-main);
  text-align:right;
}
.service-card .spec-row dd .u{
  font-size:.8em;
  font-weight:500;
  margin-left:2px;
  color:var(--text-sub);
}

@media (max-width:767px){
  .service-cards{
    grid-template-columns:1fr;
    gap:18px;
  }
  .service-card .service-card-img{
    aspect-ratio:16/9;           /* SPは縦長になりすぎないよう浅めに */
  }
  .service-card .service-card-body{
    padding:20px 20px 22px;
  }
}
/* /Section: service */

/* ==============================
   Section: strength（由工房の強み）
   実績数値＋説明を1枚に統合した強みカード×3。
   旧 num-cards ＋ axis-tiles の2部構成を置き換え（v7）。
   v7.5: .strength-en / .strength-ttl を廃止し「番号→数値→説明」に簡素化。
   v7.6: 要素削減後に縦の間延びが目立ったため全体を圧縮。
     ・カードpadding 32/28/30 → 24/24/22（SP 20/20/18）
     ・番号行に罫線（::after）を追加して横の締まりを補強
     ・数値 max44px→38px、余白14px→10〜12px、説明文の行間1.95→1.8
   v7.7: .strength-fact を2カラム化（fact-note左／.strength-fact-val右）。
     SPは縦積みをやめ、横スクロール（scroll-snap＋チラ見せ）へ。
   v7.8/7.9: fact の揃え方を center → last baseline と調整
     （flex分割時代の対応。v8.0で不要に）。
   v8.0: 原稿再編（大工の家系13代目／施工実績1,000件以上／営業しながら
     改装できる）に合わせ、fact を flex左右分割からインライン中央揃えへ。
     fact-note は 12px→14px。ベースラインはインラインで自動整合。
   v8.1: 通し番号 .strength-num を廃止（fact中央揃え後は左上の番号が
     浮いて見えるため）。カードは「数値→説明」の2要素構成に。
   v8.2: SP横スクロールを common.css の .works と同一の作法へ統一
     （var(--gutter) の負マージン方式＋オレンジのスクロールバー表示）。
   v8.3: 「数値→説明」の2要素構成はそのまま、装飾を追加して視線を止める。
     ・カード：上部にごく薄い暖色グラデ＋ソフトシャドウ、hoverで浮き上がり
     ・fact：フレーズ両脇に菱形（紋章風）を追加、数値本体をオレンジ深色に
     ・区切りの破線を黒 → ブランドオレンジ淡色へ
   v8.4: v8.3 の菱形（fact::before/::after）を削除（SP縮小指定も撤去）。
     カードの装飾は「グラデ＋シャドウ＋hover＋数値オレンジ」に整理。
   ============================== */
.strength-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.strength-item{
  /* v8.3: 単色白 → 上部だけほんのり暖色のグラデで「オレンジの見出し帯」と
     地続きの温度感を出す。高さは変えず色だけで目を引かせる */
  background:linear-gradient(180deg, #FFFCF4 0%, #fff 110px);
  border:1px solid rgba(0,0,0,.08);
  border-top:3px solid var(--brand-main);
  padding:24px 24px 22px;           /* v7.6: 要素削減に合わせ 32/28/30 → 24/24/22 に圧縮 */
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 26px rgba(26,22,20,.06);   /* v8.3: service-card と同トーンのソフトシャドウ */
  transition:transform .35s ease, box-shadow .35s ease;
}
/* v8.3: hoverでわずかに浮かせる（リンクではないため控えめに） */
.strength-item:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(26,22,20,.12);
}

/* v8.1: 通し番号 .strength-num（＋罫線 ::after）は廃止。
   中央揃えの fact が見出しとして自立し、左上の番号が浮いて見えるため。
   オレンジのアクセントは .strength-item の border-top（--brand-main）が担う */

/* 実績数値（視線のフック。num-card-val と同トーン）
   v7.6: 最大サイズ 44px→38px、上下余白 14px→10px に圧縮（間延び対策）
   v7.7〜7.9: flexで左右分割（note左／val右）＋揃え方を試行したが、
   v8.0: 原稿再編でラベル＋数値が連続フレーズ（大工の家系13代目 等）に
   なったため、flex分割を廃止しインラインの中央揃えへ。
   ・文のつながりが切れない／短いラベルでも中央に空白の穴ができない
   ・インライン要素はベースラインが自動で揃うため、揃え問題が根本解消
   ・3枚ともフレーズ長が近く、中央揃えで紋章的に均等に見える */
.strength-item .strength-fact{
  text-align:center;
  font-family:var(--font-serif);
  font-size:clamp(30px, 3.6vw, 38px);
  font-weight:500;
  line-height:1.2;
  color:var(--text-main);
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(232,154,46,.4);   /* v8.3: 黒破線 → ブランド淡色 */
}
/* v8.4: フレーズ両脇の菱形（fact::before/::after）は不要のため削除。
   視線のフックは border-top・暖色グラデ・数値のオレンジ深色が担う */
/* 数値の前置きラベル（フレーズの導入部）。v8.0: 12px→14px に拡大し
   見出しの一部として数値と一体で読ませる。色は text-sub のまま強弱を残す */
.strength-item .strength-fact-note{
  font-family:var(--font-base);
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--text-sub);
  margin-right:8px;
}
/* 数値本体。狭幅でフレーズ全体が入らない場合は val の手前で改行し、
   数値だけは分断しない */
.strength-item .strength-fact-val{
  white-space:nowrap;
  color:var(--brand-accent);   /* v8.3: 数値本体を深いオレンジに（note/unit は据え置きで強弱を作る） */
}
.strength-item .strength-fact .unit{
  font-size:.5em;
  margin-left:4px;
  color:var(--text-sub);
}
/* v7.4: 数値行の前置き .pre（「現代表で」等）→ v7.8で廃止。
   ラベル＋数値の合計幅がカード幅を超えて折り返す原因となったため、
   前置きはfact-note側の文言に含める方針とする（現マークアップでは未使用） */

/* v7.5: 見出し .strength-ttl は廃止。
   見出しにしかない言葉（代々受け継ぐ／運営目線の設計／段取り・伴走）は
   .strength-desc の原稿へ統合し、数値と重複する文言は削除した */

/* 説明文（v7.6: 行間 1.95→1.8。3要素構成では 1.95 だと縦に流れすぎるため） */
.strength-item .strength-desc{
  font-family:var(--font-base);
  font-size:13.5px;
  line-height:1.8;
  color:rgba(0,0,0,.72);
  margin:0;
}

@media (max-width:767px){
  /* v8.2: 1カラム縦積みではなく横スクロール。実装は common.css の
     .works（SP横スクロール）と同一の作法に統一：
     ・左右余白は var(--gutter) の負マージン＋padding で確保
       （前版の calc(50% - 50vw) 方式は実機で左端が画面に付いたため廃止）
     ・スクロールバーは表示（高さ4px・つまみオレンジ半透明）で
       横スクロールできることを明示。Works と同デザイン */
  .strength-list{
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding:0 var(--gutter);
    gap:14px;
    padding:0 var(--gutter) 18px;
    margin:0 calc(-1 * var(--gutter));
    position:relative;
    scrollbar-width:thin;
    scrollbar-color:rgba(232,154,46,.4) transparent;
  }
  .strength-list::-webkit-scrollbar{
    display:block;
    height:4px;
  }
  .strength-list::-webkit-scrollbar-track{
    background:rgba(0,0,0,.04);
  }
  .strength-list::-webkit-scrollbar-thumb{
    background:rgba(232,154,46,.45);
    border-radius:2px;
  }
  .strength-item{
    flex:0 0 78%;
    max-width:78%;
    scroll-snap-align:start;
    padding:20px 20px 18px;
  }
  /* 末尾スペーサー（.works::after と同じ。最終カード右側の余白確保） */
  .strength-list::after{
    content:"";
    flex:0 0 1px;
    height:1px;
  }
  .strength-item .strength-fact{
    font-size:26px;
  }
}
/* /Section: strength */

/* ==============================
   Section: voice（事業者の声）― commercial 専用モディファイア（v7.4）
   縦積み2件（220px円形写真＋全幅カード）は間延びするため、
   共通 .voice-grid（2カラム・写真非表示）を土台に、
   店舗写真だけ小さな円形サムネイルとして再表示する。
   ============================== */
.voice-grid--photo{
  margin-top:0;                  /* sec-head の margin-bottom と重複するため相殺 */
}
.voice-grid--photo .voice{
  grid-template-columns:88px 1fr; /* voice-grid 標準（1fr）を上書きし写真列を復活 */
  gap:20px;
  padding:28px 26px;
  align-items:start;
}
.voice-grid--photo .voice-photo{
  display:block;                 /* voice-grid 標準の display:none を解除 */
  width:88px;
  aspect-ratio:1;
}
.voice-grid--photo .voice-body blockquote{
  font-size:14px;
  line-height:1.9;
  margin:0 0 14px;
}
@media (max-width:767px){
  .voice-grid--photo .voice{
    grid-template-columns:64px 1fr;
    gap:16px;
    padding:22px 20px;
  }
  .voice-grid--photo .voice-photo{
    width:64px;
  }
}
/* /Section: voice */