/* 写真を2列に並べるGridレイアウト */

body {
    /*font-family: Arial, sans-serif;*/
    font-family: 'Noto Sans', 'Noto Serif', sans-serif;
    font-weight: 200; /* とても太い文字 */
    background-color: white;
    margin: 0;
    padding: 0;
}
/*header {
    font-family: 'Noto Sans', 'Noto Serif', sans-serif;
    display: flex;
    justify-content: center;*/ /* 横方向の中央揃え */
/*align-items: center;*/
/*background-color: white;*/
/*width: 100%;
    color: black;
    height: 170px;
    font-size: 7px;*/
/*padding-bottom:30%;*/
/*}*/
header {
    display: flex;
    justify-content: space-between; /* 左右に分ける */
    align-items: center; /* 垂直中央揃え（必要に応じて） */
    text-align: center; /*垂直方向の中央揃え */
    margin-bottom: 10px; /* ヘッダーとの距離を確保 */
    /*gap: 70px; /* 要素間に余白を追加 */
    /*justify-content: center; /* 横並びの中央配置（必要に応じて） */

    font-family: 'Noto Sans', 'Noto Serif', sans-serif;
    /*font-weight: 50; /* とても太い文字 */
    /*background-color: #f2f2f2;*/
    color: black;
    text-align: center;
    padding: 90px;
    /*padding: 0;*/
    font-size: 7px;
    letter-spacing: 3px; /* 文字のすき間を少し広めに */
    word-spacing: 4px; /* 単語間を少しゆったり */
    line-height: 1; /* 行間をちょっと読みやすく */
    /*background-color: red;*/ /* 明るいグレーで視認性アップ */
}

    header h1 {
        position: relative;
        left: 10px;
        margin: 0;
    }
/*_/___/_____/_______/写真領域*/
.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;/* ← 矢印と画像の間隔を調整 */
    width: fit-content; /* 必要なら固定幅に */
    margin: auto;
    
}

.gallery-container {
    position: relative;
    width: 600px;
    height: 600px;
    margin: auto;
    overflow: hidden;
}

.gallery {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 0;
}

    .gallery-image.active {
        opacity: 1;
        z-index: 1;
    }

.arrow {
    position: absolute;
    top: 108%;
    transform: translateY(-50%);
    /*background-color: rgba(255, 255, 255, 0.6);*/
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: 100;
}

    .arrow.left {
        color: black;
        left: 200px;
    }

    .arrow.right {
        color: black;
        right: 200px;
    }




/*_/___/_____/_______/モーダルのスタイル */