@charset 'utf-8';

.sp-menu{
    display: none;
}
.search-box{
    float: initial;
}

@media screen and (max-width: 1400px){
    #toTop i{
        font-size: 34px;
    }
}

@media screen and (max-width: 1199px){
    .wrap{
        padding: 0 20px;
    }
}

@media screen and (max-width: 991px){
    body{
        min-width: 320px;
        padding-top: 63px;
    }
    

    /* H#ADER */
    #header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 10px 0;
        background-color: #000;
    }
    .nav-toggle{
        position: relative;
        width: 25px;
        height: 16px;
        margin-left: 20px;
    }
    .nav-toggle span{
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: .2s;
    }
    .nav-toggle span:nth-of-type(1){
        top: 0;
    }
    .nav-toggle span:nth-of-type(2){
        top: 7px;
    }
    .nav-toggle span:nth-of-type(3){
        top: 14px;
    }
    #header.open .nav-toggle span:nth-of-type(1){
        transform: translateY(7px) rotate(45deg);
    }
    #header.open .nav-toggle span:nth-of-type(2){
        opacity: 0;
    }
    #header.open .nav-toggle span:nth-of-type(3){
        transform: translateY(-7px) rotate(-45deg);
    }
    #header .header-top{
        display: none;
    }
    #header .menu{
        display: none;
    }
    #header .user-menus{
        display: flex;
        align-items: center;
    }
    #header .header-bottom {
        background-color: transparent;
    }
    #header .sp-menu{
        display: block;
        position: fixed;
        top: 63px;
        right: 0;
        width: 300px;
        height: calc(100% - 63px);
        background-color: #fff;
        transform: translateX(100%);
        overflow-y: scroll;
        transition: .2s;
    }
    #header.open .sp-menu{
        transform: translateX(0);
    }
    #header .sp-menu .search-box form{
        display: block;
    }
    #header .sp-menu .search-box{
        padding: 30px 20px;
    }
    #header .sp-menu .search-box button{
        background-color: transparent;
    }
    #header .sp-menu ul li a{
        display: block;
        padding: 20px 20px;
        color: #000;
    }
    #header .sp-menu ul li{
        border-top: 1px solid #ddd;
    }


    /* FOOTER */
    #footer{
        margin-top: 100px;
    }
    .copyright ul{
        left: 20px;
    }
    .footer-sitemap{
        padding: 40px 0;
    }


    /* TOP */
    .mv .slick-dots li button:before, .mv .slick-dots li button, .mv .slick-dots li{
        width: 9px;
        height: 9px;
    }
    .home-sec01 .flex .item .text.top{
        font-size: 1.7rem;
    }
    .home-sec02 .ranking-slider .slick-slide{
        width: 21.875vw;
        margin: 0 10px;
    }
    .subtitle-text{
        font-size: 1.7rem;
    }
    .home-sec01,
    .home-sec02,
    .home-sec03{
        padding: 60px 0;
    }


    /* 商品一覧 */
    .main-content {
        width: calc(100% - 230px);
    }
    .news-archive ul li .news-box .text-box .text{
        font-size: 14px;
    }
    .narrow-down .narrow-box select{
        height: 40px;
    }


    /* 商品詳細 */
    .news-single .link-btn a{
        padding: 15px 40px;
    }
    .news-single .link-btn a::before{
        font-size: 12px;
    }
    .recently-news .subtitle-text{
        font-size: 1.2rem;
    }
    .recently-news .subtitle a{
        font-size: 13px;
    }
    .narrow-down .narrow-box select{
        padding: 0 15px;
    }


    /* SIDEBAR */
    .sidebar {
        width: 200px;
    }
    .sidebar-banner{
        height: 150px;
    }
    .sidebar-banner .text-box .text.top{
        font-size: 1.5rem;
    }
    .sidebar-banner .text-box .text{
        font-size: 13px;
    }
    .sidebar-banner.adjust {
        height: 90px;
    }
    .news-single-content .copy-btn .copy-text{
        width: 100%;
        padding: 15px 0;
    }

    #itempage #img-box{
        margin-bottom: 30px;
    }
    #itempage .item-info{
        width: 100%;
        margin-bottom: 20px;
    }
    .detail-flex{
        flex-direction: column-reverse;
    }
    .detail-box{
        width: 100%;
    }

    .form-wrap .wpcf7 table th,
    .form-wrap .wpcf7 table td{
        width: 100%;
        display: block;
    }
    .main-content{
        padding: 30px 15px;
    }
    .wpcf7 .ajax-loader{
        display: block;
        margin: 20px auto 0;
    }
    #content{
        padding: 0 20px;
    }
}

@media screen and (max-width: 767px){
    body{
        padding-top: 50px;
    }


    /* HEADER */
    #header .header-bottom .logo img {
        width: 110px;
    }
    #header .sp-menu ul li a{
        font-size: 14px;
        padding: 15px 20px;
    }
    #header .sp-menu {
        top: 50px;
        height: calc(100% - 50px);
        width: 240px;
    }
    #header .search-box .input-box input[type="text"]{
        width: 170px;
    }
    #header .sp-menu .search-box{
        padding: 20px;
    }

    
    /* FOOTER */
    .footer-instagram .text-box .text{
        font-size: 12px;
    }
    .footer-instagram img{
        width: 13px;
        margin-right: 10px;
    }
    .footer-logo{
        padding: 30px 0;
    }
    .footer-logo .text{
        text-align: left;
    }
    .footer-sitemap ul.sin-ul>li>a{
        font-size: 14px;
    }
    .footer-sitemap ul.sin-ul a{
        font-size: 12px;
    }
    .footer-sitemap ul.sin-ul li{
        line-height: 1.5;
    }
    .footer-sitemap ul.sec-ul{
        margin-top: 5px;
    }
    .footer-sitemap ul.sin-ul>li{
        width: 100%;
        margin-bottom: 15px;
    }
    .footer-sitemap ul.sin-ul>li:last-child{
        margin-bottom: 0;
    }
    .copyright ul{
        position: initial;
        justify-content: center;
        transform: initial;
    }
    .copyright ul img{
        vertical-align: middle;
    }
    .copyright{
        padding: 5px 0 10px;
    }
    .copyright .text{
        margin-top: 5px;
    }
    #footer {
        margin-top: 80px;
    }


    /* TOP */
    .mv .slick-dots li button:before, .mv .slick-dots li button, .mv .slick-dots li{
        width: 7px;
        height: 7px;
    }
    .mv .slick-dots{
        bottom: 5px;
    }
    .mv-bottom-news ul li{
        width: 100%;
    }
    .mv-bottom-news ul li:not(:last-child){
        margin-bottom: 15px;
    }
    .home-sec01, .home-sec02, .home-sec03{
        padding: 40px 0;
    }
    .home-sec01 .flex .item{
        width: 100%;
        margin: 1% 0;
        height: 120px;
    }
    .home-sec01 .flex .item .text.top{
        font-size: 1.2rem;
    }
    .home-sec01 .flex .item .text{
        font-size: 12px;
    }
    .home-sec01 .flex .item>a{
        padding: 10px;
    }
    .home-sec02 .tab-menu li{
        width: 100%;
        margin: 3px 0;
        font-size: 14px;
        border-right: none;
    }
    .home-sec02 .ranking-slider .slick-slide{
        width: 250px;
    }
    .home-sec02 .tab-menu {
        margin-bottom: 20px;
    }
    .subtitle-text{
        font-size: 1.4rem;
    }
    .item-archive .item-archive-list{
        width: 48%;
    }
    .item-archive .item-archive-list>a .thumb .delivery-free img {
        width: 55px;
    }
    .read-more a{
        display: block;
        padding: 10px 0;
        width: 100%;
    }
    .home-sec04 .item,
    .home-sec04 .item:nth-of-type(1), .home-sec04 .item:nth-of-type(2){
        width: 100%;
    }
    .home-sec04 .item{
        height: 140px;
    }
    .home-sec04 .item .text.top{
        font-size: 1.3rem;
    }
    .home-sec04 .item .text{
        font-size: 12px;
    }


    /* SIDEBAR */
    .sidebar{
        width: 100%;
        margin-top: 30px;
    }
    .main-content{
        width: 100%;
    }
    .sidebar-banner .text-box .text.top{
        font-size: 1.2rem;
    }
    .sidebar-banner .text-box .text{
        font-size: 12px;
    }
    .sidebar-menu .text{
        font-size: 14px;
    }
    .narrow-down .narrow-box{
        width: 100%;
        margin: 5px 0;
    }
    .layout-flex .item-archive .item-archive-list{
        width: 48%;
    }
    .news-archive ul li .news-box .text-box{
        width: 100%;
    }
    .news-archive ul li .news-box .thumb{
        width: 100%;
    }
    .news-archive ul li .news-box .text-box{
        padding: 10px 0 20px;
    }
    .news-single-content{
        padding: 20px;
    }
    .news-single-content .news-title{
        font-size: 1.1rem;
    }
    .recently-news .subtitle a{
        position: initial;
        transform: initial;
    }
    .recently-news .subtitle{
        text-align: right;
        margin-bottom: 15px;
    }
    .recently-news .subtitle-text{
        text-align: center;
        margin-bottom: 10px;
    }
    .recently-news {
        margin-top: 50px;
        padding-top: 30px;
        border-top: 1px solid #000;
    }
    .item-info .skubutton{
        font-size: 14px;
    }
    #itempage .item-info{
        padding: 20px;
    }
    .item-info .item-option dt, .item-info .itemGpExp dt{
        font-size: 14px;
        margin-bottom: 5px;
    }
    .item-info .item-option input[type="text"],
    .item-info .item-option dd select{
        font-size: 14px;
    }
    .item_page_title{
        font-size: 17px;
    }
    .entry-content h3, .item-description h3{
        line-height: 1.8;
        border-left: 2px solid #262626;
        padding-left: 8px;
    }
    .form-wrap input[type="text"], .form-wrap input[type="number"], .form-wrap input[type="password"], .form-wrap input[type="email"], .form-wrap input[type="tel"], .form-wrap input[type="search"], .form-wrap input[type="url"]{
        width: 100%;
    }
    .main-content{
        padding: 0;
        border: none;
    }
    .form-wrap .wpcf7 table{
        border-collapse: collapse;
        border-spacing: 0;
    }
    .form-wrap input[type="submit"]{
        font-size: 14px;
    }
    div.cart_navi li{
        width: 100%;
        margin: 3px 0;
    }
    .news-single .link-btn a{
        width: 100%;
    }
    .about-sec01 h3,
    .about-sec01 .text.top{
        font-size: 1rem;
    }
    .about-sec01 .flex .img .text{
        text-align: left;
    }
    .about-sec01 .flex .img{
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
}