/* fixed position header */
    /* *{outline: 1px solid #f00;} */
    html,
    body {
    position: relative;
    height: 100%;
    }

    body {
    background: #000;
    margin: 0;
    padding: 0;
    }
    #base_header{
        position: fixed; 
    }
    #base_header .nav_link:hover {
        color: var(--sg-pink) !important;
    }
    .py-4-5{
        padding: 4.5rem 0 !important;
    }

    /* ─── Hero ─────────────────────────────────────────────── */
    .hero {
      position: relative;
    }
    .base_main .base{
        float: none;
    }
    .title-tag{
        width: 35%;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 5%;
        height: fit-content;
    }
    img,
    .hero img{ 
        width: 100%;
    }
    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      display: flex;
      align-items: center;
        aspect-ratio:4 / 5; 
        min-height: fit-content;
        position: relative;
    }
    /* .mascot_characters_swiper  .swiper-slide {
        max-width: 480px;

    } */
    .light-blue-bg{
      background-color: #F3F6F8;
    }
    .light-nude-bg{
      background-color: #F5F1EC;
    }
    .light-green-bg{
      background-color: #F3F8C9;
    }
    .light-brown-bg{
        background-color: #F3DFCD;
    }
    .light-pink-bg{
        background-color:#FEF4F6;
    }
    .swiper-slide .slide_name small{
        font-size: 20px;
        display: block;
    }
    .mascot_characters_swiper .swiper-slide .slide_img_wrapper{
        width: 70%;
        height: AUTO;
        position: absolute;
        transition: 1S;
        bottom: 0;
        margin: auto;
    }
    .mascot_characters_swiper .swiper-slide:hover .slide_img_wrapper {
        width: 50%;
    }
   .mascot_characters_swiper .swiper-slide:hover  .slide_img_wrapper ~ .text_wrapper{
        opacity: 1;
    }
    .mascot_characters_swiper .swiper-slide .text_wrapper{
        text-align: left;
        opacity: 0;
        transition: 0.5s;
    }
    .mascot_characters_swiper .swiper-slide{
       padding: 3%;
    }
    .gif{
        width: 50%;
        
    }
    .swiper-slide img {
      display: block;
      width: 100%;
      margin: auto;
      object-fit: cover;
    }
    .sagami_comic{
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("../img/bg-restaurant.png");
        background-size: cover;
        background-position: center center;
        background-blend-mode: darken;
    }
    #comicPopupTitle{
        display: none;
    }
    .sagami-product{
        background-color: #F0F1F3;
    }
   .title{
    line-height: 1.25;
   }
   .take-me-tag{
    top: 1rem;
    left: 0;
    max-width: 200px;
   }

@keyframes scroll {
  0%{
    opacity: 1;
    transform: translateY(0px);
    }
    100%{opacity: 0.0;
        transform: translateY(10px);
    }
}
/* comic popup box */

.comic-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.comic-popup__bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}
.comic-light-box-img{
height: 75vh;
width: initial !important;
margin-top: 6% !important;
}
.comic-popup__content {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comic-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  font-size: 24px;
  cursor: pointer;
}

.comic-popup__title {
  margin-top: 40px; /* space for close */
  color: #fff;
  font-weight: 700;
  text-align: center;
}
/* Apply to the element you want to shake */
.shake-on-hover:hover {
  animation: hoverShake 0.35s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hoverShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-2px, 1px) rotate(-1deg); }
  40%  { transform: translate(2px, -1px) rotate(1deg); }
  60%  { transform: translate(-1px, 2px) rotate(-1deg); }
  80%  { transform: translate(1px, -2px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.limit-tag h4{
    width: fit-content;
    padding: 1% 20%;
    color: #F0F1F3;
    line-height: 2;
    background-color: #E31937;
    border-radius: 50px;
    margin-bottom: 3%;
}
.new-arrival{
    color: #E31937;
}
.brandnew-title{
    color: #E31937;
    position: relative;
    width: fit-content;
    margin: auto;
}
.brandnew-title::before,
.brandnew-title::after{
    content: '';
    display: block;
    position: absolute;
    top: 45%;
    width: 60%;
    height: 5px;
    border-radius: 5px;
    background-color: #E31937;
}
.brandnew-title::before{
    left: 115%;
}
.brandnew-title::after{
    left: -75%;
}
#comic_swiper .swiper-pagination-bullet,
#comicPopupSwiper .swiper-pagination-clickable .swiper-pagination-bullet{
    background-color: #e9e9e9 ;
    opacity: 1 !important;
}
#comic_swiper .swiper-pagination-bullet-active{
       background-color: #E31937 ;
}
#comicPopupSwiper  .swiper-pagination-bullet-active{
       background-color: #E31937 ;
}
/* popup box */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.1);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.lightbox.is-open{ display: flex; }

.lightbox__dialog{
  width: min(720px, 100%);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.lightbox__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #E31937;
  color:#e9e9e9;
  border-bottom: 1px solid #e9e9e9;
}

.lightbox__close{
  border: 0;
  background: transparent;
  color: #e9e9e9;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__content{
  padding: 16px;
}


footer .base_scial{
    display: flex;
    justify-content: start;
}
footer .flex-fill {
    text-align: end;
}
@media screen and (max-width: 1400px) {
    h2{
        font-size: 36px;
    }


}
@media screen and (max-width: 1200px) {
	.break{
        display: none;
    }	
    .brand-new-tag {
        width: 35%;
    }
    .take-me-tag{
        top: 3.5rem;
        max-width: 160px;
    }
     .mascot_characters_swiper .swiper-slide:hover .slide_img_wrapper {
        width: 50%;
    }
    .mascot_characters_swiper .swiper-slide{
       padding: 6%;
    }
}
@media screen and (min-width: 992px) {
	
}
@media screen and (max-width: 959px) {
    footer .flex-fill {
        text-align: center;
    }
    footer .base_scial{
        justify-content: center;
    }
    .take-me-tag{
        /* top: 8rem; */
    }
}
@media (max-width: 767px) and (orientation: portrait) {
  /* Targets small devices in portrait */
  .comic-light-box-img{
    height: auto;
    width: 100% !important;
    margin-top: 25% !important;
    }
}
@media (max-width: 767px) and (orientation: landscape) {
  /* Targets small devices in landscape */
}
@media screen and (max-width: 767px) {
    .base_header .base,
    .base_header{
        height: 50px;
    }
    .title-tag{
        width: 75%;
        top: inherit;
        bottom: 25%;
        margin: auto;
        left: 0;
        right: 0;
        height: fit-content;
    }
    .pt-5 {
        padding-top: 3.5rem !important;
    }

    .mascot_characters_swiper .swiper-slide .slide_img_wrapper {
        width: 50%;
        left:auto;
        right: 5;

    }
    .mascot_characters_swiper .swiper-slide .text_wrapper{
        opacity: 1;
    }
    .mascot_characters_swiper .swiper-slide{
       padding: 10%;
    }
    .brand-new-tag {
       width: 50%;
    }
    .take-me-tag{
        top: 0;
        max-width: 150px;
        /* left: ; */
    }
    .flex-fill-text{
       margin-top: 5%;
       text-align: center;
    }
    .limit-tag{
        display: flex;
        justify-content: center;
    }
    .flex-fill-text h3{
        text-align: center;
    }
}