html{height:100%}

body{
background-color: #333;
font-family: font-family:"Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Geneva, Arial, Verdana, sans-serif;
font-size:62.5%;
height:100%;
overflow-y: auto; /* 縦方向のスクロールを許可 */
min-height: 100vh; /* 少なくとも画面の高さは確保し、コンテンツが増えればスクロール可能 */}

a:link{color : #1d2e4c; text-decoration:none;}
a:visited{color : #57315d;}
a:hover{text-decoration:underline; opacity: 0.7;}

* {box-sizing: border-box;}

#main_header{
    background-color:#fff;
    color:#3047a0;}

#main_content{
    width:100vw;
max-width:1050px;
min-height:100%;
background-color:#333;
margin: auto;
height:auto;
color:#333;
font-size:1rem;
padding:0;
}

#main_navi{
    margin-left:auto;
    margin-right:auto;
width:100vw;
max-width:1000px;
    padding:0.5rem;
font-weight:bold; font-family:"Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Geneva, Arial, Verdana, sans-serif;
font-size:1rem;}

.fast_catch{
    width:85%;
    max-width:1000px;
    margin-inline:auto;
    text-align: center;}

.intro01_container{
    position:relative;
    margin-inline:auto;
    margin-top:1.5rem;
    width:fit-content;
    overflow: hidden; }

img.fast{
    animation: fadeslide-in 1.4s ease forwards;
    opacity: 0;
    animation-delay: 0.3s;}

img.fast2{
    position:absolute;
    top:0;
    left:0;
    opacity: 0;
    animation: fade-in 0.05s ease forwards;
    animation-delay: 1.6s;}

@keyframes fadeslide-in {
  0% {opacity: 0;
    transform: translateY(-20px);}
    50% {opacity: 0.3;translateY(-5px);}
  100% {opacity: 1;
    transform: translateY(0);}
}

@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.scroll{
    width:90%;
    margin-inline:auto;
    margin-top:1rem;
    margin-bottom:1rem;
    color:#fff;
    animation: fluffy 2s infinite;
    animation-delay: 2.5s;}

@keyframes fluffy {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-10px);}
}

.intro02_container{
    margin-inline:auto;
    margin-bottom:10vh;}

.intro02{
    margin:1rem;
    border-radius: 10px;
    animation: fadeslide-in 1.4s ease forwards;
    opacity: 0;
    animation-delay: 2s;}

.intro03_container{
    margin-inline:auto;
    margin-top:50vh;}

.intro03{
    margin:2rem;
    animation: fadeslide-in 1.4s ease forwards;
    opacity: 0;
    animation-delay: 2s;}

.catch_gr{
    border-radius: 10px;}

h1{
font-size:1.5em;
text-align: center;}

.author{
    width:85%;
    max-width:900px;
    text-align:center;
    font-size:1rem;
    color:#444;
    margin-inline:auto;
    margin-bottom:2rem;
    padding-bottom:1rem;
    border-bottom:1px solid #bbb;}


div.back_to_title_top{
    border-bottom:1px solid #999;
    font-size:0.8rem;
    padding:0.5rem 0 0;
    font-weight:400;}

img.gr_title_top{
    width:85%;
    max-width:600px;
    margin-top:1rem;
    margin-bottom:0.5rem;}

h2{
    font-size:1.7rem;
    line-height:2.8rem;
    text-align:center;
    margin-top:3rem;}

div.novel_summary2{
width:90%;
max-width:800px;
background-color: #fff;
text-align: justify;
margin-inline:auto;
padding:1rem;
margin-bottom:2rem;
line-height:1.8rem;
  box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.8);}


ruby.ecb_ruby rt{
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size:0.6rem;
color:#444;}


.btns{
    width:50%;
    max-width:500px;
    margin-top:3rem;
    margin-bottom:1rem;
    margin-inline:auto;}

.bt_02{
    background-color:#f7734b;
    color:#fff;
    width: 100%;
    padding: 0.3rem;
    border: solid 1px #e73068;
    border-radius: 4px; 
    text-align:center;
    margin-top:1rem;
    margin-bottom:1rem;
    font-weight:600;
}

.bt_02 a:link {
    color: #fff;
    text-decoration: none;
}

.bt_02 a:visited {
    color: #fff;
    text-decoration: none;
}

.bt_02:hover{
    opacity: 0.7;
}
div.author_info{
width:90%;
max-width:800px;
padding:1rem;
margin-inline:auto;
margin-bottom:2rem;
line-height:1.8rem;
background-color:#efefe7;}

span.author_name{
font-weight:800;}

div.author_info dd{
font-size:0.95rem;
line-height:160%;}

.author{
    width:85%;
    max-width:900px;
    text-align:center;
    font-size:1.1rem;
    color:#444;
    margin-inline:auto;
    margin-bottom:2rem;
    padding-bottom:1rem;
    border-bottom:1px solid #bbb;}

.illust{
    text-align:center;
    font-size:0.9rem;
    color:#444;}

div#footer{
width:100%;
padding:10px 0px 10px;
background: #434e55;
font-size: 0.7rem;
color:#fff;
text-align: center;}


.page_navi{
width:100%;
text-align:center;
font-size:1rem;
background-color: #dde6e6;
color:#999;
padding:0.5rem 0;
margin:0rem;
font-family:"Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Geneva, Arial, Verdana, sans-serif;}


@media screen and (max-width: 480px) {
div.items{
    flex-basis: 45%;
    text-align: center;
    margin:0.5em;}
}