@charset "utf-8";

.PC {
	display: block;
}

.PC2 {
	display: block;
}

.SP {
	display: none;
}

.Tab {
	display: none;
}

:root {
	--text_XXS_size: 11px;
	--text_S_size: 16px;
	--SP_text_S_size: 14px;
	--SP_heading_XL_size: 28px;
	--SP_heading_L_size: 24px;
	--SP_heading_M_size: 20px;
	--SP_heading_S_size: 18px;
}

.is-disabled-link {
	pointer-events: none;
	/* クリック/タップ無効 */
	cursor: default;
	/* 見た目もリンクっぽさを減らすなら */
	text-decoration: none;
}

body {
	background: #03000C;
}

header {
	padding: 38px 80px;
}

header .logo img {
	width: 100%;
	max-width: 220px;
}

header .site_header_inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .site_header_inner ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .site_header_inner ul li {
	margin-right: 44px;
}

header .site_header_inner ul li:last-child {
	margin-right: 0px;
}

header .site_header_inner ul a {
	color: #fff;
	text-decoration: none;
}

header .site_header_inner ul a:hover {
	opacity: 0.8;
}

/*SPメニュー*/
.sp_menu {
	display: none;
}

.btn-trigger {
	display: none;
}

.contactElm {
	width: 80%;
	max-width: 660px;
	margin: 180px auto 0;

}

.solutionElm .contactElm {
	opacity: 0;
	transform: translateY(30px);
}

.contactElm .contactElm_inner {
	opacity: 0;
	transform: translateY(30px);
}

.contactElm h2 {
	color: var(--white, #FFF);
	text-align: center;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.contactElm .mailaddress {
	color: var(--white, #FFF);
	text-align: center;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 31px;
	opacity: 0.9;
	margin-top: 36px;
}

.contactElm .contact_txt {
	color: var(--white_subtext, rgba(255, 255, 255, 0.70));

	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
	opacity: 0.9;
	margin-top: 16px;
}

.contactElm .contact_txt a {
	color: var(--white_subtext, rgba(255, 255, 255, 0.70));

	text-decoration: underline;
}

.contactElm ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 43px;
}

.contactElm ul li {}

.contactElm ul li a {
	display: flex;
	width: 311px;
	height: 76px;
	justify-content: center;
	align-items: center;
	gap: 14px;
	border-radius: 38px;
	border: 1px solid var(--white, #FFF);
}

.contactElm ul li a span {
	color: var(--white, #FFF);
	margin-right: 14px;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.contactElm ul li a:hover {
	background: #fff;
}

.contactElm ul li a:hover span {
	color: #03000C;
}

.contactElm ul li a:hover svg path {
	stroke: #000;
}

.newsElm .contactElm,
.topElm .contactElm {
	width: 100%;
	max-width: none;
	position: relative;
	background: #000;
	margin: 50px auto 110px;
	background: url(../images/bg_under_purple.png) no-repeat #000;
	background-size: cover;
	background-position: center top;
	min-height: 400px;
}

.topElm .contactElm {
	margin-top: 0px;
}

.newsElm .contactElm .imgBox,
.topElm .contactElm .imgBox {
	position: absolute;
	top: 0;
	display: none;
}

.newsElm .contactElm .imgBox img,
.topElm .contactElm .imgBox img {
	width: 100%;
}

.newsElm .contactElm .contactElm_inner,
.topElm .contactElm .contactElm_inner {
	position: relative;
	z-index: 9;
	padding: 240px 0 0;
}

.newsElm .contactElm .contactElm_inner {
	opacity: 1;
	transform: translateY(0px);
}

footer {
	margin-top: 116px;
	display: flex;
	background: #fff;
	height: 160px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

footer p {
	color: var(--text, #2B2B2B);
	text-align: center;

	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
}

/* フェードアップ時（ご提示のCSSをそのまま利用） */
.anim-box.fadeup.is-animated {
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
	0% {
		transform: translateY(30px);
		opacity: 0;
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@media screen and (max-width: 1024px) {
	.Tab {
		display: block;
	}

	.PC2 {
		display: none;
	}

	/*ウィンドウ幅が最大767pxまでの場合に適用*/
	/* スクロールロック用（画面ジャンプ防止） */
	body.scroll-lock {
		position: fixed;
		width: 100%;
		overflow: hidden;
		/* 念のため */
	}

	header {
		padding: 17px 24px;
		max-height: 72px;
		position: relative;
		z-index: 9999;
	}

	header .site_header_inner {
		display: block;
		position: relative;
	}

	header .site_header_inner h1 {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		top: 0%;
	}

	header .site_header_inner ul {
		display: none;
	}

	/*メニュー*/
	.btn-trigger {
		width: 36px;
		height: 36px;
		cursor: pointer;
		border: 1px solid #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-trigger .btn-inner {
		width: 10px;
		height: 10px;
		position: relative;
	}

	.btn-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #fff;
	}


	.btn-trigger span {
		display: inline-block;
		transition: all .5s;
		box-sizing: border-box;
	}

	.btn-trigger span:nth-of-type(1) {
		top: 0;
	}

	.btn-trigger span:nth-of-type(2) {
		top: 50%;
		transform: translate(0%, -50%);
	}

	.btn-trigger span:nth-of-type(3) {
		bottom: 0;
	}


	/*=============================
#btn01
=============================*/
	#btn01.active span:nth-of-type(1) {
		-webkit-transform: translateY(20px) rotate(-45deg);
		transform: translateY(4px) rotate(-45deg);
	}

	#btn01.active span:nth-of-type(2) {
		opacity: 0;
	}

	#btn01.active span:nth-of-type(3) {
		-webkit-transform: translateY(-20px) rotate(45deg);
		transform: translateY(-5px) rotate(45deg);
	}

	/**/
	.sp_menu {
		background: #000;
		height: 100%;
		display: none;
		position: fixed;
		z-index: 99;
		width: 100%;
	}

	.sp_menu ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 36px;
		height: 100%;
		align-items: center;
		justify-content: center;
		margin-top: -70px;
	}

	.sp_menu ul li a {
		color: #FFF;
		text-align: center;
		font-family: Inter;
		font-size: 18px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.sp_menu .imgElm img {
		width: 100%;
	}


	.contactElm {
		margin-top: 80px;
		width: 100%;
	}

	.contactElm h2 {
		font-size: 24px;
		font-style: normal;
		font-weight: 600;
	}

	.contactElm .mailaddress {
		margin-top: 28px;
		font-size: var(--text_S_size);
	}

	.contactElm .contact_txt {
		font-size: var(--SP_text_S_size);
		line-height: 24px;
		margin: 16px 0;
	}

	.contactElm ul li a {
		width: 260px;
		height: 46px;
		gap: 8.512px;
	}

	.contactElm ul {
		width: 260px;
		margin: 0 auto;
		display: block;
	}

	.contactElm ul li {
		margin-top: 18px;
	}

	.contactElm ul li a span {
		font-size: var(--SP_text_S_size);
		margin-right: 8px;
	}

	.contactElm ul li a svg {
		width: 15.2px;
		flex-shrink: 0;
	}

	.newsElm .contactElm .contactElm_inner {}

	footer {
		margin-top: 70px;
		height: 100px;
	}

	footer p {
		font-size: var(--SP_text_S_size);
	}
}




@media screen and (max-width: 767px) {

	/*ウィンドウ幅が最大479pxまでの場合に適用*/
	.PC {
		display: none;
	}

	.SP {
		display: block;
	}

	.newsElm .contactElm {}
}

@media screen and (max-width: 479px) {

	/*ウィンドウ幅が最大479pxまでの場合に適用*/
	.newsElm .topEnElm svg {
		width: 150px;
	}

	.newContents {
		--overlap-plus: -4px;
	}
}