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

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

/* =========================================
   1. body・wrapperの余白リセット
   ========================================= */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

#wrapper, #wrap {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* =========================================
   2. ヘッダーコンテナ：画面幅いっぱいに
   ========================================= */
#header-container {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
}

#header-container-in,
.header-container-in,
#header-in,
.header-in {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   3. ヘッダー画像（PC）
   ========================================= */
#header {
  background-image: url('http://mugiworks.com/neighborhood/wp-content/uploads/2026/05/45b40a7164e90525cdad6d3e8248b7d0.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: #001a43 !important;
  padding-top: 0 !important;
  height: 29vw !important;
  min-height: 29vw !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  order: 1 !important;
}

@media screen and (max-width: 834px) {
  #header {
    height: 29vw !important;
    min-height: 29vw !important;
  }
}

@media screen and (max-width: 480px) {
  #header {
    height: 29vw !important;
    min-height: 29vw !important;
  }
}
/* =========================================
   4. ナビゲーション（ヘッダー画像の下に配置）
   ========================================= */
#navi-container {
  order: 2 !important;
  position: relative !important;
  z-index: 200 !important;
  width: 100% !important;
}

#navi, .navi-in, #navi-in {
  background-color: #001a43 !important;
  position: relative !important;
  z-index: 200 !important;
}

#navi a, .navi-in a {
  color: #ffffff !important;
}

#navi a:hover {
  color: #c8973a !important;
  background-color: rgba(255,255,255,0.08) !important;
}

/* =========================================
   5. モバイル対応
   ========================================= */
@media screen and (max-width: 834px) {
  #header {
    padding-top: 35% !important;
    background-size: contain !important;
    background-position: top center !important;
  }
}

@media screen and (max-width: 480px) {
  #header {
    padding-top: 50% !important;
    background-size: contain !important;
    background-position: top center !important;
  }
  #header-container {
    flex-direction: column !important;
  }
}

/* =========================================
   6. フッター
   ========================================= */
#footer, .footer-container {
  background-color: #001a43 !important;
  color: #ffffff !important;
}

#footer a {
  color: #c8973a !important;
}

/* =========================================
   7. サイドバー・ウィジェット
   ========================================= */
.widget-title, .widget h2 {
  background-color: #001a43 !important;
  color: #ffffff !important;
  border-color: #c8973a !important;
}

/* =========================================
   8. 記事・カテゴリー・ボタン
   ========================================= */
.entry-title {
  border-color: #c8973a !important;
}

.cat-label {
  background-color: #001a43 !important;
}

.btn-wrap a, .block-btn a {
  background-color: #001a43 !important;
  border-color: #c8973a !important;
  color: #ffffff !important;
}

/* =========================================
   9. 記事内カスタムスタイル（mvk・cv・hg）
      Cocoon競合対策
   ========================================= */

/* Hero背景 */
.entry-content .mvk-hero,
.article-body .mvk-hero {
  background-color: #1a3a2a !important;
  background-image: none !important;
  isolation: isolate !important;
}

.entry-content .mvk-hero *,
.article-body .mvk-hero * {
  position: relative !important;
  z-index: 1 !important;
}

/* Hero タイトル */
.entry-content .mvk-hero-title,
.article-body .mvk-hero-title,
.entry-content .cv-hero-title,
.article-body .cv-hero-title,
.entry-content .hg-hero-title,
.article-body .hg-hero-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* h2 */
.entry-content .mvk-article h2,
.article-body .mvk-article h2 {
  color: #1a3a2a !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid #c8973a !important;
  padding: 0 0 10px !important;
  margin: 0 0 24px !important;
}

/* CTA内h2 */
.entry-content .mvk-cta-section h2,
.article-body .mvk-cta-section h2 {
  color: #ffffff !important;
  border-bottom-color: rgba(200,151,58,0.5) !important;
}

/* h3 */
.entry-content .mvk-article h3,
.article-body .mvk-article h3 {
  color: #1a3a2a !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-left: 3px solid #c8973a !important;
  padding: 0 0 0 12px !important;
  margin: 28px 0 12px !important;
}

/* =========================================
   10. レスポンシブ（記事内）
   ========================================= */
@media screen and (max-width: 834px) {
  .mvk-compare-grid,
  .cv-compare-grid {
    grid-template-columns: 1fr !important;
  }
}