@charset "UTF-8";

/* ↓フォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Neonderthaw&family=Zen+Maru+Gothic:wght@500&display=swap');
/* 英数フォント */
@import url(https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap&subset=japanese'); 
/* 日本語フォント */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');
/* アイコンフォント */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

:root {
	--color-base: #EAEAEA; /* 背景色などのベージュの部分 */
	--color-main: #494a41; /* 赤い部分（リンクとか） */
	--color-accent: #80989b; /* bookボタン */
	--color-text: #333; /* 文字の色 */
	--color-marker: #dcdcdc; /* 文字のマーカー部分の色 */
	--color-light: #fff; /* 白い部分 */
	--font-primary: "Zen Maru Gothic", sans-serif; /* 日本語フォント */
	--font-alphanumeric: 'Outfit', sans-serif; /* 英数フォント */
	--font-icon: 'Font Awesome 6 Free'; /* アイコンフォント */
}
/* 基本的な文字サイズを設定 */
html {
  font-size: 14px; /* 基準となるフォントサイズを16pxに設定 */
}

body {
  font-size: 1rem; /* bodyの文字サイズも1rem(16px)に統一 */
}

/* 全ての要素のフォントサイズを統一 */
h2, h3, h4, h5, h6, p, a, li, span, div {
  font-size: 1rem; /* 全ての要素に対して統一したフォントサイズ */
}

/* @media screen and (min-width: 1367px) {
	html{ font-size:62.5%;}}
@media screen and (max-width: 1366px) {
	html{ font-size:50%;}}
@media screen and (max-width: 800px) {
	html{ font-size:90%;}}
@media screen and (max-width: 500px) {
	html{ font-size:62.5%;}}
 */
@media screen and (min-width: 769px) {
	:root {
		--margin-base: 4em;
		--border-radius: 0.3em;
	}

	body{
		font-size: 1.4rem;
		letter-spacing: 0.15em;
		text-align:center;
		line-height: 1.8;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--margin-base: 2em;
		--border-radius: 0.2em;
	}

	body{
		font-size: 1.4rem;
		letter-spacing: 0.15em;
		line-height: 1.7;
	}
}
@media screen and (max-width: 1024px) {
  .booklist {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* 小さい画面（1列） */
@media screen and (max-width: 600px) {
  .booklist {
    grid-template-columns: 1fr;
  }
}