@charset "UTF-8";

/*************************
font_import
*************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/*************************
reset
*************************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}*[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body.noscroll{overflow:hidden}.iframe{width:100%;height:100%}.overlay{position:fixed;top:0;left:0;height:100vh;width:100%}.overlay.hidden{top:-100vh}#header.fixed{top:0;height:48px;position:sticky;box-shadow:0 2px 10px #2121211a}#header,#footer{overflow:hidden}@media screen and (min-width: 768px){#header.fixed{height:64px}}

*, *::before, *::after { box-sizing: border-box; }

#header {
	position: relative;
	z-index: 100;
}

#drawer.overlay,
#search-modal.overlay { z-index: 101; }

#drawer.overlay.hidden,
#search-modal.overlay.hidden {
	opacity: 0;
	z-index: 0;
}


/*************************
custom properties
*************************/

#LP {
	--lp-color_white: #fff;
	--lp-color_gray: #e6e6e6;
	--lp-color_light-gray: #ddd;
	--lp-color_black: #333;
	--lp-color_red: #d02929;
	--lp-color_blue: #0031d6;

	--lp-color_main: #e67081;
	--lp-color_sub: #fff0f0;
	--lp-color_andmall-blue: #2882ff;
	--lp-color_outlet-orange: #ff9600;
}

/*************************
main
SP_layout（980px未満）
*************************/

#LP {
	background-color: #FFFBEF;
	color: var(--lp-color_black);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5vw;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;

	a {
		color: var(--lp-color_blue);
		text-decoration: none;
		transition: .2s filter;

		&:hover { filter: brightness(.7); }
	}
	
	img {
		user-select: none;
		vertical-align: bottom;
		width: 100%;
		height: auto;
	}
	
	time, span {
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		letter-spacing: inherit;
	}

	/* 共通パーツ */
	.textBlock {
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		letter-spacing: inherit;
		display: block;
	}
	
	.textBold { 
		font-weight: 700;
		padding: 0 .2em;
	}
	
	.device_sp { display: block; }
	.device_pc { display: none; }
	
	.common__button {
		cursor: pointer;
		position: relative;
		margin: 0 auto;
		width: 80%;

		a {
			background-color: var(--lp-color_black);
			border-radius: 100px;
			color: var(--lp-color_white);
			font-size: 1.25em;
			font-weight: 700;
			line-height: 1.4;
			display: flex;
			flex-flow: column wrap;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			transition: .4s filter, .4s background, .4s border, .4s color;
			user-select: none;
			padding: 0 1em;
			min-height: 4em;

			&.andmall { background-color: var(--lp-color_andmall-blue); }
			&.outlet { background-color: var(--lp-color_outlet-orange); }

			&:hover { filter: brightness(.7); }

			&::after {
				border-top: 2px solid var(--lp-color_white);
				border-right: 2px solid var(--lp-color_white);
				content: "";
				display: block;
				position: absolute;
				top: calc(50% - .5em / 2);
				right: 1em;
				transform: rotate(45deg);
				transition: border .4s, filter .4s;
				width: .5em;
				height: .5em;
			}
		}
	}

	.common__headerRibbon {
		background-color: #082060;
		color: var(--lp-color_white);
		clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
		font-size: 1.8em;
		font-weight: 700;
		line-height: 1.2;
		display: flex;
		flex-flow: column wrap;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 1em;
		padding: 0 1em;
		min-height: 2.5em;

		&.andmall { background-color: var(--lp-color_andmall-blue); }
		&.outlet { background-color: var(--lp-color_outlet-orange); }
	}

	.common__ecLink__block {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column wrap;
		gap: 1em;
	}

	/* KV */
	.kv {
		background: linear-gradient(to right, #26CBFF 50%, #FF9637 50%);
		margin: 0 auto;
		width: 100%;
		height: auto;
	}

	.kv__inner {
		margin: 0 auto;
		width: 100%;
	}
	
	.kv__h1 {
		margin: 0 auto;
		width: 100%;
		max-width: 1240px;

		> img {
			margin: 0 auto;
			width: 100%;
			max-width: 1000px;
		}
	}
	
	/* メインコンテンツ */
	.contents { font-size: 1em; }

	.contents__wrapper {
		margin: 0 auto;
		padding: 2em 0;
		width: 100%;
	}

	/* セクション */
	.section {
		margin:  0 auto;
		width: 100%;

		&:not(:last-of-type) { margin-bottom: 3em; }

		.section__inner {
			margin:  0 auto;
			width: 91.5%;
		}

		&.campaign {
			font-size: 1em;

			.campaign__header {
				color: #082060;
				font-size: 1.2em;
				font-weight: 900;
				line-height: 1.6;
				text-align: center;
				margin-bottom: 1.5em;
			}

			.campaign__block {
				margin: 0 auto;
				width: 100%;
			}

			.campaign__limited {
				font-size: 1.5em;
				text-align: center;
				margin-bottom: 1em;
			}

			.campaign__limited__header {
				color: var(--lp-color_red);
				font-size: 1.25em;
				font-weight: 900;
				margin-bottom: .75em;

				time {
					display: inline-flex;
					align-items: baseline;
				}

				.textMiddle { font-size: .8em; }
				.textSmall { font-size: .5em; }
			}

			.campaign__limited__detail {
				font-size: .8em;

				> li {
					margin: 0 auto;
					padding-left: 1em;
					width: fit-content;

					&::before {
						content: '※';
						display: inline-block;
						text-align: center;
						margin-left: -1em;
						width: 1em;
					}
				}
			}

			.campaign__overview {
				font-size: 1em;
				margin-bottom: 3em;
				max-width: 980px;
			}

			.campaign__cashless {
				background-color: var(--lp-color_white);
				border-radius: 5px;
				box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
				padding: 3em;
			}

			.campaign__cashless__list {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: row wrap;
				gap: 2em;
				margin: 0 auto;
				width: 100%;
				max-width: 980px;

				> li { width: calc((100% - 2em * 1) / 2); }
			}
		}

		&.cacheBack {
			.cacheBack__vendor {
				margin:  0 auto;
				max-width: 980px;
				width: 100%;

				> li:not(:last-of-type) { margin-bottom: 3em; }
			}

			.cacheBack__vendor__logo {
				margin: 0 auto;
				width: 43.8%;
			}

			.cacheBack__vendor__detail {
				background-color: var(--lp-color_white);
				border: 3px solid var(--lp-color_gray);
				font-size: 1em;
				margin: 0 auto;
				margin-bottom: 3em;
				width: 100%;
				max-width: 770px;

				.detail__row:not(:last-of-type) { border-bottom: 3px solid var(--lp-color_gray); }

				.detail__header,
				.detail__value {
					vertical-align: middle;
					padding: .75em 1em;
				}

				.detail__header {
					border-right: 3px solid var(--lp-color_gray);
					font-size: 1.15em;
					font-weight: 900;
					width: 35%;
				}

				.detail__value {
					font-size: 1.1em;
					width: 65%;

					> .textBold { font-weight: 700; }

					> a { text-decoration: underline; }
				}

				.detail__supplement {
					font-size: .75em;
					position: relative;
					margin-top: .5em;
					padding-left: 1em;

					&::before {
						content: '※';
						display: inline-block;
						text-align: center;
						margin-left: -1em;
						width: 1em;
					}
				}
			}

			.cacheBack__vendor__button {
				margin: 0 auto;
				> a { background-color: #082060; }
			}
		}

		&.payment {
			.payment__block {
				margin:  0 auto;
				max-width: 980px;
				width: 100%;

				&:not(:last-of-type) { margin-bottom: 3em; }
			}

			.payment__step {
				> li {
					background-color: var(--lp-color_white);
					box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
					overflow: visible;
					position: relative;
					padding: 2em 3em 0 3em;

					&:not(:last-of-type)::after {
						background: url("../images/common/wh_main_icon.svg") no-repeat center / contain;
						content: "";
						position: absolute;
						bottom: -3.5em;
						left: 50%;
						transform: translateX(-50%);
						width: clamp(40px, 6vw, 80px);
						height: clamp(20px, 6vw, 40px);
					}

					&:not(:last-of-type) { margin-bottom: 5em; }
				}
			}

			.payment__step__business {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: row wrap;
				gap: 0 2em;
				margin: 0 auto;
				width: 100%;

				> li { width: calc((100% - 2em * 1) / 2); }
			}

			.payment__precautions {
				background-color: var(--lp-color_white);
				font-size: 1em;
				margin: 0 auto;
				padding: 2em 1em;
				width: 100%;
				max-width: 800px;
			}

			.payment__precautions__header {
				font-size: 1.5em;
				font-weight: 700;
				text-align: center;
				margin-bottom: 1em;
			}

			.payment__precautions__list {
				margin: 0 auto;
				width: 100%;

				> li {
				   color: var(--lp-color_black);
				   font-weight: 500;
				   line-height: 1.5;
				   letter-spacing: -.05em;
				   text-align: left;
				   padding-left: 1em;

				   &::before {
					   content: '※';
					   display: inline-block;
					   text-align: center;
					   margin-left: -1em;
					   width: 1em;
				   }

				   &:not(:last-of-type) { margin-bottom: .5em; }
			   }
			}

			.payment__step__header {
				color: #082060;
				display: flex;
				align-items: center;
				flex-flow: column wrap;
				gap: 2em;
				margin-bottom: 2em;

				.payment__step__num {
					font-size: 3em;
					font-weight: 900;
					line-height: 1;
					display: inline-flex;
					align-items: baseline;

					> span { font-size: 1.6em; }
				}

				.payment__step__h3 {
					font-size: 1.25em;
					font-weight: 900;
					text-align: center;
				}

				.payment__step__caution {
					text-align: center;
					margin-top: .5em;

					> li {
						color: var(--lp-color_black);
						display: inline-block;
						font-weight: 500;
						line-height: 1.5;
						letter-spacing: -.05em;
						text-align: left;
						padding-left: 1em;

						&::before {
							content: '※';
							display: inline-block;
							text-align: center;
							margin-left: -1em;
							width: 1em;
						}
					}
				}
			}

			.payment__step__order {
				font-size: 1em;
				display: flex;
				flex-flow: row wrap;
				gap: 1.5em;
				position: relative;
				margin: 0 auto;
				padding-bottom: 3em;
				width: 100%;
				/* max-width: 660px; */

				> li {
					position: relative;
					/* width: calc((100% - 1.5em * 2) / 3); */
					width: calc((100% - 1.5em * 1) / 2);

					.payment__step__photo { position: relative; }

					&:not(:last-of-type) {
						.payment__step__photo::after {
							border: 3px solid var(--lp-color_black);
							border-right: none;
							border-bottom: none;
							content: "";
							transform: rotate(135deg);
							position: absolute;
							top: calc(50% + .5em);
							right: -1em;
							width: .8em;
							height: .8em;
						}
					}

					&:nth-of-type(2) {
						.payment__step__photo::after { right: -.9em; }
					}

					.payment__step__photo {
						margin-bottom: 1.5em;

						> img {
							display: block;
							margin: 0 auto;
							width: calc(100% - 1em * 2);
						}
					}
				}
			}

			.payment__step__image {
				margin: 0 auto;
				width: 100%;
			}
		}
	}
}

/**************************************************
main
PC_layout（980px以上）
**************************************************/

@media screen and (min-width: 980px) {
	#LP {
		font-size: 16px;

		/* 共通パーツ */
		.device_sp { display: none; }
		.device_pc { display: block; }
	
		.common__button {
			margin: initial;
			max-width: 450px;
			width: 100%;

			&::after {
				border-top-width: 3px;
				border-right-width: 3px;
				top: calc(50% - (1em / 2));
				width: 1em;
				height: 1em;
			}
		}

		.common__headerRibbon { max-width: 650px; }

		.common__ecLink__block {
			justify-content: space-evenly;
			flex-flow: row wrap;
			gap: 1em;
		}

		/* KV */
		.kv__inner {
			background-image: url("../images/common/wh_kv_bg.png");
			background-size: 1811px auto;
			background-position: center;
			background-repeat: no-repeat;
		}

		.kv__h1 { max-width: 1240px; }

		/* メインコンテンツ */
		.contents__wrapper { padding: 2em 0 4em 0; }

		/* セクション */
		.section {
			.section__inner {
				padding-left: 1.25em;
				padding-right: 1.25em;
				width: 100%;
				max-width: 1240px;
			}

			&.campaign {
				.campaign__header { font-size: 2em; }

				.campaign__limited__header {
					font-size: 1.75em;
					margin-bottom: .25em;
				}

				.campaign__limited__detail { font-size: .6em; }

				.campaign__cashless__list > li { width: calc((100% - 2em * 3) / 4); }
			}


			&.cacheBack {
				.cacheBack__vendor__logo {
					max-width: 300px;
					width: 100%;
				}

				.cacheBack__vendor__detail {
					.detail__header,
					.detail__value { padding: 1em; }

					.detail__header {
						font-size: 1.25em;
						width: 30%;
					}

					.detail__value { width: 70%; }
				}
			}

			&.payment {
				.payment__step__business {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-flow: row wrap;
					gap: 2em;
					margin: 0 auto;
					width: 100%;
					max-width: 980px;

					> li { width: calc((100% - 2em * 3) / 4); }
				}

				.payment__step__header {
					align-items: flex-start;
					flex-flow: row nowrap;

					.payment__step__num {
						font-size: 3em;
						font-weight: 900;
						line-height: 1;
						display: inline-flex;
						align-items: baseline;

						> span { font-size: 1.6em; }
					}

					.payment__step__h3,
					.payment__step__caution { text-align: left; }
				}

				.payment__step__order {
					max-width: 660px;

					> li { width: calc((100% - 1.5em * 2) / 3); }
				}

				.payment__step__image {
					width: 100%;
					max-width: 336px;
				}
			}
		}
	}
}