/* ==========================================================================
   1. 変数・基本設定 (Variables & Base)
   ========================================================================== */
:root {
    --ft-blue: #0021cd;
    --ft-blue-hover: #0019a3;
    --ft-light-blue: #f0f4ff;
    --text-main: #333;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --transition: 0.3s ease-in-out;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-main);
    line-height: 1.8;
}

/* 共通パーツ */
.icon-blue { color: var(--ft-blue); }

.hover-up { 
    transition: var(--transition); 
    border-radius: 10px; 
    background: #fff; 
}
.hover-up:hover { 
    transform: translateY(-5px); 
}

/* ==========================================================================
   2. ナビゲーション (Header & Navigation)
   ========================================================================== */
.header-glass {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

.navbar-title { color: var(--ft-blue); font-size: 1.1rem; }
.nav-link { font-size: 0.9rem; font-weight: bold; }

/* ==========================================================================
   3. ボタン (Buttons)
   ========================================================================== */
.btn-action {
    background-color: var(--ft-blue);
    color: white;
    font-weight: bold;
    border: none;
    transition: var(--transition);
}

.btn-action:hover {
    background-color: var(--ft-blue-hover);
    color: white;
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 33, 205, 0.2);
}

.btn-width-c {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    font-size: 1.1rem;
    border-radius: 50px;
    display: block;
}

/* ==========================================================================
   4. 各セクションの固有スタイル (Sections)
   ========================================================================== */

/* --- ヒーローエリア (PC First) --- */
.hero-section {
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* PCパララックス */
    padding: 100px 0;
    min-height: 70vh;
}
.hero-title { color: var(--ft-blue); }
.catchphrase-box { 
    max-width: 800px; 
    border-left: 5px solid var(--ft-blue); 
    text-align: left; 
}

/* --- ステップ・想い --- */
.step-num {
    background: var(--ft-blue);
    color: white;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 8px;
    font-size: 0.9rem;
}
.message-box { line-height: 2; border-bottom: 5px solid var(--ft-blue); }
.message-gallery { cursor: pointer; }

/* --- 参加者の声・画像 --- */
.voice-icon-circle {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-container img {
    /*width: 100%;
    object-fit: cover;*/
    transition: transform 0.3s ease;
    cursor: pointer;
}
.gallery-container img:hover { transform: scale(1.05); }

/* ==========================================================================
   5. フッター & フローティングナビ (Floating UI)
   ========================================================================== */
#floating-nav { position: fixed; z-index: 1000; }

/* PC用配置 */
.apply-btn {
    position: fixed; right: 0; top: 30%; 
    background: var(--ft-blue); color: white !important;
    writing-mode: vertical-rl; padding: 20px 10px; 
    text-decoration: none; font-weight: bold; 
    border-radius: 5px 0 0 5px; letter-spacing: 2px;
    transition: var(--transition);
}
.top-btn {
    position: fixed; right: 20px; bottom: 20px; 
    background: #333; color: white !important;
    width: 45px; height: 45px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    text-decoration: none;
    transition: var(--transition);
}

/* スマホ用配置：すりガラス（Glassmorphism）スタイル */
@media (max-width: 991px) {
    #floating-nav { 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        display: flex;
        align-items: stretch; /* ボタンの高さを揃える */
    }

    .apply-btn { 
        position: static; 
        flex: 3; 
        writing-mode: horizontal-tb; 
        padding: 18px 10px; 
        border-radius: 0; 
        letter-spacing: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        
        /* backgroundの調整点:
           1. 青の成分(B)を205→160に落として深み（暗さ）を出す
           2. アルファ値を0.85→0.93に上げて透過を最小限にする
        */
        background: rgba(0, 25, 160, 0.885) !important; 
        
        /* ぼかしを少し弱める（色が濃いのでぼかしすぎると色が濁るため） */
        backdrop-filter: blur(10px) saturate(180%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        
        /* 境界線を少し明るくして、ボタンの輪郭を際立たせる */
        border-top: 1px solid rgba(255, 255, 255, 0.4);
    }

    .top-btn { 
        position: static; 
        flex: 1; 
        border-radius: 0; 
        height: auto;
        
        /* 中央配置のための設定 */
        display: flex;
        justify-content: center;
        align-items: center;

        background: rgba(20, 20, 20, 0.9) !important;
        backdrop-filter: blur(10px) saturate(180%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.footer-sns a {
    color: white; font-size: 20px; margin: 0 8px; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1); border-radius: 50%; text-decoration: none;
}

/* ==========================================================================
   6. モバイル・レスポンシブ上書き (Mobile Overrides)
   ========================================================================== */

@media (max-width: 991px) {
    /* ヒーローエリア調整 */
    .hero-section {
        background-attachment: scroll; 
        padding: 45px 0 55px;
        min-height: 40vh;
    }

    /* スマホナビ */
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 15px;
        margin: 10px 5px;
        padding: 10px 15px;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* フローティングナビ（下部固定） */
    #floating-nav { bottom: 0; left: 0; width: 100%; display: flex; }
    .apply-btn { 
        position: static; flex: 3; writing-mode: horizontal-tb; 
        padding: 15px; border-radius: 0; letter-spacing: normal;
    }
    .top-btn { position: static; flex: 1; border-radius: 0; height: auto; }
    
    .pb-5-mobile { padding-bottom: 80px !important; }
}

/*@media (max-width: 768px) {
    .gallery-container img { height: 150px; }
}*/

/* --- スケジュール・イベントリスト - 外部読み込み (eventlist.html) --- */
.date-list { border-bottom: 1px dashed #ddd; padding: 10px 0; list-style: none; }
.date-list.last { border-bottom: none; }
.date-list a { text-decoration: none; color: var(--text-main); transition: var(--transition); }
.date-list a:hover { color: var(--ft-blue); }
.date { color: var(--ft-blue); font-weight: bold; margin-right: 1rem; }
.link-arrow {
    margin-left: 8px;
    color: var(--ft-blue);
    transition: transform 0.3s ease;
    display: inline-block;
    font-weight: bold;
}
.date-list a:hover .link-arrow { transform: translateX(3px); }
#eventlist h2 { font-weight: bold; padding: 0 0 0.4em; line-height: 1.5; }
#eventlist .btn { margin-top: 2.3em; }
#eventlist .btn-primary { background-color: var(--ft-blue); }
#eventlist .btn a { text-decoration: none; font-weight: bold; }

/* --- 拡大画像設定 --- */
.btn-modal-close {
    top: 5px;
    right: 5px;
    font-size: 2.5em;
}

@media (max-width: 991px) {
    .btn-modal-close {
        top: 0;
        right: 0;
        font-size: 2.0em;
    }
}