@charset "utf-8";
a:hover{ text-decoration: none;}
.common0, 
.common1, 
.common2{ background: #fff; z-index: 1000000000000000000000000000000;}


.btnD {
  display: inline-block;
  position: relative;
  text-decoration: none;
    -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; 
}

.btnD:before {  
  content: " ";
  position: absolute;
  bottom: -12px;
  left: -1px;
  width: 0;
  height: 0;
  border-width: 0 12px 12px 0px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FFF;
}

.btnD:after {  
  content: " ";
  position: absolute;
  top: -1px;
  right: -12px;
  width: 0;
  height: 0;
  border-width: 0px 12px 12px 0px;
  border-style: solid;
  border-color: #FFF;
  border-bottom-color: transparent;
}



/*-------------------------
 MV
---------------------------*/
.page{ width: 100%; float: left; position: relative; }
.pageMin{ margin:0 auto; overflow:hidden\9; *overflow:hidden;}
@media screen and (min-width: 1201px) {.pageMin { max-width:1200px;}}
@media screen and (max-width: 1200px) {.pageMin { max-width: auto; width:100%; float:left;}}






/*-------------------------
 #komu1
---------------------------*/
#komu1{ width: 40%; height: 100%; position:fixed; background: #eee; left: 0; overflow: hidden; z-index: -1;}

#komu1.down{width: 40%;}
.tab-btn2 #komu1{ z-index: 100000000;}

#komu1 .titleArea{}
#komu1 .titleArea > dl{ width: 100%; position: absolute; left:0%; top: 20%;  z-index: 1000000;}
#komu1 .titleArea > dl * { color: #fff;}

#komu1 .titleArea > dl > *{ width: 100%; float: left; text-align: center;}
#komu1 .titleArea > dl dt{ }
#komu1 .titleArea > dl dt > span{font-size: 20px; display: block; margin-bottom: 24px;}
#komu1 .titleArea > dl dt b{ font-size: 60px;}
#komu1 .titleArea > dl dt b .en1{ font-size: 140px; vertical-align: baseline; line-height: 1.4em;}
#komu1 .titleArea > dl dt b .en2{ font-size: 80px; vertical-align: baseline;}

#komu1 .titleArea > dl dd{ margin-top: 10px;}
#komu1 .titleArea > dl dd.title2{}


#komu1 .mvVideo { width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center;}

#komu1 .mvVideo div{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:url(../../img/img/mv.jpg) 50% 50% no-repeat; background-size:cover;}


@media screen and (max-width: 1100px) {
#komu1 .titleArea > dl dt b{ font-size: 6vw;}

}

















/*-----------*/

#komu1 .tab-btn{ width:300px; position: absolute; left: 50%; top: 25%; margin-top: 330px; margin-left: -150px; z-index: 100;}
#komu1 .tab-btn li{ width: 100%; float: left; text-align: center; color: #000; background: #fff; line-height: 40px; border-radius: 8px; cursor: pointer;}
#komu1 .tab-btn li:hover{background: #ccc;}



@media screen and (max-width: 780px) {
#komu1 .titleArea > dl{ top:10%; }

#komu1{ width: 100%; height: 74vh;}
.tab-btn2 #komu1{height: 100vh;}

#komu1 .titleArea > dl dt > span{font-size: 4.0vw;}
#komu1 .titleArea > dl dt b{ font-size: 12.0vw;}
#komu1 .titleArea > dl dt b .en1{ font-size: 28.0vw; letter-spacing: 0;font-weight: bold; line-height: 1.2em;}
#komu1 .titleArea > dl dt b .en2{ font-size: 16.0vw; letter-spacing: 0; font-weight: bold; line-height: 1.2em;}

#komu1 .tab-btn{ top: auto; margin-top: 0; bottom: 5%;}

}
@media screen and (max-width: 600px) {
#komu1 .titleArea > dl dt b .en1{ font-size:28.0vw;}
#komu1 .tab-btn{ bottom: 10%;}
}

@media screen and (max-width: 500px) {
#komu1 .tab-btn{ bottom: 18%;}
}








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

#komu1 .box{ width: 100%; height:100%; left: 0; top: 0; position: absolute; z-index: 50000000000; background: rgba(0,0,0,0.7);}
#komu1 .box dl{ width: 90%; float: left; margin: 5%; padding: 2%; max-height: 65%; overflow-x: auto; z-index: 500000000001;}
#komu1 .box dl > *{ width: 94%; float: left; margin-left: 6%; color: #fff; position: relative; font-size: 18px;}
#komu1 .box dl > * > span{ position: absolute; left: -1.2em; top: 0; color: #fff; font-size: 20px;}
#komu1 .box dl dt{ font-weight: bold; border-bottom: dotted 1px #aaa; padding-bottom: 5px; margin-bottom: 5px;}
#komu1 .box dl dd{ margin-bottom: 35px;}




#komu1 .main7Overray{ display: none; z-index: 5000000000;}
body.tab-btn2 #komu1 .main7Overray{ display: block; width:80%; height: 50px; position: absolute; left: 10%; bottom: 15%; background: #fec400; border-radius: 40px;}

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


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

}













/*-------------------------
 #komu1
---------------------------*/
#tkg{ width: 60%; float: right;}
#tkg ul{ width: 100%; float: left;}
#tkg ul li { width:100%; padding:0px; float: left; overflow: hidden;  position: relative; cursor: pointer;}



#tkg ul li p, 
#tkg ul li p > span, 
#tkg ul li .back, 
#tkg ul li p > span .more{ -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;}

#tkg ul li p{ width: 100%; float: left; padding: 150px 25% 150px 4%; color: #fff; position: relative; z-index: 2;}
#tkg ul li p b{ display: block; font-size: 32px; color: #000; line-height: 1.2em;}
#tkg ul li p b > span{ display: block; font-size:22px; color: #000; padding-top: 10px;}

#tkg ul li p > span{ opacity:0; width: 60%; margin: 15px 0 0; display: block; text-align: center;}
#tkg ul li:hover p > span{ width: 70%;}
#tkg ul li p > span .more{ display: block; font-size: 16px; background: #222; border-radius: 20px; color: #222; text-align: center; margin-top: 5px;}

#tkg ul li:hover p{ bottom: 10%;}
#tkg ul li:hover p > span{ opacity: 1;}
#tkg ul li:hover p > span .more{ background: #eee;}
#tkg ul li:hover #tkg ul li p > span .more{ color: #000;}

#tkg ul li .back{ width: 100%; height:0%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.6);  display: block; z-index: 1;}

#tkg ul li:hover .back{ height:100%;}
#tkg ul li:hover *{ color: #fff;}

#tkg ul li img{ display: none;}





/*
#tkg ul li.bk1{ background: #9a9921;}
#tkg ul li.bk2{ background: #c04b4b;}
#tkg ul li.bk3{ background: #ae674e;}
#tkg ul li.bk4{ background: #e5bf4a;}
#tkg ul li.bk5{ background: #701111;}
#tkg ul li.bk6{ background: #ffc786;}
#tkg ul li.bk7{ background: #ee8d7d;}


*/
#tkg ul li.bk1{ background:url(../../img/img/1.png) 160% 50% no-repeat #fff;}
#tkg ul li.bk2{  background:url(../../img/img/2.png) 160% 50% no-repeat #dfdfdf;}
#tkg ul li.bk3{  background:url(../../img/img/3.png) 160% 50% no-repeat #fff;}
#tkg ul li.bk4{  background:url(../../img/img/4.png) 160% 50% no-repeat #dfdfdf;}
#tkg ul li.bk5{  background:url(../../img/img/5.png) 160% 50% no-repeat #fff;}
#tkg ul li.bk6{  background:url(../../img/img/6.png) 160% 50% no-repeat #dfdfdf;}
#tkg ul li.bk7{  background:url(../../img/img/7.png) 160% 50% no-repeat #fff;}
#tkg ul li.bk8{  background:url(../../img/img/8.png) 160% 50% no-repeat #dfdfdf;}
#tkg ul li.bk9{  background:url(../../img/img/9.png) 160% 50% no-repeat #fff;}
#tkg ul li.bk10{  background:url(../../img/img/10.png) 160% 50% no-repeat #dfdfdf;}
#tkg ul li.bk11{  background:url(../../img/img/11.png) 160% 50% no-repeat #fff;}
#tkg ul li.bk12{  background:url(../../img/img/12.png) 160% 50% no-repeat #dfdfdf;}
#tkg ul li.bk13{  background:url(../../img/img/13.png) 160% 50% no-repeat #fff;}
#tkg ul li.bk14{  background:url(../../img/img/14.png) 160% 50% no-repeat #dfdfdf;}
#tkg ul li.bk15{  background:url(../../img/img/15.png) 160% 50% no-repeat #fff;}


#tkg ul li.bk1, 
#tkg ul li.bk2, 
#tkg ul li.bk3, 
#tkg ul li.bk4, 
#tkg ul li.bk5, 
#tkg ul li.bk6, 
#tkg ul li.bk7, 
#tkg ul li.bk8, 
#tkg ul li.bk9, 
#tkg ul li.bk10, 
#tkg ul li.bk11, 
#tkg ul li.bk12, 
#tkg ul li.bk13, 
#tkg ul li.bk14, 
#tkg ul li.bk15{ background-size:80% auto; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;}

#tkg ul li:hover.bk1, 
#tkg ul li:hover.bk2, 
#tkg ul li:hover.bk3, 
#tkg ul li:hover.bk4, 
#tkg ul li:hover.bk5, 
#tkg ul li:hover.bk6, 
#tkg ul li:hover.bk7, 
#tkg ul li:hover:hover.bk8, 
#tkg ul li:hover.bk9, 
#tkg ul li:hover.bk10, 
#tkg ul li:hover.bk11, 
#tkg ul li:hover.bk12, 
#tkg ul li:hover.bk13, 
#tkg ul li:hover.bk14, 
#tkg ul li:hover.bk15{ background-size:60% auto; background-position: 120% 50%;}





@media screen and (max-width: 780px) {
#tkg{ width: 100%; float: right; margin-top:74vh;}
#tkg ul{ background: #efefef; padding-bottom: 30px; box-shadow: 0 -4px 20px #ccc inset; padding-top: 20px;}
#tkg ul li{ width: 90%; margin: 20px 5%; box-shadow: 0 8px 20px #aaa;}

#tkg ul li p{ padding: 0 2% 20px; text-align: center; color: #000;}
#tkg ul li p b{ font-size: 5vw;}
#tkg ul li p > span, 
#tkg ul li p b br { display: none;}
#tkg ul li img{ display:block; width: 80%; height: auto; margin: 20px 10% 0;}
    


#tkg ul li.bk1, 
#tkg ul li.bk3, 
#tkg ul li.bk5, 
#tkg ul li.bk7, 
#tkg ul li.bk9, 
#tkg ul li.bk11, 
#tkg ul li.bk13{ background:none no-repeat #fff;} 
#tkg ul li.bk2, 
#tkg ul li.bk4, 
#tkg ul li.bk6, 
#tkg ul li.bk8, 
#tkg ul li.bk10, 
#tkg ul li.bk12{ background:none no-repeat #fff;}


#tkg ul li p b > span{ font-size: 4vw;}
#tkg ul li.bk1 *, 
#tkg ul li.bk2 *, 
#tkg ul li.bk3 *, 
#tkg ul li.bk4 *, 
#tkg ul li.bk5 *, 
#tkg ul li.bk6 *, 
#tkg ul li.bk7 *, 
#tkg ul li.bk8 *, 
#tkg ul li.bk9 *, 
#tkg ul li.bk10 *, 
#tkg ul li.bk11 *, 
#tkg ul li.bk12 *, 
#tkg ul li.bk13 *, 
#tkg ul li.bk14 *, 
#tkg ul li.bk15 * { color: #000;}
#tkg ul li p > span, 
#tkg ul li:hover p > span{ width: 100%;}

}









/*

#tkg ul li.bk1{ background: #ad3e3e;}
#tkg ul li.bk2{ background: #e35e01;}
#tkg ul li.bk3{ background: #ffac00;}
#tkg ul li.bk4{ background: #5abaae;}
#tkg ul li.bk5{ background: #ff9000;}
#tkg ul li.bk6{ background: #968b7c;
*/

/*------------------------------------------------------------*/
#tkg .box{ display: none;}
#tkg .box.view{ display:block;}

#tkg .box{ display:none; z-index: 1200; width: 700px; position: fixed; left: 50%; margin-left: -340px; top: 10%; background: #fff; border: solid 4px #f3f200; padding: 40px;}
F
#tkg .box .gif{ text-align: center;}
#tkg .box .gif img{ width: 100%; height: auto; max-width: 550px;}







#tkg .box .iframe {
  position: relative;
  width: 100%;
}




.inf{}














#tkg .box > *{ width: 100%; float: left;}
#tkg .box .video{ display: block;}
#tkg .box .video video{ width: 100%; height: auto;}
#tkg .box p{ margin-bottom: 10px; font-size: 20px;}
#tkg .box p b{ display: block; font-size: 30px; padding-bottom: 5px;}


#tkg .main7Overray{ display: none; z-index: 1000;}
body.tab-btn #tkg .main7Overray{ display: block; width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; opacity: 0.7;}

@media screen and (max-width: 800px) {
#tkg .box{ width: 86%; left: 7%; margin-left:0px; padding:20px;}
}


@media screen and (min-width:721px) {
#tkg .main7Overray::before{ content: "×とじる"; color: #fff; position: absolute; right:50%; top:50px; width: 680px; margin-right: -340px; text-align: right; font-size: 26px; cursor: pointer;}
}

@media screen and (max-width:720px) {
#tkg .main7Overray::before{ content: "×とじる"; color: #fff; position: absolute; right:5%; top:5px; font-size: 20px;}
}

@media screen and (max-width:600px) {
#tkg .box p b{ font-size: 22px; padding-bottom: 5px;}
#tkg .box p{ font-size: 16px;}
#tkg .main7Overray::before{right:20px; top:20px;}

}



/*-------------------------
 #komu1
---------------------------*/
#sps { padding: 80px 5%; background: #eee;}
#sps .cf{}
#sps .mainStit, 
#sps .mainStit2{ width: 100%; float: left; padding: 10px 20px;  font-weight: bold; margin-bottom: 10px; border-radius: 40px;}

#sps .mainStit{ background:#e9cf3c;}
#sps .mainStit2{ margin-top: 100px; background: #ccc;}
#sps .mainStxt{}


#sps .mainStxt{ margin: 10px 0;}
#sps .mainStxt a{ background: #fff; margin: 15px 0; display: block; float: left; text-decoration: none; border-radius: 4px; padding: 20px 3%;}
#sps .mainStxt a.g{ border: solid 1px #e9cf3c; box-shadow: 0 3px 6px #e9cf3c;}
#sps .mainStxt a.s{ border: solid 1px #ccc; box-shadow: 0 3px 6px #ccc;}

#sps .mainStxt a:hover{ box-shadow: 0 0 0 4px #444; border: solid 1px #444;}

#sps .mainStxt a .image{ display: inline-block; width: 18%; float: left; border-radius: 100%; border: solid 1px #bbb; overflow: hidden;}
#sps .mainStxt a .image img{ width: 100%; height: auto;}
#sps .mainStxt a .txt{ display: inline-block; width: 76%; float: right;}
#sps .mainStxt a .txt b{ display: block; font-size: 16px;}
#sps .mainStxt a .txt span{ display: block; margin-bottom: 8px;}
#sps .mainStxt dd a:hover .txt span{ text-decoration: underline;}


@media screen and (max-width: 800px) {
#sps { padding: 40px 5%;}
#sps .mainStit2{ margin-top: 30px;}
#sps .mainStxt dd a{ padding: 10px 2%;}

#sps .mainStxt a .txt{  font-size: 11px; line-height: 1.4em;}
#sps .mainStxt a .txt b{ font-size: 14px;}
#sps .mainStxt a .txt span{ margin-bottom: 4px;}

}

















/*-------------------------
 #komu1
---------------------------*/
#endPage { padding: 80px 0 100px; position: relative; background: #000;}
#endPage .cf{ position: relative; z-index: 100;}
#endPage .cf p{width: 100%; float:left; font-size: 50px; text-align: center; border-bottom: 1px solid #fff; padding-bottom: 20px; margin-bottom: 20px; font-weight: bold;}
#endPage .cf p b{ font-size: 16px; display: block; line-height: 1.2em;}

#endPage .cf ul { width: 80%; float: left; margin-left: 20%; margin-bottom: 80px;}
#endPage .cf ul li{ width: 50%; float: left; margin-bottom: 20px; font-size: 20px;}
#endPage .cf *{ color: #fff;}
#endPage .cf ul li, 
#endPage .cf ul li *{ vertical-align: text-bottom; line-height: 20px;}

#endPage .cf ul li.cont{ font-size: 14px;}

#endPage .bottomVideo{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}

#endPage .bottomVideo img{ width: 120%; height: auto; margin: 0 auto; z-index: -10;}
#endPage .bottomVideo div{ z-index: 1; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; opacity: 0.5; display: block;}



@media screen and (max-width: 1100px) {
#endPage .cf p, 
#endPage .cf ul{ width: 80%; margin: auto 10% 30px;}
}

@media screen and (max-width: 900px) {
#endPage .cf ul li{ width: 100%; padding: 0 0 0 20%; margin-bottom: 10px;}
#endPage .bottomVideo .video{ width: auto; height: 100%;}
}
@media screen and (max-width: 500px) {
#endPage { padding: 40px 0 100px;}
#endPage .cf ul li{padding: 0 0 0 10%; }
}













.snsBtn{ position: fixed; right: 20px; bottom: 20px; z-index: 10000; border-radius: 8px; border-bottom: solid 8px #0a70af; background:#0a70af;}
.snsBtn:hover{border-bottom: solid 0px #0a70af; margin-top: 8px;}
.snsBtn img{ width: 100px; height: auto; border-radius: 8px; overflow: hidden;}


@media screen and (max-width: 500px) {
.snsBtn{ right: 10px; bottom: 10px;}
.snsBtn img{ width: 70px; }

}