@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@700&family=Kiwi+Maru&family=Noto+Color+Emoji&family=Righteous&family=Stick&display=swap');

html {
  --background-main: #ffffff;
  --background-body: #f3f3f3;
  --background-moyou: #e4e4e4;
  --text-main: #1C325A;
  --text-link: rgb(132, 121, 62);
  --brightness: 100%;
}

html.Dark {
  --background-main: #494954;
  --background-body: #37373e;
  --background-moyou: #4b4b54;
  --text-main: #e4e4e4;
  --text-link: rgb(190, 182, 138);
  --brightness: 90%;
}

body {
  font-family: 'Kiwi Maru', serif;
  font-size: 100%;
  color: var(--text-main);
  background: repeating-linear-gradient(135deg,
      transparent 0 25px,
      var(--background-moyou) 0px 26px),
    repeating-linear-gradient(45deg,
      var(--background-body) 0 25px,
      var(--background-moyou) 0px 26px)
}

h1,
h2 {
  font-weight: normal;
  color: var(--text-main);
}

h3 {
  margin: 15px 0px 3px 0;
}

#container {
  position: relative;
  padding-bottom: 10px;
  width: 100%;
}

.grid {
  background: var(--background-main);
  box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
  float: left;
  font-size: 12px;
  margin: 2px;
  padding: 0px;
  width: 31%;
  transition: top 1s ease, left 1s ease;
}

header {
  padding: 0px 20px;
  text-align: center;
}

footer {
  text-align: center;
  margin: 20px;
}

.contents1 {
  width: 30%;
  padding: 20px 15px;
  margin: 0 0 25px 0;

  h2 {
    margin-top: 30px;
  }
}

.contents1 img {
  border-radius: 20px;
  width: 50%;

  outline: 6px solid var(--text-main);
  box-shadow: 20px 20px 0 var(--text-main);
}

.contents2 {
  width: 70%;
}

.main {
  width: 85%;
  max-width: 850px;
  margin: auto;
  background-color: var(--background-main);
  padding: 25px;
  border-radius: 15px;
}

.flex {
  display: flex;
}

img {
  max-width: 100%;
  display: block;
  filter: brightness(var(--brightness));
}

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

a:hover {
  opacity: 0.5;
  transition: 0.3s;
}

h1 {
  font-family: 'Kaisei Opti', serif;
}

.margin_auto {
  margin: auto;
}

.text_align {
  text-align: center;
}

.onelogbox {
  padding: 0px 130px;
}

.width_100 {
  width: 100%;
}

.width_100 .grid {
  width: 23%;
}

.width_0 {
  width: 0%;
  padding: 0;
  margin: 0;
}

.gridlist {
  display: grid;
  grid-template-columns: auto 1fr;

  dt {
    border-right: 1px solid #bbbeca;
    padding-right: 6px;
    margin-bottom: 13px;
  }

  dd {
    padding-left: 6px;
    margin: 0 0 13px 0;
  }
}

.link {
  font-size: 1.2em;
  margin: 15px;
}


/*---------------------------------
キャラ一覧ページ設定
---------------------------------*/
.char-list {
  display: block;
  text-align: center;
  justify-content: space-between;
}

.char {
  display: inline-block;
  width: 20%;
  margin: 0;
  padding: 7px 7px 20px 7px;
  box-sizing: border-box;
}

.char h2 {
  margin: 5px;
  font-size: 17px;
}

.chaIco {
  width: 65%;
  border-radius: 50%;
  margin: auto;
  box-shadow: 0 1px 4px rgb(0 0 0 / 71%);
}

p.description {
  color: var(--text-main);
  font-size: 0.8em;
  margin: 0;
}

/* 縦長画面の場合 */
@media screen and (max-width: 750px) {
  .char {
    width: 48%;
  }

}

/*---------------------------------
スクロールバー
---------------------------------*/
::-webkit-scrollbar {
  width: 17px;
  height: 13px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  background: #1C325A;
}


/*---------------------------------
アコーディオン
---------------------------------*/
.accordion-006 {
  width: 85%;
  margin-bottom: 7px;
  background-color: var(--background-main);
  border-radius: 15px;
  margin: auto;
  padding: 10px;
}

.accordion-006 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0em 0em;
  color: var(--text-main);
  font-size: 1.2em;
  font-weight: 600;
  cursor: pointer;
}

.accordion-006 summary::-webkit-details-marker {
  display: none;
}

.accordion-006 summary::before,
.accordion-006 summary::after {
  width: 3px;
  height: .9em;
  border-radius: 5px;
  background-color: var(--text-main);
  content: '';
}

.accordion-006 summary::before {
  position: absolute;
  right: 0em;
  rotate: 90deg;
}

.accordion-006 summary::after {
  transition: rotate .3s;
}

.accordion-006[open] summary::after {
  rotate: 90deg;
}

.accordion-006 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-006[open] p {
  transform: none;
  opacity: 1;
}

/* ======================== */
/* ■入力フォームの表示領域 */
/* ※これはQUICKPOST用です。新規投稿専用画面や編集画面ではCGI内蔵のCSSが使われるため、ここの記述は適用されません。 */
/* ======================== */
.postform {
  background-color: var(--background-main);
  /* 背景色 */
  margin: 1em;
  /* 外側の余白量 */
  padding: 1em;
  /* 内側の余白量 */
}

.postform p {
  margin: 0;
}

/* ------------ */
/* ▼本文入力欄 */
/* ------------ */
textarea.tegalogpost {
  border: 2px green solid;
  /* 枠線 */
  border-radius: 0.67em;
  /* 枠の角丸 */
  background-color: white;
  /* 背景色 */
  font-size: 0.9rem;
  /* 文字サイズ */
  padding: 0.5em;
  /* 内側の余白量 */
  margin-bottom: 0.25em;
  /* 外側下の余白量 */
  box-sizing: border-box;
  /* サイズ解釈方法 */
  width: 100%;
  /* 横幅 */
  height: 4.3em;
  /* 高さ */
  overflow-wrap: break-word;
  /* 折り返し方法 */
  overflow: auto;
  /* はみ出した場合の処理 */
}

/* ▽プレースホルダ(※入力文字数がゼロの際にだけ見える薄文字)の装飾 */
textarea.tegalogpost:placeholder-shown {
  color: #777;
}

/* 通常時 */
textarea.tegalogpost:focus:placeholder-shown {
  color: #bbb;
}

/* カーソルが入ったとき */
textarea.tegalogpost:-ms-input-placeholder {
  color: #aaa;
}

/* for IE */

/* 横幅800px以下の環境の場合 */
@media all and (max-width: 800px) {
  textarea.tegalogpost {
    font-size: 16px;
    /* 文字サイズ */
    padding: 0.4em;
    /* 内側の余白量 */
  }
}

/* ------------------------------------------------ */
/* ▼投稿コントロール部分(ボタンや字数カウンタなど) */
/* ------------------------------------------------ */
.line-control {
  margin: 0.25em 0;
  /* 外側の余白量 */
}

/* ------------ */
/* ▼投稿ボタン */
/* ------------ */
.postbutton {
  display: inline-block;
  /* インラインブロック化 */
  background: green;
  /* 背景色 */
  color: white;
  /* 文字色 */
  font-size: 1rem;
  /* 文字サイズ */
  font-weight: bold;
  /* 太字 */
  text-decoration: none;
  /* 下線を消す */
  padding: 0.25em 0.75em;
  /* 内側の余白量 */
  border: 1px solid green;
  /* 枠線 */
  border-radius: 1em;
  /* 枠の角丸 */
}

/* ▼投稿ボタンにマウスが載ったとき */
.postbutton:hover {
  background-color: #00cc00;
  /* 背景色 */
}

/* ------------------ */
/* ▼文字装飾ボタン群 */
/* ★Ver 1.4.0以降で使用 */
/* ------------------ */
/* 掲載領域全体 */
.decoBtns {
  display: inline-block;
  margin-top: 0.5em;
}

/* 全ボタン装飾 */
.decoBtns input {
  min-width: 32px;
  min-height: 28px;
  margin: 1px;
  background-color: #eee;
  border: 1px solid #aaa;
  cursor: pointer;
  border-radius: 3px;
  font-size: 14px;
  vertical-align: middle;
}

/* マウス載る際 */
.decoBtns input:hover {
  background-color: #e5f1fb;
  border-color: #0078d7;
}

/* 太字  :B */
.decoBtnB {
  font-weight: bold;
}

/* 取消線:D */
.decoBtnD {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-style: double;
}

/* 強調  :E */
.decoBtnE {
  font-weight: bold;
  color: blue;
}

/* 斜体  :I */
.decoBtnI {
  font-style: italic;
}

/* 引用  :Q */
.decoBtnQ {}

/* 小さめ:S */
.decoBtnS {}

/* 極小  :T */
.decoBtnT {
  font-size: 11px !important;
}

/* 下線  :U */
.decoBtnU {
  text-decoration: underline;
  text-decoration-color: red;
}

/* 文字色:C */
.decoBtnC {
  color: red;
}

/* 背景色:M */
.decoBtnM {
  color: blue;
}

@media all and (min-width: 800px) {

  /* ▼文字装飾ボタン群 */
  .decoBtns {
    margin-top: 0;
  }
}

/* -------------------------------- */
/* ▼カテゴリ選択チェックボックス群 */
/* ★Ver 3.0.0以降で使用 */
/* -------------------------------- */
.catChecks {
  font-size: 0.9em;
  padding-top: 0.5em;
}

.catChecks label {
  display: inline-block;
  cursor: pointer;
  margin: 0 0.75em 0 0;
}

.catChecks label:hover {
  text-decoration: underline;
}

.catChecks input {
  min-width: 0;
  min-height: 0;
  margin-right: 0.2em;
}

/* 投稿欄下部：「鍵付き」チェックボックスと「個別鍵」ボタンの間を詰める一時的なスタイル */
.funcUIs .catChecks {
  margin: 0 0.75em 0 0;
}

.funcUIs .catChecks label {
  margin: 0;
}

/*---------------------------------
ダークモードボタン
---------------------------------*/
.ModeButton {
  left: 15px;
  bottom: 15px;
  position: fixed;
  z-index: 10;
  background: var(--background-main);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  align-content: center;
  text-align: -webkit-center;
  box-shadow: 0 1px 4px rgb(0 0 0 / 71%);
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.icon {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #979797;
  font-size: 30px;
  font-style: normal;
}

/* ライトモードにするボタン：ライトモード時非表示 */
.ModeButton .ModeButton--light {
  display: none;
}

/* ライトモードにするボタン：ダークモード時表示 */
html.Dark .ModeButton .ModeButton--light {
  display: block;
}

/* ダークモードにするボタン：ライトモード時表示 */
.ModeButton .ModeButton--dark {
  display: block;
}

/* ダークモードにするボタン：ダークモード時非表示 */
html.Dark .ModeButton .ModeButton--dark {
  display: none;
}

/*---------------------------------
縦長画面の場合
---------------------------------*/
@media screen and (max-width: 750px) {
  .main {
    display: block;
    width: 95%;
    padding: 13px 5px;
  }

  .contents1 {
    width: 93%;
    height: 100%;
  }

  .contents2 {
    width: 100%;
    height: 100%;
  }

  .grid,
  .width_100 .grid {
    width: 45%;
  }

}