@charset "UTF-8";
/* CSS Document */

header{ background-color:rgba(255,255,255,0);}

#mainimage{ background-image:url(../../img/main_img01.jpg); background-repeat:no-repeat; background-position:50% 0; background-attachment:fixed; height:640px; padding:330px 0 0 0;}
/*
#mainimage{ background-image:url(../../img/test2.gif); background-repeat:no-repeat; background-position:50% 0; background-attachment:fixed; height:640px; padding:330px 0 0 0;}
*/


#mainimage p{ text-align:center; color:#000; padding-right:456px;}
#mainimage .txt1{ font-size:3rem; letter-spacing:0.6em;font-family: "Sawarabi Mincho", "ヒラギノ明朝 Pro W3","Yu Mincho", "YuMincho", "細明朝体","ＭＳ Ｐ明朝"}
#mainimage .txt2{ letter-spacing:0.4em; padding-top:17px;}
.infiniteslide{ width:100%;}
@media screen and (min-width:1950px){.infiniteslide img{ width:100%;}}

#top_base{ background-color:rgba(255,255,255,0.7); width:100%; height:100px; position:fixed; z-index:13;}

#info{ padding:60px 0 105px 0;}
#info .container{ text-align:center;}
#info h3{ color:#fff; background-color:#494949; font-size:1.8rem; font-weight:bold; text-align:center; width:320px; line-height:32px; margin:0 auto;}
.newslist{ width:320px; display:inline-block; vertical-align:top; margin:0 32px;}
.newslist .title{ padding:58px 0 21px 0; font-size:1.7rem; font-weight:bold;}
.newslist_s{ text-align:left; border-top:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb; padding:22px 0 13px 0; font-size:1.3rem; line-height:1.6;}
.newslist_s p{ font-weight:bold; font-size:1.4rem; padding:3px 0;}
.listlink{ text-align:left; padding-top:10px;}
.listlink a{ background-image:url(../../img/info_icon.png); background-position:0 50%; background-repeat:no-repeat; padding-left:20px; font-size:1.3rem;}


#contents{ background-image:url(../../img/contents_back.jpg); background-repeat:no-repeat; background-position:50%; padding:140px 0;}
.box{ position:relative;}
a.box{ display:block; width:390px; height:236px; color:#fff; border:1px solid rgba(255,255,255,0.3); padding:0 32px; cursor:pointer; float:left; margin:-1px 0 0 -1px;}
a.box:hover{ background-color:rgba(0,0,0,0.4); color:#fff;}
a.box h2{ font-size:2rem; font-weight:bold; position:absolute; top:94px; left:32px;}
a.box .txt{ font-size:1.4rem; line-height:1.6; position:absolute; left:32px; top:140px; width:320px; filter:alpha(opacity=0);-moz-opacity: 0;opacity: 0;}
a.box .read{ position:absolute; right:60px; bottom:30px; font-size:1.4rem; font-family:Century Gothic, sans-serif;filter:alpha(opacity=0);-moz-opacity: 0;opacity: 0;}
a.box .btn{ position:absolute; right:32px; bottom:24px;
text-align:center;
  color:#fff;
  font-size:2rem;
  font-weight:bold;
  border:2px solid #fff;
  width:41px;
  height:41px;
  line-height:36px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;}
a.box h2,a.box .read,a.box .btn,a.box .txt{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;}
a.box:hover h2{ top:40px;}
a.box:hover .read{ right:84px;filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;}
a.box:hover .btn{ color:#000; background-color:#fff;}
a.box:hover .txt{ top:95px; filter:alpha(opacity=100);-moz-opacity: 1;opacity: 1;}



#company{ padding:57px 0 40px 0;}
#company .container{ border-left:1px solid #b2b2b2; border-right:1px solid #b2b2b2;}
#company .left{ width:50%; background-image:url(../../img/company_back.jpg); background-repeat:no-repeat; background-position:right bottom; height:450px; padding-left:35px; border-right:1px solid #b2b2b2;}
#company .right{ width:50%; background-image:url(../../img/staff_back.jpg); background-repeat:no-repeat; background-position:right bottom; height:450px; padding-left:35px;}
#company h3{ font-size:3.2rem; padding:22px 0 55px 0;}
#company h3 span{ font-size:1.5rem; padding-left:15px;}
#company .title{ font-size:1.6rem; font-weight:bold;}
#company .txt{ padding:23px 0 105px 0;}
#company a{ display:block; background-color:#494949; color:#fff; width:194px; padding:4px 0 6px 33px; background-image:url(../../img/arrow.png); background-repeat:no-repeat; background-position:92% 50%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;}
#company a:hover{ background-position:94% 50%; background-color:#2585de;}








/* トップ動画PC */

.wrap_video{
    position: relative;
    height: 660px;
	overflow: hidden;
}

.video_overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background:url(../../overlay.png);
}

.bg_video{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: auto;
    background: url(../../test.jpg) no-repeat center;
    background-size: cover;
    z-index: -100;
}

.video_title{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    width: 60%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
}

.video_title .txt1{
	font-size:3rem;
	letter-spacing:0.6em;
    line-height: 1.4;
	font-family: "Sawarabi Mincho", "ヒラギノ明朝 Pro W3","Yu Mincho", "YuMincho", "細明朝体","ＭＳ Ｐ明朝";
	color: #000;
	text-shadow: 2px 2px 3px #fff,
	-2px 2px 3px #fff,
	2px -2px 3px #fff,
	-2px -2px 3px #fff,
	0px 0px 4px #fff;
}

.video_title .txt2{
	letter-spacing:0.4em;
	padding-top:17px;
	color: #000;
	text-shadow: 2px 2px 3px #fff,
	-2px 2px 3px #fff,
	2px -2px 3px #fff,
	-2px -2px 3px #fff,
	0px 0px 4px #fff;
}

.video_obi {
    background-color: rgba(255,255,255,0.7);
    padding: 30px 40px 25px;
    margin: 60px 0 0;
}







@media screen and (max-width:760px){
#top_base{ display:none;}

header h1 {
	padding-top:10px;
	position:relative;
	z-index:9;
	}
	
header h1 img{ width:200px;}
#mainimage{ height:300px; padding:100px 0 100px 0; background-size:cover; background-attachment:scroll; background-position:left top;}
#mainimage p{ padding-right:0;}
#mainimage .txt1{ font-size:2.6rem; letter-spacing:0.3em; line-height:1.4}
#mainimage .txt2{ letter-spacing:0.2em; padding-top:17px;}
.infiniteslide{ width:100%;}
.slick-slide { height:130px;}


#info{ padding:50px 0 20px 0;}
#info h3{ width:100%; margin-bottom:15px;}
.newslist{ width:100%; display:block; margin:0 0 20px 0;}
.newslist .title{ padding:10px 0;}
.newslist_s{ padding:13px 0;}


#contents{ background-size:cover; padding:50px 0;}
a.box{ display:block; width:50%; height:auto; padding:20px 10px;}
a.box h2{ font-size:1.6rem; position:relative; top:auto; left:auto; padding-bottom:10px;}
a.box .txt{ font-size:1.3rem; line-height:1.6; padding-bottom:10px; position:relative; left:auto; top:auto; width:auto; filter:alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
a.box .read{ position:absolute; right:37px; bottom:7px; font-size:1.2rem; font-family:Century Gothic, sans-serif;filter:alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
a.box .btn{ position:absolute; right:10px; bottom:10px;
text-align:center;
  color:#fff;
  font-size:1.1rem;
  width:20px;
  height:20px;
  line-height:16px;}
a.box:hover h2{ top:auto;}
a.box:hover .read{ right:37px;}
a.box:hover .txt{ top:auto; filter:alpha(opacity=100);-moz-opacity: 1;opacity: 1;}



#company{ padding:80px 0;}
#company .container{ border-left:none; border-right:none;}
#company .left{ width:100%; background-image:none; height:auto; padding:0 0 60px 0; border-right:none; border-bottom:1px solid #b2b2b2;}
#company .right{ width:100%; background-image:none; height:auto; padding:60px 0 0 0;}
#company h3{ font-size:2.6rem; padding:0 0 20px 0;}
#company h3 span{ font-size:1.4rem; padding-left:10px;}
#company .title{ font-size:1.5rem; font-weight:bold;}
#company .txt{ padding:20px 0 30px 0;}




/* トップ動画スマホ */

.wrap_video {
    height: 100vw;
}

.video_obi {
    visibility: visible;
    animation-name: fadeInUp;
    padding: 3vw 5vw 2vw;
	margin:8vw 0 0;
}

.video_title {
    width: 80%;
}

.video_title .txt1 {
    font-size: 6vw;
    letter-spacing: 2.4vw;
}

.video_title .txt2 {
    font-size: 3vw;
    letter-spacing: 1vw;
}

.bg_video {
    height: 100%;
    width: auto;
    left: -40%;
}

}













.slide{position:relative;width:100%;height:240px; background-color:#fff;}
@media screen and (max-width:64em){.slide{height:200px}}
@media screen and (max-width:48.9375em){.slide{height:160px}}
@media screen and (max-width:30em){.slide{height:120px}}

.slide_i{position:absolute;top:0;width:20%;height:180px;background-position:50% 50%;background-size:cover}.slide_i:first-child{background-position:100% 50%}
@media screen and (min-width:64em){.slide_i:nth-child(-n+5){-webkit-animation:f 11.5s infinite linear;animation:f 11.5s infinite linear}.slide_i:nth-child(n+6){visibility:visible;-webkit-animation:g 11.5s infinite linear;animation:g 11.5s infinite linear}.slide_i:nth-child(5n+1){left:0}.slide_i:nth-child(5n+2){left:20%;-webkit-animation-delay:.1s;animation-delay:.1s}.slide_i:nth-child(5n+3){left:40%;-webkit-animation-delay:.2s;animation-delay:.2s}.slide_i:nth-child(5n+4){left:60%;visibility:visible;-webkit-animation-delay:.3s;animation-delay:.3s}.slide_i:nth-child(5n){left:80%;visibility:visible;-webkit-animation-delay:.4s;animation-delay:.4s}}
@media screen and (max-width:64em){.slide_i{width:25%;height:200px}.slide_i:nth-child(-n+4){-webkit-animation:f 12s infinite linear;animation:f 12s infinite linear}.slide_i:nth-child(n+5):not(:nth-child(n+9)){-webkit-animation:g 12s infinite linear;animation:g 12s infinite linear}.slide_i:nth-child(4n+1){left:0}.slide_i:nth-child(4n+2){left:25%;-webkit-animation-delay:.1s;animation-delay:.1s}.slide_i:nth-child(4n+3){left:50%;-webkit-animation-delay:.2s;animation-delay:.2s}.slide_i:nth-child(4n){left:75%;-webkit-animation-delay:.3s;animation-delay:.3s}.slide_i:nth-child(n+9){visibility:hidden}}
@media screen and (max-width:48.9375em){.slide_i{width:33.33333%;height:160px}.slide_i:nth-child(-n+3){-webkit-animation:h 18s infinite linear;animation:h 18s infinite linear}.slide_i:nth-child(n+4):not(:nth-child(n+7)){-webkit-animation:i 18s infinite linear;animation:i 18s infinite linear}.slide_i:nth-child(n+7):not(:last-child){-webkit-animation:j 18s infinite linear;animation:j 18s infinite linear}.slide_i:nth-child(3n+1){left:0}.slide_i:nth-child(3n+2){left:33.33333%;-webkit-animation-delay:.1s;animation-delay:.1s}.slide_i:nth-child(3n){left:66.66666%;display:block;visibility:visible;-webkit-animation-delay:.2s;animation-delay:.2s}.slide_i:last-child{display:none;visibility:hidden}}
@media screen and (max-width:30em){.slide_i{height:120px}}

.slide_i .__img{width:20%;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}.sliderfade1{-webkit-animation:f 12s infinite linear!important;animation:f 12s infinite linear!important}.sliderfade1_2{-webkit-animation:g 12s infinite linear!important;animation:g 12s infinite linear!important}.sliderfade3{-webkit-animation:h 12s infinite linear;animation:h 12s infinite linear}.sliderfade3_2{-webkit-animation:i 12s infinite linear;animation:i 12s infinite linear}.trigger{-webkit-animation:e .01s!important;animation:e .01s!important}@-webkit-keyframes e{to{z-index:2}}
@keyframes e{to{z-index:2}}
@-webkit-keyframes f{0%,50%,to{z-index:-1;opacity:0}5%,45.1%{z-index:1;opacity:1}}
@keyframes f{0%,50%,to{z-index:-1;opacity:0}5%,45.1%{z-index:1;opacity:1}}
@-webkit-keyframes g{55%,95%{z-index:1;opacity:1}0%,50%,to{z-index:-1;opacity:0}}
@keyframes g{55%,95%{z-index:1;opacity:1}0%,50%,to{z-index:-1;opacity:0}}
@-webkit-keyframes h{0%,35%,to{z-index:-1;opacity:0}2%,30%{z-index:1;opacity:1}}
@keyframes h{0%,35%,to{z-index:-1;opacity:0}2%,30%{z-index:1;opacity:1}}
@-webkit-keyframes i{35%,60%{z-index:1;opacity:1}0%,30%,65%,to{z-index:-1;opacity:0}}
@keyframes i{35%,60%{z-index:1;opacity:1}0%,30%,65%,to{z-index:-1;opacity:0}}
@-webkit-keyframes j{65%,99.5%{z-index:1;opacity:1}0%,60%,to{z-index:-1;opacity:0}}
@keyframes j{65%,99.5%{z-index:1;opacity:1}0%,60%,to{z-index:-1;opacity:0}}