*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

@font-face {
  font-family: 'NewYork';
  font-style: normal;
  font-weight: normal;
  src: local('NewYork'), url('../font/NewYork.woff') format('woff');
}

body,a,p,h1,h2,h3,h4{
  font-family: meno-banner, serif;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.8;
}
body{
  position: relative;
  -webkit-overflow-scrolling: touch;
}
ul{
  padding: 0;
}
li{
  list-style: none;
}
img{
  width: 100%;
}

.pc{
  display: block;
}
.sp{
  display: none;
}

/* アニメーション */
/* header */
.zoom01{
  opacity: 0;
}
.zoom01{
  will-change: animation;
  animation-name: zoom01;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes zoom01{
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.slidein{
  animation: slidein;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slidein{
  0%{
    opacity: 0;
    transform: translateX(20px);
  }
  40%{
    opacity: 0;
    transform: translateX(20px);
  }
  60%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

.text-block{
  opacity: 0;
  height: 100%;
}
.text-block.active{
  will-change: transform, opacity;
  animation: text-block;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transform-origin: left;

}
@keyframes text-block{
  0%{
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
  40%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
.slideright{
  opacity: 0;
}
.slideright.active{
  will-change: transform, opacity;
  animation: slideright;
  animation-duration: 2.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slideright{
  0%{
    opacity: 0;
    transform: translate3d(20px, 0 ,0);
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
.slideleft{
  opacity: 0;
}
.slideleft.active{
  will-change: transform, opacity;
  animation: slideleft;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slideleft{
  0%{
    opacity: 0;
    transform: translate3d(-20px, 0 ,0);
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
.fade{
  display: none;
}
.fade.active{
  animation: fade;
  animation-duration: 0.6s;
  animation-timing-function: ease-in;
  animation-delay: 0.9s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade{
  0%{
    visibility: hidden;
  }

  100%{
    display: block;
  }
}

.flex-box{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

header{
  position: relative;
  margin-bottom: 6%;
}
header .mv-model{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
header .logo{
  position: absolute;
  top: 4.25%;
  right: 2.5%;
  width: 10.76%;
}
header .text01{
  position: absolute;
  top: 29.8%;
  right: 8.83%;
  width: 27.7%;
  animation-duration: 1.4s;
  animation-delay: 4.7s;
}
header .text02{
  position: absolute;
  bottom: 9.8%;
  right: 10.1%;
  width: 21.08%;
  animation-duration: 0.8s;
  animation-delay: 4.9s;
}
header .title{
  position: absolute;
  mix-blend-mode: multiply;
}
header .title01{
  top: 23.4%;
  left: 6%;
  width: 9.6%;
  animation-delay: 0.3s;
}
header .title02{
  top: 23.2%;
  left: 16.6%;
  width: 8.1%;
  animation-delay: 0.7s;
}
header .title03{
  top: 30%;
  left: 25.4%;
  width: 8%;
  animation-delay: 1.1s;
}
header .title04{
  top: 47.4%;
  right: 36%;
  width: 11.8%;
  animation-delay: 1.2s;
}
header .title05{
  top: 54%;
  right: 26%;
  width: 9%;
  animation-delay: 1.4s;
}
header .title06{
  top: 54%;
  right: 17.5%;
  width: 8%;
  animation-delay: 1.6s;
}
header .title07{
  top: 50%;
  right: 10.5%;
  width: 6.4%;
  animation-delay: 1.8s;
}
header .title08{
  top: 54%;
  right: 3.75%;
  width: 6.6%;
  animation-delay: 2s;
}
header .title-black{
  position: absolute;
  z-index: 3;
}
header .title-b-01{
  bottom: 15%;
  left: 42.66%;
  width: 4%;
  animation-delay: 2.8s;
}
header .title-b-02{
  bottom: 15%;
  left: 47%;
  width: 2.7%;
  animation-delay: 2.9s;
}
header .title-b-03{
  bottom: 15%;
  left: 51.8%;
  width: 2.98%;
  animation-delay: 3s;
}
header .title-b-04{
  bottom: 15%;
  left: 55%;
  width: 3.8%;
  animation-delay: 3.1s;
}
header .title-b-05{
  bottom: 15%;
  left: 59.3%;
  width: 3.8%;
  animation-delay: 3.2s;
}
header .title-b-06{
  bottom: 15%;
  left: 65.6%;
  width: 3%;
  animation-delay: 3.3s;
}
header .title-b-07{
  bottom: 15%;
  left: 69.2%;
  width: 3.8%;
  animation-delay: 3.4s;
}
header .title-b-08{
  bottom: 15%;
  left: 73.6%;
  width: 3.6%;
  animation-delay: 3.5s;
}
header .title-b-09{
  bottom: 15%;
  left: 77.7%;
  width: 2.95%;
  animation-delay: 3.6s;
}
header .title-b-10{
  bottom: 15%;
  left: 81.3%;
  width: 4%;
  animation-delay: 3.7s;
}
header .title-b-11{
  bottom: 15%;
  left: 86%;
  width: 3.8%;
  animation-delay: 3.8s;
}
header .title-b-12{
  bottom: 14.8%;
  left: 91%;
  width: 0.97%;
  animation-delay: 4.1s;
}
.sec{
  position: relative;
  width: 84%;
  margin: auto;
  margin-bottom: 5%;
}
.item-area{
  position: relative;
  width: 90%;
}
.sec .item-area:nth-child(odd){
  margin-right: 1.5%;
}
.sec .item-area:nth-child(even){
  margin-left: 1.5%;
}
.item-area input{
  display: none;
}
.item-area .text-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(35,24,21,0.8);
}
.item-area .box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.item-area .title{
  margin-top: 40%;
  margin-bottom: 9%;
  color: #bd85d6;
  font-size: clamp(16px, 1.9vw, 46px);
  letter-spacing: 0.1rem;
  line-height: 1.4;
  font-family: NewYork;
}
.item-area .item{
  display: block;
  margin-bottom: 0.5%;
  color: #bd85d6;
  font-size: clamp(10px, 0.9vw, 16px);
  letter-spacing: 0.1rem;
  line-height: 1.4;
}
.item-area .price{
  display: inline-block;
  margin-bottom: 4%;
  color: #bd85d6;
  font-size: clamp(14px, 1.3vw, 28px);
  font-family: Hiragino Mincho Pro, sans-serif;
  line-height: 1.4;
  letter-spacing: 0.1rem;
}
.item-area a .price{
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
}
.item-area a:hover .price{
  border-bottom: 1px solid #bd85d6;
  box-sizing: border-box;
}
.item-area .credit-btn{
  position: absolute;
  bottom: 2%;
  left: 3%;
  width: 1.7%;
  z-index: 3;
  cursor: pointer;
}

/* アコーディオン */
.accordion-content{
  display: none;
}
.js-accordion-title .btn-on{
  display: none;
}
.js-accordion-title .btn-off{
  display: block;
}
.js-accordion-title.open .btn-on{
  display: block;
}
.js-accordion-title.open .btn-off{
  display: none;
}

.text-block{
  display: inline-block;
  overflow: hidden;
}
#item02 .text-block{
  position: absolute;
  top: 0.7%;
  left: 5%;
  width: 114%;
  mix-blend-mode: multiply;
}
#item05 .text-block{
  position: absolute;
  top: 0.8%;
  right: 0;
  width: 119%;
  mix-blend-mode: multiply;
}
#item08 .text-block{
  position: absolute;
  top: 0.7%;
  left: -13%;
  width: 122%;
  mix-blend-mode: multiply;
}
#item08 .text02{
  position: absolute;
  bottom: 18%;
  right: -7.5%;
  mix-blend-mode: multiply;
  width: 52%;
  z-index: 3;
}
#item11 .text-block{
  position: absolute;
  top: 1.4%;
  left: -9.2%;
  width: 113.4%;
  mix-blend-mode: multiply;
}
#item11 .text02{
  position: absolute;
  bottom: 22%;
  left: -9.25%;
  mix-blend-mode: multiply;
  width: 48%;
  z-index: 3;
}
#item14 .text-block{
  position: absolute;
  top: 2.8%;
  left: 3%;
  width: 115%;
  mix-blend-mode: multiply;
}

/* all items */
.all-items{
  width: 16%;
  margin: 0 auto 6%;
  text-align: center;
}
.all-items a{
  font-family: NewYork;
  font-size: clamp(33px, 2vw, 40px);
  transition: 0.6s ease-in-out;
}
.all-items a:hover{
  opacity: 0.6;
  transition: 0.6s ease-in-out;
}
.allitems-title{
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.allitems-title span{
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.allitems-title.active span{
  transform: translate(0, 0);
  transition-delay: 1s;
}
.allitems-title span:nth-child(2) {
  transition-delay: 1.1s;
}
.allitems-title span:nth-child(3) {
  transition-delay: 1.3s;
}
.allitems-title span:nth-child(4) {
  transition-delay: 1.5s;
}
.allitems-title span:nth-child(5) {
  transition-delay: 1.7s;
}
.allitems-title span:nth-child(6) {
  transition-delay: 1.9s;
}
.allitems-title span:nth-child(7) {
  transition-delay: 2.1s;
}
.allitems-title span:nth-child(8) {
  transition-delay: 2.3s;
}
.allitems-title span:nth-child(9) {
  transition-delay: 2.5s;
}
.allitems-title span:nth-child(10) {
  transition-delay: 2.7s;
}

/* footer */
.end-block{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 3%;
}
.end-block .f-btn-box{
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 0% auto;
}
.end-block .f-btn-box li{
  width: 50%;
  text-align: center;
}
.end-block .f-btn-box li:nth-child(1){
  text-align: right;
  margin-right: 7%;
}
.end-block .f-btn-box li:nth-child(2){
  text-align: left;
  margin-left: 7%;
}
.end-block .f-btn-box li div{
  display: inline-block;
}
.end-block .f-btn-box li a{
  padding: 0 0 0 0;
  border-bottom: 1px solid transparent;
  line-height: 1.4;
  text-decoration: none;
  font-size: clamp(14px, 1.2vw, 32px);
  letter-spacing: 0.1rem;
  font-family: Times New Roman;
  transition: .6s ease-in-out;
}
.end-block .f-btn-box li a:hover {
  opacity: 0.6;
  border-bottom: 1px solid #170a1b;
  transition: .6s ease-in-out;
}

#pagetop{
  position: fixed;
  right: 2%;
  bottom: 50px;
  width: 35px;
  display: block;
  z-index: 99;
}

.footer {
  letter-spacing: 0.3em;
  position: relative;
  text-align: center;
  padding: 0 0 30px 0;
}
.footer_sns {
  margin: 26px 0 0;
}
.footer_snsNode {
  display: inline-block;
  margin: 0 10px;
  width: 30px;
}
.f-ow {
  width: 120px;
  margin: 25px auto 0 auto;
}
.footer_copyright {
  font-family: "Helvetica",serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  margin: 34px 0 0;
}

@media screen and (max-width:766px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .flex-box{
    flex-direction: column;
  }

  header{
    margin-bottom: 0;
  }
  header .logo{
    width: 32.5%;
    top: 3.5%;
    left: 5.5%;
    z-index: 2;
  }
  header .text01{
    top: 84.3%;
    right: auto;
    left: 23%;
    width: 54%;
    z-index: 2;
  }
  header .text02{
    bottom: 7%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 52.8%;
    z-index: 2;
  }
  header .title{
    z-index: 2;
  }
  header .title01{
    top: 23%;
    left: 1%;
    width: 14.6%;
  }
  header .title02{
    top: 23%;
    left: 17%;
    width: 12.6%;
  }
  header .title03{
    top: 26.4%;
    left: 31%;
    width: 12.2%;
    z-index: 0;
  }
  header .title04{
    top: 62.8%;
    left: 28.4%;
    width: 18.2%;
    mix-blend-mode: inherit;
  }
  header .title05{
    top: 66%;
    left: 48.4%;
    width: 14.4%;
    mix-blend-mode: inherit;
  }
  header .title06{
    top: 65.9%;
    left: 64.2%;
    width: 12.6%;
    mix-blend-mode: inherit;
  }
  header .title07{
    top: 64%;
    left: 78%;
    width: 10%;
    mix-blend-mode: inherit;
  }
  header .title08{
    top: 66%;
    left: 88.2%;
    width: 10.6%;
    mix-blend-mode: inherit;
  }
  header .title-black{
    z-index: 2;
  }
  header .title-b-01{
    bottom: 18.6%;
    left: 14.1%;
    width: 6.4%;
  }
  header .title-b-02{
    bottom: 18.6%;
    left: 21%;
    width: 4.32%;
    animation-delay: 2.9s;
  }
  header .title-b-03{
    bottom: 18.6%;
    left: 29%;
    width: 4.768%;
    animation-delay: 3s;
  }
  header .title-b-04{
    bottom: 18.6%;
    left: 34%;
    width: 6.08%;
    animation-delay: 3.1s;
  }
  header .title-b-05{
    bottom: 18.6%;
    left: 40.6%;
    width: 6.08%;
    animation-delay: 3.2s;
  }
  header .title-b-06{
    bottom: 18.6%;
    left: 50.2%;
    width: 4.8%;
    animation-delay: 3.3s;
  }
  header .title-b-07{
    bottom: 18.6%;
    left: 55.8%;
    width: 5.76%;
    animation-delay: 3.4s;
  }
  header .title-b-08{
    bottom: 18.6%;
    left: 62.2%;
    width: 5.6%;
    animation-delay: 3.5s;
  }
  header .title-b-09{
    bottom: 18.6%;
    left: 68.4%;
    width: 4.72%;
    animation-delay: 3.6s;
  }
  header .title-b-10{
    bottom: 18.6%;
    left: 73.8%;
    width: 6.4%;
    animation-delay: 3.7s;
  }
  header .title-b-11{
    bottom: 18.6%;
    left: 81.5%;
    width: 5.76%;
    animation-delay: 3.8s;
  }
  header .title-b-12{
    bottom: 18.8%;
    left: 89.2%;
    width: 1.52%;
    animation-delay: 4.2s;
  }

  .sec{
    width: 100%;
    margin: 0 auto;
  }
  .item-area{
    width: 100%;
    margin-bottom: 12%;
  }
  .sec .item-area:nth-child(odd){
    margin-right: 0;
  }
  .sec .item-area:nth-child(even){
    margin-left: 0;
  }
  .item-area .credit-btn{
    left: 4%;
    min-width: 10px;
    padding-right: 2.5px;
  }
  .item-area .title{
    font-size: 1.25rem;
    margin-top: 27%;
  }
  .item-area .item{
    margin-bottom: 0;
    font-size: 0.75rem;
  }
  .item-area .price{
    margin-bottom: 5%;
    font-size: 1rem;
  }
  #item02{
    width: 82%;
    margin-left: 0;
    margin-right: auto;
  }
  #item02 .text-block{
    top: 0.7%;
    left: 5%;
    width: 114%;
  }
  #item05{
    width: 82%;
    margin-right: 0;
    margin-left: auto;
  }
  #item05 .text-block{
    top: 0.8%;
    left: auto;
    right: 0;
    width: 119%;
  }
  #item08{
    width: 82%;
    margin: 0 auto 10%;
  }
  #item08 .text-block{
    top: 0.7%;
    left: -13%;
    width: 122%;
  }
  #item08 .text02{
    top: auto;
    bottom: 16%;
    right: -8%;
    left: auto;
    width: 57%;
  }
  #item11{
    width: 82%;
    margin: 0 auto 10%;
  }
  #item11 .text-block{
    top: 1.6%;
    left: -9%;
    width: 113%;
  }
  #item11 .text02{
    top: 67.7%;
    right: 0;
    left: -9.2%;
    width: 48%;
  }
  #item14{
    width: 82%;
    margin-left: 0;
    margin-right: auto;
  }
  #item14 .text-block{
    width: 115%;
  }

  .all-items{
    width: 60%;
    margin-bottom: 16%;
  }

  #pagetop{
    right: 0;
    bottom: -1px;
  }

  .end-block .f-btn-box{
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  .end-block .f-btn-box li{
    margin-bottom: 6%;
    text-align: center;
  }

}