@charset "utf-8";

/* Reset */

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: 62.5%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

html {
	width: 100vw;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

body {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100vw;
	height: 100vh;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	background: var(--Color_Y100);
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } }
@-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } }

div {
	position: relative;
}

ol, ul {
	list-style: none;
}

img {
	max-width: 100%;
	vertical-align: bottom;
	object-fit: cover;
}

h2 {
	position: relative;
	margin: 0 0 1vw;
	padding: 0;
	font-family: 'Pacifico', cursive;
	font-family: 'RocknRoll One', sans-serif;
	text-align: center;
	font-size: 4vw;
	font-weight: 400;
	color: #fee;
	user-select: none;
	text-shadow:
		0 -40px 100px,
		0 0 2px,
		0 0 1em #ff4444,
		0 0 0.5em #ff4444,
		0 0 0.1em #ff4444,
		0 0.4vw 0.4vw #000;
	transition: var(--Transition_04);
	-o-transition: var(--Transition_04);
	-ms-transition: var(--Transition_04);
	-moz-transition: var(--Transition_04);
	-webkit-transition: var(--Transition_04);
}








/* ヘッダー */

header {
	flex-basis: 8vh;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3vw 0 0;
	width: 100%;
	height: 8vh;
	background: var(--Color_Y100);
	& > span {
		position: absolute;
		& img {
			width: 100%;
		}
	}
	& > span.logo_flower1 {
		top: 4vw;
		right: 2vw;
		width: 8vw;
		animation: 120s linear infinite logo_turn_right;
	}
	& > span.logo_flower2 {
		top: 3.5vw;
		left: 16vw;
		width: 8vw;
		animation: 120s linear infinite logo_turn_left;
	}
	& > span.logo_flower4 {
		bottom: 2vw;
		left: 6vw;
		width: 6vw;
		animation: 120s linear infinite logo_turn_left;
	}
	& > span.logo_peace2 {
		bottom: 2vw;
		right: 12vw;
		width: 6vw;
		animation: 180s linear infinite logo_turn_left;
	}
	& div {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		& span {
			display: inline-block;
		}
		& span.logo_bar {
			flex-basis: 100%;
			text-align: center;
			& img {
				width: 8vw;
			}
		}
	}
	& div#hlogo {
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		padding: 3vw 6vw;
		background: var(--Color_Y100);
		z-index: 9999;
		border-radius: var(--Border-radius_M);
	}
	& div#logoB {
		& > span {
			width: 6vw;
		}
	}
}

@keyframes logo_turn_right {
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
}

@keyframes logo_turn_left  {
	0%{ transform:rotate(0);}
	100%{ transform:rotate(-360deg); }
}








/* アーティクル */

#main {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.slick-list {
	flex: 1;
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
}

.slick-track {
	flex: 1;
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
}

#main .slider_children {
	flex: 1;
	flex-basis: 100vw;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 0 3vw;
	width: calc( 100vw - 4vw );
	height: 100%;
	border-radius: var(--Border-radius_M);
	overflow: hidden;
}






/* フィルタ */

.backdrop-filter {
	backdrop-filter: blur( 8px );
	-o-backdrop-filter: blur( 8px );
	-moz-backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}








/* フッター */

footer {
	flex-basis: 10vh;
	display: flex;
	width: 100%;
	height: 10vh;
	background-color: var(--Color_Y100);
	overflow: hidden;
	& ul {
		display: flex;
		align-items: center;
		padding-left: 100%;
		list-style: none;
		animation: News 36s linear infinite;
		& li {
			position: relative;
			display: flex;
			flex-direction: row;
			gap: 2vw;
			padding: 0 40vw 2vw 0;
			& figure {
				display: flex;
				align-items: center;
				width: 12vw;
				height: 12vw;
				overflow: hidden;
				& img {
					border-radius: var(--Border-radius_L);
					border: 6px var(--Color_P) solid;
					animation: guruguru 6s linear infinite;
				}
			}
			& > div {
				display: flex;
				flex-direction: column;
				gap: 1vw;
			}
			& p {
				padding: 0;
				font-size: 4.4vw;
				color: var(--Color_G);
				line-height: 1.2;
				font-family: 'RocknRoll One', sans-serif;
				white-space: nowrap;
				& em {
					padding: 0;
					font-size: 4.2vw;
					color: var(--Color_G080);
				}
			}
			& p.title {
				padding: 0;
				font-size: 4.2vw;
				color: var(--Color_P);
			}
		}
	}
}

@keyframes News {
    0% { transform: translateX( 0 ); }
  100% { transform: translateX( -100% ); }
}

@keyframes guruguru {
	0%{ transform:rotate( 0 );}
	100%{ transform:rotate( -360deg ); }
}








/* ーーーーーーーーーーーーーーーーーーーー
  ぽんぽん跳ねるピースマーク
ーーーーーーーーーーーーーーーーーーーー */

#gotoku {
	position: absolute;
	bottom: 10vh;
	left: 0;
	width: 100vw;
	height: 14vh;
	overflow: hidden;
	& img {
		position: absolute;
		width: 8vw;
		animation:
			ugoki-1 4s linear infinite alternate,
			ugoki-2 .4s ease-in infinite alternate,
			ugoki-3 4s linear infinite alternate;
	}
}

@keyframes ugoki-1{
	0% { left: 2vw; }
	100% { left: calc( 100% - 10vw ); }
}
    
@keyframes ugoki-2{
	0% { top: 0%;  }
	100% { top: calc( 100% - 8vw ); }
}

@keyframes ugoki-3 {
	0% { transform: rotate( -90deg );  }
	100% { transform: rotate( 90deg ); }
}








/* ーーーーーーーーーーーーーーーーーーーー
  ぽんぽん跳ねるまいまい
ーーーーーーーーーーーーーーーーーーーー */

#maimai {
	position: absolute;
	bottom: 10vh;
	left: 0;
	width: 100vw;
	height: 14vh;
	overflow: hidden;
	& img {
		position: absolute;
		width: 12vw;
		border: 4px var(--Color_D100) solid;
		border-radius: var(--Border-radius_L);
		/* アニメーションの時間を統一し、タイミングを合わせます */
		animation:
			ugoki-m1 3s linear infinite alternate,
			ugoki-m2 .4s ease-in infinite alternate, /* 跳ねる動きを少し滑らかに */
			ugoki-m3 3s linear infinite alternate;
	}
}

/* 左右の移動 */
@keyframes ugoki-m1{
	0% { left: 2vw; }
	100% { left: calc( 100% - 14vw ); }
}
    
/* 上下のジャンプ（微調整：ease-in-outでより跳ねる感じに） */
@keyframes ugoki-m2{
	0% { top: 0%;  }
	100% { top: calc( 100% - 12vw ); }
}

/* 回転（m1と同じ秒数・同じタイミングで反転するように設定） */
@keyframes ugoki-m3 {
	0% { transform: rotate( -170deg );  }
	100% { transform: rotate( 170deg ); }
}








/* ーーーーーーーーーーーーーーーーーーーー
  ぽんぽん跳ねるちゃんぽん
ーーーーーーーーーーーーーーーーーーーー */

#chanpon {
	position: absolute;
	bottom: 0vh;
	left: 0;
	width: 100vw;
	height: 18.4vh;
	overflow: hidden;
	& img {
		position: absolute;
		width: 12vw;
		border: 4px var(--Color_G100) solid;
		border-radius: var(--Border-radius_L);
		animation:
			ugoki-c1 12s linear infinite alternate,
			ugoki-c2 .4s ease-in infinite alternate,
			ugoki-c3 12s linear infinite alternate;
	}
}

@keyframes ugoki-c1{
	0% { left: 2vw; }
	100% { left: calc( 100% - 14vw ); }
}
    
@keyframes ugoki-c2{
	0% { top: 0%;  }
	100% { top: calc( 10% - 0vw ); }
}

@keyframes ugoki-c3 {
	0% { transform: rotate( -720deg );  }
	100% { transform: rotate( 720deg ); }
}