@charset "utf-8";

body { background-color:#112249; }
div,p,h1,h2h,h3,h4,i,a {color:#ffffff; }

header {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	grid-template-rows: 1fr;
	width:75%;
	margin:1em auto;
}
/*--base--*/
header div:first-child p { font-size:2.5rem; margin:0 0 0.5em 0; }
header div:first-child img { height:45%; width:auto; }
header div:nth-of-type(2) { margin:3.5em 0 0 0; text-align:right; }
header div:nth-of-type(2) p { font-size:2.1rem; }

/*--other--*/
header div:first-child p.other{ font-size:2rem; margin:0 0 0.25em 0; }
header div:nth-of-type(2).other { margin:3em 0 0 0; text-align:right; }


nav { background-color:#28527a; padding:1em 0;}
nav > ul {
	display:flex;
	flex-wrap: nowrap; /*改行無し*/
	justify-content: flex-end; /*行終わり寄せ*/
	align-items: flex-end; /*親要素の終点から配置 下揃え*/
	list-style:none;
	width:75%;
	height:auto;
	margin:0 auto;
}
nav > ul > li { text-align:right;}
nav > ul > li::after{content:"｜"; margin:0 1.5em; color:#ffffff;}
nav > ul > li:last-child::after{content:none;}



/*--タブレット対応--ここに横幅が768px-960pxの時に発動するスタイルを記述------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width:767px) and (max-width: 1300px) {


header { width:90%; grid-template-columns: 0.7fr 1fr; }
header div:first-child p { font-size:2rem;}

nav > ul {width:90%;}
nav > ul > li::after{margin:0 0.8em;}

}