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

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

/* 共通：中央寄せと幅の調整 */
#main,
.main,
.article,
.entry-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1em;
  box-sizing: border-box;
}

.sidebar {/*サイドバー全体の文字*/
  background: #ffffff; 
  font-size: 14px;
}

/* おすすめカード設定 */
a.entry-card-wrap {
  display: block;
  width: 48%;
  margin: 0 1% 2em;
  padding: 0 0 .5em;
  border-radius: 10px;
  background-color: #fff;
  transition: transform 0.3s ease;
}

a.entry-card-wrap:hover {
  transform: translateY(-2px);
}

a.entry-card-wrap:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* カード内の画像 */
figure.entry-card-thumb {
  max-height: 190px; /* 画像の高さ */
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* カテゴリーラベルの余白 */
.entry-card-thumb .cat-label {
  margin-left: 0.8em;
}
/* カード内のサムネイル画像を16:9に統一し、美しく中央配置する */
figure.entry-card-thumb.card-thumb.e-card-thumb {
  aspect-ratio: 16 / 9; /* 画像の縦横比を16:9に固定 */
  overflow: hidden; /* 枠からはみ出す部分を非表示に */
  border-radius: 10px 10px 0 0; /* 上側のみ角を丸く */
  display: flex; /* 子要素（画像）を中央に配置するためのFlexbox */
  justify-content: center; /* 水平方向に中央寄せ */
  align-items: center; /* 垂直方向に中央寄せ */
}

.eye-catch .cat-label, .cat-label {
  font-size: .6em;
  border-radius: 10px;
  margin: 0.5em;
  padding: 0 0.5em 0;
  background-color:#4fc2c4;
  color: #fff;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/****** 1024px以上（PCのみ）******/
@media screen and (min-width: 1024px) {
	.navi-entry-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);  /*おすすめカードを押した感じにする*/
    transition: box-shadow 0.2s, transform 0.1s, opacity 0.2s;
  }

  .navi-entry-card:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    transform: scale(0.97);
    opacity: 0.7;
  }
	
/* ブログカード続きを読むの設定 */
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .6rem;
	left: 2rem;
	font-size: 77%;
	background-color: #00CCCC; /* 内部リンク右下枠の背景色 */
	padding: .3em 2em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;}
	
/* 記事カード抜粋文字 */
.blogcard-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 表示する行数（1行17文字前後なら約35文字） */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6em;
  max-height: 3.2em; /* 1.6em × 行数分 */
  font-size: 14px;}
}
/*パソコン（インデックス）新着記事タイトル文字*/
h2.entry-card-title.card-title.e-card-title{
font-size:19px;
color:#7b7b7b;
font-weight:bold;
text-align:center;
line-height:1.8em;
margin-top:2em;
margin-bottom:1em;
padding: 0 1.5em 0;
}
/*パソコン（インデックス）新着記事抜粋の文*/
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:13px;
color:#7b7b7b;
text-align:center;
border-top:3px dotted #90C31F;
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:2em;
margin-bottom:2em;
max-height:8em;
}

/****** 1023px以下（大タブレット以下）******/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

/* おすすめカード指タップ向け */
.navi-entry-card {
    transition: transform 0.1s ease, opacity 0.2s ease;
    touch-action: manipulation;
  }

  .navi-entry-card:active {
    transform: scale(0.97);
    opacity: 0.7;
  }	

/* ブログカード続きを読むの設定 */
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .6rem;
	left: 1.6rem;
	font-size: 77%;
	background-color: #00CCCC; /* 内部リンク右下枠の背景色 */
	padding: .3em 2em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;}

/* 記事カード抜粋文字 */
.blogcard-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 表示する行数（1行17文字前後なら約35文字） */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6em;
  max-height: 3.0em; /* 1.6em × 行数分 */
  font-size: 13px;}
}


/****** 834px以下 ******/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	 
/* ブログカード続きを読むの設定 */	
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .6rem;
	left: 3rem;
	font-size: 70%;
	background-color: #00CCCC; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}}	

/****** 600px以下：スマホ全般向け（旧480pxから変更）******/
@media screen and (max-width: 600px) {
  /*必要ならばここにコードを書く*/
a.entry-card-wrap {
    width: 95%;  /* カテゴリページの記事カードは1列表示に */
    margin: 0.5em auto;
  }
/* ブログカードのスニペット非表示 */
  .blogcard-snippet {
    display: none;
  }


 /* ブログカード続きを読むの設定 */
.internal-blogcard::after {
  content: '続きを読む \00bb';
  position: absolute;
  bottom: .4rem;
  left: 1.6rem;
  font-size: 63%; 
  background-color: #00CCCC;
  padding: 0.6em 2.2em; /* 高さと横幅を拡大 */
  font-weight: bold;
  color: #fff;
  border-radius: 4px; /* 丸みも少し柔らかく */
}
/* スマホだけ：読みやすい幅にしっかり制限する */	
#main,
.main,
.article,
.entry-content {
 　 width: 100%;
    max-width: 100%;
    padding: 0 0.9em;
    margin: 0 auto;
    box-sizing: border-box;
}

  /* 記事全体の左右余白を狭める */
  #main,
  .main,
  .article,
  .entry-content {
    width: 100%;
    max-width: 100%;
    padding: 0 0.5em; /* ← ここを0.5emに狭くする（今は0.9em） */
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 記事カードの幅とマージンを調整 */
  a.entry-card-wrap {
    width: 98%;  /* ← 95%から少し広げて */
    margin: 0.5em auto 1.5em; /* 自動で中央、下に余白 */
  }

  /* 記事タイトルの左右余白を広げて読みやすく */
  h2.entry-card-title.card-title.e-card-title {
    padding: 1em 0.8em 0.6em;
    font-size: 16px;
    line-height: 1.6em;
    text-align: center;
  }

  /* 抜粋テキストの左右マージンを軽減してバランスよく */
  .entry-card-snippet.card-snippet.e-card-snippet {
    margin: 0 1em 1em;
    padding: 0.5em 0;
    font-size: 13px;
    line-height: 1.6em;
    text-align: center;
  }
}


/************************************
**** 関連・投稿記事カードのレイアウト設定
************************************/
/* カード本体（横並び・角丸） */
a.entry-card-wrap {
  display: block;
  width: 48%;
  margin-bottom: 2em;
  border-radius: 10px;
  transition: transform 0.3s;
}

/* ホバー時のふわっと浮く効果 */
a.entry-card-wrap:hover {
  transform: translateY(-1px);
}

/* サムネイル画像（角丸・中央寄せ） */
figure.entry-card-thumb {
  max-height: 180px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}


@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{
font-size: 14px;/*スマホ（インデックス）新着記事タイトル文字*/
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:12px;/*スマホ（インデックス）新着記事抜粋の文・表示なし*/
text-align:center;
border-top:2px dotted #79c06e;
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}}


div.admin-pv{/*閲覧数を非表示*/
display:none;
}

/*テーブルのデザイン変更*/

/* テーブル全体のボーダーを設定 */
.entry-content table {
  border-collapse: collapse; /* セルの間にスペースを作らずにボーダーを結合 */
  border: 2px solid #a1e6c0; /* テーブル全体の外枠 */
  font-size: 90%;	
}

/* 見出しセルの文字色・背景色・枠線設定 */
.entry-content th {
  color: #ffffff;
  font-size: 80%;
  background-color: #3cb371 !important;
  border: solid 1px #a1e6c0 !important;
}
/* 見出し以外のセルの枠線設定 */
.entry-content td {
	border: solid 1px #a1e6c0!important;
}
/* 奇数行の背景色 */
.entry-content tr:nth-child(odd) td {
	background-color: #f0fff0;
}
/* 偶数行の背景色 */
.entry-content tr:nth-child(even) td {
	background-color: #d9fcd9;
}
/* ウィジェットの背景を透明にする */
div#custom_html-3{
    background: none;
}

/**********************
**目次のカスタマイズ
***********************/
/*タイトル文字の太さ色*/
.toc-title{
border-radius:2%;	
position: relative;
padding: 5px 0px;	
background: #00CCCC;/**背景色**/
color: #fff;
font-weight: bold;
}
/*背景色、枠線*/
.toc {
background: #f0fcfc;
border: 1px solid #00CCCC;
border-radius:1%;	
}
/*文字の色と大きさ*/
.toc a {
color: #35477e;
font-size: 16px;
}
/*H3の目次番号を消す*/
.article .toc-list > li li {
list-style: none;
}
/*H3の目次番号を点にする*/
.toc-list > li li ::before {
content: '';
width: 5px;
height: 5px;
display: inline-block;
left: -13px;
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}
/*H3の文字を小さく*/
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}


/*スマホの広告の端が切れてしまう対策*/
@media screen and (max-width: 500px){
     .ps-widget {
         overflow: visible;
     }
}
/*スマホの広告の端が切れてしまう対策2*/
.ad-area {
    overflow: visible;
}
/*アドセンスを中央に*/
.ad-center{
text-align:center;
}

.ad-area {
    display: block;
    margin: 0 auto; /* 左右のマージンを自動設定で中央寄せ */
    text-align: center; /* 中央揃え */
}

/*角を丸く*/
.box{
	border-radius:40px;
}
/*ボックスメニューの色*/
.box-menu-icon{
  color: #40e0d0;
}
.box-menu:hover {
    box-shadow: inset 2px 2px 0 0 
#00CCFF,2px 2px 0 0 #00CCFF,2px 0 0 0 #00CCFF,0 2px 0 0
    #00CCFF;
} 

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#90C31F;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #40e0d0; /*点線の色変更はこちら*/
content: "カテゴリー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
font-weight: bold;	
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#6B6B6B;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .8em;	
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none;
}
}
 /*モバイルボタンメニューの背景色と文字色*/
.mobile-menu-buttons {
background: #48c4ea;
color: white;
}

.mobile-menu-buttons .menu-button > a {
color: white;
}

/************************************
** いいねボタンカスタマイズ
************************************/
.wpulike:before{
	content: '読んだ意思表示をしてね！'; /* いいねボタンの中の文字 */
	white-space: nowrap;
	font-size: 50%;
	padding: .7em 1em ;
		}

.wpulike {
	width: 140px;/* いいねボタンの背景 */
	margin: 0 0 10px !important;
	vertical-align: middle;
	overflow: hidden;
	padding: 10px !important;
	border: solid 3px #fff;
	border-radius: 10px;
	background-color: #ffffe0;
	text-align: center; /* テキスト（ハートマーク）を中央に配置 */
     }