/*
 * WITHNESS デザイン刷新（GitHub Issue #16）
 * 既存のテーマCSS（style.css / base.css）は変えずに、後から読み込んで上書きする。
 * このファイルを読み込まなければ、元のデザインに戻る。
 */

:root {
	--wn-text: #2b2f2c;      /* 本文：真っ黒ではなく、わずかに緑みのある濃いグレー */
	--wn-sub: #5d645f;       /* 補足の文字 */
	--wn-green: #37792b;     /* ブランドカラー（既存） */
	--wn-green-dark: #2a5c21;
	--wn-line: #e3e6e1;
	--wn-bg-soft: #f6f7f4;
	--wn-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--wn-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* ---------- 本文 ---------- */
body {
	font-family: var(--wn-sans);
	color: var(--wn-text);
	letter-spacing: 0.04em;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt" 0;
}

p, li, dd, dt, td, th, input, textarea, select, button, label {
	font-family: var(--wn-sans);
}

p {
	line-height: 1.9;
	color: var(--wn-text);
}

.section p,
.section li,
.section td,
.section th {
	font-size: 17px; /* #23 読みやすさのため 15.5px → 17px */
	line-height: 2;
}

/* ---------- 見出し：明朝体で落ち着きと信頼感を ---------- */
h1, .h1_title, h2, h3, h4,
.wf-sawarabi {
	font-family: var(--wn-serif) !important;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.55;
}

h2 {
	font-weight: 600;
}

/* 極細（200）だった見出しを、読みやすい太さに */
.top-about h2,
#footer-contact {
	font-weight: 600 !important;
	line-height: 1.6 !important;
	color: var(--wn-text);
}

h3 {
	letter-spacing: 0.05em;
}

/* ---------- トップの写真の上の文字：読みやすさを確保 ---------- */
#top-img-back::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 28, 18, 0.35) 0%, rgba(16, 28, 18, 0.55) 100%);
	z-index: 1;
	pointer-events: none;
}

#top-navi {
	z-index: 2;
}

#top-navi h2 {
	font-size: 38px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

#top-navi h3 {
	font-family: var(--wn-sans) !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.8;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

#top-navi p {
	color: #fff;
	font-size: 16px;
	line-height: 2;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* ---------- 改行を自然に（#22） ----------
 * 行頭に「ー」「ッ」「、」などが来ないようにする。
 * 見出しや短い文は、言葉の区切りで改行する：
 *   Chrome など → word-break: auto-phrase（文節で改行）
 *   iPhone（Safari）など未対応のブラウザ → 「、」「・」やスペース、<wbr> の位置だけで改行
 */
body {
	line-break: strict;
}

h1, .h1_title, h2, h3, h4,
.header-copy,
.header-description,
#top-navi p,
.fw-bold,
.contact-left p,
.bt-link a,
.flex li {
	word-break: keep-all;
	overflow-wrap: anywhere; /* はみ出すときだけ、どこでも改行 */
	text-wrap: balance;
}

@supports (word-break: auto-phrase) {
	h1, .h1_title, h2, h3, h4,
	.header-copy,
	.header-description,
	#top-navi p,
	.fw-bold,
	.contact-left p,
	.bt-link a,
	.flex li {
		word-break: auto-phrase;
	}
}

/* 業務タグは1行で */
.flex li {
	white-space: nowrap;
}

/* ---------- ヘッダー ---------- */
.header-copy {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wn-sub);
	letter-spacing: 0.05em;
}

/* 強調：ピンクをやめてブランドの緑に */
strong,
.header-copy strong,
#footer-contact-box p strong {
	color: var(--wn-green-dark) !important;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ---------- グローバルメニュー ---------- */
#global-menu li a {
	font-family: var(--wn-sans) !important;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--wn-text);
	transition: color 0.2s ease;
}

#global-menu li a:hover {
	color: var(--wn-green);
}

/* ---------- ボタン ---------- */
.bt-link {
	border-radius: 3px !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.bt-link:hover {
	background-color: var(--wn-green-dark) !important;
	box-shadow: 0 4px 14px rgba(42, 92, 33, 0.18);
}

.bt-link a {
	font-family: var(--wn-sans);
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* ---------- 表（事務所案内・報酬など） ---------- */
.section table th,
.section table td {
	border-color: var(--wn-line) !important;
	padding: 14px 18px;
	vertical-align: top;
}

.section table th {
	background: var(--wn-bg-soft);
	font-weight: 600;
	color: var(--wn-text);
	white-space: nowrap;
}

/* ---------- 問い合わせ欄・フッター ---------- */
.fw-bold {
	color: var(--wn-text);
}

.contact-info {
	font-family: var(--wn-sans);
	letter-spacing: 0.06em;
}

#footer,
#footer p,
#footer a {
	color: var(--wn-sub);
	font-size: 14px;
	line-height: 1.8;
}

/* ---------- スマホ ----------
 * スマホ版テーマは viewport width=520 固定のため、iPhone（幅 約390px）では全体が約75%に縮小される。
 * 見た目の大きさ ＝ CSS の値 × 約0.75 になるので、CSS の値は大きめにする（#23）。
 *   本文 20px → 見た目 約15px ／ 補足 17px → 約13px
 */
@media screen and (max-width: 767px) {
	body {
		font-size: 20px;
		line-height: 1.85;
		letter-spacing: 0.03em;
	}
	.section p,
	.section li,
	.section td,
	.section th,
	p {
		font-size: 20px;
		line-height: 1.9;
	}
	h2 {
		font-size: 29px;
		line-height: 1.5;
	}
	h3 {
		font-size: 23px;
	}
	.sup-copy {
		font-size: 17px !important;
	}
	#top-navi h2 {
		font-size: 31px !important; /* テンプレート側の style="font-size:220%" を打ち消す */
		letter-spacing: 0.04em;
	}
	/* トップの写真の区画：スマホは左揃えで読みやすく（#26, #27）
	 * 改行してよい位置は、テンプレート側の <span class="wn-nb">（文節のまとまり）の間だけにする。
	 * ブラウザの自動改行（iPhone Safari は文節改行に未対応）に頼らない。 */
	#top-img-back::before {
		background: linear-gradient(100deg, rgba(14, 26, 16, 0.72) 0%, rgba(14, 26, 16, 0.5) 60%, rgba(14, 26, 16, 0.35) 100%);
	}
	#top-navi {
		text-align: left !important;
		width: 100% !important; /* 元は 440px 固定 */
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 26px;
		box-sizing: border-box;
	}
	#top-navi .wn-nb {
		display: inline-block;
	}
	#top-navi h2 {
		font-size: 33px !important;
		text-align: left;
		border-left: 4px solid #8fc873;
		padding-left: 16px;
		margin-left: 0;
		margin-bottom: 24px;
		line-height: 1.45;
		letter-spacing: 0.05em;
		text-wrap: wrap;
	}
	/* 主力3業務のラベル */
	#top-navi .wn-hero-tags {
		list-style: none;
		margin: 0 0 12px;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	#top-navi .wn-hero-tags li {
		margin: 0;
		padding: 5px 12px;
		border: 1px solid rgba(255, 255, 255, 0.75);
		border-radius: 3px;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.04em;
		white-space: nowrap;
		background: rgba(255, 255, 255, 0.08);
		text-shadow: none;
	}
	#top-navi h3 {
		font-size: 21px !important;
		font-weight: 600;
		line-height: 1.6;
		letter-spacing: 0.04em;
		text-align: left;
		margin: 0 0 18px;
		text-wrap: wrap;
	}
	#top-navi p {
		font-size: 18px !important;
		line-height: 1.85;
		text-align: left;
		text-wrap: wrap;
	}
	#top-navi .top-bt,
	#top-navi .top-bt .bt-link {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	#top-navi .top-bt .bt-link a {
		display: block;
		text-align: center;
	}
	/* 事務所案内の表：スマホでは「項目名が上・内容が下」の縦並びに（#30） */
	.basic-table,
	.basic-table tbody,
	.basic-table tr,
	.basic-table th,
	.basic-table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	.basic-table {
		border: 1px solid var(--wn-line) !important;
		border-radius: 4px;
		overflow: hidden;
		margin: 1.5em 0;
	}
	.basic-table tr {
		border-bottom: 1px solid var(--wn-line);
	}
	.basic-table tr:last-child {
		border-bottom: none;
	}
	.section .basic-table th {
		border: none !important;
		border-left: 4px solid var(--wn-green) !important;
		background: var(--wn-bg-soft);
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.5;
		padding: 9px 16px;
		white-space: normal;
		text-align: left;
		color: var(--wn-green-dark);
	}
	.section .basic-table td {
		border: none !important;
		font-size: 19px;
		line-height: 1.85;
		padding: 12px 18px 16px;
		text-align: left;
		overflow-wrap: anywhere;
	}
	/* パンくず（#31）：元は1行固定＋はみ出しを切り捨て。#23 の文字拡大で今のページ名が見えなくなっていた
	 * → 小さめの文字、ホームは「HOME」と短く、長いときは2行目へ折り返す */
	#pankuzu {
		white-space: normal !important;
		padding: 10px 0 !important;
	}
	#pankuzu p {
		width: auto !important;
		margin: 0 !important;
		padding: 0 22px;
		font-size: 16px !important;
		line-height: 1.7 !important;
		color: var(--wn-sub);
		word-break: normal;
		text-wrap: wrap;
	}
	#pankuzu a.home span[property="name"] {
		font-size: 0;
	}
	#pankuzu a.home span[property="name"]::before {
		content: "HOME";
		font-size: 16px;
		letter-spacing: 0.06em;
	}
	/* 電話での問い合わせ導線（#32）：タップで発信できる大きな電話番号 */
	.wn-tel-hero {
		margin-top: 8px;
	}
	/* トップ写真部分：控えめで上品に（白い細枠・影なし）（#32 調整） */
	.wn-tel {
		display: block;
		text-decoration: none !important;
		text-align: center;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 3px;
		padding: 10px 12px 9px;
		text-shadow: none;
		transition: background-color 0.2s ease;
	}
	.wn-tel:active {
		background: rgba(255, 255, 255, 0.16);
	}
	.wn-tel span {
		display: block;
		color: #fff !important;
	}
	.wn-tel-label {
		font-size: 15px;
		letter-spacing: 0.08em;
		opacity: 0.9;
	}
	.wn-tel-num {
		font-family: var(--wn-sans);
		font-size: 27px;
		font-weight: 600;
		letter-spacing: 0.08em;
		line-height: 1.4;
	}
	.wn-tel-num .fa {
		font-size: 0.8em;
		margin-right: 4px;
	}
	.wn-tel-note {
		display: none !important;
	}
	/* 問い合わせ欄の電話番号 */
	#footer-contact-box .contact-info {
		font-size: 36px !important;
		font-weight: 700;
		margin: 6px 0 4px;
	}
	.wn-tel-footer {
		color: var(--wn-green-dark) !important;
		text-decoration: none !important;
		letter-spacing: 0.04em;
	}
	/* お問い合わせページの案内の電話番号 */
	.contact-memo .wn-tel-footer {
		font-size: 32px;
		font-weight: 700;
	}
	/* 画面下の固定バナー：電話ボタン */
	.wn-tel-bar {
		display: block;
		max-width: 460px;
		margin: 0 auto;
		background: var(--wn-green);
		border-radius: 6px;
		padding: 8px 10px 7px;
		text-align: center;
		text-decoration: none !important;
	}
	.wn-tel-bar span {
		display: block;
		color: #fff !important;
	}
	.wn-tel-bar-num {
		font-size: 30px;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1.25;
	}
	.wn-tel-bar-note {
		font-size: 14px;
		opacity: 0.9;
	}
	/* メニュー（ハンバーガー内） */
	.smenu li a,
	#nav-content li a {
		font-size: 21px !important;
		line-height: 1.6;
	}
	.flex li {
		font-size: 18px;
		padding: 10px 18px !important;
	}
	/* 画面下に固定のお問い合わせバー（#24）
	 * 元は高さ121px固定。文字を大きくしたらボタンが画面外にはみ出したので、中身に合わせて伸ばす */
	#footerFloatingMenu {
		height: auto !important;
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
		background: #f6f7f4 !important;
		border-top: 1px solid var(--wn-line);
		box-shadow: 0 -4px 16px rgba(20, 40, 20, 0.08);
		z-index: 950 !important;
		box-sizing: border-box;
	}
	#footerFloatingMenu p {
		font-size: 16px !important;
		line-height: 1.5 !important;
		margin: 0 0 8px !important;
		color: var(--wn-text) !important;
	}
	#footerFloatingMenu .bt-link {
		width: 100% !important;
		max-width: 460px;
		margin: 0 auto !important;
	}
	#footerFloatingMenu .bt-link a {
		display: block;
		padding: 13px 10px;
		font-size: 20px !important;
		font-weight: 700;
	}
	/* バーに隠れないよう、ページの下に余白。「ページの先頭へ」ボタンはバーの上へ */
	body {
		padding-bottom: 185px;
	}
	.pagetop {
		bottom: 185px !important;
	}
	#copyright,
	#bottom-navi li {
		font-size: 15px !important;
	}
	#top-navi h3 {
		font-size: 19px;
		letter-spacing: 0.02em;
	}
	#top-navi p {
		font-size: 18.5px;
	}
	.bt-link a {
		font-size: 19px;
	}
	.section table th {
		white-space: normal;
	}
	#footer,
	#footer p,
	#footer a,
	#footer li {
		font-size: 16px;
	}
	.fw-bold,
	.contact-left p,
	.contact-right p {
		font-size: 19px;
	}
}