/* =======================================
   🗓️ 2025-10-11 20:00 ベース整理＋ピックアップ修正版
   Sanei Times - サンタイムズ
======================================= */

/*
Theme Name: Sanei Times
Description: サンタイムズ - 太陽光発電の今と未来を追うオウンドメディア。
Version: 1.1
Author: Sanei
*/

/* =======================================
   🌟 基本・WordPressコア
======================================= */
.alignwide { margin-left: -100px; margin-right: -100px; }
.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* =======================================
   🌟 横スクロールナビ
======================================= */
.scrollable-nav ul {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  padding-bottom: 0.5rem;
}
.scrollable-nav ul::-webkit-scrollbar { display: none; }
.scrollable-nav li { flex-shrink: 0; padding-right: 1.5rem; }

/* =======================================
   🌟 SNSアイコンカラー
======================================= */
.text-custom-x { color: #000; }
.text-custom-youtube { color: #ff0000; }
.text-custom-instagram { color: #c13584; }

/* =======================================
   🌟 ヘッダー黒帯・余白対策
======================================= */
header.site-header {
  margin-bottom: 0 !important;
  overflow: visible;
  z-index: 1000;
}

.header-under,
.header-spacer,
.nav-spacer,
.bg-band,
.dummy-bar {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

header.site-header + * { margin-top: 0 !important; }

/* =======================================
   🌟 背景・黒帯リセット
======================================= */
div[style*="background-color:#0f0f0f"],
div[style*="background:#0f0f0f"],
.bg-[#0f0f0f] {
  background: transparent !important;
  border: 0 !important;
}

/* =======================================
   🌟 frontページ余白リセット
======================================= */
.home main,
.front-page main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
@media (min-width: 768px) {
  .md\:pt-24 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =======================================
   🌟 ピックアップ記事レイアウト調整（986.66×384固定）
   🗓️ 2025-10-11
======================================= */
body.home section.mt-12.px-4.pickup-section {
  display: flex !important;
  justify-content: center !important;
  padding: 0 !important;
}

body.home section.mt-12.px-4.pickup-section > .max-w-5xl {
  max-width: 986.66px !important; /* ✅ 希望の横幅 */
  width: 100% !important;
  margin: 0 auto !important;
  text-align: left !important;
}

body.home section.mt-12.px-4.pickup-section article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  background-color: #111827 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 🔸画像エリア：986.66×384固定 */
body.home section.mt-12.px-4.pickup-section article img {
  width: 100% !important;
  height: auto !important; /* ←潰れ防止 */
  max-height: 384px !important;
  aspect-ratio: 986.66 / 384 !important;
  object-fit: cover !important;
  border-radius: 16px 16px 0 0 !important;
}

/* 🔸テキストエリア */
body.home section.mt-12.px-4.pickup-section article .p-8 {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  background: #111827 !important;
  color: #fff !important;
}

/* 🔸タイトルとリンク */
body.home section.mt-12.px-4.pickup-section article h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  color: #fff !important;
}

body.home section.mt-12.px-4.pickup-section article a {
  color: #ff6600 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.2s ease-in-out !important;
}

body.home section.mt-12.px-4.pickup-section article a:hover {
  color: #ff8533 !important;
  text-decoration: underline !important;
}

/* 🔸モバイル対応 */
@media (max-width: 768px) {
  body.home section.mt-12.px-4.pickup-section article {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  body.home section.mt-12.px-4.pickup-section article img {
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
  }
}

/* =======================================
   🌟 カテゴリー記事 16:9固定（ピックアップ除外済）
======================================= */
.category-post,
.category-item,
.wp-block-post-featured-image,
.wp-block-post-featured-image a {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
  position: relative !important;
}

/* ✅ ピックアップ画像を除外して安全化 */
.category-post img,
.category-item img,
.wp-block-post-featured-image img,
img.object-cover:not(.pickup-img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* ✅ ピックアップ画像専用リセット */
.pickup-section img,
img.pickup-img {
  height: auto !important;
  max-height: 384px !important;
  aspect-ratio: 986.66 / 384 !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* =======================================
   🌟 ヘッダー・フッター統一リンクスタイル
======================================= */
header a,
footer a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}
header a:hover,
footer a:hover {
  color: #ff6600 !important;
}
header a::after,
footer a::after { content: none !important; }
header .menu-item.current-menu-item a,
footer .menu-item.current-menu-item a { color: #ff6600 !important; }

header .flex.items-center.gap-3 a svg {
  transition: all 0.3s ease !important;
}
header .flex.items-center.gap-3 a:hover svg {
  filter: brightness(1.8) !important;
  transform: scale(1.1) !important;
}

/* =======================================
   🌟 フッター全体スタイル
======================================= */
.site-footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 60px 20px;
  border-top: 1px solid #222;
}
.footer-menu a:hover { color: #ff6600; }
.footer-copy {
  font-size: 1rem;
  color: #fff;
  margin-top: 25px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* =======================================
   🌟 全体背景の安定化
======================================= */
body {
  background-color: #000 !important;
  color: #fff !important;
}
header, footer { color: #fff !important; }

/* =======================================
   🩶 currentページも白待機に修正
======================================= */
header .menu-item.current-menu-item a,
footer .menu-item.current-menu-item a,
.nav-morph__list .current-menu-item a { color: #ffffff !important; }
header .menu-item a:hover,
footer .menu-item a:hover,
.nav-morph__list a:hover { color: #ff6600 !important; }

/* =======================================
   🩶タイトルを太め＋影つきに
======================================= */
.hero-title {
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.7);
  letter-spacing: 0.05em;
  transition: all 0.4s ease;
}
.hero-title:hover { transform: scale(1.02); }

/* =======================================
   🏅 ランキング上位アニメーション個別版
======================================= */
@keyframes shine-gold {
  0% { filter: brightness(1) drop-shadow(0 0 0px #FFD700); }
  50% { filter: brightness(1.6) drop-shadow(0 0 12px #FFF59E); }
  100% { filter: brightness(1) drop-shadow(0 0 0px #FFD700); }
}
@keyframes glow-silver {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 4px #C0C0C0); }
  50% { filter: brightness(1.4) drop-shadow(0 0 10px #E0E0E0); }
}
@keyframes pulse-bronze {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.3) drop-shadow(0 0 8px #CD7F32); }
}
.rank-1-anim { animation: shine-gold 3s ease-in-out infinite; }
.rank-2-anim { animation: glow-silver 4s ease-in-out infinite; }
.rank-3-anim { animation: pulse-bronze 3.5s ease-in-out infinite; }


/* =======================================
   🗓️ 2025-10-11 21:00 最終安定版
   Sanei Times - ピックアップ除外対応
======================================= */

/* 🌟 カテゴリー・共通画像 */
.category-post,
.category-item,
.wp-block-post-featured-image,
.wp-block-post-featured-image a {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: block !important;
  position: relative !important;
}

/* ✅ ピックアップを除外して安全化 */
.category-post img,
.category-item img,
.wp-block-post-featured-image img,
img.object-cover:not(.pickup-img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* 🚨 ピックアップ画像だけ別処理（986.66×384対応） */
.pickup-section img,
img.pickup-img {
  width: 100% !important;
  height: auto !important;        /* ← 高さをリセット */
  max-height: 384px !important;   /* ← 上限設定 */
  object-fit: cover !important;
  aspect-ratio: 986.66 / 384 !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Tailwindクラス h-64 対策（強制潰し） */
.pickup-section img.h-64 {
  height: auto !important;
  max-height: 384px !important;
}

/* 💡 念のため：ピックアップセクション全体 */
.pickup-section {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ===============================
   SNSシェアボタン
   =============================== */
.share_area {
  text-align: center;
  margin: 30px 0 50px 0;
}
.share_box {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0;
}
.share_box li a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  line-height: 42px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  display: inline-block;
}
.note_btn a { background: #41C9B4; }
.facebook_btn a { background: #3b579d; }
.twitter_btn a { background: #55acee; }
.line_btn a { background: #00b900; }
.copy_btn a { background: #999; }
.share_box a:hover { opacity: 0.8; }

/* ===============================
   2025-10-30以降の記事スタイル
   =============================== */
.poststyle-title {
    max-width: 1200px;
    margin: auto;
}
.poststyle-box {
   padding: 50px 50px; 
   margin: 20px auto; 
   color: #fff; 
   line-height: 1.9; 
   font-size: 1.05rem; 
   background: #0e1624;
   border-radius: 10px;
   max-width: 1200px;
}
.poststyle-box p {
    margin:1em 0;
}
.poststyle-box h2 {
    font-size: 1.45rem;
    line-height: 1.4;
    font-weight: 900;
    position: relative;
    padding: 10px 20px 10px 0;
    border-bottom: 3px solid #ff6600;
    margin-bottom: 2rem;
}
.poststyle-box h2:before {
    position: absolute;
    bottom: -14px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0;
    border-style: solid;
    border-color: #ff6600 transparent transparent;
}
.poststyle-box h2:after {
    position: absolute;
    bottom: -10px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0;
    border-style: solid;
    border-color: #0e1624 transparent transparent;
}
.poststyle-box h3  {
    margin: 60px 0 30px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.03em;
    font-size: 1.45rem;
    line-height: 1.3;
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}
.poststyle-box h3:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 40px;
  height: 2px;
  left: 0;
  background-color: #ff6600;
  border-radius: 2px;
}
.poststyle-box h4  {
    font-weight: 900;
    margin-top: 50px;
    font-size: 1.25em;
    line-height: 1.2;
}
.poststyle-box h5  {
    font-weight: 900;
    margin-top: 50px;
}
.poststyle-box h6  {
    margin-top: 50px;
    font-weight: 900;
    font-size: 0.83em;
    line-height: 1;
}
.poststyle-box p a {
    text-decoration: underline;
    color: #ff6600;
}
.poststyle-box img  {
    padding: 30px 0 20px;
}
.poststyle-box .caption-box img  {
    padding: 30px 0 10px;
}
.poststyle-box .caption {
    display:block;
    text-align:center;
    margin-bottom: 50px;
}
.poststyle-box div.interview  {
    margin: 40px 0 40px 100px;
    padding-right: min(132px, 5vw);
    padding-left: 50px;
    line-height: 1.8;
    border-top: 1px solid #C3C3C3;
    border-left: 1px solid #C3C3C3;
}

@media (max-width: 768px) {
    .poststyle-box {
       padding: 0 15px; 
   }
    .poststyle-box div.interview {
        margin: 40px 0 40px 0px;
        padding-left: 20px;
    }



}


/* ===============================
   Instagram風プレビュー
   =============================== */
.insta-section {
  margin: 40px 0;
  background: #111;
  border-radius: 16px;
  padding: 20px;
  color: #fff;
}
.insta-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #222;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.insta-image img {
  width: 280px;
  border-radius: 10px;
}
.insta-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.8;
}

/* 🔸おすすめ記事 */
.related-posts {
  margin: 60px 0;
}
.related-posts h2 {
  color: #fff; /* 見出し白 */
}
.related-posts .block {
  background: #ff6600; /* 左のオレンジライン */
}

/* 🔸前後記事ナビ */
.post-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px 0;
  padding: 20px;
  background: #111;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.post-navigation a {
  color: #ff6600;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
}
.post-navigation a:hover {
  text-decoration: underline;
  color: #fff;
}

/* ===============================
   ページネーション（共通デザイン）
   =============================== */
.the_posts_pagination .page-numbers {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: #888;
  color: #fff;
  text-decoration: none;
  margin: 0 5px;
  font-size: 14px;
  text-align: center;
}
.the_posts_pagination .page-numbers:hover {
  background: #ff6600;
}
.the_posts_pagination .current {
  background: #ff6600;
  color: #fff;
  font-weight: bold;
}


/* ===============================
   固定ヘッダー高さぶんの余白を本文上に確保
   =============================== */
body {
  /* ヘッダー高さ h-16 (64px) + 余裕分16px = 80px */
  padding-top: 80px;
}

@media (min-width: 768px) {
  body {
    /* md:h-20 = 80px + 余裕20px = 約100px */
    padding-top: 100px;
  }
}


/* ===============================
/* 🌈 メニュー開いたときランダムカラー */
   =============================== */
.morph-logo {
  transition: filter 0.6s ease, transform 0.6s ease;
}

.nav-morph.active .morph-logo {
  transform: scale(1.05);
}

/* ===============================
   📱 SNSシェアボタン：スマホ調整
   =============================== */
.share_area {
  text-align: center;
  margin-bottom: 2rem;
}

.share_box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* アイコン間隔 */
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

/* 各アイコン共通デザイン */
.share_box li a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  transition: transform 0.2s ease;
}

/* アイコンホバー時の軽い拡大 */
.share_box li a:hover {
  transform: scale(1.1);
}

/* ===============================
   🎨 個別カラー設定
   =============================== */
.note_btn a { background-color: #00C4CC; }     /* noteカラー */
.facebook_btn a { background-color: #3B5998; }
.twitter_btn a { background-color: #55ACEE; }
.line_btn a { background-color: #00C300; }
.copy_btn a { background-color: #888; }

/* ===============================
   📱 スマホでの調整
   =============================== */
@media (max-width: 768px) {
  .share_box {
    flex-wrap: wrap;           /* 折り返しOK */
    gap: 10px;
  }

  .share_box li a {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/* ===============================
   🩶 共通タイトル（Hero・Single共用・改）
   =============================== */
.main-title {
  font-weight: 900 !important;
  color: #fff !important;
  text-shadow: 0 3px 8px rgba(0,0,0,0.7) !important;
  letter-spacing: 0.03em !important;
  font-size: 1.75rem !important; /* 💻 PC：落ち着いたサイズ */
  line-height: 1.4 !important;
  transition: all 0.4s ease !important;
}
@media (max-width: 768px) {
  .main-title {
    font-size: 1.35rem !important; /* 📱 スマホ時 */
    line-height: 1.45 !important;
  }
}


/* ===============================
   🧡 シングル記事タイトル（調整）
   =============================== */
.single .main-title {
  font-size: 1.75rem;       /* 通常PC用（約28px） */
  line-height: 1.3;
  font-weight: 800;
}

/* 🔸スマホ時のタイトルサイズ */
@media (max-width: 768px) {
  .single .main-title {
    font-size: 1.4rem;     /* 約22px */
    line-height: 1.4;
  }
}



/* ===============================
    インスタ風カード（上品ver・白背景）
   =============================== */
.insta-section {
  margin: 40px 0;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  color: #555555;
}

.insta-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.insta-image img {
  width: 260px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.insta-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.8;
  color: #666666;
}

@media (max-width: 768px) {
  .insta-card {
    flex-direction: column;
  }
  .insta-image img {
    width: 100%;
  }
}

/* ===============================
   トップページだけは余白ゼロにする
   =============================== */
body.home {
  padding-top: 0 !important;
}

@media (min-width: 768px) {
  body.home {
    padding-top: 0 !important;
  }
}



/* ===============================
   🧡 カテゴリー一覧タイトル：強制統一版
   =============================== */
aside h3.text-xl.font-bold.text-white,
aside h2.text-2xl.font-bold.uppercase.tracking-wider.text-white {
  font-size: 1.5rem !important;      /* text-2xl と同等 */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #fff !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

aside h3.text-xl.font-bold.text-white::before,
aside h2.text-2xl.font-bold.uppercase.tracking-wider.text-white::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 0.25rem;
  border-radius: 9999px;
  background-color: #ff6600;
}