/*
 * MGS Content Suite - サイト全体デザイン
 * となりのシロウト / ダーク系
 * preview2.htmlベース
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&family=Noto+Sans+JP:wght@300;400;700&display=swap');

:root {
  --bg:      #0c0c0c;
  --surface: #111;
  --border:  #1c1c1c;
  --text:    #ddd;
  --muted:   #555;
  --accent:  #c8a96e;
  --hot:     #c0392b;
  --hot2:    #a93226;
}

/* ===== RESET / BASE ===== */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }

img { max-width: 100%; height: auto; display: block; }

/* ===== HEADER ===== */
#masthead, .site-header, header.site-header {
  background: rgba(12,12,12,.97) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  backdrop-filter: blur(8px) !important;
  padding: 12px 0 !important;
  box-shadow: none !important;
}

.site-title, .site-title a {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
}

.site-description {
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: .12em !important;
}

/* ナビゲーション */
.main-navigation, nav.main-navigation {
  background: transparent !important;
}
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation ul li a {
  color: var(--muted) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  padding: 6px 10px !important;
}
.main-navigation ul li a:hover { color: var(--accent) !important; }

/* 検索フォーム */
.search-form input[type="search"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}
.search-form button, .search-submit {
  background: var(--hot) !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

/* ===== LAYOUT ===== */
.site-content, #content, .content-area {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  float: none !important;
  width: 100% !important;
}

/* サイドバーを非表示 */
#secondary, .widget-area, aside.widget-area {
  display: none !important;
}

/* ===== トップページ・アーカイブ：記事一覧 ===== */
.posts-loop, .archive .site-main, .home .site-main,
.blog .site-main {
  padding: 20px 0 60px !important;
}

/* 記事カード（一覧） */
article.post, article.type-post {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 32px !important;
  overflow: hidden !important;
  animation: mgss-up .5s ease both !important;
}

@keyframes mgss-up {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}

/* サムネイル（ヒーロー） */
article.post .post-thumbnail,
article.post .entry-thumbnail {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
}
article.post .post-thumbnail img,
article.post .entry-thumbnail img {
  width: 100% !important;
  aspect-ratio: 16/7 !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(.5) !important;
  transition: filter .4s, transform .5s !important;
}
article.post:hover .post-thumbnail img,
article.post:hover .entry-thumbnail img {
  filter: brightness(.4) !important;
  transform: scale(1.025) !important;
}

/* サムネイル上にタイトルを重ねる */
article.post .post-thumbnail {
  cursor: pointer !important;
}

/* エントリータイトル */
.entry-title {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 14px 16px 10px !important;
}
.entry-title a {
  color: #fff !important;
  text-decoration: none !important;
}
.entry-title a:hover { color: var(--accent) !important; }

/* 評価バー（カスタムフィールドから表示） */
.mgss-card-proof {
  display: flex !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 !important;
}
.mgss-card-proof-item {
  flex: 1 !important;
  padding: 8px 6px !important;
  text-align: center !important;
  border-right: 1px solid var(--border) !important;
}
.mgss-card-proof-item:last-child { border-right: none !important; }
.mgss-card-proof-num {
  display: block !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  font-family: 'Noto Serif JP', serif !important;
  line-height: 1.2 !important;
}
.mgss-card-proof-label {
  display: block !important;
  font-size: 9px !important;
  color: var(--muted) !important;
  letter-spacing: .08em !important;
  margin-top: 2px !important;
}
.mgss-gold { color: var(--accent) !important; }
.mgss-red  { color: #e07060 !important; }

/* カードCTAボタン */
.mgss-card-cta {
  display: block !important;
  width: 100% !important;
  padding: 13px 16px !important;
  background: var(--hot) !important;
  color: #fff !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .2s !important;
  box-sizing: border-box !important;
}
.mgss-card-cta:hover { background: var(--hot2) !important; color: #fff !important; }
.mgss-card-cta em {
  display: block !important;
  font-style: normal !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  opacity: .7 !important;
  margin-top: 2px !important;
  letter-spacing: .12em !important;
}

/* 日付・メタ情報 */
.entry-meta, .posted-on, .byline {
  font-size: 10px !important;
  color: var(--muted) !important;
  padding: 6px 16px !important;
}

/* 抜粋 */
.entry-summary, .entry-content p:first-child {
  color: #aaa !important;
  font-size: 13px !important;
  padding: 10px 16px 14px !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

/* ページネーション */
.pagination, .nav-links, .page-numbers {
  text-align: center !important;
  padding: 20px 0 40px !important;
}
.page-numbers {
  display: inline-block !important;
  padding: 6px 12px !important;
  margin: 2px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 13px !important;
}
.page-numbers.current {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
}
.page-numbers:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ===== 個別記事ページ ===== */
.single .entry-header {
  margin-bottom: 0 !important;
}
.single .entry-title {
  font-size: 20px !important;
  padding: 20px 0 10px !important;
  color: #fff !important;
}
.single .entry-content {
  color: var(--text) !important;
  line-height: 1.9 !important;
}
.single .entry-content p {
  margin-bottom: 14px !important;
  font-size: 14px !important;
  color: #b8b8b8 !important;
}
.single .entry-content strong { color: #e8e8e8 !important; }
.single .entry-content blockquote {
  border-left: 2px solid var(--accent) !important;
  padding: 8px 14px !important;
  color: #888 !important;
  font-style: italic !important;
  margin: 16px 0 !important;
  background: rgba(200,169,110,.04) !important;
}

/* ===== カテゴリーページ ===== */
.archive-title, .page-title {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  letter-spacing: .08em !important;
  padding: 20px 0 12px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 20px !important;
}

/* ===== フッター ===== */
#colophon, .site-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  text-align: center !important;
  padding: 28px !important;
  letter-spacing: .1em !important;
}
.site-footer a { color: var(--muted) !important; }

/* ===== モバイル対応 ===== */
@media (max-width: 600px) {
  .site-content, #content {
    padding: 0 10px !important;
  }
  .entry-title {
    font-size: 15px !important;
    padding: 12px 12px 8px !important;
  }
  .single .entry-title { font-size: 17px !important; }
}

/* ===================================================
   自動サイズ調整
   =================================================== */

/* ① 全画像をコンテナ幅に自動フィット */
.entry-content img,
.single .entry-content img,
.mgss-body img,
.mgss-gallery img,
.mgss-vid-thumb img,
.post-thumbnail img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ② サンプル画像ギャラリー：横スクロール時は固定幅・縦は統一 */
.mgss-gallery {
  display: flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.mgss-gallery::-webkit-scrollbar { display: none !important; }
.mgss-gi {
  flex: 0 0 clamp(70px, 22vw, 100px) !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
}
.mgss-gi img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: unset !important;
}

/* ③ 動画サムネイル：16:9固定・幅100% */
.mgss-vid-thumb {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  position: relative !important;
}
.mgss-vid-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: unset !important;
}

/* ④ ヒーロー画像（一覧カード）：16/7固定 */
.post-thumbnail img,
.entry-thumbnail img {
  aspect-ratio: 16/7 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}

/* ⑤ Grok Aurora生成画像：縦横比を保持しつつ幅100% */
.mgss-aurora-img,
figure.wp-block-image img,
.wp-post-image {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  max-height: 80vw !important;
}

/* ⑥ iframe（広告・YouTube等）：レスポンシブ対応 */
.entry-content iframe,
.mgss-body iframe,
.ad-wrap iframe,
[id^="google_ads"] iframe,
ins.adsbygoogle {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ⑦ AdSense レスポンシブ広告ラッパー */
.mgss-ad-wrap {
  width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
  margin: 20px 0 !important;
}
.mgss-ad-wrap ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 90px !important;
}

/* ⑧ WordPress コアの埋め込みコンテンツ */
.wp-block-embed__wrapper,
.wp-block-embed {
  width: 100% !important;
  max-width: 100% !important;
}
.wp-block-embed__wrapper iframe {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16/9 !important;
  height: auto !important;
}

/* ⑨ テーブル（比較表等）：横スクロール対応 */
.entry-content table,
.mgss-body table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
  border-collapse: collapse !important;
}
.entry-content table td,
.entry-content table th {
  padding: 8px 10px !important;
  border: 1px solid var(--border) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* ⑩ モバイル特化：小さい画面での調整 */
@media (max-width: 480px) {
  .mgss-gi {
    flex: 0 0 clamp(60px, 28vw, 85px) !important;
  }
  .mgss-proof-num,
  .mgss-card-proof-num {
    font-size: 13px !important;
  }
  .mgss-cta-1 {
    font-size: 13px !important;
    padding: 13px 12px !important;
  }
  .mgss-cta-3 {
    font-size: 12px !important;
  }
}