@charset "UTF-8";

/* ===================================================================

 file name  :  shoplist.css

=================================================================== */
article{ padding: 30px 30px 0; font-size: 12px;}
article > nav{ padding: 0;}
article > nav ul{ justify-content: flex-start; flex-wrap: wrap;}
article > nav ul > li{ margin: 15px 0 0; padding: 0 .75em; width: 20%; border-left: 1px solid rgba(178,170,166,.7);}
article > nav ul > li:nth-child(5n),
article > nav ul > li:last-child{ border-right: 1px solid rgba(178,170,166,.7);}
article > nav ul > li a{ font-size: 3.2vw;}
article > nav ul > li a{ padding: .75em 0; font-size: 3.2vw;}

article .lead{ margin: 15px 0 0; font-weight: 400; font-family: trajan-pro-3, serif; line-height: 1.75;}
.block{ margin: 60px calc(50% - 50vw) 0; padding: 30px 30px 0; border-top: 1px solid rgba(178,170,166,.7);}
.block > h2{ text-align: center; font-weight: 400; font-weight: 400; font-size: 18px; font-family: trajan-pro-3, serif; line-height: 1.5;}
.block > h2 span{ display: block; margin: 5px 0 0; font-size: 12px;}
.block .box h3{ font-weight: 400; font-weight: 400; font-size: 18px; font-family: trajan-pro-3, serif; line-height: 1.5;}
.block .btn + h3{ padding: 30px 0 0; border-top: 1px solid rgba(178,170,166,.7);}
.block .cap2{ position: relative; margin: 1em 0 0; padding: .5em 1em; letter-spacing: normal; font-size: 12px; line-height: 1.5;}
.block .cap2:before,
.block .cap2:after{ position: absolute; top: 50%; display: block; width: 5px; height: 100%; border: 1px solid #e0c898; content: ""; transform: translate(0,-50%);}
.block .cap2:before{ left: 0; border-right: none;}
.block .cap2:after{ right: 0; border-left: none;}
.block > figure{ margin: 30px calc(50% - 50vw) 0; padding: 0 0 30px;}
.block > figure .list-shop .slick-slide{ padding: 0;}
.block > figure img{ width: 100%;}
.block2 .box{ padding: 60px 0 0;}
.block2 > h2 + .anchor + .box{ padding: 45px 0 0;}
.block address{ margin: 15px 0 0; font-style: normal; line-height: 1.75;}
.block .tel{ line-height: 1.5;}
.block table{ margin: 15px 0 0; width: 100%; border: 3px double rgba(178,170,166,.7); font-size: 12px; line-height: 1.5;}
.block th{ padding: 10px; width: 33%; border-top: 1px solid rgba(178,170,166,.7); background: rgba(178,170,166,.175); vertical-align: top; text-align: left; white-space: nowrap;}
.block td{ padding: 10px; border-top: 1px solid rgba(178,170,166,.7); border-left: 1px solid rgba(178,170,166,.7);}
.block p{ margin: 15px 0 0; line-height: 1.8;}
.block p a{ color: #988575; text-decoration: underline;}
.block p a:hover{ text-decoration: none;}
.block .ind{ margin: 0; padding: 0 0 0 1em; text-indent: -1em;}
.block dl{ margin: 15px 0 0;}
.block dt{ font-weight: bold; line-height: 1.8;}
.block dd{ line-height: 1.8;}
.block dd ul{ margin: 0 0 0 1.2em;}
.block dd li{ list-style: disc;}

.block .btn{ margin: 15px 0 0;}
.block .btn + .btn{ margin: 10px 0 0;}
.block .btn a{ display: flex; height: 40px; border: 1px solid #3e3a39; background: rgba(255,255,255,.7); color: #3e3a39; text-align: center; font-weight: 500; font-weight: 400; font-size: 12px; font-family: trajan-pro-3, serif; justify-content: center; align-items: center;}
.block .btn span{ display: block; padding: 15px 0; border-radius: 4px; background: #fff; color: #b38d41; text-align: center;}
.block .btn ul{ display: flex; justify-content: space-between;}
.block .btn ul > li{ width: calc(50% - 7px);}
.block .list-btn{ margin: 15px 0 0;}
.block .list-btn li{ display: inline-block; padding: 0 5px 0 0; width: 15%;}
.block .list-btn li a{ position: relative; display: flex; width: 10vw; height: 10vw; border-radius: 4px; background: #fff; justify-content: center; align-items: center;}
.block .list-btn li a i{ height: 50%;}
.block .list-btn li a i img{ display: block; width: auto; height: 100%;}
.block .list-other{ margin: 15px -15px 0; border-top: 1px solid #e9e1d1;}
.block .list-other li{ padding: 15px; border-bottom: 1px solid #e9e1d1; line-height: 1.5;}
.block .cap{ text-align: center; font-size: 12px;}

.tab-wrap{ margin: 15px calc(50% - 50vw) 0; padding: 0 0 60px; border-bottom: 1px solid rgba(178,170,166,.7);}
.list-tab{ position: sticky; top: 50px; z-index: 100; display: flex; padding: 15px 2px 0; width: 100%; border-bottom: 1px solid rgba(178,170,166,.7); background: #f6f4f0; align-items: stretch; justify-content: center;}
.list-tab > li{ margin: 0 4px;}
.tab{ position: relative; display: flex; padding: 0 12px; height: 45px; border: 1px solid rgba(178,170,166,.7); border-bottom: none; border-radius: 4px 4px 0 0; text-align: center; white-space: nowrap; letter-spacing: .02em; font-weight: 400; font-size: 11px; font-family: trajan-pro-3, serif; line-height: 1.4; align-items: center;}
.tab.current{ background: rgba(178,170,166,.7);}

.tab-content{ display: none;}
.tab-content.current{ display: block;}
.tab-content > .block{ padding: 30px 30px 0;}
.tab-content > .block:first-of-type{ margin: 0; padding: 30px 30px 0; border: none;}

.dl{ display: flex; margin: 30px auto 0; width: calc(100% - 60px); border-bottom: 1px solid rgba(178,170,166,.7); flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
.dl > dt{ display: flex; padding: 1em 0 1em 1em; width: 50%; border-top: 1px solid rgba(178,170,166,.7);}
.dl > dd{ display: flex; padding: 1em 0; width: 25%; border-top: 1px solid rgba(178,170,166,.7);}
.dl a{ color: #988575; text-decoration: underline;}
.dl a:hover{ text-decoration: none;}
.dl + .cap{ margin: 1em 0 0; padding: 0 30px 0 0; text-align: right;}

.dl-faq{ margin: 0 auto; padding: 2em 0; width: calc(100% - 60px); border-bottom: 1px solid rgba(178,170,166,.7); line-height: 1.75;}
.tab-content3 > .dl-faq:first-of-type{ padding: 0 0 2em;}
.dl-faq > dt{ position: relative; padding: 0 0 0 2em; font-weight: bold; cursor: pointer;}
.dl-faq > dt:before{ position: absolute; top: -.2em; left: 0; color: #988575; content: "Q."; font-size: 130%;}
.dl-faq > dd{ padding: 1em 0 0;}

.tab-wrap2{ padding: 30px 30px 0;}
.list-tab2{ display: flex; width: 100%; align-items: stretch; justify-content: center;}
.list-tab2 > li{ padding: 0 1em; border-right: 1px solid rgba(178,170,166,.7);}
.list-tab2 > li:first-child{ border-left: 1px solid rgba(178,170,166,.7);}
.list-tab2 > li:first-child a{ border: none;}
.list-tab2 span{ display: flex; padding: .75em 0; width: 100%; height: 100%; color: #333; text-align: center; letter-spacing: .02em; font-size: 11px; line-height: 1.5; justify-content: center; align-items: center;}
.list-tab2 > li.current span{ border-bottom: 1px solid; color: #988575;}

.tab-content2{ display: none;}
.tab-content2.current{ display: flex; flex-direction: column; align-items: center;}

.list-tab3{ display: flex; margin: 25px 0 25px; padding: 0 15px; width: auto; flex-wrap: wrap;}
.list-tab3 > li{ width: 50%; border-right: 1px solid rgba(178,170,166,.7); border-bottom: 1px solid rgba(178,170,166,.7);}
.list-tab3 > li:nth-child(even){ border-right: none;}
.list-tab3 > li:last-child{ border-bottom: none;}
.list-tab3 span{ display: flex; padding: 1.25em 0; font-size: 10px; justify-content: center; align-items: center;}
.list-tab3 > li.current span{ background: rgba(178,170,166,.7);}

.tab-content3{ display: none;}
.tab-content3.current{ display: block;}

.list-item{ display: flex; margin: 30px calc(50% - 50vw) 0; justify-content: space-between; flex-wrap: wrap;}
.list-item > li{ padding: 1px 0 0; width: calc(100% / 3 - 1px);}
.list-item a{ position: relative; display: block; overflow: hidden;}
.list-item img{ width: 100%;}
.list-item .caption{ position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: 100%; background: rgba(0,0,0,.5); color: #fff; text-align: center; letter-spacing: .1em; font-size: 10px; font-family: "Noto Serif JP", serif; line-height: 1.5; opacity: 0; transition: all .5s ease; align-items: center; justify-content: center;}
.list-item .caption small{ font-size: 8px;}
.list-item .caption em{ color: #fff; font-size: 14px;}
.list-item .caption span{ margin: 1em 0 0; font-family: 'Noto Sans JP', sans-serif;}
.list-item a:hover .caption{ opacity: 1;}
.list-item .new:before{ position: absolute; top: 4%; left: -15%; z-index: 10; padding: .2em 0; width: 70%; height: auto; background: #b48e3a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); color: #fff; content: "NEW"; text-align: center; letter-spacing: .1em; font-size: 10px; font-family: "Noto Serif JP", serif; line-height: 1; transform: rotate(-30deg);}

.tab-content2 .more{ margin: 30px 0 0;}
.tab-content2 .more a{ display: flex; padding: 0 1em; height: 40px; border: 1px solid #3e3a39; background: rgba(255,255,255,.7); color: #3e3a39; text-align: center; font-weight: 500; font-weight: 400; font-size: 12px; font-family: trajan-pro-3, serif; justify-content: center; align-items: center;}

.insta-wrap2{ margin: 30px 0 0;}
.insta-wrap2 h3{ position: relative; margin: 0 0 15px; padding: 0 10px 0 20px; font-size: 12px;}
.insta-wrap2 h3:before{ position: absolute; top: .4em; left: 0; width: 6px; height: 6px; border-top: 1px solid #988575; border-right: 1px solid #988575; content: ""; transform: rotate(45deg);}
.insta-wrap2 h3 a{ color: #988575; text-decoration: underline;}
.insta-wrap2 .ecbn-selection-page-wrapper .ecbn-selection-title,
.insta-wrap2 .ecbn-selection-wrapper .ecbn-selection-title{ display: none;}
.insta-wrap2 .ecbn-selection-page-wrapper .ecbn-selection-description,
.insta-wrap2 .ecbn-selection-wrapper .ecbn-selection-description{ display: none;}
.insta-wrap2 .ecbn-selection-page-wrapper .ecbn-selection-to-nextpage>a.ecbn-selection-to-nextpage-btn,
.insta-wrap2 .ecbn-selection-wrapper .ecbn-selection-to-nextpage>a.ecbn-selection-to-nextpage-btn{ display: none;}