@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 .date-tags {
    display: none;
}
h1 {
	color:#fff;
	background-color:#0019f6;
	text-align:center;
	padding: 25px;
}
/*************************************
top page 
**************************************/
/*logo左寄せ*/
.logo {
	text-align:left;
}
/*グローバルメニューのサブメニューの色*/
#navi .navi-in > .menu-header .sub-menu{
	background-color: rgba(0, 25, 246,0.9);
}
/*アピールエリア タイトル*/
.appeal-title{
	font-size:1.6em;
	font-weight:800;
	letter-spacing:0.08em;
	margin-bottom:0.5em;
}
/*アピールエリア 本文*/
.appeal-message{
    font-size:1.14em;
	font-weight:500;
	letter-spacing:0.08em;
	padding: 10px;
}
/*アピールエリア ボタンホバー時*/
a:hover.appeal-button{
  opacity: 0.8;
  transition:0.3s;
  transform: scale(1.1);
}
/* アピールエリアの背景画像を画面全体に表示 */
.appeal{
    background-size: cover !important;
    background-position: center !important;
}

/*サイドバー　検索窓カスタム*/
input.search-edit{
  border: 1px solid #2ca9e1;/*検索ボックスのボーダー*/
  position: relative;
}
input.search-edit::placeholder{
  color: #aaa;/*placeholderの文字色*/
}
button.search-submit{
  width: 60px;/*検索ボタンの幅*/
  height: 100%;
  background-color: #2ca9e1;/*検索ボタンの色*/
  position: absolute;
  right: 0;
  top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: var(--cocoon-basic-border-radius);
  border-bottom-right-radius: var(--cocoon-basic-border-radius);
  border-bottom-left-radius: 0;
  color: #fff;/*虫眼鏡の色*/
}


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

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

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