@charset "UTF-8";

/*-----------------------------------
	11月 お買い物エンジョイキャンペーン
	画像はセールバナー以外すべて CSS / インラインSVG
-----------------------------------*/

#wrapper_hd {
	--nv-brick: #8e3322;
	--nv-maple: #c8502e;
	--nv-mustard: #e2a72e;
	--nv-cream: #f7eedf;
	--nv-paper: #fffaf2;
	--nv-ink: #3d2a20;
	--nv-sub: #7a5a48;
	--nv-line: #e6d3b8;

	color: var(--nv-ink);
	letter-spacing: .08em;
	line-height: 1.7;
	overflow: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
	background: var(--nv-cream);
}
#wrapper_hd *,
#wrapper_hd *:before,
#wrapper_hd *:after { box-sizing: border-box; }
#wrapper_hd h1, #wrapper_hd h2, #wrapper_hd h3, #wrapper_hd p { margin: 0; }
#wrapper_hd ul { padding: 0; margin: 0; }
#wrapper_hd li { list-style: none; }
#wrapper_hd img { width: 100%; height: auto; vertical-align: bottom; }
#wrapper_hd a { text-decoration: none !important; transition: .3s; }
#wrapper_hd .inner_hd { width: 1100px; max-width: 90%; margin: 0 auto; position: relative; }
#wrapper_hd .sp_hd { display: none; }

@media (max-width: 768px) {
	#wrapper_hd .sp_hd { display: inline; }
}

/*-----------------------------------
	hero
-----------------------------------*/

#wrapper_hd #hero_hd {
	position: relative;
	padding: 90px 0 110px;
	text-align: center;
	color: var(--nv-paper);
	overflow: hidden;
	/* オレンジのバイアスチェック（斜めの帯を2方向に重ねて格子に） */
	background-color: #e0601e;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
		repeating-linear-gradient(45deg, rgba(160,45,10,.22) 0 90px, rgba(160,45,10,0) 90px 180px),
		repeating-linear-gradient(-45deg, rgba(160,45,10,.22) 0 90px, rgba(160,45,10,0) 90px 180px);
}
/* 下端の波 */
#wrapper_hd #hero_hd:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 40px;
	background: var(--nv-cream);
	-webkit-mask: radial-gradient(30px 22px at 50% 100%, #000 98%, transparent) 0 0 / 60px 40px repeat-x;
	        mask: radial-gradient(30px 22px at 50% 100%, #000 98%, transparent) 0 0 / 60px 40px repeat-x;
}
#wrapper_hd #hero_hd .inner_hd { z-index: 2; }

#wrapper_hd #hero_hd .tag_hd {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 28px;
}
#wrapper_hd #hero_hd .tag_hd li {
	border: 1px solid rgba(255,250,242,.7);
	border-radius: 100px;
	padding: 4px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
}
#wrapper_hd #hero_hd #logo_hd {
	font-size: clamp(30px, 5.6vw, 64px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .1em;
	margin: 8px 0 26px;
	text-shadow: 0 3px 0 rgba(0,0,0,.18);
}
#wrapper_hd #hero_hd #logo_hd .sub_hd {
	display: block;
	font-size: .55em;
	letter-spacing: .12em;
	margin-bottom: .1em;
}
#wrapper_hd #hero_hd #logo_hd .sub_hd em {
	font-style: normal;
	color: #fbd25c;
	font-size: 1.35em;
	margin: 0 .05em;
}
#wrapper_hd #hero_hd #logo_hd .main_hd {
	display: block;
	font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
	font-weight: 900;
	font-size: 1.25em;
	line-height: 1.15;
	letter-spacing: .02em;
}
#wrapper_hd #hero_hd #logo_hd .main_hd em { font-style: normal; color: #fbd25c; }
#wrapper_hd #hero_hd #logo_hd .cp_hd {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	margin-top: 1em;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: .56em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .4em;
	text-indent: .4em; /* 字間による右ずれを補正 */
	color: #fbefd2;
	text-shadow: none;
}
#wrapper_hd #hero_hd #logo_hd .cp_hd:before,
#wrapper_hd #hero_hd #logo_hd .cp_hd:after {
	content: "";
	width: 3em;
	height: 1px;
	background: rgba(251,239,210,.8);
}
#wrapper_hd #hero_hd #logo_hd .cpStar_hd {
	width: .8em;
	height: .8em;
	color: #fbd25c;
	flex-shrink: 0;
}
@media (max-width: 560px) {
	#wrapper_hd #hero_hd #logo_hd { font-size: 8.4vw; letter-spacing: .06em; }
	#wrapper_hd #hero_hd #logo_hd .main_hd { font-size: 1.05em; letter-spacing: 0; }
	#wrapper_hd #hero_hd #logo_hd .cp_hd { font-size: .6em; letter-spacing: .28em; text-indent: .28em; gap: .5em; margin-top: .85em; }
	#wrapper_hd #hero_hd #logo_hd .cp_hd:before,
	#wrapper_hd #hero_hd #logo_hd .cp_hd:after { width: 2em; }
}
#wrapper_hd #hero_hd .period_hd {
	display: inline-block;
	background: #fbefd2;
	color: #c2481a;
	font-weight: 700;
	font-size: clamp(16px, 2.4vw, 26px);
	padding: 10px 32px;
	border-radius: 100px;
	letter-spacing: .08em;
}
#wrapper_hd #hero_hd .period_hd small { font-size: .65em; margin-left: .15em; }
#wrapper_hd .jst_hd {
	display: inline-block;
	vertical-align: middle;
	font-size: .55em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	margin-left: .8em;
	padding: .45em .8em;
	border-radius: 100px;
	background: #c2481a;
	color: #fff;
	position: relative;
	top: -.1em;
}
#wrapper_hd .periodBox_hd .jst_hd { background: var(--nv-brick); }

/* 星（きらめき） */
#wrapper_hd #hero_hd .star_hd { position: absolute; z-index: 1; color: #fbefd2; pointer-events: none; animation: nvTwinkle 2.8s ease-in-out infinite; }
#wrapper_hd #hero_hd .star_hd svg { width: 100%; height: 100%; display: block; }
#wrapper_hd #hero_hd .s01_hd { width: 30px; height: 30px; top: 22%; left: 16%; }
#wrapper_hd #hero_hd .s02_hd { width: 22px; height: 22px; top: 62%; left: 5%;  animation-delay: -.7s; }
#wrapper_hd #hero_hd .s03_hd { width: 26px; height: 26px; top: 76%; left: 20%; animation-delay: -1.4s; }
#wrapper_hd #hero_hd .s04_hd { width: 18px; height: 18px; top: 12%; left: 34%; animation-delay: -2.1s; opacity: .8; }
#wrapper_hd #hero_hd .s05_hd { width: 30px; height: 30px; top: 26%; right: 15%; animation-delay: -.4s; }
#wrapper_hd #hero_hd .s06_hd { width: 24px; height: 24px; top: 60%; right: 5%;  animation-delay: -1.1s; }
#wrapper_hd #hero_hd .s07_hd { width: 26px; height: 26px; top: 74%; right: 19%; animation-delay: -1.8s; }
#wrapper_hd #hero_hd .s08_hd { width: 18px; height: 18px; top: 12%; right: 33%; animation-delay: -2.5s; opacity: .8; }

/* 星をつないだ細い弧線 */
#wrapper_hd #hero_hd .arc_hd {
	position: absolute;
	z-index: 1;
	border: 2px solid rgba(251,239,210,.75);
	border-radius: 50%;
	pointer-events: none;
}
#wrapper_hd #hero_hd .arc01_hd { width: 55%; height: 110%; left: -30%; top: -78%; }
#wrapper_hd #hero_hd .arc02_hd { width: 55%; height: 110%; right: -30%; bottom: -80%; }

@keyframes nvTwinkle {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50%      { transform: scale(.7) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
	#wrapper_hd #hero_hd .star_hd { animation: none; }
}

@media (max-width: 768px) {
	#wrapper_hd #hero_hd { padding: 56px 0 80px; }
	#wrapper_hd #hero_hd .tag_hd li { font-size: 12px; padding: 3px 12px; }
	#wrapper_hd #hero_hd .period_hd { padding: 8px 20px; }
	#wrapper_hd #hero_hd .s01_hd { top: 6%; left: 6%; }
	#wrapper_hd #hero_hd .s05_hd { top: 6%; right: 6%; }
	#wrapper_hd #hero_hd .s02_hd { top: 48%; left: 4%; }
	#wrapper_hd #hero_hd .s06_hd { top: 48%; right: 4%; }
	#wrapper_hd #hero_hd .s03_hd { top: 82%; left: 10%; }
	#wrapper_hd #hero_hd .s07_hd { top: 82%; right: 10%; }
	#wrapper_hd #hero_hd .s04_hd,
	#wrapper_hd #hero_hd .s08_hd { display: none; }
	#wrapper_hd #hero_hd .arc01_hd { width: 80%; height: 70%; left: -45%; top: -45%; }
	#wrapper_hd #hero_hd .arc02_hd { width: 80%; height: 70%; right: -45%; bottom: -45%; }
}

/*-----------------------------------
	privilege
-----------------------------------*/

#wrapper_hd #privelege_hd { padding: 70px 0 110px; }

#wrapper_hd .secTtl_hd {
	text-align: center;
	font-size: clamp(24px, 3.4vw, 36px);
	font-weight: 700;
	color: var(--nv-brick);
	letter-spacing: .2em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
#wrapper_hd .secTtl_hd .ico_hd { width: .8em; height: .8em; color: var(--nv-maple); display: inline-block; }
#wrapper_hd .secTtl_hd .ico_hd:last-child { color: var(--nv-mustard); transform: scaleX(-1); }
#wrapper_hd .secTtl_hd svg { width: 100%; height: 100%; display: block; }

#wrapper_hd #privelege_hd .summary_hd {
	text-align: center;
	margin-top: 14px;
	font-size: clamp(15px, 1.8vw, 18px);
	color: var(--nv-sub);
	font-weight: 600;
}

#wrapper_hd .specialList_hd {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 24px;
	margin-top: 44px;
}
/* 条件（17,000円以上で） */
#wrapper_hd .condBig_hd {
	text-align: center;
	margin-top: 6px;
	font-size: clamp(20px, 2.8vw, 30px);
	font-weight: 700;
	line-height: 1.5;
}
#wrapper_hd .condBig_hd em {
	font-style: normal;
	font-size: 1.6em;
	color: var(--nv-brick);
	background: linear-gradient(transparent 62%, rgba(226,167,46,.4) 62%);
	padding: 0 .1em;
	margin-right: .05em;
}
/* ＋マーク */
#wrapper_hd .plus_hd {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--nv-brick);
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 52px;
	text-align: center;
	letter-spacing: 0;
	align-self: center;
}
#wrapper_hd .card_hd {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--nv-paper);
	border-radius: 24px;
	padding: 44px 24px 40px;
	text-align: center;
	position: relative;
	box-shadow: 0 6px 0 var(--nv-line);
}
/* ステッチ（ニット・ブランケットの縫い目イメージ） */
#wrapper_hd .card_hd:before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px dashed var(--nv-line);
	border-radius: 16px;
	pointer-events: none;
}
#wrapper_hd .card_hd .no_hd {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nv-maple);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .15em;
	padding: 8px 22px;
	border-radius: 100px;
	white-space: nowrap;
}
#wrapper_hd .card_hd.ship_hd .no_hd { background: #b8811a; }
#wrapper_hd .card_hd .cond_hd {
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 700;
}
#wrapper_hd .card_hd .cond_hd em {
	font-style: normal;
	font-size: 1.4em;
	color: var(--nv-brick);
	background: linear-gradient(transparent 62%, rgba(226,167,46,.4) 62%);
	padding: 0 .1em;
}
#wrapper_hd .card_hd .benefit_hd {
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--nv-maple);
	margin-top: 6px;
	letter-spacing: .04em;
}
#wrapper_hd .card_hd.ship_hd .benefit_hd { color: #b8811a; }
#wrapper_hd .card_hd .benefit_hd small { font-size: .5em; margin-left: .05em; }
#wrapper_hd .card_hd .note_hd {
	margin-top: 10px;
	font-size: clamp(18px, 2.2vw, 24px); /* 「円以上で」と同じ大きさ */
	font-weight: 700;
	color: var(--nv-ink);
}

@media (max-width: 768px) {
	#wrapper_hd #privelege_hd { padding: 50px 0 70px; }
	#wrapper_hd .specialList_hd { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
	#wrapper_hd .plus_hd { margin: 0 auto 12px; width: 44px; height: 44px; line-height: 44px; font-size: 26px; }
	#wrapper_hd .card_hd { padding: 38px 16px 30px; }
}

/*-----------------------------------
	detail
-----------------------------------*/

#wrapper_hd #detail_hd { background: #fff; padding: 90px 0 100px; }
#wrapper_hd #attention_hd .ttl_hd {
	font-size: clamp(18px, 2.4vw, 24px);
	font-weight: 700;
	color: var(--nv-brick);
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--nv-line);
}
#wrapper_hd .attentionList_hd li {
	position: relative;
	font-size: min(3.6vw, 15px);
	padding-left: 1.2em;
	letter-spacing: .06em;
}
#wrapper_hd .attentionList_hd li:not(:last-child) { margin-bottom: 10px; }
#wrapper_hd .attentionList_hd li:before { content: "※"; position: absolute; left: 0; top: 0; }
#wrapper_hd .attentionList_hd .em_hd { color: #c62828; font-weight: 600; }

#wrapper_hd .periodBox_hd {
	margin: 48px auto 0;
	text-align: center;
	font-size: clamp(17px, 2.4vw, 24px);
	font-weight: 700;
	padding: 18px 10px;
	border-top: 2px dashed var(--nv-line);
	border-bottom: 2px dashed var(--nv-line);
	letter-spacing: .1em;
}

/* gift（手帳プレゼント） */
#wrapper_hd #gift_hd {
	margin-top: 70px;
	background: var(--nv-paper);
	border: 2px solid var(--nv-line);
	border-radius: 28px;
	padding: 52px 5% 48px;
	text-align: center;
	position: relative;
}
#wrapper_hd #gift_hd:before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px dashed var(--nv-line);
	border-radius: 20px;
	pointer-events: none;
}
#wrapper_hd #gift_hd .giftLabel_hd {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nv-brick);
	color: var(--nv-mustard);
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 16px;
	letter-spacing: .25em;
	padding: 6px 26px;
	border-radius: 100px;
}
#wrapper_hd #gift_hd .secTtl_hd { font-size: clamp(20px, 3vw, 32px); letter-spacing: .1em; }
#wrapper_hd #gift_hd .giftLead_hd {
	margin-top: 12px;
	font-size: clamp(18px, 2.6vw, 26px);
	font-weight: 700;
}
#wrapper_hd #gift_hd .giftLead_hd em {
	font-style: normal;
	color: var(--nv-maple);
	font-size: 1.25em;
	background: linear-gradient(transparent 62%, rgba(226,167,46,.4) 62%);
	padding: 0 .1em;
}
#wrapper_hd #gift_hd .giftImg_hd {
	position: relative;
	max-width: 640px;
	margin: 28px auto 0;
}
#wrapper_hd #gift_hd .giftImg_hd img { border-radius: 12px; }
#wrapper_hd #gift_hd .giftImg_hd a { display: block; border-radius: 12px; overflow: hidden; }
#wrapper_hd #gift_hd .giftImg_hd a:hover { opacity: .8; }
#wrapper_hd #gift_hd .giftBadge_hd {
	position: absolute;
	top: -24px;
	right: -24px;
	z-index: 1;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--nv-maple);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: .05em;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(12deg);
	box-shadow: 0 0 0 4px var(--nv-paper), 0 0 0 6px var(--nv-maple);
	pointer-events: none; /* シールの上でもリンクがクリックできるように */
}
@media (max-width: 768px) {
	#wrapper_hd #gift_hd { margin-top: 50px; padding: 44px 6% 32px; border-radius: 20px; }
	#wrapper_hd #gift_hd .giftBadge_hd { width: 70px; height: 70px; font-size: 12px; top: -16px; right: -8px; }
}

/* more */
#wrapper_hd #more_hd {
	margin-top: 70px;
	background: var(--nv-cream);
	border-radius: 28px;
	padding: 48px 5% 52px;
}
#wrapper_hd #more_hd .secTtl_hd { font-size: clamp(18px, 2.6vw, 28px); letter-spacing: .1em; margin-bottom: 30px; }
#wrapper_hd #more_hd .bnr_hd { display: flex; justify-content: space-between; gap: 2%; }
#wrapper_hd #more_hd .bnr_hd li { width: 49%; }
#wrapper_hd #more_hd .bnr_hd a { display: block; border-radius: 12px; overflow: hidden; }
#wrapper_hd #more_hd .bnr_hd a:hover { opacity: .8; }

#wrapper_hd .topBtn_hd {
	display: block;
	width: 100%;
	max-width: 520px;
	margin: 44px auto 0;
	background: var(--nv-maple);
	color: #fff !important;
	text-align: center;
	font-weight: 700;
	font-size: clamp(16px, 2vw, 20px);
	padding: 18px 50px;
	border-radius: 100px;
	box-shadow: 0 6px 0 #8e3322;
	position: relative;
}
#wrapper_hd .topBtn_hd:after {
	content: "";
	position: absolute;
	right: 28px;
	top: 50%;
	width: 10px; height: 10px;
	margin-top: -5px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}
#wrapper_hd .topBtn_hd:hover { transform: translateY(6px); box-shadow: none; }

@media (max-width: 768px) {
	#wrapper_hd #detail_hd { padding: 56px 0 70px; }
	#wrapper_hd #more_hd { padding: 36px 5% 40px; border-radius: 20px; }
	#wrapper_hd #more_hd .bnr_hd { flex-direction: column; gap: 16px; }
	#wrapper_hd #more_hd .bnr_hd li { width: 100%; }
}