@charset "utf-8";
/* 
  Template & Designed by Asteroid
  https://asteroid19.netlify.app/
*/
/*
  改変前の配布元
*/
/* ******************************************************************************** */
/*  I'll be NET jQuery Novel
/*  作成：I'll be NET（http://illbenet.jp/）
/* ******************************************************************************** */


/* キーボード操作時にフォーカスリング表示 */
:where(:focus-visible) {
  outline: revert;
}

/* imgタグの隙間発生を防止 */
:where(img) {
  vertical-align: bottom;
}

:root {
  --white: #fff;
  --gray: #f0f0f0;
  --red: #e81a35;
  --text-color: #222;  /* フォントの色 */
  --background-color: #fff;  /* 背景色 */
  --link-color: #5074c6;  /* リンクの色 */
  --link-visited-color: #9a78da;  /* 訪問済みリンクの色 */
  --hr-border-color: #ccc;  /* hr の枠線の色 */
  --button-border-color: #666;  /* 入力欄の枠線の色 */
  --contents_btn_outline_color: #57d5ff;  /* 各種切り替えボタンをホバーしたときの枠線の色 */

  /* 小説の背景色・文字色 */
  /* 白モード */
  --white_mode_background_color: #fff;  /* 背景色 */
  --white_mode_text_color: #333;  /* 文字色 */
  /* 黒モード */
  --black_mode_background_color: #1f1f1f;  /* 背景色 */
  --black_mode_text_color: #ddd;  /* 文字色 */
  /* 灰モード */
  --gray_mode_background_color: #f1f1f2;  /* 背景色 */
  --gray_mode_text_color: #222;  /* 文字色 */
  /* 青モード */
  --blue_mode_background_color: #e6f1fa;  /* 背景色 */
  --blue_mode_text_color: #1c1d1e;  /* 文字色 */
  /* 黄モード */
  --yellow_mode_background_color: #fff8eb;  /* 背景色 */
  --yellow_mode_text_color: #1f1e1c;  /* 文字色 */

  /* サイズ設定 */
  /* 横書き */
  --hb-block_yokogaki_maxwidth: 650px;  /* 横書きのときの、小説の最大幅 */
  --hb-block_yokogaki_padding: 1.25em;  /* 横書きのときの、小説のpadding(空き) */
  /* 縦書き */
  --hb-block_tategaki_maxwidth: unset;  /* 縦書きのときの、小説の最大幅 */
  --hb-block_tategaki_padding: 1.75em;  /* 縦書きのときの、小説のpadding(空き) */
  /* 小説部分以外のパーツ */
  --common-other-parts_maxwidth: 650px;  /* 小説部分以外のパーツ(切り替えボタン、タイトルブロック、あとがきブロックなど)の、共通の最大幅 */
  --common-other-parts_padding_side: 1.25em;  /* 小説部分以外のパーツ(切り替えボタン、タイトルブロック、あとがきブロックなど)の、左右のpadding(左右の空き) */
}


/* -------------------------------------------------------------------------------- */
/* 最低限のスタイル設定
/* -------------------------------------------------------------------------------- */
body {
  font-family: 'Roboto', sans-serif;  /* フォントの種類 */
  font-size: clamp(12px, 3.75vw, 1rem);  /* フォントサイズを「12px以上1rem以下の3.75vw」にしています。お好みで変更してください。 */
  line-height: 1.8;  /* 行の高さ */
  letter-spacing: 0.05em;  /* 文字と文字の間隔 */
  text-align: left;  /* 左寄せ */
  line-break: strict;  /* 強い禁則処理(通常はnormal) */
  overflow-wrap: break-word;  /* 長い英単語がはみ出さないように改行 */
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;  /* 文字サイズの自動調整を制御 */
  color: var(--text-color);  /* 文字色 */
  background-color: var(--background-color);  /* 背景色 */
}

/* マウスカーソルの形をポインターにする */
a,button,:where([type="checkbox"],[type="radio"],[type="submit"],[type="reset"],[type="button"],select,optgroup,option,label:has([type="checkbox"],[type="radio"]),summary) {
	cursor: pointer;
}

:where(a) {
  text-decoration: underline;
  color: var(--link-color);
}

:where(a:visited) {
  color: var(--link-visited-color);
}

:where(a:is(:hover, :active)) {
  opacity: 0.5;
}

:where(em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rb, rt, rtc, rp, bdi, bdo, span, br, wbr, ins, del) {
  all: revert;
  box-sizing: border-box;
}

.center {
  text-align: center;
}

/* :where(center){ text-align: revert;}は nanoやalice+で center タグを使っている場合は必要。不要なら削除 */
:where(center) {
  text-align: revert;
}

hr {
  height: 1px;
  border-top: solid 1px var(--hr-border-color);
  margin: 1.5em 0;
}

/* フッター */
footer {
  padding: 2em;
}

:where(footer p) {
  padding: 2em 0;
}

/* imgタグの隙間発生を防止 */
:where(img) {
  vertical-align: bottom;
}

/* -------------------------------------------------------------------------------- */
/* ブロック
/* -------------------------------------------------------------------------------- */

.novel_article {
  clear: both;
}

/* 小説部分以外のパーツ(切り替えボタン、タイトルブロック、あとがきブロックなど)の、共通の最大幅、左右のpaddingをここで設定 */
.common-other-parts {
  margin: 0 auto;  /* 真ん中へ */
  padding-right: var(--common-other-parts_padding_side);
  padding-left: var(--common-other-parts_padding_side);
  max-width: calc(var(--common-other-parts_maxwidth) + calc(var(--common-other-parts_padding_side) * 2));  /* 最大幅 */
}

.novel_main {
  padding-top: 3em;  /* 切り替えボタンの上のアキ */
}

#hb {
  letter-spacing: 0;
  text-align: left;
  border-top: solid 1px var(--hr-border-color);
  border-bottom: solid 1px var(--hr-border-color);
}

/* 縦書き・横書きのそれぞれの小説の最大幅・左右のpaddingは、yokogaki.cssとtategaki.cssで設定しているため、そちらを変更する */
#hb-block {
  margin: 0 auto;  /* 真ん中へ */
}

.title, .atogaki, .pagination {
  margin-top: 3em;  /* タイトルの上のアキ */
  margin-bottom: 3em;
}

.pagination {
  padding-top: 3em;
  padding-bottom: 3em;
  border-top: solid 1px var(--hr-border-color);
  border-bottom: solid 1px var(--hr-border-color);
}


/* -------------------------------------------------------------------------------- */
/* 各種切り替えボタンのデザイン
/* -------------------------------------------------------------------------------- */

/* details と summaryでボタン類を折り畳み */
/* summary(小説閲覧機能を広げるときの部分) */
.novel_summary {
  transform: translateZ(0);
  list-style: none;
  border: solid 1px var(--button-border-color);
  border-radius: 9999px;
  display: grid;  /*上下左右中央揃え*/
  place-content: center;
  place-items: center;
  height: 3.5em;  /* 小説閲覧設定を開くsummaryの高さ */
}

/* 一部ブラウザで list-style が消えないため、以下を追記 */
.novel_summary::-webkit-details-marker {
  display: none;
}

/* detailsがopenのときのsummary */
.novel_details[open] .novel_summary {
  border-radius: 10px 10px 0 0;
}

/* ＋マークを擬似要素で作成 */
.novel_summary::before,
.novel_summary::after {
  content: '';
  display: block;
  position: absolute;
  width: 1.1em;
  height: 2.5px;
  background-color: var(--text-color);
  top: 50%;
  right: 1.25em;
  transition: transform 0.4s;
}

.novel_summary::before {
  transform: translateY(-50%);
}

.novel_summary::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* detailsがopenのとき、＋マークを－にする */
.novel_details[open] .novel_summary::before {
  transform: translateY(-50%) rotate(360deg);
}

.novel_details[open] .novel_summary::after {
  transform: translateY(-50%) rotate(180deg);
}

/* 開くときに .novel_divをアニメーション */
.novel_details .novel_div {
  animation: unset;
}

/* detailsがopenのときの .novel_div */
.novel_details[open] .novel_div {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    /* 透明 */
    transform: translateY(-10px);
    /* 上から表示 */
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* novel_details内の dl,dt,dd */
.novel_dl {
  padding: 1.25em;
}

.novel_dl dd,
.novel_dl dt {
  line-height: 2.6;  /* これがボタンの高さになる */
  margin: 0.75em 0;
}

.novel_dl dt {
  font-weight: bold;
  text-align: center;
}

/* detailsがopenのときの .novel_dl */
.novel_details[open] .novel_dl {
  border: solid 1px var(--button-border-color);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

/* buttonを押して各要素を変更する */
.novel_details button,
.novel_details button:is(:active, :focus, :focus-within, :target, :hover, :visited, :focus-visible) {
  all: unset;
  display: revert;
  box-sizing: border-box;
  cursor: pointer;
}

/* 向き・フォント・背景色・サイズのボタンのスタイル */
:is(#switchTateyoko, #switchFont, #switchFontSize, #switchPageBackgroundcolor) button {
  text-align: center;
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
}

/* 向き・フォント・背景色のボタンで、選択されているときのボタン */
:is(#switchTateyoko, #switchFont, #switchFontSize) button.current {
  background-color: var(--text-color) !important;
  border: 1px solid var(--text-color);
  color: var(--white);
}

/* 背景色のボタンで、選択されているときのボタン */
#switchPageBackgroundcolor button.current {
  border: 1px solid var(--text-color);
  outline: 1px solid var(--text-color);
}

/* 向き・フォント・背景色・サイズのボタンがホバーされているときのスタイル */
:is(#switchTateyoko, #switchFont, #switchPageBackgroundcolor, #switchFontSize) button:is(:hover, :focus-visible) {
  outline: solid 2px var(--contents_btn_outline_color);
}

/* サイズのボタン */
#switchFontSize span {
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* grid-gapでボタンを均等に配置 */
.display-grid {
  display: grid;
  grid-template-rows: 1fr;
  gap: 8px;  /*ボタンの隙間の大きさ*/
}

/* ボタンが2個のとき */
.display-grid-kosuu-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ボタンが5個のとき */
.display-grid-kosuu-5 {
  grid-template-columns: repeat(5, 1fr);
}



/* -------------------------------------------------------------------------------- */
/* 本文用クラス
/* -------------------------------------------------------------------------------- */
/* 小説の文字サイズ */
.extra_small {
  font-size: max(calc(1em - 4px), 10px) !important;  /* 文字サイズを4px小さくする、ただし10px以上にする */
}

.small {
  font-size: max(calc(1em - 2px), 10px) !important;  /* 文字サイズを2px小さくする、ただし10px以上にする */
}

.middle {
  font-size: 1em !important;
}

.large {
  font-size: calc(1em + 2px) !important;  /* 文字サイズを2px大きくする */
}

.extra_large {
  font-size: calc(1em + 4px) !important;  /* 文字サイズを4px大きくする */
}


/* 小説の背景色・文字色 */
#btn_white.current,
.white {
  background-color: var(--white_mode_background_color);
  color: var(--white_mode_text_color) !important;
}

#btn_black.current,
.black {
  background-color: var(--black_mode_background_color);
  color: var(--black_mode_text_color) !important;
}

#btn_gray.current,
.gray {
  background-color: var(--gray_mode_background_color);
  color: var(--gray_mode_text_color) !important;
}

#btn_blue.current,
.blue {
  background-color: var(--blue_mode_background_color);
  color: var(--blue_mode_text_color) !important;
}

#btn_yellow.current,
.yellow {
  background-color: var(--yellow_mode_background_color);
  color: var(--yellow_mode_text_color) !important;
}


/* フォントの種類 */
/* 明朝体 */
.serif {
  font-family: 'Hiragino Mincho ProN', 'Noto Serif JP', serif !important;
}

/* ゴシック体 */
.gothic {
  font-family: sans-serif !important;
}