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

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


/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
	font-family: "Font Awesome 5 Free";
	content: "\f060";
	color:#90C31F;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
	font-size: 16px;
	background: white;
	color:#333;
	margin-bottom:1em;
	border-bottom:3px dotted #90C31F; /*点線の色変更はこちら*/
	content: "メニュー";
}
ul.menu-drawer:after {
	background: white;
}
.menu-drawer li {
	padding:0;
}
.menu-drawer li{
	font-weight: bold;
}
.menu-drawer a{
	font-size: 16px;
	background-color:#ffffff;
	color:#545454;
	margin: .5em 0;
}
.menu-drawer a:hover{
	background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
	padding:0;
}
.menu-drawer .sub-menu li{
	font-size: 16px;
}
.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;
			}
}


/********** 背景の色設定 **********/
#main {
	background: #f5f5f5;
}
/**********************************/


/********** 記事一覧の角を丸くする **********/
.entry-card-wrap{
    background-color: white;
    border-radius: 4px;
    margin-bottom: 1em!important;
}
/********************************************/


/********** フッターの色設定 **********/
#footer {
    background-image: linear-gradient(to right, #ffd700 0%, #ffa500 50%, #ffd700 100%);
}
/**************************************/

/********** 中央寄せで両側にライン **********/
.sidebar h3 {
	background: none;
	font-size: 16px;
	letter-spacing: 2px;
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 0;
	text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 30%; /* ラインの長さ */
	border-top: 3px dotted #009933; /* ラインの色 */
}
.sidebar h3::before {
	left: 0;
}
.sidebar h3::after {
	right: 0;
}
/********************************************/


/********** スマホメニューを横スクロール **********
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
	#header-container.menu-mobile{
	display:none;
	}
	.navi-in >.menu-mobile{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	}
	#header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}
**************************************************/


/**********メニューにグラデーションをつける**********/
#navi.navi.cf{
	background: linear-gradient(#ffffff,#ffa500);
}
#header-container{
	background: linear-gradient(#ffffff,#ffa500);
}
/****************************************************/


/**********グローバルメニュー 内側のみ区切り線**********
#navi .navi-in > ul > li{
  border-right: 3px solid #CCCCCC;
}
#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}
.navi-in > ul > .menu-item-has-children > a::after{ 
  right: 10px; 
} 
/*******************************************************/


/**********グローバルメニュー 外側も区切り線**********
#navi .navi-in > ul > li{
  border-bottom: 3px solid #CCCCCC;
}
#navi .navi-in > ul > li{
  border-left: 3px solid #CCCCCC;
}
#navi .navi-in > ul > li:last-child{
  border-right: 3px solid #CCCCCC;
}
.navi-in > ul > .menu-item-has-children > a::after{ 
  right: 10px; 
}
/******************************************************/



/**********グローバルメニュー マウスオーバー時 色変更**********/
#navi .navi-in a:hover {
	background-color: #ffA500;
	transition: all 0.3s ease-in-out;
	color: #ffffff;
}
/**************************************************************/


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


/********** カレンダー曜日色******************/
#wp-calendar #today {
  font-weight: bold;
}
#wp-calendar th:nth-child(1){
	background-color: #ff0066; /* 日曜日の色 */
}
#wp-calendar th:nth-child(2){
	background-color: #0066ff; /* 月曜日の色 */
}
#wp-calendar th:nth-child(3){
	background-color: #ffa500; /* 火曜日の色 */
}
#wp-calendar th:nth-child(4){
	background-color: #00ffff; /* 水曜日の色 */
}
#wp-calendar th:nth-child(5){
	background-color: #008000; /* 木曜日の色 */
}
#wp-calendar th:nth-child(6){
	background-color: #ffff00; /* 金曜日の色 */
}
#wp-calendar th:nth-child(7){
	background-color: #a0522d; /* 土曜日の色 */
}
/*********************************************/


/********** 記事タイトルを中央揃えにする **********/
header.article-header.entry-header {
	text-align:center;
}
/**************************************************/


/********** 固定ページの日付非表示 **********/
.post-34 .date-tags {
	display: none;
}
/********************************************/

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

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

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