@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}
body {
  color: #1f160e;
  font-family: "Cinzel", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  text-align: center;
  background-color: #f4f3ef;
          max-width: 800px;
    margin: 0 auto;
}
img{
  vertical-align:bottom;
}
a:hover {
  opacity: 0.5;
}
.none {
  display: none;
}
ul {
  list-style: none;
  text-decoration: none;
}
nav li{
  list-style: none;
}
a {
  text-decoration: none;
  color: #1f160e;
}
p {
  font-size: 1.6rem;
  font-weight: 500;
}
h1 {
  font-size: 3.6rem;
  line-height: 1.0;
}
h2 {
  font-size: 3.0rem;
    line-height: 1.0;
}
h3 {
  font-size: 2.0rem;
    line-height: 1.0;
}
h4{
  font-size: 1.0rem;
  color: #ba1c22;
}
.sa {
  opacity: 0;
  transition: all 1.2s ease;
}

.sa.show {
  opacity: 1;
  transform: none;
}
.sa-lr {
  transform: translate(-60px, 0);
}
.sa-rl {
  transform: translate(60px, 0);
}
.sa-up {
  transform: translate(0, 60px);
}
.sa-down {
  transform: translate(0, -60px);
}

@media(min-width:1000px){
  .container_novel{
        max-width: 800px;
    margin: 0 auto;
  }
}
@media(max-width:520px) { 
p {
  font-size: 1.2rem;
  font-weight: 500;
}
h1 {
  font-size: 2.8rem;
  line-height: 1.0;
}
h2 {
  font-size: 2.4rem;
    line-height: 1.0;
}
}
/*header*/
/*
@media(min-width:960px) { 
  .openbtn{
    display: none;
  }
}
*/
.nav_wrapper{
  position:static;
  top:0;
  right: 0;
}
#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
  left: 0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#ebeae5;
    /*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:9997;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:51%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;
  background-color: #fff;
  max-width: 35rem;
  width: 80%;
  border-radius: 30px;
  padding: 2rem 0 0;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: left; 
  margin: 2rem 3rem;
  border-bottom: 2px #c0a84c dashed;
}
#g-nav li:last-child{
  border:0;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
.nav_title {
 display: flex;
  align-items: center;
  padding: 0 0 1rem;
}
.nav_title img{
  width: 2rem;
  height: 2rem;
  padding: 0 1rem 0 0;
}
.nav_title p{
  font-weight: 600;
  letter-spacing: 0.1rem;
}
.nav_inner p{
  padding: 0 0 1.5rem 5rem;
  display: block;
}
.nav_logo{
  width: 16rem;
  padding: 2rem 0 1rem;
  position: absolute;
  top:0;
  left: 4%;
}
.nav_logo img{
  width: 100%;
  z-index: 999;
}
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: fixed;
  top:0;
  right: -3px;
	background:#ba1c22;
	cursor: pointer;
width: 3.5rem;
    height: 3.5rem;
    margin-left: auto;
    border-radius: 0 0 0 40%;
    padding: 2rem;
  z-index:9999;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left:27%;
    height: 2px;
    border-radius: 5px;
	background: #fff;
  	width: 45%;
  }


.openbtn span:nth-of-type(1) {
    top: 20%;
}

.openbtn span:nth-of-type(2) {
    top: 30%;
}

.openbtn span:nth-of-type(3) {
    top: 41%;
}

.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:0.5rem;
	left:2px;
  font-weight: 600;
	color: #f4f3ef;
	font-size:1.0rem;
	text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    top: 22%;
    left: 37%;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 36.5%;
    left: 37%;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top:6px;
	left:1.2rem;
}
header{
  margin: 5rem 0 0;
  z-index: 500;
  transition: 0.5s;
}
header a{
  transition: 0.5s;
}
.p__small{
  font-size: 1.4rem;
}
.p__bold{
  font-weight: 600;
}
.logo{
  padding: 0 0 1rem;
  transition: 0.5s;
}
.logo img{
  width: 20rem;
}
.menu {
    max-width: 600px;
}

.menu a {
    display: block;
    padding:1rem 0 1rem 3rem;
    text-decoration: none;
  font-weight: 600;
}

label {
    display: block;
   margin: 2rem 0 0.5rem;
    color: #1f160e;
    font-weight: 600;
    line-height: 1;
  letter-spacing: 1.2px;
    cursor :pointer;
}
.menu-title__text {
   margin: 0 0 0 1rem;
    font-weight: 600;
}
input {
    display: none;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    height: 4rem;
    opacity: 1;
}
label img{
  width:2rem;
  height: 2rem;
}
.menu_title{
  display: flex;
  align-items: center;
}

/*footer*/
.footer{
  margin: 7rem 0 0;
  padding: 2rem 22rem 3rem;
  background-color: #ebeae5;
}
.footer__nav ul{
  display: flex;
  font-size: 1.2rem;
  font-weight: 600;
}
/*リンクの形状*/
#page-top img{
width: 100%;
}
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#942D2F;
  border-radius: 5px;
  width: 16rem;
  height:auto;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 1%;
  bottom: 2%;
  z-index: 9999;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
  width: 5rem;
}

/*　上に上がる動き　*/

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

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}
@media(max-width:960px) { 
  .footer{
    padding: 4rem;
  }
}
@media(max-width:520px) { 
  .footer{
    display: block;
    padding: 7rem 0 4rem;
  }
  .footer__nav{
    display: none;
  }
}
.span__small{
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0 1rem;
}

@media(max-width:960px) { 
  .menu,.logo{
    display: none;
  }
}
@media(max-width:520px) { 
    .logo img{
    width:12rem;
    height: auto;
  }
}
/* スクロールCSS */

.scroll-fade{opacity: 0; transition: all 2s/*処理にかかる時間*/;}
.scroll-up{opacity: 0; transform: translateY(100px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
.scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}
.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-up{opacity: 0; transform: translateY(300px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}


/*塗りから線に変わる*/
.btnchangeline {
    /*線の基点とするためrelativeを指定*/
	position:relative;
    /*ボタンの形状*/  
	color:#1f160e;
    padding: 1.5rem 8.5%;
	display:inline-block;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/   
	transition:all 0.3s ease-in-out;
}

/*線の設定*/
.btnchangeline::before {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left:0;
    z-index: 1;
    /*線の形状*/
    width: 100%;
    min-width: 25rem;
    height: 100%;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    /*はじめは透過0に*/
    opacity: 0;
    transform: scale(0, 1);
    /*アニメーションの指定*/   
    transition: all 0.3s;
}

/*背景の設定*/
.btnchangeline::after {
    content: '';
    /*絶対配置で背景の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /*背景の形状*/
    width: 100%;
    height: 100%;
    background-color:#f4f3ef;
  margin: 3rem auto 0;
  text-align: center;
  display: inline-block;
    /*アニメーションの指定*/ 
    transition: all 0.3s;
}

/*hoverした際の背景と線の形状*/
.btnchangeline:hover::before {
    opacity: 1;/*不透明に*/ 
    transform: scale(1, 1);/*X方向に線を伸ばす*/
}

.btnchangeline:hover::after {
    opacity: 0;/*透過0に*/
    transform: scale(0, 1);/*X方向に背景を縮小*/
}

/*テキストの設定*/
.btnchangeline span {
    /*テキストを前面に出すためz-indexの値を高く設定*/  
	position: relative;
	z-index: 2;
  font-weight: 600;
    /*テキストの形状*/
	color: #333333;
    /*アニメーションの指定*/   
    transition: all 0.3s;
}

/*hoverした際のテキストの形状*/
.btnchangeline:hover span {
    letter-spacing: 2px;
	color: #333344;
}  
@media(max-width:520px) { 
  .btnchangeline{
    padding: 1.5rem 19%;
  }
}
.sa {
  opacity: 0;
  transition: all 1.2s ease;
}

.sa.show {
  opacity: 1;
  transform: none;
}
.sa-lr {
  transform: translate(-60px, 0);
}
.sa-rl {
  transform: translate(60px, 0);
}
.sa-up {
  transform: translate(0, 60px);
}
.sa-down {
  transform: translate(0, -60px);
}

/*トップページの上部*/

.header_top p{
  text-align: center;
    font-size: 1.0rem;
    margin: 0 0 0.8rem;
  line-height: 1.8;
}
.header_word{
  margin: 0 0 1.3rem;
}
.header_genre{
  border: 1px solid #333333;
      padding: 0.2rem 0.7rem;
    display: inline-block;
}
.header_logo img,.footer_about img{
width: 100%;  
  max-width: 220px;
}

.header_text img{
  max-width: 260px;
  padding: 1.5rem 0 0;
}
.header_image{
  width: 100%;
  padding: 4rem 0 0;
  position: relative;
}
.header_image img{
  width: 100%;
  max-width: 500px;
}
.header_imagetext{
  display: flex;
    position: absolute;
  bottom: 2%;
  justify-content: space-between;
    align-items: flex-end;
  margin: 0 0.5rem;
  width: 96%;
}

.header_imagetext p{
 writing-mode: vertical-rl;
  color: #f4f3ef;
      letter-spacing: 0.1rem;
}
.header_imagewiter{
  border: 1px solid #f4f3ef;
      padding: 0.4rem 0.2rem;
    display: inline-block;
}

/*更新*/

.container_topics{
  background-color: #ba1c22;
  color: #f4f3ef;
  padding: 5rem 2rem 6rem;
}
.topics_block{
  padding: 3rem 0 0;
  text-align: left;
}
.topics_date{
  display: flex;
  justify-content: space-between;
  padding: 0 0 1rem;
}
.topics_date img,.pickup_line img{
  max-width: 195px;
}

/*ピックアップ*/

.container_pickup{
  padding: 4rem 0 0;
}
.container_pickup h4{
    border: 2px solid #ba1c22;
      padding: 0.2rem 0.7rem;
    display: inline-block;
  text-align: left;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  margin: 2rem 2rem 0;
}
.pickup_block{
   text-align: left; 
  padding: 4rem 2rem 0;
}
.pickup_block h2{
  line-height: 1.3;
}
.pickup_text{
  padding: 1rem 0 1.5rem;
  display: flex;
  justify-content:space-between;
  letter-spacing: 0.05rem;
}
.pickup_btn{
  display: flex;
}
.pickup_line{
  text-align: right;
}
.pickup_link{
    background-color: #ba1c22;
padding: 4rem 0 ;
  text-align: center;
  margin: 5rem 0 0;
}
.pickup_link p{
   color: #f4f3ef; 
  font-size: 1.3rem;
}

/*フッター*/

.about_text{
  padding: 2.5rem 2rem 3rem;
  text-align: left;
}
.about_btn{
  color: #ba1c22;
  font-size: 1.2rem;
      border: 2px solid #ba1c22;
      padding: 1.2rem 4rem 1.2rem 6rem;
  border-radius: 30px;
  display: flex;
  width: 140px;
  margin: 0 auto;
  justify-content: space-between;
}
.about_btn img{
  max-width: 19px;
}
.writer{
  padding: 3rem 0 0;
  font-size: 0.8rem;
}

/*小説共通*/

.header_novel{
  padding: 4rem 0 3rem;
}
.container_novel h3{
  color: #ba1c22;
  padding: 0 0 4rem;
    display: flex;
  align-items: center;
  margin: 0 auto;
    width: 67%;
}
.container_novel h3:before, .container_novel h3:after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さを変えたいときはここを変える */
  background: #ba1c22; /* 線の色を変えたいときはここを変える */
  margin:0 1em; /* 文字と線の余白用 なくても良い */
}
.long_block{
  padding: 4rem 2rem 0;
  text-align: left;
}
.long_block h2{
padding: 0 0 2rem;
  line-height: 1.3;
}
.long_list{
  padding: 2rem 0 0;
}
.novel_inner{
    padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 580px;
    margin: 0 auto;
}
.novel_block{
 flex-basis: 44%;
  padding: 0 1rem 6rem;
  position: relative;
}
.novel_mark{
  position: absolute;
  top:-8%;
  left: -1%;
}
.novel_mark img{
  max-width: 50px;
  width: 100%;
}
.novel_image img{
  max-width: 200px;
  width: 100%;
}
.novel_text{
  text-align: left;
}
.novel_text h5{
  padding: 2rem 0 1rem 0;
}
.novel_text p{
  line-height: 1.8;
}
.novel_line{
  padding: 0 2rem 0 0;
}
.link_btn{
  display: flex;
  justify-content:space-between;
  padding: 4rem 2rem 0;
}
.link_btn p{
      color: #ba1c22;
    font-size: 1.1rem;
    border: 2px solid #ba1c22;
    padding: 0.4rem 3rem;
    border-radius: 30px;
    width: 40px;
    margin: 0 auto;
}
.text_block{
  padding: 10rem 2rem 0;
}
.text_p{
  padding: 3rem 0 0;
  line-height: 1.8;
  font-size: 1.4rem;
/*  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;*/
  white-space: pre-wrap;
}
.text_p span{
  font-size: 1.8rem;
}
/*about*/
.container_about{
}
.block_about{
  padding: 5rem 0 0;
}
.container_about h3{
      width: 80%;
    padding: 0 0 3rem;
    color: #ba1c22;
    /* padding: 0 0 4rem; */
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.container_about h3:before, .container_about h3:after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さを変えたいときはここを変える */
  background: #ba1c22; /* 線の色を変えたいときはここを変える */
  margin:0 1em; /* 文字と線の余白用 なくても良い */
}

.container_about p{
  text-align: left;
    padding: 0 2rem;
}

@media(max-width:520px) { 
.novel_block{
  padding: 0 1rem 4rem;
}
}