/* style.css */

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

header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 50px;
    background: #fff;
    gap: 40px;
}

.logo { 
    font-size: 1.5em; 
    font-weight: bold; 
}

nav { display: flex; gap: 20px; }
nav a { text-decoration: none; color: #007bff; font-weight: bold; }

/* 草の画像 */
.grass-banner {
    width: 100%;
    height: 150px;
    background-image: url('../images/kusa.jpg');
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
}

/* メインコンテンツ */
main { padding: 40px 50px; max-width: 900px; margin: 0 auto; }
h1 { border-bottom: 2px solid #ccc; padding-bottom: 10px; }
ul { list-style: none; padding: 0; }
li { margin-bottom: 10px; }

.footer-image {
    text-align: center;
    margin-top: 40px;
}
.footer-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 現在開いているページのデザイン設定 */
nav a.current {
    color: #fff;               /* 白文字 */
    background-color: #5bc0de; /* 水色の背景色（添付画像に合わせた色味） */
    padding: 10px 25px;        /* 上下10px、左右25pxの余白を追加 */
    border-radius: 4px;        /* 角を少し丸くするとより洗練されます */
    text-decoration: none;     /* 下線を消す */
}

/* 通常時のリンク（ホバーした時の設定など） */
nav a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    padding: 10px 15px;        /* 通常時も少し余白があるとクリックしやすいです */
}

/* マウスを乗せた時の設定 */
nav a:hover {
    color: #fff;              /* 文字色を白に */
    background-color: #ccc;   /* 背景色を薄灰色（#ccc）に */
    padding: 10px 25px;       /* 「ホーム」ボタンと同じサイズ感にする */
    border-radius: 4px;       /* 角を丸く */
    text-decoration: none;
    transition: all 0.3s ease; /* ふわっと色が変わるようにアニメーションを追加 */
}

/* 見出しの設定（これだけでOK！） */
main h2 {
    border-left: 8px solid #5bc0de; /* 棒の色を少し濃い青に変更 */
    padding-left: 15px;             /* 棒と文字の隙間 */
    color: #5bc0de;                 /* 文字色を少し濃く変更 */
    font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", sans-serif; 
    font-weight: 600;               /* 太さをしっかり認識できる600に変更 */
    font-size: 40px;                /* 大きさは維持 */
    letter-spacing: 0.05em; 
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.2;
}


/* リストの調整 */
main ul {
    list-style: none;
    padding-left: 0;
}
main li {
    margin-bottom: 8px;
}
/* 指定したIDの画像だけが拡大されます */
#main-footer-img {
    transform: scale(1.5);
    margin: 40px 0;
}

/* 他の画像（.footer-imageの中にあってもIDがついていないもの）には影響しません */

.contact-container {
    display: flex; /* 左右に並べる */
    gap: 40px;     /* 左右の隙間 */
    padding: 50px;
    align-items: flex-start;
}

.contact-left {
    flex: 1; /* 左側の比率 */
}

.contact-right {
    flex: 2; /* 右側の比率（フォームの方が広くなるように） */
}

.contact-main-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* フォームの見た目調整 */
.contact-right input, 
.contact-right textarea {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

.contact-right button {
    background-color: #5bc0de;
    color: white;
    padding: 10px 30px;
    border: none;
    cursor: pointer;
}
/* このクラスがついた画像だけ、幅を300pxにする */
.my-toiawase-img {
    width: 200px;  /* ここを好きな数値（200px〜400pxなど）に変えてください */
    height: auto;  /* 高さは自動調整 */
    display: block;
    margin-left: 90px;      /* ★ここで左側の余白を指定して右にずらします */
}
/* マップの枠組み設定 */
.map-container {
    margin-top: 30px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 少し影をつけて浮かび上がらせる */
}