/* LESS Document */
body {
  position: relative;
}
@media screen and (max-width: 767px) {
  body {
    overflow-x: hidden!important;
  }
}

/* -------------------------------- ヘッダー */
header {
  height: 100vh;
}
@media screen and (max-width: 767px) {
  header {
    height: 50vh;
  }
}
/* -------------------------------- メインビジュアル */
.mv {
  overflow: hidden;
  width: 100%;
  min-width: 1040px;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .mv {
    min-width: 320px;
    height: 50vh;
  }
}
.mv video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.mv h1 {
  padding: 0 15px;
  text-align: center;
  position: absolute;	
  top:50%;
  left: 0;
  right: 0;
  transform: translate(0, -50%);
  z-index: 2;
}

.mv .recruit {
  font-family: 'Oswald', sans-serif;
  text-align: center;
  color: #1E94D4;
  font-size: 2.8rem;
  font-weight:500;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 2;
}

@media screen and (max-width: 767px) {
	.mv .recruit {
		font-size:3.73vw;
	}
}

/* --------------------------------top h2 */
.message {
	font-size:3.2rem;
	line-height:1.6;
	text-align: center;
	margin:37px 0;
}

@media screen and (max-width: 767px) {
	.message{
	font-size:5.6vw;
	}
}

@media screen and (min-width: 767px) {
  .pc_hide {
    display: none;
  }
}

/* --------------------------------section interview */

#interview{
	background-color:#e5eaf4;
	width:880px;
	margin: auto;
	padding:20px 20px 0px 20px;
	border-radius:10px;
}

#interview:hover{
	opacity:0.8;
	transition:0.3s;
}
		
#interview a{
	text-decoration: none;
}

#interview .flex{
	justify-content: flex-start;
	align-items:flex-start;
	position: relative;
}

#interview h3{
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-weight: 600;
	background-color:#002F91;
	color:#FFFFFF;
	font-size:2rem;
	width:200px;
	border-radius:16px;
	padding:5px 30px;
	text-align: center;
	margin-bottom:5px;
}

#interview .fs48{
	font-weight:bold;
	margin:0;
	line-height:1.3;
	color:#002F91;
	letter-spacing:1;
}

#interview .fs20{
	line-height:1.5;
	color:#002F91;
}

#interview .text-area{
	margin-left:25px;
}

.interview-link-icon{
	position: absolute;
	top:50px;
	right:-63px;
}

@media screen and (max-width: 767px) {
  
	#interview{
		width:96%;
		padding:20px 10px 10px 10px;
		margin:0 auto;
	}
	
	#interview .president_icon{
		width:32%;
	}
	
	#interview .flex{
		flex-wrap: wrap;
		align-items:center;
		justify-content:space-around;
	}
	
	#interview .text-area{
		margin: 0;
	}
	
	#interview h3{
		font-size:4.26vw;
		width:38%;
		padding:5px 20px;
		margin: 0 auto;
		margin-bottom:7px;
	}
	
	#interview .fs48{
		text-align: center;
		font-size: 7.2vw!important;
		margin-bottom:7px;
	}
	
	#interview .fs20{
		font-size: 4vw!important;
		margin-bottom:10px;
	}
	
	.interview-link-icon{
	position: static;
}
}



/* --------------------------------sectionのレイアウト*/

#basic-data{
	height:900px;
	background:url("/images/imggazou/bg_01.png");
	background-position: center center;
	background-repeat: no-repeat;
}

#staff-data{
	height:900px;
	background:url("/images/imggazou/bg_02.png");
	background-position: center center;
	background-repeat: no-repeat;
}

#work-style{
	height:900px;
	background:url("/images/imggazou/bg_03.png");
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom:450px;
}

#requirements{
	height:900px;
	background:url("/images/imggazou/bg_04.png");
	background-position: center center;
	background-repeat: no-repeat;
}

.circle {
	width: 600px;
	height: 600px;
	border-radius: 50%;
	overflow: hidden;
	background:url("/images/imggazou/bg_star.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.circle:nth-of-type(2n-1){
	left:0px;
    top: 80px;
}

.circle:nth-of-type(2n){
	right:0px;
    top: 430px;
}

.color06{
	z-index:500;
}

.color07{
	top:800px!important;
}


section h2{
	right:-80px;
	top:280px;
}

.relative{position: relative;}
.absolute{position: absolute;}

#requirements h2{
	top:230px;
}

.color08{
    position: absolute;
    left:0!important;
	right:0!important;
	top:140px!important;
	margin: auto;
}

@media screen and (max-width: 767px) {
	
.absolute{position: static;}
.color08{position:static;}

	#basic-data{height: auto;}
	#staff-data{height: auto;}
	#work-style{height: auto;}
	#requirements{height: auto;}
	
	.inner{
		width:100%!important;
		padding:0;
		overflow: hidden;
	}
	
	.circle{
		width:112%!important;
		height:112vw!important;
		transform: translate(-6%, 0);
		-webkit-transform: translate(-6%, 0);
		-ms-transform: translate(-6%, 0);
		margin-bottom:20px;
	}
	
	#basic-data,#staff-data,#work-style,#requirements{background:none;}
	
	.sp-bg01{
		position: absolute;
		width:100%;
		height:800px;
		background:url("/images/syainngazou/SP_bg01.png");
		background-repeat: no-repeat;
		background-position:center center;
		top:-380px;
		z-index:-100;
	}
	
	.sp-bg01{background:url("/images/syainngazou/SP_bg01.png");}
	.sp-bg02{background:url("/images/syainngazou/SP_bg02.png");}
	.sp-bg03{background:url("/images/syainngazou/SP_bg03.png");}
	.sp-bg04{background:url("/images/syainngazou/SP_bg04.png");}
	
		.sp-bg01,.sp-bg02,.sp-bg03,.sp-bg04{
		position: absolute;
		width:100%;
		height:800px;
		background-repeat: no-repeat;
		background-position:center center;
		top:-380px;
		z-index:-100;
	}
	
	

}

/* --------------------------------section common */
section h2{
	background-color:#000;
	color:#fff;
	display: inline-block;
	padding:0 75px;
	font-size:3.6rem;
	text-align: center;
}

@media screen and (max-width: 767px) {
	
	.pc_hide{
		color: #FFFFFF;
		background-color: #000000;
		padding:0 30px;
		display:table;
		margin: auto;
		margin-bottom:30px;
		margin-top:80px;
		font-size:5.6vw;
	}
}


.circle {
	width: 600px;
	height: 600px;
	border-radius: 50%;
	overflow: hidden;
	background:url("/images/imggazou/bg_star.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.color01{background-color:#65dcac;}
.color02{background-color:#cddc65;}
.color03{background-color:#ffcc46;}
.color04{background-color:#ff9e33}
.color05{background-color:#f08a8c;}
.color06{background-color:#dd6699;}
.color07{background-color:#af99d5;}
.color08{background-color:#54ace0;}

.color01 p{color:#208a60;} .color01 h3{color:#fff;}
.color02 p{color:#6f8a00;} .color02 h3{color:#fff;}
.color03 p, .color03 h3{color:#604713;}
.color04 p, .color04 h3{color:#602213;}
.color05 p, .color05 h3{color:#5e1525;}
.color06 p, .color06 h3{color:#5e1534;}
.color07 p, .color07 h3{color:#291162;}
.color08 p, .color08 h3{color:#163f81;}

.circle h3{
	font:4.2rem;
	text-align: center;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}


.circle p{
	text-align: center;
	font-weight:bold;
	font-size:2rem;
}

@media screen and (max-width: 767px) {
	.link-icon:before{
	width:200px;
}
	.circle h3{
	font-size:5.6vw;
	}
	
	.circle p{
	font-size:4.2vw;
}
	
	.image-icon{
		width:25%;
		margin:0 auto;
	}
	
	.link-icon img{
		width:19%;
	}
}


.link-icon:before{
	text-align: center;
	content:"";
	display: block;
	margin: auto;
	margin-bottom:20px;
	width:300px;
}

.color01 .link-icon:before{border-bottom:dashed 1px #208a60;}
.color02 .link-icon:before{border-bottom:dashed 1px #6f8a00;}
.color03 .link-icon:before{border-bottom:dashed 1px #604713;}
.color04 .link-icon:before{border-bottom:dashed 1px #602213;}
.color05 .link-icon:before{border-bottom:dashed 1px #5e1525;}
.color06 .link-icon:before{border-bottom:dashed 1px #5e1534;}
.color07 .link-icon:before{border-bottom:dashed 1px #291162;}
.color08 .link-icon:before{border-bottom:dashed 1px #163f81;}

.color01 .color01-txt{
	margin-bottom:20px;
}

.color01 h3,.color02 h3{
	font-size:2.4rem;
	width:200px;
	border-radius:16px;
	margin:0 auto;
	padding:5px 30px;
	margin-bottom:18px;
	margin-top:60px;
}

@media screen and (max-width: 767px) {
	.color01 h3,.color02 h3{
		font-size:4.59vw;
}
}


.color01 h3{background-color:#208a60;}
.color02 h3{background-color:#6f8a00;}

/* --------------------------------section PC margin,font-size */
.color01 .color01-txt{
	font-size:4.2rem; 
	line-height:1.3;
	margin-bottom:40px;
}

.color01 span{
	font-size:1.4rem;
	display: block;
	margin:0;
}

.color01 .link-icon:before{
	margin-top:80px;
	margin-bottom:40px;
}

.color01 span{
	display: block;
	margin:0;
}

.color01 .link-icon:before{
	margin-top:80px;
	margin-bottom:40px;
}

.color02 .link-icon:before{
	margin-bottom:30px;
}

.color02 p{
	color: #6F8A00;
	font-weight:bold;
	line-height:1.4;
	text-align: center;
	margin-bottom:20px;
	font-size:4.2rem;
}
	
.color03 ul{
	width:562px;
	margin: auto;
	display: flex;
	justify-content:space-between;
	margin-bottom:60px;
}

.color03 h3{
	margin-top:95px;
	margin-bottom:22px;
}

.color03 .link-icon:before{
	margin-bottom:30px;
}


.color04 h3{
	margin-top:58px;
	margin-bottom:5px;
}


.color04 p{
   margin-bottom:5px;
}

.color05 h3{
	margin-top:60px;
	margin-bottom:10px;
}

.color06 h3{
	margin-top:90px;
	margin-bottom:17px;
}

.color06 .link-icon:before{
	margin-top:20px;
	margin-bottom:40px;
}

.color07 h3{
	margin-top:60px;
	margin-bottom:10px;
}

.color07 p{
	margin-bottom:10px;
}

.color08 h3{
	margin-top:50px;
	margin-bottom:10px;
}

.color08 p{
	margin-bottom:5px;
}

.color08 .link-icon:before{
	margin-top:20px;
	margin-bottom:20px;
}

/* --------------------------------section SP margin,font-size*/

@media screen and (max-width: 767px) {
	
	.color01 .link-icon:before{
		margin-top:40px;
		margin-bottom:20px;
	}
	
	.color01 h3{
	margin-top:40px;
	margin-bottom:10px;
	}
	
	.color01 .color01-txt{
	font-size:8vw;
	margin-bottom:20px;
	}
		
	.color01 .image-icon{
		width:80%;
		margin: auto;
	}
	
	.color01 span{
	font-size:4.4vw;
}
	
	.color02 p{
		font-size:5.6vw;
		margin-bottom:10px;
	}
	
	.color02 .image-icon{
		width:40%;
		margin: auto;
		margin-bottom:10px;
	}
	
	.color02 .link-icon:before{
		margin-bottom:15px;
	}

	
	.color06 .link-icon:before{
		margin-bottom:20px;
	}
	
	.color02 h3{
		margin-top:38px;
	}
	
	.color05 .link-icon:before{
		margin-top:10px;
	}
	
	.color08 h3{
		margin-top:60px;
		margin-bottom:20px;
	}
	
	.color08 p{
		margin-bottom:20px;
	}
	
	
	.color07 h3{
		margin-top:35px;
	}
	
	.link-icon:before{
	width:180px;
	margin:0 auto;
	margin-bottom:20px;
}
	
	.color03 ul{
		width:80%;
		margin-bottom:25px;
	}
	
	.color03 li{
		width:24%; 
	}
	
	.color03 h3{
		margin-bottom:5px;
	}
	
	#work-style{
		margin-bottom:20px;
	}
}


/* --------------------------------contact*/

#contact{
	margin-bottom:100px;
}

#contact p{
	text-align: center;
}

#contact .absolute{
    left: 50%;
	top:-125px;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
}

.contact-text{
	font-size:4.8rem;
	text-align: center;
}
.contact-text span{
	font-size:2.4rem;
	font-weight:bold;
}

.contact-btn{
	width:500px;
	margin: auto;
	font-size:2.8rem;
	font-weight:bold;
	text-align: center;
	line-height:2.4;
}

.contact-btn a{
	display: block;
	background-color:#ff7500;
	text-decoration: none;
	color: #FFFFFF;
}

.contact-btn a:hover{
	opacity: 0.8;
}

.contact-btn img{
	margin-left:10px;
}

@media screen and (max-width: 767px) {
	
	#contact .absolute{
		width:20%;
		margin: 0 auto;
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
	}
	
	.contact-text span{
	font-size:4.26vw;
	}
	
	.contact-text{
	font-size:6.4vw;
}
	
	.contact-btn{
		width:80%;
	}
	
	.contact-btn{
		font-size:4.26vw;
	}
	
	.contact-btn img{
		width:15%;
	}
	
	
}

/* --------------------------------hover effect*/

.circle a{
	text-decoration: none;
}



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

.circle {
  transition: all 0.6s ease 0s;
}
.circle:hover {
  cursor: pointer;
  transform: scale(1.06, 1.06);
  z-index:1000;
}

a:hover img {
  opacity: 1;
}
}