/* モバイルのメニューは隠す */
#my-menu-mobile {
    display: none;
}

#my-menu-nav {
    top: 0px;
    position: fixed;
    width: 100%;
    height: 90px;
    padding: 5px;
    /*background-color: rgba(255, 255, 255, 0.5);*/
    z-index: 9999;
}

#my-menu-items {
    display: flex;
}

#my-menu-item-01 {
    flex-basis: 100px;
}
#my-menu-item-02 {
    flex-basis: 100%;
}

.my-menu-jp {
    color: rgb(0, 0, 0);
    font-size: 16px;
}
.my-menu-en {
    color: dimgray;
    font-size: 12px;
}

/* ナビゲーションを横並びに */
#my-menu-nav ul {
	list-style: none;
	display: flex;
	justify-content: right;
}

/* 2階層目以降は横並びにしない */
#my-menu-nav ul ul {
	display: block;
}

/* 下の階層のulや矢印の基点にするためliにrelativeを指定 */
#my-menu-nav ul li {
	position: relative;
}

/* ナビゲーションのリンク設定 */
#my-menu-nav ul li a {
	display: block;
	text-decoration: none;
	color: #999;
	padding: 20px 20px;
	transition: all .3s;
}
#my-menu-nav ul li li a {
	padding: 10px 10px;
}
#my-menu-nav ul li a:hover {
	color: #fff;	
}

/* 矢印の設定 */

/* 2階層目を持つliの矢印の設定 */
/*
#my-menu-nav ul li.has-child::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 25px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #999;
    border-right: 2px solid #999;
    transform: rotate(135deg);
}
*/

/* 3階層目を持つliの矢印の設定 */
/*
#my-menu-nav ul ul li.has-child::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 17px;
	width: 6px;
	height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
*/

/* 2・3階層目の共通設定 */

/* 下の階層を持っているulの指定 */
#my-menu-nav li.has-child ul {
    /*絶対配置で位置を指定*/
	position: absolute;
	left: -165px;
	top: 85px;
	z-index: 4;
    /* 形状を指定 */
	/* background: #28BFE7; */
	width: 380px;
    /* はじめは非表示 */
	visibility: hidden;
	opacity: 0;
    /* アニメーション設定 */
	transition: all .0.5s;
}

/* サブメニューの表示位置の調整 */
li.has-child2 ul {
	left: -31px !important;
}

/* hoverしたら表示 */
#my-menu-nav li.has-child:hover > ul,
#my-menu-nav li.has-child ul li:hover > ul,
#my-menu-nav li.has-child:active > ul,
#my-menu-nav li.has-child ul li:active > ul {
    visibility: visible;
    opacity: 1;
}

/* ナビゲーションaタグの形状 */
#my-menu-nav li.has-child ul li a {
	color: #fff;
	/* border-bottom: solid 1px rgba(255,255,255,0.6); */
}
#my-menu-nav li.has-child ul li:last-child a {
	border-bottom: none;
}
#my-menu-nav li.has-child ul li a:hover,
#my-menu-nav li.has-child ul li a:active {
    background-color: rgba(255, 255, 255, 0.5);
}

/* 3階層目 */

/* 3階層目の位置 */
#my-menu-nav li.has-child ul ul {
	top: 0;
	left: 182px;
	background: #66ADF5;
}

#my-menu-nav li.has-child ul ul li a:hover,
#my-menu-nav li.has-child ul ul li a:active {
	background: #448ED3;
}


/*-------  スマホサイズ  ---------*/
@media screen and (max-width : 768px) {

    /* PCのメニューは隠す */
    #my-menu-nav {
        display: none;
    }

    #my-menu-mobile {
        display: block;
        top: 0px;
        position: fixed;
        width: 100%;
        height: 90px;
        padding: 5px;
        /*background-color: rgba(255, 255, 255, 0.8)*/;
        z-index: 9999;
    }

    #my-menu-mobile-items {
        display: flex;
    }
    
    #my-menu-mobile-item-01 {
        flex-basis: 100px;
    }
    #my-menu-mobile-item-02 {
        flex-basis: 100%;
    }

    #my-menu-mobile-nav {
        position: fixed;
        z-index: 999;
        top: -200%;
        /* top: -120%; */
        left: 0;
        width: 100%;
        height: 100vh;
        /* background: #999; */
        background-color: rgba(255, 255, 255, 0.85);
        transition: all 0.6s;
    }

    /* アクティブクラスがついたら位置を0に */
    #my-menu-mobile-nav.panelactive {
        top: 0;
    }
  
    /* ナビの数が増えた場合縦スクロール */
    #my-menu-mobile-nav.panelactive #my-menu-mobile-nav-scroll {
        position: fixed;
        z-index: 9999; 
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ナビゲーション */
    #my-menu-mobile-nav ul {
        z-index: 999;
        padding-top: 80px;
        padding-left: 10px;
    }
    #my-menu-mobile-nav ul ul {
        padding-top: 0px;
        padding-left: 20px;
    }

    /* リストのレイアウト設定 */

    #my-menu-mobile-nav li {
        list-style: none;
        /* text-align: center; */
    }

    #my-menu-mobile-nav li a {
        /* color: #333; */
        text-decoration: none;
        padding: 10px;
        display: block;
        /* text-transform: uppercase; */
        /* letter-spacing: 0.1em; */
        /* font-weight: bold; */
    }

    /*========= ボタンのためのCSS ===============*/

    #my-menu-mobile-openbtn {
        position: fixed;
        z-index: 9999; /* ボタンを最前面に */
        top: 20px;
        right: 10px;
        cursor: pointer;
        width: 50px;
        height: 50px;
    }

    /* ×に変化 */
    #my-menu-mobile-openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #666;
        width: 45%;
    }
    #my-menu-mobile-openbtn span:nth-of-type(1) {
        top: 15px;	
    }
    #my-menu-mobile-openbtn span:nth-of-type(2) {
        top: 23px;
    }
    #my-menu-mobile-openbtn span:nth-of-type(3) {
        top: 31px;
    }
    #my-menu-mobile-openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    #my-menu-mobile-openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    #my-menu-mobile-openbtn.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
	
}