@charset "UTF-8";
/* パーキンソン病とは */

/* ---------- 共通の間隔 ---------- */
.c-section + .c-section.p-pd-sec { margin-top: 100px; }
.c-section + .c-section#symptoms { margin-top: 45px; }
.p-pd .c-h2 + .c-text { margin-top: 20px; }
.p-pd .c-sub > .c-h3 { margin-bottom: 0; }
.p-pd .c-sub > .c-h3 + * { margin-top: 19px; }

/* =========================================================================
   治療の歴史（年号付きの縦タイムライン）
   ========================================================================= */
.p-pd-history { margin-top: 31px; }
.p-pd-history__item {
	position: relative;
	padding: 4px 0 0 164.5px;
}
.p-pd-history__item + .p-pd-history__item { margin-top: 22px; }
/* 次の項目の丸まで縦線を引く */
.p-pd-history__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 131.5px; top: 25px; bottom: -47px;
	width: 1px;
	background: rgba(0, 0, 0, .5);
}
.p-pd-history__year {
	position: absolute;
	left: 0; top: 0;
	width: 97px;
	text-align: right;
	color: var(--navy);
}
.p-pd-history__num {
	display: block;
	font-family: var(--ff-num);
	font-weight: 700;
	font-size: 40px;
	line-height: 42px;
	letter-spacing: -.02em;
}
.p-pd-history__unit {
	display: block;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
}
.p-pd-history__item:nth-child(4) .p-pd-history__unit { margin-right: -19.6px; }
.p-pd-history__dot {
	position: absolute;
	left: 116.5px; top: 10px;
	width: 30px; height: 30px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background: #fff;
}
.p-pd-history__dot::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--accent);
}
.p-pd-history__card {
	padding: 21px 22px 20px;
	border-radius: 10px;
	background: #f4f5f9;
	color: var(--navy);
}
.p-pd-history__label {
	width: 195px;
	padding: 3.5px 10px;
	border-radius: 100px;
	background: var(--navy);
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	color: #fff;
}
.p-pd-history__title {
	margin-top: 15px;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
}
.p-pd-history__text {
	margin-top: 15px;
	font-size: 20px;
	line-height: 30px;
	text-align: justify;
}

/* =========================================================================
   脳で何が起こっているのか
   ========================================================================= */
.p-pd .p-pd-brain__lead { margin-top: 34px; }
.p-pd-brain {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 29px;
	margin-top: 37px;
}
.p-pd-brain__card {
	padding: 28px 22px 36px;
	border-radius: 10px;
	background: var(--gray-bg);
	color: var(--navy);
}
.p-pd-brain__card--pd { background: var(--orange-soft); }
.p-pd-brain__label {
	margin: 0 16.4px;
	padding: 3.5px 10px;
	border-radius: 100px;
	background: var(--navy);
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	color: #fff;
}
.p-pd-brain__card--pd .p-pd-brain__label { background: var(--accent); }
.p-pd-brain__img { width: 338px; margin: 11px 0 0 8px; }
.p-pd-brain__catch {
	margin-top: 11px;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}
.p-pd-brain__text {
	margin-top: 33px;
	font-size: 20px;
	line-height: 28px;
	text-align: justify;
}
.p-pd-brain__note {
	margin-top: 14px;
	font-size: 14px;
	line-height: 28px;
	text-align: right;
	color: var(--navy);
}

/* =========================================================================
   症状
   ========================================================================= */
.c-sub.p-pd-sub { margin-top: 50px; }
.c-sub.p-pd-sub--nonmotor { margin-top: 45px; }
.p-pd .p-pd-sub > .c-h3 + .c-text { margin-top: 15px; }
.p-pd .p-pd-sub--nonmotor > .c-h3 + .c-text { margin-top: 29px; }
.p-pd .p-pd-sym-text { margin-top: 24px; }

/* 主な運動症状：説明付きカード（PC 2列） */
.p-pd-motor {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 27px;
	margin-top: 20px;
}
.p-pd-motor__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 403px;
	padding: 24px 18.5px 18px;
	background: var(--gray-page);
	color: var(--navy);
}
.p-pd-motor__title,
.p-pd-motor__kana { position: relative; z-index: 1; margin-left: 16.3px; }
.p-pd-motor__title { font-weight: 700; font-size: 24px; line-height: 35px; }
.p-pd-motor__kana { margin-top: 7px; font-weight: 500; font-size: 15px; line-height: 1.45; }
.p-pd-motor__img {
	position: absolute;
	object-fit: cover;
}
.p-pd-motor__text {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: 12px;
	font-size: 20px;
	line-height: 28px;
	text-align: justify;
}
.p-pd-motor__item--bradykinesia .p-pd-motor__img { left: 195px; top: 19px; width: 166px; height: 187px; }
.p-pd-motor__item--tremor .p-pd-motor__img { left: 128.6px; top: 8.6px; width: 260px; height: 260px; }
.p-pd-motor__item--rigidity .p-pd-motor__img { left: 163.6px; top: 19.5px; width: 216px; height: 216px; }
.p-pd-motor__item--postural .p-pd-motor__img { left: 161.6px; top: 6.4px; width: 223px; height: 223px; }
.p-pd-motor__item--tremor .p-pd-motor__text { padding-bottom: 4px; }

/* イラスト＋名前のカード（PC 3列／2列） */
.p-pd-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 21px 28.3px;
	margin-top: 42px;
}
.p-pd-cards--nonmotor { margin-top: 70px; }
.p-pd-cards--nonmotor2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 21px; }
.p-pd-card {
	position: relative;
	height: 224px;
	padding-top: 176px;
	background: var(--gray-bg);
	color: var(--navy);
}
.p-pd-cards--nonmotor .p-pd-card,
.p-pd-cards--nonmotor2 .p-pd-card { background: var(--orange-soft); }
.p-pd-card__title {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: 24px;
	line-height: 35px;
	text-align: center;
}
.p-pd-card__img { position: absolute; }
.p-pd-card--short-steps .p-pd-card__img { left: 17.2px; top: -3.9px; width: 190px; }
.p-pd-card--freezing .p-pd-card__img { left: 36.6px; top: 5.2px; width: 184px; }
.p-pd-card--festination .p-pd-card__img { left: 40.8px; top: 5.4px; width: 174px; }
.p-pd-card--mask-face .p-pd-card__img { left: 40.5px; top: 10.6px; width: 163px; }
.p-pd-card--hypophonia .p-pd-card__img { left: 29.8px; top: 17.9px; width: 222px; }
.p-pd-card--micrographia .p-pd-card__img { left: 39.7px; top: 33.6px; width: 176px; }
.p-pd-card--autonomic .p-pd-card__img { left: 48.9px; top: 11.8px; width: 146px; }
.p-pd-card--smell .p-pd-card__img { left: 62.7px; top: 11.9px; width: 132px; }
.p-pd-card--sleep .p-pd-card__img { left: 30.3px; top: 2.3px; width: 194px; }
.p-pd-card--mood .p-pd-card__img { left: 127.3px; top: 22.9px; width: 150px; }
.p-pd-card--cognition .p-pd-card__img { left: 111.5px; top: 8.7px; width: 175px; }

/* =========================================================================
   診断
   ========================================================================= */
.p-pd .p-pd-diag-box { margin-top: 22px; padding: 27px 22px 26px 25px; }
.p-pd .p-pd-diag-after { margin-top: 22px; }

/* =========================================================================
   薬物療法と長期治療の問題点
   ========================================================================= */
.p-pd-treat__h2 { font-size: 31px; }
.p-pd .c-h2.p-pd-treat__h2 { padding-bottom: 14px; }
.c-sub.p-pd-treat { margin-top: 45px; }
.c-sub.p-pd-treat--honeymoon { margin-top: 48px; }
.p-pd-treat__h3--last { font-size: 30px; }

/* 文章＋右にグラフ画像 */
.p-pd-media {
	display: grid;
	grid-template-columns: 440px 360px;
	justify-content: space-between;
	align-items: start;
}
.p-pd-media__img { grid-column: 2; grid-row: 1; width: 360px; }
.p-pd-media__body { grid-column: 1; grid-row: 1; }
.p-pd .p-pd-media__body,
.p-pd .p-pd-media__body > .c-text { margin-top: 0; }
.p-pd-treat--honeymoon .p-pd-media__img { margin-top: -53px; }
.p-pd-treat--wearing .p-pd-media__img { margin-top: -73px; margin-right: -3px; }
.p-pd-treat--dyskinesia .p-pd-media__img { margin-top: 9px; }
.p-pd .p-pd-wearing-box {
	width: 442px;
	margin-top: 24px;
	padding: 20px 20px 22px 18.3px;
}
.p-pd .p-pd-wearing-after { margin-top: 0; }

/* オン／オフ */
.p-pd-onoff {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 33px;
	margin-top: 24px;
}
.p-pd-onoff__box {
	min-height: 143px;
	padding: 14px 24px 20px 19px;
	border-radius: 10px;
	background: var(--gray-bg);
	color: var(--navy);
}
.p-pd-onoff__label.c-label {
	display: block;
	width: 217px;
	padding: 2px 10px;
	font-size: 20px;
	line-height: 31px;
}
.p-pd-onoff__text {
	margin-top: 14px;
	padding-left: 9px;
	font-size: 20px;
	line-height: 30px;
	text-align: justify;
}
.p-pd-onoff__box + .p-pd-onoff__box .p-pd-onoff__text { padding-left: 5px; }
.p-pd .p-pd-onoff-after { margin-top: 24px; }

.p-pd .p-pd-adjust-box {
	margin-top: 28px;
	padding: 23px 36px 22px 34.4px;
}

/* =========================================================================
   SP
   ========================================================================= */
@media (max-width: 959px) {
	.c-section + .c-section.p-pd-sec,
	.c-section + .c-section#symptoms { margin-top: 50px; }
	.p-pd .c-h2 + .c-text { margin-top: 15px; }
	.p-pd .c-sub > .c-h3 + *,
	.p-pd .p-pd-sub > .c-h3 + .c-text,
	.p-pd .p-pd-sub--nonmotor > .c-h3 + .c-text { margin-top: 15px; }

	/* 治療の歴史 */
	.p-pd-history { margin-top: 20px; }
	.p-pd-history__item { padding: 0 0 0 32px; }
	.p-pd-history__item + .p-pd-history__item { margin-top: 20px; }
	.p-pd-history__item:not(:last-child)::before { left: 11px; top: 14.5px; bottom: -34.5px; }
	.p-pd-history__year {
		position: static;
		display: flex;
		align-items: flex-end;
		gap: 2px;
		width: auto;
		text-align: left;
	}
	.p-pd-history__num { font-size: 24px; line-height: 28px; letter-spacing: -.06em; }
	.p-pd-history__unit { margin-bottom: 3px; font-size: 14px; line-height: 17px; }
	.p-pd-history__item:nth-child(4) .p-pd-history__unit { margin-right: 0; }
	.p-pd-history__dot { left: 0; top: 3px; width: 23px; height: 23px; }
	.p-pd-history__dot::after { inset: 1.5px; }
	.p-pd-history__card { margin-top: 15px; padding: 14px 14px 14px; background: var(--gray-bg); }
	.p-pd-history__label { width: 166px; padding: 3.5px 8px; }
	.p-pd-history__title { margin-top: 14px; font-size: 20px; }
	.p-pd-history__text { margin-top: 14px; font-size: 16px; }

	/* 脳 */
	.p-pd .p-pd-brain__lead { margin-top: 18px; }
	.p-pd-brain { grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
	.p-pd-brain__card { padding: 28px 16px 18px; }
	.p-pd-brain__card--pd { padding-bottom: 15px; }
	.p-pd-brain__label { margin: 0 20px; }
	.p-pd-brain__img { width: 330px; margin: 11px 0 0; }
	.p-pd-brain__catch { margin-top: 18px; }
	.p-pd-brain__text { margin-top: 20px; font-size: 16px; line-height: 30px; }
	.p-pd-brain__note { margin-top: 6px; }

	/* 症状 */
	.c-sub.p-pd-sub { margin-top: 15px; }
	.c-sub.p-pd-sub--nonmotor { margin-top: 30px; }
	.p-pd .p-pd-sym-text { margin-top: 20px; }

	.p-pd-motor { grid-template-columns: 1fr; gap: 20px; margin-top: 15px; }
	.p-pd-motor__item {
		display: grid;
		grid-template-columns: 142px 180px;
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"title text"
			"kana text"
			"img text";
		justify-content: space-between;
		min-height: 0;
		padding: 20px 18px 20px 16px;
		border-radius: 10px;
	}
	.p-pd-motor__title,
	.p-pd-motor__kana { margin-left: 0; text-align: center; }
	.p-pd-motor__title { grid-area: title; font-size: 20px; line-height: 24px; }
	.p-pd-motor__kana { grid-area: kana; margin-top: 10px; font-size: 15px; line-height: 18px; }
	.p-pd-motor__img {
		grid-area: img;
		position: static;
		justify-self: center;
		margin-top: 10px;
	}
	.p-pd-motor__text { grid-area: text; margin: 0; padding: 0; font-size: 16px; line-height: 30px; }
	.p-pd-motor__item--tremor .p-pd-motor__text { padding-bottom: 0; }
	.p-pd-motor__item--bradykinesia .p-pd-motor__img { width: 123px; height: 138px; margin-top: 29px; }
	.p-pd-motor__item--tremor .p-pd-motor__img { width: 142px; height: 142px; }
	.p-pd-motor__item--rigidity .p-pd-motor__img { width: 118px; height: 118px; }
	.p-pd-motor__item--postural .p-pd-motor__title { white-space: nowrap; }
	.p-pd-motor__item--postural .p-pd-motor__kana { font-size: 13px; line-height: 16px; }
	.p-pd-motor__item--postural .p-pd-motor__img { width: 140px; height: 141px; margin-top: 30px; }

	.p-pd-cards { gap: 15px 14px; margin-top: 20px; }
	.p-pd-cards--nonmotor { margin-top: 20px; }
	.p-pd-cards--nonmotor2 { margin-top: 15px; }
	.p-pd-card,
	.p-pd-cards--nonmotor .p-pd-card,
	.p-pd-cards--nonmotor2 .p-pd-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: auto;
		padding: 20px 10px;
		border-radius: 10px;
		background: var(--gray-page);
	}
	.p-pd-card__title { font-size: 16px; line-height: 24px; white-space: nowrap; }
	.p-pd-card__img { position: static; flex: none; max-width: none; margin-top: 10px; }
	.p-pd-card--short-steps .p-pd-card__img { width: 140px; }
	.p-pd-card--freezing .p-pd-card__img { width: 145px; }
	.p-pd-card--festination .p-pd-card__img { width: 139px; }
	.p-pd-cards--face .p-pd-card { padding: 18px 10px; }
	.p-pd-card--mask-face .p-pd-card__img { width: 79px; margin-top: 20px; }
	.p-pd-card--hypophonia .p-pd-card__img { width: 98px; margin-top: 28px; }
	.p-pd-card--micrographia .p-pd-card__img { width: 91px; margin-top: 30px; }
	.p-pd-card--autonomic { padding-top: 18px; }
	.p-pd-card--autonomic .p-pd-card__img { width: 79px; margin-top: 20px; }
	.p-pd-card--smell .p-pd-card__img { width: 71px; margin-top: 15px; }
	.p-pd-card--sleep .p-pd-card__img { width: 91px; margin-top: 13px; }
	.p-pd-cards--nonmotor2 .p-pd-card { padding: 18px 10px; }
	.p-pd-card--mood .p-pd-card__title { line-height: 19px; }
	.p-pd-card--mood .p-pd-card__img { width: 82px; margin-top: 12px; }
	.p-pd-card--cognition .p-pd-card__title { line-height: 19px; }
	.p-pd-card--cognition .p-pd-card__img { width: 100px; margin-top: 20px; }

	/* 診断 */
	.p-pd .p-pd-diag-box { margin-top: 30px; padding: 15px; }
	.p-pd .p-pd-diag-after { margin-top: 30px; }

	/* 薬物療法 */
	.p-pd-treat__h2 { font-size: 24px; }
	.p-pd .c-h2.p-pd-treat__h2 { padding-bottom: 13px; }
	.c-sub.p-pd-treat,
	.c-sub.p-pd-treat--honeymoon { margin-top: 30px; }
	.p-pd .p-pd-treat__h3 {
		padding-left: 16px;
		font-size: 18px;
		line-height: 26px;
	}
	.p-pd-treat__h3::before { top: 0; bottom: 0; }
	/* 4つとも「説明＋改行＋用語」の2行にそろえる */
	.p-pd .p-pd-treat__h3--last { line-height: 22px; }
	/* SPでは大見出しと同じ下線スタイル（デザインどおり） */
	.c-sub.p-pd-treat--adjust { margin-top: 50px; }

	.p-pd-media { display: block; }
	.p-pd-media__img,
	.p-pd-treat--honeymoon .p-pd-media__img,
	.p-pd-treat--wearing .p-pd-media__img,
	.p-pd-treat--dyskinesia .p-pd-media__img {
		width: 354px;
		margin: 0;
		object-fit: cover;
	}
	.p-pd-treat--honeymoon .p-pd-media__img { height: 250px; object-position: 50% 77%; }
	.p-pd-treat--wearing .p-pd-media__img { width: 353px; height: 259px; margin-left: 3px; object-position: 50% 69%; }
	.p-pd-treat--dyskinesia .p-pd-media__img { height: 301px; margin-left: 3px; object-position: 50% 49%; }
	.p-pd .p-pd-treat--honeymoon > .p-pd-media,
	.p-pd .p-pd-treat--wearing > .p-pd-media { margin-top: 17px; }
	.p-pd .p-pd-treat--dyskinesia > .p-pd-media { margin-top: 13px; }
	.p-pd .p-pd-media__body { margin-top: 20px; }
	.p-pd-treat--wearing .p-pd-media__body { margin-top: 17px; }
	.p-pd-treat--dyskinesia .p-pd-media__body { margin-top: 32px; }
	.p-pd .p-pd-wearing-box { width: auto; margin-top: 22px; padding: 16px 15px 15px; }
	.p-pd .p-pd-wearing-after { margin-top: 25px; }

	.p-pd-onoff { grid-template-columns: 1fr; gap: 15px; margin-top: 15px; }
	.p-pd-onoff__box { min-height: 136px; padding: 28px 16px 18px; }
	.p-pd-onoff__label.c-label { width: 291px; margin: 0 auto; }
	.p-pd-onoff__text,
	.p-pd-onoff__box + .p-pd-onoff__box .p-pd-onoff__text {
		margin-top: 20px;
		padding-left: 0;
		font-size: 16px;
		line-height: 30px;
		text-align: center;
	}
	.p-pd-onoff__box + .p-pd-onoff__box .p-pd-onoff__text { line-height: 26px; }
	.p-pd .p-pd-onoff-after { margin-top: 15px; }

	.p-pd .p-pd-adjust-box { margin-top: 30px; padding: 17px 15px; }
}

/* Figmaとの突き合わせによる余白調整 */
@media (min-width: 960px) {
	#brain .c-h2 + .c-text { margin-top: 14px; }
	.p-pd-cards--gait + .p-pd-sym-text { margin-top: 47px; }
	.p-pd-cards--nonmotor2 + .p-pd-sym-text { margin-top: 44px; }
	.c-sub.p-pd-treat--wearing { margin-top: 18px; }
}
/* 本文パネル下の余白（Figma PC 110px／SP 40px） */
.page-parkinson .l-lower__content { padding-bottom: 110px; }
@media (max-width: 959px) { .page-parkinson .l-lower__content { padding-bottom: 40px; } }