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

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

/* --- 【最優先】初期状態ではスマホ用ボタンを完全に消去しておく --- */
.sp-btn-tel, .sp-btn-lnk {
  display: none !important;
}

/* --- パソコン画面での配置とデザイン（1024px以上） --- */
@media screen and (min-width: 1024px) {
  /* パソコンではスマホ用を絶対に隠し、PC用を表示 */
  .sp-btn-tel, .sp-btn-lnk { display: none !important; }
  .pc-btn { display: flex !important; }
  
  #header-in { position: relative !important; }

  /* ★タイトルのテキストサイズ */
  .logo-header .site-name-text,
  .logo-header a {
    font-size: 40px !important; 
    font-weight: bold !important; 
  }

  /* 
    【重要】PC用のボタン表示位置
    「padding: 0 18%」を廃止し、「left: 50% / transform: translateX(-50%)」と「max-width: 1200px / padding: 0 20px」に修正。
    大きなモニターでもノートPCでも、常に適切な位置（端側）にボタンを保ち、タイトルと被らないようにします。
  */
  .custom-header-container {
    position: absolute !important;
    top: 90px !important; 
    left: 50% !important; /* 中央基準に変更 */
    transform: translateX(-50%) !important; /* 自身の幅の半分戻して完全に中央寄せ */
    width: 100% !important;
    max-width: 1200px !important; /* これ以上外側に広がらない限界値 */
    display: flex !important;
    justify-content: space-between !important; 
    padding: 0 20px !important; /* 左右の固定余白（ノートPCでも中央に寄らなくなります） */
    box-sizing: border-box !important;
    pointer-events: none !important; 
    z-index: 9999 !important;
    align-items: center !important; 
  }

  .custom-header-left, .custom-header-right {
    pointer-events: auto !important;
  }

  /* 【左側】大きな電話番号（通常時はゴールド） */
  .custom-tel-box.pc-btn {
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, #d4af37, #aa7c11) !important; 
    height: 54px !important; 
    padding: 0 24px !important; 
    border-radius: 27px !important; 
    border: none !important; 
    box-shadow: 0 4px 15px rgba(170, 124, 17, 0.3) !important; 
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
  }
  .custom-tel-box.pc-btn:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #e62129, #9c0c11) !important; 
    box-shadow: 0 6px 20px rgba(230, 33, 41, 0.4) !important; 
  }
  .custom-tel-label {
    font-size: 10px !important;
    color: #ffffff !important; 
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1px !important;
  }
  .custom-tel-num {
    font-size: 20px !important;
    color: #ffffff !important; 
    font-weight: bold !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }

  /* 【右側】大きな問い合わせボタン（通常時はゴールド） */
  .custom-contact-btn.pc-btn {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    font-size: 18px !important;
    background: linear-gradient(135deg, #d4af37, #aa7c11) !important; 
    color: #ffffff !important;
    font-weight: bold !important;
    height: 54px !important; 
    padding: 0 32px !important; 
    border-radius: 27px !important; 
    box-shadow: 0 4px 15px rgba(170, 124, 17, 0.3) !important; 
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }
  .custom-contact-btn.pc-btn:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #e62129, #9c0c11) !important; 
    box-shadow: 0 6px 20px rgba(230, 33, 41, 0.4) !important; 
    color: #ffffff !important;
    text-decoration: none !important;
  }
}

/* --- スマホ・タブレット画面（1023px以下） --- */
@media screen and (max-width: 1023px) {
  /* スマホではPC用を絶対に隠し、スマホ用を表示 */
  .pc-btn { display: none !important; }
  .sp-btn-tel { display: flex !important; }
  .sp-btn-lnk { display: flex !important; }
  
  .custom-header-container {
    display: flex !important;
    position: fixed !important; 
    bottom: 0 !important;      
    left: 0 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.95) !important; 
    padding: 12px 10px !important;   
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1) !important; 
    justify-content: space-around !important; 
    align-items: stretch !important; 
    box-sizing: border-box !important;
    z-index: 99999 !important;  
    pointer-events: auto !important;
  }

  .custom-header-left, .custom-header-right {
    flex: 1 !important;
    text-align: center !important;
    padding: 0 6px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 【左側】スマホ用電話番号ボタン */
  .custom-tel-box.sp-btn-tel {
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;
    background: linear-gradient(135deg, #d4af37, #aa7c11) !important; 
    height: 48px !important; 
    border-radius: 24px !important; 
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .custom-tel-box.sp-btn-tel .custom-tel-num {
    font-size: 15px !important; 
    color: #ffffff !important;
    font-weight: bold !important;
    line-height: 1 !important;
  }

  /* 【右側】スマホ用問い合わせボタン */
  .custom-contact-btn.sp-btn-lnk {
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px !important; 
    background: linear-gradient(135deg, #d4af37, #aa7c11) !important; 
    color: #ffffff !important;
    font-weight: bold !important;
    height: 48px !important; 
    border-radius: 24px !important; 
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    line-height: 1 !important;
  }

  /* --- スマホ時のヘッダー高さを低くスッキリさせる設定 --- */
  /* ヘッダー全体の余白を限界まで削る */
  #header-in {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: auto !important;
  }
  
  /* ロゴ（サイトタイトル）の画像や文字の大きさをスマホ用に最適化 */
  .logo-header {
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .logo-header .site-name-text,
  .logo-header a {
    font-size: 20px !important; 
    line-height: 1.2 !important;
  }

  /* ヘッダーロゴの画像サイズを小さく抑える（画像ロゴをお使いの場合） */
  .logo-header img {
    max-height: 40px !important; 
    width: auto !important;
  }
}

/* 固定ページの日付（公開日・更新日）を完全に非表示にする */
.page .date-tags {
    display: none !important;
}

/* ==========================================================================
   アメブロ風：投稿ページ専用（コンテンツ幅900px化 ＆ 画像上タイトル）
   ========================================================================== */

/* 1. 投稿ページのコンテンツ・関連記事全体の幅を900pxに制限 */
.single-post #content {
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* 2. サイドバーを非表示（1カラム）にしてすっきり見せる */
.single-post #main {
    width: 100% !important;
    max-width: 900px !important;
    padding: 20px !important;
    box-sizing: border-box;
}

/* 3. アイキャッチ（メイン画像）の上にタイトルを重ねる */
.single-post .entry-header {
    position: relative;
    margin-bottom: 30px;
}

.single-post .eye-catch-wrap {
    position: relative;
    width: 100%;
    height: 380px; 
    overflow: hidden;
    border-radius: 8px;
}

.single-post .eye-catch {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(60%); 
}

.single-post .entry-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    text-align: center;
    width: 90%;
    font-size: 22pt !important;
    font-weight: bold;
    margin: 0;
    z-index: 2;
}

/* ==========================================================================
   ブログ記事一覧（/blog/）コンテンツ幅900px化 ＆ 重なり防止
   ========================================================================== */

/* 1. 一覧ページの上部に適切な余白を空けて、ヘッダーとの被りを防ぐ */
body.blog #content,
body.archive #content {
    margin-top: 40px !important; 
}

/* 2. 一覧ページの全体幅を最優先で900pxに固定 */
body.blog #content,
body.archive #content {
    max-width: 900px !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* 3. 一覧ページのメインコンテンツ幅も900pxに最適化 */
body.blog #main,
body.archive #main {
    max-width: 900px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. メイン画像（アピールエリア）の最大幅も900pxに統一 */
body.blog .appeal-area-in,
body.archive .appeal-area-in {
    max-width: 900px !important;
    margin: 0 auto !important;
}