/* ==========================================================================
   base.css … 色・文字・余白の基本設定
   色を変えるときは :root の変数だけを編集してください。
   ========================================================================== */

:root {
	--c-main: #008cd4;        /* メインカラー（青） */
	--c-main-dark: #0068a3;
	--c-main-soft: #e8f5fc;   /* セクション背景（青） */
	--c-gray-soft: #f1f4f7;   /* セクション背景（グレー） */
	--c-accent: #ffe100;      /* 強調（黄） */
	--c-price: #f7881b;       /* 料金（オレンジ） */
	--c-ink: #1f2933;         /* 本文 */
	--c-muted: #5b6672;
	--c-border: #dfe6ec;
	--c-bg: #ffffff;
	--c-dark: #16324a;

	--radius: 14px;
	--radius-sm: 8px;
	--shadow: 0 6px 20px rgba(16, 50, 74, .08);

	--w-content: 1080px;
	--gutter: 16px;
	--section-top: 40px;      /* セクション上の余白 */
	--section-bottom: 48px;   /* セクション下の余白 */

	--font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

@media (min-width: 768px) {
	:root {
		--gutter: 24px;
		--section-top: 64px;
		--section-bottom: 72px;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.lp {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
	line-break: strict;       /* 小さい「ッ」や句読点が行頭に来ないように */
	padding-bottom: 84px;     /* 画面下の固定ボタンと重ならないように */
}

@media (min-width: 768px) {
	body.lp {
		padding-bottom: 0;
	}
}

/* :where() で優先度を0にし、各部品のスタイルが必ず勝つようにする */
:where(.lp) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) {
	margin: 0;
	padding: 0;
}

:where(.lp) :where(ul, ol) {
	list-style: none;
}

.lp img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

:where(.lp) a {
	color: inherit;
	text-decoration: none;
}

.lp table {
	border-collapse: collapse;
	width: 100%;
}

.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- 改行の調整 -------------------------------------------------------- */
/* lp_e( 'A|B' ) で区切った文節。文節の途中では改行しない */
.ph {
	display: inline-block;
}

:where(.lp) :where(h1, h2, h3, summary, .cta-block__lead) {
	text-wrap: balance;
	word-break: auto-phrase;
}

:where(.lp) :where(p, li, dd) {
	text-wrap: pretty;
}

/* 数字＋単位は分けない */
.btn-tel__num,
.pack__price,
.case__total,
.sticky-cta__text strong {
	white-space: nowrap;
}