/*****************************************************

    ヘッダー

*****************************************************/
.hd_txt {
    font-size: 12px;
}
.hd_menu_txt1 {
    font-size: 11px;
}
.hd_menu_txt2 {
    font-size: 13px;
}
#header {
    width: 100%;
    /* position: fixed; */
    top: 0;
    background-color: #fff;
    z-index: 10;
    padding: 0;
}
#header .hd-sp {
    display: none;
}
#header .hd_top {
    height: 93px;
    align-items: center;
}
#header .hd_top .hd-logo {
    width: 316px;
    margin: 0 auto;
}
#header .hd_top .hd_menu_area .hd_menu_top span:first-child {
    padding-right: 1.5em;
    margin-right: 1em;
    border-right: solid 1px var(--main-color);
}
#header .hd_top .hd_menu_area .hd_menu_bottom {
    margin-top: 10px;
    justify-content: center;
}
#header .hd_top .hd_menu_area .hd_menu_bottom .hd_menu_list:nth-child(2) {
    margin: 0 1em;
}
#header .hd_top .hd_menu_area .hd_menu_bottom .hd_menu_list a:before {
    content: "";
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto 5px;
    display: block;
    transition-duration: .3s;
}
#header .hd_top .hd_menu_area .hd_menu_bottom .hd_menu_list a:hover:before {
    transition-duration: .3s;
}
#header .hd_top .hd_menu_area .hd_menu_bottom .shinki a:before {
    background-image: url("../img/common/icon_hd_menu1.svg");
}
#header .hd_top .hd_menu_area .hd_menu_bottom .login a:before {
    background-image: url("../img/common/icon_hd_menu2.svg");
}
#header .hd_top .hd_menu_area .hd_menu_bottom .cart a:before {
    background-image: url("../img/common/icon_hd_menu3.svg");
}
#header .hd_top .hd_menu_area .hd_menu_bottom .shinki a:hover:before {
    background-image: url("../img/common/icon_hd_menu1-hover.svg");
}
#header .hd_top .hd_menu_area .hd_menu_bottom .login a:hover:before {
    background-image: url("../img/common/icon_hd_menu2-hover.svg");
}
#header .hd_top .hd_menu_area .hd_menu_bottom .cart a:hover:before {
    background-image: url("../img/common/icon_hd_menu3-hover.svg");
}
#header .hd_bottom {
    border-top: solid 1px #F1F1F1;
    border-bottom: solid 1px #F1F1F1;
    position: relative;
}
#header .hd_nav {
    align-items: center;
    justify-content: center;
}
#header .hd_nav .hd_nav_list {
    margin-right: 2em;
}
#header .hd_nav .hd_nav_list .list {
    
}
#header .hd_nav .hd_nav_list .list li a {
    font-size: 14px;
    display: block;
}
#header .hd_nav .hd_nav_list .list li > a {
    padding: 14px 0;
}
#header .hd_nav .hd_nav_list .list li > a:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--hover-color);
    display: inline-block;
    margin-right: 0.5em;
}
#header .hd_nav .hd_nav_list .list li .sub_cate {
    width: 100%;
    height: 0;
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    overflow: hidden;
}
#header .hd_nav .hd_nav_list .list li:hover .sub_cate {
    height: auto;
    opacity: 1;
}
#header .hd_nav .hd_search {
    
}
#header .hd_nav .hd_search .searchbox {
    border: solid 1px #E5E5E5;
    border-radius: 3px;
    display: flex;
}
#header .hd_nav .hd_search .searchbox input[type="text"] {
    width: 425px;
    height: 30px;
    padding: 5px;
    font-size: 14px;
    border: none;
    box-sizing: border-box;
}
#header .hd_nav .hd_search .searchbox input[type="submit"] {
    width: 40px;
    height: 30px;
    padding: 0;
    text-indent: -9999px;
    border: none;
    cursor: pointer;
    display: block;
    overflow: hidden;
    background-image: url("../img/common/icon_search.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    background-color: #fff;
}
#header .hd_nav .hd_search .searchbox input[type="submit"]:hover {
    background-image: url("../img/common/icon_search_hover.svg");
}
.hd_menu_list.cart a {
    position: relative;
    display: block;
}
.fs-p-cartItemNumber {
    background: var(--hover-color);
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    line-height: 13px;
    position: absolute;
    right: -2px;
    text-align: center;
    top: -2px;
    opacity: 1;
    width: 18px;
}

/*****************************************************

    トップスライダー

*****************************************************/
.main_slider .slider_sp {
    display: none;
}
.main_slider .slide-dots {
	display: flex !important;
	justify-content: center;
    margin-top: 20px;
}
.main_slider .slide-dots button {
	width: 105px;
	height: 2px;
	color: transparent;
	padding: 0;
	margin: 0 5px;
	border: none;
	background-color: #E5E5E5;
    outline: none;
}
.main_slider .slide-dots .slick-active button {
	background-color: var(--hover-color);
}

/*****************************************************

    もっと楽しむ、ライフスタイル。

*****************************************************/
.main_top {
    position: relative;
    overflow: hidden;
}
.main_top .m-top {
    align-items: center;
    justify-content: center;
}
.main_top .m-top .h1_font {
    margin-bottom: 60px;
    line-height: 1.8;
    letter-spacing: 4.5px;
    position: relative;
}
.main_top .m-top .txt_line {
    background: linear-gradient(transparent 92%, #1a1a1a 0%);
    display: inline;
    padding-bottom: 12px;
}
.main_top .m-top .main_top_titbox {
    margin: 0 1.5%;
}
.main_top .m-top .pict {
    width: 300px;
}

/*****************************************************

    人気ランキング

*****************************************************/
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box {
    position: relative;
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:before {
    width: 35px;
    line-height: 35px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
}.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(1):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(2):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(3):before {
    background-color: #1a1a1a;
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(4):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(5):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(6):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(7):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(8):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(9):before,
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(10):before {
    background-color: #cbcbcb;
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(1):before {
    content: "1";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(2):before {
    content: "2";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(3):before {
    content: "3";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(4):before {
    content: "4";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(5):before {
    content: "5";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(6):before {
    content: "6";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(7):before {
    content: "7";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(8):before {
    content: "8";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(9):before {
    content: "9";
}
.ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:nth-child(10):before {
    content: "10";
}

/*****************************************************

    トップバナーエリア

*****************************************************/
.topbanner_area {
    padding-bottom: 2%;
}
.banner_container {
    justify-content: center;
    flex-wrap: wrap;
}
.banner_container .top_banner {
    width: 30%;
    margin: 0 2.7% 5% 0;
}
.banner_container .top_banner:nth-child(3n) {
    margin-right: 0;
}
.banner_container .top_banner .pict {
    margin-bottom: 15px;
}
.banner_container .top_banner:hover .cms_txt2 {
    color: var(--hover-color);
}

/*****************************************************

    すべてのカテゴリー

*****************************************************/
.category_container {
    margin-top: 40px;
}
.category_container .category_box {
    margin-bottom: 40px;
}
.category_container .category_box:last-child {
    margin-bottom: 0;
}
.category_container .category_box .h3_font {
    font-size: 25px;
    margin-bottom: 10px;
    border-left: solid 5px var(--hover-color);
    padding: 10px 0 10px 20px;
    display: flex;
    align-items: center;
}
.category_container .category_box .h3_font span {
    font-size: 12px;
    margin-left: 1em;
    color: var(--hover-color);
}
.category_container .category_box .category_list {
    flex-wrap: wrap;
}
.category_container .category_box .category_list .category_item {
    width: 18%;
    margin: 0 2.5% 2.5% 0;
}
.category_container .category_box .category_list .category_item:nth-child(5n) {
    margin-right: 0;
}
.category_container .category_box .category_list .category_item .pict {
    margin-bottom: 10px;
}
.category_container .category_box .category_list .category_item .pict img {
    overflow: hidden;
    border: solid 3px transparent;
}
.category_container .category_box .category_list .category_item:hover .pict img {
    border: solid 3px var(--hover-color);
}

/*****************************************************

    お知らせ

*****************************************************/
.news_area {
    padding-left: 90px;
    padding-right: 90px;
    border-top: solid 1px #E5E5E5;
}
.news_area .news_container {
    align-items: center;
}
.news_area .h2_font {
    width: 276px;
    min-width: 276px;
    box-sizing: border-box;
}
.news_area .news_list_area {
    width: 100%;
}
.news_area .news_list_area .fs-pt-list {
    overflow: auto;
    height: 150px;
}
.news_area .news_list_area .fs-p-dateList > li {
    font-size: 14px;
    padding: 0;
    margin-bottom: 20px;
    border: none;
}
.news_area .news_list_area .fs-p-dateList > li:last-child {
    margin-bottom: 0;
}
.news_area .news_list_area .fs-p-dateList > li time:first-child {
    width: 115px;
    min-width: 115px;
    box-sizing: border-box;
    color: var(--hover-color);
    background: none;
    padding: 0;
}

/*****************************************************

    フッター

*****************************************************/
#footer {
    padding: 60px 0;
}
.footer_area {
    align-items: center;
}
.footer_area .footer_left {
    padding-right: 5%;
    border-right: solid 1px #E5E5E5;
}
.footer_area .footer_left,
.footer_area .footer_right {
    width: 50%;
}
.footer_area .footer_left .footer_txtbox {
    margin-bottom: 30px;
}
.footer_area .footer_left .footer_txtbox:last-child {
    margin-bottom: 0;
}
.footer_area .footer_left .footer_txtbox .cms_txt2 {
    margin-bottom: 10px;
}
.footer_area .footer_right {
    padding-left: 5%;
}
.footer_area .footer_right .ft_logo {
    max-width: 316px;
    margin: 0 auto;
}
.footer_area .footer_right .ft_nav_pc .sns_box {
    margin-top: 30px;
    margin-bottom: 30px;
    align-items: center;
}
.ft_contact_area {
    margin-top: 50px;
    justify-content: space-between;
}
.ft_contact_mail_box,
.ft_contact_tel_box {
    width: 48%;
}
.ft_contact_mail_box {
    
}
.ft_mail_btn {
    background-color: #1a1a1a;
    border: solid 1px #1a1a1a;
}
.ft_mail_btn:hover {
    background-color: #fff;
}
.ft_mail_btn a {
    font-size: 15px;
    line-height: 60px;
    color: #fff;
    display: block;
    position: relative;
}
.ft_mail_btn:hover a {
    color: #1a1a1a;
}
.ft_contact_tel_box {
    
}
.ft_contact_tit {
    font-size: 15px;
    margin-bottom: 10px;
}
.ft_tel {
    font-size: 20px;
    margin-bottom: 10px;
}
.ft_tel img {
    margin-right: 5px;
}
.ft_tel_txt {
    font-size: 12px;
}
.footer_area .footer_right .sns_box .pict {
    width: 31px;
    margin-right: 1.2em;
}
.footer_area .footer_right .sns_box .pict:last-child {
    margin-right: 0;
}
.footer_area .footer_right .cms_txt_little span:first-child {
    margin-right: 2em;
}
.footer_area .copyright {
    font-size: 10px;
    margin-top: 30px;
}
.copyright.pc {
    font-size: 12px;
    margin-top: 2em;
}

@media (max-width: 1300px) {
/*****************************************************

    トップスライダー

*****************************************************/
    .main_slider .slick-slide img {
        max-width: 960px;
    }

/*****************************************************

    お知らせ

*****************************************************/
    .news_area .wrap {
        padding: 0;
    }
}

@media (max-width: 1050px) {
/*****************************************************

    ヘッダー

*****************************************************/
    .fs-p-cartItemNumber {
        line-height: 12px;
        right: 2%;
        top: 16%;
        width: 16px;
    }
/*****************************************************

    トップスライダー

*****************************************************/
    .main_slider .slick-slide img {
        max-width: 700px;
    }
}
@media (max-width: 1050px) {
/*****************************************************

    ヘッダー

*****************************************************/
    #header .hd-pc {
        display: none;
    }
    #header .hd-sp {
        display: block;
    }
    .hd_contents {
        height: 100px;
        align-items: center;
        justify-content: center;
        padding: 0 2.7%;
        border-bottom: solid 1px #E5E5E5;
    }
    .hd_contents #menu_btn:before {
        content: "";
        width: 52px;
        height: 35px;
        background-image: url("../img/common/icon_menu.svg");
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
    }
    .hd_contents #menu_btn.active:before {
        background-image: url("../img/common/icon_menu_active.svg");
    }
    .hd_contents .hd-logo {
        width: 35%;
        margin: 0 auto;
    }
    .hd_contents .hd_cart a:before {
        content: "";
        width: 52px;
        height: 35px;
        background-image: url("../img/common/icon_cart.svg");
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
    }
    #header #menu {
        width: 100%;
        height: calc(100% - 100px);
        background-color: #fff;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
        transform: translate(-100%);
        transition: all .5s;
        padding: 30px 2.7%;
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #header #menu.open {
        transform: translate(0);
    }
    #header #menu .menu_box {
        margin-top: 3em;
    }
    #header #menu .menu_box:first-child {
        margin-top: 0;
    }
    #header #menu .top_menu {
        justify-content: space-between;
    }
    #header #menu .top_menu .top_menu_item {
        width: 35%;
    }
    #header #menu .top_menu .top_menu_item a:before {
        content: "";
        width: 45px;
        height: 45px;
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        margin: 0 auto 5px;
    }
    #header #menu .top_menu .shinki a:before {
        background-image: url("../img/common/icon_hd_menu1_sp.svg");
    }
    #header #menu .top_menu .login a:before {
        background-image: url("../img/common/icon_hd_menu2_sp.svg");
    }
    #header #menu .top_menu .pay a:before {
        background-image: url("../img/common/icon_hd_menu3_sp.svg");
    }
    #header #menu .menu_box .menu_tit {
        font-size: 25px;
    }
    #header #menu .menu_box .nav_list_container {
        margin-top: 40px;
    }
    #header #menu .menu_box .nav_list {
        font-size: 18px;
        padding: 10px;
        border-bottom: solid 1px #E5E5E5;
    }
    #header #menu .menu_box .nav_list:first-child {
        border-top: solid 1px #E5E5E5;
    }
    #header #menu .menu_box .search_box {
        margin-top: 15px;
    }
    #header #menu .menu_box .search_box .searchbox {
        border: solid 1px #E5E5E5;
        border-radius: 3px;
        display: flex;
    }
    #header #menu .menu_box .search_box .searchbox input[type="text"] {
        width: 100%;
        height: 43px;
        padding: 5px;
        font-size: 12px;
        border: none;
        box-sizing: border-box;
    }
    #header #menu .menu_box .search_box .searchbox input[type="submit"] {
        width: 50px;
        height: 43px;
        padding: 0;
        text-indent: -9999px;
        border: none;
        cursor: pointer;
        display: block;
        overflow: hidden;
        background-image: url(../img/common/icon_search.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        background-color: #fff;
    }

/*****************************************************

    すべてのカテゴリー

*****************************************************/
    .category_container .category_box .category_list .category_item {
        width: 48.5%;
    }
    .category_container .category_box .category_list .category_item:nth-child(5n) {
        margin: 0 2.5% 2.5% 0;
    }
    .category_container .category_box .category_list .category_item:nth-child(2n) {
        margin-right: 0;
    }

/*****************************************************

    お知らせ

*****************************************************/
    .news_area {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (max-width: 750px) {
/*****************************************************

    ヘッダー

*****************************************************/
    .hd_contents {
        height: 60px;
    }
    .hd_contents #menu_btn,
    .hd_contents .hd_cart a {
        font-size: 10px;
        display: block;
        position: relative;
        top: 2px;
    }
    .hd_contents #menu_btn:before,
    .hd_contents .hd_cart a:before {
        width: 35px;
        height: 25px;
    }
    #header #menu {
        height: calc(100% - 60px);
    }
    #header #menu .top_menu {
       /* padding: 0 20px;*/
    }
    #header #menu .top_menu .top_menu_item a {
        font-size: 11px;
    }
    #header #menu .top_menu .top_menu_item a:before {
        width: 30px;
        height: 30px;
    }
    #header #menu .menu_box .menu_tit {
        font-size: 24px;
    }
    #header #menu .menu_box .nav_list_container {
        margin-top: 20px;
    }
    #header #menu .menu_box .nav_list {
        font-size: 14px;
    }

/*****************************************************

    トップスライダー

*****************************************************/
    .main_slider .slick-slide img {
        max-width: 480px;
    }
    .main_slider .slide-dots button {
        width: 55px;
    }

/*****************************************************

    もっと楽しむ、ライフスタイル。

*****************************************************/
    .main_top {
        padding-bottom: 60px;
    }
    .main_top .m-top .h1_font {
        line-height: 2.2;
        margin-bottom: 40px;
    }
    .main_top .m-top .pict {
        display: none;
    }
    .main_top .back_img1 {
        width: 20%;
        position: absolute;
        top: 0;
        left: -3%;
    }
    .main_top .back_img2 {
        width: 20%;
        position: absolute;
        top: 0;
        right: 0;
    }
    .main_top .back_img3 {
        display: none;
    }
    .main_top .back_img4 {
        display: none;
    }

/*****************************************************

    人気ランキング

*****************************************************/
    .ranking_area .product_loop_area .product_loop_item .purodakuto_item_box:before {
        width: 32px;
        height: 32px;
    }

/*****************************************************

    すべてのカテゴリー

*****************************************************/
    .category_container {
        margin-top: 20px;
    }
    .category_container .category_box {
        margin-bottom: 20px;
    }
    .category_container .category_box .h3_font {
        font-size: 20px;
    }
    .category_container .category_box:last-child {
        margin-bottom: 0;
    }
    
/*****************************************************

    トップバナーエリア

*****************************************************/
    .topbanner_area {
        padding-bottom: 60px;
    }
    .banner_container {
        display: block;
    }
    .banner_container .top_banner {
        width: 100%;
        margin: 0 0 30px 0;
    }
    .banner_container .top_banner:nth-child(3n) {
        margin: 0 0 30px 0;
    }
    .banner_container .top_banner:last-child {
        margin-bottom: 0;
    }

/*****************************************************

    お知らせ

*****************************************************/
    .news_area {
        padding-left: 2.7%;
        padding-right: 2.7%;
    }
    .news_area .news_container {
        display: block;
    }
    .news_area .h2_font {
        width: 100%;
        min-width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    .news_area .news_list_area .fs-p-dateList > li {
        font-size: 12px;
    }
    .news_area .news_list_area .fs-p-dateList > li time:first-child {
        display: block;
        width: 100%;
        min-width: 100%;
        margin-bottom: 5px;
    }
    .news_area .news_list_area .news_list a {
        display: block;
    }
    .news_area .news_list_area .news_list .news_data {
        width: 100%;
        min-width: 100%;
        margin-bottom: 5px;
    }

/*****************************************************

    フッター

*****************************************************/
    .footer_area .footer_left {
        display: none;
    }
    .footer_area .footer_right {
        width: 100%;
        padding-left: 0;
        text-align: center;
    }
    .footer_area .footer_right .ft_logo {
        max-width: 70%;
        margin: 0 auto;
    }
    .ft_mail_btn {
        max-width: 60%;
        margin: 30px auto 0;
    }
    .ft_tel {
        margin-top: 30px;
        margin-bottom: 0;
    }
    .ft_tel a {
        color: #1a1a1a;
    }
    .footer_area .footer_right .sns_box {
        margin: 20px 0 30px;
        justify-content: center;
    }
}

@media (max-width: 550px) {
/*****************************************************

    ヘッダー

*****************************************************/
    .hd_contents .hd-logo {
        width: 50%;
    }

/*****************************************************

    トップスライダー

*****************************************************/
    .main_slider .slider_pc {
        display: none;
    }
    .main_slider .slider_sp {
        display: block;
    }
    .main_slider .slick-slide img {
        max-width: 100%;
    }
}