/* 基本のCSS */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: url('/image/gazo1.jpg') no-repeat center center fixed;
    background-size: cover;
}




header {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(173, 216, 230, 0.9)); /* 明るいグラデーション（白→水色） */
    color: rgb(30, 30, 30); /* 濃いグレーで見やすく */
    text-align: center;
    padding: 20px;
    font-size: 24px; /* 少し大きめのフォント */
    font-weight: bold; /* 太字で引き締める */
    letter-spacing: 2px; /* 文字間隔を広げてスタイリッシュに */
    text-transform: uppercase; /* すべて大文字にしてデザイン性UP */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* 影を軽めにして上品に */
    width: 100%; /* 幅いっぱいに広げる */
    top: 0;
    left: 0;
    z-index: 1000; /* 最前面に */
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    background: rgb(182, 216, 127);
}

nav ul li {
    margin: 0 15px;
}
/*ホーム、サービス、会社概要、お問い合わせの文字の色*/
nav ul li a {
    color: rgb(194, 110, 54);
    text-decoration: none;
    padding: 10px;
    display: block;
}

/*東総農芸の特徴の部分の調整*/
.hero {
    /* 背景画像の設定（現在コメントアウトされている） */
    /* background: url('/image/denen.jpg') no-repeat center center/cover; */
    /* 透明感のある白背景を設定 */
    background: rgba(255, 255, 255, 0.9);
    /* 文字の色をを変える */
    color: rgb(2, 1, 10);
    /* テキストを中央揃えにする */
    text-align: center;
    /* 上下100px、左右20pxの余白を設定（セクションの高さを確保） */
    padding: 20px 20px;
    /* 相対位置を指定（子要素の位置調整に使用可能） */
    position: relative;
    margin: 10px;  /* 外側の余白を10px確保（他の要素との間隔を作る） */
    border-radius: 10px;  /* 角を10px丸くして、柔らかいデザインにする */
}

/* ヒーローコンテナ内の h2 タグのスタイル */
.hero-container h2 {
    /* 文字の色を緑系に設定 */
    color: rgb(108, 148, 0);
    /* 文字に薄い白い影をつけて立体感を出す */
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
    /* 文字を太字にする */
    font-weight: bold;
    /* 文字サイズを40pxに設定（大きくする） */
    font-size: 100px;
    /* h2 の背景を透明度のある白にする（テキストの視認性を向上） */
    background: rgba(255, 255, 255, 0.9);
}

.hero-container .bun {
	text-align: left;
	display: inline-block;
}

/*事業紹介の部分の調整*/
.jigyo {
    /* 背景画像の設定（現在コメントアウトされている） */
    /* background: url('/image/denen.jpg') no-repeat center center/cover; */
    /* 透明感のある白背景を設定 */
    background: rgba(250, 250, 250, 0.9);
    /* 文字の色を濃い青にする */
    color: rgb(2, 1, 10);
    /* テキストを中央揃えにする */
    text-align: center;
    /* 上下100px、左右20pxの余白を設定（セクションの高さを確保） */
    padding: 20px 20px;
    /* 相対位置を指定（子要素の位置調整に使用可能） */
    position: relative;
    margin: 10px;  /* 外側の余白を10px確保（他の要素との間隔を作る） */
    border-radius: 10px;  /* 角を10px丸くして、柔らかいデザインにする */
}

/* 事業紹介の h2 タグのスタイル */
.jigyo-container h2 {
    /* 文字の色を緑系に設定 */
    color: rgb(108, 148, 0);
    /* 文字に薄い白い影をつけて立体感を出す */
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
    /* 文字を太字にする */
    font-weight: bold;
    /* 文字サイズを40pxに設定（大きくする） */
    font-size: 40px;
}

.jigyo-container p {
    color: rgb(111, 150, 3);
    font-size: 25px;
}


/* スライドショー全体のスタイル */
.slideshow-container {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
}

/* 各スライドのスタイル */
.slide {
    display: none; /* 初期状態では非表示 */
    width: 100%;
}

/* 画像のサイズ調整 */
.slide img {
    width: 50%; /* 画像の幅を50%にする（適宜調整） */
    max-width: 400px; /* 画像の最大幅を400pxに制限 */
    border-radius: 10px; /* 角を丸くする */
}

/* フェードイン・フェードアウトのアニメーション */
.fade {
    animation: fadeEffect 1.5s ease-in-out;
}

@keyframes fadeEffect {
    from {opacity: 0.4;}
    to {opacity: 1;}
}

.gazou {
    text-align: center;  /* 要素内のテキストや画像を中央揃えにする */
    padding: 40px;  /* 内側の余白を40px確保（コンテンツが詰まらないようにする） */
    background: rgba(255, 255, 255, 0.9);  /* 透明度90%の白背景を設定（少し透ける） */
    margin: 10px;  /* 外側の余白を10px確保（他の要素との間隔を作る） */
    border-radius: 10px;  /* 角を10px丸くして、柔らかいデザインにする */
}

.gazou-container {
    display: flex;  /* 子要素（画像）を横並びに配置するためのFlexboxを適用 */
    flex-wrap: wrap;  /* 画面幅が狭くなったときに、折り返して次の行に配置する */
    justify-content: center;  /* 子要素（画像）を中央揃えにする */
    gap: 10px;  /* 子要素（画像）同士の間隔を10px空ける */
}

.gazou-container img {
    width: 30%;  /* 画像の幅を30%に設定 */
    max-width: 900px;  /* 画像の最大幅を900pxに制限（画面が広くても大きくなりすぎないようにする） */
    height: auto;  /* アスペクト比を維持しつつ高さを自動調整 */
    border-radius: 10px;  /* 画像の角を丸くする（10pxの角丸） */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);/* 画像に影をつけて立体感を出す */
}

/* 規約ファイルを開く */
.pdf-button {
    display: inline-block;  /* インラインブロック要素にして幅と高さを適用できるようにする */
    padding: 15px 25px;  /* ボタンの余白（上下15px、左右25px） */
    
    /* 背景を左から右に向かうグラデーションに設定 */
    background: linear-gradient(to right, #ff7e5f, #feb47b); 
    
    color: white;  /* ボタンの文字色を白にする */
    text-decoration: none;  /* 下線を削除 */
    border-radius: 10px;  /* ボタンの角を丸くする */
    font-weight: bold;  /* 文字を太字にする */
    text-align: center;  /* 文字を中央揃えにする */
    
    /* ボタンに影をつけて立体感を出す */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    
    /* ホバー時のアニメーションをスムーズにする */
    transition: 0.3s ease-in-out;
}

/* ホバー時のスタイル */
.pdf-button:hover {
    /* 背景色を青に変更（ただし、グラデーションが消えるため注意） */
    background-color: #0056b3;
}

/* 監理費表ファイルを開く */
.pdf-button2 {
    display: inline-block;  /* インラインブロック要素にして幅と高さを適用できるようにする */
    padding: 15px 25px;  /* ボタンの余白（上下15px、左右25px） */
    /* 背景を左から右に向かうグラデーションに設定 */
    background: linear-gradient(to right, #ff7e5f, #feb47b); 
    color: white;  /* ボタンの文字色を白にする */
    text-decoration: none;  /* 下線を削除 */
    border-radius: 10px;  /* ボタンの角を丸くする */
    font-weight: bold;  /* 文字を太字にする */
    text-align: center;  /* 文字を中央揃えにする */
    /* ボタンに影をつけて立体感を出す */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    /* ホバー時のアニメーションをスムーズにする */
    transition: 0.3s ease-in-out;
}

/* ホバー時のスタイル */
.pdf-button2:hover {
    /* 背景色を青に変更（ただし、グラデーションが消えるため注意） */
    background-color: #0056b3;
}

/*
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(250, 250, 250);
} */

.hero h1, .hero p {
    position: relative;
    z-index: 2;
}

/*
.service-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px;
}

.service-item {
    width: 30%;
    background: rgba(244, 244, 244, 0.9);
    padding: 20px;
    margin: 10px;
    text-align: center;
    border-radius: 8px;
}

.contact-form {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background: rgba(221, 221, 221, 0.9);
    border-radius: 8px;
}

footer {
    background: rgba(51, 51, 51, 0.8);
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
} */

/* レスポンシブデザイン（スマホ対応） */
@media screen and (max-width: 768px) {
    nav ul {
        display: block;
        text-align: center;
        padding: 10px 0;
    }
    
    nav ul li {
        display: block;
        margin: 10px 0;
    }
    
    .hero {
        padding: 50px 20px;
        background-position: center top;
    }
    
    .service-grid {
        display: block;
    }
    
    .service-item {
        width: 90%;
        margin: 10px auto;
    }
    
    .contact-form {
        width: 90%;
        margin: 0 auto;
    }
}

.inquiry {
    /* 透明感のある白背景を設定 */
    background: rgba(255, 255, 255, 0.9);
    color: rgb(2, 1, 10);/* 文字の色をを変える */
    text-align: center; /* テキストを中央揃えにする */
    padding: 20px 20px;/* 上下20px、左右20pxの余白を設定（セクションの高さを確保） */
    position: relative;/* 相対位置を指定（子要素の位置調整に使用可能） */
    margin: 10px;  /* 外側の余白を10px確保（他の要素との間隔を作る） */
    border-radius: 10px;  /* 角を10px丸くして、柔らかいデザインにする */
}

/* ヒーローコンテナ内の h2 タグのスタイル */
.inquiry-container h2 {
    /* 文字の色を緑系に設定 */
    color: rgb(108, 148, 0);
    /* 文字に薄い白い影をつけて立体感を出す */
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
    /* 文字を太字にする */
    font-weight: bold;
    /* 文字サイズを40pxに設定（大きくする） */
    font-size: 100px;
    /* h2 の背景を透明度のある白にする（テキストの視認性を向上） */
    background: rgba(255, 255, 255, 0.9);

    font-size:  200px; 
}
.inquiry-container size {
    font-size:  100px; 
}

.footer {
    /* 背景をグラデーションに変更（淡い青の透明感） */
    background: linear-gradient(to right, rgba(30, 87, 153, 0.8), rgba(125, 185, 232, 0.8));
    color: white; /* 文字の色を白に変更してコントラストを強調 */
    text-align: center; /* テキストを左揃え */
    padding: 60px 20px;/* 上下60px、左右20pxの余白を設定 */
    position: relative;/* 相対位置を指定（子要素の配置調整に使える） */  
    border-radius: 15px;/* 角を15px丸くして柔らかい印象に */    
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);/* フッターに影をつけて立体感を出す */   
    letter-spacing: 1px;/* 文字間隔を広げて、読みやすくする */
    line-height: 1.6;/* 行間を少し広げる */

    /* フッター内のコンテンツ幅を制限して中央に配置 */
    max-width: 1200px;
    margin: 0 auto; /* 左右中央揃え */
    padding-left: 40px; /* 余白をつけて適度に左へ寄せる */
}

/* フッター内のリンクをスタイリッシュに */
.footer a {
    color: #ffd700; /* ゴールドカラー */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

.footer a:hover {
    color: #ffdd57; /* 明るいゴールドに変化 */
}


/* スマホ対応（画面幅 768px 以下なら 1列にする） */
@media screen and (max-width: 768px) {
    nav ul {
        display: block;
        text-align: center;
        padding: 10px 0;
    }
    
    nav ul li {
        display: block;
        margin: 10px 0;
    }
    
    .hero {
        padding: 30px 15px;
        background-position: center top;
    }

    .hero-container h2,
    .inquiry-container h2 {
        font-size: 40px; /* スマホ用に縮小 */
    }

    .gazou-container img,
    .slide img {
        width: 90%;
        max-width: 100%;
    }

    .pdf-button,
    .pdf-button2 {
        width: 100%;
        text-align: center;
        padding: 12px 0;
    }
}