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


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

	medical.css　＊　診療ページ共通CSS
	使用ページ：皮膚科、歯科各ページ

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

/*------------------------------ 共通inner ------------------------------*/
.medical-inner {
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 100px 0;
}
@media screen and (max-width: 640px) {
	.medical-inner {
		padding: 60px 0;
	}
}

/*------------------------------ 共通セクションリード ------------------------------*/
.medical-section-lead {
	text-align: center;
	line-height: 2.2;
	margin-bottom: 60px;
}
.medical-section-lead em {
	display: block;
	color: var(--color-gold);
	font-family: "Shippori Mincho B1", serif;
	font-size: 24px;
}
@media screen and (max-width: 640px) {
	.medical-section-lead {
		line-height: 2;
		margin-bottom: 40px;
		text-align: left;
	}
	.medical-section-lead em {
		font-size: 18px;
		line-height: 1.8;
		margin-bottom: 10px;
		text-align: center;
	}
}

/*------------------------------ 共通treatment-lead ------------------------------*/
.medical-treatment-lead {
	font-family: "Shippori Mincho B1", serif;
	font-size: 20px;
	color: var(--color-gold);
	letter-spacing: 1px;
	margin-bottom: 7px;
}
@media screen and (max-width: 640px) {
	.medical-treatment-lead {
		font-size: 18px;
	}
}

/*------------------------------ 共通note ------------------------------*/
.medical-note {
	font-size: 13px;
	color: #888;
	margin-top: 12px;
}




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

	.medical-lead　リード（figure + text）

==================================================================*/
.medical-lead {
	display: flex;
	align-items: stretch;
	gap: 80px;
}
.medical-lead figure {
	flex: 0 0 48%;
	overflow: hidden;
	border-radius: 80px 10px 10px 10px;
}
.medical-lead figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.medical-lead .text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 2.2;
	margin-bottom: 0;
}

@media screen and (max-width: 640px) {
	.medical-lead {
		flex-direction: column;
		gap: 30px;
	}
	.medical-lead figure {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 10px 60px 10px 10px;
	}
	.medical-lead .text {
		line-height: 2;
	}
}





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

	.medical-treatment-list　治療リスト（交互レイアウト）

==================================================================*/
.medical-treatment-list {
	display: flex;
	flex-direction: column;
	gap: 70px;
}
.medical-treatment {
	display: flex;
	align-items: stretch;
	gap: 80px;
}
.medical-treatment:nth-child(even) {
	flex-direction: row-reverse;
}
.medical-treatment figure {
	flex: 0 0 45%;
	overflow: hidden;
	border-radius: 80px 10px 10px 10px;
	aspect-ratio: 16 / 10;
}
.medical-treatment:nth-child(even) figure {
	border-radius: 10px 80px 10px 10px;
}
.medical-treatment figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.medical-treatment dl {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.medical-treatment dt {
	font-size: 26px;
	font-family: "Shippori Mincho B1", serif;
	color: var(--color-green);
	letter-spacing: 2px;
	line-height: 1.6;
	margin-bottom: 5px;
}
.medical-treatment dd {
	line-height: 2.2;
}

@media screen and (max-width: 640px) {
	.medical-treatment-list {
		gap: 50px;
	}
	.medical-treatment {
		flex-direction: column !important;
		gap: 20px;
	}
	.medical-treatment figure {
		flex: 0 0 auto;
		width: 100%;
		border-radius: 10px 60px 10px 10px !important;
	}
	.medical-treatment dt {
		font-size: 21px;
		letter-spacing: 0.5px;
		margin-bottom: 5px;
	}
	.medical-treatment dd {
		line-height: 2;
	}
}





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

	.medical-card-list　カードリスト（横並び）

==================================================================*/
.medical-card-list {
	display: flex;
	gap: 60px;
}
.medical-card {
	flex: 1;
	border-radius: 16px;
	overflow: hidden;
}
.medical-card figure {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.medical-card figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 60px 10px;
}
.medical-card > div {
	padding: 30px 0;
}
.medical-card h4 {
	font-size: 24px;
	margin-bottom: 0px;
}

@media screen and (max-width: 640px) {
	.medical-card-list {
		flex-direction: column;
		gap: 20px;
	}
	.medical-card h4 {
		font-size: 22px;
		letter-spacing: 1px;
	}
}




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

	.medical-cooperation　歯科・皮膚科連携

==================================================================*/
.medical-cooperation-head {
	text-align: center;
	line-height: 2.2;
	margin-bottom: 60px;
}
.medical-cooperation-body {
	display: flex;
	align-items: stretch;
	gap: 80px;
}
.medical-cooperation-body figure {
	flex: 0 0 45%;
	overflow: hidden;
	border-radius: 80px 10px 10px 10px;
	aspect-ratio: 16 / 10;
}
.medical-cooperation-body figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.medical-cooperation-body dl {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.medical-cooperation-body dt {
	font-size: 22px;
	font-family: "Shippori Mincho B1", serif;
	color: var(--color-gold);
	letter-spacing: 2px;
	line-height: 1.7;
	margin-bottom: 20px;
}
.medical-cooperation-body dd {
	line-height: 2.2;
}

@media screen and (max-width: 640px) {
	.medical-cooperation-head {
		margin-bottom: 40px;
		line-height: 2;
		text-align: left;
	}
	.medical-cooperation-body {
		flex-direction: column;
		gap: 24px;
	}
	.medical-cooperation-body figure {
		flex: 0 0 auto;
		width: 100%;
		border-radius: 10px 60px 10px 10px;
	}
	.medical-cooperation-body dt {
		font-size: 21px;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}
	.medical-cooperation-body dd {
		line-height: 2;
	}
}


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

	.medical-style-list　診療スタイル（3列）

==================================================================*/
.medical-style-list {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 40px;
}
.medical-style-list li {
	flex: 1;
}
.medical-style-list figure {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 60px 10px;
}
.medical-style-list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.medical-style-list dl {
	margin-top: 20px;
}
.medical-style-list dt {
	font-size: 22px;
	font-family: "Shippori Mincho B1", serif;
	color: var(--color-green);
	letter-spacing: 1px;
	margin-bottom: 10px;
}

@media screen and (max-width: 640px) {
	.medical-style-list {
		flex-direction: column;
		gap: 30px;
	}
	.medical-style-list figure {
		aspect-ratio: 16 / 9;
	}
	.medical-style-list dl {
		margin-top: 14px;
	}
	.medical-style-list dt {
		font-size: 21px;
		margin-bottom: 8px;
	}
}


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

	.medical-message　専門医の想い（figure + text）

==================================================================*/
.medical-message {
	display: flex;
	align-items: stretch;
	gap: 80px;
}
.medical-message figure {
	flex: 0 0 45%;
	overflow: hidden;
	border-radius: 80px 10px 10px 10px;
}
.medical-message figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.medical-message .text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 2.2;
	margin-bottom: 0;
}

@media screen and (max-width: 640px) {
	.medical-message {
		flex-direction: column;
		gap: 30px;
	}
	.medical-message figure {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 10px 60px 10px 10px;
	}
	.medical-message .text {
		line-height: 2;
	}
}




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

	.medical-treatment-listを３列に

==================================================================*/
.medical-treatment-list--row {
	flex-direction: row;
	gap: 40px;
}
.medical-treatment-list--row .medical-treatment {
	flex: 1;
	flex-direction: column;
	gap: 23px;
}
.medical-treatment-list--row .medical-treatment:nth-child(even) {
	flex-direction: column;
}
.medical-treatment-list--row .medical-treatment figure {
	flex: 0 0 auto;
	width: 100%;
	border-radius: 60px 10px;
}
.medical-treatment-list--row .medical-treatment dl {
	justify-content: start;
}
.medical-treatment-list--row .medical-treatment dl dt {
	font-size: 22px;
    letter-spacing: 1px;
	margin-bottom: 15px !important;
}

@media screen and (max-width: 640px) {
	.medical-treatment-list--row {
		flex-direction: column;
	}
}


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

		皮膚科ページ設定

==================================================================*/
#dermatology {
	padding-bottom: 0;
}
#derm-intro {
	background: url("../images/bg_02.jpg");
	background-size: cover;
}
#derm-general {
	background: #fff;
}
#derm-aesthetic {
	background: #f4f3f0;
}
#derm-cooperation {
	position: relative;
	background: url("../images/bg_02.jpg") center top no-repeat;
	background-size: cover;
}
#derm-style {
	position: relative;
}
#derm-style::before {
	position: absolute; content: "";
	width: 500px; height: 100%;
	top: 0; right: 0;
	background: url("../images/bg_03.jpg") center;
}
#derm-message {
	background: linear-gradient(to bottom, #f4f3f0, #fff);
}
@media screen and (max-width: 640px) {
	#derm-intro h3 span {line-height: 1.8;}
	#derm-style::before {
		width: 30%;
		background-size: cover;
	}
}





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

	歯科保険ページ設定

==================================================================*/
#dental-ins {
	padding-bottom: 0;
}
#dental-ins-intro {
	background: url("../images/bg_02.jpg") center top no-repeat;
	background-size: cover;
}
#dental-ins-intro .medical-treatment-lead {
	font-size: 23px;
	line-height: 1.9;
}
#dental-ins-cavity {
	position: relative;
}
#dental-ins-cavity::before {
	position: absolute; content: "";
	width: 500px; height: 100%;
	top: 0; right: 0;
	background: url("../images/bg_03.jpg") center;
}
#dental-ins-cavity dt {
	margin-bottom: 20px;
}
#dental-ins-perio {
	background: #f4f3f0;
}
#dental-ins-perio dt {
	margin-bottom: 20px;
}
#dental-ins-prevention {
	position: relative;
}
#dental-ins-prevention dt {
	margin-bottom: 20px;
}
#dental-ins-prevention::before {
	position: absolute; content: "";
	width: 500px; height: 100%;
	top: 0; right: 0;
	background: url("../images/bg_03.jpg") center;
}
#dental-ins-denture {
	background: #f4f3f0;
}
#dental-ins-denture dt {
	margin-bottom: 20px;
}
#dental-ins-cooperation {
	position: relative;
	background: url("../images/bg_01.jpg") center top -2px no-repeat;
}
#dental-ins-hygiene {
	background: #fff;
}
#dental-ins-message {
	position: relative;
	background: url("../images/bg_02.jpg") center top no-repeat;
	background-size: cover;
}
#dental-ins-message .medical-inner {
	padding-top: 0;
}
@media screen and (max-width: 640px) {
	#dental-ins-intro h3 span { line-height: 1.8;}
	#dental-ins-intro .medical-treatment-lead {
		font-size: 21px;
		line-height: 1.9;
	}
	#dental-ins-cavity::before {
		width: 30%;
		background-size: cover;
	}
	#dental-ins-cavity dt {
		margin-bottom: 10px;
	}
	#dental-ins-prevention dt {
		margin-bottom: 10px !important;
	}
	#dental-ins-prevention dt span {
		font-size: 16px;
		letter-spacing: 0;
	}
	#dental-ins-prevention::before {
		width: 30%;
		background-size: cover;
	}
	#dental-ins-denture dt {
		margin-bottom: 10px;
	}
	#dental-ins-message h3 span { line-height: 1.8;}
}





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

		歯科自費ページ設定

==================================================================*/
#dental-self {
	padding-bottom: 0;
}
#dental-self-intro {
	background: url("../images/bg_02.jpg") center top no-repeat;
	background-size: cover;
}
#dental-self-ceramic {
	position: relative;
}
#dental-self-ceramic::before {
	position: absolute; content: "";
	width: 500px; height: 100%;
	top: 0; right: 0;
	background: url("../images/bg_03.jpg") center;
}
#dental-self-ceramic dt {
	margin-bottom: 20px;
}
#dental-self-whitening {
	background: #f4f3f0;
}
#dental-self-counseling {
	background: #fff;
}
#dental-self-counseling .medical-cooperation-body dt {
	margin-bottom: 10px;
}
#dental-self-counseling .medical-cooperation-body dd:first-of-type {
	margin-bottom: 30px;
}
#dental-self-message {
	background: linear-gradient(to bottom, #f4f3f0, #fff);
}
@media screen and (max-width: 640px) {
	#dental-self-intro h3 span { line-height: 1.8;}
	#dental-self-ceramic h3 span { line-height: 1.8;}
	#dental-self-ceramic::before {
		width: 30%;
		background-size: cover;
	}
	#dental-self-ceramic dt {
		margin-bottom: 10px;
	}
	#dental-self-counseling h3 span { line-height: 1.8;}
}