@charset "utf-8";
a:hover{ text-decoration: none;}
a{outline: none;}
body *{ font-family: "Kokoro", "Hannari", "Sawarabi Mincho";}


::selection { background: #111; color: #aaa;}
::-moz-selection { background: #111; color: #aaa;}

.pageTop a:hover{ background: #fff;}
.pageTop a span, 
.pageTop a span::before{ color: #333; text-decoration: none !important;}
.pageTop a{ text-align:none; box-shadow: 0 0 0 1px #333inset;}
.pageTop a:hover { box-shadow: 0 0 0 6px #333inset;}

.inner{ width: 94%; margin: 0 auto; max-width: 980px;}
.inner2{ width: 94%; margin: 0 auto; max-width: 1100px;}
/*-------------------------
 overView
---------------------------*/
.open .overView{ width: 100%; }
.overView{ width:0%; height: 100%; position: fixed; z-index: 100000000; left: 0; top: 0; background: #333; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}

.logoView{width: 100%; top: 50%; left: 0; margin-top: -220px; position: fixed; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; z-index: 10000000000001; opacity: 0.0;}

.open .logoView{ opacity: 1;}
.in .logoView{ display: none;}

.logoView span{ display: block; position: fixed; width: 410px; height: 320px; left: 50%; top: 50%; margin: -220px 0 0 -204px;}



/*-------------------------
 main1
---------------------------*/
#main1 {}
#main1 div { width: 100%; height: 100vh; float: left; position: relative;}

#main1 div .mv1, 
#main1 div .mv2, 
#main1 div .mv3{ position: absolute; display: block;}



#main1 div .mv1{ width: 140%; height: 100%; max-width:1600px; left:0%; top: 0%; margin-left: -20%; background: url(../../img/mv1.gif) 60% 30% no-repeat; background-size: contain; z-index: 10;}

#main1 div .mv2{ width: 26%; height: 50%; max-width:240px; max-height: 500px; left: 54%; bottom: 2%; margin:0 0 0 -142px; background: url(../../img/mv2.png) 100% 100% no-repeat; background-size: contain; z-index: 11;}
#main1 div .mv3{ width: 40%; height: 300px; max-width:670px; left: 30%; top: 0%; background: url(../../img/mv3.png) 0 0 no-repeat; background-size: contain; z-index: 21;}


.open #main1 div .mv1{ opacity: 0; margin-top: 5%; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
.open #main1 div .mv2{ opacity: 0; margin-top: 20%; -moz-transition: 0.6s 0.6s ease-in-out; -o-transition: 0.6s 0.6s ease-in-out; transition: 0.6s 0.6s ease-in-out;} 
.open #main1 div .mv3{ opacity: 0; margin-top: -5%; -moz-transition: 1.0s 0.8s ease-in-out; -o-transition: 1.0s 0.8s ease-in-out; transition:  1.0s 0.8s ease-in-out;} 

#main1.setView div .mv1, 
#main1.setView div .mv2, 
#main1.setView div .mv3{ margin-top: 0; opacity: 1;}

.scroll #main1 div .mv1, 
.scroll #main1 div .mv2, 
.scroll #main1 div .mv3 {-moz-transition:0s 0s; -o-transition:0s 0s; transition:0s 0s;} 


@media screen and (min-width: 1150px) {
#main1 div .mv1{ width: 100%; margin-left: 0;}
}
@media screen and (max-width: 800px) {
#main1 div .mv2{ width: 30%; bottom: 50%; left: 60%; margin-bottom: -250px;}
#main1 div .mv3{ width: 60%; left: 20%; top: 1%;}
}

@media screen and (max-width: 500px) {
    #main1 div .mv3{ width: 80%; left: 10%; top: 3%;}
#main1 div .mv2{ width: 40%; bottom: auto; top: 30%; left: 68%;}

}




/*-------------------------
 main2
---------------------------*/
#main2 { padding: 80px 0 50px;}
#main2 p{ text-align: center; font-size: 22px; line-height: 2.2em; color: #444; opacity: 0; margin-top: 30px; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
#main2 p b{ display: block; padding-bottom: 20px; color: #444;}
#main2 p b br{ display: none;}
#main2.setView p{ margin-top: 0; opacity: 1;}

@media screen and (max-width: 740px) {
#main2 { padding: 50px 0 20px;}
#main2 p{ font-size: 4vw; letter-spacing: 0;}
#main2 p b br{ display: block;}
#main2 p b{ font-size: 6vw;}
}

/*-------------------------
 main3
---------------------------*/
#main3 { padding: 50px 0 0px; overflow: hidden;}
#main3 .item{ margin: 80px 0;  -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; padding-top: 50px; opacity: 0; z-index: 5;} 
#main3 .item.setView{ padding-top: 0; opacity: 1;}

#main3 .item div{box-shadow: 0 0px 0 1px #ccc; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
#main3 .item div:hover{ box-shadow: 0 6px 30px #ccc;}

.slick-dots li button:before{ font-size: 12px !important;}
.slick-dots{ bottom: -45px !important;}
.slick-prev:before, .slick-next:before{color: black !important; font-size:50px !important;}
.slick-next {right: -5px !important; z-index: 100;}
.slick-prev {left: -25px !important; z-index: 100;}

@media screen and (max-width: 740px) {
.slick-dots li button:before{ font-size: 8px !important;}
    .slick-dots li{ margin: 0 !important;}
.slick-prev:before, .slick-next:before{font-size:20px !important;}

.slick-next {right: -15px !important;}
.slick-prev {left: -15px !important;}
}

/*-------------------------
 main4
---------------------------*/
#main4 { padding:  0 0 40px;}
#main4 dl, 
#main4 dl > *{ width: 100%; float: left; font-size: 16px;}

#main4 dl dt{ font-weight: bold; text-align: center; margin-top: 40px;}
#main4 dl dd{ padding: 10px 0; opacity: 0; margin-left: 20px; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;}

#main4 dl dd.setView{ opacity: 1; margin-left: 0;}
#main4 dl dd > b{ display: inline-block; float: left; width: 50%; text-align: right;}
#main4 dl dd >span{ display: inline-block; float: right; width: 50%;}
#main4 dl dd p{ display: block; text-align: center; padding-top: 30px;}
#main4 dl dd p span{ display: inline-block; padding: 0px 20px 6px; border: solid 2px #333; line-height: 34px; text-align: center; border-radius: 35px; margin: 0 auto; font-size: 22px;}
#main4 dl dd p span b{ display: block; font-size: 9px; text-align: center; border-top: solid 1px #333; line-height: 1.4em; padding: 0 5px; margin-top: 2px;}


/*-------------------------
 FAQ
---------------------------*/
.openAcc #faq{ display: none;}


#faq{ margin-bottom: 100px;}

#faq .box{ display: none;}
#faq .box.view{ display: block;}

#faq .box{ width: 100%; height:100%; left: 0; top: 0; position: fixed; z-index: 50000000000; background:#333; overflow-x: auto;}
/**/
.faqOn { height: 100%; margin-bottom: 50px;}
.faqCont{ width: 100%; float: left; padding:50px 10% 40px; overflow-x: auto; z-index: 500000000001;}
.faqCont > *{ width: 94%; float: left; color: #000; position: relative; font-size: 18px;}
.faqCont > * > span{ position: absolute; left: -1.2em; top: 0; color: #000; font-weight: bold; font-size: 20px;}

.faqCont dt{ font-weight: bold; border-bottom: dotted 1px #333; padding-bottom: 5px; margin-bottom: 15px; color: #333; font-size: 20px; position: relative; padding-left: 50px;}
.faqCont dd{ margin-bottom: 55px; position: relative; padding-left: 50px; color: #555;}

.faqCont dt::before, 
.faqCont dd::before{ font-family: 'Amatic SC', cursive; position: absolute; left: -0; top: 0; font-weight: bold; border-radius: 100%; text-align: center; width: 34px; height: 34px; line-height: 34px; text-align: center;}

.faqCont dt::before{ content: "Q"; background: #333; color: #fff;}
.faqCont dd::before{ content: "A"; color: #333; border: solid 1px #333;}

/**/
 .about .faqCont dt{ border-bottom: dotted 1px #eee; color: #fff; }
 .about .faqCont dd{ color: #fff !important;}
 .about .faqCont dt::before{ background: #fff; color: #333;}
 .about .faqCont dd::before{ color: #fff; border: solid 1px #fff ;}




/**/
#faq .more { width: 100%; float: left; text-align: center;}
#faq .more li{ display: inline-block; line-height: 40px; width: 80%; max-width: 400px; text-align: center; font-size: 14px; border: solid 4px #333; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; cursor: pointer;}

#faq .more li:hover{box-shadow:400px 0 0 0 #333 inset; color: #fff;}



/**/
body.tab-btn{ height: 100%; position: fixed; overflow: hidden;}
#faq .main7Overray{ display: none; z-index: 5000000000;}
body.tab-btn #faq{ z-index: 5000000000;}
body.tab-btn #cry1{ z-index:2;}
body.tab-btn .pageTop, 
body.tab-btn #cry1, 
body.tab-btn #linkList, 
body.tab-btn #ouboGaiyou, 
body.tab-btn #cpInfo{ display: none;}

body.tab-btn #faq .main7Overray{ display: block; width:80%; height: 50px; position: fixed; left: 10%; bottom: 5%; background: #333; color:#fff; border:solid 2px #fff;}

body.tab-btn #faq .main7Overray:hover{ background: #fff; color:#333;}

#faq .main7Overray::before{ width: 100%; display: block; content: "×とじる"; text-align: center; font-size: 22px; cursor: pointer; line-height: 46px; color:#fff; font-weight: bold;}

#faq .main7Overray:hover::before{color: #333;}
#faq .main7Overray a{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

@media screen and (max-width: 1200px) {
#faq .inner{ width: 90%; margin: 0 5% 0;}
#faq .inner p{ width: 60%; padding: 20px 0 0 0px; font-size: 18px;}
}

@media screen and (max-width: 960px) {
#faq .inner{ width: 92%; margin: 0 4% 0;}
#faq h2{  margin:0px 0 0px;}

}

@media screen and (max-width: 740px) {
#faq .inner{ margin: 30px 4% 0; z-index: 110;}
#faq .inner p{ width: 100%; float:left; font-size: 16px;}
#faq .tab-btn { top: auto; bottom: 1%; height: 100px;}

.faqCont{padding:10% 4% 10px;}
.faqOn{ margin-bottom: 80px;}
.faqCont > *{ font-size: 16px; line-height: 1.6em;}
.faqCont > * > span{font-size: 16px;}
.faqCont dd{ margin-bottom: 50px;}

}

@media screen and (max-width: 640px) {
#faq { padding-bottom: 50px;}
.faqCont dt::before, 
.faqCont dd, ::before, 
.about .faqCont dt::before, 
.about .faqCont dd::before{ font-size: 18px; top: -6px;}

.faqCont dt, 
.faqCont dd{ font-size: 16px;}

}


/*recruitment*/
#recruitment{ padding: 40px 0; background: #111;}
#recruitment dl{ width: 90%; margin: 0 auto; max-width: 900px; padding:14px 2%; border: solid 4px #fff; background: rgba(0,0,0,0.2);}
#recruitment dl > *{ width: 100%; float: left; text-align: center;}
#recruitment dl dt{ border-bottom: dotted 3px #fff; font-weight: bold; color: #111; padding-bottom: 5px;}
#recruitment dl dt span{ display: block; font-size: 40px; color: #fff; line-height: 1.4em;}

#recruitment dl dd, 
#recruitment dl dd b{color: #fff; font-size: 16px; line-height: 2.0em; display: block;}
#recruitment dl dd b { padding: 15px 0 5px; font-size: 18px;}

@media screen and (max-width: 940px) {
#recruitment dl dt, 
#recruitment dl dd{ text-align: left;}
}
@media screen and (max-width: 740px) {
#recruitment dl dt{ font-weight: normal;}
#recruitment dl dt span{ font-size: 34px; font-weight: bold;}

#recruitment dl dd{font-size: 14px;}
#recruitment dl dd b{font-size: 16px;}

}

/**/
.il{ position: absolute; z-index: 9;}
.i1{ right: 3%; top: 80%; width: 120px; height: auto; }
.i2{ left: 12%; top: 30%; width:60px; height: auto; }

.i3{ right: 2%; top: 40%; width:50px; height: auto; }
.i4{ left: 2%; top: 20%; width:80px; height: auto; }
.i5{ right: 10%; top: 60%; width:70px; height: auto; }

.i6{ left: 4%; top: 60%; width:30px; height: auto; }
.i7{ right: 0%; top: 70%; width:70px; height: auto; }
.i8{ left: 1%; top: 80%; width:60px; height: auto; }




@media screen and (max-width: 740px) {
.i1{ right: -4%; top: 80%; width: 90px; z-index: -1;}
.i2{ left: -2%; top: 30%; width:60px; z-index: -1;}

.i3{ right: 1%; top: 40%; width:50px; height: auto; }
.i4{ left: 0%; top: 30%; width:80px; height: auto;  z-index: 15;}
.i5{ right: 2%; top: 60%; width:70px; height: auto; }

.i6{ left: 3%; top: 60%; width:30px; height: auto; }
.i7{ right: -3%; top: 70%; width:50px; height: auto; }
.i8{ left: 1%; top: 80%; width:60px; height: auto; }

}