/* -------------------- */
/* com.mainMenu.css     */
/* -------------------- */



/*===================================================================
  Mobile
===================================================================*/
@media( max-width:959px )
{
/* MainMenu */
	.spHeader{ width:100%; height:3rem; background-color:#ffffff; position:fixed; top:0; left:0; z-index:9999; }
	.spMenuToggleBtn{ width:3rem; height:3rem; background-color:#00a1e9; position:absolute; top:0; left:0; }
	.spHeaderTitle{ width:13rem; height:auto; position:absolute; top:0.4rem; left:3.4rem; }
	.spHeaderLogo{ width:2.4rem; height:auto; position:absolute; top:0.3rem; right:0.4rem; }
	.spMenu{ display:none; width:100%; height:100vh; padding-top:4rem; background-color:#0090d1; position:fixed; top:0; left:0; z-index:9998; }
	.spMenuArea{ width:90vw; height:calc(100vh - 5rem); margin:auto; padding-left:1rem; overflow:scroll; }
	.spMenu1st{ display:block; margin-top:1.2rem; position:relative; font-size:1.2rem; line-height:100%; font-weight:bold; padding-left:1.2rem; color:#ffffff; text-decoration:none; }
	.spMenu1st:before{ content:'〉'; display:inline-block; width:1.4rem; height:1rem; position:absolute; top:0rem; left:0; text-decoration:none; font-size:0.9rem; }
	.spMenu2nd{ display:none; padding-top:0.4rem; padding-left:2rem; line-height:180%; }
	.spMenu2nd > a{ display:block; color:#ffffff; text-decoration:none; margin-top:0.2rem; margin-bottom:0.8rem; line-height:130%; }
	.spMainMenuBottom{ margin-top:1.4rem; line-height:150%; }
	.spMainMenuBottom > a{ display:block; font-size:1rem; color:#ffffff; text-decoration:none; padding:0.2rem 0; }
	.spMenuIcon{ width:100%; margin-top:2rem; display:flex; flex-wrap:nowrap; align-items:center; }
	.spMenuIcon > a{ display:block; margin-right:1rem; text-decoration:none; }
	.spMenuIcon > a:nth-of-type(1){ width:2.4rem; height:2.4rem; }
	.spMenuIcon > a:nth-of-type(2){ width:2.4rem; height:2.4rem; }
	.btnLngChg{  }
	.btnLngChg > a{ display:flex; width:5.8rem; height:2.4rem; background-color:#3a3a3a; border-radius:1.2rem; align-items:center; justify-content:center; font-size:0.9rem; text-decoration:none; }
	.btnLngChg > a > span{ color:#ffffff; }
	.btnLngChg > a:hover{ opacity:0.7; transition:0.3s; text-decoration:none; }

/* Footer */
	.btnPgTop{ display:none; width:2.4rem; height:2.4rem; background-color:#ffffff; position:fixed; bottom:0; right:0; z-index:9997; }
	.footer{ width:100%; height:50vw; max-height:22rem; min-height:14rem; margin-top:10rem; padding:1rem 0; background-color:#00a1e9; z-index:9996; display:flex; flex-direction:column; justify-content:space-between; }
	.footerArea{ width:100%; padding:1rem 0; display:flex; flex-wrap:wrap; justify-content:center; }
	.footerAreaL{ width:100%; margin:0.5rem 0; display:flex; flex-wrap:wrap; justify-content:center; }
	.footerAreaR{ width:50%; max-height:3.5rem; margin:0 auto; }
	.footerLogo{ width:100%; height:auto; max-height:10rem; margin-bottom:0.5rem; }
	.footerLogo > img{ display:block; width:80%; height:auto; margin:0 auto; }
	.footerIconFb{ width:2.6rem; height:2.6rem; margin:1rem 0.8rem; }
	.footerIconTw{ width:2.6rem; height:2.6rem; margin:1rem 0.8rem; }


}
/*===================================================================
  PC
===================================================================*/
@media( min-width:960px )
{
/* MainMenu */
	.pcMainMenu{ width:256px; height:100%; display:flex; flex-direction:column; background-color:#f0f0f0; position:fixed; top:0; left:0; z-index:9997; }
	.pcMenuHeader{ width:100%; height:80px; background-color:#ffffff; }
	.pcMainMenuArea{ width:100%; padding:0.6rem 0; background-color:#ffffff; }
	.pcMainMenuBtn{}
	.pcMainMenuBtn > a{ display:block; width:100%; height:2.8rem; font-size:1.1rem; text-align:center; line-height:2.8rem; text-decoration:none; color:#333333; background-color:#ffffff; font-weight:bold; }
	.pcMainMenuBtn > a:hover{ color:#ffffff; text-decoration:none; }
	.pcMainMenuSub{ width:256px; height:100%; padding-top:6rem; padding-left:1.2rem; padding-right:0.8rem; line-height:2rem; background-color:#0090d1; position:fixed; top:0; left:0; z-index:-10; }
	.pcMainMenuSub > a{ display:block; color:#ffffff; text-decoration:none; line-height:130%; margin-bottom:0.8rem; }
	.pcMainMenuSub > a:hover{ color:#ffffff; opacity:0.5; transition:0.3s; text-decoration:none; }
	.pcMainMenuSubUnder01{ padding-top: 2rem;}
	.pcMainMenuSubUnder02{ padding-top: 2.2rem;}
	.pcMainMenuSubUnder03{ padding-top: 5rem;}
	.pcMainMenuSubUnder04{ padding-top: 10.5rem;}
	.pcMainMenuSubUnder05{ padding-top: 9.2rem;}
	.pcMainMenuSubUnder06{ padding-top: 16.5rem;}
	.pcMainMenuBottomArea{ width:100%; flex-grow:1; background-color:#f0f0f0; }
	.pcMainMenuBottom{ width:100%; padding-top:1rem; text-align:center; line-height:1.6rem; }
	.pcMainMenuBottom > a{ display:block; font-size:0.8rem; color:#333333; text-decoration:none; }
	.pcMainMenuBottom > a:hover{ color:#00a1e9; text-decoration:none; }
	.pcMenuIcon{ width:100%; margin-top:1rem; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; }
	.pcMenuIcon > a{ display:block; margin:0 0.4rem; text-decoration:none; }

	.pcMenuIcon > a:nth-of-type(1){ width:2rem; height:2rem; }
	.pcMenuIcon > a:nth-of-type(2){ width:2rem; height:2rem; }
	
	.btnLngChg{ margin-top: 0.8rem; }
	.btnLngChg > a{ display:flex; width:7rem; height:1.75rem; margin:auto; background-color:#3a3a3a; border-radius:1.5rem; align-items:center; justify-content:center; font-size:0.9rem; text-decoration:none; }
	.btnLngChg > a > span{ color:#ffffff; }
	.btnLngChg > a:hover{ opacity:0.7; transition:0.3s; text-decoration:none; }
/* Footer */
	.btnPgTop{ display:none; width:3rem; height:3rem; background-color:#ffffff; position:fixed; bottom:0; right:0; z-index:9999; }
	.btnPgTop:hover{ cursor:pointer; opacity:0.7; transition:0.3s; }
	.footer{ width:100%; height:7rem; margin-top:15rem; background-color:#00a1e9; z-index:9998; display:flex; align-items:center; justify-content:space-between; }
	.footer img{ display:block; }
	.footerAreaL{ flex:1; padding:1rem 0; padding-left:4rem; display:flex; flex-wrap:nowrap; align-items:center; }
	.footerAreaR{ width:20rem; display:flex; align-items:center; padding-right:4rem; }
	.footerLogo{ width:22.2rem; height:auto; }
	.footerIconFb{ width:2.5rem; height:auto; margin-left:3rem; }
	.footerIconTw{ width:2.5rem; height:auto; margin-left:1.2rem; }
}