@charset "UTF-8";

/* ====================================
▼「悪食令嬢と狂血公爵」特集▼
==================================== */
/* LP全体 */
#lp-akujiki {
  width: 100%;
  max-width: 770px;
  /*スマホは max-width: 480px;*/

  margin: 0 auto;

  background-color: #f6e1e6;

  color: #000;
  font-size: 100%;
  font-weight: normal;
  text-align: left;

  border: 0;
}

#lp-akujiki img {
  display: block;
  border: none;

  /*スマホは max-width: 100%;*/
  height: auto;
}

/* ====================================
▼メインビジュアル▼
==================================== */
.lp-akujiki__hero-img {
  width: 100%;
}


/* ================================
▼ 導入▼
================================ */
#lp-akujiki .lp-akujiki__intro-stage {
  position: relative;
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
}

/* 背景舞台画像 */
#lp-akujiki .lp-akujiki__intro-bg {
  display: block;
  width: 100%;
}

/* シーン画像を重ねる */
#lp-akujiki .lp-akujiki__intro-slides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* シーン画像 背景と同じサイズ */
#lp-akujiki .lp-akujiki__intro-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* 表示中 */
#lp-akujiki .lp-akujiki__intro-slide.is-active {
  opacity: 1;
}

/* スクロールトリガー用 */
.js-intro-trigger {
  height: 1px;
}

/* ====================================
▼魔物食とは？世界観▼
==================================== */
/* 4枚重ねる */
.world-stack {
  position: relative;
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
  overflow: hidden;
}

/* 画像比率で高さを決める */
.world-stack::before {
  content: "";
  display: block;
  padding-top: 266%;
}

/* レイヤー画像 */
.world-layer {
  position: absolute;
  inset: 0;
  /* top/right/bottom/left: 0;*/

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 背景とフレームの重なり順 */
.world-layer--bg {
  z-index: 1;
}

.world-layer--frame {
  z-index: 4;
}

/* 中央のコマ（01・02） */
.world-scene {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.world-scene.is-active {
  opacity: 1;
}

/* ====================================
▼魔物グルメ▼
==================================== */
.lp-akujiki__gourmet {
  background: linear-gradient(to bottom, #eda6b3, #fff, #eda6b3, transparent);

  padding: 40px 0 80px;
  text-align: center;
}

/* 見出し帯 */
.gourmet-heading img {
  width: 100%;
  padding: 0 29px;
  margin: 0 auto 20px;
  display: block;
}

/* 料理名＋左右ナビ */
.gourmet-nav {
  position: relative;
  width: 100%;
  margin: 0 auto 36px;

  background-color: #8c2a54;
  /* 帯の背景色 */

  padding: 12px 0;
  box-sizing: border-box;
}

.gourmet-nav__band {
  max-width: 500px;
  margin: 0 auto;
}

/* 料理名画像中央寄せ */
.gourmet-nav__title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gourmet-nav__title img {
  display: block;
  width: 100%;
  max-width: 500px;
}

/* 矢印 */
.gourmet-nav__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.gourmet-nav__arrow img {
  width: 100%;
  max-width: 91px;
  display: block;
}

/* 位置 */
.gourmet-nav__arrow--prev {
  left: 24px;
}

.gourmet-nav__arrow--next {
  right: 24px;
}

/* 皿＋料理画像 */
.gourmet-plate {
  position: relative;
  width: 100%;
  margin: 0 auto 24px;
}

.gourmet-plate__bg {
  width: 100%;
  display: block;
}

.gourmet-plate__main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 668px;
  display: block;
  transition: opacity 0.35s ease;
  opacity: 1;
}

/* フェード用クラス */
.gourmet-plate__main.is-fading {
  opacity: 0;
}

/* 食材／調理／実食タブ */
.gourmet-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.gourmet-tab {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.gourmet-tab img {
  width: 100%;
  max-width: 200px;
  display: block;
}

/* アクティブなタブは少し大きく＆明るく */
.gourmet-tab--active {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}

/* ====================================
▼キャラ紹介▼
==================================== */
#lp-akujiki .ch-card {
  width: 100%;
  margin: 0 auto;
}

#lp-akujiki .ch-card__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 背景画像：高さの基準 */
#lp-akujiki .ch-card__bg {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* 前面で切り替わる2枚 */
#lp-akujiki .ch-card__img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 770px;
  /* 元サイズに合わせる */
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 2;
  /* 背景より前面 */
}

/* 表示中 */
#lp-akujiki .ch-card__img.is-active {
  opacity: 1;
}

/* ====================================
▼エピローグ▼
==================================== */
.epilogue {
  width: 100%;
  text-align: center;
}

.epilogue-img {
  width: 100%;
  max-width: 770px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ====================================
▼コピーライト▼
==================================== */
.lP_copy {
  background-color: #d73d73;
  padding: 6px 0px 4px;
}

.lP_copy p {
  text-align: center;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  font-family: "メイリオ", "Meiryo", sans-serif;
}

/* ====================================
▼作品エリア▼
==================================== */
.books-section {
  padding: 40px 0 20px;
  background-color: #fff;
}

/* 作品エリア内の画像 */
.books-section img {
  max-width: 100%;
}

.books-inner {
  padding: 0 40px;
}

/* 見出しリボン　*/
.books-title {
  margin: 0 29px 20px;
}

/* キャンペーン　*/
.books-campaign {
  margin-bottom: 48px;
}

/* COMIC セクション見出し */
.books-section-heading {
  margin-bottom: 24px;
}

.books-section-heading2 {
  margin-top: 40px;
}


.books-section-heading img {
  width: 100%;
  margin: 0 auto;
}

/* COMIC3列エリア */
.books-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

.books-list-comic .book-card {
  width: 30%;
  /* 3列 */
}

/* 共通：書影カード & ボタン */
.book-card {
  box-sizing: border-box;
}

.book-cover {
  margin-bottom: 4px;
  text-align: center;
}

.book-cover img {
  display: block;
  margin: 0 auto;
}

.book-btn {
  text-align: center;
  width: 96%;
  margin: 12px auto 24px;
}

/* COMIC2列エリア */
.big-books-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 16px;
  margin: 12px 0;
}

.big-books-item {
  flex: 1 1 calc(50% - 16px);
  display: flex;
  justify-content: center;
}

.big-books-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  padding: 0 24px;
  text-align: center;
  background: transparent;
  box-sizing: border-box;
}

.big-books-cover {
  display: block;
  width: 100%;
  height: auto;
}

/* COMIC2列 背景カード */
.big-books-card--highlight {
  background: #ef8ea1;
}

.big-books-card--highlight2 {
  background: #fff;
}

/* NEW / 分冊版 / ファンブックのラベル */
.novelbig-books-card--label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  height: auto;
  pointer-events: none;
}

/* 書影 */
.big-books-cover2 {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 100px;
  /* ラベルのぶん下げる */
}

/* ボタンと書影に影 */
.book-cover img,
.book-btn img,
.big-books-cover {
  filter: drop-shadow(0 4px 12px rgba(182, 52, 98, 0.4));
}


.books-section {
  background: linear-gradient(to bottom, #fff, #eeb3bf, #fff, #fff, #eeb3bf);
}