@charset "utf-8";

.main{
	background:none;
	margin:0 0 0;
}
.sales-add{
	width:400px;
	padding:10px;
	margin:20px 0;
	background:rgba(255,255,255,0.80);
}
.special-sponcer{
	text-align:center;
	font-weight:600;
}
.special-sponcer span{
	margin-right:20px;
}

@media screen and (max-width: 480px){
	.sales-add{
		width:100%;
		margin:0;
	}
	.special-sponcer{
		text-align:left;
	}
	.special-sponcer span{
		margin-right0;
	}
	.special-sponcer span:after{
		content: "\A";
		white-space: pre;
	}
}
@media screen and (min-width: 768px), print {
    a[href^="tel:"] {
        color: black;
        text-decoration: none;
 
        display: inline-block; /* IE用 */
        pointer-events: none;
    }
}
.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){
	.main{
		padding:0;
	}
	.animation {
	overflow: hidden;
	position: relative;
		margin:60px 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;*/
}
.pc{ display:block; }
.sp{ display:none; }
@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);
	}
	.pc{ display:none; }
	.sp{ display:block; }
}
.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; }
}
.ja-logo{/*JAPAN AIRLINES*/
	width: calc(100%/2.0);
	top: calc(100%/80.0);
	left: calc(100%/40.0);
}
.photo01{/*右上写真*/
	width: calc(100%/3.0);
	top: calc(100%/80.0);
	left: calc(100%/1.5);
}
.item01 {/*タイトル*/
	width: calc(100%/1.1);
	top: calc(100%/14.0);
	left: calc(100%/60.0);
}

.item02 {/*香川のうまいもん*/
	width: calc(100%/1.1);
	top: calc(100%/3.05);
	left: calc(100%/50.0);
}

.item03 {/*日付*/
	width: calc(100%/1.7);
	top: calc(100%/2.6);
	left: calc(100%/20.0);
}

.photo02{/*人物写真*/
	width: calc(100%/3.5);
	top: calc(100%/2.95);
	left: calc(100%/1.6);
}
.item04 {/*point1　ピンク*/
	width: calc(100%/1.05);
	top: calc(100%/1.83);
	left: calc(100%/40.0);
}
.item05 {/*point2　緑色*/
	width: calc(100%/2.15);
	top: calc(100%/1.23);
	left: calc(100%/40.0);
}
.item06 {/*point03 水色*/
	width: calc(100%/2.15);
	top: calc(100%/1.23);
	left: calc(100%/2.0);
}


@media screen and (max-width: 480px){
	.ja-logo{/*JAPAN AIRLINES*/
		width: calc(100%/1.5);
		top: calc(100%/100.0);
		left: calc(100%/40.0);
	}
	.photo01{/*右上写真*/
		width: calc(100%/2.6);
		top: calc(100%/40.0);
		left: calc(100%/1.6);
	}
	.item01 {/*タイトル*/
		width: calc(100%/1.05);
		top: calc(100%/15.0);
		left: calc(100%/60.0);
	}

	.item02 {/*香川のうまいもん*/
		width: calc(100%/1.05);
		top: calc(100%/4.0);
		left: calc(100%/50.0);
	}

	.item03 {/*日付*/
		width: calc(100%/1.4);
		top: calc(100%/3.4);
		left: calc(100%/40.0);
	}

	.photo02{/*人物写真*/
		width: calc(100%/2.7);
		top: calc(100%/4.0);
		left: calc(100%/1.52);
	}
	.item04 {/*point1　ピンク*/
		width: calc(100%/1.06);
		top: calc(100%/2.25);
		left: calc(100%/40.0);
	}
	.item05 {/*point2　緑色*/
		width: calc(100%/1.06);
		top: calc(100%/1.64);
		left: calc(100%/40.0);
	}
	.item06 {/*point03 水色*/
		width: calc(100%/1.06);
		top: calc(100%/1.24);
		left: calc(100%/40.0);
	}
}

@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; /* 線の位置を指定する */
}