@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  --title:42px;
  --title-en:24px;
  --h1:36px;
  --h2:30px;
  --h3:27px;
  --h4:24px;
  --h5:20px;
  --text:18.5px;
  --s-text:16px;
  --ss-text:14px;
  --sss-text:13px;
  --bread:13px;
  --new-green:#2E8208;
  --orangeAA:#C44704;
  --q-bg:#E3F0DD;
  --pale-bg:#fbf7ef;
  --border:solid 1px #c9c9c9;
  --size:96px;
}
@media (max-width:1080px){
  :root {
    --title:36px;
    --title-en:21px;
    --h1:33px;
    --h2:27px;
    --h3:24px;
    --h4:21px;
    --h5:18px;
    --text:17px;
    --s-text:15px;
    --ss-text:13px;
    --sss-text:12px;
    --bread:12px;    
  }
}
@media (max-width:768px){
  :root {
    --title:30px;
    --title-en:16px;
    --h1:24px;
    --h2:20px;
    --h3:18px;
    --h4:16px;
    --h5:15px;
    --text:15px;
    --s-text:13px;
    --ss-text:13px;
    --sss-text:10px;
    --bread:12px;    
  }
}
@media (max-width:576px){
  :root {
    --size:48px;
  }
}

/*html,body{overflow-x: hidden;}*/

/* title-animation */
.marquee {
  overflow: hidden;
  width: 100%;
  margin-bottom:10px;
}
/*
.track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee linear infinite;
  animation-duration: var(--speed, 20s);
}
*/
.text-inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  white-space: nowrap;
  will-change: transform, opacity; /* パフォーマンス向上 */
}

.track {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0); /* 初期化 */
}

.item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: "Bebas Neue", sans-serif;
  font-size: var(--size, 80px);
  line-height:1;
}

.fill {
  color: var(--color, #000);
}

.stroke {
  color: #fff;
  -webkit-text-stroke: 1.5px var(--color, #000);
}

.gap {
  width: var(--gap, 40px);
}

/* 無限ループ */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* motion配慮 */
@media (prefers-reduced-motion: reduce) {
  .track {
    animation: none;
  }
}

.pc-only{display:initial}
.sp-only{display:none;}

@media (max-width:768px){
  .pc-only{display:none}
  .sp-only{display:initial;}
}

.contents-title{font-size:var(--h3); text-align:center; margin-bottom:50px; position:relative;}
.link-title{color:var(--orangeAA);  display:flex; flex-direction: column; justify-content: center; height:68px; border-left:solid 10px var(--orangeAA); padding-left:30px; margin-bottom:30px;}
.link-title span.en{font-family: "Bebas Neue"; font-size: var(--text);}
.link-title span.ja{font-size:var(--h3);}

.shop-list + .link-title{margin-top:90px;}

.contents-title.en{color:var(--orangeAA); font-family: "Bebas Neue"; font-size: var(--title); font-weight:400; margin-bottom:10px;}
.contents-stitle.ja{color:#444; font-size:var(--h5); margin:0 0 50px; text-align:center;}

@media (max-width: 768px) {
.link-title{height:48px; border-left:solid 5px var(--orangeAA); padding-left:15px; margin-bottom:30px;}
}

/* section-block */

.section-block{position:relative; padding:60px 0;}
.section-block#factory{position:relative; padding:120px 0 400px;}

#present,#useful_info{background:url(/assets/images/_resource/pages/enjoy/present-bg.png) repeat; background-size:auto;}
#present{border-top:dashed 1px var(--orangeAA);border-bottom:dashed 1px var(--orangeAA)}
#cm{background:url(/assets/images/_resource/pages/enjoy/movie-bg.png) repeat; background-size:auto;}
#shop-sns{padding:60px 0;}
.section-in{width:90%; max-width:1300px; margin:20px auto;}

/* cp-list */
.campaign-list,.shop-list{display:flex; justify-content: space-between; padding:20px 30px;}
.campaign-list .items{display:block; width:44%; position:relative; border-radius:20px; background:#fff;}
.campaign-list .items:before{content:""; display:flex; align-items: center; color:#fff; font-family: "Bebas Neue"; font-size:var(--ss-text); width:100px; height:32px; border-radius:16px;;  justify-content: center; position:absolute; z-index:1; top:-26px;}
.campaign-list .items:after{content:""; display:block; width:10px; height:15px; clip-path: polygon(50% 75%, 0 0, 100% 0); position:absolute; top:28px; left:calc(50px - 7.5px); z-index:1; position:absolute; top:2px;}
.campaign-list .items.cp-item:before{content:"CAMPAIGN"; background:var(--orangeAA);}
.campaign-list .items.ev-item:before{content:"EVENT"; background:var(--new-green);}
.campaign-list .items.cp-item:after{content:""; background:var(--orangeAA);}
.campaign-list .items.ev-item:after{content:"";  background:var(--new-green);}

.campaign-list .items a{display:flex; flex-direction: column; position:relative; padding:20px; gap:35px; text-decoration:none;}

.campaign-list .cp-txt h4,.shop-list .cp-txt h4{font-size:var(--h5); color:var(--orangeAA); margin-bottom:20px;}
.campaign-list .cp-txt p,.shop-list .cp-txt p{font-size:var(--s-text); line-height:1.5; margin-bottom:30px;}

.campaign-list .btn,
.shop-list .btn,
.cmSlide-nav .btn a{display: flex; justify-self: center; background:#fff; align-items: center; height:48px; padding:4px 55px 4px 25px; border-radius:30px; border:var(--border); position:relative; font-weight:600; text-decoration:none;}
.campaign-list .btn:after,
.cmSlide-nav .btn a:after{content:""; display:block; width:18px; height:18px; background:url(/assets/images/_resource/pages/enjoy/arrow-org.svg) no-repeat; background-size:18px; position:absolute; top:calc(50% - 9px); right:20px;}
.shop-list .btn:after{content:""; display:block; width:16px; height:12px; background:url(/assets/images/_resource/pages/enjoy/outer-link.svg) no-repeat; background-size:16px 12px; position:absolute; top:calc(50% - 6px); right:20px;}

/*非開催時*/
.campaign-list.closed{padding:60px 30px; justify-content: center;}
.campaign-list.closed p{font-size:var(--h5)}

/* shop-list */
.shop-list .items{display:block; width:44%; border-radius:20px; background:#fbf7ef; }
.shop-list .items a{display:flex; flex-direction: column; position:relative; padding:20px; gap:35px; text-decoration:none;}
.shop-list .cp-thumb{border-radius: 20px; overflow: hidden; background:#fff;}

@media (max-width: 1080px) {
  .section-block#present{padding:50px 0;}
  /*.section-block#present .contents-title{margin-bottom:40px;}*/
  .section-block#shop-sns{padding:50px 0;}
  .campaign-list,.shop-list{display:flex; justify-content: space-between; padding:15px 20px;}
  .campaign-list .items,.shop-list .items{display:block; width:49%;}
  .campaign-list .btn,
  .shop-list .btn,
  .cmSlide-nav .btn a{display: flex; justify-self: center; background:#fff; align-items: center; height:48px; padding:4px 40px 4px 20px; border-radius:30px; border:var(--border); position:relative; font-weight:600; text-decoration:none;}
  .campaign-list .btn:after,
  .cmSlide-nav .btn a:after{position:absolute; top:calc(50% - 9px); right:16px;}
  .shop-list .btn:after{position:absolute; top:calc(50% - 9px); right:16px;}

  /*非開催時*/
  .campaign-list.closed{padding:40px 20px; justify-content: center;}
  .campaign-list.closed p{font-size:var(--h5)}
}

@media (max-width: 768px) {
  .section-block#present{padding:40px 0;}

  .section-block#present .section-in{margin-bottom:10px;}
  .section-block#shop-sns{padding:40px 0;}
  .campaign-list,.shop-list{display:flex; flex-direction: column; justify-content: center; align-items: center; gap:50px; padding:0 30px 20px;}
  .campaign-list .items,.shop-list .items{display:block; width:100%;}

  /*非開催時*/
  .campaign-list.closed{padding:30px 30px; justify-content: center;}
  .campaign-list.closed p{font-size:var(--h5)}
}

@media (max-width: 576px) {
  .section-block#present{padding:30px 0;}

  .section-block#present .section-in{margin-bottom:0;}
  .section-block#shop-sns{padding:30px 0;}
  .campaign-list,.shop-list{display:flex; flex-direction: column; justify-content: center; align-items: center; gap:20px; padding:0 10px 20px;}
  .campaign-list .items,.shop-list .items{display:block; width:100%;}
}

/*sns*/
.sns-list{display:flex; gap:30px; padding:15px 30px;}
.sns-list li{width:calc((100% - 30px * 2) / 3); border:var(--border); border-radius:10px; padding:10px;}
.sns-list li a{ text-decoration:none; position:relative}
.sns-list li p{position:relative; display:flex; justify-content: space-between; align-items: center; font-size:var(--s-text)}
.sns-list li p:after{content: ""; display: inline-block; width: 16px; height: 12px; background-image: url(/assets/images/_resource/pages/products/common/outer-link-blk.png); background-size: 16px 12px;}


@media (max-width: 1080px) {
.sns-list{display:flex; gap:30px; padding:15px 30px; flex-wrap:wrap}
.sns-list li{width:calc((100% - 30px * 1) / 2);}
}

@media (max-width: 768px) {
.sns-list{display:flex; gap:30px; padding:15px 30px; flex-wrap:wrap; align-items: center; flex-direction: column;}
.sns-list li{width:90%;}
}
@media (max-width: 576px) {
.sns-list li{width:70%;}
}

@media (max-width: 480px) {
.sns-list li{width:220px;}
}


/* factory */
.factory-contents{position:relative; width:100%; transition:all cubic-bezier(0.075, 0.82, 0.165, 1)}
.factory-contents .factory-text {width:93%; max-width:1370px; margin:0 auto;}
.factory-contents .factory-text .factory-text-in{width:50%; max-width:640px;}
.factory-contents .factory-text h3{text-align:center; color:var(--new-green); font-size:var(--h4); margin-top:100px; margin-bottom:20px; position:relative;}
.factory-contents .factory-text h3:before{content:""; display:inline-block;  width:1px; height:70px; background:#ddd; position:absolute; top:-85px; left:50%;}
.factory-contents .factory-text p{font-size:var(--h5); line-height:1.7; margin-bottom:60px;}

.factory-contents .factory-photo{position:absolute; width:60%; max-width:800px; top:-20%; left:52vw; z-index:4;}
.factory-photo .factory-link{position:absolute; display:block; width:calc((520 / 1668) * 100%); height:calc((520 / 1696) * 100%); border-radius:50%; left:0; bottom:0;}
.factory-photo .factory-link a{display:block; height:100%; width:100%; transition: opacity 0.4s ease,transform 0.4s ease;}
.factory-photo .factory-link a:hover{opacity:0.8; transform: translateY(-8px);}
.factory-contents .bottle{position:absolute; width:22%; max-width:280px; bottom:-340px; left:4vw; z-index:4;}

@media (max-width: 1280px) {
.section-block#factory{position:relative; padding:60px 0 360px;}
.factory-contents .factory-photo{position:absolute; width:60%; max-width:800px; top:-5%; left:52vw; z-index:4;}
.factory-contents .bottle{position:absolute; width:20%; max-width:240px; bottom:-270px; left:6vw; z-index:4;}
}

@media (max-width: 1080px) {
.section-block#factory{position:relative; padding:50px 0 90px;}
.factory-contents .factory-photo{position:static; width:90%; max-width:720px; margin:0 auto 30px;  z-index:4;}
.factory-contents .bottle{position:absolute; width:18%; max-width:200px; bottom:-270px; left:6vw; z-index:4;}
.factory-contents .factory-text .factory-text-in{width:100%; max-width:100%;}
.factory-contents .bottle{position:absolute; width:18%; min-width:200px; max-width:200px; top:40%; right:10vw; bottom:auto; left:auto; z-index:4;}

.factory-photo .factory-link{position:absolute; display:block; width:25%; left:10%; bottom:auto; top:40%; min-width:240px; min-height:240px;}
.factory-photo .factory-link a{display:block; height:100%; width:100%;}
}

@media (max-width: 768px) {
.section-block#factory{position:relative; padding:40px 0 70px;}
.factory-contents .factory-text h3{text-align:center; color:var(--new-green); font-size:var(--h4); margin-top:70px; margin-bottom:20px; position:relative;}
.factory-contents .factory-text h3:before{content:""; display:inline-block;  width:1px; height:40px; background:#ddd; position:absolute; top:-55px; left:50%;}
.factory-contents .bottle{position:absolute; width:25%; min-width:auto; max-width:auto; top:62vw; right:10vw;}

.factory-photo .factory-link{position:absolute; display:block; width:28%; left:6%; bottom:auto; top:63vw; min-width:auto; min-height:auto;}
.factory-photo .factory-link a{display:block; height:100%; width:100%;}
}

@media (max-width: 576px) {
.section-block#factory{position:relative; padding:40px 0 60px;}
}

/* btn */
.btn-wrap a.btn{display: flex; justify-self: center; background:#fff; align-items: center; height:48px; padding:4px 55px 4px 25px; border-radius:30px; border:var(--border); position:relative; font-weight:600;}
.btn-wrap a.btn:after{content:""; display:block; width:18px; height:18px; background:url(/assets/images/_resource/pages/enjoy/arrow-grn.svg) no-repeat; background-size:18px; position:absolute; top:calc(50% - 9px); right:20px;}


.card {
  background: #fff;
  border-radius: 16px;
  border: solid 1px #888;
  overflow:hidden;
  box-shadow:
    0 8px 0 #fff,   /* 下のカード */
    0 8px 0 1px #888; /* 枠 */

  transition: transform 0.4s ease;
}
.card.type02{
   box-shadow:
    0 8px 0 #eee,   /* 下のカード */
    0 8px 0 1px #888; /* 枠 */ 
}

.swiper-slide.card{padding:10px; transform: scale(0.9);  transition: opacity 0.4s ease, transform 0.4s ease;}
.swiper-slide.card a{display:flex; gap:20px; width:calc(100% - 50px); border-right:dashed 1px #ccc; align-items: center; text-decoration:none; position:relative;}
.swiper-slide.card a{width:100%; border:none;}
.swiper-slide.card:hover {transform: translateY(-8px);}
.swiper-slide.card a .cm-thumb{width:55%; position:relative;}
.swiper-slide.card a .cm-title{width:calc(45% - 20px); font-size:var(--text); line-height:1.5; text-align:left;}
.swiper-slide.card a .cm-title span{color:var(--new-green); font-size:var(--s-text); line-height:1.5; display:block;}
/*.swiper-slide.card a:after{content:""; display:block; width:36px; height:36px; background:url(/assets/images/_resource/pages/enjoy/arrow-circle-org.svg); background-size:36px; position:absolute; top:calc(50% - 18px); right:-50px;}*/
.swiper-slide.card a:after{display:none;}
.swiper-slide.card a .cm-thumb:after{
    content: '';
    position: absolute;
    display: block;
    width: 24%;
    height: 46%;
    background: url(/assets/images/products/enjoy/top/play.png) no-repeat;
    top: 32%;
    left: 38%;
    background-size: 100%;
    z-index: 201;
}


.card-item{display:flex; flex-direction: column; gap:30px;transition: opacity .3s ease, transform .3s ease;}
.card-item:hover{transform: translateY(-8px);}
.card-text{display: flex; flex-direction: column; align-items: center; gap:10px;}
.card-text .item-title{font-size: var(--h5); text-align:center;}
.card-text .item-title.outer-link:after{content:""; display:inline-block; background:url(/assets/images/_resource/pages/products/common/outer-link-blk.png); background-repeat:no-repeat; width:16px; height:12px; background-size:16px 12px; margin-left:5px;}
.card-text p{font-size: var(--s-text); text-align:center;}

.swiper-slide.card.type-movie{padding:0;}
.swiper-slide.card.type-movie a{display:flex; flex-direction: column; gap:0; width:100%; border-right:none; align-items: center; text-decoration:none; position:relative;}
.swiper-slide.card.type-movie a .cm-thumb{width:100%; position:relative;}
.swiper-slide.card.type-movie a .cm-thumb:after{
    content: '';
    position: absolute;
    display: block;
    width: 12%;
    height: 23%;
    background: url(/assets/images/products/enjoy/top/play.png) no-repeat;
    top: 72.25%;
    left: 84%;
    background-size: 100%;
    z-index: 201;
}
.swiper-slide.card.type-movie a .cm-title{width:100%; padding:20px 30px; line-height:1.7;}
.swiper-slide.card.type-movie a .cm-title span{color:var(--orangeAA); font-size:var(--text); line-height:1.5; display:block;}


/* cm */
/* ===== セクション全体 ===== */
.cm-section {
  width: 100%;
  overflow: hidden; /* ページの横スクロール防止 */
}

/* ===== 中央の基準（1240px） ===== */
.cm-container {
  /*max-width: 1240px;*/
  max-width:1000px;
  margin: 0 auto;
  position: relative;
}
.cm-container.detail {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.cm-container.detail{margin-bottom:80px;}


/* ===== Swiper ===== */
.cmSwiper {
  overflow: visible; /* ← 3枚目以降を見せるため必須 */
}
.cmSwiper.not-slider{width:90%; max-width:1066px; margin:0 auto;}

/* 横並び */
.swiper-wrapper {
  display: flex;
}


/* スライド */
.cmSwiper .swiper-slide {
  width: 600px;
  flex-shrink: 0;
}
.cmSwiper .swiper-slide.type-movie {
  width: 480px;
  flex-shrink: 0;
}
.cmSwiper.not-slider .swiper-slide.type-movie{
  width:calc((100% - 40px * 1) / 2);
  transform: scale(1);  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cmSwiper.not-slider .swiper-slide.type-movie:hover{transform: translateY(-8px);}


/* スライド間 */
.cmSwiper .swiper-wrapper {
  gap: 0;
}
.cmSwiper.not-slider .swiper-wrapper{flex-wrap:wrap; gap:30px;}

/* ===== SP ===== */
@media (max-width: 768px) {
  .cmSwiper .swiper-slide {
    width: 100%;
  }
  .swiper-slide.card a{width:calc(100% - 30px);}
  .swiper-slide.card a:after{width:18px; height:18px; background-size:18px; top:calc(50% - 9px); right:-30px;}
  .cmSwiper .swiper-slide.type-movie {
    width: 100%;
    flex-shrink: 0;
  }
  .cm-container {
    padding-left: 10%;
    padding-right: 10%;
  }
  .cmSwiper.not-slider .swiper-wrapper{justify-content: center;}
  .cmSwiper.not-slider .swiper-slide.type-movie{
    width:90%;
  }
  @media (max-width: 576px) {
    .cmSwiper.not-slider .swiper-slide.type-movie{
      width:100%;
    }
  }
}

.cmSlide-nav{display:flex; margin:30px auto; justify-content: space-between; width:95%; max-width:1200px; text-align:center;}
.cmSwiper .swiper-pagination{width:auto !important; display:flex; background:#fff; border-radius:10px; overflow:hidden; position:static}
.cmSwiper .swiper-pagination-bullet{width:60px; height:4px; border-radius: 0; padding:3px; background:#fff; transition:background .3s ease, }
.cmSwiper .swiper-pagination-bullet-active{background: var(--orangeAA);}

.cmSwiper.not-slider .cmSlide-nav .btn{margin:20px auto 0;}

.swiper-ui{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:-20px;
}
.swiper-fraction{
  font-size:var(--s-text);
  letter-spacing:0.1em;
  position:relative;
  top:12px;
}
#cm{position:relative;}
#cm .tv{width:196px; height:240px; position:absolute; right:calc(50% - 35vw); bottom:10px; z-index:0;}

@media (max-width: 1280px) {
  #cm .tv{width:196px; height:240px; position:absolute; right:10px; bottom:10px; z-index:0;}
}

@media (max-width: 1080px) {
  .section-block#cm{padding:50px 0;}
}
@media (max-width: 960px) {
  .swiper-ui{margin-top:0;}
}
@media (max-width: 768px) {
.section-block#cm{padding:40px 0;}
.cmSlide-nav{display:flex; flex-direction: column; margin:20px auto; align-items: center; gap:20px; width:95%; max-width:1200px;}
.cmSlide-nav div{width:fit-content}
.cmSwiper .swiper-pagination-bullet{width:30px;}
.cmSlide-nav .swiper-fraction{width:4em;}
#cm .tv{width:90px; height:110px; position:absolute; right:10px; bottom:auto; top:20px; z-index:2;}

}
@media (max-width: 576px) {
.section-block#cm{padding:30px 0;}

.campaign-list .btn{width:100%;}
.shop-list .btn,.cmSlide-nav .btn a{width:100%;}
.cmSlide-nav{width:100%; padding:0;}
.cmSlide-nav .btn{width:100%}
}
.movieBanner{width:95%; max-width:800px; margin:70px auto 20px; background:#fff; border-radius:20px; position:relative; padding:20px; display:flex; gap:20px;}
.movieBanner .label{width:calc(28% - 10px)}
.movieBanner .banner{width:100%}
.movieBanner ul{display:flex; gap:20px; }
.movieBanner ul li{width:calc((100% - 20px) / 2);}
.movieBanner li a{display:flex; flex-direction: column; gap:5px; text-decoration:none;}
.movieBanner li a p{font-size:var(--ss-text); font-weight:600; }
.movieBanner li a p.outer-link:after{content:""; display:inline-block; background:url(/assets/images/_resource/pages/products/common/outer-link-blk.png); background-repeat:no-repeat; width:16px; height:12px; background-size:16px 12px; margin-left:5px;}
.movieBanner:before{content:"テレビ朝日で放送中！"; display:flex; align-items: center; color:#fff; font-size:var(--ss-text); font-weight:600; width:200px; height:32px; border-radius:16px; justify-content: center; background:var(--orangeAA); position:absolute; top:-16px;}
.movieBanner:after{content:""; display:block; width:10px; height:15px; clip-path: polygon(50% 75%, 0 0, 100% 0); position:absolute; top:14px; left:calc(120px - 7.5px); z-index:1; background:var(--orangeAA)}

@media (max-width: 768px) {
.movieBanner{width:90%; max-width:1200px; margin:60px auto 20px; background:#fff; border-radius:20px; position:relative; padding:20px; flex-direction: column; align-items: center;}
.movieBanner .label{width:75%}
.movieBanner .banner{width:100%}
.movieBanner:before,.movieBanner:after{display:none;}
}

@media (max-width: 576px) {
.movieBanner{width:80%; max-width:1200px; margin:60px auto 20px; background:#fff; border-radius:20px; position:relative; padding:20px; flex-direction: column; align-items: center;}
.movieBanner .label{width:100%}
.movieBanner .banner{width:100%}
.movieBanner ul{display:flex; flex-direction: column; align-items: center; gap:25px;}
.movieBanner ul li{width:100%;}
.movieBanner li a{display:flex; flex-direction: column; gap:5px; text-decoration:none;}
}

/* usefull-info */
.section-block#useful_info{border-top: dashed 1px var(--orangeAA); border-bottom: dashed 1px var(--orangeAA); padding-bottom:0;}
.usefull-info-list{display:flex; width:100%; max-width:1600px; margin:0 auto; border: dotted 1px var(--orangeAA); border-bottom:none;}
.usefull-info-list .filters{width:380px;}
.usefull-info-list .filters button{width:100%; background:transparent; border:none; color:#444; display:flex; flex-direction: column; gap:6px; height:100px; padding-left:80px; text-align:left; justify-content: center; border-bottom: dotted 1px var(--orangeAA);}
.usefull-info-list .filter-btn span._en{font-size:var(--h1); font-family:"Bebas Neue"; line-height:1;}
.usefull-info-list .filter-btn span._en b{font-size:var(--h4); font-weight:normal; padding:0 0.3em; }
.usefull-info-list .filter-btn span._ja{font-size:var(--ss-text);}
.usefull-info-list .filter-btn.is-active{background:rgba(234,85,4,.1); position:relative;}
.usefull-info-list .filter-btn.is-active:after{content:""; display:block; width:24px; height:24px; background:url(/assets/images/_resource/pages/enjoy/arrow-org.svg) no-repeat; background-size:24px; position:absolute; top:calc(50% - 12px); right:36px;}

.usefull-info-list .filters .category-illust{padding-top:60px; position:relative}
.filters .category-illust .category-title{width:fit-content; background:var(--orangeAA); color:#fff; padding:5px 20px; border-radius:30px; font-weight:600; font-size:var(--s-text); position:absolute; top:20px; right:20px;}
.filters .category-illust .category-title:after{
    content: "";
    display: block;
    width: 10px;
    height: 15px;
    clip-path: polygon(50% 75%, 0px 0px, 100% 0px);
    left: calc(42.5px);
    z-index: 1;
    position: absolute;
    bottom:-14px;
    background:var(--orangeAA)
}

.card-block{
  display:flex; flex-wrap: wrap; gap:30px; padding:35px; position: relative;
}

.card-block .card-item{width:calc((100% - 30px * 2) / 3);}
/* カード非表示 */
.card-item.is-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
}

button.filter-btn:focus {
  outline: none;
}
/* キーボード操作時のみ表示 */
button.filter-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.usefull-info-list .card-block{width:calc(100% - 380px); border-left:dotted 1px var(--orangeAA)}
.usefull-info-list .card-block .card-item a{text-decoration:none; display:flex; flex-direction: column;  gap:30px;}
/*
@media (max-width: 1080px) {
  .usefull-info-list .filters{width:320px;}
  .usefull-info-list .card-block{width:calc(100% - 320px);}
  .usefull-info-list .filters button{padding-left:50px;}
  .card-block .card-item{width:calc((100% - 30px * 1) / 2);}
}*/

@media (max-width: 1080px) {
  .section-block#useful_info{position:relative; padding:50px 0;}
  .usefull-info-list{flex-direction: column; width:95%; margin:0 auto; border:none;}
  .usefull-info-list .filters{width:100%; display:flex; flex-wrap:wrap; border:none; border-top: dotted 1px var(--orangeAA); border-left: dotted 1px var(--orangeAA);}
  .usefull-info-list .filters button{width:50%; background:transparent; border:none; display:flex; flex-direction: column; gap:6px; height:80px; padding-left:30px; text-align:left; justify-content: center; border-bottom: dotted 1px var(--orangeAA); border-right: dotted 1px var(--orangeAA);}
  .usefull-info-list .card-block{width:100%; border:none; padding:30px 10px; border-left:none;}
  .card-block .card-item{width:calc((100% - 30px * 2) / 3);}   
  .usefull-info-list .filter-btn.is-active:after{width:18px; height:18px; background-size:18px; top:calc(50% - 9px); right:24px; transform: rotate(90deg);}
  .usefull-info-list .filters .category-illust{display:none;}
}

@media (max-width: 768px) {
  .section-block#useful_info{position:relative; padding:40px 0;}
  .section-block#useful_info .contents-title{margin-bottom:40px}
  .card-block .card-item{width:calc((100% - 30px * 1) / 2);}
  .usefull-info-list .filters button{height:64px; padding-left:16px; gap:1px;}
  .usefull-info-list .filter-btn.is-active:after{width:14px; height:14px; background-size:14px; top:calc(50% - 7px); right:18px; transform: rotate(90deg);}
  .usefull-info-list .card-block{width:100%; border:none; padding:30px 5px 0; gap:20px;}
  
  .card-text{display: flex; flex-direction: column; align-items: initial; gap:10px;}
  .card-text p{font-size: var(--s-text); text-align:left;}
}

@media (max-width: 576px) {
  .section-block#useful_info{position:relative; padding:30px 0;}
  .section-block#useful_info .contents-title{margin-bottom:30px}
}

/* ===== ボタン ===== */
.filter-btn {
  cursor: pointer;
  transition: 
    background .3s ease,
    color .3s ease,
    transform .2s ease;
}

/* フォーカス */
.filter-btn:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}
.filter-btn:focus:not(:focus-visible) {
  outline: none;　
}
/* ===== カード ===== */

/* アニメーション用 */
.card-item {
  transition: 
    opacity .3s ease,
    transform .3s ease;
    transition-delay: calc(var(--i) * 0.03s);
}

/* 非表示状態 */
.card-item.is-hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute; /* レイアウト崩れ防止 */
}

/* ===== コンテナ高さ ===== */
.card-block {
  transition: height .3s ease;
  transition: height .3s cubic-bezier(.4,0,.2,1);
  position: relative;
}


/* kv */
.enjoy-column{background:url(/assets/images/_resource/pages/enjoy/title-bg.png) repeat-x; background-size:auto 156px;}
.enjoy-title{width:93%; max-width:1370px; display:flex; align-items: center; height:100px; margin:0 auto; gap:15px;}
.enjoy-title .ja{font-size:var(--title); color:var(--orangeAA); font-family:"Noto Sans","BIZ UDGothic",sans-serif; font-weight:900; }
.enjoy-title .en{font-size:var(--title-en); color:#f6ae48;  font-family: "Bebas Neue", sans-serif;}

@media (max-width: 768px) {
.enjoy-title{justify-content: center; height:70px}
.enjoy-title .en{font-size:var(--title-en); color:#f6ae48;  font-family: "Bebas Neue", sans-serif;}
}

/* ========================================
   Layout
======================================== */

.rv {
  position: relative;
  height: 620px;
  overflow: hidden;
  z-index:1;

  /* interaction */
  /*cursor: grab;*/
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;

  /* fade */
  opacity: 0;
  transition: opacity 0.6s ease;

  user-select: none;
  -webkit-user-select: none;
  /*cursor: grab;*/
}

.rv-wrap {
  position: relative;
  height: 100%;
}

/* ========================================
   Slide
======================================== */

.rv-item {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 260px;
  height: 380px;

  transform-origin: 50% 100%;
  will-change: transform;
  transition: transform 0.25s ease;
}

.rv.is-dragging .rv-item {
  transition: none;
  /*pointer-events: none;*/
}

/* ========================================
   Card UI
======================================== */

.rv-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  text-decoration: none;
  color: #444;

  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rv-item a:hover {
  transform: translateY(-10px);
}

.rv-item .card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
}

.rv-item .item-title {
  margin: 5px 0 0;
  font-size: var(--text);
  font-weight: 600;
  line-height: 1;
}

.rv-item .card-text p + p {
  margin: 0;
  font-size: var(--s-text);
  font-weight: 500;
  line-height: 1.7;
}

/* ========================================
   Image
======================================== */

.rv-item img {
  width: 260px;
  height: 380px;

  pointer-events: none;
  user-drag: none;
  -webkit-user-drag: none;
}

/* ========================================
   Drag State
======================================== */

.rv.is-dragging {
  /*cursor: grabbing;*/
}

/* ========================================
   Opening Animation
======================================== */

.rv-inner {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease,
    transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.rv.is-ready {
  opacity: 1;
}

.rv.is-ready .rv-inner {
  opacity: 1;
  transform: translateY(0);
}

/* stagger */
.rv.is-ready .rv-item:nth-child(1) .rv-inner { transition-delay: 0s; }
.rv.is-ready .rv-item:nth-child(2) .rv-inner { transition-delay: 0.05s; }
.rv.is-ready .rv-item:nth-child(3) .rv-inner { transition-delay: 0.1s; }
.rv.is-ready .rv-item:nth-child(4) .rv-inner { transition-delay: 0.15s; }
.rv.is-ready .rv-item:nth-child(5) .rv-inner { transition-delay: 0.2s; }

.rv-pagination {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.rv-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  border:solid 1px var(--new-green)
}

.rv-dot.is-active {
  background: var(--new-green);
}

.rv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rv-dots {
  display: flex;
  gap: 8px;
}

/* ボタン */

.rv-prev,
.rv-next {
  width: 15px;   /* 画像サイズに合わせる */
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 左 */
.rv-prev {
  background-image: url('/assets/images/_resource/pages/enjoy/left_arrow.png');
  background-size:15px 24px;
  margin-right:12px;
}

/* 右 */
.rv-next {
  background-image: url('/assets/images/_resource/pages/enjoy/right_arrow.png');
  background-size:15px 24px;
  margin-left:12px;
}
/*再生／停止*/
.rv-toggle{background:#fff; border:none; padding:6px 12px; transition: opacity 0.4s ease,transform 0.4s ease;}
.rv-toggle:hover{opacity:.75;}

.rv-toggle::before {
  content: ""; display:block; width:16px; height:18px; background:url('/assets/images/_resource/pages/enjoy/stop.svg'); background-size:16px 18px; fill: #888;
}

.rv-toggle[aria-pressed="false"]::before {
  content: ""; display:block; width:16px; height:18px; background:url('/assets/images/_resource/pages/enjoy/play.svg'); background-size:16px 18px; fill: #888;
}


@media (max-width: 768px) {
  .rv {
    height: 520px;
    touch-action: pan-y;
  }

  .rv-item {
    width: 210px;
    height: 310px;
  }

  .rv-item img {
    width: 210px;
    height: 310px;
  }
}

.unit {
  font-family: 'Yu Gothic', YuGothic, 'ＭＳ Ｐゴシック', 'MS PGothic', Times !important;
}