/* ===== リセット ===== */
    *{
        box-sizing: border-box;
        margin:0;
        padding:0;
    }

    body{
        font-family: sans-serif;
        background:#f4f6f8;
    }

/* ===== ヘッダー ===== */
    header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:20px 40px;
        background:white;
        border-bottom:1px solid #ddd;
        position:relative;
        z-index:100;
    }

    .logo{
        font-weight:bold;
        font-size:20px;
    }

    nav{
        display:flex;
    }

    nav a{
        margin-left:20px;
        text-decoration:none;
        color:#333;
    }

/* ===== ハンバーガー ===== */
    .menu-toggle{
        display:none;
        font-size:28px;
        cursor:pointer;
    }

/* ===== ヒーロー ===== */
    .hero{
        background:linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
        ),
        url("28372553_m.jpg");

        background-size:cover;
        background-position:center;
        color:white;
        padding:120px 40px;
    }

    .hero h1{
        font-size:40px;
    }

    .hero ul{
        margin:20px 0;
    }

/* ===== ボタン ===== */
    .cta{
        display:inline-block;
        background:#ff8c00;
        padding:15px 30px;
        color:white;
        text-decoration:none;
        border-radius:5px;
        font-weight:bold;
    }

/* ===== セクション ===== */
    section{
        padding:60px 40px;
    }

/* ===== サービス ===== */
    .service-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:20px;
        margin-top:30px;
    }

    .box{
        background:white;
        padding:25px;
        text-align:center;
        border-radius:8px;
        cursor:pointer;
        transition:0.3s;
        box-shadow:0 4px 12px rgba(0,0,0,0.08);
    }

    .box:hover{
        transform:translateY(-5px);
    }

/* ===== テーブル ===== */
    table{
        width:100%;
        border-collapse:collapse;
        background:white;
    }

    th, td{
        border:1px solid #ccc;
        padding:12px;
    }

/* ===== 製品 ===== */
    .product-content{
        display:flex;
        align-items:center;
        gap:40px;
    }

    .product-text{
        flex:1;
    }

    .product-image{
        flex:1;
        text-align:center;
    }

    .product-image img{
        width:100%;
        max-width:400px;
        border-radius:10px;
        transition:0.3s;
    }

    .product-image img:hover{
        transform:scale(1.05);
    }

/* ===== エリア・お問い合わせ ===== */
    .area-contact{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

/* ===== フッター ===== */
    footer{
        text-align:center;
        padding:20px;
        background:#222;
        color:white;
    }

/* ===== ポップアップ ===== */
    .popup{
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.6);
        justify-content:center;
        align-items:center;
        z-index:1000;
    }

    .popup-content{
        background:white;
        padding:30px;
        width:500px;
        max-width:90%;
        border-radius:10px;
        text-align:center;
        position:relative;
        animation: popupFade 0.3s ease;
    }

    @keyframes popupFade{
        from{
            transform:scale(0.9);
            opacity:0;
        }
        to{
            transform:scale(1);
            opacity:1;
        }
    }

    .popup-content img{
        width:100%;
        margin:20px 0;
        border-radius:8px;
    }

    .close{
        position:absolute;
        top:10px;
        right:20px;
        font-size:30px;
        cursor:pointer;
    }

/* ===== スマホ対応 ===== */
    @media(max-width:768px){

    /* ヘッダー固定 */
        header{
            position:fixed;
            top:0;
            left:0;
            right:0;
            padding:15px 20px;
            background:white;
            z-index:1000;
        }

        body{
            padding-top:80px;
            overflow-x:hidden;
        }

    /* ハンバーガー表示 */
        .menu-toggle{
            display:block;
        }

    /* メニュー */
        nav{
            display:none;
            flex-direction:column;
            width:100%;
            background:white;
            position:absolute;
            top:100%;
            left:0;
            padding:20px;
            border-top:1px solid #ddd;
        }

        nav.active{
            display:flex;
        }

        nav a{
            margin:10px 0;
            padding:10px;
            border-bottom:1px solid #eee;
        }

    /* ヒーロー */
        .hero{
            padding:80px 20px;
        }

        .hero h1{
            font-size:26px;
        }

    /* サービス */
        .service-grid{
            grid-template-columns:1fr 1fr;
        }

    /* 製品 */
        .product-content{
            flex-direction:column;
        }

    /* エリア */
        .area-contact{
            grid-template-columns:1fr;
        }

}