/*
Theme Name: 廣雅堂
Theme URI: https://kougadou.com
Author: 株式会社WINQER
Author URI: https://winqer.co.jp
Description: 全身リセット整体 廣雅堂 オリジナルWordPressテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kougadou
*/

/*
   廣雅堂 カスタムテーマ
   Tailwind CSS (CDN) + カスタムCSS で構成
   制作: 株式会社WINQER

   配色は全ページ共通でこの :root 内の変数から参照しています。
   サイト全体の色を変更したい場合は、このファイルの値を書き換えるだけで反映されます。
*/

:root {
    /* ベースカラー */
    --text: #1e3a2e; /* 深緑寄りのダーク */
    --background: #f7f8f2; /* 温かみのあるオフホワイト */

    /* ロゴ由来のグリーン×ゴールドテーマカラー */
    --primary: #1f4e3d; /* メインの深緑（ロゴの円の色） */
    --primary-dark: #13352a; /* さらに濃い深緑（見出し・強調用） */
    --primary-light: #d7e6dc; /* 薄い緑みの背景 */
    --secondary: #dcebe1; /* サブ背景（緑みの生成り） */
    --accent: #c9a961; /* ロゴの月桂樹に使われているゴールド */

    /* テキスト・リンク・その他 */
    --text-light: #ffffff;
    --text-dark: #13352a;
    --border: #c7d9cd; /* 緑がかったグレー */
    --shadow: rgba(20, 50, 40, 0.08);
    --link: #1f4e3d;
    --link-hover: #13352a;

    /* アラート用 */
    --success: #81c784;
    --error: #e57373;
    --warning: #ffb74d;
    --info: #4dd0e1;

    /* タイトル・段落 */
    --heading: #1e3a2e; /* 見出し用ダークグリーン */
    --paragraph: #4f6259; /* 本文用マット寄りグリーングレー */
    --text-faint: #7c9088; /* 日付・ラベルなど控えめなテキスト */

    /* ゴールドのグラデーション（ボタン等） */
    --gold-from: #d9be86;
    --gold-to: #b8935a;

    /* ボタン専用カラー（スマホ固定CTA: LINE予約＝薄緑／電話＝黄土色） */
    --btn-line: #5da57f;
    --btn-line-dark: #4c8a68;
    --btn-tel: #b08d3e;
    --btn-tel-dark: #967530;

    /* 背景色バリエーション */
    --bg-light: #eef3ec; /* ページ全体の背景 */
    --bg-alt: #e3ece4; /* セクション背景バリエーション */
    --bg-dark: #1f4e3d;

    /* 白黒・グレースケール（緑に合わせて少し寒色寄りに） */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f5f7f4;
    --gray-200: #e4ede7;
    --gray-300: #d7e2da;
    --gray-400: #b9c9bf;
    --gray-500: #93a89c;
    --gray-600: #5f7768;
    --gray-700: #3a5245;
    --gray-800: #24392e;
    --gray-900: #13352a;

    /* フォント・その他の設定 */
    --font-family-sans-serif: 'Inter', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-size-base: 1rem;
    --line-height-base: 1.5;
    --border-radius: 0.25rem;
    --box-shadow: 0 0.5rem 1rem rgba(20, 50, 40, 0.1);
    --transition-base: all 0.2s ease-in-out;
    --text-muted: #4f6259;
}

/* ==================================================
   Tailwind ビルド未反映のユーティリティクラスをここで上書き
   （style.css は tailwind.css の後に読み込まれるため !important 不要）
   ================================================== */
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.border-primary { border-color: var(--primary); }
.bg-secondary { background-color: var(--bg-alt); }
.bg-secondary\/30 { background-color: rgba(31, 78, 61, 0.08); }
.border-secondary { border-color: var(--border); }
.bg-graybg { background-color: var(--bg-light); }
.to-graybg { --tw-gradient-to: var(--bg-light); }
.text-text { color: var(--heading); }
.text-deep { color: var(--primary-dark); }
.bg-deep { background-color: var(--primary-dark); }
.hover\:text-primary:hover { color: var(--primary); }
.group:hover .group-hover\:text-primary { color: var(--primary); }

/* 各テンプレート共通のリンク・カード・ボタン演出 */
.theme-link { color: var(--primary); transition: color .3s ease; }
.theme-link:hover { color: var(--primary-dark); }
.theme-card-link:hover .theme-card-title { color: var(--primary); }
.theme-card-link:hover .theme-card-arrow { opacity: 1; transform: translateX(0); }
.theme-card-link:hover .theme-card-image { transform: scale(1.05); }
.theme-row-hover:hover { background-color: var(--bg-light); }
.theme-btn-outline { border: 1px solid var(--primary); color: var(--primary); background: #fff; transition: background-color .3s, color .3s; }
.theme-btn-outline:hover { background-color: var(--primary); color: #fff; }
.theme-hover-tint { background: rgba(31, 78, 61, 0); transition: background-color .3s; }
.theme-card-link:hover .theme-hover-tint { background: rgba(31, 78, 61, 0.1); }
.theme-gold-btn { background: linear-gradient(135deg, var(--gold-from), var(--gold-to)); }

/* ヘッダー上部の帯（薄緑） */
.site-header-static { background-color: rgba(220, 235, 225, 0.9); }
.site-header-scrolled { background-color: rgba(220, 235, 225, 0.95); }

/* スマホ固定CTA用ボタン */
.theme-line-btn { background-color: var(--btn-line); transition: background-color .3s; }
.theme-line-btn:hover, .theme-line-btn:active { background-color: var(--btn-line-dark); }
.theme-tel-btn { background-color: var(--btn-tel); transition: background-color .3s; }
.theme-tel-btn:hover, .theme-tel-btn:active { background-color: var(--btn-tel-dark); }

/* ==================================================
   スマホ用カルーセル（CSSのみ・横スクロール＋スナップ）
   カード枚数が多いセクション（お客様の声・選ばれる理由・ギャラリー等）に使用。
   md以上では通常の grid に戻る（各テンプレート側で md:grid を付与）。
   ================================================== */
@media (max-width: 767px) {
    .mobile-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1.25rem;
        padding-bottom: 0.5rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        scrollbar-width: none;
    }
    .mobile-carousel::-webkit-scrollbar {
        display: none;
    }
    .mobile-carousel > * {
        scroll-snap-align: start;
        flex: 0 0 85%;
    }
}

/* Base Styles */
body {
    font-family: 'Inter', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--text);
    line-height: 1.6;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

/* Scroll Animation (全ページ共通) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}