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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* === ボタンのスタイル (Mofカスタム by Dr.G) === */

/* 共通のボタンスタイル (これはPC表示もスマホ表示も基本になる) */
.cta-button {
  display: inline-block;
  padding: 8px 15px; /* スマホ用の少し小さめなパディングをデフォルトに */
  background-color: #06C755;
  color: white !important; /* 文字色は白を死守！ */
  text-decoration: none !important; /* 下線も消すのを死守！ */
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem !important; /* スマホ用の少し小さめなフォントサイズをデフォルトに (15px基準で約13.5px) */
  line-height: 1.4 !important;    /* スマホ用の適切な行間をデフォルトに */
  margin-top: 0.5em !important; /* まずは共通ボタンの上のマージンを詰める！ */
  margin-bottom: 0.5em !important;/* 下も同様に！ */
}

/* PC専用ボタンは、まず何があっても隠す！ 最強指定！ */
body .cta-button.cta-button-pc,
.cta-button-pc {
  display: none !important;
  margin-top: 0 !important; /* スマホでは上下マージンも確実にゼロに！ */
  margin-bottom: 0 !important;
}

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

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

/* PC表示用のスタイル (768px以上) */
@media (min-width: 768px) {
  /* PC表示の時は、共通ボタンのパディングやフォントサイズを少し大きくする */
  .cta-button {
    padding: 10px 20px !important;
    font-size: 1rem !important; /* PCでは少し大きく (15px基準なら15px) */
    line-height: 1.5 !important;
    /* PC表示の共通ボタンの上下マージンはここで調整 */
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }

  /* PC 専用ボタンを表示させて中央寄せ、適切な上下マージン */
  body .cta-button.cta-button-pc,
  .cta-button-pc {
    display: block !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5em !important;  /* PCではこのマージンを効かせる */
    margin-bottom: 1.5em !important; /* PCではこのマージンを効かせる */
  }

  /* PCの時だけ、bodyのフォントサイズを100%にする */
  body {
    font-size: 100% !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  /* もし480px以下でさらに細かく調整したいことがあればここに書く */
}

/* ===============================================
   スマホ表示時のフォントサイズと余白調整 (Mofカスタム by Dr.G)
   767px以下に適用
   =============================================== */
@media screen and (max-width: 767px) {

  /* --- 基本の文字サイズ調整 --- */
  body {
    font-size: 15px !important;
  }

  /* --- 本文の段落 (pタグ) の調整 --- */
  .entry-content p {
    font-size: 1rem !important; /* 15px */
    line-height: 1.7 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5em !important;
  }

  /* --- h1見出しの調整 --- */
  .entry-content h1 {
    font-size: 1.6rem !important;    /* 24px */
    line-height: 1.4 !important;
    margin-top: 0.8em !important;    /* Gくんがさらに詰めた */
    margin-bottom: 0.4em !important;   /* Gくんがさらに詰めた */
    background: none !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
  }

  /* --- h2見出しの調整 --- */
  div.debt-anxiety-section .entry-content h2, /* 特定のh2 */
  .entry-content h2 { /* 一般的なh2 */
    font-size: 1.333rem !important; /* 20px */
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* --- h3見出しの調整 --- */
  .entry-content h3 {
    font-size: 1.2rem !important;    /* 18px */
    line-height: 1.3 !important;
    margin-top: 0.6em !important;  /* Gくんがさらに詰めた */
    margin-bottom: 0.2em !important; /* Gくんがさらに詰めた */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* --- h4見出しの調整 --- */
  .entry-content h4 {
    font-size: 1.066rem !important;  /* 16px */
    line-height: 1.3 !important;
    margin-top: 0.5em !important;  /* Gくんがさらに詰めた */
    margin-bottom: 0.2em !important; /* Gくんがさらに詰めた */
    background: none !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
  }

  /* --- 全体的な記事エリアの余白 --- */
  .entry-content {
    padding-top: 0.3em !important;    /* Gくんがさらに詰めた */
    padding-bottom: 0.3em !important; /* Gくんがさらに詰めた */
  }

  /* --- リスト (ul, ol) の余白も詰める --- */
  .entry-content ul,
  .entry-content ol {
    margin-top: 0 !important;
    margin-bottom: 0.3em !important; /* Gくんがさらに詰めた */
    padding-left: 1.1em !important;  /* Gくんがさらに詰めた */
  }
  .entry-content ul li,
  .entry-content ol li {
    margin-bottom: 0.1em !important; /* Gくんがさらに詰めた */
  }

  /* --- アコーディオンのレイアウト、フォントサイズ、余白調整 --- */
  .faq-item { /* アコーディオンの各項目を囲む要素 */
    display: block !important;
    margin-top: 0 !important; /* ★変更点: 上の余白もゼロ！ */
    margin-bottom: 0.2em !important; /* Gくんがさらに詰めた */
  }

  .faq-title { /* アコーディオンのタイトル部分 */
    font-size: 1rem !important; /* 本文と同じ15px相当 */
    padding: 0.5em 2.5em 0.5em 1em !important; /* 右パディングでアイコンスペース確保、上下も詰めた */
    display: block !important;
    position: relative !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
  }
  .faq-title::before { /* アイコン位置調整 */
    content: '+';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em; /* Gくんが少し調整した */
    color: #555;
  }
  details[open] > .faq-title::before {
    content: '-';
  }

  .faq-content { /* アコーディオンの答えを囲む要素 */
    padding-top: 0.4em !important;    /* Gくんがさらに詰めた */
    padding-bottom: 0.4em !important; /* Gくんがさらに詰めた */
    padding-left: 1em !important;     /* Gくんがさらに詰めた */
    padding-right: 0.4em !important;   /* Gくんがさらに詰めた */
    line-height: 1.6 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: none !important;
    border: none !important;
  }

  /* スマホ表示時の共通CTAボタンの上下マージンをここで最終調整 */
  .cta-button {
    /* padding, font-size, line-height はメディアクエリの外の指定が適用される */
    margin-top: 0.5em !important;
    margin-bottom: 0.8em !important; /* h2のmargin-topと合わせて調整 */
  }
}