@charset "utf-8";

/* メインエリア
-------------------------------------------*/
#main_area{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1500px;
	width: 92%;
	margin: 0 auto;
	padding-top: 40px;
}
#main_area > div *{font-weight: bold;}
#main_area > div p{
	font-size: 45px;
	line-height: 1.5;
	letter-spacing: .1em;
	margin-bottom: 1em;
}
#main_area > div span{color: #af1b14;}
#main_area > img{width: 58%;}

/* トップページコンテンツ
-------------------------------------------*/

/* ------------------------------------
   医療コンサルティングのサービス内容
------------------------------------ */
#service{padding-top: 75px;}
.service_l{width: 35%;}
.service_r{
	width: 60%;
	margin-top: 60px;
}
.service_r li:not(:last-child){margin-bottom: 30px;}
.service_r a{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 25px 45px 25px 25px;
	background: rgba(237,227,223,.3);
	border-radius: 20px;
	transition: .2s;
}
.service_r a:hover{box-shadow: inset 0 0 50px rgba(175,27,20,.05);}
.service_r a > p{
	width: 30%;
	background: rgba(237,227,223,.3);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	position: relative;
}
.service_r a > p img{
	max-width: 210px;
	width: 90%;
	transition: .2s;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.service_r a > p img:last-child{opacity: 0;}
.service_r a.active > p img:first-child{opacity: 0;}
.service_r a.active > p img:last-child{opacity: 1;}
.service_r a:hover > p img{transform:translate(-50%,-50%) scale(1.2);}
.service_r a > div{
	width: 65%;
	padding: 40px 0;
}
.service_r a > div h3{
	font-size: 28px;
	margin-bottom: 1em;
}
.service_r a:hover > div h3::after{background-image: url("../images/btn_red2.webp");}
.service_r a > div > p{
	font-size: 18px;
	line-height: 1.8;
}

/* ------------------------------------
   医療コンサルティングが選ばれる理由
------------------------------------ */
.features_title-wrap{
	align-items: flex-end;
	width: calc(100% - 60px);
	margin: 0 auto;
}
.features_title-wrap .title h2{font-size: clamp(30px,2.2vw,35px);}
.features_li li{
	width: calc(100% / 3);
	border-radius: 30px;
	padding: 60px 35px 95px;
}
.features_li li *{
	color: #fff;
	text-shadow: 0 0 5px rgba(91,18,18,.6);
}
.features_li li:first-child{background: url("../images/top/features_bg01.webp") center 30% / cover no-repeat;}
.features_li li:nth-child(2){background: url("../images/top/features_bg02.webp") center / cover no-repeat;}
.features_li li:nth-child(3){background: url("../images/top/features_bg03.webp") center 30% / cover no-repeat;}
.features_li li > div p{
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #fff;
	width: 75px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: relative;
	margin: 0 auto 60px;
}
.features_li li > div p::after{
	content: "";
	width: 1px;
	height: 30px;
	background: linear-gradient(to bottom,#fff 3px,transparent 3px) center / 1px 6px repeat-y;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.features_li li > div p span{
	font-family: 'Montserrat-Regular', sans-serif;
	font-size: 25px;
}
.features_li li > div h3{
	font-size: clamp(22px,1.6vw,25px);
	text-align: center;
	margin-bottom: 1em;
	line-height: 1.5;
}
.features_li li > p{
	font-size: 18px;
	line-height: 1.7;
}

/* ------------------------------------
   代表コンサルタント高山からのご挨拶
------------------------------------ */
#message{position: relative;}
#message::before,#message::after{
	content: "";
	position: absolute;
	z-index: -1;
}
#message::before{
	background: url("../images/top/message_bg01.webp") center / contain no-repeat;
	right: 0;
	top: 0;
	width: 500px;
	aspect-ratio: 1/1.04;
}
#message::after{
	background: url("../images/top/message_bg02.webp") center / contain no-repeat;
	left: 0;
	bottom: -140px;
	width: 435px;
	aspect-ratio: 1/1.8;
}
.message_title{
	width: 37%;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}
.message_con{
	width: 53%;
	margin-top: 155px;
}
.message_con .btn2{
	margin: 0 0 0 auto;
	display: block;
}

/* ------------------------------------
   ご利用開始までの流れ
------------------------------------ */
.step_li li{
	background: #fff;
	border-radius: 20px;
	position: relative;
	padding: 45px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
}
.step_li li:not(:last-child){margin-bottom: 25px;}
.step_li li::after{
	content: "";
	width: 23%;
	aspect-ratio: 1/1;
}
.step_li li:first-child::after{background: url("../images/top/step01.png") center / contain no-repeat;}
.step_li li:nth-child(2)::after{background: url("../images/top/step02.png") center / contain no-repeat;}
.step_li li:nth-child(3)::after{background: url("../images/top/step03.webp") center / auto 90% no-repeat;}
.step_li li:nth-child(4)::after{background: url("../images/top/step04.png") center / 90% auto no-repeat;}
.step_li li:nth-child(5)::after{background: url("../images/top/step05.png") center / contain no-repeat;}
.step_li li > p{
	position: absolute;
	left: 25px;
	top: 25px;
}
.step_li li > div{width: 73%;}
.step_li h3{
	font-size: 28px;
	margin-bottom: 1em;
}
.step_li li > div p{
	font-size: 18px;
	line-height: 1.5;
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* メインエリア
	-------------------------------------------*/
	#main_area{padding-top: 30px;}
	#main_area > div p{font-size: 33px;}
	
	
	/* ------------------------------------
	   医療コンサルティングのサービス内容
	------------------------------------ */
	#service{padding-top: 50px;}
	.service_r{margin-top: 40px;}
	.service_r li:not(:last-child){margin-bottom: 20px;}
	.service_r a{
		padding: 20px 35px 20px 20px;
		border-radius: 15px;
	}
	.service_r a:hover{box-shadow: inset 0 0 30px rgba(175,27,20,.05);}
	.service_r a > div{padding: 25px 0;}
	.service_r a > div h3{font-size: 22px;}
	.service_r a > div > p{font-size: 14px;}
	
	/* ------------------------------------
		医療コンサルティングが選ばれる理由
	------------------------------------ */
	.features_title-wrap{width: calc(100% - 40px);}
	.features_title-wrap .title h2{font-size: 23px;}
	.features_li li{
		border-radius: 20px;
		padding: 40px 16px 60px;
	}
	.features_li li > div p{
		width: 50px;
		margin-bottom: 45px;
	}
	.features_li li > div p::after{
		height: 20px;
		background: linear-gradient(to bottom,#fff 2px,transparent 2px) center / 1px 4px repeat-y;
	}
	.features_li li > div p span{font-size: 20px;}
	.features_li li > div h3{font-size: 18px;}
	.features_li li > p{font-size: 14px;}
	
	/* ------------------------------------
	   代表コンサルタント高山からのご挨拶
	------------------------------------ */
	#message::before{width: 380px;}
	#message::after{
		bottom: -90px;
		width: 360px;
	}
	.message_con{margin-top: 100px;}
	
	/* ------------------------------------
	   ご利用開始までの流れ
	------------------------------------ */
	.step_li li{
		border-radius: 15px;
		padding: 35px;
	}
	.step_li li:not(:last-child){margin-bottom: 15px;}
	.step_li li > p{
		left: 15px;
		top: 15px;
	}
	.step_li li > p img{width: 40px;}
	.step_li h3{font-size: 20px;}
	.step_li li > div p{font-size: 14px;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* メインエリア
	-------------------------------------------*/
	#main_area{padding-top: 40px;}
	#main_area > div{margin-bottom: 30px;}
	#main_area > div p{font-size: 30px;}
	#main_area > img{width: 100%;}
	
	/* ------------------------------------
	   医療コンサルティングのサービス内容
	------------------------------------ */
	.service_l,.service_r{width: 100%;}
	.service_l{margin-bottom: 50px;}
	.service_r{margin: 0;}
	.service_r a{padding: 20px 20px 35px;}
	.service_r a > *{width: 100%!important;}
	.service_r a > p{
		height: 195px;
		margin-bottom: 30px;
	}
	.service_r a > p img{max-width: 180px;}
	.service_r a > p img:first-child{opacity: 0;}
	.service_r a > p img:last-child{opacity: 1;}
	.service_r a > div{padding: 0;}
		
	/* ------------------------------------
		医療コンサルティングが選ばれる理由
	------------------------------------ */
	.features_title-wrap{width: 100%;}
	.features_title-wrap .title{margin-bottom: 30px;}
	.features_li li{width: 100%;}
	
	/* ------------------------------------
	   代表コンサルタント高山からのご挨拶
	------------------------------------ */
	.message_title,.message_con{width: 100%!important;}
	.message_title{margin-bottom: 40px;}
	.message_title .title{margin-bottom: 30px;}
	.message_title > img{width: 100%;}
	.message_con{margin: 0;}
	
	/* ------------------------------------
	   ご利用開始までの流れ
	------------------------------------ */
	.step_li li{padding: 40px 20px 40px;}
	.step_li li::after{
		width: 220px;
		margin: 0 auto 30px;
		order: 1;
	}
	.step_li li:nth-child(3)::after,.step_li li:nth-child(4)::after{
		background-size: contain;
		aspect-ratio: 1/.7;
	}
	.step_li li > div{
		width: 100%;
		order: 2;
	}
	
}