/* ============================================================
   FRONT-PAGE WHITE-BASE TRIAL  (nirnor-style)
   Loaded ONLY on is_front_page() AFTER main.css, so equal-specificity
   selectors win by source order. Flips the .front-dark band (hero →
   why) from charcoal/brown to a light base, and re-colours the header
   states that assume a dark hero. Revert = remove the enqueue block.
   ============================================================ */

/* --- WebGL backdrop canvas + hide the old SVG ripple --- */
.geo-bg__webgl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}
.geo-bg__ripple { display: none !important; }

/* --- Dark band wrapper → light --- */
.front-dark {
	background: #ffffff;
	color: #1a1a1a;
}

/* --- Hero (over the backdrop) --- */
.hero--video .hero__label { color: rgba(26, 26, 26, 0.55); }
.hero--video .hero__title,
.hero--video .hero__sub   { color: #1a1a1a; }
.hero--video .hero__lead  { color: rgba(26, 26, 26, 0.72); }
.hero--video .hero__scroll       { color: rgba(26, 26, 26, 0.6); }
.hero--video .hero__scroll-line  { background: rgba(26, 26, 26, 0.35); }
.hero--video .hero__scroll-line::after { background: #1a1a1a; }
.front-dark .hero--video .hero__label { color: rgba(26, 26, 26, 0.6); }

.hero__prose,
.hero__prose-line              { color: #1a1a1a; }
.hero__prose-line:first-child  { color: #1a1a1a; }
.hero__hint       { color: rgba(26, 26, 26, 0.55); }
.hero__hint-line  { background: rgba(26, 26, 26, 0.35); }

/* Hero buttons → dark-on-light */
.hero--video .btn {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}
.hero--video .btn:hover { background: transparent; color: #1a1a1a; }
.hero--video .btn--ghost {
	background: transparent;
	color: #1a1a1a;
	border-color: rgba(26, 26, 26, 0.4);
}
.hero--video .btn--ghost:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* Hero text block — align its LEFT edge to the header logo's left edge
   (client 2026-07-07). The base rule .hero--dark .hero__layout pulls the text
   left of the standard inset (clamp 20/3vw/48 ≈ 48px), while the logo sits at
   the shared container inset var(--container-pad) (≈ 2vw+78 ≈ 110px on desktop).
   Match the hero to the logo axis so the headline starts exactly under the
   logo's head. Same specificity as the base rule → wins by load order. */
.hero--dark .hero__layout { padding-left: var(--container-pad); }

/* --- Section headings / leads inside the band --- */
.front-dark .section-heading__label { color: rgba(26, 26, 26, 0.5); }
.front-dark .section-heading__title { color: #1a1a1a; }
.front-dark .section-lead           { color: rgba(26, 26, 26, 0.72); }

/* --- Concept / Why scroll-stack (.cstack) --- */
.cstack__title { color: #1a1a1a; }
.cstack__label { color: rgba(26, 26, 26, 0.65); }
.front-dark .cstack__outro-text         { color: #333333; }
.front-dark .cstack__outro-text strong  { border-bottom-color: rgba(26, 26, 26, 0.4); }
.front-dark .cstack__outro-cta .btn        { border-color: rgba(26, 26, 26, 0.5); color: #1a1a1a; }
.front-dark .cstack__outro-cta .btn::after { background: #1a1a1a; }
.front-dark .cstack__outro-cta .btn:hover        { color: #fff; }
.front-dark .cstack__outro-cta .btn:hover::after { background: #1a1a1a; }
/* (#concept strong is already #8a8a8a — reads fine on light) */

/* --- Ghost buttons / more links in the band --- */
.front-dark .btn--ghost        { color: #1a1a1a; border-color: rgba(26, 26, 26, 0.4); }
.front-dark .btn--ghost:hover  { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.front-dark .btn::after        { background: #1a1a1a; }

/* --- Events (SEMINAR & WORKSHOP) --- */
.front-dark .snw-tab            { color: rgba(26, 26, 26, 0.55); }
.front-dark .snw-tab.is-active  { color: #1a1a1a; }
.front-dark .snw-tabs           { border-color: rgba(26, 26, 26, 0.16); }
.front-dark .snw-tab::after     { background: #1a1a1a; }
.front-dark .event-card__cat      { color: rgba(26, 26, 26, 0.7); border-color: rgba(26, 26, 26, 0.3); }
.front-dark .event-card__schedule { color: rgba(26, 26, 26, 0.55); }
.front-dark .event-card__title    { color: #1a1a1a; }
.front-dark .event-card__excerpt  { color: rgba(26, 26, 26, 0.7); }
.front-dark .event-card__link        { color: #1a1a1a; border-color: #1a1a1a; }
.front-dark .event-card__link:hover  { background: #1a1a1a; color: #fff; }
.front-dark .event-card__link--reserve       { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.front-dark .event-card__link--reserve:hover { background: transparent; color: #1a1a1a; }
.front-dark .snw-empty { color: rgba(26, 26, 26, 0.55); }

/* --- Service quality block (.srv-q) --- */
.srv-q__label    { color: rgba(26, 26, 26, 0.55); }
.srv-q__heading  { color: #1a1a1a; }
.srv-q__lead     { color: rgba(26, 26, 26, 0.72); }
.srv-q__item-num { color: rgba(26, 26, 26, 0.45); }
.srv-q__item-list a:hover { color: #1a1a1a; }

/* ============================================================
   HEADER — its is-overlay (top) and is-dark (over .front-dark)
   states assume a dark hero and use white text/logo. Re-colour to
   dark so it stays legible over the light hero.
   ============================================================ */
/* Following (sticky) header has NO background in any state — client 2026-07-07.
   is-dark previously kept a cream wash while scrolling over the hero→service
   band; drop it so the header stays fully transparent like the rest of the site. */
.site-header.is-dark    { background: transparent !important; }
.site-header.is-overlay { background: transparent !important; }

.site-header.is-dark .site-header__logo svg .cls-1,
.site-header.is-overlay .site-header__logo svg .cls-1 { fill: #1a1a1a; }
.site-header.is-overlay .site-header__logo svg text   { fill: #1a1a1a; }
.site-header.is-dark .site-header__logo-text,
.site-header.is-overlay .site-header__logo-text { color: #1a1a1a; }

.site-header.is-dark .site-nav__link,
.site-header.is-overlay .site-nav__link { color: #1a1a1a; }
.site-header.is-dark .site-nav__link::after,
.site-header.is-overlay .site-nav__link::after { background: #1a1a1a; }

.site-header.is-dark .site-header__cta,
.site-header.is-overlay .site-header__cta { background: transparent; color: #1a1a1a; }
.site-header.is-dark .site-header__cta:hover,
.site-header.is-overlay .site-header__cta:hover { background: #1a1a1a; color: #fff; }

/* Mobile burger lines over the overlay header */
body.has-overlay-header .nav-trigger__btn span { background: #1a1a1a !important; }
body.menu-open.has-overlay-header .nav-trigger__btn span { background: #1a1a1a !important; }

/* ============================================================
   CLIENT REVIEW (websupport Site #59) — front page
   ============================================================ */

/* #3724 / #3725 — WHY catch sits over the (still dark photo) feature cards,
   so its label + heading must be white to read. (Concept catch stays dark.) */
#why .cstack__label { color: #ffffff; }
#why .cstack__title { color: #ffffff; }

/* PC-only type tweaks (≥901px). SP keeps the existing sizes. */
@media (min-width: 901px) {
	/* #3721 — hero headline */
	.hero--dark .hero__title {
		font-size: 51px;
		line-height: 70px;
		letter-spacing: 8px;
	}
	/* #3722 — hero sub copy */
	.hero--dark .hero__sub {
		font-size: 17px;
		line-height: 32px;
		letter-spacing: 1px;
	}
	/* #3723 — hero eyebrow label */
	.hero--dark .hero__label {
		line-height: 24px;
		letter-spacing: 3px;
	}
	/* #3720 — concept outro statement */
	#concept .cstack__outro-text strong {
		font-size: 51px;
		line-height: 80px;
	}
}

/* ============================================================
   websupport #3798 #3799 (2026-06-27) — SERVICEセクション見出し
   ※「この要素だけ」指示 → #service にスコープ（同クラス他所へ波及させない）
   ============================================================ */
/* #3798 — h2.srv-q__heading weight400→700 / line-height57px→54px / 字間6px→2px */
#service .srv-q__heading { font-weight: 700; line-height: 54px; letter-spacing: 2px; }
/* #3799 — span.srv-q__label 字間4.4px→2px */
#service .srv-q__label   { letter-spacing: 2px; }

/* ============================================================
   websupport #3828 #3829 #3830 (2026-06-27) — front-page 微調整
   ============================================================ */
/* #3828 — h1.hero__title 太さ 500→700（この要素のみ＝フロントヒーロー） */
.hero--dark .hero__title { font-weight: 700; }

/* コンセプトを見る button relocated INTO concept card 03 (below its body),
   the former .cstack__outro closing section removed (client 2026-07-07).
   The wrapper keeps its .cstack__outro-cta class so all existing button styling
   (incl. the #3829 arrow) applies unchanged; only re-align it left under the
   card's left-aligned text and give it a little top spacing. Card 03 is a light
   grey field with dark text, so the default dark homeBtn reads correctly. */
#concept .cstack__item-text .cstack__outro-cta {
	justify-content: flex-start;
	margin-top: clamp(12px, 1.5vw, 20px);
}

/* #3829 — concept outro「コンセプトを見る」(.btn) の矢印が出ていない指摘。
   homeBtn の ::after 矢印（SVGマスク＋濃色）を明示再宣言して確実に表示する。
   ホバー時は本体が濃色に塗られるので矢印は白へ（他ボタンと同挙動）。 */
#concept .cstack__outro-cta .btn::after {
	background: #1a1a1a;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='8'%3E%3Cpath d='M0 4H39M34 1l5 3-5 3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='8'%3E%3Cpath d='M0 4H39M34 1l5 3-5 3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center / contain;
}
#concept .cstack__outro-cta .btn:hover::after { background: #ffffff; }

/* #3830 — events「一覧を見る」(.btn--ghost) hover の動きがおかしい指摘。
   .front-dark .btn--ghost:hover{background:#1a1a1a}（background短縮形）が
   homeBtn の塗りアニメ(グラデ background-size 0%→100%)を潰し、塗りが瞬間切替で
   ガタつく。塗りを homeBtn 方式に統一＝グラデを100%まで滑らかに伸ばす。 */
.front-dark .btn--ghost:hover {
	background: linear-gradient(var(--hb-line), var(--hb-line)) left center / 100% 100% no-repeat;
	color: var(--hb-on);
	border-color: var(--hb-line);
}