@charset "UTF-8";
/* Frontページ */

#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;}

/* BlogList 基本設定 */

@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);}/* デフォルトを4列に設定（4, 8, 10, 11, 12, 13, 14, 16記事など） */

/* --- 2列にする条件 (2記事の場合) --- */
.BlogList li:first-child:nth-last-child(2),
.BlogList li:first-child:nth-last-child(2) ~ li {
  flex: 0 0 calc((100% - 20px) / 2);
}
/* --- 3列にする条件 (3, 5, 6, 7, 9, 15記事の場合) --- */
.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%;/*width: calc((100% - 10px) / 2);*/}
.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;}