@charset "utf-8";
/*
/*    CSS MENU
*/
/*
*********************************************************************************
/*
/* common
/*
/*******************************************************************************/
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
txt */
.line {
	display: inline;
	padding: 0 0.1em;
	margin: 0 0.1em;
	background-image: linear-gradient(to bottom, transparent 60%, #ffff01 60%, #ffff01 90%, transparent 90%);
}
.line.line_first {
	margin-left: 0;
}
.line.line_last {
	margin-right: 0;
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
btn */
.btn_area {
	margin: 5vw 15vw 0;
}
.btn_area a {
	display: block;
	background: var(--pink);
	padding: 1vw 0;
	border-radius: 10vw;
	border: 1px solid #000000;
	box-shadow: 3px 3px 0px #5060b7;
	top: 0;
	transition: 0.5s ease;
	position: relative;
}
.btn_area > li + li {
	margin-top: 3vw;
}
a.btn_kiyaku {
	background: #fff;
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
li */
.li_tm > li + li {
	margin-top:0.5em;
}
.li_num_half_kakko > li {
	counter-increment: li_num_half_kakko;
	padding-left: 1.2em;
	position: relative;
}
.li_num_half_kakko > li:before {
	content: counter(li_num_half_kakko) ") ";
	position: absolute;
	top: 0;
	left: 0;
}
.li_dot > li {
	position: relative;
	padding-left: 1.2em;
}
.li_dot > li:before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}

.li_hyphen > li {
	position: relative;
	padding-left: 0.8em;
}
.li_hyphen > li:before {
	content: "-";
	position: absolute;
	top: 0;
	left: 0;
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
hash_txt */
.hash_txt {
	#textToCopy {
		font-weight: 700;
	}
	#copyButton {
		/* 初期状態のボタン（画像表示） */
		width: 40vw; /* 画像の幅に合わせて調整 */
		height: 8vw; /* 画像の高さに合わせて調整 */
		background: url("../images/btn_hash.png") no-repeat center center / contain;
		cursor: pointer;
		text-indent: -9999px;
		overflow: hidden;
		/* コピー後の一時的なスタイル（テキスト表示用） */
		transition: background-image 0.1s ease, background-color 0.1s ease, color 0.1s ease;
		font-size: 1.3rem;
		color: transparent; /* 通常時はテキストを透明に */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #0b1b76;
		border-radius: 10vw;
		margin-top: 3vw;
	}
	/* コピー成功時に適用されるスタイル */
	#copyButton.copied {
		background-image: none; /* 画像を非表示に */
		background-color: #0b1b76; /* コピーしました、とわかる背景色 */
		color: white; /* テキストを表示 */
		text-indent: 0; /* テキスト表示を有効に */
	}
	#copyButton:hover:not(.copied) {
		opacity: 0.8; /* ホバー時の視覚的フィードバック（画像ボタンの場合） */
	}
	#copyButton:active:not(.copied) {
		opacity: 0.6; /* アクティブ時の視覚的フィードバック */
	}
}
/*
*********************************************************************************
/*
/* header
/*
/*******************************************************************************/
header {
	position: relative;
	overflow: hidden;
	&:before {
		position: absolute;
		content: "";
		z-index: 1;
		background: url(../images/header_bg.png) no-repeat center top / 100% auto;
		width: 110%;
		height: 100%;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	& > * {
		position: relative;
		z-index: 10;
	}
	.product {
		padding: 5vw 10vw 0;
	}
	.site_name .inner {
		width: 100vw;
		margin: 0;
	}
}
/*
*********************************************************************************
/*
/* main
/*
/*******************************************************************************/
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
announce */
#announce {
	position: relative;
	padding-top: 7vw;
	padding-bottom: 27vw;
	&:before {
		position: absolute;
		content: "";
		background: url(../images/announce_bg.png) no-repeat center top / contain;
		width: 50%;
		aspect-ratio: 1/1;
		top: 0;
		left: -16vw;
	}
	& > * {
		position: relative;
		z-index: 10;
	}
	.board {
		background: #fff url(../images/announce_masu.png) repeat center top / 16px;
		padding: 8vw;
		position: relative;
		box-shadow: 0 0px 5vw rgba(0, 0, 0, 0.16);
	}
	.board:before, .board:after, .board_in:before, .board_in:after {
		position: absolute;
		content: "";
		background: url(../images/announce_pin.webp) no-repeat center center / contain;
		width: 4vw;
		aspect-ratio: 1/1;
		--announce_pin: 3vw;
	}
	.board:before {
		top: var(--announce_pin);
		left: var(--announce_pin);
	}
	.board:after {
		top: var(--announce_pin);
		right: var(--announce_pin);
	}
	.board_in:before {
		bottom: var(--announce_pin);
		left: var(--announce_pin);
	}
	.board_in:after {
		bottom: var(--announce_pin);
		right: var(--announce_pin);
	}
	.tl {
		background: var(--pink);
		color: #fff;
		text-align: center;
		line-height: 1.3;
		font-size: 2.2rem;
		padding: 3vw;
		margin-bottom: 4vw;
	}
	.board_txt {
		font-size: 2rem;
		text-align: center;
		line-height: 1.4;
	}
	.board_txt > p + p {
		margin-top: 0.7em;
	}
	.notice {
		margin-top: 7vw;
	}
	.notice > dt {
		border: 1px solid var(--color);
		padding: 0.7vw 3vw 1.3vw 3vw;
		margin-bottom: 2.5vw;
	}
	.notice > dd {
		font-size: 1.4rem;
		letter-spacing: 0;
		line-height: 1.4;
	}
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
prize */
#prize {
	position: relative;
	background: var(--lpink);
	padding: 18vw 0 20vw;
	&:before {
		position: absolute;
		content: "";
		background: url(../images/prize_en.png) no-repeat right top / contain;
		top: -5vw;
		right: 1vw;
		width: 60vw;
		height: 14vw;
		z-index: 11;
	}
	&:after {
		position: absolute;
		content: "";
		background: url(../images/prize_bg.png) no-repeat left top / contain;
		width: 100vw;
		aspect-ratio: 1/1;
		z-index: 2;
		top: 0;
		left: 0;
	}
	.tl {
		position: absolute;
		top: -25vw;
		left: -15vw;
		width: 70vw;
		z-index: 10;
	}
	.prize_block {
		position: relative;
		z-index: 20;
		color: #fff;
		
		
		.lead {
			text-align: center;
			color: #fff;
			font-size: 2.7rem;
			margin-bottom: 4vw;
		}
	}

	.prize_box > li {
		position: relative;
		background: #fff;
		margin-left: 5vw;
		font-size: 2rem;
		padding: 2vw 1vw 2vw 8.4vw;
		border-radius: 20vw;
		color: var(--color);
	}
	.prize_box > li + li {
		margin-top: 2vw;
	}
	.prize_box > li:before {
		position: absolute;
		content: "";
		background: url(../images/prize_icon.png) no-repeat center center / contain;
		width: 12vw;
		aspect-ratio: 1/1;
		top: 50%;
		left: -5vw;
		transform: translate(0%, -50%);
	}
	.prize_box > li .name {
		display: block;
	}
	.prize_box > li .num {
		font-size: 1.45rem;
		letter-spacing:0;
		display: block;
	}
	.day {
		margin-top: 6vw;
		border: 1px solid #fff;
		color: #fff;
		text-align: center;
		line-height: 1.4;
		padding: 2vw 1vw 2.4vw 1vw;
	}
	.day > dt {
		font-size: 2.5rem;
	}
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
howto */
#howto {
	position: relative;
	&:before {
		position: absolute;
		content: "";
		background: url(../images/howto_en.png) no-repeat left top / contain;
		top: -5vw;
		left: 1vw;
		width: 60vw;
		height: 14vw;
		z-index: 11;
	}
	&:after {
		position: absolute;
		content: "";
		background: url(../images/howto_blood.png) no-repeat left top / contain;
		top: -2.3vw;
		right: -4vw;
		width: 60vw;
		z-index: 10;
		aspect-ratio: 1/1;
	}
	.howto_in {
		padding: 18vw 0;
	}
	.howto_in:before {
		position: absolute;
		content: "";
		z-index: 20;
		background: url(../images/howto_bg_t.webp) no-repeat right top / contain;
		width: 180vw;
		aspect-ratio: 1/1;
		top: 0;
		right: 0;
		z-index: 1;
	}
	.howto_in:after {
		position: absolute;
		content: "";
		z-index: 20;
		background: url(../images/howto_bg_b.webp) no-repeat left bottom / contain;
		width: 180vw;
		aspect-ratio: 1 / 1;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	.howto_in > * {
		position: relative;
		z-index: 30;
	}
	.tl {
		width: 64vw;
		margin: 0 auto 7vw;
	}
	.howto_step {
		& > li {
			position: relative;
		}
		& > li:before {
			position: absolute;
			content: "";
			width: 100%;
			height: 10vw;
			top: 1vw;
			background: url(../images/howto_step_t_sp.png) no-repeat left bottom / contain;
			left: 0;
		}
		& > li:after {
			position: absolute;
			content: "";
			width: 100%;
			height: 10vw;
			bottom: 0;
			background: url(../images/howto_step_b_sp.png) no-repeat left top / contain;
			left: 0;
		}
		& > li + li {
			margin-top: 2vw;
		}
		& > li:last-child:after {
			background-image: url(../images/howto_step_b_last_sp.png);
		}
		& > li > dl {
			position: relative;
			z-index: 30;
		}
		& > li > dl:before {
			position: absolute;
			content: "";
			top: 11vw;
			width: 100%;
			height: calc(100% - 21vw);
			z-index: 2;
			left: 0;
			background: url(../images/howto_step_m_sp.png) repeat-y left top / contain;
		}
		& > li > dl > dt {
			clip-path: polygon(100% 0, 66vw 50%, 100% 100%, 0% 100%, 2vw 50%, 0% 0%);
			background: var(--lpink);
			color: #fff;
			text-align: center;
			padding: 2vw;
			margin: 0 11vw 4vw;
			font-size: 1.9rem;
			z-index: 10;
			position: relative;
		}
		& > li > dl > dt .num {
			background: #fff;
			color: var(--lpink);
			font-weight: 600;
			font-size: 1.5rem;
			line-height: 1;
			display: inline-block;
			padding: 1vw 1vw 1.4vw 1.3vw;
			border-radius: 1vw;
		}
		& > li > dl > dt .stl {
			display: block;
			margin-top: 1vw;
			line-height: 1.4;
		}
		& > li > dl > dd {
			position: relative;
			margin: 0 6vw;
			text-align: center;
		}
		& > li > dl .step_in {
			position: relative;
			z-index: 3;
			padding-bottom: 15vw;
			.dl_tl {
				width: 55vw;
				margin: 8vw auto 5vw;
				position: relative;
			}
			.dl_tl:before, .dl_tl:after {
				position: absolute;
				content: "";
				background: url(../images/howto_step_dl_tlbg.png) repeat-x center center / contain;
				width: 11vw;
				height: 11.225vw;
				top: 50%;
				transform: translate(0%, -50%);
				--bl_tl_border-p: -11vw;
			}
			.dl_tl:before {
				left: var(--bl_tl_border-p);
			}
			.dl_tl:after {
				right: var(--bl_tl_border-p);
			}
			.movie_dl_method {
				margin-top: 5vw;
				& > li {
					background: #ffeef3;
					border-radius: 4vw;
					padding: 3vw 4vw;
				}
				& > li + li {
					margin-top: 3vw;
				}
				& > li > dl > dt {
					font-weight: 700;
					border-bottom: 1px solid var(--color);
					padding-bottom: 2vw;
					letter-spacing: 0.2em;
					margin-bottom: 3vw;
				}
				& > li > dl > dd {
					text-align: left;
					font-size: 1.5rem;
					letter-spacing: 0.025em;
				}
				& > li > dl > dd > p + p {
					margin-top: 0.5em;
				}
			}
			.movie_dl_area {
				margin-top: 8vw;
				text-align: left;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 6vw 3vw;
				.name_block {
					margin-top: 2vw;
					line-height: 1.3;
					display: flex;
					flex-direction: column-reverse;
				}
				a {
					display: block;
					background: var(--pink);
					padding: 1vw 0;
					border-radius: 10vw;
					border: 1px solid #000000;
					box-shadow: 3px 3px 0px #5060b7;
					top: 0;
					transition: 0.5s ease;
					position: relative;
				}
				.name_block .size {
					font-size: 1.3rem;
					display: block;
				}
				.name_block .name {
					font-size: 1.6rem;
					letter-spacing: 0;
				}
				.name_block .name_box {
					margin-top: 2vw;
				}
			}
		}
		.dl_notice {
			background: #f2f2f2;
			margin-top: 7vw;
			padding: 4vw;
			text-align: left;
		}
		.dl_notice > dt {
			border: 1px solid var(--color);
			padding: 0.7vw 3vw 1.3vw 3vw;
			margin-bottom: 2.5vw;
		}
		.dl_notice > dd {
			font-size: 1.4rem;
			letter-spacing: 0;
			line-height: 1.4;
		}
		.hash_txt .txtin {
			font-size: 2.2rem;
		}
	}
}
/*
*********************************************************************************
/*
/* footer
/*
/*******************************************************************************/
footer {
	background: linear-gradient(to bottom, rgba(93, 110, 180, 1) 0%, rgba(137, 223, 239, 1) 100%);
	padding: 7vw 5vw;
	.bnr_offical {
		width: 60vw;
		margin: 0 auto 5vw;
	}
	small {
		display: block;
		font-size: 1.2rem;
		text-align: center;
	}
}
/*
*********************************************************************************
/*
/* ライトボックス
/*
/*******************************************************************************/
/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
	opacity: .8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}
/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}
.mfp-bg {
	background: #0b1b76;
	opacity: 1 !important;
	position: fixed !important;
}
.mfp-close-btn-in .mfp-close {
	background: var(--pink);
	border-radius: 50%;
	color: #fff;
	opacity: 1;
	line-height: 1;
	letter-spacing: 0;
	top: -2vw;
	right: -2vw;
}
.mfp-container {
	padding: 5vw;
}
.kiyaku_area {
	background: #fff;
	padding: 6vw;
	margin-bottom: 5vw;
	.kiyaku_tl01 {
		font-size: 3rem;
		border-bottom: 2px solid var(--color);
		padding-bottom: 2vw;
		margin-bottom: 3vw;
	}
	.kiyaku_tl02 {
		font-size: 2rem;
		margin-top: 6vw;
		margin-bottom: 3vw;
		border-bottom: 1px solid var(--color);
		padding-bottom: 1vw;
	}
	.txt {
		font-size: 1.6rem;
		letter-spacing: 0;
	}
	.li_dot > li + li {
		margin-top: 0.8em;
	}
	strong {
		font-weight: 700;
		font-size: 110%;
	}
}