@charset "utf-8";

@import "base_layout.css";
@import "common_parts.css";

#page_top{
	text-align: center;
}
#frameTopMsg{
	margin: 0 auto;
	padding: 30px;
	width: 1100px;
	/*height: 434px;*/
	background: url("../../img/toppage/bg_board.jpg");
	background-size: 100%; 
	text-align: center;
	box-shadow:0px 0 6px #888;
	-moz-box-shadow:0px 0 6px #888;
	-webkit-box-shadow:0px 0 6px #888;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: 700;
}
#frameTopMsg p{
	padding: 110px 20px 160px 20px;
	width: 100%;
	font-size: 35px;
	color: #40342e;
	text-shadow: #FFF 1px 1px 2px, #FFF -1px 1px 2px, #FFF 1px -1px 2px, #FFF -1px -1px 2px;
	background: url("../../img/toppage/image_top_bg2.jpg") no-repeat center center;
	background-size: cover;
	box-shadow:0px 0 6px 1px #333 inset;
	-moz-box-shadow:0px 0 6px 1px #333 inset;
	-webkit-box-shadow:0px 0 6px 1px #333 inset;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#frameTopMsg p span{
	font-size: 130%;
}
#frameTopMsg p span:nth-child(1){
	color: #ed6363;
}
#frameTopMsg p span:nth-child(2){
	color: #363696;
}

.btnRecruit{
	background: url(../../img/common/bg_texture.png) repeat #268500;
	border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	padding: 0 0 0 10px;
	width: 300px;
	margin-left: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 21px;
	text-align: center;
}

.btnRecruit a{
	color: #FFF;
	text-decoration: none;
	display: block;
	background: url(../../img/toppage/icon_recruit.svg) no-repeat left center;
	-moz-background-size: 30px auto;
	-webkit-background-size: 30px auto;
	background-size: 30px auto;
	padding: 10px 15px 10px 40px;
}

.btnInfo{
	padding: 20px 0 0 10px;
	width: auto;
}
.btnInfo img{
	max-width:100%;
	height:auto;
	display: inline-block;
}

@media screen and (max-width: 620px){
.btnInfo{
	padding: 10px auto;
	width: auto;
	text-align: center;
}
.btnInfo img{
	max-width:100%;
	height:auto;
	display: block;
	margin: 3px auto 0;
}
}
@media screen and (max-width: 480px){
.btnInfo{
	padding: 10px auto;
	width: 95%;
	margin-right: auto;
}
.btnInfo img{
	max-width:100%;
	height:auto;
}
}
@media screen and (max-width: 400px){
.btnRecruit{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 7px auto auto;
	width: 98%;
}

}


/*--------------------▽--------------------*/
@media screen and (max-width: 979px){
	#frameTopMsg{
		width: 100%;
	}
	#frameTopMsg p{
		padding: 90px 20px 120px 20px;
	}
}
@media screen and (max-width: 768px){
	#frameTopMsg p{
		padding: 70px 20px 110px 20px;
		font-size: 28px;
	}
}
@media screen and (max-width: 620px){
	#frameTopMsg{
		padding: 20px;
	}
	#frameTopMsg{
		background: url("../../img/common/bg_board2.jpg");
		background-size: 100%; 
	}
	#frameTopMsg p{
		padding: 36px 10px 70px 10px;
		font-size: 21px;
		background-size: auto 115%;
	}
}
@media screen and (max-width: 480px){
	#frameTopMsg p{
		padding: 30px 10px 50px 10px;
		font-size: 18px;
	}
}
/*--------------------▲--------------------*/


.section{
	padding: 30px 0;
	width: 100%;
	min-width: 1100px;
}
.section:nth-child(even){
	background: url("../../img/common/bg2.jpg") ;
	box-shadow:0px -1px 10px #888;
	-moz-box-shadow:0px -1px 10px #888;
	-webkit-box-shadow:0px -1px 10px #888;
}

.sectionTitle {
	padding: 30px 0;
	text-align: center;
}
.sectionTitle .title_1{
	margin-bottom: 20px;
	color: #55473b;
	font-size: 35px;
	line-height: 1.4;
	font-weight: bold;
}
.sectionTitle .title_1 br{
	display: none;
}
.sectionTitle .title_1 .emp{
	padding: 0 2px 0px 5px;
	font-size: 130%;
	display: inline-block;
}
.sectionTitle .title_1 .green{
	color: #4b872a;
}
.sectionTitle .title_1 .blueGreen{
	color: #306777;
}
.sectionTitle .title_1 .orange{
	padding-bottom: 10px!important;
	color: #df6401;
	background: url("../../img/common/wave_orange.png") repeat-x bottom;
}
.sectionTitle .subTitle{
	font-size: 18px;
	color: #7f7069;
}

/*--------------------▽--------------------*/
@media screen and (max-width: 979px){
	.section{
		padding: 10px 0 30px 0;
		min-width: 0;
	}
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 620px){
}
@media screen and (max-width: 480px){
	.sectionTitle .title_1{
		font-size: 30px;
	}
	.sectionTitle .title_1 br{
		display: block;
	}
}
/*--------------------▲--------------------*/



#frameCategory{
	margin: 0 auto;
	padding-top: 100px;
	width: 100%;
	height: 650px;
	background: url("../../img/common/icon_title_bottom.png") no-repeat top center;
	position: relative;
}
#frameCategory #circleChart{
	position: absolute;
	top: 100px;
	left: 268px;
	width: 563px;
	height: 563px;
}

#frameCategory #list_1{
	position: absolute;
	top: 100px;
	left: 10px;
	width: 300px;
	height: 600px;
}

#frameCategory #list_2{
	position: absolute;
	top: 100px;
	right: 10px;
	width: 250px;
	height: 600px;
}
#frameCategory ul.cmt {
	color: #372817;
	font-size: 14px;
}
#frameCategory ul.cmt li{
	margin-bottom: 40px;
}
#frameCategory ul.cmt li p{
	line-height: 1.4;
}
#frameCategory ul.cmt h3{
	font-size: 23px;
}
#frameCategory ul.cmt li.c1 h3{
	color: #00b964;
}
#frameCategory ul.cmt li.c2 h3{
	color: #cca137;
}
#frameCategory ul.cmt li.c3 h3{
	color: #cc6337;
}
#frameCategory ul.cmt li.c4 h3{
	color: #cc637d;
}
#frameCategory ul.cmt li.c5 h3{
	color: #cc8b96;
}
#frameCategory ul.cmt li.c6 h3{
	color: #7e7996;
}
#frameCategory ul.cmt li.c7 h3{
	color: #007996;
}
#frameCategory ul.cmt li.c8 h3{
	color: #00b296;
}

/*--------------------▽--------------------*/
@media screen and (max-width: 979px){
#frameCategory{
	margin: 0 auto;
	padding-top: 100px;
	width: 98%;
	height: auto;
	position: static;
}
#frameCategory #circleChart{
	position: static;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	text-align: center;
}
#frameCategory #list_1,
#frameCategory #list_2{
	position: static;
	top: 0;
	left: 0;
	margin: 0 3% 0 5%;
	width: 42%;
	height: auto;
	float: left;
}
#frameCategory #list_1 br{
	display: none;
}
#frameCategory .explaine {
	margin-top: 30px;
}
#frameCategory .explaine:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}
* html #frameCategory .explaine{
    height: 1em;
}
#frameCategory .explaine{
    display: block;
}
*:first-child+html #frameCategory .explaine{
	zoom:1;
}
}
@media screen and (max-width: 768px){
#frameCategory{
	padding-top: 70px;
	background-size: auto 42px;
}
.sectionTitle .title_1{
	font-size: 23px;
}
.sectionTitle .subTitle{
	font-size: 16px;
}
#frameCategory #list_1,
#frameCategory #list_2{
	margin: 0 2%;
	width: 46%;
}
#frameCategory ul.cmt h3{
	font-size: 21px;
}
}
@media screen and (max-width: 620px){
#frameCategory #list_1,
#frameCategory #list_2{
	margin: 0 auto;
	width: 96%;
	float: none;
}
#frameCategory ul.cmt li{
	margin-bottom: 20px;
}
}
@media screen and (max-width: 480px){
#frameCategory #list_1,
#frameCategory #list_2{
	width: 100%;
}
}
/*--------------------▲--------------------*/


/* 健康測定
********************************************************************/
#frameOverview{
	margin-top: 30px;
	padding-right: 5px;
	padding-bottom: 30px;
	width:100%;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	counter-reset: cnt;
}
#frameOverview .frame{
	width: 33%;
}

#frameOverview .frame .ttl {
	margin-left: 20px;
	font-size: 23px;
	font-weight: bold;
}
#frameOverview .frame .ttl:before{
	margin: 0 15px 0 0;
	width: 89px;
	height: 74px;
	text-align: center;
	line-height: 64px;
	counter-increment: cnt;
	content: "その" counter(cnt) ;
	color: #FFF;
	background: url("../../img/toppage/fukidashi_green.png") no-repeat;
	float: left;
}
#frameOverview .frame .ttl h2{
	padding-top: 8px;
	height: 4em;
	font-size: 23px;
	line-height: 1.2;
	color: #23991d;
}
#frameOverview .frame .ttl:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}
* html #frameOverview .frame .ttl{
    height: 1em;
}
#frameOverview .frame .ttl{
    display: block;
}
*:first-child+html #frameOverview .frame .ttl{
	zoom:1;
}

#frameOverview .frame .box{
	clear: both;
	width: 100%;
	height: 340px;
	position: relative;
}
#frameOverview .frame .box .arrow{
	position: absolute;
	top: 45%;
	left: 2px;
	width: 35px;
	height: 35px;
	content: url("../../img/common/arrow_brown.png");
	z-index: 200;
}
#frameOverview .frame .box .inner{
	position: absolute;
	top: 0;
	left: 17px;
	height: 100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0px 0 6px #888;
	-moz-box-shadow:0px 0 6px #888;
	-webkit-box-shadow:0px 0 6px #888;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#frameOverview .frame .box .illust1{
	padding: 30px 25px;
	background: #fff url("../../img/toppage/illust_1.png") no-repeat right bottom;
}
#frameOverview .frame .box .illust2{
	padding: 30px 25px 150px 25px;
	background: #fff url("../../img/toppage/illust_2.png") no-repeat right bottom;
}
#frameOverview .frame .box .illust3{
	padding: 30px 25px 150px 25px;
	background: #fff url("../../img/toppage/illust_3.png") no-repeat center bottom;
}
#frameOverview .frame .box .inner .illust_diagnosis{
	margin-top: 20px;
	padding-right: 80px;
	font-size: 12px;
}
#frameOverview .frame .box .inner .illust_diagnosis img{
	margin-right: 10px;
	display: block;
	float: left;
}
#frameOverview .frame .box .inner .illust_diagnosis p{
	padding-top: 5px;
}

/*--------------------▽--------------------*/
@media screen and (max-width: 979px){
	#frameOverview .frame .ttl {
		margin-left: 10px;
	}
	#frameOverview .frame .ttl h2{
		height: 4em;
		font-size: 21px;
	}
	#frameOverview .frame .box .illust1{
		padding: 30px 10px 30px 25px;
		background-size: 36%;
	}
	#frameOverview .frame .box .illust2{
		padding: 30px 10px 150px 25px;
		background-size: 94%;
	}
	#frameOverview .frame .box .illust3{
		padding: 30px 10px 150px 25px;
	}
	#frameOverview .frame .box .inner .illust_diagnosis img{
		display: none;
	}
}
@media screen and (max-width: 920px){ /* 特別設定 */
	#frameOverview .frame .ttl h2{
		height: 4em;
		font-size: 18px;
	}
	#frameOverview .frame .ttl h2 br{
		display: none;
	}
	#frameOverview .frame .box{
		height: 405px;
	}
}
@media screen and (max-width: 768px){
	#frameOverview{
		padding-right: 0;
	}
	#frameOverview{
		display: block;
	}
	#frameOverview .frame{
		margin: 0 auto;
		width: 92%;
	}
	#frameOverview .frame .ttl h2 {
		padding-top: 1em;
		height: 80px;
		font-size: 21px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	#frameOverview .frame .box{
		height: auto;
		position: static;
	}
	#frameOverview .frame .box .illust1{
		padding: 30px 25px 30px 25px;
		background-size: auto 60%;
	}
	#frameOverview .frame .box .illust2{
		padding: 30px 25px 150px 25px;
		background-size: auto;
	}
	#frameOverview .frame .box .illust3{
		padding: 30px 25px 150px 25px;
	}
	#frameOverview .frame .box .arrow{
		display: none;
	}
	#frameOverview .frame .box .inner{
		position: static;
		top: auto;
		left: auto;
		height:auto;
	}
	#frameOverview .frame:after{
		margin: 5px auto 0 auto;
		width: 32px;
		display: block;
		content: url("../../img/common/arrow_brown2.png");
	}
	#frameOverview .frame:last-child:after{
		display: none;
	}
	#frameOverview .frame .box .inner .illust_diagnosis img{
		display: block;
	}
}
@media screen and (max-width: 620px){
	#frameOverview .frame{
		width: 98%;
	}
	#frameOverview .frame .ttl{
		margin-bottom: 5px;
	}
	#frameOverview .frame .ttl h2{
		height: auto;
	}
	#frameOverview .frame .box .illust1{
		background-size: auto 46%;
	}
}
@media screen and (max-width: 480px){
	#frameOverview .frame .ttl h2{
		padding-top: 15px;
		font-size: 18px;
	}
	#frameOverview .frame .box .illust1{
		padding: 20px 15px 80px 15px;
		background-size: auto 100px;
	}
	#frameOverview .frame .box .illust2{
		padding: 20px 15px 100px 15px;
		background-size: auto 100px;
	}
	#frameOverview .frame .box .illust3{
		padding: 20px 15px 100px 15px;
		background-size: auto 100px;
	}
	#frameOverview .frame .box .inner .illust_diagnosis{
		padding-right: 0px;
		font-size: 13px;
	}
}
/*--------------------▲--------------------*/