/*
<link rel="stylesheet" href="/mobile.css" type="text/css" media="screen and (max-width:767px)" />
*/

/*
#######################################
    レスポンシブ対応
#######################################
*/
/*
===========================

1.common
2.header
3.category
4.rank_index
5.login
6.search
7.sidebar
8.lp
9.footer
10.panel
11.index

===========================*/

/*
--------------------------------------------
    1.common
--------------------------------------------
*/

@media only screen and (max-width: 767px) {
    html {
        font-size: 14px;
    }

    body {
        min-width: 320px;
        width: 100%;
    }

    img {
        width: 100%;
    }

    .container-fluid {
        padding: 0;
    }

    .wrap {
        width: 100%;
    }

    .see-sp {
        display: block;
    }

    .see-pc,
    .see-mb {
        display: none;
    }

    .sp-hd {
        display: none;
    }

    .Title {
        padding: .7rem;
    }

    .pageTitle {
        padding: .5rem 0 .4rem .5rem;
        margin-bottom: .5rem;
        background-color: #d8d8d8;
        border-top: 1px solid #CCC;
        border-bottom: 3px solid #b6b6b6;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    }

    .pageTitle h5 {
        padding: 3px 0 2px 7px;
        border-left: 5px solid #333;
        margin: 0;
        font-size: 17px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    .Title h1 {
        padding: 0;
        margin: 0;
        font-weight: bold;
        font-size: 1.2rem;
        line-height: 1.5;
    }

    hr {
        margin-top: .5rem;
    }

    .button-area .btn {
        width: 80%;
        padding: .5rem;
        font-size: .9rem;
    }

    /*
    --------------------------------------------
        2.header
    --------------------------------------------
    */
    header .header_item {
        padding: 5px 7px 5px 10px;
    }

    header .logo-top {
        width: 246px;
    }

    button.drawer-toggle.drawer-hamburger {
        position: absolute;
        top: .3rem;
        padding: 10px 10px 0;
    }

    .drawer--right .drawer-nav {
        width: 18rem;
        right: -18rem;
    }

    .drawer--right.drawer-open .drawer-hamburger {
        right: 17rem;
    }

    /*
    --------------------------------------------
        3.category
    --------------------------------------------
    */
    .slideList .category_list {
        height: 160px;
    }

    .slideList .category_list img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto;

    }

    .slideList .category_list .category_name {
        font-size: .9rem;
    }

    #main.index .slick-next {
        background-image: none;
        right: 10px;
    }

    #main.index .slick-prev {
        left: 10px;
    }
}
    @media only screen and (max-width: 480px) {

    }
    /*
    --------------------------------------------
        4.rank_index
    --------------------------------------------
    */
    #rank_catedory .nav-item .nav-link {
        width: 100px;
        font-size: .8rem;
    }

    .rank_No {
        font-size: .8rem;
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin: 0 3px;
    }

    /*
    --------------------------------------------
        5.login
    --------------------------------------------
    */
    /*
    --------------------------------------------
        6.search
    --------------------------------------------
    */
    /*
    --------------------------------------------
        7.sidebar
    --------------------------------------------
    */
    #sidebar {
        padding: 0;
    }

    #sidebar .topic_box {
        margin: 0 .3rem .5rem .3rem;
    }

    /*
    --------------------------------------------
        8.lp
    --------------------------------------------
    */
    #lp_contents{
        padding: 0 4px;
    }
    .lp_slideList {
        width: auto;
    }
    .textbox{
        border: none;
        border-radius: 6px;
    }

    /*
    --------------------------------------------
        9.footer
    --------------------------------------------
    */
    footer{
        padding: 0;
        margin-top: 10px;
    }
    footer #footer-wrap, footer .footer-head p {
        width: 100%;
    }

    footer #footer-wrap {
        width: 100%;
    }

    footer .footer-search-list {
        display: initial;
    }

    footer .footer-search-list > div {
        width: 100%;
        float: none;
        margin-bottom: 1rem;
    }

    footer .sec03 {
        font-size: 1rem; /* #51 変更 */
    }

    footer#entryFooter .flex {
        width: 50%;
    }

    footer#entryFooter .flex img {
        width: 60%;
    }

    /*
    --------------------------------------------
        10.panel
    --------------------------------------------
    */
    #topArea {
        height: 220px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    /*
    --------------------------------------------
        11.index
    --------------------------------------------
    */
    #eyecatch .eyecatch-title {
        display: none;
    }

    #eyecatch .kantan-bar {
        height: 70px;
    }

    #eyecatch .kantan-bar > div > a {
        line-height: 24px;
        padding: 11px 0px;
        font-size: 85%;
    }

    #eyecatch .kantan-bar > div i {
        display: none;
    }

    #main.index .checkActivationWrap {
        padding: .7rem 0 0rem;
    }

    #main.index .checkActivationWrap .btn-white {
        font-size: 70%;
    }

    #main.index .checkActivationWrap .selectedTermsArea {
        margin-bottom: 0px;
    }

    #main.index section.search-box .nav-tabs .nav-link:before {
        height: 15px;
        width: 15px;
    }

    #main.index section.search-box .nav-tabs .nav-link {
        font-size: 80%;
        line-height: 15px;
    }

    #main.index section.search-box #tab1 table th,
    #main.index section.search-box #tab1 table td {
        display: block;
        width: 100%;
    }

    #main.index section.search-box #tab1 table th > img {
        width: 22px;
        margin-right: 6px;
    }

    #main.index section.search-box #tab1 table td li {

    }

    #main.index section.search-box #tab2 ul.prefectureList li {
        width: 50%;
    }

    #main.index section.search-box #tab2 section.roseneki #accordion .card .allCheckChild li {
        width: 50%;
        line-height: 1.8rem;
    }

    #main.index section.search-box #tab2 section.jouken table th,
    #main.index section.search-box #tab2 section.jouken table td {
        display: block;
        width: 100%;
    }

    #main.index section.search-box #tab2 section.jouken table th > img {
        width: 22px;
        margin-right: 6px;
    }

    #main.index section.search-box #tab3 table th,
    #main.index section.search-box #tab3 table td {
        display: block;
        width: 100%;
    }

    #main.index section.search-box #tab3 table td li {
        min-width: 50%;
        width: auto;
    }

    #main.index .special .card-block {
        padding: .5rem;
    }

    #main.index .special table th,
    #main.index .special table td {
        width: 100%;
        display: block;
    }

    @media only screen and (max-width: 480px) {
        .see-mb {
            display: block;
        }

        header .topBar #logo-top {
            top: 8px;
            width: 140px;
        }

        header .topBar #logo-top:before {
            content: " ";
            height: 40px;
            background-color: #1d7cb4;
            display: block;
            width: 1000%;
            position: absolute;
            top: 18px; /* 変更 */
            right: 70%;
            z-index: -10;
        }

        header .topBar #logo-top .logo-md {
            display: none;
        }

        header .topBar #logo-top .see-mb {
            width: 140px;
        }

        /* #51 追加 978行目まで */
        footer .footer-link-list {
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: space-around; /* Safari */
            justify-content: space-around;
        }

        footer .footer-link-list li {
            width: 46%;
            margin: 0 0 10px;
        }

        footer .footer-link-list li:first-child {
        }

        .row {
            margin: 0;
        }

        #main {
            padding: 0;
        }
    }