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

/*トップページカスマイズ***************************************/
.section-wrap{
	padding-top:3em;/*内側余白をあける（上）*/
	padding-bottom:3em;/*内側余白をあける（下）*/
}

/* 見出し---------------------------------------------- */
div.title{
	margin:2rem 0;/*外側余白*/
	padding:0;/*内側余白*/
	text-align:center;/*中央寄せ*/
	font-size:2.5rem;/*文字の大きさ*/
	letter-spacing:4px;/*文字間の余白*/
	line-height:1.8;/*行の高さ*/
}

div.title:after{
	display:block;
	font-size:.8rem;/*下段サブ見出しの文字の大きさ*/
}

div.newpost:after{
	content:'新着記事';
}
div.category:after{
	content:'カテゴリー別の記事';
}
div.popular:after{
	content:'人気な記事';
}
div.keyword:after{
	content:'キーワード';
}


/* リンクボタン---------------------------------------------- */
.link-btn{
	display:block;/*ブロック要素にする*/
	margin:1em auto;/*外側余白*/
	padding: 0.7em 2.5em;/*内側余白*/
	text-align: center;/*中央寄せ*/
	text-decoration: none;/*文字装飾なし*/
	border:1px solid #ccc; /*枠線（太さ、種類、色）*/
	font-size:.9em;/*文字の大きさ*/
	color:#333;/*文字色*/
	width:250px;/*ボタンの幅*/
}

/* 記事横並べ(flex)---------------------------------------------- */
.widget-entry-cards.large-thumb{
	display: flex; /* フレックス配置にする */
	flex-wrap: wrap;
}

/*新着記事サムネイル(大)*/
.new-entry-cards.large-thumb a{	width:calc(100% / 3);/*pcで横3列に並べる*/

}

/*人気記事サムネイル(大)*/
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横３列に並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
       .new-entry-cards.large-thumb a{
		width:100%;/*スマホで横１列に*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*スマホで横２列*/	
	}	
}

/*モバイルで文字の大きさを調整する場合*/
/*834px以下*/
@media screen and (max-width: 834px){
       .cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title{
		font-size: 14px!important;/*カテゴリー、人気記事タイトルを少し小さめに*/
	}
}

/* タブ切り替え---------------------------------------------- */

/* 親要素でタブの横並びのためflexを指定*/
.tab-wrap {
	display: flex;
	flex-wrap: wrap;
	margin:5px 0;
}


/* タブ１～３と書いているタブメニュー部分*/
.tab-label {
	border-bottom:1px solid #b5b5ae!important;
	text-align: center;
	padding: .5em 1em;
	order: -1;
	position: relative;
	z-index: 1;
	cursor: pointer;
	flex: 1;
}

.tab-label:not(:last-of-type) {
	margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
}

/* アクティブなタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
	background-color:#b5b5ae!important;
	color:#fff;
}

.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% + 5px);
	margin-left: -15px;
	border: 10px solid transparent;
	border-top:10px solid #b5b5ae;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
	height: auto;
	overflow: auto;
	padding: 15px 0 0 0;
	opacity: 1;
	transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
	display: none;
}
/*トップページカスマイズここまで***************************************/

/*フェードイン表示用******/
.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}
/*フェードイン表示用ここまで******/

/*メニューバー透明用******/
.site-name-text {
display: none;
}

/*ヘッダー背景透明化*/
.header-container {
background-color: transparent;
}
/*ナビゲーションメニュー背景透明化*/
.navi {
background-color: transparent;
}
/*ナビゲーションメニュー*/
.navi-in a {
color: #969998 !important;
}
.navi-in a:hover {
background:none;
border-bottom:solid 2px #808080;
transition: all .2s ease;
color: #5b5b5b !important;
font-weight:bold;
}
.navi-in>ul .sub-menu {
background-color: #fff;
opacity: 0.95;
padding-bottom:2px;
}
/*メニューバー透明用ここまで******/

/*下部ウィジット色指定******/
.content-bottom {
  background:  #f7f7f7; /* 全体の背景色 */
  margin: 0;
  padding: 25px 5px; /* 全体の余白 */
  text-align: center;
	}
/*下部ウィジット色指定ここまで******/

/* 矢印アイコン用----------------------------------------------*/
.more-btn {
	--more-btn-color:#333;/*矢印と文字の色はここで設定*/
	text-align: center;/*ボタン中央寄せ（右寄せにしたいときはrightに変更）*/
}

.more-btn a {
	position: relative; /*位置（ここを基準に）*/
	padding: 0 3em 0 .5em; /*内側余白調整（上右下左）*/
	color: var(--more-btn-color);  /*リンク文字色*/
	text-decoration: none; /*リンク下線を消す*/
	outline: none; /*枠線を消す*/
}

.more-btn a::before,
.more-btn a::after{
	content: ''; /*矢印部分作成*/
	position: absolute; /*位置（下線と矢印を配置する）*/
	background: var(--more-btn-color); /*矢印の色*/
	height: 1px; /*線の太さ*/
	transition: all .3s; /*なめらかな動き*/
}

.more-btn a::before {
	bottom: -10px; /*下線の下からの距離*/
	left: 0%; /*左からの距離*/
	width: 90%; /*ボタンの幅*/
}

.more-btn a::after {
	bottom: -5px; /*矢印の下からの距離*/
	right: 10%; /*右からの距離*/
	width: 15px; /*矢印部分の幅*/
	transform: rotate(35deg); /*角度調整*/
}

/*マウスオーバー時の動き*/
.more-btn a:hover::before{
	left: 10%;
}

.more-btn a:hover::after {
	right:0%;
}
/* 矢印アイコン用ここまで------------------------------------------*/

/* サイドバーデザイン用-------------------------*/
/* h3デザイン変更 */
.sidebar h3 {
  border-bottom:2px dotted #191970;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
}
/* サイドバー全体 */
.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: #文と同じ色; /* リンク色にしない */
	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: #2e2930;
}
.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倍の大きさに */
}

/* サイドバーデザイン用ここまで--------------------------*/

/*下部アイコン用------------------------------------*/
.fas_menu_horizontopicon{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_menu_horizontopicon li{
	list-style: none;
	margin: 0 20px 0 0;
	width: 70px;
	text-align: center;
}
.fas_menu_horizontopicon li:last-child{
	margin-right: 0px;
}
.fas_menu_horizontopicon li a{
	text-decoration: none;
	display: inline-block;
	font-size: 0.8em;
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_horizontopicon li a i{
	display: block;
	font-size: 2.4em;
	line-height: 1em;
	margin-bottom: 5px;
}
/* 下部アイコン用ここまで------------------------------------*/

/* 目次用------------------------------------*/
/*目次*/
.article .toc {
	width: 100%;
	max-width:600px;/*外枠の最大幅を指定*/
	border-color: #f0f0f0;/*外枠の線の色*/
	font-size: 85%;
	box-sizing: border-box;
	margin: 30px auto;/*上下に30pxマージン・左右中央寄せ*/
	padding: 1em 2em;
	line-height: 1.8;
}

.article .toc ul {
	margin: 0;
	padding-left: 0;
	line-height: 1.5;
}

.article .toc ul li {
	margin:1px;
	text-indent: 0;
}

.article .toc ul a {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: #777; /*リンク色*/
	border-bottom: 1px dotted #ddd; /*リンク下線*/
}

.article .toc li > ul {
	padding-left: 5%; /*hタグの種類で先頭左スペースのサイズが変わる*/
}
/* 目次用ここまで------------------------------------*/

/* h2見出し用------------------------------------*/
.article h2{
        position: relative;
        padding:0;/*内側余白調整*/
        border-bottom: solid 5px #eee;/*下線１：実線・太さ・色*/
        color:#111;/*文字色（黒）*/
        background-color:#fff;
}

.article h2:after{
	position: absolute;
	content: '';
	display: block;
	border-bottom: solid 5px #a5c9c1;/*下線２：実線・太さ・色*/
	bottom:-5px;
	width:30%;/*下線２の幅*/
}
/* h2見出し用ここまで------------------------------------*/
/* h3見出し用------------------------------------*/
.article h3 {
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 8px 12px;
    font-size: 1.2em; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    color: #333; /* 文字色 */
    background-color: #fff; /* 背景色を白に変更 */
    border-left: 5px solid #a5c9c1; /* 左側のボーダー */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影 */
}
/* h3見出し用ここまで------------------------------------*/
/* h4見出し用------------------------------------*/
.article h4 {
    position: relative;
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 8px 12px 8px 30px; /* 左側に余白を追加 */
    font-size: 1.1em; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    color: #333; /* 文字色 */
    background-color: #f9f9f9; /* 背景色 */
}

.article h4:before {
    content: "★"; /* デザインマーク（例：星） */
    position: absolute;
    left: 10px; /* 左端の位置 */
    top: 50%; /* 垂直中央に配置 */
    transform: translateY(-50%); /* 垂直中央調整 */
    font-size: 1.2em; /* マークのサイズ */
    color: #a5c9c1; /* マークの色（H2と統一感を持たせる） */
}
/* h4見出し用ここまで------------------------------------*/