@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

body {
	box-sizing: border-box !important;
	font-family: "Noto Sans JP", sans-serif !important;
}

div#mainContents table {
	width: 97% !important;
	max-width: 100% !important;
}

div#mainContents h3 {
	background-image: none;
	border-bottom: 1px dotted #69accf;
	border-left: 4px solid #69accf;
}

div#mainContents iframe {
	width: 98% !important;
	height: auto !important;
	max-width: 960px;
	aspect-ratio: 16/9 !important;
}

@media screen and (min-width: 1280px) {
	body {
		font-size: min(1vw, 12px) !important;
	}
}

@media screen and (max-width: 768px) {
	body {
		font-size: calc(100vw * 20 / 768) !important;
	}

	div#platform {
		display: flex;
		flex-direction: column;
		padding: 0 10px !important;
	}

	div#header {
		order: 1;
	}


	div#header p#siteId {
		float: none;
	}

	div#header p#siteId img {
		width: 100% !important;
		height: auto !important;
	}

	ul#remoteNav {
		margin-bottom: 1rem !important;
		padding-top: 0 !important;
	}

	div#header p#search {
		display: flex !important;
		justify-content: center !important;
		align-content: center !important;
		flex-wrap: wrap !important;
		padding: 5% 1%;
	}

	p#search input.txt {
		width: 82vw !important;
	}

	p#search input.submit {
		margin: 1rem 1rem 0 !important;
	}

	dl#fontSize {
		right: 5px !important;
	}

	div#mainContents {
		order: 2;
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
	}

	div#mainContents h2 {
		margin-right: 0 !important;
	}

	div#mainContents div.inner {
		padding-right: 1rem !important;
	}

	div#mainContents div.contents ul li {
		white-space: inherit !important;
	}


	div#mainContents div.inner dt ,
	dd {
		display: block !important;
	}

	div#mainContents div.inner dt {
		float: none !important;
	}

	div#mainContents div.inner dd {
		margin-inline-start: 2rem !important;
	}

	div#mainContents img {
		height: auto !important;
		max-width: 98% !important;
		margin-bottom: 1rem !important;
	}

	div#mainContents iframe {
		width: 98% !important;
		height: auto !important;
		aspect-ratio: 16/9 !important;
	}

	div#mainContents div.ie5 {
		width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: auto !important;
		margin: 0 auto !important;
	}

	p#pageurl {
		width: 95% !important;
	}

	p#pageurl input {
		max-width: 98% !important;
	}

	div#mainContents table {
		width: 100% !important;
		max-width: 720px !important;
	}

	div#mainContents p ,
	div#mainContents ul ,
	div#mainContents ol ,
	div#mainContents dl {
		margin: 0 8px 16px 8px !important;
	}

	div#subContents {
		order: 3;
		width: 100%;
	}

	div#footer {
		order: 4;
	}

	p#goToTop {
		order: 5;
	}
}