@charset "UTF-8";

/*----------------------------------------------------------------------------------------------------------------------laoding----------*/

#loader {
display:none;
position:fixed;
top:50%;
left:50%;
z-index:1030;
margin-left:-16px;
margin-top:-16px;
width:32px;
height:32px;
}

#loader img{
width:100%;
height:auto;
}

#fade {
width:100%;
height:100%;
display:none;
background-color:#fff;
position: absolute;
top:0;
left:0;
z-index:1020;
}

/*----------------------------------------------------------------------------------------------------------------------gnav----------*/

#gnav{
position:fixed;
z-index:1;
top:50px;
left:33.32%;
width:58.31%;
}

#gnav ul{ 
width:100%;
display:flex;
}

#gnav li{ 
margin-right:4.5%;
padding-bottom:10px;
}

#gnav li.active span{
border-bottom:1px solid #fff;
padding-bottom:10px;
}

#gnav li a{ 
color:#fff;
font-weight:bold;
opacity: 1;
position: relative;
}

#gnav li a:after{ 
position: absolute;
bottom: -10px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #fff;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.3s;
}

#gnav li a:hover::after{ 
transform-origin: left top;
transform: scale(1, 1);
}

#gnav li a.current::after {
position: absolute;
bottom: -10px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #fff;
transform: scale(1, 1);
}


/*スクロール後のナビ色 ここから*/

#gnav .headerColorScroll li a{
color: #333;
transition: color 0.4s ease-out;
}

#gnav .headerColorScroll a:after{ 
position: absolute;
bottom: -10px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #333;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.3s;
}

#gnav .headerColorScroll a:hover::after{ 
transform-origin: left top;
transform: scale(1, 1);
}

#gnav .headerColorScroll a.current::after {
position: absolute;
bottom: -10px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #333;
transform: scale(1, 1);
}

/* ロゴに関するスタイル */

.js-logo-before{ display : inline; }
.js-logo-after{ display : none; }

.logo_display{ display : inline; }
.logo_none{ display : none; }


@media screen and (max-width:1024px){		

#gnav{
left:25%;
width:100%;
}

#gnav li{ margin-right:2.8%; }

}


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

#gnav{ display:none; }

}



/*----------------------------------------------------------------------------------------------------------------------main_v----------*/

#main_v{
width:100%;
height:100%;/*100vh*/
}

#main_v h2.main_copy{
position:absolute;
bottom:300px;
left:8.33%;
z-index:1;
width:50%;
display:none;
}

#main_v h3.sub_copy{
position:absolute;
bottom:240px;
left:8.33%;
z-index:1;
width:22%;
display:none;
}

#main_v h2.main_copy img,
#main_v h3.sub_copy img{ width:100%; height:auto; }


.scroll{
position:absolute;
right:2.77%;
bottom:40px;
z-index:1;
}

.scroll .txt{
writing-mode: vertical-lr;
font-size:11px;
font-weight:bold;
color:#fff;
margin:0 0 15px 18px;
}

.scroll .btn{
width:60px;
height:60px;
}

.scroll .btn a{
opacity: 1;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.scroll .btn a:hover{ opacity: 0.6; }

.scroll .btn img{ width:100%; height:auto; }

#video-area{
position: absolute; /*fixed*/
z-index: -1;
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}

#video-area .overlay{
position: absolute;
z-index:0;/*下から2番目に表示*/
top:0;
width:100%;
height: 100vh;
background-color:rgba(0,0,0,0.25);
}

#video {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
height: 56.25vw;
min-height: 100%;
min-width: 100%;
/*background: url("../images/movie.jpg") no-repeat;
background-size: cover;*/
}


@media screen and (max-width:1024px){

#main_v h2.main_copy{ 
width:65%;
bottom:280px;
}

#main_v h3.sub_copy{ 
width:30%; 
bottom:220px;
}

.scroll{
position:absolute;
left:5%;/*2.77*/
bottom:40px;
z-index:1;
}

.scroll .txt{ margin:0 0 15px 13px; }

.scroll .btn{
width:48px;
height:48px;
}

}

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

#main_v h2.main_copy{ 
width:86%;
bottom:48%;
left:6.25%;
}

#main_v h3.sub_copy{ 
width:48%;
bottom:43%;
left:6.25%;
}

}


/*----------------------------------------------------------------------------------------------------------------------news----------*/


#news{
width:66.64%;
background-color:rgba(255,255,255,0.6);
border-radius: 0 35px 35px 0;
line-height:1;
height:70px;
position:relative;
z-index:0;
/*
bottom:100px;
left:0;*/
margin-top:-170px;
display:flex;
}

#news h2{
width:18.75%;
text-align:center;
color:#fff;
background-color:#8dc21f;
padding:28px 0 0 0;
height:70px;
}

#news ul{
padding:28px 0 0 0;
margin:0 3.5%;
background:url("../images/cir_arrow_bl.png") no-repeat right center;
background-size:17px 17px;
width:81.25%;
}

#news ul li{ display:inline-block; }

#news ul li:last-child{ padding-left:20px;}

#news ul a{ 
opacity: 1;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#news ul a:hover{ 
opacity:0.6;
}


@media screen and (max-width:1200px){

#news{ width:80%; }

#news ul li:last-child{ padding-left:10px; }

}

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

#news{
width:100%;
height:auto;
margin-top:0;
display:block;
border-radius: 0 0 0 0;
border-bottom:1px solid #ddd;
}

#news h2{
width:100%;
padding:28px 0 26px 0;
height:auto;
}

#news ul{
padding:28px 0 25px;
margin:0 5%;
width:90%;
line-height:2;
}

#news ul li{ display:block; }

#news ul li:first-child{ font-size:13px; }

#news ul li:last-child{ 
padding-left:0;
width:90%;
line-height:1.6;
margin-top:5px;
}

}

/*----------------------------------------------------------------------------------------------------------------------about----------*/

#about{ 
margin-top:100px;
position:relative;
}

#about .inner{ 
padding:180px 0 200px 0 ;
width:83.3%;
margin:0 auto;
display:flex;
flex-direction: row-reverse;
}

.about_ph{ width:50%; }

.about_ph img{ width:100%; height:auto;  }

.about_txt{ 
width:50%;
padding-right:6%;
}

.about_txt h3{
font-size:17px;
color:#8dc21f;
letter-spacing:0.05em;
}

.about_txt h2{
font-size:36px;
font-weight:bold;
line-height:1.6;
margin-top:20px;
}

.about_txt p{ margin-top:20px; }

.btn_area{
margin-top:50px;
display:flex;
}

.btn_area .more{ width:48%; }

.btn_area .more:last-child{ margin-left: auto; }

.bg_pale_blue{
position:absolute;
width:33.32%;
height:100%;
top:0;
right:0;
background-color:#edf5de;
z-index:-1;
}

@media screen and (max-width:1200px){

.about_ph{ width:40%; }

.about_txt{ width:60%; }

.about_txt h2{ font-size:24px; }

}


@media screen and (max-width:767px){
	
#about{ margin-top:0px; }

#about .inner{ 
padding:80px 0 100px 0 ;
width:90%;
display:block;
}

.about_ph{ width:100%; }

.about_txt{ 
width:100%;
padding-right:0;
padding-left:5%;
}

.about_txt h3{ margin-top:40px; }

.about_txt h2{ margin-top:10px; }

.btn_area{ 
margin-top:30px;
display:block;
}

.btn_area .more{ width:82.5%; }

.btn_area .more:last-child{ 
margin-left:0;
margin-top:20px;
}

.bg_pale_blue{ width:33.3%; }

}


/*----------------------------------------------------------------------------------------------------------------------service----------*/

#service{ 
width:100%;
padding-bottom:250px;
position:relative;
}

#service .service_ph{ 
width:66.64%;
}

#service .service_ph img{ width:100%; height:auto; }

.service_txt{
display:flex;
margin-left:8.33%;
}

#service h3{
font-size:17px;
color:#8dc21f;
letter-spacing:0.05em;
width:10%;
margin-top:80px;
}

.tit_jp{
width:49.98%;
margin-top:72px;
}

.tit_jp h2{
font-size:36px;
font-weight:bold;
line-height:1.6;
}

.tit_jp p{ margin-top:10px; }

.tit_jp .more{ 
width:33.33%;
margin-top:30px;
}

#service ul{
position:absolute;
top:150px;
right:8.33%;
display:flex;
flex-wrap: wrap;
width:480px;
} 

#service ul li{ 
width:240px;
margin-top:75px;
}

#service ul li .ico{ 
width:140px;
margin:0 auto;
}

#service ul li .ico img,
#service ul li .arrow img{ width:100%; height:auto; }

#service ul li p{
text-align:center;
margin-top:10px;
color:#8dc21f;
font-size:14px;
font-weight:bold;
letter-spacing:0.05em;
}

#service ul li h4{
text-align:center;
margin-top:5px;
}

#service ul li .arrow{
width:18px;
margin:5px auto 0;
line-height:1;
}

#service ul a{ 
opacity: 1;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#service ul a:hover{ opacity:0.7; }

.bg_grey{
position:absolute;
width:49.98%;
height:100%;
top:0;
right:0;
background-color:#f6f6f6;
z-index:-1;
}

@media screen and (max-width:1200px){

#service ul{
top:100px;
right:2.5%;
} 

#service ul li{ margin-top:50px; }

}


@media screen and (max-width:767px){
	
#service{ padding-bottom:290px; }

#service .service_ph{ 
width:95%;/*83.33%*/
margin-left:5%;
}

.service_txt{
display:block;
margin-left:10%;
}

#service h3{
width:90%;
margin-top:40px;
}

.tit_jp{
width:95%;
margin-top:10px;
}

.tit_jp h2{ font-size:24px; }

.tit_jp .more{ 
width:82.5%;
margin-top:30px;
}

#service ul{
position:relative;
top:0;
right:0;
width:90%;
margin:50px auto 0;
border-top:1px dotted #ccc;
} 

#service ul a{ 
width:50%;
margin-top:50px;
letter-spacing:0;
}

#service ul li{ 
margin:0 auto;
width:100%;
}

#service ul li .ico{ width:100px; }

#service ul li h4{ margin-top:0px; }

.bg_grey{ width:33.3%; }

}


/*----------------------------------------------------------------------------------------------------------------------base----------*/

#base{ 
width:100%;
position:relative;
display:flex;
flex-direction:row-reverse;
align-items: center;
margin-top:-80px;
}

.tit_base{
width:25%;
padding:0 0 0 4.16%;	
}

.tit_base h2{
font-size:36px;
font-weight:bold;
line-height:1.6;	
}

.tit_base h3{
font-size:17px;
color:#8dc21f;
letter-spacing:0.05em;	
}

#base ul{ 
width:66.64%;
display:flex;
}

#base ul a{ 
position: relative;
width:50%;
}

#base ul li{
width:100%;
position:relative;
}

#base ul li p{
font-size:14px;
font-weight:bold;
color:#8dc21f;
position:absolute;
top:20px;
left:22px;
z-index:1;
}

#base ul li h4{
color:#fff;
position:absolute;
bottom:20px;
left:20px;
z-index:1;
letter-spacing:0.1em;	
}

#base ul li img{ 
display:block;
width:100%;
height:auto;
}

#base ul li .arrow{
position:absolute;
bottom:25px;
right:20px;
z-index:1;
width:17px;
}

#base ul li .arrow img{ width:100%; height:auto; }

#base ul a::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
z-index: 0;
bottom: 0;
left: 0;
/*背景の形状*/
width: 0;
height:100%;
background:#8dc21f;
/*アニメーション*/
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0;
}

#base ul a:hover::after {
width: 100%;
opacity: 0.8;
}

#base ul a:hover p{ color: #fff; }

@media screen and (max-width:1200px){

}

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

#base{ 
display:block;
margin-top:-200px;
}

.tit_base{
width:100%;
}

.tit_base h2{ font-size:24px; }

.tit_base h3{
font-size:17px;
color:#8dc21f;
letter-spacing:0.05em;	
}

#base ul{ 
width:90%;
margin-left:10%;
margin-top:30px;
display:block;
}

#base ul a{ 
position: relative;
width:100%;
}

}

/*----------------------------------------------------------------------------------------------------------------------recruit----------*/

#recruit{ 
width:100%;
position:relative;
padding:170px 0 0;
}

#recruit .rec_v{ 
width:83.3%;
margin:0 auto;
}

#recruit .rec_v img{ width:100%; height:auto; }

#recruit .rec_txt{ 
width:83.3%;
margin:62px auto 0;
display:flex;
}

#recruit .rec_txt h3{ 
width:10%;
font-size:17px;
color:#8dc21f;
letter-spacing:0.05em;
padding-top:8px;	
}

#recruit .rec_tit{ width:70%; }

#recruit .rec_tit h2{
font-size:36px;
font-weight:bold;
line-height:1.6;	
}

#recruit .rec_tit p{ margin-top:10px; }

#recruit .more{ 
width:20%;
margin-top:30px;
}

.square_pale_blue{
position:absolute;
width:33.32%;
height:50%;
top:0;
left:0;
background-color:#edf5de;
z-index:-1;
}

@media screen and (max-width:767px){
	
#recruit{ 
padding:100px 0 0;
margin-top:-50px;
}

#recruit .rec_v{ 
width:95%;
margin-left:5%;
}

#recruit .rec_txt{ 
width:83.3%;
margin:30px auto 0;
display:block;
}

#recruit .rec_txt h3{ 
width:100%;
padding-top:0px;	
}

#recruit .rec_tit{ width:100%; }

#recruit .rec_tit h2{
font-size:24px;
}

#recruit .more{ 
width:80%;
margin-top:30px;
}

.square_pale_blue{
width:50%;
height:45%;
top:0;
left:0;
}
	
}