@charset "utf-8";

/* 
  Template & Designed by Asteroid
  https://asteroid19.netlify.app/
*/
/*
  配布元(改変前)

/* ******************************************************************************** */
/*  I'll be NET Novel CSS
/*  作成：I'll be NET（http://illbenet.jp/）
/* ******************************************************************************** */

:where(:focus-visible) {
  outline: revert;
}

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

  /* 小説の背景色・文字色 */
  --btn_white-back:#fff;
  --btn_white-text:#333;
  --btn_black-back:#1f1f1f;
  --btn_black-text:#ddd;
  --btn_gray-back:#f1f1f2;
  --btn_gray-text:#222;
  --btn_blue-back:#e6f1fa;
  --btn_blue-text:#1c1d1e;
  --btn_yellow-back:#fff8eb;
  --btn_yellow-text:#1f1e1c;
}

body {
  font-family: '游明朝', sans-serif; /* フォントの種類 */
  font-size: clamp(12px, 3.75vw, 16px);
  /* フォントサイズを「12px以上16px以下の3.75vw」にしています。お好みで変更してください。「font-size: 12px;」や「font-size: 16px;」など、clamp()や vw を使わなくでもOKです。 */
  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, [type="checkbox"], [type="radio"], [type="submit"], [type="reset"], [type="button"], button, select, optgroup, option, label, summary {
  cursor: pointer
}

a {
      text-decoration: none;

  color: var(--link-color)
}

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

a:is(:hover, :active) {
  opacity: .5
}

a{
  display: inline-block;
  transition: .5s;
}

a:hover {
   text-decoration:none;
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}


: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;
}

/* dl dt dd タグを使って各種切り替えボタンを配置している */
.dl-yoko{
  display: grid;
  grid-template-columns:auto 1fr;
}

.dl-yoko dt{
  margin-top:0;
  padding-right: 1.5em;
}

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

.footer{
  padding-top: 2em;
}






/* ******************************************************************************** */
/* 各種切り替えボタン
/* -------------------------------------------------------------------------------- */

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

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

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

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

/* サイズのボタン */
#switchFontSize span {
  line-height: 1;
}


/* 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);
}



/* -------------------------------------------------------------------------------- */
/* 小説ブロック
/* -------------------------------------------------------------------------------- */
#novel {
  clear: both;
}

#main_novel {
  margin: 0 auto;
  padding: 3em 0 0;
  max-width: 684px;
}

.article_novel {
  padding: 0 1.25em;
}

@media screen and (min-width:521px) {
  .article_novel {
    padding: 0 2em;
  }
}

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

.title {
  letter-spacing: 0;
  margin-top: 3em;
}



/* -------------------------------------------------------------------------------- */
/* 本文用クラス
/* -------------------------------------------------------------------------------- */
.extra_small {
  font-size: clamp(10px, 1em - 4px, 12px) !important;
}

.small {
  font-size: clamp(10px, 1em - 2px, 14px) !important;
}

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

.large {
  font-size: clamp(14px, 1em + 2px, 18px) !important;
}

.extra_large {
  font-size: clamp(16px, 1em + 4px, 20px) !important;
}


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

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

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

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

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



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

.gothic {
  font-family: 游ゴシック !important;
}




/* アコーディオンメニューのデザイン */
.toggle {
  display: none;
}


.label_novel,
.contents_btn {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}

.label_novel {
  display: block;
  position: relative;
  padding: .7em 0;
  border: solid 1px var(--button-border-color);
  border-radius: 10px;
}

.contents_btn {
  height: 0;
  padding: 0 1.25em;
  overflow: hidden;
}

.contents_btn dd,
.contents_btn dt {
  line-height: 2.3;
  margin: .75em 0;
}

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

.extra_large_over {  /* ボタンの極大の文字が収まるようにしている */
  white-space: nowrap;
  overflow: hidden;
}



/* アコーディオンメニューが開いたとき*/
.toggle:checked+.label_novel {
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

/* アコーディオンメニューが開いたときの .contents_btn */
.toggle:checked+.label_novel+.contents_btn {
  height: auto;
  padding: 1.25em;
  border: solid 1px var(--button-border-color);
  border-radius: 0 0 10px 10px;
}


/* アコーディオンメニューの ＋ マーク */
.label_novel::before,
.label_novel::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
}

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

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

/* アコーディオンメニューが開いたときの ＋ マークの回転角度 */
.toggle:checked+.label_novel::before {
  transform: translateY(-50%) rotate(360deg);
}

.toggle:checked+.label_novel::after {
  transform: translateY(-50%) rotate(180deg);
}