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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* =========================================================
   さくら坂整形外科・リハビリテーションクリニック
   2026-09-17 追記

   ★ここは「.style の外」に効かせるための場所。

   additional.css は .style 配下にしか効かない。
   ヘッダー・フッター・パンくずなど Cocoon 側の領域は、こちらに書く。

   ★この使い分けを崩さないこと。
     additional.css に書いても、テーマ側の領域には届かない。
   ========================================================= */

/* 本文の書体をサイトに合わせる（Cocoon既定を上書き） */
body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/* 固定ページのタイトルを隠す。
   ページ本文の先頭に自前の見出しを置いているため、
   Cocoon 側のタイトルと二重になる。
   （Cocoon の設定に固定ページのタイトルを消す項目は無い） */
body.page .entry-title { display: none; }

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

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

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

/* =========================================================
   固定ページを画面いっぱいに出す（2026-09-17 追記）

   Cocoon は本文を .content-in → .main → .article の順に
   囲み、それぞれが幅と余白を持っている。
   そのままだと .style の中の全幅セクション（ヒーローなど）が
   内側で縮んでしまうため、囲いの幅と余白をここで外す。

   ★ .style の中ではなく「囲い」の話なので additional.css ではなくここ。
   ★ 対象を body.page に限っている。投稿（ブログ）は Cocoon のままでよい。
   ========================================================= */

body.page #content.content,
body.page #content .content-in {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.page .content .main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page .main .article { padding: 0; border: 0; }
body.page .entry-content { margin: 0; padding: 0; }

/* Cocoon設定で1カラムにしていれば不要。設定漏れの保険 */
body.page .sidebar { display: none; }

/* Cocoonの「トップへ戻る」ボタン。
   デザインに無く、スマホでは電話バーと重なるため出さない */
.go-to-top { display: none; }


/* =========================================================
   追従する電話バー（スマホのみ）2026-09-17 追記

   ★ここに置く理由
   このバーは functions.php の wp_footer から出力しており、
   .style の外にある。additional.css は .style 配下にしか効かないため、
   あちらに書くと装飾が一切届かない（実際に素のリンクとして表示された）。

   色は .style の CSS変数（--brand など）を使えないので直接書いている。
   ★色を変えるときは additional.css の :root 相当と合わせること。
   ========================================================= */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  /* ★参考サイトと同じ2分割。左が電話、右がネット予約 */
  grid-template-columns: 1fr 1fr;
  background: #1a1614;
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(110%);
  transition: transform .28s ease;
  /* iPhoneのホームバーに隠れないよう、端末が申告する余白を足す */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.callbar.is-visible { transform: translateY(0); }

.callbar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 11px 8px;
  color: #fff;
  text-decoration: none;
  line-height: 1.3;
  text-align: center;
}
.callbar__btn--tel { background: #1a1614; }
.callbar__btn--reserve { background: #8c7238; }
.callbar__btn--tel:hover, .callbar__btn--tel:focus { background: #2a231d; color: #fff; text-decoration: none; }
.callbar__btn--reserve:hover, .callbar__btn--reserve:focus { background: #7a6230; color: #fff; text-decoration: none; }

.callbar__label { font-size: 11px; letter-spacing: .08em; color: #cdbd93; }
.callbar__num {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ★スマホでだけ出す。この指定を @media の外に書くと効かない */
@media (max-width: 780px) {
  .callbar { display: grid; }
}

/* =========================================================
   Cocoonの見出し装飾を打ち消す（2026-09-17 追記）

   Cocoonは h2 に灰色の帯、h3 に左の縦棒と囲みを付ける。
   静的サイトの見出しは「背景なし・線なし・余白なし」なので、
   そのままだと意図しない帯や囲みが出る（実際に出た）。

   ★ additional.css ではなくここに書く理由
     additional.css は Cocoon本体のCSSより先に読み込まれるため、
     同じ強さの指定だと Cocoon に負ける。
     子テーマの style.css は後から読まれるので確実に勝てる。

   ★ 打ち消すのは background / border / padding だけ。
     文字サイズ・色・余白（margin）には触らない。
     これらは additional.css 側の指定をそのまま生かす。
   ========================================================= */

body.page .style :is(h1, h2, h3, h4, h5, h6) {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  counter-increment: none;
}

body.page .style :is(h1, h2, h3, h4, h5, h6)::before,
body.page .style :is(h1, h2, h3, h4, h5, h6)::after {
  content: none;
}

/* ただし、お知らせ本文の見出しに付けている緑の縦棒は残す。
   上の打ち消しで消えてしまうため、ここで付け直している。
   ★ additional.css の .style .prose h3 と同じ値にすること */
body.page .style .prose h3 {
  padding-left: 14px;
  border-left: 3px solid var(--brand);
}

/* =========================================================
   Cocoon既定のヘッダー・フッターを隠す（2026-09-17 追記）

   ヘッダー（ロゴ・メニュー・電話番号・Web予約・受付状況バー）と
   フッターは functions.php から出している。
   Cocoon側のものと二重になるため、こちらを隠す。

   ★ 外観 ＞ メニュー の設定は不要になる。
     メニューの項目は functions.php の $menu で決めている。
   ========================================================= */

#header-container,
#header,
#navi,
#footer {
  display: none;
}

/* Cocoonはヘッダー分の余白を本文の上に入れている。
   ヘッダーを隠したので、その余白も消す */
#content {
  margin-top: 0;
  padding-top: 0;
}

/* Cocoonのモバイルボタン（画面下の メニュー／ホーム／検索／トップ／サイドバー）。
   スマホでは電話バーと重なり、用途も重複するので出さない。
   Cocoon設定 ＞ モバイル でも切れるが、テーマと一緒に持ち運べるよう
   こちらにも書いておく */
#mobile-menu-buttons,
.mobile-menu-buttons,
#mobile-footer-menu-buttons,
.mobile-footer-menu-buttons {
  display: none;
}