@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-LYX */
/* 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;}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	position: relative;
	padding: 0 2rem;
	margin: 0 auto;
	max-width: 112.5rem;
}
@media all and (max-width: 896px) {
	.content {
		padding: 0 2rem;
		max-width: 100% !important;
	}
}
/*------------------------------------------------------------
	comBtn01
------------------------------------------------------------*/
.comBtn01 {
	width: 22.2rem;
}
.comBtn01 a {
	position: relative;
	padding: 0.5rem 2.5rem;
	min-height: 6.2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #fff;
	font-size: 1.6rem;
	border-radius: 3.1rem;
	overflow: hidden;
	letter-spacing: -0.08em;
	background: url(../img/common/icon01.png) no-repeat right 1.5rem center / 1.9rem,linear-gradient(90deg, rgba(206, 26, 33, 1) 0%, rgba(241, 158, 48, 1) 99.97%);
}
.comBtn01 a::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    mix-blend-mode: multiply;
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}
.comBtn01.style01 {
	width: fit-content;
	min-width: 16.2rem;
}
.comBtn01.style01 a {
	padding-right: 9.5rem;
	color: #333;
	font-weight: 700;
	border: 1px solid #333;
	background: #fff url(../img/common/icon02.png) no-repeat right 2rem center / 1.4rem;
}
@media all and (min-width: 897px) {
	.comBtn01 a:hover::before {
		transform: translateX(0);
	}
}
@media all and (max-width: 896px) {
	.comBtn01 {
		width: fit-content;
	}
	.comBtn01 a {
		padding: 0.8rem 3.8rem 0.5rem 1.9rem;
		min-height: 4.8rem;
		font-size: 1.3rem;
		border-radius: 2.4rem;
		letter-spacing: -0.08em;
		background: url(../img/common/icon01.png) no-repeat right 1.3rem center / 1.4rem,linear-gradient(90deg, rgba(206, 26, 33, 1) 0%, rgba(241, 158, 48, 1) 99.97%);
	}
	.comBtn01.style01 {
		min-width: 8.5rem;
	}
	.comBtn01.style01 a {
		padding-right: 3.3rem;
		background-size: 1.05rem auto;
		background-position: right 1.6rem center;
	}
}
/*------------------------------------------------------------
	comBtn02
------------------------------------------------------------*/
.comBtn02 {
	margin: 0 auto;
	width: 49.1rem;
}
.comBtn02 a {
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 3.5rem;
}
.comBtn02 a::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    mix-blend-mode: multiply;
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}
@media all and (min-width: 897px) {
	.comBtn02 a:hover::before {
		transform: translateX(0);
	}
}
@media all and (max-width: 896px) {
	.comBtn02 {
		width: 29.5rem;
	}
	.comBtn02 a {
		border-radius: 0;
	}
}
/*------------------------------------------------------------
	comColor
------------------------------------------------------------*/
.comColor {
	background: linear-gradient(90deg, rgba(206, 26, 33, 1) 0%, rgba(241, 158, 48, 1) 99.97%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	position: relative;
	margin: 0 auto 6.2rem;
	padding-left: 4.3rem;
	width: fit-content;
	text-align: center;
}
.headLine01 .en {
	margin-bottom: 2.8rem;
	display: block;
}
.headLine01 .en img {
	width: fit-content;
	height: 6.7rem;
}
.headLine01 .jp {
	margin: 0 auto;
	display: block;
	text-align: center;
}
@media all and (max-width: 896px) {
	.headLine01 {
		margin-bottom: 3rem;
		padding-left: 0;
	}
	.headLine01 .en {
		margin-bottom: 1.4rem;
	}
	.headLine01 .en img {
		height: 4rem;
	}
	.headLine01 .jp {
		padding-left: 1rem;
		box-sizing: content-box;
	}
}
/*------------------------------------------------------------
	fixedBox
------------------------------------------------------------*/
.fixedBox {
	width: 100%;
	display: none;
	position: fixed;
	left: 0;
	z-index: 100;
	bottom: 1rem;
}
.fixedBox ul {
	padding: 1rem;
	gap: 1rem;
	margin: 0 auto;
	width: fit-content;
	background-color: rgba(255, 251, 239, 0.95);
	border-radius: 4.1rem;
}
@media all and (max-width: 896px) {
	.fixedBox {
		bottom: 0;
		border-top: 1px solid #333;
	}
	.fixedBox ul {
		padding: 0.8rem 0.5rem;
		gap: 0.8rem;
		width: 100%;
		border-radius: 0;
	}
}
/* fade-up */
.fade-up {
    opacity: 0;
    transform: translate3d(0, 5.8rem, 0);
    will-change: opacity, transform;
}
.fade-up.on {
    animation:
        fadeInSmooth 0.82s linear var(--fade-delay, 0ms) both,
        fadeUpNaturalMotion 0.92s cubic-bezier(0.22, 0.84, 0.28, 1) var(--fade-delay, 0ms) both;
}
.fade-up[data-motion="zoom"] {
    transform: translate3d(0, 5.2rem, 0) scale(1.035);
    transform-origin: center center;
}
.fade-up[data-motion="zoom"].on {
    animation:
        fadeInSmooth 0.86s linear var(--fade-delay, 0ms) both,
        fadeZoomNaturalMotion 1.02s cubic-bezier(0.18, 0.86, 0.24, 1) var(--fade-delay, 0ms) both;
}
.fade-up[data-motion="card"] {
    transform: translate3d(0, 5rem, 0) scale(1.018);
    transform-origin: center top;
}
.fade-up[data-motion="card"].on {
    animation:
        fadeInSmooth 0.84s linear var(--fade-delay, 0ms) both,
        fadeCardNaturalMotion 0.98s cubic-bezier(0.18, 0.86, 0.24, 1) var(--fade-delay, 0ms) both;
}
@keyframes fadeInSmooth {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeUpNaturalMotion {
    0% {
        transform: translate3d(0, 5.8rem, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeZoomNaturalMotion {
    0% {
        transform: translate3d(0, 5.2rem, 0) scale(1.035);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes fadeCardNaturalMotion {
    0% {
        transform: translate3d(0, 5rem, 0) scale(1.018);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
.fade-up[data-stagger="true"] {
    opacity: 1;
    transform: none;
}
.fade-up[data-stagger="true"] > * {
    opacity: 0;
    transform: translate3d(0, 3.8rem, 0);
    will-change: opacity, transform;
}
.fade-up[data-stagger="true"] > [data-motion="zoom"] {
    transform: translate3d(0, 3.8rem, 0) scale(1.035);
    transform-origin: center center;
}
.fade-up[data-stagger="true"] > [data-motion="card"] {
    transform: translate3d(0, 3.8rem, 0) scale(1.018);
    transform-origin: center top;
}
.fade-up[data-stagger="true"].on {
    opacity: 1;
    transform: none;
    animation: none;
}
.fade-up[data-stagger="true"].on > * {
    animation:
        fadeInChildSmooth 0.78s linear calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms)) both,
        fadeUpChildNaturalMotion 0.9s cubic-bezier(0.22, 0.84, 0.28, 1) calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms)) both;
}
.fade-up[data-stagger="true"].on > [data-motion="zoom"] {
    animation:
        fadeInChildSmooth 0.82s linear calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms)) both,
        fadeZoomChildNaturalMotion 1.02s cubic-bezier(0.18, 0.86, 0.24, 1) calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms)) both;
}
.fade-up[data-stagger="true"].on > [data-motion="card"] {
    animation:
        fadeInChildSmooth 0.8s linear calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms)) both,
        fadeCardChildNaturalMotion 0.98s cubic-bezier(0.18, 0.86, 0.24, 1) calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms)) both;
}
@keyframes fadeInChildSmooth {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeUpChildNaturalMotion {
    0% {
        transform: translate3d(0, 3.8rem, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeZoomChildNaturalMotion {
    0% {
        transform: translate3d(0, 3.8rem, 0) scale(1.035);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes fadeCardChildNaturalMotion {
    0% {
        transform: translate3d(0, 3.8rem, 0) scale(1.018);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
[data-motion="float"] {
    opacity: 0;
    transform: translate3d(0, 1.8rem, 0) rotate(var(--float-rotate-start, -2deg));
    transform-origin: var(--float-origin, center center);
    will-change: opacity, transform;
}
.on [data-motion="float"],
[data-motion="float"].on {
    animation:
        fadeInSmooth 0.72s linear calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms) + var(--float-delay, 160ms)) both,
        floatRotateNaturalMotion 1.15s cubic-bezier(0.16, 0.9, 0.22, 1) calc(var(--fade-delay, 0ms) + var(--stagger-delay, 0ms) + var(--float-delay, 160ms)) both;
}
@keyframes floatRotateNaturalMotion {
    0% {
        transform: translate3d(0, 1.8rem, 0) rotate(var(--float-rotate-start, -2deg));
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}
@media all and (max-width: 896px) {
    .fade-up {
        transform: translate3d(0, 4.2rem, 0);
    }
    .fade-up[data-motion="zoom"] {
        transform: translate3d(0, 3.8rem, 0) scale(1.025);
    }
    .fade-up[data-motion="card"] {
        transform: translate3d(0, 3.8rem, 0) scale(1.012);
    }
    @keyframes fadeUpNaturalMotion {
        0% {
            transform: translate3d(0, 4.2rem, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
    @keyframes fadeZoomNaturalMotion {
        0% {
            transform: translate3d(0, 3.8rem, 0) scale(1.025);
        }
        100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
    @keyframes fadeCardNaturalMotion {
        0% {
            transform: translate3d(0, 3.8rem, 0) scale(1.012);
        }
        100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
    .fade-up[data-stagger="true"] > * {
        transform: translate3d(0, 3rem, 0);
    }
    .fade-up[data-stagger="true"] > [data-motion="zoom"] {
        transform: translate3d(0, 3rem, 0) scale(1.025);
    }
    .fade-up[data-stagger="true"] > [data-motion="card"] {
        transform: translate3d(0, 3rem, 0) scale(1.012);
    }
    @keyframes fadeUpChildNaturalMotion {
        0% {
            transform: translate3d(0, 3rem, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
    @keyframes fadeZoomChildNaturalMotion {
        0% {
            transform: translate3d(0, 3rem, 0) scale(1.025);
        }
        100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
    @keyframes fadeCardChildNaturalMotion {
        0% {
            transform: translate3d(0, 3rem, 0) scale(1.012);
        }
        100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
    [data-motion="float"] {
        transform: translate3d(0, 1.2rem, 0) rotate(var(--float-rotate-start, -1.4deg));
    }
    @keyframes floatRotateNaturalMotion {
        0% {
            transform: translate3d(0, 1.2rem, 0) rotate(var(--float-rotate-start, -1.4deg));
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(0deg);
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-up.on,
    .fade-up[data-motion="zoom"],
    .fade-up[data-motion="zoom"].on,
    .fade-up[data-motion="card"],
    .fade-up[data-motion="card"].on,
    .fade-up[data-stagger="true"],
    .fade-up[data-stagger="true"].on,
    .fade-up[data-stagger="true"] > *,
    .fade-up[data-stagger="true"].on > *,
    [data-motion="float"],
    .on [data-motion="float"],
    [data-motion="float"].on {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
