@charset "UTF-8";

/* ============================================================
   追加CSS  最終更新 2026-05-27
   ※メインの style.css は触らず、ここに追記していくこと
   ============================================================ */


/* ------------------------------------------------------------
   tabels.row : SPでもテーブルを横並び（2カラム）維持
   使用例: <figure class="wp-block-table tabels row">...</figure>
   ------------------------------------------------------------ */

/* PC: テーブル幅を80%に縮めて中央寄せ、各セル縦中央 */
.page-inner .entry-content .tabels.row {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.page-inner .entry-content .tabels.row tr td {
    display: flex;
    align-items: center;
}

/* ------------------------------------------------------------
   tabels.row.price : 治療費用ページ専用
   1行目をヘッダー中央寄せ・2行目以降の右セルを右寄せ・列比率調整
   使用例: <figure class="wp-block-table tabels row price">...</figure>
   ------------------------------------------------------------ */

/* PC・SP共通: 左セル広め、右セル狭め */
.page-inner .entry-content .tabels.row.price tr {
    grid-template-columns: 2fr 1fr;
}

/* 1行目（ヘッダー）の両セル中央寄せ */
.page-inner .entry-content .tabels.row.price tr:first-child td {
    text-align: center;
    justify-content: center;
}

/* 2行目以降の右セル（料金）を右寄せ */
.page-inner .entry-content .tabels.row.price tr:not(:first-child) td:last-child {
    text-align: right;
    justify-content: flex-end;
}


/* ------------------------------------------------------------
   ヘッダーロゴを小さく（PC・SP）
   ------------------------------------------------------------ */
.header .logo img {
    max-width: 23rem;
}
@media (max-width: 768px) {
    .header .logo img {
        max-width: 30rem;
    }
}


/* ------------------------------------------------------------
   PC: floating-box（WEB予約・Instagram）を右下にスクロール追従
   SPは既存（画面下部固定）のまま
   ------------------------------------------------------------ */
@media (min-width: 769px) {
    .floating-box {
        position: fixed;
        top: auto;
        bottom: 2rem;
        right: 0;
    }
}


/* ------------------------------------------------------------
   PC: 固定ページ本文のテキスト系（段落・リスト）を80%幅・中央寄せ
   見出し・テーブル・画像・groupブロックには影響しない
   ------------------------------------------------------------ */
@media (min-width: 769px) {
    .page-inner .entry-content > p.wp-block-paragraph,
    .page-inner .entry-content > ul.wp-block-list {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ------------------------------------------------------------
   TOP: avoid-box リード文を中央揃え
   ------------------------------------------------------------ */
.avoid-box__main--des {
    text-align: center;
}


/* ------------------------------------------------------------
   TOP SP: ヒーロー下の余白縮小（元80rem→60rem）
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .banner {
        padding-bottom: 60rem;
    }
}


/* ------------------------------------------------------------
   TOP: avoid-box__treatment 詰まり修正
   （--desを削除した分の余白をheadのmargin-bottomで補填）
   ------------------------------------------------------------ */
.avoid-box__treatment--head {
    margin-bottom: 18rem;
}




/* ------------------------------------------------------------
   pickup-box ひよこアイコンを縮小、本文と重ならないよう調整
   全ページ共通
   ------------------------------------------------------------ */
.page-inner .entry-content .pickup-box {
    margin-top: 8rem;
}
.page-inner .entry-content .pickup-box::after {
    width: 11rem;
    height: 8.6rem;
    top: -7rem;
    left: 2rem;
}
@media (max-width: 768px) {
    .page-inner .entry-content .pickup-box {
        margin-top: 6rem;
    }
    .page-inner .entry-content .pickup-box::after {
        width: 9rem;
        height: 7rem;
        top: -5.5rem;
        left: 1rem;
    }
}

/* SP: 横並び2カラム維持＋横線復活＋左セル縦中央配置 */
@media (max-width: 768px) {
    .page-inner .entry-content .tabels.row {
        max-width: 100%;
    }
    .page-inner .entry-content .tabels.row tr {
        grid-template-columns: 22rem 1fr;
        align-items: stretch;
        border-bottom: 2px solid #f9f8f3;
    }
    .page-inner .entry-content .tabels.row tr:last-child {
        border-bottom: none;
    }
    .page-inner .entry-content .tabels.row tr td:first-child {
        text-align: center;
        font-size: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}