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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* =========================
   tsurenakutatte 見出し
   H2〜H4
========================= */


/* H2 */
.article h2 {
  font-size: clamp(1.35rem, 4.5vw, 1.65rem);
  line-height: 1.55;
  font-weight: 700;

  margin: 2.25em 0 1em;
  padding: 0.72em 0.9em;

  color: #30363B;
  background: #F3F6F9;

  border: none;
  border-left: 5px solid #243E5A;
  border-radius: 3px;
}


/* H3 */
.article h3 {
  font-size: clamp(1.18rem, 4vw, 1.35rem);
  line-height: 1.55;
  font-weight: 700;

  margin: 2em 0 0.9em;
  padding: 0.22em 0.4em 0.38em 0.72em;

  color: #30363B;
  background: transparent;

  border: none;
  border-left: 3px solid #243E5A;
  border-bottom: 1px solid #D7DEE6;
}


/* H4 */
.article h4 {
  font-size: clamp(1.05rem, 3.6vw, 1.15rem);
  line-height: 1.6;
  font-weight: 700;

  margin: 1.7em 0 0.75em;
  padding: 0;

  color: #35404A;
  background: transparent;

  border: none;
}


/* H4 左の小さな丸 */
.article h4::before {
  content: "●";

  display: inline-block;
  margin-right: 0.7em;

  color: #243E5A;
  font-size: 0.45em;
  vertical-align: 0.25em;
}


.button a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #cccccc;
  border-radius: 50vh;
}

.button a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button a:hover {
  text-decoration: none;
  background-color: #bbbbbb;
}







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

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

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