@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');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*************************
reset style　＆　CMS unique style
*************************/

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_black: #3c3c3c;
	--lp-color_gray: #808080;
	--lp-color_white: #fff;

	--lp-color_vivid-green: #09c655;
	--lp-color_light-green: #c4edd5;
	--lp-color_yellow: #fbdb00;

	--lp-color_andmall-blue: #0078b9;
	--lp-color_outlet-orange: #f5a000;
}

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

/* ページ全体の共通スタイル */
#LP {
	background-color: var(--lp-color_light-green);
	color: var(--lp-color_black);
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
}

@keyframes loadingTextBox {
	0% {
	opacity: 0;
	transform: translateY(20px);
	}
	100% {
	opacity: 1;
	transform: translateY(0);
	}
}

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

#LP.is_end {
	pointer-events: none;
	user-select: none;
}

#LP .campaiginEnd { display: none; }

#LP.is_end .campaiginEnd {
	background-color: rgba(0, 0, 0, .4);
	content: "";
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

#LP.is_end .campaiginEnd__text {
	animation: loadingTextBox .6s;
	background-color: #fff;
	border-radius: 10px;
	color: #000;
	font-size: 4vw;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	transform: translateY(0);
	padding: 5%;
	width: 90%;
	height: auto;
}
#LP.is_end .campaiginEnd__text > span {
	font-size: .7em;
	font-weight: 400;
}

@media screen and (min-width: 980px) {
	#LP.is_end .campaiginEnd__text {
        font-size: 24px;
        padding: 3em;
        width: fit-content;
	}
}

#LP img {
	user-select: none;
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

#LP time,
#LP span {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

#LP .device-sp { display: block; }
#LP .device-pc { display: none; }

#LP .txt_block,
#LP .txt_block.device-sp { display: block; }

#LP .txt_maincolor { color: var(--lp-color_vivid-green); }

#LP a { transition: filter .4s; }
#LP a:hover { filter: brightness(.7); }

#LP .common__button {
	margin: 0 auto;
	width: 92%;
}

#LP .common__button a {
	background-color: var(--lp-color_black);
	border-radius: 100px;
	color: var(--lp-color_white);
	font-size: 3.2vw;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.5;
    text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column wrap;
	user-select: none;
	position: relative;
	padding: 0 2em;
	width: 100%;
	min-height: 4em;
}
#LP .common__button a::before {
	border-top: 3px solid var(--lp-color_white);
    border-right: 3px solid var(--lp-color_white);
	content: '';
	vertical-align: middle;
	transform: rotate(45deg);
	position: absolute;
    top: calc(50% - (2.4vw / 2));
    right: .75em;
    width: 2.4vw;
    height: 2.4vw;
}
#LP .common__button.andmall a { background-color: var(--lp-color_andmall-blue); }
#LP .common__button.outlet a { background-color: var(--lp-color_outlet-orange); }

/* キービジュアル */
#LP .kvArea { background-color: var(--lp-color_vivid-green); }

#LP .kvArea__inner,
#LP .kvArea__h1 {
	margin: 0 auto;
	width: 100%;
}

/* メインコンテンツ共通 */
#LP .mainArea__inner {
	padding: 6% 0 12% 0;
	width: 100%;
}

#LP .mainArea__block {
	margin: 0 auto;
	width: 94%;
}
#LP .mainArea__block:not(:last-of-type) { margin-bottom: 7%; }

/* クーポンコード本体と説明書き */
#LP .code__inner {
	margin: 0 auto;
	padding-bottom: 12%;
	width: 86%;
}

#LP .code__block:not(:last-of-type) { margin-bottom: 8%; }

#LP .couponcode__h2 {
	background-color: var(--lp-color_white);
	border-radius: 9px 9px 0 0;
	color: var(--lp-color_gray);
	font-size: 6vw;
	font-weight: 900;
	text-align: center;
	line-height: 1;
	padding: 5% 0 2% 0;
}

#LP .couponcode__border {
	background-image: url('../images/common/wh_kv_decoration-hole_left.png'),
					url('../images/common/wh_kv_decoration-hole_right.png');
	background-repeat: no-repeat, no-repeat;
	background-position: left center, right center;
	background-size: 12px auto;
}

#LP .couponcode__border__line {
	background-color: var(--lp-color_white);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: calc(100% - 24px);
	height: 24px;
}

#LP .couponcode__border__line > span {
	background: repeating-linear-gradient(
		90deg,
		var(--lp-color_gray) 0,  var(--lp-color_gray) 9px,
		transparent 0, transparent 18px
	);
	display: block;
	width: calc(100% - 22px);
	height: 2px;
}

#LP .couponcode__body {
	background-color: var(--lp-color_white);
	display: flex;
	justify-content: space-between;
    flex-flow: column wrap;
    row-gap: 1.5em;
	margin: 0 auto;
	width: 83.6%;
}
#LP .couponcode__body > li {
	line-height: 1;
	flex-basis: 100%;
}

#LP .couponcode__body > li:first-of-type {
	background-color: var(--lp-color_white);
	border: none;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#LP .couponcode__body .js-copytext {
	color: var(--lp-color_vivid-green);
	font-size: 10vw;
	font-weight: 900;
	letter-spacing: .05em;
	line-height: 1;
	width: auto;
}
#LP .couponcode__body .js-copybtn {
	background: transparent;
	border: none;
    cursor: pointer;
	transition: filter .4s;
	padding: 0;
	width: 100%;
}
#LP .couponcode__body .js-copybtn:hover { filter: brightness(.7); }

#LP .couponcode__block {
	background-color: var(--lp-color_white);
	border-radius: 0 0 9px 9px;
	box-shadow: 0 6px 0 var(--lp-color_gray);
}

#LP .couponcode__message {
	text-align: center;
	padding: 8% 5%;
}

#LP .couponcode__message span { display: block; }

#LP .couponcode__message > p:not(:last-of-type) { margin-bottom: 5%; }

#LP .couponcode__explanation {
	font-size: 2.8vw;
	font-weight: 900;
	line-height: 1.2;
}

#LP .couponcode__deadline {
	color: var(--lp-color_black);
	font-size: 3.6vw;
	font-weight: 500;
}

#LP .couponcode__deadline time {
	font-size: 1.2em;
	font-weight: 600;
	display: inline-block;
	margin-left: 1em;
}

/* クーポンコードの使い方はこちら */
#LP .conductor {
	margin: 0 auto;
	width: 100%;
}

#LP .conductor__anchor {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5%;
}

#LP .conductor__anchor > li { width: 100%; }

#LP .conductor__anchor > li a {
	background-color: var(--lp-color_yellow);
	color: var(--lp-color_black);
	cursor: pointer;
	font-size: 3.2vw;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column wrap;
	transition: filter .4s;
	user-select: none;
	position: relative;
	padding: 0 2em;
	width: 100%;
	min-height: 4em;
}
#LP .conductor__anchor > li a::before { 
	border-top: 3px solid var(--lp-color_black);
    border-right: 3px solid var(--lp-color_black);
	content: '';
	vertical-align: middle;
	transform: rotate(135deg);
	position: absolute;
    top: calc(50% - (2.4vw * 1.4 / 2));
    right: .75em;
    width: 2.4vw;
    height: 2.4vw;
}
#LP .conductor__anchor > li a:hover { filter: brightness(.7); }

#LP .conductor__links > .common__button:not(:last-of-type) { margin-bottom: 5%; }

/* おすすめカテゴリー */
#LP .recommend__block {
	background-color: var(--lp-color_white);
	border-radius: 10px;
	position: relative;
	padding: 5% 6% 9% 6%;
}
#LP .recommend__block:not(:last-of-type) { margin-bottom: 15%; }

#LP .recommend__h2 {
	margin: 0 auto;
    margin-top: -14.5%;
	margin-bottom: 8%;
	width: 100%;
}

#LP .recommend__image { margin-bottom: 4%; }

#LP .recommend__caption {
	font-size: 3.3vw;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.5;
	text-align: center;
}

#LP .recommend__category {
	display: flex;
	flex-flow: row wrap;
	gap: 6vw 6%;
	margin: 0 auto;
	padding-bottom: 10%;
	width: 100%;
}
#LP .recommend__category a {
	color: var(--lp-color-common_white);
	display: block;
    text-decoration: none;
}
#LP .recommend__category > li { flex-basis: 47%; }

#LP .recommend__image { margin-bottom: 2%; }

#LP .recommend__caption {
	font-size: 3.6vw;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.5;
	text-align: center;
}

#LP .recommend__ecLink { width: 90%; }

/* LINE ID連携クーポンの注意事項 */
#LP .notes__h3 {
	color: var(--lp-color_vivid-green);
	font-size: 5.5vw;
	font-weight: 900;
	letter-spacing: -.05em;
	text-align: center;
	margin-bottom: 4%;
}

#LP .notes__list {
	margin: 0 auto;
	width: 100%;
}

#LP .notes__list a {
	border-bottom: 1px solid var(--lp-color_black);
	color: var(--lp-color_black);
    text-decoration: none;
	padding: 0 .5%;
}

#LP .notes__list time {
	font-weight: 600;
	padding: 0 .2em;
}

#LP .notes__list .point {
	border-bottom: 2px solid var(--lp-color_yellow);
	letter-spacing: -.05em;
}

#LP .notes__list > li {
	color: var(--lp-color_black);
	font-size: 3vw;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: -.05em;
	text-align: left;
	padding-left: 1em;
}
#LP .notes__list > li::before {
    content: '※';
	display: inline-block;
	text-align: center;
	margin-left: -1em;
	width: 1em;
}
#LP .notes__list > li:not(:last-of-type) { margin-bottom: .35em; }

/* クーポンコードの使い方 */
#LP .usage__h2 {
    background-color: var(--lp-color_vivid-green);
    border-radius: 7px 7px 0 0;
    color: var(--lp-color_white);
    font-size: 6vw;
    font-weight: 900;
    letter-spacing: .05em;
    text-align: center;
    padding: 3% 0;
}

#LP .usage__list {
    background-color: var(--lp-color_white);
    padding: 5% 0 8% 0;
	width: 100%;
}

#LP .usage__list > li {
	margin: 0 auto;
	width: 100%;
}

#LP .usage__list > li:not(:last-of-type) {
	background-image: url('../images/common/wh_main_icon-arrow_bottom.png');
	background-position: bottom 2.5em center;
	background-repeat: no-repeat;
	background-size: 18.2% auto;
	padding-bottom: 20%;
}

#LP .usage__h3 {
	font-size: 2.8vw;
	font-weight: bold;
	line-height: 1.5;
	text-align: left;
	position: relative;
}

#LP .usage__list > li i.number {
	background-color: var(--lp-color_yellow);
    border-radius: 50%;
    color: var(--lp-color_black);
    font-size: 4vw;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    display: block;
    position: relative;
    width: 1.5em;
    height: 1.5em;
}
#LP .usage__list > li i.number::before {
	font-family: 'Poppins', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
#LP .usage__list > li:nth-of-type(1) i.number::before { content: '1'; }
#LP .usage__list > li:nth-of-type(2) i.number::before { content: '2'; }
#LP .usage__list > li:nth-of-type(3) i.number::before { content: '3'; }
#LP .usage__list > li:nth-of-type(4) i.number::before { content: '4'; }
#LP .usage__list > li:nth-of-type(5) i.number::before { content: '5'; }

#LP .usage__h3 .emphasis {
	color: var(--lp-color_vivid-green);
	font-size: 3.8vw;
	font-weight: bold;
	letter-spacing: -.05em;
}

#LP .usage__h3 .check {
	display: inline-flex;
	align-items: center;
}

#LP .usage__h3__inner {
	font-size: 3.8vw;
	font-weight: bold;
	letter-spacing: -.05em;
	display: flex;
    flex-flow: row wrap;
	justify-content: center;
    gap: .75em;
}

#LP .usage__h3__inner,
#LP .usage__h3 .emphasis,
#LP .usage__h3 .device-sp.newline,
#LP .usage__h3 .device-sp.inline,
#LP .usage__h3 .device-pc.inline { font-weight: bold; }

#LP .usage__h3 .device-sp.inline { display: inline; }
#LP .usage__h3 .device-pc.inline { display: none; }

#LP .usage__image {
	margin: 0 auto;
	padding-top: 2.5%;
	width: 90%;
}

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

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

	/* ページ全体の共通スタイル */
	#LP .device-sp { display: none; }
	#LP .device-pc { display: block; }

	#LP .device-sp.newline,
	#LP .txt_block.device-sp { display: inline; }

	#LP .common__button { width: 500px; }

	#LP .common__button a { font-size: 20px; }

	#LP .common__button a::before {
		top: calc(50% - (16px / 2));
		right: 1em;
		width: 16px;
		height: 16px;
	}

	/* キービジュアル */
	#LP .kvArea__h1 { width: fit-content; }

	/* メインコンテンツ共通 */
	#LP .mainArea__inner {
		margin: 0 auto;
		padding: 55px 10px 70px 10px;
		max-width: 1000px;
	}

	#LP .mainArea__block:not(:last-of-type) { margin-bottom: 65px; }

	#LP .mainArea__common-h2 {
		font-size: 34px;
		margin-bottom: 19px;
	}

	#LP .mainArea__block {
		width: 100%;
		max-width: 980px;
	}

	/* クーポンコード本体と説明書き */
	#LP .code__inner {
		padding-bottom: 56px;
		width: 100%;
		max-width: 600px;
	}

	#LP .code__block:not(:last-of-type) { margin-bottom: 40px; }

	#LP .couponcode__h2 {
		font-size: 38px;
		padding: 25px 0 10px 0;
	}

	#LP .couponcode__border { background-size: 18px auto; }

	#LP .couponcode__border__line {
		width: calc(100% - 36px);
		height: 36px;
	}

	#LP .couponcode__border__line > span {
		background: repeating-linear-gradient(
			90deg,
			var(--lp-color_gray) 0,  var(--lp-color_gray) 8px,
			transparent 0, transparent 16px
		);
		width: calc(100% - 28px);
	}

	#LP .couponcode__body {
		row-gap: 30px;
		width: fit-content;
	}
	#LP .couponcode__body > li:last-of-type { width: 100%; }
	#LP .couponcode__body .js-copytext { font-size: 63px; }

	#LP .couponcode__message { padding: 20px 30px 30px 30px; }
	#LP .couponcode__message > p:not(:last-of-type) { margin-bottom: 1.5em; }

	#LP .couponcode__explanation {
		font-size: 16px;
		font-weight: 600;
		letter-spacing: .05em;
		line-height: 1.6;
	}

	#LP .couponcode__deadline {
		font-size: 26px;
		font-weight: 500;
	}

	/* クーポンコードの使い方はこちら */
	#LP .conductor__anchor { margin-bottom: 30px; }

	#LP .conductor__anchor > li a { font-size: 20px; }

	#LP .conductor__anchor > li a::before { 
		top: calc(50% - (16px * 1.4 / 2));
		right: 1em;
		width: 16px;
		height: 16px;
	}

	#LP .conductor__links > .common__button:not(:last-of-type) { margin-bottom: 30px; }

	/* おすすめカテゴリー */
	#LP .recommend { margin-bottom: 40px; }

	#LP .recommend__block { padding: 35px 0 60px 0; }
	#LP .recommend__block:not(:last-of-type) { margin-bottom: 120px; }

    #LP .recommend__h2 {
		margin-top: -90px;
		margin-bottom: 35px;
        width: fit-content;
    }

	#LP .recommend__category {
		gap: 40px;
		padding-bottom: 60px;
		max-width: 710px;
	}

	#LP .recommend__category > li {
		flex-basis: 100%;
		max-width: 210px;
	}
	#LP .recommend__category > li:not(:nth-last-of-type(-n+2)) { margin-bottom: 0; }

	#LP .recommend__image { margin-bottom: 10px; }

	#LP .recommend__caption { font-size: 18px; }

	/* LINE ID連携クーポンの注意事項 */
	#LP .notes { margin-bottom: 50px; }

	#LP .notes__h3 {
		font-size: 26px;
		margin-bottom: 25px;
	}

	#LP .notes__list { width: fit-content; }

	#LP .notes__list > li {
		font-size: 14px;
		font-weight: 500;
		line-height: 1.35;
	}

	/* クーポンコードの使い方 */
	#LP .usage__h2 {
        font-size: 42px;
        padding: 15px 0;
    }

    #LP .usage__list { padding: 40px 0 60px 0; }

    #LP .usage__list > li { max-width: fit-content; }

	#LP .usage__list > li:not(:last-of-type) {
		background-position: bottom 48px center;
		background-size: 104px auto;
		padding-bottom: 118px;
	}

	#LP .usage__h3 { font-size: 20px; }

	#LP .usage__h3__inner,
	#LP .usage__h3 .emphasis,
	#LP .usage__h3 .device-sp.newline { font-size: 16px; }

	#LP .usage__list > li i.number { font-size: 20px; }

	#LP .usage__h3__inner {
		align-items: center;
		gap: .5em;
	}

	#LP .usage__h3 .device-sp.inline { display: none; }
	#LP .usage__h3 .device-pc.inline { display: inline; }

	#LP .usage__image {
		padding-top: 15px;
		width: 100%;
	}
}