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

body { font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;}
body::before{ content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; border: rgba(0,0,254,.6) 0px solid; z-index: -1; transition: all 1s 2s;}
body::after { content: ''; position: fixed; top: 0; right: 0; left: 0; height: 100vh; background: url(../img/visual.png) center center; background-size: contain; z-index: -2;}

@media screen and (max-width:767px){
body::after { background: url(../img/visual.png) center center; background-size: cover;}
}

section:not(#mainv) { max-width: 440px; margin: 0 auto; overflow: hidden;}
section figure img { width: 100%;}

/*
------------------------------------------------------------*/
#mainv { position: relative; height: 100vh; overflow: hidden; margin-bottom: 60px;}
@supports (-webkit-touch-callout: none) {
#mainv { height: 100vh; height: -webkit-fill-available;}
}
#mainv::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.4); transition: all 3s 2s;}
#mainv h1 { position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; max-width: 260px; margin: 0 auto; z-index: 10;}
#mainv h1 img { opacity: 0; transition: all 1s 1s;}
#mainv .sub { position: absolute; top: calc(50% + 40px); transform: translateY(-50%); right: 0; left: 0; max-width: 200px; margin: 0 auto; z-index: 10; opacity: 0;}

#mainv h1 span { position: absolute; top: 0; left: -320vw; width: 300vw; height: 1px; background: #fff; transition: all 2s;}
#mainv h1 span:nth-of-type(even) { left: auto; right: -320vw}
#mainv h1 span:first-of-type {}
#mainv h1 span:first-of-type+* { top: 1px; transition: all 2s .3s;}
#mainv h1 span:first-of-type+*+*+* { top: 3px; transition: all 2s .15s;}
#mainv h1 span:first-of-type+*+*+*+*+* { top: 5px; /*transition: all 2s .25s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+* { top: 8px; /*transition: all 2s .4s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+* { top: 9px; transition: all 2s .45s;}
/**/
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+* { top: 11px; /*transition: all 2s .55s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+* { top: 12px; transition: all 2s .15s;}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 15px; /*transition: all 2s .75s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 17px; transition: all 2s .3s;}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 19px; /*transition: all 2s .95s;*/}
/**/
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 20px; transition: all 2s .3s;}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 21px; transition: all 2s .15s;}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 23px; /*transition: all 2s 1.15s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 24px; transition: all 2s .45s;}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 26px; /*transition: all 2s 1.3s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 29px; /*transition: all 2s 1.45s;*/}
/**/
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 32px; /*transition: all 2s 1.6s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 35px; transition: all 2s .45s;}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 37px; /*transition: all 2s 1.85s;*/}
#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 39px; transition: all 2s .15s;}

#mainv h1 span:first-of-type+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+* { top: 40px; /*transition: all 2s 2s;*/}

body.loaded #mainv::after { background: rgba(0,0,0,0);}
body.loaded #mainv h1 span:nth-of-type(odd) { left: 100vw}
body.loaded #mainv h1 span:nth-of-type(even) { right: 100vw}
body.loaded #mainv h1 img { opacity: 1;}
body.loaded .scrollDown { opacity: 1;}

body.loaded #mainv .sub { opacity: 1; transition: all 2s 2s;}
body.loaded::before{ border: rgba(0,0,254,.6) 8px solid;}

body { overflow: hidden;}
body.ready { overflow: inherit;}

/*
------------------------------------------------------------*/
.scrollDown { display: inline-block; position: absolute; bottom: 20px; left: 50%; padding-top: 60px; z-index: 2; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); text-decoration: none; opacity: 0; transition: all 2s 2.5s;}
.scrollDown span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb 1.5s infinite; animation: sdb 1.5s infinite; box-sizing: border-box;}

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


/* concept
------------------------------------------------------------*/
#concept article { height: 100vh; position: relative;}
#concept article p,
#concept article figure { position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin: 0 auto; opacity: 0;}
#concept article p img,
#concept article figure img { width: 100%;}
#concept article.concept1 p { width: 46.4102564%;}
#concept article.concept2 p { width: 11.5384615%;}
#concept article.concept3 p { width: 67.5641026%;}

@media screen and (max-width:767px){
#concept article.concept4 figure { margin: 0 50px;}
}

/*
------------------------------------------------------------*/
#exhibition { padding: 60px 50px; text-align: center; position: relative;}
#exhibition h2 { max-width: 240px; margin: 0 auto 40px;}
#exhibition p { color: #fff; line-height: 1.8;}
#exhibition p+p { margin-top: 30px;}

.slick { margin: 30px 0 60px;}
.slick .slick-dots li { margin: 0;}
.slick .slick-dots li button:before { color: #fff;}
.slick .slick-dots li.slick-active button:before { color: #fff;}

iframe { margin-top: 50px; margin-bottom: 10px; filter: grayscale(1); max-width: 100%;}

/*
------------------------------------------------------------*/
footer { background: #000; text-align: center; padding: 60px 0; width: calc(100% - 16px); margin: 0 auto 8px;}
footer p { color: #fff; font-size: 13px; letter-spacing: .2em;}
footer figure { display: block; max-width: 200px; margin: 30px auto;}
footer a { color: #fff; font-size: 13px; letter-spacing: .2em; display: block; max-width: 200px; margin: 0 auto; border: rgba(255,255,255,.6) 1px solid; padding: 20px 0; text-decoration: none;}

/**/
#audio-wrap { position: fixed; bottom: 22px; right: 20px; z-index: 10001; width: 50px; height: 28px; background: rgba(200,200,200,.86); border-radius: 14px;}
.audio-changer { transition: all .3s; position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 13px;}
.audio-changer.pausing { transform: translateY(-50%); left: 1px; background: #1c1c1c;}
.audio-changer.playing { transform: translate(-100%,-50%); left: calc(100% - 1px); background: #0000fe;}

/**/
#store { margin-bottom: 60px!important;}
#store ul { display: flex; justify-content: space-between; padding: 0 30px;}
#store ul li { flex-basis: calc(100% - 6px); background: #fff;}
#store ul li a { color: inherit; text-decoration: none;}
#store ul li figure { margin-bottom: 6px;}
#store ul li figure img { width: 100%;}
#store ul li p { font-size: 14px; padding: 0 12px; margin-bottom: 6px;}
#store ul li p+p { font-weight: bold; margin-bottom: 12px;}
#store ul li p small { font-size: 12px;}