@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap');
/*
  CSS header + footer chép từ site saver (static-files/common/css): reset.css, base.css và phần header, footer, nút của layout.css.
  Khác bản gốc để không làm hỏng trang blog:
  - Rule gắn thẳng vào thẻ (p, a, li, img, header, footer...) được giới hạn trong #header / .footer-bg bằng :where().
    :where() không cộng độ ưu tiên, nên thứ tự đè nhau bên trong header/footer giống hệt site saver.
  - Site saver đặt html { font-size: 62.5% } (1rem = 10px), blog giữ cỡ mặc định: mọi giá trị rem đã đổi sang px (1.6rem → 16px).
  - Không chép: breadcrumb, h2/h3, main, khối contact, hiệu ứng cuộn (thuộc trang, không thuộc header/footer),
    rule cho phần tử không có trong header.html/footer.html (.logo, .header-contact-wrap, .third_nav...).
  - Điện thoại: main { margin-top: 70px } đổi thành .header-wrap { height: 70px } (khoảng trống dưới header cố định).
  - .footer-bg nằm ngay trong <body> nên bỏ cách 100vw + margin âm, dùng chiều rộng mặc định.
  - --header-h: chiều cao header, trang bài dùng cho mục lục dính và vị trí tiêu đề khi bấm mục lục.
  - Cuối file: dropdown chọn ngôn ngữ (site saver không có).
*/

/* reset.css
------------------------------------------------------ */
:where(#header, .footer-bg),
:where(#header, .footer-bg) :where(div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, small, strong, b, i,
	ul, ol, li, figure, figcaption, footer, header, nav, section, details, summary) {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
:where(#header, .footer-bg) :where(ol, ul) {
	list-style: none;
}
/* body { line-height: 1 } và html { font-size: 62.5%; color: #333 } của site saver, áp cho khung header/footer */
:where(#header, .footer-bg) {
	font-size: 10px;
	line-height: 1;
	color: #333;
}
/* Site saver không dùng border-box (blog thì có) */
:where(#header, .footer-bg),
:where(#header, .footer-bg) *,
:where(#header, .footer-bg) *::before,
:where(#header, .footer-bg) *::after {
	box-sizing: content-box;
}

/* base.css
------------------------------------------------------ */
:where(#header, .footer-bg) a {
	text-decoration: none;
	color: #333;
}
:where(#header, .footer-bg) img {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}
:where(#header, .footer-bg) :is(p, a, span, small, li, h1, h2, h3, h4, h5, h6, button) {
	font-family: Arial, 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: .1em;
}
:where(#header, .footer-bg) p {
	text-align: justify;
}
:where(#header, .footer-bg) :is(p, a, span, small, li, h1, h2, h3, h4, h5, h6, div),
:where(.footer-bg) {
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .1em;
}
:where(#header, .footer-bg) a {
	transition: 0.3s;
}
:where(#header, .footer-bg) a:hover {
	opacity: 0.7;
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 901px) {
	.spElement {
		display: none!important;
	}
	.page-top-area {
		max-width: 1050px;
	}
	:where(#header, .footer-bg) :is(p, a, span, small, li, h1, h2, h3, h4, h5, h6, div),
	:where(.footer-bg) {
		font-size: min(1vw, 16px);
		line-height: 24px;
		letter-spacing: 3px;
	}
}
@media print, screen and (min-width: 769px) {
	.pagetop {
		width: 5%;
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 999;
		max-width: 65px;
		cursor: pointer;
	}
}
@media all and (max-width: 768px) {
	.pagetop {
		width: 15%;
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 999;
		text-align: right;
		margin-left: auto;
	}
}

/* layout.css
------------------------------------------------------ */
/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	:where(#header, .footer-bg) :is(p, a, span, small, li, h1, h2, h3, h4, h5, h6) {
		font-size: min(1vw, 16px);
		line-height: 24px;
		letter-spacing: 1px;
		font-family: 'Noto Sans JP', sans-serif;
	}
	:where(#header, .footer-bg) a {
		word-break: break-all;
	}
}

/* header
------------------------------------------------------ */
:root {
	--header-h: 130px;
}
header:where(#header) {
	margin: 0 auto;
}
.header-top a img {
	object-fit: contain;
	width: 100%;
	height: 100%;
	text-align: center;
}
#header {
	background-color: #fff;
	left: 0;
	position: fixed;
	top: 0;
	-moz-transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	width: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
}
#header .header_inner {
	position: relative;
	width: 80%;
}
/* global_nav */
#header #header_nav {
	margin: 0 auto;
	width: 100%;
}
#header #global_nav > ul {
	letter-spacing: -0.4em;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
#header #global_nav > ul > li {
	letter-spacing: normal;
	font-size: 9px;
	position: relative;
	text-align: center;
	width: auto;
	margin-right: 30px;
}
#header #global_nav > ul > li:first-child {
	margin-left: 0;
}
#header #global_nav > ul > li a {
	color: #000;
	font-weight: 400;
}
#header #global_nav .second_nav {
	display: none;
}
.header-top {
	display: flex;
	width: 18%;
}
nav#global_nav {
	margin: 0 auto;
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 901px) {
	#nav_trigger {
		display: none;
	}
	#header {
		height: 130px;
		max-height: 130px;
	}
	/* global_nav */
	#header #global_nav > ul > li.current > a {
		color: #9cc701;
	}
	#header #global_nav .second_nav {
		background: url(../images/header-bg.png) no-repeat;
		margin-top: 0;
		padding: 0;
		position: absolute;
		width: 100vw;
		z-index: 9999999999;
		margin: 0 calc(50% - 50vw);
		top: 130px;
		left: 0;
		background-size: cover;
	}
	#header #global_nav .second_nav li {
		font-size: 10px;
		position: relative;
		width: 200px;
		margin: 0 auto;
		padding-left: 680px;
	}
	#header #global_nav .second_nav_services li {
		width: auto;
		padding: 0;
	}
	#header #global_nav .second_nav_technology li {
		width: auto;
		padding: 0;
	}
	#header #global_nav .second_nav li a {
		color: #303030;
		padding: 10px 0;
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		display: block;
	}
	nav#global_nav {
		margin-left: auto;
		margin-right: 0;
		height: 100%;
	}
	#header #global_nav > ul {
		height: 100%;
	}
	#header #header_nav {
		margin-right: 0;
		height: 100%;
	}
	#header #global_nav > ul > li {
		height: 100%;
	}
	#header .header_inner {
		display: flex;
		align-items: center;
		position: unset;
	}
	#header #global_nav > ul > li {
		position: unset;
	}
	.header-wrap {
		position: relative;
	}
	.head-contact {
		width: 220px!important;
		line-height: 44px;
		height: 44px;
		margin-right: 12px!important;
		display: flex;
		align-items: center;
	}
	.head-contact a {
		padding-top: 10px!important;
		padding-bottom: 10px!important;
		height: 26px!important;
	}
	#header #global_nav .second_nav li a:after {
		content: '';
		background: url(../images/secondnav-arrow.png) no-repeat;
		background-size: contain;
		width: 12px;
		height: 12px;
		vertical-align: middle;
		display: inline-block;
		transform: inherit;
		position: absolute;
		right: 0;
		top: 44%;
		left: auto;
	}
	#header #global_nav .second_nav_services li a:after, #header #global_nav .second_nav_technology li a:after {
		position: relative;
		top: 0;
		left: 1%;
	}
	.header-area {
		display: flex;
		width: 98%;
		margin: 0 auto;
		max-width: 1480px;
		height: 100%;
	}
	#header #global_nav > ul > li:nth-child(7) {
		margin-right: 30px;
	}
	#header #global_nav > ul > li a {
		font-size: min(.9vw, 15px);
		height: 100%;
		line-height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 左から右に線が伸びる（下部） */
	nav#global_nav ul li a {
		padding: 0 0 10px;
		text-decoration: none;
		position: relative;
	}
	nav#global_nav ul li.current a, nav#global_nav ul li a:hover {
		color: #333333;
	}
	nav#global_nav ul li:not(:nth-child(7)):not(:nth-child(8)) a::after {
		content: '';
		position: absolute;
		bottom: 55px;
		left: 0;
		width: 100%;
		height: 1.5px;
		background: #333333;
		transition: all .3s;
		transform: scale(0, 1);
		transform-origin: left top;
	}
	nav#global_nav ul li.current a::after, nav#global_nav ul li a:hover::after {
		transform: scale(1, 1);
	}
	.header-wrap {
		height: 130px;
	}
	#header #global_nav .second_nav li a {
		line-height: 60px;
		height: 60px;
	}
}
#header #global_nav.fixed > ul > li:nth-child(1):after, #header #global_nav.fixed > ul > li:nth-child(2):after, #header #global_nav.fixed > ul > li:nth-child(3):after, #header #global_nav.fixed > ul > li:nth-child(4):after, #header #global_nav.fixed > ul > li:nth-child(5):after, #header #global_nav.fixed > ul > li:nth-child(6):after, #header #global_nav.fixed > ul > li:nth-child(7):after {
	content: none;
}

/*SP Layout
===================================*/
@media all and (max-width: 900px) {
	:root {
		--header-h: 70px;
	}
	.header-wrap {
		height: 70px;
	}
	#header {
		border-bottom-width: 2px;
		min-width: inherit;
		align-items: flex-start;
		background: #fff!important;
	}
	#header.active {
		background-color: #333 !important;
		border-bottom: none;
		height: 100%;
		overflow: auto;
		display: block;
	}
	#nav_trigger {
		height: 70px;
		position: absolute;
		top: 0;
		right: 0;
		width: 70px;
		z-index: 102;
		background: transparent linear-gradient(107deg, #9CC701 0%, #11540B 100%) 0% 0% no-repeat padding-box;
	}
	#header.active #nav_trigger {
		border-color: #393939 !important;
	}
	#nav_trigger span {
		background-color: #fff;
		border-radius: 50px;
		height: 1px;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		position: absolute;
		-webkit-transition: all .3s;
		transition: all .3s;
		width: 38px;
	}
	#nav_trigger.active span {
		color: #fff;
	}
	#nav_trigger span:nth-of-type(1) {
		top: 20px;
	}
	#nav_trigger span:nth-of-type(2) {
		top: 30px;
	}
	#nav_trigger span:nth-of-type(3) {
		top: 40px;
	}
	#nav_trigger.active span:nth-of-type(1) {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 24px;
	}
	#nav_trigger.active span:nth-of-type(2) {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 24px;
	}
	.header-top {
		display: block;
		width: 40%;
	}
	/* global_nav */
	#header #header_nav {
		display: none;
		margin-top: 0;
		overflow-y: scroll;
		left: 0;
		top: 0;
		height: calc(100% - 65px);
		width: 80%;
	}
	#header #global_nav > ul > li {
		display: block;
		margin: 0;
		position: relative;
		text-align: left;
	}
	#header #global_nav > ul > li:first-child {
		border-top: none;
	}
	#header #global_nav > ul > li a {
		font-size: 16px;
		padding: 16px 0 4px 0;
		color: #fff;
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	#header #global_nav .second_nav li a {
		font-size: 14px;
		display: block;
	}
	#header #global_nav > ul > li .icn_open {
		position: absolute;
		height: 25px;
		right: 5px;
		top: 12px;
		width: 25px;
	}
	#header #global_nav > ul > li .icn_open:before, #header #global_nav > ul > li .icn_open:after {
		background-color: #fff;
		content: "";
		height: 1px;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		right: 0;
		width: 14px;
	}
	#header #global_nav > ul > li .icn_open:after {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	#header #global_nav > ul > li .icn_open.active:after {
		display: none;
	}
	#header #global_nav > ul {
		flex-direction: column;
	}
	#header #global_nav > ul > li {
		width: 100%;
		border-bottom: .5px solid #fff;
	}
	.header-top a img {
		width: 100%;
		margin: 0 auto;
		height: 70px;
	}
	.header-top .headsp-contact-icon img {
		height: auto;
	}
	div#nav_trigger p, .headsp-contact p {
		font-size: 9px;
		text-align: center;
		position: absolute;
		bottom: 4px;
		right: 0;
		left: 0;
		color: #fff;
	}
	.headsp-contact-icon {
		width: 40%;
		margin: 20px auto 0;
	}
	#header .header_inner {
		width: 0px;
		margin-right: 50px;
	}
	#header.active .header_inner {
		width: 100%;
	}
	.head-contact {
		margin-bottom: 10px!important;
		margin-top: 60px!important;
	}
	.head-contact + .head-contact {
		margin-top: 0!important;
	}
	.head-contact, #header #global_nav > ul > li:last-child {
		border-bottom: none!important;
		width: 100%!important;
	}
	#header #global_nav > ul > li:has(.more-other-btn),
	#header #global_nav > ul > li:has(.more-btn),
	#header #global_nav > ul > li:has(.more-btn02) {
		border-bottom: none !important;
		margin-bottom: 16px;
	}
	#header #global_nav > ul > li:has(.more-other-btn) {
		margin-top: 60px;
	}
	.sphead-info {
		display: flex;
		justify-content: center;
		margin: 30px auto;
	}
	.sphead-info a {
		color: #fff;
		display: block;
		font-size: 14px;
	}
	.sphead-info a:first-child {
		margin-right: 20px;
	}
	.spheader-saver {
		position: absolute;
		right: 0;
		width: 25%;
		top: -20px;
	}
	.header-top {
		margin-left: 10px;
	}
	#header.active .header-top {
		margin-left: 24px;
	}
	.headsp-contact {
		position: absolute;
		top: 0;
		right: 140px;
		width: 70px;
		height: 70px;
		background: #333;
	}
	.headsp-contact:first-of-type {
		border-right: 1px solid #555;
	}
	.headsp-contact + .headsp-contact {
		right: 70px;
	}
	#header.active .headsp-contact {
		display: none;
	}
	#header.active #nav_trigger span:nth-of-type(3) {
		display: none;
	}
	#header.active #nav_trigger {
		background: none;
	}
	#header .close {
		display: none;
	}
	#header.active .close {
		display: block;
	}
	#header.active .open {
		display: none;
	}
	.header-area {
		width: 100%;
	}
}

/* footer
------------------------------------------------------ */
.footer-bg {
	background: #333333;
	padding: 40px 0;
}
:where(.footer-bg) footer {
	width: 90%;
	max-width: 1180px;
	margin: 0 auto 50px;
}
.copyrights {
	text-align: center;
	font-size: 12px;
}
:where(.footer-bg) footer, :where(.footer-bg) footer a {
	color: #fff;
}
.copy-wrap, .copy-wrap a {
	color: #fff;
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 901px) {
	:where(.footer-bg) footer {
		display: flex;
		justify-content: space-between;
		width: 85%;
		max-width: 1384px;
	}
	.copy-wrap {
		width: 80%;
		max-width: 1384px;
		margin: 0 auto;
	}
	.footer-nav {
		display: flex;
		flex-wrap: wrap;
		width: 45%;
		justify-content: space-between;
	}
	.footer-info {
		width: 19%;
	}
	.footer-logo {
		width: 100%;
	}
	.footer-nav ul {
		width: 42%;
	}
	.footer-nav ul li {
		margin-bottom: 10px;
	}
	.footer-nav ul:last-child {
		width: 15%;
	}
	.footer-link-wrap {
		width: 25%;
	}
	.copy-wrap {
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
		border-top: 0.5px solid #fff;
	}
	.copy-wrap ul {
		display: flex;
	}
	.copy-wrap ul li:first-child {
		margin-right: 20px;
	}
	.footer-link-item01 p, .footer-link-item02 p, .copy-wrap, .copy-wrap a {
		font-size: 13px;
		line-height: 20px;
	}
}

/*SP Layout
===================================*/
@media all and (max-width: 900px) {
	.footer-info, .footer-logo {
		width: 70%;
		margin: 0 auto;
		margin-left: 0;
	}
	:where(.footer-bg) footer {
		margin: 0 auto 40px;
		width: 100%;
	}
	.footer-nav {
		width: 65%;
		margin: 10px auto;
	}
	.copy-wrap ul {
		display: flex;
		justify-content: center;
	}
	.footer-link-item01 p, .footer-link-item02 p, .copy-wrap, .copy-wrap a {
		font-size: 14px;
	}
	.footer-nav ul li {
		margin-bottom: 10px;
	}
	.footer-nav ul li a {
		font-size: 14px;
	}
	.footer-nav {
		margin-bottom: 20px;
	}
	.copy-wrap {
		display: flex;
		flex-direction: column-reverse;
		padding-top: 20px;
		border-top: 0.5px solid #fff;
		width: 90%;
		margin: 0 auto;
	}
	.copy-wrap a {
		font-size: 12px;
		margin: 10px;
	}
	.copyrights {
		margin-top: 10px;
	}
}

/* ボタン（footer + header）
------------------------------------------------------ */
.footer-link-item01 {
	position: relative;
	color: #fff;
	padding: 10px 30px;
	text-decoration: none;
	border-radius: 30px;
	outline: none;
	transition: all 0.3s ease-in-out;
	background: linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	width: 70%;
	text-align: center;
	margin: 10px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}
.footer-link-item01 p:before {
	content: '';
	background: url(../images/contact-icon.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.footer-link-item01 p {
	text-align: center;
}
.footer-link-item01:hover {
	background: #333;
	color: #fff;
	border-color: transparent;
	opacity: 1;
}
.footer-link-item01::before, .footer-link-item01::after {
	content: '';
	position: absolute;
	border: solid #fff;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
.footer-link-item01::before {
	top: 3px;
	left: 6px;
	border-width: 0;
	border-radius: 30px 0 0 0;
}
.footer-link-item01::after {
	bottom: 3px;
	right: 6px;
	border-width: 0;
	border-radius: 0 0 30px 0;
}
.footer-link-item01:hover::before, .footer-link-item01:hover::after {
	width: calc(10% + 11px);
	height: calc(10% + 11px);
	border-color: #fff;
}
.footer-link-item01:hover::before {
	border-width: 1px 0 0 1px;
}
.footer-link-item01:hover::after {
	border-width: 0 1px 1px 0;
}
.footer-link-item02 {
	position: relative;
	color: #fff;
	border: 1px solid #fff;
	padding: 10px 30px;
	text-decoration: none;
	border-radius: 30px;
	outline: none;
	transition: all 0.3s ease-in-out;
	width: 70%;
	text-align: center;
	background: #333;
	display: block;
	margin: 10px auto;
	z-index: 10;
}
.footer-link-item02 p {
	text-align: center;
}
.footer-link-item02 p:before {
	content: '';
	background: url(../images/download-icon.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.footer-link-item02:hover {
	background: #333;
	color: #fff;
	border-color: transparent;
	opacity: 1;
}
.footer-link-item02::before, .footer-link-item02::after {
	content: '';
	position: absolute;
	border: solid #fff;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
.footer-link-item02::before {
	top: 3px;
	left: 6px;
	border-width: 0;
	border-radius: 30px 0 0 0;
}
.footer-link-item02::after {
	bottom: 3px;
	right: 6px;
	border-width: 0;
	border-radius: 0 0 30px 0;
}
.footer-link-item02:hover::before, .footer-link-item02:hover::after {
	width: calc(10% + 11px);
	height: calc(10% + 11px);
	border-color: #fff;
}
.footer-link-item02:hover::before {
	border-width: 1px 0 0 1px;
}
.footer-link-item02:hover::after {
	border-width: 0 1px 1px 0;
}
.more-btn {
	position: relative;
	color: #fff!important;
	border: 1px solid #fff;
	padding: 10px 30px;
	display: inline-block;
	text-decoration: none;
	border-radius: 30px;
	outline: none;
	transition: all 0.3s ease-in-out;
	background: linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	width: 100%;
	text-align: center;
}
.more-btn p {
	text-align: center;
	font-size: min(1vw, 18px);
	letter-spacing: 2px;
	align-items: center;
	display: inline-flex;
}
.more-btn p:before {
	content: '';
	background: url(../images/contact-icon.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.more-btn:hover {
	background: #333;
	color: #fff;
	border-color: transparent;
	opacity: 1;
}
.more-btn::before, .more-btn::after {
	content: '';
	position: absolute;
	border: solid #fff;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
.more-btn::before {
	top: 3px;
	left: 6px;
	border-width: 0;
	border-radius: 30px 0 0 0;
}
.more-btn::after {
	bottom: 3px;
	right: 6px;
	border-width: 0;
	border-radius: 0 0 30px 0;
}
.more-btn:hover::before, .more-btn:hover::after {
	width: calc(10% + 11px);
	height: calc(10% + 11px);
	border-color: #fff;
}
.more-btn:hover::before {
	border-width: 1px 0 0 1px;
}
.more-btn:hover::after {
	border-width: 0 1px 1px 0;
}
.more-other-btn {
	position: relative;
	color: #fff!important;
	border: 1px solid #fff;
	padding: 10px 30px;
	display: inline-block;
	text-decoration: none;
	border-radius: 30px;
	outline: none;
	transition: all 0.3s ease-in-out;
	background: linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	width: 100%;
	text-align: center;
}
.more-other-btn p {
	text-align: center;
	font-size: min(1vw, 18px);
	letter-spacing: 2px;
	align-items: center;
	display: inline-flex;
}
.more-other-btn p:before {
	content: '';
	background: url(../images/recruit-icon.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.more-other-btn:hover {
	background: #333;
	color: #fff;
	border-color: transparent;
	opacity: 1;
}
.more-other-btn::before, .more-other-btn::after {
	content: '';
	position: absolute;
	border: solid #fff;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
.more-other-btn::before {
	top: 3px;
	left: 6px;
	border-width: 0;
	border-radius: 30px 0 0 0;
}
.more-other-btn::after {
	bottom: 3px;
	right: 6px;
	border-width: 0;
	border-radius: 0 0 30px 0;
}
.more-other-btn:hover::before, .more-other-btn:hover::after {
	width: calc(10% + 11px);
	height: calc(10% + 11px);
	border-color: #fff;
}
.more-other-btn:hover::before {
	border-width: 1px 0 0 1px;
}
.more-other-btn:hover::after {
	border-width: 0 1px 1px 0;
}
.more-btn02 {
	position: relative;
	color: #fff;
	border: 1px solid #fff;
	padding: 10px 30px;
	display: inline-block;
	text-decoration: none;
	border-radius: 30px;
	outline: none;
	transition: all 0.3s ease-in-out;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	background: #333;
}
.more-btn02 p:before {
	content: '';
	background: url(../images/download-icon.png) no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.more-btn02 p {
	text-align: center;
}
.more-btn02:hover {
	background: #333;
	color: #fff;
	border-color: transparent;
	opacity: 1;
}
.more-btn02::before, .more-btn02::after {
	content: '';
	position: absolute;
	border: solid #fff;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
.more-btn02::before {
	top: 3px;
	left: 6px;
	border-width: 0;
	border-radius: 30px 0 0 0;
}
.more-btn02::after {
	bottom: 3px;
	right: 6px;
	border-width: 0;
	border-radius: 0 0 30px 0;
}
.more-btn02:hover::before {
	border-width: 1px 0 0 1px;
}
.more-btn02:hover::after {
	border-width: 0 1px 1px 0;
}
.more-btn02:hover::before, .more-btn02:hover::after {
	width: calc(10% + 11px);
	height: calc(10% + 11px);
	border-color: #fff;
}

/*pc Layout
===================================*/
@media all and (min-width: 901px) {
	.footer-bg a {
		font-size: min(.9vw, 15px);
	}
}

/*sp Layout
===================================*/
@media all and (max-width: 900px) {
	.footer-link-item01, .footer-link-item02 {
		width: 70%;
		padding: 10px 0;
	}
	.footer-bg {
		position: relative;
	}
	.footer-logo-bg.spElement {
		position: absolute;
		top: 50px;
		width: 25%;
		right: 0;
	}
	li.develop-core {
		margin-left: 20px;
	}
	li.services-core {
		margin-left: 20px;
	}
	li.technology-core {
		margin-left: 20px;
	}
	.more-btn p {
		font-size: 14px;
	}
	#header #global_nav > ul > li a.more-btn, #header #global_nav > ul > li a.more-btn02 {
		padding: 10px 0;
	}
	.more-other-btn p {
		font-size: 14px;
	}
	#header #global_nav > ul > li a.more-other-btn, #header #global_nav > ul > li a.more-btn02 {
		padding: 10px 0;
	}
	.more-btn02 p {
		font-size: 14px;
	}
}

@media (max-width: 1240px) and (min-width: 901px) {
	#header #global_nav > ul > li {
		margin-right: 16px;
	}
	.head-contact {
		width: 150px!important;
	}
	#header #global_nav .second_nav li a {
		font-size: 12px!important;
	}
	#header #global_nav .second_nav li {
		padding-left: 550px;
	}
	#header #global_nav .second_nav_services li {
		padding-left: 0;
	}
	#header #global_nav .second_nav li a {
		line-height: 40px!important;
		height: 40px!important;
	}
}

@media screen and (min-width: 901px) and (max-width: 1024px) {
	:root {
		--header-h: 100px;
	}
	:where(.footer-bg) footer {
		flex-wrap: wrap;
	}
	.footer-nav {
		width: 68%;
	}
	.footer-link-wrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.footer-link-item01, .footer-link-item02 {
		width: 38%;
	}
	#header #global_nav > ul > li {
		margin-right: 10px;
	}
	#header #global_nav > ul > li:nth-child(7) {
		margin-right: 10px;
	}
	#header .header_inner {
		width: 90%;
	}
	.head-contact {
		width: 120px!important;
	}
	.header-wrap, #header {
		height: 100px;
	}
	nav#global_nav ul li:not(:nth-child(8)):not(:nth-child(9)) a::after {
		bottom: 30px;
	}
	#header #global_nav .second_nav {
		top: 100px;
	}
}

/*Tablet Layout
===================================*/
@media all and (min-width: 899px) {
	.tabElement {
		display: none;
	}
}

/* Dropdown chọn ngôn ngữ (chỉ có ở blog), làm cho hợp với nút của site saver
   Máy tính: nút tròn nằm cuối header, cùng chiều cao / bo góc / cỡ chữ / hiệu ứng rê chuột với 採用情報, お問い合わせ
   (.more-btn), nhưng nền trắng viền gradient để 2 nút chính vẫn nổi hơn.
   Header saver vốn đã chật (không có nút này thì ở 1241–1280px menu cũng xuống dòng), nên để nút không ép menu:
   - Máy tính (≥ 901px): nút tròn 48px chỉ có icon (tên nằm ở title + chữ ẩn + danh sách). Có thêm tên hoặc mã EN/JP thì
     logo SVG (462×90, rộng hết khung .header-top) sát menu: 1440px chỉ còn 11–13px, 1920px 10–13px.
   - Chữ menu không xuống dòng (white-space: nowrap), 2 nút 採用情報/お問い合わせ 180px ở 1241–1365px, 200px ở 1366–1439px
     (site saver: 220px).
   ≤ 900px: ô 70×70 giống RECRUIT/CONTACT, nằm bên trái 2 ô đó. Màn < 504px logo đổi sang logo vuông của CMS để đủ chỗ;
   màn < 346px vẫn không đủ nên ô chỉ hiện khi mở MENU. Mở MENU thì 2 ô kia ẩn, ô ngôn ngữ nằm cạnh nút CLOSE.
------------------------------------------------------ */
.header-lang {
	flex: none;
	align-self: center;
	margin-left: 12px;
	position: relative;
	z-index: 5;
}
#header .langs {
	position: relative;
}
#header .langs summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 48px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 30px;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #9CC701 0%, #11540B 100%) border-box;
	color: #333;
	font: min(1vw, 18px)/1 Arial, 'Noto Sans JP', sans-serif;
	letter-spacing: 2px;
	cursor: pointer;
	user-select: none;
	list-style: none;
	white-space: nowrap;
	transition: all 0.3s ease-in-out;
}
#header .langs summary span {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}
#header .langs summary::-webkit-details-marker {
	display: none;
}
#header .langs .lang-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#header .langs .lang-icon {
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #11540B;
	stroke-width: 1.5;
	transition: stroke 0.3s ease-in-out;
}
/* Mũi tên: xoay lên khi mở */
#header .langs .lang-caret {
	display: block;
	flex: none;
	width: 10px;
	height: 6px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	transition: transform 0.15s;
}
#header .langs[open] .lang-caret {
	transform: rotate(180deg);
}
/* Rê chuột / đang mở: nền #333 và 2 góc trắng chạy ra, giống .more-btn:hover */
#header .langs summary:hover, #header .langs[open] summary {
	background: #333;
	border-color: #333;
	color: #fff;
}
#header .langs summary:hover .lang-icon, #header .langs[open] .lang-icon {
	stroke: #fff;
}
#header .langs summary::before, #header .langs summary::after {
	content: '';
	position: absolute;
	border: solid #fff;
	border-width: 0;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
#header .langs summary::before {
	top: 3px;
	left: 6px;
	border-radius: 30px 0 0 0;
}
#header .langs summary::after {
	bottom: 3px;
	right: 6px;
	border-radius: 0 0 30px 0;
}
#header .langs summary:hover::before, #header .langs summary:hover::after,
#header .langs[open] summary::before, #header .langs[open] summary::after {
	width: calc(10% + 11px);
	height: calc(10% + 11px);
}
#header .langs summary:hover::before, #header .langs[open] summary::before {
	border-width: 1px 0 0 1px;
}
#header .langs summary:hover::after, #header .langs[open] summary::after {
	border-width: 0 1px 1px 0;
}
/* Danh sách ngôn ngữ: mục đang xem là nút gradient như 2 nút chính */
#header .langs ul {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 10;
	min-width: 170px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
}
#header .langs li {
	line-height: 1.5;
	letter-spacing: normal;
}
#header .langs li + li {
	margin-top: 4px;
}
#header .langs li a {
	display: block;
	padding: 10px 18px;
	border-radius: 30px;
	font: 14px/1.5 Arial, 'Noto Sans JP', sans-serif;
	letter-spacing: 2px;
	color: #333;
	word-break: normal;
	white-space: nowrap;
}
#header .langs li a:hover {
	background: #f3f3f3;
	opacity: 1;
}
#header .langs li a[aria-current] {
	color: #fff;
	background: linear-gradient(90deg, #9CC701 0%, #11540B 100%);
}
@media print, screen and (min-width: 901px) {
	#header #global_nav > ul > li > a {
		white-space: nowrap;
	}
}
@media screen and (min-width: 1241px) and (max-width: 1365px) {
	.head-contact {
		width: 180px!important;
	}
}
@media screen and (min-width: 1366px) and (max-width: 1439px) {
	.head-contact {
		width: 200px!important;
	}
}
@media print, screen and (min-width: 901px) {
	#header .langs summary {
		width: 48px;
		padding: 0;
	}
	#header .langs .lang-text {
		display: none;
	}
}
@media all and (max-width: 900px) {
	/* Ô 70×70 bên trái RECRUIT (ô RECRUIT bắt đầu cách phải 211px), có vạch #555 ngăn cách như giữa RECRUIT và CONTACT */
	.header-lang {
		position: absolute;
		top: 0;
		right: 211px;
		margin: 0;
	}
	#header .langs summary {
		display: block;
		width: 71px;
		height: 70px;
		/* padding thay cho margin-top của icon: margin của phần tử con đầu tiên sẽ tràn ra ngoài summary và đẩy cả ô xuống */
		padding: 17px 0 0;
		border: 0;
		border-right: 1px solid #555;
		border-radius: 0;
		background: #333;
		color: #fff;
		font-size: 9px;
		letter-spacing: 1px;
		transition: none;
	}
	#header .langs summary::before, #header .langs summary::after {
		display: none;
	}
	#header .langs .lang-icon {
		width: 24px;
		height: 24px;
		margin: 0 auto;
		stroke: #fff;
	}
	/* Cùng dòng với chữ RECRUIT/CONTACT (p: bottom 4px, line-height 24px ở ≤ 768px, 13.5px ở 769–900px) */
	#header .langs .lang-text {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4px;
		height: 24px;
		justify-content: center;
		gap: 4px;
	}
	#header .langs .lang-caret {
		width: 7px;
		height: 5px;
	}
	#header .langs summary:hover {
		background: #333;
	}
	#header .langs[open] summary {
		background: #444;
	}
	/* Danh sách canh trái theo ô: ô nằm gần giữa màn (vd 375px: x 93–163), canh phải thì danh sách rộng 170px
	   tràn ra ngoài mép trái. Mở MENU thì ô sát bên phải (cạnh CLOSE) nên canh phải */
	#header .langs ul {
		top: calc(100% + 6px);
		left: 0;
		right: auto;
	}
	#header.active .langs ul {
		left: auto;
		right: 0;
	}
	/* Menu đang mở: nền header #333, ô nằm cạnh nút CLOSE, không vạch ngăn */
	#header.active .header-lang {
		right: 70px;
	}
	#header.active .langs summary {
		width: 70px;
		border-right: 0;
		background: transparent;
	}
	#header.active .langs[open] summary {
		background: rgb(255 255 255 / 0.08);
	}
}
@media all and (min-width: 769px) and (max-width: 900px) {
	#header .langs .lang-text {
		height: 13.5px;
	}
}
/* Logo: <picture> đổi sang logo vuông của CMS ở màn < 504px (SiteHeader.astro).
   display: contents để <img> vẫn nằm thẳng trong <a> như header.html, CSS .header-top a img giữ nguyên tác dụng */
.header-top picture {
	display: contents;
}
/* Logo SVG (462×90) rộng hết khung .header-top (40% màn): ô ngôn ngữ bắt đầu ở (màn − 282px), logo hết ở (10px + 40% màn),
   dưới 504px thì đè nhau. Nên dưới 504px dùng logo vuông 44px như Blog Manager, căn giữa thanh 70px */
@media all and (max-width: 503px) {
	.header-top a img {
		width: 44px;
		height: 44px;
		margin: 13px 0;
	}
}
/* Logo vuông hết ở 54px: dưới 346px (máy 320px) ô ngôn ngữ vẫn đè logo nên chỉ hiện khi mở MENU */
@media all and (max-width: 345px) {
	#header:not(.active) .header-lang {
		display: none;
	}
}

/* Chữ theo ngôn ngữ (data-i18n, SiteHeader.astro / SiteFooter.astro)
------------------------------------------------------ */
/* Một phần chữ của link được bọc <span data-i18n> (vd "WebRTC低遅延映像配信システム <br>Saver Video Connect V4"). reset ở đầu file
   gán cỡ chữ cho mọi span (≤ 768px: min(1vw, 16px) nên chữ chỉ còn ~4px): span này lấy chữ của link bao ngoài như khi chưa bọc. */
:where(#header, .footer-bg) span[data-i18n] {
	font: inherit;
	letter-spacing: inherit;
}
/* ≤ 768px site saver đặt word-break: break-all cho link (xuống dòng giữa chữ tiếng Nhật). Chữ tiếng Anh thì bị ngắt giữa từ
   ("Streami / ng"): ngôn ngữ khác tiếng Nhật xuống dòng theo từ, chỉ ngắt giữa từ khi một từ dài hơn cả dòng. */
@media all and (max-width: 768px) {
	html:not(:lang(ja)) :where(#header, .footer-bg) a {
		word-break: normal;
		overflow-wrap: anywhere;
	}
}
/* Menu máy tính của ngôn ngữ khác tiếng Nhật: chữ Anh dài hơn ("Products & Services"), với letter-spacing 3px và cách mục 30px
   như site saver thì menu đè sát logo (đo bằng CDP: 0px ở 901–1920px). Chữ cách 1.5px; từ 1241px (2 nút rộng 180/200px,
   dư chỗ) các mục cách nhau 20px. Kết quả: menu cách logo ≥ 27px, tương đương bản tiếng Nhật. */
@media print, screen and (min-width: 901px) {
	html:not(:lang(ja)) #header #global_nav > ul > li > a {
		letter-spacing: 1.5px;
	}
}
@media print, screen and (min-width: 1241px) {
	html:not(:lang(ja)) #header #global_nav > ul > li:not(.head-contact) {
		margin-right: 20px;
	}
}