@charset "utf-8";
/*
/*    CSS(pctb) MENU
*/
body {
	min-width: 1280px;
	overflow-x: auto;
}
/*
*********************************************************************************
/*
/* common
/*
/*******************************************************************************/
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
txt */
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
btn */
.btn_area {
	margin: 30px auto 0;
}
ul.btn_area.btn_col02 {
	width: 600px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
ul.btn_area.btn_col02 > li a {
	margin: 0;
}
ul.btn_area.btn_col02 > li + li a {
	margin-left: auto;
}
ul.btn_area.btn_col02 > li + li {
	margin: 0;
}
.btn_area a {
	padding: 0;
	width: 282px;
	margin: 0 auto;
}
.btn_area a, .movie_dl_area a {
	top: 0;
	transition: 0.5s ease;
}
.btn_area a:hover, .movie_dl_area a:hover {
	transition: 0.5s ease;
	top: 5px;
	opacity: 1;
	box-shadow: 0px 0px 0px #5060b7;
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
li */
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
hash_txt */
.hash_txt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	#textToCopy {
		font-weight: 700;
	}
	#copyButton {
		width: 200px;
		height: 30px;
		margin: 4px 0 0 0;
	}
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
ライトボックス */
/*
*********************************************************************************
/*
/* header
/*
/*******************************************************************************/
header {
	&:before {
		width: 1700px;
	}
	.product {
		padding: 70px 0;
		height: 346px;
	}
	.product a {
		width: 700px;
		display: block;
		margin: 0 auto;
	}
	.site_name {
		background: url(../images/title_bg.png) repeat-x center bottom / auto 100%;
	}
	.name {
		width: 1200px;
	}
	.site_name .inner {
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
}
/*
*********************************************************************************
/*
/* main
/*
/*******************************************************************************/
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
announce */
#announce {
	padding-top: 60px;
	padding-bottom: 100px;
	&:before {
		width: 300px;
		left: calc(50vw - 735px);
	}
	.board {
		padding: 70px;
		background-size: 16px;
		box-shadow: 0 0px 32px rgba(0, 0, 0, 0.16);
	}
	.board:before, .board:after, .board_in:before, .board_in:after {
		width: 34px;
		--announce_pin: 25px;
	}
	.tl {
		font-size: 3rem;
		padding: 18px 20px 23px 20px;
		margin-bottom: 30px;
	}
	.board_txt {
		font-size: 2.8rem;
	}
	.notice {
		margin-top: 50px;
		display: grid;
		grid-template-columns: 60px 1fr;
		gap: 30px;
	}
	.notice > dt {
		font-size: 1.9rem;
		writing-mode: vertical-rl;
		padding: 25px 0 0 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
	}
	.notice > dd {
		font-size: 1.5rem;
		line-height: 1.6;
	}
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
prize */
#prize {
	padding: 150px 0;
	&:before {
		width: 534px;
		top: -45px;
		right: 50px;
		height: 102px;
	}
	.inner {
		position: relative;
	}
	.tl {
		width: 732px;
		top: -223px;
		left: -240px;
	}
	&:after {
		width: 1042px;
		height: 100%;
	}
	.prize_block {
		margin-left: 280px;
		
		.lead {
		margin-bottom: 30px;
		}
	}
	.prize_box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px 20px;
	}
	.prize_box > li {
		font-size: 2.2rem;
		margin-left: 17px;
		padding: 5px 10px 10px 53px;
		line-height: 1.5;
	}
	.prize_box > li:before {
		width: 66px;
		left: -20px;
	}
	.prize_box > li + li {
		margin-top: 0;
	}
	.prize_box > li:before {}
	.day {
		margin-top: 50px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 11px 10px 15px;
	}
	.day > dt {
		font-size: 2.3rem;
	}
	.day > dd {
		font-size: 1.7rem;
		border-left: 1px solid #fff;
		padding-left: 20px;
		margin-left: 20px;
	}
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
howto */
#howto {
	&:before {
		width: 534px;
		top: -45px;
		left: 50px;
		height: 102px;
	}
	&:after {
		width: 476px;
		height: 320px;
		right: -44px;
		top: -24px;
	}
	.howto_in {
		padding: 125px 0 70px;
	}
	.howto_in:before {
		width: 100%;
	}
	.howto_in:after {
		width: 100%;
	}
	.tl {
		width: 510px;
		margin-bottom: 50px;
	}
	.howto_step {
		& > li:before {
			background-image: url(../images/howto_step_t_pc.png);
			height: 76px;
			top: -10px;
		}
		& > li:after {
			background-image: url(../images/howto_step_b_pc.png);
			height: 76px;
		}
		& > li + li {
			margin-top: 25px;
		}
		& > li:last-child:after {
			background-image: url(../images/howto_step_b_last_p.png);
			background-image: url(../images/howto_step_b_last_pc.png);
		}
		& > li > dl:before {
			background-image: url(../images/howto_step_m_pc.png);
			top: 66px;
			height: calc(100% - 142px);
		}
		& > li > dl > dt {
			font-size: 2.4rem;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: 15px;
			clip-path: polygon(100% 0, 655px 50%, 100% 100%, 0% 100%, 25px 50%, 0% 0%);
			margin: 0 260px 30px;
			padding: 14px 35px 17px 35px;
		}
		& > li > dl > dt .num {
			font-size: 1.7rem;
			border-radius: 10px;
			padding: 6px 13px 9px 15px;
			margin-top: 1px;
		}
		& > li > dl > dt .stl {
			margin-top: 0;
			letter-spacing: 0.05em;
		}
		& > li > dl > dd {
			margin: 0 60px;
		}
		& > li > dl .step_in {
			padding-bottom: 90px;
			.dl_tl {
				width: 392px;
				margin: 70px auto 40px;
			}
			.dl_tl:before, .dl_tl:after {
				--bl_tl_border-p: -345px;
				height: 80px;
				width: 349px;
			}
			.movie_dl_method {
				margin-top: 20px;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 27px;
				& > li {
					border-radius: 20px;
					padding: 10px 25px 20px;
				}
				& > li + li {
					margin: 0;
				}
				& > li > dl > dt {
					font-size: 1.7rem;
					padding-bottom: 7px;
					margin-bottom: 13px;
				}
				& > li > dl > dd {
					font-size: 1.5rem;
					line-height: 1.4;
				}
			}
			.movie_dl_area {
				grid-template-columns: repeat(3, 1fr);
				gap: 35px 27px;
				margin-top: 50px;
				
				.name_block {
					flex-direction: inherit;
					/* display: grid; */
					/* grid-template-columns: 1fr 92px; */
					/* align-items: center; */
					margin-top: 15px;
					/* gap: 10px; */
				}
				a {
					border-radius: 50px;
					padding: 0;
					width: 282px;
					margin: 0 auto;
					top: 0;
					transition: 0.5s ease;
				}
				a:hover {
					transition: 0.5s ease;
					top: 5px;
					opacity: 1;
					box-shadow: 0px 0px 0px #5060b7;
				}
				.name_block .size {
					display: inline-block;
				}
				.name_block .name {
					font-size: 1.8rem;
					padding-right: 0.4em;
				}
				.name_block .name_box {
					margin-top: 0px;
				}
			}
			.dl_notice {
				margin-top: 60px;
				display: grid;
				grid-template-columns: 60px 1fr;
				gap: 30px;
				padding: 30px;
			}
			.dl_notice > dt {
				text-align: center;
				font-size: 1.5rem;
				padding: 6px;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				margin-bottom: 0;
				align-content: center;
				line-height: 1.3;
			}
			.dl_notice > dd {
				font-size: 1.5rem;
				line-height: 1.6;
			}
		}
	}
}
/*
*********************************************************************************
/*
/* footer
/*
/*******************************************************************************/
footer {
	padding: 20px 60px;
	.bnr_offical {
		width: 100%;
		margin: 0;
	}
	small {
		text-align: right;
	}
}
/*
*********************************************************************************
/*
/* ライトボックス
/*
/*******************************************************************************/

.mfp-close-btn-in .mfp-close {
	top: -10px;
	right: -10px;
}
.mfp-container {
	padding: 70px;
}
.mfp-content {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	.kiyaku_tl01 {
		font-size: 4rem;
		padding-bottom: 10px;
		margin-bottom: 30px;
	}
	.kiyaku_tl02 {
		font-size: 2.5rem;
		padding-bottom: 13px;
		margin-bottom: 30px;
		margin-top: 50px;
	}
}
.f_inner {
	display: grid;
	grid-template-columns: 290px 1fr;
	gap: 20px;
	align-items: end;
	justify-content: space-between;
}