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

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

/*グローバルメニュー 文字の大きさを変更*/
#navi .navi-in > .menu-header .item-label{
	font-size: 16px;
}

/*グローバルメニュー リストを固定幅ではなくautoにする*/
/*グローバルメニューの高さ変更*/
.navi-in>ul li{
	position: relative;
	height:84px;
	line-height:84px;
	width:auto;
}

/*余白*/
/*
#appeal {
  height: 20vw;
}
*/


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

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

/*余白*/
#appeal {
  height: 20vw;
}

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


/** 以下、追加したCSS **/

/*アピールエリアの画像*/
#appeal { 
height: calc(100vw * calc(581 / 1980)); 
}

/*アピールエリアのテキスト背景の透明*/
.appeal-content {
	background: none;
	text-align:center;
	/*vertical-align:middle;*/
	height:40px;
	line-height:40px;
	/*margin:0 auto;*/
}


@media only screen and (min-width: 1200px) {
.appeal-content {
		height: 40px;
		line-height: 40px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
.appeal-content {
		height: 35px;
		line-height: 35px;
	margin:0 auto;
	}
}

@media only screen and (max-width: 767px) {
.appeal-content {
		height: 1.6em;
		line-height: 1.6em;
	margin:0 auto;
	}
}


/* アピールエリアタイトル文字の色とサイズ、影 */
.appeal-title {
	color: #fff;
	text-shadow: 1px 2px 3px #ffd399;
	font-family:  "Meiryo", "メイリオ", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "sans-serif", serif;
	/*font-size:62px;*/
	font-weight: normal;
	line-height: 1;
	letter-spacing: .08em;
}

@media only screen and (min-width: 1200px) {
	.appeal-title {
		font-size: 375%;
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1500px) {
	.appeal-title {
		font-size: 344%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.appeal-title {
		font-size: 250%;
	}
}

@media only screen and (max-width: 767px) {
	.appeal-title {
		font-size: 150%;
	}
}

/* アピールエリアメッセージ文字の色とサイズ、影 */
.appeal-message {
	text-align: center;
	color: #FFF;
	display: block;
	font-family:  "Meiryo", "メイリオ", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "sans-serif", serif;
	/*font-size:28px;*/
	letter-spacing: .1em;
	text-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}

@media only screen and (min-width: 1200px) {
.appeal-message {
		font-size: 175%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
.appeal-message {
		font-size: 150%;
	}
}

@media only screen and (max-width: 767px) {
.appeal-message {
		font-size: 107%;
	}
}

/* ヘッダーロゴの設定 */
.logo-header {
  padding: 30px 10px  20px 10px;
}

/*グローバルメニューの高さ、フォントサイズ等変更*/

.navi-in .menu-header .item-label{
	font-size: 22px;
	font-family:  "Meiryo", "メイリオ", "游ゴシック体", "YuGothic", "Yu Gothic Medium", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "sans-serif", serif;	
}

.navi-in .menu-header .item-label:after{
	content: '/';
	position: absolute;
	right: -.3em;
	color: #d2d2d2;
}


.sidebar h3 {
    background: none; /*背景色を解除*/
    padding: 0; /*余白をなしに*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
}
.sidebar h3:first-letter {
    font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
	color:#007712;
}
.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%);
}



/* -----------------------------------------------------------
　ヘッダー・フッターの非表示
----------------------------------------------------------- */
#header, #footer {
  display:none;
}



/* -----------------------------------------------------------
　モバイルメニューの非表示
----------------------------------------------------------- */
.mobile-menu-buttons .home-menu-button {
	display: none;
}

.mobile-menu-buttons .sidebar-menu-button {
	display: none;
}