/*
 * responsive.css  ―  STAND ALIVE  home/index.jsp 用
 *
 * ブレークポイント設計
 *   ≥1200px  : デスクトップ大（基準 / stylesheet.css のまま）
 *    992–1199px : デスクトップ小 / 大型タブレット横
 *    768–991px  : タブレット縦
 *    480–767px  : スマートフォン横 / 大型スマホ
 *    360–479px  : スマートフォン縦（最小）
 */


/* ============================================================
   全幅共通
   ============================================================ */

/* menuHint：常に非表示（今回は使用しない） */
#menuHint { display: none; }


/* ============================================================
   ≥1200px : デスクトップ大（基準）
   menueFrameの表示はJSのapplyHeaderStateで制御
   ============================================================ */
@media (min-width: 1200px) {
}


/* ============================================================
   992px ～ 1199px : デスクトップ小 / 大型タブレット横
   ============================================================ */
@media (max-width: 1199px) {

    #title1 { font-size: 40px; }
    .menues { font-size: 24px; }

    #catchCopy h1 { width: auto; max-width: 100%; height: auto; font-size: 2.0em; }
    #catchCopy h3 { width: auto; max-width: 100%; font-size: 1.0em; }

    #stVision img          { width: 35%; }
    #majorActivityFrame img { max-width: 50%; }
}


/* ============================================================
   768px ～ 991px : タブレット縦
   ============================================================ */
@media (max-width: 991px) {

    /* ヘッダー */
    #title1 { font-size: 36px; }
    #title2 { font-size: 0.85em; }

    /* 通常メニューは閉じた状態（JS の開閉に委ねる） */
    #menueFrame { display: none; }

    .menues { font-size: 22px; height: auto; padding: 8px 0; }

    /* キャッチコピー */
    #catchCopy         { width: 90%; left: 5%; top: 40%; }
    #catchCopy h1      { width: auto; height: auto; font-size: 1.8em; line-height: 1.4; }
    #catchCopy h3      { width: auto; font-size: 0.95em; }

    /* ビジョン */
    #stVision          { padding: 120px 4% 50px; }
    #stVision h1       { font-size: 1.6em; }
    #stVision h3       { font-size: 0.95em; }
    #stVision img      { width: 45%; margin-right: 15px; border-radius: 25px; }

    /* 活動実績 */
    #majorActivityFrame        { flex-direction: column; }
    #majorActivityFrame img    { max-width: 100%; width: 100%; }
    #majorActivityFrame ul     { padding-left: 15px; }

    /* 寄付カード */
    #donationCardsWrap { flex-direction: column; }
    .donationCard      { flex: 1 1 100%; }

    /* お知らせ */
    #information       { width: 95%; }

    /* フッター */
    #menues2-wrapper   { gap: 10px; }
}


/* ============================================================
   ～ 600px : フッターボタンをアイコンのみに縮小
   ============================================================ */
@media (max-width: 600px) {

    .menues2 div .btn-label { display: none; }
    .menues2 div .btn-icon  { font-size: 1.4em; }
    #menues2-wrapper        { gap: 10px; }

    #basicInfo p { white-space: normal; font-size: 0.8em; }
}


/* ============================================================
   480px ～ 767px : スマートフォン横 / 大型スマホ
   ============================================================ */
@media (max-width: 767px) {

    /* ヘッダー */
    header  { padding: 15px 15px; border-radius: 15px; }
    #title1 { font-size: 28px; }
    #title2 { font-size: 0.75em; }
    .menues { font-size: 18px; }

    /* キャッチコピー */
    #catchCopy    { width: 92%; left: 4%; top: 38%; }
    #catchCopy h1 { font-size: 1.4em; line-height: 1.5; }
    #catchCopy h3 { font-size: 0.85em; line-height: 1.6; }

    /* ビジョン */
    #stVision     { padding: 100px 3% 40px; }
    #stVision h1  { font-size: 1.3em; }
    #stVision h3  { font-size: 0.88em; line-height: 1.7; }
    #stVision img { float: none; display: block; width: 80%; margin: 0 auto 20px; border-radius: 20px; }

    /* セクション共通 */
    #section2, #section3, #section4, #section5 { padding: 30px 15px; }

    /* 活動実績 */
    #majorActivities h1 { font-size: 1.1em; line-height: 1.4; }

    /* 寄付カード */
    .donationCard     { flex-direction: column; gap: 10px; }
    .donationCardIcon { font-size: 32px; }

    /* お知らせ */
    #information  { width: 100%; }
    #infoTable    { font-size: 15px; }
    #infoTable th { display: block; padding-right: 0; font-weight: bold; padding-top: 8px; }
    #infoTable td { display: block; border-bottom: 1px dashed rgba(0,0,0,0.15); padding-bottom: 10px; }

    /* フッター */
    #menues2-wrapper { flex-wrap: wrap; gap: 8px; }
    #basicInfo p     { font-size: 0.85em; }
}


/* ============================================================
   360px ～ 479px : スマートフォン縦（最小）
   ============================================================ */
@media (max-width: 479px) {

    /* ヘッダー */
    header  { padding: 12px 15px; border-radius: 15px; }
    #title1 { font-size: 22px; }
    #title2 { font-size: 0.65em; }
    .menues { font-size: 16px; }

    /* キャッチコピー */
    #catchCopy    { top: 35%; width: 94%; left: 3%; }
    #catchCopy h1 { font-size: 0.95em; line-height: 1.55; }
    #catchCopy h3 { font-size: 0.78em; line-height: 1.65; }

    /* ビジョン */
    #stVision     { padding: 90px 2% 30px; }
    #stVision h1  { font-size: 1.1em; }
    #stVision h3  { font-size: 0.82em; }
    #stVision img { width: 95%; }

    /* 活動実績 */
    #majorActivities h1    { font-size: 1.0em; }
    #majorActivityFrame ul { padding-left: 10px; font-size: 0.88em; }

    /* お知らせ */
    #infoTable { font-size: 13px; }

    /* フッター：団体名を2行に */
    #orgType {
        display: block;
        font-size: 0.85em;
    }
    #orgName {
        display: block;
        font-weight: bold;
    }
    #basicInfo p      { font-size: 0.78em; }
    .menues2 div .btn-icon { font-size: 1.2em; }
    #menues2-wrapper  { gap: 6px; }
}