@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 1. 共通の基本スタイル設定（フォント・文字）
************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');

/* 固定ページのコンテンツエリア（メインの箱）の背景色を変更 */
.main {
    background-color: #FAF7F2 !important; /* 全体の背景色と同じにして境界をなくす、あるいは微調整 */
    border: none !important; /* 枠線を消してスッキリさせる */
}
/* 記事本文が載る部分の背景色 */
.content {
    background-color: transparent !important; /* 背景を透過させて全体背景に馴染ませる */
}

body {
    /* ステップ1で設定した文字色を最優先で適用 */
    font-family: YuMincho, "Yu Mincho", "游明朝", "ヒラギノ明朝 ProN W6", HiraMinProN-W6, "HG明朝E", "ＭＳ Ｐ明朝", MS PMincho, "MS 明朝", serif !important;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
}

/* タイトル・見出し（ブランドカラーを指定） */
h1, h2, h3, .noto-serif {
    font-family: "Noto Serif JP", serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: #703515 !important; /* ブランドカラー */
    border: none !important;       /* 上下左右の線をすべて消す */
    background: none !important;   /* Cocoonが勝手につけた四角い背景色を透明にする */
    padding: 0 !important;         /* 枠線の内側にあった不自然な余白をゼロにする */
}

/* 通常ページの見出し */
.entry-content h2 {
    margin-top: 2.5em;
    margin-bottom: 1.2em;
    font-size: 1.6rem;
    border-bottom: 1px solid #703515; /* ブランドカラーの下線 */
    padding-bottom: 0.5em;
}

.entry-content h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.3rem;
}


/************************************
** 2. トップページ（LP）専用のフルワイド化設定
************************************/
.home .header {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.home .content,
.home .main,
.home .entry-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

.home .footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.home .footer-in {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

.home .footer-bottom {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.home .footer-widgets {
    display: none !important;
}


/************************************
** 3. 固定ページの余白調整（PC・SP別設定）
************************************/
/* 【PC表示時】メインエリア（#main）の上の余白設定 */
html .page #main,
body.page #main {
    padding-top: 10px !important;
}

/* タイトルエリア自体が持つ不要な余白も完全に相殺 */
.page .entry-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.page .entry-content {
    margin-top: 0 !important;
}

/* article（post-xx）の直下にある最初のパーツの上マージンをリセット */
.page article > *:first-child {
    margin-top: 0 !important;
}

/* 【SP表示時】スマホの時だけ上の余白をさらに詰める */
@media screen and (max-width: 768px) {
    .page #main {
        padding-top: 0px !important;
    }
}


/************************************
** 4. 各ページで使える王道カラーのパーツ用クラス
************************************/

/* コンテンツブロック用（プラン紹介やアクセスなどの背景に） */
.bg-block-moss {
    background-color: #EFF1EC !important;
    color: #2C2623 !important;
    padding: 4% !important;
    margin-bottom: 2em;
}

/* 【主役】予約ボタン（ブランドカラー） */
.btn-reservation {
    display: inline-block;
    background-color: #703515 !important;
    color: #ffffff !important;
    padding: 16px 48px;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(112, 53, 21, 0.2);
}

.btn-reservation:hover {
    background-color: #ffffff !important;
    color: #703515 !important;
    outline: 1px solid #703515;
    transform: translateY(-2px);
}

/* 【準主役】サブボタン（アクセントカラー：くすみ金/珈琲色） */
.btn-sub-gold {
    display: inline-block;
    background-color: #9E7A5A !important; /* アクセントカラー */
    color: #ffffff !important;
    padding: 14px 40px;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-sub-gold:hover {
    background-color: #7A5B3E !important; /* 少し濃い金 */
}


/************************************
** 5. レスポンシブデザイン
************************************/
@media screen and (max-width: 480px){
    body {
        font-size: 15px;
        line-height: 1.8;
    }
    .entry-content h2 {
        font-size: 1.35rem;
        margin-top: 1.8em;
    }
    .btn-reservation, .btn-sub-gold {
        display: block;
        text-align: center;
        padding: 14px 20px;
    }
}

/************************************
** 6. 不要ボタン削除
************************************/
.page #breadcrumb,
.page .breadcrumb,
.page .pbp-main-bottom {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ページトップへ戻るボタンを非表示 */
.go-to-top {
    display: none !important;
}

/* 固定フッターメニュー・モバイル用フッターボタンを非表示 */
.footer-mobile-buttons, 
.mobile-footer-menu-buttons {
    display: none !important;
}

/* PC・スマホ共通でフッターのナビゲーションメニューを完全に非表示 */
#footer .footer-menu,
#footer .navi-footer,
#footer .menu-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/************************************
** 7. スマホヘッダーの配色調整・レイアウト
************************************/
@media screen and (max-width: 1023px) {
    /* ヘッダーバー：中身を3分割して中央を固定する */
    .mobile-header-menu-buttons {
        background-color: #FAF7F2 !important;
        color: #703515 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 65px !important;
        padding: 0 10px !important;
    }

    /* 1. メニューボタンを左側に配置 */
    .mobile-header-menu-buttons .menu-button {
        order: 1 !important;
        flex: 1 !important; /* 左側の幅を確保 */
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* 2. サイト名（ロゴ）を中央に配置 */
    .mobile-header-menu-buttons .logo-menu-button {
        order: 2 !important;
        flex: 2 !important; /* 中央を広く取る */
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* 3. 検索ボタンを「見えない重り」にして右側に置く（中央維持のため） */
    .mobile-header-menu-buttons .search-menu-button {
        order: 3 !important;
        flex: 1 !important; /* 右側の幅を確保（左のメニューボタンと合わせる） */
        visibility: hidden !important; /* 透明にするが、場所だけは確保する */
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* 文字色とフォントの調整 */
    .mobile-header-menu-buttons .site-name-text-link,
    .mobile-header-menu-buttons .menu-button > a,
    .mobile-header-menu-buttons .menu-button .caption-logo {
        color: #703515 !important;
    }

    /* タイトルの文字サイズ微調整（はみ出し防止） */
    .mobile-header-menu-buttons .site-name-text-link {
        font-size: 15px !important;
    }
}