@charset "UTF-8";

/*!
Theme Name: 生活応援支部オリジナル
Description: 生活応援支部(hanmarihan.com)オリジナルの子テーマ。ネイビー×コーラルのモダンデザインに、ヘッダーと記事タイトル部分だけパールオーロラの背景を効かせている。
Theme URI: https://www.hanmarihan.com/
Author: hanmarihan
Template:   cocoon-master
Version:    1.0.0
*/

/* ===== 生活応援支部 オリジナルテーマ ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  --shk-navy:#21294a;
  --shk-navy2:#33407a;
  --shk-cta:#ff6f47;
  --shk-cta2:#ff9166;
  --shk-bg:#f5f6fb;
  --shk-surface:#ffffff;
  --shk-text:#262a35;
  --shk-text-sub:#6b7280;
  --shk-border:#e7e9f2;
}

/* 全体 */
body{
  background:var(--shk-bg);
  color:var(--shk-text);
  font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans',Meiryo,sans-serif;
}

/* ===== ヘッダー・記事タイトル：パールオーロラ背景 ===== */
.header,
.article-header{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fdfbf7 0%,#fbf6ef 100%) !important;
}
.header{
  border-bottom:1px solid var(--shk-border);
  box-shadow:0 2px 14px rgba(33,41,74,.06);
}
.header::before,.header::after,
.article-header::before,.article-header::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(36px);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}
.header::before{ width:170px;height:170px; left:-40px; top:-60px; background:#ffd6e8; animation:shkFloatA 13s ease-in-out infinite; }
.header::after{ width:190px;height:190px; right:-50px; top:-70px; background:#d8e8ff; animation:shkFloatB 15s ease-in-out infinite; }
.article-header::before{ width:150px;height:150px; left:8%; top:-50px; background:#e4ffe0; animation:shkFloatC 17s ease-in-out infinite; }
.article-header::after{ width:170px;height:170px; right:4%; bottom:-55px; background:#ffd6e8; animation:shkFloatA 14s ease-in-out infinite; }

@keyframes shkFloatA{0%,100%{transform:translate(0,0);}50%{transform:translate(20px,14px);}}
@keyframes shkFloatB{0%,100%{transform:translate(0,0);}50%{transform:translate(-18px,16px);}}
@keyframes shkFloatC{0%,100%{transform:translate(0,0);}50%{transform:translate(12px,-16px);}}

.header > *{ position:relative; z-index:1; }
.article-header > *{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .header::before,.header::after,.article-header::before,.article-header::after{ animation:none !important; }
}

.site-name, .site-name a{
  color:var(--shk-navy) !important;
  font-weight:900;
  letter-spacing:.02em;
}

/* 記事本文の見出し */
.entry-content h2{
  font-size:1.5em;
  font-weight:900;
  color:#fff;
  padding:.6em .9em;
  margin:2.2em 0 1em;
  background:linear-gradient(135deg,var(--shk-navy),var(--shk-navy2));
  border-radius:10px;
  box-shadow:0 4px 14px rgba(33,41,74,.18);
}
.entry-content h3{
  font-size:1.2em;
  font-weight:700;
  color:var(--shk-navy);
  border-left:6px solid var(--shk-cta);
  padding-left:.6em;
  margin:1.8em 0 .8em;
}

/* 目次(TOC) */
#toc.toc{
  background:var(--shk-surface);
  border:none;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(33,41,74,.08);
  padding:1.4em 1.6em;
  margin:2em 0;
}
#toc .toc-title{
  background:var(--shk-navy);
  color:#fff;
  display:inline-block;
  padding:.3em 1em;
  border-radius:999px;
  font-weight:700;
  margin-bottom:.6em;
}
#toc a{ color:var(--shk-text); }
#toc a:hover{ color:var(--shk-cta); }

/* 比較表 */
.entry-content table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--shk-border);
  box-shadow:0 6px 20px rgba(33,41,74,.06);
  margin:1.6em 0;
}
.entry-content table th{
  background:var(--shk-navy);
  color:#fff;
  font-weight:700;
  padding:.9em .8em;
}
.entry-content table td{
  padding:.9em .8em;
  border-top:1px solid var(--shk-border);
  background:#fff;
}
.entry-content table tr:hover td{ background:#f5f7ff; }

/* 商品リンク(テキストのみ)をCTAボタン化。画像リンクは対象外 */
.entry-content a[href*="a.r10.to"]:not(:has(img)):not(table a){
  display:inline-block;
  background:linear-gradient(135deg,var(--shk-cta),var(--shk-cta2));
  color:#fff !important;
  font-weight:700;
  padding:.7em 1.6em;
  border-radius:999px;
  text-decoration:none !important;
  box-shadow:0 6px 16px rgba(255,111,71,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.entry-content a[href*="a.r10.to"]:not(:has(img)):not(table a):hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(255,111,71,.45);
}

/* 記事末尾(アフィリエイト表記など) */
.article-footer{
  margin-top:2em;
  padding-top:1em;
  border-top:1px dashed var(--shk-border);
  color:var(--shk-text-sub);
  font-size:.85em;
}

/* トップページの記事カード */
.entry-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(33,41,74,.07);
  border:none !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.entry-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(33,41,74,.14);
}
.entry-card-title{ font-weight:700; color:var(--shk-text); }
.entry-card-thumb img{ transition:transform .3s ease; }
.entry-card:hover .entry-card-thumb img{ transform:scale(1.05); }

/* サイドバー */
#sidebar .widget{
  background:#fff;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(33,41,74,.06);
  border:none !important;
  padding:1.4em;
}

/* フッター */
#footer.footer{
  background:var(--shk-navy);
  color:#dfe3f0;
}
#footer.footer a{ color:#dfe3f0; }

/* スマホ幅対応 */
@media (max-width:600px){
  .entry-content table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  .entry-content h2{ font-size:1.2em; padding:.5em .7em; }
}
.header,
.article-header{
  background:linear-gradient(160deg,#0c1330 0%,#171f4a 55%,#0a0f26 100%) !important;
}
.header::before,.header::after,
.article-header::before,.article-header::after{
  border-radius:0 !important;
  filter:none !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 62%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 44% 12%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 58% 44%, #cfe0ff, transparent),
    radial-gradient(1.6px 1.6px at 72% 78%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 84% 22%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 92% 58%, #cfe0ff, transparent),
    radial-gradient(1.3px 1.3px at 6% 84%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 36% 88%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 66% 8%, #fff, transparent) !important;
  background-size:220px 220px !important;
  animation:shkTwinkleA 4.5s ease-in-out infinite !important;
}
.header::after,
.article-header::after{
  background-position:60px 40px !important;
  animation:shkTwinkleB 6s ease-in-out infinite !important;
  opacity:.7 !important;
}
@keyframes shkTwinkleA{0%,100%{opacity:.9;}50%{opacity:.35;}}
@keyframes shkTwinkleB{0%,100%{opacity:.4;}50%{opacity:1;}}

.header{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 2px 14px rgba(10,15,38,.35) !important;
}
.site-name, .site-name a{
  color:#eef1ff !important;
}
.article-header .entry-title{
  color:#eef1ff !important;
}
@media (prefers-reduced-motion: reduce){
  .header::before,.header::after,.article-header::before,.article-header::after{ animation:none !important; }
}
.header::before,.header::after,
.article-header::before,.article-header::after{
  background-color: transparent !important;
}
#navi{
  background:#fff;
  border-bottom:1px solid var(--shk-border);
}
#navi .menu-pc{
  justify-content:center;
  gap:1.6em;
}
#navi .menu-pc > li > a{
  color:var(--shk-navy);
  font-weight:700;
  padding:.9em .1em .8em;
  position:relative;
}
#menu-item-97 > a::before{ content:"🦷 "; font-size:1.05em; }
#menu-item-98 > a::before{ content:"💅 "; font-size:1.05em; }
#menu-item-99 > a::before{ content:"🏠 "; font-size:1.05em; }
#menu-item-100 > a::before{ content:"🐾 "; font-size:1.05em; }
#navi .menu-pc > li > a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.5em;
  height:3px;
  background:var(--shk-cta);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
#navi .menu-pc > li > a:hover{
  color:var(--shk-cta);
}
#navi .menu-pc > li > a:hover::after{
  transform:scaleX(1);
}
#navi .menu-pc > li{
  flex:0 0 auto;
  width:auto;
}

/* ============================================================
   追加演出A: 流れ星(ヘッダー・記事タイトル)
   ============================================================ */
.header .site-name::before,
.article-header .entry-title::before{
  content:"";
  position:absolute;
  top:10%;
  left:-15%;
  width:70px;
  height:2px;
  background:linear-gradient(90deg, transparent, #fff 60%, #fff);
  border-radius:2px;
  transform:rotate(18deg);
  filter:drop-shadow(0 0 4px #fff);
  opacity:0;
  z-index:0;
  pointer-events:none;
  animation:shkShootingStar 8s cubic-bezier(.3,0,.2,1) infinite;
}
.article-header .entry-title::before{
  animation-delay:3.5s;
}
@keyframes shkShootingStar{
  0%{ transform:translate(0,0) rotate(18deg); opacity:0; }
  4%{ opacity:1; }
  20%{ transform:translate(60vw,50px) rotate(18deg); opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .header .site-name::before,
  .article-header .entry-title::before{ animation:none !important; opacity:0 !important; }
}

/* ============================================================
   追加演出C: くらしの灯り(ヘッダー下・記事カード)
   ============================================================ */
.header,
.article-header{
  box-shadow:0 2px 14px rgba(10,15,38,.35), 0 48px 70px -20px rgba(255,178,110,.5) !important;
}
.entry-card-thumb{ position:relative; }
.entry-card:hover{
  box-shadow:0 12px 28px rgba(33,41,74,.14), 0 16px 32px -12px rgba(255,178,110,.5);
}

/* ============================================================
   ②比較完了スタンプ(記事末尾)
   ============================================================ */
.article-footer::before{
  content:"比較完了";
  display:inline-block;
  font-family:'Noto Sans JP',sans-serif;
  font-weight:900;
  font-size:1.1em;
  color:var(--shk-cta);
  border:3px solid var(--shk-cta);
  border-radius:10px;
  padding:.15em .6em;
  transform:rotate(-6deg);
  margin-bottom:.8em;
  letter-spacing:.05em;
}

/* ============================================================
   ③星屑スクロールバー(ページ全体)
   ============================================================ */
html{
  scrollbar-color: var(--shk-cta) var(--shk-navy);
}
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--shk-navy); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--shk-cta), var(--shk-cta2));
  border-radius:8px;
  border:2px solid var(--shk-navy);
}

/* ============================================================
   ④比較表の天秤ホバー
   ============================================================ */
.entry-content table tr:hover td:first-child::after{
  content:"⚖️";
  display:inline-block;
  margin-left:.4em;
  animation:shkScaleTilt 1.6s ease-in-out infinite;
}
@keyframes shkScaleTilt{
  0%,100%{ transform:rotate(-6deg); }
  50%{ transform:rotate(6deg); }
}/* ============================================================
   ⑤カテゴリーラベルをアイキャッチ画像内バッジと重ならないよう右上に移動
   ============================================================ */
.cat-label{
  left:auto !important;
  right:.3em !important;
}