.ftool-wrapper .col--02--Y {width: auto; max-width: 100vw; margin: 0 auto;}
.ftool-wrapper > .article {padding-bottom: 60px;}
.ftool-wrapper .ref-item .price.discount{color:#fff;}
.ftool-wrapper #pcon001 .ref-item .price.discount{color:#000;}
.ftool-wrapper .detail .col--02--Y{width: auto; max-width: 100vw;}

body{overflow-x: hidden; margin: 0; padding: 0;}
main .l-inner{padding:0!important; width:100%!important; margin:0;}
main .l-inner .l-separator{width:982px!important; margin:0 auto;}


#mgcontainer img{max-width: 100%; height: auto; line-height: 0; margin: 0; padding: 0; vertical-align: top; width: 100%;}
#mgcontainer .smp{display:block;}
#mgcontainer .smp-se{display:block;}
#mgcontainer .pc{display:none;}
@media only screen and (min-width:340px) {
#mgcontainer .smp-se{display:none;}
}
@media only screen and (min-width:768px) {
#mgcontainer .smp{display:none;}
#mgcontainer .pc{display:block;}
}

#mgcontainer{position:relative; overflow:hidden; width: 100vw; margin: 0; padding: 0; font-family:"a-otf-ryumin-pr6n", serif; font-weight: 100; font-style: normal;}

#mgcontainer .cf:before,.cf:after{content:"";display:table;}
#mgcontainer .cf:after{clear:both;}
#mgcontainer .cf{*zoom:1;}
#mgcontainer ul{
list-style: none; 
    padding-left: 0;  
    margin: 0;
}
#mgcontainer img{width:100%;}

img{width: 100%;}
#opening{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  overflow:hidden;
}

.cover{
  width:100%;
  height:100%;
  object-fit:cover;
object-position: top center; 
}

.mglogo{
  position:absolute;
  bottom:10%;
  left:50%;
  transform:translate(-50%,-50%);
  width:90vw;
  opacity:0;
  animation:logoFade 1.5s forwards;
  animation-delay:.8s;
}
.mgtitle{
  position:absolute;
  bottom:10%;
  left:50%;
  transform:translate(-50%,-50%);
  width:57vw;
  opacity:0;
  animation:logoFade 1.5s forwards;
  animation-delay:.8s;
}

@keyframes logoFade{
  to{opacity:1;}
}
.mglogo{
  animation-delay:0.5s;
}

.mgtitle{
  animation-delay:1.1s; 
}


.hide-logo .mglogo,
.hide-logo .mgtitle{
  animation:none !important; 
  opacity:0 !important;
  pointer-events:none;
}


.flash-images img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}

@media(min-width:768px){
.mglogo{
  bottom:6.7vw;
  width:60vh;
}
.mgtitle{bottom: 5.7vw;
width: 40vh;}

}

#mgcontainer{
  opacity:0;
  transition:opacity 1s;
  position: relative;
  z-index: 1;
  margin-top: 100vh;
font-family: "helvetica-neue-lt-pro", sans-serif;
font-weight: 400;
font-style: normal;
}

.gallery{width: 94%; margin: 0 auto;
  display:flex;
  gap:2vw; flex-wrap: wrap;
}
.pc{display: none;}

@media(min-width:768px){
.pc{display: inherit;}
.sp{display: none;}
}

.mgitem{width: calc(50% - 1vw);
  position:relative;  aspect-ratio: 2 / 3; 
  overflow:hidden;
}
.mgitem video{
  width:100%;
  height:100%;
  object-fit: cover; 
}
.mgitem img{
  width:100%;
  display:block;
}

.plus{
  position:absolute;
  width:10px;
  height:10px;
  border:none;
  background:none;
  cursor:pointer;
  padding:0; z-index: 1;
bottom: 10px; right: 10px;
}
.minus{
  position: absolute;
  width:25px;
  height:25px;
  bottom: 5vw;
  right: 0;
  z-index:10001;
  background:none;
  border:none;
  cursor:pointer;
}


.plus::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../img/plus.png") no-repeat center;
  background-size:contain;
}

.minus::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../img/minus.png") no-repeat center;
  background-size:contain;
}

.modal{
  margin: 10vw 5vw;
  border-radius: 4px;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); 
  display: none;
  justify-content: center;
  align-items: flex-start; padding-top: 5vw;
  z-index: 10000; overflow-y:auto;
}

.modal-inner{position: relative;
  width:90%;
  max-width:800px;
}

.modal-swiper .swiper-pagination-bullet{
  opacity: 1 !important;
  background: #fff;
}

.modal-swiper .swiper-pagination-bullet-active{
  background: #000;
  opacity: 1 !important;
}

.modal-swiper{
  --swiper-pagination-color: #000;   
  --swiper-pagination-bullet-inactive-color: #fff;
}
.modal-swiper .swiper-pagination{
  left:20px !important;
  right:auto !important;
  bottom:10px !important;
  width:auto;
  text-align:left;
}
.modal-inner{color: #fff;}
.modal-inner a{color: #fff; font-weight: 600; text-decoration: underline;}
.modal-inner ul{margin-top: 10px;}
.modal-inner ul li{list-style: none; font-size: 10px; line-height: 2;}

.rightbox{margin: 10px 0 30px 0;}
.hero-video{
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-video video{
  width:100%;
  height:100%;
  object-fit:cover;
object-position:top center; 
}

.l_logo{position: fixed; width: 17.6vw; top: 5vw; left: 5vw; z-index: 3;}
.r_logo{position: fixed; top: 5vw; right: 5vw; color: #fff; font-size: 10px; z-index: 3; width: 21.7vw;}


@media(min-width:768px){
  .hero-video video{
    object-position:center center;
  }

.l_logo,
.r_logo{opacity:0; transition:opacity .3s;}

body.show-flash-logo .l_logo,
body.show-flash-logo .r_logo{opacity:1;}

.flash-container　.l_logo img.l_logo{position: fixed; width: 4.5vw; top: 3vw; left: 4vw; z-index: 10;}
.flash-container .r_logo　img.r_logo{position: fixed; top: 3vw; right: 5vw;  z-index: 10; width: 13vw;}

.flash-container{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.flash-images{
  position: relative;
  width: 100%;
  height: 100%;
}

.flash-images img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.l_logo{position: fixed; width: 4.5vw; top: 3vw; left: 4vw; z-index: 3;}
.r_logo{position: fixed; top: 3vw; right: 5vw;  z-index: 5; width: 13vw;}
.r_logo{position: fixed; top: 3vw; right: 5vw;  z-index: 5; width: 13vw;}

.flash-images img{
  position:absolute;
  inset:0;
  z-index:1;
}

  .modal{
    width:75.5vw;
    margin:3vw auto;
    padding-top:0; 
    align-items:center; 
  }

  .modal-inner{
    display:flex;
    width:90%;
    justify-content:center; 
    align-items:flex-start;
    gap:0;   position:relative;
  }
  .modal-inner .swiper{
    width:50%;
    align-self:center;
  }
  .modal-inner .rightbox{
    width:45%;
    margin:0;
    align-self:flex-start;
  }
.minus{width: 30px; height: 30px; bottom: 0;}
.plus{width: 20px; height: 20px;bottom: 20px; right: 20px;}

}

.mgitem video{
  width:100%;
  display:block;
  object-fit:cover;
}

.staffarea{margin-top: 5vw; text-align: center; color: #fff;   z-index: 1; position: relative;}
.staffarea .s_title{font-size: 18px; font-weight: 600; margin-bottom: 25px;}
.staffarea p{margin-bottom: 10px; font-size: 10px;}
.staffarea p span{font-weight: 600;}

#gradation{
  position: relative;
  padding: 20vw 8vw 8vw 8vw;
  color:#fff;
  overflow:hidden;
 isolation: isolate;
}
#gradation::before{z-index:0; 
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.3) 40%,
    rgba(0,0,0,0.2) 70%,
    rgba(0,0,0,0) 100%
  );
  pointer-events:none;
}
.last_img{width: 64.5vw; margin: 0 auto; margin-top: 112px; margin-bottom: 62px; z-index: 1; position: relative;}

.f_logo{width: 122px; margin: 0 auto 40px auto;}
.mgfooter{position: relative; z-index: 1; color: #fff; text-align: center;}
.mgfooter ul{line-height: 2; margin-top: 40px; margin-bottom: 80px; font-size: 12px;}
.mgfooter a{color: #fff; text-decoration: none;}
.copyright{color: #fff; font-size: 10px; margin-top: 86px;}

.fadeInTrigger,.fadeIn2Trigger{opacity: 0;}
.fadeIn{animation-name:fadeInAnime; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
.fadeUp{animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
.fadeIn2{animation-name:fadeInAnime2; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
.fadeIn4{animation-name:fadeInAnime4; animation-duration:5.5s; animation-fill-mode:forwards;}
.fadeIn3{animation-name:fadeInAnime3; animation-duration:3s; animation-fill-mode:forwards;}
.fadeIn32{animation-name:fadeInAnime3; animation-duration:5s; animation-fill-mode:forwards;}
.fadeIn33{animation-name:fadeInAnime3; animation-duration:6.5s; animation-fill-mode:forwards;}
@keyframes fadeInAnime{
from {opacity: 0; transform: translateY(0);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInAnime2{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInAnime4{
from {transform: translateY(30px);}
to {transform: translateY(0);}
}
@keyframes fadeInAnime3{
from {transform: scale(1.1);}
to {transform: scale(1);}
}


@media(min-width:768px){
.mgfooter ul{display: flex; justify-content: center; gap: 15px;}
.last_img{width: 36.2vw; margin-top: 120px; margin-bottom: 122px; z-index: 1; position: relative;}

}