/* z-index 

.header .header_bottom 500
#bg_popup 600
.sp_ft_bt
*/

/* ----------------------------------------- */
/* header
/* ----------------------------------------- */
.header{ background-color:#808080;}
.header.other{ margin-bottom:100px; }
.header .header_upper{ width:100%;margin:0 auto;padding:1.1%;position:relative; }
.header .header_upper .header_ttl{width:80%;max-width:250px;margin:0 auto; }
.header .header_bottom{ width:100%;position:absolute;z-index:500;background-color:rgba(255, 255, 255, 0.56);  }
.header .header_bottom .nav{ width:100%; }
.header .header_bottom .nav .nav_lists{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:15px 1.4%;max-width:560px;margin:0 auto; }
.header .header_bottom .nav .nav_lists .nav_list{ -webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1; }

.hamburger-btn{ display:none; }
.hamburger-btn_parts{ display:block;width:100%;height:2px;background-color:#fff;position:absolute;-webkit-transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, -webkit-transform 0.5s;transition:transform 0.5s, opacity 0.5s;transition:transform 0.5s, opacity 0.5s, -webkit-transform 0.5s; }
.hamburger-btn_parts.-top{ top:0; }
.hamburger-btn_parts.-middle{ top:0;bottom:0;margin:auto; }
.hamburger-btn_parts.-bottom{ bottom:0; }
.hamburger-btn.active .hamburger-btn_parts.-top{ -webkit-transform:translateY(10px) rotate(-45deg);transform:translateY(13px) rotate(-45deg);background-color:#333; }
.hamburger-btn.active .hamburger-btn_parts.-middle{ opacity:0; }
.hamburger-btn.active .hamburger-btn_parts.-bottom{ -webkit-transform:translateY(-4px) rotate(45deg);transform:translateY(-4px) rotate(45deg);background-color:#333; }
.hamburger{ display:none; }
.hamburger.active{ -webkit-transform:translateX(0);transform:translateX(0); }

@media screen and (max-width:767px){
    .header{ position:fixed;width:100%;z-index:999; }
    .header.other{ margin-bottom:40px; }
    .header .header_upper{ padding:3.1%; }
    .header_inner .header_ttl{ width:33%;max-width:210px; } 
    .nav{ display:none; }
    .hamburger-btn{ display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);width:25px;height:16px;margin-right:4vw;z-index:100;cursor:pointer;width:30px;height:20px; }
    .hamburger{display:block;position:fixed;z-index:80;top:0;right:0;width:100vw;height:100vh;-webkit-transform:translateX(100vw);transform:translateX(100vw);-webkit-transition:all 0.5s;transition:all 0.5s;background-color:rgba(225, 225, 225, 0.9); }
    .hamburger_lists{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100vw;height:100vh; }
    .hamburger_list{ text-align:center; }
    .hamburger_list a{ color:#333;font-size:20px; }
    .hamburger_list + .hamburger_list{ padding-top:50px; }
    .hamburger_link{ text-decoration:none;color:white; } 
}

@media screen and (max-width:575px){
    .header_inner .header_ttl{ width:40%; } 
}

/* --------------------------------------------------------
トップページ
--------------------------------------------------------*/
#home section.top{ overflow:hidden; }
#home .top_blocks{ margin-bottom:3%; }
#home .top_blocks .block_wrap{ display:-webkit-box;display:-ms-flexbox;display:flex; }
#home .top_blocks .block_wrap.upper .block{ width:calc((100% - 8%)/3);margin-right:4%;margin-bottom:2.3%; }
#home .top_blocks .block_wrap.bottom{ -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; }
#home .top_blocks .block_wrap.bottom .youtube{ width:48%;position:relative; }
#home .top_blocks .block_wrap.bottom .youtube iframe{ position:absolute;top:0;right:0;width:100%;height:100%; }
#home .top_blocks .block_wrap.bottom .bnr{ width:48%; }
#home .top_blocks .block_wrap .block:last-of-type{ margin-right:0; }
.slick-arrow{ cursor:pointer; }
/* .slick-slider.slick-initialized{ opacity:1; } */
/* .rec-slider{ display:none; } */
/* .rec-slider.slick-initialized{ display:block; } */

.footer{ margin-top:100px; }
.footer .sp_ft_bt{ display:none; }
.footer .nav_wrap{ background:url(../img/img_footer.png)no-repeat center center/cover; }
.footer .nav_wrap .nav{ padding:150px 0;max-width:600px;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; }
.footer .nav_wrap .nav li a{ color:#fff; }
.footer .comp_info_wrap{ text-align:center;padding:10px 0;background-color:#999; }

/* ----------------------------------------- */
/* 各ページ
/* ----------------------------------------- */
.sec .wrap{ padding:70px 0; }
.sec_header{ border-bottom:6px solid #e0d600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:2.5%; }
.sec_header p{ font-family:'Noto Serif Display', serif;letter-spacing:0.5px;font-size:120%; }
.sec_header .ttl_page{ background-color:#e0d600;color:#fff;width:230px;text-align:center;position:relative;padding:10px 0 6px 8px;white-space:nowrap; }
.sec_header .ttl_page::after{ content:'';background:url('../img/img_ttl_label.png') no-repeat center center/cover;width:40px;height:30px;position:absolute;right:-40px;bottom:0; }
.sec_header .ttl_cat{ color:#e0d600;margin-top:auto;margin-bottom:6px;width:200px;text-align:center;white-space:nowrap; }
.img_slider .cont .title{ text-align:center;display:block; }
.arrow_s{ width:auto;height:30px; }
.bt_all{ background-color:#e0d600;display:block;margin:0 auto;text-align:center;width:200px;font-family:'Noto Serif Display', serif;font-size:120%;padding:1% 0; }
#recommend .slick-slider, #stock .slick-slider{ margin-bottom:9%;margin-top:4%; }
.pdt_img{ object-fit:cover;width:100%; }
.rec_slider .cont span{ display:block;width:100%;text-align:center;margin-top:12%; }
.arrow_prev{ position:absolute;z-index:1;left:0;top:50%;transform:translateY(-50%);width:40px;margin-right:auto;margin-left:auto; }
.arrow_next{ position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);width:40px;margin-right:auto;margin-left:auto; }

.in_stock{ cursor:pointer; }
.in_stock:hover{ opacity:0.8;transition:all .3s; }
.in_stock.cont{ margin-right:20px;margin-left:20px; }
.in_stock.cont .title{ text-align:center;margin-top:14%; }
.in_stock.cont .info{ display:none; }

#bg_popup{ background-color:rgba(0, 0, 0, 0.7);position:fixed;top:0;left:0;width:100%;height:100%;z-index:600;display:none; }
#bg_popup .inner{ width:80%;max-width:410px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000;padding:10px;padding-bottom:55px; }
#bg_popup .inner #cls_pop{ position:absolute;right:-11px;top:-11px;width:22px;z-index:850; }
#bg_popup .inner .pop{ background-color:#000; }
#bg_popup .inner #pop_detail{ margin-top:10px; }
#bg_popup .inner #pop_detail .detail{ margin-top:3%;line-height:140%; }
#bg_popup .inner #pop_detail p{ color:#fff; }

.detail .cont_wrap{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; }
.detail .cont_wrap .left{ width:40%; }
.detail .cont_wrap .left .lg_img{ margin-bottom:5px; }
.detail .cont_wrap .left .lg_img img{ width:100%;object-fit:contain; }
.detail .cont_wrap .left .imgs_wrap{ display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around; }
.detail .cont_wrap .left .imgs_wrap img{ width:30%;transition-property:opacity;transition-duration:.3s;object-fit:contain;cursor:pointer; }
.detail .cont_wrap .left .imgs_wrap img:hover{ opacity:0.7; }
.detail .cont_wrap .left .note{ margin-top:16px;font-size:13px;display:block; }
.detail .cont_wrap .right{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:auto;width:55%; }
.detail .cont_wrap .right .block:first-of-type{ margin-bottom:5%; }
.detail .cont_wrap .right .block:last-of-type{ border-bottom:2px solid #333;padding-bottom:10px; }
.block p{ line-height:26px; }
.block p span{ display:inline-block; }
.block .detail p{ font-size:14px; }
.block .ttl{ border-bottom:2px solid #333;margin-bottom:10px;padding-bottom:7px; }
.block .note{ margin-top:25px;font-size:14px; }
.block .icon{ margin-top:10px;display:block; }
.block .icon i{ font-size:26px; }

#about .cont_wrap{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; }
#about .cont_wrap .left{ width:48%; }
#about .cont_wrap .left .lg_img{ margin-bottom:1.8%; }
#about .cont_wrap .left .imgs_wrap.sp{ display:none; }
#about .cont_wrap .left .imgs_wrap{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; }
#about .cont_wrap .left .imgs_wrap img{ width:49%; }
#about .cont_wrap .right{ width:48%;margin-right:1%; }
#about .cont_wrap .right .block:first-of-type{ margin-bottom:4%; }
#about .cont_wrap .imgs_wrap.sp{ display:none; }

#access .cont_wrap{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:97%;margin-left:auto;margin-right:auto; }
#access .cont_wrap .left{ width:44%; }
#access .cont_wrap .right{ width:52%; }
.gmap{ height:0;overflow:hidden;padding-bottom:25%;position:relative; }
.gmap iframe{ position:absolute;left:0;right:0;height:100%;width:100%; }

/* ----------------------------------------- */
/* カテゴリページ
/* ----------------------------------------- */
.category_page .wrap .multi_col{ display:-webkit-box;display:-ms-flexbox;display:flex;width:95%;margin:0 auto; }
.category_page .wrap .multi_col .main_col{ display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 16px;width:calc(100% - 200px); }
.category_page .wrap .multi_col .main_col.rec_col .cont{ display:block;width:calc((100% - 16%)/3 );margin-right:8%;margin-bottom:6%; }
.category_page .wrap .multi_col .main_col.rec_col .cont:nth-of-type(3n){ margin-right:0; }
.category_page .wrap .multi_col .main_col.instock_col .cont{ display:block;width:calc((100% - 15%)/4 );margin:0;margin-right:5%;margin-bottom:4%; }
.category_page .wrap .multi_col .main_col.instock_col .cont:nth-of-type(4n){ margin-right:0; }
.category_page .wrap .multi_col .main_col .cont .name{ text-align:center;display:block;margin-top:8%; }
.category_page .wrap .multi_col .side_col{ border-left:1px solid #333333;padding-left:20px;padding-top:40px; }
.category_page .wrap .multi_col .side_col .cat_s_name{ color:#e0d600;position:relative;padding-left:24px;display:block;margin-bottom:10px; }
.category_page .wrap .multi_col .side_col .cat_s_name::before{ content:"";background-color:#e0d600;width:14px;height:14px;position:absolute;left:0;top:50%;transform:translateY(-50%); }
.side_col.sp{ display:none; }
.cat_s_name{ font-family:'Noto Serif Display', serif; }
.p_no_found{ text-align:center;margin:200px 0; }
.p_no_found p{ font-size:120%;margin-bottom:10%; }
.p_no_found a{ font-size:100%;color:#999; }

@media screen and (max-width:767px){
    .sec .wrap{ padding:40px 0; }
    .sec_header p{ font-size:100%; }
    .sec_header .ttl_page{ width:200px; }
    .sec_header .ttl_cat{ width:auto; }
    .bt_all{ padding:2% 0; }
    .single_page .article_img img{ width:100%;height:40vh;object-fit:cover; }
    .category_page .wrap .multi_col .main_col{ padding:0 30px; }
    .category_page .wrap .multi_col .main_col.instock_col .cont{ width:calc((100% - 12%)/2 );margin-right:12%;margin-bottom:10%; }
    .category_page .wrap .multi_col .main_col.instock_col .cont:nth-of-type(2n){ margin-right:0; }
    .category_page .wrap .multi_col .main_col.rec_col .cont{ width:100%;max-width:320px;margin-right:auto;margin-left:auto;margin-bottom:16%; }
    .category_page .wrap .multi_col .main_col.rec_col .cont:nth-of-type(3n){ margin-right:auto; }
    .footer .nav_wrap .nav{ -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center;padding:70px 0; }
    .footer .nav_wrap .nav li{ margin-bottom:40px; }
    .footer .nav_wrap .nav li:last-of-type{ margin-bottom:0; }

    .detail .cont_wrap{ -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column; }
    .detail .cont_wrap .left{ width:100%;max-width:500px;margin-left:auto;margin-right:auto;margin-top:8%; }
    .detail .cont_wrap .right{ width:100%;margin-top:10%; }
    .in_stock.cont .title{ margin-top:10%; }
    #about .cont_wrap{ -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column; }
    #about .cont_wrap .left{ width:100%; }
    #about .cont_wrap .left .imgs_wrap{ display:-webkit-box;display:-ms-flexbox;display:flex; }
    #about .cont_wrap .left .imgs_wrap.pc{ display:none; }
    #about .cont_wrap .right{ width:100%; }
    #about .cont_wrap .right .imgs_wrap.sp{ display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; }
    #about .cont_wrap .right .imgs_wrap.sp img{ width:49%; }
    #about .cont_wrap .right .block:first-of-type{ margin-bottom:6%; }
    #about .cont_wrap .right .block:last-of-type{ margin-top:10px; }
    
    #access .cont_wrap{ -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column; }
    #access .cont_wrap .left{ width:100%; }
    #access .cont_wrap .right{ width:100%;margin-top:40px; }
    .gmap{ padding-bottom:47%; }
}

@media screen and (max-width:575px){
    .sec .wrap{ padding:32px 0; }
    .sec_header .ttl_page{ width:170px;padding:5px 0 2px 8px; }
    .sec_header .ttl_page::after{ width:29px;height:21px;right:-28px; }
    .sec_header .ttl_cat{ margin-bottom:2px;margin-right:3px; }
    .sec_header p{ font-size:90%; }
    .bt_all{ padding:3% 0; }
    #recommend, #stock{ padding:30px 0; }
    #stock{ padding-bottom:30; }
    #recommend .slick-slider{ margin-top:14%;margin-bottom:14%; }
    #stock .slick-slider{ margin-top:23%;margin-bottom:23%; }
    .category_page .wrap .multi_col .main_col{ width:100%; }
    .single_wrap{ width:95%;margin:0 auto; }
    .side_col.pc{ display:none; }
    .side_col.sp{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:1px solid #333;margin-bottom:10%;margin-top:5%; }
    .side_col.sp .cat_s_name{ color:#e0d600;position:relative;padding-left:24px;display:block;margin-bottom:4%; }
    .side_col.sp .cat_s_name::before{ content:"";background-color:#e0d600;width:14px;height:14px;position:absolute;left:0;top:50%;transform:translateY(-50%); }
    .footer{ margin-top:20px; }
    .footer .sp_ft_bt{ display:block;position:fixed;width:100%;bottom:0;box-shadow:0 7px 23px -7px;transform:translateY(100px);transition:all .5s; }
    .footer .sp_ft_bt.show{ transform:translateY(0);transition:all .5s;z-index:2; }
    .footer .sp_ft_bt .inner{ display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; }
    .footer .sp_ft_bt .inner .icon{ border-right:1px solid #e4e4e4;border-bottom:1px solid #ccc;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;background:rgb(255,255,255, 0.9); }
    .footer .sp_ft_bt .inner .icon:last-of-type{ border-right:none; }
    .footer .sp_ft_bt .inner .icon i{ display:block;font-size:24px;text-align:center;padding:10px 0; }
    .footer_copy{ font-size:14px; }

    #bg_popup .inner #pop_detail .detail{ font-size:16px; }
}