/************************************
* OTHER-S オリジナルカスタム（濃紺デザイン）
************************************/

/* --- 1. サイト全体の土台を濃紺にする --- */
body, #container, #main, .entry-content {
    background-color: #001a33 !important; /* 濃紺 */
    color: #ffffff !important;
    border: none !important;
}

/* --- 2. 各セクションの設定（中央寄せ） --- */
.os-message-section {
    width: 100%;
    max-width: 800px; /* 読みやすい幅に制限 */
    margin: 0 auto;   /* これで真ん中に戻る */
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
}

/* --- 3. メッセージの装飾 --- */
.os-question {
    font-size: 1.5rem;
    line-height: 2.2;
    font-weight: 300;
    margin-bottom: 40px;
}

.os-answer-main {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 20px 0;
    letter-spacing: 0.1em;
}

.os-brand-name {
    font-size: 2.8rem;
    letter-spacing: 0.4em;
    margin-top: 40px;
    font-weight: 200;
}

/* --- 4. アニメーション（念のため初期値を少し見えるように設定） --- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}