/*
Theme Name: Kireina
Theme URI: http://example.com
Author: Kireina
Author URI: http://example.com
Description: Kireina カスタムテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kireina
*/
/* ベース */

html,
body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		"Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
}

/* Windows の Yu Gothic が細く見えやすい対策（任意） */
@supports (font-variation-settings: normal) {
	body {
		font-weight: 400;
	}
}
@supports not (font-variation-settings: normal) {
	body {
		font-weight: 500;
	} /* Yu Gothic は 500 前後が読みやすい */
}

body {
	margin: 0;
}

a {
	color: white;
	text-decoration: none;
}

main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	color: #2d2d2d;
}
/* ベース: スマホ（~479px想定） */
html {
	font-size: 16px;
}
body {
	font-size: 1rem;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
	font-weight: 600;
	letter-spacing: 0;
	margin: 0 0 0.6em;
}
p {
	margin: 0 0 1em;
}

h1 {
	font-size: 1.75rem;
	line-height: 1.3;
} /* 28px */
h2 {
	font-size: 1.5rem;
	line-height: 1.35;
} /* 24px */
h3 {
	font-size: 1.25rem;
	line-height: 1.4;
} /* 20px */
h4 {
	font-size: 1.125rem;
	line-height: 1.45;
} /* 18px */
small,
.meta {
	font-size: 0.875rem;
	line-height: 1.6;
} /* 14px */

/* XS: きわめて小さい端末（~359px）→少しだけ縮小 */
@media (max-width: 359px) {
	h1 {
		font-size: 1.625rem;
	} /* 26px */
	h2 {
		font-size: 1.375rem;
	} /* 22px */
	h3 {
		font-size: 1.125rem;
	} /* 18px */
	h4 {
		font-size: 1rem;
	} /* 16px */
	p {
		font-size: 0.95rem;
	} /* 15.2px */
}

/* SM: 大きめスマホ（480px~）→少し拡大 */
@media (min-width: 480px) {
	h1 {
		font-size: 1.875rem;
	} /* 30px */
	h2 {
		font-size: 1.625rem;
	} /* 26px */
	h3 {
		font-size: 1.375rem;
	} /* 22px */
	h4 {
		font-size: 1.25rem;
	} /* 20px */
	p {
		font-size: 1rem;
	} /* 16px（据え置き）*/
}

/* MD: タブレット縦・小さめ横（768px~） */
@media (min-width: 768px) {
	h1 {
		font-size: 2.125rem;
	} /* 34px */
	h2 {
		font-size: 1.875rem;
	} /* 30px */
	h3 {
		font-size: 1.5rem;
	} /* 24px */
	h4 {
		font-size: 1.375rem;
	} /* 22px */
	p {
		font-size: 1.0625rem;
	} /* 17px */
}

/* LG: タブレット横・PC小（1024px~） */
@media (min-width: 1024px) {
	h1 {
		font-size: 2.375rem;
	} /* 38px */
	h2 {
		font-size: 2rem;
	} /* 32px */
	h3 {
		font-size: 1.625rem;
	} /* 26px */
	h4 {
		font-size: 1.5rem;
	} /* 24px */
	p {
		font-size: 1.125rem;
	} /* 18px */
}

/* XL: デスクトップ広め（1280px~） */
@media (min-width: 1280px) {
	h1 {
		font-size: 2.625rem;
	} /* 42px */
	h2 {
		font-size: 2.25rem;
	} /* 36px */
	h3 {
		font-size: 1.75rem;
	} /* 28px */
	h4 {
		font-size: 1.625rem;
	} /* 26px */
	p {
		font-size: 1.125rem;
	} /* 18px（据え置き）*/
}

/* （任意）長い日本語見出しの折返し対策 */
h1,
h2,
h3,
h4 {
	overflow-wrap: anywhere;
}

/* デフォルトは表示（SP/タブレット） */
.pc-none {
	display: block;
}

/* PC（1024px~）で非表示 */
@media (min-width: 768px) {
	.pc-none {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.sp-none {
		display: none;
	}
}

/* ------- 共通パーツ ------- */

.about-button,
.service-contact-button {
	display: inline-block;
	background-color: #06845c;
	color: white;
	padding: 18px 50px;
	border-radius: 40px;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s;
}

@media (max-width: 768px) {
	.about-button,
	.service-contact-button {
		font-size: 1rem;
		padding: 15px 50px;
	}
}

.about-button:hover,
.service-contact-button:hover {
	background-color: #046b4a;
}

/*ヘッダー */
header {
	background-color: white;
	padding: 0 1rem;
}

.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	width: 100%;
	color: black;
}

header .container {
	align-items: center; /* 既にあるが念のため */
	min-height: 90px; /* 行の高さを確保（好みで調整OK） */
}

.site-logo {
	position: relative;
	margin: 0; /* ← margin-top:10px を打ち消す */
	display: flex;
	align-items: center; /* ロゴ画像を縦中央 */
}

.site-logo .logo-img {
	width: 220px;
	padding-top: 5px;
	display: block;
}

.site-description {
	position: absolute;
	top: -10px; /* 例: ロゴの上から10pxの位置 */
	left: 15px;
	font-weight: bold;
	text-align: center; /* 例: 文字を中央揃え */
	font-size: 10px; /* 例: 文字のサイズ */
	color: #06845c; /* 例: 文字の色 */
	width: 100%;
}

.nav-contacts {
	width: 100%;
}

@media screen and (max-width: 768px) {
	header .container {
		min-height: 70px; /* 行の高さを確保（好みで調整OK） */
	}
	.nav-contacts {
		display: none;
	}
}

.nav-contacts ul {
	display: flex;
	justify-content: flex-end; /* 右寄せ */
	align-items: stretch; /* ← 子(li)の高さを揃える */
	list-style: none;
	margin: 0 20px 0 0;
	padding: 0;
	gap: 10px; /* ボタン間の余白 */
}

.nav-contacts li {
	flex: 0 0 auto; /* 必要に応じて等幅にしたいなら flex:1; に */
	display: flex; /* 中のaをflexにして高さを揃える */
}

.nav-contacts li a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 20px; /* 横の余白だけ設定 */
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
	transition: background-color 0.3s;
	flex: 1; /* liの高さにフィット */
}

/* 1個目（LINE） */
.nav-contacts li:nth-child(1) a {
	background-color: #06c755;
	font-size: 15px;
}
.nav-contacts li:nth-child(1) a:hover {
	background-color: #05ab4a;
}

/* 2個目（TEL） */
.nav-contacts li:nth-child(2) a {
	background-color: #06845c;
	flex-direction: column; /* 縦並び */
	line-height: 1.5;
	padding: 2px 15px; /* 縦の余白 */
	font-size: 12px;
}
.nav-contacts li:nth-child(2) a:hover {
	background-color: #046b4a;
}

/* 電話のテキスト調整 */
.nav-contacts .mobile-tel .tel-label {
	font-size: 0.7rem;
}
.nav-contacts .mobile-tel .tel-number {
	font-size: 1rem;
	font-weight: bold;
}

.nav-contacts li:nth-child(1) {
	background-color: #06c755;
	font-size: 15px;
	padding: 15px 15px;
	border-radius: 5px;
	margin-right: 10px;
	transition: background-color 0.3s;
}

.nav-contacts li:nth-child(1):hover {
	background-color: #05ab4a;
}

.nav-contacts li:nth-child(2) {
	background-color: #06845c;
	font-size: 12px;
	padding: 5px 15px;
	border-radius: 5px;
	transition: background-color 0.3s;
}

.nav-contacts li:nth-child(2):hover {
	background-color: #046b4a;
}

.nav-contacts li:nth-child(2) p:nth-child(2) {
	font-size: 1rem;
}

.nav-contacts a,
.nav-contacts p {
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}

.nav-contacts ul p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5rem;
}

/* ハンバーガー */
.hamburger {
	position: relative;
	cursor: pointer;
	width: 58px;
	height: 24px;
	z-index: 10;
	margin-left: 10px;
	border: none;
	background: transparent;
	padding: 0px 10px 30px 0;
	display: flex;
	align-items: center;
	justify-content: left;
}

.hamburger span {
	transition: all 0.4s;
	position: absolute;
	height: 4px;
	background-color: #06845c;
	width: 100%;
	z-index: 10;
}

.hamburger span:nth-child(1) {
	top: 4px;
	width: 50%;
}
.hamburger span:nth-child(2) {
	top: 14px;
	width: 75%;
}
.hamburger span:nth-child(3) {
	top: 24px;
}

/* ✖️ 状態のスタイル */
.hamburger.open span:nth-child(1) {
	top: 10px;
	transform: translateY(6px) rotate(-40deg);
	width: 100%;
}
.hamburger.open span:nth-child(2) {
	width: 100%;
	opacity: 0;
}
.hamburger.open span:nth-child(3) {
	top: 22px;
	transform: translateY(-6px) rotate(40deg);
}

/* ===== スマホ調整（768px以下） ===== */
@media (max-width: 768px) {
	header {
		padding: 0 0.75rem; /* 余白を少しタイトに */
	}

	.container {
		max-width: 100%;
		gap: 0.5rem;
	}

	/* ロゴ画像のサイズ最適化 */
	.site-logo .logo-img {
		height: 45px; /* 高さ基準で縮小 */
		width: auto; /* 比率維持 */
		max-width: 200px; /* はみ出し防止 */
		display: block;
		padding: 0;
	}

	/* キャッチコピーはスマホでは非表示（必要なら） */
	.site-logo .site-description {
		display: none;
	}

	/* ハンバーガーのタップ領域を広げる＆横幅短縮 */
	.hamburger {
		width: 44px; /* 横幅をコンパクトに */
		height: 36px; /* タップ領域は十分に */
		padding: 0;
	}

	/* ハンバーガーのバー（太さ/間隔） */
	.hamburger span {
		height: 3px; /* 少し細めに */
		left: 0;
		right: 0;
	}

	.hamburger span:nth-child(1) {
		top: 8px;
		width: 50%;
	}
	.hamburger span:nth-child(2) {
		top: 16px;
		width: 75%;
	}
	.hamburger span:nth-child(3) {
		top: 24px;
		width: 100%;
	}

	/* ✖︎状態の位置も微調整 */
	.hamburger.open span:nth-child(1) {
		top: 16px;
		transform: translateY(0) rotate(-40deg);
		width: 100%;
	}
	.hamburger.open span:nth-child(2) {
		opacity: 0;
	}
	.hamburger.open span:nth-child(3) {
		top: 16px;
		transform: translateY(0) rotate(40deg);
	}
}

/* さらに小さい端末（480px以下）の微調整（任意） */
@media (max-width: 480px) {
	.site-logo .logo-img {
		height: 40px;
		max-width: 170px;
	}

	.hamburger {
		width: 40px;
		height: 34px;
	}

	.hamburger span:nth-child(1) {
		top: 7px;
	}
	.hamburger span:nth-child(2) {
		top: 15px;
	}
	.hamburger span:nth-child(3) {
		top: 23px;
	}
}

/* モバイルメニュー（非表示時） */
.mobile-menu {
	position: fixed;
	top: 0;
	right: -100%; /* ← 初期位置：画面外 */
	width: 35%;
	height: 100vh;
	background-color: #fff;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
	z-index: 10000;
	transition: right 0.7s ease;
	padding: 2rem 1rem;
}

.mobile-menu .logo-img {
	width: 67%;
	margin: 15px 0 0 15px;
}

@media (max-width: 768px) {
	.mobile-menu .logo-img {
		width: 35vw;
	}
}

@media (max-width: 480px) {
	.mobile-menu .logo-img {
		width: 45vw;
	}
}

.mobile-menu ul {
	padding: 0 15px;
}

.mobile-menu .mobile-menu-first li {
	border-bottom: 1px solid #06845c;
}

.mobile-menu ul li {
	list-style: none;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 0;
}

.mobile-menu ul li a {
	display: block; /* ← ブロック要素化してli全体を覆う */
	padding: 20px 0; /* ← liに付けていたpaddingをaへ移動 */
	color: #06845c;
	text-decoration: none;
	width: 100%;
}

.mobile-menu ul li a:hover {
	color: #08a674;
}

.mobile-menu.active {
	right: 0;
}

@media (max-width: 768px) {
	.mobile-menu {
		width: 100%; /* 95% → 100% */
		padding: 0; /* 左右の余白をなくす */
	}
	.mobile-menu ul li {
		font-size: 1.2rem;
	}
}

/* 親ulの左右パディングの影響を消す */
.mobile-menu .mobile-menu-second {
	padding: 1rem 0; /* 左右0 */
	margin: 25px auto 0;
	width: 100%;
}

/* 2分割・はみ出し防止 */
.mobile-menu-second {
	position: relative;
	display: flex;
	justify-content: center; /* 全体中央 */
	align-items: stretch; /* 高さ揃え */
	list-style: none;
	gap: 0; /* 中央の線があるのでgapは0 */
}

/* ←ここ重要：各liを正確に半分＆箱サイズ安定 */
.mobile-menu-second li {
	flex: 0 0 50%; /* 横幅ちょうど半分 */
	max-width: 50%;
	min-width: 0; /* 文字が長い時のはみ出し防止 */
	display: flex; /* 中のaを伸ばすため */
	margin: 0;
	box-sizing: border-box;
}

/* aを幅100%にして中央寄せ（タップ面積＝表示面積） */
.mobile-menu-second li > a {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0.5rem 0; /* お好みで */
}

/* 中央の縦線 */
.mobile-menu-second::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1px;
	height: 1.7rem;
	background-color: #06845c;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
	.mobile-menu .mobile-menu-second {
		margin: 20px auto 0;
	}
}

.mobile-menu-third {
	display: none;
}

@media screen and (max-width: 768px) {
	.mobile-menu-third {
		display: flex;
		justify-content: space-between; /* 左右に配置 */
		align-items: stretch; /* ← 子要素(li)の高さを揃える */
		gap: 12px;
		list-style: none;
		margin: 20px 0;
		padding: 0;
		width: 100%;
	}

	/* 各アイテムを等幅にして“左右に”配置 */
	.mobile-menu .mobile-menu-third li {
		flex: 1 1 0; /* 等幅 */
		display: flex;
	}

	/* ボタンは a 全体をクリック可能に（liの色指定をaへ移動） */
	.mobile-menu .mobile-menu-third li a {
		flex: 1; /* liの高さにフィット */
		display: flex; /* 中のテキストを中央配置 */
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 10px 0;
		color: #fff;
		text-decoration: none;
		font-weight: 600;
		line-height: 1.4;
		border-radius: 5px;
		transition: opacity 0.2s, background-color 0.2s;
	}

	.mobile-menu .mobile-menu-third li a:hover {
		color: #fff;
	}

	/* 1個目（LINE） */
	.mobile-menu .mobile-menu-third li:nth-child(1) a {
		background-color: #06c755;
	}
	.mobile-menu .mobile-menu-third li:nth-child(1) a:hover {
		background-color: #05ab4a;
	}

	/* 2個目（TEL） */
	.mobile-menu .mobile-menu-third li:nth-child(2) a {
		background-color: #06845c;
	}
	.mobile-menu .mobile-menu-third li:nth-child(2) a:hover {
		background-color: #046b4a;
	}

	/* 電話だけラベルを縦並びに */
	.mobile-menu .mobile-menu-third .mobile-tel a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mobile-menu .mobile-menu-third .mobile-tel .tel-label {
		font-size: 0.7em;
	}
	.mobile-menu .mobile-menu-third .mobile-tel .tel-number {
		font-size: 0.9em;
		font-weight: 700;
	}
}

/* === Fix: SP の LINE / TEL ボタンの色・レイアウトが他ルールに負ける問題 === */
@media (max-width: 768px) {
	/* まず第三段の a を白文字＆ボタン化（既存より強いセレクタ＋!important） */
	.mobile-menu .mobile-menu-third li a {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 10px 0;
		color: #fff !important;
		font-weight: 600;
		border-radius: 5px;
		text-decoration: none;
		line-height: 1.4;
	}
	/* 1個目（LINE） */
	.mobile-menu .mobile-menu-third li:nth-child(1) a {
		background-color: #06c755 !important;
	}
	.mobile-menu .mobile-menu-third li:nth-child(1) a:hover {
		background-color: #05ab4a !important;
	}
	/* 2個目（TEL） */
	.mobile-menu .mobile-menu-third li:nth-child(2) a {
		background-color: #06845c !important;
	}
	.mobile-menu .mobile-menu-third li:nth-child(2) a:hover {
		background-color: #046b4a !important;
	}

	/* 第二段（2分割）の a も念のため上書き */
	.mobile-menu .mobile-menu-second li a {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #06845c;
		padding: 10px 0;
		text-decoration: none;
		font-weight: 600;
		line-height: 1.4;
	}
	.mobile-menu .mobile-menu-second .mobile-tel a {
		color: #fff !important;
		background-color: #06845c !important;
		border-radius: 5px;
	}
}

/* === Fix: モバイルメニューの縦スクロール＆CTA固定 === */
/* @media (max-width: 768px) { */
/* メニュー全体を縦積みに */
.mobile-menu {
	display: flex;
	flex-direction: column;
}
/* 中身をスクロール可能に（慣性スクロール対応） */
.mobile-menu .mobile-menu-inner {
	display: flex;
	flex-direction: column;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	height: 100vh; /* 既存の .mobile-menu height と揃える */
	padding: 1.5rem 0; /* 左右は既存、上下は少し余裕 */
}
/* 第一段（wp_nav_menu のUL）周りの余白 */
.mobile-menu .mobile-menu-list {
	padding: 0 20px;
	flex: 1 1 auto; /* ← ここを“可変”にしてスクロール領域にする */
	overflow: auto;
	min-height: 0; /* Flex 子の正しいスクロールに必須 */
}
/* 第二段・第三段（CTA）は下部に“貼り付く” */

.mobile-menu .mobile-menu-second,
.mobile-menu .mobile-menu-third {
	position: sticky;
	bottom: 0;
	background: #fff; /* 背景で本文と区切る */
	padding: 12px 20px; /* 既存と整合する余白 */
	z-index: 1; /* スクロール内容より前面に */
}
/* second の上下マージン微調整 */
.mobile-menu .mobile-menu-second {
	margin-top: 8px;
	bottom: 40px;
}
.mobile-menu .mobile-menu-third {
	margin-top: 8px;
}
/* } */

/* メニューの外側オーバーレイ */
.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	display: none;
}

.menu-overlay.active {
	display: block;
}

.mobile-menu-inner {
	position: relative;
}

.mobile-menu-inner a {
	width: 80%;
}

.close-hamburger {
	position: absolute; /* 右上に固定 */
	top: 2.7rem;
	right: 1.5rem;
	width: 40px; /* アイコンサイズに合わせる */
	height: 40px;
	padding: 0; /* デフォルトpaddingを消す */
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
@media (max-width: 768px) {
	.close-hamburger {
		width: 35px;
		height: 35px;
	}
}

.close-hamburger span {
	position: absolute;
	height: 4px;
	background: #06845c;
	width: 100%;
	transition: all 0.4s ease;
}

/* ✖️ 状態のスタイル */
.close-hamburger span:nth-child(1) {
	top: 10px;
	transform: translateY(6px) rotate(-40deg);
}
.close-hamburger span:nth-child(2) {
	opacity: 0;
}
.close-hamburger span:nth-child(3) {
	top: 22px;
	transform: translateY(-6px) rotate(40deg);
}

/* ------- front-page ------- */

.front-top-image {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 95vw;
	max-width: 100vw;
	overflow: hidden;
	border-radius: 0 40px 40px 0;
}

.front-top-img {
	width: 100%;
	height: 100%;
	max-height: 550px;
	object-fit: cover;
	display: block;
}

.front-top-image-section-header {
	position: relative;
	width: 100%;
	height: 100%;
}

.front-top-image-section-header h1,
.front-top-image-section-header p {
	position: absolute;
	left: 10%;
	z-index: 2;
}

.front-top-image-section-header h1 {
	top: 10%;
	font-size: 2.5rem;
	color: #fff;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

.front-top-image-section-header p {
	top: 28%;
	max-width: 500px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #06845c;
	background-color: rgb(255, 255, 255, 0.8);
	padding: 20px;
	border-radius: 15px;
	line-height: 2.1rem;
}

.about-button-wrapper {
	position: absolute;
	right: 10%;
	bottom: 10%;
	font-size: 1.2rem;
}

@media (max-width: 768px) {
	.front-top-image {
		height: 548px;
	}

	.front-top-image-section-header h1,
	.front-top-image-section-header p {
		left: 5%;
	}

	.front-top-image-section-header h1 {
		font-size: 1.875rem;
		top: 12%;
		padding-right: 5%;
		color: #fff;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
	}

	.front-top-image-section-header p {
		font-size: 1.2rem;
		top: 30%;
		margin-right: 5%;
	}

	.about-button-wrapper {
		left: 5%;
		bottom: 9%;
		font-size: 1.2rem;
	}
}

.front-message {
	margin-top: 30px;
	max-width: 1000px;
	margin: 50px auto 0;
	padding: 0 20px;
}

.front-message-text h2 {
	font-size: 2rem;
	font-weight: bold;
	color: #06845c;
	text-align: center;
	padding: 18px;
}

.front-message-text p {
	text-align: center;
	line-height: 1.7rem;
}

@media (max-width: 479px) {
	.front-message {
		padding: 0 15px;
	}
	.front-message-text br {
		display: none;
	}

	.front-message-text h2 {
		font-size: 1.625rem;
	}
	.front-message-text p {
		line-height: 1.9;
	} /* 読みやすさ確保 */
	.front-message-text h2 {
		text-wrap: balance;
	} /* 長い見出しの折返し最適化（対応ブラウザで有効） */

	.front-top-image-section-header h1 {
		font-size: 1.8rem;
		top: 8%;
	}

	.front-top-image-section-header p {
		font-size: 1rem;
		line-height: 1.9rem;
		top: 27%;
		padding: 16px;
	}

	.about-button-wrapper {
		bottom: 9%;
	}
}

@media (max-width: 359px) {
	.about-button-wrapper {
		bottom: 6%;
	}
}

.front-message-img {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: 50px;
}

.front-message-img-left,
.front-message-img-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
	box-sizing: border-box;
}

.strength-img {
	width: 100%;
	max-width: 400px;
	height: auto;
	margin-bottom: 1rem;
	border-radius: 15px;
}

.front-message-img-left p,
.front-message-img-right p {
	max-width: 100%;
	max-width: 400px;
	word-break: break-word;
	margin-bottom: 10px;
}

.front-message-title {
	font-size: 1.5rem;
	color: #ffc247;
	margin: 0;
	font-weight: bold;
}

@media (max-width: 768px) {
	/* 左カラムだけ：タイトル → 本文 → 画像 の順に並べ替え */
	.front-message-img-left {
		display: flex;
		flex-direction: column;
	}
	.front-message-img-left .front-message-title {
		order: 1;
	}
	.front-message-img-left p:not(.front-message-title) {
		order: 2;
	} /* 説明文 */
	.front-message-img-left .strength-img {
		order: 3;
	} /* 画像 */

	.front-message-title {
		font-size: 1.4rem;
	}
}

/* 縦線（中央の仕切り） */
.vertical-divider {
	width: 0.5px;
	background-color: #06845c;
	margin: 0 1rem;
}

/* モバイル対応：縦線を非表示にして縦並び */
@media (max-width: 768px) {
	.front-message-img {
		flex-direction: column;
	}

	.vertical-divider {
		display: none;
	}
	/* モバイルで縦を詰める（例：4:3 でほどよく短縮） */
	.strength-img {
		aspect-ratio: 16 / 12; /* 箱の高さを決める */
		height: auto; /* width と aspect-ratio から高さを算出 */
		object-fit: cover; /* 画像を歪ませずにトリミング */
		object-position: center; /* 見せたい位置に合わせて top / 20% などに調整可 */
	}
	.strength-img.top-focus {
		object-position: center 85%;
	}
}

.service {
	margin-top: 100px;
}

.service-content {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.service-content-left,
.service-content-right {
	width: 50%;
	height: 750px;
	box-sizing: border-box;
}

.service-content-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #fbfbfb;
	padding: 40px;
	border-radius: 20px 0 0 20px;
}

.service-content-left a {
	margin-top: 30px;
	width: 55%;
	text-align: center;
	margin: 50px auto 0;
}

.service-section-header p {
	margin: 0;
	color: #ffc247;
	font-weight: bold;
}

.service-section-header h3 {
	margin: 0 0 20px;
	font-size: 2.2rem;
	color: #06845c;
	font-weight: bold;
}

.top-service-list .top-service-title {
	font-size: 1.1rem;
	color: #06845c;
}

.service-content-right .top-service-img {
	height: 750px;
	width: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 20px 20px 0;
}

/* スマホ：縦並びに切り替え */
@media (max-width: 768px) {
	.service {
		padding: 0 10px;
		margin-top: 70px;
	}
	.service-content {
		flex-direction: column;
	}

	.service-content-left,
	.service-content-right {
		width: 100%;
		height: auto;
	}

	.service-content-left {
		border-radius: 20px 20px 0 0;
		padding: 33px;
	}

	.service-content-right .top-service-img {
		border-radius: 0 0 20px 20px;
	}

	.service-contact-button.sp-none {
		display: none;
	}
	.service-content-right .top-service-img {
		aspect-ratio: 16 / 15; /* 箱の高さを決める */
		height: auto; /* width と aspect-ratio から高さを算出 */
		object-fit: cover; /* 画像を歪ませずにトリミング */
		object-position: center; /* 見せたい位置に合わせて top / 20% などに調整可 */
	}
	.service-content-right .top-service-img.top-focus {
		object-position: center 10%;
	}
}

.reason {
	margin: 100px 0;
}

.reason-section-header {
	text-align: center;
	margin-bottom: 20px;
}

.reason-section-header p {
	margin: 0;
	color: #ffc247;
	font-weight: bold;
}

.reason-section-header h3 {
	font-size: 2.2rem;
	color: #06845c;
	font-weight: bold;
	margin: 0;
}

.reason-list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* gap: 1.5rem; */
	padding: 2rem 2rem 2rem 3.5rem; /* ← 左に少し余白を足して三角の上に文字が乗りすぎないよう調整 */
	background: #fff; /* 本体の背景はそのままでOK */
}

/* 左端の三角（背景装飾） */
.reason-list::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; /* 三角の“食い込み”量（お好みで） */
	height: 100%;
	background: #dbe8e0;
	/* 左端に右向きの直角三角形を作る */
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 0; /* 親の背景の“上”に表示 */
	border-radius: 20px 0 0 0;
}

/* 中身は三角の上に来るよう一段上に */
.reason-list > * {
	position: relative;
	z-index: 1;
}

.reason-item {
	flex: 1 1 calc(33.333% - 2rem);
	/* background-color: #f9f9f9; */
	padding: 1.5rem;
	border-radius: 8px;
	box-sizing: border-box;
	text-align: center;
	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
}

.reason-img {
	width: 100%;
	/* max-width: 280px; */
	height: 220px; /* ✅ 高さを揃えるために明示 */
	object-fit: cover; /* ✅ 中央でトリミングしながら表示 */
	display: block;
	margin: 1rem auto;
	border-radius: 10px; /* 角丸にしたい場合 */
}

.reason-number {
	font-size: 2.5rem;
	font-weight: bold;
	color: #ffc247;
	margin-bottom: 0.5rem;
}

.reason-title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #06845c;
	margin-bottom: 0.5rem;
}

.reason-desc {
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: left;
}

.button-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 5rem;
}

.button-wrapper.outer {
	margin-bottom: 5rem;
}

.button-wrapper.blog {
	margin: 4rem 0 3rem;
}

.button-wrapper a {
	width: 350px;
	text-align: center;
}

@media (max-width: 768px) {
	.reason {
		padding: 0 10px;
	}
	.reason-list {
		gap: 0.5rem;
		padding: 0;
	}
	.reason-item {
		padding: 1.5rem 1.5rem 0 1.5rem;
	}
	.button-wrapper {
		margin-top: 3.5rem;
	}
	.reason-item {
		flex: 1 1 100%;
	}
	.button-wrapper.outer {
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* ------- Page-About ------- */

.about-top-image {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	z-index: 100;
}

.about-img {
	width: 90%;
	max-height: 350px;
	object-fit: cover;
	display: block;
	float: right;
	border-radius: 40px 0 0 40px;
}

@media (max-width: 768px) {
	.about-img {
		height: 300px;
		object-fit: cover;
		object-position: center;
	}
}

.about-top-image-section-header {
	width: 100%;
	height: 100%;
}

.about-top-image-section-header h1 {
	position: absolute;
	left: 15%;
	z-index: 2;
	top: 40%;
	font-size: clamp(2.8rem, 5.5vw, 2.3rem);
	color: #fff;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.35);
}

@media (max-width: 479px) {
	.about-top-image-section-header h1 {
		font-size: clamp(2rem, 5.5vw, 2.3rem);
	}
}

.about-strength {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 95vw;
	background-image: linear-gradient(
		155deg,
		rgb(250, 250, 250, 1),
		rgb(216, 246, 229, 1)
	);
	/* #daf4e5;  */
	box-sizing: border-box;
	top: -195px;
	border-radius: 0 40px 40px 0;
}

.about-strength-container ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.8rem;
	width: 100%;
	height: 490px;
	padding-top: 150px;
}

.about-strength-container ul li {
	width: 27%;
	height: 52%;
	background-color: #fff;
	border-radius: 20px;
	list-style: none;
	text-align: center;
	font-size: clamp(2.2rem, 5.5vw, 2.3rem);
	font-weight: bold;
	color: #ffc247;
	box-shadow: 6px 8px 13px -5px rgba(0, 0, 0, 0.19);
	display: flex;
	justify-content: center; /* 横方向中央 */
	align-items: center; /* 縦方向中央 */
	flex-direction: column; /* テキストを縦に積む場合 */
	position: relative; /* 擬似要素配置のため必要 */
	padding-bottom: 0.2rem; /* 線と文字の余白 */
}

.strength-text {
	display: inline-block;
	position: relative;
}

.strength-text::after {
	content: "";
	position: absolute;
	bottom: -12px;
	right: 0;
	width: 78px;
	height: 7px;
	background-color: #ffc247;
}

@media (max-width: 768px) {
	.about-strength {
		width: 100vw; /* 端まで */
		margin-left: -50vw;
		margin-right: -50vw;
		left: 50%;
		right: 50%;
		top: -130px;
		border-radius: 0 24px 24px 0;
	}

	.about-strength-container {
		display: flex;
		flex-direction: column;
		min-height: 700px; /* ←ULのheightをやめて、親に最小高さを付与 */
		box-sizing: border-box;
	}

	/* リスト全体：縦積み＆可変高さ */
	.about-strength-container ul {
		display: flex;
		flex-direction: column;
		align-items: center; /* liのwidth:70%を中央に */
		gap: 1rem;
		padding: 24px 16px 32px;
		margin-top: auto; /* ★ これで下に寄ります */
		height: auto; /* ★ ここをautoに（900px指定は親へ移動） */
	}

	/* 各カード：幅100%・高さ自動・文字サイズ可変 */
	.about-strength-container ul li {
		width: 75%;
		height: 100px; /* 固定52%を解除 */
		border-radius: 15px;
		padding: 25px 14px;
		font-size: clamp(1.4rem, 7vw, 2.8rem);
	}

	/* 下線の太さ・長さも少し小さく */
	.strength-text::after {
		bottom: -1px;
		width: 13vw;
		height: 6px;
	}
}

@media (max-width: 479px) {
	.about-strength-container ul li {
		font-size: clamp(2.2rem, 5.5vw, 2.8rem);
	}
	/* 下線の太さ・長さも少し小さく */
	.strength-text::after {
		bottom: 2px;
		width: 15vw;
		height: 5px;
	}
}

@media (max-width: 360px) {
	/* 下線の太さ・長さも少し小さく */
	.strength-text::after {
		bottom: 2px;
		width: 17vw;
		height: 5px;
	}
}

.about-title {
	max-width: 750px;
	margin: -120px auto 100px;
	padding: 0 10px;
	position: relative; /* 擬似要素の位置基準に */
	padding-bottom: 2rem; /* 矢印分の余白 */
}

.about-title::after {
	content: "";
	position: absolute;
	bottom: -42px; /* 矢印を下に配置 */
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 20px solid transparent; /* 左辺の透明部分 */
	border-right: 20px solid transparent; /* 右辺の透明部分 */
	border-top: 35px solid #d9d9d9; /* 矢印の色（背景色と合わせる） */
}

.about-title::before {
	content: "";
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 22px solid transparent;
	border-right: 22px solid transparent;
	border-top: 36px solid #72968b;
}

.about-title-header {
	text-align: center;
}

.about-title-header h3 {
	font-size: 2rem;
	color: #ffc247;
	margin-bottom: 40px;
}

.about-title-header p {
	text-align: left;
	font-size: 1.3rem;
	line-height: 2.3rem;
}

@media (max-width: 768px) {
	.about-title {
		margin: -60px auto 90px;
		padding: 0 25px;
	}
	.about-title-header h3 {
		font-size: 1.7rem;
		margin-bottom: 25px;
	}
	.about-title-header p {
		font-size: 1rem;
		line-height: 1.9rem;
		padding-bottom: 30px;
	}
}

.about-feature {
	max-width: 700px;
	margin: 0 auto 70px;
	padding: 0 15px;
}

.about-feature-header {
	text-align: center;
	margin-bottom: 70px;
}

.about-feature-header p {
	margin: 0 0 5px;
	color: #ffc247;
	font-weight: bold;
}

.about-feature-header h2 {
	font-size: 2.4rem;
	color: #06845c;
	font-weight: bold;
	margin: 0;
}

.about-feature-list {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 各項目の間隔 */
}

.about-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem; /* 画像とテキストの間隔 */
	padding-bottom: 2rem;
	border-bottom: 1px solid #ddd; /* 横線 */
}

.about-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem; /* 画像とテキストの間隔 */
	padding-bottom: 2rem;
	border-bottom: 1px solid #ddd; /* 横線 */
}

.about-feature-img {
	flex: 0 0 250px; /* 左カラムは常に200px */
	width: 250px; /* 念のため明示 */
	height: 200px; /* 高さも揃える（お好みで） */
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.about-feature-text {
	flex: 1 1 auto;
	min-width: 0; /* 文字折返しの計算安定のため */
}

.about-feature-inner-top {
	display: flex;
	align-items: center;
	gap: 1rem; /* 番号とタイトルの間隔 */
	margin-bottom: 1.7rem;
}

.about-feature-number {
	background-color: #ffc247; /* 丸背景色 */
	color: #fff; /* 白抜き文字 */
	font-weight: bold;
	font-size: 1.5rem;
	width: 45px;
	height: 45px;
	border-radius: 50%; /* 丸型 */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.about-feature-title {
	font-size: 1.5rem;
	font-weight: bold;
	color: #ffc247;
	margin: 0; /* h4のデフォルト余白を消す */
}

.about-feature-desc {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #242424;
}

@media (max-width: 768px) {
	.about-feature {
		margin: 0 auto 50px;
	}
	.about-feature-header {
		margin-bottom: 50px;
	}

	.about-feature-header p {
		font-size: 0.8rem;
	}

	.about-feature-header h2 {
		font-size: 1.8rem;
	}
	/* 1行レイアウト→縦積みに変更 */
	.about-feature-item {
		flex-direction: column;
		align-items: stretch; /* 横幅いっぱいに */
		gap: 1rem;
		padding-bottom: 1.5rem;
	}

	/* 画像を横いっぱいに。PCの固定サイズを上書き */
	.about-feature-img {
		width: 100%;
		flex: 0 0 auto;
		height: auto; /* 既存の height:200px を打ち消し */
		border-radius: 8px;
		display: block;
		object-fit: cover;
		/* 統一した比率にしたい場合は以下を有効化
    aspect-ratio: 16 / 9;
    height: auto;
    */
	}

	/* 画像の下：番号＋タイトルを横並びのまま少しコンパクトに */
	.about-feature-inner-top {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin: 0.75rem 0 1rem;
		flex-wrap: wrap; /* タイトルが長い時に折返し */
	}

	.about-feature-number {
		width: 38px;
		height: 38px;
		font-size: 1.1rem;
	}

	.about-feature-title {
		font-size: clamp(1.1rem, 4.6vw, 1.3rem);
		margin: 0;
	}

	/* 説明文はその下に */
	.about-feature-desc {
		font-size: clamp(0.95rem, 4.2vw, 1.05rem);
		line-height: 1.7;
		margin: 0;
	}

	/* 最後の区切り線は省略（お好みで） */
	.about-feature-item:last-child {
		border-bottom: none;
	}
}

.about-flow {
	max-width: 1000px;
	margin: 0 auto 70px;
	padding: 20px 20px 40px;
	background-color: hsl(40, 100%, 64%);
	border-radius: 20px;
}

.about-flow-header {
	text-align: center;
	padding: 45px 0 55px;
}

.about-flow-header p {
	margin: 0;
	color: #01a2ff;
	font-weight: bold;
}

.about-flow-header h3 {
	font-size: 2.4rem;
	color: #01a2ff;
	font-weight: bold;
	margin: 0 0 5px;
}

.about-flow-list {
	display: flex;
	gap: 1.5rem; /* 項目間の間隔 */
	flex-wrap: wrap; /* レスポンシブ対応で折り返し */
}

.about-flow-item {
	flex: 1 1 300px; /* 最小幅300pxで可変 */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: #fff;
	padding: 20px 5px;
	border-radius: 10px;
}

.about-flow-img {
	width: 100%;
	max-width: 95%; /* 画像サイズ調整 */
	height: auto;
	max-height: 180px;
	border-radius: 8px;
	object-fit: cover;
	margin-bottom: 1rem;
}

.about-flow-inner-top {
	display: flex;
	align-items: center; /* 中央揃え */
	justify-content: flex-start; /* 横方向 左寄せ */
	gap: 0.7rem;
	margin-bottom: 0.6rem;
	width: 88%; /* 左寄せを効かせるために幅を持たせる */
	text-align: left; /* タイトルなどのテキストも左揃え */
}

.about-flow-number {
	color: #ffc247;
	font-weight: bold;
	font-size: 2.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.about-flow-title {
	font-size: 1.2rem;
	font-weight: bold;
	color: #01a2ff;
	margin: 0;
}

.about-flow-desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #555;
	padding: 0 20px;
	text-align: left;
}

@media (max-width: 768px) {
	.about-flow {
		border-radius: 50px;
		padding: 20px 20px 50px;
		margin: 0 auto 70px;
	}
	.about-flow-header {
		padding: 35px 0 55px;
	}
	.about-flow-header h3 {
		font-size: 1.8rem;
	}
	.about-flow-header p {
		font-size: 0.9rem;
	}

	.about-flow-item {
		padding: 20px;
	}
	.about-flow-img {
		max-width: 100%;
	}
}

/* ------- service & price ------- */

.service-price-image {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	z-index: 100;
	margin-bottom: 70px;
}

.service-price-img {
	width: 90%;
	max-height: 350px;
	object-fit: cover;
	display: block;
	float: right;
	border-radius: 40px 0 0 40px;
}

@media (max-width: 768px) {
	.service-price-img {
		height: 300px;
		object-fit: cover;
		object-position: center;
	}
}

.service-price-top-image-section-header {
	width: 100%;
	height: 100%;
}

.service-price-top-image-section-header h1 {
	position: absolute;
	left: 15%;
	z-index: 2;
	top: 40%;
	font-size: 3rem;
	color: #fff;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
	.service-price-top-image-section-header h1 {
		font-size: clamp(2rem, 5.5vw, 2.3rem);
	}
}

@media (max-width: 479px) {
	.service-price-top-image-section-header h1 {
		font-size: clamp(2rem, 5.5vw, 2.3rem);
		top: 45%;
	}
}

@media (max-width: 350px) {
	.service-price-top-image-section-header h1 {
		font-size: clamp(1.8rem, 5.5vw, 2.3rem);
	}
}

.service-price {
	max-width: 1000px;
	margin: 0 auto 70px;
	padding: 0 20px;
}

.service-price-header {
	text-align: center;
	margin-bottom: 70px;
}

.service-price-header p {
	margin: 0 0 5px;
	color: #ffc247;
	font-weight: bold;
}

.service-price-header h2 {
	font-size: 2.4rem;
	color: #06845c;
	font-weight: bold;
	margin: 0;
}

.plan-container h3 {
	position: relative;
	font-size: 1.5rem;
	color: #fff;
	padding: 15px 0; /* 背景には左右padding不要 */
	margin: 0;
}

.plan-container h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	/* コンテナ右端から画面右端までの距離を計算して幅にする */
	width: calc(100vw - (50vw - 50%));
	height: 100%;
	background-image: linear-gradient(
		280deg,
		rgba(177, 190, 138, 1) 10%,
		rgba(3, 129, 88, 1)
	);
	z-index: -1;
	border-radius: 10px 0 0 10px;
}

.plan-container h3 span {
	display: block;
	max-width: 1000px; /* .service-price と同じ幅 */
	margin: 0 auto;
	padding: 0 20px; /* .service-price の左右paddingと揃える */
}

.plan-container h4 {
	display: flex;
	align-items: center;
	gap: 0.6em; /* 縦棒と文字、文字と横棒の間隔 */
	font-size: 1.5rem;
	color: #06845c;
	margin: 2em 0;
	font-weight: bold;
	white-space: nowrap;
}

.plan-container h4::before {
	content: "";
	flex: 0 0 7px; /* 幅3pxの固定縦棒 */
	height: 1.2em; /* 文字高さ程度 */
	background-color: #a7a7a7; /* 縦棒の色 */
}

/* 横棒：残り幅をすべて埋める */
.plan-container h4::after {
	content: "";
	flex: 1 1 auto; /* 余白を全部受け取る */
	height: 0.5px;
	background: #a7a7a7;
}

@media (max-width: 768px) {
	.service-price {
		margin: 0 auto 50px;
	}
	.service-price-header {
		margin-bottom: 50px;
	}

	.service-price-header h2 {
		font-size: 1.8rem;
	}

	.plan-container h3 {
		font-size: 1.3rem;
	}
}

/* モバイル微調整（任意） */
@media (max-width: 480px) {
	.plan-container h4 {
		gap: 0.5em;
		font-size: 1.4rem;
		margin: 1.7em 0;
	}
	.plan-container h4::before {
		height: 1.1em;
	}
	.plan-container h4::after {
		height: 2px;
	}
}

.price-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.price-item {
	flex: 1 1 calc(33.333% - 20px); /* PCで3列 */
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 20px;
	padding: 19px;
	display: flex;
	flex-direction: column; /* 中身を縦積み */
}

.price-item-inner {
	display: flex;
	flex-direction: column;
}

.service-price-number {
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}

.service-price-number span {
	font-size: 1.6rem;
	color: #ffc247;
	margin-right: 5px;
}

.service-price-title {
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	margin-top: 1.4rem;
}

.service-price-title span {
	font-size: 2.5rem;
	color: #ffc247;
	margin-right: 5px;
}

.pricing-table.hidden {
	display: none;
}

.pricing-table {
	margin-top: 12px;
	overflow-x: auto; /* 表が広い場合の崩れ防止 */
	-webkit-overflow-scrolling: touch;
	text-align: center;
}

.pricing-table .price-table-title {
	font-size: 1.2rem;
	font-weight: bold;
	color: #06845c;
	display: inline-block; /* テキスト幅に合わせる */
	border-bottom: 1px solid #06845c; /* 下線（色や太さは調整可） */
	padding-bottom: 10px; /* 文字と線の間隔 */
	margin: 0 0 20px 5px;
}

.pricing-table .price-table-desc {
	padding: 0px 40px;
	text-align: left;
}

@media (max-width: 768px) {
	.service-price-title span {
		font-size: 2.2rem;
		margin-top: 1.2rem;
	}
	.pricing-table .price-table-title {
		font-size: 1.1rem;
	}
	.pricing-table .price-table-desc {
		padding: 0px 10px;
	}
}

/* レスポンシブ例 */
@media (max-width: 1024px) {
	.price-item {
		flex: 1 1 calc(50% - 20px);
	} /* 2列 */
}
@media (max-width: 600px) {
	.price-item {
		flex: 1 1 100%;
	} /* 1列 */
}

/* --- Overlay base --- */
#pricing-modal-overlay {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.45);
	z-index: 9999;

	/* アニメーションのため常時DOMに置き、visibility/opacityで制御 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}

/* オープン時 */
#pricing-modal-overlay.pm-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* --- Dialog --- */
#pricing-modal-overlay .pm-dialog {
	background: #fff;
	width: min(92vw, 960px);
	max-height: 86vh;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	padding: 20px 20px 28px;
	position: relative;

	/* ふわっ（フェード＋軽いズーム/スライド） */
	transform: translateY(10px) scale(0.98);
	opacity: 0;
	transition: transform 0.24s ease, opacity 0.24s ease;

	/* モーダル内スクロールに備えて縦積み */
	display: flex;
	flex-direction: column;
	overflow: hidden; /* 角丸を保つ */
}

/* オープン時の最終状態 */
#pricing-modal-overlay.pm-open .pm-dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* コンテンツ領域をスクロール可能にする */
#pricing-modal-overlay .pm-content {
	margin-top: 8px;
	overflow: auto;
	-webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
	flex: 1 1 auto; /* 余白をすべて受け取る */
	min-height: 0; /* flex子の正しいスクロールに必須 */
}

/* テーブルが横に長い場合も崩れないように */
#pricing-modal-overlay .pm-content table {
	width: 100%;
	border-collapse: collapse;
	word-break: break-word;
}
#pricing-modal-overlay .pm-content th,
#pricing-modal-overlay .pm-content td {
	padding: 0.6em 0.8em;
}

/* 閉じるボタン */
#pricing-modal-overlay .pm-close {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 45px;
	line-height: 1;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #06845c;
}

/* 背面スクロール固定 */
body.pm-no-scroll {
	overflow: hidden;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	#pricing-modal-overlay .pm-dialog {
		width: 92vw;
		border-radius: 12px;
		padding: 14px 14px 20px;
		max-height: 90vh; /* モバイルは余裕を少し増やす */
	}
	#pricing-modal-overlay .pm-content {
		margin-top: 38px;
	}
}

/* ユーザーが動きを減らす設定ならアニメ短縮/無効化 */
@media (prefers-reduced-motion: reduce) {
	#pricing-modal-overlay,
	#pricing-modal-overlay .pm-dialog {
		transition: none !important;
	}
}

/* ------- TablePress_料金表 ------- */

.tablepress {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
}
.tablepress th,
.tablepress td {
	border: 1px solid #ccc;
	padding: 10px;
	text-align: left;
}
.tablepress thead {
	background-color: #f8f8f8;
}

/* ====== TablePress 横スクロール対応 ====== */
@media (max-width: 768px) {
	.tablepress {
		display: block; /* テーブルをブロック化 */
		overflow-x: auto; /* 横スクロール許可 */
		-webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
	}

	.tablepress table {
		width: auto; /* PCと同じ幅を保つ */
		min-width: 720px; /* 横スクロールが出る基準幅（列数に応じて調整） */
		border-collapse: collapse;
	}

	.tablepress th,
	.tablepress td {
		white-space: nowrap; /* 折り返さず横に並べる */
		padding: 7px;
	}
}

.service-list-wrapper {
	max-width: 1000px; /* 横幅制御 */
	width: 90%; /* 画面に応じて縮む */
	margin: 0 auto;
}

.service-list-wrapper .service-plan-desc {
	font-size: 1.1rem;
	line-height: 1.7;
	padding: 0 10px;
}

.service-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* PCは2列 */
	gap: 30px;
	margin: 30px auto;
	padding: 0 10px;
}

.service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 6px 8px 13px -5px rgba(0, 0, 0, 0.19);
}

.service-img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.service-title {
	font-size: 1.3rem;
	font-weight: bold;
	margin: 20px 0 5px;
	color: #06845c;
}

.service-desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #555;
	padding: 0 15px 20px;
	text-align: left;
}

/* タブレット (～1024px): 2列はそのままだけど余白調整 */
@media (max-width: 1024px) {
	.service-list {
		gap: 20px;
		padding: 0 15px;
	}
	.service-title {
		font-size: 1.2rem;
	}
	.service-desc {
		font-size: 1rem;
	}
}

/* スマホ (～768px): 1列表示 */
@media (max-width: 768px) {
	.service-list-wrapper .service-plan-desc {
		font-size: 1rem;
		line-height: 1.6;
	}
	.service-list-wrapper {
		width: 100%;
	}
	.service-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.service-img {
		height: 160px; /* 高さ少し小さめ */
	}
	.service-title {
		font-size: 1.1rem;
	}
	.service-desc {
		line-height: 1.6;
	}
}

@media (max-width: 480px) {
}

.area {
	max-width: 1000px;
	margin: 0 auto 70px;
	padding: 0 20px;
}

.area-header {
	text-align: center;
	margin-bottom: 30px;
}

.area-header p {
	margin: 0 0 5px;
	color: #ffc247;
	font-weight: bold;
}

.area-header h2 {
	font-size: 2.4rem;
	color: #06845c;
	font-weight: bold;
	margin: 0;
}

@media (max-width: 768px) {
	.area {
		margin: 0 auto 50px;
	}
	.area-header {
		margin-bottom: 30px;
	}
	.area-header p {
		font-size: 0.8rem;
	}
	.area-header h2 {
		font-size: 1.8rem;
	}
}

.area-list {
	display: grid;
	grid-template-columns: repeat(1, 1fr); /* PCで2列 */
	gap: 30px; /* カード間の余白 */
	max-width: 800px; /* 中央寄せ用 */
	margin: 20px auto 0;
	padding: 60px 0 20px;
	border-top: 0.5px solid #a7a7a7;
}

.area-item {
	display: flex;
	flex-direction: column; /* 縦に並べる */
	align-items: center; /* 中央寄せ */
	text-align: center;
	background: #fff; /* カード背景（必要なら） */
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 6px 8px 13px -5px rgba(0, 0, 0, 0.19);
}

.area-item:last-child {
	background: #fbfbfb; /* カード背景（必要なら） */
	padding: 25px;
}

.area-img {
	width: 100%;
	height: 180px; /* お好みの高さに固定 */
	object-fit: cover; /* アスペクト比を維持しつつ切り抜き */
	display: block;
}

.area-prefecture {
	font-size: 1.5rem;
	font-weight: bold;
	color: #06845c;
	margin-top: 20px;
}

.area-prefecture.expand {
	color: #fc3171;
	line-height: 1.4;
	margin-bottom: 20px;
}

.area-city-desc {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.6;
	color: #272727;
	padding: 0 30px 25px;
	text-align: left;
}

.area-city-desc.expand1 {
	border-bottom: 0.5px solid #a7a7a7;
	padding: 0 0 20px;
	margin-bottom: 0;
}

.area-city-desc.expand2 {
	padding: 20px 0 0;
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.area-prefecture {
		font-size: 1.3rem;
		margin: 20px 0 5px;
	}
	.area-prefecture.expand {
		margin: 0 0 20px;
	}
	.area-city-desc {
		font-size: 1rem;
		line-height: 1.8;
	}
}

/* ------- COMPANY ------- */
.company-image {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	z-index: 100;
	margin-bottom: 70px;
}

.company-img {
	width: 90%;
	max-height: 350px;
	object-fit: cover;
	display: block;
	float: right;
	border-radius: 40px 0 0 40px;
}

@media (max-width: 768px) {
	.company-image {
		margin-bottom: 20px;
	}
	.company-img {
		height: 300px;
		object-fit: cover;
		object-position: center;
	}
}

.company-image-section-header {
	width: 100%;
	height: 100%;
}

.company-image-section-header h1 {
	position: absolute;
	left: 15%;
	z-index: 2;
	top: 40%;
	font-size: 3rem;
	color: #fff;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
	.company-image-section-header h1 {
		font-size: clamp(2rem, 5.5vw, 2.3rem);
	}
}

@media (max-width: 479px) {
	.company-image-section-header h1 {
		font-size: clamp(2rem, 5.5vw, 2.3rem);
		top: 45%;
	}
}

@media (max-width: 350px) {
	.service-price-top-image-section-header h1 {
		font-size: clamp(1.8rem, 5.5vw, 2.3rem);
	}
}

.company-description {
	max-width: 1000px;
	margin: 0 auto 70px;
	padding: 32px 16px;
	display: grid;
	grid-template-columns: 1fr; /* モバイル：1カラム */
	gap: 24px;
}

/* PCで左右2カラムに */
@media (min-width: 768px) {
	.company-description {
		grid-template-columns: 1.3fr 1fr; /* 左をやや広め */
		gap: 40px;
		align-items: start;
	}
}

.company-message {
	position: relative; /* 擬似要素の基準にする */
	background: #fff; /* 本体は白背景 */
	padding: 2.8rem 2rem 2rem 2.8rem;
	border-radius: 12px 0 0 0; /* 角丸はお好みで */
	overflow: hidden; /* 擬似要素のはみ出しを隠す */
}
/* 三角背景 */
.company-message::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; /* 要素幅いっぱい */
	height: 100%; /* 要素高さいっぱい */
	background: #dbe8e0;
	clip-path: polygon(0 0, 100% 0, 0 100%); /* 左端に三角形 */
	z-index: 0;
	border-radius: 30px 0 0 0; /* 任意で角丸 */
}

/* テキストや中身は上に */
.company-message > * {
	position: relative;
	z-index: 1;
}

.company-message h2 {
	font-size: clamp(18px, 2.2vw, 24px);
	line-height: 1.5;
	margin: 0 0 12px;
	color: #06845c; /* お好みで */
	border-bottom: 1px solid #06845c;
	padding-bottom: 20px;
}

.company-message p {
	line-height: 1.9;
	margin: 0;
	color: #333;
	margin-top: 20px;
}

/* 右カラム（会社概要） */
.company-detail {
	background: #fff;
	padding: 2.8rem;
}

/* 行をグリッドで2列に */
.company-dl {
	margin: 0;
}

.company-dl .dl-row {
	display: grid;
	grid-template-columns: 120px 1fr; /* ラベル/値 */
	align-items: start;
	gap: 0 16px;
	padding: 15px 0;
	border-bottom: 1px solid #e6ece8; /* ← 行ごとに“1本線” */
}

.company-dl .dl-row:last-child {
	border-bottom: none; /* ← 最後の行は線なし */
}

.company-dl .dl-row dd {
	color: #333;
	text-decoration: none;
}

.company-dl .dl-row dd a {
	color: inherit !important;
	text-decoration: none !important;
	pointer-events: none; /* 電話タップ無効化 */
}

.company-dl dt {
	font-weight: 600;
	color: #06845c;
	margin: 0;
}

.company-dl dd {
	margin: 0;
	color: #333;
	line-height: 1.8;
	word-break: break-word;
}

@media (max-width: 768px) {
	.company-message,
	.company-detail {
		padding: 2.3rem 1.5rem;
	}
}

/* モバイルで縦並びにしたいとき */
@media (max-width: 480px) {
	.company-dl .dl-row {
		grid-template-columns: 1fr;
		gap: 6px 0;
	}
}

/* ------- FOOTER ------- */

footer {
	background-color: #f5f5f5;
	padding: 3rem;
	text-align: center;
}

.footer-wrapper {
	max-width: 1000px;
	margin: 0 auto;
}

.footer-upper {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}

.footer-nav {
	display: flex;
	justify-content: flex-start;
	color: #06845c;
	font-weight: bold;
	text-align: left;
}

.logo-footer-img {
	width: 200px;
}
.footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0 2.2rem 1rem 0;
}

.footer-nav li {
	list-style: none;
	padding: 0;
	margin-bottom: 20px;
}

/* 電話ボタン共通デザイン */
.footer-nav .mobile-tel a {
	display: flex;
	flex-direction: column; /* ラベルと番号を縦並び */
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1.4;
	padding: 8px 15px;
	background-color: #06845c;
	color: #fff;
	border-radius: 5px;
	font-weight: bold;
	text-decoration: none;
	transition: background-color 0.3s, opacity 0.2s;
}

.footer-nav .mobile-tel a:hover {
	background-color: #046b4a;
	opacity: 0.9;
}

/* ラベルと番号の文字サイズ */
.footer-nav .mobile-tel .tel-label {
	font-size: 0.7rem;
}

.footer-nav .mobile-tel .tel-number {
	font-size: 1rem;
	font-weight: 700;
}

.footer-nav a {
	text-decoration: none;
	color: #06845c;
	font-weight: bold;
}

.footer-nav a:hover {
	color: #08a674;
	transition: 0.2s;
	cursor: pointer;
}

.copyright {
	text-align: left;
	width: 100%;
	font-size: 0.8rem;
	margin: 0;
	color: #06845c;
}

@media (max-width: 768px) {
	footer {
		padding: 1.5rem 2.5rem; /* 3rem → 詰める */
		text-align: center;
	}

	.footer-wrapper,
	.footer-upper,
	.footer-nav {
		max-width: 100%;
	}

	/* 2カラムを縦並びにして溢れ防止 */
	.footer-upper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	.footer-logo-area {
		width: 100%;
		display: flex;
		justify-content: left;
	}

	.logo-footer-img {
		width: clamp(140px, 45vw, 200px);
		max-width: 100%;
		height: auto;
	}

	/* ナビは縦並び＋左右余白を詰める */
	.footer-nav {
		display: flex;
		flex-direction: column; /* 横並び→縦並び */
		align-items: flex-start; /* 左詰 */
		text-align: left;
		gap: 12px;
		width: 100%;
	}
	.footer-nav ul {
		margin: 0 0 15px 0; /* 右マージン 2.2rem をリセット */
		padding: 0; /* UA差も消す */
	}
	.footer-nav li {
		list-style: none;
		margin: 0 0 24px 0;
	}

	.footer-nav li:last-child {
		margin-bottom: 0;
	}

	/* 電話カードの幅で溢れないように */
	.footer-nav li.footer-phone {
		width: 100%;
		max-width: 320px;
		margin: 0 auto 12px;
		padding: 10px 12px;
		font-size: 12px;
	}
	.footer-phone p:nth-child(2) {
		font-size: 14px;
	}

	.copyright {
		text-align: center;
		margin-top: 20px;
	}
}

/* 追尾問合せボタン */
.floating-contact {
	position: fixed;
	bottom: 35px;
	right: 20px;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	bottom: calc(35px + env(safe-area-inset-bottom));
}

.floating-contact.show {
	opacity: 1;
	visibility: visible;
}

/* 問い合わせ、見積もり画面で追尾問合せボタンを非表示 */
body.hide-floating-contact #floating-contact {
	display: none !important;
}

.floating-button {
	inline-size: clamp(64px, 15vw, 120px); /* = width */
	aspect-ratio: 1 / 1; /* 正円維持 */
	block-size: auto; /* aspect-ratioに任せる */
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	font-size: clamp(10px, 1.6vw, 13px); /* 文字も程よく可変 */
	line-height: 1rem;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s;
	margin-bottom: 10px;
	box-sizing: border-box;
}

.floating-button.contact {
	background-color: #0688eb;
}

.floating-button.contact:hover {
	background-color: #0666af;
}

.floating-button.estimate {
	background-color: #f5b300;
}

.floating-button.estimate:hover {
	background-color: #c59105;
}

.footer-icon-img {
	width: 40%; /* 円の中での相対サイズ */
	margin: 0 auto 3px;
	display: block;
}

/* スマホ小さめ */
@media (max-width: 480px) {
	.floating-button {
		inline-size: 91px;
	}
	.floating-button {
		font-size: 11px;
	}
}

/* タブレット〜PC大きめ */
@media (min-width: 1024px) {
	.floating-button {
		inline-size: 120px;
	}
	.floating-button {
		font-size: 13px;
	}
}

/* 料金表 */
.hidden {
	display: none;
}

.pricing-section {
	padding: 2rem;
}

.pricing-plan {
	margin-bottom: 2rem;
}

.toggle-table-button {
	margin-top: 1.8rem;
	padding: 0.5em 1em;
	background-color: #ffc247;
	color: white;
	border: none;
	cursor: pointer;
	border-radius: 50px;
	font-size: 1.3rem;
	font-weight: bold;
	transition: background-color 0.3s;
}

.toggle-table-button:hover {
	background-color: #d59516;
}

@media (max-width: 480px) {
	.toggle-table-button {
		font-size: 1.2rem;
	}
}

/* 一覧 */
.archive-header {
	display: flex;
	align-items: baseline; /* ← ベースライン揃え */
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid #c8c4c4;
}
.content .archive-header {
	margin-bottom: 20px; /* ← 個別指定 */
}

@media (max-width: 640px) {
	.content .archive-header {
		margin-bottom: 10px; /* ← 個別指定 */
	}
}

.archive-header h1 {
	margin: 0 0 4px 0;
	font-size: clamp(25px, 4vw, 40px);
	color: #06845c;
}
.archive-header p {
	margin-left: 12px;
	color: #ffc247;
	font-size: clamp(16px, 2vw, 35px);
	font-weight: bold;
	margin-bottom: 0;
}
.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.news-item {
	display: block; /* gridを解除 */
	padding: 22px 0;
	border-bottom: 1px solid #acacac;
}
@media (max-width: 640px) {
	.news-item {
		grid-template-columns: 1fr;
	}
}
.news-date {
	display: block; /* 上に出す */
	margin-bottom: 4px;
	color: var(--muted);
}
.news-link {
	color: var(--fg);
	text-decoration: none;
	font-weight: 600;
}
.news-link:hover {
	color: var(--link, #9f9b9b);
}
.news-excerpt {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 0.95rem;
}

/* ページネーション */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 0;
}
.page-view {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--fg);
}
.page-view:hover {
	border-color: var(--link);
	color: var(--link);
}
.page-view.is-current {
	background: #f3f4f6;
	border-color: #d1d5db;
	font-weight: 700;
}
.page-view-list {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.page-view.ellipsis {
	border: none;
	padding: 0;
	color: var(--muted);
}
.page-view.prev[aria-disabled="true"],
.page-view.next[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* サイドバー */
.sidebar .widget {
	margin-top: 30px;
	background: #fff;
}

.sidebar .widget:nth-child(1) {
	margin-top: 0px;
}
.sidebar .post-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0; /* 余白は li の padding で確保 */
	padding: 15px 20px;
}
.sidebar .post-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--border, #adadae);
}
.sidebar .post-list li:last-child {
	border-bottom: none;
}

.sidebar .widget-title {
	font-size: 1.1rem;
	border-bottom: 5px solid #a5d3c3;
	text-align: center;
	color: #06845c;
	padding: 15px 0;
	margin: 0;
}
/* 見た目微調整 */
.sidebar .post-list a {
	display: inline-block; /* クリック面積UP */
	color: var(--fg, #1a1a1a);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: bold;
}
.sidebar .post-list a:hover {
	color: var(--link, #9f9b9b);
}

/* パンくず全体を1行に固定（Rank Math / Yoast / 自前） */

.rank-math-breadcrumbs p {
	font-size: 0.8rem;
}

/* 全体を横並びに（ellipsisが効きやすい） */
.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.8rem;
	color: #4a4a4a;
	font-weight: bold;
}
.breadcrumbs a {
	color: #8d8c8c;
	flex: 0 0 auto;
}
.breadcrumbs .sep {
	flex: 0 0 auto;
}

/* 最後の要素だけ省略（…） */
.breadcrumbs .current {
	flex: 1 1 auto;
	min-width: 0; /* ★ellipsisに必須 */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 画面幅で調整したい場合（任意） */
@media (max-width: 640px) {
	.breadcrumbs .current {
		max-width: 60vw;
	} /* 例：スマホで更に詰める */
}

.main-wrapper {
	width: 100%;
	background-color: #f5f5f5;
	padding: 30px 0;
}

/* ====== レイアウトの親（2カラム対応、必要なら） ====== */
.post-container.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px; /* 左：本文 / 右：サイドバー */
	column-gap: 30px; /* ← 横だけ 30px */
	row-gap: 20px; /* ← 縦は不要なら 0 に */
	align-items: start;
	padding: 0 10px;
	max-width: 1100px;
}
.post-container.layout > .content {
	grid-column: 1;
	min-width: 0;
	background-color: #fff;
	padding: 20px 25px;
}
.post-container.layout > .sidebar {
	grid-column: 2;
}
@media (max-width: 960px) {
	.post-container.layout {
		grid-template-columns: 1fr;
	}
	.post-container.layout > .sidebar {
		grid-column: 1;
		position: static;
	}
}

/* ====== ブログ一覧（home.php） ====== */
.blog-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* gap: 16px; */
}
/* 一覧の2カラム（左：サムネ列 260px / 右：本文） */
.blog-card {
	display: grid;
	grid-template-columns: 260px 1fr; /* ← サムネ列の幅を固定 */
	gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--border, #e5e7eb);
}
@media (max-width: 640px) {
	.blog-card {
		grid-template-columns: 1fr;
	}
}

/* 既存: PC/タブレットでは 4:3 を維持 */
.blog-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	position: relative; /* 後述の絶対配置用 */
}
.blog-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* iOS Safari 15以前の aspect-ratio フォールバック */
.blog-thumb::before {
	content: "";
	display: block;
	padding-top: 75%; /* 4:3 */
}
.blog-thumb-img {
	position: absolute;
	inset: 0;
}

/* === スマホ時に高さを明示的に調整 === */
@media (max-width: 640px) {
	.blog-card {
		grid-template-columns: 1fr;
	}

	/* aspect-ratio を無効化して、heightを主役に */
	.blog-thumb {
		aspect-ratio: auto;
		height: clamp(160px, 50vw, 20px); /* ←お好み調整ポイント */
	}
	/* フォールバックを無効化 */
	.blog-thumb::before {
		padding-top: 0;
	}

	/* 念のため */
	.blog-thumb-img {
		position: absolute; /* 既に指定済みでもOK */
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* サムネ無し時のプレースホルダ */
.thumb-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.media-right {
	align-content: start;
}

.blog-date {
	font-size: 0.8rem;
	font-weight: bold;
	color: #777;
}
.blog-title {
	margin: 5px 0 0;
	font-size: clamp(18px, 2vw, 20px);
	line-height: 1.4;
}
.blog-title a {
	color: var(--fg, #1a1a1a);
	text-decoration: none;
}
.blog-title a:hover {
	color: var(--link, #9f9b9b);
}
.blog-excerpt {
	margin: 0.4em 0 0;
	color: var(--muted, #6b7280);
}

/* ====== ブログ詳細（single.php） ====== */
/* ヒーローコンテナ：幅100%、高さを“ほぼ一定”に保つ */
.single-hero {
	margin: 0 0 12px;
	width: 100%;
	height: clamp(220px, 40vw, 460px); /* モバイルで低く、PCで最大560px */
	overflow: hidden;
}
.single-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 余白なくカバー */
	object-position: center; /* 中央を見せる */
	display: block;
}
.single-header {
	margin-bottom: 12px;
	padding: 0;
}
.single-header.news {
	border-bottom: 1px solid #9c9b9b;
}
.single-title {
	margin: 0 0 10px;
	font-size: clamp(22px, 2.2vw, 32px);
}
.single-meta {
	margin-bottom: 20px;
}
.single-meta .single-date {
	color: #6b7280;
	font-feature-settings: "palt";
	font-size: 0.9rem;
}

.entry {
	padding: 0 10px;
}

.entry p,
.entry ul,
.entry ol {
	margin-top: 1em;
}
.entry ul {
	padding-left: 1.2em;
}
.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}
.post-nav a {
	color: var(--link, #0ea5e9);
	text-decoration: none;
}
.post-nav a:hover {
	text-decoration: underline;
}

.back-archive {
	margin: 16px 0 0;
}
.back-to-archive {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--border, #e5e7eb);
	border-radius: 8px;
	text-decoration: none;
	color: var(--fg, #1a1a1a);
}
.back-to-archive:hover {
	border-color: var(--link, #0ea5e9);
	color: var(--link, #0ea5e9);
	text-decoration: none;
}

/* ====== 404（404.php） ====== */

/* ===== 404ページのセンタリングとサイズ指定 ===== */

/* 画面中央に配置（親のmainをグリッド化） */
/* 画面中央配置（PC/タブレット） */
#main-404.site-main-404 {
	min-height: 77svh; /* iOS等のアドレスバー対策 */
	display: grid;
	place-items: center; /* 上下左右センター */
	padding: 24px; /* ← PC時の外側余白 */
	overflow-x: hidden; /* 念のため横スクロール抑止 */
}

/* 中のボックス */
.not-found {
	box-sizing: border-box; /* ★これが重要：padding/border込みで100%に収まる */
	width: 100%;
	max-width: 900px;
	height: 450px; /* PCの高さ */
	display: grid;
	place-content: center; /* テキストも中央 */
	text-align: center;
	padding: clamp(16px, 4vw, 32px);
	border-radius: 16px;
	background: var(--surface, #fff);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
	overflow: hidden; /* はみ出し保険 */
	overflow-wrap: anywhere; /* 予期せぬ長文の折返し */
}

/* 見出しと文言は少し大きめ */
#nf-title {
	margin: 0 0 12px;
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1.2;
	color: #06845c;
}
.not-found p {
	margin: 0.6em 0;
	font-size: clamp(15px, 2.8vw, 18px);
}

.button-wrapper.nf {
	margin-top: 2rem;
}

/* スマホ（幅<=640px）は横幅いっぱい＆高さ300pxに */
@media (max-width: 640px) {
	#main-404.site-main-404 {
		min-height: 40svh;
		padding: 0; /* ★横いっぱいにするため親余白をゼロに */
	}
	.not-found {
		width: 100%; /* 100vw はOSのスクロールバー起因でズレることがあるので％でOK */
		max-width: none;
		height: 300px; /* 指定どおり */
		border-radius: 0; /* 端まで広げるなら角丸を外す */
		margin: 0 5px;
	}
	#nf-title {
		font-size: clamp(20px, 5.3vw, 28px);
	}
	.not-found p {
		font-size: clamp(14px, 3.6vw, 16px);
	}
	.button-wrapper.nf a {
		width: 80%;
		font-size: 0.9rem;
	}
}

/* ====== single画像articleの横いっぱい表示調整 ====== */

/* 1) .content の左右paddingを変数化（既にあればOK） */
.post-container.layout > .content {
	--pad-x: 25px; /* .content の padding-left/right と一致させる */
	padding: 30px var(--pad-x);
}

/* 2) figure のデフォルト余白を必ず消す（ここ重要） */
.post-container.layout > .content figure {
	margin: 0;
}

/* 3) アイキャッチを “白い箱の端まで” 広げる（幅を増やして左右を打ち消す） */
.post-container.layout > .content .single-hero {
	/* 幅を .content の内側幅 + 左右paddingぶんだけ広げる */
	width: calc(100% + var(--pad-x) * 2);
	max-width: none; /* 余計な上限があると止まるので外す */
	margin-left: calc(-1 * var(--pad-x));
	margin-right: calc(-1 * var(--pad-x));
	margin-top: 16px;
	margin-bottom: 24px;
}

/* 画像は親幅にフィット */
.post-container.layout > .content .single-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* 4) スマホで .content の左右paddingを変えるなら変数だけ連動させる */
@media (max-width: 600px) {
	.post-container.layout > .content {
		--pad-x: 16px;
	}
}

/* ------- Sidebar unified cards (ranking & recommend) ------- */

.sb-list {
	list-style: none;
	margin: 0;
	padding: 12px 16px;
	display: grid;
}
/* ランキング・おすすめの各アイテムに下線 */
.sb-item {
	border-bottom: 1px solid #ddd; /* 色はお好みで */
	padding: 15px 0; /* 上下の余白も調整 */
}

/* 最後のアイテムだけ線を消す */
.sb-item:last-child {
	border-bottom: none;
}

.sb-item .sb-link {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 10px;
	align-items: center;
	text-decoration: none;
}

.sb-thumb,
.sb-thumb.placeholder,
.wpp-thumbnail {
	/* WPPのデフォルトclassも拾う */
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #f3f4f6;
}

/* WPPが <img class="wpp-thumbnail"> を出す場合、sizeを揃える */
.wpp-thumbnail {
	width: 56px !important;
	height: 56px !important;
}

.sb-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sb-title {
	color: var(--fg, #1a1a1a);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box; /* 2行省略 */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sb-meta {
	font-size: 0.8rem;
	color: #888;
	line-height: 1.2;
}

/* viewsは空の時は非表示（おすすめ側） */
.sb-meta .views:empty {
	display: none;
}

/* ホバー */
.widget .sb-link:hover .sb-title {
	color: var(--link, #9f9b9b);
}

/* 余白調整（テーマに合わせて任意） */
.widget .widget-title {
	margin: 0;
}
.widget-ranking,
.widget-recommend {
	background: #fff;
}

/* ── お知らせ：サムネなし用上書き ───────────────── */
.widget-news-important.nothumb .sb-link {
	/* 画像列（56px）をやめて、テキスト1カラムに */
	grid-template-columns: 1fr;
	align-items: start;
	gap: 6px;
}

/* サムネ・プレースホルダーは非表示 */
.widget-news-important.nothumb .sb-thumb,
.widget-news-important.nothumb .sb-thumb.placeholder,
.widget-news-important.nothumb .wpp-thumbnail {
	display: none !important;
}

/* 本文ブロックの間隔を少し広げる */
.widget-news-important.nothumb .sb-body {
	gap: 4px;
}

/* タイトル少しだけ大きく＆行間整える */
.widget-news-important.nothumb .sb-title {
	font-size: 0.95rem;
	line-height: 1.5;
}

/* 日付ピル（任意：付けたい場合） */
.widget-news-important.nothumb .sb-date {
	font-size: 0.85rem;
	line-height: 1;
	padding: 4px 6px;
	white-space: nowrap;
	color: #555;
}

/* Pagination base */
.pgn {
	margin: 28px 0 0;
}
.pgn-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
	row-gap: 8px; /* 折返し時の上下間隔 */
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* 2段以上の折返しを許可 */
}
.pgn-item {
}

/* ボタン */
.pgn-link,
.pgn-list a.pgn-link {
	display: inline-flex;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	justify-content: center;
	align-items: center;
	border: 2px solid #fff; /* 枠の太さは固定、hover時は色だけ変える */
	border-radius: 8px;
	text-decoration: none;
	color: #06845c;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap; /* 数字が折り返される崩れを防止 */
	transition: border-color 0.2s ease, color 0.2s ease,
		background-color 0.2s ease;
}

/* hover */
.pgn-list a.pgn-link:hover {
	border-color: #06845c; /* 太さはそのまま、色だけ変更 */
	color: var(--link, #06845c);
}

/* 現在ページ */
.pgn-link.is-current {
	background: #06845c;
	color: #fff;
	border-color: #06845c;
}

/* 省略記号 */
.pgn-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	color: #9aa0a6;
}

/* 非活性（最初/最後ページの矢印）は“非表示” */
.pgn-link.is-disabled {
	display: none !important;
}

/* アクセシビリティ：キーボードフォーカス */
.pgn-link:focus-visible,
.pgn-list a.pgn-link:focus-visible {
	outline: 2px solid #06845c;
	outline-offset: 2px;
}

/* 既存ベースはそのまま */

/* --- 修正: ～480px は縮小（40px→34px） --- */
@media (max-width: 480px) {
	.pgn-list {
		gap: 4px;
		row-gap: 6px;
	}
	.pgn-link,
	.pgn-list a.pgn-link {
		min-width: 34px; /* 40→34 */
		height: 34px; /* 40→34 */
		padding: 0 8px;
		border-radius: 10px;
		font-size: 0.95rem;
		box-sizing: border-box; /* 幅計算を安定 */
		white-space: nowrap;
	}
	.pgn-ellipsis {
		min-width: 16px;
	}
}

/* --- 追加: ～420px（中間端末向け微縮） --- */
@media (max-width: 420px) {
	.pgn-list {
		gap: 3px;
		row-gap: 6px;
	}
	.pgn-link,
	.pgn-list a.pgn-link {
		min-width: 32px;
		height: 32px;
		padding: 0 6px;
		font-size: 0.9rem;
		border-radius: 8px;
	}
	.pgn-ellipsis {
		min-width: 14px;
	}
}

/* --- 追加: ～375px（iPhone系で崩れやすい幅） --- */
@media (max-width: 375px) {
	.pgn-list {
		gap: 2px;
		row-gap: 5px;
	}
	.pgn-link,
	.pgn-list a.pgn-link {
		min-width: 30px; /* さらに縮小 */
		height: 30px;
		padding: 0 6px;
		font-size: 0.88rem;
		border-width: 1px; /* 2px→1pxで横幅の余裕を確保 */
	}
	.pgn-ellipsis {
		min-width: 12px;
	}
}

/* --- 追加: ～340px（超狭幅の保険） --- */
@media (max-width: 340px) {
	.pgn-list {
		gap: 2px;
		row-gap: 4px;
	}
	.pgn-link,
	.pgn-list a.pgn-link {
		min-width: 28px;
		height: 28px;
		padding: 0 5px;
		font-size: 0.85rem;
		border-radius: 6px;
	}
	.pgn-ellipsis {
		min-width: 10px;
	}
}

/* 矢印の“非活性”が出力される場合は非表示（保険） */
.pgn-link.is-disabled {
	display: none !important;
}

/* はみ出し防止：幅は常に「パディング込み」で計算 */
.container-900 {
	max-width: 900px;
	width: 100%;
	margin-inline: auto;
	padding: clamp(16px, 4vw, 35px);
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box; /* ★ 重要：これでパディング込み計算に */
	overflow-wrap: break-word; /* 長い単語/URLを折り返す */
}

/* 中の画像/iframeが横幅を超えないように（予防） */
.container-900 img,
.container-900 iframe,
.container-900 video {
	max-width: 100%;
	height: auto;
}

/* 見出し行のモバイル最適化：折り返し＆余白調整 */
.contact-header {
	display: flex;
	align-items: baseline;
	padding: 0 0 10px;
	flex-wrap: wrap; /* 幅が狭いとき改行OKに */
}
/* 見出し行のモバイル最適化：折り返し＆余白調整 */
.contact-header {
	display: flex;
	align-items: baseline;
	padding: 0 0 10px;
	flex-wrap: wrap; /* 幅が狭いとき改行OKに */
}
.contact-header p {
	margin-left: 12px;
}
@media (max-width: 520px) {
	.contact-header {
		align-items: flex-start;
	}
	.contact-header p {
		margin-left: 0;
		margin-top: 6px;
	}
}

.page-contact-hero {
	border-bottom: 1px solid #b7b6b6;
	margin-bottom: 20px;
}

.page-contact-hero p {
	font-weight: bold;
	font-size: clamp(12px, 3.8vw, 19px);
}

.contact-header {
	display: flex;
	align-items: baseline; /* ← ベースライン揃え */
	padding: 0 0 10px;
}

.contact-header h1 {
	margin: 0 0 4px 0;
	font-size: clamp(25px, 4vw, 40px);
	color: #06845c;
}
.contact-header p {
	margin-left: 12px;
	color: #ffc247;
	font-size: clamp(16px, 1.8vw, 35px);
	font-weight: bold;
	margin-bottom: 0;
}

.page-contact-content label {
	font-size: 1rem;
	font-weight: bold;
}

#fluentform_1 {
	--ff-input-h: 48px;
	--ff-font: 16px;
}

:is(#fluentform_1, #fluentform_2) {
	--ff-input-h: 48px;
	--ff-font: 16px;
}

/* 項目名（会社名/メール等のラベル） */
:is(#fluentform_1, #fluentform_2) .ff-el-input--label label {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 6px;
	display: inline-block;
}

/* テキスト/メール/電話/URL/数値/セレクト 共通（高さ・文字サイズ） */
:is(#fluentform_1, #fluentform_2) .ff-el-group input[type="text"],
:is(#fluentform_1, #fluentform_2) .ff-el-group input[type="email"],
:is(#fluentform_1, #fluentform_2) .ff-el-group input[type="tel"],
:is(#fluentform_1, #fluentform_2) .ff-el-group input[type="url"],
:is(#fluentform_1, #fluentform_2) .ff-el-group input[type="number"],
:is(#fluentform_1, #fluentform_2) .ff-el-group select {
	font-size: var(--ff-font);
	height: var(--ff-input-h);
	padding: 0 14px;
	border-radius: 5px;
	border: 0;
	background: #f4f4f4;
}

/* テキストエリア（お問い合わせ内容） */
:is(#fluentform_1, #fluentform_2) .ff-el-group textarea {
	font-size: var(--ff-font);
	min-height: 180px;
	padding: 12px 14px;
	line-height: 1.7;
	border-radius: 5px;
	border: 0;
	resize: vertical;
	background: #f4f4f4;
}

/* ラジオ/チェックとテキスト（基本） */
:is(#fluentform_1, #fluentform_2) .ff-el-form-check-input {
	accent-color: #06845c;
}
:is(#fluentform_1, #fluentform_2) .ff-el-form-check-label span {
	font-size: 15px;
}

/* グループ間の余白 */
:is(#fluentform_1, #fluentform_2) .ff-el-group {
	margin-bottom: 35px;
}

/* エラー表示の見た目 */
:is(#fluentform_1, #fluentform_2) .ff-el-is-error .ff-el-form-control {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
:is(#fluentform_1, #fluentform_2) .error.text-danger {
	font-size: 0.9rem;
	margin-top: 6px;
}

/* 送信ボタン */
:is(#fluentform_1, #fluentform_2) .ff_submit_btn_wrapper .ff-btn-submit {
	font-size: 16px;
	font-weight: bold;
	padding: 12px 20px;
	min-width: 180px;
	border-radius: 999px;
	border: 2px solid #06845c;
	background: #06845c;
	color: #fff;
}
:is(#fluentform_1, #fluentform_2) .ff_submit_btn_wrapper .ff-btn-submit:hover {
	filter: brightness(0.95);
}

/* 氏名の2カラム */
:is(#fluentform_1, #fluentform_2) .ff-name-field-wrapper .ff-t-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 640px) {
	:is(#fluentform_1, #fluentform_2) .ff-name-field-wrapper .ff-t-container {
		grid-template-columns: 1fr;
	}
}

/* プレースホルダー色 */
:is(#fluentform_1, #fluentform_2) ::placeholder {
	color: #9aa3af;
}

/* --- ラジオをチップ化 & 横並び・折り返し（chip-radio を付けたフィールドだけ） --- */
:is(#fluentform_1, #fluentform_2) .chip-radio .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
:is(#fluentform_1, #fluentform_2) .chip-radio .ff-el-form-check,
:is(#fluentform_1, #fluentform_2) .chip-radio .ff-el-form-check-label {
	margin: 0;
}

:is(#fluentform_1, #fluentform_2) .chip-radio .ff-el-form-check-label {
	position: relative;
	display: inline-flex;
}
:is(#fluentform_1, #fluentform_2)
	.chip-radio
	.ff-el-form-check-input.ff-el-form-check-radio {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
:is(#fluentform_1, #fluentform_2)
	.chip-radio
	.ff-el-form-check-input.ff-el-form-check-radio
	+ span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	color: #111;
	transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
	white-space: nowrap;
	min-width: 84px;
}
:is(#fluentform_1, #fluentform_2)
	.chip-radio
	.ff-el-form-check-input.ff-el-form-check-radio:checked
	+ span {
	background: #06845c;
	color: #fff;
	border-color: #06845c;
	box-shadow: 0 0 0 4px rgba(6, 132, 92, 0.16);
}
:is(#fluentform_1, #fluentform_2)
	.chip-radio
	.ff-el-form-check-input.ff-el-form-check-radio:focus-visible
	+ span {
	box-shadow: 0 0 0 4px rgba(6, 132, 92, 0.25);
}

/* --- チェックボックスの完全カスタム --- */
:is(#fluentform_1, #fluentform_2) .ff-el-form-check-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 12px 10px 0;
	cursor: pointer;
}
:is(#fluentform_1, #fluentform_2)
	.ff-el-form-check-input.ff-el-form-check-checkbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
:is(#fluentform_1, #fluentform_2)
	.ff-el-form-check-input.ff-el-form-check-checkbox
	+ span {
	position: relative;
	padding-left: 28px;
	line-height: 22px;
}
/* 箱（□） */
:is(#fluentform_1, #fluentform_2)
	.ff-el-form-check-input.ff-el-form-check-checkbox
	+ span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid #e5e7eb;
	background: #fff;
	transition: all 0.2s;
}
/* チェック（✔） */
:is(#fluentform_1, #fluentform_2)
	.ff-el-form-check-input.ff-el-form-check-checkbox
	+ span::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 35%;
	transform: translateY(-45%) rotate(45deg);
	width: 6px;
	height: 12px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	opacity: 0;
	transition: opacity 0.15s;
}
/* 選択時 */
:is(#fluentform_1, #fluentform_2)
	.ff-el-form-check-input.ff-el-form-check-checkbox:checked
	+ span::before {
	background: #06845c;
	border-color: #06845c;
	box-shadow: 0 0 0 4px rgba(6, 132, 92, 0.16);
}
:is(#fluentform_1, #fluentform_2)
	.ff-el-form-check-input.ff-el-form-check-checkbox:checked
	+ span::after {
	opacity: 1;
}
/* フォーカスリング */
:is(#fluentform_1, #fluentform_2)
	.ff-el-form-check-input.ff-el-form-check-checkbox:focus-visible
	+ span::before {
	box-shadow: 0 0 0 4px rgba(6, 132, 92, 0.25);
}

/* =========================
   Fluent Forms #1/#2  Select の共通カスタム
   ========================= */
:is(#fluentform_1, #fluentform_2) select {
	/* ベース */
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: var(--ff-input-h);
	font-size: var(--ff-font);
	border-radius: 5px;
	border: 0;
	background: #f4f4f4;
	padding: 0 44px 0 14px; /* 右に矢印ぶんの余白 */
	color: #111;
	line-height: 1.2;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease, background 0.2s ease;

	/* ▼ カスタム矢印（SVG） */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2306845C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}
/* 旧Edge/IEの▼消し（対応環境なら不要） */
:is(#fluentform_1, #fluentform_2) select::-ms-expand {
	display: none;
}

/* フォーカスリング */
:is(#fluentform_1, #fluentform_2) select:focus {
	outline: none;
	box-shadow: 0 0 0 4px rgba(6, 132, 92, 0.2);
	background: #fff; /* フォーカス時は白に */
}

/* 無効状態 */
:is(#fluentform_1, #fluentform_2) select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* エラーと連動（あなたの既存ルールに合わせる） */
:is(#fluentform_1, #fluentform_2) .ff-el-is-error select {
	box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

/* プレースホルダー風（必須 & 先頭 option value="" の場合にグレー表示） */
:is(#fluentform_1, #fluentform_2) select:required:invalid {
	color: #9aa3af;
}
:is(#fluentform_1, #fluentform_2) select option {
	color: #111;
}
:is(#fluentform_1, #fluentform_2) select option[value=""][disabled] {
	color: #9aa3af;
}

/* 複数選択（multiple）や size>1 の場合は高さと内側余白を調整 */
:is(#fluentform_1, #fluentform_2) select[multiple],
:is(#fluentform_1, #fluentform_2) select[size]:not([size="1"]) {
	height: auto;
	min-height: calc(var(--ff-input-h) * 2);
	padding: 8px 12px;
	background-image: none; /* 矢印は非表示 */
}

/* コンパクト/ラージのサイズバリエ（必要なフィールドにクラスを付ける） */
:is(#fluentform_1, #fluentform_2) select.ff-select-sm {
	--ff-input-h: 40px;
	font-size: 15px;
}
:is(#fluentform_1, #fluentform_2) select.ff-select-lg {
	--ff-input-h: 56px;
	font-size: 17px;
}
/* =========================
   Fluent Forms (Choices.js) スタイル
   フォーム #1/#2 共通
   ========================= */

/* ベースボックス */
:is(#fluentform_1, #fluentform_2) .choices {
	font-size: var(--ff-font);
	position: relative;
}
:is(#fluentform_1, #fluentform_2) .choices__inner {
	min-height: var(--ff-input-h);
	border: 0;
	border-radius: 5px;
	background: #f4f4f4;
	padding: 0px 44px 0px 12px; /* 右は矢印分の余白 */
	display: flex;
	align-items: center;
	box-sizing: border-box;
	transition: box-shadow 0.2s, background 0.2s;
}

/* 単一選択の高さをピッタリに */
:is(#fluentform_1, #fluentform_2)
	.choices[data-type*="select-one"]
	.choices__inner {
	height: var(--ff-input-h);
	padding: 0 44px 0 12px;
}

/* フォーカス時（開閉/フォーカス共通） */
:is(#fluentform_1, #fluentform_2) .choices.is-focused .choices__inner,
:is(#fluentform_1, #fluentform_2) .choices.is-open .choices__inner {
	background: #fff;
	box-shadow: 0 0 0 4px rgba(6, 132, 92, 0.2);
}

/* ▼デフォ矢印をカスタム（Choicesの ::after を上書き） */
:is(#fluentform_1, #fluentform_2) .choices[data-type*="select-one"]::after {
	content: "";
	border: none; /* 既定の三角を消す */
	width: 18px;
	height: 18px;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2306845C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	pointer-events: none;
}

/* プレースホルダー色 */
:is(#fluentform_1, #fluentform_2) .choices__placeholder {
	color: #9aa3af;
	opacity: 1;
}

/* ドロップダウン（リスト） */
:is(#fluentform_1, #fluentform_2) .choices__list--dropdown {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
/* 内側のスクロール（inline styleに勝つため !important 付与） */
:is(#fluentform_1, #fluentform_2) .choices__list--dropdown,
:is(#fluentform_1, #fluentform_2) .choices__list--dropdown .choices__list {
	max-height: 40vh !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
:is(#fluentform_1, #fluentform_2) .choices__list--dropdown .choices__item {
	padding: 10px 12px;
}
:is(#fluentform_1, #fluentform_2)
	.choices__list--dropdown
	.choices__item--selectable.is-highlighted {
	background: #f1f5f9;
	color: #111;
}

/* 複数選択の“タグ（チップ）” */
:is(#fluentform_1, #fluentform_2) .choices__list--multiple {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
:is(#fluentform_1, #fluentform_2) .choices__list--multiple .choices__item {
	background: #06845c;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 6px 10px;
}
:is(#fluentform_1, #fluentform_2)
	.choices__list--multiple
	.choices__item.is-highlighted {
	filter: brightness(0.95);
}
/* 削除ボタン（×）を白っぽく */
:is(#fluentform_1, #fluentform_2)
	.choices__list--multiple
	.choices__item
	.choices__button {
	filter: invert(1);
	opacity: 0.9;
}

/* 検索入力（ドロップダウン上部に出るやつ） */
:is(#fluentform_1, #fluentform_2) .choices__input--cloned {
	border: 0;
	outline: none;
	padding: 8px 12px;
	margin: 0px 12px;
	border-radius: 8px;
	/* background: #f4f4f4; */
}

/* 無効状態 */
:is(#fluentform_1, #fluentform_2) .choices.is-disabled .choices__inner {
	opacity: 0.6;
	cursor: not-allowed;
}

:is(#fluentform_1, #fluentform_2) .ff-el-form-check {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
:is(#fluentform_1, #fluentform_2) .ff-el-help-text {
	margin: 0;
	display: inline;
}
:is(#fluentform_1, #fluentform_2) .ff-el-help-text a {
	color: #06845c;
	text-decoration: underline;
}
/* 「プライバシーポリシー」を含むチェックのリンクだけ */
:is(#fluentform_1, #fluentform_2)
	input.ff-el-form-check-input.ff-el-form-check-checkbox[value*="プライバシーポリシー"]
	+ span
	a {
	color: #06845c;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* =========================
   プライバシーポリシー スタイル
   ========================= */
.pp-page-header {
	border-bottom: 1px solid #a4a4a4;
	padding: 0;
	margin-bottom: 20px;
}
.pp-page-header h1 {
	margin-bottom: 10px;
}
.pp-page-meta {
	margin-bottom: 10px;
	font-weight: 400 !important;
	font-size: clamp(12px, 3.8vw, 17px) !important;
}
.policy-body h2 {
	font-size: 1.4rem;
}

.policy-body h2,
.policy-body p {
	margin-bottom: 20px;
}

.policy-body address {
	margin-bottom: 20px;
}

.policy-body address a {
	color: #2d2d2d;
}