@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400&display=swap');

h1.pagetitle, h1.sitename {
  font-family: 'Kaisei Decol', serif;
  letter-spacing: 5px;    /*文字間隔を広げる*/
}

/*全体のフォントサイズを気持ち上げる*/
.mainwrapper {
   font-size: 102%!important;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
枠組み（BOXデザイン）
参考：https://turicco.com/box/
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.box2 {
  margin: 2em auto; /* 外側余白 */
  padding: 1.3em; /* 内側余白 */
  background: repeating-linear-gradient(
    -45deg,   /* ストライプの角度 */
    #fff8fb 0 6px, /* 薄いグレー、幅6px */
    #fff 6px 12px  /* 白（#fff）、幅6px */
    );
/*  max-width: 800px;*/ /* 最大幅 */
}
/*.box2 {
  position: relative;
  padding: 40px 20px;
  background: rgba(188, 226, 232, 0.2);
}
.box2::after {
  position: absolute;
  top: 6px;
  left: 10px;
  content: "";
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 12px);
  border: 1px solid #BCE2E8;
  border-left: none;
  border-right: none;
  z-index: -1;
}
.box2 > :first-child {
  margin-top: 0;
}
.box2 > :last-child {
  margin-bottom: 0;
}*/

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ページUP
参考：https://sinpe-pgm.com/pagetop-button-js/
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.pagetop {
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: .3s;
  color: #004d99;
  background: #eaf4fc;
  font-weight: 600;
  
  /*   デフォルトは非表示 */
  opacity: 0;
}
.pagetop:hover {
  box-shadow: 0 0 10px #00A6C4;
}

/*Line Awesomeのアイコン色を変える*/
i.la, i.las, i.lar {
  color: #26a5cc;
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
}
i.la-exclamation-circle {
  color: red;
}

/*赤色マーカー*/
.marker2 {
  background: linear-gradient(transparent 70%, #ffb09d 70%);
}

/************************************Aboutページの設定***/
.copy-link {
/*  display: flex;*/
  position: relative;
  
  input {
    padding: 3px;
    font-size: 16px;
    color: #555;
    border: none;
    outline: none;
    width: 90%;
  }
  
  button {
    outline: none;
    border: none;
    cursor: pointer;
/*    position: absolute;
    top: 50%;
    left: 80%;
    -webkit-transform : translateY(-50%);
    transform : translateY(-50%);*/

    padding: 5px;
    font-size: 15px;

    &:active {
        background: #ddd;
    }
    
    &::before {
      content: "コピーしました！";
      position: absolute;
      top: -48px;
      right: 0px;
      background: #ccc;
      border-radius: 10px;
      padding: 9px 15px;
      font-size: 14px;
      display: none;
    }
    
    &::after {
      content: "";
      position: absolute;
      top: -20px;
      right: 25px;
      width: 10px;
      height: 10px;
      background: #ccc;
      transform: rotate(45deg);
      display: none;
    }
  }
  
  &.active button::after,
  &.active button::before {
    display: block;
  }
}

/************************************小説ページの設定***/

/*18禁アイコンを水平中央揃えにする*/
.r18-img {
   display: block; margin: auto 0;
}

/*NEWアイコン*/
.balloon3-left {
  margin-left: 8px;
  padding: 3px 4px;
  text-align: center;
  color: #FFF;
  font-size: 12px;
  font-weight: bold;
  background: #ff6347;
  border-radius: 7px;
}

/*小説ページへのリンク（連載もの）だけ下線を引く*/
.novellist_link a {
   text-decoration: underline;
}

/*本編や番外編などのテキストサイズを大きめに*/
.novellist_sub {
   font-size: 18px;
}

/*本編や番外編などの空白（上）を作る*/
.sub_section {
   margin-top: 50px;
}

/*長編などのタイトルのスタイル
参考：https://saruwakakun.com/html-css/reference/h-design#section4*/
.novellist__title_big {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
  font-size: 20px;
}
.novellist__title_big:before {
  font-family: "Line Awesome Brands", "Line Awesome Free";
  content: "\f14a";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1.2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
  font-weight: 900;
}

/* パソコンとタブレットだけフォントサイズ大きく */
@media screen and (min-width: 768px) {
  section.novelpage__main {
    font-size: 110%!important;
  }
}
@media screen and (max-width: 480px) {
  section.novelpage__main {
    font-size: 107%!important;
  }
}
/*スマホとタブレットだけ左右の余白作る*/
@media screen and (max-width: 1024px) {
  main.novelpage {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 一言フォーム用ボタン */
/*https://dubdesign.net/download/html-css/button-design/#i-26*/
.button_solid015 {
  text-align: center;
}
.button_solid015 p {
  margin-bottom: 5px;
  font-weight: 600;
  color: #6bb6ff;
  letter-spacing: 0.04rem;
  display: inline-block;
  position: relative;
}
.button_solid015 p:before, .button_solid015 p:after {
  display: inline-block;
  position: absolute;
  top: 45%;
  width: 20px;
  height: 3px;
  border-radius: 5px;
  background-color: #6bb6ff;
  content: "";
}
.button_solid015 p:before {
  left: -30px;
  -webkit-transform: rotate( 50deg );
  transform: rotate( 50deg );
}
.button_solid015 p:after {
  right: -30px;
  -webkit-transform: rotate( -50deg );
  transform: rotate( -50deg );
}
.button_solid015 a {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 330px;
  padding: 10px 25px;
  color: #FFF;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  background: #6bb6ff;
  filter: drop-shadow(0px 2px 4px #ccc);
  border-radius: 50px;
  
  text-decoration: none;
}
.button_solid015 a:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
.button_solid015 a:before {
  position: absolute;
  top: 50%;
  left: 20px;
  transition: 0.2s ease-in-out;
  content: "\f184";
  font-family: "Line Awesome Free","Line Awesome Brands";
  font-size: 24px;
  font-weight: 900;
  transform: translateY(-54%);
}