@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.header {
	height: 80px;/*ヘッダーの幅をロゴに合わせる*/
	background-color: #f3f1f2;/*ヘッダー色を背景と揃える*/
}
h2 span, h3 span {/*目次のジャンプ先の位置調整*/
    /*display: block;*/
    padding-top: 70px;
    margin-top: -70px;
}
.site-logo-image {/*ロゴ画像*/
	position: fixed;/*スクロール時固定*/
	top: 0;/*位置を最上部に*/
	left: 0;/*位置を左に*/
	z-index: 10000;/*上に表示*/
	width: 80px;
	height: 80px;
}
.navi-in {/*PC用ナビゲーション*/
	position: fixed;/*スクロール時固定*/
	top:0;/*位置を最上部に*/
	left: 80px;/*ロゴの右に来るように*/
	z-index: 10000;/*最上層に表示*/
	background-color: rgba(243,241,242,0.8);/*背景色と透過*/
	width: 720px;/*全体の幅をボタン幅の合計に揃える*/
}
.navi-in > ul li {/*PC用ナビゲーションボタン*/
	width: 120px;/*幅の縮小*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

/*768px以下*/
/*@media screen and (max-width: 768px){*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.header {
		height: 50px;/*ヘッダーの幅をロゴに合わせる*/
	}
	.site-logo-image {
		width: 50px;
		height: 50px;
	}
	.slicknav_menu {/*モバイル用ヘッダー*/
		position: fixed;/*スクロール時固定*/
		right: 0;/*右寄せ*/
		z-index: 10000;/*上に表示*/
		background: none;
	}
	.slicknav_btn {/*ボタン*/
		background-color: #4c4c4c;
	}
	.slicknav_nav {/*開かれたときのナビゲーション*/
		background-color: #4c4c4c;
	}
}

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