@charset "UTF-8";

/*--------------------------------------------
FONT SIZE
---------------------------------------------*/

@media screen and (max-width: 768px){
	html{
		font-size : calc( 10 * 100vw / 768 );
		scroll-padding-top : calc( 100 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	html{
		font-size : 10px;
		scroll-padding-top : 120px;
	}
}

body{
	background-color : #f8f8f8;
}

@media screen and (max-width: 768px){
	body{
		font-size : 2.4rem;
		padding-top : calc( 100 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	body{
		font-size : 1.6rem;
		padding-top : 120px;
		min-width : 1060px;
	}
}

/*--------------------------------------------
WRAPPER
---------------------------------------------*/

@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

@media print,screen and (min-width: 769px){
	.wrap{
		padding-left : calc( ( 100% - 1060px ) / 2 );
		padding-right : calc( ( 100% - 1060px ) / 2 );
	}
}

@media print,screen and (min-width: 1100px) and (-ms-high-contrast:none){
	.wrap{
		padding-left : calc( ( 100% - 1060.01px ) / 2 );
		padding-right : calc( ( 100% - 1060.01px ) / 2 );
	}
}

/*--------------------------------------------
HEADER
---------------------------------------------*/

#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
	display : flex;
	align-items : flex-start;
	justify-content : space-between;
	background-color : #fff;
}

#header .logo{
	display : block;
}

@media screen and (max-width: 768px){
	#header{
		padding-left : calc( 12 * 100% / 768 );
		padding-right : calc( 12 * 100% / 768 );
		height : calc( 100 * 100vw / 768 );
	}
	#header .logo{
		padding-top : calc( 20 * 100vw / 768 );
	}
	#header .logo img{
		height : calc( 63 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#header{
		min-width : 1060px;
		height : 120px;
		padding-left : 20px;
		padding-right : 20px;
	}
	#header .logo{
		padding-top : calc( 18px - 2px );
	}
	#header .logo span{
		font-size : 1rem;
		line-height : 1.4;
		display : block;
		font-style : normal;
		margin-bottom : calc( 11px - 2px );
	}
	#header .logo img{
		height : 48px;
	}
}

@media (min-width: 1620px){
	#header{
		padding-left : calc( ( 100% - 1600px ) / 2 );
		padding-right : calc( ( 100% - 1600px ) / 2 );
	}
}

@media screen and (max-width: 768px){
	#header .contacts{
		display : flex;
		align-items : center;
		padding-top : calc( 17 * 100vw / 768 );
		padding-right : calc( 121 * 100% / 744 );
	}
	#header .contacts p{
		font-size : 2rem;
		line-height : 1.2;
		text-align : center;
		letter-spacing : .1em;
		text-indent : .1em;
		margin-right : calc( 19 * 100vw / 768 );
	}
	#header .contacts a{
		display : block;
	}
	#header .contacts a img{
		height : calc( 66 * 100vw / 768 );
	}
	#header .contacts a + a{
		margin-left : calc( 6 * 100vw / 768 );
	}
}

/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/

@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open #nav{
		max-height : 100vh;
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : rotate(-45deg);
		top : 50%;
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(45deg);
		top : 50%;
	}
}

@media screen and (max-width: 768px){
	#menuBtn{
		z-index : 11;
		position : absolute;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(2){
		bottom : 0;
	}
	#menuBtn{
		height : calc( 100 * 100vw / 768 );
		width : calc( 100 * 100% / 768 );
		top : 0;
		right : calc( 12 * 100% / 768 );
		padding-top : calc( 38 * 100vw / 768 );
		padding-bottom : calc( 38 * 100vw / 768 );
		padding-right : calc( 20 * 100% / 768 );
		padding-left : calc( 20 * 100% / 768 );
	}
	#menuBtn span span{
		background-color : #000;
		height : calc( 6 * 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;
		height : calc( 100vh - ( 100 * 100vw / 768 ) );
		top : calc( 100 * 100vw / 768 );
		background-color : rgba(0,0,0,.9);
	}
	#nav .scroll{
		padding-top : calc( 40 * 100vw / 768 );
		padding-bottom : calc( 40 * 100vw / 768 );
		min-height : calc( 100vh - ( 100 * 100vw / 768 ) );
	}
}

@media print,screen and (min-width: 769px){
	#nav{
		padding-top : 27px;
	}
	#nav .scroll{
		display : flex;
		flex-direction : column-reverse;
		justify-content : flex-end;
		align-items : flex-end;
	}
}

@media screen and (max-width: 768px){
	#navGlobal{
		padding-left : calc( 159 * 100% / 768 );
		padding-right : calc( 159 * 100% / 768 );
	}
	#navGlobal a{
		display : flex;
		align-items : center;
		justify-content : center;
		height : calc( 103 * 100vw / 768 );
		color : #fff;
		border-bottom : calc( 3 * 100vw / 768 ) solid #fff;
		font-weight : 500;
		font-size : 3.4rem;
	}
}

@media print,screen and (min-width: 769px){
	#navGlobal{
		display : flex;
		align-items : flex-start;
		margin-top : 20px;
	}
	#navGlobal li{
		font-size : 1.6rem;
		font-style : normal;
	}
	#navGlobal li + li:before{
		content : " ／ ";
		white-space : pre;
		letter-spacing : .1em;
		text-indent : .1em;
	}
	#navGlobal a{
		letter-spacing : .1em;
	}
}

#navSub a:nth-of-type(1){
	font-weight : 700;
	letter-spacing : .1em;
}

#navSub a:nth-of-type(2){
	display : flex;
	align-items : baseline;
	background-color : #00c200;
	color : #fff;
	background-image : url("../images/ui/icon/line.jpg");
	background-repeat : no-repeat;
	background-size : auto 100%;
}

#navSub a:nth-of-type(2) span{
	font-weight : 500;
	letter-spacing : .1em;
	font-style : normal;
}

@media screen and (max-width: 768px){
	#navSub{
		margin-top : calc( 62 * 100vw / 768 );
	}
	#navSub a:nth-of-type(1){
		display : table;
		margin-left : auto;
		margin-right : auto;
		font-size : 6rem;
		text-indent : .1em;
		text-align : center;
		color : #fff;
	}
	#navSub a:nth-of-type(2){
		margin-left : auto;
		margin-right : auto;
		width : calc( 500 * 100% / 768 );
		height : calc( 104 * 100vw / 768 );
		margin-top : calc( 65 * 100vw / 768 );
		padding-left : calc( 151 * 100% / 768 );
		background-position : calc( 43 * 100% / 768 ) 0;
		padding-top : calc( 20 * 100vw / 768 );
	}
	#navSub a:nth-of-type(2) span:nth-of-type(1){
		font-size : 5.5rem;
	}
	#navSub a:nth-of-type(2) span:nth-of-type(2){
		font-size : 4.5rem;
	}
}

@media print,screen and (min-width: 769px){
	#navSub{
		display : flex;
		align-items : flex-start;
	}
	#navSub p{
		font-size : 1.4rem;
		line-height : 1.1429;
		letter-spacing : .1em;
		text-align : right;
		padding-top : calc( 4px - 1px );
	}
	#navSub a:nth-of-type(1){
		font-size : 3rem;
		margin-left : 9px;
		margin-top : 5px;
	}
	#navSub a:nth-of-type(2){
		margin-left : 20px;
		width : 158px;
		height : 33px;
		background-position : 1px 0;
		padding-left : 37px;
		padding-top : 4px;
	}
	#navSub a:nth-of-type(2) span{
		font-style : normal;
	}
	#navSub a:nth-of-type(2) span:nth-of-type(1){
		font-size : 2.2rem;
	}
	#navSub a:nth-of-type(2) span:nth-of-type(2){
		font-size : 1.8rem;
	}
}

@media screen and (max-width: 768px){
	#menuClose{
		display : table;
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 74 * 100vw / 768 );
	}
	#menuClose img{
		height : calc(  * 100vw / 768 );
	}
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

#title{
	background-color : #000;
	position : relative;
	color : #fff;
}

#title:after{
	content : "";
	display : block;
	position : absolute;
	top : 0;
	background-position : 0 0;
	background-size : contain;
	background-repeat : no-repeat;
}

#title span{
	height : 100%;
	display : flex;
	flex-direction : column;
	justify-content : flex-end;
	align-items : flex-start;
	font-weight : 900;
	letter-spacing : .1em;
}

#title span:after{
	font-weight : 500;
	font-family : "Roboto", sans-serif;
}

@media screen and (max-width: 768px){
	#title{
		padding-left : 0;
		padding-right : 0;
		height : calc( 604 * 100vw / 768 );
		border-top : calc( 30 * 100vw / 768 ) solid #fff;
		padding-bottom : calc( 96 * 100vw / 768 );
	}
	#title:after{
		right : 0;
		width : calc( 713 * 100% / 768 );
		height : calc( 574 * 100vw / 768 );
		top : calc( -30 * 100vw / 768 );
		background-size : cover;
	}
	#title span{
		position : relative;
		z-index : 1;
		padding-left : calc( 64 * 100% / 768 );
		font-size : 5.5rem;
		text-shadow : 0 0 calc( 40 * 100vw / 768 ) #000;
	}
	#title span:after{
		font-size : 5rem;
		border-top-style : solid;
		border-top-width : calc( 3 * 100vw / 768 );
		margin-top : calc( 18 * 100vw / 768 );
		padding-top : calc( 16 * 100vw / 768 );
		width : calc( 699 * 100% / 720 );
		margin-left : calc( -64 * 100% / 720 );
		padding-left : calc( 64 * 100% / 720 );
	}
	#title:not(.reverse) span:after{
		border-top-color : #fff;
	}
	#title.reverse span:after{
		border-top-color : transparent;
	}
}

@media print,screen and (min-width: 769px){
	#title{
		height : 400px;
		overflow : hidden;
	}
	#title:before{
		content : "";
		display : block;
		position : absolute;
		top : 0;
		background-position : 0 0;
		background-size : contain;
		background-repeat : no-repeat;
		background-image : url("../images/ui/bg/title_pc.png");
		height : 100%;
		width : 1973px;
	}
	#title:after{
		height : 100%;
	}
	#title span{
		font-size : 4rem;
		padding-bottom : 67px;
	}
	#title span:before{
		content : "";
		display : block;
		background-color : #fff;
		height : 1px;
		width : calc( 100vw - 600px );
		position : absolute;
		z-index : 1;
		top : 298px;
	}
	#title span:after{
		font-size : 3rem;
		margin-top : 22px;
	}
	#title:not(.reverse):before{
		left : calc( 50% - 1452px );
	}
	#title:not(.reverse):after{
		width : 834px;
		left : calc( 50% + 13px );
	}
	#title:not(.reverse) span{
		padding-left : 109px;
	}
	#title:not(.reverse) span:before{
		left : 0;
	}
	#title.reverse:before{
		left : calc( 50% - 677px );
	}
	#title.reverse:after{
		width : 1046px;
		left : calc( 50% - 1000px );
	}
	#title.reverse span{
		align-items : flex-end;
	}
	#title.reverse span:before{
		right : 0;
	}
}

/*--------------------------------------------
FOOTER
---------------------------------------------*/

#footer{
	background-color : #4b4b4b;
	color : #fff;
}

#footer .logo{
	display : block;
}

#footer .copyright{
	color : #cecece;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	font-style : normal;
}

@media screen and (max-width: 768px){
	#footer{
		padding-bottom : calc( ( 89 - 3 ) * 100vw / 768 );
		padding-top : calc( 105 * 100vw / 768 );
	}
	#footer .logo{
		text-align : center;
	}
	#footer .logo img{
		height : calc( 51 * 100vw / 768 );
	}
	#footer .copyright{
		font-size : 2.6rem;
		line-height : 1.23;
	}
	#footer .copyright{
		margin-top : calc( ( 72 - 3 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#footer{
		display : flex;
		flex-wrap : wrap;
		justify-content : space-between;
		padding-top : 72px;
		padding-bottom : calc( 47px - 9px );
	}
	#footer .box01{
		padding-left : 24px;
	}
	#footer .logo img{
		height : 51px;
	}
	#footer .link01{
		display : flex;
		flex-wrap : wrap;
		margin-top : 33px;
		width : 432px;
	}
	#footer .link01 li:not(:nth-child(3n+1)):before{
		content : "　／　";
		white-space : nowrap;
	}
	#footer .link01 li:nth-child(n+4){
		margin-top : 16px;
	}
	#footer .link01 a{
		font-size : 1.6rem;
		letter-spacing : .1em;
		color : #cecece;
	}
	#footer .link02{
		display : flex;
		margin-top : 29px;
	}
	#footer .link02 li + li{
		margin-left : 14px;
	}
	#footer .link02 a{
		border : 1px solid #fff;
		display : flex;
		align-items : center;
		font-size : 1.4rem;
		text-align : center;
		letter-spacing : .1em;
		text-indent : .1em;
		padding-left : 1em;
		padding-right : 1em;
		color : #cecece;
		height : 34px;
		font-style : normal;
	}
	#footer .box02{
		padding-right : 24px;
		padding-top : calc( 9px - 1px );
	}
	#footer .box02 p:nth-of-type(1){
		text-align : right;
		letter-spacing : .1em;
		margin-right : .1em;
	}
	#footer .box02 p:nth-of-type(1){
		font-size : 1.6rem;
		line-height : 1.12;
	}
	#footer .box02 div{
		display : flex;
		align-items : center;
		justify-content : flex-end;
		margin-top : calc( 18px - 1px );
	}
	#footer .box02 div a:nth-of-type(1){
		font-weight : 500;
		letter-spacing : .1em;
		font-size : 2.5rem;
	}
	#footer .box02 div a:nth-of-type(2){
		margin-left : 17px;
		display : flex;
		align-items : baseline;
		justify-content : center;
		font-weight : normal;
		background-color : #fff;
		color : #000;
		width : 129px;
		height : 33px;
		font-style : normal;
		padding-top : 4px;
	}
	#footer .box02 div a:nth-of-type(2) span{
		letter-spacing : .1em;
	}
	#footer .box02 div a:nth-of-type(2) span:nth-of-type(1){
		font-size : 2.2rem;
	}
	#footer .box02 div a:nth-of-type(2) span:nth-of-type(2){
		font-size : 1.8rem;
	}
	#footer .box02 p:nth-of-type(2){
		margin-top : 70px;
		color : #cecece;
		text-align : right;
		letter-spacing : .1em;
		margin-right : .1em;
		font-size : 1.8rem;
	}
	#footer .copyright{
		width : 100%;
	}
	#footer .copyright{
		font-size : 1.4rem;
		line-height : 2.28;
	}
	#footer .copyright{
		margin-top : calc( 83px - 9px );
	}
}