@charset "UTF-8";





/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

	footer

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */



.footer {
	position: relative;
	width: 100%;
	color: #fff;
	background: #5a5a5a;
}



@media screen and (max-width: 767px) {
	.footer a:link,
	.footer a:hover,
	.footer a:visited {
		text-decoration: none;
	}
}



/* ----------------------------------------
	icon font
---------------------------------------- */

.footer .ul_media_links .icn_line::before,
.footer .ul_media_links .icn_fcb::before,
.footer .ul_media_links .icn_twt::before,
.footer .ul_media_links .icn_ytb::before,
.footer .ul_site_link_header::after,
.footer .world_map a.cselectorbtn::before,
.footer .world_map_mobile .cs_region::after {
	font-family: HPIcons;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	vertical-align: bottom;
}





/* ==================================================

	footer_lang_container

================================================== */

.footer_lang_container {
	background: #5a5a5a;
}

.footer .cselector:hover {
	text-decoration: none;
}
.footer .cselector span {
	display: inline-block;
	color: #fff;
	cursor: pointer;
}
.footer .cselector span.flag {
	width: 16px;
	margin-right: 8px;
	background: url(images/hpi-flag.gif) no-repeat center center;
}

.jp_home_link {
	text-decoration: underline;
}



@media screen and (max-width: 767px) {
	.js_cselector_pc_trigger {
		display: none;
	}

	.footer .cs-container {
		padding: 16px 20px;
	}
}



@media screen and (min-width: 768px) {
	.js_cselector_mobile_trigger {
		display: none;
	}

	.footer_lang_container {
		border-bottom: 1px solid #898888;
	}

	.footer .cs-container {
		position: relative;
		padding: 20px;
	}
}



@media screen and (min-width: 1024px) {
	.footer_lang_container {
		width: 1000px;
		margin: 0 auto;
	}
}





/* ==================================================

	world_map

================================================== */

.footer .world_map {
	display: none;
	z-index: 2;
}

.footer .world_map h2 {
	font-size: 18px;
	font-weight: normal;
}

.footer .world_map a.cselectorbtn {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	color: #626262;
}
.footer .world_map a.cselectorbtn:hover {
	text-decoration: none;
}
.footer .world_map a.cselectorbtn::before {
	content: "\E907";
}

.world_map_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0);
	z-index: 1;
}



.footer .world_map_pc .world_map {
	overflow: visible;
	position: absolute;
	top: -460px;
	left: 0;
	width: 944px;
	height: 470px;
	padding: 20px;
	background: #fff url(images/hpi-i-cselector-worldmap.gif) no-repeat center center;
	border: 2px solid #e5e8e8;
}



/* ----------------------------------------
	country_holder
---------------------------------------- */

.footer .world_map_pc .country_holder ul {
	column-count: 7;
	column-gap: 20px;
	margin-top: 10px;
}
.footer .world_map_pc .country_holder ul > li {
	margin: 4px 0;
}
.footer .world_map_pc .country_holder ul > li a:link {
	color: #000;
	font-size: 13px;
}



/* ----------------------------------------
	arrow
---------------------------------------- */

.footer .world_map_pc .bottom_corner {
	display: block;
	position: absolute;
	top: 100%;
	left: 15px;
	width: 24px;
	height: 24px;;
}
.footer .world_map_pc .bottom_corner::before,
.footer .world_map_pc .bottom_corner::after {
	content: "";
	position: absolute;
	top: 0;
	height: 0;
	width: 0;
	border: 12px solid transparent;
	pointer-events: none;
}
.footer .world_map_pc .bottom_corner::before {
	right: 1px;
	border-color: rgba(204,31,12,0);
	border-top-color: #e5e8e8;
}
.footer .world_map_pc .bottom_corner::after {
	top: -4px;
	right: 1px;
	border-color: rgba(242,242,242,0);
	border-top-color: #fff;
}



@media screen and (max-width: 767px) {
	.footer .world_map_pc,
	.footer .world_map_pc .world_map {
		display: none !important;
	}

	.footer .world_map_mobile .world_map {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		border: 2px solid #ccc;
	}

	.footer .world_map_mobile h2 {
		padding: 20px;
		color: #000;
	}

	.footer .world_map_mobile a.cselectorbtn {
		font-size: 17px;
	}



	/* ----------------------------------------
		country_holder
	---------------------------------------- */

	.footer .world_map_mobile .country_holder > ul {
		border-bottom: 1px solid #e5e8e8;
	}
	.footer .world_map_mobile .cs_region {
		display: block;
		position: relative;
		padding: 16px 20px;
		color: #8e8e8e;
		border-top: 1px solid #e5e8e8;
	}
	.footer .world_map_mobile .cs_region.active {
		color: #fff;
		background: #007dba;
	}

	/* arrow */
	.footer .world_map_mobile .cs_region::after {
		content: "\E90c";
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		font-size: 18px;
	}
	.footer .world_map_mobile .cs_region.active::after {
		content: "\E90b";
	}

	/* level2 */
	.footer .world_map_mobile .cs_r_countries {
		display: none;
		padding: 0 10px;
		background: #f2f2f2;
		border-bottom: 2px solid #007dba;
	}
	.footer .world_map_mobile .cs_r_countries > li a {
		display: block;
		padding: 16px 10px;
		color: #686868;
	}
	.footer .world_map_mobile .cs_r_countries > li:nth-child(n+2) a {
		border-top: 1px solid #e5e8e8;
	}
}



@media screen and (min-width: 768px) {
	.footer .world_map_mobile,
	.footer .world_map_mobile .world_map {
		display: none !important;
	}
}



@media screen and (min-width: 768px) and (max-width: 1023px) {
	.world_map_active {
		position: fixed;
		width: 100vw;
		height: 100vh;
	}

	.footer .world_map_pc .world_map {
		overflow: auto;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 90%;
		max-height: 90%;
	}
	.footer .world_map_pc .bottom_corner {
		display: none;
	}
}





/* ==================================================

	site_links

================================================== */

.footer_container {
	width: 100%;
}

.footer .site_links {
	color: #fff;
	border-bottom: 1px solid #898888;
}

.footer .site_links a:link,
.footer .site_links a:hover,
.footer .site_links a:visited {
	color: #fff;
}

@media screen and (max-width: 1023px) {
	.footer .ul_site_link_header {
		display: block;
		position: relative;
		padding: 16px 20px;
		font-weight: bold;
		border-top: 1px solid #898888;
	}
	.footer .site_links .ul_site_link_header.active {
		color: #5a5a5a;
		background: #e8e8e8;
	}

	/* arrow */
	.footer .ul_site_link_header::after {
		content: "\E90c";
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		color: #fff;
		font-size: 18px;
	}
	.footer .ul_site_link_header.active::after {
		content: "\E90b";
		color: #5a5a5a;
	}

	/* level2 */
	.footer .ul_site_links {
		display: none;
		background: #fff;
	}
	.footer .ul_site_links .no_link {
		display: none;
	}
	.footer .site_links .ul_site_links > li > a {
		display: block;
		padding: 16px 20px;
		color: #686868;
		font-weight: bold;
	}
	.footer .ul_site_links > li:nth-child(n+2) {
		border-top: 1px solid #e5e8e8;
	}
	.footer .media_title {
		display: none;
	}
}



@media screen and (min-width: 1024px) {
	.footer_container {
		width: 1000px;
		margin: 0 auto;
	}
	.footer .site_links {
		padding: 20px 5px;
		font-size: 14px;
	}
	.footer .site_links::after {
		content: "";
		display: block;
		clear: both;
	}
	.footer .site_links_container {
		float: left;
		width: 20%;
		padding: 0 15px;
	}
	.footer .ul_site_link_header {
		display: none;
	}

	.footer .ul_site_links {
		display: block !important;
		overflow: visible !important;
	}
	.footer .ul_site_links > li:first-child {
		margin-bottom: 8px;
		font-weight: bold;
	}
	.footer .ul_site_links > li:nth-child(n+3) {
		margin-top: 4px;
	}
	.footer .media_title {
		width: 100%;
	}

}



/* ----------------------------------------
	ul_media_links (SNS)
---------------------------------------- */

.footer .media_title {
	margin-bottom: 8px;
	font-weight: bold;
}
.footer .ul_media_links {
	display: flex;
	flex-wrap: wrap;
}
.footer .ul_media_links a {
	text-decoration: none;
}

.footer .ul_media_links .icn_line::before {
	content: "\E963";
}
.footer .ul_media_links .icn_fcb::before {
	content: "\E90E";
}
.footer .ul_media_links .icn_twt::before {
	content: "\E910";
}
.footer .ul_media_links .icn_ytb::before {
	content: "\E911";
}



@media screen and (max-width: 1023px) {
	.footer .ul_media_links {
		padding: 16px 20px;
	}
	.footer .site_links .ul_media_links a {
		display: block;
		color: #686868;
		font-size: 3rem;
		line-height: 1;
	}
	.footer .ul_media_links > li:nth-child(n+3) {
		margin-left: 20px;
	}
}



@media screen and (min-width: 1024px) {
	.footer .ul_media_links a {
		font-size: 17px;
	}
	.footer .ul_media_links > li:nth-child(n+3) {
		margin-left: 10px;
	}
}





/* ==================================================

	footer_legal_block

================================================== */

.footer_legal_block {
	padding: 20px;
	color: #fff;
}

.footer_legal_block a:link,
.footer_legal_block a:hover,
.footer_legal_block a:visited {
	color: #fff;
}

.footer .privacy_links::after {
	content: "";
	display: block;
	clear: both;
}
.footer .privacy_links > li {
	float: left;
}
.footer .privacy_links > li::after {
	content: "|";
	padding: 0 8px;
}
.footer .privacy_links > li:last-child::after {
	content: none;
}

.footer .hf_bottom_links {
	margin-top: 10px;
}



@media screen and (max-width: 1023px) {
	.footer .privacy_links > li {
		margin-bottom: 8px;
	}
}