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


/********** ここから編集 **********/
@font-face {
  font-family: 'Yasashisa Antique';
  src: url('/wp-content/themes/cocoon-child-master/fonts/07YasashisaAntique.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 全体のフォント・文字色・文字間隔 */
body,
body * {
  font-family: 'Yasashisa Antique', serif !important;
  color: #444 !important;
  letter-spacing: 0.05em !important;
}

/* 見出しの色（濃いネイビー） */
.article h1,
.article h2 {
  font-family: 'Yasashisa Antique', serif !important;
  font-size: 1.4em;
  color: #2c3547;
  padding-bottom: 0.5em;
  margin: 2em 0 1em;
  border-bottom: 2px dashed rgba(100, 100, 100, 0.4);
  width: 100%;
  display: block;
  background: none; /* 背景色を消す */
}

.article h3,
.article h4,
.article h5,
.article h6 {
  color: #2c3547 !important;
}

/* ストロングタグ */
.article strong {
  font-family: 'Yasashisa Antique', serif !important;
  font-weight: 520 !important;
  letter-spacing: 0.05em;

  background-image: repeating-linear-gradient(
    45deg,
    rgba(180, 200, 220, 0.1),
    rgba(180, 200, 220, 0.1) 4px,
    transparent 4px,
    transparent 8px
  );
  background-color: rgba(235, 240, 245, 0.2);

  padding-top: 0.35em;     /* 少し増やす */
  padding-bottom: 0.10em;  /* 減らす（←ここ重要） */
  padding-left: 0.4em;
  padding-right: 0.4em;

  display: inline-block;
  line-height: 1.6;
  vertical-align: baseline; /* middleだとズレるのでbaselineに */
  border-radius: 2px;
}

/* pタグの文字色だけ、薄めのネイビーに上書き */
.article p {
  color: #4a5a6a !important;
}

.entry-content strong,
.article strong,
.article p strong,
.article span strong {
  color: #4a5a6a !important;
}