/*
 * TOPページ(front-page.php)専用CSS。is_front_page()の時のみ読み込む。
 * 色・寸法は現行公開RCMS TOPをPlaywright headlessで実測した値に基づく。
 * Bootstrap vendorは改変せず、class名は fp- prefixでDevToolsから追えるようにする。
 */
.front-page {
	--fp-color-heading: #446267;
	--fp-color-button: #336666;
	--fp-color-shortcut: rgba(51, 102, 102, 0.35);
	--fp-color-light: #d7dedf;
	--fp-gradient: linear-gradient(0deg, #ced3d4 0%, #ffffff 100%);
	--fp-shadow: 0 2px 3px rgba(153, 153, 153, 0.75);
	--fp-inner: 1000px;
}

.front-page section {
	position: relative;
}

.fp-inner {
	max-width: var(--fp-inner);
}

.fp-inner--wide {
	max-width: 1020px;
}

.fp-heading {
	color: var(--fp-color-heading);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid #b9c3c4;
}

.fp-subheading,
.fp-subhead {
	color: var(--fp-color-heading);
	font-weight: 600;
}

.fp-subheading {
	font-size: 1.1rem;
	margin: 1.75rem auto 1rem;
	padding-bottom: 0.25rem;
	max-width: 400px;
	border-bottom: 1px solid #b9c3c4;
}

.fp-subhead {
	font-size: 1rem;
	margin: 1.25rem 0 0.5rem;
	padding-left: 1rem;
	border-left: 5px solid var(--fp-color-heading);
	line-height: 1.4;
}

.fp-subhead--sm {
	font-size: 0.875rem;
}

@media (min-width: 768px) {
	.fp-heading {
		font-size: 1.875rem;
		margin-bottom: 2.8rem;
	}
}

/* ===== Buttons ===== */

.fp-btn {
	display: inline-block;
	padding: 0.7rem 2rem;
	text-align: center;
	text-decoration: none;
	font-size: 1rem;
}

.fp-btn--primary {
	background: var(--fp-color-button);
	color: #ffffff;
}

.fp-btn--primary:hover,
.fp-btn--primary:focus {
	background: #274f4f;
	color: #ffffff;
}

.fp-btn--light {
	display: block;
	background: var(--fp-color-light);
	color: #000000;
}

.fp-btn--light:hover,
.fp-btn--light:focus {
	background: #c4cfd0;
	color: #000000;
}

.fp-btn--sm {
	font-size: 0.8rem;
	padding: 0.35rem 1.25rem;
}

.front-page a:focus-visible {
	outline: 3px solid #1b4b8f;
	outline-offset: 2px;
}

/* ===== Hero ===== */

.fp-hero__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.fp-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
}

.fp-hero__catch {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 43%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(51, 51, 51, 0.51);
	padding: 0.7rem 0;
}

.fp-hero__catch img {
	width: 44%;
	height: auto;
}

@media (min-width: 768px) {
	.fp-hero__catch {
		padding: 1.4rem 0;
	}
}

/* ===== Intro ===== */

.fp-intro {
	background: var(--fp-gradient);
	padding: 3rem 0 3.5rem;
}

.fp-intro__box {
	background: #ffffff;
	box-shadow: 0 3px 1px rgba(0, 0, 0, 0.35);
	padding: 1.7rem 1.2rem;
	line-height: 1.85;
	font-size: 0.875rem;
}

.fp-intro__link {
	margin: 1.25rem 0 0;
	text-align: center;
}

.fp-intro__link a {
	color: #000000;
}

@media (min-width: 768px) {
	.fp-intro__box {
		padding: 1.6rem 5.3rem 1.6rem 6.25rem;
		font-size: 1rem;
	}
}

/* ===== Key points ===== */

.fp-key-points {
	background: var(--fp-gradient);
	padding: 1.5rem 0 1rem;
}

.fp-key-points__list {
	margin-bottom: 1.5rem;
}

.fp-key-points__circle {
	margin: 0 auto 1.25rem;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: linear-gradient(60deg, #ffffff 0%, #f4f3f3 100%);
	box-shadow: var(--fp-shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.5;
	padding: 1rem;
}

.fp-key-points__circle p {
	margin: 0;
}

.fp-key-points__circle strong {
	color: #5c9c9a;
	font-weight: 500;
}

.fp-key-points__step {
	margin: 0 0 0.5rem;
}

.fp-key-points__step img {
	width: 110px;
	height: auto;
}

.fp-key-points__body {
	max-width: 280px;
	margin: 0 auto;
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.fp-key-points {
		padding: 3rem 0 3.75rem;
	}

	.fp-key-points__body {
		max-width: none;
		font-size: 1rem;
	}
}

@media (min-width: 992px) {
	.fp-key-points__circle {
		width: 270px;
		height: 270px;
		font-size: 1rem;
	}

	.fp-key-points__step img {
		width: 170px;
	}
}

/* ===== Features ===== */

.fp-feature {
	background: var(--fp-gradient);
}

.fp-feature__bg {
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 60% auto;
	/* 画像(幅60%)の実表示高さ分の下余白を確保し、本文・ボタンと重ならないようにする */
	padding: 1.25rem 0 calc(60% * var(--fp-feature-ratio) + 1rem);
}

.fp-feature--microscope .fp-feature__bg {
	--fp-feature-ratio: 0.743; /* 341 / 459 */
	background-image: url("../images/front-page/top_cure01d.png");
}

.fp-feature--periodontal .fp-feature__bg {
	--fp-feature-ratio: 0.634; /* 380 / 599 */
	background-image: url("../images/front-page/top_cure02.png");
}

.fp-feature--sterilization .fp-feature__bg {
	--fp-feature-ratio: 0.762; /* 682 / 895 */
	background-image: url("../images/front-page/top_cure03c.png");
}

.fp-feature__text p {
	font-size: 0.875rem;
	line-height: 1.85;
}

.fp-feature__text .fp-heading {
	font-size: 1.25rem;
}

@media (min-width: 992px) {
	.fp-feature__bg {
		padding: 3rem 0 3rem;
		min-height: 340px;
		background-size: 459px auto;
		background-position: calc(50% + 280px) 0;
	}

	/* 先進の歯周病治療: 背景(gradient + 左の画像)をviewport全幅ではなく他のTOP contentと同じ1000px内へ収める */
	.fp-feature--periodontal {
		background: none;
	}

	.fp-feature--periodontal .fp-feature__bg {
		max-width: var(--fp-inner);
		margin: 0 auto;
		background-image: url("../images/front-page/top_cure02.png"), var(--fp-gradient);
		background-repeat: no-repeat, no-repeat;
		background-size: 599px auto, 100% 100%;
		background-position: 0 0, 0 0;
	}

	.fp-feature--sterilization .fp-feature__bg {
		background-size: 520px auto;
		background-position: calc(50% + 250px) 0;
	}

	.fp-feature__text {
		/* 画像の左端(最小992px幅時486px)と本文boxが交差しない幅 */
		max-width: 450px;
	}

	.fp-feature--periodontal .fp-feature__text {
		margin-left: auto;
	}

	.fp-feature--sterilization .fp-feature__bg {
		min-height: 400px;
	}

	.fp-feature__text .fp-heading {
		font-size: 1.5rem;
	}

	.fp-feature__text p {
		font-size: 1rem;
	}
}

/* ===== Treatment menu ===== */

.fp-treatment {
	background: var(--fp-gradient);
	padding: 2.5rem 0 2.5rem;
}

.fp-treatment__lead {
	max-width: 760px;
	margin: 0 auto 1.5rem;
	font-size: 0.875rem;
	line-height: 1.85;
}

.fp-treatment__card {
	height: 100%;
	background: linear-gradient(60deg, #ffffff 0%, #e2e2e2 100%);
	box-shadow: var(--fp-shadow);
	display: flex;
	flex-direction: column;
}

.fp-treatment__card h3 {
	margin: 0;
	background: rgba(68, 98, 103, 0.5);
	color: #ffffff;
	text-align: center;
	font-size: 0.95rem;
	line-height: 2.3;
}

.fp-treatment__card p {
	margin: 0;
	padding: 0.9rem;
	font-size: 0.85rem;
	line-height: 1.5;
}

.fp-treatment__card .fp-treatment__more {
	margin-top: auto;
	padding: 0 0.6rem 0.6rem;
	text-align: right;
}

@media (min-width: 768px) {
	.fp-treatment {
		padding: 5rem 0 2.8rem;
	}

	.fp-treatment__lead {
		font-size: 1rem;
	}

	.fp-treatment__card h3 {
		font-size: 1.5rem;
		line-height: 2.3;
	}

	.fp-treatment__card p {
		font-size: 1rem;
		padding: 1.6rem 1.5rem;
	}

	.fp-treatment__card .fp-treatment__more {
		padding: 0 0.6rem 0.6rem;
	}
}

/* ===== Latest cases ===== */

.fp-cases {
	background: #efefef;
	padding: 2.5rem 0 2.8rem;
}

.fp-cases__lead {
	margin-bottom: 2rem;
	font-size: 0.875rem;
}

.fp-case-card {
	display: block;
	height: 100%;
	background: #ffffff;
	color: #000000;
	text-decoration: none;
}

.fp-case-card:hover .fp-case-card__title,
.fp-case-card:focus .fp-case-card__title {
	text-decoration: underline;
}

.fp-case-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: #dfe5e6;
	overflow: hidden;
}

.fp-case-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fp-case-card__meta {
	display: block;
	padding: 0.6rem 0.9rem 0;
	text-align: right;
	font-size: 0.75rem;
}

.fp-case-card__cat {
	margin-left: 0.4rem;
}

.fp-case-card__title {
	margin: 0;
	padding: 0.4rem 0.9rem 0;
	font-size: 0.8rem;
	line-height: 1.4;
	font-weight: 400;
}

.fp-case-card__more {
	display: block;
	padding: 0.5rem 0.9rem 0.9rem;
	text-align: right;
	font-size: 0.75rem;
}

.fp-shortcuts__link {
	display: block;
	padding: 0.5rem;
	background: var(--fp-color-shortcut);
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-size: 0.8rem;
	height: 100%;
}

.fp-shortcuts__link:hover,
.fp-shortcuts__link:focus {
	background: var(--fp-color-button);
	color: #ffffff;
}

@media (min-width: 768px) {
	.fp-cases {
		padding: 5rem 0 2.8rem;
	}

	.fp-cases__lead {
		font-size: 1rem;
	}

	.fp-case-card__meta,
	.fp-case-card__more {
		font-size: 0.8rem;
	}

	.fp-case-card__title {
		font-size: 0.95rem;
	}

	.fp-shortcuts__link {
		font-size: 1rem;
	}
}

/* ===== Greeting ===== */

.fp-greeting {
	background: var(--fp-gradient);
	padding: 1.5rem 0 2rem;
}

.fp-greeting__body {
	max-width: 800px;
	margin: 0 auto;
	font-size: 0.875rem;
	line-height: 1.5;
}

.fp-greeting__figure {
	margin: 0;
	max-width: 240px;
}

.fp-greeting__figure img {
	width: 100%;
	height: auto;
}

.fp-greeting__figure figcaption {
	margin-top: 0.5rem;
}

.fp-greeting__figure small {
	font-size: 0.75rem;
}

.fp-history {
	margin: 0 0 0.75rem;
}

.fp-history li {
	padding: 0.2rem 0;
	border-bottom: 1px solid #cccccc;
}

@media (min-width: 768px) {
	.fp-greeting {
		padding: 3rem 0 4rem;
	}

	.fp-greeting__body {
		font-size: 1rem;
	}
}

/* ===== Notices + Access ===== */

.front-page-info {
	padding: 1rem 0;
}

@media (min-width: 992px) {
	.front-page-info {
		padding: 4.4rem 0;
	}
}

.fp-notices,
.fp-access {
	border: 1px solid #cccccc;
	padding: 1rem;
	background: #ffffff;
}

.fp-notices .fp-subhead {
	margin-top: 0;
	font-size: 1.1rem;
}

.fp-notices__item {
	border-bottom: 1px solid #dddddd;
	padding: 0.6rem 0;
}

.fp-notices__item a {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: #000000;
	text-decoration: none;
	font-size: 0.875rem;
	line-height: 1.5;
}

.fp-notices__item a:hover .fp-notices__title,
.fp-notices__item a:focus .fp-notices__title {
	text-decoration: underline;
}

.fp-notices__thumb {
	flex: 0 0 5.5rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

.fp-notices__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fp-notices__body {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
}

.fp-notices__title {
	color: var(--fp-color-heading);
}

.fp-notices__excerpt {
	grid-column: 1 / -1;
	margin-top: 0.25rem;
}

.fp-access__name {
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}

.fp-access {
	font-size: 0.875rem;
	line-height: 1.6;
}

.fp-access__list {
	padding-left: 1.25rem;
}

.fp-access__bigmap {
	text-align: right;
	font-size: 0.75rem;
}

@media (min-width: 768px) {
	.fp-notices,
	.fp-access {
		padding: 1.25rem;
	}

	.fp-notices__item a {
		gap: 1rem;
	}

	.fp-notices__thumb {
		flex-basis: 8.5rem;
	}
}

/* ===== Instagram ===== */

.fp-instagram {
	background: #f9f9f9;
	padding: 1.5rem 0;
}

.fp-instagram__title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid #555555;
	font-size: 0.875rem;
	font-weight: 400;
}

.fp-instagram__title img {
	width: 114px;
	height: auto;
}

.fp-instagram__pic {
	display: block;
	margin-bottom: 1.25rem;
}

.fp-instagram__pic img {
	display: block;
	width: 100%;
	height: auto;
}

.fp-instagram .fp-btn {
	display: inline-block;
	min-width: 280px;
}