@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: #ccc;
	--lp-color_light-gray: #ddd;
	--lp-color_black: #333;
	--lp-color_red: #c80000;
	--lp-color_blue: #001dff;

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

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

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

	a {
		color: var(--lp-color_red);
		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: .7em;
			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: .5em 1em;
			min-height: 3.6em;

			&.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: var(--lp-color_black);
		color: var(--lp-color_white);
		clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
		font-size: 1em;
		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.6em;

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

	.common__baloon {
		font-size: .85em;
		font-weight: 900;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .2em;
		position: relative;
		margin-bottom: .5em;

		&::before { content: "＼"; }
		&::after { content: "／"; }
	}

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

	/* KV */
	.kv {
		background-color: var(--lp-color_main);
		margin: 0 auto;
		width: 100%;
		height: auto;
	}

	.kv__inner {
		background-image: url("../images/common/wh_kv_bg.png");
		background-size: cover;
		background-position: center;
		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 {
		background-color: var(--lp-color_sub);
		font-size: 1em;
	}

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

	.section {
		margin:  0 auto;
		max-width: calc(1000px + 1em * 2);
		width: 100%;

		&.appeal {
			font-size: 1em;
			margin-right: auto;
			margin-left: auto;

			.appeal__inner {
				padding: 1.25em 0;
				margin: 0 auto;
				width: 92%;
			}

			.appeal__block:not(:last-of-type) { margin-bottom: 6%; }
		
			.appeal__overview__header {
				font-size: .75em;
				font-weight: 900;
				text-align: center;
				margin-bottom: .75em;
			}

			.appeal__overview__block > *:not(:last-child) { margin-bottom: 4%; }

			.appeal__overview__table { width: 100%; }

			.appeal__overview__members {
				font-size: .6em;
				text-align: right;

				a {
					color: var(--lp-color_blue);
					font-size: inherit;
					line-height: 1.5;
					display: inline-block;
					text-decoration: underline;
				}
			}

			.appeal__targetCard {
				background-color: var(--lp-color_white);
				font-size: 1em;
				text-align: center;
				padding: 1em;
			}

			.appeal__targetCard__header {
				color: var(--lp-color_main);
				font-size: 1.2em;
				font-weight: 800;
				margin-bottom: .5em;
			}

			.appeal__targetCard__list {
				font-size: .45em;
				font-weight: 400;
				display: flex;
				justify-content: center;
				flex-flow: row wrap;
				gap: 2em;

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

					.appeal__targetCard__image {
						margin: 0 auto;
						width: calc(100% - 1em * 2);
					}

					.appeal__targetCard__caption {
						margin-top: .5em;
					}
				}
			}

			.appeal__precautions {
				background-color: var(--lp-color_white);
				font-size: 1em;
				text-align: center;
				margin: 0 auto;
				padding: 1.5em 1em;
				width: 100%;
				max-width: 800px;
			}

			.appeal__precautions__header {
				font-size: .9em;
				font-weight: 800;
				margin-bottom: .75em;
			}

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

					a {
						color: var(--lp-color_blue);
						display: inline-block;
						text-decoration: underline;
						padding: 0 .2em;
					}

					time {
						font-weight: 600;
						display: inline-block;
						padding: 0 .2em;
					}

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

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

			.appeal__joining {
				margin: 0 auto;
				width: 100%;
				max-width: 800px;
			}

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

		&.interest {
			background-color: var(--lp-color_white);
			font-size: 1em;
			
			.interest__inner {
				padding: 1.5em 0;
				margin: 0 auto;
				width: 92%;
			}

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

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

			.interest__contentsGroup {
				margin: 0 auto;
				width: calc(100% - 1em);
			}

			.interest__slider { margin-bottom: 1.5em; }

			.interest__recommend__header {
				border-left: 6px solid #dc3545;
				font-size: 1em;
				font-weight: 700;
				text-align: left;
				line-height: 2;
				margin-bottom: 1em;
				padding-left: .5em;
			}

			.interest__recommend__category {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: row wrap;
				gap: 1.5em 1em;

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

					a {
						color: var(--lp-color_black);
						font-size: .7em;
						font-weight: 700;
						text-align: center;
					}
				}
			}

			.interest__recommend__image {
				margin-bottom: .25em;

				> img {
					aspect-ratio: 1 / 1;
					display: block;
					width: 100%;
				}
			}

			.interest__other__block:not(:last-of-type) { margin-bottom: 1.5em; }

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

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

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

		.device_sp { display: none; }
		.device_pc { display: block; }
	
		.common__button {
			margin: initial;
			max-width: 450px;
			width: 100%;

			a { font-size: 1.25em; }

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

		.common__headerRibbon {
			font-size: 2.125em;
			max-width: 678px;
		}

		.common__baloon {
			font-size: 2.625em;
			margin-bottom: .5em;
		}

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

		.section {
			padding-left: 1.25em;
			padding-right: 1.25em;

			&.appeal {
				.appeal__inner {
					padding: 3.75em 1em;
					width: 100%;
				}

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

				.appeal__overview__header {
					font-size: 1.5em;
					margin-bottom: 1.5em;
				}

				.appeal__overview__block > *:not(:last-child) { margin-bottom: 32px; }

				.appeal__overview__table { width: 100%; }

				.appeal__overview__members {
					font-size: 1.25em;

					a {
						color: var(--lp-color_blue);
						font-size: inherit;
						line-height: 1.5;
						display: inline-block;
						text-decoration: underline;
					}
				}

				.appeal__targetCard {
					font-size: 1em;
					padding: 2em;
				}

				.appeal__targetCard__header { font-size: 2.625em; }

				.appeal__targetCard__list {
					font-size: .75em;
					gap: 3em 2em;
					margin: 0 auto;
					width: 870px;

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

						.appeal__targetCard__image { width: calc(100% - 1em * 5); }
						.appeal__targetCard__caption { margin-top: .5em; }
					}
				}

				.appeal__precautions {
					font-size: 1em;
					padding: 2em 1.5em;
				}

				.appeal__precautions__header {
					font-size: 1.5em;
					margin-bottom: 1em;
				}

				.appeal__precautions__list > li {
					font-size: .875em;
					&:not(:last-of-type) { margin-bottom: .5em; }
				}

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

			&.interest {
				background-color: var(--lp-color_white);
				font-size: 1em;
				padding-top: 3em;
				padding-bottom: 3em;

				.interest__inner { width: 100%; }

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

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

				.interest__contentsGroup { width: 100%; }

				.interest__slider { margin-bottom: 3em; }

				.interest__recommend__header {
					font-size: 1.5em;
					margin-bottom: 1.5em;
				}

				.interest__recommend__category {
					gap: 2.5em 3em;
					margin: 0 auto;
					max-width: 728px;

					> li {
						width: calc((100% - 3em * 2) / 3);
						a { font-size: 1.625em; }
					}
				}

				.interest__recommend__image {
					margin-bottom: .25em;

					> img {
						aspect-ratio: 1 / 1;
						display: block;
						width: 100%;
					}
				}

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

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

	}
}