@charset "UTF-8";

/* ----------------------------------
 バレンタインデーギフト 2026
---------------------------------- */
:root {
  --lp-color01 : #661d00;
  --lp-color02 : #a10822;
  --lp-color03 : #CC3300;
}

br.pc-only { display: none;}

@media screen and (min-width: 768px) {
  br.pc-only { display: inline;}
}

/* レイアウト
---------------------------------- */
.content-inner {
	width: 100%;
	max-width: 1020px;
	margin: 0 auto;
}

#valentine * { box-sizing: border-box;}
#valentine h1,
#valentine h2,
#valentine h3,
#valentine h4 { padding: 0; margin: 0; border: none;}

#valentine section { margin: 0 auto 120px;}

@media screen and (max-width: 800px) {
	#valentine section { margin: 0 auto 80px;}
}

/* メインビジュアル
---------------------------------- */
#valentine .sec-mv { margin-bottom: 1rem; margin-bottom: clamp(1rem, -0.2rem + 5.12vw, 3rem);}
#valentine .sec-mv .visual { max-width: 1200px; margin: 0 auto; text-align: center;}
#valentine .sec-mv .visual img { width: 100%; vertical-align: top;}
#valentine .sec-mv .page-lead { margin-top: 1rem; margin-top: clamp(1rem, -0.2rem + 5.12vw, 3rem);}
#valentine .sec-mv .page-lead .page-lead-text {
  width: calc(630 / 710 * 100%);
	margin: 1.25rem auto 0;
  margin: clamp(1.25rem, 1.063rem + 0.8vw, 1.563rem) auto 0;
  font-size: 16px;
	text-align: center;
  letter-spacing: 0.08em;
  line-height: 2;
}

@media screen and (max-width: 800px) {
	#valentine .sec-mv .page-lead .page-lead-text { text-align: left;}
}

/* ページ内リンク
---------------------------------- */
#valentine .sec-anchor .anchor-list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1px;}
#valentine .sec-anchor .anchor-list li { width: calc((100% - 1px * 4)/5);}
#valentine .sec-anchor .anchor-list li a {
	height: 100%;
  padding: 0.5em 3em 0.5em 1.5em;
  color: #fff;
  font-size: 0.813rem;
  font-size: clamp(0.813rem, 0.7rem + 0.48vw, 1rem);
  font-weight: normal;
  text-align: left;
  text-decoration: none;
  letter-spacing: 0.01em;
  display: flex;
	align-items: center;
  background-color: var(--lp-color01);
  position: relative;
}
#valentine .sec-anchor .anchor-list li a::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-top: #FFF 1px solid;
  border-right: #FFF 1px solid;
  top: 50%;
  right: 1em;
  transform: translateY(-51%) rotate(135deg);
}

@media screen and (max-width: 800px) {
	#valentine .sec-anchor .anchor-list li { width: calc(50% - 0.5px); min-height: 48px;}
	#valentine .sec-anchor .anchor-list li:nth-child(5) { width: 100%;}
}

/* 商品
---------------------------------- */
#valentine .sec-product { padding: 0 20px;}
#valentine .sec-product h2.ttl {
  max-width: 500px;
	width: 76%;
  padding: 10px 0 15px;
  margin: 0 auto 70px;
	border-top: var(--lp-color01) 3px double;
	border-bottom: var(--lp-color01) 3px double;
  text-align: center;
	line-height: 1.0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#valentine .sec-product h2.ttl .eng { font-size: 50px; font-family: var(--fontUnna); font-weight: 500; text-align: center; color: var(--lp-color01);}
#valentine .sec-product h2.ttl .jp  { margin-top: 10px; font-size: 16px; text-align: center; color: var(--lp-color01);}
#valentine .sec-product .product-box + .product-box { margin-top: 100px;}
#valentine .sec-product .product-box { display: flex; justify-content: space-between; align-items: center;}
#valentine .sec-product .product-list li.product-box:nth-child(2n) { flex-direction: row-reverse;}
#valentine .sec-product .product-box .image { width: calc(50% - 40px);}
#valentine .sec-product .product-box .image .pop {
	margin-bottom: 10px;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.008em;
  color: var(--lp-color02);
}
#valentine .sec-product .product-box .image .img { width: 100%; padding: 100% 0 0; text-align: center; position: relative;}
#valentine .sec-product .product-box .image .img figure {
  display: flex;
  justify-content: center;
  align-items: center;
	background: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#valentine .sec-product .product-box .image .img figure img { max-width: 100%; max-height: 100%;}
#valentine .sec-product .product-box .desc { width: calc(50% - 20px);}
#valentine .sec-product .product-box .desc .name {
	margin-bottom: 0.813rem;
	margin-bottom: clamp(0.813rem, 0.7rem + 0.48vw, 1rem);
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 0.7rem + 1.28vw, 1.5rem);
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.008em;
  color: #000;
}
#valentine .sec-product .product-box .desc .name .small {
  font-size: 0.813rem;
  font-size: clamp(0.813rem, 0.7rem + 0.48vw, 1rem);
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.008em;
  color: #000;
}
#valentine .sec-product .product-box .desc .text {
	margin-bottom: 1.125rem;
	margin-bottom: clamp(1.125rem, 0.9rem + 0.96vw, 1.5rem);
  font-size: 1rem;
  font-size: clamp(1rem, 0.925rem + 0.32vw, 1.125rem);
  letter-spacing: 0.08em;
  line-height: 1.62;
}
#valentine .sec-product .product-box .recommend { padding: 40px 20px 20px; margin: 40px 0 30px; border: var(--lp-color02) 1px solid; position: relative;}
#valentine .sec-product .product-box .recommend-ttl {
	padding: 10px 20px;
  font-size: 1rem;
  font-size: clamp(1rem, 0.925rem + 0.32vw, 1.125rem);
	white-space: nowrap;
	word-break: keep-all;
	color: #FFF;
	background: var(--lp-color02);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
#valentine .sec-product .product-box .recommend-text { font-size: 1rem; font-size: clamp(1rem, 0.925rem + 0.32vw, 1.125rem); color: var(--lp-color02);}
#valentine .sec-product .product-box .button { display: flex; justify-content: center;}
#valentine .sec-product .product-box .button a {
  width: calc(500 / 630 * 100%);
  padding: 0.5em;
	border: var(--lp-color01) 2px solid;
  border-radius: 10px;
  background-color: var(--lp-color01);
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.01em;
  color: #FFF;
  display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}
#valentine .sec-product .product-box .button a:hover { color: var(--lp-color01); background: #FFF;}

#valentine .sec-product li.product-box:nth-child(2n) .button a { border: var(--lp-color02) 2px solid; background-color: var(--lp-color02);}
#valentine .sec-product li.product-box:nth-child(2n) .button a:hover { color: var(--lp-color02); background: #FFF;}

@media screen and (max-width: 800px) {
	#valentine .sec-product h2.ttl { margin-bottom: 40px;}
	#valentine .sec-product h2.ttl .eng { font-size: 38px;}
	#valentine .sec-product h2.ttl .jp  { font-size: 12px;}
	#valentine .sec-product .product-box { display: block;}
	#valentine .sec-product .product-box .image { width: 85%; max-width: 500px; margin: 0 auto 30px;}
	#valentine .sec-product .product-box .desc { width: 100%;}
}

/* セルフラッピングアイテム
---------------------------------- */
#valentine .sec-wrapping { background: #F7E9DF;}
#valentine .sec-wrapping .content-inner { padding: 80px 20px;}
#valentine .sec-wrapping h2.ttl { padding: 0; margin: 0 0 20px; text-align: center; line-height: 1.0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#valentine .sec-wrapping h2.ttl .eng { font-size: 50px; font-family: var(--fontUnna); font-weight: 500; text-align: center;}
#valentine .sec-wrapping h2.ttl .jp  { margin-top: 10px; font-size: 1rem; font-size: clamp(1rem, 0.925rem + 0.32vw, 1.125rem); font-weight: normal; text-align: center;}
#valentine .sec-wrapping .frame { display: flex; justify-content: space-between; align-items: center;}
#valentine .sec-wrapping .frame .image { width: 50%;}
#valentine .sec-wrapping .frame .desc { width: calc(50% - 60px);}
#valentine .sec-wrapping .frame .desc .text {
	margin-bottom: 1.125rem;
	margin-bottom: clamp(1.125rem, 0.9rem + 0.96vw, 1.5rem);
  font-size: 1rem;
  font-size: clamp(1rem, 0.925rem + 0.32vw, 1.125rem);
  letter-spacing: 0.08em;
  line-height: 2.0;
}
#valentine .sec-wrapping .frame .desc .button { display: flex; justify-content: center;}
#valentine .sec-wrapping .frame .desc .button a {
  width: calc(500 / 630 * 100%);
  padding: 0.5em;
	border: var(--lp-color01) 2px solid;
  border-radius: 10px;
  background-color: var(--lp-color01);
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.01em;
  color: #FFF;
  display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}
#valentine .sec-wrapping .frame .desc .button a:hover { color: var(--lp-color01); background: #FFF;}

@media screen and (max-width: 800px) {
	#valentine .sec-wrapping .content-inner { padding: 60px 20px;}
	#valentine .sec-wrapping .ttl { margin: 0 0 5px; font-size: 36px;}
	#valentine .sec-wrapping .frame { display: block;}
	#valentine .sec-wrapping .frame .image { width: 100%; max-width: 500px; margin: 0 auto 20px;}
	#valentine .sec-wrapping .frame .desc { width: 100%;}
}

/* お役立ちコラム
---------------------------------- */
#valentine .sec-columns .title { padding: 0 0 0 320px; text-align: left; position: relative;}
#valentine .sec-columns .title::before {
  content: '';
  width: 5.813rem;
  width: clamp(5.813rem, 2.363rem + 14.72vw, 11.563rem);
	height: 4.875rem;
  height: clamp(4.875rem, 1.95rem + 12.48vw, 9.75rem);
	padding: 0 0 0 33%;
  display: block;
  background-image: url("/img/pages/valentine/2026/icon_column.png");
  background-size: contain;
	background-position: left center;
  background-repeat: no-repeat;
  position: absolute;
	top: 50%;
	left: 100px;
	transform: translateY(-50%);
}
#valentine .sec-columns .title .ttl {
  margin: 0;
  padding: 0;
	font-size: 1.125rem;
  font-size: clamp(1.125rem, 0.9rem + 0.96vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.12em;
}
#valentine .sec-columns .title .sub {
	margin-top: 0.875rem;
  margin-top: clamp(0.875rem, 0.8rem + 0.32vw, 1rem);
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.65rem + 0.96vw, 1.25rem);
}
#valentine .sec-columns .content-box { margin-top: 2.125rem; margin-top: clamp(2.125rem, 1.225rem + 3.84vw, 3.625rem);}
#valentine .sec-columns .content-box .list { display: flex; flex-direction: column; gap: 0.875rem; gap: clamp(0.875rem, 0.65rem + 0.96vw, 1.25rem); counter-reset: number 0;}
#valentine .sec-columns .content-box .list li { width: 100%; counter-increment: number;}
#valentine .sec-columns .content-box .list li a {
  width: 100%;
  padding: 1.82em 3.57em 1.82em calc((86 / 710 * 100%) + 30px);
  display: block;
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.65rem + 0.96vw, 1.25rem);
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #707070;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
#valentine .sec-columns .content-box .list li a:before {
  content: counter(number);
  width: calc(86 / 710 * 100%);
  height: 100%;
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 0.975rem + 2.24vw, 2.375rem);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--lp-color01);
  position: absolute;
  top:0;
  left: 0;
}
#valentine .sec-columns .content-box .list li a::after {
  content: '';
  width: 0.57em;
  height: 1em;
  display: block;
  background-image: url("/img/pages/valentine/2026/icon_arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  right: 1.21em;
  transform: translateY(-50%);
}

[data-browse-mode="S"] #valentine .sec-columns { margin-bottom: 0;}

@media screen and (max-width: 800px) {
	#valentine .sec-columns .title { padding: 4.875rem 0 0; padding: calc(clamp(4.875rem, 1.95rem + 12.48vw, 9.75rem) + 30px) 0 0; text-align: center;}
	#valentine .sec-columns .title::before { background-position: center; top: 0; left: 50%; transform: translateY(0%) translateX(-50%);}
	#valentine .sec-columns .content-box .list { padding: 0 20px;}
	#valentine .sec-columns .content-box .list li a { padding: 14px 3.57em 14px calc((86 / 710 * 100%) + 20px);}
}