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

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

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

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

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


/* 新着記事一覧（投稿カード）のアイキャッチ巨大化を抑える */
.entry-card-thumb img,
.entry-card-thumb-image{
  width: 100%;
  height: 180px;
  object-fit: contain; /* ロゴでも切れずに収まる */
  display: block;
}




/* =========================
   Article Design (Sea Beauty tone)
   対象：投稿ページ中心（single）
========================= */
:root{
  --sb-teal:#2f6f78;
  --sb-line:#e7ecef;
  --sb-muted:#6b7b7d;
  --sb-bg:#ffffff;
  --sb-soft:#f3fbfb;
}

/* 投稿ページの読みやすい幅（Cocoonの構造差があるので広めに対象） */
body.single .entry-content,
body.single .article,
body.single .post-content,
body.single .main{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* タイトル周り */
body.single h1,
body.single .entry-title{
  letter-spacing: .02em;
  line-height: 1.25;
}
body.single .date,
body.single time{
  color: var(--sb-muted);
}

/* 本文の基本 */
body.single .entry-content{
  font-size: 16px;
  line-height: 1.9;
}
body.single .entry-content p{
  margin: 0 0 1.2em;
}
body.single .entry-content a{
  color: var(--sb-teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,111,120,.35);
}
body.single .entry-content a:hover{
  opacity: .75;
}

/* 見出し */
body.single .entry-content h2{
  margin: 2.2em 0 0.9em;
  padding: .35em 0 .35em .9em;
  border-left: 4px solid var(--sb-teal);
  border-bottom: 1px solid var(--sb-line);
  letter-spacing: .02em;
}
body.single .entry-content h3{
  margin: 1.8em 0 0.7em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--sb-line);
  letter-spacing: .02em;
}
body.single .entry-content h4{
  margin: 1.6em 0 0.6em;
  color: var(--sb-teal);
}

/* 箇条書き */
body.single .entry-content ul,
body.single .entry-content ol{
  margin: 0 0 1.2em 1.2em;
}
body.single .entry-content li{
  margin: .35em 0;
}

/* 画像 */
body.single .entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
body.single .entry-content figure{
  margin: 1.4em 0;
}

/* 引用 */
body.single .entry-content blockquote{
  background: var(--sb-soft);
  border-left: 4px solid rgba(47,111,120,.45);
  margin: 1.4em 0;
  padding: 1em 1.1em;
  color: #334;
}

/* 表 */
body.single .entry-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  background: #fff;
  border: 1px solid var(--sb-line);
}
body.single .entry-content th,
body.single .entry-content td{
  border-bottom: 1px solid var(--sb-line);
  padding: 12px 14px;
  vertical-align: top;
}
body.single .entry-content th{
  background: #f7f9fb;
  font-weight: 600;
}

/* 区切り線 */
body.single .entry-content hr{
  border: none;
  border-top: 1px solid var(--sb-line);
  margin: 2em 0;
}

/* 目次（もし出してるなら） */
body.single .toc,
body.single #toc,
body.single .ez-toc-container{
  border: 1px solid var(--sb-line);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
}
body.single .toc a,
body.single .ez-toc-container a{
  border-bottom: none;
}


/* =========================
   Article Design (Sea Beauty tone)
   対象：public-page（現状の投稿/固定の表示側）
========================= */
:root{
  --sb-teal:#2f6f78;
  --sb-line:#e7ecef;
  --sb-muted:#6b7b7d;
  --sb-soft:#f3fbfb;
}

/* 本文幅（読みやすく） */
body.public-page .main,
body.public-page .content,
body.public-page .entry-content,
body.public-page article{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* 本文 */
body.public-page .entry-content{
  font-size: 16px;
  line-height: 1.9;
}
body.public-page .entry-content p{
  margin: 0 0 1.2em;
}

/* リンク */
body.public-page .entry-content a{
  color: var(--sb-teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,111,120,.35);
}
body.public-page .entry-content a:hover{ opacity:.75; }

/* 見出し */
body.public-page .entry-content h2{
  margin: 2.2em 0 0.9em;
  padding: .35em 0 .35em .9em;
  border-left: 4px solid var(--sb-teal);
  border-bottom: 1px solid var(--sb-line);
}
body.public-page .entry-content h3{
  margin: 1.8em 0 0.7em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--sb-line);
}
body.public-page .entry-content h4{
  margin: 1.6em 0 0.6em;
  color: var(--sb-teal);
}

/* 画像 */
body.public-page .entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 引用 */
body.public-page .entry-content blockquote{
  background: var(--sb-soft);
  border-left: 4px solid rgba(47,111,120,.45);
  margin: 1.4em 0;
  padding: 1em 1.1em;
}

/* 表 */
body.public-page .entry-content table{
  width:100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  border: 1px solid var(--sb-line);
  background:#fff;
}
body.public-page .entry-content th,
body.public-page .entry-content td{
  border-bottom: 1px solid var(--sb-line);
  padding: 12px 14px;
  vertical-align: top;
}
body.public-page .entry-content th{
  background:#f7f9fb;
  font-weight:600;
}


:root{
  --sb-teal:#2f6f78;
  --sb-line:#e7ecef;
  --sb-muted:#6b7b7d;
  --sb-soft:#f3fbfb;
}

/* 読みやすい本文幅 */
body.single .main,
body.single .content,
body.single .entry-content,
body.single article{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 18px;
}

/* 本文 */
body.single .entry-content{
  font-size: 16px;
  line-height: 1.9;
}
body.single .entry-content p{ margin: 0 0 1.2em; }

/* リンク（サイトの青緑） */
body.single .entry-content a{
  color: var(--sb-teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,111,120,.35);
}
body.single .entry-content a:hover{ opacity:.75; }

/* 見出し */
body.single .entry-content h2{
  margin: 2.2em 0 .9em;
  padding: .35em 0 .35em .9em;
  border-left: 4px solid var(--sb-teal);
  border-bottom: 1px solid var(--sb-line);
}
body.single .entry-content h3{
  margin: 1.8em 0 .7em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--sb-line);
}
body.single .entry-content h4{ color: var(--sb-teal); }

/* 引用 */
body.single .entry-content blockquote{
  background: var(--sb-soft);
  border-left: 4px solid rgba(47,111,120,.45);
  padding: 1em 1.1em;
  margin: 1.4em 0;
}

/* 表 */
body.single .entry-content table{
  width:100%;
  border-collapse: collapse;
  border:1px solid var(--sb-line);
  margin:1.4em 0;
}
body.single .entry-content th,
body.single .entry-content td{
  border-bottom: 1px solid var(--sb-line);
  padding: 12px 14px;
}
body.single .entry-content th{
  background:#f7f9fb;
  font-weight:600;
}



/* =========================
   Sea Beauty Heading Styles
   ========================= */
:root{
  --sb-teal:#2f6f78;
  --sb-teal2:#6fb8b6;   /* 淡い青緑（アクセント用） */
  --sb-line:#e7ecef;
  --sb-text:#1c2b2d;
}

/* 対象範囲（Cocoonでよく使われる本文領域をまとめて） */
body .entry-content h2,
body .entry-content h3,
body .entry-content h4{
  color: var(--sb-text);
  letter-spacing: .02em;
}

/* H2：左ライン＋下線（参考画像系） */
body .entry-content h2{
  margin: 2.2em 0 0.9em;
  padding: .35em 0 .35em 1em;
  border-left: 5px solid var(--sb-teal);
  border-bottom: 1px solid var(--sb-line);
  font-size: 1.45em;
  line-height: 1.35;
}

/* H2の“下線を少しだけ海っぽく”したい場合（任意でON） */
/*
body .entry-content h2{
  border-bottom: none;
  position: relative;
}
body .entry-content h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--sb-teal), var(--sb-teal2), transparent);
}
*/

/* H3：控えめに下線＋少しティール */
body .entry-content h3{
  margin: 1.8em 0 0.7em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--sb-line);
  font-size: 1.18em;
}
body .entry-content h3{
  color: #243c3f;
}

/* H4：色だけアクセント */
body .entry-content h4{
  margin: 1.4em 0 0.5em;
  font-size: 1.05em;
  color: var(--sb-teal);
}


body.single { outline: none !important; }