/* =====================================================================
   Lunelle Blog Module – スタイル一式
   注意：Lunelleコア（style.css）の --l-* デザイントークンをそのまま継承する。
   ===================================================================== */

/* ---------- ニュースティッカー ---------- */
.l-ticker{
  background:var(--l-surface);border-bottom:1px solid var(--l-line);
  overflow:hidden;white-space:nowrap;font-size:13px;
}
.l-ticker-track{display:inline-block;padding:8px 0;animation:l-ticker-scroll 24s linear infinite;}
.l-ticker-track span{margin:0 28px;}
@keyframes l-ticker-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
html.l-no-anim .l-ticker-track{animation:none;}
@media (prefers-reduced-motion: reduce){.l-ticker-track{animation:none;}}

/* ---------- スクロール進捗バー ---------- */
.l-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:transparent;}
.l-scroll-progress-bar{height:100%;width:0;background:var(--l-accent-gradient);transition:width .1s linear;}

/* ---------- 目次 ---------- */
.l-toc{padding:22px 24px;margin:0 0 2em;}
.l-toc-title{
  width:100%;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--l-text);
  display:flex;align-items:center;justify-content:space-between;padding:0;margin-bottom:10px;font-weight:700;font-size:15px;
}
.l-toc-title[disabled]{cursor:default;}
.l-toc-arrow{transition:transform .2s ease;}
.l-toc.is-collapsed #lunelle-toc-list{display:none;}
.l-toc.is-collapsed .l-toc-arrow{transform:rotate(-90deg);}
.l-toc ol{margin:0;padding-left:1.2em;font-size:14px;}
.l-toc ol ol{margin-top:6px;font-size:13.5px;}
.l-toc li{margin-bottom:6px;}
.l-toc a.is-active{color:var(--l-accent-solid);font-weight:700;}

/* ---------- 読了時間 ---------- */
.l-reading-time{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--l-text-sub);
  background:var(--l-surface);border-radius:var(--l-radius-pill);padding:4px 14px;margin-bottom:16px;
}

/* ---------- タグ一覧 ---------- */
.l-tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;}
.l-tag-list a{
  background:var(--l-surface);border:1px solid var(--l-line);border-radius:var(--l-radius-pill);
  padding:6px 14px;font-size:12.5px;color:var(--l-text-sub);
}
.l-tag-list a:hover{color:var(--l-accent-solid);opacity:1;}

/* ---------- 人気記事・人気タグ（サイドバー） ---------- */
.l-popular-list{list-style:none;margin:0;padding:0;}
.l-popular-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--l-line);font-size:13.5px;}
.l-popular-list li:last-child{border-bottom:none;}
.l-rank{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--l-accent-gradient);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
}

/* ---------- CTA（記事下） ---------- */
.l-cta-box{padding:32px;text-align:center;margin:2.4em 0;}
.l-cta-box h3{margin-bottom:10px;}
.l-cta-box p{color:var(--l-text-sub);margin-bottom:18px;}

/* ---------- 追従CTAバナー ---------- */
.l-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:400;display:flex;align-items:center;justify-content:center;
  gap:18px;padding:14px 20px;box-shadow:var(--l-shadow-md);transform:translateY(110%);transition:transform .3s ease;
}
.l-sticky-cta.is-visible{transform:translateY(0);}
.l-sticky-cta p{margin:0;font-size:14px;font-weight:600;}
.l-sticky-cta-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;
  font-size:20px;cursor:pointer;color:var(--l-text-sub);width:36px;height:36px;
}

/* ---------- 広告スロット ---------- */
.l-ad-slot{margin:28px auto;text-align:center;overflow-x:auto;max-width:100%;}
.l-ad-header,.l-ad-footer{padding:10px 0;}

/* ---------- ボックス（注意/ポイント/成功/メモ） ---------- */
.l-box{border-radius:var(--l-radius-md);padding:20px 22px;margin:1.8em 0;border:1px solid var(--l-line);}
.l-box-label{font-weight:800;font-size:13.5px;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.l-box p:last-child,.l-box-content p:last-child{margin-bottom:0;}
.l-box-warn{background:#FBF1EC;border-color:#EBC9B3;} .l-box-warn .l-box-label{color:#B5532E;}
.l-box-point{background:#EEF1FE;border-color:#C9D2FB;} .l-box-point .l-box-label{color:#6366F1;}
.l-box-success{background:#EBF6EF;border-color:#BFE0CB;} .l-box-success .l-box-label{color:#2E7D4F;}
.l-box-memo{background:var(--l-surface);border-color:var(--l-line);} .l-box-memo .l-box-label{color:var(--l-text-sub);}
html.l-dark .l-box-warn{background:#2A2018;}
html.l-dark .l-box-point{background:#1C1F2E;}
html.l-dark .l-box-success{background:#16241C;}
.l-box-title-input{border:none;background:transparent;font-weight:800;font-size:13.5px;margin-bottom:6px;width:100%;padding:0;color:inherit;}

/* ---------- 吹き出し ---------- */
.l-balloon{display:flex;gap:14px;align-items:flex-start;margin:1.6em 0;}
.l-balloon img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.l-balloon-bubble{background:var(--l-surface);border-radius:var(--l-radius-md);padding:14px 18px;position:relative;}
.l-balloon.left .l-balloon-bubble::before{content:"";position:absolute;left:-8px;top:16px;border:8px solid transparent;border-right-color:var(--l-surface);}
.l-balloon.right{flex-direction:row-reverse;}
.l-balloon.right .l-balloon-bubble::before{content:"";position:absolute;right:-8px;top:16px;border:8px solid transparent;border-left-color:var(--l-surface);}

/* ---------- タイムライン ---------- */
.l-timeline{list-style:none;margin:1.8em 0;padding:0;counter-reset:l-step;}
.l-timeline li{position:relative;padding:4px 0 20px 40px;border-left:2px solid var(--l-line);margin-left:14px;}
.l-timeline li:last-child{border-left-color:transparent;padding-bottom:0;}
.l-timeline li::before{
  counter-increment:l-step;content:counter(l-step);position:absolute;left:-15px;top:0;
  width:28px;height:28px;border-radius:50%;background:var(--l-accent-gradient);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.l-timeline strong{display:block;margin-bottom:4px;}

/* ---------- 比較表 ---------- */
.l-compare-wrap table{margin:0;}
.l-compare-wrap{margin:1.8em 0;}

/* ---------- FAQ ---------- */
.l-faq-item{margin:1.4em 0;border:1px solid var(--l-line);border-radius:var(--l-radius-md);overflow:hidden;}
.l-faq-q,.l-faq-a{padding:16px 20px;display:flex;gap:12px;}
.l-faq-q{background:var(--l-surface);font-weight:700;}
.l-faq-q::before{content:"Q";color:var(--l-accent-solid);font-weight:900;}
.l-faq-a::before{content:"A";color:var(--l-text-sub);font-weight:900;}

/* ---------- ランキング ---------- */
.l-ranking-item{position:relative;padding:24px;margin:1.8em 0;display:flex;gap:20px;align-items:flex-start;}
.l-ranking-num{
  position:absolute;top:-12px;left:18px;background:var(--l-accent-gradient);color:#fff;
  font-size:13px;font-weight:800;padding:4px 14px;border-radius:var(--l-radius-pill);
}
.l-ranking-image{width:120px;flex-shrink:0;border-radius:var(--l-radius-sm);overflow:hidden;background:var(--l-surface-2);}
.l-ranking-image img{width:100%;height:100%;object-fit:cover;}
.l-ranking-body{flex:1;min-width:0;}
.l-ranking-body h4{font-size:16px;margin-bottom:6px;}
.l-ranking-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.l-affiliate-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;
  border-radius:var(--l-radius-sm);font-size:13px;font-weight:700;color:#fff;
}
.l-affiliate-btn:hover{opacity:.88;color:#fff;}
.l-affiliate-amazon{background:#FF9900;}
.l-affiliate-rakuten{background:#BF0000;}
.l-affiliate-yahoo{background:#FF0033;}

/* ---------- ライブ検索 ---------- */
.l-live-search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--l-bg);border:1px solid var(--l-line);
  border-radius:var(--l-radius-md);box-shadow:var(--l-shadow-md);max-height:360px;overflow-y:auto;z-index:500;display:none;
}
.l-live-search-results.is-open{display:block;}
.l-live-search-results a{
  display:flex;gap:10px;align-items:center;padding:10px 14px;font-size:13.5px;color:var(--l-text);border-bottom:1px solid var(--l-line);
}
.l-live-search-results a:last-child{border-bottom:none;}
.l-live-search-results a:hover{background:var(--l-surface);opacity:1;}
.l-live-search-results img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--l-surface-2);}
.l-live-search-empty{padding:14px;font-size:13px;color:var(--l-text-sub);}
.search-form{position:relative;}

/* ---------- コピー防止 ---------- */
html.l-copy-protected .l-entry-content,
html.l-copy-protected.l-copy-protection-forced .l-entry-content{
  -webkit-user-select:none;user-select:none;
}
html.l-copy-protected.l-copy-protection-disabled .l-entry-content{
  -webkit-user-select:auto;user-select:auto;
}

/* ---------- Ajaxページ遷移用：ローディングバー ---------- */
.l-ajax-nav-bar{
  position:fixed;top:0;left:0;height:3px;width:0;background:var(--l-accent-gradient);z-index:600;
  transition:width .2s ease, opacity .2s ease;opacity:0;
}
.l-ajax-nav-bar.is-loading{opacity:1;}

/* =====================================================================
   レスポンシブ：スマホ〜4Kまで
   ===================================================================== */
@media (max-width:1024px){
  .l-ranking-item{flex-direction:column;}
  .l-ranking-image{width:100%;aspect-ratio:16/9;}
}
@media (max-width:768px){
  .l-sticky-cta{flex-direction:column;gap:8px;padding:16px;text-align:center;}
  .l-cta-box{padding:24px;}
}
@media (max-width:414px){
  .l-box{padding:16px 18px;}
  .l-toc{padding:18px;}
  .l-ranking-buttons{flex-direction:column;}
  .l-affiliate-btn{width:100%;}
}
/* ノートPC・デスクトップ：余白を少し広めに */
@media (min-width:1440px){
  .l-grid{gap:28px;}
}
/* 4Kモニター等の超大画面：コンテンツ幅は customizer 設定値で頭打ちにしているため、
   余白が間延びしないよう外側パディングのみ少し拡張する */
@media (min-width:2200px){
  .l-container,.l-article,.l-layout{padding-left:48px;padding-right:48px;}
}

/* ---------- SNSシェアボタン ---------- */
.l-share-bar{display:flex;gap:10px;margin:28px 0;flex-wrap:wrap;}
.l-share-bar a{
  display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:var(--l-radius-pill);
  font-size:13px;font-weight:700;background:var(--l-surface);border:1px solid var(--l-line);color:var(--l-text);min-height:44px;
}
.l-share-bar a:hover{background:var(--l-accent-gradient);color:#fff;opacity:1;}

/* ---------- 記事評価 ---------- */
.l-rating{padding:24px;text-align:center;margin:2em 0;}
.l-rating-summary{margin-bottom:14px;font-size:14px;}
.l-rating-stars{display:flex;justify-content:center;gap:6px;}
.l-rating-star{
  background:none;border:none;font-size:28px;color:var(--l-line);cursor:pointer;line-height:1;
  transition:color .15s ease, transform .15s ease;
}
.l-rating-star:hover,.l-rating-star.is-active{color:#F5A623;transform:scale(1.1);}
.l-rating[data-voted="1"] .l-rating-star{cursor:default;pointer-events:none;}
.l-rating-thanks{color:var(--l-accent-solid);font-weight:700;margin-top:10px;}

/* ---------- AI検索：FAQ一致表示 ---------- */
.l-search-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 40px;}
.l-search-faq .l-faq-item{display:block;}
@media (max-width:768px){.l-search-faq{grid-template-columns:1fr;}}

/* ---------- トップページ：最新記事エリア（大きめのアイキャッチ＋抜粋） ---------- */
.l-latest-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:24px;}
.l-latest-card{display:flex;flex-direction:column;overflow:hidden;}
.l-latest-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--l-surface-2);border-radius:var(--l-radius-lg) var(--l-radius-lg) 0 0;}
.l-latest-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.l-latest-card:hover .l-latest-thumb img{transform:scale(1.04);}
.l-latest-body{padding:22px 24px 26px;}
.l-latest-body h3{font-size:20px;margin-bottom:10px;}
.l-latest-body h3 a{color:var(--l-text);}
.l-latest-excerpt{color:var(--l-text-sub);font-size:14.5px;margin:10px 0 0;}

/* 最新記事が1件のみの場合：横並びの大きなレイアウト（PC/タブレット）にする */
.l-latest-grid:has(> .l-latest-card:only-child) .l-latest-card{
  flex-direction:row;align-items:stretch;
}
.l-latest-grid:has(> .l-latest-card:only-child) .l-latest-thumb{
  width:46%;flex-shrink:0;border-radius:var(--l-radius-lg) 0 0 var(--l-radius-lg);aspect-ratio:auto;
}
.l-latest-grid:has(> .l-latest-card:only-child) .l-latest-body{
  display:flex;flex-direction:column;justify-content:center;
}
@media (max-width:768px){
  .l-latest-grid:has(> .l-latest-card:only-child) .l-latest-card{flex-direction:column;}
  .l-latest-grid:has(> .l-latest-card:only-child) .l-latest-thumb{width:100%;border-radius:var(--l-radius-lg) var(--l-radius-lg) 0 0;aspect-ratio:16/9;}
}

/* セクションの背景を交互に切り替え、視覚的な区切りを作る（Apple風の余白を意識） */
.l-section-alt{background:var(--l-surface);}