@media (max-width: 500px) {

    /* ヘッダーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

    .header {
        height: 70px;
    }

    .header-inner {
        height: 70px;
    }

    .header-logo img {
        width: 120px;
    }

    .group-flex {

        flex-direction: column;
    }


    .sp-br {
        display: block;
    }

    .nav-overlay ul {
        padding: 3rem 2rem 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    /* 「・」マーク */

    .li-dot {
        padding-left: 2em;
    }

    .li-dot::before {
        font-size: 1em;
        left: 1em;
    }


    /* ヘッダー内黄色SVGーーーーーーーーーーーーーーーーーーーーーーーーーー */

    .svg-up {
        top: -80px;
        right: -350px;
    }

    /* 背景SVGーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

    .wrapper {
        margin-top: 70px;
    }

    /* ファーストビュー黄色SVGーーーーーーーーーーーーーーーーーーーーー */
    .svg1 {
        top: -150px;
        right: -350px;
    }

    .svg2 {
        width: 120%;
        top: 10rem;
        right: 0%;
    }

    .svg3 {
        z-index: -200;
        top: -15rem;
        right: -100%;
    }


    /* トップメニューボタンーーーーーーーーーーーーーーーーーーーーーーーー */
    /* .side-buttons {
        width: 90%;

    } */


    /* トップスライドーーーーーーーーーーーーーーーーーーーーーーーーーーー */

    /* .fastview {
        margin: 0 auto 7rem;
    }

    .circle-slider {
        width: 110%;
        right: -5%;
        left: -5%;
        margin: 40px auto;
    } */

    /* スライドボタン */

    /* #toggleButton {
        bottom: 10px;
        padding: 5px 20px;
        font-size: 13px;
        z-index: 1000;
    } */

    /* サービスーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

    .service {
        margin: 0 auto 7rem;
        /* サービス下空き */
    }

    .service-category p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }


    /* 詳しく見るボタン */
    .more-button a {
        border-radius: 35px;
         font-size: 0.9em;
        padding: 1rem 4rem 1rem 3rem;
        line-height: 1.3; 
    }



    /* インターネット接続ーーーーーーーーーーーーーーーーーーーーーーーーー */


    /* インターネット接続ーーーーーーーーーーーーーーーーーーーーーーーーー */
    .internet-plans {
        grid-template-columns: 1fr;
    }

    /* レンタルサーバーーーーーーーーーーーーーーーーーーーーーーーーーー */
    .server-images {
        width: 90%;
        margin: 0 auto 2rem;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }


    /* スポンサーバナーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

    .sponsorbanner {
        margin: 0 auto 10rem;
        /* スポンサーバナー下空き */
        padding: 2rem 1rem;
    }

    .sponsorbanner img {
        width: 150px;
        height: 55px;
        margin: 0.3rem;
    }

    .banner-btns img {
        width: 12px;
        height: 12px;
        margin: 3px 0 0 3px;
    }

    .banner-btns a {
        width: 165px;
        height: 55px;
    }

    /* お知らせーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

    .information {
        padding: 4rem 1.5rem;
        margin: 0 auto 7rem;
        /* お知らせ下空き */
    }

    .info-big-title {
        top: -0.4em;
        font-size: 3rem;
    }

    /* 松情バナーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

    .site-banner {
        margin: 0 auto 10rem;
        /* 松情バナー下空き */
        flex-direction: column;
        align-items: center;
    }



    /* フッターメニューーーーーーーーーーーーーーーーーーーーーー */




    .contact-btns:last-child a:hover {
        background-color: #111;
        opacity: 1;
    }

    .contact-btns:last-child :hover {
        color: #fff;
        transition: 0.2s;
    }

    .contact-btns:last-child a:hover img {
        filter: invert(100%);
    }

    .footer-menu-inner {
        padding: 5rem 0 5rem;
    }

    .footer-part {
        width: 100%;
    }

    .contact-btns:last-child a {
        pointer-events: auto;
    }

    .footer-part:nth-child(2) {
        margin-bottom: 0rem;
    }

    .footer-part:nth-child(3) {
        border-bottom: 1px dashed #fff;
        padding-bottom: 4rem;
    }


    .footer-part:nth-child(1) {
        text-align: center;
    }

    .footer-part:nth-child(4) {
        text-align: center;
    }

    .svg-footer {
        bottom: -17rem;
    }




}