@charset "utf-8";

/* ==========================================================================
   共通アニメーション（スクロール連動）
   ========================================================================== */
/* 初期状態：透明 ＆ 40px下に隠しておく */
.fade-up-trigger {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
/* 到達状態：透明度100% ＆ 元の位置へ */
.fade-up-trigger.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   コンセプトページ: ヒーローエリア (#conceptHero)
   ========================================================================== */
#conceptHero {
    min-height: 60vh;
    background-color: #FCFAF2;
    padding-top: 100px;
}

/* PC: 固定ヘッダー（縦ナビ込み）約210px。body padding-top は100pxのまま全ページ共通。
   ヒーロー側で不足分を足し、低さでは min-height を床にしてタイトルがヘッダーに上がらないようにする */
@media (min-width: 992px) {
    #conceptHero {
        padding-top: 120px;
        min-height: max(60vh, 530px);
    }
}

/* メインの日本語を大きく */
.concept-main-title {
    writing-mode: vertical-rl;
    letter-spacing: 0.25em;
    line-height: 2;
    font-size: 40px;
}

/* 英語は日本語の左側に絶対配置で頭揃え（上端揃え） */
.concept-sub-title {
    writing-mode: vertical-rl;
    letter-spacing: 0.15em;
    font-size: 14px;
    top: 0;
    left: -60px;
}

/* ふわふわゆらゆらするアニメーション */
@keyframes floatSway {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(2deg); }
    66% { transform: translateY(-4px) rotate(-2deg); }
}
.motif-float {
    animation: floatSway 6s ease-in-out infinite;
}

/* エンジ色のロゴをCSSで非常に濃いグレーに変更するフィルター */
.filter-dark-gray {
    filter: grayscale(100%) brightness(0.25);
}

/* ==========================================================================
   コンセプトページ: ギャラリーマーキー (CSSアニメーション版)
   ========================================================================== */
.marquee-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    padding: 20px 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 80s linear infinite; 
}

.marquee-item {
    width: 160px;
    padding: 0 15px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .marquee-item {
        width: 260px;
        padding: 0 25px;
    }
}

.marquee-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================================
   【元に戻す】ヒーローエリアのモチーフ
   ========================================================================== */
.hero-motif-left {
    left: 20px; 
    bottom: 0;
    width: 100px;
    max-width: 100px;
}

/* ==========================================================================
   コンセプトページ: 導入エリア (#conceptIntro)
   ========================================================================== */
#conceptIntro {
    padding-top: 8rem !important;
    padding-bottom: 3rem !important;
}

.intro-motif-matoba {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(152, 71, 94, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-motif-matoba img {
    width: 60%;
}

.intro-lead-text {
    font-size: 26px;
    line-height: 2.2;
    letter-spacing: 0.2em;
    color: #222;
}

.concept-intro-text p {
    line-height: 2.4; 
    letter-spacing: 0.1em;
    font-size: 16px;
    color: #444;
}

.intro-bg-watermark {
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    margin-top: -400px;
    margin-left: -400px;
    background: url('https://karamaru.kyoto/w/wp-content/uploads/2026/03/rogomark.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.03; 
    pointer-events: none; 
    filter: grayscale(100%);
    animation: bgWatermarkFloat 15s ease-in-out infinite;
}

@keyframes bgWatermarkFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-25px) scale(1.03); }
}

/* ==========================================================================
   コンセプトページ: コンテンツエリア (テーマ・ルーツ・CTA)
   ========================================================================== */
.concept-value-heading {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.concept-value-heading h3 {
    font-size: 24px;
    letter-spacing: 0.2em;
    line-height: 1.5;
}

.concept-value-text p {
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    text-align: justify;
    text-justify: inter-ideograph;
}
.concept-value-text p:last-child {
    margin-bottom: 0;
}

#conceptRoots {
    background-color: #F8F5F0;
}
.concept-roots-text p {
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.concept-cta-card {
    background-color: #FAF0E6;
    border: 1px solid transparent;
}
.concept-cta-card:hover {
    background-color: #ffffff;
    border-color: #98475E;
    transform: translateY(-5px);
}

/* ==========================================================================
   スマホ向け一括調整 (767px以下) - コンセプトページ
   ========================================================================== */
@media (max-width: 767px) {
    #conceptHero { 
        min-height: 50vh; 
        padding-top: 80px; 
    }
    .concept-main-title { font-size: 28px; }
    .concept-sub-title { left: -40px; font-size: 12px; }
    
    .hero-motif-left { 
        left: 15px; 
        width: 70px; 
        height: 70px;
    }
    .hero-kazari-right { 
        right: -10px; 
        width: 150px; 
    }

    #conceptIntro {
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }
    
    .intro-motif-matoba {
        margin: 0 auto 2rem auto !important; 
        width: 65px;
        height: 65px;
    }

    .intro-lead-text {
        font-size: 20px;
        text-align: center !important; 
        line-height: 2.2;
        margin-bottom: 2.5rem !important;
    }
    
    .concept-intro-text p {
        font-size: 15px;
        text-align: left;
        padding: 0 15px;
        line-height: 2.2;
    }
    
    .intro-bg-watermark {
        width: 350px;
        height: 350px;
        margin-top: -175px;
        margin-left: -175px;
    }
    
    .concept-value-heading {
        writing-mode: horizontal-tb;
        border-bottom: 1px solid #D1C5C5;
        padding-bottom: 10px;
    }
    .concept-value-heading h3 {
        font-size: 20px;
        letter-spacing: 0.1em;
    }
    .concept-value-text p {
        font-size: 0.95rem;
        text-align: left;
    }
    
    #conceptRoots .col-md-7 {
        margin-top: 2rem;
    }
    
    .concept-cta-card {
        padding: 3rem 1.5rem !important;
    }
}

/* ==========================================================================
   プライバシーポリシー ＆ サイトのご利用について 共通スタイル
   ========================================================================== */
#privacyPolicy,
#termsPage {
    background-color: #FCFAF2; /* 唐丸共通の和紙風背景色 */
    padding-top: 150px;
    padding-bottom: 150px;
}

/* 汎用のページタイトルクラス */
.page-title {
    letter-spacing: 0.15em;
    font-size: 28px;
}
.page-subtitle {
    letter-spacing: 0.1em;
}

/* 本文エリア */
.privacy-content,
.terms-content {
    line-height: 2.2;
    letter-spacing: 0.05em;
    font-size: 16px;
    color: #444; 
}

.privacy-section,
.terms-section {
    margin-bottom: 3.5rem;
}

.privacy-heading,
.terms-heading {
    font-size: 20px;
    color: #98475E; /* 朱色 */
    border-bottom: 1px solid rgba(152, 71, 94, 0.2); /* 柔らかな下線に統一 */
    padding-bottom: 10px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

/* リストデザイン（禁止事項などの箇条書き用） */
.privacy-section ul,
.terms-section ul {
    list-style-type: none; 
    padding-left: 0;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.privacy-section ul li,
.terms-section ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem; /* ゆったりした余白に統一 */
    line-height: 2;


}

/* 唐丸カラーの丸い弾頭 */
.privacy-section ul li::before,
.terms-section ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 6px;
    height: 6px;
    background-color: #98475E;
    border-radius: 50%;
}

/* お問い合わせ窓口 (プライバシーポリシー専用部分) */
.privacy-contact-box {
    border: 1px solid rgba(152, 71, 94, 0.2); /* 全体のトーンに合わせる */
    padding: 3rem 2rem;
    text-align: center;
    background-color: #ffffff; /* 白背景でスッキリと */
    border-radius: 2px;
}

.contact-company {
    font-size: 1.1rem;
    color: #98475E;
    margin-bottom: 1rem;
    letter-spacing: 0.15em;
}

.contact-address {
    line-height: 2;
    color: #444;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

.btn-privacy-contact {
    display: inline-block;
    border: 1px solid #98475E;
    color: #98475E;
    padding: 12px 40px;
    text-decoration: none;
    background-color: #ffffff;
    letter-spacing: 0.1em;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-privacy-contact:hover {
    background-color: #98475E;
    color: #ffffff;
}

@media (max-width: 767px) {
    #privacyPolicy,
    #termsPage {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .privacy-content,
    .terms-content {
        font-size: 15px; 
    }
    .privacy-heading,
    .terms-heading {
        font-size: 18px;
    }
    .privacy-section,
    .terms-section {
        margin-bottom: 2.5rem;
    }
    .privacy-contact-box {
        padding: 2rem 1rem;
    }
    .btn-privacy-contact {
        width: 100%;
        padding: 12px 0;
    }
}

/* ==========================================================================
   サイトマップ専用スタイル (#sitemapPage)
   ========================================================================== */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.2rem;
}

/* PC時は2カラムにする */
@media (min-width: 768px) {
    .sitemap-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
    }
}

.sitemap-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid rgba(152, 71, 94, 0.15); /* 薄いえんじ色の枠線 */
    border-radius: 4px;
    padding: 1.5rem 2rem;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.sitemap-item:hover {
    background-color: #FAF0E6; /* ホバーで唐丸ベージュに */
    border-color: #98475E;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.04);
}

.sitemap-item-title {
    display: flex;
    flex-direction: column;
    color: #333;
}

.sitemap-item-ja {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
}

.sitemap-item-en {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #777;
}

/* 右端の矢印アイコン */
.sitemap-item-icon {
    color: #98475E;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.sitemap-item:hover .sitemap-item-icon {
    transform: translateX(5px); /* ホバー時に矢印が右にスッと動く */
    opacity: 1;
}

/* サブページ用の少し控えめなデザイン */
.sitemap-sub-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .sitemap-sub-grid {
        grid-template-columns: repeat(3, 1fr); /* サブは3カラムでスッキリと */
        gap: 1.5rem;
    }
}

.sitemap-sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px dashed rgba(152, 71, 94, 0.3);
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

.sitemap-sub-item:hover {
    opacity: 0.6;
}

.sitemap-sub-item-title {
    color: #444;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   お問い合わせページ (#contactPage)
   ========================================================================== */
#contactPage {
    background-color: #FCFAF2;
    padding-top: 150px;
    padding-bottom: 100px;
}

.contact-title {
    letter-spacing: 0.15em;
    font-size: 28px;
}

.contact-subtitle {
    letter-spacing: 0.1em;
}

.section-icon-circle {
    color: #98475E;
    font-size: 64px;
    line-height: 1;
    margin-top: -12px;
    opacity: 0.85; 
}

.contact-section-title {
    color: #98475E;
    font-size: 20px;
}

@media (min-width: 768px) {
    .contact-heading-area {
        border-left: 1px solid rgba(152, 71, 94, 0.3); 
        padding-left: 24px;
        min-height: 250px; 
    }
    .contact-section-title {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        letter-spacing: 0.25em;
        line-height: 1.5;
    }
}

.tel-number {
    font-size: 32px;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.tel-dai {
    font-size: 1.2rem;
    color: #444;
}

.business-hours {
    line-height: 1.8;
}

.availability-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 350px;
    background-color: #ffffff;
}
.availability-table th, 
.availability-table td {
    border: 1px solid #D1C5C5;
    padding: 8px 0;
    width: 12.5%;
}
.availability-table th {
    background-color: #FAF0E6;
    color: #98475E;
    font-weight: normal;
    font-size: 0.9rem;
}
.availability-table td {
    color: #444;
    font-size: 0.95rem;
}

.privacy-link {
    color: #98475E;
    display: inline-block;
    transition: opacity 0.3s ease;
    border-bottom: 1px solid #98475E;
    padding-bottom: 2px;
    font-size: 0.95rem;
}

.privacy-link:hover {
    opacity: 0.7;
}

.cf7-custom-style {
    border: none;
    padding: 0;
}

.contact-divider {
    border-top: 1px dashed #D1C5C5;
    opacity: 0.5;
}

.contact-disclaimer {
    border-top: 1px solid #EAEAEA;
    padding-top: 2rem;
}

@media (max-width: 767px) {
    #contactPage {
        padding-top: 100px;
        padding-bottom: 60px;
    }
    .section-icon-circle {
        font-size: 40px;
        margin-top: 0;
        margin-bottom: 15px !important;
        opacity: 1;
    }
    .contact-section-title {
        writing-mode: horizontal-tb;
        letter-spacing: 0.1em;
    }
    .tel-number {
        font-size: 26px;
    }
    .tel-dai {
        font-size: 1rem;
    }
    .contact-disclaimer {
        padding-top: 1.5rem;
    }
}

/* ==========================================================================
   Contact Form 7 用スタイル (分離レイアウト含む)
   ========================================================================== */

/* フォーム全体の行間・配置調整用クラス */
.cf7-form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.cf7-form-label-col {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.cf7-form-input-col {
    width: 100%;
}

.cf7-form-input-col-short {
    width: 100%;
}

@media (min-width: 768px) {
    .cf7-form-label-col {
        width: 33.333333%;
    }
    .cf7-form-input-col {
        width: 66.666667%;
    }
    .cf7-form-input-col-short {
        width: 41.666667%; /* col-md-5 相当 */
    }
}

.cf7-form-label {
    font-family: serif; /* mincho代替 */
}

/* 必須バッジ */
.bg-brand {
    background-color: #98475E !important;
    color: #fff;
    padding: 0.25em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.75em;
    margin-left: 0.5rem;
}

/* 送信ボタンのデザイン */
.btn-brand {
    background-color: #98475E !important;
    border-radius: 2px !important;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    border: none;
    color: #fff;
    padding: 0.5rem 3rem;
    font-size: 1.25rem;
    font-family: serif; /* mincho代替 */
    cursor: pointer;
}
.btn-brand:hover {
    background-color: #7a384b !important;
    opacity: 0.9;
}

/* 入力欄の基本スタイルとフォーカス時の枠線色変更 */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wpcf7-form-control:focus {
    outline: 0;
    border-color: #98475E;
    box-shadow: 0 0 0 0.25rem rgba(152, 71, 94, 0.25);
}

/* 送信ボタン中央揃え ＆ スピナー（隠し項目）のズレ対策 */
.submit-btn-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}

.submit-btn-wrapper .wpcf7-spinner {
    position: absolute;
    margin: 0;
    right: 50%;
    transform: translateX(130px); 
}

@media (max-width: 767px) {
    .submit-btn-wrapper .wpcf7-spinner {
        transform: translateX(110px); 
    }
}
/* お問い合わせ種別 */
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.form-select {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 2.5rem 0.65rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #212529;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.wpcf7-form-control.wpcf7-select:focus,
.wpcf7-form-control.form-select:focus {
    outline: 0;
    border-color: #98475E;
    box-shadow: 0 0 0 0.25rem rgba(152, 71, 94, 0.2);
}

.inquiry-required-badge {
    min-width: 60px;
    flex-shrink: 0;
}

/* 各項目の英語ラベル */
.cf7-custom-style label .lang-en {
    margin-top: 2px;
    font-family: var(--font-gothic);
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    .inquiry-required-badge {
        min-width: 52px;
        margin-left: 0.75rem !important;
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   送信完了ページ (#thanksPage)
   ========================================================================== */
#thanksPage {
    background-color: #FCFAF2;
    padding-top: 150px;
    padding-bottom: 150px;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.thanks-message-area {
    max-width: 650px;
}

.thanks-note {
    background-color: #ffffff;
    border: 1px dashed #D1C5C5;
    border-radius: 2px;
}

.btn-brand-outline {
    display: inline-block;
    border: 1px solid #98475E;
    color: #98475E;
    padding: 15px 50px;
    text-decoration: none;
    background-color: transparent;
    letter-spacing: 0.15em;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-brand-outline:hover {
    background-color: #98475E;
    color: #ffffff;
}

@media (max-width: 767px) {
    #thanksPage {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .thanks-note {
        padding: 1.5rem 1rem !important;
    }
    .thanks-note ul {
        padding-left: 1.2rem;
    }
    .btn-brand-outline {
        width: 100%;
        padding: 15px 0;
    }
}

/* ==========================================================================
   体験メニューページ用スタイル
   ========================================================================== */

/* 共通コンテナ */
.p-exp-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* -------------------------------------------
   体験: ヒーローエリア (間隔拡大 ＆ 下揃え版)
------------------------------------------- */
.p-exp-hero {
    position: relative;
    width: 100%;
    padding-top: 100px;
    background-color: #FCFAF2;
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.p-exp-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
}

/* 左右に大きく広げつつ、下端で揃えるラッパー */
.p-exp-hero__title-wrapper {
    display: flex;
    justify-content: space-between; /* 左右の端まで広げる */
    align-items: flex-end; /* 全体を「下揃え」にする */
    width: 100%;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* 【左側】飾り模様（左右反転） */
.p-exp-hero__kazari-left {
    flex: 1; /* 左右のエリアを同じ比率にして、中央の文字ズレを防ぐ */
    display: flex;
    justify-content: flex-start; /* 左端に寄せる */
    padding-bottom: 10px; /* 文字との下端の微調整 */
    opacity: 0.4;
}
.p-exp-hero__kazari-left img {
    width: 150px;
    transform: scaleX(-1);
}

/* 【中央】タイトルエリア */
.p-exp-hero__title-center {
    display: flex;
    justify-content: center;
}

.p-exp-hero__title {
    font-family: serif;
    font-size: 40px;
    color: #333;
    margin-bottom: 0;
    writing-mode: vertical-rl;
    letter-spacing: 0.25em;
    line-height: 2;
    position: relative;
}

.p-exp-hero__subtitle {
    font-family: sans-serif;
    font-size: 14px;
    color: #999;
    letter-spacing: 0.15em;
    position: absolute;
    top: 0;
    left: -60px;
    writing-mode: vertical-rl;
}

/* 【右側】モチーフ */
.p-exp-hero__motif-right {
    flex: 1; /* 左右のエリアを同じ比率にして、中央の文字ズレを防ぐ */
    display: flex;
    justify-content: flex-end; /* 右端に寄せる */
    padding-bottom: 10px; /* 文字との下端の微調整 */
}
.p-exp-hero__motif-right img {
    animation: floatSway 6s ease-in-out infinite;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .p-exp-hero {
        min-height: 50vh;
        padding-top: 80px;
    }
    .p-exp-hero__title-wrapper {
        padding: 0 15px;
    }
    .p-exp-hero__title {
        font-size: 28px;
    }
    .p-exp-hero__subtitle {
        left: -40px;
        font-size: 12px;
    }
    .p-exp-hero__kazari-left img {
        width: 100px;
    }
    .p-exp-hero__motif-right img {
        width: 70px;
    }
}

/* ==========================================================================
   ヒーローエリア：クールなテキストアニメーション
========================================================================== */
/* 「京」の文字の朱色（style.cssにある場合は省略可ですが念のため） */
.text-brand {
    color: #98475E; 
}

/* 縦書きテキストの行ブロック */
.anim-text-line {
    display: inline-block;
    opacity: 0;
    /* 上から下へ、少しぼかしながらフワッと現れる */
    animation: fadeBlurIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 1行目（少し待ってから開始） */
.anim-text-line.line-1 {
    animation-delay: 0.3s;
}

/* 2行目（1行目より少し遅らせてスタッガー効果を出す） */
.anim-text-line.line-2 {
    animation-delay: 0.7s;
}

/* 英語のサブタイトル */
.anim-text-en {
    opacity: 0;
    /* 文字間隔が広がりながら現れる演出 */
    animation: trackingIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards;
}

/* -------------------------------------------
   キーフレーム（アニメーションの動きの定義）
------------------------------------------- */
/* 墨が滲むように現れるアニメーション */
@keyframes fadeBlurIn {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* 上に20pxずらしておく */
        filter: blur(10px); /* 強くぼかす */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 元の位置へ */
        filter: blur(0); /* くっきりさせる */
    }
}

/* スーッと文字間隔が落ち着くアニメーション */
@keyframes trackingIn {
    0% {
        opacity: 0;
        letter-spacing: 0.3em; /* 最初は広め */
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        letter-spacing: 0.15em; /* 通常の文字間隔へ */
        transform: translateY(0);
    }
}

/* ==========================================================================
   体験メニュー一覧 (新デザインカンプ対応・背景色交互切り替え)
========================================================================== */
.c-experience-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* ★背景色を画面いっぱいに広げるため、大枠の max-width と gap は削除します */
    padding: 0;
    margin: 0;
}

/* 各体験メニューを包む外枠（画面全幅にして背景色をつける） */
.c-experience-list > div {
    width: 100%;
    max-width: 100% !important; /* ★PHP側の1200px制限を上書きして画面幅いっぱいに */
    padding-top: 6rem;          /* ★gapの代わりに上下の余白で区切りを作ります */
    padding-bottom: 6rem;
}

/* 1つ目、3つ目...（奇数番目）の背景色 */
.c-experience-list > div:nth-child(odd) {
    background-color: #FAF0E6;
}

/* 2つ目、4つ目...（偶数番目）の背景色 */
.c-experience-list > div:nth-child(even) {
    background-color: #FFFFF0;
}

/* 中身のコンテンツ（1200pxの中央寄せにする） */
.p-exp-item {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* スマホ用（余白の調整） */
@media (max-width: 767px) {
    .c-experience-list > div {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .p-exp-item {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ==========================================================================
   サブナビゲーション（アンカーリンク）
========================================================================== */
.p-exp-nav-wrapper {
    max-width: 1200px;
    /* 親要素の余白を打ち消して境界線にピッタリくっつける */
    margin: -6rem auto 5rem; 
    padding: 0 2rem;
}

.p-exp-nav {
    display: flex;
    flex-wrap: wrap; /* ★自動的に折り返す魔法 */
    align-items: stretch;
    background-color: #ECD4B6; 
    /* 全体の左と上に外枠線を引く */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
}

.p-exp-nav__item {
    /* ★幅が広い時は均等に伸びて1行になり、狭くなると自動で折り返す（最小幅140px） */
    flex: 1 1 140px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 縦横ど真ん中 */
    text-align: center;      /* ★テキストのセンター揃え */
    color: #333;
    text-decoration: none;
    font-family: "Yu Mincho", "Noto Serif JP", serif;
    font-size: 0.8rem;
    line-height: 1.6;
    padding: 1.2rem 1rem;
    box-sizing: border-box;
    /* 2行タイトルと同じ高さ。折り返し行や画面幅で低くならないように固定 */
    min-height: 5.2rem;
    /* 各アイテムの右と下に線を引く（これでどこで折り返しても表組みが崩れません） */
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* ホバー時のアクション（少し濃くする） */
.p-exp-nav__item:hover {
    background-color: #dfc2a0; 
    color: #333;
}

/* スマホ向け調整 (767px以下) */
@media (max-width: 767px) {
    .p-exp-nav-wrapper {
        margin-top: -4rem !important;
        margin-bottom: 3rem !important;
        padding: 0 1rem !important;
    }
    .p-exp-nav__item {
        flex: 1 1 40%;
        font-size: 0.85rem;
        padding: 0.7rem 0.5rem;
        min-height: 5.2rem;
    }
}

/* ==========================================================================
   右側固定サイドナビゲーション
========================================================================== */
.p-fixed-sidenav {
    position: fixed;
    top: 55%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999; /* ★ヘッダー（通常1000前後）よりも確実に上に表示させる最強のz-index */
    display: flex;
    flex-direction: column;
}

.p-fixed-sidenav__item {
    background-color: #B77F8A; 
    color: #fff;
    text-decoration: none;
    padding: 1rem 0.5rem; /* ★高さを抑えるために上下の余白を詰める */
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-left: 1px solid rgba(255, 255, 255, 0.3); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.p-fixed-sidenav__item:last-child {
    border-bottom: none;
}

.p-fixed-sidenav__item:hover {
    background-color: #a06e78; 
    color: #fff;
}

/* 三角アイコン */
.p-fixed-sidenav__icon {
    font-family: sans-serif; /* ★絵文字化（勝手に青くなる現象）を完全に防ぐ */
    font-size: 0.7rem;
    margin-bottom: 0.5rem; /* ★アイコンの下の隙間を詰める */
    color: #ECD4B6; /* ★上品なベージュ/ゴールド系に変更 */
    text-orientation: upright; /* ★記号が横向きに寝てしまうのを防ぎ、正しく立たせる */
}

/* 日本語テキスト */
.p-fixed-sidenav__ja {
    font-family: "Yu Mincho", "Noto Serif JP", serif;
    font-size: 0.95rem;
    letter-spacing: 0.1em; /* ★文字の間隔を少し詰めて高さを抑える */
    line-height: 1.5;      /* ★2行になった時の行間を綺麗に整える */
}

/* 英語テキスト（横向きに寝かせて表示） */
.p-fixed-sidenav__en {
    font-family: "Yu Mincho", "Noto Serif JP", serif;
    font-size: 0.75rem; /* ★大文字とのバランスを取るために微調整 */
    letter-spacing: 0.05em;
    margin-top: 0.5rem; /* ★英語の上の隙間を詰める */
    opacity: 0.8; 
}

/* スマホ・タブレット（767px以下）では非表示 */
@media (max-width: 767px) {
    .p-fixed-sidenav {
        display: none !important;
    }
}

/* -------------------------------------------
   1. ヘッダーエリア (タイトル＆バッジ)
------------------------------------------- */
.p-exp-item__header {
    text-align: center;
    margin-bottom: 3rem;
}

.p-exp-item__title {
    font-family: serif;
    font-size: 2.2rem; /* ★1.8rem -> 2.2rem に拡大 */
    color: #333;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

.p-exp-item__title-en {
    font-family: serif;
    font-size: 1rem; /* ★0.85rem -> 1rem に拡大 */
    color: #333;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 2.5rem; /* ★少し広げる */
}

.p-exp-item__basic-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem; /* ★2rem -> 3rem に広げる */
}

.p-exp-item__badge-box {
    display: flex;
    align-items: center;
}

.p-exp-item__badge-icon {
    width: 48px; /* ★40px -> 48px に拡大 */
    height: 48px; /* ★40px -> 48px に拡大 */
    background-color: #DEB887; /* カンプのベージュ/ゴールド系の色 */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem; /* ★1.2rem -> 1.4rem に拡大 */
    margin-right: 15px;
}

.p-exp-item__badge-text {
    text-align: left;
    color: #333;
}

.p-exp-item__badge-text .ja {
    font-family: serif;
    font-size: 1.3rem; /* ★1.1rem -> 1.3rem に拡大 */
    display: block;
    letter-spacing: 0.1em;
}

.p-exp-item__badge-text .small {
    font-size: 0.85rem; /* ★0.75rem -> 0.85rem に拡大 */
    margin-left: 5px;
}

.p-exp-item__badge-text .en {
    font-family: sans-serif;
    font-size: 0.85rem; /* ★0.75rem -> 0.85rem に拡大 */
    color: #777;
    display: block;
    margin-top: 3px;
    letter-spacing: 0.05em;
}
/* スマホ時のバッジ（アイコン＋テキスト）の並びを揃える */
@media (max-width: 767px) {
    .p-exp-item__basic-info {
        flex-direction: column;   /* 縦並びに変更 */
        align-items: flex-start;  /* 左端（アイコンの位置）を揃える */
        width: fit-content;       /* 中身の幅に合わせて箱のサイズを縮める */
        margin: 0 auto;           /* その箱自体を画面の真ん中に持ってくる */
        gap: 1.5rem;              /* 縦の隙間を少し狭める */
    }
}

/* -------------------------------------------
   2. メインエリア (画像＆テキスト)
------------------------------------------- */

/* ギャラリー内部（メインとサムネの全体枠） */
.p-exp-item__gallery {
    display: flex;
    gap: 15px; 
    height: 490px; /* ★ここが基準！サムネイル5枚分の高さ(90px*5+10px*4)に固定 */
}

/* メイン画像スライダー */
.exp-main-swiper {
    flex-grow: 1; 
    width: calc(100% - 135px); 
    height: 100%; /* 親の490pxに合わせる */
    margin: 0;
    overflow: hidden; 
}
.exp-main-swiper .swiper-slide {
    height: 100%; 
}
.exp-main-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ★画像を引き伸ばさず、枠に合わせて綺麗に切り抜く */
    display: block;
}

/* サムネイル画像スライダー */
.exp-thumb-swiper {
    width: 120px;
    height: 100%; /* 親の490pxに合わせる */
    flex-shrink: 0;
    margin: 0;
    overflow: hidden; /* ★6枚目以降を枠外に隠す（スクロールで出現させる） */
}
.exp-thumb-swiper .swiper-slide {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
    height: 90px !important; /* ★幅120pxの4:3の高さ */
    margin-bottom: 10px !important; /* ★隙間 */
}
.exp-thumb-swiper .swiper-slide-thumb-active,
.exp-thumb-swiper .swiper-slide:hover {
    opacity: 1;
}
.exp-thumb-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 左右矢印 */
.exp-main-swiper .swiper-button-prev,
.exp-main-swiper .swiper-button-next {
    background-color: rgba(222, 184, 135, 0.85);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-top: -22px;
    transition: background-color 0.3s;
}
.exp-main-swiper .swiper-button-prev:hover,
.exp-main-swiper .swiper-button-next:hover {
    background-color: rgba(222, 184, 135, 1);
}
.exp-main-swiper .swiper-button-prev::after,
.exp-main-swiper .swiper-button-next::after {
    font-size: 1.2rem;
    font-weight: bold;
}

/* スマホ向け調整 (767px以下) */
@media (max-width: 767px) {
    .p-exp-item__gallery {
        flex-direction: column; 
        height: auto; /* ★スマホ時は固定高さを解除 */
    }
    .exp-main-swiper {
        width: 100%; 
        height: auto;
        aspect-ratio: 4/3; /* スマホ時はメイン画像を4:3で表示 */
    }
    .exp-thumb-swiper {
        width: 100%;
        height: auto;
    }
    .exp-thumb-swiper .swiper-slide {
        height: auto !important; /* スマホ(横スクロール)時は高さを解除 */
        margin-bottom: 0 !important; /* 下の隙間を消す */
    }
    .exp-thumb-swiper .swiper-slide img {
        aspect-ratio: 4/3; /* スマホ時は画像自体に4:3を持たせる */
    }
    .exp-main-swiper .swiper-button-prev,
    .exp-main-swiper .swiper-button-next {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }
    .exp-main-swiper .swiper-button-prev::after,
    .exp-main-swiper .swiper-button-next::after {
        font-size: 1rem;
    }
}

/* 説明文エリア（右側） */
.p-exp-item__desc .ja { 
    font-family: serif; 
    font-size: 1.0rem; 
    line-height: 2.0; 
    color: #333; 
    letter-spacing: 0.05em; 
    margin-bottom: 2rem; 
}
.p-exp-item__desc .en { 
    font-family: serif; 
    font-size: 0.9rem; 
    line-height: 1.8; 
    color: #333; 
    letter-spacing: 0.05em; 
}
.p-exp-item__links {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.p-exp-item__link-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 48px 12px 20px;
    border: 1px solid #cda56d;
    background-color: #d9b47c;
    color: #8d2731;
    font-family: var(--font-mincho);
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.p-exp-item__link-btn i {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    font-size: 0.85em;
}

.p-exp-item__link-btn:hover,
.p-exp-item__link-btn:focus-visible {
    background-color: #8d2731;
    color: #fff;
    transform: translateY(-2px);
}

.p-exp-item__link-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .p-exp-item__links {
        margin-top: 22px;
    }

    .p-exp-item__link-btn {
        width: 100%;
        min-height: 50px;
    }
}

/* -------------------------------------------
   3. アコーディオン開閉ボタン
------------------------------------------- */
.p-exp-item__toggle-wrap {
    text-align: center;
    border-top: 1px solid #EAEAEA;
    padding-top: 3rem;
}

.p-exp-item__toggle-btn {
    background: none;
    border: none;
    font-family: serif;
    font-size: 1.2rem;
    color: #333;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 10px 20px;
    transition: color 0.3s;
    /* ★追加：擬似要素の基準にする */
    position: relative; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.p-exp-item__toggle-btn:hover {
    color: #98475E;
}

/* ★修正：Fontawesome(<i>)を消し、擬似要素(::after)でCSS矢印を作成 */
.p-exp-item__toggle-btn i {
    display: none; /* Fontawesomeを非表示にする */
}

/* ★追加：1pxの線で少し大きめのCSS矢印 */
.p-exp-item__toggle-btn::after {
    content: '';
    display: inline-block;
    /* ★ 12px → 16px に拡大 */
    width: 16px; 
    height: 16px;
    border-bottom: 1px solid #98475E; 
    border-right: 1px solid #98475E;
    transform: rotate(45deg); 
    /* ★ 矢印が大きくなった分、テキストとの余白を少し広げる */
    margin-left: 18px; 
    margin-top: -5px;
    transition: transform 0.3s ease;
}

/* 開いたときの矢印回転 */
.p-exp-item__toggle-btn.is-open::after {
    transform: rotate(225deg); /* 上矢印に回転 */
    margin-top: 15px;
}

/* -------------------------------------------
   4. 展開エリア：体験ステップ
------------------------------------------- */
.p-exp-item__steps {
    padding-top: 2rem;
    padding-bottom: 5rem;
}

/* HTML側に残るFont Awesomeの矢印は非表示 */
.p-exp-item__step-arrow {
    display: none !important;
}

/* Bootstrapのガターで、各ステップの間隔を統一 */
.p-exp-item__steps .row {
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.p-exp-item__steps .col-md-4 {
    position: relative;
}

/* ステップ番号・見出し */
.p-exp-item__step-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.p-exp-item__step-num {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-right: 15px;
    border: 1px solid #DEB887;
    border-radius: 50%;
    color: #DEB887;
    font-family: serif;
    font-size: 1.1rem;
}

.p-exp-item__step-title .ja {
    display: block;
    color: #333;
    font-family: serif;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.p-exp-item__step-title .en {
    display: block;
    color: #777;
    font-family: sans-serif;
    font-size: 0.75rem;
}

/* ステップ画像 */
.p-exp-item__step-img {
    position: relative;
}

.p-exp-item__step-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 次のステップへ進む矢印 */
.p-exp-item__step-img::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -32px;
    display: block;
    width: 22px;
    height: 22px;
    border-right: 1px solid #DEB887;
    border-bottom: 1px solid #DEB887;
    transform: translateY(-50%) rotate(-45deg);
}

/* 各段の右端と最後のステップには矢印を表示しない */
.p-exp-item__steps .col-md-4:nth-child(3n) .p-exp-item__step-img::after,
.p-exp-item__steps .col-md-4:last-child .p-exp-item__step-img::after {
    display: none;
}

/* -------------------------------------------
   5. 展開エリア：基本情報・参加案内
------------------------------------------- */
.p-exp-item__specs {
    padding: 3rem 0;
    margin-bottom: 2rem;
}

/* 基本情報テーブル */
.p-exp-specs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.p-exp-specs-table th,
.p-exp-specs-table td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E0E0E0;
}

.p-exp-specs-table tr:first-child th,
.p-exp-specs-table tr:first-child td {
    border-top: 1px solid #E0E0E0;
}

/* 左側：項目名 */
.p-exp-specs-table th {
    width: 180px;
    padding-right: 15px;
    padding-left: 15px;
    background-color: #F2EBE1;
    color: #333;
    font-family: serif;
    font-size: 0.95rem;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}

.p-exp-specs-table th .en {
    display: block;
    margin-top: 2px;
    color: #777;
    font-family: sans-serif;
    font-size: 0.75rem;
}

/* 右側：入力内容 */
.p-exp-specs-table td {
    padding-right: 1.5rem;
    padding-left: 2.5rem;
    background-color: #fff;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

/* 参加条件・免責事項などの長文項目 */
.p-exp-specs-table__long-row th,
.p-exp-specs-table__long-row td {
    vertical-align: top;
}

/* 日本語・英語本文 */
.p-exp-specs-table td > .ja,
.p-exp-specs-table td > .en,
.p-exp-specs-table td .ja,
.p-exp-specs-table td .en {
    margin: 0;
}

.p-exp-specs-table td .ja {
    color: #333;
    font-family: serif;
    font-size: 0.95rem;
    line-height: 1.75;
    letter-spacing: 0.05em;
}

.p-exp-specs-table td .en {
    color: #555;
    font-family: serif;
    font-size: 0.8rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

.p-exp-specs-table td > .ja + .en {
    margin-top: 0.5rem;
}

/* -------------------------------------------
   6. 予約エリアへ誘導する矢印
------------------------------------------- */
.p-exp-item__scroll-arrow {
    margin-bottom: 2rem;
    text-align: center;
}

.p-exp-item__scroll-arrow i {
    color: #98475E;
    font-size: 2rem;
    animation: bounceUpDown 2s infinite ease-in-out;
}

@keyframes bounceUpDown {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

/* -------------------------------------------
   7. 展開エリア：予約カレンダー
------------------------------------------- */
.p-exp-item__reservation-frame {
    padding: 4rem 3rem;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.p-exp-item__reservation-header {
    margin-bottom: 2.5rem;
    text-align: center;
}

/* 小さなラベル風のサブタイトル */
.p-exp-item__reservation-badge {
    display: inline-block;
    padding: 4px 16px;
    margin-bottom: 1.2rem;
    border: 1px solid #98475E;
    border-radius: 20px;
    color: #98475E;
    font-family: sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

/* 予約エリアのタイトル */
.p-exp-item__reservation-header h3 {
    margin-bottom: 0;
    color: #333;
    font-family: serif;
    font-size: 1.5rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.p-exp-item__reservation-header .en {
    display: block;
    margin-top: 10px;
    color: #777;
    font-family: serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* タイトル下の短い区切り線 */
.p-exp-item__reservation-header::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    margin: 2rem auto 0;
    background-color: #E0E0E0;
}

.p-exp-item__calendar-wrap .ja {
    color: #333;
    font-family: serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.p-exp-item__calendar-wrap .en {
    color: #555;
    font-family: serif;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* 外国語対応不可日（予約カレンダー直前の案内） */
.p-exp-item__language-notice {
    max-width: 800px;
    margin: 0 auto 2rem;
    padding: 1.5rem 2rem;
    background-color: #FAF0E6;
    border: 1px solid rgba(152, 71, 94, 0.2);
    border-left: 3px solid #98475E;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: left;
}

.p-exp-item__language-notice-title {
    color: #98475E;
    font-family: serif;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    margin-bottom: 0.7rem;
}

.p-exp-item__language-notice-text {
    margin-bottom: 0.8rem;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.7;
}

.p-exp-item__language-notice-dates {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* -------------------------------------------
   8. 展開エリア：スマホ向け調整
------------------------------------------- */
@media (max-width: 767px) {
    /* 体験ステップ */
    .p-exp-item__steps {
        padding-top: 1.5rem;
        padding-bottom: 3.5rem;
    }

    .p-exp-item__steps .row {
        --bs-gutter-x: 24px;
        --bs-gutter-y: 36px;
    }

    /* スマホではステップ間の横矢印を表示しない */
    .p-exp-item__step-img::after {
        display: none;
    }

    /* 基本情報 */
    .p-exp-item__specs {
        padding: 2rem 0;
    }

    .p-exp-specs-table th {
        width: 110px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 0.85rem;
    }

    .p-exp-specs-table td {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .p-exp-specs-table td .ja {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .p-exp-specs-table td .en {
        font-size: 0.78rem;
        line-height: 1.55;
    }

    .p-exp-specs-table td > .ja + .en {
        margin-top: 0.35rem;
    }

    /* 予約フレーム */
    .p-exp-item__reservation-frame {
        padding: 3rem 1.5rem;
    }

    /* 外国語対応不可日 */
    .p-exp-item__language-notice {
        padding: 1.25rem 1rem;
        margin-bottom: 1.5rem;
    }

    .p-exp-item__language-notice-title {
        font-size: 0.95rem;
    }

    .p-exp-item__language-notice-text,
    .p-exp-item__language-notice-dates {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Booking Package デザイン上書き（唐丸様サイト用: 完全版）
   ベースカラー: #98475E (えんじ色)
========================================================================== */

/* --------------------------------------------------------------------------
   1. 全体の基本レイアウト・非表示要素
-------------------------------------------------------------------------- */
/* 全体の幅調整とフォント（中央寄せ） */
#booking-package,
#booking-package_inputFormPanel,
#booking-package_durationStay,
#booking-package_myBookingDetails,
#booking-package_myBookingDetailsFroVisitor {
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    color: #333;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* 予約不可（赤文字・定員オーバー等）の時間を完全に非表示 */
#booking-package_schedulePage .selectable_time_slot.closed {
    display: none !important;
}

/* 唐丸様のサイトで確実に不要なボタンを非表示にする */
#booking-package-subscribed,
#booking-package-edit {
    display: none !important;
}

/* プラグイン本来の非表示制御を優先させる */
#booking-package-memberActionPanel .hidden_panel {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. 見出し・日付・共通テキスト表示
-------------------------------------------------------------------------- */
/* 各種見出し（えんじ色の下線で上品に） */
#booking-package_schedulePage .selectedDate,
#booking-package_inputFormPanel .title_in_form,
#booking-package_serviceDetails .title,
#booking-package_servicePage .title,
#booking-package_durationStay .bookingDetailsTitle {
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    color: #98475E !important;
    border-bottom: 1px solid #98475E !important;
    font-weight: bold;
    padding-bottom: 12px;
}

/* 金額や選択サービスの確認テキスト */
#booking-package_inputFormPanel .costPerGuests,
#booking-package_inputFormPanel .totalCost,
#booking-package_inputFormPanel .total_amount .value,
#booking-package_inputFormPanel .bookingDate,
#booking-package_inputFormPanel .bookingTime,
#booking-package_inputFormPanel .serviceName {
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    font-weight: bold !important;
    font-size: 1.15rem !important;
    color: #333 !important;
}
/* 上記のうち、特定の強調テキストはブランドカラーに */
#booking-package_inputFormPanel .total_amount .value,
#booking-package_inputFormPanel .bookingDate,
#booking-package_inputFormPanel .bookingTime,
#booking-package_inputFormPanel .serviceName {
    color: #98475E !important;
}

/* --------------------------------------------------------------------------
   3. 共通ボタン・リンク・上部アクション
-------------------------------------------------------------------------- */
/* ボタンの基本デザイン（角張ったえんじ色） */
#booking-package button,
#booking-package .calendarButton,
#booking-package input[type="submit"] {
    background-color: #98475E !important;
    color: #fff !important;
    border: 1px solid #98475E !important;
    border-radius: 0 !important; 
    transition: all 0.3s ease !important;
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    letter-spacing: 0.05em;
}
#booking-package button:hover,
#booking-package input[type="submit"]:hover {
    background-color: #fff !important;
    color: #98475E !important;
}

/* 戻るボタンは控えめに */
#booking-package .return_button, 
#booking-package .return_form_button {
    background-color: #fff !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
}
#booking-package .return_button:hover,
#booking-package .return_form_button:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border-color: #aaa !important;
}

/* テキストリンク（青文字をえんじ色に変更） */
#booking-package_inputFormPanel .addedService_click, 
#booking-package_inputFormPanel .extraCharge_click, 
#booking-package_inputFormPanel .addedGuests_click,
#booking-package_durationStay .chooseDate,
#booking-package_durationStay .clearLabel,
#booking-package_durationStay .addRoomButton {
    color: #98475E !important;
    text-decoration: underline !important;
    font-weight: normal !important;
    transition: color 0.2s ease !important;
}
#booking-package_inputFormPanel .addedService_click:hover, 
#booking-package_inputFormPanel .extraCharge_click:hover, 
#booking-package_inputFormPanel .addedGuests_click:hover,
#booking-package_durationStay .chooseDate:hover,
#booking-package_durationStay .clearLabel:hover,
#booking-package_durationStay .addRoomButton:hover {
    color: #6a3141 !important; 
}

/* 上部アクションリンク（ログイン・ユーザー登録など） */
#booking-package-memberActionPanel .userTopButtonPanel {
    margin-bottom: 20px !important;
}
#booking-package-memberActionPanel .login, 
#booking-package-memberActionPanel .register,
#booking-package-memberActionPanel .logout,
#booking-package-memberActionPanel .edit {
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    color: #98475E !important;
    border: 1px solid #98475E !important;
    padding: 6px 16px !important;
    margin-left: 10px !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
    letter-spacing: 0.05em;
}
#booking-package-memberActionPanel .login:hover, 
#booking-package-memberActionPanel .register:hover,
#booking-package-memberActionPanel .logout:hover,
#booking-package-memberActionPanel .edit:hover {
    background-color: #98475E !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   4. カレンダー（日付選択）・時間枠のデザイン
-------------------------------------------------------------------------- */
#booking-package_calendarPage .calendar,
#booking-package_calendarPage .day_slot, 
#booking-package_calendarPage .week_slot {
    border-color: #e0e0e0 !important;
}

/* 予約可能な日（◯）と不可の日（✕） */
#booking-package_calendarPage .available_day .dateField::after {
    content: "◯";
    display: block;
    color: #98475E;
    font-size: 0.85em;
    margin-top: 4px;
    font-weight: normal;
}
#booking-package_calendarPage .day_slot:not(.available_day) .dateField::after {
    content: "✕";
    display: block;
    color: #ccc;
    font-size: 0.8em;
    margin-top: 4px;
    font-weight: normal;
}

/* 選択・ホバー時の背景色 */
#booking-package_calendarPage .selected_day_slot {
    background-color: rgba(152, 71, 94, 0.1) !important; 
}
#booking-package_calendarPage .selected_day_slot .dateField {
    color: #98475E !important;
    font-weight: bold !important;
}
#booking-package_calendarPage .available_day:hover {
    background-color: rgba(152, 71, 94, 0.05) !important;
}

/* 時間枠（スケジュールリスト）のデザイン */
#booking-package_schedulePage .selectable_time_slot {
    border-bottom: 1px solid #e0e0e0 !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#booking-package_schedulePage .selectable_time_slot:hover,
#booking-package_schedulePage .selectedTimeSlotPanel {
    background-color: rgba(152, 71, 94, 0.05) !important;
    color: #98475E !important;
}

/* --------------------------------------------------------------------------
   5. 共通フォーム入力欄（Booking Package全体）
-------------------------------------------------------------------------- */
#booking-package input[type="text"], 
#booking-package textarea, 
#booking-package select {
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    font-family: inherit;
    transition: all 0.2s ease;
}
#booking-package input[type="text"]:focus, 
#booking-package textarea:focus, 
#booking-package select:focus {
    outline: none !important;
    border-color: #98475E !important;
    box-shadow: 0 0 0 1px #98475E !important;
}

/* 滞在期間・その他の行の余白 */
#booking-package_durationStay .row {
    padding: 16px 10px !important;
    border-bottom-color: #e0e0e0 !important; 
}

/* --------------------------------------------------------------------------
   6. 予約フォーム画面専用（#booking-package_inputFormPanel）
-------------------------------------------------------------------------- */
/* 行のレイアウト（青い背景を消してスッキリさせる） */
#booking-package_inputFormPanel .row {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 1.5rem 0 !important;
    border-bottom: 1px dashed #D1C5C5 !important;
    margin: 0 !important;
    background-color: transparent !important;
}

/* ラベル部分（左側） */
#booking-package_inputFormPanel .name {
    background-color: transparent !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 0 0.5rem 0 !important;
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    font-size: 1rem !important;
    color: #333 !important;
    letter-spacing: 0.05em !important;
    border: none !important;
}

/* 入力エリア部分（右側） */
#booking-package_inputFormPanel .value {
    width: 100% !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

/* 必須マークのカスタマイズ（唐丸風バッジ） */
#booking-package_inputFormPanel .required:after {
    content: "必須" !important;
    background-color: #98475E !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
    border-radius: 2px !important;
    margin-left: 10px !important;
    position: static !important;
    display: inline-block !important;
    font-family: "Zen Kaku Gothic New", sans-serif !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

body.is-en #booking-package_inputFormPanel .required:after {
    content: "Required" !important;
}

/* 入力項目の固有調整（フォントなどを洗練させる） */
#booking-package_inputFormPanel input[type="text"],
#booking-package_inputFormPanel select,
#booking-package_inputFormPanel textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ced4da !important;
    border-radius: 2px !important;
    background-color: #fff !important;
    font-size: 1rem !important;
    transition: border-color 0.3s ease !important;
    font-family: "Zen Kaku Gothic New", sans-serif !important;
}
#booking-package_inputFormPanel input[type="text"]:focus,
#booking-package_inputFormPanel select:focus,
#booking-package_inputFormPanel textarea:focus {
    border-color: #98475E !important;
    box-shadow: 0 0 0 0.2rem rgba(152, 71, 94, 0.15) !important;
    outline: none !important;
}

/* 注釈テキスト */
#booking-package_inputFormPanel .description {
    font-size: 0.85rem !important;
    color: #777 !important;
    margin-top: 8px !important;
    line-height: 1.6 !important;
}

/* 送信・次へ・戻るボタンエリア */
#booking-package_inputFormPanel .bottomBarPanel {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 3rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#booking-package_inputFormPanel .next_page_button,
#booking-package_inputFormPanel .book_now_button {
    background-color: #98475E !important;
    color: #fff !important;
    border: 1px solid #98475E !important;
    padding: 14px 40px !important;
    font-size: 1.1rem !important;
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    letter-spacing: 0.1em !important;
    border-radius: 2px !important;
    min-width: 240px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
#booking-package_inputFormPanel .next_page_button:hover,
#booking-package_inputFormPanel .book_now_button:hover {
    background-color: #fff !important;
    color: #98475E !important;
}

#booking-package_inputFormPanel .return_form_button {
    background-color: #fff !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
    padding: 14px 40px !important;
    font-size: 1rem !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
#booking-package_inputFormPanel .return_form_button:hover {
    background-color: #f5f5f5 !important;
    border-color: #aaa !important;
    color: #333 !important;
}

/* --------------------------------------------------------------------------
   7. アカウント画面（ログイン / 登録 / 編集）専用
-------------------------------------------------------------------------- */
#booking-package-loginform,
#booking-package-user-form,
#booking-package-user-edit-form {
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    color: #333 !important;
}

/* フォームタイトル */
#booking-package-user-form .title,
#booking-package-user-edit-form .title {
    color: #98475E !important;
    font-weight: bold !important;
    border-bottom: 1px solid #98475E !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
    width: 100%;
}

/* 閉じるボタン */
#booking-package-user-form .closeButton, 
#booking-package-user-edit-form .closeButton {
    color: #999 !important;
    transition: color 0.2s ease !important;
}
#booking-package-user-form .closeButton:hover, 
#booking-package-user-edit-form .closeButton:hover {
    color: #98475E !important;
}

/* 入力ラベル・フィールド */
#booking-package-loginform label,
#booking-package-user-form label,
#booking-package-user-edit-form label {
    color: #555 !important;
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
    display: block !important;
}
#booking-package-loginform input[type="text"],
#booking-package-loginform input[type="password"],
#booking-package-user-form input[type="text"],
#booking-package-user-form input[type="password"],
#booking-package-user-edit-form input[type="text"],
#booking-package-user-edit-form input[type="password"] {
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
}
#booking-package-loginform input:focus,
#booking-package-user-form input:focus,
#booking-package-user-edit-form input:focus {
    border-color: #98475E !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(152, 71, 94, 0.3) !important;
}

/* 送信ボタン類（ブランドカラー統一） */
#booking-package-loginform input[type="submit"],
#booking-package-user-form .register_button,
#booking-package-user-edit-form .update_user_button,
#booking-package-user-edit-form .change_user_password_button {
    background-color: #98475E !important;
    color: #fff !important;
    border: 1px solid #98475E !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    width: 100% !important;
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
    font-size: 1rem !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}
#booking-package-loginform input[type="submit"]:hover,
#booking-package-user-form .register_button:hover,
#booking-package-user-edit-form .update_user_button:hover,
#booking-package-user-edit-form .change_user_password_button:hover {
    background-color: #fff !important;
    color: #98475E !important;
}

/* 警告系ボタン（削除など） */
#booking-package-user-edit-form .delete_user_button {
    background-color: #fff !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    width: 100% !important;
    margin-top: 10px !important;
    transition: all 0.3s ease !important;
}
#booking-package-user-edit-form .delete_user_button:hover {
    background-color: #f5f5f5 !important;
    color: #d9534f !important;
    border-color: #d9534f !important;
}

/* 細部の調整（ログイン保持のチェックボックスなど） */
#booking-package-loginform .login-remember {
    margin-bottom: 20px !important;
}
#booking-package-loginform .login-remember label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
#booking-package-loginform .login-remember input[type="checkbox"] {
    margin: 0 !important;
    width: auto !important;
}
/* --------------------------------------------------------------------------
   ★追加: 予約完了時、一番下（戻るボタンの上）にも完了メッセージを出す
-------------------------------------------------------------------------- */
/* 完了ステップの時だけ、ボタンエリアの構造を調整 */
#booking-package_inputFormPanel.is-completed-step .bottomBarPanel {
    flex-wrap: wrap !important; /* 文字を上に、ボタンを下に押し出すための魔法 */
}

/* ボタンエリアの直前にCSSでテキストを挿入 */
#booking-package_inputFormPanel.is-completed-step .bottomBarPanel::before {
    content: "仮予約手続きが完了しました";
    display: block;
    width: 100%;
    text-align: center;
    color: #98475E !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: 0.1em !important;
    font-family: "Yu Mincho", "Noto Serif JP", serif !important;
}

body.is-en #booking-package_inputFormPanel.is-completed-step .bottomBarPanel::before {
    content: "Provisional booking completed.";
    letter-spacing: 0.04em !important;
    font-family: var(--font-gothic), "Noto Sans JP", sans-serif !important;
}

@media (max-width: 767px) {
    #booking-package_inputFormPanel.is-completed-step .bottomBarPanel::before {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }
}

/* --------------------------------------------------------------------------
   8. レスポンシブ対応（Media Queries）
-------------------------------------------------------------------------- */
/* PC表示のレイアウト */
@media (min-width: 768px) {
    #booking-package_inputFormPanel .name {
        width: 35% !important;
        padding: 0.5rem 1rem 0.5rem 0 !important;
    }
    #booking-package_inputFormPanel .value {
        width: 65% !important;
    }
}

/* スマホ表示のレイアウト */
@media (max-width: 767px) {
    #booking-package_inputFormPanel .bottomBarPanel {
        flex-direction: column !important;
    }
    #booking-package_inputFormPanel .next_page_button,
    #booking-package_inputFormPanel .book_now_button,
    #booking-package_inputFormPanel .return_form_button {
        width: 100% !important;
        min-width: auto !important;
    }
}

/* ==========================================================================
   情報エリア全体（開催場所・FAQを内包するフレーム）
========================================================================== */
.p-info-section {
    padding: 6rem 0;
    background-color: #FCFAF2; /* 全体の背景は薄いベージュ */
}

.p-info-panel {
    background-color: #fff; /* 白い大きなフレーム */
    padding: 5rem 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

@media (max-width: 767px) {
    .p-info-section {
        padding: 4rem 0;
    }
    .p-info-panel {
        padding: 3rem 1.5rem;
    }
}

/* ==========================================================================
   共通：セクションヘッダー (開催場所・FAQ)
========================================================================== */
.p-section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.p-section-header__ja {
    font-family: serif;
    font-size: 1.8rem;
    color: #333;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 0.3rem;
}
.p-section-header__en {
    font-family: serif;
    font-size: 0.85rem;
    color: #333;
    letter-spacing: 0.1em;
    display: block;
}

/* ==========================================================================
   店舗情報エリア (#topShop トップページから流用)
========================================================================== */
#topShop { 
    background-color: #FFFFF0; 
    overflow: hidden; 
}

/* 縦書きセクションタイトル */
.section-title-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    margin-right: 2rem !important;
}
.section-title-vertical h2 {
    font-size: 26px;
    letter-spacing: 0.15em;
    margin: 0 0 0 .5rem;
}
.section-title-vertical .en-text {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #555;
    margin: 0;
    margin-top: 10px;
}

/* 店舗情報テーブル */
.shop-info-table {
    border-collapse: collapse;
    font-size: 0.95rem;
}
.shop-info-table th, 
.shop-info-table td {
    padding: 1.2rem 0;
    border-bottom: 1px solid #D1C5C5;
    vertical-align: top;
}
.shop-info-table tr:first-child th,
.shop-info-table tr:first-child td {
    border-top: none; 
}
.shop-info-table tr:last-child th,
.shop-info-table tr:last-child td {
    border-bottom: none;
}
.shop-info-table th {
    width: 110px;
    font-weight: normal;
    white-space: nowrap;
}
.shop-info-note { font-size: 0.8rem; }

/* アクセス詳細 */
.access-heading {
    border-bottom: 1px solid #D1C5C5;
    font-size: 0.95rem;
}
.access-list {
    font-size: 0.95rem;
    line-height: 2.2;
}
.shop-access-kazari { 
    top: -60px; 
    right: -80px; 
    z-index: 0; 
}
.shop-parking-info { 
    font-size: 0.95rem; 
    line-height: 2; 
}

/* マップエリア・ボタン */
.shop-map-inner { max-width: 900px; }
.map-btn-icon {
    background-color: #98475E;
    font-size: 0.9rem;
}

/* 店舗情報のスマホ対応 */
@media (max-width: 991px) {
    #topShop .shop-title-kazari,
    #topShop .shop-access-kazari {
        display: none !important;
    }
    .section-title-vertical {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .section-title-vertical {
        writing-mode: horizontal-tb;
        display: flex;
        flex-direction: column;
        align-items: center !important;
        margin-right: 0 !important;
        height: auto !important;
    }
    .section-title-vertical h2 {
        margin: 0 0 5px 0 !important;
        letter-spacing: 0.15em;
    }
    .section-title-vertical .en-text {
        margin-top: 0 !important;
    }
    
    #topShop .col-md-6.d-flex { flex-direction: column; }
    
    #topShop .section-title-vertical {
        margin-bottom: 1.5rem;
    }
    #topShop .col-md-6.d-flex .flex-grow-1 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .shop-map-inner {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ==========================================================================
   よくあるご質問 (FAQ) エリア
========================================================================== */
.p-faq {
    padding: 5rem 0;
    background-color: #FCFAF2;
}

.p-faq__inner {
    background-color: #fff; 
    padding: 5rem 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    
    /* ↓↓ ここを追加（幅を800pxに絞って中央に寄せる） ↓↓ */
    max-width: 800px;
    margin: 0 auto;
}

.p-section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.p-section-header__ja {
    font-family: serif;
    font-size: 1.8rem;
    color: #333;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 0.3rem;
}
.p-section-header__en {
    font-family: serif;
    font-size: 0.85rem;
    color: #333;
    letter-spacing: 0.1em;
    display: block;
}

.p-faq__list { border-top: 1px solid #98475E; }
.p-faq__item { border-bottom: 1px solid #98475E; }

/* 質問（アコーディオンボタン） */
.p-faq__q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 2rem 2rem;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}
.p-faq__q:hover { background-color: #FAFAFA; }

.p-faq__q-mark {
    font-size: 2rem;
    color: #98475E;
    line-height: 1;
    width: 50px;
    flex-shrink: 0;
    text-align: center;
    font-weight: normal;
}
.p-faq__q-text-wrap {
    flex-grow: 1;
    padding-right: 60px;
    padding-top: 0.3rem;
}
.p-faq__q-ja {
    font-family: serif;
    font-size: 1.1rem;
    color: #333;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}
.p-faq__q-en {
    font-family: serif;
    font-size: 0.8rem;
    color: #333;
    display: block;
    letter-spacing: 0.05em;
}

/* アコーディオンの矢印（V字） */
.p-faq__q::after {
    content: '';
    position: absolute;
    right: 2rem;
    top: 2.5rem;
    width: 14px;
    height: 14px;
    border-right: 1px solid #98475E;
    border-bottom: 1px solid #98475E;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}
.p-faq__q.is-open::after {
    transform: rotate(225deg);
    top: 2.8rem;
}

/* 回答エリア */
.p-faq__a {
    display: none;
    padding: 0 2rem 2rem 2rem;
}
.p-faq__a-inner {
    display: flex;
    align-items: flex-start;
}
.p-faq__a-mark {
    font-size: 2rem;
    color: #98475E;
    line-height: 1;
    width: 50px;
    flex-shrink: 0;
    text-align: center;
    font-weight: normal;
}
.p-faq__a-text-wrap {
    flex-grow: 1;
    padding-top: 0.3rem;
}
.p-faq__a-ja {
    font-family: serif;
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.p-faq__a-en {
    font-family: serif;
    font-size: 0.8rem;
    color: #333;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

/* スマホ調整 */
@media (max-width: 767px) {
    .p-faq { padding: 3rem 0; }
    .p-faq__inner { padding: 3rem 1.5rem; }
    
    .p-faq__q { padding: 1.5rem 1rem; }
    .p-faq__q-mark, .p-faq__a-mark {
        font-size: 1.6rem;
        width: 40px;
    }
    .p-faq__q-ja { font-size: 1rem; }
    .p-faq__q-text-wrap { padding-right: 40px; }
    .p-faq__q::after {
        right: 1rem;
        top: 1.8rem;
    }
    .p-faq__q.is-open::after { top: 2rem; }
    .p-faq__a { padding: 0 1rem 1.5rem 1rem; }
    .p-faq__a-ja { font-size: 0.95rem; }
}

/* ==========================================================================
   月替りの版木 /w/experience/monthly-woodblocks/
   ========================================================================== */
#MonthlyWoodblocks{
    --mw-bg:#FCFAF2;
    --mw-text:#333;
    --mw-sub:#777;
    --mw-line:#DDD8CE;
    --mw-accent:#98475E;
    --mw-mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
    width:100%;
    padding-top:150px;
    color:var(--mw-text);
    background:var(--mw-bg);
    line-height:1.9;
}
#MonthlyWoodblocks *{box-sizing:border-box}
#MonthlyWoodblocks img{display:block;width:100%;height:auto}

/* ==========================================================================
   見出し
   ========================================================================== */
#MonthlyWoodblocks .mw-section-heading{
    margin:0 0 42px;
    text-align:center;
}
#MonthlyWoodblocks .mw-section-heading h1,
#MonthlyWoodblocks .mw-section-heading h2{
    margin:0;
    color:var(--mw-text);
    font-family:var(--mw-mincho);
    font-size:27px;
    font-weight:400;
    line-height:1.6;
    letter-spacing:.1em;
}
body.is-en #MonthlyWoodblocks .mw-section-heading h1,
body.is-en #MonthlyWoodblocks .mw-section-heading h2{
    font-size:25px;
    letter-spacing:.05em;
}

/* 「月替り版木について」のみ短いアクセントライン */
#MonthlyWoodblocks .mw-about .mw-section-heading::after{
    content:"";
    display:block;
    width:32px;
    height:1px;
    margin:18px auto 0;
    background:var(--mw-accent);
    opacity:.6;
}

/* ==========================================================================
   月替り版木について
   ========================================================================== */
#MonthlyWoodblocks .mw-about{padding:0 0 105px}
#MonthlyWoodblocks .mw-about-layout{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);
    gap:68px;
    align-items:center;
    width:100%;
    max-width:1080px;
    margin:0 auto;
}

/* ==========================================================================
   画像ギャラリー
   ========================================================================== */
#MonthlyWoodblocks .mw-about-visual{
    display:grid;
    grid-template-columns:minmax(0,1fr) 82px;
    gap:10px;
}
#MonthlyWoodblocks .mw-main-photo{
    overflow:hidden;
    border:1px solid rgba(152,71,94,.12);
}
#MonthlyWoodblocks .mw-main-photo img{
    width:100%;
    height:100%;
    min-height:430px;
    object-fit:cover;
    transition:opacity .35s ease;
}
#MonthlyWoodblocks .mw-sub-photos{
    display:grid;
    grid-template-rows:repeat(5,1fr);
    gap:9px;
}
#MonthlyWoodblocks .mw-sub-photos>div{
    position:relative;
    min-height:0;
    overflow:hidden;
    background:#fff;
    outline:1px solid rgba(60,50,45,.12);
    outline-offset:-1px;
}
#MonthlyWoodblocks .mw-sub-photos>div::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid transparent;
    pointer-events:none;
    transition:border-color .3s ease;
}
#MonthlyWoodblocks .mw-sub-photos>div:hover::after{
    border-color:var(--mw-accent);
}
#MonthlyWoodblocks .mw-sub-photos img{
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;
    transition:opacity .3s ease,transform .4s ease;
}
#MonthlyWoodblocks .mw-sub-photos img:hover{
    opacity:.82;
    transform:scale(1.03);
}
#MonthlyWoodblocks .mw-main-photo img.is-changing{
    animation:mwImageChange .45s ease;
}
@keyframes mwImageChange{
    0%{opacity:.35}
    100%{opacity:1}
}

/* ==========================================================================
   説明文
   ========================================================================== */
#MonthlyWoodblocks .mw-about-text{
    position:relative;
    padding-left:30px;
    color:var(--mw-text);
    font-family:var(--mw-mincho);
    font-size:16px;
    line-height:2.1;
    letter-spacing:.05em;
}
#MonthlyWoodblocks .mw-about-text::before{
    content:"";
    position:absolute;
    top:4px;
    bottom:4px;
    left:0;
    width:1px;
    background:rgba(152,71,94,.28);
}
#MonthlyWoodblocks .mw-about-text p{
    margin:0 0 1.8em;
}
#MonthlyWoodblocks .mw-about-text p:last-child{
    margin-bottom:0;
}
#MonthlyWoodblocks .mw-note{
    margin-top:2.2em!important;
    color:#777;
    font-size:13px;
    line-height:1.9;
}
body.is-en #MonthlyWoodblocks .mw-about-text{
    font-family:inherit;
    font-size:.9rem;
    line-height:1.9;
    letter-spacing:.03em;
}
body.is-en #MonthlyWoodblocks .mw-note{
    font-size:12px;
}

/* ==========================================================================
   月替り文様
   ========================================================================== */
#MonthlyWoodblocks .mw-patterns{
    padding:95px 0 110px;
    background:rgba(255,255,255,.35);
}
#MonthlyWoodblocks .mw-pattern-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
#MonthlyWoodblocks .mw-pattern-item{min-width:0}

/* 元画像1200×900px / 各パネル190×272px */
#MonthlyWoodblocks .mw-pattern-image{
    width:100%;
    aspect-ratio:190/272;
    overflow:hidden;
    background-image:url("https://karamaru.kyoto/w/wp-content/uploads/2026/08/f80d69f0f05921bd4ae4874042951434.png");
    background-repeat:no-repeat;
    background-size:631.578947% 330.882353%;
}
#MonthlyWoodblocks .mw-pattern-01{background-position:1.287129% 49.363057%}
#MonthlyWoodblocks .mw-pattern-02{background-position:20.792079% 49.363057%}
#MonthlyWoodblocks .mw-pattern-03{background-position:40.198020% 49.363057%}
#MonthlyWoodblocks .mw-pattern-04{background-position:59.702970% 49.363057%}
#MonthlyWoodblocks .mw-pattern-05{background-position:79.108911% 49.363057%}
#MonthlyWoodblocks .mw-pattern-06{background-position:98.613861% 49.363057%}
#MonthlyWoodblocks .mw-pattern-07{background-position:1.287129% 93.789809%}
#MonthlyWoodblocks .mw-pattern-08{background-position:20.792079% 93.789809%}
#MonthlyWoodblocks .mw-pattern-09{background-position:40.198020% 93.789809%}
#MonthlyWoodblocks .mw-pattern-10{background-position:59.702970% 93.789809%}
#MonthlyWoodblocks .mw-pattern-11{background-position:79.108911% 93.789809%}
#MonthlyWoodblocks .mw-pattern-12{background-position:98.613861% 93.789809%}

/* ==========================================================================
   文様キャプション
   ========================================================================== */
#MonthlyWoodblocks .mw-pattern-caption{
    padding:13px 5px 5px;
    text-align:center;
    font-family:var(--mw-mincho);
    line-height:1.55;
}
#MonthlyWoodblocks .mw-pattern-caption span{
    display:block;
    margin-bottom:2px;
    color:var(--mw-sub);
    font-size:11px;
}
#MonthlyWoodblocks .mw-pattern-caption strong{
    display:block;
    color:var(--mw-text);
    font-size:15px;
    font-weight:400;
    letter-spacing:.05em;
}
body.is-en #MonthlyWoodblocks .mw-pattern-caption{font-family:inherit}
body.is-en #MonthlyWoodblocks .mw-pattern-caption strong{font-family:var(--mw-mincho)}

/* ==========================================================================
   月替り版木一覧
   ========================================================================== */
#MonthlyWoodblocks .mw-list{padding:105px 0}
#MonthlyWoodblocks .mw-table-wrap{
    width:100%;
    max-width:1000px;
    margin:0 auto;
}
#MonthlyWoodblocks .mw-table{
    width:100%;
    margin:0;
    border-collapse:collapse;
    background:rgba(255,255,255,.72);
    color:var(--mw-text);
    font-family:var(--mw-mincho);
    font-size:15px;
    line-height:1.8;
}
#MonthlyWoodblocks .mw-table th,
#MonthlyWoodblocks .mw-table td{
    padding:16px 24px;
    border:1px solid var(--mw-line);
    vertical-align:middle;
    font-weight:400;
}
#MonthlyWoodblocks .mw-table th{
    width:120px;
    background:#F0EADF;
    text-align:center;
    white-space:nowrap;
}
#MonthlyWoodblocks .mw-table td{
    background:rgba(255,255,255,.5);
    letter-spacing:.04em;
}
#MonthlyWoodblocks .mw-table tr:hover td{
    background:#fff;
}
#MonthlyWoodblocks .mw-list-note{
    width:100%;
    max-width:1000px;
    margin:22px auto 0;
    color:var(--mw-sub);
    font-size:11px;
    line-height:1.8;
}
body.is-en #MonthlyWoodblocks .mw-table{
    font-family:inherit;
    font-size:13px;
}
body.is-en #MonthlyWoodblocks .mw-table th{width:135px}
body.is-en #MonthlyWoodblocks .mw-table td{letter-spacing:.02em}

/* ==========================================================================
   戻るボタン
   ========================================================================== */
#MonthlyWoodblocks .mw-back{
    padding:10px 0 120px;
    text-align:center;
}
#MonthlyWoodblocks .mw-back-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:300px;
    min-height:58px;
    padding:15px 45px;
    border:1px solid var(--mw-accent);
    background:transparent;
    color:var(--mw-accent);
    font-family:var(--mw-mincho);
    font-size:14px;
    line-height:1.5;
    letter-spacing:.1em;
    text-decoration:none!important;
    transition:background .3s ease,color .3s ease,transform .3s ease;
}
#MonthlyWoodblocks .mw-back-link:hover,
#MonthlyWoodblocks .mw-back-link:focus{
    background:var(--mw-accent);
    color:#fff;
    transform:translateY(-2px);
}
body.is-en #MonthlyWoodblocks .mw-back-link{
    font-family:inherit;
    letter-spacing:.05em;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media(max-width:991.98px){
    #MonthlyWoodblocks .mw-about{padding-bottom:80px}
    #MonthlyWoodblocks .mw-about-layout{
        grid-template-columns:1fr;
        gap:45px;
        max-width:760px;
    }
    #MonthlyWoodblocks .mw-about-visual{
        grid-template-columns:minmax(0,1fr) 95px;
    }
    #MonthlyWoodblocks .mw-main-photo img{min-height:400px}
    #MonthlyWoodblocks .mw-about-text{
        width:100%;
        max-width:680px;
        margin:0 auto;
        padding-left:24px;
    }
    #MonthlyWoodblocks .mw-pattern-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:30px 12px;
    }
}

/* ==========================================================================
   Smartphone
   ========================================================================== */
@media(max-width:767px){
    #MonthlyWoodblocks{padding-top:100px}
    #MonthlyWoodblocks .container-lg{
        padding-left:20px;
        padding-right:20px;
    }

    /* 見出し */
    #MonthlyWoodblocks .mw-section-heading{margin-bottom:30px}
    #MonthlyWoodblocks .mw-section-heading h1,
    #MonthlyWoodblocks .mw-section-heading h2{
        font-size:22px;
        letter-spacing:.08em;
    }
    body.is-en #MonthlyWoodblocks .mw-section-heading h1,
    body.is-en #MonthlyWoodblocks .mw-section-heading h2{
        font-size:20px;
        letter-spacing:.03em;
    }
    #MonthlyWoodblocks .mw-about .mw-section-heading::after{
        width:26px;
        margin-top:14px;
    }

    /* About */
    #MonthlyWoodblocks .mw-about{padding-bottom:65px}
    #MonthlyWoodblocks .mw-about-layout{gap:34px}
    #MonthlyWoodblocks .mw-about-visual{display:block}
    #MonthlyWoodblocks .mw-main-photo img{
        min-height:0;
        aspect-ratio:4/3;
        object-fit:cover;
    }
    #MonthlyWoodblocks .mw-sub-photos{
        grid-template-columns:repeat(5,minmax(0,1fr));
        grid-template-rows:none;
        gap:5px;
        margin-top:6px;
    }
    #MonthlyWoodblocks .mw-sub-photos>div{aspect-ratio:1}

    /* 説明文 */
    #MonthlyWoodblocks .mw-about-text{
        width:100%;
        max-width:none;
        padding-left:0;
        font-size:15px;
        line-height:2;
        letter-spacing:.03em;
        text-align:left;
    }
    #MonthlyWoodblocks .mw-about-text::before{
        position:static;
        display:block;
        width:32px;
        height:1px;
        margin:0 0 24px;
        background:rgba(152,71,94,.32);
    }
    body.is-en #MonthlyWoodblocks .mw-about-text{
        font-size:14px;
        line-height:1.9;
    }
    #MonthlyWoodblocks .mw-note{
        margin-top:1.8em!important;
        font-size:12px;
    }

    /* 月別文様 */
    #MonthlyWoodblocks .mw-patterns{padding:65px 0 75px}
    #MonthlyWoodblocks .mw-pattern-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:28px 8px;
    }
    #MonthlyWoodblocks .mw-pattern-caption{padding:9px 3px 0}
    #MonthlyWoodblocks .mw-pattern-caption span{font-size:10px}
    #MonthlyWoodblocks .mw-pattern-caption strong{
        font-size:13px;
        line-height:1.5;
    }

    /* 一覧 */
    #MonthlyWoodblocks .mw-list{padding:70px 0}
    #MonthlyWoodblocks .mw-table{
        font-size:14px;
        line-height:1.7;
    }
    #MonthlyWoodblocks .mw-table th,
    #MonthlyWoodblocks .mw-table td{
        padding:12px 10px;
    }
    #MonthlyWoodblocks .mw-table th{
        width:55px;
        font-size:13px;
    }
    #MonthlyWoodblocks .mw-table td{
        font-size:14px;
        letter-spacing:0;
    }
    body.is-en #MonthlyWoodblocks .mw-table{font-size:13px}
    body.is-en #MonthlyWoodblocks .mw-table th{
        width:90px;
        font-size:11px;
    }
    body.is-en #MonthlyWoodblocks .mw-table td{font-size:13px}
    #MonthlyWoodblocks .mw-list-note{
        margin-top:18px;
        font-size:11px;
    }

    /* 戻るボタン */
    #MonthlyWoodblocks .mw-back{padding:5px 0 85px}
    #MonthlyWoodblocks .mw-back-link{
        display:flex;
        width:100%;
        max-width:340px;
        min-width:0;
        min-height:54px;
        margin:0 auto;
        padding:14px 20px;
        font-size:13px;
    }
}

/* タッチ端末ではhover演出を無効化 */
@media(hover:none){
    #MonthlyWoodblocks .mw-sub-photos img:hover{
        opacity:1;
        transform:none;
    }
    #MonthlyWoodblocks .mw-sub-photos>div:hover::after{
        border-color:transparent;
    }
}