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

/*************************************************
 * WAN STAY – Headings (Shifted Style)
 * H1→H2に／H2→H3にデザイン移動
 *************************************************/

/* リセット（Cocoon＆Gutenberg共通） */
.article h1, .article h2, .article h3, .article h4, .article h5,
.entry-content h1.wp-block-heading,
.entry-content h2.wp-block-heading,
.entry-content h3.wp-block-heading,
.entry-content h4.wp-block-heading,
.entry-content h5.wp-block-heading {
  background: none;
  border: none;
  padding: 0;
  margin: 1.6em 0 .9em;
  color: #222;
  line-height: 1.35;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
}

/* = H1：もっとシンプルに（下線なし） = */
.article h1,
.entry-content h1.wp-block-heading {
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 34px);
}

/* = H2：旧H1の下線デザインを採用 = */
.article h2,
.article h2.wp-block-heading,
.entry-content h2.wp-block-heading {
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  padding-bottom: .4em;
  border-bottom: 3px solid #FA6F45;
}

/* = H3：旧H2の左バー型を採用 = */
.article h3,
.article h3.wp-block-heading,
.entry-content h3.wp-block-heading {
  position: relative;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  padding-left: .9em;
}
.article h3::before,
.article h3.wp-block-heading::before,
.entry-content h3.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 6px;
  border-radius: 3px;
  background: #FA6F45;
}

/* = H4：下線シンプル（少し細め） = */
.article h4,
.article h4.wp-block-heading,
.entry-content h4.wp-block-heading {
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 22px);
  padding-bottom: .25em;
  border-bottom: 2px solid rgba(0, 0, 0, .12);
}

/* = H5：左ボーダーのみ（最小） = */
.article h5,
.article h5.wp-block-heading,
.entry-content h5.wp-block-heading {
  font-weight: 700;
  font-size: 15px;
  padding-left: .6em;
  border-left: 3px solid rgba(0, 0, 0, .15);
}


/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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