@charset "UTF-8";
/* CSS Document */
/**************************** T H E  M E D A M A
****************************/
.red { color: #e60044; }

.blue { color: #006cb7; }

.hero-area { background: url("../../img/bg.jpg") center/cover no-repeat; background-attachment: fixed; }

.wrapper { width: 100%; max-width: 1920px; margin: auto; }

/***フィルターボタン***/
#sticky { position: sticky; top: 10rem; }

.btn { width: 100%; font-size: 0; font-weight: 400; display: flex; flex-wrap: wrap; }
.btn li { width: 50%; font-size: initial; font-weight: 500; display: flex; }
.btn li div { cursor: pointer; border: solid 2px #333; text-align: center; background-color: #FEFEFE; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.btn li div:hover { background-color: #DDD; }
.btn li div.active { background-color: #333; color: #FEFEFE; }
.btn li div a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
.btn li.heading { width: 100%; padding: 0; }
.btn li.heading p { width: 100%; text-align: left; }
@media (min-width: 1200px) { .btn li { width: 100%; } }

.anchor-point { margin-top: -8rem; padding-top: 8rem; }

/***アイテムリスト***/
.itemlist .item { padding: 0.5rem; box-sizing: border-box; margin: 0; font-size: 0; }
.itemlist .item .itemWrapper { 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); }

.imgarea { display: flex; align-items: flex-start; justify-content: center; background-color: #FEFEFE; }
.imgarea .trim { position: relative; width: 100%; background-color: #EEE; transition: .4s; }
.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; }
.imgarea .trim:hover { opacity: 0.8; }

.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.3em; }
.textarea p.age { font-weight: 500; font-size: 1.1em; }
.textarea p.price { font-weight: 700; color: #FF0000; margin-top: auto; word-break: break-all; line-height: 1.1; }
.textarea p.price span { font-size: 1.8em; 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; }

.d0320 { background-color: #FF9900; }

.d0321 { background-color: #00A4FF; }

.d0322 { background-color: #E60012; }

.d1124 { background-color: #ED1E79; }

/*
.eki { background-color: #2E3192; }
.dr { background-color: #F15A24; }
.gtk { background-color: #662D91; }
.ike { background-color: #39B54A; }
.md { background-color: #9E005D; }
.yk { background-color: #29ABE2; }
.ngy { background-color: #ED1E79; }
.gsb { background-color: #00A99D; }
.htn { background-color: #736357; }

/* { background-color: #8CC63F;}
.d1122 { background-color: #39B54A;}
.d1123 { background-color: #009245;} 
.d1124 { background-color: #00A99D;} 
.d1125 { background-color: #0071BC; }
.d1126 { background-color: #2E3192;} 
.d1127 { background-color: #1B1464;}
.gsb { background-color: #662D91;} 
.ike {background-color: #93278F;}
.md {background-color: #9E005D;}
.yk {background-color: #D4145A;}
.ngy {background-color: #ED1E79;}

.vn { background-color: #603813;}
.wind { background-color: #006837;}
*/
.content-box h2 { font-size: initial; font-weight: 700; line-height: 1; font-family: 'Raleway', 'Roboto', 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif; }
.content-box h2 span { font-size: 3em; position: relative; }
.content-box h2 span::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; border-radius: 1px; background-color: #FF0000; display: block; content: ""; }
.content-box p { font-size: initial; }

.segment { display: flex; flex-direction: column; height: 100%; padding: 0; position: relative; font-size: 0; background-color: #FEFEFE; box-shadow: 2px 2px 5px #DDD; }
.segment p { font-size: initial; }
.segment .img { width: 100%; transition: 0.4s; border-bottom: solid 1px #EEE; min-height: 0%; }
.segment .img img { width: 100%; flex-shrink: 0; height: auto; }
.segment .date { text-align: center; }
.segment .date span { color: #FEFEFE; border-radius: 0.8rem; display: inline-block; }
.segment .title { font-weight: 700; margin: 0; transition: 0.4s; line-height: 1.4; }
.segment .title span { font-size: 0.8rem; }
.segment .detaile { font-size: 1rem; font-size: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 0.3636)), 1.2rem); margin-top: auto; text-align: right; transition: 0.4s; border-top: solid 1px #EEE; }
.segment .detaile span { float: left; color: #FF0000; text-decoration: underline; }
.segment a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: block; text-indent: -9999px; }
.segment:hover .img { opacity: 0.8; }
.segment:hover .title, .segment:hover .detaile { color: #09F; }

.attention { background-color: #F2F2F2; font-size: 1.2rem; font-size: clamp(1.2rem, calc(1.2rem + ((1vw - 0.2rem) * 0.7273)), 1.6rem); line-height: 1.6; }
.attention p span { font-weight: 700; }
.attention p span.red { color: #e60044; }
.attention p span.blue { color: #006cb7; }
.attention .notice { width: 100%; font-size: 0; background-color: #FEFEFE; border: solid 1px #DDD; font-size: inherit; }
.attention .notice h3 { font-size: 1.2em; font-weight: 500; border-left: solid 0.75rem #e60044; border-bottom: solid 1px #e60044; }
.attention .notice p { font-size: 1.0em; padding-left: 1em; text-indent: -1em; }
.attention .notice p span { font-weight: 700; }