@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Oswald);
/** 	目次  	01. COMMON STYLE 	02. HEADER STYLE 	03. FOOTER STYLE 	04. HOME STYLE 	05. PORTFOLIO STYLE 	06. PROFILE STYLE 	07. CONTACT STYLE  */
/* ==========================================================================
	01.	COMMON STYLE
	========================================================================== */
/*	common
	===================================== */
body { -webkit-text-size-adjust: 100%; }

html { box-sizing: border-box; min-height: 100%; padding-bottom: 320px; position: relative; }

.gfont { font-family: 'Oswald', sans-serif; }

#contents { text-align: center; }
#contents #page-title { font-size: 357.14286%; letter-spacing: .1em; line-height: 1; margin-top: 120px; }

.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.pace-inactive { display: none; }

.pace .pace-progress { background: #929292; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 3px; }

.wrap { opacity: 0; filter: alpha(opacity=0); }

.pace-done .wrap, .ready .wrap { opacity: 1; filter: alpha(opacity=100); transition: all 1s ease 0.4s; }

/* ==========================================================================
	02.	HEADER STYLE
	========================================================================== */
#header { position: relative; }
#header #site-name { line-height: 1; margin: 40px; }
#header #site-name .main { display: block; font-size: 214.28571%; letter-spacing: .1em; }
#header #site-name .sub { display: block; font-size: 78.57143%; letter-spacing: 1.14em; margin-left: 3.6px; margin-top: 6px; }
#header #nav { bottom: 0; letter-spacing: -.4em; list-style: none; position: absolute; right: 40px; white-space: nowrap; }
#header #nav > li { display: inline-block; letter-spacing: normal; }
#header #nav li { letter-spacing: .1em; margin-left: 30px; position: relative; transition: all 0.2s ease; vertical-align: bottom; }
#header #nav li.instagram a { background: url(img/icon_instagram.png) no-repeat center bottom; background-size: cover; display: inline-block; font: 0/0 a; width: 20px; height: 20px; transition: all 0.2s ease; }
#header #nav li.instagram:hover { opacity: 0.5; filter: alpha(opacity=50); }
#header #nav li:not(.instagram):after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 3px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: #333; transition: all 0.2s ease; }
#header #nav li:not(.instagram):hover:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }

/* ==========================================================================
	03.	FOOTER STYLE
	========================================================================== */
#footer { bottom: 0; height: 200px; left: 0; position: absolute; text-align: center; width: 100%; }
#footer .pagetop { background: url(img/icon_pagetop.png) no-repeat center top; display: inline-block; font-size: 100%; letter-spacing: .1em; line-height: 1; padding-top: 45px; }
#footer .copyright { display: block; font-size: 78.57143%; letter-spacing: .1em; line-height: 1; margin-top: 60px; }

/* ==========================================================================
	04.	HOME STYLE
	========================================================================== */
#home { background-color: #000; color: #fff; }
#home #nav li { display: none; }
#home #nav li.instagram { display: block; }
#home #nav li.instagram a { background-position: center top; }
#home #contents-list { left: 50%; position: absolute; text-align: center; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#home #contents-list li { font-size: 357.14286%; letter-spacing: .1em; line-height: 1; margin: 30px 0; }
#home #contents-list li a { color: #fff; position: relative; }
#home #contents-list li a:after { content: ''; position: absolute; bottom: -0px; left: 0; width: 100%; height: 3px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: #fff; transition: all 0.2s ease; }
#home #contents-list li a:hover:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
#home #footer { height: 125px; }
#home #footer .pagetop { display: none; }

/* ==========================================================================
	05.	PORTFOLIO STYLE
	========================================================================== */
#portfolio #photo-list { margin: 80px auto 0; }
#portfolio #photo-list .grid { margin: 40px 20px 0; }
#portfolio #photo-list .grid img { height: auto; width: 200px; }

/* ==========================================================================
	06.	PROFILE STYLE
	========================================================================== */
#profile .image { margin-top: 120px; }
#profile .name { margin-top: 60px; position: relative; }
#profile .name .position { display: block; font-size: 100%; letter-spacing: .1em; line-height: 1; }
#profile .name .main { display: block; font-size: 128.57143%; letter-spacing: .1em; line-height: 1; margin-top: 15px; }
#profile .name .sub { display: block; font-size: 85.71429%; letter-spacing: .1em; line-height: 1; margin-top: 10px; }
#profile p { letter-spacing: .1em; line-height: 3em; margin-left: auto; margin-right: auto; margin-top: 60px; padding-top: 60px; position: relative; max-width: 970px; }
#profile p .title { display: block; font-size: 128.57143%; letter-spacing: .1em; line-height: 1; margin-bottom: 30px; }
#profile p:before { border-top: 1px solid #333; content: ""; display: block; left: 50%; position: absolute; top: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 30px; }

/* ==========================================================================
	07.	CONTACT STYLE
	========================================================================== */
#contact .text { font-size: 92.85714%; line-height: 1.1; margin-top: 120px; }
#contact .button { border: 1px solid #e5e5e5; display: block; font-size: 100%; letter-spacing: .1em; line-height: 1; margin: 60px auto 0; padding: 17px 0; width: 358px; }
#contact .button:hover { background-color: #333; color: #fff; transition: all 0.2s; }