@charset "utf-8";

/* フッターコンテナ */
.footer-container{
    background-color: #000;
    color: #fff;
    font-size: .875rem;
}
/* フッター上下スペース */
.shop-area {
    padding-top: 60px;
    padding-bottom: 170px;
}
@media screen and (max-width: 431px){ /* 431px以下の時に読み込む */
    .shop-area {
        padding-top: 30px;
        padding-bottom: 140px;
    }
}

/* バイク買取店一覧＆リンク文字色 */
.shop-area a{
    color: #fff;
    text-decoration: none;
}
.shop-area a:hover {
    text-decoration: underline;
}

.footer-link {
    font-size: 1rem;
    margin: 30px 0 0;
}
.footer-link a {
    color: #F06E14;
}
/* エリアタイトルの文字 */
.shop-area-title {
    font-size: 1.2rem;
    font-weight: 900;
}

/* フッターアコーディオン */
.list_area-margin{
    margin: 30px 0 0;
}
@media screen and (max-width: 431px){ /* 431px以下の時に読み込む */
    .list_area-margin{
        margin: 0;
    }
}
.list_content{
    max-height: unset;
    opacity: 1;
    visibility:visible;
    margin: 0;
    padding: 0;
    pointer-events: auto; /* リンクをクリックできるようにする */
}
.list_check:checked + .list_label + .list_content{
    max-height:unset;
    padding: 0;
}
.list_label{
    display: none;
}
.list_check{
    display: none;
}
@media screen and (max-width: 431px){ /* 431px以下の時に読み込む */
    .list_label{
        display: block;
        border-top:1px solid #333;
        border-bottom:1px solid #333;
        color: #fff;
        padding: 10px;
        margin-top: -1px;
        position: relative; /* 矢印を配置するために必要 */
        cursor: pointer; /* クリック可能にする */
    }
    .list_label::before {
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #555;
        border-right: 2px solid #555;
        position: absolute;
        top: calc(50% - 5px);
        right: 10px;
        transform: rotate(135deg);
        transition: transform 0.3s;
    }
    .list_check:checked + .list_label::before {
        transform: rotate(-45deg);
    }
    .list_content{
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, opacity 0.5s ease;
        margin: 0;
        padding: 0;
        pointer-events: none; /* リンクをクリックできないようにする */
    }
    .list_check:checked + .list_label + .list_content{
        max-height: 2000px;
        opacity: 1;
        pointer-events: auto; /* リンクをクリックできるようにする */
    }
    .list_content li{
        padding: 10px;
        background-color: #121212;
        border-bottom:1px solid #333;
    }
}


/* 被リンク PC用 */
.partner-title {
    font-size: 1rem;
    font-weight: 900;
}
@media screen and (max-width: 431px){ /* 431px以下の時に読み込む */
    .partner-title {
        display: none;
    }
}


@media screen and (min-width: 432px){ /* 432px以上の時に読み込む */
    /* フッターエリア部分 */
    .footer-col {
        display: flex;
        max-width: 100%;
        padding: 5px 0 0;
    }
    .footer-col div:first-child {
        width: 20%;
    }
    .footer-col div:last-child {
        width: 80%;
    }
    /* エリア名が入るリスト */
    .footer-col ul {
        display: flex;
        flex-wrap: wrap;
        margin: 3px 0 0;
        padding: 0;
        column-gap: 16px;
    }
    .footer-col li {
        padding: 0 16px 0 0;
        line-height: 1.2;
        border-right: 1px solid #777;
        margin: 0 0 5px;
    }
    .footer-col li:last-child {
        border-right: none;
    }
}

/* コピーライト */
.copyright{
    font-family: 'Arial','Helvetica','Verdana';
    margin: 30px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #fff;
    text-align: center;
}
@media screen and (max-width: 431px){ /* 431px以下の時に読み込む */
    .copyright{
        margin: 20px 0 0;
        padding: 0;
        border: none;
    }
}