/* ============================================================
   Bright Man — additional.css
   Scope: everything below is scoped under .bm-page so it cannot
   leak into other pages/posts on a shared SWELL install.
   Apply the class "bm-page" to the page's outermost Group block
   (Advanced > Additional CSS Class(es) in the block sidebar).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700;800&display=swap');

/* ------------------------------------------------------------
   1. Tokens (CSS custom properties cascade to descendants only,
      so scoping to .bm-page is safe and does not leak upward).
   ------------------------------------------------------------ */
html,
body {
	overflow-x: hidden;
}

.bm-page {
	--bm-dark: #0a0002;
	--bm-red: #bc002d;
	--bm-light: #fcfcfc;
	--bm-gray: #f0f0f0;
	--bm-accent-green: #476856;
	--bm-accent-orange: #e27b4e;
	color: var(--bm-dark);
	font-family: 'Shippori Mincho', serif;
	/* Break this block out of the theme's article/content container
	   (e.g. SWELL's .l-mainContent max-width, or a block theme's
	   default contentSize) so each section below can control its
	   own full-bleed width the same way the original static design
	   did (sections were direct children of <body>, not nested in a
	   narrow "singular content" wrapper). */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow-x: hidden;
	/* SWELL (and many themes) add a fixed top padding before the
	   content area starts (SWELL: .l-content{padding-top:2em/4em}).
	   Cancel it so the hero's sunburst starts right at the header's
	   bottom edge instead of leaving a blank gap. If your theme's
	   pre-content spacing differs, adjust these two values to match. */
}

/* SWELL zeroes out the top margin of the content area's first child
   with `.post_content > :first-child { margin-top:0 !important }`
   (specificity 0,2,0). We must match or exceed that specificity to
   cancel .l-content's 2em/4em top padding (see above) — a plain
   `.bm-page` selector (0,1,0) loses to it even with !important. */
.bm-page.bm-page {
	margin-top: -2em !important;
	/* SWELL's .l-content also carries a flat margin-bottom:6em before
	   the footer starts (no responsive override, unlike padding-top
	   above) — cancel it the same way so the CONTACT section's card
	   sits flush against the footer's red band instead of leaving a
	   blank gap. */
	margin-bottom: -6em !important;
}
@media (min-width: 600px) {
	.bm-page.bm-page { margin-top: -4em !important; }
}

.bm-page * {
	font-family: 'Shippori Mincho', serif;
	box-sizing: border-box;
}

/* Reset theme (SWELL etc.) default heading/list/link decorations —
   themes commonly ship their own background bars, bullet icons, or
   link-underline styles for h1-h6/ul/a, which would otherwise bleed
   into this page's headings and clash with our own bm-* styling. */
.bm-page.bm-page.bm-page h1,
.bm-page.bm-page.bm-page h2,
.bm-page.bm-page.bm-page h3,
.bm-page.bm-page.bm-page h4,
.bm-page.bm-page.bm-page h5,
.bm-page.bm-page.bm-page h6 {
	background: none !important;
	background-image: none !important;
	border: 0 none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-top: 0 none !important;
	border-bottom: 0 none !important;
	border-left: 0 none !important;
	border-right: 0 none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 1rem;
	color: var(--bm-dark);
	line-height: 1.4;
}
/* SWELL draws its default heading ruled-line design two ways depending
   on context: sometimes a real border-bottom/border-top on the heading
   itself (needs the border-width/border-style !important reset above —
   shorthand alone lost to SWELL's own !important longhand), sometimes a
   ::before/::after pseudo-element. Cover both. */
.bm-page.bm-page h1::before, .bm-page.bm-page h1::after,
.bm-page.bm-page h2::before, .bm-page.bm-page h2::after,
.bm-page.bm-page h3::before, .bm-page.bm-page h3::after,
.bm-page.bm-page h4::before, .bm-page.bm-page h4::after,
.bm-page.bm-page h5::before, .bm-page.bm-page h5::after,
.bm-page.bm-page h6::before, .bm-page.bm-page h6::after {
	content: none !important;
	display: none !important;
}
.bm-page ul,
.bm-page ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bm-page a {
	text-decoration: none;
	color: inherit;
}
.bm-page p {
	margin: 0 0 1rem;
}
/* SWELL applies a default margin-bottom to every .wp-block-group
   (~1em). Harmless for normal-flow cards, but it silently shifts
   any position:absolute decorative element (e.g. the hero monitor
   chrome) since the margin box still applies to inset/bottom
   positioning even out of flow. Reset it at the source. */
.bm-page .wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

/* Background gradient + grain texture, scoped to this page only
   (the original applied this to <body> sitewide; here it is
   deliberately limited to .bm-page so other SWELL pages are
   unaffected — see README for this design tradeoff). */
.bm-page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 80% 20%, #ffffff, #f9f8f6, #eae8e3),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	background-blend-mode: normal, multiply;
	opacity: 1;
}

.bm-page > * {
	position: relative;
	z-index: 1;
}

/* core/group always wraps its children in this auto-generated
   structural div (block.json's "layout" support), even when no
   "layout" attribute is set — it is not something we authored and
   it breaks every case where a bm-* class expects to flex/grid its
   own children directly (the grid/flex would only ever see this one
   wrapper as its sole child). display:contents removes its box from
   layout entirely so children behave as if they were direct children
   of the actual .bm-* element, exactly as authored. */
.bm-page .wp-block-group__inner-container {
	display: contents;
}

/* ------------------------------------------------------------
   1b. Three.js canvas mount point (from the Custom HTML block)
   ------------------------------------------------------------ */
#bm-canvas-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------
   2. Washi watermark text
   ------------------------------------------------------------ */
.bm-washi {
	--bm-washi-chars: 8;
	--bm-washi-header-h: 94px;
	position: fixed;
	writing-mode: vertical-rl;
	color: rgba(10, 0, 2, 0.07);
	font-size: calc((100vh - var(--bm-washi-header-h) - 3rem) / var(--bm-washi-chars));
	line-height: 1;
	font-weight: 800;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	top: calc(50% + (var(--bm-washi-header-h) / 2));
	left: 1rem;
	transform: translateY(-50%);
	display: none;
	margin: 0;
}
.bm-washi--br {
	--bm-washi-chars: 7;
	left: auto;
	right: 1rem;
}
@media (min-width: 1024px) {
	.bm-washi { display: block; }
}

/* ------------------------------------------------------------
   3. Reveal-on-scroll animation
   ------------------------------------------------------------ */
.bm-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.bm-reveal.bm-active {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------
   4. Cards / glassmorphism
   ------------------------------------------------------------ */
.bm-glass-card,
.bm-card,
.bm-plan-card,
.bm-work-card,
.bm-flow-step,
.bm-message-card,
.bm-contact-card {
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
	border-radius: 2rem;
	padding: 2rem;
}

.bm-card--wide {
	border-top: 4px solid var(--bm-dark);
}

/* Space above the 01/02/03 card row, below the intro card. */
.bm-concept-grid { margin-top: 3rem; }

/* Equal-height cards within a row: core/columns is a flex row and
   already stretches its .wp-block-column items by default, but the
   card itself (nested one level deeper) needs height:100% to follow
   through, plus flex so its own content can distribute vertically. */
.wp-block-columns { align-items: stretch !important; }
.wp-block-column > .bm-card,
.wp-block-column > .bm-work-card,
.wp-block-column > .bm-plan-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.wp-block-column > .bm-card {
	justify-content: flex-start;
}

.bm-lead {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bm-dark);
	border-left: 4px solid var(--bm-dark);
	padding-left: 1rem;
	margin-bottom: 3rem;
}
@media (min-width: 768px) { .bm-lead { font-size: 1.5rem; } }

.bm-section-heading.bm-section-heading {
	font-size: 2rem !important;
	font-weight: 900 !important;
	margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .bm-section-heading.bm-section-heading { font-size: 2.75rem !important; } }

/* オモイをカタチにする…: centered, brand red — the one section heading
   that isn't an English section label. */
.bm-section-heading--brand.bm-section-heading--brand {
	text-align: center;
	color: var(--bm-red);
}

/* Every English-word section heading (SERVICE/WORKS/PRICE/FLOW/MESSAGE/
   CONTACT) gets a black underline matching the heading color, sized to
   the text rather than the full row width. Excludes the concept
   heading above via :not(). */
.bm-section-header .bm-section-heading:not(.bm-section-heading--brand) {
	width: fit-content;
	border-bottom: 3px solid var(--bm-dark) !important;
	padding-bottom: 0.5rem !important;
}
#contact .bm-section-heading:not(.bm-section-heading--brand) {
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
	border-bottom: 3px solid var(--bm-dark) !important;
	padding-bottom: 0.5rem !important;
}

.bm-section-kicker {
	color: rgba(10, 0, 2, 0.5);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* No ruled line above/below the SERVICE/WORKS/FLOW heading row —
   just spacing before the content that follows. */
.bm-section-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
}
.bm-section-header .bm-section-heading { margin-bottom: 0; }
/* .bm-section-header is itself a .wp-block-group, so the reset above
   (".bm-page .wp-block-group{margin-bottom:0}") has equal specificity
   (two classes) and was winning on source order, silently zeroing this
   gap. Match that specificity here so this rule wins instead. */
.bm-page .bm-section-header {
	margin-bottom: 4rem;
}

/* Card / context heading sizes (h3) — themes don't style bare h3
   at a useful size, so every card heading needs an explicit rule.
   text-decoration/border-bottom:none guards against SWELL's default
   h3 underline/ruled-line treatment. */
.bm-card h3 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	margin-bottom: 0.75rem !important;
	text-decoration: none !important;
	border-bottom: none !important;
}
#service .bm-card h3 { font-size: 1.5rem !important; font-weight: 900 !important; line-height: 1.3; }
.bm-work-card h3 { font-size: 1.125rem !important; font-weight: 700 !important; margin: 0 !important; border-bottom: none !important; }
#message h3 { font-size: 1.5rem !important; font-weight: 900 !important; margin-bottom: 1rem !important; border-bottom: none !important; }
@media (min-width: 768px) { #message h3 { font-size: 1.875rem !important; } }

/* Buttons rows that should be centered (core/buttons is display:flex by
   default via block-library baseline CSS; we just set justify-content). */
.bm-btn-row-center.wp-block-buttons {
	justify-content: center;
}

.bm-option-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(10, 0, 2, 0.1);
	padding: 0.25rem 0.625rem;
	border-radius: 0.25rem;
	margin: 1.5rem 0 0.75rem;
}

/* ------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------ */
.bm-hero-frame {
	position: relative;
	width: 100%;
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	padding: 2.5rem 1.5rem;
	border-radius: 2.5rem;
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(2px);
	border: 1px solid rgba(10, 0, 2, 0.1);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
	text-align: center;
}
@media (min-width: 768px) {
	.bm-hero-frame { padding: 3.5rem 3rem; }
}
/* PC-monitor decorative bezel: a purely presentational overlay
   (aria-hidden, pointer-events:none, opacity:0.15) reproducing the
   original's absolutely-positioned frame/camera-dot/address-bar/
   stand chrome. Built from empty Group blocks — no real content. */
.bm-monitor-chrome {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.15;
}
.bm-monitor-chrome::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--bm-dark);
	border-radius: 2.1rem;
}
.bm-monitor-camera {
	position: absolute;
	top: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--bm-dark);
}
.bm-monitor-bar {
	position: absolute;
	top: 2rem;
	left: 1.5rem;
	right: 1.5rem;
	height: 1.5rem;
	border-bottom: 1px solid rgba(10, 0, 2, 0.4);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bm-monitor-dots {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}
.bm-monitor-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--bm-dark);
}
.bm-monitor-pill {
	margin-left: 0.75rem;
	width: 8rem;
	height: 0.625rem;
	border-radius: 999px;
	background: rgba(10, 0, 2, 0.3);
}
@media (min-width: 640px) { .bm-monitor-pill { width: 14rem; } }
.bm-monitor-label {
	font-size: 0.5625rem;
	font-weight: 700;
	font-family: monospace;
	letter-spacing: 0.2em;
	color: rgba(10, 0, 2, 0.6);
	margin: 0;
	white-space: nowrap;
}
.bm-monitor-stand-neck {
	position: absolute;
	bottom: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 7rem;
	height: 2.5rem;
	border: 2px solid var(--bm-dark);
	border-bottom: none;
	border-radius: 0.375rem 0.375rem 0 0;
	background: rgba(10, 0, 2, 0.05);
}
.bm-monitor-stand-base {
	position: absolute;
	bottom: -3rem;
	left: 50%;
	transform: translateX(-50%);
	width: 13rem;
	height: 0.5rem;
	border: 2px solid var(--bm-dark);
	border-radius: 999px;
	background: rgba(10, 0, 2, 0.2);
}
.bm-hero-content {
	position: relative;
	z-index: 1;
}
.bm-hero-title.bm-hero-title {
	font-size: clamp(2.25rem, 6vw, 4rem) !important;
	font-weight: 900 !important;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
}
.bm-hero-title .bm-accent-red { color: var(--bm-red); }
.bm-hero-sub.bm-hero-sub {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: rgba(10, 0, 2, 0.85);
	max-width: 42rem;
	margin: 0 auto 2.5rem;
	line-height: 1.8;
	text-align: center !important;
}

.bm-section {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 6rem;
	padding-bottom: 6rem;
}
@media (min-width: 768px) {
	.bm-section { padding-left: 2rem; padding-right: 2rem; }
}
/* Contact section (元は max-w-4xl) — the one intentionally-narrow
   section left, since a contact form reads better narrower. */
.bm-section--narrow { max-width: 896px; }
/* Sub-blocks that continue an existing section's flow without
   adding another full top/bottom section gap (e.g. 集客サポートプラン,
   which sits directly under the maintenance-plan cards in the original). */
.bm-section--tight { padding-top: 0; padding-bottom: 3rem; }

/* 料金プラン ①Webサイト制作 → ②保守更新運用プラン: these two are two
   separate .bm-section (6rem top + 6rem bottom = 12rem gap by default).
   Halve it since they're really one continuous "料金プラン" flow. */
#pricing { padding-bottom: 3rem; }
#plan-maintenance { padding-top: 3rem; }

/* Space below the ①②切り替えボタン row, before the ①Webサイト制作 content starts. */
.bm-plan-nav { margin-bottom: 3rem; }

.bm-cta-footnotes { max-width: 1280px; margin: 0 auto; }

.bm-hero-section {
	position: relative;
	overflow: hidden;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 7rem 1rem 4rem;
}
/* Rotating sunburst background, matching the original's
   repeating-conic-gradient + 180s spin animation. */
.bm-hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: repeating-conic-gradient(from 0deg, transparent 0deg 15deg, rgba(188, 0, 45, 0.035) 15deg 30deg);
	animation: bm-sunburst-spin 180s linear infinite;
}
@keyframes bm-sunburst-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.bm-hero-section > .wp-block-group {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* ------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------ */
.bm-page .wp-block-button__link {
	font-weight: 700;
	border-radius: 999px;
	padding: 1rem 2rem;
	transition: all 0.3s ease;
	border: 1px solid #fff;
}
.bm-btn-primary .wp-block-button__link {
	background: var(--bm-red);
	color: #fff;
}
.bm-btn-primary .wp-block-button__link:hover {
	background: var(--bm-dark);
	transform: scale(1.05);
}
.bm-btn-dark .wp-block-button__link {
	background: var(--bm-dark);
	color: #fff;
}
.bm-btn-dark .wp-block-button__link:hover {
	background: var(--bm-red);
	transform: scale(1.05);
}
.bm-btn-outline .wp-block-button__link {
	background: #fff;
	color: var(--bm-dark);
	border: 1px solid rgba(10, 0, 2, 0.2);
}
.bm-btn-outline .wp-block-button__link:hover {
	background: var(--bm-dark);
	color: #fff;
}
.bm-btn-arrow-down {
	display: inline-block;
	margin-left: 0.25rem;
	transition: transform 0.3s ease;
}
.wp-block-button__link:hover .bm-btn-arrow-down {
	transform: translateY(3px);
}

/* ------------------------------------------------------------
   7. Numbered badges / icon boxes
   ------------------------------------------------------------ */
.bm-badge-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	border: 2px solid rgba(10, 0, 2, 0.2);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.bm-badge-circle--accent {
	border-color: var(--bm-red);
	color: var(--bm-red);
	background: rgba(188, 0, 45, 0.1);
}

.bm-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.75rem;
	background: var(--bm-dark);
	color: #fff;
	font-size: 1.5rem;
}
/* .bm-icon-box is itself a .wp-block-group, so the reset above
   (".bm-page .wp-block-group{margin-bottom:0}") has equal specificity
   (two classes) and was winning on source order, zeroing this gap. */
.bm-page .bm-icon-box {
	margin-bottom: 1rem;
}
.bm-icon-box--outline {
	background: rgba(10, 0, 2, 0.05);
	border: 1px solid rgba(10, 0, 2, 0.1);
	color: var(--bm-dark);
	width: 3rem;
	height: 3rem;
	font-size: 1.25rem;
}

/* ------------------------------------------------------------
   8. Chips / tags (built as core/button, styled as static pills)
   ------------------------------------------------------------ */
.bm-chip-row .wp-block-button__link,
.bm-chip .wp-block-button__link {
	pointer-events: none;
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: #fff;
	color: var(--bm-dark);
	border: 1px solid rgba(10, 0, 2, 0.2);
}
.bm-chip--accent .wp-block-button__link {
	color: var(--bm-red);
	background: rgba(188, 0, 45, 0.05);
	border-color: rgba(188, 0, 45, 0.5);
}
.bm-chip--dark .wp-block-button__link {
	background: var(--bm-dark);
	color: #fff;
	border-color: var(--bm-dark);
}
.bm-chip--platform .wp-block-button__link {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}
.bm-chip--brand .wp-block-button__link {
	color: var(--bm-red);
	background: rgba(188, 0, 45, 0.1);
	border-color: rgba(188, 0, 45, 0.5);
}

/* ------------------------------------------------------------
   9. Works cards
   ------------------------------------------------------------ */
.bm-work-card { padding: 0; overflow: hidden; }
.bm-work-card .bm-work-img img {
	width: 100%;
	height: 14rem;
	object-fit: cover;
	display: block;
}
.bm-work-card .bm-work-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.bm-work-card .bm-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------
   10. Pricing plan cards
   ------------------------------------------------------------ */
.bm-plan-card { padding: 0; overflow: hidden; }
.bm-plan-card .bm-plan-head {
	padding: 2rem;
	text-align: center;
	border-bottom: 1px solid rgba(10, 0, 2, 0.1);
}
.bm-plan-card .bm-plan-pill {
	display: inline-block;
	background: var(--bm-accent-green);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.375rem 1.25rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.bm-plan-card .bm-plan-price {
	font-size: 1.875rem;
	font-weight: 900;
	color: var(--bm-accent-green);
	margin: 0 0 0.5rem;
	white-space: nowrap;
}
@media (min-width: 400px) {
	.bm-plan-card .bm-plan-price { font-size: 2.25rem; }
}
.bm-plan-card .bm-plan-price small {
	font-size: 1rem;
	font-weight: 700;
	color: var(--bm-dark);
	margin-left: 0.25rem;
}
.bm-plan-card--featured {
	border: 2px solid var(--bm-accent-orange);
}
.bm-plan-card--featured .bm-plan-pill { background: var(--bm-accent-orange); }
.bm-plan-card--featured .bm-plan-price { color: var(--bm-accent-orange); }
.bm-plan-card--premium { border: 2px solid var(--bm-red); }
.bm-plan-card--premium .bm-plan-pill { background: var(--bm-red); }
.bm-plan-card--premium .bm-plan-price { color: var(--bm-red); }

.bm-plan-card .bm-plan-list {
	list-style: none;
	margin: 0;
	padding: 0 1.5rem;
	flex: 1;
}
.bm-plan-card .bm-plan-list li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	padding: 0.85rem 0;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 700;
	color: rgba(10, 0, 2, 0.8);
}
.bm-plan-card .bm-plan-list li:last-child { border-bottom: none; }

.bm-plan-card .wp-block-details {
	border-top: 1px solid rgba(10, 0, 2, 0.1);
	background: rgba(10, 0, 2, 0.03);
	padding: 1.25rem 1.5rem;
	margin: 0;
}
.bm-plan-card .bm-fineprint-box {
	padding: 1rem 1.5rem;
	background: rgba(10, 0, 2, 0.03);
	border-top: 1px solid rgba(10, 0, 2, 0.08);
}
.bm-plan-card .bm-fineprint-box .bm-fineprint {
	font-size: 0.625rem;
	margin-bottom: 0.25rem;
}
.bm-plan-card .bm-fineprint-box .bm-fineprint:last-child { margin-bottom: 0; }

/* Horizontal-scroll row for maintenance plan cards */
.bm-scroll-row.wp-block-columns {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
}
.bm-scroll-row.wp-block-columns > .wp-block-column {
	flex: 0 0 85%;
	scroll-snap-align: center;
}
@media (min-width: 768px) {
	.bm-scroll-row.wp-block-columns {
		flex-wrap: wrap;
		overflow-x: visible;
	}
	.bm-scroll-row.wp-block-columns > .wp-block-column {
		flex: 1;
	}
}

/* ------------------------------------------------------------
   11. Details / accordion
   ------------------------------------------------------------ */
.bm-page .wp-block-details {
	border: 1px solid rgba(10, 0, 2, 0.15);
	border-radius: 0.75rem;
	background: #fff;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}
.bm-page .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}
.bm-page .wp-block-details summary::-webkit-details-marker { display: none; }
.bm-page .wp-block-details summary::after {
	content: "▾";
	float: right;
	transition: transform 0.3s ease;
}
.bm-page .wp-block-details[open] summary::after { transform: rotate(180deg); }

/* ------------------------------------------------------------
   12. Tables (pricing breakdowns)
   ------------------------------------------------------------ */
.bm-page .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
}
.bm-page .wp-block-table th,
.bm-page .wp-block-table td {
	padding: 0.75rem;
	text-align: left;
	border-bottom: 1px solid rgba(10, 0, 2, 0.08);
}
.bm-page .wp-block-table thead {
	background: rgba(10, 0, 2, 0.05);
	font-weight: 700;
}
.bm-page .wp-block-table td:last-child { font-weight: 700; white-space: nowrap; }

/* 全プランに含まれる内容: 2-column list on larger screens */
.bm-2col-list.bm-2col-list {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}
@media (min-width: 640px) {
	.bm-2col-list.bm-2col-list { grid-template-columns: 1fr 1fr; }
}
.bm-2col-list li { padding: 0; margin: 0; }

/* Breakdown tables (シングルページ/ベーシック・プレミアム/制作オプション):
   consistent item/price column ratio across all of them. */
.bm-breakdown-table table { table-layout: fixed; }
.bm-breakdown-table table th:first-child,
.bm-breakdown-table table td:first-child { width: 68%; }
.bm-breakdown-table table th:last-child,
.bm-breakdown-table table td:last-child { width: 32%; }
.bm-breakdown-table .bm-cell-note {
	display: block;
	font-size: 0.6875rem;
	font-weight: 400;
	color: rgba(10, 0, 2, 0.6);
	margin-top: 0.25rem;
}

/* 集客サポートプラン: dark label bar + table, wrapped in one rounded card */
.bm-cta-card {
	max-width: 1280px;
	margin: 0 auto 1.5rem;
	border: 1px solid rgba(10, 0, 2, 0.15);
	border-radius: 0.75rem;
	overflow: hidden;
	background: #fff;
}
.bm-cta-bar {
	background: var(--bm-dark);
	color: #fff;
	text-align: center;
	padding: 0.75rem;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	margin: 0;
}
.bm-cta-card .wp-block-table { margin: 0; }
.bm-cta-card .wp-block-table table tr:hover { background: rgba(10, 0, 2, 0.03); }
.bm-cta-card .wp-block-table table tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------
   13. Flow grid (2 cols mobile / 3 cols desktop — CSS Grid,
        not core/columns, since Columns can't switch column
        counts per breakpoint).
   ------------------------------------------------------------ */
.bm-flow-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	position: relative;
}
@media (min-width: 1024px) {
	.bm-flow-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.bm-flow-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 1rem;
}
@media (min-width: 768px) {
	.bm-flow-step { flex-direction: row; align-items: flex-start; text-align: left; padding: 1.5rem; }
}
.bm-flow-num {
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--bm-red);
	opacity: 0.8;
	margin: 0;
}
@media (min-width: 768px) { .bm-flow-num { min-width: 3rem; font-size: 1.875rem; } }
.bm-flow-label { font-weight: 700; font-size: 0.8125rem; margin: 0; }
@media (min-width: 768px) { .bm-flow-label { font-size: 1rem; } }
.bm-flow-step--last { border-top: 4px solid var(--bm-red); }
@media (min-width: 768px) {
	.bm-flow-step--last { border-top: none; border-left: 4px solid var(--bm-red); }
}
.bm-flow-step { border-radius: 0.75rem; }
@media (min-width: 768px) { .bm-flow-step { border-radius: 1rem; } }
/* Connecting horizontal line behind the cards, desktop only */
.bm-flow-grid::before {
	content: "";
	display: none;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(10, 0, 2, 0.1);
	z-index: -1;
	transform: translateY(-50%);
}
@media (min-width: 1024px) {
	.bm-flow-grid::before { display: block; }
}

/* ------------------------------------------------------------
   14. Message / quote box
   ------------------------------------------------------------ */
/* Fade-crossfade photo slider: N core/image blocks stacked with
   position:absolute inside one relative wrapper, each fading in/out
   on a staggered CSS animation loop — no JS needed. */
.bm-message-photo-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 0.75rem;
	overflow: hidden;
}
.bm-message-photo-wrap .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	animation: bm-photo-fade 10s ease-in-out infinite;
}
.bm-message-photo-wrap .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bm-message-photo-wrap .wp-block-image:nth-of-type(1) { animation-delay: 0s; }
.bm-message-photo-wrap .wp-block-image:nth-of-type(2) { animation-delay: 5s; }
@keyframes bm-photo-fade {
	0%, 3% { opacity: 0; }
	8%, 42% { opacity: 1; }
	47%, 100% { opacity: 0; }
}
.bm-quote-box {
	background: rgba(10, 0, 2, 0.05);
	border-left: 4px solid var(--bm-red);
	padding: 1rem;
	border-radius: 0.5rem;
}
.bm-fineprint {
	font-size: 0.75rem;
	color: rgba(10, 0, 2, 0.7);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.bm-note-box {
	background: rgba(188, 0, 45, 0.05);
	border-left: 4px solid var(--bm-red);
	border-radius: 0 1rem 1rem 0;
	padding: 1.25rem;
}
/* Notice box at the top of the 保守更新運用プラン plan cards — give it
   room to breathe before the plan cards start. */
#plan-maintenance .bm-note-box {
	margin-bottom: 3rem;
}

/* ------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------ */
.bm-footer {
	background: var(--bm-red);
	color: #fff;
	text-align: center;
	padding: 4rem 1rem;
	border-radius: 0;
}
.bm-footer h2 { color: #fff; }
.bm-footer p { color: rgba(255, 255, 255, 0.9); }
.bm-footer .bm-fineprint { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.1em; }

/* ------------------------------------------------------------
   16. Snow Monkey Forms — visual-parity styling
   Class names verified directly against the installed plugin's
   source (snow-monkey-forms 13.0.0 — src/blocks/item/save.js and
   App/Control/*.php), not guessed. See README for what was checked.
   ------------------------------------------------------------ */
.bm-page .snow-monkey-form {
	max-width: 100%;
}

/* Item block: one field row (label column + control column) */
.bm-page .smf-item {
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.bm-page .smf-item--divider {
	border-bottom: none;
	padding: 0.5rem 0;
}
.bm-page .smf-item__col--label {
	font-weight: 700;
	font-size: 0.875rem;
}
.bm-page .smf-item__label__text {
	font-weight: 700;
}
/* "必須" etc. is typed by the form author as bold/marked text inside
   the Item block's own label field — style it as a red pill here
   rather than auto-injecting content (avoids double badges). */
.bm-page .smf-item__label__text mark,
.bm-page .smf-item__label__text strong {
	display: inline-block;
	background: var(--bm-red);
	color: #fff;
	font-weight: 700;
	font-size: 0.625rem;
	border-radius: 0.25rem;
	padding: 0.1rem 0.5rem;
	margin-left: 0.375rem;
	vertical-align: middle;
}
.bm-page .smf-item__description,
.bm-page .smf-control-description {
	font-size: 0.75rem;
	color: rgba(10, 0, 2, 0.6);
	margin-top: 0.375rem;
}

/* Text / email / tel / url / textarea / select controls */
.bm-page .smf-text-control__control,
.bm-page .smf-textarea-control__control,
.bm-page .smf-select-control__control {
	width: 100%;
	padding: 1rem;
	background: #f9fafb;
	border: 1px solid rgba(10, 0, 2, 0.15);
	border-radius: 0.75rem;
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--bm-dark);
	transition: all 0.2s ease;
}
.bm-page .smf-text-control__control:focus,
.bm-page .smf-textarea-control__control:focus,
.bm-page .smf-select-control__control:focus {
	outline: none;
	border-color: var(--bm-red);
	box-shadow: 0 0 0 3px rgba(188, 0, 45, 0.15);
}

/* Radio / checkbox groups */
.bm-page .smf-radio-buttons-control__control,
.bm-page .smf-checkboxes-control__control {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.bm-page .smf-radio-buttons-control--horizontal .smf-radio-buttons-control__control {
	flex-direction: row;
	flex-wrap: wrap;
}
.bm-page .smf-control-fieldset {
	border: none;
	padding: 0;
	margin: 0;
}
.bm-page .smf-control-legend {
	font-weight: 700;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}
/* Individual radio/checkbox option row */
.bm-page .smf-label {
	display: block;
}
.bm-page .smf-label label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: #f9fafb;
	border: 1px solid rgba(10, 0, 2, 0.1);
	border-radius: 0.75rem;
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
}
.bm-page .smf-radio-button-control__control,
.bm-page .smf-checkbox-control__control {
	accent-color: var(--bm-red);
	width: 1rem;
	height: 1rem;
}

.bm-form-privacy-notice {
	background: #f9fafb;
	padding: 1.5rem;
	border-radius: 1rem;
	border: 1px solid rgba(10, 0, 2, 0.1);
	font-size: 0.75rem;
	color: rgba(10, 0, 2, 0.7);
	margin: 1.5rem 0;
}
.bm-form-privacy-notice p { margin-bottom: 0.5rem; }
.bm-form-privacy-notice p:last-child { margin-bottom: 0; }

/* Errors */
.bm-page .smf-error-messages {
	color: var(--bm-red);
	font-size: 0.75rem;
	font-weight: 700;
	margin-top: 0.375rem;
}

/* Submit / confirm / back buttons */
.bm-page .smf-action {
	text-align: center;
	padding-top: 1.5rem;
}
.bm-page .smf-button-control__control {
	border-radius: 999px;
	font-weight: 900;
	font-size: 1.125rem;
	padding: 1rem 4rem;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}
.bm-page .smf-button-control__control[data-action="complete"],
.bm-page .smf-button-control__control[data-action="confirm"] {
	background: var(--bm-red);
	color: #fff;
}
.bm-page .smf-button-control__control[data-action="complete"]:hover,
.bm-page .smf-button-control__control[data-action="confirm"]:hover {
	background: var(--bm-dark);
	transform: scale(1.03);
}
.bm-page .smf-button-control__control[data-action="back"] {
	background: #fff;
	color: var(--bm-dark);
	border: 1px solid rgba(10, 0, 2, 0.2);
}

/* ------------------------------------------------------------
   16. Global header & footer chrome (SWELL's site-wide <header> and
   <footer> — deliberately NOT scoped under .bm-page since these are
   the same on every page of the site).
   ------------------------------------------------------------ */
/* .c-gnav is the PC header nav — it exists twice in the DOM (the
   static .l-header AND the separate #fix_header.l-fixHeader that
   slides down on scroll, a sibling, not a descendant, of .l-header),
   plus the mobile slide-out menu renders yet another .c-spnav list.
   All three need covering; unscoped from any header ancestor so
   both .c-gnav instances match in one rule. */
.c-gnav,
.p-spMenu .c-spnav {
	font-family: 'Shippori Mincho', serif;
}

/* Bold menu text, and swap SWELL's default animated underline
   (.c-gnav a::after, scaleX 0→1 on hover) for a plain text-color
   change to the brand color. */
.c-gnav a {
	font-weight: 700 !important;
	transition: color 0.25s ease;
}
.c-gnav a::after {
	display: none !important;
}
.c-gnav > li:not(.-current) > a:hover {
	color: #bc002d !important;
}

/* The CONTACT <li> stretches to the full header height (SWELL's
   .c-gnav is display:flex, so every menu-item li matches its row
   height) and its <a> matches that height too — so a solid pill
   background there touches the header's top/bottom edge with no
   breathing room. Center the button within the row instead of
   letting it fill it. */
.c-gnav > li:has(> a[href="#contact"]) {
	display: flex;
	align-items: center;
}

/* CONTACT nav item as a solid pill button, matching the hero's
   "無料相談はこちら" (.bm-btn-primary) treatment, with a mail icon
   to the left of the label (row layout — SWELL's gnav links default
   to flex-direction:column for a stacked icon/label look). */
.c-gnav a[href="#contact"] {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	height: auto;
	gap: 0.4em;
	background: #bc002d;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 999px;
	padding: 0.6em 1.4em;
	font-weight: 700;
	transition: all 0.3s ease;
}
.c-gnav > li > a[href="#contact"]:hover {
	background: #0a0002;
	color: #fff !important;
	transform: scale(1.05);
}
.c-gnav a[href="#contact"]::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	order: -1;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hide the top bar (RSS + search icons) above the main header row. */
.l-header__bar {
	display: none !important;
}

/* SWELL's own footer copyright line (Customizer-configured, already
   reading "© 2026 Bright Man. ALL RIGHTS RESERVED.") sits directly
   below the Bright Man footer widget, on the same red footer
   background (--color_footer_bg) — style it to match instead of
   duplicating the text in the widget. */
.l-footer .copyright {
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: 'Shippori Mincho', serif;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}