@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;
}