@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){
  /*必要ならばここにコードを書く*/
}


/* --------------------------------------------------
   Gridカードレイアウト（Widget Entry Cards）
-------------------------------------------------- */

/* 共通：カードコンテナをGrid化 */
[class*="is-style-grid-"] .widget-entry-cards {
    display: grid;
    gap: 1.2rem;
}

/* 共通：大きめ画像リンクの最大幅制御 */
[class*="is-style-grid-"] .widget-entry-cards.card-large-image .a-wrap {
    max-width: 600px;
    width: 100%;
    margin-inline: auto;
}

/* 共通：大サムネイル中央寄せ */
[class*="is-style-grid-"] .widget-entry-cards.large-thumb {
    justify-items: center;
}

/* ---- PCカラム数指定 ---- */

/* 2列 */
.is-style-grid-2-sp1 .widget-entry-cards,
.is-style-grid-2-sp2 .widget-entry-cards {
    grid-template-columns: repeat(2, 1fr);
}

/* 3列 */
.is-style-grid-3-sp1 .widget-entry-cards,
.is-style-grid-3-sp2 .widget-entry-cards {
    grid-template-columns: repeat(3, 1fr);
}

/* 4列 */
.is-style-grid-4-sp1 .widget-entry-cards,
.is-style-grid-4-sp2 .widget-entry-cards {
    grid-template-columns: repeat(4, 1fr);
}

/* ---- モバイル制御 ---- */
@media (max-width: 768px) {

    /* SP1：常に1列 */
    :is(
        .is-style-grid-2-sp1,
        .is-style-grid-3-sp1,
        .is-style-grid-4-sp1
    ) .widget-entry-cards {
        grid-template-columns: 1fr;
    }

    /* SP2：2列維持 */
    :is(
        .is-style-grid-2-sp2,
        .is-style-grid-3-sp2,
        .is-style-grid-4-sp2
    ) .widget-entry-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =================================================
   トグル（アコーディオン）共通ベース
================================================= */

/* 開閉トリガー共通 ------------------------------ */
[class*="is-style-toggle"] .toggle-button {
  border: 0;
  border-radius: 0;
  padding: 0.8em 1em;
  font-weight: 700;
  color: var(--cocoon-dark-grey-color);
}

[class*="is-style-toggle"] .toggle-button::before {
  opacity: 1;
}

/* 背景なしタイプ（枠線・下線） ------------------ */
[class*="is-style-toggle-outline"] .toggle-button,
[class*="is-style-toggle-underline"] .toggle-button {
  background: transparent;
}

/* 外枠タイプ ---------------------------------- */
.toggle-box[class*="is-style-toggle-basic"],
.toggle-box[class*="is-style-toggle-outline"] {
  border: 1px solid var(--cocoon-custom-border-color);
}

/* 下線タイプ ---------------------------------- */
.toggle-box[class*="is-style-toggle-underline"] {
  border-bottom: 1px solid var(--cocoon-custom-border-color);
}

/* 左寄せレイアウト ------------------------------ */
[class*="is-style-toggle"][class*="-left"] .toggle-button {
  text-align: left;
  padding: 0.8em 2em 0.8em 1em;
}

/* 左寄せ・FAQ共通アイコン位置 ------------------ */
[class*="is-style-toggle"][class*="-left"] .toggle-button::before,
[class*="is-style-toggle"][class*="-faq"] .toggle-button::before {
  position: absolute;
  right: 1em;
  margin: 0;
  font-size: 1em;
}

/* 展開時の見た目調整 ---------------------------- */
[class*="is-style-toggle-outline"]
.toggle-checkbox:checked ~ .toggle-button {
  border-bottom: 1px dashed var(--cocoon-custom-border-color);
}

[class*="is-style-toggle"]
.toggle-checkbox:checked ~ .toggle-content {
  border: 0;
  border-radius: 0;
}

/* コンテンツ余白調整 ---------------------------- */
[class*="is-style-toggle-basic"].toggle-wrap .toggle-content,
[class*="is-style-toggle-outline"].toggle-wrap .toggle-content {
  padding: 0 1.5em;
}

[class*="is-style-toggle-basic"]
.toggle-checkbox:checked ~ .toggle-content,
[class*="is-style-toggle-outline"]
.toggle-checkbox:checked ~ .toggle-content {
  padding: 1.5em;
}

/* ボタン風デザイン ------------------------------ */
.is-style-toggle-pill .toggle-button {
  display: inline-block;
  border: 1px solid var(--cocoon-custom-border-color);
  border-radius: 999px;
  padding: 0.3em 1.5em;
  margin: 0 auto;
}

.is-style-toggle-pill
.toggle-checkbox:checked ~ .toggle-button {
  border-radius: 999px;
}

/* 背景未指定時の余白制御 ------------------------ */
.is-style-toggle-pill:not(.has-background).toggle-wrap .toggle-content {
  padding: 0;
}

.is-style-toggle-pill:not(.has-background)
.toggle-checkbox:checked ~ .toggle-content {
  padding: 1em 0;
}

/* FAQ用レイアウト -------------------------------- */
[class*="is-style-toggle"][class*="-faq"] .toggle-button,
[class*="is-style-toggle"][class*="-faq"] .toggle-content {
  position: relative;
  text-align: left;
}

/* FAQ余白（初期） */
[class*="is-style-toggle"][class*="-faq"].toggle-wrap .toggle-content {
  padding: 0 2em 0 2.2em;
}

/* FAQボタン余白 */
[class*="is-style-toggle"][class*="-faq"] .toggle-button {
  padding: 0.8em 2em 0.8em 2.2em;
}

/* FAQ展開時余白 */
[class*="is-style-toggle"][class*="-faq"]
.toggle-checkbox:checked ~ .toggle-content {
  padding: 1.5em 2em 1.5em 2.2em;
}

/* Q / A マーカー -------------------------------- */
[class*="is-style-toggle"][class*="-faq"] .toggle-button::after,
[class*="is-style-toggle"][class*="-faq"]
.toggle-checkbox:checked ~ .toggle-content::after {
  position: absolute;
  left: 1em;
  font-weight: bold;
}

/* Q表示 */
[class*="is-style-toggle"][class*="-faq"] .toggle-button::after {
  content: 'Q';
  color: #004aad;
  top: 0.8em;
}

/* A表示 */
[class*="is-style-toggle"][class*="-faq"]
.toggle-checkbox:checked ~ .toggle-content::after {
  content: 'A';
  color: #bc5731;
  top: 1.5em;
}

/* アイコン切り替え（Font Awesome） ------------- */
[class*="is-style-toggle"][class*="-left"] .toggle-button::before {
  content: "\f078";
}

[class*="is-style-toggle"][class*="-left"]
.toggle-checkbox:checked ~ .toggle-button::before {
  content: "\f077";
}

[class*="is-style-toggle"][class*="-faq"] .toggle-button::before {
  content: "\f0d7";
}

[class*="is-style-toggle"][class*="-faq"]
.toggle-checkbox:checked ~ .toggle-button::before {
  content: "\f0d8";
}