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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
#header .logo .site-name-text {
	font-size:28px;	
}
main.main {
	padding: 0px 16px 0px 16px;
}	

.header-in {
  position: relative;
}
.custom-header-banner {
  position: absolute;
  top: 35px;
  right: 0px;
  z-index: 10;
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	#header .logo .site-name-text {
		font-size:1em;	
	}
	.content-top,.content-bottom {
		margin: 0 0;
	}
	.content {
        margin-top: 0;
    }	
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	#header .logo .site-name-text {
		font-size:1em;	
	}
    .custom-header-banner {
        display: none; /* モバイルでは非表示にしたい場合 */
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	#header .logo .site-name-text {
		font-size:1em;	
	}
	.custom-header-banner {
        display: none; /* モバイルでは非表示にしたい場合 */
    }
}

.appeal-content {
	text-align:left;
	vertical-align: middle;
	padding: 25px 25px 10px 25px;
}
.appeal-in.appeal-in.wrap{
	padding: 15px;
}

.main {
	padding: 0 29px 0 29px !important;
	border: 0  !important;
}
.entry-content{
	margin-top: 0;
}

.content .content cf{
	margin-top: 0;
}

@media screen and (min-width: 1024px){
	/* ヘッダーをスクロール時に画面上部に固定表示 */
	#header {
		position: fixed !important; /* スクロール時に固定 */
		top: 0;
		left: 0;
		width: 100%;
		height: 110px;
		z-index: 9999; /* 他の要素の上に配置 */  
		margin-top: 0; /* 上の余白をなくす */
		background-color: rgba(255,255,255,1); /* 必要に応じて背景色 */
	}	

	/* コンテンツがヘッダーの下に隠れないように調整　*/
	body {
		padding-top: 150px; /* ヘッダーの高さ（例えば60px）分の余白　*/
	}

	/* 管理者バーが表示されている場合 */
	body.admin-bar {
		padding-top: calc(85px + 32px); /* 170px（ヘッダーの高さ） + 32px（管理者バーの高さ） */
	}
	
	/* グローバルナビをヘッダーの下に固定表示 */
	#navi.navi {
		position: fixed; /* スクロール時に固定 */
		top: 110px; /* ヘッダーの高さ分だけ下にずらす */
		left: 0;
		width: 100%;		
		z-index: 9998; /* ヘッダーより少し下に配置 */  
	}
	#navi ul li {
    	height: 40px;
	}	
	.appeal-content {
		padding-top: 5px;
		padding-bottom: 3px;
		height: 150px;
	}
	.appeal-in {
		min-height:180px;
	}
}