@charset "UTF-8";
/* Foundation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Break Points
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Color
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Gutter
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Z-index
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W0); font-weight: 100; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W1); font-weight: 200; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W2); font-weight: 300; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W3); font-weight: 400; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W4); font-weight: 500; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W5); font-weight: 600; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W6); font-weight: 700; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W7); font-weight: 800; }

@font-face { font-family: "Hiragino Sans"; src: local(HiraginoSans-W8); font-weight: 900; }

@font-face { font-family: "Hiragino Sans W9"; src: local(HiraginoSans-W9); font-weight: 900; }

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

body { margin: 0; }

article, aside, footer, header, nav, section { display: block; }

h1 { font-size: 2em; margin: 0.67em 0; }

figcaption, figure, main { display: block; }

figure { margin: 1em 40px; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

dfn { font-style: italic; }

mark { background-color: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

audio, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

img { border-style: none; }

svg:not(:root) { overflow: hidden; }

button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

button, input { /* 1 */ overflow: visible; }

button, select { /* 1 */ text-transform: none; }

button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { padding: 0.35em 0.75em 0.625em; }

legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

details, menu { display: block; }

summary { display: list-item; }

canvas { display: inline-block; }

template { display: none; }

[hidden] { display: none; }

* { box-sizing: border-box; }

html { font-size: 62.5%; }

body { font-size: 1.6em; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; letter-spacing: 0.06rem; line-height: 1.7; color: #FFF; -webkit-font-smoothing: antialiased; }

img { max-width: 100%; height: auto; vertical-align: bottom; }

.img-dark img, img.dark { filter: brightness(80%); }

img.p100 { width: 100%; }

/* Link
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #FFF; text-decoration: none; transition: opacity 0.6s linear; opacity: 1; }

a.gray { color: #999; }

a:hover { text-decoration: none; }

@media (min-width: 900px) { a.hvr img { transition: filter 0.3s linear; }
  a.hvr:hover img { filter: brightness(120%); } }

h1, h2, h3, h4, h5, h6 { font-size: 1.6rem; margin: 0; padding: 0; font-weight: normal; }

p, ul, li, ol, dl, dt, dd { font-size: 1.5rem; margin: 0; padding: 0; }

ul li { list-style: none; }

li, p { color: #FFF; font-size: 1.5rem; }

@media (min-width: 900px) { li, p { font-size: 1.4rem; } }

p.caption { font-size: 1.2rem; line-height: 1.2; }

@media (min-width: 900px) { p.caption { font-size: 1.3rem; } }

/* Library
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Common
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-only-sp-s { display: block; }

@media (min-width: 514px) { .u-only-sp-s { display: none; } }

.u-only-sp { display: block; }

@media (min-width: 900px) { .u-only-sp { display: none; } }

.u-only-pc { display: none; }

@media (min-width: 900px) { .u-only-pc { display: block; } }

.u-only-pc-s { display: none; }

@media (min-width: 514px) { .u-only-pc-s { display: block; } }

.u-only-sp-i { display: inline; }

@media (min-width: 900px) { .u-only-sp-i { display: none; } }

.u-only-pc-i { display: inline; }

@media (min-width: 900px) { .u-only-pc-i { display: block; } }

/* UTILITIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.is-center { text-align: center; }

.is-right { text-align: right; }

.is-left { text-align: left; }

.is-middle { vertical-align: middle; }

.is-inline { display: inline-block; margin-right: auto; margin-left: auto; }

.underline { text-decoration: underline; }

.youtube { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }

.youtube iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

.is-full { width: 100%; }

.is-max-full { max-width: 100%; }

.mt-1l__half { margin-top: 0.85em; }

.mt-1l { margin-top: 1.7em; }

.mt-2l { margin-top: 3.4em; }

.bg-gray { background-color: #ebebeb; }

.mt-l { margin-top: 80px; }

@media (min-width: 900px) { .mt-l { margin-top: 90px; } }

@media (min-width: 1367px) { .mt-l { margin-top: 120px; } }

.mt-m { margin-top: 50px; }

@media (min-width: 900px) { .mt-m { margin-top: 60px; } }

@media (min-width: 1367px) { .mt-m { margin-top: 90px; } }

.mt-s { margin-top: 25px; }

@media (min-width: 900px) { .mt-s { margin-top: 30px; } }

@media (min-width: 1367px) { .mt-s { margin-top: 45px; } }

.mb-l { margin-bottom: 80px; }

@media (min-width: 900px) { .mb-l { margin-bottom: 90px; } }

@media (min-width: 1367px) { .mb-l { margin-bottom: 120px; } }

.mb-m { margin-bottom: 50px; }

@media (min-width: 900px) { .mb-m { margin-bottom: 60px; } }

@media (min-width: 1367px) { .mb-m { margin-bottom: 90px; } }

.mb-s { margin-bottom: 25px; }

@media (min-width: 900px) { .mb-s { margin-bottom: 30px; } }

@media (min-width: 1367px) { .mb-s { margin-bottom: 45px; } }

.mb-sp-10 { margin-bottom: 10px; }

@media (min-width: 900px) { .mb-sp-10 { margin: 0; } }

/* DL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
dl.def_lst dt, dl.def_lst .def_lst_dt { font-weight: bold; margin-bottom: 20px; }

dl.def_lst dd, dl.def_lst .def_lst_dd { margin-bottom: 40px; }

/* Wrapper
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content-wrapper, .content-wrapper-half { min-width: 320px; margin-right: auto; margin-left: auto; position: relative; overflow: hidden; }

@media (min-width: 900px) { .content-wrapper-half { width: 50%; } }

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.row { box-sizing: border-box; margin-left: -2px; margin-right: -2px; }

@media (min-width: 900px) { .row { margin-left: -2px; margin-right: -2px; } }

.row:after { content: ""; clear: both; display: table; }

.col { float: left; width: 100%; box-sizing: border-box; padding: 0 2px; }

@media (min-width: 900px) { .col { padding: 0 2px; } }

.col-sp2-pc4 { float: left; width: 50%; }

@media (min-width: 514px) { .col-sp2-pc4 { width: 25%; } }

@media (min-width: 900px) { .col-sp2-pc4 { width: 25%; } }

.col-sp1-pc3 { float: left; width: 100%; }

@media (min-width: 900px) { .col-sp1-pc3 { width: 33.3333332%; } }

.col-sp1-pc2 { float: left; width: 100%; }

@media (min-width: 900px) { .col-sp1-pc2 { width: 50%; } }

.col-sp2-tab3-pc2 { float: left; width: 50%; }

@media (min-width: 514px) { .col-sp2-tab3-pc2 { width: 33.33333332%; } }

@media (min-width: 900px) { .col-sp2-tab3-pc2 { width: 50%; } }

.content-wrapper { min-width: 320px; max-width: 1200px; margin: 0 auto; position: relative; }

.content-l { max-width: 1050px; position: relative; margin: 0 auto; }

.content-s { position: relative; width: 100%; margin: 0 auto; padding: 0 15px; }

@media (min-width: 514px) { .content-s { max-width: 400px; } }

@media (min-width: 900px) { .content-s { max-width: 700px; padding: 0; } }

.content-bg-blk { background-color: rgba(17, 17, 17, 0.9); padding: 80px 20px 40px 20px; margin-bottom: 120px; }

@media (min-width: 900px) { .content-bg-blk { padding: 100px 80px 80px 80px; margin-bottom: 240px; min-height: 500px; display: flex; justify-content: center; align-items: center; } }

/* Contents
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body { background-color: #222; }

h1, h2, h3, h4, p { color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, "Lato", "roboto", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }

p { line-height: 2.2; letter-spacing: 0.08rem; }

p.fs-md { font-size: 1.6rem; letter-spacing: 0.1rem; }

.wrapper { position: relative; }

.heading-ribbon { position: absolute; left: -20px; top: 28px; text-transform: uppercase; font-size: 1.3rem; line-height: 1; padding: 4px 20px; width: 200px; }

@media (min-width: 900px) { .heading-ribbon { left: -16px; padding: 4px 16px; } }

.heading-ribbon.profile { background-color: #f41000; }

.heading-ribbon.works { background-color: #ff8b00; }

.heading-ribbon.vista { background-color: #d30000; }

.heading-ribbon.contact { background-color: #d8004c; }

#btn-pause { position: fixed; right: 20px; bottom: 26px; opacity: 0.4; width: 40px; height: 40px; }

@media (min-width: 900px) { #btn-pause { bottom: 26px; } }

#btn-pause:hover { cursor: pointer; }

#btn-pause .pause { display: block; color: #fff; }

#btn-pause .restart { display: none; color: #fff; }

#btn-pause.pause .pause { display: none; }

#btn-pause.pause .restart { display: block; }

.bg-video-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }

.bg-video-wrapper div.video-js { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; }

.bg-video-wrapper div.video-js video { /* Make video to at least 100% wide and tall */ min-width: 100%; min-height: 100%; /* Setting width & height to auto prevents the browser from stretching or squishing the video */ width: auto; height: auto; /* Center the video */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.logo { z-index: 30; opacity: 0; position: absolute; width: 190px; }

@media (min-width: 900px) { .logo { opacity: 1; position: fixed; top: 40px; left: 40px; width: 160px; } }

.logo img { width: 100%; }

article { z-index: 10; padding: 0 20px 0 20px; }

@media (min-width: 900px) { article { padding: 0 0 0 0; } }

article .content-inner { width: 100%; }

article #cover { position: relative; height: 100vh; margin-bottom: 80px; display: block; overflow: hidden; display: flex; justify-content: center; align-items: center; padding-bottom: 100px; }

@media (min-width: 900px) { article #cover { padding-bottom: 0; } }

article #cover .content-inner-bottom { width: 100%; position: absolute; bottom: 150px; }

@media (min-width: 900px) { article #cover .content-inner-bottom { bottom: 30px; } }

article #cover .scroll-icon { width: 40px; height: 36px; text-align: center; margin: 0 auto; padding: 10px; }

article #cover .scroll-icon img { vertical-align: top; }

article #cover .logo-sp { z-index: 31; width: 190px; }

@media (min-width: 900px) { article #cover .logo-sp { display: none; } }

article #cover .logo-sp img { width: 100%; }

article #footer { margin: 0 0 40px 0; }

article #footer p { margin: 0 auto; font-size: 11px; text-align: center; }

ul.team { width: 100%; padding-bottom: 20px; margin-bottom: 40px; }

@media (min-width: 900px) { ul.team { background-position: bottom right 30px; padding-bottom: 0; margin-bottom: 40px; background-size: 180px; } }

ul.team li p { color: #999; font-size: 1.5rem; letter-spacing: 0.1rem; }

ul.works { width: 100%; }

ul.works li { margin-bottom: 20px; }

ul.works li p { color: #FFF; font-size: 1.4rem; letter-spacing: 0.1rem; line-height: 1.4; }

ul.works li p.sub { color: #999; font-size: 1.2rem; letter-spacing: 0.1rem; padding-left: 20px; line-height: 1.4; }

@media (min-width: 900px) { ul.works li p.sub { padding-left: 60px; } }