@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;
	}
#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_K{
	display: none;
}
/*..《《 LOGO KKRnet  SETTING / END 》》_________________*/


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

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

/*.【 ZKB 】===================================================■*/
#ZKB{
	position: absolute;
	right: 120px;
}
#ZKB a{
	text-decoration: none;
	display: block;
}
#ZKB a::before{
	content: "?";
	font-size: 16px;
	margin: 0 5px 0 0;
	padding: 3px 6px;
	border-radius: 100px;
	color: #FFFFFF;
	position: relative;
	top: 1px;
	
	background: #969696;
	transition: all 300ms;
}

#ZKB a::after{
	content: "在家仏教こころの会とは";
	font-size: 14px;
	color: #5A5A5A;
	line-height: 70px;
	transition: all 300ms;
}
/*.【 ZKB / 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: 0px;
	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 90px;
	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 a:hover::before{
	padding: 6px 9px;
	position: relative;
	top: -1px;
	transition: all 300ms;
	}
#ZKB a:hover::after{
	font-size: 18px;
	transition: all 300ms;
	}
#ZKB a:hover.HVR::before{
	background: #969696;
	}
#ZKB a:hover.HVR::after{
	color: #5A5A5A;	
	}
#ZKB a.HVR::before{
	background: rgba(150,150,150,0.25);
	}
#ZKB a.HVR::after{
	color: rgba(90,90,90,0.25);	
	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,
#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;
	}
#MENU li a {
	color: #8FBE00;
	font-weight: bold;
	line-height: 70px;
	display: block;
	text-decoration: none;
	box-sizing: border-box;
	transition: all 300ms;
	}
#MENU > .LIST_1:nth-child(1) > a{
	color: #64B400;
	}
#MENU > .LIST_1:nth-child(2) > a{
	color: #0082DC;
	}
#MENU > .LIST_1:nth-child(3) > a{
	color: #F0A000;	
	}

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


/*..《《 1st HOVER  SETTING 》》_______________________●*/
/*...［ 1st HOVER TEXT-BACK COLOR ］..............★*/
#MENU > .LIST_1:nth-child(1):hover > a.HVR {
	color: rgba(100,180,0,0.8);
	background: #FAFFF7;
	}
#MENU > .LIST_1:nth-child(2):hover > a.HVR {
	color: rgba(0,130,220,0.8);
	background: #F8FBFF;
	}
#MENU > .LIST_1:nth-child(3):hover > a.HVR {
	color: rgba(240,160,0,0.8);
	background: #FFFDF0;
	}
/*...［ 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:nth-child(1) > 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{
	transition: all 300ms;
	}
#MENU > .LIST_1:nth-child(1) > a.HVR{
	color: rgba(100,180,0,0.25);
	}
#MENU > .LIST_1:nth-child(2) > a.HVR{
	color: rgba(0,130,220,0.25);
	}
#MENU > .LIST_1:nth-child(3) > a.HVR{
	color: rgba(240,160,0,0.25);
	}
/*....（ 1st【jQuery】HVR TEXT COLOR / END ）.*/

/*....（ 1st【jQuery】HVR ▲COLOR ）..........*/
#MENU > li ul.HVR::before{
	content: "";
	border: 8px solid transparent;
	}
#MENU > li:nth-child(1) ul.HVR::before{
	border-top: 8px solid rgba(100,180,0,0.25);
	}
#MENU > li:nth-child(2) ul.HVR::before{
	border-top: 8px solid rgba(0,130,220,0.25);
	}
#MENU > li:nth-child(3) ul.HVR::before{
	border-top: 8px solid rgba(240,160,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;
	}

/*
.LIST_2 a > div > p:nth-child(2){
	background: #FFFFCC;
	line-height: 25px;
	display: block;	
	}

#MENU li li a {
	line-height: 40px;
	}
.LIST_1 > a > div > p,.LIST_2 div{
	transform: scale(0.8,1);
	margin: 0 auto;
	white-space: nowrap;
	position: relative;
	}
.LIST_1 > a > div > p{
	line-height: 20px;
	transform: scale(1,0.95);
	}
*/
/*..《 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.15em rgba(220,220,220,0.35);
	}
#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:nth-child(1) ul a{
	color: rgba(100,180,0,0.8);
	}
#MENU .LIST_1:nth-child(2) ul a{
	color: rgba(0,130,220,0.8);
	}
#MENU .LIST_1:nth-child(3) ul a{
	color: rgba(240,160,0,0.8);
	}
/*..《 2nd LIST TEXT COLOR SETTING / END 》______________*/

/*..《 2nd LIST COLOR SETTING 》_______________________●*/
#MENU .LIST_1:nth-child(1) ul {
	background: #FAFFF7;
	}
#MENU .LIST_1:nth-child(2) ul {
	background: #F8FCFF;
	}
#MENU .LIST_1:nth-child(3) ul {
	background: #FFFDF0;
	}
/*..《 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:nth-child(1) li ul:before{
	border-top: 7px solid rgba(40,180,0,0);
    border-left: 7px solid rgba(40,180,0,0.8);
  }
#MENU .LIST_1:nth-child(2) li ul:before{
	border-top: 7px solid rgba(0,130,220,0);
    border-left: 7px solid rgba(0,130,220,0.8);
  }
#MENU .LIST_1:nth-child(3) li ul:before{
	border-top: 7px solid rgba(240,160,0,0);
    border-left: 7px solid rgba(240,160,0,0.8);
  }
/*...［ 2nd ▲ COLOR NO.1-2-3 / END ］..............*/
/*..《 2nd ▲ SETTING / END 》___________________________*/


/*..《《 2nd HOVER  SETTING 》》_______________________●*/
/*...［ 2nd HOVER TEXT-BACK COLOR ］..............★*/
#MENU > .LIST_1:nth-child(1) li:hover > a,
#MENU > .LIST_1:nth-child(1) li:hover li > a{
	color: #46B400;
	background: #F2FFF2;
	}
#MENU > .LIST_1:nth-child(2) li:hover > a,
#MENU > .LIST_1:nth-child(2) li:hover li > a{
	color: rgba(0,130,220,1);
	background: #F2F8FF;
	}
#MENU > .LIST_1:nth-child(3) li:hover > a,
#MENU > .LIST_1:nth-child(3) li:hover li > a{
	color: #EB8C00;
	background: #FFFADE;
	}
/*...［ 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:nth-child(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:nth-child(1) li li:hover > a {
	color: rgba(40,180,0,0.6);
	background: #EBFFE9;
	}
#MENU > .LIST_1:nth-child(2) li li:hover > a {
	color: rgba(0,100,190,0.6);
	background: #EEF4FF;
	}
#MENU > .LIST_1:nth-child(3) li li:hover > a {
	color: rgba(230,120,0,0.6);
	background: #FFF7D6;
	}
/*...［ 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
=========================================================================================================*/