@charset "UTF-8";
/* CSS Document */
/***********************************************
								共 通 項 目
***********************************************/
.heading { font-size: 1.8em; font-weight: 700; }

.sub-heading { font-weight: 700; }

.see-all { color: #6d6d6d !important; font-size: 0.9em; }
.see-all:hover { text-decoration: underline; }

.mfp-iframe-scaler iframe { background: #fff !important; }

.osirase { position: relative; width: 100%; text-align: center; font-weight: 700; font-size: 1.4em; border: solid 1px #000; transition: .4s; }
.osirase a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.osirase:hover { background-color: #EEE; }

.trim-square { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/***********************************************
								ヘ ッ ダ ー
***********************************************/
.header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.header .site-title { width: auto; display: flex; flex-wrap: wrap; align-items: center; }
.header .main-logo { width: 100%; max-width: 150px; }
.header .sns-area { width: 60%; max-width: 180px; display: flex; justify-content: space-between; align-items: center; }
.header .sns-area .sns-icon { width: calc((100% / 3) - 5px); border-radius: 50%; overflow: hidden; transition: .6s; border: solid 2px transparent; }
.header .sns-area .sns-icon:hover { border-color: #999; opacity: 1; }
.header .sns-area .sns-icon img { opacity: 1 !important; }

/***********************************************
								コ ン テ ン ツ
***********************************************/
.hero-area { position: relative; }
.hero-area .swiper-pagination-bullet { background-color: #4D4D4D; width: 11px; height: 11px; margin: 0 7px !important; }
.hero-area .swiper-button-prev, .hero-area .swiper-button-next { width: 50px; height: 50px; background-color: rgba(70, 70, 70, 0.75); border-radius: 50%; transition: .4s; }
.hero-area .swiper-button-prev:hover, .hero-area .swiper-button-next:hover { background-color: rgba(140, 140, 140, 0.75); }
.hero-area .swiper-button-prev::after, .hero-area .swiper-button-next::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 15px; height: 15px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.hero-area .swiper-button-prev { transform: translateX(-75%); }
.hero-area .swiper-button-prev::after { transform: translateX(25%) rotate(-135deg); box-sizing: border-box; }
.hero-area .swiper-button-next { transform: translateX(75%); }
.hero-area .swiper-button-next::after { transform: translateX(-25%) rotate(45deg); box-sizing: border-box; }
.hero-area .swiper-pagination { transform: translateY(200%); }

.newarrival .swiper-slide a, .newarrival .swiper-slide a:visited { color: #333; }
.newarrival .swiper-slide a:hover { text-decoration: underline; }
.newarrival .swiper-slide p { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; }
.newarrival .swiper-slide p span { position: relative; padding-left: 1rem; }
.newarrival .swiper-slide p span::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; display: block; width: 0.5rem; height: 90%; border-radius: 0.5rem; background-color: #c7b299; }

.product-link a { color: #333 !important; }
.product-link a:hover { text-decoration: underline; }

.topics { display: flex; flex-direction: column; position: relative; }
.topics a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.topics img { transition: .4s; }
.topics:hover img { opacity: 0.8; }
.topics:hover .sub-heading { text-decoration: underline; }
.topics .sub-heading { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.topics .excerpt { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.9em; }

.lesson { text-align: center; }
.lesson img { max-width: 180px; }
.lesson a { color: #333 !important; }
.lesson a:hover { text-decoration: underline; }

.shopinfo { border-top: dashed 1px #333; }
.shopinfo a { color: #333 !important; }
.shopinfo a:hover { text-decoration: underline; }

.shopinfo-slider .swiper { border-top: dashed 1px #333; }

/***********************************************
								フ ッ タ ー
***********************************************/
.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: #FEFEFE; }

.fnav li { font-size: 1.2rem; line-height: 2.0rem; width: 100%; position: relative; padding: 0 0.5rem; box-sizing: border-box; text-align: left; border-bottom: solid 1px #333; transition: .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 #FEFEFE; } }
.copy { font-size: 1rem; text-align: center; padding: 0; line-height: 2.6rem; color: #FEFEFE; }