@charset "UTF-8";
@import "reset5.css";
@import "../font/oakes-grotesk/oakes-grotesk.css";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

body { color:#fff; background: #1c1c1c; line-height:1; padding: 0; position: relative; min-height: 100%; }
html { min-height: 100%; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 15px default setting */
body { font-size: 14px; letter-spacing: 0.08em; font-family: 'oakes-grotesk', "Zen Kaku Gothic New", Helvetica, Arial, Sans-Serif }
p, th, td, dt, dd { line-height: 2em; font-feature-settings: "palt" 1 }
h2, h3, h4, h5 { font-family: 'oakes-grotesk', "Zen Kaku Gothic New", Helvetica, Arial, Sans-Serif; letter-spacing: 0.12em; font-style: normal; font-weight: 800; font-feature-settings: "palt" 1 }

.mincho { font-family: YuMincho, 'Yu Mincho', serif;}

/* !clearfix */
hr { display: none; }

.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

img { vertical-align: bottom; }

.ts-larger { font-size: 1.12em !important }
.ts-smaller { font-size: 0.88em !important }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

.pc-none { display: none }
.sp-none { display: block }


/* !Links */
a { cursor: pointer !important }
a:link { color: #fff; text-decoration: none }
a:visited { color: #fff; text-decoration: none }
a:hover { color: Salmon; text-decoration: underline }
a:active { color: #cc1c7d; text-decoration: none }

i { font-style: italic !important }
.rd { color: crimson }
.pk { color: #cc1c7d }


html {  }
#loader { position: fixed; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }
.loader svg {
	fill: none;
	stroke: #676c72 ;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}
#wrapper { position: relative; width: 100%; text-align: left; min-height: 100%; overflow: hidden }

/* リストの高さ揃える  */
.list-flex { display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

/* effects */
.fd { position: relative; opacity: 0; transform: translateY(6vw) scale(1.24); transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.fd.active { opacity: 1; transform: translateY(0) scale(1); }
.zm { transform: scale(1.24); }

/* header */
#header { position: fixed; left: 0; bottom: -80px; background: #1c1c1c; width: calc(100% - 6vw); padding: 25px 3vw; z-index: 100; transition: all 0.4s }
#header.active { bottom: 0; }
#header h1 {  }
#header .global-nav { position: absolute; left: calc(6vw + 88px); top: 25px }
#header .global-nav ul { margin-left: -1em }
#header .global-nav li { display: inline-block; font-size: 18px; font-weight: 300; line-height: 28px }
#header .global-nav li a { display: block; font-weight: 800; padding: 0 1em; letter-spacing: 0.024em }
#header .global-nav li.current a { color: #000; background: rgba(255,255,255,0.75); border-radius: 14px }
#header .global-nav li:last-child { font-size: 14px; vertical-align: top; margin-left: 1.5vw }
#header .global-nav li:last-child a { display: inline-block; }
#header .h-nav { position: absolute; right: 3vw; top: 25px }
#header .h-nav li { display: inline-block; font-size: 12px; font-weight: 300; line-height: 28px; vertical-align: top; }
#header .h-nav li a { display: block; padding: 0 1em }

.logo { position: fixed; left: calc(50% - 100px); top: 25px; z-index: 999 }
.contents { position: relative; }
.cont { position: relative; overflow: hidden }
.cont h2 { position: absolute; right: 12px; bottom: 12px; font-size: 12px; font-weight: 500; text-align: right; z-index: 10 }
.cont h2 .txtl { display: inline-block; line-height: 1em; margin-top: 0.5em; padding: 0 0.5em }
.cont h2 .txtl.cat { font-style: italic; font-size: 10px; }
.cont video, .cont img { display: relative; z-index: 0 }

.works-idx { z-index: 0 }
.works-idx.pb { padding-bottom: 12vw }
.works-idx li { position: relative; margin: 1px 0 0 }
.works-idx.creator-main li { margin: 0 }
.works-idx li.wid-2 { width: 50% }
.works-idx li.wid-3 { width: 33.33% }
.works-idx li.wid-4 { width: 25% }
.works-idx li a { position: relative; display: block }
.works-idx li a .tl { position: relative; position: absolute; left: 0; top: 0; width: 0; height: 1px; background: #fff; opacity: 0.5; transition: all 0.4s }
.works-idx li a .tr { position: relative; position: absolute; right: 0; top: 0; width: 1px; height: 0; background: #fff; opacity: 0.5; transition: all 0.4s }
.works-idx li a .br { position: relative; position: absolute; right: 0; bottom: 0; width: 0; height: 1px; background: #fff; opacity: 0.5; transition: all 0.4s }
.works-idx li a .bl { position: relative; position: absolute; left: 0; bottom: 0; width: 1px; height: 0; background: #fff; opacity: 0.5; transition: all 0.4s }
.works-idx li a .cont img { transition: all 0.2s }
.works-idx li a:hover { color: #fff }
.works-idx li a:hover .cont img { opacity: 0.33; transform: scale(1.125); }
.works-idx li a:hover .cont h2 { mix-blend-mode: normal }
.works-idx li a:hover .tl, .works-idx li a:hover .br { width: 100% }
.works-idx li a:hover .tr, .works-idx li a:hover .bl { height: 100% }

.work-detail { min-height: 100vh; background: #000; }
.work-detail h2 { position: fixed; right: 12px; top: 12px; font-size: 18px; font-weight: 600; text-align: right; z-index: 10 }
.work-detail h2 .txtl { display: inline-block; line-height: 1em; background: #1c1c1c; margin-top: 0.66em; padding: 0 0.5em }
.work-detail h2 .txtl.cat { font-size: 12px; font-style: italic; font-weight: 300; }
.work-detail .mov { padding: calc(50vh - 50vw * (9 / 16)) 0 6vw }
.work-detail .mov iframe { width: 100%; height: calc(100vw * 9/16)}
.work-detail .photos { padding: 6vw }
.work-detail .ph { padding: 0 0 12vw }
.work-detail .ph.vert { padding: 0 18vw 12vw }

#footer { width: calc(100% - 6vw); padding: 60px 3vw 40px }
#footer .footer-inner { position: relative }
#footer .global-nav { position: absolute; left: calc(6vw + 120px); top: 0 }
#footer .global-nav li { display: inline-block; font-size: 44px; font-weight: 300; line-height: 28px }
#footer .global-nav li a { font-weight: 800 }
#footer .global-nav li:last-child { font-size: 20px; vertical-align: top; margin-left: 3vw }
#footer .copyright { font-size: 14px; margin-top: 80px }
#footer .copyright p { display: inline-block }
#footer .copyright .f-nav { display: inline-block; margin-left: 3vw }
#footer .copyright .f-nav li { display: inline-block; font-weight: 300; vertical-align: top; }
#footer .copyright .f-nav li a { display: block; padding: 0 1em}

#creator-menu { position: fixed; left: 0; top: 100vh; width: 100%; height: 100vh; background: rgba(0,0,0,0.9); opacity: 0; z-index: 101; transition: opacity 0.6s, top 0.6s cubic-bezier(0.16, 1, 0.3, 1) }
#creator-menu.active { top: 0; opacity: 1 }
#creator-menu .creator-menu-inner { position: relative; padding: 6vw 6vw 6vw 18vw }
#creator-menu .creator-menu-inner h3 { position: absolute; left: 6vw; top: 6vw; font-size: 18px; font-weight: 600; font-style: italic; writing-mode: vertical-rl; }
#creator-menu .creator-menu-inner .inner-block { margin-bottom: 48px }
#creator-menu .creator-menu-inner .inner-block h4 { font-size: 18px; opacity: 0.5; margin-bottom: 0.5em }
#creator-menu .creator-menu-inner .inner-block li { margin-bottom: 18px }
#creator-menu .creator-menu-inner .inner-block li a { position: relative; display: block; font-size: 55px; font-weight: 600; line-height: 1em }
#creator-menu .creator-menu-inner .inner-block li a .txtl { position: relative; z-index: 10 }
#creator-menu .creator-menu-inner .inner-block li a .bg { position: absolute; left: -18vw; top: 0; width: 100vw; height: 0; background: rgba(255,255,255,0.2); transition: all 0.2s }
#creator-menu .creator-menu-inner .inner-block li a .lt { position: absolute; left: -18vw; top: 0; width: 0; height: 1px; background: rgba(255,255,255,0.4); transition: all 0.4s }
#creator-menu .creator-menu-inner .inner-block li a .lb { position: absolute; right: -6vw; bottom: 0; width: 0; height: 1px; background: rgba(255,255,255,0.4); transition: all 0.4s }
#creator-menu .creator-menu-inner .inner-block li a:hover .bg { height: 100%; }
#creator-menu .creator-menu-inner .inner-block li a:hover .lt, #creator-menu .creator-menu-inner .inner-block li a:hover .lb { width: 100vw }
#btn-close { position: fixed; right: 0; top: 0; width: 80px; height: 80px; cursor: pointer; z-index: 100; }
#btn-close span { position: absolute; display: block; width: 80px; height: 1px; background: #fff; opacity: 0.4; transition: all 0.2s }
#btn-close span:nth-child(1) { left: 0; top: 40px; transform: rotate(45deg); }
#btn-close span:nth-child(2) { left: 0; bottom: 40px; transform: rotate(-45deg) }
#btn-close:hover span:nth-child(1) { opacity: 1; transform: rotate(45deg) scaleX(1.25)}
#btn-close:hover span:nth-child(2) { opacity: 1; transform: rotate(-45deg) scaleX(1.25)}
#btn-back { position: fixed; left: 0; top: 0; width: 80px; height: 80px; cursor: pointer; z-index: 100; }
#btn-back span { position: absolute; display: block; width: 40px; height: 1px; background: #fff; opacity: 0.4; transition: all 0.2s }
#btn-back span:nth-child(1) { left: 0; top: 25px; transform: rotate(-45deg); }
#btn-back span:nth-child(2) { left: 0; bottom: 25px; transform: rotate(45deg) }
#btn-back span:nth-child(3) { left: 0; top: 40px; width: 80px }
#btn-back:hover span:nth-child(1) { opacity: 1; left: -5px; transform: rotate(-45deg) scaleX(1.25)}
#btn-back:hover span:nth-child(2) { opacity: 1; left: -5px; transform: rotate(45deg) scaleX(1.25)}
#btn-back:hover span:nth-child(3) { opacity: 1; width: 100px }

.creator-detail { padding: 3vw 6vw 6vw }
.creator-detail .detail-inner { position: relative }
.creator-detail .detail-inner h2 { width: calc(100% - 200px - 6vw); font-size: 40px; line-height: 1em; }
.creator-detail .detail-inner h2 .sdr { display: block; font-size: 16px; font-weight: 500; font-style: italic; letter-spacing: 0.08em; opacity: 0.25 }
.creator-detail .detail-inner h2 .role { font-size: 16px; line-height: 40px; letter-spacing: 0.08em; vertical-align: text-bottom; margin-left: 30px }
.creator-detail .detail-inner p { width: calc(100% - 200px - 6vw); font-size: 15px; line-height: 1.75em; margin-top: 2em }
.creator-detail .detail-inner .sns-link { display: inline-block; font-size: 14px; margin: 2em 2em 0 0 }
.creator-detail .detail-inner .sns-link a { font-weight: 500; border-bottom: dotted 1px #9c9c9c }
.creator-detail .detail-inner .sns-link a:hover { border-bottom: none }
.creator-detail .detail-inner .portrait { position: absolute; right: 0; top: 0; width: 200px }

.about-us { padding: 6vw 12vw 18vw; min-height: 100vh; background: #000; }
.about-us h2 { font-size: 40px; line-height: 1em; margin-bottom: 0.5em }
.about-us h3 { font-size: 24px; line-height: 1em; margin: 2em 0 0.5em }
.about-us h4 { font-size: 20px; line-height: 1em; margin: 4em 0 0.5em; opacity: 0.5 }
.about-us .about-inner { margin: 0 auto; max-width: 1080px; }
.about-us .about-inner table th { padding: 2em; vertical-align: top; border-bottom: dotted 1px #4c4c4c }
.about-us .about-inner table td { padding: 2em; vertical-align: top; border-bottom: dotted 1px #4c4c4c }
.about-us .services { margin: 0 -3vw }
.about-us .services li { width: calc(50% - 6vw); padding: 0 3vw }

#layer { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 999 }
#layer .lay-1 { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 50vh; background: #000 }
#layer .lay-2 { position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 50vh; background: #000 }

.mt-0 { margin-top: 0 !important }
.mt-1 { margin-top: 1em }
.mt-2 { margin-top: 2em }
.mt-4 { margin-top: 4em }


@media screen and (max-width: 780px) {
	
    body { font-size: 13px; line-height: 1.6; letter-spacing: 0.04em; -webkit-text-size-adjust: none; overflow: hidden }
    h2, h3, h4, h5 { letter-spacing: 0.08em; font-weight: 700; }
	
    a { text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }

    .pc-none { display: block }
    .sp-none { display: none }
    
    /* header */
    #header { position: fixed; left: 0; bottom: -50px; height: 20px; background: #1c1c1c; width: calc(100% - 6vw); padding: 15px 6vw; z-index: 100; transition: all 0.4s }
    #header.active { bottom: 0; }
    #header h1 { display: none }
    #header .global-nav { position: absolute; left: 3vw; top: 15px }
    #header .global-nav ul { margin-left: 0 }
    #header .global-nav li { display: inline-block; font-size: 12px; font-weight: 300; line-height: 20px }
    #header .global-nav li a { padding: 0 0.75em }
    #header .global-nav li:last-child { font-size: 9px; vertical-align: top; }
    #header .h-nav { display: none }
    
    .logo { position: fixed; left: calc(50% - 60px); top: 0; }
    .logo img { width: 120px }
    
    .cont { position: relative; overflow: hidden }
    .cont h2 { position: absolute; right: 6px; bottom: 6px; font-size: 10px; }
    .cont h2 .txtl { display: inline-block; line-height: 1em; margin-top: 0.33em; padding: 0 0.33em }
    .cont h2 .txtl.cat { font-size: 9px; }
    
    .works-idx li.wid-2 { width: 100% }
    .works-idx li.wid-3 { width: 50% }
    .works-idx li.wid-4 { width: 50% }
    
    .work-detail h2 { position: fixed; right: 6px; top: 26px; font-size: 15px; font-weight: 800; text-align: right; line-height: 1em; z-index: 10 }
    .work-detail h2 .txtl { display: inline-block; line-height: 1em; background: #1c1c1c; margin-top: 0.5em; padding: 0 0.5em }
    .work-detail h2 .txtl.cat { font-size: 12px; font-style: italic; font-weight: 300; }
    .work-detail .mov { padding-top: calc(50vh - 50vw * (9 / 16)) }
    .work-detail .photos { padding: 12vw 0 }
    .work-detail .ph { padding: 0 0 12vw }
    .work-detail .ph.vert { padding: 0 12vw 12vw }
    
    #footer { width: calc(100% - 6vw); padding: 40px 3vw 20px }
    #footer .site-logo img { width: 80px }
    #footer .global-nav { position: relative; left: inherit; top: inherit; margin-top: 20px }
    #footer .global-nav li { display: inline-block; font-size: 5vw; font-weight: 300; line-height: 32px }
    #footer .global-nav li:last-child { font-size: 16px; vertical-align: top; margin-left: 0 }
    #footer .copyright { font-size: 12px; margin-top: 30px }
    #footer .copyright p { display: inline-block }
    #footer .copyright .f-nav { display: inline-block; margin: 0 -1em; }
    #footer .copyright .f-nav li { display: inline-block; font-weight: 300; vertical-align: top; }
    #footer .copyright .f-nav li a { display: block; padding: 0 1em }
    
    #creator-menu .creator-menu-inner { position: relative; padding: 12vw 3vw 3vw 12vw }
    #creator-menu .creator-menu-inner h3 { position: absolute; left: 3vw; top: 9vw; font-size: 12px; }
    #creator-menu .creator-menu-inner .inner-block { margin-bottom: 24px }
    #creator-menu .creator-menu-inner .inner-block h4 { font-size: 12px; opacity: 0.5; margin-bottom: 0.5em }
    #creator-menu .creator-menu-inner .inner-block li { margin-bottom: 12px }
    #creator-menu .creator-menu-inner .inner-block li a { font-size: 25px; }
    #btn-close { position: fixed; right: 0; top: 0; width: 40px; height: 40px; cursor: pointer; z-index: 100; }
    #btn-close span { position: absolute; display: block; width: 40px; height: 1px; background: #fff; opacity: 0.4; transition: all 0.2s }
    #btn-close span:nth-child(1) { left: 0; top: 20px; transform: rotate(45deg); }
    #btn-close span:nth-child(2) { left: 0; bottom: 20px; transform: rotate(-45deg) }
    #btn-close:hover span:nth-child(1) { opacity: 1; transform: rotate(45deg) scaleX(1.25)}
    #btn-close:hover span:nth-child(2) { opacity: 1; transform: rotate(-45deg) scaleX(1.25)}
    #btn-back { position: fixed; left: 0; top: 0; width: 40px; height: 40px; cursor: pointer; z-index: 100; }
    #btn-back span { position: absolute; display: block; width: 20px; height: 1px; background: #fff; opacity: 0.4; transition: all 0.2s }
    #btn-back span:nth-child(1) { left: 0; top: 12px; transform: rotate(-45deg); }
    #btn-back span:nth-child(2) { left: 0; bottom: 12px; transform: rotate(45deg) }
    #btn-back span:nth-child(3) { left: 0; top: 20px; width: 40px }
    #btn-back:hover span:nth-child(1) { opacity: 1; left: -2px; transform: rotate(-45deg) scaleX(1.25)}
    #btn-back:hover span:nth-child(2) { opacity: 1; left: -2px; transform: rotate(45deg) scaleX(1.25)}
    #btn-back:hover span:nth-child(3) { opacity: 1; width: 50px }
    
    .creator-detail { padding: 6vw 3vw }
    .creator-detail .detail-inner h2 { width: calc(100% - 90px - 3vw); font-size: 25px; line-height: 1em; margin-bottom: 0.5em }
    .creator-detail .detail-inner h2 .sdr { display: block; font-size: 12px; font-weight: 500; font-style: italic; opacity: 0.25 }
    .creator-detail .detail-inner h2 .role { display: block; font-size: 12px; line-height: 25px; vertical-align: text-bottom; margin-left: 0 }
    .creator-detail .detail-inner p { width: 100%; font-size: 14px; line-height: 1.75em }
    .creator-detail .detail-inner .sns-link { display: inline-block; font-size: 14px; margin: 2em 2em 0 0 }
    .creator-detail .detail-inner .portrait { position: absolute; right: 0; top: -3vw; width: 90px }
    
    .about-us { padding: 12vw 3vw 18vw; min-height: 100vh; background: #000; }
    .about-us h2 { font-size: 24px; line-height: 1em; margin-bottom: 0.5em }
    .about-us h3 { font-size: 20px; line-height: 1em; margin: 1em 0 0.5em; line-height: 1.5em }
    .about-us h4 { font-size: 16px; line-height: 1em; margin: 4em 0 0.5em; opacity: 0.5 }
    .about-us .about-inner { margin: 0 auto; max-width: inherit; }
    .about-us .about-inner table th { padding: 1.5em 1em; vertical-align: top; border-bottom: dotted 1px #4c4c4c }
    .about-us .about-inner table td { padding: 1.5em 1em; vertical-align: top; border-bottom: dotted 1px #4c4c4c }
    .about-us .services { margin: 0 }
    .about-us .services li { width: 100%; padding: 0 0 3vw }


}




@media screen and (max-width: 320px) {

}