@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-lxh */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/
.content {
	margin: 0 auto;
	max-width: 88.8rem;
	position: relative;
	z-index: 10;
}
@media all and (max-width: 896px) {
	.content {
		max-width: inherit !important;
		margin: 0 1.5rem;
	}
}

/* comNavi */
.comNavi {
	display: flex;
	font-size: 2.34rem;
	font-weight: 700;
	justify-content: center;
	gap: 3.1rem;
}
.comNavi a {
	color: #fff;
	display: inline-block;
	transform: rotate(0.05deg);
}
.comNavi img {
	margin: -0.8rem 0.7rem 0 0;
	width: 4rem;
	display: inline-block;
	vertical-align: middle;
}
.comNavi .line {
	margin-top: 0.4rem;
	font-size: 1.8rem;
}
@media all and (min-width: 897px) {
	.comNavi a:hover {
		opacity: 0.7;
	}
}
@media all and (max-width: 896px) {
	.comNavi {
		font-size: 1.8rem;
	}
	.comNavi img {
		width: 3.7rem;
	}
	.comNavi li {
		margin-bottom: 3rem;
	}
	.comNavi li:last-child {
		margin-bottom: 0;
	}
	.comNavi a {
		text-align: center;
		display: block;
	}
}

/* comBg */
.comBg {
	padding: 27.1rem 0 20.5rem;
	position: relative;
	overflow: hidden;
}
.comBg::after {
	width: 200%;
	height: 200%;
	position: absolute;
	top: 50%;
	left: 50%;
	background: url("../img/common/en_bg.png") repeat left top / 49.2rem auto;
	content: "";
	transform: translate(-50%, -50%) rotate(-4.5deg);
}
@media all and (max-width: 896px) {
	.comBg::after {
		background-size: 35rem auto;
	}
	.comBg {
		padding: 12rem 0;
	}
}


/* headLine01 */
.headLine01 {
	margin-bottom: 9.9rem;
	text-align: center;
}
.headLine01 img {
	width: 37rem;
}
@media all and (max-width: 896px) {
	.headLine01 img {
		width: 17rem;
	}
}
@media all and (max-width: 896px) {
	.headLine01 {
		margin-bottom: 3.9rem;
	}
}

/* animate */
.animate .dely01 {
	animation-delay: 0.5s !important;
}
.animate .dely02 {
	animation-delay: 1s !important;
}
.animate .dely03 {
	animation-delay: 1.5s !important;
}
.animate .dely04 {
	animation-delay: 2s !important;
}
.animate .dely05 {
	animation-delay: 2.5s !important;
}
.animate .dely06 {
	animation-delay: 3s !important;
}
.popupIn {
	opacity: 0;
}
.animate.isShow .popupIn {
	animation: popupIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
@keyframes popupIn {
	0% {
		transform: translateY(4rem) scale(0.8);
		opacity: 0;
	}
	80%, 100% {
		opacity: 1;
	}
	100% {
		transform: translateY(0) scale(1.0);
	}
}
.scaleIn {
	opacity: 0;
}
.animate.isShow .scaleIn {
	animation: scaleIn 2s ease-out forwards;
}
@keyframes scaleIn {
	10% {
		opacity: 0;
	}
	50%,100% {
		opacity: 1;
	}
	0%, 10%, 30%, 50% {
		transform: scale(1.0);
	}
	20%, 40% {
		transform: scale(0.95);
	}
}
.animate .txtIn {
	display: inline-block;
	clip-path: inset(0 100% 0 0);
}
.animate.isShow .txtIn {
	animation: txtIn .5s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}
@keyframes txtIn {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}
.shake {
	animation: shake 3s ease-in-out infinite alternate;;
}
@keyframes shake {
	0% {
		transform: translate(0, 0) rotate(-7deg);
	}

	50% {
		transform: translate(0, -0.7rem) rotate(0deg);
	}
	100% {
		transform: translate(0, 0) rotate(7deg);
	}
}
.leftIn {
	opacity: 0;
	transform: translateX(-100%);
}
.animate.isShow .leftIn {
	animation: leftIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes leftIn {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.rightIn {
	opacity: 0;
	transform: translateX(100%);
}
.animate.isShow .rightIn {
	animation: rightIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes rightIn {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


.lineIn::after {
    clip-path: inset(0 50% 0 50%);
}
.animate.isShow .lineIn::after { 
    animation: lineIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes lineIn {
    0% {
        clip-path: inset(0 50% 0 50%);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}