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

/************************************
** モダン配色・スペーシング調整
************************************/

/* 背景を柔らかいオフホワイトに */
body {
  background-color: #f5f5f0 !important;
}

/* 記事エリアを白+影で浮かせる */
.main {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-color: #e8e8e3;
}

/* リンク色 */
.article a {
  color: #3d6b5e;
}
.article a:hover {
  color: #2a4d43;
}

/* 見出し */
.article h2 {
  border-left: 3px solid #3d6b5e !important;
  background-color: #f8f8f5 !important;
  margin-bottom: 1em !important;
}
.article h3 {
  border-bottom-color: #e8e8e3 !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.8em !important;
}
.article h4 {
  margin-top: 1.5em !important;
  margin-bottom: 0.6em !important;
}

/* 段落・リスト */
.article p {
  margin-bottom: 1.2em !important;
  line-height: 1.9;
}
.article ul,
.article ol {
  margin-bottom: 1.2em !important;
}

/* 画像 */
.article figure {
  margin-top: 0.8em !important;
  margin-bottom: 0.8em !important;
}
.article .wp-block-image {
  margin-top: 0.8em !important;
  margin-bottom: 0.8em !important;
}
/* 画像が連続する場合の余白を詰める */
.article figure + figure {
  margin-top: 0.3em !important;
}
/* 段落→画像の余白 */
.article p + figure {
  margin-top: 0.5em !important;
}
/* 画像→段落の余白 */
.article figure + p {
  margin-top: 0.5em !important;
}
/* 見出し直後の余白を詰める */
.article h2 + p,
.article h3 + p,
.article h4 + p {
  margin-top: 0 !important;
}

/* YouTube埋め込み */
.article .wp-block-embed {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}
.article .video-container {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}

/* 商品リンクボックス */
.product-item-box {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  border-radius: 8px;
  border-color: #e8e8e3;
}

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

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

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