/*
 Theme Name:   My Child Theme
 Theme URI:    https://example.com/my-child-theme
 Description:  Child theme of Twenty Twenty-Four.
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-child-theme
*/

/* ここに子テーマ用のカスタム CSS を追加してください */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.font-cormorant {
    font-family: 'Cormorant Garamond', serif;
}

/* Override wp-travel-engine public styles (hero search only) */
.hlj-hero-search input[type="text"],
.hlj-hero-search input[type="email"],
.hlj-hero-search input[type="tel"],
.hlj-hero-search input[type="number"],
.hlj-hero-search input[type="password"],
.hlj-hero-search input[type="date"],
.hlj-hero-search select,
.hlj-hero-search textarea {
    padding: 0 0 4px 0!important;
    min-height: 0 !important;
    height: 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #d1d5db !important; /* gray-300 */
    border-radius: 0 !important;
    box-shadow: none !important;
}
.hlj-hero-search input[type="text"]:focus,
.hlj-hero-search select:focus,
.hlj-hero-search textarea:focus {
    border-bottom-color: #0284c7 !important; /* sky-600 */
    outline: none !important;
}

.container {
    max-width: 1100px !important;
    padding: 0 60px !important;
    margin-left: auto;
    margin-right: auto;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


.hidden { display: none; }
.tab-btn.active { border-color: #2b6484; color: #2b6484; }

/* フェードインのアニメーション */
.tab-content {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 非表示の時の状態 */
.tab-content[style*="display: none"] {
    opacity: 0;
    transform: translateY(10px); /* 少し下から浮き上がる */
}

/* 表示された時の状態（JSで書き換わった後用） */
.tab-content:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}