@charset "UTF-8";

/* CSS Document */

body {
	margin:0 auto;
	width:100%;
	padding: 0;
	text-align:center;
	color:#444444;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:1.33vw;
	font-weight:400;
	line-height:100%;
	margin:0;
	padding:0;
	box-sizing: border-box;
}

p, div, h1, h2, h3 {
	margin:0;
	padding:0;
}

img{
width:100%;
margin:0 auto;
padding:0;
display:block
}

.pconly{
	display:none;
}

.sponly{
	display:block;
}


@media screen and (min-width: 960px) {
	
body {
	font-size:10px;
}
	
.pconly{
	display:block;
}

.sponly{
	display:none;
}

	
	
}


/* トップパネル */

#toppanel{
	width:100%;
	background-image:url(../img/top-bg-sp2.png) ;
	background-size:cover;
	background-position:center bottom;
	display:block;
}

#toppanel .logo{
	display:block;
	width:100%;
	padding: 2em;
}


#toppanel .logo img{
	width:37%;
	margin-left:0;
}

#toppanel h1{
	width:90%;
	margin:0em auto 0.2em auto;
	padding:0;
	/*	font-size:10.8em;*/
	font-size:9.8em;
	line-height:95%;
}

#toppanel p{
	font-size:40%;
	padding:0;
	margin:0;
}

#toppanel .jizume-left{
	margin-left:-0.25em;
	display:inline-block;
}


#toppanel .small{
	display:block;
	font-size:50%;
}




@media screen and (min-width: 960px) {
#toppanel{
	width:100%;
	background-image:url(../img/top-bg-pc.png) ;
	background-size:50% cover;
	background-position:center;
	background-repeat:no-repeat;
	display:block;
	padding:2em 0;
}
	
	#toppanel .logo{
		width:1080px;
		margin: 0 auto
	}
	
#toppanel .logo img{
	width:10%;
	margin-left:0;
}
	
#toppanel h1{
	width:90%;
	margin:0em auto;
	padding:0;
	font-size:6em;
}

#toppanel p{
	font-size:45%;
	padding:0;
	margin:0;
}



#toppanel .small{
	display:inline-block;

}


}


/* トップパネル メリット */

.merit-wrap{
	width:90%;
	margin:0 auto 3em auto;
	display: flex;
	justify-content: space-between;
}

.merit{
	width:31%;
border-radius: 50px;
padding:0.5em 0;
background-color:#17B0DA;
font-size: 3em;
font-weight:700;
line-height:130%;
color:white;
}


@media screen and (min-width: 960px) {
	
	.merit-wrap{
	width:500px;
		margin-bottom:2em;
	margin:1em auto 3em auto;
}

.merit{
	width:31%;
	font-size: 2em;
	padding:0.5em 0;
}	
}
/* トップパネル イラスト */

.fukidashi {
	position: relative;
	text-align: center;
	margin: 1em auto;
	width: 100%;
	height: auto;
  }
  
  .fukidashi img {
	width: 35%;
	display: block;
	margin: 0 auto;
  }
  
  .micro-copy {
	position: absolute;
	top: 37%;
	left: 50%;
	transform: translate(-50%, -50%); 
	text-align: center;
	font-size: 2.5em;
	color: #FF6400;
	font-weight: bold;
  }
  


@media screen and (min-width: 960px) {
	  .fukidashi img {
		width: 17%;
	  }
	  
	  .micro-copy {
		font-size: 2em;
	  }
}	

@media screen and (min-width: 1500px) {
	  .fukidashi img {
		width: 10%;
	  }
	  
	  .micro-copy {
		font-size: 1.5em;
	  }
}

/* トップパネル CVボタン*/
.top-btn:link{
	display:block;
	width:90%;
	margin:0 auto;
	padding:1.5em 0;
	border-radius:10px;
  	background:#FF6400;
	font-size:4em;
	color: white;
	font-weight:700;
  -webkit-filter:drop-shadow(0px 8px 1px rgba(0, 0, 0, 0.3));
  -moz-filter:drop-shadow(0px 8px 1px rgba(0, 0, 0, 0.3));
  -ms-filter:drop-shadow(0px 8px 1px rgba(0, 0, 0, 0.3));
  filter:drop-shadow(0px 8px 1px rgba(0, 0, 0, 0.3));	
	transform: translateZ(0);
	text-decoration:none;
}

.top-btn{
	font-size:1.2vw;
}

.top-btn span{
	font-size:75%;
}

.top-btn:hover{
  -webkit-filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));
  -moz-filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));
  -ms-filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));
  filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));	
	transition : 0.3s;　
}

.top-btn:visited {
  color:white;
}


.top-login{
	width:100%;
	font-size:2.2em;
	padding:2em 0 1.7em 0;
}

.top-login a:link{
	color:#444;
	text-decoration:none;
}


.top-login a:hover{
	color:#444;
	text-decoration:none;
}

.top-login a:visited{
	color:#444;
	text-decoration:none;
}

@media screen and (min-width: 960px) {
.top-btn:link{
	display:block;
	width:570px;
	padding:1.25em 0;
  	background:#FF6400;
	font-size:3em;

}
	
	.top-login{
	width:100%;
	font-size:15px;
	padding:2em 0;
}


}


h2{
	background-color:white;
	border-radius:0 0 50% 50%/0 0 20% 20% ;
	width:100%;
	margin:0;
	font-size:3em;
	line-height:140%;
	font-weight:700;
	padding:1em 0;
	border-top:1px solid #efefef;
}

h2 span{
	font-size:80%;
}

h2 img{
	display:inline-block;
	width:7em;
	margin-right:0.3em;
}


@media screen and (min-width: 960px) {


h2{
	border-radius:0 0 50% 50%/0 0 25% 25% ;
	font-size:2.5em;
	line-height:130%;
	padding:1em 0 1em 0;
}
	
h2 img{
	display:inline-block;
	width:6.5em;
	margin-right:0.5em;
	margin-bottom:-0.13em;
}

}


/* 案件 */
#job{
	background-color:#A3DA00;
	margin:0;
	padding:0 0 3em 0;
}

#job-wrap{
	width:90%;
	margin:5em auto;
}

#job-wrap .type-kazari{
	width:60%;
	margin:0 auto 0em auto;
	padding:0;
}

#job-wrap .job-midashi1{
	width:100%;
	border-radius:2vw 2vw 0 0;
	background-color:#17B0DA;
	color:white;
	text-align:center;
	font-size:4.2em;
	padding:0.75em 0;
	margin:0;
}

#job-wrap .job-midashi2{
	width:100%;
	border-radius:2vw 2vw 0 0;
	background-color:#FF70A7;
	color:white;
	text-align:center;
	font-size:4.2em;
	padding:0.75em 0;
	margin:0;
}

#job-wrap .job-midashi3{
	width:100%;
	border-radius:2vw 2vw 0 0;
	background-color:#2E75C5;
	color:white;
	text-align:center;
	font-size:4.2em;
	padding:0.75em 0;
	margin:0;
}

#job-wrap .job-white{
	width:100%;
	background-color:white;
	border-radius: 0 0 2em 2em;
	display: block;
	margin-bottom:5em;
	padding-bottom:3em;
}

.job-white:last-child{
	margin-bottom:0em;
}

#job-wrap .job-inner{
	width:100%;
	display: flex;
	justify-content: space-around;
}

.job-box{
	width:50%;
	margin:3em 0;
	font-weight: 600;
	border-right:2px dotted #ccc;
}

.job-box:nth-child(2n){
	border-right:0;
}


.j-title{
	width:100%;
	font-size:3.8em;
	line-height:100%;
	text-align:center;
	margin:0 auto;
	letter-spacing: -0.01em
}

.subtitle{
	width:90%;
	margin:1em auto 0 auto;
	padding: 0;
	font-size:2.5em;
	font-weight:400;
}

.job-box img{
	display:block;
	width:90%;
	margin:2em auto;
}

.job-box .j-kyuyo{
	width:90%;
	margin:0 auto;
	border-radius:2vw;
	background-color:#fff8e5;
	color:#FF3D00;
	padding:1em 0 1.5em 0;
	display:flex;
	justify-content: space-around;
	align-items: center;
}

.icon{
	display: inline-block;
	background-color:white;
	border-radius: 50%;
	padding:2em 0;
	width:5em;
	font-size:1.8em;
}

.kyuyo{
	width:57%;
	text-align:left;
	font-size:4.3em;
	line-height:100%;
}

.kyuyo span{
	font-size:50%;
	margin:0;
	padding:0;
}

.job-btn:link{
	display:block;
	width:95%;
	margin:0 auto;
	padding:1.5em 0;
	border-radius:2vw;
  	background:#FF6400;
	font-size:3.5em;
	color: white;
	font-weight:700;
  -webkit-filter:drop-shadow(0px 7px 1px rgba(0, 0, 0, 0.2));
  -moz-filter:drop-shadow(0px 7px 1px rgba(0, 0, 0, 0.2));
  -ms-filter:drop-shadow(0px 7px 1px rgba(0, 0, 0, 0.2));
  filter:drop-shadow(0px 7px 1px rgba(0, 0, 0, 0.2));	
	transform: translateZ(0);
	text-decoration:none;
	
}

.job-btn:hover{
  -webkit-filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));
  -moz-filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));
  -ms-filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));
  filter:drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.15));	
	transition : 0.3s;　
}

.job-btn:visited{
  color:white;
}




@media screen and (min-width: 960px) {

	.job-pc-wrap{
	width:100%;
	max-width:1080px;
		margin:0 auto;
		display: flex;
		justify-content:space-between;
	}
	
	.job-joken{
	width:31%;
	display:block;
	margin:0;
	}
	
#job-wrap .job-midashi1{
	width:100%;
	border-radius:15px 15px  0 0;
	font-size:2em;
	padding:1em 0;
}

#job-wrap .job-midashi2{
	width:100%;
	border-radius:15px 15px  0 0;
	font-size:2em;
	padding:1em 0;
}

#job-wrap .job-midashi3{
	width:100%;
	border-radius:15px 15px  0 0;
	font-size:2em;
	padding:1em 0;
}

#job-wrap .job-white{
	border-radius: 0 0 15px 15px;
	margin-bottom:3em;
	padding-bottom:0em;
}

.job-box{
	width:50%;
	margin:2em 0;
	font-weight: 600;
	border-right:2px dotted #ccc;
}



.j-title{
	width:100%;
	font-size:1.74em;
}

.subtitle{
	width:90%;
	margin:1em auto 0 auto;
	padding: 0;
	font-size:1.15em;
}

.job-box img{
	display:block;
	width:90%;
	margin:2em auto;
}

.job-box .j-kyuyo{
	border-radius:15px;
}

.icon{
	font-size:1em;
}

.kyuyo{
	font-size:1.78em;
}

.kyuyo span{
	font-size:50%;
	margin:0;
	padding:0;
}

.job-btn{
display:none;
}

}


@media screen and (min-width: 1080px) {

.j-title{
	width:100%;
	font-size:1.88em;
}

.kyuyo{
	font-size:2em;
}

.subtitle{
	width:90%;
	margin:1em auto 0 auto;
	padding: 0;
	font-size:1.22em;
}

}

/* 希望条件 */
#needs{
	width:100%;
	background-color:#C4E9FF;
	margin:0;
	padding:0 0 5em 0;
}

#needs .needs-wrap{
	width:90%;
	margin:0em auto;
}

.needs1{
	width:100%;
	display:block;
	margin:3em 0 7em 0;
}

.needs1:last-child{
	width:100%;
	display:block;
	margin:3em 0 1em 0;
}

.needs1 p{
	display:block;
	margin:2em 0 2em;
	padding:0;
	font-weight:700;
	font-size:4em;
}

.needs1 .needs-text{
	width:100%;
	box-sizing: border-box;
	background: white;
	padding:1.5em;
	font-size:2.6em;
	line-height: 150%;
	border-radius: 2vw;
}

.needs1 .needs-text span{
	color:#FF7200;
}

@media screen and (min-width: 960px) {
	
#needs .needs-wrap{
	width:90%;
	max-width:1080px;
		margin:0 auto;
		display: flex;
		justify-content:space-between;
}
	
.needs1{
	width:31%;
	display:block;
	margin:0;
}

.needs1:last-child{
	width:31%;
	display:block;
	margin:0;
}
	
.needs1 p{
	font-size:1.8em;
}
	
.needs1 .needs-text{
	box-sizing: border-box;
	font-size:1.5em;
	border-radius: 15px;
}

}


@media screen and (min-width: 1080px) {

.needs1 p{
	font-size:2em;
}

.needs1 .needs-text{
	box-sizing: border-box;
	font-size:1.8em;
	border-radius: 15px;
}

}

/* まとめ */

#ending{
	width:100%;
	background:url(../img/endhing-bg-sp.png);
	background-size: cover;
	background-position:center;
	padding:5em 0;
}

#ending .ending-title{
	width:90%;
	margin:0 auto;
	font-size:4.8em;
	line-height:150%;
	font-weight:700;
	padding:1em 0;
}

#ending .ending-title span{
	font-size:80%;
}

#ending .ending-title img{
	display:inline-block;
	width:7em;
	margin-right:0.5em;
}

#ending .ending-pic{
	width:90%;
	margin:0em auto 0 auto;
}

#ending .ending-pic img{
	width:80%;
	margin:0 auto;
}

@media screen and (min-width: 960px) {
#ending{
	width:100%;
	background:url(../img/ending-bg-pc.png);
	background-size:cover;
	background-position:center;
	padding:0 0 5em 0;
}
	
#ending .ending-title{
		width:90%;
		max-width:1080px;
		margin:0 auto;
		font-size:3em;
	}
	
#ending .ending-title img{
	display:inline-block;
	width:6em;
	margin-right:0.5em;
}
	
#ending .ending-pic{
	max-width:1080px;
	margin:0em auto 0 auto;
}
	
	#ending .ending-pic img{
	max-width:30%;
	margin:0em auto 0 auto;
}


	
}



footer{
	width:100%;
	font-size:2.2em;
	line-height:180%;
	padding:2em 0;
	border-top:1px solid #efefef;
}

footer a{
	color:#3c1e1e;
	text-decoration: none;
	color:#444;
}

footer a:visited{
	color:#444;
}

@media screen and (min-width: 960px) {
footer{
	font-size:1.3em;
}
}