@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（統合版 v1）
Theme URI: https://wp-cocoon.com/
Author: わいひら（＋ site custom）
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.2-u1
*/

/* ========================================================
   [BASE] 初期設定・フォント・変数
   ======================================================== */

@font-face{
  font-family: 'HKReiKK';
  src: url('/wp/wp-content/themes/cocoon-child-master/fonts/hkreikk-babanaika.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ブランドカラー */
  --brand: #88abda;          /* ヘッダー帯など */
  --brand-ink: #0A2A6B;      /* 文字色の推奨濃紺 */
  --brand-edge: #9BB8FF;     /* ふち色/境界 */

  /* 固定ヘッダー/アンカー停止 */
  --header-h: 52px;          /* PCメニュー高さ */
  --logo-h: 34px;            /* PCロゴ最大高 */
  --stop-pc: 72px;           /* PCアンカー停止 */
  --stop-sp: 112px;          /* SPアンカー停止 */

  /* 本文幅（PC） */
  --pc-max: 1120px;
  --pc-pad: 22px;
  --pc-text: 70ch;

  /* タイトル/本文のマージン・左右パディング */
  --header-offset-pc: 6rem;
  --header-offset-sp: 3rem;
  --title-mt-pc: 7rem;
  --title-mt-sp: 3rem;
  --body-mt-pc: 6rem;
  --body-mt-sp: 0rem;
  --side-pad-pc: 1rem;
  --side-pad-sp: .5rem;

  /* Media+Text 調整 */
  --media-pad-pc: 22px;
  --media-pad-sp: 20px;      /* （SP。初期値 8px） */
  --media-gap: 16px;

  /* ヒーロー詰め量 */
  --hero-lift: 22px;

  /* パンくず ホーム色 */
  --crumb-home:       #88ABDA;
  --crumb-home-hover: #3b82f6;
}

/* 共通フォント適用（サイト名・タイトル） */
.site-title-text,
.site-name{ font-family: 'HKReiKK', system-ui, -apple-system, 'Segoe UI','Hiragino Kaku Gothic ProN','Meiryo', sans-serif !important; }

/* リンクの下線はデフォルトでOFF（サイト方針に合わせる） */
a, a:link, a:visited, a:hover, a:active, a:focus{ text-decoration: none !important; }
a{ transition: color .15s ease; }
a:hover, a:focus-visible{ color: var(--crumb-home, #88ABDA); }
a:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; }

/* ========================================================
   [LAYOUT] ヘッダー配置・固定
   ======================================================== */

/* ヘッダーを sticky（PC/SP共通） */
#header-container{ position: sticky !important; top:0 !important; z-index:10050 !important; background: var(--brand) !important; border:0 !important; box-shadow:none !important; }
.admin-bar #header-container{ top:32px !important; }

/* ヘッダー内は縦中央 */
#header-in{ display:flex !important; align-items:center !important; }

/* グローバルナビの基本配色 */
#navi{ background-color: var(--brand) !important; height: var(--header-h) !important; padding:0 !important; }
#navi .navi-in{ display:flex !important; align-items:center !important; justify-content:center !important; }
#navi .navi-in > ul{ display:flex !important; align-items:center !important; height:100% !important; margin:0 !important; }
#navi .navi-in > ul > li{ float:none !important; }
#navi .navi-in > ul > li > a{
  display:flex !important; align-items:center !important; justify-content:center;
  height: var(--header-h) !important; padding: 0 14px !important; line-height:1.2 !important; color:#fff !important;
}

/* PC：ロゴと高さ統一 */
@media (min-width:1025px){
  #header, #header-in, #header-container{ padding:0 !important; min-height: 0 !important; }
  .site-branding, .logo, .logo-image, .site-title-text{ display:flex; align-items:center; height: var(--header-h) !important; margin:0 !important; padding:0 !important; }
  .custom-logo, .site-logo-image, .logo img{ max-height: var(--logo-h) !important; height:auto !important; width:auto !important; display:block !important; }
  #header .site-description{ display:none !important; }
}

/* SP/タブレット：ヘッダー中央寄せ（BabaMenu想定の最小セット） */
@media (max-width:991px){
  #header #header-in{ justify-content:center !important; min-height:56px !important; padding:4px 56px 4px 12px !important; }
}

/* アンカー停止（全体） */
html{ scroll-padding-top: var(--stop-pc) !important; }
@media (max-width:767px){ html{ scroll-padding-top: var(--stop-sp) !important; } }

/* ========================================================
   [TITLES] 見出し・間隔
   ======================================================== */

/* タイトルがヘッダーで隠れない＆左右揃え */
.title-space, .page-title-space, .post-title-space{ scroll-margin-top: var(--header-offset-pc); margin-top: var(--title-mt-pc) !important; padding-inline: var(--side-pad-pc); box-sizing: border-box; display:block !important; text-align:center !important; }
@media (max-width:767px){ .title-space, .page-title-space, .post-title-space{ scroll-margin-top: var(--header-offset-sp); margin-top: var(--title-mt-sp) !important; padding-inline: var(--side-pad-sp); } }

/* 小さめH1（固定/投稿共通） */
:root{ --twin-h1-pc: 1.25rem; --twin-h1-sp: 1.10rem; --twin-h1-mt: 10px; --twin-h1-mb: 6px; }
.page-title-space, .post-title-space{ font-size: var(--twin-h1-pc) !important; line-height:1.35 !important; font-weight:600 !important; color:inherit !important; margin: var(--twin-h1-mt) auto var(--twin-h1-mb) !important; max-width: min(var(--content-max, 980px), 100%) !important; background:none !important; border:0 !important; white-space:normal !important; overflow-wrap:break-word; word-break:keep-all; }
@media (max-width:767px){ .page-title-space, .post-title-space{ font-size: var(--twin-h1-sp) !important; } }

/* 診療カレンダー用の超シンプル見出し */
.h-simple{ text-align:center !important; background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:.6em 0 .4em !important; }
.h-simple::before, .h-simple::after{ content:none !important; }

/* 記事タイトルのはみ出し/不可視対策 */
.article-header.entry-header{ padding-top:8px; }
.article-header .entry-title{ margin:36px 0 8px !important; opacity:1 !important; text-indent:0 !important; clip:auto !important; clip-path:none !important; transform:none !important; }
@media (min-width:1025px){ .article-header .entry-title{ scroll-margin-top: 88px; } }

/* ========================================================
   [BREADCRUMBS] Yoast パンくず
   ======================================================== */
nav#breadcrumbs.yoast-breadcrumbs{
  display:block !important; box-sizing:border-box !important;
  padding:10px 14px !important; margin:12px 12px 0 !important;
  background:#f7f9fb !important; border:1px solid #e6e6e6 !important; border-radius:8px !important;
  line-height:1.6 !important; font-size:.95rem !important; color:#555 !important;
}
nav#breadcrumbs.yoast-breadcrumbs a{ text-decoration:none !important; color:inherit !important; }
nav#breadcrumbs.yoast-breadcrumbs .separator{ margin:0 .35em !important; }
nav#breadcrumbs.yoast-breadcrumbs .breadcrumb_last{ color:#777 !important; }
@media (max-width:600px){ nav#breadcrumbs.yoast-breadcrumbs{ margin-left:12px !important; margin-right:12px !important; } }
@media (min-width:1024px){ nav#breadcrumbs.yoast-breadcrumbs{ max-width:980px !important; margin:12px auto 0 !important; } }

/* ホームリンク色の固定 */
#breadcrumbs a.is-home-link,
.yoast-breadcrumbs a.is-home-link,
#breadcrumbs a.is-home-link:link,
#breadcrumbs a.is-home-link:visited,
.yoast-breadcrumbs a.is-home-link:link,
.yoast-breadcrumbs a.is-home-link:visited{ color: var(--crumb-home) !important; font-weight:700; }
#breadcrumbs a.is-home-link:hover,
#breadcrumbs a.is-home-link:focus-visible,
.yoast-breadcrumbs a.is-home-link:hover,
.yoast-breadcrumbs a.is-home-link:focus-visible{ color: var(--crumb-home-hover) !important; text-decoration-thickness:.12em; outline:none; }

/* ========================================================
   [HERO/CTA] カバー＆ボタン
   ======================================================== */
/* カバー暗幕を薄める（必要に応じて） */
.wp-block-cover.has-background-dim::before{ opacity:.25 !important; }

/* CTA ボタン（Buttons に .hero-cta を付ける） */
.wp-block-buttons.hero-cta{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; margin-bottom:1.5rem; }
.wp-block-buttons.hero-cta .wp-block-button__link{ border-radius:9999px; padding:.75em 1.25em; font-weight:600; line-height:1; min-width:11.5rem; display:inline-flex; justify-content:center; align-items:center; text-decoration:none; box-sizing:border-box; opacity:1 !important; visibility:visible !important; transform:none !important; transition:filter .15s ease !important; filter:none !important; box-shadow:none; }
.wp-block-buttons.hero-cta .btn-primary .wp-block-button__link{ background: var(--brand, #0f172a); color:#fff !important; border:none; box-shadow:0 4px 10px rgba(0,0,0,.15); }
.wp-block-buttons.hero-cta .btn-outline .wp-block-button__link{ background:#fff; color: var(--brand, #0f172a) !important; border:2px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.10); }
@media (hover:hover){
  .wp-block-buttons.hero-cta .btn-primary .wp-block-button__link:hover{ filter:brightness(1.06); }
  .wp-block-buttons.hero-cta .btn-outline .wp-block-button__link:hover{ filter:brightness(.98); }
}

/* ヒーロー引き上げ（ホーム先頭のみ） */
.home .wp-block-cover:first-of-type{ position:relative; z-index:10; margin-top: calc(-1 * var(--hero-lift)); min-height: clamp(420px, 70vh, 700px); }
.home .n2-section-smartslider:first-of-type{ position:relative; z-index:10; margin-top: calc(-1 * var(--hero-lift)); }
@media (max-width:1024px){ :root{ --hero-lift: 0px; } }

/* ========================================================
   [CONTENT WIDTH] 本文幅/クランプ
   ======================================================== */
@media (min-width:1025px){
  #content, #content #main, #content #main .entry, #content #main .entry .entry-content{
    max-width: var(--pc-max) !important; width:100% !important; margin-inline:auto !important; padding-inline: var(--pc-pad) !important; box-sizing:border-box !important;
  }
  #content #main .entry .entry-content > *:not(.edge-full):not(.alignfull){ max-width: var(--pc-max) !important; margin-inline:auto !important; width:auto !important; }
  #content #main .entry .entry-content > p{ max-width: var(--pc-text); }
}

/* 全幅表示ユーティリティ（.edge-full） */
@media (min-width:1025px){
  #content .edge-full{ position:relative !important; left:50% !important; right:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; width:100vw !important; max-width:100vw !important; padding:0 !important; }
  #content .edge-full > .wp-block-cover__inner-container{ max-width: var(--pc-max) !important; margin:0 auto !important; padding-inline: var(--pc-pad) !important; box-sizing:border-box !important; }
}

/* ========================================================
   [MEDIA+TEXT] メディアとテキスト
   ======================================================== */
.wp-block-media-text{ display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; align-items:center; width:100%; }
.wp-block-media-text__media, .wp-block-media-text__content{ min-width:0 !important; width:100% !important; }
.wp-block-media-text__content{ white-space:normal !important; word-break:normal !important; overflow-wrap:break-word; line-break:strict; }

/* PC：隙間＆左右余白 */
@media (min-width:768px){
  .home .entry-content .wp-block-media-text{ padding-inline: var(--media-pad-pc) !important; column-gap: var(--media-gap) !important; grid-column-gap: var(--media-gap) !important; box-sizing:border-box; }
  .home .entry-content .wp-block-media-text{ column-gap:24px !important; grid-column-gap:24px !important; }
}
/* SP：縦積み・はみ出し防止 */
@media (max-width:767px){
  .home .entry-content .wp-block-media-text{ padding-inline: var(--media-pad-sp) !important; column-gap: calc(var(--media-gap)*.8); grid-column-gap: calc(var(--media-gap)*.8); }
  .wp-block-media-text.is-stacked-on-mobile{ grid-template-columns: 1fr !important; }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media img{ width:100% !important; max-width:100% !important; height:auto !important; }
}
/* 中の二重パディング防止 */
.home .entry-content .wp-block-media-text .wp-block-media-text__content{ padding:0 !important; }

/* ========================================================
   [SLIDER] Smart Slider 3 調整
   ======================================================== */
@media (min-width:1025px){
  .n2-ss-align, .n2-section-smartslider, .n2-ss-section-main-content{ max-width: var(--pc-max) !important; width:100% !important; margin-inline:auto !important; padding-inline: var(--pc-pad) !important; box-sizing:border-box !important; }
  .n2-ss-slider{ width:100% !important; }
}

/* ========================================================
   [TABLE] 診療時間テーブル
   ======================================================== */
.table-hours{ margin:10px auto 0; border-collapse:collapse; text-align:center; width:100%; table-layout:fixed; }
.table-hours caption{ caption-side:top; font-weight:700; margin-bottom:.4em; }
.table-hours th, .table-hours td{ border:1px solid #ccc; padding:5px; white-space:nowrap; line-height:1.4; }
.table-hours thead th{ background:#f0f0f0; font-weight:700; }
.table-hours thead th.blank-cell{ background:#fff !important; }
/* 日（2列目）/ 土（8列目） */
.table-hours thead th:nth-child(2):not(.blank-cell), .table-hours tbody td:nth-child(2){ background:#f9d5d5 !important; }
.table-hours thead th:nth-child(8), .table-hours tbody td:nth-child(8){ background:#d5e5f9 !important; }
/* 金は平日扱い */
.table-hours thead th:nth-child(7){ background:#f0f0f0 !important; }
.table-hours tbody td:nth-child(7){ background:transparent !important; }
@media (max-width:767px){ .table-hours th, .table-hours td{ padding:4px; font-size:14px; } .table-hours th[scope="row"]{ width:7ch; } }

/* ========================================================
   [FOOTER] フッター・ミニリンク（変数＋.lnk）
   ======================================================== */
.footer-mini-links{
  --fg:#fff; --dim:rgba(255,255,255,.75); --accent:#fff3b0; --link-size:14px; --link-weight:600; --link-gap:.25rem; --link-pad:2px 8px;
  text-align:center; font-size:var(--link-size); line-height:1.7; padding:.8rem 0; color:var(--fg);
}
.footer-mini-links .footer-hd{ display:inline-block; font-size:15px; font-weight:500; color:var(--accent); margin-bottom:.4rem; }
.footer-mini-links .footer-links{ margin:.4rem 0 .6rem; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.footer-mini-links hr{ border:0; border-top:1px solid rgba(255,255,255,.25); margin:.6rem 0; }
.footer-mini-links .note{ display:block; color:var(--dim); font-size:12.5px; line-height:1.4; margin-top:-.25rem; }
.footer-mini-links .lnk{ display:inline-block; color:var(--fg); font-weight:var(--link-weight); font-size:var(--item-size,1em); text-decoration:none !important; border-bottom:none !important; padding:var(--link-pad); margin:2px var(--link-gap); }
.footer-mini-links .lnk:hover, .footer-mini-links .lnk:focus{ text-decoration:underline !important; outline:none; }
.footer-mini-links .lnk:focus-visible{ outline:2px solid #fff3b0; outline-offset:2px; border-radius:6px; }
/* セクション強弱 */
#footer-clinic{  --link-size:18px; --link-weight:700; }
#footer-policies{--link-size:13.5px; --link-weight:500; }
/* 個別色 */
.lnk--clinic-about{ --fg:#ffe680; --item-size:1.10em; font-weight:800; }
.lnk--services{ --fg:#e0fbfc; }
.lnk--access{ --fg:#ffd7ba; }
.lnk--sitemap{ --fg:#d5f5e3; }
/* 控えめセット（要望どおり） */
.lnk--clinic-about, .lnk--sitemap, .lnk--standards, .lnk--myna, .lnk--privacy, .lnk--terms{ --fg:var(--dim); --item-size:.88em; --link-weight:400; opacity:.8; }
.lnk--clinic-about:hover, .lnk--sitemap:hover, .lnk--standards:hover, .lnk--myna:hover, .lnk--privacy:hover, .lnk--terms:hover{ opacity:.95; }
@media (min-width:768px){ .footer-mini-links{ font-size:15px; line-height:1.6; } .footer-mini-links .lnk{ padding:2px 8px; } }
@media (max-width:767px){ .footer-mini-links{ font-size:15px; line-height:1.4; } .footer-mini-links .lnk{ padding:4px 6px; margin:2px 0; } }

/* ========================================================
   [SITEMAP] サイトマップ（ツリー）
   ======================================================== */
.sitemap-page .sitemap-tree{ --line:#334155; --thick:2.5px; --gap:24px; --btn-h:38px; --brand:#274c77; }
.sitemap-page .sitemap-tree ul{ position:relative; padding-top: var(--gap); }
.sitemap-page .sitemap-tree li{ list-style:none; position:relative; padding: var(--gap) 10px 0; text-align:left; }
.sitemap-page .sitemap-tree ul ul::before{ content:""; position:absolute; left:50%; top: calc(var(--btn-h)*.5); bottom: calc(var(--btn-h)*.5); border-left: var(--thick) solid var(--line); transform: translateX(-.5px); }
.sitemap-page .sitemap-tree li::before{ content:""; position:absolute; top: calc(var(--btn-h)*.5); right:50%; width:50%; border-top: var(--thick) solid var(--line); }
.sitemap-page .sitemap-tree li:only-child::before{ display:none; }
.sitemap-page .sitemap-tree a, .sitemap-page .sitemap-tree .smap-btn{ display:inline-flex; align-items:center; gap:.45em; height: var(--btn-h); padding:0 .85rem; border:2px solid var(--brand); border-radius:.7rem; background:#fff; text-decoration:none; font-weight:700; color:#0f172a; line-height:1; white-space:nowrap; box-shadow:0 1px 0 rgba(0,0,0,.04); }
.sitemap-page .sitemap-tree a:hover, .sitemap-page .sitemap-tree a:focus{ background:#f1f5f9; box-shadow:0 0 0 3px rgba(39,76,119,.15); transform:translateY(-1px); outline:none; }
.sitemap-page .sitemap-tree > ul > li > a{ background:#e2e8f0; }
@media (max-width:600px){ .sitemap-page .sitemap-tree a{ font-size:.95rem; } }

/* ========================================================
   [ACCESSIBILITY / UTILS]
   ======================================================== */
/* タイトルの改行許可・ノーワープ補助 */
.page-title-space{ white-space: normal !important; word-break: keep-all; }
.page-title-space .nowrap, .nowrap{ white-space: nowrap; }

/* スマホで“少しはみ出して大きく見せる” */
@media (max-width:767px){
  .sp-gain-16, .sp-gain-16 img{ width: calc(100% + 16px) !important; }
  .sp-gain-16{ margin-inline:-8px !important; }
  .sp-gain-24, .sp-gain-24 img{ width: calc(100% + 24px) !important; }
  .sp-gain-24{ margin-inline:-12px !important; }
  .sp-gain-32, .sp-gain-32 img{ width: calc(100% + 32px) !important; }
  .sp-gain-32{ margin-inline:-16px !important; }
  .sp-edge{ position:relative !important; left:50% !important; right:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; width:100vw !important; max-width:100vw !important; padding:0 !important; }
  .sp-edge img{ width:100vw !important; height:auto !important; display:block !important; }
}