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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.article h2 {
	margin-bottom: 1.62em;
	background: transparent;
	padding: 0 0 8px;
	border-bottom: solid 1px #ccc;
	font-size: 1.375rem; /* 約22px（16px × 1.375） */
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.article h3 {
	font-size: 1.125rem;
	line-height: 1.5;
    letter-spacing: 0.01em;
	font-weight: 500;
	padding-left: 0;
	border: none;
	position: relative;
}

.article h3::before {
	content: "ー";
	margin-right: 0.5em;
	color: #333; 
	font-weight: normal;
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
  h2 {
    font-size: clamp(1rem, 4.5vw, 1.25rem); /* 約16px〜20pxの間で可変 */
    line-height: 1.5;
  }
  h3 {
    font-size: clamp(0.95rem, 4vw, 1.05rem); /* 約15px〜17pxの間で可変 */
    line-height: 1.5;
  }
}
/*---------------------
 * スマホ時改行させるbr
 * --------------------*/
/* デフォルト（PCなど）では非表示 */
.sp-only-br {
  display: none;
}

/* スマホ（768px以下）では表示（＝改行） */
@media screen and (max-width: 768px) {
  .sp-only-br {
    display: inline;
  }
}
/*--------------------------------
 * Pタグスマホ時フォントサイズ指定
 * -------------------------------*/
.lead-text {
  font-size: 1.375rem; /* 約22px */
  line-height: 1.6;
}

/* スマホ：768px以下で柔らかく縮小 */
@media screen and (max-width: 768px) {
  .lead-text {
    font-size: clamp(1rem, 5vw, 1.25rem); /* 16px〜20pxの範囲で可変 */
    line-height: 1.7;
  }
}
/*---------------------
 * スマホ用ヘッダーメニュー並び
 * -------------------*/
@media screen and (max-width: 768px) {
	#navi .navi-in > .menu-mobile li {
		width: 33%;
	}
	#navi .navi-in > .menu-mobile li a {
		font-size: 14px; /*場合によってフォントサイズを小さく*/
	}
}
/*--------------------------
 * 固定ページ指定日付非表示
 * -------------------------*/
.post-708 .date-tags,
.post-694 .date-tags,
.post-676 .date-tags {
display: none;
}
/*--------------------------
** 投稿ページ **
 * -------------------------*/
/* 特定のボタンのホバー色 */
.button-class:hover {
  background-color: #007bff; /* 青色 */
  color: white; /* 文字色を白に */
}

/* 特定のリンクのホバー色 */
a:hover {
  color: #0056b3; /* 濃い青色 */
}
/*--------------------------
 * 動画
 * ------------------------*/
/*YouTube動画の中央配置*/
.video-container{
　margin: 0px auto;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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