@charset "utf-8";
/* CSS Document */

/* ==========================================================
   Xmas2026 LP
   デザイン幅750px基準（表示は最大600px）。余白は「px / 750 * 100%」で指定
   ========================================================== */
body {
	margin: 0;
}
.main-wrap {
	width: 100%;
	max-width: min(600px, 100vw); /* 親要素が中身に合わせて広がる場合も画面幅に収める */
	margin: 0 auto;
	overflow: hidden;
	background: #1A3870;
}
/* 各パーツの指定を優先させるため :where() で詳細度を0にする */
:where(.main-wrap) img {
	display: block;
	width: 100%;
	height: auto;
}
:where(.main-wrap) :where(h1, h2, p, ul) {
	margin: 0;
	padding: 0;
}
:where(.main-wrap) ul {
	list-style: none;
}
:where(.main-wrap) :where(a, button) {
	display: block;
	transition: opacity .3s;
}
.main-wrap a:hover,
.main-wrap button:hover {
	opacity: .8;
}

/* ---------- イントロ ---------- */
.xm-intro {
	background: #1A3870;
	padding-bottom: .533%;
}
.xm-intro__txt {
	width: 70.47%;
	margin: 8.133% auto 0;
}
.xm-item-ttl {
	width: 11.73%;
	margin: 9.333% auto 0;
}
.xm-item-list {
	width: 66.47%;
	margin: 2.133% auto 0;
}
.xm-item-list li + li {
	margin-top: 3.2%;
}
.xm-start {
	margin-top: .933%;
}

/* ---------- 商品カード（定期便・通常購入 共通） ---------- */
.xm-card {
	position: relative;
	width: 95.73%;
	margin: 0 auto;
}
.xm-card--teiki {
	margin-top: -1.733%;
}
.xm-card__badge {
	position: absolute;
	top: 0;
	left: 78.28%;
	width: 21.03%;
	margin-top: .26%;
}
.xm-card__btn {
	position: absolute;
	left: 15.88%;
	width: 68.25%;
}
/* 角丸の形に沿わせるため box-shadow ではなく drop-shadow */
.xm-card__btn img {
	filter: drop-shadow(0 4px 6px rgba(90, 70, 30, .25)) drop-shadow(0 10px 18px rgba(26, 56, 112, .12));
}
.xm-card--teiki .xm-card__btn {
	top: 66.05%;
}
.xm-card--tsujo .xm-card__btn {
	top: 77.87%;
}

/* ---------- セット内容スライダー ---------- */
.xm-set {
	background: #EDF1F4;
	padding-bottom: 4.4%;
}
.xm-slider {
	position: relative;
	margin-top: 2.667%;
}
/* スライダー本体は .swiper クラスを付けていないため、Swiper標準CSSの .swiper 相当をここで指定
   .swiper-slide はW2共通CSSの指定（width:100%等）を詳細度で上書きする */
.main-wrap .xm-slider .xm-slider__swiper {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: auto;
	height: auto;
	margin: 0;
	padding-bottom: 2.667%;
}
.main-wrap .xm-slider .swiper-slide {
	width: 69.33%;
	height: auto;
	color: inherit;
	text-align: left;
}
.xm-slider .swiper-slide img {
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(26, 56, 112, .15);
}
.xm-slider__nav {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 6.4%;
	margin: 33.47% 0 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.xm-slider__prev {
	left: 4.667%;
}
.xm-slider__next {
	right: 5.2%;
}

/* ---------- 通常購入 ---------- */
.xm-tsujo {
	background: linear-gradient(to bottom, #1A3870 0, #49689F 41%, #49689F 100%);
	padding: 4.933% 0 13.33%;
}
.xm-tsujo__link {
	width: 85.07%;
	margin: 0 auto;
}
.xm-card--tsujo {
	margin-top: 1.067%;
}

/* ---------- スクロールアニメーション ----------
   .xm-fade はJSで付与（JSが動かない環境では非表示にならない） */
.xm-fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s ease, transform .8s ease;
}
.xm-fade.is-show {
	opacity: 1;
	transform: none;
}
/* ITEMボタンは2つ目を少し遅らせる */
.xm-item-list li + li.xm-fade {
	transition-delay: .15s;
}
/* FVはその場でゆっくりフェード */
.xm-fv.xm-fade {
	transform: none;
	transition-duration: 1.4s;
}
/* 数量限定バッジは少し遅れてポップ */
.xm-card__badge.xm-fade {
	transform: scale(.6);
	transition: opacity .5s ease .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .4s;
}
.xm-card__badge.xm-fade.is-show {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.xm-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}