/* CSSカスタムプロパティ (変数) 定義 */
:root {
    --font-family: 'M PLUS Rounded 1c', sans-serif;
    --gradient-bg: linear-gradient(135deg, #ffdde1 0%, #ee9ca7 100%);
    --container-bg: rgba(255, 255, 255, 0.9);
    --text-color: #555;
    --accent-color: #e83e8c;
    --label-color: #d63384;
    --info-bg: rgba(255, 223, 230, 0.5);
    --info-border: #ffacbd;
    --button-gradient: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
    --result-color: #ff69b4;
    --close-button-color: #aaa;
    --close-button-hover-color: var(--accent-color);
}

/* 基本スタイル & かわいいフォント設定 */
body {
    font-family: var(--font-family);
    background: var(--gradient-bg);
    margin: 0;
    /* body自体のmarginは不要に */
    /* padding: 20px; */
    /* paddingはmainに移譲 */
    display: flex;
    flex-direction: column;
    /* 子要素を縦に並べる */
    /* justify-content: center; */
    /* main要素が中央揃えを担当 */
    /* align-items: center; */
    /* main要素が中央揃えを担当 */
    min-height: 100vh;
    box-sizing: border-box;
    color: var(--text-color);
}

/* メインコンテンツエリア */
.main-content-area {
    flex-grow: 1;
    /* 残りのスペースを埋める */
    display: flex;
    flex-direction: column;
    /* 中の要素を縦に */
    justify-content: center;
    /* 縦方向中央揃え (コンテナを中央に) */
    align-items: center;
    /* 横方向中央揃え (コンテナを中央に) */
    padding: 20px;
    /* 元のbodyのpaddingをこちらに */
}

.container {
    background-color: var(--container-bg);
    /* 少し透明感のある白 */
    padding: 30px 40px;
    border-radius: 20px;
    /* 角丸を大きく */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 450px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

h1 {
    color: var(--accent-color);
    /* アクセントカラー (ピンク系) */
    margin-bottom: 25px;
    font-weight: 700;
    /* 太字 */
}

/* 情報表示エリア */
.info-box {
    margin-bottom: 35px;
    padding: 15px;
    /* 少し狭く */
    background-color: var(--info-bg);
    border-radius: 10px;
    border: 1px dashed var(--info-border);
}

.info-box p {
    margin: 8px 0;
    color: var(--text-color);
    font-size: 15px;
}

.info-box .label {
    font-weight: 700;
    color: var(--label-color);
    /* ラベルの色 */
    margin-right: 5px;
}

/* 六曜表示を少し強調 */
#rokuyo-display {
    font-weight: bold;
    color: #d63384;
}

/* ボタン */
.shiny-button {
    background: var(--button-gradient);
    color: white;
    border: none;
    padding: 14px 30px;
    font-size: 17px;
    font-weight: 700;
    /* 太字 */
    border-radius: 50px;
    /* 丸いボタン */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    /* background-colorを追加 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
    /* 文字間隔を少し広げる */
}

.shiny-button:hover {
    transform: translateY(-2px);
    /* 少し浮き上がる効果 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.shiny-button:active {
    transform: translateY(0px);
    /* クリック時に元に戻る */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ボタン無効化時のスタイル */
.shiny-button:disabled {
    background: #ccc;
    /* 無効時はグラデーションではなく単色に */
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* アクセシビリティ: フォーカス時のスタイル */
.shiny-button:focus-visible,
.close-button:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}


/* モーダルスタイル */
.modal {
    display: none;
    /* display: flex はJSで制御 */
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    /* 縦方向中央揃え */
    opacity: 0;
    /* 初期状態は透明 */
    transition: opacity 0.3s ease;
    /* フェードイン用 */
}

/* モーダル表示時にJSで付与するクラス */
.modal.is-visible {
    display: flex;
    /* Flexboxを有効化 */
    opacity: 1;
    /* フェードイン */
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 30px 40px;
    border-radius: 15px;
    width: 85%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    transform: scale(0.8);
    /* 初期状態は少し小さい */
    opacity: 0;
    /* 初期状態は透明 */
    text-align: center;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    /* ポップアップアニメーション */
}

/* モーダル表示時のスタイル */
.modal.is-visible .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* モーダル閉じるアニメーション用クラス (JSで付与) */
.modal-content.is-closing {
    transform: scale(0.8);
    opacity: 0;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--accent-color);
    font-size: 22px;
}

.modal-content p.result-text {
    font-size: 36px;
    /* 結果を大きく */
    font-weight: 700;
    color: var(--result-color);
    margin: 15px 0 10px;
}

.modal-content p.message-text {
    font-size: 15px;
    /* 少し小さく */
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 25px;
}

.close-button {
    /* role="button" を付けたのでカーソルをポインターに */
    color: var(--close-button-color);
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    /* クリック可能を示す */
    padding: 5px;
    /* クリック領域を少し広げる */
    border-radius: 50%;
    /* 見た目を少し整える */
    width: 32px;
    /* サイズを固定 */
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.2s ease;
    /* ホバー効果用 */
}

.close-button:hover,
.close-button:focus {
    color: var(--close-button-hover-color);
    /* ホバー時の色 */
    text-decoration: none;
}

/* トップへ戻るボタン (backtotop.js用) */
.page-top {
    display: none;
    /* 初期状態は非表示 (JSで制御) */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--accent-color);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    z-index: 5;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.page-top:hover {
    opacity: 1;
}


/* レスポンシブ対応 */
@media (max-width: 600px) {
    body {
        /* padding: 10px; */
        /* paddingはmainに移譲 */
    }

    /* メインコンテンツエリアのpaddingを調整 */
    .main-content-area {
        padding: 10px;
    }

    .container {
        padding: 20px 25px;
        width: 90%;
    }

    h1 {
        font-size: 24px;
    }

    .info-box {
        padding: 10px;
    }

    .info-box p {
        font-size: 14px;
    }

    .shiny-button {
        padding: 12px 25px;
        font-size: 15px;
    }

    .modal-content {
        padding: 25px 30px;
        width: 90%;
    }

    .modal-content p.result-text {
        font-size: 30px;
    }

    .modal-content p.message-text {
        font-size: 14px;
    }
}

/* さらに小さい画面用の調整 */
@media (max-width: 360px) {

    /* メインコンテンツエリアのpaddingを調整 */
    .main-content-area {
        padding: 10px;
        /* さらに狭く */
    }

    .container {
        padding: 15px 20px;
    }

    h1 {
        font-size: 22px;
    }

    .shiny-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* フッターのスタイル */
footer {
    background-color: rgba(0, 0, 0, 0.1);
    /* 背景を少しつけて区別 */
    padding: 15px 20px;
    text-align: center;
    color: var(--text-color);
    /* position: fixed; bottom: 0; width: 100%; は不要 */
    /* Flexboxにより自然に下部に配置される */
}

/* フッターのソーシャルリンク */
footer .social-links {
    margin-bottom: 10px;
    /* コピーライトとの間隔 */
}

footer .social-links a {
    display: inline-block;
    /* ボタンのように見せる */
    margin: 0 5px;
    /* リンク間の間隔 */
    padding: 5px 12px;
    /* 内側の余白 */
    border-radius: 15px;
    /* 角を丸く */
    background-color: rgba(255, 255, 255, 0.4);
    /* 半透明の白背景 */
    color: var(--accent-color);
    /* アクセントカラー */
    font-size: 14px;
    /* 少し小さく */
    font-weight: 500;
    text-decoration: none;
    /* 下線削除 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

footer .social-links a:hover {
    background-color: var(--accent-color);
    /* ホバー時に背景色変更 */
    color: white;
    /* ホバー時に文字色変更 */
}

/* コピーライト */
footer .copyright {
    font-size: 12px;
    /* 少し小さく */
    color: #777;
    /* 少し薄い色 */
    margin: 0;
    /* デフォルトのマージンをリセット */
}

/* --- 他の占いへのリンク --- */
.other-fortune-links {
    text-align: center;
    padding: 30px 20px;
    /* 上下の余白 */
    background-color: #fff;
    /* 背景は白 */
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(200, 200, 230, 0.1);
    /* 軽い影 */
    border: 1px solid #eee;
    max-width: 600px;
    /* コンテナ幅に合わせる */
    margin: 40px auto 40px auto;
    /* 上下のマージン */
}

.other-fortune-links h2 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 25px;
}

.link-button-container {
    display: flex;
    flex-wrap: wrap;
    /* スマホで折り返す */
    gap: 20px;
    justify-content: center;
}

.fortune-link-button {
    display: inline-flex;
    /* アイコンとテキストを横並び */
    align-items: center;
    padding: 12px 25px;
    border-radius: 30px;
    /* 丸みのあるボタン */
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    color: #333;
}

.fortune-link-button .icon {
    margin-right: 10px;
    font-size: 1.2em;
    /* アイコンサイズ */
}

/* 個別の色設定 */
.fortune-link-button.fortune {
    background-color: #fff0f5;
    /* ラベンダーブラッシュ */
}

.fortune-link-button.fortune:hover {
    background-color: #ffe4e1;
    /* ミスティローズ */
}

.fortune-link-button.lunar {
    background-color: #e6e6fa;
    /* ラベンダー */
}

.fortune-link-button.lunar:hover {
    background-color: #d8bfd8;
    /* シスル */
}

.fortune-link-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    /* ホバー時の下線不要 */
    color: #333;
    /* ホバー時の文字色維持 */
}