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

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

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@800&display=swap');
/* Google Fonts */

.site-name-text{
	font-size: 70px;
	/* 参考…CSSでサイトタイトルのフォントサイズ変更するカスタマイズ例 */
	font-family: 'M PLUS 1', sans-serif;
	/* Google Fonts */
	color: rgba(255,255,255);
	text-shadow:
		3px 3px 9px #4f1f19,
		-3px 3px 9px #4f1f19,
		3px -3px 9px #4f1f19,
		-3px -3px 9px #4f1f19;
}

.tagline{
	font-size: 12pt;
	/* 08044796273　LINEでも24時間予約できます♫ */
	color: rgba(255,255,255);
	text-shadow:
		3px 3px 9px #4f1f19,
		-3px 3px 9px #4f1f19,
		3px -3px 9px #4f1f19,
		-3px -3px 9px #4f1f19;
}

.navi-in .menu-header .item-label{
	font-size: 18px;
	/* グローバルメニュー */
}

#header-container{
background-color: rgba(255,255,255,0);
	/*　例：透過率0.8　20%だけ透過する　*/
	/*　透過率0　100%透過する　*/
	/*　「かみたに接骨院」と「キャッチフレーズ」の背景　*/
}

#header-container .navi,#navi .navi-in>.menu-header .sub-menu{
	background-color: rgba(239,247,249,0.8);
	/* グローバルメニュー背景色 */
	/* 使用しているスキン　Fuwari -海老茶(えびちゃ)　#773c30　より　[作者: アオイ] */
}

#main {
	background-color: rgba(255,255,255,0.9);
}

.wp-block-column{
	background-color: rgba(255,255,255,0.8);
	/* カラムの背景色 */
}

.height-secchan {
  height: 100px !important;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	#header .site-name-text{
	font-size: 40px;
	/* 参考…CSSでサイトタイトルのフォントサイズ変更するカスタマイズ例 */
	text-shadow:
		3px 3px 9px #773c30,
		-3px 3px 9px #773c30,
		3px -3px 9px #773c30,
		-3px -3px 9px #773c30;
	}

}


/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	#header .site-name-text{
	font-size: 40px;
	/* 参考…CSSでサイトタイトルのフォントサイズ変更するカスタマイズ例 */
	text-shadow:
		3px 3px 9px #773c30,
		-3px 3px 9px #773c30,
		3px -3px 9px #773c30,
		-3px -3px 9px #773c30;
	}

}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
	#header .site-name-text{
	font-size: 40px;
	/* 参考…CSSでサイトタイトルのフォントサイズ変更するカスタマイズ例 */
	text-shadow:
		3px 3px 9px #773c30,
		-3px 3px 9px #773c30,
		3px -3px 9px #773c30,
		-3px -3px 9px #773c30;
	}

}