@charset "UTF-8";

/* =================================================================
   おせち2027 商品詳細ページ共通CSS
   ---------------------------------------------------------------
   このファイルは2種類のパートで構成されています。
   1. 【共通資産】昨年(osechi2026)から流用している reset / ユーティリティ /
      ボタン・テーブル・アコーディオン等の共通パーツ
   2. 【商品詳細テンプレート】今年から新規に組んだ、商品ごとに使い回す
      詳細ページ専用パーツ(.product-* 系クラス)
   商品ごとに複数ページを量産する前提のため、.product-* クラスは
   商品名に依存しない汎用名にしています。
================================================================= */

/* -----------------------------------------------------------------
   1. 共通資産(reset)
----------------------------------------------------------------- */
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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

input, textarea {
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -----------------------------------------------------------------
   1. 共通資産(カラー・タイポグラフィ変数)
   ※実際のカラーコードは仮の値です。差し替えてください。
----------------------------------------------------------------- */
:root {
	--color-main: #C14416;
	--color-sub: #CEA85F;
	--color-text: #4E3230;
	--color-text-light: #756260;
	--color-border: #CEA85F;
	--color-bg-white: #ffffff;
}

/* -----------------------------------------------------------------
   1. 共通資産(基本要素)
----------------------------------------------------------------- */
html {
	font-size: 1rem;
}

body {
	font-family: Arial, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	width: 100%;
	font-size: 1rem;
	color: var(--color-text);
}

a {
	opacity: 1;
	transition: all .2s ease 0s;
	text-decoration: none;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

big {
	font-size: 1.5em;
	font-weight: 800;
}

#wrrap {
	width: 100%;
	overflow: hidden;
}

.inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 20;
}

/* -----------------------------------------------------------------
   1. 共通資産(pc-only / sp-only 出し分け)
   ブレークポイントは昨年から踏襲: max-width 798px
----------------------------------------------------------------- */
.pc-only {
	display: block !important;
}

.sp-only {
	display: none !important;
}

.flex-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* -----------------------------------------------------------------
   1. 共通資産(余白ユーティリティ)
   ※必要な分だけ抜粋。昨年のmt/mr/ml/mb/pt/pr/pl/pbクラスをそのまま流用。
----------------------------------------------------------------- */
.mt0{margin-top:0}.mt10{margin-top:10px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mt40{margin-top:40px}.mt50{margin-top:50px}
.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb4{margin-bottom:1rem}
.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}.mb40{margin-bottom:40px}
.pt10{padding-top:10px}.pt20{padding-top:20px}.pt50{padding-top:50px}
.pb10{padding-bottom:10px}.pb20{padding-bottom:20px}.pb50{padding-bottom:50px}
.p10{padding:10px}.p19{padding:19px}

/* -----------------------------------------------------------------
   1. 共通資産(ボタン)
----------------------------------------------------------------- */
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 2rem;
	width: 100%;
	max-width: 350px;
	font-size: 18px;
	border-radius: 50vh;
	cursor: pointer;
	box-sizing: border-box;
	margin: 0 auto;
}

.btn01-warp, a.btn02, a.btn03{
	font-weight: bold;
	position: relative;
}

.btn01-warp, a.btn02 {
	color: #fff !important;
}

.btn01-warp{
	background: var(--color-main);
}

a.btn02{
	background: var(--color-sub);
}

a.btn03{
	background: transparent;
    color: var(--color-text);
    border: 1px solid currentColor;
}

.btn01-warp::before, .btn02::before, .btn03::before {
	position: absolute;
	transform: scale(0.6);
	vertical-align: middle;
	background-size: contain;
}

.btn01-warp::before {
	content: url("/common/img/osechi/icon-cart-white.png");
	left: 3rem;
}

.btn02::before {
	content: url("/common/img/osechi/icon-inquiry-white.png");
	left: 2.5rem;
}

.btn03::before {
	content: url("/common/img/icon-return.png");
	left: .3rem;
}

.btn01-warp:hover{
	background: var(--color-sub);
	opacity: 1;
}

.btn01 {
	width: 100%;
	color: #fff;
	display: block;
	border: 0;
	background: transparent;
	text-align: center;
}

.color-red { color: var(--color-main); }
.color-gold { color: var(--color-sub); }
.caption { font-size: .85rem; }
.decoration-line { text-decoration: line-through; }

/* -----------------------------------------------------------------
   1. 共通資産(header / footer)
----------------------------------------------------------------- */
header {
	background: #fff;
	padding: 10px 40px;
}

.header_inner,
.footer-inner {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .logo { width: 230px; }

header .cart_btn {
	width: 50px;
	text-align: center;
}

header .cart_btn img { width: 32px; height: auto; margin: 0 auto; }
header .cart_btn p { color: inherit; }

footer { padding: 30px 40px 10px; }
footer .logo { width: 230px; }

.footer-inner .footer-address {
	font-size: .85rem;
	line-height: 1.6;
}

footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}

footer ul li {
	border-left: solid 1px #333333;
}

footer ul li:first-child { border-left: none; }

footer ul li a {
	display: block;
	padding: 0 10px;
	font-size: 13px;
	color: var(--color-text);
}

footer #copy {
	margin-top: 20px;
	padding: 15px 0;
	text-align: center;
}

footer #copy small { font-size: 12px; }

/* -----------------------------------------------------------------
   1. 共通資産(テーブル / アコーディオン / お問い合わせエリア)
----------------------------------------------------------------- */
table.table01 {
	width: 100%;
	border-top: 1px var(--color-border) solid;
	border-right: 1px var(--color-border) solid;
	border-collapse: collapse;
}

table.table01 tbody th {
	background: var(--color-sub);
	color: #fff;
	padding: 10px 15px;
	border-bottom: #fff solid 1px;
	vertical-align: middle;
	text-align: center;
	width: 40%;
}

table.table01 tbody tr:last-child th {
	border-bottom: var(--color-border) solid 1px;
}

table.table01 tbody td {
	background: #fff;
	padding: 10px 15px;
	border-left: var(--color-border) solid 1px;
	border-bottom: var(--color-border) solid 1px;
	vertical-align: middle;
	text-align: center;
}

.qa-accordion input[type="checkbox"] { display: none; }

.q-label {
	position: relative;
	padding: 1rem 2rem 1rem 1rem;
	display: block;
	background: #fff;
	cursor: pointer;
}

.q-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--color-sub);
	border-right: 2px solid var(--color-sub);
	position: absolute;
	top: calc(50% - 3px);
	right: 20px;
	transform: rotate(135deg);
}

.q-label .q-no,
.a-content .a-no {
	font-size: 1.1rem;
	margin-right: .5rem;
}

.q-label, .a-content {
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}

.a-content {
	position: relative;
	height: 0;
	padding: 0 20px;
	overflow: hidden;
	border-bottom: 1px solid var(--color-border);
	background: #fff;
}

.a-content ul { margin-top: .8rem; list-style: disc; padding-left: 1.2rem; }
.a-content li { line-height: 1.9; }
.a-content li span { display: block; font-size: .8rem; }
.a-content a { text-decoration: underline; }

.toggle:checked + .q-label + .a-content {
	height: auto;
	padding: 1rem 1rem 1rem 3rem;
}

.toggle:checked + .q-label::before {
	transform: rotate(-45deg) !important;
}

.info-area {
	border: 1px solid var(--color-border);
	background: #fff;
	padding: 2.5rem 4rem;
	position: relative;
}

.info-area .flex-row { align-items: center; justify-content: space-between; }
.info-area-img-left,
.info-area-img-right { width: 60px; position: absolute; }
.info-area-img-left { top: 10px; left: 10px; }
.info-area-img-right { right: 10px; bottom: 10px; }

.info-title { width: 240px; }
.info-title h2 { font-size: 1.15rem; margin-bottom: 0; }
.info-title h2::after { margin-top: 8px; }
.info-content { width: calc(100% - 280px); text-align: center; }

.info-tel a { display: block; margin-bottom: 1rem; color: var(--color-text); line-height: 1.6; }
.info-tel div { display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 2rem; }
.info-tel img { width: 50px; height: auto; margin-right: .5rem; }

/* ===================================================================
   2. 商品詳細テンプレート(.product-* )
   商品ごとに使い回す前提。品数・座標・文言は商品ごとに差し替える。
=================================================================== */

.home-content {
	background: url("/common/img/osechi/bg_03.jpg");
	position: relative;
	padding-bottom: 40px;
}

.home-content .kumo { position: absolute; z-index: 1; }

.content-box { margin-bottom: 60px; position: relative; z-index: 2; }

/* ---- 2-2. ファーストビュー(商品ヒーロー) ----
   PC: 画像(左) + 価格・CTA情報(右)の2カラム
   SP: 画像 → タグ → タイトル → 価格 → CTAの1カラム縦積み  */
.product-hero {
	padding: 30px 0 20px;
}

.product-hero__inner {
	display: flex;
	align-items: center;
	gap: 40px;
}

.product-hero__media { width: 46%; }
.product-hero__media .slick-prev { left: -2rem; }
.product-hero__media .slick-next { right: .5rem; }

.product-hero__media .slick-prev, .product-hero__media .slick-next {
	position: absolute;
    z-index: 98;
    border: none;
    margin: 0;
    top: 50%;
    transform: rotate(0);
}
.product-hero__media .slick-arrow::after, .product-hero__media .slick-next::after {
	content: '';
    position: absolute;
    margin: auto;
    top: 5px;
    bottom: 0;
    left: 11px;
    width: 15px;
    height: 15px;
    border-top: 3px solid var(--color-sub);
    border-right: 3px solid var(--color-sub);
}
.product-hero__media .slick-prev::after { transform: rotate(-135deg); }
.product-hero__media .slick-next::after { transform: rotate(45deg); }

.product-hero__media .slick-dots {
	position: absolute;
	bottom: -10px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.product-hero__media .slick-dots li {
	width: 8px;
	height: 8px;
	margin: 0;
}
.product-hero__media .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: solid 1px var(--color-sub);
	border-radius: 50%;
	background-color: #fff;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}
.product-hero__media .slick-dots li.slick-active button {
	background-color: var(--color-sub);
}

.product-hero__body { width: 54%; }

.product-tags {
	display: flex;
	gap: 8px;
	margin-bottom: 5px;
}

.product-tags li {
	color: #fff;
	font-weight: bold;
	padding: 2px 12px;
}

.product-tags li.tag-frozen{
	background-color: #89C6D4;
}

.product-tags li.tag-info{
	background-color: #5B8D57;
}

.product-tags li.tag-medical{
	background-color: #4E3230;
}

.product-hero__label {
	font-size: .95rem;
	font-weight: bold;
	display: block;
	margin-bottom: 4px;
}

.product-hero__title {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 4px;
}

.product-hero__comment {
	margin-bottom: 16px;
}

.product-hero__deadline {
	text-align: center;
	font-size: 1.2rem;
	color: #fff;
	font-weight: bold;
	background-color: var(--color-sub);
	margin-bottom: 16px;
	padding: 4px 12px;
}

.product-price {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 16px 0 ;
}

.product-price img{
	width: 80px;
	justify-content: center;
	object-fit: contain;
	margin-right: 20px;
}

.product-price__img-corp{
	width: 120px !important;
	margin-right: 0 !important;
}

.product-price__normal {
	color: var(--color-text-light);
	text-decoration: line-through;
}

.product-price__off{
	display: flex;
	align-items: flex-end;
}

.product-price__main, .product-price__tax {
	align-items: baseline;
	font-weight: bold;
}

.product-price__main{
	font-size: 1.2rem;
}

.product-price__main .num, .product-price__tax .num {
	color: var(--color-main);
	font-weight: bold;
	margin-right: 4px;
}

.product-price__main .num {
	font-size: 2.5rem;
}

.product-price__tax .num {
	font-size: 1.5rem;
}

.product-hero__delivery {
	margin-bottom: 20px;
	line-height: 1.7;
}

/* ---- 2-3. やわらかさの目安 ---- */
.product-movie__comment{
	font-size: 1.1rem;
	text-align: center;
}

/* ---- 2-3. 栄養価(単品用・中央寄せ) ---- */
.product-nutrition {
	max-width: 480px;
	margin: 0 auto;
}

/* ---- 2-4. お品書き ----
   PC: 画像(左・番号マーカー付き) + コメント一覧(右・2列)
   SP: 画像(上・番号マーカー付き) + コメント一覧(下・1列) */
.product-menu {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.product-menu__media {
	width: 42%;
	position: relative;
}

 .product-menu__pin01, .product-menu__pin02{
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: .75rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-menu__pin01{
	background: #fff;
	color: var(--color-main);
}

.product-menu__pin02{
	background: var(--color-main);
	color: #fff;;
}

.product-menu__list {
	width: 58%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}

.product-menu__special {
	grid-column: 1 / -1;
	font-family: "Zen Old Mincho", serif;
	text-align: center; 
    color: var(--color-main);
	font-weight: bold;
}

.product-menu__item { padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
.product-menu__item-name { font-weight: bold; margin-bottom: 4px; }
.product-menu__item-name span { color: var(--color-sub); margin-right: 6px; }
.product-menu__item-comment { font-size: .9rem; color: var(--color-text-light); line-height: 1.6; }

/* ---- 2-5. 商品情報(原材料・サイズ・賞味期限など:定義リスト) ---- */
.product-spec {
	background: #fff;
	border: 1px solid var(--color-border);
}

.product-spec dl {
	display: grid;
	grid-template-columns: 220px 1fr;
	border-bottom: 1px solid var(--color-border);
}

.product-spec dl:last-child { border-bottom: none; }

.product-spec dt {
	background: #FAF6EF;
	padding: 14px 20px;
	font-weight: bold;
	border-right: 1px solid var(--color-border);
}

.product-spec dd {
	padding: 14px 20px;
	line-height: 1.7;
}

.product-spec dd small {
	display: block;
	font-size: .8rem;
	color: var(--color-text-light);
	margin-top: 4px;
}

/* ---- 2-6. お客様の声 ---- */
.product-voice {
	display: flex;
	gap: 20px;
}

.product-voice__box {
	flex: 1;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 15px;
	padding: 20px;
	line-height: 1.8;
}

/* ---- 2-7. 中間・下部CTA(購入するボタンの再掲) ---- */
.product-cta {
	text-align: center;
	margin: 40px 0;
}

/* ---- 2-8. お品書き見出し等の共通見出し ---- */
.section-title{
	margin: 80px 0 30px 0;
}

.section-title h2{
	font-family: "Zen Old Mincho", serif;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--color-main);
}

.section-title img{
	width: 100%;
	object-fit: contain;
	margin-top: 10px;
}
.section-title p{
	text-align: center;
	margin-top: 10px;
}
/* ===================================================================
   3. SP(max-width:798px)
=================================================================== */
@media screen and (max-width: 798px) {

	.pc-only { display: none !important; }
	.sp-only { display: block !important; }

	.inner { width: 100%; padding: 0 1rem; box-sizing: border-box; }

	header { padding: 10px 16px; }
	header .logo { width: 141px; }

	.product-back { padding: 10px 16px 0; }

	.product-hero { padding: 16px 0 20px; }

	.product-hero__inner {
		flex-direction: column;
		gap: 16px;
	}

	.product-hero__media, .product-hero__body { width: 95%; }
	
	.product-hero__media .slick-prev { left: -1.2rem; }
	.product-hero__media .slick-next { right: 1.3rem; }
	.product-hero__body { margin-top: 15px; }
	.product-hero__title { font-size: 1.3rem; }
	.product-price img { width: 70px; }
	.product-price__img-corp{ width: 95px !important; }
	.product-price__off{ flex-direction: column;}
	.product-price__main .num { font-size: 2rem; }

	.product-menu {
		flex-direction: column;
		gap: 20px;
	}

	.product-menu__media,
	.product-menu__list {
		width: 100%;
	}

	.product-menu__list {
		grid-template-columns: 1fr;
	}
	
	.product-menu__item-comment{ display: none !important; }

	.product-spec dl {
		grid-template-columns: 1fr;
	}

	.product-spec dt {
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}

	.product-voice {
		flex-direction: column;
	}
	.section-title{
		margin: 60px 0 25px 0;
	}
	.section-title p{
		text-align: left;
	}

	.info-area { padding: 1.5rem 1rem; }
	.info-area .flex-row { flex-direction: column; }
	.info-title { width: 100%; margin-bottom: 1rem; text-align: center; }
	.info-content { width: 100%; }
	.info-area-img-left, .info-area-img-right { display: none; }

	.footer-inner { flex-direction: column; gap: 12px; text-align: center; }
	footer ul { margin-top: 10px; }
}

/* ===================================================================
   4. TOPページ(制限食おせち一覧)専用パーツ
   ---------------------------------------------------------------
   商品詳細ページ側の .product-* とは別に、一覧ページ固有のパーツは
   接頭辞なしの分かりやすい名前(.top-* / .category-nav / .product-card)
   にしています。カテゴリーカラーは4商品共通で使うので :root に追加。
=================================================================== */

:root {
	/* カテゴリー別カラー(仮の値です。差し替え可) */
	--cat-ckd: #658D2D;       /* 腎臓病の方向け */
	--cat-dm: #DC555A;     /* 糖尿病・血糖値が気になる方向け */
	--cat-ht: #4C8C9B; /* 高血圧・心疾患・透析中の方向け */
	--cat-balance: #ED7B00;      /* 食生活の偏り・制限のない方向け */
	--cat-yawaraka: #ef8773;      /* 固いものが食べにくい方向け */
	--cat-mousse: #f1935c;      /* 舌でつぶせるやわらかさが食べやすい方向け */
}

/* ---- 4-1. お知らせ帯(赤い全幅バー) ---- */
.top-notice {
	background: var(--color-main);
	font-family: "Zen Old Mincho", serif;
	font-size: 1.2rem;
	color: #fff;
	text-align: center;
	padding: 20px 16px;
	line-height: 1.6;
}

.top-notice .top-notice__off {
	font-size: 2rem;
	font-weight: bold;
}

/* ---- 4-2. あいさつ文 ---- */
.top-greeting {
	text-align: center;
	line-height: 2;
	max-width: 720px;
	margin: 0 auto;
}

/* ---- 4-4. カテゴリーナビ(「おせちを探す」の下のボタン) ----
   クリックで各商品カードの id へアンカースクロール。*/
.category-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 60px;
}

.category-nav__item {
	display: block;
	text-align: center;
	color: #fff;
	padding: 10px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.6;
	position: relative;
}

.category-nav__item span {
	display: block;
	font-size: .9rem !important;
	font-weight: normal;
	margin-bottom: 2px;
}

.category-nav__item ::before{
	content: '';
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 18px;
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.category-nav__item.cat-ckd       { background: var(--cat-ckd); }
.category-nav__item.cat-dm     { background: var(--cat-dm); }
.category-nav__item.cat-ht { background: var(--cat-ht); }
.category-nav__item.cat-balance      { background: var(--cat-balance); }
.category-nav__item.cat-yawaraka { background: var(--cat-yawaraka); }
.category-nav__item.cat-mousse { background: var(--cat-mousse); }

/* ---- 4-5. 商品カード ---- */
.product-card__label{
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding: 10px 0;
	scroll-margin-top: 20px; /* アンカースクロール時に上端がぴったりになりすぎないよう余白 */
}

.cat-ckd.product-card__label { background-color: var(--cat-ckd); }
.cat-dm.product-card__label { background-color: var(--cat-dm); }
.cat-ht.product-card__label { background-color: var(--cat-ht); }
.cat-balance.product-card__label { background-color: var(--cat-balance); }
.cat-yawaraka.product-card__label { background-color: var(--cat-yawaraka); }
.cat-mousse.product-card__label { background-color: var(--cat-mousse); }

.product-card {
	background: #fff;
	margin-bottom: 40px;
	padding: 30px 50px;
}

.product-card__inner {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
}

.product-card__media {
	width: 40%;
}

.product-card__body { width: 60%; }

.product-card__title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 12px;
}

.btn-product{
	color: #fff;
	font-weight: bold;
	text-align: center;
	margin-top: 10px;
	position: relative;
}

.btn-product::before {
	content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    right: 1rem;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #fff;
    transform: translateY(-50%);
}

.product-card.cat-ckd       .btn-product { background: var(--cat-ckd); }
.product-card.cat-dm     .btn-product { background: var(--cat-dm); }
.product-card.cat-ht .btn-product { background: var(--cat-ht); }
.product-card.cat-balance      .btn-product { background: var(--cat-balance); }
.product-card.cat-yawaraka .btn-product { background: var(--cat-yawaraka); }
.product-card.cat-mousse .btn-product { background: var(--cat-mousse); }
.btn-product:hover { opacity: .8; }

/* ---- 4-6. 届いてからお召し上がりまで ---- */
.steps-content {
	display: flex;
	align-items: center;
	gap: 40px;
}

.steps-content__text { width: 60%; line-height: 2.1; }
.steps-content__img { width: 40%; }

/* ===================================================================
   5. SP(TOPページ追加分・max-width:798px)
=================================================================== */
@media screen and (max-width: 798px) {

	.top-notice .top-notice__off { font-size: 2rem; }
	
	.home-content .kumo { display: none; }

	.top-greeting { text-align: left; }

	.category-nav { grid-template-columns: 1fr; margin-bottom: 40px; }

	.product-card { padding: 25px;}
	.product-card__inner { flex-direction: column; }
	.product-card__media,
	.product-card__body { width: 100%; }

	.product-card__badge { right: 10px; }

	.steps-content { flex-direction: column; }
	.steps-content__text,
	.steps-content__img { width: 100%; }
}