/*==================
	コンバージョンボタン
==================--*/

#sw .cvr {
	position:absolute;
	 top:540px;
 	right:130px;
}

.cvr {
	text-align:center;
	position:relative;
}

.cvr p.mic{
	position:relative;
	display:inline-block;
}

.cvr p.mic:before{
	content:"";
	display:block;
	width:2px;
	height:18px;
	background:#333;
	transform: rotate(-25deg);
	position:absolute;
	top:2px;
	left:-15px;	
	text-align:center;
}

.cvr p.mic:after{
	content:"";
	display:block;
	width:2px;
	height:18px;
	background:#333;
	transform: rotate(25deg);
	position:absolute;
	top:2px;
	right:-15px;	
}


@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
}
  40%{ 
    transform: scale(0) rotate(45deg);
    opacity: 0.2;
}
  60%{ 
    transform: scale(4) rotate(45deg);
    opacity: 0.8;
}
60%{ 
    transform: scale(4) rotate(45deg);
    opacity: 0.2;
}
  100%{ 
    transform: scale(50) rotate(45deg);
    opacity: 0;
}
}


.cvr .mic{
	font-size:13px;
	text-align:center;
	margin:0 0 5px;
	font-weight:bold;
	position:relative;
	top:0;
	left:0;
	animation-name: up;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;

}

.cvr .mic-b{
	font-size:10px;
	text-align:center;
	font-weight:normal;
}

#sw .cvr .mic{
	color:#fff;
}

.cvr a{
	width:300px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:18px;
	background:#ffc10e;
	border-radius:60px;
	padding:20px 20px;
	display:block;
	box-sizing:border-box;
	margin:0 auto 10px;
}

.bg{
	background:#f3fcff;
}

.unit h2{
	text-align:center;
	margin-bottom:20px;
	line-height:1.4;
	padding:0 0 30px;
}

#lead p{
		text-align:center;	
}


@media only screen and (orientation: portrait) {

	.cvr a{
		width:260px;
	font-size:16px;
	padding:20px 20px;
	}

}

/*==================
	ショーケース
==================--*/


#sw{
	float:none;
	background:url(../images/sbg.webp) no-repeat center bottom;
	background-size:cover;
	position:relative;
	overflow: hidden;
	padding-top:60px;
	margin-bottom:20px;
}

#sw .inner{
	position:relative;
	height:600px;
	background:#f9f9f9 url(../images/bg.webp) no-repeat center bottom;
	overflow: hidden;
}

#sw h1 img{
text-align:left;
 background-image:none;
 position:absolute;
 display:inline-block;
 bottom:60px;
 right:30px;
}

#sw .stxt{
 position:absolute;
 display:inline-block;
 top:60px;
 right:40px;
}



.unit{
	margin-bottom:0;
	padding:30px 0;
}



#lead h2{

}

@media only screen and (orientation: portrait) {
	
	#sw {
		margin-bottom:10px;
		padding-top:50px;
	}
	
	#sw .inner{
	position:relative;
	height:500px;
	overflow: hidden;
	background:#f9f9f9 url(../images/sw_sp.webp) no-repeat center bottom;
	background-size:auto 500px;
	}		
		
	#sw h1 img{
		width:90%;
		height:auto;
		 position:absolute;
		 bottom:50px;
		right:20px;
	}

	#sw .stxt{
 	position:absolute;
 	top:50px;
 	right:30px;
 	width:230px;
 	height:auto;
	}


	#lead h2 img{
		width:70%;
		height:auto;
	}
	
		
	.unit{
	padding:25px 0;
	}
	
	#lead.unit {
		padding:0px 0 25px;
	}
	
	#lead.unit h2 {
		padding:0;	
	}
		
}


@keyframes up{
    0% {
        transform: translate(0,0);
    }
	50% {
        transform: translate(0,00);
    }
    100% {
        transform: translate(0,-10px)
    }
}

@keyframes rote {
   0% {
       transform: rotateY(0deg);
   }
   10% {
       transform: rotateY(360deg);
   }
   100% {
       transform: rotateY(360deg);
   }
}





/*==================
	詳細
==================--*/
#detail {
	
}

#detail  .cvr{
	padding:40px 0 10px;
}


#detail h3{
	margin-bottom:30px;
}


#detail .box{
	position:relative;
	height:200px;
	margin-bottom:30px;
	background:#fff;
	border-radius:5px;
	box-shadow: 1px 1px 1px 1px rgba(231,233,239,0.8);
}

#detail .no{
	position:absolute;
	top:-20px;
	left:-20px;
	z-index:2;
	animation: rote 4s infinite;
}


#detail .img{
	position:absolute;
	top:0;
	left:0;
	border-radius:5px 0 0 5px;
}

#detail .txt{
	width:100%;
	box-sizing:border-box;
	padding: 30px 30px 0 330px;
}

#about{
	background:#fff;
	position:relative;
	margin:60px 0 20px;
	height:330px;
	border-radius:5px;
	box-shadow: 1px 1px 1px 1px rgba(231,233,239,0.8);
}

#about h3{
	color:#8fddf7;
	margin-bottom:15px;
}

#about p{
	font-size:13px;
}

#about .txt{
	padding:50px 50px 30px 380px;
}

#about .img{
	position:absolute;
	top:30px;
	left:50px;
}


@media only screen and (orientation: portrait) {

	#detail .box{
	height:auto;
	}
	
	#detail .no{
		width:50px;
		height:auto;
		position:absolute;
		top:-20px;
		left:-10px;
	}

	
	#detail .img{
	position:static;
	top:0;
	left:0;
	border-radius:5px 5px 0 0;
	}

	#detail .txt{
	width:100%;
	padding: 20px 20px 10px;
	}

	#detail h3{
	color:#8fddf7;
	margin-bottom:10px;
	}
	
	#detail .txt p{
		margin-bottom:10px;	
	}
	
	#detail h3{
		text-align:center;
	}
	
	#detail h3 img{
	text-align:center;
	height:20px;
	width:auto;
	}
	
	#about{
	margin:40px 0 0;
	padding: 10px 0 20px;
	height:auto;
	}

	#about .img{
	width:60%;
	position:static;
	top:0;
	left:0;
	}

	#about .txt{
	padding:20px;
	}
	
	#about p{
	font-size:12px;
	}

}


/*==================
	派遣業種
================== */

#work{
	position:relative;
	box-sizing:border-box;
	padding-bottom:60px;
	text-align:center;
	
}


#work .pane{
	position:relative;
	display:inline-block;
	height:360px;
	vertical-align:top;
	text-align:left;
	background:#fff;
	margin: 0 5px;
	border-radius:5px;
	overflow:hidden;
	box-shadow: 1px 1px 1px 1px rgba(231,233,239,0.8);
}

#work .pane h3{
	font-size:17px;
	margin:bottom:20px;
	padding:20px 20px 15px;
}

#work .pane ul{
	padding:0 20px 30px;
}

#work .pane li{
	font-size:12px;
	margin-bottom:8px;
	position:relative;
	padding-left:20px;
}

#work .pane li:before{
	content: '';
  	width: 10px;
  	height: 5px;
  	border-left: 2px solid #25AF01;
  	border-bottom: 2px solid #25AF01;
  	transform: rotate(-45deg);
  	position:absolute;
  	top:5px;
  	left:0;
}



@media only screen and (orientation: portrait) {

	#work .pane{
		display:inline-block;
		height:auto;
		margin-bottom:15px;
	}
	
	#work .pane h3{
		font-size:14px;
	}
	
	#work .pane ul{
	padding:0 30px 20px;
	}

}



/*==================
	お仕事例
================== */

#exam{
	position:relative;
	box-sizing:border-box;
	padding-bottom:60px;
	text-align:center;
	
}

#exam .icon{
	position:absolute;
	top:-10px;
	left:-10px;
	z-index:5;
	animation: rote 4s infinite;
}


#exam .pane{
	width:31%;
	position:relative;
	display:inline-block;
	vertical-align:top;
	text-align:left;
	background:#fff;
	margin: 0 5px;
	border-radius:5px;
	padding-bottom:30px;
	box-shadow: 1px 1px 1px 1px rgba(231,233,239,0.8);
}

#exam .pane h3{
	color:#fff;
	font-size:16px;
	margin-bottom:20px;
	padding:20px 20px 20px;
	background:#5adadb;
	text-align:center;
	border-radius:5px 5px 0 0;
}

#exam ul{
	font-size:12px;
	box-sizing:border-box;
	padding:0 25px;
}

#exam li p{
	display:inline-block;
	box-sizing:border-box;
  	padding:3px 5px;
	margin:0;
}

#exam li .tag{
	background:#5adadb;
	box-sizing:border-box;
	margin:0 10px 5px 0;
	border-radius:5px;
}

#exam .lead{
	margin:30px 0 0;
	text-align:center;
}

@media only screen and (orientation: portrait) {
	#exam .pane{
	width:85%;
	margin-bottom:20px;
	padding-bottom:20px;
	}
	
}



/*==================
	社員
==================--*/

#empl {
	position:relative;
	text-align:center;
	background:#85E0FF url(../images/b_bg.webp) no-repeat center bottom;
	background-size:auto 640px;
}

#empl h3{
	margin-bottom:30px;
}

.emp-box {
	width:800px;
	position:relative;
	box-sizing:border-box;
	margin: 0 auto 30px;
	background:#fff;
	padding:40px 60px;
	border-radius:5px;
	box-shadow: 1px 1px 1px 1px rgba(231,233,239,0.8);
}

.emp-box .no{
	position:absolute;
	top:-20px;
	left:200px;
	animation: rote 4s infinite;
}


.big-bg{
		width:100%;
		background:url(../images/sbg.webp) no-repeat center bottom;
		background-size:cover;
}

.big-bg .inner{
	height:300px;
	background: #f9f9f9 url(../images/bg2.webp) no-repeat center 0;
		background-size:auto 300px;

}


@media only screen and (orientation: portrait) {
	.emp-box {
	width:96%;
	padding:30px 20px;	
	}

	#empl h3{
	text-align:center;
	display:block;
	}
	
	#empl h3 img{
	width:200px;
	height:auto;
	text-align:center;
	}
	
	.emp-box .no{
	position:absolute;
	top:-20px;
	left:30px;
	width:50px;
	height:auto;
	}
	
	.big-bg .inner{
	height:200px;
	background: #f9f9f9 url(../images/bg2_sp.webp) no-repeat center -130px;
	background-size:400px auto
	}


}



/*==================
	ご利用までの流れ
================== */

#flow{
		
}


#flow .no{
	font-family: 'Montserrat', sans-serif;
	font-size:4rem;
}

#flow h3{
	font-size:2rem;
	margin-bottom:5px;
}

#flow h3 span{
	color:#1997CC;	
}

#flow p{
	margin-bottom:0;
}

#flow .no{
	color:#fff;
	position:absolute;
	padding:0px 15px;
	background:#8fddf7;
	position:absolute;
	top:20px;
	left:20px;
	border-radius:4px;
}

#flow .pane{
	position:relative;
	box-sizing:border-box;
	padding:20px 20px 20px 125px;;
	background:#fff;
	margin-bottom:30px;
	border-radius:4px;
	box-shadow: 1px 1px 1px 1px rgba(231,233,239,0.8);
}

#flow .pane span{
 font-size:12px;
 color:#e0281b;
}

#flow .arrow:after{
	content:"";
	display:block;
	position:absolute;
	left:60px;
	bottom:-20px;
	width: 0;
	height: 0;
	border-style: solid;	
	border-width: 20px 20px 0 20px;
	border-color: #fff transparent transparent transparent;
}

#flow .caution-l{
	margin-top:20px;
	font-weight:bold;
	font-size:1.6rem;
}

#flow .caution{
	margin-top:10px;
	color:#bbb;
}



@media only screen and (orientation: portrait) {
	#flow h3{
	font-size:1.6rem;
	}
	
	#flow .caution{
	font-size:1rem;
	}
	
	#flow .caution-l{
	margin-top:20px;
	line-height:1.4;
	font-size:1.4rem;
	}
	
	#flow .no{
		font-size:1.6rem;
		padding:5px 10px;
	}
	
	#flow .pane{
	padding:20px 20px 20px 75px;
	}

	#flow .pane span{
 		font-size:10px;
 	}


}


/*==================
	よくある質問
================== */

#qa{
	
}

#qa .q-box{
	border-bottom:1px solid #e3eef2;
	background:#fff;
	padding:0 20px  0;
	box-sizing:border-box;
}

.tb{
	border-top:1px solid #e3eef2;
}

#qa .q-txt{
	font-weight:bold;
	padding-top:15px;
	margin-bottom:20px;
	font-size:16px;
}

#qa .q-txt span{
	font-weight:normal;
	margin-right:10px;
	color:#33ccff;
}

#qa .a-txt {
	text-indent:-30px;
	margin-left:33px;
	box-sizing:border-box;
	padding-right:50px;
}

#qa .a-txt span{
	margin-right:10px;
	color:#d93f1c;
	
}


@media only screen and (orientation: portrait) {
	#qa .q-txt{
		margin-bottom:10px;
		text-indent:-23px;
		margin-left:23px;
		font-size:14px;
	}
	
	#qa .q-box{
		padding:0 0 5px 5px;
		box-sizing:border-box;
	}
	
	#qa .a-txt{
		text-indent:-23px;
		margin-left:23px;
		padding-right:30px;
	}

}

@media only screen and (orientation: portrait) {
	.unit h2 img{
		height:50px;
		width:auto;
	}	
}


/*==================
	アコーディオン
==================--*/

.acd-btn{
	cursor:pointer;
	font-size: 18px;
	line-height: 1.8;	
	padding: 6px 0 0;
	color: #333;
	font-weight:bold;
	background: #fff;
	border-radius: 3px;
	position:relative;
}

.acd-btn .icon{
	width:26px;
	height:26px;
	border-radius: 3px;
	position:absolute;
	border-radius: 14px;
	top:50%;
	right:0;
	margin-top:-3px;
}


.acd-btn .icon:before{
	display:block;
	content:"";
	position:absolute;
	background:#33ccff;
	width:10px;
	height:2px;
	top:12px;
	left:8px;
	border-radius: 2px;
}

.acd-btn .icon:after{
	top:8px;
	left:12px;
	display:block;
	content:"";
	position:absolute;
	background:#33ccff;
	width:2px;
	height:10px;
	border-radius: 2px;
}


.acd-btn.open .icon:after{
	display:none;
}

.acd-wrap{
	padding-top:10px;
}

.acd-box{
	will-change: animation;
	-webkit-backface-visibility: hidden;
  	backface-visibility: hidden;
	box-sizing: border-box;
	padding:0 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height 1s ease-in-out;
}

.acd-box.open{
  	max-height: 2000px;
}

@media only screen and (orientation: portrait) {
	.acd-btn{
		padding: 6px 30px 6px 0;
	}
	
	.acd-btn .icon{
		margin-top:-9px;
		right:-10px;
	}
}