@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く（全てここに集約）
************************************/

/* =========================
   全体背景
========================= */
.header-container,
.main,
.sidebar,
.footer {
  background-color: #fff6e4;
}

/* =========================
   サイドバー見出し
========================= */
.sidebar h3{
  background-color:#f9d2d9; /*好きな背景色にする*/
  padding:16px 10px;
  margin:16px 0;
}

/* =========================
   Hover Animation
========================= */
.a-wrap{
  color: inherit;
}
.a-wrap:hover{
  background:none;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -5px rgba(0,0,0,.2);
  color: inherit;
}

/* =========================
   内部ブログカード
========================= */
.internal-blogcard::after{
  content: '記事を読む \00bb'; /* 内部リンク右下枠の文言 */
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #ffd242; /* 内部リンク右下枠の背景色 */
  padding: .4em 3em;
  font-weight: bold;
  color: #fff; /* 内部リンク右下枠の文字色 */
  border-radius: 2px;
}
.blogcard-snippet{
  display:none;
}
.internal-blogcard-footer{
  display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

/* =========================
   ヘッダーロゴ非表示
========================= */
.logo-header{
  display: none;
}

/* =========================
   記事内：H2見出し
========================= */
.article h2{
  border: none;
  background:#ffb6c1;
  box-shadow:0 0 0 5px #ffb6c1;
  border: dashed 2px #fff;
  padding: 0.5em;
  color: #4a4a4a;
  text-shadow: 1px 2px 2px #f0f8ff;
  font-family:"M PLUS Rounded 1c";
 
}

/* =========================
   記事内：H3（タグ風・立体ボタンデザイン）
   ★影をつけて、ボタンのようにポコッと浮き出させます
========================= */
.article h3 {
  /* ▼ 本体（前面の黄色いタグ部分） */
  background: #ffc354;       /* 背景色（濃い黄色） */
  border: none;
  border-left: 6px dotted #fffcf4; /* 左のドット（薄いクリーム色） */
  border-radius: 3px;        /* 角丸 */
  
  /* 文字設定 */
  color: #696969;            /* グレーの文字 */
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  
  /* 文字の白い影（へこみ感・読みやすさアップ） */
  text-shadow: 1px 1px 0 #ffffff; 
  
  /* ★追加：ボックス全体の影（薄いグレーでぼかす） */
  /* 右へ3px、下へ3px、ぼかし5px、色は薄い黒（グレーに見えます） */
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15); 
  
  /* 幅と余白設定 */
  display: block;            
  width: fit-content;        /* 文字幅に合わせる */
  padding: 10px 15px;        
  margin-top: 1em !important;
  margin-bottom: 1.5em !important; 

  /* 背面の枠線を配置するための基準点 */
  position: relative;
  overflow: visible;
}

/* ▼▼ 背面の斜めずらし枠線（そのまま維持） ▼▼ */
.article h3::before {
  content: "";               
  position: absolute;        
  z-index: -1;               /* 本体の後ろへ */
  
  top: 6px;                  
  left: 6px;                 
  width: 100%;               
  height: 100%;              
  
  border: 2px solid #d99a29; /* 濃い黄色の線 */
  background: transparent;   
  border-radius: 4px;        
  
  transform: rotate(2deg);   /* 斜めにする */
}



/* =========================
   記事内：H4見出し（アイコン位置修正版）
========================= */
.article h4{
  border: none; 
  background: none; 
  box-shadow: none; 
  
  /* アイコン分のスペース確保 */
  padding: 8px 10px 8px 1.5em; 
  
  color: #696969;
  font-size: 18px; 
  position: relative; 
  
  margin: 1em 0 1em;
}

/* アイコンの設定 */
.article h4:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058"; 
  position: absolute;
  font-size: 18px;
  
  left: 0; 
  
  /* ★修正ポイント：これで絶対にど真ん中に来ます */
  top: 50%;
  transform: translateY(-50%); 
  
  color: #ffa500; 
}


/* =========================
   記事内：H5見出し（インデント・破線・薄いマーカー・太字なし）
========================= */
.article h5 {
  background: none;
  border: none;
  box-shadow: none;

  color: #696969; 
  font-size: 18px; 
  
  /* ★ここが修正ポイント！「太字にしない」と命令しないと太字のままになります */
  font-weight: normal; 

  display: block;         
  width: fit-content;     
  
  margin-left: 1.5em;       

  /* 薄い黄色のマーカー */
  background: linear-gradient(transparent 60%, #fff4c1 60%);
  
  /* 破線 */
  border-bottom: 2px dashed #ffc354; 

  padding: 4px 10px 4px 0; 
  
  position: relative;
  line-height: 1.5;

  margin-top: 1.5em;
  margin-bottom: 1em;
}

/* =========================
   エントリーカードテキスト設定
========================= */
.entry-card-title{
  font-size:1.1em;
  margin-bottom:10px;
  color: #696969;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #fcbc26;
  border-bottom: solid 2px #fcbc26;
  background: -webkit-repeating-linear-gradient(-45deg, #ffe9e9, #ffe9e9 3px,#ffffff 3px, #ffffff 7px);
  background: repeating-linear-gradient(-45deg, #ffe9e9, #ffe9e9 3px,#ffffff 3px, #ffffff 7px);
}

/* =========================
   エントリータイトルカスタマイズ
========================= */
.entry-title:before,
.entry-title:after{
  content:none !important;
}
.entry-title {
  font-size: 1.5rem;
  margin: 16px 0;
  line-height: 1.3;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
}

/*834px以下*/
@media screen and (max-width: 834px){
}

/*480px以下*/
@media screen and (max-width: 480px){
}

/* =========================
   H3の直後に来る「段落（文章）」の余白調整
========================= */
.article h3 + p,
.entry-content h3 + p {
  /* 文章が持っている上の余白を消します */
  margin-top: 0 !important; 
}

/* =========================
   H4の直後に来るH5の余白調整
========================= */
.article h4 + h5,
.entry-content h4 + h5 {
  /* ブロック要素になったので、マイナスが効くようになります！ */
  margin-top: -20px !important; 
}

/* =========================
   H5の直後に来る「段落（P）」をインデントして揃える
========================= */
.article h5 + p,
.entry-content h5 + p {
  margin-left: 1.5em; /* H5と同じ分だけ左を空ける */
}