/*	===============================================================
	● サイトCSSファイル(page)
	---------------------------------------------------------------
	Release 2026.02.17                               Powerd by TDR
	=============================================================== */

	/*********************************************
	 * ナビゲーション（PC）
	 *********************************************/
	header {
		position: fixed;
		top: 0; left: 0;
		width: var(--nav-width);
		height: 100vh;
		background: var(--nav-bg);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		z-index: 1000;
		padding: 40px 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: 4px 0 15px rgba(0, 0, 0, 0.05);
	}

	/* ロゴエリア */
	.header-logo-area { text-align: center; margin-bottom: 40px; }
	.logo { width: 85px; height: auto; transition: opacity 0.3s; display: block; margin: 0 auto 10px; }
	.logo:hover { opacity: 0.7; }
	.logo-text {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.2rem;
		letter-spacing: 0.15em;
		color: var(--text-dark);
		font-weight: 500;
	}

	.nav-menu { list-style: none; flex-grow: 1; width: 100%; text-align: center; }
	.nav-menu li { margin-bottom: 25px; }
	.nav-menu a {
		text-decoration: none;
		color: #222; 
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.2rem;
		font-weight: 500;
		letter-spacing: 0.12em;
		display: block;
		line-height: 1.2;
		transition: all 0.3s ease;
	}
	.nav-menu a span { display: block; font-size: 0.65rem; font-family: 'Noto Serif JP', serif; margin-top: 3px; opacity: 0.8; transition: all 0.3s ease; }

	.nav-menu a:hover { color: var(--main-color); transform: translateX(5px); }
	.nav-menu a:hover span { opacity: 1; color: var(--text-dark); }

	.lang-switch {
		margin-top: auto; 
		margin-bottom: 20px;
		font-family: 'Cormorant Garamond', serif;
		font-size: 0.9rem;
		letter-spacing: 0.15em;
		color: #222;
		font-weight: 500;
		border-top: 1px solid rgba(0,0,0,0.08);
		padding-top: 20px;
		width: 70%;
		text-align: center;
	}

	.lang-switch a
	{
		color: #222;
		font-weight: 500;
	}

	.lang-switch a:nth-child( 1 ), .lang-switch a:nth-child( 2 ) { display:none; }
	.lang-switch a:nth-child( 3 ), .lang-switch a:nth-child( 4 ) { display:inline-block; }

	.lang-switch a[title='Japanese']::after
	{
		content:'　/　';
	}

	/*********************************************
	 * ナビゲーション（SP）
	 *********************************************/
	.mobile-header {
		display: none;
		position: fixed;
		top: 0; width: 100%;
		padding: 15px 20px;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(10px);
		z-index: 1100;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
	
	/* ロゴエリア */
	.mobile-logo-wrap { display: flex; align-items: center; text-decoration: none; }
	.mobile-logo-wrap img { height: 32px; width: auto; margin-right: 12px; }
	.mobile-logo-wrap span {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.3rem;
		letter-spacing: 0.1em;
		color: var(--text-dark);
		font-weight: 600;
	}

	.hamburger {
		cursor: pointer;
		width: 26px; height: 18px;
		display: flex; flex-direction: column; justify-content: space-between;
		z-index: 1200;
	}

	.hamburger span { display: block; height: 1px; width: 100%; background: var(--text-dark); transition: 0.3s; }
	.hamburger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
	.hamburger.active span:nth-child(2) { opacity: 0; }
	.hamburger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

	.mobile-nav {
		position: fixed;
		top: 0; right: -100%;
		width: 100%; height: 100vh;
		background: rgba(255, 255, 255, 0.98);
		z-index: 1050;
		display: flex; flex-direction: column; justify-content: center; align-items: center;
		transition: 0.5s ease-in-out;
		padding: 60px 20px;
	}

	.mobile-nav.active { right: 0; }
	.mobile-nav ul { list-style: none; text-align: center; width: 100%; }
	.mobile-nav ul li { margin-bottom: 25px; }
	.mobile-nav a { 
		text-decoration: none; 
		font-size: 1.5rem; 
		color: #000; 
		font-weight: 600;
		font-family: 'Cormorant Garamond', serif;
		display: block;
		line-height: 1.2;
		letter-spacing: 0.1em;
	}
	.mobile-nav a span { display: block; font-size: 0.75rem; font-family: 'Noto Serif JP', serif; margin-top: 4px; color: var(--text-color); font-weight: 400; }

	/*********************************************
	 * フッタ
	 *********************************************/
	footer {
		background-color: var(--footer-bg);
		color: #fff;
		padding: 60px 8% 30px;
		margin-left: var(--nav-width);
		text-align: center;
	}
	.footer-logo { 
		width: 70px; 
		height: auto;
		margin-bottom: 30px; 
		vertical-align: middle;
		background:#514738;
	}
	.footer-nav { list-style: none; display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; flex-wrap: wrap; }
	.footer-nav a { 
		color: rgba(255,255,255,0.8); 
		text-decoration: none; 
		font-family: 'Cormorant Garamond', serif; 
		font-size: 0.9rem; 
		letter-spacing: 0.1em;
		transition: 0.3s;
	}
	.footer-nav a:hover { color: #fff; }
	.sns-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; }
	.sns-links a { color: #fff; text-decoration: none; opacity: 0.7; transition: 0.3s; }
	.sns-links a:hover { opacity: 1; }
	.copyright { font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; }

	/*********************************************
	 * 共通
	 *********************************************/
	/* メイン */
	main { margin-left: var(--nav-width); width: calc(100% - var(--nav-width)); }

	/* セクション */
	.section-padding { padding: 80px 8%; }
	.section-label {
		display: block;
		font-family: 'Cormorant Garamond', serif;
		font-size: 0.9rem;
		letter-spacing: 0.3em;
		color: var(--main-color);
		margin-bottom: 20px;
		text-align: center;
	}

	.section-label.mini {
		margin-bottom:0px;
	}


	/* ボタン 1 */
	.btn_1 {
		display: inline-block;
		padding: 14px 45px;
		border: 1px solid var(--main-color);
		text-decoration: none;
		color: var(--main-color);
		font-family: 'Cormorant Garamond', serif;
		letter-spacing: 0.2em;
		margin-top: 25px;
		transition: 0.4s;
		border-radius: 5px; 
	}
	.btn_1:hover { background: var(--main-color); color: #fff; }

	/* ボタン 2 */
	.btn_2 { 
		display: inline-block; 
		padding: 16px 60px; 
		background-color: var(--main-color); 
		color: #fff; 
		text-decoration: none; 
		font-family: 'Cormorant Garamond', serif; 
		letter-spacing: 0.2em; 
		border: 1px solid var(--main-color); 
		transition: 0.4s; 
		border-radius: 5px; 
	}
	.btn_2:hover { background-color: transparent; color: var(--main-color); transform: translateY(-2px); }

	/* ボタン 3 */
	.btn_3 { 
		display: inline-block; 
		padding: 16px 60px; 
		background-color: var(--accent-color); 
		color: #fff; 
		text-decoration: none; 
		font-family: 'Cormorant Garamond', serif; 
		letter-spacing: 0.2em; 
		border: 1px solid var(--accent-color); 
		transition: 0.4s; 
		border-radius: 5px; 
	}
	.btn_3:hover { background-color: transparent; color: var(--accent-color); transform: translateY(-2px); }

	/* 揃え */
	.text-left { text-align:left; }
	.text-right { text-align:right; }
	.text-center { text-align:center; }

	/* 改行 */
	.sp { display:none; }

	/* 汎用リンク */
	.link-text {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--text-dark);
		text-decoration: none;
		font-size: 0.95rem;
		position: relative;
		padding-bottom: 3px;
		transition: color 0.3s ease;
	}

	.link-text::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #916326;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.4s ease;
	}

	.link-text:hover {
		color: #916326;
	}

	.link-text:hover::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	.link-text svg {
		transition: transform 0.3s ease;
	}

	.link-text.back:hover svg {
		transform: translateX(-5px);
	}

	.link-text.forward:hover svg {
		transform: translateX(5px);
	}

	/* ページタイトルセクション（トップページ以外の共通セクション） */
	.hero-minimal {
		height: 10vh; 
		display: flex;
		align-items: flex-end; 
		padding: 0 8% 15px; 
		/* background: #e9edd8; */
		background: #E3DFD4;
		box-shadow: none;
		position: relative;
		z-index: 10;
	}

	.hero-title-wrap {
		position: relative;
		animation: fadeInUp 1.2s ease-out forwards;
	}

	.en-sub {
		font-family: 'Cormorant Garamond', serif;
		font-style: italic;
		font-weight: 500;
		color: #b5b292;
		display: block;
		font-size: 1.1rem; 
		margin-bottom: 0px; 
		letter-spacing: 0.15em;
		text-transform: capitalize;
	}

	.title-main {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.title-main h1 {
		font-size: 1.7rem; 
		font-weight: 500;
		/* color: #b1ae8d; */
		color: #8f8d75;
		letter-spacing: 0.12em;
		line-height: 1.1;
	}

	.accent-line {
		width: 1px;
		height: 30px; 
		background: #b1ae8d;
		opacity: 0.5;
	}

	/* アニメーション */
	@keyframes fadeInUp {
		from { opacity: 0; transform: translateY(15px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* エラー文字色 */
	.error_form_message { color:#cc0000; }

	/**********************************************************************************/
	/**********************************************************************************/
	/**********************************************************************************/

	/*********************************************
	 * トップページ（HOME）
	 *********************************************/
	/* ブランディング */
	.hero {
		height: 100vh;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		overflow: hidden;
		background-color: #000;
	}
	.hero-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
	.hero-copy {
		position: relative;
		z-index: 10;
		margin-right: 8%;
		writing-mode: vertical-rl;
		letter-spacing: 0.6em;
		height: fit-content;
		max-height: 90vh; 
	}
	.hero-copy h1 {
		font-size: clamp(1.6rem, 3.8vh, 2.5rem); 
		font-weight: 700;
		color: #fff;
		text-shadow: 0 0 20px rgba(0,0,0,0.6), 2px 2px 10px rgba(0,0,0,0.4);
		line-height: 1.8;
		white-space: nowrap;
	}

	/* ABOUT */
	.about-section { background-color: rgba(255, 255, 255, 0.4); text-align: center; }
	.about-content { max-width: 800px; margin: 0 auto; }
	.about-content h2 { font-size: 2rem; margin-bottom: 40px; color: var(--text-dark); line-height: 1.6; font-weight: 500; }
	.about-content p { margin-bottom: 30px; font-size: 1.05rem; }

	.concept-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
	.concept-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
	.concept-images img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
	.concept-img-1 { grid-row: span 1; aspect-ratio: 1 / 1; }
	/*
	.concept-img-2 { aspect-ratio: 2 / 2; }
	.concept-img-3 { aspect-ratio: 1 / 1; }
	*/
	.concept-text h2 { font-size: 1.8rem; margin-bottom: 25px; color: var(--main-color); text-align: left; }
	.concept-text p { margin-bottom: 20px; font-size: var( --text-size ); text-align: justify; }

	/* COLLECTION */
	.collection-section { background-color: rgba(255, 255, 255, 0.7); text-align: center; overflow: hidden; }
	.collection-section h2 { font-size: 2rem; color: var(--text-dark); margin-bottom: 50px; font-weight: 500; }
	.collection-carousel { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 50px; }
	.carousel-inner { display: flex; overflow: hidden; scroll-behavior: smooth; gap: 20px; padding-bottom: 40px; }
	.carousel-item { flex: 0 0 auto; width: calc(100% / 5 - 16px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.4s ease; overflow: hidden; }
	.carousel-item:hover { transform: translateY(-5px); }
	.carousel-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.6s ease, filter 0.4s ease; }
	.carousel-item:hover img { transform: scale(1.1); filter: brightness(1.1); }
	.carousel-nav { position: absolute; top: 40%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; transition: background 0.3s; }
	.carousel-nav.prev { left: 15px; }
	.carousel-nav.next { right: 15px; }
	.carousel-nav svg { width: 20px; height: 20px; fill: var(--text-dark); }
	.carousel-dots { display: flex; justify-content: center; gap: 10px; margin: 10px 0 40px; }
	.dot { width: 8px; height: 8px; background-color: rgba(0,0,0,0.15); border-radius: 50%; cursor: pointer; transition: 0.3s; }
	.dot.active { background-color: var(--main-color); transform: scale(1.3); }

	/* NEWS */
	.news-section { background-color: transparent; }
	.news-section h2 { font-size: 2rem; color: var(--text-dark); margin-bottom: 50px; font-weight: 500; text-align: center;}
	.news-list { max-width: 900px; margin: 0 auto; list-style: none; }
	.news-item { 
		display: flex; 
		align-items: center; 
		padding: 15px 15px; 
		border-bottom: 1px solid rgba(0,0,0,0.08); 
		transition: background-color 0.3s;
	}
	.news-item:nth-child(even) { background-color: rgba(0, 0, 0, 0.04); }
	
	.news-date { 
		font-family: 'Noto Serif JP', serif; 
		font-size: var( --text-size ); 
		width: 140px; 
		color: var(--text-dark); 
		font-weight: 500;
	}
	
	.news-category { 
		font-size: 0.75rem; 
		width: 100px; 
		text-align: center; 
		background-color: var(--main-color); 
		color: white; 
		padding: 4px 0; 
		margin-right: 30px;
		letter-spacing: 0.05em;
		border-radius: 5px; 
	}
	
	.news-title { flex-grow: 1; }
	.news-title a { 
		text-decoration: none; 
		color: var(--text-dark); 
		font-size: var( --text-size ); 
		font-weight: 500;
		transition: 0.3s;
		position: relative;
	}
	.news-title a:hover { color: var(--main-color); text-decoration: underline; }

	/* CONTACT */
	.contact-section { background-color: rgba(255, 255, 255, 0.4); text-align: center; }
	.contact-content { max-width: 700px; margin: 0 auto; }
	.contact-content h2 { margin-bottom: 40px; }
	.contact-content p { margin-bottom: 40px; font-size: var( --text-size ); line-height: 2; }

	/*********************************************
	 * kimonokkoについて（ABOUT）
	 *********************************************/
	/* セクションラベル（共通パーツ） */
	.section-label-wrap {
		margin-bottom: 20px; 
	}

	/* CONCEPT */
	.concept-section { 
		background: #f5f4f1; 
	}

	.concept-container {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 160px;
	}

	.concept-text .section-label-wrap {
		text-align: left; 
	}

	.en-label {
		font-family: 'Cormorant Garamond', serif;
		color: var(--main-color);
		letter-spacing: 0.35em;
		font-size: 0.9rem;
		display: block;
		text-transform: uppercase;
	}

	.concept-image-box { 
		flex: 0 0 100px;
		order: 2;
		display: flex;
		align-items: center;
	}

	.concept-image-box2 {
		width:90%;
		order: 2;
		border-radius: 2px;
		box-shadow: 
			0px 0px 13px rgba(74, 67, 58, 0.4), 
			0px 0px 15px rgba(174, 168, 58, 0.25); 
		display:none;
	}
	
	.concept-image-box2 img
	{
		vertical-align: top;
		width:100%;
		height:20%;
	}

	.img-50 { 
		width: 100px; 
		height: auto;
		border-radius: 2px;
		box-shadow: 
			0px 0px 13px rgba(74, 67, 58, 0.4), 
			0px 0px 15px rgba(174, 168, 58, 0.25); 
	}

	.concept-text {
		flex: 1;
		order: 1;
	}

	.concept-section { 
		background: #f5f4f1; 
	}

	.concept-container {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 160px;
	}

	/* DIALOGUE */
	.dialogue-section {
		background: #ffffff;
	}

	.dialogue-container {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 80px; 
	}

	.dialogue-image-box { 
		flex: 0 0 45%; 
		order: 1;
	}

	.dialogue-image-box img { 
		width: 100%; 
		border-radius: 0 120px 0 120px; 
		box-shadow: 0 15px 35px rgba(0,0,0,0.06); 
	}

	.dialogue-text {
		flex: 1; 
		order: 2;
	}

	.modern-catch {
		font-size: 1.8rem;
		color: var(--main-color);
		line-height: 1.7;
		margin-bottom: 35px;
		font-weight: 700;
	}

	.concept-text .modern-catch,
	.dialogue-text .modern-catch {
		color: var(--text-dark);
	}

	.modern-desc {
		font-size: var(--text-size);
		line-height: 1.8;
		color: var(--text-color);
		text-align: justify;
	}

	.dialogue-text .modern-desc + .modern-desc {
		margin-top: 25px;
	}

	/* お届けまでの流れ */
	.integrated-flow {
		margin-top: 40px;
		padding: 30px;
		background: #F5F4F1;
		border-radius: 4px;
	}

	.flow-sub-title {
		font-size: 1.1rem;
		color: #916326;
		letter-spacing: 0.1em;
		margin-bottom: 25px;
		font-weight: 500;
		text-align: center;
		position: relative;
	}

	.flow-sub-title::after {
		content: '';
		display: block;
		width: 30px;
		height: 1px;
		background: #916326;
		margin: 10px auto 0;
	}

	.compact-steps {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.compact-steps li {
		display: flex;
		align-items: flex-start;
		gap: 20px;
		padding: 15px 0;
		border-bottom: 1px solid rgba(145, 99, 38, 0.1);
	}

	.compact-steps li:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.compact-steps li:first-child {
		padding-top: 0;
	}

	.step-num {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.2rem;
		color: #916326;
		font-weight: 500;
		width: 30px;
		flex-shrink: 0;
	}

	.step-txt strong {
		display: block;
		font-size: var(--text-size);
		color: #333;
		margin-bottom: 3px;
		font-weight: 500;
	}

	.step-txt span {
		font-size: 0.85rem;
		color: #666;
		line-height: 1.5;
		display: block;
	}

   /* お打ち合わせセクションの強調 */
	.compact-steps li.accent {
		background: #ffffff;
		margin: 5px -15px;
		padding: 15px;
		border-radius: 4px;
		border-bottom: none;
		box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	}

	.dialogue-text .modern-desc {
		font-size: var(--text-size);
	}

	/* 備考 */
	.dialogue-note {
		margin-top: 30px;
		padding-left: 20px;
		border-left: 1px solid #916326;
		font-size: 0.85rem;
		color: #716a5e;
		line-height: 1.8;
	}

	/* CREATORS */
	.creators-section { 
		background: #f5f4f1;
		text-align: center; 
	}

	.creators-title { font-size: 2rem; color: #4a443a; font-weight:400; }
	.creators-content { width: 100%; margin: 0 auto; }

	.creators-accent-line {
		width: 40px; 
		height: 1px; 
		background: #916326; 
		margin: 20px auto;
	}

	.creators-section .section-label-wrap {
		margin-bottom: 30px; 
		position: relative;
		text-align: center;
	}

	.creators-section .section-label-wrap::after {
		content: ''; 
		position: absolute; 
		bottom: -15px; 
		left: 50%;
		transform: translateX(-50%); 
		width: 60px; 
		height: 1px; 
		background: var(--main-color);
	}

	.creators-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		margin-top: 50px;
	}

	.creators-section .en-label {
		font-size: 2rem;
	}

	.creator-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.creator-image {
		width: 240px;
		height: 240px;
		overflow: hidden;
		border-radius: 50%;
		margin-bottom: 30px;
		border: 1px solid rgba(145, 99, 38, 0.2);
	}

	.creator-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.creator-info .role {
		font-family: 'Cormorant Garamond', serif;
		font-size: 0.95rem;
		color: #916326;
		letter-spacing: 0.15em;
		display: block;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.creator-info .name {
		font-size: 1.4rem;
		color: var(--text-dark);
		font-weight: 500;
		margin-bottom: 20px;
		display: block;
		letter-spacing: 0.05em;
	}

	.creator-info .profile-text {
		font-size: 0.95rem;
		line-height: 2;
		color: var(--text-color);
		max-width: 400px;
		margin: 0 auto;
	}

	/* WORKS */
	.works-section {
		padding: 100px 0;
		background-color: white;
	}

	.works-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 40px;
	}

	.works-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
		margin-top: 60px;
	}

	.work-item {
		position: relative;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		border-radius: 4px;
		cursor: pointer;
	}

	.work-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.work-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(74, 68, 58, 0.8);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.4s ease;
		padding: 20px;
		text-align: center;
	}

	.work-item:hover img {
		transform: scale(1.1);
	}

	.work-item:hover .work-overlay {
		opacity: 1;
	}

	.work-title {
		color: #fff;
		font-size: 1.1rem;
		font-weight: 500;
		margin-bottom: 8px;
		letter-spacing: 0.1em;
		transform: translateY(20px);
		transition: transform 0.4s ease;
	}

	.work-category {
		color: rgba(255, 255, 255, 0.7);
		font-size: 0.8rem;
		letter-spacing: 0.05em;
		transform: translateY(20px);
		transition: transform 0.4s ease 0.1s;
	}

	.work-item:hover .work-title,
	.work-item:hover .work-category {
		transform: translateY(0);
	}

	/*********************************************
	 * オーダー方法（ORDER）
	 *********************************************/
	.order-container {
		max-width: 1200px;
		margin: 0 auto;
	}

	.order-appeal-section {
		padding: 80px 0;
		background: #fff;
	}

	.appeal-flex {
		display: flex;
		align-items: center;
		gap: 60px;
		margin-bottom: 40px;
	}

	.appeal-image {
		flex: 1;
		position: relative;
	}

	.appeal-image img {
		width: 100%;
		height: auto;
		border-radius: 2px;
		box-shadow: 20px 20px 0 #dbd6d64d;
	}

	.appeal-text {
		flex: 1;
	}

	.appeal-text .sub-title {
		display: block;
		font-family: 'Cormorant Garamond', serif;
		color: var(--accent-color);
		font-size: 1.2rem;
		letter-spacing: 0.2em;
		margin-bottom: 15px;
	}

	.appeal-text h2 {
		font-size: 2.2rem;
		line-height: 1.6;
		color: var(--text-dark);
		margin-bottom: 30px;
		font-weight: 500;
	}

	.appeal-text p {
		font-size: 1.05rem;
		line-height: 2.2;
		color: var(--text-color);
		margin-bottom: 30px;
	}

	.appeal-features {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		margin-top: 30px;
	}

	.feature-box {
		text-align: center;
		padding: 0px 20px 40px 20px;
/*
		background: #fdf3e269;
		border: 1px solid #d5d1a3;
		background: #fff5f5d1;
		background: #fff9f9;
*/
		background: #fdf7f7;
		border: 1px solid #f4c8c8;
		transition: all 0.3s ease;
		border-radius:10px;
	}

	.feature-box:hover {
		border-color: var(--accent-color);
		transform: translateY(-5px);
	}

	.feature-icon {
		font-family: 'Cormorant Garamond', serif;
		font-size: 3rem;
/*
		color: var(--accent-color);
		border-bottom:1px solid #f4c8c8;
*/
		color:#f28585;
		margin-bottom: 25px;
		display: block;
		border-bottom:1px solid #f4dede;
	}

	.feature-pict {
		font-size: 2rem;
		color: var(--accent-color);
		margin: 15px 0;
		display: block;
	}

	.feature-box h3 {
		font-size: 1.15rem;
		margin-bottom: 15px;
		color: var(--text-dark);
	}

	.feature-box p {
		font-size: 0.9rem;
		line-height: 1.8;
		color: var(--text-color);
	}

	/* Flow Section */
	.order-flow-section {
		padding: 80px 0;
		background-color: #f5f4f1;
	}

	.flow-list {
		list-style: none;
		counter-reset: flow-counter;
		margin-top: 40px;
	}

	.flow-item {
		display: flex;
		gap: 40px;
		margin-bottom: 40px;
		position: relative;
	}

	.flow-item::after {
		content: '';
		position: absolute;
		left: 25px;
		top: 60px;
		width: 1px;
		height: calc(100% + 30px);
		background: #d1cdc2;
	}

	.flow-item:last-child {
		margin-bottom: 0;
	}

	.flow-item:last-child::after {
		display: none;
	}

	.flow-num {
		flex-shrink: 0;
		width: 50px;
		height: 50px;
		background: var(--accent-color);
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		font-weight: 600;
		z-index: 1;
	}

	.flow-content {
		flex: 1;
		padding-top: 5px;
	}

	.flow-content h3 {
		font-size: 1.4rem;
		color: var(--text-dark);
		margin-bottom: 10px;
		letter-spacing: 0.05em;
		font-weight: 500;
	}

	.flow-content p {
		font-size: 1rem;
		line-height: 1.8;
		margin-bottom: 15px;
	}

	.flow-item.highlight .flow-content {
		background: #fff;
		padding: 40px;
		border-radius: 4px;
		box-shadow: 0 10px 40px rgba(0,0,0,0.04);
		border-left: 4px solid var(--accent-color);
	}

	.highlight-label {
		display: inline-block;
		font-size: 0.75rem;
		color: var(--accent-color);
		border: 1px solid var(--accent-color);
		padding: 2px 10px;
		margin-bottom: 15px;
		letter-spacing: 0.1em;
	}

	/* FAQ Section */
	.faq-section {
		padding: 80px 0;
		background: #eeece6;
	}

	.faq-list {
		max-width: 100%; 
		margin: 80px auto 0;
	}

	.faq-item {
		margin-bottom: 30px;
	}

	.faq-q {
		font-weight: 600;
		font-size: 1.1rem;
		color: var(--text-dark);
		margin-bottom: 15px;
		display: flex;
		align-items: flex-start;
		gap: 15px;
		padding: 0 10px;
	}

	.faq-q::before {
		content: "Q.";
		color: var(--accent-color);
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.4rem;
		line-height: 1.2;
	}

	.faq-a {
		font-size: 0.95rem;
		line-height: 2;
		display: flex;
		gap: 15px;
		color: var(--text-color);
		background: #fafafa;
		padding: 25px 30px;
		border-radius: 6px;
		position: relative;
	}

	.faq-a::after {
		content: '';
		position: absolute;
		top: -10px;
		left: 20px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #f8f7f4;
	}

	.faq-a::before {
		content: "A.";
		color: var(--accent-color);
		font-family: 'Cormorant Garamond', serif;
		font-weight: 600;
		font-size: 1.4rem;
		line-height: 1.2;
	}

	/* Price Section */
	.price-section {
		padding: 100px 0;
		background: #fdfcf9;
	}

	.price-intro {
		text-align: center;
		max-width: 700px;
		margin: 0 auto 60px;
		font-size: 1rem;
		line-height: 2;
	}

	.price-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		margin-top: 40px;
	}

	.price-card {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		border: 1px solid #e0ddd5;
		box-shadow: 0 4px 15px rgba(0,0,0,0.04);
		display: flex;
		flex-direction: column;
		transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	}

	.price-card:hover {
		transform: translateY(-8px);
		border-color: var(--accent-color);
		box-shadow: 0 20px 40px rgba(74, 68, 58, 0.15);
	}

	.price-card-img {
		width: 100%;
		height: 240px;
		background: #eee;
		position: relative;
		overflow: hidden;
	}

	.price-card-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s ease;
	}

	.price-card-body {
		padding: 35px;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.price-card h4 {
		font-size: 1.3rem;
		margin-bottom: 10px;
		color: var(--text-dark);
		font-weight: 600;
	}

	.price-card .price-desc {
		font-size: 0.9rem;
		margin-bottom: 20px;
		color: #888;
		line-height: 1.6;
		min-height: 3.2em;
	}

	.price-amount-wrap {
		margin-top: auto;
		border-top: 1px solid #f0eee8;
		padding-top: 20px;
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 10px;
	}

	.price-amount {
		font-family: 'Cormorant Garamond', serif;
		font-size: 2.8rem;
		color: var(--accent-color);
		line-height: 1;
	}

	.price-amount-wrap span {
		font-size: 1rem;
		color: var(--text-dark);
	}





	/*********************************************
	 * オンラインショップ（SHOP）
	 *********************************************/
	.shop-section {
		background: #f5f4f1;
		padding: 80px 0 100px;
	}

	.shop-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 40px;
	}

	/* ショップイントロ */
	.shop-intro {
		margin-bottom: 60px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		font-size:var(--font-size);
	}

	.shop-intro p {
		font-size: var(--text-size);
		line-height: 2.2;
		color: var(--text-color);
		letter-spacing: 0.08em;
	}

	.item-price {
		margin:-20px 0 20px 0;
		padding-top:0;
	}

	/* 商品グリッド */
	.product-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 50px 20px;
		margin-bottom: 80px;
	}

	/* 商品アイテム全体へのマウスオーバー効果 */
	.product-item {
		text-decoration: none;
		color: inherit;
		display: block;
		position: relative;
		padding: 10px;
		margin: -10px;
		border-radius: 8px;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.product-item:hover {
		background: #fff;
		transform: translateY(-8px);
		box-shadow: 0 12px 24px rgba(145, 99, 38, 0.1);
	}

	/* 画像のスタイル */
	.product-image {
		aspect-ratio: 3 / 4;
		background: #fff;
		margin-bottom: 15px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(145, 99, 38, 0.15);
		position: relative;
		transition: border-color 0.4s ease;
	}

	.product-item:hover .product-image {
		border-color: rgba(145, 99, 38, 0.3);
	}

	.product-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* バッジ（NEW / 人気商品） */
	.badge {
		position: absolute;
		top: 10px;
		left: 10px;
		padding: 2px 10px;
		font-size: 0.7rem;
		letter-spacing: 0.05em;
		font-weight: 500;
		z-index: 2;
		border-radius: 12px;
		line-height: 1.4;
	}

	/* NEW：オリーブグリーン系 */
	.badge-new {
		background: #759126;
		color: #fff;
	}

	/* 人気商品：落ち着いた朱色系 */
	.badge-popular {
		background: #a44c3d;
		color: #fff;
	}

	.product-info {
		text-align: center;
		padding-bottom: 10px;
	}

	.product-name {
		font-size: var(--text-size);
		color: var(--text-dark);
		font-weight: 500;
		letter-spacing: 0.05em;
		transition: color 0.4s ease;
	}

	.product-item:hover .product-name {
		color: #916326;
	}

	.product-price {
		font-family: 'Cormorant Garamond', serif;
		font-size: 1.2rem;
		color: #916326;
	}

	/* ページャー */
	.pagination-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
		margin-top: 60px;
		padding-top: 40px;
		border-top: 1px solid rgba(0,0,0,0.05);
	}

	.page-numbers {
		display: flex;
		gap: 15px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.page-numbers a, .page-numbers span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		text-decoration: none;
		color: var(--text-color);
		font-size: var(--text-size);
		transition: all 0.3s ease;
	}

	.page-numbers a:hover {
		color: #916326;
	}

	.page-numbers span.current {
		color: #916326;
		border-bottom: 1px solid #916326;
	}

	.page-numbers li.active {
		padding:3px 10px 0 10px;
		background: #E3DFD4;
	}

	/*********************************************
	 * プライバシーポリシー
	 *********************************************/
	.policy-section {
		background:#f5f4f1;
		padding: 100px 0;
	}

	.policy-container {
		/* トップページの標準的な横幅に合わせる */
		max-width: 900px;
		margin: 0 auto;
		padding: 0 40px;
	}

	.policy-content {
		font-size: var(--text-size);
		color: var(--text-color);
		line-height: 2.2;
		/* 文章が広がりすぎないよう、テキストエリアの最大幅を制限して可読性を維持 */
		max-width: 900px;
	}

	.policy-content h2 {
		font-size: 1.25rem;
		color: var(--text-dark);
		margin: 60px 0 25px;
		padding-bottom: 15px;
		border-bottom: 1px solid #e0ddd5;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	.policy-content p {
		margin-bottom: 25px;
	}

	.policy-content ul {
		list-style: none;
		padding: 0;
		margin-bottom: 30px;
	}

	.policy-content ul li {
		position: relative;
		padding-left: 1.5em;
		margin-bottom: 12px;
	}

	.policy-content ul li::before {
		content: "・";
		position: absolute;
		left: 0;
		color: #916326;
	}

	.policy-footer {
		margin-top: 80px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 40px;
	}

	.policy-footer .end-mark {
		font-size: 0.9rem;
	}

	/*********************************************
	 * お問い合わせ（CONTACT）
	 *********************************************/
	.contact-page-section {
		padding: 80px 0 120px;
		background-color: #f5f4f1;
	}

	.contact-form-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 0 30px;
	}

	.contact-intro {
		text-align: center;
		margin-bottom: 60px;
	}

	.contact-intro p {
		font-size: var(--text-size);
		line-height: 2.2;
		color: #555;
		letter-spacing: 0.05em;
	}

	/* フォームのデザイン */
	#contact-form {
		background: transparent; /* 背景になじませる */
	}

	.form-group {
		margin-bottom: 35px;
	}

	.form-label {
		display: block;
		font-size: 0.95rem;
		font-weight: 500;
		margin-bottom: 12px;
		color: #222;
		letter-spacing: 0.1em;
	}

	.form-label span {
		color: #a44c3d; /* 必須項目のアクセントカラー */
		font-size: 0.75rem;
		margin-left: 10px;
		background: rgba(164, 76, 61, 0.1);
		padding: 2px 8px;
		border-radius: 2px;
		vertical-align: middle;
	}

	.form-control {
		width: 100%;
		padding: 16px;
		border: 1px solid rgba(145, 99, 38, 0.25);
		background-color: #fff;
		font-family: inherit;
		font-size: var(--text-size);
		border-radius: 4px;
		transition: all 0.3s ease;
		box-sizing: border-box;
		color: #333;
	}

	.form-control:focus {
		outline: none;
		border-color: #916326;
		box-shadow: 0 0 0 3px rgba(145, 99, 38, 0.1);
	}

	.form-control::placeholder {
		color: #aaa;
		font-size: 0.9rem;
	}

	textarea.form-control {
		min-height: 220px;
		resize: vertical;
	}

	/* 同意チェックボックス */
	.policy-agreement {
		margin-top: 20px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 送信ボタン */
	.form-submit {
		text-align: center;
		margin-top: 60px;
	}

	.submit-btn {
		display: inline-block;
		background: #916326;
		color: #fff;
		padding: 20px 100px;
		border: none;
		border-radius: 4px;
		font-size: 1.05rem;
		letter-spacing: 0.25em;
		cursor: pointer;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		text-decoration: none;
	}

	.submit-btn:hover {
		background: #7a521e;
		transform: translateY(-3px);
		box-shadow: 0 10px 20px rgba(145, 99, 38, 0.15);
	}

	.submit-btn.back
	{
		margin-top:30px;
		background:#aaa;
	}

	/* 完了メッセージ */
	#form-message {
		display: none;
		text-align: center;
		padding: 60px 40px;
		background: #fff;
		border: 1px solid rgba(145, 99, 38, 0.15);
		border-radius: 8px;
		margin-top: 40px;
		box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	}

	#form-message h3 {
		font-size: 1.4rem;
		color: #916326;
		margin-bottom: 20px;
	}