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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*
 * 記事本文
 * 画像の多い記事でも窮屈に見えないよう、本文の行間と各要素の余白を
 * 記事エリア内だけで調整する。
 */
.article .entry-content {
  color: #333;
  font-size: 17px;
  line-height: 1.9;
}

.article .entry-content > * {
  margin-bottom: 1.6em;
}

.article .entry-content p {
  margin-top: 0;
}

.article .entry-content figure,
.article .entry-content .wp-block-image {
  margin-top: 2em;
  margin-bottom: 2em;
}

.article .entry-content figcaption {
  margin-top: 0.65em;
  color: #66706a;
  font-size: 0.82em;
  line-height: 1.6;
  text-align: center;
}

/*
 * H2
 * Cocoon標準の大きな面装飾を外し、左の緑ラインを使った
 * シンプルで視認性の高い見出しにする。
 */
.article .entry-content h2 {
  margin-top: 3.2em;
  margin-bottom: 1.4em;
  padding: 0.25em 0 0.25em 0.8em;
  border: 0;
  border-left: 5px solid #86cfcf;
  border-radius: 0;
  background: #e2f3f3;
  color: #26332c;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.55;
}

/*
 * H3
 * 細い緑の下線だけを残し、H2より控えめに区切る。
 */
.article .entry-content h3 {
  margin-top: 2.6em;
  margin-bottom: 1.2em;
  padding: 0 0 0.45em;
  border: 0;
  border-bottom: 2px solid #a9cdb9;
  border-radius: 0;
  background: transparent;
  color: #304238;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.6;
}

/* H4以下は本文になじむ最小限のアクセントにする。 */
.article .entry-content h4 {
  margin-top: 2.2em;
  margin-bottom: 1em;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3f6f55;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.7;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .article .entry-content {
    font-size: 16px;
    line-height: 1.85;
  }

  .article .entry-content > * {
    margin-bottom: 1.4em;
  }

  .article .entry-content figure,
  .article .entry-content .wp-block-image {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }

  .article .entry-content h2 {
    margin-top: 2.7em;
    margin-bottom: 1.2em;
    padding-left: 0.7em;
    font-size: 1.3em;
  }

  .article .entry-content h3 {
    margin-top: 2.3em;
    margin-bottom: 1em;
    font-size: 1.15em;
  }

  .article .entry-content h4 {
    margin-top: 2em;
  }
}