@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Fredoka+One);
@import url('https://fonts.googleapis.com/css?family=Material+Icons+Round');
/*!
 * Template: 27-pastel v1.0.0 (https://klee.mypace.net/)
 * Copyright 2017 klee
 * Licensed under MIT (https://opensource.org/licenses/mit-license.php)

 * 再配布用のカスタマイズ　kopfkino(https://kopf-kino.vercel.app)
 * カスタムプロパティの設定
 * 素材サイトが消えていたため、背景色の設定とinner部分を変更
 * その他、追加CSSの記述あり
 */
/* ============================================================
   適用デバイス：すべて（xs,sm,md,lg）
   ============================================================ */
/* 適用対象：要素全体
   ============================================================ */

 /* 色とフォントの定義 */
:root{
   --bg-color:#fdc196;
   /* ↑背景と、h2要素 */
   --text-color:#888;
   --link-color:#fdc196;
   /* ↑ほんとにリンクだけ */
   --hover-color:#436ead;
   /* h3やボタンの色もここ */
   --color-main:#edd392;
   /* ↑その他ピンク色はここ。 */
   --color-white:#fff;
   --color-gray1:#999;
   --color-gray2:#bbb;
   --color-gray3:#f1f1f1;
   --novel-bg:#f4f4f4;
   --novel-text:#666;
   --font-main: "Hiragino Kaku Gothic ProN","Meiryo","Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-eigo:'Fredoka One', cursive;
   --font-novel:YuMincho, '游明朝',serif;
}
   
/* リセットCSS */
h1{font-weight: normal;}
nav ul{list-style:none;padding:0;}
nav ul, dt, dd{margin: 0;}
ins{text-decoration: none;}


/* bodyなど */
body{
   line-height:1.7;
   background: var(--bg-color);
   color: var(--text-color);
   font-family: var(--font-main);
   margin: 20px 0;
   background:linear-gradient(to right, var(--bg-color), var(--hover-color)) ;
}
main section{
   margin: 20px 0;
}
main section section{
   margin: 30px 0;
}

/* フォーム関連 */
input, select, textarea{
   vertical-align:middle;
}
::-webkit-input-placeholder{
   color: var(--color-gray1);
}
:-ms-input-placeholder{
   color: var(--color-gray1);
}
::-moz-placeholder{
   color: var(--color-gray1);
}
label{
   cursor: pointer;
}

input, textarea{
   padding: 0.3em;
   border-radius: 2px;
   margin: 0 5px 5px 0;
}
input[type="text"], textarea{
   border: 1px solid var(--color-gray2);
}
input[type="submit"]{
   cursor: pointer;
}

/* リンク */
a{
   text-decoration: none;
   color: var(--link-color);
   border-bottom: 2px dotted transparent;
   transition: border-color 0.2s;
}
a:hover{
   border-bottom: 2px dotted var(--hover-color);
   transition: border-color 0.1s;
}

/* 水平線 */
hr{
   border-top: 1px dotted;
}

/* 重要性 */
strong{
   color: var(--color-main);
}

/* 追加要素 */
ins::after{
   content: "new";
   color: var(--hover-color);
   border: 1px solid;
   border-radius: 2px; 
   margin-left: 10px;
   padding: 0 5px;
}

/* 適用対象：クラス名を付けた要素
   ============================================================ */

.inner{
   position: relative;
   background: var(--color-white);
   margin: 30px -15px;
   padding: 20px;
   border-radius: 20px;
}

/* 見出し */
.site-title{
   text-align: center;
   margin: 0;
}
.site-title a{
   font-size: 2.8rem;
   font-family: var(--font-eigo);
}
.site-title a:hover{
   color: var(--color-main);
}
.site main h2{
   color: var(--bg-color);
   font-family: var(--font-eigo);
   font-size: 1.9rem;
}
.site main h3{
   color: var(--hover-color);
   font-size: 1.4rem;
   margin: 5px auto;
}

/* 見出し＆ナビゲーションメニュー */
.site-title a, .gnav li a{
   border: none;
   color: var(--bg-color);}

/* ナビゲーションメニュー */
.gnav{
   text-align: center;
   margin-top: 10px;
}
.gnav li {
   display: inline;
   padding: 0 10px;
}
.gnav li a{
   font-family: var(--font-eigo);
   font-size: 1.8rem;
}

/* hover時のアニメーション */
.gnav li a{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.gnav li a:hover{
   -webkit-transform: translateY(-6px); 
   transform: translateY(-6px);
}

/* 展示リスト */
.list, .list-ss{
   list-style: none;padding: 0;
}
.list li{
   color: var(--color-gray1);
}
.list li a{
   margin-right: 15px;
}
.list-caption dd{
   padding-left: 10px;
}
.list-slash dt {
   float: left;
   width: 8em;
   height:auto;
}
.list-slash dd {
   margin: 0 0 5px 8em;
   padding-left: 1em;
}
.list-ss li{
   display: inline;
   border-right: 1px solid var(--color-gray2);
   padding-right: 7px;
   margin-right: 7px;
}
.list-ss li:last-child{
   border: none;
}

/* フォーム */
.bottom{
   vertical-align: bottom;
}
.comment{
   width: 80%;
   max-width: 500px;
}
.btn, .btn-inline{
   background: transparent;
   border: 1px solid;
}
.btn-color{
   background: var(--hover-color);
   border: 1px solid var(--hover-color);
   color: var(--color-white);
   border: none;
}
.btn-color:hover{
   opacity: 0.8;
}
.btn-inline{
   display: block;
}
.hensin{
   margin: 5px 0;
   list-style:none;
   padding:0;
}
.hensin li{
   display: inline;
   margin-right: 1.5em;
}
.kansou label{
   padding-right: 1em;
}

/* リンクページ */
.link-bn{
   margin: 10px 0;
}
.link-bn dd{
   margin-left: 10px;
   padding: 5px 10px;
   border-left: 1px dotted var(--color-gray2);
}
.link-text{
   list-style: circle;
}
.link-text a{
   margin-right: 1em;
}
.link-inline {
   padding-left: 0;
}
.link-inline li{
   display: inline;
   margin-right: 10px;
}

/* 折り畳みボックス */
.acMenu dt{
   cursor:pointer;
   border-bottom: 3px double var(--color-main);
   display: inline-block;
}
.acMenu dd{
   display:none;
   margin-left: 10px;
   padding: 10px;
   border-left: 1px dotted var(--color-main);
}

/* 展示ページの背景色 */
.work{
   background: var(--novel-bg);
}

/* 小説ページ */
h1.novel{
   font-family:var(--font-novel);
   text-align: center;
   font-size: 2.2rem;
}
.novel{
   font-size: 1.5rem;
   line-height: 2;
   color: var(--novel-text);
}
.afterword{
   margin-top: 120px;
}

/* 画像展示ページ */
.img {
   text-align: center;
}
.img img{
   max-width: 100%;
   height: auto;
   margin: 60px auto;
}

/* ページ下部のメニュー */
.local-nav {
   text-align: center;
   margin: 20px auto 0;
   padding: 0;
}
.local-nav li{
   display: inline;
   padding: 0 30px;
}

/* 装飾ボックス */
.box{
   border: 5px double var(--bg-color);
   padding: 8px;
   margin:7px;
}

/* 著作権表示 */
.copy, .copy a{
   text-align: center;
   color: var(--text-color);
}
.copy a:hover{
   border-bottom: 2px dotted var(--color-gray2);
}

/* ============================================================
   適用デバイス：タブレット(sm)・デスクトップ(md)・大画面デスクトップ(lg)
   ============================================================ */
@media all and (min-width: 768px) {
.link-bn dt{float: left;}
.link-bn dd{margin-left: 210px;padding: 0 0 0 10px;}
.btn-inline{display: inline;}
}

/* ここから自作ではなく調べてもってきたCSS */
/* テキストエリア伸縮用のCSS */
.grow-wrap {
   /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
   display: grid;
 }
 .grow-wrap::after {
   /* Note the weird space! Needed to preventy jumpy behavior */
   content: attr(data-replicated-value) " ";
 
   /* This is how textarea text behaves */
   white-space: pre-wrap;
 
   /* Hidden from view, clicks, and screen readers */
   visibility: hidden;
 }
 .grow-wrap > textarea {
   /* You could leave this, but after a user resizes, then it ruins the auto sizing */
   resize: none;
 
   /* Firefox shows scrollbar on growth, you can hide like this. */
   overflow: hidden;
 }
 .grow-wrap > textarea,
 .grow-wrap::after {
 
   /* Place on top of each other */
   grid-area: 1 / 1 / 2 / 2;
 }


 /* ここから再配布にあたっての追加CSS */

.text-center{
   text-align: center;
}

.text-right{
   text-align: right;
}

.text-left{
   text-align: left;
}

.icon-btn{
   font-size:1.8rem;
   display: inline-flex;
   vertical-align: middle;
}

.shiori-item:before{
   display: inline-flex;
   vertical-align: middle;
   font-family: 'Material Icons Round';
   content:"\e98b";
   margin-right: 2px;
}

 h2{
   color: var(--bg-color);
   font-family: var(--font-eigo);
   font-size: 1.9rem;
}

 h3{
   color: var(--hover-color);
   font-size: 1.4rem;
   margin: 5px auto;
}

.deco-h3{
   color: var(--hover-color);
   font-size: 1.4rem;
   margin: 5px auto;
}



/* ulタグで定義リスト */
.bnlink {
   list-style: none;
   margin: 10px 0;
   padding: 0;
 }

 
 .bnlink li:nth-child(even) {
   margin-left: 10px;
   padding: 5px 10px;
   border-left: 1px dotted var(--color-gray2);
 }

 .dlcap{
   margin: 0;
   padding: 0;
   list-style: none;
 }
  
 .dlcap li:nth-child(even) {
   margin-left: 1em;
 }

/* リンク */
 .listdeco-bnlink {
   list-style: none;
   margin: 10px 0;
   padding: 0;
 }

 
 .listdeco-bnlink li:nth-child(even) {
   margin-left: 10px;
   padding: 5px 10px;
   border-left: 1px dotted var(--color-gray2);
 }

 .listdeco-dlcap{
   margin: 0;
   padding: 0;
   list-style: none;
 }
  
 .listdeco-dlcap li:nth-child(even) {
   margin-left: 1em;
 }

 .listdeco-linktext{
   list-style: circle;
}
.listdeco-linktext a{
   margin-right: 1em;
}
.listdeco-linkinline {
   padding-left: 0;
}
.listdeco-linkinline li{
   display: inline;
   margin-right: 10px;
}
 

/* ============================================================
   適用デバイス：タブレット(sm)・デスクトップ(md)・大画面デスクトップ(lg)
   ============================================================ */
   @media all and (min-width: 768px) {
      .bnlink li:nth-child(odd){float: left;}
      .bnlink li:nth-child(even){margin-left: 210px;padding: 0 0 0 10px;}
      .btn-inline{display: inline;}
      .bnlink li:nth-child(odd){float: left;}
      .bnlink li:nth-child(even){margin-left: 220px;padding: 0 0 0 10px;}
      }
 
 

/* ブログスキン用 */

.blogbox{
   border: 5px double var(--hover-color);
   padding: 8px;
   margin:7px;
}

.blogbox hr{
   margin: 5px 0 10px 0;
}

.blog_tag{
   text-align: right;
   color:var(--color-gray1);
   margin-top:1em;
}
.blog_info{
   text-align: right;
   color:var(--color-gray1);
   margin-top:1em;
}

.blog_info::before{
   display: inline-flex;
   vertical-align: middle;
   font-family: 'Material Icons Round';
   content:"\e3c9";
   color: var(--color-gray1);
   margin-right: 2px;
}

/* 作品傾向アイコン 友情、恋愛、世界観、レゾ*/
.fs::before{
   display: inline-flex;
   vertical-align: middle;
   content:"\ebcb";
   margin-left:5px;
   color: #ffd000;
   font-family:"Material Icons Round";
   font-size:2.2rem;
 }
 
 
 .love::before{
   display: inline-flex;
   vertical-align: middle;
   content:"\e87d";
   margin-left:5px;
   color: #ffa399;
   font-family:"Material Icons Round";
   font-size:2.2rem;
 }
 

 .wl::before{
   display: inline-flex;
   vertical-align: middle;
   content:"\e80b";
   margin-left:5px;
   color: #8ae68a;
   font-family:"Material Icons Round";
   font-size:2.2rem;
 }
  
 .reso::before{
   display: inline-flex;
   vertical-align: middle;
   content:"\f8d8";
   margin-left:5px;
   color: #2ee6d6;
   font-family:"Material Icons Round";
   font-size:2.2rem;
 }
 
/* リアルタイムスキン */
  .send {
   width: 100%;
   margin: 10px 0;
   overflow: hidden;
}
 
 .send .faceicon {
   float: left;
   margin-right: -50px;
   margin-left: 5px;
   width: 40px;
}
 
 .send .faceicon img{
   border-radius: 50%;
}
 
 .name{
   font-weight:bold;
   margin: 0 0 0 50px;
}
 
 .send .chatting {
   width: 100%;
   text-align: left;
}
 .says {
   display: inline-block;
   position: relative; 
   margin:0 0 5px 55px;
   padding: 10px;
   max-width: 250px;
   border-radius: 12px;
   background: var(--color-gray3);
   text-align: left;
}
 
 
 .says:after {
   content: "";
   display: inline-block;
   position: absolute;
   top: 3px; 
   left: -19px;
   border: 8px solid transparent;
   border-right: 18px solid var(--color-gray3);
   -webkit-transform: rotate(30deg);
   transform: rotate(35deg);
}
 .says p {
   margin: 0;
   padding: 0;
}
 
 .says p:last-child{
   position: absolute;
   right: -4.5em;
   text-align: left;
   bottom: 4px;
   display: inline-block;
   width: 4em;
   font-size: 0.9em;
   line-height: 1em;
}


/* 更新履歴用 */
.update dt{
   float: left;
}
.update dt::after{
   content: "-";
   margin:0 0.5em;
}
.update dd{
   margin-left: 5em;
}

/* てがろぐ上書きcss */

	/* Q:引用(Quote) */
	.decorationQ {
		font-size: 0.95em;				/* 文字サイズ */
		display: block;					/* ※Ver 2.2.0以降必須の記述 */
      position:relative;
      background:var(--bg-color);
      border-radius:10px;
      padding:20px;
	}
   
   .decorationQ::before{
   position:absolute;
   left:45%;
   top:-24px;
   background-color:var(--color-white);
   color:var(--color-gray1);
   border:2px solid var(--bg-color);
   font-family:"Material Icons Round";
   content:"\e244";
   box-sizing:border-box;
   line-height:0.8em;
   padding-top:12px;
   text-align:center;
   width:48px;
   height:48px;
   font-size:2.4em;
   border-radius:24px;
}

	/* -------------------- */
	/* ▼新着投稿リスト区画 */
	/* -------------------- */
	.latestpostarea {
		margin: 0 0 1em 0;					/* 外側の余白量 */
		padding: 0 0 1em 0;					/* 内側の余白量 */
		border-bottom: 1px dashed var(--color-gr);	/* 下線 */
	}
	/* ▼見出し */
	.latestpostarea .cornertitle {
		margin: 0;							/* 外側の余白量 */
		font-weight: bold;					/* 太字 */
		color: var(--hover-color);						/* 文字色 */
		text-shadow: 1px 1px 1px var(--color-wh);		/* 文字の影 */
	}
		/* ▽新着投稿グリスト */
		.latestpostlist {
			margin: 0.5em 0;			/* 外側の余白量 */
			padding: 0.6em 0.5em 0.3em 1.7em;		/* 内側の余白量 */
			background-color: var(--color-white);	/* 背景色 */
			border-radius: 0.5em;	/* 角丸 */
			line-height: 1.25;		/* 行の高さ */
		}
			/* 各項目 */
			.latestpostlist li {
				margin: 0.75em 0;
			}
			/* タイトルリンク以外の項目 */
			.latestpostlist span {
				display: inline-block;
				font-size: 0.8em;
			}
				.latestpostlist .postdate { color: var(--color-gray1); }	/* 投稿日付 */
				.latestpostlist .posttime { color: var(--color-gray1); }	/* 投稿時刻 */
				.latestpostlist .postid   { color: var(--color-gray1); }		/* 投稿番号 */
				.latestpostlist .length   { color: var(--color-gray1); }	/* 本文文字数 */

           
            .passkeyform {
               display: inline-block;
               margin: 0;
            }
            
               /* ▼鍵違いエラーの表示 */
               .passkeyerror {
                  display: block;
                  color: var(--color-wh);
                  background-color: crimson;
                  font-weight: bold;
                  line-height: 1;
                  margin: 0 0 0.5em 0;
                  padding: 0.33em 0.25em;
               }
            

            
                  /* ▼入力欄前のガイド文 */
                  .passkeyguide {
                     margin-right: 0.1em;
                  }
                  /* ▼鍵入力欄 */
                  .passkeyinput {
                     width: 10em;
                     margin: 0 0.25em 3px 0;
                  }
                  /* ▼送信ボタン */
                  .passkeysubmit {
                        background: var(--hover-color);
                        border: 1px solid var(--hover-color);
                        color: var(--color-white);
                        border: none;
                  }

                  .passkeysubmit:hover{
                     opacity: 0.8;
                  }

                  
/* ページネーション　デザイン */

.pagenavi{
   text-align: center;
}

.pagenumlink,.nextlink,.prevlink {
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1rem;
  position: relative;
  background: var(--color-main);
  border: 1px solid var(--color-main);
  box-sizing: border-box;
  padding: 0 40px 0 40px;
  color: var(--color-white);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}

.pagenumlink:hover {
  background: var(--color-white);
  color: var(--color-main);
}

.nextlink:hover {
   background: var(--color-white);
   color: var(--color-main);
 }

.prevlink:hover {
   background: var(--color-white);
   color: var(--color-main);
 }

.nextlink,.prevlink{
   margin-right:2rem;
}

/* =========================
   ariake page only
========================= */

.ariake {
    --color: #4c6cb3;
    --white: #fff;
    --black: #000;
    --font: "Hina Mincho", serif;

    background: var(--color);
    line-height: 1.7;
    letter-spacing: 0.1em;
    font-size: 13px;
    font-family: "EB Garamond", "Noto Serif JP", serif;
    color: var(--white);
}

/* reset */
.ariake * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}

/* responsive */
@media (min-width: 768px) {
    .ariake { font-size: 14px; }
}
@media (min-width: 1024px) {
    .ariake { font-size: 15px; }
}

/* link */
.ariake a,
.ariake a:visited {
    font-family: var(--font);
    color: var(--white);
    transition: .5s;
}

/* header */
.ariake-header {
    position: relative;
    margin: 5em auto -6.5em;
    width: 300px;
    height: 300px;
    background-color: rgba(255,255,255,0.2);
}

/* title */
.ariake-title {
    writing-mode: vertical-rl;
    letter-spacing: 0.5em;
    font-family: var(--font);
    font-size: 2em;
    text-align: center;
}

/* main */
.ariake-main {
    width: 80%;
    max-width: 600px;
    margin: 3em auto;
}

.ariake-section {
    margin: 3em auto;
}

.ariake-section h2 {
    font-family: var(--font);
    font-size: 1.8em;
}

.ariake-section ul {
    margin-left: 1em;
    padding-left: 1em;
    border-left: thin solid var(--white);
    list-style: none;
}

/* 横並び */
.ariake-section ul.yoko li {
    display: inline-block;
    margin-right: 1em;
}

/* ===== ariake: center fixes ===== */

/* H1を中央に固定（縦書きでも安定） */
body.ariake .ariake-title{
  display: block;
  width: fit-content;      /* 中身の幅だけにする */
  margin: 0 auto;          /* 中央寄せ */
  text-align: center;      /* 念のため */
}

/* main 自体は中央に */
body.ariake .ariake-main{
  margin-left: auto;
  margin-right: auto;
}

/* セクション内の見出し・文章は元どおり左寄せ（必要なら） */
body.ariake .ariake-section{
  text-align: left;
}

/* リストを中央寄せ（リスト全体を中央に置く） */
body.ariake .ariake-section ul,
body.ariake .ariake-section ol{
  width: fit-content;      /* リストの横幅を内容に合わせる */
  margin: 0.5em auto;      /* 中央寄せ */
  padding-left: 0;         /* 左のデフォルト余白を消す */
}

/* 元の「縦線」デザインを維持したい場合（左線＋インデント） */
body.ariake .ariake-section ul{
  padding-left: 1em;
  border-left: thin solid var(--white);
  list-style: none;
}

/* olは番号付きのまま整える（必要なら） */
body.ariake .ariake-section ol{
  list-style-position: inside;
  list-style-type: decimal-leading-zero;
  padding-left: 0;
}

/* 横並びリスト(yoko)は中央に揃える */
body.ariake .ariake-section ul.yoko{
  text-align: center;
  width: 100%;
  border-left: none;       /* 横並びのとき縦線が邪魔なら消す */
  padding-left: 0;
}
body.ariake .ariake-section ul.yoko li{
  display: inline-block;
  margin: 0 1em 0 0;
}

/* ===== ariake: index list (vertical, centered) ===== */

body.ariake .tegalog ul.ariake-index{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 1em 0 !important;

  display: flex;
  flex-direction: column;
  align-items: center; /* 全体を中央 */
  gap: 0.6em;          /* 縦間隔 */
}

body.ariake .tegalog ul.ariake-index > li.onelogbox{
  margin: 0 !important;
  text-align: center;
}

body.ariake .tegalog ul.ariake-index > li.onelogbox > a{
  display: inline-block;
}

body.ariake .tegalog ul.ariake-index > li.onelogbox{
  float: none !important;
  position: static !important;
}