/* Thank you for opening CSS file! (^_^) */
html { color: #000; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { margin: 0; padding: 0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img { border: 0 }
address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var { font: inherit }
del, ins { text-decoration: none }
li { list-style: none }
caption, th { text-align: left }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
q:before, q:after { content: '' }
abbr, acronym { border: 0; font-variant: normal }
sup { vertical-align: baseline }
sub { vertical-align: baseline }
legend { color: #000 }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
body, html { width: 100%; height: 100%; font-family: 'Transat W01', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; }
html { overflow: hidden; }
body { margin: 0; padding: 0; position: relative; }
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }
body, html { background: #06060d; overflow: hidden;}
/* COMMON */
.none { display: none !important; }
@font-face { font-family: 'aircord'; src: url('../fonts/aircord_font2-webfont.eot'); src: url('../fonts/aircord_font2-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/aircord_font2-webfont.woff2') format('woff2'), url('../fonts/aircord_font2-webfont.woff') format('woff'), url('../fonts/aircord_font2-webfont.ttf') format('truetype'), url('../fonts/aircord_font2-webfont.svg#aircordtypeaircord_type') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'icons'; src: url('../fonts/icons.eot?ysi0zo'); src: url('../fonts/icons.eot?ysi0zo#iefix') format('embedded-opentype'), url('../fonts/icons.ttf?ysi0zo') format('truetype'), url('../fonts/icons.woff?ysi0zo') format('woff'), url('../fonts/icons.svg?ysi0zo#icons') format('svg'); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-facebook:before { content: "\e900"; }
.icon-spinner:before { content: "\e909"; }
.icon-google-plus:before { content: "\e908"; }
.icon-location:before { content: "\e905"; }
.icon-link:before { content: "\6c"; }
.icon-volume-mute:before { content: "\76"; }
.icon-volume-medium:before { content: "\e901"; }
.icon-play:before { content: "\e902"; }
.icon-pause:before { content: "\e903"; }
.icon-tumblr:before { content: "\e904"; }
.icon-twitter:before { content: "\e906"; }
.icon-vimeo:before { content: "\e907"; }
#background { position: fixed; height: 100%; width: 100%; background: none; top: 0; left: 0; z-index: 1; opacity: 0; }
.in { height: 100%; width: 100%; position: relative; }
.cover { display: block; }
a { text-decoration: none; }
.spacer-s { height: 50px; display: block; width: 100%; clear: both; }
.spacer-m { height: 100px; display: block; width: 100%; clear: both; }
.spacer-l { height: 150px; display: block; width: 100%; clear: both; }
* { outline: none; }
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
.skew { -webkit-transform: skew(0deg, -15deg); transform: skew(0deg, -15deg); }
.skew-in { -webkit-transform: skew(0deg, 15deg); transform: skew(0deg, 15deg); }
.center-line { display: none; background: rgba(255, 0, 0, 0.2); position: fixed; z-index: 99999999; }
.center-line-hr { height: 1px; width: 100%; top: 50%; left: 0; }
.center-line-vr { height: 100%; width: 1px; top: 0; left: 50%; }
button, select, input[type="text"], input[type="mail"], input[type="submit"], textarea { -webkit-appearance: none; border-radius: 0px; }
.pc { display: none; }
.u-l { text-decoration: underline; }
/* FONT */
.st0 { fill: rgba(255, 255, 255, 0.9); }
.st1 { fill: none; stroke-width: 15; }
.st2 { fill: none; stroke-width: 13; }
.st3 { fill: none; stroke-width: 12; }
.st4 { fill: none; stroke-width: 120; }
.clip { stroke-linecap: miter; stroke-linejoin: miter; stroke: rgba(255, 255, 255, 1); }
.shadow { opacity: 0.1 }
.shadow .clip { stroke: rgba(255, 255, 255, 1); }
.font { width: 80px; height: 80px; position: relative; display: inline-block; vertical-align: top; top: -2px; }
.font svg { width: 80px; height: 80px; position: absolute; left: 50%; top: 0; margin: 0 0 0 -40px; }
.font .clip { transition: all .5s; }
.on .font .clip { stroke-dashoffset: 0 !important; }
.f-a { width: 77px; } .f-b { width: 67px; } .f-c { width: 68px; } .f-d { width: 64px; } .f-e { width: 65px; } .f-f { width: 47px; } .f-g { width: 57px; } .f-h { width: 57px; } .f-i { width: 19px; } .f-j { width: 37px; } .f-k { width: 61px; } .f-l { width: 25px; } .f-m { width: 73px; } .f-n { width: 63px; } .f-o { width: 65px; } .f-p { width: 63px; } .f-q { width: 65px; } .f-r { width: 72px; } .f-s { width: 63px; } .f-t { width: 40px; } .f-u { width: 62px; } .f-v { width: 70px; } .f-w { width: 71px; } .f-x { width: 71px; } .f-y { width: 60px; } .f-z { width: 70px; } .f-0 { width: 55px; } .f-1 { width: 27px; } .f-2 { width: 55px; } .f-3 { width: 55px; } .f-4 { width: 50px; } .f-5 { width: 58px; } .f-6 { width: 57px; } .f-7 { width: 58px; } .f-8 { width: 54px; } .f-9 { width: 54px; } .f-i { width: 21px; } .f-e { width: 61px; } .f-v { width: 67px; } .f-l { width: 26px; } .f-s { width: 62px; } .f-d { width: 65px; } .f-s { width: 60px; } .f-o { width: 60px; } .f-j { width: 42px; } .f-u { width: 58px; } .f-p { width: 65px; } .f-r { width: 71px; } .f-c { width: 70px; } .f-t { width: 40px; } .f-y { width: 59px; }
.font .gr { opacity: 0; transition: all 0.5s; }
.font-outline.on .font .gr { opacity: 1; }
/* BUTTON */
.button { height: 40px; width: 200px; color: rgba(255, 255, 255, 0.9); display: block; margin: 0 auto; font-family: 'Transat W01'; letter-spacing: 3px; text-transform: uppercase; font-size: 11px; text-align: center; cursor: pointer; }
.button .txt { text-align: center; line-height: 40px; height: 40px; width: 100%; position: absolute; top: 0; left: 0; font-family: 'Lintel W00'; font-weight: 800; }
.button .svg svg { height: 40px; width: 100%; position: absolute; top: 0; left: 0; }
.button .svg svg path { fill: none; stroke-width: 1; stroke-miterlimit: 10; transition: all 0.5s; stroke: rgba(255, 255, 255, 0.9); }
.button .svg svg path.st1 { stroke-dashoffset: 0px; stroke-dasharray: 39.5px; }
.button .svg svg path.st0 { stroke-dashoffset: 0px; stroke-dasharray: 199.5px; }
.button .svg svg .btn_front path.st1 { stroke-dashoffset: 39.5px; }
.button .svg svg .btn_front path.st0 { stroke-dashoffset: 199.5px; }
.button .svg svg .btn_back path { stroke: rgba(255, 255, 255, 0.1); }
.button.select { margin: 0; letter-spacing: 2px; }
.button.select .txt { text-align: left; box-sizing: border-box; padding-left: 16px; background: url(../img/bg_select_right.png) no-repeat center right; background-size: 37px; }
.button.select.close .txt { background: url(../img/bg_select_bottom.png) no-repeat center right; background-size: 37px; }
.button-black .svg svg path { stroke: rgba(0, 0, 0, 0.9); }
.button-black .svg svg .btn_back path { stroke: rgba(0, 0, 0, 0.1); }
.button-rect .svg svg { height: 40px; width: 100%; position: absolute; top: 0; left: 0; }
.button-rect .svg svg path { fill: none; stroke-width: 1; stroke-miterlimit: 10; transition: all 0.5s; stroke: rgba(255, 255, 255, 0.9); stroke-dashoffset: 40px; stroke-dasharray: 40px; }
.button-rect .svg svg .btn_front path { stroke-dashoffset: 40px; }
.button-rect .svg svg .btn_back path { stroke-dashoffset: 0px; stroke: rgba(255, 255, 255, 0.1); }
/*----------------------------------
HEADER
----------------------------------*/
.header { width: 100%; position: absolute; z-index: 999; top: 0; left: 0; box-sizing: border-box; padding: 0 40px; }
.fix-header .header { position: fixed; transition: all 0.5s 0.5s; }
.header h1 a { position: absolute; left: 0; top: 0; display: block; line-height: 96px; height: 96px; }
.nav { width: 100%; }
.nav ul { width: 100%; text-align: center; font-size: 0; }
.nav ul li { display: inline-block; vertical-align: middle; }
.nav ul li a { transition: all 0.5s; font-family: 'Transat W01'; display: block; font-size: 11px; line-height: 96px; height: 96px; padding: 0 40px; letter-spacing: 2px; color:rgb(139, 157, 185);}
.nav ul li a.on { color: rgb(255, 255, 255); box-sizing: border-box; }
.nav ul li a:hover { color: rgb(255, 255, 255); }
.lang { position: absolute; width: 80px; right: 0; top: 50%; margin: -12px 0 0 0; }
.lang ul { font-size: 0; }
.lang ul li { display: inline-block; vertical-align: middle; }
.lang ul li a { font-family: 'Transat W01'; display: block; font-size: 11px; line-height: 24px; height: 24px; color: rgb(139, 157, 185); width: 40px; text-align: center; }
.lang-en .lang ul li a#lang-en, .lang-jp .lang ul li a#lang-jp { color: rgba(255, 255, 255, 0.9); cursor: default; }
.lang ul li a { letter-spacing: 2px; }
.nav ul li a, .header h1 a, .header { transition: all 0.5s; }
.scrolled .fix-header .nav ul li a, .scrolled .fix-header .header h1 a { line-height: 50px; height: 50px; }
.scrolled .fix-header .header { background: #06060d; }
.low { display: none; }
.q-0 .high { display: none; }
.q-0 .low { display: block; }
/*----------------------------------
INDEX
----------------------------------*/
.page-wait #load { opacity: 0; }
#load { transition: opacity 0.5s; opacity: 1; }
.pmask { position: fixed; z-index: 99999; height: 100%; width: 100%; background: #06060d; display: none; }
.q-0 .pmask { display: none; }
/* FIRSTVIEW */
.window { width: 100%; height: 100%; position: fixed; overflow-x: hidden; z-index: 10; top: 0; left: 0; background: rgba(0, 0, 0, 0); }
.page-enter .window { -webkit-overflow-scrolling: touch; }
.f-ol { overflow: hidden; }
.scale-in { }
#firstview.single-title h2 { padding: 0; }
#reel { position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: all 0.5s; }
.opened-single #reel { z-index: 100; opacity: 1; }
.hv .theme h2 .front { opacity: 0.1; }
.theme .back { position: relative; height: 90px; width: 100%; text-align: center; -webkit-transform: scale(0.95); transform: scale(0.95); margin: 10px 0 30px 0; }
.font-outline { font-size: 0; position: absolute; top: 50%; width: 100%; left: 0;/* left: 50%;*/ text-align: center; margin-top: -40px; z-index: 1; display: inline-block; transition: all 1s 1s; z-index: 0; font-size: 80px; }
.font-outline.on { z-index: 1; }
#firstview * { -ms-user-select: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; }
/*----------------------------------
INDEX - BG
----------------------------------*/
#fvslide { opacity: 0; transition: opacity 1s, -webkit-transform 0.8s ease-in-out; transition: opacity 1s, transform 0.8s ease-in-out; transition: opacity 1s, transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out; }
#fvslide.active { opacity: 1; }
.fv-bg, .fv-bd { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.fv-bd { -webkit-transform: skew(-30deg, 0); transform: skew(-30deg, 0); }
.fv-ol { position: relative; width: 140%; height: 100%; margin: 0 0 0 -20%; }
.fv-in { position: relative; width: 100%; height: 100%; overflow: hidden; }
.fv-in .img { -webkit-transform: skew(30deg, 0); transform: skew(30deg, 0); width: 800%; height: 100%; background-attachment: fixed; position: absolute; top: 0; left: -400%; }
.fv-ol .o { overflow: hidden; width: 20%; height: 100%; top: 0; left: 0; float: left; }
#fv-prev { background: url(../img/img_fv_prev.png) no-repeat center; background-size: 40px; }
#fv-next { background: url(../img/img_fv_next.png) no-repeat center; background-size: 40px; }
.fv-co { float: left; }
.fv-controls { z-index: 999; position: fixed; bottom: 40px; left: 40px; }
.fv-co .fv-button { display: block; height: 40px; width: 40px; text-align: center; line-height: 40px; color: #fff; margin-right: 10px; }
.fv-drag { position: absolute; bottom: 40px; left: 50%; width: 160px; margin: 0 0 0 -80px; z-index: 10; color: #fff; }
.fv-drag div { line-height: 40px; float: left; }
.fv-drag .right { width: 20px; height: 40px; background: url(../img/img_fv_next.png) no-repeat center; background-size: 40px; }
.fv-drag .left { width: 20px; height: 40px; background: url(../img/img_fv_prev.png) no-repeat center; background-size: 40px; }
.fv-drag .mid { text-align: center; width: 120px; }
.fv-drag .mid span { display: block; font-weight: 10px; letter-spacing: 3px; -webkit-transform: scale(0.7); transform: scale(0.7); }
.fv-layout { position: absolute; z-index: 100; right: 40px; bottom: 40px; width: 80px; }
.fv-layout div { float: left; }
.fv-layout a { display: block; width: 40px; height: 40px; transition: all 0.5s ease-in-out; }
#fv-layout-normal { background: url(../img/img_layout_1.png) no-repeat center; background-size: 40px; }
#fv-layout-list { background: url(../img/img_layout_2.png) no-repeat center; background-size: 40px; }
.on-layout-normal #fv-layout-normal { opacity: 1; }
.on-layout-normal #fv-layout-list { opacity: 0.1; }
.on-layout-list #fv-layout-normal { opacity: 0.1; }
.on-layout-list #fv-layout-list { opacity: 1; }
.fv-layout-list { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 11; display: none; }
.fv-layout-list .fv-list { font-size: 0; padding: 140px 40px; box-sizing: border-box; overflow: scroll; overflow-x: hidden; }
.fv-layout-list a { opacity: 0; transition: all 0.5s; display: inline-block; vertical-align: top; height: 280px; width: 25%; box-sizing: border-box; }
.on-layout-list .fv-layout-list a { opacity: 1; }
.fv-layout-list .fv-list h3 { font-size: 13px; text-align: center; text-transform: uppercase; color: #fff; font-weight: 800; letter-spacing: 3px; }
.fv-layout-list .fv-list .table { width: 100%; height: 100%; z-index: 2; position: relative; }
.fv-layout-list .fv-list .thumb { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; }
.fv-layout-list .fv-list .thumb .in { background: rgba(23, 26, 34, 1); overflow: hidden; padding: 10px; box-sizing: border-box; }
.fv-layout-list .fv-list .cover { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; opacity: 0.2; transition: all 0.5s; }
/* PROJECT */
.project-body { padding: 300px 0; }
.project-title { position: absolute; z-index: 10; top: 50%; left: 50%; width: 500px; margin: -135px 0 0 -250px; }
.project-title h2 { text-align: center; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); font-size: 70px; letter-spacing: 10px; font-family: 'Transat W01'; font-weight: 800; margin-bottom: 20px; }
.project-outline { max-width: 1140px; margin: 0 auto; font-size: 0; position: relative; z-index: 2; }
.project-list { height: auto; }
.project-bg { background: #0d1829; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.project-thumb { display: block; }
.on .project-thumb { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.project-ol { padding-top: 10px; font-size: 0; }
.project-thumb { display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px; width: 350px; height: 190px; overflow: hidden; }
.project-thumb .cover-pr { position: absolute; top: 50%; left: 50%; margin: -170px 0 0 -200px; width: 400px; height: 340px; }
.page-project .project-thumb .in .cover-pr { opacity: 1; }
.enter .project-thumb .in .cover-pr { opacity: 1; }
.enter .project-thumb .in .cover-pr { opacity: 1; }
.project-thumb.third { margin-right: 0; }
.project-info { position: absolute; z-index: 10; height: 300px; width: 400px; top: 50%; left: 50%; margin: -150px 0 0 -200px; background: url(../img/hover2.png) center; background-size: 1px; opacity: 0; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); }
.enter .project-info { opacity: 1; transition: all 0.5s; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.leave .project-info { opacity: 0; transition: all 0.5s; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }
.project-info .table { height: 100%; margin: 0 auto; max-width: 300px; width: 100%; }
.project-info .cell { text-align: center; }
.project-info h2 { margin-bottom: 3px; color: rgba(255, 255, 255, 0.9); font-family: 'Transat W01'; font-weight: 800; font-weight: 800; font-size: 15px; letter-spacing: 1px; -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
.project-info p { font-size: 11px; color: rgba(255, 255, 255, 0.9); font-family: 'Transat W01'; font-weight: 800; font-weight: 400; -webkit-transform: translate(0, 100px); transform: translate(0, 100px); }
.enter .project-info h2 { transition: all 0.5s; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.leave .project-info h2 { transition: all 0.5s; -webkit-transform: translate(0, -100px); transform: translate(0, -100px); }
.enter .project-info p { transition: all 0.6s; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.leave .project-info p { transition: all 0.6s; -webkit-transform: translate(0, -100px); transform: translate(0, -100px); }
/* MAX表示 */
.subpages-header { min-height: 100px; padding: 250px 0px 50px 0; }
.project-outline.body { max-width: 100%; padding: 0 5px; text-align: left; box-sizing: border-box; }
.project-thumb { display: inline-block; vertical-align: top; margin-right: 0; margin-bottom: 0; width: 33.3333%; height: 280px; overflow: hidden; }
.project-info { position: absolute; z-index: 10; height: 100%; width: 100%; top: 0; left: 0; margin: 0; background: url(../img/hover2.png) center; background-size: 1px; opacity: 0; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); }
.project-thumb .cover-pr { position: absolute; top: -30%; left: -5%; margin: 0; width: 110%; height: 160%; }
.page-project .project-thumb { margin: 0px !important; width: 33.333%; height: 230px; box-sizing: border-box; padding: 5px; }
.page-project .project-thumb .in { padding: 0 !important; overflow: hidden; }
.page-project .project-thumb > .in { background: url(../img/hover2.png) center; background-size: 1px; }
.page-project .project-thumb .in .cover-pr {opacity: 0; transition: opacity 0.5s;}
/*============== ここでフィルターの強度が変更できます！ ==============*/
.page-project .project-thumb .in .cover-pr.on { opacity: 0.83; }
/*============== ここでフィルターの強度が変更できます！ ==============*/
/* ABOUT */
#logo { width: 100px; }
#TM * { fill: rgba(255, 255, 255, 0.9); }
#logo .st { display: inline; fill: none; stroke: rgba(255, 255, 255, 1); stroke-width: 15; stroke-miterlimit: 10; }
#logo .st.b { stroke: rgba(255, 255, 255, 0.1); }
#logo .st.thin { stroke-width: 13; }
#TM, #logo path { transition: all 0.5s; }
#TM { transition-delay: 0.7s; }
#logo .l-st7 { transition-delay: 0s; stroke-dashoffset: 180.858px; stroke-dasharray: 180.858px; }
#logo .l-st6 { transition-delay: 0.05s; stroke-dashoffset: 67px; stroke-dasharray: 67px; }
#logo .l-st5 { transition-delay: 0.1s; stroke-dashoffset: 108.314px; stroke-dasharray: 108.314px; }
#logo .l-st4 { transition-delay: 0.15s; stroke-dashoffset: 153.275px; stroke-dasharray: 153.275px; }
#logo .l-st3 { transition-delay: 0.2s; stroke-dashoffset: 165.441px; stroke-dasharray: 165.441px; }
#logo .l-st2 { transition-delay: 0.25s; stroke-dashoffset: 108.814px; stroke-dasharray: 108.814px; }
#logo .l-st1 { transition-delay: 0.5s; stroke-dashoffset: 183.637px; stroke-dasharray: 183.637px; }
.header #logo path { stroke-dashoffset: 0; }
.about-text p { color: rgba(255, 255, 255, 0.9); font-size: 12px; line-height: 28px; text-align: center; /*font-weight: 800;*/ }
.about-header, .about-text { width: 480px; margin: 0 auto; }
.about-outline { padding: 50px 0 350px 0; }
/* AWARDS */
.awards { padding: 200px 0 260px 0; background: #0D1829; }
.awards-slider .cover { display: block; width: 170px; height: 100px; margin: 0 auto; }
.awards-slider h2 { font-family: 'Transat W01'; font-weight: 800; color: rgba(255, 255, 255, 0.9); letter-spacing: 5px; font-size: 24px; text-transform: uppercase; text-align: center; }
.awards-slider .slide ul li { display: inline-block; vertical-align: middle; width: 220px; }
.awards-slider .slide ul { font-size: 0; text-align: center; }
.slick-dots button { height: 6px; width: 6px; text-indent: -9999px; border-radius: 12px; border: none; cursor: pointer; background: #F4F4F4; background-size: 1px; }
.slick-dots { left: 0; text-align: center; font-size: 0; position: absolute; width: 100%; bottom: -80px; }
.slick-dots li { margin: 0 4px; display: inline-block; vertical-align: top; }
.slick-dots button { opacity: 0.2; }
.slick-dots .slick-active button { opacity: 1; }
/* FOOTER */
.footer { position: relative; z-index: 2; }
.body { max-width: 1180px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.footer-head { padding: 142px 0; background: #f4f4f4; }
.footer-head h3 { font-size: 20px; font-weight: 800; letter-spacing: 3px; margin-bottom: 20px; }
.footer-in { float: left; width: 250px; }
.footer-in dt, .footer-in dd, .footer-in p { font-size: 13px; font-weight: lighter; color: rgba(0, 0, 0, 0.9); line-height: 30px; }
.footer-in dt { float: left; clear: both; width: 70px; }
.footer-in dd { box-sizing: border-box; padding: 0 0 0 70px; }
.footer-foot { font-weight: lighter; line-height: 80px; color: rgb(109, 122, 143);}
.footer-foot address { float: left; }
.footer-foot .sns-footer { float: right; }
.sns-footer a { display: block; height: 20px; width: 20px; }
.sns-footer span { padding: 0 20px 0 0; }
.sns-footer li { display: inline-block; vertical-align: middle; }
.sns-footer li a span { padding: 0; text-align: center; line-height: 20px; height: 20px; width: 20px; color: #fff; display: block; }
/*----------------------------------
SUBPAGE
----------------------------------*/
.subpages .font-outline { position: relative; top: 0; width: 100%; left: 0; text-align: left; margin: 0; transition: all 0s; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: center left; transform-origin: center left; }
.subpages-header-body { margin-top: 30px; transition: all 0.5s 1s; opacity: 0; position: relative; z-index: 2; }
.page-enter .subpages-header-body { opacity: 1; }
.subpage-body .subpages-header-body { margin-top: 0px; }
.subpages-header { min-height: 100px; padding: 250px 0px 90px 0 }
.subpages-header .subtitle { width: 50%; margin: 30px 0 90px 0; }
.subpages-header .subtitle span { color: rgba(255, 255, 255, 0.9); line-height: 2; }
.subpages-header .button { margin: 30px 0 0 0; }
/*----------------------------------
SUB - PROJECT
----------------------------------*/
.page-project .project-list { padding: 20px 0 150px 0; }
.page-project .project-body { padding: 0; position: relative; z-index: 2; }
.page-project .project-bg { height: 500px; top: 50%; margin: -250px 0 0 0; position: absolute; background: #012a6b; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #012a6b 0%, #007faa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#012a6b', endColorstr='#007faa', GradientType=1); /* IE6-9 */ }
.project-pager { text-align: right; font-size: 0; margin-bottom: 100px; }
.project-pager a, .project-pager span { margin-left: 10px; margin-bottom: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.9); display: inline-block; vertical-align: middle; padding: 0 14px; line-height: 40px; height: 40px; box-sizing: border-box; }
.project-pager span { opacity: 0.1; }
.project-pager a { border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s; }
.project-ol { position: relative; }
.pulldown {overflow: hidden; text-align: left; z-index: -999; position: absolute; top: 0; left: 0; padding: 0 0 0 200px; width: 620px; font-size: 0; box-sizing: border-box; transition: all 0s 0.5s; }
.pulldown a { font-family: 'Lintel W00'; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0); background: #0B0B16; display: block; text-align: left; color: rgba(255, 255, 255, 0.9); line-height: 40px; height: 40px; width: auto; font-size: 11px; padding: 0 20px; opacity: 0; transition: all 0.5s; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); }
.pulldown li { margin: 0 0 10px 10px; display: inline-block; }
.open-popup:hover .pulldown a { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.open-popup:hover .pulldown { transition: all 0s; z-index: 10; }
/*----------------------------------
SINGLE
----------------------------------*/
.single-clip-bg { height: 100%; width: 100%; position: absolute; z-index: 1; top: 0; left: 0; }
.single-clip-bg span, .single-clip-bg polygon { fill: rgba(23, 26, 34, 0.9); background: rgba(23, 26, 34, 0.9); }
.single-clip-bg, .single-clip-bg * { vertical-align: bottom; }
.single-clip-bg-body { width: 100%; height: 100%; position: absolute; top: -100%; left: 0; }
.single-clip-bg span { display: block; width: 100%; height: 100%; }
.single-clip { overflow: hidden; position: absolute; z-index: 3; }
.single-title { position: absolute; z-index: 9; top: 0; left: 0; height: 100%; width: 100%; }
.single-title > .cell { transition: all 1s; opacity: 1; }
.opened-single .single-title > .cell { opacity: 0; }
#play { position: absolute; height: 100%; width: 100%; z-index: 1; }
.single-title h2 { color: rgba(255, 255, 255, 0.9); font-size: 62px; letter-spacing: 8px; font-family: 'Transat W01'; font-weight: 800; text-align: center; box-sizing: border-box; padding: 60px 100px 0 100px; font-family: 'Lintel W00'; }
.no-tube .single-title h2 { padding: 0px 100px 0 100px;}
.client { width: 660px; margin: 30px auto 0 auto; }
.client .cell { width: 33.333%; vertical-align: top; }
.client h3 { text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; font-family: 'Transat W01'; font-weight: 800; }
.client p { text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 13px; letter-spacing: 1px; font-family: 'Transat W01'; font-weight: 200; }
.single-title .button { margin-top: 60px; }
.client li, .client li a { line-height: 1.6em; height: 1.6em; display: block; text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 11px; letter-spacing: 1px; font-family: 'Transat W01'; font-weight: 200; }
.client li, .client li a { line-height: 1em; margin-bottom: 0.5em; height: auto; }
.single-ex { background: #13246e; /* Old browsers */ /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #13246e 0%, #006487 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#13246e', endColorstr='#006487', GradientType=0); /* IE6-9 */ }
.single-body { background: rgba(255, 255, 255, 1); }
.single-ex p { color: rgba(255, 255, 255, 0.9); font-size: 13px; line-height: 2; letter-spacing: 1px; text-align: center; font-weight: 800; font-family: 'Lintel W00', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
.single-ex .table { width: 660px; margin: 0 auto; padding: 140px 0; }
.slidein { left: 100%; top: 0; width: 100%; position: absolute; z-index: 0; }
.slidein.active { left: 0; z-index: 1; }
.slidein img { vertical-align: bottom; }
.single-slider .contain { height: 800px; max-width: 1200px; margin: 0 auto; }
.single-slider .cover { height: 100%; max-width: 100%; }
.slidein-header { margin: 0 auto; position: relative; z-index: 2; }
.single-slider-body, .slidein-header { min-height: 400px; }
.slidein-body { position: absolute; left: 0; top: 0; }
.slidein-header .img { height: 100%; width: 100%; max-width: 1100px; margin: 0 auto; background-repeat: no-repeat; }
.slidein-header.nocover .img { margin: 80px auto 0 auto; }
.slidein-header .in { box-sizing: border-box; }
.slidein-bg { position: absolute; z-index: 1; height: 100%; width: 100%; left: 0; opacity: 0.15; }
.single-info { padding: 230px 0 0 0; width: 600px; margin: 0 auto; }
.single-info * { color: rgba(0, 0, 0, 0.8); }
.single-awards .in { margin-bottom: 75px; }
.single-section { margin-bottom: 150px; }
.single-section.single-awards h2, .single-section.single-awards h3, .single-section h2 { color: rgba(0, 0, 0, 0.9); margin-bottom: 30px; text-align: center; font-size: 24px; letter-spacing: 3px; font-family: 'Transat W01'; font-weight: 800; text-transform: uppercase; }
.single-credits ul, .single-awards ul { max-width: 440px; margin: 0 auto; }
.single-credits ul li, .single-awards li { font-size: 14px; opacity: 0.5; text-align: center; letter-spacing: 1px; line-height: 1.5; margin-top: 0.6em; font-family: 'Lintel W00', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; font-weight: bold; }
.single-contents p { margin-top: 2em; font-size: 13px; line-height: 2; letter-spacing: 1px; }
.single-contents a { font-weight: 800; text-decoration: underline; margin-right: 5px !important; }
.single-contents h3 { color: rgba(0, 0, 0, 0.9); letter-spacing: 2px; text-align: center; margin: 2em 0; overflow: hidden; font-weight: 800; font-size: 24px; }
.single-contents h5, .single-contents h6, .single-contents h4 { color: rgba(0, 0, 0, 0.9); letter-spacing: 2px; text-align: left; margin: 2em 0; overflow: hidden; font-weight: 800; font-size: 16px; }
.single-section.single-awards h2, .single-section.single-awards h3, .single-section h2, .single-contents blockquote, .single-contents li, .single-contents p, .single-contents a, .single-contents h3, .single-contents h4, .single-contents h5, .single-contents h6 { font-family: 'Lintel W00', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
.single-contents img { margin-top: 2em; max-width: 100%; height: auto; vertical-align: bottom; }
.single-contents blockquote { box-sizing: border-box; padding: 50px; margin-top: 2em; background: #f4f4f4; position: relative; }
.single-contents blockquote:after { content: ''; position: absolute; display: block; font-size: 20px; left: 0; top: 0; width: 50px; line-height: 50px; text-align: center; height: 50px; background: url(../img/img_blockquote_left.png) center no-repeat; background-size: 11px; }
.single-contents blockquote:before { content: ''; position: absolute; display: block; font-size: 20px; right: 0; bottom: 0; width: 50px; line-height: 50px; text-align: center; height: 50px; background: url(../img/img_blockquote_right.png) center no-repeat; background-size: 11px; }
.single-contents iframe { width: 100%; height: 400px; margin-top: 2em; }
.single-contents p *, .single-contents * p { margin: 0; }
.single-contents ol, .single-contents ul { margin-top: 2em; box-sizing: border-box; padding: 0 0 0 30px; }
.single-contents li:first-child { margin-top: 0; }
.single-contents li { margin-top: 0.5em; font-size: 13px; line-height: 2; letter-spacing: 1px; }
.single-contents ul li { list-style: disc; }
.single-contents ol li { list-style: decimal; }
.single-footer { padding-bottom: 150px; }
.pager-inner { -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); overflow: hidden; height: 80px; width: 180px; margin: 0 auto 15px auto; }
.pager-inner .in { overflow: hidden; height: 80px; width: 180px; background: #06060d; }
.pager-inner .cover { opacity: 1; -webkit-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg); height: 200px; width: 260px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -130px; }
.pager-inner .pager-mask { transition: all 0.3s; position: absolute; top: 0; left: 0; background: rgba(23, 26, 34, 0.4); width: 100%; height: 100%; z-index: 2; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.pager-inner.enter .pager-mask { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }
.pager-inner.leave .pager-mask { transition: all 0s; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); }
.single-pager span, .single-pager a { display: block; }
.single-pager a { height: 140px; width: 230px }
.single-pager span { font-size: 11px; text-align: center; letter-spacing: 1px; }
.pager-prev { float: left; }
.pager-next { float: right; }
.single-pager .bd { display: block; height: 1px; width: 160px; background: #000000; opacity: 0.1; position: absolute; left: 50%; margin: 0 0 0 -80px; top: 37px; }
.single-slide-bg { position: absolute; height: 100%; width: 100%; top: 80px; left: 0; box-sizing: border-box; }
.single-slide-bg span { position: absolute; top: 0; left: 0; display: block; background: #fafafa; height: 100%; width: 100%; }
.single-slide-bg { cursor: default; }
.mouse-on * { cursor: none !important; }
/* SINGLE SLIDER YOUTUBE */
.slide-youtube iframe { opacity: 0; transition: all 1s; }
.slide-youtube-in .slide-play { cursor: pointer; }
.slide-youtube-in .slide-play span { display: block; position: absolute; height: 100%; width: 100%; top: 0; left: 0; width: 100px; height: 100px; line-height: 100px; text-align: center; top: 50%; left: 50%; margin: -50px 0 0 -50px; color: #657185; font-size: 40px; opacity: 1; z-index: 5; transition: all 1s; }
.slide-youtube-in .slide-play span { z-index: 4; text-indent: 3px; }
.controls-bg { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 2; box-sizing: border-box; padding: 0; }
.slide-youtube .controls-bg div { background: rgba(23, 26, 34, 0.9); height: 100%; width: 100%; transition: all 1s; max-width: 1100px; margin: 0 auto; }
.slide-controls-ol { width: 100%; height: 100%; margin: 0 auto; position: absolute; left: 0; top: 0; }
.slide-controls-ol .in { max-width: 1100px; height: 100%; margin: 0 auto; position: relative !important; }
.slide-controls { position: absolute; z-index: 4; right: 20px; bottom: 20px; opacity: 0; transition: all 1s; }
.slide-controls .icons { display: block; height: 32px; width: 32px; position: relative; }
.slide-controls .icons span { color: #fff; display: block; height: 32px; width: 32px; text-align: center; line-height: 32px; position: absolute; top: 0; left: 0; opacity: 0; transition: all 1s; }
.slide-controls .icons span.on { opacity: 1; }
/* PLAYING */
.slide-youtube.playing .controls-bg div { opacity: 0; }
.slide-youtube.playing iframe { opacity: 1; }
.slide-youtube.playing .slide-play span { opacity: 0; }
.slide-youtube.playing .slide-controls { opacity: 1; }
/* SNS */
.single-share { width: 100%; border: 1px solid rgb(230, 230, 230); }
.single-share .cell { width: 33.333%; }
.single-share .cell:first-child a { border-left: none; }
.single-share a { display: block; text-align: center; border-left: 1px solid rgb(230, 230, 230); transition: all 0.5s; }
.single-share a:hover { background: rgb(250, 250, 250); }
.single-share span { display: inline-block; vertical-align: middle; line-height: 50px; height: 50px; }
.single-share span:first-child { padding: 0 10px 0 0; font-size: 14px; }
/* LARGE IMAGE */
.single-contents .middle-image { width: 160%; margin: 80px 0; margin-left: -30%; }
.single-contents .middle-image img { width: 100%; height: auto; margin-top: 0; -ms-user-select: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; }
.single-contents .large-image img { margin: 0; max-width: 99999px; width: 100%; -ms-user-select: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; }
.single-contents .large-image { padding: 0; box-sizing: border-box; }
.single-contents .large-image { margin: 80px 0; }
.single-contents .large-image .mid { top: 50%; left: 0; position: absolute; z-index: 2; width: 100%; }
.single-contents .large-image h3 { margin: 0 0 30px 0; color: rgba(255, 255, 255, 0.9); font-size: 50px; letter-spacing: 4px; font-family: 'Transat W01'; font-weight: 800; text-align: center; box-sizing: border-box; padding: 0; }
.single-contents .large-image .ex { width: 660px; margin: 0 auto; }
.single-contents .large-image .ex p { color: rgba(255, 255, 255, 0.9); font-size: 13px; line-height: 2; letter-spacing: 1px; text-align: center; font-weight: 800; }
.single-youtube { margin-top: 2em; }
.single-info .button { margin: 30px auto 0 auto !important; }
.single-info .button .txt { color: #ffffff; font-weight: normal; }
.opened-single .window { overflow: hidden; }
#player-vimeo { position: relative; height: 100%; width: 100%; }
/*----------------------------------
REEL
----------------------------------*/
.page-reel.subpages .font-outline { text-align: center; position: relative; top: 0; width: 100%; left: 0; margin: 0; transition: all 0s; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center; transform-origin: center; }
/*----------------------------------
SLIDER
----------------------------------*/
.mouse { cursor: none; height: 20px; width: 10px; position: fixed; top: 0; left: -9999px; opacity: 0; z-index: 9; transition: opacity 0.5s, left 0s 0.5s; margin: 10px; background: url(../img/pointer_left.png) no-repeat center; background-size: 10px; }
.mouse-on.moved .mouse { transition: opacity 0.5s, left 0s 0s; opacity: 1; left: 0; }
.mouse-on.overd .mouse { background-image: url(../img/pointer_right.png); }
.slide-mask { height: 100%; width: 100%; z-index: 10; position: absolute; top: 0; left: 0; }
.single-slider { cursor: none; -moz-perspective: 500; -webkit-perspective: 500; -o-perspective: 500; -ms-perspective: 500; }
.overd .single-slider { cursor: none; }
.slidein { overflow: hidden; }
.slidein { left: 0; opacity: 1; }
.single-slide-nav { cursor: default; }
.single-slide-nav ul { text-align: center; font-size: 0; }
.single-slide-nav ul li { margin: 0; position: relative; display: inline-block; }
.single-slide-nav ul li a { display: block; text-indent: -999px; width: 100px; border-radius: 12px; border: none; cursor: pointer; background-size: 1px; padding: 40px 0 0 0; opacity: 0.2; }
.single-slide-nav ul li a span { display: block; height: 1px; width: 100%; background: rgba(0, 0, 0, 0.9); }
.single-slide-nav ul li.active a span { height: 2px; }
.single-slide-nav ul li.active:hover a, .single-slide-nav ul li.active a { opacity: 1; }
.single-slide-nav ul li:hover a { opacity: 0.5; }
.single-slide-nav { position: absolute; z-index: 11; bottom: 0px; left: 0; width: 100%; }
.single-slide-thumbs { position: absolute; bottom: 50px; z-index: 10; left: 50%; margin-left: -100px; opacity: 0; transition: all 0.5s; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); }
.hover-nav .single-slide-thumbs { opacity: 1; -webkit-transform: translate(0, 0px); transform: translate(0, 0px); }
.single-slide-thumbs > .in { overflow: hidden; border: 3px solid #FFF; box-sizing: border-box; background: #D2D3D4; }
.single-slide-thumb { width: 420px; position: absolute; top: 0; left: 0; display: inline-block; vertical-align: top; text-align: center; font-size: 0; }
.single-slide-thumbs .cover { width: 100%; height: 100%; max-width: 9999px; position: absolute; }
.small-thumb { overflow: hidden; display: inline-block; vertical-align: top; }
.single-slide-thumbs > .in, .small-thumb { width: 180px; height: 100px; }
.slidein-header .in { padding: 0 40px; position: absolute; left: 0; top: 0; }
/* SLIDE SPAN */
.single-slider { margin-top: -80px; padding-bottom: 80px; }
.slidein { padding: 0 0 80px 0; }
.single-ex { padding-bottom: 80px; }
.slidein-header .in { padding: 0px; }
.slidein-bg { top: 80px; }
.slidein-bg .cover { opacity: 0; }
/* YOUTUBE */
.player-body { transition: z-index 0s; background: #06060d; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
.player-body iframe { position: absolute; height: 3000px; width: 3000px; top: 50%; left: 50%; transition: all 0.8s ease-in-out; margin: -1500px 0 0 -1500px; }
.single-thumb{ overflow: hidden; }
.q-0 .player-body iframe { transition: all 0s; }
.single-header{ position: relative; z-index: 1; }
.player-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; transition: opacity 1s 0.5s; }
.tube-ready .player-cover { opacity: 0; }
.tube-body { position: absolute; bottom: 50px; right: 10px; z-index: -999; opacity: 0; transition: opacity 0.5s 0.4s, z-index 0.4s 0.9s; }
#close-reel, #close-single { display: block; color: #fff; width: 40px; height: 40px; line-height: 40px; box-sizing: border-box; text-align: center; }
.tube-body .icons { display: block; height: 40px; width: 40px; position: relative; }
.tube-body .icons span { color: #fff; display: block; height: 40px; width: 40px; text-align: center; line-height: 40px; position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s; }
.tube-body .icons span.on { opacity: 1; }
.tube-body .cell a { transition: all 0.5s 0.4s; -webkit-transform: translate(40px, 40px); transform: translate(40px, 40px); }
.tube-body .cell a { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
.tube-body .cell {display: none;}
.tube-body .cell.last {display: table-cell;}
.opened-single .tube-body { z-index: 10; opacity: 1; transition: opacity 0.5s 0.4s, z-index 0s; }
.opened-single .player-body iframe { height: 100%; width: 100%; top: 0; left: 0; margin: 0 0 0 0; }
#reel .tube-body { z-index: 10; opacity: 1; transition: opacity 0.5s 0.4s, z-index 0s; }
#reel .player-body iframe { height: 100%; width: 100%; top: 0; left: 0; margin: 0 0 0 0; }
.player-mask { height: 100%; width: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0); position: absolute; z-index: 2; }
.player-mask { z-index: -1; }
.opened-single .player-body { z-index: 4; transition: z-index 0s 0.9s; }
.tube-progress { transition: opacity 0.5s 0.4s, z-index 0.4s 0.9s; opacity: 0; position: absolute; left: 40px; bottom: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; z-index: -999; }
.opened-single .tube-progress { z-index: 10; opacity: 1; transition: opacity 0.5s 0.4s, z-index 0s; }
.tube-progress .in .ol { width: 100%; height: 2px; padding: 0 20px; position: relative; margin: 19px 0 0 0; box-sizing: border-box; }
.tube-progress .in .bar { height: 2px; background: rgba(255, 255, 255, 0.1); width: 100%; }
.tube-progress .in .bar span { display: block; width: 100%; height: 100%; transition: all 0.3s; background: rgba(255, 255, 255, 1); }
.tube-progress .range { position: absolute; z-index: 10; top: -5px; left: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }
.tube-progress .range input { width: 100%; opacity: 0; }
/*----------------------------------
ABOUT
----------------------------------*/
.subtitle { margin: 40px auto 150px auto; max-width: 600px; text-align: center; font-family: 'Lintel W00', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
.page-common .subpage-body .subtitle span { font-size: 13px; line-height: 2; -webkit-transform: translate(0px, 40px); transform: translate(0px, 40px); opacity: 0; text-align: center; color: rgba(0, 0, 0, 0.9); letter-spacing: 1px; }
.page-enter .subtitle span.s1 { transition: all 0.8s 0.5s; -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }
.page-enter .subtitle span.s2 { transition: all 0.8s 0.4s; -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }
.page-enter .subtitle span.s3 { transition: all 0.8s 0.5s; -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; }
.full-slider-body .cover { height: 1400px; margin: -700px 0 0 0; width: 100%; position: absolute; top: 50%; left: 0; }
.full-slider { position: relative; }
.full-slider-body { transition: all 0.5s 0.5s; overflow: hidden; height: 500px; width: 100%; opacity: 0; }
.full-slider-in { position: relative; z-index: 2; background: #06060d; }
.full-slider-bg { position: absolute; z-index: 1; height: 1400px; background: #fff; width: 100%; top: 10px; left: 0; }
.fill-slide-nav { position: absolute; bottom: -110px; left: 0; width: 100%; z-index: 2; }
.fill-slide-nav ul { text-align: center; font-size: 0; }
.fill-slide-nav li { cursor: pointer; padding: 3px; display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ *display: inline; /* Fix for IE7 */ }
.fill-slide-nav span { display: block; height: 6px; width: 6px; text-indent: -9999px; border-radius: 12px; border: none; cursor: pointer; background: #06060d; background-size: 1px; }
.fill-slide-nav .on span { opacity: 0.2; }
.full-slider-body { /*cursor: none;*/ -moz-perspective: 500; -webkit-perspective: 500; -o-perspective: 500; -ms-perspective: 500; }
.page-common .subpage-body { background: #fff; position: relative; z-index: 1; }
.page-common .subpage-body * { color: rgba(0, 0, 0, 0.8); }
.page-common .subpage-body h3 { font-family: 'Lintel W00'; text-transform: uppercase; margin: 0 0 60px 0; color: rgba(0, 0, 0, 0.9); letter-spacing: 2px; text-align: center; overflow: hidden; font-weight: 800; font-size: 24px; }
.page-common .subpage-body h4 { text-transform: uppercase; color: rgba(0, 0, 0, 0.9); letter-spacing: 4px; text-align: left; overflow: hidden; font-weight: 800; font-size: 18px; font-family: 'Transat W01'; }
.about-activitis { overflow: hidden; font-size: 0; }
.about-activitis a { display: inline-block; vertical-align: middle; width: 33.3333%; height: 230px; }
.page-common .about-activitis a { position: relative; }
.page-common .about-activitis a .bg { transition: all 0.5s; background: rgba(23, 26, 34, 0.8); z-index: 1; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.page-common .about-activitis a span { position: relative; z-index: 2; text-transform: uppercase; display: block; text-align: center; line-height: 230px; height: 230px; font-size: 15px; font-weight: 800; letter-spacing: 2px; color: rgba(255, 255, 255, 1); }
.about-project dt .cover { width: 190px; height: 80px; text-indent: -9999px; }
.about-project { font-size: 0; }
.about-project a.contain { transition: all 0.5s; display: inline-block; vertical-align: top; box-sizing: border-box; padding: 20px; }
.about-project .contain { background-repeat: no-repeat; width: 100%; height: 40px; }
.about-project a span { margin: 20px 0; font-size: 13px; line-height: 2; display: block; text-align: center; font-weight: 800; min-height: 6em; }
.about-project dt { clear: both; width: 260px; float: left; box-sizing: border-box; }
.about-project dd { padding-left: 260px; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.list-layout > .in { width: 100%; }
.list-layout > .in .bd { width: 100%; height: 100%; }
.about-company-left { color: #fff; }
.page-common .subpage-body .list-layout h3 { }
.page-common .subpage-body .list-layout dt { font-size: 13px; letter-spacing: 1px; font-weight: 800; float: left; width: 260px; clear: both; padding: 0 0 20px 0; line-height: 2; }
.page-common .subpage-body .list-layout dd { font-size: 13px; letter-spacing: 1px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); line-height: 2; box-sizing: border-box; padding: 0 0 20px 260px; margin-bottom: 20px; }
.list-layout dt, .list-layout dd { font-family: 'Lintel W00', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
.page-common .subpage-body .list-layout.about-project dd { min-height: 5em; font-size: 13px; letter-spacing: 1px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); line-height: 40px; box-sizing: border-box; padding: 0 0 20px 260px; margin-bottom: 20px; }
.page-common .subpage-body .list-layout dd a { display: inline-block; vertical-align: top; padding: 0 5px; }
.about-company-right #map, .about-company-right { height: 440px; width: 100%; }
.about-company-right { width: 100%; overflow: hidden; }
.about-company-right #map { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; }
.list-awards { text-align: center; margin: 20px 0; font-size: 0; }
.list-awards .cover { width: 161px; height: 79px; }
.list-awards li { margin: 20px; display: inline-block; vertical-align: top; }
/*----------------------------------
CAREER
----------------------------------*/
.about-facility .bd { float: left; width: 50%; box-sizing: border-box; }
.about-facility .bd .cover { height: 300px; position: relative; opacity: 0.9; margin-bottom: 30px; }
.about-facility .bd.left { padding-right: 20px; }
.about-facility .bd.right { padding-left: 20px; }
.about-facility .bd .cover span { display: block; line-height: 300px; text-align: center; height: 300px; width: 100%; position: relative; z-index: 2; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.about-facility .bd .cover .bg { position: absolute; width: 100%; height: 100%; background: #172843; top: 0; left: 0; z-index: 1; opacity: 0.3; }
.about-facility .bd p { font-size: 13px; line-height: 2; letter-spacing: 1px; text-align: justify; }
.about-facility .bd p a { text-decoration: underline; }
.recruit-tab .table { width: 100%; }
.recruit-tab { margin: 100px 0; }
.recruit-tab .table .cell { cursor: pointer; width: 25%; position: relative; height: 60px; box-sizing: border-box; padding: 0 20px; }
.recruit-tab .table .cell span { transition: all 0.2s; display: block; text-align: center; font-weight: 800; position: relative; z-index: 3; line-height: 1.5; }
.recruit-tab .table .cell.on span { color: #fff; }
.recruit-tab .table .cell div.bg { z-index: 2; width: 90%; height: 100%; position: absolute; top: 0; left: 5%; border: 3px solid #172843; box-sizing: border-box; -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); transition: all 0.2s; }
.recruit-tab .table .cell:hover div.bg { box-shadow: 1px 1px 0px 0px #31425D, 2px 2px 0px 0px #31425D, 3px 3px 0px 0px #31425D; background: #172843; }
.recruit-tab .table .cell:hover span { color: #fff; }
.recruit-tab .table .cell.on div.bg { background: #172843; box-shadow: 1px 1px 0px 0px #31425D, 2px 2px 0px 0px #31425D, 3px 3px 0px 0px #31425D; }
.recruit-tab-body dl { display: none; }
.recruit-tab-body dl.on { display: block; }
/*----------------------------------
AWARDS
----------------------------------*/
.subpege-top { vertical-align: bottom; margin-top: -200px; width: 100%; }
.subpege-top polygon { fill: rgb(255, 255, 255); }
.awards-body { margin-top: -1px; }
.awards-list { width: 100%; }
.awards-list th, .awards-list td { box-sizing: border-box; padding: 35px 0 35px 100px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; }
.awards-list td a { text-decoration: underline; }
.awards-list tr { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.awards-list th:first-child, .awards-list td:first-child { padding: 35px 0; }
.awards-list thead tr { border-bottom: none; }
.page-common .subpage-body .awards-list thead th { font-size: 14px; font-weight: 800; color: rgba(0, 0, 0, 0.9); }
.sns-header { position: absolute; right: 40px; bottom: 40px; z-index: 999; }
.sns-header ul { font-size: 0; }
.sns-header li { display: inline-block; vertical-align: middle; }
.sns-header li a { font-size: 11px; display: block; color: #ffffff; width: 20px; line-height: 20px; text-align: center; transition: all 0.5s; }
.sns-header li a:hover { color: #657185; }
.page-common .subpage-body .awards-list thead th { font-family: 'Lintel W00'; font-weight: bold; }
/*----------------------------------
CONTACT
----------------------------------*/
.contact-line { margin-bottom: 20px; }
.contact-line input { width: 100%; line-height: 80px; height: 80px; background: none; border: 1px solid #ccc; box-sizing: border-box; padding: 20px 10px 10px 10px; }
.contact-line .name { position: absolute; top: 10px; left: 10px; }
.contact-body { margin-top: -1px; }
.contact-info { text-align: center; font-size: 15px; }
.contact-info > dd { margin-bottom: 40px; }
.contact-info > dd > a { text-decoration: underline; }
.contact-info > dd > a.un { text-decoration: none; }
.contact-info ul li { display: inline-block; vertical-align: middle; }
.contact-info ul { padding: 0; }
.contact-info ul li a { display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; }
.contact-info dt span { font-weight: lighter; font-size: 13px; }
.contact-info dt { margin-bottom: 5px; }
.sitemap { text-align: center; font-size: 0; }
.sitemap li a { display: block; text-align: center; line-height: 50px; font-size: 14px; height: 50px; }
.sitemap li { display: inline-block; vertical-align: top; width: 20%; }
/*----------------------------------
SPLASH
----------------------------------*/
.splash-body { position: fixed; z-index: -1000; top: 0%; left: 0; height: 100%; width: 100%; }
.splash-body.active { z-index: 1000; }
.splash-body .mask { position: absolute; top: -100%; left: 0%; height: 100%; width: 100%; }
.single-slip-bg, .splash-body .mask * { vertical-align: bottom; }
.splash-body .mask span { display: block; width: 100%; height: 100%; }
#splash-in .m1 span, #splash-in .m1 polygon { fill: rgba(236, 236, 236, 1); background: rgba(236, 236, 236, 1); }
#splash-in .m2 span, #splash-in .m2 polygon { fill: rgba(13, 24, 41, 1); background: rgba(13, 24, 41, 1); }
#splash-in .m3 span, #splash-in .m3 polygon { fill: rgba(6, 6, 13, 1); background: rgba(6, 6, 13, 1); }
#splash-in .bottom { margin-top: -1px; }
#splash-in .top { margin-bottom: -1px; }
.no-found { height: 100%; width: 100%; }
.no-found .table { height: 100%; width: 100%; }
.subpages.page-404 .font-outline { text-align: center; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1); transform: scale(1); box-sizing: border-box; }
.subpages.page-404 .font-outline { padding: 0 40px; margin: 0 auto; }
#notfound { opacity: 0.7; position: fixed; height: 100%; width: 100%; background: none; top: 0; left: 0; z-index: 1; }
.splash-project { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: -1000; }
.splash-project.active { z-index: 1000; }
.splash-project .in > div { position: absolute; height: 100%; width: 100%; }
.splash-project .in > div.height span, .splash-project .in > div.width { background: rgba(6, 6, 13, 1); }
.splash-project polygon { fill: rgba(6, 6, 13, 1); }
.splash-project .in > div.width { height: 300%; top: -150%; }
.splash-project .in > div.right { right: -100%; }
.splash-project .in > div.left { left: -100%; }
.splash-project .in > div.top svg { vertical-align: top; margin-top: -1px; }
.splash-project .in > div.bottom svg { vertical-align: bottom; margin-bottom: -1px; }
.splash-project .in > div.height span { display: block; width: 100%; height: 100%; }
.splash-project .top { left: 0; top: -100%; }
.splash-project .bottom { left: 0; bottom: -100%; }
.splash-lines{position:fixed;top:-40%;left:-100%;height:180%;width:100%;z-index:-9999;}
.splash-lines .splash-bar{height:50%;width:100%;background:#06060d;margin:-2px 0 0 -100%;}
.splash-lines .splash-bar.last{margin-top:-2px;}
.splash-lines .splash-bar{overflow:hidden;}
.splash-lines .splash-bar .s{width:100%;height:100%;position:relative;background:#06060d;-webkit-transform:skew(15deg,0deg) rotate(15deg);transform:skew(15deg,0deg) rotate(15deg);}
.splash-lines .in { -webkit-transform: skew(-15deg, 0deg) rotate(-15deg); transform: skew(-15deg, 0deg) rotate(-15deg); }
.splash-lines{background: rgba(6,6,12,0); transition:background 1s;}
.active.splash-lines { z-index: 10000; left: 0;}
.page-jump .splash-lines{background: rgba(6,6,12,1);}
.loader { opacity: 0; width: 100px; height: 100px; z-index: 1000000; top: 37px; left: 40px; position: fixed; transition: all 0.5s 0.2s; }
.loader img { vertical-align: bottom; }
.page-jump .loader { opacity: 1; }
.loader svg { height: 100%; width: 100%; }
.loader svg .clip { }
.page-jump .loader svg .clip { stroke-dasharray: 159.439px; -webkit-animation: pathload 0.5s linear infinite; animation: pathload 0.5s linear infinite; }
@-webkit-keyframes pathload {0% { stroke-dashoffset: 159.439px; } 50% { stroke-dashoffset: 0px; } 100% { stroke-dashoffset: -159.439px; }}
@keyframes pathload {0% { stroke-dashoffset: 159.439px; } 50% { stroke-dashoffset: 0px; } 100% { stroke-dashoffset: -159.439px; } }
/*----------------------------------
LOADING
----------------------------------*/
.load-mask { position: fixed; z-index: 0; top: 0; left: 0; height: 100%; width: 100%; background: rgba(23, 26, 34, 1); font-weight: 0; }
.load-mask span { display: block; height: 100%; width: auto; float: left; }
.load-mask span.mid { background: #06060d; height: 100%; width: 100%; }
.load-mask .bars { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.load-mask img { width: auto; height: 100%; vertical-align: top; }
.page-loaded_leave .load-mask { display: none !important; }
.page-loaded_leave body { background: #06060d; }
.toggle, .lang ul li a, .nav ul li a, .header h1 { transition: all 1s; opacity: 0; -webkit-transform: translate(0, -40px); transform: translate(0, -40px); }
.theme .back, .scale-in2, .scale-in { transition: all 1s; opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); }
.sns-header, .fv-layout > div, .fv-drag > div, .fv-controls a { transition: all 1s; opacity: 0; -webkit-transform: translate(0, 40px); transform: translate(0, 40px); }
.page-loaded .toggle, .page-loaded .sns-header, .page-loaded .scale-in2, .page-loaded .scale-in, .page-loaded .fv-layout > div, .page-loaded .fv-drag > div, .page-loaded .fv-controls a, .page-loaded .lang ul li a, .page-loaded .header h1, .page-loaded .nav ul li a { opacity: 1; -webkit-transform: translate(0, 0px); transform: translate(0, 0px); }
.fv-bg { opacity: 0; transition: all 3s 0.2s; }
.page-loaded-first .toggle { transition-delay: 0.2s; }
.page-loaded-first .header h1 { transition-delay: 0.0s; }
.page-loaded-first .nav ul li a.now-project { transition-delay: 0.2s; }
.page-loaded-first .nav ul li a.now-about { transition-delay: 0.2s; }
.page-loaded-first .nav ul li a.now-careers { transition-delay: 0.2s; }
.page-loaded-first .nav ul li a.now-awards { transition-delay: 0.2s; }
.page-loaded-first .nav ul li a.now-contact { transition-delay: 0.2s; }
.page-loaded-first #lang-jp { transition-delay: 0.4s; }
.page-loaded-first #lang-en { transition-delay: 0.4s; }
.page-loaded-first .scale-in { transition-delay: 0.0s; }
.page-loaded-first .scale-in2 { transition-delay: 0.2s; }
.page-loaded-first .scale-in.button { transition-delay: 0.4s; }
.page-loaded-first .fv-layout > div { transition-delay: 0.0s; }
.page-loaded-first .fv-layout > div:first-child { transition-delay: 0.0s; }
.page-loaded-first .fv-drag > div.right { transition-delay: 0.2s; }
.page-loaded-first .fv-drag > div.mid { transition-delay: 0.2s; }
.page-loaded-first .fv-drag > div.left { transition-delay: 0.2s; }
.page-loaded-first #fv-prev { transition-delay: 0.4s; }
.page-loaded-first #fv-next { transition-delay: 0.4s; }
.first-load { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #06060d; z-index: 1000000; text-align: center; }
.first-load p { opacity: 1; font-weight: 400; color: rgb(109, 122, 143); text-align: center; text-transform: uppercase; letter-spacing: 3px; }
.first-load .table { height: 100%; width: 100%; }
.first-load #logo { width: 350px; margin: 0 auto; text-align: center; }
.first-load #logo path { transition: all 0.4s; }
.first-load #logo .b.l-st7 { transition-delay: 0s; }
.first-load #logo .f.l-st7 { transition-delay: 0.06s; }
.first-load #logo .b.l-st6 { transition-delay: 0.12s; }
.first-load #logo .f.l-st6 { transition-delay: 0.18s; }
.first-load #logo .b.l-st5 { transition-delay: 0.24s; }
.first-load #logo .f.l-st5 { transition-delay: 0.30s; }
.first-load #logo .b.l-st4 { transition-delay: 0.36s; }
.first-load #logo .f.l-st4 { transition-delay: 0.42s; }
.first-load #logo .b.l-st3 { transition-delay: 0.48s; }
.first-load #logo .f.l-st3 { transition-delay: 0.54s; }
.first-load #logo .b.l-st2 { transition-delay: 0.60s; }
.first-load #logo .f.l-st2 { transition-delay: 0.66s; }
.first-load #logo .b.l-st1 { transition-delay: 0.72s; }
.first-load #logo .f.l-st1 { transition-delay: 0.78s; }
.page-loaded-first .first-load #logo path { stroke-dashoffset: 0; }
.first-load #TM { transition: all 0.5s; transition-delay: 1s; opacity: 0; }
.page-loaded-first .first-load #TM { opacity: 1; }
/*----------------------------------
REEL
----------------------------------*/
.fv-yt-in { height: 100%; width: 100%; position: absolute; top: 0; left: 0; overflow: hidden; opacity: 1; transition: opacity 1s 0.3s; }
#fv-youtube { height: 100%; width: 100%; overflow: hidden; background: rgba(23, 26, 34, 1); }
.fv-yt-ol { height: 100%; width: 100%; }
.fv-yt-mask { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: rgba(23, 26, 34, 0.7); z-index: 2; transition: all 1s 0.3s; }
.fv-yt-in iframe { position: absolute; height: 100%; width: 100%; top: 0; left: 0; transition: all 1s; margin: 0; -webkit-transform: scale(2); transform: scale(2); }
.onScaled .fv-yt-in iframe { -webkit-transform: scale(1); transform: scale(1); z-index: 2;}
.page-front .nav ul li a { color: #ffffff; }
.page-front .theme h2 .thin { color: #ffffff; }
.fv-reel { transition: all 1s 0.3s; opacity: 0; }
.onPlay .fv-reel { opacity: 1; }
.onScaled .fv-yt-mask { opacity: 0; }
.page-reel .single-clip-bg span, .page-reel .single-clip-bg polygon { fill: rgba(23, 26, 34, 0.7); background: rgba(23, 26, 34, 0.7); }
.page-reel .fv-yt-in.on { display: block; opacity: 1; }
.page-reel .fv-yt-in { opacity: 0; }
.page-loaded .fv-bg { opacity: 1; }
.fv-in .img { opacity: 0.2; }
.fv-bg { background: rgba(23, 26, 34, 1); }
/*----------------------------------
REEL - NAVIGATION
----------------------------------*/
.cube-ol { position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; }
.cube-wrap { position: relative; -webkit-transform: scale(0.9); transform: scale(0.9); }
.stage { position: absolute; top: 50%; left: 50%; -webkit-perspective: 100; -ms-perspective: 100; -o-perspective: 100; perspective: 100; z-index: 1;}
.face { position: absolute; z-index: 2; font-family: 'aircord'; font-size: 10px; color: #fff; text-indent: 1px; text-align: center; cursor: pointer; text-shadow: 1px 1px 1px #013875; }
.cube { position: relative; margin: 0 auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 0.8s cubic-bezier(0.460, 0.005, 0.305, 1); }
.cube > div { height: 100%; width: 100%; position: absolute; }
.face { position: absolute; top: 0px; left: 0px; }
.side_front { top: 0px; left: 0px; }
.side_back { top: 0px; left: 0px; }
.side_right { top: 0px; }
.side_left { top: 0px; }
.stage .cube { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.reel-loading .stage .cube { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: reelload; animation-name: reelload; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.460, 0.005, 0.305, 1); animation-timing-function: cubic-bezier(0.460, 0.005, 0.305, 1); }
.cube.c0, .cube.c0 > div { z-index: 1; }
.cube.c1, .cube.c1 > div { z-index: 2; }
.cube.c2, .cube.c2 > div { z-index: 3; }
.cube.c3, .cube.c3 > div { z-index: 4; }
.cube.c4, .cube.c4 > div { z-index: 5; }
.cube.c5, .cube.c5 > div { z-index: 5; }
.cube.c6, .cube.c6 > div { z-index: 4; }
.cube.c7, .cube.c7 > div { z-index: 3; }
.cube.c8, .cube.c8 > div { z-index: 2; }
.cube.c9, .cube.c9 > div { z-index: 1; }
.reel-loading .stage .cube.c0 { -webkit-animation-delay: 0s; animation-delay: 0s; }
.reel-loading .stage .cube.c1 { -webkit-animation-delay: 0.01s; animation-delay: 0.01s; }
.reel-loading .stage .cube.c2 { -webkit-animation-delay: 0.02s; animation-delay: 0.02s; }
.reel-loading .stage .cube.c3 { -webkit-animation-delay: 0.03s; animation-delay: 0.03s; }
.reel-loading .stage .cube.c4 { -webkit-animation-delay: 0.04s; animation-delay: 0.04s; }
.reel-loading .stage .cube.c5 { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
.reel-loading .stage .cube.c6 { -webkit-animation-delay: 0.06s; animation-delay: 0.06s; }
.reel-loading .stage .cube.c7 { -webkit-animation-delay: 0.07s; animation-delay: 0.07s; }
.reel-loading .stage .cube.c8 { -webkit-animation-delay: 0.08s; animation-delay: 0.08s; }
.reel-loading .stage .cube.c9 { -webkit-animation-delay: 0.09s; animation-delay: 0.09s; }
.stage .cube.c0 { transition-delay: 0s; }
.stage .cube.c1 { transition-delay: 0.01s; }
.stage .cube.c2 { transition-delay: 0.02s; }
.stage .cube.c3 { transition-delay: 0.03s; }
.stage .cube.c4 { transition-delay: 0.04s; }
.stage .cube.c5 { transition-delay: 0.05s; }
.stage .cube.c6 { transition-delay: 0.06s; }
.stage .cube.c7 { transition-delay: 0.07s; }
.stage .cube.c8 { transition-delay: 0.08s; }
.stage .cube.c9 { transition-delay: 0.09s; }
@-webkit-keyframes reelload {
0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
@keyframes reelload {
0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
.cube-wrap:hover .cube.c0 { -webkit-transform: rotateY(180deg) translate(-5px, 0px); transform: rotateY(180deg) translate(-5px, 0px); }
.cube-wrap:hover .cube.c1 { -webkit-transform: rotateY(180deg) translate(-4px, 0px); transform: rotateY(180deg) translate(-4px, 0px); }
.cube-wrap:hover .cube.c2 { -webkit-transform: rotateY(180deg) translate(-3px, 0px); transform: rotateY(180deg) translate(-3px, 0px); }
.cube-wrap:hover .cube.c3 { -webkit-transform: rotateY(180deg) translate(-2px, 0px); transform: rotateY(180deg) translate(-2px, 0px); }
.cube-wrap:hover .cube.c4 { -webkit-transform: rotateY(180deg) translate(-1px, 0px); transform: rotateY(180deg) translate(-1px, 0px); }
.cube-wrap:hover .cube.c5 { -webkit-transform: rotateY(180deg) translate(0px, 0px); transform: rotateY(180deg) translate(0px, 0px); }
.cube-wrap:hover .cube.c6 { -webkit-transform: rotateY(180deg) translate(1px, 0px); transform: rotateY(180deg) translate(1px, 0px); }
.cube-wrap:hover .cube.c7 { -webkit-transform: rotateY(180deg) translate(2px, 0px); transform: rotateY(180deg) translate(2px, 0px); }
.cube-wrap:hover .cube.c8 { -webkit-transform: rotateY(180deg) translate(3px, 0px); transform: rotateY(180deg) translate(3px, 0px); }
.cube-wrap:hover .cube.c9 { -webkit-transform: rotateY(180deg) translate(4px, 0px); transform: rotateY(180deg) translate(4px, 0px); }
.cube > div { background: url(../img/s.png) no-repeat center; background-size: 30px; }
.cube.c0 > div { background-position: center 0px }
.cube.c1 > div { background-position: center -2px }
.cube.c2 > div { background-position: center -4px }
.cube.c3 > div { background-position: center -6px }
.cube.c4 > div { background-position: center -8px }
.cube.c5 > div { background-position: center -10px }
.cube.c6 > div { background-position: center -12px }
.cube.c7 > div { background-position: center -14px }
.cube.c8 > div { background-position: center -16px }
.cube.c9 > div { background-position: center -18px }
/*----------------------------------
------------------------------------
RESPONSIVE
----------------------------------
----------------------------------*/
body { -webkit-text-size-adjust: 100%; }
.theme h2 .front span { display: inline-block; }
.theme h2 .front span br { display: none; }
.theme { z-index: 10; top: 50%; left: 50%; width: 1000px; position: absolute; margin: -170px 0 0 -500px; text-align: center; }
.theme h2 { line-height: 1.2; text-align: center; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); font-size: 70px; letter-spacing: 5px; font-family: 'Transat W01'; }
.theme h2 .front { transition: all 0.5s; color: #ffffff; }
.theme .back { margin: 48px 0 50px 0; }
.theme h2 { line-height: 1.8; letter-spacing: 2px; position: relative; }
.theme h2 .thin { opacity: 1; font-weight: 400; color: rgb(109, 122, 143) }
.project-title h2, .theme h2 { font-size: 11px; }
.theme { margin-top: -125px; }
.project-title { margin: -95px 0 0 -250px; }
.theme .back { height: 80px; }
/*----------------------------------
PC
----------------------------------*/
@media screen and (min-width:1400px) {
#firstview .font-outline.put{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
@media screen and (min-width:1500px) {
#firstview .font-outline.put{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@media screen and (min-width:1024px) {
.add-svg-fonts, .select-category { display: none !important; }
.project-thumb { opacity: 0; }
.full-slider-body { transition: all 0.5s; }
.page-enter .full-slider-body { opacity: 0.9; }
/* HOVER */
.project-pager a:hover { border: 1px solid rgba(255, 255, 255, 0); }
.button:hover .svg svg .btn_front path.st1 { stroke-dashoffset: 0px; }
.button:hover .svg svg .btn_front path.st0 { stroke-dashoffset: 0px; }
.button:hover .svg svg .btn_back path { stroke: rgba(255, 255, 255, 1); }
.button-rect:hover .svg svg .btn_front path { stroke-dashoffset: 0px; }
.button-rect:hover .svg svg .btn_front path { stroke-dashoffset: 0px; }
.button-rect:hover .svg svg .btn_back path { stroke: rgba(255, 255, 255, 1); }
.button-black:hover .svg svg .btn_back path { stroke: rgba(0, 0, 0, 1); }
.fv-layout-list .fv-list a:hover .cover { opacity: 1; }
.page-common .about-activitis a:hover .bg { background: rgba(23, 26, 34, 0); }
.page-enter a:hover #logo .f.l-st7 { transition: all 0.2s; transition-delay: 0.18s; stroke-dashoffset: 180.858px; stroke-dasharray: 180.858px; }
.page-enter a:hover #logo .f.l-st6 { transition: all 0.2s; transition-delay: 0.15s; stroke-dashoffset: 67px; stroke-dasharray: 67px; }
.page-enter a:hover #logo .f.l-st5 { transition: all 0.2s; transition-delay: 0.12s; stroke-dashoffset: 108.314px; stroke-dasharray: 108.314px; }
.page-enter a:hover #logo .f.l-st4 { transition: all 0.2s; transition-delay: 0.09s; stroke-dashoffset: 153.275px; stroke-dasharray: 153.275px; }
.page-enter a:hover #logo .f.l-st3 { transition: all 0.2s; transition-delay: 0.06s; stroke-dashoffset: 165.441px; stroke-dasharray: 165.441px; }
.page-enter a:hover #logo .f.l-st2 { transition: all 0.2s; transition-delay: 0.03s; stroke-dashoffset: 108.814px; stroke-dasharray: 108.814px; }
.page-enter a:hover #logo .f.l-st1 { transition: all 0.2s; transition-delay: 0s; stroke-dashoffset: 183.637px; stroke-dasharray: 183.637px; }
.page-enter a:hover #TM { opacity: 0; transition-delay: 0s; }
}
@media screen and (max-width:1500px) {
.fv-layout-list a { height: 240px; }
}
@media screen and (max-width:1400px) {
.fv-layout-list a { height: 240px; width: 25%; }
}
@media screen and (max-width:1300px) {
.fv-layout-list a { height: 190px; width: 25%; }
}
@media screen and (max-width:1200px) {
.fv-layout-list a { height: 230px; width: 33%; }
}
@media screen and (max-width:1180px) {
.nav ul li a { padding: 0 30px; }
.body { padding: 0 40px; box-sizing: border-box; }
.page-project .project-thumb { margin: 0px !important; width: 33.333%; height: 230px; box-sizing: border-box; padding: 5px; }
.page-project .project-thumb .in { padding: 0 !important; overflow: hidden; }
}
/*----------------------------------
PAD
----------------------------------*/
.toggle { display: none; cursor: pointer; position: fixed; top: 0; right: 0; z-index: 9999; }
.toggle span { display: block; height: 2px; width: 20px; background: #fff; transition: all 0.5s; }
.toggle span.t2 { margin: 5px 0; }
.toggle .in { padding: 32px 30px; width: 20px; }
.add-svg-fonts { height: 30px; margin: 10px 0; }
.add-svg-fonts a { color: #fff; font-size: 20px; letter-spacing: 3px; display: block; margin: 0; padding-bottom: 20px; }
.add-svg-fonts a { opacity: 0; z-index: -999; }
.add-svg-fonts a.on { opacity: 1; z-index: 1; }
.spin-body { display: none; }
@media screen and (max-width:1024px) {
.no-tube .single-title h2 { padding: 0px 30px; }
.page-project .project-thumb { height: 160px; }
.font-outline, .font-outline { opacity: 0; transition: opacity .5s; color: rgba(255, 255, 255, 0.9); font-weight: 400; font-size: 60px; letter-spacing: 0px; font-family: 'aircord'; font-weight: normal; }
.single-title h2 { font-size: 50px; letter-spacing: 4px; font-weight: 800; padding: 0px 100px 30px 100px; line-height: 1.2; }
.font-outline.on, .font-outline.on { opacity: 1; }
.theme .back { margin: 20px 0 50px 0; }
.theme .back { -webkit-transform: scale(1) translate(0, 0px); transform: scale(1) translate(0, 0px); }
.page-loaded .theme .back { -webkit-transform: scale(1) translate(0, 0px); transform: scale(1) translate(0, 0px); }
.theme h2 { line-height: 1.5; }
.single-title { background: rgba(23, 26, 34, 0.9); }
.subpages .font-outline { -webkit-transform: scale(0.5); transform: scale(0.5); }
.fv-drag, .controls-bg, .single-clip-bg, .slide-youtube-in, .sns-header { display: none !important; }
.nav ul li a.on { border-bottom: none; }
.page-common .subpage-body .subtitle span { display: inline; }
.full-slider-body { height: 310px; }
.pc { display: block !important; }
.nav.pc { display: table !important; }
.window { background: rgba(0, 0, 0, 0.1); }
.add-svg-fonts, .about-project a span br, .pad, .slick-dots { display: none !important; }
.select-category { display: block !important; }
.fv-ol { width: 200%; margin: 0 0 0 -50%; }
.header h1 a { line-height: 80px; height: 80px; }
.subpages .header h1 a { display: none; }
.subpages .font-outline { width: 100%; height: 1em; overflow: hidden; transition: all 0.5s 1s; -webkit-transform: scale(1); transform: scale(1); color: #fff; font-size: 30px; letter-spacing: 0px; font-family: 'aircord'; font-weight: normal; opacity: 0; }
.page-enter .subpages .font-outline { opacity: 1 }
.fv-ol { width: 100%; margin: 0 0 0 0; }
.fv-ol .o { width: 100%; float: none; }
.fv-in .img { opacity: 0.1; -webkit-transform: skew(0deg, 0); transform: skew(0deg, 0); width: 100%; height: 100%; background-attachment: auto; position: absolute; top: 0; left: 0; }
.fv-bd { -webkit-transform: skew(0deg, 0); transform: skew(0deg, 0); }
.on-layout-normal #fv-layout-normal { opacity: 1; }
.on-layout-normal #fv-layout-list { opacity: 0.1; }
.on-layout-list #fv-layout-normal { opacity: 0.1; }
.on-layout-list #fv-layout-list { opacity: 1; }
.add-svg-fonts a { font-weight: 400; }
/* HOME */
.toggle { display: block; background: #05050C; }
.is_home .toggle { background: none; }
.page-home .toggle { background: none; }
.nav { position: fixed; top: 0; left: 0; z-index: -9997; width: 100%; height: 100%; display: table; background: #06060d; opacity: 0; transition: opacity 0.5s, z-index 0s 0.5s; }
.nav ul { vertical-align: middle; display: table-cell; }
.nav ul li { display: block; }
.nav ul li a { font-size: 16px; letter-spacing: 4px; }
.lang { position: fixed; z-index: 9998; top: auto; bottom: -60px; margin: 0; transition: all 0.5s; opacity: 0; }
.nav_opened .nav { opacity: 1; z-index: 9997; transition: opacity 0.5s, z-index 0s; }
.nav_opened .lang { opacity: 1; -webkit-transform: translate(0, -60px); transform: translate(0, -60px); }
.nav_opened .toggle span.t2 { opacity: 0; }
.nav_opened .toggle span.t1 { -webkit-transform: rotate(45deg) translate(5px, 5px); transform: rotate(45deg) translate(5px, 5px); }
.nav_opened .toggle span.t3 { -webkit-transform: rotate(-45deg) translate(5px, -5px); transform: rotate(-45deg) translate(5px, -5px); }
.project-thumb { opacity: 1; }
.project-outline { text-align: center; }
.project-body { padding: 0; }
.about-outline { padding: 50px 0 230px 0; }
.awards-slider .cover { width: 100%; }
.awards-slider .slide ul li { width: 130px; }
.awards-slider .cover { background-repeat: no-repeat !important; background-size: 100% !important; }
.footer-head { padding: 142px 0; background: #f4f4f4; }
.body { padding: 0 40px; box-sizing: border-box; }
/* PROJECT */
.select-category { height: 40px; width: 200px; color: rgba(255, 255, 255, 0.9); display: block; font-family: 'Transat W01'; letter-spacing: 3px; text-transform: uppercase; font-size: 11px; text-align: center; cursor: pointer; background: none; text-align: left; box-sizing: border-box; padding-left: 16px; background: url(../img/bg_select_right.png) no-repeat center right; background-size: 37px; border: 1px solid rgba(255, 255, 255, 0.1); }
.full-slider-body { opacity: 0; transition: all 0.5s 1s; }
.page-enter .full-slider-body { opacity: 1; }
.subpages-header { min-height: 200px; padding: 110px 0 0 0; }
.project-thumb { height: 150px; }
.single-title h2 { letter-spacing: 6px; }
/* SINGLE */
.page-single .slick-arrow, .single-slide-nav, .slidein-bg, .single-slide-thumbs { display: none !important; }
.slidein-header.nocover .in .img { top: 0; }
.slidein { left: 0; top: 0; width: 100%; position: static; z-index: 0; }
.page-single .slick-dots { display: block !important; }
.page-single .slick-dots li { margin: 0; }
.page-single .slick-dots li { width: 100px; }
.page-single .slick-dots li button { display: block; height: 20px; width: 100%; background: none; border-bottom: 1px solid rgba(0, 0, 0, 0.9); border-radius: 0px; }
.page-single .slick-dots button { opacity: 0.2; }
.page-single .slick-dots .slick-active button { opacity: 1; }
.lang ul li a { line-height: 60px; height: 60px; }
.sns-header { position: fixed; bottom: -60px; width: 100%; left: 0; z-index: 9997; transition: all 0.5s; opacity: 0; }
.sns-header ul { text-align: center; }
.sns-header ul li a { width: 40px; line-height: 60px; color: #fff; }
.nav_opened .sns-header { opacity: 1; -webkit-transform: translate(0, -60px); transform: translate(0, -60px); }
.subpages.page-404 .font-outline { -webkit-transform: scale(0.8); transform: scale(0.8); }
.spin-body { display: block; position: fixed; bottom: 11px; left: 11px; color: #fff; opacity: 0; transition: opacity 0.5s, z-index 0s 0.5s; z-index: -999999; -webkit-animation: spin 0.5s linear infinite; animation: spin 0.5s linear infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
.page-jump .spin-body { z-index: 999999; opacity: 1; transition: opacity 0.5s, z-index 0s; }
.spin-body span { display: block; height: 40px; width: 40px; line-height: 40px; text-align: center; font-size: 16px; font-weight: 400; }
/* REEL */
.page-reel #fv-youtube { background: rgba(23, 26, 34, 1); }
.page-reel #fv-youtube .in { opacity: 0.3; }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/*----------------------------------
SP
----------------------------------*/
.is_sp .theme h2 { letter-spacing: 3px; }
.is_sp .add-svg-fonts a { font-weight: bold; font-family: 'Transat W01', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
.is_sp .add-svg-fonts .font-outline{letter-spacing: 3px;}
.is_sp .font-outline,
.is_sp .font-outline { opacity: 0; transition: opacity .5s; color: rgba(255, 255, 255, 0.9); font-size: 60px; letter-spacing: 0px; }
.is_sp .subpages .font-outline { font-size: 20px; }
.is_sp .first-load #logo { width: 150px; }
.is_sp .fv-layout-list .fv-list { font-size: 0; overflow: scroll; webkit-overflow-scrolling: touch; padding: 60px 15px 70px 15px; }
.is_sp .fv-layout-list a { height: 120px; width: 100%; }
.is_sp .fv-layout-list .fv-list h3 { font-size: 11px; }
.is_sp .fv-layout { right: 15px; bottom: 15px; position: fixed;}
.is_sp .subpages.page-404 .font-outline { -webkit-transform: scale(1); transform: scale(1); padding: 0 30px; width: 100%; margin-bottom: 20px; height: auto; color: #fff; font-family: 'aircord'; font-size: 30px; }
.is_sp .subpages.page-404 .font-outline span { transition: all 0.7s; opacity: 0; }
.is_sp .subpages.page-404 .font-outline.on span { opacity: 1; }
.is_sp .slick-dots,
.is_sp .add-svg-fonts { display: block !important; }
.is_sp .project-info,
.is_sp .page-project .project-bg,
.is_sp .subpages-header .subtitle,
.is_sp .about-header,
.is_sp .slick-arrow,
.is_sp .project-title,
.is_sp .sp { display: none !important; }
.is_sp .header { padding: 0 15px; }
.is_sp .header h1 a { line-height: 60px !important; height: 60px !important; }
.is_sp .page-home .header h1 a { display: block !important; }
.is_sp .slick-dots { bottom: -30px; left: 0; }
.is_sp .project-body .slick-dots button { -webkit-transform: skew(0deg, 15deg); transform: skew(0deg, 15deg); background: #17325C; }
.is_sp .toggle .in { padding: 22px 20px; }
.is_sp .nav ul li a { line-height: 40px; height: 40px; font-size: 12px; }
.is_sp .project-title h2,
.is_sp .theme h2 { font-size: 20px; line-height: 1.5; }
.is_sp .theme h2 .front { letter-spacing: 3px; }
.is_sp .theme .back { -webkit-transform: scale(0.2); transform: scale(0.2); height: 10px; }
.is_sp #background { opacity: 1; }
.is_sp .theme { top: 50%; left: 0; width: 100%; position: fixed; margin: -73px 0 0 0; padding: 0 30px; box-sizing: border-box; }
.is_sp .theme h2 { font-size: 11px; line-height: 1.5 !important; }
.is_sp .add-svg-fonts a { font-size: 22px; }
.is_sp .add-svg-fonts { position: relative; height: 33px; margin: 20px 0; }
.is_sp .add-svg-fonts a { font-size: 22px; top: 0; font-family: 'Lintel W00' !important; font-weight: 800 !important; }
.is_sp .header h1 a img { width: 80px; }
.is_sp .body { padding: 0 25px; }
.is_sp .project-outline.body{padding: 0 5px;}
.is_sp .spacer-m { height: 30px; }
.is_sp .project-thumb { margin: 0 0 0 0 !important; width: 100%; }
.is_sp .project-body { height: auto !important; }
.is_sp .about-header,
.is_sp .about-text { width: 100%; padding: 0 15px; box-sizing: border-box; }
.is_sp .about-text p { line-height: 2em; }
.is_sp .about-outline { padding: 60px 0; }
.is_sp .awards { padding: 60px 0; background: #0D1829; }
.is_sp .awards-slider h2 { letter-spacing: 3px; font-size: 16px; }
.is_sp .awards-slider .slide ul li { width: 20%; }
.is_sp .awards-slider .cover { display: block; height: 40px; }
.is_sp .awards .slick-dots { display: none !important; }
.is_sp .footer-head h3 { font-size: 14px; }
.is_sp .footer-head { padding: 60px 0; }
.is_sp .footer-in:first-child { margin-bottom: 20px; }
.is_sp .footer-foot { line-height: 60px; }
.is_sp .footer-foot address { float: none; width: 100%; text-align: center; }
.is_sp .fv-controls { bottom: 15px; left: 15px; position: fixed;}
.is_sp .font-outline { transition: all 0.4s ease-in-out; }
.is_sp .subpages-header .button { display: none !important; }
.is_sp .theme h2 .front span br { display: block; }
/* SUBPAGES */
.is_sp .subpages-header { min-height: 0; padding: 80px 0 0 0 !important; }
.is_sp .subpages-header-body { margin: 30px 0; }
.is_sp .subpages-header .subtitle { width: 100%; margin: -10px 0 50px 0; }
.is_sp .full-slider-body { height: 140px; }
.is_sp .spacer-l { height: 60px; }
.is_sp .page-common .subpage-body h3 { text-transform: uppercase; margin: 0 0 30px 0; color: rgba(0, 0, 0, 0.9); letter-spacing: 2px; text-align: center; overflow: hidden; font-weight: 400; font-size: 16px; }
/* PROJECT */
.is_sp .project-outline { text-align: left; }
.is_sp .page-project .project-thumb { margin: 0px !important; width: 50%; height: 110px; box-sizing: border-box; padding: 5px; }
.is_sp .page-project .project-thumb .in { padding: 0 !important; overflow: hidden; }
.is_sp .page-project .project-list { padding: 20px 0 60px 0; }
.is_sp .project-pager { margin-bottom: 60px; }
.is_sp .select-category { width: 50%; }
.is_sp .slidein-header.nocover .img { margin: 0 auto; }
.is_sp .single-slide-bg { display: none; }
/* ABOUT */
.is_sp .about-activitis a { display: inline-block; vertical-align: middle; width: 50%; height: 110px; }
.is_sp .page-common .about-activitis a span { line-height: 1em; height: 110px; font-size: 12px; padding-top: 50px; box-sizing: border-box; }
.is_sp .about-project .contain { height: 20px; }
.is_sp .about-project a span { margin: 20px 0 0 0; font-size: 12px; line-height: 1.5; }
.is_sp .about-project .contain { margin: 0; }
.is_sp .page-common .subpage-body .list-layout dt,
.is_sp .list-layout dt { width: 100px; }
.is_sp .page-common .subpage-body .list-layout dd { padding: 0 0 20px 100px; margin-bottom: 20px; }
.is_sp .page-common .subpage-body .list-layout dd,
.is_sp .page-common .subpage-body .list-layout dt { font-size: 11px; }
.is_sp .about-company-right { height: 200px; width: 100%; }
.is_sp .about-company-right #map { position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; }
.is_sp .page-about .subpages-header,
.is_sp .page-careers .subpages-header { min-height: 80px; }
.is_sp .page-common .subpage-body .list-layout.about-project dd { padding: 0 0 20px 110px; margin-bottom: 20px; font-size: 11px; }
.is_sp .page-common .subpage-body .list-layout.about-project dd { line-height: 2 }
/* CAREERS */
.is_sp .about-facility .bd { float: none; width: 100%; box-sizing: border-box; padding: 0px !important; }
.is_sp .about-facility .bd .cover { height: 130px; position: relative; opacity: 0.9; margin-bottom: 30px; }
.is_sp .about-facility .bd.left { margin-bottom: 30px; }
.is_sp .about-facility .bd .cover span { line-height: 130px; height: 130px; font-size: 13px; }
.is_sp .about-facility .bd p { font-size: 12px; line-height: 1.8; }
.is_sp .recruit-tab { margin: 0 0 50px 0; }
.is_sp .recruit { padding: 0 !important; }
.is_sp .recruit-tab-body { padding: 0 15px; }
.is_sp .recruit-tab { overflow: scroll; padding: 0 20px; webkit-overflow-scrolling: touch; box-sizing: border-box; }
.is_sp .recruit-tab .table { width: 800px; }
.is_sp .page-common .about-activitis a.ov-1 { display: none !important; }
/* AWARDS */
.is_sp .awards-list th:first-child,
.is_sp .awards-list td:first-child { padding: 30px 20px 30px 0; }
.is_sp .awards-list th,
.is_sp .awards-list td { box-sizing: border-box; padding: 0 20px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0px; }
.is_sp .list-awards { text-align: center; margin: 20px 0; font-size: 0; }
.is_sp .list-awards .cover { width: 100%; height: 79px; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; }
.is_sp .list-awards li { margin: 0; width: 50%; padding: 0 15px; box-sizing: border-box; display: inline-block; vertical-align: top; }
/* SINGLE */
.is_sp .single-info { padding: 50px 15px 0 15px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.is_sp .single-section { margin-bottom: 60px; }
.is_sp .single-pager a { height: 140px; width: 100px; }
.is_sp .pager-inner { height: 50px; width: 70px; }
.is_sp .single-footer { padding-bottom: 0px; }
.is_sp .single-awards .in { margin-bottom: 30px; }
.is_sp .single-contents h4,
.is_sp .single-contents h3,
.is_sp .single-section h2 { font-size: 20px !important; }
.is_sp .slidein-header .in { padding: 0; }
.is_sp .single-slider-body,
.is_sp .slidein-header { min-height: 190px; }
.is_sp .page-single .slick-dots li { width: 30px; }
.is_sp .single-slider { margin-top: 0; padding-bottom: 30px; }
.is_sp .single-ex .table { width: 100%; margin: 0 auto; padding: 30px 15px; box-sizing: border-box; }
.is_sp .single-ex { padding-bottom: 0; }
.is_sp .single-title h2 { color: rgba(255, 255, 255, 0.9); font-size: 22px; letter-spacing: 3px; font-weight: 800; text-align: center; box-sizing: border-box; padding: 0 30px; }
.is_sp .client { width: 100%; margin: 30px auto 0 auto; }
.is_sp .client .cell { vertical-align: top; padding: 0 10px; box-sizing: border-box; }
.is_sp .single-title .button { margin-top: 30px; }
.is_sp .client h3 { font-size: 10px; }
.is_sp .client li,
.is_sp .client li a { font-size: 10px; }
.is_sp .single-ex p { font-size: 12px; text-align: left; }
.is_sp .single-credits ul li,
.is_sp .single-awards li { font-size: 12px; text-align: left; }
.is_sp .single-contents p { font-size: 12px; }
.is_sp .client p { font-size: 10px; }
.is_sp .single-thumb { min-height: 400px; }
.is_sp .single-contents .middle-image { width: 100%; margin: 40px 0; margin-left: 0; }
.is_sp .single-contents .middle-image img { box-shadow: none; }
.is_sp .single-contents .large-image .ex { display: none; }
.is_sp .single-contents .large-image h3 { font-size: 14px; letter-spacing: 2px; }
.is_sp .page-common .subpage-body .subtitle span { font-size: 12px; font-weight: normal; }
.is_sp .subtitle { margin: 10px 0 50px 0; }
.is_sp .single-pager .bd { display: block; height: 1px; width: 120px; background: #000000; opacity: 0.1; position: absolute; left: 50%; margin: -44px 0 0 -60px; top: 50%; }
/* CONTACT */
.is_sp .contact-info { padding: 20px 0 0 0; }
.is_sp .sitemap li { width: 100%; }
.is_sp .page-awards .subpege-top,
.is_sp .page-contact .subpege-top { margin-top: 10px; }
.is_sp .pager-inner .in { overflow: hidden; height: 100%; width: 100%; }
/* BACKGROUND */
.is_sp .page-reel #fv-youtube .in { opacity: 0.4;}
.is_sp .fv-in .img { opacity: 0.2;}
.is_sp .single-title { background: rgba(23, 26, 34, 0.8);}
/*----------------------------------
BROWS
----------------------------------*/
.img_spash { position: relative; display: none !important; }
.img_spash img { vertical-align: bottom; width: 100%; }
.q-0 .img_spash { display: block !important; }
.q-2 .font-outline, .q-0 .font-outline { font-family: 'aircord' !important; }
.q-0 .about-header { background: url(../img/logo.png) no-repeat center bottom; background-size: contain; }
.q-0 #logo { opacity: 0; }
.q-0 .subpege-top { display: none !important; }
.q-0 .awards-body, .q-0 .contact-body { padding: 0; margin: 0; }
.q-0 .page-awards .subpages-header, .q-0 .page-contact .subpages-header { padding: 250px 0px 0 0; min-height: 0px; height: 0; }
.recruit-tab .table .cell div.bg { height: 60px; }
#logoes .low { width: 300px; margin: 0 auto; }
#logoes .low p { text-align: center; }
.q-0 .theme h2 { line-height: 1; }
.q-0 .header h1 a { width: 100px; height: 96px; background: url(../img/img_logo.png) center no-repeat; background-size: 100px; }
.q-0 .fv-layout-list { background: #06060d; }
.q-0 .page-reel .single-clip-bg .in { display: none !important; }
.q-0 .page-reel .fv-yt { transition: opacity 1s; opacity: 0.3; }
.q-0 .onScaled.page-reel .fv-yt { opacity: 1; }
.q-0 .fv-ol { width: 100%; margin: 0 0 0 0; }
.q-0 .fv-ol .o { width: 100%; float: none; }
.q-0 .fv-in .img { opacity: 0.1; -webkit-transform: skew(0deg, 0); transform: skew(0deg, 0); width: 100%; height: 100%; background-attachment: auto; position: absolute; top: 0; left: 0; }
.q-0 .fv-bd { -webkit-transform: skew(0deg, 0); transform: skew(0deg, 0); }
.q-0 .onPlay.page-reel .fv-yt { opacity: 0.3; }
.q-0 .onScaled.page-reel .fv-yt { opacity: 1; }
.q-0 .onPlay.page-reel .single-clip-bg { background: #000; opacity: 0.001 }
.q-0 .page-reel .fv-yt-in { background: none !important; }
.q-0 .side_back, .q-0 .side_right, .q-0 .side_left { display: none; }
.q-0 .stage:hover .cube { -webkit-transform: rotateX(0); transform: rotateX(0); opacity: 0.5; }
.q-2 .font-outline, .q-0 .font-outline { opacity: 0; transition: opacity 1s; font-family: 'aircordtypeaircord_type'; font-size: 80px; color: rgba(255, 255, 255, 0.9); }
.q-2 .font-outline.on, .q-0 .font-outline.on { opacity: 1; }
/*----------------------------------
INDEX
----------------------------------*/
body, html { overflow: hidden; }
.theme .back { margin: 0 0 30px 0; }
.theme { z-index: 10; top: 50%; left: 50%; width: 1000px; position: absolute; margin: -75px 0 0 -500px; text-align: center; }
#firstview { position: relative; z-index: 2; }
#js-work-render { transition: all 0.6s; position: fixed; z-index: 1; top: 0; left: 0; opacity: 0; }
#js-work-render.on { opacity: 1; }
.main-title { font-size: 80px; color: rgba(255, 255, 255, 1); font-family: 'aircord'; margin-bottom: 24px; }
/* MENU */
.v2-menu { position: fixed; z-index: 999; height: 100%; width: 100%; left: -100%; transition: left 0s 0.6s; }
.v2-menu a { font-size: 40px; letter-spacing: 3px; color: rgba(255, 255, 255, 1); font-family: 'Lintel W00'; line-height: 1.4; display: block; transition: all 0.6s; opacity: 0; transform: translate(-100%, 0); font-weight: 700; }
.v2-menu .v2-nav-small a { line-height: 1.8; }
.v2-menu .bd { height: 100%; width: 100%; position: absolute; z-index: 2; top: 0; left: 0; }
.v2-menu .v2-nav-small { margin-top: 20px; }
.v2-menu .v2-nav-small a { font-size: 13px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); font-weight: bold; }
.v2-menu .v2-nav-small.v2-lang li { display: inline-block; vertical-align: top; padding-right: 5px; }
.v2-menu .v2-nav-small.v2-lang { margin: 30px 0 10px 0; }
.v2-menu .v2-nav-small.v2-lang li a { display: block; text-align: center; width: 32px; line-height: 30px; font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; }
.is_pc .v2-menu .v2-nav-small.v2-lang li:hover a, .v2-menu .v2-nav-small.v2-lang li.active a { color: rgba(255, 255, 255, 1); }
.is_pc .v2-menu .v2-nav-small.v2-lang li:hover a { border: 1px solid rgba(255, 255, 255, 0); }
.v2-menu .table { height: 100%; width: 100%; }
.v2-nav-ol { width: 50%; padding: 0 0 0 100px; box-sizing: border-box; }
.v2-menu .cell { vertical-align: middle; }
.v2-nav-ol ul li { position: relative; }
.v2-nav-ol ul li .hd { display: block; position: absolute; left: -55px; top: 50%; margin-top: -10px; height: 20px; width: 10px; transform: skew(-45deg, 0deg); overflow: hidden; }
.v2-nav-ol ul.v2-nav-small li .hd { height: 10px; margin-top: -5px; }
.v2-nav-ol ul li .hd span { display: block; height: 100%; width: 10px; background: rgba(0, 126, 163, 1); position: absolute; left: -100%; }
.v2-nav-ol ul li.active .hd span { transform: translate(100%, 0) !important; }
.v2-menu .bg { height: 100%; width: 100%; position: absolute; z-index: 1; top: 0; left: -100%; background-image: url(../img/v2-menu-bg.png); background-repeat: no-repeat; background-size: auto 100%; background-position: left center; transition: all 0.6s 0.1s; opacity: 0; }
.is_open_v2 .v2-menu .bg { transform: translate(100%, 0); opacity: 1; }
.is_open_v2 .v2-menu { left: 0; transition: left 0s 0s; }
.is_open_v2 .v2-menu a { opacity: 1; transform: translate(0, 0); }
/* TOGGLE */
.v2-toggle { position: fixed; z-index: 1001; height: 100px; width: 100px; top: 0; left: 0; cursor: pointer; }
.v2-toggle .ol { transition: all 0.4s 0s; width: 22px; height: 18px; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -12px; }
.v2-toggle .ol div { width: 22px; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.v2-toggle span { display: block; width: 100%; height: 100%; background: #fff; }
.v2-toggle .ol .it2 { margin: 5px auto; /*transition: all 0.5s 0.2s;*/ }
.v2-toggle .txt { position: absolute; color: rgba(255, 255, 255, 0.5); font-size: 12px; letter-spacing: 2px; line-height: 30px; top: 50%; left: 0; margin-top: -15px; font-family: 'Lintel W00'; font-weight: bolder; opacity: 0; transition: all 0.5s; }
.is_open_v2 .v2-toggle .txt { opacity: 1; transform: translate(100px, 0); }
.v2-close-right { display: none; position: fixed; z-index: 3; width: 50%; top: 0; right: 0; height: 100%; cursor: pointer; }
.is_open_v2 .v2-close-right { display: block; }
.v2-toggle .ol { transition: all 0.4s 0s; width: 22px; height: 22px; position: absolute; top: 50%; left: 50%; margin: -36px 0 0 -36px; padding: 26px 25px 24px 25px; }
.is_scrolling .v2-toggle .ol { background: #06060d; }
/* TITLE */
.index-video-title { position: fixed; z-index: 100; width: 100%; bottom: 60px; left: 30px; font-weight: bold; color: rgba(255, 255, 255, 0.8); font-size: 12px; letter-spacing: 1px; }
.index-video-title .hd { position: absolute; height: 4px; width: 40px; background: rgba(255, 255, 255, 0.1); top: 50%; margin-top: -2px; transform: skew(-45deg, 0deg); }
.index-video-title .bd { font-family: 'Lintel W00'; font-weight: 800; display: block; padding: 0 0 0 70px; color: rgba(255, 255, 255, 0.8); box-sizing: border-box; text-transform: uppercase; }
.index-video-title .hd { overflow: hidden; }
.index-video-title .hd .now { display: block; width: 100%; height: 100%; position: absolute; left: -100%; top: 0; background: rgba(0, 126, 163, 1);/*background: rgba(255, 255, 255, 1);*/ transform: translate(0, 0); transition: all 4s; }
.button { font-size: 12px; letter-spacing: 1px; }
.index-video-title-body { position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.7s; z-index: 1; }
.index-video-title .bd { transition: all 0.7s; transform: translate(0, 0%); padding: 20px 0 20px 70px; box-sizing: border-box; }
.index-video-title-body.active { opacity: 1; z-index: 2; }
.index-video-title-body.active .now { transform: translate(100%, 0); }
.index-video-title-body.leave { opacity: 0; }
.index-video-title .bd span { transition: all 0.8s cubic-bezier(0.4, 0.2, 0.24, 1.2); display: inline-block; vertical-align: top; transform: translate(0, 100%); opacity: 0; }
.index-video-title .active .bd span { transform: translate(0, 0%); opacity: 1; }
.index-video-title .leave .bd span { transform: translate(0, -100%); opacity: 0; }
.index-video-title-body.leave .now { transform: translate(200%, 0); transition: all 0.3s !important; }
.none { display: none !important; }
/* GO TO FONT */
.v2-goto-fonts { position: absolute; z-index: 100; height: 100px; width: 100px; top: 0; right: 0; }
.v2-goto-fonts .clip { stroke: rgba(255, 255, 255, 1); transition: all .8s; stroke-dashoffset: 0 !important; }
.v2-goto-fonts .font { height: auto; width: auto !important; }
.v2-goto-fonts .font svg { width: 30px; height: 30px; position: relative; left: 0; top: 0; }
.v2-goto-fonts .font-outline { width: 30px; height: 30px; left: 50%; margin: -15px 0 0 -15px; font-size: 26px; }
.v2-goto-fonts .font svg { margin: 0; }
.is_pc .v2-goto-fonts:hover .clip { stroke-dashoffset: 159.439px !important; }
.is_pc .v2-goto-fonts:hover .shadow .clip { opacity: 1; stroke-dashoffset: 0px !important; }
.v2-goto-fonts .shadow .clip { opacity: 0; stroke-dashoffset: -159.439px !important;/*stroke: rgba(255, 255, 255, 1);*//*stroke: rgba(255, 255, 255, 0.1);*/
stroke: rgba(0, 126, 163, 1); }
.v2-goto-fonts .shadow { opacity: 1; }
.font-outline .font .gr { /*display: none;*/ }
.subpages .v2-goto-fonts .font-outline { transform: scale(1); top: 50%; }
/* SP OR PAD */
.is_sp .main-title { font-size: 40px; margin-bottom: 14px; }
.is_sp .theme.fv-layout-normal { margin: -50px 0 0 0; }
.is_pad .v2-goto-fonts .font-outline, .is_sp .v2-goto-fonts .font-outline { font-size: 26px; opacity: 1; /*color: rgba(0, 126, 163, 1);*/ transition: none; }
.is_sp .index-video-title .bd { padding: 0; position: absolute; left: 0; bottom: -30px; display: block; }
.is_sp .index-video-title-body { width: 100%; }
.is_sp .v2-nav-ol { width: 100%; }
.is_sp .v2-menu a { font-weight: bold; font-size: 26px; line-height: 1.6 }
.is_sp .v2-menu .v2-nav-small a { font-size: 13px; letter-spacing: 2px; }
.is_sp .v2-menu .bg { background: #0a0a14; }
.is_pad .v2-close-right, .is_sp .v2-close-right { display: none !important; }
.is_sp .v2-goto-fonts, .is_sp .v2-toggle { height: 72px; width: 72px; }
.is_sp .v2-nav-ol { padding: 0 0 0 80px; }
.is_sp .v2-nav-ol ul li .hd { left: -45px; }
.is_open_v2.is_sp .v2-toggle .txt { transform: translate(80px, 0); }
.is_sp .v2-goto-fonts .font-outline { margin: -17px 0 0 -15px; }
/* BROWS */
.v2-goto-fonts { transition: opacity 0.5s !important; opacity: 0; font-family: 'aircord'; color: #fff; }
.v2-goto-fonts a { font-family: 'aircord'; color: #fff; }
.v2-goto-fonts .font { top: 0; }
.v2-goto-fonts { opacity: 1; }
.is_low .v2-goto-fonts { cursor: pointer; background: url(../img/img_ie_a_bg.png) no-repeat center; background-size: 100px; }
.is_low .v2-goto-fonts a { background: url(../img/img_ie_a.png) no-repeat center; background-size: 100px; height: 100%; width: 100%; margin: 0; top: 0; left: 0; transition: opacity 0.5s !important; opacity: 1 !important; }
.is_low .v2-goto-fonts a:hover { opacity: 0 !important; }
.is_low .v2-goto-fonts a div { display: none !important; }
.is_low .v2-goto-fonts a { text-indent: -9999px; }
.is_low .subpages .v2-goto-fonts .font-outline { transform: scale(1); top: 0; }
/* SIMPLE */
/*.theme,.v2-toggle,.v2-goto-fonts,.index-video-title{ display: none !important; }
*/
/* */
.is_page_in_reel .footer, .is_page_in_front .footer { display: none !important; }
.is_page_in_reel .theme .back { margin: 28px 0 30px 0; }
.is_page_in_reel .theme { margin: -100px 0 0 -500px; }
/**/
@media only screen and (orientation:landscape) {
.is_sp .v2-menu a { font-weight: bold; font-size: 18px; line-height: 1.5; }
.is_sp .v2-menu .v2-nav-small { margin-top: 10px; }
.is_sp .v2-menu .v2-nav-small.v2-lang { margin: 10px 0 10px 0; }
}