@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Parisienne&display=swap");
/* ロゴ（L'OASIS）に近いエレガントなセリフ体：ラテン=Old Standard TT（旧サイト踏襲）／日本語=しっぽり明朝 */
@import url("https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");

/* === サイト全体のメインフォントをロゴ寄りのセリフ／明朝に === */
:root {
    --ff:
        "Old Standard TT", "Shippori Mincho", "游明朝", "YuMincho",
        "Hiragino Mincho ProN", serif;
    --fm:
        "Old Standard TT", "Shippori Mincho", "游明朝", "YuMincho",
        "Hiragino Mincho ProN", serif;
}

/* === スマホのコンテナ左右余白を詰める ===
   style.css（scss/utility/_common.scss）は .container の余白を
   スマホ既定 --bs-gutter-x:3rem（＝左右24pxずつ）、992px以上で1.5rem としている。
   スマホの左右が広く感じるため 2rem（＝左右16pxずつ）に詰める。

   ※ max-width で必ず囲むこと。素の .container に書くと詳細度が同じまま
   　 add.css が後勝ちして、PC側（min-width:992px の 1.5rem）まで潰れる。
   ※ .container 共通＝スマホの全ページが対象（セクション個別の指定ではない）。 */
@media screen and (max-width: 991px) {
    .container {
        --bs-gutter-x: 2rem;
    }
}

/* 料金プラン */
.pricing-section {
    padding: 50px 0;
    background-color: #f7f7f7;
}

.pricing-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    position: relative;
    transition:
        transform 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.pricing-header {
    background-color: #005bac;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 20px 0;
    position: relative;
}

.pricing-plan {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.pricing-price {
    font-size: 28px;
    margin: 10px 0;
    font-weight: bold;
    color: #fff; /* ここを修正 */
    background-color: #005bac; /* 背景色を追加 */
    padding: 10px;
    border-radius: 5px;
}

.pricing-description {
    margin: 15px 0;
    font-weight: bold;
    color: #555;
}

.pricing-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 20px 0;
}

.pricing-features li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.pricing-features li::before {
    content: "✓";
    color: #005bac;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.btn-primary {
    background-color: #005bac;
    color: #fff;
    border: none;
    transition: background-color 0.3s ease-in-out;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #2c45b0;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4b4b;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 料金プラン全体の調整 */
.pricing-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pricing-container .pricing-card {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
}

/* 問題提起ボックスのスタイル */
.c-box-border {
    background-color: #fff;
    border: 5px solid var(--scd);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
/* ここからアニメーション用のCSS */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.c-box-border h2 {
    animation: fadeInUp 0.5s ease-in-out;
}

/* アイコンのスタイル */
.fa-check-circle {
    color: #008000; /* アイコンの色を緑に設定 */
    margin-right: 10px; /* アイコンとテキストの間隔を調整 */
}
/* フッター部分 */
.company-link i {
    margin-left: 5px; /* アイコンとテキストの間隔 */
    color: #ffffff; /* アイコンの色 */
    font-size: 0.8em; /* アイコンのサイズ */
}
.g-pagetop a {
    background: #6b4f3a;
} /* ロアジス：木目ブラウン */
.g-pagetop a:hover {
    background: #a07b3f;
} /* ゴールドブラウン */

/* 固定フッターバー（スマホ）：ロアジス配色（木目ブラウン）。
   .p-top 外なので変数を .g-fixarea-footer で差し替えて既存グラデを再ブランド */
.g-fixarea-footer {
    --kc: #6b4f3a;
    --kcd: #4a3526;
    --kc-rgb: 107, 79, 58;
    --kcd-rgb: 74, 53, 38;
}

/* CTA部分 */
.c-btn--contact {
    background: linear-gradient(
        to bottom,
        #ff7e00,
        #e06800
    ) !important; /* 例えば、オレンジ系のグラデーション */
}
/* よくある質問 */
.p-common-texture:after {
    background: #b8ddff;
}
/* トップお知らせコンテンツ */
/* 頭文字の差し色。旧ブランド（水色 #005bac）の残骸だったため、ロアジスの
   ゴールドブラウンに変更。.p-top 配下では ::first-letter を inherit で打ち消し、
   見出し全体を同色に揃えている（下部の .p-top .c-headline-compact 参照）。 */
.c-headline-compact .c-headline-compact__ttl::first-letter {
    color: #a07b3f;
}
/* トップ選ばれる理由 */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: scale(1.05);
}

.card-body {
    padding: 20px;
    text-align: center;
}

.stylish-btn {
    background-color: #ff6347;
    color: #fff;
    border: 2px solid #ff6347;
    padding: 10px 20px;
    border-radius: 8px;
    text-transform: uppercase;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
    display: inline-block;
}

.stylish-btn:hover {
    background-color: #fff;
    color: #ff6347;
}
/* お問合せフォーム：枠線をロアジスのゴールドブラウンへ（旧テンプレの青 #005bac から）
   ※ #contents に .p-top が付いているので var(--sc)=#a07b3f が解決する。
   　 .p-top が外れると :root の --sc:#005bac（旧ブランドの青）に戻るため直値で指定。 */
.p-contact .g-form {
    border: 3px dashed #a07b3f;
}

/* サイトマップ */
.c-sitemap .nav-item a {
    background-color: #005bac;
    border: 1px solid #333333;
    color: #ffffff;
}
.c-sitemap .nav-item a:after {
    background-image: none;
}
.c-sitemap .nav-item a .c-btn-simple__icon,
.c-sitemap .nav-item a i {
    color: #ffffff;
}
/* ナビメニュー */
.g-nav .lower {
    position: fixed;
}

/* メインビジュアル：slickコアCSSが無くフェードの座標計算が成立しないため、
   .c-visual にスコープして最小限のslick標準レイアウトを補完（2枚目以降が画面外に飛ぶ不具合の修正） */
.c-visual .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.c-visual .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.c-visual .slick-track::before,
.c-visual .slick-track::after {
    content: "";
    display: table;
}
.c-visual .slick-track::after {
    clear: both;
}
.c-visual .slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
}

/* メインビジュアル：写真にかかる白い靄（style.css の opacity:0.5 + blur:3px）を薄めに戻す（0.85→0.92／ぼかしは無し） */
.c-visual .c-image .c-image__src {
    opacity: 0.92;
    position: relative; /* 下の色オーバーレイ(::before)の基準 */
    -webkit-filter: none;
    filter: none;
}
/* メインビジュアル：写真に暖色ブラウンを重ねて暗く（ロゴの視認性UP） */
.c-visual .c-image .c-image__src::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* メインビジュアル：高さは visual.php のインライン指定（PC calc(100dvh - 40px) / SP 680px）を使用＝全画面 */
/* スマホは高さを抑えて写真を「引き」に（横長写真の上下トリミングを減らす） */
@media (max-width: 991px) {
    .c-visual .c-image__src.--ratio {
        --ratio: 480px !important; /* 元 680px */
    }
}
/* デスクトップはメインビジュアルの高さをさらに大きく（ビューポート超え） */
@media (min-width: 992px) {
    .c-visual .c-image__src.--ratio {
        --ratio-lg: 110dvh !important; /* 元 calc(100dvh - 40px) */
    }
}

/* メインビジュアル：ロゴをど真ん中＋最前面に配置（暗くするのは写真側の色オーバーレイで対応） */
.c-visual .c-visual__catchcopy.--logo {
    top: 50%;
    bottom: auto;
    left: 50%;
    z-index: 1001; /* slick がアクティブスライドに当てる z-index:999 より上＝常に最前面（静止時も濃く） */
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* ロゴ自体も影でくっきり濃く */
.c-visual .c-visual__catchcopy.--logo .c-visual__logo-img {
    -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6))
        drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6))
        drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}

/* ============================================================
   トップページ（パティスリー ロアジス）ブランドテーマ
   クリーム/ベージュ・木目ブラウン・ワインレッド／やさしさ・親しみやすさ
   既存コンポーネントが参照するカラー変数を .p-top で差し替え
   ============================================================ */
.p-top {
    --kc: #6b4f3a; /* キーカラー：木目ブラウン */
    --kcd: #4a3526; /* 濃いブラウン */
    --sc: #a07b3f; /* サブ：ゴールドブラウン */
    --scd: #856634;
    --ac: #8a2f3d; /* アクセント：ワインレッド（差し色） */
    --acd: #6f2531;
    --fc: #4a3b32; /* 本文：ダークブラウン */
    --link: #6b4f3a;
}
.p-top main {
    color: var(--fc);
}

/* ページ全体の背景：ロゴ台紙のクリーム〜ベージュのグラデーション */
.p-top {
    background-color: #f2ddb4;
    background-image:
        radial-gradient(120% 90% at 50% 42%, #faf1dd 0%, #f3e2bd 46%, #e8cd9f 100%);
    background-attachment: fixed;
}

/* セクション背景：クリーム/ベージュ（nth-child のグレーを上書き） */
.p-top .p-sec--cream {
    background-color: #faf6ee !important;
}
.p-top .p-sec--beige {
    background-color: #f3ebda !important;
}

/* セクション見出し：c-headline-compact を中央・縦積みのエレガントな見出しに */
.p-top .c-headline-compact {
    display: block;
    text-align: center;
}
.p-top .c-headline-compact__ttl {
    display: block;
    font-family:
        "Parisienne", cursive; /* 他セクションのEN表記（Cafe/Shop/FAQ…）に合わせる */
    font-size: 2.4rem;
    letter-spacing: normal; /* 筆記体がつながるよう字間を解除 */
    line-height: 1;
    color: var(--sc); /* FAQ（.p-twin__en）と同じゴールドブラウンに合わせる */
}
.p-top .c-headline-compact__ttl::after {
    display: none;
}
.p-top .c-headline-compact .c-headline-compact__ttl::first-letter {
    color: inherit;
}
.p-top .c-headline-compact__sttl {
    color: var(--kc);
}
@media (min-width: 992px) {
    .p-top .c-headline-compact__ttl {
        font-size: 2.8rem;
    }
}

/* === トップ NEWS／お知らせ：背景写真をクリームのベールで沈めて可読性を確保 === */
/* ※ 必ず .p-top でスコープすること。body_class が /news/ アーカイブの <body> にも
   p-news を付けるため、素の .p-news に overflow:hidden を書くと body ごと
   スクロール不能になる（実際に発生した）。 */
.p-top .p-news {
    overflow: hidden;
} /* 100vh の背景がはみ出さないように */
.p-top .p-news .p-news__bg {
    z-index: 0;
    height: 100%;
} /* 背景写真（最背面・セクション内に収める） */
.p-news__veil {
    position: absolute;
    z-index: 1; /* 写真の上・本文(z-index:20)の下 */
    height: 100%;
    background-color: rgba(
        250,
        246,
        238,
        0.55
    ); /* クリームのベール：写真は残しつつ文字を読みやすく */
}

/* スイーツ商品カード：画像が角丸からはみ出さないように */
.p-top .card {
    overflow: hidden;
}

/* 店舗案内の概要リスト */
.p-top__info {
    margin: 0;
}
.p-top__info-row {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 4px;
    border-bottom: 1px dashed rgba(107, 79, 58, 0.3);
}
.p-top__info-row dt {
    flex: 0 0 92px;
    font-weight: 700;
    color: var(--kc);
}
.p-top__info-row dd {
    flex: 1 1 240px;
    margin: 0;
}

/* === トップ CONCEPT：ぼかし背景＋白い楕円＋牛イラスト（参照デザイン） === */
/* ヒーローのロゴ（メインビジュアル下にはみ出す）と楕円が被らないよう、上側にロゴ用のクリアランスを確保 */
/* ロゴをヒーロー中央へ移したため、上だけ大きかったロゴ用クリアランスを撤去。
   上下とも c-section の既定（64px）で揃える */
.c-section.p-top__concept {
    overflow: hidden;
}
.p-top__concept .p-top__concept-bg {
    position: absolute;
    z-index: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.p-top__concept .p-top__concept-veil {
    position: absolute;
    z-index: 1;
    background-color: rgba(250, 246, 238, 0.4);
}
.p-top__concept-card {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 24px 60px rgba(74, 53, 38, 0.14);
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 11% 13%;
}
.p-top__concept-en {
    font-family: "Parisienne", cursive;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--kc);
    margin: 0 0 6px;
}
.p-top__concept-cow {
    max-width: 190px;
    margin: 0 auto 14px;
}
.p-top__concept-cow img {
    display: block;
    width: 100%;
    height: auto;
}
.p-top__concept-lead p {
    font-size: 1.6rem;
    line-height: 2.1;
    font-weight: 700;
    color: var(--fc);
    margin: 0;
}
.p-top__concept-lead p + p {
    margin-top: 1.1em;
}
.p-top__concept-logo {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0 auto 32px;
}
.p-top__concept-logo-img {
    display: inline-block;
    width: auto;
    max-width: 320px;
    height: auto;
}

@media (max-width: 991px) {
    .p-top__concept-logo {
        margin: 0 auto 24px;
    }
    .p-top__concept-logo-img {
        max-width: 220px;
    }
    .p-top__concept-card {
        border-radius: 46%;
        padding: 16% 9%;
    }
    .p-top__concept-en {
        font-size: 2.3rem;
    }
    .p-top__concept-lead p {
        font-size: 1.4rem;
        line-height: 2;
    }
}

/* === トップ MENU LINE UP（カフェ／スイーツ／デコレーション）クラフト背景＋ブロブ画像＋ジグザグ === */
.c-section.p-menu {
    background-color: #f2ddb4 !important;
    background-image:
        radial-gradient(120% 90% at 50% 40%, #faf1dd 0%, #f3e2bd 46%, #e6c99a 100%) !important;
    overflow: hidden; /* 端からはみ出す装飾でも横スクロールを出さない */
}

/* === Menu Line Up：ケーキ装飾を余白・端にちりばめる（背面・装飾のみ） === */
.p-menu .p-menu__deco {
    position: absolute;
    z-index: 1; /* コンテンツ(.c-section>* の z-index:20)より背面・背景より前面 */
    pointer-events: none; /* 装飾なのでクリック不可 */
    width: clamp(96px, 15vw, 188px);
    height: auto;
    filter: drop-shadow(0 12px 20px rgba(74, 53, 38, 0.22));
    animation: pmenuFloat 6s ease-in-out infinite;
    /* 透明度は .fly-in（0→1）に任せる＝スクロールで出現 */
}
/* 上＝右／中央＝左（大）／下＝右 のジグザグで、縦も上・中央・下に均等分散 */
.p-menu .p-menu__deco--1 {
    top: 9%;
    right: 12.5%;
    left: auto;
    rotate: 8deg;
    animation-delay: 0s;
}
.p-menu .p-menu__deco--2 {
    top: 40%;
    left: 6.5%;
    right: auto;
    rotate: -25deg;
    width: clamp(112px, 12vw, 220px);
    animation-delay: 1.2s;
}
.p-menu .p-menu__deco--3 {
    bottom: 6%;
    right: 4%;
    left: auto;
    rotate: 6deg;
    animation-delay: 2.4s;
}
@keyframes pmenuFloat {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -12px;
    }
}
@media (max-width: 991px) {
    .p-menu .p-menu__deco {
        width: clamp(64px, 20vw, 116px);
    }
    .p-menu .p-menu__deco--2 {
        top: 34%;
        width: clamp(70px, 21vw, 124px);
    }
    .p-menu .p-menu__deco--1 {
        top: 4%;
        right: 4.5%;
    }
}

.p-menu__head {
    letter-spacing: 0.12em;
    color: #5a4633;
}
.p-menu__img {
    margin: 0;
}
.p-menu__img-src {
    width: 100%;
    padding-top: 76%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 18px 38px rgba(74, 53, 38, 0.22);
}
.p-menu__img.--blob1 .p-menu__img-src {
    border-radius: 63% 37% 41% 59% / 43% 47% 53% 57%;
}
.p-menu__img.--blob2 .p-menu__img-src {
    border-radius: 42% 58% 56% 44% / 57% 42% 58% 43%;
}
.p-menu__img.--blob3 .p-menu__img-src {
    border-radius: 58% 42% 48% 52% / 47% 58% 42% 53%;
}
.p-menu__body {
    text-align: left;
}
.p-menu__body.--right {
    text-align: right;
}
.p-menu__en {
    font-family: "Parisienne", cursive;
    font-size: 3.2rem;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 4px;
}
.p-menu__ttl {
    color: #4a3526;
}
.p-menu__read {
    font-weight: 500;
    margin: 0 0 20px;
}
.p-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #6b5848;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 1.3rem;
    text-decoration: none;
    padding: 9px 30px 9px 22px;
    -webkit-clip-path: polygon(
        0 0,
        calc(100% - 13px) 0,
        100% 50%,
        calc(100% - 13px) 100%,
        0 100%
    );
    clip-path: polygon(
        0 0,
        calc(100% - 13px) 0,
        100% 50%,
        calc(100% - 13px) 100%,
        0 100%
    );
    transition: background-color 0.3s ease;
}
.p-menu__btn:hover {
    background-color: var(--ac);
    color: #fff;
}

@media (min-width: 992px) {
    .p-menu__en {
        font-size: 3.8rem;
    }
}
@media (max-width: 991px) {
    .p-menu__body,
    .p-menu__body.--right {
        text-align: center;
    }
    .p-menu__img {
        max-width: 420px;
        margin: 0 auto;
    }
    .p-menu__img-src {
        padding-top: 72%;
    }
}

/* === トップ 店舗案内／よくある質問：左右2分割パネル（全幅 / Bootstrapグリッド） === */
/* レイアウトは Bootstrap の .row.g-0 + .col-lg-6 に委譲。全幅は .c-section--wide（-30px）で実現 */
.p-twin__col {
    display: flex;
    justify-content: center;
    padding: 80px 24px 90px;
}
.p-twin__col--shop {
    background-color: #f7eed7;
} /* クリーム */
.p-twin__col--faq {
    background-color: #ece0c8;
} /* 淡いゴールドベージュ（ロアジス配色） */

/* トップ：gmap を店舗案内/よくある質問セクションの直下にきれいに収める
   （style.css の .g-gmap iframe の margin-top:-170px による上セクションへの潜り込みを解除） */
.p-top .g-gmap iframe {
    margin-top: 0;
    height: 450px;
}
/* 白黒フィルターを解除（赤いピンが灰色化して見えなくなるのを防ぐ＝カラー表示） */
.p-top .g-gmap {
    -webkit-filter: none;
    filter: none;
}

/* === トップ FAQ（よくある質問・アコーディオン） === */
.p-faq__item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(74, 53, 38, 0.08);
    margin-bottom: 14px;
    overflow: hidden;
    text-align: left; /* body の text-align:center を上書きして左寄せ */
}
.p-faq__q {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 18px 56px;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #4a3526;
    transition: color 0.2s ease;
}
.p-faq__q::-webkit-details-marker {
    display: none;
} /* Safari のデフォルト三角を消す */
.p-faq__q::before {
    content: "Q";
    position: absolute;
    left: 20px;
    top: 16px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: #a07b3f; /* ゴールド */
}
.p-faq__q::after {
    content: "＋";
    position: absolute;
    right: 18px;
    top: 50%;
    color: #a07b3f;
    font-size: 1.8rem;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}
.p-faq__item[open] .p-faq__q::after {
    transform: translateY(-50%) rotate(45deg); /* ＋→× */
}
.p-faq__q:hover {
    color: #8a2f3d;
}
.p-faq__a {
    padding: 0 24px 18px 56px;
    font-size: 1.5rem;
    line-height: 1.9;
    color: #5a4a3f;
}
.p-faq__a p {
    margin: 0;
}

/* === トップ 店舗案内（店舗概要） === */
.p-shop__img {
    margin: 0;
}
.p-shop__img img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(74, 53, 38, 0.18);
}
.p-shop__info {
    margin: 0 0 8px;
    text-align: left; /* body の text-align:center を上書きして左寄せ */
}
.p-shop__row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    padding: 14px 4px;
    border-bottom: 1px dashed rgba(107, 79, 58, 0.28);
}
.p-shop__row dt {
    flex: 0 0 84px;
    font-weight: 700;
    font-size: 1.4rem;
    color: #6b4f3a;
    letter-spacing: 0.04em;
}
.p-shop__row dd {
    flex: 1;
    min-width: 60%;
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.7;
    color: #4a3b32;
}
.p-shop__tel {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: #8a2f3d; /* ワインレッド */
    text-decoration: none;
}
.p-shop__tel:hover {
    color: #6f2531;
}
.p-shop__note {
    font-size: 1.25rem;
    color: #8a7a6c;
}
@media (max-width: 991px) {
    .p-faq__q {
        font-size: 1.5rem;
        padding: 16px 48px;
    }
    .p-faq__a {
        font-size: 1.4rem;
        padding-left: 48px;
    }
}

/* === トップ CTA（お問い合わせ・ロアジス） === */
.c-section.p-cta {
    background-color: #4a3526;
    background-image: linear-gradient(160deg, #5a4231 0%, #3b2a1d 100%);
    overflow: hidden;
}
.p-cta__en {
    font-family: "Parisienne", cursive;
    font-size: 2.8rem;
    line-height: 1;
    color: #d8b15e; /* ゴールド */
    margin: 0 0 6px;
}
.p-cta__ttl {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0 0 18px;
}
.p-cta__lead {
    font-size: 1.5rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 26px;
}
.p-cta__tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.2s ease;
}
.p-cta__tel:hover {
    opacity: 0.85;
}
.p-cta__tel i {
    color: #d8b15e;
    font-size: 1.8rem;
}
.p-cta__tel-num {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 0.02em;
}
.p-cta__hours {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.72);
    margin: 8px 0 28px;
}
/* お問い合わせボタン（ロゴの金リングに寄せたゴールドグラデーション×ダークブラウン文字） */
.p-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-image: linear-gradient(135deg, #e8cd9f 0%, #d8b15e 50%, #c99a4e 100%);
    color: #4a3526; /* ダークブラウン（金地でも読める） */
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 16px 50px;
    border-radius: 5px;
    box-shadow: 0 10px 24px rgba(74, 53, 38, 0.28);
    transition:
        filter 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}
.p-cta__btn:hover {
    color: #4a3526;
    filter: brightness(1.06);
    box-shadow: 0 14px 30px rgba(74, 53, 38, 0.34);
    transform: translateY(-2px);
}
.p-cta__btn i {
    font-size: 1.4rem;
}
@media (min-width: 992px) {
    .p-cta__en {
        font-size: 3.2rem;
    }
    .p-cta__ttl {
        font-size: 3.2rem;
    }
    .p-cta__tel-num {
        font-size: 3.6rem;
    }
}
.p-twin__inner {
    width: 100%;
    max-width: 440px;
    text-align: center;
}
.p-twin__burst {
    display: block;
    width: 46px;
    height: 24px;
    margin: 0 auto 6px;
    background: repeating-conic-gradient(
        from 270deg at 50% 100%,
        var(--sc) 0deg 1.4deg,
        transparent 1.4deg 20deg
    );
}
.p-twin__en {
    font-family: "Parisienne", cursive;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--sc);
    margin: 0 0 4px;
}
.p-twin__ttl {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #4a3526;
    margin: 0 0 28px;
}
.p-twin__img {
    margin: 0 auto 28px;
    max-width: 360px;
}
.p-twin__img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3; /* 両パネルの写真を同じ縦横比＝同じ高さに揃える */
    height: auto;
    object-fit: cover; /* 比率を保ったまま枠に合わせてトリミング（歪ませない） */
    border-radius: 10px;
}
.p-twin__read p {
    font-size: 1.5rem;
    line-height: 2;
    font-weight: 500;
    color: #5a4a3f;
    margin: 0 0 28px;
}
.p-twin__btn {
    display: inline-block;
    background-color: #5a4231;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    padding: 16px 56px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.p-twin__btn:hover {
    background-color: var(--ac);
    color: #fff;
}

@media (min-width: 992px) {
    .p-twin__en {
        font-size: 2.8rem;
    }
    .p-twin__ttl {
        font-size: 3rem;
    }
}
@media (max-width: 767px) {
    .p-twin__col {
        padding: 56px 20px 64px;
    }
    .p-menu .p-menu__deco--3 {
        bottom: 3%;
    }
    .g-footer {
        padding-bottom: 50px;
    }
}

/* === フッター：ロアジス配色（ブラウン地＋ゴールドのアクセント） === */
/* .p-top の外側のため変数が効かないので明示色で指定 */
footer.c-section--trans {
    background-color: #cbb592 !important; /* .c-section--trans の transparent!important を上書き */
    overflow: hidden; /* 念のため：100vh背景などのはみ出しをフッター内に収める */
} /* ロアジス：ベージュゴールド */
/* 淡い地色に合わせて文字色をダークブラウンへ（白だと読めないため） */
footer.c-section--trans .list a,
footer.c-section--trans .logo,
footer.c-section--trans .company {
    color: #4a3526 !important;
}
footer.c-section--trans .list a:hover,
footer.c-section--trans .list a:focus {
    color: #8a2f3d !important;
} /* ワインレッドのホバー */

/* フッターをコンパクトに（高さを最小限に） */
footer.c-section--trans {
    padding: 8px 0;
}
footer.c-section--trans .logo {
    width: auto;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 0; /* line-height:2 × font-size:3rem の高い行ボックスを潰す＝ロゴが下寄りにならず中央に */
    line-height: 1;
}
footer.c-section--trans .logo img {
    width: 80px;
    height: auto;
    vertical-align: middle;
}
footer.c-section--trans .logo svg {
    vertical-align: middle;
}
footer.c-section--trans .list a {
    font-size: 1rem;
    line-height: 1.25;
    padding: 0;
    display: inline-block;
}
footer.c-section--trans .col-12 {
    margin-bottom: 0 !important;
}
/* フッターナビ：全リンクを横並びに（縦積みにならないよう display:flex を明示・強制） */
footer.c-section--trans .g-footer__nav {
    display: flex !important; /* 確実に横並び */
    flex-flow: row wrap; /* 横並び・足りなければ折り返し */
    justify-content: center;
    align-items: center;
    gap: 6px 14px; /* 行間 / 項目間 */
    margin: 0;
    padding: 0;
    list-style: none;
}
footer.c-section--trans .g-footer__nav li {
    flex: 0 0 auto; /* 各項目は内容幅（縦に伸びない） */
    width: auto;
    margin: 0;
    list-style: none;
}
footer.c-section--trans .g-footer__nav a {
    white-space: nowrap;
}
@media (max-width: 991px) {
    footer.c-section--trans {
        padding: 0;
    }
    .g-footer .nav-item {
        background-color: #ffffff;
    }
}

/* === ヘッダー：ロアジス配色 === */
/* 既存コンポーネントが参照する変数を .g-header で差し替え（背景は inline の #fff を維持） */
.g-header {
    --kc: #6b4f3a; /* ナビ文字・下線：木目ブラウン */
    --kcd: #4a3526;
    --sc: #a07b3f; /* ゴールドブラウン */
    --ac: #8a2f3d; /* ワインレッド（差し色） */
    --line: #8a2f3d; /* 「無料相談」ボタンの背景：緑→ワインレッド */
    --gold: #a07b3f;
}
/* ナビ上の EN 小文字（ABOUT / CAFE …）をゴールドブラウンに */
.g-header .g-nav .g-nav__list .nav-link:after {
    color: #a07b3f;
}
/* 2段ヘッダー：ロゴ行とナビ行の間に少し間隔＋上に細い区切り線 */
.g-header__navrow {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(107, 79, 58, 0.12);
}

/* ヘッダーをコンパクトに（ロゴ縮小＋ナビ余白短縮で縦幅を詰める） */
.g-header .g-header__logo .g-header__logo-link .g-header__logo-link-img,
.g-header .g-header__logo .g-header__logo-link svg {
    max-width: 160px;
}
/* ロゴ見出し(h1/div)の余白・行間を除去（h1のマージンや行ボックスがヘッダーの無駄な高さを生むため） */
.g-header .g-header__logo {
    margin: 0;
    font-size: 0;
    line-height: 1;
}
.g-header .g-header__logo .g-header__logo-link-img {
    display: block;
}
/* スマホはロゴ・ヘッダー余白をさらに小さく（高さを抑える） */
@media (max-width: 991px) {
    .g-header .g-header__logo .g-header__logo-link .g-header__logo-link-img,
    .g-header .g-header__logo .g-header__logo-link svg {
        max-width: 104px;
    }
    #g-header .container-fluid {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}
/* ヘッダーナビ（7項目）を1段に。電話番号も残すため、項目・字間・フォントを詰めて収める */
.g-header .g-nav .g-nav__list .nav-link {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px; /* 2段ヘッダー：ナビが全幅の専用行になったので通常の余白に */
    padding-right: 16px;
    font-size: 1.4rem; /* 全幅行なので読みやすいサイズに戻す */
    white-space: nowrap; /* 各項目内での改行を防ぐ */
}
.g-header .g-nav .g-nav__list.row {
    --bs-gutter-x: 0.75rem; /* 項目間 */
}

/* ヘッダーの電話番号（ロアジス配色） */
.g-header__tel {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    color: #6b4f3a; /* 木目ブラウン */
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}
.g-header__tel:hover {
    color: #8a2f3d;
} /* ワインレッド */
.g-header__tel i {
    color: #a07b3f;
    font-size: 1.5rem;
    margin-right: 7px;
} /* ゴールド */
.g-header__tel-num {
    font-family: "Montserrat", sans-serif;
    font-size: 2rem;
    letter-spacing: 0.02em;
}

/* お問い合わせボタン：内容幅にフィットさせて左右の余白バランスを整える */
/* （元は width:100% で左に余白ができ、右端の矢印アイコンと相まって右寄りに見えていた） */
.g-header .g-header__nav .c-btn-solid-border {
    width: auto;
}
.g-header .g-header__nav .c-btn-solid-border.--small {
    padding: 6px 36px 6px 18px;
} /* 右は矢印アイコン分を確保 */
/* 封筒アイコンとテキストの間隔 */
.g-header .g-header__nav .c-btn-solid-border__txt-in i {
    margin-right: 6px;
}
/* ヘッダーお問い合わせボタン：ロゴの金リングに寄せたゴールドグラデーション×ダークブラウン文字 */
.g-header .g-header__nav .c-btn-solid-border {
    background-image: linear-gradient(135deg, #e8cd9f 0%, #d8b15e 50%, #c99a4e 100%);
    border-radius: 5px;
    box-shadow: 0 6px 16px rgba(74, 53, 38, 0.22);
    transition:
        filter 0.3s ease,
        box-shadow 0.3s ease;
}
.g-header .g-header__nav .c-btn-solid-border:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(74, 53, 38, 0.28);
}
.g-header .g-header__nav .c-btn-solid-border__txt-in,
.g-header .g-header__nav .c-btn-solid-border__icon i {
    color: #4a3526; /* ダークブラウン（金地でも読める） */
}
/* ホバー時の塗り（ボーダーアニメの面）はゴールドグラデを隠さないよう透明化 */
.g-header .g-header__nav .c-btn-solid-border__l,
.g-header .g-header__nav .c-btn-solid-border__t,
.g-header .g-header__nav .c-btn-solid-border__r,
.g-header .g-header__nav .c-btn-solid-border__b {
    background: transparent;
}

/* === スマホ用ヘッダーナビ（お問い合わせボタンの位置にハンバーガー＋ドロップダウン） === */
.g-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.g-burger__bar {
    display: block;
    width: 26px;
    height: 2px;
    margin: 0 auto;
    background: #6b4f3a; /* 木目ブラウン */
    border-radius: 2px;
    transition:
        transform 0.3s ease,
        opacity 0.2s ease;
}
.g-burger.is-open .g-burger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.g-burger.is-open .g-burger__bar:nth-child(2) {
    opacity: 0;
}
.g-burger.is-open .g-burger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ドロップダウンパネル（ヘッダー直下に展開） */
.g-nav-sp {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #faf6ee; /* クリーム */
    border-top: 1px solid rgba(107, 79, 58, 0.18);
    box-shadow: 0 14px 26px rgba(74, 53, 38, 0.16);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        max-height 0.38s ease,
        opacity 0.3s ease,
        visibility 0.38s;
}
.g-nav-sp.is-open {
    max-height: 560px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
}
.g-nav-sp__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.g-nav-sp .nav-item {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.g-nav-sp .nav-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 26px;
    color: #6b4f3a;
    font-weight: 700;
    font-size: 1.6rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 79, 58, 0.1);
}
.g-nav-sp .nav-link::after {
    content: attr(data-title); /* ABOUT / CAFE … のEN表記 */
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: #a07b3f; /* ゴールドブラウン */
}
.g-nav-sp .nav-link:hover,
.g-nav-sp .nav-link.is-active {
    background: #f3ebda;
    color: #8a2f3d; /* ワインレッド */
}

/* === ローディング画面（preloader）：ロアジス配色（#cbb592） === */
/* 背景グラデーションが参照する変数を .preloader で差し替え */
.preloader {
    --sc-rgb: 203, 181, 146; /* #cbb592（ベージュゴールド） */
    --scd-rgb: 184, 159, 120; /* やや濃いベージュ（グラデの陰影用） */
    /* ページ全体と同じクリーム〜ベージュの放射状グラデーション */
    background-color: #f2ddb4 !important;
    background-image:
        radial-gradient(120% 90% at 50% 42%, #faf1dd 0%, #f3e2bd 46%, #e8cd9f 100%) !important;
}
/* 淡い地色に合わせて文字・バーをダークブラウンへ（白だと読めないため） */
.preloader .preloader-block .title,
.preloader .preloader-block .loading {
    color: #4a3526;
}
.preloader .preloader-block .percent {
    color: rgba(74, 53, 38, 0.28);
}
.preloader .preloader-bar {
    background: #b89f78;
}
.preloader .preloader-bar .preloader-progress {
    background: #4a3526;
}

/* ============================================================
   下層ヒーロー（サブビジュアル）ロアジス・ブランド対応
   ------------------------------------------------------------
   ★経緯（重要）★
   サーバの visual-sub.php は以前「CSS変数駆動の新BEMコンポーネント」
   （.c-visual-sub__image ＋ インライン --sub-visual-* ＋ --minimal 等のvariant）
   だったが、ローカルの旧版で上書きアップされて消滅した。
   2026-07-15 時点の実機は全ページ下記の旧マークアップになっている：

     <div class="c-visual-sub">
       <div class="c-visual-sub__inner">…
         <h1 class="c-visual-sub__ttl text-white" data-title="スラッグ">タイトル</h1>
       …</div>
       <div class="c-after c-after__image" data-lazy-background="…"></div>
     </div>

   よって --sub-visual-* / .c-visual-sub__image / .c-visual-sub--minimal を狙う
   指定は全て空振りになる。ここは上記の旧マークアップ前提で当て直している。

   旧版の素の見た目は「__inner の backdrop-filter:blur(5px) が写真全体をぼかし、
   その上に白文字」。ぼかしを外すだけだと白文字が写真に埋もれて読めなくなるため、
   ぼかしの代わりにブラウンのベールを敷いて可読性を確保する。
   ============================================================ */
/* 帯の高さ。旧マークアップ既定の 180px は写真の帯としては浅すぎる
   （英字4rem＋和文2rem＝約64px に上下padding 64px で、ほぼ文字で埋まる）。
   写真が見えるだけの高さを確保して、新コンポーネント時代の見え方に戻す。
   style.css と同じ詳細度（0,2,0）だが add.css が後に読まれるので上書きされる。 */
.c-visual-sub .c-visual-sub__inner {
    height: 220px;
    display: flex;
    align-items: center; /* 帯を高くすると文字が上に張り付くため上下中央へ */
}
.c-visual-sub .c-visual-sub__inner > .container {
    width: 100%; /* flexアイテム化するので幅を明示（margin:auto の中央寄せは維持） */
}
@media (min-width: 992px) {
    .c-visual-sub .c-visual-sub__inner {
        height: 360px;
    }
}

/* 写真の上のブラウンのベール。旧マークアップにはベール用の要素が無いため
   .c-after__image の ::after で作る（親 .c-after が inset:0 の絶対配置）。 */
.c-visual-sub .c-after__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(74, 53, 38, 0.5);
}
/* 擦りガラス（style.css の __inner backdrop-filter:blur）を解除。
   可読性は上のベールで確保できるので、写真はくっきり見せる。 */
.c-visual-sub .c-visual-sub__inner {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* 日本語タイトル：白。
   font-family は style.css が Typekit の "fot-tsukuaoldmin-pr6n" を指定しているが、
   このサイトは Typekit を読み込んでおらず sans-serif に落ちて明朝のサイトから浮く。
   サイト共通の明朝（--ff）に揃える。 */
.c-visual-sub .c-visual-sub__ttl {
    color: #fff !important;
    font-family: var(--ff) !important;
}
/* 英字（data-title）はゴールドのアクセントに。
   ブラウンのベール上でも沈まないよう、--sc より明るい金を使う。 */
.c-visual-sub .c-visual-sub__ttl::before {
    color: #e8cd9f;
    letter-spacing: 0.06em;
}

/* ============================================================
   下層：ロアジスについて（page/about.php）
   トップと同じ .p-top ブランドテーマ（色変数・背景・見出し）を継承。
   ここでは about 固有のごあいさつ／特集ブロックのみ追記
   ============================================================ */
/* 全セクションの左ずれ対策：テーマの「main に左右30px余白 → .c-section--wide が
   -30px で相殺」する対の仕組みが崩れると全体が左へずれる。about ではこの依存を断ち、
   main を全幅・ワイドセクションの負マージンを解除して #contents 端に揃える
   （＝左右対称・中央寄せ／セクション背景はフルブリードのまま）。横あふれも抑止。 */
.p-about,
.p-cafe,
.p-sweets,
.p-decoration,
.p-access {
    overflow-x: hidden;
}
.p-about > main,
.p-cafe > main,
.p-sweets > main,
.p-decoration > main,
.p-access > main {
    margin-left: 0;
    margin-right: 0;
}
.p-about .c-section--wide,
.p-cafe .c-section--wide,
.p-sweets .c-section--wide,
.p-decoration .c-section--wide,
.p-access .c-section--wide {
    margin-left: 0;
    margin-right: 0;
}

/* ごあいさつ本文：長文の可読性優先（中央寄せ・読みやすい行長） */
.p-about__lead {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.p-about__lead p {
    font-size: 1.6rem;
    line-height: 2.1;
    color: var(--fc);
    margin: 0 0 1.4em;
}
.p-about__lead p:last-child {
    margin-bottom: 0;
}
/* シェフの署名 */
.p-about__sign {
    margin: 32px 0 0;
    text-align: center;
    line-height: 1.6;
}
.p-about__sign-role {
    display: block;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: var(--sc);
}
.p-about__sign-name {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--kc);
}

/* 特集ブロック（材料へのこだわり／カフェ）：画像＋テキスト */
.p-about__feat-en {
    font-family: "Parisienne", cursive;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--sc);
    margin: 0 0 4px;
}
.p-about__feat-ttl {
    color: var(--kc);
    margin: 0 0 20px;
}
.p-about__feat-read {
    font-size: 1.5rem;
    line-height: 2;
    color: var(--fc);
    margin: 0 0 1.2em;
}
.p-about__feat-read:last-of-type {
    margin-bottom: 0;
}
.p-about__feat .p-menu__btn {
    margin-top: 20px;
}

/* メニュー導線カード（about / access / decoration / sweets の「その他のご案内」「ロアジスの商品」）
   ------------------------------------------------------------
   元は display:block だけで枠も背景もボタンも無く、画像＋文字にしか見えなかった
   ＝「押せる」手がかり（シグニファイア）がゼロ。さらにマークアップの
   <a class="p-about__nav c-hover --flash"> は、style.css 側の定義が
   `.c-hover.--flash .c-hover__link:hover .c-hover__target` で
   子孫の .c-hover__link を要求するため一致せず、フラッシュも発火していなかった。
   ここでカード化＋ボタン＋ホバーを与える。HTMLは変更せず、ボタンは ::after で生成。 */
.p-about__nav {
    display: flex;
    flex-direction: column;
    height: 100%; /* .row の stretch を受けてカード高さを揃える */
    padding: 16px 16px 24px;
    background-color: #fff;
    border: 1px solid rgba(160, 123, 63, 0.35);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(74, 53, 38, 0.06);
    text-decoration: none;
    text-align: center;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.p-about__nav:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(74, 53, 38, 0.16);
    border-color: var(--sc);
}

/* 写真：死んでいた --flash の代わりにホバーで軽くズーム
   ※ style.css の .c-image は flex:0 0 100% を持つ。親を flex-direction:column に
   　 したことで flex-basis:100% が「高さ」として効き、写真がカード全高まで
   　 膨らんでしまうため flex を打ち消す。 */
.p-about__nav .c-image {
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
}
.p-about__nav .c-image__src {
    transition: transform 0.4s ease;
}
.p-about__nav:hover .c-image__src {
    transform: scale(1.06);
}

.p-about__nav-en {
    font-family: "Parisienne", cursive;
    font-size: 2rem;
    line-height: 1;
    color: var(--sc);
    margin: 0 0 2px;
}
.p-about__nav-ttl {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kc);
    margin-bottom: 16px; /* ボタンとの最小間隔を確保 */
}

/* ボタン：既存の .p-menu__btn と同じ言語（#6b5848・矢印クリップ・ホバーでワインレッド）
   margin-top:auto で常にカード下端へ寄せる＝文字数が違ってもボタン位置が揃う */
.p-about__nav::after {
    content: "詳しく見る";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: auto;
    padding: 9px 30px 9px 22px;
    background-color: #6b5848;
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    -webkit-clip-path: polygon(
        0 0,
        calc(100% - 13px) 0,
        100% 50%,
        calc(100% - 13px) 100%,
        0 100%
    );
    clip-path: polygon(
        0 0,
        calc(100% - 13px) 0,
        100% 50%,
        calc(100% - 13px) 100%,
        0 100%
    );
    transition: background-color 0.3s ease;
}
.p-about__nav:hover::after {
    background-color: var(--ac);
}

/* ロアジスの約束（Our Promise）：アイコン付き4カード */
.p-about__promise {
    text-align: center;
}
.p-about__promise-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #e8cd9f 0%, #d8b15e 55%, #c99a4e 100%);
    color: #fff;
    font-size: 2.8rem;
    box-shadow: 0 10px 24px rgba(74, 53, 38, 0.22);
}
.p-about__promise-icon i {
    line-height: 1;
}
.p-about__promise-ttl {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--kc);
    margin: 0 0 8px;
}
.p-about__promise-read {
    font-size: 1.35rem;
    line-height: 1.9;
    color: var(--fc);
    margin: 0;
}
/* 本文のみ左寄せ。中央揃えの複数行テキストは行頭が毎行ずれて読みにくいため。
   アイコンと見出しは1行で視覚的な軸になるので中央のままにする。
   ※ .p-about でスコープするのは、店舗案内（page/access.php）でも同じカードを
   　 流用しており、あちらは中央揃えのままにしておきたいため。 */
.p-about .p-about__promise-read {
    text-align: left;
}

/* 特集ブロック（.p-about__feat）の本文を左寄せ。
   　・about  ：材料へのこだわり／お客様に喜んでいただく為に
   　・cafe   ：季節のパフェ／アフタヌーンティー
   　・sweets ：焼き菓子・ギフト
   このテーマは style.css の body に text-align:center が効いており、各所で
   個別に打ち消す作りになっているため、ここでも明示的に left を指定する。
   英字ラベルと見出しは中央のまま（＝指定なし）。

   ページ単位ではなく「.p-about__feat の中だけ」に限定するのが要点。
   同じ .p-about__feat-read でも、見出し直下のリード文（sweets ご予約・
   お取り置き／decoration ご予約・特注／access 店舗案内）は .p-about__feat の
   外に置かれているため対象にならず、中央寄せのまま残る。
   cafe「くつろぎの空間」も .p-cafe__gallery-body 配下なので、ここでは対象外。
   （PCは <br> で改行位置を決めた中央寄せ。スマホのみ左寄せにしており、
   　その指定は下部の .p-cafe__gallery-body 側のSPメディアクエリにある） */
.p-about__feat .p-about__feat-read {
    text-align: left;
}

@media (max-width: 991px) {
    /* 導線カードの見出し（カフェ／スイーツ／デコレーションケーキ 等）。
       このカードはスマホで col-12＝全幅になるのに、見出しは 1.6rem（16px）のまま
       SP用の指定が無かった。カード全体がタップ領域で、この見出しがその行き先を
       示す唯一のラベルなので、全幅に見合う大きさまで上げる。
       ※ ページ単位でスコープしない。about だけでなく access／decoration／sweets の
       　「その他のご案内」でも同じカードを使っており（計12箇所）、スマホで小さいまま
       　という同じ問題を抱えているため、コンポーネント側で直す。 */
    .p-about__nav-ttl {
        font-size: 2rem;
    }
    .p-about__lead p {
        font-size: 1.4rem;
        line-height: 2;
        text-align: left;
    }
    .p-about__feat {
        margin-top: 20px;
    }
    .p-about__feat-en {
        font-size: 2.2rem;
    }
    .p-about__feat-read {
        font-size: 1.4rem;
    }
    .p-about__promise-icon {
        width: 68px;
        height: 68px;
        font-size: 2.2rem;
    }
    .p-about__promise-ttl {
        font-size: 1.5rem;
    }
    .p-about__promise-read {
        font-size: 1.25rem;
    }
}

/* ============================================================
   下層：カフェ（page/cafe.php）
   トップと同じ .p-top ブランドテーマを継承。
   ・ごあいさつ／特集は about と共通の .p-about__lead / .p-about__feat* を流用
   ・ここでは cafe 固有の「予約ノート」「メニュー項目」だけ追記
   ============================================================ */
/* アフタヌーンティーの予約・料金ノート（クリームの囲み） */
.p-cafe__note {
    margin-top: 20px;
    padding: 20px 24px;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(107, 79, 58, 0.22);
    border-radius: 8px;
}
.p-cafe__note-price {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kc);
}
.p-cafe__note-price strong {
    font-size: 2rem;
    color: var(--ac);
}
.p-cafe__note-price small {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--fc);
}

/* 電話番号：タップして発信できるリンク（sweets／decoration の「ご予約」ブロック）
   ------------------------------------------------------------
   ヘッダーと同じ <a href="tel:"> 方式。テーマには data-action="call" 方式もあるが
   JS実装が見当たらないため、実績のある素のリンクに揃える。番号は ACF の
   tel_contact（＝ヘッダーと同一の値）を参照し、表示と発信先がズレないようにする。
   ※ .p-cafe__note-price は cafe.php ではアフタヌーンティーの「料金」表示にも
   　 使われている。リンク化は必ずこのクラスにスコープし、料金を巻き込まないこと。
   ※ .p-cafe__note-price strong{color:var(--ac)} と詳細度が並ぶため、
   　 打ち消し側は .p-cafe__note-price を前置して確実に上書きする。 */
.p-cafe__note-tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid rgba(138, 47, 61, 0.35);
    border-radius: 50rem;
    color: var(--ac);
    text-decoration: none;
    vertical-align: middle;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}
.p-cafe__note-price .p-cafe__note-tel strong {
    color: inherit;
}
.p-cafe__note-tel i {
    font-size: 1.4rem;
}
.p-cafe__note-tel:hover,
.p-cafe__note-tel:focus-visible {
    background-color: var(--ac);
    border-color: var(--ac);
    color: #fff;
}
/* 箇条書きは必ず左寄せ。body の text-align:center（style.css）が効いたままだと
   ディスクの行頭記号は左端に固定されるのに文字だけが中央に寄ってしまい、
   記号と文章が分離して「どこから読む行なのか」が分からなくなる。
   ※ ここはページ単位でスコープしない。cafe／sweets／decoration の3ページとも
   　 同じ「注意書きリスト」で同じ崩れ方をしており、中央寄せが正しい場面が
   　 そもそも無いため、コンポーネント側の不具合として直す。 */
.p-cafe__note-list {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
    text-align: left;
}
.p-cafe__note-list li {
    font-size: 1.3rem;
    line-height: 1.9;
    color: var(--fc);
    margin-bottom: 6px;
}
.p-cafe__note-list li:last-child {
    margin-bottom: 0;
}

/* ブランチのメニュー項目カード */
.p-cafe__item {
    text-align: center;
}
.p-cafe__item-ttl {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--kc);
    margin: 0 0 8px;
}
.p-cafe__item-desc {
    font-size: 1.35rem;
    line-height: 1.9;
    color: var(--fc);
    margin: 0 0 10px;
}
/* 商品カードの説明文を左寄せ（商品名は中央のまま）。
   　・sweets     ：おすすめ商品の3カード
   　・decoration ：商品一覧の12カード
   body の text-align:center（style.css）を打ち消す指定。
   ※ .p-cafe__item-desc はカフェのブランチ2カードでも流用しており、
   　 あちらは中央揃えのままにしておくためページ単位でスコープする。 */
.p-sweets .p-cafe__item-desc,
.p-decoration .p-cafe__item-desc {
    text-align: left;
}
.p-cafe__item-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ac);
    margin: 0;
}
.p-cafe__item-price small {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--fc);
}

/* ブランチ下部の注意書き */
.p-cafe__note-sub {
    font-size: 1.25rem;
    line-height: 1.9;
    color: var(--fc);
    margin: 0;
}

@media (max-width: 991px) {
    .p-cafe__note-price {
        font-size: 1.35rem;
    }
    .p-cafe__note-price strong {
        font-size: 1.7rem;
    }
    .p-cafe__item-ttl {
        font-size: 1.6rem;
    }
    .p-cafe__item-desc {
        font-size: 1.25rem;
    }
}

/* カフェ「くつろぎの空間」：雑誌風・大小オフセットのフォトギャラリー */
.p-cafe__gallery {
    position: relative;
    padding-bottom: 12%; /* 小写真の下方向オフセット分の余白を確保 */
}
.p-cafe__gallery-main {
    width: 86%; /* 右に小写真をずらして重ねる余地を残す */
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(74, 53, 38, 0.18);
}
.p-cafe__gallery-sub {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    margin: 0;
    border: 6px solid #fff; /* 白フチで大写真から分離 */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(74, 53, 38, 0.22);
    z-index: 2;
}
/* 写真のホバー：ゆっくりズーム */
.p-cafe__gallery-main .c-image__src,
.p-cafe__gallery-sub .c-image__src {
    transition: transform 0.6s ease;
}
.p-cafe__gallery-main:hover .c-image__src,
.p-cafe__gallery-sub:hover .c-image__src {
    transform: scale(1.06);
}
/* テキスト側の余白（PCは写真とバランス、SPは上に間隔） */
.p-cafe__gallery-body {
    padding-left: 4%;
}

@media (max-width: 991px) {
    .p-cafe__gallery {
        padding-bottom: 14%;
        margin-bottom: 8px;
    }
    .p-cafe__gallery-body {
        padding-left: 0;
        margin-top: 24px;
        text-align: center;
    }
    /* 本文だけ左寄せ（英字ラベルと見出しは上の text-align:center のまま）。
       スマホは幅が狭く、この段落は <br> の位置に関係なく折り返しが起きるため、
       中央寄せのままだと行頭が毎行ずれて読みにくい。 */
    .p-cafe__gallery-body .p-about__feat-read {
        text-align: left;
    }
}

/* ============================================================
   カフェ「カフェ ド ロアジス」：白い角丸カード＋ドット区切り＋
   周囲にケーキ/カフェのイラストを散らす（参照デザイン）
   ============================================================ */
.p-cafe__about {
    position: relative;
    overflow: hidden; /* 端に散らした装飾で横スクロールを出さない */
}
/* 白い角丸カード（本文） */
.p-cafe__about-card {
    position: relative;
    z-index: 2; /* 装飾(1)より前面 */
    max-width: 760px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 48px rgba(74, 53, 38, 0.12);
    padding: 52px 44px;
}
/* ドット区切りの各行 */
.p-cafe__about-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.p-cafe__about-lines li {
    font-size: 1.55rem;
    line-height: 1.9;
    color: var(--fc);
    padding: 16px 4px;
    border-bottom: 1px dotted rgba(107, 79, 58, 0.4);
}
.p-cafe__about-lines li:first-child {
    padding-top: 0;
}
.p-cafe__about-lines li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 装飾イラスト：参照デザインに倣い、下部の左右にクラスターで集め、
   カードの角に「前面」で重ねる（クリック不可・スクロールでふわっと出現＝.fly-in） */
.p-cafe__deco {
    position: absolute;
    /* .c-section>* が z-index:20（.container=カード側）になるため、
       それより上の 25 にして文章カードの前面に重ねる */
    z-index: 25;
    pointer-events: none;
    width: clamp(72px, 8vw, 124px);
    height: auto;
    filter: drop-shadow(0 10px 16px rgba(74, 53, 38, 0.2));
    animation: pmenuFloat 6s ease-in-out infinite; /* index の装飾と同じ浮遊 */
}
/* カード端に重ねる基準：カード(max-width 760px)の左右端は calc(50% ± 380px)。
   その端をまたぐように配置＝文章カードの上に前面で重なる。
   外側の縁は少しずつずらして自然な散らし方に。 */
/* ケーキ4点を左右2点ずつ（各：上＝外寄り／下＝内寄りの対角）でバランス配置。
   ※ strawberrycake（旧 deco--1）は削除。 */
/* 左（上・下） */
.p-cafe__deco--5 { left: calc(50% - 448px); bottom: 42%; animation-delay: 1s; } /* chocolatecake（左上・外寄り） */
.p-cafe__deco--2 { left: calc(50% - 400px); bottom: 6%; animation-delay: 0.6s; } /* shortcake（左下・内寄り・角に重ね） */
/* 右（上・下） */
.p-cafe__deco--6 { right: calc(50% - 448px); bottom: 42%; animation-delay: 0.8s; } /* fruitcake（右上・外寄り） */
.p-cafe__deco--4 { right: calc(50% - 400px); bottom: 6%; animation-delay: 0.4s; } /* fruittart（右下・内寄り・角に重ね） */
/* カフェページ限定：下段2点（blackcoffee／juce）はカップが小ぶりなので一段小さく。
   ※ --2/--4 はスイーツ・デコレーションのページでも使い回すため .p-cafe でスコープする */
.p-cafe .p-cafe__deco--2,
.p-cafe .p-cafe__deco--4 {
    width: clamp(56px, 6vw, 92px);
}
/* 下・中央：cafe をカード下辺の中央に前面で重ねる（centerpiece・少し大きめ）。
   ※ bottom は正の値に（負値だと親の overflow:hidden でクリップされ見えない） */
.p-cafe__deco--3 {
    left: 0;
    right: 0;
    margin: 0 auto; /* 絶対配置＋左右0＋margin auto で水平中央 */
    bottom: 0; /* いちばん下へ（負値だと overflow:hidden でクリップされるため 0 が下限） */
    width: clamp(130px, 15vw, 210px);
    animation-delay: 1.2s;
}

@media (max-width: 991px) {
    /* 左右の余白を詰めて本文の幅を稼ぐ（下の「1行に収める」ための原資） */
    .p-cafe__about-card {
        padding: 34px 16px;
    }
    /* スマホでも各行を1行に収めるための文字サイズ。
       最長は「季節のパフェ・アフタヌーンティー・ブランチまで。」の24文字で、
       固定 1.32rem（13.2px）だと 24×13.2＝317px 必要になり、375px 端末で
       使える約295px を超えて折り返していた。
       画面幅に比例させて、狭い端末ほど自動で収まるようにする（vw基準）。
       上限 1.35rem は従来サイズ相当、下限 1.05rem は可読性の下限。
       ※ white-space:nowrap は使わない。収まらない端末でハミ出す（＝壊れる）より、
       　 折り返してくれた方が安全なため。 */
    .p-cafe__about-lines li {
        font-size: clamp(1.05rem, 3.3vw, 1.35rem);
        line-height: 1.8;
        padding: 12px 2px;
    }
    /* スマホ：左右の角に2点＋cafe は下中央（中段2点は非表示） */
    .p-cafe__deco {
        width: 56px;
    }
    .p-cafe__deco--5,
    .p-cafe__deco--6 {
        display: none;
    }
    .p-cafe__deco--2 { left: -6px; bottom: 3%; }
    .p-cafe__deco--4 { right: -6px; bottom: 3%; }
    /* カフェページ限定：スマホでも下段2点を一段小さく */
    .p-cafe .p-cafe__deco--2,
    .p-cafe .p-cafe__deco--4 {
        width: 44px;
    }
    .p-cafe__deco--3 {
        bottom: 0;
        width: clamp(96px, 24vw, 132px);
    }
}

/* ============================================================
   デコレーションケーキ（decoration）
   ============================================================ */
/* サイズ別の価格リスト：商品カード（.p-cafe__item）内に置く。
   サイズ＝左／価格＝右の対で、ブランドのドット区切り罫線に揃える。
   地色はクリーム／ベージュどちらのセクションでも成立する白の透過。 */
.p-decoration__size {
    list-style: none;
    margin: 14px 0 0;
    padding: 10px 16px;
    background-color: rgba(255, 255, 255, 0.66);
    border-radius: 10px;
    text-align: left;
}
.p-decoration__size li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 2px;
    border-bottom: 1px dotted rgba(107, 79, 58, 0.35);
}
.p-decoration__size li:last-child {
    border-bottom: none;
}
.p-decoration__size-label {
    font-size: 1.3rem;
    color: var(--fc);
    white-space: nowrap;
}
.p-decoration__size-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ac);
    white-space: nowrap;
}
.p-decoration__size-price small {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--fc);
    margin-left: 4px;
}

/* 料金表の上端を揃える
   ------------------------------------------------------------
   料金表の上には「画像 → 商品名 → 説明文」が積まれる。画像は --16 の
   アスペクト比で高さが一定なので、商品名（1〜2行）と説明文（2〜3行）の
   行数のばらつきだけが料金表の位置をずらしていた。両方の高さを最大行数で
   固定して、白いボックスの上辺を横一直線に揃える。

   ・min-height は px ではなく em。説明文の font-size は 991px 以下で
   　1.35rem → 1.25rem に変わるが、em なら「◯行分」の意味が保たれる。
   ・行数 × line-height で算出：
   　　商品名 = 1.2（style.css の h3 既定）× 2行 = 2.4em
   　　説明文 = 1.9（上の .p-cafe__item-desc）× 3行 = 5.7em
   ・md 以上に限定するのは、sp（col-12）は1列＝縦積みでそもそも揃える対象が
   　隣に無く、min-height を効かせると余白が増えるだけになるため。 */
@media (min-width: 768px) {
    .p-decoration .p-cafe__item-ttl {
        min-height: 2.4em;
    }
    .p-decoration .p-cafe__item-desc {
        min-height: 5.7em;
    }
}

@media (max-width: 991px) {
    .p-decoration__size {
        padding: 8px 12px;
    }
    .p-decoration__size-label {
        font-size: 1.2rem;
    }
    .p-decoration__size-price {
        font-size: 1.35rem;
    }
    .p-decoration__size-price small {
        font-size: 1.05rem;
    }
}

/* ============================================================
   よくある質問（archive-faq）
   ============================================================ */
/* テーマ既定の .c-faq__item は角丸6px・影なしで、他の下層ページの
   白カード（角丸20px＋ブラウンの影）と質感が揃わないため .p-faq で上書き */
.p-faq .c-faq__item {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(74, 53, 38, 0.1);
    margin-bottom: 20px;
    padding: 8px 32px;
}
.p-faq .c-faq__item-ttl {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--kc);
}
.p-faq .c-faq__item-body {
    font-size: 1.5rem;
}
.p-faq .c-faq__item-body-txt {
    padding: 4px 0 12px;
    line-height: 1.9;
    color: var(--fc);
    border-top: 1px dotted rgba(107, 79, 58, 0.4);
    margin-top: 12px;
    padding-top: 16px;
}

@media (max-width: 991px) {
    .p-faq .c-faq__item {
        border-radius: 12px;
        padding: 6px 18px;
        margin-bottom: 14px;
    }
    .p-faq .c-faq__item-ttl {
        font-size: 1.6rem;
    }
    .p-faq .c-faq__item-body {
        font-size: 1.35rem;
    }
}

/* ============================================================
   店舗案内（access）
   ============================================================ */
/* 店舗概要テーブル：テーマの .c-table は --color:#666（グレー）と
   旧ブランドの --kc-rgb/--sc-rgb を参照するため、.p-access で
   ブランド色に差し替える（.p-top では -rgb 系を定義していないため）。
   白カードに載せる前提で、テーブル自身の padding:40px も解除。 */
.p-access .c-table {
    --color: var(--fc);
    padding: 0;
}
.p-access .c-table th {
    width: 26%;
    background-color: rgba(107, 79, 58, 0.05);
    border-bottom: 1px solid rgba(160, 123, 63, 0.22);
    color: var(--kc);
}
.p-access .c-table td {
    border-bottom: 1px solid rgba(107, 79, 58, 0.1);
    line-height: 1.9;
}
.p-access .c-table tr:last-child th,
.p-access .c-table tr:last-child td {
    border-bottom: none;
}
.p-access .c-table small {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.8;
    color: rgba(74, 59, 50, 0.8);
}
.p-access .c-table a {
    color: var(--ac);
    font-weight: 700;
}
/* テーブルを載せる白カード（他ページの .p-cafe__about-card と同じ質感） */
.p-access__card {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 48px rgba(74, 53, 38, 0.12);
    padding: 32px 40px;
}

@media (max-width: 991px) {
    .p-access__card {
        padding: 12px 16px;
    }
    /* スマホ：th/td を縦積みにして、狭い幅でも住所や営業時間が潰れないように */
    .p-access .c-table th,
    .p-access .c-table td {
        display: block;
        width: 100%;
        padding: 12px 8px;
    }
    .p-access .c-table th {
        background-color: transparent;
        border-bottom: none;
        padding-bottom: 0;
        font-size: 1.3rem;
        color: var(--sc);
    }
}

/* ============================================================
   サイトマップ（page/sitemap.php）
   ------------------------------------------------------------
   style.css の .c-sitemap は背景 #f8e694（淡い黄）・罫線／アイコン #623F2A が
   ベタ書きで、CSS変数を経由していない。そのため #contents に .p-top を付けて
   ブランド変数を流し込んでも、このボタンだけ旧テンプレの色が残る。
   ここで明示的にロアジスの配色へ置き換える。
   ============================================================ */
.p-top .c-sitemap .nav-item a {
    background-color: #f3e2bd; /* クリーム（.p-sec--beige と同系） */
    border-color: var(--sc); /* ゴールドブラウン */
    color: var(--kc);
}
.p-top .c-sitemap .nav-item a:hover {
    background-color: #fff;
    color: var(--kc);
}
.p-top .c-sitemap .nav-item a .c-btn-simple__icon,
.p-top .c-sitemap .nav-item a i {
    color: var(--sc);
}
.p-top .c-sitemap .nav-item a:hover .c-btn-simple__icon,
.p-top .c-sitemap .nav-item a:hover i {
    color: var(--kc);
}

/* ============================================================
   お問い合わせフォーム（page/contact.php ／ MW WP Form）
   ------------------------------------------------------------
   フォームのHTMLは the_content()＝WP管理画面の投稿本文から出力されるため、
   テンプレート側では触れない。整形はすべてここで行う。
   Bootstrap のユーティリティ（.mb-3 等）を上書きする箇所のみ !important。
   ============================================================ */

/* --- 1) 二重ガターの打ち消し ---
   各項目の <div class="col-12"> に親の .row が無く、.container のガター
   （--bs-gutter-x）をそのまま継承して左右パディングを二重取りしていた。
   結果、見出し「お問い合わせ」より入力欄だけが内側にズレていた。
   --- 2) 項目間の余白（ゲシュタルトの近接性）---
   ラベル〜入力欄=0.5rem に対し項目間が .mb-3=1rem しかなく、どのラベルが
   どの入力欄のものか読み取りづらい。項目間を広げてグループを分離する。 */
.p-contact .mw_wp_form .col-12 {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1.75rem !important;
}

/* --- 3) ラベル〜入力欄の余白を全項目で統一 ---
   <label><br><input> 型（会社名・お名前・ふりがな・住所・お問い合わせ内容）と
   <p><label></p>+<input> 型（郵便番号・電話番号・メールアドレス）が混在し、
   後者だけ <p> の margin-bottom:1rem が上乗せされて隙間が倍近くあった。 */
.p-contact .mw_wp_form .col-12 > p {
    margin-bottom: 0;
}
.p-contact .mw_wp_form .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--kc);
}
.p-contact .mw_wp_form .form-label + br {
    display: none;
} /* <br> 由来の余分な行送りを消す */

/* --- 4) 入力欄を広く ---
   style.css の .form-control{min-height:calc(1.5em + 0.75rem + 2px)} は約38px で、
   推奨タップ領域 44px を下回る（Fitts の法則／Apple HIG 44pt／WCAG 2.5.8）。 */
.p-contact .mw_wp_form .form-control {
    min-height: 52px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    line-height: 1.6;
    background-color: #fff;
    border: 1px solid #d9c7a8;
    border-radius: 8px;
}
.p-contact .mw_wp_form .form-control::placeholder {
    color: #b5a894;
}
.p-contact .mw_wp_form .form-control:focus {
    outline: none;
    border-color: var(--sc);
    box-shadow: 0 0 0 3px rgba(160, 123, 63, 0.18);
}
.p-contact .mw_wp_form textarea.form-control {
    min-height: 200px;
}

/* --- 5) 郵便番号の「〒」崩れ ---
   <span class="input-group-text"> に .input-group の親が無く、
   .input-group-text{display:flex} がブロック扱いになってグレーの帯が全幅に伸び、
   入力欄が下段へ落ちていた。親の <p> をフレックスにして横並びに戻し、
   電話／メールのアイコンと同じ「前置き記号」の見た目へ揃える。 */
.p-contact .mw_wp_form .col-12 > p:has(> .input-group-text) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.p-contact .mw_wp_form .input-group-text {
    flex: 0 0 auto;
    padding: 0;
    font-size: 1.1rem;
    background: none;
    border: 0;
    color: var(--sc);
}
.p-contact .mw_wp_form .input-group {
    align-items: center;
    gap: 0.6rem;
}
.p-contact .mw_wp_form .input-group > i {
    flex: 0 0 1.2em;
    text-align: center;
    color: var(--sc);
}
/* .input-group>:not(:first-child) はアドオン結合用に入力欄を -1px ずらして
   左角の角丸を潰す。前置きアイコンには不要なので戻す。 */
.p-contact .mw_wp_form .input-group > .form-control {
    margin-left: 0;
    border-radius: 8px;
}

/* --- 6) フォーム冒頭の空段落 <p>&nbsp;</p> による死に余白 ---
   入力画面（.mw_wp_form_input）のみ対象。確認画面の段落は隠さない。 */
.p-contact .mw_wp_form_input form > p:first-child {
    display: none;
}

/* --- 7) 注意書き〜個人情報保護方針の余白 ---
   Bootstrap の Reboot が見出しの margin-top を 0 にするため、
   「ご注意：＊は入力必須項目です」に見出しが密着していた。 */
.p-contact .mw_wp_form .text-danger {
    text-align: left;
}
.p-contact .mw_wp_form form > h3 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    text-align: left;
    color: var(--kc);
}
.p-contact .mw_wp_form .c-scrollbox h3 {
    margin-top: 1.5rem;
    font-size: 1.05rem;
    color: var(--kc);
}

/* --- 8) 同意チェックボックス：ラベルごとタップ領域にする（Fitts の法則）--- */
.p-contact .mw_wp_form .mwform-checkbox-field label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px;
    cursor: pointer;
}
.p-contact .mw_wp_form .mwform-checkbox-field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--kc);
}

/* --- 9) 送信ボタン ---
   .btn-dark（#212529）は旧テンプレのまま。ロアジスの木目ブラウンへ。
   全幅の .d-grid だと PC で間延びするため最大幅を与えて中央寄せ。 */
.p-contact .mw_wp_form .d-grid {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.p-contact .mw_wp_form input[type="submit"] {
    min-height: 56px;
    padding: 1rem 2rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    background-color: var(--kc);
    border: 1px solid var(--kc);
    border-radius: 50rem;
    color: #fff;
}
.p-contact .mw_wp_form input[type="submit"]:hover {
    background-color: var(--sc);
    border-color: var(--sc);
    color: #fff;
}

/* --- 10) バリデーションエラー（MW WP Form の .error）--- */
.p-contact .mw_wp_form .error {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    text-align: left;
    color: #c0392b;
}

/* --- 11) .g-form 由来の旧ブランド青（style.css）をロアジス配色へ ---
   WP管理画面でフォームが <div class="g-form"> 包みの table レイアウトに
   差し替わったことで、これまで空振りしていた style.css の .g-form 一式が
   有効になり、青（#4d90fe／#2570f9）が表に出るようになった。 */

/* 入力欄のフォーカス：#4d90fe（青）→ ゴールドブラウン */
.p-contact .g-form input:focus,
.p-contact .g-form select:focus,
.p-contact .g-form textarea:focus {
    border: 1px solid #a07b3f;
    box-shadow: 0 0 0 3px rgba(160, 123, 63, 0.18);
}

/* 同意チェックボックス：チェック時 #2570f9（青）→ 木目ブラウン */
.p-contact .g-form input[type="checkbox"]:checked + span {
    background: #6b4f3a;
    border-color: #6b4f3a;
}
.p-contact .g-form input[type="checkbox"]:checked + span:before {
    border-color: #6b4f3a;
}

/* ============================================================
   CTA：左＝電話・お問い合わせ ／ 右＝営業カレンダー
   XO Event Calendar をロアジスのダークブラウン×ゴールドに馴染ませる
   ============================================================ */
/* 2カラム化に伴い、左カラムはPCで左揃え（SPは従来どおり中央） */
.p-cta__left {
    text-align: left;
}
@media (max-width: 991px) {
    .p-cta__left {
        text-align: center;
    }
}

/* カレンダーを白カードにしてダーク背景から浮かせる */
.p-cta__calendar {
    background: #fff;
    border-radius: 12px;
    padding: 20px 18px 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.p-cta__calendar-ttl {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #4a3526;
    text-align: center;
    margin: 0 0 14px;
}
/* 凡例（プラグイン出力。定休日の名称・色と自動で連動する） */
.p-cta__calendar .holiday-titles {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 12px 0 0;
}
.p-cta__calendar .holiday-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    color: #6e564c;
    margin: 0;
}
.p-cta__calendar .holiday-title span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* --- カレンダー本体 --- */
.p-cta__calendar .xo-event-calendar {
    max-width: 100%;
    margin: 0 auto;
}
.p-cta__calendar .xo-month {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
/* 月ヘッダー（前月・翌月ナビ） */
.p-cta__calendar .month-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 10px;
    background: #faf6ee;
    border-radius: 6px;
}
.p-cta__calendar .calendar-caption {
    font-size: 1.7rem;
    font-weight: 700;
    color: #4a3526;
    letter-spacing: 0.06em;
}
.p-cta__calendar .month-prev,
.p-cta__calendar .month-next {
    background: transparent;
    border: 1px solid #d8b15e;
    color: #a8813a;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    font-size: 1.1rem;
    transition: background 0.25s ease, color 0.25s ease;
}
.p-cta__calendar .month-prev:hover,
.p-cta__calendar .month-next:hover {
    background: #d8b15e;
    color: #fff;
}
/* 曜日見出し */
.p-cta__calendar .xo-month thead th {
    padding: 9px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #8a6b3f;
    border-bottom: 2px solid #e6d3ab;
    background: #fdfaf4;
}
.p-cta__calendar .xo-month thead th.sunday {
    color: #b9636f;
}
.p-cta__calendar .xo-month thead th.saturday {
    color: #7b8fae;
}
/* 日セル */
.p-cta__calendar .xo-month td {
    border: 1px solid rgba(74, 53, 38, 0.12);
    vertical-align: top;
    padding: 0;
    text-align: center;
}
.p-cta__calendar .month-dayname td {
    border: none;
    padding: 7px 0 5px;
    font-size: 1.3rem;
    color: #4a3526;
}
.p-cta__calendar .month-dayname .other-month {
    color: #c9c4bb;
}
.p-cta__calendar .month-week {
    padding: 0 !important;
}
.p-cta__calendar .month-dayname-space,
.p-cta__calendar .month-event-space {
    min-height: 4px;
}
/* 今日 */
.p-cta__calendar .today {
    background: #f6efe1;
    font-weight: 700;
}
/* 定休日セル（背景色はプラグイン設定のインラインstyleで入る） */
.p-cta__calendar .month-dayname div[class^="holiday-"],
.p-cta__calendar .month-dayname div[class*=" holiday-"] {
    color: #4a3526;
    font-weight: 700;
    border-radius: 4px;
    margin: 0 4px;
}

@media (max-width: 991px) {
    .p-cta__calendar {
        max-width: 460px;
        margin: 0 auto;
    }
}

/* ============================================================
   お問い合わせフォーム：写真の添付欄
   テーマ標準(style.css)は `.g-form input[type="file"]` を display:none にし、
   #upload_file_name を使う独自UIに差し替える前提になっているが、
   その仕組み（マークアップ・JS）は用意されていないためボタンが消えてしまう。
   ここでネイティブのファイル選択を表示して使えるようにする。
   ============================================================ */
.g-form input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    margin: 0 0 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #444;
    cursor: pointer;
}
.g-form input[type="file"]:last-of-type {
    margin-bottom: 4px;
}
/* 「ファイルを選択」ボタン部分をサイトのゴールドに寄せる */
.g-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 16px;
    background: #faf6ee;
    border: 1px solid #d8b15e;
    border-radius: 4px;
    color: #8a6b3f;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.g-form input[type="file"]::file-selector-button:hover {
    background: #d8b15e;
    color: #fff;
}

/* 項目の補足説明 */
.g-form .c-form-note {
    display: block;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #777;
    margin-top: 2px;
}