@charset "UTF-8";
/* ==========================================================================
   Yui Kurashi Salon - Theme (Project layer)
   セクション固有の見た目と、レスポンシブの定義をまとめています。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero  (全幅背景画像 + 文言の重ね置き)
   -------------------------------------------------------------------------- */
.p-hero {
	position: relative;
	background-color: #fbf5f1;
	background-image: var(--hero-image);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	min-height: clamp(460px, 42vw, 660px);
	display: flex;
	align-items: center;
	padding-block: clamp(48px, 5vw, 80px) clamp(96px, 10vw, 150px);
	overflow: hidden;
}

/* 文言側だけを明るく起こし、写真の上でも読めるようにします */
.p-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(253, 250, 248, 0.94) 0%,
		rgba(253, 250, 248, 0.86) 26%,
		rgba(253, 250, 248, 0.42) 46%,
		rgba(253, 250, 248, 0) 62%);
	pointer-events: none;
}

.p-hero__inner {
	position: relative;
	z-index: 1;
	width: min(100% - 40px, var(--yks-container));
}

.p-hero__body { max-width: 620px; }

.p-hero__catch {
	font-size: var(--yks-fs-sm);
	color: var(--yks-primary-deep);
	letter-spacing: 0.14em;
	margin-bottom: var(--yks-space-5);
}

.p-hero__title {
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.125rem);
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: var(--yks-heading);
}

.p-hero__lead {
	margin-top: var(--yks-space-5);
	color: var(--yks-text-sub);
	font-size: var(--yks-fs-base);
	line-height: var(--yks-lh-loose);
}

.p-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yks-space-4);
	margin-top: var(--yks-space-7);
}

/* --------------------------------------------------------------------------
   Stats  (ヒーロー下端に重ねる横一列のバー)
   -------------------------------------------------------------------------- */
.p-stats {
	position: relative;
	z-index: 3;
	margin-top: clamp(-110px, -8vw, -70px);
	padding-bottom: var(--yks-space-9);
	background: transparent;
}

.p-stats__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--yks-border-soft);
	border-radius: var(--yks-radius-lg);
	box-shadow: 0 14px 40px rgba(150, 118, 110, 0.12);
	overflow: hidden;
}

.p-stats__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--yks-space-4);
	padding: clamp(16px, 1.6vw, 26px) clamp(10px, 1.2vw, 20px);
	border-left: 1px solid var(--yks-border-soft);
}

.p-stats__item:first-child { border-left: 0; }

.p-stats__icon {
	width: auto;
	height: clamp(34px, 3.2vw, 50px);
	flex-shrink: 0;
}

.p-stats__figure { text-align: left; }

.p-stats__label {
	display: block;
	font-size: var(--yks-fs-xs);
	color: var(--yks-text-sub);
	letter-spacing: 0.1em;
	line-height: 1.6;
	margin-bottom: 2px;
}

.p-stats__value {
	display: flex;
	align-items: baseline;
	gap: 3px;
	font-family: var(--yks-font-serif);
	color: var(--yks-primary-deep);
}

.p-stats__value strong {
	font-size: clamp(1.125rem, 0.8rem + 1.2vw, 1.875rem);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.p-stats__value em { font-style: normal; font-size: var(--yks-fs-xs); }

/* --------------------------------------------------------------------------
   Trouble  (アイコン左 + 見出し右の横並びカード)
   -------------------------------------------------------------------------- */
.p-trouble { background: var(--yks-cream); }

.p-trouble__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--yks-space-4);
}

.p-trouble__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--yks-space-3);
	background: var(--yks-white);
	border: 1px solid var(--yks-border-soft);
	border-radius: var(--yks-radius-lg);
	padding: clamp(16px, 1.6vw, 24px) clamp(14px, 1.4vw, 22px) clamp(28px, 2.4vw, 36px);
	transition: transform var(--yks-dur) var(--yks-ease), box-shadow var(--yks-dur) var(--yks-ease);
}

.p-trouble__item:hover { transform: translateY(-4px); box-shadow: var(--yks-shadow); }

.p-trouble__icon {
	width: clamp(52px, 4.4vw, 68px);
	height: clamp(52px, 4.4vw, 68px);
	flex-shrink: 0;
	object-fit: contain;
}

.p-trouble__title {
	font-size: clamp(0.8125rem, 0.7rem + 0.32vw, 0.9375rem);
	line-height: 1.8;
	letter-spacing: 0.04em;
	font-family: var(--yks-font-sans);
	font-weight: 500;
	color: var(--yks-heading);
}

.p-trouble__mark {
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--yks-primary-soft);
}

.p-trouble__bridge {
	margin-top: var(--yks-space-7);
	text-align: center;
	font-family: var(--yks-font-serif);
	font-size: var(--yks-fs-md);
	color: var(--yks-heading);
	letter-spacing: 0.08em;
	line-height: 2;
}

/* --------------------------------------------------------------------------
   Service
   -------------------------------------------------------------------------- */
.p-service { background: var(--yks-bg); }

.p-service__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--yks-space-5);
}

.p-service__list--archive { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.p-about {
	background: linear-gradient(120deg, #f9f2ee 0%, #fbf6f2 55%, #f7eee9 100%);
	overflow: hidden;
}

.p-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	width: min(100% - 40px, 1320px);
	margin-inline: auto;
	padding-block: var(--yks-space-9);
}

.p-about__visual img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--yks-radius-lg);
	box-shadow: 0 20px 50px rgba(150, 118, 110, 0.16);
}

.p-about__title {
	font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.375rem);
	letter-spacing: 0.14em;
	line-height: 1.6;
}

.p-about__title span { color: var(--yks-primary-deep); }

.p-about__rule {
	display: flex;
	align-items: center;
	gap: var(--yks-space-4);
	margin: var(--yks-space-5) 0 var(--yks-space-6);
	color: var(--yks-primary);
}

.p-about__rule::before,
.p-about__rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--yks-border);
}

.p-about__text p + p { margin-top: var(--yks-space-5); }

.p-about__text {
	color: var(--yks-text-sub);
	line-height: var(--yks-lh-loose);
	font-size: var(--yks-fs-base);
}

.p-about__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yks-space-3);
	margin-top: var(--yks-space-6);
}

.p-about__tags li {
	padding: 8px 22px;
	border-radius: var(--yks-radius-pill);
	background: var(--yks-primary-soft);
	color: var(--yks-primary-deep);
	font-size: var(--yks-fs-sm);
	letter-spacing: 0.06em;
}

.p-about__action { margin-top: var(--yks-space-6); }

/* --------------------------------------------------------------------------
   Voice
   -------------------------------------------------------------------------- */
.p-voice { background: var(--yks-white); }

.p-voice__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--yks-space-5);
}

.p-voice__list--archive { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.p-voice__item {
	background: var(--yks-cream);
	border: 1px solid var(--yks-border-soft);
	border-radius: var(--yks-radius-lg);
	padding: var(--yks-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--yks-space-4);
	transition: transform var(--yks-dur) var(--yks-ease), box-shadow var(--yks-dur) var(--yks-ease);
}

.p-voice__item:hover { transform: translateY(-4px); box-shadow: var(--yks-shadow); }

.p-voice__head { display: flex; align-items: center; gap: var(--yks-space-4); }

.p-voice__avatar {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--yks-soft);
}

.p-voice__avatar img { width: 100%; height: 100%; object-fit: cover; }

.p-voice__profile {
	font-size: var(--yks-fs-xs);
	color: var(--yks-text-weak);
	letter-spacing: 0.08em;
	margin-bottom: 4px;
}

.p-voice__title {
	font-size: var(--yks-fs-md);
	color: var(--yks-primary-deep);
	line-height: 1.7;
	letter-spacing: 0.06em;
}

.p-voice__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.p-voice__text {
	font-size: var(--yks-fs-sm);
	color: var(--yks-text-sub);
	line-height: var(--yks-lh-loose);
	flex: 1;
}

.p-voice__term {
	align-self: flex-start;
	padding: 8px 22px;
	border: 1px solid var(--yks-primary-soft);
	border-radius: var(--yks-radius-pill);
	font-size: var(--yks-fs-xs);
	color: var(--yks-primary-deep);
	background: var(--yks-white);
}

.p-voice__disclaimer {
	margin-top: var(--yks-space-5);
	text-align: center;
	font-size: var(--yks-fs-xs);
	color: var(--yks-text-weak);
}

/* --------------------------------------------------------------------------
   Column
   -------------------------------------------------------------------------- */
.p-column { background: var(--yks-cream); }

.p-column__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--yks-space-5);
}

/* --------------------------------------------------------------------------
   Flow
   -------------------------------------------------------------------------- */
.p-flow { background: var(--yks-bg); }

.p-flow__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--yks-space-4);
	counter-reset: flow;
}

.p-flow__item { position: relative; display: flex; flex-direction: column; align-items: center; }

.p-flow__number {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--yks-primary-soft);
	background: var(--yks-white);
	color: var(--yks-primary-deep);
	font-family: var(--yks-font-serif);
	font-size: var(--yks-fs-lg);
	margin-bottom: var(--yks-space-4);
	position: relative;
	z-index: 1;
}

.p-flow__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 50%;
	width: 100%;
	border-top: 1px dashed var(--yks-primary-soft);
	z-index: 0;
}

.p-flow__card {
	background: var(--yks-white);
	border: 1px solid var(--yks-border-soft);
	border-radius: var(--yks-radius-lg);
	padding: var(--yks-space-5) var(--yks-space-4);
	text-align: center;
	width: 100%;
	height: 100%;
	transition: transform var(--yks-dur) var(--yks-ease), box-shadow var(--yks-dur) var(--yks-ease);
}

.p-flow__item:hover .p-flow__card { transform: translateY(-4px); box-shadow: var(--yks-shadow); }

.p-flow__icon { display: inline-flex; color: var(--yks-primary); margin-bottom: var(--yks-space-3); }

.p-flow__title { font-size: var(--yks-fs-md); letter-spacing: 0.1em; margin-bottom: var(--yks-space-3); }

.p-flow__body { font-size: var(--yks-fs-xs); color: var(--yks-text-sub); line-height: 2; }

/* --------------------------------------------------------------------------
   Lead magnet
   -------------------------------------------------------------------------- */
.p-lead {
	background: linear-gradient(120deg, #f7e9e6 0%, #fbf2ef 40%, #f6e6e4 100%);
	padding-block: var(--yks-space-9);
}

.p-lead__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.62fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
}

.p-lead__badge {
	display: inline-grid;
	place-items: center;
	width: 108px;
	height: 108px;
	border-radius: 50%;
	background: var(--yks-primary);
	color: #fff;
	font-size: var(--yks-fs-xs);
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-align: center;
	margin-bottom: var(--yks-space-5);
}

.p-lead__badge em { display: block; font-style: normal; font-family: var(--yks-font-serif); font-size: 1.5rem; }

.p-lead__eyebrow { font-size: var(--yks-fs-sm); color: var(--yks-text-sub); letter-spacing: 0.1em; margin-bottom: var(--yks-space-3); }

.p-lead__title {
	font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.p-lead__text { margin-top: var(--yks-space-4); font-size: var(--yks-fs-sm); color: var(--yks-text-sub); line-height: var(--yks-lh-loose); }

.p-lead__tags { display: flex; flex-wrap: wrap; gap: var(--yks-space-3); margin-top: var(--yks-space-5); }

.p-lead__tags li {
	padding: 6px 20px;
	border: 1px solid var(--yks-primary);
	border-radius: var(--yks-radius-pill);
	font-size: var(--yks-fs-xs);
	color: var(--yks-primary-deep);
	background: rgba(255, 255, 255, 0.6);
}

.p-lead__cover img {
	width: 100%;
	aspect-ratio: 62 / 86;
	object-fit: cover;
	border-radius: var(--yks-radius-sm);
	box-shadow: 0 24px 48px rgba(150, 118, 110, 0.22);
	transform: rotate(-3deg);
}

.p-lead__form { background: transparent; }

.p-lead__form-title {
	font-size: var(--yks-fs-md);
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: var(--yks-space-2);
}

.p-lead__form-note { font-size: var(--yks-fs-xs); color: var(--yks-text-sub); text-align: center; margin-bottom: var(--yks-space-4); line-height: 1.9; }

.p-lead__privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--yks-space-2);
	margin-top: var(--yks-space-4);
	font-size: 0.6875rem;
	color: var(--yks-text-sub);
	line-height: 1.8;
}

.p-lead__privacy-icon { color: var(--yks-primary); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.p-faq { background: var(--yks-white); position: relative; }

.p-faq__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yks-space-3) var(--yks-space-4);
	align-items: start;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.p-contact {
	background: linear-gradient(120deg, #f8efeb 0%, #fbf5f2 50%, #f7ebe8 100%);
	padding-block: var(--yks-space-9);
	position: relative;
	overflow: hidden;
}

.p-contact::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(130px, 14vw, 250px);
	height: clamp(220px, 24vw, 430px);
	background-image: url("../images/deco-vase-contact.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	pointer-events: none;
	z-index: 0;
}

.p-contact__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.p-contact__title {
	font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
	letter-spacing: 0.12em;
	line-height: 1.6;
	margin-bottom: var(--yks-space-5);
}

.p-contact__text { font-size: var(--yks-fs-sm); color: var(--yks-text-sub); line-height: var(--yks-lh-loose); }

.p-contact__info { margin-top: var(--yks-space-6); display: grid; gap: var(--yks-space-5); }

.p-contact__info li { display: flex; gap: var(--yks-space-4); align-items: flex-start; }

.p-contact__icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--yks-primary);
	color: #fff;
}

.p-contact__detail { display: block; }

.p-contact__label { display: block; font-size: var(--yks-fs-xs); color: var(--yks-text-weak); margin-bottom: 2px; }

.p-contact__tel {
	font-family: var(--yks-font-serif);
	font-size: 1.5rem;
	color: var(--yks-heading);
	letter-spacing: 0.08em;
	line-height: 1.4;
	display: inline-block;
}

.p-contact__note { display: block; font-size: var(--yks-fs-xs); color: var(--yks-text-sub); line-height: 1.9; }

.p-contact__sns { font-size: var(--yks-fs-md); color: var(--yks-heading); }
.p-contact__sns:hover { color: var(--yks-primary-deep); }

.p-contact__form {
	background: var(--yks-white);
	border: 1px solid var(--yks-border-soft);
	border-radius: var(--yks-radius-lg);
	padding: clamp(24px, 3vw, 48px);
	box-shadow: var(--yks-shadow-sm);
}

/* --------------------------------------------------------------------------
   Page head / 下層共通
   -------------------------------------------------------------------------- */
.p-page-head {
	background: linear-gradient(120deg, #f9f2ee 0%, #fbf6f2 60%, #f7ece8 100%);
	padding-block: clamp(40px, 5vw, 76px);
	text-align: center;
	position: relative;
}

.p-page-head--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--head-image);
	background-size: cover;
	background-position: center;
	opacity: 0.18;
}

.p-page-head > * { position: relative; }

.p-page-head__en {
	display: block;
	font-family: var(--yks-font-script);
	font-size: 1.5rem;
	color: var(--yks-primary);
	margin-bottom: var(--yks-space-2);
}

.p-page-head__title {
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem);
	letter-spacing: 0.16em;
}

.p-page-head__lead {
	margin-top: var(--yks-space-4);
	font-size: var(--yks-fs-sm);
	color: var(--yks-text-sub);
	line-height: var(--yks-lh-loose);
	max-width: 720px;
	margin-inline: auto;
}

.p-page-lead {
	background: var(--yks-cream);
	border-radius: var(--yks-radius);
	padding: var(--yks-space-5) var(--yks-space-6);
	margin-bottom: var(--yks-space-7);
	font-size: var(--yks-fs-base);
	line-height: var(--yks-lh-loose);
	color: var(--yks-text-sub);
}

.p-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--yks-space-5);
	margin-top: var(--yks-space-5);
}

.p-feature-grid__item {
	background: var(--yks-white);
	border: 1px solid var(--yks-border-soft);
	border-radius: var(--yks-radius);
	padding: var(--yks-space-5);
}

.p-feature-grid__item h3 {
	margin: 0 0 var(--yks-space-3);
	padding: 0 0 var(--yks-space-2);
	border-left: 0;
	border-bottom: 1px solid var(--yks-primary-soft);
	font-size: var(--yks-fs-md);
}

.p-feature-grid__item p { font-size: var(--yks-fs-sm); color: var(--yks-text-sub); line-height: var(--yks-lh-loose); }

.p-flow-list { counter-reset: step; list-style: none !important; padding-left: 0 !important; }

.p-flow-list > li {
	position: relative;
	padding: var(--yks-space-4) var(--yks-space-5) var(--yks-space-4) 64px;
	background: var(--yks-cream);
	border-radius: var(--yks-radius);
	font-size: var(--yks-fs-sm);
	line-height: var(--yks-lh-loose);
}

.p-flow-list > li + li { margin-top: var(--yks-space-3); }

.p-flow-list > li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: var(--yks-space-5);
	top: var(--yks-space-4);
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--yks-primary);
	color: #fff;
	font-family: var(--yks-font-serif);
	font-size: var(--yks-fs-sm);
}

.p-cta-block {
	margin-top: var(--yks-space-8);
	padding: var(--yks-space-7) var(--yks-space-6);
	background: linear-gradient(120deg, #f8efeb 0%, #fbf5f2 100%);
	border-radius: var(--yks-radius-lg);
	text-align: center;
}

.p-cta-block__lead {
	font-family: var(--yks-font-serif);
	font-size: var(--yks-fs-lg);
	color: var(--yks-heading);
	letter-spacing: 0.1em;
	margin-bottom: var(--yks-space-3);
}

.p-cta-block__button { margin-top: var(--yks-space-5); }
.p-cta-block__button a { text-decoration: none; }

.p-table th { width: 30%; }
.p-table--legal th { width: 34%; }

.p-legal-date { margin-top: var(--yks-space-7); font-size: var(--yks-fs-xs); color: var(--yks-text-weak); text-align: right; }

.p-thanks { text-align: center; }
.p-thanks__lead { font-family: var(--yks-font-serif); font-size: var(--yks-fs-xl); color: var(--yks-heading); margin-bottom: var(--yks-space-5); }
.p-thanks ul { text-align: left; display: inline-block; }
.p-thanks__button { margin-top: var(--yks-space-7); }

/* --------------------------------------------------------------------------
   Single / Service / Voice
   -------------------------------------------------------------------------- */
.p-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--yks-space-3);
	font-size: var(--yks-fs-xs);
	color: var(--yks-text-weak);
	margin-bottom: var(--yks-space-5);
}

.p-single__thumb { margin-bottom: var(--yks-space-7); border-radius: var(--yks-radius-lg); overflow: hidden; }
.p-single__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.p-single__foot {
	margin-top: var(--yks-space-7);
	padding-top: var(--yks-space-5);
	border-top: 1px solid var(--yks-border);
}

.p-single__author { display: flex; align-items: center; gap: var(--yks-space-2); font-size: var(--yks-fs-sm); color: var(--yks-text-sub); }

.p-service-single__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--yks-space-4);
	padding: var(--yks-space-4) var(--yks-space-5);
	background: var(--yks-cream);
	border-radius: var(--yks-radius);
	margin-bottom: var(--yks-space-7);
}

.p-service-single__price-label {
	padding: 4px 16px;
	background: var(--yks-primary);
	color: #fff;
	border-radius: var(--yks-radius-pill);
	font-size: var(--yks-fs-xs);
}

.p-service-single__price-value { font-family: var(--yks-font-serif); font-size: var(--yks-fs-lg); color: var(--yks-heading); }

.p-service-single__nav { margin-top: var(--yks-space-8); }

.p-service-single__nav-title {
	font-size: var(--yks-fs-md);
	letter-spacing: 0.12em;
	margin-bottom: var(--yks-space-4);
	padding-left: var(--yks-space-3);
	border-left: 3px solid var(--yks-primary);
}

.p-service-single__nav-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--yks-space-3); }

.p-service-single__nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yks-space-3);
	padding: 14px 20px;
	border: 1px solid var(--yks-border);
	border-radius: var(--yks-radius-sm);
	background: var(--yks-white);
	font-size: var(--yks-fs-sm);
	color: var(--yks-text);
	transition: all var(--yks-dur) var(--yks-ease);
}

.p-service-single__nav-list a:hover { border-color: var(--yks-primary); color: var(--yks-primary-deep); }
.p-service-single__nav-list svg { color: var(--yks-primary); }

.p-voice-single__head {
	display: flex;
	align-items: center;
	gap: var(--yks-space-5);
	padding-bottom: var(--yks-space-5);
	border-bottom: 1px solid var(--yks-border);
	margin-bottom: var(--yks-space-6);
}

.p-voice-single__avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--yks-soft); }
.p-voice-single__avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-voice-single__profile { font-size: var(--yks-fs-sm); color: var(--yks-text-sub); }
.p-voice-single__term { margin-top: var(--yks-space-2); font-size: var(--yks-fs-xs); color: var(--yks-primary-deep); }
.p-voice-single__disclaimer { margin-top: var(--yks-space-7); font-size: var(--yks-fs-xs); color: var(--yks-text-weak); }
.p-voice-single__back { margin-top: var(--yks-space-6); text-align: center; }

/* --------------------------------------------------------------------------
   CTA / Sitemap / 404
   -------------------------------------------------------------------------- */
.p-cta {
	background: linear-gradient(120deg, #f8efeb 0%, #fbf5f2 55%, #f7ece8 100%);
	padding-block: var(--yks-space-9);
	text-align: center;
}

.p-cta__title {
	font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
	letter-spacing: 0.14em;
	margin-bottom: var(--yks-space-4);
}

.p-cta__text { font-size: var(--yks-fs-sm); color: var(--yks-text-sub); line-height: var(--yks-lh-loose); }
.p-cta__action { margin-top: var(--yks-space-6); }

.c-sitemap { display: grid; gap: var(--yks-space-7); }

.c-sitemap__title {
	font-size: var(--yks-fs-lg);
	letter-spacing: 0.12em;
	margin-bottom: var(--yks-space-4);
	padding-bottom: var(--yks-space-2);
	border-bottom: 1px solid var(--yks-border);
}

.c-sitemap__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--yks-space-2) var(--yks-space-5); }

.c-sitemap__list li { position: relative; padding-left: 18px; font-size: var(--yks-fs-sm); }

.c-sitemap__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.85em;
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--yks-primary);
	border-right: 1px solid var(--yks-primary);
	transform: rotate(45deg);
}

.c-sitemap__list a:hover { color: var(--yks-primary-deep); text-decoration: underline; text-underline-offset: 3px; }
.c-sitemap__list ul { display: contents; }

.p-404 { padding-block: var(--yks-space-10); text-align: center; }

.p-404__code {
	font-family: var(--yks-font-serif);
	font-size: clamp(4rem, 3rem + 6vw, 8rem);
	color: var(--yks-primary-soft);
	line-height: 1;
}

.p-404__title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); letter-spacing: 0.12em; margin-top: var(--yks-space-4); }
.p-404__text { margin-top: var(--yks-space-5); color: var(--yks-text-sub); font-size: var(--yks-fs-sm); line-height: var(--yks-lh-loose); }
.p-404__search { max-width: 420px; margin: var(--yks-space-6) auto; }
.p-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--yks-space-3) var(--yks-space-5); font-size: var(--yks-fs-sm); }
.p-404__links a { color: var(--yks-primary-deep); text-decoration: underline; text-underline-offset: 3px; }

.c-search-head { margin-bottom: var(--yks-space-6); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ---- 1180px 以下 ---- */
@media (max-width: 1180px) {
	.p-lead__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.p-lead__cover { order: 3; max-width: 260px; }
	.p-lead__form { order: 2; }
	.l-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--yks-space-6); }
}

/* ---- 1024px 以下 : ナビをドロワーへ ---- */
@media (max-width: 1024px) {
	:root { --yks-header-h: 72px; }

	.l-header__cta { display: none; }
	.c-hamburger { display: block; margin-left: auto; }

	.l-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		width: min(88vw, 380px);
		height: 100dvh;
		background: var(--yks-bg);
		box-shadow: -8px 0 40px rgba(120, 96, 88, 0.16);
		padding: calc(var(--yks-header-h) + 24px) var(--yks-space-6) var(--yks-space-8);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--yks-dur) var(--yks-ease);
		z-index: 95;
		margin-left: 0;
	}

	.l-header__nav.is-open { transform: translateX(0); }

	.c-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

	.c-nav__item { border-bottom: 1px solid var(--yks-border-soft); position: relative; }

	.c-nav__link { padding: 16px 4px; font-size: var(--yks-fs-base); }
	.c-nav__link::after { display: none; }

	.c-nav__toggle {
		display: grid;
		place-items: center;
		position: absolute;
		right: 0;
		top: 8px;
		width: 40px;
		height: 40px;
		color: var(--yks-primary);
		transition: transform var(--yks-dur) var(--yks-ease);
	}

	.c-nav__toggle[aria-expanded="true"] { transform: rotate(180deg); }

	.c-nav__sub {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		background: var(--yks-cream);
		border-radius: var(--yks-radius-sm);
		padding: var(--yks-space-2);
		margin-bottom: var(--yks-space-3);
		display: none;
		min-width: 0;
	}

	.c-nav__item.is-open > .c-nav__sub { display: block; }

	.c-nav__foot { display: block; margin-top: var(--yks-space-6); }

	.p-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-stats__item:nth-child(3) { border-left: 0; }
	.p-stats__item:nth-child(n+3) { border-top: 1px solid var(--yks-border-soft); }
	.p-trouble__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-service__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-column__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-voice__list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
	.p-flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--yks-space-6); }
	.p-flow__item:not(:last-child)::before { display: none; }

	.p-about__inner { grid-template-columns: minmax(0, 1fr); }
	.p-about__visual { max-width: 420px; margin-inline: auto; }

	.p-contact__inner { grid-template-columns: minmax(0, 1fr); }

	.l-with-side { grid-template-columns: minmax(0, 1fr); gap: var(--yks-space-8); }
}

/* ---- 768px 以下 ---- */
@media (max-width: 768px) {
	:root {
		--yks-space-9: 64px;
		--yks-space-10: 88px;
	}

	.l-container,
	.l-container--narrow { width: min(100% - 32px, var(--yks-container)); }

	.l-header__inner { width: min(100% - 32px, 1440px); }

	.c-brand__ja { font-size: 1.125rem; }
	.c-brand__en { font-size: 0.6875rem; }

	.p-hero__actions .c-button { flex: 1 1 100%; }


	.p-flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.p-lead__inner { grid-template-columns: minmax(0, 1fr); }
	.p-lead__cover { max-width: 220px; margin-inline: auto; order: 2; }
	.p-lead__form { order: 3; }
	.p-lead__badge { width: 88px; height: 88px; }

	.p-faq__grid { grid-template-columns: minmax(0, 1fr); }

	.c-form__row { grid-template-columns: minmax(0, 1fr); gap: var(--yks-space-2); }
	.c-form__label { padding-top: 0; }
	.c-form__submit .c-button { width: 100%; min-width: 0; }

	.c-postnav { grid-template-columns: minmax(0, 1fr); }

	.l-footer__grid { grid-template-columns: minmax(0, 1fr); }

	.c-pagetop { right: 12px; bottom: 12px; padding: 10px 14px 10px 10px; }
	.c-pagetop__label { display: none; }

	.c-entry table { display: block; overflow-x: auto; white-space: nowrap; }
	.c-entry table th { white-space: nowrap; }

	.p-voice__head { gap: var(--yks-space-3); }
	.p-voice__avatar { width: 64px; height: 64px; }

	.p-contact__form { padding: var(--yks-space-5); }
}

/* ---- 480px 以下 ---- */
@media (max-width: 480px) {
	.p-flow__list { grid-template-columns: minmax(0, 1fr); }
	.c-instagram__grid { gap: 4px; }
	.p-hero__title { letter-spacing: 0.08em; }
}

/* ---- 印刷 ---- */
@media print {
	.l-header, .l-footer, .c-pagetop, .p-cta, .c-breadcrumb { display: none !important; }
	body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   追補 : 細部の調整
   -------------------------------------------------------------------------- */
.l-with-side__main,
.l-with-side__side { min-width: 0; }

.l-with-side__side { position: sticky; top: calc(var(--yks-header-h) + 24px); }

@media (max-width: 1024px) {
	.l-with-side__side { position: static; }
}

.p-faq__deco {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(110px, 11vw, 200px);
	height: clamp(200px, 22vw, 380px);
	pointer-events: none;
	background-image: url("../images/deco-flower-top.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

@media (max-width: 1024px) {
	.p-faq__deco { display: none; }
}

.c-pagelinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--yks-space-2);
	margin-top: var(--yks-space-7);
	font-size: var(--yks-fs-sm);
}

.c-pagelinks a,
.c-pagelinks > span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--yks-border);
	border-radius: var(--yks-radius-pill);
	background: var(--yks-white);
	color: var(--yks-text-sub);
}

.c-pagelinks a:hover { background: var(--yks-primary); border-color: var(--yks-primary); color: #fff; }

/* Contact Form 7 の余白調整 */
.p-lead__form .wpcf7 form .wpcf7-response-output { text-align: left; background: rgba(255, 255, 255, 0.7); }
.p-lead__form .c-form--inline .c-form__note { font-size: 0.6875rem; }
.p-lead__form .c-form--inline .c-form__note a { color: var(--yks-primary-deep); text-decoration: underline; text-underline-offset: 3px; }

/* 本文中のボタンリンクは、下線を消して押せる見た目に統一します */
.c-entry .c-button { text-decoration: none; color: #fff; }
.c-entry .c-button--outline,
.c-entry .c-button--ghost { color: var(--yks-heading); }
.c-entry .c-button--ghost { color: var(--yks-primary-deep); }
.c-entry .c-button--outline:hover { color: var(--yks-primary-deep); }
.c-entry .c-button--ghost:hover { color: #fff; }

@media (max-width: 768px) {
	.c-entry .c-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   デザイン画像から書き出した装飾素材の配置
   -------------------------------------------------------------------------- */
.l-footer__main { position: relative; overflow: hidden; }

.l-footer__main::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(120px, 12vw, 230px);
	height: clamp(260px, 30vw, 580px);
	background-image: url("../images/deco-vase-footer.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	pointer-events: none;
	z-index: 0;
}

.l-footer__main > .l-container { position: relative; z-index: 1; }

@media (min-width: 1181px) {
	.l-footer__grid { padding-left: clamp(0px, 5vw, 100px); }
	.p-contact__inner { padding-left: clamp(0px, 4vw, 80px); }
	.p-faq .l-container { position: relative; z-index: 2; }
	.p-hero__inner { position: relative; z-index: 1; }
}

@media (max-width: 1180px) {
	.p-contact::before,
	.l-footer__main::before,
	.p-hero__deco--left { display: none; }
}

@media (max-width: 1024px) {
	.p-faq__deco { display: none; }
}

@media (max-width: 768px) {
}

/* 既定画像とアイキャッチの共通の見え方 */
.yks-default-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* --------------------------------------------------------------------------
   ヒーローと実績バーのレスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.p-hero { min-height: clamp(420px, 56vw, 560px); background-position: 76% center; }
	.p-hero::before {
		background: linear-gradient(90deg,
			rgba(253, 250, 248, 0.96) 0%,
			rgba(253, 250, 248, 0.9) 40%,
			rgba(253, 250, 248, 0.55) 62%,
			rgba(253, 250, 248, 0.1) 82%);
	}
	.p-hero__body { max-width: 520px; }
}

@media (max-width: 768px) {
	.p-hero {
		background-image: var(--hero-image-sp);
		background-position: center top;
		min-height: 0;
		align-items: flex-start;
		padding-block: clamp(220px, 62vw, 320px) clamp(96px, 22vw, 130px);
	}
	.p-hero::before {
		background: linear-gradient(180deg,
			rgba(253, 250, 248, 0) 0%,
			rgba(253, 250, 248, 0.55) 26%,
			rgba(253, 250, 248, 0.95) 44%,
			rgba(253, 250, 248, 1) 60%);
	}
	.p-hero__body { max-width: none; }
	.p-hero__actions .c-button { flex: 1 1 100%; }

	.p-stats { margin-top: -70px; padding-bottom: var(--yks-space-8); }
	.p-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-stats__item { flex-direction: column; gap: var(--yks-space-2); text-align: center; padding: 16px 10px; }
	.p-stats__figure { text-align: center; }
	.p-stats__value { justify-content: center; }
	.p-stats__icon { height: 36px; }

	.p-trouble__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yks-space-3); }
	.p-trouble__item { flex-direction: column; text-align: center; gap: var(--yks-space-2); }
	.p-trouble__icon { width: 56px; height: 56px; }

	.p-service__list,
	.p-column__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.p-trouble__list { grid-template-columns: minmax(0, 1fr); }
	.p-trouble__item { flex-direction: row; text-align: left; }
}

/* --------------------------------------------------------------------------
   ヘッダーのメニュー配置 (見本に合わせ、ロゴの直後に配置)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.l-header__nav {
		margin-left: clamp(20px, 2.6vw, 56px);
		margin-right: auto;
	}
	.c-nav__list { gap: clamp(14px, 1.7vw, 30px); }
	.c-nav__link { font-size: clamp(0.78rem, 0.68rem + 0.22vw, 0.875rem); }
}