@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{gap:28px;}  
.deliveredLists > a{width: calc((100% - 56px) / 3);}
}
@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: 2.5rem;}
.rankingList p{text-align: center;font-size: 2.0rem;}
@media only screen and (min-width:813px) {
.rankingList li{width: calc((100% - 80px) / 3);}
}
@media only screen and (max-width:812px){
.rankingList{gap:20px;}
.rankingList li{width: calc((100% - 40px) / 3);}
}
#onlineShop{
padding: 50px 4%; background-color: #F4F4F4;
}
.onlineItemList{max-width: 1080px; margin: 0 auto;}
.onlineItemList li dt span{background-color: #ADABAC; 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 4px;}}
.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 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
}
.onlineItemList{display: flex;
flex-wrap: wrap;
gap:25px 20px;
}
.onlineItemList li{width: calc((100% - 20px) / 2);}
@media only screen and (min-width:813px) {
.onlineItemList li a{display: flex;gap:20px;}
.onlineItemList li dl{width: calc(100% - 183px);}
}
@media only screen and (max-width:812px){
.onlineItemList figure{position: relative;
overflow: hidden;
width:100%; margin-bottom: 10px;}
.onlineItemList li dd h3{font-size: 1.6rem;}
}
#Blog{padding: 50px 4%;}
#Blog .btn_m{
display:inline-block;
background-color: #adabac;
text-align: center;
color: #fff;
font-size: 1.5rem;
padding: 10px 20px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
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{width: 100%; height: 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: 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){}
#review{padding: 50px 4% 100px 4%;}
.reviewBox{overflow-y: scroll;
height: 430px;
max-width: 1080px;
margin: 0 auto 80px;
margin-bottom: 0px;}
.faqList{width:100%; max-width:840px; margin:0 auto; border-top: solid 1px #4f4844;}
.faqList:not(:last-child){margin-bottom:40px;}
.faqList dl{border-bottom:dashed 1px #4f4844;}
.faqList dt{padding: 20px 36px 20px 2rem; position: relative;}
.faqList dt::before{content: "Q. ";position: absolute; left:0;}
.faqList dt::after{
width:34px;
height: 34px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.499998%2017C0.499998%207.8873%207.8873%200.500002%2017%200.500002C26.1127%200.500003%2033.5%207.8873%2033.5%2017C33.5%2026.1127%2026.1127%2033.5%2017%2033.5C7.8873%2033.5%200.499997%2026.1127%200.499998%2017Z%22%20stroke%3D%22black%22%2F%3E%3Cpath%20d%3D%22M11%2021L17%2013L23%2021%22%20stroke%3D%22black%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
display: block;
content: "";
position: absolute; top:50%; right:0;
margin-top: -20px;
}
.faqBox > div{margin-top:20px;}
.faqList dt.fa-plus-square::after{
transform:rotate(180deg);
}
.faqList dd{display: none; padding-bottom:20px;}
@media only screen and (min-width:813px){
.faqBox{padding:100px 80px;}
.faqBox > div{display: flex; flex-wrap: wrap; align-items: baseline;}
.faqBox > div .faq_title{order: 1; flex: 1;}
.faqBox > div .faqList{order: 3;width:100%;}
.faqBox > div .btn_more{order: 2; width:100px;}
}
@media only screen and (min-width:813px){
}
@media only screen and (max-width:812px){
}
#aboutus .wap04 > div:not(:last-of-type){margin-bottom: 40px;}
#faq{padding: 100px 4%; background-color:#000000; color: #fff; }
#faq h2{color: #fff;}
#aboutus .wap04 > div .imgBox{display: flex; gap:22px;}
#aboutus .wap04 > div .imgBox figure{width: calc((100% - 22px) / 2);}
#aboutus .wap04 > div .imgBox figure img{width:100%; height: auto;}
#aboutus .wap04 > div h3{font-size: 2.0rem;font-family: "Zen Old Mincho", serif;  font-weight: 400; margin-bottom: 10px;}
@media only screen and (min-width:813px){
#aboutus{padding: 100px 4%;}
#aboutus .wap04 > div{display: flex; justify-content: space-between; gap: 40px;}
#aboutus .wap04 > div .leftBox{width: calc((100% - 22px) / 2);}
#aboutus .wap04 > div .imgBox{width: calc((100% - 40px) / 2);}
}
@media only screen and (max-width:812px){
#aboutus{padding: 60px 4%;}
#aboutus .wap04 > div .leftBox{margin-bottom: 15px;}
}
.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}
#otodoke{
padding: 60px 4%;
background-color:#000000;
color: #fff;
}
#otodoke h2{text-align: center;font-size: 2.0rem;}
#otodoke .otodoke_time{font-size: 2.0rem; text-align: center;}
#otodoke .otodoke_time span{font-size:6.0rem; font-weight: 700;}
.reviewList{max-width: 1080px !important; margin: 0 auto;}
.free{font-size: 1.6rem;}
@media only screen and (min-width:813px){
.top_text{padding: 100px 4%; font-size: 2.0rem; text-align: center;}
}
@media only screen and (max-width:812px){
#otodoke{ padding: 60px 4%;}
#otodoke .otodoke_time span{font-size: 4.0rem;}
.top_text{ padding: 20px 4% 60px; font-size: 1.8rem;}
.top_text img{margin:0 auto; display: block;}
}