@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
/*!
 * Template: 32-Polka dot v1.0.0 (https://klee.mypace.net/)
 * Copyright 2018 klee
 * Licensed under MIT (https://opensource.org/licenses/mit-license.php)
 */
/* ============================================================
   適用デバイス：すべて（xs,sm,md,lg）
   ============================================================ */
/* 適用対象：要素全体
   ============================================================ */
/* リセットCSS */
h1{font-weight: normal;}
nav ul{list-style:none;padding:0;margin: 0;}
ins, h1 a, a:hover{text-decoration: none;}

/* bodyなど */
body{line-height:1.7;color: #222;}

/* フォーム関連 */
input, select, textarea{vertical-align: middle;}
::-webkit-input-placeholder{color: #999;}
:-ms-input-placeholder{color: #999;}
::-moz-placeholder{color: #999;}
label{cursor: pointer;}
input, textarea{padding: 0.1em 0.3em;border-radius: 2px;margin: 0 7px 7px 0;}
input[type="text"], textarea{border: 1px solid;}
input[type="submit"]{cursor: pointer;padding: 0.1em 0.7em;border-radius: 10px;box-shadow: 1px 1px 1px #fff inset;}

/* リンク */
a{color: #02bbfd;}
/* 水平線 */
hr{border-top: 2px dotted #d3b18e;}
/* 重要性 */
strong{}
/* 追加要素 */
ins::after{content: "← new!";font-size:90%; background: #02bbfd;color: #fff; padding: 0 0.5em; border-radius: 8px;display: table-cell;transform: translate(1em);}

/* 適用対象：クラス名を付けた要素
   ============================================================ */
/* body,ヘッダー */
.site{background-size: 100px 100px;
background-color: #ffc926;
background-image: radial-gradient(#ffd556 20%, transparent 20%),
                  radial-gradient(#ffd556 20%, transparent 20%);
background-position: 0 0, 50px 50px;}
.site-title{text-align: center;}
.site-title a{font-family: 'Luckiest Guy', sans-serif;color: #fff;}
.shadow{text-shadow:  #000 2px 0px,  #000 -2px 0px,
#000 0px -2px, #000 0px 2px,
#000 2px 2px , #000 -2px 2px,
#000 2px -2px, #000 -2px -2px,
#000 1px 2px,  #000 -1px 2px,
#000 1px -2px, #000 -1px -2px,
#000 2px 1px,  #000 -2px 1px,
#000 2px -1px, #000 -2px -1px;}
.inner{background: #fffaea;border: 2px solid #ddbb00; border-radius: 40px;padding: 30px 15px;margin-bottom: 40px; box-shadow: 0 1px 0 2px #cda21f, 0 0 1px 1px #ce8c02 inset;}

/* 見出し */
.site-title a:link, site-title a:visited{font-size: 5.0rem;letter-spacing: 0.1em;}
.site main h2{font-size: 1.8rem;text-align: center;border-bottom: 2px solid #d3b18e;margin: 60px 0 40px;}
.site main h2.first{margin: 10px 0 40px;}
.site main h3{font-size: 1.5rem;}
.site main h3::before{content: "$D83D$DD39 "}

/* ナビゲーションメニュー */
.gnav{text-align: center;margin: -20px 0 20px;}
.gnav li {display: inline-block;padding: 5px 15px;}
.gnav li a{text-decoration: none;color: #fff;font-size: 1.7rem;}
.gnav li a:hover{color: #02bbfd;transition: color 0.2s;}

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

/* 展示リスト */
.list, .list-ss{list-style: none;padding: 0;}
.list li{color: #555;}
.list li span{font-size:90%;margin-right: 1em;}
.list li a{margin-right: 1em;}
.list-caption dd{margin-left: 1.5em;color: #555;}
.list-inline{list-style: none;padding: 0;}
.list-inline li{display: inline;border-right: 1px solid #ccc;padding-right: 7px;margin-right: 7px;}
.list-inline li:last-child{border: none;}

/* フォーム */
/* .comment{width: 90%;} */
.btn, .btn-inline{background: transparent;border: 1px solid;}
.btn-color{background: #02bbfd;color: #fff;border: 1px solid #2d7ac0;}
.btn-inline{display: block;}
.hensin{margin: 5px 0;list-style:none;padding:0;}
.hensin li{display: inline;margin-right: 1.5em;}
.pati{margin-bottom: 20px;}
.pati textarea{background: transparent;border-radius: 0;border: none;border-bottom: 1px solid;}
.pati textarea:focus{outline: 0;}
.pati .btn{border-radius: 4px;margin-top: 5px;font-size: 90%;}
.kansou label{margin-right: 1.2em;}

/* 折り畳みボックス */
.acMenu dt{cursor:pointer;background: #02bbfd;color: #fff;display: inline-block;padding: 0.1em 0.7em;border-radius: 10px;}
.acMenu dt span{position: absolute;margin-left: 1em;color: #02bbfd;}
.acMenu dd{display:none;padding: 5px 0;margin-left: 0.5em;}
.acMenu div, .hide{display:none;}

/* リンクページ */
.link-bn{margin: 10px 0;}
.link-bn dd{margin-left: 10px;padding: 5px 10px;border-left: 2px dotted #d3b18e;}
.link-text a{margin-right: 1em;}
.link-inline {padding-left: 0;}
.link-inline li{display: inline;margin-right: 10px;}

/* 小説ページ */
.work{background: #fffaea;}

h1.novel{text-align: center;font-size: 2.1rem;margin: 2em 0;}
.novel{font-size: 1.6rem;}
.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: 1px solid #d3b18e;padding: 10px;
background-size: 40px 40px;
background-image: radial-gradient(rgba(255, 213, 86, 0.2) 20%, transparent 20%),
                  radial-gradient(rgba(255, 213, 86, 0.2) 20%, transparent 20%);
background-position: 0 0, 20px 20px;}
/* 著作権表示 */
.copy{text-align: center;margin-top: -20px;}
.copy a{color: #222;}

/* ============================================================
   適用デバイス：タブレット(sm)・デスクトップ(md)・大画面デスクトップ(lg)
   ============================================================ */
@media all and (min-width: 768px) {
.site-title{margin-top: 40px;}
.gnav{margin: -20px 0 30px;}
.inner{padding: 30px;}
.novel main{font-size: 1.7rem;}
.link-bn dt{float: left;}
.link-bn dd{margin-left: 210px;padding: 0 0 0 10px;}
.btn-inline{display: inline;}
}

/* ============================================================
   以下はボタンホバー時のアニメーション設定とライセンス表示です
   ============================================================ */
/*!
 * Hover.css (http://ianlunn.github.io/Hover/)
 * Version: 2.0.2
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014. Generated with Sass.
 */
/* Wobble Top */
@-webkit-keyframes hvr-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes hvr-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

.hvr-wobble-top {
  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-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active {
  -webkit-animation-name: hvr-wobble-top;
  animation-name: hvr-wobble-top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}