/* ===== リセット ===== */
html, body {
    margin: 0;
    padding: 0;
} 

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 全画面の高さを保証 */
}

/* ページ全体の余白をなくす */
* {
    box-sizing: border-box;
}

/* スプラッシュ画面 */
#splash {
    opacity: 0;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #589eff; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;  /*最前面に  */
}
#splash.show {
    opacity: 1;
}

.splash-text {
    font-size: 6vw;
    color: #333;
    opacity: 0;
    animation: fadeInOut 3s ease forwards;
}

 /* フェードイン→表示→フェードアウト  */
@keyframes fadeInOut {
    0%   { opacity: 0; transform: translateY(20px); }
    20%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* 本サイトは最初非表示にしておく  */
#main-content {
    opacity: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: opacity 1s ease;
}
#main-content.show {
    opacity: 1;
    display: block;
}

#main-content{
    flex: 1;
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 100vh; /* ビューポートの高さに合わせる */
}

/* ===== 本文 ===== */

.screen{
    width: 100%;
    margin: 0 auto;
    min-height: 50%;
    display: flex;
}

/* ===== ヘッダー一部 ===== */


.p-fv{
    width: 100%;
    height: 500px;
    background-image: url(../img/bunaitaikai_1.webp);
    background-color:rgba(255, 255, 255, 0);
    background-blend-mode:lighten;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    align-items: center;
    justify-content: center;
}

.p-fv::before {
    content: "";
    width: 100%;
    height: 85%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 75px;
    left: 0;
}



/* ▼ 基本の順序（PC向け） */
.sidebar { order: 1; }
.main { order: 2; }
.sort-controls { order: 3; }

.sidebar{
    display: flex;
    flex: 0 0 210px;
    flex-direction: column;
    margin: 0;
    padding-left: 10px;
    padding-bottom: 120px;
    width: 210px;
    gap: 10px;
    position: relative; /* 子要素の絶対配置の基準 */
}


/* タグによる絞り込みUIのスタイル  */

.tag-container {
    width: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem auto;
}

.tag-container h3{
    margin-top: 10px;
    margin-bottom: 10px;
}

.tag-button {
    background: #cceaf7;
    border: 1px solid #8ac6ff;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    width: 100%;
}

.tag-button:hover {
    background: #99d3ea;
}

.tag-button.active {
    background: #0477c9;
    color: white;
    border-color: #005a96;
}


/* 日付による絞り込みUIのスタイル  */

.date-filter {
    max-width: 250px; /* お好みで調整 */
    width: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    height: fit-content;
    margin: 0.5rem auto;
}

.side-filter h3 {
    margin-bottom: 10px;
}

.date-button {
    background: #e0f1ff;
    border: 1px solid #8ac6ff;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.date-button:hover {
    background: #99d3ea;
}

.date-button.active {
    background: #0477c9;
    color: white;
    border-color: #005a96;
}

/* 並べ替えUIのスタイル */

.sort-controls {
    height: 140px;
    width: 110px;
    flex: 0 0 100px;
    margin-top: 20px;
    padding-right: 20px;
    padding-bottom: 120px;
    position: relative; /* 子要素の絶対配置の基準 */
}

#result-count {
    font-weight: bold;
    text-align: center;
    color: #004457;
    /* アクセシビリティのためにtabindex=-1を設定したが、視覚的なスタイルは不要 */
    outline: none; 
}

.sort-buttons {
    height: 48px;
    width: 100px;
    flex-direction: column;
    margin: 30px 0;
    justify-content: center;
    display: flex;
    gap: 10px;
}

.sort-button {
    background: #e0f1ff;
    border: 1px solid #8ac6ff;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.sort-button:hover {
    background: #99d3ea;
}

.sort-button.active {
    background: #0477c9;
    color: white;
    border-color: #005a96;
}

/* 投稿一覧エリア */

.main{
    flex: 1;
    min-width: 0;
    background-color: #fff;
    padding-bottom: 120px;
}

.content-area {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.post-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-items: center;
}


/* 投稿カード */

.post-card {
    container-type: inline-size;
    width: calc((100% - 40px) / 3); 
    aspect-ratio: 13/15;       /* ✅ 高さを自動調整 */
    margin: 0 auto;
    padding: 16px;
    display: flex;       /* ✅ 中身を縦方向に整列 */
    flex-direction: column;
    justify-content: space-between; /* タイトルとタグを上下に配置 */
    background-color: #fff;
    border-radius: 14px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* ✅ 角丸内に画像を収める */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.post-image-wrapper{
    width: 90%;
    height: 60%;
    margin: 0 auto;
    display: flex; /* ★追加: Flexboxを有効にする */
    justify-content: center; /* ★修正: 水平方向の中央揃え */
    align-items: center; /* ★追加: 垂直方向の中央揃え */
}

.post-image {
    max-width: 100%;
    max-height: 100%;
    margin: auto auto;
    justify-content: center;
    object-fit: cover; /* ✅ 画像の縦横比を崩さずに切り抜き */
}

.post-content {
    height: 30%;
    padding: 14px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
}

/* タイトル・日付・タグ */
.post-title {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
}

.post-card p {
    margin: 5px 0;
    font-size: 12px;
    color: #666;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.post-tag {
    background-color: #cde7f8; /* 薄い青 */
    color: #00334d;
    padding: 3px 8px;
    border-radius: 5px;
    margin-right: 0.3rem;
    font-size: 0.8em;
    display: flex;
    cursor: pointer; /* クリック可能であることを示す */
    align-items: center; /* 垂直方向の中央揃え */
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s; /* ホバー時のアニメーションを滑らかに */
}

.post-tags span {
    background: #e0f4ff;
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    margin-right: 0.3rem;
    font-size: 13px;
}

.post-tag:hover {
    background-color: #99d3ea; /* 背景色を少し濃くする */
    transform: translateY(-1px); /* わずかに上に持ち上げる */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* ===== 小画面対応 ===== */
@media (max-width: 1350px) {
    .post-card {
        width: calc((100% - 20px) / 2);
    }
}

/* ===== 小画面対応 =====*/
@media (max-width: 1000px) {
    .footer_content{
        flex-direction: column;
    }

    .footer_plot{
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);  /* 2カラム */
        justify-items: center;
        gap: 30px 40px; 
    }
    
}

/* ✅ 画面幅が 950px 以下のとき、縦並びへ切り替え */
@media (max-width: 950px) {
    .screen{
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

/* ▼ 基本の順序（モバイル向け） */
.sidebar { order: 1; }
.sort-controls { order: 2; }
.main { order: 3; }

    .main{
        width: 100%;
        margin: 0 auto;
        justify-content: center;
    }

    .sidebar{
        display: flex;
        width: 100%;
        padding-bottom: 10px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }

    .tag-container{
        max-width: 40%;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .date-filter {
        max-width: 40%;
        flex: 1;
        display: flex;
        flex-direction: column; /* こちらも縦並び */
        gap: 10px;

    }

    .sidebar {
        position: static; /* sticky を解除して自然に流す */
    }

    .sort-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 0 5%;
        max-width: 90%;
        padding-bottom: 10px;
    }

    .sort-buttons {
        width: 100%;
        justify-content: space-around;
        margin-bottom: 25%;
    }
    
    .sort-button {
        flex-grow: 1;
        text-align: center;
    }
    
    .post-list {
        width: 100%;
    }
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {

    .footer_plot{
        grid-template-columns: 1fr;  /* 1列にする */
        gap: 20px;
    }

    .post-title{
        font-size: 6.3cqw;
    }

    .post-card p{
        font-size: 4cqw;
    }

    .post-tags span{
        font-size: 4.5cqw;
    }
}

/* 小画面でのサイドバー調整 */
@media (max-width: 600px) {
    .screen{
        margin: 0 auto;
    }
    .sidebar {
        padding: 0;
        flex-direction: column !important;
    }
    
    .tag-container,
    .date-filter {
        width: 100% !important;
        max-width: 90%;
        margin: 0 5%;
    }
    
    .main{
        width: 100%;
    }

    .gallery-btn {
        padding: 15px 20px; /* タッチしやすいサイズに */
        font-size: 24px;
    }
}