@charset "utf-8";
/* CSS Document */




/*============================================================================

	設定カラー

============================================================================*/
:root {
	--color-pink: #ed7d9d; /*ピンク*/
	--color-pink-dark:  #d3305d; /*濃いピンク*/
	--color-pink-light: #ec91ac; /*背景用薄いピンク*/
}










/*============================================================================

		$index　＊　mainvisual

============================================================================*/
#top_re_mainvisual {
	position: relative;
	height: 790px;
	padding-top: 100px;
	background: url("../images/top/re/bg01.jpg") no-repeat left center / cover;
	overflow: hidden;
}
@media screen and (max-width: 640px) {
	#top_re_mainvisual {
        top: 100px;
		padding-top: 0;
		height: 1200px;
	}
}


/*------------------------------ 右側の写真 ------------------------------*/
#top_re_mainvisual::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	background: url("../images/top/re/mv_bg.png") no-repeat center right;
}
@media screen and (max-width: 1440px) {
	#top_re_mainvisual::before {
		background: url("../images/top/re/mv_bg.png") no-repeat center right -80px;
	}
}
@media screen and (max-width: 640px) {
	#top_re_mainvisual::before {
		height: 450px;
		background: url("../images/top/re/mv_bg-sp.png") no-repeat center bottom / cover;
	}
}


/*------------------------------ 下から白のグラデーション ------------------------------*/
#top_re_mainvisual::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}
@media screen and (max-width: 640px) {
	#top_re_mainvisual::after {
	}
}




#top_re_mainvisual .inner {
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 1500px;
	margin: 0 auto;
	padding: 90px 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: min(600px);
	justify-items: center;
	text-align: center;
}
@media screen and (max-width: 640px) {
	#top_re_mainvisual .inner {
		width: 100%;
		padding-top: 430px;
		grid-template-columns: 1fr;
	}
}


/*------------------------------ キャッチ ------------------------------*/
#mv_catch01 {
	line-height: 1.55;
	margin-bottom: 15px;
}
#mv_catch01 span {
	display: block;
	font-size: 35px;
}
#mv_catch01 em {
	display: block;
	font-size: 66px;
	color: var(--color-pink-dark);
}
@media screen and (max-width: 640px) {
	#mv_catch01 {
		margin-bottom: 15px;
	}
	#mv_catch01 span {
		font-size: 26px;
		margin-left: 10px;
	}
	#mv_catch01 em {
		font-size: 50px;
		margin-left: 20px;
	}
}


/*------------------------------ リード文 ------------------------------*/
#mv_catch02 {
	font-size: 19px;
	line-height: 2.1;
	letter-spacing: 0;
	margin-bottom: 25px;
	text-shadow: 0 0 4px  #fff, 0 0 10px #fff, 0 0 20px #fff;
}
#mv_catch02 em {
	color: var(--color-pink-dark);
}
@media screen and (max-width: 640px) {
	#mv_catch02 {
		font-size: 16px;
		line-height: 1.9;
		margin-bottom: 20px;
	}
}


/*------------------------------ 専門医バッジ ------------------------------*/
#mv_catch03 {
	margin-bottom: 33px;
}
#mv_catch03 li {
	display: inline-block;
	margin-bottom: 5px;
	padding: 3px 35px 4px;
	background: var(--color-pink);
	color: #fff;
	font-size: 18px;
	line-height: 1.6;
	border-radius: 40px;
}
@media screen and (max-width: 640px) {
	#mv_catch03 {
		margin-bottom: 25px;
	}
	#mv_catch03 li {
		padding: 3px 40px 4px;
		font-size: 16px;
	}
}


/*------------------------------ ボタン（左アイコン・中央文字・右矢印） ------------------------------*/
#mv_catch04 {
	display: flex;
	justify-content: center;
	gap: 20px;
	width: 100%;
}
#top_re_mainvisual .btn_mv01,
#top_re_mainvisual .btn_mv02 {
	position: relative;
	flex: 1;
	max-width: 280px;
	min-height: 82px;
	box-sizing: border-box;
	border: 1px solid #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 1px;
	border-radius: 10px;
}
#top_re_mainvisual .btn_mv01 { padding: 10px 45px 10px 70px; background: var(--color-pink);}
#top_re_mainvisual .btn_mv02 { padding: 10px 45px 10px 60px; background: var(--color-pink-light);}
#top_re_mainvisual .btn_mv01 em { display: block; font-size: 21px;}
#top_re_mainvisual .btn_mv02 em { display: block; font-size: 19px;}

/* 左のアイコン */
#top_re_mainvisual .btn_mv01::before,
#top_re_mainvisual .btn_mv02::before {
	content: "";
	position: absolute;
	left: 35px;
	top: 50%;
	height: 60px;
	transform: translateY(-50%);
	background: no-repeat center / contain;
}
#top_re_mainvisual .btn_mv01::before { background-image: url("../images/top/re/icon01.png"); width: 44px; }
#top_re_mainvisual .btn_mv02::before { background-image: url("../images/top/re/icon02.png"); width: 39px; }

/* 右の矢印 */
#top_re_mainvisual .btn_mv01::after,
#top_re_mainvisual .btn_mv02::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 28px;
	height: 28px;
	transform: translateY(-50%);
	background: url("../images/icon03.png") no-repeat center / contain; /* 仮：矢印 */
	transition: transform 0.3s ease-out;
}
#top_re_mainvisual .btn_mv01:hover { transform: translateY(-4px); background: #ea6f90;}
#top_re_mainvisual .btn_mv02:hover { transform: translateY(-4px); background: var(--color-pink);}
#top_re_mainvisual .btn_mv01:hover::after,
#top_re_mainvisual .btn_mv02:hover::after {
	transform: translateY(-50%) rotate(90deg);
}

@media screen and (max-width: 640px) {
	#mv_catch04 {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	#top_re_mainvisual .btn_mv01,
	#top_re_mainvisual .btn_mv02 {
		flex: none;
		width: 100%;
		max-width: 440px;
		min-height: 70px;
		font-size: 13px;
	}
	#top_re_mainvisual .btn_mv01 { padding: 8px 45px 8px 64px; }
	#top_re_mainvisual .btn_mv02 { padding: 8px 45px 8px 58px; }
	#top_re_mainvisual .btn_mv01 em { font-size: 19px; }
	#top_re_mainvisual .btn_mv02 em { font-size: 18px; }

	/* 左のアイコン（PCの比率のまま縮小） */
	#top_re_mainvisual .btn_mv01::before,
	#top_re_mainvisual .btn_mv02::before {
		left: 22px;
		height: 44px;
	}
	#top_re_mainvisual .btn_mv01::before { width: 32px; }
	#top_re_mainvisual .btn_mv02::before { width: 29px; }

	/* 右の矢印 */
	#top_re_mainvisual .btn_mv01::after,
	#top_re_mainvisual .btn_mv02::after {
		right: 16px;
		width: 22px;
		height: 22px;
	}
}







/*============================================================================

	共通

============================================================================*/

/*------------------------------ h2 ------------------------------*/
#top_re_concern h2 , #top_re_features h2 , #top_re_message h2 , #top_re_topics h2 {
	position: relative;
	padding: 0;
	font-size: 36px;
	font-family: "Shippori Mincho";
	line-height: 1.5;
	z-index: 0;
}
#top_re_concern h2 span , #top_re_features h2 span , #top_re_message h2 span , #top_re_topics h2 span {
	position: relative;
	display: block;
    font-family: "Cormorant Garamond", serif;
	font-size: 120px;
	font-weight: 300;
	line-height: 1;
	z-index: -1;
}
#top_re_concern h2::before , #top_re_features h2::before , #top_re_message h2::before , #top_re_topics h2::before {
	display: none;
}
@media screen and (max-width: 640px) {
	#top_re_concern h2 , #top_re_features h2 , #top_re_message h2 , #top_re_topics h2 {
		font-size: 22px;
	}
	#top_re_concern h2 span , #top_re_features h2 span , #top_re_message h2 span , #top_re_topics h2 span {
		font-size: 60px;
	}
}


/*------------------------------ ボタン ------------------------------*/
.btn_re01 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 340px;
	min-height: 60px;
	padding: 10px 50px;
	box-sizing: border-box;
	border: 1px solid #fff;
	background: rgba(236, 117, 150, 0.7);
	color: #fff;
	font-size: 18px;
	line-height: 1.5;
	border-radius: 30px;
}
.btn_re01::after {
	content: "";
	position: absolute;
	right: 25px;
	top: 50%;
	width: 28px;
	height: 28px;
	transform: translateY(-50%);
	background: url("../images/icon03.png") no-repeat center / contain;
	transition: transform 0.3s ease-out;
}
.btn_re01:hover {
	background: var(--color-pink);
	color: #FFF;
	transform: translateY(-4px); 
}
.btn_re01:hover::after {
	transform: translateY(-50%) rotate(90deg);
}
@media screen and (max-width: 640px) {
	.btn_re01 {
		max-width: 100%;
		margin: 0 auto;
		padding: 8px 44px;
		font-size: 16px;
	}
	.btn_re01::after {
		right: 18px;
		width: 26px;
		height: 26px;
	}
}









/*============================================================================

	CONCERN　＊　こんなお悩みはありませんか？

============================================================================*/
#top_re_concern {
	position: relative;
	top: -90px;
	width: 90%;
	max-width: 1600px;
	margin: auto;
	box-sizing: border-box;
	border: 1px solid #FFF;
	border-radius: 10px;
	box-shadow: 0 0 9px 6px rgba(240, 201, 213, 0.3);
	background: url("../images/top/re/bg02.jpg") no-repeat center / cover;
}
#top_re_concern .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}
@media screen and (max-width: 640px) {
	#top_re_concern {
		top: -40px;
		background: url("../images/top/re/bg02.jpg") no-repeat center left / cover;
	}
	#top_re_concern .inner {
		width: 88%;
		padding: 6% 0 50px;
		flex-direction: column;
		align-items: stretch;
		gap: 35px;
	}
}


/*------------------------------ h2 ------------------------------*/
#top_re_concern h2 {
	margin-top: -55px;
	margin-bottom: 33px;
}
#top_re_concern h2 span {
	top: 50px;
	color: #f9e4ea !important;
}
@media screen and (max-width: 640px) {
	#top_re_concern h2 {
		margin-top: -55px;
		margin-bottom: 35px;
		font-size: 21px;
		letter-spacing: 0;
	}
	#top_re_concern h2 span {
		top: 0;
		letter-spacing: 3px;
	}
}


/*------------------------------ 左：チェックボックス ------------------------------*/
#top_re_concern .box {
	flex: 1;
	min-width: 0;
}
#top_re_concern ul {
	margin-bottom: 45px;
}
#top_re_concern li {
	font-size: 18px;
	line-height: 1.8;
	padding-left: 33px;
	background: url("../images/top/re/img02.png") no-repeat left top calc(0.9em - 9px);
	background-size: 21px 20px;
}
#top_re_concern li + li {
	margin-top: 13px;
}
@media screen and (max-width: 640px) {
	#top_re_concern ul {
		margin-bottom: 30px;
	}
	#top_re_concern li {
		font-size: 16px;
		padding-left: 27px;
		background-position: left top calc(0.9em - 8px);
		background-size: 18px 17px;
	}
	#top_re_concern li + li {
		margin-top: 10px;
	}
}


/*------------------------------ 右：写真 ------------------------------*/
#top_re_concern figure {
	position: relative;
	right: clamp(-5%, (1570px - 100vw) / 4, 0px);
	flex-shrink: 0;
	width: clamp(520px, 100vw - 870px, 700px);
	height: 490px;
	margin: 0;
}
#top_re_concern figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}
@media screen and (max-width: 1440px) {
	#top_re_concern figure img {
		object-position: 60% 0;
	}
}
@media screen and (max-width: 640px) {
	#top_re_concern figure {
		order: -1;
		right: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 700 / 400;
		overflow: hidden;
	}
	#top_re_concern figure img {
		object-position: 60% 90%;
	}
}









/*============================================================================

	IMPLANT　＊　インプラント治療実績・症例

============================================================================*/
#top_re_implant {
	margin-top: -270px;
	padding: 280px 0 135px;
	background: url("../images/top/re/bg08.png") no-repeat center top , url("../images/top/re/bg07.png") no-repeat center bottom;
}
#top_re_implant .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 430px 1fr;
	gap: 70px;
	align-items: flex-end;
}
#top_re_implant em {
	color: var(--color-pink-dark);
}
@media screen and (max-width: 640px) {
	#top_re_implant {
		margin-top: -170px;
		padding: 210px 0 70px;
		background: url("../images/top/re/bg08.png") no-repeat left -100px top , url("../images/top/re/bg07.png") no-repeat center bottom;
	}
	#top_re_implant .inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
	}
}


/*------------------------------ h2 ------------------------------*/
#top_re_implant .box h2 {
	margin-bottom: 25px;
	font-size: 29px;
	padding-top: 50px;
}
#top_re_implant .box h2::before {
	width: 50px; height: 35px;
	background-size: 50px 35px;
}
#top_re_implant .box h2 em {
	font-family: "EB Garamond", serif;
	font-size: 1.2em;
	color: #371621;
}
@media screen and (max-width: 640px) {
	#top_re_implant .box h2 {
		margin-bottom: 18px;
		font-size: 23px;
		letter-spacing: 1px;
	}
	
}


/*------------------------------ 左：実績テキストエリア ------------------------------*/
#top_re_implant .box {
	text-align: center;
}
@media screen and (max-width: 640px) {
	#top_re_implant .box {
		display: contents;/* .box の枠を外して、中身と症例一覧を同じ並びにする */
	}
	#top_re_implant-list {
		order: 1;                  /* 集計期間の下に症例 */
		min-width: 0;
		margin-bottom: 40px;
	}
	.top_re_implant-btn {
		order: 2;                  /* その下にボタン */
	}
	.top_re_implant-risk {
		order: 3;                  /* 最後にリスク・副作用 */
	}
}


/*---------- 305件 / 431本 ----------*/
#top_re_implant-number {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 15px;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 23px;
}
#top_re_implant-number p {
	display: flex;
	align-items: baseline;
}
#top_re_implant-number p em {
	font-size: 78px;
	margin: 0 13px 0 5px;
	line-height: 1;
	letter-spacing: 3px;
	font-family: "EB Garamond", serif;
	background: linear-gradient(to bottom, #ff99b5, #d3305d);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #d3305d;
}
@media screen and (max-width: 640px) {
	#top_re_implant-number {
		gap: 8px;
		font-size: 20px;
		margin-bottom: 18px;
	}
	#top_re_implant-number p em {
		font-size: 60px;
		margin: 0 6px 0 3px;
	}
}


/*---------- 集計期間 ----------*/
#top_re_implant .box > p:first-of-type {
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 35px;
}
@media screen and (max-width: 640px) {
	#top_re_implant .box > p:first-of-type {
		font-size: 15px;
		margin-bottom: 40px;
		padding-bottom: 40px;
		border-bottom: 1px solid #fbe2ed;
	}
}


/*---------- ＼ 幅広い症例に対応しています ／ ＋ ボタン ----------*/
.top_re_implant-btn {
	margin-bottom: 30px;
}
.top_re_implant-btn dt {
	align-items: center;
	font-size: 24px;
	line-height: 1.6;
	margin-bottom: 15px;
}
.top_re_implant-btn dt::before {
	content: "\5C";
	margin-right: 15px;
	color: var(--color-pink-dark);
}
.top_re_implant-btn dt::after {
	content: "/";
	margin-left: 12px;
	color: var(--color-pink-dark);
}
.top_re_implant-btn dd {
}
#top_re_implant .btn_re01 {
	max-width: 100%;
	height: 80px;
	border-radius: 50px;
	margin: 0 auto;
	padding-left: 60px;
	font-size: 20px;
}
#top_re_implant .btn_re01::before { /* 左のアイコン */
	content: "";
	position: absolute;
	left: 40px;
	top: 50%;
	width: 34px;
	height: 42px;
	transform: translateY(-50%);
	background: url("../images/top/re/icon03.png") no-repeat center / contain;
}
@media screen and (max-width: 640px) {
	.top_re_implant-btn dt {
		font-size: 20px;
	}
	.top_re_implant-btn dt::before {
		margin-right: 10px;
	}
	.top_re_implant-btn dt::after {
		margin-left: 8px;
	}
	#top_re_implant .btn_re01 {
		height: 76px;
		padding-left: 56px;
		font-size: 18px;
	}
	#top_re_implant .btn_re01::before {
		left: 27px;
		width: 30px;
		height: 37px;
	}
}


/*---------- リスク・副作用（左揃え） ----------*/
.top_re_implant-risk {
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.85;
	letter-spacing: 0;
	text-align: left;
}
.top_re_implant-risk li {
	padding-left: 1em;
	text-indent: -1em;
}
@media screen and (max-width: 640px) {
	.top_re_implant-risk {
		font-size: 12px;
		line-height: 1.8;
	}
}



/*------------------------------ 右：症例一覧 ------------------------------*/
#top_re_implant-list ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
#top_re_implant-list li {
	display: flex;
	flex-direction: column;
}
#top_re_implant-list h3 {
	font-size: 24px;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 13px;
}
@media screen and (max-width: 640px) {
	#top_re_implant-list ul {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 250px;
		gap: 30px;
		overflow-x: auto;
		margin: 0 -5vw;
		padding: 0 5vw 15px;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 5vw;
	}
	#top_re_implant-list li {
		scroll-snap-align: start;
	}
	#top_re_implant-list h3 {
		font-size: 22px;
		margin-bottom: 19px;
	}
}


/*---------- Before → After（縦並び、間に矢印） ----------*/
.top_re_implant-figures {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.top_re_implant-figures figure {
	position: relative;
	width: 100%;
}
.top_re_implant-figures figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.top_re_implant-figures figure + figure::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -20px;
	transform: translateX(-50%);
	width: 28px; height: 28px;
	background: url("../images/top/re/icon04.png") no-repeat center / contain;
}
@media screen and (max-width: 640px) {
}


/*---------- 症例概要 ----------*/
.top_re_implant-text {
	flex: 1;
	font-size: 12px;
	line-height: 1.9;
	background: #FFF;
	box-sizing: border-box;
	border: 1px solid #fbe2ed;
	border-radius: 10px;
	padding: 20px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0;
}
@media screen and (max-width: 640px) {
	.top_re_implant-text {
		padding: 15px 18px;
	}
}










/*============================================================================

	FEATURES　＊　当院が選ばれる3つの理由

============================================================================*/
#top_re_features {
	padding: 100px 0 120px;
	background: url("../images/top/re/bg03.png") no-repeat top center, url("../images/bg01.png") repeat-y center;
}
#top_re_features .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
}
#top_re_features em {
	color: var(--color-pink-dark);
}
@media screen and (max-width: 640px) {
	#top_re_features {
		padding: 60px 0 90px;
	}

}


/*------------------------------ h2 ------------------------------*/
#top_re_features h2 {
	margin-top: -70px;
	margin-bottom: 45px;
	text-align: center;
	letter-spacing: 3px;
}
#top_re_features h2 span {
	top: 65px;
	letter-spacing: 5px;
	color: #fff !important;
}
#top_re_features h2 em {
	padding: 0 6px 0 4px;
	font-size: 1.3em;
	font-family: "EB Garamond", serif;
}
@media screen and (max-width: 640px) {
	#top_re_features h2 {
		margin-top: 0;
		margin-bottom: 30px;
		letter-spacing: 2px;
	}
	#top_re_features h2 span {
		top: 0;
		letter-spacing: 3px;
	}
}


/*------------------------------ カード ------------------------------*/
#top_re_features ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
	counter-reset: feature;
}
#top_re_features li {
	display: flex;                 /* 中の a を li の高さいっぱいに伸ばす */
	counter-increment: feature;
}
#top_re_features li a {
	position: relative;
	flex: 1;
	display: block;
	padding: 30px 10px 40px;
	box-sizing: border-box;
	border: 1px solid #fff;
	background: url("../images/bg02.png"), rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	color: inherit;                /* 既存の a { color: #333; } を打ち消す */
	transition: 0.3s ease-out;
}
/* 右下の 01〜03 */
#top_re_features li a::after {
	content: counter(feature, decimal-leading-zero);
	position: absolute;
	right: 20px;
	bottom: 0;
	font-size: 190px;
	line-height: 1;
	color: rgba(255,255,255,.5);
	z-index: 0;
	font-family: "EB Garamond", serif;
}
#top_re_features figure {
	width: 92px;
	margin: 0 auto 24px;
}
#top_re_features figure img {
	display: block;
	width: 100%;
	height: auto;
}
#top_re_features li h3,
#top_re_features li p {
	position: relative;
	z-index: 1;
	text-align: center;
}
#top_re_features li h3 {
	font-size: 22px;
	line-height: 1.6;
	margin-bottom: 15px;
}
#top_re_features li p {
	font-size: 16px;
	line-height: 2;
}

/* hover（マウスが使える端末だけ） */
@media (hover: hover) {
	#top_re_features li a:hover {
		color: inherit;            /* 既存の a:hover のピンク文字を打ち消す */
		transform: translateY(-6px);
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0 0 9px 6px rgba(240, 201, 213, 0.3);
	}
}
/* キーボード操作時のフォーカス表示 */
#top_re_features li a:focus-visible {
	outline: 2px solid var(--color-pink-dark);
	outline-offset: 4px;
}

@media screen and (max-width: 640px) {
	#top_re_features ul {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	#top_re_features li a {
		padding: 25px 20px 30px;
	}
	#top_re_features li a::after {   /* 右下の 01〜03 */
		font-size: 180px;
	}
	#top_re_features figure {
		width: 80px;
		margin-bottom: 20px;
	}
	#top_re_features li h3 {
		font-size: 21px;
		margin-bottom: 10px;
	}
	#top_re_features li p {
		font-size: 16px;
		line-height: 1.9;
	}
}










/*============================================================================

	MESSAGE　＊　メッセージ

============================================================================*/
#top_re_message {
	position: relative;
	z-index: 2;
	padding: 90px 0 120px;
	background: url("../images/top/re/bg04.png") no-repeat top left , url("../images/top/re/bg05.png") no-repeat bottom right;
	background-size: 881px 393px , 270px 430px;
}
@media screen and (max-width: 640px) {
	#top_re_message {
		padding: 90px 0 90px;
		background-size: 440px 196px , 135px 215px;
	}
}


/*------------------------------ h2 ------------------------------*/
#top_re_message h2 {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto 50px;
	font-size: 32px;
}
#top_re_message h2 span {
	letter-spacing: 3px;
	color: #f9e4ea !important;
}
@media screen and (max-width: 640px) {
	#top_re_message h2 {
		margin-bottom: 40px;
		font-size: 22px;
	}
}


/*------------------------------ inner ------------------------------*/
#top_re_message .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 75px;
}
@media screen and (max-width: 640px) {
	#top_re_message .inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}
}


/*------------------------------ 挨拶（写真左・テキスト右） ------------------------------*/
#top_re_message-doctor {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 45px;
}
#top_re_message-doctor figure {
	flex-shrink: 0;
	width: 280px;
	height: 380px;
}
#top_re_message-doctor figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}
#top_re_message-doctor .box {
	flex: 1;
	min-width: 0;
}
#top_re_message-doctor dl {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 15px;
	line-height: 1.6;
}
#top_re_message-doctor dd {
	order: -1; /* 法人名を上に表示 */
	font-size: 16px;
}
#top_re_message-doctor dt em {
	position: relative;
	top: -2px;
	font-size: 30px;
	margin-left: 0.5em;
}
#top_re_message-doctor ul {
	margin-bottom: 15px;
}
#top_re_message-doctor li {
	font-size: 18px;
	line-height: 1.9;
	color: var(--color-pink-dark);
}
#top_re_message-doctor p {
	line-height: 2;
	letter-spacing: 0;
}


@media screen and (max-width: 640px) {
	#top_re_message-doctor {
		flex-direction: column;
		gap: 20px;
	}
	#top_re_message-doctor figure {
		width: 100%;
		max-width: 400px;
		height: auto;
	}
	#top_re_message-doctor .box {
		width: 100%;
	}
	#top_re_message-doctor dl {
		align-items: center;
		margin-bottom: 10px;
	}
	#top_re_message-doctor dd {
	}
	#top_re_message-doctor dt em {
		font-size: 24px;
	}
	#top_re_message-doctor ul {
		text-align: center;
	}
	#top_re_message-doctor li {
		font-size: 16px;
		line-height: 1.8;
	}
	#top_re_message-doctor p {
		font-size: 16px;
		line-height: 1.9;
	}
}


/*------------------------------ YouTube ------------------------------*/
#top_re_message-youtube {
	width: 530px;
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
#top_re_message-youtube_box iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	box-sizing: border-box;
	border: 1px solid #f9e4ea;
	border-radius: 5px;
}
#top_re_message-youtube p {
	margin-top: auto;
	padding: 21px 15px;
	border-radius: 5px;
	text-align: center;
	background: #f9e4ea;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 640px) {
	#top_re_message-youtube {
		width: 100%;
		align-self: auto;
	}
	#top_re_message-youtube p {
		margin-top: 12px;
		padding: 14px 12px;
	}
}



/*------------------------------ ボタン ------------------------------*/
#top_re_message .btn_re01 {
	max-width: 500px;
    margin: 60px auto 0;
}
@media screen and (max-width: 640px) {
	#top_re_message .btn_re01 {
		max-width: 90%;
		margin: 40px auto 0;
	}
}







/*============================================================================

	TOPICS　＊　お知らせ

============================================================================*/
#top_re_topics {
	position: relative;
	z-index: 1;
	margin-top: -280px;
	height: 1100px;
	box-sizing: border-box;
	padding: 200px 0 0;
	background: url("../images/top/re/bg06.jpg") no-repeat center bottom / cover;
}
#top_re_topics .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title  btn"
		"list   list"
		"banner banner";
}
@media screen and (max-width: 640px) {
	#top_re_topics {
		margin-top: -100px;
		height: auto;
		padding: 110px 0 30px;
		background: url("../images/top/re/bg06.jpg") no-repeat right bottom / cover;
	}
	#top_re_topics .inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"list"
			"btn"
			"banner";
	}
}


/*------------------------------ h2 ------------------------------*/
#top_re_topics h2 {
	margin-bottom: 30px;
	font-size: 32px;
	grid-area: title;
}
#top_re_topics h2 span {
	letter-spacing: 3px;
	color: #f9e4ea !important;
}
@media screen and (max-width: 640px) {
	#top_re_topics h2 {
		font-size: 22px;
	}
}


/*------------------------------ ボタン ------------------------------*/
#top_re_topics .btn_re01 {
	align-self: end;
	width: 270px;
	margin-bottom: 35px;
	grid-area: btn;
}
@media screen and (max-width: 640px) {
	#top_re_topics .btn_re01 {
		align-self: auto;
		width: 100%;
		margin: 30px auto 0;
	}
}


/*------------------------------ お知らせ一覧 ------------------------------*/
#top_re_topics .inner > ul {
	grid-area: list;
}
#top_re_topics .inner > ul li {
	border-bottom: 1px solid #f0e7e9;
}
#top_re_topics .inner > ul a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 30px 120px 30px 35px;
	color: inherit;
	line-height: 1.6;
}
#top_re_topics .date {
	flex-shrink: 0;
	font-size: 20px;
	font-family: "EB Garamond", serif;
}
#top_re_topics .category {
	flex-shrink: 0;
	width: 150px;
	padding: 5px 0 7px;
	box-sizing: border-box;
	background: var(--color-pink-light);
	color: #fff;
	font-family: "Zen Kaku Gothic New", sans-serif;
	text-align: center;
}
#top_re_topics .title {
	flex: 1;
	min-width: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#top_re_topics .inner > ul a:hover {
	background: rgba(236, 117, 150, 0.1);
	padding: 30px 60px 30px 45px;
}
#top_re_topics .inner > ul a::after {
	content: "";
	position: absolute;
	right: 35px;
	top: 50%;
	width: 28px;
	height: 28px;
	transform: translateY(-50%);
	background: url("../images/icon02.png") no-repeat center / contain;
	transition: transform 0.3s ease-out;
}
#top_re_topics .inner > ul a:hover::after {
	transform: translate(7px, -50%);
}
@media screen and (max-width: 640px) {
	#top_re_topics .inner > ul a,
	#top_re_topics .inner > ul a:hover {
		flex-wrap: wrap; 
		gap: 6px 12px;
		padding: 16px 50px 16px 5px;
	}
	#top_re_topics .date {
		font-size: 17px;
	}
	#top_re_topics .category {
		width: 110px;
		padding: 1px 0 3px;
		font-size: 14px;
	}
	#top_re_topics .title {
		flex-basis: 100%;
		font-size: 16px;
		white-space: normal;
	}
	#top_re_topics .inner > ul a::after {
		right: 10px;
		width: 25px;
		height: 22px;
	}
}


/*------------------------------ バナー（既存の #top_banner に追加で指定） ------------------------------*/
#top_re_banners {
	grid-area: banner;
	margin-top: 20px;
}
#top_re_banners #top_banner {
	gap: 50px;
}
#top_re_banners #top_banner li {
	flex: 1;
}
#top_re_banners #top_banner img {
	display: block;
	width: 100%;
	height: auto;
}
@media screen and (max-width: 640px) {
	#top_re_banners #top_banner {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		margin-top: 40px;
		margin-bottom: 70px;
	}
	#top_re_banners #top_banner li {
		flex: none;
		width: 100%;
		max-width: 330px;
	}
}