@charset "utf-8";
/* CSS Document */
html { font-size: 100%;}
body#manga { font-size: 16px;
    background: #afdef4; background-image: url("../../v3/img/body-bg-1.jpg"); background-repeat: repeat-y; background-position: center top; background-size: cover;line-height: 1.7; background-attachment: fixed;
font-family: 'Murecho', sans-serif;
}

#manga #wrapper { width: 800px; margin: 20px auto; background: none; background-color: rgba(255,255,255,.8); border-radius: .5em; overflow: hidden; padding: 20px; box-sizing: border-box; border: 3px solid #fff;  }

#manga section {  border-radius: .3em; margin-bottom: 20px; overflow: hidden; border:3px solid #72C14A; box-sizing: border-box;background-color: #FFF;
}
#manga section .inner { padding: 20px;}
#manga section.big {  }

#manga .orange { /*background-color: #EDF0B7; border-color: #88B848; border-width: 4px;*/}
#manga.white { background-color: #FFF; background-repeat: no-repeat; background-size: cover;}
#manga section h2 { text-align: center; font-size: 200%;font-family: 'Murecho', sans-serif; margin-bottom: .5em; color: #F8A434; padding: .4em; line-height: 1.3; position: relative; font-weight: bold;
   /* text-shadow: 3px 3px 3px #FFF, -3px -3px 3px #FFF,
           -3px 3px 3px #FFF,  3px -3px 3px #FFF,
            3px 0px 3px #FFF, -3px -0px 3px #FFF,
            0px 3px 3px #FFF,  0px -3px 3px #FFF;*/
    
    -webkit-text-stroke: 4px #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cce8bd+0,84e550+50,a2d687+50,72c14a+51,cce8bd+100 */
background: #88CB67; /* Old browsers */

}
#manga section h2 span { display: block; width: 100%; position: absolute; top:.23em; left: 0; -webkit-text-stroke: 4px rgba(255,255,255,0);}
#manga section h2.or span{ top:.4em;}
.og-ios #manga section h2 span { top:0em;}
.og-ios #manga section h2.or span{ top:.4em;}

#manga section h2:before,#manga section h2 span:before { content: ""; display: inline-block; height: 2em; width: 2em; background-image: url("../img/wakaba.png"); background-repeat: no-repeat; background-size: contain; background-position: center; vertical-align: middle; margin-right: -.5em;}
#manga section h2 span:before { opacity: 0;}
#manga .orange h2 { /*color: rgba(255,103,3,1.00);*/}
#manga a.bt ruby,#manga a.bts p span ruby,#manga section h2 ruby { font-weight: bold;}
#manga section h2 ruby rt {}
#manga .clm2 { position: relative;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#manga .clm2 li:nth-child(1){ width: 40%;}
#manga .clm2 li:nth-child(2){ width: 60%;}
#manga .clm2 li img { width: 100%; height: auto;}


#manga .clm2_2 {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#manga .clm2_2 li{ width: 50%; padding: 0 1em;}

rt { line-height: 1; margin: 0; }

#manga a.bt { display: block; height: 50px; line-height: 50px; padding: 0 2em 0 2em; width: 14em; background-color: rgba(255,103,3,1.00); color: #FFF; text-decoration: none; margin: 2em auto 0 auto; border-radius: .3em;  font-weight: bold; text-align: center; position: relative; /*border: 2px solid #EE8333;*/ font-size: 120%; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7b860+0,f7a12a+52,f79000+53,f7ba6a+100 */
background: #F8A434; /* Old browsers */


-moz-transition: all .5s ease 0s;
-webkit-transition: all .5s ease 0s;
-o-transition: all .5s ease 0s;
-ms-transition: all .5s ease 0s;
transition: all .5s ease 0s;
}
#manga a.bt:after { content: ""; display: block; width: 50px; height: 50px; position: absolute; right: 0; top:0; 
 background-image: url("../img/arrow.svg");
background-repeat: no-repeat; background-position: right 1em center; background-size: 1em;}

#manga a.bts { display: block; height: 70px; padding: 0 1em; background-color: #0117A0; color: #fff; text-decoration: none;  border-radius: .3em; font-weight: bold; /*background-image: url("../../v3/img/body-bg-1.jpg");*/ background-size: cover; font-size: 120%; border: 3px solid #FFF; box-sizing: border-box; /*border: 3px solid #0117A0;*/ box-sizing: border-box;border-radius: 0.5em;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    
    /*text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;*/
    
    -moz-transition: all .5s ease 0s;
-webkit-transition: all .5s ease 0s;
-o-transition: all .5s ease 0s;
-ms-transition: all .5s ease 0s;
transition: all .5s ease 0s;
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0123e2+0,0017a1+100 */
background: /*#0123e2*/ #cc0000; /* Old browsers */


}
#manga a.bts figure { width: 50%; padding: 0 5px; box-sizing: border-box;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    align-items: center;
}
#manga a.bts p { width: 50%; line-height: 1.3;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    align-items: center;
}
#manga a.bts figure img { width: 100%; height: auto;}
#manga a.bts p span span { display: block;}
#manga a.bts p span {font-weight: bold;}

#manga .youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}

#manga .youtube iframe {
  width: 100%;
  height: 100%;
}
.youtube video {
  width: 100%;
}


#manga section figure img { width: 100%; height: auto;}
#manga section.manga figure { border: 0px solid #333; margin-bottom: 10px; }

@media screen and (min-width: 960px) {
    #wrapper { min-width: 800px;}
#manga .big .clm2 li img {
    width: 110%;
    height: auto;
    margin-top: -70px;
    /* margin-left: -100px; */
}
    #manga .big .inner { padding-bottom: 0;}
    
    #manga .orange .clm2 li:nth-child(2){ width: 60%; padding-left: 20px; box-sizing: border-box;
    align-items: center;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;}
    #manga .orange .clm2 li:nth-child(1) { width: 40%; }
    
    #manga a.bt:hover,a.bts:hover { transform: scale(1.1); }
    

#g-header--nav { margin-top:40px;}

    
    /*********************************************************************

#page-top

*********************************************************************/

#page-top--wrap,
#page-top { width:100%; height:0; min-width:960px; }
#page-top--wrap { position:relative; }
#page-top { position:fixed; bottom:0; left:0; z-index:99; opacity:0; visibility:hidden;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-top .inner { width:1024px; height:0; margin:0 auto; position:relative;padding-top: 40px; }
#page-top .inner a { display: block; width: 244px; position: absolute; right: -15px; bottom: 40px; }

/* absolute */
#page-top.absolute { position:absolute !important; opacity:1; visibility:visible; }

/* visible */
#page-top.visible { opacity:1; visibility:visible; }
    
    .pcOnly { display: block;}
    .spOnly { display: none;}
    
    /*#manga .clm2_2 li:nth-child(1) a.bts figure img { width: auto; height: 54px;}
    #manga .clm2_2 li:nth-child(2) a.bts figure img { width: auto; height:40px;}*/
}
#wrapper:after { display: none;}
@media screen and (max-width: 959px) {
    .pcOnly { display: none;}
    .spOnly { display: block;}
    
    body#manga  { font-size: 90%;}
    #manga #wrapper { width: auto;margin: 60px 10px 10px 10px; padding: 10px;}
    #manga section h2 {
    font-size: 125%; -webkit-text-stroke: 2px #fff;
}
    #manga .clm2,.clm2_2 {
    flex-direction: column;
}
    #manga .clm2 li:nth-child(1),#manga .clm2 li:nth-child(2),#manga .clm2_2 li { width: auto;}
    #manga .clm2_2 li:nth-child(1) { margin-bottom: 10px;}
    #manga a.bt { display: block;}
    #manga .clm2_2 li { padding: 0;}
    #manga .white,.orange { }
    #manga a.bts {  font-size: 4vw; height: auto;padding: 0.3em 1em;}
    #manga section { margin-bottom: 10px;}
    
    /*********************************************************************

#page-top

*********************************************************************/

#page-top--wrap,
#page-top { width:100%; height:auto; margin:-5px auto 5px; }
#page-top--wrap { position:relative; }
#page-top { position:fixed; bottom:0; left:0; z-index:99; opacity:0; visibility:hidden;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-top .inner { width:100%; height:auto; margin:0 auto; position:relative; text-align:center; }
#page-top .inner a { display: inline-block; /*width: 50%; max-width: 188px;*/ position: static; margin-bottom: 20px;}

/* absolute */
#page-top.absolute { position:static !important; opacity:1; visibility:visible; }

/* visible */
#page-top.visible { opacity:1; visibility:visible; }
    #manga .clm2 li img.fish { width: 80%; display: block; margin: 0 auto;}
    #manga section h2 span { top:.25em; }
}