@charset "UTF-8";
/* ==========================================================================
   オリジナルテーマ スタイルシート

   【書き方のルール】
   - Sass等のビルドツールは使わない。このファイルを直接編集する
   - スマホの見た目を先に書き、大きい画面の指定を後から足す（モバイルファースト）
   - クラス名の頭文字で役割がわかるようにする
       l- … レイアウト（header, footer, container）
       p- … ページ固有のパーツ（hero, price, report）
       c- … 使い回すパーツ（button, breadcrumb, title）
       u- … 微調整用
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 土台の設定
   -------------------------------------------------------------------------- */
:root {
	/* TODO: ブランドカラーが決まったらここを差し替える。1か所直せば全体が変わる */
	--color-main: #0b6fb8;      /* 水・清潔感を表す青 */
	--color-accent: #f39800;    /* 電話ボタンなど目立たせたい所 */
	--color-text: #222;
	--color-muted: #666;
	--color-line: #ddd;
	--color-bg: #fff;
	--color-bg-sub: #f5f7f9;

	--width-container: 1100px;
	--space: 1.5rem;
}

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

body {
	margin: 0;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	background: var(--color-bg);
	/* スマホの固定ボタンに本文が隠れないよう下に余白を作る */
	padding-bottom: 64px;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: var(--color-main); }

h1, h2, h3 { line-height: 1.4; }

/* 画面には出さないが読み上げソフトには伝えたい文字 */
.u-visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* キーボード操作の人が本文へ飛べるリンク */
.c-skip-link {
	position: absolute; left: -9999px;
}
.c-skip-link:focus {
	left: 0; top: 0; z-index: 100;
	padding: .5rem 1rem; background: #fff;
}

/* --------------------------------------------------------------------------
   2. レイアウト
   -------------------------------------------------------------------------- */
.l-container {
	width: 100%;
	max-width: var(--width-container);
	margin-inline: auto;
	padding-inline: var(--space);
}

.l-header {
	border-bottom: 1px solid var(--color-line);
	background: #fff;
}
.l-header__inner {
	max-width: var(--width-container);
	margin-inline: auto;
	padding: .75rem var(--space);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.l-header__logo { margin: 0; font-size: 1.125rem; font-weight: bold; }
.l-header__logo a { color: inherit; text-decoration: none; }

/* スマホ用メニューボタン */
.l-header__toggle {
	width: 44px; height: 44px;           /* 指で押せる最低サイズ */
	border: 0; background: transparent; cursor: pointer;
	position: relative;
}
.l-header__toggle-bar,
.l-header__toggle-bar::before,
.l-header__toggle-bar::after {
	position: absolute; left: 10px; width: 24px; height: 2px;
	background: var(--color-text); content: "";
}
.l-header__toggle-bar { top: 21px; }
.l-header__toggle-bar::before { top: -8px; left: 0; }
.l-header__toggle-bar::after  { top:  8px; left: 0; }

.l-nav { display: none; }
.l-nav.is-open { display: block; width: 100%; }
.l-nav__list { list-style: none; margin: 0; padding: 0; }
.l-nav__list a {
	display: block; padding: .75rem 0;
	border-bottom: 1px solid var(--color-line);
	text-decoration: none; color: inherit;
}

.l-main { display: block; }

.l-footer {
	margin-top: 4rem; padding: 2rem 0;
	background: var(--color-bg-sub);
}
.l-footer__inner {
	max-width: var(--width-container);
	margin-inline: auto; padding-inline: var(--space);
}
.l-footer__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.l-footer__list a { color: inherit; }
.l-footer__copyright { margin: 0; font-size: .875rem; color: var(--color-muted); }

/* --------------------------------------------------------------------------
   3. 使い回すパーツ
   -------------------------------------------------------------------------- */
.c-page-title {
	margin: 1.5rem 0 1rem;
	font-size: 1.5rem;
	padding-bottom: .5rem;
	border-bottom: 3px solid var(--color-main);
}
.c-section-title {
	margin: 2.5rem 0 1rem;
	font-size: 1.25rem;
}
.c-content > * + * { margin-top: 1rem; }

.c-breadcrumb { margin: 1rem 0 0; font-size: .8125rem; color: var(--color-muted); }
.c-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.c-breadcrumb__item + .c-breadcrumb__item::before { content: "›"; margin-right: .25rem; }

.c-more { margin-top: 1.5rem; text-align: center; }

/* スマホ下部の固定ボタン */
.c-fixed-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	display: flex;
}
.c-fixed-cta a {
	flex: 1; padding: 1rem 0; text-align: center;
	color: #fff; text-decoration: none; font-weight: bold;
}
.c-fixed-cta__tel  { background: var(--color-accent); }
.c-fixed-cta__mail { background: var(--color-main); }

/* --------------------------------------------------------------------------
   4. ページ固有のパーツ
   -------------------------------------------------------------------------- */
.p-hero { padding: 3rem 0; background: var(--color-bg-sub); }
.p-hero__title { margin: 0 0 .5rem; font-size: 1.75rem; }
.p-hero__lead { margin: 0; color: var(--color-muted); }

.p-section { padding: 2rem 0; }

/* 一覧 */
.p-list { display: grid; gap: 1.5rem; }
.p-list__link { display: block; text-decoration: none; color: inherit; }
.p-list__date { font-size: .8125rem; color: var(--color-muted); }
.p-list__title { margin: .25rem 0; font-size: 1.0625rem; color: var(--color-main); }
.p-list__excerpt { margin: 0; font-size: .9375rem; color: var(--color-muted); }

/* 施工事例カード */
.p-report-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.p-report-card__link { display: block; text-decoration: none; color: inherit; }
.p-report-card__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-sub); }
.p-report-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-report-card__title { margin: .5rem 0 .25rem; font-size: .9375rem; }
.p-report-card__area { margin: 0; font-size: .8125rem; color: var(--color-muted); }

/* 料金表 */
.p-price__scroll { overflow-x: auto; }   /* 狭い画面でも表が崩れないよう横スクロール */
.p-price__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.p-price__table th,
.p-price__table td { padding: .75rem; border: 1px solid var(--color-line); text-align: left; }
.p-price__table thead th { background: var(--color-bg-sub); }
.p-price__unit { display: block; font-size: .8125rem; font-weight: normal; color: var(--color-muted); }
.p-price__note { display: block; font-size: .8125rem; color: var(--color-muted); }
.p-price__caution { margin-top: .75rem; font-size: .8125rem; color: var(--color-muted); }

/* 問い合わせ導線 */
.p-cta {
	margin: 2.5rem 0; padding: 1.5rem;
	background: var(--color-bg-sub); border-radius: 8px; text-align: center;
}
.p-cta__lead { margin: 0 0 .75rem; font-weight: bold; }
.p-cta__tel a { text-decoration: none; color: var(--color-text); }
.p-cta__tel-number { display: block; font-size: 1.75rem; font-weight: bold; }
.p-cta__tel-hours { display: block; font-size: .8125rem; color: var(--color-muted); }
.p-cta__button a {
	display: inline-block; margin-top: 1rem; padding: .875rem 2rem;
	background: var(--color-main); color: #fff; text-decoration: none;
	border-radius: 4px; font-weight: bold;
}

.p-report__meta { margin: 1rem 0; padding: 1rem; background: var(--color-bg-sub); font-size: .9375rem; }
.p-report__meta dt { font-weight: bold; }
.p-report__meta dd { margin: 0 0 .5rem; }

/* --------------------------------------------------------------------------
   5. 画面が広いとき（768px以上）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

	body { padding-bottom: 0; }          /* PCでは固定ボタンを出さない */
	.c-fixed-cta { display: none; }

	.l-header__toggle { display: none; }
	.l-nav { display: block; }
	.l-nav__list { display: flex; gap: 1.5rem; }
	.l-nav__list a { padding: 0; border: 0; }

	.c-page-title { font-size: 1.875rem; }
	.c-section-title { font-size: 1.5rem; }
	.p-hero { padding: 5rem 0; }
	.p-hero__title { font-size: 2.5rem; }

	.p-list { grid-template-columns: repeat(2, 1fr); }
	.p-report-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}