@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: #000;
	--lp-color_white: #fff;

	--lp-color_kv-red: #ef1f1e;
	--lp-color_kv-orange: #f8a91f;

	--lp-color_contents-orange-dark: #ff9a34;
	--lp-color_contents-orange-middle: #ffc258;
}

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

/* ページ全体の共通スタイル */
#LP {
	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: var(--lp-color_white);
	border-radius: 10px;
	color: var(--lp-color_black);
	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 .textBlock { display: block; }

#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__header__ribbon {
	color: var(--lp-color_white);
	font-size: 5vw;
	font-weight: 900;
	position: relative;
	text-align: center;
	margin: 0 auto;
}

#LP .common__header__ribbon > .textBlock {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}

#LP .common__bubble {
	font-weight: 900;
	text-align: center;
	line-height: 1;
	position: relative;
	margin: 0 auto;
	margin-bottom: .5em;
	padding: 0 1.1em;
	width: fit-content;
}

#LP .common__bubble::before,
#LP .common__bubble::after {
	position: absolute;
	top: calc(50% - .5em);
}

#LP .common__bubble::before {
	content: "\FF3C";
	left: -.1em;
}
#LP .common__bubble::after {
	content: "\FF0F";
	right: -.1em;
}

#LP .common__bubble > .textBlock { display: inline-block; }

/* キービジュアル */
#LP .kvArea__inner,
#LP .kvArea__h1 {
	margin: 0 auto;
	width: 100%;
}

/* メインコンテンツ共通 */
#LP .mainArea {
	background: repeating-linear-gradient(
		to right,
			var(--lp-color_contents-orange-dark) 0,
			var(--lp-color_contents-orange-dark) 8%,
			var(--lp-color_contents-orange-middle) 8%,
			var(--lp-color_contents-orange-middle) 16%
		);
}

#LP .mainArea__inner {
	padding: 6% 0 12% 0;
	width: 100%;
}

#LP .mainArea__header {
	color: var(--lp-color_black);
	font-size: 4.5vw;
	font-weight: 900;
	line-height: 1.8;
	text-align: center;
	margin-bottom: 14%;
}
#LP .mainArea__header .textBlock.device-sp { display: block; }

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

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

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

#LP .category__slider__more {
	position: absolute;
	right: 0;
	top: .25em;
	z-index: 3;
}

#LP .category__slider__more a {
	border-bottom: 2px solid var(--lp-color_black);
	color: var(--lp-color_black);
	font-size: 3.5vw;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	text-decoration: none;
	opacity: 0;
	padding: .25em;
}

#LP .is_show .category__slider__more a { opacity: 1; }

#LP .category__slider__more a::after {
    border-top: 3px solid var(--lp-color_black);
    border-right: 3px solid var(--lp-color_black);
    content: '';
    vertical-align: middle;
    transform: rotate(45deg);
    width: .5em;
    height: .5em;
}

#LP .recommend__block {
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
}

#LP .recommend__block:not(:last-of-type) { margin-bottom: 8%; }
#LP .recommend__block > *:not(:last-of-type) { margin-bottom: 6%; }

#LP .recommend__header { margin-bottom: 6%; }

#LP .recommend__shop {
	background-color: transparent;
	font-size: 2vw;
	font-weight: 700;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 1em;
	position: relative;
	overflow: hidden;
	transition: background .4s ease, height .4s;
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
}

#LP .recommend__shop > li {
	background-color: var(--lp-color_white);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	transition: .4s filter;
	position: relative;
	width: calc((100% - 1em * 2) / 3);
}
#LP .recommend__shop > li:hover { filter: brightness(.9); }

#LP .recommend__shop a {
	border: 3px solid #eee;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 2em;
	width: 100%;
	height: 100%;
}
#LP .recommend__shop a:hover { filter: initial; }

#LP .recommend__shop > li:not(:has(.recommend__tag.shopCoupon.timeSale)) a,
#LP .recommend__shop > li:not(:has(.recommend__tag.shopCoupon)) a,
#LP .recommend__shop > li:not(:has(.recommend__tag.timeSale)) a { padding-top: 0; }

#LP .recommend__shop a img {
	display: block;
	width: 60%;
}

#LP .recommend__tag {
	background-color: #dc3545;
	color: var(--lp-color_white);
	font-size: 1em;
	font-weight: 700;
	letter-spacing: -.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: auto;
	min-height: calc(1em + (1.25em / 2));
}

#LP .recommend__tag.bulkPurchase {
	background-color: #dbeafe;
	border-radius: 100px;
	box-shadow: 0 0 1px rgba(25, 25, 25, .4);
	color: #064ead;
	font-size: .9em;
	display: inline-flex;
	top: initial;
	left: initial;
	bottom: .75em;
	right: .75em;
	padding: .1em 1em;
	width: fit-content;
}

#LP .recommend__tag.shopCoupon > .textBlock::before { content: "ショップクーポン"; }

#LP .recommend__tag.shopCoupon.timeSale > .textBlock::before {
	content: "ショップクーポン・タイムセール";
	font-size: .8em;
	display: block;
}

#LP .recommend__tag.bulkPurchase > .textBlock::before { content: "まとめ割"; }

#LP .recommend__banner {
	font-size: 2.4vw;
	margin: 0 auto;
	width: 100%;
}
#LP .recommend__banner.edge a {
	background-color: var(--lp-color_white);
	display: block;
	padding: .5em;
}
#LP .recommend__banner.edge a,
#LP .recommend__banner.edge a img { border-radius: .5em; }

#LP .recommend__baloon { font-size: 1.4em; }

#LP .recommend__button a.mop { background-color: var(--lp-color_kv-red); }

#LP .recommend__link > .recommend__button:not(:last-of-type) { margin-bottom: 1.5em; }

#LP .recommend__notes {
	font-size: 2.4vw;
	margin-top: 1em;
}

#LP .recommend__notes > li {
    text-align: center;
    position: relative;
}

#LP .recommend__notes > li::before {
	content: '※';
	display: inline-block;
    position: absolute;
	margin-left: -1em;
	width: 1.1em;
}
#LP .recommend__notes > li:not(:last-of-type) { margin-bottom: .5em; }

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

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

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

	#LP .common__button { width: 600px; }

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

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

	#LP .common__header__ribbon {
		font-size: 32px;
		max-width: 600px;
	}

	/* キービジュアル */
	#LP .kvArea {
		background: repeating-linear-gradient(
			to right,
				var(--lp-color_kv-red) 0,
				var(--lp-color_kv-red) 50%,
				var(--lp-color_kv-orange) 50%,
				var(--lp-color_kv-orange) 100%
			);
	}

	#LP .kvArea__inner {
		background-image: url("../images/pc/wh_kv_bg.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 2000px auto;
	}

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

	/* メインコンテンツ共通 */
	#LP .mainArea {
		background: repeating-linear-gradient(
			to right,
				var(--lp-color_contents-orange-dark) 0,
				var(--lp-color_contents-orange-dark) 100px,
				var(--lp-color_contents-orange-middle) 100px,
				var(--lp-color_contents-orange-middle) 200px
			);
	}

	#LP .mainArea__inner {
		margin: 0 auto;
		padding: 55px 10px 70px 10px;
		max-width: 1280px;
	}

	#LP .mainArea__header {
		font-size: 26px;
		margin-bottom: 104px;
	}
	#LP .mainArea__header .textBlock.device-sp { display: inline; }

	#LP .mainArea__block {
		width: 100%;
		max-width: 1280px;
	}
	#LP .mainArea__block:not(:last-of-type) { margin-bottom: 65px; }

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

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

    #LP .category__header {
		margin-top: -90px;
		margin-bottom: 35px;
    }

	#LP .category__slider {
		margin: 0 auto;
		max-width: 980px;
	}

	#LP .category__slider__more a { font-size: 22px; }

	#LP .recommend__block:not(:last-of-type) { margin-bottom: 60px; }
	#LP .recommend__block > *:not(:last-of-type) { margin-bottom: 50px; }

	#LP .recommend__header { margin-bottom: 35px; }

	#LP .recommend__shop { font-size: 10px; }
	#LP .recommend__shop > li { width: calc((100% - 1em * 4) / 5); }

	#LP .recommend__tag { font-size: 1.5em; }
	#LP .recommend__tag.bulkPurchase { font-size: 1.1em; }
	#LP .recommend__tag.shopCoupon.timeSale > .textBlock { font-size: .9em; }

	#LP .recommend__banner {
		font-size: 16px;
		max-width: fit-content;
	}

	#LP .recommend__baloon { font-size: 2.1em; }

	#LP .recommend__notes { font-size: 14px; }
}