@charset "utf-8";

/* ==========================================================
   わたやの和洋おせち2026 LP
   ========================================================== */

/* ---------- Base ---------- */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background: #faf6ee;
	color: #2a231c;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: antialiased;
	padding-top: 68px;
}
h1, h2, h3, h4 {
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
a {
	color: inherit;
	text-decoration: none;
}
img {
	max-width: 100%;
	display: block;
}
.wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
}

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background: #1c1712;
	border-bottom: 1px solid #3a3128;
}
.site-header .wrap {
	height: 68px;
}
.site-header .wrap:after {
	content: "";
	display: block;
	clear: both;
}
.header-brand {
	float: left;
	padding-top: 15px;
}
.header-brand a {
	display: block;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	color: #f2ece2;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	font-weight: 600;
}
.header-brand a span {
	display: block;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 10px;
	line-height: 1.4;
	color: #d8c393;
	letter-spacing: 0.28em;
	font-weight: 400;
	margin-bottom: 2px;
}
.header-order {
	float: right;
	padding-top: 16px;
}
.header-order a {
	display: block;
	background: #f39800;
	color: #1c1712;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	padding: 10px 20px;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.header-order a:hover {
	background: #d98600;
}

/* ---------- Hero ---------- */
.hero {
	display: table;
	width: 100%;
	min-height: 560px;
	position: relative;
	overflow: hidden;
	background-color: #000000;
}
.hero img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0.62;
}
.hero-scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(10, 8, 6, 0.5);
	background: -webkit-linear-gradient(top, rgba(10, 8, 6, 0.35) 0%, rgba(10, 8, 6, 0.15) 30%, rgba(10, 8, 6, 0.55) 68%, rgba(10, 8, 6, 0.92) 100%), -webkit-linear-gradient(left, rgba(10, 8, 6, 0.78) 0%, rgba(10, 8, 6, 0.25) 55%, rgba(10, 8, 6, 0.1) 100%);
	background: linear-gradient(to bottom, rgba(10, 8, 6, 0.35) 0%, rgba(10, 8, 6, 0.15) 30%, rgba(10, 8, 6, 0.55) 68%, rgba(10, 8, 6, 0.92) 100%), linear-gradient(to right, rgba(10, 8, 6, 0.78) 0%, rgba(10, 8, 6, 0.25) 55%, rgba(10, 8, 6, 0.1) 100%);
}
.hero-content {
	display: table-cell;
	vertical-align: bottom;
	position: relative;
	z-index: 2;
	padding: 120px 0 64px;
}
.hero-eyebrow {
	color: #d8c393;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 15px;
	letter-spacing: 0.5em;
	line-height: 1;
	margin-bottom: 26px;
}
.hero-eyebrow:before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 1px;
	background: #d8c393;
	vertical-align: middle;
	margin-right: 16px;
}
.hero h1 {
	color: #ffffff;
	font-size: 52px;
	font-weight: 700;
	max-width: 22em;
}
.hero-sub {
	color: #c9beae;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 19px;
	margin-top: 22px;
	max-width: 30em;
	letter-spacing: 0.06em;
}
.stat-row {
	margin-top: 44px;
	color: #f2ece2;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.6;
}
.stat-row span {
	display: inline-block;
	padding: 0 20px;
	border-left: 1px solid rgba(216, 195, 147, 0.4);
}
.stat-row span:first-child {
	padding-left: 0;
	border-left: none;
}
.hero-actions {
	margin-top: 46px;
}
.hero-actions:after {
	content: "";
	display: block;
	clear: both;
}
.hero-order,
.hero-more {
	float: left;
	margin: 0 22px 12px 0;
}
.hero-phone {
	clear: both;
	color: #c9beae;
	font-size: 13px;
	letter-spacing: 0.03em;
	padding-top: 12px;
}
.scroll-cue {
	position: absolute;
	bottom: 20px;
	right: 28px;
	z-index: 2;
	color: #c9beae;
	font-size: 11px;
	letter-spacing: 0.3em;
	line-height: 1;
}
.scroll-cue:after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: #d8c393;
	margin: 10px 0 0 auto;
}

/* ---------- Buttons ---------- */
.hero-order a,
.hero-more a,
.group-cta a,
.closing-cta a {
	display: inline-block;
	background: #f39800;
	color: #1c1712;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	padding: 17px 40px;
	letter-spacing: 0.08em;
	border: 1px solid #f39800;
	text-align: center;
}
.hero-order a:hover,
.group-cta a:hover,
.closing-cta a:hover {
	background: #d98600;
	border-color: #d98600;
}
.hero-more a {
	background: transparent;
	color: #f2ece2;
	border: 1px solid rgba(242, 236, 226, 0.5);
}
.hero-more a:hover {
	border-color: #d8c393;
	color: #d8c393;
}

/* ---------- Section shells ---------- */
.section {
	padding: 104px 0;
}
.section-dark {
	background: #1c1712;
	color: #c9beae;
}
.section-red {
	background: #7d1d1d;
	background: -webkit-linear-gradient(315deg, #7d1d1d 0%, #5c1414 100%);
	background: linear-gradient(135deg, #7d1d1d 0%, #5c1414 100%);
	color: #c9beae;
}
.kicker {
	display: inline-block;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 13px;
	letter-spacing: 0.4em;
	line-height: 1.6;
	color: #b8944f;
	margin-bottom: 18px;
}
.section-dark .kicker,
.section-red .kicker {
	color: #d8c393;
}
.section-head {
	max-width: 640px;
	margin-bottom: 56px;
}
.section-head h2 {
	font-size: 33px;
	color: #1c1712;
}
.section-dark .section-head h2,
.section-red .section-head h2 {
	color: #ffffff;
}
.section-head .lead {
	margin-top: 20px;
	font-size: 16px;
	color: #6b6259;
	line-height: 2;
}
.section-dark .section-head .lead {
	color: #c9beae;
}
.section-head.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Jubako ---------- */
.jubako-lead {
	max-width: 760px;
	color: #6b6259;
	font-size: 16px;
	margin-bottom: 64px;
}
.jubako-row {
	margin-bottom: 72px;
}
.jubako-row:after {
	content: "";
	display: block;
	clear: both;
}
.jubako-photo {
	float: left;
	width: 48%;
	position: relative;
	height: 0;
	padding-bottom: 32%;
	overflow: hidden;
}
.jubako-photo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.jubako-text {
	float: right;
	width: 48%;
	padding-top: 6px;
}
.jubako-row.reverse .jubako-photo {
	float: right;
}
.jubako-row.reverse .jubako-text {
	float: left;
}
.jubako-num {
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 13px;
	letter-spacing: 0.3em;
	color: #b8944f;
	margin-bottom: 14px;
}
.jubako-text h3 {
	font-size: 24px;
	color: #1c1712;
	margin-bottom: 18px;
}
.jubako-desc {
	color: #6b6259;
	font-size: 16px;
}

/* ---------- Reasons ---------- */
.reason {
	padding: 48px 0;
	border-top: 1px solid rgba(184, 148, 79, 0.22);
}
.reason:after {
	content: "";
	display: block;
	clear: both;
}
.section-reasons .reason:last-child {
	border-bottom: 1px solid rgba(184, 148, 79, 0.22);
}
.reason-num {
	float: left;
	width: 200px;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 58px;
	line-height: 1;
	font-weight: 700;
	color: #8a6f3c;
}
.reason-body {
	margin-left: 248px;
}
.reason-body h3 {
	font-size: 22px;
	color: #ffffff;
	margin-bottom: 16px;
}
.reason-desc {
	color: #c9beae;
	font-size: 16px;
	max-width: 640px;
}
.reason-photo {
	margin-top: 26px;
	max-width: 520px;
	border: 1px solid rgba(184, 148, 79, 0.4);
}
.reason-photo img {
	width: 100%;
	height: auto;
}

/* ---------- Products ---------- */
.group-label {
	margin: 0 0 40px;
	border-bottom: 1px solid #e3dbca;
}
.group-label:after {
	content: "";
	display: block;
	clear: both;
}
.group-label h3 {
	float: left;
	font-size: 21px;
	line-height: 1.4;
	color: #1c1712;
	padding-bottom: 12px;
}
.group-label .en {
	float: right;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.22em;
	color: #b8944f;
	padding: 8px 0 12px;
}
.product-grid {
	display: table;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 32px 0;
	width: 100%;
	width: -webkit-calc(100% + 64px);
	width: calc(100% + 64px);
	margin: 0 -32px 80px;
}
.p-card {
	display: table-cell;
	vertical-align: top;
	background: #ffffff;
	border: 1px solid #e3dbca;
}
.p-media {
	position: relative;
	height: 0;
	padding-bottom: 66.6%;
	overflow: hidden;
}
.p-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.p-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: #7d1d1d;
	color: #ffffff;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	padding: 6px 12px;
}
.p-body {
	padding: 26px 24px 28px;
}
.p-name {
	font-size: 18px;
	line-height: 1.6;
	color: #1c1712;
	font-weight: 600;
	margin-bottom: 10px;
}
.p-price {
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	color: #7d1d1d;
	font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 14px;
}
.p-price span {
	font-size: 15px;
	font-weight: 400;
	color: #6b6259;
	margin-left: 4px;
}
.p-catch {
	font-size: 14px;
	color: #6b6259;
	margin-bottom: 16px;
}
.p-tags {
	margin-bottom: 10px;
}
.p-tags span {
	display: inline-block;
	font-size: 12px;
	line-height: 1.6;
	color: #b8944f;
	border: 1px solid #d8c393;
	padding: 3px 10px;
	margin: 0 5px 6px 0;
	border-radius: 20px;
}
.p-note {
	font-size: 12px;
	color: #6b6259;
	padding-top: 10px;
}
.p-detail {
	margin-top: 14px;
	border-top: 1px solid #e3dbca;
	padding-top: 14px;
}
.p-detail-head {
	position: relative;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.6;
	color: #7d1d1d;
	letter-spacing: 0.03em;
	padding-right: 22px;
}
.p-detail-head:after {
	content: "+";
	position: absolute;
	right: 0;
	top: -2px;
	font-size: 18px;
}
.p-detail.is-open .p-detail-head:after {
	content: "−";
}
.p-detail-body {
	margin-top: 12px;
	font-size: 12px;
	color: #6b6259;
	line-height: 2;
	white-space: pre-line;
}
.group-cta {
	text-align: center;
	margin: -40px 0 80px;
}
.group-cta-last {
	margin-bottom: 0;
}

/* ---------- Benefits ---------- */
.benefit-grid {
	display: table;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 2px 0;
	width: 100%;
	width: -webkit-calc(100% + 4px);
	width: calc(100% + 4px);
	margin: 8px -2px 0;
}
.benefit {
	display: table-cell;
	vertical-align: top;
	background: #5c1414;
	padding: 44px 40px;
}
.benefit-tag {
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 12px;
	letter-spacing: 0.3em;
	color: #d8c393;
	margin-bottom: 16px;
}
.benefit h3 {
	color: #ffffff;
	font-size: 20px;
	margin-bottom: 14px;
}
.benefit-desc {
	color: #c9beae;
	font-size: 14px;
}

/* ---------- FAQ ---------- */
.faq-item {
	border-top: 1px solid #e3dbca;
}
.faq-list .faq-item:last-child {
	border-bottom: 1px solid #e3dbca;
}
.faq-head {
	cursor: pointer;
	padding: 26px 4px;
}
.faq-head:after {
	content: "";
	display: block;
	clear: both;
}
.faq-q {
	float: left;
	width: 34px;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	color: #7d1d1d;
	font-size: 18px;
	line-height: 1.6;
}
.faq-head .toggle {
	float: right;
	color: #b8944f;
	font-size: 19px;
	line-height: 1.6;
	padding-left: 20px;
}
.faq-item.is-open .faq-head .toggle {
	color: #7d1d1d;
}
.faq-head .q-text {
	display: block;
	overflow: hidden;
	font-weight: 500;
	color: #1c1712;
	line-height: 1.6;
}
.faq-a {
	padding: 0 4px 26px;
}
.faq-a:after {
	content: "";
	display: block;
	clear: both;
}
.faq-mark {
	float: left;
	width: 34px;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	color: #b8944f;
	font-size: 18px;
	line-height: 1.6;
}
.faq-text {
	overflow: hidden;
	color: #6b6259;
	font-size: 15px;
}

/* ---------- Info ---------- */
.info-grid:after {
	content: "";
	display: block;
	clear: both;
}
.info-col {
	float: left;
	width: 50%;
}
.info-grid .info-col:first-child {
	padding-right: 32px;
}
.info-grid .info-col:last-child {
	padding-left: 32px;
}
.info-col h3 {
	color: #ffffff;
	font-size: 17px;
	margin-bottom: 24px;
}
.info-col h3:before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 1px;
	background: #b8944f;
	vertical-align: middle;
	margin-right: 12px;
}
.info-list dt {
	color: #d8c393;
	font-size: 12px;
	letter-spacing: 0.06em;
	margin-top: 16px;
}
.info-list dt:first-child {
	margin-top: 0;
}
.info-list dd {
	margin-top: 6px;
	color: #c9beae;
	font-size: 15px;
	line-height: 1.8;
}
.info-note {
	margin-top: 22px;
	font-size: 12px;
	color: rgba(201, 190, 174, 0.7);
	border-top: 1px solid rgba(184, 148, 79, 0.22);
	padding-top: 18px;
}

/* ---------- Closing ---------- */
.closing {
	text-align: center;
	padding: 120px 0;
	background: #1c1712;
}
.closing .kicker {
	color: #d8c393;
}
.closing h2 {
	color: #ffffff;
	font-size: 36px;
	margin-bottom: 36px;
}
.closing-cta a {
	padding: 19px 52px;
	font-size: 17px;
}

/* ---------- Footer ---------- */
.site-footer {
	background: #120d09;
	color: #c9beae;
	padding: 64px 0 32px;
}
.footer-top {
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(184, 148, 79, 0.18);
}
.footer-top:after {
	content: "";
	display: block;
	clear: both;
}
.footer-brand {
	float: left;
	font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	color: #ffffff;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0.08em;
}
.footer-brand span {
	display: block;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 11px;
	color: #d8c393;
	letter-spacing: 0.2em;
	margin-top: 6px;
}
.footer-links {
	float: right;
	font-size: 13px;
	line-height: 2;
	text-align: right;
}
.footer-links a {
	display: inline-block;
	margin-left: 28px;
}
.footer-links a:hover {
	color: #d8c393;
}
.footer-bottom {
	padding-top: 28px;
	font-size: 12px;
	line-height: 1.8;
	color: rgba(201, 190, 174, 0.6);
}
.footer-bottom:after {
	content: "";
	display: block;
	clear: both;
}
.footer-bottom span {
	display: block;
}
.footer-bottom span:first-child {
	float: left;
}
.footer-bottom span:last-child {
	float: right;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media screen and (max-width: 1000px) {
	.hero h1 {
		font-size: 40px;
	}
	.hero-sub {
		font-size: 17px;
	}
	.closing h2 {
		font-size: 30px;
	}
}

@media screen and (max-width: 900px) {
	.product-grid {
		display: block;
		width: 100%;
		margin: 0 0 80px;
	}
	.p-card {
		display: block;
		margin-bottom: 32px;
	}
	.p-card:last-child {
		margin-bottom: 0;
	}
	.group-cta {
		margin-top: 32px;
	}
}

@media screen and (max-width: 800px) {
	.jubako-photo,
	.jubako-text,
	.jubako-row.reverse .jubako-photo,
	.jubako-row.reverse .jubako-text {
		float: none;
		width: 100%;
	}
	.jubako-photo {
		padding-bottom: 66.6%;
		margin-bottom: 24px;
	}
	.jubako-row {
		margin-bottom: 48px;
	}
}

@media screen and (max-width: 700px) {
	.reason-num {
		float: none;
		width: auto;
		font-size: 38px;
		margin-bottom: 14px;
	}
	.reason-body {
		margin-left: 0;
	}
	.benefit-grid {
		display: block;
		width: 100%;
		margin: 8px 0 0;
	}
	.benefit {
		display: block;
		margin-bottom: 2px;
	}
	.info-col,
	.info-grid .info-col:first-child,
	.info-grid .info-col:last-child {
		float: none;
		width: 100%;
		padding: 0;
	}
	.info-grid .info-col:first-child {
		margin-bottom: 48px;
	}
	.footer-brand,
	.footer-links {
		float: none;
		text-align: left;
	}
	.footer-links {
		margin-top: 24px;
	}
	.footer-links a {
		margin: 0 24px 0 0;
	}
	.footer-bottom span:first-child,
	.footer-bottom span:last-child {
		float: none;
	}
}

@media screen and (max-width: 640px) {
	body {
		padding-top: 60px;
	}
	.wrap {
		padding: 0 20px;
	}
	.site-header .wrap {
		height: 60px;
	}
	.header-brand {
		padding-top: 11px;
	}
	.header-brand a {
		font-size: 14px;
	}
	.header-order {
		padding-top: 13px;
	}
	.header-order a {
		font-size: 12px;
		padding: 9px 14px;
	}
	.hero {
		min-height: 480px;
	}
	.hero-content {
		padding: 80px 0 56px;
	}
	.hero h1 {
		font-size: 30px;
	}
	.hero-sub {
		font-size: 16px;
	}
	.stat-row span {
		padding: 0 12px 0 0;
		margin-right: 12px;
		border-left: none;
	}
	.hero-order,
	.hero-more {
		float: none;
		margin: 0 0 12px;
	}
	.hero-order a,
	.hero-more a {
		display: block;
		padding: 16px 20px;
	}
	.scroll-cue {
		display: none;
	}
	.section {
		padding: 72px 0;
	}
	.section-head h2 {
		font-size: 24px;
	}
	.closing {
		padding: 80px 0;
	}
	.closing h2 {
		font-size: 26px;
	}
	.closing-cta a {
		display: block;
		padding: 17px 20px;
		font-size: 16px;
	}
	.group-cta a {
		display: block;
	}
	.benefit {
		padding: 36px 24px;
	}
	.group-label h3 {
		font-size: 18px;
	}
	.group-label .en {
		display: none;
	}
}