@charset "UTF-8";
 #mainSlide{width: 100%; margin: 0 auto;}
@media only screen and (min-width:1081px) {.slick-list{height:auto;overflow: hidden;}}
#mainSlide img{width:100%; height: auto;}
#mainSlide .slide_wap{position: relative; display: block;}
#mainSlide div.slick-slide .slide_text{position:absolute;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
font-style: normal;}
@media only screen and (min-width:1081px) {
#mainSlide div.slick-slide > div{vertical-align:top;}
#mainSlide div.slick-slide .slide_text{
font-size: 2.5rem;
top: -1em;
bottom: 0;
margin: auto;
max-width: 1080px;
margin: 0 auto;
display: block;
width: 100%;
left: 0;
right: 0;
height: 100%;
display: flex;
align-items: center;
padding: 20px;
}
}
@media only screen and (max-width:1080px){
#mainSlide{width:100%; max-width: 1080px;}
#mainSlide div.slick-slide .slide_text{top:30px; left: 20px; font-size: 2.0rem;}
.slick-list{height: 381px;overflow: hidden;}
}
#delivered_items{padding:100px 4% 50px 4%;}
.deliveredLists{display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.deliveredLists figure{position: relative;
overflow: hidden;
width:100%;}
.deliveredLists figure::before {
content: "";
display: block;
padding-top: 130%;
}
.deliveredLists figure img {
position:absolute;
width:100%;
height:100%;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
object-fit:cover
}
@media only screen and (min-width:1081px) {
.deliveredLists > a{width: calc((100% - 84px) / 4);}
.deliveredLists > a:not(:nth-of-type(4n)){margin-right: 28px;}
}
@media only screen and (max-width:1080px){
.deliveredLists > a{width: calc(98.5% / 2); margin-bottom: 1.5%;}
.deliveredLists > a:not(:nth-of-type(2n)){margin-right: 1.5%;}
}
.bnrSection{max-width: 1080px; margin: 100px auto 0;}
.bnrSection > a{display: block; position: relative; min-height: 338px;}
.bnrSection > a{background-position: left top; background-repeat: no-repeat; background-size: cover;}
.bnrSection > a figure{}
.bnrSection > a figure img{width: 100%; height: auto;}
.bnrSection > a figure::after{content: ""}
.bnrSection > a::after{position: absolute;
content: "";
display: block;
background-color: rgba(255,255,255,.8);
width: 50%;
height: 100%;
right: 0;
top: 0;
z-index: 1;}
.bnrSection > a .texts{padding: 20px; margin-left: 50%;
color: #111;width: 50%; z-index: 2;
position: relative;}
@media only screen and (min-width:813px) {
.bnrSection{display: flex;}
.bnrSection > a{width: 50%;}
}
@media only screen and (max-width:812px){
.bnrSection{width: 100vw; margin: 80px calc(50% - 50vw) 0;}
}
#ranking{padding: 50px 4%;}
.rankingList{max-width: 920px; margin: 0 auto;
display: flex; justify-content: center; gap:40px;}
.rankingList figure{position: relative;
overflow: hidden;
margin-bottom: 5px;
width:100%;}
.rankingList figure::before {
content: "";
display: block;
padding-top: 130%;
}
.rankingList figure img {
position:absolute;
width:100%;
height:100%;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
object-fit:cover
}
.rankingList h3{font-family: "Zen Old Mincho", serif;font-weight: 400; font-size: 1.8rem;}
@media only screen and (min-width:813px) {
.rankingList li{width: calc((100% - 80px) / 3);}
.rankingList p{text-align: center;font-size: 1.6rem;}
}
@media only screen and (max-width:812px){
.rankingList{gap:20px;}
.rankingList li{width: calc((100% - 40px) / 3);}
.rankingList p{font-size: 1.4rem; line-height: 1.6;}
}
#onlineShop{
padding: 50px 4%; background-color:#F4F4F4;}
.onlineItemList{max-width: 1080px; margin: 0 auto;}
.onlineItemList li a{display: flex;gap:20px;}
.onlineItemList li dt span{text-align: center; color: #fff; font-size: 1.4rem;padding: 3px 10px;}
@media only screen and (max-width:812px){.onlineItemList li dt span{font-size: 1.2rem;padding: 3px 6px;}}
.onlineItemList li dt span.bg{background-color: #c7b299; }
.onlineItemList li dt span.br{background-color: #524641; }
.onlineItemList li dt span.bk{background-color: #000000; }
.onlineItemList li dt{margin-bottom: 3px;}
.onlineItemList li dd h3{font-family: "Zen Old Mincho", serif;font-weight: 400; font-size: 2.0rem; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #000;}
.onlineItemList li dd p{font-size: 1.4rem;}
.onlineItemList li dl{width: calc(100% - 183px);}
.onlineItemList figure{position: relative;
overflow: hidden;
width:173px}
.onlineItemList figure::before {
content: "";
display: block;
padding-top: 130%;
}
.onlineItemList figure img {
position:absolute;
width:100%;
height:100%;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
object-fit:cover
}
@media only screen and (min-width:813px) {
.onlineItemList{display: flex;
flex-wrap: wrap;
gap:25px 20px;
}
.onlineItemList li{width: calc((100% - 20px) / 2);}
}
@media only screen and (max-width:812px){
.onlineItemList li:not(:last-of-type){margin-bottom: 25px;}
}
#Blog{padding: 50px 4%;}
#Blog .btn_m{
display:inline-block;
background-color: #898989;
text-align: center;
color: #fff!important;
font-size: 1.5rem;
padding: 10px 20px;
font-family: "Zen Old Mincho", serif;
font-weight: 600;
line-height: 1;} @media only screen and (min-width:813px){
.BlogList {  display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0;}
.BlogList li { box-sizing: border-box; flex: 0 0 calc((100% - 60px) / 4);}  .BlogList li:first-child:nth-last-child(2),
.BlogList li:first-child:nth-last-child(2) ~ li {
flex: 0 0 calc((100% - 20px) / 2);
} .BlogList li:first-child:nth-last-child(3),
.BlogList li:first-child:nth-last-child(3) ~ li,
.BlogList li:first-child:nth-last-child(5),
.BlogList li:first-child:nth-last-child(5) ~ li,
.BlogList li:first-child:nth-last-child(6),
.BlogList li:first-child:nth-last-child(6) ~ li,
.BlogList li:first-child:nth-last-child(9),
.BlogList li:first-child:nth-last-child(9) ~ li,
.BlogList li:first-child:nth-last-child(15),
.BlogList li:first-child:nth-last-child(15) ~ li {
flex: 0 0 calc((100% - 40px) / 3);}
}
@media only screen and (max-width:812px){
.BlogList{display: flex; flex-wrap: wrap;}
.BlogList li{width:48%; margin-bottom: 4%;}
.BlogList li:not(:nth-of-type(2n)){margin-right: 4%;}
}
.BlogList li img { width: 100%; display: block;}
.BlogList li .imgBox{position: relative;  width:100%; display: block; margin-bottom:10px;}
.BlogList li .imgBox::before{content: "";display: block;padding-bottom: 75%;}
.BlogList li .imgBox img{position: absolute;width: 100%;height: 100%;top: 0;object-fit: cover;}
.sectionBox{padding: 50px 4%;}
.sectionBox > div img{display: block; margin: 0 auto;}
.sectionBox > div section > p{margin-top: 10px;font-size: 1.8rem;}
.sectionBox > div section > .imgBox{display: flex; gap:10px;}
.sectionBox > div section > .imgBox figure{width:100%; }
.sectionBox > div section > .imgBox figure figcaption{margin-top: 10px;font-size: 1.8rem;}
@media only screen and (min-width:813px){
.sectionBox > div{max-width: 1080px;margin: 0 auto; display: flex; gap:40px;}
.sectionBox > div section{width: calc((100% - 40px) / 2);}        
}
@media only screen and (max-width:812px){
.sectionBox > div section > .imgBox{margin-bottom: 40px;}
.sectionBox > div section > .imgBox figure figcaption{font-size: 1.4rem;}
.sectionBox > div section > p{font-size: 1.4rem;}
}
#review{padding: 50px 4% 100px 4%;}
.reviewBox{overflow-y: scroll;
height: 430px;
max-width: 1080px;
margin: 0 auto 80px;
margin-bottom: 0px;}
@media only screen and (min-width:813px){
}
@media only screen and (max-width:812px){
}
#about{padding: 90px 4%; background-color: #E4F1EA;}
#about .text{font-size: 1.5rem; padding: 10px; margin-bottom: 10px;}
#about figure img{width: 100%; height: auto;}
@media only screen and (min-width:813px){
#about .wap01{display: flex; justify-content: space-between; column-gap: 40px;}
#about .wap01 > div{width: calc((100% - 40px) / 2);}
}
@media only screen and (max-width:812px){
#about .wap01 > div:not(:last-of-type){margin-bottom: 30px;}
}
.img-bt{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.img-bt img{
width: 100%;
height: auto;
}
.top_bnr_img img{width:100%; height: auto}
@media only screen and (min-width:813px){
}
@media only screen and (max-width:812px){
} #top_bnrarea .wap01{margin-bottom:40px;}
#top_bnrarea .right_bnr ul {display:flex; }
#top_bnrarea .right_bnr ul li{width: 48%; }
#top_bnrarea .right_bnr ul li:first-child{margin-right:5%; }
#top_bnrarea .right_bnr img{display:block;width:100%; height:auto;}
@media only screen and (min-width:813px){
#top_bnrarea .wap01{display:flex; flex-direction:row;}
#top_bnrarea .left_bnr{width: 45%; padding:0.5%;}
#top_bnrarea .right_bnr{width: 45%; padding:0.5% 1.5%}
#top_bnrarea .right_bnr ul {margin-bottom:5%;}
#top_bnrarea .right_bnr ul img{height:290px;}
.bnr_tate{max-width: 215px;}
.bnr_yoko{max-width: 450px;}
}
@media only screen and (max-width:812px){
#top_bnrarea .left_bnr{width: 100%; padding:3%;}
#top_bnrarea .right_bnr{width: 100%; padding:3%;}
#top_bnrarea .right_bnr ul {margin-bottom:5%;}
.bnr_tate{max-width: 48%;}
.bnr_yoko{max-width: 100%;}
} .color_choice{text-align:center;}
.color_choice img{width:300px; margin:0 auto;}