@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){
  /*必要ならばここにコードを書く*/
}
/* 1. PC・スマホ共通：ヘッダーの余白を消して天辺に詰める */
.header-in, .logo, .tagline { display: none !important; }
#header, .header, .header-container {
    background: transparent !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. PC：メニューだけを天辺に横並びで表示 */
.navi { display: block !important; margin-top: 0 !important; }

/* 3. スマホ：画像上の「モヤ・網目・暗さ」を物理的に消滅させる */
.site-header-overlay, .site-header-overlay::after, .site-header-overlay::before,
.header-overlay, .appeal::before, .appeal::after {
    display: none !important;
    content: none !important;
    background: none !important;
}
#appeal, .appeal, .appeal-in {
    filter: none !important;
    opacity: 1 !important;
}

/* 4. スマホ：下の不要なボタン（星マーク等）を消す */
@media screen and (max-width: 480px) {
    .appeal-in { min-height: 140px !important; background-size: contain !important; }
    .footer-mobile-buttons { display: none !important; } /* 下のボタンを消去 */
    /* 上の3本線が見えやすいよう調整 */
    .mobile-header { background: rgba(255, 255, 255, 0.5) !important; }
}
/* --- 二重表示を解消し、スマホ・タブレットを1枚に固定 --- */

/* 1. PC以外のすべてのデバイス（幅1300pxまで）の設定 */
@media screen and (max-width: 1300px) {
    .appeal {
        /* 元の背景画像を完全に消去 */
        background-image: none !important;
    }
    .appeal-in {
        /* スマホ・タブレット用画像を強制指定 */
        background-image: url("https://www.salondemurata.com/wp-content/uploads/2025/12/2ｗｐアピールエリア・スマホ-1200-x-1000-px.png") !important;
        
        /* 画像全体を表示し、二重化を防ぐ */
        background-size: contain !important; 
        background-repeat: no-repeat !important;
        background-position: center top !important;
        
        /* 画像の比率(1200:1000)に合わせて高さを固定 */
        height: 0 !important;
        padding-top: 83.33% !important; 
        min-height: 0 !important;
    }
}

/* 2. 余白とモヤを徹底的に消す */
.header-in, .logo, .tagline, 
.site-header-overlay, .site-header-overlay::after, .site-header-overlay::before, 
.header-overlay, .appeal::before, .appeal::after {
    display: none !important;
    background: none !important;
    content: none !important;
}

#header, .header, .header-container {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

#appeal, .appeal, .appeal-in {
    filter: none !important;
    opacity: 1 !important;
}

/* 3. PC：メニュー設定（天辺に表示） */
.navi { display: block !important; margin-top: 0 !important; }