/* IMPORT RESET ================================================== */
@import url("sanitize.css");

/* WEB FONT ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");

/* STYLES ======================================================== */

/* ルートのフォントサイズを10pxに設定 */
html {
  font-size: 62.5%;
}

/* bodyのフォントサイズを16pxに設定 */
body {
  font-size: 1.6em;
  background-color: #8cd2eb;
}

/* MEMO ++++++++++++++++++++++++++++++++
  フォントサイズはremで指定すること
  例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */

*{
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  margin: 0;
  padding: 0;
}

header,
main,
footer{
  margin: 0 auto;
  padding: 0;
  background-color: #fff;
  max-width: 980px;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;　/*Chromeで画像がぼやけるのを防止*/
}

p{
  margin: 0;
  padding: 0;
}

/*ページトップスクロール ──────────────────────────────────────────────────*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 10;
}

.topbtn{
	display: block;
	background: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	text-align: center;
	box-shadow: 0 0 0 3px #000;/*ボタンの背景色に合わせる*/
	border: 2px solid #fff;
	text-decoration: none;
	
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background: #666;
			box-shadow: 0 0 0 3px #666;/*ボタンの背景色に合わせる*/
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末を想定した装飾 */
		&:active {
			background: #666;
			box-shadow: 0 0 0 3px #666;/*ボタンの背景色に合わせる*/
		}
	}
	
	i {
		padding-top: 5px;
		font-size: var(--large);
		display: block;
	}
	span {
		display: block;
		font-size: var(--small);
		margin-top: -2px;
	}
}

/* ▲ページトップスクロールここまで▲ */

/* スマホなど幅が足りなくなったらspanで囲った単位で改行 */
.spBr span{
  display: inline-block;
  white-space: nowrap;
}