character list

info
credit
code
custom

demo 相生様よりいただいたリクエスト、創作キャラクター紹介・展示用のテンプレートです。

2022.11.14ver 1.0.1 - nano広告隠し対策
2021.10.15Release

special thanks

デザインパーツの用意・展示にあたり、折橋廉様の運営するKerryのデモページを参考にさせて頂きました。ありがとうございます。

index

html

書き換え部分(クリック/タップで表示)


                              <!DOCTYPE html>
                <html lang="ja">
                <head>
                  <meta charset="utf-8">
                  <meta name="robots" content="noindex,nofollow">
                  <meta name="googlebot" content="noindex,nofollow">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                  <meta name="theme-color" content="#fff">
                  <link rel="preconnect" href="https://fonts.googleapis.com">
                  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Montserrat&display=swap" rel="stylesheet">
                  <link rel="stylesheet" type="text/css" href="ファイル名.css">
                  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
                  <!-- nano -->
                  <smartphone>
                    <script>
                      document.querySelector('link[href="/static/css/smartphone/common.css"]').remove();
                    </script>
                  </smartphone>
                  <!-- nano END -->
                  <title>site title</title>
                </head>
                <body>
                  <header>
                    <h1>character list</h1>
                  </header>
                  <main>
                    <ul class="character_list">
                      <li>
                        <div class="thumb-wrapper">
                          <img src="画像URL" class="thumb">
                        </div>
                        <div class="caption">
                          <h2>名前</h2>
                          ここにテキスト
                        </div>
                        <a href="URL" class="btn-open" target="_blank" rel="noopener">view more</a>
                      </li>
                      <li>
                        <div class="thumb-wrapper">
                          <img src="画像URL" class="thumb">
                        </div>
                        <div class="caption">
                          <h2>名前</h2>
                          ここにテキスト
                        </div>
                        <a href="URL" class="btn-open" target="_blank" rel="noopener">view more</a>
                      </li>
                      <li>
                        <div class="thumb-wrapper">
                          <img src="画像URL" class="thumb">
                        </div>
                        <div class="caption">
                          <h2>名前</h2>
                          ここにテキスト
                        </div>
                        <a href="URL" class="btn-open" target="_blank" rel="noopener">view more</a>
                      </li>
                    </ul>
                  </main>
                  <nav class="nav-pager">
                    <ul class="ul-pager box">
                      <li><a href="URL">prev</a></li>
                      <li><a href="URL">index</a></li>
                      <li><a href="URL">next</a></li>
                    </ul>
                  </nav>
                  <footer>
                    <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
                  </footer>
                </body>
                </html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex,nofollow">
  <meta name="googlebot" content="noindex,nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta name="theme-color" content="#fff">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Montserrat&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="ファイル名.css">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  
  <smartphone>
    <script>
      document.querySelector('link[href="/static/css/smartphone/common.css"]').remove();
    </script>
  </smartphone>
  
  <title>site title</title>
</head>
<body>
  <header>
    <h1>character list</h1>
  </header>
  <main>
    <ul class="character_list">
      <li>
        <div class="thumb-wrapper">
          <img src="画像URL" class="thumb">
        </div>
        <div class="caption">
          <h2>名前</h2>
          ここにテキスト
        </div>
        <a href="URL" class="btn-open" target="_blank" rel="noopener">view more</a>
      </li>
      <li>
        <div class="thumb-wrapper">
          <img src="画像URL" class="thumb">
        </div>
        <div class="caption">
          <h2>名前</h2>
          ここにテキスト
        </div>
        <a href="URL" class="btn-open" target="_blank" rel="noopener">view more</a>
      </li>
      <li>
        <div class="thumb-wrapper">
          <img src="画像URL" class="thumb">
        </div>
        <div class="caption">
          <h2>名前</h2>
          ここにテキスト
        </div>
        <a href="URL" class="btn-open" target="_blank" rel="noopener">view more</a>
      </li>
    </ul>
  </main>
  <nav class="nav-pager">
    <ul class="ul-pager box">
      <li><a href="URL">prev</a></li>
      <li><a href="URL">index</a></li>
      <li><a href="URL">next</a></li>
    </ul>
  </nav>
  <footer>
    <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
  </footer>
</body>
</html>

css

@charset "UTF-8";
/* design by tsugumi https://miroirs.stars.ne.jp/ */
/* resetcss */
/*
Copyright (c) 2021 tsugumi - https://miroirs.stars.ne.jp/
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html

Copyright (c) 2010 Richard Clark - http://richclarkdesign.com
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html
*/
*,
*::before,
*::after {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
  font-size: 100%;
  outline: 0;
}

*::before,
*::after {
  content: none;
}

body {
  line-height: 1.5;
}

main {
  display: block;
}

[type="checkbox"],[type="radio"],[type="submit"],
button,select,option,label,summary {
  cursor: pointer;
}

input,button,textarea,select {
  font-family: inherit;
  font-size: 100%;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  overflow-x: hidden;
  resize: vertical;
}

::placeholder {
  opacity: 1;
}

ul,ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before,blockquote::after,
q::before,q::after {
  content:'';
  content: none;
}

mark {
  color: #000;
  background-color: #ff9;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border-top: 1px solid #000;
}
/* resetcss END */
/* firefox only */
@-moz-document url-prefix() {
  body {
    overflow-wrap: break-word;
  }
}
/* firefox only END */
/* root */
:root {
  --selection-color: rgb(0,204,204,.5);
  --text-color: #333;
  --border-color: #ccc;
  --white-color: #fff;
  --body-font: 'Montserrat', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  --site-title-font: 'Josefin Sans', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
}
/* root END */
/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--text-color);
}

html {
  scrollbar-color: var(--text-color) transparent;
  scrollbar-width: thin;
}
/* scrollbar END */
/* selection */
::selection {
  background: var(--selection-color);
}
/* selection END */
/* body */
body {
  position: relative;
  line-height: 1.8;
  color: var(--text-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-size: 11px;
  text-align: justify;
  letter-spacing: .2em;
  word-break: break-all;
}
/* body END */
/* headline */
h1 {
  margin: 32px auto;
  font-family: var(--site-title-font);
  font-size: 32px;
  text-align: center;
  letter-spacing: .125em;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--headline-font);
  font-weight: normal;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 15px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 13px;
}

h6 {
  font-size: 12px;
}
/* headline END */
/* text decoration */
a {
  color: var(--text-color);
  text-decoration: underline;
}

strong {
  color: red;
}

em {
  border: 1px dashed var(--text-color);
}

mark {
  display: inline-block;
  padding: 0 6px;
  background: var(--selection-color);
}

[data-ruby] {
  position: relative;
}

[data-ruby]::before {
  position: absolute;
  right: -3em;
  bottom: 105%;
  left: -3em;
  line-height: 100%;
  margin: auto;
  font-size: .5em;
  text-align: center;
  letter-spacing: 1px;
  word-break: keep-all;
  content: attr(data-ruby);
  transform: scale(.75);
  transform-origin: bottom center;
}

ruby rt {
  display: none;
}

.border-l {
  margin-right: 8px;
  padding-left: 8px;
  border-left: 6px solid var(--text-color);
}

.border-r {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 6px solid var(--text-color);
}

.border-a {
  position: relative;
  margin-right: 48px;
}

.border-a::after {
  position: absolute;
  top: 0;
  right: -38px;
  bottom: 0;
  width: 32px;
  height: 2px;
  margin: auto;
  background: var(--text-color);
  content: '';
}

.marker {
  background: linear-gradient(transparent 60%, var(--selection-color) 60%);
}

.btn {
  display: inline-block;
  line-height: 2;
  padding: 0 8px;
  border: 1px solid var(--text-color);
}
/* text decoration END */
/* align */
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}
/* align END */
/* separator */
hr {
  height: 1px;
  margin: 16px auto;
  border-top: 1px solid var(--text-color);
}
/* line END */
/* box */
.box,
.scroll-box {
  width: calc(100% - 32px);
  max-width: 736px;
  margin: 16px auto;
  padding: 16px;
  border: 1px solid var(--border-color);
}

.scroll-box {
  height: 160px;
  overflow-y: scroll;
  scrollbar-color: var(--text-color) transparent;
  scrollbar-width: thin;
}

.scroll-box::-webkit-scrollbar {
  width: 2px;
  height: 100%;
}

.scroll-box::-webkit-scrollbar-track {
  background: transparent;
}
/* box END */
/* details */
details summary {
  display: inline-block;
}

details summary::marker,
details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  display: inline-block;
  margin-right: 4px;
  color: var(--text-color);
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  content: '\f0da';
  transition: .3s;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details[open] .details-contents {
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

100% {
    opacity: 1;
    transform: none;
  }
}
/* details END */
/* semantic elements */
main {
  width: calc(100% - 32px);
  max-width: 736px;
  margin: 0 auto;
}

section {
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 32px auto;
}

footer {
  line-height: 2;
  text-align: center;
}
/* semantic elements END */
/* character list parts */
.character_list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.character_list li {
  width: calc(100% / 3);
  border: 1px solid var(--border-color);
}

.thumb-wrapper {
  position: relative;
  width: calc(100% - 32px);
  margin: 16px auto;
}

.thumb-wrapper::before {
  display: block;
  padding-top: 100%;
  content: '';
}

.thumb {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: cover;
}

.caption {
  padding-bottom: 8px;
}

.btn-open {
  display: block;
  position: relative;
  padding: 8px 0;
  text-decoration: none;
}

.btn-open::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--border-color), var(--border-color) 3px, transparent 3px, transparent 8px);
  background-repeat: repeat-x;
  background-size: 8px 1px;
  content: '';
}

.ul-pager {
  display: flex;
  line-height: 1.25;
  flex-wrap: wrap;
  justify-content: center;
  margin: 32px auto;
  text-align: center;
}

.ul-pager li {
  padding: 8px;
}

.ul-pager li a {
  text-decoration: none;
  text-transform: uppercase;
}

img {
  pointer-events: none; 
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}
/* character list parts END */
/* less than 520px */
@media screen and (max-width: 519px) {
  .character_list li {
    width: 50%;
  }
}
/* less than 520px END */
/* more than 1024px */
@media screen and (min-width: 1024px) {
  .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

.flex-item {
    width: calc(50% - 30px);
  }
}
/* more than 1024px END */

character page

html

type01のデザインになっています。カスタムは下部にある各パーツのコードを参考にしてください。

書き換え部分(クリック/タップで表示)


                              <!DOCTYPE html>
                <html lang="ja">
                <head>
                  <meta charset="utf-8">
                  <meta name="robots" content="noindex,nofollow">
                  <meta name="googlebot" content="noindex,nofollow">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                  <meta name="theme-color" content="#00207f">
                  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
                  <link rel="preconnect" href="https://fonts.googleapis.com">
                  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                  <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Lato&family=Lora&family=Montserrat&family=Noto+Serif+JP&family=PT+Sans&family=Raleway&family=Rubik+Mono+One&family=Train+One&display=swap" rel="stylesheet">
                  <link rel="stylesheet" type="text/css" href="ファイル名.css">
                  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
                  <!-- nano -->
                  <smartphone>
                    <script>
                      document.querySelector('link[href="/static/css/smartphone/common.css"]').remove();
                    </script>
                  </smartphone>
                  <!-- nano END -->
                  <title>site name</title>
                </head>
                <body>
                  <div class="details-wrapper">
                    <div class="flex-wrapper">
                      <div class="flex-item">
                        <header>
                          <img src="アイコン画像URL" class="icon">
                          <h1><ruby data-ruby="ミョウジ">苗字<rt>ミョウジ</rt></ruby><ruby data-ruby="ナマエ">名前<rt>ナマエ</rt></ruby></h1>
                          <div class="lines lines-type01">
                            ここにセリフなど
                          </div>
                        </header>
                        <section>
                          <h2 class="h2-type01">見出しテキスト</h2>
                          ここに内容
                        </section>
                        <section>
                          <h2 class="h2-type01">見出しテキスト</h2>
                          ここに内容
                        </section>
                      </div>
                      <div class="flex-item">
                        <section>
                          <h2 class="h2-type01">見出しテキスト</h2>
                          ここに内容
                        </section>
                        <section>
                          <h2 class="h2-type01">見出しテキスト</h2>
                          ここに内容
                        </section>
                      </div>
                    </div>
                    <footer>
                      <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
                    </footer>
                  </div>
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                  <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
                  <script>
                    $(function() {
                      $('.slider').slick({
                        autoplay: false,
                        infinite: true,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        prevArrow: '<button class="slick-prev"></button>',
                        nextArrow: '<button class="slick-next"></button>',
                        dots: true,
                        adaptiveHeight: true
                      });
                    });
                  </script>
                </body>
                </html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex,nofollow">
  <meta name="googlebot" content="noindex,nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta name="theme-color" content="#00207f">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Lato&family=Lora&family=Montserrat&family=Noto+Serif+JP&family=PT+Sans&family=Raleway&family=Rubik+Mono+One&family=Train+One&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="ファイル名.css">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
  
  <smartphone>
    <script>
      document.querySelector('link[href="/static/css/smartphone/common.css"]').remove();
    </script>
  </smartphone>
  
  <title>site name</title>
</head>
<body>
  <div class="details-wrapper">
    <div class="flex-wrapper">
      <div class="flex-item">
        <header>
          <img src="アイコン画像URL" class="icon">
          <h1><ruby data-ruby="ミョウジ">苗字<rt>ミョウジ</rt></ruby><ruby data-ruby="ナマエ">名前<rt>ナマエ</rt></ruby></h1>
          <div class="lines lines-type01">
            ここにセリフなど
          </div>
        </header>
        <section>
          <h2 class="h2-type01">見出しテキスト</h2>
          ここに内容
        </section>
        <section>
          <h2 class="h2-type01">見出しテキスト</h2>
          ここに内容
        </section>
      </div>
      <div class="flex-item">
        <section>
          <h2 class="h2-type01">見出しテキスト</h2>
          ここに内容
        </section>
        <section>
          <h2 class="h2-type01">見出しテキスト</h2>
          ここに内容
        </section>
      </div>
    </div>
    <footer>
      <small>template by <a href="https://miroirs.stars.ne.jp/" target="_blank" rel="noopener noreferrer">Miroirs</a></small>
    </footer>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script>
    $(function() {
      $('.slider').slick({
        autoplay: false,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        prevArrow: '<button class="slick-prev"></button>',
        nextArrow: '<button class="slick-next"></button>',
        dots: true,
        adaptiveHeight: true
      });
    });
  </script>
</body>
</html>

css

書き換え部分(クリック/タップで表示)


                              @charset "UTF-8";
                /* design by tsugumi https://miroirs.stars.ne.jp/ */
                /* font import */
                @font-face {
                  font-family: チェックポイント;
                  src: url('https://cdn.leafscape.be/cpfont/CP_Font_web.woff2')
                  format("woff2");
                }
                
                @font-face {
                  font-family: 刻明朝;
                  src: url('https://cdn.leafscape.be/kokumin/font_1_kokumr_1.00_rls_web.woff2')
                  format("woff2");
                }
                /*-------------------------------------------------
                このフォントはIPAフォントライセンスv1.0の下で提供されています。
                http://ipafont.ipa.go.jp/ipa_font_license_v1.html
                オリジナルのフォントは以下から取得できます。
                http://ipafont.ipa.go.jp/
                -------------------------------------------------*/
                /* font import END */
                /* resetcss */
                /*
                Copyright (c) 2021 tsugumi - https://miroirs.stars.ne.jp/
                Released under the MIT license
                https://licenses.opensource.jp/MIT/MIT.html
                
                Copyright (c) 2010 Richard Clark - http://richclarkdesign.com
                Released under the MIT license
                https://licenses.opensource.jp/MIT/MIT.html
                */
                *,
                *::before,
                *::after {
                  vertical-align: baseline;
                  margin: 0;
                  padding: 0;
                  border: none;
                  border-radius: 0;
                  box-sizing: border-box;
                  background: transparent;
                  font-size: 100%;
                  outline: 0;
                }
                
                *::before,
                *::after {
                  content: none;
                }
                
                body {
                  line-height: 1.5;
                }
                
                main {
                  display: block;
                }
                
                [type="checkbox"],[type="radio"],[type="submit"],
                button,select,option,label,summary {
                  cursor: pointer;
                }
                
                input,button,textarea,select {
                  font-family: inherit;
                  font-size: 100%;
                  letter-spacing: inherit;
                  -webkit-appearance: none;
                  appearance: none;
                }
                
                textarea {
                  overflow-x: hidden;
                  resize: vertical;
                }
                
                ::placeholder {
                  opacity: 1;
                }
                
                ul,ol {
                  list-style: none;
                }
                
                blockquote, q {
                  quotes: none;
                }
                
                blockquote::before,blockquote::after,
                q::before,q::after {
                  content:'';
                  content: none;
                }
                
                mark {
                  color: #000;
                  background-color: #ff9;
                  font-weight: bold;
                }
                
                del {
                  text-decoration: line-through;
                }
                
                table {
                  border-collapse: collapse;
                  border-spacing: 0;
                }
                
                hr {
                  display: block;
                  height: 1px;
                  border-top: 1px solid #000;
                }
                /* resetcss END */
                /* firefox only */
                @-moz-document url-prefix() {
                  body {
                    overflow-wrap: break-word;
                  }
                }
                /* firefox only END */
                /* safari only */
                _::-webkit-full-page-media,
                _:future,
                :root .transparent {
                  color: var(--text-color);
                  opacity: .1;
                }
                /* safari only END */
                /* root */
                :root {
                  --chara-color: #dc143c;
                  --selection-color: rgb(220,20,60,.5);
                  --subtext-color: #ccc;
                  --text-color: #333;
                  --white-color: #fff;
                  --body-type01-font: 'Lato', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
                  --body-type02-font: 'Montserrat', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
                  --body-type03-font: 'Lora', 'Noto Serif JP', 游明朝, 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', HGS明朝E, メイリオ, Meiryo, serif;
                  --body-type04-font: 'Raleway', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
                  --headline-type01-font: 'PT Sans', sans-serif;
                  --headline-type02-font: 'Rubik Mono One', チェックポイント, sans-serif;
                  --headline-type03-font: 'Cinzel', 刻明朝, serif;
                  --headline-type04-font: 'Unica One', 'Train One', cursive;
                }
                /* root END */
                /* scrollbar */
                ::-webkit-scrollbar {
                  width: 4px;
                }
                
                ::-webkit-scrollbar-track {
                  background: transparent;
                }
                
                ::-webkit-scrollbar-thumb {
                  border-radius: 4px;
                  background: var(--text-color);
                }
                
                html {
                  scrollbar-color: var(--text-color) transparent;
                  scrollbar-width: thin;
                }
                /* scrollbar END */
                /* selection */
                ::selection {
                  background: var(--selection-color);
                }
                /* selection END */
                /* body */
                body {
                  position: relative;
                  line-height: 1.8;
                  color: var(--text-color);
                  background: var(--white-color);
                  font-family: var(--body-type04-font);
                  font-size: 11px;
                  text-align: justify;
                  letter-spacing: .2em;
                  word-break: break-all;
                }
                /* body END */
                /* headline */
                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                  line-height: 1.5;
                  margin: 8px 0;
                }
                
                .h2-type01,
                .h3-type01,
                .h4-type01,
                .h5-type01,
                .h6-type01 {
                  font-family: var(--headline-type01-font);
                }
                
                .h2-type02,
                .h3-type02,
                .h4-type02,
                .h5-type02,
                .h6-type02 {
                  font-family: var(--headline-type02-font);
                }
                
                .h2-type03,
                .h3-type03,
                .h4-type03,
                .h5-type03,
                .h6-type03 {
                  font-family: var(--headline-type03-font);
                }
                
                .h2-type04,
                .h3-type04,
                .h4-type04,
                .h5-type04,
                .h6-type04 {
                  font-family: var(--headline-type04-font);
                }
                
                h1 {
                  display: inline-block;
                  color: var(--chara-color);
                  font-weight: normal;
                  font-size: 20px;
                  letter-spacing: .4em;
                }
                
                h2 {
                  font-size: 22px;
                }
                
                .h2-type01 {
                  background: linear-gradient(transparent 60%, var(--chara-color) 60%);
                  text-transform: uppercase;
                }
                
                .h2-type02 {
                  display: table;
                  position: relative;
                  padding: 0 8px;
                  border: 2px solid var(--text-color);
                  background: transparent;
                }
                
                .h2-type02::before {
                  position: absolute;
                  top: 4px;
                  left: 4px;
                  z-index: -1;
                  width: 100%;
                  height: 100%;
                  background-color: var(--white-color);
                  background-image: repeating-linear-gradient(135deg, transparent, transparent 8px, var(--chara-color) 8px, var(--chara-color) 16px);
                  background-size: auto auto;
                  content: '';
                }
                
                .h2-type03 {
                  display: flex;
                  align-items: center;
                  color: var(--text-color);
                }
                
                .h2-type03::before,
                .h2-type03::after {
                  flex-grow: 1;
                  border-top: 1px solid var(--chara-color);
                  content: '';
                }
                
                .h2-type03::before {
                  margin-right: 16px;
                }
                
                .h2-type03::after {
                  margin-left: 16px;
                }
                
                .h2-type04 {
                  position: relative;
                  margin-top: 64px;
                  color: var(--chara-color);
                  text-align: center;
                }
                
                .h2-type04::before {
                  display: block;
                  position: absolute;
                  top: -40px;
                  right: 0;
                  left: 0;
                  width: 80px;
                  height: 40px;
                  margin: auto;
                  background: url("モチーフ画像URL") center / contain no-repeat;
                  content: '';
                }
                
                h3 {
                  font-size: 20px;
                }
                
                .h3-type01 {
                  padding: 0 8px;
                  border: 1px solid var(--chara-color);
                  color: var(--chara-color);
                }
                
                .h3-type02 {
                  display: table;
                  position: relative;
                  padding: 4px 16px;
                  border: 2px solid var(--text-color);
                  border-radius: 8px;
                  color: var(--chara-color);
                  text-shadow: 2px 1px 0px var(--text-color),
                  2px -1px 0px var(--text-color),
                  -2px 1px 0px var(--text-color),
                  -2px -1px 0px var(--text-color);
                }
                
                .h3-type02::before {
                  display: block;
                  position: absolute;
                  top: 4px;
                  left: 4px;
                  width: 8px;
                  height: 8px;
                  border: 2px solid var(--text-color);
                  border-radius: 50%;
                  background: var(--chara-color);
                  content: '';
                }
                
                .h3-type02::after {
                  display: block;
                  position: absolute;
                  right: 4px;
                  bottom: 4px;
                  width: 8px;
                  height: 8px;
                  border: 2px solid var(--text-color);
                  border-radius: 50%;
                  background: var(--chara-color);
                  content: '';
                }
                
                .h3-type03 {
                  display: flex;
                  align-items: center;
                  color: var(--text-color);
                }
                
                .h3-type03::after {
                  flex-grow: 1;
                  border-top: 1px solid var(--chara-color);
                  content: '';
                }
                
                .h3-type03::after {
                  margin-left: 16px;
                }
                
                .h3-type04 {
                  position: relative;
                  text-align: center;
                }
                
                .h3-type04 span {
                  padding: 0 8px;
                  color: var(--chara-color);
                  background: var(--white-color);
                }
                
                .h3-type04::before {
                  display: block;
                  position: absolute;
                  top: 0;
                  right: 0;
                  left: 0;
                  width: 60px;
                  height: 30px;
                  margin: auto;
                  background: url("モチーフ画像URL") center / contain no-repeat;
                  opacity: .5;
                  content: '';
                }
                
                .h3-type04::after {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  z-index: -1;
                  width: 100%;
                  height: 1px;
                  margin: auto;
                  background: var(--chara-color);
                  content: '';
                }
                
                h4 {
                  font-size: 18px;
                }
                
                .h4-type01 {
                  padding-left: 8px;
                  border-left: 6px solid var(--chara-color);
                }
                
                .h4-type02 span {
                  margin-right: 8px;
                  padding: 0 4px;
                  border: 1px solid var(--text-color);
                  border-radius: 4px;
                  box-shadow: 4px 4px 0px 0px var(--text-color);
                  color: var(--chara-color);
                  text-shadow: 1px 1px 0px var(--text-color),
                  1px -1px 0px var(--text-color),
                  -1px 1px 0px var(--text-color),
                  -1px -1px 0px var(--text-color);
                }
                
                .h4-type03 {
                  display: table;
                  position: relative;
                  padding: 0 8px;
                  border: 1px solid var(--chara-color);
                }
                
                .h4-type03::before {
                  position: absolute;
                  top: 2px;
                  left: 2px;
                  z-index: -1;
                  width: calc(100% + 2px);
                  height: calc(100% + 2px);
                  border: 1px solid var(--chara-color);
                  content: '';
                }
                
                .h4-type04 {
                  position: relative;
                  color: var(--chara-color);
                  text-align: center;
                }
                
                .h4-type04::before {
                  display: block;
                  position: absolute;
                  top: 0;
                  right: 0;
                  left: 0;
                  width: 50px;
                  height: 25px;
                  margin: auto;
                  background: url("モチーフ画像URL") center / contain no-repeat;
                  opacity: .5;
                  content: '';
                }
                
                h5 {
                  font-size: 16px;
                }
                
                .h5-type01::first-letter {
                  color: var(--chara-color);
                  font-size: 18px;
                  text-transform: uppercase;
                }
                
                .h5-type02 {
                  color: var(--white-color);
                  text-shadow: 1px 1px 0px var(--text-color),
                  1px -1px 0px var(--text-color),
                  -1px 1px 0px var(--text-color),
                  -1px -1px 0px var(--text-color);
                }
                
                [data-h5] {
                  position: relative;
                }
                
                [data-h5]::before {
                  position: absolute;
                  top: 2px;
                  left: 2px;
                  z-index: -1;
                  margin: auto;
                  color: var(--chara-color);
                  content: attr(data-h5);
                }
                
                [data-h5]::after {
                  position: absolute;
                  top: 4px;
                  left: 4px;
                  z-index: -2;
                  margin: auto;
                  color: var(--chara-color);
                  content: attr(data-h5);
                }
                
                .h5-type03 {
                  display: table;
                  position: relative;
                  padding: 0 8px;
                }
                
                .h5-type03::before,
                .h5-type03::after {
                  position: absolute;
                  top: 0;
                  width: 1px;
                  height: 100%;
                  background: var(--chara-color);
                  content: '';
                  transform: skewX(-15deg);
                }
                
                .h5-type03::before {
                  left: 0;
                }
                
                .h5-type03::after {
                  right: 0;
                }
                
                .h5-type04 {
                  position: relative;
                  padding-left: 24px;
                  color: var(--chara-color);
                }
                
                .h5-type04::before {
                  display: block;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  width: 16px;
                  height: 16px;
                  margin: auto;
                  background: url("モチーフ(小)画像URL") center / contain no-repeat;
                  content: '';
                }
                
                h6 {
                  font-size: 14px;
                }
                
                .h6-type01 {
                  display: table;
                  border-bottom: 1px solid var(--chara-color);
                }
                
                .h6-type02 {
                  color: var(--white-color);
                  text-shadow: 1px 1px 0px var(--text-color),
                  1px -1px 0px var(--text-color),
                  -1px 1px 0px var(--text-color),
                  -1px -1px 0px var(--text-color);
                }
                
                .h6-type02::first-letter {
                  color: var(--chara-color);
                }
                
                .h6-type03 {
                  display: table-cell;
                  padding: 0 4px;
                  border-bottom: 1px solid var(--chara-color);
                  text-transform: capitalize;
                }
                
                .h6-type03::first-letter {
                  color: var(--chara-color);
                }
                
                .h6-type04 {
                  position: relative;
                  padding-left: 5px;
                  color: var(--chara-color);
                }
                
                .h6-type04::before {
                  display: block;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  width: 20px;
                  height: 20px;
                  margin: auto;
                  background: url("モチーフ(小)画像URL") center / contain no-repeat;
                  opacity: .5;
                  content: '';
                }
                /* headline END */
                /* text decoration */
                a {
                  color: var(--chara-color);
                  text-decoration: underline;
                }
                
                strong {
                  color: var(--chara-color);
                  filter: brightness(75%) contrast(200%);
                }
                
                em {
                  border-bottom: 1px dashed var(--chara-color);
                }
                
                mark {
                  display: inline-block;
                  padding: 0 6px;
                  color: var(--white-color);
                  background: var(--chara-color);
                }
                
                [data-ruby] {
                  position: relative;
                }
                
                [data-ruby]::before {
                  position: absolute;
                  right: -3em;
                  bottom: 105%;
                  left: -3em;
                  line-height: 100%;
                  margin: auto;
                  font-size: .5em;
                  text-align: center;
                  letter-spacing: 1px;
                  word-break: keep-all;
                  content: attr(data-ruby);
                  transform: scale(.75);
                  transform-origin: bottom center;
                }
                
                ruby rt {
                  display: none;
                }
                
                .border-l {
                  margin-right: 8px;
                  padding-left: 8px;
                  border-left: 6px solid var(--chara-color);
                }
                
                .border-r {
                  margin-right: 8px;
                  padding-right: 8px;
                  border-right: 6px solid var(--chara-color);
                }
                
                .border-a {
                  position: relative;
                  margin-right: 48px;
                }
                
                .border-a::after {
                  position: absolute;
                  top: 0;
                  right: -38px;
                  bottom: 0;
                  width: 32px;
                  height: 2px;
                  margin: auto;
                  background: var(--chara-color);
                  content: '';
                }
                
                .marker {
                  background: linear-gradient(transparent 60%, var(--chara-color) 60%);
                }
                
                .btn {
                  display: inline-block;
                  line-height: 2;
                  padding: 0 8px;
                  cursor: pointer;
                }
                
                .btn-type01 {
                  border: 1px solid var(--chara-color);
                  border-bottom-width: 4px;
                  color: var(--chara-color);
                }
                
                .btn-type02 {
                  position: relative;
                  border: 2px solid var(--text-color);
                  color: var(--text-color);
                }
                
                .btn-type02::after {
                  display: block;
                  position: absolute;
                  top: 2px;
                  left: 2px;
                  z-index: -1;
                  width: calc(100% + 2px);
                  height: calc(100% + 2px);
                  background: var(--chara-color);
                  content: '';
                }
                
                .btn-type03 {
                  position: relative;
                  border-radius: 30px;
                  color: var(--chara-color);
                }
                
                .btn-type03::before {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  z-index: -1;
                  border: 1px solid var(--chara-color);
                  content: '';
                  transform: skewX(-15deg);
                  ;
                }
                
                .btn-type04 {
                  position: relative;
                }
                
                .btn-type04::before {
                  display: block;
                  position: absolute;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: url("モチーフ画像URL") center / contain no-repeat;
                  opacity: .5;
                  content: '';
                }
                
                .transparent {
                  color: transparent;
                }
                
                .transparent::selection {
                  color: var(--text-color);
                }
                /* text decoration END */
                /* align */
                .left {
                  text-align: left;
                }
                
                .center {
                  text-align: center;
                }
                
                .right {
                  text-align: right;
                }
                /* align END */
                /* separator */
                hr {
                  margin: 16px auto;
                }
                
                .hr-type01 {
                  height: 1px;
                  border-top: 1px solid var(--chara-color);
                }
                
                .hr-type02 {
                  height: 10px;
                  border: 0;
                  background-image: linear-gradient(90deg,rgba(255,255,255,0),var(--chara-color) 33.33%,rgba(255,255,255,0) 33.33%,rgba(255,255,255,0) 100%);
                  background-size: 6px 100%;
                }
                
                .hr-type03 {
                  height: 4px;
                  border-top: 1px solid var(--chara-color);
                  border-bottom: 1px solid var(--chara-color);
                }
                
                .hr-type04 {
                  position: relative;
                  overflow: visible;
                  border-color: var(--chara-color);
                }
                
                .hr-type04::before {
                  display: block;
                  position: absolute;
                  top: -12.5px;
                  right: 0;
                  left: 0;
                  width: 50px;
                  height: 25px;
                  margin: auto;
                  background: var(--white-color) url("モチーフ画像URL") center / contain no-repeat;
                  content: '';
                }
                /* line END */
                /* box & quote */
                .box,
                .scroll-box,
                blockquote {
                  margin: 16px auto;
                  padding: 24px 16px;
                }
                
                .scroll-box {
                  height: 160px;
                }
                
                .scroll-contents {
                  height: 122px;
                  overflow-y: scroll;
                
                  scrollbar-color: var(--text-color) transparent;
                  scrollbar-width: thin;
                }
                
                .scroll-contents::-webkit-scrollbar {
                  width: 2px;
                  height: 100%;
                }
                
                .scroll-contents::-webkit-scrollbar-track {
                  background: transparent;
                }
                
                .box-type01 {
                  border: 1px solid var(--chara-color);
                }
                
                .box-type02 {
                  border: 2px solid var(--text-color);
                  box-shadow: 4px 4px 0px 0px var(--chara-color);
                }
                
                .box-type03 {
                  position: relative;
                  overflow: visible;
                  border: 1px solid var(--chara-color);
                }
                
                .box-type03::after {
                  position: absolute;
                  top: 4px;
                  left: 4px;
                  z-index: -1;
                  width: calc(100% + 2px);
                  height: calc(100% + 2px);
                  border: 1px solid var(--chara-color);
                  content: '';
                }
                
                .box-type04 {
                  position: relative;
                  padding-top: 28px;
                  border: 1px solid var(--chara-color);
                }
                
                .box-type04::after {
                  position: absolute;
                  top: 8px;
                  right: 0;
                  left: 0;
                  width: 50px;
                  height: 25px;
                  margin: auto;
                  background: url("モチーフ画像URL") center / contain no-repeat;
                  content: '';
                }
                
                q,
                blockquote,
                cite {
                  font-style: italic;
                }
                
                q::before,
                q::after {
                  display: inline;
                  content: '"';
                }
                
                blockquote {
                  position: relative;
                }
                
                blockquote::before {
                  display: block;
                  position: absolute;
                  top: 8px;
                  left: 8px;
                  color: var(--chara-color);
                  font-family: "Font Awesome 5 Free";
                  font-weight: bold;
                  content: '\f10d';
                }
                
                blockquote.box-type04::before {
                  top: 9px;
                  right: 0;
                  left: 0;
                  z-index: 10;
                  margin: auto;
                  text-align: center;
                }
                
                cite {
                  display: block;
                  color: var(--subtext-color);
                  font-size: 10px;
                  text-align: right;
                }
                /* box & quote END */
                /* details */
                details summary {
                  display: inline-block;
                }
                
                details summary::marker,
                details summary::-webkit-details-marker {
                  display: none;
                }
                
                details summary::before {
                  display: inline-block;
                  margin-right: 4px;
                  color: var(--text-color);
                  font-family: 'Font Awesome 5 Free';
                  font-weight: bold;
                  content: '\f0da';
                  transition: .3s;
                }
                
                details[open] summary::before {
                  transform: rotate(90deg);
                }
                
                details[open] .details-contents {
                  animation: fadeIn 1s ease;
                }
                
                @keyframes fadeIn {
                  0% {
                    opacity: 0;
                    transform: translateY(-10px);
                  }
                
                  100% {
                    opacity: 1;
                    transform: none;
                  }
                }
                /* details END */
                /* list */
                .ol-row,
                .ol-column,
                .ul-row,
                .ul-column,
                .dl-row,
                .dl-column {
                  margin: 16px 0;
                }
                
                .ol-row,
                .ul-row {
                  display: flex;
                  flex-wrap: wrap;
                }
                
                .ul-row li,
                .ol-row li {
                  margin-right: 8px;
                }
                
                .ol-row-type01,
                .ol-column-type01 {
                  list-style-type: decimal;
                }
                
                .ol-row-type01 li,
                .ol-column-type01 li {
                  margin-left: 24px;
                }
                
                .ol-row-type01 li::marker,
                .ol-column-type01 li::marker {
                  color: var(--chara-color);
                  font-size: 12px;
                }
                
                .ol-row-type02,
                .ol-column-type02 {
                  counter-reset: item;
                  list-style-type: none;
                }
                
                .ol-row-type02 li,
                .ol-column-type02 li {
                  position: relative;
                  margin: 0 0 8px 32px;
                }
                
                .ol-row-type02 li::before,
                .ol-column-type02 li::before {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -30px;
                  z-index: -1;
                  width: 20px;
                  height: 20px;
                  line-height: 20px;
                  margin: auto;
                  border: 1.5px solid var(--text-color);
                  border-radius: 50%;
                  text-align: center;
                  content: counter(item);
                  counter-increment: item;
                }
                
                .ol-row-type02 li::after,
                .ol-column-type02 li::after {
                  position: absolute;
                  top: 2px;
                  left: -26px;
                  z-index: -2;
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  background: var(--chara-color);
                  content: '';
                }
                
                .ol-row-type03,
                .ol-column-type03 {
                  counter-reset: item;
                  list-style-type: none;
                }
                
                .ol-row-type03 li,
                .ol-column-type03 li {
                  position: relative;
                  margin: 0 0 8px 32px;
                }
                
                .ol-row-type03 li::before,
                .ol-column-type03 li::before {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -30px;
                  z-index: -1;
                  width: 24px;
                  height: 24px;
                  line-height: 24px;
                  margin: auto;
                  color: var(--white-color);
                  background: var(--chara-color);
                  text-align: center;
                  content: counter(item);
                  counter-increment: item;
                }
                
                .ol-row-type04,
                .ol-column-type04 {
                  counter-reset: item;
                  list-style-type: none;
                }
                
                .ol-row-type04 li,
                .ol-column-type04 li {
                  position: relative;
                  margin: 0 0 8px 32px;
                }
                
                .ol-row-type04 li::before,
                .ol-column-type04 li::before {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -30px;
                  width: 24px;
                  height: 24px;
                  line-height: 24px;
                  margin: auto;
                  color: var(--chara-color);
                  background: url("モチーフ(小)画像URL") center / contain no-repeat;
                  text-align: center;
                  content: counter(item);
                  counter-increment: item;
                }
                
                .ul-row-type01 li,
                .ul-column-type01 li {
                  margin-left: 16px;
                }
                
                .ul-row-type01,
                .ul-column-type01 {
                  list-style-type: disc;
                }
                
                .ul-row-type01 li::marker,
                .ul-column-type01 li::marker {
                  color: var(--chara-color);
                }
                
                .ul-row-type02 li,
                .ul-column-type02 li {
                  position: relative;
                  padding-left: 12px;
                }
                
                .ul-row-type02 li::before,
                .ul-column-type02 li::before {
                  display: inline-block;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  width: 8px;
                  height: 8px;
                  margin: auto;
                  border: 1.5px solid var(--text-color);
                  border-radius: 50%;
                  content: '';
                }
                
                .ul-row-type02 li::after,
                .ul-column-type02 li::after {
                  display: inline-block;
                  position: absolute;
                  top: 8px;
                  left: 2px;
                  z-index: -1;
                  width: 7px;
                  height: 7px;
                  margin: auto;
                  border-radius: 50%;
                  background: var(--chara-color);
                  content: '';
                }
                
                .ul-row-type03 li,
                .ul-column-type03 li {
                  position: relative;
                  padding-left: 12px;
                }
                
                .ul-row-type03 li::before,
                .ul-column-type03 li::before {
                  display: inline-block;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  margin: auto;
                  color: var(--chara-color);
                  content: '-';
                }
                
                .ul-row-type04 li,
                .ul-column-type04 li {
                  position: relative;
                  margin-left: 16px;
                }
                
                .ul-row-type04 li::before,
                .ul-column-type04 li::before {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -16px;
                  width: 12px;
                  height: 12px;
                  line-height: 24px;
                  margin: auto;
                  color: var(--chara-color);
                  background: url("モチーフ(小)画像URL") center / contain no-repeat;
                  text-align: center;
                  content: '';
                }
                
                .dl-row {
                  display: flex;
                  flex-wrap: wrap;
                }
                
                .dl-row dt {
                  width: 96px;
                  margin-bottom: 4px;
                  padding: 4px 0;
                }
                
                .dl-row dd {
                  width: calc(100% - 96px);
                  margin-bottom: 4px;
                  padding: 4px 8px;
                }
                
                .dl-row-type01 dt {
                  border-bottom: 1px solid var(--chara-color);
                }
                
                .dl-row-type01 dd {
                  border-bottom: 1px solid var(--subtext-color);
                }
                
                .dl-row-type02 dt {
                  border-right: 6px solid var(--chara-color);
                }
                
                .dl-row-type03 dt {
                  display: flex;
                  align-items: center;
                  padding-left: 0;
                }
                
                .dl-row-type03 dt::after {
                  flex-grow: 1;
                  margin-left: 4px;
                  border-top: 2px solid var(--chara-color);
                  content: '';
                }
                
                .dl-row-type04 dt {
                  position: relative;
                  text-align: center;
                }
                
                .dl-row-type04 dt::before {
                  display: block;
                  position: absolute;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: url("モチーフ画像URL") center / contain no-repeat;
                  opacity: .5;
                  content: '';
                }
                .dl-column-type01 dt {
                  background: linear-gradient(transparent 60%, var(--chara-color) 60%);
                }
                
                .dl-column-type02 dt {
                  position: relative;
                  padding-left: 18px;
                }
                
                .dl-column-type02 dt::before {
                  display: inline-block;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  width: 8px;
                  height: 8px;
                  margin: auto;
                  border: 1.5px solid var(--text-color);
                  border-radius: 50%;
                  content: '';
                }
                
                .dl-column-type02 dt::after {
                  display: inline-block;
                  position: absolute;
                  top: 8px;
                  left: 2px;
                  z-index: -1;
                  width: 7px;
                  height: 7px;
                  margin: auto;
                  border-radius: 50%;
                  background: var(--chara-color);
                  content: '';
                }
                
                .dl-column-type03 dt {
                  position: relative;
                  padding-left: 12px;
                }
                
                .dl-column-type03 dt::before {
                  display: inline-block;
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  margin: auto;
                  color: var(--chara-color);
                  content: '-';
                }
                
                .dl-column-type04 dt {
                  position: relative;
                  margin-left: 16px;
                }
                
                .dl-column-type04 dt::before {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: -16px;
                  width: 12px;
                  height: 12px;
                  line-height: 24px;
                  margin: auto;
                  color: var(--chara-color);
                  background: url("モチーフ(小)画像URL") center / contain no-repeat;
                  text-align: center;
                  content: '';
                }
                /* list END */
                /* table */
                .table-wrapper {
                  width: 100%;
                  overflow-x: scroll;
                  margin: 16px auto;
                  padding-bottom: 2px;
                  scrollbar-color: var(--text-color) transparent;
                  scrollbar-width: thin;
                }
                
                .table-wrapper::-webkit-scrollbar {
                  width: 100%;
                  height: 2px;
                }
                
                .table-wrapper::-webkit-scrollbar-track {
                  background: transparent;
                }
                
                .table-wrapper::-webkit-scrollbar-thumb {
                  border-radius: 2px;
                  background: var(--text-color);
                }
                
                table {
                  min-width: calc(100% - 1px);
                  text-align: center;
                  white-space: nowrap;
                  border-collapse: collapse;
                }
                
                table th,
                table td {
                  line-height: 2;
                  padding: 4px 16px;
                }
                
                .table-type01 th {
                  color: var(--white-color);
                  background: var(--chara-color);
                }
                
                .table-type02 tr:first-child {
                  border: 1px solid var(--text-color);
                }
                
                .table-type02 th {
                  position: relative;
                }
                
                .table-type02 th::after {
                  display: block;
                  position: absolute;
                  top: 4px;
                  left: 4px;
                  z-index: -1;
                  width: 100%;
                  height: 100%;
                  background: var(--chara-color);
                  content: '';
                }
                
                .table-type03 tr:first-child {
                  position: relative;
                  border: 4px double var(--chara-color);
                  color: var(--chara-color);
                }
                
                .table-type04 th {
                  background: url("モチーフ画像URL") center / contain no-repeat;
                }
                
                table tr:not(:last-child) {
                  border-bottom: 1px solid var(--chara-color);
                }
                /* table END */
                /* semantic elements */
                header,
                section {
                  margin-bottom: 32px;
                }
                
                footer {
                  line-height: 2;
                  text-align: center;
                }
                /* semantic elements END */
                /* character list parts */
                .details-wrapper {
                  position: fixed;
                  right: 0;
                  left: 0;
                  z-index: 1;
                  width: 100%;
                  height: 100vh;
                  overflow-y: scroll;
                  margin: 0 auto;
                  padding: 16px;
                  padding-bottom: 80px; /* nanoの広告テキスト隠し対策 */
                  border: 16px solid var(--chara-color);
                  background: var(--white-color);
                  scrollbar-width: none;
                }
                
                .details-wrapper::-webkit-scrollbar {
                  display: none;
                }
                
                .icon {
                  display: inline-block;
                  width: 120px;
                  height: 120px;
                  vertical-align: middle;
                  margin: 0 16px 16px 0;
                  object-fit: cover;
                }
                
                .lines {
                  position: relative;
                  margin: 16px auto;
                  padding: 8px 16px;
                  text-align: center;
                }
                
                .lines-type01::before,
                .lines-type01::after {
                  position: absolute;
                  width: 16px;
                  height: 16px;
                  content: '';
                }
                
                .lines-type01::before {
                  top: 0;
                  left: 0;
                  border-top: 1px solid var(--chara-color);
                  border-left: 1px solid var(--chara-color);
                }
                
                .lines-type01::after {
                  right: 0;
                  bottom: 0;
                  border-right: 1px solid var(--chara-color);
                  border-bottom: 1px solid var(--chara-color);
                }
                
                .lines-type02 {
                  border: 2px solid var(--text-color);
                  box-shadow: 4px 4px 0px 0px var(--chara-color);
                  background: transparent;
                }
                
                .lines-type02::before {
                  position: absolute;
                  top: -24px;
                  left: 24px;
                  z-index: 2;
                  border: 12px solid transparent;
                  border-bottom: 12px solid var(--white-color);
                  content: '';
                }
                
                .lines-type02::after {
                  position: absolute;
                  top: -28px;
                  left: 23px;
                  z-index: 1;
                  border: 13px solid transparent;
                  border-bottom: 13px solid var(--text-color);
                  content: '';
                }
                
                .lines-type03 {
                  border: 1px solid var(--chara-color);
                  background: transparent;
                }
                
                .lines-type03::before {
                  display: block;
                  position: absolute;
                  top: 4px;
                  left: 4px;
                  z-index: -1;
                  width: calc(100% + 2px);
                  height: calc(100% + 2px);
                  border: 1px solid var(--chara-color);
                  content: '';
                }
                
                .lines-type03::after {
                  position: absolute;
                  top: -12px;
                  left: 24px;
                  z-index: 1;
                  width: 1px;
                  height: 24px;
                  background: var(--chara-color);
                  content: '';
                  transform: rotate(-15deg);
                }
                
                .lines-type04 {
                  border: 1px solid var(--chara-color);
                }
                
                .lines-type04::before {
                  position: absolute;
                  top: -20px;
                  left: 24px;
                  z-index: 1;
                  width: 16px;
                  height: 16px;
                  -webkit-clip-path: polygon(50% 0, 0% 100%, 5% 100%, 50% 8%, 50% 8%, 93% 95%, 7% 95%, 5% 100%, 100% 100%, 50% 0);
                  clip-path: polygon(50% 0, 0% 100%, 5% 100%, 50% 8%, 50% 8%, 93% 95%, 7% 95%, 5% 100%, 100% 100%, 50% 0);
                  background: var(--chara-color);
                  content: '';
                }
                
                .lines-type04::after {
                  position: absolute;
                  top: 8px;
                  right: 0;
                  left: 0;
                  z-index: -1;
                  width: calc(100% - 16px);
                  height: calc(100% - 16px);
                  margin: auto;
                  background: url("モチーフ画像URL") center / contain no-repeat;
                  opacity: .5;
                  content: '';
                }
                
                .tl {
                  display: flex;
                  position: relative;
                  flex-wrap: wrap;
                  padding-top: 24px;
                }
                
                .tl::before {
                  position: absolute;
                  top: 0;
                  left: 44px;
                  width: 4px;
                  height: 100%;
                  background: var(--chara-color);
                  opacity: .25;
                  content: '';
                }
                
                .tl dt {
                  position: relative;
                  width: 44px;
                  margin-bottom: 16px;
                }
                
                .tl dt::after {
                  position: absolute;
                  top: 4px;
                  right: -10px;
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                  background: var(--chara-color);
                  content: '';
                }
                
                .tl dd {
                  width: calc(100% - 64px);
                  margin-bottom: 16px;
                  padding-left: 16px;
                }
                
                img {
                  pointer-events: none; 
                  -webkit-touch-callout:none;
                  -webkit-user-select:none;
                  -moz-touch-callout:none;
                  -moz-user-select:none;
                  user-select:none;
                }
                /* character list parts END */
                /* slider */
                .slider img {
                  width: calc(100% - 32px);
                  height: auto;
                  margin: auto;
                }
                
                .slick-dots {
                  margin: 16px auto;
                  text-align: center;
                }
                
                .slick-dots li {
                  display: inline-block;
                  margin: 0 8px;
                }
                
                .slick-dots button {
                  display: block;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  color: transparent;
                  background: var(--subtext-color);
                  outline: none;
                }
                
                .slick-dots .slick-active button {
                  background: var(--chara-color);
                }
                
                .slick-prev,
                .slick-next {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  z-index: 1;
                  width: 16px;
                  height: 16px;
                  margin: auto;
                  border-width: 1px;
                  border-color: transparent transparent var(--chara-color) var(--chara-color);
                  border-style: solid;
                }
                
                .slick-prev {
                  left: 0;
                  transform: rotate(45deg);
                }
                
                .slick-next {
                  right: 0;
                  transform: rotate(225deg);
                }
                /* slider END */
                /* less than 768px */
                @media screen and (min-width: 768px) {
                  body {
                    font-size: 13px;
                  }
                
                  .flex-wrapper {
                    display: flex;
                    flex-wrap: wrap;
                  }
                
                  .flex-item {
                    width: 50%;
                    padding: 0 16px;
                  }
                
                  .ol-row-type02 li::after,
                  .ol-column-type02 li::after {
                    top: 6px;
                  }
                
                  .ul-row-type02 li::after,
                  .ul-column-type02 li::after,
                  .dl-column-type02 dt::after {
                    top: 10px;
                  }
                
                  .tl::before {
                    left: 56px;
                  }
                
                  .tl dt {
                    width: 56px;
                  }
                }
                /* less than 768px END */

@charset "UTF-8";
/* design by tsugumi https://miroirs.stars.ne.jp/ */
/* font import */
@font-face {
  font-family: チェックポイント;
  src: url('https://cdn.leafscape.be/cpfont/CP_Font_web.woff2')
  format("woff2");
}
 
@font-face {
  font-family: 刻明朝;
  src: url('https://cdn.leafscape.be/kokumin/font_1_kokumr_1.00_rls_web.woff2')
  format("woff2");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
オリジナルのフォントは以下から取得できます。
http://ipafont.ipa.go.jp/
-------------------------------------------------*/
/* font import END */
/* resetcss */
/*
Copyright (c) 2021 tsugumi - https://miroirs.stars.ne.jp/
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html
 
Copyright (c) 2010 Richard Clark - http://richclarkdesign.com
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html
*/
*,
*::before,
*::after {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
  font-size: 100%;
  outline: 0;
}
 
*::before,
*::after {
  content: none;
}
 
body {
  line-height: 1.5;
}
 
main {
  display: block;
}
 
[type="checkbox"],[type="radio"],[type="submit"],
button,select,option,label,summary {
  cursor: pointer;
}
 
input,button,textarea,select {
  font-family: inherit;
  font-size: 100%;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
}
 
textarea {
  overflow-x: hidden;
  resize: vertical;
}
 
::placeholder {
  opacity: 1;
}
 
ul,ol {
  list-style: none;
}
 
blockquote, q {
  quotes: none;
}
 
blockquote::before,blockquote::after,
q::before,q::after {
  content:'';
  content: none;
}
 
mark {
  color: #000;
  background-color: #ff9;
  font-weight: bold;
}
 
del {
  text-decoration: line-through;
}
 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
 
hr {
  display: block;
  height: 1px;
  border-top: 1px solid #000;
}
/* resetcss END */
/* firefox only */
@-moz-document url-prefix() {
  body {
    overflow-wrap: break-word;
  }
}
/* firefox only END */
/* safari only */
_::-webkit-full-page-media,
_:future,
:root .transparent {
  color: var(--text-color);
  opacity: .1;
}
/* safari only END */
/* root */
:root {
  --chara-color: #dc143c;
  --selection-color: rgb(220,20,60,.5);
  --subtext-color: #ccc;
  --text-color: #333;
  --white-color: #fff;
  --body-type01-font: 'Lato', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  --body-type02-font: 'Montserrat', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  --body-type03-font: 'Lora', 'Noto Serif JP', 游明朝, 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', HGS明朝E, メイリオ, Meiryo, serif;
  --body-type04-font: 'Raleway', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  --headline-type01-font: 'PT Sans', sans-serif;
  --headline-type02-font: 'Rubik Mono One', チェックポイント, sans-serif;
  --headline-type03-font: 'Cinzel', 刻明朝, serif;
  --headline-type04-font: 'Unica One', 'Train One', cursive;
}
/* root END */
/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
 
::-webkit-scrollbar-track {
  background: transparent;
}
 
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--text-color);
}
 
html {
  scrollbar-color: var(--text-color) transparent;
  scrollbar-width: thin;
}
/* scrollbar END */
/* selection */
::selection {
  background: var(--selection-color);
}
/* selection END */
/* body */
body {
  position: relative;
  line-height: 1.8;
  color: var(--text-color);
  background: var(--white-color);
  font-family: var(--body-type04-font);
  font-size: 11px;
  text-align: justify;
  letter-spacing: .2em;
  word-break: break-all;
}
/* body END */
/* headline */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
  margin: 8px 0;
}
 
.h2-type01,
.h3-type01,
.h4-type01,
.h5-type01,
.h6-type01 {
  font-family: var(--headline-type01-font);
}
 
.h2-type02,
.h3-type02,
.h4-type02,
.h5-type02,
.h6-type02 {
  font-family: var(--headline-type02-font);
}
 
.h2-type03,
.h3-type03,
.h4-type03,
.h5-type03,
.h6-type03 {
  font-family: var(--headline-type03-font);
}
 
.h2-type04,
.h3-type04,
.h4-type04,
.h5-type04,
.h6-type04 {
  font-family: var(--headline-type04-font);
}
 
h1 {
  display: inline-block;
  color: var(--chara-color);
  font-weight: normal;
  font-size: 20px;
  letter-spacing: .4em;
}
 
h2 {
  font-size: 22px;
}
 
.h2-type01 {
  background: linear-gradient(transparent 60%, var(--chara-color) 60%);
  text-transform: uppercase;
}
 
.h2-type02 {
  display: table;
  position: relative;
  padding: 0 8px;
  border: 2px solid var(--text-color);
  background: transparent;
}
 
.h2-type02::before {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--white-color);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 8px, var(--chara-color) 8px, var(--chara-color) 16px);
  background-size: auto auto;
  content: '';
}
 
.h2-type03 {
  display: flex;
  align-items: center;
  color: var(--text-color);
}
 
.h2-type03::before,
.h2-type03::after {
  flex-grow: 1;
  border-top: 1px solid var(--chara-color);
  content: '';
}
 
.h2-type03::before {
  margin-right: 16px;
}
 
.h2-type03::after {
  margin-left: 16px;
}
 
.h2-type04 {
  position: relative;
  margin-top: 64px;
  color: var(--chara-color);
  text-align: center;
}
 
.h2-type04::before {
  display: block;
  position: absolute;
  top: -40px;
  right: 0;
  left: 0;
  width: 80px;
  height: 40px;
  margin: auto;
  background: url("モチーフ画像URL") center / contain no-repeat;
  content: '';
}
 
h3 {
  font-size: 20px;
}
 
.h3-type01 {
  padding: 0 8px;
  border: 1px solid var(--chara-color);
  color: var(--chara-color);
}
 
.h3-type02 {
  display: table;
  position: relative;
  padding: 4px 16px;
  border: 2px solid var(--text-color);
  border-radius: 8px;
  color: var(--chara-color);
  text-shadow: 2px 1px 0px var(--text-color),
  2px -1px 0px var(--text-color),
  -2px 1px 0px var(--text-color),
  -2px -1px 0px var(--text-color);
}
 
.h3-type02::before {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--text-color);
  border-radius: 50%;
  background: var(--chara-color);
  content: '';
}
 
.h3-type02::after {
  display: block;
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--text-color);
  border-radius: 50%;
  background: var(--chara-color);
  content: '';
}
 
.h3-type03 {
  display: flex;
  align-items: center;
  color: var(--text-color);
}
 
.h3-type03::after {
  flex-grow: 1;
  border-top: 1px solid var(--chara-color);
  content: '';
}
 
.h3-type03::after {
  margin-left: 16px;
}
 
.h3-type04 {
  position: relative;
  text-align: center;
}
 
.h3-type04 span {
  padding: 0 8px;
  color: var(--chara-color);
  background: var(--white-color);
}
 
.h3-type04::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 60px;
  height: 30px;
  margin: auto;
  background: url("モチーフ画像URL") center / contain no-repeat;
  opacity: .5;
  content: '';
}
 
.h3-type04::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 1px;
  margin: auto;
  background: var(--chara-color);
  content: '';
}
 
h4 {
  font-size: 18px;
}
 
.h4-type01 {
  padding-left: 8px;
  border-left: 6px solid var(--chara-color);
}
 
.h4-type02 span {
  margin-right: 8px;
  padding: 0 4px;
  border: 1px solid var(--text-color);
  border-radius: 4px;
  box-shadow: 4px 4px 0px 0px var(--text-color);
  color: var(--chara-color);
  text-shadow: 1px 1px 0px var(--text-color),
  1px -1px 0px var(--text-color),
  -1px 1px 0px var(--text-color),
  -1px -1px 0px var(--text-color);
}
 
.h4-type03 {
  display: table;
  position: relative;
  padding: 0 8px;
  border: 1px solid var(--chara-color);
}
 
.h4-type03::before {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 1px solid var(--chara-color);
  content: '';
}
 
.h4-type04 {
  position: relative;
  color: var(--chara-color);
  text-align: center;
}
 
.h4-type04::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 50px;
  height: 25px;
  margin: auto;
  background: url("モチーフ画像URL") center / contain no-repeat;
  opacity: .5;
  content: '';
}
 
h5 {
  font-size: 16px;
}
 
.h5-type01::first-letter {
  color: var(--chara-color);
  font-size: 18px;
  text-transform: uppercase;
}
 
.h5-type02 {
  color: var(--white-color);
  text-shadow: 1px 1px 0px var(--text-color),
  1px -1px 0px var(--text-color),
  -1px 1px 0px var(--text-color),
  -1px -1px 0px var(--text-color);
}
 
[data-h5] {
  position: relative;
}
 
[data-h5]::before {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -1;
  margin: auto;
  color: var(--chara-color);
  content: attr(data-h5);
}
 
[data-h5]::after {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: -2;
  margin: auto;
  color: var(--chara-color);
  content: attr(data-h5);
}
 
.h5-type03 {
  display: table;
  position: relative;
  padding: 0 8px;
}
 
.h5-type03::before,
.h5-type03::after {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--chara-color);
  content: '';
  transform: skewX(-15deg);
}
 
.h5-type03::before {
  left: 0;
}
 
.h5-type03::after {
  right: 0;
}
 
.h5-type04 {
  position: relative;
  padding-left: 24px;
  color: var(--chara-color);
}
 
.h5-type04::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  background: url("モチーフ(小)画像URL") center / contain no-repeat;
  content: '';
}
 
h6 {
  font-size: 14px;
}
 
.h6-type01 {
  display: table;
  border-bottom: 1px solid var(--chara-color);
}
 
.h6-type02 {
  color: var(--white-color);
  text-shadow: 1px 1px 0px var(--text-color),
  1px -1px 0px var(--text-color),
  -1px 1px 0px var(--text-color),
  -1px -1px 0px var(--text-color);
}
 
.h6-type02::first-letter {
  color: var(--chara-color);
}
 
.h6-type03 {
  display: table-cell;
  padding: 0 4px;
  border-bottom: 1px solid var(--chara-color);
  text-transform: capitalize;
}
 
.h6-type03::first-letter {
  color: var(--chara-color);
}
 
.h6-type04 {
  position: relative;
  padding-left: 5px;
  color: var(--chara-color);
}
 
.h6-type04::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  background: url("モチーフ(小)画像URL") center / contain no-repeat;
  opacity: .5;
  content: '';
}
/* headline END */
/* text decoration */
a {
  color: var(--chara-color);
  text-decoration: underline;
}
 
strong {
  color: var(--chara-color);
  filter: brightness(75%) contrast(200%);
}
 
em {
  border-bottom: 1px dashed var(--chara-color);
}
 
mark {
  display: inline-block;
  padding: 0 6px;
  color: var(--white-color);
  background: var(--chara-color);
}
 
[data-ruby] {
  position: relative;
}
 
[data-ruby]::before {
  position: absolute;
  right: -3em;
  bottom: 105%;
  left: -3em;
  line-height: 100%;
  margin: auto;
  font-size: .5em;
  text-align: center;
  letter-spacing: 1px;
  word-break: keep-all;
  content: attr(data-ruby);
  transform: scale(.75);
  transform-origin: bottom center;
}
 
ruby rt {
  display: none;
}
 
.border-l {
  margin-right: 8px;
  padding-left: 8px;
  border-left: 6px solid var(--chara-color);
}
 
.border-r {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 6px solid var(--chara-color);
}
 
.border-a {
  position: relative;
  margin-right: 48px;
}
 
.border-a::after {
  position: absolute;
  top: 0;
  right: -38px;
  bottom: 0;
  width: 32px;
  height: 2px;
  margin: auto;
  background: var(--chara-color);
  content: '';
}
 
.marker {
  background: linear-gradient(transparent 60%, var(--chara-color) 60%);
}
 
.btn {
  display: inline-block;
  line-height: 2;
  padding: 0 8px;
  cursor: pointer;
}
 
.btn-type01 {
  border: 1px solid var(--chara-color);
  border-bottom-width: 4px;
  color: var(--chara-color);
}
 
.btn-type02 {
  position: relative;
  border: 2px solid var(--text-color);
  color: var(--text-color);
}
 
.btn-type02::after {
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: var(--chara-color);
  content: '';
}
 
.btn-type03 {
  position: relative;
  border-radius: 30px;
  color: var(--chara-color);
}
 
.btn-type03::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border: 1px solid var(--chara-color);
  content: '';
  transform: skewX(-15deg);
  ;
}
 
.btn-type04 {
  position: relative;
}
 
.btn-type04::before {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("モチーフ画像URL") center / contain no-repeat;
  opacity: .5;
  content: '';
}
 
.transparent {
  color: transparent;
}
 
.transparent::selection {
  color: var(--text-color);
}
/* text decoration END */
/* align */
.left {
  text-align: left;
}
 
.center {
  text-align: center;
}
 
.right {
  text-align: right;
}
/* align END */
/* separator */
hr {
  margin: 16px auto;
}
 
.hr-type01 {
  height: 1px;
  border-top: 1px solid var(--chara-color);
}
 
.hr-type02 {
  height: 10px;
  border: 0;
  background-image: linear-gradient(90deg,rgba(255,255,255,0),var(--chara-color) 33.33%,rgba(255,255,255,0) 33.33%,rgba(255,255,255,0) 100%);
  background-size: 6px 100%;
}
 
.hr-type03 {
  height: 4px;
  border-top: 1px solid var(--chara-color);
  border-bottom: 1px solid var(--chara-color);
}
 
.hr-type04 {
  position: relative;
  overflow: visible;
  border-color: var(--chara-color);
}
 
.hr-type04::before {
  display: block;
  position: absolute;
  top: -12.5px;
  right: 0;
  left: 0;
  width: 50px;
  height: 25px;
  margin: auto;
  background: var(--white-color) url("モチーフ画像URL") center / contain no-repeat;
  content: '';
}
/* line END */
/* box & quote */
.box,
.scroll-box,
blockquote {
  margin: 16px auto;
  padding: 24px 16px;
}
 
.scroll-box {
  height: 160px;
}
 
.scroll-contents {
  height: 122px;
  overflow-y: scroll;
 
  scrollbar-color: var(--text-color) transparent;
  scrollbar-width: thin;
}
 
.scroll-contents::-webkit-scrollbar {
  width: 2px;
  height: 100%;
}
 
.scroll-contents::-webkit-scrollbar-track {
  background: transparent;
}
 
.box-type01 {
  border: 1px solid var(--chara-color);
}
 
.box-type02 {
  border: 2px solid var(--text-color);
  box-shadow: 4px 4px 0px 0px var(--chara-color);
}
 
.box-type03 {
  position: relative;
  overflow: visible;
  border: 1px solid var(--chara-color);
}
 
.box-type03::after {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: -1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 1px solid var(--chara-color);
  content: '';
}
 
.box-type04 {
  position: relative;
  padding-top: 28px;
  border: 1px solid var(--chara-color);
}
 
.box-type04::after {
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  width: 50px;
  height: 25px;
  margin: auto;
  background: url("モチーフ画像URL") center / contain no-repeat;
  content: '';
}
 
q,
blockquote,
cite {
  font-style: italic;
}
 
q::before,
q::after {
  display: inline;
  content: '"';
}
 
blockquote {
  position: relative;
}
 
blockquote::before {
  display: block;
  position: absolute;
  top: 8px;
  left: 8px;
  color: var(--chara-color);
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f10d';
}
 
blockquote.box-type04::before {
  top: 9px;
  right: 0;
  left: 0;
  z-index: 10;
  margin: auto;
  text-align: center;
}
 
cite {
  display: block;
  color: var(--subtext-color);
  font-size: 10px;
  text-align: right;
}
/* box & quote END */
/* details */
details summary {
  display: inline-block;
}
 
details summary::marker,
details summary::-webkit-details-marker {
  display: none;
}
 
details summary::before {
  display: inline-block;
  margin-right: 4px;
  color: var(--text-color);
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  content: '\f0da';
  transition: .3s;
}
 
details[open] summary::before {
  transform: rotate(90deg);
}
 
details[open] .details-contents {
  animation: fadeIn 1s ease;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
 
  100% {
    opacity: 1;
    transform: none;
  }
}
/* details END */
/* list */
.ol-row,
.ol-column,
.ul-row,
.ul-column,
.dl-row,
.dl-column {
  margin: 16px 0;
}
 
.ol-row,
.ul-row {
  display: flex;
  flex-wrap: wrap;
}
 
.ul-row li,
.ol-row li {
  margin-right: 8px;
}
 
.ol-row-type01,
.ol-column-type01 {
  list-style-type: decimal;
}
 
.ol-row-type01 li,
.ol-column-type01 li {
  margin-left: 24px;
}
 
.ol-row-type01 li::marker,
.ol-column-type01 li::marker {
  color: var(--chara-color);
  font-size: 12px;
}
 
.ol-row-type02,
.ol-column-type02 {
  counter-reset: item;
  list-style-type: none;
}
 
.ol-row-type02 li,
.ol-column-type02 li {
  position: relative;
  margin: 0 0 8px 32px;
}
 
.ol-row-type02 li::before,
.ol-column-type02 li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  z-index: -1;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin: auto;
  border: 1.5px solid var(--text-color);
  border-radius: 50%;
  text-align: center;
  content: counter(item);
  counter-increment: item;
}
 
.ol-row-type02 li::after,
.ol-column-type02 li::after {
  position: absolute;
  top: 2px;
  left: -26px;
  z-index: -2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--chara-color);
  content: '';
}
 
.ol-row-type03,
.ol-column-type03 {
  counter-reset: item;
  list-style-type: none;
}
 
.ol-row-type03 li,
.ol-column-type03 li {
  position: relative;
  margin: 0 0 8px 32px;
}
 
.ol-row-type03 li::before,
.ol-column-type03 li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  z-index: -1;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: auto;
  color: var(--white-color);
  background: var(--chara-color);
  text-align: center;
  content: counter(item);
  counter-increment: item;
}
 
.ol-row-type04,
.ol-column-type04 {
  counter-reset: item;
  list-style-type: none;
}
 
.ol-row-type04 li,
.ol-column-type04 li {
  position: relative;
  margin: 0 0 8px 32px;
}
 
.ol-row-type04 li::before,
.ol-column-type04 li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: auto;
  color: var(--chara-color);
  background: url("モチーフ(小)画像URL") center / contain no-repeat;
  text-align: center;
  content: counter(item);
  counter-increment: item;
}
 
.ul-row-type01 li,
.ul-column-type01 li {
  margin-left: 16px;
}
 
.ul-row-type01,
.ul-column-type01 {
  list-style-type: disc;
}
 
.ul-row-type01 li::marker,
.ul-column-type01 li::marker {
  color: var(--chara-color);
}
 
.ul-row-type02 li,
.ul-column-type02 li {
  position: relative;
  padding-left: 12px;
}
 
.ul-row-type02 li::before,
.ul-column-type02 li::before {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border: 1.5px solid var(--text-color);
  border-radius: 50%;
  content: '';
}
 
.ul-row-type02 li::after,
.ul-column-type02 li::after {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 2px;
  z-index: -1;
  width: 7px;
  height: 7px;
  margin: auto;
  border-radius: 50%;
  background: var(--chara-color);
  content: '';
}
 
.ul-row-type03 li,
.ul-column-type03 li {
  position: relative;
  padding-left: 12px;
}
 
.ul-row-type03 li::before,
.ul-column-type03 li::before {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: var(--chara-color);
  content: '-';
}
 
.ul-row-type04 li,
.ul-column-type04 li {
  position: relative;
  margin-left: 16px;
}
 
.ul-row-type04 li::before,
.ul-column-type04 li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 12px;
  height: 12px;
  line-height: 24px;
  margin: auto;
  color: var(--chara-color);
  background: url("モチーフ(小)画像URL") center / contain no-repeat;
  text-align: center;
  content: '';
}
 
.dl-row {
  display: flex;
  flex-wrap: wrap;
}
 
.dl-row dt {
  width: 96px;
  margin-bottom: 4px;
  padding: 4px 0;
}
 
.dl-row dd {
  width: calc(100% - 96px);
  margin-bottom: 4px;
  padding: 4px 8px;
}
 
.dl-row-type01 dt {
  border-bottom: 1px solid var(--chara-color);
}
 
.dl-row-type01 dd {
  border-bottom: 1px solid var(--subtext-color);
}
 
.dl-row-type02 dt {
  border-right: 6px solid var(--chara-color);
}
 
.dl-row-type03 dt {
  display: flex;
  align-items: center;
  padding-left: 0;
}
 
.dl-row-type03 dt::after {
  flex-grow: 1;
  margin-left: 4px;
  border-top: 2px solid var(--chara-color);
  content: '';
}
 
.dl-row-type04 dt {
  position: relative;
  text-align: center;
}
 
.dl-row-type04 dt::before {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("モチーフ画像URL") center / contain no-repeat;
  opacity: .5;
  content: '';
}
.dl-column-type01 dt {
  background: linear-gradient(transparent 60%, var(--chara-color) 60%);
}
 
.dl-column-type02 dt {
  position: relative;
  padding-left: 18px;
}
 
.dl-column-type02 dt::before {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border: 1.5px solid var(--text-color);
  border-radius: 50%;
  content: '';
}
 
.dl-column-type02 dt::after {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 2px;
  z-index: -1;
  width: 7px;
  height: 7px;
  margin: auto;
  border-radius: 50%;
  background: var(--chara-color);
  content: '';
}
 
.dl-column-type03 dt {
  position: relative;
  padding-left: 12px;
}
 
.dl-column-type03 dt::before {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: var(--chara-color);
  content: '-';
}
 
.dl-column-type04 dt {
  position: relative;
  margin-left: 16px;
}
 
.dl-column-type04 dt::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 12px;
  height: 12px;
  line-height: 24px;
  margin: auto;
  color: var(--chara-color);
  background: url("モチーフ(小)画像URL") center / contain no-repeat;
  text-align: center;
  content: '';
}
/* list END */
/* table */
.table-wrapper {
  width: 100%;
  overflow-x: scroll;
  margin: 16px auto;
  padding-bottom: 2px;
  scrollbar-color: var(--text-color) transparent;
  scrollbar-width: thin;
}
 
.table-wrapper::-webkit-scrollbar {
  width: 100%;
  height: 2px;
}
 
.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
 
.table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: var(--text-color);
}
 
table {
  min-width: calc(100% - 1px);
  text-align: center;
  white-space: nowrap;
  border-collapse: collapse;
}
 
table th,
table td {
  line-height: 2;
  padding: 4px 16px;
}
 
.table-type01 th {
  color: var(--white-color);
  background: var(--chara-color);
}
 
.table-type02 tr:first-child {
  border: 1px solid var(--text-color);
}
 
.table-type02 th {
  position: relative;
}
 
.table-type02 th::after {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--chara-color);
  content: '';
}
 
.table-type03 tr:first-child {
  position: relative;
  border: 4px double var(--chara-color);
  color: var(--chara-color);
}
 
.table-type04 th {
  background: url("モチーフ画像URL") center / contain no-repeat;
}
 
table tr:not(:last-child) {
  border-bottom: 1px solid var(--chara-color);
}
/* table END */
/* semantic elements */
header,
section {
  margin-bottom: 32px;
}
 
footer {
  line-height: 2;
  text-align: center;
}
/* semantic elements END */
/* character list parts */
.details-wrapper {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 80px; /* nanoの広告テキスト隠し対策 */
  border: 16px solid var(--chara-color);
  background: var(--white-color);
  scrollbar-width: none;
}
 
.details-wrapper::-webkit-scrollbar {
  display: none;
}
 
.icon {
  display: inline-block;
  width: 120px;
  height: 120px;
  vertical-align: middle;
  margin: 0 16px 16px 0;
  object-fit: cover;
}
 
.lines {
  position: relative;
  margin: 16px auto;
  padding: 8px 16px;
  text-align: center;
}
 
.lines-type01::before,
.lines-type01::after {
  position: absolute;
  width: 16px;
  height: 16px;
  content: '';
}
 
.lines-type01::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--chara-color);
  border-left: 1px solid var(--chara-color);
}
 
.lines-type01::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid var(--chara-color);
  border-bottom: 1px solid var(--chara-color);
}
 
.lines-type02 {
  border: 2px solid var(--text-color);
  box-shadow: 4px 4px 0px 0px var(--chara-color);
  background: transparent;
}
 
.lines-type02::before {
  position: absolute;
  top: -24px;
  left: 24px;
  z-index: 2;
  border: 12px solid transparent;
  border-bottom: 12px solid var(--white-color);
  content: '';
}
 
.lines-type02::after {
  position: absolute;
  top: -28px;
  left: 23px;
  z-index: 1;
  border: 13px solid transparent;
  border-bottom: 13px solid var(--text-color);
  content: '';
}
 
.lines-type03 {
  border: 1px solid var(--chara-color);
  background: transparent;
}
 
.lines-type03::before {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: -1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 1px solid var(--chara-color);
  content: '';
}
 
.lines-type03::after {
  position: absolute;
  top: -12px;
  left: 24px;
  z-index: 1;
  width: 1px;
  height: 24px;
  background: var(--chara-color);
  content: '';
  transform: rotate(-15deg);
}
 
.lines-type04 {
  border: 1px solid var(--chara-color);
}
 
.lines-type04::before {
  position: absolute;
  top: -20px;
  left: 24px;
  z-index: 1;
  width: 16px;
  height: 16px;
  -webkit-clip-path: polygon(50% 0, 0% 100%, 5% 100%, 50% 8%, 50% 8%, 93% 95%, 7% 95%, 5% 100%, 100% 100%, 50% 0);
  clip-path: polygon(50% 0, 0% 100%, 5% 100%, 50% 8%, 50% 8%, 93% 95%, 7% 95%, 5% 100%, 100% 100%, 50% 0);
  background: var(--chara-color);
  content: '';
}
 
.lines-type04::after {
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  z-index: -1;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  margin: auto;
  background: url("モチーフ画像URL") center / contain no-repeat;
  opacity: .5;
  content: '';
}
 
.tl {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  padding-top: 24px;
}
 
.tl::before {
  position: absolute;
  top: 0;
  left: 44px;
  width: 4px;
  height: 100%;
  background: var(--chara-color);
  opacity: .25;
  content: '';
}
 
.tl dt {
  position: relative;
  width: 44px;
  margin-bottom: 16px;
}
 
.tl dt::after {
  position: absolute;
  top: 4px;
  right: -10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chara-color);
  content: '';
}
 
.tl dd {
  width: calc(100% - 64px);
  margin-bottom: 16px;
  padding-left: 16px;
}
 
img {
  pointer-events: none; 
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}
/* character list parts END */
/* slider */
.slider img {
  width: calc(100% - 32px);
  height: auto;
  margin: auto;
}
 
.slick-dots {
  margin: 16px auto;
  text-align: center;
}
 
.slick-dots li {
  display: inline-block;
  margin: 0 8px;
}
 
.slick-dots button {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  color: transparent;
  background: var(--subtext-color);
  outline: none;
}
 
.slick-dots .slick-active button {
  background: var(--chara-color);
}
 
.slick-prev,
.slick-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: auto;
  border-width: 1px;
  border-color: transparent transparent var(--chara-color) var(--chara-color);
  border-style: solid;
}
 
.slick-prev {
  left: 0;
  transform: rotate(45deg);
}
 
.slick-next {
  right: 0;
  transform: rotate(225deg);
}
/* slider END */
/* less than 768px */
@media screen and (min-width: 768px) {
  body {
    font-size: 13px;
  }
 
  .flex-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
 
  .flex-item {
    width: 50%;
    padding: 0 16px;
  }
 
  .ol-row-type02 li::after,
  .ol-column-type02 li::after {
    top: 6px;
  }
 
  .ul-row-type02 li::after,
  .ul-column-type02 li::after,
  .dl-column-type02 dt::after {
    top: 10px;
  }
 
  .tl::before {
    left: 56px;
  }
 
  .tl dt {
    width: 56px;
  }
}
/* less than 768px END */

parts

各パーツ

2カラム

見出しレベル2 type01

見出しレベル2 type02

見出しレベル2 type03

見出しレベル2 type04

見出しレベル3 type01

見出しレベル3 type02

見出しレベル3 type03

見出しレベル3 type04

見出しレベル4 type01

見出しレベル4 type02

見出しレベル4 type03

見出しレベル4 type04

見出しレベル5 type01

見出しレベル5 type02

見出しレベル5 type03

見出しレベル5 type04

見出しレベル6 type01

見出しレベル6 type02

見出しレベル6 type03

見出しレベル6 type04

リンク

太字

斜体

削除

重要

強調

マーク

ルビ

左横線

右横線

下線

マーカー風

ボタン風 type01

ボタン風 type02

ボタン風 type03

ボタン風 type04

透明

左揃え

中央揃え

右揃え

水平線 type01

水平線 type02

水平線 type03

水平線 type04

ボックス type01

ボックス type02

ボックス type03

ボックス type04

スクロールボックス type01

スクロールボックス type02

スクロールボックス type03

スクロールボックス type04

折りたたみボックス

コピーボックス

引用(短)

引用(長) type01

引用(長) type02

引用(長) type03

引用(長) type04

順序付きリスト - 横並び type01

順序付きリスト - 横並び type02

順序付きリスト - 横並び type03

順序付きリスト - 横並び type04

順序付きリスト - 縦並び type01

順序付きリスト - 縦並び type02

順序付きリスト - 縦並び type03

順序付きリスト - 縦並び type04

順序なしリスト - 横並び type01

順序なしリスト - 横並び type02

順序なしリスト - 横並び type03

順序なしリスト - 横並び type04

順序なしリスト - 縦並び type01

順序なしリスト - 縦並び type02

順序なしリスト - 縦並び type03

順序なしリスト - 縦並び type04

説明リスト - 横並び type01

説明リスト - 横並び type02

説明リスト - 横並び type03

説明リスト - 横並び type04

説明リスト - 縦並び type01

説明リスト - 縦並び type02

説明リスト - 縦並び type03

説明リスト - 縦並び type04

表 type01

表 type02

表 type03

表 type04

セリフボックス type01

セリフボックス type02

セリフボックス type03

セリフボックス type04

年表

スライダー

検索避けタグ

当サイトのテンプレートでは、全てのテンプレートに検索避けのmetaタグを挿入しています。
検索避けが不要な方はhtmlの下記のコードを削除してください。


                          <meta name="robots" content="noindex,nofollow">
              <meta name="googlebot" content="noindex,nofollow">

GoogleChrome(スマートフォン版)のタブ色

Chrome(スマートフォン版)のタブ色を設定しています。各head内にある下記のカラーコードを変更するとタブ色が変更できます。


                          <meta name="theme-color" content="#fff">

色とフォントの管理

色とフォントは各cssの:root{}部分で管理をしています。色やフォントを変更したい場合は:root{}内の値を変えると該当部分の色やフォントが全て変わります。
また、キャラクターごとに別のcssを用意することを想定しています。色とフォントを個別に設定すれば共通のcssファイル1つのみで済みます。
色とフォンとの個別設定は下記のコードをcssファイルより後ろに設置してください。


                          <style>
                :root {
                  --chara-color: #fff!important;/* キャラクターの色 */
                  --selection-color: rgb(255,255,255,.5) !important;/* キャラクターの色(文字選択時) */
                }

                body {
                  font-family: var(--body-type01-font) !important;/* :rootで指定したフォント */
                }
              </style>

Safari - summaryアニメーションのバグ

Safariではsummaryの開閉時アニメーションが一度きりしか動作しないというバグがあるそうです。現在、解決策が見つかりませんのでそのままになっています。解決策が見つかり次第、修正します。

モチーフ画像

モチーフ画像は細かいデザインだと一部のパーツで潰れてしまったり文字が見にくくなる可能性があります。モチーフ(小)画像はなるべく簡易なデザイン、正方形の画像にすることをお勧めします。

nano & XRIE/XRIA - 改行

自動改行をしない設定であることを前提に作っています。
nano : ホムペ設定 > その他共通設定 > 改行を<br>に変換して表示をしない
XRIE/XRIA : 各編集ボックス直下の自動改行しないにチェック
に設定をお願いします。

nano & XRIE/XRIA - headとbody

レンタルスペースではheadとbodyを分離して記述する仕様のため、また外部ファイルを読み込むことができないので
<head></head>の中身
→HEAD・HTML詳細(nano)
→HEAD間編集(XRIE/XRIA)
<body></body>の中身
→◯◯レイアウト(nano)
→ページ編集(XRIE/XRIA)
に記述してください。
また、<link rel="stylesheet" type="text/css" href="ファイル名.css">は


                          <style>
              ここに配布css
              </style>

と置き換えてください。

nano & XRIE/XRIA - 後書き

後書きスペースを入れたい場合は、本文の中に直接タグを書き込んでください。デモページでは更にrightクラス、subtextクラスを付与して右寄せ・文字色変更をしています。

nano - 一万文字を超えるソースコード

nanoではHEAD・HTML詳細のHEAD内の文字数が一万文字を超えるとエラーを起こしてしまいます。
回避方法としては、

定型文への登録をし、HEAD内に定型文の独自タグを設置する
不要なコメントアウト・改行・スペースを削除する

があります。定型文への登録の方が手間もかからず、管理もしやすいので定型文への登録を推奨します。
定型文の登録は管理者画面トップページ > 定型文 > 定型文の追加から出来ます。#stamp_登録した定型文名#で表示します。

nano - 各フォームカスタム

名前変換


                          <form action="/yourID/novel/N/dream" method="post">
                <input type="text" name="DreamID[1]" value="苗字">
                <input type="text" name="DreamID[2]" value="名前">
                <input type="submit" name="set" value="変換">
                <input type="submit" name="clear" value="消去">
              </form>

valueの値は夢(ドリーム)小説設定>並び替えから確認出来ます。上から1,2,3...と割り振られます。

フォームメール

各タグの横に対応する独自タグを記載しています。です。

プレビュー有


                          <form action="/yourID/form/N/preview" method="post"><!-- #formStart# -->
                一行テキスト
                <input name="Item[1]" value="" type="text"><!-- #formInput1# -->
                複数行テキスト
                <textarea name="Item[2]"></textarea><!-- #formInput2# -->
                ラジオボタン
                <input name="Item[3]" value="選択肢名1" type="radio">選択肢名1<!-- #formInput3_1##formLabel3_1# -->
                <input name="Item[3]" value="選択肢名2" type="radio">選択肢名2<!-- #formInput3_2##formLabel3_2# -->
                <input name="Item[3]" value="選択肢名3" type="radio">選択肢名2<!-- #formInput3_3##formLabel3_3# -->
                チェックボックス
                <input name="Item[4][1]" value="選択肢名1" type="checkbox">選択肢名1<!-- #formInput4_1##formLabel4_1# -->
                <input name="Item[4][2]" value="選択肢名2" type="checkbox">選択肢名2<!-- #formInput4_2##formLabel4_2# -->
                <input name="Item[4][3]" value="選択肢名3" type="checkbox">選択肢名2<!-- #formInput4_3##formLabel4_3# -->
                プルダウン(セレクト)
                <select name="Item[5]"><!-- #formInput5# -->
                  <option value="選択肢名1">選択肢名1</option>
                  <option value="選択肢名2">選択肢名2</option>
                  <option value="選択肢名3">選択肢名3</option>
                </select>
                <input type="submit" value="送信"><!-- #formSubmit_送信# -->
              </form><!-- #formEnd# -->

プレビュー無


                          <form action="/yourID/form/N/posted" method="post"><!-- #formStart# -->
                一行テキスト
                <input name="Item[1]" value="" type="text"><!-- #formInput1# -->
                複数行テキスト
                <textarea name="Item[2]"></textarea><!-- #formInput2# -->
                ラジオボタン
                <input name="Item[3]" value="選択肢名1" type="radio">選択肢名1<!-- #formInput3_1##formLabel3_1# -->
                <input name="Item[3]" value="選択肢名2" type="radio">選択肢名2<!-- #formInput3_2##formLabel3_2# -->
                <input name="Item[3]" value="選択肢名3" type="radio">選択肢名2<!-- #formInput3_3##formLabel3_3# -->
                チェックボックス
                <input name="Item[4][1]" value="選択肢名1" type="checkbox">選択肢名1<!-- #formInput4_1##formLabel4_1# -->
                <input name="Item[4][2]" value="選択肢名2" type="checkbox">選択肢名2<!-- #formInput4_2##formLabel4_2# -->
                <input name="Item[4][3]" value="選択肢名3" type="checkbox">選択肢名2<!-- #formInput4_3##formLabel4_3# -->
                プルダウン(セレクト)
                <select name="Item[5]"><!-- #formInput5# -->
                  <option value="選択肢名1">選択肢名1</option>
                  <option value="選択肢名2">選択肢名2</option>
                  <option value="選択肢名3">選択肢名3</option>
                </select>
                <input type="submit" value="送信"><!-- #formSubmit_送信# -->
              </form><!-- #formEnd# -->

項目追加・編集の項目タイプと各タグの対応

自由入力一行 ⇔ <input name="Item[N]" value="" type="text">
自由入力(複数行) ⇔ <textarea name="Item[N]"></textarea>
選択肢(ﾗｼﾞｵﾎﾞﾀﾝ) ⇔ <input name="Item[N]" value="選択肢名" type="radio">選択肢名
選択肢(ﾁｪｯｸﾎﾞｯｸｽ) ⇔ <input name="Item[N][N']" value="選択肢名" type="checkbox">選択肢名
選択肢(ﾌﾟﾙﾀﾞｳﾝ) ⇔ <select name="Item[N]"><option value="選択肢名">選択肢名</option></select>

Item[N]の確認

項目並び替えから確認出来ます。上から1,2,3...と割り振られます。
checkboxの[N']は登録している選択肢の左から1,2,3...と割り振られます。

拍手

ボタンのみ


                          <form action="/yourID/clap/N/?ResultOrder=1" method="post">
                <input type="submit" value="拍手">
              </form>

一行テキストタイプ


                          <form action="/yourID/clap/N/?ResultOrder=1" method="post">
                <input type="text" name="Message" value="">
                <input type="submit" value="拍手">
              </form>

セレクトタイプ


                          <form action="/yourID/clap/N/?ResultOrder=1" method="post">
                <select name="Message">
                  <option>テキスト1</option>
                  <option>テキスト2</option>
                  <option>テキスト3</option>
                </select>
                <input type="submit" value="拍手"/>
              </form>

リンクタイプ


                          <a href="/yourID/clap/N/?ResultOrder=1">拍手</a>

アンケート


                          <form action="/yourID/enq/N/vote" method="post">
                <input type="radio" name="DataID" value="1">項目1
                <input type="radio" name="DataID" value="2">項目2
                投票理由:<input type="text" name="Reason">
                <input type="submit" value="投票">
              </form>

項目のinputのvalueは項目並び替えで確認出来ます。上から1,2,3...と割り振られます。

XRIE/XRIA - 各フォームカスタム

名前変換

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。


                          <form action="http://#id#.N.novel.d.xria.biz/?guid=on" method="post">
                <input type="text" name="n1" value="苗字">
                <input type="text" name="n2" value="名前">
                <input type="submit" value="変換">
                <input type="hidden" name="mode" value="set">
                <input type="hidden" name="page_pass" value="">
              </form>

valueの値は人物名自由設定から確認出来ます。上からn1,n2,n3...と割り振られます。

メールボックス

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。


                          <form action="http://#id#.N.mailbox.xria.biz/?guid=on" method="post">
                タイトル
                <input type="text" name="subject" value="">
                名前
                <input type="text" name="name" value="">
                サイトURL
                <input type="text" name="url" value="http://">
                メールアドレス
                <input type="text" name="email" value="">
                メッセージ
                <textarea cols="30" name="message"></textarea>
                <input type="submit" value="送信">
                <input type="hidden" name="mode" value="send">
                <input type="hidden" name="page_pass" value="">
              lt;/form>

拍手

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。

ボタンのみ


                          <form action="http://#id#.N.clap.xria.biz/?guid=on" method="post">
                <input type="submit" value="拍手">
                <input type="hidden" name="req" value="%request%">
              </form>

一行テキストタイプ


                          <form action="http://#id#.N.clap.xria.biz/?guid=on" method="post">
                <input type="text" name="msg">
                <input type="submit" value="拍手">
                <input type="hidden" name="mode" value="s">
                <input type="hidden" name="req" value="%request%">
              </form>

リンクタイプ


                          <a href="http://#id#.N.clap.xria.biz/?guid=on&req=%erequest%">拍手</a>

アンケート

actionのURLはxriaになっているのでXRIEユーザーの方はxrieに書き換えをお願いします。


                          <form action="http://#id#.N.enq.p.xria.biz/?guid=on" method="post">
                <input type="radio" name="t" value="N">項目1
                <input type="radio" name="t" value="N">項目2
                名前
                <input type="text" name="name">
                コメント
                <input type="text" name="message">
                <input type="submit" value="投票">
                <input type="hidden" name="page_pass" value="">
              </form>

投票項目のvalueは投票ページのソースコードから確認してください。
PCは右クリック→ページのソースを表示(ブラウザによって名称の違いがあります)、スマートフォンはスマホ向けWebページの検証を行う方法からご確認ください。

character list

material

sample text

font

code

special thanks

html

css

html

css

各パーツ

2カラム

見出しレベル2 type01

見出しレベル2 type02

見出しレベル2 type03

見出しレベル2 type04

見出しレベル3 type01

見出しレベル3 type02

見出しレベル3 type03

見出しレベル3 type04

見出しレベル4 type01

見出しレベル4 type02

見出しレベル4 type03

見出しレベル4 type04

見出しレベル5 type01

見出しレベル5 type02

見出しレベル5 type03

見出しレベル5 type04

見出しレベル6 type01

見出しレベル6 type02

見出しレベル6 type03

見出しレベル6 type04

リンク

太字

斜体

削除

重要

強調

マーク

ルビ

左横線

右横線

下線

マーカー風

ボタン風 type01

ボタン風 type02

ボタン風 type03

ボタン風 type04

透明

左揃え

中央揃え

右揃え

水平線 type01

水平線 type02

水平線 type03

水平線 type04

ボックス type01

ボックス type02

ボックス type03

ボックス type04

スクロールボックス type01

スクロールボックス type02

スクロールボックス type03

スクロールボックス type04

折りたたみボックス

コピーボックス

引用(短)

引用(長) type01

引用(長) type02

引用(長) type03

引用(長) type04

順序付きリスト - 横並び type01

順序付きリスト - 横並び type02

順序付きリスト - 横並び type03

順序付きリスト - 横並び type04

順序付きリスト - 縦並び type01

順序付きリスト - 縦並び type02

順序付きリスト - 縦並び type03

順序付きリスト - 縦並び type04

順序なしリスト - 横並び type01