@charset "utf-8";

@import url("https://unpkg.com/sanitize.css");
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap');


/*--------------*/
/*	全体		*/
/*--------------*/
html,body {
	overflow-x: hidden;
    min-height: 100%;
    font-size: 14px;
}

body {
	font-family: 'M PLUS Rounded 1c', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
    background: #f5f5f5;
	color: black;
	line-height: 2;
}

a {
	color: black;
}

a:hover {
	color: #bbb196;
}

@media screen and (min-width:800px) {
	html, body {
		font-size: 18px;
	}
}

/*--------------*/
/*	header		*/
/*--------------*/
header {
    text-align: center;
    padding-top: 20px;
}

header #logo {   
    margin: 0;
    letter-spacing: 0.1em;
    font-size: 2.2rem;
}

header #logo a {
    text-decoration: none;
}

header #logo img {
    width: 400px;
    padding: 0px 20px;
}

@media screen and (min-width:800px) {
	header {
	    padding: 30px 0;
	}
}

/*--------------*/
/*	menu		*/
/*--------------*/
#menubar ul {
    list-style: none;
	text-align: center;
}

#menubar a {
	display: block;
    text-decoration: none;
	padding: 0 8px;
}

#menubar li {
	display: inline-block;
	text-align: center;
    position: relative;
}

#menubar li::before {
    content: "";
    background: #ccc;
    height: 3px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
	transition: 0.2s;
    transition-timing-function: ease-out;
	transform: scaleX(0);
}

#menubar li:hover::before {
	transform: scaleX(1);
}

@media screen and (min-width:600px) {
	#menubar a {
		padding: 0 20px;
	}
}

@media screen and (min-width:800px) {
	#menubar ul {
	    margin: 20px 70px;
	}
}


/*--------------*/
/*	main		*/
/*--------------*/
main {
    text-align: center;
    display: block;
    margin: 50px 20px;
}

main h2 {
    display: inline-block;
	font-size: 1.6rem;
	margin-bottom: 50px;
    letter-spacing: 0.1em;
    border-bottom: 3px solid #ccc;
}

main h3 {
	font-size: 1.4rem;
	margin-bottom: 40px;
}

main p {
	margin-bottom: 40px;
}

h2 + h3, h2 + p, h3 + p {
    margin-top: -20px;
}

@media screen and (min-width:800px) {
	main {
		margin: 50px 70px;
	}
}

.explanation {
	text-align: left;
	white-space: pre-wrap;
}

/*--------------*/
/*	footer		*/
/*--------------*/
footer small {
	font-size: 100%;
}

footer {
	font-size: 0.6rem;
	text-align: center;
	padding: 20px;
}

footer a {
	text-decoration: none;
}

footer .pr {
	display: block;
}