/*
 * 
 * Copyright 2018
 */

/*
    #009935 = rgba(0,153,53,1.0);
*/

/*====================
{{スマホ base}}
 - 〜479px：SP縦
 - 480px〜599px：SP横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/

.container {
    margin: 0 auto;
    padding: 0;
    margin-top: 138px;
}

.service {
    background: #fafcfe;
    padding:16px;
}
.service .member_benefits {
    border: 1px dotted #a1e2e7;
    padding: 8px;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.template1 {
    margin:0;
    margin-bottom: 24px;
}
.template1 .body{
    float: left;
    width: 55%;
    line-height: 1.6rem;
}
.template1 .image{
    float: right;
    width: 40%;
}


/* 480px〜599px：SP横 0px〜599px：SP横
------------------------------ */
@media screen and (min-width:0px) and (max-width:599px) { 
    .tbl_cart_total,
    .tbl_tariff ,
    .tbl_tariff_total {
        width: 734px;
    }

    .template1 .body{
        float: left;
        width: 100%;
        margin-bottom: 24px;
    }
    .template1 .image{
        float: left;
        width: 100%;
    }
    .template1 img{
        width: 90%;
        margin: 0 auto;
    }

    .page-title {
        font-size: 1.0rem;
    }

    .tbl_cart button[name=btn_delete]{
        font-size: 1.0rem;
        padding: 4px 4px;
    }
    .tbl_cart td {
        font-size: 0.8rem;
    }
    .tbl_cart th.delete {
        
    }
    .tbl_cart th.delete ,
    .tbl_cart td.delete {
        width:35px;
        padding: 5px;
        text-align:center;
    }
    .tbl_cart td .amount_val {
        border-bottom:1px solid #ccc
    }

}


/* 480px〜599px：SP横 0px〜599px：SP横
------------------------------ */
@media screen and (min-width:0px) and (max-width:599px) { 

    .tbl_cart_total,
    .tbl_tariff ,
    .tbl_tariff_total {
        width: 734px;
    }

    .member_nav,
    .side-nav .login,
    .side-nav .join,
/*    .nav_news_box ,*/
    .nav_category_box ,
    .call_info {
        display: none;
    }

    .nav_news_box {
        margin: 0 8px;
        margin-top: 16px;
    }

    .g_header {
        position: absolute;
    }


    .g_header_logo {
        float:left;
        width: 180px;
        margin: 8px 0;
    }
    .g_header_menu {
        display: none;
    }
    .g_header_nav {
        width: 100px;
        margin-right: 16px;
    }
    .g_header_menu2 {
        top: 0;
        right: 16px;
    }
    .g_main {
        padding: 0 8px;
    }
    .top_category_tile {
        width: 100%;
    }
    .top_category_tile0 {
        width: 100%;
    }
    .top_random_tile {
        width: 48.5%;
    }
    .top_random_tile a img {
        width: 100% auto;
        height: auto;
    }

    .frm_base .item_title ,
    .frm_base .item_body {
        width: 100%;
    }
    .g_footer_inner .footer_nav_box {
        width: 100%;
        height: 100%;
    }
    .g_footer_inner .footer_nav_box li {
        border-bottom: 1px solid #eee;
    }

    .side-nav .login {
        float:left;
        width: 100%;
        margin: 0 auto;
        margin-bottom:4px;
    }
    .side-nav .join {
        float:left;
        width: 100%;
        margin-bottom:4px;
    }
    .side-nav .call_info {
        width: 100%;
    }
    .side-nav .call_info img, 
    .side-nav .login img ,
    .side-nav .join img {
        width: 98%;
        margin: 0 auto;
    }

        .mega-dropdown-menu .col-sm-4 {
            width: 100%;
        }


    .tbl_tariff_total2 th{
        width: 30%;
        font-size: 1.0rem;
        font-weight: bold;
    }
    .tbl_tariff_total2 td{
        width: 70%;
    }

    span.br {
        display: inline-block;
    }


    .tbl_tariff_total10 .thead {
        display: none;
    }
    .tbl_tariff_total10 th.thead_rwd {
        display: block;
        width: 100%;
        border: 2px solid #ccc;
    }
    .tbl_tariff_total10 td {
        width: 100%;
    }
    #login-infor {
        padding: 4px 8px 8px 8px;
    }
    #login-infor .login_info {
        width: 100%;
        margin-bottom:4px;
    }
    #login-infor .login_user {
        font-size: 0.8rem;
    }
    #login-infor .login_date {
        font-size: 0.8rem;
        float: right;
    }
    #login-infor .logout {
        font-size: 0.8rem;
    }

    #login-infor .pc {
        display: none;
    }
    #login-infor .sp {
        display: block;
        float: right;
    }

    .g_footer_inner3 {
        width: 90%;
    }

    .app-box {
        display: block;
    }
    .app-box .qr {
        float: none;
        padding: 8px;
    }
    .app-box .qr img {
        margin: 0 auto;
    }
    .app-box .qr_caption {
        float: none;
        text-align: center;
        padding: 0 0 16px 0;
        font-size: 0.9rem;
        line-height: 1.4rem;
    }
    .g_footer_inner3 {
        display: none;
    }


}

/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {

    .tbl_cart,
    .tbl_cart_total,
    .tbl_tariff ,
    .tbl_tariff_total {
        width: 734px;
    }

    .member_nav,
    .side-nav .login,
    .side-nav .join,
/*    .nav_news_box ,*/
    .nav_category_box ,
    .call_info {
        display: none;
    }
    .nav_news_box {
        margin: 0 8px;
        margin-top: 16px;
    }


    .g_header {
    }
    .g_header_inner {
        width: 100%;
    }

    .g_header_menu {
        display: none;
    }
    .g_header_nav {
        float: right;
        width: 100px;
        margin-top: 32px;
        margin-right: 16px;
    }
    .g_main {
        padding: 0 8px;
    }
    .top_category_tile {
        width: 100%;
    }
    .top_category_tile0 {
        width: 100%;
    }
    .top_random_tile {
        width: 49%;
    }
    .top_random_tile a img {
        width: 100% auto;
        height: auto;
    }
    .frm_base .item_title ,
    .frm_base .item_body {
        width: 100%;
    }
    .g_footer_inner .footer_nav_box {
        width: 100%;
        height: 100%;
    }
    .g_footer_inner .footer_nav_box li {
        border-bottom: 1px solid #eee;
    }

    .side-nav .login {
        float:left;
        width: 49%;
        margin-bottom:4px;
    }
    .side-nav .join {
        float:right;
        width: 49%;
    }
    .side-nav .call_info {
        width: 462px;
        margin: 0 auto;
    }


    .mega-dropdown-menu .col-sm-4 {
        width: 100%;
    }

    .dropdown-menu {
    }

    .g_footer_inner3 {
        width: 90%;
    }
    .app-box {
        display: block;
    }
    .g_footer_inner3 {
        display: none;
    }

}

/* 960px〜1279px：小型PC
------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {
    .g_header_inner ,
    .g_footer_inner ,
    .g_footer_inner2 ,
    .g_footer_inner3 {
        width: 984px;
    }

    .container {
        width: 984px;
/*        background: #ddd;*/
    }
    .g_nav {
        float:left;
        width: 224px;
    }
    .g_main {
        float:right;
        width: 720px;
    }
    .g_header_nav {
        float: right;
        width: 760px;
        margin-top: 32px;
    }
    .g_header_menu {
        margin-top: 8px;
    }
    .g_header_menu li a {
        margin-right: 16px;
        font-size: 0.9rem;
    }
    .g_header_menu li i {
        font-size: 1.4rem;
        margin-right: 4px;
    }
    .top_category_tile {
        float: left;
        width: 232px;
        text-align: left;
        overflow: hidden;
        margin-right: 8px;
        margin-bottom: 4px;
    }
    .top_random_tile {
        width: 32.5%;
    }
    .top_random_tile a img {
        width: 100% auto;
        height: auto;
    }

}

/* 1280px〜：大型PC
------------------------------ */
@media screen and (min-width:1280px) {
    .g_header_inner ,
    .g_footer_inner ,
    .g_footer_inner2 {
        width: 1200px;
/*        background: #00ff00;*/
    }
    .container {
        width: 1200px;
/*        background: #00ff00;*/
    }
    .g_nav {
        float:left;
        width: 248px;
    }
    .g_main {
        float:right;
        width: 912px;
    }
    .top_random_tile {
        width: 220px;
        margin-right: 8px;
    }


}