@charset "utf-8";

/*
body {
	background: url(/top.png) top left no-repeat;
}

.container {
	opacity: .7;
}
*/


/* メインビジュアル */

.main_visual {
    display: flex;
    flex-direction: row-reverse;
}

.main_visual_text {
    width: 50%;
    background: #F0EBE1;
    color: #414141;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
}

.main_visual_head {
    font-family: "Noto Sans JP";
    max-width: 724px;
    font-size: 4.0rem;
    line-height: 56px;
    text-align: center;
    margin: 0 auto 28px;
}

.main_visual_head::after {
    display: block;
    margin: 30px auto 0;
    width: 64px;
    height: 2px;
    background: #707070;
    content: '';
}

.main_visual_read {
    max-width: 724px;
    margin: 0 auto;
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 2.4rem;
    text-align: center;
    color: #414141;
}

.main_visual_area {
    overflow: hidden;
    width: 50%;
    position: relative;
    background: #F0EBE1;
    display: flex;
    align-items: center;
}

.main_visual_area .slick-dots {
    bottom: 20px;
}

.main_visual_area {
    margin-bottom: 0 !important;
}

.main_visual_area .slick-dots li {
    width: 80px;
}

.main_visual_area .slick-dots li button {
    width: 80px;
}

.main_visual_area .slick-dots li button:before {
    display: block;
    content: '';
    width: 80px;
    height: 6px;
    background: #A8A8A8;
    cursor: url('../img/common/cursor_on.svg') 8 8, auto;
    opacity: 1 !important;
}

.main_visual_area .slick-dots li.slick-active button:before {
    background: #fff;
}


/* Common */

h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 2.4rem;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    color: #414141;
}

.more_area {
    height: 14px;
    margin: 0;
}

.more_area a {
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    color: #121212;
    line-height: 14px;
    height: 14px;
}

.more_area a::after {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 0.5em;
    font-size: 12px;
}

.more_area_sp {
    display: none;
}


/* SLIDER Common */

.slider_area {
    position: relative;
}

.slider_area>ul {
    width: 94.5%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.slider_area li {
    margin: 0 12px;
}

.slider_area li>div {
    /* aspect-ratio: 1; */
    width: 100%;
    height: 100%;
}

.slider_area li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slider_area .slick-prev {
    left: -10px;
}

.slider_area .slick-next {
    right: -10px;
}

.slider_area .slick-prev:before,
.slider_area .slick-next:before {
    height: 17px;
}

.slider_area .slick-prev,
.slider_area .slick-next {
    top: 40%;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: 1;
    z-index: 9;
}

.slick-prev:before,
.slick-next:before {
    content: '' !important;
    display: block;
    width: 100%;
}

.slick-prev:before {
    background: url(../img/common/btn_prev.png) left center/contain no-repeat;
}

.slick-next:before {
    background: url(../img/common/btn_next.png) right center/contain no-repeat;
}

.slick-slide>div>p:first-of-type {
    margin: 15px 0 0;
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
    font-size: 1.4rem;
    text-align: left;
    color: #121212;
    margin-bottom: 4px;
}

.slick-slide>div>p:last-of-type {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
    font-size: 1.1rem;
    text-align: left;
    color: #5e5f60;
}


/* SEASONAL PRODUCTS */

.season_recommend {
    background: #FAF8F4;
}

.season_recommend_in_content_title>h3::after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    background: #707070;
    margin: 12px auto;
}

.season_recommend_in {
    width: 88.5%;
    margin: 0 auto;
    padding: 90px 0 0;
    border-bottom: 1px solid #A8A8A8;
}

.season_recommend_in_content {
    border-bottom: none;
    padding: 0 0 118px;
}

.season_recommend_in_content_title {
    margin: 0 0 45px;
}


/* SEASONAL PRODUCTS -スライダー*/

.season_recommend_in_content_info_more ul {
    width: 100%;
}

.season_recommend_in_content_info_more ul li {
    margin: 0 13px;
}

.season_recommend_in_content_info_more .slick-prev {
    left: -20px;
}

.season_recommend_in_content_info_more .slick-next {
    right: -20px;
}

.season_recommend_in_content_info_more .slick-prev:before,
.season_recommend_in_content_info_more .slick-next:before {
    height: 25px;
}

.season_recommend_in_content_info_more .slick-prev,
.season_recommend_in_content_info_more .slick-next {
    top: 43%;
    height: 25px;
}


/* SEASONAL PRODUCTS more*/

.season_recommend_in_content_more {
    margin-top: 40px;
}

.season_recommend_in_content_more a {
    display: block;
    background: #121212;
    color: #FFF;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 220px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-align: center;
    color: #fff;
}

.season_recommend_in_content_more a::after {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 0.5em;
    font-size: 1.2rem;
}

.season_recommend_in_content_more a:hover {
    opacity: .6;
}


/* YOU MAY ALSO LIKE, POPULAR */

.recommend,
.popular {
    background: #FAF8F4;
}

.recommend_in,
.popular_in {
    width: 68.7%;
    margin: 0 auto;
    padding-top: 108px;
    padding-bottom: 96px;
}

.recommend_in {
    border-bottom: 1px solid #A8A8A8;
}

.recommend_in_content_title,
.popular_in_content_title {
    margin: 0 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: top;
}

.banner {
    /* max-width: 1230px; */
    width: 68.7%;
    margin: 120px auto 0;
}

.banner_sp {
    display: none;
}


/* カテゴリー */

.category {
    background: #FFF;
}

.category_in {
    width: 68.7%;
    margin: 0 auto 0;
    padding-top: 135px;
}

.category_in_content {
    padding-bottom: 97px;
}

.category_in_content:not(:last-child) {
    border-bottom: 1px solid #A8A8A8;
    margin-bottom: 108px;
}

.category_in_content_title {
    margin: 0 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: top;
}


/* SP
------------------------------- */

@media screen and (max-width: 1024px) {
    /* メインビジュアル */
    .main_visual {
        flex-direction: column;
    }
    .main_visual_area {
        width: 100%;
    }
    .main_visual_text {
        width: 100%;
        padding: 0;
    }
    .main_visual_head {
        max-width: none;
        line-height: 28px;
        font-weight: bold;
        font-size: 18px;
        margin-top: 40px;
        padding: 0 80px;
    }
    .main_visual_read {
        max-width: none;
        font-size: 10px;
        line-height: 2.0rem;
        text-align: left;
        margin-bottom: 40px;
        padding: 0 30px;
    }
}

@media screen and (max-width: 750px) {
    /* Common */
    h3 {
        font-size: 2.0rem;
    }
    .slick-slide>div>p:first-of-type {
        font-weight: bold;
    }
    .more_area {
        display: none;
    }
    .more_area_sp {
        display: block;
        text-align: center;
        height: auto;
        margin-top: 20px;
        font-family: "Noto Sans JP";
        font-weight: normal;
        font-size: 14px;
        color: #121212;
    }
    .more_area_sp a::after {
        content: "\f0da";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-left: 0.5em;
        font-size: 12px;
    }
    /* SLIDER Common */
    .slider_area .slick-prev {
        left: -10px;
    }
    .slider_area .slick-next {
        right: -10px;
    }
    /* SEASONAL PRODUCTS */
    .season_recommend_in {
        padding: 60px 0 0;
    }
    .season_recommend_in_content {
        padding: 0 0 60px;
        /* border-bottom: 1px solid #A8A8A8; */
    }
    /* SEASONAL PRODUCTS more*/
    .season_recommend_in_content_more {
        margin-top: 40px;
    }
    /* YOU MAY ALSO LIKE, POPULAR */
    .recommend_in_content_title,
    .popular_in_content_title {
        color: #5E5E5E;
    }
    .recommend_in,
    .popular_in {
        width: 90%;
        padding: 60px 0;
    }
    .recommend_in {
        border-bottom: 1px solid #A8A8A8;
    }
    .banner_sp {
        display: block;
    }
    .banner_pc {
        display: none;
    }
    .banner {
        width: 100%;
        margin: 0;
    }
    /* カテゴリー */
    .category_in {
        width: 90%;
        padding-top: 60px;
    }
    .category .category_in_content {
        padding-bottom: 60px;
    }
}