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

/************************************
** ヘッダー全幅
************************************/
.header-container-in.hlt-top-menu {
  width:100%;
}
/*---------------------------------
トップページのサイト名消す
--------------------------------*/
.site-name-text {
display: none;
}
/*---------------------------------
トップのキャッチフレーズ位置
--------------------------------*/
.tagline {
margin-top: 2em; 
}

/************************************
****　サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.sidebar {
padding-left:0px;

}
@media screen and (max-width: 1205px){
.sidebar {
padding: 0%;
padding-right: 1.5%;
}
}
.widget_search{
padding:0;
}
span.fas.fa-search::before{
color:#333333;/*検索マーク色変更はこちら*/
}
.sidebar h3{
color:#333333;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#FFB547;/*タイトル下のライン色変更はこちら*/
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
background-color:#ffffff;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
background-color:#ffffff;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{
background-color:#F5EFE6;/*マウスオーバー時の背景色変更はこちら*/
color:#333333!important;
}
.tagcloud a{
background-color:#ffffff;
}
.tagcloud a:hover{
background-color:#F5EFE6;/*マウスオーバー時の背景色変更はこちら*/
color:#333333!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}
.widget-entry-cards .widget-entry-card-content{
color: #333333;
}

/************************************
****　プロフィール名の文字サイズ・文字色・フォントを変える
************************************/
.sidebar{
	background:transparent;
	font-size: 14px;
}
/* プロフィール全体 */
.nwa .author-box {
	border: none;
	padding: 0 20px;
}

/* アイコン */
.nwa .author-box .author-thumb{
	width: 110px;
}
.nwa .author-box .author-thumb img{
	box-shadow: 0 1px 3px rgba(0,0,0,.18)
}

/* 下側 */
.nwa .author-box .author-content {
	padding: 1em 0;
}


/* 名前 */
.author-box .author-name {
	margin-bottom: 1em;
}
.author-box .author-content .author-name a{
	color: #FFB547; /* リンク色にしない */
	font-size: 1.2em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.2em; /* 字間を広く */
}

/* プロフィール文 */
.author-description{
	margin-bottom: 16px;
}
.author-description p{
	margin: 0 0 0.5em 0;
	text-align: left;
	line-height: 1.5;
}

/* SNSボタン */
.author-follows{
	padding: 12px 0;
	background-color: #FFB547;
}
.author-follows::before{
	content: 'Follow Me';
	color: #fff;
	font-family: お好きなフォント(設定する場合);
	letter-spacing: 0.2em; /* 字間を広く */
}
.author-box .sns-follow-buttons a.follow-button{
	width: 40px;
	height: 40px;
	margin: 6px 10px 2px 2px;
	border-radius: 20px;
	color: #fff;
	border-color: #fff;
	font-size: 24px;
	line-height: 1.6;
}
.author-box a.follow-button span::before {
	font-size: 22px;
}

/* SNSボタン マウスオーバーしたとき */
.author-box .sns-follow-buttons a.follow-button:hover{
	background-color: transparent;
	opacity: 0.6; /* 薄く */
	transform: scale(1.1); /* 1.1倍の大きさに */
}

/************************************
** 見出し用追加CSSのリセット用（リセットしないと反映されない）
************************************/
/*スタイルリセット用*/
main h2.wp-block-heading,
main h3.wp-block-heading,
main h4.wp-block-heading {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    font-weight: bold;
}
main h2.wp-block-heading:before,
main h3.wp-block-heading:before,
main h4.wp-block-heading:before,
main h2.wp-block-heading:after,
main h3.wp-block-heading:after,
main h4.wp-block-heading:after {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    margin: initial;
    content: initial;
    position: initial;
}



	
/************************************
** 
************************************/
/*H2見出し*/
main h2.wp-block-heading {
    color: #fff;/*文字色（白）*/
    font-size: 20px;/*文字サイズ*/
    padding: 20px;/*文字回りの余白（上下左右）*/
    display: block;
    position: relative;
}
main h2.wp-block-heading:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFB547;/*背景色*/
    transform: skew(-10deg);/*背景の傾き*/
    z-index: -1;
}
main h2.wp-block-heading:after {
    content: '';
    position: absolute;
    border-left: 15px double #fff;/*左線（太さ 二重線 色）*/
    height: 100%;
    top: 0;
    right: 20px;
    transform: skew(-10deg);/*線の傾き*/
}
/*H3見出し*/
main h3.wp-block-heading {
    color: #FFB547;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 15px 15px 20px;/*文字回りの余白（上 左右 下）*/
    display: block;
    background-image: linear-gradient(transparent 85%, #FFB547 50%);/*下線含めた背景色*/
}
/*H4見出し*/
main h4.wp-block-heading {
    color: #576965;/*文字色*/
    font-size: 16px;/*文字サイズ*/
    display: block;
    position: relative;
    padding: 12px 40px;/*文字回りの余白（上下 左右）*/
}
main h4.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;/*チェックマークの太さ*/
    font-size: 30px;/*チェックマークのサイズ*/
    color: #FFB547;/*チェックマークの色*/
    left: 0;
    top: 0;
    content:"\f00c";
    position: absolute;
}

/************************************
** 見出し
************************************/
/* 目次の背景色を変更する */
.toc-title{
  background-color: #FFB547;  /* 背景色を変更する */
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #ffffff;  /* 文字の色を変える */
}

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

/************************************
**  フッター内のカテゴリウィジェットだけに適用
************************************/
/* フッター内のカテゴリウィジェット */
footer .widget_categories {
  background-color:   /* ウィジェット全体の背景 */
  padding: 10px 15px;
  border-radius: 6px;
}

/* タイトル（CATEGORY）は他と同じサイズ */
footer .widget_categories .widget-title {
  font-size: 15px;
  line-height: normal;
  margin-bottom: 8px;
}

/* カテゴリリスト部分 */
footer .widget_categories ul {
  font-size: 14px;      /* 文字小さめ */
  line-height: 1.4;     /* 行間を少し狭める */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 各カテゴリリンク */
footer .widget_categories li a {
  display: block;
  background-color: #f5efe6; /* 通常時の背景 */
  color: #333;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
  border-bottom: 1px dotted #fff; /* 白い点線の仕切り */
}

/* 最後のリンクだけは区切り線を消す */
footer .widget_categories li:last-child a {
  border-bottom: none;
}

/* ホバー時の変化 */
footer .widget_categories li a:hover {
  background-color: #fff;  /* 背景が白 */
  color: #333;             /* 文字色 */
  padding-left: 14px;      /* 少し右にスライドする効果 */
}
/* 親カテゴリ（トップ階層）だけ強調表示 */
footer .widget_categories > ul > li > a {
  font-weight: bold;           /* 太字で目立たせる */
  background-color: #e9dfd3;   /* 少し濃いめの背景で差をつける */
  color: #222;                 /* 文字色も少し濃く */
}


/************************************
**  サイドバーの親カテゴリ（トップ階層）
************************************/
/* サイドバーのカテゴリウィジェット全体 */
.sidebar .widget_categories {
  background-color: transparent; /* 全体背景は透明に */
  padding: 0;                    /* 必要なら微調整 */
}

/* サイドバーの親カテゴリ（トップ階層） */
.sidebar .widget_categories > ul > li > a {
  font-weight: bold;             /* 太字 */
  background-color: #e9dfd3;     /* フッターと同じ濃いベージュ系 */
  color: #222;                   /* 文字色 */
  padding: 4px 8px;              /* 少し余白 */
  border-radius: 6px;            /* 角丸 */
  display: block;
  transition: all 0.3s ease;
}

/* 親カテゴリホバー時 */
.sidebar .widget_categories > ul > li > a:hover {
  background-color: #fff;        /* 白に変化 */
  color: #333;                   /* 文字色 */
}

/* 子カテゴリ（階層下） */
.sidebar .widget_categories li ul li a {
  font-weight: normal;           /* 親より目立たない */
  background-color:      /* フッターの子カテゴリと同じ淡いベージュ */
  color: #333;
  padding: 4px 12px;             /* 階層感のため少し右にずらす */
  border-radius: 6px;
  display: block;
}

/* 子カテゴリホバー時 */
.sidebar .widget_categories li ul li a:hover {
  background-color: #f5efe6;
  color: #333;
}



/************************************
**  フッター右のタグウィジェット
************************************/
/* フッター右のタグウィジェット */
footer .widget_tag_cloud {
  background-color: transparent; /* ウィジェット全体の背景はなし */
  padding: 0;
}

/* タグリンクのスタイル */
footer .widget_tag_cloud a {
  display: inline-block;
  padding: 4px 8px;
  margin: 2px;                     /* タグ間の隙間 */
  background-color: #f5efe6;       /* 背景色 */
  color: #333;                     /* 文字色 */
  border: 1px dotted #333;         /* 点線の枠 */
  border-radius: 0px;               /* 少し丸みをつける */
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 13px;                  /* お好みで調整 */
}

/* ホバー時 */
footer .widget_tag_cloud a:hover {
  background-color: #fff;           /* 背景白 */
  color: #333;                      /* 文字色 */
  transform: translateY(-2px);      /* ちょっと浮かせる感じの効果 */
}

/************************************
**  
************************************/
/* トップページの記事カード */
.home .entry-card {
  transition: all 0.4s ease;  /* 変化をふわっとさせる */
  transform: translateY(0);   /* 初期位置 */
}

/* ホバー時 */
.home .entry-card:hover {
  background-color: #f5efe6;  /* ホバー背景色 */
  color: #333;                /* ホバー文字色 */
  transform: translateY(-4px); /* 少し浮かせる */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 影をつけると立体感 */
}
/************************************
**  
************************************/

/************************************
**  
************************************/


/************************************
**  
************************************/