@charset "UTF-8";

/*  ふるさと納税メッセージ用のCSS*/

        /* 全体の背景と余白 */
        .furusatoNozeiMessageResponsive {
            background-color: #f0f0f0;
            width: 100%;
            box-sizing: border-box;
            padding: 10px 0; /* 上下のパディングはデフォルトで設定 */
           /* margin-bottom: 20px;  下に他の要素との隙間 */
        }

        /* メインのコンテンツブロック */
        .furusatoNozeiMessageResponsive .kanban_notice_bg {
            margin: 0 auto; /* 中央寄せ */
        }

        /* アイコンとテキストのコンテナ */
        .furusatoNozeiMessageResponsive .kanban_notice_bg__inner {
            display: flex; /* 横並び維持 */
            align-items: center;
            padding: 10px; /* 内側のパディング */
        }

        /* アイコンのラッパー */
        .furusatoNozeiMessageResponsive .kanban_notice_bg__image {
            flex-shrink: 0; /* 画像が縮まないようにする */
        }

        /* アイコン画像 */
        .furusatoNozeiMessageResponsive .kanban_notice_bg__image img {
            height: auto; /* アスペクト比を維持 */
            display: block; /* 余分な下マージンを削除 */
        }

        /* テキストのラッパー */
        .furusatoNozeiMessageResponsive .kanban_notice_bg__text {
            flex-grow: 1; /* 残りのスペースを埋めるように拡張 */
        }

        /* テキスト */
        .furusatoNozeiMessageResponsive .kanban_notice_bg__text p {
            line-height: 1.5; /* 行の高さを調整 */
            margin: 0; /* pタグのデフォルトマージンを削除 */
        }

        /* -------------------- PC向けスタイル (701px以上) -------------------- */
        @media (min-width: 701px) {
            .furusatoNozeiMessageResponsive .kanban_notice_bg {
                width: 560px; /* PCでの固定幅 */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__inner {
                gap: 20px; /* PCでの要素間の隙間 */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__image img {
                max-width: 55px; /* PCでの画像サイズ */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__text p {
                font-size: 15px; /* PCでのフォントサイズ */
            }
        }

        /* -------------------- SP向けスタイル (700px以下) -------------------- */
        @media (max-width: 700px) {
            .furusatoNozeiMessageResponsive {
                padding: 10px; /* SPでは左右にもパディング */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg {
                width: 100%; /* SPでは幅いっぱい */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__inner {
                /* flex-direction: column; を削除 */
                /* text-align: center; も削除（横並び維持のため） */
                gap: 15px; /* SPでの要素間の隙間を調整 (PCより少し小さく) */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__image img {
                max-width: 45px; /* SPでの画像サイズ */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__text p {
                font-size: 14px; /* SPでのフォントサイズ */
            }
        }

        /* さらに小さな画面（例: 480px以下）での調整 */
        @media (max-width: 480px) {
            .furusatoNozeiMessageResponsive .kanban_notice_bg__inner {
                gap: 10px; /* さらに狭い画面での隙間を調整 */
                padding: 5px; /* 内側のパディングも調整する可能性あり */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__image img {
                max-width: 40px; /* さらに画像を小さく */
            }
            .furusatoNozeiMessageResponsive .kanban_notice_bg__text p {
                font-size: 13px; /* さらにフォントを小さく */
            }
        }