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

/* ============================================
   mikata life - 子テーマ style.css
   ============================================ */

/* ============================================
   共通：ヘッダー装飾線・ボーダーを完全削除
   ============================================ */
#header-container,
#header-container-in,
#header,
#header-in,
nav#navi,
.navi-in {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#header-in::before,
#header-in::after,
#header::before,
#header::after,
#header-container::before,
#header-container::after,
#header-container-in::before,
#header-container-in::after {
  display: none !important;
  border: none !important;
  content: none !important;
}

/* ============================================
   サイト名の共通スタイル
   ============================================ */
.site-name-text,
a.header-brand-link,
a.site-name-text-link .site-name-text {
  font-size: 22px !important;
  font-weight: bold !important;
  letter-spacing: 4px !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ============================================
   記事ページ：ネイビーグラデーションヘッダー
   ============================================ */
body:not(.home):not(.front-page) #header-container {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not(.home):not(.front-page) #header-container-in {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  padding: 8px 0 !important;
}

body:not(.home):not(.front-page) .tagline {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   トップページ：不要要素を非表示
   ============================================ */
.home #header-container,
.home #sidebar,
.home .article-header,
.home .article-footer,
.home .entry-title,
.home .entry-footer,
.home .sns-share {
  display: none !important;
}

/* ============================================
   トップページ：余白・背景・ボーダーを完全リセット
   ============================================ */
body.home {
  margin: 0 !important;
  padding: 0 !important;
}

.home #container,
.home #main,
.home #content,
.home #content-in,
.home #page,
.home article,
.home .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   ヒーローセクション
   ============================================ */
.hero-section {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
  overflow: hidden !important;
  background-image: url('https://www.mikatalife.com/wp-content/uploads/2026/06/IMG_7010-2.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.hero-inner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 60px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.hero-title {
  font-size: 52px !important;
  font-weight: bold !important;
  letter-spacing: 8px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  margin: 30px 0 0 0 !important;
}

.hero-box {
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 4px !important;
  padding: 14px 48px !important;
  backdrop-filter: blur(2px) !important;
  text-align: center !important;
  margin: 0 !important;
}

.hero-text {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: bold !important;
  letter-spacing: 3px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* ============================================
   固定フッターナビバー：PCでは非表示
   ============================================ */
@media screen and (min-width: 835px) {
  .mobile-footer-menu-buttons,
  .mobile-menu-buttons {
    display: none !important;
  }
}

/* ============================================
   トップページ：最新記事＋カテゴリーセクション
   ============================================ */
.home-sections-wrap {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 20px 20px !important;
}

.home-section {
  margin-bottom: 24px !important;
}

.home-section-title {
  font-size: 13px !important;
  font-weight: bold !important;
  letter-spacing: 3px !important;
  color: #333 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* 最新記事カードグリッド */
.home-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.home-card {
  display: flex !important;
  flex-direction: row !important;
  text-decoration: none !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s !important;
}

.home-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

.home-card-thumb {
  width: 100px !important;
  min-width: 100px !important;
  aspect-ratio: unset !important;
  height: auto !important;
  overflow: hidden !important;
  background: #f0f0f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.home-card-noimg {
  font-size: 11px !important;
  color: #aaa !important;
}

.home-card-body {
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.home-card-cat {
  font-size: 11px !important;
  color: #888 !important;
  margin-bottom: 6px !important;
}

.home-card-title {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #333 !important;
  line-height: 1.5 !important;
}

.home-more-link {
  text-align: right !important;
  margin-top: 12px !important;
}

.home-more-link a {
  font-size: 13px !important;
  color: #888 !important;
  text-decoration: none !important;
}

.home-more-link a:hover {
  color: #333 !important;
}

/* カテゴリーボタン */
.home-cat-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.home-cat-btn {
  display: inline-block !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  font-size: 13px !important;
  color: #555 !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}

.home-cat-btn:hover {
  background: #1a1a2e !important;
  color: #fff !important;
  border-color: #1a1a2e !important;
}

/* ============================================
   フッター
   ============================================ */
.home .footer-bottom-logo {
  display: none !important;
}

.home .footer-bottom {
  margin-top: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.home #footer-in {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.footer-bottom-content {
  text-align: center !important;
  width: 100% !important;
}

.navi-footer-in,
.menu-footer {
  text-align: center !important;
  justify-content: center !important;
}

/* ============================================
   モバイル（〜834px）
   ============================================ */
@media screen and (max-width: 834px) {

  .hero-section {
    height: 300px !important;
  }

  .hero-inner {
    gap: 40px !important;
  }

  .hero-title {
    font-size: 32px !important;
    letter-spacing: 4px !important;
    margin: 20px 0 0 0 !important;
  }

  .hero-box {
    padding: 12px 32px !important;
  }

  .hero-text {
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }

  .home-card-grid {
    grid-template-columns: 1fr !important;
  }

  .home-sections-wrap {
    padding: 0 16px 20px !important;
  }

  .home-section {
    margin-bottom: 24px !important;
  }
}