@charset "UTF-8";

/*--------------------------------------------
DOCUMENT
---------------------------------------------*/

html{
	height : -webkit-fill-available;
}

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

@media screen and (min-width: 751px) and (max-width:1026px){
	html{
		font-size : calc( 10 * 100vw / 1026 );
	}
}

@media print,screen and (min-width: 1027px){
	html{
		font-size : 10px;
	}
}

body{
	min-height : 100vh;
	min-height : -webkit-fill-available;
	display : -ms-grid;
	display :     grid;
	-ms-grid-rows : auto 1fr auto;
	grid-template-rows : auto 1fr auto;
	grid-template-columuns : auto 1fr auto;
}

@media screen and (max-width: 750px){
	body{
		font-size : 2.4rem;
		background-color : #fff;
	}
}

@media print,screen and (min-width: 751px){
	body{
		background-color : #c7d7ea;
		font-size : 1.6rem;
	}
}

@media print,screen and (-ms-high-contrast:none){
	body{
		display : flex;
		flex-direction : column;
		height : 100%;
	}
	header{
		flex-shrink : 0;
	}
	main{
		flex-grow : 1;
	}
	footer{
		flex-shrink : 0;
	}
}

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

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

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

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

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

#header{
	display : flex;
	align-items : center;
	background-color : #fff;
}

#header .logo{
	display : block;
}

@media screen and (max-width: 750px){
	#header{
		padding-left : calc( 34 * 100% / 700 );
		padding-right : calc( 34 * 100% / 700 );
		height : calc( 114 * 100vw / 750 );
	}
	#header .logo img{
		height : calc( 47 * 100vw / 750 );
	}
}

@media screen and (min-width: 751px) and (max-width:1026px){
	#header{
		height : calc( 82 * 100vw / 1026 );
	}
	#header .logo img{
		height : calc( 36 * 100vw / 1026 );
	}
}

@media print,screen and (min-width: 1027px){
	#header{
		height : 82px;
	}
	#header .logo img{
		height : 36px;
	}
}

/*--------------------------------------------
MAIN
---------------------------------------------*/

#main{
	border-top-style : solid;
	border-top-color : #00328a;
	position : relative;
	z-index : 1;
}

@media screen and (max-width: 750px){
	#main{
		border-top-width : calc( 9 * 100vw / 750 );
	}
}

@media screen and (min-width: 751px) and (max-width:1026px){
	#main{
		border-top-width : calc( 9 * 100vw / 1026 );
		padding-bottom : calc( 47 * 100vw / 1026 );
	}
}

@media print,screen and (min-width: 1027px){
	#main{
		border-top-width : 9px;
		padding-bottom : 47px;
	}
}

/*--------------------------------------------
CONTAINER
---------------------------------------------*/

.container{
	background-color : #fff;
	height : 100%;
}

@media screen and (max-width: 750px){
	.container{
		padding-top : calc( ( 68 - 4.29 ) * 100vw / 750 );
	}
}

@media screen and (min-width: 751px) and (max-width:1026px){
	.container{
		padding-left : calc( 24 * 100% / 978 );
		padding-right : calc( 24 * 100% / 978 );
		padding-top : calc( ( 32 - 2.7 ) * 100vw / 1026 );
	}
}

@media print,screen and (min-width: 1027px){
	.container{
		padding-left : 24px;
		padding-right : 24px;
		padding-top : calc( 32px - 2.7px );
	}
}

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

#title{
	font-weight : 700;
	color : #000;
}

@media screen and (max-width: 750px){
	#title{
		font-size : 4.29rem;
		line-height : 1.2;
	}
	#title{
		padding-bottom : calc( ( 60 - 4.3 ) * 100vw / 750 );
		padding-left : calc( 62 * 100% / 700 );
		padding-right : calc( 62 * 100% / 700 );
	}
}

@media print,screen and (min-width: 751px){
	#title{
		font-size : 2.7rem;
		line-height : 1.2;
	}
}

@media print,screen and (min-width: 751px){
	#title{
		padding-bottom : calc( ( 32 - 2.7 ) * 100vw / 1026 );
	}
}

@media print,screen and (min-width: 1027px){
	#title{
		padding-bottom : calc( 32px - 2.7px );
	}
}

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

#footer{
	background-color : #00328a;
	color : #fff;
}

#footer a{
	color : #fff;
}

#footer dl{
	font-weight : 500;
}

#footer li{
	display : block;
}

#footer li a{
	display : flex;
	align-items : center;
}

#footer li a:before{
	content : "";
	display : block;
	background : url("../images/ui/parts/arrow01.svg") 0 0 / contain no-repeat;
	flex-shrink : 0;
}

@media screen and (max-width: 750px){
	#footer{
		padding-top : calc( 45 * 100vw / 750 );
		padding-bottom : calc( 41 * 100vw / 750 );
		padding-left : calc( 39 * 100% / 750 );
		padding-right : calc( 39 * 100% / 750 );
	}
	#footer dt{
		margin-bottom : calc( 31 * 100vw / 750 );
		font-size : 3.1rem;
	}
	#footer dd{
		font-size : 2.6rem;
	}
	#footer dd + dd{
		margin-top : calc( 10 * 100vw / 750 );
	}
	#footer ul{
		margin-top : calc( 44 * 100vw / 750 );
	}
	#footer li + li{
		margin-top : calc( 16 * 100vw / 750 );
	}
	#footer li a{
		font-size : 2.6rem;
	}
	#footer li a:before{
		width : calc( 26 * 100% / 682 );
		height : calc( 26 * 100vw / 750 );
		margin-right : calc( 18 * 100% / 682 );
	}
}

@media print,screen and (min-width: 751px){
	#footer{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
	}
	#footer dt{
		font-size : 1.7rem;
	}
	#footer dd{
		font-size : 1.4rem;
	}
	#footer li a{
		font-size : 1.43rem;
	}
}

@media screen and (min-width: 751px) and (max-width:1026px){
	#footer{
		padding-top : calc( 31 * 100vw / 1026 );
		padding-bottom : calc( 37 * 100vw / 1026 );
	}
	#footer dl{
		padding-left : calc( 32 * 100% / 978 );
	}
	#footer dt{
		margin-bottom : calc( 17 * 100vw / 1026 );
	}
	#footer dd + dd{
		margin-top : calc( 6 * 100vw / 1026 );
	}
	#footer ul{
		margin-top : calc( 6 * 100vw / 1026 );
		padding-right : calc( 32 * 100% / 978 );
	}
	#footer li + li{
		margin-top : calc( 9 * 100vw / 1026 );
	}
	#footer li a:before{
		width : calc( 14 * 100vw / 1026 );
		height : calc( 14 * 100vw / 1026 );
		margin-right : calc( 8 * 100vw / 1026 );
	}
}

@media print,screen and (min-width: 1027px){
	#footer{
		padding-top : 31px;
		padding-bottom : 37px;
	}
	#footer dl{
		padding-left : 32px;
	}
	#footer dt{
		margin-bottom : 17px;
	}
	#footer dd + dd{
		margin-top : 6px;
	}
	#footer ul{
		margin-top : 6px;
		padding-right : 32px;
	}
	#footer li + li{
		margin-top : 9px;
	}
	#footer li a:before{
		width : 14px;
		height : 14px;
		margin-right : 8px;
	}
}