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

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


/*固定ページのタイトル・日付・名前非表示*/
.page .entry-title,
.page .date-tags,
.page .author-info,
.eye-catch-wrap{
	display: none;
}

/***グローバルメニュー***/
/*説明文(英字)の色を変更*/
.item-description.sub-caption{
	color:#ce7e75
}
/*ホバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after{
	position: absolute;/*線の位置を絶対配置に*/
	content: "";/*文字はなし*/
	left: 0px;/*線の位置*/
	bottom: 0;/*線の位置*/
	height: 2px;/*線の高さ*/
	width: 100%;/*幅いっぱいに線を引く*/
	background: #ce7e75;/*線の色*/
	transform: scale(0,1);/*ホバー前は線を消す*/
	transition: 0.3s;/*線が0→100%になるまでの秒数*/
}
#navi .navi-in a:hover:after{
	transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
/*マウスオーバー時に背景色変更*/
#navi .navi-in a:hover {
	background-color: #fff7f8;
	transition: all 0.3s ease-in-out;
}


/***モバイルメニュー***/
.mobile-menu-buttons{
   align-items: center;
}
/*×アイコンを移動*/
.menu-close-button {
	padding-top: 15px;
	padding-left: 25px;
	padding-bottom: 30px;
	text-align: left;
	font-size: 1.3em;
}
/*モバイルメニューを開いた時の記事色を変えない*/
#navi-menu-input:checked ~ #navi-menu-close,
#sidebar-menu-input:checked ~ #sidebar-menu-close,
#search-menu-input:checked ~ #search-menu-close,
#share-menu-input:checked ~ #share-menu-close,
#follow-menu-input:checked ~ #follow-menu-close {
	opacity: 0;
}
/*モバイルメニュー背景色*/
.navi-menu-content {
	background-color: #fffffff0;
}
/*ヘッダーの文字と背景の色を変える*/
.mobile-header-menu-buttons, .mobile-menu-buttons, .menu-button, .menu-icon, .menu-caption {
	color: #ce7e75;
	background-color: #fff7f8;
}
/*スライドインメニュー装飾*/
.menu-drawer a {
	font-size: 0.9em;
	line-height: 1.6em;
	border-bottom: solid 1px #ce7e75;
}
.menu-drawer a:hover {
	background-color:#fff7f8;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                                      
	font-size: 0.9em;
}
.menu-drawer .sub-menu li a::before {
	font-family: "Font Awesome 5 Free";
	content : "\f105";
	color:#ce7e75;
	margin:0 .5em 0 1em;
}

/***ページネーション***/
/*ページネーション（次のページ）非表示*/
.pagination-next {
	display:none;
}
/*ページネーション（番号）編集*/
.page-numbers {
	color: #60b2d6;/*文字色*/
	border: 1px solid #60b2d6;/*太さ、スタイル、色*/
 	border-radius: 30px;/*半径*/
}
/*現在のページ*/
.pagination .current {
	background-color: #eff6fa; /*背景色*/
	font-size: 20px;/*文字の大きさ*/
	font-weight: bold;/*文字の太さ*/
}
/*ホバー時のページネーション（番号）*/
.pagination a:hover {
	background-color: #60b2d6; /*背景色*/
	color: #fff;/*文字色*/
	font-size: 20px;/*文字の大きさ*/
	font-weight: bold;/*文字の太さ*/
}

/***目次***/
/* 目次の背景色・枠線を変更する */
.toc {
	/*background-color: #ffeaed;   目次の背景色を変更する */
	border-color: #ce7e75;  /* 周囲のボーダーの色を変える */
}
/* 目次を変更する */
.toc-title{
	font-size: 1.2em;  /* 文字の大きさを変える */
	padding: 0.3em;  /* 文字の周囲の余白を変える */
	font-weight: bold;  /* 文字を太字にする */
	color: #333333;  /* 文字の色を変える */
}
/* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
	font-family: 'Font Awesome 5 Free';  /* Font Awesome 5を使用するために指定 */
	content : "\f03a";  /* Font Awesome 5のアイコン番号 */
	font-size:15px;  /* アイコンの大きさ */
	margin-right:10px;  /* アイコン右の余白 */
	color:#ce7e75;  /* アイコンの色 */
	border-radius: 50%;  /* アイコンの背景を丸くする */
	padding:8px;  /* アイコン背景の余白 */
}
.toc-title::after {
	color:#333333;
}
.toc-list > li a {
	font-weight: bold;
	display:block;
	margin-top:10px;
	margin-left: 10px;
}
.toc-content ol li{
    color: #ce7e75;
    margin:0.5em;
}
.toc-list > li a::before {
	font-family: "Font Awesome 5 Free";
	content : "\f144";
	margin-right: 7px;
	color:#ce7e75;  /* アイコンの色 */
}
.toc-list > li li a {
	font-weight: normal;
	font-size: 95%;
	margin-top:0;
	margin-left: 2em;
}
.toc-list > li li a::before {
	content: "";
	width: 7px;
	height: 7px;
	left: -2px;
	display: inline-block;
	border-radius: 50%;
	background: #ffced3;
	position: relative;
	margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
	margin-left: -10px;
}
.toc-list > li li a {
	margin-left: -2em;
}
.toc-list > li li a::before {
	left: 3px;
	margin-bottom:1px;
}
}
.toc a:hover {
color: #ce7e75;
	text-decoration: underline;
}

/***見出し***/
.article h2 {
	font-size: 25px !important;/*文字のサイズ*/
	border-top: 2px solid #60b2d6;/*上線*/
	border-bottom: 2px solid #60b2d6;/*下線*/
	padding: .5em ;　/*余白のサイズを変える*/
	margin-bottom: 15px;
	background: #eff6fa;  /*背景色を変える*/
	color: #333333;  /*文字の色を変える*/
}
.article h3 {
	border: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
	padding: 0.5em;/*文字周りの余白*/
	color: #333333;/*文字色*/
	border-left: solid 5px #60b2d6;/*左線（実線 太さ 色）*/
}
.article h4 {
  border-top: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
  border-bottom: solid 1px #eff6fa;  /*下の線の種類、太さ、色*/
  position: relative;  /*要素を相対配置にする*/
  color: #333333;  /*文字の色*/
}
.article h4::after {
  position: absolute;  /*要素を絶対配置にする*/
  content: " ";  /*空欄を挿入する*/
  border-bottom: solid 2.5px #60b2d6;  /*左の線の種類、太さ、色*/
  left: 0px;  /*左の線の位置の調整*/
  bottom: -1px;  /*左の線の位置の調整*/
  width: 30%;  /*左の線の長さ*/
}

/***サイドバー***/
/* サイドバー見出し */
.sidebar h3 {
	background: transparent;  /* 背景を透明にする */
	text-align: center;  /* 見出しの文を中央揃えにする */
	padding:0px;  /* 周囲の余白（内側） */
	margin: 0px 0px 10px 0px;  /* 周囲の余白（外側） */
	border-bottom: dashed 2px #ce7e75;  /* 下部に波線を表示する */
	color: #333333;  /* 色の変更 */
}
/*カテゴリのマウスオーバー時の挙動*/
.widget_categories ul li a:hover{
	background-color:#fff7f8;
}
/*親カテゴリのカスタマイズ*/
.widget_categories ul li a{ 
	border-bottom: 1px dashed #ffced3; /* 下線の種類 */
}
.widget_categories ul li a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f07b"; /* FontAwesomeのユニコード */
	font-weight: 900;
	color: #ce7e75; /* アイコンの色 */
	padding-right: 6px;
}
.widget_categories > ul > li > a:first-child{ 
	border-top: none;
}
/*子カテゴリのカスタマイズ*/
.widget_categories ul li ul li a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f07c"; /* FontAwesomeのユニコード */
	color: #ffced3; /* アイコンの色 */
	padding-right: 6px;
}
/*タグクラウド修正*/
.tagcloud a {
   background: none; /*背景を消す*/
   border: 1px solid #ce7e75; /*実線の太さと色*/
   border-radius: 20px; /*角の丸み*/
   color: #ce7e75; /*文字色*/
   padding: 3px 10px; /*要素の内部余白*/
   text-decoration: none; /*文字の装飾なし*/
   font-size: 13px; /*文字サイズ*/
   margin: 2px; /*要素の外部余白*/
   display: flex; /*横並びにする*/
   flex: 1 1 auto; /*余白分の自動伸縮比率*/
   justify-content: space-between; /*左右幅いっぱいに均等に配置する*/
}
.tagcloud a:hover { 
   background: #ce7e75; /*カーソルを合わせた時の背景色*/
   border: 1px solid #ce7e75; /*カーソルを合わせた時の線色*/
   color: #fff; /*カーソルを合わせた時の文字色*/
   transition: 0.5s; /*アニメーションの時間*/
}

/* 検索フォームの形と色を変える */
.search-edit {
	background-color: #ffeaed; /*背景色*/
	border-radius: 20px !important;  /* 検索フォームの角を丸くする */
	border-color: #ffced3 !important;  /* 検索フォームの枠線の色を変える */
}

/***タブ***/
.tab-label-group{
	padding-bottom:1em;
}
.tab-label-group .tab-label{
	color: #ffffff; /*アイコンと文字の色*/
	border-radius: 20px; !important
	position: relative;
	text-align: center;
    transition: 0.3s;
	margin:0;
	width:100%;
	cursor: pointer;
	font-size:15px
}
.tab-label-group .tab-label:hover{
	background-color: #fff7f8 ; /*背景の色*/
}
.tab-label-group .tab-label.is-active{
	font-weight: bold;
	background-color: #ce7e75; /*背景の色*/
	border-radius: 20px;
	position:relative;
}
.tab-label-group .tab-label.is-active::before{
	background-color: #ce7e75; /*背景の色*/
	clip-path: polygon(0px 0px, 100% 0px, 50% 100%);
    content: "";
    position: absolute;
	transition: 0.3s;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    height: 8px;
    width: 16px;
    z-index: 1;
}
.tab-content-group{
	/*background-color: #fff7f8 ; 背景の色*/
	border-color:#ce7e75;
	border-radius:15px;
}
.popular-entry-card-link.widget-entry-card-link.a-wrap, .wp-post-image{
	border-radius:10px;
	position:flex;
	text-align:center;
	margin:auto;
}

/*** Contact Form 7 ***/
/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #ce7e75; /* 背景色 */
	border-radius: 20px;
}
/* 任意マーク */
.free {
	color: #333333;
	margin-right: 10px;
	padding: 6px 10px;
	background: #eff6fa; /* 背景色 */
	border-radius: 20px;
}
/* 項目名を太字にする */
form p {
	font-weight: 600;
}
/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #ce7e75; /* 枠線の色 */
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}
/* 必須項目の入力欄を見やすくする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: #fff7f8; /* 背景色 */
}
/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%; /* 好みで60〜80%でもOK */
	height: 60px;
	border-color: #60b2d6; /* 枠線の色 */
	background: #60b2d6; /* ボタンの色 */
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	border-radius: 30px;
}
/**************************↓ボタンホバーの時の挙動要検討********************************/
/*ボタンが重なったときに沈む*/
.wpcf7-submit:hover{
	color: #60b2d6;
	font-weight: 7px;
	background-color: #fff;
	border-color: #60b2d6;
	border-width: 4px;
	box-shadow: 0 1px 0 #9FBBE9 ;
	transform: translateY(6px);
	-webkit-transform: translateY(6px);
}
/*カーソルを外したときに元に戻す*/
.wpcf7-submit{
	transition:.3s ease-in-out;
}
/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

/***人気記事ランキング***/
/*ランキングの順位を装飾*/
.widget-entry-cards.ranking-visible .card-thumb::before {
	top:-6px!important; /*上からの位置*/
	left:-5px!important; /*左からの位置*/
	border-radius:100%;/*角を丸くする*/
}

/***PR表記***/
.pr-label-s , .pr-label-l {
	border-radius: 100px;
}

/***動画の横幅いっぱい***/
.video-container {
	max-width: none;
}

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

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

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