@media all and (max-width: 670px) {




    /* ヘッダー部分 */
    header {
        height: auto;
    }
    .header-logo {
        width: 80%;
        float: none;
        margin: 0 50px;
    }
    .header-right {
        font-size: 20px;
        float: none;
        text-align: center;
    }

    /* ナビゲーションメニュー */
    .navi-menu {
        padding: 20px;
        display: flex;
        flex-flow: column;
        line-height: 33px;
        font-size: 22px;
    }
    nav {
        position: relative;
    z-index: 1000;
    margin-bottom: 40px;
    }
    .li {
        border: none;
    }
    .li1 {
        border-left: none;
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }
    .li2 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid;   
    }
    .li3 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid;   
    }
    .li4 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid;   
    }
    .li5 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }
    .li6 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }
    .li7 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }


    /* トップ画面 */

    .top-contents h1 {
        font-size: 27px;
        padding: 30px 20px;
    }
    .top-contents h2 {
        font-size: 27px;
        padding: 30px 20px;
    }


    .top-contents p {
        font-size: 17px;
        padding: 0 20px;
    }
    .top-contents {
        height: auto;
    }

    /* 見出し */
    .heading {
        font-size: 25px;
        width: auto;
    }

    .heading2 {
        width: auto;
    }

    /* お知らせ */
    .main-contents {
        padding: 0 20px;
    }
    .main-contents p {
        font-size: 20px;
    }

    /* 会社紹介 */
    .intro {
        padding: 0 20px 20px 20px;
        height: auto;
    }


    /* 業務案内 */
    .busi {
        padding: 0 20px 20px 20px;
        height: auto;
    }
    /* 配送エリア */
    .area {
        padding: 0 20px 20px 20px;
        height: auto;
    }
    /* お問い合せ */
    .contact {
        padding: 0 20px 20px 20px;
        height: auto;
        min-height: 100vh;
    }

    /* Googleマップ */
    .g-map {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 の比率 */
        height: 0;
        overflow: hidden;
        margin-top: 20px;
    }
    
    .g-map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    
    /* SNS */
    .sns-box {
        padding: 0 20px 20px 20px;
        height: 50%;
        min-height: 100vh; 
    }
    .X-timeline {
        height: 50%;
    }
    
    .image-container {
        flex-direction: column;
        align-items: center;
      }
      .item-img {
        width: 100%;
      }

      .top-image-box {
        width: 80%; /* スマホでは画像を大きめに */
        margin: 0 auto;
      }
    
      .top-image {
        width: 100%;
      }
    
      figcaption {
        font-size: 1rem;
      }


    /* フッター部分 */
    footer {
        height: auto;
    }

    .footer-left {
        text-align: center;
        font-size: 20px ;
        margin-top: 18px;
    }

    .footer-right {
        font-size: 15px;
        text-align: left;
        float: none;
        padding-left: 20px;
    }

    footer p {
        font-size: 12px;
        background: none;
        margin-top: 0;
        padding: 5px;
        margin: 0 10px;
    }


}

@media all and (max-width: 1000px) {


    

    /* ヘッダー部分 */
    header {
        height: auto;
    }
    .header-logo {
        width: 80%;
        float: none;
        margin: 0 50px;
    }
    .header-right {
        font-size: 20px;
        float: none;
        text-align: center;
    }

    /* ナビゲーションメニュー */
    .navi-menu {
        padding: 20px 0;
        display: flex;
        flex-flow: column;
        line-height: 33px;
        font-size: 22px;
    }
    nav {
        height: 230px;
        background: none;
        margin-bottom: 40px;
    }
    
    .li {
        border: none;
    }
    .li1 {
        border-left: none;
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }
    .li2 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid;   
    }
    .li3 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid;   
    }
    .li4 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid;   
    }
    .li5 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }
    .li6 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }
    .li7 {
        background-color: rgba(251, 245, 245, 0.772);
        border-bottom: 1px skyblue solid; 
    }



    /* トップ画面 */
    .top-contents h1 {
        font-size: 27px;
        padding: 30px 20px;
    }
    .top-contents h2 {
        font-size: 27px;
        padding: 30px 20px;
    }


    .top-contents p {
        font-size: 17px;
        padding: 0 20px;
    }
    .top-contents {
        height: auto;
    }

    /* 見出し */
    .heading {
        font-size: 25px;
        width: auto;
    }

    .heading2 {
        width: auto;
    }

    /* お知らせ */
    .main-contents {
        padding: 0 20px;
    }
    .main-contents p {
        font-size: 20px;
    }

    /* 会社紹介 */
    .intro {
        padding: 0 20px 20px 20px;
        height: auto;
    }


    /* 業務案内 */
    .busi {
        padding: 0 20px 20px 20px;
        height: auto;
    }
    /* 配送エリア */
    .area {
        padding: 0 20px 20px 20px;
        height: auto;
    }
    /* お問い合せ */
    .contact {
        padding: 0 20px 20px 20px;
        height: auto;
    }

    /* Googleマップ */
    .g-map {
        width: auto;
    }
    /* SNS */
    .sns-box {
        padding: 0 20px 20px 20px;
        height: 50%;
        overflow: scroll;
    }
    
    




    /* フッター部分 */
    footer {
        height: auto;
    }

    .footer-left {
        text-align: center;
        font-size: 20px ;
        margin-top: 18px;
    }

    .footer-right {
        font-size: 15px;
        text-align: left;
        float: none;
        padding-left: 20px;
    }

    footer p {
        font-size: 12px;
        background: none;
        margin-top: 0;
        padding: 5px;
        margin: 0 10px;
    }
}