@charset "utf-8";
/* CSS Document */

#header_comment {
    height: 30px;
    padding: 10px 0;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-size: 12px;
    transform: translateY(-30px);
}

#header_comment a {
    color: #fff;
}



@media screen and (min-width: 800px) {

    /* pc */
    /* header area css */
    .sp_only {
        display: none !important;
    }

    #header_fixed_box {
        position: fixed;
        top: 30px;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #323232;
        z-index: 5000;
    }

    #shop_logo {
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translate(0, -50%);
        width: 150px;
    }

    #header_left_menu_box {
        position: absolute;
        top: 50%;
        left: calc(150px + 5%);
        transform: translate(0, -50%);
        font-size: 13px;
        color: #FFFFFF;
        width: 22%;
        height: 100%;
        max-width: 240px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #header_left_menu_box a {
        color: #FFFFFF;
        height: 50%;
        position: relative;
        top: 20%;
        transform: translate(0, -8%);
    }

    #header_right_menu_box {
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translate(0, -50%);
        font-size: 15px;
        color: #FFFFFF;
        width: 50%;
        max-width: 540px;
        display: flex;
        justify-content: space-between;
    }

    .cate_menu {
        cursor: pointer;
        height: 70px;
        line-height: 70px;
    }

    .header_right_icon_box {
        width: 50%;
    }

    .icon_img {
        width: 30px;
    }

    .icon_text {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        color: #C6FF00;
        font-size: 13px;
    }

    .search_box {
        width: 50%;
        margin: 0 3% 0 0;
    }

    .search_form {
        border-bottom: 1px solid #FFFFFF;
        position: relative;
        background-color: #323232;
        width: 100%;
    }

    .search_form_img {
        width: 25px;
        position: absolute;
        right: 0;
    }

    .search_h {
        height: 23px;
        background-color: #323232;
        border-bottom: 1px solid #FFFFFF;
        border: none;
        outline: none;
        color: #FFFFFF;
    }

    ::placeholder {
        color: #FFFFFF;
    }

    #header_text_box {
        width: 100%;
        height: 50px;
        margin: 70px 0 0 0;
        line-height: 50px;
        color: #323232;
        font-size: 15px;
        text-align: center;
        background-color: #FFFFFF;
    }

    #header_text_box a {
        color: #323232;
    }

    .cate_container {
        width: 100%;
        height: 550px;
        position: fixed;
        top: -550px;
        left: 0;
        background-color: #4F4F4F;
        z-index: 1000;
        transition: .2s all ease;
    }

    .cate_container.active {
        width: 100%;
        height: 550px;
        position: fixed;
        top: 100px;
        left: 0;
        z-index: 1000;
        transition: .2s all ease;
    }

    .cate_box {
        width: 100%;
        height: 500px;
        max-width: 1550px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
    }

    .cate_first_box {
        width: 20%;
        padding: 20px 0 0 0;
        text-align: center;
    }

    .big_cate {
        font-size: 15px;
        color: #FFFFFF;
        font-weight: bold;
        padding: 10px 0;
    }

    .small_cate {
        font-size: 12px;
        color: #FFFFFF;
        padding: 6px 0;
    }

    .small_cate:hover,
    .big_cate:hover {
        background-color: #D8D8D8;
        color: #323232;
        transition: .4s all ease;
    }

    .detailed_search {
        font-size: 12px;
        width: 20%;
        line-height: 12px;
        margin: 0 5% 0 0;
    }

    .search_text {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        color: #EBEBEB;
        font-size: 11px;
        cursor: pointer;
    }

    #detailed_search_box {
        width: 290px;
        height: 45px;
        padding: 10px 10px 0;
        font-size: 11px;
        background-color: #2E2E2E;
        position: fixed;
        top: 0px;
        right: 290px;
        color: #FFFFFF;
        z-index: 4000;
        transition: .5s all ease;
    }

    #detailed_search_box.active {
        top: 100px;
        transition: .5s all ease;
    }

    .detailed_search_img {
        width: 25px;
        position: absolute;
        right: 10px;
    }

    #main_contents{
        padding-top:40px;
    }
    
    #main_content_box{
        padding-top:40px;
    }
    
}



@media screen and (max-width: 799px) {

    /* sp */
    /* header area css */
    .pc_only {
        display: none !important;
    }

    #header_fixed_box {
        position: fixed;
        top: 30px;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #323232;
        z-index: 5000;
        transition: .3s;
    }

    #emblem_box {}

    #shop_logo {
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translate(0, -50%);
        width: 120px;
    }

    #sp_header_menu_container {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        border-left: 2px solid #FFFFFF;
    }

    #sp_header_right_menu_box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .header_right_icon_box {
        width: 50%;
    }

    .fmenu_search_box {
        width: 100%;
    }

    .search_box {
        width: 90%;
        margin: 0 auto;
        color: #FFFFFF;
        font-size: 11px;
    }

    .search_form {
        border-bottom: 1px solid #FFFFFF;
        position: relative;
        width: 100%;
    }

    .search_form_img {
        width: 40px;
        position: absolute;
        top: -15px;
        right: 0;
    }

    .search_h {
        height: 23px;
        background-color: rgba(0, 0, 0, 0.00);
        border-bottom: 1px solid #FFFFFF;
        border: none;
        outline: none;
        color: #FFFFFF;
    }

    ::placeholder {
        color: #FFFFFF;
    }

    #header_text_box {
        width: 100%;
        height: 50px;
        margin: 50px 0 0 0;
        line-height: 50px;
        color: #323232;
        font-size: 15px;
        text-align: center;
        background-color: #FFFFFF;
    }

    #header_text_box a {
        color: #323232;
    }

    .menu-trigger,
    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }

    .menu-trigger {
        position: relative;
        width: 32px;
        height: 34px;
    }

    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #FFFFFF;
        border-radius: 6px;
    }

    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 11px;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 9px;
    }

    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(20px) rotate(-45deg);
        transform: translateY(20px) rotate(-45deg);
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(45deg);
        transform: translateY(-20px) rotate(45deg);
    }

    .menu-trigger::before {
        position: absolute;
        left: 0;
        bottom: -6px;
        content: 'MENU';
        display: block;
        width: 100%;
        color: #FFFFFF;
        font-size: 11px;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        transition: all .4s;
    }

    .menu-trigger.active::before {
        content: 'CLOSE';
        bottom: -6px;
    }

    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(11px) rotate(-45deg);
        transform: translateY(11px) rotate(-45deg);
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-11px) rotate(45deg);
        transform: translateY(-11px) rotate(45deg);
    }

    .cate_container {
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        padding: 0;
        background: linear-gradient(135deg, #000000, rgba(0, 0, 0, .5));
    }

    .fmenu_s_box {
        width: 100%;
        height: 100%;
        overflow: scroll;
        padding: 100px 0 10px 0;
    }

    .fmenu_icon_box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0 0 30px 0;
    }

    .sp_menu_icon_box {
        width: 25%;
        text-align: center;
        padding: 0 2%;
    }

    .sp_menu_icon_box a {
        color: #C6FF00;
        font-size: 13px;
    }

    .sp_menu_icon_box img {
        width: 80%;
        margin: 0 auto;
        display: block;
        max-width: 50px;
    }

    .cate_box {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .cate_first_box {
        width: 100%;
        padding: 7px 0;
        text-align: center;
        border-bottom: 1px solid #FFFFFF;
        position: relative;
    }

    .sp_arrow:after {
        content: url("https://www.improves.jp/page_image/sp_menu_arrow.png");
        position: absolute;
        top: 24px;
        right: 10px;
        transform: translate(0, -50%) rotate(0deg);
        color: #FFFFFF;
        font-size: 12px;
        transition: .5s all ease;
    }

    .sp_arrow.active:after {
        transform: translate(0, -50%) rotate(90deg);
        transition: .5s all ease;
    }

    .cate_first_box:nth-of-type(1) {
        border-top: 1px solid #FFFFFF;
    }

    .sp_bcate {
        pointer-events: none;
    }

    .big_cate {
        font-size: 15px;
        color: #FFFFFF;
        font-weight: bold;
        padding: 10px 0;
    }

    .small_cate {
        font-size: 12px;
        color: #FFFFFF;
        padding: 10px 0;
    }

    .big_cate,
    .small_cate {
        color: #FFFFFF;
        font-size: 12px;
    }

    .sp_cate_menu {
        display: none;
    }

    .fmenu_title {
        font-family: "Oswald", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        font-size: 30px;
        margin: 40px 0 25px 0;
    }

    .fmenu_share_box {
        display: flex;
        justify-content: center;
        width: 80%;
        margin: 0 auto;
    }

    .fmenu_share_icon {
        width: 100%;
        max-width: 80px;
    }

    .fmenu_share_icon img {
        width: 100%;
    }

    #newre_bt {
        width: 80%;
        margin: 0 auto;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
        font-size: 16px;
        font-weight: bold;
    }

    .detailed_search {
        font-size: 12px;
        width: 20%;
        line-height: 12px;
        margin: 0 5% 0 0;
    }

    .search_text {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        color: #EBEBEB;
        font-size: 11px;
        cursor: pointer;
    }

    #detailed_search_box {
        width: 290px;
        height: 45px;
        padding: 10px 10px 0;
        font-size: 11px;
        background-color: #2E2E2E;
        position: fixed;
        top: 0px;
        right: 290px;
        color: #FFFFFF;
        z-index: 4000;
        transition: .5s all ease;
    }

    #detailed_search_box.active {
        top: 100px;
        transition: .5s all ease;
    }

    .detailed_search_img {
        width: 25px;
        position: absolute;
        left: 280px;
    }
    

    #main_contents{
        padding-top:10px;
    }
    
    #main_content_box{
        padding-top:20px;
    }
    
}