/*
Theme Name: こいスピ Child
Template: cocoon-master
Version: 1.1.0
Description: Cocoon子テーマ（こいスピ専用）— 占い×恋愛の上品デザイン
Author: nico create
*/

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

:root{
  --ks-pink:#e8608a; --ks-pink-d:#d24a76; --ks-lav:#8a6fb0; --ks-lav-d:#6f5599;
  --ks-cream:#fffaf7; --ks-soft:#fdf3f7; --ks-line:#f0e6ec;
  --ks-ink:#3a3340; --ks-sub:#7d7486; --ks-gold:#c8a24a;
}

/* ===== 全体 ===== */
body{ background:var(--ks-cream); color:var(--ks-ink);
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; }
.content, #main, #content{ background:transparent; }
a{ color:var(--ks-pink-d); }
a:hover{ color:var(--ks-pink); }

/* ===== ヘッダー ===== */
#header, .header-container-in{ background:#fff; }
#header{ border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--ks-pink),var(--ks-lav)) 1; }
.site-name-text, #site-title a, .site-name a{
  font-family:"Noto Serif JP",serif !important; font-weight:700; letter-spacing:.1em;
  color:var(--ks-lav-d) !important; }
.tagline, .site-description{ color:var(--ks-sub) !important; letter-spacing:.18em; font-size:12px; }

/* ===== グローバルナビ ===== */
#navi, .navi{ background:#fff; border-top:1px solid var(--ks-line);
  box-shadow:0 2px 10px rgba(138,111,176,.06); }
.navi-in>ul>li>a{ font-weight:700; color:var(--ks-ink); }
.navi-in>ul>li>a:hover{ background:var(--ks-soft); color:var(--ks-pink-d); }

/* ===== 本文見出し ===== */
.article h2{ font-family:"Noto Serif JP",serif; color:var(--ks-ink);
  background:linear-gradient(transparent 62%, #fbe3ec 62%);
  border:none; border-left:6px solid var(--ks-pink);
  padding:.45em .8em; border-radius:0 8px 8px 0; }
.article h3{ font-family:"Noto Serif JP",serif; color:var(--ks-lav-d);
  border-bottom:2px dotted var(--ks-lav); padding-bottom:.25em; }

/* ===== 記事カード（一覧） ===== */
.entry-card, .card-large-image .entry-card{ border:1px solid var(--ks-line);
  border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 4px 14px rgba(138,111,176,.09); transition:transform .2s, box-shadow .2s; }
.entry-card:hover{ transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(226,74,118,.16); }
.entry-card-title, .card-title{ font-family:"Noto Serif JP",serif; font-weight:600; }
.cat-label{ background:var(--ks-pink); font-weight:700; letter-spacing:.03em; }

/* ===== サイドバー ===== */
.sidebar h3, .widget-title, .widget h3{ background:#fff !important; color:var(--ks-ink) !important;
  border:none !important; border-left:5px solid var(--ks-lav) !important;
  padding:.45em .8em !important; font-family:"Noto Serif JP",serif;
  box-shadow:0 2px 8px rgba(138,111,176,.07); border-radius:0 8px 8px 0; }

/* ===== ボタン・検索 ===== */
.wp-block-button__link, .btn{ background:var(--ks-pink); border-radius:30px; border:none; }
.btn:hover, .wp-block-button__link:hover{ background:var(--ks-pink-d); }
.search-submit{ background:var(--ks-lav-d) !important; border:none; }

/* ===== 目次（Cocoon） ===== */
.toc{ border:1px solid var(--ks-line) !important; border-radius:12px;
  background:var(--ks-soft) !important; }
.toc-title{ color:var(--ks-lav-d); font-family:"Noto Serif JP",serif; }

/* ===== フッター ===== */
.footer, #footer{ background:var(--ks-lav-d); }
.footer, .footer a, .navi-footer-in ul li a, .copyright{ color:#f3eef8 !important; }
.navi-footer-in ul li a:hover{ color:#fff !important; text-decoration:underline; }

/* ===== カテゴリ別アクセント（アーカイブ） ===== */
body.category-renai .article h2{ border-left-color:#e5497f; }
body.category-spiritual .article h2{ border-left-color:var(--ks-lav); }
body.category-erabikata .article h2{ border-left-color:var(--ks-gold); }

/* ===== こいスピ CTA/バナー 共通CSS（記事用パーツ・CTA_CSSパーツ_こいスピ.md準拠） ===== */
:root{
  --ks-lav-l:#f3eef8; --ks-mint:#20b2aa;
  --ks-coral:#ff6b5b; --ks-purple:#4a3a6b; --ks-magenta:#e5497f; --ks-blue:#2f6fd6;
}
.ks-cta{background:var(--ks-soft);border:1px solid var(--ks-line);border-radius:14px;padding:18px;margin:26px 0}
.ks-cta .ks-pr{font-size:10px;color:#bbaacc;border:1px solid #e6dced;border-radius:3px;padding:0 5px;display:inline-block;margin-bottom:9px}
.ks-cta .ks-lead{font-size:14.5px;font-weight:700;margin:0 0 12px}
.ks-cta .ks-note{font-size:11px;color:#a99;text-align:center;margin-top:8px}
.ks-card{background:#fff;border:1px solid var(--ks-line);border-radius:11px;padding:13px 14px;margin-bottom:11px}
.ks-card .ks-t{font-weight:800;font-size:14px;margin:0 0 3px}
.ks-card .ks-d{font-size:12.5px;color:var(--ks-sub);margin:0 0 10px}
.ks-btn{display:block;text-align:center;text-decoration:none;font-weight:800;padding:14px;border-radius:11px;font-size:16px;color:#fff !important}
.ks-btn:hover{filter:brightness(1.05)}
.ks-btn.main{background:linear-gradient(120deg,#ff7aa2,var(--ks-pink-d));box-shadow:0 6px 16px rgba(226,74,118,.28)}
.ks-btn.sub{background:linear-gradient(120deg,#b79adf,#8a6fb0);box-shadow:0 6px 16px rgba(138,111,176,.25)}
.ks-btn.entry{background:linear-gradient(120deg,#7ecfca,#20b2aa);box-shadow:0 6px 16px rgba(32,178,170,.22)}
.ks-btn + .ks-btn{margin-top:9px}
.ks-banner{padding:18px;color:#fff;border-radius:14px 14px 0 0;position:relative;overflow:hidden}
.ks-banner::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:rgba(255,255,255,.13);border-radius:50%}
.ks-banner .ks-badge{font-size:11px;font-weight:700;background:rgba(255,255,255,.22);display:inline-block;padding:2px 9px;border-radius:20px;margin-bottom:7px}
.ks-banner .ks-name{font-size:20px;font-weight:800}
.ks-banner .ks-catch{font-size:13px;opacity:.95;margin-top:3px}
.ks-banner .ks-offer{margin-top:10px;font-size:15px;font-weight:800;background:#fff;color:var(--ks-ink);display:inline-block;padding:4px 12px;border-radius:8px}
.ks-svc{border:1px solid var(--ks-line);border-radius:14px;overflow:hidden;margin:20px 0}
.ks-svc .ks-body{padding:15px 17px}
.ks-bn-coconala{background:linear-gradient(120deg,#ff8a5b,#ff6b5b)}
.ks-bn-vernis{background:linear-gradient(120deg,#7a5ea8,#4a3a6b)}
.ks-bn-purely{background:linear-gradient(120deg,#f07ba6,#e5497f)}
.ks-bn-will{background:linear-gradient(120deg,#4aa8e0,#2f6fd6)}
.ks-bn-sela{background:linear-gradient(120deg,#c96bb4,#8e3f8e)}
.ks-bn-brillante{background:linear-gradient(120deg,#38d0c4,#159c94)}
.ks-bn-raysee{background:linear-gradient(120deg,#9a7ce8,#6a4cc4)}
.ks-callout{background:linear-gradient(135deg,#fff6ef,#fdeef5);border:1px dashed var(--ks-pink);border-radius:12px;padding:16px 18px;margin:20px 0}
.ks-callout .ks-ct{font-weight:800;color:var(--ks-pink-d);font-size:15px;margin:0 0 6px}
.ks-voice{background:#fff;border:1px solid var(--ks-line);border-left:4px solid var(--ks-lav);border-radius:8px;padding:12px 14px;margin:10px 0;font-size:13.5px}

/* ===================================================================
   スマホ最適化（2026-07-29 nicoみろん）
   方針: 本文は絶対に横スクロールさせない。幅の広い比較表だけを
   「その表の中」で横スクロールさせる。指で読める文字サイズを確保。
   =================================================================== */
@media screen and (max-width: 834px) {

  /* --- 比較表: 表の中だけ横スクロール --- */
  .entry-content figure.wp-block-table,
  .entry-content .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
    /* 右端に「まだ続きがある」影を出してスクロール可能だと気づかせる */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(90,60,110,.16), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(90,60,110,.16), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .entry-content figure.wp-block-table table,
  .entry-content .wp-block-table table {
    min-width: 620px;      /* これで初めて横スクロールが成立する */
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
  }
  .entry-content figure.wp-block-table th,
  .entry-content figure.wp-block-table td {
    padding: 9px 10px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .entry-content figure.wp-block-table th { font-size: 13px; }

  /* --- 本文の可読性（16px＝iOSで拡大されない下限） --- */
  .entry-content p,
  .entry-content li { font-size: 16px !important; line-height: 1.9; }
  .entry-content ul,
  .entry-content ol { padding-left: 1.35em; }
  .entry-content li { margin-bottom: .5em; }
  .entry-content p.lead { font-size: 16.5px !important; line-height: 1.85; }

  /* --- 見出し --- */
  .entry-title { font-size: 22px; line-height: 1.45; }
  .entry-content h2 { font-size: 20px; line-height: 1.45; padding: 12px 14px; margin-top: 2em; }
  .entry-content h3 { font-size: 17.5px; line-height: 1.5; margin-top: 1.7em; }

  /* --- CTA: 指で押しやすく、文言が3行でも崩れないように --- */
  .ks-cta { padding: 15px 13px; border-radius: 12px; margin: 24px 0; }
  .ks-cta .ks-lead { font-size: 15px; line-height: 1.65; margin-bottom: 11px; }
  .ks-cta .ks-note { font-size: 11px; line-height: 1.55; }
  .ks-btn {
    font-size: 15px;
    line-height: 1.5;
    padding: 15px 12px;
    border-radius: 10px;
    min-height: 44px;          /* タップターゲットの下限 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .ks-card { padding: 13px 12px; border-radius: 10px; }
  .ks-card .ks-t { font-size: 14.5px; line-height: 1.5; }
  .ks-card .ks-d { font-size: 13px; line-height: 1.65; margin-bottom: 11px; }

  /* --- 画像 --- */
  .entry-content img { max-width: 100%; height: auto; }
}

/* さらに小さい端末（iPhone SE 等） */
@media screen and (max-width: 480px) {
  .entry-title { font-size: 20.5px; }
  .entry-content h2 { font-size: 18.5px; }
  .entry-content h3 { font-size: 16.5px; }
  .entry-content p,
  .entry-content li { font-size: 15.5px !important; }
  .ks-btn { font-size: 14.5px; padding: 14px 10px; }
}

/* 念のため: どの幅でもページ全体が横スクロールしないよう保険をかける */
html, body { overflow-x: hidden; }

/* ===================================================================
   広い画面でCTA・表・本文が間延びしないよう可読幅に収める（2026-07-29）
   1000px前後でサイドバーが下に落ちてメインが全幅になるため、
   CTAが画面いっぱいに伸びて不格好になっていた問題への対処。
   =================================================================== */
@media screen and (min-width: 835px) {
  .entry-content > p,
  .entry-content > ul,
  .entry-content > ol,
  .entry-content > h2,
  .entry-content > h3,
  .entry-content > .ks-cta,
  .entry-content > figure.wp-block-table {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 見出しは左右パディング分だけ広げて、本文との縦ラインを揃える */
  .entry-content > h2 { max-width: 760px; }
}