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

.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 24s linear infinite; }

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

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

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

@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, 0, 0, 0.9); backdrop-filter: blur(5px); z-index: +2; }

.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: #222 transparent; scrollbar-width: thin; }
.lineup::-webkit-scrollbar { width: 7px; background-color: transparent; }
.lineup::-webkit-scrollbar-thumb { background-color: #222; border-radius: 7px; }
.lineup li { width: 80%; position: relative; flex-shrink: 0; }
.lineup li img { filter: saturate(0); transition: .2s; width: 100%; height: auto; }
.lineup li:hover img { filter: saturate(1); }
.lineup li .typo { position: absolute; left: 0; bottom: 5%; background-color: rgba(0, 0, 0, 0.75); width: 100%; height: auto; text-align: right; font-size: 1rem; font-size: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 0.7273)), 1.4rem); color: #FEFEFE; padding-top: 1.25em; padding-bottom: 0.25em; padding-right: 2.5%; }
.lineup li .typo h3 { 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: initial; border-bottom: dashed 1px #666; }
.spec ul li:nth-child(odd) { width: 30%; color: #999; }
.spec ul li:nth-child(even) { width: 70%; }

.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; }

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

/**************************************
							店 舗 情 報
**************************************/
.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; }