@charset "UTF-8";
/* CSS Document */
/*************************************
						共 通 項 目
*************************************/
body::before { width: 100%; height: 100vh; display: block; position: fixed; top: 0; left: 0; background: url("../img/bg-logo.jpg") repeat; content: ""; z-index: -1; }

h2 { font-size: 3em; font-weight: 700; text-align: center; }

h3 { font-size: 1em; position: relative; padding-left: 1.8rem; }
h3 span { font-size: 1.8em; font-size: clamp(1.8em, calc(1.8rem + ((1vw - 0.234375em) * 0.3122)), 2em); font-weight: 900; }
h3::before { position: absolute; top: 50%; left: 0; width: 0.8rem; height: 95%; transform: translateY(-53%); content: ""; display: block; background-color: #1D89B4; border-radius: 0.4rem; }

.cart { background-color: #1D89B4; color: #FFF; border: none; position: relative; height: 4rem; border-radius: 2rem; transition: .4s; }
.cart a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; overflow: hidden; border-radius: inherit; }
.cart:hover { background-color: #F7931E; }

hr { border: none; border-bottom: dashed 2px #414141; background-color: transparent; }

@media (min-width: 768px) { .sticky { position: sticky; top: 1.5rem; } }

/*************************************
						ア イ キ ャ ッ チ
*************************************/
.eyecatch { max-width: 1920px; margin: auto; }

/*************************************
						イ ン ト ロ
*************************************/
.intro { max-width: 800px; margin: auto; display: flex; justify-content: center; }
@media (min-width: 768px) { .intro { line-height: 1.6; } }

/*************************************
						ラ イ ン ナ ッ プ
*************************************/
.lineup { background-color: #F2F2F2; }
.lineup ul { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 800px; margin: auto; overflow-y: hidden; }
.lineup ul li { width: 40%; border-radius: 50%; border: solid 1px #414141; overflow: hidden; background-color: #FFF; padding: 1.5rem; padding: clamp(1.5rem, calc(1.5rem + ((1vw - 0.234375rem) * 2.3415)), 3rem); flex-shrink: 0; position: relative; }
@media (min-width: 768px) { .lineup ul li { width: calc((100% / 4) - 3rem); } }
.lineup ul li img { width: 100%; height: auto; transition: .6s; }
.lineup ul li:hover { cursor: pointer; }
.lineup ul li:hover img { transform: scale(1.2); }
.lineup ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.lineup ul li .new { position: absolute; top: 1.5vw; left: 50%; transform: translateX(-50%); font-size: 3vw; color: #F7931E; font-weight: 700; }
@media (min-width: 768px) { .lineup ul li .new { top: 1.4rem; font-size: initial; } }

/*************************************
						取 扱 店 舗
*************************************/
.shopinfo { background-color: #414141; color: #FEFEFE; }
.shopinfo .shop > p { font-size: 1.8rem; font-weight: 700; border-bottom: solid 1px #F7931E; line-height: 1.2; }
.shopinfo .shop ul li { font-size: 1.6rem; border-bottom: dashed 1px #F2F2F2; line-height: 1.3; }
.shopinfo .shop ul li span { font-weight: 700; }
.shopinfo .shop a, .shopinfo .shop a:visited { color: #FEFEFE; }
.shopinfo .shop a:hover { color: #F7931E; }

/*************************************
						フ ッ タ ー
*************************************/
.footer { background-color: #000; width: 100%; margin: 0; padding: 0; text-align: center; }
.footer img { width: 60%; max-width: 300px; }

.fnav { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: auto; color: #EEE; }
.fnav li { font-size: 1.3rem; line-height: 2.6; width: 100%; position: relative; padding: 0 0.5rem; box-sizing: border-box; text-align: left; border-bottom: solid 1px #333; transition: 0.4s; }
.fnav li:last-child { border-bottom: none; }
.fnav li:hover { background-color: #333; }
.fnav li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
@media (min-width: 992px) { .fnav { justify-content: space-around; max-width: 1000px; }
  .fnav li { width: auto; text-align: center; border-bottom: none; border-bottom: solid 1px #000; }
  .fnav li:hover { background-color: #000; border-bottom: solid 1px #EEE; } }

.copy { font-size: 1rem; text-align: center; padding: 0; line-height: 4; color: #EEE; }

/*************************************
						S w i p e r
*************************************/
.swiper-button-next, .swiper-button-prev { width: auto; height: auto; color: #1D89B4; }

.swiper-button-next:after, .swiper-button-prev:after { font-size: 2.6rem; font-weight: 700; }

.swiper-tbn img:hover { cursor: pointer; }

.swiper-tbn .swiper-slide { opacity: .35; }

.swiper-tbn .swiper-slide-thumb-active { opacity: 1; }