@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ - BLピックス カスタマイズ
    Version: 1.0.2
    Author: LOOS WEB STUDIO
*/

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

/* ============================================================
   BLピックス ブランドカラー
   ============================================================ */
:root {
  --color_main: #6B46C1;
  --color_main_thin: #EFE9FB;
  --color_text: #2D2D2D;
  --color_text_thin: #5A5A5A;
  --color_bg: #FAFAF7;
  --color_link: #6B46C1;
  --color_link_hover: #7C3AED;
  --swl-color-main--rgb: 107, 70, 193;
  --swl-clr-main_thin: #EFE9FB;
  --color_accent: #D4A574;
  --swl-color-accent--rgb: 212, 165, 116;
}
body, .l-header, .p-globalNav, .l-footer, .l-content, .l-container {
  --color_main: #6B46C1;
  --color_link: #6B46C1;
  --color_accent: #D4A574;
}
body { background-color: #FAFAF7; }

/* ============================================================
   タイポグラフィ
   ============================================================ */
body, input, button, select, textarea {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
h1, h2, h3, h4, h5, h6,
.post_title,
.l-header__logo,
.p-articleThumb__title,
.swell-block-fullWide__title,
.c-pageTitle__title,
.p-postList__title {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.02em;
}

/* ============================================================
   見出し装飾 - 可読性確保(背景+文字色を必ずペアで指定)
   ============================================================ */
.post_content h2,
.entry-content h2,
.wp-block-heading {
  color: #2D2D2D !important;
  border-left: 5px solid #D4A574 !important;
  border-bottom: 1px solid #EFE9FB;
  background-color: #FFF9F0;
  padding: 12px 16px !important;
  margin-top: 48px;
  margin-bottom: 24px;
  font-size: 22px;
  border-radius: 0 6px 6px 0;
}
.post_content h3,
.entry-content h3 {
  color: #2D2D2D !important;
  border-bottom: 2px solid #D4A574 !important;
  padding: 8px 0 8px 12px;
  border-left: 4px solid #6B46C1 !important;
}

/* ============================================================
   CTA・ボタン - ブランドカラー徹底
   ============================================================ */
.swell-block-button.is-style-btn_solid a,
.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  background-color: #6B46C1 !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 6px;
  padding: 14px 28px !important;
  font-weight: 700;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s;
}
.swell-block-button.is-style-btn_solid a:hover,
.wp-block-button__link:hover {
  background-color: #7C3AED !important;
}
/* SWELL の "黒背景指定" を強制的に紫に上書き */
.wp-block-button__link.has-black-background-color { background-color: #6B46C1 !important; }

/* ============================================================
   リンクスタイル
   ============================================================ */
a { color: #6B46C1; }
a:hover { color: #7C3AED; }
.post_content a { text-decoration: underline; }
/* ボタン内リンクは下線なし(visual fix) */
.wp-block-button__link, .swell-block-button a { text-decoration: none !important; }

/* ============================================================
   トップページのカテゴリカード ホバー演出
   ============================================================ */
.blpicks-cat-grid a:hover {
  border-color: #6B46C1 !important;
  background-color: #FAFAF7 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(107, 70, 193, .15);
}

/* ============================================================
   アクセシビリティ - フォーカス表示(WCAG 2.2)
   ============================================================ */
*:focus-visible {
  outline: 3px solid #6B46C1;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   タップターゲット 44px 以上保証 (WCAG 2.2)
   ============================================================ */
.p-globalNav__item > a,
.menu-item > a,
button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   メインビジュアル非表示(Day 0 記事ゼロ時の暫定対応)
   ============================================================ */
.l-mainVisual, .p-mainVisual { display: none !important; }
.l-content { padding-top: 24px; }

/* ============================================================
   関連カード(本文内・shared/14§5-A 4点セット)テンプレ
   articleカード = <a class="blpicks-product-card">で記事から再利用
   ============================================================ */
.blpicks-product-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid #EFE9FB;
  border-radius: 8px;
  padding: 16px;
  margin: 24px 0;
  text-decoration: none !important;
  color: #2D2D2D;
  transition: all .2s;
}
.blpicks-product-card:hover {
  border-color: #6B46C1;
  box-shadow: 0 4px 16px rgba(107, 70, 193, .15);
}
.blpicks-product-card__img {
  flex: 0 0 96px;
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 4px;
}
.blpicks-product-card__body { flex: 1; min-width: 0; }
.blpicks-product-card__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 4px;
}
.blpicks-product-card__meta {
  font-size: 13px;
  color: #5A5A5A;
  margin: 0 0 8px;
}
.blpicks-product-card__comment {
  font-size: 13px;
  line-height: 1.6;
  color: #2D2D2D;
  margin: 0 0 8px;
}
.blpicks-product-card__cta {
  display: inline-block;
  background: #6B46C1;
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  min-height: 44px;
  line-height: 28px;
}

/* スマホでは横スワイプカード化 */
@media (max-width: 600px) {
  .blpicks-product-card { gap: 12px; padding: 12px; }
  .blpicks-product-card__img { flex: 0 0 72px; width: 72px; height: 96px; }
}

/* ============================================================
   FAQ アコーディオン(<details>タグ・shared/14§7-A)
   ============================================================ */
.blpicks-faq details {
  border-bottom: 1px solid #EFE9FB;
  padding: 16px 0;
}
.blpicks-faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 0;
  font-family: "Noto Serif JP", serif;
  color: #2D2D2D;
  list-style: none;
}
.blpicks-faq summary::before {
  content: "Q. ";
  color: #6B46C1;
  font-weight: 700;
  margin-right: 4px;
}
.blpicks-faq details[open] summary { color: #6B46C1; }
.blpicks-faq details p { padding: 8px 0 0 24px; line-height: 1.7; }
.blpicks-faq details p::before { content: "A. "; color: #D4A574; font-weight: 700; margin-right: 4px; }

/* ============================================================
   PR表記ボックス(shared/14§8-D)
   ============================================================ */
.blpicks-pr-label {
  background: #fffbe6;
  border-left: 4px solid #f5a623;
  padding: 10px 14px;
  margin: 0 0 24px;
  font-size: 13px;
  border-radius: 0 4px 4px 0;
}

/* ============================================================
   スマホ表示時の調整
   ============================================================ */
@media (max-width: 768px) {
  .blpicks-hero {
    padding: 32px 16px !important;
  }
  .blpicks-hero h2 { font-size: 24px !important; }
  .blpicks-badges {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
  }
  .blpicks-cat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================

/* ============================================================
   ヘッダーロゴ画像置換 (v1.0.4 強化版)
   ============================================================ */
.c-headLogo.-txt .c-headLogo__link {
  display: block !important;
  width: 200px;
  height: 50px;
  background: url('/wp-content/uploads/2026/05/logo-wide-2x.png') no-repeat left center / contain;
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  line-height: 0 !important;
  overflow: hidden;
}
.c-headLogo.-txt .c-headLogo__link * { display: none !important; }

@media (max-width: 480px) {
  .c-headLogo.-txt .c-headLogo__link {
    width: 170px;
    height: 42px;
  }
}

/* ============================================================
   ヘッダーロゴ画像置換 v1.0.5 (高specificity・子要素全消し)
   ============================================================ */
.l-header__logo .c-headLogo.-txt,
.l-fixHeader__logo .c-headLogo.-txt {
  display: block !important;
  width: 220px !important;
  height: 50px !important;
  margin: 0 !important;
  background: url("/wp-content/uploads/2026/05/logo-wide-2x.png") no-repeat left center / contain !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.l-header__logo .c-headLogo.-txt .c-headLogo__link,
.l-fixHeader__logo .c-headLogo.-txt .c-headLogo__link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
@media (max-width: 480px) {
  .l-header__logo .c-headLogo.-txt {
    width: 180px !important;
    height: 42px !important;
  }
}

/* ============================================================
   トップページの SWELL 自動投稿リストを非表示
   (固定ページ表示時の上部投稿リスト・post_content の前に出る)
   ============================================================ */
.home .l-mainContent__inner > .p-postList,
.home #main_content .l-mainContent__inner > .p-postList,
.home #main_content .l-mainContent__inner > section.p-postList,
.home .l-mainContent__inner > .swiper,
body.home main#main_content > .l-mainContent__inner > div:not(.post_content):not(.c-pageTitle):not(.l-mainContent__inner) {
  display: none !important;
}

/* ============================================================
   SWELL トップページの自動要素を非表示 (Day 0 記事少時の対応)
   - p-mainVisual: デフォルトの鳥写真ヒーロー (picsum.photos)
   - p-postSlider: トップ自動投稿スライダー
   ============================================================ */
.home #main_visual,
.home .p-mainVisual,
.home #post_slider,
.home .p-postSlider,
body.home #main_visual,
body.home #post_slider {
  display: none !important;
}

/* ============================================================ */
/* 2026-05-27 アイキャッチ巨大表示問題の緊急修正                */
/* shared/13 §3-1 ファーストビュー設計 / shared/14 §1 FV       */
/* 楽天/DLsite の表紙サムネ(141x200等)が引き伸ばされ画面占有を防ぐ */
/* ============================================================ */

/* 投稿本文先頭のアイキャッチ */
.post_content .eyecatch img,
.post_content > p:first-of-type > img,
.l-mainContent .eyecatch img,
.p-postList__figure img,
.wp-post-image,
article .eyecatch img {
  max-height: 480px !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

/* WordPress 投稿ヘッダー上のアイキャッチ画像 */
.l-mainContent .p-articleThumb img,
.c-postThumb__figure img {
  max-height: 420px !important;
  object-fit: cover;
  width: 100%;
}

/* 本文中の単独画像(figure 単体) */
.post_content figure:not(.wp-block-gallery):not(.wp-block-image.size-large):not(.wp-block-image.size-full) img,
.post_content .wp-block-image img {
  max-height: 520px;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* スマホ(375px幅基準) */
@media (max-width: 600px) {
  .post_content .eyecatch img,
  .post_content > p:first-of-type > img,
  .wp-post-image,
  .l-mainContent .p-articleThumb img,
  .c-postThumb__figure img {
    max-height: 280px !important;
  }
}

/* 2026-06-07 hero/eyecatch 高さ上限 横展開 (UI洗練) 縦長カバー原寸表示による離脱防止 */
figure.p-articleThumb { text-align:center; }
figure.p-articleThumb img, .p-articleThumb__img { max-height: clamp(300px,56vh,500px) !important; width:auto !important; height:auto !important; max-width:100%; margin-inline:auto; display:block; object-fit:contain; }
.dbn-hero-link { display:block; text-align:center; }
.dbn-hero-link img { max-height: clamp(300px,56vh,500px); width:auto; height:auto; max-width:100%; margin-inline:auto; display:block; }

/* 2026-06-07 (A) 主作品 楽天Books 主CTAボタン */
.mr-maincta { text-align:center; margin:2em 0; }
.mr-maincta__btn { display:inline-block; background:#6B46C1; color:#fff !important; -webkit-text-fill-color:#fff; font-weight:700; font-size:1.05em; line-height:1.4; padding:.9em 1.5em; border-radius:8px; text-decoration:none; box-shadow:0 3px 0 #4c318f; max-width:94%; }
.mr-maincta__btn:hover { transform:translateY(1px); box-shadow:0 2px 0 #4c318f; opacity:.95; }
.mr-maincta__note { display:block; font-size:.75em; color:#888; margin-top:.5em; }