@import url(common.css);

/* 共通
-------------------------------------------------------------*/
.content__mainttl{display: block; font-family: "Judson", serif; font-weight: 700; font-size: 4.2rem; color: #5A2F35; line-height: 1.2;}
.content__ttl--sub{display: inline-block; margin: 0 0 3px; font-size: 1.4rem; color: #483C39; letter-spacing: 0.2em;}
.content__center .content__ttl{text-align: center;}
.content__bg--brown{background-color: #F5F2F1;}
.content__bg--white{background-color: #FFF;}
.content__more-box{position: relative;}
.content__more-block{position: absolute; right: 10px; bottom: 0;}
.content__more-link{position: relative; padding: 0 46px 0 0; color: #483C39; font-family: "Judson", serif; font-size: 1.6rem; text-decoration: none;}
.content__more-link:hover{color: #483C39;}
.content__more-link::after{content: ""; position: absolute; width: 20px; height: 20px; background: url(../images/icon/icon_morelink.svg) no-repeat; background-size: 100%; top: 0; right: 18px;}
.content__more-link:hover::after{background: url(../images/icon/icon_morelink_hover.svg) no-repeat; background-size: 100%; width: 20px; height: 20px;}
.content__ttl{margin: 0 0 42px;}

.content__center .splide{margin: 0 0 0 104px;}
.content__center .splide.is-initialized:not(.is-active){margin: 0;}


@media screen and (max-width: 768px) {
    .content__mainttl{font-size: 3.8rem;}
    .content__ttl--sub{letter-spacing: normal; font-weight: bold; font-size: 1.5rem;}
    .content__more-block{position: relative; right: 0; margin: 56px 24px 0 0; text-align: right;}
    .content__more-link{padding: 0 24px 0 0;}
    .content__more-link::after{right: 0;}

    .content__center .splide{margin: 0 0 0 10px;}
}

/* メインビジュアル
-------------------------------------------------------------*/
.topmv{margin: 0 0 104px;}
.topmv__box{width: 100%; margin: 0; background-color: #CCC;}
.topmv__box--img img{width: 100%;}
.topmv .splide__pagination{bottom: -1.5em; gap: 4px;}
.topmv .splide__pagination__page.is-active{background-color: #483C39; opacity: 1; transform: scale(1.2);}

@media screen and (max-width: 768px) {
    .topmv .splide.is-initialized:not(.is-active) .splide__list{padding: 0 !important;}
}

/* セレクション
-------------------------------------------------------------*/
.content__selection{margin: 0 0 112px;}
.content__selection .content__ttl{position: relative; margin: 0; padding: 0 40px;}
.content__selection .content__ttl::after{content: ""; position: absolute; display: block; background-image: url(../images/top/img_selection.png); background-repeat: no-repeat; background-size: 100%; width: 155px; height: 165px; bottom: -60px; left: 40px; z-index: -1;}
.content__selection{gap: 10px;}
.selection__img img{width: 100%; max-width: 347px;}
.selection__item-list{width: 100%;}
.selection__item{flex-shrink: 0;}

.selection__item-list .content{ display: flex; align-items: flex-start; gap: 20px; margin: 40px 0 0; padding: 10px 10px 16px 40px; width: 100%;}

/*　スクロールバーのツマミ部分の色を変えたい時　*/
.simplebar-scrollbar::before {
    background-color: #483C39;
}

/*　スクロールバーのツマミ部分の不透明度とhover時のtransitionを変えたい時　*/
.simplebar-scrollbar.simplebar-visible:before {
opacity: 1;
transition-duration: 0.2s;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar{top: 0; height: 4px;}
.simplebar-track.simplebar-horizontal{height: 4px; background-color: #DFD4D2; border-radius: 7px;}

@media screen and (max-width: 768px) {
    .content__selection.flexbox{flex-direction: column; align-items: center;}
    .content__selection .content__ttl::after{width: 107px; height: 114px; bottom: 0; left: -60px;}
    .content__selection .content__ttl{text-align: center;}

    .simplebar-track.simplebar-horizontal{margin: 0 16px;}
}

/* 新商品
-------------------------------------------------------------*/
.content__new{margin: 0 0 122px;}
.content__new .splide.is-initialized:not(.is-active) .loop__item-block{width: 303px;}
.more__btn{position: relative; display: block; margin: 40px 0 0; font-family: "Judson", serif; font-weight: 700; font-size: 1.6rem; color: #5A2F35; text-decoration: none; text-align: center;}
.more__btn::after{content: ""; position: absolute; background-image: url("../images/icon/icon_accordion.svg"); background-size: 10px; width: 10px; height: 7px; transform: translate(-50%, -50%); top: 50%; right: 40%;}
@media screen and (max-width: 768px) {
    .content__new .splide.is-initialized:not(.is-active) .splide__list{gap: 42px 16px; padding: 0 16px !important; justify-content: flex-start; flex-wrap: wrap;}
    .content__new .splide.is-initialized:not(.is-active) .loop__item-block{width:calc(100%/2 - 8px);}
}

/* ランキング
-------------------------------------------------------------*/
.content__ranking{margin: 0 0 80px;}
.content__ranking .content__ttl--sub{position: relative;}
.content__ranking .content__ttl--sub::before{content: ""; position: absolute; background-image: url(../images/top/icon_ranking.png); background-repeat: no-repeat; background-size: 100%; width: 50px; height: 50px; transform: translate(-50%, -50%); top: -40px; right: -20%;}
.content__ranking .loop__item-block,
.content__ranking .splide.is-initialized:not(.is-active) .item__icon-box{width: 233px;}
.content__ranking .loop__item-img{position: relative;}
.ranking-icon{display: flex; justify-content: center; align-items: center; position: absolute; width: 30px; height: 30px; font-size: 12px; font-weight: bold; background-color: #231815; color: #FFF; border-radius: 50px; z-index: 1;}
#splide__ranking-slide01 .ranking-icon{background-color: #E39904;}
#splide__ranking-slide02 .ranking-icon{background-color: #6F7B85;}
#splide__ranking-slide03 .ranking-icon{background-color: #664B44;}
/* レビュー表示 */
.content__ranking .loop__item-review {
    min-height: 19px;
    margin: 8px 0 0;
}
.content__ranking a.okoe {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 1.3rem;
    text-decoration: none;
    border-bottom: 1px solid #483b3887;
    line-height: 1.4;    
}
.content__ranking a.okoe > div {
    display: inline-flex;
    gap: 2px;
}
.content__ranking a.okoe span {
    color: #FAC900;
    /* font-size: 1.3em; */
    /* line-height: 1; */
}
.content__ranking a.okoe:hover {
    opacity: 0.7;
}
/* レビュー表示 */
@media screen and (max-width: 768px) {
    .content__ranking .content__ttl--sub::before{width: 43px; height: 43px; right: -10%;}
    .content__ranking .splide.is-initialized:not(.is-active) .splide__list{padding-left: 0px !important;}
}

/* レビュー
-------------------------------------------------------------*/
.content__review{padding: 96px 0 112px; box-shadow: inset 0px 0px 10.4px rgba(130, 130, 130, 0.1);}
.content__review .content__ttl{margin: 32px;}
.content__review .content__ttl--sub{position: relative;}
.content__review .content__ttl--sub::before{content: ""; position: absolute; background-image: url(../images/top/img_review.png); background-repeat: no-repeat; background-size: 100%; width: 347px; height: 131px; transform: translate(-50%, -50%); top: 20px; right: 0; left: 30px;}
.content__review .loop__item-inner{display: flex; flex-direction: column; padding: 8px 8px 10px; background-color: #FFF; border-radius: 8px;}
.content__review .splide__slide{display: flex;}
.content__review .splide.is-initialized:not(.is-active) .loop__item-block{width: 200px;}
.content__review .loop__item-ttl{margin: 10px 0 0; font-weight: bold;}
.content__review .item__review-star{margin: 14px 0 0; font-size: 1.5rem; color: #FAC900;}
.item__review-txt{flex-grow: 1; margin: 10px 0 0; line-height: 1.6; font-size: 1.4rem; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}
.content__review .loop__item-link:hover{transition: .3s; opacity: .6;}

@media screen and (max-width: 768px) {
    .content__review .content__ttl--sub::before{width: 296px; height: 109px;}
    .content__review .splide.is-initialized:not(.is-active) .splide__list{padding-left: 0px !important;}
}

/* トピックス
-------------------------------------------------------------*/
.content__topics{padding: 104px 0 118px;}
.content__topics .content__ttl{margin: 32px;}
.content__topics .content__ttl--sub{position: relative; }
.content__topics .content__ttl--sub::after{content: ""; position: absolute; background-image: url(../images/top/img_topics.png); background-repeat: no-repeat; background-size: 100%; width: 114px; height: 150px; transform: translate(-50%, -50%); top: 0; left: 210px;}

.content__topics .loop__item-block{margin: 10px 0; box-shadow: 0px 0px 10.4px rgba(130, 130, 130, 0.1);}
.content__topics .loop__item-inner{padding: 12px; background-color: #FFF;}
.content__topics .flexbox{display: flex; align-items: center; gap: 68px; margin: 10px 0 0;}
.content__topics .loop__item-ttl{margin: 0;}
.content__topics .loop__item-date{font-size: 14px;}
.content__topics .loop__item-img img{max-width: 526px; height: 526px; object-fit: contain;}

.content__topics .splide.is-initialized:not(.is-active) .loop__item-block{width: 550px;}
.content__topics .splide.is-initialized:not(.is-active) .splide__list{flex-wrap: nowrap;}
@media screen and (max-width: 768px) {
    .content__topics .content__ttl--sub::after{width: 104px; height: 138px; left: 140px;}
    .content__topics .splide.is-initialized:not(.is-active) .splide__list{padding: 16px !important;}
    .content__topics .splide.is-initialized:not(.is-active) .loop__item-block{width: 356px;}
    .content__topics .loop__item-img{height: 340px;}
    .content__topics .loop__item-img img{max-width: 100%; height: 100%;}
}

/* 商品を探す
-------------------------------------------------------------*/
.content__products{position: relative; padding: 74px 0 101px; box-shadow: 0px 0px 10.4px rgba(130, 130, 130, 0.1); z-index: 0;}
.content__products .content__ttl--sub{position: relative; }
.content__products .content__ttl--sub::before{content: ""; position: absolute; background-image: url(../images/top/img_products.png); background-repeat: no-repeat; background-size: 100%; width: 117px; height: 130px; transform: translate(-50%, -50%); top: 10px; left: -170px;}

.products__inner{display: flex; align-items: center; flex-wrap: wrap; gap: 57px; position: relative; margin: 64px auto 0; max-width: 1130px; width: 100%; z-index: 1;}
.products__box{width: 90px;}
.products__box-link{text-decoration: none;}
.products__box-ttl{margin: 16px 0 0; font-size: 1.2rem; text-align: center;}
.products__box-img{max-width: 90px; width: 100%;}

@media screen and (max-width: 768px) {
    .content__products .content__ttl--sub::before{width: 101px; height: 112px; left: -110px;}
    .content__products .products__inner{display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); padding: 0 16px 0 40px; gap: 36px; overflow-x: scroll; scrollbar-width: none !important; -ms-overflow-style: none !important;}
    .content__products .products__box{width: 120px; flex-shrink: 0;}
    .content__products .products__box-img{max-width: 120px;}
}

/* 特集
-------------------------------------------------------------*/
.content__feature{padding: 143px 0 103px;}
.content__feature .content__ttl--sub{position: relative; }
.content__feature .content__ttl--sub::after{content: ""; position: absolute; background-image: url(../images/top/img_feature.png); background-repeat: no-repeat; background-size: 100%; width: 125px; height: 127px; transform: translate(-50%, -50%); top: 10px; left: 170px;}

.content__feature .splide.is-initialized:not(.is-active) .splide__list .feature__img img{max-width: 386px; width: 100%;}

@media screen and (max-width: 768px) {
    .content__feature .content__ttl--sub::after{width: 121px; height: 123px; left: 150px;}
    .content__feature .splide.is-initialized:not(.is-active) .splide__list .feature__img img{max-width: 100%; width: 100%;}
    .content__feature .splide.is-initialized:not(.is-active) .splide__list{display: block !important; width: 100%; padding: 0 16px !important;}
}

/* instagram
-------------------------------------------------------------*/
.content__insta{padding: 86px 0 144px;}
.content__insta .content__ttl-icon{margin: 0 auto; width: 26px;}
.content__insta .content__mainttl{margin: 10px 0 0; color: #5A2F35;}
.content__insta .content__subttl{display: block; margin: 20px 0 0; font-size: 1.4rem; font-weight: bold; letter-spacing: 0.2rem; color: #483C39;}
.insta__box{padding: 0 42px;}
.insta__img img{max-width: 260px; width: 100%;}

@media screen and (max-width: 768px) {
    .insta__box{padding: 0;}
    .content__insta .splide.is-initialized:not(.is-active) .insta__box-inner{margin: 0; justify-content: center;}
    .content__insta .splide.is-initialized:not(.is-active) .splide__list{padding: 0 !important;}
}

/* お知らせ
-------------------------------------------------------------*/
.content__news{padding: 86px 0 0;}
.content__news .content__ttl--sub{position: relative; }
.content__news .content__ttl--sub::before{content: ""; position: absolute; background-image: url(../images/top/img_news.png); background-repeat: no-repeat; background-size: 100%; width: 103px; height: 78px; transform: translate(-50%, -50%); top: 30px; left: -110px;}
.news__inner{margin: 60px auto 0; max-width: 980px; width: 100%;}
.news__box-item{display: flex; gap: 56px; margin: 16px 0 0; padding: 0 0 16px; font-size: 1.4rem; border-bottom: 1px solid #D5CBCB;}
.news__box-top{display: flex; gap: 56px;}
.news__box-bottom{flex: 1;}

@media screen and (max-width: 768px) {
    .content__news .content__ttl--sub::before{left: -90px;}
    .news__inner{padding: 0 24px;}
    .news__box-item{flex-direction: column; gap: 8px;}
    .news__box-top{gap: 16px;}
}

/* 採用情報
-------------------------------------------------------------*/
.content__recruit{padding: 144px 0 0;}
.content__recruit .content__ttl--sub{position: relative; }
.content__recruit .content__ttl--sub::before{content: ""; position: absolute; background-image: url(../images/top/img_recruit.png); background-repeat: no-repeat; background-size: 100%; width: 364px; height: 67px; transform: translate(-50%, -50%); top: 30px; left: 40px;}

.recruit__box-inner{margin: 0 auto; max-width: 980px; width: 100%;}
.recruit__box-txt{font-size: 1.6rem; line-height: 2.2; text-align: center;}
.recruit__box-img{margin: 56px auto 0; max-width: 718px; width: 100%;}

@media screen and (max-width: 768px) {
    .content__recruit{margin: 144px 24px 0; padding: 72px 24px 104px; background: #FFF; box-shadow: 0px 0px 10.4px rgba(130, 130, 130, 0.1);}
    .content__recruit .content__ttl--sub::before{width: 300px; height: 61px; left: 35px;}
    .recruit__box{margin: 0;}
    .recruit__box-txt{font-size: 1.5rem; line-height: 1.7;}
    .content__recruit .content__more-block{margin: 56px 0px 0 0;}
}