@charset "UTF-8";

/*
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.0.6
*/

/************************************** 子テーマ用のスタイルを書く************************************/

/**************************
 **　サイト全体の色設定　**
 **************************/

.header-container, 
.main, 
.sidebar, 
.footer {
  background-color: #ffffff;}

body {
  background-color: #fff8dc;
}

nav#navi, 
.menu-header .sub-menu {
  background-color: #fff8dc;
}


/**************************
 **　ヘッダー部分の編集　**
 **************************/

/* タイトル＆サブタイトルの位置修正 */
.header .logo-text,
.tagline {
/*	padding: 0; */
/*	text-align: center; /* 文字中央よせ */
	position:absolute; /* 位置を強引に決める */
}

/* サイト名の位置 */
#header-in {
	position: relative; /* サイト名・descriptionはメイン領域に合わた位置 */
}
/* サイト説明の位置；微調整必要 */
.tagline {
	top: 20px; /* ヘッダーの上から */
	left: 38%;
/*	padding-right: 1em; /* 右内側余白1文字分 */
}
.header .logo-text {
	top: 50px; /* ヘッダーの上から */
	left: 35%;
}

/* サブタイトル部分の文字を大きくする */
.tagline {
	font-size: 24px;
	font-weight: bold;
}

/* サイトタイトルの文字を大きくする */
.site-name-text{
	font-size: 48px;
	font-weight: bold;
}

/************************************
** グローバルメニュー
************************************/
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px;
/*  一瞬灰色がちらつく為　影の拡大色rgbaを削除 /*
/*    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2); */
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #deb887 !important; 
/*    color: #b5b5b5 !important; */
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #333 !important;
    border-bottom: 3px solid #FDD835;
/*    transition: all .5s ease; */
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #333 !important;
/*    transition: all .5s ease; */
}

.menu-header .menu-item:hover,
.menu-header .sub-menu .menu-item:hover,
.menu-header .item-label:hover{
/*    background: none; */
    background-color: #deb887;
}


/************************************
** フッター設定
************************************/

/* コピーライトを、googleフォントに変更する */
/*
.copyright{
	font-family: 'Dancing Script','Noto Serif JP',cursive; 
}
*/

/**********************************
 ** マウスON時にカードを浮かせる **
 **********************************/
.entry-card-thumb {transition-duration: 0.3s; /*アニメーションの時間*/
	box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/}
.entry-card-thumb:hover{transform: translateY(-6px); /*マウスホバーで上に移動*/
	box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/}
.entry-card-thumb img{ /*画像下の隙間を消す*/
	vertical-align: bottom;}
.a-wrap:hover{ /*マウスホバー時の全体の背景色を消す*/
	background: none;}


/******************************
 ** サイドバーのタイトル変更 **
 ******************************/
.sidebar h3 {
	background: none; /*背景色を解除*/
	padding: 0; /*余白をなしに*/
	font-size: 18px; /*文字サイズをやや大きく*/
	letter-spacing: 2px; /*文字の間隔を少し広く*/
	border-bottom: solid 2px orange; /* オレンジの下線 */
}

/*最初の文字を1.5文字分に大きく*/
/* .sidebar h3:first-letter {  font-size: 1.5em; */
/*グラデーションのラインを引く*/
/*.sidebar h3:after {  content:""; display:block; height:1px; width:100%; background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%); background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);}*/

/* インデックスの投稿日を左寄せにしたいなぁ */
/*.date-tags { line-height: .8; text-align: left; /* 左揃えにする */
/* color: #aaa; /* 文字色を薄くする */
/*}*/


/**************************************
 レスポンシブデザイン用のメディアクエリ
************************************/
/*1600px以下*/
@media screen and (max-width: 1600px){
	.header div.header-in {
		min-height: 650px; /* ヘッダーの高さ */
	}
}

/*1400px以下*/
@media screen and (max-width: 1400px){
	.header div.header-in {
		min-height: 550px; /* ヘッダーの高さ */
	}
}

/*1240px以下*/
@media screen and (max-width: 1240px){
	.header div.header-in {
		min-height: 450px; /* ヘッダーの高さ */
	}
}

/*1030px以下*/
@media screen and (max-width: 1030px){
	.header div.header-in {
		min-height: 350px; /* ヘッダーの高さ */
	}
}

/*834px以下*/
/*@media screen and (max-width: 834px){
	/* タイトル部分の文字が変わらないように */
/*	.header .site-name-text{
		font-size: 24px;
	}

}*/

/*768px以下*/
/*834px以下*/
@media screen and (max-width: 834px){
	.header div.header-in {
		min-height: 250px; /* ヘッダーの高さ */
	}
	/* サブタイトル部分の文字をモバイル用に小さくする */
	.tagline {
		font-size: 12px;
  	}

	/* サイト説明の位置；微調整必要 */
	.tagline {
		top: 15px; /* ヘッダーの上から */
		left: 40%;
	}
	.header .logo-text {
		top: 25px; /* ヘッダーの上から */
		left: 38%;
	}

}

/*480px以下*/@media screen and (max-width: 480px){
	.header div.header-in {
		min-height: 150px; /* ヘッダーの高さ */
	}
	/* サブタイトル部分の文字をモバイル用に小さくする */
	.tagline {
		font-size: 10px;
  	}

	/* サイト説明の位置；微調整必要 */
	.tagline {
		top: 10px; /* ヘッダーの上から */
		left: 37%;
	}
	.header .logo-text {
		top: 12px; /* ヘッダーの上から */
		left: 35%;
	}


}