body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fdf6ff;
    color: #333;
    line-height: 1.8;
}

.serif {
    font-family: 'Noto Serif JP', serif;
}

.hero-gradient {
    background: linear-gradient(135deg, #E10080, #F06292, #FF94C2);
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(225, 0, 128, 0.2);
}

.quote-border {
    border-left: 4px solid #E10080;
}

.custom-purple {
    background-color: #E10080;
}

.custom-purple-light {
    background-color: #F06292;
}

.text-purple {
    color: #E10080;
}

.border-purple {
    border-color: #E10080;
}

.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #E10080;
    transform: translateX(-50%);
}

.timeline-dot {
    position: absolute;
    left: -20px;
    top: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #E10080;
    transform: translateX(-50%);
}

.star-bg {
    background-image: url('https://cdn.jsdelivr.net/gh/StartBootstrap/startbootstrap-grayscale@master/dist/assets/img/bg-masthead.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.star-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(225, 0, 128, 0.85), rgba(240, 98, 146, 0.85));
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.pulse-button {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(225, 0, 128, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(225, 0, 128, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(225, 0, 128, 0);
    }
}

/* 固定ボタングループのスタイル - 修正版（LINEボタンを左に配置） */
.fixed-buttons {
    position: fixed;
    bottom: 20px;
    left: 20px;  /* 右から左に変更 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* flex-endからflex-startに変更 */
    gap: 10px;
    z-index: 1000;
}

/* LINE予約ボタンのスタイル - 白背景・紫文字 */
.line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;  /* 紫から白に変更 */
    color: #E10080;  /* 白から新しいピンクに変更 */
    border: 2px solid #E10080;  /* ボーダー色も変更 */
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s;
    width: auto;
    min-width: 100px;
}

.line-btn:hover {
    background-color: #fff0f7;  /* ホバー時は薄ピンク色に */
    color: #cc0073;  /* 少し濃いピンクに */
}

/* TOPへ戻るボタンは右側に残す - 白背景・紫アイコン */
.top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: white;  /* 紫から白に変更 */
    color: #E10080;  /* 白から新しいピンクに変更 */
    border: 2px solid #E10080;  /* ボーダー色も変更 */
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s;
}

.top-btn:hover {
    background-color: #fff0f7;  /* ホバー時は薄ピンク色に */
    color: #cc0073;  /* 少し濃いピンクに */
}

/* Tailwind CSS のカスタムカラーオーバーライド用 */
.text-primary {
    color: #E10080 !important;
}

.text-purple-800 {
    color: #E10080 !important;
}

.bg-purple-800 {
    background-color: #E10080 !important;
}

.bg-purple-600 {
    background-color: #E10080 !important;
}

.bg-purple-100 {
    background-color: #fff0f7 !important;
}

.bg-purple-50 {
    background-color: #fff5fa !important;
}

.hover\:bg-purple-50:hover {
    background-color: #fff0f7 !important;
}

.hover\:bg-purple-100:hover {
    background-color: #ffe6f3 !important;
}

.border-purple-800 {
    border-color: #E10080 !important;
}

.border-purple-200 {
    border-color: #ffb3d9 !important;
}

.text-purple-600 {
    color: #E10080 !important;
}

.hover\:text-purple-800:hover {
    color: #cc0073 !important;
}

.text-purple-300 {
    color: #ff94c2 !important;
}
/* フッター部分の背景色を紫からピンクに変更 */
footer.bg-purple-900 {
    background-color: #E10080 !important;
}

/* フッター部分の背景色を白に、テキスト色をピンクに変更 */
footer,
.bg-purple-900,
[class*="クイックリンク"],
[class*="店舗情報"] {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* 見出しをピンク色に */
footer h3,
.店舗情報,
.クイックリンク,
footer .text-xl {
    color: #E10080 !important;
    font-weight: bold;
}

/* リンク色をピンクに */
footer a,
footer a:hover {
    color: #E10080 !important;
    transition: opacity 0.3s ease;
}

footer a:hover {
    opacity: 0.8;
}

/* アイコン色の調整 */
footer .fas,
footer .far,
footer .fab,
.text-purple-300 {
    color: #E10080 !important;
}

/* ボーダー色の調整 */
.border-t.border-purple-800,
.border-purple-800,
footer hr {
    border-color: #f0f0f0 !important;
}

/* テキスト色の調整 */
footer .text-gray-300,
footer .text-gray-400,
footer p,
footer li {
    color: #666666 !important;
}

/* LINE予約ボタンの調整（白背景・ピンク枠・ピンク文字） */
.line-btn,
.top-btn {
    background-color: #ffffff !important;
    color: #E10080 !important;
    border: 2px solid #E10080 !important;
    transition: all 0.3s ease;
}

.line-btn:hover,
.top-btn:hover {
    background-color: #fff0f7 !important;
    color: #E10080 !important;
}

/* コピーライトやその他細かい文字 */
footer .text-sm,
footer small {
    color: #888888 !important;
}

/* 特定のセクション背景を白に修正 */
/* メインコンテンツ部分の背景を白に */
body > div,
body > section,
.bg-purple-900,
footer,
[class*="クイックリンク"],
[class*="店舗情報"],
body > *:not(header):not(nav):not(.hero-gradient) {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* スクリーンショットのピンク背景部分を特定して白背景に */
body > div > div,
.店舗情報,
.店舗情報 ~ div,
#店舗情報,
.store-info,
.quick-links,
div[class*="店舗"],
div[class*="情報"],
section[class*="店舗"],
div:has(> .店舗情報) {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* 全般的なテキスト色の調整 */
body {
    color: #333333;
}

/* 見出しをピンク色に */
h1, h2, h3, h4, h5, h6,
.店舗情報,
.クイックリンク,
footer .text-xl,
div[class*="店舗"] > h2,
div[class*="情報"] > h2,
div > h2,
div > h3 {
    color: #E10080 !important;
    font-weight: bold;
}

/* アイコン色の調整 */
.fas, .far, .fab,
.text-purple-300 {
    color: #E10080 !important;
}

/* ヒーローセクション（メインビジュアル）の文字色を修正 */
.hero-gradient h1,
.hero-gradient .text-4xl,
.hero-gradient .text-5xl,
.hero-gradient .text-6xl,
.hero-gradient .serif,
.hero h1,
.hero h2,
.hero .text-3xl,
.hero .text-4xl,
.star-bg h2,
.star-bg h3,
.star-bg .text-3xl,
.star-bg .text-4xl,
.hero-section h1,
.hero-section h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: bold !important;
}

/* ピンク背景に薄いピンク文字になっている部分を修正 */
.hero-gradient,
.star-bg,
[style*="background: linear-gradient"] {
    color: #ffffff !important;
}

/* 薄い文字を白く目立たせる */
.hero-gradient *,
.star-bg *,
[style*="background: linear-gradient"] * {
    color: #ffffff !important;
}

/* 見出し文字の強調 */
.hero-gradient h1,
.hero-gradient h2,
.hero-gradient h3,
.star-bg h1,
.star-bg h2,
.star-bg h3 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* LINE予約ボタンのコントラスト強化 */
.hero-gradient .inline-block,
.star-bg .inline-block,
.line-btn,
[href*="line"],
[href*="LINE"] {
    background-color: white !important;
    color: #E10080 !important;
    font-weight: bold !important;
    border: 2px solid white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    text-shadow: none !important;
}