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

:root {
	--c-main: #d7261e;        /* メインカラー（赤） */
	--c-main-dark: #a91c15;
	--c-accent: #ffd60a;      /* 強調（黄） */
	--c-ink: #1f1f24;         /* 本文 */
	--c-muted: #5d6270;
	--c-border: #e8e6e3;
	--c-bg: #ffffff;
	--c-bg-soft: #fff7f2;     /* セクション背景 */
	--c-bg-dark: #1f1f24;

	--radius: 14px;
	--radius-sm: 8px;
	--shadow: 0 6px 20px rgba(31, 31, 36, .08);

	--w-content: 1080px;
	--gutter: 16px;
	--section-top: 36px;      /* セクション上の余白 */
	--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: 56px;
		--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;
	/* 画面下の固定ボタンと重ならないように */
	padding-bottom: 76px;
}

@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;
}

/* 改行の出し分け */
.sp { display: inline; }
.pc { display: none; }

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

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

/* 見出し・リードは行の長さを揃え、対応ブラウザでは文節で改行 */
:where(.lp) :where(h1, h2, h3, summary, .cta-block__lead, .worries__answer-lead) {
	text-wrap: balance;
	word-break: auto-phrase;
}

/* 本文は最後の行が1〜2文字だけにならないように */
:where(.lp) :where(p, li, dd) {
	text-wrap: pretty;
}

/* 数字＋単位（4,500円〜 など）は分けない */
.pack__now,
.case__price,
.hero__price,
.btn-tel__num,
.sticky-cta__text strong {
	white-space: nowrap;
}

/* 小さい「ッ」「ょ」などや句読点が行頭に来ないようにする（禁則処理） */
body.lp {
	line-break: strict;
}