@charset "UTF-8";

/*=========================================================================================================
HEADER
=========================================================================================================*/

/*■■■■■■■■■■■■■【 MENU AREA  SETTING 】■■■■■■■■■■■*/
header {
	width: 100%;
	height: 70px;
	background: rgba(255, 255, 255, 1);
	border-bottom: solid 0.15em rgba(220,220,220,0.5);
	position: fixed;
	top: 0;
	z-index: 999;
	
	/*
	background: blue;*/
	}
#MNU {
	width: 100%;
	height: 70px;
	
	position: relative;
	}

/*.【 LOGO 】==================================================■*/
#LOGO a{
	width: 50px;
	height: 25px;
	overflow: hidden;
	position: absolute;
	top: 24px;
	left: 25px;
    z-index: 999;
    }
.LGK,.LGK2{
	fill: #8FBE00;
	transition: all 300ms;
	}
.LGK3{
	fill: rgba(0,0,0,0);
}
#LOG-TXT::before{
	width: 115px;
	height: 22px;
	content: "ココロnet TOP";
	padding: 0 auto;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	color: rgba(40,180,0,0.8);
	opacity: 0;
	position: absolute;
	top: -20px;
	left: -10px;
	transition: all 300ms;
}
/*..《《 LOGO KKRnet  SETTING 》》_____________________●*/
#LOGO_K a{
	width: 100px;
	height: 22px;
	
	position: absolute;
	top: 50%;
	left: 90px;
	transform: translateY(-50%);
	z-index: 1;
	
}
#LOGO_K svg{
	width: 100%;
	position: relative;
	left: 2px;
}
/*..《《 LOGO KKRnet  SETTING / END 》》_________________*/

/*.【 LOGO / END 】==============================================*/

/*.【 MENU_UNIFORM 】==========================================■*/
#UNF{
	display: none;
}
/*.【 MENU_UNIFORM / END 】======================================*/

/*.【 SNS 】===================================================■*/
#SNS{
	width: 68px;
	height: 28px;
    display: flex;
	justify-content: space-around;	
	position: absolute;
	top: 22px;
	right: 20px;
	
}

.SNS_svg{
	width: 28px;
	height: 28px;
	border-radius: 15px;
	overflow: hidden;
	fill:#8FBE00;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 300ms;
}
.fac, .eng{
	fill: #FFFFFF;
}

#SNS .LIST_SNS:nth-of-type(-n + 2)::before{
	content: "";
	font-size: 14px;
	letter-spacing: 1px;
	color: rgba(40,180,0,0.8);
	opacity: 0;
	position: absolute;
	top: -20px;
	transition: all 300ms;
}
#SNS .LIST_SNS:nth-child(1)::before{
	content: "facebook";
	left: -38px;
}
#SNS .LIST_SNS:nth-child(2)::before{
	content: "English";
	left: -30px;
}
/*.【 SNS / END 】===============================================*/
/*■■■■■■■■■■■【 MENU AREA  SETTING / END 】■■■■■■■■■■*/


@media screen and (min-width: 1101px) {
/*■■■■■■■■■■■■■【 MENU LIST 設定 】■■■■■■■■■■■■■*/
/*.【 MENU AREA SETTING 】=====================================■*/
#MENU {
	width: 100%;
	height: 70px;
	display: flex;
	
	padding: 0 0 0 195px;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	font-weight: bold;
	font-size: 18px;
	
	position: relative;
	box-sizing: border-box;
	/*
	background: orange;
	*/
	}
/*..《《 MENU AREA HOVER  SETTING 》》_________________●*/
/*...［ LOGO SNS HOVER COLOR ］...................★*/
#LOGO:hover .LGK,
#LOGO_K:hover .LGK2,
#FAC:hover .SNS_svg,
#ENG:hover .SNS_svg{
	fill: rgba(40,180,0,0.8);
	transition: all 300ms;
	}
/*...［ LOGO SNS HOVER COLOR / END ］...............*/

/*...［ ZKB HOVER COLOR ］........................★*/
	/*
#ZKB:hover{
	font-size: 18px;
	transition: all 300ms;
	}
#ZKB a:hover::before{
	padding: 6px 9px;
	position: relative;
	top: -1px;
	transition: all 300ms;
	}
#ZKB a:hover::after{
	font-size: 18px;
	transition: all 300ms;
	}*/
/*...［ ZKB HOVER COLOR / END ］....................*/

/*...［［［  MENU AREA【java】SETTING  ］］］.....★*/
/*....（ 1st【java】HVR LOGO SNS ）...........*/
#LOG-TXT.HVR-TXT::before,
#SNS > .LIST_SNS:nth-of-type(-n + 2).HVR-TXT::before{
	opacity: 1;
}
/*....（ 1st【java】HVR LOGO SNS / END ）.....*/

/*....（ 1st【java】HVR LOGO F_E COLOR ）.....*/
.LGK.HVR,.LGK2.HVR,
#FAC svg.HVR,
#ENG svg.HVR{
	fill: rgba(100,180,0,0.25);
	transition: all 300ms;
	}
/*....（ 1st【java】HVR LOGO F_E COLOR / END）*/
/*...［［［  MENU AREA【java】SETTING / END ］］］..*/
/*..《《 MENU AREA HOVER  SETTING / END 》》_____________*/
/*.【 MENU AREA SETTING / END 】=================================*/


/*.【 1st LIST AREA SETTING 】=================================■*/
#MENU li {
	
	/*
	width: 180px;*/
	text-align: center;
	position: relative;
	list-style: none;
	
	box-sizing: border-box;
	/*
	margin: 0 auto;
	*/
	}
#MENU li a {
	
	padding: 0 20px;
	
	color: #8FBE00;
	font-weight: bold;
	line-height: 70px;
	/*
	text-align: center;
	*/
	display: block;
	text-decoration: none;
	box-sizing: border-box;
	transition: all 300ms;
	}

/*..《 1st BOTTON ▲ SETTING 》________________________●*/
#MENU > li ul::before{
	content: "";
	border: 8px solid transparent;
	border-top: 8px solid #8FBE00;
	position: absolute;
	top: -20px;
    transform: translateX(-40%);
    transition: all 300ms;
	}
/*..《 1st BOTTON ▲ SETTING / END 》____________________*/


/*..《《 1st HOVER  SETTING 》》_______________________●*/
/*...［ 1st HOVER TEXT-BACK COLOR ］..............★*/
#MENU > .LIST_1:nth-of-type(n + 1):hover > a{
	color: rgba(40,180,0,0.8);
	border-bottom: solid 0.2em rgba(40,180,0,0.8);
	}
#MENU > .LIST_1:nth-of-type(n + 1):hover > a + span + .MENU2 > .LIST_2 > a{
	color: rgba(40,180,0,0.8);
	}
/*
#MENU > .LIST_1:nth-child(2):hover > a {
	color: #0082DC;
	background: #F8FBFF;
	}
#MENU > .LIST_1:nth-child(3):hover > a {
	color: #F0A000;
	background: #FFFCEB;
	}
*/
/*...［ 1st HOVER TEXT-BACK COLOR / END ］..........*/

/*...［ 1st HOVER ▲ MOVE ］......................★*/
#MENU > .LIST_1:hover > ul::before{
	content: "";
	transition: all 500ms;
	transform: translate(-40%,5px);
	opacity: 0;
	}
/*...［ 1st HOVER ▲ MOVE / END ］..................*/

/*...［ 1st HOVER ▲ COLOR NO.1-2-3 ］............★*/
#MENU > .LIST_1:hover > ul::before{
	border-top: 2px solid #CFDB00;
	
	}
/*
#MENU > .LIST_1:hover:nth-child(2) > ul::before{
	border-top: 2px solid #0082DC;
	}
#MENU > .LIST_1:hover:nth-child(3) > ul::before{
	border-top: 2px solid #F0A000;
	}
*/
/*...［ 1st HOVER ▲ COLOR NO.1-2-3 / END ］........*/


/*...［［［  1st【java】SETTING  ］］］...........★*/
/*....（ 1st【java】HVR TEXT COLOR ）.........*/
#MENU > .LIST_1 a.HVR{
	color: rgba(100,180,0,0.25);
	transition: all 300ms;
	}
/*....（ 1st【jQuery】HVR TEXT COLOR / END ）.*/

/*....（ 1st【jQuery】HVR ▲COLOR ）..........*/
#MENU > li ul.HVR::before{
	content: "";
	border: 8px solid transparent;
	border-top: 8px solid rgba(100,180,0,0.25);
	}
/*....（ 1st【java】HVR ▲COLOR / END ）......*/
/*...［［［  1st HOVER BACK【java】/ END ］］］.....*/
/*..《《 1st HOVER SETTING / END 》》____________________*/
/*.【 1st LIST AREA SETTING / END 】=============================*/


/*.【 2nd LIST AREA SETTING 】=================================■*/
#MENU li ul {
	position: relative;
	top: 0px;
	left: 0px;
	}
#MENU li li {
    height: 0;
    opacity: 0;
	text-align: center;
    overflow: hidden;
    transition: all 300ms;
	}
#MENU li li a {
	line-height: 50px;
	}
	
.LIST_2 a > div{
	position: relative;
	}
.LIST_2 a > div > p{
	white-space: nowrap;
	justify-content: center;
	position: absolute;
	left: 50%;
	transform: scale(0.7,1)translateX(-50%);
	transform-origin: top left;
	}
	
/*..《 2nd LIST HOVER SETTING 》_______________________●*/
#MENU li:hover > ul > li,
#MENU li:hover > ul > li div,
#MENU li:hover > ul > li > li{
	height: 50px;
    opacity: 1;
    overflow: visible;
	}
#MENU > li:hover a{
	transition: all 300ms;
	}
/*..《 2nd LIST HOVER SETTING / END 》___________________*/


/*..《 2nd LIST BORDER COLOR SETTING 》________________●*/
#MENU li li:first-child a {
	/*
	border-top: solid 0.2em rgba(100,180,0,0.5);*/
	}
#MENU li li:nth-child(n + 2) a {
	border-top: 1px dotted #DDDDDD;
	}
/*..《 2nd LIST BORDER COLOR SETTING / END 》____________*/

/*..《 2nd LIST TEXT COLOR SETTING 》__________________●*/
#MENU .LIST_1 ul a{
	color: #64B400;
	}
/*
#MENU .LIST_1:nth-child(2) ul a{
	color: #0082DC;
	}
#MENU .LIST_1:nth-child(3) ul a{
	color: #F0A000;
	}
*/
/*..《 2nd LIST TEXT COLOR SETTING / END 》______________*/

/*..《 2nd LIST COLOR SETTING 》_______________________●*/
#MENU .LIST_1 ul {
	background: #FAFFF7;
	}
/*
#MENU .LIST_1:nth-child(2) ul {
	background: #F8FBFF;
	}
#MENU .LIST_1:nth-child(3) ul {
	background: #FFFCEB;
	}
*/
/*..《 2nd LIST COLOR SETTING / END 》___________________*/

/*..《 2nd ▲ SETTING 》_______________________________●*/
#MENU li li ul:before{
	content: "";
	border: 7px solid transparent;
	position: absolute;
    top: 18px;
    left: -12px;
	transition: all 300ms;
  }
/*...［ 2nd ▲ COLOR NO.1-2-3 ］..................★*/
#MENU .LIST_1 li ul:before{
    border-left: 7px solid #3CA000;
  }
/*
#MENU .LIST_1:nth-child(2) li ul:before{
    border-left: 7px solid #0082DC;
  }
#MENU .LIST_1:nth-child(3) li ul:before{
    border-left: 7px solid #F0A000;
  }*/
/*...［ 2nd ▲ COLOR NO.1-2-3 / END ］..............*/
/*..《 2nd ▲ SETTING / END 》___________________________*/


/*..《《 2nd HOVER  SETTING 》》_______________________●*/
/*...［ 2nd HOVER TEXT-BACK COLOR ］..............★*/
#MENU > .LIST_1:nth-of-type(n + 1) > a + span + .MENU2 > .LIST_2:hover > a,
#MENU > .LIST_1 li:hover li > a{
	color: rgba(40,180,0,1);
	background: #EEFFEB;
	}
/*
#MENU > .LIST_1:nth-child(2) li:hover > a,
#MENU > .LIST_1:nth-child(2) li:hover li > a{
	color: #0064BE;
	background: #EBF2FF;
	}
#MENU > .LIST_1:nth-child(3) li:hover > a,
#MENU > .LIST_1:nth-child(3) li:hover li > a{
	color: #EB8C00;
	background: #FFF2DC;
	}
*/
/*...［ 2nd HOVER TEXT-BACK COLOR / END ］..........*/

/*...［ 2nd HOVER ▲ MOVE ］......................★*/
#MENU > .LIST_1 li:hover > ul:before{
	content: "";
	transition: all 300ms;
	transform: translateX(5px);
	opacity: 0;
  }
/*...［ 2nd HOVER ▲ MOVE / END ］..................*/
/*..《《 2nd HOVER SETTING / END 》》____________________*/
/*.【 2nd LIST AREA SETTING / END 】=============================*/


/*.【 3rd LIST AREA SETTING 】=================================■*/
#MENU li li ul{
	width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
	}

/*..《 3rd ▲ SETTING 》_______________________________●*/
#MENU li li li ul:before{
	content: "";
	border: 7px solid transparent;
	position: absolute;
    top: 14px;
    left: -12px;
	transition: all 300ms;
  }
/*...［ 3rd ▲ COLOR NO.1-2-3 ］..................★*/
#MENU .LIST_1 li li ul:before{
    border-left: 7px solid #3CA000;
  }
/*
#MENU .LIST_1:nth-child(2) li li ul:before{
    border-left: 7px solid #0082DC;
  }
#MENU .LIST_1:nth-child(3) li li li ul:before{
    border-left: 7px solid #F0A000;
  }
*/
/*...［ 3rd ▲ COLOR NO.1-2-3 / END ］..............*/
/*..《 3rd ▲ SETTING / END 》___________________________*/


/*..《《 3rd HOVER  SETTING 》》_______________________●*/
/*...［ 3rd HOVER TEXT-BACK COLOR ］..............★*/
#MENU > .LIST_1 li li:hover > a {
	color: #28B400;
	background: #E2FFDF;
	}
/*
#MENU > .LIST_1:nth-child(2) li li:hover > a {
	color: #0046A0;
	background: #DAE6FF;
	}
#MENU > .LIST_1:nth-child(3) li li:hover > a {
	color: #E67800;
	background: #FFE6CB;
	}
*/
/*...［ 3rd HOVER TEXT-BACK COLOR / END ］..........*/

/*...［ 3rd HOVER ▲ MOVE ］......................★*/
#MENU > .LIST_1 li li:hover > ul:before{
	content: "";
	transition: all 300ms;
	transform: translateX(5px);
	opacity: 0;
  }
/*...［ 3rd HOVER ▲ MOVE / END ］..................*/
/*..《《 3rd HOVER SETTING / END 》》____________________*/
/*.【 3rd LIST AREA SETTING / END 】=============================*/
/*■■■■■■■■■■【 MENU LIST  SETTING / END 】■■■■■■■■■■■*/ 

}
/*=========================================================================================================
HEADER / END
=========================================================================================================*/