/*
Theme Name: Welcart Basic
Theme URI: https://www.welcart.com/archives/4286.html
Author: Welcart Inc.
Author URI: https://www.welcart.com/
Description: Welcart Basic is the Welcart dedicated theme.
Version: 1.8.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive-layout, white, two-columns, right-sidebar
Requires at least: 5.6
Requires PHP: 7.4
*/

/* 基本スタイル調整 */

html, body {
    overflow: visible !important;
    height: auto !important;
}

body {
    font-family: "Zen Kaku Gothic New", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    overflow-x: hidden !important; /* 横スクロールのみ防ぐ */
}

footer a {
	color: inherit !important;
}


/* カスタムスクロールバー (天気予報などで使用) */
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* アニメーション用クラス（基本） */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ゆっくり読ませるためのスローアニメーション用クラス */
.animate-slow-read {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-slow-read.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 遅延表示用 */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-600 { transition-delay: 600ms; }
.delay-800 { transition-delay: 800ms; }

/* スライドショー & ケンバーンズ効果 */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 2000ms ease-in-out, transform 10000ms ease-out;
    transform: scale(1.0);
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
    transform: scale(1.15);
}

/* テキストアニメーション用 */
.text-char {
    display: inline-block;
    opacity: 0;
}
.text-char.animate {
    animation: textPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.text-gradient-animate {
    background: linear-gradient(to right, #fbbf24, #f87171, #fbbf24, #34d399, #fbbf24);
    background-size: 300% auto;
    -webkit-background-clip: text;
    color: transparent;
    animation: textShine 4s linear infinite;
}
@keyframes textShine {
    to { background-position: 300% center; }
}

/* ヘッダーのドロップダウンメニュー */
.group:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.dropdown-menu {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease;
}

#mobile-menu {
    height: 100dvh;
}

/* Plansエリア画像ホバー時の角丸修正 */
.card-image-container {
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
}

/* Aboutエリア画像ホバー時の角丸修正 */
.about-image-mask {
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
}

.natural-label {
    border-bottom-right-radius: 2rem;
    border-top-left-radius: 1.5rem;
}

/* 画像マスク装飾 */
.card-image-mask {
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    border-radius: 1.5rem 1.5rem 0 0;
    overflow: hidden;
}

/* 波線の背景 */
.wave-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f0fdf4' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}

/* --- FAQページ用スタイル (追加) --- */

/* アコーディオンのアイコン回転アニメーション */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary ~ * {
    animation: sweep .3s ease-in-out;
}
@keyframes sweep {
    0%    {opacity: 0; transform: translateY(-10px)}
    100%  {opacity: 1; transform: translateY(0)}
}
details[open] .accordion-icon {
    transform: rotate(180deg);
}

/* キャンセル料テーブル（必要な場合） */
.cancel-table th, .cancel-table td {
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
}
.cancel-table th {
    background-color: #f8fafc;
    font-weight: bold;
    color: #475569;
}


/* -------------------------------------------
   MTS Simple Booking カレンダーデザイン調整
   （HTML構造: .c-calendar__app ベース）
------------------------------------------- */

/* --- レイアウト（2ヶ月横並び対応） --- */
.mtssb-custom-calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

/* 個々のカレンダーブロック */
.c-calendar__app {
    width: calc(50% - 10px); /* 隙間を考慮して半分の幅に */
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    /* 枠線をつけたい場合は以下を有効化 */
    /* border: 1px solid #e2e8f0; */
}

/* --- テーブル基本設定 --- */
.c-calendar__app table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    margin-bottom: 1rem;
    table-layout: fixed; /* 列幅を均等にする */
}

/* --- キャプション（年月） --- */
.calendar-caption {
    caption-side: top;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #065f46; /* text-emerald-800 */
    background-color: #ecfdf5; /* bg-emerald-50 */
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
    letter-spacing: 0.1em;
}

/* --- ヘッダー（曜日） --- */
.week-title {
    padding: 0.75rem 0.25rem;
    background-color: #f8fafc; /* bg-slate-50 */
    color: #475569; /* text-slate-600 */
    font-weight: bold;
    font-size: 0.9rem;
    border-bottom: 2px solid #e2e8f0;
    text-align: center;
}
/* 土曜日 */
.week-title.sat {
    color: #0284c7; /* text-sky-600 */
    background-color: #f0f9ff;
}
/* 日曜日 */
.week-title.sun {
    color: #e11d48; /* text-rose-600 */
    background-color: #fff1f2;
}

/* --- 日付セル（本体） --- */
.day-box {
    padding: 0.5rem 0.25rem;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    height: 70px; /* セルの高さを確保 */
    position: relative;
}

/* 日付のないセル */
.day-box.no-day {
    background-color: #fafafa;
}

/* --- 日付数字 --- */
.day-number {
    display: block;
    font-size: 0.8rem;
    color: #64748b; /* text-slate-500 */
    margin-bottom: 4px;
    line-height: 1;
}

/* 土日の日付色（クラス判定） */
.day-box.sat .day-number { color: #0284c7; }
.day-box.sun .day-number,
.day-box.holiday .day-number { color: #e11d48; font-weight: bold; }

/* 今日の強調 */
.day-box.today {
    background-color: #fffbeb; /* amber-50 */
}
.day-box.today .day-number {
    color: #d97706;
    font-weight: bold;
    text-decoration: underline;
}

/* --- 記号（○－×）エリア --- */
.calendar-mark {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
    display: block;
}

/* リンク（予約可能な日） */
.calendar-mark a.calendar-daylink {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
}
.calendar-mark a.calendar-daylink:hover {
    transform: scale(1.2);
}

/* --- 状態別の色（親tdのクラスで判定） --- */

/* 予約可能（vacant）: ○ */
.day-box.vacant .calendar-mark,
.day-box.vacant .calendar-mark a {
    color: #10b981; /* emerald-500 */
}

/* 予約不可・除外日（disable）: － */
.day-box.disable .calendar-mark {
    color: #cbd5e1; /* slate-300 */
    font-size: 1rem;
}

/* 満席（full）: ×（HTMLにfullクラスが出ると想定） */
.day-box.full .calendar-mark {
    color: #cbd5e1; /* slate-300 */
}
/* 残りわずか（low）: △（HTMLにlowクラスが出ると想定） */
.day-box.low .calendar-mark {
    color: #f59e0b; /* amber-500 */
}


/* --- 注釈（祝日名など） --- */
.schedule-note {
    font-size: 0.65rem;
	color: #ddd;
    line-height: 1.2;
    margin-top: 2px;
    word-break: break-all;
}


/* --- ナビゲーション（前月・翌月） --- */
.monthly-prev-next {
	display: none;
    /*display: flex;*/
    justify-content: space-between;
    padding: 0 0.5rem 1rem;
}

.monthly-prev, .monthly-next {
	display: none;
    font-size: 0.9rem;
}

.monthly-prev a, .monthly-next a {
    display: inline-block;
    padding: 4px 12px;
    background: #fff;
    color: #059669;
    border: 1px solid #d1fae5;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s;
}
.monthly-prev a:hover, .monthly-next a:hover {
    background-color: #059669;
    color: #fff;
}
.monthly-prev span, .monthly-next span {
    color: #cbd5e1; /* リンクなしの場合 */
}


/* --- 2ヶ月表示時のナビゲーション整理 --- */
/* PC表示時：左カレンダーの「翌月」と右カレンダーの「前月」を隠す */
@media (min-width: 769px) {
    .mtssb-custom-calendar .c-calendar__app:first-child .monthly-next {
        visibility: hidden;
    }
    .mtssb-custom-calendar .c-calendar__app:last-child .monthly-prev {
        visibility: hidden;
    }
}


/* --- スマホ表示調整（768px以下） --- */
@media (max-width: 768px) {
    /* 1カラムに戻す */
    .c-calendar__app {
        width: 100%;
        margin-bottom: 2rem;
    }
    
    /* 隠していたナビゲーションを戻す */
    .mtssb-custom-calendar .c-calendar__app:first-child .monthly-next,
    .mtssb-custom-calendar .c-calendar__app:last-child .monthly-prev {
        visibility: visible;
    }

    .calendar-caption {
        font-size: 1.1rem;
        padding: 0.75rem;
    }
    .day-box {
        height: auto;
        padding: 0.75rem 0.25rem;
    }
    .schedule-note {
		color: #ddd;
        display: none; /* スマホで狭い場合、祝日名を隠すのもアリ */
    }
}

/* plans */


/* スクロール時のヘッダー被り防止 */
section {
    scroll-margin-top: 80px;
}

/* 診断ツールのトランジション */
.diagnosis-step {
    transition: all 0.5s ease-in-out;
}

/* テーブルのスクロールバー */
.table-container::-webkit-scrollbar {
    height: 8px;
}
.table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* スマホ用テーブル固定カラム */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 30;
}
/* 固定カラムの右側に影をつける */
.sticky-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to right, rgba(0,0,0,0.05), transparent);
    transform: translateX(100%);
    pointer-events: none;
}



/* --- plan-detail --- */
.plan-detail {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0;
    font-size: 0.9rem;
}
.plan-detail th, .plan-detail td {
    padding: 12px 8px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    transition: background-color 0.1s;
}

/* テーブルヘッダー（人数行） */
.plan-detail__number-people td {
    background-color: #ecfdf5; /* emerald-50 */
    color: #065f46;
    font-weight: bold;
    border-bottom: 2px solid #a7f3d0;
}
/* 左端カラム固定（横スクロール時のみ有効） */
.plan-detail__number-people td:first-child,
.plan-detail .plan-detail__item-name {
    position: sticky;
    left: 0;
    z-index: 20;
    border-right: 1px solid #e2e8f0;
}
.plan-detail__number-people td:first-child {
    z-index: 30; /* 交差地点は最前面 */
}

/* 項目名カラム */
.plan-detail__item-name {
    text-align: left !important;
    background-color: #f8fafc;
    font-weight: bold;
    color: #475569;
    min-width: 220px !important;
    width: 220px !important;
}

/* テーブル本体の修正 */
#matrix-table {
    /* テーブル全体の幅を固定せず、コンテンツの最小幅を維持させる */
    width: 100%;
    min-width: max-content; 
    table-layout: auto;
}

/* 人数ヘッダーの修正（4名〜20名） */
.plan-detail__number-people td:not(:first-child) {
    min-width: 60px; /* 数値列も最低幅を指定しておくと綺麗になります */
}

/* 区切りヘッダー行 */
.section-header td {
    background-color: #059669; /* emerald-600 */
    color: white;
    font-weight: bold;
    text-align: left;
    padding: 8px 16px;
}

/* --- テーブルハイライト用クラス (JSで制御) --- */
/* 行のハイライト */
.matrix-row-hover td {
    background-color: #f0fdf4 !important; /* emerald-50 */
}
/* 列のハイライト */
.matrix-col-hover {
    background-color: #f0fdf4 !important; /* emerald-50 */
}
/* 交差セルのハイライト */
.matrix-cell-hover {
    background-color: #d1fae5 !important; /* emerald-100 */
    color: #047857;
    font-weight: bold;
}
/* 項目名セルのハイライト（行ハイライト時） */
.matrix-row-hover .plan-detail__item-name {
    background-color: #ecfdf5 !important;
    color: #059669;
}

/* テーブルのレスポンシブ対応 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #f1f5f9;
	min-width: 0;
}

.table-responsive table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

/* 数量入力フォームのスタイル */
input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1.2rem;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}
input[type="number"]:focus {
    border-color: #059669;
}

/* 数量スピンボタンの非表示（モダンブラウザ） */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* 画像ギャラリーのアクティブボーダー */
.thumb-active img {
    border: 2px solid #f59e0b; /* amber-500 */
    opacity: 0.7;
}
/* --- 商品詳細のレイアウト微調整 --- */
.wc_included_box {
    margin-bottom: 1rem !important;
}

/* 商品詳細の左右カラムが崩れないように設定 */
@media (min-width: 1024px) {
    #item_detail .flex-col.md\:flex-row {
        align-items: flex-start; /* 上揃えに固定してレイアウト崩れを防ぐ */
    }
}

/* --- スマホ表示でのテーブル最適化 --- */
@media (max-width: 768px) {
    /* 項目名列をコンパクトに固定 */
    .plan-detail .plan-detail__item-name {
        min-width: 90px !important;
        width: 90px !important;
        max-width: 90px !important;
        font-size: 0.7rem !important;
        padding: 8px 4px !important;
        line-height: 1.2 !important;
    }

    .plan-detail td {
        padding: 6px 4px !important;
        font-size: 0.75rem !important;
    }

    /* テーブル自体の余白調整 */
    .table-responsive {
        border-radius: 12px !important;
        margin-bottom: 1rem;
    }
}

/* --- フォームと情報の隙間調整 --- */
form#form1 {
    margin-top: 1rem;
    border-top: 1px dashed #f1f5f9;
    padding-top: 1rem;
}

/* モーダル内カレンダーの調整 */
#calendar-modal .mtssb-custom-calendar {
    width: 100%;
}
#calendar-modal .c-calendar__app {
    width: 100% !important;
}

/* --- ご利用ガイド ページ専用スタイル --- */

.section-number-title {
    position: relative;
    display: inline-block;
}
.section-number-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #10b981;
}

.guide-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.2s;
}
.guide-nav-link:hover {
    background-color: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.guide-nav-link .nav-num {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ecfdf5;
    color: #10b981;
    border-radius: 9999px;
    font-size: 0.75rem;
}

.reserve-method-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}
.reserve-method-btn:hover {
    transform: translateY(-4px);
}

/* タイムライン装飾 */
.step-dot-pc, .step-dot-sp {
    position: absolute;
    top: 1.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 4px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.step-label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* =========================================
   plan-list.html 由来のスタイル (Category用)
   ========================================= */

/* カテゴリ見出し */
.heading01 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1e293b; /* slate-800 */
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0; /* slate-200 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .heading01 {
        font-size: 1.875rem;
        margin-bottom: 2rem;
    }
}

/* 商品リストコンテナ (BootstrapのrowをCSS Gridで上書き) */
.product_list.row {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 1rem;
    margin: 0;
}
@media (min-width: 768px) {
    .product_list.row {
        grid-template-columns: repeat(3, 1fr); /* PCは3列 */
        gap: 1.5rem;
    }
}

/* グリッドのカラムスタイルリセット */
.product_list .col-sm-4, 
.product_list .col-xs-6 {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* 商品カード本体 */
.product_item {
    background-color: white;
    border: 1px solid #f5f5f4; /* stone-100 */
    border-radius: 1rem; /* rounded-2xl */
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}
.product_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    border-color: #d1fae5; /* emerald-100 */
}

.product_item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 商品画像 */
.item_photo {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形 */
    overflow: hidden;
    background-color: #f1f5f9; /* slate-100 */
    position: relative;
}
.item_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.product_item:hover .item_photo img {
    transform: scale(1.05);
}

/* 商品情報エリア */
.product_item dl {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 商品名 */
.item_name {
    font-size: 0.875rem; /* text-sm */
    font-weight: bold;
    color: #334155; /* slate-700 */
    margin-bottom: 0.5rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .item_name {
        font-size: 1rem; /* text-base */
    }
}
.product_item:hover .item_name {
    color: #059669; /* emerald-600 */
}

/* 価格 */
.item_price {
    font-size: 1.125rem; /* text-lg */
    font-weight: bold;
    color: #f59e0b; /* amber-500 */
    margin-bottom: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* 単位表示 */
.item_unit {
    font-size: 0.75rem;
    font-weight: normal;
    color: #64748b; /* slate-500 */
    font-family: "Zen Kaku Gothic New", sans-serif;
}

/* コメント（説明文） */
.item_comment {
    font-size: 0.75rem; /* text-xs */
    color: #64748b; /* slate-500 */
    line-height: 1.5;
    margin-top: auto; /* 下部に配置 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 特徴タグリスト */
.item_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}
.item_tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem; /* 10px */
    font-weight: bold;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .item_tag {
        font-size: 0.7rem;
    }
}
/* アンバー系のタグ */
.tag-amber {
    background-color: #fffbeb; /* amber-50 */
    color: #b45309; /* amber-700 */
    border: 1px solid #fde68a; /* amber-200 */
}
/* エメラルド系のタグ */
.tag-emerald {
    background-color: #ecfdf5; /* emerald-50 */
    color: #047857; /* emerald-700 */
    border: 1px solid #a7f3d0; /* emerald-200 */
}

/* ページネーション (EC-CUBE風クラス) */
.ec-pagerRole {
    margin-top: 3rem;
    text-align: center;
}
.ec-pagerRole .pagination {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}
.ec-pagerRole .pagination li a,
.ec-pagerRole .pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px; /* rounded-full */
    background-color: white;
    color: #64748b;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.ec-pagerRole .pagination li .current,
.ec-pagerRole .pagination li a:hover {
    background-color: #059669; /* emerald-600 */
    color: white;
    border-color: #059669;
}

/* =========================================
   ブログ一覧 (Archive) 用スタイル
   ========================================= */
/* 記事カードのホバーエフェクト */
.blog-card:hover .blog-image {
    transform: scale(1.05);
}

/* ページネーション (WordPress標準出力のスタイル調整) */
ul.page-numbers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s;
}
.page-numbers.current {
    background-color: #059669;
    color: white;
    border-color: #059669;
}
.page-numbers:hover:not(.current) {
    background-color: #f8fafc;
    color: #059669;
    border-color: #a7f3d0;
}
/* アイコン調整 */
.page-numbers svg {
    width: 1.25rem;
    height: 1.25rem;
}


/* =========================================
   ブログ詳細 (Single) 用スタイル
   ========================================= */
/* 記事本文のスタイル */
.post-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b; /* slate-800 */
    border-bottom: 2px solid #059669; /* emerald-600 */
    padding-bottom: 0.5rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}
.post-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    border-left: 4px solid #f59e0b; /* amber-500 */
    padding-left: 0.75rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.post-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #334155; /* slate-700 */
}
.post-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: #334155;
}
.post-content li {
    margin-bottom: 0.5rem;
}
.post-content img {
    border-radius: 0.75rem; /* rounded-xl */
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 目次スタイル (プラグイン等を使わず手動実装する場合のスタイル) */
.toc-box {
    background-color: #f8fafc; /* slate-50 */
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.toc-box ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}
.toc-box li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.25rem;
}
.toc-box li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #059669;
}
.toc-box a {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.toc-box a:hover {
    color: #047857;
    text-decoration: underline;
}


/* =========================================
   お知らせ用スタイル
   ========================================= */

/* アコーディオンのアニメーション */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary ~ * {
    animation: sweep .3s ease-in-out;
}
@keyframes sweep {
    0%    {opacity: 0; transform: translateY(-10px)}
    100%  {opacity: 1; transform: translateY(0)}
}
/* アイコン回転 */
details[open] .accordion-icon {
    transform: rotate(180deg);
}

/* お知らせ本文のスタイル */
.news-body p {
    margin-bottom: 1em;
    line-height: 1.8;
    color: #334155; /* slate-700 */
}
/* 問い合わせ枠 */
.contact-box {
    background-color: #f8fafc; /* slate-50 */
    border: 1px solid #e2e8f0; /* slate-200 */
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem; /* text-sm */
    margin-top: 1.5rem;
    color: #475569; /* slate-600 */
}

/* ページネーション (ブログと共通デザイン) */
ul.page-numbers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s;
}
.page-numbers.current {
    background-color: #059669;
    color: white;
    border-color: #059669;
}
.page-numbers:hover:not(.current) {
    background-color: #f8fafc;
    color: #059669;
    border-color: #a7f3d0;
}
.page-numbers svg {
    width: 1.25rem;
    height: 1.25rem;
}


/* =========================================
   お問い合わせ
   ========================================= */

/* フォーム全体のレイアウト調整 */
        .wpcf7-form p {
            margin-bottom: 1.5rem;
        }
        /* ラベル */
        .wpcf7-form label {
            display: block;
            font-weight: 700;
            color: #334155; /* slate-700 */
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }
        /* 必須マーク */
        .wpcf7-form .required {
            color: #e11d48; /* rose-600 */
            font-size: 0.75rem;
            background-color: #ffe4e6; /* rose-100 */
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 0.5rem;
            vertical-align: middle;
        }
        /* 入力フィールド共通 */
        .wpcf7-form input[type="text"],
        .wpcf7-form input[type="email"],
        .wpcf7-form input[type="tel"],
        .wpcf7-form input[type="date"],
        .wpcf7-form textarea,
        .wpcf7-form select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #cbd5e1; /* slate-300 */
            border-radius: 0.5rem;
            background-color: #f8fafc; /* slate-50 */
            transition: all 0.2s;
            font-size: 1rem;
        }
        .wpcf7-form input:focus,
        .wpcf7-form textarea:focus,
        .wpcf7-form select:focus {
            outline: none;
            border-color: #10b981; /* emerald-500 */
            background-color: #ffffff;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }
        /* ラジオボタン・チェックボックス */
        .wpcf7-list-item {
            margin-right: 1.5rem;
            display: inline-block;
        }
        .wpcf7-list-item input {
            margin-right: 0.25rem;
            accent-color: #059669; /* emerald-600 */
        }
        /* 送信ボタン */
        .wpcf7-submit {
            background-color: #059669; /* emerald-600 */
            color: white;
            font-weight: bold;
            padding: 1rem 3rem;
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            display: block;
            margin: 2rem auto 0;
            width: 100%;
            max-width: 300px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .wpcf7-submit:hover {
            background-color: #047857; /* emerald-700 */
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        /* エラーメッセージ */
        .wpcf7-not-valid-tip {
            color: #e11d48;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        .wpcf7-response-output {
            border-radius: 0.5rem;
            padding: 1rem !important;
            margin-top: 2rem !important;
            text-align: center;
            border: none !important;
        }
        .wpcf7-validation-errors {
            background-color: #ffe4e6;
            color: #be123c;
        }
        .wpcf7-mail-sent-ok {
            background-color: #d1fae5;
            color: #047857;
        }



/* =========================================
   ロゴの色制御
   ========================================= */

/* 初期状態（スクロール前）: オレンジ色 (Amber-500に近い色) */
#dynamic-logo {
    filter: invert(66%) sepia(35%) saturate(5436%) hue-rotate(1deg) brightness(103%) contrast(106%);
}

/* スクロール後 (.scrolledクラスが付いた時): グリーン (Emerald-700に近い色) */
#global-header.scrolled #dynamic-logo {
    filter: invert(29%) sepia(55%) saturate(666%) hue-rotate(126deg) brightness(95%) contrast(92%);
}

/* (オプション) ヘッダー自体の背景変化 
  スクロールした時にヘッダー背景を「ガラス（グラスモーフィズム）」風にする
*/
#global-header.scrolled {
    /* 背景色を半透明の白に設定 */
    background-color: rgba(255, 255, 255, 0.65);
    /* 背景のぼかし効果（すりガラス感） */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* ガラスの縁のような境界線 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    /* 柔らかい影 */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* スクロール後のテキスト色変更（必要であれば） */
#global-header.scrolled #header-text-color {
    color: #065f46; /* Emerald-800 */
    text-shadow: none; /* ドロップシャドウを消す */
}