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

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

/* ヘッダーとアピールエリアの圧縮 2026-11-09 */
.header-in { padding-top: 8px; padding-bottom: 8px; }
.header-site-logo-image { max-height: 54px; width: auto; }
.appeal-in { padding-top: 16px; padding-bottom: 16px; }
.appeal-title { font-size: 17px; line-height: 1.4; margin-bottom: 6px; }
.appeal-message { font-size: 13px; line-height: 1.6; }
.appeal-message p { margin-top: 0; margin-bottom: 0; }

/* 実際のクラス名・詳細度に合わせた補正 2026-11-09 */
.header div.header-in { padding-top: 8px; padding-bottom: 8px; }
.site-logo-image { max-height: 54px; width: auto; }
.logo-image { max-height: 54px; width: auto; }
.appeal.appeal-in { padding-top: 16px; padding-bottom: 16px; }
.appeal { padding-top: 16px; padding-bottom: 16px; }
.appeal.appeal-content { padding-top: 16px; padding-bottom: 16px; }

/* 海カラー統一 2026-11-10 */
.appeal-button { background-color: #FF7A29; }
/* 詳細度補正：テーマ設定のボタン色より優先させるため */
#appeal .appeal-button { background-color: #FF7A29; }

/* フッターモバイルボタンの高コントラスト化 2026-11-10 */
/* 実クラス名（テーマのテンプレートとSCSSで確認）：.mobile-menu-buttons / .mobile-footer-menu-buttons、項目 .menu-button、アイコン .menu-icon、ラベル .menu-caption */
.mobile-menu-buttons.mobile-menu-buttons { background-color: #0A3D62; color: #FFFFFF; }
.mobile-menu-buttons.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons.mobile-menu-buttons .menu-button > a:visited { color: #FFFFFF; }
.mobile-menu-buttons.mobile-menu-buttons .menu-icon,
.mobile-menu-buttons.mobile-menu-buttons .menu-caption { color: #FFFFFF; }
.mobile-menu-buttons.mobile-menu-buttons .menu-caption { opacity: 1; }

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