@charset "UTF-8";

/* トップへ戻る */
.main .totop_wrap{
  display: flex; justify-content: flex-end; margin: 0 4% 0 0;
}
.main .totop{
  display: flex; align-items: center; gap: 0 0.3em;
  color: #C4007F; cursor: pointer;
  border-style: solid; border-color: #C4007F; border-width: 0 0 1px;
}
.main .totop::before{
  content: ""; width: 1em; height: 0.75em; background-color: #C4007F;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.bg01{background-color: #fdeed8;}
.bg02{background-color: #f1f1f1;}

.head01,.head02{position: relative;}
.head01 .before01{position: absolute; top: 8%; right: 5%;}
.head01 .during01{position: absolute; top: 7%; right: 5%;}
.head01 .soon01{position: absolute; top: 4%; right: 5%;}
.head01 .few{position: absolute; top: 7%; right: 5%;}
.head01 .none01{position: absolute; top: 7%; right: 5%;}
.head01 .none02{position: absolute; top: 49%; left: 5%;}

.head02 .before02{position: absolute; top: 20%; left: 10%;}
.head02 .during02{position: absolute; top: 13%; left: 10%;}
.head02 .soon02{position: absolute; top: 13%; left: 10%;}
.wpoint{position: relative;}
.wpoint-triger{position: absolute;top: -10%;}

/* 画像サイズ */
img{display: block;}
img.head01{width: min(calc(768/768*100%),768px);}
img.before01{width: min(calc(216/768*100%),216px);}
img.during01{width: min(calc(263/768*100%),263px);}
img.soon01{width: min(calc(202/768*100%),202px);}
img.few{width: min(calc(303/768*100%),303px);}
img.none01{width: min(calc(269/768*100%),269px);}
.none02{width: min(calc(315/768*100%),315px);}
.none02 img{width: 100%;}
img.after01{width: min(calc(625/768*100%),625px); margin: 0 auto;}
img.item01{width: min(calc(690/768*100%),690px); margin: 0 auto;}

img.head02{width: min(calc(690/768*100%),690px); margin: 0 auto;}
img.before02{width: min(calc(224/768*100%),224px);}
img.during02{width: min(calc(224/768*100%),224px);}
img.after02{width: min(calc(620/768*100%),620px); margin: 0 auto;}
img.item02{width: min(calc(680/768*100%),680px); margin: 0 auto;}

/* 表示切替--------------------------------------------------------------------- */
/* 開催前に表示 */
.main .before_elm{
  display: none;
}
.main:has(.is_before[href*="newyear2512"]) .before_elm{
  display: block;
}

/* 開催中に表示 */
.main .during_elm{
  display: none;
}
.main:has(.is_during[href*="newyear2512"]) .during_elm{
  display: block;
}

/* 在庫なしの時に表示 */
.main .none_elm{
  display: none;
}
.main:has(.is_none[href*="newyear2512"]) .none_elm{
  display: block;
}

/* 在庫なしでない時に表示 */
.main .none_not_elm{

}
.main:has(.is_none[href*="newyear2512"]) .none_not_elm{
  display: none;
}

/* 在庫はあって、わずかの時に表示 */
.main .few_elm{
  display: none;
}
.main:has(.is_few[href*="newyear2512"]) .few_elm{
  display: block;
}

/* 在庫はあって、わずかでない時に表示 */
.main .many_elm{
  display: none;
}
.main:has(.is_many[href*="newyear2512"]) .many_elm{
  display: block;
}

/* 開催後に表示 */
.main .after_elm{
  display: none;
}
.main:has(.is_after[href*="newyear2512"]) .after_elm{
  display: block;
}

/* 開催後でない時に表示 */
.main .after_not_elm{

}
.main:has(.is_after[href*="newyear2512"]) .after_not_elm{
  display: none;
}