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

/* ↓レイアウト↓ */

*{
    line-height:150%;
}

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

body{
    color:#333;
    background:#eee;
    padding:0px;
    margin:0px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
}

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

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

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

.gray{
    max-width:1100px;
    margin:0 auto;
    padding:0px;
}

.work{
    padding:0px 0px 30px 0px;
    max-width:1100px;
    margin:0 auto;
}

.footermenu{
    margin:0px auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    width:100%;
    padding:0px 0px 20px 0px;
    text-align:center;
}

.gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
}

.gallery2{
    margin:-33px 20px 10px 20px;
    border-radius:5px;
}

.colum{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    margin:0px auto;
}

.box{
    margin:0px;
    background:#fff;
}

.text{ padding:30px 100px 80px 100px;
       line-height:240%;
       font-size:100%;
       white-space:pre-wrap;
       text-align:center;
       margin-left:auto;
       margin-right:auto;
       margin-top:0;
       margin-bottom:0;
       text-align:left;
       font-family:"Meiryo";
       max-width:960px;}

.pretext{ padding:30px 100px 50px 100px;
       line-height:240%;
       font-size:100%;
       white-space:pre-wrap;
       text-align:center;
       margin:0px auto;
       text-align:left;
       font-family:"Meiryo";
       max-width:960px;}

.ps{ padding:40px 100px 60px 100px;
       line-height:190%;
       font-size:80%;
       white-space:pre-wrap;
       text-align:center;
       margin:0px auto;
       text-align:left;
       font-family:"Meiryo";
       color:#666;
       background-image: linear-gradient(#eee 0 100%);
       background-repeat: no-repeat;
       background-size: 100% 1px;
       background-position: center top;
       max-width:760px;}

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


/* ↓タグ↓ */

h1{
    font-size:190%;
    font-weight:bold;
    font-family:serif;
    margin:0px 20px 5px 20px;
    letter-spacing:3px;
    line-height:130%;
}

h2{
    font-size:80%;
    font-weight:normal;
    margin:0px 20px 20px 20px;
    color:#999;
    font-family:sans-serif;
    letter-spacing:1px;
}

h3{
    font-size:150%;
    font-weight:bold;
    text-align:center;
    margin:30px auto;
    letter-spacing:3px;
    padding:12px;
    max-width:960px;
    font-family:serif;
    font-weight:normal;
}

h3 span{
  padding:5px 20px;
  display:block;
  font-size:50%;
  color:#999;
  font-family:sans-serif;
}

h4{
    font-size:120%;
    margin:20px 0px;
    padding:7px 0px;
    text-align:center;
    line-height:100%;
    font-weight:bold;
    font-family:sans-serif;
    letter-spacing:2px;
    background-image: linear-gradient(#eee 0 100%);
    background-repeat: no-repeat;
    background-size: 5% 3px;
    background-position: center bottom;
}

h5{
    font-size:95%;
    margin:30px 0px 10px 0px;
    padding:0px 20px;
    text-align:left;
    line-height:100%;
    font-weight:bold;
    font-family:sans-serif;
    letter-spacing:0px;
}

h5 span{
    border-bottom:2px dotted #ccc;
    padding:5px 10px;
}

h6{
    font-size:95%;
    margin:20px 0px 5px 0px;
    padding:0px 20px;
    text-align:left;
    line-height:100%;
    font-weight:bold;
    font-family:sans-serif;
    letter-spacing:1px;
}

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

em{
   background: linear-gradient(transparent 60%, #fff 60%);
   font-style:normal;
}

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

small{
    font-size:70%;
}

big{
    font-size:130%;
}

ins{
    background-color:#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;
}

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


/* ↓classタグ↓ */

.breadlist{
    margin:0px auto 30px auto;
    padding:15px 50px;
    font-family:sans-serif;
    color:#666;
    list-style:none;
    line-height:100%;
    text-align:right;
    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;
    background:#fff;
}

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

.novelcover img{
    width:170px;
    border:5px solid #fff;
    border-radius:10px;
}

.novelmain{
    padding:10px 20px 0px 20px;
    text-align:left;
    margin:0px auto;
    width:100%;
}

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

.novelaboutbox{
    margin:15px 10px;
    padding:10px 0px 0px 0px;
    text-align:center;
    width:410px;
    background:#f9f9f9;
}

.list2{
    display: block;
    list-style:none;
    margin:15px 0px 25px 0px;
    text-align:center;
    padding:0px;
}

.list2 li{
    font-size:95%;
    padding:10px;
}

.chapterlist{
    list-style:none;
    margin:0px 20px 0px 20px;
    text-align:left;
    padding:2px;
}

.chapterlist li{
    display: inline-block;
    padding:4px 7px;
    margin:2px 3px;
    background:#fff;
    font-weight:bold;
    font-size:75%;
    text-align:center;
}

.chapterlist2{
    list-style:none;
    margin:30px 20px 20px 20px;
    text-align:center;
    padding:2px;
}

.chapterlist2 li{
    display: inline-block;
    padding:4px 7px;
    margin:2px;
    background:#fff;
    font-weight:bold;
    font-size:75%;
    text-align:center;
}

.charalist{
    list-style:none;
    margin:0px;
    line-height:100%;
    padding:30px 40px 5px 40px;
    text-align:center;
}

.charalist li{
    display: inline-block;
    font-size:80%;
    text-align:center;
    margin:0px -1px 20px 0px;
    padding:3px 40px;
    line-height:100%;
    border-left:1px dotted #ccc;
    border-right:1px dotted #ccc;
}

.charalist li span {
  display:block;
  margin-top:2px;
  font-size:85%;
  color:#666;
}

.nextpage{
    width:90%;
    text-align:center;
    margin:5px auto 20px auto;
    padding:15px;
    font-weight:bold;
    font-size:110%;
    letter-spacing:3px;
    background:#999;
    color:#fff;
    border-radius:5px;
}

.hr1{
    border:0px;
    margin:0px;
    height:80px;
    background-image: linear-gradient(#eee 0 100%);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-position: top center;
}

.hr2{
    border:0px;
    margin:0px 0px;
    height:80px;
}

.hr3{
    border:0px;
    margin:0px 0px;
    height:30px;
}

.p1{
    text-align:center;
    padding:0px;
    margin:15px 0px 0px 0px;
    font-size:75%;
    line-height:180%;
    color:#555;
}

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

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

.copy{
    margin:0px;
    padding:0px 20px 10px 20px;
    font-size:125%;
    text-align:left;
    line-height:160%;
    color:#777;
    font-family:sans-serif;
    line-height:1.3;
}

.dl1{
    margin:10px 0px 0px 15px;
    padding:0px;
    width:45%;
}

.dt1{
    margin:0px 0px 0px 5px;
    text-align:left;
    letter-spacing:1px;
    font-weight:bold;
    border-left:5px solid #777;
    font-size:80%;
    padding:0px 10px;
}

.dd1{
    margin:2px 10px 10px 0px;
    padding:3px 0px;
    text-align:left;
    line-height:100%;
}

.dl11{
    margin:7px 0px 0px 15px;
    padding:0px;
}

.dt11{
    margin:0px 0px 0px 5px;
    text-align:left;
    letter-spacing:1px;
    font-weight:bold;
    border-left:5px solid #777;
    font-size:80%;
}

.dd11{
    margin:2px 10px 10px 0px;
    padding:3px 5px;
    text-align:left;
    line-height:100%;
    font-size:75%;
}

.dl2{
}

.dt2{
    margin:0px;
    padding:0px 20px;
    font-size:85%;
    text-align:center;
    letter-spacing:1px;
    font-weight:normal;
    color:#111;
    float:none;
}

.dd2{
    font-size:75%;
    margin:0px;
    padding:10px 10px 0px 10px;
    text-align:center;
    color:#666;
}

.dt2 span{
    color:#555;
    font-weight:normal;
}

.dl3{
    margin:25px 0px;
}

.dt3{
    margin:0px;
    padding:0px 20px;
    font-size:85%;
    text-align:center;
    letter-spacing:1px;
    font-weight:normal;
    color:#111;
    float:none;
}

.dd3{
    font-size:75%;
    margin:0px;
    padding:10px 10px 0px 10px;
    text-align:center;
    color:#666;
}

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

.dt22{
    font-size:95%;
    margin:4px 0px;
    text-align:center;
    font-weight:bold;
    letter-spacing:1px;
    padding:8px 0px;
    width: 10%;
    line-height:100%;
}

.dd22{
    margin:4px 0px;
    padding:0px;
    text-align:left;
    width: 90%;
    line-height:100%;
}

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

.dt23{
    font-size:82%;
    margin:8px 0px;
    text-align:left;
    font-weight:bold;
    letter-spacing:1px;
    padding:0px 15px;
    width: 15%;
    line-height:100%;
    background-image: linear-gradient(#999 0 100%);
    background-repeat: no-repeat;
    background-size: 7px 7px;
    background-position: 0% 65%;
}

.dd23{
    font-size:75%;
    margin:8px 0px;
    padding:7px 0px 0px 0px;
    text-align:left;
    width: 80%;
    line-height:190%;
    color:#555;
}

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

.modal-button {
    background:#fff;
    font-weight: bold;
    text-align: center;
    cursor :pointer;
    display: block;
    margin:15px 25px 0px 25px;
    padding: 5px 0px;
    max-width:30%;
    text-decoration: none;
    font-size:75%;
}

/*アイコンを表示*/
.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: 0px 0 0 0;
  font-size:75%;
  line-height:1.9;
  text-align:center;
  color:#666;
}

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

.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
}

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

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

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

.list3 li{
    display: inline-block;
    font-size:90%;
    text-align:center;
    margin:0px -1px 20px 0px;
    padding:3px 30px;
    line-height:100%;
    border-left:1px dotted #ccc;
    border-right:1px dotted #ccc;
    font-family:sans-serif;
}

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

.list33 li{
    display: inline-block;
    font-size:87%;
    text-align:center;
    margin:0px -1px 20px 0px;
    padding:3px 20px;
    line-height:100%;
    border-left:1px dotted #ccc;
    border-right:1px dotted #ccc;
    font-family:serif;
}

.list4{
    list-style:none;
    margin:10px 0px 20px -40px;
    text-align:left;
    line-hetght:1.0;
}

.list4 li{
    display: inline-block;
    text-align:center;
    margin:0px -1px 10px 0px;
    padding:0px 25px;
    border-left:1px dotted #ccc;
    border-right:1px dotted #ccc;
    font-weight:normal;
}

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

.list5 li{
    display: inline-block;
    font-size:80%;
    text-align:center;
    margin:5px;
    padding:8px 12px;
    background:#fff;
    line-height:100%;
    font-family:sans-serif;
    font-weight:bold;
    letter-spacing:1px;
}

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

.taglist li{
    display: inline-block;
    font-size:70%;
    text-align:center;
    margin:3px;
    padding:5px 10px;
    border-radius:15px;
    line-height:100%;
    color:#666;
    border:1px solid #bbb;
    background:#eee;
}

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

.taglist2 li{
    display: inline-block;
    font-size:70%;
    text-align:center;
    margin:1px 4px;
    padding:5px;
    line-height:100%;
    color:#999;
    border:0px;
    font-family:sans-serif;
    background:#eee;
}

.footerlist{
    list-style:none;
    margin:7px auto 0px auto;
    line-height:100%;
    padding: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:10px;
    width:120px;
}

.list1{
    display: block;
    list-style-type:disc;
    margin:0px;
    text-align:left;
    padding:0px 10px;
}

.list1 li{
    padding:3px;
}

.ps h5{
    text-align:left;
    padding:20px 0px 10px 0px;
    margin:0px;
}

.menu a, .nextpage a{
    text-decoration:none;
    color:#fff;
}

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


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

{

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

.breadlist{
    padding:15px 25px;
}

.chara{
    width:400px;
}

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

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

.novelmain{
    max-width:500px;
    text-align:center;
    margin:0px auto;
}

.novelaboutbox{
    width:100%;
    margin:0px auto 20px auto;
    padding-top:30px;
}

.novelcaption{
    border:0px;
}

.nextpage{
    width:85%;
}

.chapterlist{
    text-align:center;
}

h5{
    text-align:center;
}

.dt22{
    width: 80%;
    padding:0px;
    margin:15px 0px 0px 0px;
    text-align:center;
}

.dd22{
    width: 100%;
    padding-right:0px;
}

.dt23{
    width: 20%;
    padding-top:2px;
    padding-bottom:0px;
    margin-bottom:0px;
    background-image: linear-gradient(#eee 0 100%);
}

.dd23{
    width: 75%;
    line-height:1.5;
    padding-top:0px;
    margin-top:0px;
    text-align:center;
}

.modal-button {
    max-width:40%;
    margin:10px auto;
}

.copy, .taglist, .novelcaption{
    text-align:center;
}

.footer{
    margin:0px;
    border-radius:0px;
}

}

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

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

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

.box{
    margin:0px;
}

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

.text, .pretext{ padding:10px 20px 30px 20px;
       line-height:1.9em;
       font-size:95%;
       white-space:pre-wrap;
       margin-left:auto;
       margin-right:auto;
       margin-top:0;
       margin-bottom:0;
       text-align:left;
       font-family:sans-serif;
}

.ps{ padding:30px 30px 50px 30px;
       line-height:1.9em;
       white-space:pre-wrap;
       margin-left:auto;
       margin-right:auto;
       margin-top:0;
       margin-bottom:0;
       text-align:left;
       font-family:sans-serif;
}

.gallery{
    flex-direction:column;
    width:auto;
    margin:0px;
}

.bread{
    padding:15px 10px;
    margin:0px auto 50px auto;
    max-width:100%;
}

.chapterlist li{
    width:75%;
}

.chara{
    max-width:250px;
    margin:0px auto;
    padding:5px 0px;
}

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

.nextpage{
    width:75%;
}

.novelmain{
    max-width:320px;
}

h1{
    font-size:170%;
    margin-top:0px;
    margin-left:15px;
    margin-right:15px;
    text-align:center;
}

h2{
    font-size:65%;
}

.copy{
    padding-top:10px;
    font-size:120%;
}

h3{
    font-size:140%;
    padding-left:15px;
    padding-right:15px;
    margin-top:0px;
}

h33{
    font-size:130%;
    padding-left:15px;
    padding-right:15px;
}

h4{
    font-size:120%;
    padding-bottom:10px;
    margin-bottom:20px;
    margin-top:0px;
}

h5 {
    margin:25px auto 10px auto;
}

.list22{
    margin:0px auto;
    text-align:left;
}

.p2{
    text-align:left;
    padding:0px 20px 20px 20px;
    margin:0px 5px;
    line-height:160%;
}

.novelcaption{
    text-align:left;
    padding:0;
}

.charalist li{
    border-left:0px;
    border-right:0px;
}

.hr1{
    height:140px;
}

.list3 li{
    padding:0px 35px;
    border:0px;
}

.taglist2 li{
    padding:5px 2px;
}

dt{
    float: none;
}

.dl1{
   width:100%;
}

.dd1{
   padding-left:15px;
}

.dt23{
    width: 80%;
    border:0px;
    margin-bottom:0px;
    text-align:center;
}

.dd23{
    width: 80%;
    text-align:center;
    line-height:1.5;
    padding-top:0px;
}

.modal-button {
    max-width:70%;
}

.modal-wrapper {
  padding: 40px 5px;
}

.modal-wrapper .modal-window {
  width: 100%;
  max-width: 350px;
  padding: 10px 40px 25px 20px;
}

.modal-content p {
    max-width:220px;
    margin:0px auto;
    padding:5px 0px;
}

.modal_title {
    max-width:220px;
    margin:0px auto;
    padding:5px 0px;
}

.footer{
    font-size:70%;
}

}