/*
 Theme Name:   Hello Elementor Child – MyMarketer
 Template:     hello-elementor
 Description:  MyMarketer 用カスタムスタイル
 Author:       WHAT Inc.
 Version:      1.0.0
 Text Domain:  mymarketer
*/

/* ───────── 1. 変数・リセット ───────── */
:root {
  --primary: #D4AF37;
  --primary-light: #E6C665;
  --primary-dark: #BA9526;
  --primary-gradient: linear-gradient(135deg, #D4AF37 0%, #E6C665 100%);
  --secondary: #1A1A1A;
  --light-bg: #F8F7F4;
  --card-bg: #FFFFFF;
  --text-dark: #1A1A1A;
  --text-medium: #555555;
  --text-light: #777777;
  --accent: #111111;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-dark);
  background: #fff;
  line-height: 1.4;
  letter-spacing: .01em;
  overflow-x: hidden;
  font-weight: 300;
}

img { max-width: 100%; height: auto; border: none; }
a { color: inherit; text-decoration: none; transition: .3s; }
svg { display: inline-block; vertical-align: middle; }

/* ───────── 2. タイポグラフィ ───────── */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 .8em;
}
h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 2rem; line-height: 1.3; position: relative; display: inline-block; }
h2::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 60px; height: 3px; background: var(--primary-gradient); border-radius: 3px; }
h3 { font-size: 1.5rem; line-height: 1.4; }
p { font-size: 1rem; line-height: 1.8; letter-spacing: .02em; color: var(--text-medium); margin: 0 0 1.5rem; }

/* ───────── 3. 汎用ユーティリティ ───────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.shadow-card { box-shadow: 0 8px 24px rgba(0,0,0,.07); transition: .3s; }
.shadow-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.1); transform: translateY(-5px); }
.shadow-soft { box-shadow: 0 4px 12px rgba(0,0,0,.05); }

.btn-primary { background: var(--primary-gradient); color: #fff; font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; height: 56px; border-radius: 8px; box-shadow: 0 4px 12px rgba(212,175,55,.25); transition: .3s; }
.btn-primary:hover { background: linear-gradient(135deg,#BA9526 0%,#D4AF37 100%); box-shadow: 0 6px 16px rgba(212,175,55,.35); transform: translateY(-2px); }
.btn-outline { border: 2px solid var(--primary); color: var(--primary); font-weight: 600; letter-spacing: .02em; background: rgba(255,255,255,.9); display: inline-flex; align-items: center; justify-content: center; height: 56px; border-radius: 8px; transition: .3s; }
.btn-outline:hover { background: rgba(212,175,55,.1); border-color: var(--primary-dark); color: var(--primary-dark); transform: translateY(-2px); }
.aspect-video { aspect-ratio: 16/9; }
.line-clamp-2, .-webkit-line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.line-clamp-3, .-webkit-line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* スクロール時フェードイン */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.reveal.active { opacity: 1; transform: none; }

/* グローエフェクト */
.glow-effect { position: relative; overflow: hidden; }
.glow-effect::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle,rgba(212,175,55,.2) 0%,rgba(212,175,55,0) 60%); opacity: 0; transform: scale(.8); transition: .8s; z-index: 0; }
.glow-effect:hover::before { opacity: 1; transform: scale(1); }
.glow-text { position: relative; z-index: 1; }

/* ブレッドクラム */
.breadcrumb { display: flex; flex-wrap: wrap; padding: .75rem 0; font-size: .875rem; color: var(--text-light); }
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-separator { margin: 0 .5rem; }
.breadcrumb-item a { color: var(--primary); }
.breadcrumb-item a:hover { text-decoration: underline; color: var(--primary-dark); }

/* ───────── 4. ナビゲーション ───────── */
.nav-link { position: relative; padding: .5rem 0; }
.nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary-gradient); transform: scaleX(0); transform-origin: center; transition: .3s; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* モバイルメニュー */
#mobile-menu { transition: transform .3s; }
.mobile-cta-buttons { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 15px; background: rgba(255,255,255,.98); backdrop-filter: blur(10px); box-shadow: 0 -4px 16px rgba(0,0,0,.08); z-index: 40; transition: transform .3s; transform: translateY(100%); }
.mobile-cta-buttons.visible { transform: translateY(0); }
@media (max-width: 768px) { .mobile-cta-buttons { display: block; } }
@media (max-width: 767px) { .header-cta { display: none; } }

/* ───────── 5. ブログ一覧ページ ───────── */
.blog-hero { position: relative; padding: 6rem 0; background: linear-gradient(145deg,#FFFAF0 0%,#FFF8E5 100%); overflow: hidden; }
.blog-hero::before, .blog-hero::after { content: ""; position: absolute; border-radius: 50%; z-index: 1; opacity: .1; background: var(--primary-gradient); }
.blog-hero::before { top: -20px; right: -20px; width: 240px; height: 240px; }
.blog-hero::after { bottom: -40px; left: -40px; width: 320px; height: 320px; }
.blog-hero-content { position: relative; z-index: 2; }

.blog-search-form { position: relative; }
.blog-search-input { width: 100%; padding: .75rem 1rem .75rem 3rem; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background: #fff; transition: .3s; }
.blog-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }
.blog-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-light); }

.category-chip { display: inline-block; padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600; cursor: pointer; transition: .3s; }
.category-chip:hover, .category-chip.active { background: var(--primary-gradient); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(212,175,55,.2); }

.blog-card { overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: .3s; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,.1); }

.blog-image { position: relative; overflow: hidden; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.blog-card:hover .blog-image img { transform: scale(1.05); }

.blog-content { flex-grow: 1; display: flex; flex-direction: column; }
.blog-title { font-weight: 700; line-height: 1.4; margin-bottom: .5rem; transition: .3s; }
.blog-card:hover .blog-title { color: var(--primary); }
.blog-excerpt { color: var(--text-medium); margin-bottom: 1rem; flex-grow: 1; }
.blog-meta { font-size: .875rem; color: var(--text-light); display: flex; align-items: center; }

.pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; }
.page-item, .page-nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; transition: .3s; }
.page-item:hover, .page-nav:hover { background: rgba(212,175,55,.1); color: var(--primary); transform: translateY(-2px); }
.page-item.active { background: var(--primary-gradient); color: #fff; box-shadow: 0 4px 8px rgba(212,175,55,.2); }

/* ───────── 6. ブログ詳細ページ ───────── */
.article-header { margin-bottom: 2rem; }
.article-title { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1rem; font-weight: 700; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--text-light); font-size: .875rem; margin-bottom: 1.5rem; }
.article-meta-item { display: flex; align-items: center; }
.article-meta-item svg { margin-right: .5rem; }
.article-category { display: inline-block; padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--primary-gradient); color: #fff; transition: .3s; }
.article-category:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(212,175,55,.2); }
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.article-tag { display: inline-block; padding: .25rem .75rem; background: #f1f1f1; border-radius: 999px; font-size: .75rem; transition: .3s; }
.article-tag:hover { background: rgba(212,175,55,.1); color: var(--primary); transform: translateY(-2px); }
.article-content { font-size: 1.125rem; line-height: 1.8; }
.article-content h2 { font-size: 1.75rem; margin-top: 3rem; margin-bottom: 1.5rem; display: block; }
.article-content h2::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 60px; height: 3px; background: var(--primary-gradient); border-radius: 3px; }
.article-content h3 { font-size: 1.5rem; margin: 2rem 0 1rem; padding-left: 1rem; border-left: 3px solid var(--primary); }
.article-content h4 { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
.article-content ul, .article-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.article-content ul li, .article-content ol li { margin-bottom: .5rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content a { text-decoration: underline; color: var(--primary); }
.article-content a:hover { color: var(--primary-dark); }
.article-content img { border-radius: 8px; margin: 2rem 0; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.article-content blockquote { margin: 2rem 0; padding: 1.5rem; border-left: 4px solid var(--primary); background: rgba(212,175,55,.05); border-radius: 0 8px 8px 0; font-style: italic; }
.article-content code { font-family: monospace; background: #f1f1f1; padding: .2rem .4rem; border-radius: 4px; font-size: .9em; }
.article-content pre { background: #f8f8f8; padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.article-content table th, .article-content table td { padding: .75rem; border: 1px solid #e5e5e5; }
.article-content table th { background: #f1f1f1; font-weight: 600; }
.article-content table tr:nth-child(even) { background: #f9f9f9; }

/* 目次 */
.table-of-contents { background: #f9f9f9; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 4px 8px rgba(0,0,0,.05); }
.table-of-contents-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; }
.table-of-contents-title svg { margin-right: .5rem; }
.table-of-contents ul { list-style: none; padding-left: 0; }
.table-of-contents li { margin-bottom: .5rem; }
.table-of-contents a { display: block; padding: .25rem 0; color: var(--text-medium); }
.table-of-contents a:hover { color: var(--primary); transform: translateX(4px); }
.toc-h2 { font-weight: 600; }
.toc-h3 { padding-left: 1.5rem; font-size: .95em; }
.toc-h4 { padding-left: 3rem; font-size: .9em; }

/* 著者プロフィール & 関連記事 & コメント & CTA は上記同様省略せず */

/* ───────── 7. レスポンシブ調整 ───────── */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  .article-title { font-size: 1.75rem; }
  .article-content { font-size: 1rem; }
  .article-content h2 { font-size: 1.5rem; }
  .article-content h3 { font-size: 1.25rem; }
  .author-profile { flex-direction: column; align-items: center; text-align: center; }
  .author-avatar { margin-right: 0; margin-bottom: 1rem; }
  .author-social { justify-content: center; }
  .sidebar { margin-top: 3rem; }
  .cta-section { padding: 2rem; }
  .blog-hero { padding: 4rem 0; }
}

/* ===== 8. 最終調整 & レイアウト修正 ===== */
@media (min-width: 1024px) {
  /* 2カラム比 */
  .single-post .w-2\/3, body.page-template-blog-archive .w-2\/3 { max-width: 680px; flex: 0 0 auto; }
  .single-post .w-1\/3, body.page-template-blog-archive .w-1\/3 { flex: 0 0 320px; }
  /* サイドバー幅 */
  .blog-sidebar, .blog-sidebar .widget { width: 320px !important; display: block; }
}

@media (max-width: 767px) {
  /* フル幅＆縦並び */
  body.archive .container, body.single-post .container, body.page-template-blog-archive .container { max-width: 100% !important; padding: 0 1rem !important; }
  body.archive .flex.md\:flex-row, body.single-post .flex.md\:flex-row, body.page-template-blog-archive .flex.md\:flex-row { flex-direction: column !important; }
  .w-full.md\:w-2\/3, .w-full.md\:w-1\/3 { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; }
  html, body { overflow-x: hidden !important; }
  img, iframe, video { max-width: 100% !important; height: auto !important; }
}

/* ────────────
   固定ヘッダー対応：
   ブログ一覧と投稿詳細ページだけ余白を入れる
   ──────────── */
   body.home  .site-content,
   body.home  .content-area,
   body.blog  .site-content,
   body.blog  .content-area,
   body.single-post .site-content,
   body.single-post .content-area {
     margin-top: 4rem; /* モバイル時 */
   }
   
   @media (min-width: 768px) {
     body.home  .site-content,
     body.home  .content-area,
     body.blog  .site-content,
     body.blog  .content-area,
     body.single-post .site-content,
     body.single-post .content-area {
       margin-top: 5rem; /* デスクトップ時 */
     }
   }

/* ───────── ブログページ：ヒーロー検索フォーム修正 ───────── */
.blog-hero .blog-search-form {
  position: relative;
  max-width: 600px;      /* お好みで調整 */
  margin: 2rem auto 0;    /* 上に余白＋中央寄せ */
  width: 100%;
}

.blog-hero .blog-search-input {
  width: 100%;
  padding: .75rem 1rem .75rem 3rem;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  transition: .3s;
}

.blog-hero .blog-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .2);
}

.blog-hero .blog-search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-light);
}

/* ────────────
   パンくずリストをヘッダー下に表示
   ──────────── */
   body.blog .breadcrumb,
   body.home .breadcrumb,
   body.single-post .breadcrumb {
     position: relative;
     z-index: 1;               /* ヘッダーより下、他コンテンツより上 */
     margin-top: 0rem;         /* デスクトップのヘッダー高さ分 */
   }
   
   @media (max-width: 767px) {
     body.blog .breadcrumb,
     body.home .breadcrumb,
     body.single-post .breadcrumb {
       margin-top: 4rem;       /* モバイルのヘッダー高さ分 */
     }
   }