@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');



body{
font-size:16px;
line-height:1.6;
font-family:'Zen Kaku Gothic New', sans-serif,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo; 
margin:0;
padding:0;
color:#fff;
background:#000;
}



html,body {
height: 100vh;
width: 100%;
}

.wrap {
padding:0;
}


.wrap::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(../images/bg_ill.jpg);
background-size:cover;
}




a {
  text-decoration: none;
  color: #BF2631; transition: all 300ms 0s ease;
}

a:hover{position:relative;
top:1px;
}

*{box-sizing: border-box;}

.pc{display: block;}
.smp{display: none;}

@media (max-width: 480px){
.pc{display: none;}
.smp{display: block;}
body{font-size:14px;}
}

header, section, article{margin:0;　padding:0; display: block;}
h1,h2,h3,h4,h5{margin:0; padding:0;}
p{margin:0; padding:0;}

header,section{width:100%; max-width:980px; margin:0 auto 50px; padding:0 0 20px 0}

header{background:rgb(0 0 0 /0.85); font-family: "Shippori Mincho", serif; font-weight: 700;}
header img{display: block;}

.top, .top_title, .top_auther{height:auto; margin:auto; padding:0;}
.top{width:240px;}
.top_title{max-width:320px; width:calc(100% - 1em); margin:20px auto 30px auto;}
.top_auther{width:160px; margin-bottom:50px;}

header p{margin:1em; font-size:1.2em;}
header p span{font-size:1.4em;}

.book-image img{display: block; max-width:280px; width:calc(100% - 1em); margin:auto;}
.book-image p{font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700; font-size:.8em; color:rgb(229 0 18 / 1); 
  padding:1em; line-height: 1.2;}



@media screen and (min-width: 481px) {
.main{display: flex; flex-flow: wrap row-reverse;  align-items: center; justify-content: center;}
.top{width:90%; max-width:620px;}
.top_title{max-width:486px; width:calc(100% - 1em); margin-bottom:50px;}
.top_auther{width:170px; margin-bottom:40px;}
.main_box{width:55%; max-width:520px;}
.book-image{width:40%; max-width:360px;}
.book-image img{width:100%; max-width:310px;}
}



#story{background:rgb(229 0 18 /0.9); font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;}
#story p{padding:2em 2em 0 2em; max-width:800px; margin:auto;}



#trial{background:rgb(0 0 0 /0.85); width: 90%; max-width:840px; font-family: "Shippori Mincho", serif; font-weight: 700; font-size:1.2em; text-align: center; }

#trial p{padding:1em 1em 0 1em;}

#trial a{background: rgb(55 128 165 /1); padding:.5em; display: inline-block; color:#fff; margin:10px; width:280px;}
#trial a i{color:#000; margin-left:10px;}
#trial  span{font-family: "Zen Kaku Gothic New", sans-serif; color:#000; font-size:14px;}


#series{}
#series p{padding:1em;}
#series img{display: block; height: auto;}
#series h3{font-family: "Shippori Mincho", serif; font-weight: 900; color:#000; font-size:1.6em; text-align: center; line-height: 1.2}
#series h3 i{font-size:2em;}
.series01, .series02, .series03{padding:1em;}
.series01, .series03{background:rgb(229 0 18 /0.9);}
.series02{background:rgb(0 0 0 /0.85);}
.series_title{width:160px; margin:10px;}
.series_btn img{width:140px; margin:10px;}
#series h4 {
  position: relative;
  display: inline-block;
  padding: 0 40px;
 font-family: "Shippori Mincho", serif; 
font-weight: 700; color:#000;
font-size:1.4em;
margin-top:1em;
}
#series h4:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35px;
  height: 1px;
  background-color: #000;
}
#series h4:before {
  left:0;
}
#series .series02 h4{color:#3780a5;}
#series .series02  h4:before{background-color:#3780a5;}

.spoiler{border:solid 1px #000; margin:1em;}
.series02 .spoiler{border:solid 1px #3780a5; margin:1em;}


summary {
  cursor: pointer; 
    list-style-type: none;
    padding:10px; background:#000;
    display: block; 
    transition: .3s;
}


.series02 summary{background:#3780a5;}

summary::-webkit-details-marker {
  display: none;
}
details {
	transition: .5s;
	overflow: hidden;
}
details[open] {
	padding-bottom: 10px;
} 
details[open] summary {
	transform: translateY(0);
}

#series h5{ font-family: "Shippori Mincho", serif; 
font-weight: 700;
font-size:1.2em; line-height: 1em;}

#series h5::before{content: "";
  background-image: url("../images/exclamation-triangle.svg");
  display: inline-block;
  height: 1.2em;
  width: 1.2em;
  vertical-align: middle;
  margin-right:6px;
}

#series h5::after{content: "";
  background-image: url("../images/triangle.svg");
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: middle;
}

.series_smp_title{display: flex; align-items: flex-end; justify-content: space-between;}



@media screen and (min-width: 481px) {
    .series01, .series02, .series03{display: flex;}
    .series_btn{margin:auto;}
    .series_smp_title{display: block; width:160px; margin:20px;}
    .series_title{margin:0;}
    .series_btn img{margin:10px auto;}
    .series_pc_box{ margin:0 20px 0 20px;}
}


a.series_link{background: rgb(55 128 165 /1); padding:.5em; display: block; color:#fff; width:calc(100% - 1em); max-width:780px; font-family: "Shippori Mincho", serif; font-weight: 700; font-size:1.4em; text-align: center; margin:0 auto 60px auto;}
a.series_link i{color:#000; margin-left:10px;}
a.series_link span{font-family: "Zen Kaku Gothic New", sans-serif; color:#000; font-size:14px;}

.modal{display: none;}

/*モーダル中身*/
.featherlight .featherlight-close-icon { font-size:40px;
	line-height: 50px;
	width: 50px;
}
.review_box{color:#000; padding:20px 1em; font-family: "Shippori Mincho", serif; font-weight: 400;}
.review_box .catch, .cmt_title{font-weight: 700; font-size:1.2em; padding-bottom:1em; color:rgb(229 0 18 /1);}
.review_box .reviewer{color:rgb(55 128 165 /1); padding-bottom:1em;}

.cmt_title{text-align: center; font-family: "Shippori Mincho", serif;}
.comment_box{margin:1em;}
.comment_box p{padding:1em;
color:#000;
  position: relative;
  display: block;
  margin: 2em auto;
  border: 2px solid #3780a5;
  border-radius: 8px;
  background-color: #f2f2f2;}

.comment_box p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 12px 10px;
  border-color: transparent transparent #3780a5;
  translate: -50% -100%;
}

.comment_box p::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 7.4px 8.9px 7.4px;
  border-color: transparent transparent #f2f2f2;
  translate: -50% -100%;
}




#profile{background:rgb(226 226 226 / 0.9); font-family: "Shippori Mincho"; color:#000; padding:2em; margin-top:40px;}

#profile img{display: block; height:auto;}
.profile_auther{width:192px; margin:0 auto 20px auto;}
.comment{width:240px; margin:40px auto 2em auto;}






.copyright{text-align: center; font-size:12px; margin-top:3em;}

/*　footer　*/

footer {
color:#fff;
margin-top:3vw;
padding: 20px 0;
background:#000;
}

footer .footer__copy {
    text-align: center;
    font-size: 12px;
}

footer .footer_link {
    margin: 10px 0;
}

footer .footer_link ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: -10px;
}

footer .footer_link ul li {
    list-style: none;
}

footer .footer_link ul li:not(:first-child)::before {
    content: "｜";
}



.share-button{display: flex;
    justify-content: center;
    margin:2vw auto;
    background: transparent;
}

.caption{font-size:12px; text-align: center;}


/*page-top リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(229 0 18 /0.9);
  opacity: .8;
  width: 50px;
  height: 50px;
  border: none;
  color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: rgb(229 0 18 / 1);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 999;
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}




/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-overlay__line {
  position: absolute;
  left: 11px;
  width: 28px;
  height: 3px;
  background-color: #333;
  transition: all .6s;
}

.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #fff;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(254, 127, 132, 0.95);
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }

.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: color .3s;
}

.nav-overlay__link:hover {
  color: #BF2631;
}