@charset "UTF-8";
/* CSS Document */
@import "reset5.css";

body { color: #050404; margin: 0; padding: 0; font-family: UniversNextPro-Regular, Univers, "Helvetica Neue", Helvetica, Arial, source-han-sans-japanese, 'Noto Sans JP', sans-serif; font-size:14px; letter-spacing: 0.08em; line-height: 0; font-weight: 400; -webkit-font-smoothing: antialiased; }
html { min-height: 100%; }
* {word-wrap: break-word; }
*,
*::before,
*::after {
  box-sizing: inherit;
}
img { -ms-interpolation-mode: bicubic; }
/* !font-size 16px default setting */
body { font-size: 12px; letter-spacing: 0.08em; }
p, th, td, li, dt, dd { font-family: UniversNextPro-Light, Univers, "Helvetica Neue", Helvetica, Arial, source-han-sans-japanese, 'Noto Sans JP', sans-serif; font-weight: 300; letter-spacing: 0.06em; line-height: 1.88em; font-feature-settings: "palt" }
li　{ font-family: UniversNextPro-Regular, Univers, "Helvetica Neue", Helvetica, Arial, source-han-sans-japanese, 'Noto Sans JP', sans-serif; }
.ja li, .ja p { letter-spacing: 0.08em; }

h2,h3,h4 { font-weight: 400; line-height: 1.88em; font-feature-settings: "palt" }

/* !clearfix */
hr { display: none; }
.cfix { position: relative; display: block }
.cfix:after{
    content:"";
    display:block;
    clear:both;
}

/* !Links */
a { cursor: pointer }
a:link { color: #050404; text-decoration: none;}
a:visited { color: #050404; text-decoration: none }
a:hover { color: #7c8fd2; text-decoration: underline; }
a:active { color: #2f489e; text-decoration: none }
a.no-ov:hover { color: #050404; text-decoration: none; }

.fd { position: relative; opacity: 0; transform: translateY(8vw); transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s ease-out; }
.fd.active { opacity: 1; transform: translateY(0); }
.zm { transform: scale(1.24); opacity: 0; transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.5s ease-out; }
.zm.active { transform: scale(1); opacity: 1 }
.txtl, .txtl-t { opacity: 0; padding: 0; margin: 0; line-height: 1em }

#wrapper { position: relative; width: 100%; z-index: 10; overflow: hidden }

#header { position: fixed; left: 0; top: 0; width: 100%; margin: 0; padding: 0; z-index: 100; /*mix-blend-mode: difference;*/ }
#header h1 { padding: 40px 4.4vw; }
/*#header h1 img { background: #fff }*/
#header .ico-grid { position: absolute; right: 90px; top: 20px; padding: 20px 10px; transition: all 0.2s; cursor: pointer }
#header .ico-menu { position: absolute; right: 30px; top: 20px; padding: 20px 10px; transition: all 0.2s; cursor: pointer }
#header .ico-grid:hover, #header .ico-menu:hover { transform: scale(1.2) }

#lay { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.9); z-index: 999; display: none }
#intro { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,1); z-index: 10000; }

#grid-nav { position: fixed; left: 0; top: 100vh; width: 100%; height: 100vh; overflow-y: scroll; z-index: 1000; opacity: 0; transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); -ms-overflow-style: none; scrollbar-width: none; }
#grid-nav::-webkit-scrollbar{ display: none; }
#grid-nav.active { top: 0; opacity: 1; transition: all 0.8s cubic-bezier(1, 0, 0, 1);  }
#grid-nav ul {}
#grid-nav ul li { float: left; width: 33.33%; height: 18.5625vw; overflow: hidden; transition: all 0.6s; opacity: 0 }
#grid-nav ul li a { position: relative; display: block; height: 100%; background: url(../img/visual01.jpg) center center; background-size: cover; transition: all 0.2s; cursor: pointer }
#grid-nav ul li a p { position: absolute; left: 1em; bottom: 1em; color: #fff; z-index: 10 }
#grid-nav ul li a p span { line-height: 1.5; display: block }
#grid-nav ul li a .cvr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; z-index: 0; transition: all 0.2s; }
#grid-nav ul li:nth-child(2) a { background: url(../img/visual02.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(3) a { background: url(../img/visual03.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(4) a { background: url(../img/visual04.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(5) a { background: url(../img/visual05.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(6) a { background: url(../img/visual06.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(7) a { background: url(../img/visual07.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(8) a { background: url(../img/visual08.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(9) a { background: url(../img/visual09.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(10) a { background: url(../img/visual10.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(11) a { background: url(../img/visual11.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(12) a { background: url(../img/visual12.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(13) a { background: url(../img/visual13.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(14) a { background: url(../img/visual14.jpg) center center; background-size: cover }
#grid-nav ul li:nth-child(15) a { background: url(../img/visual15.jpg) center center; background-size: cover }
#grid-nav ul li:hover a { transform: scale(0.96); }
#grid-nav ul li:hover a .cvr { opacity: 1 }
#grid-nav .btn-close { position: fixed; right: 20px; top: 10px; padding: 20px; transition: all 0.2s; cursor: pointer; display: none }
#grid-nav .btn-close:hover { transform: scale(1.2) }
#grid-nav.active .btn-close { display: block }

#text-nav { position: fixed; left: 0; top: 100vh; width: 100%; height: 100vh; overflow-y: scroll; background: rgba(0,0,0,0.9); z-index: 1000; opacity: 0; transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); -ms-overflow-style: none; scrollbar-width: none; }
#text-nav::-webkit-scrollbar{ display: none; }
#text-nav.active { top: 0; opacity: 1; transition: all 0.8s cubic-bezier(1, 0, 0, 1);  }
#text-nav .tnav-cont { position: relative; padding: 8.8vw }
#text-nav .tnav-cont h4 { width: 33.33%; float: left; letter-spacing: 0.08em; color: #b5b6b6; margin-top: 4em }
#text-nav .tnav-cont .tnav-inner { width: 33.33%; float: left; }
#text-nav .tnav-cont .tnav-inner p.tt { color: #b5b6b6; font-size: 10px; line-height: 1em; margin-bottom: 3em; opacity: 0.33 }
#text-nav .tnav-cont .tnav-inner ul li { margin-bottom: 6em }
#text-nav .tnav-cont .tnav-inner .ln { display: block; width: 8.8vw; height: 1px; background: #b5b6b6; margin-bottom: 6em; opacity: 0.33 }
#text-nav .tnav-cont .tnav-inner ul.others {  }
#text-nav .tnav-cont .tnav-inner ul li a p span { line-height: 1.5; display: block }
#text-nav a:link { color: #b5b6b6; text-decoration: none;}
#text-nav a:visited { color: #b5b6b6; text-decoration: none }
#text-nav a:hover { color: #7c8fd2; text-decoration: underline; }
#text-nav a:active { color: #2f489e; text-decoration: none }
#text-nav .btn-close { position: fixed; right: 20px; top: 10px; padding: 20px; transition: all 0.2s; cursor: pointer; display: none }
#text-nav .btn-close:hover { transform: scale(1.2) }
#text-nav.active .btn-close { display: block }

.head { position: relative; width: 100%; height: 180px; background: #fff; z-index: 10 }
.sec-top { position: relative; width: 100%; height: 100vh; font-size: 12px; color: #fff; z-index: 10 }
.sec-top a { display: block; position: relative; width: 100%; height: 100vh; color: #fff; }
.sec-top h2 { position: absolute; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0.16em; opacity: 0 }
.sec-top h2 span { display: block; line-height: 1.88em }
.sec-top .outline { position: absolute; left: 58.82%; bottom: 6em }
.sec-top .outline li { line-height: 2em; margin-top: 1em; opacity: 0 }
.sec-top .view-det { position: absolute; right: 0; bottom: 4em; line-height: 1em; display: inline-block; padding-right: 9.4vw; }
.sec-top .view-det .txtl { line-height: 1em }
.sec-top .ln { position: absolute; left: calc(100% - 8.8vw); bottom: 4em; width: 0; height: 1px; background: #b5b6b6; opacity: 0.66 }

#top { overflow: hidden; width: 100%; height: 100vh;  }
#cid1 h2 { left: 58.82%; top: 100px; }
#cid2 h2 { left: 5.58%; top: 160px; }
#cid3 h2 { left: 70%; top: 39.31%; }
#cid4 h2 { right: 10.8%; bottom: 23.4%; }
#cid5 h2 { left: 68.16%; top: 20.28%; }
#cid6 h2 { right: 6.8%; top: 62.8%; }
#cid7 h2 { right: 6.8%; top: 44.64%; }
#cid8 h2 { right: 8.8%; top: 63.13%; }
#cid9 h2 { left: 79.2%; top: 36.4%; }
#cid10 h2 { right: 5.8%; top: 49.92%; }
#cid11 h2 { right: 5.8%; top: 38.48%; }
#cid12 h2 { right: 5.8%; top: 54.38%; }
#cid13 h2 { right: 11.6%; top: 21.56%; }
#cid14 h2 { left: 5.8%; top: 45.31%; }
#cid15 h2 { right: 5.8%; top: 27.08%; }
#cid8, #cid12, #cid13, #cid15, #cid8 a, #cid12 a, #cid13 a, #cid15 a { color: #050404 !important }

#other1 h2 { left: 56%; top: 240px; transform: rotate(-90deg)}
#other1 { color: #050404 !important }
#other2 {}
#other3 h2 { left: 8.8vw; top: 24.2%; }
#other3 h2 span { display: block }
#other3 .cap { position: absolute; left: 8.8vw; top: calc(24.2% + 80px); z-index: 10 }
#other3 { color: #050404 !important }
#other4 h2 { right: 8.8vw; top: 120px; }
#other5 { height: calc(100vh - 180px); }
#other6 h2 { left: 70vw; top: 50%; color: #050404 !important }

.visuals { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #000; z-index: 0; overflow: hidden }
.vis { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; opacity: 0; transform: scale(1.2); transition-duration: 1.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-property: opacity  }
.vis.active { opacity: 1; }
#vis0 { background: url(../img/visual00.jpg) center center; background-size: cover;  }
#vis1 { background: url(../img/visual00_.jpg) center center; background-size: cover;  }
#vis2 { background: url(../img/visual01.jpg) center center; background-size: cover }
#vis3 { background: url(../img/visual02.jpg) center center; background-size: cover }
#vis4 { background: url(../img/visual03.jpg) center center; background-size: cover }
#vis5 { background: url(../img/visual04.jpg) center center; background-size: cover }
#vis6 { background: url(../img/visual05.jpg) center center; background-size: cover }
#vis7 { background: url(../img/visual06.jpg) center center; background-size: cover }
#vis8 { background: url(../img/visual07.jpg) center center; background-size: cover }
#vis9 { background: url(../img/visual08.jpg) center center; background-size: cover }
#vis10 { background: url(../img/visual09.jpg) center center; background-size: cover }
#vis11 { background: url(../img/visual10.jpg) center center; background-size: cover }
#vis12 { background: url(../img/visual11.jpg) center center; background-size: cover }
#vis13 { background: url(../img/visual12.jpg) center center; background-size: cover }
#vis14 { background: url(../img/visual13.jpg) center center; background-size: cover }
#vis15 { background: url(../img/visual14.jpg) center center; background-size: cover }
#vis16 { background: url(../img/visual15.jpg) center center; background-size: cover }
#vis17 { background: url(../img/visual17.jpg) center center; background-size: cover }
#vis18 { background: url(../img/visual18.jpg) center center; background-size: contain }
#vis19 { background: url(../img/visual19.jpg) center center; background-size: cover }
#vis20 { background: url(../img/visual20.jpg) center center; background-size: cover }
#vis21 { background: url(../img/visual21.jpg) center center no-repeat; background-size: contain }
#vis22 { background: url(../img/visual22.jpg) center center no-repeat; background-size: contain }


.footer { position: relative; background: #fff; z-index: 100 }
.footer .backto a { display: block; padding: 6.6vw 0; background: #000; color: #fff; font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; text-align: center }
.footer .foot { padding: 200px 0 100px 8.8vw }
.footer .foot h3 { font-size: 16px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; color: #050404; margin-bottom: 5.8vw }
.footer .foot ul { }
.footer .foot ul li { float: left; width: 16.66%; margin-bottom: 5.8vw; font-weight: 400; }
.footer .foot ul li a { display: block }
.footer .foot ul li:nth-child(1) { font-size: 14px }
.footer .foot ul li:nth-child(2) { font-size: 14px; width: 83.33% }


/* /// /// Lower Contents /// /// */
.main { position: relative; width: 100%; height: 100vh; font-size: 12px; background: #fff; color: #fff }
.main h2 { position: absolute; font-size: 15px; letter-spacing: 0.16em;  font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; opacity: 0; z-index: 10 }

.contents {}
.sec { position: relative; padding: 13.2vw 0 0 }
.sec-inner { position: relative; padding: 0 8.8vw }
.sec:after{
    content:"";
    display:block;
    clear:both;
}
.cap { font-size: 13px; line-height: 1.88em; opacity: 0 }
.cap span { display: block; }
.txts { font-size: 13px; line-height: 1.88em; width: 50vw; opacity: 0 }
.txts:after{
    content:"";
    display:block;
    clear:both;
}
.txts h4 { font-size: 14px; margin-bottom: 1.88em }
.txts .ja { float: left; }
.txts .en { float: right; width: 22.8vw }
.txts span { display: block }
.txts .tx p:first-child { margin-bottom: 3.76em }

.beginning { position: relative; display: block }
.beginning h2 { float: left; font-size: 16px;  font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; margin: 5.86vw 0 0 4.4vw; }
.beginning h2 span { display: block }
.beginning .pic { float: right; width: 64.7% }
.beginning .cap { position: absolute; left: 8.8vw; bottom: 1.88em; }
.beginning:after{
    content:"";
    display:block;
    clear:both;
}
.beginning_ { position: relative; display: block; padding: 4.4vw 4.4vw 0 0 }
.beginning_ h2 { font-size: 16px;  font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; margin: 0 0 2.93vw 4.4vw; }
.beginning_ h2 span { display: block }
.beginning_ .mark { text-align: center }
.beginning_ .cap { margin: 2.93vw 0 0 8.8vw; }
.beginning_:after{
    content:"";
    display:block;
    clear:both;
}
.concept { padding: 13.2vw 4.4vw 0 }
.concept h3 { float: left; font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; }
.concept h3 span { display: block }
.concept .txts { float: right; width: 50.4vw }
.concept .txts .en { width: 23vw }
.concept:after{
    content:"";
    display:block;
    clear:both;
}

.figure { position: relative; text-align: center; margin-bottom: 5.86vw }
.figure p.cap { position: absolute; left: 8.8vw; top: 0; text-align: left }
.figure:last-child { margin-bottom: 0 }

.application { position: relative; display: block }
.application h3 { float: left; font-size: 14px;  font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; margin: 0 0 0 4.4vw; }
.application h3 span { display: block }
.application .pic { float: right; width: 64.7% }
.application .tx-box { position: absolute; left: 8.8vw; top: 17.6vw }
.tx-box p { display: inline-block; vertical-align: top; margin-right: 4em }
.application:after{
    content:"";
    display:block;
    clear:both;
}
.application_ { position: relative; display: block; padding: 13.2vw 4.4vw 0 }
.application_ h3 { font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; margin: 0 0 2.93vw; }
.application_ h3 span { display: block }
.application_ .pic { width: 63.6% }

.advertising h3 { font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; margin: 0 0 0 4.4vw; }
.advertising h3 span { display: block }

.column-two { padding: 13.2vw 2.2vw 0 }
.column-two .box { position: relative; float: left; padding: 0 2.2vw; width: calc(50% - 4.4vw) }
.column-two .box .pic.ml-none { margin-left: -4.4vw }
.column-two-np { padding: 13.2vw 0 0 }
.column-two-np .box { float: left; padding: 0; width: 50% }
.vis-left { padding: 13.2vw 4.4vw 0 }
.vis-left .pic { width: 56vw }
.vis-right { padding: 13.2vw 4.4vw 0 }
.vis-right h3 { float: left; font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; }
.vis-right .pic { float: right; width: 56vw }
.column-two:after, .column-two-np:after, .vis-left:after, .vis-right:after{
    content:"";
    display:block;
    clear:both;
}

.credit h3 { font-size: 14px; font-weight: 400 }
.credit h3 span { display: block }
.credit p { font-size: 13px; line-height: 1.88em; }
.credit p span { display: block }
.credit p span.hd { font-size: 12px }
.contents footer { margin-top: 13.2vw }

#seiki section:nth-child(5) .box:first-child .cap { margin: 1.46vw 0 0 4.4vw }
#seiki section:nth-child(5) .box:last-child .cap { position: absolute; left: -14.7vw; bottom: 8.8vw; }
#seiki section:nth-child(6) .box .cap { margin: 0 0 4.4vw 30vw }
#seiki section:nth-child(6) .box:last-child .cap { margin: 4.4vw 0 0 11.4vw }
#seiki section:nth-child(7) .box { position: relative; padding-top: 7.52em }
#seiki section:nth-child(7) .box:first-child .cap { position: absolute; left: 8.8vw; top: 0 }
#seiki section:nth-child(7) .box:last-child .cap { margin: 2.93vw 0 0 11.4vw }
#seiki section:nth-child(8) .box:first-child .cap { margin: 2.93vw 0 0 4.4vw }
#seiki section:nth-child(8) .box:last-child .cap { margin: 2.93vw 0 0 11.4vw }
#seiki section:nth-child(9) { padding-top: 6.6vw }
#seiki section:nth-child(9) .box:first-child .cap { margin: 2.93vw 0 0 4.4vw }
#seiki section:nth-child(9) .box:last-child .cap { margin: 2.93vw 0 0 11.4vw }
#seiki section:nth-child(10) .cap { position: absolute; left: 72.6vw; top: calc(50% - 4.7em); }
#seiki section:nth-child(11) .cfix { position: relative }
#seiki section:nth-child(11) .tx-box { position: absolute; left: 4.4vw; top: 4.4vw; }
#seiki section:nth-child(11) .tx-box p:last-child { margin-top: 7.52em }
#seiki section:nth-child(11) .txts { padding: 8.8vw 0 0 6.6vw }
#seiki section:nth-child(12) { padding-right: 4.4vw }
#seiki section:nth-child(12) .column-two { padding-top: 4.4vw }
#seiki section:nth-child(12) .column-two .tx-box { margin-left: 8.8vw }
#seiki section:nth-child(12) .column-two .tx-box p:last-child { margin-top: 7.52em }
#seiki section:nth-child(12) .column-two .txts { width: 45.6vw; padding-top: 4.4vw }
#seiki section:nth-child(13) .tx-box { margin: 2.93vw 0 0 8.8vw }
#seiki section:nth-child(13) .tx-box p:last-child { margin-top: 7.52em }
#seiki section:nth-child(14) .tx-box { margin: 2.93vw 0 0 8.8vw }
#seiki section:nth-child(14) .tx-box p:last-child { margin-top: 5.64em }
#seiki section:nth-child(15) .tx-box { margin: 2.93vw 0 0 8.8vw }
#seiki section:nth-child(15) .tx-box p:last-child { margin-top: 5.64em }
#seiki section:nth-child(15) .txts { width: 43.4vw }
#seiki section:nth-child(15) .txts .en { width: auto }
#seiki section:nth-child(16) .cap { position: absolute; left: 8.8vw; bottom: 0; }
#seiki section:nth-child(17) { padding: 13.2vw 8.8vw 0 }
#seiki section:nth-child(17) .cap { margin-top: 2.93vw }
#seiki section:nth-child(18) .credit { margin-left: 63.6% }
#seiki section:nth-child(18) .credit h3 { margin-bottom: 9.4em }
#seiki section:nth-child(18) .marks1 { position: absolute; left: 1.5vw; top: calc(13.2vw + 9.4em); width: 97vw }
#seiki section:nth-child(18) .marks2 { position: absolute; left: 52.2%; bottom: 0; width: 2.93vw }
#seiki .backto a { background: url(../img/visual01.jpg) center center; background-size: cover; background-attachment: fixed }

#alvion-art section:nth-child(3) .figure img { margin-top: -13.2vw }
#alvion-art section:nth-child(3) .figure { margin-bottom: 2em }
#alvion-art section:nth-child(3) .sec-inner .cap:last-child { margin: 2em 0 0 calc(23% - 4em) }
#alvion-art section:nth-child(4) { padding: 13.2vw 4.4vw 0 }
#alvion-art section:nth-child(4) .cap { margin: 2.93vw 0 0 4.4vw }
#alvion-art section:nth-child(5) { padding: 13.2vw 4.4vw 0 }
#alvion-art section:nth-child(5) .cap { margin: 2.93vw 0 0 65% }
#alvion-art section:nth-child(6) { padding-bottom: 30vw }
#alvion-art section:nth-child(6) .credit { position: absolute; left: 35.25%; top: 22vw }
#alvion-art section:nth-child(6) .credit p.wht { margin: 39vw 0 11.28em }
#alvion-art section:nth-child(6) .mark { position: absolute; left: 35.25%; top: 30.8vw; width: 36.4%; }
#alvion-art .backto a { background: url(../img/visual02.jpg) center center; background-size: cover; background-attachment: fixed }

#sumida-triphony-hall section:nth-child(3) h3 { font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; margin: 0 }
#sumida-triphony-hall section:nth-child(3) h3 span { display: block }
#sumida-triphony-hall section:nth-child(3) .cap { margin: 2em 0 0 4.4vw }
#sumida-triphony-hall section:nth-child(3) .txts { float: none;  width: 43.4vw; margin-top: 2.93vw }
#sumida-triphony-hall section:nth-child(3) .txts .ja, #sumida-triphony-hall section:nth-child(3) .txts .en { width: 50% }
#sumida-triphony-hall section:nth-child(4) { padding: 13.2vw 4.4vw 0 0 }
#sumida-triphony-hall section:nth-child(4) .cap { margin: 0 0 2.93vw 8.8vw }
#sumida-triphony-hall section:nth-child(5) .cap { margin: 0 0 2.93vw 8.8vw }
#sumida-triphony-hall section:nth-child(5) .marks { position: absolute; right: 0; top: 26.4vw; width: 36.4%; }
#sumida-triphony-hall section:nth-child(6) .credit { margin-left: 4.4vw }
#sumida-triphony-hall section:nth-child(6) .credit figure { width: 25vw; margin: 3.76em 0 1.88em -4.4vw }
#sumida-triphony-hall section:nth-child(6) .credit figure .cap { margin-left: 25vw; width: 100% }
#sumida-triphony-hall .backto a { background: url(../img/visual03.jpg) center center; background-size: cover; background-attachment: fixed }

#sunshine section:nth-child(2) { height: 60vw }
#sunshine section:nth-child(2) .txts { width: 43.4vw }
#sunshine section:nth-child(2) .txts .en { width: auto }
#sunshine section:nth-child(2) .marks { position: absolute; left: 13.2vw; top: 21vw; width: 26.4vw }
#sunshine section:nth-child(2) .marks .cap { position: absolute; left: 26.4vw; bottom: 4.4vw; width: 100% }
#sunshine section:nth-child(3) { padding-bottom: 7.56em }
#sunshine section:nth-child(3) .pic { width: 77.7%; }
#sunshine section:nth-child(3) .cap { position: absolute; left: 8.8vw; top: 21vw }
#sunshine section:nth-child(3) .cap.last { position: absolute; left: 8.8vw; top: auto; bottom: 0 }
#sunshine section:nth-child(4) .pic { float: left; width: 63.6%; }
#sunshine section:nth-child(4) .credit { float: left; margin: 4.4vw 0 0 8.8vw }
#sunshine section:nth-child(4) .credit h3 { margin-bottom: 3.76em }
#sunshine .backto a { background: url(../img/visual04.jpg) center center; background-size: cover; background-attachment: fixed }

#cpm section:nth-child(1) .pic { width: 60.3%; margin: 4.4vw 4.4vw 0 0 }
#cpm section:nth-child(1) .tx-box { position: absolute; left: 4.4vw; bottom: 0 }
#cpm section:nth-child(1) .tx-box .cap { position: relative; left: inherit; top: inherit; }
#cpm section:nth-child(1) .tx-box .cap:last-child { margin-top: 5.64em }
#cpm section:nth-child(3) { padding-top: 0 }
#cpm section:nth-child(3) .figure:nth-child(1) { text-align: left; margin-bottom: 0 }
#cpm section:nth-child(3) .figure:nth-child(1) .cap { position: relative; left: 8.8vw; top: 0; margin-bottom: 3.76em }
#cpm section:nth-child(3) .figure:nth-child(2) { padding-right: 8.8vw; margin-top: -22vw }
#cpm section:nth-child(3) .figure:nth-child(2) .cap { left: auto; right: 8.8vw; top: 35.2vw; }
#cpm section:nth-child(4) .credit { margin-left: 35.3% }
#cpm section:nth-child(4) .credit .pic { width: 47vw; margin: 4.7em 0 4.7em -8.8vw }
#cpm .backto a { background: url(../img/visual05.jpg) center center; background-size: cover; background-attachment: fixed }

#alive section:nth-child(1) .pic { width: 60.3%; margin: 4.4vw 4.4vw 0 0 }
#alive section:nth-child(3) .cap { position: absolute; left: calc(63.6% + 4.4vw); bottom: 0 }
#alive section:nth-child(3) .txts { float: right; margin-top: 6.6vw }
#alive section:nth-child(4) .box:nth-child(3), #alive section:nth-child(4) .box:nth-child(4) { margin-top: 4.4vw }
#alive section:nth-child(5) { padding-top: 6.6vw }
#alive section:nth-child(5) .txts { float: left; margin-left: 8.8vw }
#alive section:nth-child(5) .credit { float: right; width: 24.4vw; margin-top: 3.76em }
#alive section:nth-child(5) .credit .mark { width: 19vw; margin: 4.4vw 0 4.4vw -4.4vw }
#alive .backto a { background: url(../img/visual06.jpg) center center; background-size: cover; background-attachment: fixed }

#ci-renesscence section:nth-child(1) .mark { margin-left: 4.4vw }
#ci-renesscence section:nth-child(3) { padding-bottom: 7.56em }
#ci-renesscence section:nth-child(3) h3 { float: none; position: absolute; left: 0; top: 13.2vw; }
#ci-renesscence section:nth-child(3) .txts { position: absolute; left: 8.8vw; top: 22vw; width: 22vw }
#ci-renesscence section:nth-child(3) .txts p:first-child { margin-bottom: 3.76em }
#ci-renesscence section:nth-child(3) .pic { width: 60.3%; margin: 0 4.4vw 0 0 }
#ci-renesscence section:nth-child(3) .cap { position: absolute; left: 8.8vw; top: 17.6vw }
#ci-renesscence section:nth-child(3) .cap.last { position: absolute; left: 13.2vw; top: auto; bottom: 0 }
#ci-renesscence section:nth-child(4) .cap { margin: 2.93vw 0 0 13.2vw }
#ci-renesscence section:nth-child(5) .txts { width: 50vw; margin: 0 0 6.6vw 22vw }
#ci-renesscence section:nth-child(5) .box:nth-child(3), #ci-renesscence section:nth-child(5) .box:nth-child(4) { margin-top: 4.4vw }
#ci-renesscence section:nth-child(6) .txts { margin-left: 4.4vw }
#ci-renesscence section:nth-child(6) .txts p:first-child { margin-bottom: 3.76em }
#ci-renesscence section:nth-child(6) .credit h3, #ci-renesscence section:nth-child(6) .credit p { margin-left: 46.6% }
#ci-renesscence section:nth-child(6) .credit .pic { width: calc(100% + 8.8vw); margin: 4.7em -4.4vw }
#ci-renesscence .backto a { background: url(../img/visual07.jpg) center center; background-size: cover; background-attachment: fixed }

#work-brain section:nth-child(3) { padding-bottom: 15.4vw; }
#work-brain section:nth-child(3) .pic { width: 60.3%; margin: 0 4.4vw 0 0 }
#work-brain section:nth-child(3) .pic .cap { margin: 2.93vw 0 0 37.3vw }
#work-brain section:nth-child(3) .txts { position: absolute; left: 8.8vw; top: 17.6vw; width: 22vw }
#work-brain section:nth-child(3) .txts p:first-child { margin-bottom: 3.76em }
#work-brain section:nth-child(3) .marks { position: absolute; left: 8.8vw; bottom: 0; width: 300px; }
#work-brain section:nth-child(3) .marks .box { width: 150px; float: left }
#work-brain section:nth-child(3) .marks .box:last-child { margin-top: 9.4em }
#work-brain section:nth-child(3) .marks .box img { margin-top: 1.88em }
#work-brain section:nth-child(4) .cap { margin: 2.93vw 0 0 6.6vw }
#work-brain section:nth-child(5) { padding: 13.2vw 4.4vw 0 }
#work-brain section:nth-child(6),#work-brain section:nth-child(7),#work-brain section:nth-child(8),#work-brain section:nth-child(9),#work-brain section:nth-child(10) { padding: 6.6vw 4.4vw 0 }
#work-brain section:nth-child(5) .cap, #work-brain section:nth-child(6) .cap, #work-brain section:nth-child(7) .cap, #work-brain section:nth-child(8) .cap, #work-brain section:nth-child(9) .cap, #work-brain section:nth-child(10) .cap { margin: 2.93vw 0 0 4.4vw }
#work-brain section:nth-child(11) .box .portrait { margin-top: 11vw }
#work-brain section:nth-child(11) .box .cap { margin: 6.6vw 0 0 4.4vw }
#work-brain section:nth-child(11) .box.last .cap { margin: 2.93vw 0 0 11.4vw }
#work-brain section:nth-child(11) .txts { margin: 4.4vw 0 0 6.6vw }
#work-brain section:nth-child(12) .cap { margin: 0 0 2.93vw 8.8vw }
#work-brain section:nth-child(12) .box.last { margin-top: 4.4vw }
#work-brain section:nth-child(12) .cap.last { margin: 2.93vw 0 0 64.7% }
#work-brain section:nth-child(13) .tx-box { margin-top: 8.8vw; }
#work-brain section:nth-child(13) .tx-box .cap:last-child { margin-top: 5.64em }
#work-brain section:nth-child(13) .autograph { width: 17.6vw; margin-top: 4.4vw }
#work-brain section:nth-child(14) { padding-top: 0 }
#work-brain section:nth-child(14) .credit { margin-left: 72.6vw }
#work-brain section:nth-child(14) .credit .pic { margin: 4.7em 0 4.7em -6.6vw }
#work-brain section:nth-child(14) .message { position: absolute; left: calc(50% - 2.2vw); top: 24vw; }
#work-brain .backto a { background: url(../img/visual08.jpg) center center; background-size: cover; background-attachment: fixed }

#nic section:nth-child(2) .mark { position: absolute; width: 22vw; left: 8.8vw; bottom: 0 }
#nic section:nth-child(2) .mark .cap { position: absolute; left: 26.4vw; bottom: -1.88em; width: 100%; }
#nic section:nth-child(3) .cfix { margin: 0 -4.4vw }
#nic section:nth-child(3) .box { position: relative; float: left; padding: 0; width: 44% }
#nic section:nth-child(3) .box .cap { margin: 0 0 2.93vw 8.8vw }
#nic section:nth-child(3) .box .cap.last { margin: 2.93vw 0 0 8.8vw }
#nic section:nth-child(3) .box .pic { width: 100% }
#nic section:nth-child(3) .box:last-child { width: calc(56% - 8.8vw); padding: 0 4.4vw}
#nic section:nth-child(4) { padding: 13.2vw 8.8vw 0 }
#nic section:nth-child(5) { padding-top: 8.8vw }
#nic section:nth-child(5) .box:last-child { width: calc(100% - 4.4vw); margin-top: 4.4vw }
#nic section:nth-child(5) .box:last-child .cap { margin: 2.93vw 0 0 4.4vw }
#nic section:nth-child(6) .box { position: relative; float: left; padding: 0; width: 44% }
#nic section:nth-child(6) .box .cap { margin: 0 0 2.93vw 8.8vw }
#nic section:nth-child(6) .box .cap.last { margin: 2.93vw 0 0 8.8vw }
#nic section:nth-child(6) .box:last-child { width: calc(56% - 8.8vw); padding: 0 4.4vw}
#nic section:nth-child(7) .credit { margin-left: 44% }
#nic section:nth-child(7) .credit .mark { position: relative; width: 24vw; margin: 4.7em -4.4vw }
#nic section:nth-child(7) .credit .mark .cap { position: absolute; left: 28.4vw; bottom: -3.76em; width: 100%; }
#nic .backto a { background: url(../img/visual09.jpg) center center; background-size: cover; background-attachment: fixed }

#vok section:nth-child(3) .txts { position: absolute; left: 8.8vw; top: 50%; margin-top: -13.16em }
#vok section:nth-child(3) .txts p:first-child { margin-bottom: 3.76em }
#vok section:nth-child(3) .cap { position: absolute; left: 8.8vw; bottom: 1.88em; }
#vok section:nth-child(4) .box .cap { margin: 2.93vw 0 0 4.4vw }
#vok section:nth-child(5) .cap { position: absolute; left: 35.3%; top: 17.6vw; color: #fff; z-index: 10 }
#vok section:nth-child(6) .box .cap { margin: 2.93vw 0 0 4.4vw }
#vok section:nth-child(6) .box .credit { margin-left: 24vw }
#vok section:nth-child(6) .box .credit .mark { position: relative; width: 32vw; margin: 4.7em 0 4.7em -13.2vw }
#vok .backto a { background: url(../img/visual10.jpg) center center; background-size: cover; background-attachment: fixed }

#plabi section:nth-child(1) .pic{ width: 60.3%; margin: 4.4vw 4.4vw 0 0 }
#plabi section:nth-child(2) h3 { margin-top: 4.4vw }
#plabi section:nth-child(2) .mark { position: absolute; width: 24vw; left: 40%; top: 8.8vw }
#plabi section:nth-child(2) .mark .cap { position: absolute; left: 24vw; top: 8.8vw; width: 100% }
#plabi section:nth-child(2) .mark .cap span.last { margin-left: 4em }
#plabi section:nth-child(2) .txts { margin-top: 17.6vw }
#plabi section:nth-child(2) .txts .ja { margin-top: 13.2vw }
#plabi section:nth-child(3) .pic { width: 72.6vw; margin-left: -4.4vw }
#plabi section:nth-child(3) .cap { position: absolute; left: 77vw; top: 26.4vw }
#plabi section:nth-child(4) .cap { margin: 0 0 2.93vw 8.8vw }
#plabi section:nth-child(5) .box:last-child { float: right; width: 41.6vw }
#plabi section:nth-child(5) .box .credit { margin-top: 4.4vw }
#plabi section:nth-child(5) .box .credit h3, #plabi section:nth-child(5) .box .credit p { margin-left: 18vw }
#plabi section:nth-child(5) .box .credit .mark { margin: 4.7em 0 }
#plabi .backto a { background: url(../img/visual11.jpg) center center; background-size: cover; background-attachment: fixed }

#personal-marks section:nth-child(3) .pic { width: 59.2vw; margin-left: 4.4vw }
#personal-marks section:nth-child(3) .txts { position: absolute; left: 72.6vw; top: 50% }
#personal-marks section:nth-child(3) .txts p:first-child { margin-bottom: 3.76em }
#personal-marks section:nth-child(4) h3 { position: absolute; left: 4.4vw; top: 13.2vw; }
#personal-marks section:nth-child(4) .txts { width: 37.5vw; margin-left: 35.3% }
#personal-marks section:nth-child(4) .txts .en { width: auto }
#personal-marks section:nth-child(4) .pic { position: relative; width: calc(100% + 8.8vw); margin: 6.6vw -4.4vw 0 }
#personal-marks section:nth-child(4) .pic .cap { position: absolute; right: 4.4vw; bottom: 6.6vw }
#personal-marks section:nth-child(4) .pic .cap span.last { margin-left: 14em }
#personal-marks .backto a { background: url(../img/visual12.jpg) center center; background-size: cover; background-attachment: fixed }

#dalai-lama section:nth-child(1) .txts { float: right; margin-right: 4.4vw }
#dalai-lama section:nth-child(2) { padding-bottom: 13.2vw }
#dalai-lama section:nth-child(2) .txts { float: none; position: absolute; left: 25.4vw; top: 21vw }
#dalai-lama section:nth-child(2) .txts p:first-child { margin-bottom: 3.76em }
#dalai-lama section:nth-child(2) .mark { position: absolute; left: 4.4vw; bottom: 0; width: 12.6vw }
#dalai-lama section:nth-child(2) .mark .cap { position: absolute; left: 21vw; bottom: 4.4vw; width: 100% }
#dalai-lama section:nth-child(2) .pic { float: right; width: 50%; margin-left: 2.2vw }
#dalai-lama section:nth-child(3) .pic { float: left; width: 72.6vw }
#dalai-lama section:nth-child(3) .pic .cap { margin: 2.93vw 0 0 8.8vw }
#dalai-lama section:nth-child(3) .credit { float: left; margin: 4.4vw 0 0 8.8vw }
#dalai-lama section:nth-child(3) .credit h3 { margin-bottom: 3.76em }
#dalai-lama .backto a { background: url(../img/visual13.jpg) center center; background-size: cover; background-attachment: fixed }

#yoshikazu-sasaki section:nth-child(1) .pic{ width: 60.3%; margin: 4.4vw 4.4vw 0 0 }
#yoshikazu-sasaki section:nth-child(3) .pic { width: 72.6% }
#yoshikazu-sasaki section:nth-child(3) .cap { position: absolute; left: calc(72.6% + 8.8vw); top: 21vw }
#yoshikazu-sasaki section:nth-child(4) .txts { position: absolute; left: 8.8vw; top: calc(50% + 6.6vw - 1.88em) }
#yoshikazu-sasaki section:nth-child(4) .pic { float: right; width: 43.4vw; margin-right: 8.8vw }
#yoshikazu-sasaki section:nth-child(5) { color: #fff }
#yoshikazu-sasaki section:nth-child(5) h3 { position: absolute; left: 8.8vw; top: 42vw; z-index: 10; font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; }
#yoshikazu-sasaki section:nth-child(5) h3 span { display: block }}
#yoshikazu-sasaki section:nth-child(5) .pic { position: relative; z-index: 0 }
#yoshikazu-sasaki section:nth-child(5) .tx-box { position: absolute; left: 28.6vw; bottom: 4.4vw; z-index: 10 }
#yoshikazu-sasaki section:nth-child(6) { padding: 13.2vw 4.4vw 0 }
#yoshikazu-sasaki section:nth-child(6) .tx-box { margin: 2.93vw 0 0 56vw }
#yoshikazu-sasaki section:nth-child(7) .pic { width: 64.8% }
#yoshikazu-sasaki section:nth-child(7) .txts { position: absolute; left: 72.6vw; top: 17.6vw }
#yoshikazu-sasaki section:nth-child(8) .pic { width: 64.8% }
#yoshikazu-sasaki section:nth-child(8) .txts { position: absolute; left: 72.6vw; top: 17.6vw }
#yoshikazu-sasaki section:nth-child(9) .pic { width: 64.8% }
#yoshikazu-sasaki section:nth-child(9) .txts { position: absolute; left: 72.6vw; top: 17.6vw }
#yoshikazu-sasaki section:nth-child(9) .cap { position: absolute; left: 72.6vw; bottom: 1.88em }
#yoshikazu-sasaki section:nth-child(10) { padding: 13.2vw 4.4vw 0 }
#yoshikazu-sasaki section:nth-child(10) .pic .tx-box { margin: 2.93vw 0 0 13.2vw }
#yoshikazu-sasaki section:nth-child(11) { padding-top: 0 }
#yoshikazu-sasaki section:nth-child(11) .credit { margin: 2.2vw 0 0 72.6vw }
#yoshikazu-sasaki section:nth-child(11) .credit h3 { margin-bottom: 3.76em }
#yoshikazu-sasaki .backto a { background: url(../img/visual14.jpg) center center; background-size: cover; background-attachment: fixed }

#king-of-thailand section:nth-child(1) .pic { width: 60.3%; margin: 4.4vw 4.4vw 0 0 }
#king-of-thailand section:nth-child(2) { padding-bottom: 18.4vw }
#king-of-thailand section:nth-child(2) .txts { width: 47.8vw }
#king-of-thailand section:nth-child(2) .grid { position: absolute; left: 2.2vw; bottom: 0; width: 50vw; }
#king-of-thailand section:nth-child(2) .grid .cap { position: absolute; left: 54.4vw; bottom: 0; width: 100% }
#king-of-thailand section:nth-child(3) { padding: 13.2vw 0 0 4.4vw }
#king-of-thailand section:nth-child(3) .cap { margin: 2.93vw 0 0 4.4vw }
#king-of-thailand section:nth-child(4) { padding: 6.6vw 4.4vw 0 }
#king-of-thailand section:nth-child(4) .cap { margin: 2.93vw 0 0 59.2% }
#king-of-thailand section:nth-child(4) .cap span.second { margin-left: 7em }
#king-of-thailand section:nth-child(4) .cap span.last { margin-left: 5.5em }
#king-of-thailand section:nth-child(5) { padding: 6.6vw 4.4vw 0 }
#king-of-thailand section:nth-child(5) .tx-box { margin: 2.93vw 0 0 calc(50% + 4.4vw) }
#king-of-thailand section:nth-child(5) .txts { margin: 0 0 0 4.4vw; width: 42vw }
#king-of-thailand section:nth-child(6) .cap { margin: 2.93vw 0 0 4.4vw }
#king-of-thailand section:nth-child(6) .txts { margin: 4.4vw 0 0; }
#king-of-thailand section:nth-child(6) .txts .en { width: 50% }
#king-of-thailand section:nth-child(7) .pic { width: 72.6% }
#king-of-thailand section:nth-child(7) .pic .cap { margin: 2.93vw 0 0 8.8vw }
#king-of-thailand section:nth-child(7) .pic .txts { margin: 2.93vw 0 0 8.8vw; width: 42vw }
#king-of-thailand section:nth-child(7) .credit { position: absolute; left: calc(72.6% + 8.8vw); top: 17.6vw }
#king-of-thailand section:nth-child(7) .credit h3 { margin-bottom: 3.76em }
#king-of-thailand .backto a { background: url(../img/visual15.jpg) center center; background-size: cover; background-attachment: fixed }

/*OTHERS*/
.block { padding: 13.2vw 4.4vw 0 }
.block h2 { float: left; font-size: 16px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; letter-spacing: 0.08em; }
.block h2 span { display: block }
.block h3 { float: left; font-size: 14px; font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500; }
.block h3 span { display: block }
.block .txts { float: right; width: 50.4vw }
.block .txts .sign { width: 50%; margin-top: 1.88em }
.block .txts .en { width: 23vw }
.block .txts strong { font-family: UniversNextPro-Medium, source-han-sans-japanese, sans-serif; font-weight: 500 !important }
.block:after{
    content:"";
    display:block;
    clear:both;
}
#preface .block .txts { margin-top: 8.8vw }
#preface .mark { position: absolute; left: 8.8vw; top: 17.6vw; width: 30.8vw }
#preface .mark .cap { position: absolute; left: 8.8vw; bottom: -3.76em; }
#praise section:nth-child(5) { padding-bottom: calc( 58.8vw + 3.76em ) }
#praise section:nth-child(5) .txts .en { margin-top: 11.28em }
#praise section:nth-child(5) .pic { position: absolute; left: 13.2vw; bottom: 0; width: 50vw; padding-bottom: 3.76em }
#praise section:nth-child(5) .pic .cap { position: absolute; right: 0; bottom: 0 }
#interview section:nth-child(1) .cap { position: absolute; left: 4.4vw; top: 22vw; }
#interview section:nth-child(2n) .txts { margin-right: 27.4vw }
#biography section:nth-child(2) .txts { margin-right: 27.4vw }
#biography section:nth-child(4) { padding: 13.2vw 0 0; width: 100% }
#biography section:nth-child(4) .pic { width: 60.3% }
#biography section:nth-child(4) .txts { float: none; width: 22vw; position: absolute; right: 4.4vw; bottom: calc(7.33vw + 7.52em); }
#biography section:nth-child(4) .tx-box { margin: 2.93vw 0 0 13.2vw }
#biography section:nth-child(4) .tx-box p:last-child { margin-top: 5.64em }
#afterword section:nth-child(1) .txts .en { margin-top: 9.4em }
#credit section:nth-child(2n) .txts { margin-right: 27.4vw }
#credit .txts span.hd { font-size: 12px }
.wht { color: #fff }


@media screen and (max-width: 780px) {
    
    body { font-size: 13px; letter-spacing: 0.04em; }
    p, th, td, li, dt, dd { line-height: 1.66em; letter-spacing: 0.04em; }
    .ja li, .ja p { letter-spacing: 0.08em; }
    h2,h3,h4 { font-weight: 400; line-height: 1.48em; font-feature-settings: "palt" }
    
    
    a { text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }

    #header { position: fixed; left: 0; top: 0; width: 100%; margin: 0; padding: 0; z-index: 100; /*mix-blend-mode: difference;*/ }
    #header h1 { padding: 20px 4vw; }
    #header h1 img { height: 10px }
    #header .ico-grid { right: 50px; top: 12px; padding: 10px; }
    #header .ico-menu { right: 0; top: 12px; padding: 10px; }
    #header .ico-grid img, #header .ico-menu img { height: 8px }
    
    #grid-nav ul li { float: left; width: 50%; height: 50vw; }
    #grid-nav ul li p { font-size: 11px }
    #grid-nav .btn-close { position: fixed; right: 0; top: 0; padding: 12px; }
    
    #text-nav .tnav-cont { padding: 8vw }
    #text-nav .tnav-cont h4 { width: 100%; float: left; letter-spacing: 0.06em; margin-top: 4em }
    #text-nav .tnav-cont .tnav-inner { width: 50%; float: left; }
    #text-nav .tnav-cont .tnav-inner p.tt { font-size: 10px; line-height: 1em; margin-bottom: 3em; opacity: 0.33 }
    #text-nav .tnav-cont .tnav-inner ul li { margin-bottom: 3em }
    #text-nav .tnav-cont .tnav-inner .ln { display: block; width: 8vw; height: 1px; background: #b5b6b6; margin-bottom: 6em; opacity: 0.33 }
    #text-nav .tnav-cont .tnav-inner ul li a p span { line-height: 1.5; font-size: 11px }
    #text-nav .btn-close { position: fixed; right: 0; top: 0; padding: 12px; }

    
    .head { height: 80px }
    .sec-top h2 { font-size: 14px; letter-spacing: 0.08em; left: 8vw !important; top: calc(50vh + 12vw) !important; color: #fff !important }
    .sec-top h2 span { display: block; line-height: 1.48em }
    .sec-top a { color: #fff !important }
    .sec-top .outline { position: absolute; left: 12vw; bottom: inherit; top: 66.66vh }
    .sec-top .outline li { line-height: 2em; margin-top: 1em; opacity: 0 }
    .sec-top .view-det { position: absolute; right: 0; bottom: 8vw; line-height: 1em; display: inline-block; padding-right: 16vw; }
    .sec-top .view-det .txtl { line-height: 1em; }
    .sec-top .ln { position: absolute; left: calc(100% - 12vw); bottom: 8vw; }
    
    .visuals { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #000; z-index: 0; overflow: hidden }
    .vis { position: absolute; left: 0; top: 0; width: 100%; height: 50vh; opacity: 0; }
    #cid8, #cid12, #cid13, #cid15, #cid8 a, #cid12 a, #cid13 a, #cid15 a { color: #fff !important }
    
    .footer .backto a { display: block; padding: 16vw 0; background: #000; color: #fff; font-size: 13px; }
    .footer .foot { padding: 120px 0 60px 4vw }
    .footer .foot h3 { font-size: 14px; margin-bottom: 6vw }
    .footer .foot ul li { float: left; width: 50%; margin-bottom: 6vw; font-size: 11px }
    .footer .foot ul li:nth-child(1) { font-size: 13px }
    .footer .foot ul li:nth-child(2) { font-size: 13px; width: 50% }
    
    
    /* /// /// Lower Contents /// /// */
    .main { width: 100%; height: 50vh; font-size: 11px; }
    .main h2 { font-size: 14px; letter-spacing: 0.08em; }
    
    .sec { position: relative; padding: 16vw 0 0 }
    .sec-inner { position: relative; padding: 0 4vw }
    .cap { font-size: 11px; line-height: 1.66em; opacity: 0 }
    .txts { font-size: 12px; line-height: 1.66em; width: 100%; opacity: 0; }
    .txts h4 { font-size: 12px; margin-bottom: 1.48em }
    .txts .ja { float: none; padding: 4vw }
    .txts .en { float: none; width: auto; padding: 4vw }
    .txts span { display: block }
    .txts .tx p:first-child { margin-bottom: 3.76em }
    
    .beginning { position: relative; display: block }
    .beginning h2 { float: none; font-size: 14px; letter-spacing: 0.06em; margin: 6vw 0 6vw 4vw; }
    .beginning .pic { float: none; width: 100% }
    .beginning .cap { position: relative; left: inherit; bottom: inherit; margin: 1.66em 0 0 4vw }
    
    .beginning_ { position: relative; display: block; padding: 4.4vw 4.4vw 0 0 }
    .beginning_ h2 { font-size: 14px; letter-spacing: 0.06em; margin: 0 0 2.93vw 4.4vw; }
    .beginning_ h2 span { display: block }
    .beginning_ .mark { text-align: center }
    .beginning_ .cap { margin: 1.66em 0 0 8vw; }
    
    .concept { padding: 16vw 4vw 0 }
    .concept h3 { float: none; font-size: 13px; padding: 4vw 0; }
    .concept .txts { float: none; width: 100% }
    .concept .txts .en { width: auto }
    
    .figure { position: relative; text-align: center; padding: 0 4vw; }
    .figure img { width: 100% }
    .figure p.cap { position: relative; left: inherit; top: inherit; text-align: left; margin: 1.66em 0 0 4vw; }
    .figure:last-child { margin-bottom: 0 }
    
    .application { position: relative; display: block }
    .application h3 { float: none; font-size: 14px; letter-spacing: 0.06em; margin: 0; padding: 4vw; }
    .application .pic { float: right; width: 100% }
    .application .tx-box { position: relative; left: inherit; top: inherit }
    .tx-box p { display: inline-block; vertical-align: top; margin-right: 4em }
    
    .application_ { position: relative; display: block; padding: 16vw 4vw 0 }
    .application_ h3 { font-size: 14px; letter-spacing: 0.06em; margin: 0; padding: 4vw }
    .application_ .pic { width: 100% }
    
    .advertising h3 { font-size: 14px; letter-spacing: 0.06em; margin: 0; padding: 4vw }
    .advertising h3 span { display: block }
    
    .column-two { padding: 16vw 2vw 0 }
    .column-two .box { position: relative; float: left; padding: 0 2vw; width: calc(50% - 4vw) }
    .column-two .box .pic.ml-none { margin-left: -4vw }
    .column-two-np { padding: 16vw 0 0 }
    .column-two-np .box { float: left; padding: 0; width: 50% }
    .vis-left { padding: 16vw 4vw 0 }
    .vis-left .pic { width: 56vw }
    .vis-right { padding: 16vw 4vw 0 }
    .vis-right h3 { float: left; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; padding: 4vw 0; }
    .vis-right .pic { float: right; width: 56vw }
    
    .credit h3 { font-size: 14px; font-weight: 400 }
    .credit h3 span { display: block }
    .credit p { font-size: 12px; line-height: 1.66em; }
    .credit p span { display: block }
    .credit p span.hd { font-size: 12px }
    .contents footer { margin-top: 16vw }
    
    #seiki section:nth-child(4) .tx-box { margin: 0 0 4vw 8vw }
    #seiki section:nth-child(5) .box:first-child .cap { margin: 1.66em 0 0 4vw }
    #seiki section:nth-child(5) .box:last-child .cap { position: absolute; left: -28vw; bottom: 4vw; }
    #seiki section:nth-child(6) .box .cap { margin: 0 0 4vw 28vw }
    #seiki section:nth-child(6) .box:last-child .cap { margin: 1.66em 0 0 12vw }
    #seiki section:nth-child(7) .box { position: relative; padding-top: 5.86em }
    #seiki section:nth-child(7) .box:first-child .cap { position: absolute; left: 8vw; top: 0 }
    #seiki section:nth-child(7) .box:last-child .cap { margin: 1.66em 0 0 12vw }
    #seiki section:nth-child(8) .box:first-child .cap { margin: 1.66em 0 0 4vw }
    #seiki section:nth-child(8) .box:last-child .cap { margin: 1.66em 0 0 12vw }
    #seiki section:nth-child(9) { padding-top: 6vw }
    #seiki section:nth-child(9) .box:first-child .cap { margin: 1.66em 0 0 4vw }
    #seiki section:nth-child(9) .box:last-child .cap { margin: 1.66em 0 0 12vw }
    #seiki section:nth-child(10) .cap { position: absolute; left: 72.6vw; top: calc(50% - 4.98em); }
    #seiki section:nth-child(11) .cfix { position: relative }
    #seiki section:nth-child(11) .tx-box { position: absolute; left: 0; top: 16vw; }
    #seiki section:nth-child(11) .tx-box p:last-child { margin: 1.66em 0 0; display: block }
    #seiki section:nth-child(11) .txts { padding: 8vw 0 0 4vw }
    #seiki section:nth-child(12) { padding-right: 4vw }
    #seiki section:nth-child(12) .column-two { padding-top: 4vw }
    #seiki section:nth-child(12) .column-two .tx-box { margin-left: 0 }
    #seiki section:nth-child(12) .column-two .tx-box p:last-child { margin-top: 1.66em }
    #seiki section:nth-child(12) .column-two .txts { width: 64vw; padding-top: 4vw; margin-left: -12vw; }
    #seiki section:nth-child(13) { padding: 16vw 0 0 }
    #seiki section:nth-child(13) .box { padding: 0; width: calc(50%) }
    #seiki section:nth-child(13) .tx-box { margin: 1.66em 0 0 8vw }
    #seiki section:nth-child(13) .tx-box p:last-child { margin-top: 1.66em }
    #seiki section:nth-child(14) { padding: 16vw 0 0 }
    #seiki section:nth-child(14) .box { padding: 0; width: calc(50%) }
    #seiki section:nth-child(14) .tx-box { margin: 1.66em 0 0 8.8vw }
    #seiki section:nth-child(14) .tx-box p:last-child { margin-top: 1.66em }
    #seiki section:nth-child(15) { padding: 16vw 0 0 }
    #seiki section:nth-child(15) .box { padding: 0; width: calc(50%); float: none }
    #seiki section:nth-child(15) .tx-box { margin: 1.66em 0 0 8vw }
    #seiki section:nth-child(15) .tx-box p:last-child { margin-top: 1.66em }
    #seiki section:nth-child(15) .box:last-child { width: auto; margin: 8vw 0 0 8vw }
    #seiki section:nth-child(15) .txts { width: auto }
    #seiki section:nth-child(15) .txts .en { width: auto }
    #seiki section:nth-child(16) .cap { position: relative; left: inherit; bottom: inherit; margin: 0 0 0 8vw; padding-top: 1.66em; }
    #seiki section:nth-child(17) { padding: 12vw 8vw 0 }
    #seiki section:nth-child(17) .cap { margin-top: 1.66em }
    #seiki section:nth-child(18) .credit { margin-left: 50% }
    #seiki section:nth-child(18) .credit h3 { margin-bottom: 6.64em }
    #seiki section:nth-child(18) .marks1 { position: absolute; left: 2vw; top: calc(12vw + 8.3em); }
    #seiki section:nth-child(18) .marks2 { position: absolute; left: 40%; bottom: 0; width: 3.2vw }
    
}