@charset "UTF-8";
/* =========================================================

会員ランク別ボーナスキャンペーン

========================================================= */
#preview-rank-open {
	background: #f3f8fc;
	color: #333;
	margin: 0 auto;
	max-width: 755px;
	/* 改行指定を初期化（MD） */
	width: 100%;
	word-wrap: normal;
}

#preview-rank-open * {
	box-sizing: border-box;
	font-family: "YakuHanJPs_Noto", "Roboto", "Noto Sans JP", sans-serif;
}

#preview-rank-open *::before,
#preview-rank-open *::after {
	box-sizing: border-box;
}

#preview-rank-open {
	em {
		font-style: normal;
	}

	a {
		text-decoration: none;
	}

	img {
		max-width: 100%;
		vertical-align: bottom;
	}

	table {
		border-collapse: collapse;
	}
}
/* ヘッダー
------------------------------------ */
#preview-rank-open {
	.header {
		display: block;
		height: auto;
		max-width: 960px;
		width: 100%;
	}

	.header img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 100%;
		width: auto;
	}
}
/* ナビ部分
------------------------------------ */
#preview-rank-open {
	.ancnav {
		background: #fff;
		display: grid;
		grid-column-gap: 1.3%;
		grid-row-gap: 5%;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		max-width: 960px;
		padding: 1.5% 0 0;
		width: auto;
	}

	.ancnav a {
		background: #9fdef8;
		color: #333;
		display: grid;
		font-size: min(3.1vw, 26.3px);
		font-weight: 700;
		padding: 7% 3% 7% 8%;
		position: relative;
	}

	.ancnav a:before {
		border-bottom: 0;
		border-left: 11.5px solid transparent;
		border-right: 11.5px solid transparent;
		border-style: solid;
		border-top: 19px solid #333;
		content: "";
		height: 0;
		position: absolute;
		right: 3%;
		top: 40%;
		width: 0;
	}
}
@media screen and (max-width: 640px) {
	#preview-rank-open {
		.ancnav a:before {
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 7px solid #333;
		}
	}
}
/* セクション部分
------------------------------------ */
#preview-rank-open {
	.sec {
		background: #f3f8fc;
		padding: 0 0 5%;
	}

	.sec_bottom {
		padding-bottom: 20%;
	}

	.sec_ttl_wrap {
		position: relative;
	}

	.sec_ttl {
		font-size: min(5.6vw, 36px);
		font-weight: 700;
		letter-spacing: 0.05em;
		padding: 15% 0 0 0;
		text-align: center;
	}

	.sec_ttl.sec_ttl_mark {
		padding: 8% 0% 0 0;
	}
}
@media screen and (max-width: 640px) {
	#preview-rank-open {
		.sec_ttl.sec_ttl_mark {
			padding: 8% 6% 0 0;
		}
	}
}

#preview-rank-open {
	.sec_ttl_wrap img {
		display: block;
		max-width: 100%;
		position: absolute;
		right: 6%;
		top: 20%;
		width: 20%;
	}

	.sec_text {
		font-size: min(4.2vw, 30px);
		font-weight: 700;
		letter-spacing: 0.1em;
		margin: 5% 0 0;
		text-align: center;
	}

	.sec_text+.sec_text {
		line-height: 1.3;
		margin: 1% 0 0;
	}

	.sec_text span {
		color: #ec2868;
		letter-spacing: 0.17em;
		font-size: min(5vw, 40px);
	}

	.sec_subtext {
		font-size: min(3.2vw, 25px);
		font-weight: 700;
		letter-spacing: 0.1em;
		margin: 5% 0 0;
		text-align: center;
	}

	.sec_subtext em {
		font-size: min(4.2vw, 32px);
	}

	.sec_subtext span {
		color: #ec2868;
	}

	.sec_img {
		background: #fff;
		margin: 8% auto 0;
		padding: 0 0 8%;
		width: 90%;
	}

	.sec_img img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		width: auto;
	}

	.sec_note {
		color: #e00000;
		font-size: min(3.3vw, 16px);
		font-weight: 500;
		letter-spacing: 0.1em;
		margin: 5% auto 0;
		width: 80%;
	}

	.sec_note a{
		color: #e00000;
		border-bottom: 1px solid #e00000;
	}

	.btn_type01 {
		display: block;
		margin: 5% auto 0;
		width: 80%;
		opacity: 1;
	}
	.btn_type01:hover {
		opacity: .6;
	}
	.btn_type01 {
		transition: all .3s;
		cursor: pointer;
	}

	.sec_news {
		background: #fff;
		font-size: min(3.3vw, 25px);
		font-weight: 500;
		letter-spacing: 0.15em;
		margin: 0 auto;
		padding: 10% 0;
		text-align: center;
		width: 90%;
	}

	.sec_news span {
		font-size: min(3.3vw, 40px);
		font-weight: 700;
	}

	.sec_btn {
		background: #ffe346;
		box-shadow: 2px 1px 0 2px #cbcfd2;
		color: #333;
		display: block;
		font-size: min(3.3vw, 26px);
		font-weight: 500;
		letter-spacing: 0.05em;
		line-height: 1.8;
		margin: 8% auto 0;
		padding: 3% 0;
		text-align: center;
		width: 90%;
	}

	.sec_btn.rank1 {
		background: #11bca1;
		color: #fff;
		margin: 10% auto 0;
		padding: 3% 0;
		width: 80%;
	}

	.sec_btn.rank2 {
		background: #11bca1;
		color: #fff;
		margin: 15% auto 0;
		padding: 5% 0;
		width: 70%;
	}

	.sec_btn span {
		background: #ffe346;
		font-size: min(4vw, 40px);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}

	.sec_step_wrap {
		display: grid;
		grid-column-gap: 2.5%;
		grid-row-gap: 2%;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		margin: 10% auto 0;
		max-width: 960px;
		width: 90%;
	}

	.sec_step {
		background: #fff;
		margin: 0;
		padding: 0 0 10%;
	}

	.sec_step_btn {
		align-items: center;
		background: #ffe346;
		color: #333;
		display: flex;
		font-size: min(3.1vw, 24px);
		font-weight: 500;
		justify-content: center;
		letter-spacing: 0.15em;
		line-height: 1.3;
		margin: 0 auto 0;
		padding: 0;
		text-align: center;
		width: 90%;
	}

	.sec_step_btn span {
		background: #ffe346;
		color: #333;
		height: 100px;
		display: flex;
		font-size: min(4.5vw, 32px);
		font-weight: 700;
		letter-spacing: .15em;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.sec_step_btn span::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-top: 1.7px solid #333;
		border-right: 1.7px solid #333;
		position: absolute;
		right: 5.5%;
		top: 45%;
		transform: rotate(45deg);
	}

	.sec_step_btn:hover {
		box-shadow: 2px 1px 0 1px #cbcfd2;
	}

	.sec_step_cont {
		background: #fff;
		margin: 0;
	}

	.sec_step_text {
		background: #fff;
		font-size: min(2.2vw, 16px);
		font-weight: 500;
		line-height: 1.5;
		margin: 5% auto 0;
		width: 90%;
	}

	.sec_step_text a {
		color: #333;
		text-decoration: underline;
	}
}
@media screen and (max-width: 640px) {
	#preview-rank-open {
		.sec_btn {
			box-shadow: 1px 1px 0 1px #cbcfd2;
		}
		.sec_step_btn {
			box-shadow: 1px 1px 0 0 #cbcfd2;
		}
	}
}
/* ポイント部分
------------------------------------ */
#preview-rank-open {
	.point_wrap {
		margin: 10% 0 0;
		position: relative;
	}

	.point_ttl {
		margin: 8% auto 0;
		width: 28%;
	}
	.point_ttl.mt0 {
		margin: 0 auto ;
		width: 28%;
	}
	.point_ttl img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		width: auto;
	}

	.point_icon {
		position: absolute;
		width: 15%;
	}

	.point_icon_pos01 {
		right: 9%;
		top: 5%;
	}

	.point_icon_pos02 {
		left: 5%;
		top: 7%;
	}

	.point_icon_pos03 {
		right: 6%;
		top: 20%;
	}

	.point_text {
		font-size: min(4.2vw, 21px);
		font-weight: 700;
		letter-spacing: 0.15em;
		line-height: 1.7;
		margin: 5% auto 0;
		text-align: center;
	}

	.point_text span {
		font-size: min(3.8vw, 38px);
		font-weight: 700;
	}

	.point_subtext {
		font-size: min(3.8vw, 28px);
		font-weight: 700;
		margin: 2% auto 0;
		text-align: center;
	}

	.point_text span.yellow {
		background: #fbfe00;
		font-size: min(5.3vw, 27px);
		font-weight: 700;
	}

	.point_note {
		font-size: min(2.9vw, 14px);
		font-weight: 700;
		letter-spacing: 0.15em;
		line-height: 1.7;
		margin: 5% auto 0;
		text-align: center;
	}

	.point_img {
		display: block;
		margin: 2% auto 0;
		width: 90%;
	}

	.point_note {
		font-size: min(2.6vw, 12px);
		font-weight: 500;
		text-align: center;
	}
}
/* ポイント部分 商品
------------------------------------ */
#preview-rank-open {
	.point_sample {
		margin: 5% auto 0;
		width: 90%;
	}
}
/* ポイント部分 商品
------------------------------------ */
#preview-rank-open {
	.caution {
		margin: 15% auto 0;
		width: 90%;
	}

	.caution_ttl {
		font-size: min(3.2vw, 32px);
		font-weight: 700;
		letter-spacing: 0.1em;
		margin: 10% 0 0;
	}

	.caution_li {
		font-size: min(2.8vw, 24px);
		margin: 2% 0 0;
	}

	.caution_li li {
		font-weight: 500;
		line-height: 2.5;
		padding-left: 1.4em;
		text-indent: -1em;
	}

	.caution_li li a {
		color: #11bca1;
		text-decoration: underline;
		text-underline-offset: 5px;
	}
}
/* バナーエリア
------------------------------------ */
#preview-rank-open {
	.bnr_ttl_wrap {
		font-weight: 500;
		line-height: 2.5;
		padding-left: 1.4em;
		text-indent: -1em;
	}

	.bnr_ttl {
		font-size: min(5.6vw, 36px);
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.5;
		margin: 10% 0 0;
		text-align: center;
	}

	.bnr_wrap {
		display: block;
		margin: 3% auto 0;
		width: 90%;
	}

	.bnr_text {
		font-size: min(3.8vw, 28px);
		font-weight: 700;
		line-height: 1.7;
		margin: 0 auto;
		text-align: center;
	}

	.bnr_wrap a {
		display: block;
		margin: 5% auto 0;
		width: auto;
	}

	.bnr_wrap a + a {
		margin: 7% auto 0;
	}

	.bnr_box {
		display: flex;
		justify-content: space-between;
	}

	.bnr_box a {
		margin: 0;
	}

	.bnr_box a + a {
		margin: 0;
	}
}
/* ボタンエリア
------------------------------------ */
#preview-rank-open {
	.btn_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 6% auto 0;
		width: 90%;
	}

	.btn_list li {
		align-items: center;
		background: #fff;
		border: solid #333 1px;
		display: flex;
		height: auto;
		width: 32.3%;
		justify-content: center;
	}

	.btn_list li a {
		background: #fff;
		color: #333;
		display: block;
		font-size: min(4vw, 30px);
		font-weight: 700;
		padding: 10% 0;
		width: 100%;
		text-align: center;
	}
}
/* フッター調整 */
.search_type {
	margin-top: 0;
}

 .mb110 {
	margin-bottom: 110px !important;
}

 .mt10 {
	margin-top: 10px !important;
}

 .mt20 {
	margin-top: 20px !important;
}

 .mt30 {
	margin-top: 30px !important;
}

 .mt40 {
	margin-top: 40px !important;
}

 .mt50 {
	margin-top: 50px !important;
}

 .mt60 {
	margin-top: 60px !important;
}

 .mt70 {
	margin-top: 70px !important;
}

 .mt80 {
	margin-top: 80px !important;
}

 .mt90 {
	margin-top: 90px !important;
}

 .mt100 {
	margin-top: 100px !important;
}

@media screen and (max-width: 960px) {
	 .s-mt0 {
		margin-top: 0 !important;
	}
	 .s-mt1 {
		margin-top: 0.25rem !important;
	}
	 .s-mt2 {
		margin-top: 0.5rem !important;
	}
	 .s-mt3 {
		margin-top: 0.75rem !important;
	}
	 .s-mt4 {
		margin-top: 1rem !important;
	}
	 .s-mt5 {
		margin-top: 1.25rem !important;
	}
	 .s-mt6 {
		margin-top: 1.5rem !important;
	}
	 .s-mt8 {
		margin-top: 2rem !important;
	}
	 .s-mt10 {
		margin-top: 2.5rem !important;
	}
	 .s-mt12 {
		margin-top: 3rem !important;
	}
	 .s-mt14 {
		margin-top: 3.5rem !important;
	}
	 .s-mt16 {
		margin-top: 4rem !important;
	}
	 .s-mt18 {
		margin-top: 4.5rem !important;
	}
	 .s-mt20 {
		margin-top: 5rem !important;
	}
	 .s-mt22 {
		margin-top: 5.5rem !important;
	}
	 .s-mt24 {
		margin-top: 6rem !important;
	}
	 .pt10 {
		padding-top: 10px !important;
	}
	 .pt15 {
		padding-top: 15px !important;
	}
	 .pt20 {
		padding-top: 20px !important;
	}
	 .pt30 {
		padding-top: 30px !important;
	}
	 .pt40 {
		padding-top: 40px !important;
	}
	 .mb80 {
		margin-bottom: 80px !important;
	}
	 .mb100 {
		margin-bottom: 100px !important;
	}
}

#preview-rank-open {
	.btn_check a {
		background: #ffe346;
		box-shadow: 2px 1px 0 1px #cbcfd2;
		color: #333;
		display: block;
		font-size: min(8vw, 80px);
		font-weight: 500;
		letter-spacing: .15em;
		padding: 3% 0;
		position: relative;
		text-align: center;
	}

	.btn_check a::before {
		border: 0.2em solid transparent;
		border-left: 0.3em solid #333;
		content: "";
		height: 0;
		position: absolute;
		right: 32%;
		top: 43%;
		width: 0;
	}

	.btn_result_wrap {
		margin: 0 auto;
		max-width: 650px;
		width: 80.15%;
	}

	.btn_result_list {
		font-size: 0;
		letter-spacing: 0;
		padding: 0;
	}

	.btn_result_list li {
		display: inline-block;
		margin-right: 1%;
		width: 24.15%;
	}

	.btn_result_list li:last-child {
		margin-right: 0;
	}

	.btn_result_list li img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 100%;
		width: auto;
	}

	.diagnosis_area {
		height: auto;
		position: relative;
		width: 100%;
	}

	.intro_wrap {
		padding: 15% 0 115%;
	}

	.intro {
		background: #fff;
		display: none;
		padding: 0;
		position: absolute;
		width: 100%;
		z-index: 10;
	}

	.intro .cont_text {
		font-size: 3.1vw;
	}

	.qwrap {
		background: #fff;
		display: none;
		padding: 0;
		width: 100%;
		z-index: 10;
	}

	.first_check_title {
		margin: 0 auto 8%;
		max-width: 623px;
		width: 76.82%;
	}

	.first_check_title img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 100%;
		width: auto;
	}

	.first_check_text {
		font-size: 2.9vw;
		font-weight: 500;
		line-height: 2;
		margin: 0 auto 5%;
		text-align: center;
	}

	.first_check_text:last-child {
		margin: 0 auto 10%;
	}

	.btn_to_intro {
		bottom: 11.8%;
		display: none;
		left: 10%;
		width: 80%;
		margin: 10% auto 20%;
		z-index: 20;
	}

	.btn_to_intro span {
		background: #ffe346;
		color: #333;
		height: 100px;
		display: flex;
		font-size: min(4.5vw, 32px);
		font-weight: 700;
		letter-spacing: .15em;
		padding: 5% 0;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.btn_to_intro span::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-top: 1.7px solid #333;
		border-right: 1.7px solid #333;
		position: absolute;
		left: 5.5%;
		top: 45%;
		transform: rotate(-135deg);
	}

	.btn_to_intro.in_q {
		position: absolute;
		color: #333;
		height: auto;
		display: inline-block;
		font-size: min(3.5vw, 32px);
		font-weight: 700;
		letter-spacing: .15em;
		padding: 0;
		left: 0;
		bottom: 0;
		width: auto;
		margin: 0;
		text-align: left;
		text-decoration: underline;
		text-underline-offset: 10px;
	}

	.btn_to_intro.in_q::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-top: 2px solid #333;
		border-right: 2px solid #333;
		position: absolute;
		left: -23.5%;
		top: 32%;
		transform: rotate(-135deg);
	}

	.qblock {
		color: #333;
		font-weight: bold;
		margin: 0 auto;
		padding: 0;
		position: relative;
		text-align: center;
	}

	.qbox {
		position: relative;
		margin: 0 auto 15%;
		max-width: 690px;
		padding: 5% 0;
		width: 75%;
	}

	.q {
		display: block;
		margin: 0 auto 15%;
		width: auto;
		text-align: center;
		font-size: min(4.3vw, 56px);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .1em;
	}

	.q_icon {
		display: block;
		margin: 0 auto 10%;
		width: auto;
		text-align: center;
		font-size: min(10vw, 80px);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .1em;
	}

	.q.first {
		margin: 0 auto 5%;
	}

	.q.q5 {
		display: block;
		margin: 0 auto 5%;
		width: auto;
		text-align: left;
		font-size: min(3.5vw, 56px);
		font-weight: 700;
		line-height: 2;
		letter-spacing: .1em;
	}

	.ans {
		background: #ffe346;
		color: #333;
		display: flex;
		font-size: min(4vw, 32px);
		height: 100px;
		font-weight: 700;
		letter-spacing: .15em;
		padding: 5% 0;
		position: relative;
		justify-content: center;
		align-items: center;
	}
	.ans img{
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 100%;
		width: 35%;
	}

	.ans + .ans{
		margin: 5% 0 0;
	}

	.ans::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-top: 1.7px solid #333;
		border-right: 1.7px solid #333;
		position: absolute;
		right: 5.5%;
		top: 45%;
		transform: rotate(45deg);
	}

	.ans:last-child {
		margin: 0 auto;
	}

	.hint{
		position: relative;
		display: inline-block;
		margin: 5% auto 0;
		font-size: min(3.8vw, 32px);
		text-decoration: underline;
		text-underline-offset: 10px;
		color: #333;
	}

	.hint::before {
		position: absolute;
		left: -22%;
		content: "";
		display: block;
		width: 15px;
		height: 30px;
		background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2028%2042%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20isolation%3A%20isolate%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cimage%20id%3D%22_%E3%83%95%E3%83%AA%E3%83%BC%E3%81%AE%E8%B1%86%E9%9B%BB%E7%90%83%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%20data-name%3D%22%E3%83%95%E3%83%AA%E3%83%BC%E3%81%AE%E8%B1%86%E9%9B%BB%E7%90%83%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%22%20class%3D%22cls-1%22%20width%3D%2228%22%20height%3D%2242%22%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABwAAAAqCAYAAACgLjskAAAACXBIWXMAAAsSAAALEgHS3X78AAAFvElEQVRYhYzMMRHAIBAAwQURaKBGAAZe79cxEAkxkSZ1BgMMV25xxUERUTEw0dGw7MODG1dmvtsdfgAAAP%2F%2Fwmuht7e3AAMDQwYUyxMw6xcDA8N6BgaGzq1bt57HqoKBgQEAAAD%2F%2F8Jpobe3dwQDA8NEqG9IBfMZGBgKMXzMwMAAAAAA%2F%2F%2FCsNDb25uZgYFhGgMDQxoWW74yMDCcZmBgeMTAwPCPgYEBFAJ6DAwMSljU3mNgYPDZunXrdbgIAwMDAAAA%2F%2F9CsRBq2SoGBoYgNM37GRgYehkYGHZt3br1NxZHqjIwMKQwMDDkMDAwcCFJvWFgYHDcunXrFTCPgYEBAAAA%2F%2F9Ct3ACAwNDPpLQe5BBW7duXYfFBxjA29tbloGBYS4DA4MrkuRjUILbunXrGwYGBgYAAAAA%2F%2F8CpTSYZe5olj1lYGAwJ9YyENi6dSvIcE8GBoY5SMIgR0D4DAwMAAAAAP%2F%2FAvvQ29ubhYGBARTWKlBxUFyZbd269RqxliEDaNSAHOqHJO6%2BdevWXQAAAAD%2F%2F4L5EJQiYZaBQBG5loHA1q1b%2FzIwMCQxMDC8RhKuZ2BgYAAAAAD%2F%2F4JZmIwkAfIpcpCQa%2BlbBgaGNiQhK29vb00AAAAA%2F%2F9i8vb25oeWIDAwfevWraAkTw0wj4GB4QfcIAYGbwAAAAD%2F%2FwL50AxaTMHAZipZBvLlJwYGhoNwAQYGawAAAAD%2F%2FwJZBMpDMPB%2B69atD6hlIRSAylkIYGBQAwAAAP%2F%2FAlkohCTwjMqWgcALOIuBgR8AAAD%2F%2FwJZiBxfrDSwEBFdDAx%2FAAAAAP%2F%2FAnFAqQkGpKF5iJoAlPEhgIHhNQAAAP%2F%2FAll4GUmAG1rvURMgcgADw1UAAAAA%2F%2F8CWXiWgYEBlJpgIJFatnl7e%2BtAcwEEMDAcAAAAAP%2F%2FYtq6detPBgaGNUiCSd7e3opUshM5439lYGBYDwAAAP%2F%2FgkVoH1LiYWdgYJjl7e1NVPMDF%2FD29g5lYGDwRZKfu3Xr1o8AAAAA%2F%2F8CW7h169arDAwMM5AkXRgYGGopsEwNrXgEVXONDAwMDAAAAAD%2F%2F0JOstUMDAzImb7R29s7jAzLRBgYGLYxMDDwIQlnbt269R0DAwMDAAAA%2F%2F%2BCW7h169YPDAwM4QwMDKA4hYFF3t7eNiRYxsHAwLCRgYFBGUl4xtatW1eCWQwMDAAAAAD%2F%2F0L2IcjSUwwMDHFIQqD43ODt7S1HpJ2zQLUCEh%2FUNMmD8xgYGAAAAAD%2F%2F8LI5Ldv376qpqYGavI5Q4VAbRQbNTW1%2Bbdv38ZZi3h7e6cyMDDUIAmB6lO3rVu3gtquEMDAwAAAAAD%2F%2F8Jaqty%2BffuImpoaqCWmDxWSBpVIt2%2FfPonDMli8gUIEBECll%2F3WrVtfoihkYGAAAAAA%2F%2F9CCVI0kM7AwHATSawUT1YBNZR5kfgxW7dufYihioGBAQAAAP%2F%2Fwmnh1q1bQRVnKZKQDAMDgxYO5aAGGAzs2Lp16w6sqhgYGAAAAAD%2F%2FwI1nvCBvQwMDAsJqAEBUFDfhbLhKRIDMDAwAAAAAP%2F%2Foi9mYGAAAAAA%2F%2F%2BiL2ZgYAAAAAD%2F%2FyJYXnp7e1cwMDB4EOEyUJYBZXJQVwE7YGBgAAAAAP%2F%2FwhuH0JKjnYRgACUs3BYyMDAAAAAA%2F%2F%2FCW7vfvn37j5qamgQDA4MoAwMDqOuFD4PKyqm3b98%2BgdNABgYGAAAAAP%2F%2Foi9mYGAAAAAA%2F%2F8iJg4tQEUUWmMIGwB141Zt3br1Nk4VDAwMAAAAAP%2F%2FIhSHbAwMDPsYGBg4iQwKUL%2FSGKcsAwMDAAAA%2F%2F8ixtWkNIxBAwy4AQMDAwAAAP%2F%2FIiZIQSkVVIMT47gb0J4TdsDAwAAAAAD%2F%2F6IvZmBgAAAAAP%2F%2FIqmh5O3tPZmBgUEXTXjv1q1bm4kygIGBAQAAAP%2F%2FIhRM6ADU7APVdZYMDAymDAwM96FDK8QBBgYGAAAAAP%2F%2FAwBjyw5TSMTgLgAAAABJRU5ErkJggg%3D%3D%22%2F%3E%0A%3C%2Fsvg%3E');
		background-size: 100% auto;
		background-position: center center;
		background-repeat: no-repeat;
	}


	.result {
		display: none;
		width: 85%;
		padding: 15% 0;
		margin: 0 auto;
	}

	.result_title {
		display: block;
		margin: 0 auto;
		width: auto;
		text-align: center;
		font-size: min(5vw, 37px);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .1em;
	}

	.result_title img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-width: 100%;
		width: auto;
	}

	.result_text {
		text-align: center;
		font-size: min(5vw, 40px);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .1em;
	}

	.result_text span{
		text-align: center;
		font-size: min(11vw, 70px);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .1em;
		color: #ec2868;
	}

	.result_recommend {
		color: #565656;
		font-size: min(3.2vw, 32px);
		font-weight: 700;
		letter-spacing: 1px;
		margin: 10% auto 0;
		text-align: center;
	}

	.correct {
		height: 20%;
		max-width: 570px;
		width: 82.61%;
	}

	.incorrect {
		height: 20%;
		max-width: 570px;
		width: 82.61%;
	}

	.rank {
		margin: 10% auto 0;
	}

	.rank a {
		color: #333;
		display: block;
		line-height: 1;
		margin: 5% auto 0;
		font-size: min(3.2vw, 32px);
	}
	/* クイズ ここまで */
	.bnr_coupon_wrap {
		display: none;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: 76%;
		margin: 0 auto;
		z-index: 10000;
	}

	.bnr_coupon {
		display: block;
		margin: 0 auto;
	}
	.bnr_coupon img{
		display: block;
		margin: 0 auto;
		max-width: 100%;
	}
}
@media screen and (max-width: 960px) {
	.bnr_coupon_wrap {
		display: none;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0 auto;
		z-index: 10000;
	}
}
/* ページトップへ
------------------------------------ */
#scroll-pagetop {
	bottom: 145px;
	box-sizing: border-box;
	filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.8));
	height: 50px;
	position: fixed;
	right: 10px;
	width: 100%;
	width: 50px;
	z-index: 997;
}

/* 背景 */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#overlay.show {
  opacity: 1;
}

/* モーダル本体 */
#modal {
	position: fixed;
	z-index: 1000;
	background: #fff;
	top: 0;
	left: 0;
	right: 0;
	max-width: 500px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	transition: opacity 0.4s ease;
}

/* 表示状態 */
#modal.show {
  opacity: 1;
}

.modal_inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 ;
	max-width: 500px;
	width: 100%;
	height: 100%;
	margin: 0 auto ;
	overflow-y: auto;
	box-sizing: border-box;
}

/* step切り替え */
.step {
  display: none;
}

.step.active {
	display: block;
	padding: 10% 0;
	background: #f3f8fc;

}

/* hidden制御 */
.hidden {
  display: none;
}

.modal-close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 28px;
	line-height: 1;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #888;
}

.btn_wrap {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 8% auto 0;
	&.center{
		justify-content: center;
	}
}

.next {
	display: block;
	width: 48%;
	margin: 0;
}

.next img {
  pointer-events: none;
}

.back {
	display: block;
	width: 48%;
	margin: 0;
}
.back img {
  pointer-events: none;
}

.coupon_get {
	position: relative;
	text-align: center;
	color: #fff;
	background: #2db7ee;
	font-size: min(5.3vw, 27px);
	font-weight: 700;
	margin: 10% 0 0 ;
	padding: 10%;
	display: block;
}

.coupon_get::after {
	content: "";
	display: block;
	position: absolute;
	right: 4%;
	top: 45%;
	border-style: solid;
	border-width: 0.3em 0 0.3em 0.5em;
	border-color: transparent transparent transparent #ffffff;
}

.sm_modal_close {
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 0 0 22px;
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}