@charset "utf-8";

/* タブレット (幅1024px以下) 用のスタイル */
@media (max-width: 1024px) {
    .container {
        max-width: 90%; /* コンテナの幅を90%に拡張 */
        padding: 0 15px; /* 左右の余白を少し減らす */
    }
    
    .header { /* ヘッダーの設定 */
        height: 112px;
    }
    .header-logo {
        height: 35px; /* ロゴのサイズを少し小さくする */
    }
    
    .header-right a {
        font-size: 20px; /* メニューのフォントサイズを小さくする */
        padding: 20px 8px; /* ポインタが反応する領域を少し小さく */
    }

    .menu-card {
        width: calc(100% / 2 - 20px); /* 2列で均等に表示 */
        margin: 10px; /* 上下左右のマージンを設定 */
        margin-top: 20px; /* 各カード間の余白を少し減らす */
    }

    .footer {
        height: auto; /* 高さを自動調整 */
        padding-bottom: 20px; /* 下部の余白を追加 */
    }

    .footer_left, .footer_right {
        float: none; /* 回り込みを解除 */
        margin-bottom: 20px; /* 各ブロックの下部に余白を追加 */
    }
    .main-visual {
        margin-top: 112px;
    }
    .business {
        margin-top: 112px;
    }
    .abstract-title {
        margin-top: 112px; 
    }
    .information {
        margin-top: 112px;
    }
}

/* 携帯電話 (幅670px以下) 用のスタイル */
@media (max-width: 670px) {
    .container {
        max-width: 90%; /* コンテナの幅を100%に拡張 */
        padding: 0 10px; /* 左右の余白をさらに減らす */
    }

    .header {
        padding: 10px 0; /* 上下の余白を追加 */
    }

    .header-logo {
        height: 20px; /* ロゴのサイズをさらに小さくする */
        margin-top: 0; /* 上の余白を削除 */
    }

    .header-right {
        float: center; /* 回り込みを解除 */
        text-align: center; /* メニューを中央揃え */
        margin-top: 5px; /* 上に少し余白を追加 */
    }

    .header-right a {
        display: glid; /* メニューを縦に並べる */
        font-size: 14px; /* フォントサイズを調整 */
        padding: 10px 0; /* パディングを上下に適用 */
    }

    .menu-card {
        width: calc(100% - 20px); /* 1列で表示 */
        margin: 10px; /* 上下左右のマージンを設定 */
        margin-top: 15px; /* 各カード間の余白をさらに減らす */
    }

    .main-goal {
        font-size: 30px; /* メインビジュアルのテキストサイズを小さく */
        text-align: center; /* テキストを中央揃え */
    }

    .latest_news {
        font-size: 24px; /* 新着ニュースのタイトルサイズを調整 */
        text-align: center; /* タイトルを中央揃え */
    }

    .label {
        width: auto; /* ラベルの幅を自動に */
        padding: 5px 15px; /* パディングを調整 */
    }

    #table03, #table03 tr, #table03 th, #table03 td {
        display: block;
        width: 100%;
    }

    #table03 tr {
        margin-bottom: 15px; /* 各行の間に余白を追加 */
    }

    #table03 th, #table03 td {
        position: relative; /* 縦線のために相対位置を設定 */
        padding-left: 15px; /* 縦線とテキストの間に余白を追加 */
    }

    #table03 th::before, #table03 td::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px; /* 縦線の太さ */
        background-color: black; /* 縦線の色 */
    }

    .footer {
        padding: 20px 0; /* 全体に余白を追加 */
    }

    .footer_left, .footer_right {
        float: none; /* 回り込みを解除 */
        margin-bottom: 20px; /* 各ブロックの下部に余白を追加 */
    }

    .news li {
        flex-direction: column; /* リストアイテム内の要素を縦並びに変更 */
        align-items: flex-start; /* 左揃えに変更 */
    }

    .news .day, .news .label, .news .text {
        width: 100%; /* 各要素を幅100%に */
        margin-bottom: 10px; /* 各要素の下に余白を追加 */
        text-align: left; /* テキストを左揃え */
    }
    .news-button {
        display: grid;
    }
    .gmap_iframe {
        aspect-ratio: 16 / 9;
        max-width: 500px;
        width: 100%;
        height: auto;
    }
}