/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */

/* カスタマイズする場合にはこれより下に追記してください  */

/* ============================================================
   ヤフショ攻略ナビ 記事装飾CSS  v2（オレンジ版）
   ------------------------------------------------------------
   使い方: Diverの「追加CSS」または子テーマのstyle.cssに全文貼る
   前提  : クラス接頭辞は ok- で統一（Diver側のCSSと衝突しない）
           テーマを変えてもこのファイルを持っていけば装飾は生き残る
   色替え : 下の :root を変えるとサイト全体の色が一括で変わる
   ------------------------------------------------------------
   ※ YAHOO! JAPANロゴの赤（#FF0033系）は意図的に不使用。
     ヤフーショッピングの「印象色」であるオレンジに寄せつつ、
     ロゴカラーの模倣は避けて公式誤認を防ぐ設計。
   ============================================================ */

:root{
  --ok-brand:#D95E0A;      /* オレンジ  ブランド・帯・ボタン */
  --ok-brand-dk:#8F3D06;   /* 濃オレンジ 見出し文字・表ヘッダー（可読性用） */
  --ok-brand-lt:#FDF1E5;   /* 薄オレンジ 見出し背景・枠内背景 */
  --ok-accent:#F2A81E;     /* 琥珀      ★の日・お得の強調 */
  --ok-good:#15745A;       /* 緑        おすすめ・結論 */
  --ok-warn:#7A5B0C;       /* 山吹      補足の注意 */
  --ok-alert:#A32A20;      /* 朱        罠・警告 */
  --ok-ink:#2A2521;        /* 本文（暖色寄りの黒） */
  --ok-line:#E8DFD6;       /* 罫線（暖色寄りグレー） */
  --ok-soft:#FCFAF8;       /* 枠の中の薄い地色 */
}

/* 共通（枠の中にwpautopで<p>が入っても崩れないように） */
.ok-lead,.ok-box,.ok-trap,.ok-talk,.ok-steps,.ok-rel,.ok-cal{
  box-sizing:border-box;color:var(--ok-ink);line-height:1.9;font-size:16px;
}
.ok-lead p,.ok-box p,.ok-trap p,.ok-talk p,.ok-rel p{margin:0 0 .8em}
.ok-lead p:last-child,.ok-box p:last-child,.ok-trap p:last-child,
.ok-talk p:last-child,.ok-rel p:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   1. 結論ボックス（導入に必ず置く）
------------------------------------------------------------ */
.ok-lead{
  background:var(--ok-brand-lt);border:1px solid #EFCBA8;
  border-top:4px solid var(--ok-brand);border-radius:4px;
  padding:20px 22px;margin:28px 0;
}
.ok-lead__t{
  font-weight:700;font-size:15px;color:var(--ok-brand-dk);
  letter-spacing:.04em;margin:0 0 10px !important;
  display:flex;align-items:center;gap:8px;
}
.ok-lead__t::before{content:"結論";
  background:var(--ok-brand);color:#fff;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:3px;letter-spacing:.08em;}
.ok-lead__t span{display:none}

/* ------------------------------------------------------------
   2. 汎用ボックス  --point=オレンジ / --good=緑 / --warn=山吹
------------------------------------------------------------ */
.ok-box{
  background:var(--ok-soft);border:1px solid var(--ok-line);
  border-left:5px solid var(--ok-line);border-radius:4px;
  padding:18px 20px;margin:24px 0;
}
.ok-box__t{font-weight:700;font-size:15.5px;margin:0 0 8px !important;display:block}
.ok-box--point{background:var(--ok-brand-lt);border-color:#EFCBA8;border-left-color:var(--ok-brand)}
.ok-box--point .ok-box__t{color:var(--ok-brand-dk)}
.ok-box--good{background:#EFF7F3;border-color:#BCDDCF;border-left-color:var(--ok-good)}
.ok-box--good .ok-box__t{color:var(--ok-good)}
.ok-box--warn{background:#FEF8DF;border-color:#E8CE72;border-left-color:var(--ok-accent)}
.ok-box--warn .ok-box__t{color:var(--ok-warn)}

/* ------------------------------------------------------------
   3. 罠アラート（このサイトの看板パーツ）
------------------------------------------------------------ */
.ok-trap{
  background:#FBEAE7;border:1px solid #E3B8B2;
  border-left:5px solid var(--ok-alert);border-radius:4px;
  padding:18px 20px;margin:26px 0;
}
.ok-trap__t{
  font-weight:700;font-size:16px;color:var(--ok-alert);
  margin:0 0 10px !important;display:flex;align-items:flex-start;gap:9px;line-height:1.6;
}
.ok-trap__t::before{content:"罠";
  flex:0 0 auto;background:var(--ok-alert);color:#fff;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:3px;margin-top:3px;letter-spacing:.08em;}
.ok-trap__list{margin:0;padding-left:1.3em}
.ok-trap__list li{margin-bottom:6px}
.ok-trap__list li:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   4. 吹き出し（体験談・実際にやったことだけ書く）
------------------------------------------------------------ */
.ok-talk{display:flex;align-items:flex-start;gap:14px;margin:26px 0}
.ok-talk__i{
  flex:0 0 60px;width:60px;height:60px;border-radius:50%;
  object-fit:cover;border:2px solid var(--ok-line);background:#fff;
}
.ok-talk__b{
  position:relative;flex:1 1 auto;background:#FFFCF7;
  border:1px solid #EBDCC6;border-radius:10px;padding:14px 18px;font-size:15.5px;
}
.ok-talk__b::before{content:"";position:absolute;left:-9px;top:20px;width:0;height:0;
  border:9px solid transparent;border-right-color:#EBDCC6;border-left:0}
.ok-talk__b::after{content:"";position:absolute;left:-7px;top:20px;width:0;height:0;
  border:9px solid transparent;border-right-color:#FFFCF7;border-left:0}

/* ------------------------------------------------------------
   5. 比較表（スマホでは横スクロール）
------------------------------------------------------------ */
.ok-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;
  border:1px solid var(--ok-line);border-radius:4px}
.ok-table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px;margin:0}
.ok-table th,.ok-table td{padding:11px 14px;border-bottom:1px solid var(--ok-line);
  text-align:left;line-height:1.7;vertical-align:top}
.ok-table thead th{background:var(--ok-brand-dk);color:#fff;font-weight:700;
  font-size:14px;white-space:nowrap;border-bottom:none}
.ok-table tbody tr:nth-child(even) td{background:var(--ok-soft)}
.ok-table tbody tr:last-child td{border-bottom:none}
.ok-table .ok-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ok-table .ok-hit td{background:#FEF3DC !important}

/* 倍率などの小さいチップ */
.ok-badge{display:inline-block;font-size:12px;font-weight:700;line-height:1;
  padding:4px 8px;border-radius:3px;background:var(--ok-brand-lt);color:var(--ok-brand-dk);
  white-space:nowrap;vertical-align:middle}
.ok-badge--up{background:#FDEEC8;color:var(--ok-warn)}
.ok-badge--star{background:var(--ok-accent);color:#4A3506}

/* ------------------------------------------------------------
   6. お得な日カレンダー（このサイトの主力）
------------------------------------------------------------ */
.ok-cal{border:1px solid var(--ok-line);border-radius:5px;overflow:hidden;margin:28px 0}
.ok-cal__h{background:var(--ok-brand);color:#fff;font-weight:700;font-size:16px;
  padding:12px 16px;text-align:center;letter-spacing:.04em}
.ok-cal__w,.ok-cal__g{display:grid;grid-template-columns:repeat(7,1fr)}
.ok-cal__w span{background:var(--ok-brand-lt);color:var(--ok-brand-dk);font-size:12px;
  font-weight:700;text-align:center;padding:7px 0;border-bottom:1px solid var(--ok-line)}
.ok-cal__w span:nth-child(6){color:#2A6FA8}
.ok-cal__w span:nth-child(7){color:var(--ok-alert)}
.ok-cal__d{min-height:74px;border-right:1px solid var(--ok-line);
  border-bottom:1px solid var(--ok-line);padding:5px 5px 6px;
  font-size:11.5px;line-height:1.45;background:#fff}
.ok-cal__d:nth-child(7n){border-right:none}
.ok-cal__d b{display:block;font-size:13px;font-weight:700;margin-bottom:3px;color:var(--ok-ink)}
.ok-cal__d--out{background:#F7F4F1}
.ok-cal__d--star{background:#FEF3DC}
.ok-cal__d--star b::after{content:" ★";color:var(--ok-brand)}
.ok-cal__e{display:block;background:var(--ok-brand-lt);color:var(--ok-brand-dk);
  border-radius:3px;padding:2px 4px;margin-bottom:2px;font-weight:500}
.ok-cal__e--up{background:#FDEEC8;color:var(--ok-warn)}
.ok-cal__e--big{background:var(--ok-brand);color:#fff}
@media(max-width:600px){
  .ok-cal__d{min-height:60px;font-size:10px;padding:4px 3px}
  .ok-cal__d b{font-size:12px}
  .ok-cal__e{padding:1px 3px}
}

/* ------------------------------------------------------------
   7. 手順リスト
------------------------------------------------------------ */
.ok-steps{list-style:none;counter-reset:oks;padding:0;margin:26px 0}
.ok-steps li{counter-increment:oks;position:relative;
  padding:14px 16px 14px 54px;background:var(--ok-soft);
  border:1px solid var(--ok-line);border-radius:4px;margin-bottom:10px}
.ok-steps li:last-child{margin-bottom:0}
.ok-steps li::before{content:counter(oks);position:absolute;left:14px;top:14px;
  width:26px;height:26px;border-radius:50%;background:var(--ok-brand);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ok-steps li b{display:block;margin-bottom:3px;font-size:15.5px}

/* ------------------------------------------------------------
   8. 関連記事
------------------------------------------------------------ */
.ok-rel{background:#FEF8DF;border:2px solid var(--ok-accent);
  border-radius:5px;padding:16px 20px;margin:28px 0}
.ok-rel__t{font-weight:700;color:var(--ok-warn);font-size:15px;margin:0 0 8px !important}
.ok-rel ul{list-style:none;padding:0;margin:0}
.ok-rel li{position:relative;padding-left:20px;margin-bottom:7px;line-height:1.75}
.ok-rel li:last-child{margin-bottom:0}
.ok-rel li::before{content:"▶";position:absolute;left:0;top:0;color:var(--ok-brand);font-size:11px}
.ok-rel a{color:#1A56DB;text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------
   9. ボタン
------------------------------------------------------------ */
.ok-btn{display:block;max-width:420px;margin:26px auto;text-align:center;
  background:var(--ok-brand);color:#fff !important;font-weight:700;font-size:16.5px;
  padding:15px 22px;border-radius:6px;text-decoration:none !important;
  box-shadow:0 3px 0 #A34506;transition:transform .1s,box-shadow .1s}
.ok-btn:hover{transform:translateY(2px);box-shadow:0 1px 0 #A34506}
.ok-btn--sub{background:var(--ok-brand-dk);box-shadow:0 3px 0 #5E2703}
.ok-btn--sub:hover{box-shadow:0 1px 0 #5E2703}

/* 10. 小さい注記 */
.ok-note{font-size:13.5px;color:#6E645C;line-height:1.75;margin:14px 0}

/* ------------------------------------------------------------
   11. 見出し（Diver既定のグレー青#607D8Bをブランドカラーへ）
   article を挟んで詳細度を上げているので !important は不要
------------------------------------------------------------ */
article .content h2{
  background:var(--ok-brand-lt);
  color:var(--ok-ink);
  border-left:6px solid var(--ok-brand);
  border-radius:0 4px 4px 0;
  padding:14px 20px;
  font-size:20px;
  line-height:1.55;
  margin:38px 0 16px;
}
article .content h3{
  background:none;
  color:var(--ok-brand-dk);
  border-left:none;
  border-bottom:2px solid var(--ok-brand-lt);
  border-radius:0;
  padding:0 0 8px;
  font-size:17.5px;
  line-height:1.6;
  margin:30px 0 12px;
}
article .content h4{
  color:var(--ok-brand-dk);
  font-size:16.5px;
  margin:24px 0 10px;
}
/* 本文中のリンク */
article .content a{color:#1A56DB;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
article .content a:hover{color:#0E3FA8}
article .content a.ok-btn,article .content a.ok-btn:hover{color:#fff;text-decoration:none}
/* 表ヘッダーの中のリンク（茶色の上なので白＋白い下線にする） */
article .content .ok-table thead th a{color:#fff;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.65)}
article .content .ok-table thead th a:hover{color:#FFD98A;text-decoration-color:#FFD98A}

/* マーカー（重要な一文を引き立てる） */
.ok-mark{
  background:linear-gradient(transparent 62%,#FBE3AE 62%);
  font-weight:700;
}

/* ------------------------------------------------------------
   12. カレンダーのチップをタップして条件を見る
   ※ モーダル本体はJSがcreateElementで作る（wpautop対策）
------------------------------------------------------------ */
button.ok-cal__e{
  cursor:pointer;border:none;font:inherit;font-size:inherit;
  text-align:left;width:100%;display:block;-webkit-appearance:none;appearance:none;
}
button.ok-cal__e::after{content:" ▸";opacity:.55;font-weight:700}
button.ok-cal__e:hover{filter:brightness(.94)}
button.ok-cal__e:focus-visible{outline:2px solid var(--ok-brand);outline-offset:1px}

.ok-modal{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;
  background:rgba(38,26,16,.58);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.ok-modal__p{
  background:#fff;border-radius:8px;width:100%;max-width:430px;
  padding:22px 24px 24px;max-height:86vh;overflow-y:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.32);
  color:var(--ok-ink);line-height:1.85;
}
.ok-modal__t{
  font-size:18px;font-weight:700;color:var(--ok-brand-dk);
  margin:0 0 4px;line-height:1.5;
}
.ok-modal__w{font-size:13px;color:#7A6E64;margin:0 0 14px}
.ok-modal__r{
  display:inline-block;background:var(--ok-brand);color:#fff;
  font-size:19px;font-weight:700;padding:5px 14px;border-radius:4px;margin:0 0 14px;
}
.ok-modal__h{font-size:13.5px;font-weight:700;color:var(--ok-brand-dk);margin:0 0 6px}
.ok-modal__l{margin:0 0 16px;padding-left:1.25em;font-size:14.5px}
.ok-modal__l li{margin-bottom:5px}
.ok-modal__n{font-size:12.5px;color:#7A6E64;margin:0 0 16px;line-height:1.7}
.ok-modal__b{
  display:block;text-align:center;background:var(--ok-brand);color:#fff !important;
  font-weight:700;padding:13px;border-radius:6px;text-decoration:none !important;
  margin:0 0 10px;box-shadow:0 3px 0 #A34506;
}
.ok-modal__x{
  display:block;width:100%;background:none;border:1px solid var(--ok-line);
  color:#7A6E64;font:inherit;font-size:14px;padding:9px;border-radius:6px;cursor:pointer;
}
@media(max-width:600px){.ok-modal__p{padding:18px 18px 20px}}

@media (prefers-reduced-motion:reduce){.ok-btn{transition:none}}

/* 13. PR表記（記事タイトル下の日付の横に小さく出す・ステマ規制対応） */
.post-meta-bottom::after{
  content:"PR（広告を含みます）";
  display:inline-block;vertical-align:middle;
  margin-left:10px;padding:2px 8px;
  border:1px solid var(--ok-line);border-radius:4px;
  background:var(--ok-soft);color:#8A7F76;
  font-size:11px;line-height:1.6;letter-spacing:.02em;white-space:nowrap;
}
@media(max-width:600px){
  .post-meta-bottom::after{margin-left:0;margin-top:6px;display:block;width:fit-content}
}

/* 14. 記事下の「この記事を書いた人」を非表示 */
.post_footer_author_title,
.post_footer_author{display:none !important}

/* 15. Diverの上書きを打ち消す（表の下の空白・ステップ番号の二重表示） */
article .content .ok-tw table.ok-table,.content .ok-tw .ok-table{margin:0 !important}
.ok-table tbody tr:last-child td{border-bottom:none}
article .content ol.ok-steps,.content ol.ok-steps{list-style:none !important;padding-left:0 !important;margin-left:0 !important}
article .content ol.ok-steps li,.content ol.ok-steps li{list-style:none !important}
ol.ok-steps li::marker{content:""}

/* 16. まとめボックスのチェック箇条書き（見出しの絵文字と区別する） */
article .content ul.ok-check,.content ul.ok-check{list-style:none !important;margin:0 !important;padding:0 !important}
ul.ok-check li{position:relative;padding-left:26px;margin:0 0 10px;line-height:1.8;list-style:none !important}
ul.ok-check li:last-child{margin-bottom:0}
ul.ok-check li::marker{content:""}
ul.ok-check li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:12px;border:solid #2F7D4F;border-width:0 3px 3px 0;transform:rotate(45deg)}

/* 17. サイトロゴ（ヘッダーのサイト名）の装飾 */
#logo a{text-decoration:none !important}
#logo .logo_title{
  display:inline-flex;align-items:center;gap:9px;
  color:#8F3D06 !important;font-weight:800;letter-spacing:.01em;
}
#logo .logo_title::before{
  content:"";flex:none;width:34px;height:34px;
  background:url(https://y-shopping-navi.com/wp-content/uploads/2026/09/yshop-favicon.png) center/contain no-repeat;
  border-radius:8px;
}
#logo a:hover .logo_title{opacity:.82}
@media(max-width:600px){
  #logo .logo_title{gap:7px}
  #logo .logo_title::before{width:27px;height:27px}
}