main {
        padding-top: 80px; /* ヘッダーの高さ分余白を追加 */
    }
    

    main {
        margin-bottom: 0; /* ← フッターの下に余白を作らない */
    }
    
    footer {
        background-color: #0288d1;
        color: white;
        margin: 0; /* ← これが重要！ */
       
    }
    
            body {
                font-family: "Arial", sans-serif;
                background-color: #b3e5fc;
                text-align: center;
                color: #0277bd;
                margin: 0;
                overflow-y: auto;
            }
            /* ヘッダーのスタイル */
            header {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 10;
            }
    
            #nav-menu {
                display: flex;
                justify-content: center;
                background-color: rgba(0, 0, 0, 0.5);
                padding: 10px 0;
            }
    
            .nav-item {
                margin: 0 20px;
                color: white;
                text-decoration: none;
                font-size: 18px;
            }
    
            .nav-item:hover {
                color: #00bcd4;
                border-bottom: 2px solid #00bcd4;
            }
    
            .hero {
                position: relative;
                width: 100%;
                height: 80vh;
                background: url('images/top.jpg') no-repeat center center/cover;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
                font-size: 36px;
                font-weight: bold;
            }
    
            .hero::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
            }
    
            .hero-text {
                position: relative;
                z-index: 1;
            }
    
            .container {
                max-width: 800px;
                margin: 20px auto;
                padding: 20px;
                background-color: white;
                border-radius: 15px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                position: relative;
                z-index: 10;
            }
    
            .btn {
                display: inline-block;
                padding: 10px 20px;
                background-color: #29b6f6;
                color: white;
                text-decoration: none;
                border-radius: 10px;
                font-size: 18px;
            }
    
            .btn:hover {
                background-color: #0288d1;
            }
    
            .main {
                position: relative;
                width: 100%;
                height: 80vh; /* 80%の高さ */
                background: url('images/top.jpg') no-repeat center center/cover;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
                font-size: 36px;
                font-weight: bold;
                overflow: hidden; /* シャボン玉がhero外に出ないように */
            }
            
            .bubble {
                position: absolute;
                background: rgba(255, 255, 255, 0.5); /* 半透明の白 */
                border-radius: 50%;
                opacity: 0.7;
                animation: floatUp 10s infinite linear;
                pointer-events: none; /* シャボン玉が他の要素と干渉しないように */
            }
            
            @keyframes floatUp {
                from {
                    transform: translateY(100vh);
                    opacity: 0.5;
                }
                to {
                    transform: translateY(-10vh);
                    opacity: 0;
                }
            }
           
    
            .content {
                height: 100vh;
                padding: 50px;
                background: #e1f5fe;
            }
    
            footer {
                background-color: #0288d1; /* フッターの色を変更 */
                color: white;
                padding: 10px;
                position: relative;
                width: 100%;
                text-align: center;
            }





            .photo-gallery {
                display: flex;
                justify-content: center;
                gap: 20px;
                padding: 20px;
                background-color: alpha;
            }
            
            .photo-item {
                margin-bottom: 10px; /* 下の余白を狭く */
                padding-bottom: 5px; /* 内側の余白を狭く */
                text-align: center;
            }
            
            .photo-box {
                border: 2px solid #ddd; /* 四角い枠線 */
                border-radius: 10px; /* 角を少し丸くする */
                padding: 0px;
                background-color: rgba(253, 251, 251, 0.927);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 少し立体感を加える */
                width: 300px; /* 幅を統一 */
                height: 480px; /* 高さを統一 */
                overflow: hidden; /* 余分な部分を隠す */
                position: relative;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap; /* ボックスが自動的に折り返す */
                
            }
            /* フォトボックス全体を中央に配置 */
            .photo-box {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly; /* 水平方向に中央揃え */
                align-items: flex-start; /* 縦方向は上揃え */
                margin: 5px ;
                padding: 5px;
                max-width: 120px;
                box-sizing: border-box;
            }
            
            .photo-box img {
                width: 100%;
                height: auto;
                border-radius: 5px;
                margin-bottom: 10px;
            }
            
            /* 写真ボックス内コンテンツ */
            .photo-box h4 {
                margin-bottom: 0;
                color: #000000;
                font-size: 35px;
                margin: 1px 0;
                line-height: 0; /* 行間を狭くする */
                padding: 0;
            }
            
            .photo-box h2 {
                margin-bottom: 0;
                color: #000000;
                font-size: 23px;
                margin: 1px 0;
                line-height: 0; /* 行間を狭くする */
                padding: 0;
            }
            
            
            
            .photo-box p {
                margin-top: 0;
                font-size: 20px;
                margin: 1px 0;   /* 上下の余白を減らす */
                line-height: 0; /* 行間を狭くする */
                color: #000000; /* 色調整 */
            }
            
            @media screen and (max-width: 768px) {
                .photo-gallery {
                    flex-wrap: wrap; /* 横並びから縦並びに切り替える */
                    gap: 15px; /* 枠同士の間隔を調整 */
                }
            
                .photo-item {
                    width: 100%; /* 幅を全体に広げる */
                    max-width: 300px; /* 必要に応じて最大幅を設定 */
                    margin: 0 auto; /* 中央揃え */
                }
            
                .photo-box {
                    left: 0;
                width: 100%;
                 }
            }
            
            /* フォトボックス全体を中央に配置 */
            .photo-box {
                display: flex;
                flex-wrap: wrap; /* 自動的に折り返す */
                justify-content: center; /* 水平方向に中央揃え */
                align-items: flex-start; /* 縦方向は上揃え */
                gap: 20px; /* 各ボックス間の間隔 */
                max-width: 1200px;
                padding: 10px;
                margin: 0 auto;
                box-sizing: border-box;
            }
            
            
            /* トップに戻るボタン */
            html {
                scroll-behavior: smooth;
            }
            .pagetop {
                height: 50px;
                width: 50px;
                position: fixed;
                right: 30px;
                bottom: 30px;
                background: #fbfbfb;
                border: solid 2px #2546ef;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 2;
                box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
            }
            
            .pagetop__arrow {
                height: 10px;
                width: 10px;
                border-top: 3px solid #000;
                border-right: 3px solid #000;
                transform: translateY(20%) rotate(-45deg);
            }
            
            @media (hover: hover) and (pointer: fine) {
                .pagetop:hover, .pagetop:hover .pagetop__arrow {
                    border-color: #3293e7;
                }
            }
            @media (max-width: 768px) {
                .pagetop {
                    height: 40px;
                    width: 40px;
                    position: fixed;
                    right: 10px;
                    bottom: 10px;
                    background: #fbfbfb;
                    border: solid 2px #2546ef;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 2;
                    box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
                }
                
                .pagetop__arrow {
                    height: 10px;
                    width: 10px;
                    border-top: 3px solid #000;
                    border-right: 3px solid #000;
                    transform: translateY(20%) rotate(-45deg);
                }
            }
         
            /* 写真ボックス内のタイトルと説明の間隔を狭める */
            .photo-box h3 + p {
                margin-top: 5px !important; /* タイトルと説明の間隔を狭くする */
            }
            
            /* 写真ボックス内のタイトル（h3）と説明テキスト（p）の間隔を徹底的に狭くする */
            .photo-box h3 {
                margin-bottom: 4px !important; /* タイトルと説明の間隔をぎゅっと詰める */
                line-height: 1.1 !important;
                font-size: 1.2em;
            }
            
            .photo-box p {
                margin-top: 2px !important; /* 説明テキスト上の間隔を減らす */
                margin-bottom: 0 !important;
                line-height: 1.1 !important;
                font-size: 0.9em;
            }
            
            @media screen and (max-width: 768px) {
                .photo-gallery {
                    flex-wrap: wrap; /* 横並びから縦並びに切り替える */
                    gap: 15px; /* 枠同士の間隔を調整 */
                }
            
                .photo-item {
                    width: 100%; /* 幅を全体に広げる */
                    max-width: 300px; /* 必要に応じて最大幅を設定 */
                    margin: 0 auto; /* 中央揃え */
                }
            }
            
            

            /* モバイル対応（768px以下） */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* フォントサイズを小さくする */
        margin: 0; /* 両側の余白を追加（15pxずつ） */
        max-width: 100%; /* 幅を画面いっぱいに */
        padding: 10px; /* 内容の内側の余白を少し狭く */
    }

    /* 見出しのフォントサイズを縮小 */
    h1 {
        font-size: 20px; /* 大見出しのサイズ */
    }

    h2 {
        font-size: 22px; /* 中見出しのサイズ */
    }

    h3 {
        font-size: 16px; /* 小見出しのサイズ */
    }

    h4 {
        font-size: 16px; /* 小見出しのサイズ */
    }

    h5 {
        font-size: 12px; /* 小見出しのサイズ */
    }

    p {
        font-size: 14px; /* 小見出しのサイズ */
    }

    /* ナビゲーションメニューのフォントサイズを調整 */
    .nav-menu a {
        font-size: 14px; /* メニューリンクの文字サイズ */
    }

    /* フッターのフォントサイズ */
    footer {
        font-size: 8px; /* フッターの文字サイズをさらに縮小 */
    }
}

a {
    text-decoration: none;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* スマホ幅だけ p の行間を強制的に広げる */
@media (max-width: 768px) {
  .content-block .photo-gallery .photo-box p {
    line-height: 1.8 !important;  /* ← 強制的に適用 */
  }
}