body {
    margin: 0;
    font-family: "Serif", sans-serif;
    background-color: black;
    color: white;
    text-align: center;
    
}

h1 {
    font-size: 16px; /* H1の文字サイズ */
    /*font-weight: bold; /* 太字（必要に応じて調整） */
}

h2 {
    font-size: 30px; /* H2の文字サイズ */
    font-weight: bold;
    
}

h3 {
    font-size: 24px; /* H3の文字サイズ */
    font-weight: bold;
}

h4 {
    font-size: 20px; /* H4の文字サイズ */
    font-weight: normal; /* 標準の太さ */
}

h5 {
    font-size: 18px; /* H5の文字サイズ */
    font-weight: normal;
}


.header {
    position: fixed;
    top: 0;
    width: 100%;
    
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    padding: 10px 20px;
    z-index: 1000;
}



/* 各セクション間のスペースを設定 */
section {
    margin: 100px 0; /* 上下に60pxのスペース */
}

.header-section {
    flex: 1; /* 各セクションを等分 */
    display: flex;
    align-items: center; /* セクション内要素を縦方向で中央揃え */
}

.header-section.left {
    justify-content: flex-start; /* 左寄せ */
}

.header-section.center {
    justify-content: center; /* 中央揃え */
}

.header-section.right {
    justify-content: flex-end; /* 右寄せ */
}

.logo img {
    height: 50px; /* ロゴの高さを指定 */
    max-height: 100%; /* 高さの上限を設定 */
}




.navigation {
    flex: 2; /* ナビゲーションの中央揃え用のスペース */
    display: flex;
    justify-content: center; /* ナビゲーションメニューを中央揃え */
}

.navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center; /* メニューアイテムを中央揃え */
}

.navigation ul li {
    margin: 0 15px; /* メニュー間の間隔 */
}

.navigation ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    line-height: 1.5; /* 高さ調整 */
}

.slideshow {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in;
}

.slide.active {
    opacity: 1;
}


.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade.active {
    opacity: 1;
}

/* aboutセクション全体の設定 */
.about {
    display: flex; /* 横並びにする */
    justify-content: center; /* スペースを均等に配置 */
    align-items: center; /* セクション全体の中央揃え */
    padding: 20px;
    max-width: 1200px; /* コンテンツ幅の制限 */
    margin: 0 auto; /* セクションを中央に配置 */
}

/* 画像セクション */
.about-image-section img {
    width: 100%;
    max-width: 500px; /* 画像の最大幅 */
    height: auto; /* 縦横比を保持 */
    border-radius: 10px; /* 必要なら角を丸く */
}

/* 説明文セクション */
.about-text-section {
    max-width: 600px; /* 説明文の最大幅 */
    padding: 0 20px; /* 左右の余白 */
    text-align: left; /* 左揃え */
}

.about-text-section h1 {
    font-size: 36px; /* タイトルのフォントサイズ */
    margin-bottom: 20px; /* タイトルとテキストの間隔 */
}

.about-text-section p {
    font-size: 16px; /* 説明文のフォントサイズ */
    line-height: 1.6; /* 行間 */
}

.system-menu .grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

.system-menu .grid div {
    text-align: center;
}

.access-info {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.map iframe {
    width: 800px; /* 固定幅に変更 */
    height: 600px;
    border: none;
}

.details {
    width: 100%;
    text-align: left;
    line-height: 1.8;
}

.details a {
    color: white; /* リンクの文字色 */
    text-decoration: underline; /* リンクに下線を追加 */
}

.grid a{
    color: white; /* リンクの文字色 */
    text-decoration: underline; /* リンクに下線を追加 */

}


.access-info .map {
    margin: 20px auto;
}

.access-info .details {
    margin: 20px auto;
    line-height: 1.6;
}

/* メニューのデザイン */
.menu {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: white;
    background-color: black;
}

.menu h1 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 40px;
}

.menu-category {
    margin-bottom: 30px;
}

.menu-category h2 {
    font-size: 24px;
    margin-bottom: 10px;
    border-bottom: 2px solid white;
    padding-bottom: 5px;
}

.menu-category ul {
    list-style-type: disc;
    padding-left: 20px;
}

.menu-category ul li {
    margin-bottom: 5px;
    font-size: 16px;
}

.menu-note {
    margin-top: 40px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    color: #ccc;
}

@media (max-width: 768px) {
    /* ヘッダーの調整 */
    .header {
        flex-direction: column; /* ヘッダー内の要素を縦並びに */
        text-align: center;
    }

    .header-section {
        flex: unset; /* セクション幅の固定解除 */
        margin-bottom: 10px; /* セクション間のスペース */
    }

    h2 {
        font-size: 20px; /* 小さな画面用の文字サイズ */
        line-height: 1.4; /* 行間の調整 */
    }

    /* ナビゲーションメニュー */
       .navigation ul {
        flex-direction: row; /* 横並びに変更 */
        justify-content: center; /* メニューを中央揃え */
        gap: 10px; /* メニュー間のスペースを調整 */
    }

    .navigation ul li {
        margin: 0; /* マージンをリセット */
    }

    .navigation ul li a {
        font-size: 12px; /* 文字を小さく */
        padding: 5px 10px; /* 文字の内側の余白を調整 */
    }


    /* スライドショー */
    .slideshow {
        height: auto; /* 高さを自動調整 */
    }

    .slide img {
        object-fit: contain; /* 画像全体を収める */
    }

    /* aboutセクション */
    .about {
        flex-direction: column; /* 縦並びに */
    }

    .about-image-section img {
        max-width: 100%; /* 画面幅に収まるよう調整 */
    }

    .about-text-section {
        padding: 10px;
    }

    /* system-menuセクション */
    .system-menu .grid {
        flex-direction: column; /* 縦並びに変更 */
        gap: 20px;
    }

    /* Googleマップの幅調整 */
    .map iframe {
        width: 100%; /* スマホ画面に合わせる */
        height: auto;
    }

    /* メニューの調整 */
    .menu {
        padding: 10px;
    }

    .menu-category ul {
        padding-left: 10px; /* インデントを縮小 */
    }
}