@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&family=Noto+Sans+JP:wght@300;500;700&display=swap');

/* base
------------------------------------------------------------*/
* { box-sizing: border-box;}
body { background: #efefef; font-family: 'Montserrat', 'Noto Sans JP', sans-serif; font-weight: 300;}

h1,h2,h3,h4,h5,p,li,div,a { color: #fff;}

a,
a:focus,
a:hover { color: #fff; text-decoration: none;}

img { vertical-align: top;}
img.full-img { width: 100%;}

/* header 
------------------------------------------------------------*/
header { position: fixed; top: 20px; right: 20px; left: 20px; z-index: 10; text-align: right; padding: 15px; border-bottom: #fff 1px solid;}
header h1 { font-size: 18px; font-weight: 900; position: absolute; top: 0; left: 20px; text-align: left;}
header h1 a { display: block; height: 75px; line-height: 72px;}
header ul li { display: inline-block; text-align: center; vertical-align: middle;}
header ul li:nth-child(2) { margin-left: 20px;}
header ul li:nth-child(3) { margin-left: 30px;}
header ul li:nth-child(4) { margin-left: 10px;}
header ul li a { font-size: 16px; font-weight: 900;}
header ul li span { display: block; color: #fff; font-weight: bold; font-size: 11px; margin-top: 10px;}

@media screen and (max-width: 767px){
header { top: 15px; right: 15px; left: 15px;}
header h1 { top: 37.59500px; transform: translateY(-50%);}
header h1 a { height: auto; line-height: inherit;}

header ul li:first-child { position: fixed; bottom: 68px; left: 35px;}
header ul li:first-child+* { position: fixed; bottom: 35px; left: 35px; margin: 0;}
header ul li a { font-size: 18px;}
}

/* footer
------------------------------------------------------------*/


/* barba-wrapper
------------------------------------------------------------*/
#top-wrap { transition: all .5s .3s; height: 100vh;}
#top-wrap::before { content: ''; position: fixed; top: 20px; right: 20px; bottom: 20px; left: 20px; border: #fff 1px solid; pointer-events: none; z-index: 100;}

@media screen and (max-width: 767px){
#top-wrap::before { top: 15px; right: 15px; bottom: 15px; left: 15px;}
}

#barba-wrapper { position: fixed; top: 100vh; right: 0; left: 0; height: 100vh; overflow-y: scroll; background: #fff; opacity: 0; transition: all .5s;}
#barba-wrapper h1,
#barba-wrapper h2,
#barba-wrapper h3,
#barba-wrapper h4,
#barba-wrapper h5,
#barba-wrapper li,
#barba-wrapper div,
#barba-wrapper a { color: #141414;}
#barba-wrapper p { color: #141414; font-size: 15px; line-height: 1.8;}

#barba-wrapper >main { opacity: 0;}
body.biography #barba-wrapper >main,
body.works-list #barba-wrapper >main { opacity: 1;}
#barba-wrapper main >h2 { font-size: 30px; font-weight: 900; position: fixed; top: 0; right: 0; left: 0; background: #fff; padding: 30px; z-index: 10;}
#barba-wrapper main >h2 small { display: block; font-size: 	14px; font-weight: 300;}
#barba-wrapper .barba-close { position: fixed; top: 20px; right: 20px; z-index: 15;}

#barba-wrapper footer { border-top: #ddd 1px solid; padding-top: 30px; text-align: center;}
#barba-wrapper footer >a { background: #141414; padding: 12px 20px; border-radius: 20px; color: #fff; display: block; width: 170px; margin: 0 auto 30px; position: relative; letter-spacing: .1em;}
#barba-wrapper footer >a::after { content: '←'; position: absolute; top: 50% ; transform: translateY(-50%); left: 15px;}
#barba-wrapper footer p.name { font-size: 21px; font-weight: 900; line-height: 1; margin-bottom: 20px;}
#barba-wrapper footer ul { margin-bottom: 30px;}
#barba-wrapper footer ul li { display: inline-block;}
#barba-wrapper footer ul li+li { margin-left: 18px;}

@media screen and (max-width: 320px){
#barba-wrapper main >h2 { font-size: 24px;}
}

/* biography */
body.biography #top-wrap { opacity: 0; transition: all .5s;}
body.biography #barba-wrapper { top: 0;  opacity: 1; padding: 108px 30px 150px; transition: all .5s .3s;}
body.biography #barba-wrapper .bio-detail-wrap { max-width: 640px; margin: 0 auto;}
body.biography #barba-wrapper figure { border-radius: 10px; overflow: hidden;}

/* works-list */
body.works-list #top-wrap { opacity: 0; transition: all .5s;}
body.works-list #barba-wrapper { top: 0; opacity: 1; padding: 108px 30px 30px; transition: top .5s .3s, opacity .5s .3s;}

body.works-list #barba-wrapper ul.list-small,
body.works-list #barba-wrapper ul.list-large { font-size: 0;}
body.works-list #barba-wrapper ul.list-small li { display: inline-block; vertical-align: top; font-size: 14px; width: 33.33333333%;}
body.works-list #barba-wrapper ul.list-large li { display: inline-block; vertical-align: top; font-size: 14px; width: 32%; margin-left: 2%;}
body.works-list #barba-wrapper ul.list-large li:nth-child(3n-2) { margin-left: 0%;}

body.works-list #barba-wrapper ul.list-small li { padding: 20px;}
body.works-list #barba-wrapper ul.list-small li:nth-child(odd) { background: #efefef;}
body.works-list #barba-wrapper ul.list-small li figure { display: inline-block; vertical-align: middle; width: 80px; overflow: hidden; border-radius: 5px;}
body.works-list #barba-wrapper ul.list-small li div { display: inline-block; vertical-align: middle; width: calc(100% - 100px); margin-left: 20px;}
body.works-list #barba-wrapper ul.list-small li div >* { display: block;/* overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/}
body.works-list #barba-wrapper ul.list-small li div .strong { font-weight: 700; margin-bottom: 4px;}
body.works-list #barba-wrapper ul.list-small li div .thin { margin-bottom: 8px;}
body.works-list #barba-wrapper ul.list-small li div small { font-weight: 700; opacity: .4; margin-bottom: 8px;}
body.works-list #barba-wrapper ul.list-small li div .view { color: #662d91; font-style: italic;}

body.works-list #barba-wrapper ul.list-large li+li+li+li { margin-top: 40px;}
body.works-list #barba-wrapper ul.list-large li figure { margin-bottom: 15px;}
body.works-list #barba-wrapper ul.list-large li div { position: relative;}
body.works-list #barba-wrapper ul.list-large li div .strong { display: block; font-weight: 700; margin-bottom: 8px; max-width: calc(100% - 105px);}
body.works-list #barba-wrapper ul.list-large li div .thin { letter-spacing: .05em;}
body.works-list #barba-wrapper ul.list-large li div .view { position: absolute; top: 0; right: 0; color: #662d91; font-style: italic;}

@media screen and (max-width: 991px){
body.works-list #barba-wrapper { padding: 108px 30px 150px;}
body.works-list #barba-wrapper ul.list-small li { width: 100%;}
body.works-list #barba-wrapper ul.list-large li { width: 100%; margin-left: 0%;}
body.works-list #barba-wrapper ul.list-large li+li { margin-top: 40px;}
}
@media screen and (max-width: 480px){
body.works-list #barba-wrapper ul.list-small li { padding: 0;}
body.works-list #barba-wrapper ul.list-small li:nth-child(odd) { background: none;}
body.works-list #barba-wrapper ul.list-small li+li { margin-top: 20px;}
}

/* works-detail */
body.works-list main >* { transition: all .5s ease .3s;}
body.works-list main.detail-open >*:not(.works-detail-wrap) { opacity: 0; transform: translateX(20px); transition: all .5s ease;}

body.works-list #barba-wrapper .works-detail-wrap { position: fixed; top: 0; left: 100%; width: 100vw; height: 100vh; overflow-y: scroll; background: #f5f5f5; padding: 78px 30px 150px; z-index: 100; transition: all .5s ease;}
body.works-list #barba-wrapper .works-detail-wrap.open { left: 0%; transition: all .5s ease .3s;}
body.works-list #barba-wrapper .works-detail-wrap .back-to-list { font-size: 18px; font-weight: 900; position: fixed; top: 0; right: 0; left: 0; background: #f5f5f5; padding: 30px; z-index: 100; opacity: 0; pointer-events: none; transition: all .5s ease;}
body.works-list #barba-wrapper .works-detail-wrap.open .back-to-list { opacity: 1; pointer-events: inherit; transition: all .5s ease .3s;}

body.works-list #barba-wrapper .works-detail-wrap >ul { max-width: 640px; margin: 0 auto;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li { display: none; word-break: break-all;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li.active { display: block;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li figure { border-radius: 10px; overflow: hidden; margin-bottom: 30px;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li .strong { display: block; font-size: 18px; font-weight: 700; margin-bottom: 10px; letter-spacing: .02em; line-height: 1.2;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li .thin { font-size: 16px; letter-spacing: .02em; line-height: 1.2;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li .info p { font-size: 12px; line-height: 1.8; letter-spacing: .05em;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li .links p { font-size: 11px; letter-spacing: .1em;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li .links p+p { margin-top: 10px;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li .links p a { color: #662d91!important; letter-spacing: .02em;}
/*body.works-list #barba-wrapper .works-detail-wrap >ul >li >p { text-align: justify;}*/

/* movie detail */
body.works-list #barba-wrapper .works-detail-wrap .works-video-wrap { position: relative;}
body.works-list #barba-wrapper .works-detail-wrap .works-video-wrap .stop-filter { position: absolute; top: 0; right: -30px; bottom: 32px; left: -30px; background: rgba(0,0,0,.7); z-index: 10; color: #fff!important; text-align: center;}
body.works-list #barba-wrapper .works-detail-wrap .works-video-wrap .stop-filter span { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; font-size: 14px;}
body.works-list #barba-wrapper .works-detail-wrap .works-video-wrap .stop-filter span small { display: block; margin-top: 10px;}
body.works-list #barba-wrapper .works-detail-wrap >ul >li iframe { width: calc(100% + 60px); height: 394px; margin-left: -30px; margin-bottom: 30px;}

@media screen and (max-width: 480px){
body.works-list #barba-wrapper .works-detail-wrap >ul >li iframe { height: 220px;}
}

/* event detail */
body.works-list #barba-wrapper .works-detail-wrap.event >ul >li figure { border-radius: 0;}
body.works-list #barba-wrapper .works-detail-wrap.event >ul >li figure:first-child,
body.works-list #barba-wrapper .works-detail-wrap.event .gallery { margin-left: -30px; margin-right: -30px;}
body.works-list #barba-wrapper .works-detail-wrap.event .gallery .slick-slide { margin: 0 10px;}
body.works-list #barba-wrapper .works-detail-wrap.event .gallery-title { text-align: center; font-size: 18px!important; margin: 50px 0 20px;}


/* splash-source-wrap
------------------------------------------------------------*/
#splash-source-wrap { position: fixed; left: 40px; bottom: 40px; right: 40px; height: calc(100vh - 80px); overflow: hidden;}
#splash-source-code { position: absolute; left: 0; bottom: 0;}
#splash-source-code p { font-size: 10px; font-weight: 100; line-height: 1.4; word-break: break-all; transform: scale(.85); transform-origin: left;}
#splash-source-code p+p { margin-top: 0;}