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

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

.body{
   font-family: Arial, Verdana, sans-serif;	
  /* letter-spacing: 0.08em; */
}

/************************************
** リンクの下線を消す
************************************/
a{
text-decoration: none;
}





/************************************
** 見出し
************************************/
.article h2{
 background: transparent;
}

.article h3{
 background: transparent;
border: none;
}

.article h4{
 background: transparent;
border: none;
}

.article h5{
 background: transparent;
border: none;
}

.article h6{
 background: transparent;
border: none;
}


/************************************
** フルワイド
************************************/
/* Full画面幅（カバー等をフルワイドに設定） */
.full-width {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	padding-top: 10px; /* 不要なら削除または、任意の数値を設定してください */
	padding-bottom: 10px; /* 不要なら削除または、任意の数値を設定してください */
}


/*アピールエリアの下のライン*/
.appeal{
	border-bottom: solid 20px #ab2626;
}


/*アピールエリアの下の余白を調整する*/
.main{
	padding-top: 0px;
	
}




/********************************************************
** レスポンシブデザインの設定
*********************************************************/
/************************************
** レスポンシブデザイン用のメディアクエリ 1023px以下
************************************/

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

	
  /*モバイルでの通知エリアの色変更*/
	#notice-area {
 		 background-color: #c62d2d ;　}	
	


	

}


/************************************
** レスポンシブデザイン用のメディアクエリ 834px以下
************************************/

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	
		/* アピールエリア モバイルは別画像を表示 */
.appeal {
	background-image: url( https://rakugoshow.com/ko/wp-content/uploads/2025/06/apeal_area_mobile_ko.jpg ) ;
	min-height:100vw; /* 最低の高さを画面の横幅サイズと同じ長さに設定 */
 	}
	
	
	
	
}




/************************************
** レスポンシブデザイン用のメディアクエリ 480px以下
************************************/

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






/************************************
** グローバルメニューの色変更
************************************/
/*英語*/
#menu-item-36 {
  background-color: #9d1212;
}

/*中文*/
#menu-item-37 {
  background-color: #0370b9;
}

/*韓国語*/
#menu-item-38 {
  background-color: #cea024;
	color: #42535f;
	font-weight: bold;
}




/************************************
** アピールエリアの背景画像がきちんと可変する設定【大事】
************************************/

#appeal { 
height: calc(100vw * calc(900 / 2000)); 
}




/************************************
** 通知エリアの文字カスタマイズ
************************************/
.notice-area {
		font-weight: bold ;
	}