@import url("https://fonts.googleapis.com/css?family=Lato");
@charset "UTF-8";
body{
	position : relative;
}
@media screen and (max-width: 768px){
	body{
		overflow-x : hidden;
	}
}
.wrap{
	margin-left : auto;
	margin-right : auto;
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
}
#header div a{
	align-items : center;
	position: relative;
}
#header div .logo img{
	width : auto;
	max-width : inherit;
}
#header .name{
}
@media screen and (max-width: 768px){
	#header .wrap{
		display : flex;
		align-items : center;
	}
	#header .name{
		font-size : 10px;
		position: absolute;
		top: calc( 13 * 100vw / 768 );
		left: calc( 80 * 100vw / 768 );
		margin: 0;
	}
}
@media print,screen and (min-width: 769px){
	#header .wrap{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		justify-content : space-between;
		align-items : center;
	}
	#header .name{
		font-size : 10px;
		position: absolute;
		top: 15px;
		left: 62px;
		margin: 0;
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open [data-aos^=fade]{
		opacity : 1!important;
	}
	body.is-open #nav{
		max-height : 100vh;
	}
	#menuBth span span:nth-of-type(2){
		transform-origin : center center;
	}
	#menuBth span span:nth-of-type(3){
		transform-origin : center center;
	}
	body.is-open #menuBtn span{
		overflow : hidden;
	}
	body.is-open #menuBtn span span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #menuBtn span span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #menuBtn span span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #menuBtn span span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
	@media (-ms-high-contrast:none){
		body.is-open #menuBtn span span:nth-of-type(1){
			transform : translateY( 10px ) scale(0);
		}
		body.is-open #menuBtn span span:nth-of-type(4){
			transform : translateY( -10px ) scale(0);
		}
	}
}
#menuBtn{
	position : absolute;
	display : block;
}
#menuBtn > span{
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}
#menuBtn span span{
	position : absolute;
	width : 100%;
	display : block;
	transition : transform .3s ease;
}
#menuBtn span span:nth-of-type(1){
	top : 0;
}
#menuBtn span span:nth-of-type(4){
	bottom : 0;
}
@media screen and (max-width: 768px){
	#menuBtn{
		top : calc( 31 * 100vw / 768 );
		right : calc( 24 * 100% / 768 );
		width : calc( 80 * 100vw / 768 );
		height : calc( 48 * 100vw / 768 );
	}
	#menuBtn span span{
		height : calc( 8 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/
@media screen and (max-width: 768px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
	}
	#nav .scroll{
		padding-top : calc( 4 * 100vw / 768 );
		padding-bottom : calc( 139 * 100vw / 768 );
	}
	#nav #closeBtn{
		margin-left : auto;
		margin-right : auto;
		text-align : center;
		display : block;
		margin-top : calc( 73 * 100vw / 768 );
	}
	#nav #closeBtn img{
		width : auto;
		height : calc( 111 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#nav .scroll{
		margin-left : auto;
		margin-right : auto;
	}
}
@media screen and (max-width: 768px){
	#global-navigation li{
		border-bottom : calc( 3 * 100vw / 768 ) solid #fff;
	}
	#global-navigation a{
		font-size : calc( 28 * 100vw / 768 );
		display : flex;
		align-items : center;
		height : calc( 108 * 100vw / 768 );
		padding-left : calc( 16 * 100% / 720 );
		padding-right : calc( 16 * 100% / 720 );
	}
}
@media print,screen and (min-width: 769px){
	#global-navigation{
		width : 100%;
		display : flex;
		height : 50px;
		padding-top : 8px;
		padding-bottom : 8px;
	}
	#global-navigation li{
		flex-grow : 1;
		border-right : solid 1px #fff;
	}
	#global-navigation li:first-child{
		border-left : solid 1px #fff;
	}
	#global-navigation a{
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		width : 100%;
		height : 100%;
		font-size : 14px;
	}
}
#side-navigation .cv{
	letter-spacing : .04em;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
#side-navigation .sns{
	display : flex;
	align-items : center;
	justify-content : center;
}
#side-navigation .sns a{
	display : block;
	border-radius : 50%;
}
#side-navigation .sns a img{
	width : 100%;
	height : auto;
}
@media screen and (max-width: 768px){
	#side-navigation{
		margin-top : calc( 40 * 100vw / 768 );
	}
	#side-navigation .cv{
		width : 100%;
		height : calc( 128 * 100vw / 768 );
		font-size : calc( 30 * 100vw / 768 );
	}
	#side-navigation .sns{
		margin-top : calc( 32 * 100vw / 768 );
	}
	#side-navigation .sns li + li{
		margin-left : calc( 33 * 100vw / 768 );
	}
	#side-navigation .sns a{
		width : calc( 120 * 100vw / 768 );
		height : calc( 120 * 100vw / 768 );
		background-color : rgba(0,0,0,.4);
	}
}
@media print,screen and (min-width: 769px){
	#side-navigation{
		position : absolute;
		left : calc( 50% + 335px );
		height : 85px;
		top : 0;
		display : flex;
		align-items : center;
		flex-direction : row-reverse;
	}
	#side-navigation .sns li + li{
		margin-left : 7px;
	}
	#side-navigation .sns a{
		width : 40px;
		height : 40px;
	}
	#side-navigation .cv{
		margin-left : 17px;
		width : 178px;
		height : 43px;
		font-size : 16px;
	}
}
/*--------------------------------------------
TO TOP
---------------------------------------------*/
#toTop{
	backface-visibility : hidden;
	will-change : position;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	position : fixed;
	bottom : 10px;
	z-index : 10;
}
#toTop.is-absolute{
	position : absolute;
	bottom : inherit;
	top : 0;
}
@media screen and (max-width: 768px){
	#toTop{
		right : calc( 10 * 100% / 768 );
		height : calc( 100 * 100vw / 768 );
		width : calc( 100 * 100% / 768 );
		background-color : rgba(0,0,0,.7);
		font-size : calc( 22 * 100vw / 768 );
		color : #f9fcff;
	}
}
@media print,screen and (min-width: 769px){
	#toTop{
		width : 31px;
		height : 31px;
		background-color : #ccc;
		font-size : 14px;
		color : #000;
		left : calc( 50% + 498px );
	}
	#toTop.is-absolute{
		top : 3px;
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
	position : relative;
}
#footer p{
	font-family : "Lato", sans-serif;
	text-align : center;
	letter-spacing : .1em;
	line-height : 1.1;
}
@media screen and (max-width: 768px){
	#footer{
		font-size : calc( 26 * 100vw / 768 );
	}
	#footer .wrap{
		padding-top : calc( 60 * 100vw / 768 );
		padding-bottom : calc( 60 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#footer{
		font-size : 13px;
	}
	#footer .wrap{
		padding-top : 36px;
		padding-bottom : 120px;
	}
}
/*--------------------------------------------
COMPONENT HEADER
---------------------------------------------*/
.component-header{
	color : #fff;
	text-align : center;
}
.component-header .title span{
	display : block;
}
.component-header .title span:nth-of-type(2){
	font-family : "Lato", sans-serif;
}
@media screen and (max-width: 768px){
	.component-header{
		background-image : url("../images/component/header/bg_sp.png");
		background-repeat : no-repeat;
		background-position : center top;
		background-size : cover;
	}
	.component-header .wrap{
		height : calc( 190 * 100vw / 768 );
		padding-top : calc( 59 * 100vw / 768 );
	}
	.component-header .title span:nth-of-type(1){
		font-size : calc( 50 * 100vw / 768 );
	}
	.component-header span:nth-of-type(2){
		font-size : calc( 22 * 100vw / 768 );
		margin-top : calc( 30 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.component-header{
		background-image : url("../images/component/header/bg.png");
		background-repeat : no-repeat;
		background-position : center top;
		background-size : cover;
	}
	.component-header .wrap{
		height : 180px;
		padding-top : 67px;
	}
	.component-header .title span:nth-of-type(1){
		font-size : 30px;
	}
	.component-header span:nth-of-type(2){
		font-size : 18px;
		margin-top : 35px;
	}
}
.component-flexbox .img{
	flex-shrink : 0;
}
@media screen and (max-width: 768px){
	.component-flexbox .img{
		text-align : center;
	}
}
@media print,screen and (min-width: 769px){
	.component-flexbox{
		display : flex;
		align-items : flex-start;
	}
	.component-flexbox.reverse{
		flex-direction : row-reverse;
	}
}
.component-center{
	text-align : center;
}
.component-list{
	display : flex;
	flex-wrap : wrap;
}
@media screen and (max-width: 768px){
	.component-list{
	}
}
@media print,screen and (min-width: 769px){
	.component-list{
	}
}
/*# sourceMappingURL=../maps/layout.css.map */