@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){
  /*必要ならばここにコードを書く*/
}

/************************************
** 以下、自分で追記
************************************/
/* 投稿見出し */
h2 {
   position: relative;
   background-color:#ffb7a5;
   color:#fff;
}
h2:before,
h2:after {
   position: absolute;
   left: 0;
   width: 100%;
   content: '';
   border-top: 1px solid #fff; /*ライン：太さ・実線・色 */
}
h2:before {
   top: 3px;
}
h2:after {
   bottom: 3px;
}

/*固定ページの投稿日非表示*/
.post-56 .date-tags,
.post-2 .date-tags,
.post-3 .date-tags {
display: none;
}

/* プロフィール部分のp1を小さく */
p.p1 {
    font-size: 14px;       /* 文字サイズを小さく */
    color: #555;           /* 文字色も少し落ち着かせる例 */
}

/* 本文全体を枠で囲む */
.article {
  border: 1px solid #ededed;   /* 線の色と太さ（例：薄いグレーの2px線） */
  border-radius: 2px;       /* 角を少し丸める（不要なら削除） */
  padding: 30px;            /* 枠内の余白 */
  background-color: #fff;   /* 背景を白にする（任意） */
}
/* スマホ表示用 */
@media screen and (max-width: 768px) {
  .article { 
    border: none;               /* 枠線を消す */
    border-radius: 0;           /* 角丸を無効化 */
	padding: 0;               /* 余白を小さく */
 }
}
/* 投稿一覧カードに影をつける */
.entry-card-wrap {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* ふんわり影 */
  border-radius: 2px;                         /* カードの角を丸く */
  overflow: hidden;                           /* はみ出し防止 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー時に少し浮かせる演出 */
.entry-card-wrap:hover {
  background-color: #fff; /* ホバー時の背景色 */
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* ───────────────
　目次ボックスを本文幅いっぱいに
──────────────── */
.toc, .entry-content .toc {
	width: 100%;
	box-sizing: border-box;
	margin: 20px 0;
	padding: 20px 50px;
	border: 2px solid #f9dfe3; /* 淡いピンクの枠線 */
	border-radius: 2px;
}
.toc-content{
	padding: 0 !important;
}
/* 目次タイトル部分 */
.toc-title {
  color: #ffb7a5;        /* タイトル文字色 */
  font-size: 28px;       /* 文字サイズ */
  font-weight: bold;     /* 太字 */
  padding: 8px 12px;
  border-radius: 6px 6px 0 0;
  text-align: left;
}
/* 開く閉じるボタン */
.toc-title::after {
  font-size: 0.5em;
  color: #9fa0a0;
}

/* 目次リンクテキスト */
.toc-list a {
	font-size: 18px;
    color: #777;           /* 通常テキスト色 */
    text-decoration: none;
    transition: color 0.2s;
	line-height: 2em;
}
/* 目次内の番号（数字部分）をミントグリーンに */
.toc-list li::marker {
    color: #a8d5ba;  /* 好きな色に変更 */
	font-weight: bold;
}
/* ホバー時の色 */
.toc-list a:hover {
  color: #ffb7a5;        
}

/* スマホ表示用 */
@media screen and (max-width: 768px) {
.toc, .entry-content .toc {
	padding: 10px 28px;
  }
.toc-title {
	font-size: 20px;
  }
.toc-list a {
	font-size: 16px;
  }
}

/* SNSシェアボタンの枠組み */
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: flex-start; /* 左寄せ */
	gap: 12px; /* ボタン間の余白 */
	flex-wrap: wrap; /* 折り返す（ボトムでも対応） */
}

/* シェアボタンの形 */
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a {
	width: 35px; /* 横幅 */
	height: 35px; /* 高さ */
	margin-right: 4px; /* 右側の余白 */
	margin-left: 4px; /* 左側の余白 */
	border-radius: 50%; /* 丸み */
	border: none; /* ボタンの枠線なし */
}

/* シェアボタンのアイコン */
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 30px; /* アイコンのサイズ */
}
/* シェアボタンのキャプション（テキスト） */
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /* 非表示 */
}
/* シェアメッセージ */
.sns-share-message {
	text-align: left;
}
/* スマホ表示用 */
@media screen and (max-width: 768px) {
  .sns-share.ss-top.ss-col-6 .sns-buttons, .sns-share.ss-bottom.ss-col-6 .sns-buttons, .sns-share.ss-top.ss-col-5 .sns-buttons, .sns-share.ss-bottom.ss-col-5 .sns-buttons {
    column-gap: 4.0%;
    }
  .sns-share.ss-top .sns-buttons a,
  .sns-share.ss-bottom .sns-buttons a {
	width: 22px; /* 横幅 */
	height: 22px; /* 高さ */
	}
  .sns-share.ss-top .sns-buttons a .social-icon,
  .sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 24px; /* アイコンのサイズ */
	}
}