/* タブレット用のスタイル */
/* @media (min-width: 1024px) { */

/* 固定値 */
:root {
    /* --menu-gap: 20px; */
    --menu-gap: 1vw;
    /* ボタン間隔（横並びの距離） */
    /* --menu-width: 140px; */
    --menu-width: 1vw;
    /* ボタン幅 */
    /* --menu-font: 18px; */
    --menu-font: 2vw;
    /* フォントサイズ */
    --menu-erea: 4vw;
    /* メニューエリア縦幅 */
    --menu-position: 1vw;
    /* ボタン幅 */
    /* --menu-radius: 6px;      角丸 */
    --menu-font-family: "Noto Serif JP", "Yu Mincho", serif;
}

/* メニューのエリア */
.menu-bar {
    width: 100%;
    /* 横幅いっぱい */
    background-color: rgba(29, 85, 255, 0.2);
    /* 背景色 */
    padding: var(--menu-erea) 0;
    /* 上下の余白 */
    position: fixed;
    top: 0;
    /* ← 固定する */
}

/* メニューの横並び */
.menu-horizontal {
    width: 100%;
    /* 横幅いっぱい */
    display: flex;
    /* 横並びにする */
    /* flex-direction: row; */
    /* 横並び */
    justify-content: center;
    /* 横並びの中央揃え */
    gap: var(--menu-gap);
    /* ボタンの間隔 */
    padding: var(--menu-position) var(--menu-position);
    /* padding: var(--menu-position) 10px; */
    /* エリアとの間隔 */
    font-size: var(--menu-font);
    /* フォントサイズ */
    font-family: var(--menu-font-family);
    /* フォントファミリー */

    position: fixed;
    top: 0;
    /* ← 固定する */
}

/* メニューのリンク属性 */
.menu-horizontal a {
    /* padding: 10px var(--menu-position); */
    padding: 8px 10px;
    /* ボタンのパディング */
    background: white;
    /* ボタンの色 */
    text-decoration: none;
    /* リンクの装飾 */
    border-radius: 6px;
    /* ボタンの丸み */
    font-size: var(--menu-font);
    /* フォントサイズ */
    font-weight: bold;
    /* フォントの太さ */
    transition: 0.2s;
    /* 変化の間隔 */

}

/* メニューのリンクホバー時 */
.menu-horizontal a:hover {
    background: #e0e0e0;
    /* ホバー時に少しグレー */
}


/* .header-images { */
/* display: flex; */
/* flex-direction: column; */
/* ← 縦並び */
/* gap: 10px; */
/* ← 画像の間隔（可変） */
/* align-items: center; */
/* ← 中央揃え（任意） */
/* } */

.top-images {
    display: flex;
    flex-direction: column;
    /* ← 縦並び */
    gap: 10px;
    /* ← 画像の間隔（可変） */
    align-items: center;
    /* ← 中央揃え（任意） */
}

.top-img1 {
    /* padding-top: 100px; */
    /* 初期表示位置 */
    /* padding: 50px 50px; */
    /* width: 80%; */
    max-width: 80%;
    /* ← 小さくしたいサイズ */
    height: auto;
    /* ← 縦横比を保つ */
}

.top-img2 {
    /* padding: 50px 50px; */
    /* width: 80%; */
    max-width: 70%;
    /* ← 小さくしたいサイズ */
    height: auto;
    /* ← 縦横比を保つ */
}

.sns-icons {
    display: flex;
    flex-direction: row;
    /* ← 横並び */
    gap: 10px;
    /* ← アイコンの間隔（可変） */
    /* align-items: center; */
    /* ← 中央揃え（任意） */
}
.map {
    width: 90%;
    /* ← 横幅いっぱい */
    height: 400px;
    /* ← 高さを指定 */
    margin-top: 20px;
    /* ← 上の余白 */
}

/* .fixed-menu { */
/* display: inline-block; */
/* ← ブロック要素として表示 */
/* position: fixed; */
/* ← 画面に固定 */
/* top: 0; */
/* ← 上に固定 */
/* left: 0; */
/* width: 100%; */
/* ← 横幅いっぱい */
/* background: #002b5c; */
/* color: white; */
/* padding: 10px 0; */
/* z-index: 9999; */
/* ← 他の要素より前に出す */
/* } */

body {
    padding-top: 100px;
    /* メニューの高さに合わせる */
    margin: 0;
    /*  */
    background-image: url("img/BG.jpg");
    /* ← 背景画像 */
    background-size: cover;
    /* 画面いっぱいに拡大 */
    background-position: center;
    /* 中央に配置 */
    background-attachment: fixed;
    /* スクロールしても固定 */
}

/* section { */
/* background: rgba(29, 85, 255, 0.7); 70%透明 */
/* padding: 40px; */
/* margin: 20px; */
/* border-radius: 10px;                 角を丸くして上品に */
/* } */

/* } */