@charset "utf-8";
.page_title{
	background: #F3F0EB;
	padding: 40px 0 35px;
	text-align: center;
}
.pageBody{
	margin: 35px auto 50px;
	max-width: 1000px;
}
.contents{
}
h2.hLine{
	position: relative;
	padding: 40px 0;
	font-size: 24px;
	text-align: center;
}
h2.hLine:before{
	content:'';
	border: solid 2.5px #E3C500;
	position: absolute;
	top: 50%;
	left: -3px;
	margin-top: -2.5px;
	width: 37%;
	-webkit-border-radius: 2.5px;
	-moz-border-radius: 2.5px;
	border-radius: 2.5px;
}
h2.hLine:after{
	content:'';
	border: solid 2.5px #E3C500;
	position: absolute;
	top: 50%;
	right: -3px;
	margin-top: -2.5px;
	width: 37%;
	-webkit-border-radius: 2.5px;
	-moz-border-radius: 2.5px;
	border-radius: 2.5px;
}

.tab {
	display: block;
}

/*tabMenu
-------------------*/
#tabMenu{
	margin: 55px 0 40px;
}
#tabMenu li{
  	float: left;
	margin-left: 2%;
	width: 32%;
}
#tabMenu li:first-child{
	margin-left: 0;
}
#tabMenu li a{
	position: relative;
	display:block;
	background: #66D0D0;
	color: #FFF;
	padding: 15px 5px;
	width:100%;
	font-size: 17px;
	text-align:center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#tabMenu li a:hover,
#tabMenu li a.current{
	background: #138C8F;
	opacity: 1;
}
#tabMenu li a:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	background-repeat: no-repeat;
	background-position: center bottom;
	margin: auto;
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
}
#tabMenu li#tabMenu01 a:before{
	background-image: url(../img/occupation/tabBox1_off.png);
	top: -29px;
	width: 53px;
	height: 29px;
}
#tabMenu li#tabMenu02 a:before{
	background-image: url(../img/occupation/tabBox2_off.png);
	top: -32px;
	width: 62px;
	height: 32px;
}
#tabMenu li#tabMenu03 a:before{
	background-image: url(../img/occupation/tabBox3_off.png);
	top: -33px;
	width: 54px;
	height: 33px;
}
#tabMenu li#tabMenu01 a:hover:before,
#tabMenu li#tabMenu01 a.current:before{
	background-image: url(../img/occupation/tabBox1_on.png);
}
#tabMenu li#tabMenu02 a:hover:before,
#tabMenu li#tabMenu02 a.current:before{
	background-image: url(../img/occupation/tabBox2_on.png);
}
#tabMenu li#tabMenu03 a:hover:before,
#tabMenu li#tabMenu03 a.current:before{
	background-image: url(../img/occupation/tabBox3_on.png);
}
#tabMenu li a:after{
	content: "";
	position: absolute;
	bottom: 2px;
	left: 0;
	right: 0;
	margin: auto;
	width: 5px;
	height: 7px;
	border: 5px solid transparent;
	border-top: 7px solid #FFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*whiteBox
-------------------*/
.whiteBox{
	background: #fff;
	margin-top: 55px;
}

/*problemBox
-------------------*/
.problemBox{
	position: relative;
	border: solid 4px #ddd;
	background: #fff;
	margin-bottom: 65px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.problemBox:after{
	content: "";
	position: absolute;
	bottom: -84px;
	left: 0;
	right: 0;
	margin: auto;
	width: 40px;
	height: 40px;
	border: 40px solid transparent;
	border-top: 40px solid #00B1B1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.problemBox_inner{
	border: solid 1px #ddd;
}
.problemBox_inner section{
	padding: 0 35px;
}
.problemBox_inner_wrap01{
	background-image: url(../img/occupation/illust01.png);
	background-repeat: no-repeat;
	background-position: 5px 0;
	background-color: #FFF;
	padding: 0 0 0 215px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.problemBox_inner_wrap01.wrap01_design{
	background-image: url(../img/occupation/illust02.png);
	background-position: 0 0;
}
.problemBox_inner_wrap01.wrap01_owner{
	background-image: url(../img/occupation/illust03.png),url(../img/occupation/owner_img01.jpg);
	background-repeat: no-repeat,no-repeat;
	background-position: 0 0,left bottom;
}
.problemBox_inner h2{
	background: url(../img/common/line01.gif) repeat-x bottom left;
	color: #138C8F;
	margin-bottom: 30px;
	padding: 35px 0 30px;
	font-size: 24px;
	font-weight: normal;
	text-align: center;
}
.problemBox_inner h2 span{
	position: relative;
}
.problemBox_inner h2.tit01 span{padding-left: 73px;}
.problemBox_inner h2.tit02 span{padding-left: 82px;}
.problemBox_inner h2.tit03 span{padding-left: 74px;}
.problemBox_inner h2 span:before{
	content: '';
	position: absolute;
	top: 0;
  	left: 0;
}
.problemBox_inner h2.tit01 span:before{background: url(../img/occupation/tabBox1_on.png) no-repeat left top;width: 53px;height: 29px;}
.problemBox_inner h2.tit02 span:before{background: url(../img/occupation/tabBox2_on.png) no-repeat left top;width: 62px;height: 32px;}
.problemBox_inner h2.tit03 span:before{background: url(../img/occupation/tabBox3_on.png) no-repeat left top;width: 54px;height: 33px;}
.problemBox_inner p img.problemBox_img_small{
	float: left;
	margin: 0 25px 10px 0; 
}
.problemBox_inner p span{
	color: #138C8F;
    font-size: 18px;
    font-weight: bold;
}
.list_pic3{
	margin: 30px 0;
}
.inner_wrap01_owner .list_pic3{
	margin: 30px 0 0;
}
.list_pic3 ul{
	border: solid 1px #ddd;
	background: #fff;
	margin-bottom: 30px; 
	padding: 20px 25px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.list_pic3 ul li{
	float: left;
	margin-left: 4.7%; 
	width: 30.2%;
	text-align: center;
}
.list_pic3 ul li:first-child{
	margin-left: 0; 
}
.list_pic3 ul li dt{
	background-color: #138C8F;
	color: #FFF;
	margin-bottom: 8px;  
	padding: 10px 10px 7px;
	font-size: 15px;
	line-height: 1.3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.list_pic3.pink ul li dt{
	background-color: #FD7681;
}
.list_pic3 ul li dd{
	letter-spacing: 0;
}
.list_pic3 ul li dd span{
	display: block;
	margin-top: 5px;
	color: #138C8F;
	font-weight: bold;
	line-height: 1.4;
}

/*solutionBox
-------------------*/
.solutionBox{
	border: solid 4px #ddd;
	background: #fff;
	margin-bottom: 30px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.solutionBox_inner{
	border: solid 1px #ddd;
}
.inner_wrap01{
	background-image: url(../img/occupation/illust04.png);
	background-repeat: no-repeat;
	background-position: 55px 15px;
	background-color: #FFF;
	background-size: 130px auto;
	padding: 35px 35px 35px 250px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.inner_wrap01.inner_wrap01_design{
	background-image: url(../img/occupation/illust04.png),url(../img/occupation/design_img01.jpg);
	background-repeat: no-repeat,no-repeat;
	background-position: 55px 15px,35px bottom;
	background-size: 130px auto,auto;
	margin-bottom: 35px; 
	padding: 35px 35px 0 250px;
}
.inner_wrap01 h2{
	position: relative;
	background:#E5C700;
	color: #fff;
	margin-bottom: 30px;
	padding: 10px;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.2;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.inner_wrap01 h2:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -27px;
	background-image: url(../img/occupation/fukidashi01.png);
	background-position: left top;
	background-repeat: no-repeat;
	margin: auto;
	width: 27px;
	height: 20px;
}
.inner_wrap01 p span{
	color: #138C8F;
	font-size: 18px;
	font-weight: bold;
}
.inner_wrap01 p.notice{
	margin-top: 2em;
	font-size: 12px;
}
.inner_wrap02{
	margin: 25px 0 40px;
	padding: 0 35px;
}
.inner_wrap02 h3{
	border-top: solid 1px #E5C700;
	border-left: solid 1px #E5C700;
	border-right: solid 1px #E5C700;
	margin: 0 auto;
	width: 76%;
	height: 40px;
	line-height:42px;
	font-size: 18px;
	font-weight: normal;
	text-align: center;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.inner_wrap02 div{
	border: solid 1px #E5C700;
	padding: 30px 40px;
}
.inner_wrap02 ul{
	margin-bottom: 20px;
}
.inner_wrap02 ul li{
	float: left;
	background-color: #138C8F;
	background-position: center 15px;
	background-repeat: no-repeat;
	border-radius: 5px;
	color: #FFF;
	margin-left: 2%;  
	padding: 60px 20px 10px;
	width: 32%;
	font-size: 15px;
	line-height: 1.6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.inner_wrap02 ul li:first-child{
	margin-left: 0;
}

.inner_wrap02 ul li:nth-child(1){background-image: url(../img/occupation/index_ico01.png);}
.inner_wrap02 ul li:nth-child(2){background-image: url(../img/occupation/index_ico02.png);}
.inner_wrap02 ul li:nth-child(3){background-image: url(../img/occupation/index_ico03.png);}
.inner_wrap02 div p{
	text-align: center;
}
.inner_wrap02 div p.notice{
	margin-top: 1em;
	font-size: 12px;
}

img.problemBox_img_small,
img.solutionBox_img_small {
    display: none;
}

/*telBox
-------------------*/
.telBox{
	background-color: #00B1B1;
	color: #FFF; 
	padding: 30px 20px 20px;
	text-align: center;
	line-height: 1.6;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
} 
.telBox h2{
	font-size: 20px;
	font-weight: normal;
}
.telBox h2 span{
	display: block;
	font-size: 14px;
}
.telBox p{
	font-size: 36px;
}
.telBox p a{
	color: #FFF;
	line-height: 1.2;
}	

/* All SP & Tablet */
@media screen and (max-width: 999px) {
	.pageBody{
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.tab {
		display: none;
	}

	/*problemBox
	-------------------*/
	.problemBox_inner_wrap01{
		background-size: 145px auto;
		padding: 0 0 0 165px;
	}
	
	/*solutionBox
	-------------------*/
	.inner_wrap01{
		background-position: 25px 15px;
		padding: 35px 35px 35px 200px;
	}
	.inner_wrap01.inner_wrap01_design{
		background-position: 25px 15px,35px bottom;
		background-size: 130px auto,145px auto;
		padding: 35px 35px 0 200px;
	}
	
	/*tabMenu
	-------------------*/
	#tabMenu li a{
		font-size: 14.5px;
		letter-spacing: 0.03em;
	}	
}
/* All SP */
@media screen and (max-width: 639px) {
	.page_title{
		padding: 30px 0;
	}
	.page_title img{
		height: 18px;
	}
	h2.hLine{
		padding: 30px 0;
		font-size: 20px;
	}
	h2.hLine:before{
		border: solid 2px #E3C500;
		margin-top: -3px;
		width: 28%;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	h2.hLine:after{
		border: solid 2px #E3C500;
		margin-top: -3px;
		width: 28%;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	
	/*whiteBox
	-------------------*/
	.whiteBox{
		margin-top: 35px;
	}

	/*tabMenu
	-------------------*/
	#tabMenu{
		margin: 20px 0 35px;
	}
	#tabMenu li{
	  	float: none;
	  	margin-top: 8px;
		margin-left: 0;
		width: 100%;
	}
	#tabMenu li:first-child{
		margin-top: 0;
		margin-left: 0;
	}
	#tabMenu li a{
		padding: 12px 5px;
	}
	#tabMenu li a:before{
		display: none;
	}
	#tabMenu li a:after{
		width: 4px;
		height: 5px;
		border: 4px solid transparent;
		border-top: 5px solid #FFF;
	}

	/*problemBox
	-------------------*/
	.problemBox{
		border: solid 3px #ddd;
		margin-bottom: 45px;
		padding: 7px;
	}
	.problemBox:after{
		bottom: -43px;
		width: 20px;
		height: 20px;
		border: 20px solid transparent;
		border-top: 20px solid #00B1B1;
	}
	.problemBox_inner section{
		padding: 0 5%;
	}
	.problemBox_inner_wrap01{
		background: none !important;
		padding: 0;
	}
	.problemBox_inner h2{
		margin-bottom: 30px;
	    padding: 25px 0 20px;
	    font-size: 20px;
	}
	.problemBox_inner h2 span{display: inline-block;text-align: left;}
	.problemBox_inner h2.tit01 span{padding-left: 63px;}
	.problemBox_inner h2.tit02 span{padding-left: 71px;}
	.problemBox_inner h2.tit03 span{padding-left: 64px;}
	.problemBox_inner h2.tit01 span:before{background-size: 48px;width: 48px;height: 26px;}
	.problemBox_inner h2.tit02 span:before{background-size: 56px;width: 56px;height: 32px;}
	.problemBox_inner h2.tit03 span:before{background-size: 49px;width: 49px;height: 33px;}
	.problemBox_inner p img.problemBox_img_small{
		float: left;
		margin: 0 25px 10px 0; 
	}
	.problemBox_inner_wrap01 p.mb30{
		margin-bottom: 20px !important;
		padding: 0;
	}
	.problemBox_inner p span{
	    font-size: 15px;
	}
	.list_pic3{
		margin: 20px 0;
	}
	.inner_wrap01_owner .list_pic3{
		margin: 20px 0 0;
	}
	.list_pic3 ul{
		margin-bottom: 20px; 
		padding: 15px;
	}
	.list_pic3 ul li{
		float: left;
		margin-left: 2%; 
		width: 32%;
		text-align: center;
	}
	.list_pic3 ul li dt{ 
		padding: 10px 5px 7px;
		font-size: 14px;
	}
	.list_pic3 ul li dd span{
		font-size: 12px;
	}

	/*solutionBox
	-------------------*/
	.solutionBox{
		border: solid 3px #ddd;
		margin-bottom: 20px;
		padding: 7px;
	}
	.inner_wrap01{
		background: none; 
		padding: 5%;
	}
	.inner_wrap01.inner_wrap01_design{
		background: none;
		margin-bottom: 0; 
		padding: 5%;
	}
	.inner_wrap01 h2{
		position: relative;
		margin-bottom: 25px;
		padding-left: 65px; 
		font-size: 16px;
	}
	.inner_wrap01 h2:before{
		top: auto;
		bottom: 0;
		left: 5px;
		background-image: url(../img/occupation/illust04.png);
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 65px auto;
		position: absolute;
		width: 65px;
    	height: 98px;
	}
	.inner_wrap01 p span{
		font-size: 15px;
	}
	.inner_wrap02{
		margin: 10px 0 20px;
		padding: 0 5%;
	}
	.inner_wrap02 h3{
		width: auto;
	    max-width: 350px;
	    font-size: 15px;
	}
	.inner_wrap02 div{
		padding: 15px;
	}
	.inner_wrap02 ul{
		margin-bottom: 20px;
	}
	.inner_wrap02 ul li{
		float: none;
		margin-top: 8px;
		margin-left: 0;  
		padding: 60px 20px 10px;
		width: 100%;
	}
	.inner_wrap02 ul li p{
		text-align: center;
	}
	.inner_wrap02 ul li:first-child{
		margin-top: 0;
		margin-left: 0;
	}
	.inner_wrap02 div p {
	    text-align: left;
	}

	img.problemBox_img_small,
	img.solutionBox_img_small {
		display: block;
	    float: left;
	    margin: 0 25px 10px 0;
	    width: 95px;
	}

	/*telBox
	-------------------*/
	.telBox{
		background-color: #00B1B1;
		color: #FFF; 
		padding: 30px 20px 20px;
		text-align: center;
		line-height: 1.6;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
	} 
	.telBox h2{
		font-size: 16px;
	}
	.telBox h2 span{
		font-size: 12px;
	}
	.telBox p{
		font-size: 28px;
	}
}

/* Portrait */
@media screen and (max-width:479px) {
}