@charset "utf-8";
/* CSS Document */

/* トップ画像
-------------------------------------*/
/*
.topimg_Box {
	margin-bottom: 30px;
}
.topimg_Box h2 {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
}

.topimg_Box h2 img {
	max-width: 100%;
	height: auto;
}

.topimg_Box .checkBox{
	width:250px;
	margin: 0 auto;
	position:absolute;
	
	left: 510px;
	top: 450px;


}
.topimg_Box p.checkbtn{
	width: 250px;
	background-color: #2aaea6;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}

.topimg_Box p.checkbtn a{
	display: block;
	color: #FFF !important;
}
.topimg_Box p.checkbtn:after{
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

.topimg_Box p.checkbtn:hover{
	opacity:0.8;
}



@media (max-width: 768px) {

}
*/
.mainBox{
	max-width: 1000px;
	margin: 20px auto;
	padding: 20px;
	background-repeat: repeat;
	position:relative;
}

.mainBox .result{
	margin: 0 auto;
	padding: 20px;
	background:#FFF;
	border-radius:10px;
}

.mainBox .result h3{
	text-align: center;
	color: #4f5c5b;
	font-weight: bold;
	font-size:18px;

}
@media screen and (max-width: 1280px) {
	#container{
		margin-top: 5rem;
	}
}
@media (max-width: 768px) {
.mainBox{
	width:100%;
	margin: 15px 0 0 0;
	padding: 10px;
	box-sizing: border-box;

}

.mainBox .result{
	margin: 0 auto;
	padding: 10px;
}

.mainBox .result h3{
	font-size:16px;

}
}


.mainBox .result h2{
	margin: 20px auto 10px auto;
	text-align:center;

}

.mainBox .result p.cap{
	text-align: center;
	color: #4f5c5b;
	font-size: 18px;
	/*z-index:999;*/
	position:relative;
}


.mainBox .result .checkBox{
	margin: 20px auto 10px;
}
.mainBox .result p.checkbtn{
	width: 250px;
	background-color: #2aaea6;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
	z-index:2;
}

.mainBox .result p.checkbtn a{
	display: block;
	color: #FFF !important;
}
.mainBox .result p.checkbtn:after{
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

.mainBox .result p.checkbtn:hover{
	opacity:0.8;
}

.mainBox .result p.illust{
	position:absolute;
	left: 80px;
	top: 120px;	
	z-index:1;
}


@media (max-width: 768px) {

.mainBox .result h2{
	margin: 0;
}

.mainBox .result h2 img{
	/* width: 70%; */
	margin: 10px auto;
}

.mainBox .result p.cap{
	text-align: center;
	color: #4f5c5b;
	font-size: 14px;
	/* line-height:1.2em; */
}

.mainBox .result .checkBox{
	}

.mainBox .result p.checkbtn{
	width: 180px;
	font-size: 16px;
	/* margin-right: 30px; */
}

.mainBox .result p.checkbtn a{
	display: block;
	color: #FFF !important;
}
.mainBox .result p.checkbtn:after{
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

.mainBox .result p.checkbtn:hover{
	opacity:0.8;
}


.mainBox .result p.illust img{
	width:50%;

}
.mainBox .result p.illust{
	position:absolute;
	left: 20px;
	top: 170px;
}

}

/*---------●●系　各業界色変え用-------------*/
.mainBox .result p.service{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #e9cd10;

}

.mainBox .result p.infrastructure{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #0f9577;

}
.mainBox .result p.other{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #1da3e8;

}

.mainBox .result p.transport{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #6b328c;

}

.mainBox .result p.manufacturer{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #87c036;

}

.mainBox .result p.skill{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #ec9422;

}
.mainBox .result p.public-servant{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #d13434;

}

.mainBox .result p.skill{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #38328c;

}

.mainBox .result p.building{
	margin-top: 10px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: #f74d85;

}


@media (max-width: 768px) {
.mainBox .result p.service,.mainBox .result p.infrastructure,.mainBox .result p.other,
.mainBox .result p.transport,.mainBox .result p.manufacturer,.mainBox .result p.skill,
.mainBox .result p.public-servant,.mainBox .result p.skill,.mainBox .result p.building{
	font-size: 20px;
	margin-top: 0;

}


}


/*-----------↑ここまで-------------*/

.mainBox .result .jobBox{
	display:flex;
}


.mainBox .jobBox p.jobimg{
	/* margin-right:10px; */
	/* margin-left:10px; */
	display: flex;
	justify-content: center;
}
.mainBox .jobBox p.jobimg img{
	max-width: 100%;
}
.mainBox .jobBox p.text{
	padding: 10px;
	margin: 20px auto;
	color: #4f5c5b;
	flex:1;
}

.mainBox .jobBox p.text span{
	font-size: 16px;
	font-weight:bold;

}


p.backbtn{
	width: 250px;
	background-color: #2aaea6;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}

p.backbtn a{
	display: block;
	color: #FFF !important;
}
p.backbtn:after{
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

p.backbtn:hover{
	opacity:0.8;
}



.btnBox{
	width: 700px;
	margin: 20px auto 0 auto;
	display:flex;

}


@media (max-width: 768px) {

.mainBox .result .jobBox{
	display:block;
}

.mainBox .jobBox p.jobimg img{
	margin: 10px;
	width:300px;
}
.mainBox .jobBox p.text{
	margin: 10px auto;

}

.btnBox{
	width: 90%;
	margin: 10px auto 0 auto;
	display:block;

}



}



/*----------結果ページ　
　　　　　　　各業界用ボタン-------------*/

p.servicebtn{
	width: 250px;
	background-color: #e9cd10;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}


p.infrastructurebtn{
	width: 250px;
	background-color: #0f9577;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}


p.otherbtn{
	width: 250px;
	background-color: #1da3e8;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}


p.transportbtn{
	width: 250px;
	background-color: #6b328c;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}

p.manufacturerbtn{
	width: 250px;
	background-color: #87c036;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}



p.skillbtn{
	width: 250px;
	background-color: #ec9422;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}

p.public-servantbtn{
	width: 250px;
	background-color: #d13434;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}
p.skillbtn{
	width: 250px;
	background-color: #38328c;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}

p.buildingbtn{
	width: 250px;
	background-color: #f74d85;
	color: #FFF !important;
	font-size: 18px;
	font-weight:bold;
	letter-spacing:0.1em;
	padding: 10px 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
	margin: 20px auto;
}

p.servicebtn a, p.infrastructurebtn a, p.otherbtn a, p.transportbtn a, p.manufacturerbtn a, p.skillbtn a
, p.public-servantbtn a, p.skillbtn a, p.buildingbtn a{
	display: block;
	color: #FFF !important;
}



p.servicebtn:after, p.infrastructurebtn:after, p.otherbtn:after, p.transportbtn:after, p.manufacturerbtn:after, p.skillbtn:after
, p.public-servantbtn:after, p.skillbtn:after, p.buildingbtn:after{
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

p.servicebtn:hover, p.infrastructurebtn:hover, p.otherbtn:hover, p.transportbtn:hover, p.manufacturerbtn:hover, p.skillbtn:hover
, p.public-servantbtn:hover, p.skillbtn:hover, p.buildingbtn:hover{
	opacity:0.8;
}



@media (max-width: 768px) {

p.backbtn, p.servicebtn, p.infrastructurebtn, p.otherbtn, p.transportbtn, p.manufacturerbtn, p.skillbtn
, p.public-servantbtn, p.skillbtn, p.buildingbtn{
	width: 220px;
	font-size: 16px;

}


}



/*-----------↑ここまで-------------*/






.inBox{
	width:100%;
	background:#f5f5f5;
	padding:20px 0;
	margin-top: 40px;
}

.back_wave{
	background-repeat: repeat-x;
	height:11px;
	margin-bottom:20px;
}
.inBox h4 {
	margin:20px auto;
	position: relative;
	text-align:center;
	color:#3a3a3a;
	font-size:18px;
	font-weight:bold;
}
.inBox h4:before,.inBox h4:after {
	content: '//';
	margin:0 0.3em;
	color:#3a3a3a;
	font-size:18px;
	font-weight:bold;

}


@media (max-width: 768px) {

.back_wave{
	width:100%;
}

.inBox h4 {
	margin:10px auto;
	font-size:16px;
}


}


.use{
	max-width: 1000px;
	margin: 10px auto;
	display:flex;
	justify-content: center;
}

.use .sample{
	margin-right:30px;
}
.use .text{
	padding: 20px 10px;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
}
.use .text p{
	font-size:14px;
	margin-top:0.8em;
}


@media (max-width: 768px) {

.use{
	width: 100%;
	margin: 0;
	/* display:block; */
	flex-direction: column;
	/* justify-content: center; */
}
.use .sample img{
	max-width: 100%;
}
.use .sample{
	margin-right:0;
	display:flex;
	justify-content:center;
}
.use .text{
	padding: 10px;
	margin: 0 auto;
}
.use .text p{
	font-size:13px;
	margin-top:0.5em;
}



}