/*
 * @brief 基本CSS
 * @note トップページで使用する
 */

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: #dcb;
  color: #000;
  font-family: Meiryo, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* デフォルトのリンク */
a {
}
a:hover {
}
a:visited {
}

/* ###################################### */
/* ナビのレイアウト　ナビ全体 */
.main-nav {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
}
.navHeader {
  display: flex;
  position: fixed;
  justify-content: flex-end;
  width: 100%;
}

/* ナビのレイアウト　リストの各要素 */
.main-nav a {
  border-radius: 5px;
  background: rgba(187, 170, 153, 0.8);
  color: #fff;
  display: block;
  margin: 0px 15px; /* 上下、左右 */
  padding: 5px 15px; /* 上下、左右 */
  text-decoration: none;
}
/* ###################################### */
/* タイトル */
.siteTitle {
  font-family: serif;
  color: #333;
}

/* ###################################### */
/* 項目レイアウト */
.topic {
  color: #333;
}
.topic__ {
  color: #333;
}
.topic__title {
  color: #333;
}
.topic__text {
  color: #333;
}

/* ###################################### */
/* 小説レイアウト */
/* カテゴリ */
.novelCategory {
  background: #ba9;
  color: #333;
  border-radius: 10px;
  padding: 10px 0px; /* 上下、左右 */
  display: block;
}
.novelCategory article {
}

/* 作品枠 */
.novelList {
  display: flex;
  flex-wrap: wrap;
}
.novelArea {
  flex: 0 1 50%;
  margin: 5px 0px; /* 上下、左右 */
}
.novelArea section {
}

/* タイトル */
.novelTitle {
  font-family: serif;
  font-size: 1.5em;
  padding: 10px 0px 10px 10px; /* 上、右、下、左 */
  margin: 0px 5px 0px 5px; /* 上、右、下、左 */
  background: #222;
}
.novelTitle a {
  color: #cce;
}
/* あらすじ */
.novelAbout {
  padding: 10px 15px; /* 上下、左右 */
  margin: 0px 5px; /* 上下、左右 */
  background: #333;
  color: #ccc;
}
/* タグ */
.novelTag {
  padding: 5px 10px; /* 上下、左右 */
  margin: 0px 5px; /* 上下、左右 */
  background: #555;
  color: #ccc;
  font-size: 0.9em;
}
/* モバイル */
html{
  font-size: 62.5%;
}
body{
  font-size:1.6rem;/* 16px*/
  line-height: 2;
}
@media (min-width: 1200px) {/* 1200px以上*/
  h1 {
      font-size: 3.6rem;/* 36px*/
  }
  h2 {
      font-size: 2.4rem;/* 24px*/
  }
}
@media screen and (max-width: 640px) {/* 640px以下*/
  .novelList {
    flex-direction: column;
  }
  body{
  line-height: 2;
  }
  h1{
      font-size: 2.4rem;/* 24px*/
  }
  h2 {
      font-size: 2rem;/* 20px*/
  }
}