@charset "utf-8";

/* こんな症状でお困りではありませんか？
------------------------------------------------------------*/
.worries{
	padding: 110px 0 150px;
}
.worries ul{
	padding: 50px;
	border-radius: 30px;
}

/* 整形外科疾患
------------------------------------------------------------*/
.rd_w{
	background-image: url("../images/rd_top_l.png"),url("../images/rd_top_r.png");
	background-position: left top,right top;
}
.disease_li li{
	width: 30.7%;
	background-color: #fff;
	margin: 1.3%;
	padding: 45px 30px;
	border-radius: 25px;
}
.disease_li h3{
	padding-bottom: 30px;
	margin-bottom: 25px;
}
.disease_li h3 a{text-decoration: underline;}
@media (any-hover: hover) {.disease_li h3 a:hover{color: #36AEA7;}}
.disease_li .day{
	font-size: 14px;
	margin-bottom: 5px;
}

/* 詳細
------------------------------------------------------------*/
.detail{
	background-color: #fff;
	border-radius: 40px;
	padding: 90px;
}
.detail h2{
	font-size: 28px;
	font-weight: bold;
	border-bottom: 2px #36aea7 dashed;
	padding-bottom: 40px;
	margin-bottom: 50px;
}
#toc{
	margin: 70px 0;
	background-color: #e9f6f3;
	padding: 50px;
	border-radius: 30px;
}
#toc::before{
	content: "目 次";
	display: block;
	font-size: 24px;
	margin-bottom: 25px;
	font-weight: bold;
}
#toc > ul > li:first-child{
	border-top: 2px rgba(128,206,191,0.6) dotted;
	padding-top: 30px;
}
#toc > ul > li:not(:last-child){
	border-bottom: 2px rgba(128,206,191,0.6) dotted;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
#toc > ul > li > a{font-weight: bold;}
#toc > ul > li > ul{padding: 8px 0 0 1.5em;}
#toc > ul > li > ul ul{padding: 8px 0 8px 2em;}
#toc > ul > li li a{
	display: flex;
	align-items: center;
}
#toc > ul > li li a::before{
	content: '';
	width: 18px;
	height: 2px;
	background-color: #36aea7;
	margin-right: 10px;
}
#toc > ul > li li:not(:last-child){margin-bottom: 8px;}
#toc a{
	text-decoration: none;
	color: #3B3A39!important;
}
@media (any-hover: hover) {#toc a:hover{color: #36AEA7!important;}}

.entry p,.entry li,.entry p a{
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
	font-weight: 400;
	font-size: 18px;
}
.entry a{
	text-decoration: underline;
	color: #36aea7!important;
}
.entry p{margin-bottom: 30px;}
.entry strong,.entry h3,.entry h4,.entry h5{font-weight: bold;}
.entry h3{
	font-size: 26px;
	padding: 13px 0 0 35px;
	margin: 80px 0 30px;
	position: relative;
	z-index: 1;
}
.entry h3::before{
	content: '';
	width: 70px;
	height: 70px;
	background-color: rgba(128,206,191,0.6);
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.entry h4{
	font-size: 24px;
	display: flex;
	align-items: flex-start;
}
.entry h4,.entry h5{margin: 60px 0 25px;}
.entry h4::before{
	content: '';
	width: 14px;
	height: 14px;
	background-color: #36aea7;
	border-radius: 50%;
	margin: 13px 10px 0 0;
	flex-shrink: 0;
}
.entry h5{font-size: 22px;}
.entry > ul,.entry > ol{
	background-color: #e9f6f3;
	border-radius: 20px;
	padding: 45px 35px;
	margin-bottom: 30px;
}
.entry > ul li,.entry > ol li{
	display: flex;
	align-items: flex-start;
}
.entry > ul li:not(:last-child),.entry ol li:not(:last-child){margin-bottom: 13px;}
.entry > ul li::before{
	content: '';
	width: 6px;
	height: 6px;
	background: url("../images/arrow_side.png") no-repeat center / contain;
	margin: 12px 10px 0 0;
	flex-shrink: 0;
}
.entry > ol{
	list-style: none;
	counter-reset: number 0;
}
.entry > ol li::before{
	width: 40px;
	font-size: 20px;
	content: "0" counter(number) ".";  
	counter-increment: number 1;
	font-family: "Montserrat", sans-serif!important;
	color: #36aea7;
	font-weight: bold;
}
a.btn{
	max-width: 400px;
	background-color: #fff;
	color: #36aea7;
	margin: 0 auto;
}
a.btn::before{
	background-color: #fff;
	border: 2px #36AEA7 solid;
	right: 12px;
}
a.btn .arrow{background-color: #36AEA7!important;}
a.btn .arrow::before{background: url("../images/arrow_w.png") no-repeat center / contain;}
a.btn .arrow::after{background: url("../images/arrow.png") no-repeat center / contain;}
.pager_box{padding: 60px 0;}

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

	/* こんな症状でお困りではありませんか？
	--------------------------------------*/
	.rd_w{padding-bottom: 65px;}
	.worries{padding: 60px 0 75px;}
	.worries ul{
		padding: 35px 25px;
		border-radius: 15px;
	}
	.disease_li li{
		width: 46%;
		padding: 30px 25px;
		border-radius: 15px;
		margin: 2%;
	}
	.disease_li li:nth-child(-n+2){margin-top: 0;}
	.disease_li h3{
		padding-bottom: 23px;
		margin-bottom: 20px;
	}
	.disease_li .day,.disease_li .day *{font-size: 12px;}
	.mb70{margin-bottom: 45px!important;}
	
	/* 詳細
	--------------------------------------*/
	.detail{
		border-radius: 20px;
		padding: 50px 40px;
	}
	.detail h2{
		font-size: 18px;
		padding-bottom: 30px;
		margin-bottom: 40px;
	}
	#toc{
		margin: 50px 0;
		padding: 35px;
		border-radius: 15px;
	}
	#toc::before{
		font-size: 18px;
		margin-bottom: 20px;
	}
	#toc > ul > li:first-child{padding-top: 25px;}
	#toc > ul > li:not(:last-child){
		padding-bottom: 25px;
		margin-bottom: 25px;
	}
	#toc > ul > li > ul{padding: 5px 0 0 1em;}
	#toc > ul > li > ul ul{padding: 5px 0 5px 2em;}
	#toc > ul > li li a::before{
		width: 15px;
		margin-right: 8px;
	}
	#toc > ul > li li:not(:last-child){margin-bottom: 5px;}

	.entry p,.entry li,.entry p a{font-size: 14px;}
	.entry p{margin-bottom: 20px;}
	.entry h3,.entry h4,.entry h5{font-size: 16px;}
	.entry h3{
		padding: 13px 0 0 15px;
		margin: 40px 0 20px;
	}
	.entry h3::before{
		width: 50px;
		height: 50px;
	}
	.entry h4,.entry h5{margin: 35px 0 15px;}
	.entry h4::before{
		width: 10px;
		height: 10px;
		margin: 8px 8px 0 0;
	}
	.entry > ul,.entry > ol{
		border-radius: 15px;
		padding: 30px 25px;
		margin-bottom: 20px;
	}
	.entry > ul li:not(:last-child),.entry > ol li:not(:last-child){margin-bottom: 10px;}
	.entry > ul li::before{margin: 8px 8px 0 0;}
	.entry > ol li::before{
		width: 32px;
		font-size: 15px;
	}
	.entry img{
		display: block;
		max-width: 450px;
		width: 100%;
		margin: 0 auto;
	}
	a.btn{max-width: 250px;}
	.pager_box{padding: 35px 0;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* こんな症状でお困りではありませんか？
	--------------------------------------*/
	.disease_li li{
		width: 100%;
		margin: 0;
		padding: 28px 20px;
	}
	.disease_li li:not(:last-child){margin-bottom: 25px;}
	.worries ul{padding: 30px 20px;}
	
	/* 詳細
	--------------------------------------*/
	.detail{
		width: 100%;
		padding: 45px 20px;
	}
	.detail h2{
		font-size: 16px;
		padding-bottom: 25px;
		margin-bottom: 35px;
	}
	#toc{
		margin: 45px 0;
		padding: 30px 23px;
		border-radius: 15px;
	}

	.entry h3,.entry h4,.entry h5{font-size: 15px;}
	.entry h4::before{
		width: 7px;
		height: 7px;
	}
	.entry > ul, .entry > ol{padding: 30px 20px 30px 18px;}
	.entry li{line-height: 150%;}
	.entry > ul li::before{
		width: 4px;
		height: 4px;
		margin-right: 5px;
	}
	.entry > ol li::before{
		width: 28px;
		font-weight: 500;
		content: counter(number) "."; 
	}
}