/*
Theme Name: Ouchi Cafe
Theme URI: 
Author: milk0
Description: Original WordPress theme based on Ouchi Cafe static design.
Version: 1.0
*/

:root {
    --bg-color: #f5f5f0;
    --text-color: #333333;
    --header-bg: rgba(74, 59, 50, 0.85); /* #4a3b32の85%透過 */
    /* フッターと同じ濃いブラウン */
    --footer-bg: #4a3b32;
    /* 濃いブラウン */
}

body {
    font-family: 'Shippori Mincho', serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.8;
}

/* 縦書きのスタイル設定 */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* フェードインアニメーション */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ヘッダーの調整 */
.custom-header {
    background-color: var(--header-bg);
    transition: all 0.3s ease;
}

/* スムーススクロール */
html {
    scroll-behavior: smooth;
}

/* 装飾用の線アニメーション */
.line-draw {
    height: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.6);
    animation: drawLine 1.5s 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes drawLine {
    to {
        height: 60px;
    }
}

/* 画像のホバーエフェクト */
.img-zoom {
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.img-container:hover .img-zoom {
    transform: scale(1.05);
}

/* メニューカードのシャドウ微調整 */
.menu-card {
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* 地図のダミー背景 */
.map-placeholder {
    background-color: #e5e5e5;
    position: relative;
}

.map-placeholder::after {
    content: "Google Map";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
}