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

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

/* 0. Google Fonts「しっぽり明朝」自動読み込み */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

/* 1. 不要要素の非表示 */
.date-tags,
.related-entries,
.pager-post-navi,
.page-category,
.cat-label,
.entry-card-category,
.entry-categories-tags,
.entry-categories,
.entry-tags,
.footer-categories,
.footer-tags,
.category-tag-link,
.post-categories,
.post-tags,
.cat-links,
.tag-links,
.footer-meta .category-link,
.footer-meta .cat-link,
.article-footer .category-link,
.article-footer .cat-link,
body.home .breadcrumb,
body.home #breadcrumb,
body.home .page-header,
body.home .entry-header,
.header-search-box,
.header-container .search-box,
.site-header .search-box,
.header-search-form,
.navi-search,
.navi-search-button,
.search-button,
.search-btn,
.search-menu-search,
li.search-menu-item,
#header .search-box,
#header form[role="search"],
.header-widget .widget_search,
.header-container .site-description,
#header .site-description {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* 2. フォント指定 */
body,
#wrapper,
#container,
.site-content,
.entry-content,
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, th, td, a, span {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

body, p, li, td {
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.85;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fa, .fas, .far, .fab, .fal, [class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* 3. ヘッダー共通 */
#header,
.header-container,
.site-header {
  background-color: #ffffff !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-bottom: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* 4. PC版ヘッダー（769px以上） */
@media screen and (min-width: 769px) {
  .header-container-in,
  #header .header-in {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 6px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
  }

  #header .logo-header,
  #header .site-name {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  #header .site-name a,
  #header .logo-header a,
  .site-name-text {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  #header .site-name img,
  #header .logo-header img,
  .site-logo-image {
    width: auto !important;
    max-width: 190px !important;
    height: 42px !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.25s ease !important;
  }

  #navi,
  .navi-in,
  .menu-wrap {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  #navi .navi-in > ul,
  .menu-wrap ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }

  .menu-item a,
  #navi a {
    background: transparent !important;
    padding: 9px 18px !important;
    margin: 0 1px !important;
    color: #0a1829 !important;
    font-weight: 800 !important;
    font-size: 15.5px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.2s ease !important;
  }

  .menu-item a:hover,
  #navi a:hover {
    color: #b48937 !important;
    background: #ffffff !important;
  }
}

/* 5. モバイル用ヘッダー（768px以下） */
@media screen and (max-width: 768px) {
  #header .site-name img,
  #header .logo-header img {
    max-width: 150px !important;
    height: 34px !important;
  }

  .header-container-in,
  #header .header-in {
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .mobile-menu-buttons,
  #mobile-menu-buttons,
  .mobile-footer-menu-buttons,
  .navi-menu-content,
  .header-container .menu-button,
  .top-menu-btn {
    display: none !important;
    visibility: hidden !important;
  }

  .custom-menu-btn {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 44px;
    padding: 12px 10px;
    background: #ffffff;
    border: 1.5px solid #dfc082;
    border-radius: 6px;
    position: fixed;
    top: 10px;
    right: 14px;
    z-index: 99999;
    cursor: pointer;
    box-sizing: border-box;
  }
  .custom-menu-btn .bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #172f54;
    border-radius: 2px;
  }
}

/* 6. 基本レイアウト（背景ネイビー） */
body:not(.single),
body:not(.single) #wrapper,
body:not(.single) #container,
body:not(.single) #content,
body:not(.single) .site-content,
body:not(.single) .content-area,
body:not(.single) #primary,
body:not(.single) .site-main,
body:not(.single) #main,
body:not(.single) .page {
  background-color: #0b192c !important;
  background: #0b192c !important;
  border: none !important;
  box-shadow: none !important;
}

.singular #sidebar,
.page #sidebar {
  display: none !important;
}

.singular #main,
.page #main {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* 7. パンくずリスト */
body:not(.single) .breadcrumb,
body:not(.single) #breadcrumb {
  background-color: #0b192c !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 14px 20px 10px 20px !important;
  color: #94a3b8 !important;
}

body:not(.single) .breadcrumb a,
body:not(.single) #breadcrumb a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body:not(.single) .breadcrumb span,
body:not(.single) #breadcrumb li:last-child {
  color: #cbd5e1 !important;
}

/* 8. 見出し装飾リセット */
.article h2,
.entry-content h2,
#main h2,
.article h3,
.entry-content h3,
#main h3 {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

/* 9. ブログ詳細ページ（single） */
body.single {
  background-image: url('https://bestep.co.jp/wp-content/uploads/2026/11/2647018-scaled.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: #0b192c !important;
}

body.single #wrapper,
body.single #container,
body.single #content,
body.single .site-content,
body.single #main {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.single #sidebar {
  display: none !important;
}

body.single #main {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.single .breadcrumb-area,
body.single .breadcrumb-wrap {
  max-width: 860px !important;
  margin: 25px auto 0 auto !important;
  padding: 0 16px !important;
}

body.single .breadcrumb,
body.single #breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(11, 25, 44, 0.88) !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(223, 192, 130, 0.5) !important;
}

body.single .breadcrumb a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.single .breadcrumb span {
  color: #dfc082 !important;
}

body.single article.post,
body.single .post {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1e293b !important;
  max-width: 860px !important;
  margin: 20px auto 80px auto !important;
  padding: 50px 45px !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  box-sizing: border-box !important;
}

body.single article.post *,
body.single .entry-content * {
  color: #1e293b !important;
}

body.single article.post h1,
body.single .entry-title {
  color: #0b192c !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding-bottom: 15px !important;
  margin-bottom: 25px !important;
}

#comment-area,
.comment-area,
#comments {
  display: none !important;
}

/* 10. フッター */
#footer,
.footer-container,
.site-footer,
body.single #footer,
body.archive #footer,
body.category #footer {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1e293b !important;
  border: none !important;
  box-shadow: none !important;
}

#footer a,
.footer-bottom a {
  color: #0a1829 !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
}

#footer,
.copyright {
  color: #172f54 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* 11. カテゴリー・ブログ一覧 */
body.archive,
body.category {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background-image: url('https://bestep.co.jp/wp-content/uploads/2026/11/2647018-scaled.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: #0b192c !important;
}

body.archive #wrapper,
body.category #wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  background: transparent !important;
}

body.archive #container,
body.category #container,
body.archive #content,
body.category #content {
  flex: 1 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.archive #sidebar,
body.category #sidebar {
  display: none !important;
}

body.archive #main,
body.category #main {
  float: none !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 30px auto 60px auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

body.archive .archive-title,
body.category .archive-title {
  color: #ffffff !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
  margin-bottom: 25px !important;
}

body.archive .breadcrumb-area,
body.category .breadcrumb-area {
  max-width: 860px !important;
  margin: 20px auto 0 auto !important;
  padding: 0 16px !important;
}

body.archive .breadcrumb,
body.category .breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(11, 25, 44, 0.88) !important;
  padding: 8px 20px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(223, 192, 130, 0.5) !important;
}

body.archive .breadcrumb a,
body.category .breadcrumb a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.archive .breadcrumb span,
body.category .breadcrumb span {
  color: #dfc082 !important;
}

body.archive .entry-card-wrap,
body.category .entry-card-wrap {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  padding: 22px 24px !important;
  margin-bottom: 20px !important;
}

body.archive .entry-card-title,
body.category .entry-card-title {
  color: #0b192c !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

body.archive .entry-card-snippet,
body.category .entry-card-snippet {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

body.archive #footer,
body.category #footer {
  margin-top: auto !important;
  width: 100% !important;
}
<!-- ▼▼ スマホ専用：独自ハンバーガーボタン＆ドロワーメニュー ▼▼ -->
<div class="custom-menu-btn" id="customMenuBtn" aria-label="メニューを開く">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

<div class="custom-menu-overlay" id="customMenuOverlay">
  <nav class="custom-drawer-nav">
    <div class="drawer-header">
      <span class="drawer-title">MENU</span>
      <button type="button" class="drawer-close-btn" id="drawerCloseBtn">✕</button>
    </div>
    <ul class="drawer-nav-list">
      <li><a href="https://bestep.co.jp/">ホーム</a></li>
      <li><a href="https://bestep.co.jp/tk_01">ケアハウス</a></li>
      <li><a href="https://bestep.co.jp/day_service">デイサービス</a></li>
      <li><a href="https://bestep.co.jp/home_care">訪問介護</a></li>
      <li><a href="https://bestep.co.jp/cp_kodaira">居宅介護支援</a></li>
      <li><a href="https://bestep.co.jp/chairman_voice">代表者の思い</a></li>
      <li><a href="https://bestep.co.jp/news">お知らせ</a></li>
      <li><a href="https://bestep.co.jp/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const btn = document.getElementById('customMenuBtn');
  const overlay = document.getElementById('customMenuOverlay');
  const closeBtn = document.getElementById('drawerCloseBtn');
  if (!btn || !overlay) return;

  function toggleMenu() {
    overlay.classList.toggle('is-open');
    btn.classList.toggle('is-active');
  }

  btn.addEventListener('click', toggleMenu);
  if (closeBtn) closeBtn.addEventListener('click', toggleMenu);
  
  // 背景の暗い部分をタップしても閉じる
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) {
      toggleMenu();
    }
  });
});
</script>