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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ==================================================
   01. サイト全体
================================================== */

body {
  background-color: #f6f7f8;
  color: #333;
  font-size: 16px;
  line-height: 1.9;
}

/* 全体の文字表示を自然に */
body,
input,
textarea,
button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================================================
   02. メインコンテンツ
================================================== */

.main {
  background-color: #fff;
  border-radius: 8px;
}

/* PC時の本文まわりに少し余裕を持たせる */
.article {
  color: #333;
  line-height: 1.9;
}

/* ==================================================
   03. 本文
================================================== */

/* 段落 */
.article p {
  margin-top: 0;
  margin-bottom: 1.8em;
}

/* 太字 */
.article strong {
  font-weight: 700;
}

/* リンク */
.article a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* 画像 */
.article img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* リスト */
.article ul,
.article ol {
  margin-top: 1em;
  margin-bottom: 1.8em;
  padding-left: 1.8em;
}

.article li {
  margin-bottom: 0.6em;
  line-height: 1.8;
}

/* 引用 */
.article blockquote {
  margin: 2em 0;
  padding: 18px 20px;
  background-color: #f7f8fa;
  border-left: 4px solid #c7cdd3;
  color: #555;
}

/* ==================================================
   04. H2見出し
================================================== */

.article h2 {
  margin-top: 3em;
  margin-bottom: 1.4em;
  padding: 15px 18px;

  background-color: #f3f6f8;
  border: none;
  border-left: 4px solid #5f7f99;
  border-radius: 4px;

  color: #2f3337;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
}

/* Cocoon標準装飾の影響を抑える */
.article h2::before,
.article h2::after {
  display: none;
}

/* ==================================================
   05. H3見出し
================================================== */

.article h3 {
  margin-top: 2.5em;
  margin-bottom: 1.2em;
  padding: 0 0 10px;

  background: none;
  border: none;
  border-bottom: 2px solid #e2e6e9;
  border-radius: 0;

  color: #333;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.5;
}

.article h3::before,
.article h3::after {
  display: none;
}

/* ==================================================
   06. H4見出し
================================================== */

.article h4 {
  margin-top: 2.2em;
  margin-bottom: 1em;
  padding: 4px 0 4px 12px;

  background: none;
  border: none;
  border-left: 3px solid #aebbc7;
  border-radius: 0;

  color: #333;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.5;
}

.article h4::before,
.article h4::after {
  display: none;
}

/* ==================================================
   07. スマホ調整
================================================== */

@media screen and (max-width: 768px) {

  body {
    font-size: 15px;
  }

  .main {
    border-radius: 0;
  }

  .article {
    line-height: 1.85;
  }

  .article p {
    margin-bottom: 1.6em;
  }

  .article h2 {
    margin-top: 2.5em;
    margin-bottom: 1.2em;
    padding: 13px 14px;
    font-size: 1.4em;
  }

  .article h3 {
    margin-top: 2.2em;
    font-size: 1.25em;
  }

  .article h4 {
    margin-top: 2em;
    font-size: 1.1em;
  }
}

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

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

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