@charset "UTF-8";

/* =================================================
   1. PC版 (768px以上) 
   ================================================= */
@media screen and (min-width: 768px) {
    #toppage { margin: 0 auto; }
    .bn-top-box, .bn-top, .bn-top24 { max-width: 1070px; margin: 0 15px; }
    .bn-top ul, .bn-top24 ul { margin: 0; padding: 0; display: table; width: 100%; border-collapse: separate; border-spacing: 15px 0; }
    .bn-top li, .bn-top24 li { display: table-cell; width: 33.33%; padding: 38px 0 15px; vertical-align: top; list-style: none; position: relative; }
    
    .bn-top li a { display: block; background: #ec6d2f !important; position: relative; }
    .bn-top img { width: 100% !important; height: auto !important; display: block; max-height: none !important; }

    /* 下部：ご提示の元の数値を維持 */
    .h2-top { margin: 37px auto 0; width: 302px; display: block; }
    .pic-list, .insta-list, .kyosan-list { max-width: 1040px; background: #FFFFFF; margin: -62px 30px 0; padding: 60px 0; }
    .pic-list li { max-width: 840px; margin: 0 105px; padding: 25px 0; font-size: 1.2rem; border-bottom: thin solid #ec6d2f; list-style: none; }
    .pic-list a { color: #ec6d2f; text-decoration: none; }

    .bn-kyosan, .cm-kyosan { display: table !important; max-width: 1070px; margin: 0 64px; }
    .bn-kyosan ul, .cm-kyosan ul { margin: 0; padding: 0; }
    .bn-kyosan li, .cm-kyosan li { display: table-cell !important; width: 1% !important; padding: 38px 40px 15px; list-style: none; }
    
    .See-details, .See-details a { text-align: center; font-size: 1.2rem; color: #564e4b; text-decoration: none; }
    .bn-line { display: block; width: 100%; margin: 68px auto 60px; text-align: center; }

    /* PC版ラベル */
    .bn-top li:nth-child(2) a:before {
        position: absolute; top: 9%; right: 9%; background-color: #fff100;
        content: "更新中\A check!"; white-space: pre; display: flex; justify-content: center; align-items: center;
        width: 60px; height: 60px; border-radius: 50%; color: #ec6d2f; font-weight: bold; font-size: 12px; line-height: 1.2; z-index: 5;
    }
}

/* =================================================
   2. スマホ版 (767px以下)
   ================================================= */
@media screen and (max-width: 767px) {
    /* オレンジボタンエリアを強制的に縦並び・大きくする */
    .bn-top-box, .bn-top { margin: 15px 5% !important; width: 90% !important; max-width: none !important; }
    .bn-top ul { display: block !important; padding: 0 !important; margin: 0 !important; }
    .bn-top li { display: block !important; width: 100% !important; margin: 0 0 15px 0 !important; padding: 0 !important; list-style: none !important; }

    .bn-top li a {
        display: flex !important; justify-content: center !important; align-items: center !important;
        background: #ec6d2f !important; 
        width: 100% !important; 
        aspect-ratio: 2 / 1 !important; /* 比率を1:2に強制 */
        position: relative !important;
    }
    .bn-top li a img {
        width: auto !important; height: auto !important;
        max-width: 92% !important; max-height: 85% !important; 
        object-fit: contain !important;
    }

    /* スマホ版ラベル */
    .bn-top li:nth-child(2) a:before {
        position: absolute !important; top: 8% !important; right: 5% !important;
        background-color: #fff100 !important; content: "更新中\A check!" !important; white-space: pre !important;
        display: flex !important; justify-content: center !important; align-items: center !important;
        width: 55px !important; height: 55px !important; border-radius: 50% !important;
        color: #ec6d2f !important; font-weight: bold !important; font-size: 10px !important; line-height: 1.2 !important; z-index: 10 !important;
    }

    /* 下部：ご提示の元の数値を維持 */
    .h2-top { margin: 15px auto; width: 180px; display: block; }
    .pic-list, .kyosan-list { background: #FFFFFF; margin: -47px 5% 0; padding: 30px 0 10px; }
    .pic-list li { margin: 0 22px; padding: 14px 0; font-size: 1.0rem; border-bottom: thin solid #ec6d2f; list-style: none; }

    /* 協賛企業・動画（縦並びを確実に適用） */
    .bn-kyosan, .cm-kyosan { margin: 30px 22px 0 !important; display: block !important; }
    .bn-kyosan ul, .cm-kyosan ul { display: block !important; padding: 0 !important; }
    .bn-kyosan li, .cm-kyosan li { display: block !important; width: 100% !important; padding: 0 0 15px 0 !important; list-style: none !important; }
    .cm-kyosan li iframe { width: 100% !important; height: 210px !important; }

    .See-details { text-align: center; margin-top: 15px; font-size: 1.0rem; color: #564E4B; }
    .bn-line { margin: 34px auto; width: 96%; text-align: center; }
}