@charset "UTF-8"; 
* { box-sizing: border-box; }
html { font-size: 62.85%; }
body { font-size: 2.2rem; padding: 0; margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
img { max-width: 100%; }
a { text-decoration: underline; }

:root {
	--mainWidth: 750px;
}

.pc{display: block;}
.sp{display: none;}
.red{color:#bb0000;}
header { background: #fff; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; box-shadow: 0 3px 30px rgba(0,0,0,0.1); padding: 10px calc((100% - var(--mainWidth))/2); }
#header_title { font-size: 25px; text-align: center; color: #333; }

section { width: var(--mainWidth); margin: 0 auto; padding: 50px 0; }

footer { display: grid; grid-template-columns: 1fr auto; gap: 3em; align-items: center; margin-top: auto; background: #efefef; padding: 20px calc((100% - var(--mainWidth))/2); }
#footer_info { font-size: 1.2rem; color: #333; }
#footer_info ul { display: grid; grid-template-columns: auto 1fr; gap: 2em; }
#footer_info ul li { padding: 0.3em 0; margin-bottom: 0.5em; }
#footer_info #copyright { line-height: 1.5; }

@media (max-width: 480px) {
	.pc{display: none;}
	.sp{display: block;}

	header { padding: 3vw 0; grid-template-columns: 1fr; }
	#header_logo { width: 50vw; margin: 0 auto 2vw; }
	#header_title { font-size: 6.5vw; }
	section { width: 100%; }

	footer { grid-template-columns: 1fr; gap: 3vw; padding: 5vw; }
	#footer_logo { width: 60vw; margin: 0 auto; }
	#footer_info ul { grid-template-columns: repeat(2, 1fr); }
	#footer_info ul li { text-align: center; }
	#footer_info #copyright { font-size: 2.5vw; text-align: center; }
}