#mainVisual .mainVisualBg{
	background-image:url('../img/top/mainVisual.png');
}

/*温熱療法のすすめ*/
#recommended{
	width: 100%;
	max-width: 1300px;
	padding: 140px 0;
	margin:  0 auto;
	position: relative;
	height: 400px;
}
#recommended .cntBox{
	width: 55%;
	position: absolute;
	border-radius: 10px;
	background-color: #fff;
	padding:40px 50px;
	box-shadow: 1px 1px 2px #ddd;
	right: 0;
}
#recommended .cntBox:before{
	content:'';
	width: 50%;
	max-width: 500px;
	height: 350px;
	position: absolute;
	left: -48%;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
	background: url('../img/top/recommended_bg.png')right center/ 100% no-repeat;
}
#recommended .cntTitle{
	padding-bottom: 20px;
}
#recommended .cntBox .cnt{
	width: 100%;
	max-width: 630px;
	border-top: 2px solid #ccc;
	padding-top: 20px;
}
#recommended .cntBox .cnt .cntText{
	padding-left: 20px;
}
#recommended .cntTitle h2{
	margin-bottom: 0;
	border:none;
	padding: 0;
}

/*温熱療法について*/
#service{
	width: 90%;
	max-width: 1000px;
	margin: 50px auto;
	box-shadow: 2px 1px 2px #ddd;
	border-radius: 10px;
	overflow: hidden;
}
#service .cntTitle{
	width: 100%;
	height: 100px;
	background: url('../img/top/serviceTitle_bg.jpg') center/100% no-repeat;
	text-align: center;
	color: #fff;
	padding: 40px 0;
}
#service .cntTitle h2{
	font-size: 2.8rem;
	letter-spacing: 3px;
    text-shadow: 1px 1px 0 rgba(50,50,50,.2);
    margin-bottom: 10px;
}
#service .cntTitle h3{
	font-size: 1.4rem;
	text-shadow: 1px 1px 0 rgba(50,50,50,.2);
	letter-spacing: 2px;
	margin-bottom: 20px;
}
#service .cntTitle p{
	font-size: 1.4rem;
	text-shadow: 1px 1px 0 rgba(50,50,50,.2);
	color: #fff;
	border: 1px solid #fff;
	display: inline-block;
	padding: 0 10px;
	box-shadow: 1px 1px 0 rgba(50,50,50,.1);
}
#service .cntBox{
	padding: 30px 0;
	background-color: #fff;
}
#service .cnt{
	width: 32.5%;
	display: inline-block;
	vertical-align: top;
}

#service .cnt .cntImg{
	width: 90%;
	height: 200px;
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	margin: 0 auto;
}
#service .cnt01 .cntImg{
	background-image: url('../img/top/service01.png');
}
#service .cnt02 .cntImg{
	background-image: url('../img/top/service02.png');
}
#service .cnt03 .cntImg{
	background-image: url('../img/top/service03.png');
}
#service .cnt .cntText{
	border-right: 1px solid #aaa;
	padding: 0 10%;
	text-align: center;
	position: relative;
	height: 200px;
}
#service .cnt03 .cntText{
	border: 0;
}
#service .cnt .cntText .cntIcon{
	width: 50%;
	background-color: #fff;
	padding: 10px 10px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: -40px;
	border-radius: 5px;
}
#service .cnt .cntText .cntIcon p{
	height: 50px;
	position: relative;
	margin-bottom: 5px;
}
#service .cnt .cntText .cntIcon p img{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#service .cnt .cntText .cntIcon h4{
	margin-bottom: 10px;
	width: 150%;
	margin-left: -25%;
	letter-spacing: 2px;
	font-weight: bold;
	color: #333;
}
#service .cnt .cntText .cntIcon h5{
	font-size: 1.3rem;
	width: 150%;
	margin-left: -25%;
	letter-spacing: 1px;
	color: #333;
}
#service .cnt .cntText .serviceText{
	padding-top: 80px;
	font-size: 1.5rem;
}


/*ガンと温熱療法*/
#cancer{
	width: 100%;
	margin: 60px auto;
	position: relative;
	padding-top: 60px;
}
#cancer:before{
	content:'';
	width: 80%;
	max-width: 1600px;
	right: 0;
	position: absolute;
	background-color: rgba(77,144,141,.15);
	height: 95%;
    z-index: -1;
}
#cancer .cntTitle{
	text-align: center;
	margin: 0 auto 60px;
	position: relative;	
	top:-15px;
}
#cancer .cntTitle h2{
	color: #2a7976;
	font-size: 3rem;
	letter-spacing: 4px;
	margin-bottom: 10px;
}
#cancer .cntTitle h3{
	font-size: 1.3rem;
	letter-spacing: 1px;
	color: #333;
}
#cancer .cntBox{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px 0;
}
#cancer .cntBox .cnt{
	width: 45%;
	display: inline-block;
	margin-bottom: 100px;
	vertical-align: top;
	background-color: #43b791;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ccc; 
	position: relative;
}
#cancer .cntBox .cnt:nth-child(odd){
	margin-right: 5%;
	position: relative;
	top: -50px;
}
#cancer .cntBox .cnt .cntImg{
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
} 
#cancer .cntBox .cnt01 .cntImg{
	height: 300px;
	background-image: url('../img/top/cancerImg01.jpg');
}
#cancer .cntBox .cnt02 .cntImg{
	height: 350px;
	background-image: url('../img/top/cancerImg02.jpg');
}
#cancer .cntBox .cnt03 .cntImg{
	height: 310px;
	background-image: url('../img/top/cancerImg03.jpg');
}
#cancer .cntBox .cnt04 .cntImg{
	height: 320px;
	background-image: url('../img/top/cancerImg04.jpg');
}
#cancer .cntBox .cntTextBox h4{
	padding: 15px 40px;
	background-color: #fff;
	font-size: 2rem;
	letter-spacing: 3px;
	position: relative;
	color: #223;
}
#cancer .cntBox .cntTextBox h4 span{
	font-size: 1.6rem;
}
#cancer .cntBox .cntTextBox h4:before{
	content:'';
	width: 4px;
	height: 25px;
	position: absolute;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f08c1e+0,ea5a24+100 */
	background: rgb(240,140,30); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(240,140,30,1) 0%, rgba(234,90,36,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(240,140,30,1) 0%,rgba(234,90,36,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(240,140,30,1) 0%,rgba(234,90,36,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f08c1e', endColorstr='#ea5a24',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
	left: 20px;
	bottom: 0;
	top: 0;
	margin: auto;
}
#cancer .cntBox .cntTextBox .cntText{
	padding: 20px;
}
#cancer .cntBox .cntTextBox .cntText p{
	font-size: 1.4rem;
	color: rgba(255,255,255,.9);
	line-height: 25px;
}
#cancer .cntBox .cnt:after{
	font-size: 9rem;
	position: absolute;
	right: 0;
	top:-8%;
	color: #fff;
	font-family: a-otf-ryumin-pr6n,serif;
	font-weight: 300;
	font-style: normal;
	-webkit-transform: skew(-10deg,0);
	letter-spacing: 2px;
}
#cancer .cntBox .cnt01:after{
	content:'01';
}
#cancer .cntBox .cnt02:after{
	content:'02';
}
#cancer .cntBox .cnt03:after{
	content:'03';
}
#cancer .cntBox .cnt04:after{
	content:'04';
}
#cancer .cntBox .cnt03,#cancer .cntBox .cnt04{
	margin-bottom: 0;
}
/*協会通信*/
#infoBox{
	width: 100%;
	margin: 120px auto 80px;
	position: relative;
}
#infoBox .cntBox{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
#infoBox:before{
	content:'';
	width: 80%;
	max-width: 1600px;
	left: 0;
	top: 100px;
	position: absolute;
	background-color: rgba(77,144,141,.15);
	height: 90%;
    z-index: -1;
}
#infoBox .cntTitle h2{
	margin-bottom: 10px;
}


/*PC*/
@media screen and (min-width:900px){

}
/*TAB*/
@media screen and (max-width:899px){
	/*メインビジュアル*/
	#mainVisual .mainVisualBg{
	    background-position: left top;
	}

	/*温熱療法のすすめ*/
	#recommended{
		padding: 0;
		top:-20px;
		height: 450px;
	}
	#recommended .cntBox{
		width: 80%;
		border-radius: 10px 0 0 10px;
	}
	#recommended .cntBox:before{
		display: none;
	}
	
	/*温熱療法を日々の習慣に。*/
	#service{
		width: 100%;
		border-radius: 0;
	}
	#service .cntTitle{
		background-size: cover;
	}
	#service .cnt{
		display: block;
		width: 80%;
		margin: 50px auto;
		background-color: #f9f8f4;
		border-radius: 8px;
		overflow: hidden;
	}
	#service .cnt .cntImg{
		width: 100%;	
	}
	#service .cnt .cntText{
		border:none;
		height: 230px;
	}
	#service .cnt .cntText .serviceText{
		padding-top: 110px;
	}
	#service .cnt .cntText .cntIcon{
		border-radius: 8px;
	    padding: 10px 10px 20px;
	    background-color: rgba(255,255,255,.9);
	}
	#service .moreBtn{
		bottom: 30px;
	}
	#service .moreBtn a{
	    background: linear-gradient(to right, #ea5a24, #f08c1e);
    	color: #fff;
	}

	/*ガンと温熱療法*/
	#cancer:before{
		width: 100%;
		height: 100%;
	}
	#cancer .cntTitle{
		margin: 0 auto;
	}
	#cancer .cntBox{
		width: 80%;
		padding: 0;
	}
	#cancer .cntBox .cnt{
		width: 100%;
		margin: 50px auto;
	}
	#cancer .cntBox .cnt:nth-child(odd){
		margin-right: 0;
		top:0;
	}
	#cancer .cntBox .cnt01 .cntImg{
		height: 320px;
	}

	/*協会通信*/
	#infoBox:before{
		width: 100%;
		top: 70px;
	}
	#infoBox .cnt{
		background-color: rgba(255,255,255,.85);
	}


}
/*SP*/
@media screen and (max-width:480px){
	/*メインビジュアル*/
	#mainVisual .mainVisualBg{
		background-position: 32% center;
	}
	#mainVisual{
		height: 490px;
	}
	#mainVisual .mainVisualBg #copyText p{
		width: 300px;
	}
	/*温熱療法のすすめ*/
	#recommended{
		height: 550px;
		height: auto;
	}
	#recommended .cntBox{
		width: 90%;
		padding: 30px 0 30px 5%;
		position: static;
		float: right;

	}
	#recommended .cntBox .cnt .cntText{
		padding-left: 0;
		padding-right: 4%;
	}
	#recommended p{
		font-size: 1.5rem;
	}

	/*温熱療法を日々の習慣に。*/
	#service .cnt .cntImg{
		height: 170px;
	}
	#service .cntTitle h2{
		font-size: 2.5rem;
		padding-left: 10px;
	}
	#service .cntTitle p{
		line-height: 25px;
	}
	#service .cnt .cntText{
		height: 240px;
	}
	#service .cnt .cntText .cntIcon{
		width: 80%;
	}
	#service .cnt .cntText .serviceText{
		padding-top: 100px;
	}

	/*ガンと温熱療法*/
	#cancer{
		margin: 60px auto 100px;
	}
	#cancer .cntBox{
		width: 90%;
		min-width: 300px;
		padding: 0;
	}
	#cancer .cntBox .cntTextBox h4{
		font-size: 1.8rem;
		letter-spacing: 1px;
		padding: 17px 10px 17px 40px;
	}
	#cancer .cntBox .cntTextBox .cntText p{
		line-height: 23px;
	}
	#cancer .cntBox .cnt{
		margin: 40px auto;
	}
	#cancer .cntBox .cnt:last-child{
		margin:40px auto 0;
	}
	#cancer .cntBox .cnt01 .cntImg{
		height: 250px;
	}

	/*協会通信*/
	#infoBox {
		margin: 30px auto;
	}
	#infoBox .recent-list:after{
		right: -2%;
	}
	#infoBox:before{
		height: 96%;
	}

}