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

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

/* --- パソコン用の高さ指定 --- */
@media screen and (min-width: 835px) {
  #appeal { 
height: 60vw; 
} /* PCでの高さを指定 */
}

  }
}
/*アピールエリアの表示仕様変更*/
.appeal {
  background-size: cover !important;
}
.appeal {
  background-repeat: no-repeat;
  background-position: center center;
}

/* PC時メインビジュアルの表示位置を調整したい場合は以下を変更する */
.skin-grayish.front-top-page .container .header-container .header {
	background-position: top center;
}	

/*カラム、ヘッダー、フッター、サイドバーの背景を透明化*/
.header-container, 
.main, 
.sidebar, 
.footer 
{
  background-color: transparent;
}

/*見出し変更「文字の背景に円を配置」*/

/*お知らせ欄スクロール化*/

/*TOPのカバー動画を背景動画フルサイズに*/

/*TOPカバー画像上部の余白をなくす*/


/*TOPカバー要素の重なり順の調整*/

/*スマホでも2カラムを横表示にする*/

/*ヘッダーの文字と背景の色を変える*/

/* フッターモバイルボタン透明背景色（スマホ） */



/*768px以下でロゴの大きさ変更*/
/*スライドインメニューをカスタマイズ*/

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
#appeal {
background-image: url(https://petsym.com/wp-content/uploads/2026/06/381e43aeef7c115e548a584638461b6d.png) !important;
    }
/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 834px){ 
#appeal { 
height: 150vw; 
}
}

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