@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* トップバナー上の不要な余白を消す */
#header-in,
.header,
.content,
.main,
.article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* ナビボタン（6枠）をピンク＆ブラウンに */
.entry-content table a {
    color: #6b5252 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.entry-content table td {
    background-color: #fff5f6 !important;
    border: 1.5px solid #fecdd3 !important;
    border-radius: 12px !important;
}

/* ヘッダー全体をピンク＆ブラウンに */
#header-container,
.header,
.mobile-header-menu-buttons {
    background-color: #ffe4e6 !important;
}

.site-name-text,
.mobile-header-menu-buttons a {
    color: #6b5252 !important;
}
/* モバイルドロワーメニュー全体を半透明（すりガラス風）にする */
#sidebar-menu-content,
.navi-menu-content,
.drawer-menu-content {
    background-color: rgba(255, 255, 255, 0.88) !important; /* ほんのり透ける白 */
    backdrop-filter: blur(8px) !important; /* 背景をすりガラス風にボカす */
}

/* 各メニュー項目の間に「ピンクの点線」を入れる */
#sidebar-menu-content li,
.navi-menu-content li,
.menu-drawer-content li {
    border-bottom: 1px dashed #fecdd3 !important; /* 薄いピンクの破線区切り */
    padding: 10px 0 !important;
}

/* 文字をくすみブラウンにして見やすく */
#sidebar-menu-content a,
.navi-menu-content a,
.menu-drawer-content a {
    color: #6b5252 !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

/* 最後の線の消去 */
#sidebar-menu-content li:last-child,
.navi-menu-content li:last-child {
    border-bottom: none !important;
}
/* モバイルメニューを明るいくすみピンクの半透明に */
#sidebar-menu-content,
.navi-menu-content,
.drawer-menu-content {
    background-color: rgba(255, 238, 242, 0.85) !important; /* くすみピンク半透明 */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 中の背景をリセット */
#sidebar-menu-content ul,
#sidebar-menu-content li,
.navi-menu-content ul,
.navi-menu-content li {
    background-color: transparent !important;
}

/* 各メニュー項目の区切り線（くすみブラウンでしっかり見易く！） */
#sidebar-menu-content li,
.navi-menu-content li {
    border-bottom: 1px dashed #6b5252 !important; /* 文字とおそろいのブラウン破線 */
    padding: 12px 0 !important; /* 上下のすき間も少し広げて押しやすく */
}

/* 文字色（くすみブラウン） */
#sidebar-menu-content a,
.navi-menu-content a {
    color: #6b5252 !important;
    font-weight: bold !important;
    font-size: 15px !important;
}
/* --- モバイルメニュー：デザイン最適化（はみ出し防止・安定版） --- */

/* 1. 背景を明るいくすみピンクの半透明＆すりガラス風に */
.navi-menu-content,
#sidebar-menu-content {
    background-color: rgba(255, 238, 242, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 2. 中の背景をリセットして明るさをキープ */
.navi-menu-content ul,
.navi-menu-content li,
#sidebar-menu-content ul,
#sidebar-menu-content li {
    background-color: transparent !important;
}

/* 3. 各メニューの区切り線（ブラウン破線） */
.navi-menu-content li,
#sidebar-menu-content li {
    border-bottom: 1px dashed #6b5252 !important;
    padding: 12px 0 !important;
}

/* 4. 文字色（くすみブラウン） */
.navi-menu-content a,
#sidebar-menu-content a {
    color: #6b5252 !important;
    font-weight: bold !important;
    font-size: 15px !important;
}
/* --- 営業時間テキストの電光掲示板風アニメーション --- */

/* 1. 親枠からはみ出た文字を隠す設定 */
.header-container,
.site-header,
.tagline,
.tagline-text,
.site-description {
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* 2. 文字全体を右から流す設定 */
.tagline-text,
.site-description,
.header-text-caption {
    display: inline-block !important;
    padding-left: 100% !important; /* 画面右端からスタート */
    animation: marquee-text 12s linear infinite !important; /* 12秒で1周してループ */
}

/* 3. 流れるアニメーションの定義 */
@keyframes marquee-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* 通知エリアとその枠組みを完全に削除して消去 */
.notice,
.notice-area,
.notice-card,
.notice-container,
#notice-area,
div[class*="notice"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ヘッダー全体の余白と下余白を完全に詰める */
.header,
.header-container,
.header-container-in,
#header,
#header-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background-color: transparent !important;
}

/* メインコンテンツ上部の空きスペースを消す */
#content,
.main,
#main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* メインコンテンツエリア全体の上の余白を強力に詰める */
.site-main,
.content,
#content,
.main,
#main,
.article-header,
.entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ページタイトルの上の余白を消す */
.entry-title,
.page-title,
h1.entry-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* コンテンツ枠とヘッダー下のすべての余白を強制的に0にする */
#content,
#content .wrap,
.content .wrap,
.site-main,
.main,
#main,
.article,
#article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ウィジェット領域（コンテンツ上部など）の隙間を消去 */
.content-top,
.widget-over-content,
#widget-over-content,
div[class*="widget-over-"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* ページタイトル（料金表…）の上の余白を消去 */
.entry-title,
.page-title,
h1,
.article h1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* メインエリア全体を上方向に強制引っ張り */
#content {
  margin-top: -30px !important; /* 必要に応じて -40px など調整可能です */
}

/* 最初のブロック・タイトルの余白を完全に打ち消す */
.main article > *:first-child,
.main .entry-content > *:first-child,
.article-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ページ全体の余白調整 */
.container,
.site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}