@charset "UTF-8";
/**************************************
							共 通 項 目
**************************************/
body { background-color: #111; }

.sticky-wrapper { position: relative; }

.drop-shadow { filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, 0.75)); }

hr { border: none; border-bottom: dashed 1px #333; }

.sold { font-size: 2em; font-weight: 700; text-align: center; color: #FF0004; }

.trim { aspect-ratio: 3 / 2; /*overflow: hidden;*/ display: flex; align-items: center; justify-content: center; }

/*************************************
							ス ラ イ ダ ー
*************************************/
.slide { position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }

.slide-image { background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; animation: hero-slider 48s linear infinite; }

.slide-image:nth-child(1) { background-image: url("../img/hero-bg00.jpg"); animation-delay: -2s; }

.slide-image:nth-child(2) { background-image: url("../img/hero-bg01.jpg"); animation-delay: 6s; }

.slide-image:nth-child(3) { background-image: url("../img/hero-bg02.jpg"); animation-delay: 14s; }

.slide-image:nth-child(4) { background-image: url("../img/hero-bg03.jpg"); animation-delay: 22s; }

.slide-image:nth-child(5) { background-image: url("../img/hero-bg04.jpg"); animation-delay: 30s; }

.slide-image:nth-child(6) { background-image: url("../img/hero-bg05.jpg"); animation-delay: 38s; }

@keyframes hero-slider { 0% { opacity: 0; transform: scale(1); }
  4.16% { opacity: 1; }
  33.33% { opacity: 1; }
  41.66% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; } }
/**************************************
						コ ン テ ン ツ
**************************************/
.header { width: 100%; height: 80px; position: sticky; top: 0; background-color: rgba(0, 80, 255, 0.45); backdrop-filter: blur(10px); z-index: +9999; }

.logo { width: 40%; max-width: 200px; height: auto; }

.nav li { font-size: initial; position: relative; }
.nav li::after { content: ""; display: block; position: absolute; bottom: -10px; width: 100%; height: 2px; border-radius: 1px; background-color: #999; transform-origin: center center; transform: scale(0, 1); transition: transform .3s; }
.nav li:hover::after { transform: scale(1, 1); }
.nav li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }

.hero-area { position: relative; /*&::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; display: block; background-color: rgba(13,19,22,0.4); z-index: 0;}*/ }
.hero-area .container-lg { position: relative; z-index: 1; }
.hero-area p { text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75); }

.lineup { display: flex; overflow-x: auto; white-space: nowrap; scrollbar-color: #fff transparent; scrollbar-width: thin; }
.lineup::-webkit-scrollbar { width: 7px; background-color: transparent; }
.lineup::-webkit-scrollbar-thumb {  border-radius: 7px; }

.lineup li { width: 80%; position: relative; flex-shrink: 0;  background-color: #f1f1f1; }
.lineup li img { filter: saturate(0.1); transition: .2s; width: 100%; height: auto;}
.lineup li:hover img { filter: saturate(1); border-radius: 0 0 60px 0; }

.lineup li .typo { position: absolute; left: 0; bottom: 5%; width: 100%; height: auto; text-align: right; font-size: 1rem; font-size: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 0.7273)), 1.2rem); color: #FEFEFE; padding-top: 1.25em; padding-bottom: 0.25em; padding-right: 2.5%; }
.lineup li .typo h3 { position: absolute; top: -24px; right: 2.5%; transform: translateY(-50%); font-size: 2.0em; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75); }

.lineup li .typo h4 { position: absolute; top: 0; right: 2.5%; transform: translateY(-50%); font-size: 2.6em; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75); }


.lineup li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
@media (min-width: 768px) { .lineup li { width: calc(((100% - 3rem) / 3) * 0.85 ); } }

.anchor-point { margin-top: -79px; padding-top: 79px; }


.model { position: relative; width: 100%; text-align: right; margin-bottom: 8%; }
.model img { width: 100%; height: auto; }
.model .logo { max-width: 400px; margin: auto; transform: translateY(50%); }
.model .typo { transform: translateY(-35%); }
.model .typo h2 span { font-size: 1.4em; font-size: clamp(1.4em, 5vw, 4em); display: block; transform: translateY(-25%); }



/*.spec { background-color: #333; width: 100%; }*/
.spec ul li { font-size: 1.45rem; border-bottom: dashed 1px #222; letter-spacing: 0.1em;}
.spec ul li:nth-child(odd) { font-size: 1.2rem; width: 24%; color: #fff; font-weight: 200;}
.spec ul li:nth-child(even) { width: 76%; font-weight: 300;}

.cart { position: relative; width: 100%; font-weight: 700; line-height: 2; font-size: 1.4em; border-radius: 1em; background-color: #662d8f; text-align: center; border: solid 2px #662d8f; transition: .4s; }
.cart a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.cart:hover { background-color: transparent; }

.cart_btn { position: relative; width: 100%; font-weight: 700; line-height: 2; font-size: 1.4em; border-radius: 1em; color: #ff6060; background-color: #111; text-align: center; border: solid 1px #ff6060; transition: .4s; }
.cart_btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.cart_btn:hover { color:#fff; border: solid 1px #fff; }


.sold.cart_btn{
  pointer-events: none;
  color: #333; background-color: #222; text-align: center; border: solid 1px #333;
}


.gallery li { width: calc(100% / 3); }
@media (min-width: 576px) { .gallery li { width: calc(100% / 4); } }
.gallery li img { width: 100%; height: auto; }

.txt_shadow{
 filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1.0));
}


.scroll-shadow {
    transition:
        box-shadow 2.4s ease,
        transform 2.4s ease;
}

.scroll-shadow.is-active {
    transform: translateY(-24px);
    filter: drop-shadow(-6px 24px 12px rgba(0, 0, 0, 1.0));
}

/**************************************
							店 舗 情 報
**************************************/
.footer { background-color: #333; color: #FEFEFE; }

.shopinfo { text-align: center; }
.shopinfo .shopinfo-txt1 { font-size: 3.6rem; font-size: clamp(3.6rem, 4.6vw, 5rem); font-weight: 700; letter-spacing: -0.1rem; line-height: 1.0; }
.shopinfo .shopinfo-txt2 { font-size: 1.8rem; font-size: clamp(1.8rem, 2.35vw, 2.55rem); font-weight: 700; }
.shopinfo p.shopelement { margin: auto; border-top: 1px dashed #FEFEFE; font-size: 1.4rem; font-size: clamp(1.4rem, 1.6vw, 1.6rem); text-align: left; width: 80%; }
.shopinfo p.shopelement span { display: block; font-size: 1.8rem; font-size: clamp(1.8rem, 2vw, 2rem); font-weight: 700; letter-spacing: -0.1rem; }
.shopinfo a { color: #FEFEFE; transition: color .3s ease-out; }
@media (min-width: 992px) { .shopinfo { text-align: left; }
  .shopinfo p.shopelement { width: 100%; } }

.shopelement a { color: #FEFEFE; transition: color .3s ease-out; }

.shopinfo a:hover, .shopelement a:hover { color: #88CD00; }

.mapimg { text-align: center; }
.mapimg img { width: 90%; height: auto; }

.copyright { color: #CCC; width: 100%; font-size: 1.2rem; text-align: center; }


/**/


/*inputを非表示 & 閉じた時の位置調整*/
.open-box{position: relative;}
input[type="checkbox"].on-off{
  position: absolute;
  bottom: 0;
  display: block;
  opacity: 0;
}

/*ラベル（「開く」ボタン）*/
.open-label{
  /*margin: 0 1.5em;*/
  padding: 0.5em 1.5em;
  display: inline-block;
  color: #f1f1f1;
  font-weight: bold;
  text-align: center;
  border-radius: 9999px;
  border: 1px solid #f1f1f1;
  background: rgba(0,0,0,1.);
  position: relative;

  transition: .3s;
}
/*ボタンっぽい効果*/
.open-label:active{
  box-shadow: 0 0 0 0;
}
.open-label:hover{
  color: #222;
  background: #f1f1f1;
}

/*ラベルに表示するテキスト*/
.open-label::after{
    content: "もっと見る";
}

.on-off:checked ~ .btn_right .open-label::after{
    content: "閉じる";
}

/*開閉エリア*/
.open{
    display: grid;
    grid-template-rows: 300px;
    overflow: hidden;
    transition: grid-template-rows .6s cubic-bezier(.22, 1, .36, 1);
    position: relative;
}

.open-inner{
    overflow: hidden;
}

.on-off:checked ~ .open{
    grid-template-rows: 2fr;
}

/*開閉エリアにぼかしを乗せる*/
.open::before{
  content:'';
  background: linear-gradient(to bottom, transparent,rgba(18,18,18,1)100%);
  position: absolute;
  top:100px;
  left:0;
  right:0;
  bottom:0;
  z-index: 3;
}

/* PC */
@media (min-width: 1024px){
  .open{
    grid-template-rows: 300px;
  }

  .open::before{
  top:100px;
  }
}

/*開いたらぼかしを消す*/
.on-off:checked ~ .open::before{
  background: none;
  z-index: -1;
}

.btn_right{
  display: flex;
  justify-content: flex-end;
}


.kasaneru6{
  position: relative;
}

.kasaneru6 img.imagup{
  position: absolute;
  bottom: 5%;
  right: -18.5%;
  transform: translate(-50%,-50%);
  color: #fff;
}

/* タブレット */
@media (min-width: 768px){
  .kasaneru6 img.imagup{
    bottom: -16%;
    left: 15%;
  }
}

/* PC */
@media (min-width: 1024px){
  .kasaneru6 img.imagup{
    bottom: -16%;
    left: 15%;
  }
}


.kasaneru6 p{
  font-size: initial;
  font-weight: normal;
  color: #fff;
  position: absolute;/*重ねたい子要素にabsolute*/
  -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/

  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}

.kasaneru6 .data{
  font-size: 98%;
  top:100.0%;
  right: -52%;
  width: 100%;
  line-height: 2.2;
  z-index: 2;
}

/* PC */
@media (min-width: 1024px){
  .kasaneru6 .data{
  bottom:-2.5%;
  right: -52%;
  width: 100%;
}
}

.kasaneru6 .data span{
  margin-left:8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 4px 16px;
}
.kasaneru6 .data span .color{
  margin:0;
  background:none;
  padding:0;
}

/* タブレット */
@media (min-width: 768px){
.kasaneru6 img.imagup{
    width: 80%;
    }
}

/* PC */
@media (min-width: 1024px){
}



.kasaneru6 img.imagup_2{
  position: absolute;
  bottom: -6%;
  left: -7%;
  z-index: 1;
}

/* タブレット */
@media (min-width: 768px){
.kasaneru6 img.imagup_2{
    width: 80%;
    }
}

/* PC */
@media (min-width: 1024px){
}



.border_1-111{
  border: solid 1px #111;
}


.qs_300 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.qs_400 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.qs_500 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.qs_600 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.qs_700 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.info{
  text-align: center;
  margin-bottom: 3rem;
}