@charset "UTF-8";
@import url("html5reset-1.6.1.css");

/* ↓レイアウト↓ */

*{
    line-height:150%;
}

.pc { display:inline; }
.sp { display:none; }

body{
    color:#333;
    background-image: linear-gradient(#eee 0 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin:0px;
    padding:0px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
}

.base{
    margin:0 auto;
    paddding:0px;
    max-width:1300px;
    background:#fff;
}

.pcheader{
    margin:0px 0px 0px 0px;
    padding:40px 10px;
    float:left;
    width:260px;
    text-align:center;
    position:fixed;
    background-image: linear-gradient(#eee 0 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    height:100%;
}

.spheader{
    padding:20px 0px 0px 0px;
    margin:0px auto 20px auto;
    text-align:center;
    background:#eee;
}

.footer{
    padding:40px 0px 20px 0px;
    text-align:center;
    background:#eee;
    border-radius:0px;
    margin:20px 0px 0px 0px;
}

.work{
    padding:20px 0px 30px 0px;
    margin:0px auto;
}

.novel{
    padding:20px 100px 30px 100px;
    margin:0px;
    max-width:1500px;
    margin:0 auto;
}

.menu{
    margin:0px auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    max-width:100%;
    padding:0px 0px 20px 0px;
    top:0;
    z-index:100;
}

.colum{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    margin:25px auto 20px auto;
    text-align:center;
}

.gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    margin:0px 10px;
}

.box{
    margin:0px 0px 0px 280px;
}

img
{
	max-width:100% ;
	height:auto ;
}


/* ↓タグ↓ */

h1{
    font-size:180%;
    font-weight:bold;
    text-align:center;
    margin:0px 30px;
    letter-spacing:4px;
    font-family:serif;
    padding:0px 15px;
    line-height:100%;
    background-image: linear-gradient(#EA664B 0 100%);
    background-repeat: no-repeat;
    background-size: 0px 0px;
    background-position: center left;
}

h2{
    font-size:75%;
    font-weight:bold;
    margin:0px auto 30px auto;
    letter-spacing:2px;
}

h3{
    font-size:150%;
    font-weight:bold;
    text-align:center;
    margin:0px 30px 20px 30px;
    letter-spacing:3px;
    font-family:serif;
    padding:15px;
}

#cottonrose h3{
   color:#FAA9B9;
}

#althea h3{
    color:#EA664B;
}

h4{
    font-size:115%;
    margin:0px 30px 30px 30px;
    padding:20px 0px 12px 0px;
    text-align:center;
    line-height:100%;
    font-weight:bold;
    font-family:sans-serif;
    background-image: linear-gradient(#eee 0 100%);
    background-repeat: no-repeat;
    background-size: 20% 5px;
    background-position: 50% 100%;
    letter-spacing:1px;
}

h5{
    font-size:105%;
    font-weight:bold;
    margin:15px 20px 5px 20px;
    letter-spacing:1px;
    text-align:left;
    font-family:sans-serif;
}

h5 span{
    display:block;
    font-size:85%;
    padding:2px 0px 0px 0px;
}

p{
    text-align:left;
    padding:0px;
}

em{
   font-style:normal;
   font-weight:bold;
   border-radius:2px;
   padding:1px 5px;
   margin:0px 3px;
   color:#fff;
   letter-spacing:1px;
}

#cottonrose em{
   border:1px #FAA9B9 solid;
   background:#FAA9B9;
}

#althea em{
   border:1px #EA664B solid;
   background:#EA664B;
}

strong{
    background-color:#78643A;
    font-weight:normal;
    color:#fff;
}

small{
    font-size:80%;
}

big{
    font-size:130%;
}

ins{
    background:#fff;
}

i{
    font-style:italic;
}

a:link{
    color:#000;
    text-decoration:none;
}

a:visited{
    color:#000;
    text-decoration:none;
}

a:hover{
    opacity: 0.6;
    text-decoration:none;
}

blockquote{
    position:relative;
    padding:10px 10px 10px 50px;
    box-sizing border-box;
    background:#fafafa;
    border-left:6px double #ccc;
    box-shadow:1px 1px 3px -1px #888;
    margin:15px;
    font-size:90%;
}

blockquote:before{
    display:inline-block;
    position:absolute;
    top:15px;
    left:15px;
    vertical-align: middle;
    content:'\00275e';
    color:#ccc;
    font-size:30px;
}

li{
    padding:5px;
    margin:0px 10px;
}

ul{
    margin:10px 0px;
}

ol{
    margin:10px 0px;
}

dl{
    padding-left:0px;
    margin:10px 0px;
}

dt{
    padding-left:5px;
}

dd{
    padding-left:10px;
}

dd img{
    padding-top:5px;
}

address{
    font-size:70%;
    font-style:normal;
    font-weight:normal;
    color:#999;
    letter-spacing:1px;
}


/* ↓classタグ↓ */

.breadlist{
    margin:0px auto auto;
    padding:10px 50px 0px 50px;
    font-family:sans-serif;
    color:#666;
    list-style:none;
    line-height:100%;
    text-align:right;
    border-top:solid 10px #eee;
    letter-spacing:1px;
}

.breadlist li{
    display: inline-block;
    font-size:65%;
    text-align:center;
    margin:0px 0px;
    padding:3px;
    line-height:100%;
    font-family:sans-serif;
}

.novelcover{
    padding:0px;
    text-align:right;
    width:50%;
}

.novelcover img{
    border:3px solid #eee;
    width:120px;
    border-radius:10px;
}

.novelmain{
    padding:0px 15% 0px 10px;
    text-align:left;
    width:80%;
}

.aboutbox{
    margin:0px auto;
    padding:0px;
    text-align:center;
    max-width:70%;
}

.shortnovelbox{
    margin:20px auto;
    padding:15px 60px 0px 60px;
    text-align:center;
    max-width:600px;
}

.shortnovelbox h5{
    margin:0px 5px 0px 5px;
    padding:10px 15px 5px 15px;
}

.emoji{
    margin:5px;
    padding:0px 0px;
    text-align:center;
    width:13%;
}

.emoji img{
    width:64px;
}

.list1{
    list-style:none;
}

.list1 li{
    display:block;
    padding:20px 0px;
    margin:0px 0px -2px 0px;
    width:150px;
    font-family:sans-serif;
    letter-spacing:2px;
    line-height:100%;
    font-size:92%;
    font-weight:bold;
}

.list1 li.current {
    background-repeat: no-repeat;
    background-size: 85% 60%;
    background-position: 50% 50%;
    color:#fff;
}

#cottonrose .list1 li.current {
    background-image: linear-gradient(#FAA9B9 0 100%);
}

#althea .list1 li.current {
    background-image: linear-gradient(#EA664B 0 100%);
}

.list1 li:hover{
    opacity:0.7;
}

.hr2{
    margin:5px 0px;
    height:30px;
    border-width:0px;
}

.hr3{
    margin:5px 0px;
    height:70px;
    border-width:0px;
}

.p1{
    padding:0px 10px 20px 10px;
    margin:0px;
    font-size:90%;
    line-height:170%;
    text-align:center;
}

.p2{
    padding:15px 20px 0px 20px;
    margin:0px;
    font-size:70%;
    line-height:170%;
    text-align:right;
}

.p3{
    padding:20px;
    margin:0px auto 20px auto;
    font-size:100%;
    line-height:250%;
    background:#eee;
    color:#000;
    border-radius:2px;
    text-align:center;
    font-weight:bold;
    letter-spacing:2px;
    width:80%;
}

.p4{
    padding:20px 10px 20px 10px;
    margin:0px;
    font-size:85%;
    line-height:170%;
    text-align:center;
}

.novelcaption{
    padding:5px 20px 0px 20px;
    margin:0px;
    font-size:80%;
    line-height:180%;
    text-align:left;
    color:#555;
}

.linkbutton1{
    width:120px;
    color:#fff;
    text-align:center;
    border-radius:5px;
    margin:10px 0px 0px 20px;
    padding:3px 5px;
    font-weight:bold;
    font-size:85%;
    letter-spacing:4px;
}

#cottonrose .linkbutton1{
    background:#FAA9B9;
}

#althea .linkbutton1{
    background:#EA664B;
}

.poem{
    margin:30px 20px;
    padding:15px;
    font-size:110%;
    text-align:left;
    line-height:160%;
    font-family:serif;
    border-bottom:1px solid #eee;
}

.poem span{
    display:block;
    font-size:65%;
    margin-top:2px;
    color:#999;
    font-family:sans-serif;
}

.dl2{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    margin:0px;
    padding:0px;
}

.dt2{
    font-size:87%;
    margin:6px 0px;
    text-align:right;
    font-weight:bold;
    letter-spacing:1px;
    padding:0px 15px;
    width: 20%;
    border-right:4px solid #eee;
}

.dd2{
    font-size:87%;
    margin:6px 0px;
    padding:0px;
    text-align:left;
    width: 70%;
}

.author{
    padding:0px 0px 5px 0px;
    text-align:right;
    width:80%;
}

.author img{
    width:170px;
    border-radius:30px;
}

.dl3{
    margin:0px;
    padding:0px 20px;
}

.dt3{
    font-size:87%;
    margin:6px 0px;
    text-align:left;
    font-weight:bold;
    letter-spacing:1px;
    padding:0px;
    background-image: linear-gradient(#eee 0 100%);
    background-repeat: no-repeat;
    background-size: 50px 5px;
    background-position: 0% 100%;
}

.dd3{
    font-size:87%;
    margin:6px 0px;
    padding:0px 0px 10px 0px;
    text-align:left;
}

.dlqa{
    padding:10px 25px 30px 25px;
}

.dtqa{
    font-size:90%;
    text-align:left;
    font-weight:bold;
    padding:3px 15px;
}

#cottonrose .dtqa{
    border-left:3px solid #FAA9B9;
}

#althea .dtqa{
    border-left:3px solid #EA664B;
}

.ddqa{
    font-size:85%;
    border-left:3px solid #eee;
    margin:0px 0px 15px 0px;
    padding:5px 15px;
    line-height:190%;
    text-align:left;
    white-space:pre-wrap;
}

.ul1{
    font-size:85%;
    padding:0;
    margin:0;
    line-height:1.2;
    list-style-type:square;
}

.ol1{
    padding:0;
    margin:10px;
    line-height:1.9;
}

.pagetop{
    position: fixed;
    bottom: 10px;
    right: 14px;
}
 
.pagetop a{
    display: block;
    text-decoration: none;
}

.pagetop img{
    border-radius: 30px;
}

.linklist{
    list-style:none;
    margin:0px auto;
    line-height:100%;
    padding:0px 60px;
    text-align:center;
}

.linklist li{
    display: inline-block;
    font-size:85%;
    text-align:center;
    margin:5px 15px;
    padding:7px 10px;
    line-height:100%;
    color:#fff;
    width:120px;
    font-weight:bold;
    border-radius:5px;
    letter-spacing:3px;
}

#cottonrose .linklist li{
    background:#FAA9B9;
}

#althea .linklist li{
    background:#EA664B;
}

.linklist2{
    list-style:none;
    margin:0px auto;
    line-height:100%;
    padding:10px 40px;
    text-align:center;
}

.linklist2 li{
    display: inline-block;
    font-size:85%;
    text-align:center;
    margin:5px 15px;
    padding:7px 15px;
    line-height:170%;
    color:#fff;
    width:60%;
    font-weight:bold;
    border-radius:5px;
    letter-spacing:2px;
}

#cottonrose .linklist2 li{
    background:#FAA9B9;
}

#althea .linklist2 li{
    background:#EA664B;
}

.footerlist{
    list-style:none;
    margin:0px auto;
    line-height:100%;
    padding:0px 0px 25px 0px;
    text-align:center;
}

.footerlist li{
    display: inline-block;
    font-size:85%;
    text-align:center;
    margin:5px 0px;
    padding:0px 15px;
    line-height:100%;
    border-radius:5px;
}

.footerlist img{
    border-radius:50px;
    width:64px;
}

.taglist{
    list-style:none;
    margin:0px;
    line-height:100%;
    padding:0px 15px;
    text-align:left;
}

.taglist li{
    display: inline-block;
    font-size:67%;
    text-align:center;
    margin:3px 2px;
    padding:5px 10px;
    border-radius:15px;
    line-height:100%;
    color:#888;
    border:1px solid #ccc;
}

.taglistindex{
    list-style:none;
    margin:5px 0px;
    line-height:100%;
    padding:0px 15px;
    text-align:left;
}

.taglistindex li{
    display: inline-block;
    font-size:80%;
    text-align:center;
    margin:5px 4px;
    padding:7px 10px;
    border-radius:5px;
    line-height:100%;
    color:#fff;
    font-weight:bold;
}

#cottonrose .taglistindex li{
    background:#FAA9B9;
}

#althea .taglistindex li{
    background:#EA664B;
}

.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center;
}

.modal-button {
    background-image: linear-gradient(#eee 0 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    font-weight: bold;
    text-align: left;
    cursor :pointer;
    display: block;
    margin:5px auto;
    padding: 8px 15px;
    width:90%;
    text-decoration: none;
    font-size:85%;
}

/*アイコンを表示*/
.modal-button:after {
font-family: "Font Awesome 5 Free";
  content: "\f2d0";
    padding-left: 8px;
}

/*ラベルホバー時*/
.modal-button:hover {
  opacity: 0.6;
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 70%;
  max-width: 600px;
  padding: 10px 40px 25px 20px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left
}

.modal_title::before,
.modal_title::after{
	content: "";
	position: absolute;
	bottom: 0;
}

/* h2 プライマリカラー*/
.modal_title:before{
	border-bottom: 3px solid #eee;
	width: 100%;
}
/* h2 セカンダリカラー*/
.modal_title:after{
	border-bottom: 3px solid #fff;
	width: 100%;
}

.modal-content p {
  margin: 10px 0 0 0;
  white-space:pre-wrap;
  font-size:90%;
  line-height:1.9;
}

.modal_title {
  font-size: 120%;
	position: relative;
	overflow: hidden;
  padding: 10px 0px 5px 0px;
  font-weight:bold;
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .7)
}

.modal-overlay:hover{
    opacity: 1.0;
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 35px;
  color: #999 !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #999 !important
}

/* 全体設定 */
.css-carousel-slider {
    width: 90%;
    overflow: hidden;
    position: relative;
    text-align:center;
    margin:0px auto 20px auto;
}
.css-carousel-slider img {
    width: 90%;
    height: auto;
    vertical-align: top;
    text-align:center;
    margin:0px auto 20px auto;
}

/* スライド設定 */
.css-carousel-slider .slide-wrap {
    width: 400%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider 22s infinite;
    animation-delay: 1s;
}
.css-carousel-slider .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main 22s infinite;
    animation-delay: 1s;
}
.css-carousel-slider .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider {
    0% { transform: translateX(0); }

    20% { transform: translateX(calc(1 / 4 * -100%)); }
    25% { transform: translateX(calc(1 / 4 * -100%)); }

    45% { transform: translateX(calc(2 / 4 * -100%)); }
    50% { transform: translateX(calc(2 / 4 * -100%)); }

    70% { transform: translateX(calc(3 / 4 * -100%)); }
    75% { transform: translateX(calc(3 / 4 * -100%)); }

    95% { transform: translateX(calc(4 / 4 * -100%)); }
    100% { transform: translateX(calc(4 / 4 * -100%)); }
}

@keyframes css-carousel-slider-main {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}

.menu a{
    text-decoration:none;
}

.bread a{
    color:#fff;
}

.breadlist a{
    text-decoration:none;
    color:#666;
}


@media screen and (max-width:960px) 

{

.pc { display:none; }
.sp { display:inline; }

body{
    background-image: linear-gradient(#999 0% 100%);
    background-repeat: no-repeat;
    background-size: 100% 25px;
    background-position: center bottom;
}

.pcheader{ display:none; }

.breadlist{ display:none; }

.menu{
    margin:0px 0px 0px 0px;
    position:fixed;
    top:0;
    font-size:14px;
    z-index:100;
    width:100%;
    text-align:center;
    background:#eee;
    padding:2px 0 0 0;
}

.list1{
    margin:5px auto;
    padding:0px 5px;
}

.list1 li{
    display: inline-block;
    font-size:90%;
    width:auto;
    padding:15px 20px;
}

.aboutbox{
    max-width:600px;
    margin:0px auto;
    padding:0px;
}

.box{
    margin:0px auto;
}

.colum{
    flex-direction:column;
    margin:20px auto;
    padding;0px;
}

.novelcover{
    padding:10px 0px 0px 0px;
    margin:0px auto;
    text-align:center;
}

.novelmain{
    max-width:350px;
    margin:0px auto 15px auto;
    padding:0px;
    border-bottom:0px solid #eee;
}

.author{
    text-align:center;
    width:100%;
}

.p1{
    padding:0px 20px;
    margin:0px 5px 10px 5px;
    line-height:170%;
}

.p3{
    margin:20px auto;
    font-size:90%;
}

.p4{
    padding:10px 20px;
    margin:0px 5px 10px 5px;
    line-height:170%;
}

.novelcaption{
    padding-right:20px;
}

h1{
    margin-top:50px;
    padding-bottom:15px;
}

h1 img{
    width:200px;
}

h2{
    margin-bottom:15px;
}

h3{
    margin-bottom:15px;
}

h4{
    margin:15px 10px 15px 10px;
    font-size:120%;
    padding:10px 10px 12px 10px;
}

h5 {
    text-align:center;
    margin:0px auto 5px auto;
    font-size:110%;
}

.linkbutton1{
    margin:10px auto;
    padding:3px 5px;
}

.taglist{
    text-align:center;
}

.poem{
    font-size:100%;
}

.hr3{
    height:50px;
}

.dt2{
    width: 10%;
}

.dd2{
    width: 80%;
}

.footer{
    padding:40px 0px 20px 0px;
    text-align:center;
    border-radius:0px;
    margin:0px;
}

}


/*↓ディスプレイ400px以下用↓*/

@media screen and (max-width:400px) 

{

.base{
    width:auto;
    margin:0px 0px 0px 0px;
}

.box{
    margin:0px;
}

.work{
    float:none;
    width:auto;
    margin:0px;
    padding:10px 0px;
}

.menu{
    font-size:13px;
    padding:3px 0 5px 0;
}

.list1{
    margin:5px auto;
    padding:0px 5px;
}

.list1 li{
    font-size:90%;
    width:auto;
    padding:10px;
}

.list1 li.current {
    background-size: 85% 80%;
}

.novelaboutbox{
    width:100%;
    margin:15px auto;
    padding-top:15px;
}

.shortnovelbox{
    max-width:350px;
    margin:20px auto;
    padding:15px 0px 0px 0px;
}

.novelcaption{
    padding-top:5px;
}

.emoji{
    margin:5px 10px;
    width:50px;
}

.taglist li{
    font-size:60%;
}

h1{
    margin-top:40px;
}

h3{
    font-size:140%;
    margin:10px 10px 10px 10px;
}

h4{
    margin:0px 10px 20px 10px;
    padding:10px 10px 12px 10px;
}

.p1{
    font-size:80%;
    text-align:left;
}

.p2{
    margin:0px 10px;
    border-radius:10px;
}

.p3{
    font-size:75%;
}

.p4{
    font-size:80%;
    text-align:left;
}

dt{
    float: none;
}

dd{
    margin:5px;
}

.hr3{
    height:40px;
}

.dt2{
    font-size:80%;
    padding:0px 15px;
    width: 15%;
}

.dd2{
    font-size:80%;
    padding-right:5px;
    width: 67%;
}

.taglistindex{
    margin:15px 0px;
    padding:0px 30px;
    text-align:center;
}

.taglistindex li{
    width:90%;
}

.modal-button {
    width:75%;
}

.modal-wrapper .modal-window {
  width: 100%;
  padding: 10px 35px 25px 20px;
  vertical-align: middle
}

.modal-content p {
  margin: 10px 10px 0 0;
  font-size:80%;
}

.footer{
    font-size:70%;
}

}