/*
Theme Name: BusinessPress Child
Theme URI: https://businesspress.jp/theme/
Template: businesspress
Author: BusinessPress
Author URI: https://businesspress.jp/
Description: BusinessPress ia a simple and beautiful business WordPress theme. You can create a website of corporate, group, freelance and so on.
Tags: one-column,two-columns,right-sidebar,custom-colors,custom-header,custom-logo,custom-menu,editor-style,featured-images,footer-widgets,microformats,post-formats,sticky-post,theme-options,threaded-comments,translation-ready
Version: 2.0.1.1771224100
Updated: 2026-02-16 15:35:00
*/

/* ============================================================
   くすの木タイ古式サロン＆スクール カスタムスタイル
   
   プロジェクト: Webサイト構造改修
   作成日: 2026年2月3日
   更新日: 2026年2月3日 12:06（レスポンシブ改善）
   作成者: 佐藤 美咲（UI/UX Designer）
   
   目的:
   - 30-50代のターゲット層に最適化された視認性の高いデザイン
   - ゴシック体への完全統一
   - フォントサイズ18pxベース
   - レスポンシブ対応（モバイルファースト）
============================================================ */


/* ============================================================
   CSS変数定義（一元管理）
============================================================ */
:root {
    /* フォント */
    --font-family-base: "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-size-base: 18px;
    --font-size-base-mobile: 16px;
    --line-height-base: 1.8;

    /* 見出しサイズ（モバイル） */
    --font-size-h1-mobile: 1.75rem;
    /* 約28px */
    --font-size-h2-mobile: 1.5rem;
    /* 約24px */
    --font-size-h3-mobile: 1.3rem;
    /* 約20.8px */
    --font-size-h4-mobile: 1.15rem;
    /* 約18.4px */
    --font-size-h5-mobile: 1rem;
    /* 16px */
    --font-size-h6-mobile: 0.9rem;
    /* 約14.4px */

    /* 見出しサイズ（PC） */
    --font-size-h1-pc: 2.5rem;
    /* 約45px */
    --font-size-h2-pc: 2rem;
    /* 約36px */
    --font-size-h3-pc: 1.75rem;
    /* 約31.5px */
    --font-size-h4-pc: 1.5rem;
    /* 約27px */
    --font-size-h5-pc: 1.25rem;
    /* 約22.5px */
    --font-size-h6-pc: 1.1rem;
    /* 約19.8px */

    /* カラー */
    --color-text: #333333;
    --color-bg: #ffffff;
    --color-border: #dddddd;
    --color-table-bg: #f4f5f6;

    /* レスポンシブブレイクポイント */
    /* 768px: タブレット、1024px: PC */
}


/* ============================================================
   フォント強制統一（親テーマの明朝体を無効化）
============================================================ */

/* HTML要素のフォントサイズ上書き（親テーマが68%に縮小しているため） */
html,
html:lang(ja) {
    font-size: 100% !important;
}

/* Body および全要素にゴシック体を強制適用 */
body,
body:lang(ja) {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base-mobile);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg) !important;
    font-weight: 500;
}

/* 継承されにくい要素への明示的指定 */
p,
li,
dd,
dt,
td,
th,
caption,
input,
textarea,
select,
button,
label,
legend,
fieldset,
address,
blockquote,
pre,
code {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base-mobile);
    line-height: var(--line-height-base);
}

/* 見出しもゴシック体に統一 + モバイル向けサイズ設定 */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
    font-family: var(--font-family-base) !important;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

h1 {
    font-size: var(--font-size-h1-mobile) !important;
}

h2 {
    font-size: var(--font-size-h2-mobile) !important;
}

h3 {
    font-size: var(--font-size-h3-mobile) !important;
}

h4 {
    font-size: var(--font-size-h4-mobile) !important;
}

h5 {
    font-size: var(--font-size-h5-mobile) !important;
}

h6 {
    font-size: var(--font-size-h6-mobile) !important;
}


/* ============================================================
   レスポンシブ: タブレット以上（768px以上）
============================================================ */
@media screen and (min-width: 768px) {

    body,
    body:lang(ja) {
        font-size: var(--font-size-base);
    }

    p,
    li,
    dd,
    dt,
    td,
    th,
    caption,
    input,
    textarea,
    select,
    button,
    label,
    legend,
    fieldset,
    address,
    blockquote,
    pre,
    code {
        font-size: var(--font-size-base);
    }

    /* 見出しをPC向けサイズに */
    h1 {
        font-size: var(--font-size-h1-pc) !important;
    }

    h2 {
        font-size: var(--font-size-h2-pc) !important;
    }

    h3 {
        font-size: var(--font-size-h3-pc) !important;
    }

    h4 {
        font-size: var(--font-size-h4-pc) !important;
    }

    h5 {
        font-size: var(--font-size-h5-pc) !important;
    }

    h6 {
        font-size: var(--font-size-h6-pc) !important;
    }
}


/* ============================================================
   画像のレスポンシブ対応
============================================================ */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

figure img,
.entry-content img,
.wp-caption img {
    max-width: 100%;
    ;
    height: auto;
}


/* ============================================================
   テーブルのスタイル改善
============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.8em;
    font-size: var(--font-size-base-mobile);
}

th,
td {
    padding: 1em;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

th {
    background-color: var(--color-table-bg);
    font-weight: 600;
}

caption {
    margin-bottom: 0.8em;
    font-weight: 600;
    text-align: left;
}

/* レスポンシブテーブル: スマートフォン（767px以下）で縦積み */
@media screen and (max-width: 767px) {

    /* オプション1: 縦積み（推奨） */
    table.responsive-stack {
        display: block;
        overflow-x: auto;
    }

    table.responsive-stack thead {
        display: none;
    }

    table.responsive-stack tbody,
    table.responsive-stack tr,
    table.responsive-stack th,
    table.responsive-stack td {
        display: block;
        width: 100%;
    }

    table.responsive-stack tr {
        margin-bottom: 1.5em;
        border: 1px solid var(--color-border);
    }

    table.responsive-stack td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-top: none;
    }

    table.responsive-stack td:before {
        content: attr(data-label);
        position: absolute;
        left: 1em;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
    }

    /* オプション2: 横スクロール（コンテンツによっては有用） */
    table.responsive-scroll {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* タブレット以上: テーブルフォントサイズ */
@media screen and (min-width: 768px) {
    table {
        font-size: var(--font-size-base);
    }
}


/* ============================================================
   リストのスタイル改善
============================================================ */
ul,
ol {
    margin-bottom: 1.8em;
    line-height: var(--line-height-base);
}

li {
    margin-bottom: 0.5em;
}


/* ============================================================
   フォーム要素の改善
============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
    font-size: var(--font-size-base-mobile);
    line-height: var(--line-height-base);
    padding: 0.8em;
    border: 1px solid var(--color-border);
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-size: var(--font-size-base-mobile);
    padding: 0.8em 1.5em;
}

@media screen and (min-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    textarea,
    select,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        font-size: var(--font-size-base);
    }
}


/* ============================================================
   アクセシビリティ: フォーカス時の視認性向上
============================================================ */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #4693f5;
    outline-offset: 2px;
}


/* ============================================================
   その他の調整
============================================================ */

/* 引用 */
blockquote {
    font-size: var(--font-size-base-mobile);
    line-height: var(--line-height-base);
}

@media screen and (min-width: 768px) {
    blockquote {
        font-size: var(--font-size-base);
    }
}

/* コード */
code,
pre {
    font-family: Consolas, "Courier New", monospace;
    font-size: 90%;
}

/* アドレス */
address {
    font-style: normal;
    line-height: var(--line-height-base);
}


/* ============================================================
   背景色の統一（全体を白に）
============================================================ */
/* サイト全体の背景を確実に白にする */
html,
body,
#page,
#content,
.site,
.site-content,
.entry-content,
article,
main,
.main-content,
.content-area,
#primary,
#secondary,
.widget-area {
    background-color: var(--color-bg) !important;
}

/* 投稿・固定ページの本文エリア */
.entry,
.page,
.post,
.single,
.page-content {
    background-color: var(--color-bg) !important;
}



/* ============================================================
   ユーティリティクラス
============================================================ */

/* テキスト中央揃え */
.text-center {
    text-align: center;
}

/* テキスト右揃え */
.text-right {
    text-align: right;
}

/* マージン調整 */
.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-1 {
    margin-top: 1em !important;
}

.mb-1 {
    margin-bottom: 1em !important;
}

.mt-2 {
    margin-top: 2em !important;
}

.mb-2 {
    margin-bottom: 2em !important;
}


/* ============================================================
   印刷用スタイル
============================================================ */
@media print {
    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    /* ナビゲーションなど不要な要素を非表示 */
    nav,
    .no-print {
        display: none !important;
    }
}


/* ============================================================
   カスタマイズ終了
============================================================ */


/* ============================================================
   サロンメニュー一覧（Page ID 73 専用） - Premium & Calm Design
   作成日: 2026-02-09
   Concept: 上質、安らぎ、信頼
============================================================ */

/* セクション全体 */
.salon-menu-section {
    margin-top: 4em;
    margin-bottom: 5em;
    padding: 0 1rem;
}

/* 見出し */
.salon-menu-heading {
    text-align: center;
    margin-bottom: 0.5em;
    font-size: 2rem !important;
    /* SP default */
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #333;
}

/* リード文 */
.salon-menu-lead {
    text-align: center;
    margin-bottom: 3.5em;
    font-size: 1rem;
    color: #666;
    letter-spacing: 0.05em;
}

/* グリッドレイアウト */
.salon-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* SP: 1 column */
    gap: 3rem;
    /* 大きめの余白 */
    max-width: 1200px;
    margin: 0 auto;
}

/* カードコンポーネント */
.salon-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
    /* 柔らかい影 */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.salon-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.12);
}

.salon-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 画像エリア */
.salon-card__image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    /* 少し横長に */
    overflow: hidden;
    background-color: #f5f5f5;
    position: relative;
}

.salon-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    /* ゆっくりとしたズーム */
}

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

.salon-card__no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ccc;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* カード本文 */
.salon-card__body {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.salon-card__title {
    font-size: 1.4rem !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    line-height: 1.5;
    color: #333;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.8rem;
    transition: border-color 0.3s ease;
}

.salon-card:hover .salon-card__title {
    border-color: #eb6ea5;
    /* ブランドカラーをアクセントに */
}

.salon-card__text {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #666;
    margin-bottom: 2rem;
    flex-grow: 1;
    /* フッターを下に押しやる */
}

/* カードフッター（ボタンエリア） */
.salon-card__footer {
    margin-top: auto;
    text-align: right;
    /* 右寄せでエレガントに */
}

.salon-btn {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    /* ダークグレー */
    letter-spacing: 0.1em;
    position: relative;
    padding-right: 1.5em;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.salon-btn::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.salon-card:hover .salon-btn {
    color: #eb6ea5;
    /* ホバーでブランドカラー */
}

.salon-card:hover .salon-btn::after {
    transform: translateY(-50%) translateX(5px);
}

/* レスポンシブ: タブレット以上（768px以上） */
@media screen and (min-width: 768px) {
    .salon-menu-heading {
        font-size: 2.5rem !important;
    }

    .salon-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Tablet: 2 columns */
        gap: 2.5rem;
    }
}

/* レスポンシブ: PC（1024px以上） */
@media screen and (min-width: 1024px) {
    .salon-grid {
        grid-template-columns: repeat(3, 1fr);
        /* PC: 3 columns */
        gap: 3rem;
    }

    .salon-card__body {
        padding: 2.5rem;
    }
}


/* ============================================================
   背景色変更後の視認性改善（2026年2月14日追加）
   目的: 背景色を白に変更したことで視認性が低下した箇所を改善
============================================================ */

/* ============================================================
   1. ページトップ戻りボタンの視認性向上
============================================================ */
.scroll-to-top,
#scroll-to-top,
.page-top,
a[href="#top"],
.back-to-top,
.to-top {
    background-color: rgba(51, 51, 51, 0.7) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

.scroll-to-top:hover,
#scroll-to-top:hover,
.page-top:hover,
a[href="#top"]:hover,
.back-to-top:hover,
.to-top:hover {
    background-color: rgba(51, 51, 51, 0.9) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-2px) !important;
}


/* ============================================================
   2. セクション境界の明確化
============================================================ */

/* 注：フッターは元のテーマの背景色（濃い茶色）を維持 */
/* 元のデザインとの整合性を保つため、フッター背景色の上書きは行わない */

/* 重要セクションの視覚的分離 */
.testimonials,
.customer-voice,
.voice-section,
section[class*="voice"],
section[class*="testimonial"] {
    background-color: #fafafa !important;
    padding: 3em 1em !important;
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}


/* ============================================================
   3. ヒーロー画像上のテキスト視認性向上
============================================================ */

/* ヒーロー画像のオーバーレイ */
.hero-image,
.main-visual,
.page-header.has-background,
.entry-header.has-background,
.header-image,
.top-image {
    position: relative;
}

.hero-image::before,
.main-visual::before,
.page-header.has-background::before,
.header-image::before,
.top-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
    pointer-events: none;
    z-index: 1;
}

/* ヒーロー画像上のテキストにシャドウを追加 */
.hero-image h1,
.hero-image h2,
.hero-image h3,
.hero-image p,
.main-visual h1,
.main-visual h2,
.main-visual h3,
.main-visual p,
.page-header.has-background h1,
.page-header.has-background h2,
.page-header.has-background h3,
.header-image h1,
.header-image h2,
.header-image h3,
.top-image h1,
.top-image h2,
.top-image h3 {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* entry-headerは画像がある場合のみ適用 */
.entry-header.has-post-thumbnail h1,
.entry-header.has-post-thumbnail h2 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3) !important;
}


/* ============================================================
   4. フォーム入力フィールドの境界線強化
============================================================ */

/* フォーム要素の境界線を濃く */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    border: 2px solid #c0c0c0 !important;
    transition: border-color 0.3s ease !important;
}

/* フォーカス時の境界線をより濃く */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: #888888 !important;
    outline: none !important;
}

/* 検索フォームの特別対応 */
.search-form input[type="search"],
.searchform input[type="search"],
#searchform input[type="search"] {
    border: 2px solid #c0c0c0 !important;
}



/* ============================================================
   5. フッターの背景色設定（リンク色は元のデザインを維持）
============================================================ */

/* フッターエリアに薄い背景色を追加（元の濃い茶色背景を維持） */
/* 注：フッターの背景色は元のテーマのスタイルを使用 */
/* リンク色も元のテーマのスタイル（白とオレンジ系）を使用 */


/* ============================================================
   視認性改善の終了
============================================================ */