*{
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
body{
position: relative;
line-height: 1.5;
color: #0B1334;
font-size: 1.6rem;
font-family: 'Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN',sans-serif;
}
img{
vertical-align: bottom;
width: 100%;
height: auto;
}
.text{
text-align: justify;gy
text-justify: inter-ideograph;
}
.pcOnly{display: none;}
.spOnly{display: block;}
header{
position: fixed;
width: 100%;
padding: 15px;
background: rgb(252,161,195);
background: linear-gradient(90deg, rgba(252,161,195,1) 0%, rgba(255,102,34,1) 100%);
z-index: 2;
}
.modalWrap{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
background: #1B1334;
z-index: 6;
}
.modalWrap .modalBox{
margin: 0 20px;
padding: 0 15px 20px;
background: #fff;
border-radius: 45px;
text-align: center;
}
.modalBox .head{
margin: 0 -15px;
padding: 10px 0;
background: #fca1c3;
border-radius: 45px 45px 0 0;
font-size: 2rem;
font-weight: bold;
}
.modalBox .question{
padding: 10px 0 3px;
color: #f62;
font-size: 2rem;
font-weight: bold;
}
.modalBox .text{
margin-bottom: 10px;
font-size: 1.4rem;
text-align: left;
}
.modalBox. btnWrap{
margin-top: 10px;
text-align: center;
}
.modalBox .yes{
margin-right: 10px;
}
.modalBox .btn{
display: inline-block;
padding: 5px 20px;
border: 4px solid #f62;
border-radius: 20px;
box-shadow: 0 8px;
}
header .headerInner_c{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
header .share{
font-size: 1.2rem;
color: #fff;
text-align: center;
}
header .headerInner_c .share ul{
display: flex;
}
header .headerInner_c .share li:nth-of-type(n+2){
margin-left: 8px;
}
header .logo{
width: 75px;
transition: .5s;
}
header.scroll .logo{
width: 60px;
}
main{
width: 100%;
padding: 150px 20px 0;
}
h1{
position: absolute;
bottom: 15px;
right: 0;
width: 266px;
height: 45px;
}
h2{
margin-bottom: 30px;
text-align: center;
}
h2 img{
height: 41px;
width: auto;
}
h3{
position: relative;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}
h3::before{
display: block;
position: absolute;
content: "";
width: 100vw;
height: 4px;
top: calc(50% - 2px);
left: -20px;
background: #0B1334;
z-index: -2;
}
h3 span{
display: inline-block;
padding: 5px 15px;
background: #0B1334;
border-radius: 50px;
}
h4{
position: relative;
margin: 15px 0 5px 18px;
font-size: 1.8rem;
font-weight: bold;
}
h4::after{
position: absolute;
display: block;
content: "";
background: #0B1334;
width: 8px;
height: 23px;
top: 1px;
left: -14px;
}
.sec_novel .novelBox{
background: #fca1c3;
border-radius: 25px;
}
.sec_novel .novelBox a{
display: block;
padding: 15px 20px;
}
.sec_novel .novelBox:nth-of-type(n+2){
margin-top: 20px;
}
.sec_novel .novelBox .title{
font-size: 1.8rem;
font-weight: bold;
}
.sec_novel .novelBox .date{
margin: 3px 0 10px;
color: #fff;
font-size: 1.5rem;
}
.sec_novel .novelBox .tag{
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 10px;
color: #fff;
font-size: 1.5rem;
text-align: right;
}
.sec_novel .novelBox .tag li{
position: relative;
margin-left: 20px;
}
.sec_novel .novelBox .tag li:nth-of-type(n+2)::after{
position: absolute;
display: block;
content: "";
background: #fff;
width: 1px;
height: 15px;
top: 4px;
left: -12px;
}
.btnWrap{
margin-top: 10px;
text-align: center;
}
.btn{
display: inline-block;
padding: 5px 30px;
border: 4px solid #f62;
border-radius: 20px;
box-shadow: 0 8px;
}
footer{
margin-top: 80px;
text-align: center;
}
.pageTop{
display: none;
padding: 8px;
right: 0;
background: #0B1334;
color: #fff;
font-size: 1.2rem;
z-index: 5;
text-align: center;
}
footer .line{
display: block;
height: 80px;
background: rgb(252,161,195);
background: linear-gradient(90deg, rgba(252,161,195,1) 0%, rgba(255,102,34,1) 100%);
}
footer small p{
padding: 10px 0;
}

@media screen and (min-width: 600px){
.pcOnly{display: block;}
.spOnly{display: none;}
header .headerInner_c{
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
}
header .share{
font-size: 1.5rem;
}
header .headerInner_c .share li:nth-of-type(n+2){
margin-left: 10px;
}
header .logo{
width: 100px;
}
header.scroll .logo{
width: 75px;
}
main{
max-width: 800px;
margin: 0 auto;
padding: 200px 40px 0;
}
h1{
width: 399px;
height: 67.5px;
bottom: 25px;
}
h2{
margin-bottom: 40px;
}
h2 img{
height: 61.5px;
}
h3::before{
width: 100%;
left: 0;
}
h4{
margin-top: 20px;
}
.sec_novel .novelInner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sec_novel .novelBox{
width: 49%;
}
.sec_novel .novelBox:nth-of-type(n+2){
margin-top: 0;
}
.sec_novel .novelBox:nth-of-type(n+3){
margin-top: 20px;
}
.btnWrap{
margin-top: 20px;
}
footer{
margin-top: 100px;
}
.pageTop{
padding: 10px 15px;
font-size: 1.5rem;
}
footer .line{
height: 100px;
}
footer small p{
padding: 20px 0;
}
}
/*
@media screen and (min-width: 900px){
header .headerInner_c{
min-width: 900px;
}
main{
min-width: 900px;
}
.btn:hover{
box-shadow: 0 6px;
}

}

*/