@charset "UTF-8";

/**
 * 全体
----------------------------------------------------------------*/
:root{
	/* フォント */
	--mincho: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	--gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, sans-serif;
	
	/* 配色 */
	--gray:#ccc;
	--silver:#f5f5f5;
	--none:rgba(0,0,0,0);
	
	--gap:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / var(--tab) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base))
	
	);
}

/* ボディ */
body{
	font-family:var(--gothic);
	font-weight:400;
	font-size:var(--s);
	letter-spacing:.1em;
}

body > header > h1{
	background:black;
	color:white;
	padding:20px;
	text-align:center;
	font-size:var(--xl);
}
.ul > li{
	font-size:var(--xl);
}
.ul > li::before{
	content:'●';
	color:var(--main);
}
.bigtext{
	font-size:var(--xxl);
	text-align:center;
}

.buttons > *:not([href]){
	background:#ccc;
}
.button{
	border:1px solid #ccc;
	background:white;
	border-radius:4px;
	padding:6px 10px;
	display:inline-block;
	margin-right:10px;
}
.button:hover{
	background:var(--main);
	color:white;
}

textarea{
	border:1px solid #ccc;
	width:100%;
	min-height:300px;
}