@import url("base.css");
@import url("content_pages.css");
/* body全体に背景画像を設定 */
body {
    background-size: cover; /* 画面全体を覆うように画像を拡大・縮小 */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-attachment: fixed; /* スクロールしても背景を固定 */
    background-image: url('photography/wallpaper.jpg');
}
.writing-area {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    justify-content: flex-start; /* 上端揃え */
    min-height: 100vh;
    padding-top: 8vh; /* 上から少し離す */
    box-sizing: border-box; /* paddingを含めて高さを計算 */
}
/* テキストを囲む白いコンテナ */
.content-container {
    /* 背景色を白の半透明に設定 (rgbaの最後の値が透明度: 0.0〜1.0) */
    background-color: rgba(255, 255, 255, 0.85);
    
    padding: 2em 10vw; /* 内側の余白（上下に2文字分、左右に3文字分） */
    width: 70vw;
    border-radius: 12px; /* 角を少し丸くする */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 影を付けて立体感を出す */
    text-align: center;
    z-index: -1;
}
.photo-area {
    padding-top: 1em;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    text-align: center;
    justify-content: flex-start; /* 上端揃え */
}
.photography-row {  /*横2つのセルを統括*/
    display: flex;
    flex-direction: row;
    align-items: center; /* 中央揃え */
    text-align: center;
    width: 90vw;
    margin-top: 1em;
    margin-bottom: 3em;
}
.photography-cell {     /*画像と説明を統括*/
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    text-align: center;
    width: 42.5vw;
    margin: 2.5vh 0vw;
}
.photography-img{
    border-radius: 12px; /* 角を少し丸くする */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 影を付けて立体感を出す */
    width: 42.5vw;
    cursor: pointer;
    transition: transform 0.3s ease; /* 変化を0.3秒かけて滑らかにする */
}
.photography-img:hover{
    transform: scale(1.03); /* 1.03倍の大きさに拡大 */
}
.photo-discription {
    background-color: rgba(255, 255, 255, 0.85);
    height: 3em;
    width: 42.5vw;
    border-radius: 12px; /* 角を少し丸くする */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 影を付けて立体感を出す */
}
.photography-center-spacer{
    padding: 5vh 2.5vw;
}
p {
    margin-top :0.2em;
}

/* モーダル背景のスタイル */
.modal {
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center;   /* 垂直方向の中央揃え */
    display: none; /* 初期状態では非表示 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0,0,0,0.9); /* 半透明の黒 */
}

/* 拡大画像のスタイル */
.modal-content {
    border-radius: 12px; /* 角を少し丸くする */
    display: block;
    max-width: 85vw;
    max-height: 85vh;
    
    /* アニメーション */
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* アニメーションの定義 */
@keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/* 閉じるボタン */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

/* --- スマートフォン向けのスタイル --- */
/* 画面幅が768px以下の場合に適用される */
@media (max-width: 768px) {
    body {
        background-image: url('photography/mobile_wallpaper.jpg')
    }
    .photo-area {
        margin-top: 1em;
    }
    .photography-row {
        flex-direction: column; /*スマホだと、横に並べると入らないので縦配置 */
        margin: 0em 0em;
    }

    .photography-cell {
        width: 90vw;
        margin: 0em 0em;
    }
    .photography-img {
        width: 90vw;
    }
    .photo-discription {
        width: 90vw;
        margin-bottom: 2em;
    }
    .photography-center-spacer{
        padding: 0vh 0vw;
    }
    .photography-img:hover{
    transform: scale(1.1); /* 1.03倍の大きさに拡大 */
    }
}