@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap');
/*
.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

/* -------------------------------------------------------------------------
	BASE
========================================================================= */

:root {
	--def-font-color: #000000;
	--sub-font-color: #ffffff;
	--accent-color: #EA5B1E;
	--accent-sub-color: #000000;
	--accent-3rd-color: #0868AC;
	--font-size-xsmall: 1.0rem;
	--font-size-small: 1.2rem;
	--font-size-medium: 1.4rem;
	--font-size-large: 1.6rem;
	--font-size-xlarge: 1.8rem;
	--font-family-sans: 'Noto Sans JP', sans-serif;
	--font-family-num: "Oswald", sans-serif;
	--def-bg-color: #FFF;
	--bg-accent-color: #FFF3D8;
	--bg-sub-color: #231815;
	--bg-2nd-color: #ADDDF1;
	--bg-3rd-color: #E3C752;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility:hidden;
	}
body {
	width: 100%;
	line-height: 1;
	margin: 0;
	color: var(--def-font-color);
	line-height: 160%;
	font-size: 16px;
	font-size: var(--font-size-large);
	font-family: var(--font-family-sans), -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	background-color: #FFF;
	-webkit-backface-visibility:hidden;
	}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
b, strong, .bold { font-family: var(--font-family-sans), -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }
address { font-style: normal; }
ul {
	list-style: none;
	padding: 0;
	}
li { padding: 0; }
input, select { vertical-align: middle; }
a { color: inherit; }
a { -webkit-tap-highlight-color:transparent; }
a:visited { color: inherit; }
a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
	}
a:active { color: inherit; }
img {
	width: 100%;
    height: auto;
	border: none;
	vertical-align: top;
	}
.fxsmall { font-size: var(--font-size-xsmall); } 
.fsmall { font-size: var(--font-size-small); } 
.fmedium { font-size: var(--font-size-medium); } 
.flage { font-size: var(--font-size-lage); } 
.fxlage { font-size: var(--font-size-xlage); } 
.fAccent { color: var(--accent-color); } 
.fRed { color: red; } 
.bgAccent { background: var(--accent-color); }
.bgAccentSub { background: var(--accent-sub-color); }

/* Hack for Safari */
_::-webkit-full-page-media, _:future, :root ruby > rt {margin-bottom: -0.6em;}
/* */
ruby > rt { font-size: 30%; }

#top {}

.hide {
	display: none;
	@media (width <= 768px){ display: inline; }
	}
.show {
	display: inline;
	@media (width <= 768px){ display: none; }
	}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	@media (width <= 1250px){
		width: 90%;
		max-width: none;
		margin-inlie: auto;
		}
	}
.pl1em { padding-left: 1em; }
.mt1em { margin-top: 1em; }
.mt2em { margin-top: 2em; }
.mt3em { margin-top: 3em; }
.txtIndent { text-indent: -1em; margin-left: 1em; }


/* -------------------------------------------------------------------------
	HEADER
========================================================================= */
#head {
	position: relative;
	z-index: 1;
	text-align: center;
	overflow: hidden;
	background: var(--bg-accent-color);
	& .logo {
		width: calc((40% / 120) * 100);
		max-width: 700px;
		margin-inline: auto;
		display: block;
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		top: calc((6% / 120) * 100);
		text-align: center;
		@media (width <= 1200px){
			top: calc((13% / 120) * 100);
			}
		@media (width <= 768px){
			width: calc((28% / 37.5) * 100);
			top: calc((4% / 37.5) * 100);
			}
		}
	& .mainvisual {
		width: 100%;
		aspect-ratio: 10 / 3.5;
		@media (width <= 1200px){ aspect-ratio: 10 / 4.5; }
		@media (width <= 768px){ aspect-ratio: 1 / 1; }
		display: grid;
		place-content: center;
		& div {
			width: calc((34% / 120) * 100);
			@media (width <= 768px){ width: calc((15% / 37.5) * 100); }
			position: absolute;
			z-index: 1;
			}
		& div:nth-of-type(1) {
			top: calc((-1% / 120) * 100);
			left: calc((10% / 120) * 100);
			@media (width <= 1200px){ left: calc((13% / 120) * 100); }
			@media (width <= 768px){
				width: calc((17% / 37.5) * 100);
				left: calc((-3% / 37.5) * 100);
				}
			}
		& div:nth-of-type(2) {
			top: calc((-2% / 120) * 100);
			right: calc((-2% / 120) * 100);
			@media (width <= 1200px){
				top: 0;
				right: calc((-4% / 120) * 100);
				}
			@media (width <= 768px){
				right: calc((-4% / 37.5) * 100);
				}
			}
		& div:nth-of-type(3) {
			top: calc((35% / 120) * 100);
			left: calc((-2% / 120) * 100);
			@media (width <= 768px){
				width: calc((11% / 37.5) * 100);
				top: calc((11% / 37.5) * 100);
				right: calc((-3% / 37.5) * 100);
				}
			}
		& div:nth-of-type(4) {
			width: calc((20% / 120) * 100);
			bottom: calc((15% / 120) * 100);
			right: calc((20% / 120) * 100);
			@media (width <= 1200px){
				width: calc((26% / 120) * 100);
				bottom: calc((25% / 120) * 100);
				right: calc((6% / 120) * 100);
				}
			@media (width <= 768px){
				width: calc((9% / 37.5) * 100);
				top: calc((13% / 37.5) * 100);
				bottom: auto;
				right: calc((-0.2% / 37.5) * 100);
				}			
			}
		& div:nth-of-type(5) {
			width: calc((19% / 120) * 100);
			bottom: calc((35% / 120) * 100);
			right: calc((3% / 120) * 100);
			z-index: 0;
			@media (width <= 1200px){
				width: calc((25% / 120) * 100);
				bottom: calc((45% / 120) * 100);
				right: calc((-5% / 120) * 100);
				}
			@media (width <= 768px){
				top: calc((13% / 37.5) * 100);
				bottom: auto;
				}
			}
		& div:nth-of-type(6) {
			width: 250px;
			margin-inline: auto;
			bottom: 3px;
			left: 0;
			right: 0;
			@media (width <= 768px){
				width: 150px;
				bottom: 0;
				}
			}
		& div:nth-of-type(7) {
			width: 450px;
			margin-inline: auto;
			bottom: 30px;
			left: 0;
			right: 0;
			@media (width <= 768px){
				width: 250px;
				bottom: 20px;
				}
			}
		}
	& dl {
		width: 78%;
		max-width: 600px;
		margin-inline: auto;
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		top: calc((125% / 120) * 100);
		& dt {
			margin-bottom: 0.5em;
			font-size: clamp(1.5rem, 0.992rem + 2.28vw, 2.3rem);
			font-weight: 700;
			}
		& dd {
			padding: 0.8em 1.5em;
			border-color: var(--bg-sub-color);
			border-top: 2px solid;
			border-bottom: 2px solid;
			@media (width <= 768px){
				padding: 0.5em 0.5em;
				}
			}
		}
	}



/* -------------------------------------------------------------------------
	FOOTER
========================================================================= */
#foot {
    margin-top: 5em;
	padding: 3em 0;
	position: relative;
	text-align: center;
    border-top: 1px solid var(--def-font-color);
	font-size: clamp(1.2rem, 1.031rem + 0.76vw, 1.6rem);
	@media (width <= 768px){ padding-bottom: 5em; }
    & .bgIlust05 {
		width: clamp(50px, 30%, 170px);
		position: absolute;
		bottom: 0;
		right: 15%;
		overflow: hidden;
		@media (width <= 900px){
			margin-inline: auto;
			bottom: 0;
			left: 0;
			right: 0;
			}
		& > img {
			position: relative;
			bottom: -50px;
			}
		}
	& dl {
		display: flex;
		flex-direction: column;
		gap: 1em;
		& dt { font-size: 0.85em; }
		}
	& .copyright { padding-top: 1em; }
	}



/* -------------------------------------------------------------------------
	
========================================================================= */
main { position: sticky; z-index: 5; }
section {
	padding-top: 5em;
	padding-bottom: 5em;
	@media (width <= 768px){
		padding-top: 4em;
		padding-bottom: 4em;
		}
	&:last-of-type { padding-bottom: 0; }
	}
.naviWrapper {
	padding: 1em 0.5em;
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
	place-content: center;
	background: var(--bg-2nd-color);
	color: var(--def-font-color);
	transition: all 0s ease 0.3s;
 	&::before {
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: -16px;
		background: url("../img/navi-line.svg") top center no-repeat;
		@media (width <= 768px){
			top: -5px;
			background: url("../img/navi-line-sp.svg") top center no-repeat;
			}
		}
   }
.naviWrapper.naviScroll {
	margin-top: 0;
	&::before {
		background: var(--bg-sub-color);
		opacity: 0.9;
		top: 0;
		}
	}
nav > ul {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.2em 3em;
	@media (width <= 768px){ gap: 0.5em 1.5em; }
	line-height: 100%;
	font-size: clamp(1.2rem, 0.904rem + 1.33vw, 1.9rem);
	line-height: 120%;
	& li {
		text-align: center;
		& a, a:hover, a:visited { color: var(--def-font-color); }
		& a {
			position: relative;
			display: flex;
			align-items: center;
			gap: 0.5em;
			text-decoration: none;
			&::after {
				content: "";
				width: 8px;
				height: 8px;
				display: block;
				margin-top: -0.1em;
				border-color: var(--sub-font-color);
				border-right: 1px solid;
				border-bottom: 1px solid;
				transform: rotate(45deg);
				@media (width <= 768px){
					width: 5px;
					height: 5px;
					}
				}
			}
		}
    }
.naviWrapper.naviScroll nav > ul {
	& li {
		& a, a:hover, a:visited { color: var(--sub-font-color); }
		}
	}

.button, .buttonS {
	padding: 1em 1.5em 1em calc(1.5em + 12px + 0.5em);
	border-radius: 8px;
	display: inline-block;
	background: var(--accent-color);
	line-height: 100%;
	position: relative;
	color: var(--sub-font-color);
	text-decoration: none;
	&::before {
		content: "";
		height: 12px;
		margin: auto;
		aspect-ratio: cos(30deg);
		clip-path: polygon(0 0,100% 50%,0 100%);
		position: absolute;
		left: 1.5em;
		top: 0;
		bottom: 0;
		z-index: 1;
		background: var(--sub-font-color);
		}
	&:visited, &:active { color: var(--sub-font-color); }
	}
.buttonS {
	padding: 0.5em 0.8em 0.5em calc(0.8em + 10px + 0.5em);
	border-radius: 5px;
	font-size: 0.9em;
	&::before {
		width: 8px;
		left: 1em;
		}
	}

.exLink {
	&::after {
		content: "";
		width: 1em;
		height: 1em;
		margin-bottom: -0.1em;
		margin-left: 0.3em;
		display: inline-block;
		background: url("../img/icon_exlink.svg") center / cover no-repeat;
		}
	}


/*  ---------------------------------------------------------*/
#concept {
	padding-top: 3em;
	padding-bottom: 4em;
	text-align: center;
	position: relative;
	z-index: 2;
	@media (width <= 768px){
		padding-top: 3em;
		padding-bottom: 3em;
		}
	& h2 {
		padding-bottom: 1em;
		font-size: clamp(2rem, 1.365rem + 2.85vw, 3.5rem);
		line-height: 1.5em;
		}
	& div > div {
		padding-bottom: 2em;
		font-size: 1.1em;
		line-height: 160%;
		@media (width <= 768px){
			font-size: 1.05em;
			}
		}
	}


/*  ---------------------------------------------------------*/
#news {
	padding-top: 3em;
	padding-bottom: 3em;
	background: var(--bg-2nd-color);
	font-size: clamp(1.4rem, 1.315rem + 0.38vw, 1.6rem);
	line-height: 140%;
	@media (width <= 768px){
		padding-top: 2em;
		padding-bottom: 1em;
		}
	& .container {
		padding: 2em 0 1.5em;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #8CCBE9;
		border: solid 5px var(--bg-2nd-color);
		border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
		& h2 {
			padding: 0;
			font-size: clamp(2rem, 1.788rem + 0.95vw, 2.5rem);
			background: none;
			}
		& ul {
			flex-shrink: 0;
			& li {
				margin-bottom: 0.5em;
                display: flex;
				align-items: flex-start;
                gap: 0.8em;
				@media (width <= 768px){
					padding: 0 2em;
					margin-bottom: 1em;
					flex-direction: column;
					align-items: center;
					gap: 0;
					text-align: center;
					}
				& > span:first-of-type {
					display: flex;
					align-items: center;
					gap: 0.8em;
					@media (width <= 768px){   font-weight: 600; }
					&::after{
						content: "";
						height: 12px;
						display: block;
						aspect-ratio: cos(30deg);
						clip-path: polygon(0 0,100% 50%,0 100%);
						background: var(--def-font-color);
						@media (width <= 768px){ display: none; }
						}
					}
				& > a {
						margin: 0 -0.8em;
					}
				}
			}
		}
	}
@keyframes ellipse-change{
  0%{ border-radius: 50% 50% 70% 68% / 90% 80% 90% 90%; }
 20%{ border-radius: 60% 70% 70% 60% / 90% 70% 80% 80%; }
 40%{ border-radius: 50% 70% 60% 70% / 80% 80% 70% 70%; }
 60%{ border-radius: 40% 70% 50% 80% / 80% 70% 70% 60%; }
 80%{ border-radius: 50% 70% 50% 70% / 90% 80% 80% 70%; }
100%{ border-radius: 50% 50% 70% 68% / 90% 80% 90% 90%; }
}

/*  ---------------------------------------------------------*/
#participate {
	background: var(--bg-2nd-color);
	& h2 {
		margin-bottom: 1em;
		padding-bottom: 1em;
		}
	& .parWrapper {
		display: flex;
		flex-wrap: wrap;
		--par-dl-gap: 80px;
		gap: var(--par-dl-gap);
		& > div {
			width: calc((100% - var(--par-dl-gap) * 2) / 3);
			@media (width <= 900px){ width: 100%; }
			position: relative;
            &:not(:last-of-type)::after {
                content: "";
                width: 20px;
                height: 60%;
                margin: auto;
                display: block;
                position: absolute;
                right: -45px;
                top: 0;
                bottom: 0;
				clip-path: polygon(12% 0, 100% 50%, 10% 100%, 0% 100%, 88% 50%, 0% 0%);
                background: var(--accent-color);
				@media (width <= 900px){
					transform: rotate(90deg);
					right: 0;
					left: 0;
					top: auto;
					bottom: -80px;
					}
                }
			& dt, dd:first-of-type {
				width: calc(75% - 0.3em);
				margin-right: 0.3em;
				}
			& dt {
				margin-bottom: 0.5em;
				@media (width <= 900px){ margin-bottom: 0.3em; }
				font-size: clamp(2.5rem, 2.288rem + 0.95vw, 3rem);
				font-weight: 800;
				line-height: 130%;
				& strong {
					padding: 0.2em 0.7em 0.5em;
					display: block;
					background: url("../img/step-balloon.svg") no-repeat;
					color: var(--accent-color);
					font-size: clamp(2rem, 1.788rem + 0.95vw, 2.5rem);
					letter-spacing: 0.1em;
					}
				}
			& dd:first-of-type {}
			& dd:last-of-type {
				width: 25%;
				margin: auto;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				display: flex;
				align-items: center;
				& > img { max-width: 95px; height: auto; }
				}
			&:last-of-type {
				& dt, dd:first-of-type {
					width: 70%;
					}
				& dd:last-of-type {
					width: 30%;
					& > img { width: 120%; max-width: 120px; height: auto; }
					}
				}
			}
		}
	}
#present {
	margin-top: 3em;
	padding-bottom: 3em;
	display: flex;
	flex-wrap: wrap;
	--pre-dl-gap: 0;
	gap: 1em var(--pre-dl-gap);
	border-radius: 20px;
	background: var(--def-bg-color);
	@media (width <= 1000px){
		/*padding: 2em;*/
		padding-bottom: 2em;
		flex-direction: column;
		gap: 2em;
		}
	& h3 {
		width: 100%;
		margin-bottom: 1em;
		padding: 1em 0;
		border-radius: 20px 20px 0 0;
		background: var(--accent-color);
		text-align: center;
		color: var(--sub-font-color);
		font-size: clamp(2.5rem, 2.288rem + 0.95vw, 3rem);
		font-weight: 900;
		line-height: 120%;
		@media (width <= 1000px){
			padding: 0.8em 0;
			margin-bottom: 0;
			}
		}
	& > dl {
		width: 50%;
		padding: 0 3em;
		display: flex;
		gap: 5%;
		position: relative;
		&:nth-of-type(1) {
			& .preWrapper { width: 60%; }
			& .photo { width: 35%;
				@media (width <= 1000px){ width: 60%; }
				}
			}
		&:nth-of-type(2) {
			& .preWrapper { width: 45%; }
			& .photo { width: 50%;
				@media (width <= 1000px){ width: 80%; }
				}
			}
		@media (width <= 1000px){
			width: 100%;
			padding: 0 2em;
			flex-direction: column-reverse;
			gap: 1em;
			&:nth-of-type(1) {
				margin-bottom: 2em;
				}
			}
		&:nth-of-type(1)::after {
			content: "";
			width: 1px;
			height: 100%;
			display: block;
			position: absolute;
			right: 0;
			background: var(--accent-color);
			@media (width <= 1000px){
				width: calc(100% - 4em);
				height: 1px;
				right: auto;
				bottom: -2em;
				}
			}
		& dt {
			font-size: 2.3rem;
			font-weight: 500;
			line-height: 160%;
			& > strong {
				font-size: 1.2em;
				font-weight: 900;
				}
			}
		& .preWrapper {
			width: 55%;
			position: relative;
			z-index: 2;
			@media (width <= 1000px){ width: 100%!important; }
			}
		& dd > p {
			margin-left: 1em;
			padding-top: 1em;
			font-size: 0.9em;
			line-height: 110%;
			text-indent: -1em;
			}
		}
	& .card {
		font-size: 1.5em;
		position: relative;
		&::before {
			content: "";
			width: 100%;
			height: 14px;
			display: block;
			position: absolute;
			z-index: -1;
			bottom: 2px;
			background: var(--bg-3rd-color);
			}
		}
	& .item {}
	& .limited {
		width: 85px;
		height: 85px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 100px;
		position: absolute;
		top: -30px;
		left: 11em;
		background: var(--bg-3rd-color);
		line-height: 140%;
		@media (width <= 1250px){
			top: -40px;
			left: 9em;
			}
		@media (width <= 1150px){
			width: 75px;
			height: 75px;
			top: -40px;
			left: 10em;
			font-size: 0.9em;
			}
		@media (width <= 768px){
			width: 85px;
			height: 85px;
			top: 0;
			left: 13em;
			font-size: 1em;
			}
		& > strong {
			font-size: 1.5em;
			font-weight: 900;
			line-height: 100%;
			}
		}
	& .area { padding-top: 1em; }
	& .photo {
		width: 40%;
		order: -1;
		font-size: 0.9em;
		@media (width <= 1000px){
			width: 60%;
			max-width: 300px;
			margin-inline: auto;
			}
		}
	& .place {
		margin-inline: auto;
		margin-top: 1.5em;
		padding: 0.8em 2em;
		position: relative;
		z-index: 5;
		font-size: clamp(1.5rem, 1.288rem + 0.95vw, 2rem);
		text-align: center;
		background: var(--bg-3rd-color);
		@media (width <= 1000px){
			margin-top: 0;
			padding: 0.8em 0.6em;
			}
		&::before, &::after {
			content: "";
			width: 1em;
			height: 100%;
			margin: 0;
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: -1;
			clip-path: polygon(0 0, 0% 100%, 100% 50%);
			background: var(--bg-3rd-color);
			}
		&::before {
			left: -1em;
			transform: scale(-1, 1);
			}
		&::after { right: -1em; }
		}
	}

.wave {
    position: relative;
    left: 0;
    }
.wave.wavTop {
	top: -1px;
	transform: scaleY(-1);
	}
.wave.wavBottom { bottom: -10px; }

/*  ---------------------------------------------------------*/
h2 {
    font-size: clamp(2rem, 1.153rem + 3.8vw, 4rem);
    font-weight: 900;
    line-height: 1em;
    text-align: center;
    }
main h2 {
    margin-bottom: 1em;
    padding-bottom: 1em;
	background: url("../img/title-bg.svg") bottom center / 80px no-repeat;
    }
#rule {
	position: relative;
	background: var(--def-bg-color);
	text-align: center;
    & .bgIlust02 {
		width: clamp(120px, 20%, 200px);
		position: absolute;
		top: -50px;
		left: 20%;
		@media (width <= 900px){
			top: -30px;
			left: 5%;
			}
		}
	& .ruleWrapper {
		padding: 1rem 2em 0;
		display: flex;
		gap: 2em;
		@media (width <= 768px){
			width: 90%;
			margin-inline: auto;
			padding: 0;
			flex-direction: column;
			gap: 1em;
			}
		}
	& dl {
		width: 50%; 
		padding: 2em 0;
		display: flex;
		flex-direction: column;
		gap: 0 2rem;
		@media (width <= 768px){
			width: 100%;
			gap: 0 1rem;
			}
		}
	& dt {
		height: auto;
		margin-inline: auto;
		padding: 0.6em 3em;
		@media (width <= 768px){ padding: 0.3em 3em; }
		background: var(--accent-color);
		clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
		color: var(--sub-font-color);
		font-size: clamp(1.8rem, 1.292rem + 2.28vw, 3rem);
		font-weight: 700;
		}
	& dd:last-of-type {
		padding-top: 2em;
		display: block;
		@media (width <= 768px){ padding-top: 1em; }
		}
	& .photo {
        width:100%;
        /*aspect-ratio: 2 / 1.3;*/
        display: grid;
        place-content: center;
		}
	& h3 {
		max-width: 500px;
		margin: 2em auto 0.6em;
		padding: 0 1em 0.5em;
		display: block;
		position: relative;
		z-index: 1;
		color: inherit;
		font-size: 1.3em;
		font-weight: 700;
		@media (width <= 768px){
			max-width: 350px;
			padding: 0 0.5em 0.5em;
			}
		&::after, &::before {
			content: "";
			width: 100%;
			height: 100%;
			margin-inline: auto;
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			z-index: -2;
			background: #000;
			clip-path: polygon(0% 0%, 100% 0%, 93% 100%, 7% 100%);
			}
		&::before {
			width: calc(100% - 6px);
			height: calc(100% + 3px);
			z-index: -1;
			top: -1px;
			background: #FFF;
			}
		}
	& .youtubeShort {
		max-width: 500px;
		margin-inline: auto;
        margin-bottom: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 9 / 16;
		@media (width <= 768px){ width: 90%; }
        & > a { width: 100%; }
        & iframe {
            width: 100%;
            height: 100%;
            }
		}
	}


/*  ---------------------------------------------------------*/
#distribution {
	--accent-card-color: #3A4D8C;
	--accent-card-color-2nd: #C10347;
	text-align: center;
	background: var(--bg-2nd-color);
	& .container { position: relative; }
	& .bgIlust01 {
		width: clamp(100px, 20%, 200px);
		position: absolute;
		top: -200px;
		right: -20px;
		@media (width <= 900px){
			top: -130px;
			right: -10px;
			}
		}
	& .mainText { margin-bottom: 3em; }
	& h3:not(#program h3) {
		max-width: 600px;
		margin-inline: auto;
		padding: 0.6em 1.5em;
		@media (width <= 768px){
			max-width: 280px;
			padding: 0.3em 1.5em;
			}
		display: block;
		background: var(--accent-color);
		clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
		color: var(--sub-font-color);
		font-size: clamp(1.8rem, 1.292rem + 2.28vw, 3rem);
		font-weight: 700;
		}
	& ul:not(#route ul) {
		margin-top: 2em;
		display: flex;
		flex-wrap: wrap;
		--dis-gap-size: 4em;
		gap: 3em var(--dis-gap-size);
		text-align: left;
		}
    --gap-space: 2em;
    --gap-space-sp: 1em;
    --card-width: 120px;
    --card-width-sp: 90px;
	& ul > li {
		width: calc((100% - var(--dis-gap-size)) / 2);
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-self: flex-start;
		gap: 0 var(--gap-space);
		@media (width <= 900px){
			width: 100%;
			gap: 0 var(--gap-space-sp);
			}
		& > h4 {
			width: calc(100% - var(--card-width) - var(--gap-space));
			@media (width <= 900px){ width: 100%; }
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 0.5em;
			font-size: 2.3rem;
			& .num {
				width: 30px;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				aspect-ratio: 3 / 4;
				border-radius: 3px;
				border: 1px solid var(--bg-sub-color);
				background: var(--accent-card-color);
				color: var(--sub-font-color);
				font-size: 0.9em;
				font-family: var(--font-family-num);
				font-weight: 500;
				line-height: 100%;
				}
			}
		& > dl {
			width: calc(100% - var(--card-width) - var(--gap-space) - (34px + 0.5em));
			margin-left: calc(34px + 0.5em);
			padding-top: 0.5em;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 0 0.3em;
			font-size: clamp(1.3rem, 1.173rem + 0.57vw, 1.6rem);
			@media (width <= 900px){
				width: calc(100% - var(--card-width-sp) - var(--gap-space));
				margin-left: 0;
				line-height: 160%;
				}
			--dt-width: 5em;
			& > dt {
				width: calc(var(--dt-width) - 2px);
				margin: 2px 1px;
				display: flex;
				justify-content: center;
				background: #0868AC;
				color: var(--sub-font-color);
				line-height: 1.4em;
				}
			& > dd { width: calc(100% - 0.3em - var(--dt-width)); }
			}
		& > dl{
			& > dt.cardLocation { width: calc(8em - 2px); }
			& > dd.cardLocation { width: calc(100% - 8.3em); }
			@media (width <= 1200px){
				& > dd.cardLocation.w100 { width: 100%; }
				}
			}
		& .fmedium {
			line-height: 110%;
            display: block;
			}
		}
    & .card {
        width: var(--card-width);
        margin-top: -40px;
        display: grid;
        place-items: center;
        aspect-ratio: 3 / 4;
		position: relative;
        @media (width <= 900px){
			width: var(--card-width-sp);
			margin-top: 0.5em;
			}
		& .finished {
			width: calc(100% + 1.6em);
			margin: 0 -0.8em -3em;
			padding: 0.3em;
			border: 3px solid red;
			color: red;
			background: var(--def-bg-color);
			position: absolute;
			font-size: 0.8em;
			font-weight: 800;
			text-align: center;
			line-height: 120%;
			opacity: 0.9;
			}
        }
	& .map {
		width: 100%;
		position: relative;
		aspect-ratio: 16 / 6;
		overflow: hidden;
		@media (width <= 900px){ aspect-ratio: 1 / 1; }
		& iframe {
			width: 100%;
			height: 100%;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			border: none;
			}
		}
	& .pre {
		position: relative;
		&::before {
			content: "ダミーです。Googleマイマップがはいります。";
			max-width: 300px;
			max-height: 100px;
			display: grid;
			place-items: center;
			position: absolute;
			margin: auto;
			inset: 0;
			z-index: 500;
			background: gray;
			opacity: 0.9;
			}
		}
	}
#munakata,
#japan { margin-bottom: 6em; }
#munakata h3 { background: var(--accent-card-color)!important; }
#japan {
	& h3, & .num { background: var(--accent-card-color-2nd)!important; }
	& dt { background: #EB6D8E!important; }
	} 

#program {
	margin-top: 8em;
	padding: 1.5em 4em 4em;
	background: var(--def-bg-color);
	border-radius: 20px;
	position: relative;
	@media (width <= 900px){ padding: 0.2em 2em 2em; }
	& > h3 {
		max-width: 300px;
		margin-inline: auto;
		padding: 0.5em;
		display: block;
		position: absolute;
		top: -2em;
		left: 0;
		right: 0;
		background: var(--accent-card-color);
		clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
		color: var(--sub-font-color);
		font-size: clamp(2rem, 1.831rem + 0.76vw, 2.4rem);
		font-weight: 900;
		@media (width <= 900px){
			width: 80%;
			padding: 0.4em;
			top: -2em;
			}
		}
	& ul {
		gap: 2em var(--dis-gap-size);
		& li { align-self: flex-start; }
		}
	& .buttonS {
		background: none;
		margin-top: 1em;
		margin-left: calc(34px + 0.5em);
		color: var(--accent-card-color);
		border: 1px solid var(--accent-card-color);
		font-weight: 600;
		@media (width <= 900px){
			margin-inline: auto;
			}
		&::before {
			background: var(--accent-card-color);
			}
		}
	}

#illustrator {
	width: 90%;
	margin-inline: auto;
	margin-bottom: 10em;
	padding: 4em;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2em;
	background: #8CCBE9;
	border: solid 5px #8CCBE9;
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	text-align: left;
	font-size: clamp(1.3rem, 1.173rem + 0.57vw, 1.6rem);
	@media (width <= 900px){
		width: 100%;
		margin-bottom: 7em;
		padding: 3em 2em 2em;
		flex-direction: column;
		}
	& h3 {
		margin: 0 auto auto 0!important;
		padding: 0!important;
		background: none!important;
		clip-path: none!important;
		color: var(--def-font-color)!important;
		& > span {
			margin-bottom: 0.5em;
			display: block;
			font-size: 0.6em;
			@media (width <= 900px){
				margin-bottom: 0.3em;
				line-height: 120%;
				}
			}
		}
	& dl {
		margin-top: 1.5em;
		@media (width <= 900px){ margin-top: 2.5em; }
		}
	& .illustWrapper {
		width: calc(100% - 220px - 2em);
		@media (width <= 900px){ width: 100%; }
		}
	& img {
		width: 220px;
		height: 220px;
		object-fit: cover;
		object-position: 50% 0%;
		border-radius: 50%;
		order: -1;
		@media (width <= 900px){
			width: 100px;
			height: 100px;
			position: absolute;
			top: 1.8em;
			right: 2em;
			}
		}
	}

#route {
	margin-top: 2em;
	& .attention {
		width: 90%;
		max-width: 800px;
		margin-inline: auto;
		padding: 4em 0 2em;
		@media (width <= 900px){ padding: 2em 0 0; }
		& > dt {
			color: #d80f0f;
			font-size: 1.2em;
			font-weight: 700;
			@media (width <= 900px){ font-size: 1em; }
			}
		& > dd {
			padding-top: 1em;
			text-align: left;
			font-size: 0.9em;
			line-height: 140%;
			@media (width <= 900px){
				font-size: 0.75em;
				}
			&:last-of-type {
				padding-top: 2em;
				text-align: center;
				font-size: clamp(1.8rem, 1.504rem + 1.33vw, 2.5rem);
				font-weight: 700;
				@media (width <= 900px){ padding-top: 1.5em;}
				}
			& li {
				margin-left: 1em;
				padding-bottom: 0.5em;
				}
			}
		}
	& .tabListWrapper {
		margin-top: 4em;
		margin-bottom: 3em;
		display: flex;
		justify-content: space-between;
		gap: 7em;
		position: relative;
		@media (width <= 900px){
			flex-direction: column;
			gap: 4em;
			& .day1Wrapper {
				padding-bottom: 4em;
				border-bottom: 4px solid var(--bg-2nd-color);
				}
			}
		& > div {
			width: 50%;
			@media (width <= 900px){ width: 100%; }
			}
		&::after {
				content: "";
				width: 4px;
				height: 100%;
				margin-inline: auto;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				background: var(--bg-2nd-color);
				mix-blend-mode: multiply;
				@media (width <= 900px){ display: none; }
				}
		& dt {
			/*padding-bottom: 1em;*/
			padding-bottom: 0.5em;
			color: var(--accent-color);
			font-size: 1.9em;
			font-weight: 900;
			}
		& dd {
			& .totalTime {
				margin-bottom: 1.5em;
				font-size: 1.1em;
				}
			& ul {
				padding-top: 1em;
				text-align: left;
				& > li {
					/*padding-left: 3.5em;
					text-indent: -3.5em;*/
					margin-bottom: 0.8em;
					display: flex;
					justify-content: flex-start;
					gap: 1em;
					@media (width <= 900px){ margin-bottom: 1.5em; }
					& .time {
						width: 3em;
						margin-top: 0.2em;
						position: relative;
						background: var(--accent-color);
						color: var(--sub-font-color);
						text-align: center;
						line-height: 1.2em;
						&::after {
							content: "";
							width: 10px;
							height: 100%;
							position: absolute;
							top: 0;
							right: -10px;
							display: block;
							background: var(--accent-color);
							clip-path: polygon(0 0, 100% 50%, 0 100%);
							}
						}
					& > div:not(.time) { width: calc(100% - 4em); }
					--padding-size: 0.5em;
					& .stayingTime,
					& .cardGet {
						margin: 0.5em 0;
						padding: var(--padding-size) 0.7em;
						display: inline-block;
						border: 1px solid #0868AC;
						/*background: #0868AC;
						border-radius: 30px;*/
						font-size: 0.75em;
						line-height: 100%;
						@media (width <= 900px){ margin: 0.3em 0; }
						& strong {
							font-size: 1.2em;
							font-weight: 700;
							}
						}
					& .stayingTime {
						/*color: var(--sub-font-color);*/
						background: var(--sub-font-color);
						color: #0868AC;
						font-weight: 700;
						}
					& .cardGet {
						/*padding-top: calc(var(--padding-size) - 2px);
						padding-bottom: calc(var(--padding-size) - 2px);
						border: 2px solid var(--accent-color);
						background: var(--def-bg-color);
						color: var(--accent-color);*/
						background: #0868AC;
						color: var(--sub-font-color);
						}
					& .presentGet {
						padding-bottom: 0.2em;
						position: relative;
						display: inline;
						font-size: 1.1em;
						font-weight: 700;
						background: linear-gradient(transparent 60%, var(--bg-3rd-color) 0%);
						}
					& .subList {
						padding: 0.5em 0;
						font-size: 0.75em;
						line-height: 120%;
						& li {
							padding-left: 1em;
							margin-bottom: 0.5em;
							display: block;
							text-indent: -1em;
							}
						}
					& .point {
						margin: 0.3em 0;
						padding-left: 1em;
						/*padding: 0.7em 1em;
						border: 1px solid #d80f0f;*/
						color: #d80f0f;
						font-size: 0.9em;
						line-height: 150%;
						text-indent: -1em;
						}
					}
				}
			}
		}
    & .get {
		margin-top: 2em;
		& p:first-of-type {
			width: 90%;
			margin-inline: auto;
			padding: 0.5em 0;
			position: relative;
			background: var(--bg-3rd-color);
			&::before, &::after {
				content: "";
				width: 1em;
				height: 100%;
				margin: 0;
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				z-index: -1;
				clip-path: polygon(0 0, 0% 100%, 100% 50%);
				background: var(--bg-3rd-color);
				}
			&::before {
				left: -1em;
				transform: scale(-1, 1);
				}
			&::after { right: -1em; }
			}
		& p:nth-of-type(2) {
			padding: 0.5em 0 0;
			font-size: 0.9em;
			& > strong { font-size: 1.1em; }
			}
        }
	& #movie {
		width: 80%;
		margin-top: 3em;
		width: 100%;
		margin-inline: auto;
		position: relative;
		@media (width <= 768px){ width: 100%; }
		& > h3 { font-size: clamp(1.5rem, 1.204rem + 1.33vw, 2.2rem)!important; }
		& .new {
			width: 70px;
			height: 70px;
			top:-0.5em;
			right:0;
			z-index: 999;
			color:#000;
			background: var(--bg-3rd-color);
			@media (width <= 768px){ width: 60px; height: 60px; }
			}
		& .youtube {
			margin-bottom: 1em;
			display: flex;
			justify-content: center;
			align-items: center;
			aspect-ratio: 16 / 9;
			& > a { width: 100%; }
			& iframe {
				width: 100%;
				height: 100%;
				}
			}
		}
	/*& .map {
		margin-top: 3em;
		}*/
	}

#tab {
	margin-top: 4em;
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	gap: 0 3em;
	position: relative;
	@media (width <= 768px){
		margin-top: 3em;
		gap: 0 1em;
		}
	& > label {
		flex: 1 1;
		order: -1;
		position: relative;
		z-index: 0;
		min-width: 120px;
		max-width: 300px;
		margin-bottom: -1.5em;
		padding: 1.5em 1em 2.5em;
		background: url(../img/step-balloon-orange.svg) center top no-repeat;
		color: #fff;
		font-size: clamp(1.8rem, 1.504rem + 1.33vw, 2.5rem);
		text-align: center;
		cursor: pointer;
		@media (width <= 768px){
			padding: 1em 1em 1.5em;
			margin-bottom: -1.8em;
			& > h4 { font-size: 1.7rem!important; line-height: 120%; }
			}
		&:nth-of-type(2) {
			@media (width <= 768px){ padding: 0.5em 1em 2em; }
			}
		}
	/*& > label:hover,*/
	& label:has(:checked) {
		margin-top: -0.5em;
		margin-bottom: -1em;
		background: url(../img/step-balloon.svg) center top no-repeat transparent;
		color: var(--accent-color);
		z-index: 5;
		@media (width <= 768px){
			margin-top: -0.2em;
			margin-bottom: -1.6em;
			}
		}
	/*& label:has(:checked)::before {
		position: absolute;
		bottom: -8px;
		left: 50%;
		transform: translateX(-50%);
		width: 18px;
		height: 9px;
		background-color: #2589d0;
		content: '';
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		}*/
	& input {
		display: none;
		}
	& > div {
		display: none;
		width: 100%;
		padding: 0 4em 3em;
		position: relative;
		z-index: 2;
		background: var(--def-bg-color);
		border-radius: 1.5em;
		@media (width <= 768px){ padding: 0 1em 2em; }
		}
	& label:has(:checked) + div {
		display: block;
		}
	}
.info {
	margin-top: 3em;
	padding: 3em 2em;
	background: #8CCBE9;
	border-radius: 1.5em;
	word-break: break-all;
	/*font-weight: 700;*/
	@media (width <= 768px){
		margin-top: 2em;
		padding: 2em;
		}
	}



/*  ---------------------------------------------------------*/
#event {
	text-align: center;
	position: relative;
    & .bgIlust03 {
		width: clamp(30px, 12%, 70px);
		position: absolute;
		top: -20px;
		right: 33%;
		@media (width <= 900px){
			top: -40px;
			right: 10%;
			}
		}
    & .bgIlust04 {
		width: clamp(50px, 20%, 130px);
		position: absolute;
		top: 60px;
		left: 30%;
		@media (width <= 900px){
			top: -10px;
			left: 5%;
			}
		& > img { transform: scale(-1, 1); }
		}
	& h3 {
		padding: 1.5em 0 1.2em;
		font-size: clamp(2.5rem, 2.288rem + 0.95vw, 3rem);
		line-height: 130%;
		}
	& .text {
		padding-bottom: 2em;
		& > table {
			max-width: 600px;
			margin: 2.5em auto 0;
			}
		& > table.wide { max-width: 650px; }
		}
	& .photo2rows {
		display: flex;
		justify-content: center;
		gap: 1em;
		& > img {
			max-width: 500px;
			width: calc((100% - 1em) / 2);
			}
		}
	& .photo1row {
		max-width: 500px;
		margin-inline: auto;
		position: relative;
		& > img {}
		}
	& .finished {
			width: 70%;
			height: fit-content;
			margin: auto;
			padding: 1em;
			border: 3px solid red;
			background: var(--def-bg-color);
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			color: red;
			font-size: 0.9em;
			font-weight: 800;
			text-align: center;
			line-height: 120%;
			opacity: 0.8;
			}
	& .eventList > li{
        display: flex;
		text-indent: 0;
        &::before {
            content: "・"
            }
		}
	& .pastEvents {
		& dt {
			width: 80%;
			max-width: 450px;
			margin-top: 2em;
			margin-inline: auto;
			padding: 0.8em;
			display: block;
			background: var(--bg-2nd-color);
			clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
			font-size: clamp(1.4rem, 1.146rem + 1.14vw, 2rem);
			font-weight: 700;
			@media (width <= 768px){ padding: 0.5em; }
			}
		& .youtube {
			margin-bottom: 1em;
			display: flex;
			justify-content: center;
			align-items: center;
			aspect-ratio: 16 / 9;
			& > a { width: 100%; }
			& iframe {
				width: 100%;
				height: 100%;
				}
			}
		}
	& #manabi {
		margin-bottom: 1em;
		padding-bottom: 5em;
		border-bottom: 1px solid var(--bg-sub-color);
		}
	& .state { & dt { margin-top: 0;} }
	& .photo {
		display: flex;
		flex-wrap: wrap;
		--eve-photo-gap-size: 0;
		gap: var(--eve-photo-gap-size);
		& li {
			/*width: calc((100% / 3) - (var(--eve-photo-gap-size) * 2));*/
			width: calc(100% / 3);
			aspect-ratio: 1 / 1;
			display: grid;
			place-content: center;
			/*@media (width <= 768px){ width: calc((100% / 2) - (var(--eve-photo-gap-size) * 2)); }*/
			@media (width <= 768px){ width: calc(100% / 2); }
			& > img { width: 101%; height: 101%; object-fit: cover; }
			}
		}
	& table {
		width: 100%;
		/*margin-inline: auto;*/
		text-align: left;
		border: 1px solid var(--bg-3rd-color);
		font-size: clamp(1.2rem, 1.115rem + 0.38vw, 1.4rem);
		line-height: 140%;
		& th {
			padding: 0.5em 1em;
			background: var(--bg-3rd-color);
			/*color: var(--sub-font-color);*/
			font-weight: 500;
			text-align: center;
			}
		& tr:not(:last-of-type) > th { border-bottom: 1px solid var(--def-bg-color); }
		& td {
			padding: 0.5em 1em;
			word-break: break-all;
			}
		& tr:not(:last-of-type) > td { border-bottom: 1px solid var(--bg-3rd-color); }
		}
	}
.new {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -1em;
	right: -1em;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--sub-font-color);
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	letter-spacing: 0.1em;
	@media (width <= 900px){ top: 0; right: 0; }
	}
#relatedEvents {
	margin-top: 5em;
	position: relative;
	border: 1px solid var(--accent-3rd-color);
	border-radius: 1em;
	font-size: clamp(1.4rem, 1.315rem + 0.38vw, 1.6rem);
	line-height: 140%;
	@media (width <= 900px){ margin-top: 3em; }
	/*--subTitle-width: 90px;
	@media (width <= 768px){
		--subTitle-width: 80px;
		text-align: left;
		}
	& .reTitleWrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1em;
		}
	& .subTitle {
		width: var(--subTitle-width);
		padding-bottom: 0.5em;
		display: flex;
		justify-content: center;
		align-items: center;
		order: 1;
		flex-shrink: 0;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		background: var(--bg-3rd-color);
		font-weight: 500;
		font-size: 0.7em;
		line-height: 130%;
		text-align: center;
		}*/
	& .subTitle {
		padding: 0.5em;
		border-radius: 1em 1em 0 0;
		background: var(--accent-3rd-color);
		color: var(--sub-font-color);
		font-weight: 700;
		}
	& .reWrapper {
		padding: 2.5em 3em;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 4em;
		/*column-count: 2;
		column-gap: 4em;*/
		text-align: left;
		@media (width <= 768px){
			padding: 2em 2em;
			}
		& > div {
			width: calc((100% - 4em) / 2);
			@media (width <= 900px){ width: 100%; }
			}
		}
	& h3 {
		/*padding-left: var(--subTitle-width);*/
		padding: 0 0 0.8em;
		font-size: clamp(2.2rem, 1.8rem + 0.95vw, 2.7rem);
		line-height: 130%;
		@media (width <= 768px){ padding-left: 0; }
		}
	& h3.-new { padding-right: 1em; }
	& .text { padding-bottom: 1.5em; }
	& .sub {
		padding-bottom: 0.5em;
		}
	}
.eventSadogashima { position: relative; }



/*  ---------------------------------------------------------*/
.fadeIn { animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeInAnime{ from { opacity: 0; filter: blur(40px); }  to { opacity: 1; filter: blur(0px); }}
.fadeUp { animation-name:fadeUpAnime; animation-duration:0.7s; animation-fill-mode:forwards; animation-timing-function: ease-out; opacity:0; }
@keyframes fadeUpAnime{ from { opacity: 0; transform: translateY(10px); filter: blur(0px); } to { opacity: 1; transform: translateY(0); filter: blur(0); }}
.fadeDown{ animation-name:fadeDownAnime; animation-duration:0.7s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeDownAnime{ from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); }}
.fadeLeft{ animation-name:fadeLeftAnime; animation-duration:0.7s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeLeftAnime{ from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); }}
.fadeRight{ animation-name:fadeRightAnime; animation-duration:0.7s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeRightAnime{ from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); }}
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger{ opacity: 0; }
.flipDown{ animation-name:flipDownAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes flipDownAnime{ from { transform: perspective(2500px) rotateX(100deg); opacity: 0; } to { transform: perspective(2500px) rotateX(0); opacity: 1; }}
.flipLeft{ animation-name:flipLeftAnime; animation-duration:1s; animation-fill-mode:forwards; perspective-origin:left center; opacity:0; }
@keyframes flipLeftAnime{ from { transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg); opacity: 0; } to { transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); opacity: 1; }}
.flipLeftTop{ animation-name:flipLeftTopAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes flipLeftTopAnime{ from { transform: translate(-20px,80px) rotate(-15deg); opacity: 0; } to { transform: translate(0,0) rotate(0deg); opacity: 1; }}
.flipRight{ animation-name:flipRightAnime; animation-duration:1s; animation-fill-mode:forwards; perspective-origin:right center; opacity:0; }
@keyframes flipRightAnime{ from { transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg); opacity: 0; } to { transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); opacity: 1; }}
.flipRightTop{ animation-name:flipRightTopAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0; }
@keyframes flipRightTopAnime{ from { transform: translate(-20px,80px) rotate(25deg); opacity: 0; } to { transform: translate(0,1) rotate(0deg); opacity: 1; }}
.flipDownTrigger, .flipLeftTrigger, .flipLeftTopTrigger, .flipRightTrigger, .flipRightTopTrigger{ opacity: 0; }
.rotateX{ animation-name:rotateXAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateXAnime{ from{ transform: rotateX(0); opacity: 0; } to{ transform: rotateX(-360deg); opacity: 1; }}
.rotateY{ animation-name:rotateYAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateYAnime{ from{ transform: rotateY(0); opacity: 0; } to{ transform: rotateY(-360deg); opacity: 1; }}
.rotateLeftZ{ animation-name:rotateLeftZAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateLeftZAnime{ from{ transform: rotateZ(0); opacity: 0; } to{ transform: rotateZ(-360deg); opacity: 1; }}
.rotateRightZ{ animation-name:rotateRightZAnime; animation-duration:1s; animation-fill-mode:forwards; }
@keyframes rotateRightZAnime{ from{ transform: rotateZ(0); opacity: 0; } to{ transform: rotateZ(360deg); opacity: 1; }}
.rotateXTrigger, .rotateYTrigger, .rotateLeftZTrigger, .rotateRightZTrigger{ opacity: 0; }
.zoomIn{ animation-name:zoomInAnime; animation-duration:0.5s; animation-fill-mode:forwards; }
@keyframes zoomInAnime{ from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; }}
.zoomOut{ animation-name:zoomOutAnime; animation-duration:0.5s; animation-fill-mode:forwards; }
@keyframes zoomOutAnime{ from { transform: scale(1.2); opacity: 0; } to { transform:scale(1); opacity: 1; }}
.zoomInTrigger, .zoomOutTrigger{ opacity: 0; }