@charset "UTF-8";

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

 file name  :  shoplist.css

=================================================================== */
article{ padding: 75px 0 45px;}
article .lead{ margin: 15px 0 0; padding: 0 15px; font-family: "Noto Serif JP", serif; line-height: 1.8;}
.block{ margin: 40px 0 0; padding: 40px 0 0; background: url("/sp/img/blt.gif") no-repeat top center; background-size: contain;}
.block h2{ color: #b48e3a; text-align: center; letter-spacing: .1em; font-weight: 400; font-size: 18px; font-family: "Noto Serif JP", serif; line-height: 1.5;}
.block h2 span{ display: block; margin: 5px 0 0; font-size: 12px;}
.block h3{ margin: 40px 0 0; color: #b48e3a; letter-spacing: .1em; font-weight: 400; font-size: 16px; font-family: "Noto Serif JP", serif;}
.block .btn + h3{ padding: 30px 0 0; border-top: 1px solid #e0c898;}
.block .cap2{ position: relative; margin: .5em 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: 15px 0 0; padding: 0 0 30px;}
.block figure img{ width: 100%;}
.block .box{ padding: 0 15px;}
.block address{ margin: 15px 0 0; font-style: normal; line-height: 1.8;}
.block .tel{ line-height: 1.5;}
.block table{ margin: 15px 0 0; width: 100%; border: 3px double #e0c898; font-size: 13px; line-height: 1.5;}
.block th{ padding: 10px; width: 33%; border-top: 1px solid #e0c898; background: #f1ede6; vertical-align: top; text-align: left; white-space: nowrap;}
.block td{ padding: 10px; border-top: 1px solid #e0c898; border-left: 1px solid #e0c898;}
.block p{ margin: 15px 0 0; line-height: 1.8;}
.block p a{ color: #ff5400; 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: block; padding: 15px 0; border-radius: 4px; background: #b38d41; color: #fff; text-align: center;}
.block .btn span{ display: block; padding: 15px 0; border-radius: 4px; background: #fff; color: #b38d41; text-align: center;}
.block .list-btn{ margin: 15px 0 0;}
.block .list-btn li{ display: inline-block; padding: 0 5px 0 0; width: 20%;}
.block .list-btn li a{ position: relative; display: block; border-radius: 4px; background: #fff; color: #b38d41; text-align: center; font-size: 24px;}
.block .list-btn li a:after{ display: block; padding-top: 100%; content: ""; vertical-align: middle;}
.block .list-btn li a i{ position: absolute; top: 50%; right: 0; bottom: 0; left: 0; display: block; margin-top: -12px;}
.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;}

.list-tab{ display: flex; margin: 25px 0 0; padding: 0 2px; width: 100%; border-bottom: 1px solid #e9e1d1; align-items: stretch; justify-content: center;}
.list-tab > li{ position: relative; z-index: 10; display: flex; margin: 0 4px; padding: 0 12px; height: 45px; border: 1px solid #e9e1d1; border-bottom: none; border-radius: 4px 4px 0 0; text-align: center; white-space: nowrap; letter-spacing: .1em; font-size: 10px; font-family: "Noto Serif JP", serif; line-height: 1.4; align-items: center;}
.list-tab > li.current{ background: #e9e1d1;}

.tab-content{ display: none;}
.tab-content.current{ display: block;}
.tab-content > .block:first-of-type{ padding: 0; background: none;}

.dl{ display: flex; margin: 0 auto; padding: 1em 0 0; width: calc(100% - 90px); border-bottom: 1px solid #e9e1d1; flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
.dl > dt{ display: flex; padding: 1em 0 0; width: 100%; border-top: 1px solid #e9e1d1;}
.dl > dt:first-child{ border: none;}
.dl > dd{ display: flex; padding: 0 0 1em; line-height: 1.5;}
.dl a{ color: #b28c39; text-decoration: underline;}
.dl a:hover{ text-decoration: none;}
.dl + .cap{ margin: 1em auto 0; width: 75%; text-align: right;}

.dl-faq{ margin: 0 auto; padding: 2em 15px 1em; width: 100%; border-top: 1px solid #e9e1d1; line-height: 1.75;}
.tab-content > .dl-faq:first-of-type{ border: none;}
.dl-faq > dt{ position: relative; padding: 0 0 0 1.5em; font-weight: bold; cursor: pointer;}
.dl-faq > dt:before{ position: absolute; top: 0; left: 0; color: #b28c39; content: "Q.";}
.dl-faq > dd{ padding: 1em 0;}

.list-tab2{ display: flex; margin: 25px 0 0; padding: 0 15px; width: 100%; align-items: stretch; justify-content: center;}
.list-tab2 > li{ padding: 0 10px; border-right: 1px solid #e9e1d1;}
.list-tab2 > li:first-child{ border-left: 1px solid #e9e1d1;}
.list-tab2 > li:first-child a{ border: none;}
.list-tab2 span{ display: flex; padding: 10px 0; width: 100%; height: 100%; color: #333; text-align: center; letter-spacing: .05em; font-size: 10px; font-family: "Noto Serif JP", serif; line-height: 1.5; justify-content: center; align-items: center;}
.list-tab2 > li.current span{ border-bottom: 1px solid; color: #b48e3a;}

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

.list-item{ display: flex; margin: 25px 0 0; padding: 0 12px; justify-content: center; flex-wrap: wrap;}
.list-item > li{ padding: 2px 1px 0; width: calc(100% / 3);}
.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: 25px 0 0;}
.tab-content2 .more a{ display: flex; margin: 0 auto; padding: 15px; background: #b28c39; color: #fff; white-space: nowrap; letter-spacing: .1em; justify-content: center; align-items: center;}
.tab-content2 .more a:hover,
.tab-content2 .more a:active{ background: #fff; color: #b28c39;}

.list-point{ display: flex; padding: 15px 15px 0; flex-wrap: wrap; justify-content: space-between;}
.list-point > li{ margin: 15px 0 0; width: calc(50% - 7px);}
.list-point a{ position: relative; width: 100%; display: flex; flex-direction: column; background: #fff; font-size: 12px; line-height: 1.5; filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.08)); align-items: center; justify-content: center; aspect-ratio: 1/1; text-align: center;}
.list-point span{ padding: .125em 0; font-weight: 500; color: #b48e3a; font-size: 130%; font-family: "Noto Serif JP", serif; left: 0;}
.list-point i{ margin: 0 0 1em; display: block; width: 12px; height: 18px; transform: scale(1.5);}
.list-point i:after,
.list-point i:before{ position: absolute; display: block; border: 1px solid; content: "";}
.list-point i:before{ top: 0; left: 50%; width: 8px; height: 8px; border-radius: 100%; transform: translate(-50%,0);}
.list-point i:after{ top: 9px; width: 12px; height: 9px; border-bottom: 0; border-radius: 100% 100% 0 0;}