@charset "UTF-8";
/* ==========================================================================
くらしラボ リニューアル デザイントークン / トンマナ定義
出典: index (2).html (Pattern B｜白×黒) の実測CSS値をそのまま採用。
このファイルが全ページ共通の「唯一の正」。個別ページのCSSで数値を
直書きせず、必ずここの変数・共通クラスを参照すること(デザインのブレ防止)。
========================================================================== */
:root{
/* ---- Color ----
モノクロ基調。アクセントカラーは意図的に使わない。
強弱は「色」ではなく「濃淡・余白・スケール」でつける。 */
--kl-black: #111111;
--kl-white: #ffffff;
--kl-gray1: #f6f6f6; /* 薄いセクション背景 */
--kl-gray2: #e4e4e4; /* 罫線・ボーダー */
--kl-gray3: #999999; /* 本文の弱色・キャプション */
/* 黒背景セクション内で使う白の透過段階(index(2)実測) */
--kl-on-dark-100: rgba(255,255,255,1);
--kl-on-dark-75: rgba(255,255,255,.75);
--kl-on-dark-65: rgba(255,255,255,.65);
--kl-on-dark-50: rgba(255,255,255,.5);
--kl-on-dark-40: rgba(255,255,255,.4);
--kl-on-dark-30: rgba(255,255,255,.3);
--kl-on-dark-15: rgba(255,255,255,.15);
--kl-on-dark-08: rgba(255,255,255,.08);
/* ---- Font ---- */
--kl-font-serif: 'Noto Serif JP','Cormorant Garamond',serif; /* 和文見出し(キャッチ) */
--kl-font-en: 'Cormorant Garamond',serif; /* 英字ディスプレイ(セクション大見出し) */
--kl-font-sans: 'Noto Sans JP',sans-serif; /* 本文・UI */
/* ---- Layout ---- */
--kl-container-w: 1100px;
--kl-container-px: 60px;
--kl-container-px-sp: 24px;
--kl-section-py: 88px; /* 白/黒セクション共通の上下余白(実測80〜88pxを88pxに統一) */
--kl-section-py-sp: 56px;
/* ---- Radius ----
index(2)は角丸を一切使わない(円形の.circle-btnのみ例外)。
全コンポーネントで角丸ゼロを既定とする。 */
--kl-radius: 0;
}
/* Google Fonts (テーマ側 functions.php で wp_enqueue_style 済みなら重複読込しないこと) */
*,*::before,*::after{ box-sizing:border-box; }
/* ==========================================================================
1. 英字ラベル(小) — 各セクション冒頭に置く英字ラベル
例: Concept
========================================================================== */
.kl-en-label{
font-family:var(--kl-font-en);
font-size:13px; font-weight:400;
letter-spacing:.2em; text-transform:uppercase;
color:var(--kl-gray3);
}
.kl-en-label--on-dark{ color:var(--kl-on-dark-40); }
/* ==========================================================================
2. 見出し階層(タグ／クラスによる定義)
ページ内で使う見出しは必ずこの4段階のいずれかを使う。
========================================================================== */
/* Lv.1: セクション英字大見出し(白 or 黒セクション共通、48〜72pxの範囲でセクションごとに固定値を使う。
本文側では clamp() でレスポンシブ化するが、上限は実測値を超えない) */
.kl-h1-en{
font-family:var(--kl-font-en);
font-weight:300;
letter-spacing:.04em;
line-height:1.1;
color:var(--kl-black);
margin:0 0 16px;
}
.kl-h1-en--on-dark{ color:var(--kl-white); }
/* セクション別の実測サイズ(そのまま踏襲。むやみに新しい値を作らない) */
.kl-h1-en.\--hero { font-size:clamp(40px,7vw,72px); } /* hero-en-large */
.kl-h1-en.\--concept,
.kl-h1-en.\--works { font-size:clamp(34px,5.5vw,56px); }
.kl-h1-en.\--info { font-size:clamp(32px,5vw,52px); }
.kl-h1-en.\--model { font-size:clamp(38px,6vw,68px); }
.kl-h1-en.\--thoughts{ font-size:clamp(30px,4.5vw,48px); }
/* Lv.2: 和文キャッチコピー(セリフ体、太字) — セクションの核心メッセージ */
.kl-h2-jp{
font-family:var(--kl-font-serif);
font-weight:700;
letter-spacing:.04em;
line-height:1.7;
color:var(--kl-black);
margin:0 0 18px;
font-size:19px; /* concept-catch実測。この階層は常に19px固定 */
}
.kl-h2-jp--on-dark{ color:var(--kl-white); }
/* Lv.3: カード・サブブロック見出し(セリフ体、太字、小さめ) */
.kl-h3-jp{
font-family:var(--kl-font-serif);
font-weight:700;
line-height:1.6;
color:var(--kl-black);
margin:0 0 6px;
font-size:15px; /* sc-title実測 */
}
.kl-h3-jp--on-dark{ color:var(--kl-white); }
/* Lv.4: 本文 */
.kl-body{
font-family:var(--kl-font-sans);
font-size:13px;
line-height:2.2;
color:var(--kl-gray3);
margin:0 0 28px;
}
.kl-body--on-dark{ color:var(--kl-on-dark-65); }
/* キャプション/メタ情報(日付・タグ小文字など) */
.kl-caption{
font-family:var(--kl-font-sans);
font-size:11.5px;
letter-spacing:.06em;
color:var(--kl-gray3);
}
/* ==========================================================================
3. ボタン / リンク — 3種類のみ。これ以外の形(グラデーション・角丸ボタン等)は使わない
========================================================================== */
/* Primary: 塗りつぶし黒ボタン(最重要CTA。ヘッダーCTA・問い合わせ導線などに限定使用) */
.kl-btn-primary{
display:inline-flex; align-items:center; justify-content:center;
background:var(--kl-black); color:var(--kl-white);
font-family:var(--kl-font-sans);
font-size:12.5px; font-weight:500; letter-spacing:.1em;
padding:0 28px; height:60px;
border-radius:var(--kl-radius);
transition:opacity .15s;
text-decoration:none;
}
.kl-btn-primary:hover{ opacity:.75; }
/* Secondary: 矢印リンク(下線ではなく、細い線+45度矢印。黒地/白地で色反転版を使い分け) */
.kl-more-link, .kl-more-link-inv{
display:inline-flex; align-items:center; gap:16px;
font-family:var(--kl-font-en);
font-size:15px; font-weight:400; letter-spacing:.18em;
text-decoration:none;
}
.kl-more-link{ color:var(--kl-black); }
.kl-more-link-inv{ color:var(--kl-white); }
.kl-more-link .kl-ln, .kl-more-link-inv .kl-ln{
display:inline-block; width:52px; height:1px; position:relative; flex-shrink:0;
}
.kl-more-link .kl-ln{ background:var(--kl-black); }
.kl-more-link-inv .kl-ln{ background:var(--kl-white); }
.kl-more-link .kl-ln::after, .kl-more-link-inv .kl-ln::after{
content:''; position:absolute; right:0; top:-4px; width:8px; height:8px;
border-top:1px solid currentColor; border-right:1px solid currentColor;
transform:rotate(45deg);
}
.kl-more-link:hover{ color:var(--kl-gray3); }
.kl-more-link:hover .kl-ln{ background:var(--kl-gray3); }
.kl-more-link-inv:hover{ color:var(--kl-on-dark-65); }
/* Tertiary: 円形ボタン(特別な単発CTAにのみ使用。多用しない) */
.kl-btn-circle{
width:120px; height:120px; border-radius:50%;
border:1px solid var(--kl-on-dark-30);
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:4px; cursor:pointer; text-decoration:none;
transition:border-color .15s;
}
.kl-btn-circle:hover{ border-color:var(--kl-white); }
.kl-btn-circle .kl-cb-title{ font-family:var(--kl-font-serif); font-size:13px; font-weight:700; color:var(--kl-white); letter-spacing:.04em; line-height:1.5; }
.kl-btn-circle .kl-cb-sub{ font-size:10px; color:var(--kl-on-dark-40); letter-spacing:.06em; }
.kl-btn-circle .kl-cb-arr{ font-size:14px; color:var(--kl-on-dark-40); margin-top:2px; }
/* アウトラインタグ(バッジ。カテゴリ表示・NEW表示等) */
.kl-tag{
display:inline-block;
font-size:9.5px; letter-spacing:.1em;
border:1px solid var(--kl-gray2); color:var(--kl-gray3);
padding:2px 10px; border-radius:var(--kl-radius);
}
.kl-tag--on-dark{ border-color:var(--kl-on-dark-30); color:var(--kl-on-dark-75); }
.kl-tag--new{ border-color:var(--kl-black); color:var(--kl-black); }
.kl-tag--new.kl-tag--on-dark{ border-color:var(--kl-white); color:var(--kl-white); }
/* ==========================================================================
4. レイアウト・リピート型
========================================================================== */
.kl-container{ max-width:var(--kl-container-w); margin:0 auto; padding:0 var(--kl-container-px); }
@media (max-width:768px){ .kl-container{ padding:0 var(--kl-container-px-sp); } }
.kl-section{ padding:var(--kl-section-py) 0; }
@media (max-width:768px){ .kl-section{ padding:var(--kl-section-py-sp) 0; } }
.kl-section--light{ background:var(--kl-white); color:var(--kl-black); }
.kl-section--light-alt{ background:var(--kl-gray1); color:var(--kl-black); }
.kl-section--dark{ background:var(--kl-black); color:var(--kl-white); }
/* 背景に写真を敷いたセクション(修理・トラブルLPのFV等、通常のkl-sectionに写真背景+暗いグラデーションを重ねたい場合に使用) */
.kl-section--photo{ position:relative; overflow:hidden; }
.kl-section--photo .kl-photo-bg{ position:absolute; inset:0; z-index:0; }
.kl-section--photo .kl-photo-bg img{ width:100%; height:100%; object-fit:cover; }
.kl-section--photo .kl-photo-overlay{ position:absolute; inset:0; z-index:0; background:linear-gradient(115deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.3) 100%); }
.kl-section--photo > .kl-container{ position:relative; z-index:1; }
/* 2カラム split(情報・モデルハウス相当・こだわり等で使用) */
.kl-grid-2{
display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.kl-grid-2--info{ grid-template-columns:220px 1fr; gap:64px; align-items:start; }
@media (max-width:900px){
.kl-grid-2, .kl-grid-2--info{ grid-template-columns:1fr; gap:40px; }
}
/* 3カラム 密着グリッド(施工事例・サービス一覧のカード用) */
.kl-grid-3-tight{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.kl-grid-3-hair{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--kl-on-dark-08); border:1px solid var(--kl-on-dark-08); }
@media (max-width:900px){
.kl-grid-3-tight, .kl-grid-3-hair{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
.kl-grid-3-tight, .kl-grid-3-hair{ grid-template-columns:1fr; }
}
/* カードコンポーネント(施工事例・サービス共通の型) */
.kl-card{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; text-decoration:none; }
.kl-card img, .kl-card .kl-card-thumb{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.kl-card:hover img, .kl-card:hover .kl-card-thumb{ transform:scale(1.04); }
.kl-card-badge-bar{
position:absolute; bottom:0; left:0; right:0;
background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,transparent 100%);
padding:24px 14px 12px;
}
.kl-card-title{ font-size:12px; font-weight:500; color:var(--kl-white); line-height:1.5; margin:0; }
.kl-card-num{ position:absolute; top:10px; right:12px; font-family:var(--kl-font-sans); font-size:12px; color:var(--kl-on-dark-65); letter-spacing:.02em; }
/* 番号付きリスト共通コンポーネント(信頼/技術/対話、診断の流れ 等で使用) */
.kl-pillars{ display:flex; flex-direction:column; }
.kl-pillar{
display:flex; align-items:baseline; gap:20px;
padding:22px 0; border-bottom:1px solid var(--kl-gray2);
}
.kl-pillar:first-child{ border-top:1px solid var(--kl-gray2); }
.kl-pillar-num{ font-family:var(--kl-font-sans); font-size:19px; font-weight:300; color:var(--kl-gray3); letter-spacing:.02em; flex-shrink:0; width:36px; }
.kl-pillar-title{ font-family:var(--kl-font-serif); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--kl-black); margin:0 0 4px; }
.kl-pillar-text{ font-size:12.5px; line-height:1.8; color:var(--kl-gray3); margin:0; }
/* 口コミ(お客様の声)カード共通コンポーネント — 黒背景セクションでの一覧表示に使用 */
.kl-voice-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
background:var(--kl-on-dark-08); border:1px solid var(--kl-on-dark-08);
}
.kl-voice-card{ background:var(--kl-white); padding:28px 24px; }
.kl-voice-card .kl-body{ margin-bottom:16px; font-size:12.5px; color:var(--kl-black); }
@media (max-width:900px){ .kl-voice-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kl-voice-grid{ grid-template-columns:1fr; } }
/* ==========================================================================
5. 共通CTA(お問い合わせ)ブロック — 全ページ末尾で共通使用する想定
電話/WEB/LINEの3導線を.kl-grid-3-hair(黒背景セクション用の細罫線グリッド)に乗せる。
========================================================================== */
.kl-contact-card{
background:var(--kl-black); padding:40px 28px; text-align:center;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.kl-contact-phone{
font-family:var(--kl-font-sans); font-size:28px; font-weight:500;
color:var(--kl-white); letter-spacing:.02em; text-decoration:none;
}
.kl-contact-phone:hover{ opacity:.75; }
@media (max-width:560px){
.kl-contact-card{ padding:32px 20px; }
}
/* サービス詳細ページ共通: 画像+テキストの2カラム行(特徴・強み紹介などで使用) */
.kl-feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:64px; }
.kl-feature-row:last-child{ margin-bottom:0; }
.kl-feature-photo{ width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--kl-gray2); position:relative; }
.kl-feature-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.kl-feature-num{ font-family:var(--kl-font-sans); font-size:12px; color:var(--kl-gray3); letter-spacing:.08em; margin-bottom:8px; display:block; }
/* 画像とテキストを左右交互に配置したい場合の修飾子(スタッフ紹介等で使用)。マークアップの順番は変えず、写真側の表示順のみ後ろに送る */
.kl-feature-row--reverse .kl-feature-photo{ order:2; }
@media (max-width:900px){
.kl-feature-row{ grid-template-columns:1fr; gap:24px; margin-bottom:40px; }
.kl-feature-row--reverse .kl-feature-photo{ order:initial; }
}
/* サービス詳細ページ共通: チェックリスト(症状・お悩み確認などで使用) */
.kl-check-list{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
.kl-check-list li{ font-size:13.5px; color:var(--kl-black); padding-left:26px; position:relative; line-height:1.6; }
.kl-check-list li::before{ content:''; position:absolute; left:0; top:9px; width:16px; height:1px; background:var(--kl-black); }
.kl-check-list--on-dark li{ color:var(--kl-on-dark-75); }
.kl-check-list--on-dark li::before{ background:var(--kl-white); }
/* 緊急度の高いLP向け: ヘッダー直下の安心バッジ(相談無料・対応地域・対応スピード等) */
.kl-trust-badges{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 4px; }
/* FAQ アコーディオン(/ネイティブ実装) — よくある質問ページで使用 */
.kl-faq-item{ border-bottom:1px solid var(--kl-gray2); }
.kl-faq-item:first-child{ border-top:1px solid var(--kl-gray2); }
.kl-faq-q{
display:flex; align-items:baseline; gap:16px;
padding:22px 4px; cursor:pointer; list-style:none;
font-family:var(--kl-font-serif); font-weight:700; font-size:14px; line-height:1.7; color:var(--kl-black);
}
.kl-faq-q::-webkit-details-marker{ display:none; }
.kl-faq-q::marker{ content:''; }
.kl-faq-q-mark{ font-family:var(--kl-font-en); font-size:16px; color:var(--kl-gray3); flex-shrink:0; }
.kl-faq-q-arrow{ margin-left:auto; font-family:var(--kl-font-en); font-size:13px; color:var(--kl-gray3); transition:transform .2s; flex-shrink:0; }
.kl-faq-item[open] .kl-faq-q-arrow{ transform:rotate(180deg); }
.kl-faq-a{ display:flex; align-items:baseline; gap:16px; padding:0 4px 24px; }
.kl-faq-a-mark{ font-family:var(--kl-font-en); font-size:16px; color:var(--kl-gray3); flex-shrink:0; }
.kl-faq-a-text{ font-size:13px; line-height:2; color:var(--kl-gray3); margin:0; }
/* ==========================================================================
フォーム(お問い合わせ・EFO) — MW WP Formのショートコード出力を
kl-トンマナで包む汎用スタイル。プラグイン側の正確なDOM構造に依存しない
よう、input/textarea/select/buttonなど一般的な要素に対して指定する。
========================================================================== */
.kl-contact-form-wrap{
background: var(--kl-white); padding: 40px 32px; border: 1px solid var(--kl-gray2);
}
.kl-contact-form-wrap input[type="text"],
.kl-contact-form-wrap input[type="email"],
.kl-contact-form-wrap input[type="tel"],
.kl-contact-form-wrap input[type="number"],
.kl-contact-form-wrap textarea,
.kl-contact-form-wrap select{
width: 100%; font-family: var(--kl-font-sans); font-size: 14px; color: var(--kl-black);
background: var(--kl-white); border: 1px solid var(--kl-gray2); border-radius: 0;
padding: 14px 16px; box-sizing: border-box; transition: border-color .15s;
}
.kl-contact-form-wrap input:focus, .kl-contact-form-wrap textarea:focus, .kl-contact-form-wrap select:focus{
outline: none; border-color: var(--kl-black);
}
.kl-contact-form-wrap textarea{ min-height: 140px; resize: vertical; }
.kl-contact-form-wrap label{ font-size: 13px; font-weight: 500; color: var(--kl-black); }
.kl-contact-form-wrap dt, .kl-contact-form-wrap th{ font-size: 13px; font-weight: 500; padding: 6px 0; text-align: left; }
.kl-contact-form-wrap dd, .kl-contact-form-wrap td{ padding-bottom: 24px; }
.kl-contact-form-wrap input[type="submit"], .kl-contact-form-wrap button[type="submit"]{
display: inline-flex; align-items: center; justify-content: center;
background: var(--kl-black); color: var(--kl-white); border: none; border-radius: 0;
font-family: var(--kl-font-sans); font-size: 13px; font-weight: 500; letter-spacing: .1em;
padding: 0 40px; height: 58px; cursor: pointer; transition: opacity .15s; width: 100%;
}
.kl-contact-form-wrap input[type="submit"]:hover, .kl-contact-form-wrap button[type="submit"]:hover{ opacity: .75; }
.kl-contact-form-wrap .required, .kl-contact-form-wrap .mwform-required{
display: inline-block; font-size: 10px; letter-spacing: .04em; color: var(--kl-white);
background: var(--kl-black); padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}
.kl-contact-form-wrap .error, .kl-contact-form-wrap .mwform-error{
display: block; font-size: 12px; color: #b3261e; margin-top: 6px;
}
/* EFOステップ表示(入力→確認→完了。実際の遷移制御はMW WP Form側の設定に依存) */
.kl-form-steps{ display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 32px; }
.kl-form-step{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--kl-gray3); letter-spacing: .04em; }
.kl-form-step-num{ width: 22px; height: 22px; border: 1px solid var(--kl-gray2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--kl-font-sans); font-size: 11px; }
.kl-form-step--active{ color: var(--kl-black); font-weight: 500; }
.kl-form-step--active .kl-form-step-num{ background: var(--kl-black); border-color: var(--kl-black); color: var(--kl-white); }
.kl-form-step-sep{ width: 24px; height: 1px; background: var(--kl-gray2); }
/* プライバシーポリシー等、the_content()を素で流し込む本文の見出し調整 */
.kl-page-privacy .kl-body h2{ font-family:var(--kl-font-serif); font-size:17px; font-weight:700; color:var(--kl-black); margin:40px 0 12px; letter-spacing:.02em; }
.kl-page-privacy .kl-body h2:first-child{ margin-top:0; }
.kl-page-privacy .kl-body p{ margin:0 0 20px; }
.kl-page-privacy .kl-body ul, .kl-page-privacy .kl-body ol{ margin:0 0 20px; padding-left:1.4em; }
/* ==========================================================================
6. 記事系ページ 共通コンポーネント(コラム/施工事例/お知らせ)
一覧・詳細ページのデータ構造(WP_Query・ACF・タクソノミー)は変更せず、
マークアップの見た目だけをこのセクションのクラスでkl-トンマナに統一する。
========================================================================== */
/* 本文+サイドバー(カテゴリ絞り込み)の2カラム。一覧・詳細ページ共通 */
.kl-grid-article{ display:grid; grid-template-columns:1fr 260px; gap:56px; align-items:start; }
@media (max-width:900px){ .kl-grid-article{ grid-template-columns:1fr; } }
.kl-grid-article > *{ min-width:0; }
.kl-grid-article .swiper-container, .kl-grid-article .kl-feature-photo{ max-width:100%; }
/* サイドバーの縦積みテキストリンク(カテゴリ絞り込み等) */
.kl-side-nav{ list-style:none; margin:0; padding:0; }
.kl-side-nav li{ border-bottom:1px solid var(--kl-gray2); }
.kl-side-nav li:first-child{ border-top:1px solid var(--kl-gray2); }
.kl-side-nav a{ display:block; padding:12px 2px; color:var(--kl-black); text-decoration:none; font-family:var(--kl-font-sans); font-size:13px; transition:color .15s; }
.kl-side-nav a:hover{ color:var(--kl-gray3); }
.kl-side-nav a.is-current{ font-weight:700; }
/* the_content() をそのまま流し込む記事本文の見出し・文章調整 */
.kl-article-body{ font-family:var(--kl-font-sans); font-size:14.5px; line-height:2; color:var(--kl-black); }
.kl-article-body h2{
font-family:var(--kl-font-serif); font-weight:700; font-size:19px; color:var(--kl-black);
border-bottom:1px solid var(--kl-gray2); padding-bottom:14px; margin:56px 0 24px; letter-spacing:.02em;
}
.kl-article-body h2:first-child{ margin-top:0; }
.kl-article-body h3{
font-family:var(--kl-font-serif); font-weight:700; font-size:17px; line-height:1.6; color:var(--kl-black);
margin:48px 0 18px; padding:6px 0 6px 14px; border-left:4px solid var(--kl-black);
background:var(--kl-gray1, #f5f5f3); letter-spacing:.02em;
}
.kl-article-body p{ margin:0 0 24px; }
.kl-article-body ul, .kl-article-body ol{ margin:0 0 24px; padding:0; list-style:none; }
.kl-article-body ul li, .kl-article-body ol li{ padding-left:22px; position:relative; margin-bottom:10px; }
.kl-article-body ul li::before{ content:''; position:absolute; left:0; top:11px; width:12px; height:1px; background:var(--kl-black); }
.kl-article-body ol{ counter-reset:kl-ol; }
.kl-article-body ol li{ counter-increment:kl-ol; }
.kl-article-body ol li::before{ content:counter(kl-ol) '.'; width:auto; height:auto; background:none; font-family:var(--kl-font-en); color:var(--kl-gray3); top:0; }
.kl-article-body a{ color:var(--kl-black); text-decoration:underline; text-underline-offset:3px; }
.kl-article-body a:hover{ color:var(--kl-gray3); }
.kl-article-body img{ width:100%; height:auto; display:block; margin:8px 0 24px; }
/* 記事メタ情報(投稿日・カテゴリタグ) */
.kl-article-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
/* 記事詳細の項目リスト(施工事例「工事の詳細」等、ラベル+値の2カラム行) */
.kl-detail-list{ border-top:1px solid var(--kl-gray2); }
.kl-detail-row{ display:grid; grid-template-columns:140px 1fr; gap:24px; padding:16px 2px; border-bottom:1px solid var(--kl-gray2); }
.kl-detail-row-label{ font-family:var(--kl-font-serif); font-weight:700; font-size:13px; color:var(--kl-black); }
.kl-detail-row-value{ font-family:var(--kl-font-sans); font-size:13px; line-height:1.9; color:var(--kl-black); }
@media (max-width:560px){ .kl-detail-row{ grid-template-columns:1fr; gap:6px; } }
/* 施工前後の比較(Before/After) */
.kl-before-after{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kl-before-after figure{ position:relative; margin:0; }
.kl-before-after img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.kl-before-after figcaption{
position:absolute; top:12px; left:12px; background:var(--kl-black); color:var(--kl-white);
font-family:var(--kl-font-en); font-size:11px; letter-spacing:.12em; padding:4px 12px;
}
@media (max-width:560px){ .kl-before-after{ grid-template-columns:1fr; } }
/* 施工ギャラリー(Swiper。JS初期化フックのクラス名 .gallery-top / .swiper-* / .thumb-grid-item は変更しない) */
.gallery-top{ aspect-ratio:16/9; background:var(--kl-gray1); margin-bottom:12px; }
.gallery-top .swiper-slide .slide-image{ width:100%; height:100%; }
.gallery-top .swiper-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-top .swiper-button-next, .gallery-top .swiper-button-prev{ color:var(--kl-white); }
.gallery-top .swiper-button-next::after, .gallery-top .swiper-button-prev::after{ font-size:16px; }
.thumb-grid-container{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; }
.thumb-grid-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; cursor:pointer; opacity:.5; transition:opacity .2s; display:block; }
.thumb-grid-item img:hover{ opacity:1; }
/* コメントブロック(担当者からのコメント・お客さまの声) */
.kl-comment-block{ border-top:1px solid var(--kl-gray2); padding-top:24px; margin-top:40px; }
.kl-comment-block .kl-body{ color:var(--kl-black); }
/* 記事詳細フッターの前後ナビゲーション */
.kl-article-pager{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:24px 0; margin-top:56px; border-top:1px solid var(--kl-gray2); border-bottom:1px solid var(--kl-gray2);
}
.kl-article-pager a{ font-family:var(--kl-font-sans); font-size:12.5px; color:var(--kl-black); text-decoration:none; letter-spacing:.04em; }
.kl-article-pager a:hover{ color:var(--kl-gray3); }
.kl-article-pager .kl-article-pager-empty{ visibility:hidden; }
/* 関連記事(施工事例/コラム共通)は .kl-grid-3-tight + .kl-card をそのまま流用する */
/* 角丸グローバルリセット(念のため主要要素に明示) */
img, button, input, textarea, .kl-btn-primary, .kl-tag, .kl-card{ border-radius:var(--kl-radius); }