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

	Main visual │ メインビジュアル

--------------------------------------------------*/
#mv {margin-top: -3.2%;}
#mv .container {position: absolute;bottom: 7.5%;left: 0;text-align: right;}
#mv .container .title_wrap {
	margin-bottom: 7%;
	padding: 2.5vw 2.5vw 2.5vw 3.5vw;
	border-radius: 0 1.2em 1.2em 0;
	background: rgba(94, 161, 203, 92%);
}
#mv .container .title_wrap ul {display: flex;flex-wrap: wrap;gap: .6vw;margin-bottom: 1.5%;}
#mv .container .title_wrap ul li {
	padding: .6vw 1vw;
	border-radius: .5vw;
	background: #fff;
	color: #3A7CA5;
	font-size: 1.26vw;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .02em;
}
#mv .container .title_wrap h1 {color: #fff;font-weight: 700;font-size: 3.35vw;line-height: 1.2;}
#mv .container .title_wrap .mv_sub {
	display: inline-block;
	margin-top: 1vw;
	padding: .3vw 1vw;
	border-radius: 2em;
	background: rgba(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, .6);
	color: #fff;
	font-size: 1.5vw;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.6;
}
#mv .container .info_wrap {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 92%;
	padding: 1vw 1vw 1vw 5vw;
	border-radius: .8em;
	background: rgba(255, 255, 255, .85);
}
#mv .container .info_wrap dl {width: 65%;text-align: center;}
#mv .container .info_wrap dl dt {
	display: inline-block;
	position: relative;
	margin-bottom: 3%;
	padding: .2vw 1.5vw;
	color: #3A7CA5;
	font-weight: 500;
	font-size: 1.2vw;
	letter-spacing: .1em;
	text-align: center;
}
#mv .container .info_wrap dl dt::before,
#mv .container .info_wrap dl dt::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: .2vw;
	height: 100%;
	border-radius: .5vw;
	background: #71A1BF;
}
#mv .container .info_wrap dl dt::before {left: 0;}
#mv .container .info_wrap dl dt::after {right: 0;}
#mv .container .info_wrap dl dd {width: 100%;margin: 0 auto;}
#mv .container .info_wrap .content {padding: 2vw 2vw 1vw 1.5vw;border-radius: .5em;background: #F7F3EC;}
#mv .container .info_wrap .content small {display: block;margin-bottom: 10%;color: #606060;font-weight: 500;font-size: .8vw;}
#mv .container .info_wrap .content p {color: #606060;font-weight: 500;font-size: .9vw;}
#mv .container .info_wrap .content p span {font-size: 1.5em;}
#mv .container .info_wrap .content strong {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #ED9100;
	font-weight: 700;
	font-size: 1.5vw;
}
#mv .container .info_wrap .content strong b {margin: 0 .2vw;font-size: 2em;}
@media only screen and ( max-width : 767px ) {
	#mv {}
	#mv .container .title_wrap {padding: 5vw 3.5vw 5vw 5vw;transform: translateY(-7vh);}
	#mv .container .title_wrap ul {margin-bottom: 2%;}
	#mv .container .title_wrap ul li {padding: 1.5vw 2.5vw;font-size: 3.8vw;}
	#mv .container .title_wrap h1 {font-size: 8vw;margin: 1vh 0;}
	#mv .container .title_wrap .mv_sub {margin-top: 1.5vw;padding: .8vw 2.5vw;font-size: 3vw;}
	#mv .container .info_wrap {display: inline-block;padding: 4vw;text-align: center;}
	#mv .container .info_wrap dl {width: 100%;margin-bottom: 5%;}
	#mv .container .info_wrap dl dt {padding: .2vw 3.2vw;font-size: 3vw;}
	#mv .container .info_wrap .content {display: inline-block;padding: 4vw 4vw 2vw 3.5vw;}
	#mv .container .info_wrap .content small {font-size: 2.8vw;}
	#mv .container .info_wrap .content p {font-size: 2.9vw;}
	#mv .container .info_wrap .content strong {font-size: 4.5vw;}
}
/*--------------------------------------------------

	Accept opening staff │ オープニングスタッフ募集のお知らせ

--------------------------------------------------*/
#accept_opening_staff {background: url(../img/front/accept_opening_staff/bg.webp) no-repeat center / cover;}
#accept_opening_staff .wrap p {line-height: 2.7;letter-spacing: .08em;text-align: center;}
/*--------------------------------------------------

	The medical care we aim for │ 当院が目指す医療

--------------------------------------------------*/
#medical_care {z-index: 2;}
#medical_care .title_common p {text-align: left;}
#medical_care .title_common p::before {left: 0;transform: none;}
#medical_care .title_common h2 {text-align: left;}
#medical_care .container {position: relative;flex-direction: row-reverse;}
#medical_care .container .wrap {width: 50%;padding-top: 3%;}
#medical_care .container .wrap figure {position: absolute;top: 0;left: 0;width: 40%;}
#medical_care .container .wrap h3 {margin-bottom: 20px;color: #3A7CA5;font-weight: 500;letter-spacing: .18em;}
#medical_care .container .wrap .content p {margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);letter-spacing: .08em;}
#medical_care .container .wrap .content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 767px ) {
	#medical_care .container .wrap {width: 100%;}
	#medical_care .container .wrap figure {position: initial;width: 70%;margin: 0 auto 30px;}
}
/*--------------------------------------------------

	Message │ 院長メッセージ

--------------------------------------------------*/
#message {margin-bottom: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);}
#message::before {
	content: '';
	position: absolute;
	top: -30%;
	left: -20%;
	z-index: -1;
	width: 50%;
	height: 100%;
	background: url(../img/front/message/bg.webp) no-repeat top left / 100%;
}
#message .block {
	padding: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px) clamp(20px, calc(20px + 80 * ((100vw - 375px) / 1545)), 100px);
	border-radius: 20px;
	box-shadow: 0 0 99px rgba(174, 203, 213, .2);
	background: #fff;
}
#message .block .title_common p {color: #BCBCBC;text-align: left;}
#message .block .title_common p::before {left: 0;transform: none;}
#message .block .title_common h2 {text-align: left;}
#message .block .container {position: relative;}
#message .block .container .wrap.flexbox {width: 71%;}
#message .block .container .wrap.flexbox h3 {
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	font-size: clamp(20px, calc(20px + 8 * ((100vw - 375px) / 1545)), 28px);
	letter-spacing: .1em;
}
#message .block .container .wrap.flexbox h3 span {display: block;color: #4CA8A1;line-height: 1.4;}
#message .block .container .wrap.flexbox figure {position: absolute;top: -10%;right: 0;width: 22%;}
#message .block .container .wrap p {margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);}
#message .block .container .wrap p.txtR {margin-bottom: 0;text-align: right;}
@media only screen and ( max-width : 767px ) {
	#message .block .container .wrap.flexbox {width: 100%;}
	#message .block .container .wrap.flexbox figure {position: initial;width: 200px;margin: 0 auto 30px;}
}
/*--------------------------------------------------

	Job Openings │ 募集職種

--------------------------------------------------*/
#job_openings {
	border-radius: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);
	background: linear-gradient(-45deg, #E4F8F5, #EAF7FF);
}
#job_openings ul {display: grid;grid-template-columns: repeat(6, 1fr);gap: 40px 30px;}
#job_openings ul li {display: flex;flex-direction: column;text-align: center;grid-column: span 2;}
#job_openings ul li:nth-child(4) {grid-column: 2 / span 2;}
#job_openings ul li figure {aspect-ratio: 4/3;margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#job_openings ul li h3 {
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	color: #3A7CA5;
	font-size: clamp(20px, calc(20px + 8 * ((100vw - 375px) / 1545)), 28px);
	letter-spacing: .02em;
	text-align: center;
}
#job_openings ul li h3 span {display: block;font-size: clamp(12px, calc(12px + 8 * ((100vw - 375px) / 1545)), 20px);line-height: 1.4;text-align: center;}
#job_openings ul li p {flex: 1;width: 90%;margin: 0 auto clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#job_openings ul li a {
	position: relative;
	width: 100%;
	max-width: 192px;
	margin: 0 auto;
	padding: 15px 0 15px 45px;
	border-radius: 40px;
	background: #fff;
	letter-spacing: .1em;
}
#job_openings ul li a:hover {background: #71A1BF;color: #fff;}
#job_openings ul li a::before,
#job_openings ul li a::after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	right: 30px;
	width: 10px;
	height: 2px;
	background: #71A1BF;
	transform-origin: calc(100% - 1px) 50%;
	transition: .3s;
}
#job_openings ul li a::before {transform: rotate(45deg);}
#job_openings ul li a::after {transform: rotate(-45deg);}
#job_openings ul li a:hover::before,
#job_openings ul li a:hover::after {background: #fff;}
@media only screen and ( max-width : 1024px ) {
	#job_openings ul {grid-template-columns: repeat(4, 1fr);}
	#job_openings ul li {grid-column: span 2;}
	#job_openings ul li:nth-child(4) {grid-column: 2 / span 2;}
	#job_openings ul li figure {aspect-ratio: 3 / 2;}
}
@media only screen and ( max-width : 500px ) {
	#job_openings ul {grid-template-columns: 1fr;}
	#job_openings ul li {grid-column: span 1;}
	#job_openings ul li:nth-child(4) {grid-column: span 1;}
}
/*--------------------------------------------------

	Benefit │ 当クリニックで働く魅力

--------------------------------------------------*/
#benefit::after {
	content: '';
	position: absolute;
	right: -20%;
	bottom: -16%;
	z-index: -1;
	width: 70%;
	height: 100%;
	background: url(../img/front/benefit/bg.webp) no-repeat right bottom / 100%;
}
#benefit .title_common {margin-bottom: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);}
#benefit ol li {position: relative;margin-bottom: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);}
#benefit ol li:nth-child(even) {flex-direction: row-reverse;}
#benefit ol li:last-child {margin-bottom: 0;}
#benefit ol li .wrap {width: 50%;}
#benefit ol li .wrap h3 {
	position: relative;
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-left: 60px;
	font-weight: 500;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
	letter-spacing: .08em;
}
#benefit ol li .wrap h3 span {
	position: absolute;
	top: 0;
	left: 0;
	color: #7AB6DB;
	font-size: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	letter-spacing: 0;
}
#benefit ol li .wrap figure {position: absolute;top: 0;width: 40%;}
#benefit ol li:nth-child(odd) .wrap figure {right: 0;}
#benefit ol li:nth-child(even) .wrap figure {left: 0;}
#benefit ol li .wrap .content {padding-left: 60px;}
#benefit ol li .wrap .content p {margin-bottom: 20px;}
#benefit ol li .wrap .content p:last-child {margin-bottom: 0;}
#benefit ol li .wrap .content p span {color: #5D9ABF;font-weight: 700;line-height: 1.7;}
@media only screen and ( max-width : 1024px ) {
	#benefit ol li .wrap {width: 56%;}
}
@media only screen and ( max-width : 767px ) {
	#benefit ol li .wrap {width: 100%;}
	#benefit ol li .wrap figure {position: initial;width: 100%;margin-bottom: 20px;}
	#benefit ol li .wrap .content {padding-left: 0;}
}
@media only screen and ( max-width : 500px ) {
#benefit ol li .wrap h3 {padding-left: 40px;}
}
/*--------------------------------------------------

	Clinic Enviroment │ 働く環境・設備

--------------------------------------------------*/
#clinic {padding-bottom: clamp(100px, calc(100px + 100 * ((100vw - 375px) / 1545)), 200px);}
#clinic .container {position: relative;}
#clinic .container .splide_clinic {position: absolute;top: 0;right: 0;width: 45%;padding-right: 40px;}
#clinic .container .splide_clinic .splide_wrap {padding: 18% 0;overflow: hidden;border-radius: 10px;}
#clinic .container .splide_clinic .splide__slide img {height: auto;width: 100%;border-radius: 10px;}
#clinic .container .wrap {width: 48%;}
#clinic .container .clinic_img {width: 42%;border-radius: 10px;overflow: hidden;}
#clinic .container .clinic_img img {width: 100%;height: 100%;object-fit: cover;border-radius: 10px;}
#clinic .container .wrap h3 {
	margin-bottom: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1545)), 50px); 
	color: #3A7CA5;
	font-size: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	line-height: 2;
	letter-spacing: .1em;
}
#clinic .container .wrap p {line-height: 2.5;}
@media only screen and ( max-width : 1024px ) {
	#clinic .container .wrap {width: 50%;}
}
@media only screen and ( max-width : 1024px ) {
	#clinic .container .wrap {width: 50%;}
}
@media only screen and ( max-width : 767px ) {
	#clinic .container {flex-direction: column;}
	#clinic .container .wrap {width: 100%;}
	#clinic .container .wrap h3 {letter-spacing: .05em;text-align: center;}
	#clinic .container .wrap p {line-height: 1.7;}
	#clinic .container .clinic_img {width: 100%;margin-top: 30px;}
	#clinic .container .splide_clinic {position: relative;width: 100%;margin-bottom: 30px;padding: 0 0 40px;}
	#clinic .container .splide_clinic .splide_wrap {padding: 0 18%;}
}
/*--------------------------------------------------

	Doctor introduction │ 医師紹介

--------------------------------------------------*/
#doctor {
	padding: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px) 0 clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);
	border-radius: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px) clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px) 0 0;
	background: #FAF8F5;
}
#doctor .block {border-radius: 20px;background: #fff;}
#doctor .block .title_common p {color: #BCBCBC;}
#doctor .block ul.list {width: 90%;max-width: 920px;margin: 0 auto 40px;}
#doctor .block ul.list:last-child {margin-bottom: 0;}
#doctor .block ul.list li.item:nth-of-type(1) {align-items: center;gap: 20px;}
#doctor .block ul.list li.item figure {width: 200px;}
#doctor .block ul.list li.item figure figcaption {margin-top: 8px;line-height: 1.2;}
#doctor .block ul.list li.item figure figcaption span {display: block;margin-top: 8px;font-size: 1.4em;}
#doctor .block ul.list li.item .container {flex: 1;}
#doctor .block ul.list li.item .container .career_wrap:not(:last-child) {margin-bottom: 30px;}
#doctor .block ul.list li.item .container .career_wrap h3 {font-weight: 700;}
#doctor .block ul.list li.item .container .career_wrap .content:not(:last-child) {margin-bottom: 20px;}
#doctor .block ul.list li.item .container .career_wrap dl dt {float: left;}
#doctor .block ul.list li.item .container .career_wrap dl dd {padding-left: clamp(65px, calc(65px + 20 * ((100vw - 375px) / 1545)), 85px);}
#doctor .block ul.list li.item .blue_wrap {
	display: flex;
	gap: 25px;
	margin-top: 40px;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	background: #ECF6FA;
}
#doctor .block ul.list li.item .blue_wrap .content h3 {font-weight: 700;line-height: 1.7;}
#doctor .block ul.list li.item .blue_wrap .content ul li {position: relative;padding-left: 20px;}
#doctor .block ul.list li.item .blue_wrap .content ul li::before {content: '・';position: absolute;left: 0;}
@media only screen and ( max-width : 767px ) {
	#doctor .block ul.list li.item figure {margin: 0 auto;}
	#doctor .block ul.list li.item .container {flex: inherit;}
	#doctor .block ul.list li.item .blue_wrap {display: block;margin-top: 20px;}
	#doctor .block ul.list li.item .blue_wrap .content:not(:last-child) {margin-bottom: 30px;}
}
#doctor .block ul.list li.item .surgery_wrap {
	margin-top: 30px;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	background: #ECF6FA;
}
#doctor .block ul.list li.item .surgery_wrap h3 {
	margin-bottom: 15px;
	font-weight: 700;
	line-height: 1.7;
}
#doctor .block ul.list li.item .surgery_wrap .total {
	margin-bottom: 20px;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
}
#doctor .block ul.list li.item .surgery_wrap .total strong {
	font-size: 1.2em;
	font-weight: 700;
	color: #3A7CA5;
}
#doctor .block ul.list li.item .surgery_wrap .surgery_table_wrap {display: flex;gap: 30px;align-items: flex-start;}
#doctor .block ul.list li.item .surgery_wrap .surgery_table_wrap .surgery_table {flex: 1;}
#doctor .block ul.list li.item .surgery_wrap .surgery_table {width: auto;border-collapse: collapse;}
#doctor .block ul.list li.item .surgery_wrap .surgery_table tr {border-bottom: 1px solid #C8E3F0;}
#doctor .block ul.list li.item .surgery_wrap .surgery_table tr:last-child {border-bottom: none;}
#doctor .block ul.list li.item .surgery_wrap .surgery_table th {
	padding: 8px 16px 8px 0;
	font-weight: 500;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}
#doctor .block ul.list li.item .surgery_wrap .surgery_table td {
	padding: 8px 0;
	color: #3A7CA5;
	font-weight: 700;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}
#doctor .block ul.list li.item .surgery_wrap .surgery_note {
	margin-top: 12px;
	font-size: .85em;
	color: #666;
	line-height: 1.7;
}
@media only screen and ( max-width : 767px ) {
	#doctor .block ul.list li.item .surgery_wrap .surgery_table_wrap {flex-direction: column;gap: 0;}
	#doctor .block ul.list li.item .surgery_wrap .surgery_table_wrap .surgery_table {width: 100%;}
	#doctor .block ul.list li.item .surgery_wrap .surgery_table_wrap .surgery_table:first-child {border-bottom: 2px solid #C8E3F0;padding-bottom: 4px;margin-bottom: 4px;}
}