@charset "UTF-8";
.wrap{
	max-width:960px;
	margin:0 auto;
}
.hdr_top{
	background: linear-gradient(90deg,  #FFF 65%, #09f 35%);	
	height:40px;
}

#mMenu{
    list-style: none;
    text-align: center;
    color:#FFF;/*メニュータイトル文字色／color of menu title*/ 
}

#mMenu li a{
    color:#333;
    width: 100%;
    height: 100%;
    display:block;
}
#mMenu li a:hover{
    background: #999;
    color: #fff;
}
#mMenu_switch{
    display: none;
}
#mMenu_title div,#mMenu_buttonBox{/*　タイトルとBOXのCSS*/
	background-color:#0066cb;
	left: 5px;
	border: 1px solid #999; 
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	}
#mMenu li.mMenu_item{
    background-color: #FFF;/*メニュー背景色*/

}


.value{
	float:left;
	font-size: x-small;
	color: #666;
	margin-top: 10px;
}
/*PC用　翻訳ボタン*/
.Pc_translation{
	float:right;
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: skew(30deg) ;/*BOXを斜めにする*/
}
.Pc_translation li{
	height:40px;
    float: left;
}
.Pc_translation li:hover{
    background: #2d85ba;
}
.Pc_translation li:first-child{
    border-radius: 1px 0 0 1px;
}
.Pc_translation li a{
    display: block;
    padding: 0.5em 2em;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transform: skew(-30deg);/*文字を斜め*/
}
.En{
	background: #06C;
	border-right:#FFF 2px solid;
}
.Ch{
	background: #09C;
	border-right:#FFF 2px solid;
}
.Co{
	background: #09f;
}

.mLogo{
	display: block;
	width: 400px;
	height: 60px;
	background-image: url(../image/logo_top.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	color: #666;
	}



/* 画面サイズが768px以下の場合に適用 =Mobile*/
@media screen and (max-width: 768px) {
/*-------［　ヘッダー背景　］-------*/
	.hdr_inr{
		width: 100%;
		margin:10px 0;
		height:70px;
		background-image: url(../image/logo_top@2x.png);
		background-size:70%;
		background-repeat: no-repeat;
		background-position: center;
	}
	#mMenu{		
		width:100%;
		margin: 0;
		padding:0;
		z-index: 10;
	}
	
/*-------［　スマホ用メニューの大きさ　］-------*/
	#mMenu_title div,#mMenu_buttonBox{
		width: 52px;/*　BOX横幅　*/
	}
	#mMenu_title,#mMenu_title div{
		height: 20px;/*　タイトル縦幅　*/
	}
	#mMenu_button,#mMenu_buttonBox{
		height: 35px;/*　BOX縦幅　*/
	}
	/*右上メニュー　文字の部分／menu title. you can chante text,size,etc...*/
	#mMenu_title{
		font-size: 10px;
		text-align: right;
	}
	#mMenu_title div{
		position: absolute;
		top: 10px;
		border-bottom: transparent; /* 下辺を透明に */
		border-radius:4px 4px 0 0 ; 	
	}
		#mMenu_title span::after{
			content: "MENU";/*右上メニューの文字／text of upper-right menu*/
			width: 100%;
			position: absolute;
			bottom: 0;
			right: 0;
			text-align: center;
		}
		#mMenu_switch:checked ~ #mMenu_title span::after{
			content: "CLOSE";/*右上メニューの文字（メニューが開いている時）*/
		}
		#mMenu_buttonBox{/*　BOXの位置　*/
			position: absolute;
			top: 40px;
			border-top: transparent; /* 上辺を透明に */
			border-radius: 0 0 4px 4px;
			
		}
		#mMenu_title ~ #mMenu_button #mMenu_buttonBox{
		top: 30px;
	}

	#mMenu_buttonBox div,#mMenu_buttonBox div::before,#mMenu_buttonBox div::after{
		width: 34px;/*BOXの線幅*/
		height: 2px;
		margin: auto;
		position: relative;
		top: 14px;/*　線全部の位置　*/
		background-color: white;
	}
#mMenu_buttonBox div::before,#mMenu_buttonBox div::after{
    content:"";
    margin: 0 auto;
    top: -8px;
    display: block;
}
	#mMenu_buttonBox div::after{/*　線3本目　*/
		top: 6px;
	}
	#mMenu_switch:checked ~ #mMenu_button #mMenu_buttonBox div,
	#mMenu_switch:checked ~ #mMenu_button #mMenu_buttonBox div::after{
		width: 40px;/*　×のサイズ　*/
		transform: rotate(45deg);
	}
	#mMenu_switch:checked ~ #mMenu_button #mMenu_buttonBox div::after{
		top: 0;
		transform: rotate(90deg);
	}
	#mMenu_switch:checked ~ #mMenu_button #mMenu_buttonBox div::before{
		display: none;
	}
	#mMenu_switch:checked ~ li.mMenu_item{
		display: list-item;
	}
	#mMenu_switch:checked ~ label #mMenu_bg{
		display: block;
	}
	#mMenu_switch ~ li.mMenu_item,#mMenu_switch ~ label #mMenu_bg{
		display: none;
	}
	#mMenu li.mMenu_item{
		font-size:20px;
		line-height: 80px;/*スマホ用リストの高さ*/
		position: relative;
	}	
	.bb{
		border-bottom:solid 1px #666;
	}
	
/*-------［　日本語・英語・中国語Mobaile版menu　］-------*/	
	
	.translation{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.translation li{
		width:33%;
	}
	.Bk{
		background-color:#006;		/*背景色*/
	}
	.Bk a{
		color:#FFF !important;
	}
	.Wh{
		background-color:#fff;	/*背景色*/
		}
	.Wh a{
		color:#333 !important;
	}
	
	#mMenu_bg{
		width: 110vw;
		height: 150vh;
		position: fixed;
		top: -30vh;
		left: -10vw;
		z-index: 5;/*奥行き手前程数字が大きい*/
		background-color: rgba(0, 0, 0, 0.5);
	}
	#mMenu *:not(#mMenu_bg){
		z-index: 10;
	}
	#mMenu{
		pointer-events: none;
	}
	#mMenu_buttonBox,#mMenu_bg,#mMenu li.mMenu_item{
		pointer-events: auto;
	}
	
	.mobile-no{			
		display:none;
	}
}

/* 画面サイズが768px以上の場合に適用 =PC*/
@media screen and (min-width: 768px) {
    #mMenu{
        width: 100%;
        padding: 0;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 2px;
    }
    #mMenu li{
        line-height: 40px;/*PC用リストの高さ*/
		float:left;
    }
	.mMenu_item	{
		display:inline-block;
		width:16.6%;
		position: relative;
		float: left;
		height: 100%;
		text-align: center;	
	}
	.Nav01{
		border-bottom:solid 3px #133890;
	}
	.Nav02{
		border-bottom:solid 3px #66CC66;
	}
	.Nav03{
		border-bottom:solid 3px #2585B9;
	}
	.Nav04{
		border-bottom:solid 3px #E5E135;
	}
	.Nav05{
		border-bottom:solid 3px #FB9B0F;
	}
	.Nav06{
		border-bottom:solid 3px #EE5F61;
		font-size:0.9em;
		letter-spacing: -1px;
		padding-left: 1px !important;/*３*/
		padding-right: 1px !important;/*３*/
	}
    #mMenu_title,#mMenu_button,#mMenu label{
        display: none;
    }
	.pc-no{			
	display:none;
	}
}