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

/* 共通設定 */
html,body{width: 100%; height:100%; margin:0; padding:0; font-family:TBUDGothic R;}
html{font-size:62.5%;}
body{font-size:14px; font-size:1.4rem; color:#fff; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; position:relative; background:#000;}
img{border:none; line-height:0; vertical-align:top; margin:0; max-width:100%; height:auto; width /***/:auto;}
a{color:#404051; text-decoration:underline;}
a:hover{text-decoration:none;}
*, *:before, *:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}


/* トップ */
#top #main{width:100%; overflow:hidden;}

#top #main .mainphoto{height:100vh; position:relative;}
#top #main .mainphoto h1{width:180px; height:250px; position:absolute; left:50%; top:50%; margin:-205px/* 125px+ナビ分80px */ 0 0 -90px; z-index:0;}
#top #main .mainphoto:before{width:100%; height:100%; display:block; content:""; background:url(../images/bg_01.jpg) no-repeat; background-size:100% auto; position:absolute; left:0; top:50%; margin:-30px/* 50px-ナビ分80px */ 0 0 0; z-index:-1;}
#top #main .mainphoto .bt_s{width:34px; height:48px; position:absolute; left:50%; bottom:120px/* 40px+ナビ分80px */; margin-left:-17px; padding-top:39px; text-align:center;}
#top #main .mainphoto .bt_s a{color:#fff; text-decoration:none; font-family: "Helvetica Neue" , Helvetica; font-weight:normal; font-size:1.0rem;}
#top #main .mainphoto .bt_s a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin-left: 0;
  border: 1px solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
  
}
#top #main .mainphoto .bt_s a span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 12px;
  height: 12px;
  margin: -10px 0 0 -6px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  50% {
    -webkit-transform: rotate(-45deg) translate(-2px, 2px);
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  50% {
    transform: rotate(-45deg) translate(-2px, 2px);
  }
  100% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

/* #top #content{width:100%; background:#000; position:relative; z-index:1;} */

#top #main .box h2,#top #main .box02 h2,#top #main .box03 h2{width:200px; height:35px; border:solid 1px #fff; text-align:center; line-height:35px; margin:0 auto; font-size:1.8rem; font-family: "Helvetica Neue" , Helvetica; font-weight:normal; letter-spacing:3px;}
#top #main .box{margin:50px 0 0; position:relative; /* background:url(../images/bg_02.png) no-repeat -220px 55px; background-size:500px 500px; */}
#top #main .box .bg_l{width:500px; height:500px; background:url(../images/bg_02.png) no-repeat 0 0; background-size:500px 500px; position:absolute; top:0; left:-260px/* -220+横移動分40 */;}
#top #main .box .bg_l{
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
transition-duration: 0.8s;
opacity: 0;}
#top #main .box .bg_l.move_l{
-webkit-transform: translate(40px, 0);
-moz-transform: translate(40px, 0);
-o-transform: translate(40px, 0);
-ms-transform: translate(40px, 0);
transform: translate(40px, 0);
opacity: 1;}

#top #main .box .txt{padding-top:50px;}
#top #main .box .txt dl{padding:0 0 10px;}
#top #main .box .txt dl dt{font-size:3.0rem; font-family:TBUDGothic H; text-align:center; margin:0 0 25px;}
#top #main .box .txt dl dd{width:100%; font-size:1.6rem; line-height:1.8; margin:0 auto 45px; padding:0 37px; font-family:Century , FB Miller Display Roman, serif; color:#ccc;}
#top #main .box .txt dl dd:first-of-type{position:relative; font-size:1.4rem; font-family:TBUDGothic R; color:#fff;}
#top #main .box .txt dl dd:first-of-type:after{width:20px; height:1px; display:block; background:#fff; content:""; position:absolute; left:37px; bottom:-22px;}

#top #main .box .development{padding-bottom:75px;}
#top #main .box .development h2{margin-bottom:35px;}

#top #main .box02 .movie{padding-bottom:20px; position:relative; overflow:hidden;}
/* #top #main .box02 .movie:after{width:398px; height:341px; display:block; content:""; background:url(../images/bg_03.png) no-repeat; background-size:398px 341px; position:absolute; top:350px; right:-115px; z-index:-1;} */
#top #main .box02 .movie .bg_r{width:100%; height:341px; display:block; background:url(../images/bg_03.png) no-repeat 0 0; background-size:398px 341px; position:absolute; top:350px; right:-155px !important;}
#top #main .box02 .movie .bg_r{
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
transition-duration: 0.8s;
opacity: 0;}
#top #main .box02 .movie .bg_r.move_r{
-webkit-transform: translate(-40px, 0);
-moz-transform: translate(-40px, 0);
-o-transform: translate(-40px, 0);
-ms-transform: translate(-40px, 0);
transform: translate(-40px, 0);
opacity: 1;}

#top #main .box02 .movie h2{margin-bottom:62px;}
#top #main .box02 .movie .youtube{width:100%; height:253px; margin:0 auto 20px;}
#top #main .box02 .movie p{width:100%; font-size:1.6rem; line-height:1.8; margin:0 auto 45px; padding:0 37px; font-family:Century , FB Miller Display Roman, serif; color:#ccc;}
#top #main .box02 .movie p:first-of-type{position:relative; font-size:1.4rem; font-family:TBUDGothic R; color:#fff;}
#top #main .box02 .movie p:first-of-type:after{width:20px; height:1px; display:block; background:#fff; content:""; position:absolute; left:37px; bottom:-22px;}

#top #main .box02 .instagram h2{margin-bottom:35px;}
#top #main .box02 .instagram .photo{width:100%; margin:0 auto; padding:0 15px; overflow:hidden;}
#top #main .box02 .instagram .bt{width:200px; height:40px; line-height:40px; margin:15px auto 60px;}
#top #main .box02 .instagram .bt a{width:100%; height:100%; display:block; background:#557C9B; color:#fff; position:relative; text-decoration:none; padding-left:45px; font-size:1.4rem; border-radius:5px; font-family: "Helvetica Neue" , Helvetica; font-weight:normal;}
#top #main .box02 .instagram .bt a:after{width:17px; height:17px; display:block; content:""; background:url(../images/ic_i.png) no-repeat; background-size:17px 17px; position:absolute; left:19px; top:10px;}

#top #main .box03 .registration h2{margin-bottom:35px;}
#top #main .box03 .registration .txt p{width:100%; font-size:1.6rem; line-height:1.8; margin:0 auto 45px; padding:0 37px; font-family:Century , FB Miller Display Roman, serif; color:#ccc;}
#top #main .box03 .registration .txt p:first-of-type{position:relative; font-size:1.4rem; font-family:TBUDGothic R; color:#fff;}
#top #main .box03 .registration .txt p:first-of-type:after{width:20px; height:1px; display:block; background:#fff; content:""; position:absolute; left:37px; bottom:-22px;}
#top #main .box03 .registration .form{width:100%; margin:0 auto;}


/* サンクスページ */
#thanks #main h1{width:50px; margin:0 auto; padding:25px 0 30px;}
#thanks #main dl{width:100%; border-top:solid 1px #666; padding:70px 0 0; text-align:center;}
#thanks #main dl dt{font-size:2.0rem; font-family:TBUDGothic H; margin:0 0 45px;}
#thanks #main dl dt span{display:block; padding:10px 0 0; font-size:1.6rem; font-family: "Helvetica Neue" , Helvetica; font-weight:normal;}
#thanks #main dl dd{font-size:1.4rem; line-height:1.6; padding:0 37px; text-align:left;}
#thanks #main dl dd br{display:none;}


/* フッター */
#wrapper footer{width:100%; background:url(../images/bg_04.jpg) repeat; color:#333; margin:120px 0 0;}
#wrapper footer .inner{width:100%; margin:0 auto; padding:25px 0;}
#wrapper footer .inner .f_left{margin:0 0 20px;}
#wrapper footer .inner .f_left p{width:60px; margin:0 auto 15px;}
#wrapper footer .inner .f_left dl dt{font-size:1.6rem; margin:0 0 15px; font-family:TBUDGothic E; text-align:center;}
#wrapper footer .inner .f_left dl dd{font-size:1.2rem; line-height:1.5; text-align:center;}
#wrapper footer .inner .f_right ul{width:190px; list-style:none; margin:0 auto 25px; padding:0 10px 0 0;}
#wrapper footer .inner .f_right ul li{width:50px; float:left; margin-left:10px;}
#wrapper footer .inner .f_right p{font-size:0.9rem; text-align:center;}

/* loopslider */
#loopslider{width:100%; height:142px; margin:0 auto; text-align:left; position:relative; overflow:hidden;}
#loopslider ul{height:142px; list-style:none; float:left; display:inline; overflow:hidden;}
#loopslider ul li{width:210px; height:142px; text-align:center; float:left; display:inline; overflow:hidden;}
#loopslider ul li span{width:100%; padding:0 5px; display:block;}
/* loopslider ClearFixElements */
#loopslider ul:after{height:0; content: "."; clear:both; display:block; visibility:hidden;}
#loopslider ul{display:inline-block; overflow:hidden;}
#loopslider ul li img{box-shadow:0px 0px 2px 0px rgba(0,0,0,0.25);}


/* PC用フェード記述 */
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* 750px以上の幅の場合に適応される */
@media screen and (min-width:750px) {
#top{
    animation: fadeIn 5s ease 0s 1 normal;
    -webkit-animation: fadeIn 5s ease 0s 1 normal;
}


#top #main .mainphoto{width:100%; height:100vh; position:relative; margin:0 auto;}
/* #top #main .mainphoto h1{width:228px; height:315px; left:50%; top:50%; position:absolute; margin:-157px 0 0 -114px;} */
#top #main .mainphoto h1{width:228px; height:315px; left:50%; top:50%; position:fixed; margin:-157px 0 0 -114px;}
#top #main .mainphoto .fade_off {
    opacity: 1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
#top #main .mainphoto .fade_on{opacity:0;}
#top #main .mainphoto .bt_s{display:none;}

#top #main .box h2,#top #main .box02 h2,#top #main .box03 h2{width:250px; height:43px; line-height:43px; font-size:2.1rem; letter-spacing:3px;}

#top #main .box{margin:100px 0 0; padding:0; position:relative; background:none;/* background:url(../images/bg_02.png) no-repeat -435px 0; background-size:1000px 1000px; */ }
#top #main .box .bg_l{width:1000px; height:1000px; background:url(../images/bg_02.png) no-repeat 0 0; background-size:1000px 1000px; position:absolute; top:0; left:-475px/* -435+横移動分40 */;}
#top #main .box .bg_l{
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
transition-duration: 0.8s;
opacity: 0;}
#top #main .box .bg_l.move_l{
-webkit-transform: translate(40px, 0);
-moz-transform: translate(40px, 0);
-o-transform: translate(40px, 0);
-ms-transform: translate(40px, 0);
transform: translate(40px, 0);
opacity: 1;}

#top #main .box .txt dl{padding:50px 0 0;}
#top #main .box .txt dl dt{font-size:4.8rem; margin:0 0 50px;}
#top #main .box .txt dl dd{width:600px; font-size:1.8rem; line-height:1.8; margin:0 auto 70px; padding:0;}
#top #main .box .txt dl dd:first-of-type{font-size:1.6rem;}
#top #main .box .txt dl dd:first-of-type:after{width:20px; height:1px; display:block; background:#fff; content:""; position:absolute; left:0; bottom:-35px;}

#top #main .box .development{padding-bottom:70px;}
#top #main .box .development h2{margin-bottom:55px;}

#top #main .box02 .movie{padding-bottom:20px; position:relative; overflow:visible;}
#top #main .box02 .movie h2{margin-bottom:100px;}
#top #main .box02 .movie .youtube{height:506px; margin:0 auto 85px;}
#top #main .box02 .movie .bg_r{width:100%; height:681px; display:block; background:url(../images/bg_03.png) no-repeat 100% 0; background-size:795px 681px; position:absolute; top:550px; right:-40px !important;}
#top #main .box02 .movie .bg_r{
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
transition-duration: 0.8s;
opacity: 0;}
#top #main .box02 .movie .bg_r.move_r{
-webkit-transform: translate(-40px, 0);
-moz-transform: translate(-40px, 0);
-o-transform: translate(-40px, 0);
-ms-transform: translate(-40px, 0);
transform: translate(-40px, 0);
opacity: 1;}
#top #main .box02 .movie p{width:600px; font-size:1.8rem; line-height:1.8; margin:0 auto 70px; padding:0; font-family:Century;}
#top #main .box02 .movie p:first-of-type{position:relative; font-size:1.6rem; font-family:TBUDGothic R;}
#top #main .box02 .movie p:first-of-type:after{width:20px; height:1px; display:block; background:#fff; content:""; position:absolute; left:0; bottom:-35px;}

#top #main .box02 .instagram h2{margin-bottom:50px;}
#top #main .box02 .instagram .photo{padding:0 20px;}
#top #main .box02 .instagram .bt{width:250px; height:50px; line-height:50px; margin:50px auto 70px;}
#top #main .box02 .instagram .bt a{width:100%; height:100%; display:block; background:#557C9B; color:#fff; position:relative; text-decoration:none; padding-left:70px; font-size:1.5rem; border-radius:5px;}
#top #main .box02 .instagram .bt a:after{width:23px; height:23px; display:block; content:""; background:url(../images/ic_i.png) no-repeat; background-size:23px 23px; position:absolute; left:35px; top:14px;}

#top #main .box03 .registration h2{margin-bottom:50px;}
#top #main .box03 .registration .txt p{width:600px; font-size:1.8rem; line-height:1.8; margin:0 auto 70px; padding:0; font-family:Century;}
#top #main .box03 .registration .txt p:first-of-type{position:relative; font-size:1.6rem; font-family:TBUDGothic R;}
#top #main .box03 .registration .txt p:first-of-type:after{width:20px; height:1px; display:block; background:#fff; content:""; position:absolute; left:0; bottom:-35px;}

#top #main .box03 .registration .form{width:480px; margin:0 auto; padding:0; position:relative; z-index:10;}
form#mailformpro .mailform .re_box{text-align:left !important; padding-left:160px;}


/* サンクスページ */
#thanks #main{padding-bottom:200px;}
#thanks #main h1{width:90px; margin:0 auto; padding:50px 0 60px;}
#thanks #main dl{width:100%; border-top:solid 1px #666; padding:70px 0 100px; text-align:center;}
#thanks #main dl dt{font-size:2.7rem; font-family:TBUDGothic H; margin:0 0 45px;}
#thanks #main dl dt span{display:block; padding:10px 0 0; font-size:1.8rem; font-family: "Helvetica Neue" , Helvetica; font-weight:normal;}
#thanks #main dl dd{font-size:1.6rem; line-height:1.6; text-align:center;}
#thanks #main dl dd br{display:block;}
#thanks #wrapper{width:100%; height:auto !important; height:100%; min-height:100%; position:relative;}


#wrapper footer .inner{width:100%; margin:0 auto; padding:50px 35px 50px 50px;}
#wrapper footer .inner .f_left{float:left; margin:0;}
#wrapper footer .inner .f_left p,#wrapper footer .inner .f_left dl{display:table-cell; vertical-align:middle;}
#wrapper footer .inner .f_left p{width:112px; margin:0; padding-right:30px;}
#wrapper footer .inner .f_left dl dt{text-align:left;}
#wrapper footer .inner .f_left dl dd{text-align:left;}
#wrapper footer .inner .f_right{float:right;}
#wrapper footer .inner .f_right ul{width:180px; list-style:none; float:right; margin:0; padding:8px 0 25px;}
#wrapper footer .inner .f_right ul li{width:50px; float:left; margin-left:10px;}
#wrapper footer .inner .f_right p{clear:both; font-size:1.0rem; text-align:right;}
#thanks #wrapper footer{position:absolute; bottom:0;}

#loopslider{width:100%; height:283px;}
#loopslider ul{height:283px;}
#loopslider ul li{width:420px; height:283px;}
#loopslider ul li span{width:100%; padding:0 10px;}


}

/* 1200px以上の幅の場合に適応される */
@media screen and (min-width:1200px) {
#top #main .mainphoto:before{width:1000px; height:813px; display:block; content:""; background:url(../images/bg_01.jpg) no-repeat; position:absolute; left:50%; top:50%; margin:-40px 0 0 -500px; z-index:-1;}
#top #main .box .txt{width:1200px; margin:0 auto; padding:0;}
#top #main .box02 .movie .youtube{width:900px; height:506px; margin:0 auto 85px;}
/* #top #main .box02 .movie:after{width:795px; height:681px; display:block; content:""; background:url(../images/bg_03.png) no-repeat; background-size:795px 681px; position:absolute; top:550px; right:-20px !important; z-index:-1;}
#top #main .box02 .movie:after{top:600px; right:0; z-index:-1; -webkit-transition: all 0.8s; opacity: 0;}
#top #main .box02 .move:after{-webkit-transform: translate(-20px, 0); opacity: 1;} */
}



/* 320pxまでの幅の場合に適応される */
@media screen and (max-width:320px) {
#top #main .box .txt dl dt{font-size:2.6rem;}
}