/* --- Global Size & Hero Section Fix (Verified) --- */ /* 1. サイト全体のスケールを100%に縮小します */ html { font-size: 100%; } /* 2. ヒーローセクションの高さを画面の60%に抑え、レスポンシブにします */ .hero-section-height { min-height: 70vh; } /** Sakurafuji CSS - Final Architecture **/ /* 1. New Language Display Engine (No-Flicker) */ /* By default, hide ALL language-specific text spans. */ .english, .japanese, .thai { display: none !important; } /* Only show the single, correct language based on the tag's lang attribute. */ /* This is faster and more reliable than JS manipulation. */ html[lang="en"] .english, html[lang="ja"] .japanese, html[lang="th"] .thai { display: inline !important; /* Use 'inline' which is the default for */ } /* 2. Calendar Display Fix */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; /* Use a small gap for spacing */ } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-radius: 8px; font-size: 0.875rem; /* 14px */ } .calendar-day:not(.disabled):hover { background: rgba(212, 175, 55, 0.2); } .calendar-day.selected { background: #D4AF37; color: #000; font-weight: 600; } .calendar-day.disabled { color: #4b5563; /* Darker gray for disabled days */ cursor: not-allowed; background: transparent; pointer-events: none; /* Make them unclickable */ } .calendar-day.today { box-shadow: 0 0 0 2px #D4AF37; /* Ring for today's date */ } /* --- 3. Tab Button Styling (Updated) --- */ .tab-button { padding: 0.5rem 1.5rem; /* py-2 px-6 */ border-radius: 9999px; /* rounded-full */ font-weight: 600; /* font-semibold */ background-color: #1f2937; /* bg-gray-800 */ color: #ffffff; /* text-white */ transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; } .tab-button:not(.active):hover { background-color: #374151; /* gray-700 */ color: #D4AF37; /* primary-text */ } .tab-button.active { background-color: #D4AF37; /* primary */ color: #000000; /* black */ } /* --- End of Tab Button Styling --- */ /* --- 4. All Other Copied Styles (for completeness) --- */ :where([class^="ri-"])::before{content:"\f3c2"}body{font-family:'Playfair Display',serif;scroll-behavior:smooth}.thai-text{font-family:'Noto Sans Thai',sans-serif}.japanese-text{font-family:'Noto Sans JP',sans-serif}.nav-link{position:relative;transition:all .3s ease}.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#D4AF37;transition:width .3s ease}.nav-link:hover::after,.nav-link.active::after{width:100%}.hero-overlay{background:linear-gradient(135deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 100%)}.section-padding{padding:5rem 0}.card-hover{transition:all .3s ease}.card-hover:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.3)}.info-card{transition:all .3s ease;border:1px solid transparent}.info-card:hover{border-color:#D4AF37;background:rgba(212,175,55,.05)}.map-container{position:relative;overflow:hidden}.map-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}.campaign-card{transition:all .3s ease}.campaign-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(0,0,0,.4)}.menu-item{transition:all .3s ease}.menu-item:hover{transform:scale(1.02)}.menu-category{display:none}.menu-category.active{display:block;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.time-slot{transition:all .2s ease}.time-slot:hover:not(.selected){background:rgba(212,175,55,.1)}.time-slot.selected{background:#D4AF37;color:#000} /* カレンダー選択と時間選択の見た目を統一 */ .calendar-day.selected, .time-slot.selected { background-color: #D4AF37; /* primary */ color: #000; border-color: #D4AF37; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fadeIn .3s ease-in-out; } /* .menu-category は既存の .menu-category{display:none} .menu-category.active{display:block} が生きていればそのままでOK */ /* tabs (汎用) */ .tab-panel { display:none; } .tab-panel.active { display:block; animation:fadeIn .3s ease-in-out; } /* --- Hero Video Background Styles --- */ .hero-video { /* このスタイルは .hero-video クラスを持つ要素にしか適用されない */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 100%; object-fit: contain; /* 全体を表示、黒帯OK */ background: black; z-index: 1; } /* スマホ（例: 768px以下）ではタブ非表示、すべて展開 */ @media (max-width: 768px) { .tab-button { display: none !important; } .tab-panel { display: block !important; /* 全部表示 */ opacity: 1 !important; visibility: visible !important; } }