@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: rgb(255, 255, 255);
	--lp-color_black: rgb(33, 33, 33);
	--lp-color_light-gray: rgb(247, 247, 247);
	--lp-color_pale-red: rgb(255, 245, 246);

	--lp-color_shadow-gray: rgba(226, 226, 226, .7);

	--lp-color_corporate: rgb(255, 0, 51);
	--lp-color_andmall-blue: rgb(40, 130, 255);
	--lp-color_outlet-orange: rgb(240, 130, 0);
}

/*************************
animation keyframes
*************************/

/* フローティングエリア挙動 */
@keyframes floatingObject {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 小刻みに振動（左右） */
@keyframes shake-leftright {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-3px); }
	40%, 80% { transform: translateX(3px); }
}

/* 小刻みに振動（上下） */
@keyframes shake-topbottom {
	0%, 100% { translate: 0 0; }
	20%, 60% { translate: 0 0.5px; }
	40%, 80% { translate: 0 -0.5px; }
}

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

/* ---------------------------
ページ共通
--------------------------- */

body:has(.is_end) { overflow-y: hidden; }

#LP {
	counter-reset: number 0;
	color: var(--lp-color_black);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	overflow: hidden;
	width: 100%;

	&.is_end { pointer-events: none; }

	a {
		color: var(--lp-color_corporate);
		text-decoration: none;
	}

	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;
	}

	.textCorporateColor {
		color: var(--lp-color_corporate);
		font-weight: 700;
	}

	.textAnnotation {
		font-size: .8em;
		display: inline-block;
		padding: 0 .5em;
	}

	.device_sp { display: block; }
	.device_pc { display: none; }

	/* ボタン共通 */
	.common__button {
		a {
			background-color: var(--lp-color_black);
			border-radius: 100px;
			color: var(--lp-color_white);
			cursor: pointer;
			font-size: 3vw;
			font-weight: 700;
			line-height: 1.4;
			display: flex;
			flex-flow: column wrap;
			align-items: center;
			justify-content: center;
			text-align: center;
			text-decoration: none;
			transition: .4s filter, .4s background, .4s border, .4s color;
			user-select: none;
			position: relative;
			margin: 0 auto;
			padding: .5em 1em;
			width: 75%;
			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% - 1vw);
				right: 1em;
				transform: rotate(45deg);
				transition: border .4s, filter .4s;
				width: 2vw;
				height: 2vw;
			}
		}

		&.square a { border-radius: 0; }
	}

	.common__ecLink {
		display: block;
		width: 100%;

		.common__button:not(:last-of-type) { margin-bottom: 1em; }
	}

	.anchorLink a::after { transform: rotate(135deg); }

	.objShake {
		animation: shake-leftright 2s ease-in-out infinite;
		display: inline-block;
	}

	/* ---------------------------
	キービジュアル
	--------------------------- */

	.kv {
		background-color: var(--lp-color_corporate);
		color: var(--lp-color_white);
		font-size: 4vw;
		font-weight: 700;
		width: 100%;
		height: auto;

		.kv__h1,
		.kv__band--inner {
			margin: 0 auto;
			padding: 0 4.25%;
			width: 100%;
			max-width: 1000px;
			height: auto;
		}

		.kv__h1 > img {
			margin: 0 auto;
			width: 100%;
		}

		.kv__band {
			background-color: var(--lp-color_black);
			padding: .25em 0;
		}

		.kv__band--inner {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			max-width: 1000px;
		}

		.kv__band--block {
			margin: 0 auto;
			width: 100%;
			max-width: fit-content;
		}
	}

	/* ---------------------------
	メインコンテンツ共通
	--------------------------- */

	.section {
		background-color: var(--lp-color_white);
		width: 100%;
		height: auto;

		&:nth-of-type(odd) { background-color: var(--lp-color_pale-red); }

		.section__inner {
			margin: 0 auto;
			padding: 6% 4.25%;
			width: 100%;
			max-width: 1000px;
			height: auto;
		}

		.section__h3 {
			color: var(--lp-color_corporate);
			text-align: center;
			font-size: 5.5vw;
			font-weight: 700;
			margin-bottom: .75em;
		}

		.section__h4 {
			text-align: center;
			font-size: 4vw;
			font-weight: 600;
			margin-bottom: 1em;
		}

		.section__procedure {
			font-size: 3.3vw;
			display: flex;
			flex-flow: row wrap;
			gap: 1.5em;
			position: relative;
			width: 100%;

			&:not(:last-child) { margin-bottom: 2em; }

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

				.section__photo { position: relative; }

				&:not(:last-of-type) .section__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: -1.1em;
					width: .8em;
					height: .8em;
				}

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

		.section__photo { margin-bottom: 1em; }

		.section__caption {
			font-weight: 400;
			padding-left: .75em;
		}
	}

	/* ---------------------------
	各コンテンツ固有スタイル
	--------------------------- */

	/* キャンペーン訴求 */
	.appeal {
		width: 100%;
		height: auto;

		.appeal__header {
			font-size: 4.8vw;
			font-weight: 900;
			text-align: center;
			margin-bottom: 2em;
		}

		.appeal__list {
			background-color: var(--lp-color_white);
			font-size: 4vw;
			margin: 0 auto;
			margin-bottom: 2em;
			padding: 1.5em 1em;
			max-width: 850px;
			width: 100%;

			> li {
				width: 100%;

				a {
					color: var(--lp-color_black);
					font-weight: 700;
					display: flex;
					align-items: center;
					gap: .5em;
					transition: .4s color;
					position: relative;
					width: 100%;
					max-width: 100%;

					&:hover { color: var(--lp-color_corporate); }

					&::before {
						background-color: var(--lp-color_corporate);
						border-radius: 1000px;
						color: var(--lp-color_white);
						font-weight: 700;
						font-size: .8em;
						content: "";
						display: flex;
						align-items: center;
						justify-content: center;
						width: 1.75em;
						height: 1.75em;
					}

					&::after {
						animation: shake-topbottom 2s ease-in-out infinite;
						border: 3px solid var(--lp-color_white);
						border-right: none;
						border-bottom: none;
						transform: rotate(225deg);
						content: "";
						position: absolute;
						top: .4em;
						left: .45em;
						width: .5em;
						height: .5em;
					}
				}

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

	/* クーポン内容 */
	.breakdown {
		width: 100%;
		height: auto;

		.breakdown__block { margin-bottom: 8%; }
		.breakdown__text { font-size: 3.6vw; }

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

		.breakdown__period {
			font-size: 1.1em;
			color: var(--lp-color_corporate);
			font-weight: 800;
			text-align: center;
		}
	}

	/* クーポン獲得方法 */
	.acquisition {
		font-size: 4vw;
		width: 100%;
		height: auto;

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

		.acquisition__block {
			background-color: var(--lp-color_white);
			box-shadow: 0 0 10px 0 var(--lp-color_shadow-gray);
			border-radius: 10px;
			padding: 1.5em;
		}

		.acquisition__comments {
			font-size: .6em;
			text-align: center;
		}
	}

	/* 獲得したクーポンを確認する */
	.check {
		width: 100%;
		height: auto;

		.check__block {
			background-color: var(--lp-color_light-gray);
			box-shadow: 0 0 10px 0 var(--lp-color_shadow-gray);
			border-radius: 10px;
			padding: 1.5em;
		}
	}

	/* お支払い方法の選択・注文手続き */
	.payment {
		width: 100%;
		height: auto;

		.payment__procedure {
			background-color: var(--lp-color_white);
			box-shadow: 0 0 10px 0 var(--lp-color_shadow-gray);
			border-radius: 10px;
			padding: 1.5em;
		}
	}

	/* クーポンに関する注意事項 */
	.notes {
		width: 100%;
		height: auto;

		.notes__block {
			background-color: var(--lp-color_light-gray);
			box-shadow: 0 0 10px 0 var(--lp-color_shadow-gray);
			border-radius: 10px;
			padding: 1.5em;
			margin-bottom: 1em;
		}

		.notes__header {
			color: var(--lp-color_black);
			font-size: 4vw;
			font-weight: 600;
			margin-bottom: 1em;
		}

		.notes__caution {
			font-size: 3vw;

			a {
				border-bottom: 1px solid var(--lp-color_corporate);
				font-weight: 700;
				text-decoration: none;
				padding: 0 .5%;
			}

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

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

		.notes__ecLink { margin-bottom: 8%; }

		.notes__trademark {
			font-size: 2.6vw;

			> li {
				position: relative;

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

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

	/* フローティングエリア */
	.floating {
		box-shadow: 0 0 8px 0 var(--lp-color_shadow-gray);
		font-size: 3.3vw;
		transition: .4s opacity, transform .4s ease, background .4s ease;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		z-index: 8;
		right: 0;
		bottom: 0;
		transform: translateY(2em);
		width: 100%;

		&.is_visible {
			background-color: var(--lp-color_shadow-gray);
            backdrop-filter: blur(20px);
			opacity: 1;
			transform: translateY(0);

			a { pointer-events: auto; }
			.floating__inner { pointer-events: none; }
		}

		.floating__inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 1em;
			margin: 0 auto;
			padding: 1.5em 0;
			width: 91.5%;
			max-width: 1000px;

			.floating__h3 {
				text-shadow: 0 0 10px var(--lp-color_shadow-gray);
				width: 45%;
			}

			.floating__apps {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: .5em;
				width: 55%;

				a { box-shadow: 0 0 10px 0 var(--lp-color_shadow-gray); }
			}
		}
	}
}

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

@media screen and (min-width: 980px) {

	/* ---------------------------
	ページ共通
	--------------------------- */

	#LP {
		overflow: hidden;
		margin: 0 auto;
		width: 100%;
		min-width: 1000px;

		.device_sp { display: none; }
		.device_pc { display: block; }

		/* ボタン共通 */
		.common__button {
			a {
				font-size: 20px;
				max-width: 450px;
				width: 100%;

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

		.common__ecLink {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-evenly;
			align-items: center;
			width: 100%;

			.common__button {
				max-width: 450px;
				width: 100%;

				&:not(:last-of-type) { margin-bottom: 0; }
				a { margin: 0; }
			}
		}

		.anchorLink a {
			max-width: 650px;

			&::after {
				animation: shake-topbottom 2s ease-in-out infinite;
				transform: rotate(135deg);
			}
		}

		/* ---------------------------
		キービジュアル
		--------------------------- */

		.kv {
			font-size: 24px;

			.kv__h1,
			.kv__band--inner { padding: 0 10px; }

			.kv__h1 > img { max-width: fit-content; }
		}

		/* ---------------------------
		メインコンテンツ共通
		--------------------------- */

		.section {
			.section__inner { padding: 60px 10px; }

			.section__h3 { font-size: 42px; }
			.section__h4 { font-size: 24px; }

			.section__procedure {
				font-size: 16px;

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

					&:not(:last-of-type) .section__photo::after {
						right: -1.25em;
						width: 1em;
						height: 1em;
					}

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

		/* ---------------------------
		各コンテンツ固有スタイル
		--------------------------- */

		/* キャンペーン訴求 */
		.appeal {
			.appeal__header,
			.appeal__list { font-size: 24px; }

			.appeal__list {
				display: flex;
				flex-flow: row wrap;
				gap: 1em;
				width: 100%;

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

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

		/* クーポン内容 */
		.breakdown {
			.breakdown__block { margin-bottom: 42px; }
			.breakdown__text { font-size: 24px; }
			.breakdown__period { font-size: 1.34em; }
		}

		/* クーポン獲得方法 */
		.acquisition {
			font-size: 24px;

			.acquisition__block { padding: 40px; }

			.acquisition__procedure {
				margin: 0 auto;
				max-width: 720px;

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

		/* 獲得したクーポンを確認する */
		.check {
			.check__block { padding: 40px; }
			.check__procedure > li { width: calc((100% - 1.5em * 3) / 4); }
		}

		/* お支払い方法の選択・注文手続き */
		.payment {
			.payment__procedure {
				padding: 40px;

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

		/* クーポンに関する注意事項 */
		.notes {
			.notes__block {
				margin-bottom: 60px;
				padding: 40px;
			}

			.notes__header { font-size: 24px; }

			.notes__caution {
				font-size: 16px;

				> li { letter-spacing: -.05em; }
			}

			.notes__ecLink { margin-bottom: 60px; }
			.notes__trademark { font-size: 14px; }
		}

		/* フローティングエリア */
		.floating {
			font-size: 24px;
			transform: translateY(25px);

			.floating__inner {
				padding: .5em;
				width: 100%;

				> * { width: initial; }

				.floating__h3 { width: 60%; }
				.floating__apps { width: 40%; }
			}
		}
	}
}