/* 基本設定 */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}

/* コンテナ（幅の制限） */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

/* ヘッダー */
header {
    background-color: #2e7d32; /* 造園らしい濃い緑 */
    color: white;
    padding: 10px 0;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
header h1 { font-size: 1.2rem; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a { color: white; text-decoration: none; }

/* ヒーロー画像（トップの大きな背景） */
.hero {
    background-image: url('images/after1.jpg'); /* 背景画像を指定 */
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: whitesmoke;
    text-shadow: 1px 1px 1px black;
}
.hero h2 { font-size: 2.5rem; margin-bottom: 10px; }

/* 画像ギャラリー（横並び） */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    justify-content: center;
}
.photo-box {
    width: 500px; /* 画像の幅 */
}
.photo-box img {
    width: 100%;  
    height: 600px;
    object-fit: cover;
    border-radius: 10px;
}

/* Instagramボタン */
.insta-btn {
    display: inline-block;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    padding: 15px 30px;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 50px;
    margin-top: 20px;
    transition: opacity 0.3s;
}
.insta-btn:hover {
    opacity: 0.8;
}

/* フッター */
footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
}


/* =========================================
   スマホ用レスポンシブ設定 (画面幅768px以下)
   ========================================= */
@media screen and (max-width: 768px) {

    /* コンテナの余白を少し狭くして画面を広く使う */
    .container {
        padding: 30px 15px;
    }

    /* ヘッダー：ロゴとメニューを縦に並べる */
    .header-container {
        flex-direction: column; /* 縦並びにする */
        gap: 15px;
    }
    
    /* メニューの文字サイズを調整し、折り返しを許可 */
    nav ul {
        flex-wrap: wrap;       /* 画面幅が足りないときに折り返す */
        justify-content: center; /* 中央寄せ */
        gap: 15px;
        padding: 0;
    }
    
    /* ヒーロー画像：スマホでは高さを少し抑える */
    .hero {
        height: 300px;
    }
    .hero h2 {
        font-size: 1.8rem; /* 文字を少し小さく */
        padding: 0 10px;
    }

    /* 画像ギャラリー：1列表示にする */
    .photo-box {
        width: 100%;       /* 幅を固定の500pxから、画面いっぱい(100%)に変更 */
        margin-bottom: 20px; /* 下に隙間をあける */
    }

    /* 画像の高さもスマホ用に小さくする */
    .photo-box img {
        height: 300px;     /* 高さを600pxから300pxに減らす */
    }
}