/* ------------------------------
   Artena Minimal Chic Theme
   - Modern, clean, fashion-forward
   - Easy to customize with CSS variables
--------------------------------- */
:root {
	--bg: #ffffff;
	--text: #1a1a1a;
	--muted: #6b6b6b;
	--line: #e8e8e8;
	--brand: #111;
	--accent: #b89c7d;
	/* warm champagne */
	--radius: 14px;
	--max: 1200px;
	--hero-img: url('./assets/img/hero.png');
	/* change to your image path */
	--shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

* {
	box-sizing: border-box
}

html,
body {
	margin: 0;
	padding: 0
}

body {
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	letter-spacing: .02em;
}

a {
	color: inherit;
	text-decoration: none
}

img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius)
}

.container {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding: 0 20px
}

/* ===== Responsive Header (no-JS) ===== */
:root {
	--header-h: 64px;
	--header-bg: rgba(255, 255, 255, .86);
	--header-line: var(--line, #e8e8e8);
	--header-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	backdrop-filter: saturate(180%) blur(8px);
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-line);
}

.header-bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 170px;
	min-height: var(--header-h);
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.brand .logo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: conic-gradient(from 45deg, #111, #444, #111);
	box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .06));
}

.brand-text {
	font-size: 18px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
}

/* ナビ */
.site-nav ul {
	display: flex;
	gap: 18px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a.nav-link {
	display: inline-flex;
	align-items: center;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	border: 1px solid transparent;
}

.site-nav a.nav-link:hover {
	background: #f6f6f6;
	border-color: #f0f0f0
}

.site-nav a.nav-link:focus-visible {
	outline: 2px solid #d9c9b3;
	outline-offset: 2px;
	border-color: #d9c9b3;
}

/* ハンバーガー */
.nav-toggle {
	display: none;
}

.hamburger {
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid var(--header-line);
	background: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	position: relative;
}

.hamburger span {
	position: absolute;
	width: 20px;
	height: 2px;
	background: #111;
	transition: .25s;
}

.hamburger span:nth-child(1) {
	transform: translateY(-6px)
}

.hamburger span:nth-child(2) {
	transform: translateY(0)
}

.hamburger span:nth-child(3) {
	transform: translateY(6px)
}

/* ====== モバイル（≤ 860px） ====== */
@media (max-width: 860px) {
	.header-bar {
		grid-template-columns: auto auto 1fr;
	}

	.hamburger {
		display: flex;
	}

	.site-nav {
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--header-h) - 1px);
		background: #fff;
		border-bottom: 1px solid var(--header-line);
		box-shadow: var(--header-shadow);
		transform: translateY(-120%);
		opacity: 0;
		pointer-events: none;
		transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .28s;
	}

	.site-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px;
	}

	.site-nav li {
		border-radius: 12px;
		overflow: hidden;
	}

	.site-nav a.nav-link {
		padding: 14px 16px;
		border-radius: 12px;
	}

	/* 開閉（checkboxハック） */
	.nav-toggle:checked~.site-nav {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	/* Xアニメーション */
	.nav-toggle:checked+.hamburger span:nth-child(1) {
		transform: rotate(45deg);
	}

	.nav-toggle:checked+.hamburger span:nth-child(2) {
		opacity: 0;
	}

	.nav-toggle:checked+.hamburger span:nth-child(3) {
		transform: rotate(-45deg);
	}
}

/* ====== タブレット/PC（> 860px） ====== */
@media (min-width: 861px) {
	.site-nav {
		justify-self: end;
	}
}

/* 小さい端末でのはみ出し対策（長い英単語等） */
.site-header,
.site-nav a {
	word-break: keep-all;
}

/* スクロール時の微妙な揺れ対策（iOSのスナップ） */
@supports (height: 100svh) {
	.site-header {
		position: sticky;
		top: 0;
	}
}

.hero {
	min-height: 74vh;
	display: grid;
	align-items: end;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 40%),
		var(--hero-img) center/cover no-repeat, #000;
	color: #fff;
}

.hero .inner {
	padding: 10vh 0 8vh
}

.kicker {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase
}

h2 {
	font-size: 40px;
	line-height: 1.15;
	margin: 14px 0 12px;

}

p.lead {
	font-size: 18px;
	opacity: .92;
	max-width: 680px
}

.cta-row {
	display: flex;
	gap: 12px;
	margin-top: 18px
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	padding: 12px 18px;
	box-shadow: var(--shadow);
	border: 1px solid var(--line);
	background: #fff;
	color: #111;
	font-weight: 600
}

.btn.primary {
	background: var(--accent);
	color: #fff;
	border: none
}

.btn.ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5)
}

.section {
	padding: 72px 0;
	border-top: 1px solid var(--line)
}

.section h3 {
	font-size: 28px;
	margin: 0 0 14px
}

.section p {
	color: var(--muted)
}

.grid {
	display: grid;
	gap: 26px
}

.grid.cols-3 {
	grid-template-columns: repeat(3, 1fr)
}

.grid.cols-2 {
	grid-template-columns: repeat(2, 1fr)
}

@media (max-width:900px) {
	.grid.cols-3 {
		grid-template-columns: 1fr 1fr
	}

	.hero .inner {
		padding: 5vh 1vh 20vh
	}
}

@media (max-width:640px) {

	.grid.cols-3,
	.grid.cols-2 {
		grid-template-columns: 1fr
	}
}

.card {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff
}

.card .meta {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 13px
}

.price {
	font-weight: 700;
}

.feature {
	display: grid;
	gap: 28px;
	grid-template-columns: 420px 1fr;
	align-items: center;
}

@media (max-width:960px) {
	.feature {
		grid-template-columns: 1fr
	}
}

.footer {
	padding: 40px 0;
	border-top: 1px solid var(--line);
	color: #777;
	font-size: 14px
}

.footer .cols {
	display: grid;
	gap: 26px;
	grid-template-columns: 2fr 1fr 1fr
}

@media (max-width:900px) {
	.footer .cols {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:600px) {
	.footer .cols {
		grid-template-columns: 1fr
	}
}

.badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f7f7f7;
	color: #555;
	font-size: 12px
}

.form {
	display: grid;
	gap: 16px;
	max-width: 640px
}

.input,
.textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fff;
}

.textarea {
	min-height: 140px;
	resize: vertical
}

input:focus,
textarea:focus {
	outline: 2px solid #e9dfd2;
	border-color: #e9dfd2
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px
}

.table th,
.table td {
	padding: 12px;
	border-bottom: 1px solid var(--line);
	text-align: left
}

.table th {
	font-weight: 600;
	color: #333
}

.note {
	font-size: 13px;
	color: #777
}

:target {
	scroll-margin-top: 100px
}



/*仕入れ方法セクションのデザイン*/
.policy-steps {
	counter-reset: step;
	list-style: none;
	padding: 20px;
	margin: auto;
	display: grid;
	gap: 16px
}

.policy-steps li {
	position: relative;
	padding: 16px 16px 16px 56px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--shadow);
}

.policy-steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 6px 20px rgba(184, 156, 125, .3);
}

.policy-steps li strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px
}

.policy-steps li:hover {
	transform: translateY(-1px);
	transition: .25s
}


/*コンセプトセクション*/
/* — Concept Section — */
.concept-wrap {
	display: grid;
	gap: 36px;
	align-items: start;
	grid-template-columns: 1.25fr 1fr;
	/* テキストを少し広めに */
}

@media(max-width:980px) {
	.concept-wrap {
		grid-template-columns: 1fr;
	}
}

.concept-intro .lead {
	margin: 8px 0 18px;
	max-width: 60ch;
	color: var(--text);
}

.pillars {
	display: grid;
	gap: 14px;
	margin: 18px 0 8px;
}

.pillar {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	padding: 14px 16px;
	box-shadow: var(--shadow);
}

.pillar h4 {
	margin: 0 0 4px;
	font-size: 16px;
}

.pillar p {
	margin: 0;
	color: var(--muted);
}

.badge.num {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(184, 156, 125, .35);
}

.concept-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.chip {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	background: #f6f3ef;
	color: #5a4b3a;
	font-size: 12px;
	letter-spacing: .02em;
}

/* — Visual Side — */
.concept-visual {
	display: grid;
	gap: 14px;
}

.hero-thumb {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--line);
	aspect-ratio: 4 / 3;
	background: #f7f7f7;
}

.hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform .5s ease;
}

.hero-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .28));
}

.hero-thumb figcaption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	z-index: 2;
	padding: 6px 10px;
	border-radius: 10px;
	font-size: 12px;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: saturate(140%) blur(4px);
}

.hero-thumb:hover img {
	transform: scale(1.06);
}

.thumb-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
}

.thumb {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fafafa;
	display: block;
	transition: transform .3s ease, box-shadow .3s ease;
}

.thumb:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
}


/* ---- Page Transition ---- */
:root {
	--fx-bg: #111;
	--fx-dur: 280ms;
	--fx-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--fx-dur: 0ms
	}
}

/* 入場フェードイン */
body {
	opacity: 1;
	transition: opacity var(--fx-dur) var(--fx-ease);
}

html.fx-enter body {
	opacity: 0;
}

/* 退場ベール */
#page-fx {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--fx-bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--fx-dur) var(--fx-ease);
}

html.fx-exit #page-fx {
	opacity: 1;
	pointer-events: auto;
}