@charset "UTF-8";
	a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block}
body {
	line-height:1}
ol, ul {
	list-style:none}
blockquote, q {
	quotes:none}
blockquote:after, blockquote:before, q:after, q:before {
	content:'';
	content:none}
table {
	border-collapse:collapse;
	border-spacing:0}
@font-face {
	font-family:"futura_m";
	src:url(fonts/Futura-Med.woff) format("eot"),  url(../fonts/Futura-Med.woff) format("woff")}
@font-face {
	font-family:"futura_r";
	src:url(fonts/Futura-Boo.woff) format("eot"),  url(../fonts/Futura-Boo.woff) format("woff")}
@font-face {
	font-family:"futura_b";
	src:url(fonts/Futura-Bol.woff) format("eot"),  url(../fonts/Futura-Bol.woff) format("woff")}
@font-face {
	font-family:"futura_de";
	src:url(fonts/Futura-Dem.woff) format("eot"),  url(../fonts/Futura-Dem.woff) format("woff")}
html {
	font-size:62.5%;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	overflow-x:hidden}
@media screen and (max-width:420px) {
	html {
	font-size:3.125vw}
}
*, :after, :before {
	-webkit-box-sizing:border-box;
	box-sizing:border-box}
body {
	font-family:'futura_r', 'Helvetica Neue', 'Helvetica', 'Arial', 'Avenir', 'Hiragino Sans', 游ゴシック体,  'Yu Gothic',  YuGothic, 'ヒラギノ角ゴシック', 'メイリオ',  Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic',  sans-serif;
	font-size:1.6rem;
	-webkit-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	color:#353E4A;
	overflow-x:hidden}
@media screen and (max-width:420px) {
	body {
	font-size:1.2rem}
}
textarea {
	font-family:'futura_r', 'Helvetica Neue', 'Helvetica', 'Arial', 'Avenir', 'Hiragino Sans', 游ゴシック体,  'Yu Gothic',  YuGothic, 'ヒラギノ角ゴシック', 'メイリオ',  Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic',  sans-serif}
h1, h2, h3, h4, h5, h6 {
	line-height:1.2}
p {
	line-height:2;
	word-wrap:break-word;
	white-space:normal}
dd, dt, li, pre, td, th {
	line-height:1.5}
li {
	list-style-type:none}
table {
	table-layout:fixed;
	border-collapse:separate;
	border-spacing:0;
	empty-cells:show;
	font:100%;
	font-size:inherit;
	word-wrap:break-word;
	word-break:break-all}
a {
	color:#072142;
	text-decoration:none}
a:hover {
	text-decoration:none}
.clearfix:after {
	content:"";
	display:block;
	clear:both}
.clearfix {
	overflow:hidden;
	zoom:1}
img {
	max-width:100%;
	height:auto;
	vertical-align:middle;
	width:100%}
.title {
	color:#fff;
	position:absolute;
	overflow:hidden;
	top:50%;
	-webkit-transform:translate3d(0,  -50%,  0);
	transform:translate3d(0,  -50%,  0);
	z-index:200;
	margin-left:11%}
@media screen and (max-width:800px) {
	.title {
	margin-left:40px}
}
@media screen and (max-width:420px) {
	.title {
	width:87.5%;
	margin:0 6.25%;
	top:auto;
	-webkit-transform:translate3d(0,  0,  0);
	transform:translate3d(0,  0,  0);
	bottom:8rem}
}
@media screen and (max-width:420px) {
	.title--top {
	margin:0 13%}
}

.title__text {
	font-size:12rem;
	line-height:1;
	letter-spacing:0.1em;
	margin-bottom:1.6rem;
	font-family:"futura_m";
	font-weight:normal;
	text-shadow:0 10px 30px rgba(2,  11,  22,  0.5)}
@media screen and (max-width:800px) {
	.title__text {
	font-size:7.6rem}
}
@media screen and (max-width:420px) {
	.title__text {
	font-size:3.8rem;
	margin-bottom:0.8rem;
	text-shadow:0 3px 10px rgba(2,  11,  22,  0.5)}
}
@media screen and (max-width:420px) {
	.title__text--top {
	font-size:5.4rem;
	text-shadow:0 10px 30px rgba(2,  11,  22,  0.5);
	margin-bottom:0.1rem}
}
.title .border {
	display:inline-block;
	margin-bottom:3.2rem}
@media screen and (max-width:420px) {
	.title .border {
	margin-bottom:0.8rem}
}
.title .border span {
	display:block;
	width:88px;
	height:4px;
	border-radius:5px;
	background:#82de3a}
.title .border span:first-child {
	margin-bottom:1.4rem}
@media screen and (max-width:420px) {
	.title .border span:first-child {
	margin-bottom:0.7rem}
}
@media screen and (max-width:800px) {
	.title .border span {
	width:70px}
}
@media screen and (max-width:420px) {
	.title .border span {
	width:44px;
	height:2px}
}
.title .border span:last-child {
	margin-left:54px}
@media screen and (max-width:800px) {
	.title .border span:last-child {
	margin-left:43px}
}
@media screen and (max-width:420px) {
	.title .border span:last-child {
	margin-left:27px}
}
.title__lead {
	color:#fff;
	font-size:2.8rem;
	line-height:1.5;
	letter-spacing:0.1em}
@media screen and (max-width:800px) {
	.title__lead {
	font-size:2.4rem;
	line-height:1.4}
}
@media screen and (max-width:420px) {
	.title__lead {
	font-size:1.2rem}
}
.title li {
	margin-bottom:1.6rem}
@media screen and (max-width:420px) {
	.title li {
	margin-bottom:0.8rem;
	line-height:1.1}
}
.title li:last-child {
	margin-bottom:0}
.title li:last-child a {
	margin-right:3.2rem}
@media screen and (max-width:420px) {
	.title li:last-child a {
	margin-right:1.6rem}
}
.title li:last-child a:last-child {
	margin-right:0}
.title li a {
	color:#fff;
	font-size:2.8rem;
	line-height:1.5;
	letter-spacing:0.1em;
	-webkit-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s}
@media screen and (max-width:800px) {
	.title li a {
	font-size:2.4rem;
	line-height:1.4}
}
@media screen and (max-width:420px) {
	.title li a {
	font-size:1.2rem}
}
.title li a:hover {
	opacity:0.5}
.btn {
	display:inline-block;
	font-size:1.8rem;
	color:#fff;
	background:#82de3a;
	line-height:1;
	font-weight:bold;
	padding:18px 32px;
	border-radius:50px;
	-webkit-transition:.3s;
	-o-transition:.3s;
	transition:.3s;
	letter-spacing:0.1em}
@media screen and (max-width:800px) {
	.btn {
	font-size:1.8rem;
	padding:13px 24px}
}
@media screen and (max-width:420px) {
	.btn {
	font-size:1.2rem}
}
.btn:hover {
	-webkit-transform:translate3d(0,  -5%,  0);
	transform:translate3d(0,  -5%,  0);
	opacity:1}
.btn-wrap {
	margin-top:3.2rem}
@media screen and (max-width:800px) {
	.btn-wrap {
	margin-top:1.6rem}
}
@media screen and (max-width:420px) {
	.btn-wrap {
	text-align:center;
	margin-top:0.8rem}
}
.scrollDown {
	position:fixed;
	font-size:1.4rem;
	bottom:80px;
	left:40px;
	line-height:1;
	letter-spacing:0.3em;
	-webkit-writing-mode:vertical-rl;
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
	color:#fff;
	z-index:100}
.scrollDown:after {
	content:"";
	width:2px;
	height:64px;
	background:#fff;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	bottom:-80px}
@media screen and (max-width:420px) {
	.scrollDown:after {
	height:32px;
	bottom:-40px}
}
@media screen and (max-width:420px) {
	.scrollDown {
	left:auto;
	right:6.25%;
	font-size:1rem;
	bottom:40px}
}
.content {
	max-width:1200px;
	width:100%;
	margin:auto}
.content--mlarge {
	margin-top:14.4rem}
@media screen and (max-width:800px) {
	.content--mlarge {
	margin-top:7.2rem}
}
@media screen and (max-width:420px) {
	.content--mlarge {
	margin-top:4rem}
}
@media screen and (max-width:1250px) {
	.content {
	padding:0 10%}
}
.heading {
	font-size:4rem;
	color:#072142;
	letter-spacing:0.2em;
	font-family:"futura_m";
	margin-right:3.2rem;
	padding-top:1.2rem}
.heading--top {
	padding-top:0}
@media screen and (max-width:420px) {
	.heading--left {
	margin-left:auto}
}
@media screen and (max-width:800px) {
	.heading {
	padding-top:0;
	margin-right:0}
}
@media screen and (max-width:420px) {
	.heading {
	font-size:2.4rem;
	padding-top:0.2rem}
}
.heading-num {
	font-size:4rem;
	color:#82de3a;
	position:relative;
	padding-left:6.2rem;
	padding-right:3.2rem;
	font-family:"Abril Fatface";
	line-height:1.1}
.heading-num:after {
	content:"";
	width:4.8rem;
	height:2px;
	background:#020b16;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	margin:auto}
@media screen and (max-width:420px) {
	.heading-num:after {
	width:2.4rem}
}
@media screen and (max-width:420px) {
	.heading-num {
	padding-left:3.2rem;
	font-size:2.4rem}
}
.sub-title {
	font-size:3.2rem;
	margin-bottom:1.6rem;
	color:#072142;
	text-align:center;
	letter-spacing:0.2em;
	line-height:1.2;
	font-family:"futura_de";
	word-break:break-all}
@media screen and (max-width:420px) {
	.sub-title {
	font-size:1.6rem;
	margin-bottom:0.8rem}
}
.small-title {
	font-size:2.4rem;
	color:#072142;
	letter-spacing:0.2em;
	line-height:1.2;
	font-family:"futura_de"}
@media screen and (max-width:420px) {
	.small-title {
	font-size:2.1rem}
}
@media screen and (max-width:420px) {
	.small-title--skill {
	font-size:1.2rem}
}
.wrapper {
	margin-bottom:20rem;
	position:relative;
	z-index:200}
@media screen and (max-width:420px) {
	.wrapper {
	margin-bottom:12rem}
}
.back-arrow {
	position:fixed;
	top:120px;
	left:40px;
	display:block;
	width:64px;
	-webkit-transition:.5s;
	-o-transition:.5s;
	transition:.5s;
	overflow:hidden;
	color:#fff;
	z-index:300}
@media screen and (max-width:420px) {
	.back-arrow {
	width:32px;
	top:60px;
	left:6.25%}
}
.back-arrow:hover {
	-webkit-transform:translate3d(-15%,  0,  0);
	transform:translate3d(-15%,  0,  0)}
.back-arrow g {
	stroke:currentColor}
.back-arrow.js-color {
	color:#020b16}
.page-top {
	width:100%;
	height:100vh;
	position:relative;
	color:#fff;
	background:#020b16}
@media screen and (max-width:420px) {
	.page-top {
	display:block}
}
.page-top__inner {
	width:100%;
	height:100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center}
@media screen and (max-width:420px) {
	.page-top__inner {
	display:block;
	max-height:761px;
	position:relative}
}
.page-top .image {
	position:relative;
	width:60.677%;
	height:100vh;
	margin:0 0 0 auto;
	-webkit-box-shadow:none;
	box-shadow:none}
@media screen and (max-width:420px) {
	.page-top .image {
	width:100%;
	height:65.492%;
	top:auto}
}
.page-top .image__reile {
	background:url(../img/reile.jpg) no-repeat center;
	background-size:cover}
.page-top .image__about {
	background:url(../images/about.jpg) no-repeat center;
	background-size:cover}
.text {
	position:relative;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	padding-left:138px;
	margin-top:14.4rem}
@media screen and (max-width:800px) {
	.text {
	-webkit-box-align:start;
	-ms-flex-align:start;
	align-items:flex-start;
	padding-left:0}
}
@media screen and (max-width:420px) {
	.text {
	margin-top:7.2rem}
}
.text--top {
	-webkit-box-align:start;
	-ms-flex-align:start;
	align-items:flex-start}
.text .heading-num {
	position:absolute;
	left:0}
.text__wrap {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	padding-right:10%;
	-webkit-box-sizing:content-box;
	box-sizing:content-box;
	max-width:1200px;
	width:100%;
	margin:auto}
.text__wrap--top {
	-webkit-box-align:start;
	-ms-flex-align:start;
	align-items:flex-start}
@media screen and (max-width:800px) {
	.text__wrap--top {
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center}
}
@media screen and (max-width:800px) {
	.text__wrap {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	padding-left:10%}
}
.text__works {
	width:65.5%}
@media screen and (max-width:800px) {
	.text__works {
	width:100%;
	margin-top:7.2rem}
}
@media screen and (max-width:420px) {
	.text__works {
	margin-top:4rem}
}
.container {
	margin-top:20rem}
@media screen and (max-width:420px) {
	.container {
	margin-top:12rem}
}
.curtain {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:#020b16;
	z-index:99999;
	-webkit-transform:translate3d(0,  100%,  0);
	transform:translate3d(0,  100%,  0)}
.loader {
	position:fixed;
	width:100%;
	height:100%;
	background:#020b16;
	top:0;
	left:0}
.loader.js-hidden {
	display:none}
header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:40px 40px 0;
	color:#fff;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	z-index:1000}
@media screen and (max-width:420px) {
	header {
	padding:20px 6.25%}
}
header.js-color a {
	color:#020b16}
header.js-color .menuIcon:after, header.js-color .menuIcon:before {
	background:#020b16}
header a {
	color:#fff;
	-webkit-transition:0.3s;
	-o-transition:0.3s;
	transition:0.3s}
header a:hover {
	opacity:0.5}
header .name {
	font-size:2.4rem;
	letter-spacing:0.1em;
	position:relative;
	z-index:1000}
@media screen and (max-width:420px) {
	header .name {
	font-size:1.6rem}
}
header .wrap {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	position:relative}
header .icons {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	margin-right:6.4rem}
@media screen and (max-width:420px) {
	header .icons {
	display:none}
}
header .icons a {
	display:block;
	margin-right:3.2rem;
	font-size:2.4rem;
	letter-spacing:0.1em}
header .icons a:last-child {
	margin-right:0}
header .menuIcon {
	position:relative;
	width:50px;
	height:22px;
	cursor:pointer}
@media screen and (max-width:420px) {
	header .menuIcon {
	width:25px;
	height:15px}
}
header .menuIcon:after, header .menuIcon:before {
	content:"";
	width:100%;
	height:3px;
	background:#fff;
	position:absolute;
	right:0;
	-webkit-transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86);
	-o-transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86);
	transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86)}
header .menuIcon:after {
	top:0}
header .menuIcon:before {
	bottom:0}
header .menuIcon.js-menuOpen:after {
	top:50%;
	-webkit-transform:rotate(45deg) translate3d(0,  -50%,  0);
	transform:rotate(45deg) translate3d(0,  -50%,  0)}
header .menuIcon.js-menuOpen:before {
	bottom:50%;
	-webkit-transform:rotate(-45deg) translate3d(0,  50%,  0);
	transform:rotate(-45deg) translate3d(0,  50%,  0)}
header .global-nav {
	background-image:-webkit-gradient(linear,  left top,  right top,  from(#072142),  color-stop(42%,  #9acb34),  to(#82de3a));
	background-image:-webkit-linear-gradient(left,  #072142,  #9acb34 42%,  #82de3a);
	background-image:-o-linear-gradient(left,  #072142,  #9acb34 42%,  #82de3a);
	background-image:linear-gradient(to right,  #072142,  #9acb34 42%,  #82de3a);
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86);
	-o-transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86);
	transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86);
	-webkit-transform:translate3d(0,  -100%,  0);
	transform:translate3d(0,  -100%,  0);
	z-index:-100}
header .global-nav.js-open {
	-webkit-transform:translate3d(0,  0,  0);
	transform:translate3d(0,  0,  0)}
header .global-nav.js-open a {
	-webkit-transform:translate3d(0,  0,  0);
	transform:translate3d(0,  0,  0)}
header .global-nav__list {
	text-align:center}
header .global-nav__list li {
	margin-top:7.2rem;
	position:relative;
	padding:0 153px;
	overflow:hidden}
header .global-nav__list li:first-child {
	margin-top:0}
@media screen and (max-width:420px) {
	header .global-nav__list li {
	padding:0;
	margin-top:3.2rem}
}
header .global-nav__list a {
	display:inline-block;
	color:#fff;
	font-size:7rem;
	line-height:1;
	letter-spacing:0.1em;
	font-family:"futura_m";
	font-weight:normal;
	text-shadow:0 10px 30px rgba(2,  11,  22,  0.2);
	-webkit-transform:translate3d(0,  100%,  0);
	transform:translate3d(0,  100%,  0);
	-webkit-transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86) 0.3s;
	-o-transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86) 0.3s;
	transition:0.4s cubic-bezier(0.785,  0.135,  0.15,  0.86) 0.3s}
@media screen and (max-width:800px) {
	header .global-nav__list a {
	font-size:6.5rem}
}
@media screen and (max-width:420px) {
	header .global-nav__list a {
	font-size:3.8rem;
	text-shadow:0 3px 20px rgba(2,  11,  22,  0.2)}
}
header .global-nav__list a:after {
	content:"";
	width:0;
	height:10px;
	background:#fff;
	position:absolute;
	left:0;
	top:40%;
	-webkit-box-shadow:0 10px 30px rgba(2,  11,  22,  0.2);
	box-shadow:0 10px 30px rgba(2,  11,  22,  0.2);
	-webkit-transition:0.3s cubic-bezier(0.77,  0,  0.175,  1);
	-o-transition:0.3s cubic-bezier(0.77,  0,  0.175,  1);
	transition:0.3s cubic-bezier(0.77,  0,  0.175,  1)}
@media screen and (max-width:800px) {
	header .global-nav__list a:after {
	display:none}
}
header .global-nav__list a:hover {
	opacity:1}
header .global-nav__list a:hover:after {
	width:100%}
header .global-nav__sns {
	display:none}
@media screen and (max-width:420px) {
	header .global-nav__sns {
	display:block}
}
header .global-nav__sns a {
	font-size:1.8rem;
	margin-right:2.4rem;
	-webkit-transform:translate3d(0,  150%,  0);
	transform:translate3d(0,  150%,  0)}
header .global-nav__sns a:last-child {
	margin-right:0}
.background {
	width:100%;
	height:100vh;
	overflow:hidden}
.sky-color {
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	background-image:-webkit-gradient(linear,  left top,  left bottom,  from(#072142),  color-stop(#061c37),  color-stop(#07182b),  color-stop(#061220),  to(#020b16));
	background-image:-webkit-linear-gradient(top,  #072142,  #061c37,  #07182b,  #061220,  #020b16);
	background-image:-o-linear-gradient(top,  #072142,  #061c37,  #07182b,  #061220,  #020b16);
	background-image:linear-gradient(to bottom,  #072142,  #061c37,  #07182b,  #061220,  #020b16);
	z-index:-200}
.fullpage__slide {
	width:100%;
	height:100vh;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	position:relative;
	color:#fff}
@media screen and (max-width:420px) {
	.fullpage__slide {
	display:block;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	max-height:761px}
}
@media screen and (max-width:420px) {
	.fp-section-1 .fullpage__slide {
	height:100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	margin:auto;
	max-height:667px}
}
#fp-nav {
	margin:0;
	-webkit-transform:translate3d(0,  -50%,  0);
	transform:translate3d(0,  -50%,  0);
	width:40px;
	left:40px;
	overflow:hidden}
@media screen and (max-width:1250px) {
	#fp-nav {
	width:auto;
	top:auto;
	left:50%;
	bottom:32px;
	-webkit-transform:translate3d(-50%,  0,  0);
	transform:translate3d(-50%,  0,  0)}
}
@media screen and (max-width:420px) {
	#fp-nav {
	bottom:20px}
}
@media screen and (max-width:1250px) {
	#fp-nav ul {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:end;
	-ms-flex-align:end;
	align-items:flex-end}
}
#fp-nav ul li {
	height:3px;
	margin:0 0 40px}
@media screen and (max-width:1250px) {
	#fp-nav ul li {
	height:auto;
	margin:0 28px}
}
@media screen and (max-width:420px) {
	#fp-nav ul li {
	margin:0 12px}
}
#fp-nav ul li a {
	width:24px;
	height:100%;
	background:#fff;
	-webkit-transition:.3s;
	-o-transition:.3s;
	transition:.3s}
#fp-nav ul li a span {
	display:none}
@media screen and (max-width:1250px) {
	#fp-nav ul li a {
	width:3px;
	height:24px}
}
@media screen and (max-width:420px) {
	#fp-nav ul li a {
	width:2px;
	height:16px}
}
#fp-nav ul li:last-child {
	margin-bottom:0}
#fp-nav ul li .active {
	width:40px}
@media screen and (max-width:1250px) {
	#fp-nav ul li .active {
	width:3px;
	height:40px}
}
@media screen and (max-width:420px) {
	#fp-nav ul li .active {
	width:2px;
	height:32px}
}
.moon {
	position:absolute;
	top:0;
	bottom:0;
	left:29.427%;
	margin:auto;
	height:1385px;
	width:1385px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center}

.clouds {
	position:
}

@media screen and (max-width:800px) {
	.moon {
	width:100vw;
	height:100vw;
	left:23%}
}
@media screen and (max-width:420px) {
	.moon {
	width:165vw;
	height:165vw;
	left:50%;
	top:-10rem;
	bottom:auto;
	-webkit-transform:translate3d(-50%,  0,  0);
	transform:translate3d(-50%,  0,  0)}
}
.moon__back {
	z-index:-100}
.moon__front {
	z-index:200}
.moon__text {
	font-size:6.4rem;
	letter-spacing:0.1em;
	text-shadow:0 10px 15px rgba(2,  11,  22,  0.2);
	color:#82de3a;
	font-family:"futura_b"}
@media screen and (max-width:800px) {
	.moon__text {
	font-size:3.2rem}
}
@media screen and (max-width:420px) {
	.moon__text {
	font-size:2.4rem;
	text-shadow:0 4px 6px rgba(2,  11,  22,  0.2)}
}
.moon__text-wrap {
	position:absolute;
	left:-15.5963%;
	top:50%;
	-webkit-transform:translate3d(0,  -50%,  0);
	transform:translate3d(0,  -50%,  0)}
.moon__img {
	position:relative;
	width:39.350180505%;
	height:39.350180505%}
.cloud {
	position:absolute}
.cloud--front1 {
	top:20.55045%;
	right:-49.357798%;
	width:88.44%}
.cloud--front2 {
	bottom:-18.53211%;
	right:-28.6238532%;
	width:87.155%}
.cloud--front3 {
	bottom:-5.137614678%;
	left:-49.357798%;
	width:87.155%}
.cloud--back1 {
	top:-22.38532%;
	right:-7.706422%;
	width:69.724%}
.cloud--back2 {
	top:-5.504587%;
	left:-38.715596%;
	width:87.155%}
.image {
	display:block;
	position:relative;
	width:53.125%;
	height:74.81%;
	margin:0 8% 0 auto;
	-webkit-box-shadow:0 80px 140px -40px rgba(0,  0,  0,  0.6);
	box-shadow:0 80px 140px -40px rgba(0,  0,  0,  0.6)}
@media screen and (max-width:800px) {
	.image {
	margin-right:40px}
}
@media screen and (max-width:420px) {
	.image {
	width:80%;
	height:55.633%;
	margin:0 10%;
	top:9.859%}
}
.image__over {
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative}
.image__cover {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	right:0;
	background:#82de3a;
	-webkit-transform:translate3d(100%,  0,  0);
	transform:translate3d(100%,  0,  0)}
.image__cover:last-child {
	background:#072142}
.image--projects {
	background:url(../images/projects.jpg) no-repeat center;
	background-size:cover}
.image--about {
	background:url(../images/about.jpg) no-repeat center;
	background-size:cover}
.image--contact {
	background:url(../images/contact.jpg) no-repeat center;
	background-size:cover}
.image .page-num {
	position:absolute;
	overflow-y:hidden;
	right:-7.5490%;
	bottom:12.3762%;
	font-size:15rem;
	color:#fff;
	font-family:"Abril Fatface";
	z-index:200}
@media screen and (max-width:800px) {
	.image .page-num {
	font-size:7.5rem;
	right:-5%}
}
@media screen and (max-width:420px) {
	.image .page-num {
	display:none}
}
.image .page-num p {
	line-height:1.1;
	text-shadow:0 10px 30px rgba(2,  11,  22,  0.5)}
@media screen and (max-width:420px) {
	.image .page-num p {
	text-shadow:0 3px 10px rgba(2,  11,  22,  0.5)}
}
.moonlight {
	position:absolute;
	top:0;
	bottom:0;
	left:29.427%;
	margin:auto;
	height:1385px;
	width:1385px;
	z-index:-100}
@media screen and (max-width:800px) {
	.moonlight {
	width:100vw;
	height:100vw;
	left:23%}
}
@media screen and (max-width:420px) {
	.moonlight {
	width:165vw;
	height:165vw;
	left:50%;
	top:-10rem;
	bottom:auto;
	-webkit-transform:translate3d(-50%,  0,  0);
	transform:translate3d(-50%,  0,  0)}
}
.moonlight__wrap {
	width:100%;
	height:100%}
.moonlight__img {
	background:url(../images/moonlight.svg) no-repeat;
	background-size:100%}
.moon-background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	z-index:-100}
@media screen and (max-width:420px) {
	.moon-background {
	height:100%;
	bottom:0;
	margin:auto;
	max-height:667px}
}
.star {
	width:1300px;
	height:100vh;
	position:fixed;
	top:0;
	left:29.427%;
	z-index:-100}
@media screen and (max-width:800px) {
	.star {
	width:100vw;
	left:23%}
}
@media screen and (max-width:420px) {
	.star {
	left:0}
}
.star__img {
	width:100%;
	height:100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center}
@media screen and (max-width:420px) {
	.star__img {
	display:block}
}
@media screen and (max-width:420px) {
	.star__img img {
	-webkit-transform:translate3d(0%,  39%,  0) scale(1.5);
	transform:translate3d(0%,  39%,  0) scale(1.5)}
}
.layer {
	width:100%;
	height:100%}
.fp-tableCell {
	position:relative}
.meta {
	padding-top:7.2rem;
	position:relative}
.meta__back {
	width:100%;
	height:70rem;
	background:#f2f4f5;
	position:absolute;
	top:0;
	left:0;
	z-index:-100}
@media screen and (max-width:800px) {
	.meta__back {
	height:54rem}
}
@media screen and (max-width:420px) {
	.meta__back {
	height:45rem}
}
.meta__text-wrap {
	padding:0 8.58333% 0}
@media screen and (max-width:420px) {
	.meta__text-wrap {
	padding:0 7.5% 0}
}
.meta__text {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	margin-bottom:7.2rem}
@media screen and (max-width:420px) {
	.meta__text {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column}
}
.meta__text li {
	margin-right:6.4rem}
@media screen and (max-width:420px) {
	.meta__text li {
	margin-right:0;
	margin-bottom:1.6rem}
}
.meta__text li:last-child {
	margin-right:0}
@media screen and (max-width:420px) {
	.meta__text li:last-child {
	margin-bottom:0}
}
.meta__text .small-title {
	margin-bottom:0.8rem}
@media screen and (max-width:420px) {
	.meta__text .small-title {
	margin-bottom:0.4rem}
}
.big-image {
	width:100%;
	height:116rem;
	background:url(images/Perspective.jpg) no-repeat center;
	background-size:cover;
	margin-top:14.4rem}
@media screen and (max-width:420px) {
	.big-image {
	margin-top:7.2rem;
	height:50rem}
}
.kamp {
	background:#f2f4f5;
	padding-top:20rem;
	margin-top:14.4rem}
@media screen and (max-width:420px) {
	.kamp {
	padding-top:7.2rem;
	margin-top:7.2rem}
}
.kamp ul {
	width:76.666%;
	margin:0 auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between}
.kamp li {
	width:47.5543%}
.back-btn-wrap {
	text-align:center}
.back-btn {
	display:inline-block;
	font-size:3.2rem;
	color:#020b16;
	letter-spacing:0.2em;
	position:relative;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s;
	-webkit-transform:translate3d(44px,  0,  0);
	transform:translate3d(44px,  0,  0)}
@media screen and (max-width:420px) {
	.back-btn {
	font-size:1.6rem;
	-webkit-transform:translate3d(22px,  0,  0);
	transform:translate3d(22px,  0,  0)}
}
.back-btn:after {
	content:"";
	width:64px;
	height:2px;
	background:#020b16;
	position:absolute;
	top:0;
	bottom:0;
	left:-88px;
	margin:auto;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s}
@media screen and (max-width:420px) {
	.back-btn:after {
	width:32px;
	left:-44px}
}
.back-btn:before {
	content:"";
	width:24px;
	height:1px;
	background:#020b16;
	position:absolute;
	top:0;
	bottom:0;
	left:-88px;
	margin:auto;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
	transition:0.5s}
@media screen and (max-width:800px) {
	.back-btn:before {
	width:12px;
	left:-44px;
	-webkit-transform:rotate(-45deg) translate3d(4px,  -4px,  0);
	transform:rotate(-45deg) translate3d(4px,  -4px,  0);
	display:none}
}
.back-btn:hover {
	-webkit-transform:translate3d(0,  0,  0);
	transform:translate3d(0,  0,  0)}
.back-btn:hover:after {
	width:80px;
	left:-112px}
.back-btn:hover:before {
	left:-112px;
	-webkit-transform:rotate(-45deg) translate3d(2px,  -8px,  0);
	transform:rotate(-45deg) translate3d(2px,  -8px,  0)}
.who__wrap {
	width:48.333%}
@media screen and (max-width:800px) {
	.who__wrap {
	width:100%;
	margin-top:7.2rem}
}
@media screen and (max-width:420px) {
	.who__wrap {
	margin-top:4rem}
}
.who__name {
	color:#072142;
	margin-bottom:2.4rem}
@media screen and (max-width:420px) {
	.who__name {
	margin-bottom:1.6rem}
}
.who__jp {
	font-size:2.4rem;
	letter-spacing:0.3em;
	font-weight:bold;
	margin-bottom:0.4rem}
@media screen and (max-width:420px) {
	.who__jp {
	font-size:1.3rem}
}
.who__en {
	font-size:1.8rem;
	letter-spacing:0.2em;
	font-family:"futura_de";
	line-height:1.3}
@media screen and (max-width:420px) {
	.who__en {
	font-size:1rem}
}
.who__text {
	margin-bottom:6.4rem}
@media screen and (max-width:420px) {
	.who__text {
	margin-bottom:3.2rem}
}
.who__image {
	-webkit-box-shadow:0px 63px 154px -20px rgba(7,  33,  66,  0.5);
	box-shadow:0px 63px 154px -20px rgba(7,  33,  66,  0.5)}
@media screen and (max-width:420px) {
	.who__image {
	-webkit-box-shadow:0px 33px 84px -20px rgba(7,  33,  66,  0.5);
	box-shadow:0px 33px 84px -20px rgba(7,  33,  66,  0.5)}
	bpx-shadpw
}
.passion__list {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between}
@media screen and (max-width:800px) {
	.passion__list {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:start;
	-ms-flex-pack:start;
	justify-content:flex-start}
}
.passion__item {
	width:29.75%}
@media screen and (max-width:800px) {
	.passion__item {
	width:100%;
	margin-top:6.4rem}
.passion__item:first-child {
	margin-top:0}
}
@media screen and (max-width:420px) {
	.passion__item {
	margin-top:3.2rem}
}
.passion__image {
	width:42.016%;
	margin:0 auto 2.4rem}
@media screen and (max-width:800px) {
	.passion__image {
	width:24.429%}
}
@media screen and (max-width:420px) {
	.passion__image {
	margin-bottom:1.6rem}
}
.skill-set__flex {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between}
@media screen and (max-width:800px) {
	.skill-set__flex {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:start;
	-ms-flex-pack:start;
	justify-content:flex-start}
}
.skill-set__list {
	width:47%}
@media screen and (max-width:800px) {
	.skill-set__list {
	width:100%}
.skill-set__list:last-child {
	margin-top:7.2rem}
}
.skill-set__item {
	margin-top:6.4rem;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center}
.skill-set__item:first-child {
	margin-top:0}
@media screen and (max-width:420px) {
	.skill-set__item {
	margin-top:3.2rem}
}
.skill-set__icon {
	width:10.6382%;
	-ms-flex-item-align:center;
	align-self:center}
.skill-set__detail {
	width:85.1063%}
.skill-set__meta {
	margin-bottom:0.8rem;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between}
.skill-set__name {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:end;
	-ms-flex-align:end;
	align-items:flex-end}
.skill-set__year {
	font-size:1.4rem;
	line-height:1.2;
	color:#c0c5ca;
	margin-left:0.8rem;
	letter-spacing:0.2em}
@media screen and (max-width:420px) {
	.skill-set__year {
	font-size:1rem}
}
.skill-set__ratio {
	font-size:1.6rem;
	line-height:1.2;
	color:#072142}
@media screen and (max-width:420px) {
	.skill-set__ratio {
	font-size:1rem}
}
.skill-set__high {
	color:#82de3a}
.skill-set__bar {
	width:100%;
	height:1.4rem;
	background:#fff;
	position:relative;
	border-radius:10px;
	-webkit-box-shadow:0 5px 15px 0 rgba(7,  33,  66,  0.15);
	box-shadow:0 5px 15px 0 rgba(7,  33,  66,  0.15)}
@media screen and (max-width:420px) {
	.skill-set__bar {
	height:0.7rem}

}
.skill-set__bar:after {
	content:"";
	position:absolute;
	left:0;
	top:0;
	height:100%;
	border-radius:10px;
	width:10%}
.skill-set__bar.p90:after {
	background-image:-webkit-gradient(linear,  left top,  right top,  from(#072142),  color-stop(42%,  #9acb34),  to(#82de3a));
	background-image:-webkit-linear-gradient(left,  #072142,  #9acb34 42%,  #82de3a);
	background-image:-o-linear-gradient(left,  #072142,  #9acb34 42%,  #82de3a);
	background-image:linear-gradient(to right,  #072142,  #9acb34 42%,  #82de3a)}
.skill-set__bar.p90.in:after {
	-webkit-animation:ratio90 1.5s forwards;
	animation:ratio90 1.5s forwards}
.skill-set__bar.p80:after {
	background-image:-webkit-gradient(linear,  left top,  right top,  from(#072142),  color-stop(50%,  #9acb34),  to(#82de3a));
	background-image:-webkit-linear-gradient(left,  #072142,  #9acb34 50%,  #82de3a);
	background-image:-o-linear-gradient(left,  #072142,  #9acb34 50%,  #82de3a);
	background-image:linear-gradient(to right,  #072142,  #9acb34 50%,  #82de3a)}
.skill-set__bar.p80.in:after {
	-webkit-animation:ratio80 1.5s forwards;
	animation:ratio80 1.5s forwards}
.skill-set__bar.p70:after {
	background-image:-webkit-gradient(linear,  left top,  right top,  from(#072142),  color-stop(65%,  #9acb34),  to(#82de3a));
	background-image:-webkit-linear-gradient(left,  #072142,  #9acb34 65%,  #82de3a);
	background-image:-o-linear-gradient(left,  #072142,  #9acb34 65%,  #82de3a);
	background-image:linear-gradient(to right,  #072142,  #9acb34 65%,  #82de3a)}
.skill-set__bar.p70.in:after {
	-webkit-animation:ratio70 1.5s forwards;
	animation:ratio70 1.5s forwards}
.skill-set__bar.p60:after {
	background-image:-webkit-gradient(linear,  left top,  right top,  from(#072142),  color-stop(75%,  #9acb34),  to(#82de3a));
	background-image:-webkit-linear-gradient(left,  #072142,  #9acb34 75%,  #82de3a);
	background-image:-o-linear-gradient(left,  #072142,  #9acb34 75%,  #82de3a);
	background-image:linear-gradient(to right,  #072142,  #9acb34 75%,  #82de3a)}
.skill-set__bar.p60.in:after {
	-webkit-animation:ratio60 1.5s forwards;
	animation:ratio60 1.5s forwards}
.skill-set__bar.p50:after {
	background-image:-webkit-gradient(linear,  left top,  right top,  from(#072142),  color-stop(65%,  #9acb34));
	background-image:-webkit-linear-gradient(left,  #072142,  #9acb34 65%);
	background-image:-o-linear-gradient(left,  #072142,  #9acb34 65%);
	background-image:linear-gradient(to right,  #072142,  #9acb34 65%)}
.skill-set__bar.p50.in:after {
	-webkit-animation:ratio50 1.5s forwards;
	animation:ratio50 1.5s forwards}
.skill-set__bar.p40:after {
	background-image:-webkit-gradient(linear,  left top,  right top,  from(#072142),  color-stop(65%,  #9acb34));
	background-image:-webkit-linear-gradient(left,  #072142,  #9acb34 65%);
	background-image:-o-linear-gradient(left,  #072142,  #9acb34 65%);
	background-image:linear-gradient(to right,  #072142,  #9acb34 65%)}
.skill-set__bar.p40.in:after {
	-webkit-animation:ratio40 1.5s forwards;
	animation:ratio40 1.5s forwards}
.footer {
	width:100%;
	padding:14.4rem 0;
	text-align:center;
	background-image:-webkit-linear-gradient(349deg,  #072142,  #9acb34 52%,  #82de3a);
	background-image:-o-linear-gradient(349deg,  #072142,  #9acb34 52%,  #82de3a);
	background-image:linear-gradient(101deg,  #072142,  #9acb34 52%,  #82de3a);
	position:relative;
	z-index:100}
@media screen and (max-width:420px) {
	.footer {
	padding:7.2rem 0}
}
.footer a {
	display:block;
	font-size:2.8rem;
	line-height:1.3;
	color:#fff;
	letter-spacing:0.2em;
	-webkit-transition:.3s;
	-o-transition:.3s;
	transition:.3s}
@media screen and (max-width:420px) {
	.footer a {
	font-size:1.2rem}
}
.footer a:first-child {
	margin-bottom:2.4rem}
@media screen and (max-width:420px) {
	.footer a:first-child {
	margin-bottom:0.8rem}
}
.footer a:hover {
	opacity:0.5}
@-webkit-keyframes ratio90 {
	0% {
	width:10%}
to {
	width:90%}
}
@keyframes ratio90 {
	0% {
	width:10%}
to {
	width:90%}
}
@-webkit-keyframes ratio80 {
	0% {
	width:10%}
to {
	width:80%}
}
@keyframes ratio80 {
	0% {
	width:10%}
to {
	width:80%}
}
@-webkit-keyframes ratio70 {
	0% {
	width:10%}
to {
	width:70%}
}
@keyframes ratio70 {
	0% {
	width:10%}
to {
	width:70%}
}
@-webkit-keyframes ratio60 {
	0% {
	width:10%}
to {
	width:60%}
}
@keyframes ratio60 {
	0% {
	width:10%}
to {
	width:60%}
}
@-webkit-keyframes ratio50 {
	0% {
	width:10%}
to {
	width:50%}
}
@keyframes ratio50 {
	0% {
	width:10%}
to {
	width:50%}
}
@-webkit-keyframes ratio40 {
	0% {
	width:10%}
to {
	width:40%}
}
@keyframes ratio40 {
	0% {
	width:10%}
to {
	width:40%}
}

.dsl-wrap {
	width:100%
}
@media screen and (max-width:800px) {
	.dsl-wrap {
	width:100%;
	margin-top:7.2rem}
}
@media screen and (max-width:420px) {
	.dsl-wrap {
	margin-top:4rem}
}
.dsl-name {
	color:#072142;
	margin-bottom:2.4rem}
@media screen and (max-width:420px) {
	.dsl-name {
	margin-bottom:1.6rem}
}
.dsl-jp {
	font-size:3rem;
	letter-spacing:0.2em;
	font-weight:bold;
	margin-bottom:0.4rem}
@media screen and (max-width:420px) {
	.dsl-jp {
	font-size:1.3rem}
}
.dsl-en {
	font-size:2.4rem;
	letter-spacing:0.2em;
	font-family:"futura_de";
	line-height:1}
@media screen and (max-width:420px) {
	.dsl-en {
	font-size:1rem}
}
.dsl-text {
	margin-bottom:6.4rem}
@media screen and (max-width:420px) {
	.dsl-text {
	margin-bottom:3.2rem}
}
.dsl-image {
	max-width: 720px;
	-webkit-box-shadow:0px 63px 154px -20px rgba(7,  33,  66,  0.5);
	box-shadow:0px 63px 154px -20px rgba(7,  33,  66,  0.5)}
@media screen and (max-width:420px) {
	.dsl-image {
	-webkit-box-shadow:0px 33px 84px -20px rgba(7,  33,  66,  0.5);
	box-shadow:0px 33px 84px -20px rgba(7,  33,  66,  0.5)}
}