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


@media screen and (min-width: 531px) {
	
	
	.br2 { display: none; }

	/* 流れるロゴ */
	.marquee {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		white-space: nowrap;
		z-index: -1;
		overflow: hidden;
	}
	.marquee-inner {
		display: inline-block;
		animation: scroll 120s linear infinite;
	}
	.marquee-text {
		display: inline-block;
		padding-right: 5vw;
		color: #f6f4f1;
		font-size: 20vw;
		font-weight: 900;
	}
	@keyframes scroll {
		0%   { transform: translateX(0); }
		100% { transform: translateX(-100%); }
	}
	
	
	/* サイドロゴ */
	.side-logo {
		position: fixed;
		top: 50%;
		left: calc(50% - 530px/2 - 180px);
		transform: translateY(-50%);
		width: 150px;
		z-index: 900;
	}
	.side-logo img {
		display: block;
		width: 100%;
	}
	
	
	/* インジケーター */
	.scroll-indicator {
		position: fixed;
		top: 50%;
		right: calc(50% - 530px/2 - 30px);
		width: 1px;
		height: 300px;
		transform: translateY(-50%);
		z-index: 900;
	}
	.scroll-indicator .track {
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 50%;
		width: 1px;
		background-color: #afa373;
	}
	.scroll-indicator .dot {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: #afa373;
	}
	
	
	#wrap {
		border-left: 1px solid #afa373;
		border-right: 1px solid #afa373;
	}
	
	
}


@media (max-width: 530px) {
	.marquee,.side-logo,.scroll-indicator { display: none; }
	#wrap { border: none; }
	.sns-card { margin: 0 3em; }
	.br { display: none; }
}