@charset "UTF-8";
/* ------------------------------------------------------------------------------------------------------------------
 めるぺろリニューアル特集LP (article2605_01)
 Figma PC : https://www.figma.com/design/X5vL8fnXgHuTECqEvfcwAs/?node-id=35-108
 Figma SP : https://www.figma.com/design/X5vL8fnXgHuTECqEvfcwAs/?node-id=34-360

 値の単位ポリシー
 ・ピクセル固定値はすべて --u (= デザイン1px相当のvw) に変換し、ビューポート幅に比例させる
   - PC : 1u = min(100vw / 1200, 1px)   （1200px超ではwrapperが固定幅になるので1pxで止める）
   - SP : 1u =     100vw / 375          （SPは画面幅にそのまま追従）
 ・配置 (top/left/width/% など) はFigma比率を％で指定
 ・min/maxの上限値だけ生pxを許可 (max-width など)
------------------------------------------------------------------------------------------------------------------ */

#lp_header_area {
  position: relative;
  z-index: 2;
}

#article2605_01 {
  /* 1u = デザイン1px相当 (PC基準1200px) */
  --u: min(calc(100vw / 1200), 1px);
  box-sizing: border-box;
  background: #ffeef2 url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2605_01/bg.png) left top repeat;
  font-family: "Rounded Mplus 1c", "Noto Sans JP", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
}

#article2605_01 *,
#article2605_01 *::before,
#article2605_01 *::after {
  box-sizing: border-box;
}

#article2605_01 img {
  height: auto;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ------------------------------------------------------------------------------------------------------------------
 押下可能な画像の共通ホバー
 ・対象は a / button のうち画像をクリック領域として使っているもの
 ・ホバー時に半透明にして「押せる」ことを示す
------------------------------------------------------------------------------------------------------------------ */
#article2605_01 .play-button a,
#article2605_01 .menu-container a,
#article2605_01 .check-button a,
#article2605_01 .voice-prev,
#article2605_01 .voice-next,
#article2605_01 .voice-play{
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  #article2605_01 .play-button a:hover,
  #article2605_01 .menu-container a:hover,
  #article2605_01 .check-button a:hover,
  #article2605_01 .voice-prev:hover,
  #article2605_01 .voice-next:hover,
  #article2605_01 .voice-play:hover{
    opacity: 0.7;
  }

  /* voice-thumb は通常時 opacity:0.5 のため、ホバー時はむしろ濃く見せる */
  #article2605_01 .voice-thumb:not(.is-active):hover{
    opacity: 0.8;
  }
  #article2605_01 .voice-thumb.is-active:hover{
    opacity: 0.7;
  }
}

#article2605_01 .sp { display: none; }

#article2605_01 .wrapper{
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(9,15,23,0.1);
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  #article2605_01 .pc { display: none; }
  #article2605_01 .sp { display: block; }
}

/* ------------------------------------------------------------------------------------------------------------------
 type-heroarea
------------------------------------------------------------------------------------------------------------------ */
#article2605_01 .type-heroarea{
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 1202;
  overflow: hidden;
}

/* ヒーロー背景画像（PC / SP 切り替え）
   キャラ・装飾を1枚に焼き込んだ画像。ロゴ／プレイボタン／メニューはこの上に重ねる */
#article2605_01 .hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

/* ゲームロゴ（めるぺろ）：ヒーロー上部中央
   Figma PC: x=452, y=102, w=338 / 1200x1202 */
#article2605_01 .hero-logo-inner{
  position: absolute;
  left: 37.6%;
  top: 8.5%;
  width: 28.2%;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

#article2605_01 .hero-logo-inner img{
  display: block;
  width: 100%;
}

#article2605_01 .lp-logo{
  position: absolute;
  left: 23.3%;
  top: 22.3%;
  width: 56%;
  margin: 0;
}

#article2605_01 .lp-logo img{
  display: block;
  width: 100%;
}

#article2605_01 .play-button{
  position: absolute;
  left: 42.8%;
  top: 50.3%;
  width: 17.2%;
  animation: heroPulse 1.8s ease-in-out infinite;
}

#article2605_01 .play-button img{
  display: block;
  width: 100%;
}

@keyframes heroPulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* メニュー（anchor-contents画像） */
#article2605_01 .menu-container{
  position: absolute;
  left: 50%;
  top: 67.5%;
  transform: translateX(-50%);
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: calc(18 * var(--u)) calc(24 * var(--u));
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#article2605_01 .menu-container li{
  width: calc((100% - 24 * var(--u)) / 2);
}

#article2605_01 .menu-container a{
  display: block;
  text-decoration: none;
}

#article2605_01 .menu-container a img{
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------------------------------------------------------
 各contents 共通
 ・外側 (section.type-contentsX) はFigma準拠の薄色で全幅塗り
 ・内側 (.common-section) は白カード（赤枠）
------------------------------------------------------------------------------------------------------------------ */
#article2605_01 [class^="type-contents"]{
  position: relative;
  width: 100%;
  padding: calc(50 * var(--u)) 0;
}

#article2605_01 .type-contents1{ background: #fff8fb; }
#article2605_01 .type-contents2{ background: #fffef9; }
#article2605_01 .type-contents3{ background: #fff8fb; }
#article2605_01 .type-contents4{ background: #fffef9; padding-bottom: calc(90 * var(--u)); }

#article2605_01 .common-section{
  position: relative;
  margin: 0 auto;
  width: 83.3%;
  max-width: 1000px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  border: calc(3 * var(--u)) solid #ce1c1d;
  border-radius: calc(20 * var(--u));
  box-shadow: 0 0 calc(20 * var(--u)) rgba(0,0,0,0.2);
  overflow: hidden;
  /* コンテナ化することで内部のpadding%/cqwがSPでも自然に縮小される */
  container-type: inline-size;
  /* 高さ固定 (aspect-ratio) 時に子要素を縦に並べ、余白は contents-body が吸収 */
  display: flex;
  flex-direction: column;
}

/* 一番下に貼り付ける装飾背景（角丸でクリップされる） */
#article2605_01 .type-contents1 .common-section{
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2605_01/contents-bg1.png);
}
#article2605_01 .type-contents2 .common-section,
#article2605_01 .type-contents3 .common-section,
#article2605_01 .type-contents4 .common-section{
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article2605_01/bg-image.png);
}

/* Figmaの common-section 寸法に合わせて縦横比を固定
   PC/SP共通：幅に対して下記比率で高さが決まる
   ・section1 : 1000 x 1176
   ・section2 : 1000 x 1197
   ・section3 : 1000 x 1060
   ・section4 : 1000 x 1199
   コンテンツが想定より大きい場合は min-height 扱いで自然に伸びる */
#article2605_01 .type-contents1 .common-section{ aspect-ratio: 1000 / 1176; }
#article2605_01 .type-contents2 .common-section{}
#article2605_01 .type-contents3 .common-section{ aspect-ratio: 1000 / 1060; }
#article2605_01 .type-contents4 .common-section{ aspect-ratio: 1000 / 1199; }

#article2605_01 .contents-header{
  position: relative;
  background: #ce1c1d;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Figma: header 高さ=200 / common-section 1000 → 20%
     縦paddingを cqi (=common-section幅基準%) にして PC/SP で同じ比率にする */
  min-height: 20cqi;
  padding: 5cqi 20% 5cqi 22%;
}

/* contents-no（数字バッジ画像） */
#article2605_01 .contents-no{
  position: absolute;
  left: 2.8%;
  top: 50%;
  transform: translateY(-50%);
  width: 14%;
  display: block;
  line-height: 0;
}

#article2605_01 .contents-no img{
  display: block;
  width: 100%;
  height: auto;
}

/* contents-title（画像化された見出し） */
#article2605_01 .contents-title{
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  line-height: 0;
}

#article2605_01 .contents-title img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* contents1 のタイトルは行を縦並びに */
#article2605_01 .type-contents1 .contents-title .title-row1{
  max-width: 88%;
}

#article2605_01 .type-contents1 .contents-title .title-row2{
  max-width: 88%;
  margin-top: 5px;
}

/* contents4 のタイトル（単一画像） */
#article2605_01 .contents-title.single img{
  max-width: 80%;
}

#article2605_01 .contents-body{
  position: relative;
  padding: 4% 6% 2%;
  /* common-section の余白を吸収して下端の check-button を Figma 位置に保つ */
  flex: 1 0 auto;
}

#article2605_01 .contents-lead{
  margin: 2.4% auto 0;
  padding: 0 5%;
  font-size: clamp(13px, 2.6cqw, 26px);
  font-weight: 500;
  text-align: center;
  color: #333;
  line-height: 1.6;
}

#article2605_01 .check-button{
  position: relative;
  display: block;
  margin: 3% auto 5%;
  width: 61.8%;
  max-width: 618px;
  z-index: 2;
}

#article2605_01 .check-button img{
  display: block;
  width: 100%;
}

/* ------------------------------------------------------------------------------------------------------------------
 contents1: 20%キャッシュバック
 ・テキスト画像は左寄せ、右側はキャラ用にスペース確保
 ・キャラ／ぺろセットは .common-section / .contents-body 基準でabsolute配置
------------------------------------------------------------------------------------------------------------------ */
#article2605_01 .type-contents1 .contents-body{
  display: block;
  /* 右側はキャラ(約34%)用に空ける */
  padding: 4% 36% 3% 8%;
}

#article2605_01 .type-contents1 .text-block{
  position: relative;
  display: block;
}

#article2605_01 .type-contents1 .contents-text{
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* ぺろセット：キャラクターの膝にかぶせる位置に配置
   ・サイズ上限：PC 183 x 132 (= common-section 1000幅基準で 18.3% / aspect 183:132)
   ・テキスト画像の右端 (.contents-body の右padding 36% → x=640) を超える位置に置き、
     テキストとは被らずキャラ前面に重ねる
   ・top はキャラ (y=278〜1109) の下から1/3 = 膝あたり */
#article2605_01 .type-contents1 .perroset{
  position: absolute;
  right: -10vw;
  bottom: 2vw;
  width: 14vw;
  max-width: 183px;
  aspect-ratio: 183 / 132;
  margin: 0;
  z-index: 3;
}

@media screen and (min-width: 1100px) {
  #article2605_01 .type-contents1 .perroset{
    position: absolute;
    right: -120px;
    bottom: 10px;
    width: 183px;
  }
}


#article2605_01 .type-contents1 .perroset img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* キャラ：.common-section 基準で絶対配置
   Figma: x=666, y=278, w=341, h=831 / common-section 1000x1176 */
#article2605_01 .type-contents1 .contents-chara{
  position: absolute;
  right: -0.7%;
  bottom: 5.7%;
  width: 34.1%;
  max-width: 341px;
  height: auto;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------------------------
 contents2: ボイス
------------------------------------------------------------------------------------------------------------------ */
#article2605_01 .type-contents2 .contents-body{
  padding: 4% 8% 3%;
  text-align: center;
}

#article2605_01 .type-contents2 .contents-lead{
  margin: 0 0 3%;
  font-size: clamp(13px, 2.6cqw, 26px);
  font-weight: 500;
  line-height: 1.6;
}

#article2605_01 .voice-slider{
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

#article2605_01 .voice-slides{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 740px;
  aspect-ratio: 740 / 400;
  background: #fff5f6;
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(31,31,31,0.1);
}

#article2605_01 .voice-slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

#article2605_01 .voice-slide.is-active{
  opacity: 1;
  visibility: visible;
}

#article2605_01 .voice-card{
  position: relative;
  width: 100%;
  height: 100%;
}

#article2605_01 .voice-card__bg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#article2605_01 .voice-play{
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: 19%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#article2605_01 .voice-play img{
  display: block;
  width: 100%;
  height: auto;
}

#article2605_01 .voice-play.is-playing{
  animation: voicePulse 0.8s ease-in-out infinite;
}

@keyframes voicePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

#article2605_01 .voice-prev,
#article2605_01 .voice-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7.5%;
  aspect-ratio: 1 / 1;
  max-width: 60px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
}

#article2605_01 .voice-prev{ left: 0; }
#article2605_01 .voice-next{ right: 0; }

#article2605_01 .voice-prev img,
#article2605_01 .voice-next img{
  display: block;
  width: 100%;
  height: auto;
}

#article2605_01 .voice-thumbs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 11個並べても1段に収まるよう gap と幅を調整 (旧: 10個用 / gap:1.5%, w:8.5%) */
  gap: 1.3%;
  margin: 3% auto 0;
  padding: 0;
  width: 100%;
  max-width: 800px;
  list-style: none;
}

#article2605_01 .voice-thumbs li{
  /* 11個 + 10gap(1.3%) = 99.7% に収まるサイズ */
  width: 7.7%;
  max-width: 60px;
}

#article2605_01 .voice-thumb{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

#article2605_01 .voice-thumb img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}

#article2605_01 .voice-thumb.is-active{
  opacity: 1;
  box-shadow: 0 0 0 calc(3 * var(--u)) #ce1c1d;
}

/* ------------------------------------------------------------------------------------------------------------------
 contents3: 声優サインプレゼント
 ・キャラは .common-section 基準でabsolute
------------------------------------------------------------------------------------------------------------------ */
#article2605_01 .type-contents3 .contents-body{
  display: block;
  /* 右側はキャラ(約24%)用に空ける */
  padding: 4% 28% 3% 8%;
}

#article2605_01 .type-contents3 .text-block{
  text-align: center;
}

#article2605_01 .type-contents3 .contents-text{
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 630px;
  height: auto;
}

/* キャラ：Figma section3 / common-section 1000x1060
   x=726, y=235, w=238, h=799 */
#article2605_01 .type-contents3 .contents-chara{
  position: absolute;
  right: 3.6%;
  bottom: 2.5%;
  width: 23.8%;
  max-width: 238px;
  height: auto;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------------------------
 contents4: ガチャ大幅リニューアル
 ・キャラは .common-section 基準でabsolute
------------------------------------------------------------------------------------------------------------------ */
#article2605_01 .type-contents4 .contents-body{
  display: block;
  /* 右側はキャラ(約24%)用に空ける */
  padding: 4% 28% 3% 8%;
}

#article2605_01 .type-contents4 .text-block{
  text-align: center;
}

#article2605_01 .type-contents4 .contents-text{
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 627px;
  height: auto;
}

/* キャラ：Figma section4 / common-section 1000x1199
   x=719, y=250, w=241, h=816 */
#article2605_01 .type-contents4 .contents-chara{
  position: absolute;
  right: 4%;
  bottom: 11.1%;
  width: 24.1%;
  max-width: 241px;
  height: auto;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------------------------
 SP (~769px)
 Figma SP ( 375 x 2541 ) を基準に再構成。
 ・ヒーローはSP用比率(375:554)に切り替え、要素位置をSP用に再定義
 ・各セクションは10pxずつ余白を空けてカードをほぼ全幅に
 ・本文画像はSP専用画像があるものはSP用に差し替え
 ・--u を SP基準 (375px) に切り替え
------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 769px) {
  #article2605_01 {
    /* 1u = デザイン1px相当 (SP基準375px) */
    --u: calc(100vw / 375);
  }

  /* ヒーローはSP比率に */
  #article2605_01 .type-heroarea{
    aspect-ratio: 375 / 554;
  }

  /* ヒーロー内 ロゴ・プレイボタンの位置をSP用に
     Figma SP: hero-logo-inner x=131, y=52, w=125 / 375x554 */
  #article2605_01 .hero-logo-inner{
    left: 34.9%;
    top: 9.4%;
    width: 33.3%;
  }
  #article2605_01 .lp-logo{
    left: 11.7%;
    top: 25.5%;
    width: 76.5%;
  }
  #article2605_01 .play-button{
    left: 50%;
    top: 49%;
    transform: translateX(-50%);
    width: 30.9%;
    animation: heroPulseSp 1.8s ease-in-out infinite;
  }

  /* SPでもプレイボタンを脈動させる（centering を維持しつつ） */
  @keyframes heroPulseSp{
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.05); }
  }

  /* ヒーロー下のメニュー (anchor-contents) */
  #article2605_01 .menu-container{
    top: auto;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 97.6%;
    gap: calc(6 * var(--u)) calc(6 * var(--u));
  }
  #article2605_01 .menu-container li{
    width: calc((100% - 6 * var(--u)) / 2);
  }

  /* セクション全体の上下padding */
  #article2605_01 [class^="type-contents"]{
    padding: calc(20 * var(--u)) 0;
  }
  #article2605_01 .type-contents4{
    padding-bottom: calc(40 * var(--u));
  }

  /* SPはカードを左右10pxずつの余白で配置 */
  #article2605_01 .common-section{
    margin: 0 auto;
    width: calc(100% - 20 * var(--u));
    border-width: calc(2 * var(--u));
    border-radius: calc(7.5 * var(--u));
  }

  /* PC/SPで見た目をそろえるため、見出し（赤帯）と番号バッジのSP上書きは廃止
     PC定義 (min-height:20cqi / padding:5cqi 20% 5cqi 22%) がそのまま適用される */

  /* SPは本文の左右余白を詰める（contents2のみ。1/3/4は contents-chara を考慮した左右paddingをPC側で定義済み） */
  #article2605_01 .type-contents2 .contents-body{
    padding: 4% 4% 3%;
  }

  /* PC/SPで見た目をそろえるため、type-contents1/3/4 のpaddingはPC定義のままにする
     （右側のキャラ用スペースをコンテナ幅(共通カード)に対する%で確保） */

  /* SPのチェックボタン幅 (Figma: 231.75/355 ≒ 65%) */
  #article2605_01 .check-button{
    width: 65%;
    margin: 4% auto 4%;
  }

  /* スライダー：SPはサムネイルを非表示にしてドット表示に */
  #article2605_01 .voice-thumbs{
    display: none;
  }
  #article2605_01 .voice-dots{
    display: flex;
  }

  /* SPのスライダー本体は少し縦方向にコンパクト */
  #article2605_01 .voice-slides{
    border-radius: calc(12 * var(--u));
  }
}

/* ドットページネーション（SP専用） */
#article2605_01 .voice-dots{
  display: none;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: calc(12 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
}
#article2605_01 .voice-dots li{
  display: block;
}
#article2605_01 .voice-dot{
  display: block;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin: 0;
  padding: 0;
  background: #d9d9d9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
#article2605_01 .voice-dot.is-active{
  background: #ce1c1d;
  transform: scale(1.15);
}

/* スクロールトップボタン */
#article2605_01 .scroll-top{
  position: fixed;
  right: calc(16 * var(--u));
  bottom: calc(24 * var(--u));
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  z-index: 30;
  background: rgba(255,255,255,0.95);
  border: calc(2 * var(--u)) solid #ce1c1d;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  /* 小さくなり過ぎを防ぐため最低サイズを担保 */
  min-width: 36px;
  min-height: 36px;
}
#article2605_01 .scroll-top.is-visible{
  opacity: 1;
  pointer-events: auto;
}
#article2605_01 .scroll-top::before{
  content: "";
  display: block;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  /* 矢印(^)のインクは元々ボックスの上・右に偏っているため、-45°回転後の光学中心は幾何中心より約3u上にズレる。
     margin-topを3u増やして見た目を上下中央に合わせる */
  margin: calc(10 * var(--u)) auto 0;
  border-top: calc(3 * var(--u)) solid #ce1c1d;
  border-right: calc(3 * var(--u)) solid #ce1c1d;
  transform: rotate(-45deg);
}