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

/************************************
****　ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:1em;
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo {/*ロゴ画像を中央に配置したい方は、以下3行を削除*/
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}

/************************************
** PCで電話番号リンクを無効
************************************/
@media (min-width: 751px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

/************************************
****　ヘッダーメニュー
************************************/
.navi-in > ul{/*メニューを中央に配置する場合は4～7行目を削除してください*/
justify-content:flex-start;
}
.navi-in>ul li {
line-height: 40px;
height: 40px;
}
.navi-in a{
font-size:15px;
}
#navi .navi-in a:hover {
transform: none!important;
color: #fff;
background-color: #ffca28;/*ホバー時の背景色*/
border-radius: 3px;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {
font-size:0.9em;
color:#fff;/*サブメニューの文字色*/
border-top-style: solid;
border-top-color: #efefef;
background:#ffca28;/*サブメニューの背景色*/
padding:0 0 0 2em;
margin:0;
}
#navi .sub-menu a:hover {
border-left: 5px solid;
border-right: 5px solid;
border-color: #ff8c00;
}

div#header-container {
box-shadow: none;
}
div.item-label{
font-weight:bold;
}

/************************************
****　モバイル表示　ヘッダーメニュー
************************************/
.mobile-menu-buttons{
height:50px;
color:#7b7b7b;/*メニュー色変更はこちら*/
background-color:#fff8e1;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:#fff8e1;
}
span.fas.fa-envelope::before{
color:#7b7b7b;/*封筒マーク色変更はこちら*/
}
span.fas.fa-phone-alt::before{
color:#7b7b7b;/*電話マーク色変更はこちら*/
}

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#ffb300;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
display:block;
text-align:center;
border-bottom:3px dotted #ffb300; /*点線の色変更はこちら*/
content: "メニュー";
font-weight: bold;
color:#7b7b7b;/*文字色変更はこちら*/
padding:10px;
}
ul.menu-drawer:after {
background: #fff8e1;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.0em;
background-color:#ffffff;
color:#7b7b7b;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#7b7b7b;
}
.menu-drawer .sub-menu {
box-shadow:none;
padding:0;
}
.menu-drawer .sub-menu li{
font-size: 1.0em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#ffb300; /* >マークの色変更はこちら*/
margin:0 .5em 0 1em;
}

/************************************
****　アピールエリア
************************************/
/*　タイトル前にテキスト挿入2段になるように幅を調整　*/
div.appeal-title::before { font-size: 40px;}
div.appeal-title {display:inline-block;width: 480px; height: 80px;}
/*　アピールエリア タイトル文字サイズ　*/
.appeal-title{ font-size:40px;  color: #0000CD;}

/*480px以下*/
@media screen and (max-width: 480px){
/*　タイトル前にテキスト挿入2段になるように幅を調整　*/
div.appeal-title::before { font-size: 23px;}
div.appeal-title {display:inline-block;width: 260px; height: 50px;}
/*　アピールエリア タイトル文字サイズ　*/
.appeal-title{ font-size:23px; color: #0000CD;}
}

/************************************
****　サイドバー
************************************/
/* サイド背景 */
.sidebar {
	background: #fff8e1;
}

#sidebar>.widget{
  border-radius:10px;
}

/* 目次の位置の調整 */
.sidebar-scroll {
  top: 8%;
}

.sidebar h3 {
  color: #494949;/*文字色*/
  font-size: 16px;
  background-color:#eaf3ff;
  margin: 10px 5px 10px 5px;
  padding: 0px 5px 0px 20px;
  border-top: solid 3px #5161bb;/*上線*/
  border-bottom: solid 3px #5161bb;/*下線*/
}

.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:#ffb300;
font-size:0.8em;
	font-weight:bold;
	color:#fff;
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:#ffca28!important;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
}

.sidebar .toc {
  margin: 0 .5em 0 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  border: 1px solid #ffca28;
  border-radius: 4px;
}
/* はみ出た分をスクロール可能にするコード */
.sidebar .toc .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 520px; /* 目次の高さ上限 */
}
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px; /* スクロールバーの横幅 */
}
/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: #f7f7f7; /* ツマミの色 */
}
.sidebar .toc .toc-content ol li {
  text-indent: -20px;
}
.sidebar .toc .toc-content ol li ol li {
  font-size: 90%;
  padding-left: 20px;
  text-indent: -36px;
}
.sidebar .toc li.current {
	background-color: #f7f7f7; /* ハイライト色 */
}

.tagcloud a{
background-color:#f7f7f7;
color:#383838;
}
.tagcloud a:hover{
background-color:#7b7b7b;/*マウスオーバー時の背景色変更はこちら #90C31F*/
color:#fff!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}
.widget-entry-cards .widget-entry-card-content{
color: #383838;
}

/************************************
****　サイト内検索
************************************/
.search-edit, input[type="text"] {
	font-size: 0.8em;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15), 0 3px 3px -2px rgba(0, 0, 0, 0.15);
	border: none;
	border-bottom: solid 1px #efefef;
   border-radius: 3px;
  outline: none;
}
[type=submit].search-submit {
   top: 0;
    right: 0;
    height: 100%;
    padding: 8px 15px;
	background: #ffb300; /* ボタンの色 */
    color: #fff; /* 文字の色 */
	font-size: 0.9em;
    font-weight: bold;
    border: none;
    border-radius: 0 3px 3px 0;
}
[type=submit].search-submit:hover {
    color: #fff;
    background: #ffca28;
}

/************************************************
 トップページ（固定ページ）カスタマイズ
*************************************************/
/*トップページ(固定ページ)のタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*トップページ(固定ページ)の目次を非表示*/
.home.page .toc{
display: none;
}
/*トップページ(固定ページ)の投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*トップページ(固定ページ)の更新日を非表示*/
.home.page .post-update{
display: none;
}
/*トップページ(固定ページ)のシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*トップページ(固定ページ)のフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*トップページ(固定ページ)の投稿者名を非表示*/
.home.page .author-info{
display: none;
}
/*トップページ(固定ページ)の表示位置の調整*/
.home.page .entry-categories-tags.ctdt-one-row,
.home.page .article-header.entry-header {
	display: none;
}

/*メインカラム背景色*/
/*サイドバー背景色*/
home.sidebar,.main
{
background-color: #fff8e1;
}

/************************************************
 見出しのカスタマイズトップページ（固定ページ）カスタマイズ
*************************************************/
/*見出しのリセット*/
.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}
.article h2{
border: none;
}
.article h3::before {
border-top: none;
}
.article h3::after {
border-bottom: none;
}
.article h3{
border: none;
}
.article h4::before {
border-top: none;
}
.article h4::after {
border-bottom: none;
}
.article h4{
border: none;
}
.article h5::before {
border-top: none;
}
.article h5::after {
border-bottom: none;
}
.article h5{
border: none;
}
/*h6を指定する場合は、はずす
.article h6::before {
border-top: none;
}
.article h6::after {
border-bottom: none;
}
.article h6{
border: none;
}*/

/*見出しのカスタマイズ*/
.article h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fff8e1;/*背景色*/
  border-bottom: solid 3px #ffb300;/*下線*/
}

.article h2 {
  color: #494949;/*文字色*/
  margin: 20px 5px 20px 5px;
  padding: 10px 5px 10px 20px;
  background: #eaf3ff;/*背景色*/
  border-top: solid 3px #516abb;/*上線*/
  border-bottom: solid 3px #516abb;/*下線*/
}

.article h3 {
  padding: 0.5em;/*内側の余白*/
  color: #494949;/*文字色*/
  background: #fff8e1;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

.article h4 {
  border-bottom: solid 3px #fff8e1;
  position: relative;
}

.article h4:after {
  position: absolute;
  left: 0px;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffb300;
  bottom: -3px;
  width: 20%;
}

.article h5 {
  border-bottom: solid 3px #cce4ff;
  position: relative;
}

.article h5:after {
  position: absolute;
  left: 0px;
	content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 100%;
}

/************************************
****　目次
************************************/
/*目次のとび先の余白を調整*/
span[id^="toc"] {
	padding-top: 2em;
}
@media (max-width:880px){
span[id^="toc"] {
	padding-top: 4em;
	}}

.toc-title{
color:#494949;
font-weight:bold;
}
.toc-title::after {
color:#383838;
}
/*目次の枠線の色を変更*/
.toc {
	border-radius:4px;
	border: 1px solid #ffca28;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f144";
margin-right: 7px;
}
.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: #7b7b7b;/*こちらで点の色を変更できます #90C31F*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: 0px;
}
.toc-list > li li a {
margin-left: 0px;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
background-color: #eaf3ff;
text-decoration: none;
}
}

/************************************
**ContactForm7カスタマイズ
************************************/
input[type="text"]
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 3px solid #efefef;
}

table.CF7_table tr{
	border-top: 1px solid #efefef;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input[type="text"],
.CF7_table input[type="email"],
.CF7_table input[type="tel"],
.CF7_table input, .CF7_table textarea {
	font-size: 0.8em;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15), 0 3px 3px -2px rgba(0, 0, 0, 0.15);
	border: none;
	border-bottom: solid 1px #efefef;
   border-radius: 3px;
   outline: none;
}

.CF7_table ::placeholder {
	color:#7b7b7b;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #ffb300;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #7b7b7b;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	text-align:left;
	width:30%;/*横幅*/
	background-color:#fff8e1;
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#fff8e1;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#ffb300;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
	width:200px;
	border-radius:3px;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

/************************************************
 トップへ戻るボタン
*************************************************/
.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}

.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  color: #383838;
  background-color: #d6d6d6; /*背景色*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #f7f7f7;
  background-color: #7b7b7b; /*背景色*/
}