@charset "utf-8";
/*----------------------------------------------
	.l_all
---------------------------------------------*/
.l_all {
	overflow: hidden;
}
/*----------------------------------------------
	.l_wrap
---------------------------------------------*/
.l_wrap {
	position: relative;
	z-index: 2;
	width: 1260px;
	margin: auto;
}
.l_wrap_sm {
	width: 860px;
	margin: auto;
}
@media screen and (max-width: 1280px) {
	.l_wrap {
		width: 95%;
	}
}
@media screen and (max-width: 960px) {
	.l_wrap_sm {
		width: 95%;
	}
}
/*----------------------------------------------
	.l_header
---------------------------------------------*/
.l_header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
/*  .l_logo
---------------------------------------------*/
.l_logo {
	width: min(23%, 280px);
	margin: 10px;
	font-size: 0;
	line-height: 1;
}

/*  .l_fix_btn
---------------------------------------------*/
.l_fix_btn {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99;
}
.l_fix_btn a {
	display: inline-flex;
	align-items: center;
	padding: 12px 20px 15px 25px;
	background-color: var(--key-color);
	border-bottom: 3px solid var(--key-color);
	border-left: 3px solid var(--key-color);
	border-radius: 0 0 0 30px;
	color: var(--wh-color);
	font-size: var(--fs-20);
	font-weight: var(--fw-bold);
	transition:
		color 0.3s,
		background-color 0.3s;
}
.l_fix_btn a .c_arrow {
	width: 16px;
	height: 16px;
	margin-left: 20px;
	transform: translateY(0.1em);
	transition: fill 0.3s;
}
.l_fix_btn a:hover {
	background-color: var(--wh-color);
	color: var(--key-color);
}
.l_fix_btn a:hover .c_arrow {
	fill: var(--key-color);
}
@media screen and (max-width: 1032px) {
	.l_logo {
		width: min(30%, 280px);
	}
}
@media screen and (max-width: 768px) {
	.l_fix_btn a {
		padding: 10px 15px 10px 20px;
		border-radius: 0 0 0 20px;
		font-size: var(--fs-18);
	}
}
@media screen and (max-width: 640px) {
	.l_logo {
		width: max(34%, 150px);
	}
}
@media screen and (max-width: 480px) {
	.l_fix_btn a {
		padding: 10px 10px 10px 15px;
		font-size: 1em;
	}
	.l_fix_btn a .c_arrow {
		width: 14px;
		height: 14px;
		margin-left: 10px;
	}
}
@media screen and (max-width: 320px) {
	.l_fix_btn a {
		padding: 10px 5px 10px 10px;
	}
	.l_fix_btn a .c_arrow {
		width: 10px;
		height: 10px;
		margin-left: 5px;
	}
}
/*----------------------------------------------
	.l_footer
---------------------------------------------*/
.l_footer {
	background-color: var(--wh-color);
	padding: 50px 0;
	color: var(--hsuh-color);
}
.l_footer_logo {
	text-align: center;
}
.l_footer_logo_txt {
	color: var(--hsuh-color);
	font-size: var(--fs-20);
	font-weight: var(--fw-bold);
}
.l_footer_logo img {
	width: min(380px, 80%);
	margin-bottom: 10px;
}
.l_footer_btn_grp {
	margin: 20px 0 30px;
}
.l_footer_btn_grp > * {
	width: 240px;
	margin: 0 10px;
}
.l_footer_btn a {
	position: relative;
	display: block;
	padding: 0.8em calc(1em + 20px + 5px) 0.8em 1em;
	background-color: var(--primary-color);
	color: #fff !important;
	font-weight: 900;
}
.l_footer_btn *,
.l_footer_btn *::before,
.l_footer_btn *::after {
	transition: all 0.3s ease;
}
.l_footer_btn a:hover {
	background-color: var(--hsuh-color);
}
.l_footer_btn_icon {
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	width: 20px;
	height: 20px;
	margin: auto;
	border-radius: 20px;
	background: #fff;
}
/* option - icon */
.is_btn_exlink::before,
.is_btn_exlink::after {
	position: absolute;
	inset: 0;
	content: "";
	margin: auto;
}
.is_btn_exlink::before {
	bottom: -2px;
	left: -2px;
	width: 7px;
	height: 6px;
	background-color: var(--primary-color);
}
.is_btn_exlink::after {
	top: -3px;
	right: -4px;
	width: 4px;
	height: 4px;
	border-top: 1px solid var(--primary-color);
	border-right: 1px solid var(--primary-color);
}
.l_footer_btn a:hover .is_btn_exlink::before {
	background-color: var(--hsuh-color);
}
.l_footer_btn a:hover .is_btn_exlink::after {
	border-top: 1px solid var(--hsuh-color);
	border-right: 1px solid var(--hsuh-color);
}
/* option - color */
.is_btn_nv a {
	background-color: var(--hsuh-color);
}
.is_btn_nv a:hover {
	opacity: 0.7;
}
.is_btn_nv .is_btn_exlink::before {
	background-color: var(--hsuh-color);
}
.is_btn_nv .is_btn_exlink::after {
	border-top: 1px solid var(--hsuh-color);
	border-right: 1px solid var(--hsuh-color);
}
/*  .l_copyright
---------------------------------------------*/
.l_copyright {
	color: var(--hsuh-color);
	font-size: var(--fs-14);
	text-align: center;
}

@media screen and (max-width: 640px) {
	.l_footer_btn_grp {
		flex-direction: column;
	}
	.l_footer_btn_grp > *:not(:first-child) {
		margin-top: 10px;
	}
}