@charset "UTF-8";

/* =========================================================
  catday Campaign Styles (cleaned & refactored)
  - Consolidated media queries
  - Fixed typos & invalid values
  - Removed duplicate/contradicting rules
  - Introduced CSS variables for colors
  - Kept BEM structure and specificity
   ========================================================= */

:root {
  --c-white: #fff;
  --c-black: #333333;
  --c-primary: #F08200;
  --c-accent: #CFEAD4;
  --c-gold: #F08200;
  --c-bg-ivory: #FFF7F5;
  --c-muted: #ccc;
  --c-cool: #31C2F7;

  /* Category title backgrounds */
  --c-cat01: #5C9398;
  --c-cat02: #D4B401;
  --c-cat03: #C1502E;
  --c-cat04: #EB8E46;
  --c-cat05: #333F6F;
}

/* Utility */
.only-sp {
  display: none !important;
}

@media (max-width: 767.98px) {
  .only-sp {
    display: block !important;
  }

  .sp-none {
    display: none !important;
  }
}

.slick-dots>li:first-child:last-child {
  display: none;
}

#allWrap {
  overflow: visible;
}

/* =========================================================
  catday (page scope)
   ========================================================= */
.catday {
  /* modal scope container */
}

/* Base page scaffold */
.catday#eventWrap {
  background-color: var(--c-white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  color: var(--c-black);
}

/* MV */
.catday__mv {
  margin: 0;
  position: relative;
  z-index: 1;
}

.catday__mv-link {
  display: block;
}

.catday__mv img {
  width: 100%;
}


/* Nav */
.catday__nav {
  position: -webkit-sticky;
  position: sticky;
  top: 67px;
  left: 0;
  z-index: 8;
  width: 100%;
  padding: 10px 0 15px;
  transition: .3s;
  background: var(--c-accent);
}

@media (max-width: 767.98px) {
  .catday__nav {
    top: 0;
    padding: 10px 0px;
  }
}

.catday__nav-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767.98px) {
  .catday__nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    column-gap: min(6vw, 24px);
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  .catday__nav-item {
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    text-align: left;
  }
}

.catday__nav-item {
  width: 160px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 767.98px) {
  .catday__nav-item {
    width: auto; /* gridに任せる */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せ */
    gap: 8px;
    font-size: 14px;
    text-align: left;
  }
}

.catday__nav-item.-item00 .catday__nav-image { background-image: url(/pages/catday/img/cat_ico00.svg); }
.catday__nav-item.-item01 .catday__nav-image { background-image: url(/pages/catday/img/cat_ico01.svg); }
.catday__nav-item.-item02 .catday__nav-image { background-image: url(/pages/catday/img/cat_ico02.svg); }
.catday__nav-item.-item03 .catday__nav-image { background-image: url(/pages/catday/img/cat_ico03.svg); }

.catday__nav-item.-current .catday__nav-image img {
  opacity: 0;
}

/* リンク */
.catday__nav-link {
  display: block;
  transition: all .3s linear;
  opacity: 1;
  text-decoration: none;
}

.catday__nav-link:hover {
  opacity: 1;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .catday__nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
}

.catday__nav-image {
  width: 50px;
  height: 50px;
  margin: 4px auto ; 
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

@media (max-width: 767.98px) {
  .catday__nav-image {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin: 8px 0;
  }
}

.catday__nav-image img {
  transition: all .3s linear;
}

.catday__nav-text {
  color: var(--c-black);
}

@media (max-width: 767.98px) {
  .catday__nav-text {
    padding-top: 0;
    font-size: 13px;
    line-height: 1.3; 
    white-space: nowrap; 
  }
}

/* =========================================
★ ホバー時にアイコン画像を消して
背景のONアイコンだけを見せる処理
========================================= */

.catday__nav-link:hover .catday__nav-image img {
  opacity: 0 !important;
  transition: opacity .3s;
}

.catday__nav-image img {
  opacity: 1;
  transition: opacity .3s;
}


/* Inner */
.catday__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Categories */
.catday__categories {
  padding: 50px 0;
  overflow: hidden;
  background:#FFFCD9;
}

@media (max-width: 767.98px) {
  .catday__categories {
  padding: 40px 0px;
  }

}


.catday__categories-block {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media (max-width: 767.98px) {
  .catday__categories-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.catday__categories-block:nth-child(2n) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

@media (max-width: 767.98px) {
  .catday__categories-block:nth-child(2n) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.catday__categories-block:not(:last-child) {
  margin-bottom: 80px;
  padding-bottom: 90px;
  border-bottom: 2px dotted #F08200;
}

@media (max-width: 767.98px) {
  .catday__categories-block:not(:last-child) {
    margin-bottom: 50px;
    padding-bottom: 60px;
  }
}

.catday__categories-block::before {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

/* Decorative bubbles (sizes/positions preserved) */
.catday__categories-block.-category01::before {
  right: -120px;
  top: -120px;
  width: 517px;
  height: 517px;
}

@media (max-width: 767.98px) {
  .catday__categories-block.-category01::before {
    right: 50%;
    top: -20px;
    -webkit-transform: translateX(225px);
    transform: translateX(225px);
    width: 661px;
    height: 830px;
  }
}

.catday__categories-block.-category01 .catday__categories-block_image {
  -webkit-box-shadow: 10px 10px 0 0 rgba(105, 179, 184, 0.3);
  box-shadow: 10px 10px 0 0 rgba(105, 179, 184, 0.3);
}

@media (max-width: 767.98px) {
  .catday__categories-block.-category01 .catday__categories-block_image {
    -webkit-box-shadow: 7px 7px 0 0 rgba(105, 179, 184, 0.3);
    box-shadow: 7px 7px 0 0 rgba(105, 179, 184, 0.3);
  }
}

.catday__categories-block.-category02::before {
  left: -300px;
  top: -70px;
  width: 820px;
  height: 820px;
}

@media (max-width: 767.98px) {
  .catday__categories-block.-category02::before {
    left: auto;
    right: 50%;
    top: 260px;
    -webkit-transform: translateX(225px);
    transform: translateX(225px);
    width: 660px;
    height: 863px;
  }
}

.catday__categories-block.-category02 .catday__categories-block_image {
  -webkit-box-shadow: 10px 10px 0 0 rgba(243, 175, 179, .3);
  box-shadow: 10px 10px 0 0 rgba(243, 175, 179, .3);
}

@media (max-width: 767.98px) {
  .catday__categories-block.-category02 .catday__categories-block_image {
    -webkit-box-shadow: 7px 7px 0 0 rgba(243, 175, 179, .3);
    box-shadow: 7px 7px 0 0 rgba(243, 175, 179, .3);
  }
}

.catday__categories-block_content {
  position: relative;
  width: 47.5%;
}

@media (max-width: 767.98px) {
  .catday__categories-block_content {
    width: 100%;
  }
}

.catday__categories-block_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  text-align: center;
}

@media (max-width: 767.98px) {
  .catday__categories-block_title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto 25px;
  }
}

.catday__categories-block_title-icon {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0;
}

.catday__categories-block_title-inner {
  position: relative;
  z-index: 1;
  display: block;
  padding: 6px 20px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, .15);
}

.catday__categories-block_title-inner.-cat01 {
  background-color: var(--c-cat01);
}

.catday__categories-block_title-inner.-cat02 {
  background-color: var(--c-cat02);
}

.catday__categories-block_title-inner.-cat03 {
  background-color: var(--c-cat03);
}

.catday__categories-block_title-inner.-cat04 {
  background-color: var(--c-cat04);
}

.catday__categories-block_title-inner.-cat05 {
  background-color: var(--c-cat05);
}

.catday__categories-block_text_l {
  margin-bottom: 15px;
  font-size: 2.4rem;
  font-family: 'Noto Sans JP', serif;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
  text-align: center;
  color: #F08200;
}

@media (max-width: 767.98px) {
  .catday__categories-block_text_l {
    font-size: 2rem;
    line-height: 1.5;
  }
}

.catday__categories-block_text {
  margin-bottom: 20px;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 767.98px) {
  .catday__categories-block_text {
    font-size: 1.8rem;
    text-align: left;
  }
}

.catday__categories-block_button {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.catday__categories-block_button.color_change a {
  background-color:#F08200;
}

.catday__categories-block_button>a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  min-width: 330px;
  height: 60px;
  padding: 8px 70px 10px 50px;
  color: var(--c-white);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  border: 2px solid var(--c-white);
  border-radius: 30px;
  line-height: 1.2;
  text-align: center;
  gap: 20px;
  font-size: 1.6rem;
}

@media (max-width: 767.98px) {
  .catday__categories-block_button>a {
    font-size: 1.6rem;
    width: 100%;
    min-width: initial;
    padding: 8px 40px 10px 30px;
  }
}

.catday__categories-block_button>a::after {
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 10px;
  height: 15px;
  background: url(/pages/catday/img/arrow_button.svg) no-repeat center center/contain;
  z-index: 2;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.catday__categories-block_button>a span {
  position: relative;
  -webkit-transition: all .3s;
  transition: all .3s;
  z-index: 3;
}

.catday__categories-block_button>a:hover {
  text-decoration: none;
}

.catday__categories-block_media {
  width: 47.5%;
}

@media (max-width: 767.98px) {
  .catday__categories-block_media {
    width: auto;
    margin: 30px 0 0 0;
  }
}

.catday__categories-block_image {
  border-radius: 10px;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .catday__categories-block_image {
    border-radius: 7px;
  }
}

/* Items section */
.catday__items {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 50px 0;
  background-color: #FFFCD9;
}

@media (max-width: 767.98px) {
  .catday__items {
    padding: 30px 0;
  }
}

.catday__items-header {
  margin-bottom: 60px;
  text-align: center;
}

.catday__items-mv img {
  border-radius: 50px 50px 0 0;
  margin-bottom: 36px;
}

.catday__items-title {
  margin-bottom: 10px;
  font-size: 2.3rem;
  font-weight: bold;
  color: #F08200;
}

@media (max-width: 767.98px) {
  .catday__items-title {
    font-size: 2rem;
    margin-bottom: 10px;
  }
}

.catday__items-title_icon {
  display: block;
  width: 780px;
  margin: 60px auto 40px;
}

@media (max-width: 767.98px) {
  .catday__items-title_icon {
    width: 100%;
    margin:50px auto 30px;
  }
}

.catday__items-lead {
  font-size:1.6rem;
  letter-spacing: .06em;
  line-height: 1.5;
  margin-top: 20px;
}

@media (max-width: 767.98px) {
  .catday__items-lead {
    font-size:1.6rem;
    margin-top: 20px;
  }
}

.catday__items-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  margin-bottom:100px;
  padding: 0;
  list-style: none;
  gap: 20px;
  position: relative;
}

@media (max-width: 767.98px) {
  .catday__items-list {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom:50px;
  }
}

.catday__items-list_item {
  position: relative;
  padding: 0;
  background-color: var(--c-white);
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 0 0 rgba(240, 130, 0, .3);
  box-shadow: 5px 5px 0 0 rgba(240, 130, 0, .3);
}


.catday__items-list_inner {
  position: relative;
  height: 100%;
  padding: 20px;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .catday__items-list_inner {
    padding: 8px 7px 10px;
  }
}

.catday__items-list_inner:hover .catday__items-list_more {
  background-color: var(--c-white);
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.catday__items-list_inner:hover .catday__items-list_more::after {
  border-top: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
  /* fixed missing # */
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.catday__items-list_image {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .catday__items-list_image {
    margin-bottom: 16px;
  }
}

.catday__items-list_image img {
  aspect-ratio: 920 / 690;
  -o-object-fit: cover;
  object-fit: cover;
}

.catday__items-list_content {
  text-align: left;
}

.catday__items-list_shop {
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .catday__items-list_shop {
    font-size: 1.6rem;
  }
}

.catday__items-list_title {
  margin-bottom: 10px;
  color: #F08200;
  font-size: 1.5rem;
}

@media (max-width: 767.98px) {
  .catday__items-list_title {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }
}

.catday__items-list_price {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .05em;
}

@media (max-width: 767.98px) {
  .catday__items-list_price {
    font-size: 1.6rem;
  }
}

.catday__items-list_price-tax {
  font-size: 1.4rem;
  font-weight: normal;
}

@media (max-width: 767.98px) {
  .catday__items-list_price-tax {
    font-size: 1.4rem;
    text-align: left;
  }
}

.catday__items-list_more {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin: 20px 0 0;
  padding: 0 35px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--c-gold);
  border: 1px solid var(--c-gold);
  border-radius: 100px;
  color: var(--c-white);
  font-size: 1.5rem;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .catday__items-list_more {
    font-size: 1.2rem;
    padding: 0 15px;
    height: 30px;
    margin: 12px 0 0;
  }
}

.catday__items-list_more::after {
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 1px solid var(--c-white);
  border-right: 1px solid var(--c-white);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (max-width: 767.98px) {
  .catday__items-list_more::after {
    right: 15px;
    width: 6px;
    height: 6px;
  }
}

/* Item detail */
.catday__items-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 60px;
}

@media (max-width: 767.98px) {
  .catday__items-detail {
    display: block;
    padding: 50px 20px 30px;
  }
}

.catday__items-detail_image {
  width: 48%;
  margin: 0;
}

@media (max-width: 767.98px) {
  .catday__items-detail_image {
    width: 100%;
    margin: 0 0 20px;
  }
}

.catday__items-detail_content {
  width: 48%;
}

@media (max-width: 767.98px) {
  .catday__items-detail_content {
    width: 100%;
    margin-top: 40px;
  }
}

.catday__items-detail_title {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 10px;
  color: var(--c-primary);
  border-bottom: 2px dotted var(--c-primary);
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .catday__items-detail_title {
    font-size: 1.5rem;
  }
}

.catday__items-detail_price {
  margin-bottom: 15px;
  color: var(--c-black);
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .catday__items-detail_price {
    font-size: 1.7rem;
  }
}

.catday__items-detail_price-tax {
  font-size: 1.4rem;
}

@media (max-width: 767.98px) {
  .catday__items-detail_price-tax {
    font-size: 1.2rem;
  }
}

.catday__items-detail_labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.catday__items-detail_label {
  display: inline-block;
  padding: 5px 10px;
  font-size: 1.3rem;
  line-height: 1.3;
}

.catday__items-detail_labels.-days {
  display: block;
  margin: 0 auto 10px;
  text-align: center;
}
  

@media (max-width: 767.98px) {

  .catday__items-detail_labels {
  gap: 5px;
  margin: 5px 0;
}

  .catday__items-detail_label {
    font-size: .95rem;
    line-height: 1.4;
  }
}

.catday__items-detail_label.-limited {
  color: var(--c-primary);
  background-color: var(--c-white);
  border: 1px solid var(--c-primary);
  border-radius: 100px;
}

.catday__items-detail_label.-collaboration{
  padding: 5px 15px 7px 10px;
  color: var(--c-white);
  background-color: var(--c-primary);
  border-radius: 100px;
}
.catday__items-detail_labels.-collaboration .catday__items-detail_label {
  margin: 0;
  padding: 0 30px 0 15px;
  border-top: solid 1px #FFF;
  border-right: solid 1px #FFF;
  border-bottom: solid 1px #FFF;
  line-height: 32px;
  color: var(--c-white);
  background-color: var(--c-primary);
  border-radius: 0 12.5rem 12.5rem 0;
}

.catday__items-detail_label.-cool {
  color: var(--c-white);
  background-color: var(--c-cool);
}

.catday2023__items-detail_text {
  margin-bottom: 15px;
}

.catday__items-detail_text {
  font-size: 1.4rem;
  line-height: 1.85;
  margin-bottom: 15px;
}

@media (max-width: 767.98px) {
  .catday__items-detail_labels.-collaboration .catday__items-detail_label{
    padding: 0 20px 0 15px;
    line-height: 26px;
  }
  .catday__items-detail_text {
    font-size: 1.3rem;
    text-align: left;
  }
}

.catday__items-detail_line {
  font-size: 1.6rem;
  line-height: 1.85;
  border-top: #666 1px dotted;
  margin-bottom: 0;
  padding: 15px 0;
}

@media (max-width: 767.98px) {
  .catday__items-detail_line {
    font-size: 1.3rem;
  }
}

.catday__items-detail_wrap {
  background: #eee;
  border-radius: 10px;
  margin-top: 5px;
  padding: 16px 20px 20px;
}

.catday__items-detail_shop-title {
  margin-bottom: 5px;
  font-size: 1.8rem;
  font-weight: bold;
}

@media (max-width: 767.98px) {
  .catday__items-detail_shop-title {
    font-size: 1.4rem;
  }
}

.catday__items-detail_shop-text {
  font-size: 1.6rem;
}

@media (max-width: 767.98px) {
  .catday__items-detail_shop-text {
    font-size: 1.2rem;
  }
}

.catday__items-detail_shop-text::before {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  vertical-align: middle;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: auto;
  background: url(/pages/catday/img/address_icon.svg) no-repeat center center/contain;
  margin-right: 5px;
}

@media (max-width: 767.98px) {
  .catday__items-detail_shop-text::before {
    width: 12px;
    height: 12px;
    margin-right: 3px;
  }
}

.catday__items-detail_shop-text-inner {
  margin-left: 20px;
}

.catday__items-detail_shop-text-inner::before {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  vertical-align: middle;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: auto;
  background: url(/pages/catday/img/tell_icon.svg) no-repeat center center/contain;
  margin-right: 5px;
}

@media (max-width: 767.98px) {
  .catday__items-detail_shop-text-inner::before {
    width: 12px;
    height: 12px;
    margin-right: 3px;
  }
}

.catday__items-detail_button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-top: 15px;
  padding: 0 30px;
  background-color: var(--c-gold);
  color: var(--c-white) !important;
  border-radius: 100px;
  font-size: 1.5rem;
  line-height: 1.3;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  opacity: 1;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .catday__items-detail_button {
    font-size: 1.2rem;
    height: 32px;
  }
}

.catday__items-detail_button:hover {
  opacity: 1;
  background: var(--c-white);
  text-decoration: none;
  cursor: pointer;
}

.catday__items-detail_button::after {
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 1px solid var(--c-white);
  border-right: 1px solid var(--c-white);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.catday__items-detail_button:hover::after {
  border-top: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}

.catday__items-detail_button:hover .txt_normal {
  color: var(--c-gold);
}

.catday__items-detail .items-slider .slick-dots li {
  width: 8px;
  height: 8px;
  margin: 0 7px;
}

.catday__items-detail .items-slider .slick-dots li button {
  width: 8px;
  height: 8px;
  background-color: transparent;
  background: var(--c-muted);
  border-radius: 50%;
}

.catday__items-detail .items-slider .slick-dots li button::before {
  color: transparent !important;
}

.catday__items-detail .items-slider .slick-dots li.slick-active button {
  background: var(--c-primary);
}

/* Scroll animations */
.catday .scroll-fadein {
  opacity: 0;
}

.catday .scroll-fadein.is-active {
  -webkit-animation: fadeIn .7s linear forwards;
  animation: fadeIn .7s linear forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Modal */
.catday .modal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  padding: 30px 0;
  text-align: center;
  background: rgba(216, 228, 129, .3);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .3s;
  transition: .3s;
}

.modal-container{position:relative;}
.modal-close{position:absolute;top:16px;right:16px;z-index:10;}

.catday .modal-container::before,
.catday .modal-container::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

.catday .modal-container.is-active {
  opacity: 1;
  visibility: visible;
}

.catday .modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 1080px;
  width: 90%;
  padding: 0;
}

.catday .modal-content {
  background-color: var(--c-white);
  text-align: left;
  border: none;
  border-radius: 20px;
}

/* Fix invalid value: pointer-events: painted -> auto */
.catday .modal-content a[href*="tel:"] {
  pointer-events: auto;
  cursor: pointer;
}

.catday .modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  width: 40px;
  height: 40px;
  background-color: var(--c-primary);
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .catday .modal-close {
    width: 30px;
    height: 30px;
  }
}

.catday .modal-close::before,
.catday .modal-close::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  display: block;
  width: 23px;
  height: 1px;
  margin: auto;
  background: var(--c-white);
}

@media (max-width: 767.98px) {

  .catday .modal-close::before,
  .catday .modal-close::after {
    width: 18px;
  }
}

.catday .modal-close::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.catday .modal-close::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* White section */
.catday__white {
  background-color: var(--c-white);
  position: relative;
  z-index: 0;
  padding: 90px 0 100px;
  text-align: center;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .catday__white {
    padding: 40px 0 60px;
    text-align: left;
  }
}

.catday__white-bnr {
  margin: 20px auto;
  width: 80%;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  cursor: pointer;
}

.catday__white-bnr:hover {
  text-decoration: none;
  opacity: .6;
}

@media (max-width: 767.98px) {
  .catday__white-bnr {
    width: 100%;
  }
}

.catday__white-share {
  margin: 80px auto 40px;
  width: 30%;
  max-width: 250px;
}

@media (max-width: 767.98px) {
  .catday__white-share {
    width: 60%;
  }
}

.catday__white-sns {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.catday__white-sns a {
  margin: 0 20px;
  width: 8%;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  max-width: 60px;
  cursor: pointer;
}

.catday__white-sns a:hover {
  text-decoration: none;
  opacity: .6;
}

@media (max-width: 767.98px) {
  .catday__white-sns a {
    margin: 0 10px;
    width: 16%;
  }
}

/* Body state when modal open */
body.modal-active {
  overflow: hidden;
}

body.modal-active .catday__nav {
  opacity: 0;
  z-index: -1;
}

body.modal-active .catday__items {
  z-index: 9999;
}

/* Generic button */
.button {
  position: relative;
  display: inline-block;
  background: #d13415;
  color: var(--c-white);
  width: 100px;
  margin: 5px;
  padding: 10px 30px 10px 20px;
  text-align: center;
}

.button::after {
  position: absolute;
  content: "";
  top: calc(50% - 5px);
  right: 20px;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: transparent transparent var(--c-white) var(--c-white);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transition: .3s;
  transition: .3s;
}

.button:hover::after {
  right: 10px;
}

/* Page top */
.pagetop {
  opacity: 0;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  -webkit-transition: all .4s ease-in;
  transition: all .4s ease-in;
}

@media (max-width: 767.98px) {
  .pagetop {
    bottom: 64px;
    right: 20px;
  }
}

.pagetop.is-visible {
  opacity: 1;
}

.pagetop-btn {
  display: -ms-grid;
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  background-color:#31C2F7;
  border: 3px solid var(--c-white);
  border-radius: 32px;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, .2);
  color: var(--c-white) !important;
  text-align: center;
  text-decoration: none !important;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.pagetop-btn:hover {
  opacity: .6;
}


/* ========================================================================================================================================================================================================================
メッセージエリア
======================================================================================================================================================================================================================== */

.catday__message{
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #FFFCE7;
  padding: 50px 0 100px;
}

@media (max-width: 767.98px){
  .catday__message{
    padding: 120px 0 130px;
  }
}

/* 中身を前面へ（← class名をHTMLに合わせて修正） */
.catday__message .catday__inner,
.catday__message .catday__message-body{
  position: relative;
  z-index: 1;
}

/* =========================================================
PC/SP タイトル画像の出し分け（このセクション内だけ）
========================================================= */
.catday__message .pc-only{ display: block; }
.catday__message .sp-only{ display: none; }

@media (max-width: 767.98px){
  .catday__message .pc-only{ display: none; }
  .catday__message .sp-only{ display: block; }
}

/* タイトル（画像） */
.catday__message-title{
  margin: 0;
  line-height: 0;
}
.catday__message-title img{
  width: min(500px, 92vw);
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* タイトル⇄本文：20px */
.catday__message-text{
  margin: 30px auto 0;
  font-size: 1.6rem;
  line-height: 2;
  color: #F08200;
  font-weight: 700;
  letter-spacing: .02em;
  max-width: 820px;
}

.catday__message-em{
  display: inline-block;
  font-size: 30px;
  font-weight: 800;
  color: #BB4E00;
  line-height: 1.2;
  padding: 0 .12em;

  background-image: linear-gradient(transparent 40%, #FFEE83 0);
  background-repeat: no-repeat;
  background-size: 100% 0.65em;
  background-position: 0 100%;
}


@media (max-width: 767.98px){
  .catday__message-title img{
    width: min(340px, 92vw);
    max-width: 340px;
  }

  .catday__message-text{
    font-size: 1.5rem;
    line-height: 1.95;
  }

    .catday__message-em{
    font-size: 24px;
  }
}

/* =========================
肉球（装飾画像）
========================= */
.catday__message-paws{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.catday__message-paw{
  position: absolute;
  height: auto;
  display: block;
}

/* PC用：表示 */
.catday__message-paw.-pc01,
.catday__message-paw.-pc02{
  display: block;
}

/* SP用：非表示 */
.catday__message-paw.-sp01,
.catday__message-paw.-sp02{
  display: none;
}

/* SPでは入れ替え */
@media (max-width: 767.98px){
  .catday__message-paw.-pc01,
  .catday__message-paw.-pc02{
    display: none;
  }

  .catday__message-paw.-sp01,
  .catday__message-paw.-sp02{
    display: block;
  }
}

.catday__message-paw.-pc01{
  top: 60px;
  left: 15%;
  transform: translateX(-50%);
  width: min(360px, 32vw); 
}

.catday__message-paw.-pc02{
  bottom: 60px;
  right: 15%;
  transform: translateX(50%);
  width: min(360px, 32vw); 
}

@media (max-width: 767.98px){
  .catday__message-paw.-sp01{
    top: 30px;
    left: 40%;
    transform: translateX(-50%);
    width: min(360px, 72vw);
  }
  .catday__message-paw.-sp02{
    bottom: 30px;
    right: 40%;
    transform: translateX(50%);
    width: min(360px, 72vw);
  }
}



/* ==================================================================================================================================================================
イベントエリア
================================================================================================================================================================== */

/* 背景（画像 repeat） */
.catday__special-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #EAF2C7; /* 画像が薄い/透過時の保険 */
  background-image: url(/pages/catday/img/event_bg_pattern.png); /* ← 背景画像に差し替え */
  background-repeat: repeat;
  background-size: auto;
}

/* セクション余白 */
.catday__special {
  position: relative;
  padding: 120px 0 140px;
  text-align: center;
  overflow: hidden;
}

/* 中身は背景より前 */
.catday__special .catday__inner,
.catday__special h2,
.catday__special .catday__special-body {
  position: relative;
  z-index: 1;
}

/* ======================================================
タイトル（画像）サイズ調整
====================================================== */
.catday__special h2 {
  margin: 0 auto 80px;
  text-align: center;
}
.catday__special h2 img {
  width: min(520px, 86vw);
  max-width: 520px;
  display: block;
  margin: 0 auto;
}

/* ======================================================
タイトル下テキスト（添付は無し想定：非表示）
====================================================== */
.catday__special-lead {
  display: none;
}

/* ======================================================
本体：カード一覧
====================================================== */
.catday__special-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* カード（黒枠・角丸） */
.catday__special-card {
  background: #fff;
  border: 2px solid #39352C;
  border-radius: 18px;
  padding: 30px 30px 30px;
  box-sizing: border-box;
}

/* タイトル（オレンジ＋下線） */
.catday__special-name {
  position: relative;
  margin: 0 0 20px;
  padding: 0 0 25px;
  font-size: 2.2rem;
  font-weight: 700;
  color: #EB8E46;
  text-align: center;
}
.catday__special-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EB8E46;
}

.catday__special-image {
  width: 100%;
  margin: 30px 0 20px;
}
.catday__special-image img {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
}

/* 説明文 */
.catday__special-desc {
  margin: 20px 0;
  text-align: left;
  line-height: 1.75;
  color: var(--c-black);
}

/* 情報（期間/場所/時間） */
.catday__special-info {
  margin: 0;
}
.catday__special-info div {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* dt / dd */
.catday__special-info dt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 26px;
  padding: 0 14px 2px;
  background: #F08A3C;
  color: #fff;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: .02em;
}
.catday__special-info dd {
  margin: 0;
  flex: 1;
  text-align: left;
  line-height: 1.6;
  color: var(--c-black);
}

/* 既存「情報＋画像横並び」構造が残っても崩れないように無効化 */
.catday__special-body-inner {
  display: contents;
}

/* ======================================================
SP
====================================================== */
@media (max-width: 767.98px) {

  .catday__special {
    padding: 80px 0 90px;
  }

  .catday__special h2 {
    margin-bottom: 30px;
  }

  .catday__special-list {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .catday__special-card {
    padding: 30px 20px 20px;
    border-radius: 16px;
  }

  .catday__special-name {
    margin-bottom: 30px;
    padding-bottom: 20px;
  }

  .catday__special-image {
    margin: 30px 0 20px;
  }

  .catday__special-desc {
    margin: 20px 0;
  }
}


/* ==================================================================================================================================================================
トレンドタグエリア
================================================================================================================================================================== */

.catday__trend {
  position: relative;
  padding: 120px 0 140px;
  z-index: 0;
  overflow: hidden;
}

/* 背景：#D4ECF3 + 画像2枚（絶対配置） */
.catday__trend-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #D4ECF3;
}

/* 右上の装飾 */
.catday__trend-bg::before {
  content: "";
  position: absolute;
  top: 60px;
  right: -40px;
  width: 340px;
  height: 340px;
  background: url(/pages/catday/img/trend_dots.png) no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* 左下の装飾 */
.catday__trend-bg::after {
  content: "";
  position: absolute;
  left: -60px;
  bottom: 60px;
  width: 360px;
  height: 360px;
  background: url(/pages/catday/img/trend_dots.png) no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* 中身は背景より前 */
.catday__trend .catday__inner,
.catday__trend h2,
.catday__trend-body {
  position: relative;
  z-index: 1;
}

/* ======================================================
タイトル（画像）
====================================================== */
.catday__trend h2 {
  margin: 0 auto 80px;
  text-align: center;
}
.catday__trend h2 img {
  width: min(520px, 86vw);
  max-width: 520px;
  display: block;
  margin: 0 auto;
}

/* ======================================================
本体
====================================================== */
.catday__trend-body {
  position: relative;
}

/* 白パネル：黒枠・角丸 */
.catday__trend-panel {
  position: relative;
  background: #fff;
  border: 2px solid #333;
  border-radius: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 28px 40px;
  box-sizing: border-box;
}

/* ハッシュタグ：通常フローで順番配置 */
.catday__trend-hashtag {
  position: static;
  transform: none;
  margin: 50px 0 22px;
  text-align: center;
  line-height: 0;
}
.catday__trend-hashtag img {
  width: min(360px, 76vw);
  display: inline-block;
}

/* iframe */
.catday__trend-frame {
   overflow: hidden; /* iframe外へのはみ出し防止 */
}

/* 最後のiframeだけ余白なし */
.catday__trend-frame:last-of-type {
  margin-bottom: 0px;
}

.catday__trend-frame .tagframe {
width: 100%;
  display: block;
  border: 0;
  overflow-y: hidden; /* 縦だけ消す */
  overflow-x: auto;   /* 横は残す */
}

/* ======================================================
SP
====================================================== */
@media (max-width: 767.98px) {

  .catday__trend {
    padding: 90px 0 110px;
  }

  .catday__trend-bg::before {
    top: -30px;
    right: -30px;
    width: 220px;
    height: 220px;
  }
  .catday__trend-bg::after {
    left: -40px;
    bottom: -40px;
    width: 240px;
    height: 240px;
  }

  .catday__trend h2 {
    margin-bottom: 34px;
  }
  .catday__trend h2 img {
    width: min(320px, 92vw);
    max-width: 320px;
  }

  .catday__trend-panel {
    border-radius: 20px;
    padding: 30px 18px 20px;
  }

  .catday__trend-hashtag {
    margin-top: 20px;
    margin-bottom: 18px;
  }
  .catday__trend-hashtag img {
    width: min(320px, 86vw);
  }

  .catday__trend-frame {
    margin-bottom: 0px;
  }

  .catday__trend-frame .tagframe {
    height: 300px;
    min-height: 300px;
  }
}
/* ==================================================================================================================================================================
SNSエリア（添付寄せ）
================================================================================================================================================================== */

.catday__social {
  position: relative;
  padding: 120px 0 100px;
  text-align: center;
  overflow: hidden;
}

/* 背景（画像 repeat） */
.catday__social-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #ffffff; /* 画像が薄い/透過時の保険 */
  background-image: url(/pages/catday/img/sns_bg_paw.png); /* ← 背景画像に差し替え */
  background-repeat: repeat;
  background-size: auto;
}

/* 中身は背景より前 */
.catday__social .catday__inner,
.catday__social h2,
.catday__social-body {
  position: relative;
  z-index: 1;
}

/* タイトル（画像） */
.catday__social h2 {
  margin: 0 auto 56px;
}
.catday__social h2 img {
  width: min(640px, 88vw);
  max-width: 640px;
  display: block;
  margin: 0 auto;
}

/* 本体 */
.catday__social-body {
  max-width: 1100px;
  margin: 0 auto;
}

/* SNS：説明テキスト→SNS本体 間を80px */
.catday__social-lead {
  margin-bottom: 80px;
}

/* 説明テキスト内の段落の余白を整える（任意・安定化） */
.catday__social-lead p:last-child {
  margin-bottom: 0;
}

.catday__sns-em{
  display: inline-block;
  font-weight: 600;
  color: #333333;
  line-height: 1.2;
  padding: 0 .12em;
  background-image: linear-gradient(transparent 40%, #FFEE83 0);
  background-repeat: no-repeat;
  background-size: 100% 0.65em;
  background-position: 0 100%;
}



/* ======================================================
SP
====================================================== */
@media (max-width: 767.98px) {
  .catday__social {
    padding: 90px 0 20px;
  }

  .catday__social h2 {
    margin-bottom: 36px;
  }
  .catday__social h2 img {
    width: min(320px, 92vw);
    max-width: 320px;
  }

  .catday__social-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .catday__social-card span {
    left: 10px;
    bottom: 10px;
    font-size: 1.2rem;
    padding: 7px 10px;
  }

  .catday__social-widget {
    margin-bottom: 34px;
  }

    .catday__social h2 {
    margin-bottom: 40px; /* SP */
  }
  .catday__social-lead {
    margin-bottom: 40px; /* SP */
  }

}


/* ============================================================================================================
毛糸装飾（幅＆余白調整）
============================================================================================================ */

.catday__categories .catday__divider{
  line-height: 0;
  text-align: center;
}

.catday__categories .catday__divider img{
  display: block;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

/* =========================
PC（>=768px）
① 横幅1080px
③ 上毛糸：上60 / 下120
　 下毛糸：上120 / 下60
========================= */
@media (min-width: 768px) {

  .catday__categories .catday__divider img{
    max-width: 1080px; /* 横幅1080px */
  }

  /* 上の毛糸 */
  .catday__categories .catday__divider.-wave-top{
    padding-bottom: 120px;
    padding-top: 10px;
  }

  /* 下の毛糸 */
  .catday__categories .catday__divider.-wave-bottom{
    padding-top: 120px;
    padding-bottom: 10px;
  }
}

/* =========================
SP（<=767.98px）
② 左右20px余白
③ 上毛糸：上50 / 下60
　 下毛糸：上60 / 下50
========================= */
@media (max-width: 767.98px) {

  .catday__categories .catday__divider{
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* 上の毛糸 */
  .catday__categories .catday__divider.-wave-top{
    padding-bottom: 60px;
    padding-top: 10px;
  }

  /* 下の毛糸 */
  .catday__categories .catday__divider.-wave-bottom{
    padding-top: 60px;
    padding-bottom: 10px;
  }
}


/* ============================================================================================================
OPだけ：カテゴリ画像の色付き影を無効化
============================================================================================================ */

.catday--top .catday__categories-block.-category01 .catday__categories-block_image,
.catday--top .catday__categories-block.-category02 .catday__categories-block_image{
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* 影を消した結果、左上に寄って見えるのを視覚的に補正（OPだけ） */
.catday--top .catday__categories-block_image{
  transform: translate(8px, 8px);
}
@media (max-width: 767.98px){
  .catday--top .catday__categories-block_image{
    transform: translate(5px, 5px);
  }
}


/* ============================================================================================================================================
メニュー追記（完全版CSS）
============================================================================================================================================ */

.catday__menuBtn{
  position: fixed;
  top: 75px;
  right: 0;
  z-index: 10080;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  display: block !important;

  /* 初期：隠す（※ display:none は使わない） */
  opacity: 0;
  pointer-events: none;

  /* 演出なし（ふわっと禁止） */
  transition: none;
}

/* 表示（出現ポイント到達で切替） */
.catday__menuBtn.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* 画像 */
.catday__menuBtn-img{
  display: block;
  width: 160px;
  height: auto;
}

/* open/close 出し分け */
.catday__menuBtn .-close{ display: none; }
.catday__menuBtn.is-open .-open{ display: none; }
.catday__menuBtn.is-open .-close{ display: block; }

/* SP */
@media (max-width: 767.98px){
  .catday__menuBtn{ top: 70px; }
  .catday__menuBtn-img{ width: 130px; }
}

/* -----------------------
  背景オーバーレイ（クリックで閉じる用）
------------------------ */
.catday__navOverlay{
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(0,0,0,.60);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.catday__navOverlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* -----------------------
  メニュー本体（緑の面を上までベタ付き）
  ✅ 追加：メニュー内 縦スクロール（見切れてもOK）
------------------------ */
.catday#eventWrap .catday__nav{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;

  z-index: 10020 !important;
  width: min(600px, 86vw);
  height: 100vh;

  background: #D8E481;

  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;

  box-shadow: -10px 0 30px rgba(0,0,0,.12);
  padding: 0 !important;

  /* ✅ メニュー内をスクロール可能にする */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 開いた状態 */
.catday#eventWrap .catday__nav.is-open{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767.98px){
  .catday#eventWrap .catday__nav{
    width: min(420px, 90vw);
  }
}

/* 中身だけ下げる（テキストエリアの余白） */
.catday#eventWrap .catday__nav .catday__inner{
  max-width: none;
  padding: 145px 40px 40px;
  box-sizing: border-box;
}
@media (max-width: 767.98px){
  .catday#eventWrap .catday__nav .catday__inner{
    padding: 130px 20px 20px;
  }
}

/* -----------------------
  リスト（縦メニュー化）
------------------------ */
.catday#eventWrap .catday__nav-list{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.catday#eventWrap .catday__nav-item{
  width: auto !important;
  margin: 0 !important;
}

/* 区切り線（白） */
.catday#eventWrap .catday__nav-item + .catday__nav-item{
  border-top: 2px solid rgb(255, 255, 255);
}

/* 最後の項目（トレンドタグ）の下にも下線 */
.catday#eventWrap .catday__nav-item:last-child{
  border-bottom: 2px solid rgb(255, 255, 255);
}

/* 1行レイアウト */
.catday#eventWrap .catday__nav-link{
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 25px 10px;
  text-decoration: none;
  color: #333;
  opacity: 1;
}

/* hoverは「薄くする」（PCのみ） */
@media (hover:hover){
  .catday#eventWrap .catday__nav-link:hover{
    opacity: .7;
  }
}

/* ======================================================================
  メニュー内容サイズ
====================================================================== */

/* PC：アイコン 50×50 / テキスト 22px */
.catday#eventWrap .catday__nav-image{
  width: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  border-radius: 50%;
  background: #fff !important;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  background-image: none !important;
}

.catday#eventWrap .catday__nav-image img{
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  opacity: 1 !important;
}

.catday#eventWrap .catday__nav-text{
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #39352C;
}

/* 右の「>」 */
.catday#eventWrap .catday__nav-link::after{
  content: "";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #39352C;
  border-right: 2px solid #39352C;
  transform: rotate(45deg);
  opacity: .9;
}

/* SP */
@media (max-width: 767.98px){

  .catday#eventWrap .catday__nav-link{
    padding: 16px 12px 16px 4px;
    gap: 12px;
  }

  .catday#eventWrap .catday__nav-image{
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
  }

  .catday#eventWrap .catday__nav-image img{
    width: 40px;
    height: 40px;
  }

  .catday#eventWrap .catday__nav-text{
    font-size: 18px;
  }
}

/* -----------------------
  メニューが開いてる間、背面スクロール停止
------------------------ */
body.is-navOpen{
  overflow: hidden;
}

/* モーダル表示中はメニューボタンを隠す */
body.modal-active .catday__menuBtn{
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ======================================================
  SP：＞を必ず右端に揃える（最終FIX）
====================================================== */
@media (max-width: 767.98px){

  .catday#eventWrap .catday__nav .catday__nav-link{
    display: flex !important;
    width: 100% !important;
    position: relative !important;
    padding-right: 38px !important;
    box-sizing: border-box !important;
  }

  .catday#eventWrap .catday__nav .catday__nav-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .catday#eventWrap .catday__nav .catday__nav-link::after{
    content: "" !important;
    display: block !important;

    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;

    margin: 0 !important;
    width: 10px !important;
    height: 10px !important;
    border-top: 2px solid #39352C !important;
    border-right: 2px solid #39352C !important;
    opacity: .9 !important;
  }
}

/* ======================================================
  メニュー hover を分かりやすく（PCのみ）
====================================================== */
@media (hover:hover){

  .catday#eventWrap #catdayNav .catday__nav-link{
    transition: background-color .18s ease, transform .18s ease;
  }

  .catday#eventWrap #catdayNav .catday__nav-link:hover{
    opacity: 1;
    background: rgba(255,255,255,.35);
  }

  .catday#eventWrap #catdayNav .catday__nav-link:hover .catday__nav-image{
    box-shadow: 0 0 0 2px rgba(57,53,44,.22);
  }

  .catday#eventWrap #catdayNav .catday__nav-link::after{
    transition: transform .18s ease, opacity .18s ease;
  }
  .catday#eventWrap #catdayNav .catday__nav-link:hover::after{
    transform: translateX(3px) rotate(45deg);
    opacity: 1;
  }
}

/* =========================
  メニューボタン：クリック時の黒枠（フォーカスリング）を消す
========================= */
.catday__menuBtn:focus,
.catday__menuBtn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.catday__menuBtn::-moz-focus-inner{
  border: 0 !important;
}



/* ====================================================================================================
  PICKUP（横長1枚）調整：ロゴ幅PC300 / SP160 ＋ テキスト小幅化
==================================================================================================== */

.catday__items-list_item--pickup { order: -1; }

.catday__items-list_item--pickup{
  grid-column: 1 / -1;
  justify-self: center;
  width: min(900px, 100%); /* 赤枠感。必要なら 900〜1050px 調整OK */
}

/* 内側：画像左／テキスト右 */
.catday__items-list_item--pickup .catday__items-list_inner{
  display: grid;
  grid-template-columns: 434px 1fr;   /* 画像 : テキスト */
  gap: 24px;
  align-items: center;               /* 高さが出ても縦センター */
  padding: 26px 30px 24px;
  position: relative;
}

/* 画像：通常商品と同等比率（434×326相当） */
.catday__items-list_item--pickup .catday__items-list_image{
  margin: 0;
  align-self: center;
}
.catday__items-list_item--pickup .catday__items-list_image img{
  width: 100%;
  aspect-ratio: 434 / 326;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ==========================
  テキスト列を「小幅」でまとめる（ロゴ300pxに合わせる）
========================== */
.catday__items-list_item--pickup .catday__items-list_content{
  /* ★ここが重要：小幅にして中央寄せ */
  max-width: 300px;        /* ←PCはロゴ幅に合わせる */
  margin-inline: auto;     /* テキスト列を右カラム内で中央寄せ */
  text-align: center;
  position: relative;      /* ロゴ絶対配置の土台 */
  padding-top: 56px;       /* ロゴ分の逃がし（必要なら 48〜64px） */
  width: 100%;
}

/* ロゴ：ボタン幅と同じにする（テキスト列いっぱい） */
.catday__items-list_item--pickup .catday__items-pickupBadge{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
  margin: 0 auto;
}

.catday__items-list_item--pickup .catday__items-pickupBadge img{
  width: 100%;     /* ★ボタン幅と同じになる */
  height: auto;
  display: block;
}

/* もっと詳しく見る */
.catday__items-list_item--pickup .catday__items-list_more{
  margin-top: 18px;
}

/* ====================================================================================================
  SP：ロゴ160px＋テキストも160px基準でまとまる
==================================================================================================== */
@media (max-width: 767.98px){

  .catday__items-list_item--pickup{
    width: 100%;
    justify-self: stretch;
  }

  .catday__items-list_item--pickup .catday__items-list_inner{
    grid-template-columns: 50% 50%;
    gap: 10px;
    padding: 10px 14px 14px;
    align-items: start;
  }

  /* テキスト列：SPはロゴ160pxに合わせて小幅 */
  .catday__items-list_item--pickup .catday__items-list_content{
    max-width: 160px;      /* ←SPは160px */
    margin-inline: auto;
    padding-top: 38px;     /* ロゴ分。必要なら 32〜44px */
  }

  .catday__items-list_item--pickup .catday__items-pickupBadge{
    top: 6px;
  }
  .catday__items-list_item--pickup .catday__items-pickupBadge img{
    width: 160px;          /* ←SPは160px固定 */
  }

  /* 画像比率は維持 */
  .catday__items-list_item--pickup .catday__items-list_image img{
    aspect-ratio: 434 / 326;
  }
}


/* ======================================================
  SNS（Visumo widget）SP はみ出し（960px固定）対策
====================================================== */
@media (max-width: 767.98px) {

  /* ページ全体を押し広げない（SNSセクション内だけ） */
  .catday__social {
    overflow-x: hidden;
  }

  /* ウィジェットの外枠 */
  .catday__social-widget,
  .catday__social-widget .vsm-tile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden; /* 内側のはみ出しをここで受け止める */
  }

  /* Visumo（ecbn）側が吐く固定幅コンテナ群を全部 100% に丸める */
  .catday__social-widget .ecbn-selection-widget,
  .catday__social-widget .ecbn-selection-page-wrapper,
  .catday__social-widget .ecbn-selection-content,
  .catday__social-widget .ecbn-selection-snap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* 画像/動画/iframeが原因の横伸びも保険で潰す */
  .catday__social-widget img,
  .catday__social-widget video,
  .catday__social-widget iframe {
    max-width: 100% !important;
    height: auto;
  }
}
