@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 → 茶 #a07b3f から）
   買取店の「必要なもの」ボックス（.p-kt-needs__box）と同じ黄破線に揃える。
   変数フォールバック（.p-kt/.p-top が外れると青に戻る）を避け直値で指定。 */
.p-contact .g-form {
    border: 2px dashed #ffce4a;
}

/* サイトマップ */
.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）を薄くする */
.c-visual .c-image .c-image__src {
    opacity: 0.85;
    position: relative; /* 下の色オーバーレイ(::before)の基準 */
    -webkit-filter: blur(1px);
    filter: blur(1px);
}
/* メインビジュアル：写真に暖色ブラウンを重ねて暗く（ロゴの視認性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) */
        background-position: center center !important; /* 写真の中央を表示 */
    }
}

/* メインビジュアル：ロゴをど真ん中＋最前面に配置（暗くするのは写真側の色オーバーレイで対応） */
.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: 124px;
}
/* ロゴ見出し(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: 82px;
    }
    #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; /* 帯を高くすると文字が上に張り付くため上下中央へ */
    /* ヘッダーは position:fixed で帯の上端に覆いかぶさる。align-items:center は
       帯の「幾何学的な中央」に置くため、ヘッダーに隠れる上端ぶんだけタイトルが
       上に寄って見える。上パディングでヘッダーの高さ相当を空け、実際に見えている
       範囲（ヘッダーより下）の中央にタイトルが来るようにする。 */
    padding-top: 72px; /* ≒ SPヘッダーの高さ */
    padding-bottom: 0;
}
.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;
        padding-top: 116px; /* ≒ PC（2段）ヘッダーの高さ */
    }
}

/* 写真の上のブラウンのベール。旧マークアップにはベール用の要素が無いため
   .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;
}

/* 買取実績アーカイブ（archive-case.php）のページ内見出しを中央寄せに。
   .c-headline-compact は既定で display:flex + justify-content:space-between の
   ため、英字「Case」が左・和文「買取実績」が右に振り分けられる。--center を
   付けたときだけ縦積みの中央寄せにする（他ページの見出しには影響しない）。 */
.c-headline-compact.c-headline-compact--center {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* 中央寄せ時は英字ラベル右の装飾線（right:-90px）がはみ出て見えるので隠す。 */
.c-headline-compact.c-headline-compact--center .c-headline-compact__ttl::after {
    content: none;
}

/* ============================================================
   下層：ロアジスについて（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,
.p-sitemap {
    overflow-x: hidden;
}
.p-about > main,
.p-cafe > main,
.p-sweets > main,
.p-decoration > main,
.p-access > main,
.p-sitemap > 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,
.p-sitemap .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 #cfd6de; /* 買取店：クールな薄グレー枠（旧・茶 #d9c7a8） */
    border-radius: 8px;
}
.p-contact .mw_wp_form .form-control::placeholder {
    color: #9aa4b0; /* 買取店：クールグレー（旧・茶 #b5a894） */
}
.p-contact .mw_wp_form .form-control:focus {
    outline: none;
    border-color: var(--sc); /* 山吹（p-kt で #f2a900） */
    box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.22); /* 黄フォーカスリング（旧・茶） */
}
.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）が表に出るようになった。
   #contents.p-kt 配下なので var(--kc)=濃紺 / var(--sc)=山吹 が効く。 */

/* 入力欄のフォーカス：#4d90fe（青）→ 山吹の枠＋黄フォーカスリング */
.p-contact .g-form input:focus,
.p-contact .g-form select:focus,
.p-contact .g-form textarea:focus {
    border: 1px solid var(--sc);
    box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.22);
}

/* 同意チェックボックス：チェック時 #2570f9（青）→ 濃紺 */
.p-contact .g-form input[type="checkbox"]:checked + span {
    background: var(--kc);
    border-color: var(--kc);
}
.p-contact .g-form input[type="checkbox"]:checked + span:before {
    border-color: var(--kc);
}

/* ============================================================
   買取専門店 宝の蔵 牛久店 ／ トップページ（.p-kt）
   ------------------------------------------------------------
   コンセプト：白と黄色を基調に、清潔感・信頼感・親しみやすさ。
   高齢の方でも読みやすい高コントラスト（濃紺テキスト＋大きめ文字）。
   このテーマは元がロアジス（洋菓子）ブランドのため、#contents に
   .p-top と .p-kt を併記し、.p-kt を「後勝ち」でブランド変数を上書き。
   ※新規クラスはすべて add.css に追加（業務ルール）。
   ============================================================ */

/* --- ブランド変数の差し替え（ロアジスのブラウン → 買取店の白×黄×濃紺） --- */
.p-kt {
    --kc: #123a63; /* 濃紺：見出し・ボタン・信頼感の主軸 */
    --kcd: #0d2c4d;
    --sc: #f2a900; /* 山吹（濃いめの黄）：英字ラベル・アクセント */
    --scd: #d99400;
    --ac: #ffc20e; /* 黄色：CTA・強調 */
    --acd: #f2a900;
    --fc: #33383f; /* 本文：ダークグレー（黒よりやわらかく高可読） */
    --link: #123a63;
    /* 明朝（ロアジス）→ ゴシックへ。買取店の清潔感・可読性を優先 */
    --ff: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    --fm: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    /* ページ背景：ロアジスの放射グラデを解除して明るい白ベースに */
    background-color: #fffdf7 !important;
    background-image: none !important;
}
.p-kt main {
    color: var(--fc);
}
/* 本文の基本文字を大きめに（高齢の方にも配慮） */
.p-kt {
    font-size: 1.6rem;
    line-height: 1.9;
}

/* セクション背景（style.css の nth-child グレーを上書き） */
.p-kt .p-kt-sec--white {
    background-color: #ffffff !important;
}
.p-kt .p-kt-sec--cream {
    background-color: #fff7db !important; /* 淡い黄 */
}
.p-kt .p-kt-sec {
    padding-top: 88px;
    padding-bottom: 88px;
}
@media (max-width: 991px) {
    .p-kt .p-kt-sec {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* 見出し（c-headline-compact を流用）：英字ラベル＝山吹／和文＝濃紺・ゴシック */
.p-kt .c-headline-compact__ttl {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--sc);
    text-transform: uppercase;
}
.p-kt .c-headline-compact__ttl::after {
    display: none;
}
.p-kt .c-headline-compact .c-headline-compact__ttl::first-letter {
    color: inherit; /* ::first-letter の差し色を打ち消し全体を山吹に */
}
.p-kt .c-headline-compact__sttl {
    color: var(--kc);
    position: relative;
    padding-bottom: 14px;
}
/* 和文見出しの下に黄色いアクセントライン */
.p-kt .c-headline-compact__sttl::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--ac);
}
@media (min-width: 992px) {
    .p-kt .c-headline-compact__ttl {
        font-size: 2rem;
    }
}

.p-kt-lead {
    margin: 16px auto 0;
    max-width: 720px;
    font-size: 1.5rem;
    line-height: 1.9;
    color: var(--fc);
}

/* --- INTRO / キャッチ --- */
.p-kt-intro {
    background-color: #fffdf7 !important;
    /* 「新店舗オープン！」背後の集中線が画面幅を超えて横スクロールを生まないよう内側で切る */
    overflow: hidden;
}
/* ヒーローの英字ラベル：淡背景で埋もれないよう黄色バッジ＋濃紺文字で強調 */
.p-kt-intro__en {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--kc);
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffe27a 0%, #ffcc00 100%);
    padding: 7px 22px;
    border-radius: 50rem;
    box-shadow: 0 6px 16px rgba(242, 169, 0, 0.35);
    margin: 0 0 16px;
}
@media (min-width: 992px) {
    .p-kt-intro__en {
        font-size: 1.8rem;
    }
}
/* 新店舗オープン訴求：フォン・レストルフ効果（孤立効果）を狙い、
   本文・見出しより一段大きい文字＋黄色のアンダーバーで周囲から浮かせる。
   h1（キャッチ）はそのまま残し、ここは見出しではなく訴求用のテキスト。 */
/* display:block にしてバッジ（inline-block）と横並びにならないよう改行させる。
   z-index:0 で重ね合わせコンテキストを作り、::before の集中線をこの要素の内側に閉じ込める。
   下線バーは親が中央寄せ（text-align:center）のため、left:50% で文字の真下に来る。 */
.p-kt-intro__open {
    position: relative;
    z-index: 0;
    display: block;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--kc);
    margin: 0 0 24px;
    padding: 0 0 14px;
}
/* 背後の集中線：中心は下地色（#fffdf7）で塗りつぶして文字の可読性を確保し、
   外側へ向かってだけ線が見えるようにしている（図と地の分化）。 */
.p-kt-intro__open::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    max-width: 132%;
    height: 240px;
    pointer-events: none;
    background-image:
        radial-gradient(
            ellipse at center,
            #fffdf7 0%,
            rgba(255, 253, 247, 0.92) 30%,
            rgba(255, 253, 247, 0) 62%
        ),
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(255, 204, 0, 0.18) 0deg 4deg,
            rgba(255, 204, 0, 0) 4deg 12deg
        );
}
/* 下線バー：きらめきと集中線があるため、バーは1本に抑えて視線の行き先を増やさない */
.p-kt-intro__open::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffe27a 0%, #ffcc00 100%);
}
/* きらめき：3つの星を時間差でチカチカさせ、共通運命の法則で見出しと1グループに見せる */
.p-kt-intro__open-sparks {
    display: block;
    line-height: 1;
    color: #ffcc00;
    margin: 0 0 10px;
}
.p-kt-intro__open-sparks i {
    /* inline のままだと transform: scale() が効かないため明示的に inline-block */
    display: inline-block;
    margin: 0 10px;
    animation: ktSparkTwinkle 2.4s ease-in-out infinite;
}
.p-kt-intro__open-sparks i:nth-child(1) {
    font-size: 1rem;
}
.p-kt-intro__open-sparks i:nth-child(2) {
    font-size: 1.6rem;
    animation-delay: 0.4s;
}
.p-kt-intro__open-sparks i:nth-child(3) {
    font-size: 1.2rem;
    animation-delay: 0.8s;
}
@keyframes ktSparkTwinkle {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.86);
    }
    50% {
        opacity: 1;
        transform: scale(1.14);
    }
}
@media (prefers-reduced-motion: reduce) {
    .p-kt-intro__open-sparks i {
        animation: none;
        opacity: 1;
    }
}
.p-kt-intro__ttl {
    color: var(--kc);
    line-height: 1.5;
    margin: 0 0 20px;
}
.p-kt-intro__mark {
    background: linear-gradient(
        transparent 62%,
        #ffe27a 62%
    ); /* 黄色マーカー */
}
/* スマホ：「その品物、まだ価値があります。」だけ一段小さく */
@media (max-width: 991px) {
    .p-kt-intro__mark {
        display: inline-block;
        font-size: 1.7rem;
        line-height: 1.6;
    }
}
.p-kt-intro__lead {
    font-size: 1.6rem;
    line-height: 2;
    color: var(--fc);
    margin: 0;
}
/* スマホ：リード文は左寄せ（中央寄せだと行頭がずれて読みにくいため） */
@media (max-width: 991px) {
    .p-kt-intro__lead {
        text-align: left;
    }
}

/* --- 汎用カード（選ばれる理由） --- */
.p-kt-card {
    height: 100%;
    background-color: #fff;
    border: 1px solid #f0e3bf;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(18, 58, 99, 0.06);
    padding: 32px 24px;
    text-align: center;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.p-kt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(18, 58, 99, 0.14);
    border-color: var(--ac);
}
.p-kt-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff0b8 0%, #ffd23f 100%);
    color: var(--kc);
    font-size: 3rem;
}
.p-kt-card__ttl {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--kc);
    margin: 0 0 10px;
}
.p-kt-card__txt {
    font-size: 1.45rem;
    line-height: 1.85;
    color: var(--fc);
    margin: 0;
    text-align: left;
}

/* --- METHOD / 買取方法 --- */
.p-kt-method__item {
    position: relative;
    height: 100%;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(18, 58, 99, 0.08);
    padding: 40px 28px 32px;
    text-align: center;
    overflow: hidden;
}
.p-kt-method__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--ac);
}
.p-kt-method__no {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--sc);
    margin-bottom: 6px;
}
.p-kt-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-color: #123a63;
    color: #ffd23f;
    font-size: 3.6rem;
}
.p-kt-method__ttl {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--kc);
    margin: 0 0 12px;
}
.p-kt-method__txt {
    font-size: 1.45rem;
    line-height: 1.9;
    color: var(--fc);
    margin: 0;
    text-align: left;
}

/* --- ITEMS / 買取品目 タイル（写真＋品目名） --- */
.p-kt-item {
    height: 100%;
    background-color: #fff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(18, 58, 99, 0.06);
    overflow: hidden; /* 写真の角丸をカードに合わせる */
    text-align: center;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.p-kt-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(18, 58, 99, 0.14);
}
/* 品目写真：正方形に近い比率で切り抜き（padding-top=高さ／幅） */
.p-kt-item__photo {
    margin: 0;
    overflow: hidden;
}
.p-kt-item__photo-src {
    width: 100%;
    padding-top: 72%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f1f3f6; /* 画像読み込み前の下地 */
    transition: transform 0.4s ease;
}
.p-kt-item:hover .p-kt-item__photo-src {
    transform: scale(1.06); /* ホバーで写真をゆっくりズーム */
}
.p-kt-item__name {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--kc);
    margin: 0;
    padding: 14px 8px;
    /* 品目名の帯：白背景に濃紺文字（写真の上でも読みやすい下部ラベル） */
    border-top: 3px solid var(--ac);
}

/* --- CAMPAIGN / 買取30%アップ --- */
.p-kt-campaign {
    background-color: #123a63 !important;
    background-image: linear-gradient(
        160deg,
        #16457a 0%,
        #0d2c4d 100%
    ) !important;
    overflow: hidden;
}
.p-kt-campaign__box {
    position: relative;
    background-color: #fff;
    border: 3px solid #ffd23f;
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
    padding: 48px 40px 40px;
    text-align: center;
}
.p-kt-campaign__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff4b45 0%, #d61c16 100%);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 12px 36px;
    border: 3px solid #fff;
    border-radius: 50rem;
    box-shadow: 0 10px 24px rgba(226, 52, 46, 0.5);
    animation: ktRibbonPulse 1.6s ease-in-out infinite;
}
@keyframes ktRibbonPulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
    }
}
@media (prefers-reduced-motion: reduce) {
    .p-kt-campaign__ribbon {
        animation: none;
    }
}
@media (min-width: 992px) {
    .p-kt-campaign__ribbon {
        font-size: 2.4rem;
        padding: 13px 44px;
    }
}
/* Grand Open Campaign：両サイドにラインを添えて大きく強調 */
.p-kt-campaign__en {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: "Montserrat", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--scd);
    text-transform: uppercase;
    margin: 12px 0 8px;
}
.p-kt-campaign__en::before,
.p-kt-campaign__en::after {
    content: "";
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.55;
}
@media (min-width: 992px) {
    .p-kt-campaign__en {
        font-size: 2.5rem;
    }
}
.p-kt-campaign__ttl {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--kc);
    margin: 0 0 18px;
}
.p-kt-campaign__term {
    display: inline-block;
    background-color: #fff7db;
    color: var(--kcd);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 8px 22px;
    border-radius: 50rem;
    margin: 0 0 24px;
}
.p-kt-campaign__term i {
    color: var(--sc);
    margin-right: 6px;
}
.p-kt-campaign__list {
    list-style: none;
    max-width: 560px;
    margin: 0 auto 20px;
    padding: 0;
}
.p-kt-campaign__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fc);
    padding: 14px 10px;
    border-bottom: 1px dashed #e6d9b3;
}
.p-kt-campaign__list li:last-child {
    border-bottom: none;
}
.p-kt-campaign__amount {
    color: #e2342e;
    font-size: 2rem;
}
/* 見出し内の「30%」は数字そのものが訴求のため、タイトルより大きく赤で抜く */
.p-kt-campaign__ttl .p-kt-campaign__amount {
    font-size: 4.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0 4px;
}
.p-kt-campaign__gift {
    color: var(--kc);
    background: linear-gradient(transparent 60%, #ffe27a 60%);
    padding: 0 4px;
}
.p-kt-campaign__limit {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    color: #e2342e;
    background: #fff6e0;
    border: 1px dashed #e2342e;
    border-radius: 6px;
    padding: 10px 16px;
    margin: 0 auto 14px;
}
.p-kt-campaign__note {
    font-size: 1.25rem;
    color: #8a8577;
    margin: 0;
}

/* --- WORKS / 買取実績 --- */
.p-kt-work__date {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sc);
    margin: 12px 0 4px;
}
.p-kt-work__ttl {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--kc);
    margin: 0;
}
.p-kt-work .c-image {
    overflow: hidden; /* ホバー時のズームを角丸の内側で切り抜く */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(18, 58, 99, 0.1);
    background-color: #f7f8fa; /* 写真の読み込み前／余白部分の下地 */
}
.p-kt-work .c-image__src {
    border-radius: 12px;
    background-color: transparent; /* 余白は figure 側（下地＋ぼかし）に見せる */
    transition: transform 0.5s ease; /* ゆっくりズーム用 */
}
/* アイキャッチの枠は「横画像が基準」。全カード共通で 4:3（横長）に固定する。
   高さが揃うので一覧のグリッドが崩れない。
   収め方だけを写真の向きで出し分ける（クラスは archive-case.php 側で付与）。
     .--kt-landscape … 横位置。cover（既定）で枠をぴったり埋める。
     .--kt-portrait  … 縦位置。--contain で全体を見せ、余白はぼかしで埋める。
   （比率クラス --4/--16 等は使わず、高さはここで指定する）
   ※ セレクタを .p-kt-work-cards 配下に限定しているので、
     トップページの実績カード（--16 の cover 表示）には影響しない。 */
.p-kt-work-cards .p-kt-work .c-image__src::after {
    padding-top: 75%; /* 4:3（横長） */
}
/* --- 縦位置の写真：contain で全体を見せ、左右の余白を同じ写真のぼかしで埋める ---
   figure 自身にも data-lazy-background を付けてあるので、遅延読込で入る
   background-image を ::before が inherit で受け取って cover 表示する。
   figure 本体の背景画像は描かせない（background-size: 0 0）ので、
   実際に見えるのは「ぼかし（::before）＋ contain の写真（.c-image__src）」の2層。
   写真が未設定などで figure に画像が入らない場合は ::before が何も描かず、
   #f7f8fa の下地だけになるので崩れない。 */
.p-kt-work__figure.--kt-portrait {
    background-size: 0 0;
    isolation: isolate; /* z-index:-1 の ::before を figure の内側に閉じ込める */
}
.p-kt-work__figure.--kt-portrait::before {
    content: "";
    position: absolute;
    inset: -8%; /* ぼかしの端が枠内に透けないよう少し外側まで広げる */
    z-index: -1;
    background-image: inherit;
    background-position: center;
    background-size: cover;
    filter: blur(18px);
    opacity: 0.55;
}
/* 横位置の写真は cover。ロゴや商品名が端に写っていることが多いので、
   トリミングは中央基準（.c-image__src の既定）のまま。 */
.p-kt-work__figure.--kt-landscape .c-image__src {
    background-size: cover;
}
/* カードの <a>（.p-common-card article > a）は style.css で
   display:flex; flex-direction:column になっており、さらに
   .p-common-card .c-image { order:1 } が効くため、DOM順に関係なく
   写真(figure.c-image)だけが常に最後へ回されてしまう。
   買取実績カードは HTML の並び（カテゴリー→写真→日付→タイトル）どおりに
   出したいので、写真の order を 0 に戻して DOM 順で表示させる。 */
.p-common-card .p-kt-work .c-image {
    order: 0;
}

/* --- 買取実績カードのホバー挙動 ---
   従来の --flash（白くフラッシュする演出）は見づらいため markup から除去。
   代わりに「カードがふわっと浮き上がる＋写真がゆっくりズーム」に変更する。
   .p-kt-work を含むカードだけに限定（他の p-common-card カードは従来どおり）。 */
.p-common-card article:has(.p-kt-work) {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.p-common-card article:has(.p-kt-work):hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(18, 58, 99, 0.16);
}
.p-kt-work:hover .c-image__src {
    transform: scale(1.06);
}
/* タイトルはホバーでアクセント色に */
.p-kt-work:hover .p-kt-work__ttl {
    color: var(--sc);
}

/* --- OTHER SERVICE / youme mobile（写真入りの目立つカード） --- */
.p-kt-service__card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 2px solid #ffe19a;
    box-shadow: 0 18px 44px rgba(18, 58, 99, 0.16);
}
/* 写真エリア（左）：メディア画像を背景に敷く。バッジを重ねる */
.p-kt-service__photo {
    position: relative;
    flex: 0 0 42%;
    min-height: 260px;
    background-color: #eef1f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.p-kt-service__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--kc);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 8px 16px;
    border-radius: 50rem;
    box-shadow: 0 6px 14px rgba(18, 58, 99, 0.28);
}
.p-kt-service__badge i {
    color: var(--ac);
}
/* 本文エリア（右）。テーマの body 中央寄せを打ち消して左寄せに */
.p-kt-service__body {
    flex: 1 1 auto;
    padding: 36px 40px;
    text-align: left;
}
/* 「毎月のスマホ代、見直しませんか？」＝このカードを読ませるための問いかけ。
   1.4rem の小さなラベル扱いだと本文より小さく、キャプションとして
   読み飛ばされていた。ここを見出しに昇格させ、ブランド名（youme mobile）は
   その受けとして一段下げる。＝「問い → 商品名 → 説明 → ボタン」の順に読める。 */
.p-kt-service__label {
    display: inline;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--kc);
    background: linear-gradient(
        transparent 62%,
        #ffe27a 62%
    ); /* 黄色マーカー */
    padding: 0 2px;
    margin: 0;
    /* 折り返しても各行にマーカーが乗るよう、行ごとに背景を描画する */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.p-kt-service__ttl {
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--kc);
    margin: 14px 0 10px;
}
.p-kt-service__txt {
    font-size: 1.45rem;
    line-height: 1.9;
    color: var(--fc);
    margin: 0 0 22px;
}
.p-kt-service__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--kc);
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 15px 34px;
    border-radius: 50rem;
    box-shadow: 0 10px 22px rgba(18, 58, 99, 0.22);
    transition:
        background-color 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
}
.p-kt-service__btn:hover {
    background-color: var(--kcd);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(18, 58, 99, 0.28);
}
.p-kt-service__btn i {
    font-size: 1.3rem;
}
@media (min-width: 992px) {
    .p-kt-service__label {
        font-size: 2.6rem;
    }
    .p-kt-service__ttl {
        font-size: 2.8rem;
    }
}
@media (max-width: 767px) {
    .p-kt-service__card {
        flex-direction: column;
    }
    .p-kt-service__photo {
        flex: 0 0 auto;
        min-height: 200px;
    }
    .p-kt-service__body {
        padding: 26px 22px 30px;
        text-align: center; /* 見出し・ブランド名・ボタンを中央に */
    }
    .p-kt-service__txt {
        text-align: left; /* 説明文だけは左寄せのまま */
    }
    .p-kt-service__label {
        font-size: 1.9rem;
        line-height: 1.8; /* マーカーが重ならないよう行間を広げる */
    }
    .p-kt-service__ttl {
        font-size: 2.2rem;
    }
}

/* --- FLOW / 査定の流れ --- */
.p-kt-flow__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.p-kt-flow__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(18, 58, 99, 0.07);
    padding: 22px 28px;
    margin-bottom: 40px;
}
/* ステップ間の縦コネクタ（黄色い矢印） */
.p-kt-flow__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50px;
    bottom: -30px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 16px solid #ffd23f;
}
.p-kt-flow__no {
    flex: 0 0 auto;
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ac);
    width: 52px;
    text-align: center;
}
.p-kt-flow__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #123a63;
    color: #ffd23f;
    font-size: 2.4rem;
}
.p-kt-flow__body {
    flex: 1 1 auto;
}
.p-kt-flow__ttl {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--kc);
    margin-bottom: 4px;
}
.p-kt-flow__txt {
    display: block;
    font-size: 1.45rem;
    line-height: 1.8;
    color: var(--fc);
}
@media (max-width: 767px) {
    .p-kt-flow__item {
        flex-wrap: wrap;
        justify-content: center; /* 番号＋アイコンを中央に */
        gap: 12px 16px;
        padding: 18px 18px;
    }
    .p-kt-flow__no {
        width: auto;
        font-size: 2rem;
    }
    .p-kt-flow__icon {
        width: 52px;
        height: 52px;
        font-size: 2rem;
    }
    .p-kt-flow__body {
        flex: 1 1 100%;
        text-align: center; /* 見出しは中央 */
    }
    .p-kt-flow__txt {
        text-align: left; /* 説明文は左寄せ（読みやすさ優先） */
    }
    .p-kt-flow__item:not(:last-child)::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --- NEEDS / 買取に必要なもの --- */
.p-kt-needs__box {
    background-color: #fff7db;
    border: 2px dashed #ffce4a;
    border-radius: 18px;
    padding: 40px 36px;
    text-align: center;
}
.p-kt-needs__ttl {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--kc);
    margin: 0 0 16px;
}
.p-kt-needs__ttl i {
    color: var(--sc);
    margin-right: 8px;
}
.p-kt-needs__lead {
    font-size: 1.5rem;
    line-height: 1.9;
    color: var(--fc);
    margin: 0 0 28px;
}
.p-kt-needs__lead strong {
    color: #e2342e;
}
.p-kt-needs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0 0 22px;
    padding: 0;
}
.p-kt-needs__list li {
    flex: 1 1 180px;
    max-width: 200px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(18, 58, 99, 0.08);
    padding: 22px 12px;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--kc);
}
.p-kt-needs__icon {
    display: block;
    margin: 0 auto 10px;
    color: var(--kc);
    font-size: 3.2rem;
}
.p-kt-needs__note {
    font-size: 1.25rem;
    color: #8a8577;
    margin: 0;
}

/* --- FAQ（.p-faq を流用しつつ買取店の白×黄×濃紺へ上書き） --- */
.p-kt .p-faq__q {
    color: var(--kc);
}
.p-kt .p-faq__q::before {
    color: var(--sc); /* Q マーク：山吹 */
    font-family: "Montserrat", sans-serif;
}
.p-kt .p-faq__q::after {
    color: var(--sc); /* ＋ アイコン */
}
.p-kt .p-faq__q:hover {
    color: var(--scd);
}
.p-kt .p-faq__a {
    color: var(--fc);
}

/* --- ACCESS / アクセス --- */
.p-kt-access__map {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(18, 58, 99, 0.14);
    line-height: 0;
}
.p-kt-access__info {
    margin: 0;
    text-align: left;
}
.p-kt-access__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 16px 6px;
    border-bottom: 1px solid #eee3c4;
}
.p-kt-access__row dt {
    flex: 0 0 96px;
    font-weight: 700;
    font-size: 1.45rem;
    color: var(--kc);
}
.p-kt-access__row dd {
    flex: 1;
    min-width: 60%;
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.7;
    color: var(--fc);
}
.p-kt-access__tel {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: #e2342e;
    text-decoration: none;
}
.p-kt-access__tel:hover {
    color: #b81f1a;
}

/* --- CONTACT / お問い合わせ（電話・LINE・メール） --- */
.p-kt-contact {
    background-color: #fff7db !important;
}
.p-kt-contact__en {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: "Montserrat", sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--sc);
    text-transform: uppercase;
    margin: 0 0 10px;
}
/* 両サイドに黄色いラインを添えて見出しを強調 */
.p-kt-contact__en::before,
.p-kt-contact__en::after {
    content: "";
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--ac);
}
@media (min-width: 992px) {
    .p-kt-contact__en {
        font-size: 3.2rem;
    }
}
.p-kt-contact__ttl {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--kc);
    margin: 0 0 14px;
}
.p-kt-contact__lead {
    font-size: 1.5rem;
    line-height: 1.9;
    color: var(--fc);
    margin: 0 0 36px;
}
/* 3つの導線ボタン（Fitts の法則：大きく・押しやすく） */
.p-kt-contact__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 130px;
    border-radius: 16px;
    padding: 22px 16px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 12px 26px rgba(18, 58, 99, 0.16);
    transition:
        transform 0.2s ease,
        filter 0.3s ease;
}
.p-kt-contact__btn:hover {
    transform: translateY(-4px);
    filter: brightness(1.05);
    color: #fff;
}
.p-kt-contact__btn > i {
    font-size: 2.8rem;
    margin-bottom: 6px;
}
.p-kt-contact__btn-label {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.95;
}
.p-kt-contact__btn-main {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* 電話ボタン：黄色グラデ＋濃紺文字（黄地で白文字は読めないため文字色を反転） */
.p-kt-contact__btn--tel {
    background: linear-gradient(135deg, #ffd23f 0%, #f2a900 100%);
    color: var(--kc);
}
.p-kt-contact__btn--tel:hover,
.p-kt-contact__btn--tel > i {
    color: var(--kc);
}
.p-kt-contact__btn--tel .p-kt-contact__btn-main {
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
}
.p-kt-contact__btn--line {
    background: linear-gradient(135deg, #22d366 0%, #06c755 100%);
}
.p-kt-contact__btn--mail {
    background: linear-gradient(135deg, #16457a 0%, #0d2c4d 100%);
}
@media (min-width: 992px) {
    .p-kt-intro__open {
        font-size: 5.6rem;
    }
    .p-kt-intro__ttl {
        font-size: 4rem;
    }
    .p-kt-campaign__ttl {
        font-size: 3.4rem;
    }
    .p-kt-campaign__ttl .p-kt-campaign__amount {
        font-size: 6rem;
    }
    .p-kt-contact__ttl {
        font-size: 3.4rem;
    }
}
@media (max-width: 991px) {
    .p-kt-campaign__box {
        padding: 40px 22px 32px;
    }
    .p-kt-campaign__ttl {
        font-size: 2.4rem;
    }
    .p-kt-campaign__ttl .p-kt-campaign__amount {
        font-size: 3.8rem;
    }
    .p-kt-service__icon {
        width: 96px;
        height: 96px;
        font-size: 3.6rem;
    }
    .p-kt-needs__box {
        padding: 32px 18px;
    }
    .p-kt-needs__list li {
        flex: 1 1 130px;
        padding: 16px 8px;
        font-size: 1.4rem;
    }
}

/* ============================================================
   共通クロム（ヘッダー／フッター／固定バー／ページトップ／
   プリローダー）を買取店の白×黄×濃紺へ再ブランド。
   ※ ロアジス配色を後勝ちで上書き（同一詳細度・後方定義）。
   ============================================================ */
/* ヘッダー：変数を濃紺・山吹・黄へ */
.g-header {
    --kc: #123a63;
    --kcd: #0d2c4d;
    --sc: #f2a900;
    --ac: #ffc20e;
    --line: #06c755;
    --gold: #f2a900;
}
.g-header .g-nav .g-nav__list .nav-link:after {
    color: #f2a900;
}
.g-header__navrow {
    border-top: 1px solid rgba(18, 58, 99, 0.12);
}
.g-header__tel {
    color: #123a63;
}
.g-header__tel:hover {
    color: #e2342e;
}
.g-header__tel i {
    color: #f2a900;
}
/* ヘッダーお問い合わせボタン：ゴールド → 黄色グラデ＋濃紺文字 */
.g-header .g-header__nav .c-btn-solid-border {
    background-image: linear-gradient(
        135deg,
        #ffe27a 0%,
        #ffcc00 50%,
        #f2a900 100%
    );
    box-shadow: 0 6px 16px rgba(18, 58, 99, 0.2);
}
.g-header .g-header__nav .c-btn-solid-border__txt-in,
.g-header .g-header__nav .c-btn-solid-border__icon i {
    color: #123a63;
}
/* ハンバーガー／SPナビ：濃紺・黄へ */
.g-burger__bar {
    background: #123a63;
}
.g-nav-sp {
    background: #ffffff;
    border-top: 1px solid rgba(18, 58, 99, 0.14);
}
.g-nav-sp .nav-link {
    color: #123a63;
}
.g-nav-sp .nav-link::after {
    color: #f2a900;
}
.g-nav-sp .nav-link:hover,
.g-nav-sp .nav-link.is-active {
    background: #fff7db;
    color: #e2342e;
}
/* トップ見出しの ::first-letter 差し色（旧ゴールド）を打ち消し */
.c-headline-compact .c-headline-compact__ttl::first-letter {
    color: inherit;
}

/* ページトップボタン：濃紺 */
.g-pagetop a {
    background: #123a63;
}
.g-pagetop a:hover {
    background: #f2a900;
}

/* スマホ固定フッターバー：濃紺地＋黄アイコン */
.g-fixarea-footer {
    --kc: #123a63;
    --kcd: #0d2c4d;
    --kc-rgb: 18, 58, 99;
    --kcd-rgb: 13, 44, 77;
}

/* フッター：黄色系グラデ＋濃紺文字（黄地で白文字は読めないため反転） */
footer.c-section--trans {
    background-color: #f7b500 !important;
    background-image: linear-gradient(
        135deg,
        #ffd94d 0%,
        #f5b400 100%
    ) !important;
}
footer.c-section--trans .list a,
footer.c-section--trans .logo,
footer.c-section--trans .company {
    color: #123a63 !important;
}
footer.c-section--trans .list a:hover,
footer.c-section--trans .list a:focus {
    color: #e2342e !important; /* ホバーは差し色の赤で視認性UP */
}

/* プリローダー：白×黄へ */
.preloader {
    --sc-rgb: 255, 210, 63;
    --scd-rgb: 242, 169, 0;
    background-color: #fffdf7 !important;
    background-image: none !important;
}
.preloader .preloader-block .title,
.preloader .preloader-block .loading {
    color: #123a63;
}
.preloader .preloader-block .percent {
    color: rgba(18, 58, 99, 0.22);
}
.preloader .preloader-bar {
    background: #ffe9a8;
}
.preloader .preloader-bar .preloader-progress {
    background: #f2a900;
}

/* ============================================================
   買取品目メガメニュー（ナビ内・クリックで開閉）
   ------------------------------------------------------------
   nav.php の「買取品目」をトグルボタン化し、パネル内に
   品目の「写真＋名称」を並べる。nav.php はPCヘッダー／スマホ
   ドロップダウン／フッターで共通利用されるため、既定は
   インラインのアコーディオン、PCヘッダー(#g-nav)のみ横型の
   ドロップダウンにする。開閉JSは header.php（1回読込）で委譲。
   ============================================================ */
.p-kt-mega {
    position: relative;
}
/* トグル：nav-link を流用しつつ button の既定スタイルを打ち消し */
.p-kt-mega__toggle {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    width: 100%; /* SP／フッターでは全幅（PCは下で auto に戻す） */
}
/* 開閉キャレット（style.css の .nav-link i を避けるため span＋CSS三角） */
.p-kt-mega__caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    vertical-align: middle;
    transition: transform 0.3s ease;
}
.p-kt-mega.is-open .p-kt-mega__caret {
    transform: rotate(180deg);
}

/* パネル：既定はインラインのアコーディオン（SPドロップダウン／フッター用） */
.p-kt-mega__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s ease;
}
.p-kt-mega.is-open > .p-kt-mega__panel {
    max-height: 1400px;
}
.p-kt-mega__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
}
/* 品目アイテム：写真＋名称 */
.p-kt-mega__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}
.p-kt-mega__item:hover {
    background: #fff7db;
    border-color: #ffc20e;
    transform: translateY(-2px);
}
.p-kt-mega__thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-color: #f1f3f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.p-kt-mega__name {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #123a63;
}

/* PCヘッダー(#g-nav)：クリックで開く横型ドロップダウン（写真＋名称 3列） */
@media (min-width: 992px) {
    #g-nav .p-kt-mega__toggle {
        width: auto;
    }
    #g-nav .p-kt-mega__panel {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        width: min(700px, 92vw);
        max-height: none; /* 高さアニメではなくフェードで表示 */
        padding: 0;
        background: #fff;
        border: 1px solid #eef1f5;
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(18, 58, 99, 0.18);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition:
            opacity 0.28s ease,
            transform 0.28s ease,
            visibility 0.28s;
        z-index: 1002;
    }
    #g-nav .p-kt-mega.is-open .p-kt-mega__panel {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
    #g-nav .p-kt-mega__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 16px;
    }
    /* 吹き出しの上向き三角 */
    #g-nav .p-kt-mega__panel::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 16px;
        height: 16px;
        background: #fff;
        border-left: 1px solid #eef1f5;
        border-top: 1px solid #eef1f5;
    }
}

/* ============================================================
   アクセス／お問い合わせ 店舗レイアウト
   ------------------------------------------------------------
   $kt_shops をループしてカード／パネルを並べる。
   1店舗なら中央に1枚（col-lg-8）、2店舗以上なら横並び（col-lg-6）。
   スマホでは縦積み。既存の .p-kt-access__* / .p-kt-contact__btn* を流用。
   ============================================================ */
/* --- アクセス：店舗ごとの白カード（地図＋概要） --- */
.p-kt-access__card {
    height: 100%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(18, 58, 99, 0.1);
    padding: 20px;
}
.p-kt-access__name {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--kc);
    text-align: center;
    padding-bottom: 14px;
    margin: 0 0 16px;
    border-bottom: 3px solid var(--ac);
}
@media (min-width: 992px) {
    .p-kt-access__name {
        font-size: 2.8rem;
    }
}
.p-kt-access__card .p-kt-access__map {
    margin-bottom: 16px;
}

/* --- お問い合わせ：店舗ごとのパネル（電話＋LINE） --- */
.p-kt-contact__shop {
    height: 100%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(18, 58, 99, 0.1);
    padding: 24px;
}
.p-kt-contact__shop-name {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--kc);
    text-align: center;
    margin: 0 0 18px;
}
.p-kt-contact__shop-name i {
    color: var(--sc);
    margin-right: 6px;
}
/* 店舗ごとの連絡ボタン（電話 / LINE / メール）。
   3つを1列に並べると1つあたりが細くなり、電話番号が折り返してしまうため、
   上段に電話（最優先・全幅）、下段にLINEとメールを2列で置く。 */
.p-kt-contact__shop-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.p-kt-contact__shop-btns .p-kt-contact__btn--tel {
    grid-column: 1 / -1;
}
@media (max-width: 575px) {
    .p-kt-contact__shop-btns {
        grid-template-columns: 1fr;
    }
}
/* 共通のメールボタン（横並び・全幅）：店舗パネルの下に1つ */
.p-kt-contact__btn--wide {
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 0;
    padding: 20px 24px;
    gap: 6px 14px;
}
.p-kt-contact__btn--wide > i {
    margin-bottom: 0;
}

/* ============================================================
   ヘッダー LINE相談ボタン（PCヘッダー内・電話とお問い合わせの間）
   ============================================================ */
.g-header__line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background-color: #06c755; /* LINEグリーン */
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    padding: 11px 22px 11px 12px;
    border-radius: 8px;
    /* 下辺の濃い縁＋落ち影で「押せるボタン」の立体感を出す */
    box-shadow:
        0 3px 0 #059c43,
        0 9px 18px rgba(6, 199, 85, 0.35);
    transition:
        transform 0.15s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}
.g-header__line:hover {
    color: #fff;
    background-color: #08d95e;
    transform: translateY(-2px);
    box-shadow:
        0 5px 0 #059c43,
        0 13px 24px rgba(6, 199, 85, 0.42);
}
.g-header__line:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 0 #059c43,
        0 4px 10px rgba(6, 199, 85, 0.3);
}
/* LINEアイコンを白丸バッジにして一目でボタンと分かるように */
.g-header__line i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #06c755;
    font-size: 1.8rem;
}

/* ローディング画面（preloader）のロゴを縮小（style.css の max-width:320px を上書き） */
.preloader .preloader-block .title img {
    max-width: 150px;
    width: auto;
    height: auto;
}
@media (max-width: 991px) {
    .preloader .preloader-block .title img {
        max-width: 120px;
    }
}

/* ============================================================
   「宝の蔵が選ばれる理由」セクション背景写真
   背景に写真を敷き、白いベールで明るく（清潔感）・文字を可読に。
   コンテンツ（見出し・カード）は前面に。
   ============================================================ */
.p-kt-reason {
    position: relative;
    overflow: hidden;
}
.p-kt-reason > .container {
    position: relative;
    z-index: 2; /* ベールより前面 */
}
.p-kt-reason .p-kt-reason__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.p-kt-reason .p-kt-reason__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 中央〜上は明るく（見出しを読みやすく）、外周はやや濃く＝背景に軽い影（ビネット） */
    background: radial-gradient(
        130% 95% at 50% 22%,
        rgba(255, 255, 255, 0.84) 0%,
        rgba(255, 255, 255, 0.66) 52%,
        rgba(18, 58, 99, 0.14) 100%
    );
}
/* 見出しを写真から浮き立たせる：白いグロー＋やや濃いゴールドで可読性UP */
.p-kt-reason .c-headline-compact__ttl {
    color: var(--scd);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(255, 255, 255, 1);
}
.p-kt-reason .c-headline-compact__sttl {
    text-shadow:
        0 2px 12px rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(255, 255, 255, 1);
}

/* ============================================================
   メインビジュアルのキャッチコピー（KVの「タイトル」「概要」）
   写真の上に中央表示。既定の sttl 色（--sc）は写真で沈むため白＋影に。
   ============================================================ */
/* 背景パネルなし。文字の後ろに黄色を重ねた立体（エクストルード）で3D風に。黒は不使用 */
.c-visual .c-visual__catchcopy {
    max-width: 90%;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
}
/* タイトル：濃紺の面＋黄→濃い金の段差で立体感（後ろに黄色が覗く） */
.c-visual .c-visual__ttl {
    color: #123a63;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-shadow:
        1px 1px 0 #f7c223,
        2px 2px 0 #f2b90a,
        3px 3px 0 #e8ab00,
        4px 4px 0 #d99a00,
        5px 5px 0 #c98c00;
}
/* サブ：控えめな黄の段差で軽く立体感（主役はタイトル） */
.c-visual .c-visual__sttl {
    color: #123a63;
    font-weight: 700;
    line-height: 1.8;
    text-shadow:
        1px 1px 0 #e8ab00,
        2px 2px 0 #cc9000;
}
@media (min-width: 992px) {
    .c-visual .c-visual__ttl {
        font-size: 4.4rem;
        text-shadow:
            2px 2px 0 #f7c223,
            4px 4px 0 #f2b90a,
            6px 6px 0 #e8ab00,
            8px 8px 0 #d99a00,
            10px 10px 0 #c98c00;
    }
    .c-visual .c-visual__sttl {
        font-size: 1.8rem;
    }
}
@media (max-width: 991px) {
    .c-visual .c-visual__ttl {
        font-size: 2.6rem;
    }
    .c-visual .c-visual__sttl {
        font-size: 1.4rem;
    }
}

/* ============================================================
   キャンペーン：スマホ調整
   ・「期間限定」「Special Campaign」を一行に収める
   ・特典リスト（対象・条件）と注記を左寄せに
   ============================================================ */
@media (max-width: 767px) {
    .p-kt-campaign__ribbon {
        white-space: nowrap;
        font-size: 1.7rem;
        padding: 10px 24px;
    }
    .p-kt-campaign__en {
        white-space: nowrap;
        font-size: 1.5rem;
        gap: 8px;
    }
    .p-kt-campaign__en::before,
    .p-kt-campaign__en::after {
        width: 18px;
    }
    .p-kt-campaign__list li {
        justify-content: flex-start;
        text-align: left;
    }
    .p-kt-campaign__limit {
        display: block;
        font-size: 1.4rem;
        text-align: left;
        padding: 10px 12px;
    }
    .p-kt-campaign__note {
        text-align: left;
    }
}

/* スマホ固定バー：LINE項目だけ緑（LINEカラー）で目立たせる */
.g-fixarea-footer__item--line {
    background: linear-gradient(
        to right,
        rgba(6, 199, 85, 0.96),
        rgba(5, 156, 67, 0.96)
    ) !important;
}

/* ============================================================
   買取方法ページ（page/method.php）
   ------------------------------------------------------------
   ・一覧カードは index.php と同じ .p-kt-method__item を流用し、
     ページ内アンカーとして押せるよう --link で <a> 用の指定を追加。
   ・詳細ブロック（.p-kt-mtd）は、写真の有無どちらでも成立するよう
     テキスト側だけで完結するデザインにしている。
   ============================================================ */

/* --- 一覧カードをリンク化（<a> 版・写真つき） ---
   トップ（index.php）と買取方法ページ（page/method.php）で共通のカード。
   ポイントは2つ：
   　1) カードを縦方向の flex にして、「くわしく見る」に margin-top:auto を
   　　 与える。これで説明文が1行でも3行でも、ボタンは必ずカード下端に
   　　 揃う（＝文字数でボタンの高さが変わらない）。
   　2) 写真はカード上端に全幅で敷き、その下端にアイコンを重ねる。
   　　 padding-top を 0 にして、写真を左右いっぱいまで出す。 */
.p-kt-method__item--link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding-top: 0;
    padding-bottom: 28px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.p-kt-method__item--link:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(18, 58, 99, 0.14);
    color: inherit;
}
/* カード上端の黄色いライン。写真より前面に出して残す */
.p-kt-method__item--link::before {
    z-index: 3;
}
/* <a> 内では h3/p ではなく span を使うため、ブロック化を明示する */
.p-kt-method__item--link .p-kt-method__ttl,
.p-kt-method__item--link .p-kt-method__txt {
    display: block;
    width: 100%;
}

/* 写真：カード左右の padding（28px）ぶんを負のマージンで打ち消して全幅に */
.p-kt-method__photo {
    position: relative;
    display: block;
    width: calc(100% + 56px);
    margin: 0 -28px 0;
    overflow: hidden;
}
.p-kt-method__photo-src {
    display: block;
    width: 100%;
    padding-top: 62%; /* 写真の高さ比率。3枚とも同じ高さに揃う */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}
.p-kt-method__item--link:hover .p-kt-method__photo-src {
    transform: scale(1.06);
}
/* 番号は写真の左下にリボンとして重ねる（写真の上でも読めるよう濃紺地） */
.p-kt-method__item--link .p-kt-method__no {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 5px 18px;
    background-color: rgba(18, 58, 99, 0.92);
    color: #ffd23f;
    font-size: 1.5rem;
    border-radius: 0 10px 0 0;
}
/* アイコンは写真の下端に半分かぶせる（白フチで写真から浮かせる） */
.p-kt-method__item--link .p-kt-method__icon {
    display: flex;
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    margin: -38px auto 14px;
    border: 4px solid #fff;
    font-size: 2.8rem;
}

/* 「くわしく見る」＝このカードが押せることを示すシグニファイア。
   margin-top:auto で、説明文の行数に関わらず常にカード下端に固定。 */
.p-kt-method__more {
    display: inline-block;
    margin-top: auto;
    padding: 9px 24px;
    border-radius: 50rem;
    background-color: var(--ac);
    color: #123a63;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
/* 説明文とボタンの間は最低限あける（auto で押し下げる前提の下限値） */
.p-kt-method__item--link .p-kt-method__txt {
    margin-bottom: 18px;
}
.p-kt-method__item--link:hover .p-kt-method__more {
    background-color: var(--acd);
}

@media (max-width: 991px) {
    .p-kt-method__photo-src {
        padding-top: 56%;
    }
    .p-kt-method__item--link .p-kt-method__icon {
        width: 64px;
        height: 64px;
        margin-top: -32px;
        font-size: 2.4rem;
    }
}

/* --- ページ内アンカーの着地位置（固定ヘッダー分を逃がす） --- */
.p-kt-anchor {
    scroll-margin-top: 90px;
}
@media (max-width: 991px) {
    .p-kt-anchor {
        scroll-margin-top: 70px;
    }
}

/* --- 詳細ブロック --- */
.p-kt-mtd__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.p-kt-mtd__no {
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sc);
}
.p-kt-mtd__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #123a63;
    color: #ffd23f;
    font-size: 2.2rem;
}
.p-kt-mtd__name {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--kc);
    margin: 0;
    text-align: left;
}
.p-kt-mtd__catch {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--kc);
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 2px dotted #ffd23f;
    text-align: left;
}
.p-kt-mtd__txt {
    font-size: 1.55rem;
    line-height: 2;
    color: var(--fc);
    margin: 0 0 1.2em;
    text-align: left;
}
/* ポイント（チェックリスト）：白カード内に置いて本文と視覚的に分ける */
.p-kt-mtd__points {
    list-style: none;
    margin: 24px 0 0;
    padding: 22px 24px;
    background-color: #fffdf2;
    border: 1px solid #f3e2ac;
    border-radius: 14px;
}
.p-kt-mtd__points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--kc);
    text-align: left;
}
.p-kt-mtd__points li + li {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3e2ac;
}
.p-kt-mtd__points li .fas {
    flex: 0 0 auto;
    margin-top: 3px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ac);
    color: #123a63;
    font-size: 1.1rem;
}
.p-kt-mtd__note {
    font-size: 1.35rem;
    line-height: 1.8;
    color: #6b7280;
    margin: 14px 0 0;
    text-align: left;
}
.p-kt-mtd__link {
    margin: 16px 0 0;
    text-align: left;
}
.p-kt-mtd__link a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kc);
    text-decoration: underline;
}
.p-kt-mtd__link a:hover {
    color: var(--scd);
}
.p-kt-mtd__photo {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(18, 58, 99, 0.12);
}

@media (max-width: 991px) {
    .p-kt-mtd__head {
        gap: 10px;
        margin-bottom: 12px;
    }
    .p-kt-mtd__no {
        font-size: 2rem;
    }
    .p-kt-mtd__icon {
        width: 46px;
        height: 46px;
        font-size: 1.8rem;
    }
    .p-kt-mtd__name {
        font-size: 2.2rem;
    }
    .p-kt-mtd__catch {
        font-size: 1.6rem;
    }
    .p-kt-mtd__txt {
        font-size: 1.45rem;
    }
    .p-kt-mtd__points {
        padding: 18px 18px;
    }
    .p-kt-mtd__points li {
        font-size: 1.45rem;
    }
}

/* --- 買取実績アーカイブ：カード上の品目カテゴリラベル --- */
.p-kt-work__cat {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 12px;
    border-radius: 50rem;
    background-color: var(--ac);
    color: #123a63;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ============================================================
   よくある質問（archive-faq.php ／ トップのFAQセクション）
   ------------------------------------------------------------
   .p-faq__item はロアジス（洋菓子）用にブラウン＋ゴールドで作られており、
   買取店の白×黄×濃紺の中で浮いていた。.p-kt 配下だけ色を差し替える。
   ※ トップページのFAQも同じクラスなので、両方まとめて整う。
   ============================================================ */
.p-kt .p-faq__item {
    border: 1px solid #f0e3bf;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(18, 58, 99, 0.06);
    margin-bottom: 16px;
}
/* 開いている項目は黄色い枠で「いまここを読んでいる」ことを示す */
.p-kt .p-faq__item[open] {
    border-color: var(--ac);
    box-shadow: 0 12px 28px rgba(18, 58, 99, 0.1);
}
.p-kt .p-faq__q {
    color: var(--kc);
    padding: 20px 60px;
}
/* 「Q」バッジ：濃紺の丸に黄色文字。質問の始まりが一目で分かる */
.p-kt .p-faq__q::before {
    content: "Q";
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #123a63;
    color: #ffd23f;
    font-size: 1.5rem;
}
/* 開閉アイコン：黄色の丸に濃紺の＋（開くと×） */
.p-kt .p-faq__q::after {
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--ac);
    color: #123a63;
    font-size: 1.5rem;
    line-height: 1;
}
.p-kt .p-faq__item[open] .p-faq__q::after {
    background-color: var(--scd);
}
.p-kt .p-faq__q:hover {
    color: var(--scd);
}
/* 回答：質問と地続きに見えないよう、点線で区切る */
.p-kt .p-faq__a {
    color: var(--fc);
    font-size: 1.55rem;
    padding: 4px 24px 20px 60px;
}
.p-kt .p-faq__item[open] .p-faq__a {
    border-top: 1px dotted #f0d79a;
    margin: 0 24px 0 60px;
    padding: 16px 0 20px;
}
.p-kt .p-faq__a a {
    color: var(--kc);
    text-decoration: underline;
}

@media (max-width: 991px) {
    .p-kt .p-faq__q {
        font-size: 1.6rem;
        padding: 16px 52px;
    }
    .p-kt .p-faq__q::before {
        left: 14px;
        width: 26px;
        height: 26px;
        font-size: 1.3rem;
    }
    .p-kt .p-faq__q::after {
        right: 12px;
        width: 26px;
        height: 26px;
    }
    .p-kt .p-faq__a {
        font-size: 1.45rem;
        padding: 4px 18px 18px 52px;
    }
    .p-kt .p-faq__item[open] .p-faq__a {
        margin: 0 18px 0 52px;
    }
}

/* ============================================================
   アクセス・店舗案内ページ（page/access.php）
   ------------------------------------------------------------
   店舗カード（.p-kt-access__card）はトップページと共通。
   ここではページ側だけで使う「地図を開く／電話をかける」ボタンと
   店舗写真の指定を足している。
   ============================================================ */
.p-kt-access__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.p-kt-access__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: #123a63;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}
.p-kt-access__btn:hover {
    background-color: #0d2c4d;
    color: #fff;
    transform: translateY(-2px);
}
/* 電話は「いますぐ繋がる」導線なので黄色で最優先に見せる */
.p-kt-access__btn--tel {
    background-color: var(--ac);
    color: #123a63;
}
.p-kt-access__btn--tel:hover {
    background-color: var(--acd);
    color: #123a63;
}

/* 店舗写真 */
.p-kt-access__photo {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(18, 58, 99, 0.1);
}
.p-kt-access__photo-cap {
    padding: 10px 14px;
    background-color: #fff;
    color: var(--kc);
    font-size: 1.4rem;
    font-weight: 700;
}

@media (max-width: 575px) {
    /* スマホの狭い幅では横並びだと文字が潰れるので縦積みにする */
    .p-kt-access__btns {
        flex-direction: column;
    }
}

/* ============================================================
   お知らせ（archive-news.php ／ taxonomy-newscat.php）
   ------------------------------------------------------------
   催事査定会の開催情報や営業案内が中心で「日付」が主役になるため、
   4列カードではなく横並びリストにしている。
   日付・カテゴリ・見出しの順に読めるので、一覧のまま内容を判断できる。
   ============================================================ */

/* --- カテゴリ絞り込みタブ --- */
.p-kt-news__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.p-kt-news__tab {
    display: inline-block;
    padding: 8px 22px;
    border: 2px solid #123a63;
    border-radius: 50rem;
    background-color: #fff;
    color: var(--kc);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
.p-kt-news__tab:hover {
    background-color: var(--ac);
    border-color: var(--ac);
    color: #123a63;
}
/* 現在地。色だけでなく枠も変えて、選択中がひと目で分かるようにする */
.p-kt-news__tab.is-current {
    background-color: #123a63;
    border-color: #123a63;
    color: #fff;
}

/* --- 記事リスト --- */
.p-kt-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.p-kt-news__list > li + li {
    margin-top: 16px;
}
.p-kt-news__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #f0e3bf;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(18, 58, 99, 0.06);
    text-decoration: none;
    color: inherit;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.p-kt-news__item:hover {
    transform: translateY(-3px);
    border-color: var(--ac);
    box-shadow: 0 14px 30px rgba(18, 58, 99, 0.12);
    color: inherit;
}
.p-kt-news__thumb {
    flex: 0 0 auto;
    display: block;
    width: 180px;
    border-radius: 10px;
    overflow: hidden;
}
.p-kt-news__thumb-src {
    display: block;
    width: 100%;
    padding-top: 62%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f4f6f9;
}
.p-kt-news__body {
    flex: 1 1 auto;
    display: block;
    min-width: 0; /* 長いタイトルでも flex がはみ出さないように */
    text-align: left;
}
.p-kt-news__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.p-kt-news__date {
    font-family: "Montserrat", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sc);
    letter-spacing: 0.04em;
}
.p-kt-news__cat {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 50rem;
    background-color: var(--ac);
    color: #123a63;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.6;
}
.p-kt-news__new {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50rem;
    background-color: #d94f4f;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
}
.p-kt-news__ttl {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--kc);
    margin-bottom: 4px;
}
.p-kt-news__txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 抜粋は2行まで。行数を揃えて一覧を読みやすく */
    overflow: hidden;
    font-size: 1.45rem;
    line-height: 1.8;
    color: var(--fc);
}
.p-kt-news__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #f4f6f9;
    color: var(--kc);
    font-size: 1.6rem;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}
.p-kt-news__item:hover .p-kt-news__arrow {
    background-color: var(--ac);
    color: #123a63;
}

@media (max-width: 767px) {
    /* スマホ：サムネイルを左に小さく置き、日付＋見出しを右に。
       抜粋は情報量が多すぎて一覧性を損なうため非表示。 */
    .p-kt-news__item {
        gap: 14px;
        padding: 12px;
    }
    .p-kt-news__thumb {
        width: 96px;
    }
    .p-kt-news__ttl {
        font-size: 1.55rem;
    }
    .p-kt-news__txt {
        display: none;
    }
    .p-kt-news__arrow {
        display: none;
    }
    .p-kt-news__tab {
        padding: 7px 16px;
        font-size: 1.35rem;
    }
}

/* ============================================================
   ヘッダー：「LINEで相談」と「お問い合わせ」のUIを揃える
   ------------------------------------------------------------
   2つは元々まったく別のコンポーネントだった。
   　・LINE      … .g-header__line（高さ約50px・角丸8px・アイコンは白丸バッジ・
   　　　　　　　　下辺に濃い縁を出す立体シャドウ）
   　・お問い合わせ … .c-btn-solid-border.--small（高さ40px・角丸5px・
   　　　　　　　　文字13px・右端に矢印アイコン＝左右非対称）
   そのため横に並ぶと高さ・角丸・文字サイズ・重心がバラバラだった。
   ここでお問い合わせ側をLINEボタンと同じ形に揃える。
   ※色はそのまま（LINE＝グリーン／お問い合わせ＝黄色グラデ＋濃紺文字）。
   ============================================================ */
.g-header .g-header__nav .c-btn-solid-border,
.g-header .g-header__nav .c-btn-solid-border.--small {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px 11px 12px; /* LINEボタンと同じ */
    border-radius: 8px;
    outline: none;
    overflow: visible;
    white-space: nowrap;
    /* 下辺の濃い縁＋落ち影。LINEボタンと同じ立体表現で「押せる」感を揃える */
    box-shadow:
        0 3px 0 #d99400,
        0 9px 18px rgba(242, 169, 0, 0.35);
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease;
}
.g-header .g-header__nav .c-btn-solid-border:hover {
    transform: translateY(-2px);
    box-shadow:
        0 5px 0 #d99400,
        0 13px 24px rgba(242, 169, 0, 0.42);
}
.g-header .g-header__nav .c-btn-solid-border:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 0 #d99400,
        0 4px 10px rgba(242, 169, 0, 0.3);
}
/* 枠線アニメーション用の4本のライン：角丸ボタンでは不要なので消す */
.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,
.g-header .g-header__nav .c-btn-solid-border__l {
    display: none;
}
/* 右端の矢印。これがあると左右非対称になり、LINEボタンと重心が揃わない */
.g-header .g-header__nav .c-btn-solid-border__icon {
    display: none;
}
.g-header .g-header__nav .c-btn-solid-border__txt {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    overflow: visible;
}
.g-header .g-header__nav .c-btn-solid-border__txt-in {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.5rem; /* LINEボタンと同じ */
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}
/* 封筒アイコンを白丸バッジに。LINEアイコンと同じ扱いにして印象を揃える */
.g-header .g-header__nav .c-btn-solid-border__txt-in i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 0;
    border-radius: 50%;
    background: #fff;
    color: #123a63;
    font-size: 1.6rem;
}

/* 文字が飛び出す textRollUp アニメーションを解除。
   .c-btn-solid-border は本来ホバーで文字を上に弾き飛ばして戻す演出だが、
   LINEボタン（ふわっと浮くだけ）と並ぶと動きが揃わず落ち着かない。
   ボタン自体が浮き沈みする表現だけに統一する。 */
.g-header .g-header__nav .c-btn-solid-border:hover .c-btn-solid-border__txt-in {
    animation: none;
}
.g-header .g-header__nav .c-btn-solid-border:hover .c-btn-solid-border__icon i {
    animation: none;
}

/* メインビジュアルの文言の縦位置。
   テーマ標準は translate(-50%, calc(-50% - 35px)) で中央より35px「上」に
   置かれていた（ロアジスの写真構図に合わせた指定）。
   買取店のKVでは文字が上に寄りすぎるため、中央より下側へずらす。
   ※位置の微調整は --kv-shift の値だけを変えればOK。 */
.c-visual .c-visual__catchcopy {
    --kv-shift: 20px; /* 中央からの下方向のオフセット（スマホ） */
    -webkit-transform: translate(-50%, calc(-50% + var(--kv-shift)));
    transform: translate(-50%, calc(-50% + var(--kv-shift)));
}
@media (min-width: 992px) {
    .c-visual .c-visual__catchcopy {
        --kv-shift: 60px; /* PCは画面が高いぶん、もう少し下げる */
    }
}

/* 買取品目メガメニュー：「宝石・ジュエリー」の表示切替。
   スマホのドロップダウンは1列あたりの幅が狭く、1行だと文字が詰まって
   読みにくいため、中黒を消して2行に分ける。PCは横幅に余裕があるので
   これまで通り「宝石・ジュエリー」の1行表示のまま。 */
.p-kt-mega__br {
    display: none;
}
.p-kt-mega__sep {
    display: inline;
}
@media (max-width: 991px) {
    .p-kt-mega__br {
        display: block;
    }
    .p-kt-mega__sep {
        display: none;
    }
    /* 2行になる項目と1行の項目で高さが揃うよう、行間を整える */
    .p-kt-mega__name {
        line-height: 1.5;
    }
}

/* 品目名を左寄せ。
   このテーマは body に text-align:center が効いており、各所で個別に
   打ち消す作りになっている。1行の項目では見た目に差が出ないが、
   「宝石／ジュエリー」のように2行になると短い行だけ中央に寄って
   写真との左端が揃わなくなるため、明示的に left を指定する。 */
.p-kt-mega__name {
    text-align: left;
}

/* ============================================================
   スマホ固定バー：店舗ごとに左右に分割
   ------------------------------------------------------------
   店舗が2つあるのに連絡手段が1つずつだと、押す前にどちらの店舗へ
   繋がるのか分からなかった。バーを店舗単位で左右に割り、
   1ブロック＝1店舗として「店舗名 → 電話・LINE・メール」を
   その場で選べるようにする。
   各ボタンはアイコン＋ラベルの縦積みにして、幅が半分でも
   何のボタンかひと目で分かる形にしている（タップ領域も確保）。
   ============================================================ */
.g-fixarea-footer {
    background-color: #123a63;
}

/* --- 店舗ブロック（等分割。3店舗以上でも自動で割れる） --- */
.g-fixarea-shops {
    display: flex;
}
.g-fixarea-shop {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 7px 7px;
}
/* 店舗の境目。線1本で「別の店舗」だと分かるようにする */
.g-fixarea-shop + .g-fixarea-shop {
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.g-fixarea-shop__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 5px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-fixarea-shop__name i {
    color: #ffc20e;
    font-size: 1.1rem;
}
.g-fixarea-shop__btns {
    display: flex;
    gap: 5px;
}
/* 電話 / LINE / メールの3つを等分。アイコンを上、ラベルを下に */
.g-fixarea-shop__btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 46px;
    padding: 4px 2px;
    border-radius: 8px;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
}
.g-fixarea-shop__btn i {
    font-size: 1.6rem;
}
.g-fixarea-shop__btn-txt {
    font-size: 1.1rem;
    font-weight: 700;
}
.g-fixarea-shop__btn--tel {
    background-color: #ffc20e;
    color: #123a63;
}
.g-fixarea-shop__btn--tel:hover,
.g-fixarea-shop__btn--tel:active {
    background-color: #f2a900;
    color: #123a63;
}
.g-fixarea-shop__btn--line {
    background-color: #06c755;
    color: #fff;
}
.g-fixarea-shop__btn--line:hover,
.g-fixarea-shop__btn--line:active {
    background-color: #059c43;
    color: #fff;
}
/* メールは電話・LINEほど急ぎの導線ではないので、白地で一段控えめに */
.g-fixarea-shop__btn--mail {
    background-color: #fff;
    color: #123a63;
}
.g-fixarea-shop__btn--mail:hover,
.g-fixarea-shop__btn--mail:active {
    background-color: #fff7db;
    color: #123a63;
}
.g-fixarea-shop__btn--mail i {
    color: #f2a900;
}

/* 固定バーのぶん、フッター末尾が隠れないように余白を足す */
@media (max-width: 991px) {
    footer {
        padding-bottom: 96px !important;
    }
}

/* 狭い端末（iPhone SE 等）では余白と文字を詰める */
@media (max-width: 360px) {
    .g-fixarea-shop {
        padding: 5px 4px 6px;
    }
    .g-fixarea-shop__btns {
        gap: 3px;
    }
    .g-fixarea-shop__btn {
        min-height: 42px;
    }
    .g-fixarea-shop__btn i {
        font-size: 1.4rem;
    }
    .g-fixarea-shop__btn-txt {
        font-size: 1rem;
    }
}

/* スマホでは上段フッター（footer.c-section--trans）を非表示にする。
   このフッターは中身が
   　・ロゴ  … .is-pc（SPでは display:none）
   　・ナビ  … .d-none .d-lg-block（SPでは非表示）
   の2つだけなので、スマホでは「空っぽの黄色い帯」だけが残っていた。
   SPのフッターナビは下段の footer.g-footer 側が担当している。 */
@media (max-width: 991px) {
    footer.c-section--trans {
        display: none;
    }
}

/* ============================================================
   買取品目ページ（page/item.php）
   ------------------------------------------------------------
   ・品目一覧カードは index.php と同じ .p-kt-item を流用し、
     ページ内アンカーとして押せるよう --link で <a> 用の指定を追加。
   ・詳細ブロックは買取方法ページの .p-kt-mtd をそのまま流用し、
     ここでは「買取例（.p-kt-itm__tags）」だけを新しく定義する。
   ・ヘッダーの買取品目メガメニューから #item-xxx へ飛ぶため、
     詳細セクションには .p-kt-anchor（scroll-margin-top）を付与済み。
   ============================================================ */

/* --- 一覧カードをリンク化（<a> 版） ---
   .p-kt-item は元が <div> のため、<a> にしても中の <span> が
   インライン要素のままにならないよう display をブロック化する。 */
.p-kt-item--link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.p-kt-item--link:hover {
    color: inherit;
}
.p-kt-item--link .p-kt-item__photo,
.p-kt-item--link .p-kt-item__photo-src,
.p-kt-item--link .p-kt-item__name {
    display: block;
}
/* 品目名の右に下向き矢印を添えて「押すと下へ移動する」ことを示す */
.p-kt-item--link .p-kt-item__name i {
    margin-left: 6px;
    color: var(--sc);
    font-size: 1.2rem;
    transition: transform 0.25s ease;
}
.p-kt-item--link:hover .p-kt-item__name {
    background-color: #fffdf2;
}
.p-kt-item--link:hover .p-kt-item__name i {
    transform: translateY(3px);
}

/* --- 買取例（品名タグ） ---
   「うちのアレも売れるのかも」と気づいてもらうための具体例。
   タグ型にして、点数が増えても縦に伸びすぎないようにする。
   本文中で埋もれないよう、黄色アクセントのボックスで囲って強調する。 */
.p-kt-itm__examples {
    position: relative;
    margin: 24px 0;
    padding: 20px 22px 22px;
    border: 2px solid #ffce4a;
    border-left-width: 6px;
    border-radius: 8px;
    background-color: #fffaeb;
    box-shadow: 0 6px 18px rgba(242, 169, 0, 0.12);
}
/* クリーム背景セクションでは同系色で沈むので、白ベースにして浮かせる */
.p-kt-sec--cream .p-kt-itm__examples {
    background-color: #fff;
}
.p-kt-itm__tags-ttl {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--kc);
    text-align: left;
}
.p-kt-itm__tags-ttl i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--sc);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 2px 6px rgba(242, 169, 0, 0.35);
}
.p-kt-itm__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.p-kt-itm__tags li {
    padding: 8px 16px;
    border-radius: 50rem;
    background-color: #f0c052;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--kc);
    box-shadow: 0 2px 5px rgba(18, 58, 99, 0.06);
}
/* クリーム背景のセクションでは白タグが浮くので、枠線を少し濃くする */
.p-kt-sec--cream .p-kt-itm__tags li {
    border-color: #ecd894;
}

/* --- 掲載のない品目について（.p-kt-needs__box 内のリスト） --- */
.p-kt-itm__notice {
    list-style: none;
    max-width: 640px;
    margin: 24px auto 0;
    padding: 0;
    text-align: left;
}
.p-kt-itm__notice li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--fc);
}
.p-kt-itm__notice li + li {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #f3e2ac;
}
.p-kt-itm__notice li .fas {
    flex: 0 0 auto;
    margin-top: 5px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ac);
    color: #123a63;
    font-size: 1.1rem;
}
.p-kt-itm__notice a {
    font-weight: 700;
    color: var(--kc);
    text-decoration: underline;
}
.p-kt-itm__notice a:hover {
    color: var(--scd);
}

@media (max-width: 991px) {
    .p-kt-itm__examples {
        margin: 20px 0;
        padding: 16px 16px 18px;
        border-left-width: 5px;
    }
    .p-kt-itm__tags-ttl {
        margin: 0 0 12px;
        font-size: 1.7rem;
    }
    .p-kt-itm__tags-ttl i {
        width: 26px;
        height: 26px;
        font-size: 1.2rem;
    }
    .p-kt-itm__tags {
        gap: 8px;
    }
    .p-kt-itm__tags li {
        padding: 6px 13px;
        font-size: 1.35rem;
    }
    .p-kt-itm__notice li {
        font-size: 1.4rem;
    }
    /* 一覧カードは2列。品目名が2行になっても高さを揃える */
    .p-kt-item--link .p-kt-item__name {
        font-size: 1.4rem;
        padding: 12px 6px;
    }
}

/* --- 品目写真（縦2枚） ---
   PCは縦に2枚並べて、1品目あたりの情報量を増やす。
   スマホでそのまま縦2枚にすると本文にたどり着くまでが遠くなるため、
   横2枚（正方形トリミング）に切り替える。
   写真が1枚（'img2' => 0）のときは auto-fit で自動的に全幅1枚になる。 */
.p-kt-itm__photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.p-kt-itm__photo {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(18, 58, 99, 0.12);
}
.p-kt-itm__photo-src {
    width: 100%;
    padding-top: 66%; /* 3:2 に近い比率 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f1f3f6; /* 画像読み込み前の下地 */
}

@media (max-width: 991px) {
    .p-kt-itm__photos {
        /* 2枚なら横並び、1枚なら全幅 */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }
    .p-kt-itm__photo {
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(18, 58, 99, 0.12);
    }
    .p-kt-itm__photo-src {
        padding-top: 100%; /* 横2枚のときは正方形で高さを抑える */
    }
}

/* --- スマホ：見出し（No＋アイコン＋名称）とキャッチを中央寄せ ---
   買取品目ページ（.p-kt-itempage）／買取方法ページ（.p-kt-methodpage）で
   共通の .p-kt-mtd__head / __name / __catch に適用。他ページに影響しないよう
   ページ識別クラスでスコープする。
   PCは写真が左右に来てバランスが取れているので、SP（〜991px）のみ中央寄せ。 */
@media (max-width: 991px) {
    .p-kt-itempage .p-kt-mtd__head,
    .p-kt-methodpage .p-kt-mtd__head {
        justify-content: center;
    }
    .p-kt-itempage .p-kt-mtd__name,
    .p-kt-methodpage .p-kt-mtd__name {
        text-align: center;
    }
    .p-kt-itempage .p-kt-mtd__catch,
    .p-kt-methodpage .p-kt-mtd__catch {
        text-align: center;
    }
}

/* --- 掲載のない品目ブロック（買取品目ページ） --- */
/* li 内のテキストは <span> で1つのフレックスアイテムにまとめ、
   リンクを含む文章も通常どおり折り返せるようにする。 */
.p-kt-itm__notice li > span {
    flex: 1 1 auto;
    min-width: 0; /* 長い文章がはみ出さず折り返せるように */
}
@media (max-width: 991px) {
    /* 注記（※本人確認書類…）はスマホでは中央寄せだと読みにくいため左寄せに。
       .p-kt-needs__note は method.php 等と共通なので item ページ限定でスコープ。 */
    .p-kt-itempage .p-kt-needs__note {
        text-align: left;
    }
}