@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 {
  width: 105rem;
  margin: 0 auto;
}
.headLine01 {
  margin-bottom: 4.2rem;
  text-align: center;
  color: #333;
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.headLine01.bg {
	padding-bottom: 5.1rem;
	font-size: 3.5rem;
	font-weight: 600;
	color: #FFF;
	background: url(../img/common/headline01_bg.png) no-repeat center bottom / auto 2.5rem;
}
.comTtlBox {
	position: relative;
	padding: 9rem 0 6.5rem;
	text-align: center;
	background: linear-gradient(90deg, #5E001B 0%, #870027 50%, #5E001B 100%);
	z-index: 10;
}
.comTtlBox .headLine01 {
  	margin-bottom: 0;
}
@media all and (max-width: 768px) {
	.content {
		margin: 0 3rem;
		width: auto !important;
	}
	.headLine01.bg {
		padding-bottom: 5.4rem;
		font-size: 3.2rem;
		background-image: url(../img/common/headline01_bg_sp.png);
	}
	.comTtlBox {
		padding: 4.6rem 0 7rem;
	}
}

/* fade */
.fadeInUp {
	transform: translateY(4rem);
	opacity: 0;
	transition: all ease 1s;
}
.fadeInUp.on {
	transform: none;
	opacity: 1;
}
.fadeInDown {
	transform: translateY(-4rem);
	opacity: 0;
	transition: all ease 1s;
}
.fadeInDown.on {
	transform: none;
	opacity: 1;
}
.leftIn {
	transform: translateX(-4rem);
	opacity: 0;
	transition: all ease 1s;
}
.leftIn.on {
	transform: none;
	opacity: 1;
}
.rightIn {
	transform: translateX(4rem);
	opacity: 0;
	transition: all ease 1s;
}
.rightIn.on {
	transform: none;
	opacity: 1;
}

.delay01 {
	transition-delay: 0.2s;
}
.delay02 {
	transition-delay: 0.4s;
}
.delay03 {
	transition-delay: 0.6s;
}
.delay04 {
	transition-delay: 0.8s;
}
.delay05 {
	transition-delay: 1s;
}

/* orderBtn */
.orderBtn a {
	padding: 2.2rem 6.4rem;
	display: block;
	width: 32rem;
	color: #E9D0A1;
	font-size: 1.6rem;
	border: 0.1rem solid #E9D0A1;
	background:	linear-gradient(90deg,#72001D 0,#A30029 20%,#A30029 70%,#73001D 100%);
	border-radius: 1rem;
	position: relative;
	transition: background 0.3s;
	box-shadow: 0.1rem 0.1rem 5px rgba(0,0,0,0.2);
}
.orderBtn a::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: '';
	background: url(../img/common/car_img.png) no-repeat left 2.3rem center / 1.9rem,
	url(../img/common/icon02.png) no-repeat right 2.3rem center / 1.5rem;
	border-radius: 1rem;
}
@media all and (min-width: 769px) {
	.orderBtn a:hover {
		background: linear-gradient(90deg,#A30029 0,#D0003D 20%,#D0003D 70%,#A30029 100%);
	}
}
@media all and (max-width: 768px) {
	.orderBtn a {
		padding: 1.8rem 6.2rem;
		width: 28.5rem;
	}
	.orderBtn a::after {
		background-position: left 2.3rem center,right 1.9rem center;
	}
}
/* snsList */
.snsList {
	display: flex;
	gap: 1.4rem;
}
.snsList img {
	width: 2.2rem;
}
.snsList a:hover {
	opacity: 0.7;
}
/* comLink */
.comLink {
	min-width: 16.5rem;
	width: fit-content;
}
.comLink a {
	padding: 0.9rem 4.8rem 1rem 2.6rem;
	display: block;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 200;
	background: #6f739b url(../img/common/icon05.png) no-repeat right 1.5rem center;
	background-size: 1rem auto;
	border-radius: 0.8rem;
}
@media all and (min-width: 769px) {
	.comLink a:hover {
		background-color: #9BA1C3;
	}
}

/* loading */
.loading {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #560018;
	z-index: 9;
	transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.loading.done {
	transform: translate3d(0, 100%, 0);
}
.loadover #loading {
    transition: all ease 0.5s;
}
.loading .loadInfo {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	opacity: 0;
	transition: all ease 0.5s;
}
.loading .loadInfo.show {
	opacity: 1;
}
.loading .textImg {
	width: 30.7rem;
	margin: 0 auto 2.8rem;
	padding-left: 2rem;
	position: relative;
}

@keyframes fade {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}
.loading .textImg .arrow {
	position: absolute;
	left: 1.5rem;
	top: -1rem;
	width: 11rem;
	aspect-ratio: 219/110;
}
#svg-animation {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#svg-animation .st1 {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
}
.loading p {
	margin: 0 0 0.1rem;
	text-align: center;
	color: #fff;
	font-size: 2rem;
}
.loading .img {
	width: 12.8rem;
	margin: 0 auto;
	position: relative;
}
.loading .img > img {
	opacity: 0;
	animation:none;
}
.loading .img .top {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.loading .img .top img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	animation: fade 1.5s ease-in-out infinite;
}
.loading.percent .img .top img {
	opacity: 1;
	animation: none;
}