@charset "UTF-8";
/**************************************
							共 通 項 目
**************************************/
body { color: #222; overflow-x: hidden; position: relative; }
body::after { content: ""; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; display: block; background: url("../img/bg.jpg") repeat; z-index: -1; }

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

/**************************************
						ヘ ッ ダ ー
**************************************/
.header p { font-size: 1.2em; font-weight: 400; line-height: 1.8; }

/**************************************
						コ ン テ ン ツ
**************************************/
.model { display: flex; flex-direction: column; position: relative; margin-bottom: 2rem; width: calc( 50% - 1rem); }
.model .img { width: 100%; height: auto; aspect-ratio: 1/1; font-size: 0; border-radius: 50%; overflow: hidden; box-shadow: 10px 15px 10px rgba(0, 0, 0, 0.15); }
.model:nth-child(3n+3) .img { border: solid 5px #1d2443; }
.model:nth-child(3n+1) .img { border: solid 5px #d85b83; }
.model:nth-child(3n+2) .img { border: solid 5px #91d1db; }
.model .img img { transition: .4s; object-fit: cover; width: 100%; height: 100%; }
.model .text { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; position: relative; font-family: "Roboto Condensed", sans-serif; }
.model .text h2 { color: #000; }
.model .text h2 p:first-child { font-size: 1.6em; font-weight: 700; line-height: 1; word-break: break-all; letter-spacing: -1px; margin-bottom: 0.5rem; }
.model .text h2 p:last-child { font-size: 0.8em; font-weight: 400; line-height: 1; }
.model .sup { display: flex; justify-content: center; margin-top: auto; position: relative; padding: 0.5rem 1rem; }
.model .sup::before { position: absolute; right: 0; bottom: -0.5rem; content: "◢"; font-size: 1rem; display: block; color: #333; }
.model .sup .sold { font-size: 0.8em; color: #FF0000; }
.model .sup .new { font-size: 0.8em; color: #7B7BFB; }
.model .sup .check { font-size: 0.8em; color: #222; }
.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 div.sup::before { color: #FF0000; }
.model.fixed { padding-right: 0; width: 100%; }
.model.fixed h2 p:first-child { font-size: 2em; line-height: 1; }
.model.fixed h2 p:last-child { font-size: 1.5em; line-height: 1; }
@media (min-width: 992px) { .model { margin-bottom: 4rem; width: calc((100% / 4) - 2rem); margin-right: 2rem; }
  .model:nth-child(4n) { margin-right: 0; }
  .model .text { padding: 1.0rem; }
  .model.fixed { flex-direction: row; margin-right: 0; }
  .model.fixed .img { width: 50%; border: solid 8px #1d2443; }
  .model.fixed .img + div { width: 50%; }
  .model.fixed .text { padding: 2.0rem; height: 100%; }
  .model.fixed .text h2 p:first-child { font-size: 2.8em; line-height: 1; }
  .model.fixed .text h2 p:last-child { font-size: 1.8em; line-height: 1; }
  .model.fixed .sup { padding: 1rem; }
  .model .sup { padding: 1rem; } }

.slick { display: flex; flex-wrap: wrap; justify-content: space-between; }
@media (min-width: 992px) { .slick { justify-content: flex-start; } }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; font-size: 1.4rem; }
.pagination p { padding: 0.75rem; 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.75rem 1.8rem; 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; }

/**************************************
							フ ッ タ ー
**************************************/
.sns { margin: 3.0rem auto; width: 238px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.sns #twt, .sns #fb, .sns #line { position: relative; }
.sns #twt .img, .sns #fb .img, .sns #line .img { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; transition: .4s; }
.sns #twt:hover .img, .sns #fb:hover .img, .sns #line:hover .img { transform: scale(1.2); }
.sns #twt::before, .sns #fb::before, .sns #line::before { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); font-size: 11px; display: flex; align-items: center; justify-content: center; width: 99px; color: #FEFEFE; height: 25px; border-radius: 5px; }
.sns #twt::after, .sns #fb::after, .sns #line::after { width: 0; height: 0; border-style: solid; border-width: 8px 10px 0 10px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); content: ""; display: block; }
.sns #twt a, .sns #fb a, .sns #line a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.sns #twt .img { background-color: #000; }
.sns #twt::before { content: "Xでポスト"; background-color: #000; }
.sns #twt::after { border-color: #000 transparent transparent transparent; }
.sns #fb .img { background-color: #1877F2; }
.sns #fb::before { content: "Facebookでシェア"; background-color: #1877F2; }
.sns #fb::after { border-color: #1877F2 transparent transparent transparent; }
.sns #line .img { background-color: #00B900; }
.sns #line::before { content: "LINEで送る"; background-color: #00B900; }
.sns #line::after { border-color: #00B900 transparent transparent transparent; }
@media (min-width: 576px) { .sns { width: 280px; } }

.shopinfo { padding: 1.5rem; background-color: #FFF; border: dashed 1px #CCC; display: flex; flex-wrap: wrap; align-items: center; }
.shopinfo .shopimg { margin: 0 auto 1.0rem auto; width: 12rem; height: 12rem; border-radius: 6rem; overflow: hidden; }
.shopinfo .shopimg img { height: 100%; }
@media (min-width: 576px) { .shopinfo .shopimg { margin: 0; margin-right: 1.5rem; } }
.shopinfo .info h3 a { color: #222; }
.shopinfo .info h3 a:visited { color: #222; }
.shopinfo a:hover { text-decoration: underline; }
.shopinfo .info { width: 100%; }
.shopinfo .info h3 { font-weight: 700; font-size: 1.2em; }
.shopinfo .info p { font-size: 0.8em; margin-top: 0.5rem; }
@media (min-width: 576px) { .shopinfo .info { width: auto; } }

.copy { text-align: center; font-size: 0.7em; font-weight: 500; padding: 3.0rem 0; color: #666; }