:root{
/*#4fe8b5 limegreen*/
--card-color:#62AC7B;
/*--navi-color:#00724b;*/ /*0, 114, 75;*/
--navi-color:#0A4B46;
--accent-color:#1EC8D7;
}

body{
	margin:0; background-color:#EDEEF0; color:black; text-align:center; font-family:游ゴシック体,YuGothic,游ゴシック Medium,Yu Gothic Medium,游ゴシック,Yu Gothic,Meiryo,メイリオ,Hiragino Kaku Gothic Pro,ヒラギノ角ゴ Pro W3,arial,sans-serif; min-height:100vh;
	display:flex;
	flex-direction:column;
	min-width:max-content;
}

body > :not(header, footer) { max-width:768px; margin:30px auto; }

.bar { background-color:var(--navi-color); min-width:max-content; white-space:nowrap; }
.bar a { color:whitesmoke; }

header { align-items:center; height:60px; width:100%; display:flex; font-weight:bold; box-shadow:0px 3px 3px gray; position:sticky; position:-webkit-sticky; top:0; z-index:64; }
header > a { text-decoration:none; padding:10px 20px; border-right:solid 1px rgba(255,255,255,0.25); }
header > a:hover:not(.current) { background-color:rgba(0,0,0,0.2); /*border-bottom-color:currentColor;*/ transition-duration:750ms;}
header > :first-child { margin-left:auto; }
header > :last-child { margin-right:auto; border-right-width:0; color:palegoldenrod; }
header > a.current {
	text-decoration:underline; text-underline-offset:10px; color:AntiqueWhite;
	/* position:relative; color:#fefbd8; */
	
} /*color:var(--accent-color); }*/
/* header > a.current::after { content:""; background-color:white; position:absolute; left:20px; bottom:5px; width:calc(100% - 40px); height:3px; border-radius:9999px; } */

footer { font-size:0.7rem; margin-bottom:0; margin-top:auto; }
footer > div { margin:5px 0; }
footer > :last-child { color:#111 }

footer > .bar > a { margin:7px; background-image:linear-gradient(0deg, transparent 0 1px, currentColor 1px 2px,transparent 2px 100%); background-repeat:no-repeat; background-size:0 100%; }
footer > .bar > a:hover{background-size:100% 100%; text-decoration:none; transition:background-size .5s; }

@media screen and (max-width:600px) {
header { height:50px; }
header > a  { font-size:0.8em; padding:6px 15px; }
header > :nth-child(2) { display:none; }
}