@charset "UTF-8";
@media screen and (max-width: 640px) {

    /*———————————
    共通部分レイアウト
    ———————————*/
    /*
    PCスマホ切り替え
    -----------*/
    .pc_only {
        display: none;
    }

    .sp_only {
        display: block;
    }

    /*
    パンくずリスト
    -----------*/
    .breadcrumb {
        width: 98%;
        margin: -30px 0px 12px;
        font-size: 1.0rem;
    }

    /*
    セクションタイトルエリア
    -----------*/
    .page_header .section_title {
        width: 100%;
        padding: 0 8px 10px;
        margin: 0;
    }

    .page_header .section_title h1 {
        margin-top: 30px;
    }

    /*
    黒抜きボタン
    -----------*/
    .kuronuki_button a {
        width: 100%;
    }

    /*
    My-ヘッダーナビ
    ———————————*/
    .navbar-fixed-top .container {
        width: 100%;
        height: 103px;
        padding: 8px 0 0 0;
        box-sizing: border-box;
    }

    .navbar-fixed-top .container .navbar-top-area_sp {
        width: 100%;
        height: 52px;
        position: relative;
    }

    .navbar-fixed-top .container #menu_btn {
        display: block;
        width: 44px;
        height: 44px;
        position: absolute;
        left: 8px;
        top: 0;
        cursor: pointer;
    }

    .navbar-fixed-top .container .navbar-top-area_sp .navbar-center {
        position: absolute;
        left: 20%;
        width: 60%;
        text-align: center;
    }

    .navbar-fixed-top .container .navbar-bottom-area_sp {
        height: 53px;
    }

    .navbar-fixed-top .container .navbar-bottom-area_sp ul {
        width: 100%;
        height: 53px;
        padding: 0 8px;
        overflow: hidden;
    }

    .navbar-fixed-top .container .navbar-bottom-area_sp ul li {
        font-size: 1.4rem;
        float: left;
        width: 25%;
        height: 53px;
        letter-spacing: -0.08rem;
    }

    .navbar-fixed-top .container .navbar-bottom-area_sp ul li:nth-child(2) {
        width: 50%;
        text-align: center;
        white-space: nowrap;
    }

    .navbar-fixed-top .container .navbar-bottom-area_sp ul li:nth-child(3) {
        width: 25%;
        text-align: right;
    }

    .navbar-fixed-top .container .navbar-bottom-area_sp ul li a {
        display: block;
        height: 43px;
        padding-top: 12px;
        color: #000;
        text-decoration: none;
    }

    .below-navbar-contents {
        padding: 0.5rem 0;
    }

    /*
    My-ヘッダーカート
    ———————————*/
    .cart-outside {
        width: 100%;
        margin: 0 auto;
        height: 0;
        position: relative;
    }

    .cart-outside a {
        display: block;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
        background-size: cover;
        z-index: 999;
    }

    .cart-number {
        color: #fff;
        font-size: 0.9rem;
        padding: 7px 0 0 29px;
        text-decoration: none;
    }

    /*
    レイアウト
    ———————————*/
    .container,
    #main {
        width: 100%;
    }

    #left-side,
    #right-side {
        display: none;
    }

    #footer {
        width: 100%;
        height: 190px;
        background-color: #fff;
    }

    #footer .footer-nav {
        width: 100%;
        margin: 0 auto;
        padding: 10px 10px 0 17px;
        box-sizing: border-box;
        font-size: 1.1rem;
        text-align: center;
    }

    #footer .footer-nav p {
        color: #2e2e2e;
        float: none;
        font-size: 1.0rem;
        margin-bottom: 15px;
    }

    #footer .footer-nav a {
        display: inline-block;
        margin: 0 10px;
        text-decoration: none;
        color: #2e2e2e;
    }

    /*———————————
    トップページ
    ———————————*/
    /*
    ニュースエリア
    -----------*/
    #main .news-area ul.news-area-contents {
        width: 100%;
        background-color: #f3f3f3;
        margin-left: 0px;
        padding-top: 20px;
        padding-right: 30px;
        padding-bottom: 1px;
        padding-left: 30px;
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .news-area ul.news-area-contents li {
        clear: both;
        margin-bottom: 20px;
    }

    /*
    商品を並べる場所
    -----------*/
    #main #products {
        width: 100%;
        padding: 0 8px 36px 8px;
    }

    #main #products .product {
        width: 100%;
        padding: 0 16px 28px;
        float: none;
    }

    #main #products .product:nth-child(2n) {
        float: none;
    }

    /*———————————
    ご利用ガイド
    ———————————*/
    .guide {
        width: 100%;
        margin: 0;
        padding: 0 8px;
    }

    .guide h3 {
        width: 100%;
    }

    .guide section img {
        width: 100%;
        height: auto;
    }

    /*
    ページ内リンクボタン
    -----------*/
    #top_button_area {
        width: 100%;
        margin: 0 0 40px;
        padding: 0 8px;
    }

    #top_button_area ul {
        overflow: hidden;
    }

    #top_button_area ul li {
        float: left;
        width: 50%;
        margin: 0;
        padding-right: 4px;
        margin-bottom: 8px;
    }

    #top_button_area ul li a {
        display: block;
        width: 100%;
    }

    /*———————————
    コチカについて
    ———————————*/
    #top_img {
        width: 100%;
        padding: 0 8px 0;
        margin: 0 0 12px;
    }

    .wide_wrap {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        padding: 0 8px;
    }

    .about_kotica .second_message .contents .left-img {
        float: none;
        width: 100%;
        padding: 0 8px;
        margin: 0;
    }

    .about_kotica .second_message .contents .right-body {
        float: none;
        width: 100%;
        padding: 0 8px;
        margin: 0;
    }
}