@charset "UTF-8";
/* CSS Document */

	body {
		font-family:sans-serif;
	}
	
	#warpper {
		max-width:800px;
		container-type:inline-size;
	}

	#image {
			max-width: 800px !important;
	}

	.hidden-txt{
		height:0;
	}
	
	@media screen and (min-width: 769px) {
	
		#close p {
			margin: 20px 0;
			font-size: 1.4em;
			line-height: 1.4em;
		}
		
	}
	
	.event__desc {
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
		text-align: justify;
		display: flex;
		flex-direction: column;
		gap: 1em;
		padding: 1.5em;
		overflow: hidden;
		container-type: inline-size;
		box-shadow: 0 0 0 0.3cqw #ff0 inset;
		border: solid #fff;
		box-sizing: border-box;
		border-width: 0 0.9cqw 0.9cqw 0.9cqw;
		background: url(../img/ranbusim_deco_bg.png) repeat 50% 50% / 60px auto;
	}

	@media screen and (max-width:767px) {
		.event__desc {
			padding: 1em;
		}
	}

	.event__desc p {
		font-size: 16px;
		line-height: 1.8;
	}

	.event__desc a.luster {
		position:relative;
		overflow: hidden;
	}

	.event__desc a.luster::before {
		content: '';
		display: block;
		width: 30px;
		height: 100%;
		position: absolute;
		top: -50%;
		left: 0;
		background-color: #fff;
		opacity: 0;
		mix-blend-mode: hard-light;
		transform: rotate(45deg);
		animation: reflect 2s ease-in-out infinite;
		z-index: 2;
		overflow: hidden;
		pointer-events: none;
	}

	@keyframes reflect {
		0% { transform: scale(0) rotate(45deg); opacity: 0; }
		80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
		81% { transform: scale(4) rotate(45deg); opacity: 1; }
		100% { transform: scale(50) rotate(45deg); opacity: 0; }
	}
	
	.tarekomi {
		border: 8px double #6c6c6c;
		border-radius: 0;
		padding: 0.8em;
		background: #000;
	}	

	.tarekomi__ttl {
		font-size:28px;
		text-align: center;
		align-items: center;
		font-weight: bolder;
		color: #ff0;
		display: flex;
		max-width:280px;
		width: fit-content;
		margin: 0.5em auto 1em;
		gap: 10px;
		border-top:2px solid #ff0;
		border-bottom:2px solid #ff0;
	}
	.tarekomi__ttl img {
		width:26px;
		height:26px;
		vertical-align: middle;
	}


	.tarekomi__ttl::before,
	.tarekomi__ttl::after{
		content:"";
		background:url("../img/denwa_animation.gif") no-repeat 50% 50% / 100% auto;
		width:30px;
		height:30px;
	}


	/* 左へ流れる文字 */
	.marquee {
		padding-left: 100%;
		width: fit-content;
		white-space: nowrap;
		animation: marquee-left 15s steps(100, end) infinite;
		margin-bottom:10px;
	}

	.marquee-rand-1 {
		animation-delay: 0s;
	}

	.marquee-rand-2 {
		animation-delay: 1s;
	}

	.marquee-rand-3 {
		animation-delay: 2s;
	}

	.marquee-rand-4 {
		animation-delay: 3s;
	}

	.marquee-rand-5 {
		animation-delay: 4s;
	}

	.marquee-rand-6 {
		animation-delay: 5s;
	}

	.marquee-rand-7 {
		animation-delay: 6s;
	}

	.marquee-rand-8 {
		animation-delay: 7s;
	}

	.marquee-rand-9 {
		animation-delay: 8s;
	}

	.marquee-rand-10 {
		animation-delay: 9s;
	}

	.marquee-rand-11 {
		animation-delay: 10s;
	}

	.marquee-rand-12 {
		animation-delay: 11s;
	}

	.marquee-rand-13 {
		animation-delay: 12s;
	}

	.marquee-rand-14 {
		animation-delay: 13s;
	}

	.marquee-rand-15 {
		animation-delay: 14s;
	}

	.marquee-rand-16 {
		animation-delay: 15s;
	}

	.marquee-rand-17 {
		animation-delay: 16s;
	}

	.marquee-rand-18 {
		animation-delay: 17s;
	}

	.marquee-rand-19 {
		animation-delay: 18s;
	}

	.marquee-rand-20 {
		animation-delay: 19s;
	}

	.marquee-box:nth-last-child {
		margin-bottom:0;
	}

	.marquee-box {
		margin-inline: auto;
		overflow: clip;
		font-weight: bold;
	}

	@keyframes marquee-left {
		100% {
			transform: translateX(-100%);
		}
	}