@charset "utf-8";

/* グローバルナビ
----------------------------------------------------------- */
#global_nav {
	height: 65px;
	border-top: 1px solid #d8dce0;
	border-bottom: 1px solid #d8dce0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

#global_nav > ul {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

#global_nav > ul > li {
	float: left;
	width: 150px;
}

#global_nav > ul > li#gnav_theme,
#global_nav > ul > li#gnav_about {
	width: 180px;
}

#global_nav > ul > li > a {
	position: relative;
	display: block;
	padding: 15px 0 0;
	height: 65px;
	border-left: 1px solid #d8dce0;
	box-sizing: border-box;
	color: #222;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: center;
}

#global_nav > ul > li:last-child > a {
	border-right: 1px solid #d8dce0;
}

#global_nav > ul > li > a::after {
	position: absolute;
	left: 50%;
	bottom: 5px;
	display: block;
	content: "";
	margin: 0 0 0 -6px;
	border: 6px solid transparent;
	border-top: 6px solid #326eb4;
}

html:not(.mobile) #global_nav > ul > li > a:hover,
#global_nav > ul > li.active > a,
#global_nav > ul > li.current > a {
	background: #326eb4;
	color: #fff;
	text-decoration: none;
}

html.mobile #global_nav > ul > li > a:hover {
	text-decoration: none;
}

html:not(.mobile) #global_nav > ul > li > a:hover::after,
#global_nav > ul > li.current > a::after {
	border-top: 6px solid #fff;
}

#global_nav > ul > li.active > a::after {
	border: none;
}

#global_nav > ul > li.active > a .icon {
	position: absolute;
	left: 50%;
	bottom: 10px;
	display: block;
	content: "";
	width: 20px;
	height: 10px;
	margin: 0 0 0 -10px;
	background: url(/shared/svg/icon_close.svg) center 0 no-repeat;
	background-size: contain;
}


/*----- .gnav_mega -----*/

#global_nav .gnav_mega {
	display: none;
	position: absolute;
	top: 65px;
	left: 0;
	width: 960px;
	background: #fff;
	border: 5px solid #326eb4;
	box-sizing: border-box;
	z-index: 10;
}

#global_nav > ul > li.active .gnav_mega {
	display: block;
}

#global_nav .gnav_mega .mega_menu {
	display: table;
	width: 100%;
	padding: 35px 40px 35px 0;
	box-sizing: border-box;
}

#global_nav .gnav_mega .mega_menu h2,
#global_nav .gnav_mega .mega_menu > ul {
	display: table-cell;
	vertical-align: top;
}

#global_nav .gnav_mega .mega_menu h2 {
	width: 210px;
	border-right: 1px solid #d8dce0;
	box-sizing: border-box;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
}

#global_nav .gnav_mega .mega_menu h2 a {
	display: inline-block;
}

#global_nav .gnav_mega .mega_menu h2 .icon_frame {
	position: relative;
	display: block;
	content: "";
	width: 100px;
	height: 100px;
	margin: 0 auto 10px;
	border: 1px solid #d8dce0;
	border-radius: 50px;
	text-align: center;
}

#global_nav .gnav_mega .mega_menu h2 .icon {
	position: absolute;
	left: 50%;
	top: 50%;
}

#global_nav .gnav_mega .mega_menu h2 .icon::before {
	display: block;
	width: 100%;
	height: 100%;
}


#global_nav #gnav_about .mega_menu h2 .icon {
	width: 56px;
	height: 50px;
	margin: -25px 0 0 -28px;
}

#global_nav #gnav_about .mega_menu h2 .icon::before {
	content: url(/shared/svg/logo_mark.svg);
}


#global_nav #gnav_news .mega_menu h2 .icon,
#global_nav #gnav_policy .mega_menu h2 .icon {
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
}

#global_nav #gnav_news .mega_menu h2 .icon::before {
	content: url(/shared/svg/icon_info.svg);
}

#global_nav #gnav_policy .mega_menu h2 .icon::before {
	content: url(/shared/svg/icon_policy.svg);
}


#global_nav #gnav_laws .mega_menu h2 .icon {
	width: 50px;
	height: 46px;
	margin: -23px 0 0 -25px;
}

#global_nav #gnav_laws .mega_menu h2 .icon::before {
	content: url(/shared/svg/icon_laws.svg);
}


#global_nav #gnav_publication .mega_menu h2 .icon {
	width: 35px;
	height: 50px;
	margin: -25px 0 0 -17px;
}

#global_nav #gnav_publication .mega_menu h2 .icon::before {
	content: url(/shared/svg/icon_publication.svg);
}


#global_nav .gnav_mega .mega_menu h2 a:hover .category_ttl {
	text-decoration: underline;
}

#global_nav .gnav_mega .mega_menu h2 .category_ttl {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0 0 0 23px;
}

#global_nav .gnav_mega .mega_menu h2 .category_ttl::before,
#global_nav .gnav_mega .mega_menu h2 .category_ttl::after {
	position: absolute;
	left: 0;
	display: block;
	content: "";
}

#global_nav .gnav_mega .mega_menu h2 .category_ttl::before {
	top: 2px;
	width: 18px;
	height: 18px;
	background: #326eb4;
	border-radius: 10px;
}

#global_nav .gnav_mega .mega_menu h2 .category_ttl::after {
	top: 7px;
	left: 8px;
	border: 4px solid transparent;
	border-left: 5px solid #fff;
}

#global_nav .gnav_mega .mega_menu > ul {
	width: 310px;
	padding: 0 0 0 40px;
}

#global_nav .gnav_mega .mega_menu > ul > li {
	margin: 0 0 12px;
}

#global_nav .gnav_mega .mega_menu > ul > li:last-child {
	margin-bottom: 0;
}

#global_nav .gnav_mega .mega_menu > ul > li > span {
	display: block;
	padding: 0 26px 8px;
	border-bottom: 1px solid #d8dce0;
	font-size: 16px;
	font-size: 1.6rem;
	text-indent: -26px;
	line-height: 1.6;
}

#global_nav .gnav_mega .mega_menu > ul > li > span a {
	position: relative;
	padding: 0 0 0 26px;
}

#global_nav .gnav_mega .mega_menu > ul > li > span a::before,
#global_nav .gnav_mega .mega_menu > ul > li > span a::after {
	position: absolute;
	left: 0;
	display: block;
	content: "";
}

#global_nav .gnav_mega .mega_menu > ul > li > span a::before {
	top: 3px;
	width: 18px;
	height: 18px;
	background: #326eb4;
	border-radius: 10px;
}

#global_nav .gnav_mega .mega_menu > ul > li > span a::after {
	top: 8px;
	left: 8px;
	border: 4px solid transparent;
	border-left: 5px solid #fff;
}

#global_nav .gnav_mega .mega_menu ul li ul {
	margin: 10px 0 25px 15px;
}

#global_nav .gnav_mega .mega_menu ul li:last-child ul {
	margin-bottom: 0;
}

#global_nav .gnav_mega .mega_menu ul li ul li {
	margin: 3px 0 0;
}


/* #gnav_theme */

#global_nav #gnav_theme .mega_menu {
	padding-top: 20px;
	padding-bottom: 20px;
}

#global_nav #gnav_theme .mega_menu:nth-child(n+2) {
	border-top: 1px dotted #c8ccd0;
}

#global_nav #gnav_theme .mega_menu:nth-child(1) {
	padding-top: 35px;
}

#global_nav #gnav_theme .mega_menu:nth-child(3) {
	padding-bottom: 35px;
}

#global_nav #gnav_theme .gnav_mega .mega_menu h2 .icon_frame {
	width: 80px;
	height: 80px;
}

#global_nav #gnav_theme .mega_menu:nth-child(1) h2 .icon,
#global_nav #gnav_theme .mega_menu:nth-child(2) h2 .icon {
	width: 36px;
	height: 45px;
	margin: -22px 0 0 -17px;
}

#global_nav #gnav_theme .mega_menu:nth-child(3) h2 .icon {
	width: 28px;
	height: 45px;
	margin: -22px 0 0 -14px;
}

#global_nav #gnav_theme .mega_menu:nth-child(1) h2 .icon::before {
	content: url(/shared/svg/icon_consumers.svg);
}

#global_nav #gnav_theme .mega_menu:nth-child(2) h2 .icon::before {
	content: url(/shared/svg/icon_counselor.svg);
}

#global_nav #gnav_theme .mega_menu:nth-child(3) h2 .icon::before {
	content: url(/shared/svg/icon_business.svg);
}

#global_nav #gnav_theme > .gnav_mega > .mega_menu > ul {
	padding: 0 0 0 35px;
}

#global_nav #gnav_theme .mega_menu ul li {
	margin: 0 0 3px;
}

#global_nav #gnav_theme .mega_menu ul li:last-child {
	margin: 0;
}


/* .btn_close */

#global_nav .gnav_mega .btn_close {
	padding: 15px 0;
	background: #f8f8f8;
	border-top: 1px solid #d8dce0;
	text-align: center;
}

#global_nav .gnav_mega .btn_close .btn {
	display: inline-block;
	width: 160px;
	height: 35px;
	padding: 0;
	cursor: pointer;
	line-height: 35px;
}

#global_nav .gnav_mega .btn_close .btn::before {
	position: relative;
	top: 1px;
	display: inline-block;
	content: "";
	width: 11px;
	height: 11px;
	margin: 0 5px 0 0;
	background: url(/shared/img/icon_close.png) 0 0 no-repeat;
	background-size: cover;
	border: none;
}
