@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: 完全オリジナル追従ヘッダーのスタイル
   ========================================================================== */

/* ヘッダー全体の固定と背景（追従設定） */
.my-custom-header {
    position: fixed; /* 画面の上部に固定（追従） */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* 白背景 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* ほんのり影をつけて下のコンテンツと分離 */
    z-index: 9999; /* 一番手前に表示 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ヘッダーの内枠（横幅の制限と中央寄せ） */
.my-custom-header__inner {
    max-width: 1200px; /* 画像のサイズ感に合わせる */
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between; /* ロゴとメニューを左右に離す */
    align-items: center; /* 縦方向を中央揃え */
}

/* 左側：ロゴエリア */
.my-custom-header__logo a {
    text-decoration: none;
    display: flex;
    flex-direction: column; /* 文字を縦並びに */
}
.my-custom-header__logo-text {
    font-size: 22px;
    font-weight: bold;
    color: #4a3e3d; /* 画像に近い上品なダークブラウン */
    letter-spacing: 0.05em;
}
.my-custom-header__logo-sub {
    font-size: 10px;
    color: #8c7e7c; /* 薄いブラウン */
    margin-top: 4px;
}

/* 右側：ナビゲーションエリア */
.my-custom-header__nav {
    display: flex;
    flex-direction: column; /* 2段メニューにするため縦並び */
    gap: 12px; /* 上段と下段の隙間 */
}

/* メニュー共通ルール */
.my-custom-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    gap: 20px; /* メニュー文字同士の隙間 */
}

.my-custom-header__menu a {
    text-decoration: none;
    color: #4a3e3d; /* 文字色 */
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

/* ホバー（マウスを乗せた時）の演出 */
.my-custom-header__menu a:hover {
    color: #a68b7c; /* 一条工務店風の淡いアクセントカラーに変化 */
}

/* アイコン（絵文字）の微調整 */
.my-custom-header__menu .icon {
    margin-right: 6px;
    font-size: 14px;
}

/* 上段メニュー特有の設定（文字を少し小さめに） */
.my-custom-header__menu--top a {
    font-size: 12px;
    color: #615553;
}

/* --- Cocoonの元のヘッダーを完全に消すための保険（競合回避） --- */
#header, .header {
    display: none !important;
}

/* ヘッダーが固定されて浮いている分、コンテンツの開始位置を下に下げる */
#content {
    margin-top: 100px; /* ヘッダーの高さ分、上部に余白を作る */
}

/* スマホ対応（レスポンシブ）：画面が狭いときは縮小、または縦並び */
@media screen and (max-width: 992px) {
    .my-custom-header__inner {
        flex-direction: column;
        gap: 10px;
    }
    .my-custom-header__menu {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
}