@charset "utf-8";

body{
  font-family: "'Shippori Mincho B1', serif;","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "HG明朝E", "MSP明朝","MS PMincho","MS 明朝",serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  color: #000;
  height: auto;
  box-sizing: border-box;
  background: url("../img/bg.jpg") no-repeat center;
  background-attachment: fixed;
  background-size: cover;
}
img{
    width: 100%;
    height: auto;
}

@keyframes gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
@-webkit-keyframes fadeIn{
    0% {opacity: 1}
    100% {opacity: 0}
}

/* /\_/gimic\_/\ */
.fadeIn{
  transition: .5s;
  -webkit-transition: .5s;
  transform: translateY(30px);
  -webkit-transform: translateY(30px);
  opacity: 0;
}
.fadeIn.scrollIn{
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
  opacity: 1;
}

#wrapper{
    line-height: 0;
    height: 100%;
    background-color: rgba(245,245,245,0.7);
}
#main{
    padding-top: 30px;
}
#main .item{
    opacity: 1;
}
#main h1{
    position: relative;
    overflow: hidden;
    padding-top: 123.5%;
    margin: 0 30px;
}
#main h1 img{
    max-width: 500px;
    padding-top: 30px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: slideAnime 24s ease infinite;
}
#main h1 img:nth-of-type(1) { animation-delay: 0s }
#main h1 img:nth-of-type(2) { animation-delay: 6s }
#main h1 img:nth-of-type(3) { animation-delay: 12s }
#main h1 img:nth-of-type(4) { animation-delay: 18s }

@keyframes slideAnime{
   0% { opacity: 0 }
   12% { opacity: 1 }
  13% { opacity: 1 }
  25% { opacity: 0 }
 100% { opacity: 0 }
}

#main .jkt{
    padding: 30px;
}
#main .gaiyo{
    width: 80%;
    margin: 0 auto;
    padding: 30px 20px;
}
#main ul.title{
    margin-top: -10px;
}

#main .title .text{
    opacity: 0;
    animation: text 3s ease forwards;
}
@keyframes text{
    100%{opacity: 1;}
}

.inner{
    max-width: 500px;
    overflow: hidden;
    margin: 0 auto;
}
#main .title .text01{
    animation-delay: 1s;
    -webkit-animation-duration: 1s;
}
#main .title .text01 img{
    width: 56%;
}
#main .title .text02{
    animation-delay: 2s;
    -webkit-animation-duration: 2s;
}
#main .title .text02 img{
    width: 21.6%;
}
#main .title .text03{
    animation-delay: 3s;
    -webkit-animation-duration: 3s;
}
#main .title .text03 img{
    width: 44.4%;
}
#main .title .text04{
    animation-delay: 4s;
    -webkit-animation-duration: 4s;
}
#main .title .text04 img{
    width: 88.6%;
}
#main .title .text05{
    position: relative;
    animation-delay: 5s;
    -webkit-animation-duration: 5s;
}
#main .title .text05 img{
    width: 24.5%;
    position: absolute;
    bottom: 10.5%;
    left: 66%;
}
#main .title .text06{
    animation-delay: 6s;
    -webkit-animation-duration: 6s;
}
#main .title .text06 img{
    width: 88.6%;
}
#main .title img{
    padding: 10px 0;
}

#main .btn a{
    padding-top: 25px;
}
#main .btn img{
    width: 89%;
}

@keyframes popup_image{
    0% {opacity: 0}
    100% {opacity: 1}
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + #popup{
  display: block;
  transition: .2s;
}

/*main2*/
#main2{
    padding-bottom: 30px;
}
#main2 .jkt{
    padding: 30px;
}
#main2 .gaiyo{
    width: 80%;
    padding: 0 30px 20px;
    margin: 0 auto;
}
#main2 .gaiyo img{
    width: 88.6%;
    padding: 0 0 10px;
}

/* footer */

footer{
  text-align: center;
  font-size: 12px;
  background: #000000;
  color: #FFFFFF;
}
footer a{
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
}
footer .footerlink{
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 100px;
}
footer .btn-top{
  position: absolute;
  right: 50px;
  bottom: 0;
  width: 50px;
  height: 50px;
}

footer p{
  padding: 30px 0;
  font-weight: bold;
}

footer ul.sns{
  text-align: center;
  padding: 30px 0;
}
footer ul.sns li{
  display: inline-block;
  padding: 0 10px;
}
footer ul.sns li a{
  display: block;
  width: 25px;
  height: 25px;
  text-indent: -999px;
  overflow: hidden;
}
footer ul.sns li.tw a{
  background: url(../img/icon_tw.png) no-repeat center center;
  background-size: 100%;
}
footer ul.sns li.yt a{
  background: url(../img/icon_youtube.png) no-repeat center center;
  background-size: 100%;
}
footer ul.sns li.fb a{
  background: url(../img/icon_fb.png) no-repeat center center;
  background-size: 100%;
}
footer ul.sns li.line a{
  background: url(../img/icon_line.png) no-repeat center center;
  background-size: 100%;
}

@media (max-width: 980px){
}

@media (max-width: 768px){
}

@media (max-width: 640px){
}

@media (max-width: 480px){
    #wrapper{
    }
}

@media (max-width: 375px){
    #main h1{
        margin-left: 14px;
        margin-right: 14px;
        padding-top: 127.5%;
    }
    #main h1 img{
        padding-top: 14px;
    }
    #main .title img{
    }
    #main .gaiyo{
        padding-top: 14px;
    }
    #main2 .jkt{
        padding: 14px;
    }
    #main2 .gaiyo img{
        padding-bottom: 10px;
    }
    #main2 .gaiyo{
        padding-left: 10px;
        padding-right: 10px;
    }
    #main3{
        padding-bottom: 14px;
    }
}

@media (max-width: 330px){
    
}