@charset "UTF-8";
/*================================================

クリスマス特集2025 | TOP

=================================================*/
/*------------------------------------------------

main

------------------------------------------------*/
.main[data-layout=xmas] {
  position: relative;
}
.main[data-layout=xmas]:before {
    display: block;
  content: "";
  width: 414px;
  height: 442px;
  background-image: url(https://r.r10s.jp/evt/event/xmas/2025/_pc/img/top/top_bnr_img.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top right;
  position: absolute;
  left:calc(50% - 884px);
  top: -200px;  
  z-index: 1;
}

/*------------------------------------------------

kanban

------------------------------------------------*/


.top-kanban {
  position: relative;
  margin-bottom: 24px;
  background: url(https://r.r10s.jp/evt/event/xmas/2025/_pc/img/top/top-kanban-bg.png) no-repeat top center;
  min-height: 537px;

}

.top-kanban-title{
  position: absolute;
  top:16px;
  left:calc(50% - 320px);
  width: 660px;
}
.top-kanban-characters{
  position: absolute;
  bottom:21px;
  left:calc(50% - 540px);
  width: 1132px;
  z-index: 2;
}
/* .top-kanban-light{
    position: absolute;
  top:79px;
  left:calc(50% - 570px);
  width: 1010px;
} */

.top-kanban-light .light_all{
    position: absolute;
  top:79px;
  left:calc(50% - 570px);
  width: 1010px;
  z-index: 1;
  opacity: 1;
}

 .star_halos > *{
  position: absolute;
 }

.star_halos .halo_in{
  top:296px;
  left:calc(50% - 520px);
  width: 33px;
  transform-origin: center center;
  /* animation: halo 0.5s linear backwards;   */
}
.star_halos .halo_out{
  top:277px;
  left:calc(50% - 540px);
  width:71px;
  transform-origin: center center;
  animation: halo 0.5s linear backwards;  
}
.star_halos .halo_bit{
  top:286px;
  left:calc(50% - 531px);
  width: 52px;
  transform-origin: center center;
  animation: halo_bit 0.5s linear backwards;  
}

 .star_trails{
  position: absolute;
  top:82px;
  left:calc(50% - 569px);
  width:1010px;
  height: 290px;
  mask-image: linear-gradient(225deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: linear-gradient(225deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 100%);
  mask-size: 200% 200%;
  -webkit-mask-size: 200% 200%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 130% -130%;
  -webkit-mask-position: 130% -130%;
  animation: mask-animation 2.8s linear forwards;
  /* animation: fadeIn 4.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;     */
}
.star_trails .trail_inner{
  position: relative;
  width: 100%;
  height:100%;
}

 .star_trails .trail_inner> *{
  position: absolute;
}
.star_trails .trail{
  top:0px;
  left:29px;
  width: 958px;
}


.star_trails .star{
  animation: twinkle 3s linear infinite;
  animation-delay: 2.2s;
}

.star_trails .star._01{
  top:calc(254px);
  left:calc(53px);
  width: calc(34px);
  animation-delay: 3s;
}
.star_trails .star._02{
  top:calc(214px);
  left:calc(0px);
  width: calc(38px);
  animation-delay: 2.4s;
}
.star_trails .star._03{
  top:calc(170px);
  left:calc(68px);
  width: calc(36px);
  animation-delay: 3.4s;
}
.star_trails .star._04{
  top:calc(227px);
  left:calc(98px);
  width: calc(12px);
  animation-delay: 4s;
}
.star_trails .star._05{
  top:calc(177px);
  left:calc(32px);
  width: calc(19px);
  animation-delay: 2.4s;
}
.star_trails .star._06{
  top:calc(154px);
  left:calc(60px);
  width: calc(11px);
  animation-delay: 2.8s;
  transform: rotate(45deg);
}
.star_trails .star._07{
  top:calc(137px);
  left:calc(15px);
  width: calc(21px);
  animation-delay: 3.5s;
}
.star_trails .star._08{
  top:calc(130px);
  left:calc(49px);
  width: calc(20px);
  animation-delay: 3s;
}
.star_trails .star._09{
  top:calc(113px);
  left:calc(28px);
  width: calc(15px);
  animation-delay: 2.5s;
}
.star_trails .star._10{
  top:calc(101px);
  left:calc(73px);
  width: calc(16px);
  animation-delay: 4s;
}
.star_trails .star._11{
  top:calc(78px);
  left:calc(34px);
  width: calc(20px);
  transform: rotate(10deg);
  animation-delay: 2.2s;
}
.star_trails .star._12{
  top:calc(61px);
  left:calc(98px);
  width: calc(18px);
  transform: rotate(44deg);
  animation-delay: 4s;
}
.star_trails .star._13{
  top:calc(85px);
  left:calc(150px);
  width: calc(12px);
  animation-delay: 3s;
}
.star_trails .star._14{
  top:calc(102px);
  left:calc(177px);
  width: calc(21px);
  animation-delay: 3.4s;
}
.star_trails .star._15{
  top:calc(82px);
  left:calc(203px);
  width: calc(18px);
  transform: rotate(10deg);
  animation-delay: 2.7s;
}
.star_trails .star._16{
  top:calc(106px);
  left:calc(225px);
  width: calc(12px);
  transform: rotate(10deg);
  animation-delay: 3s;
}
.star_trails .star._17{
  top:calc(95px);
  left:calc(241px);
  width: calc(8px);
  transform: rotate(-10deg);
    animation-delay: 2.8s;
}
.star_trails .star._18{
  top:calc(119px);
  left:calc(251px);
  width: calc(15px);
  transform: rotate(20deg);
    animation-delay: 2.8s;
}
.star_trails .star._19{
  top:calc(118px);
  left:calc(286px);
  width: calc(7px);
  transform: rotate(-10deg);
    animation-delay: 2.8s;
}
.star_trails .star._20{
  top:calc(120px);
  left:calc(353px);
  width: calc(13px);
    animation-delay: 2.8s;
}
.star_trails .star._21{
  top:calc(138px);
  left:calc(367px);
  width: calc(17px);
  transform: rotate(22deg);
  animation-delay: 2.2s;
}
.star_trails .star._22{
  top:calc(128px);
  left:calc(416px);
  width: calc(11px);
  animation-delay: 4s;
}
.star_trails .star._23{
  top:calc(125px);
  left:calc(450px);
  width: calc(8px);
  transform: rotate(-16deg);
  animation-delay: 3s;
}
.star_trails .star._24{
  top:calc(136px);
  left:calc(458px);
  width: calc(18px);
  transform: rotate(-22deg);
  animation-delay: 3.4s;
}
.star_trails .star._25{
  top:calc(127px);
  left:calc(487px);
  width: calc(15px);
  animation-delay: 2.7s;
}
.star_trails .star._26{
  top:calc(141px);
  left:calc(510px);
  width: calc(11px);
    animation-delay: 3s;
}
.star_trails .star._27{
  top:calc(146px);
  left:calc(358px);
  width: calc(1px);
  transform: rotate(-25deg);
    animation-delay: 3.4s;
}
.star_trails .star._28{
  top:calc(141px);
  left:calc(639px);
  width: calc(7px);
  transform: rotate(-27deg);
    animation-delay: 2.8s;
}
.star_trails .star._29{
  top:calc(142px);
  left:calc(670px);
  width: calc(10px);
  transform: rotate(-27deg);
  animation-delay: 2.5s;
}
.star_trails .star._30{
  top:calc(131px);
  left:calc(698px);
  width: calc(9px);
  transform: rotate(-10deg);
    animation-delay: 3.1s;
}
.star_trails .star._31{
  top:calc(128px);
  left:calc(744px);
  width: calc(11px);
  animation-delay: 2.2s;
}
.star_trails .star._32{
  top:calc(128px);
  left:calc(828px);
  width: calc(23px);
  animation-delay: 4s;
}
.star_trails .star._33{
  top:calc(113px);
  left:calc(855px);
  width: calc(7px);
  transform: rotate(-30deg);
  animation-delay: 3s;
}
.star_trails .star._34{
  top:calc(121px);
  left:calc(869px);
  width: calc(8px);
  transform: rotate(45deg);
  animation-delay: 3.4s;
}
.star_trails .star._35{
  top:calc(116px);
  left:calc(886px);
  width: calc(13px);
  animation-delay: 2.7s;
}
.star_trails .star._36{
  top:calc(118px);
  left:calc(898px);
  width: calc(10px);
  transform: rotate(50deg);
    animation-delay: 3s;
}
.star_trails .star._37{
  top:calc(109px);
  left:calc(911px);
  width: calc(8px);
  transform: rotate(48deg);
    animation-delay: 3.6s;
}
.star_trails .star._38{
  top:calc(92px);
  left:calc(931px);
  width: calc(14px);
    animation-delay: 2.8s;
}
.star_trails .star._39{
  top:calc(100px);
  left:calc(938px);
  width: calc(8px);
  transform: rotate(45deg);
    animation-delay: 3.2s;
}
.star_trails .star._40{
  top:calc(85px);
  left:calc(952px);
  width: calc(11px);
    animation-delay: 2.8s;
}
.star_trails .star._41{
  top:calc(89px);
  left:calc(973px);
  width: calc(16px);
  animation-delay: 2.2s;
}
.star_trails .star._42{
  top:calc(72px);
  left:calc(958px);
  width: calc(8px);
  transform: rotate(45deg);
  animation-delay: 4s;
}
.star_trails .star._43{
  top:calc(53px);
  left:calc(973px);
  width: calc(20px);
  animation-delay: 3s;
}
.star_trails .star._44{
  top:calc(62px);
  left:calc(997px);
  width: calc(11px);
  transform: rotate(10deg);
  animation-delay: 3.4s;
}
.star_trails .star._45{
  top:calc(41px);
  left:calc(963px);
  width: calc(12px);
  animation-delay: 2.7s;
}
.star_trails .star._46{
  top:calc(21px);
  left:calc(976px);
  width: calc(13px);
    animation-delay: 3s;
}
.star_trails .star._47{
  top:calc(11px);
  left:calc(958px);
  width: calc(11px);
    animation-delay: 3.2s;
}
.star_trails .star._48{
  top:calc(8px);
  left:calc(941px);
  width: calc(8px);
  transform: rotate(-20deg);
    animation-delay: 2.8s;
}
.star_trails .star._49{
  top:calc(14px);
  left:calc(919px);
  width: calc(16px);
    animation-delay: 2.4s;
}


.h1-image{
  display: none !important;
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes halo {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes halo_bit {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes mask-animation {
  0% {
mask-position: 230% -130%; 
-webkit-mask-position: 230% -130%;
  }
  40% {
mask-position: 180% 0%; 
-webkit-mask-position: 180% 0%;
  }
  50% {
mask-position: 150% 0%; 
-webkit-mask-position: 150% 0%;
  }
  100% {
mask-position: 0 0; 
-webkit-mask-position: 0 0; 
  }
}


.modal_open_bnr{
  width:620px;
  margin:0 auto 32px;
  cursor: pointer;
}

/*------------------------------------------------

top_pagelist[おせち特集ページ一覧]

------------------------------------------------*/
.ecm-view-more-xmas-2025 .scm-commentary-title {
  color: #ffffff;
}
.ecm-view-more-xmas-2025 .scm-commentary-text {
  color: #ffffff;
}
.ecm-view-more-xmas-2025 .scm-commentary-button {
  color: #553a34 !important;
  border-color: #ffffff;
  background-color: #ffffff;
}
.ecm-view-more-xmas-2025 .scm-commentary-button i{
   color:#ad001a;
}
.ecm-view-more-xmas-2025 .ecm-view-more-item {
  border-color: #ffffff;
}
.scm-commentary-more-xmas-2025 {
  color: #553a34 !important;
  border-color: #553a34;
  background-color: #ffffff;
}
.scm-commentary-more-xmas-2025 i{
  color:#ad001a;
}

.movie_wrap{
  width: 608px;
  height: 452px;
  margin: 100px auto 60px !important;
	position: relative;
}
.movie_wrap .gif_wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 292px;
  height:292px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  top:99px;
  left:0;
  right:0;
}

.movie_wrap .gif_wrap img{
  width: 135%;
  flex-shrink: 0;
  margin-top: -54px;
  margin-left: 3px;
  opacity: 0;
}
.movie_wrap .gif_wrap img:hover{
  opacity: 1;
}


/*panda modals */
.panda_modal_lead{
  text-align: center;
  color:#333333;
  font-size: 16px;
  margin-bottom: 0.8em;
}

.d-grid.-pattern{
  gap: 94px;
  width: 574px;
  margin: 0 auto;
}
.d-grid._panda_modal_btns{
  margin-top: 28px;
  gap: 10px;
}
.d-grid._panda_modal_btns .download-btn{
  display: block;
  width: 100%;
  padding: 8px 0;
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  background: #AD011B;
  color: #ffffff;
  border: 1px solid #AD011B;
  text-decoration: none;
  border-radius: 5px;
}
.d-grid._panda_modal_btns .span{
  font-size: 16px;
  font-weight: bold;
}
.d-grid._panda_modal_btns .download-btn:hover{
  opacity: 0.8;
}
.modal_open_bnr img:hover{
  opacity: 0.8;
}