@charset "UTF-8";
:root{
	--SPDESIGN : 768;
	--bodyColor : #333;
	--titleColor : #222;
	--titleBg : #efefef;
	--minWidth : 1080px;
	--wrapSidePaddingSP : 24;
	--wrapSidePaddingPC : 10px;
	--headerBG : #fff;
	--headerHeightSP : 120;
	--headerHeightPC : 140px;
	--headerWrapHeightPC : 80px;
	--logoHeightSP : 120;
	--logoHeightPC : 52px;
	--logoRigthSpaceSP : 0;
	--logoRigthSpacePC : auto;
	--navBGSP : rgba(98,98,98,.95);
	--navBGPC : #d61518;
	--navColorSP : #fff;
	--navColorPC : #fff;
	--hambergerColor : #000;
	--footerBG : #313131;
	--footerColor : #fff;
	--titleSectionColor : #222;
	--componentTopSpaceSP : 72;
	--componentBottomSpaceSP : 120;
	--componentTopSpacePC : 50px;
	--componentBottomSpacePC : 112px;
	--textSizeSP : 26;
	--textLineHeightSP : 1.54;
	--largeTextSizeSP : 30;
	--largeTextLineHeightSP : 1.8;
	--textSizePC : 14px;
	--textLineHeightPC : 21px;
	--largeTextSizePC : 16px;
	--largeTextLineHeightPC : 30px;
}
/*--------------------------------------------
WRAPPER
---------------------------------------------*/
body{
	color : #333;
	color : var(--bodyColor);
}
@media screen and (max-width: 768px){
	body{
		padding-top : calc( 120 * 100vw / 768);
		padding-top : calc( var(--headerHeightSP) * 100vw / var(--SPDESIGN) );
	}
}
@media print,screen and (min-width: 769px){
	body{
		min-width : 1080px;
		min-width : var(--minWidth);
		padding-top : 140px;
		padding-top : var(--headerHeightPC);
	}
}
@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768);
		padding-left : calc( var(--wrapSidePaddingSP) * 100% / var(--SPDESIGN) );
		padding-right : calc( 24 * 100% / 768);
		padding-right : calc( var(--wrapSidePaddingSP) * 100% / var(--SPDESIGN) );
	}
}
@media print,screen and (min-width: 769px){
	.wrap{
		padding-left : 10px;
		padding-left : var(--wrapSidePaddingPC);
		padding-right : 10px;
		padding-right : var(--wrapSidePaddingPC);
		width : 1080px;
		width : var(--minWidth);
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	background-color : #fff;
	background-color : var(--headerBG);
}
@media screen and (max-width: 768px){
	#header .wrap{
		height : calc( 120 * 100vw / 768);
		height : calc( var(--headerHeightSP) * 100vw / var(--SPDESIGN) );
	}
	#header .logos{
		margin-right : calc( 0 * 100vw / 768);
		margin-right : calc( var(--logoRigthSpaceSP) * 100vw / var(--SPDESIGN) );
	}
	#header .logos img{
		width : auto;
		height : calc( 120 * 100vw / 768);
		height : calc( var(--logoHeightSP) * 100vw / var(--SPDESIGN) );
	}
}
@media print,screen and (min-width: 769px){
	#header{
		height : 140px;
		height : var(--headerHeightPC);
	}
	#header .wrap{
		height : 80px;
		height : var(--headerWrapHeightPC);
	}
	#header .logos{
		margin-right : auto;
		margin-right : var(--logoRigthSpacePC);
	}
	#header .logos img{
		width : auto;
		height : 52px;
		height : var(--logoHeightPC);
	}
}
/*--------------------------------------------
NAVIGATION
---------------------------------------------*/
@media screen and (max-width: 768px){
	#nav{
		height : calc( 100vh - 120 * 100vw / 768);
		height : calc( 100vh - var(--headerHeightSP) * 100vw / var(--SPDESIGN) );
		color : #fff;
		color : var(--navColorSP);
		top : calc( 120 * 100vw / 768);
		top : calc( var(--headerHeightSP) * 100vw / var(--SPDESIGN) );
		background-color : rgba(98,98,98,.95);
		background-color : var(--navBGSP);
	}
	#nav a{
		color : #fff;
		color : var(--navColorSP);
	}
	#nav .scroll{
		padding-left : calc( 24 * 100% / 768);
		padding-left : calc( var(--wrapSidePaddingSP) * 100% / var(--SPDESIGN) );
		padding-right : calc( 24 * 100% / 768);
		padding-right : calc( var(--wrapSidePaddingSP) * 100% / var(--SPDESIGN) );
	}
}
@media print,screen and (min-width: 769px){
	#nav{
		color : #fff;
		color : var(--navColorPC);
		background-color : #d61518;
		background-color : var(--navBGPC);
	}
	#nav a{
		color : #fff;
		color : var(--navColorPC);
	}
	#nav .scroll{
		padding-left : 10px;
		padding-left : var(--wrapSidePaddingPC);
		padding-right : 10px;
		padding-right : var(--wrapSidePaddingPC);
		width : 1080px;
		width : var(--minWidth);
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
#menuBtn span span{
	background-color : #000;
	background-color : var(--hambergerColor);
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
footer{
	background-color : #313131;
	background-color : var(--footerBG);
	color : #fff;
	color : var(--footerColor);
}
footer a{
	color : #fff;
	color : var(--footerColor);
}
/*--------------------------------------------
SECTION TITLE
---------------------------------------------*/
.title-section{
	color : #222;
	color : var(--titleSectionColor);
}
/*--------------------------------------------
COMPONENT
---------------------------------------------*/
@media screen and (max-width: 768px){
	.component .wrap{
		padding-top : calc( 72 * 100vw / 768);
		padding-top : calc( var(--componentTopSpaceSP) * 100vw / var(--SPDESIGN) );
		padding-bottom : calc( 120 * 100vw / 768);
		padding-bottom : calc( var(--componentBottomSpaceSP) * 100vw / var(--SPDESIGN) );
	}
}
@media print,screen and (min-width: 769px){
	.component .wrap{
		padding-top : 50px;
		padding-top : var(--componentTopSpacePC);
		padding-bottom : 112px;
		padding-bottom : var(--componentBottomSpacePC);
	}
}
/*--------------------------------------------
TEXT
---------------------------------------------*/
.text{
	letter-spacing : var(--textLetterSpacing);
}
@media screen and (max-width: 768px){
	.text{
		font-size : calc( 26 * 100vw / 768);
		font-size : calc( var(--textSizeSP) * 100vw / var(--SPDESIGN) );
		line-height : 1.54;
		line-height : var(--textLineHeightSP);
margin-bottom:20px;/*追加*/
	}
}
@media print,screen and (min-width: 769px){
	.text{
		font-size : 14px;
		font-size : var(--textSizePC);
		line-height : 21px;
		line-height : var(--textLineHeightPC);
margin-bottom:20px;/*追加*/
	}
}
@media screen and (max-width: 768px){
	.text-large{
		font-size : calc( 30 * 100vw / 768);
		font-size : calc( var(--largeTextSizeSP) * 100vw / var(--SPDESIGN) );
		line-height : 1.8;
		line-height : var(--largeTextLineHeightSP);
margin-bottom:20px;/*追加*/
	}
}
@media print,screen and (min-width: 769px){
	.text-large{
		font-size : 16px;
		font-size : var(--largeTextSizePC);
		line-height : 30px;
		line-height : var(--largeTextLineHeightPC);
margin-bottom:20px;/*追加*/
	}
}
/*# sourceMappingURL=../maps/config.css.map */

