@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 記事内の見出し・本文 */
.article h2 {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px 10px 20px;
    border-left: 6px solid #003399;
    border-bottom: none;
    background-color: #ecf6f9;
}

.article h3 {
    margin-bottom: 5px;
    padding: 5px 5px;
    border: none;
}

.article p {
    padding-left: 5px;
    padding-right: 5px;
}

.iconlist-box {
    padding: 12px;
    margin: 0;
}

/* サイドバーの見出し */
.sidebar h2 {
    padding: 0 10px;
    border-left: none;
    border-radius: 0;
    border-bottom: 2px solid #003399;
}

ol, ul {
  padding-left: 30px;
}


/*商品リンクボックス*/
.product-block {display: flex; border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; border-radius: 6px;  background-color: #fff;  width: 100％;}
.product-block img { width: 140px; height: auto; object-fit: contain; margin-right: 15px;}
.product-info { display: flex; flex-direction: column;  justify-content: space-between;}
.product-info h3 { margin: 0 0 10px 0; font-size: 1.1rem;}
.product-links a { text-decoration: none; margin-right: 10px; padding: 6px 12px; border-radius: 4px; font-size: 0.9rem;  color: #fff;}
.product-links .amazon { background-color: #ff9900;}
.product-links .rakuten { background-color: #bf0000;}

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

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

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

/*
 * koko-con 子テーマ CSS
 * テーマ：Cocoon（子テーマで上書き）
 * ベースカラー：#003399
 * 方針：シンプル・シャープ・読みやすさ優先
 * =========================================
 */

/* =========================================
   1. CSS変数
   ========================================= */
:root {
  --kk-primary:     #003399;   /* ブランドカラー */
  --kk-primary-lt:  #e8edf8;   /* primary の薄背景 */
  --kk-border:      #e2e6ea;   /* 汎用ボーダー */
  --kk-border-dark: #c8cfd8;   /* 少し濃いボーダー */
  --kk-bg:          #f8f9fb;   /* ページ薄背景 */
  --kk-text:        #1a1a2e;   /* 本文 */
  --kk-text-muted:  #6c737e;   /* 補足テキスト */
  --kk-radius:      4px;
  --kk-radius-md:   6px;
}


/* =========================================
   2. 見出し（h2 / h3 / h4）
   ========================================= */

/* h2：下線のみ */
.entry-content h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--kk-text);
  border-bottom: 3px solid var(--kk-primary);
  padding: 0 0 0.4em 0;
  margin: 2.4em 0 1em;
  letter-spacing: 0.01em;
}

/* h3：左ボーダーのみ */
.entry-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kk-text);
  border-left: 4px solid var(--kk-primary);
  padding: 0.1em 0 0.1em 0.75em;
  margin: 1.8em 0 0.7em;
}

/* h4：細い左ボーダー */
.entry-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kk-text);
  border-left: 2px solid var(--kk-border-dark);
  padding: 0.1em 0 0.1em 0.65em;
  margin: 1.4em 0 0.5em;
}


/* =========================================
   3. ボックス・注意書き
   ========================================= */

.kk-box {
  border-radius: var(--kk-radius-md);
  padding: 1em 1.2em;
  margin: 1.3em 0;
  font-size: 0.94rem;
  line-height: 1.75;
  border: 1px solid var(--kk-border);
  border-left-width: 4px;
  background: #fff;
}
.kk-box-title {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.45em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Font Awesome アイコン共通 */
.kk-box-title::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.4em;
  font-style: normal;
}

/* メリット：fa-check-circle（\f058） */
.kk-merit { border-left-color: #2d7d46; background: #f7fdf9; }
.kk-merit .kk-box-title { color: #2d7d46; }
.kk-merit .kk-box-title::before { content: "\f058"; }

/* デメリット：fa-times-circle（\f057） */
.kk-demerit { border-left-color: #b0312a; background: #fdf8f8; }
.kk-demerit .kk-box-title { color: #b0312a; }
.kk-demerit .kk-box-title::before { content: "\f057"; }

/* ポイント：fa-lightbulb（\f0eb） */
.kk-info { border-left-color: var(--kk-primary); background: var(--kk-primary-lt); }
.kk-info .kk-box-title { color: var(--kk-primary); }
.kk-info .kk-box-title::before { content: "\f0eb"; }

/* 注意：fa-exclamation-triangle（\f071） */
.kk-caution { border-left-color: #9a6f00; background: #fdfaf2; }
.kk-caution .kk-box-title { color: #9a6f00; }
.kk-caution .kk-box-title::before { content: "\f071"; }

/* こんな人におすすめ */
.kk-recommend {
  border: 1px solid var(--kk-border);
  border-left: 4px solid var(--kk-primary);
  border-radius: var(--kk-radius-md);
  padding: 1em 1.2em;
  margin: 1.3em 0;
  font-size: 0.94rem;
  line-height: 1.75;
  background: var(--kk-bg);
}
.kk-recommend .kk-box-title {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--kk-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.45em;
}
/* fa-user-check（\f4fc） */
.kk-recommend .kk-box-title::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f4fc";
  margin-right: 0.4em;
}

/* まとめ（結論ボックス） */
.kk-conclusion {
  border: 1px solid var(--kk-border-dark);
  border-top: 3px solid var(--kk-primary);
  border-radius: var(--kk-radius-md);
  padding: 1.2em 1.4em;
  margin: 2em 0 1.2em;
  background: var(--kk-bg);
  font-size: 0.95rem;
  line-height: 1.8;
}
.kk-conclusion .kk-box-title {
  display: block;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--kk-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6em;
}
/* fa-bookmark（\f02e） */
.kk-conclusion .kk-box-title::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02e";
  margin-right: 0.4em;
}

/* ボックス内リスト */
.kk-box ul, .kk-merit ul, .kk-demerit ul,
.kk-info ul, .kk-caution ul,
.kk-recommend ul, .kk-conclusion ul {
  margin: 0.3em 0 0;
  padding-left: 1.3em;
}
.kk-box ul li, .kk-merit ul li, .kk-demerit ul li,
.kk-info ul li, .kk-caution ul li,
.kk-recommend ul li, .kk-conclusion ul li {
  margin-bottom: 0.25em;
}


/* =========================================
   4. テーブル（比較表・スペック表）
   ========================================= */

.kk-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4em 0;
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius-md);
}

.kk-table-wrap table,
.entry-content table.kk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.91rem;
  min-width: 460px;
}

.kk-table-wrap table thead th,
.entry-content table.kk-table thead th {
  background: var(--kk-primary);
  color: #fff;
  font-weight: 700;
  padding: 0.65em 1em;
  text-align: center;
  font-size: 0.87rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: none;
}

.kk-table-wrap table tbody td,
.entry-content table.kk-table tbody td {
  padding: 0.6em 1em;
  border-bottom: 1px solid var(--kk-border);
  text-align: center;
  color: var(--kk-text);
  vertical-align: middle;
}

.kk-table-wrap table tbody td:first-child,
.entry-content table.kk-table tbody td:first-child {
  font-weight: 600;
  background: var(--kk-bg);
  text-align: left;
  color: var(--kk-text-muted);
  font-size: 0.87rem;
  white-space: nowrap;
}

.kk-table-wrap table tbody tr:nth-child(even) td { background: var(--kk-bg); }
.kk-table-wrap table tbody tr:nth-child(even) td:first-child { background: #f0f2f6; }

.kk-table-wrap table td.kk-best,
.entry-content table.kk-table td.kk-best {
  font-weight: 700;
  color: var(--kk-primary);
}

/* スペック表 */
.kk-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.91rem;
  margin: 1.1em 0;
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius-md);
  overflow: hidden;
}
.kk-spec-table th {
  width: 36%;
  background: var(--kk-bg);
  color: var(--kk-text-muted);
  font-weight: 600;
  font-size: 0.87rem;
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--kk-border);
  text-align: left;
}
.kk-spec-table td {
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--kk-border);
  color: var(--kk-text);
  font-weight: 500;
}
.kk-spec-table tr:last-child th,
.kk-spec-table tr:last-child td { border-bottom: none; }


/* =========================================
   5. ボタン（アフィリエイトCTA）
   ========================================= */

.kk-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 1.1em 0;
}

.kk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.6em 1.2em;
  border-radius: var(--kk-radius);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.kk-btn:hover  { opacity: 0.82; transform: translateY(-1px); }
.kk-btn:active { opacity: 1; transform: translateY(0); }

.kk-btn-amazon  { background: #ff9900; color: #111 !important; }
.kk-btn-rakuten { background: #bf0000; color: #fff !important; }
.kk-btn-vc      { background: var(--kk-primary); color: #fff !important; }

.kk-btn-lg { padding: 0.75em 1.6em; font-size: 0.96rem; }

.entry-content a.kk-link {
  color: var(--kk-primary);
  text-decoration: underline;
  font-weight: 600;
}
.entry-content a.kk-link:hover { opacity: 0.75; }


/* =========================================
   6. FAQ（AIO対策）
   ========================================= */

.kk-faq { margin: 1.8em 0; }

.kk-faq-item {
  border-bottom: 1px solid var(--kk-border);
  padding: 0.9em 0;
}
.kk-faq-item:first-child { border-top: 1px solid var(--kk-border); }

.kk-faq-q {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--kk-text);
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  margin-bottom: 0.5em;
}
.kk-faq-q::before {
  content: "Q";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  background: var(--kk-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.kk-faq-a {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--kk-text);
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
}
.kk-faq-a::before {
  content: "A";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  background: var(--kk-bg);
  border: 1px solid var(--kk-border-dark);
  color: var(--kk-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 0.1em;
}


/* =========================================
   7. 手順リスト（悩み記事）
   ========================================= */

.kk-steps {
  counter-reset: kk-step;
  list-style: none;
  padding: 0;
  margin: 1.3em 0;
}
.kk-steps li {
  counter-increment: kk-step;
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--kk-border);
  font-size: 0.94rem;
  line-height: 1.7;
}
.kk-steps li:last-child { border-bottom: none; }
.kk-steps li::before {
  content: counter(kk-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  height: 1.8em;
  background: var(--kk-primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  border-radius: 2px;
  flex-shrink: 0;
}


/* =========================================
   8. リード文
   ========================================= */

.kk-lead {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--kk-text);
  margin: 0.8em 0 1.4em;
}


/* =========================================
   9. レスポンシブ
   ========================================= */

@media (max-width: 600px) {
  .entry-content h2 { font-size: 1.15rem; }
  .entry-content h3 { font-size: 1rem; }
  .kk-btn-wrap { flex-direction: column; align-items: stretch; }
  .kk-btn { width: 100%; justify-content: center; }
  .kk-table-wrap { font-size: 0.85rem; }
}