@charset "UTF-8";
/**************************************
							共 通 項 目
**************************************/
.sticky-wrapper { position: relative; }
.sticky-wrapper .tree { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; text-align: center; z-index: -1; background-color: #000; }
.sticky-wrapper .tree img { height: 100%; width: auto; }

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

/**************************************
						コ ン テ ン ツ
**************************************/
.header { width: 100%; height: 80px; position: sticky; top: 0; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px); z-index: +1; }

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

#model01, #model02 { margin-top: -80px; padding-top: 80px; }

.model { position: relative; width: 100%; text-align: right; margin-top: 10%; margin-bottom: 10%; }
.model img { width: 90%; height: auto; }
.model .typo { width: 25%; aspect-ratio: 1 / 1; height: auto; background-color: #ED1E79; position: absolute; top: -10%; left: 0%; }
.model .typo h2 { font-size: 4vw; line-height: 2.4; }
@media (min-width: 1200px) { .model .typo h2 { font-size: 5rem !important; } }
.model .typo h2 span { font-size: 3em; line-height: 0; }
.model::after { content: url(../img/ibanez.svg); width: 100%; height: auto; position: absolute; bottom: 0; left: 0; 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: #ED1E79; text-align: center; border: solid 2px #ED1E79; 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; }