@charset "utf-8";

.animation {
	overflow: hidden;
	position: relative;
	margin:86px auto 0;
	/*background:url(../img/bg-white.png) no-repeat center bottom;*/
}
.animation img{
	width:100%;
	display:block;
}

.animation img.pc{
	display:block;
}
.animation img.sp{
	display:none;
}

@media screen and (max-width: 480px){
	.animation {
	overflow: hidden;
	position: relative;
		margin:0px auto 0;
	}
	.animation img.pc{
		display:none;
	}
	.animation img.sp{
		display:block;
	}
}

.animation #mask{
	position: absolute;
	width: calc(100%/1.35);
	top: calc(100%/6.4);
	left: calc(100%/6.7);
}
.animation h1 {
	position: absolute;
	width: calc(100%/1.9);
	top: calc(100%/15.0);
	left: calc(100%/4.2);
	/*animation: 10s infinite fadeup;*/
}
@media screen and (max-width: 480px){
	.animation h1 {
		position: absolute;
		width: calc(100%/1.1);
		top: calc(100%/7.5);
		left: calc(100%/20.0);
	}
	.animation #mask{
		position: absolute;
		width: calc(100%/1.2);
		top: calc(100%/6.4);
		left: calc(100%/10.7);
	}
}
.animation ul { list-style: none; }
.animation ul li,
.catch-txt,.family,.fukidashi01,.fukidashi02 { position: absolute; }

/*.item04,.item05,.item06,.item07 { width: calc(100%/5.4); }*/
/*.bird01,.bird02,.bird03,.bird04 { width: calc(100%/16); }*/

.animation dl {
	position: relative;
	cursor: pointer;
}

/*.animation dl dt {
	display: none;
	position: absolute;
	opacity: 0;
}*/
.animation dl dt {
	display: block;
	position: absolute;
	opacity: 1;
}

@keyframes ball_pc { 
	5% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; }
}
.catch{/*今年もまた高松空港に帰ってきた！*/
	width: calc(100%/3.2);
	top: calc(100%/30.0);
	left: calc(100%/40.0);
	animation: popup 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.plane{/*飛行機*/
	width: calc(100%/5.0);
	top: calc(100%/60.0);
	left: calc(100%/1.3);
	animation: slide-skew 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.item01 {/*株式会社FURYU*/
	width: calc(100%/6.0);
	top: calc(100%/4.3);
	left: calc(100%/60.0);
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.item02 {/*川崎化工株式会社*/
	width: calc(100%/7.0);
	top: calc(100%/1.7);
	left: calc(100%/11.0);
	animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.item03 {/*川崎化工株式会社パス抜き*/
	width: calc(100%/7.0);
	top: calc(100%/2.0);
	left: calc(100%/50.0);
	animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.item04 {/*風鈴 ふ〜りん*/
	width: calc(100%/5.5);
	top: calc(100%/4.0);
	left: calc(100%/1.22);
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

.item05 {/*期間限定*/
	width: calc(100%/9.0);
	top: calc(100%/2.3);
	left: calc(100%/1.44);
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.item06 {/*株式会社きさらぎ*/
	width: calc(100%/5.0);
	top: calc(100%/1.9);
	left: calc(100%/1.32);
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.text01 {/*香川の〜*/
	width: calc(100%/1.6);
	top: calc(100%/3.0);
	left: calc(100%/5.2);
}
.text02 {/*商工会〜*/
	width: calc(100%/1.76);
	top: calc(100%/2.6);
	left: calc(100%/4.7);
}
.open-day{/*2025.8.1〜2026.1.31*/
	width: calc(100%/2.5);
	top: calc(100%/2.2);
	left: calc(100%/3.7);
}
.location {/*会場イメージ*/
	width: calc(100%/2.5);
	top: calc(100%/1.85);
	left: calc(100%/3.65);
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.place{/*高松空港2階「さぬき銘品店」にて販売！*/
	width: calc(100%/2.0);
	top: calc(100%/1.1);
	left: calc(100%/4.3);
	animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@media screen and (max-width: 480px){
	.catch{/*今年もまた高松空港に帰ってきた！*/
		width: calc(100%/2.2);
		top: calc(100%/60.0);
		left: calc(100%/40.0);
	}
	.plane{/*飛行機*/
		width: calc(100%/4.0);
		top: calc(100%/60.0);
		left: calc(100%/1.37);
	}
	.item01 {/*株式会社FURYU*/
		width: calc(100%/4.5);
		top: calc(100%/2.4);
		left: calc(100%/60.0);
	}

	.item02 {/*川崎化工株式会社*/
		width: calc(100%/5.0);
		top: calc(100%/1.45);
		left: calc(100%/15.0);
	}

	.item03 {/*川崎化工株式会社パス抜き*/
		width: calc(100%/6.0);
		top: calc(100%/1.6);
		left: calc(100%/50.0);
	}
	.item04 {/*風鈴 ふ〜りん*/
		width: calc(100%/4.5);
		top: calc(100%/1.9);
		left: calc(100%/1.3);
	}

	.item05 {/*期間限定*/
		width: calc(100%/6.0);
		top: calc(100%/2.8);
		left: calc(100%/1.25);
	}
	.item06 {/*株式会社きさらぎ*/
		width: calc(100%/4.8);
		top: calc(100%/1.4);
		left: calc(100%/1.32);
	}

	.open-day{/*2025.8.1〜2026.1.31*/
		width: calc(100%/2.0);
		top: calc(100%/2.2);
		left: calc(100%/3.7);
	}
	.location {/*会場イメージ*/
		width: calc(100%/2.1);
		top: calc(100%/1.6);
		left: calc(100%/3.6);
	}
	.place{/*高松空港2階「さぬき銘品店」にて販売！*/
		width: calc(100%/1.1);
		top: calc(100%/1.09);
		left: calc(100%/20.0);
	}

	.text01 {/*香川の〜*/
		display:none;
	}
	.text02 {/*商工会〜*/
		display:none;
	}

}

@keyframes show {
	0% {
		transform:translate(0,2em);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	50% {
		text-shadow:0 0 0.5em #0f0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}

@keyframes ball_pc { 
	5% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes ball2_pc { 
	5% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}

@media screen and (max-width: 896px){
	
}

@keyframes ball_sp { 
	1% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes ball2_sp { 
	1% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}


@media screen and (max-width: 896px) {
	.animation h2 {
		opacity: 0;
		animation: 10s infinite fadein_sp;
		animation-delay: 5s;
	}
	.animation dl dt {
		display: block;
		opacity: 1;
	}

	.animation dl:hover dt {
		display: block;
		animation: none;
	}
}

@keyframes fadein {
	0%,
	40% {
	    opacity: 1;
	}
	60%,
	70% {
		opacity: 0;
	}
	90% { opacity: 1; }
}
@keyframes slide-skew {
  0% {
    transform: translate(180px,30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

@keyframes fadein_sp {
	20%,
	80% {
	    opacity: 1;
	}
	90% { opacity: 0; }
}

@keyframes logo {
	50% {
	    opacity: 1;
		left: 5%;
	}
	90% {
		opacity: 0;
		left: 5%;
	}
	100% {
		opacity: 0;
		left: -200%;
	}
}

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
@keyframes fadeup {
  0% {
	transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}*/

@keyframes cloud {
	100% {
		top: calc(100%/3);
		right: calc(100%/1);
	}
}

@keyframes bird01 {
	50% {
		transform: inherit;
		top: calc(100%/5.2);
		right: calc(100%/1.2);
	}
	51% { transform: scale(-1, -1); }
	100% {
		transform: scale(-1, -1);
		top: calc(100%/10);
		right: calc(100%/1.4);
	}
}

@keyframes bird02 {
	50% {
		transform: inherit;
		top: calc(100%/7.5);
		right: calc(100%/1.25);
	}
	51% { transform: scale(-1, -1); }
	100% {
		transform: scale(-1, -1);
		top: calc(100%/18);
		right: calc(100%/1.5);
	}
}

@keyframes bird03 {
	50% {
		transform: inherit;
		top: calc(100%/10);
		right: calc(100%/1.1);
	}
	51% { transform: scale(-1, -1); }
	100% {
		transform: scale(-1, -1);
		top: calc(100%/100);
		right: calc(100%/1.25);
	}
}

@keyframes train {
	40%,
	50% {
		top: calc(100%/5.1);
		right: calc(100%/2.4);
	}
	100% {
		top: calc(100%/1.63);
		right: calc(100%/-3.8);
	}
}

@keyframes car01 {
	98% {
		opacity: 1;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
	100% {
		opacity: 0;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
}

@keyframes car02 {
	98% {
		opacity: 1;
		top: calc(100%/2.06);
		right: calc(100%/3.42);
	}
	100% {
		opacity: 0;
		top: calc(100%/2.06);
		right: calc(100%/3.42);
	}
}

@keyframes car03 {
	98% {
		opacity: 1;
		top: calc(100%/1.2);
		left: calc(100%/1.078);
	}
	100% {
		opacity: 0;
		top: calc(100%/1.2);
		left: calc(100%/1.078);
	}
}

@keyframes bus {
	98% {
		opacity: 1;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
	100% {
		opacity: 0;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
}
/*************************************************/



/*SVGのサイズ*/
.event-visual svg{
	max-width:1500px;/*SVGタグの横幅*/
	width:100%;/* レスポンシブ対応にするため100%を指定*/
	height:auto;
}


/*========= 手書き風にするためのCSS ===============*/

/* マスクをするパスの設定*/
.event-visual #mask .st0{
    fill:none;
    stroke:#FFFFFF;
    stroke-width:24;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}