@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 .mobile-footer-menu-buttons {
    background-color: #F58220;
    background-image: none; /* スキンの模様を消す */
    color: #FFFFFF; /* アイコンと文字を白に */
    border-top: 2px solid #D96A10; /* 上に少し濃いオレンジの線 */
}

/* 各ボタンの文字とアイコンの色指定 */
body .mobile-footer-menu-buttons .mobile-menu-button a {
    color: #FFFFFF;
}

/* ボタン同士の区切り線（薄い白にしてなじませる） */
body .mobile-footer-menu-buttons .mobile-menu-button {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* 一番左の線の調整 */
body .mobile-footer-menu-buttons .mobile-menu-button:first-child {
    border-left: none;
}

/* --- ロイヤルホスト風カスタマイズ --- */

/* H1（記事タイトル）：文字と下線をオレンジに */
.article h1 {
    color: #F58220;
    border-bottom-color: #F58220;
}

/* H2（大見出し）：背景をオレンジ、文字を白に */
.article h2 {
    background-color: #F58220;
    color: #FFFFFF;
    border: none; /* もともとの枠線を消す */
}

/* H3（中見出し）：左側の線をオレンジに */
.article h3 {
    border-left-color: #F58220;
    /* もし下線タイプの場合は以下を使用 */
    /* border-bottom-color: #F58220; */
}

/* ヘッダーメニュー（ナビゲーション）：背景をオレンジに */
.navi-bg {
    background-color: #F58220;
}

/* ヘッダーメニューの文字色（オレンジ背景の上なので白に） */
.navi-in a {
    color: #FFFFFF;
}

/* ヘッダーメニュー ホバー時（マウスを乗せた時）少し濃く */
.navi-in a:hover {
    background-color: #D96A10; /* 少し暗いオレンジ */
    color: #FFFFFF;
}

/* サイドバーの見出し：背景をオレンジ、文字を白に */
.sidebar h3 {
    background-color: #F58220;
    color: #FFFFFF;
}

/* ページネーション（ページ送り）：現在のページをオレンジに */
.pagination .current {
    background-color: #F58220;
    border-color: #F58220;
}

/* カテゴリーラベルの色 */
.entry-card-category {
    background-color: #F58220;
}

/* --- ロイヤルホスト化：サイドバーとフッター --- */

/* 1. サイドバーの見出し（「最近の投稿」などの茶色い帯） */
body .sidebar h3 {
    background-color: #F58220; /* ロイヤルオレンジ */
    color: #FFFFFF;
}

/* 2. 検索ボタン（「検索」の黒っぽいボタン） */
.search-submit {
    background-color: #F58220;
    color: #FFFFFF;
}

/* 3. ページトップへ戻るボタン（PAGE TOPの帯） */
.go-to-top-button {
    background-color: #F58220;
    color: #FFFFFF;
}

/* 4. フッター（一番下の大きなエリア） */
/* ここはオレンジ一色だと眩しい場合があるので、2パターン用意しました */

/* 【パターンA：全部オレンジにするならこちら（元気な印象）】 */
#footer {
    background-color: #F58220;
    color: #FFFFFF;
    border-top: 3px solid #FFFFFF; /* 境界線を入れて見やすく */
}
.copyright {
    background-color: #d36b15; /* 最下部だけ少し濃くして境界を作る */
}

/* 【パターンB：ロイヤルホストの看板風にするならこちら（高級感・推奨）】 */
/* 看板の下地のような「濃いこげ茶」にして、オレンジを引き立てます */
/*
#footer {
    background-color: #3E2723; 
    color: #FFFFFF;
    border-top: 5px solid #F58220; 
}
.copyright {
    background-color: #281815; 
}
*/

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

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

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