@charset "UTF-8";
/* 
 * レスポンシブ対応CSS for hope1970.co.jp (Ultimate Reset Mode v5)
 * 更新日: 2026-02-06
 * 
 * 元サイトのあらゆる横並び指定、絶対配置、固定幅を徹底的に破壊し、
 * スマートフォンで「完全な1カラム（縦一型）」を強制する最終手段です。
 */

@media screen and (max-width: 768px) {

    /* ===== 0. 核爆発級リセット（最優先） ===== */
    /* 指定範囲内の全ての要素から、レイアウトを固定する属性を剥ぎ取る */
    #wrapper,
    #topcontent,
    .products,
    .top_flash {
        float: none !important;
        position: static !important;
        /* 絶対配置を完全に殺す */
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* ===== 1. ヘッダー・ロゴ ===== */
    header,
    #header {
        padding: 10px 0 !important;
        background: #fff !important;
    }

    img[src*="logo"] {
        max-width: 200px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* 検索バーを1行に */
    form {
        display: flex !important;
        padding: 10px !important;
    }

    form input[type="text"] {
        flex: 1 !important;
        padding: 10px !important;
        display: inline-block !important;
        /* ここだけはinline-blockを許可 */
    }

    form input[type="submit"] {
        width: 80px !important;
        display: inline-block !important;
    }

    /* ヘッダーメニューをタップしやすいカード状に */
    header table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 8px !important;
        display: block !important;
        padding: 0 10px 10px !important;
        box-sizing: border-box !important;
    }

    header table tbody,
    header table tr {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    header table td {
        flex: 1 1 calc(50% - 8px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 52px !important;
        padding: 10px !important;
        text-align: center !important;
        border: 1px solid #dfe3e8 !important;
        border-radius: 10px !important;
        background: #f7f8fa !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
    }

    header table td a {
        display: block !important;
        width: 100% !important;
        color: #0b2b5b !important;
        text-decoration: none !important;
        font-weight: 700 !important;
    }

    /* ===== 2. 会社紹介（青文字）の適正化 ===== */
    .top_flash,
    [class*="flash"] {
        background: #fff !important;
        border-bottom: 3px solid #003366 !important;
        margin: 15px 0 !important;
    }

    /* 青文字の強制リサイズ */
    #topcontent span[style*="blue"],
    .top_flash span,
    .top_flash p {
        color: #003366 !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        font-weight: bold !important;
        padding: 10px !important;
    }

    .top_flash br {
        display: none !important;
    }

    /* ===== 3. スライダー（画像のみ表示） ===== */
    #top_newflash {
        margin: 10px 0 !important;
    }

    #top_newflash img {
        width: 100% !important;
    }

    .bx-wrapper,
    .bx-viewport {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .bx-wrapper .bxslider,
    .bx-wrapper .bxslider li,
    .bx-wrapper .bxslider li img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .bx-wrapper .bx-pager {
        text-align: center !important;
    }

    .bx-wrapper .bx-pager-item {
        display: inline-block !important;
        float: none !important;
        margin: 0 4px !important;
    }

    /* Skitterの邪魔なUIを完全消去 */
    .numbers_skitter,
    .label_skitter,
    .prev_skitter,
    .next_skitter {
        display: none !important;
    }

    /* ===== 4. 製品リストのタイトル・箇条書き ===== */
    /* タイトル（H3など）を強調 */
    h3,
    b,
    strong,
    [style*="font-size:1.8em"] {
        font-size: 18px !important;
        color: #003366 !important;
        border-left: 6px solid #003366 !important;
        padding-left: 10px !important;
        margin: 20px 0 10px 0 !important;
        background: #f8f8f8 !important;
    }

    /* 箇条書きを整列 */
    ul {
        margin: 10px 0 20px 20px !important;
        display: block !important;
    }

    li {
        display: list-item !important;
        /* リスト丸を表示させるためにblockから戻す */
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee !important;
        width: 100% !important;
    }

    /* ===== 5. 動画・バナー ===== */
    iframe,
    video,
    .youtube {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        margin: 15px 0 !important;
    }

    /* ===== 6. フッター ===== */
    #footer {
        background: #333 !important;
        color: #fff !important;
        padding: 40px 10px !important;
    }

    #footer * {
        color: #fff !important;
        text-align: center !important;
    }

    /* 無駄な余白削除 */
    .cler,
    br+br {
        display: none !important;
    }

    /* 追加: 各カラムの幅を100%に */
    .col,
    .info2_01,
    .info2_02,
    .info2_03,
    .info2_04,
    .info2_05,
    .info2_01_banner,
    .info2_02_banner,
    .info2_03_banner,
    .info2_04_banner,
    .info2_05_banner {
        width: 100% !important;
    }

    .news-box {
        max-width: 100% !important;
        height: auto !important;
    }

    #news_top {
        height: auto !important;
    }
}