@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ==========================================================================
   デザイントークン（CSS変数）
   12_DESIGN_SYSTEM.md §1 準拠
   ========================================================================== */

:root {
  /* --- カラー --- */
  --ds-white: #FFFFFF;
  --ds-bg-section: #F0F7F6;
  --ds-primary: #2A9D8F;
  --ds-text-main: #1A1A1A;
  --ds-text-sub: #666666;
  --ds-cta: #E76F51;
  --ds-border: #E0E0E0;
  --ds-label-light: #D4E8E5;

  /* 判定バッジ */
  --ds-ok-bg: #E6F4F3;
  --ds-ok-text: #2A9D8F;
  --ds-cond-bg: #FFF4E0;
  --ds-cond-text: #9A7020;
  --ds-ng-bg: #FDE8E8;
  --ds-ng-text: #C0392B;

  /* --- タイポグラフィ --- */
  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --ds-lh-body: 1.8;
  --ds-lh-heading: 1.4;

  /* --- スペース・角丸 --- */
  --ds-radius-card: 14px;
  --ds-radius-btn: 10px;
}

/* ==========================================================================
   Cocoon デフォルト上書き（.article = 投稿ページ本文）
   ========================================================================== */

/* --- 見出し --- */
.article h2 {
  color: var(--ds-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: var(--ds-lh-heading);
  border: none;
  border-bottom: 2px solid var(--ds-bg-section);
  padding: 0 0 8px;
  margin: 48px 0 20px;
  background: none;
}

.article h3 {
  color: var(--ds-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: var(--ds-lh-heading);
  border: none;
  padding: 0;
  margin: 32px 0 12px;
  background: none;
}

/* --- 本文 --- */
.article p {
  line-height: var(--ds-lh-body);
}

/* --- テーブル --- */
.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0;
}

.article table th,
.article table td {
  border: 1px solid var(--ds-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.article table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--ds-text-sub);
  margin-bottom: 6px;
}

/* --- details/summary（FAQ） --- */
.article details {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 8px;
}

.article details summary {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}

.article details summary::-webkit-details-marker {
  display: none;
}

.article details summary::before {
  content: "Q. ";
  color: var(--ds-primary);
  font-weight: 700;
}

.article details[open] summary {
  border-bottom: 1px solid var(--ds-border);
}

.article details > p,
.article details > div {
  padding: 14px 16px;
  font-size: 14px;
  margin: 0;
}

/* --- リンク色 --- */
.article a {
  color: var(--ds-primary);
}

.article a:hover {
  opacity: 0.8;
}

/* --- 水平線 --- */
.article hr {
  border: none;
  border-top: 1px solid var(--ds-border);
  margin: 32px 0;
}

/* ==========================================================================
   記事共通クラス（判定・注釈・CTA・サブリンク）
   ========================================================================== */

/* --- 判定テキスト --- */
.judge-ok {
  color: var(--ds-ok-text);
  font-weight: 700;
}

.judge-cond {
  color: var(--ds-cond-text);
  font-weight: 700;
}

.judge-ng {
  color: var(--ds-ng-text);
  font-weight: 700;
}

/* --- 判定バッジ（インラインラベル用） --- */
.badge-ok {
  display: inline-block;
  background: var(--ds-ok-bg);
  color: var(--ds-ok-text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}

.badge-cond {
  display: inline-block;
  background: var(--ds-cond-bg);
  color: var(--ds-cond-text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}

.badge-ng {
  display: inline-block;
  background: var(--ds-ng-bg);
  color: var(--ds-ng-text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}

/* --- テーブルヘッダー背景 --- */
.th-accent {
  background: var(--ds-bg-section);
}

/* --- 注釈テキスト --- */
.note {
  font-size: 13px;
  color: var(--ds-text-sub);
  line-height: 1.6;
}

.note-center {
  font-size: 13px;
  color: var(--ds-text-sub);
  text-align: center;
  line-height: 1.6;
}

/* --- CTA ボタン --- */
.cta-primary {
  display: inline-block;
  background-color: var(--ds-cta);
  color: var(--ds-white) !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: var(--ds-radius-btn);
}

.cta-primary:hover {
  opacity: 0.9;
  color: var(--ds-white) !important;
}

/* --- CTA / リンク ラッパー --- */
.cta-wrap {
  text-align: center;
  margin: 32px 0 16px;
}

.link-wrap {
  text-align: center;
  margin: 24px 0;
}

/* --- サブリンク --- */
.sub-link {
  color: var(--ds-text-sub);
  text-decoration: underline;
  font-size: 13px;
}

.sub-link:hover {
  color: var(--ds-primary);
}

.sub-link-lg {
  color: var(--ds-text-sub);
  text-decoration: underline;
  font-size: 14px;
}

.sub-link-lg:hover {
  color: var(--ds-primary);
}

/* --- 記事末尾（更新情報） --- */
.article-meta {
  font-size: 13px;
  color: var(--ds-text-sub);
  line-height: 1.6;
}

.article-meta a {
  color: var(--ds-text-sub);
}

/* ==========================================================================
   エディトリアルページ共通（about-us, methodology, policy等）
   ========================================================================== */

.page .entry-content h2 {
  color: var(--ds-primary);
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid var(--ds-bg-section);
  padding: 0 0 8px;
  margin: 48px 0 20px;
  background: none;
}

.page .entry-content h3 {
  color: var(--ds-primary);
  font-size: 16px;
  font-weight: 700;
  border: none;
  padding: 0;
  margin: 32px 0 12px;
  background: none;
}

.page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0;
}

.page .entry-content table th,
.page .entry-content table td {
  border: 1px solid var(--ds-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.page .entry-content a {
  color: var(--ds-primary);
}

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

  .article table {
    font-size: 13px;
  }

  .article table th,
  .article table td {
    padding: 8px 10px;
  }

  .cta-primary {
    font-size: 13px;
    padding: 12px 20px;
  }
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}