@charset "UTF-8";
/**************************************
							共 通 項 目
**************************************/
body { color: #222; overflow-x: hidden; }

body::before { position: fixed; top: 0; left: 0; width: 100%; height: 110vh; background: url("../img/bg.png") center/cover repeat; content: ""; z-index: -1; }

.wrapper { width: 100%; max-width: 800px; margin: 0 auto; padding: 0; }

/**************************************
						ヘ ッ ダ ー
**************************************/
.header { margin-bottom: 5.0rem; }
.header p { font-size: 1.2rem; font-weight: 400; line-height: 2.4rem; }

/**************************************
						コ ン テ ン ツ
**************************************/
.model { display: flex; flex-wrap: wrap; position: relative; padding-right: 1.0rem; margin-bottom: 1.0rem; width: 50%; }
.model .img { width: 100%; font-size: 0; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; }
.model .img img { transition: .4s; }
.model .text { width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 0.5rem; min-height: 8.0rem; background-image: url("../img/bat.svg"), linear-gradient(to right, #FFF, #FFF); background-size: cover, 100%; background-position: center, center; background-repeat: no-repeat, repeat; border-radius: 0 0 0.5rem 0.5rem; }
.model .text h2 { color: #000; }
.model .text h2 p:first-child { font-size: 1.6rem; font-weight: 700; line-height: 1.6rem; word-break: break-all; }
.model .text h2 p:last-child { font-size: 1.0rem; font-weight: 400; line-height: 1.0rem; }
.model .sup { display: flex; justify-content: space-between; margin-top: 1.0rem; }
.model .sup .sold { font-size: 1.0rem; color: #FF0000; }
.model .sup .new { font-size: 1.0rem; color: #7B7BFB; }
.model .sup .check { color: #222; font-size: 1.0rem; }
.model a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.model:hover img { opacity: 0.8; }
.model:hover .check { color: #FF0000; }
.model.fixed { padding-right: 0; width: 100%; }
.model.fixed .img { border-radius: 0.5rem 0 0 0.5rem; }
.model.fixed h2 p:first-child { font-size: 3.0rem; line-height: 3.0rem; }
.model.fixed h2 p:last-child { font-size: 1.5rem; line-height: 1.5rem; }
@media (min-width: 992px) { .model { padding-right: 2.0rem; margin-bottom: 2.0rem; width: calc(100% / 3); }
  .model .text { padding: 1rem; }
  .model.fixed .img { width: 65.75%; }
  .model.fixed .text { width: 34.25%; padding: 2.0rem; border-radius: 0 0.5rem 0.5rem 0; }
  .model.fixed .text h2 p:first-child { font-size: 3.9rem; line-height: 3.9rem; }
  .model.fixed .text h2 p:last-child { font-size: 2.0rem; line-height: 2.0rem; } }

.slick { display: flex; flex-wrap: wrap; margin-right: -1rem; }
@media (min-width: 992px) { .slick { margin-right: -2rem; } }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; font-size: 1.2rem; }
.pagination p { padding: 0.5em; border: solid 1px #DDD; margin: 0 0.25em; background-color: #FFF; }
.pagination p button { outline: none; border: none; background-color: transparent; }
.pagination p:hover { background-color: #EEE; }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; }
.pagination ul li { font-size: initial; padding: 0.5em 1.25em; border: solid 1px #DDD; position: relative; margin: 0 0.25em; background-color: #FFF; }
.pagination ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #333; }
.pagination ul li a:hover { text-decoration: none; color: #333; }
.pagination ul li:hover, .pagination ul li.current { background-color: #EEE; }

/**************************************
						ス ラ イ ダ ー
*************************************
.slick { margin-right: -1.0rem;
	@include lg { margin-right: -2.0rem;}
}
.slick-prev,.slick-next { bottom: -40px; top: auto; width: 40px; height: 40px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}
.slick-prev:before,.slick-next:before { font-size: 40px; color: #AAA; opacity: 1.0; }
.slick-prev { left: 50%; transform: translateX(-100%);}
.slick-next { right: 50%; transform: translateX(100%); }
*/