@charset "UTF-8";
/* =========================================================
   Nail & Eyelash Grace — トップページ（template-grace.php）
   角丸なし / 影なし / グラデーションなし
   ブレイクポイント: 1000px / 720px / 390px
   ========================================================= */

:root {
	--g-paper: #f8f6f2;
	--g-white: #fbfaf7;
	--g-ink: #1e1a18;
	--g-brown: #493426;
	--g-brown2: #5a4030;
	--g-greige: #cfc5ba;
	--g-line: #ddd5cc;
	--g-bronze: #9b7b61;
	--g-bg-services: #ece7e0;
	--g-bg-recruit: #f2eee8;
	--g-bg-reviews: #e9e3db;
	--g-bg-why: #32271f;
	--g-bg-footer: #241c17;
	--g-line-service: #bfb3a7;
	--g-line-recruit: #bfb5aa;

	--g-jp: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--g-en: "Cormorant Garamond", "Bodoni 72", "Times New Roman", serif;

	--g-w: min(1180px, calc(100% - clamp(40px, 8vw, 80px)));
	--g-pad: clamp(88px, 11vw, 160px);
	--g-header: 84px;
	--g-ease: cubic-bezier(.25, .6, .3, 1);
}
@media (max-width: 1000px) { :root { --g-header: 70px; } }

/* ---------- Base / SWELLとの干渉リセット ---------- */
html:has(body.grace-lp) { scroll-padding-top: calc(var(--g-header) + 8px); }
@media (prefers-reduced-motion: no-preference) {
	html:has(body.grace-lp) { scroll-behavior: smooth; }
}
body.grace-lp {
	margin: 0;
	background: var(--g-paper);
	color: var(--g-ink);
	font-family: var(--g-jp);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .04em;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-wrap: anywhere;
}
/* :where() で詳細度0にし、下のコンポーネント指定を確実に優先させる */
:where(.grace-lp) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.grace-lp) :is(h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure, figcaption, address, blockquote) {
	margin: 0; padding: 0; border: 0; background: none;
	font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
}
:where(.grace-lp) :is(h1, h2, h3, h4)::before,
:where(.grace-lp) :is(h1, h2, h3, h4)::after { content: none; }
:where(.grace-lp) :is(ul, ol) { list-style: none; }
:where(.grace-lp) a { color: inherit; text-decoration: none; }
:where(.grace-lp) img { display: block; max-width: 100%; height: auto; }
:where(.grace-lp) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
:where(.grace-lp) [lang="en"] { font-family: var(--g-en); }
:where(.grace-lp) :focus-visible { outline: 1px solid var(--g-bronze); outline-offset: 3px; }
body.grace-lp ::selection { background: var(--g-brown); color: var(--g-white); }

.g-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-skip { position: fixed; z-index: 300; top: 8px; left: 8px; padding: 10px 16px; background: var(--g-ink); color: var(--g-white); font-size: 12px; transform: translateY(-160%); transition: transform .2s; }
.g-skip:focus { transform: none; }

.g-wrap { width: var(--g-w); margin-inline: auto; position: relative; }
.g-section { padding-block: var(--g-pad); }
.g-arrow { font-family: var(--g-en); font-size: 1.15em; line-height: 1; transition: transform .25s var(--g-ease); }

/* セクション見出し（英字＋日本語） */
.g-label { display: flex; flex-direction: column; gap: 6px; }
.g-label__en { font-family: var(--g-en); font-size: 16px; font-weight: 500; letter-spacing: .16em; line-height: 1.2; }
.g-label__ja { font-size: 10px; letter-spacing: .14em; color: var(--g-brown2); line-height: 1.4; }
.g-label--light .g-label__ja { color: rgba(251, 250, 247, .72); }

/* テキストリンク（Secondary CTA） */
.g-tlink {
	position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
	min-width: 220px; padding-bottom: 10px;
	font-size: 12px; letter-spacing: .12em; line-height: 1.4;
}
.g-tlink::before, .g-tlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; background: currentColor; }
.g-tlink::before { right: 0; opacity: .35; }
.g-tlink::after { width: 100%; transform: scaleX(.42); transform-origin: left; transition: transform .3s var(--g-ease); }
.g-tlink:hover::after, .g-tlink:focus-visible::after { transform: scaleX(1); }
.g-tlink:hover .g-arrow { transform: translate(2px, -2px); }
.g-tlink.is-disabled { opacity: .55; }
.g-tlink.is-disabled::after { transform: scaleX(1); }

/* 背景の大きな G（最大2箇所） */
.g-motif {
	position: absolute; z-index: 0; pointer-events: none; user-select: none;
	font-family: var(--g-en); font-weight: 400; line-height: .8; letter-spacing: 0;
}

/* 画像を枠いっぱいに（object-position は各画像の style で指定） */
.g-fill .g-img, .g-hero__photo .g-img, .g-concept__photo .g-img, .g-service__photo .g-img,
.g-shot .g-img, .g-why__bg .g-img, .g-reserve__bg .g-img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
}

/* =========================================================
   Header
   ========================================================= */
.g-header {
	position: fixed; z-index: 100; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px);
	height: var(--g-header);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding: 0 clamp(20px, 3vw, 42px);
	background: rgba(248, 246, 242, .86);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(73, 52, 38, .12);
}
.g-brand { justify-self: start; display: inline-flex; flex-direction: column; color: var(--g-ink); }
.g-brand__sub { font-family: var(--g-en); font-size: 11px; letter-spacing: .16em; line-height: 1; }
.g-brand__main { font-family: var(--g-en); font-size: 33px; font-weight: 500; letter-spacing: -.02em; line-height: .86; margin-top: 2px; }
.g-nav { display: flex; gap: clamp(22px, 2.4vw, 34px); }
.g-nav a { position: relative; font-family: var(--g-en); font-size: 13px; letter-spacing: .12em; line-height: 1; padding-block: 8px; }
.g-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--g-ease); }
.g-nav a:hover::after, .g-nav a:focus-visible::after { transform: scaleX(1); }
.g-header__reserve {
	justify-self: end; display: grid; place-items: center; width: 116px; height: 42px;
	background: var(--g-brown); color: var(--g-white); font-size: 12px; letter-spacing: .14em;
	transition: background-color .25s;
}
.g-header__reserve:hover { background: var(--g-ink); }
.g-menu-btn { display: none; }

/* Mobile menu */
.g-menu {
	position: fixed; z-index: 90; inset: 0; top: var(--wp-admin--admin-bar--height, 0px);
	padding: calc(var(--g-header) + 40px) 32px calc(110px + env(safe-area-inset-bottom));
	background: var(--g-paper); overflow-y: auto;
	display: flex; flex-direction: column; gap: 56px;
	opacity: 0; transition: opacity .25s;
}
.g-menu[hidden] { display: none; }
.g-menu.is-open { opacity: 1; }
.g-menu__nav { display: flex; flex-direction: column; gap: 18px; }
.g-menu__nav a { font-family: var(--g-en); font-size: 26px; letter-spacing: .1em; line-height: 1.2; }
.g-menu__ext { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.g-menu__ext a { position: relative; display: flex; flex-direction: column; gap: 4px; padding-right: 20px; font-size: 13px; }
.g-menu__ext small { font-family: var(--g-en); font-size: 11px; letter-spacing: .1em; color: var(--g-bronze); }
.g-menu__ext .g-arrow { position: absolute; top: 2px; right: 0; }

@media (max-width: 1000px) {
	.g-header { grid-template-columns: 1fr auto auto; gap: 18px; }
	.g-brand__main { font-size: 29px; }
	.g-nav { display: none; }
	.g-header__reserve { width: auto; height: auto; padding: 6px 0; background: none; color: var(--g-ink); font-size: 11px; border-bottom: 1px solid currentColor; }
	.g-header__reserve:hover { background: none; color: var(--g-brown); }
	.g-menu-btn { position: relative; display: block; width: 32px; height: 32px; margin-right: -4px; }
	.g-menu-btn__line { position: absolute; left: 4px; right: 4px; height: 1px; background: var(--g-ink); transition: transform .3s var(--g-ease), top .3s var(--g-ease); }
	.g-menu-btn__line:nth-child(1) { top: 12px; }
	.g-menu-btn__line:nth-child(2) { top: 19px; }
	.g-menu-btn[aria-expanded="true"] .g-menu-btn__line:nth-child(1) { top: 15.5px; transform: rotate(20deg); }
	.g-menu-btn[aria-expanded="true"] .g-menu-btn__line:nth-child(2) { top: 15.5px; transform: rotate(-20deg); }
}
@media (min-width: 1001px) { .g-menu { display: none !important; } }

/* =========================================================
   Hero
   ========================================================= */
.g-hero {
	position: relative; display: grid; grid-template-columns: 44% 56%;
	min-height: 100svh; padding-top: var(--g-header); background: var(--g-white);
}
.g-hero__photo { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; min-height: 520px; }
.g-hero__photo .g-img { object-position: 45% 56%; }
.g-hero__copy {
	grid-column: 1; grid-row: 1; align-self: center;
	padding: 60px clamp(32px, 5vw, 72px) calc(112px + 64px);
}
.g-hero__eyebrow { color: var(--g-bronze); font-family: var(--g-en); font-size: 11px; letter-spacing: .2em; line-height: 1.4; margin-bottom: 40px; }
.g-hero__title {
	font-family: var(--g-en); font-weight: 400;
	font-size: clamp(72px, 8.4vw, 142px); line-height: .66; letter-spacing: -.045em;
}
.g-hero__sub { display: block; font-size: max(17px, .17em); letter-spacing: .1em; line-height: 1; margin: 0 0 .9em .04em; }
.g-hero__catch { margin-top: 62px; font-size: clamp(19px, 1.75vw, 25px); letter-spacing: .12em; line-height: 1.6; }
.g-hero__lead { margin-top: 26px; color: var(--g-brown2); font-size: 14px; letter-spacing: .1em; line-height: 2.1; }

.g-hero__links { position: absolute; z-index: 2; left: 0; bottom: 0; width: 72%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-hero__link {
	position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px;
	min-height: 112px; padding: 20px 22px;
	background: var(--g-paper); color: var(--g-ink);
	border-top: 1px solid var(--g-line); border-left: 1px solid var(--g-line);
	transition: background-color .25s, color .25s;
}
.g-hero__link:last-child { border-right: 1px solid var(--g-line); }
.g-hero__link:hover { background: var(--g-brown); color: var(--g-white); }
.g-hero__link.is-primary { background: var(--g-brown); color: var(--g-white); border-color: var(--g-brown); }
.g-hero__link.is-primary:hover { background: var(--g-ink); }
.g-hero__no { font-family: var(--g-en); font-size: 11px; letter-spacing: .16em; line-height: 1.3; opacity: .72; }
.g-hero__name { font-size: 14px; letter-spacing: .06em; line-height: 1.4; }
.g-hero__link .g-arrow { position: absolute; top: 18px; right: 18px; }
.g-hero__link:hover .g-arrow { transform: translate(2px, -2px); }

.g-hero__scroll {
	position: absolute; right: 18px; bottom: 120px; z-index: 1;
	writing-mode: vertical-rl; color: var(--g-white);
	font-family: var(--g-en); font-size: 10px; letter-spacing: .2em; line-height: 1;
	padding-top: 56px;
}
.g-hero__scroll::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 44px; background: currentColor; opacity: .7; }

/* Hero 動画（縦型・ロゴと文字入りのため切り抜かず全体表示。背景色は動画の地色に合わせる） */
.g-hero__photo.is-video { background: #f6f0e9; }
.g-hero__media { position: absolute; inset: 0 0 112px; }
.g-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f6f0e9; }
.g-hero__photo.is-video .g-hero__scroll { color: var(--g-brown2); }
.g-video-toggle {
	position: absolute; z-index: 2; top: 18px; right: 18px; padding: 6px 2px;
	font-family: var(--g-en); font-size: 10px; letter-spacing: .18em; line-height: 1;
	color: var(--g-brown2); border-bottom: 1px solid currentColor; opacity: .7; transition: opacity .2s;
}
.g-video-toggle:hover, .g-video-toggle:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.g-hero__video { animation: g-fade 1.2s var(--g-ease) both; }
	.g-hero__photo .g-img { animation: g-fade 1.2s var(--g-ease) both; }
	.g-hero__copy > * { animation: g-rise .95s var(--g-ease) both; }
	.g-hero__copy > :nth-child(2) { animation-delay: .1s; }
	.g-hero__copy > :nth-child(3) { animation-delay: .2s; }
	.g-hero__copy > :nth-child(4) { animation-delay: .3s; }
}
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
	.g-hero__photo .g-img { object-position: 43% 56%; }
	.g-hero { min-height: calc(100svh - 57px - env(safe-area-inset-bottom)); }
	.g-hero__links { width: 100%; }
	.g-hero__copy { padding-inline: 32px 28px; }
	.g-hero__scroll { display: none; }
}
@media (max-width: 720px) {
	.g-hero { grid-template-columns: 1fr; min-height: 0; }
	.g-hero__photo { grid-column: 1; grid-row: 1; height: 60svh; min-height: 340px; }
	.g-hero__photo .g-img { object-position: 39% 58%; }
	.g-hero__photo.is-video { height: 72svh; min-height: 420px; }
	.g-hero__media { inset: 0; }
	.g-video-toggle { top: auto; bottom: 14px; right: 14px; }
	.g-hero__copy { grid-column: 1; grid-row: 2; padding: 36px 20px 40px; }
	.g-hero__eyebrow { font-size: 9px; margin-bottom: 26px; }
	.g-hero__title { font-size: clamp(74px, 25vw, 108px); }
	.g-hero__sub { font-size: 17px; }
	.g-hero__catch { margin-top: 40px; font-size: 21px; }
	.g-hero__lead { margin-top: 16px; font-size: 12px; line-height: 2.1; }
	.g-hero__links { position: static; grid-row: 3; grid-template-columns: 1fr 1fr; }
	.g-hero__link { min-height: 93px; padding: 16px 18px; }
	.g-hero__link:nth-child(2n) { border-right: 1px solid var(--g-line); }
	.g-hero__link:nth-child(n+3) { border-bottom: 1px solid var(--g-line); }
	.g-hero__no { font-size: 9px; }
	.g-hero__name { font-size: 13px; }
	.g-hero__link .g-arrow { top: 14px; right: 14px; }
}
@media (max-width: 390px) {
	.g-hero__photo { height: 56svh; }
	.g-hero__photo .g-img { object-position: 38% 58%; }
	.g-hero__photo.is-video { height: 68svh; }
	.g-hero__title { font-size: min(78px, 25vw); }
}

/* =========================================================
   Concept
   ========================================================= */
.g-concept { position: relative; overflow: hidden; background: var(--g-paper); }
.g-concept__motif { right: -4vw; top: 6%; font-size: clamp(320px, 42vw, 600px); color: #ede8e1; }
.g-concept__inner { z-index: 1; display: grid; grid-template-columns: minmax(0, 41%) minmax(0, 1fr); gap: clamp(48px, 10vw, 120px); align-items: center; }
.g-concept__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--g-line); }
.g-concept__photo::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(251, 250, 247, .55); pointer-events: none; }
.g-concept__cap { position: absolute; left: 26px; bottom: 22px; z-index: 1; color: var(--g-white); font-family: var(--g-en); font-size: 9px; letter-spacing: .18em; line-height: 1; }
.g-concept__body { position: relative; }
.g-concept__no { position: absolute; top: -.18em; right: 0; font-family: var(--g-en); font-size: clamp(64px, 7vw, 100px); line-height: 1; color: var(--g-greige); opacity: .55; }
.g-concept__title { margin-top: 44px; font-size: clamp(34px, 4.1vw, 61px); line-height: 1.55; letter-spacing: .08em; }
.g-concept__text { margin: 40px 0 0 clamp(0px, 3vw, 34px); padding-left: 32px; border-left: 1px solid var(--g-line-service); max-width: 31em; }
.g-concept__text p { font-size: 14px; line-height: 2.2; }
.g-concept__text p + p { margin-top: 1.4em; }

@media (max-width: 720px) {
	.g-concept__inner { grid-template-columns: 1fr; gap: 48px; }
	.g-concept__photo { width: 86%; }
	.g-concept__motif { top: 2%; right: -14vw; font-size: 92vw; }
	.g-concept__title { margin-top: 32px; font-size: 37px; }
	.g-concept__text { margin: 32px 0 0; padding-left: 20px; }
	.g-concept__text p { font-size: 13px; line-height: 2.1; }
}

/* =========================================================
   Services
   ========================================================= */
.g-services { background: var(--g-bg-services); }
.g-services__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.g-services__lead { font-size: 14px; line-height: 2; letter-spacing: .08em; }
.g-services__list { border-top: 1px solid var(--g-line-service); }
.g-service {
	--photo: clamp(88px, 11vw, 160px);
	display: grid; grid-template-columns: var(--photo) 72px minmax(0, 1.15fr) minmax(0, 1fr);
	column-gap: clamp(16px, 2.4vw, 32px); align-items: center;
	padding-block: 18px; border-bottom: 1px solid var(--g-line-service);
}
.g-service__photo { position: relative; width: var(--photo); aspect-ratio: 1; overflow: hidden; background: var(--g-line); }
.g-service__no { justify-self: center; font-family: var(--g-en); font-size: 12px; letter-spacing: .1em; color: var(--g-bronze); }
.g-service__name h3 { font-family: var(--g-en); font-weight: 400; font-size: clamp(43px, 5.5vw, 74px); line-height: 1; letter-spacing: -.02em; }
.g-service__name p { margin-top: 10px; font-size: 11px; letter-spacing: .14em; line-height: 1.4; }
.g-service--lash .g-service__name h3 { font-size: clamp(47px, 6vw, 81px); font-weight: 500; }
.g-service__items li { font-size: 13px; line-height: 2.05; letter-spacing: .06em; }
.g-service__items li::before { content: "—"; margin-right: .9em; color: var(--g-bronze); }
.g-services__foot {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
	margin-top: 36px; padding-left: calc(clamp(88px, 11vw, 160px) + 72px + clamp(32px, 4.8vw, 64px));
}
.g-services__price { font-size: 13px; letter-spacing: .08em; line-height: 1.7; }
.g-services__price span { display: block; font-size: 10px; letter-spacing: .16em; color: var(--g-bronze); }

@media (max-width: 720px) {
	.g-services__head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
	.g-services__lead { font-size: 13px; }
	.g-service { --photo: 88px; grid-template-columns: var(--photo) 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 12px; align-items: start; padding-block: 16px; }
	.g-service__photo { grid-row: 1 / span 2; }
	.g-service__no { justify-self: start; padding-top: 8px; font-size: 11px; }
	.g-service__name h3 { font-size: 39px; }
	.g-service--lash .g-service__name h3 { font-size: 43px; }
	.g-service__name p { margin-top: 6px; font-size: 10px; }
	.g-service__items { grid-column: 3; }
	.g-service__items li { font-size: 11px; line-height: 1.95; }
	.g-services__foot { flex-direction: column; align-items: flex-start; padding-left: 0; margin-top: 32px; gap: 18px; }
}

/* =========================================================
   Style / Gallery
   ========================================================= */
.g-style { background: var(--g-white); }
.g-style__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.g-style__lead { font-size: clamp(23px, 2.7vw, 38px); line-height: 1.75; letter-spacing: .1em; }

.g-gallery {
	--gap: clamp(9px, .9vw, 13px);
	--unit: calc((min(1180px, 100vw - clamp(40px, 8vw, 80px)) - 11 * var(--gap)) / 12);
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--unit); gap: var(--gap);
}
.g-shot { position: relative; overflow: hidden; background: var(--g-bg-services); }
.g-shot .g-img { transition: transform .6s var(--g-ease); }
.g-shot:hover .g-img { transform: scale(1.01); }
.g-shot figcaption { position: absolute; inset: 0; pointer-events: none; color: var(--g-white); font-family: var(--g-en); font-size: 10px; letter-spacing: .16em; line-height: 1; text-shadow: 0 0 8px rgba(30, 26, 24, .28); }
.g-shot__no { position: absolute; top: 12px; left: 12px; }
.g-shot__cat { position: absolute; bottom: 12px; left: 12px; }
/* 12カラム配置：主役 / 横長 / 縦長 / 小写真で強弱 */
.g-shot--01 { grid-column: 1 / 8;  grid-row: 1 / 8; }
.g-shot--02 { grid-column: 8 / 13; grid-row: 1 / 5; }
.g-shot--03 { grid-column: 8 / 13; grid-row: 5 / 8; }
.g-shot--04 { grid-column: 1 / 8;  grid-row: 8 / 13; }
.g-shot--05 { grid-column: 8 / 12; grid-row: 8 / 12; }
.g-shot--06 { grid-column: 2 / 8;  grid-row: 13 / 19; }
.g-shot--07 { grid-column: 8 / 13; grid-row: 14 / 20; }
.g-shot--07 .g-shot__cat, .g-shot--05 .g-shot__cat { left: auto; right: 12px; }

.g-style__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 44px; }
.g-style__foot p { font-size: 13px; line-height: 1.9; }

@media (max-width: 1000px) {
	.g-gallery { --gap: 10px; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
	.g-shot { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1; }
	.g-shot--01 { grid-column: 1 / -1 !important; aspect-ratio: 1 / .9; }
	.g-shot--04 { grid-column: 1 / -1 !important; aspect-ratio: 3 / 2; }
	.g-shot--07 { grid-column: 1 / -1 !important; aspect-ratio: 554 / 650; }
}
@media (max-width: 720px) {
	.g-style__head { grid-template-columns: 1fr; gap: 24px; }
	.g-style__lead { font-size: 24px; }
	.g-gallery { --gap: 8px; }
	.g-shot figcaption { font-size: 9px; }
	.g-shot__no { top: 9px; left: 9px; } .g-shot__cat { bottom: 9px; left: 9px; }
	.g-style__foot { flex-direction: column; align-items: flex-start; margin-top: 32px; }
	.g-style__foot p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.g-shot .g-img { transition: none; }
	.g-shot:hover .g-img { transform: none; }
}

/* =========================================================
   Why Grace
   ========================================================= */
.g-why { position: relative; overflow: hidden; background: var(--g-bg-why); color: var(--g-white); }
.g-why__bg { position: absolute; inset: 0; }
.g-why::after { content: ""; position: absolute; inset: 0; background: rgba(50, 39, 31, .74); }
.g-why__inner { z-index: 1; }
.g-why__grid {
	--rule: rgba(251, 250, 247, .26);
	margin-top: clamp(48px, 5vw, 72px);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.g-why__cell {
	display: grid; grid-template-rows: auto auto 1fr; align-content: start;
	min-height: 220px; padding: 26px clamp(18px, 2vw, 30px) 36px;
	border-left: 1px solid var(--rule);
}
.g-why__cell:first-child { border-left: 0; }
.g-why__no { font-family: var(--g-en); font-size: 11px; letter-spacing: .14em; line-height: 1; opacity: .75; }
.g-why__cell h3 { margin-top: 16px; font-size: 16px; font-weight: 500; letter-spacing: .14em; line-height: 1.3; }
.g-why__cell p { margin-top: 36px; font-size: 13px; line-height: 1.95; letter-spacing: .06em; color: rgba(251, 250, 247, .88); }
.g-why__side { position: absolute; z-index: 1; right: 20px; bottom: 56px; writing-mode: vertical-rl; font-family: var(--g-en); font-size: 10px; letter-spacing: .2em; line-height: 1; opacity: .8; }

@media (max-width: 1000px) {
	.g-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-why__cell:nth-child(odd) { border-left: 0; }
	.g-why__cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
	.g-why__side { display: none; }
}
@media (max-width: 560px) {
	.g-why__grid { grid-template-columns: 1fr; }
	.g-why__cell { border-left: 0; min-height: 0; padding: 22px 4px 26px; }
	.g-why__cell:nth-child(n+2) { border-top: 1px solid var(--rule); }
	.g-why__cell p { margin-top: 16px; font-size: 12px; }
}

/* =========================================================
   Recruit
   ========================================================= */
.g-recruit { position: relative; overflow: hidden; background: var(--g-bg-recruit); }
.g-recruit__motif { right: -3vw; bottom: -4%; font-size: clamp(280px, 30vw, 440px); color: #e8e2da; }
.g-recruit__inner { z-index: 1; }
.g-recruit__head { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 4.4fr) minmax(0, 3fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.g-recruit__title { font-size: clamp(35px, 4vw, 58px); line-height: 1.55; letter-spacing: .08em; }
.g-nobr { display: inline-block; }
.g-recruit__text p { font-size: 13px; line-height: 2.1; }
.g-recruit__text p + p { margin-top: 1.3em; }

.g-recruit__positions { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 7.4fr); gap: clamp(24px, 3.4vw, 48px); margin-top: clamp(56px, 6vw, 80px); }
.g-recruit__cap { padding-top: 16px; font-size: 10px; letter-spacing: .18em; color: var(--g-brown2); line-height: 1.4; }
.g-positions { border-top: 1px solid var(--g-line-recruit); }
.g-positions li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--g-line-recruit); }
.g-positions__no { font-family: var(--g-en); font-size: 11px; color: var(--g-bronze); letter-spacing: .1em; }
.g-positions__en { font-size: clamp(26px, 2.6vw, 37px); letter-spacing: -.01em; line-height: 1.3; }
.g-positions__ja { font-size: 11px; letter-spacing: .14em; padding-right: 4px; }

.g-terms { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--g-line-recruit); border-bottom: 1px solid var(--g-line-recruit); }
.g-terms__cell { display: grid; grid-template-rows: auto auto 1fr; align-content: start; padding: 22px clamp(18px, 2.2vw, 30px) 28px; border-left: 1px solid var(--g-line-recruit); }
.g-terms__cell:first-child { border-left: 0; }
.g-terms dt { font-size: 10px; letter-spacing: .18em; color: var(--g-bronze); line-height: 1.4; }
.g-terms__big { margin-top: 8px; font-family: var(--g-en); font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.01em; line-height: 1.2; }
.g-terms__note { margin-top: 10px; font-size: 11px; line-height: 1.9; }

.g-recruit__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(32px, 6vw, 80px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.g-recruit__details { border-top: 1px solid var(--g-line-recruit); }
.g-recruit__details > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--g-line-recruit); }
.g-recruit__details dt { font-size: 10px; letter-spacing: .16em; color: var(--g-brown2); line-height: 1.9; }
.g-recruit__details dd { font-size: 12px; line-height: 1.9; }
.g-recruit__info .g-tlink { width: 100%; }
.g-recruit__sub { margin-top: 14px; font-size: 12px; line-height: 1.7; }
.g-recruit__notice { margin-top: 18px; font-size: 10px; letter-spacing: .06em; color: var(--g-brown2); line-height: 1.6; }

@media (max-width: 1000px) {
	.g-recruit__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
	.g-recruit__head .g-label { grid-column: 1 / -1; }
	.g-recruit__foot { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.g-recruit__head { grid-template-columns: 1fr; gap: 28px; }
	.g-recruit__title { font-size: 35px; line-height: 1.6; }
	.g-recruit__text p { font-size: 12px; }
	.g-recruit__positions { grid-template-columns: 1fr; gap: 12px; margin-top: 56px; }
	.g-recruit__cap { padding-top: 0; }
	.g-positions li { grid-template-columns: 34px minmax(0, 1fr) auto; }
	.g-positions__en { font-size: 25px; }
	.g-positions__ja { font-size: 10px; }
	.g-terms { grid-auto-flow: row; grid-template-columns: 1fr; }
	.g-terms__cell { border-left: 0; padding: 20px 2px 22px; }
	.g-terms__cell + .g-terms__cell { border-top: 1px solid var(--g-line-recruit); }
	.g-terms__big { font-size: 34px; }
	.g-recruit__details > div { grid-template-columns: 96px minmax(0, 1fr); }
	.g-recruit__details dd { font-size: 11px; }
	.g-recruit__motif { font-size: 80vw; right: -18vw; }
}

/* =========================================================
   Customer Reviews
   ========================================================= */
.g-reviews { background: var(--g-bg-reviews); padding-block: clamp(80px, 9vw, 130px); }
.g-reviews__body { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(32px, 3vw, 44px); }
.g-reviews__src { font-family: var(--g-en); font-size: 11px; letter-spacing: .14em; color: var(--g-brown2); line-height: 1.4; }
.g-reviews__src span { margin-right: .6em; color: var(--g-bronze); }
.g-reviews__text { margin-top: 18px; font-size: clamp(18px, 2vw, 28px); line-height: 1.9; letter-spacing: .12em; }
.g-reviews__body .g-tlink { margin-top: 32px; }
@media (max-width: 720px) { .g-reviews__text { font-size: 17px; letter-spacing: .08em; } }
@media (max-width: 390px) { .g-reviews__text { font-size: 15px; } }

/* =========================================================
   Access
   ========================================================= */
.g-access { background: var(--g-paper); }
.g-access__grid { display: grid; grid-template-columns: minmax(0, 37%) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); margin-top: clamp(36px, 4vw, 48px); align-items: stretch; }
.g-access__name { font-size: clamp(22px, 2vw, 27px); letter-spacing: .01em; line-height: 1.3; margin-bottom: 26px; }
.g-access__dl { border-top: 1px solid var(--g-line); margin-bottom: 36px; }
.g-access__dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--g-line); }
.g-access__dl dt { font-size: 10px; letter-spacing: .16em; color: var(--g-brown2); line-height: 2; }
.g-access__dl dd { font-size: 12.5px; line-height: 1.95; }
.g-access__map { position: relative; min-height: 420px; background: var(--g-line); }
.g-access__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.55); }
@media (max-width: 1000px) {
	.g-access__grid { grid-template-columns: 1fr; }
	.g-access__map { min-height: 0; height: 320px; }
}
@media (max-width: 720px) {
	.g-access__map { height: 280px; }
	.g-access__dl > div { grid-template-columns: 76px minmax(0, 1fr); }
	.g-access__dl dd { font-size: 12px; }
}

/* =========================================================
   Reservation
   ========================================================= */
.g-reserve { position: relative; overflow: hidden; color: var(--g-white); background: var(--g-bg-why); padding-block: clamp(110px, 12vw, 170px); }
.g-reserve__bg { position: absolute; inset: 0; }
.g-reserve::after { content: ""; position: absolute; inset: 0; background: rgba(36, 28, 23, .52); }
.g-reserve__inner { z-index: 1; }
.g-reserve__title { margin-top: clamp(40px, 5vw, 64px); font-family: var(--g-en); font-weight: 400; font-size: clamp(53px, 7vw, 102px); line-height: .93; letter-spacing: -.03em; }
.g-reserve__sub { margin-top: 28px; font-size: 13px; letter-spacing: .12em; line-height: 1.8; }
.g-reserve__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 4vw, 52px); }
.g-reserve__link {
	position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px;
	min-height: 78px; padding: 16px 44px 16px 20px;
	border: 1px solid rgba(251, 250, 247, .34); color: rgba(251, 250, 247, .74);
	transition: background-color .25s, color .25s, border-color .25s;
}
.g-reserve__link + .g-reserve__link { border-left-width: 0; }
.g-reserve__name { font-size: 14px; letter-spacing: .06em; line-height: 1.4; }
.g-reserve__meta { font-size: 10px; letter-spacing: .1em; line-height: 1.4; opacity: .8; }
.g-reserve__link .g-arrow { position: absolute; top: 50%; right: 18px; margin-top: -.5em; }
.g-reserve__link:hover .g-arrow { transform: translate(2px, -2px); }
.g-reserve__link.is-primary { background: var(--g-white); color: var(--g-ink); border-color: var(--g-white); }
.g-reserve__link.is-primary:hover { background: var(--g-greige); border-color: var(--g-greige); }
.g-reserve__link.is-strong { color: var(--g-white); border-color: rgba(251, 250, 247, .86); border-left-width: 1px; }
.g-reserve__link.is-strong:hover { background: var(--g-white); color: var(--g-ink); }
.g-reserve__link.is-weak:hover { color: var(--g-white); border-color: rgba(251, 250, 247, .8); }

@media (max-width: 1000px) {
	.g-reserve__links { grid-template-columns: 1fr 1fr; }
	.g-reserve__link.is-weak { border-left-width: 1px; }
	.g-reserve__link.is-weak:nth-child(3) { border-top-width: 0; }
	.g-reserve__link.is-weak:nth-child(4) { border-top-width: 0; border-left-width: 0; }
}
@media (max-width: 720px) {
	.g-reserve__title { font-size: 53px; }
	.g-reserve__sub { font-size: 12px; }
	.g-reserve__link { min-height: 72px; padding: 14px 36px 14px 14px; }
	.g-reserve__name { font-size: 13px; }
	.g-reserve__link .g-arrow { right: 12px; }
}
@media (max-width: 390px) { .g-reserve__title { font-size: 46px; } }

/* =========================================================
   Footer
   ========================================================= */
.g-footer { background: var(--g-bg-footer); color: #e9e3db; padding: clamp(64px, 7vw, 88px) 0 28px; }
.g-footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.g-brand--footer { color: var(--g-white); }
.g-footer__address { font-style: normal; font-size: 11px; line-height: 2; letter-spacing: .08em; opacity: .85; }
.g-footer__nav { display: flex; flex-direction: column; gap: 10px; }
.g-footer__nav a { font-family: var(--g-en); font-size: 11px; letter-spacing: .14em; line-height: 1.4; opacity: .9; transition: opacity .2s; }
.g-footer__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.g-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(233, 227, 219, .12); }
.g-footer__copy, .g-footer__top { font-family: var(--g-en); font-size: 10px; letter-spacing: .14em; line-height: 1.4; opacity: .55; }
.g-footer__top:hover { opacity: .9; }
@media (max-width: 1000px) {
	.g-footer { padding-bottom: calc(28px + 57px + env(safe-area-inset-bottom)); }
	.g-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
	.g-brand--footer, .g-footer__address { grid-column: 1 / -1; }
}

/* =========================================================
   Mobile Fixed CTA（1000px以下）
   ========================================================= */
.g-fixcta { display: none; }
@media (max-width: 1000px) {
	.g-fixcta {
		position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
		display: grid; grid-template-columns: .88fr 1.12fr; gap: 6px;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		background: rgba(248, 246, 242, .96); border-top: 1px solid var(--g-line);
	}
	.g-fixcta a { display: grid; place-items: center; min-height: 45px; font-size: 13px; letter-spacing: .1em; transition: background-color .2s, color .2s; }
	.g-fixcta__line { border: 1px solid var(--g-brown); color: var(--g-brown); }
	.g-fixcta__line:hover { background: var(--g-brown); color: var(--g-white); }
	.g-fixcta__reserve { background: var(--g-brown); color: var(--g-white); }
	.g-fixcta__reserve:hover { background: var(--g-ink); }
	body.grace-lp.is-menu-open .g-fixcta { display: none; }
}
body.grace-lp.is-menu-open { overflow: hidden; }