:root {
	/* カラーシステム */
	--color-primary: #2e3a42;
	--color-primary-dark: #232b30;
	--color-accent: #dd6f52;
	--color-accent-dark: #c65b40;
	--color-sub: #3b9ca6;
	--color-success: #33a24b;
	
	/* 特殊背景・テキスト */
	--color-gold: #d99425;
	--color-gold-bg: #fcf6dd;
	--color-gold-text: #8a5a12;
	--color-gold-border: #ead9a6;
	--color-cream: #fcf6d2;
	
	/* ベースカラー */
	--text-main: #3a3a3a;
	--text-dark: #2c2c2c;
	--text-muted: #8a8a8a;
	--border-color: #eaeaea;
	--bg-panel: #f7f7f4;
	--bg-white: #fff;
	
	/* フォント・レイアウト */
	--font-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	--font-base: "Noto Sans JP", sans-serif;
	--content-width: 1140px;
	--radius-sm: 12px;
	--radius-lg: 20px;
	--shadow-main: 0 10px 30px rgba(20, 40, 70, 0.10);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-base);
	color: var(--text-main);
	background: var(--bg-white);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
h1, h2, h3 {
	font-family: var(--font-heading);
	line-height: 1.4;
	font-weight: 700;
}
a {
	color: inherit;
	text-decoration: none;
}
img {
	max-width: 100%;
	display: block;
}
.container {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 20px;
}
.section-tag {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--color-sub);
}
section {
	scroll-margin-top: 72px;
}
:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ボタンコンポーネント */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	border-radius: var(--radius-sm);
	padding: 15px 26px;
	font-size: 16px;
	cursor: pointer;
	border: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
	background: var(--color-accent);
	color: #fff;
	box-shadow: 0 6px 18px rgba(221, 111, 82, .30);
}
.btn-primary:hover {
	background: var(--color-accent-dark);
	transform: translateY(-2px);
}
.btn-secondary {
	background: var(--color-gold);
	color: #fff;
}
.btn-secondary:hover {
	background: #bd7f1c;
	transform: translateY(-2px);
}
.btn-block {
	display: flex;
	width: 100%;
}

/* 画像プレースホルダーエリア */
.image-placeholder {
	background: linear-gradient(135deg, #e7ebf0, #dde3ea);
	border: 1px dashed #aeb7c2;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: #7b8694;
	text-align: center;
	font-size: 12px;
	line-height: 1.4;
	position: relative;
}
.image-placeholder .status-tag {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(58, 58, 58, .78);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 5px;
}

/* ヘッダー */
.site-logo {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 22px;
	color: #fff;
	letter-spacing: .02em;
}
.site-logo span {
	color: var(--color-accent);
}

/* メインビジュアル */
.hero-section {
	background: linear-gradient(180deg, #fcf6de 0%, #ffffff 72%);
	color: var(--text-main);
	position: relative;
	overflow: hidden;
}
.hero-section::after {
	content: "";
	position: absolute;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 156, 166, .14), transparent 70%);
	top: -150px;
	right: -150px;
	pointer-events: none;
}
.hero-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 60px 20px 64px;
	position: relative;
	z-index: 1;
}
.hero-title {
	font-size: clamp(28px, 7vw, 52px);
	font-weight: 900;
	margin: 14px 0 16px;
	letter-spacing: .01em;
	color: var(--text-dark);
}
.hero-title .highlight-line {
	position: relative;
	white-space: nowrap;
}
.hero-title .highlight-line::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .08em;
	height: .18em;
	background: var(--color-accent);
	opacity: .9;
	border-radius: 2px;
	z-index: -1;
}
.hero-lead {
	font-size: clamp(14px, 2.2vw, 18px);
	color: var(--text-muted);
	max-width: 30em;
	margin-bottom: 26px;
}
.hero-asset {
	margin-top: 8px;
}
.hero-asset .image-placeholder {
	height: 230px;
}

/* 実績・特徴バナー */
.features-banner {
	max-width: var(--content-width);
	margin: -34px auto 0;
	padding: 0 20px;
	position: relative;
	z-index: 5;
}
.features-card {
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-main);
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border: 1px solid var(--border-color);
}
.features-item {
	padding: 20px 18px;
	text-align: center;
	position: relative;
}
.features-item + .features-item {
	border-top: 1px solid var(--border-color);
}
.features-item .main-text {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 30px;
	color: var(--color-primary);
	line-height: 1.1;
}
.features-item .main-text em {
	color: var(--color-accent);
	font-style: normal;
}
.features-item .sub-title {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 4px;
}
.features-item .desc-text {
	font-size: 11px;
	color: #9aa4b0;
	margin-top: 2px;
}

/* セクション共通ヘッダー */
.l-section {
	padding: 62px 0;
}
.l-section.is-alt {
	background: var(--bg-panel);
}
.section-header {
	margin-bottom: 30px;
}
.section-header h2 {
	font-size: clamp(22px, 4vw, 32px);
	color: var(--color-primary);
	font-weight: 900;
	margin-top: 6px;
}
.section-header p {
	color: var(--text-muted);
	margin-top: 8px;
	font-size: 15px;
}

/* 商品グリッド */
.product-group-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--color-primary);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.product-group-title::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--color-primary);
}
.product-group-title.is-seasonal::before {
	background: var(--color-gold);
}
.product-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 30px;
}
.product-card {
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 10px;
	text-align: center;
	transition: border-color .15s, transform .15s;
}
.product-card:hover {
	border-color: #c3ccd7;
	transform: translateY(-2px);
}
.product-card .image-placeholder {
	height: 96px;
	border: none;
	margin-bottom: 8px;
}
.product-card .product-name {
	font-size: 13px;
	font-weight: 500;
}
.product-card.is-seasonal {
	background: #fdfaf3;
	border-color: var(--color-gold-border);
}
.product-card .product-sub {
	font-size: 10px;
	color: var(--color-gold-text);
	margin-top: 3px;
	font-weight: 500;
}
.product-card .btn-detail {
	display: block;
	margin-top: 9px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--font-heading);
	color: var(--color-accent);
	border: 1.5px solid var(--color-accent);
	border-radius: 8px;
	padding: 7px 0;
	transition: background .15s ease, color .15s ease;
}
.product-card .btn-detail:hover {
	background: var(--color-accent);
	color: #fff;
}
.product-card.is-teaser {
	border-style: dashed;
	background: var(--bg-panel);
}

/* デザイン制作代行セクション */
.design-service-block {
	background: var(--color-gold-bg);
	border: 2px solid var(--color-gold-border);
	border-radius: var(--radius-lg);
	padding: 34px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
}
.design-intro-text {
	color: #6b5a30;
	font-size: 14px;
	margin: 12px 0 20px;
	line-height: 1.6;
}
.design-service-block .icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}
.design-service-block h2 {
	color: var(--color-gold-text);
	font-size: clamp(22px, 4vw, 30px);
	font-weight: 900;
}
.design-service-block .price-text {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 34px;
	color: #7a520f;
	margin: 4px 0 10px;
}
.design-service-block p {
	color: #6b5a30;
	font-size: 15px;
	margin-bottom: 20px;
}
.design-service-block .image-placeholder {
	height: 200px;
	background: linear-gradient(135deg, #f3e7cc, #ead9b4);
	border-color: #d9c089;
	color: #9a7b3c;
}
/* 料金表のスタイル */
.design-price-table-wrap {
	background: #fff;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 24px;
	border: 1px solid var(--color-gold-border);
}
.design-price-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.design-price-table tr {
	border-bottom: 1px dashed #ead9a6;
}
.design-price-table tr:last-child {
	border-bottom: none;
}
.design-price-table th,
.design-price-table td {
	padding: 10px 0;
	color: #5c4308;
}
.design-price-table th {
	text-align: left;
	font-weight: 700;
}
.design-price-table td:nth-child(2) {
	text-align: center;
	color: #8a8a8a;
	font-size: 13px;
	width: 70px;
}
.design-price-table td.price {
	text-align: right;
	font-weight: 700;
	font-family: var(--font-heading);
	color: #7a520f;
	font-size: 16px;
	white-space: nowrap;
}
.design-price-table td.price span {
	font-size: 12px;
	font-weight: normal;
	margin-left: 2px;
	color: #6b5a30;
}
/* 「相談ください」用の個別指定 */
.design-price-table td.price.text-note {
	font-family: var(--font-base);
	font-size: 14px;
	font-weight: 500;
	color: #5c4308;
}
/* 注意書き用のスタイル */
.design-price-note {
	margin-top: 12px;
	font-size: 11px;
	color: #7a683c;
	line-height: 1.4;
	text-align: left;
}

/* ご発注の流れ */
.flow-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	counter-reset: step-counter;
}
.flow-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
}
.flow-step .step-number {
	counter-increment: step-counter;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.flow-step:last-child .step-number {
	background: var(--color-accent);
}
.flow-step .step-number::before {
	content: counter(step-counter);
}
.flow-step h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-main);
}
.flow-step p {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 2px;
}

/* 利用シーン */
.cases-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.case-card {
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.case-card .image-placeholder {
	height: 150px;
	border: none;
	border-radius: 0;
}
.case-body {
	padding: 20px 22px;
}
.case-card .scene-title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.case-card p {
	font-size: 14px;
	color: #3c424b;
}

/* よくある質問 */
.faq-list details {
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
	overflow: hidden;
}
.faq-list summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 52px 18px 20px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-primary);
	position: relative;
}
.faq-list summary::-webkit-details-marker {
	display: none;
}
.faq-list summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--color-accent);
	border-bottom: 2.5px solid var(--color-accent);
	transform: translateY(-65%) rotate(45deg);
	transition: transform .2s;
}
.faq-list details[open] summary::after {
	transform: translateY(-35%) rotate(225deg);
}
.faq-list .answer-content {
	padding: 0 20px 18px;
	color: #3c424b;
	font-size: 14px;
}

/* お問い合わせ・CVセクション */
.contact-section {
	background: var(--color-cream);
	color: var(--text-main);
}
.contact-section .section-header h2 {
	color: var(--text-dark);
}

/* フッター */

/* スマホ固定コンポーネント */
.mobile-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: #fff;
	border-top: 1px solid var(--border-color);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
	display: flex;
	gap: 10px;
	padding: 10px 14px;
	align-items: center;
}
.mobile-sticky-cta .btn-tel {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 58px;
	color: var(--color-primary);
	font-size: 11px;
	font-weight: 700;
}
.mobile-sticky-cta .btn-primary {
	flex: 1;
	padding: 13px;
	font-size: 15px;
}

/* スクロールアニメーション（JS連携用クラスをプレーンに定義） */
.animate-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
}
.animate-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* レスポンシブ設計（ブレイクポイント） */
@media (min-width: 680px) {
	.features-card {
		grid-template-columns: repeat(3, 1fr);
	}
	.features-item + .features-item {
		border-top: none;
		border-left: 1px solid var(--border-color);
	}
	.product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.cases-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.flow-list {
		grid-template-columns: 1fr 1fr;
	}
	.footer-inner {
		grid-template-columns: 2fr repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	.mobile-sticky-cta {
		display: none;
	}
	.hero-inner {
		display: grid;
		grid-template-columns: 1.05fr .95fr;
		gap: 40px;
		align-items: center;
		padding: 90px 20px 80px;
	}
	.hero-asset .image-placeholder {
		height: 300px;
	}
	.design-service-block {
		grid-template-columns: 1.1fr .9fr;
		padding: 44px;
	}
}
@media screen and (max-width: 834px) {
	  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background: #fff;
    -webkit-box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
            box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    padding-left: 3%;
  }
  header .header-logo {
    width: 23%;
    margin-top: -1vw;
  }
  header .header-right {
    width: 70%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  header .header-right .header-text {
    width: 52%;
  }
  header .header-right .header-cta {
    width: 44%;
  }

	  footer {
    background: #405460;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom: 2vw;
  }
  footer .footer-logo {
    width: 17%;
    margin-right: 3%;
  }
  footer p {
    color: #fff;
    font-size: 2vw;
  }


}
@media screen and (min-width: 835px) {
	  footer {
    background: #405460;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1rem 0 1.2rem 0;
  }
  footer .footer-logo {
    width: 120px;
    margin: 0 2rem -0.1rem 0;
  }
  footer p {
    color: #fff;
    font-size: 0.7rem;
  }
  header {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background: #fff;
    -webkit-box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
            box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    padding: 0 10px 0 30px;
  }
  header .header-logo {
    width: 131px;
    height: 31px;
  }
  header .header-right {
    width: 615px;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  header .header-right .header-text {
    width: 217px;
    height: 40px;
  }
  header .header-right .header-cta {
    width: 379px;
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
	.animate-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.btn:hover, .product-card:hover {
		transform: none;
	}
}