@charset "UTF-8";
/*
Theme Name:  Ark Setsubi Child
Theme URI:   https://arkimpulse.com/
Description: 空調・設備工事業者サイト向けの Kadence 子テーマ。施工実績マネージャープラグインと組み合わせて使用します。
Author:      Ark Impulse
Author URI:  https://arkimpulse.com/
Template:    kadence
Version:     0.2.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ark-setsubi-child
*/

/* =========================================================
   ここから下にカスタムCSSを書いていきます。
   親テーマ（Kadence）のCSSは functions.php で読み込み済みです。
   ========================================================= */


/* ---------------------------------------------------------
   1. カラー変数
   案件ごとに、ここの色だけ変えれば全体の印象が変わります。
   --------------------------------------------------------- */
:root {
	--ark-primary: #0b5ea8;   /* メインカラー（見出し・ボタン） */
	--ark-accent:  #e8760c;   /* アクセント（電話ボタンなど） */
	--ark-text:    #222222;   /* 本文の文字色 */
	--ark-muted:   #666666;   /* 補足の文字色 */
	--ark-line:    #dddddd;   /* 罫線 */
	--ark-bg-soft: #f5f7fa;   /* 薄い背景 */
}


/* ---------------------------------------------------------
   2. 施工実績：データ表
   プラグインの apw_data_rows() で出力する表のスタイル
   --------------------------------------------------------- */
.ark-work-data {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.95rem;
}

.ark-work-data th,
.ark-work-data td {
	padding: 0.7em 1em;
	border-bottom: 1px solid var(--ark-line);
	text-align: left;
	vertical-align: top;
}

.ark-work-data th {
	width: 9em;
	background: var(--ark-bg-soft);
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.ark-work-data th,
	.ark-work-data td {
		display: block;
		width: auto;
		border-bottom: none;
		padding: 0.4em 0.8em;
	}
	.ark-work-data td {
		border-bottom: 1px solid var(--ark-line);
		padding-bottom: 0.8em;
	}
}


/* ---------------------------------------------------------
   2-2. 施工写真
   施工前・施工中・施工後を横並び（スマホは縦積み）
   --------------------------------------------------------- */
.ark-work-photos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.2em;
	margin: 1.5em auto;
	max-width: 960px;
}

.ark-work-photo {
	margin: 0;
}

/* 撮影サイズがバラバラでも枠を揃える。
   端が切れて困る場合は cover → contain に変更 */
.ark-work-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 写真が1枚だけのときは大きくなりすぎないように */
.ark-work-photos:has(> :only-child) {
	max-width: 560px;
}

.ark-work-photo figcaption {
	margin-top: 0.5em;
	font-size: 0.85rem;
	color: var(--ark-muted);
	text-align: center;
}


/* ---------------------------------------------------------
   2-3. 実績の本文セクション
   --------------------------------------------------------- */
.ark-work-section {
	margin: 1.8em 0;
}

.ark-work-section-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.5em;
	padding-left: 0.6em;
	border-left: 4px solid var(--ark-primary);
	line-height: 1.4;
}

.ark-work-section p {
	margin: 0 0 0.8em;
}

/* お客様の声だけ背景を付けて区別する */
.ark-work-section.is-voice {
	background: var(--ark-bg-soft);
	padding: 1.2em 1.4em;
	border-radius: 4px;
}

.ark-work-section.is-voice .ark-work-section-title {
	border-left-color: var(--ark-accent);
}


/* ---------------------------------------------------------
   3. 対応可否マトリクス
   --------------------------------------------------------- */
.ark-matrix {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
}

.ark-matrix th,
.ark-matrix td {
	padding: 0.8em 1em;
	border: 1px solid var(--ark-line);
}

.ark-matrix td {
	text-align: center;
	font-size: 1.2rem;
	width: 5em;
}

.ark-matrix .is-best   { color: var(--ark-accent); font-weight: 700; }
.ark-matrix .is-ok     { color: var(--ark-primary); }
.ark-matrix .is-ask    { color: var(--ark-muted); }
.ark-matrix .is-no     { color: #bbbbbb; }


/* ---------------------------------------------------------
   4. スマホ固定の電話バー
   .ark-callbar を footer などに設置して使います。
   --------------------------------------------------------- */
.ark-callbar {
	display: none;
}

@media (max-width: 782px) {
	.ark-callbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
	.ark-callbar a {
		flex: 1;
		padding: 0.9em 0.5em;
		text-align: center;
		color: #fff;
		text-decoration: none;
		font-weight: 700;
		line-height: 1.3;
	}
	.ark-callbar .ark-callbar-tel  { background: var(--ark-accent); }
	.ark-callbar .ark-callbar-form { background: var(--ark-primary); }

	/* 固定バーの分だけ余白を確保 */
	body { padding-bottom: 3.6em; }
}