<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');

@font-face {
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:active,a:focus{
 color:#F09199;
}
a {
text-decoration: none;
}



.g {color:#c4d4e0}
.t {color: #b0e0e6}
.m {color: #cc9966}
.ku {color: #eac79c}
.ko {color: #3aa8c1}
.ka {color: #ed872d}
.h {color:#3cb371}
.kara {color: #ea3c53}


.sa {color: #a1caf1}
.su {color: #f9b500}
.si {color: #d3acce}
.o {color: #e4e2d7}

.mo {color: #ffffff}

.megumi {color: #6cdae7}
.nobara {color: #ff5470}
.yuji {color: #fb7c50}
.kento {color: #cfb695}

.maki {color: #c9959a}
.toge {color: #b1cabb}
.panda {color: #eae2d4}


.gojo {color:#ffffff}
.geto {color: #060102}
.on {color: #ffef00}
.mei {color: #e1e9f0}






/* 背景画像に文字を重ねる　一番上に敷くベース */
/* リピート　背景画像　の場合 */
f1  {
display: flex;
font-weight: normal;
}
/* 固定　背景　画像　の場合 */
f2  {
position: relative;
font-weight: normal;
}


h1,
h2,
h3,
h4,
h5 {
    font-weight: normal;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: justify;
    word-break: break-all;
position: relative;
}

h2 {
    background-color: rgba(255, 255, 255, 1);
}

/* 文章の背景　透過 */
h3 {
    background-color: rgba(255, 255, 255, 0.90);
}
/* 文章の背景　ちょっと透過 */
h5 {
    background-color: rgba(255, 255, 255, 0.40);
}

/* 文章の背景　完全透過 */
/* h1は見出しを付ける場合 */
h1,
h4 {
    background-color: rgba(255, 255, 255, 0);
}

@media screen and (min-width:1024px) {
h1,
h2,
h3,
h4,
h5 {
font-size: 16px;
    padding: 4em 2em;
    line-height: 180%;
    margin: 0 auto;
    width: 70%;
}
}
@media screen and (max-width:1024px) {
h1,
h2,
h3,
h4,
h5 {
font-size: 13px;
padding: 3em 2em;
line-height: 200%;
}
}












/* 背景画像の固定 */
img {
max-width: 100%;
height: 100%;
vertical-align: bottom;
position: fixed;
object-fit: cover;
}
.ojf {
  font-family: 'object-fit: cover;';
}



/* 固定画像　場所を指定したい場合 */
#bgp23, #bgp34, #bgp41, #bgp45, #bgp46, #bgp48, #bgp49,
#bgj8, #bgj15,
#bgz6, #bgz8, #bgz9, #bgz10 {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
}
/* サイコパス */
#bgp23 {
background: url('/novel/p/23.jpg') 100%/cover;
}
#bgp34 {
background: url('/novel/p/34.jpg') 60%/cover;
}
#bgp41 {
background: url('/novel/p/41.jpg') 0%/cover;
}
#bgp45 {
background: url('/novel/p/45.jpg') 60%/cover;
}
#bgp46 {
background: url('/novel/p/46.jpg') 30%/cover;
}
#bgp48 {
background: url('/novel/p/48.jpg') 40%/cover;
}
#bgp49 {
background: url('/novel/p/49.jpg') 40%/cover;
}

/* 呪術 */
#bgj8 {
background: url('/novel/j/8.jpg') 10%/cover;
}
#bgj15 {
background: url('/novel/j/15.jpg') 85%/cover;
}

/* 他 */
#bgz6 {
background: url('/novel/z/6.jpg') 42%/cover;
}
#bgz8 {
background: url('/novel/z/8.jpg') 42%/cover;
}
#bgz9 {
background: url('/novel/z/9.jpg') 40%/cover;
}
#bgz10 {
background: url('/novel/z/10.jpg') 60%/cover;
}

/* リピート画像 各ページ */
p28, p50,
j10, j12, j13, j18, j19, j26, j27,
bl1
 {
max-width: 100%;
height: auto;
vertical-align: bottom;
display: inline;
background-attachment: fixed;
background-repeat: repeat;
}

/* サイコパス */
p28 {
background-image: url('/novel/p/28.jpg');
}
p50 {
background-image: url('/novel/p/50.jpg');
}

/* 呪術 */
j10 {
background-image: url('/novel/j/10.png');
}
j12 {
background-image: url('/novel/j/12.jpg');
}
j13 {
background-image: url('/novel/j/13.jpg');
}
j18 {
background-image: url('/novel/j/18.jpg');
}
j19 {
background-image: url('/novel/j/19.jpg');
}
j26 {
background-image: url('/novel/j/26.jpg');
}
j27 {
background-image: url('/novel/j/27.jpg');
}
j35{
background-image: url('/novel/j/35.jpg');
}

/* bl */
bl1 {
background-image: url('/novel/bl/1.jpg');
}
@media screen and (max-width:750px) {
bl1 {
background-image: url('/novel/bl/1phone.jpg');
}
}

p28, p50,
j10, j12, j13, j18, j19, j26, j27,
bl1 @media screen and (min-width:1024px) {
{
background-size: cover;
}
}

/* 他指示*/
/* 呪術 */
.\33 3bakubaku{
    background-color: #fff;
    background-image: radial-gradient(#65bbe963 30%, transparent 33%), radial-gradient(#65bbe963 30%, transparent 33%);
    background-size: 40px 56px;
}



/* 下部テキスト　題名　戻るボタン  */
.center,
.right,
.left,
.leftue {
    font-weight: normal;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: justify;
    word-break: break-all;
position: relative;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}


@media screen and (min-width:1024px) {
.center,
.right,
.left {
font-size: 16px;
    padding: 4em 2em;
    line-height: 180%;
    margin: 0 auto;
    width: 70%;
}
}
@media screen and (max-width:750px) {
.center,
.right,
.left {
font-size: 13px;
padding: 3em 2em;
line-height: 200%;
}
}


/* 見出し */
.midashi1 {
    font-weight: bold;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: justify;
    word-break: break-all;
    text-align: left;
}
@media screen and (min-width:1024px) {
.midashi1 {
font-size: 20px;
    line-height: 180%;
}
}

@media screen and (max-width:750px) {
.midashi1 {
font-size: 17px;
line-height: 200%;
}
}

.cen {
    display: block;
    text-align: center;
    margin: 1em 0;
}



/* tategaki */
.baa {
overflow-y: hidden;
    position: absolute;
height: 100%;
}
f3  {
display: flex;
font-weight: normal;
flex-direction: row-reverse;
}
h6 {
    font-weight: normal;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: justify;
    word-break: break-all;
    background-color: rgba(255, 255, 255, 0.90);
    scroll-snap-type: y mandatory;
    height: 100vh;
}

@media screen and (min-width:1024px) {
h6 {
font-size: 13px;
    line-height: 180%;
    margin: 0 auto;
    width: 95%;
position: relative;
}
}

@media screen and (max-width:750px) {
h6 {
font-size: 10px;
padding: 3em 2em;
line-height: 200%;
position: relative;
}
}

.flex {
display: flex;
height: 100%;
text-orientation: upright;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}

center {
display: block;
text-align: start;
text-orientation: upright;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
    margin: 2em 0;
}
tate1, tate2 {
display: block;
height: 60%;
}
tate1 {
margin: 2em 2em 1em 2em;
color: red;
}
tate2 {
margin: 1em 2em 2em 2em;
color: blue;
}

she {
color: red;
}
ghe {
color: blue;
}




</style>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

$(function() {
var _window = $(window),
    _header = $('.st'),
    heroBottom;
_window.on('scroll',function(){     
    heroBottom = $('.back').height();
    if(_window.scrollTop() > heroBottom){
        _header.addClass('fixed');   
    }
    else{
        _header.removeClass('fixed');   
    }
});
_window.trigger('scroll');

   $('a[href^=#]').click(function() {
      var speed = 600;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });

});
</script>