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

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

/* 目次 */
.toc {
  border-color: #587291;  /* 周囲のボーダーの色を変える */
  /* background-colorを削除、目次背景色なし */
}

/* 目次のタイトル */
.toc-title {
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #1596b8;  /* 文字の色を変える */
}

/* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
  font-family: 'Font Awesome 5 Free';  /* Font Awesome 5を使用するために指定 */
  content: "\f03a";  /* Font Awesome 5のアイコン番号 */
  font-size: 20px;  /* アイコンの大きさ */
  margin-right: 10px;  /* アイコン右の余白 */
  color: #ffffff;  /* アイコンの色 */
  background-color: #1596b8;  /* アイコンの背景の色 */
  border-radius: 50%;  /* アイコンの背景を丸くする */
  padding: 8px;  /* アイコン背景の余白 */
}



/* 見出し2（H2）の設定 */
.toc-content > .toc-list > li:before { 
  font-weight: 900;
  color: #1596b8;
  padding-right: 8px;
}

.toc-content .toc-list li {
  font-weight: 600;
}

/* H3以降の文字サイズ */
.toc-content .toc-list li li {
  font-weight: normal;
}

/* 見出しのデザインリセット */
/* H6 */
.entry-content h6 {
  border: none;
  background: none;
  padding: 0;
}

/* 見出し3をカスタマイズ - article内のh3に限定 */
article h3 {
  padding: 0.5em !important; /* 文字周りの余白 */
  color: #494949 !important; /* 文字色 */
  background: #F4F7F5 !important; /* 背景色 */
  border-left: solid 5px #1596b8 !important; /* 左線（実線 太さ 色） */
}

/* 見出し6をカスタマイズ - article内のh6に限定 */
article h6 {
  position: relative;
  padding: 0.25em 0;
}
/* 見出し6の下にグラデーションのラインを追加 - article内のh6に限定 */
article h6:after {
  content: "";
  display: block;
  height: 2px; /* 線の太さを2pxに変更 */
  background: linear-gradient(to right, #1596b8, transparent);  /* #1596b8 のグラデーション */
}


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

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

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

/*テーブル揃え*/
.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignright{
	float: right;
	margin-left: 1.5em;
}
.alignleft{
	float: left;
	margin-right: 1.5em;
}
@media (max-width: 800px){
	.alignright{
		float: none;
		margin-left: 0;
	}
	.alignleft{
		float: none;
		margin-right: 0;
	}
}

/* alignright alignleft aligncenterが指定されたtableを正しく表示 */
table.alignright,
table.alignleft,
table.aligncenter {
	display: table;
}

/*グローバルメニューのフォント変更*/
.navi-in .menu-header .item-label{

font-weight: bold;
}

::selection
{
background: #0067C0;/*ドラッグしたときの色*/
color: #ffffff;/*ドラッグしたときの文字の色*/
}

::-moz-selection
{
background: #0067C0;
color: #ffffff;
}

/*インデント2em 調整*/
p.nimoji{
    margin-left: 2em;
    text-indent: -2em;
}

/*インデント2.5em 調整*/
p.nitengo{
    margin-left: 2.5em;
    text-indent: -2.5em;
}

/* 本文の文字間隔の調整 */
.entry-content {
letter-spacing: 0em;
}

/* タイトルの文字間隔の調整 */
.entry-title {
letter-spacing: 0em;
}

/* タイトル内のすべての連続する「―」に適用 */
.entry-title ― + ― {
  letter-spacing: -0.1em;
}

/************************************
** ●次のページボタンカスタマイズ
************************************/
.pagination-next-link.key-btn {
  background-color: #f5f5f5 !important;
  color: #6a6a6a !important; 
  border: 1px solid  #ccc !important;
  font-size: 20px;
  letter-spacing: 5px;
  font-weight: bold;
  padding: 6px;
  transition: all 0.6s ease;
}

/* ホバー時の次のページボタン */
.pagination-next-link.key-btn:hover {
  background-color: #eaeaea !important;
  color: #6a6a6a !important;
  border-color: #ccc !important;
  transition: all 0.6s ease;
}

/************************************
** ●ページ送りボタン／戻りボタンのカスタマイズ
************************************/
/* 現ページ以外のページ番号 */
.page-numbers {
  background-color: #f5f5f5 !important;
  color: #333 !important; 
  border: 1px solid  #ccc !important;
  border-radius: 24px; 
  font-size: 16px; 
  font-weight: bold; 
  transition: all 0.6s ease; 
}
/* スマホ表示対応 */
@media screen and (max-width: 1030px) {
  .page-numbers {
    font-size: 16px; 
    line-height: 40px; 
  }
}
/* ホバー時（現ページ以外） */
.pagination a.page-numbers:hover,
.page-numbers:hover {
  background-color: #f5f5f5 !important; 
  color: #333 !important; 
  border-color: #1596b8 !important; 
  transition: all 0.6s ease; 
}
/* 現在のページ */
.pagination .current,
.page-numbers.current {
  background-color: #1596b8 !important;
  color: white !important;
  border-color: #1596b8 !important;
  border-radius: 24px; 
  font-size: 16px; 
  font-weight: bold; 
}
/* ドット部分（...） */
.page-numbers.dots {
  background-color: transparent;
  font-size: 28px; 
  font-weight: 900; 
}
/* スマホ表示対応（ドット） */
@media screen and (max-width: 1030px) {
  .page-numbers.dots {
    line-height: 36px; 
  }
}


/*---折り畳みアーカイブウィジェット（バックナンバーのカスタマイズ）---*/
.widget_archive a.year{ /*各年*/
	cursor: pointer;
	border-bottom: 1px dotted #ccc; /*各年に下線を引く*/
}
.widget_archive a.year::after{ /*各年横のアイコン*/
	font-family: "Font Awesome 5 Free";
	content: '\f107'; /* アイコンの指定 */
	position: relative; /* 相対配置 */
	left: 5px; /* アイコンの位置 */
	font-weight: bold;
}
.widget_archive .years ul { /*各月*/
	display: flex;
	flex-flow: row wrap;
	margin-left: 1px; /*インデント*/
	font-size: 1rem;
	text-decoration: underline; /*各月に下線を引く*/
}
.widget_archive ul.years li {
	padding: 0 7px; /* 各月の間隔を広げる */
}
#sidebar .widget_archive ul.years li :hover { /*マウスホバー時*/
	background: none;
	transition: 0.1s;
	color: #1596b8;
}
.widget_archive ul.years .hide { /*各年をクリックすると開閉*/
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}


/*---二重線で囲われた太字---*/
p.kakomi {
    color: #1596b8;           /* 文字色 */
    font-size: 18pt;          /* フォントサイズ */
    font-weight: bold;        /* 太字 */
    text-align: center;       /* 中央揃え */
    border: 4px double #1596b8; /* 二重線のボーダー */
    border-radius: 10px;      /* 角丸 */
    padding: 15px;            /* 内側の余白 */
    width: 80%;               /* 横幅を80%に設定 */
    margin: 0 auto;           /* 中央揃えのための自動マージン */
    display: block;           /* ブロック要素として表示 */
}

/* ========= フッター共通スタイル ========= */
.navi-footer-in > .menu-footer {
  display: flex;
  justify-content: center;
  margin-bottom: 1em;
  list-style: none;
  padding: 0;
}
.navi-footer-in a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.5em 1em;
  display: inline-block;
}
.navi-footer-in a:hover {
  color: #ffffff !important;
  background: none !important;
  text-decoration: underline;
}

/* ========= スマホフッター ========= */
@media screen and (max-width: 768px) {
  footer,
  .l-footer,
  .footer-container,
  .footer-bottom-content {
    background-color: #E2E7E4 !important;
    color: #333 !important;
  }
  .navi-footer-in a,
  .navi-footer-in a:hover,
  .footer-bottom-content a,
  .footer-bottom-content a:hover {
    color: #333 !important;
    background: none !important;
  }
}

@media screen and (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}