@charset "utf-8";

/* ==========================================
   1. トップページ固有パーツ・ウィジェット
   ========================================== */
.widget-content, 
.search-box, 
.info-box {
    border: 1px solid #BFDAEF;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 15px;
}

.widget-title, 
.section-title {
    margin: 0 0 6px 0;
}

.widget-title img, 
.section-title img {
    max-width: 100%;
    height: auto;
    display: block;
}

.top-sub-title {
    border: 1px solid #5A8FC5;
    border-radius: 3px 3px 0 0;
    background-color: #BFDAEF;
    text-align: left;
    padding-left: 10px;
    line-height: 23px;
    font-weight: bold;
}

/* 検索枠内パーツ */
.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.search-header-secondary {
    margin-top: 15px;
}

.detail-link {
    font-size: 0.85rem;
}

.divider {
    border: 0;
    border-top: 1px solid #D4D5D6;
    margin: 8px 0;
}

.search-form-group {
    margin-bottom: 12px;
}

.search-label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.input-group {
    display: flex;
    gap: 5px;
}

.btn-search {
    padding: 6px 14px;
    white-space: nowrap;
}

/* お問い合わせ・バナー */
.contact-info {
    font-size: 0.9rem;
    line-height: 1.5;
}

.banner-center {
    text-align: center;
    margin-top: 10px;
}

.banner-center img {
    max-width: 100%;
    height: auto;
}

/* ==========================================
   2. PC表示 (769px以上)
   左：300px固定（検索/info/お問い合わせ）
   右：可変・最大化（更新情報/開催予定）
   ========================================== */
@media screen and (min-width: 769px) {
    .main-layout {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 20px;
        align-items: start;
    }

    .group-left {
        display: flex;
        flex-direction: column;
        width: 300px;
    }

    .group-right {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
}

/* ==========================================
   3. スマホ表示 (768px以下)
   順番: 更新情報 ➔ 広告 ➔ 開催予定 ➔ 広告 ➔ 検索 ➔ 広告 ➔ インフォメーション ➔ 広告 ➔ お問い合わせ
   ========================================== */
@media screen and (max-width: 768px) {
    /* 親コンテナをFlexboxにして並び替えを有効化 */
    .main-layout {
        display: flex;
        flex-direction: column;
    }

    /* 左右グループの枠組みを透過させ、直下のブロック同士でソート可能にする */
    .group-left, 
    .group-right {
        display: contents;
    }

    /* --- 指定順通りのソート指定 (order) --- */
    .block-modlist   { order: 1; }  /* 1. 更新情報 */
    .block-ad-right1 { order: 2; }  /* 2. 広告 1 */
    .block-schedule  { order: 3; }  /* 3. 開催予定 */
    .block-ad-left1  { order: 4; }  /* 4. 広告 2 */
    .block-search    { order: 5; }  /* 5. 検索 */
    .block-ad-left2  { order: 6; }  /* 6. 広告 3 */
    .block-info      { order: 7; }  /* 7. インフォメーション */
    .block-ad-right2 { order: 8; }  /* 8. 広告 4 */
    .block-contact   { order: 9; }  /* 9. お問い合わせ */

    .input-group {
        flex-direction: column;
    }

    .btn-search {
        width: 100%;
        margin-top: 4px;
    }
}