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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/





/* hot word list */
#sidebar .hot_word {
  background-color: #fff;
  margin-bottom: 0;
}
#sidebar .hot_word ul {
  padding: 0;
  margin-top: 0;
  border: none;
}
#sidebar .hot_word ul li {
  display: inline-block;
}
#sidebar .hot_word ul li a {
  display: inline-block;
  border-radius: 0.5em;
  color: #fff;
  font-weight: bold;
  line-height: 1.0em;
  padding: 5px 8px;
  margin-right: 4px;
  background-color: #6bb6ff;
  margin-bottom: 4px;
  font-size: 0.9em;
  text-decoration: underline;
  /* transition: background-color 0.5s; */
}
#sidebar .hot_word ul li a:hover {
  background-color: #b8dbff;
  text-decoration: none;
}




/* hot word list */
#footer .hot_word {
  background-color: #fff;
  margin-bottom: 0;
}
#footer .hot_word ul {
  padding: 0;
  margin-top: 0;
  border: none;
}
#footer .hot_word ul li {
  display: inline-block;
}
#footer .hot_word ul li a {
  display: inline-block;
  border-radius: 0.5em;
  color: #fff;
  font-weight: bold;
  line-height: 1.0em;
  padding: 5px 8px;
  margin-right: 4px;
  background-color: #6bb6ff;
  margin-bottom: 4px;
  font-size: 0.9em;
  text-decoration: underline;
  /* transition: background-color 0.5s; */
}
#footer .hot_word ul li a:hover {
  background-color: #b8dbff;
  text-decoration: none;
}


/* ---------------------------------------------------------
   ブログカードカスタマイズ
--------------------------------------------------------- */
.blogcard-snippet{
display:none;
}
.blogcard-thumbnail{
width: 40%;
}
.blogcard-title{
font-size:1.1em;
font-weight: bold;
margin:1em; /*タイトル周り余白*/
}
.blogcard-site{
display:none;
}




/* ---------------------------------------------------------
  コメントカスタマイズ
--------------------------------------------------------- */
.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}




/* ---------------------------------------------------------
   アコーディオン（トグルボックス）共通スタイル
--------------------------------------------------------- */

/* トグルボタン（共通） ---------------------------- */
[class*="is-style-cstm-toggle"] .toggle-button {
  border: none;
  border-radius: 0;
  padding: 0.5em 1em;
}

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

/* シンプルスタイル ------------------------------- */
[class*="is-style-cstm-toggle-simple"] .toggle-button {
  background-color: #f5f4f3;
}

/* 白抜き／下線スタイル ------------------------------ */
[class*="is-style-cstm-toggle-outline"] .toggle-button,
[class*="is-style-cstm-toggle-underline"] .toggle-button {
  background: none;
}

/* 外枠あり（シンプル／白抜き） */
.toggle-box[class*="is-style-cstm-toggle-simple"],
.toggle-box[class*="is-style-cstm-toggle-outline"] {
  border: 1px solid var(--cocoon-custom-border-color);
}

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

/* 左寄せボタン（-left系） ------------------------- */
[class*="is-style-cstm-toggle"][class*="-left"] .toggle-button {
  padding: 0.5em 2em 0.5em 1em;
  text-align: left;
}

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

/* チェック時の装飾 -------------------------------- */
/* 白抜き：開閉時に下線を破線に */
[class*="is-style-cstm-toggle-outline"] .toggle-checkbox:checked ~ .toggle-button {
  border-bottom: 1px dashed var(--cocoon-custom-border-color);
}

/* 開閉コンテンツ：境界線リセット */
[class*="is-style-cstm-toggle"] .toggle-checkbox:checked ~ .toggle-content {
  border: none;
  border-radius: 0;
}

/* コンテンツ余白（シンプル／白抜き） ---------------- */
[class*="is-style-cstm-toggle-simple"].toggle-wrap .toggle-content,
[class*="is-style-cstm-toggle-outline"].toggle-wrap .toggle-content {
  padding: 0 1.5em;
}

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

/* ボタン風デザイン ------------------------------- */
.is-style-cstm-toggle-button .toggle-button {
  width: fit-content;
  border: 1px solid var(--cocoon-custom-border-color);
  border-radius: 99px;
  padding: 0.3em 1.5em;
  margin: 0 auto;
}

.is-style-cstm-toggle-button .toggle-checkbox:checked ~ .toggle-button {
  border-radius: 99px;
  margin-bottom: 1em;
}

/* FAQスタイル ------------------------------------ */
/* FAQ共通：左寄せ */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button,
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-content {
  position: relative;
  text-align: left;
}

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

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

/* FAQコンテンツ余白（展開時） */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-checkbox:checked ~ .toggle-content {
  padding: 1em 2em 1em 2.2em;
}

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

/* Qラベル（ボタン側） */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button::after {
  content: 'Q';
  color: #004aad;
  top: 0.5em;
}

/* Aラベル（コンテンツ側） */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-checkbox:checked ~ .toggle-content::after {
  content: 'A';
  color: #bc5731;
  top: 1em;
}

/* アイコン（Font Awesome利用） ------------------ */
/* 白抜きタイプ：矢印 */
[class*="is-style-cstm-toggle"][class*="-left"] .toggle-button::before {
  content: "\f078"; /* V字型 */
}
[class*="is-style-cstm-toggle"][class*="-left"] .toggle-checkbox:checked ~ .toggle-button::before {
  content: "\f077"; /* V字型 */
}

/* FAQタイプ：矢印 */
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-button::before {
  content: "\f0d7"; /* ▼ */
}
[class*="is-style-cstm-toggle"][class*="-faq"] .toggle-checkbox:checked ~ .toggle-button::before {
  content: "\f0d8"; /* ▲ */
}






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

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

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