@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（XI.Fitness：HPと同じ紺×金・明朝見出し）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** XI.Fitness ブログ — HP（xi-fitness.com）に見た目を寄せる
** 原本: XI.Fitness HP制作/site/blog-theme/cocoon-child-style.css（2026-10-03）
** 色・フォントは site/index.html の :root と同じ値
************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600&family=DM+Sans:wght@300;400;500&display=swap');

:root{
  --xf-navy:#0f1f3d; --xf-navy2:#1a2f52; --xf-navy3:#243a63; --xf-navy-light:#e8edf5;
  --xf-gold:#b8933e; --xf-gold2:#d4aa55;
  --xf-off:#f7f8fc; --xf-off2:#f0f2f8; --xf-line:#dde2ee;
  --xf-text:#0f1f3d; --xf-text2:#3a4a6a; --xf-text3:#6a7a9a; --xf-text4:#9aaacb;
}

/* ---- 全体 ---- */
body{
  background:var(--xf-off) !important;color:var(--xf-text);
  font-family:'Noto Sans JP',sans-serif;line-height:1.9;letter-spacing:.02em;
}
a{color:var(--xf-navy3)}
a:hover{color:var(--xf-gold)}
.main,.sidebar{background:transparent;border:none}
#main .article,.entry-card-wrap,.widget{background:#fff}

/* ---- ヘッダー（HPと同じ：紺の帯＋白文字＋金の下線） ---- */
#header-container{
  position:sticky;top:0;z-index:100;
  background:rgba(15,31,61,.97) !important;backdrop-filter:blur(12px);
  border-bottom:2px solid var(--xf-gold);box-shadow:none;
}
#header,.header{background:transparent !important}
.header-in{min-height:auto;padding:12px 0 6px}
.logo-header .site-name-text{
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:21px;color:#fff;letter-spacing:.08em;
}
.logo-header .site-name-text::before{
  content:"XI. Fitness";display:block;font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:10px;letter-spacing:.32em;color:var(--xf-gold2);margin-bottom:2px;text-align:center;
}
.tagline{color:var(--xf-text4);font-size:11px;letter-spacing:.12em}

/* ---- グローバルナビ ---- */
#navi,.navi{background:transparent !important}
#navi .navi-in > ul{justify-content:center;gap:2px}
#navi .navi-in > ul > li{height:auto}
#navi .navi-in > ul > li > a{
  color:var(--xf-text4) !important;font-size:12.5px;letter-spacing:.1em;padding:10px 14px;transition:color .2s;
}
#navi .navi-in > ul > li > a:hover{color:#fff !important;background:transparent}
#navi .navi-in > ul > li.nav-cta > a{
  background:var(--xf-gold);color:#fff !important;font-weight:500;letter-spacing:.14em;padding:9px 22px;margin-left:8px;
}
#navi .navi-in > ul > li.nav-cta > a:hover{background:var(--xf-gold2)}

/* ---- 記事一覧のカード（角は丸めない・細い枠） ---- */
.entry-card-wrap,.related-entry-card-wrap{
  border:1px solid var(--xf-line);border-radius:0;transition:border-color .2s,box-shadow .2s;
}
.entry-card-wrap:hover{border-color:var(--xf-gold);box-shadow:0 10px 24px rgba(15,31,61,.08)}
.entry-card-title{font-family:'Noto Serif JP',serif;font-weight:600;color:var(--xf-navy);line-height:1.6}
.cat-label{
  background:var(--xf-navy) !important;color:#fff !important;border:none;border-radius:0;
  font-size:10px;letter-spacing:.12em;padding:2px 9px;
}

/* ---- 記事本文 ---- */
#main .article{padding:32px;border:1px solid var(--xf-line)}
.entry-title,.article h1{
  font-family:'Noto Serif JP',serif;font-weight:600;color:var(--xf-navy);line-height:1.6;letter-spacing:.04em;
}
.article h2{
  font-family:'Noto Serif JP',serif;font-weight:600;color:#fff;letter-spacing:.05em;
  background:var(--xf-navy);border:none;border-left:5px solid var(--xf-gold);border-radius:0;
  padding:15px 20px;margin:2.4em 0 1.1em;
}
.article h3{
  font-family:'Noto Serif JP',serif;font-weight:600;color:var(--xf-navy);
  background:none;border:none;border-bottom:2px solid var(--xf-gold);border-radius:0;padding:6px 2px;
}
.article h4{border-left:3px solid var(--xf-gold);padding-left:10px}
.article table th{background:var(--xf-navy);color:#fff}
.article table td,.article table th{border-color:var(--xf-line)}
.article blockquote{background:var(--xf-navy-light);border-left:4px solid var(--xf-gold)}
.article strong{background:linear-gradient(transparent 62%,rgba(212,170,85,.28) 62%)}
.breadcrumb,.breadcrumb a,.date-tags{color:var(--xf-text3)}

/* 目次 */
.toc{border:1px solid var(--xf-line);border-top:3px solid var(--xf-gold);border-radius:0;background:#fff}
.toc-title{font-family:'Noto Serif JP',serif;font-weight:600;color:var(--xf-navy);letter-spacing:.1em}

/* ---- サイドバー ---- */
.widget{padding:18px;border:1px solid var(--xf-line)}
.sidebar h2,.sidebar h3,.sidebar .wp-block-heading,.widget-sidebar-title{
  font-family:'Noto Serif JP',serif;font-weight:600;color:var(--xf-navy);font-size:16px;letter-spacing:.06em;
  background:none !important;border:none;border-bottom:1px solid var(--xf-gold);padding:0 0 8px;margin:0 0 12px;
}
.wp-block-search__button,.search-submit{background:var(--xf-navy) !important;color:#fff !important;border:none;border-radius:0}
.search-edit,.wp-block-search__input{border:1px solid var(--xf-line);border-radius:0}
.cat-link,.tag-link{background:var(--xf-navy) !important;color:#fff !important;border:none;border-radius:0;padding:3px 12px}

/* 無料カウンセリングの案内ボックス（サイドバー） */
.xf-side-cta{background:var(--xf-navy);color:#fff;padding:22px 18px;text-align:center;border-top:3px solid var(--xf-gold)}
.xf-side-cta p{color:rgba(255,255,255,.78);font-size:13px;line-height:1.8;margin:0 0 10px}
.xf-side-cta-en{font-family:'DM Sans',sans-serif;font-size:10px !important;letter-spacing:.3em;color:var(--xf-gold2) !important;margin-bottom:4px !important}
.xf-side-cta-title{font-family:'Noto Serif JP',serif;font-weight:600;font-size:17px !important;color:#fff !important}
.xf-side-cta-btn{display:inline-block;background:var(--xf-gold);color:#fff !important;padding:12px 26px;font-size:13px;letter-spacing:.14em;text-decoration:none}
.xf-side-cta-btn:hover{background:var(--xf-gold2)}
.xf-side-cta-tel a{color:#fff !important;font-family:'DM Sans',sans-serif;letter-spacing:.1em}

/* ---- ボタン類 ---- */
.go-to-top-button{background:var(--xf-navy);color:var(--xf-gold2)}

/* ---- フッター（HPと同じ濃紺） ---- */
#footer,.footer{background:#080f1e !important;color:rgba(255,255,255,.7)}
#footer a,.footer a{color:rgba(255,255,255,.75) !important}
#footer a:hover{color:var(--xf-gold2) !important}
.copyright{color:rgba(255,255,255,.45) !important}
#footer .logo-footer .site-name-text{font-family:'Noto Serif JP',serif;font-weight:600;color:#fff;letter-spacing:.08em}
.navi-footer-in > .menu-footer li a{letter-spacing:.08em}

/************************************
** レスポンシブ
************************************/
@media screen and (max-width: 1023px){
  #navi .navi-in > ul{flex-wrap:wrap}
}
@media screen and (max-width: 834px){
  #main .article{padding:20px}
  .logo-header .site-name-text{font-size:18px}
}
@media screen and (max-width: 480px){
  .article h2{font-size:1.1em;padding:12px 16px}
}

/* 追加（2026-10-03）メニュー項目を等幅にせず1行に収める（Cocoonの等幅・省略表示を解除） */
#navi .navi-in > ul > li{width:auto;flex:0 0 auto}
#navi .navi-in .item-label{white-space:nowrap;overflow:visible;text-overflow:clip}
.header-in{padding:10px 0 2px}
/* ヘッダーが2段で高いため、スクロール追従はやめる（本文が隠れるのを防ぐ） */
#header-container{position:relative}