/* カスタム背景色の定義 */

/* ヒーローセクションの背景 - 柔らかい女性向けのグラデーション */
.hero-section {
    background: linear-gradient(to bottom, #f9d1f0, #e2c6ff) !important;
    color: #4B5563; /* テキストの色を暗めに変更して読みやすく */
}

/* チャットページの背景設定 */
.chat-app {
    background-color: #fdf4ff !important; /* 非常に薄いピンク */
}

.chat-messages {
    background-color: #fdf4ff !important; /* 非常に薄いピンク */
    border-left: 1px solid #fce7f3 !important; /* 薄いピンクのボーダー */
    border-right: 1px solid #fce7f3 !important;
}

.chat-header, .chat-input {
    background-color: #fdf4ff !important;
    border-color: #fce7f3 !important;
}

/* チャットバブルスタイル調整 */
.chat-bubble.user {
    background-color: #f0e7ff !important; /* 明るめの紫 */
    color: #4B5563 !important;
}

.chat-bubble.pla {
    background-color: #ffe4f2 !important; /* 薄いピンク */
    color: #4B5563 !important;
}

.chat-bubble.rine {
    background-color: #ede9fe !important; /* 薄い紫 */
    color: #4B5563 !important;
}

/* CTAセクションの背景 - プラとリネの色のグラデーション */
.cta-section {
    background: linear-gradient(to right, #FF7BAC, #9A7ED4) !important;
    color: white;
}

/* スライダーセクションの背景色調整 - 女性向けの柔らかい色に */
.splide__slide {
    background-color: #fbf7fe !important; /* 非常に薄い紫 */
}

/* スライダーのページネーション色 */
.splide__pagination__page {
    background: #d8b4fe !important; /* 薄い紫 */
}
.splide__pagination__page.is-active {
    background: #c084fc !important; /* 中くらいの紫 */
}

/* スライダーの表示を適切に調整 - 横幅のはみ出し修正 */
.recent-questions-slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.recent-questions-slider .splide {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.recent-questions-slider .splide__track {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.recent-questions-slider .splide__list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.recent-questions-slider .splide__slide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 左から右へのアニメーション用のスタイル */
.splide__slide.is-active,
.splide__slide.slide-left-to-right {
    animation: slideLeftToRight 0.8s ease-out forwards;
}

@keyframes slideLeftToRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 初期状態でスライドを非表示に */
.splide__slide:not(.is-active):not(.slide-left-to-right) {
    opacity: 0;
}

/* 新しいスライダーデザイン - 添付された画像に近いデザイン */
.recent-questions-section {
    background-color: #f9f0f7 !important; /* 非常に薄いピンク */
    padding: 1rem 0;
    margin: 0 0 1rem 0;
    width: 100% !important;
    border-radius: 1rem;
    overflow: hidden;
}

.recent-questions-section h3 {
    padding: 0 1rem;
    margin-bottom: 0.5rem;
    color: #e83d8e !important;
}

.recent-questions-slider {
    background-color: #f9f0f7 !important;
    padding: 0;
    margin: 0;
    border: none !important;
    box-shadow: none !important;
}

.recent-questions-slider .splide__slide {
    padding: 0.5rem 1rem;
    background-color: #f9f0f7 !important;
}

.recent-questions-slider .splide__slide div {
    background-color: #f9f0f7 !important;
    padding: 0.75rem;
    color: #4a5568 !important;
    font-weight: 500;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin: 0;
}

/* ページネーションドットのスタイル */
.splide__pagination {
    bottom: -1rem !important;
}

.splide__pagination__page {
    background: #e2c6ff !important;
    opacity: 0.3;
    width: 8px !important;
    height: 8px !important;
}

.splide__pagination__page.is-active {
    background: #e83d8e !important;
    opacity: 1;
    transform: scale(1.2);
}

/* モバイル向けのスライダー調整 */
@media (max-width: 640px) {
    .recent-questions-slider,
    .recent-questions-slider .splide,
    .recent-questions-slider .splide__track,
    .recent-questions-slider .splide__list,
    .recent-questions-slider .splide__slide {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 月間テーマセクションの背景 */
.monthly-themes {
    background-color: #fdf2f8 !important; /* 非常に薄いピンク */
}

/* ヒーローセクション内のキャラクターカード */
.bg-gradient-to-r.from-pla.to-rine {
    background: linear-gradient(to right, #FF7BAC, #9A7ED4) !important;
}

/* 質問プロンプト表示を女性向けの柔らかい色に */
.question-prompt {
    background-color: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    border-radius: 0.75rem !important;
    color: #92400e !important;
}