@charset "UTF-8";
/*============================================================
RESET用スタイル　
============================================================*/
html { color: #111; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, time, b, u, var { font-style: normal; font-weight: normal; }

ol, ul, li { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6, small { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ""; }

abbr, acronym { border: 0; font-variant: normal; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; *font-size: 100%; }

legend { color: #000; }

main, header, footer, section, hgroup, aside, nav, address, article, figure { display: block; margin: 0; padding: 0; }

/*
[77% = 10px]
[85% = 11px]
[93% = 12px] 
[100% = 13px]
[108% = 14px] 
[116% = 15px] 
[123.1% = 16px]
[131% = 17px] 
[138.5% = 18px] 
[146.5% = 19px]
[153.9% = 20px]
[161.6% = 21px]
[167% = 22px]
[174% = 23px]
[182% = 24px]
[189% = 25px]
[197% = 26px]
*/
body { font: 13px/1.231 arial,helvetica,clean,sans-serif; *font-size: small; /* for IE */ *font: x-small; /* for IE in quirks mode */ font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

select, input, button, textarea { font: 99% arial, helvetica, clean, sans-serif; }

table { font-size: inherit; font: 100%; }

pre, code, kbd, samp, tt { font-family: monospace; *font-size: 108%; line-height: 100%; }

:root { --light-color: white; }

html { height: 100%; -webkit-text-size-adjust: none; }

body { height: 100%; margin: 0; padding: 0; text-align: left; font-family: Helvetica, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-feature-settings: "pkna"; }
body > #wrapper { height: auto; }

#wrapper { width: 100%; height: 100%; min-height: 100%; overflow: hidden; margin: 0 auto; position: relative; }
#wrapper a:hover { color: var(--light-color); }

@media screen and (min-width: 0px) and (max-device-width: 640px) { #wrapper { height: 1280px; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #wrapper { height: 1280px; } }
p::-moz-selection, h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, a::-moz-selection, img::-moz-selection, em::-moz-selection, strong::-moz-selection, dd::-moz-selection, dt::-moz-selection, u::-moz-selection, dfn::-moz-selection, li::-moz-selection { color: #0797de; background: #ccc; }
p::selection, h1::selection, h2::selection, h3::selection, h4::selection, a::selection, img::selection, em::selection, strong::selection, dd::selection, dt::selection, u::selection, dfn::selection, li::selection { color: #0797de; background: #ccc; }

*::-moz-selection { color: #0797de; background: #ccc; }

/*-------------------------------------------------------------------------------------------------*
WEB-FONT
--------------------------------------------------------------------------------------------------*/
@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon.eot"); src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg#icomoon") format("svg"); font-weight: normal; font-style: normal; }
.icon-twitter:before, .icon-facebook:before, .icon-new-window:before, .icon-mail:before { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; }

.icon-facebook:before { content: "\e001"; }

.icon-new-window:before { content: "\e000"; }

.icon-twitter:before { content: "\e002"; }

.icon-mail:before { content: "\e003"; }

/*-------------------------------------------------------------------------------------------------*
HEADER
--------------------------------------------------------------------------------------------------*/
#header { position: relative; z-index: 100; }

#header-name { width: 275px; top: 90px; right: 100%; position: fixed; z-index: 1; -webkit-transform: translate(302px, 0); -ms-transform: translate(302px, 0); transform: translate(302px, 0); text-align: right; }

.hd-name { font-size: 13px; font-family: 'Raleway'; line-height: 1.8; letter-spacing: 3.5px; }
.hd-name__blc { display: block; }
.hd-name__blc:last-child { margin-top: 3px; }

#headName span, #headName_02 span, #headName_03 span { opacity: 0; }

#vi { width: 275px; display: block; top: 40px; right: 100%; position: fixed; z-index: 10; -webkit-transform: translate(302px, 0); -ms-transform: translate(302px, 0); transform: translate(302px, 0); font-size: 29px; font-family: 'Raleway'; font-weight: 500; line-height: 1; letter-spacing: 1.5px; -webkit-transition: linear 1s opacity; transition: linear 1s opacity; opacity: 0; text-align: right; text-transform: uppercase; }
#vi .viLine { display: inline-block; vertical-align: top; margin: 6px 5px 0 5px; font-family: Helvetica,Arial,sans-serif; font-size: 15px; }
#vi .viLine:nth-child(2) { margin-left: 2px; }
#vi .viO { margin: 0 0 0 1px; position: relative; font-weight: bold; color: var(--light-color); }
#vi .viI { display: inline-block; position: relative; color: var(--light-color); font-weight: bold; }
#vi.is-displayed { opacity: 1; -webkit-transition: ease-in 1s 0.4s; transition: ease-in 1s 0.4s; }

#mainNav { top: 0px; right: 0px; position: absolute; z-index: 10; overflow: hidden; -webkit-transition: linear 1s opacity; transition: linear 1s opacity; -webkit-transition-delay: 0s; transition-delay: 0s; display: none; }
#mainNav li { float: left; padding: 3px 16px 3px 3px; }
#mainNav li span { display: inline-block; margin: 0; font-size: 8px; color: #ccc; display: none; }
#mainNav li a { display: block; padding: 0 9px 2px; color: #000; font-size: 10px; font-family: 'Raleway'; font-weight: 600; line-height: 1; letter-spacing: 1px; -webkit-transition: ease-out 0.2s all; transition: ease-out 0.2s all; -webkit-transition-delay: 0s; transition-delay: 0s; background: #d0d0d0; border-radius: 2px; text-decoration: none; }
#mainNav li a:hover { background: #FD0004; box-shadow: 0 0 3px #FD0004; }
#mainNav li.current a { background: #333; }
#mainNav li.current a:hover { box-shadow: none; }
#mainNav li:last-child { padding-right: 0; }

/*-------------------------------------------------------------------------------------------------*
CONTENTS
--------------------------------------------------------------------------------------------------*/
#contents { width: 100%; min-height: 100%; overflow: hidden; position: relative; padding: 25% 30px 350px 330px; z-index: 10; -webkit-transition: opacity 1.5s linear; transition: opacity 1.5s linear; box-sizing: border-box; }
.fadeOut #contents { opacity: 0.3; }

.section { padding: 0; box-sizing: border-box; }

.column { width: 100%; zoom: 1; position: relative; }
.column:before, .column:after { display: block; height: 0; visibility: hidden; content: "\0020"; }
.column:after { clear: both; }
.column__hd { margin: 0 0 30px; font-family: 'Raleway'; font-size: 17px; letter-spacing: 2px; line-height: 1; }
.column__hd__light { -webkit-animation: light 3s ease-in 0s infinite; animation: light 3s ease-in 0s infinite; color: var(--light-color); }
.column + .column { margin-top: 200px; }
.column--2 > .column__child { width: 50%; float: left; margin: 0 2.5% 0 0; box-sizing: border-box; }
.column--2 > .column__child:last-child { width: 47.5%; margin-right: 0; }

@-webkit-keyframes light { 0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes light { 0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; } }
#headName span, #headNameSub span, #headNameSub_02 span { opacity: 0; }

.txtCopy { float: left; font-size: 18px; line-height: 1.35; letter-spacing: 2px; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.txtCopy.en { font-size: 17px; line-height: 1.5; letter-spacing: 1.5px; word-wrap: break-word; }

.txt { font-size: 14px; line-height: 1.8; letter-spacing: 2px; }
.txt.en { font-size: 13px; line-height: 1.6; letter-spacing: 1px; word-wrap: break-word; }

.start .column__child { border-color: transparent; }

#txtCopy_01 span, #txtCopy_02 span, #txtCopy_01_02 span, #txtCopy_02_02 span, #txtCopy_03 span, #txtCopy_03_02 span { opacity: 0; font-weight: bold; }

#message { margin-bottom: 30px; }
#message .column__child { line-height: 2; -webkit-transition: 0.5s cubic-bezier(0.51, 0.09, 0.93, 0.29); transition: 0.5s cubic-bezier(0.51, 0.09, 0.93, 0.29); }
#message .en { letter-spacing: 2px; }

#profile { opacity: 0; -webkit-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; }

#about { margin-bottom: 40px; opacity: 0; -webkit-transition: opacity 0.5s 0.5s cubic-bezier(0.51, 0.09, 0.93, 0.29); transition: opacity 0.5s 0.5s cubic-bezier(0.51, 0.09, 0.93, 0.29); }

/*----------- sketch -----------*/
#sketch { opacity: 0; -webkit-transition: opacity 0.5s 1s cubic-bezier(0.51, 0.09, 0.93, 0.29); transition: opacity 0.5s 1s cubic-bezier(0.51, 0.09, 0.93, 0.29); }
#sketch .column__hd { position: relative; }

.sketch-item { letter-spacing: 3px; font-family: 'Raleway'; line-height: 1; font-weight: 600; }
.sketch-item__link { width: 180px; display: inline-block; -webkit-transition: ease-out 0.2s color; transition: ease-out 0.2s color; color: inherit; }
.sketch-item__txt { display: inline-block; margin: 0 0 0 20px; letter-spacing: 1.5px; font-weight: normal; }
.sketch-item__number { display: inline-block; }
.sketch-item__number:after { content: "："; }
.sketch-item + .sketch-item { margin-top: 20px; }

/*----------- works -----------*/
#works { opacity: 0; -webkit-transition: opacity 0.5s 1s cubic-bezier(0.51, 0.09, 0.93, 0.29); transition: opacity 0.5s 1s cubic-bezier(0.51, 0.09, 0.93, 0.29); }
#works .column__hd { position: relative; }

.works-item__hd { display: inline-block; margin: 0 0 12px; color: inherit; font-weight: bold; letter-spacing: 2px; /*border-bottom: 1px dotted #999;*/ text-decoration: none; -webkit-transition: ease-out 0.2s color; transition: ease-out 0.2s color; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.works-item__txt { display: block; font-size: 13px; line-height: 1.6; letter-spacing: 1.5px; }
.works-item__txt .en { font-size: 12px; line-height: 1.4; letter-spacing: 1.5px; }
.works-item + .works-item { margin-top: 30px; }

/*----------- tumblr -----------*/
#tumblr { width: 100%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#tumblr img { display: block; width: auto; height: 100%; }
#tumblr .is-near-square img { height: 110%; }
#tumblr-container { width: 100%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.tumblr-item { width: 25%; }
.tumblr-item:nth-child(4n) ~ .tumblr-item { margin-top: 40px; }
.tumblr-item__img { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 14vw; position: relative; overflow: hidden; border-bottom: 1px solid var(--light-color); background: #222; }
.tumblr-item__title { display: block; padding: 10px 10px 0 5px; letter-spacing: 0.5px; }
.tumblr-item__title p { line-height: 1.4; }

/*-------------------------------------------------------------------------------------------------*
FOOTER
--------------------------------------------------------------------------------------------------*/
#footer { width: 100%; box-sizing: border-box; padding: 8px 0 0 330px; margin: 0 auto; bottom: 20px; left: 0px; position: absolute; z-index: 30; }
.midNight #footer { background: #000; }
#footer #footer-inner { position: relative; }
#footer #link { width: 1080px; padding: 0 0 1.5%; overflow: hidden; box-sizing: border-box; -webkit-transition: linear 1s opacity; transition: linear 1s opacity; -webkit-transition-delay: 0s; transition-delay: 0s; }
#footer #link li { float: left; position: relative; padding: 0 20px 0 20px; }
#footer #link li a { color: inherit; font-size: 93%; letter-spacing: 1.5px; -webkit-transition: ease-out 0.2s color; transition: ease-out 0.2s color; -webkit-transition-delay: 0s; transition-delay: 0s; text-decoration: none; line-height: 1; }
#footer #link li a:hover { color: var(--light-color); }
#footer #link li span { font-size: 13px; }
#footer #link li:first-child { padding-left: 0; }
#footer #canvas-work { bottom: 0px; right: 40px; position: absolute; z-index: 10; margin-bottom: 1.5%; letter-spacing: 3px; font-family: 'Raleway'; line-height: 1; font-size: 11px; font-weight: 600; color: inherit; }
#footer #canvas-work span { font-size: 12px; }
.fadeOut #footer #link { opacity: 0.3; }

/*-------------------------------------------------------------------------------------------------*
BACKGROUND
--------------------------------------------------------------------------------------------------*/
#canvas-iframe { display: block; width: 100%; height: 130%; left: 0px; position: fixed; top: 0; overflow: hidden; opacity: 0; border: none; outline: none; }

#background { width: 100%; height: auto; overflow: visible; display: block; overflow: hidden; }

#mask { width: 100%; height: 100%; overflow: visible; display: block; top: 0px; left: 0px; position: absolute; z-index: 100; background: #000; }
#mask.is-hide { opacity: 0; visibility: hidden; -webkit-transition: 1s cubic-bezier(0, 0.91, 1, 1) opacity, 1s linear visibility; transition: 1s cubic-bezier(0, 0.91, 1, 1) opacity, 1s linear visibility; }

.contents-line { width: 98%; height: 98%; overflow: visible; display: block; box-sizing: border-box; top: 1%; left: 1%; position: fixed; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.5); }

@-webkit-keyframes blackout { 0% { color: #fff; text-shadow: 0 0 10px #fff; }
  100% { color: #000; text-shadow: 0 0 0 #000; } }

@keyframes blackout { 0% { color: #fff; text-shadow: 0 0 10px #fff; }
  100% { color: #000; text-shadow: 0 0 0 #000; } }
/*-------------------------------------------------------------------------------------------------*
SKIN
--------------------------------------------------------------------------------------------------*/
.theme-midNight { color: #ddd; background: #000; }
.theme-midNight #wrapper { /* IE10+ */ background: -webkit-linear-gradient(top, #131313 0%, #000000 80%); background: linear-gradient(to bottom, #131313 0%, #000000 80%); /* W3C */ background-attachment: fixed; }
.theme-midNight #contents .profileBox p { border-color: #777; }
.theme-midNight .fadeOut #mainNav { opacity: 0.2; }
.theme-midNight .fadeOut #contents { opacity: 0.2; }
.theme-midNight .fadeOut #footer #link { opacity: 0.2; }
@keyframes blackout { 0% { color: #f00; text-shadow: 0 0 10px #f00; }
  100% { color: #000; text-shadow: 0 0 0 #000; } }