@charset "UTF-8";
/* style.css → style_add.css → style-2026.css の順に読み込む */

/* 共通レイアウト */
:root { --lp-max-width: 767px; }

/* reset */
img {
	max-inline-size: 100%;
	block-size: auto;
	vertical-align: bottom;
}

.container,
.pagetop-container .container,
.container--max1120,
.cpn-detail__container,
.line-inner,
.lineup--title-inner,
.separator--foot-inner,
.content--item > .comment-section,
.content--item > .comment-section__crepe,
.cassette-section-2 .cassette-section-2_wrap .cassette-section-2_body {
	box-sizing: border-box;
	max-width: var(--lp-max-width);
	margin-inline: auto;
}

.container.container--pc-only,
.container.container--sp-only {
	max-width: var(--lp-max-width) !important;
}

/* 従来HTMLのarticle。Point下の余白を背景内に保持 */
.content--item {
	max-width: none;
	display: flow-root;
}
.cassette-section-2,
.cassette-section-2 .cassette-section-2_wrap {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}
.cassette-section-2 .cassette-section-2_wrap {
	background: #fff;
	padding-block: 35px;
}

.headline-content__navi {
	width: 100%;
	max-width: 500px;
	margin-inline: auto;
}
.coupon-wrap,
.cassette-coupon {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lp-max-width);
	margin-inline: auto;
}
.mv-main-img img { width: 100%; height: auto; }

.pagetop-container {
	width: min(100%, var(--lp-max-width));
	right: max(0px, calc((100% - var(--lp-max-width)) / 2));
	padding-inline: 5px;
	box-sizing: border-box;
}

/* 主商品のカセット幅 */
.cassette-section {
	width: 100%;
	max-width: 355px;
	margin-inline: auto;
}

/* 通常商品欄の中身 */
.cassette-section-2 .container {
	min-width: 360px;
	max-width: 375px;
	margin-inline: auto;
}

/* 元の !important 付きコンテナ指定にも対応 */
.cassette-section-2 .container.container--pc-only,
.cassette-section-2 .container.container--sp-only {
	max-width: 375px !important;
}

/* 早期予約クーポンを外しても、ラインナップの高さは内容に追従 */
.headline { height: auto; }

/* 通常商品がない枠は、白背景と上下余白もまとめて非表示 */
.cassette-section-2:not(:has(.cassette)) {
	display: none;
}

/* 単一の高解像度画像を、元の2x指定と同じ表示幅で使う */
.comment-section__img > img {
	width: 87px;
	height: auto;
}
.btn-3ple__icon > img {
	width: 18px;
	height: auto;
}
.footer-copy__img > img {
	width: 47px;
	height: auto;
}

/* pictureから移したクラス。26pxの幅指定は既存CSSを使用 */
img.comment-list__img {
	display: block;
	height: auto;
}

/* 本店だけのポイント文字色（元CSSの差分） */
:where(body[data-site="3ple"]) .cassette-list-feature.cassette-list-feature--special .cassette .cassette-label-point__main-price {
	color: #F93099;
}

/* 2026年の整理版HTML用。既存CSSの後に読み込む */
/* 背景を含むLP全体を中央・最大767pxに固定 */
body:where([data-layout="compact"]) {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--lp-max-width);
	margin-inline: auto;
	display: flow-root;
}

/* articleを削除した構造でも、Point下の余白を背景内に収める */
:where(body[data-layout="compact"]) .content-item {
	display: flow-root;
}

/* 画像見出しを画面幅に合わせ、縦横比を維持 */
/* :where(body[data-layout="compact"]) #lineup > h2 img,
:where(body[data-layout="compact"]) .content-item > h3 img {
	display: block;
	width: 100%;
	height: auto;
} */

/* 旧item-head-name__bodyを外した構造でもメーカー名と商品名を改行 */
:where(body[data-layout="compact"]) .item-head-name h3 > span {
	display: block;
}

/* 従来CSSのbody:not(.is-bottom)によるwidth:100%を上書き */
body:where([data-layout="compact"]):not(.is-bottom) .pagetop-container {
	width: min(100%, var(--lp-max-width));
}

/* 装飾専用classを使わず、リンクとボタンの操作反応を統一 */
:where(body[data-layout="compact"]) a[href], :where(body[data-layout="compact"]) button {
	transition: opacity .2s;
}
@media (hover: hover) {
	:where(body[data-layout="compact"]) a[href]:hover, :where(body[data-layout="compact"]) button:hover {
		opacity: .75;
	}
}
:where(body[data-layout="compact"]) a[href]:active, :where(body[data-layout="compact"]) button:active {
	opacity: .75;
}
@media (prefers-reduced-motion: reduce) {
	:where(body[data-layout="compact"]) a[href], :where(body[data-layout="compact"]) button {
		transition: none;
	}
}

/* ======================================
 追記
========================================= */

/* ========== body ========== */

body {
	background-color: #f4f4f4;
}



/* ========== 商品まわり ========== */

.content-item.content-item--1 {
	background-color: #d83054;
}

.content-item.content-item--2 {
	background-color: #307157;
}

.content-item h3 {
	margin-bottom: 30px;
	text-align: center;
	background-color: #58372a;
}

.content-item .content-item__head {
	text-align: center;
}

.content-item h4 {
	margin-bottom: 15px;
}

.content-item h4 span {
	display: block;
	color: #ffffe6;
	line-height: 1.4;
	font-weight: 600;
}

.content-item h4 span:first-child {
	font-size: 15px;
	margin-bottom: 10px;
}

.content-item h4 span:last-child {
	font-size: 20px;
}


.content-item.content-item--1 .cassette-list-feature.cassette-list-feature--special .cassette  {
  box-shadow: 6px 8px 0px 4px #c72646;
}

.content-item.content-item--2 .cassette-list-feature.cassette-list-feature--special .cassette {
  box-shadow: 6px 8px 0px 4px #295643;
}


/* ========== header ========== */

.l-header {
	background-color: #ffffff;
}

.l-header__inner {
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	gap: 10px;
	inline-size: min(100%, 767px);
	margin-inline: auto;
	padding: 10px 15px 13px;
}

.l-header__logo {
	inline-size: fit-content;

	& img {
		inline-size: auto;
		block-size: 28px;
	}

	/* dshopping */
	&.l-header__logo--dshopping img {
		block-size: 22px;

	}
}


/* ========== footer ========== */

.l-footer {
	text-align: center;
}

.l-footer__body {
	padding: 40px 20px 50px;
	background-color: #fbf9e2;
}

.l-footer__h {
	color: #58372a;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 700;
}

.l-footer__bnr {
	display: block;
	width: min(500px, 100%);
	margin: auto;
	margin-top: 20px;
	color: #58372a !important;
}

.l-footer__text {
	margin-top: 0.5em;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 700;
}

.l-footer__foot {
	padding: 20px;
	border-top: 1px solid #dddddd;
	background-color: #ffffff;
}


.l-footer__mark {
	margin: auto;
	width: 50px;
	height: auto;
}

.l-footer__copyright {
	margin-top: 10px;
	color: #555555;
	font-size: 12px;
}