@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){
  /*必要ならばここにコードを書く*/
}

	/************************************
** アクセスページの設定いろいろ
************************************/

/* 3カラムの間に矢印を入れる */
.arrow-columns .wp-block-column:not(:last-child) {
    position: relative;
    padding-right: 80px; /* 矢印のスペースを確保 */
}

.arrow-columns .wp-block-column:not(:last-child)::after {
    content: "▶︎"; /* 矢印の記号 */
    position: absolute;
    right: 5px; /* 右側の余白調整 */
    top: 50%; /* 上下中央に配置 */
    transform: translateY(-50%);
    font-size: 50px; /* 矢印のサイズ */
    color: #2093d6; /* 矢印の色 */
}

/* スマホでは矢印を非表示にする（任意） */
@media (max-width: 768px) {
    .arrow-columns .wp-block-column:not(:last-child)::after {
        content: ""; /* 内容を空にして消す */
    }
    .arrow-columns .wp-block-column {
        padding-right: 0 !important;
    }
}





/************************************
** アコーディオンの見出しを左詰めにする
************************************/
.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-1885 .entry-title {
    color: #f78da7;
}
	.page-id-1883 .entry-title {
    color: #8bc34a;
}

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