/*
Theme Name:official child
Theme URI:
Description:official_child
Template:official
Author:admin
Author URI:
Version:0.0.8
*/

#site-title,
#search {
display:none;
}

/* フッターメニュー全体のコンテナ設定 */
#menu-footer-menu {
    display: flex; /* 横並びにする */
    flex-wrap: wrap; /* 画面幅が狭い時に折り返す */
    justify-content: center; /* 中央寄せ */
    list-style: none; /* ドット（黒丸）を消す */
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
}

/* 各メニュー項目の設定 */
#menu-footer-menu .menu-item {
    margin: 10px 20px; /* 項目間の余白（上下 左右） */
    padding: 0;
}

/* リンクテキストのスタイル（Cormorant Garamond風） */
#menu-footer-menu .menu-item a {
    text-decoration: none;
    color: #333; /* 文字色 */
    font-family: 'Cormorant Garamond', serif; /* 指定の英字フォント */
    font-size: 14px; /* 文字サイズ（調整可） */
    font-weight: 500;
    letter-spacing: 0.15em; /* 文字間隔を広げて洗練された印象に */
    text-transform: uppercase; /* すべて大文字に強制 */
    transition: opacity 0.3s;
}

/* ホバー時の効果 */
#menu-footer-menu .menu-item a:hover {
    opacity: 0.6;
}

/* スマホ表示での微調整 */
@media (max-width: 767px) {
    #menu-footer-menu {
        justify-content: center;
        gap: 10px;
    }
    #menu-footer-menu .menu-item {
        margin: 5px 10px;
    }
    #menu-footer-menu .menu-item a {
        font-size: 12px;
    }
}


/* CONTACT（menu-item-76）の下に線を入れる設定 */
#menu-main-menu #menu-item-76 {
    border-bottom: 1px solid #ffffff; /* 線の太さ・色（動画に合わせた暗めのグレー） */
    margin-bottom: 25px;           /* 線とCONTACTの間の余白 */
    padding-bottom: 15px;         /* 線の位置調整 */
    width: 100px;                  /* 線の長さを横いっぱいに */
}

/* INSTAGRAM（menu-item-77）の上の余白調整（必要であれば） */
#menu-main-menu #menu-item-77 {
    margin-top: 10px;
}

/* 補足：区切り線以降の項目（INSTAGRAM以降）からリストマーク（-）を消したい場合 */
#menu-main-menu #menu-item-77::before,
#menu-main-menu #menu-item-78::before {
    display: none;
}

/* 共通設定：テキストの右側に画像を配置 */
#menu-item-77 a, 
#menu-item-78 a {
    display: flex;
    align-items: center;
    gap: 10px; /* テキストと画像の間の余白 */
}

/* INSTAGRAMの右側に画像を表示 */
#menu-item-77 a::after {
    content: "";
    display: inline-block;
    width: 30px;  /* アイコンの横幅（適宜調整） */
    height: 30px; /* アイコンの高さ（適宜調整） */
    background-image: url('http://official.calon-dryflower.com/wp-content/uploads/2025/12/ft_instagram01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ONLINE SHOPの右側に画像を表示 */
#menu-item-78 a::after {
    content: "";
    display: inline-block;
    width: 30px;  /* アイコンの横幅（適宜調整） */
    height: 30px; /* アイコンの高さ（適宜調整） */
    background-image: url('http://official.calon-dryflower.com/wp-content/uploads/2025/12/hd_shop.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 補足：もしリストマーク（-）が不要なら消す */
#menu-item-77::before,
#menu-item-78::before {
    display: none !important;
}

/* ロゴ項目（menu-item-90）のカスタマイズ */
#menu-main-menu #menu-item-90 {
    margin-top: 60px !important; /* メニューとロゴの間の余白 */
    list-style: none !important;
}

/* ロゴ前のハイフン（-）を消す */
#menu-main-menu #menu-item-90::before {
    display: none !important;
    content: none !important;
}

/* 「LOGO」というテキストを消して画像を表示 */
#menu-main-menu #menu-item-90 a {
    display: block !important;
    width: 300px; /* ロゴの横幅 */
    height: 300px;  /* ロゴの高さ（表示に合わせて微調整してください） */
    text-indent: -9999px; /* テキスト（LOGO）を画面外に飛ばす */
    overflow: hidden;
    white-space: nowrap;
    
    /* 画像の設定 */
    background-image: url('http://official.calon-dryflower.com/wp-content/uploads/2025/12/top_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ホバー時の透過演出 */
#menu-main-menu #menu-item-90 a:hover {
    opacity: 0.7;
}

/* メニュー本体をスクロール可能にする */
.ue_menu {
    overflow-y: auto !important; /* 縦に溢れたらスクロールを出す */
    max-height: 100vh; /* 画面の高さを最大にする */
    -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかにする */
}

/* 中身の箱の配置を調整 */
.ue_inner_menu-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* 中央寄せではなく上寄せにする（突き抜け防止） */
    padding-bottom: 60px; /* ロゴの下に少し余白を作る */
}

/* ロゴのサイズが大きすぎて崩れるのを防ぐ */
#menu-item-90 img,
#menu-item-90 a {
    max-width: 100%;
    height: auto;
}


/* 1. ズームを停止する（これだけは強制上書き） */
.ue_menu, 
.ue_inner_menu, 
.ue_inner_menu-box {
    transform: scale(1) !important;
}

/* 2. メニュー本体の透明度設定 */
.ue_menu {
    /* display: block !important; は削除（ウィジェットの挙動を邪魔しない） */
    opacity: 0;
    transition: opacity 0.8s ease-in-out !important; /* 背景のフェード速度 */
}

/* 開いた時に背景をフェードさせる */
.outer-menu.menu-opened .ue_menu {
    opacity: 1;
}

/* 3. 中身のリスト（文字）を「もわっと」出す */
#menu-main-menu {
    opacity: 0;
}

/* メニューが開いた（menu-opened）0.3秒後から、1.2秒かけて浮かび上がらせる */
.outer-menu.menu-opened #menu-main-menu {
    animation: simpleMowatto 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes simpleMowatto {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

li#menu-item-67 {
    margin-top: 100px;
}


/* 1. 各メニュー項目（li）を最初は透明にしておく */
#menu-main-menu > li {
    opacity: 0;
}

/* 2. メニューが開いたとき、各項目にアニメーションを適用 */
.outer-menu.menu-opened #menu-main-menu > li {
    /* アニメーション時間を1.6秒に伸ばして、より「もわっと」させます */
    animation: simpleMowatto 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 3. 上から順に 0.2秒ずつ（以前の倍の間隔で）ずらして表示 */
.outer-menu.menu-opened #menu-main-menu > li:nth-child(1) { animation-delay: 0.4s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(2) { animation-delay: 0.6s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(3) { animation-delay: 0.8s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(4) { animation-delay: 1.0s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(5) { animation-delay: 1.2s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(6) { animation-delay: 1.4s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(7) { animation-delay: 1.6s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(8) { animation-delay: 1.8s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(9) { animation-delay: 2.0s; }
.outer-menu.menu-opened #menu-main-menu > li:nth-child(10) { animation-delay: 2.2s; }

/* 600px以上スクロールした時のボタン（三本線）の色 */
.outer-menu.scrolled .ue_hamburger div,
.outer-menu.scrolled .ue_hamburger div::before,
.outer-menu.scrolled .ue_hamburger div::after {
    background-color: #000000 !important; /* 黒色 */
    transition: background-color 0.4s ease; /* 色の変化を滑らかにする */
}

/* メニューが開いている時（背景が黒い時）は、スクロールに関わらず白に戻す */
.outer-menu.menu-opened .ue_hamburger div,
.outer-menu.menu-opened .ue_hamburger div::before,
.outer-menu.menu-opened .ue_hamburger div::after {
    background-color: #ffffff !important; /* 白色 */
}