@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;
}

.container {
    overflow-x: hidden;
}

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;
}

	
	
}




/* トップロゴ */
.logo{
	display:block;
	width:100%;
	padding: 2em 0;
	background-color: white;
}


.logo img{
	width:37%;
	margin-left:2em;
}

@media screen and (min-width: 960px) {
.logo img{
	width:10%;
}
}


/* トップパネル */

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

#toppanel h1{
	width:90%;
	margin:0em auto;
	padding:40px 0 0 0;
	font-size:8em;
	line-height:85%;
}

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

#toppanel .slash{
	font-size:120%;
}

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

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


#toppanel .small{
	display:block;
	font-size:55%;
	padding-top: 0.3em;
}




@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 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:2.8em auto;
	display: flex;
	justify-content: space-between;
}

.merit{
	width:31%;
	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:3em auto 2em 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: 60%;
	display: block;
	margin: 0 auto;
  }
  
  .micro-copy {
	position: absolute;
	line-height: 1.2;
	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 {
		position: relative;
		text-align: center;
		margin: 1em auto;
		width: 100%;
		height: auto;
	  }
	  
	  .fukidashi img {
		width: 26%;
		display: block;
		margin: 0 auto;
	  }
	  
	  .micro-copy {
		position: absolute;
		line-height: 1.5;
		top: 37%;
		left: 50%;
		transform: translate(-50%, -50%); 
		text-align: center;
		font-size: 2em;
		color: #FF6400;
		font-weight: bold;
	  }
	

}	

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

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

}

/* トップパネル CVボタン*/
.top-btn:link{
	display:block;
	width:90%;
	padding:0.7em 0;
	border-radius:100vh;
  	background:#f96f13;
	font-size:3.5em;
	font-weight:700;
	transform: translateZ(0);
	text-decoration:none;
	
	
}

.top-btn{
	margin:0 auto;
	line-height: 1.5;
	color:white;
	border-bottom: 5px solid #b34902;
	position: relative; /*親要素にrelativeを指定*/
}
.top-btn::after {
	position: absolute;
	content: "";
	display: inline-block;
    bottom: 91%;
    left: 10%;
    transform: translateX(-10%);
    width: 71px;
    height: 40px;
	background-image: url(../img/rsk.png);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -10;
}

.top-btn::before {
	position: absolute;
	content: "";
	display: inline-block;
    bottom: 93%;
    right: 6%;
    transform: translateX(-10%);
    width: 71px;
    height: 40px;
	background-image: url(../img/black.png);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -10;	
}

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

.top-btn:hover{
    margin-top: 3px;
	border-bottom: 2px solid #b34902;
	transition : 0.3s;　
}



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

.top-login span{
	color: #f96f13;
	font-weight: bold;

}

.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: 500px) {
	.top-btn::after {
		bottom: 94%;
		left: 10%;
		transform: translateX(-10%);
		width: 88px;
		height: 55px;
	}
	
	.top-btn::before {
		bottom: 95%;
		right: 8%;
		transform: translateX(-10%);
		width: 88px;
		height: 55px;
	}
}

@media screen and (min-width: 700px) {
	.top-btn::after {
		bottom: 91%;
		left: 10%;
		transform: translateX(-10%);
		width: 100px;
		height: 90px;
	}
	
	.top-btn::before {
		bottom: 90%;
		right: 8%;
		transform: translateX(-10%);
		width: 100px;
		height: 90px;
	}
}

@media screen and (min-width: 960px) {
.top-btn:link{
	display:block;
	width:570px;
	padding:1.25em 0;
  	background:#FF6400;
	font-size:3em;
	transform: translateZ(0);
	text-decoration:none;
}
	
	.top-login{
	width:100%;
	font-size:15px;
	padding:2em 0;
}

.top-btn::after {
    bottom: 94%;
	left: 10%;
    transform: translateX(-10%);
    width: 88px;
    height: 61px;
}

.top-btn::before {
    bottom: 95%;
    right: 8%;
    transform: translateX(-10%);
    width: 88px;
    height: 61px;
}

}


h2{
	background-color:white;
	border-radius:0 0 50% 50%/0 0 20% 20% ;
	width:100%;
	margin:0;
	font-size:3.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;
}

}

/* フローティングボタン */
.float-btn-sp {
	position: fixed;
	width:100%;
	text-align: center;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
	z-index: 200;
    transition: opacity 0.3s ease;
	bottom: 0;
}

.float-btn {
	display:block;
	color: white;
	font-weight:700;
	background:#FF6400;
	padding: 1.8% 0;
	border-radius:3vw;
	margin: 2.5% 5%;
	width: 90%;
	filter:drop-shadow(0px 7px 1px rgba(0, 0, 0, 0.2));
	transform: translateZ(0);
	text-decoration: none;
	height: auto;
}


.float-btn-sp p {
	padding: 1em 0;
	font-size:3.5em;
}

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

	.hidden {
		visibility: hidden;
	}
	
	}



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

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

#job-wrap .type-kazari{
	width:55%;
	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.5em;
	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.5em;
	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.5em;
	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;
}

}

/* 条件 */

#joken-div{
	margin:0;
	padding:0 0 7em 0;
	background-color:#C4E9FF;
}

#jyoken-wrap {
	width:94%;
	margin:0em auto;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding-bottom: 1em;
}

.joken-title{
	width:100%;
}

.joken-title .joken-illust{
	width:100%;
	margin:-7em auto 0 auto;
	text-align:right;
}

.joken-title .joken-illust img{
	width:17%;
	margin-right:7%;
}

.jokenbox{
	width:48%;
	background:white;
	border-radius: 15px;
	padding:0;
	margin-bottom:3em;
}


.jokenbox h3{
	width:100%;
	font-size:2.6em;
	font-weight:500;
	color:white;
	border-radius: 15px 15px 0 0;
	margin:0;
	padding:1.3em 0;
}

.j1{
	background-color:#17B0DA;
}

.j2{
	background-color:#FF70A7;
}

.j3{
	background-color:#A3DA00;
}

.j4{
	background-color:#2E75C5;
}

.jokenbox .joken{
	width:90%;
	margin:0 auto;
	padding:0.5em 0;
	text-align:center;
	font-size:3em;
	font-weight:600;
	display: flex;
	justify-content: space-around;
	align-items: center; 
	line-height:100%;
}


.joken:first-of-type{
	border-bottom: 2px dotted #CCC;
}

.joken .j-img{
	width:35%;
}

.joken .j-text{
	width:65%;
}

.s-text1{
	font-size:70%;
}

.s-text2{
	font-size:85%;
}

.s-text{
	font-size:50%;
}


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

#joken-div{
	padding:0 0 9em 0;
}

h2{
	border-radius:0 0 50% 50%/0 0 25% 25% ;
	font-size:2.8em;
	padding:2em 0 1.5em 0;
}

.joken-title .joken-illust{
	width:100%;
	max-width:940px;
	margin-left:0 auto;
	margin-top:-6em;
}

	.joken-title .joken-illust img{
		width:95px;
		margin-right: 4%;
	}

#jyoken-wrap{
	width:94%;
	max-width:940px;
	margin:0 auto;
	display: flex;
	justify-content: space-around;
	flex-wrap:wrap;
	padding-bottom:0em;
}

.jokenbox{
	width:23%;
	background:white;
	border-radius: 24px;
	padding:0;
	margin-bottom:3em;
}
	
.jokenbox .joken .j-img{
	width:30%;
}
	
.jokenbox h3{
	font-size:1.6em;
}
	
.jokenbox .joken{
	font-size:1.7em;
}
	
.btn-m a{
	width:90%;
	max-width:720px;
	font-size:2.5em;
	display:block;
	padding:0.5% 0;
	border-radius:7%/50%;
}
	
.btn-m a:hover{
	opacity:0.95;
}
	
.btn-m a p{
	width:98%;
	margin:0 auto;
	padding:0.8em 0;
	border-radius:6%/50%;
}

	
}

/* まとめ */

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

.ending-btn {
	margin:0 auto;
	line-height: 1.5;
	color:white;
	border-bottom: 5px solid #b34902;
}

.ending-btn:link {
display:block;
	width:90%;
	padding:0.7em 0;
	border-radius:100vh;
  	background:#f96f13;
	font-size:3.5em;
	font-weight:700;
	transform: translateZ(0);
	text-decoration:none;
}

.ending-btn span{
	font-size:82%;
}

.ending-btn:hover{
    margin-top: 3px;
	border-bottom: 2px solid #b34902;
	transition : 0.3s;　
}

#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-btn:link{
	display:block;
	width:570px;
	padding:1.25em 0;
  	background:#FF6400;
	font-size:3em;
	transform: translateZ(0);
	text-decoration:none;
}

	
#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 100px 0;
	border-top:1px solid #efefef;
	background:#e3f4b2;
}

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;
	padding:2em 0;
}
}