@charset "UTF-8";
@import "reset5.css";

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

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 14px default setting */
body { font-size: 14px; letter-spacing: 0.08em; font-family: "adobe-garamond-pro", "Times New Roman", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" }
p, th, td, li, dt, dd, span { line-height: 2.0; letter-spacing: 0.16em; font-feature-settings: "palt" }
h2, h3, h4, h5 { line-height: 1.6; letter-spacing: 0.20em; font-weight: normal; font-style: normal; font-feature-settings: "palt" }

.mincho { font-family: "adobe-garamond-pro", "Times New Roman", YuMincho, 'Yu Mincho', serif;}

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

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

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

img, video { 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 }
a:link { color: #272727; text-decoration: none }
a:visited { color: #272727; text-decoration: none }
a:hover { color: #a7a7a7; text-decoration: underline }
a:active { color: #af9c5e; text-decoration: none }

a.pj { display: block }

html {  }
#loader { position: fixed; left: 50%; top: 50%; width: 50px; height: 94px; margin: -47px 0 0 -25px; z-index: 10000; }
#loader .ll1 { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #c9caca }
#loader .ll2 { position: absolute; right: 0; top: 0; width: 100%; height: 2px; background: #c9caca }
#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;
}

#header { position: fixed; left 0; top: 0; width: 100%; z-index: 1001 }
#header .ci-mark { padding: 20px 30px; display: block; mix-blend-mode: multiply }
#header .ci-mark img {  }
#btn-menu { position: absolute; right: 0; top: 0; width: 80px; height: 80px; cursor: pointer }
#btn-menu span { position: absolute; left: 50%; top: 50%; width: 32px; height: 1px; background: #837d7b; display: block; transition: all 0.2s }
#btn-menu span.ln1 { left: 50%; top: 50%; margin: -6px 0 0 -16px; }
#btn-menu span.ln2 { right: 50%; top: 50%; margin: 6px 0 0 -16px; }
#btn-menu:hover span.ln1 { width: 40px; margin: -4px 0 0 -20px; }
#btn-menu:hover span.ln2 { width: 40px; margin: 4px 0 0 -20px; }
#btn-menu.on span.ln1 { transform: rotate(45deg); width: 32px; margin: 0 0 0 -20px; }
#btn-menu.on span.ln2 { transform: rotate(-45deg); width: 32px; margin: 0 0 0 -20px; }

#global-nav { position: fixed; left: 0; top: -100%; width: 100%; height: 100vh; background: rgba(255,255,255,0.925); overflow: hidden; z-index: 1000 }
#global-nav .inner { position: relative }
#global-nav ul { padding: 4.8vw 9.6vw; }
#global-nav ul li { margin-top: -2.3529vw; display: none }
#global-nav ul li:first-child { margin-top: 0 }
#global-nav ul li a { position: relative; display: block; padding: 0; top: 0; font-family: Univers, Helvetica, Arial, "sans-serif" }
#global-nav ul li a .txtl { position: absolute; font-weight: 300; top: 50%; left: 71.2vw; opacity: 0.15 }
#global-nav ul li a img { height: 12.6vw; opacity: 0.15; transition: all 0.2s }
#global-nav ul li a:hover img { opacity: 1 }
#global-nav ul li a:hover span { opacity: 1; color: #221815 }

#wrapper {}
.mov { position: relative; padding: 0; margin: 0; background: #f5f9ff }
.mov .cvr { position: absolute; left: 0; top: 0; opacity: 0.5; }
.mov .btn-play { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; display: none }
.mov .btn-snd { position: absolute; right: 24px; bottom: 24px; cursor: pointer; opacity: 0.5; z-index: 10; transition: all 0.2s }
.mov .btn-snd:hover { opacity: 1 }
#vd { opacity: 0 }

#contents { position: relative; padding: 36px 0 9.6vw }
#contents .ci-mark { position: absolute; left: 0; top: 0; padding: 30px; display: block; mix-blend-mode: multiply }
#contents h1 { text-align: right; margin-right: 9.6vw; margin-bottom: 0 }
#contents .contents-inner { padding: 0 9.6vw }

.lang { padding: 0 9.6vw 30px; color: #e8e7e7; font-weight: 200; font-family: Univers, Helvetica, Arial, "sans-serif" }
.lang a { display: inline-block; font-weight: 200; }
.lang a.on { font-weight: 600; }
.f-nav { padding: 0 9.6vw 60px; color: #e8e7e7; font-weight: 200; font-family: Univers, Helvetica, Arial, "sans-serif" }
.f-nav a.pj, .f-nav a.movie { display: inline-block; font-weight: 200; }
.f-nav .sp-none { display: inline-block }

.mov-sp { display: none }
#footer { padding: 40px 9.6vw; border-top: solid 1px #e8e7e7; font-family: Univers, Helvetica, Arial, "sans-serif" }
#footer .foot { vertical-align: bottom }
#footer .foot p { display: inline-block; }
#footer .foot p.copyright { font-size: 12px; font-weight: 200; }

#main { opacity: 0 }
.cont { position: relative; width: 100% }
.cont h2.cont-tit { position: absolute; left: calc(100% - 186px); top: 9.6vw; font-size: 16px; font-weight: 500; font-family: Univers, Helvetica, Arial, "sans-serif" }
.cont h2.cont-tit span { letter-spacing: 0.20em; }
.cont .cont-inner { position: relative; padding: 9.6vw; z-index: 10 }
.cont .cont-inner .block { margin-bottom: 8em }
.cont .cont-inner .block:last-child { margin-bottom: 0 }
.cont .cont-inner h3 { position: absolute; left: 0; top: 9.6vw; font-size: 18px; letter-spacing: 0.6em; font-weight: 400; font-family: "adobe-garamond-pro", "Times New Roman", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    animation: blur 3.2s linear forwards;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.cont .cont-inner h3 span { letter-spacing: 0.6em; }
.cont .cont-inner figure { margin: 4em 0 0; opacity: 0 }
.cont .cont-inner figure.sign { margin: 2em 0 0; }
.cont .cont-inner h4 { font-size: 16px; margin: 4em 0 -1em; opacity: 0 }
.cont .cont-inner p { margin: 4em 0 0; }
.cont .cont-inner p .txtl { position: relative; display: block; opacity: 0 }
.cont .cont-inner p .hd { font-size: 11px; }
.cont.en .cont-inner h3　{ letter-spacing: 0.3em; }
.cont.en .cont-inner h3 span { letter-spacing: 0.3em; }
.cont.en .cont-inner p { line-height: 1.9; letter-spacing: 0.08em; }
.cont.en .cont-inner p span { letter-spacing: 0.08em; }
p.cap { font-size: 12px; font-weight: 200; font-family: Univers, Helvetica, Arial, "sans-serif" }

#mission { padding-bottom: 19.2vw }
#mission .cont-inner { min-height: 58vw; }
#mission .vis { position: absolute; left: 50%; bottom: 0; width: 40.4vw; z-index: 0 }
#mission .vis p.cap { position: absolute; left: 20.8%; bottom: 2%; }
#concept .vis { width: 100%; margin-top: 6em }
#ci-design .vis { width: 100%; margin-top: 6em }
#movie .yt { width: 100%; margin-top: 6em; transition: all 0.2s }
#movie .yt:hover { opacity: 0.33 }
#outline .vis { width: 100%; margin-top: 6em }
#outline p.cap { margin-top: 2em }
#contact .vis { width: 100%; margin-top: 6em }

.creditWrap { position: fixed; left: 0; top: 0; width: calc(100% - 19.2vw); height: 100vh; padding: 0 9.6vw; background: rgba(255,255,255,0.85); overflow-y: scroll; z-index: 1000; display: none }
.creditWrap .credit-inner { padding: 4.8vw 9.6vw 9.6vw; }
.creditWrap .credit-inner p { margin: 0 0 1em; font-style: italic }
.creditWrap .credit-inner p .txtl { position: relative; display: block; opacity: 0 }
.creditWrap .credit-inner p .hd { font-size: 11px; }
.movieWrap { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #fff; z-index: 1000; display: none }
.movieWrap .movie-inner { padding-top: calc(50vh - 26.36vw) }

@keyframes blur {
  0% {
    filter: blur(9px);
  }
  100% {
    filter: blur(0);
  }
}

img.gray {
opacity: 0.33;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}


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


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


@media screen and (max-width: 780px) {
	
    body { font-size: 13px; }
    p, th, td, li, dt, dd, span { line-height: 1.88 }
    h2, h3, h4, h5 { line-height: 1.48 }
	
    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 { position: fixed; left 0; top: 0; width: 100%; z-index: 1001 }
    #header .ci-mark { padding: 20px 30px; display: block; mix-blend-mode: multiply }
    #header .ci-mark img {  }
    #btn-menu { position: absolute; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer }
    #btn-menu span { position: absolute; left: 50%; top: 50%; width: 24px; height: 1px; background: #837d7b; display: block; transition: all 0.2s }
    #btn-menu span.ln1 { left: 50%; top: 50%; margin: -5px 0 0 -12px; }
    #btn-menu span.ln2 { right: 50%; top: 50%; margin: 5px 0 0 -12px; }
    #btn-menu:hover span.ln1 { width: 30px; margin: -3px 0 0 -15px; }
    #btn-menu:hover span.ln2 { width: 30px; margin: 3px 0 0 -15px; }
    #btn-menu.on span.ln1 { transform: rotate(45deg); width: 24px; margin: 0 0 0 -15px; }
    #btn-menu.on span.ln2 { transform: rotate(-45deg); width: 24px; margin: 0 0 0 -15px; }
    
    #global-nav { position: fixed; left: 0; top: -100%; width: 100%; height: 100vh; background: rgba(255,255,255,0.925); overflow: hidden; z-index: 1000 }
    #global-nav .inner { position: relative }
    #global-nav ul { padding: 14.4vw 9.6vw 9.6vw; }
    #global-nav ul li { margin-top: -2.3529vw; display: none }
    #global-nav ul li:first-child { margin-top: 0 }
    #global-nav ul li a { position: relative; display: block; padding: 0; top: 0; font-family: Univers, Helvetica, Arial, "sans-serif" }
    #global-nav ul li a .txtl { display: none }
    #global-nav ul li a img { height: 16vw; opacity: 0.5; }
    #global-nav ul li a:hover img { opacity: 1 }
    #global-nav ul li a:hover span { opacity: 1; color: #221815 }
    
    #wrapper {}
    .mov { width: 100%; height: 100vh; background: #fcfcfc; overflow: hidden }
    .mov .btn-play { position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; width: 40px; display: none }
    
    #contents { position: relative; padding: 24px 0 14.4vw }
    #contents .ci-mark { display: none }
    #contents h1 { text-align: center; margin-right: 0; margin-bottom: 6em }
    #contents h1 img { height: 18px }
    #contents .contents-inner { padding: 0 4.8vw }
    
    .lang { padding: 0 4.8vw 10px; text-align: center }
    .f-nav { padding: 0 4.8vw 20px; text-align: center }
    .f-nav a { line-height: 3em }
    .f-nav .sp-none { display: none }
    
    .mov-sp { display: block }
    .mov-sp a { display: block; position: relative }
    .mov-sp a .btn-play { position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px }
    #footer { padding: 30px 4.8vw; }
    #footer .foot { text-align: center }
    #footer .foot p.copyright { font-size: 11px; letter-spacing: 0.06em; text-align: center }
    
    
    .cont h2.cont-tit { position: relative; left: inherit; top: inherit; font-size: 15px; font-weight: 400; text-align: center; }
    .cont h2.cont-tit span { letter-spacing: 0.16em; }
    .cont .cont-inner { position: relative; padding: 9.6vw 0; z-index: 10 }
    .cont .cont-inner .block { margin-bottom: 5em }
    .cont .cont-inner h3 { position: relative; left: inherit; top: inherit; font-size: 16px; letter-spacing: 0.32em; font-weight: 400;
        -ms-writing-mode: inherit;
        writing-mode: inherit
    }
    .cont .cont-inner h3 span { letter-spacing: 0.4em; }
    .cont .cont-inner h4 { font-size: 15px; margin: 2.5em 0 -0.5em; opacity: 0 }
    .cont .cont-inner figure { margin: 2.5em 0 0; opacity: 0 }
    .cont .cont-inner p { margin: 2.5em 0 0; }
    .cont .cont-inner p .txtl { position: relative; display: block; margin-right: -4.8vw; opacity: 0 }
    .cont .cont-inner p .hd { font-size: 10px; }
    p.cap { font-size: 11px; font-weight: 200; font-family: Univers, Helvetica, Arial, "sans-serif" }
    
    #mission { padding-bottom: inherit }
    #mission .cont-inner { min-height: inherit; }
    #mission figure img { width: 80%; height: auto }
    #mission figure.sign img { width: 150px; }
    #mission .vis { position: relative; left: inherit; bottom: inherit; width: 100%; z-index: 0 }
    #mission .vis p.cap { position: absolute; left: 4.8vw; bottom: 2%; }
    #concept .vis { width: 100%; margin-top: 6em }
    #concept figure.sign img { width: 106px; }
    #ci-design .vis { width: 100%; margin-top: 6em }
    #movie .yt { width: 100%; margin-top: 6em }
    #outline .vis { width: calc(100% + 9.6vw); margin: 6em -4.8vw 0; }
    #outline p.cap { margin-top: 1.5em }
    #contact .vis { width: 100%; margin-top: 6em }
    
    .creditWrap { position: fixed; left: 0; top: 0; width: calc(100% - 19.2vw); height: 100vh; padding: 0 9.6vw; background: rgba(255,255,255,0.85); overflow-y: scroll; z-index: 1000; display: none }
    .creditWrap .credit-inner { padding: 9.6vw; }
    .creditWrap .credit-inner p { margin: 0 0 1em; font-style: italic }
    .creditWrap .credit-inner p .txtl { position: relative; display: block; opacity: 0 }
    .creditWrap .credit-inner p .hd { font-size: 11px; }

}


@media screen and (max-width: 375px) {
    body { font-size: 12px; }
}

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

}