@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* =========================================================
   快適ガジェット生活 / Cocoon カスタム（白×緑）
   貼り付け先：外観 > カスタマイズ > 追加CSS もしくは 子テーマ style.css
   ========================================================= */

/* ---- カラーバリアブル ---- */
:root{
  --base-bg:#ffffff;
  --base-text:#333333;
  --muted-text:#666666;
  --accent:#2e7d32;        /* 深緑 */
  --accent-hover:#43a047;  /* 明るめの緑 */
  --border:#e6e6e6;
  --card:#fafafa;
}

/* ---- ベース ---- */
body{
  background:var(--base-bg);
  color:var(--base-text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
               "YuGothic", "Meiryo", sans-serif;
}

a{
  color:var(--accent);
  text-decoration:none;
}
a:hover,
a:focus{
  color:var(--accent-hover);
  text-decoration:underline;
}
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ---- ヘッダー / サイトタイトル ---- */
.site-name a,
.site-title a{
  color:var(--base-text);
}
.site-description{
  color:var(--muted-text);
}

/* ---- グローバルナビ（Cocoon） ---- */
.navi{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#fff;
}
.navi-in > ul > li > a{
  padding:12px 16px;
  font-weight:600;
  color:var(--base-text);
}
.navi-in > ul > li > a:hover{
  color:#fff;
  background:var(--accent);
}
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current_page_item > a{
  color:#fff;
  background:var(--accent);
}

/* ---- サイドバー / ウィジェット ---- */
.sidebar .widget{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  margin-bottom:20px;
}
.sidebar .widget-title{
  font-weight:700;
  margin:0 0 12px;
  padding-left:10px;
  border-left:4px solid var(--accent);
}

/* ---- フッター ---- */
#footer{
  border-top:1px solid var(--border);
  background:#fff;
}
.footer-widget-area .widget{
  background:transparent;
  border:none;
}
.footer-bottom{
  color:var(--muted-text);
}

/* ---- 記事：タイトル / 見出し ---- */
.entry-title,
.article .entry-title,
.page .entry-title{
  font-weight:800;
  line-height:1.3;
}

.article h2,
.page h2{
  position:relative;
  margin:28px 0 16px;
  padding:10px 12px 10px 14px;
  background:#f7fbf7; /* 薄い緑背景 */
  border-left:6px solid var(--accent);
  border-radius:6px;
}
.article h3,
.page h3{
  margin:22px 0 12px;
  padding-bottom:6px;
  border-bottom:2px solid var(--accent);
}
.article h4,
.page h4{
  margin:18px 0 10px;
  color:var(--accent);
}

/* ---- 目次（Cocoon TOC） ---- */
.toc{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
}
.toc-title{
  font-weight:700;
  color:var(--accent);
}

/* ---- ボタン（共通 / Amazon用想定） ---- */
/* Gutenberg */
.wp-block-button__link{
  background:var(--accent);
  border-radius:8px;
  padding:.8em 1.1em;
  color:#fff;
  box-shadow: none;
}
.wp-block-button__link:hover{
  background:var(--accent-hover);
  color:#fff;
  text-decoration:none;
}

/* 汎用クラス（ショートコードやHTML直書き用） */
.btn, .button, .c-btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:.7em 1.1em;
  border-radius:8px;
  font-weight:700;
  transition:background .2s ease, transform .05s ease;
}
.btn:hover, .button:hover, .c-btn:hover{
  background:var(--accent-hover);
  color:#fff;
  text-decoration:none;
}
.btn:active, .button:active, .c-btn:active{
  transform:translateY(1px);
}
/* Amazonボタン例：<a class="btn amazon-btn"> */
.amazon-btn::before{
  content:"🛒";
  margin-right:.4em;
}

/* ---- 表・コード・引用 ---- */
.article table, .page table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.article table th,
.article table td,
.page table th,
.page table td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
}
.article table thead th,
.page table thead th{
  background:#f3f7f3;
}

pre, code, kbd, samp{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{
  background:#0b0f0b;
  color:#e6ffe6;
  padding:14px;
  border-radius:8px;
  overflow:auto;
}
code{
  background:#eef6ee;
  color:#1b5e20;
  padding:2px 6px;
  border-radius:4px;
}

/* ---- フォーム（Forminator含む共通化） ---- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px !important;
  padding:10px 12px;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,
textarea:focus,
select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(46,125,50,.15);
  outline:0;
}

/* Forminator送信ボタンを統一 */
.forminator-ui input[type="submit"],
.forminator-button{
  background:var(--accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:.8em 1.1em !important;
}
.forminator-ui input[type="submit"]:hover,
.forminator-button:hover{
  background:var(--accent-hover) !important;
}

/* Turnstile の余白整え（ウィジェット周囲） */
.cf-turnstile,
div[style*="cf-challenge"]{
  margin:8px 0;
}

/* ---- カード風ボックス（任意） ---- */
.box-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}

/* ---- サムネイル / アイキャッチ比率最適化 ---- */
.eye-catch img,
.entry-card-thumb img,
.related-entry-thumb img{
  object-fit:cover;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* ---- ページネーション ---- */
.pagination .page-numbers{
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 12px;
  margin:0 4px;
}
.pagination .current,
.pagination .page-numbers:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* ---- アラート（情報/注意/成功） ---- */
.alert{
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
}
.alert.info{
  border-color:#cde7d1; background:#effaf1; color:#1b5e20;
}
.alert.warn{
  border-color:#ffe4b3; background:#fff7e6; color:#8a5a00;
}
.alert.error{
  border-color:#ffcdd2; background:#ffebee; color:#c62828;
}

/* ---- レスポンシブ微調整 ---- */
@media (max-width: 768px){
  .navi-in > ul > li > a{ padding:10px 12px; }
  .sidebar .widget{ padding:14px; }
  .article h2{ margin:24px 0 14px; }
  .article h3{ margin:18px 0 10px; }
}

.alert.info::before {
  content: none !important;
}

/* ==== Product Cards (Amazon SiteStripe対応) ==== */
.amz-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.amz-card {
  border: 1px solid #e6efe8;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 90, 54, 0.06);
  transition: box-shadow .2s ease, transform .06s ease;
}
.amz-card:hover { box-shadow: 0 6px 18px rgba(16,90,54,.12); transform: translateY(-1px); }

.amz-figure { margin: 0 0 12px; text-align: center; }
.amz-figure img { max-width: 100%; height: auto; border-radius: 10px; }

.amz-title { font-weight: 700; font-size: 1.05rem; margin: 6px 0 8px; line-height: 1.35; }
.amz-meta { color: #4b5b52; font-size: .9rem; margin-bottom: 10px; }

.amz-pros { margin: 10px 0 14px; padding-left: 18px; }
.amz-pros li { list-style: disc; margin: .25rem 0; }

.amz-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.amz-btn {
  display: inline-block; padding: .6rem 1rem; border-radius: 9999px;
  background: #2e7d32; color: #fff; text-decoration: none; font-weight: 700;
}
.amz-btn:hover { filter: brightness(1.05); }

.amz-note { color: #6a7a71; font-size: .8rem; margin-top: 8px; }

.toc-inline{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.toc-inline a{padding:6px 10px;border-radius:999px;background:#f1f6f3;color:#125a36;text-decoration:none;font-weight:600;font-size:.9rem}
.quick-picks{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:10px 0 20px}
.qp-card{border:1px solid #e6efe8;border-radius:14px;padding:12px;background:#fff;box-shadow:0 2px 10px rgba(16,90,54,.06)}
.qp-title{font-weight:700;margin:.25rem 0 .35rem}
.qp-meta{font-size:.9rem;color:#4b5b52;margin-bottom:.5rem}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#2e7d32;color:#fff;font-size:.78rem;font-weight:700}
.pick{display:grid;gap:18px;grid-template-columns:1.1fr 1.5fr;align-items:start;margin:22px 0 30px}
@media (max-width:860px){.pick{grid-template-columns:1fr}}
.pick .media{min-height:200px;background:#f7fbf8;border:1px dashed #d7e6dc;border-radius:12px} /* 画像差し替え予定枠 */
.pick .title{font-size:1.2rem;font-weight:800;margin:.25rem 0 .4rem}
.pick .meta{color:#4b5b52;font-size:.95rem;margin-bottom:.5rem}
.pick .pros,.pick .cons{margin:.4rem 0 .6rem;padding-left:18px}
.pick .pros li{list-style:disc}
.pick .cons li{list-style:circle}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:.4rem}
.amz-btn{display:inline-block;padding:.65rem 1.05rem;border-radius:9999px;background:#2e7d32;color:#fff;text-decoration:none;font-weight:800}
.amz-btn:hover{filter:brightness(1.05)}
.ghost{background:#eaf4ee;color:#135c38}
.table-compare{width:100%;border-collapse:collapse}
.table-compare th,.table-compare td{border-top:1px solid #eaeff0;padding:10px 8px;text-align:left}
.table-compare th{background:#f7fbf8;color:#0c4f2f}
.divider{height:1px;background:linear-gradient(90deg,#e8f1ec,transparent);margin:26px 0}