/* ------------------------------------------------------------
 SP
------------------------------------------------------------ */
/* Common */
#header_sp .header_sp_wrap * {
    box-sizing: border-box;
}
#header_sp .header_sp_wrap .ionicon{
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Header */
#header_sp .header_sp_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0.3rem 0;
}
#header_sp .header_sp_wrap > div{
    box-sizing: border-box;
}
#header_sp .header_sp_wrap .head_menu {
    width: 12%;
    max-width: 50px;
    text-align: center;
    padding-left: 3px;
}
    .head_menu_open {
        position: fixed;
        left: -500px;
        top: 0;
        width: 80%;
        height: 100%;
        background: #FFF;
        z-index: -1;
        overflow-y: scroll;
    }
        .head_menu_open ul {
            list-style: none;
            text-align: left;
            margin: 0;
            padding: 0;
            border-top: 5px solid #c7c7c7;
        }
        .head_menu_open ul li {
            margin: 0;
            padding: 0;
            line-height: 1;
            border-bottom: 1px solid #CCC;
        }
        .head_menu_open ul li:last-child {
            border-bottom: none;
        }
            .head_menu_open ul li ul {
                border-top: none;
            }
            .head_menu_open ul li ul li {
                padding-left: 1rem;
            }
        .head_menu_open > ul:last-child {
            margin-bottom: 100px;
        }
          .head_menu_open > ul:last-child li:last-child {
              border-bottom: 1px solid #CCC;
          }
        .head_menu_open ul li .menu_title {
            font-size: 14px;
            padding: 1rem;
            margin: 0;
            border-bottom: 1px solid #CCC;
        }
        .head_menu_open ul li a {
            font-size: 14px;
            color: #000;
            padding: 0.8rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: "Ionicons";
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
        .head_menu_open ul li a::after{
            content: "";
            font-size: 1.5rem;
            color: #888;
            padding-right: 0.1rem;
        }
    .head_menu_bodyhide{
      width: 100%;
      height: 100%;
      position: fixed;
      left:0;
      top:0;
      background: #000;
      opacity: 0;
      z-index: -1;
      transition: all 0.4s;
    }

    input#SPBtnHeadMenu{
      display: none;
    }
    input#SPBtnHeadMenu:checked + .head_menu_open{
      left:0;
      z-index: 20;
      transition: all 0.2s;
    }
    input#SPBtnHeadMenu:checked ~ .head_menu_bodyhide{
     opacity: 0.75;
      z-index: 10;
      transition: all 0.2s;
    }
    input#SPBtnHeadMenu:checked ~ .btn_menu_close{
      opacity: 1;
      z-index: 15;
      transition: all 0.2s;
    }
    label.btn_menu_open,
    label.btn_menu_close{
        cursor: pointer;
    }
    label.btn_menu_open{
        line-height: 1;
        padding: 0.4rem;
    }
    label.btn_menu_close {
        position: fixed;
        right: 6%;
        top: 2%;
        z-index: -1;
        opacity: 0;
        transition: all 0.2s;
    }
    label.btn_menu_open span.ionicon::before{
        content: "";
        font-size: 24px;
        color: #333;
    }
    label.btn_menu_close span.ionicon::before {
        content: "";
        font-size: 2.5rem;
        color: #FFF;
    }


#header_sp .header_sp_wrap .head_other{
    width: 90%;
}
    #header_sp .header_sp_wrap .head_other_inr{
        display: table;
        width: 100%;
    }
    #header_sp .header_sp_wrap .head_other_inr > div {
        display: table-cell;
        vertical-align: middle;
        box-sizing: border-box;
    }
    #header_sp .header_sp_wrap .head_logo {
        width: 80%;
    }
        #header_sp .header_sp_wrap .head_logo > p {
            display: table-cell;
            vertical-align: middle;
        }
        #header_sp .header_sp_wrap .head_logo p {
            margin: 0;
            font-size: 0;
        }
        #header_sp .header_sp_wrap .head_logo p.snlogo {
            width: 50%;
        }
            #header_sp .header_sp_wrap .head_logo p.snlogo img{
                width: 100%;
                max-width: 140px;
            }
        #header_sp .header_sp_wrap .head_logo p.cicopy {
            width: 50%;
            padding-left: 15px;
        }
            #header_sp .header_sp_wrap .head_logo p.cicopy img{
                width: 80%;
                max-width: 85px;
            }

    #header_sp .header_sp_wrap .head_cart {
        width: 20%;
        padding-right: 0.5rem;
        text-align: right;
    }
        #header_sp .header_sp_wrap .carticon {
            margin: 0;
        }
        #header_sp .header_sp_wrap .carticon a {
            padding: 0.4rem;
        }
        #header_sp .header_sp_wrap .carticon span.ionicon::before {
            content: "";
            font-size: 21px;
            color: #4c4c4c;
        }


/* GNavi */

#SPGNavi {
    background: #000;
}
#SPGNavi ul {
    list-style: none;
    display: flex;
    margin: 0;
    border-bottom: 1px solid #555;
}
#SPGNavi ul li {
    margin: 0;
    padding: 0;
    width: 25%;
    line-height: 1;
    border-right: 1px solid #555;
}
    #SPGNavi ul li:last-child {
        border-right: none;
    }
#SPGNavi ul li a {
    color: #FFF;
    display: block;
    text-align: center;
    padding: 0.7rem 0 0.8rem 0;
    font-size: 13px;
}