@charset "UTF-8";
*{box-sizing: border-box;}
body,h1,h2,h3,ul,li,p{margin: 0;padding: 0;}
body{background-color: #262626;font-family: Helvetica Neue,Arial,Verdana,sans-serif;margin: 0 auto;}
img{vertical-align: bottom;}
h2{margin: 24px 2px 0;padding: 0 8px;font-family: 'Montserrat Subrayada';font-size: 52px;color: #c2c2c2;letter-spacing: -2px;}
ul{list-style: none;}
a{color: #fff;text-decoration: none;transition: color .3s;}
a:hover{color: #fdff7d;}
.anchor{padding-top: 10px;margin-top: -10px;}
/*header*/
header{margin: 8px;display: flex;}
header h1{margin:0 auto 0 0;}
/*nav*/
.navSp{display: none !important;}
ul.navPc{margin-top: 15px;display: flex;flex-wrap: wrap;}
.navPc li a{margin: 0 5px;padding: 5px;font-size: 15px;border: dotted 1px #fff;line-height: 2.6em;}
/*barLink*/
.barLink{background: linear-gradient(135deg,#feffcf,#fdff7f,#ff52a7,#2200d1,#b100dd,#ff52a7,#fdff7f);}
.barLink ul{width: 820px;margin: 0 auto;padding: 0;display: flex;justify-content: space-between;text-align: center;}
.barLink li a{font-family: 'Anton';font-size: 24px;color: #fff;text-decoration: none;transition: color .3s;}
.evening a:hover{color: #fadcff;}
.midnight a:hover{color: #edff24;}
.dawn a:hover{color: #ffdee2;}
/*main image*/
video{width: 100%;}
.pc {display: block !important;}
.sp {display: none !important;}
.mainBox{width: 1200px;margin: 0 auto;}
.innerBox{width: 1000px;margin: 0 auto;}
.innerBox h2{padding: 20px 0 0;}
.sliderBox{margin-bottom: 35px;position: relative;}
.seeMore{margin: 3px;font-family: 'Anton';font-size: 22px;position:absolute;top: 156px;right: 0;z-index: 100;}
/*info*/
.infoBox{width: 1200px;margin: 95px auto 125px;display: flex;}
.infoBox dl{height: 300px;padding-left: 10px;overflow: scroll;}
.dBox{display: flex;flex-wrap: wrap;}
.infoBox dt{width: 90px;margin: 3px 0 10px;font-size: 14px;color: #fff;}
.infoBox dd {margin: 10px 0 5px;font-size: 18px;color: #fff;display: block;}
.infoBox dd a:hover{color: #fdff7d;}
.jpLink{width: 360px;margin-left: 10px;}
.enLink{width: 90px;margin-top: -2px;padding: 4px 0 3px 3.5px;font-size: 11px;border: dotted 1px #fff;}
.topics{width: 590px;height: 410px;margin-right: 35px;overflow-y: hidden;}
.recommend{width: 590px;height: 410px;overflow-y: hidden;}
.infoSmall{margin-top: 1px;font-size: 16px;}
/*scrollbar*/
::-webkit-scrollbar{width: 3px;height: 0;}
::-webkit-scrollbar-track{background: #fff;border: none;}
::-webkit-scrollbar-thumb{background: #c2c2c2;box-shadow: none;}
/*see more nights*/
.smn img{margin: 0 0 120px 230px;}
.smn area:hover{outline: solid 1px #fdff7d;}
.comingSoon{width: 250px;margin: 250px auto 250px;font-size: 35px;color: #fff;}
/*B*/
.MBB{width: 1000px;height: 563px;margin: 120px auto;}
.BGI20BLD{background-image: url(../img/bitbybit/B_IMG_4130L.jpg);}
.MBB .lightBB ul{width: 550px;margin: 232px 63px 0 0;display: flex;float: right;list-style: none;}
.MBB .lightBB li img{width: 80px;margin: 10px 8px;}
/*and more*/
.andMore{width: 1000px;margin: 25px auto 250px;text-align: center;}
.andMore a img{width: 680px;margin: 30px auto 60px;padding: 0;}
/*video*/
.movieBox{width: 960px;margin: 0 auto;display: flex;flex-wrap: wrap;}
.movieBox video{width: 420px;height: 100%;margin: 35px auto;}
/*footer*/
.pageTop{position: fixed;bottom: 42px;right: 25px;opacity: 0.5;}
footer{margin-top: 240px;padding: 7px 0;text-align: center;font-size:16px;color: #c2c2c2;border-top: 1px dotted #c2c2c2;}
.contact a{margin-left: 10px;padding: 2px 5px;font-size: 15px;color: #c2c2c2;border: dotted 1px;}
.contact a:hover{color: #fdff7d;}
/*lightbox*/
.lightB ul{width: 1180px;margin: 0 auto;display: flex;}
.lightB li img{width: 160px;border: solid 1px #fff;}
.lightB li a{transition: .5s ease;}
.lightB li a:hover{opacity: 0.5;}
.lightBfw ul{width: 1000px;margin: 0 auto;flex-wrap: wrap;}
.lightBfw li img{width: 160px;margin: 2px;}

/*responsive----------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1200px){
.wrapper{overflow: hidden;max-width: 100%;}
h2{margin: 24px 10px 0;padding: 24px 0 0;font-size: 34px;letter-spacing: -1px;z-index: 100;}
.anchor{padding-top: 100px;margin-top: -100px;}
/*header*/
header{width: 100%;height: 50px;margin: 0;display: flex;flex-wrap: wrap;justify-content: flex-end;align-items: center;position: fixed;top: 0;left: 0;z-index: 500;background: rgba(26,26,26,0.8);border-bottom: 1px dotted #fff;}
header h1{position: fixed;top: 5px;left: 5px;}
header img{max-width: 100%;height: 40px;}
/*nav*/
nav{width: 100%;display: none;}
.navPc{display: none !important;}
.navSp{display: flex !important;width: 100%;padding: 10px 0;flex-wrap: wrap;z-index: 300;background: rgba(26,26,26,0.8);border-bottom: 1px dotted #fff;}
.navSp li{width: 32%;margin: 0 auto;}
.navSp li a{width: 97%;margin: 2px auto;padding: 0;font-size: 10.5px;display: block;text-align: center;border: dotted 1px #fff;line-height: 1.6em;letter-spacing: -0.3px;}
/*topimg*/
.pc {display: none !important;}
.sp {display: inline-block !important;}
#viewer {margin: 0 auto;width: 100%;height: 180px;position: relative;z-index: -1;}/*height 481-560*/
#viewer img {width: 100%;top: 0;left: 0;position: absolute;}
/*main*/
main{width: 100%;margin: 0 auto;flex-direction: column;}
.barLink ul{max-width: 480px;width: 92%;margin: 50px auto 0;padding: 0;display: flex;justify-content: space-between;text-align: center;}
.barLink li a{font-size: 22px;}
.mainBox{width: 100%;margin: 0 auto;}
.sliderBox{margin-bottom: 15px;position: relative;}
.slick-list{padding: 0 70px;}
.slick-dots li{width: 12px;}
.lightB{margin-bottom: 38px;}
.lightB ul{width: 100%;margin: 0 auto;display: flex;}
.lightB li{margin-right: 1px;margin-left: 1px;}
.lightB li img{width: 100%;border: solid 1px #fff;}
.seeMore{margin: 2px 3px 7px;font-size: 18px;position: relative; top: 0;float: right;}
.innerBox{max-width: 520px;width: 100%;margin: 0 auto;}
.innerBox h2{margin: 10px 0 0;padding: 10px 5px 0;}
.innerBox ul{width: 93%;margin: 0 auto;padding: 0;}
.innerBox ul li{width: 31.9%;margin: 0 2px;}
/*info*/
.infoBox{width: 96%;margin: 0 auto;padding: 0;flex-wrap: wrap;}
.infoBox h2{margin-left: 5px;}
.infoBox dl{height: 320px;margin-top: 0;padding: 0 0 5px 5px;}
.infoBox dt{width: 100%;margin: 5px 0 0;font-size: 12px;}
.infoBox br{display: none;}
.infoBox dd {margin: 5px 0 10px;font-size: 16px;}
.jpLink{width: 100%;margin: 0 5px;}
.enLink{width: 100%;margin-top: -2px;padding: 4px 3px 3.5px;font-size: 10px;display: block;float: right;}
.topics{height: 400px;margin: 0 auto;overflow-y: hidden;}
.recommend{height: 400px;margin: 0 auto;overflow-y: hidden;}
.infoSmall{margin-bottom: -9px;font-size: 14px;}
/*see more nights*/
.smn{width: 100%;display: flex;overflow: scroll;}
.swipe{width: 50px;height: 100px;margin: 5px 0 0 15px;padding: 0;font-family: 'Anton';font-size: 32px;color: #fff;letter-spacing: 1px;}
.swipe i{font-size: 50px;}
.smn img{margin: 10px auto;padding-right: 10px;}
.prefecture{padding-top: 35px;margin-top: -35px;}
/*B*/
.MBB{width: 480px;}
.MBB .lightBB ul{width: 100%;margin: 10px 6px 0 0;display: inline;text-align: right;}
.MBB .lightBB li{width: 100%;margin: 0;}
.MBB .lightBB li img{width: 60px;margin: 6px 10px 3px;}
/*and more*/
.andMore{width: 100%;margin: 25px auto 50px;}
.andMore a img{width: 90%;max-width: 680px;}
/*video*/
.movieBox{width: 100%;margin: 0 auto;display: flex;flex-wrap: wrap;}
.movieBox video{width: 320px;height: 100%;margin: 28px auto;}
/*footer*/
footer{margin-top: 160px;padding: 5px 0;font-size:12px;}
.contact a{margin-left: 5px;padding: 1px 5px;font-size: 12px;}
/*menuTrigger*/
.menuTrigger {margin: 8px 12px;display: inline-block;position: relative;width: 8px;height: 34px;vertical-align: top;cursor: pointer;}
.menuTrigger span {display: inline-block;position: absolute;left: 0;width: 100%;height: 8px;background: linear-gradient(to bottom,#fadcff 30%,#ffdee2);transition: all .5s .2s;}
.menuTrigger.active span {background: #edff24;}
.menuTrigger span:nth-of-type(1) {top: 0;}
.menuTrigger.active span:nth-of-type(1) {transform: translateY(13px) rotate(-45deg);}
.menuTrigger span:nth-of-type(2) {top: 13px;}
.menuTrigger.active span:nth-of-type(2) {opacity: 0;}
.menuTrigger span:nth-of-type(3) {bottom: 0;}
.menuTrigger.active span:nth-of-type(3) {transform: translateY(-13px) rotate(45deg);}}
/*different height,list-padding----------------------------------------------------------------------------------------------*/
@media screen and (min-width: 320px) and (max-width: 375px){#viewer {height: 105px;}.slick-list{padding: 0 50px;}
.MBB{width: 320px;}
.MBB .lightBB ul{width: 100%;margin: 5px 0 0 0;display: inline;text-align: right;}
.MBB .lightBB li{width: 100%;margin: 0;}
.MBB .lightBB li img{width: 40px;margin: 5px 10px 0;}}
@media screen and (min-width: 376px) and (max-width: 480px){#viewer {height: 135px;}.slick-list{padding: 0 70px;}
.MBB{width: 320px;}
.MBB .lightBB ul{width: 100%;margin: 5px 0 0 0;display: inline;text-align: right;}
.MBB .lightBB li{width: 100%;margin: 0;}
.MBB .lightBB li img{width: 40px;margin: 5px 10px 0;}}
/*481-560 height:180px list-padding:70px*/
@media screen and (min-width: 561px) and (max-width: 680px){#viewer {height: 240px;}.slick-list{padding: 0 90px;}
.movieBox video{width: 420px;}}
@media screen and (min-width: 681px) and (max-width: 720px){#viewer {height: 280px;}.slick-list{padding: 0 90px;}
.movieBox video{width: 420px;}}
@media screen and (min-width: 721px) and (max-width: 767px){#viewer {height: 320px;}.slick-list{padding: 0 90px;}
.movieBox video{width: 420px;}}
@media screen and (min-width: 768px) and (max-width: 840px){#viewer {height: 320px;}
.movieBox video{width: 420px;}}
@media screen and (min-width: 841px) and (max-width: 960px){#viewer {height: 380px;}
.movieBox video{width: 420px;}}
@media screen and (min-width: 961px) and (max-width: 1024px){#viewer {height: 420px;}
.movieBox video{width: 420px;}}
@media screen and (min-width: 1025px) and (max-width: 1200px){#viewer {height: 480px;}
.movieBox video{width: 420px;}}
/*END*/