@charset "UTF-8";
/* ##################################################
  基本設定
################################################## */

/* ------------------------------
  ベース設定
------------------------------ */
html {
  font-size: 62.5%;
}

body {
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  color: #231815;
  background-color: #E60012;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: #231815;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a img {
  opacity: 1;
  transition: 0.5s ease-in-out;
}

a:hover img {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
}

@media screen and (max-width: 750px) {
  a:hover img {
    opacity: 1;
  }
}

.pc {display: block;}
.sp {display: none;}

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


/*--------------------------
レイアウト
--------------------------*/

#anniversary_2025 {
  
}

.fukidashi_container {
  position: fixed;
  z-index: 99;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.fukidashi_container .fukidashi_l {
  position: absolute;
  width: calc(530/2285*100%);
  top: 50%;
  transform: translateY(-50%) ;
  left: calc((100% - 1500px)/ 4);
}

.fukidashi_container .fukidashi_r {
  position: absolute;
  width: calc(480/2285*100%);
  top: 50%;
  transform: translateY(-50%) ;
  right: calc((100% - 1400px)/ 4);
}

@media screen and (max-width: 1200px) {
  .fukidashi_container {
    display: none;
  }
}


#anniversary_2025 .article {
  max-width: 750px;
  margin: 0 auto;
  background: #FFF9B1 url(/cp/2025_anniversary/img/bg_image.png) no-repeat center top / 100% ;
  padding-bottom: calc(50/750*100%);
}

@media screen and (max-width: 750px) {
  .article {
    max-width: none;
    width: 100%;
  }
}

#anniversary_2025 header {
  width: 100%;
  margin: 0;
  padding: 0;
}

#anniversary_2025 h1 {
  width: calc(540/750*100%);
  margin: calc(20/750*100%) auto 0;
}

#anniversary_2025 .collection_wrap {
  position: relative;
}

#anniversary_2025 .collection_pkg01 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(258/750*100%);
  margin: calc(-84/750*100%) 0 0 calc(22/750*100%);
}

#anniversary_2025 .collection_pkg02 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(247/750*100%);
  margin: calc(42/750*100%) 0 0 calc(38/750*100%);
}

#anniversary_2025 .collection_pkg03 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(284/750*100%);
  margin: calc(107/750*100%) 0 0 calc(48/750*100%);
}

#anniversary_2025 .collection_pkg04 {
  position: absolute; 
  top: 0;
  left: 0;
  width: calc(212/750*100%);
  margin: calc(239/750*100%) 0 0 calc(139/750*100%);
}

#anniversary_2025 .collection_pkg05 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(202/750*100%);
  margin: calc(247/750*100%) calc(264/750*100%) 0 0;
}

#anniversary_2025 .collection_pkg06 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(201/750*100%);
  margin: calc(210/750*100%) calc(125/750*100%) 0 0;
}

#anniversary_2025 .collection_pkg07 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(200/750*100%);
  margin: calc(-10/750*100%) calc(51/750*100%) 0 0;
}

#anniversary_2025 .collection_pkg08 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(297/750*100%);
  margin: calc(-89/750*100%) 0 0 0;
}


#anniversary_2025 .heart {
  width: calc(320/750*100%);
  margin: 0 auto;
}

.collection_wrap > div {
  will-change: transform;
}

#anniversary_2025 .text_lead {
  margin: calc(160/750*100%) auto 0;
  padding: 0 calc(50/750*100%);
  color:#A7762A;
  font-size: 21px;
  text-align: center;
  font-weight: 500;
  line-height: 2.2;
}

@media screen and (max-width: 750px) {
  #anniversary_2025 .text_lead {
    font-size: 2.8vw;
  }
}

#anniversary_2025 .character {
  width: calc(680/750*100%);
  margin: calc(70/750*100%) auto;
}

#anniversary_2025 .comingsoon {
  width: 100%;
  margin: calc(75/750*100%) auto 0;
  display: block;
}


/* -------------------------
リビールオーバーレイ
------------------------- */

:root{
  --reveal-color: #E60012; 
  --reveal-duration: 3000ms; /* アニメ時間 */
  --reveal-ease: cubic-bezier(.4,1.8,.4,2);
  /* --reveal-duration: 1500ms;*/
  /* --reveal-ease: cubic-bezier(.2,.9,.2,1);  */
}

.reveal-overlay{
  position:fixed;
  inset:0; /* top:0;right:0;bottom:0;left:0; */
  pointer-events:none; /* アニメ中はオーバーレイがあるが、完了で取り除く */
  z-index:9999;
  display:block;
}

.reveal-panel{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background:var(--reveal-color);
  will-change:transform; /* パフォーマンス向上 */
  /* 初期で中央にいるように transform は 0 */
  transform:translateX(0);
}

.reveal-panel.left{
  left:0;
  transform-origin:center left;
}

.reveal-panel.right{
  right:0;
  transform-origin:center right;
}

/* アニメーション定義（左右それぞれ外側へスライド） */
@keyframes splitLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* 左パネルは左へ */
}
@keyframes splitRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }  /* 右パネルは右へ */
}

/* 再生クラスを付与してアニメを開始する */
.reveal-overlay.play .reveal-panel.left{
  animation: splitLeft var(--reveal-duration) var(--reveal-ease) forwards;
}

.reveal-overlay.play .reveal-panel.right{
  animation: splitRight calc(var(--reveal-duration) + 40ms) var(--reveal-ease) forwards;
  /* 右の方をちょい遅らせて（+40ms）見栄えを良く */
}

/* アニメ完了後に overlay--hidden クラスを付けると display:none にして完全に除去 */
.reveal-overlay.hidden{
  display:none;
}

/* アクセシビリティ: 動きを減らしたい人はアニメをスキップ */
@media (prefers-reduced-motion: reduce){
.reveal-overlay{
  display:none; /* 動きを抑えたい場合は即座にオーバーレイ非表示にする */
  }
}