@charset "UTF-8";
/* CSS Document */

body {
    font-family: 'M PLUS 1p', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    line-height: 1.8; /* 行間を少し広げると、より洗練された印象に */
}
h1, h2, h3, .display-3, .display-5 {
    /* Zen Old Gothic を使用 */
    font-family: 'Zen Old Gothic', sans-serif;
    font-weight: 700; /* 太めに設定 */
    letter-spacing: 0.08em; /* 字間を広めに取ると、さらにスタイリッシュに */
}

/* 特に目立たせたいキャッチコピーなど */
.lead {
    font-weight: 700;
}

/* リムジンセクションの背景設定 */
.limo-parallax {
    /* 背景画像をセクション全体に表示し、位置を中央に設定 */
    background-image: url('../img/20240331_144953.jpg'); /* 実際のリムジン画像のパスに修正 */
    background-size: cover;
    background-position: center center;
    
    /* パララックスの核となる設定 */
    background-attachment: fixed;
    
    /* セクションの縦方向の高さ確保 */
    min-height: 80vh; 
    
    /* セクション内のテキストが背景画像の上に来るように調整 */
    position: relative;
    z-index: 0;
}

/* フォームコンテンツの視認性を高めるためのオーバーレイ */
.limo-parallax .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 濃い目の色でコンテンツを見やすくします */
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 0; /* コンテンツよりも後ろに配置 */
}

/* コンテンツ（テキストなど）をオーバーレイより手前に配置 */
.limo-parallax .container {
    z-index: 1;
}

/* 画面が小さいスマホでの表示調整 */
@media (max-width: 991px) {
    /* スマホではブラウザの制限でfixedが効きにくい場合があるため、解除 */
    .limo-parallax {
        background-attachment: scroll;
        min-height: auto; /* 高さはコンテンツ依存に */
        padding-top: 4rem; 
        padding-bottom: 4rem;
    }
}

/* コンセプトセクションの背景設定 */
.concept-parallax {
    /* 背景画像をセクション全体に表示し、位置を中央に設定 */
    background-image: url('../img/4.jpg'); /* 華やかな店内の写真パスに修正 */
    background-size: cover;
    background-position: center center;
    
    /* パララックスの核となる設定 */
    background-attachment: fixed;
    
    /* セクションの縦方向の高さ確保 */
    min-height: 70vh; 
    
    position: relative;
    z-index: 0;
}

/* フォームコンテンツの視認性を高めるためのオーバーレイ */
.concept-parallax .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 少し明るめの色でコンセプトカフェの楽しさを維持しつつ、文字を見やすくします */
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 0; 
}

/* コンテンツ（テキストなど）をオーバーレイより手前に配置 */
.concept-parallax .container {
    z-index: 1;
}

/* 画面が小さいスマホでの表示調整 (リムジンセクションと同じ処理) */
@media (max-width: 991px) {
    .concept-parallax {
        background-attachment: scroll;
        min-height: auto; 
        padding-top: 4rem; 
        padding-bottom: 4rem;
    }
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* 半透明の白や、LPのテーマカラーにする */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 最前面に表示 */
    transition: opacity 0.5s ease-out; /* フェードアウト用 */
}

/* シンプルなローディングスピナーの例 */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #B22222; /* プライマリーカラーに合わせて赤系に */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 読み込み完了後に適用するクラス */
.loaded {
    opacity: 0;
    visibility: hidden;
}