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

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

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



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

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

/************************************
** アコーディオンの見出しを左詰めにする
************************************/
.toggle-button {
	text-align: left;
}


/* ヘッダー全体をフレックスボックス化 */
#header .header-in {
    display: flex;
    flex-direction: row-reverse; /* 要素を逆順（SNS, ロゴ）に */
    justify-content: space-between; /* 両端に配置 */
    align-items: center; /* 垂直方向中央揃え */
}
/* 必要に応じてSNSアイコンのサイズを調整 */
.header-in .sns-follow-buttons {
    margin: 0;
}


/************************************
** ブッキングパッケージカスタマイズCSS
************************************/

.bp_calendar_id_3 .bp_calendar_header {
    background-color: #f78da7 !important; /* 背景色 */
    color: #696969 !important;           /* 文字色 */
}

.bp_calendar_id_4 .bp_calendar_header {
    background-color: #8bc34a !important; /* 背景色 */
    color: #696969 !important;           /* 文字色 */
}

.bp_calendar_id_5 .bp_calendar_header {
    background-color: #f39800 !important; /* 背景色 */
    color: #696969 !important;           /* 文字色 */
}


/************************************
** 【予約】ページのカスタマイズCSS
************************************/
	.page-id-359 .entry-title {
    color: #f39800;
}
	.page-id-356 .entry-title {
    color: #8bc34a;
}

.post-354 .entry-title {
    color: #f78da7; /* 文字色 */
}