@charset "UTF-8";

/* 共通 */
main {
	overflow: hidden;
	background: #f5f5f5;
	font-family: Meiryo, "メイリオ", sans-serif;
	color: #333;
}

.inner {
	width: calc(100% - 30px);
	margin: 0 auto;
}

.for_sp {
	display: block;
}

.keep_line {
	display: inline-block;
}

/* ヒーローエリア */
.anniv_hero {
	position: relative;
	margin: 25px 0 60px;
	padding: 120px 0 0;
	background: url("../images/anniv_hero_bg_sp.png") top left -40px / 1200px auto repeat-x;
}

.hero_title {
	position: relative;
	width: 90%;
	margin: 0 auto;
}

.hero_title::before {
	content: "";
	position: absolute;
	top: 51%;
	left: 50%;
	width: 80%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: url("../images/anniv_frame.png") center / contain no-repeat;
	animation: hero_frame_rotate 30s linear infinite;
}

.hero_title .hero_title_img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

@keyframes hero_frame_rotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.hero_desc {
	margin-top: clamp(100px, calc(370px - 50vw), 200px);
	font-size: 18px;
	font-weight: bold;
	line-height: 2;
	text-align: center;
}

/* テキストスライドエリア */
.anniv_text_deco {
	width: 100%;
	height: 88.5px;
	overflow: hidden;
	background: url("../images/anniv_text_deco.png") 0 0 / 1525.5px 88.5px repeat-x;
	animation: anniv_text_slide_sp 32s linear infinite;
	position: relative;
	z-index: 2;
}

@keyframes anniv_text_slide_sp {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -1525.5px 0;
  }
}

/* 特典エリア */
.anniv_benefit {
	margin: 75px 0 60px;
	position: relative;
}

.anniv_benefit::before {
	content: "";
	position: absolute;
	left: -15%;
	top: -8%;
	width: 250px;
	height: 250px;
	background: url("../images/frame_left_1.png") center/ contain no-repeat;
	z-index: 1;
	pointer-events: none;
}

.frame_left_2 {
	position: absolute;
	left: -7%;
	bottom: 6%;
	width: 230px;
	height: 230px;
	background: url("../images/frame_left_2.png") center/ contain no-repeat;
	z-index: 1;
	pointer-events: none;
}

.frame_right_1 {
	position: absolute;
	right: -12%;
	top: -5%;
	width: 157px;
	height: 157px;
	background: url("../images/frame_right_1.png") center/ contain no-repeat;
	z-index: 1;
	pointer-events: none;
}

.anniv_benefit::after {
	content: "";
	position: absolute;
	right: -7%;
	bottom: -9%;
	width: 300px;
	height: 300px;
	background: url("../images/frame_right_2.png") center/ contain no-repeat;
	z-index: 1;
	pointer-events: none;
}

.anniv_benefit::before,
.frame_left_2,
.frame_right_1,
.anniv_benefit::after {
	animation: benefit_frame_rotate 30s linear infinite;
	transform-origin: center center;
}

@keyframes benefit_frame_rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.benefit_box {
	position: relative;
	padding: 50px 20px;
	background: #FFF;
	box-shadow: 10px 10px 0 #E6001B;
	z-index: 2;
}

.benefit_title {
	margin: 0 0 25px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}

.benefit_flex {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.benefit_1,
.benefit_2 {
	min-width: 0;
	text-align: center;
}

.benefit_2 {
	margin-top: 20px;
}

.benefit_subtitle {
	width:100%;
}

.benefit_1 .benefit_subtitle {
	position: relative;
	z-index: 2;
}

.tape_img_box {
	width: 73%;
	margin: 0 auto;
	transform: translateY(-16px);
	position: relative;
	z-index: 1;
}

.coupon_img_box {
	width: 73%;
	margin: 0 auto;
	transform: translateY(-20px);
	position: relative;
	z-index: 1;
}

.tape_img,
.coupon_img {
	width: 100%;
	height: auto;
}

.benefit_note,
.mail_settings {
	width: 80%;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	position: relative;
	z-index: 2;
}

.benefit_note::before {
	content: "※";
	position: absolute;
	top: 0;
	left: -18px;
}

.mail_settings::before {
	content: "≫";
	position: absolute;
	top: 0;
	left: -15px;
	color: #E6001B;
}

.mail_settings::after,
.register_btn::after {
	content: "";
	display: inline-block;
	position: relative;
	width: 18px;
	height: 18px;
	margin: 0 4px;
	background: url(../images/ico_blink.png) center / contain no-repeat;
	vertical-align: middle;
}

.benefit_1 .benefit_note {
	transform: translateY(-18px);
}

.benefit_2 .benefit_note {
	transform: translateY(-22px);
}

.mail_settings {
	color:#E6001B;
	text-decoration: underline;
	display: inline-block;
}

.register_btn {
	display: block;
	width: 100%;
	max-width: 350px;
	margin: 25px auto 0;
	padding: 18px 0;
	border-radius: 40px;
	background: linear-gradient(180deg,#F7213B 0%,#FF1732 30%,#E6001B 100%);
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);
}

.register_btn:hover {
	opacity: 0.8;
}

/* メッセージエリア */
.anniv_message {
	margin-bottom: 55px;
	text-align: center;
}

.message_text {
	font-size: 16px;
	line-height: 2.3;
	position:relative;
	z-index: 2;
}

.message_text .keep_line {
	display: inline-block;
	max-width: 500px;
}

.back_to_top {
	display: inline-block;
	margin-top: 50px;
	font-size: 16px;
	text-decoration: underline;
	position: relative;
}

.back_to_top::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -16px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	transform: translateY(-50%) rotate(-45deg);
}

@media screen and (min-width: 600px){
	/* 共通 */
	.inner {
		width: 80%;
	}

	.for_sp {
		display: none;
	}

	/* ヒーローエリア */
	.anniv_hero {
		padding: 170px 0 0;
		background: url("../images/anniv_hero_bg_sp.png") top left -60px / 1750px auto repeat-x;
	}

	.hero_title {
		max-width: 800px;
		width: 100%;
	}

	.hero_desc {
		margin-top: clamp(100px,calc(200px + 100 * ((100vw - 600px) / 359)),200px);
		font-size: 20px;
	}

	/* テキストスライドエリア */
	.anniv_text_deco {
		height: 141.6px;
		overflow: hidden;
		background: url("../images/anniv_text_deco.png") 0 0 / 2440.8px 141.6px repeat-x;
		animation: anniv_text_slide_tb 36s linear infinite;
	}
	
	@keyframes anniv_text_slide_tb {
		from {
			background-position: 0 0;
		}

		to {
			background-position: -2440.8px 0;
		}
	}

	/* 特典エリア */
	.anniv_benefit::before {
		left: 3%;
		top: -7%;
		width: 300px;
		height: 300px;
	}

	.anniv_benefit::after {
		width: 400px;
		height: 400px;
	}

	.frame_right_1 {
	right: 2%;
	top: -6%;
	}

	.benefit_box {
		padding: 60px 40px;
	}

	.register_btn {
		max-width: 460px;
		padding: 20px 0;
	}
}

@media screen and (min-width: 960px){
	/* 共通 */
	.inner {
		width: calc(100% - 40px);
		max-width: 1400px;
	}

	/* ヒーローエリア */
	.anniv_hero {
		padding: 170px 0 0;
		background: url("../images/anniv_hero_bg.png") top left -60px / 1882px auto repeat-x;
	}

	.hero_desc {
		margin-top: 220px;
	}
	
	/* テキストスライドエリア */
	.anniv_text_deco {
		height: 177px;
		overflow: hidden;
		background: url("../images/anniv_text_deco.png") 0 0 / 3051px 177px repeat-x;
		animation: anniv_text_slide 42s linear infinite;
	}
	
	@keyframes anniv_text_slide {
		from {
			background-position: 0 0;
		}
	
		to {
		background-position: -3051px 0;
		}
	}

	/* 特典エリア */
	.anniv_benefit::before {
		top: -13%;
	}

	.anniv_benefit::after {
		bottom: -16%;
	}

	.benefit_title {
		font-size: 28px;
	}

	.benefit_flex {
		flex-direction: row;
		gap: 20px;
	}

	.benefit_1,
	.benefit_2 {
		flex: 1;
	}

	.benefit_2 {
		margin-top: 0px;
	}

	.register_btn {
		max-width: 540px;
		padding: 25px 0;
		font-size: 20px;
		margin: 45px auto 0;
	}

}

@media screen and (min-width: 1080px){
	/* 特典エリア */
	.benefit_box {
		padding: 60px 95px;
	}

	.benefit_flex {
		gap: 40px;
	}

}