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




/* プロフィールボックスの外枠を消す */
.author-box {
   border: none !important;
}


/************************************
****　目次
************************************/
.toc-title{
font-weight:bold;
}
.toc-title::after {
color:#ffb6c1;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f06b";
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #ffb6c1;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}


/* ブログカードスタイル --------------------------------------------------- */

/* ホバー時のブログカードの影と背景色の設定 */
[class*="is-style-card-1"] .blogcard-wrap:hover,
[class*="is-style-card-2"] .blogcard-wrap:hover {
    background-color: transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}

[class*="is-style-card-1"] .blogcard-wrap {
    width: 100%;
}

/* ブログカードのコンテンツ部分の行間設定 */
[class*="is-style-card-1"] .blogcard-content {
    line-height: 1.4;
}

[class*="is-style-card-2"] .blogcard-content {
    line-height: 1.6;
}

/* ラベルの位置とデザイン */
[class*="is-style-card-"] .blogcard-label {
    top: -11px;
    font-size: .7em;
    color: #666;
    background-color: #fff;
}

/* 枠線の設定 */
[class*="is-style-card-"] .blogcard {
    border-color: #ccc;
    border-radius: 0;
}

/* パディングの設定 */
:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-4, .is-style-card-1-5) .blogcard,
[class*="is-style-card-2"] .blogcard {
    padding: 1em;
}

:where(.is-style-card-1-6, .is-style-card-1-7) .blogcard {
    padding: 1.5em;
}

/* ブログカードのタイトルスタイル設定 */
[class*="is-style-card-"] .blogcard-title {
    font-size: .95em;
}

/* タイトル下の余白 */
:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-6) .blogcard-title {
    margin-bottom: 0.2em;
}

:where(.is-style-card-1-4, .is-style-card-1-5, .is-style-card-1-7, .is-style-card-txt) .blogcard-title {
    margin-bottom: 0;
}

/* 特定スタイルのタイトルを2行に制限 */
:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-4, .is-style-card-1-5) .blogcard-title,
[class*="is-style-card-2"] .blogcard-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-5) .blogcard-title,
[class*="is-style-card-2"] .blogcard-title {
    -webkit-line-clamp: 2;
}

.is-style-card-1-4 .blogcard-title {
    -webkit-line-clamp: 3;
}

/* ブログカードスニペットの行制限と透明度 */
:where(.is-style-card-1-2, .is-style-card-1-6) .blogcard-snippet {
    -webkit-line-clamp: 2;
}

/* 特定スタイルのブログカードフッターを非表示 */
:where(
    .is-style-card-1-3,
    .is-style-card-1-4,
    .is-style-card-1-5,
    .is-style-card-1-6,
    .is-style-card-1-7,
    .is-style-card-txt,
    .is-style-card-2-2,
    .is-style-card-2-3
) .blogcard-footer {
    display: none;
}

/* スタイルによってスニペットを非表示 */
:where(
    .is-style-card-1-4,
    .is-style-card-1-5,
    .is-style-card-1-7,
    .is-style-card-txt,
    .is-style-card-2-3
) .blogcard-snippet {
    display: none;
}

/* 「続きを読む」ボタンを追加 */
:where(.is-style-card-1-2, .is-style-card-1-5, .is-style-card-2-3) .blogcard::after {
    display: block;
    content: 'Read More';
    color: #fff;
    background-color: var(--main-color);
    font-size: 12px;
    border-radius: 2px;
    z-index: 1;
}

:where(.is-style-card-1-2, .is-style-card-1-5) .blogcard::after {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: fit-content;
    padding: 0.3em 2em;
}

.is-style-card-2-3 .blogcard::after {
    position: relative;
    width: 100%;
    text-align: center;
    padding: .5em 0;
}

.is-style-card-2-3 .blogcard-content {
    min-height: 60px;
}

/* 「続きを読む」ボタンのホバー時の透明度 */
:where(.is-style-card-1-2, .is-style-card-1-5, .is-style-card-2-3) a.blogcard-wrap:hover .blogcard::after {
    opacity: .8;
}

/* style-6, style-7, テキストリンクでサムネイルを非表示に */
:where(.is-style-card-1-6, .is-style-card-1-7, .is-style-card-txt) .blogcard-thumbnail {
    display: none;
}

/* 特定のスタイルでブログカードコンテンツのマージンと最小高さをリセット */
:where(.is-style-card-1-6, .is-style-card-1-7, .is-style-card-txt) .blogcard-content {
    margin-left: 0;
    min-height: unset;
}

/* テキストリンク設定 */
.is-style-card-txt .a-wrap.blogcard-wrap {
    display: flex;
    width: 100%;
    background-color: unset;
}

.is-style-card-txt .blogcard {
    border-width: 0;
    padding: 0;
}

.is-style-card-txt .blogcard-label {
    display: none;
}

.is-style-card-txt .blogcard-title {
    color: #757F96;
}

.is-style-card-txt .blogcard-title:hover {
    text-decoration: underline;
}

/* アイコン追加 */
.is-style-card-txt .blogcard-content {
    display: flex;
    align-items: center;
}

.is-style-card-txt .blogcard-content::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c1";
    font-weight: bold;
    margin:0 5px;
    color: var(--cocoon-text-color);
}

@media screen and (max-width: 834px) {
    .is-style-card-txt .blogcard-title {
        font-size: .9rem;
    }
}

/* 縦型スタイル設定 */
[class*="is-style-card-2"] .blogcard-wrap {
    max-width: 320px;
}

[class*="is-style-card-2"] .blogcard {
    display: flex;
    flex-direction: column;
}

[class*="is-style-card-2"] .blogcard-thumbnail {
    float: none;
    margin: 0 0 5px;
    width: 100%;
}

[class*="is-style-card-2"] .blogcard-content {
    margin-left: 0;
}

/* ブロックボックス内のブログカード調整 */
.block-box .blogcard-wrap {
    width: 100%;
    background-color: transparent;
}

.block-box .a-wrap.blogcard-wrap:hover {
    box-shadow: none;
}

.block-box .blogcard {
    border-width: 0;
    padding: 0;
}

.block-box .blogcard-label {
    display: none;
}

.block-box .blogcard::after {
    bottom: 0;
    right: 0;
}



/************************************
** サイドバー追尾目次
************************************/
.sidebar-scroll{
  top:15px !important;
}
.sidebar h3{
  font-size:0.9em;
  padding: 7px 12px;
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
.sidebar .toc{
  padding: 0;
  width:100%;
}
.sidebar .toc-content {
  overflow-y: scroll;
  max-height: 390px;
  background: #fff;
  padding: 0.5em 1.5em;
}
.sidebar .toc li{
  line-height:1.6;
  margin-bottom: 1em;
  font-size:0.85rem;
  color:#3cb8f1;
}
.sidebar .toc-content > ol  > li,.sidebar .toc-content > ul  > li{
  font-weight:600;
  padding-left: 0.5em;
}
.sidebar .toc-content a{
  letter-spacing:0.5px;
}
.sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol {
  margin: 1em 0;
  list-style-type:none;
  font-weight:500;
}
@media screen and (max-width: 768px){
  .sidebar-menu-button .widget_toc{
    display:none;
  }
}



/* リンクカード */
.pb-btn{
  margin: 3em auto;
  max-width:500px;
  width:80%;
  position:relative;
}
.pb-btn p{
  margin:0 !important;
  padding:0 !important;
}
.pb-btn a{
  display:block;
  padding:1.5em 2em 1.3em;
  color:#333 !important;
  background:#FAFAFA;
  border:2px solid #777;
  font-size:16px !important;
  font-weight:600;
  position:relative;
  transition:all 0.2s;
  text-decoration:none;
}
.pb-btn .pb-btn__text{
  max-width: 90%;
  display: block;
  line-height:1.8;
}
.pb-btn .pb-btn__label{
  background: #EE8F81;
  color: #fff;
  display: inline-block;
  padding: 0.5em 1em !important;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position:absolute;
  top: -12px;
  left: 23px;
  z-index: 1;
}
.pb-btn .pb-btn__add{
  font-size:12px !important;
  letter-spacing:0.5px;
  margin: 7px auto 0 !important;
  max-width:90%;
  color: #EE8F81;
  font-weight:600;
  text-align:center;
}
.pb-btn a:after{
  position: absolute;
  content: "";
  display: inline-block;
  right: 7%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}
.pb-btn a:hover{
  border-color:#EE8F81;
  transition:0.2s;
  text-decoration:none;
  opacity:1;
}
@media screen and (max-width:600px) {
  .pb-btn{
    width:90%;
  }
  .pb-btn a {
    padding: 1.3em 1.3em 1.2em;
    font-size:14px !important;
  }
  .pb-btn .pb-btn__label{
    left:14px;
  }
  .pb-btn .pb-btn__add{
    text-align:left;
  }
}



.list-6{
   counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0;
}
.list-6 li { 
   border-bottom:2px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em;
}
.list-6 li:last-child { 
   border:none;
}
.list-6 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #ffa952; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}



.list-box-2{
　　　background: #fef8f9;/* 背景色 */
　　　border-radius: 4px;
　　　max-width: 600px;
 　padding: 2em;
　　　margin:0 auto;
　　　border:1px solid;
　　　border-color:#f27398; /* 線の色 */
}
@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}





/************************************
****　SNSシェアボタン
************************************/
.sns-share{
margin: 0 0 24px ;
}
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
letter-spacing:.3em;
border-radius:20px;
border: 0;
padding: 0;
background-color:#3f5569;/*SHARE 背景色の変更はこちら*/
color:#fff;
display: inline-block;
width: 40%;
}
.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {
margin:20px 0 10px 0;
}
.sns-share.ss-high-and-low-lc a .button-caption.button-caption{
display:none;
}
.sns-share-buttons {
padding-right:10%;
padding-left:10%;	
}
.sns-share-buttons a {		
transition:0.5s;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 13%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 25px;
}
@media (max-width:480px){
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
width: 55%;
}
.sns-share-buttons {
padding-right:5%;
padding-left:5%;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 15%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 20px;
}
}




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

/* トグルボタン（共通） ---------------------------- */
[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"; /* ▲ */
}





/* 見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
   background-color: transparent; /* 背景色を透明に */
   border: none; /* 枠線なし */
   border-radius: 0; /* 角の丸みなし */
}






/*H2見出し*/
main h2.wp-block-heading {
    color: #576965;/*文字色*/
    font-size: 20px;
    padding: 30px 20px 15px;/*文字回りの余白（上 左右 下）*/
    display: block;
    position: relative;
}
main h2.wp-block-heading:before {
    content: '';
    background: #ffb6c1;/*背景色*/
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    position: absolute;
    top: 0px;
    left: 6px;
    z-index: -1;
    transform: rotate(1.5deg);/*背景影部の回転*/
}
main h2.wp-block-heading:after {
    content: '';
    background: #fff;/*背景色（白）*/
    border: 3px solid #ffb6c1;/*背景白部の囲み線（太さ 実線 色*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -5px;
    z-index: -1;
    transform: rotate(-.5deg);/*背景白部の回転*/
}
/*H3見出し*/
main h3.wp-block-heading {
    color: #576965;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 15px 15px 20px;/*文字回りの余白（上 左右 下）*/
    display: block;
    background-image: linear-gradient(transparent 85%, #ffb6c1 50%);/*下線含めた背景色*/
}
/*H4見出し*/
main h4.wp-block-heading {
    color: #576965;/*文字色*/
    font-size: 16px;/*文字サイズ*/
    display: block;
    position: relative;
    padding: 12px 40px;/*文字回りの余白（上下 左右）*/
}
main h4.wp-block-heading:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;/*チェックマークの太さ*/
    font-size: 30px;/*チェックマークのサイズ*/
    color: #ffb6c1;/*チェックマークの色*/
    left: 0;
    top: 0;
    content:"\f00c";
    position: absolute;
}





/* サイドバーの見出しの背景色 */
.sidebar h2 {
    background-color: #ffb6c1 !important;
}

/* サイドバーの見出しの文字色 */
.sidebar h2 a {
    color: #ffffff !important;
}