/* Theme Name: 東京リプラス司法事務所 LP Theme URI: https://shihoshoshi-ewcsyasf.manus.space/ Author: Tokyo Replus Judicial Scrivener Office Description: 東京リプラス司法事務所の消費者被害救済ランディングページ用オリジナルテーマ。 Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 7.4 License: Proprietary Text Domain: shihoushoshi-lp */ /* Main bundled Tailwind CSS is enqueued separately (assets/css/main.css). */ /* ======================================================================== REBRAND — Tiffany teal base + dark red accent (2026-04). main.css already defines --primary / --secondary / --accent etc. in :root with boat-assist-like teal + orange. We override those tokens and remap the hard-coded hex classes scattered through the templates (bg-[#e60012] / bg-[#0f2350] / bg-[#ffcc00] etc.) so the whole LP retints without touching most HTML. ======================================================================== */ :root { /* === Final design system (refined per senior-UX brief 2026-04) === Color roles + spacing + radius tokens. Used everywhere; no per-component magic numbers if avoidable. */ --primary: #0A9690; --primary-foreground: #ffffff; --secondary: #0A9690; --secondary-foreground: #ffffff; --accent: #991b1b; --accent-foreground: #ffffff; --destructive: #991b1b; --destructive-foreground: #ffffff; --foreground: #334155; --background: #F5FBFA; --border: #D8E8E5; --input: #D8E8E5; --ring: #0A9690; --muted: #F8FAFC; --muted-foreground: #64748B; --ring-color: #0A9690; /* Brand palette — Tiffany green base + dark red accent + light yellow */ --brand-teal: #0A9690; /* MAIN — Tiffany aqua shift (was #0E8E84) */ --brand-teal-light: #15B8B0; /* lighter Tiffany for accents */ --brand-teal-dark: #088480; /* deep teal for CTAs */ --brand-teal-deeper: #066B68; /* darkest */ --brand-mint: #E5F8F6; /* section bg */ --brand-mint-soft: #F2FBF9; /* page / hero bg */ /* Orange variables retained for back-compat but remapped to teal-system (per client direction: minimize orange across the site) */ --brand-orange: #088480; /* was #FF8A3D — now dark teal */ --brand-orange-light:#0A9690; /* was #FF8A3D — now Tiffany */ --brand-orange-deep: #088480; /* was #F97316 — now dark teal */ --brand-orange-dark: #066B68; /* was #D95713 — now darkest teal */ --brand-yellow: #FFD84D; --brand-yellow-pale: #FFE680; /* lighter yellow per "薄黄色OK" */ --brand-border: #C9EAE6; --brand-border-strong:#9BD7CF; /* Accent red — dark red per client direction */ --brand-accent-red: #991b1b; --brand-accent-red-deep: #7f1d1d; /* Text */ --text-heading: #0F172A; --text-body: #334155; --text-muted: #64748B; --text-on-dark: #ffffff; --text-on-dark-muted: #E2E8F0; /* Spacing scale */ --section-pad-y-mobile: 3rem; /* 48px — original (mobile dynamic reverted) */ --section-pad-y-desk: 5.5rem; /* 88px */ --heading-mb: 1.75rem; /* 28px */ --card-gap: 1.25rem; /* 20px */ /* Radius scale */ --radius-card: 1rem; /* 16px */ --radius-input: 0.625rem; /* 10px */ --radius-pill: 999px; /* Shadow scale */ --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-card-hover: 0 14px 38px rgba(15, 23, 42, 0.12); --shadow-cta: 0 8px 0 var(--brand-orange-dark); --shadow-cta-press: 0 2px 0 var(--brand-orange-dark); /* Back-compat aliases for older rules */ --brand-red-dark: #0E8E84; --brand-red-deep: #0A6F68; } body { background: var(--brand-mint-soft); color: var(--text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- Arbitrary-hex Tailwind classes used inline → retint to new palette ---- Per new spec: - text/heading accents (was red #e60012) → #50bcaf main brand (light bg) - dark "navy" surfaces (#0f2350, #0a6972) → dark teal #2a7a73 - yellow #ffcc00 → pale yellow ribbon (kept as #ffe128) - hero pale-blue (#eef8ff) → mint #e8f5f3 soft section bg */ /* Bright red Tailwind class → restore as dark red accent (per client) */ .bg-\[\#e60012\] { background-color: var(--brand-accent-red) !important; } .text-\[\#e60012\] { color: var(--brand-accent-red) !important; } .border-\[\#e60012\] { border-color: var(--brand-accent-red) !important; } .bg-\[\#0f2350\] { background-color: var(--brand-teal-dark) !important; } .text-\[\#0f2350\] { color: var(--brand-teal-dark) !important; } .border-\[\#0f2350\] { border-color: var(--brand-teal-dark) !important; } .bg-\[\#0a6972\] { background-color: var(--brand-teal-dark) !important; } .text-\[\#0a6972\] { color: var(--brand-teal-dark) !important; } .border-\[\#0a6972\] { border-color: var(--brand-teal-dark) !important; } .bg-\[\#d0f0ec\] { background-color: var(--brand-mint) !important; } .bg-\[\#ffcc00\] { background-color: var(--brand-yellow-pale) !important; color: var(--brand-teal-dark) !important; } .text-\[\#ffcc00\] { color: var(--brand-yellow-pale) !important; } .border-\[\#ffcc00\] { border-color: var(--brand-teal-dark) !important; } .text-yellow-300, .text-yellow-400 { color: var(--brand-yellow-pale) !important; } .bg-yellow-300, .bg-yellow-400 { background-color: var(--brand-yellow-pale) !important; } .border-yellow-300, .border-yellow-400 { border-color: var(--brand-teal-dark) !important; } .bg-\[\#eef8ff\] { background-color: var(--brand-mint) !important; } .text-\[\#fef3c7\] { color: var(--brand-yellow) !important; } .border-\[\#fef3c7\] { border-color: var(--brand-yellow) !important; } .bg-\[\#fef3c7\] { background-color: var(--brand-yellow) !important; } /* Legacy orange hover fallback — remap to darker teal */ .hover\:bg-orange-600:hover { background-color: var(--brand-teal-dark) !important; } /* Blue-50 decorative blob in contact section — make it teal-tinted */ .bg-blue-50 { background-color: rgba(80, 188, 175, 0.08) !important; } /* "24時間受付中" badge — main brand teal, NOT orange (orange is buttons-only) */ .sticky-cta-bar .bg-secondary.-rotate-2 { background-color: var(--brand-teal) !important; } /* CTA buttons (mail, submit, "see all column") — orange gradient + hard shadow per spec #4 */ #site-header .site-header-cta__mail, .sticky-cta-bar button.bg-secondary:not(.-rotate-2), #section-contact #contact-submit, #section-column a.border-primary { background: linear-gradient(90deg, var(--brand-orange-light), var(--brand-orange-deep)) !important; background-image: linear-gradient(90deg, var(--brand-orange-light), var(--brand-orange-deep)) !important; color: #ffffff !important; border-color: transparent !important; font-weight: 800 !important; } #site-header .site-header-cta__mail:hover, .sticky-cta-bar button.bg-secondary:hover, #section-contact #contact-submit:hover:not(:disabled), #section-column a.border-primary:hover { background: linear-gradient(90deg, var(--brand-orange-deep), var(--brand-orange-light)) !important; color: #ffffff !important; } /* CTA hard offset shadow */ #site-header .site-header-cta__mail, .sticky-cta-bar button.bg-secondary.rounded-full, .sticky-cta-bar button.bg-secondary:not(.rounded-full):not(.-rotate-2) { box-shadow: 0 0.4rem 0 var(--brand-orange-dark) !important; } #section-contact #contact-submit { box-shadow: 0 0.5rem 0 var(--brand-orange-dark) !important; border-radius: 999px !important; font-size: 1.1rem !important; font-weight: 900 !important; letter-spacing: 0.06em; } #section-column a.border-primary { box-shadow: 0 0.4rem 0 var(--brand-orange-dark) !important; border-radius: 999px !important; } /* Hero bottom "解決！" bright red stroke already handled via remap. */ /* ======================================================================== MISSING UTILITIES — these arbitrary-value Tailwind classes are used in the new brand markup but aren't in the pre-baked main.css bundle, so we hand-author them here. Without these, flow pills render naked, teal borders don't appear, etc. ======================================================================== */ /* Brand color arbitrary classes */ .bg-\[\#0a6972\] { background-color: var(--brand-teal) !important; } .bg-\[\#50bcaf\] { background-color: var(--brand-teal-light) !important; } .bg-\[\#d0f0ec\] { background-color: var(--brand-mint) !important; } .text-\[\#0a6972\] { color: var(--brand-teal) !important; } .text-\[\#50bcaf\] { color: var(--brand-teal-light) !important; } .text-\[\#991b1b\] { color: var(--brand-red-dark) !important; } .text-\[\#fef3c7\] { color: var(--brand-yellow-pale) !important; } .border-\[\#0a6972\] { border-color: var(--brand-teal) !important; } .border-\[\#50bcaf\] { border-color: var(--brand-teal-light) !important; } .border-\[\#fef3c7\] { border-color: var(--brand-yellow-pale) !important; } .border-\[\#991b1b\] { border-color: var(--brand-red-dark) !important; } /* Pill shape radii used on flow cards */ .rounded-r-\[2\.5rem\] { border-top-right-radius: 2.5rem; border-bottom-right-radius: 2.5rem; } .rounded-l-\[2\.5rem\] { border-top-left-radius: 2.5rem; border-bottom-left-radius: 2.5rem; } .rounded-r-\[3rem\] { border-top-right-radius: 3rem; border-bottom-right-radius: 3rem; } .rounded-l-\[3rem\] { border-top-left-radius: 3rem; border-bottom-left-radius: 3rem; } .rounded-r-\[4rem\] { border-top-right-radius: 4rem; border-bottom-right-radius: 4rem; } .rounded-l-\[4rem\] { border-top-left-radius: 4rem; border-bottom-left-radius: 4rem; } @media (min-width: 768px) { .md\:rounded-r-\[4rem\] { border-top-right-radius: 4rem; border-bottom-right-radius: 4rem; } .md\:rounded-l-\[4rem\] { border-top-left-radius: 4rem; border-bottom-left-radius: 4rem; } .md\:rounded-r-\[3rem\] { border-top-right-radius: 3rem; border-bottom-right-radius: 3rem; } .md\:rounded-l-\[3rem\] { border-top-left-radius: 3rem; border-bottom-left-radius: 3rem; } } /* Hard offset shadow utilities */ .shadow-\[0\.35rem_0\.35rem_0_rgba\(0\,0\,0\,0\.22\)\] { box-shadow: 0.35rem 0.35rem 0 rgba(0, 0, 0, 0.22); } .shadow-\[0\.4rem_0\.4rem_0_rgba\(0\,0\,0\,0\.2\)\] { box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.2); } /* Widths used in pill layout */ .w-\[88\%\] { width: 88%; } @media (min-width: 768px) { .md\:w-\[88\%\] { width: 88%; } .md\:ml-auto { margin-left: auto; } .md\:pr-10 { padding-right: 2.5rem; } .md\:pl-10 { padding-left: 2.5rem; } } /* Letter-spacing used on decorative section labels */ .tracking-\[0\.3em\] { letter-spacing: 0.3em; } /* Small label font-sizes */ .text-\[11px\] { font-size: 11px; } @media (min-width: 768px) { .md\:text-\[11px\] { font-size: 11px; } } /* Primary/opacity helpers used in card placeholders */ .text-primary\/40 { color: color-mix(in srgb, var(--primary) 40%, transparent) !important; } .text-primary\/30 { color: color-mix(in srgb, var(--primary) 30%, transparent) !important; } .bg-primary\/10 { background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; } .from-primary\/10 { --tw-gradient-from: color-mix(in srgb, var(--primary) 10%, transparent); } .to-accent\/10 { --tw-gradient-to: color-mix(in srgb, var(--accent) 10%, transparent); } .text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; } .bg-white\/95 { background-color: rgba(255, 255, 255, 0.95) !important; } /* Spacing and padding utilities used in new HTML */ .space-y-5 > * + * { margin-top: 1.25rem; } .space-y-7 > * + * { margin-top: 1.75rem; } @media (min-width: 768px) { .md\:space-y-7 > * + * { margin-top: 1.75rem; } } .mt-1\.5 { margin-top: 0.375rem; } .mt-3 { margin-top: 0.75rem; } .mb-2 { margin-bottom: 0.5rem; } /* Larger text sizes for hero-level (used in flow/demo cards) */ @media (min-width: 768px) { .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } } /* Width/height utilities not in compiled CSS */ .w-20 { width: 5rem; } .h-20 { height: 5rem; } .w-24 { width: 6rem; } .h-24 { height: 6rem; } /* ============================================================= DIAL UP THE TEAL — user requested 2× the Tiffany-blue presence ============================================================= */ /* Section-specific mint variants (boat-assist's exact #d0f0ec as base) */ :root { --brand-mint-soft: #e6f5f0; /* slightly subtler variant for secondary sections */ } /* Hero person image — clean teal stage block (refined for premium feel) */ #section-hero { position: relative; } #section-hero > .container > .flex.flex-col.lg\:flex-row > .w-full.lg\:w-\[45\%\] { position: relative; } #section-hero > .container > .flex.flex-col.lg\:flex-row > .w-full.lg\:w-\[45\%\]::before { content: ""; position: absolute; right: 0; bottom: 0; width: 88%; height: 78%; background: linear-gradient(160deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%); border-radius: 2.5rem 0 0 0; box-shadow: var(--shadow-card); z-index: 0; pointer-events: none; } #section-hero img[alt="頼れる司法書士"] { position: relative; z-index: 1; } @media (max-width: 1023.98px) { #section-hero > .container > .flex.flex-col.lg\:flex-row > .w-full.lg\:w-\[45\%\]::before { width: 84%; height: 72%; border-radius: 1.5rem 0 0 0; } } /* ---- Hero text — navy body + teal/orange accents per spec #3 ---- */ #section-hero h2.text-gray-700 { color: var(--text-muted) !important; /* #64748B */ text-shadow: none !important; } #section-hero h1 { color: var(--text-heading) !important; /* #0F172A navy */ text-shadow: none !important; } #section-hero h1 .text-\[\#e60012\] { color: var(--brand-teal) !important; /* #0F8F83 main green */ text-shadow: none !important; -webkit-text-stroke: 0 !important; } /* "解決！" big block — flip to ORANGE for variety per spec */ #section-hero h1 span.block.mt-2 { color: var(--brand-orange) !important; } /* Yellow under-strip below "解決！" — boat-assist gold */ #section-hero .bg-yellow-300\/50 { background-color: var(--brand-yellow) !important; opacity: 0.85; } /* Hero bottom banner "まずはお気軽にご相談ください。" — main brand teal block sandwiched between the hero (mint) and the ticker (dark teal). */ #section-hero > .bg-\[\#0f2350\] { background: var(--brand-teal) !important; border-top: 3px solid var(--brand-teal-dark) !important; border-bottom: 3px solid var(--brand-teal-dark) !important; } #section-hero > .bg-\[\#0f2350\] p { color: #ffffff !important; animation: none !important; } #section-hero > .bg-\[\#0f2350\] .text-yellow-300 { color: var(--brand-yellow) !important; border-bottom: 3px solid var(--brand-yellow); padding-bottom: 2px; } #section-hero > .bg-\[\#0f2350\]::after { background: linear-gradient(100deg, transparent 40%, rgba(255, 225, 40, 0.18) 50%, transparent 60%) !important; } /* Column section — boat-assist pale mint */ #section-column { background: var(--brand-mint) !important; } /* ======================================================================== #50bcaf DOMINANCE — promote the mid teal from "used sparingly" to "main brand color across the LP". Applied as full-section backgrounds on section-cases & section-contact, plus extra decorative bands. ======================================================================== */ /* === Section system: clean alternating bg + consistent vertical padding === */ .bg-\[\#eef8ff\] { background-color: var(--brand-mint-soft) !important; } /* hero */ #section-hero, #section-reasons, #section-cases, #section-column, #section-flow, #section-faq, #section-contact { padding-top: var(--section-pad-y-mobile) !important; padding-bottom: var(--section-pad-y-mobile) !important; } @media (min-width: 768px) { #section-hero, #section-reasons, #section-cases, #section-column, #section-flow, #section-faq, #section-contact { padding-top: var(--section-pad-y-desk) !important; padding-bottom: var(--section-pad-y-desk) !important; } } /* Hero keeps its image-end alignment behaviour from Tailwind, so undo bottom-pad */ #section-hero { padding-bottom: 0 !important; } @media (min-width: 1024px) { #section-hero { padding-bottom: 0 !important; } } #section-reasons { background: #ffffff !important; } #section-cases { background: var(--brand-mint) !important; border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border); } #section-column { background: #ffffff !important; } #section-faq { /* stripe pattern set below in FAQ block */ } #section-contact { background: var(--brand-mint) !important; border-top: 1px solid var(--brand-border); } /* Flow uses bg-[#0a6972] in HTML → remapped to deep teal */ /* Hero bottom band "まずはお気軽にご相談ください" — currently dark teal gradient, flip to mid teal #50bcaf so the main brand color appears immediately under the hero */ #section-hero > .bg-\[\#0f2350\] { background: linear-gradient(90deg, var(--brand-teal-light) 0%, var(--brand-teal-light) 100%) !important; border-top: 3px solid var(--brand-teal); border-bottom: 3px solid var(--brand-teal); } #section-hero > .bg-\[\#0f2350\]::after { background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); } /* News-ticker — stays dark teal for contrast but give edges #50bcaf outlines */ #news-ticker { border-top: 5px solid var(--brand-teal-light) !important; border-bottom: 5px solid var(--brand-teal-light) !important; } /* Footer top stripe — use #50bcaf for more brand presence */ #site-footer { border-top: 6px solid var(--brand-teal-light) !important; } /* Section rhythm dividers — short #50bcaf accent band between major sections */ #section-reasons + #section-cases, #section-cases + #section-column, #section-column + #section-flow, #section-faq + #section-contact { position: relative; } /* FAQ diagonal stripes — soft mint stripes per spec */ #section-faq { background: repeating-linear-gradient( -45deg, #ffffff, #ffffff 0.15rem, var(--brand-mint) 0.15rem, var(--brand-mint) 0.85rem ) !important; } /* Header bottom border — use #50bcaf for stronger brand presence under fold */ #site-header { border-bottom: 3px solid var(--brand-teal-light) !important; } /* Problem section ("こんな心当たり") — white with visible teal top/bottom rails */ #section-reasons { background: #ffffff; border-top: 6px solid var(--brand-teal-light); border-bottom: 6px solid var(--brand-teal-light); } /* Contact form card wrapper — subtle mint inner so the form card pops */ #section-contact { background: var(--brand-mint) !important; } /* Footer — inject a teal top stripe so the brand color caps the page */ #site-footer { border-top: 6px solid var(--brand-teal) !important; } /* News-ticker wrap — heavier teal presence */ #news-ticker { box-shadow: inset 0 -2px 0 rgba(184, 229, 220, 0.25); } /* Every section's container gets a subtle mint glow ring on top for rhythm */ #section-cases, #section-contact { border-top: 3px solid var(--brand-teal); } /* ======================================================================== BOAT-ASSIST POLISH — push the design harder toward the reference site's print-stamp aesthetic: hard offset shadows everywhere, decorated section headings, accent bars on list items, and more dramatic card framing. ======================================================================== */ /* CTA hard offset shadow — single, consistent, only on the orange CTAs */ #section-contact #contact-submit, #site-header .site-header-cta__mail, .sticky-cta-bar button.bg-secondary:not(.-rotate-2), #section-column a.border-primary { box-shadow: var(--shadow-cta) !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important; } #section-contact #contact-submit:hover:not(:disabled), #site-header .site-header-cta__mail:hover, .sticky-cta-bar button.bg-secondary:hover, #section-column a.border-primary:hover { transform: translateY(2px); box-shadow: var(--shadow-cta-press) !important; } /* LINE green buttons — same hard-offset 3D shadow style as the orange mail button so the LINE/Mail pair feels matched (header + sticky CTA bar) */ #site-header a.bg-\[\#06C755\], .sticky-cta-bar a.bg-\[\#06C755\] { box-shadow: 0 0.4rem 0 #047a35 !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important; } #site-header a.bg-\[\#06C755\]:hover, .sticky-cta-bar a.bg-\[\#06C755\]:hover { transform: translateY(2px); box-shadow: 0 0.15rem 0 #047a35 !important; } /* Primary "すべてのニュースを見る" button with primary border — teal offset shadow */ #section-column a.border-primary { box-shadow: 0.25rem 0.25rem 0 var(--brand-teal); transition: transform 0.12s ease, box-shadow 0.12s ease; } #section-column a.border-primary:hover { transform: translate(0.1rem, 0.1rem); box-shadow: 0.15rem 0.15rem 0 var(--brand-teal); } /* Contact form submit — large red stamp button */ #section-contact #contact-submit { border-radius: 0.5rem !important; box-shadow: 0.4rem 0.4rem 0 #ce5300 !important; transition: transform 0.12s ease, box-shadow 0.12s ease !important; animation: none !important; /* remove old pulsing glow, replace with stamp */ } #section-contact #contact-submit:hover:not(:disabled) { transform: translate(0.15rem, 0.15rem) !important; box-shadow: 0.25rem 0.25rem 0 #ce5300 !important; } #section-contact #contact-submit:active:not(:disabled) { transform: translate(0.4rem, 0.4rem) !important; box-shadow: 0 0 0 #ce5300 !important; } /* ---- 2. NEW 4-reasons cards — boat-assist 最適な理由 style ---- Each card: corner number badge (dark red) + big teal icon + small label + big emphasis copy. Hard teal drop shadow. Minimal chrome. */ .reason-grid { align-items: stretch; } .reason-card { position: relative; background: #ffffff; border: 1px solid var(--brand-border); border-radius: var(--radius-card); padding: 1rem 0.6rem 0.85rem; text-align: center; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; overflow: visible; } .reason-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } /* Corner number badge */ .reason-card__num { position: absolute; top: -0.45rem; left: -0.4rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.3rem; background: var(--brand-red-dark); color: #ffffff; font-family: "Lato", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 0.68rem; letter-spacing: 0.02em; border: 2px solid #ffffff; border-radius: 0.3rem; box-shadow: 0.12rem 0.12rem 0 var(--brand-teal); } /* Icon disc */ .reason-card__icon { width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--brand-mint); color: var(--brand-teal); display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; border: 2px solid var(--brand-teal); } .reason-card__icon svg { width: 1.4rem; height: 1.4rem; stroke-width: 2.4; } .reason-card__icon--text { font-family: "Lato", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 1.2rem; color: var(--brand-orange); letter-spacing: -0.02em; } /* Single big message — replaces label + body, simpler & bolder */ .reason-card__label { font-size: 0.55rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.16em; margin-top: 0.15rem; display: block; } .reason-card__body { font-size: 0.85rem; font-weight: 800; color: var(--text-heading); line-height: 1.25; margin-top: 0.05rem; } .reason-card__body strong { display: inline-block; font-size: 1em; font-weight: 900; color: var(--brand-teal); border-bottom: 2px solid var(--brand-yellow); padding-bottom: 1px; } /* Desktop — bigger icons + bigger body for stronger trust badges */ @media (min-width: 768px) { .reason-card { padding: 1.1rem 0.8rem 0.95rem; } .reason-card__num { min-width: 2rem; height: 2rem; font-size: 0.95rem; top: -0.7rem; left: -0.55rem; } .reason-card__icon { width: 3.4rem; height: 3.4rem; } .reason-card__icon svg { width: 1.85rem; height: 1.85rem; } .reason-card__icon--text { font-size: 1.55rem; } .reason-card__label { font-size: 0.63rem; } .reason-card__body { font-size: 0.95rem; } } /* Tighten the wrapper margins and the title block above the cards */ #section-hero .relative.mt-4.mb-8 { margin-top: 0.5rem; margin-bottom: 0.75rem; } @media (min-width: 1024px) { #section-hero .relative.mt-4.mb-8 { margin-bottom: 0; } } #section-hero .relative.mt-4.mb-8 > .text-center.mb-5 { margin-bottom: 0.5rem !important; } @media (min-width: 768px) { #section-hero .relative.mt-4.mb-8 > .text-center.mb-5 { margin-bottom: 0.6rem !important; } } #section-hero .relative.mt-4.mb-8 > .text-center > span { font-size: 0.6rem !important; margin-bottom: 0 !important; } #section-hero .relative.mt-4.mb-8 > .text-center > h3 { font-size: 0.95rem !important; line-height: 1.25 !important; } @media (min-width: 768px) { #section-hero .relative.mt-4.mb-8 > .text-center > span { font-size: 0.7rem !important; } #section-hero .relative.mt-4.mb-8 > .text-center > h3 { font-size: 1.2rem !important; } } /* Tighter grid gap between the 4 cards */ .reason-grid { gap: 0.55rem !important; } @media (min-width: 768px) { .reason-grid { gap: 0.75rem !important; } } /* Also pull the grid top-padding (added earlier for the old skewed ribbon that no longer exists) */ #section-hero .relative > .grid.grid-cols-2 { padding-top: 0 !important; } @media (min-width: 768px) { #section-hero .relative > .grid.grid-cols-2 { padding-top: 0.5rem !important; } } @media (min-width: 1024px) { #section-hero .relative > .grid.grid-cols-2 { padding-top: 0.5rem !important; } } /* ---- 3. Section headings — clip-path triangle + stamp frame ---- */ /* Generic decoration for major sections */ #section-cases .text-center.mb-10, #section-flow .text-center.mb-10, #section-column .text-center.mb-8, #section-faq .text-center.mb-10, #section-contact .bg-primary { position: relative; } #section-cases .text-center.mb-10::before, #section-flow .text-center.mb-10::before, #section-column .text-center.mb-8::before, #section-faq .text-center.mb-10::before { content: ""; display: block; width: 1.4rem; height: 0.9rem; margin: 0 auto 0.75rem; background: var(--brand-red-dark); clip-path: polygon(0 0, 100% 0, 50% 100%); } /* Dark-teal section (flow) — triangle becomes pale yellow */ #section-flow .text-center.mb-10::before { background: var(--brand-yellow-pale); } /* Section h2 — clean underline only (premium, not stamp-like) */ #section-cases h2 span, #section-flow h2 span, #section-faq h2 span, #section-column h2 span { position: relative; display: inline-block; padding-bottom: 0.4rem; background: transparent; border: 0; border-bottom: 4px solid var(--brand-yellow); border-radius: 0; color: var(--text-heading); } #section-flow h2 span { color: #ffffff; border-bottom-color: var(--brand-yellow); } #section-cases h2, #section-column h2, #section-faq h2 { color: var(--text-heading) !important; font-size: 2.1rem; letter-spacing: -0.01em; line-height: 1.2; } @media (min-width: 768px) { #section-cases h2, #section-column h2, #section-faq h2 { font-size: 2.45rem; } } #section-flow h2 { color: #ffffff !important; font-size: 2.1rem; letter-spacing: -0.01em; line-height: 1.2; } @media (min-width: 768px) { #section-flow h2 { font-size: 2.45rem; } } /* Section title margin per design tokens */ #section-cases > .container > .text-center, #section-column > .container > .text-center, #section-flow > .container > .text-center, #section-faq > .container > .text-center { margin-bottom: var(--heading-mb) !important; } @media (min-width: 768px) { #section-cases > .container > .text-center, #section-column > .container > .text-center, #section-flow > .container > .text-center, #section-faq > .container > .text-center { margin-bottom: 2.25rem !important; } } /* ---- 4. "こんな心当たり" checkbox cards — teal left accent bar ---- */ #section-reasons [class*="bg-white"][class*="border-gray-300"][class*="hover:border-red-300"] { border: 1px solid #e5e7eb !important; border-left: 4px solid var(--brand-teal) !important; padding-left: 0.9rem !important; } #section-reasons [class*="bg-white"][class*="border-gray-300"][class*="hover:border-red-300"]:hover { border-left-color: var(--brand-red-dark) !important; background: rgba(208, 240, 236, 0.35) !important; } /* ---- 5. Flow pill cards — deeper shadow + wider pill ---- */ #section-flow ul > li { box-shadow: 0.5rem 0.5rem 0 rgba(0,0,0,0.3) !important; border: 2px solid rgba(255,255,255,0.15); } /* ---- 6. Case study carousel cards — stamp frame ---- */ #section-cases [data-slot="card"] { border: 2px solid var(--brand-teal) !important; border-radius: 0.5rem !important; box-shadow: 0.5rem 0.5rem 0 var(--brand-teal) !important; } #section-cases [data-slot="card"]:hover { box-shadow: 0.75rem 0.75rem 0 var(--brand-teal) !important; } /* ---- 7. FAQ accordion — teal left accent ---- */ #section-faq [data-animate][class*="bg-white"][class*="rounded-lg"] { border: 1px solid #e5e7eb !important; border-left: 4px solid var(--brand-teal) !important; border-radius: 0.25rem !important; } #section-faq [data-animate][class*="bg-white"][class*="rounded-lg"]:hover { border-left-color: var(--brand-red-dark) !important; } /* ---- 8. Column (blog) preview cards — stamp frame ---- */ #section-column .column-card { border: 2px solid var(--brand-teal) !important; border-radius: 0.5rem !important; box-shadow: 0.35rem 0.35rem 0 var(--brand-teal) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } #section-column .column-card:hover { transform: translate(-2px, -2px); box-shadow: 0.55rem 0.55rem 0 var(--brand-teal) !important; } /* ---- 9. Hero "解決！" giant text — stamp shadow ---- */ #section-hero h1 .block.mt-2 { text-shadow: 0.3rem 0.3rem 0 rgba(10, 105, 114, 0.2), 0.15rem 0.15rem 0 rgba(10, 105, 114, 0.12); } /* ---- 10. Hero payable bubble (teal) — dark-red offset shadow stamp ---- */ #section-hero .bg-\[\#0a6972\].text-white { box-shadow: 0.4rem 0.4rem 0 var(--brand-red-dark) !important; border: 2px solid var(--brand-yellow-pale); } /* ---- 11. News ticker — pale-yellow top/bottom borders (boat-assist's gold-bar feel) ---- */ #news-ticker { border-top: 4px solid var(--brand-yellow-pale) !important; border-bottom: 4px solid var(--brand-yellow-pale) !important; } /* ---- 12. Contact form card wrapper — stamp frame ---- */ #section-contact .bg-white.rounded-2xl { border: 3px solid var(--brand-teal) !important; border-radius: 0.75rem !important; box-shadow: 0.5rem 0.5rem 0 var(--brand-teal) !important; } /* ---- 13. Sticky CTA bar — bold top border + heavier dropshadow ---- */ .sticky-cta-bar { border-top: 4px solid var(--brand-red-dark) !important; } /* ---- 14. Contact form header "無料相談フォーム" — make it punchy like boat-assist ---- */ #section-contact .bg-primary.text-white { border-bottom: 4px solid var(--brand-red-dark); } /* ---- 15. Problem section heading — bolder framing, stamp ---- */ #section-reasons h2.bg-\[\#e60012\] { box-shadow: 0.4rem 0.4rem 0 var(--brand-teal) !important; border: 2px solid var(--brand-red-dark); } /* ---- 16. 解決事例 card header — tighter, bolder framing ---- */ #section-cases [data-slot="card"] .bg-gradient-to-r { border-bottom: 3px solid var(--brand-red-dark); } /* (Removed: oversized English watermark decor behind section headings.) */ #section-reasons > .container > .text-center, #section-cases > .container > .text-center, #section-column > .container > .text-center, #section-flow > .container > .text-center, #section-faq > .container > .text-center, #section-contact > .container > .max-w-4xl > .bg-primary { position: relative; z-index: 1; } /* Headings stay above any decorative pseudo-elements */ #section-hero h1, #section-hero h2, #section-reasons h2, #section-cases h2, #section-column h2, #section-flow h2, #section-faq h2 { position: relative; z-index: 2; } /* Section relative positioning (still needed for the giant-bg-text pseudo) */ #section-reasons, #section-cases, #section-column, #section-flow, #section-faq, #section-contact { position: relative; } /* Decorative corner brackets removed for cleaner premium feel */ /* ======================================================================== BIG NUMBERS (#2) — push existing numeric badges harder ======================================================================== */ .reason-card__num { font-size: 0.85rem; min-width: 1.7rem; height: 1.7rem; border-radius: 0.4rem; box-shadow: 0.2rem 0.2rem 0 var(--brand-teal-dark); } @media (min-width: 768px) { .reason-card__num { font-size: 1rem; min-width: 2rem; height: 2rem; } } /* ======================================================================== HERO STATS — boat-assist-style "数字を主役級に" implementation room ======================================================================== */ #section-hero .hero-stats { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } #section-hero .hero-stat { background: #ffffff; border: 2px solid var(--brand-teal); border-radius: 0.5rem; padding: 0.6rem 0.4rem 0.55rem; text-align: center; box-shadow: 0.25rem 0.25rem 0 var(--brand-teal); transition: transform 0.2s ease, box-shadow 0.2s ease; } #section-hero .hero-stat:hover { transform: translate(-2px, -2px); box-shadow: 0.4rem 0.4rem 0 var(--brand-teal); } #section-hero .hero-stat__num { font-family: "Lato", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 1.85rem; line-height: 1; color: var(--brand-teal); letter-spacing: -0.02em; } #section-hero .hero-stat__num span { font-size: 0.55em; margin-left: 0.1em; color: var(--brand-teal-dark); } #section-hero .hero-stat__label { margin-top: 0.25rem; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.16em; color: var(--text-muted); } @media (min-width: 768px) { #section-hero .hero-stats { gap: 0.65rem; margin-top: 1.2rem; } #section-hero .hero-stat { padding: 0.85rem 0.5rem 0.7rem; } #section-hero .hero-stat__num { font-size: 2.4rem; } #section-hero .hero-stat__label { font-size: 0.65rem; } } /* Flow numbers ① ② ③ — supersize for "数字を主役級に" */ #section-flow ul > li .text-4xl, #section-flow ul > li .md\:text-5xl { font-size: 3.5rem !important; line-height: 1 !important; } @media (min-width: 768px) { #section-flow ul > li .md\:text-5xl, #section-flow ul > li .text-4xl { font-size: 4.5rem !important; } } /* Subtle "shine" sweep — limited to the primary submit CTA only. Removed from header, sticky CTA, cards, flow pills (was too noisy). */ @keyframes shine { 20% { left: 100%; } 100% { left: 100%; } } #section-contact #contact-submit { position: relative; overflow: hidden; isolation: isolate; } #section-contact #contact-submit::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 75%); transform: skewX(-15deg); animation: shine 3s linear infinite; pointer-events: none; z-index: 1; } #section-contact #contact-submit > * { position: relative; z-index: 2; } /* ===== News ticker (marquee) ===== */ #news-ticker .ticker-track { width: max-content; animation: ticker-scroll 40s linear infinite; } #news-ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker-scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } /* ===== Scroll-triggered reveal animations ===== */ [data-animate] { opacity: 0; will-change: transform, opacity; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } [data-animate="fade-up"] { transform: translate3d(0, 40px, 0); } [data-animate="fade-down"] { transform: translate3d(0, -40px, 0); } [data-animate="fade-left"] { transform: translate3d(40px, 0, 0); } [data-animate="fade-right"] { transform: translate3d(-40px, 0, 0); } [data-animate="zoom-in"] { transform: scale(0.92); } [data-animate="zoom-out"] { transform: scale(1.06); } [data-animate].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* ===== Brand logo (header / footer) — Tailwind's h-20/h-24/etc aren't in the compiled CSS, so size the logo explicitly via dedicated classes. ===== */ .brand-logo__img { height: 4rem; /* 64px — mobile */ width: auto; max-width: none; } @media (min-width: 768px) { .brand-logo__img { height: 6rem; /* 96px — PC */ } } @media (min-width: 1024px) { .brand-logo__img { height: 6.5rem; /* 104px — large screens */ } } .brand-logo-footer__img { height: 4.5rem; /* 72px */ width: auto; max-width: none; } @media (min-width: 768px) { .brand-logo-footer__img { height: 5.5rem; /* 88px */ } } /* ===== Chatbot toggle / panel — explicit position overrides ===== The specific Tailwind bottom utilities used on this button aren't in the compiled CSS, so `bottom` was never actually set and the fixed element drifted to the top of the viewport. Apply bottom/right explicitly here. Position above the sticky CTA bar to avoid overlap. */ #chatbot-toggle, #chatbot-panel { bottom: 5.5rem; /* 88px — mobile: clears the 2-col CTA bar (~72px) */ right: 1rem; /* 16px */ } @media (min-width: 768px) { #chatbot-toggle, #chatbot-panel { bottom: 6.5rem; /* 104px — PC: clears the full CTA bar (~80px) */ right: 1.5rem; /* 24px */ } } /* ===== Sticky CTA bar (floating bottom bar) ===== */ .sticky-cta-bar, #chatbot-toggle { animation: sticky-cta-slideup 0.3s ease-out both; } .sticky-cta-bar.is-closing { animation: sticky-cta-slidedown 0.3s ease-in forwards; } .sticky-cta-bar.is-hidden { display: none !important; } @keyframes sticky-cta-slideup { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes sticky-cta-slidedown { from { transform: translate3d(0, 0, 0); opacity: 1; } to { transform: translate3d(0, 100%, 0); opacity: 0; } } /* Keep main page content from being hidden behind the bar */ body.has-sticky-cta { padding-bottom: 72px; } @media (min-width: 768px) { body.has-sticky-cta { padding-bottom: 88px; } } /* ======================================================================== Design refinement pass — softer shadows, richer depth, refined micro-UX. Scoped with selectors that already exist in the markup so no HTML edits. ======================================================================== */ /* Premium layered shadow utility (teal-tinted) */ :root { --shadow-soft: 0 1px 2px rgba(10, 105, 114, 0.04), 0 4px 10px rgba(10, 105, 114, 0.06), 0 16px 40px rgba(10, 105, 114, 0.08); --shadow-soft-lg: 0 2px 4px rgba(10, 105, 114, 0.05), 0 8px 20px rgba(10, 105, 114, 0.08), 0 24px 60px rgba(10, 105, 114, 0.12); --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ===== Hero: 4つの理由 cards — white w/ teal hard drop shadow (boat-assist 最適な理由 style) ===== */ /* Note: the grid still uses the legacy .bg-[#0f2350] class on each card, but the REBRAND remap above turns that into solid teal. Here we replace the card look with white + hard teal shadow for the signature "stamped" effect. */ #section-hero .grid.grid-cols-2 > .bg-\[\#0f2350\] { background: #ffffff !important; /* override the remap: make card white */ color: var(--brand-teal); border: 2px solid var(--border); box-shadow: 0.4rem 0.4rem 0 var(--brand-teal); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; } #section-hero .grid.grid-cols-2 > .bg-\[\#0f2350\]:hover { transform: translate(-2px, -2px); box-shadow: 0.6rem 0.6rem 0 var(--brand-teal); } /* Text inside these (was white) now needs dark color */ #section-hero .grid.grid-cols-2 > .bg-\[\#0f2350\].text-white { color: var(--brand-teal) !important; } #section-hero .grid.grid-cols-2 > .bg-\[\#0f2350\] svg { color: var(--brand-teal); } /* Yellow "専門家が対応" etc. chip on top of each card → dark-red bold chip */ #section-hero .grid.grid-cols-2 .bg-\[\#ffcc00\] { background: transparent !important; color: var(--brand-red-dark) !important; font-weight: 800; letter-spacing: 0.06em; padding: 0 !important; border-radius: 0 !important; } /* Inner accent words (was yellow-300 on navy) → dark red on new white card */ #section-hero .grid.grid-cols-2 .text-yellow-300 { color: var(--brand-red-dark) !important; } /* "選ばれる4つの理由" skewed yellow banner → clean teal bar */ #section-hero .bg-\[\#ffcc00\].text-gray-900 { background: var(--brand-teal) !important; color: #ffffff !important; box-shadow: 0.3rem 0.3rem 0 var(--brand-red-dark); } /* The "4" red number inside the banner stays dark red */ #section-hero .bg-\[\#ffcc00\].text-gray-900 .text-\[\#e60012\] { color: var(--brand-yellow-pale) !important; } /* Hide the decorative triangle pieces (used to be gold) */ #section-hero .bg-\[\#ffcc00\].text-gray-900 + div, #section-hero .border-t-\[\#e5b800\] { display: none; } #section-hero [class*="border-t-\\[\\#e5b800\\]"] { display: none; } /* Green bubble (former red) "払わなくていい可能性" — polished shadow */ #section-hero .bg-\[\#0a6972\].text-white { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(10, 105, 114, 0.3), 0 16px 34px rgba(10, 105, 114, 0.2); } /* "まずはお気軽にご相談ください" bottom banner — keep shimmer, just use teal */ #section-hero > .bg-\[\#0f2350\] { background: linear-gradient(90deg, #08535b 0%, var(--brand-teal) 50%, #08535b 100%) !important; position: relative; overflow: hidden; } #section-hero > .bg-\[\#0f2350\] > p.animate-pulse { animation: none; } #section-hero > .bg-\[\#0f2350\]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(254, 243, 199, 0.18) 50%, transparent 60%); animation: hero-shimmer 5s ease-in-out infinite; pointer-events: none; } @keyframes hero-shimmer { 0%, 100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } } /* ===== News ticker — dark teal per "暗トーン" spec ===== */ #news-ticker { background: linear-gradient(180deg, var(--brand-teal-dark) 0%, var(--brand-teal-dark) 50%, var(--brand-teal-deeper) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.4); } #news-ticker .from-\[\#0f2350\] { --tw-gradient-from: var(--brand-teal-dark) !important; } #news-ticker .to-\[\#0f2350\] { --tw-gradient-to: var(--brand-teal-dark) !important; } /* ===== Checklist items (こんな心当たりはありませんか？) — richer cards ===== */ #section-reasons [class*="bg-white"][class*="border-gray-300"][class*="hover:border-red-300"] { background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); box-shadow: 0 1px 2px rgba(10, 105, 114, 0.05), 0 4px 12px rgba(10, 105, 114, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; border-radius: 0.75rem; } #section-reasons [class*="bg-white"][class*="border-gray-300"][class*="hover:border-red-300"]:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(10, 105, 114, 0.12), 0 16px 40px rgba(10, 105, 114, 0.18); border-color: var(--brand-teal) !important; } /* Dark-red hover state for problem checkboxes (override red-300 / red-50 tints) */ #section-reasons [class*="hover:border-red-300"]:hover { border-color: var(--brand-red-dark) !important; } #section-reasons [class*="hover:bg-red-50"]:hover { background-color: rgba(80, 188, 175, 0.06) !important; } /* "こんな心当たり" angled banner — switch from red to deep teal, soft shadow */ #section-reasons h2.bg-\[\#e60012\] { background: var(--brand-teal-dark) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important; } #section-reasons h2.bg-\[\#e60012\] + div { background: transparent !important; } /* ===== Case studies carousel — structural polish only (colors untouched) ===== */ #section-cases [data-slot="card"] { box-shadow: var(--shadow-soft); transition: box-shadow 0.3s ease, transform 0.3s ease; border-radius: 1rem; overflow: hidden; } #section-cases [data-slot="card"]:hover { box-shadow: var(--shadow-soft-lg); } /* Carousel dots — smoother transition */ #section-cases [data-carousel-dot] { transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease; } /* Case carousel arrows — teal-tinted shadow */ #section-cases .carousel-arrow { box-shadow: 0 2px 6px rgba(10, 105, 114, 0.1), 0 10px 30px rgba(10, 105, 114, 0.18); } #section-cases .carousel-arrow:hover { box-shadow: 0 4px 10px rgba(10, 105, 114, 0.15), 0 20px 40px rgba(10, 105, 114, 0.25); } /* ===== Flow timeline — structural polish only ===== */ #section-flow [class*="md:bg-white"][class*="md:rounded-xl"] { transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { #section-flow [class*="md:bg-white"][class*="md:rounded-xl"]:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-lg); } } /* ===== FAQ — softer shadow & smooth chevron rotation (colors untouched) ===== */ #section-faq [data-animate][class*="bg-white"][class*="rounded-lg"] { box-shadow: var(--shadow-soft); transition: box-shadow 0.25s ease, transform 0.25s ease; border-radius: 0.9rem; overflow: hidden; } #section-faq [data-animate][class*="bg-white"][class*="rounded-lg"]:hover { box-shadow: var(--shadow-soft-lg); } #section-faq [data-faq-toggle] svg.lucide-chevron-down { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* ===== Contact form — structural polish only (colors untouched) ===== */ #section-contact input, #section-contact select, #section-contact textarea { border-radius: 0.75rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; padding-left: 1rem; padding-right: 1rem; } #section-contact [class*="bg-destructive"] { letter-spacing: 0.05em; } #section-contact #contact-submit { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; } #section-contact #contact-submit:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); } /* ===== Header — premium sticky ===== */ #site-header { background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px rgba(10, 105, 114, 0.08); } /* Header right-side LINE/mail CTAs — bolder feel */ #site-header .bg-\[\#06C755\] { background: linear-gradient(135deg, #12d968 0%, #06C755 55%, #04a846 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(6, 199, 85, 0.35); } /* ===== Section-level refinement ===== */ section { position: relative; } /* Body base: nicer font smoothing and tracking on Japanese */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Global: slightly tighter tracking on headings (Japanese renders cleaner) */ h1, h2, h3, h4 { letter-spacing: -0.01em; } /* Image polish: reduce the abrupt edge on hero image */ #section-hero img[alt="頼れる司法書士"] { filter: drop-shadow(0 12px 24px rgba(10, 105, 114, 0.2)) drop-shadow(0 2px 4px rgba(10, 105, 114, 0.1)); } /* "選ばれる4つの理由" ribbon sits naturally on the navy card grid by giving the grid more top-padding on wider screens. */ @media (min-width: 768px) { #section-hero .relative > .grid.grid-cols-2 { padding-top: 2.5rem; /* 40px */ } } @media (min-width: 1024px) { #section-hero .relative > .grid.grid-cols-2 { padding-top: 3rem; /* 48px */ } } /* ======================================================================== Header — responsive collapsing of right-side CTAs so the 5-item nav fits comfortably on mid-width PC (1024–1279px) without wrapping. Breakpoints: lg (1024-1199) → hide phone chunk + mail button; show only LINE 1200-1359 → show phone + LINE; hide mail 1360+ → show all three ======================================================================== */ @media (min-width: 1024px) and (max-width: 1199.98px) { #site-header .site-header-cta__phone, #site-header .site-header-cta__mail { display: none; } } @media (min-width: 1200px) and (max-width: 1359.98px) { #site-header .site-header-cta__mail { display: none; } } /* ======================================================================== Blog / column — missing utilities + post content typography + pagination. ======================================================================== */ /* Missing Tailwind utilities (not present in the pre-bundled main.css) */ .max-w-5xl { max-width: 64rem; } @media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Compact column cards on the LP preview section — user asked to keep them "not too big" while always showing the latest 3 posts. */ #section-column .column-card h3 { font-size: 0.95rem; line-height: 1.45; } #section-column .column-card p { font-size: 0.82rem; line-height: 1.6; } #section-column .column-card .column-card__thumb { aspect-ratio: 16 / 10; /* slightly shallower than 16:9 → shorter card */ } #section-column .column-card .p-5 { padding: 1rem; /* was 1.25rem */ } /* Constrain ALL SVGs in column cards — Tailwind utilities like w-3.5/h-3.5 aren't in the compiled bundle, so unconstrained SVGs were filling their container (giant clocks/arrows). Default everything to 1rem. */ .column-card svg, .column-card--demo svg { width: 1rem; height: 1rem; } /* Thumbnail placeholder gets a slightly bigger icon */ .column-card__thumb svg { width: 2.5rem !important; height: 2.5rem !important; max-width: 2.5rem; max-height: 2.5rem; } /* Tailwind's line-clamp-3 / min-h-[60vh] aren't in the compiled bundle. */ .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .min-h-\[60vh\] { min-height: 60vh; } /* Column card: slight lift on hover, smooth */ .column-card { transform: translateZ(0); } .column-card:hover { transform: translateY(-4px); } /* ---- Single post body typography ---- */ .post-content { font-size: 1rem; line-height: 1.85; color: #1f2937; word-break: break-word; } .post-content > * + * { margin-top: 1.2em; } .post-content h2 { font-size: 1.5rem; font-weight: 900; color: #111827; line-height: 1.4; margin-top: 2.5em; padding: 0.5em 0 0.5em 1em; border-left: 6px solid var(--brand-teal); background: linear-gradient(90deg, rgba(10, 105, 114, 0.05), transparent 60%); } .post-content h3 { font-size: 1.25rem; font-weight: 800; color: #111827; line-height: 1.45; margin-top: 2em; padding-bottom: 0.4em; border-bottom: 2px solid rgba(10, 105, 114, 0.2); } .post-content h4 { font-size: 1.1rem; font-weight: 700; color: #111827; margin-top: 1.6em; } .post-content p { line-height: 1.9; } .post-content strong { font-weight: 700; color: #0f172a; } .post-content em { font-style: italic; } .post-content a { color: var(--primary, #0a6972); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .post-content a:hover { text-decoration-thickness: 2px; } .post-content ul, .post-content ol { padding-left: 1.5em; } .post-content ul { list-style: disc; } .post-content ol { list-style: decimal; } .post-content ul li, .post-content ol li { margin-top: 0.4em; } .post-content blockquote { border-left: 4px solid var(--primary, #0a6972); background: #f9fafb; padding: 1em 1.25em; margin: 1.5em 0; color: #4b5563; font-style: italic; border-radius: 0 0.5rem 0.5rem 0; } .post-content img, .post-content figure img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1.5em auto; display: block; box-shadow: 0 4px 14px rgba(15, 35, 80, 0.1); } .post-content figure { margin: 1.5em 0; } .post-content figcaption { font-size: 0.85rem; color: #6b7280; text-align: center; margin-top: 0.5em; } .post-content code { background: #f3f4f6; color: #be123c; padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.9em; } .post-content pre { background: #0f172a; color: #e5e7eb; padding: 1.25em; border-radius: 0.5rem; overflow-x: auto; margin: 1.5em 0; } .post-content pre code { background: transparent; color: inherit; padding: 0; font-size: 0.9em; } .post-content hr { border: 0; border-top: 2px dashed #e5e7eb; margin: 2.5em 0; } .post-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95em; } .post-content th, .post-content td { border: 1px solid #e5e7eb; padding: 0.6em 0.9em; text-align: left; } .post-content th { background: #f9fafb; font-weight: 700; } /* ---- Pagination (WordPress paginate_links output) ---- */ .column-pagination .page-numbers { display: inline-flex; align-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.85rem; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-weight: 700; font-size: 0.9rem; transition: all 0.2s ease; text-decoration: none; } .column-pagination .page-numbers:hover { border-color: var(--primary, #0a6972); color: var(--primary, #0a6972); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(10, 105, 114, 0.15); } .column-pagination .page-numbers.current { background: var(--primary, #0a6972); border-color: var(--primary, #0a6972); color: #fff; box-shadow: 0 4px 10px rgba(10, 105, 114, 0.3); } .column-pagination .page-numbers.dots { border: none; background: transparent; color: #9ca3af; } /* ======================================================================== INTENSIFIED ANIMATIONS — static design/tone unchanged, motion cranked up. Uses individual CSS props (scale/rotate/translate) so existing Tailwind transforms coexist, plus transform-based where composition is needed. ======================================================================== */ /* ===== boat-assist-aligned motion: subtle entrance + one emphasis pulse. Removed the earlier heartbeat/jolt/wiggle/blink/breathe excess that didn't exist on boat-assist. The boat-assist signature is just shine + scroll reveals. */ /* Hero "解決！" — no looping pulse (was too gimmicky for a legal LP) */ /* Hero 4-reason cards — staggered pop-in on load (entrance only, no floating) */ .reason-card { animation: reason-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .reason-card:nth-child(1) { animation-delay: 0.10s; } .reason-card:nth-child(2) { animation-delay: 0.25s; } .reason-card:nth-child(3) { animation-delay: 0.40s; } .reason-card:nth-child(4) { animation-delay: 0.55s; } @keyframes reason-pop { 0% { scale: 0.6; translate: 0 30px; opacity: 0; } 100% { scale: 1; translate: 0 0; opacity: 1; } } /* Chatbot toggle — slide up entrance (matches sticky CTA) */ #chatbot-toggle { animation: sticky-cta-slideup 0.3s ease-out both; } /* ======================================================================== v3 SPEC ENHANCEMENTS — items 6, 7, 8, 9, 10, 11, 12 ======================================================================== */ /* (6) News ticker — readable + dark teal bg + yellow accent */ #news-ticker { background: var(--brand-teal-dark) !important; height: 2.5rem; padding: 0 !important; } #news-ticker .ticker-track { align-items: center; min-height: 2.5rem; } #news-ticker span { font-size: 0.875rem !important; font-weight: 700 !important; line-height: 1.2; } #news-ticker .text-yellow-300 { color: var(--brand-yellow) !important; font-weight: 900; } #news-ticker .border-y-4 { border-color: var(--brand-teal) !important; } #news-ticker .from-\[\#0f2350\] { --tw-gradient-from: var(--brand-teal-dark) !important; } #news-ticker .to-\[\#0f2350\] { --tw-gradient-to: var(--brand-teal-dark) !important; } /* (7) Problem checklist — stronger card style + green checks + navy text */ #section-reasons [class*="bg-white"][class*="border-gray-300"][class*="hover:border-red-300"] { background: #ffffff !important; border: 1px solid var(--brand-border) !important; border-left: 4px solid var(--brand-teal) !important; border-radius: 0.6rem !important; padding: 0.85rem 1rem !important; } #section-reasons [class*="bg-white"][class*="border-gray-300"][class*="hover:border-red-300"]:hover { border-left-color: var(--brand-orange) !important; box-shadow: 0 4px 12px rgba(15, 143, 131, 0.15); } /* Checkbox — solid green tick instead of empty box */ #section-reasons .grid > div .flex-shrink-0 { background: var(--brand-teal) !important; border: 0 !important; width: 1.4rem !important; height: 1.4rem !important; border-radius: 0.3rem !important; position: relative; } #section-reasons .grid > div .flex-shrink-0::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 70%; } #section-reasons .grid > div span { color: var(--text-heading) !important; font-weight: 700 !important; font-size: 0.95rem !important; line-height: 1.45 !important; } @media (min-width: 768px) { #section-reasons .grid > div span { font-size: 1.05rem !important; } } /* === Step 3: Reasons section mobile/iPad dynamic feel === */ /* Red skewed banner H2 — bigger on mobile */ #section-reasons h2.bg-\[\#e60012\] { font-size: 1.55rem !important; line-height: 1.15 !important; padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; } @media (min-width: 768px) { #section-reasons h2.bg-\[\#e60012\] { font-size: 2.1rem !important; } } /* Alert triangle icon inside red banner — proportional to bigger text */ #section-reasons h2.bg-\[\#e60012\] svg { width: 1.65rem !important; height: 1.65rem !important; } @media (min-width: 768px) { #section-reasons h2.bg-\[\#e60012\] svg { width: 2rem !important; height: 2rem !important; } } /* Subhead under banner ("1つでも当てはまる方は要注意です！") */ #section-reasons > .container > .text-center > p { font-size: 1.1rem !important; line-height: 1.5 !important; } @media (min-width: 768px) { #section-reasons > .container > .text-center > p { font-size: 1.25rem !important; } } /* Make the green checkbox tick a bit more present */ #section-reasons .grid > div .flex-shrink-0 { width: 1.55rem !important; height: 1.55rem !important; } /* Tighten the outer gray panel so cards have more breathing room */ #section-reasons .bg-gray-50 { padding: 0.75rem !important; } @media (min-width: 768px) { #section-reasons .bg-gray-50 { padding: 1.5rem !important; } } /* (8) Case-studies — premium white cards, manga is the hero */ #section-cases .manga-vertical img { width: 100% !important; max-width: 560px !important; } #section-cases [data-slot="card"] { background: #ffffff !important; box-shadow: var(--shadow-card) !important; border: 1px solid var(--brand-border) !important; border-radius: var(--radius-card) !important; } #section-cases [data-slot="card"]:hover { box-shadow: var(--shadow-card-hover) !important; } #section-cases [data-slot="card"] h3 { font-size: 1.25rem !important; line-height: 1.4 !important; color: #ffffff; font-weight: 800; } #section-cases [data-slot="card"] .bg-gradient-to-r { background: linear-gradient(135deg, var(--brand-teal-dark) 0%, var(--brand-teal-deeper) 100%) !important; border-bottom: 0 !important; } @media (min-width: 768px) { #section-cases [data-slot="card"] h3 { font-size: 1.4rem !important; } } /* answer panel beneath manga */ #section-cases [data-slot="card"] .bg-secondary\/50 { background: var(--brand-mint) !important; border: 1px solid var(--brand-border) !important; border-radius: 0.75rem; } #section-cases [data-slot="card"] .bg-secondary\/50 p { color: var(--text-body); } /* "共通する手口の特徴" panel under the carousel */ #section-cases .mt-8.bg-secondary\/50 { background: #ffffff !important; border: 1px solid var(--brand-border) !important; box-shadow: var(--shadow-card) !important; } /* (9) Column cards */ #section-column .column-card { background: #ffffff !important; border: 1px solid var(--brand-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } #section-column .column-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover) !important; } #section-column .column-card h3 { color: var(--text-heading) !important; font-weight: 900 !important; font-size: 0.98rem !important; } #section-column .column-card .bg-primary\/10 { background: var(--brand-teal) !important; color: #ffffff !important; font-weight: 800; } #section-column .column-card__thumb { background: var(--brand-mint) !important; } /* (10) Flow — modern 3-step pill cards on deep teal section */ #section-flow ul > li { background: rgba(255, 255, 255, 0.06) !important; color: var(--text-on-dark) !important; box-shadow: none !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(2px); } #section-flow ul > li span.text-\[\#991b1b\], #section-flow ul > li span.text-\[\#ff8d02\], #section-flow ul > li .text-4xl { color: var(--brand-yellow) !important; font-size: 3.25rem !important; line-height: 1 !important; -webkit-text-stroke: 0 !important; font-family: "Lato", "Noto Sans JP", sans-serif !important; font-weight: 900; letter-spacing: -0.02em; } @media (min-width: 768px) { #section-flow ul > li span.text-\[\#991b1b\], #section-flow ul > li .text-4xl, #section-flow ul > li .md\:text-5xl { font-size: 4.25rem !important; } } #section-flow ul > li h3 { font-size: 1.2rem !important; font-weight: 800 !important; } #section-flow ul > li p { color: var(--text-on-dark-muted) !important; font-size: 0.95rem !important; } /* (11) FAQ — premium accordion */ #section-faq [data-animate][class*="bg-white"] { background: #ffffff !important; border: 1px solid var(--brand-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card) !important; overflow: hidden; } #section-faq button[data-faq-toggle] { font-size: 1rem !important; font-weight: 800 !important; color: var(--text-heading) !important; padding: 1.1rem 1.25rem !important; } @media (min-width: 768px) { #section-faq button[data-faq-toggle] { font-size: 1.05rem !important; padding: 1.25rem 1.5rem !important; } } #section-faq button[data-faq-toggle] [class*="bg-primary"][class*="text-white"] { background: var(--brand-teal) !important; color: #ffffff !important; width: 2rem !important; height: 2rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 0.5rem !important; font-weight: 900; font-size: 0.95rem !important; flex-shrink: 0; } #section-faq svg.lucide-chevron-down { color: var(--brand-teal-dark) !important; stroke-width: 2.5 !important; width: 1.25rem; height: 1.25rem; } #section-faq [data-faq-answer] { background: var(--brand-mint-soft) !important; color: var(--text-body) !important; font-size: 0.95rem; line-height: 1.7; padding: 1rem 1.25rem 1.25rem !important; border-top: 1px solid var(--brand-border); } #section-faq [data-faq-answer] .text-secondary { color: var(--brand-orange) !important; font-weight: 900; margin-right: 0.4rem; } /* (12) Contact form — premium white panel + tasteful focus + max orange CTA */ #section-contact > .container > .max-w-4xl.mx-auto { background: #ffffff !important; box-shadow: var(--shadow-card) !important; border: 1px solid var(--brand-border); border-radius: var(--radius-card); overflow: hidden; } #section-contact .bg-primary.text-white { background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%) !important; border-bottom: 0 !important; } #section-contact input, #section-contact select, #section-contact textarea { background: #ffffff !important; border: 1px solid var(--brand-border) !important; border-radius: var(--radius-input) !important; color: var(--text-heading) !important; font-weight: 500 !important; font-size: 1rem; padding: 0.75rem 0.95rem !important; } #section-contact input:focus, #section-contact select:focus, #section-contact textarea:focus { outline: none !important; border-color: var(--brand-teal) !important; box-shadow: 0 0 0 3px rgba(14, 142, 132, 0.12) !important; } #section-contact label { color: var(--text-heading) !important; font-weight: 700 !important; font-size: 0.9rem; } #section-contact .bg-destructive { background: var(--brand-orange) !important; color: #ffffff !important; font-weight: 800; font-size: 0.7rem; padding: 0.1rem 0.45rem; letter-spacing: 0.04em; } #section-contact #contact-submit { width: 100% !important; padding: 1.4rem 1rem !important; font-size: 1.1rem !important; letter-spacing: 0.05em; border-radius: var(--radius-pill) !important; background: linear-gradient(90deg, var(--brand-orange-light), var(--brand-orange-deep)) !important; } #section-contact #contact-submit span { font-weight: 900; } /* ======================================================================== HERO TEAL PASS (2026-04-27) — Tiffany teal #50bcaf base + subtle white stripe pattern (boat-assist reference). CSS-only, minimal, no HTML edits. ======================================================================== */ #section-hero { background: #50bcaf !important; isolation: isolate; } /* Hide the original light-bg gradient blobs — they were tuned for pale mint and clash on solid teal */ #section-hero > .absolute.top-0.left-0 > div { display: none !important; } /* White diagonal stripe overlay — tightly clustered in upper-right and lower-left corners only. Stays away from the headline / person area. */ #section-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) 2px, transparent 2px, transparent 22px ); -webkit-mask-image: radial-gradient(ellipse 38% 40% at 96% 4%, #000 0%, rgba(0,0,0,0.55) 50%, transparent 85%), radial-gradient(ellipse 38% 35% at 4% 96%, #000 0%, rgba(0,0,0,0.4) 55%, transparent 85%); mask-image: radial-gradient(ellipse 38% 40% at 96% 4%, #000 0%, rgba(0,0,0,0.55) 50%, transparent 85%), radial-gradient(ellipse 38% 35% at 4% 96%, #000 0%, rgba(0,0,0,0.4) 55%, transparent 85%); pointer-events: none; z-index: 0; } @media (max-width: 767.98px) { #section-hero::before { background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.14) 2px, transparent 2px, transparent 16px ); } } /* Make sure all hero content sits above the stripe overlay */ #section-hero > .container, #section-hero > .bg-\[\#0f2350\] { position: relative; z-index: 2; } /* ---- Hero text — recolor for legibility on teal ---- */ #section-hero h2.text-gray-700 { color: rgba(255, 255, 255, 0.94) !important; font-weight: 800 !important; text-shadow: 0 2px 6px rgba(7, 94, 89, 0.22); } #section-hero h1 { color: #ffffff !important; text-shadow: 0 2px 8px rgba(7, 94, 89, 0.28); } /* "返金請求" — solid yellow text with deep orange offset shadow. No gradient text-clip (was causing the text to vanish on the bg). */ #section-hero h1 .text-\[\#e60012\] { background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: var(--brand-yellow) !important; -webkit-text-stroke: 0 !important; text-shadow: 0 2px 0 var(--brand-orange-deep), 0 4px 14px rgba(0, 0, 0, 0.22) !important; filter: none !important; } /* "解決!" — solid orange. Reset every text-clip / fill-color override that may have leaked in from the .text-[#e60012] selector (same element). */ #section-hero h1 span.block.mt-2 { background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: var(--brand-orange) !important; -webkit-text-stroke: 0 !important; filter: none !important; text-shadow: 0.3rem 0.3rem 0 var(--brand-orange-dark), 0 4px 14px rgba(0, 0, 0, 0.22) !important; } /* Yellow underline strip — restore the original SUBTLE 50%-opacity look */ #section-hero .bg-yellow-300\/50 { background-color: rgba(255, 216, 77, 0.55) !important; height: 0.75rem !important; /* h-3 = original size */ box-shadow: none !important; opacity: 1 !important; } /* "払わなくていい可能性" pill — deeper teal so it pops on the lighter teal bg */ #section-hero .bg-\[\#0a6972\].text-white { background: linear-gradient(135deg, var(--brand-teal-dark) 0%, var(--brand-teal-deeper) 100%) !important; box-shadow: 0.4rem 0.4rem 0 rgba(7, 94, 89, 0.45), 0 8px 24px rgba(7, 94, 89, 0.32) !important; border: 2px solid rgba(255, 216, 77, 0.85) !important; } /* "POINT" eyebrow — white pill on teal (was teal text on light bg) */ #section-hero .text-center.mb-5 span, #section-hero .text-center.mb-6 span { background: rgba(255, 255, 255, 0.95) !important; color: var(--brand-teal-dark) !important; padding: 0.2rem 0.7rem !important; border-radius: 999px; box-shadow: 0 2px 0 rgba(7, 94, 89, 0.18); } /* "選ばれる4つのこだわり" heading — white on teal with yellow accent */ #section-hero .text-center h3.text-\[\#0a6972\] { color: #ffffff !important; text-shadow: 0 2px 6px rgba(7, 94, 89, 0.25); } #section-hero .text-center h3 .text-\[\#991b1b\] { background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: var(--brand-yellow) !important; text-shadow: 0 1px 2px rgba(7, 94, 89, 0.4); } /* ---- Reason cards — already white-on-teal, deepen offset shadow ---- */ #section-hero .grid.grid-cols-2 > .bg-\[\#0f2350\] { box-shadow: 0.4rem 0.4rem 0 rgba(7, 94, 89, 0.4), 0 4px 16px rgba(7, 94, 89, 0.18) !important; } #section-hero .grid.grid-cols-2 > .bg-\[\#0f2350\]:hover { box-shadow: 0.6rem 0.6rem 0 rgba(7, 94, 89, 0.5), 0 8px 24px rgba(7, 94, 89, 0.25) !important; } /* ---- Hero person image stage panel — deeper teal so it pops on teal bg ---- */ #section-hero > .container > .flex.flex-col.lg\:flex-row > .w-full.lg\:w-\[45\%\]::before { background: linear-gradient(160deg, var(--brand-teal-dark) 0%, var(--brand-teal-deeper) 100%) !important; box-shadow: 0 18px 40px rgba(7, 94, 89, 0.35) !important; } /* Floating credential card next to person image — bump elevation */ #section-hero .bg-white\/95 { box-shadow: 0 4px 0 rgba(7, 94, 89, 0.25), 0 12px 28px rgba(7, 94, 89, 0.25) !important; } /* ---- Hero bottom CTA banner — deeper teal so it cleanly separates ---- */ #section-hero > .bg-\[\#0f2350\] { background: linear-gradient(90deg, var(--brand-teal-dark) 0%, var(--brand-teal-deeper) 50%, var(--brand-teal-dark) 100%) !important; border-top: 4px solid rgba(255, 255, 255, 0.4) !important; border-bottom: 4px solid rgba(255, 255, 255, 0.4) !important; } /* END HERO TEAL PASS ===================================================== */ /* ======================================================================== HERO REDESIGN v3 (2026-04-27) — full composition rebuild. Target structure (new BEM markup, see front-page.php): #section-hero.hero .hero__bg (pattern + shapes) .hero__container > .hero__grid .hero__content (eyebrow → headline → support → CTAs → trust) .hero__visual (skewed teal panel + glow + person image + credential) .hero__bottom (banner shimmer) Plus: #section-benefits.benefits-strip immediately below for the 4 cards. ======================================================================== */ /* ---------- 1) BASE ---------- */ #section-hero.hero { position: relative; isolation: isolate; background: linear-gradient(135deg, #50bcaf 0%, #3aa89c 50%, #2a8c80 100%); overflow: hidden; padding: 0 !important; /* override the :is(...) section padding rule */ border: 0; } /* ---------- 2) BACKGROUND LAYERS ---------- */ .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Diagonal stripes — clustered top-right + bottom-left, away from headline */ .hero__bg-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.10) 2px, transparent 2px, transparent 22px ); -webkit-mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 50%, transparent 80%), radial-gradient(ellipse 55% 55% at 0% 100%, #000 0%, rgba(0,0,0,0.5) 50%, transparent 80%); mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 50%, transparent 80%), radial-gradient(ellipse 55% 55% at 0% 100%, #000 0%, rgba(0,0,0,0.5) 50%, transparent 80%); } /* Floating shapes — tasteful boat-assist accents (mobile keeps 1) */ .hero__bg-shape { position: absolute; pointer-events: none; } .hero__bg-shape--square { top: 10%; right: 11%; width: 1.4rem; height: 1.4rem; background: var(--brand-yellow); transform: rotate(20deg); opacity: 0.7; box-shadow: 0 0 20px rgba(255, 216, 77, 0.5); animation: hero-bob 6s ease-in-out infinite; } .hero__bg-shape--ring { top: 68%; right: 6%; width: 4.5rem; height: 4.5rem; border: 3px solid rgba(255, 255, 255, 0.4); border-radius: 999px; animation: hero-ring 4.5s ease-in-out infinite; } .hero__bg-shape--dot { top: 28%; left: 5%; width: 0.7rem; height: 0.7rem; border-radius: 999px; background: var(--brand-orange); box-shadow: 0 0 18px rgba(10, 150, 144, 0.7); animation: hero-ring 3.2s ease-in-out infinite; } @keyframes hero-bob { 0%, 100% { transform: translateY(0) rotate(20deg); } 50% { transform: translateY(-10px) rotate(28deg); } } @keyframes hero-ring { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.18); opacity: 0.75; } } @media (max-width: 767.98px) { .hero__bg-shape--ring { display: none; } } /* ---------- 3) LAYOUT GRID ---------- */ .hero__container { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.25rem 2.25rem; } @media (min-width: 768px) { .hero__container { padding: 3.5rem 2rem 2.75rem; } } @media (min-width: 1024px) { .hero__container { padding: 4.25rem 2rem 3.5rem; } } .hero__grid { display: flex; flex-direction: column; gap: 1.75rem; } @media (min-width: 1024px) { .hero__grid { flex-direction: row; align-items: center; gap: 3rem; } } .hero__content { width: 100%; text-align: center; position: relative; z-index: 2; } @media (min-width: 1024px) { .hero__content { flex: 1 1 56%; text-align: left; } } .hero__visual { width: 100%; position: relative; min-height: 16rem; display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 1024px) { .hero__visual { flex: 1 1 44%; min-height: 30rem; } } /* ---------- 4) EYEBROW ---------- */ .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(255, 255, 255, 0.96); color: var(--brand-teal-dark); border-radius: 999px; padding: 0.34rem 0.95rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; box-shadow: 0 2px 0 rgba(7, 94, 89, 0.18), 0 4px 14px rgba(7, 94, 89, 0.18); margin-bottom: 1rem; animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } .hero__eyebrow-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--brand-orange); box-shadow: 0 0 0 0 rgba(10, 150, 144, 0.7); animation: hero-eyebrow-pulse 2s ease-out infinite; } @keyframes hero-eyebrow-pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 150, 144, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(10, 150, 144, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 150, 144, 0); } } @media (min-width: 768px) { .hero__eyebrow { font-size: 0.78rem; padding: 0.4rem 1.1rem; } } /* ---------- 5) HEADLINE ---------- */ .hero__headline { margin: 0; color: #ffffff; font-weight: 900; letter-spacing: -0.01em; line-height: 1.18; text-shadow: 0 2px 8px rgba(7, 94, 89, 0.25); animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } @media (min-width: 1024px) { .hero__headline { align-items: flex-start; } } .hero__headline-sub { display: block; font-size: 1.1rem; font-weight: 800; color: rgba(255, 255, 255, 0.94); letter-spacing: 0.02em; margin-bottom: 0.15rem; } .hero__headline-line { display: block; font-size: 2.15rem; line-height: 1.2; color: #ffffff; } .hero__headline-accent { display: inline-block; color: var(--brand-yellow); text-shadow: 0 2px 0 var(--brand-orange-deep), 0 4px 14px rgba(0, 0, 0, 0.22); } .hero__headline-big { display: inline-flex; align-items: center; font-size: 4.2rem; line-height: 0.95; color: var(--brand-orange); text-shadow: 0.3rem 0.3rem 0 var(--brand-orange-dark), 0 8px 22px rgba(0, 0, 0, 0.25); -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85); transform: rotate(-3deg); margin-top: 0.35rem; letter-spacing: -0.04em; font-weight: 900; } .hero__headline-big-bang { display: inline-block; font-size: 1.05em; margin-left: 0.05em; animation: hero-bang 1.8s ease-in-out infinite; } @keyframes hero-bang { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-5px); } } .hero__br-mobile { display: inline; } @media (min-width: 768px) { .hero__headline-sub { font-size: 1.1rem; } .hero__headline-line { font-size: 2.6rem; line-height: 1.25; } .hero__headline-big { font-size: 6.5rem; } .hero__br-mobile { display: none; } } @media (min-width: 1024px) { .hero__headline-line { font-size: 3.1rem; } .hero__headline-big { font-size: 7.5rem; } } /* ---------- 6) SUPPORTING SENTENCE ---------- */ .hero__support { margin: 1.25rem 0 1.5rem; font-size: 1.05rem; font-weight: 700; line-height: 1.6; color: rgba(255, 255, 255, 0.96); text-shadow: 0 1px 4px rgba(7, 94, 89, 0.2); animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } .hero__support-mark { background: linear-gradient(0deg, rgba(10, 150, 144, 0.92) 60%, transparent 60%); color: #ffffff; padding: 0 0.15em; font-weight: 900; border-radius: 0.1rem; } @media (min-width: 768px) { .hero__support { font-size: 1.05rem; margin: 1.5rem 0 1.75rem; } } /* ---------- 7) CTA ROW ---------- */ .hero__cta-row { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; } @media (min-width: 480px) { .hero__cta-row { flex-direction: row; flex-wrap: wrap; justify-content: center; } } @media (min-width: 1024px) { .hero__cta-row { justify-content: flex-start; } } .hero__cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; max-width: 22rem; min-height: 56px; padding: 1rem 1.75rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, #15B8B0 0%, #0A9690 50%, #088480 100%); color: #ffffff; font-family: inherit; font-size: 1.02rem; font-weight: 900; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 6px 0 var(--brand-orange-dark), 0 14px 30px rgba(10, 150, 144, 0.45); transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; isolation: isolate; } .hero__cta-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 75%); transform: skewX(-20deg); animation: hero-cta-shine 3.5s linear infinite; z-index: 0; } .hero__cta-primary > * { position: relative; z-index: 1; } .hero__cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--brand-orange-dark), 0 18px 36px rgba(10, 150, 144, 0.55); } .hero__cta-primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--brand-orange-dark), 0 6px 12px rgba(10, 150, 144, 0.35); } .hero__cta-primary-arrow { width: 1.1rem; height: 1.1rem; flex-shrink: 0; } @keyframes hero-cta-shine { 0% { left: -100%; } 60% { left: 120%; } 100% { left: 120%; } } @media (min-width: 768px) { .hero__cta-primary { min-height: 60px; font-size: 1.12rem; padding: 1.05rem 2.15rem; width: auto; } } .hero__cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; max-width: 22rem; min-height: 50px; padding: 0.7rem 1.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; border: 2px solid rgba(255, 255, 255, 0.5); text-decoration: none; transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .hero__cta-secondary:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.75); transform: translateY(-1px); } .hero__cta-secondary-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; } @media (min-width: 480px) { .hero__cta-primary, .hero__cta-secondary { width: auto; } } /* ---------- 8) TRUST BADGES ---------- */ .hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; list-style: none; margin: 0; padding: 0; animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; } @media (min-width: 1024px) { .hero__trust { justify-content: flex-start; } } .hero__trust-item { display: inline-flex; align-items: center; gap: 0.32rem; background: rgba(255, 255, 255, 0.96); color: var(--brand-teal-dark); font-size: 0.76rem; font-weight: 800; padding: 0.32rem 0.7rem; border-radius: 999px; box-shadow: 0 1px 0 rgba(7, 94, 89, 0.15), 0 4px 12px rgba(7, 94, 89, 0.12); line-height: 1; } .hero__trust-item svg { width: 0.85rem; height: 0.85rem; color: var(--brand-teal); flex-shrink: 0; } @media (min-width: 768px) { .hero__trust-item { font-size: 0.82rem; padding: 0.35rem 0.85rem; } } /* ---------- 9) VISUAL SIDE — person + skewed teal panel ---------- */ .hero__visual { animation: hero-fade-left 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; } @keyframes hero-fade-left { 0% { opacity: 0; transform: translateX(40px); } 100% { opacity: 1; transform: translateX(0); } } .hero__visual-panel { position: absolute; right: 4%; bottom: 0; width: 78%; height: 86%; background: linear-gradient(160deg, var(--brand-teal-dark) 0%, var(--brand-teal-deeper) 100%); border-radius: 2rem 0 0 2rem; transform: skewX(-6deg); transform-origin: bottom right; box-shadow: 0 22px 50px rgba(7, 94, 89, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); z-index: 0; } @media (max-width: 1023.98px) { .hero__visual-panel { right: 2%; width: 88%; height: 78%; transform: skewX(-4deg); border-radius: 1.5rem 0 0 1.5rem; } } .hero__visual-glow { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 75%; height: 75%; background: radial-gradient(circle, rgba(255, 216, 77, 0.32) 0%, transparent 60%); filter: blur(40px); z-index: 0; pointer-events: none; } .hero__visual-dots { position: absolute; top: 6%; left: 0; width: 6.5rem; height: 6.5rem; background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1.5px, transparent 1.5px); background-size: 14px 14px; z-index: 0; opacity: 0.55; transform: rotate(-6deg); } @media (max-width: 767.98px) { .hero__visual-dots { display: none; } } .hero__visual-img { position: relative; z-index: 1; max-width: 100%; height: auto; max-height: 22rem; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 28px rgba(7, 94, 89, 0.35)); } @media (min-width: 1024px) { .hero__visual-img { max-height: 34rem; } } .hero__credential { position: absolute; bottom: 0.5rem; right: 0.5rem; background: #ffffff; padding: 0.55rem 0.8rem; border-left: 4px solid var(--brand-orange); border-radius: 0.4rem; box-shadow: 0 4px 0 rgba(7, 94, 89, 0.3), 0 12px 28px rgba(7, 94, 89, 0.28); display: flex; flex-direction: column; gap: 0.05rem; text-align: right; z-index: 2; max-width: 12.5rem; line-height: 1.2; } .hero__credential-label { font-size: 0.55rem; color: var(--text-muted); font-weight: 800; letter-spacing: 0.04em; } .hero__credential-name { font-size: 0.92rem; color: var(--text-heading); font-weight: 900; } .hero__credential-num { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; } @media (min-width: 1024px) { .hero__credential { bottom: 1rem; right: 1rem; padding: 0.7rem 1rem; max-width: 14rem; } .hero__credential-label { font-size: 0.65rem; } .hero__credential-name { font-size: 1.05rem; } .hero__credential-num { font-size: 0.7rem; } } /* ---------- 10) BOTTOM BANNER ---------- */ .hero__bottom { position: relative; z-index: 1; background: linear-gradient(90deg, var(--brand-teal-deeper) 0%, var(--brand-teal-dark) 50%, var(--brand-teal-deeper) 100%); border-top: 3px solid rgba(255, 255, 255, 0.25); border-bottom: 3px solid rgba(255, 255, 255, 0.25); padding: 0.7rem 1rem; text-align: center; overflow: hidden; } .hero__bottom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%); animation: hero-bottom-shine 5s ease-in-out infinite; pointer-events: none; } @keyframes hero-bottom-shine { 0%, 100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } } .hero__bottom-text { position: relative; margin: 0; color: #ffffff; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.02em; } .hero__bottom-highlight { color: var(--brand-yellow); font-weight: 900; font-size: 1.1em; border-bottom: 2px solid var(--brand-yellow); padding-bottom: 0.05em; } @media (min-width: 768px) { .hero__bottom-text { font-size: 1.05rem; } } /* ---------- 11) BENEFITS STRIP (4 reason cards moved out) ---------- */ #section-benefits.benefits-strip { position: relative; background: #ffffff; padding: 2.25rem 0 2.5rem !important; border-bottom: 1px solid var(--brand-border); overflow: hidden; } @media (min-width: 768px) { #section-benefits.benefits-strip { padding: 3rem 0 3.25rem !important; } } .benefits-strip__header { text-align: center; margin-bottom: 1.5rem; } .benefits-strip__eyebrow { display: inline-block; font-family: "Lato", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 0.7rem; letter-spacing: 0.32em; color: var(--brand-teal-dark); margin-bottom: 0.4rem; } .benefits-strip__title { font-size: 1.3rem; font-weight: 900; color: var(--text-heading); letter-spacing: -0.01em; line-height: 1.3; margin: 0; } .benefits-strip__title-accent { display: inline-block; color: var(--brand-orange); font-size: 1.3em; line-height: 1; margin: 0 0.05em; transform: translateY(0.05em); text-shadow: 0 2px 0 var(--brand-orange-dark); } @media (min-width: 768px) { .benefits-strip__title { font-size: 1.65rem; } } /* Reason grid in benefits strip — 2 cols mobile, 4 cols desktop */ .benefits-strip .reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; max-width: 64rem; margin: 0 auto; } @media (min-width: 768px) { .benefits-strip .reason-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } } /* ======================================================================== Benefits — feature-card variant (vertical stack: teal text panel on top + visual panel on bottom). Original implementation; uses our Tiffany teal palette and existing SVG icons in the visual area. ======================================================================== */ .benefits-strip .reason-grid--feature { display: flex !important; flex-direction: column; gap: 1.25rem; max-width: 32rem; padding: 0; list-style: none; margin: 0 auto; } @media (min-width: 768px) { .benefits-strip .reason-grid--feature { gap: 1.5rem; max-width: 36rem; } } /* Reset older single-block .reason-card styles for the feature variant */ .benefits-strip .reason-card--feature { display: flex; flex-direction: column; align-items: stretch; padding: 0 !important; background: #ffffff; border: 0; border-radius: 1.5rem; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); overflow: hidden; list-style: none; animation: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .benefits-strip .reason-card--feature:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12); } .benefits-strip .reason-card--feature[data-animate] { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 0.12s ease-out, transform 0.12s ease-out, box-shadow 0.25s ease; will-change: transform, opacity; } .benefits-strip .reason-card--feature[data-animate="fade-right"], .benefits-strip .reason-card--feature[data-animate="fade-left"] { transform: translate3d(0, 1rem, 0); } .benefits-strip .reason-card--feature[data-animate].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* TOP: Teal text panel */ .benefits-strip .reason-card--feature .reason-card__panel { position: relative; padding: 1.5rem 1.25rem 1.35rem; background: linear-gradient(135deg, var(--brand-teal-light) 0%, var(--brand-teal) 60%, var(--brand-teal-dark) 100%); color: #ffffff; overflow: hidden; } @media (min-width: 768px) { .benefits-strip .reason-card--feature .reason-card__panel { padding: 0.85rem 1.4rem 0.75rem; } } /* Big outlined "01/02/03/04" number watermark (top-left corner) */ .benefits-strip .reason-card--feature .reason-card__num { position: absolute; top: 0.25rem; left: 0.85rem; font-family: "Lato", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 4.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55); letter-spacing: -0.05em; pointer-events: none; background: transparent; padding: 0; box-shadow: none; transform: none; z-index: 1; } @media (min-width: 768px) { .benefits-strip .reason-card--feature .reason-card__num { font-size: 3.6rem; top: 0.1rem; left: 0.85rem; } } /* Title — white text, offset right of the "01" watermark, wraps to 2 lines if needed */ .benefits-strip .reason-card--feature .reason-card__label { position: relative; z-index: 2; margin: 0 0 0.65rem; padding-left: 4.2rem; font-size: 1.55rem; font-weight: 900; line-height: 1.25; letter-spacing: -0.015em; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); border: 0; width: auto; display: flex; align-items: center; min-height: 3.4rem; } @media (min-width: 768px) { .benefits-strip .reason-card--feature .reason-card__label { font-size: 1.35rem; padding-left: 3.6rem; min-height: 2rem; margin-bottom: 0.35rem; } } /* Lead description — white smaller text just under the title */ .benefits-strip .reason-card--feature .reason-card__lead { position: relative; z-index: 2; margin: 0 0 1.1rem; color: #ffffff; font-size: 1rem; line-height: 1.6; font-weight: 600; opacity: 0.95; } @media (min-width: 768px) { .benefits-strip .reason-card--feature .reason-card__lead { font-size: 0.95rem; margin-bottom: 0.6rem; } } /* "Check!" + bordered body box (inside the teal panel) */ .benefits-strip .reason-card--feature .reason-card__check { position: relative; z-index: 2; } /* Check tag = white check icon + "Check!" label + extending divider line */ .benefits-strip .reason-card--feature .reason-card__check-tag { display: flex; align-items: center; gap: 0.45rem; color: #ffffff; font-weight: 900; font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.55rem 0; } .benefits-strip .reason-card--feature .reason-card__check-tag svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; } .benefits-strip .reason-card--feature .reason-card__check-text { white-space: nowrap; } /* Horizontal divider line extending from the "Check!" label to the right edge */ .benefits-strip .reason-card--feature .reason-card__check-tag::after { content: ""; flex: 1 1 auto; height: 1.5px; background: rgba(255, 255, 255, 0.55); margin-left: 0.3rem; } /* Bordered box — thinner border, plain white text inside */ .benefits-strip .reason-card--feature .reason-card__check-body { border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 0.45rem; padding: 0.9rem 1.1rem; background: transparent; } .benefits-strip .reason-card--feature .reason-card__body { margin: 0; color: #ffffff; font-size: 1rem; line-height: 1.5; font-weight: 700; } /* No yellow underline — plain white text per reference */ .benefits-strip .reason-card--feature .reason-card__body strong { display: inline; font-weight: 900; font-size: 1em; color: #ffffff; border-bottom: 0; padding-bottom: 0; } @media (min-width: 768px) { .benefits-strip .reason-card--feature .reason-card__check-tag { font-size: 0.98rem; } .benefits-strip .reason-card--feature .reason-card__check-body { padding: 0.5rem 0.9rem; } .benefits-strip .reason-card--feature .reason-card__body { font-size: 0.95rem; } } /* BOTTOM: Visual panel — soft mint background + big SVG icon centered */ .benefits-strip .reason-card--feature .reason-card__visual { position: relative; width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.85) 0%, transparent 60%), linear-gradient(180deg, var(--brand-mint) 0%, #DDF0EC 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .benefits-strip .reason-card--feature .reason-card__visual::after { /* subtle decorative ring around the icon for visual interest */ content: ""; position: absolute; width: 11rem; height: 11rem; border-radius: 50%; border: 1.5px dashed rgba(10, 150, 144, 0.25); z-index: 0; } .benefits-strip .reason-card--feature .reason-card__icon { position: relative; z-index: 1; width: 6rem; height: 6rem; background: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(7, 94, 89, 0.2); } .benefits-strip .reason-card--feature .reason-card__icon svg { width: 3rem; height: 3rem; color: var(--brand-teal); } .benefits-strip .reason-card--feature .reason-card__icon--text { font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 2.3rem; font-weight: 900; color: var(--brand-teal); letter-spacing: -0.05em; } @media (min-width: 768px) { .benefits-strip .reason-card--feature .reason-card__visual { aspect-ratio: 16 / 4; } .benefits-strip .reason-card--feature .reason-card__icon { width: 4.6rem; height: 4.6rem; } .benefits-strip .reason-card--feature .reason-card__icon svg { width: 2.2rem; height: 2.2rem; } .benefits-strip .reason-card--feature .reason-card__icon--text { font-size: 1.8rem; } .benefits-strip .reason-card--feature .reason-card__visual::after { width: 7.5rem; height: 7.5rem; } } /* Benefits-strip CTA — primary + LINE secondary moved here from hero */ .benefits-strip__cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; } @media (min-width: 480px) { .benefits-strip__cta { flex-direction: row; flex-wrap: wrap; } } @media (min-width: 768px) { .benefits-strip__cta { margin-top: 2.25rem; gap: 1rem; } } /* LINE secondary inside benefits-strip — LINE-green branded so it's readable on the white section background, height matched to primary */ .benefits-strip__cta .hero__cta-secondary { background: linear-gradient(135deg, #12d968 0%, #06C755 60%, #04a846 100%) !important; color: #ffffff !important; border: 0 !important; width: 100%; max-width: 22rem; min-height: 56px; padding: 0.95rem 1.55rem; font-size: 1rem; font-weight: 900; letter-spacing: 0.04em; box-shadow: 0 6px 0 #047a35, 0 12px 24px rgba(6, 199, 85, 0.38) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important; } .benefits-strip__cta .hero__cta-secondary:hover { background: linear-gradient(135deg, #06C755 0%, #04a846 100%) !important; transform: translateY(-2px); box-shadow: 0 8px 0 #047a35, 0 16px 30px rgba(6, 199, 85, 0.5) !important; } .benefits-strip__cta .hero__cta-secondary:active { transform: translateY(3px); box-shadow: 0 3px 0 #047a35, 0 6px 12px rgba(6, 199, 85, 0.35) !important; } @media (min-width: 480px) { .benefits-strip__cta .hero__cta-secondary { width: auto; } } @media (min-width: 768px) { .benefits-strip__cta .hero__cta-secondary { min-height: 60px; padding: 1rem 1.85rem; font-size: 1.08rem; } } /* ---------- 12) FADE-UP ENTRANCE (used by content blocks) ---------- */ @keyframes hero-fade-up { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: translateY(0); } } /* END HERO REDESIGN v3 ================================================= */ /* ======================================================================== HERO REFINEMENT v3.1 — fixes after first review: 1) Person photo no longer looks like a flat white box on teal — gets a polaroid-style frame + 3D offset shadow + softer glow 2) "解決!" tightened: less rotation, less margin, less isolated 3) Trust badges scaled up so they read as a real benefits row 4) Background stripes slightly more visible to add motion 5) Subtle yellow accent square moved closer to the photo as a sticker ======================================================================== */ /* (1) Person photo — boat-assist polaroid card with hard offset shadow. Replaces the flat white-rectangle look. */ .hero__visual-img { position: relative; z-index: 2; max-width: 100%; height: auto; max-height: 24rem; width: auto; object-fit: cover; object-position: center top; border-radius: 1.25rem; border: 5px solid #ffffff; box-shadow: 0.85rem 0.85rem 0 var(--brand-teal-dark), 0 26px 50px rgba(7, 94, 89, 0.45); filter: none; } @media (min-width: 1024px) { .hero__visual-img { max-height: 32rem; } } /* The original skewed teal panel is no longer needed — the photo's hard offset box-shadow IS the geometric backdrop now. */ .hero__visual-panel { display: none !important; } /* Glow stays for atmosphere, just bumped a notch */ .hero__visual-glow { bottom: 6%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(255, 216, 77, 0.42) 0%, transparent 60%); filter: blur(48px); opacity: 0.95; } /* Decorative dots — repositioned as a corner pattern peeking out of the photo's bottom-left to add texture without overpowering */ .hero__visual-dots { top: auto; bottom: -1.2rem; left: -1.5rem; width: 6rem; height: 6rem; background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1.5px, transparent 1.5px); background-size: 13px 13px; z-index: 1; opacity: 0.55; transform: rotate(-10deg); } @media (max-width: 767.98px) { .hero__visual-dots { display: none; } } /* Credential card sits above the photo's offset-shadow for clean overlap */ .hero__credential { z-index: 3; } /* (2) "解決!" — dark red accent (per client direction: accent in red, no orange). Single solid dark red + ONE downward offset shadow for depth. No rotation. */ .hero__headline-big { color: var(--brand-accent-red) !important; background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; -webkit-text-stroke: 0 !important; filter: none !important; text-shadow: 0 5px 0 var(--brand-accent-red-deep), 0 12px 22px rgba(0, 0, 0, 0.22) !important; transform: none !important; margin-top: 0.1rem; letter-spacing: -0.04em; } @media (min-width: 768px) { .hero__headline-big { font-size: 6rem; } } @media (min-width: 1024px) { .hero__headline-big { font-size: 6.75rem; } } /* "!" — subtle vertical bob only (no rotation, no chaotic motion) */ .hero__headline-big-bang { animation: hero-bang-soft 2.4s ease-in-out infinite !important; } @keyframes hero-bang-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Headline gap tighter on desktop so the cohesion improves */ @media (min-width: 1024px) { .hero__headline { gap: 0.1rem; } .hero__headline-line { font-size: 2.85rem; } } /* (3) Trust badges — bigger, more visual weight */ .hero__trust { gap: 0.5rem; margin-top: 0.25rem; } .hero__trust-item { font-size: 0.95rem; padding: 0.5rem 1rem; gap: 0.4rem; } .hero__trust-item svg { width: 1.05rem; height: 1.05rem; } @media (min-width: 768px) { .hero__trust-item { font-size: 1.05rem; padding: 0.55rem 1.2rem; } .hero__trust-item svg { width: 1.15rem; height: 1.15rem; } } /* (4) Background pattern — bump opacity from 0.10 → 0.13 for more motion */ .hero__bg-pattern { background-image: repeating-linear-gradient( 135deg, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0.13) 2px, transparent 2px, transparent 22px ); } /* (5) Yellow accent square — repositioned closer to the photo so it reads like a sticker accent rather than random background decoration */ .hero__bg-shape--square { top: 14%; right: 8%; width: 1.6rem; height: 1.6rem; } /* Tighten the left content's vertical spacing so it doesn't feel airy */ .hero__support { margin: 1rem 0 1.35rem; } @media (min-width: 768px) { .hero__support { margin: 1.25rem 0 1.5rem; } } /* END HERO REFINEMENT v3.1 ============================================== */ /* ======================================================================== POST-HERO POLISH v3.2 (2026-04-27) — sophistication pass for sections below the hero. Goal: keep the refined feel, add subtle boat-assist campaign-LP energy without breaking balance. Hero stays the protagonist; these refinements stay 60–70% of hero intensity. Scope: 1) Cases: CASE 0X gold pill on each card header 2) Reason / column cards: refined hover lift 3) Pre-form lead-in trust strip (contact-leadin) 4) Submit button — match hero primary CTA strength No changes to layout, structure, or color tokens. ======================================================================== */ /* (1) Cases — case badge removed. Card title already includes "事例1〜事例5" so a duplicate "CASE / ケース" label was redundant and visually noisy. */ /* (1b) Cases — "共通する手口の特徴" panel polish (was too plain & hard to read) */ #section-cases .mt-8.bg-secondary\/50 { background: #ffffff !important; border: 1px solid var(--brand-border) !important; border-radius: 1rem !important; box-shadow: 0 6px 24px rgba(7, 94, 89, 0.08) !important; padding: 1.5rem !important; } @media (min-width: 768px) { #section-cases .mt-8.bg-secondary\/50 { padding: 1.85rem !important; } } /* Heading "共通する手口の特徴" — bigger and bolder */ #section-cases .mt-8.bg-secondary\/50 > h4 { font-size: 1.05rem !important; font-weight: 900 !important; color: var(--text-heading) !important; margin-bottom: 1rem !important; padding-bottom: 0.85rem; border-bottom: 2px solid var(--brand-mint); } @media (min-width: 768px) { #section-cases .mt-8.bg-secondary\/50 > h4 { font-size: 1.2rem !important; } } #section-cases .mt-8.bg-secondary\/50 > h4 svg { width: 1.35rem !important; height: 1.35rem !important; color: var(--brand-orange) !important; background: rgba(10, 150, 144, 0.12); border-radius: 999px; padding: 0.25rem; box-sizing: content-box; } /* Item cards inside — stronger left bar accent + readable typography */ #section-cases .mt-8.bg-secondary\/50 .bg-white { background: #ffffff !important; border: 1px solid var(--brand-border) !important; border-left: 4px solid var(--brand-teal) !important; border-radius: 0.6rem !important; padding: 0.85rem 1rem !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } #section-cases .mt-8.bg-secondary\/50 .bg-white:hover { transform: translateY(-2px); border-left-color: var(--brand-orange) !important; box-shadow: 0 6px 16px rgba(7, 94, 89, 0.12); } /* Bullet dot — bigger, brighter, ring-style */ #section-cases .mt-8.bg-secondary\/50 .bg-white > span.bg-primary { width: 0.75rem !important; height: 0.75rem !important; background: var(--brand-orange) !important; box-shadow: 0 0 0 4px rgba(10, 150, 144, 0.2); margin-top: 0.4rem !important; } /* Item title — bolder, dark teal */ #section-cases .mt-8.bg-secondary\/50 .bg-white strong { font-size: 0.95rem !important; color: var(--text-heading) !important; font-weight: 900 !important; line-height: 1.35; display: block; } /* Item body text — bigger and darker than the original muted-foreground/xs */ #section-cases .mt-8.bg-secondary\/50 .bg-white p { font-size: 0.82rem !important; color: #475569 !important; line-height: 1.55 !important; margin-top: 0.25rem !important; font-weight: 500; } @media (min-width: 768px) { #section-cases .mt-8.bg-secondary\/50 .bg-white strong { font-size: 1rem !important; } #section-cases .mt-8.bg-secondary\/50 .bg-white p { font-size: 0.88rem !important; } } /* (2a) Reason cards (POINT) — refined hover lift */ .benefits-strip .reason-card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease !important; } .benefits-strip .reason-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(7, 94, 89, 0.16) !important; } /* Mobile POINT cards — match the supplied reference card shape. */ @media (max-width: 767.98px) { #section-benefits.benefits-strip { padding: 2rem 0 2.5rem !important; background: #ffffff !important; } #section-benefits.benefits-strip > .container { padding-left: 0.85rem; padding-right: 0.85rem; } .benefits-strip__header { margin-bottom: 1.25rem; } .benefits-strip .reason-grid--feature { width: 100%; max-width: 38rem; gap: 1.45rem; } .benefits-strip .reason-card--feature { width: 100%; border-radius: 0 7.6rem 7.6rem 0; box-shadow: none !important; overflow: hidden; gap: 0 !important; text-align: left; } .benefits-strip .reason-card--feature:nth-child(even) { border-radius: 7.6rem 0 0 7.6rem; } .benefits-strip .reason-card--feature:hover { box-shadow: none !important; transform: none !important; } .benefits-strip .reason-card--feature .reason-card__panel { min-height: 82vw; max-height: 21rem; padding: 2.55rem 1.6rem 1.95rem 1.6rem; background: #55bfb6; border-top-right-radius: 7.6rem; } .benefits-strip .reason-card--feature:nth-child(even) .reason-card__panel { border-top-left-radius: 7.6rem; border-top-right-radius: 0; } .benefits-strip .reason-card--feature .reason-card__num { top: 2.8rem; left: 1.35rem; color: rgba(255, 255, 255, 0.58); -webkit-text-stroke: 0; display: block; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; font-size: clamp(4.15rem, 17.5vw, 5.45rem); font-style: italic; line-height: 0.82; letter-spacing: -0.09em; } .benefits-strip .reason-card--feature .reason-card__label { min-height: 4.55rem; margin: 0 0 1rem; padding-left: clamp(5.55rem, 23vw, 7.05rem); padding-right: 2rem; color: #ffffff; font-size: clamp(1.6rem, 7.4vw, 2.35rem); font-weight: 900; line-height: 1.18; letter-spacing: 0; align-items: flex-start; justify-content: flex-start; text-align: left; text-shadow: none; } .benefits-strip .reason-card--feature .reason-card__lead { margin: 0 0 1.35rem; color: #ffffff; font-size: clamp(1.08rem, 4.75vw, 1.45rem); font-weight: 800; line-height: 1.72; letter-spacing: 0; text-align: left; opacity: 1; } .benefits-strip .reason-card--feature .reason-card__check-tag { gap: 0.4rem; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 4.8vw, 1.35rem); line-height: 1; letter-spacing: 0; } .benefits-strip .reason-card--feature .reason-card__check-tag svg { width: 1.45rem; height: 1.45rem; } .benefits-strip .reason-card--feature .reason-card__check-tag::after { height: 1px; margin-left: 0.25rem; background: rgba(255, 255, 255, 0.72); } .benefits-strip .reason-card--feature .reason-card__check-body { border: 1.5px solid rgba(255, 255, 255, 0.8); border-radius: 0; padding: 1.05rem 1.45rem; background: transparent; } .benefits-strip .reason-card--feature .reason-card__body { color: #ffffff; font-size: clamp(1.18rem, 5.9vw, 1.65rem); font-weight: 900; line-height: 1.55; letter-spacing: 0; text-align: left; } .benefits-strip .reason-card--feature .reason-card__visual { min-height: 55vw; max-height: 14rem; aspect-ratio: 1.82 / 1; border-bottom-right-radius: 7.6rem; background-image: linear-gradient(180deg, rgba(47, 187, 181, 0.1), rgba(47, 187, 181, 0.34)), url("assets/images/hero.webp"); background-size: cover; background-position: 50% 18%; background-repeat: no-repeat; } .benefits-strip .reason-card--feature:nth-child(even) .reason-card__visual { border-bottom-left-radius: 7.6rem; border-bottom-right-radius: 0; } .benefits-strip .reason-card--feature:nth-child(2) .reason-card__visual { background-position: 50% 34%; } .benefits-strip .reason-card--feature:nth-child(3) .reason-card__visual { background-position: 50% 44%; } .benefits-strip .reason-card--feature:nth-child(4) .reason-card__visual { background-position: 50% 54%; } .benefits-strip .reason-card--feature .reason-card__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 150, 144, 0.18), transparent 42%, rgba(10, 150, 144, 0.22)), radial-gradient(circle at 58% 46%, rgba(92, 236, 231, 0.34), transparent 38%); pointer-events: none; } .benefits-strip .reason-card--feature .reason-card__visual::after { content: ""; position: absolute; top: 50%; left: 56%; z-index: 2; width: 12.5rem; height: 12.5rem; border: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 1.95rem, rgba(94, 239, 232, 0.52) 2rem 2.08rem, transparent 2.12rem 2.85rem), conic-gradient(from 25deg, transparent 0 8%, rgba(94, 239, 232, 0.48) 8% 12%, transparent 12% 21%, rgba(94, 239, 232, 0.35) 21% 26%, transparent 26% 100%); opacity: 0.72; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; } .benefits-strip .reason-card--feature .reason-card__icon { display: none; } } /* Desktop POINT cards — wide alternating panels like the reference site. */ @media (min-width: 1024px) { #section-benefits.benefits-strip { padding: 1.875rem 0 4.5rem !important; background: #ffffff !important; overflow: hidden; } #section-benefits.benefits-strip > .container { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } .benefits-strip__header { display: none; } .benefits-strip .reason-grid--feature { width: 100%; max-width: none; gap: 4.5rem; margin: 0; overflow: visible; } .benefits-strip .reason-card--feature { --desktop-panel-width: min(58vw, 64rem); --desktop-visual-width: min(39vw, 43rem); --desktop-card-height: clamp(26rem, 30.25vw, 38.75rem); --desktop-visual-height: clamp(17rem, 18.55vw, 23.75rem); position: relative; display: block; height: var(--desktop-card-height) !important; min-height: 0 !important; width: 100%; padding: 0 !important; background: transparent; border: 0; border-radius: 0; box-shadow: none !important; overflow: visible; animation: none !important; } .benefits-strip .reason-card--feature:hover { transform: none; box-shadow: none !important; } .benefits-strip .reason-card--feature .reason-card__panel { position: relative; z-index: 2; width: var(--desktop-panel-width); height: 100% !important; min-height: 0 !important; padding: 3.45rem 4.15rem 4rem clamp(10rem, 14.6vw, 18.9rem); background: #55bfb6; border-radius: 0 5.45rem 5.45rem 0; overflow: hidden; } .benefits-strip .reason-card--feature:nth-child(even) .reason-card__panel { margin-left: auto; padding-right: clamp(10rem, 14.6vw, 18.9rem); padding-left: 4.15rem; border-radius: 5.45rem 0 0 5.45rem; } .benefits-strip .reason-card--feature .reason-card__num { top: 3.35rem; left: clamp(10rem, 14.6vw, 18.9rem); color: rgba(255, 255, 255, 0.58); -webkit-text-stroke: 0; display: block; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: clamp(5.9rem, 8.5vw, 7.25rem); font-style: italic; line-height: 0.9; letter-spacing: -0.08em; } .benefits-strip .reason-card--feature:nth-child(even) .reason-card__num { left: 4.15rem; } .benefits-strip .reason-card--feature .reason-card__label { position: relative; z-index: 2; min-height: 7.25rem; margin: 0 0 1.65rem; padding-left: clamp(10.2rem, 11vw, 12.4rem); padding-right: 0; display: flex; align-items: flex-start; color: #ffffff; font-size: clamp(2.25rem, 2.9vw, 3rem); font-weight: 900; line-height: 1.25; letter-spacing: 0; text-align: left; text-shadow: none; } .benefits-strip .reason-card--feature:nth-child(even) .reason-card__label { padding-left: clamp(9.2rem, 10.2vw, 11.2rem); } .benefits-strip .reason-card--feature .reason-card__lead { position: relative; z-index: 2; width: min(100%, 43rem); margin: 0 0 2.2rem; color: #ffffff; font-size: clamp(1.35rem, 1.55vw, 1.75rem); font-weight: 800; line-height: 1.75; letter-spacing: 0; text-align: left; opacity: 1; } .benefits-strip .reason-card--feature .reason-card__check { width: min(100%, 42rem); } .benefits-strip .reason-card--feature .reason-card__check-tag { gap: 0.5rem; margin-bottom: -0.1rem; color: #ffffff; font-size: clamp(1.25rem, 1.55vw, 1.65rem); line-height: 1; letter-spacing: 0; } .benefits-strip .reason-card--feature .reason-card__check-tag svg { width: 1.75rem; height: 1.75rem; } .benefits-strip .reason-card--feature .reason-card__check-tag::after { height: 1.5px; margin-left: 0.35rem; background: rgba(255, 255, 255, 0.75); } .benefits-strip .reason-card--feature .reason-card__check-body { border: 1.5px solid rgba(255, 255, 255, 0.86); border-radius: 0; padding: 1.65rem 1.25rem 1.55rem; background: transparent; } .benefits-strip .reason-card--feature .reason-card__body { margin: 0; color: #ffffff; font-size: clamp(1.35rem, 1.55vw, 1.7rem); font-weight: 900; line-height: 1.65; letter-spacing: 0; text-align: left; } .benefits-strip .reason-card--feature .reason-card__visual { position: absolute; z-index: 1; top: clamp(5.25rem, 7.32vw, 7.5rem); left: calc(var(--desktop-panel-width) - 0.05rem); width: var(--desktop-visual-width); height: var(--desktop-visual-height) !important; aspect-ratio: auto; border-radius: 0; background-image: linear-gradient(180deg, rgba(47, 187, 181, 0.06), rgba(47, 187, 181, 0.25)), url("assets/images/hero.webp"); background-size: cover; background-position: 50% 18%; background-repeat: no-repeat; overflow: hidden; } .benefits-strip .reason-card--feature:nth-child(even) .reason-card__visual { right: calc(var(--desktop-panel-width) - 0.05rem); left: auto; background-position: 50% 34%; } .benefits-strip .reason-card--feature:nth-child(3) .reason-card__visual { background-position: 50% 44%; } .benefits-strip .reason-card--feature:nth-child(4) .reason-card__visual { background-position: 50% 54%; } .benefits-strip .reason-card--feature .reason-card__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 150, 144, 0.14), transparent 42%, rgba(10, 150, 144, 0.2)), radial-gradient(circle at 58% 46%, rgba(92, 236, 231, 0.32), transparent 38%); pointer-events: none; } .benefits-strip .reason-card--feature .reason-card__visual::after { content: ""; position: absolute; top: 50%; left: 56%; z-index: 2; width: 23rem; height: 23rem; border: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 3.75rem, rgba(94, 239, 232, 0.5) 3.82rem 3.95rem, transparent 4rem 5.35rem), conic-gradient(from 25deg, transparent 0 8%, rgba(94, 239, 232, 0.46) 8% 12%, transparent 12% 21%, rgba(94, 239, 232, 0.35) 21% 26%, transparent 26% 100%); opacity: 0.72; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; } .benefits-strip .reason-card--feature .reason-card__icon { display: none; } } /* (2b) Column cards — refined hover lift */ #section-column .column-card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease !important; } #section-column .column-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(7, 94, 89, 0.18) !important; } /* (3) Pre-form lead-in trust strip — refined, not loud */ .contact-leadin { position: relative; background: var(--brand-mint); padding: 2.5rem 1rem 0.75rem; overflow: hidden; } .contact-leadin::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--brand-mint) 100%); pointer-events: none; } .contact-leadin__inner { position: relative; text-align: center; max-width: 56rem; margin: 0 auto; } .contact-leadin__eyebrow { display: inline-flex; align-items: center; background: #ffffff; color: var(--brand-teal-dark); border: 1.5px solid var(--brand-teal); border-radius: 999px; padding: 0.3rem 0.95rem; font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.28em; box-shadow: 0 2px 0 rgba(10, 105, 114, 0.15); margin-bottom: 0.95rem; } .contact-leadin__title { font-size: 1.35rem; line-height: 1.5; font-weight: 900; color: var(--text-heading); letter-spacing: -0.01em; margin: 0; } @media (min-width: 768px) { .contact-leadin__title { font-size: 1.75rem; } } .contact-leadin__title-accent { color: var(--brand-orange); text-shadow: 0 2px 0 var(--brand-orange-dark); padding: 0 0.15em; } .contact-leadin__br-mobile { display: inline; } @media (min-width: 768px) { .contact-leadin__br-mobile { display: none; } } .contact-leadin__points { list-style: none; margin: 1rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.7rem; } .contact-leadin__points li { display: inline-flex; align-items: center; gap: 0.4rem; background: #ffffff; border: 1px solid var(--brand-border); border-radius: 999px; padding: 0.36rem 0.85rem; font-size: 0.82rem; font-weight: 800; color: var(--text-heading); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); line-height: 1; } .contact-leadin__points svg { width: 0.85rem; height: 0.85rem; color: var(--brand-teal); flex-shrink: 0; } /* When the lead-in immediately precedes the contact form, tighten the gap so they read as a unified block rather than two separate sections */ .contact-leadin + #contact-form-anchor #section-contact { padding-top: 1.5rem !important; } /* (4) Submit button — match hero primary CTA strength. Mobile: compact padding + smaller subtext that fits on one line so the button stays 2 rows high (was 3 rows because subtext wrapped). */ #section-contact #contact-submit { background: linear-gradient(135deg, #15B8B0 0%, #0A9690 50%, #088480 100%) !important; background-image: linear-gradient(135deg, #15B8B0 0%, #0A9690 50%, #088480 100%) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; padding: 0.95rem 1.25rem !important; /* mobile: compact */ font-size: 1rem !important; font-weight: 900 !important; letter-spacing: 0.04em !important; box-shadow: 0 6px 0 var(--brand-orange-dark), 0 14px 30px rgba(10, 150, 144, 0.45) !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important; position: relative; overflow: hidden; isolation: isolate; animation: none !important; } @media (min-width: 768px) { #section-contact #contact-submit { padding: 1.25rem 1.5rem !important; font-size: 1.1rem !important; } } /* Subtext "24時間以内に担当者よりご連絡いたします" — keep on one line */ #section-contact #contact-submit-subtext { font-size: 0.68rem !important; letter-spacing: -0.01em; white-space: nowrap; } @media (min-width: 768px) { #section-contact #contact-submit-subtext { font-size: 0.85rem !important; white-space: normal; } } /* Send icon next to "無料相談を申し込む" — slightly smaller on mobile */ #section-contact #contact-submit svg.lucide-send { width: 1.1rem !important; height: 1.1rem !important; } @media (min-width: 768px) { #section-contact #contact-submit svg.lucide-send { width: 1.4rem !important; height: 1.4rem !important; } } #section-contact #contact-submit::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 75%); transform: skewX(-20deg); animation: hero-cta-shine 3.5s linear infinite; z-index: 0; } #section-contact #contact-submit > * { position: relative; z-index: 1; } #section-contact #contact-submit:hover:not(:disabled) { transform: translateY(-2px) !important; box-shadow: 0 8px 0 var(--brand-orange-dark), 0 18px 36px rgba(10, 150, 144, 0.55) !important; } #section-contact #contact-submit:active:not(:disabled) { transform: translateY(3px) !important; box-shadow: 0 3px 0 var(--brand-orange-dark), 0 6px 12px rgba(10, 150, 144, 0.35) !important; } /* ---- FLOW SECTION CONTRAST FIX — mid-teal pills on dark-teal section were too low-contrast. Boost: gradient pills + bright yellow numbers + white icons + clearer body text. ---- */ #section-flow > .container > .text-center > h2 { color: #ffffff !important; } #section-flow > .container > .text-center > p { color: rgba(255, 255, 255, 0.85) !important; } #section-flow ul > li { background: linear-gradient(135deg, rgba(80, 188, 175, 0.22) 0%, rgba(14, 142, 132, 0.45) 100%) !important; border: 1.5px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 10px 28px rgba(7, 94, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; position: relative; } #section-flow ul > li:hover { transform: translateY(-3px); border-color: rgba(255, 216, 77, 0.5) !important; box-shadow: 0 16px 36px rgba(7, 94, 89, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } /* ① ② ③ numbers — switch from muddy dark-red to bright yellow with depth */ #section-flow ul > li span.text-\[\#991b1b\], #section-flow ul > li .text-4xl, #section-flow ul > li .md\:text-5xl { color: var(--brand-yellow) !important; -webkit-text-stroke: 0 !important; font-size: 3.25rem !important; line-height: 1 !important; font-family: "Lato", "Noto Sans JP", sans-serif !important; font-weight: 900 !important; letter-spacing: -0.04em !important; text-shadow: 0 3px 0 rgba(7, 94, 89, 0.5), 0 6px 14px rgba(0, 0, 0, 0.25) !important; } @media (min-width: 768px) { #section-flow ul > li span.text-\[\#991b1b\], #section-flow ul > li .text-4xl, #section-flow ul > li .md\:text-5xl { font-size: 4.25rem !important; } } /* Title text — full white + slightly bigger; icon in yellow for accent */ #section-flow ul > li h3 { color: #ffffff !important; font-size: 1.15rem !important; font-weight: 900 !important; letter-spacing: 0.01em; } @media (min-width: 768px) { #section-flow ul > li h3 { font-size: 1.3rem !important; } } #section-flow ul > li h3 svg { color: var(--brand-yellow); filter: drop-shadow(0 0 6px rgba(255, 216, 77, 0.4)); } /* Body text — readable on the gradient pill */ #section-flow ul > li p { color: rgba(255, 255, 255, 0.94) !important; font-size: 0.92rem !important; line-height: 1.65 !important; margin-top: 0.4rem !important; font-weight: 500; } @media (min-width: 768px) { #section-flow ul > li p { font-size: 1rem !important; } } /* FLOW — boat-assist reference copy: dark teal block, yellow accents, outline step cards. */ #section-flow { background: linear-gradient(180deg, #319185 0%, #28796f 100%) !important; color: #ffffff !important; padding: 3rem 0 4rem !important; border: 0 !important; overflow: hidden; } #section-flow > .container { width: 100% !important; max-width: 386px !important; padding-left: 0.55rem !important; padding-right: 0.55rem !important; } @media (min-width: 768px) { #section-flow > .container { max-width: 420px !important; } } #section-flow > .container > .text-center { margin-bottom: 1.65rem !important; } #section-flow > .container > .text-center::before { content: "" !important; display: block !important; width: 0 !important; height: 0 !important; margin: 0 auto 1.25rem !important; background: transparent !important; border-left: 0.7rem solid transparent; border-right: 0.7rem solid transparent; border-top: 0.88rem solid #f5d553; clip-path: none !important; } #section-flow > .container > .text-center > span { display: block !important; margin: 0 0 0.75rem !important; color: #f5d553 !important; font-family: "Lato", "Noto Sans JP", sans-serif !important; font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0.34em !important; line-height: 1 !important; } #section-flow > .container > .text-center > h2 { margin: 0 !important; color: #ffffff !important; font-size: 1.8rem !important; font-weight: 900 !important; line-height: 1.18 !important; letter-spacing: 0 !important; } #section-flow > .container > .text-center > h2 span { color: #ffffff !important; border: 0 !important; padding: 0 !important; } #section-flow > .container > .text-center > h2::after { content: ""; display: block; width: 11.9rem; height: 0.36rem; margin: 0.5rem auto 0; background: #f5d553; } #section-flow > .container > .text-center > p { margin: 1rem 0 0 !important; color: #ffffff !important; font-size: 0.88rem !important; font-weight: 900 !important; line-height: 1.55 !important; } #section-flow ul { display: flex !important; flex-direction: column !important; gap: 1.15rem !important; margin: 0 !important; padding: 0 !important; } #section-flow ul > * + * { margin-top: 0 !important; } #section-flow ul > li { position: relative; width: 100% !important; min-height: 7.9rem; margin: 0 !important; padding: 1.45rem 1.2rem 1.35rem 1.45rem !important; background: linear-gradient(135deg, rgba(72, 172, 158, 0.42) 0%, rgba(48, 148, 136, 0.3) 100%) !important; border: 1px solid rgba(120, 205, 192, 0.58) !important; border-radius: 0 2.55rem 2.55rem 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #section-flow ul > li:nth-child(even) { border-radius: 2.55rem 0 0 2.55rem !important; padding-left: 1.45rem !important; padding-right: 1.2rem !important; } #section-flow ul > li:hover { transform: none !important; border-color: rgba(120, 205, 192, 0.58) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } #section-flow ul > li > div.flex { align-items: center !important; gap: 0.85rem !important; } #section-flow ul > li > div.flex > span { position: relative; flex: 0 0 3.35rem !important; width: 3.35rem !important; height: 3.35rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #318d82 !important; border: 0.2rem solid #f5d553 !important; border-radius: 50% !important; color: #f5d553 !important; font-size: 0 !important; line-height: 1 !important; letter-spacing: 0 !important; text-shadow: 0 0.12rem 0 rgba(12, 88, 81, 0.85) !important; box-shadow: 0 0.16rem 0 rgba(10, 91, 83, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; } #section-flow ul > li:nth-child(1) > div.flex > span::before { content: "1"; } #section-flow ul > li:nth-child(2) > div.flex > span::before { content: "2"; } #section-flow ul > li:nth-child(3) > div.flex > span::before { content: "3"; } #section-flow ul > li > div.flex > span::before { font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 2.3rem; font-weight: 900; line-height: 1; } #section-flow ul > li .flex-grow { min-width: 0; } #section-flow ul > li h3 { display: flex !important; align-items: center !important; gap: 0.45rem !important; margin: 0 0 0.38rem !important; color: #ffffff !important; font-size: 1.17rem !important; font-weight: 900 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } #section-flow ul > li h3 svg { width: 1.02rem !important; height: 1.02rem !important; color: #f5d553 !important; stroke-width: 2.4 !important; filter: none !important; } #section-flow ul > li p { margin: 0 !important; color: #ffffff !important; font-size: 0.94rem !important; font-weight: 900 !important; line-height: 1.65 !important; letter-spacing: 0 !important; } @media (min-width: 768px) { #section-flow { padding: 3.25rem 0 4.25rem !important; } #section-flow > .container > .text-center > h2 { font-size: 1.95rem !important; } #section-flow ul > li { min-height: 8.25rem; padding-top: 1.55rem !important; padding-bottom: 1.45rem !important; } } /* FLOW final PC copy — white panels touch the viewport edges like the reference. */ @media (min-width: 1024px) { #section-flow { --flow-bg: #087477; --flow-ink: #086a71; --flow-green: #50bcaf; --flow-gold: #f9ca45; position: relative; background: var(--flow-bg) !important; padding: 2.25rem 0 7rem !important; } #section-flow > .container { position: relative; z-index: 1; max-width: none !important; padding: 0 !important; } #section-flow > .container > .text-center { max-width: 58rem; margin: 0 auto 4.05rem !important; padding: 0 1.5rem; } #section-flow > .container > .text-center::before { margin-bottom: 1.55rem !important; border-left-width: 0.9rem; border-right-width: 0.9rem; border-top-width: 1.08rem; border-top-color: var(--flow-gold); } #section-flow > .container > .text-center > span { color: var(--flow-gold) !important; font-size: 1rem !important; letter-spacing: 0.5em !important; margin-bottom: 1rem !important; } #section-flow > .container > .text-center > h2 { font-size: 2.75rem !important; line-height: 1.1 !important; } #section-flow > .container > .text-center > h2::after { width: 17.8rem; height: 0.5rem; margin-top: 0.75rem; background: var(--flow-gold); } #section-flow > .container > .text-center > p { margin-top: 1.65rem !important; font-size: 1.25rem !important; line-height: 1.5 !important; } #section-flow ul { display: flex !important; flex-direction: column !important; gap: 6.5rem !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #section-flow ul > li { position: relative; display: block !important; width: 100% !important; min-height: 18.35rem !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #section-flow ul > li > div.flex { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex !important; align-items: center !important; width: 49.4vw !important; min-height: 0 !important; height: 100% !important; gap: 1.35rem !important; color: var(--flow-ink) !important; background: #ffffff !important; box-shadow: none !important; } #section-flow ul > li > div.flex::before { display: none !important; } #section-flow ul > li:nth-child(odd) > div.flex { left: 0; right: auto; padding: 2rem 3.5vw 2rem 8.8vw !important; border-radius: 0 5.2rem 5.2rem 0 !important; } #section-flow ul > li:nth-child(even) > div.flex { right: 0; left: auto; width: 49.4vw !important; padding: 2rem 8.8vw 2rem 3.5vw !important; border-radius: 5.2rem 0 0 5.2rem !important; } #section-flow ul > li::after { position: absolute; top: 50%; z-index: 1; display: block; width: 24vw; max-width: 24rem; height: 14.5rem; content: ""; background-repeat: no-repeat; background-position: center; background-size: contain; transform: translateY(-50%); } #section-flow ul > li:nth-child(odd)::after { right: 14.4vw; } #section-flow ul > li:nth-child(even)::after { left: 14.2vw; } #section-flow ul > li:nth-child(1)::after { background-image: url("assets/images/flow-consult.svg"); } #section-flow ul > li:nth-child(2)::after { background-image: url("assets/images/flow-negotiate.svg"); } #section-flow ul > li:nth-child(3)::after { background-image: url("assets/images/flow-refund.svg"); } #section-flow ul > li > div.flex > span { flex: 0 0 5.05rem !important; width: 5.05rem !important; height: 5.05rem !important; background: var(--flow-green) !important; border: 0.22rem solid var(--flow-gold) !important; color: var(--flow-gold) !important; text-shadow: 0 0.16rem 0 rgba(10, 105, 114, 0.9) !important; box-shadow: 0 0.18rem 0 rgba(10, 105, 114, 0.92) !important; } #section-flow ul > li > div.flex > span::before { font-size: 4.15rem !important; line-height: 0.95 !important; } #section-flow ul > li .flex-grow { min-width: 0; } #section-flow ul > li h3 { color: var(--flow-ink) !important; font-size: 2.55rem !important; line-height: 1.15 !important; margin: 0 0 0.78rem !important; font-weight: 900 !important; letter-spacing: 0 !important; } #section-flow ul > li h3 svg { width: 1.55rem !important; height: 1.55rem !important; color: var(--flow-gold) !important; stroke-width: 2.7 !important; } #section-flow ul > li p { color: var(--flow-ink) !important; font-size: 1.34rem !important; line-height: 1.55 !important; font-weight: 900 !important; letter-spacing: 0 !important; } } @media (min-width: 1024px) and (max-width: 1279.98px) { #section-flow { padding-top: 2rem !important; } #section-flow > .container > .text-center > h2 { font-size: 2.55rem !important; } #section-flow > .container > .text-center > p { font-size: 1.1rem !important; } #section-flow ul { gap: 5.2rem !important; } #section-flow ul > li { min-height: 12.8rem !important; } #section-flow ul > li h3 { font-size: 2.05rem !important; } #section-flow ul > li p { font-size: 1.14rem !important; } #section-flow ul > li > div.flex > span { flex-basis: 4.5rem !important; width: 4.5rem !important; height: 4.5rem !important; } #section-flow ul > li > div.flex > span::before { font-size: 3.6rem !important; } } /* ---- Footer grid utilities — hand-authored (not in bundled main.css) ---- Re-balance the 4 footer columns from equal 25% each (which made "取り扱い業務" hug Col1) to 4-2-3-3 for proper visual breathing. */ @media (min-width: 1024px) { .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-4 { grid-column: span 4 / span 4; } } /* END POST-HERO POLISH v3.2 ============================================= */ /* ======================================================================== Mobile menu — floating modal Centered card + fade animation + opaque overlay (NOT full-width dropdown). Per client feedback: lifted-off-the-page look, fade animation, centered text, larger fonts, prominent CTAs. ======================================================================== */ #mobile-menu.mobile-menu { position: fixed; inset: 0; z-index: 60; /* above sticky header (50) */ display: flex; align-items: center; justify-content: center; padding: 1.25rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } #mobile-menu.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s linear 0s; } .mobile-menu .mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(7, 35, 40, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; } .mobile-menu .mobile-menu__panel { position: relative; width: 100%; max-width: 22rem; /* ~352px — feels lifted, not full-bleed */ max-height: calc(100vh - 2.5rem); overflow-y: auto; background: rgba(255, 255, 255, 0.97); border-radius: 1.25rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.5); padding: 1.5rem 1.25rem 1.5rem; text-align: center; transform: translateY(-12px) scale(0.96); opacity: 0; transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } #mobile-menu.mobile-menu.is-open .mobile-menu__panel { transform: translateY(0) scale(1); opacity: 1; } .mobile-menu .mobile-menu__close { position: absolute; top: 0.55rem; right: 0.55rem; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; color: var(--brand-teal); cursor: pointer; border-radius: 9999px; transition: background-color 0.15s ease, transform 0.2s ease; } .mobile-menu .mobile-menu__close:hover, .mobile-menu .mobile-menu__close:focus-visible { background: rgba(14, 142, 132, 0.1); transform: scale(1.08); outline: none; } .mobile-menu .mobile-menu__title { font-size: 1.15rem; font-weight: 800; color: var(--brand-teal); margin: 0 0 0.85rem; letter-spacing: 0.14em; border-bottom: 2px solid rgba(14, 142, 132, 0.2); padding-bottom: 0.65rem; line-height: 1; } .mobile-menu .mobile-menu__nav { display: flex; flex-direction: column; margin-bottom: 1rem; } .mobile-menu .mobile-menu__link { display: block; width: 100%; text-align: center; padding: 0.7rem 0.5rem; font-size: 1.05rem; font-weight: 700; color: #1a2536; background: transparent; border: none; border-bottom: 1px dashed rgba(14, 142, 132, 0.22); cursor: pointer; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; line-height: 1.3; } .mobile-menu .mobile-menu__link:last-child { border-bottom: none; } .mobile-menu .mobile-menu__link:hover, .mobile-menu .mobile-menu__link:focus-visible { color: var(--brand-teal); background-color: rgba(14, 142, 132, 0.06); outline: none; } .mobile-menu .mobile-menu__cta-group { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem; } .mobile-menu .mobile-menu__cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; width: 100%; padding: 0.7rem 0.85rem; color: #fff !important; border-radius: 9999px; text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.85); cursor: pointer; line-height: 1.15; font-weight: 800; transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; } .mobile-menu .mobile-menu__cta:hover, .mobile-menu .mobile-menu__cta:focus-visible { transform: translateY(-2px); filter: brightness(1.05); outline: none; } .mobile-menu .mobile-menu__cta:active { transform: translateY(1px); } .mobile-menu .mobile-menu__cta__sub { font-size: 0.68rem; font-weight: 600; opacity: 0.95; letter-spacing: 0.05em; } .mobile-menu .mobile-menu__cta__main { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: 1.1rem; font-weight: 800; line-height: 1.1; } .mobile-menu .mobile-menu__cta__main svg { flex-shrink: 0; } .mobile-menu .mobile-menu__cta--phone { background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%); box-shadow: 0 0.4rem 0 var(--brand-teal-deeper); } .mobile-menu .mobile-menu__cta--line { background: linear-gradient(135deg, #12d968 0%, #06C755 55%, #04a846 100%); box-shadow: 0 0.4rem 0 #038138; } .mobile-menu .mobile-menu__cta--mail { background: linear-gradient(90deg, var(--brand-orange-light), var(--brand-orange-deep)); box-shadow: 0 0.4rem 0 var(--brand-orange-dark); } /* Lock body scroll while the menu is open */ body.mobile-menu-open { overflow: hidden; } /* Slightly larger card / fonts on tiny phones (<=360px keep compact) */ @media (min-width: 380px) { .mobile-menu .mobile-menu__link { font-size: 1.1rem; padding: 0.78rem 0.5rem; } .mobile-menu .mobile-menu__cta__main { font-size: 1.15rem; } } /* ======================================================================== News accordion — replaces the old 3-col preview grid + home/archive grids. Collapsed: title (+ date/category) only. Expanded: thumbnail + excerpt + 「詳細を見る」 link to the article. ======================================================================== */ .news-accordion-list { display: flex; flex-direction: column; gap: 0.5rem; } .news-accordion { background: #ffffff; border: 1px solid var(--brand-border); border-radius: 0.75rem; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03); overflow: hidden; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .news-accordion.is-open { border-color: var(--brand-teal); box-shadow: 0 4px 14px rgba(10, 150, 144, 0.12); } .news-accordion__head { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.95rem 1rem; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; color: var(--text-heading); transition: background-color 0.15s ease; } .news-accordion__head:hover, .news-accordion__head:focus-visible { background-color: rgba(10, 150, 144, 0.04); outline: none; } .news-accordion__meta { display: inline-flex; align-items: center; gap: 0.55rem; flex-shrink: 0; flex-wrap: wrap; } .news-accordion__date { color: var(--text-muted); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .news-accordion__cat { display: inline-block; background: rgba(10, 150, 144, 0.1); color: var(--brand-teal-dark); font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; } .news-accordion__title { flex: 1; font-size: 1rem; font-weight: 800; line-height: 1.4; color: var(--text-heading); } .news-accordion__chevron { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--brand-teal); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .news-accordion.is-open .news-accordion__chevron { transform: rotate(180deg); } /* Mobile (<640px): stack meta + title on separate rows */ @media (max-width: 639.98px) { .news-accordion__head { flex-wrap: wrap; gap: 0.45rem 0.55rem; padding: 0.85rem 0.9rem; } .news-accordion__meta { flex-basis: 100%; } .news-accordion__title { flex-basis: calc(100% - 1.65rem); font-size: 1.02rem; } } /* Expanded body */ .news-accordion__body { padding: 0 1rem 1.1rem; border-top: 1px dashed var(--brand-border); animation: news-accordion-fade 0.3s ease both; } @keyframes news-accordion-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .news-accordion__thumb { margin: 0.85rem 0 0.85rem; aspect-ratio: 16 / 9; border-radius: 0.65rem; overflow: hidden; background: var(--brand-mint); } .news-accordion__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-accordion__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(10, 150, 144, 0.08), rgba(10, 150, 144, 0.03)); } .news-accordion__thumb-placeholder svg { width: 4rem; height: 4rem; color: rgba(10, 150, 144, 0.4); } .news-accordion__excerpt { margin: 0 0 0.95rem; font-size: 0.95rem; line-height: 1.7; color: var(--text-body); } .news-accordion__more { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--brand-teal); color: #ffffff; font-weight: 900; font-size: 0.95rem; padding: 0.65rem 1.25rem; border-radius: 999px; text-decoration: none; box-shadow: 0 0.35rem 0 var(--brand-teal-deeper); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .news-accordion__more:hover, .news-accordion__more:focus-visible { transform: translateY(-1px); filter: brightness(1.05); outline: none; } .news-accordion__more:active { transform: translateY(2px); box-shadow: 0 0.1rem 0 var(--brand-teal-deeper); } .news-accordion__more svg { width: 0.95rem; height: 0.95rem; } .news-accordion__more--disabled { background: var(--brand-border); color: var(--text-muted); box-shadow: none; cursor: not-allowed; pointer-events: none; } /* iPad+ / desktop: slightly larger meta + title */ @media (min-width: 768px) { .news-accordion__head { padding: 1.1rem 1.25rem; gap: 1rem; } .news-accordion__date { font-size: 0.92rem; } .news-accordion__cat { font-size: 0.8rem; } .news-accordion__title { font-size: 1.1rem; } .news-accordion__body { padding: 0 1.25rem 1.35rem; } .news-accordion__thumb { margin-top: 1.1rem; max-width: 24rem; } .news-accordion__excerpt { font-size: 1rem; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { #news-ticker, #news-ticker .ticker-track, .reason-card, .sticky-cta-bar, #chatbot-toggle, /* Hero v3 — silence all loops + entries */ .hero__bg-shape--square, .hero__bg-shape--ring, .hero__bg-shape--dot, .hero__eyebrow, .hero__eyebrow-dot, .hero__headline, .hero__headline-big-bang, .hero__support, .hero__cta-row, .hero__cta-primary::before, .hero__trust, .hero__visual, .hero__bottom::after, /* Shine sweeps */ #site-header a.bg-\[\#06C755\]::before, #site-header .site-header-cta__mail::before, .sticky-cta-bar a.bg-\[\#06C755\]::before, .sticky-cta-bar button.bg-secondary::before, #section-column a.border-primary::before, #section-contact #contact-submit::before, #section-cases [data-slot="card"] .bg-gradient-to-r::before, .reason-card::before, #section-flow ul > li::before { animation: none !important; } [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; } /* Mobile menu — keep fade visibility, drop transforms */ #mobile-menu.mobile-menu, #mobile-menu.mobile-menu .mobile-menu__panel { transition: opacity 0.15s ease, visibility 0s linear !important; } #mobile-menu.mobile-menu .mobile-menu__panel { transform: none !important; } /* News accordion — drop fade animation */ .news-accordion__body { animation: none !important; } .news-accordion .news-accordion__chevron { transition: none !important; } }