@charset "UTF-8";



/*================================================
 *  ヘッダの高さ設定する
 *  ※ 各mediaScreenで調整する
 ================================================*/
 .l-header {
    height: 140px;

}




/******************************************
	headerで読み込むnavi.php用
	
******************************************/
/* PCメニュー */
#n_navi .headerMenuDiv {
    /*display: flex;

    height: 100px;
    overflow: hidden;

    position: relative;
    z-index: 201;       
    */
    /*emanonのheaderの上*/

}

/* スマホメニュー */
#n_navi .headerMenuSpDiv {
    display: none;

}



#n_navi .headerMenuDiv {

    /*background-color: #333;*/
    
    display: flex;
    justify-content: flex-end; /* メニューを右端に寄せる */
    align-items: center; /* コンテンツを縦中央に揃える */
    height: 135px;
    overflow: hidden;
    position: fixed; /* スクロールしても表示されるようにする */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 201; /* emanonのheaderの上 */


}

/* nav内のメニューを横並びにする */
#n_navi .navInner {
    margin: 0 0 80px 0;
    top: 0;
    padding: 20px 0 10px 0px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    background-color: #ffffff;

    position: fixed;

    opacity: 0.9;

}

/* メニューリストのスタイル */
#n_navi .menuul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

/* リストアイテムのスタイル */
#n_navi .menuul li {
    margin: 0 2px; /* 各メニューの間にスペースを設ける */
}

#n_navi .menuul li:after {
    position: absolute;
    /*top: 0.33333vw;*/
    right: -5;
    content: "/";
    font-weight: normal;
}

#n_navi .menuul li:last-child::after {
    content: "";
}



/* リンクのスタイル */
#n_navi .menuul li a {
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s;


    font-family: -apple-system, BlinkMacSystemFont, 
    "Helvetica Neue", "Hiragino Kaku Gothic ProN", 
    "Segoe UI", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: bold;

    transition: color 0.7s; /* スムーズな色変化 */
}

/* ホバー時のスタイル */
#n_navi .menuul li a:hover {
    /*background-color: #555;
    border-radius: 5px;*/

    animation: flash-color 0.7s forwards; /* 一瞬のアニメーション */

}
/* アニメーション定義 */
@keyframes flash-color {
    0% {
      color: #868686; /* 変化する色 */
    }
    100% {
      color:#333; /* 元の色に戻る */
    }
}





/*****************************************
 * Topアイコン
*****************************************/
/* #region Topアイコン */
#n_navi .topicon {
    /*border: 1px solid red;*/    /* デバッグ用 */
    /*width: 130px;*/
    /*height: 160px;*/

}


#n_navi .topicon .header_logo {
    position: fixed; /* スクロールしても表示されるように */
    top: 0;
    left: 0;
    z-index: 101; /* .headernavよりも前面に表示 */

    width: 140px;
    height: 135px;

    text-align: center;
    background: #F59C00;
    border-bottom-right-radius: 20px; /* ここで右下の角を丸くする */

    transition: all 0.5s ease; /* ホバー時のアニメーションをゆっくり */

}
#n_navi .topicon .header_logo:hover {
    background-color: #F59000; /* ホバー時の色 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* ホバー時の影の強さを変更 */
}

#n_navi .topicon .header_logo img.icon {
    width: 100px;
    /*transform: translate(20%, 10%);*/

}
#n_navi .topicon .header_logo div.title {
    display: block;
}
#n_navi .topicon .header_logo div.title p.en {
    /*transform: translate(20%, 10%);*/
    margin: 0 0 0 0;
    font-size: 12px;
    color: white;

}
#n_navi .topicon .header_logo div.title p.jp {
    /*transform: translate(20%, 40%);*/
    margin: 0 0 0 0;
    font-size: 8px;
    color: white;

}
/* #endregion Topアイコン */