@charset "UTF-8";
/* CSS Document */
/**************************** 			共 通
****************************/
body { background: url("../img/bg.jpg") repeat; }

.text-shadow { text-shadow: 1px 1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px -1px 1px #FFF, 2px 2px 2px #FFF, -2px 2px 2px #FFF, 2px -2px 2px #FFF, -2px -2px 2px #FFF, 3px 3px 3px #FFF, -3px 3px 3px #FFF, 3px -3px 3px #FFF, -3px -3px 3px #FFF, 4px 4px 4px #FFF, -4px 4px 4px #FFF, 4px -4px 4px #FFF, -4px -4px 4px #FFF, 5px 5px 5px #FFF, -5px 5px 5px #FFF, 5px -5px 5px #FFF, -5px -5px 5px #FFF; }

h2 { text-align: center; font-weight: 700; color: #FFF; background: url("../img/h2-bg.jpg") repeat; font-size: 1.4em; font-size: clamp(1.4em, calc(1.4rem + ((1vw - 0.234375em) * 2.4976)), 3em); line-height: 1; }
h2 span { font-size: 0.6em; }

.attention, .welcome { font-size: 1.0em; font-weight: 500; padding-left: 1.0em; text-indent: -1.0em; width: 95%; margin: auto; color: #333; }
@media (min-width: 992px) { .attention, .welcome { text-align: center; } }

.welcome { font-size: 1.4em; font-weight: 700; padding: 0; text-indent: 0; color: #FF0000; }

/***************************
					ヘ ッ ダ ー
***************************/
.header { display: flex; justify-content: space-between; align-items: center; }
.header .logo { position: relative; width: 100%; max-width: 300px; height: auto; }
.header .logo a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.header img { width: 100%; max-width: 300px; height: auto; }

.hero-area { background: url("../img/hero-bg.jpg") center/cover no-repeat; background-attachment: fixed; border-top: solid 0.5rem red; border-bottom: solid 0.5rem red; }
.hero-area .date { font-size: 3em; font-size: clamp(3em, calc(3rem + ((1vw - 0.234375em) * 7.8049)), 8em); font-weight: 700; text-align: center; color: 333; }
.hero-area .date span { font-size: 0.5em; }

/***アイテムリスト***/
.item { padding: 0.5rem; box-sizing: border-box; margin: 0; font-size: 0; }
.item .itemWrapper { height: 100%; margin: 0; padding: 0.5rem; background-color: #EEE; position: relative; box-sizing: border-box; font-size: 1.2rem; font-size: clamp(1.2rem, calc(1.2rem + ((1vw - 0.2rem) * 0.3636)), 1.4rem); }
.item .limit { position: absolute; top: -5px; right: -5px; border-radius: 50%; aspect-ratio: 1 / 1; z-index: +1; color: #FFF; background-color: red; width: 40%; max-width: 55px; display: flex; align-items: center; justify-content: center; }
.item .limit p { font-weight: 700; font-size: 1.6em; text-align: center; }
.item .limit p span { font-size: 0.6em; display: block; margin-bottom: -2.6em; }
@media (min-width: 576px) { .item .limit { max-width: 75px; }
  .item .limit p { font-size: 2em; }
  .item .limit p span { font-size: 0.6em; margin-bottom: -2.6em; } }

.imgarea { display: flex; align-items: flex-start; justify-content: center; background-color: #FEFEFE; }
.imgarea .trim { position: relative; width: 100%; background-color: #EEE; transition: .4s; /*&:hover { opacity: 0.8; }*/ }
.imgarea .trim:before { content: ""; display: block; padding-top: 100%; /* 高さを幅の**%に固定 */ }
.imgarea .trim .img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.imgarea .trim a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; display: block; text-indent: -9999px; }

.textarea { background-color: #FEFEFE; display: flex; flex-direction: column; }
.textarea p.date { color: #FEFEFE; text-align: center; font-size: 1.1em; font-weight: 500; }
.textarea p.model { font-weight: 700; line-height: 1.1; font-size: 1.6em; }
.textarea p.age { font-weight: 500; font-size: 1.1em; }
.textarea p.price { font-size: 1.1em; font-size: clamp(1.1em, calc(1.1rem + ((1vw - 0.234375em) * 0.7805)), 1.6em); font-weight: 700; color: #FF0000; margin-top: auto; word-break: break-all; line-height: 1.2; }
.textarea p.price span { font-size: 1.6em; font-size: clamp(1.6em, calc(1.6rem + ((1vw - 0.234375em) * 0.7805)), 2.1em); font-weight: 900; }
@media (min-width: 992px) { .textarea { min-height: 14.5rem; } }

.cart { background-color: #FEFEFE; }

.button { line-height: 1.8em; margin: 0; padding: 0; text-align: center; color: #FFF; font-weight: 400; background-color: #28BD68; border-radius: 0.9em; transition: .2s; position: relative; box-shadow: 1px 2px 0px #22A058; }
.button:hover { box-shadow: none; transform: translate(1px, 2px); }
.button a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; text-indent: -9999px; }
.button.sold { pointer-events: none; background-color: #000; color: #FFF000; box-shadow: none; }

.special { background: url("../img/hero-bg.jpg") center/cover no-repeat; background-attachment: fixed; }
.special img { width: 100%; }
.special .text-wrapper { width: 95%; max-width: 1000px; margin: auto; background-color: #FEFEFE; display: flex; flex-wrap: wrap; align-items: center; }
.special .text-wrapper .text { width: 100%; }
.special .text-wrapper .text h4 { font-size: 1.4em; font-weight: 700; color: deeppink; }
.special .text-wrapper .text p { padding-left: 1em; text-indent: -1em; }
.special .text-wrapper img { width: 50%; padding: 1.0rem; margin: auto; }
@media (min-width: 576px) { .special .text-wrapper .text { width: 70%; }
  .special .text-wrapper .text h4 { font-size: 1.4em; }
  .special .text-wrapper img { width: 30%; } }
@media (min-width: 768px) { .special .text-wrapper .text h4 { font-size: 1.8em; } }
@media (min-width: 992px) { .special .text-wrapper .text h4 { font-size: 2.3em; } }
@media (min-width: 1200px) { .special .text-wrapper .text h4 { font-size: 2.7em; } }

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

#shop .row { align-items: center; }

.shopinfo { text-align: center; }
.shopinfo .shopinfo-txt1 { font-size: 2.475em; font-weight: 800; letter-spacing: -0.1rem; line-height: 1.0; }
.shopinfo .shopinfo-txt2 { font-size: 1.4em; font-weight: 700; line-height: 2.4rem; }
.shopinfo p.shopelement { padding-top: 0.5rem; margin: 1.0rem auto 0 auto; border-top: 0.1rem solid #FEFEFE; font-size: 1em; text-align: left; width: 90%; }
.shopinfo p.shopelement span { display: block; margin-bottom: 0.3rem; font-family: 'Open Sans', sans-serif; font-size: 1.4em; font-weight: 800; letter-spacing: -0.1rem; }
@media (min-width: 992px) { .shopinfo { text-align: left; }
  .shopinfo p.shopelement { width: 100%; } }
@media (min-width: 1200px) { .shopinfo .shopinfo-txt1 { font-size: 3.4em; }
  .shopinfo .shopinfo-txt2 { font-size: 1.675em; } }
@media (min-width: 1400px) { .shopinfo .shopinfo-txt1 { font-size: 4em; }
  .shopinfo .shopinfo-txt2 { font-size: 1.975em; } }

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

.shopinfo a:hover, .shopelement a:hover { color: yellow; }

.mapimg { text-align: center; }

.mapimg img { width: 95%; }

.copyright { background-color: #333; color: #CCC; width: 100%; font-size: 1em; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; }