:root {
  	--cream: #F7F3EA;
  	--cream-deep: #EFE8D8;
  	--ink: #2B2118;
  	--gold: #B8863B;
  	--gold-deep: #8C6425;
  	--line: rgba(43, 33, 24, 0.16);
  }

  * {
  	box-sizing: border-box;
  	margin: 0;
  	padding: 0;
  }

  body {
  	font-family: 'Noto Sans JP', sans-serif;
  	color: var(--ink);
  	background: var(--cream);
  }

  .serif {
  	font-family: 'Shippori Mincho', serif;
  }

  /* ===== HERO ===== */
  .hero {
  	position: relative;
  	height: 78vh;
  	min-height: 520px;
  	max-height: 680px;
  	overflow: hidden;
  }

  .hero .img {
  	position: absolute;
  	inset: 0;
  	background-image: linear-gradient(180deg, rgba(43, 33, 24, 0.05) 0%, rgba(43, 33, 24, 0.15) 55%, rgba(43, 33, 24, 0.75) 100%);
  	background-color: transparent;
  }

  .hero .img::before {
  	content: "";
  	position: absolute;
  	inset: 0;
  	background-image: url("image/hero.webp");
  	background-size: cover;
  	background-position: center 12%;
  	filter: saturate(0.85) contrast(0.97);
  	z-index: -1;
  }

  .vtext {
  	position: absolute;
  	top: 36px;
  	left: 20px;
  	writing-mode: vertical-rl;
  	font-family: 'Shippori Mincho', serif;
  	font-size: 14px;
  	letter-spacing: 0.25em;
  	color: var(--cream);
  	z-index: 2;
  	opacity: 0.9;
  }

  .vtext.right {
  	left: auto;
  	right: 20px;
  	max-height: 420px;
  	font-size: 15px;
  	letter-spacing: 0.18em;
  }

  .hero-copy {
  	position: absolute;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	z-index: 2;
  	padding: 0 24px 40px;
  }

  .hero-copy h1 {
  	font-family: 'Shippori Mincho', serif;
  	font-size: clamp(19px, 5.6vw, 24px);
  	line-height: 2.1;
  	color: var(--cream);
  	font-weight: 500;
  }

  .scrolldown {
  	position: absolute;
  	left: 24px;
  	bottom: 16px;
  	z-index: 3;
  	font-size: 11px;
  	letter-spacing: 0.15em;
  	color: var(--cream);
  	display: flex;
  	align-items: center;
  	gap: 8px;
  }

  .scrolldown .bar {
  	width: 1px;
  	height: 26px;
  	background: var(--cream);
  	opacity: 0.7;
  }

  /* ===== SECOND VIEW ===== */
  .intro {
  	max-width: 560px;
  	margin: 0 auto;
  	padding: 72px 24px 56px;
  	text-align: center;
  }

  .intro h2 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: clamp(24px, 6.5vw, 30px);
  	line-height: 1.75;
  	margin-bottom: 22px;
  }

  .intro p {
  	font-size: 14.5px;
  	line-height: 2.1;
  	color: #5C4E3C;
  }

  /* ===== PRINCIPLE ===== */
  .principle {
  	max-width: 520px;
  	margin: 0 auto;
  	padding: 0 24px 64px;
  }

  .principle h2 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: clamp(22px, 6vw, 27px);
  	line-height: 1.7;
  	margin-bottom: 20px;
  	text-align: center;
  }

  .principle p {
  	font-size: 14px;
  	line-height: 2.05;
  	color: #5C4E3C;
  	text-align: left;
  }

  /* ===== REASONS ===== */
  .reasons {
  	max-width: 560px;
  	margin: 0 auto;
  	padding: 8px 24px 60px;
  }

  .reason-row {
  	padding: 28px 0;
  	border-bottom: 1px solid var(--line);
  }

  .reason-row:first-of-type {
  	border-top: 1px solid var(--line);
  }

  .reason-no {
  	font-family: 'Shippori Mincho', serif;
  	font-size: 13px;
  	color: var(--gold-deep);
  	margin-bottom: 8px;
  }

  .reason-row h3 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: 16.5px;
  	line-height: 1.6;
  	margin-bottom: 10px;
  }

  .reason-row p {
  	font-size: 13px;
  	line-height: 1.95;
  	color: #5C4E3C;
  }

  /* ===== STORY CARDS ===== */
  .stories {
  	background: var(--cream-deep);
  	padding: 56px 0 64px;
  }

  .stories-head {
  	text-align: center;
  	margin-bottom: 44px;
  	padding: 0 24px;
  }

  .stories-head .eyebrow {
  	font-size: 12px;
  	letter-spacing: 0.2em;
  	color: var(--gold-deep);
  	margin-bottom: 10px;
  }

  .stories-head h2 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: clamp(21px, 5.5vw, 26px);
  }

  .story {
  	display: flex;
  	flex-direction: column;
  	max-width: 520px;
  	margin: 0 auto 46px;
  	padding: 0 24px;
  }

  .story:last-child {
  	margin-bottom: 0;
  }

  .story-photo {
  	width: 100%;
  	aspect-ratio: 16/10;
  	background-color: var(--cream);
  	border: 1px solid var(--line);
  	margin-bottom: 18px;
  	position: relative;
  	overflow: hidden;
  }

  .story-photo img {
  	width: 100%;
  	height: 100%;
  	object-fit: contain;
  }

  .story-tag {
  	font-family: 'Shippori Mincho', serif;
  	font-size: 13px;
  	color: var(--gold-deep);
  	margin-bottom: 6px;
  }

  .story h3 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: 19px;
  	line-height: 1.6;
  	margin-bottom: 10px;
  }

  .story p {
  	font-size: 13.5px;
  	line-height: 1.95;
  	color: #5C4E3C;
  }

  /* ===== GALLERY ===== */
  .gallery {
  	max-width: 560px;
  	margin: 0 auto;
  	padding: 64px 24px 8px;
  }

  .section-head {
  	text-align: center;
  	margin-bottom: 36px;
  }

  .section-head .eyebrow {
  	font-size: 12px;
  	letter-spacing: 0.2em;
  	color: var(--gold-deep);
  	margin-bottom: 10px;
  }

  .section-head h2 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: clamp(21px, 5.5vw, 26px);
  }

  .gallery-grid {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: 16px;
  	margin-bottom: 56px;
  }

  .gallery-item {
  	display: flex;
  	flex-direction: column;
  }

  .gallery-thumb {
  	aspect-ratio: 4/3;
  	background: linear-gradient(150deg, var(--cream-deep), #E3D8BE);
  	border: 1px solid var(--line);
  	margin-bottom: 10px;
  	display: flex;
  	align-items: flex-end;
  	justify-content: flex-start;
  }

  .gallery-grid .gallery-item:nth-child(1) .gallery-thumb {
  	background-image: url("image/thumb-coco-room.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(2) .gallery-thumb {
  	background-image: url("image/thumb-prima.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(3) .gallery-thumb {
  	background-image: url("image/thumb-homewine.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(4) .gallery-thumb {
  	background-image: url("image/thumb-cocopri.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(5) .gallery-thumb {
  	background-image: url("image/thumb-ocean.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(6) .gallery-thumb {
  	background-image: url("image/thumb-npmobile.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(7) .gallery-thumb {
  	background-image: url("image/thumb-suit.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(8) .gallery-thumb {
  	background-image: url("image/thumb-tsc.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-grid .gallery-item:nth-child(9) .gallery-thumb {
  	background-image: url("image/thumb-younet.webp");
  	background-size: cover;
  	background-position: center;
  }

  .gallery-item h3 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: 14.5px;
  	margin-bottom: 4px;
  }

  /* ===== SERVICES ===== */
  .services {
  	background: var(--cream-deep);
  	padding: 64px 0 60px;
  }

  .services-inner {
  	max-width: 520px;
  	margin: 0 auto;
  	padding: 0 24px;
  }

  .service-row {
  	display: flex;
  	align-items: baseline;
  	gap: 16px;
  	padding: 20px 0;
  	border-bottom: 1px solid var(--line);
  }

  .service-row:first-of-type {
  	border-top: 1px solid var(--line);
  }

  .service-no {
  	font-family: 'Shippori Mincho', serif;
  	font-size: 13px;
  	color: var(--gold-deep);
  	flex-shrink: 0;
  	width: 24px;
  }

  .service-body h3 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: 16px;
  	margin-bottom: 5px;
  }

  .service-body p {
  	font-size: 12.5px;
  	color: #5C4E3C;
  	line-height: 1.8;
  }

  /* ===== PROCESS ===== */
  .process {
  	max-width: 520px;
  	margin: 0 auto;
  	padding: 64px 24px 56px;
  }

  .process-list {
  	position: relative;
  	padding-left: 28px;
  }

  .process-list::before {
  	content: "";
  	position: absolute;
  	left: 9px;
  	top: 6px;
  	bottom: 6px;
  	width: 1px;
  	background: var(--line);
  }

  .process-step {
  	position: relative;
  	padding-bottom: 34px;
  }

  .process-step:last-child {
  	padding-bottom: 0;
  }

  .process-step::before {
  	content: "";
  	position: absolute;
  	left: -23.5px;
  	top: 4px;
  	width: 9px;
  	height: 9px;
  	border-radius: 50%;
  	background: var(--gold-deep);
  }

  .process-step .no {
  	font-family: 'Shippori Mincho', serif;
  	font-size: 12px;
  	color: var(--gold-deep);
  	margin-bottom: 4px;
  }

  .process-step h3 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: 16px;
  	margin-bottom: 6px;
  }

  .process-step p {
  	font-size: 12.5px;
  	color: #5C4E3C;
  	line-height: 1.8;
  }

  /* ===== PROFILE ===== */
  .profile {
  	background: var(--cream-deep);
  	padding: 64px 0 60px;
  }

  .profile-inner {
  	max-width: 480px;
  	margin: 0 auto;
  	padding: 0 24px;
  	text-align: center;
  }

  .profile-photo {
  	width: 88px;
  	height: 88px;
  	border-radius: 50%;
  	margin: 0 auto 20px;
	background-image: url("image/icon.webp");
	background-size: cover;
  	background-position: center 15%;
  	border: 1px solid var(--line);
  }

  .profile h3 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: 19px;
  	margin-bottom: 4px;
  }

  .profile .role {
  	font-size: 12px;
  	color: var(--gold-deep);
  	margin-bottom: 20px;
  	letter-spacing: 0.04em;
  }

  .profile p {
  	font-size: 13.5px;
  	line-height: 2;
  	color: #5C4E3C;
  	text-align: left;
  }

  /* ===== FAQ ===== */
  .faq {
  	max-width: 520px;
  	margin: 0 auto;
  	padding: 64px 24px 56px;
  }

  .faq-item {
  	border-bottom: 1px solid var(--line);
  	padding: 20px 0;
  }

  .faq-item:first-of-type {
  	border-top: 1px solid var(--line);
  }

  .faq-q {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: 15px;
  	margin-bottom: 8px;
  	display: flex;
  	gap: 10px;
  }

  .faq-q .mark {
  	color: var(--gold-deep);
  	flex-shrink: 0;
  }

  .faq-a {
  	font-size: 13px;
  	color: #5C4E3C;
  	line-height: 1.85;
  	padding-left: 24px;
  }

  /* ===== CLOSING CTA ===== */
  .closing {
  	max-width: 520px;
  	margin: 0 auto;
  	padding: 60px 24px 64px;
  	text-align: center;
  }

  .closing h2 {
  	font-family: 'Shippori Mincho', serif;
  	font-weight: 600;
  	font-size: clamp(21px, 5.8vw, 26px);
  	line-height: 1.75;
  	margin-bottom: 16px;
  }

  .closing p {
  	font-size: 13.5px;
  	color: #5C4E3C;
  	line-height: 1.9;
  	margin-bottom: 28px;
  }

  .cta-btn {
  	display: inline-flex;
  	align-items: center;
  	gap: 8px;
  	padding: 16px 40px;
  	font-size: 14.5px;
  	font-weight: 700;
  	background: var(--gold-deep);
  	color: var(--cream);
  	text-decoration: none;
  	border: none;
  	border-radius: 0;
  	cursor: pointer;
  }

  .contact-form {
  	text-align: left;
  	margin-top: 8px;
  }

  .form-row {
  	margin-bottom: 22px;
  }

  .form-row label {
  	display: block;
  	font-family: 'Shippori Mincho', serif;
  	font-size: 13.5px;
  	color: var(--ink);
  	margin-bottom: 8px;
  }

  .form-row .tag {
  	display: inline-block;
  	font-family: 'Noto Sans JP', sans-serif;
  	font-size: 10px;
  	letter-spacing: 0.05em;
  	margin-left: 8px;
  	padding: 2px 6px;
  	border: 1px solid var(--line);
  	color: var(--gold-deep);
  	vertical-align: middle;
  }

  .form-row .tag-optional {
  	color: #5C4E3C;
  }

  .form-row input,
  .form-row textarea {
  	width: 100%;
  	border: none;
  	border-bottom: 1px solid var(--line);
  	border-radius: 0;
  	background: transparent;
  	font-family: 'Noto Sans JP', sans-serif;
  	font-size: 14px;
  	color: var(--ink);
  	padding: 10px 2px;
  }

  .form-row textarea {
  	resize: vertical;
  	min-height: 120px;
  	line-height: 1.85;
  }

  .form-row input:focus,
  .form-row textarea:focus {
  	outline: none;
  	border-bottom-color: var(--gold-deep);
  }

  .form-row input::placeholder,
  .form-row textarea::placeholder {
  	color: #A99A82;
  }

  .form-error {
  	font-size: 12px;
  	color: #B23B3B;
  	margin-top: 6px;
  	min-height: 1em;
  }

  .contact-form .cta-btn {
  	width: 100%;
  	justify-content: center;
  	margin-top: 8px;
  }

  .contact-form .cta-btn:disabled {
  	opacity: 0.6;
  	cursor: default;
  }

  .form-success {
  	font-size: 13px;
  	color: var(--gold-deep);
  	text-align: center;
  	margin-top: 16px;
  }

  /* ===== RESPONSIVE (PC) ===== */
  @media (min-width:900px) {

  	/* Hero: split text / photo */
  	.hero {
  		height: 640px;
  		max-height: 640px;
  	}

  	.hero .img {
  		inset: auto;
  		top: 0;
  		right: 0;
  		bottom: 0;
  		left: 50%;
  	}

  	.hero .img::before {
  		background-position: center 15%;
  	}

  	.vtext {
  		top: 40px;
  		left: auto;
  		right: calc(50% + 44px);
  		color: var(--ink);
  		opacity: 0.55;
  	}

  	.vtext.right {
  		right: 40px;
  		color: var(--cream);
  		max-height: 500px;
  	}

  	.hero-copy {
  		left: 0;
  		right: auto;
  		bottom: auto;
  		top: 50%;
  		width: 50%;
  		transform: translateY(-50%);
  		padding: 0 64px;
  	}

  	.hero-copy h1 {
  		color: var(--ink);
  		text-align: left;
  		font-size: clamp(22px, 2.6vw, 27px);
  	}

  	.scrolldown {
  		left: 64px;
  		color: var(--ink);
  	}

  	.scrolldown .bar {
  		background: var(--ink);
  	}

  	/* Text sections: comfortable reading column, more breathing room */
  	.intro,
  	.principle {
  		max-width: 640px;
  		padding-top: 96px;
  		padding-bottom: 80px;
  	}

  	.intro p {
  		font-size: 16px;
  	}

  	/* Case studies: 3-column grid */
  	.stories {
  		padding: 88px 0;
  	}

  	.stories-grid {
  		display: grid;
  		grid-template-columns: repeat(2, 1fr);
  		gap: 40px;
  		max-width: 900px;
  		margin: 0 auto;
  		padding: 0 40px;
  	}

  	.story {
  		max-width: none;
  		margin: 0;
  		padding: 0;
  	}

  	/* Gallery: single row of 4 */
  	.gallery {
  		max-width: 1080px;
  		padding: 96px 40px 16px;
  	}

  	.gallery-grid {
  		grid-template-columns: repeat(4, 1fr);
  		gap: 24px;
  	}

  	/* Reasons: two-column grid */
  	.reasons {
  		max-width: 900px;
  		padding: 16px 40px 88px;
  	}

  	.reason-row:nth-of-type(2) {
  		border-top: 1px solid var(--line);
  	}

  	.reasons-grid {
  		display: grid;
  		grid-template-columns: 1fr 1fr;
  		column-gap: 56px;
  	}

  	/* Services: two-column grid */
  	.services {
  		padding: 96px 0 88px;
  	}

  	.services-inner {
  		max-width: 840px;
  	}

  	.services-inner .service-row {}

  	.services-inner {
  		display: grid;
  		grid-template-columns: 1fr 1fr;
  		column-gap: 56px;
  	}

  	.services-inner .section-head {
  		grid-column: 1 / -1;
  	}

  	/* Process: horizontal timeline */
  	.process {
  		max-width: 1080px;
  		padding: 96px 40px 88px;
  	}

  	.process-list {
  		display: flex;
  		padding-left: 0;
  		gap: 28px;
  	}

  	.process-list::before {
  		left: 0;
  		right: 0;
  		top: 9px;
  		bottom: auto;
  		height: 1px;
  		width: auto;
  	}

  	.process-step {
  		flex: 1;
  		padding-bottom: 0;
  		padding-top: 28px;
  	}

  	.process-step::before {
  		left: calc(50% - 4.5px);
  		top: 4.5px;
  	}

  	.process-step .no,
  	.process-step h3,
  	.process-step p {
  		text-align: center;
  	}

  	/* Profile: photo left, text right */
  	.profile {
  		padding: 96px 0 88px;
  	}

  	.profile-inner {
  		max-width: 680px;
  		text-align: left;
  		display: flex;
  		align-items: center;
  		gap: 40px;
  	}

  	.profile-photo {
  		margin: 0;
  		flex-shrink: 0;
  		width: 120px;
  		height: 120px;
  	}

  	/* FAQ: two-column grid */
  	.faq {
  		max-width: 900px;
  		padding: 96px 40px 88px;
  	}

	.faq-item:nth-of-type(2) {
  	border-top: 1px solid var(--line);
  }	

  	.faq-grid {
  		display: grid;
  		grid-template-columns: 1fr 1fr;
  		column-gap: 56px;
  	}

  	.closing {
  		max-width: 640px;
  		padding-top: 88px;
  		padding-bottom: 96px;
  	}

  	.contact-form .cta-btn {
  		width: auto;
  		display: flex;
  		margin-left: auto;
  		margin-right: auto;
  	}
  }