@charset "utf-8";

/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&family=Roboto:wght@100;300;400;500;700&display=swap');


/* common 
---------------------- */
html, body {
		height: 100%;
}

html *,
::before,
::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
/* フォント */
html {
	font-size: 14px;
}
@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}
/* レスポンシブイメージと画像下スペース防止 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

body {
	/*ios safari向け対策*/
	-webkit-text-size-adjust: 100%;
	/* anti-aliasing */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100%;
	background: hsla(0, 100%, 50%, 0.0);
	vertical-align: baseline;
	font-size: 14px;
	line-height: 1.8;
	font-family: 'Roboto', 'Noto Sans JP', sans-serif;
	font-weight: 300;
}

/* おもな太字タグのフォントウェイトと余白設定 */
h1, h2, h3, h4, h5, h6, p, th, strong {
	font-weight: 700;
	margin: 0;
	padding: 0;
}

ol, ul, li{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
/* link
-------------------------------- */
a:link {
	color: hsla(0, 100%, 50%, 1.0);
}
a:visited {
	color: hsla(0, 100%, 50%, 1.0);
}
a:hover {
	text-decoration: none;
}
a:active {
	color: hsla(210, 100%, 60%, 1.0);
}
a:hover img {
	opacity: 0.7;
}
/* link end
-------------------------------- */
/* link
-------------------------------- */
.red {
	color: hsla(0, 100%, 50%, 1.0);
}
/* link end
-------------------------------- */