@charset "utf-8";

/* ページ内リンク
------------------------------------------------------------*/
.page-link{
	padding-top: 100px;
}
.page-link > div{
	padding-bottom: 100px;
	border-bottom: solid 1px #e6e6e6;
}
.page-link ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.page-link li{
	max-width: 309px;
	width: 30%;
	padding: 0 20px 20px;
	border-bottom: solid 1px #1768ff;
	margin: 0 1.5%;
}
.page-link li:nth-child(-n+3){margin-bottom: 35px;}
.page-link li a{
	color: #1768ff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 20px;
	font-family: 'NotoSansJP-Bold';
}
.page-link li a::after{
	content: "";
	width: 10px;
	height: 20px;
	transform: rotate(90deg);
	background-color: #1768ff;
	-webkit-mask: url(../images/arrow.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask: url(../images/arrow.svg) no-repeat center;
    mask-size: contain;
}

/* サービス内容
------------------------------------------------------------*/
.service-li > li{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.service-li > li:not(:last-child){margin-bottom: 100px;}
.service-li li > div{width: calc(100% - 410px - 70px);}
.service-li li > div > p{
	line-height: 2em;
	margin-bottom: 30px;
}
.service-li li > div > a{
	display: flex;
	align-items: center;
	margin-left: auto;
	width: fit-content;
	color: #1768ff;
	font-family: 'NotoSansJP-Bold';
	padding-bottom: 5px;
	border-bottom: solid 1px #1768ff;
	letter-spacing: 0.1em;
}
.service-li li > div > a::after{
	content: "";
	width: 8px;
	height: 16px;
	background-color: #1768ff;
	margin-left: 10px;
	-webkit-mask: url(../images/arrow.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask: url(../images/arrow.svg) no-repeat center;
    mask-size: contain;
}
.service-li li > div > div{margin-bottom: 30px;}
.service-li li > div > div > *{letter-spacing: 0.1em;}
.service-li li > div > div p{
	font-size: 15px;
	color: #f4e051;
	margin-bottom: 5px;
	font-family: 'Lato-Bold';
}
.service-li li > div > div h4{
	font-size: 20px;
	font-family: 'NotoSansJP-Bold';
}
.service-li li > div ul{
	display: flex;
	flex-wrap: wrap;
	max-width: 560px;
}
.service-li li > div ul li{width: 280px;}
.service-li li > div ul li:not(:last-child){margin-bottom: 10px;}
.service-li li > div ul li span{color: #1768ff;}

/* お客様の声
------------------------------------------------------------*/
#voice{background: url("../images/line-bg.webp") center top 30% / contain no-repeat, linear-gradient(135deg,#6f9f8f,#1984bf,#1051ca);}
.voice-li li{
	width: 48%;
	background-color: #f2f7f9;
	padding: 45px 40px;
	border-radius: 10px;
}
.voice-li li:not(:nth-child(n+3)){margin-bottom: 30px;}
.voice-li li img{
	display: block;
	margin: 0 auto 30px;
	border-radius: 5px;
}
.voice-li li > div > *{font-family: 'NotoSansJP-Bold';}
.voice-li li > div > p{
	width: fit-content;
	background: #1768ff;
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
	margin-bottom: 20px;
}
.voice-li li > div > h3{
	font-size: 20px;
	padding-bottom: 20px;
	border-bottom: solid 2px #f4e051;
	margin-bottom: 25px;
	letter-spacing: 0.08em;
}

/* 診療科目・エリアについて
------------------------------------------------------------*/
.subject-area_box{
	background: #fff;
	border-radius: 30px;
	padding: 75px 100px;
}
.subject-area_box h3{
	font-size: 24px;
	position: relative;
	line-height: 1;
	padding-top: 46px;
}
.subject-area_box .subject h3::before,.subject-area_box .area h3::before{
	font-size: 85px;
	color: #f9d52126;
	position: absolute;
	bottom: 0;
	left: 0;
}
.subject-area_box .subject h3::before{content: "SUBJECT";}
.subject-area_box .area h3::before{content: "AREA";}
.subject{
	padding-bottom: 95px;
	border-bottom: solid 1px #e6e6e6;
}
.subject > ul{
	background: #f2f7f9;
	padding: 50px 80px;
	border-radius: 10px;
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
}
.subject ul p{
	font-size: 20px;
	font-family: 'NotoSansJP-Bold';
	padding-left: 30px;
	position: relative;
	letter-spacing: 0.08em;
}
.subject ul p::before{
	content: "";
	width: 16px;
	height: 16px;
	background: #f4de73;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.subject-li{
	display: flex;
	flex-wrap: wrap;
	width: 645px;
	margin: 0 auto;
}
.subject-li li{
	padding: 1% 2%;
	background: #fff;
	border-radius: 5px;
	margin: 1%;
	letter-spacing: 0.08em;
}
.area > div{
	display: flex;
	align-items: center;
}
.area > div > div{
	width: 600px;
	margin-right: 80px;
}
.area > div > img{width: calc(100% - 680px);}
.area ul{
	background: #f2f7f9;
	padding: 30px 40px;
	border-radius: 5px;
	width: 100%;
}
.area ul li:not(:last-child){margin-bottom: 5px;}
.area >  p{
	width: 700px;
	margin: 0 auto;
}

/* 開業サポートプラン
------------------------------------------------------------*/
#plan{background: url("../images/bg_g.webp") top center  / cover no-repeat;}
#plan > div > p{font-size: 22px;}
.plan-li{margin-bottom: 70px;}
.plan-li > li{width: 32%;}
.plan-li > li > p{
	font-size: 24px;
	line-height: 1;
	text-align: center;
	padding: 8px 0;
	width: 165px;
	border-radius: 40px;
	background: #fff;
	margin: 0 auto -20px;
	position: relative;
	z-index: 2;
}
.plan-li > li:first-child > p,.plan-li > li:first-child > div{border: solid 1px #1768ff;}
.plan-li > li:nth-child(2) > p,.plan-li > li:nth-child(2) > div{border: solid 1px #363fe8;}
.plan-li > li:last-child > p,.plan-li > li:last-child > div{border: solid 1px #2c9d5a;}
.plan-li > li:first-child > p{color: #1768ff;}
.plan-li > li:nth-child(2) > p{color: #363fe8;}
.plan-li > li:last-child > p{color: #2c9d5a;}
.plan-li > li > p,.plan-li > li h4{font-family: 'NotoSansJP-Bold';}
.plan-li > li > div{
	border: solid 1px #1768ff;
	background: #fff;
	border-radius: 5px;
}
.plan-li > li h4{
	padding: 45px 0 40px;
	text-align: center;
	font-size: 24px;
	color: #fff;
	letter-spacing: 0.15em
}
.plan-li li:first-child h4{background-color: #1768ff;}
.plan-li li:nth-child(2) h4{background-color: #363fe8;}
.plan-li li:last-child h4{background-color: #2c9d5a;}
.plan-li > li > div > div{padding: 30px 40px;}
.plan-li li .fee{
	position: relative;
	width: 100%;
	padding-bottom: 25px;
	border-bottom: solid 1px #ccc;
	margin-bottom: 30px;
}
.plan-li li .fee::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 25px;
	height: inherit;
}
.plan-li li .fee img{
	display: block;
	margin: 0 auto;
}
.plan-li li:first-child .fee::before{border-bottom: solid 1px #1768ff;}
.plan-li li:nth-child(2) .fee::before{border-bottom: solid 1px #363fe8;}
.plan-li li:last-child .fee::before{border-bottom: solid 1px #2c9d5a;}
.plan-li ul li{
	padding-left: 22px;
	position: relative;
}
.plan-li ul li:not(:last-child){margin-bottom: 8px;}
.plan-li ul li::before{
	content: "";
	width: 13px;
	height: 14px;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.plan-li > li:first-child ul li::before{background: url("../images/check01.webp") center / contain no-repeat;}
.plan-li > li:nth-child(2) ul li::before{background: url("../images/check02.webp") center / contain no-repeat;}
.plan-li .btn{
	color: #fff;
	border-radius: 40px;
	text-align: center;
	padding: 20px 0;
}
.plan-li > li:first-child .btn{background: linear-gradient(to right,#1768ff,#22a9f4);}
.plan-li > li:nth-child(2) .btn{background: linear-gradient(to right,#363fe8,#418af2);}
.plan-li > li:last-child .btn{background: linear-gradient(to right,#2c9d5a,#5baf38);}
.plan-li .btn::after{
	background: #fff;
	right: 20px;
}
.follow-box,.follow-box ul{
	display: flex;
	flex-wrap: wrap;
}
.follow-box{
	max-width: 1000px;
	width: 90%;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 8px #a1b5b799;
	margin: 0 auto;
	background-color: #fff;
}
.follow-box > p{width: 334px;}
.follow-box > p img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.follow-box > div{
	padding: 70px 60px;
	width: calc(100% - 334px);
}
.follow-box h4{
	padding-bottom: 20px;
	border-bottom: solid 1px #e6e6e6;
}
.follow-box li:nth-child(2n+1){width: 240px;}
.follow-box li:not(:last-child){margin-bottom: 8px;}

/* 開業コンサルの流れ
------------------------------------------------------------*/
#flow .title{
	max-width: 1200px;
	margin: 0 auto;
}
.flow-li li{
	width: 31%;
	background-color: #f7f6e8;
	padding: 55px 40px;
	border-radius: 10px;
}
.flow-li li:first-child{padding-bottom: 30px;}
.flow-li li:not(:nth-last-child(-n+3)){margin-bottom: 40px;}
.flow-li li:not(:last-child){position: relative;}
.flow-li li:not(:last-child)::after{
	content: "";
    width: 15px;
    height: 30px;
	background-color: #f9d521;
    position: absolute;
    right: -7%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask: url(../images/arrow.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask: url(../images/arrow.svg) no-repeat center;
    mask-size: contain;
}
.flow-li li h4{
	font-family: 'NotoSansJP-Bold';
	line-height: 1;
	letter-spacing: 0.1em;
	margin-bottom: 25px;
	font-size: 21px;
}
.flow-li li h4 span{
	font-family: 'Lato-Bold';
	color: #1768ff;
	font-size: 28px;
	margin-right: 10px;
}
.flow-li li:first-child div a{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 44px;
	border-radius: 40px;
	background: linear-gradient(to right,#1768ff,#22a9f4);
	font-size: 17px;
}
.flow-form svg{margin-right: 10px;}

/* よくあるご質問
------------------------------------------------------------*/
#faq{
	background-position: center;
	background-repeat: no-repeat;
}
.accordion{
	max-width: 1050px;
	width: 100%;
	margin: 0 auto;
}
.accordion > div{
	border-radius: 10px;
	background-color: #f2f7f9;
}
.accordion > div:not(:last-child){margin-bottom: 30px;}
.accordion dt,.accordion dd{display: flex;}
.accordion dt{
	align-items: center;
	position: relative;
	cursor: pointer;
	padding: 30px 40px;
}
.accordion dt::before,.accordion dt::after{
	content: '';
	width: 16px;
	height: 2px;
	background-color: #1768ff;
	border-radius: 80px;
	position: absolute;
	right: 25px;
	margin: 0 auto;
	transition: .5s cubic-bezier(0.2, 1, 0.3, 1);
}
.accordion dt::after{transform: rotate(90deg);}
.accordion dt.active::after{transform: rotate(180deg);}
.accordion dt.active::before{transform: rotate(-180deg);}
.accordion dt > div{align-items: flex-start;}
.accordion dd{
	display: none;
	padding: 0 40px 40px;
}
.accordion dt p,.accordion dd p{
	display: flex;
	width: calc(100% - 45px);
}
.accordion dt p{
	font-size: 18px;
	font-family: 'NotoSansJP-Bold';
	align-items: center;
}
.accordion dd p{
	letter-spacing: 0.08em;
	line-height: 1.6;
}
.accordion dt p::before,.accordion dd p::before{
	content: "";
	width: 30px;
	margin-right: 15px;
	flex-shrink: 0;
}
.accordion dt p::before{
	background: url("../images/faq_Q.webp") center / contain no-repeat;
	height: 23px;
}
.accordion dd p::before{
	background: url("../images/faq_A.webp") center / contain no-repeat;
	height: 19px;
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* ページ内リンク
	------------------------------------------------------------*/
	.page-link{padding-top: 60px;}
	.page-link > div{padding-bottom: 60px;}
	.page-link li{padding: 0 10px 15px;}
	.page-link li:nth-child(-n+3){margin-bottom: 25px;}
	.page-link li a{font-size: 18px;}
	.page-link li a::after{
		width: 8px;
		height: 16px;
	}

	/* サービス内容
	------------------------------------------------------------*/
	.service-li > li:not(:last-child){margin-bottom: 80px;}
	.service-li li img{width: 350px;}
	.service-li li > div{width: calc(100% - 350px - 40px);}
	.service-li li > div > p{margin-bottom: 20px;}
	.service-li li > div > a::after{
		width: 6px;
		height: 12px;
		margin-left: 8px;
	}
	.service-li li > div > div{margin-bottom: 20px;}
	.service-li li > div > div p{font-size: 13px;}
	.service-li li > div > div h4{font-size: 18px;}
	.service-li li > div ul li{width: 200px;}
	
	/* お客様の声
	------------------------------------------------------------*/
	.voice-li li{padding: 35px 30px;}
	.voice-li li:not(:nth-child(n+3)){margin-bottom: 20px;}
	.voice-li li img{margin-bottom: 20px;}
	.voice-li li > div > p{
		padding: 5px 10px;
		margin-bottom: 10px;
	}
	.voice-li li > div > h3{
		font-size: 18px;
		padding-bottom: 15px;
		margin-bottom: 20px;
	}
	
	/* 診療科目・エリアについて
	------------------------------------------------------------*/
	.subject-area_box{
		border-radius: 20px;
		padding: 60px 50px;
	}
	.subject-area_box h3{
		font-size: 22px;
		padding-top: 30px;
	}
	.subject-area_box .subject h3::before,.subject-area_box .area h3::before{font-size: 60px;}
	.subject{padding-bottom: 60px;}
	.subject > ul{
		padding: 40px 60px;
		border-radius: 5px;
	}
	.subject ul p{
		font-size: 18px;
		padding-left: 20px;
	}
	.subject ul p::before{
		width: 12px;
		height: 12px;
	}
	.area > div > div{
		width: 65%;
		margin-right: 50px;
	}
	.area > div > img{width: 30%;}
	.area ul{padding: 20px 30px;}
	.area >  p{
		max-width: 600px;
		width: 100%;
	}
	
	/* 開業サポートプラン
	------------------------------------------------------------*/
	#plan > div > p,.plan-li ul li{font-size: 18px;}
	.plan-li{margin-bottom: 60px;}
	.plan-li > li > p{
		font-size: 20px;
		width: 145px;
	}
	.plan-li > li h4{
		padding: 35px 0 25px;
		font-size: 20px;
	}
	.plan-li > li > div > div{padding: 25px 20px;}
	.plan-li li .fee{
		padding-bottom: 20px;
		margin-bottom: 25px;
	}
	.plan-li li .fee img{
		height: 28px;
		width: auto
	}
	.plan-li ul li{padding-left: 15px;}
	.plan-li ul li:not(:last-child){margin-bottom: 5px;}
	.plan-li ul li::before{
		width: 10px;
		height: 11px;
	}
	.plan-li .btn{padding: 15px 0;}
	.plan-li .btn::after{right: 15px;}
	.follow-box{border-radius: 5px;}
	.follow-box > p{width: 260px;}
	.follow-box > div{
		padding: 50px 40px;
		width: calc(100% - 260px);
	}
	.follow-box h4{padding-bottom: 10px;}
	.follow-box li:nth-child(2n+1){width: 210px;}
	.follow-box li:not(:last-child){margin-bottom: 5px;}
	
	/* 開業コンサルの流れ
	------------------------------------------------------------*/
	.flow-li li{
		padding: 30px 20px;
		border-radius: 5px;
	}
	.flow-li li:first-child{padding-bottom: 20px;}
	.flow-li li:not(:nth-last-child(-n+3)){margin-bottom: 30px;}
	.flow-li li:not(:last-child)::after{
		width: 10px;
		height: 20px;
	}
	.flow-li li h4{
		margin-bottom: 15px;
		font-size: 18px;
	}
	.flow-li li h4 span{
		font-size: 25px;
		margin-right: 5px;
	}
	.flow-li li:first-child div a{
		width: 85%;
		height: 40px;
		font-size: 15px;
	}
	.flow-form svg{margin-right: 5px;}
	.flow-tel img{
		max-width: 200px;
		width: 80%;
	}
	
	/* よくあるご質問
	------------------------------------------------------------*/
	.accordion > div{border-radius: 5px;}
	.accordion > div:not(:last-child){margin-bottom: 20px;}
	.accordion dt{padding: 20px 30px;}
	.accordion dt::before,.accordion dt::after{
		width: 13px;
		right: 20px;
	}
	.accordion dd{padding: 0 30px 30px;}
	.accordion dt p,.accordion dd p{width: calc(100% - 35px);}
	.accordion dt p{font-size: 16px;}
	.accordion dt p::before,.accordion dd p::before{
		width: 25px;
		margin-right: 10px;
	}
	.accordion dt p::before{height: 20px;}
	.accordion dd p::before{height: 16px;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){

	/* サービス内容
	------------------------------------------------------------*/
	.service-li > li{
		flex-wrap: wrap;
		justify-content: center;
	}
	.service-li li:nth-child(2n){flex-direction:column-reverse;}
	.service-li li img,.service-li li > div{width: 100%;}
	.service-li li img{
		max-width: 600px;
		margin-bottom: 30px;
	}
	.service-li li > div ul{max-width: 100%;}
	.service-li li > div ul li{width: 50%;}
	
	/* お客様の声
	------------------------------------------------------------*/
	#voice{background-size: auto 500px, cover;}
	.voice-li{justify-content: center;}
	.voice-li li{
		max-width: 500px;
		width: 100%;
	}
	.voice-li li:not(:last-child){margin-bottom: 20px;}
	
	/* 診療科目・エリアについて
	------------------------------------------------------------*/
	.subject-li{width: 100%;}
	.area > div{
		flex-wrap: wrap;
		justify-content: center;
	}
	.area > div > div,.area > div > img{width: 100%;}
	.area > div > div{margin: 0 0 30px;}
	.area > div > img{max-width: 250px;}
	
	/* 開業サポートプラン
	------------------------------------------------------------*/
	.plan-li{justify-content: center;}
	.plan-li > li{
		max-width: 450px;
		width: 100%;
	}
	.plan-li > li:not(:last-child){margin-bottom: 30px;}
	.follow-box,.follow-box > p,.follow-box > div{width: 100%;}
	.follow-box{max-width: 550px;}
	.follow-box > p{height: 250px;}
	.follow-box > p img{object-position: 50% 13%;}
	.plan-li > li .btn{text-align: center;}

	/* 開業コンサルの流れ
	------------------------------------------------------------*/
	.flow-li{padding-right: 20px;}
	.flow-li li{
		width: 47.5%;
		padding: 30px 20px;
		border-radius: 5px;
	}
	.flow-li li:not(:last-child){margin-bottom: 30px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* ページ内リンク
	------------------------------------------------------------*/
	.page-link ul{justify-content: space-between;}
	.page-link li{
		width: 48%;
		padding: 0 0 10px;
		margin: 0;
	}
	.page-link li:nth-child(4){margin-bottom: 25px!important;}
	.page-link li a{font-size: 15px;}
	
	/* サービス内容
	------------------------------------------------------------*/
	.service-li li > div ul li{width: 100%;}
	
	/* お客様の声
	------------------------------------------------------------*/
	.voice-li li{padding: 25px 20px;}
	
	/* 診療科目・エリアについて
	------------------------------------------------------------*/
	.subject-area_box{padding: 30px 15px;}
	.subject-area_box h3{font-size: 20px;}
	.subject-area_box .subject h3::before, .subject-area_box .area h3::before{font-size: 50px;}
	.subject > ul,.area ul{padding: 20px 15px;}
	.subject-li li{
		padding: 5px 10px;
		margin: 2%;
	}
		
	/* 開業サポートプラン
	------------------------------------------------------------*/
	.follow-box > p{height: 200px;}
	.follow-box > div{padding: 30px 20px}
	.follow-box li{width: 100%;}
	
	/* 開業コンサルの流れ
	------------------------------------------------------------*/
	.flow-li{padding: 0;}
	.flow-li li{width: 100%;}
	.flow-li li:not(:last-child)::after{
		right: 50%;
		top: 103%;
		transform: translateX(50%) rotate(90deg);
	}
	
	/* よくあるご質問
	------------------------------------------------------------*/
	.accordion dt{padding: 15px 10px;}
	.accordion dt p{font-size: 14px;}
	.accordion dt p::before,.accordion dd p::before{width: 20px;}
	.accordion dt p::before{height: 16px;}
	.accordion dd p::before{height: 13px;}
	.accordion dd{padding: 0 10px 20px;}
}