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

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

/**************************************
								タ ブ
**************************************/
.tabs { width: 100%; /*選択されているタブのコンテンツのみを表示*/ }
.tabs .tab_item { width: calc(100% / 2); text-align: center; transition: all 0.2s ease; border-bottom: solid 2px #333; line-height: 3; }
.tabs .tab_item:hover { opacity: 0.75; cursor: pointer; }
.tabs input[name="tab_item"] { display: none; }
.tabs .tab_content { display: none; }
.tabs #detail:checked ~ #detail_content, .tabs #color:checked ~ #color_content { display: block; }
.tabs input:checked + .tab_item { background-color: #333; }

.slide { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; box-sizing: border-box; }
.slide .slide-item, .slide .slide-item2 { width: 85%; flex-shrink: 0; scroll-snap-align: start; box-sizing: border-box; }
.slide h3 { font-weight: 700; font-size: 1.2em; }
.slide .slide-item2 h3 { text-align: center; }
.slide p { color: #DDD; width: 100%; word-break: break-all; }
@media (min-width: 768px) { .slide { flex-wrap: wrap; overflow: hidden; }
  .slide .slide-item { width: calc((100% / 3) - 2rem); flex-shrink: auto; }
  .slide .slide-item2 { width: calc((100% / 4) - 2.25rem); } }

/**************************************
						コ ン テ ン ツ
**************************************/
.model { position: relative; width: 100%; }
.model img { width: 100%; height: auto; }
.model .logo { width: 40%; max-width: 250px; margin: auto; transform: translateY(50%); }
.model .typo { transform: translateY(-50%); }

.intro { font-size: 1.4em; }

.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: #2380D6; text-align: center; border: solid 2px #2380D6; 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: #000; 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; }