/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
		display: block;
}

body {
		line-height: 1;
}

ol, ul {
		list-style: none;
}

blockquote, q {
		quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
		content: "";
		content: none;
}

table {
		border-collapse: collapse;
		border-spacing: 0;
}

button {
		padding: 0;
		margin: 0;
		background: inherit;
		border: none;
}

@media screen and (min-width: 768px) {
		.pc {
				display: block;
		}
		.sp {
				display: none;
		}
		img.pc,
.svg.pc {
				display: inline;
		}
}
@media screen and (max-width: 767px) {
		body {
				min-width: initial;
				height: 100%;
		}
		.pc {
				display: none;
		}
		.sp {
				display: block;
		}
		img.pc {
				display: none;
		}
		img.sp,
.svg.sp {
				display: inline;
		}
		img {
				max-width: 100%;
				height: auto;
		}
}
@media screen and (min-width: 1024px) {
		html {
				overflow: auto;
		}
		body {
				overflow: hidden;
				min-width: 1024px;
		}
}
@media screen and (min-width: 768px) {
		.linkHover a {
				transition: all 0.3s ease-out;
		}
		.linkHover a:hover {
				filter: brightness(140%);
		}
}
body {
		background: #000;
}

.pre {
		background: #fff100;
		text-align: center;
}
.pre .inner {
		height: 74px;
		display: flex;
		justify-content: center;
		align-items: center;
}
.pre img {
		width: 136px;
		height: auto;
}
@media screen and (max-width: 767px) {
		.pre .inner {
				height: 9.8666666667vw;
		}
		.pre img {
				width: 18.1333333333vw;
		}
}

.inner {
		position: relative;
		max-width: 750px;
		overflow: visible;
		margin-left: auto;
		margin-right: auto;
}
.inner .img {
		z-index: 1;
}
@media screen and (max-width: 767px) {
		.inner {
				width: 100%;
				overflow: hidden;
		}
}

.shadow {
		filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.75));
}

.stickyWrap {
		position: relative;
}
.stickyWrap .goto {
		position: fixed;
		z-index: 100;
		width: 150px;
		top: 0;
		right: auto;
		left: calc(50% + 215px);
		margin: 0;
}
.stickyWrap .logo {
		position: absolute;
		z-index: 100;
		top: 5px;
		left: calc(50% - 368px);
}
.stickyWrap .logo img {
		width: 120px;
}
@media screen and (max-width: 767px) {
		.stickyWrap .goto {
				width: 20vw;
				top: 0;
				left: auto;
				right: 1.3333333333vw;
		}
		.stickyWrap .logo {
				position: absolute;
				top: 0.6666666667vw;
				left: 0.9333333333vw;
		}
		.stickyWrap .logo img {
				width: 16vw;
		}
}

#Header .inner {
		position: relative;
		height: 860px;
}
#Header .inner .movie {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 860px;
		z-index: 1;
}
#Header .inner .movie .frame {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}
#Header .inner .movie video {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
#Header .inner .contents {
		position: relative;
		z-index: 5;
}
#Header .inner .contents .copy01 {
		padding-top: 20.8%;
}
#Header .inner .contents .copy02 {
		padding-top: 66.6666666667%;
}
@media screen and (max-width: 767px) {
		#Header .inner {
				height: 114.6666666667vw;
		}
		#Header .inner .movie {
				height: 114.6666666667vw;
				padding-top: 0;
		}
}

.menuBlock dl {
		width: 100%;
}
.menuBlock dl dt {
		position: relative;
}
.menuBlock dl dt button {
		position: relative;
		z-index: 1;
		display: block;
		cursor: pointer;
}
.menuBlock dl dt .copy {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		pointer-events: none;
		animation-delay: 0.3s;
}
.menuBlock dl dt::after {
		content: "";
		display: block;
		width: 44px;
		height: 22px;
		background: url(../img/icon_arrow.svg) no-repeat center center;
		background-size: contain;
		position: absolute;
		z-index: 20;
		left: calc(50% - 22px);
		bottom: 15px;
		transition: all 0.15s ease-out;
		transform: scaleY(-1);
		filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.75));
		pointer-events: none;
}
@media screen and (max-width: 767px) {
		.menuBlock dl dt::after {
				width: 5.8666666667vw;
				height: 2.9333333333vw;
				left: calc(50% - 2.9333333333vw);
		}
}
.menuBlock dl dt.open::after {
		transform: scale(1);
}
.menuBlock dl dd {
		display: none;
		background: #e8dec9;
}

#block01 .title {
		background: #a07000;
}

#block02 .title {
		background: #e4a800;
}

#block03 .title {
		background: #d3000f;
}

#block04 .title {
		background: #ed8900;
}

#app .note {
		width: 90.6666666667%;
		font-size: 13px;
		line-height: 1.3846153846;
		letter-spacing: 0em;
		color: #FFF;
		padding: 25px 0;
		margin: 0 auto;
}
@media screen and (max-width: 767px) {
		#app .note {
				font-size: 6.5px;
				/* legacy */
				font-size: 1.7333333333vw;
				line-height: 1.3846153846;
				letter-spacing: 0em;
				color: #FFF;
				padding: 3.3333333333vw 0;
		}
}

#footer {
		background: #FFF;
		color: #000;
}
#footer .inner {
		padding: 100px 0 50px;
}
@media screen and (min-width: 768px) {
		#footer .inner {
				padding-bottom: 190px;
		}
}
@media screen and (max-width: 767px) {
		#footer .inner {
				padding: 13.3333333333vw 0 6.6666666667vw;
		}
}
#footer .banner + .banner {
		margin-top: 40px;
}
@media screen and (max-width: 767px) {
		#footer .banner + .banner {
				margin-top: 5.3333333333vw;
		}
}
@media screen and (min-width: 768px) {
		#footer .banner a {
				transition: all 0.3s ease-out;
		}
		#footer .banner a:hover {
				filter: brightness(140%);
		}
}
@media screen and (min-width: 768px) {
		#footer .snsBlock a {
				transition: all 0.3s ease-out;
		}
		#footer .snsBlock a:hover {
				filter: brightness(140%);
		}
}
#footer .snsBlock .itemList {
		display: flex;
		justify-content: center;
		align-items: flex-end;
}
#footer .snsBlock .itemList > li {
		width: 80px;
		padding: 0 15px;
}
#footer .snsBlock .itemList > li img {
		width: 100%;
}
#footer .snsBlock .itemList > li.large {
		width: 160px;
}
@media screen and (max-width: 767px) {
		#footer .snsBlock .itemList > li {
				width: 10.6666666667vw;
				padding: 0 2vw;
		}
		#footer .snsBlock .itemList > li.large {
				width: 21.3333333333vw;
		}
}
#footer .otherBlock {
		font-size: 25px;
		margin-top: 35px;
		margin-bottom: 40px;
}
#footer .otherBlock .itemList {
		display: flex;
		justify-content: center;
}
#footer .otherBlock .itemList > li {
		border-left: solid 1px #000;
}
#footer .otherBlock .itemList > li a {
		color: inherit;
		display: block;
		text-decoration: none;
		padding: 0 0.5em;
}
@media screen and (min-width: 768px) {
		#footer .otherBlock .itemList > li a {
				transition: all 0.3s ease-out;
		}
		#footer .otherBlock .itemList > li a:hover {
				opacity: 0.75;
				text-decoration: underline;
		}
}
#footer .otherBlock .itemList > li:first-child {
		border-left: none;
}
@media screen and (max-width: 767px) {
		#footer .otherBlock {
				font-size: 3.3333333333vw;
				margin-top: 4.6666666667vw;
				margin-bottom: 5.3333333333vw;
		}
}
#footer .footer_logo_body .btn_2 {
		border: 1px solid #000;
		color: #000;
		text-decoration: none;
		width: 370px;
		height: 85px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30px auto 50px;
		font-size: 23px;
		text-align: center;
		border-radius: 9999px;
}
@media screen and (max-width: 767px) {
		#footer .footer_logo_body .btn_2 {
				border: 0.2666666667vw solid #000;
				width: 49.3333333333vw;
				height: 11.3333333333vw;
				margin: 4vw auto 6.6666666667vw;
				font-size: 3.0666666667vw;
		}
}
#footer .copyBlock {
		text-align: center;
		font-size: 18px;
}
@media screen and (max-width: 767px) {
		#footer .copyBlock {
				font-size: 2.4vw;
		}
}

/* animation
.image {
	animation-delay: 0.3s;
}
&.inView {
	.base, .image {
		animation-name: fadeInUp;
	}
}
*/
/*-------------------------------------------> animation module */
.anim-fadeInUp {
		opacity: 0;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeInUp,
.inView .isAnim.inView .anim-fadeInUp,
.inView .anim-fadeInUp,
.inView.anim-fadeInUp {
		animation-name: fadeInUp;
}

.inView .isAnim.anim-fadeInUp,
.inView .isAnim .anim-fadeInUp {
		animation-name: none;
}

.anim-fadeIn {
		opacity: 0;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeIn,
.inView .isAnim.inView .anim-fadeIn,
.inView .anim-fadeIn,
.inView.anim-fadeIn {
		animation-name: fadeIn;
}

.inView .isAnim.anim-fadeIn,
.inView .isAnim .anim-fadeIn {
		animation-name: none;
}

.anim-popup {
		opacity: 0;
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0, 1.22, 0.2, 1.3);
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-popup,
.inView .isAnim.inView .anim-popup,
.inView .anim-popup,
.inView.anim-popup {
		animation-name: popup;
}

.inView .isAnim.anim-popup,
.inView .isAnim .anim-popup {
		animation-name: none;
}

.anim-slide {
		width: 0%;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-slide,
.inView .isAnim.inView .anim-slide,
.inView .anim-slide,
.inView.anim-slide {
		animation-name: slide;
}

.inView .isAnim.anim-slide,
.inView .isAnim .anim-slide {
		animation-name: none;
}

.anim-jump1 {
		opacity: 0;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-jump1,
.inView .isAnim.inView .anim-jump1,
.inView .anim-jump1,
.inView.anim-jump1 {
		animation-name: jump1;
}

.inView .isAnim.anim-jump1,
.inView .isAnim .anim-jump1 {
		animation-name: none;
}

.anim-jump2 {
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
}

.inView .isAnim.inView.anim-jump2,
.inView .isAnim.inView .anim-jump2,
.inView .anim-jump2,
.inView.anim-jump2 {
		animation-name: jump2;
}

.inView .isAnim.anim-jump2,
.inView .isAnim .anim-jump2 {
		animation-name: none;
}

.anim-jump3 {
		animation-duration: 2.5s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-jump3,
.inView .isAnim.inView .anim-jump3,
.inView .anim-jump3,
.inView.anim-jump3 {
		animation-name: jump3;
}

.inView .isAnim.anim-jump3,
.inView .isAnim .anim-jump3 {
		animation-name: none;
}

.anim-jump4 {
		opacity: 0;
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-timing-function: linear;
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-jump4,
.inView .isAnim.inView .anim-jump4,
.inView .anim-jump4,
.inView.anim-jump4 {
		animation-name: jump4;
}

.inView .isAnim.anim-jump4,
.inView .isAnim .anim-jump4 {
		animation-name: none;
}

.anim-Don {
		opacity: 0;
		animation-duration: 0.2s;
		animation-iteration-count: 1;
		animation-timing-function: linear;
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-Don,
.inView .isAnim.inView .anim-Don,
.inView .anim-Don,
.inView.anim-Don {
		animation-name: Don;
}

.inView .isAnim.anim-Don,
.inView .isAnim .anim-Don {
		animation-name: none;
}

/* delay */
.delay0 {
		animation-delay: 0s;
}

.delay1 {
		animation-delay: 0.2s;
}

.delay2 {
		animation-delay: 0.4s;
}

.delay3 {
		animation-delay: 0.6s;
}

.delay4 {
		animation-delay: 0.8s;
}

.delay5 {
		animation-delay: 1s;
}

.delay6 {
		animation-delay: 1.2s;
}

.delay7 {
		animation-delay: 1.4s;
}

.delay8 {
		animation-delay: 1.6s;
}

.delay9 {
		animation-delay: 1.8s;
}

.delay10 {
		animation-delay: 2s;
}

.delay11 {
		animation-delay: 2.2s;
}

/*-------------------------------------------> keyframe */
@keyframes fadeInUp {
		from {
				opacity: 0;
				transform: translate3d(0, 120px, 0);
		}
		to {
				opacity: 1;
				transform: none;
		}
}
@keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
@keyframes popup {
		0% {
				opacity: 0;
				transform: scale(0, 0);
		}
		1% {
				opacity: 1;
				transform: scale(0, 0);
		}
		100% {
				opacity: 1;
				transform: scale(1, 1);
		}
}
@keyframes slide {
		from {
				width: 0px;
		}
		to {
				width: 100%;
		}
}
@keyframes jump1 {
		0% {
				transform: translateX(140px);
				opacity: 0;
		}
		50% {
				transform: translateX(0);
		}
		65% {
				transform: translateX(30px);
		}
		100% {
				transform: translateX(0);
		}
		20%, 100% {
				opacity: 1;
		}
}
@keyframes jump2 {
		0% {
				transform: scale(1, 1) translate(0, 0);
		}
		15% {
				transform: scale(0.98, 0.9) translate(0, 5px);
		}
		30% {
				transform: scale(1.02, 1) translate(0, 8px);
		}
		50% {
				transform: scale(0.98, 1.05) translate(0, -8px);
		}
		70% {
				transform: scale(1, 0.9) translate(0, 5px);
		}
		100% {
				transform: scale(1, 1) translate(0, 0);
		}
		0%, 100% {
				opacity: 1;
		}
}
@keyframes jump3 {
		0%, 40% {
				transform: skew(0deg, 0deg);
		}
		5% {
				transform: skew(5deg, 5deg);
		}
		10% {
				transform: skew(-4deg, -4deg);
		}
		15% {
				transform: skew(3deg, 3deg);
		}
		20% {
				transform: skew(-2deg, -2deg);
		}
		25% {
				transform: skew(1deg, 1deg);
		}
		30% {
				transform: skew(-0.6deg, -0.6deg);
		}
		35% {
				transform: skew(0.3deg, 0.3deg);
		}
}
@keyframes jump4 {
		0% {
				opacity: 0;
				transform: translate3d(0, 0%, 0);
		}
		50% {
				opacity: 1;
				transform: translate3d(0, -40%, 0) scale(1.2);
		}
		100% {
				opacity: 1;
				transform: translate3d(0, 0, 0);
		}
}
@keyframes swing {
		0% {
				transform: rotate(6deg);
		}
		40% {
				transform: rotate(-4deg);
		}
		80% {
				transform: rotate(1deg);
		}
		80% {
				transform: rotate(0deg);
		}
}
@keyframes Don {
		0% {
				opacity: 0;
				transform: scale(1.5);
		}
		1% {
				opacity: 1;
				transform: scale(1.5);
		}
		88% {
				opacity: 1;
				transform: scale(1);
		}
		91% {
				opacity: 1;
				transform: scale(1.1);
		}
		94% {
				opacity: 1;
				transform: scale(1);
		}
		96% {
				opacity: 1;
				transform: scale(1.07);
		}
		98% {
				opacity: 1;
				transform: scale(1);
		}
		99% {
				opacity: 1;
				transform: scale(1.03);
		}
		100% {
				opacity: 1;
				transform: scale(1);
		}
}
@keyframes loading {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(-360deg);
		}
}