/*
Theme Name: belleb
Theme URI: https://example.com/
Author: belleb
Description: belleb 美容・エステサロン公式テーマ
Version: 1.2.0
Text Domain: belleb
*/

/* ============================================================
   belleb theme - base layout & responsive overrides
   原站の reset / style / view CSS は assets/css 配下を enqueue
   ここでは追加のレイアウト・レスポンシブ調整のみ記述
   ============================================================ */

/* border-box は .belleb-* の WP セクションだけに適用。
   legacy CSS（.bkm / #maintop / header / nav / footer 等）は
   content-box 前提で書かれているため除外する。 */
.belleb-hero, .belleb-hero *, .belleb-hero *::before, .belleb-hero *::after,
.belleb-section, .belleb-section *, .belleb-section *::before, .belleb-section *::after,
.belleb-grid, .belleb-grid *, .belleb-grid *::before, .belleb-grid *::after,
.belleb-machines, .belleb-machines *, .belleb-machines *::before, .belleb-machines *::after,
.belleb-info, .belleb-info *, .belleb-info *::before, .belleb-info *::after,
.belleb-footer, .belleb-footer *, .belleb-footer *::before, .belleb-footer *::after {
    box-sizing: border-box;
}
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
/* legacy .bkm 内の <img> は原寸表示（max-width:100% で縮まないように） */
.bkm img { max-width: none; }

/* PC: 中央寄せ最大幅 1100px */
#wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

/* ヘッダー（原站 header h1/h2/#hd は assets/css/style_de333e4f9e.css 側で定義済み） */
/* グローバル img の max-width:100% により原站レイアウト（h2:width 185px）の中で
   ロゴが縮小してしまうため、ヘッダー画像だけ素のサイズで表示させる */
header h2 { width: auto; }
header h2 img,
header #hd img { max-width: none; height: auto; }
/* ロゴと右側 CTA の縦中心を揃え、nav との間に余白を確保 */
header { padding-bottom: 1px; }
nav { margin-top: 0; }

/* PC ヘッダー：原 CSS（h2 padding:20px 0 / h1 margin-top:5px）の縦間隔を約 1/3 に圧縮
   1: SNS・キャッチ行 〜 ロゴ行 の空白
   2: ロゴ/Tel 行 〜 ナビ の空白 */
#wrap > header h1 { margin-top: 1px; }
#wrap > header h2 { padding: 1px 0; }

/* ナビ：原站 nav#menu / ul#menuBody / .nav は assets/css/style_de333e4f9e.css 側で定義済み */

/* Hero スライダー */
.belleb-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.belleb-hero-track {
    position: relative;
    width: 100%;
    height: 430px;
}
.belleb-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.belleb-hero-slide.is-active { opacity: 1; }

/* セクション共通 */
.belleb-section {
    padding: 32px 16px;
}
.belleb-section h2 {
    font-size: 22px;
    border-left: 6px solid #c8a25b;
    padding-left: 10px;
    margin: 0 0 20px;
}
/* お悩み別 セクション：見出しは「最新施術マシーン」と同じ legacy h4
   （#wrap h4 の下線スタイル）をそのまま使用するため、追加の装飾はしない。
   ただし legacy #maintop .txta/.txtb の固定幅 480px は .belleb-section の
   左右パディング(16px×2)と合わさるとコンテナ幅を超えて折り返してしまうので、
   PC でも 2 カラムを保てるように幅を比率で上書きする。
   ※ legacy セレクタ #maintop .txta は特異度(110) のため、こちらも
     #maintop を含めて特異度を合わせる必要がある */
#maintop .belleb-worry { overflow: hidden; } /* float clearfix */
#maintop .belleb-worry .txtb,
#maintop .belleb-worry .txta {
    float: left;
    width: calc(50% - 10px);
    margin: 0;
    box-sizing: border-box;
}
#maintop .belleb-worry .txtb { margin-right: 20px; }
#maintop .belleb-worry .txtb img,
#maintop .belleb-worry .txta img {
    float: left;
    width: auto;
    max-width: 50%;
    height: auto;
    margin-right: 16px;
}
#maintop .belleb-worry .txtb ul,
#maintop .belleb-worry .txta ul {
    width: auto;
    overflow: hidden;
}
.belleb-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}
.belleb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.belleb-grid img { width: 100%; height: auto; display: block; }

/* マシーン紹介（原站 .txtc/.txtd 浮動レイアウトを継承） */
.belleb-machines-wrap {
    padding: 32px 0;
    overflow: hidden; /* float clearfix */
}
.belleb-machines-wrap > h4 {
    padding: 0 16px;
}
.belleb-machines-wrap h5 {
    font-size: 15px;
    margin: 0 0 8px;
    color: #c8a25b;
}
.belleb-machines-wrap p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

/* 脱毛ページ */
.belleb-epi { padding: 24px 16px; }
.belleb-epi h1 {
    font-size: 26px;
    text-align: center;
    margin: 0 0 24px;
    padding: 14px 0;
    background: #c8a25b;
    color: #fff;
}
.belleb-epi h2 {
    font-size: 20px;
    border-left: 6px solid #c8a25b;
    padding-left: 10px;
    margin: 28px 0 14px;
}
.belleb-epi p { line-height: 1.8; font-size: 14px; }
.belleb-epi table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}
.belleb-epi table th, .belleb-epi table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: left;
}
.belleb-epi table th { background: #f5efe4; }

/* サロン情報 */
.belleb-info table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.belleb-info th, .belleb-info td {
    border-bottom: 1px solid #eee;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}
.belleb-info th { width: 30%; background: #faf7f2; }

/* 下部 2 カラム（新着情報 / サロン案内）— flex で並列、legacy の固定幅を上書き */
.belleb-bottom {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 0 16px 32px;
}
.belleb-bottom #news,
.belleb-bottom #tinfo {
    box-sizing: border-box;
    float: none;            /* legacy float を解除 */
    width: auto;            /* legacy width:480px を解除 */
    flex: 1 1 0;
    margin: 0;              /* legacy margin を解除 */
    min-width: 0;
}
.belleb-bottom #news { height: 363px; } /* 原站と同じ高さ */
.belleb-bottom #news dd {
    overflow-y: auto;
    overflow-x: hidden;
    height: 298px;
}
.belleb-bottom #news dd p {
    font-size: 13px;
    line-height: 1.7;
    padding: 8px 6px;
}
.belleb-bottom #news dd p .news-date {
    display: inline-block;
    color: #c8a25b;
    margin-right: 10px;
    font-weight: bold;
}
.belleb-bottom #news dd p a {
    color: #333;
    text-decoration: none;
}
.belleb-bottom #news dd p a:hover {
    text-decoration: underline;
}

/* フッター（原站 #ftb / .fb / .fb2 は assets/css/style_de333e4f9e.css 側で定義済み） */
.belleb-footer { padding: 0; }
/* モバイル専用 Hotpepper バナー：PC では非表示 */
.belleb-mobile-hotpepper { display: none; }
.belleb-footer small {
    display: block;
    text-align: center;
    padding: 16px 0;
    background: #000;
    color: #fff;
    /* #wrap(980px) を突き抜けてビューポート全幅にするフルブリード */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}
.belleb-footer small p { margin: 0; font-size: 12px; }

/* ============================================================
   レスポンシブ：タブレット
   ============================================================ */
@media (max-width: 900px) {
    .belleb-grid { grid-template-columns: repeat(2, 1fr); }
    .belleb-hero-track { height: 320px; }
    /* マシーン：狭い画面では 1 列に */
    .belleb-machines-wrap section .txtc,
    .belleb-machines-wrap section .txtd {
        float: none;
        width: auto;
        margin: 0 16px 20px;
    }
}

/* ============================================================
   レスポンシブ：スマホ 375px～
   ============================================================ */
@media (max-width: 640px) {
    /* 横スクロールナビ */
    nav#menu, nav#menu ul#menuBody { width: 100%; height: auto; }
    ul#menuBody {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        position: static;
        -webkit-overflow-scrolling: touch;
    }
    ul#menuBody li a { width: auto; padding: 14px 12px; font-size: 13px; white-space: nowrap; }

    .belleb-hero-track { height: 200px; }

    .belleb-section { padding: 20px 12px; }
    /* お悩み別 / 最新施術マシーン / 下部 3 セクションの縦余白を統一して詰める（モバイルのみ） */
    .belleb-section.belleb-worry,
    .belleb-section.belleb-machines-wrap,
    .belleb-section.belleb-bottom {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .belleb-section.belleb-worry > h4,
    .belleb-section.belleb-machines-wrap > h4 { margin-top: 0; margin-bottom: 8px; }
    #maintop .bkm { margin-bottom: 0; }
    /* 末尾要素の margin で間隔が広がるのを防ぐ */
    #maintop .belleb-worry .txta:last-of-type,
    .belleb-machines-wrap > section:last-of-type,
    .belleb-machines-wrap section .txtc:last-child,
    .belleb-machines-wrap section .txtd:last-child { margin-bottom: 0; }
    .belleb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .belleb-machine { flex-direction: column; }
    .belleb-machine img { width: 100%; flex: 0 0 auto; }

    .belleb-epi h1 { font-size: 20px; }
    .belleb-epi h2 { font-size: 17px; }
    .belleb-epi table th, .belleb-epi table td { font-size: 12px; padding: 6px; }

    .belleb-info th { width: 35%; font-size: 12px; }
    .belleb-info td { font-size: 12px; }

    /* 新着情報 / サロン案内：縦積み */
    .belleb-bottom {
        flex-direction: column;
    }
    .belleb-bottom #news,
    .belleb-bottom #tinfo {
        width: 100%;
        height: auto;
    }
    .belleb-bottom #news dd { height: 240px; }

    /* お悩み別（.txtb / .txta）：legacy float + margin-left:20px を解除して
       縦積みで左揃え。画像と ul も縦積みではなく横並び（画像左 / リスト右）を維持しつつ
       両ブロックの左端を揃える。
       ※ PC 用 #maintop .belleb-worry .txtb (特異度 120) を上回るため、
          こちらも .belleb-worry を含めて 120 に揃える */
    #maintop .belleb-worry .txtb,
    #maintop .belleb-worry .txta {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px 0;
        padding: 0 12px;
        box-sizing: border-box;
    }
    #maintop .belleb-worry .txtb img,
    #maintop .belleb-worry .txta img {
        float: left;
        width: 40%;
        max-width: 230px;
        height: auto;
        margin-right: 16px;
    }
    #maintop .belleb-worry .txtb ul,
    #maintop .belleb-worry .txta ul {
        width: auto;
        overflow: hidden;
    }
}

/* �إå��`���� SNS */
header { position: relative; }
.belleb-sns {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    gap: 10px;
    align-items: center;
}
.belleb-sns li { margin: 0; }
.belleb-sns a {
    display: inline-block;
    line-height: 0;
    transition: opacity .2s;
}
.belleb-sns a:hover { opacity: 0.75; }
.belleb-sns img {
    width: 32px;
    height: 32px;
    display: block;
    max-width: none;
}
/* 配置：SNS 左 / キャッチコピー 右（既定） */
header.belleb-sns-pos-left .belleb-sns { float: left; }
header.belleb-sns-pos-left h1 { float: right; text-align: right; }
/* 配置：SNS 右 / キャッチコピー 左 */
header.belleb-sns-pos-right .belleb-sns { float: right; }
header.belleb-sns-pos-right h1 { float: left; text-align: left; }
@media (max-width: 640px) {
    .belleb-sns { padding: 6px 8px; gap: 8px; }
    .belleb-sns img { width: 28px; height: 28px; }
}


/* ============================================================
   モバイル対応：ハンバーガーメニュー & CTA
   ============================================================ */

/* ハンバーガーボタン（既定は非表示、モバイル時のみ表示） */
#menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
}
#menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
    margin: 0 auto;
}
#menu-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menu-toggle.is-active span:nth-child(2) { opacity: 0; }
#menu-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* CTA 電話ボタン（既定は非表示） */
.cta-phone { display: none; clear: both; }

/* メニュー背景（モバイル時のみ） */
#menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 998;
}

/* スクロール固定 */
body.menu-open { overflow: hidden; }

/* ============================================================
   モバイル：≤640px
   ============================================================ */
@media (max-width: 640px) {
    /* ハンバーガー表示 */
    #menu-toggle { display: flex; }

    /* ヘッダー詰める：legacy の float を解除し縦積みに */
    #wrap > header {
        position: relative;
        width: auto;
        padding: 4px 60px 4px 12px; /* 右側にハンバーガー領域 */
        overflow: hidden; /* float クリア */
        text-align: left;
    }
    #wrap > header h1,
    #wrap > header h2,
    #wrap > header #hd,
    #wrap > header .belleb-sns {
        float: none !important;
        clear: none;
        width: auto;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    #wrap > header h1 {
        font-size: 11px;
        line-height: 1.3;
        margin-bottom: 2px;
    }
    #wrap > header h2 { padding: 1px 0; }
    #wrap > header h2 img { max-width: 200px; height: auto; }
    #wrap > header #hd { display: none; } /* PC 用電話画像（CTA で代替） */
    #wrap > header .belleb-sns {
        padding: 4px 0 3px;
        gap: 8px;
    }
    #wrap > header .belleb-sns img { width: 28px; height: 28px; }

    /* SNS バーとハンバーガーボタンの上端をヘッダー上端に揃える */
    #menu-toggle { top: 2px; right: 8px; }

    /* モバイル用 Hotpepper バナー（フッター直前） */
    .belleb-mobile-hotpepper { display: block; text-align: center; padding: 4px 8px 0px; background: #fff; line-height: 0; }
    .belleb-mobile-hotpepper img { max-width: 100%; height: auto; display: inline-block; vertical-align: bottom; }

    /* メニューを右からスライドイン */
    nav#menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        box-shadow: -4px 0 12px rgba(0,0,0,.15);
        z-index: 999;
        transition: right .3s ease;
        overflow-y: auto;
        padding: 0;
    }
    nav#menu.is-open { right: 0; }
    #menu-backdrop[hidden] { display: none; }

    /* メニュー中身を縦並び（既存の横スクロール用 flex を上書き） */
    nav#menu ul#menuBody {
        display: block;
        flex-wrap: nowrap;
        overflow: visible;
        padding: 64px 0 24px;
        width: 100%;
        height: auto;
        position: static;
    }
    nav#menu ul#menuBody li {
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #eee;
    }
    nav#menu ul#menuBody li a {
        display: block;
        width: 100%;
        padding: 16px 20px;
        font-size: 15px;
        white-space: normal;
        text-align: left;
    }
    nav#menu ul.nav { width: 100%; height: auto; }

    /* CTA 全幅ボタン */
    .cta-phone {
        display: block;
        clear: both;
        width: 100%;
        padding: 16px;
        background: #ff5a5f;
        color: #fff;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
        border: 0;
        box-sizing: border-box;
    }
    .cta-phone:hover,
    .cta-phone:focus { color: #fff; opacity: .92; }
}

/* ============================================================
   タブレット：≤900px の追加調整
   ============================================================ */
@media (max-width: 900px) {
    #wrap { width: auto; max-width: 100%; }
    #maintop, .belleb-bottom { width: auto; max-width: 100%; }
    /* legacy .bkm は「機器写真の背景画像 + 右側に Menu/Machine の
       黒バナーが前景でオーバーラップ」というレイアウト。
       スマホでも前後の重なりを保ったまま等比縮小する。 */
    .bkm {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        /* bkmenu.jpg の縦横比に合わせる（横長の機器写真） */
        aspect-ratio: 760 / 266;
        padding: 0;
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
        margin: 0 auto 24px;
        overflow: visible;
    }
    .bkm ul {
        list-style: none;
        margin: 0;
        padding: 0;
        /* 背景画像の右側に前景でオーバーラップ表示 */
        position: absolute;
        top: 12%;
        right: 0;
        width: 58%;
    }
    .bkm ul li {
        margin: 0 0 5% 0;
    }
    .bkm ul li:last-child { margin-bottom: 0; }
    .bkm img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* フッターCTA：固定幅を解除して折り返し */
    footer #ftb {
        width: auto;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }
    footer #ftb .fb,
    footer #ftb .fb2 {
        float: none;
        width: auto;
        background-image: none; /* 固定幅前提の装飾を解除 */
        padding: 10px;
        text-align: center;
    }
    footer #ftb .fb ul,
    footer #ftb .fb2 ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    footer #ftb .fb li,
    footer #ftb .fb2 li { margin: 0; }
    footer #ftb .fb img,
    footer #ftb .fb2 img { max-width: 100%; height: auto; }
}

/* ============================================================
   モバイル：≤640px の追加調整（フッターCTA）
   ============================================================ */
@media (max-width: 640px) {
    footer #ftb .fb { padding: 14px 10px; }
    footer #ftb .fb ul { flex-direction: column; align-items: center; gap: 8px; }
    footer #ftb .fb2 { padding: 6px 10px; }
    footer #ftb .fb2 ul { gap: 8px; }
    footer #ftb .fb2 li { flex: 0 1 calc(50% - 4px); }
    footer #ftb .fb2 li a { display: block; }
    footer #ftb .fb2 li img { width: 100%; height: auto; display: block; }
}


/* ============================================================
   インポート済み固定ページ（body / face / bridal / machine /
   menu / access / flow / contact など）モバイル対応
   レガシー concrete5 構造（#mainc / #maincc / .br / #side /
   .txtmL / .btbl01..12 / aside / .flickslide）の固定幅を解除
   ============================================================ */

/* 全画面共通：本文内の画像は決して画面外にはみ出さない */
.belleb-section img,
#mainc img,
#maincc img,
.belleb-section table,
.belleb-section iframe {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
.belleb-section iframe { width: 100%; }

@media (max-width: 900px) {
    /* レガシー本文ラッパー */
    #mainc,
    #mainc #maincc {
        width: auto !important;
        max-width: 100%;
        float: none !important;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }
    #mainc #side {
        float: none !important;
        width: auto !important;
        margin-top: 24px;
    }
    /* 強調ブロック */
    #mainc #maincc .br {
        width: auto !important;
        background-image: none;
        padding: 16px;
        box-sizing: border-box;
    }
    /* トップ見出し画像（h3 内 width="980"） */
    #mainc > h3 img,
    .belleb-section h3 img.ccm-image-block {
        width: 100% !important;
        height: auto !important;
    }
    /* aside（インポート時に残る側部ブロック） */
    .belleb-section aside,
    #wrap > aside {
        width: auto !important;
        max-width: 100%;
        float: none !important;
        margin: 16px 0;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    /* 本文セクション */
    #mainc {
        padding-left: 10px;
        padding-right: 10px;
    }
    #mainc #maincc section.mb {
        margin-bottom: 28px;
    }
    /* 見出し縮小 */
    #wrap h4 { font-size: 118%; padding: 6px 0; }
    #wrap h5 { font-size: 105%; padding: 5px; }
    #mainc #maincc .br h4 { font-size: 115%; padding-left: 28px; }

    /* 画像と本文：横並びをやめて縦積み */
    #mainc #maincc section .txtmL { padding-top: 4px; }
    #mainc #maincc section .txtmL img,
    #mainc #maincc .br .txtmL img,
    #mainc #maincc section .voicebk img {
        float: none !important;
        display: block;
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 0 auto 12px !important;
    }
    /* 本文中（.textarea / .aboutLeft 内）の見出し画像・図解画像はコンテナ幅いっぱいに
       表示する。上の 320px キャップは左側の製品写真用なので、本文画像は除外する。 */
    #mainc #maincc section .txtmL .textarea img,
    #mainc #maincc section .txtmL .aboutLeft img,
    #mainc #maincc .br .txtmL .textarea img,
    #mainc #maincc .br .txtmL .aboutLeft img {
        max-width: 100%;
        width: auto;
    }

    /* 価格テーブル全般 */
    .btbl01,
    .btbl03,
    .btbl11,
    .btbl12,
    #mainc #maincc section .txtmL .btbl02 {
        width: 100% !important;
        font-size: 90%;
        box-sizing: border-box;
    }
    .btbl01 th,
    .btbl03 th,
    .btbl11 th,
    .btbl12 th,
    .btbl01 td,
    .btbl03 td,
    .btbl11 td,
    .btbl12 td {
        padding: 8px 6px;
        word-break: break-word;
    }
    /* 料金列（td:not(:first-child)）は折り返さない：「￥6,000」が縦積みされる問題を防ぐ
       ※ .btbl03 は説明テーブル（th=見出し / td=本文）のため除外 */
    .btbl01 td:not(:first-child),
    .btbl11 td:not(:first-child),
    .btbl12 td:not(:first-child),
    .btbl01 th:not(:first-child),
    .btbl11 th:not(:first-child),
    .btbl12 th:not(:first-child) {
        white-space: nowrap;
        word-break: keep-all;
        text-align: center;
        width: 1%;
    }
    /* .btbl03（説明テーブル）：th を黒帯フル幅、td を下に縦積みで全文表示 */
    .btbl03,
    .btbl03 tbody,
    .btbl03 tr,
    .btbl03 th,
    .btbl03 td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .btbl03 th {
        background-color: #000;
        color: #fff;
        text-align: left;
        padding: 10px 12px;
        border: 1px solid #575757;
        border-bottom: none;
        font-weight: normal;
    }
    .btbl03 td {
        white-space: normal;
        word-break: break-word;
        text-align: left;
        padding: 12px;
        border: 1px solid #575757;
        border-top: none;
        margin-bottom: 12px;
        background: #fff;
    }
    /* btbl11（フロー型）の li を縦積みに */
    .btbl11 ul li {
        float: none;
        display: inline-block;
        margin-right: 4px;
        margin-bottom: 4px;
        background-image: none;
        padding: 2px 12px;
    }
    .btbl11 th img { width: 110px; }

    /* 機材比較系 .tbl-m */
    .tbl-m { width: 100% !important; }
    .tbl-m,
    .tbl-m tbody,
    .tbl-m tr,
    .tbl-m td {
        display: block;
        width: 100% !important;
    }
    #mainc #maincc section .txtmL .tbl-m td img {
        width: 100%;
        max-width: 280px;
    }

    /* CTA ボックス（.mc）：PCで display:none。モバイルで表示する場合のみ整形 */
    .mc {
        float: none;
        width: 100%;
        clear: both;
    }
    .mc ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
    .mc ul li { float: none !important; flex: 1 1 auto; }
    .mc ul li img { width: 100%; height: auto; }

    /* 一覧 */
    .clist { margin-bottom: 32px; }

    /* インライン width/height 属性が付いた古い img を強制レスポンシブ化 */
    .belleb-section img[width],
    #mainc img[width] {
        width: auto;
        max-width: 100%;
        height: auto;
    }

    /* スライダー（flickslide）保険 */
    #mainImages,
    .flickslide,
    .flickslide ul,
    .flickslide li,
    .flickslide img {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        box-sizing: border-box;
    }
}


/* ============================================================
   インポート済みページのモバイル微調整（追加）
   - PC 右側サイド（#side / aside ナビ）を非表示
   - flow など .txtL / .txtR / .txt の画像float解除→画像下に文章
   ============================================================ */
@media (max-width: 640px) {
    /* PC 用サイドバー（ご挨拶ナビ・バナー・サロン案内ボックスなど）を非表示 */
    #mainc #side,
    .belleb-section #side,
    #wrap #side {
        display: none !important;
    }

    /* maincc を全幅に */
    #mainc #maincc {
        width: 100% !important;
        float: none !important;
    }

    /* .txtL / .txtR / .txt 画像を縦積みに（テキストは画像下） */
    .belleb-section .txtL,
    .belleb-section .txtR,
    .belleb-section .txt,
    #mainc .txtL,
    #mainc .txtR,
    #mainc .txt {
        overflow: visible;
    }
    .belleb-section .txtL img,
    .belleb-section .txtR img,
    .belleb-section .txt img,
    #mainc .txtL img,
    #mainc .txtR img,
    #mainc .txt img {
        float: none !important;
        display: block;
        margin: 0 auto 14px !important;
        max-width: 100%;
        height: auto;
    }
}


/* epi ページ：モバイルでは「追加情報」セクションを非表示 */
@media (max-width: 640px) {
    .epi-extra { display: none !important; }
}


/* PC：本文先頭の装飾見出し画像（h3 内）を中央寄せ
   レガシー CSS では h3 { width:980px; margin:0 auto } だが、theme の #wrap が
   1100px に拡張されているため h3 自体を auto 幅にし、内部 img をブロック中央寄せに統一 */
#wrap > h3,
.belleb-section h3,
.belleb-section article h3 {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 40px !important;
    text-align: center !important;
}
#wrap > h3 > img,
#wrap > h3 img.ccm-image-block,
.belleb-section h3 > img,
.belleb-section h3 img.ccm-image-block {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
    height: auto;
    float: none !important;
}

/* インポート済みコンテンツ内の concrete5 画像ブロックをモバイルでのみ強制レスポンシブ
   PC 表示は元のレイアウト（980px の枠飾り画像など）を保つため、≤640px 限定で適用 */
@media (max-width: 640px) {
    .belleb-section img.ccm-image-block,
    .belleb-section .ccm-image-block img,
    .belleb-section h3 img,
    #wrap img.ccm-image-block {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* インポート時に残る重複 #wrap（content 内）を全幅化 */
    .belleb-section #wrap {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
    }
}

/* 固定ページ（page.php）：レガシーレイアウト（#mainc / #side / h3 装飾画像 等）を
   そのまま使うため、theme 側の余白・装飾はすべてゼロにする */
main.belleb-page,
main.belleb-page > article,
main.belleb-page .belleb-page-content {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
}
/* インポートコンテンツに紛れ込む WP 自動の見出し等は念のため非表示 */
main.belleb-page > article > .entry-title,
main.belleb-page > article > header.entry-header { display: none; }

/* 脱毛ページ：先頭装飾画像も中央寄せ（width:980 の固定幅 PNG） */
main.belleb-epi > img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* PC: .txtmL 内の画像と価格テーブル（.btbl01 など）を上端揃えで横並びに
   wpautop による空 <p>/<br> 挿入で table が下に押し下げられる問題を補正
   モバイルは別途 ≤640px 媒体クエリで縦積み済みのため、ここは ≥641px に限定 */
@media (min-width: 641px) {
    #mainc #maincc section .txtmL,
    #mainc #maincc .br .txtmL {
        overflow: hidden;
    }
    /* wpautop が <img>/<table> を包み込んだ <p> をレイアウトから除外
       → 直下の img/table が .txtmL の直接の子のように振る舞う */
    #mainc #maincc .txtmL > p {
        display: contents;
    }
    #mainc #maincc section .txtmL img,
    #mainc #maincc section .txtmL > p > img,
    #mainc #maincc .br .txtmL img,
    #mainc #maincc .br .txtmL > p > img {
        float: left;
        margin: 0 20px 20px 0 !important;
    }
    /* 価格テーブルも左フロートにして画像と上端揃え */
    #mainc #maincc section .txtmL > table,
    #mainc #maincc section .txtmL > p > table,
    #mainc #maincc .br .txtmL > table,
    #mainc #maincc .br .txtmL > p > table,
    #mainc #maincc section .txtmL .btbl01,
    #mainc #maincc section .txtmL .btbl02,
    #mainc #maincc section .txtmL .btbl03 {
        float: left;
        margin-top: 0 !important;
    }
    /* wpautop が img と table の間に差し込む空 <p> / <br> を無効化 */
    #mainc #maincc .txtmL > p:empty,
    #mainc #maincc .txtmL > br {
        display: none !important;
    }
}

/* ============================================================
   トップへ戻るボタン（右下固定・ページ下部到達時のみ表示）
   ============================================================ */
.belleb-backtop {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    width: 62px;
    height: 63px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.belleb-backtop[hidden] { display: none; }
.belleb-backtop.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.belleb-backtop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.belleb-backtop:hover { opacity: .85; }
.belleb-backtop:focus-visible { outline: 2px solid #c8a25b; outline-offset: 2px; }

@media (max-width: 640px) {
    .belleb-backtop {
        width: 48px;
        height: 48px;
        right: 10px;
        bottom: 10px;
    }
}
/* ============================================================
   ヘッダーロゴ：分割表示（マーク + 説明テキスト）& 動的効果
   原站レイアウト（h2 内に 1 枚の結合画像が並ぶ）と同じ見た目を保つため、
   2 枚の画像を inline-block で水平に隣接配置し、合計サイズ・配置を維持する。
   ============================================================ */
header h2 .belleb-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 0;
    text-decoration: none;
}
header h2 .belleb-logo-link .belleb-logo-mark,
header h2 .belleb-logo-link .belleb-logo-text {
    display: inline-block;
    vertical-align: middle;
    max-width: none;
    height: auto;
}
/* マークは独立した要素として、アニメーションの transform-origin / overflow を制御 */
header h2 .belleb-logo-link .belleb-logo-mark {
    position: relative;
    transform-origin: center center;
    will-change: transform, opacity, filter;
}

/* PC：原站の結合ロゴ（670×130）相当の表示高さを基準にし、
   ユーザーが大きい画像を差し替えても等比縮小で破綻しないようにする。
   マーク部分は元画像の比率（245:130 ≒ 1.88）でテキストと縦中心揃え。 */
header h2 .belleb-logo-link .belleb-logo-mark,
header h2 .belleb-logo-link .belleb-logo-text {
    max-height: 180px;
    width: auto;
}
header h2 .belleb-logo-link .belleb-logo-mark {
    max-width: 340px;
}
header h2 .belleb-logo-link .belleb-logo-text {
    max-width: 425px;
}

/* モバイル：legacy 用に max-width:200px が h2 img へ適用されるため、
   分割版でも合計幅がほぼ同じになるよう mark / text 比率（245:425 ≒ 36:64）で配分 */
@media (max-width: 640px) {
    #wrap > header h2 .belleb-logo-link {
        max-width: 340px;
        width: 100%;
    }
    #wrap > header h2 .belleb-logo-link .belleb-logo-mark {
        width: 36%;
        max-width: 130px;
        height: auto;
    }
    #wrap > header h2 .belleb-logo-link .belleb-logo-text {
        width: 64%;
        max-width: none;
        height: auto;
    }
}

/* ---- 動的効果：パルス（拡大縮小） ---- */
@keyframes belleb-logo-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.belleb-logo-anim-pulse .belleb-logo-mark {
    animation: belleb-logo-pulse 2.4s ease-in-out infinite;
}

/* ---- 動的効果：ブリージング（呼吸 / ソフトグロー） ---- */
@keyframes belleb-logo-breathe {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 0 rgba(242, 34, 78, 0));
    }
    50% {
        opacity: .85;
        filter: drop-shadow(0 0 8px rgba(242, 34, 78, .55));
    }
}
.belleb-logo-anim-breathe .belleb-logo-mark {
    animation: belleb-logo-breathe 3s ease-in-out infinite;
}

/* ---- 動的効果：シャイン（光沢フラッシュ） ---- */
@keyframes belleb-logo-shine {
    0%, 70%, 100% {
        filter: brightness(1) drop-shadow(0 0 0 rgba(255,215,128,0));
    }
    80% {
        filter: brightness(1.15) drop-shadow(0 0 10px rgba(255,215,128,.85));
    }
    90% {
        filter: brightness(1.05) drop-shadow(0 0 6px rgba(255,215,128,.55));
    }
}
.belleb-logo-anim-shine .belleb-logo-mark {
    animation: belleb-logo-shine 3.6s ease-in-out infinite;
}

/* ホバー時にアニメ強調 + 軽い浮き */
header h2 .belleb-logo-link:hover .belleb-logo-mark {
    animation-duration: 1.2s;
}
header h2 .belleb-logo-link:focus-visible {
    outline: 2px solid #c8a25b;
    outline-offset: 3px;
    border-radius: 4px;
}

/* アクセシビリティ：モーション削減設定の尊重 */
@media (prefers-reduced-motion: reduce) {
    .belleb-logo-anim-pulse .belleb-logo-mark,
    .belleb-logo-anim-breathe .belleb-logo-mark,
    .belleb-logo-anim-shine .belleb-logo-mark {
        animation: none;
    }
}

/* ============================================================
   お問い合わせフォーム（[belleb_contact_form]）
   既存の .tbl / .txt スタイルと協調するよう最小限の追加のみ
   ============================================================ */
.belleb-contact { margin-top: 8px; }
.belleb-contact .belleb-contact-lead {
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 12px;
}
.belleb-contact .belleb-contact-required { color: #c8202e; }

.belleb-contact .belleb-contact-msg {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.7;
}
.belleb-contact .belleb-contact-success {
    background: #eaf6ec;
    border: 1px solid #b9dec0;
    color: #1e6b2c;
}
.belleb-contact .belleb-contact-error {
    background: #fdecec;
    border: 1px solid #f3b9b9;
    color: #a3232f;
    list-style: none;
    padding-left: 14px;
}
ul.belleb-contact-error li { margin-left: 18px; list-style: disc; }

.belleb-contact .belleb-contact-tbl { width: 100%; }
.belleb-contact .belleb-contact-tbl th { white-space: nowrap; }
.belleb-contact .belleb-contact-tbl td { padding: 8px 10px; }

.belleb-contact-form input[type="text"],
.belleb-contact-form input[type="tel"],
.belleb-contact-form input[type="email"],
.belleb-contact-form textarea {
    width: 100%;
    max-width: 520px;
    padding: 8px 10px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.5;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
}
.belleb-contact-form textarea {
    max-width: 100%;
    min-height: 140px;
    resize: vertical;
}
.belleb-contact-form input:focus,
.belleb-contact-form textarea:focus {
    outline: none;
    border-color: #c8a25b;
    box-shadow: 0 0 0 2px rgba(200, 162, 91, .25);
}

.belleb-contact-actions {
    text-align: center;
    margin: 18px 0 0;
}
.belleb-contact-btn {
    display: inline-block;
    min-width: 200px;
    padding: 12px 32px;
    background: #c8a25b;
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-size: 15px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}
.belleb-contact-btn:hover  { background: #b08e4d; }
.belleb-contact-btn:active { transform: translateY(1px); }
.belleb-contact-btn:focus-visible {
    outline: 2px solid #c8a25b;
    outline-offset: 2px;
}

/* セカンダリボタン（戻る） */
.belleb-contact-btn-secondary {
    background: #888;
    margin-right: 12px;
}
.belleb-contact-btn-secondary:hover { background: #6f6f6f; }

/* 確認画面の読み取り専用表示 */
.belleb-contact-readonly {
    display: block;
    min-height: 1.5em;
    padding: 8px 10px;
    background: #f7f5ef;
    border: 1px solid #e3dccb;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
}
.belleb-contact-readonly-multiline {
    white-space: pre-wrap;
    min-height: 5em;
}

/* モバイル：ラベルとフィールドを縦積み（既存 .tbl の挙動と整合） */
@media (max-width: 640px) {
    .belleb-contact .belleb-contact-tbl,
    .belleb-contact .belleb-contact-tbl tbody,
    .belleb-contact .belleb-contact-tbl tr,
    .belleb-contact .belleb-contact-tbl th,
    .belleb-contact .belleb-contact-tbl td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    /* legacy .tbl th は濃色背景＋白文字のため、モバイルではラベルが
       白地に消えてしまう。背景・文字色・配置を明示的に上書きする。 */
    .belleb-contact .belleb-contact-tbl th,
    .belleb-contact .belleb-contact-tbl tr > th[scope="row"] {
        text-align: left !important;
        padding: 12px 0 4px !important;
        background: transparent !important;
        color: #333 !important;
        border: 0 !important;
        font-weight: bold;
        white-space: normal;
    }
    .belleb-contact .belleb-contact-tbl th label {
        color: inherit;
        font-weight: inherit;
    }
    .belleb-contact .belleb-contact-tbl td {
        padding: 0 0 10px !important;
        border: 0 !important;
        background: transparent !important;
    }
    .belleb-contact-form input[type="text"],
    .belleb-contact-form input[type="tel"],
    .belleb-contact-form input[type="email"],
    .belleb-contact-form textarea {
        max-width: 100%;
    }
    .belleb-contact-actions { margin-top: 10px; }
    .belleb-contact-btn { width: 100%; min-width: 0; }
    .belleb-contact-btn-secondary { margin: 0 0 10px; }
}