@charset "UTF-8";
/* =========================================================================
   下層ページ共通レイアウト・部品
   PC：左サイド(315px)に追従目次、右に白い本文パネル
   SP：タイトル帯の下に目次、本文は左右20px
   ========================================================================= */

body { background: var(--gray-page); }

.l-lower {
	display: grid;
	grid-template-columns: 315px minmax(0, 1fr);
	grid-template-areas:
		"head head"
		"side content";
	column-gap: 34px;
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 35px;
}
.l-lower__head {
	grid-area: head;
	padding: 68px 0 45px;
}
.l-lower__title {
	font-weight: 700;
	font-size: 48px;
	line-height: 1.2;
	color: var(--navy);
}
.l-lower__side { grid-area: side; padding-top: 1px; }
.l-lower__content {
	grid-area: content;
	position: relative;
	min-width: 0;
	padding: 41px 36px 56px;
	background: #fff;
}
/* 本文パネルの白をビューポート右端まで伸ばす */
.l-lower__content::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 100%;
	width: 50vw;
	background: #fff;
}
.l-lower__inner { max-width: 825px; }

/* ---------- ページ内目次 ---------- */
.p-toc {
	position: sticky;
	top: calc(var(--header-h) + 20px);
}
.p-toc__link {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 80px;
	padding: 12px 11px 12px 35.7px;
	border-left: 5px solid var(--gray-line);
	background: #fff;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: var(--ink);
	transition: background-color .3s, border-color .3s;
}
.p-toc__link:hover { background: var(--orange-soft); }
.p-toc__link.is-current {
	border-left-color: var(--orange);
	background: var(--orange-soft);
}
.p-toc__arrow { display: none; }

/* ---------- 見出し ---------- */
/* 大見出し：オレンジ下線 */
.c-h2 {
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 11px;
	border-bottom: 2px solid var(--orange);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.45;
	color: var(--navy);
}
/* 小見出し：左ライン */
.c-h3 {
	position: relative;
	margin-bottom: 24px;
	padding-left: 18px;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.45;
	color: var(--navy);
}
.c-h3::before {
	content: "";
	position: absolute;
	left: 0; top: .1em; bottom: .1em;
	width: 5.4px;
	background: var(--orange);
}
.c-h4 {
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.5;
	color: var(--navy);
}

/* ---------- セクション ---------- */
.c-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.c-section + .c-section { margin-top: 132px; }
.c-sub { scroll-margin-top: calc(var(--header-h) + 24px); }
.c-sub + .c-sub, * + .c-sub { margin-top: 45px; }

/* ---------- 本文 ---------- */
.c-text {
	font-size: 20px;
	line-height: 28px;
	text-align: justify;
	color: var(--navy);
}
.c-text > * + * { margin-top: 28px; }
.c-text strong, .c-text b { font-weight: 700; }
* + .c-text { margin-top: 28px; }
.c-h2 + .c-text, .c-h3 + .c-text, .c-h4 + .c-text { margin-top: 0; }
.c-note { font-size: 16px; line-height: 1.6; }

/* ---------- ボックス ---------- */
.c-box {
	padding: 22px 30px;
	border-radius: 10px;
	background: var(--gray-bg);
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--navy);
	text-align: justify;
}
.c-box > * + * { margin-top: 1em; }
.c-box--lead { padding: 15px 33px 15px 31px; font-weight: 900; font-size: 24px; line-height: 36px; }
.c-box--orange { background: var(--orange-soft); }
.c-box--line { border: 1px solid var(--navy); background: #fff; }
* + .c-box, .c-box + * { margin-top: 40px; }

/* ラベル付きボックス（例：飲み薬／DBS 比較） */
.c-label {
	display: inline-block;
	min-width: 177px;
	padding: 2px 30px;
	border: 1px solid var(--navy);
	border-radius: 100px;
	background: #fff;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
	color: var(--navy);
}
.c-label--navy { background: var(--navy); color: #fff; }

/* ---------- カード ---------- */
.c-cards {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	gap: var(--gap, 20px);
}
.c-cards--3 { --cols: 3; }
.c-card {
	padding: 20px 24px;
	border-radius: 12px;
	background: var(--gray-bg);
	color: var(--navy);
}
.c-card__title { font-weight: 700; font-size: 24px; line-height: 1.5; }
.c-card__text { margin-top: 10px; font-size: 16px; line-height: 22px; text-align: justify; }
* + .c-cards, .c-cards + * { margin-top: 40px; }

/* ---------- 図・画像 ---------- */
.c-figure { margin-inline: auto; }
.c-figure img { width: 100%; height: auto; }
.c-figure figcaption { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink); }
* + .c-figure, .c-figure + * { margin-top: 40px; }

/* ---------- リスト ---------- */
.c-list > li { position: relative; padding-left: 1em; }
.c-list > li::before { content: "・"; position: absolute; left: 0; }
.c-list > li + li { margin-top: .4em; }

/* ---------- 年表（略歴） ---------- */
.c-history { border-top: 0; }
.c-history__row {
	display: grid;
	grid-template-columns: 143px 1fr;
	align-items: center;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--gray-line);
	color: var(--navy);
}
.c-history__year {
	font-family: var(--ff-num);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
}
.c-history__text { font-size: 20px; line-height: 28px; }
.c-history__row + .c-history__row { margin-top: 11px; }

/* ---------- 表 ---------- */
.c-table-wrap { overflow-x: auto; }
.c-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 18px;
	line-height: 1.6;
	color: var(--navy);
}
.c-table th, .c-table td {
	padding: 14px 18px;
	border: 1px solid var(--gray-line);
	vertical-align: top;
	text-align: left;
}
.c-table th { background: var(--gray-bg); font-weight: 700; }
* + .c-table-wrap, .c-table-wrap + * { margin-top: 40px; }

/* ---------- ボタン ---------- */
.c-btn--sm { --btn-w: 276px; --btn-fz: 15px; --btn-arrow-r: 22px; --btn-arrow-w: 10px; min-height: 56px; padding: 8px 46px; }
* + .c-btn, .c-btn + * { margin-top: 40px; }

/* ---------- 下層の表示アニメーション：本文のふわっと表示はなし（依頼書） ---------- */

/* =========================================================================
   SP
   ========================================================================= */
@media (max-width: 1199px) and (min-width: 960px) {
	.l-lower { grid-template-columns: 260px minmax(0, 1fr); column-gap: 24px; padding-left: 20px; }
	.p-toc__link { padding-left: 24px; font-size: 18px; }
}

@media (max-width: 959px) {
	body { background: #fff; }
	.l-lower {
		display: block;
		max-width: none;
		padding: 0;
	}
	.l-lower__head {
		padding: 17px 20px 0;
		background: var(--gray-sp);
	}
	.l-lower__title {
		max-width: 362px;
		margin: 0 auto;
		font-size: 32px;
		line-height: 46px;
	}
	.l-lower__side {
		padding: 11px 20px 23px;
		background: var(--gray-sp);
	}
	.l-lower__side:empty, .l-lower__side:not(:has(.p-toc)) { padding: 0 0 23px; }
	.p-toc { position: static; max-width: 362px; margin: 0 auto; }
	.p-toc__list { border-top: 1px solid var(--gray-line); }
	.p-toc__link {
		min-height: 45px;
		padding: 9px 54px 9px 35px;
		border-left: 0;
		border-bottom: 1px solid var(--gray-line);
		font-size: 16px;
		line-height: 1.5;
	}
	.p-toc__link:hover, .p-toc__link.is-current { background: #fff; }
	.p-toc__link:active { transform: scale(.98); filter: brightness(.95); transition: transform .15s ease-out, filter .15s ease-out; }
	.p-toc__arrow {
		position: absolute;
		right: 27px; top: 50%;
		display: grid;
		place-items: center;
		width: 28.5px; height: 29px;
		margin-top: -14.5px;
		border-radius: 50%;
		background: var(--accent);
		color: #fff;
	}
	.p-toc__arrow svg { width: 20px; height: 20px; transform: rotate(90deg); }

	.l-lower__content {
		padding: 20px 20px 28px;
	}
	.l-lower__content::after { content: none; }
	.l-lower__inner { max-width: 362px; margin: 0 auto; }

	.c-h2 { margin-bottom: 15px; padding-bottom: 8px; font-size: 24px; line-height: 1.2; }
	.c-h3 { margin-bottom: 15px; padding-left: 15px; font-size: 24px; line-height: 1.25; }
	.c-h3::before { top: 2px; bottom: 2px; width: 5px; }
	.c-h4 { font-size: 20px; }
	.c-section + .c-section { margin-top: 72px; }
	* + .c-sub, .c-sub + .c-sub { margin-top: 40px; }

	.c-text { font-size: 16px; line-height: 30px; }
	.c-text > * + *, * + .c-text { margin-top: 30px; }
	.c-h2 + .c-text, .c-h3 + .c-text, .c-h4 + .c-text { margin-top: 0; }

	.c-box { padding: 17px 15px; font-size: 16px; line-height: 30px; }
	.c-box--lead { font-weight: 700; font-size: 16px; line-height: 30px; }
	* + .c-box, .c-box + * { margin-top: 30px; }

	.c-cards { --cols: 1 !important; --gap: 16px; }
	.c-card { padding: 18px 20px; }
	.c-card__title { font-size: 20px; }
	* + .c-cards, .c-cards + * { margin-top: 30px; }

	.c-history__row { grid-template-columns: 62px 1fr; gap: 9px; align-items: start; padding: 12px 0; }
	.c-history__row + .c-history__row { margin-top: 0; }
	.c-history__year { font-size: 24px; line-height: 1.25; }
	.c-history__text { font-size: 16px; line-height: 24px; }

	.c-table { font-size: 15px; }
	.c-table th, .c-table td { padding: 10px 12px; }

	.c-btn--sm { --btn-w: 317px; }
	* + .c-figure, .c-figure + *, * + .c-table-wrap, .c-table-wrap + *, * + .c-btn, .c-btn + * { margin-top: 30px; }
}