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

/* 背景色ありの見出しでも光らせる設定 */
.shiny-headline {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1; /* 重なり順を整える */
}

.shiny-headline {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.shiny-headline {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

/* 見出しを光らせるアニメーション */
.shiny-headline {
    position: relative;
    overflow: hidden; /* はみ出た光を隠す */
}

.shiny-headline::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4); /* 光の色と透明度 */
    transform: rotate(30deg);
    transition: none;
}

/* アニメーションの発火（5秒おきに繰り返す） */
.shiny-headline::before {
    animation: shiny-effect 5s infinite;
}

@keyframes shiny-effect {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* Cocoon見出しデザインのリセット */
.article h2,
 {
  background: none; /* 背景色なし */
  border: none;     /* 枠線なし */
  border-radius: 0; /* 丸みなし */
}

/* 記事本文内のH2見出しすべてに適用 */
.article h2 {
  position: relative;
  background: #acc9c0 !important; /* 背景色 */
  color: #fff !important;           /* 文字色 */
  padding: 15px 20px !important;
  font-weight: bold;
  margin-bottom: 30px !important;
  border: none !important;         /* 元の線を消す */
}

/* 三角形部分 */
.article h2::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 30px;
  border: 10px solid transparent;
  border-top: 10px solid #acc9c0;
}


/* 記事本文内のH3見出しを点線デザインにする */
.article h4 {
  padding: .3em 0 !important;             /* 内側の余白 */
  border-top: none !important;            /* 上の線を消す */
  border-left: none !important;           /* 左の線を消す */
  border-right: none !important;          /* 右の線を消す */
  border-bottom: dotted 6px #a5c9c1 !important; /* 下側の点線・太さ・色 */
  background: none !important;            /* 背景色を消す */
  color: #333 !important;                 /* 文字色 */
}

/* 記事本文内のH4見出しを左線デザインにする */
.article h3 {
  padding: .5em 1em !important;      /* 内側の余白 */
  border-left: solid 5px #a5c9c1 !important; /* 左線：実線・太さ・色 */
  border-top: none !important;       /* 上の線を消す */
  border-right: none !important;     /* 右の線を消す */
  border-bottom: none !important;    /* 下の線を消す */
  background: none !important;       /* 背景色を消す */
  color: #333 !important;            /* 文字色 */
}

/* 記事本文内のH5見出し：中央寄せ・下点線デザイン */
.article h5 {
  position: relative !important;
  text-align: center !important;     /* 中央寄せ */
  color: #333 !important;            /* 文字色 */
  padding: 1em 0 !important;         /* 上下の余白 */
  border: none !important;           /* 枠線をすべて消す */
  background: none !important;       /* 背景色を消す */
  font-size: 1.1em;                  /* 文字の大きさを調整（お好みで） */
}

/* 下の短い点線部分 */
.article h5::before {
  content: "" !important;
  position: absolute !important;
  border-bottom: 10px dotted #a5c9c1 !important; /* 点の太さ・種類・色 */
  width: 50px !important;            /* 点線の横幅 */
  bottom: 0 !important;              /* 一番下に配置 */
  left: 50% !important;              /* 左から50%の位置へ */
  transform: translateX(-50%) !important; /* 自身の幅の半分戻して中央に */
}

/* 記事本文内のH6見出し：先頭に丸いアクセント */
.article h6 {
  position: relative !important;
  background: none !important;            /* 背景なし */
  padding: 0 0 .3em 2.2em !important;    /* 左側の余白を少し調整 */
  color: #333 !important;                 /* 文字色 */
  line-height: 1.8 !important;            /* 行の高さ */
  border: none !important;                /* 全体の枠線を一度消す */
  border-bottom: 1px solid #ccc !important; /* 下線（薄いグレーなど） */
  font-size: 1.0em;                       /* 文字サイズを標準に設定 */
}

/* アクセント（共通設定） */
.article h6::before,
.article h6::after {
  content: '' !important;
  position: absolute !important;
  background: #a5c9c1 !important;        /* 色を他と合わせてくすみグリーンに */
  border-radius: 50% !important;         /* 正円にする */
  opacity: .6 !important;                /* 透明度 */
}

/* 大きい丸 */
.article h6::before {
  top: 0.2em !important;
  left: 0.2em !important;
  width: 1.1em !important;
  height: 1.1em !important;
  z-index: 2 !important;
}

/* 小さい丸 */
.article h6::after {
  top: 0.8em !important;
  left: 0.9em !important;
  width: 0.7em !important;
  height: 0.7em !important;
  z-index: 1 !important;
}

/* すべての見出しの文字間を一括で広げる */
.article h2, .article h3, .article h4, .article h5, .article h6 {
  letter-spacing: 0.1em !important; /* 0.1em〜0.2emくらいが読みやすいです */
}

/* マスキングテープ風ボックス */
.cstm-box-masking {
    position: relative;
    /* marginの上側を少し広めに確保します（1cm浮かせる分、余裕を持たせる） */
    margin: 3em auto 2em; 
    background-color: #F6EEEC;
    max-width: 800px;
    /* ボックスの上が見切れないように「おまじない」 */
    overflow: visible !important; 
}

/* タイトル（テープ風） */
.cstm-box-masking .box-title {
    background-image: repeating-linear-gradient(
        -45deg,
        #F6EEEC 0,
        #F6EEEC 3px,
        #fafafa 3px,
        #fafafa 6px
    );
    transform: rotate(-2deg);
    box-shadow: 0 1px 2px rgb(0 0 0 / .1);
    padding: .5em 1em;
    line-height: 1;
    position: absolute;
    /* 位置を微調整：見切れる場合はここの数値を少し下げてください */
    top: -0.8em; 
    left: 1em;
    display: inline-block;
    font-size: 0.9em;
    width: auto;
    max-width: calc(100% - 2em);
    white-space: nowrap;
    /* ここが原因で見切れることがあるので、タイトル単体のoverflowは基本不要です */
    overflow: visible; 
    text-overflow: ellipsis;
}

/* コンテンツ部分の余白 */
.cstm-box-masking .box-content {
    padding: 2.5em 2em 2em;
}

/* 段落の余白リセット */
.cstm-box-masking p {
    margin: 0;
}

/* セロテープ風ボックス */
.cstm-box-tape {
  position: relative; /* タイトル配置の基準 */
  margin: 2em auto; /* 外側余白 */
  background-color: #E6ECF2; /* ボックス背景色 */
  max-width: 800px; /* 最大幅 */
}

/* タイトル（セロテープ風） */
.cstm-box-tape .box-title {
  background-color: rgb(255 255 255 / .1); /* 透過背景色 */
  border-left: 2px dotted rgb(0 0 0 / .1); /* 左端のギザギザ */
  border-right: 2px dotted rgb(0 0 0 / .1); /* 右端のギザギザ */
  box-shadow: 0 0 5px rgb(0 0 0 / .12); /* 影 */
  transform: rotate(-2deg); /* 傾き */
  color: #666; /* 文字色 */
  padding: 10px 20px; /* 内側余白 */
  line-height: 1; /* 行の高さ */
  position: absolute; /* 親の左上に固定 */
  top: -1em; /* 上位置 */
  left: 1em; /* 左位置 */
  display: inline-block; /* 内容幅に合わせる */
  font-size: 0.9em; /* フォントサイズ */
  width: auto; /* 幅自動調整 */
  max-width: calc(100% - 2em); /* 最大幅調整 */
  white-space: nowrap; /* 折り返さない */
  overflow: hidden; /* はみ出し非表示 */
  text-overflow: ellipsis; /* 省略記号表示 */
}

/* コンテンツの余白 */
.cstm-box-tape .box-content {
  padding: 2.5em 2em 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-tape p {
  margin: 0;
}

/* バウンスアニメーションの定義 */
.anim-bounce {
  animation: bounce 1.5s infinite; /* infiniteを付けるとずっと跳ねます */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

/* ブログカードの本文（スニペット）を非表示にする */
.blogcard-snippet {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .double-ads {
    display: flex;         /* 横並びにする */
    justify-content: space-between; /* 2つの広告の間に隙間を空けて両端に寄せる */
    gap: 8px;              /* 広告間の最低限の隙間 */
    width: 100%;
  }

  .double-ads .ad-box {
    flex: 1;               /* 2つの広告を50%ずつの等幅にする */
    width: 50%;
    text-align: center;    /* 広告を中央寄せにする */
  }

  /* 広告内の画像がはみ出さないようにする対策 */
  .double-ads .ad-box img {
    max-width: 100% !important;
    height: auto !important;
  }
}