@charset "utf-8";

html,
body,
.contentsWrap,
#mainContents {
	height:100%;
}

body, #wrapper {
	height: 100dvh;
}
	@media screen and (max-width: 970px) { /* SP */
		html {
			 font-size: 62.5%;
		}
		body {
			font-size: 15px;
			font-size: 1.5rem;
			letter-spacing: 0.05em;
			line-height: 1.6;
			-webkit-text-size-adjust: 100%; /* iPhone safari ランドスケープ時　文字サイズ対応 */
		}
		img {
			max-width: 100%;
		}		
		header {
			margin-top: 0;
			top: 0;
			position: fixed;
			height: 50px;
			width:100%;
			z-index:100;
			background: #ffffff;
			border-bottom: 1px solid #dcdcdc;
			line-height: 1.75;
		}
		header:after {
			content:" ";
			display:block;
			clear:both;
		}
		header #headerWrap {
			height: 50px;
		}
		#header {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			height: 55px;
			border-bottom:5px solid #023f73;
		}
		.logo {
			width: 23.7vw;
			margin-left: 4vw;
			margin-right: auto;
		}
		.logo img {
			vertical-align: middle;
			max-height: 23px;
		}
		article {
			display:flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width:100%;
			flex-direction: column;
			border-top:#00346C 3px solid;
		}
		section {
			padding:0 10px;
		}
		h1 {
			text-align: center;
			font-size: 22px;
			margin-bottom: 30px;
			font-weight:bold;
			width:100%;
		}
		p {
			text-align:left;
			line-height:3;
			width:100%;
		}
	}
	@media screen and (min-width:971px) {
		html {
			font-size: 62.5%;
			height:100%;
		}
		body {
			font-size: 18px;
			font-size: 1.8rem;
			letter-spacing: 0.07em;
			line-height: 1.6;
			height:100%;
		}
		header{
			background: #fff;
			line-height: 1.6;
		}
		#header {
			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: 18px 19px 18px 14px;
		}
		.logo img {
			max-width: 100%;	
			max-height:34px;
		}		
		.contentsWrap {
			height:100%;
		}
		#mainContents {
			height:100%;
		}
		article {
			display:flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width:100%;
			flex-direction: column;
			border-top:#00346C 3px solid;
		}
		h1 {
			text-align: center;
			font-size: 40px;
			margin-bottom: 30px;
			font-weight:bold;
			width:100%;
		}
		p {
			text-align:center;
			line-height:3;
			width:100%;
		}
	}