@charset "utf-8";
/* CSS Document */

/*------------------------------
 ▼共通デザイン
 -------------------------------*/
body {
  font-family: "Noto Sans JP", "Noto Color Emoji",sans-serif;
  font-size: 16px;
  color: #1A1311;
  line-height: 1.5;
  text-align: center;
}

html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }

img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

* {
  box-sizing: border-box;
}

.campaign__detail-title {
  position: relative;
  font-size: 1.3em;
}

.comic .campaign__detail-title {
  font-size: 1.6em;
}

/*------------------------------
 ▼MV
 -------------------------------*/

.mv {
  position: relative;
  min-height: 630px;
}

@media screen and (max-width: 768px) {
  .mv {
    min-height: auto;
  }
}

.mv__img {
  display: inline-block;
  width: auto;
  height: 100vh;
  object-fit: cover;
}

.mv__wrapper {
  white-space: nowrap;
  animation: loop-slide 50s infinite linear 1s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.mv__wrapper-container {
  display: flex;
  overflow: hidden;
}

.mv__catch {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 800px;
  width: 90%;
  padding: 34px;
  background: rgba(255, 255, 255, 0.9);
  border: 10px solid #fff;
}

.mv__catch-img {
  max-width: 732px;
}

.mv__catch-main-sub {
  display: flex;
  justify-content: center;
  max-width: 400px;
  width: 86%;
  margin: 0 auto 8px;
  gap: 0 15px;
}

.mv__catch-main-period {
  padding: 8px 16px;
  font-size: 32px;
  color: #fff;
  background: #1A1311;
}

.mv__logo {
  max-width: 288px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(60%);
  -webkit-transform: translateY(60%);
}

/*------------------------------
 ▼about
 -------------------------------*/

.about {
  max-width: 800px;
  margin: 200px auto 120px;
  padding: 0 16px;
}

.about__txt-wrapper {
  line-height: 3;
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
}

.about__txt-span {
  display: block;
  font-weight: 300;
  margin: 40px 0 0 0;
}


/*------------------------------
 ▼campaign-catch
 -------------------------------*/
.campaign-catch {
  display: table;
  width: 100%;
  background: #eee;
}

.campaign-catch__wrapper {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 30px 160px;
}

.campaign-catch__img-pc {
  margin-top: -94px;
  display: block;
  width: 100%;
}

.campaign-catch__img-sp {
  margin-top: -16%;
  display: none;
  width: 100%;
}

/*------------------------------
 ▼novel
 -------------------------------*/

.novel {
  padding: 80px 16px;
  background-image: url(../images/novel_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.novel__title-img {
  max-width: 440px;
}

.campaign {
  position: relative;
  background: #fff;
  border-radius: 54px;
  max-width: 960px;
  margin: 100px auto 0;
  padding: 70px 0 60px;
}

.campaign__detail {
  display: flex;
  justify-content: center;
  margin: 0 0 40px;
}

.campaign__detail-title > span {
  margin: 0 auto 2px;
  display: table;
  padding: 2px 1em;
  color: #fff;
  background: #1A1311;
  font-size: 0.8em;
}

.campaign__detail-title-sub {
  background: repeating-linear-gradient(45deg, #E7E7E6, #E7E7E6 2px, #fff 0, #fff 6px);
  padding: 5px;
  margin: 24px 0 16px 0;
  line-height: 1;
}

.campaign__detail-title-price {
  margin: 24px auto 10px;
  display: table;
  position: relative;
  line-height: 1;
  font-size: 1.4em;
  font-weight: bold;
}

.campaign__detail-title-price > span {
  font-size: 0.8em;
}

.campaign__detail-title-price::before {
  margin: auto;
  position: absolute;
  left: -0.7em;
  top: 0.3em;
  bottom: 0;
  content: '';
  width: 2px;
  height: 1.2em;
  background-color: #1A1311;
  border-radius: 3px;
  transform: rotate(-30deg);
}

.campaign__detail-title-price::after {
  margin: auto;
  position: absolute;
  right: -0.7em;
  top: 0.3em;
  bottom: 0;
  content: '';
  width: 2px;
  height: 1.2em;
  background-color: #1A1311;
  border-radius: 3px;
  transform: rotate(30deg);
}


.campaign__detail-day {
  font-size: 20px;
  font-weight: bold;
}

.campaign__detail-img-wrapper {
  display: flex;
  border: 2px solid #eee;
  padding: 8px 20px;
  width: 100%;
  margin: 0 0 8px;
  height: 60px;
}

.campaign__detail-img {
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.campaign__detail-txt + .campaign__detail-img-wrapper {
  margin-top: 16px;
}

.campaign__detail-txt-bg {
  font-weight: bold;
  color: #70479A;
  background: #F2E8FD;
  padding: 8px;
}

.campaign__detail-item {
  padding: 50px 80px 0;
  position: relative;
  width: 50%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.campaign__detail-item:first-child {
  border-right: 2px dashed #1A1311;
}

.campaign__num {
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 180px;
  -webkit-transform: translateY(-86%);
  transform: translateY(-86%);
}

.novel__introduction {
  margin: 0 auto;
  font-size: 40px;
  color: #fff;
  display: table;
  position: relative;
  padding: 90px 0 60px;
  font-weight: bold;
  text-shadow: 1px 2px 12px #1A1311;
}

.novel__introduction::before {
  margin: auto;
  position: absolute;
  left: -1em;
  top: 0.6em;
  bottom: 0;
  content: '';
  width: 2px;
  height: 2em;
  background-color: #fff;
  border-radius: 3px;
  transform: rotate(-30deg);
  box-shadow: 1px 2px 12px #1A1311;
}

.novel__introduction::after {
  margin: auto;
  position: absolute;
  right: -0.6em;
  top: 0.6em;
  bottom: 0;
  content: '';
  width: 2px;
  height: 2em;
  background-color: #fff;
  border-radius: 3px;
  transform: rotate(30deg);
  box-shadow: 1px 2px 12px #1A1311;
}

.novel__list {
  display: flex;
  animation: loop-slide 45s infinite linear 1s both;
}

.novel__list-item_new {
  position: relative;
}

.novel__list-item_new::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -10px;
  display: inline-block;
  width: 66px;
  height: 66px;
  background-image: url(../images/new.png);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.novel__list-wrapper {
  display: flex;
  margin: 0 -16px;
}

.novel__list-item {
  width: 162px;
  margin: 0 12px;
}

.campaign__detail-notes {
  font-size: 12px;
}

.campaign__detail-title::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: inline-block;
  width: 34px;
  height: 13px;
  background-image: url(../images/deco.png);
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
}


/*------------------------------
 ▼comic
 -------------------------------*/
.comic {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(67, 67, 67), rgba(243, 130, 0)), url(../images/comic_bg.jpg);
  background-blend-mode: screen;
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  overflow: hidden;
}

.comic__title-img {
  max-width: 622px;
}

/*   ここからキャンペーンの設定   */

.comic .campaign {
  background: none;
  margin: 60px auto 0;
  padding: 0 0 40px;
}

.comic .campaign__detail {
  flex-wrap: wrap;
}

.comic .campaign__detail-item {
  background: #fff;
  margin: 12px;
  border-right: none;
  border: 4px solid #1A1311;
  width: calc(50% - 24px);
  padding: 40px 32px;
}

.comic .campaign__discount {
  top: -265px;
}

.comic .campaign__discount-img {
  max-width: 320px;
}

.campaign__detail-img-wrapper_third {
  background: #B44D79;
}

.campaign__detail-img-wrapper_fourth {
  background: #70479A;
}

.campaign__detail-img-wrapper_fifth {
  background: #ED96D9;
}

.campaign__detail-img-wrapper_sixth {
  background: #eee;
}

.campaign__detail-img-wrapper_L {
  min-height: 80px;
}

/*   ここまで  */

/*------------------------------
 ▼X
 -------------------------------*/

.x-campaign {
  padding: 80px 24px;
  background-image: url(../images/x_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.x__campaign-title-img {
  max-width: 700px;
}

.x-campaign__txt {
  font-size: 40px;
  font-weight: bold;
  background: linear-gradient(180deg, transparent, #ffffff, transparent);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 110px 35px;
}

.x-campaign__title-sub {
  font-size: 32px;
  color: #fff;
  margin: 80px 0 32px 0;
}

.x-campaign__day {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.x-campaign__flow-list {
  display: flex;
}

.x-campaign__flow-list-item {
  width: 33.3%;
  list-style-type: none;
  margin: 0 24px 0 0;
}

.x-campaign__flow-list-item:last-child {
  margin: 0;
  ;
}

.x-campaign__flow-img {
  display: block;
  width: 100%;
  padding: 0 0 16px 0;
  background: #fff;
}

.x-campaign__wrapper {
  max-width: 960px;
  margin: 0 auto;
}

.x-campaign__detail {
  padding: 0 20px;
}

.x-campaign__terms-detail {
  font-size: 12px;
  background: #fff;
  padding: 40px 160px;
  height: 400px;
  overflow-y: scroll;
  text-align: start;
}

.x-campaign__flow-txt {
  margin: 24px 0 0 0;
  color: #fff;
  font-size: 24px;
}

.link{
  font-size: 14px;
  color: #F38200;
}

.x-campaign__flow-explanation-container {
  position: relative;
  height: 122px;
  background: #fff;
  border-top: 2px dashed #1A1311;
}

.x-campaign__flow-explanation {
  width: 100%;
  padding: 0 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*------------------------------
 ▼store
 -------------------------------*/

.store {
  padding: 0 0 80px;
  overflow: hidden;
}

.store__promotion {
  display: flex;
  align-items: center;
  padding: 0 0 0 30px;
}

.store__promotion-title {
  display: inline-block;
  font-size: 40px;
  text-align: start;
}

.store__promotion-img-wrapper {
  width: 60%;
  position: relative;
}

.store__promotion-title-important {
  background: linear-gradient(transparent 70%, #F38200 50%);
}

.store__promotion-title-day {
  font-size: 64px;
}

.store__promotion-title-wrapper {
  width: 40%;
}

.store__promotion-title-txt {
  display: block;
  margin: 20px 0 0 0;
}

.store__promotion-img-wrapper::after {
  content: "";
  position: absolute;
  width: 622px;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #ffffff, transparent);
}

.store__logo-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  max-width: 960px;
  margin: 0 auto ;
  padding: 0 16px;
  align-items: flex-start;
}

.store__logo-container {
  width: 100%;

}

.store__logo-wrapper {
  display: block;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
}

.store__logo-wrapper:hover {
  opacity: .6;
}

.store__logo {
  height: 60px;
  object-fit: contain;
}

.store__txt-wrapper {
  padding: 4px;
}

.store__txt {
  font-size: 14px;
}

.store__txt a {
  color: #F38200;
}

.store__txt a:hover {
  text-decoration: underline;
}

.store__title {
  margin: 80px 0 0;
  font-size: 30px;
  line-height: 1.3;
}

.store__title-sub {
  margin: 4px auto 32px;
  padding: 2px 1em 2px 1.5em;
  display: table;
  font-size: 14px;
  color: #fff;
  background: #1A1311;
  font-weight: bold;
  letter-spacing: 0.5em;
  -webkit-border-radius: 6px;
          border-radius: 6px;
}

.store .link{
  font-size: 12px;
  color: #1A1311;
}

.store .link:hover{
  color: #F38200;
}

/*------------------------------
 ▼footer
 -------------------------------*/

.footer__container {
  padding: 40px 16px 16px;
  background: #F2F2F2;
  font-size: 12px;
  text-align: center;
}

.footer__container-img {
  width: 200px;
  padding: 0 0 24px;
}

.footer__txt {
  padding: 12px;
  background: #231E31;
  color: #aaa;
  font-size: 10px;
  text-align: start;
}

.message__list-img:hover {
  opacity: .6;
}

.message__list-link:hover {
  opacity: .6;
}
.novel__list-item:hover {
  opacity: .8;
}

.link:hover {
  border-bottom: 1px solid #F38200;
}

.comingsoon {
  margin: 0 auto;
  padding: 0 16px;
  max-width: 960px;
}

.comingsoon > p {
  border-radius: 6px;
  padding: 40px 8px;
  text-align: center;
  font-size: 13px;
  background-color: #f6f6f6;
}

/*------------------------------
/*------------------------------
 ▼レスポンシブ
 -------------------------------*
 -------------------------------*/

@media screen and (max-width: 768px) {

  /*------------------------------
 ▼MV
 -------------------------------*/

  .mv__catch-main-period {
    font-size: 14px;
  }

  .mv__catch-main-period > span {
    position: relative;
  }

  .mv__catch {
    padding: 2px;
  }

  .mv__logo {
    max-width: 200px;
  }

  .mv__img {
    height: 80vh;
  }

  .mv__catch-main-sub {
    position: relative;
    padding: 26% 0 0 0;
    margin: 0 auto;
  }

  .mv__catch-main-sub-item {
    position: absolute;
    width: 50%;
  }

  .mv__catch-main-sub-item_left {
    top: 0;
    left: 0%;
  }

  .mv__catch-main-sub-item_center {
    bottom: 5%;
    right: 0;
  }

  .mv__catch-main-sub-item_right {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }


  /*------------------------------
 ▼about
 -------------------------------*/
  .about {
    margin-top: 145px;
  }

  .about__txt-wrapper {
    text-align: start;
    line-height: 2.2;
  }

  .br-delete {
    display: none;
  }

  .about__txt-span {
    margin: 32px 0 0 0;
    line-height: 1;
  }


  /*------------------------------
 ▼campaign
 -------------------------------*/

  .campaign-catch__img-pc {
    display: none;
    width: 100%;
  }

  .campaign-catch__img-sp {
    display: block;
    width: 100%;
  }


  /*------------------------------
 ▼novel
 -------------------------------*/

  .campaign__discount-img {
    max-width: 140px;
    margin: 0 6px auto;
  }

  .novel__title-img {
    max-width: 311px;
  }

  .campaign {
    max-width: 520px;
    margin: 102px auto 0;
    padding: 80px 40px 24px;
    border-radius: 16px;
  }

  .campaign__discount {
    top: -70px;
  }

  .campaign__detail-item {
    padding: 34px 0 24px;
    width: auto;
  }

  .campaign__detail {
    flex-direction: column;
    margin: 0;
  }

  .novel .campaign__detail-item:first-child {
    border-bottom: 2px dashed #1A1311;
    border-right: none;
    padding-bottom: 90px;
  }

  .novel .campaign__detail-item + .campaign__detail-item {
    padding-top: 90px;
  }

  .campaign__num {
    width: 140px;
  }

  .novel .campaign__detail-item .campaign__num {
    -webkit-transform: translateY(-95%);
    transform: translateY(-95%);
  }

  .novel .campaign__detail-item + .campaign__detail-item .campaign__num {
    -webkit-transform: translateY(-55%);
    transform: translateY(-55%);
  }

  .novel__introduction {
    font-size: 24px;
  }

  .novel__introduction::before {
    top: 1em;
  }

  .novel__introduction::after {
    top: 1em;
  }

  .campaign__detail-notes {
    text-align: start;
  }

  /*------------------------------
 ▼comic
 -------------------------------*/

  .comic .campaign__discount-img {
    max-width: 172px;
    margin: 0;
  }

  .comic .campaign__detail-item {
    padding: 40px 24px;
    margin: 0 0 24px 0;
    width: 100%;
  }

  .comic .campaign {
    width: 100%;
    padding: 0 20px;
  }

  .comic .campaign__discount {
    top: -145px;
  }

  .comic .campaign__detail-title-price {
    font-size: 1.3em;
    white-space: nowrap;
  }

  /*------------------------------
 ▼X
 -------------------------------*/

  .x-campaign__flow-list {
    flex-direction: column;
    align-items: center;
  }

  .x-campaign__flow-list-item {
    width: 100%;
    margin: 0 0 24px 0;
  }

  .x-campaign__terms-detail {
    padding: 24px;
  }

  .x-campaign__txt {
    font-size: 20px;
  }

  .x-campaign__txt {
    padding: 55px 35px;
  }

  /*------------------------------
 ▼store
 -------------------------------*/

  .store__promotion {
    flex-direction: column;
  }

  .store__promotion-title-wrapper {
    width: 100%;
  }

  .store__promotion-img-wrapper {
    width: 100%;
  }

  .store {
    padding: 40px 0;
  }

  .store__promotion-title {
    text-align: center;
    font-size: 28px;
  }

  .store__promotion-title-day {
    font-size: 46px;
  }

  .store__promotion-img-wrapper::after {
    background: linear-gradient(180deg, #ffffff, transparent);
    height: 134px;
    width: 100%;
  }

  .store__logo-list {
    grid-template-columns: 1fr 1fr 1fr;
  }


  .store__promotion {
    padding:0;
  }

  .store__logo {
    height: 32px;
  }


}

@media screen and (max-width: 600px) {
  .mv__catch-main-sub {
    padding: 35% 0 0 0;
  }

  .store__title {
    font-size: 20px;
    margin: 40px 0 0;
  }
}

@media screen and (max-width: 360px) {
  .comic .campaign__detail-title-price {
    font-size: 1.15em;
  }
}