/*
Theme Name: fotomag-child
Template: fotomag
Description: grit.HAIR｜＋ child theme
Version: recovery
*/

/* ============================================================
   フッター著作権表記修正
   ============================================================ */
.cb-copyright-line { font-size: 0; }
.cb-copyright-line::before { content: '\00A9 grit.HAIR\FF5C\FF0B'; font-size: 13px; }

/* ============================================================
   ボディ横スクロール抑制
   ============================================================ */
body { overflow-x: hidden; }

/* ============================================================
   スマホ固定CTAバー（functions.php が出力）
   ============================================================ */
.grit-cta-bar {
	display: flex;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 9999;
	height: 56px;
}
.grit-cta-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}
.grit-cta-line { background: #06C755; }
.grit-cta-web  { background: #111; }

/* ============================================================
   ヘッダーの小さいロゴを非表示（ホームのみ／Hero中央の正式ロゴと重複するため）
   ============================================================ */
body.home #logo,
body.home .cb-logo,
body.home #cb-header .logo,
body.home .site-logo,
body.home #cb-header .cb-logo-link {
	display: none !important;
}

/* ============================================================
   サブページのヘッダーロゴを新しいgrit.ロゴへ統一（ホーム以外）
   古い画像ロゴ（2017年アップロードのPNG）を非表示にし、
   Hero中央ロゴと同じ書体の新しいテキストロゴに置き換える
   ============================================================ */
body:not(.home) #logo img,
body:not(.home) #cb-header .cb-logo-link img {
	display: none;
}
body:not(.home) #logo .cb-logo-link::after,
body:not(.home) #cb-header .cb-logo-link::after {
	content: 'grit.';
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.06em;
	color: #111;
}

/* ============================================================
   #grit-top 基本レイアウト
   ============================================================ */
#grit-top * { box-sizing: border-box; }

/* Hero */
.gr-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: #111;
	overflow: hidden;
}
.gr-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.gr-hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.gr-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.22) 100%);
	z-index: 1;
}
.gr-hero__inner {
	position: relative;
	z-index: 2;
	padding: 0 60px;
	max-width: 900px;
}
.gr-hero-brand {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 800;
	font-size: 76px;
	line-height: 1;
	color: #fff;
	letter-spacing: 0.04em;
	margin: 0 0 24px;
}
.gr-hero__label {
	font-size: 13px;
	letter-spacing: 0.22em;
	color: #F4FF3A;
	margin-bottom: 20px;
}
.gr-hero__title {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	line-height: 1.6;
	margin-bottom: 36px;
}
.gr-hero__scroll {
	position: absolute;
	bottom: 32px; left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: rgba(255,255,255,.55);
}

/* Buttons */
.gr-btn {
	display: inline-block;
	padding: 14px 32px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	border: 1px solid #fff;
}
.gr-btn--white { background: transparent; color: #fff; border-color: #fff; }
.gr-btn--gold  { background: #F4FF3A; color: #000; border-color: #F4FF3A; }
.gr-btn--sm    { font-size: 12px; padding: 10px 24px; }
.gr-btn--outline-gold { background: transparent; color: #F4FF3A; border-color: #F4FF3A; }

/* Features nav */
.gr-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.gr-feature {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3/4;
	text-decoration: none;
}
.gr-feature img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* Gallery card overlay */
.gt-gallery-card { position: relative; overflow: hidden; }

/* SHIMA風・画像ホバー/タップ演出（grit版：レモンイエロー） */
.gt-gallery-card img {
	transition: transform .35s ease;
}

.gt-gallery-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(244, 255, 58, 0.24);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
	z-index: 2;
}

.gt-gallery-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px 20px;
	opacity: 0;
	transition: opacity .35s ease;
	z-index: 3;
}
.gt-gallery-overlay--nav {
	background: linear-gradient(to top, rgba(10,10,10,.55) 0%, rgba(10,10,10,.08) 55%, transparent 100%);
}
.gt-gallery-overlay > * {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
}

/* PC: hover時のみ反応 */
@media (hover: hover) {
	.gt-gallery-card:hover img { transform: scale(1.04); }
	.gt-gallery-card:hover::after { opacity: 1; }
	.gt-gallery-card:hover .gt-gallery-overlay { opacity: 1; }
	.gt-gallery-card:hover .gt-gallery-overlay > * {
		opacity: 1;
		transform: translateY(0);
	}
}

/* スマホ: タップ中（active）のみ反応、離すと元に戻る */
.gt-gallery-card:active img { transform: scale(1.04); }
.gt-gallery-card:active::after { opacity: 1; }
.gt-gallery-card:active .gt-gallery-overlay { opacity: 1; }
.gt-gallery-card:active .gt-gallery-overlay > * {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   スマホ限定：初回ワイプ演出（左→右に広がり、その場でフェードアウト・1回だけ）
   hover/active の半透明オーバーレイ（::after）とは別管理（::before）
   ============================================================ */
@keyframes gtWipeOnce {
	0%   { transform: scaleX(0); opacity: 1; }
	40%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}
@media (hover: none) {
	.gt-gallery-card::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(244, 255, 58, 0.82);
		transform: scaleX(0);
		transform-origin: left center;
		opacity: 0;
		z-index: 5;
		pointer-events: none;
	}
	.gt-gallery-card.gt-wiped::before {
		animation: gtWipeOnce .9s ease forwards;
	}
}
.gt-overlay__label {
	font-size: 10px;
	letter-spacing: 0.2em;
	color: #F4FF3A;
	display: block;
	margin-bottom: 8px;
}
.gt-overlay__title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
}
.gt-overlay__desc { font-size: 12px; color: rgba(255,255,255,.75); margin: 0 0 10px; }
.gt-overlay__view { font-size: 11px; letter-spacing: 0.15em; color: #F4FF3A; margin: 0; }

/* About */
.gr-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 60vh;
}
.gr-about__photo { overflow: hidden; }
.gr-about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-about__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 56px;
	background: #faf9f7;
}
.gr-about__role { font-size: 11px; letter-spacing: 0.2em; color: #888; margin-bottom: 16px; }
.gr-about__title { font-size: 26px; font-weight: 700; line-height: 1.7; margin: 0 0 20px; }
.gr-about__desc  { font-size: 15px; line-height: 1.9; color: #444; }

/* Sections */
.gr-sec { padding: 96px 0; }
.gr-sec--cream { background: #faf9f7; }
.gr-sec--black { background: #0a0a0a; color: #fff; }
.gr-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.gr-wrap--narrow { max-width: 720px; }
.gr-center { text-align: center; margin-top: 48px; }

.gr-sec__hd { text-align: center; margin-bottom: 56px; }
.gr-idx { font-size: 11px; letter-spacing: 0.25em; color: #8a6d00; margin-bottom: 12px; }
.gr-idx--gold { color: #F4FF3A; }
.gr-sec__title { font-size: 32px; font-weight: 700; line-height: 1.5; margin: 0 0 12px; }
.gr-sec__title--light { color: #fff; }
.gr-sec__sub { font-size: 14px; color: #777; }
.gr-sec__sub--dim { color: rgba(255,255,255,.55); }

/* Eyebrow */
.gr-eyebrow { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.gr-eyebrow__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gr-eyebrow__fig { margin: 0; overflow: hidden; }
.gr-eyebrow__fig img { width: 100%; display: block; }
.gr-eyebrow__body { padding-top: 20px; }

/* Hair split */
.gr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.gr-split--rev .gr-split__body { order: 1; }
.gr-split--rev .gr-split__fig  { order: 0; }
.gr-split__fig { margin: 0; overflow: hidden; }
.gr-split__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bleach grid */
.gr-bleach-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gr-bleach-item { margin: 0; overflow: hidden; }
.gr-bleach-item img { width: 100%; display: block; }

/* List */
.gr-list { list-style: none; padding: 0; margin: 0 0 28px; }
.gr-list li {
	padding: 12px 0;
	border-bottom: 1px solid #e8e4dd;
	font-size: 14px;
	letter-spacing: 0.04em;
}
.gr-sec--black .gr-list li { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }

/* Design grid */
.gr-design-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.gr-design-item a { text-decoration: none; color: inherit; }
.gr-design-item__thumb { margin: 0; overflow: hidden; aspect-ratio: 4/3; }
.gr-design-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-design-item__info { padding: 12px 0 0; }
.gr-design-item__name { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.gr-design-item__info time { font-size: 11px; color: #888; }

/* Price */
.gr-price { border-top: 1px solid #ddd; margin: 0 0 32px; }
.gr-price__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid #eee;
	font-size: 15px;
}
.gr-price__row--feat { font-weight: 700; font-size: 17px; }
.gr-price__row--sub  { font-size: 13px; color: #777; }
.gr-price__row dt    { flex: 1; }
.gr-price__row dd    { margin: 0; font-weight: 700; }
.gr-price__note { font-size: 13px; color: #888; line-height: 1.8; text-align: center; margin: 0 0 32px; }

/* CTA final */
.gr-cta-fin { padding: 120px 40px; text-align: center; background: #0a0a0a; color: #fff; }
.gr-cta-fin__title { font-size: 48px; font-weight: 800; letter-spacing: 0.1em; margin: 0 0 32px; }
.gr-cta-fin__lead  { font-size: 16px; line-height: 2; margin: 0 0 40px; color: rgba(255,255,255,.8); }

/* Transparent header on home */
body.home #cb-header {
	position: fixed !important;
	background: transparent !important;
	border-bottom: 1px solid transparent !important;
	z-index: 999 !important;
	transition: background .5s ease !important;
}
body.home #cb-header.grit-scrolled {
	background: rgba(10,10,10,.92) !important;
	backdrop-filter: blur(14px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 959px) {
	.gr-hero-brand { font-size: 52px !important; }
	.gr-hero__inner { padding: 0 40px; }
	.gr-hero__title { font-size: 22px; }
	.gr-about { grid-template-columns: 1fr; }
	.gr-about__body { padding: 48px 32px; }
	.gr-features { grid-template-columns: repeat(3,1fr); }
	.gr-eyebrow { grid-template-columns: 1fr; }
	.gr-split, .gr-split--rev { grid-template-columns: 1fr; }
	.gr-split--rev .gr-split__body { order: 0; }
	.gr-split--rev .gr-split__fig  { order: 1; }
	.gr-design-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
	.gr-hero-brand { font-size: 31px !important; letter-spacing: 0.02em !important; }
	.gr-hero__inner { padding: 0 24px; }
	.gr-hero__title { font-size: 18px; }
	.gr-features { grid-template-columns: 1fr; }
	.gr-sec { padding: 64px 0; }
	.gr-wrap { padding: 0 24px; }
	.gr-bleach-grid { grid-template-columns: 1fr; gap: 12px; }
	.gr-design-grid { grid-template-columns: 1fr; }
	.gr-eyebrow__imgs { grid-template-columns: 1fr; }
	.gr-cta-fin { padding: 80px 24px; }
	.gr-cta-fin__title { font-size: 32px; }
}