@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body{line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block; }
ul{list-style:none;}
blockquote, q{quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none; }
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
img{vertical-align:top; font-size:0; line-height:0; }
ins{background-color:#ff9; color:#000; text-decoration:none; }
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del{text-decoration:line-through; }
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help; }
table{border-collapse:collapse; border-spacing:0; }
em{font-style:normal; }
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select{vertical-align:middle;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{display:block;}
*,:before,:after{box-sizing:border-box;-webkit-text-size-adjust:100%;}

.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

html{font-size:62.5%;}
body{cursor: url("../img/cursor.png"), default;}
body{font-size:15px; font-size:1.5rem; font-family: "neue-haas-grotesk-text",system-ui,sans-serif;
font-weight: 600; font-style: normal; letter-spacing:0; line-height:1.6; text-align:center; -webkit-text-size-adjust:100%; color:#000; max-height: 100%; box-sizing:content-box; margin:0;}
img {width:100%; max-width:100%; height:auto;}
a{color:#000; text-decoration:none; opacity: 1; transition: 0.5s; -webkit-transition:0.5s; text-decoration:none;}
a{display:block; cursor: pointer;}

#mgcontainer{overflow-x: hidden;}
#mgcontainer img{max-width: 100%; height: auto;}
#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:740px) {
#mgcontainer .smp{display:none;}
#mgcontainer .pc{display:block;}
}

#mgcontainer img{width:100%;}


.mgcredit{margin:10px 0 0 0; padding: 0; font-family: "neue-haas-grotesk-text", sans-serif; text-align: left; font-weight: 400; font-style: normal; font-size:1.2rem; line-height: 1.3; }
.buy-wrap{font-weight: 600;}
.buy-text{text-decoration: underline;}
.buy-wrap{margin-left: -5px; line-height: 2;}

   html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    .logo-overlay {
      position: fixed;
      z-index: 2000;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: opacity 1s ease;
    }
    .logo-overlay.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    .logo-overlay #mainlogo {
width:30vh;   max-width: 180px; }

    .page-wrapper {
      opacity: 0;
      transition: opacity 1s ease;
    }
    .page-wrapper.visible {
      opacity: 1;
    }

    .fixed-header {
      position: fixed; justify-content: space-between;
      top: 0; left: 0; padding: 3vh;
      width: 100%; height: 60px;
      background: none; display: flex;
      color: #000;
      z-index: 1000;
    }
    .fixed-header .mglogo{width: 165px;}
    .fixed-header ul{display: flex; font-size: 12px; gap: 10px; margin-right: 0; potision:relative; z-index:9999; height:20px; align-items: center;}
    .fixed-header ul li a{display:block; padding:4px; cursor: pointer;}
    .fixed-footer {
      position: fixed; padding: 5vh 3vh;
      bottom: 0; left: 0;
      width: 100%; height: 40px;
      z-index: 1000; display: flex;
    }
    .fixed-footer .insta{width: 20px;}
    .fixed-footer ul{margin-left: 10px;}

@media only screen and (min-width:740px) {
    .fixed-header {
      top: 0; left: 0; padding: 6vh;
      width: 100%; height: 110px;
    }
    .fixed-header .mglogo{width: 311px;}
    .fixed-header ul{display: flex; font-size: 14px; gap: 70px; margin-right: 0;}
}

.scroll-container {pointer-events: none;}
.scroll-container a {pointer-events: auto;}
.scroll-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: max-content;
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 0;
}

.fade-image {
  width: 100%;
  max-width: 600px;
  opacity: 0;
  transition: opacity 1s ease;
  margin-top: 0;
}
    .itemlist {
      opacity: 1;
    }

    .itemmain {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .itemmain .fade-image {
      height: 100vh;
      width: auto;
      max-width: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease;
    }



.fade-image.visible {
  opacity: 1;
}

#mgfv{width: 70vh; padding: 5vh 0 0 10vh;}
#mgtitle{width: 60vh; padding: 25vh 0 0 15vh;}

@media only screen and (min-width:740px) {
#mgfv{width: 70vh; padding: 10vh 0 0 20vh;}
#mgtitle{width: 65vh; padding: 25vh 0 0 10vh;}
}

#mgabout{font-size: 12px; padding: 54vh 0 0 15vh; text-align: left; line-height: 2.5;     font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 200;
white-space: nowrap; 
}
.mgsec004, .mgsec006{margin-left: 14vh;}
.mgsec009{margin-left: 14vh;}
.mgsec011{margin-left: 21vh;}
.mgsec014{width: 600px; text-align: center;}
.itemmain{margin: 0; padding: 0; margin-top: -60px; width: 100vh;}
.flexbox{display: flex; align-items:flex-sart;}


.flexbox .itembox{margin-top: 18vh; }
.flexbox ul.thums{display: flex; align-items: center; margin-bottom: 0; gap: 2vh;}
.flexbox ul.thums li{width: 50vh;}

.mgsec007 .smlsize{width: 32vh;}
.mgsec008 .bigsize{margin-left: 2vh; margin-top: 8vh; width: 50vh}
.mgsec012{width: 32vh; margin-left: 10vh;}
.mgsec013{width: 100vh; text-align: left; margin-left: 21vh;}
.mgsec013.flexbox{display: flex; align-items:center; gap: 50px; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 200;
white-space: nowrap;  font-style: normal;  line-height: 2.5;}
.mgsec013.flexbox .lattxt .l_title{font-size: 20px; margin-bottom: 10px;}
.mgsec013.flexbox .lattxt .l_title span{font-size: 12px;}
.mgsec013.flexbox .lattxt p{font-size: 12px; white-space: normal;}
.mgsec014 p{font-size: 10px; font-family: "Noto Serif JP", serif; font-weight: 200; white-space: nowrap; font-style: normal; margin-top: 35vh;}
.back-to-top {font-family: "neue-haas-grotesk-text",system-ui,sans-serif;
font-weight: 600; font-style: normal;
      position: static; text-decoration: underline; font-weight: 600;
      margin-top: 40vh; background: none;
      padding: 10px 20px;
      font-size: 20px;
      border: none;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }
    .scroll-indicator {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 25%;
      height: 3px;
      background: #d5d5d5;
      border-radius: 3px;
      overflow: hidden;
      z-index: 3000;
    }
    .scroll-indicator-bar {
      width: 0%;
      height: 100%;
      background: #000;
      border-radius: 3px;
      transition: width 0.2s ease-out;
    }
.scroll-container {
  will-change: transform;
}



@media only screen and (min-width:740px) {
.mgsec014{margin:0 0 0 21vh; width: 300px;}
}



.fadeInTrigger,.fadeIn2Trigger,.fadeInTriggerb,.fadeIn3Trigger,.fvimage,.fadeInTrigger4{opacity: 0;}
.fadeUp{animation-name:fadeInAnime2; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
.fadeIn{animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
.fadeInb{animation-name:fadeInAnime; animation-duration:3s; animation-fill-mode:forwards; opacity:0;}
.fadeIn2{animation-name:fadeInAnime2; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
.fadeIn3{animation-name:fadeInAnime3; animation-duration:2.5s; animation-fill-mode:forwards; opacity:0;}
@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 fadeInAnime3{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes bgslide{
from {transform: translateX(-100%);}
to {transform: translateX(0);}
}