@charset "UTF-8";
/*
  ヘッダー、フッダー
  各項目共通
  泡
  fadein
  ボタン
  ヒーロー
  DLsiteとは
  男性向け作品リスト
  -作品リスト
  OFF
  女性向け
  SNS

*/


/* ヘッダー、フッダー
-------------------------------------------------- */
.lp_header {
  background-color: #000;
  left: 0;
  right: 0;
}

.lp_header.logo {
  width: 136px;
}

.lp_footer {
  position: relative;
  z-index: 10;
}

.lp_footer.type_black {
  background: #fff;
  color: #000;
}

/* 各項目共通
-------------------------------------------------- */
html {
  font-size: 62.5%;
}

.container {
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: .05em;
  color: rgb(255, 255, 255);
  overflow: hidden;
  width: 100%;
}

a:hover {
  opacity: 0.8;
}

a:link { color: #fff; }
a:visited { color: #fff; }
a:hover { color: #ffbb00; }
a:active { color: #ff8000; }

img {
  width: 100%;
  display: block;
}

.pc {
  display: none;
}

@media screen and (min-width: 769px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

/* fadein
-------------------------------------------------- */
.fadein {
  animation: fadein 2s ease 0s 1 both;
}
@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 2;
    transform: translateY(0);
  }
}



.fadein_up {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1.5s;
}
.fadein_up_02 {
  opacity: 0;
  transform: translate(0, 200px);
  transition: all 3s;
}
.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* ボタン
-------------------------------------------------- */
.btn {
  display: block;
  position: relative;
  margin: 0 auto;
}

.btn_img {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/main_btn.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.fv_btn_wrap {
  width: 73vw;
  height: 15.841vw;
}
@media screen and (min-width: 769px) {
  .fv_btn_wrap {
    width: 18vw;
    height: 3.841vw;
    max-width: 308px;
    max-height: 66px;
  }
}



.jeanne_data {
  background-image: url(../img/btn_jeanne_data.png);
}
.jeanne_sample {
  background-image: url(../img/btn_jeanne_sample.png);
}

.bathory_data {
  background-image: url(../img/btn_bathory_data.png);
}
.bathory_sample {
  background-image: url(../img/btn_bathory_sample.png);
}

.dracula_data {
  background-image: url(../img/btn_dracula_data.png);
}
.dracula_sample {
  background-image: url(../img/btn_dracula_sample.png);
}


.comic_btn_wrap {
  display: flex;
  margin-top: 4vw;
}
.comic_btn_box {
  width: 41vw;
  height: 8.841vw;
}
@media screen and (min-width: 769px) {
  .comic_btn_wrap {
    margin-top: 6%;
  }
  .comic_btn_box:nth-of-type(1) {
    margin-right: 2%;
  }
}


.item_btn_box {
  height: 8.841vw;
  margin-top: 3vw;
}
@media screen and (min-width: 769px) {
  .item_btn_box {
    height: 2.841vw;
    margin-top: 2rem;
    width: 12vw;
    max-width: 216px;
    max-height: 47px;
  }
}


/* ヒーロー
-------------------------------------------------- */
.hero {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .hero {
    height: 50vw;
  }
}

.hero::before {
  content: "";
  display: block;  
  position: fixed;
  top: -50px;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 110vh;
  background-image: url(../img/sp_main_bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
@media screen and (min-width: 769px) {
  .hero::before {
    background-image: url(../img/main_bg.jpg);
    background-size: cover;
  }
}

.hero_wrap {
  position: relative;
  padding: 10vw 0;
}

.main_chara {
  width: 100%;
  position: fixed;
  top: -23px;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .main_chara {
    top: 0;
  }
}

@media screen and (min-width: 769px) {
  .chara_wrap {
    display: flex;
    margin: 0 auto;
  }
}

.circle_logo {
  position: absolute;
  left: 3%;
  top: 1.5vw;
  width: 18%;
}
@media screen and (min-width: 769px) {
  .circle_logo {
    left: auto;
    right: 3%;
    max-width: 132px;
  }
}

.main_catch {
  position: absolute;
  right: 2%;
  top: 16vw;
  width: 17%;
}
@media screen and (min-width: 769px) {
  .main_catch {
    right: auto;
    left: 2%;
    top: 0;
    width: 7vw;
    max-width: 118px;
  }
}

.tokuten_fv {
  position: absolute;
  left: 4%;
  top: 6vw;
  width: 50%;
}
@media screen and (min-width: 769px) {
  .tokuten_fv {
    left: 65vw;
    top: 22vw;
    width: 26vw;
    max-width: 416px;
  }
}

.main_info_wrap {
  top: 97vw;
  padding: 0 4.5%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  padding-top: 83vw;
}
@media screen and (min-width: 769px) {
  .main_info_wrap {
    top: 22vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 0;
  }
}

.main_logo {
  width: 58vw;
}
@media screen and (min-width: 769px) {
  .main_logo {
    width: 28vw;
    max-width: 420px;
    margin: 0 auto;
  }
}


.fv_btn_wrap {
  margin-top: 5vw; 
}
@media screen and (min-width: 769px) {
  .fv_btn_wrap {
    margin-top: 2vw; 
  }
}


/* 薔薇シルエット
-------------------------------------------------- */
.bara {
  width: 150vw;
  position: relative;
  left: -28vw;
  top: 1vw;
}
@media screen and (min-width: 769px) {
  .bara {
    width: 100vw;
    left: 0;
    top: 1vw;
  }
}


/* イントロダクション
-------------------------------------------------- */
.black_bg {
  background-image: url(../img/bg_bara02.png), url(../img/kuro.png);
  background-repeat: no-repeat, repeat;
  background-position: top center;
  background-size: 450vw;
}
@media screen and (min-width: 769px) {
  .black_bg {
    background-size: 100vw;
  }
}

.intro_wrap {
  text-align: center;
}

.intro_title {
  width: 70vw;
  margin: 0 auto;
  padding-top: 10vw;
}
@media screen and (min-width: 769px) {
  .intro_title {
    max-width: 385px;
  }
}

.intro_txt {
  background-image: url(../img/intro_bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 124vw;
  line-height: 9vw;
  font-size: 4vw;
  margin-top: 10vw;
}
@media screen and (min-width: 769px) {
  .intro_txt {
    background-size: 89rem;
    margin-top: 7rem;
    font-size: 2rem;
    line-height: 5rem;
  }
}

.intro_txt span {
  font-size: 6.3vw;
}
@media screen and (min-width: 769px) {
  .intro_txt span {
    font-size: 3rem;
  }
}


/* イントロ漫画 */
@media screen and (min-width: 769px) {
  .intro_mng_wrap {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}

.intro_mng {
  margin: 0 auto;
  background-image: url(../img/kusari.png);
  background-repeat: repeat;
  background-position: top 63vw left -26vw;
  background-size: 371vw;
  padding: 8vw;
}
@media screen and (min-width: 769px) {
  .intro_mng {
background-image: url(../img/kusari.png), url(../img/kusari02.png), url(../img/kusari.png), url(../img/kusari03.png);
    background-repeat: no-repeat;
    background-position: top 23vw center, top 72vw center, top 89vw center, top 166vw center;
    background-size: 100vw;
  }
}

.intro_mng_inner {
  margin-top: 5vw;
}
@media screen and (min-width: 769px) {
  .intro_mng_inner {
    margin-top: 10vw;
    width: 40vw;
  }
}

@media screen and (min-width: 769px) {
  .intro_mng_inner.zure {
    position: relative;
    top: 5vw;
  }
  .intro_txt.zure {
    background-image: none;
    margin-top: 15vw;
  }
}

.mng_catch {
  width: 23vw;
  margin: 0 auto;
  margin-top: 13vw;
}
@media screen and (min-width: 769px) {
  .mng_catch {
    margin-top: 10vw;
    width: 8vw;
  }
}


/* ストーリー
-------------------------------------------------- */
.story {
    text-align: center;
}

.story_title {
  width: 70vw;
  margin: 0 auto;
  padding-top: 15vw;
}
@media screen and (min-width: 769px) {
  .story_title {
    max-width: 385px;
  }
}

.story_txt {
  line-height: 9vw;
  font-size: 4vw;
  margin-top: 10vw;
}
@media screen and (min-width: 769px) {
  .story_txt {
    line-height: 5rem;
    font-size: 2rem;
    margin-top: 5rem;
  }
}

/* swiper */
.swiper-container {
  margin-top: 10vw;
}
@media screen and (min-width: 769px) {
  .swiper-container {
    margin-top: 5rem;
  }
  .swiper-container.story_swiper {
    max-width: 1080px;
  }
}

.mng_sample_swiper {
  padding: 0 2em;
}
@media screen and (min-width: 769px) {
  .mng_sample_swiper {
    padding: 0 2em;
  }
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  position: static;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 92px;
  height: 92px;
  max-width: calc(91vw / 4);
  max-height: calc(91vw / 4);
  background-size: 100%;
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .swiper-pagination .swiper-pagination-bullet {
    width: 120px;
    height: 120px;
  }
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 0.7;
}

.swiper-pagination .swiper-pagination-bullet:hover {
  opacity: 0.7;
}

.swiper-pagination .swiper-pagination-bullet:nth-of-type(1) {
  background-image: url(../img/title_jeanne.png);
  background-repeat: no-repeat;
  background-position: top;
  background-color: transparent;
}

.swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
  background-image: url(../img/title_bathory.png);
  background-repeat: no-repeat;
  background-position: top;
  background-color: transparent;
}

.swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
  background-image: url(../img/title_dracula.png);
  background-repeat: no-repeat;
  background-position: top;
  background-color: transparent;
}



/* 作品詳細 */
.story_comic_ttl {
  color: #CD9E60;
  font-family: dnp-shuei-4gob-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8vw;
  letter-spacing: 1vw;
  line-height: 9vw;
  margin-top: 5vw;
}
@media screen and (min-width: 769px) {
  .story_comic_ttl {
    font-size: 5rem;
    line-height: 5rem;
  }
}

.story_comic_ttl span {
  font-size: 3vw;
  letter-spacing: 3.3vw;
}
@media screen and (min-width: 769px) {
  .story_comic_ttl span {
    font-size: 1rem;
  }
}

.story_comic_wrap {
  background-image: url(../img/bg_jeanne_story.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  margin-top: 5vw;
}
.story_comic_wrap.bat {
  background-image: url(../img/bg_bathory_story.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  margin-top: 5vw;
}
.story_comic_wrap.dra {
  background-image: url(../img/bg_doracula_story.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  margin-top: 5vw;
}
@media screen and (min-width: 769px) {
  .story_comic_wrap {
    background-size: contain;
    margin-top: 3%;
  }
  .story_comic_wrap.bat {
    background-image: url(../img/bg_bathory_story.png);
    background-size: contain;
    margin-top: 3%;
  }
  .story_comic_wrap.dra {
    background-image: url(../img/bg_doracula_story.png);
    background-size: contain;
    margin-top: 3%;
  }
}

.story_comic_wrap {
  display: flex;
  flex-direction: column-reverse;
}
@media screen and (min-width: 769px) {
  .story_comic_wrap {
    flex-direction: row;
    padding: 0 8%;
  }
}

.comic_hyoushi {
  width: 70vw;
  margin: 0 auto;
}

.comic_box {
  width: 90vw;
  margin: 0 auto;
  margin-top: 4vw;
}
@media screen and (min-width: 769px) {
  .comic_box {
    width: 47%;
    margin: 0;
    margin-top: 6%;
    margin-right: 3%;
  }
}

@media screen and (min-width: 769px) {
  .comic_sample {
    display: flex;
  }
  .story_swiper_comic {
    width: 50%;
  }
}

.comic_txt {
  font-size: 3.3vw;
  line-height: 6.5vw;
  text-align: justify;
}
@media screen and (min-width: 769px) {
  .comic_txt {
    font-size: 1.6rem;
    line-height: 3rem;
    margin-top: 2rem;

  }
}



/* インフォメーション
-------------------------------------------------- */
.info {
  margin-top: 30vw;
  background-image: url(../img/bg_info.png);
  background-repeat: repeat;
  background-position: top left;
  background-size: 13vw;
  text-align: center;
  padding: 0 5vw;
  padding-top: 15vw;
  padding-bottom: 20vw;
}
@media screen and (min-width: 769px) {
  .info {
    background-image: url(../img/kusari04.png), url(../img/bg_info.png);
    background-repeat: no-repeat, repeat;
    background-position: top 27vw center, top left;
    background-size: contain, 8vw;
    padding-top: 6vw;
    padding-bottom: 6vw;
    margin-top: 18rem;
  }
}

.info_title {
  width: 70vw;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .info_title {
    max-width: 385px;
  }
}

.info_txt {
  font-size: 5.5vw;
  letter-spacing: 1.5vw;
  margin-top: 7vw;
}
@media screen and (min-width: 769px) {
  .info_txt {
    font-size: 3rem;
    letter-spacing: 1.5vw;
    margin-top: 7rem;
  }
}

.item_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
@media screen and (min-width: 769px) {
  .item_wrap {
    max-width: 1200px;
    margin: 0 auto;
  }
}

.item {
  width: 40vw;
  margin-top: 15vw;
}
@media screen and (min-width: 769px) {
  .item {
    width: 18%;
    margin-top: 7%;
  }
}

.item_txt {
  font-size: 4vw;
  margin-top: 2vw;
  line-height: 7vw;
}
.item_txt strong {
  background-color: #8F0A0A;
  font-size: 4vw;
  padding: 0 2vw;
}
.item_txt s {
  font-size: 3.3vw;
  padding-left: 1vw;
}
.item_txt span::before {
  font-family: "Font Awesome 5 Pro";
  content: '\f0da';
  font-size: 3vw;
  font-weight: 600;
  margin-right: 1vw;
  transform: translateY(20vw);
}
.item_txt span {
  margin-left: 1vw;
}
@media screen and (min-width: 769px) {
  .item_txt {
    font-size: 2rem;
    margin-top: 2rem;
    line-height: 4rem;
  }
  .item_txt strong {
    font-size: 2rem;
    padding: 0 2rem;
  }
  .item_txt s {
    font-size: 1.7rem;
    padding-left: 0;
  }
  .item_txt span {
    margin-left: 1vw;
  }
  .item_txt span::before {
    font-size: 2rem;
    margin-right: 1rem;
  }
}


.item_tokuten {
  width: 80vw;
  margin-top: 15vw;
}
@media screen and (min-width: 769px) {
  .item_tokuten {
    width: 38%;
    margin-top: 11%;
  }
}

/* 割引無しver */
.item_txt.price_off {
  display: none;
}
.item_txt span::before {
  display: none;
}
.item_txt span {
  margin-left: 0;
}


/* ロゴ
-------------------------------------------------- */
.logo_company {
  margin-top: 15vw;
  padding-bottom: 4vw;
}
@media screen and (min-width: 769px) {
  .logo_company {
    padding-bottom: 4vw;
  }
}

.logo_wrap {
  display: flex;
  justify-content: center;
}

.dlsite_logo {
  width: 30vw;
  transform: translateY(1.2vw);
  margin-right: 6vw;
}
.circle_logo_siro {
  width: 30vw;
}
@media screen and (min-width: 769px) {
  .dlsite_logo {
    max-width: 164px;
    transform: translateY(0.5vw);
    margin-right: 6rem;
  }
  .circle_logo_siro {
    max-width: 163px;
  }
}

.txt_s {
  margin-top: 12vw;
  text-align: center;
  font-size: 3vw;
  line-height: 6vw;
}
@media screen and (min-width: 769px) {
  .txt_s {
    font-size: 1.3rem;
    line-height: 0;
  }
}


/* モーダル
-------------------------------------------------- */
/* これが無いとモーダルウィンドウ表示の際に余白が出る */
*{
  margin: 0;
  padding: 0;
}

/* モーダル全体(背景＋本体) */
.modal {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}

.modal_jean .modal_01 {
  opacity: 1;
  pointer-events: auto;
}
.modal_bat .modal_02 {
  opacity: 1;
  pointer-events: auto;
}
.modal_dra .modal_03 {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景 */
.modal-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */
.modal-content {
  position: absolute;
  width: 90%;
  max-width: 514px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}


.samplebutton_img {
  background-image: url(../img/main_btn.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.samplebutton {
  width: 73vw;
  height: 15.841vw;
}

.mng_sample_swiper .swiper-navigation {
  position: relative;
}

.modal .swiper-button-prev {
  position: absolute;
  top: 15em;
  left: -2em;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 769px) {
  .modal .swiper-button-prev {
    top: 25em;
  }
}

.modal .swiper-button-next {
  position: absolute;
  top: 15em;
  right: -2em;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 769px) {
  .modal .swiper-button-next {
    top: 25em;
  }
}

.js-modal-close {
  font-size: 3em;
  cursor: pointer;
}