@media screen and (max-width:767px) {
    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    img {
        max-width: 100%;
    }

    * {
        margin: 0;
        padding: 0;
        font-family: gihyojp, Verdana, Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
        color: #707070;
    }

    a {
        text-decoration: none;
    }

    #container {
        max-width: 1500px;
        margin: 0 auto;
    }

    #grid1,
    #grid2,
    #grid3,
    #grid5,
    #grid6,
    #grid7,
    #grid8,
    #grid9 {
        padding: 20px;
    }

    #grid4 {
        margin: 60px auto 0;
        padding: 0 20px;
        max-width: 1500px;
    }

    h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 1.3vw;
    }

    h4 {
        font-size: 1.2vw;
        margin-top: 20px;
    }

    p {
        font-size: 15px;
        line-height: 1.5;
    }

    .bold {
        font-size: 1.2vw;
        line-height: 1.5;
        font-weight: bold;
    }

    dt,
    dd,
    tr,
    td {
        font-size: 12px;
    }

    li {
        list-style: none;
        font-size: 15px;
        line-height: 1.5;
    }
    hr{
        margin: 5px 0;
    }

    /*header*/
    .main_img {
        position: relative;
    }

    .logo {
        text-align: center;
        background-color: #fff;
        display: inline-block;
        padding: 1%;
        position: absolute;
        top: 5%;
        left: 3%;
    }

    .logo a {
        font-size: 12px;
    }

    .logo span {
        color: #EE1010;
        font-weight: bold;
        font-size: 30px;
    }

    /* main-visual */
    #global-head {
        color: #fff;
        padding: 10px 30px;
        background: #7A7474;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
    }

    #sidebar {
        padding-top: 60px;
        width: 180px;
        height: 100%;
        position: fixed;
        background: #fff;
    }

    #global-nav ul {
        list-style: none;
        margin-left: 0;
    }

    #global-nav>ul>li {
        position: relative;
    }

    #global-nav a {
        color: #7A7474;
        text-decoration: none;
        display: block;
        padding: 15px;
        -moz-transition: color .3s linear;
        -webkit-transition: color .3s linear;
        transition: color .3s linear;
    }

    #global-nav .sub-menu.is-active>a,
    #global-nav a:hover {
        color: #7A7474;
        /*background: #fff;*/
    }
    .details_title{
        padding: 10px;
    }
    /*grid1*/
    .title {
        margin: 20px;
    }

    /*商品詳細*/
    /*grid2*/

    .details_yen {
        font-weight: bold;
        text-align: left;
        color: #EE1010;
        font-size: 18px;
    }

    .details {
        margin-top: 20px;
    }

    .details_text {
        margin-top: 20px;
    }

    .details_text span {
        font-weight: bold;
    }

    .details_text p {
        margin: 15px 0;
    }

    .details_form p {
        margin: 15px 0 0;
    }

    .details_form select {
        height: 30px;
        width: 70%;
    }

    .total {
        height: 26px;
        width: 69%;
        margin-right: 5px;
    }

    .cart_btn {
        background-color: #7A7474;
        color: #fff;
        border-radius: 5px;
        border: none;
        padding: 5px 60px;
        font-size: 16x;
        text-align: center;
        margin: 40px 0 !important;
        min-height: 35px;
    }

    .cart_btn:hover {
        background-color: #544a47;
    }

    .cart_btn a {
        color: #fff;
        display: block;
    }

    .fa-angle-double-down {
        color: #fff;
    }

   /*slide*/
   .cf:before,
   .cf:after {
       content: "";
       display: table;
   }

   .cf:after {
       clear: both;
   }

   .cf {
       zoom: 1;
   }

   #details_img,
   #details_img2,
   #details_img3,
   #details_img4,
   #details_img5, 
   #details_img6{
       text-align: center;
   }

   #featured_img img,
   #thumb_img img,
   #thumb_img2 img,
   #thumb_img3 img,
   #thumb_img4 img,
   #thumb_img5 img,
   #thumb_img6 img {
       max-width: 100%;
   }

   #details_img,
   #details_img2,
   #details_img3,
   #details_img4,
   #details_img5, 
   #details_img6{
       margin-top: 2%;
   }

   #thumb_img img,
   #thumb_img2 img,
   #thumb_img3 img,
   #thumb_img4 img,
   #thumb_img5 img,
   #thumb_img6 img  {
       float: left;
       max-width: 32%;
       width: 32%;
       cursor: pointer;
       margin-right: 2%;
       border: 2px solid #eee;
       box-sizing: border-box;
   }

   #thumb_img img.active,
   #thumb_img2 img.active,
   #thumb_img3 img.active,
   #thumb_img4 img.active,
   #thumb_img5 img.active,
   #thumb_img6 img.active{
       border: 2px solid #cac6b8;
   }

   #thumb_img img:last-child,
   #thumb_img2 img:last-child,
   #thumb_img3 img:last-child,
   #thumb_img4 img:last-child,
   #thumb_img5 img:last-child,
   #thumb_img6 img:last-child {
       margin-right: 0;
   }

    /*star*/
    .star5_rating {
        position: relative;
        z-index: 0;
        display: inline-block;
        white-space: nowrap;
        color: #CCCCCC;
        /* グレーカラー 自由に設定化 */
        /*font-size: 30px; フォントサイズ 自由に設定化 */
    }

    .star5_rating:before,
    .star5_rating:after {
        content: '★★★★★';
    }

    .star5_rating:after {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        overflow: hidden;
        white-space: nowrap;
        color: #ffcf32;
        /* イエローカラー 自由に設定化 */
    }

    .star5_rating[data-rate="5"]:after {
        width: 100%;
    }

    /* 星5 */
    .star5_rating[data-rate="4.5"]:after {
        width: 90%;
    }

    /* 星4.5 */
    .star5_rating[data-rate="4"]:after {
        width: 80%;
    }

    /* 星4 */
    .star5_rating[data-rate="3.5"]:after {
        width: 70%;
    }

    /* 星3.5 */
    .star5_rating[data-rate="3"]:after {
        width: 60%;
    }

    /* 星3 */
    .star5_rating[data-rate="2.5"]:after {
        width: 50%;
    }

    /* 星2.5 */
    .star5_rating[data-rate="2"]:after {
        width: 40%;
    }

    /* 星2 */
    .star5_rating[data-rate="1.5"]:after {
        width: 30%;
    }

    /* 星1.5 */
    .star5_rating[data-rate="1"]:after {
        width: 20%;
    }

    /* 星1 */
    .star5_rating[data-rate="0.5"]:after {
        width: 10%;
    }

    /* 星0.5 */
    .star5_rating[data-rate="0"]:after {
        width: 0%;
    }

    /*grid7*/
    #grid7 {
        margin-top: 20px;
    }

    /*カート内容確認*/
    /*grid8*/
    #grid8 {
        padding-top: 40px;
        max-width: 1000px;
        margin: 0 auto;
    }
/* 
.cart_text{
    width: 40%;
}
    .conteiner {
        min-height: 300px;
    }

    .conteiner th {
        text-align: center;
        width: 20%;
        background-color: #E4E3E3;
    }

    #grid8 table {
        border: solid 1px #E4E3E3;
    }

    .product_name {
        text-align: left;
    }

    .conteiner tr {
        text-align: right;
    }
*/
    .confirm_btn {
        background-color: #7A7474;
        color: #fff;
        border-radius: 5px;
        border: none;
        padding: 10px 30px;
        font-size: 16x;
        text-align: center;
        margin: 40px auto !important;
        min-height: 35px;
    }

    .buy_btn {
        text-align: center;
    }

    .form_title {
        background-color: #7A7474;
        text-align: center;
        color: #fff;
    }

    .form_name {
        color: #fff;
        width: 50%;
    }

    .product_title {
        width: 40%;
    }

    .product_size {
        width: 100%;
    }
    /*grid9*/
    #grid9 {
        margin-top: 40px;
    }

    #grid9 span {
        color: #EE1010;
        font-weight: bold;
        font-size: 15px;
    }

    /*form*/
    .form {
        padding: 2% 0;
    }

    .formtext {
        margin-top: 10px;
        font-size: 15px;
    }
    .form_text{
        margin: 2px 0;
    }
    input {
        font-size: 15px;
    }

    label {
        font-size: 15px;
    }

    .payment {
        display: flex;
        justify-content: space-between;
        padding: 10px 0 0;
    }

    .payment_title {
        display: flex;
        align-items: center;
    }

    .delivery_title {
        display: flex;
        align-items: center;
    }

    .payment_text {
        width: 65%;
    }

    .delivery {
        display: flex;
        justify-content: space-between;
        padding: 10px 0 0;
    }

    .delivery_text {
        width: 65%;
    }

    /*footer*/
    footer {
        background-color: #7A7474;
        height: 8vh;
        text-align: center;
        margin-top: 10px;
    }

    footer p {
        color: #fff;
        line-height: 8vh;
        font-size: 10px;
    }

    #PageTopBtn {
        position: fixed;
        bottom: 10%;
        right:  5%;
        font-size: 8vw;
        z-index: 1000;
    }

    .fa-arrow-alt-circle-up {
        color: #7A7474;
    }
}