/*
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: #185FA5;
--primary-foreground: #ffffff;
--secondary: #185FA5;
--secondary-foreground: #ffffff;
--accent: #991b1b;
--accent-foreground: #ffffff;
--destructive: #991b1b;
--destructive-foreground: #ffffff;
--foreground: #4B5563; /* 2026-09 client request: 通常フォントをややグレーに (was #334155) */
--background: #F5F9FD;
--border: #D8E4F0;
--input: #D8E4F0;
--ring: #185FA5;
--muted: #F8FAFC;
--muted-foreground: #64748B;
--ring-color: #185FA5;
/* Brand palette — 2026-09 client request: メイン画像とグリーンが
マッチしないため青系(標準青 #185FA5)へ変更 (was Tiffany teal) */
--brand-teal: #185FA5; /* MAIN — 標準青 */
--brand-teal-light: #4F8FCB; /* lighter blue for accents */
--brand-teal-dark: #124876; /* deep blue for CTAs */
--brand-teal-deeper: #0C355A; /* darkest */
--brand-mint: #E6F0FA; /* section bg */
--brand-mint-soft: #F2F8FD; /* page / hero bg */
/* Orange variables retained for back-compat but remapped to blue-system
(per client direction: minimize orange across the site) */
--brand-orange: #124876; /* was #FF8A3D — now dark blue */
--brand-orange-light:#185FA5; /* was #FF8A3D — now 標準青 */
--brand-orange-deep: #124876; /* was #F97316 — now dark blue */
--brand-orange-dark: #0C355A; /* was #D95713 — now darkest blue */
--brand-yellow: #FFD84D;
--brand-yellow-pale: #FFE680; /* lighter yellow per "薄黄色OK" */
--brand-border: #C9DFF2;
--brand-border-strong:#9CC3E8;
/* 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: 1.75rem; /* 28px — tightened mobile rhythm */
--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 (2026-09: retinted teal→blue) */
--brand-red-dark: #124876;
--brand-red-deep: #0C355A;
}
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 */
.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;
}
.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 */
.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-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-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; } }
/* 02 心当たり — geometric texture, client-supplied image (2026-09 client request:
方眼紙から幾何学模様へ差し替え。画像をそのままの濃さで見せたいとのことなので
白レイヤーは外している。直下の「1つでも当てはまる方は要注意です！」の行は
チェックリストの白いカードの外にあるため、濃い画像の上に直接乗る点に注意。 */
#section-reasons {
background:
url('assets/images/section-reasons-bg.jpg') center center / cover no-repeat,
#ffffff !important;
}
#section-cases { background: var(--brand-mint) !important; border-top: 0; 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%);
}
/* 2026-09 client request: テロップ不要 — hide the scrolling news ticker bar */
#news-ticker {
display: none !important;
}
/* 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 — bolder decorative bg (2026-07-03 client request: 「もっと派手に」)
yellow corner glows + teal dot grid layered over stronger mint stripes */
#section-faq {
background:
radial-gradient(circle at 6% 10%, rgba(255, 216, 77, 0.30), transparent 32%),
radial-gradient(circle at 94% 90%, rgba(255, 216, 77, 0.26), transparent 30%),
radial-gradient(rgba(10, 150, 144, 0.12) 1.5px, transparent 1.5px) 0 0 / 26px 26px,
repeating-linear-gradient(
-45deg,
#ffffff,
#ffffff 0.2rem,
var(--brand-mint) 0.2rem,
var(--brand-mint) 1rem
) !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, no bottom rail (wedge connector handles transition) */
#section-reasons {
background: #ffffff;
border-top: 6px solid var(--brand-teal-light);
border-bottom: 0;
}
/* 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-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,
.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),
.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) */
.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;
}
.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);
}
/* 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__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-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-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%);
}
/* Section h2 — clean underline only (premium, not stamp-like) */
#section-cases 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-cases h2,
#section-column h2,
#section-faq h2 {
color: var(--text-heading) !important;
font-size: 2.3rem; /* 2026-07-03: bumped from 2.1rem per client (もっと大きく) */
letter-spacing: -0.01em;
line-height: 1.2;
}
@media (min-width: 768px) {
#section-cases h2,
#section-column h2,
#section-faq h2 { font-size: 2.75rem; } /* was 2.45rem */
}
/* Section title margin per design tokens */
#section-cases > .container > .text-center,
#section-column > .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-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;
}
/* ---- 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(18, 72, 118, 0.2),
0.15rem 0.15rem 0 rgba(18, 72, 118, 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; }
}
/* 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 */
}
}
/* 2026-09 client request: ロゴの白抜きの枠をなくす */
.brand-logo-footer {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.footer-mobile__logo-card {
background: transparent !important;
box-shadow: none !important;
}
.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 */
}
}
/* ===== Sticky CTA bar (floating bottom bar) ===== */
.sticky-cta-bar {
animation: sticky-cta-slideup 0.3s ease-out both;
}
@keyframes sticky-cta-slideup {
from { transform: translate3d(0, 100%, 0); }
to { transform: translate3d(0, 0, 0); }
}
/* Desktop: do not cover the opening hero. The script reveals this bar once
the visitor has started scrolling, and hides it again after returning top. */
@media (min-width: 768px) {
.sticky-cta-bar {
animation: none;
transform: translate3d(0, 100%, 0);
visibility: hidden;
pointer-events: none;
transition: transform 0.28s ease, visibility 0s linear 0.28s;
will-change: transform;
}
.sticky-cta-bar.sticky-cta-bar--shown {
transform: translate3d(0, 0, 0);
visibility: visible;
pointer-events: auto;
transition: transform 0.28s ease, visibility 0s linear 0s;
}
}
/* Keep main page content from being hidden behind the bar */
body.has-sticky-cta { padding-bottom: 88px; }
@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(18, 72, 118, 0.04),
0 4px 10px rgba(18, 72, 118, 0.06),
0 16px 40px rgba(18, 72, 118, 0.08);
--shadow-soft-lg: 0 2px 4px rgba(18, 72, 118, 0.05),
0 8px 20px rgba(18, 72, 118, 0.08),
0 24px 60px rgba(18, 72, 118, 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(18, 72, 118, 0.3),
0 16px 34px rgba(18, 72, 118, 0.2);
}
/* "まずはお気軽にご相談ください" bottom banner — keep shimmer, just use teal */
#section-hero > .bg-\[\#0f2350\] {
background: linear-gradient(90deg, var(--brand-teal-dark) 0%, var(--brand-teal) 50%, var(--brand-teal-dark) 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(18, 72, 118, 0.05),
0 4px 12px rgba(18, 72, 118, 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(18, 72, 118, 0.12),
0 16px 40px rgba(18, 72, 118, 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(18, 72, 118, 0.1),
0 10px 30px rgba(18, 72, 118, 0.18);
}
#section-cases .carousel-arrow:hover {
box-shadow:
0 4px 10px rgba(18, 72, 118, 0.15),
0 20px 40px rgba(18, 72, 118, 0.25);
}
/* ===== 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(18, 72, 118, 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(18, 72, 118, 0.2))
drop-shadow(0 2px 4px rgba(18, 72, 118, 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 */
}
}
/* ========================================================================
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: 1.1rem;
line-height: 1.45;
}
#section-column .column-card p {
font-size: 0.95rem;
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(18, 72, 118, 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(18, 72, 118, 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(18, 72, 118, 0.15);
}
.column-pagination .page-numbers.current {
background: var(--primary, #0a6972);
border-color: var(--primary, #0a6972);
color: #fff;
box-shadow: 0 4px 10px rgba(18, 72, 118, 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; }
}
/* ========================================================================
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;
/* 2026-07-13: was a fixed 0.95rem. クライアント指定の2行構成（sp-br）を
320px端末でも崩さない上限に画面幅連動で拡大。最長行は
「クーリングオフはできない」14文字 ≒ 4.6vw × 14 が有効幅に収まる。 */
font-size: clamp(0.875rem, 4.6vw, 1.125rem) !important;
line-height: 1.45 !important;
}
@media (min-width: 768px) {
#section-reasons .grid > div span {
font-size: 1.125rem !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 .cases-common-tactics {
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;
}
/* (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: 1.15rem !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.2rem !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: var(--brand-teal-light) !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, var(--brand-teal-light) 0%, var(--brand-teal) 50%, var(--brand-teal-dark) 100%);
overflow: hidden;
/* Fallback padding-top if .hero--image-only is ever removed; the current
image-only hero (#section-hero.hero.hero--image-only below) overrides
this back to 0 since the artwork contains its own spacing. */
padding: 92px 0 0 !important;
border: 0;
}
@media (min-width: 768px) {
#section-hero.hero { padding-top: 124px !important; }
}
@media (min-width: 1024px) {
#section-hero.hero { padding-top: 132px !important; }
}
/* ---------- 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 100%;
max-width: 880px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
/* ---------- 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;
}
.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.2rem; /* 2026-07-03: bumped — now the hero's main supporting copy */
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.4rem; margin: 1.5rem 0 1.75rem; } /* was 1.05rem */
}
/* ---------- 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, #4F8FCB 0%, #185FA5 50%, #124876 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__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;
isolation: isolate;
/* 2026-09 client request: client-supplied geometric gradient image as
section background (replaces the pale mint/green gradient). */
background: url('assets/images/section-accent-bg.jpg') center center / cover no-repeat !important;
padding: 6.75rem 0 7.5rem !important;
border-bottom: 1px solid var(--brand-border);
overflow: hidden;
}
#section-benefits.benefits-strip::before,
#section-benefits.benefits-strip::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
/* 2026-09: section background is now the client-supplied photo, so the old
decorative dot-pattern + glow overlays are turned off to avoid doubling up. */
#section-benefits.benefits-strip::before,
#section-benefits.benefits-strip::after {
display: none;
}
#section-benefits.benefits-strip > .container {
position: relative;
z-index: 1;
}
@media (max-width: 767.98px) {
#section-benefits.benefits-strip::before {
background-size: 260px auto;
opacity: 0.84;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}
}
@media (min-width: 768px) {
#section-benefits.benefits-strip { padding: 9rem 0 9.75rem !important; }
}
/* ===== 2026-06-27 meeting: 01/02/03 section gaps tripled =====
section-benefits (above), section-reasons, section-cases — each
section's own py-* padding tripled so the visible gap at every
section boundary is ~3x the original. */
#section-reasons {
padding-top: 9rem !important;
padding-bottom: 9rem !important;
}
@media (min-width: 768px) {
#section-reasons {
padding-top: 15rem !important;
padding-bottom: 15rem !important;
}
}
#section-cases {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
}
/* 03 解決事例 — マンガのスクリーントーン風ハーフトーン柄 (2026-07-13)。
事例が漫画パネルなのでスクリーントーン（大小2層の網点）を主役にしつつ、
FAQでも使っている斜め帯と黄色グローを重ねてサイト全体の装飾言語へ接続。
大判の白／黄色ビームを1層足し、カードの外側でだけ華やかさが出る設計。 */
#section-cases {
/* 2026-09 client request: client-supplied geometric gradient image as
section background (replaces the mint/yellow screentone pattern). */
background:
url('assets/images/section-accent-bg.jpg') center center / cover no-repeat !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.85rem;
letter-spacing: 0.32em;
color: var(--brand-teal-dark);
margin-bottom: 0.4rem;
}
.benefits-strip__title {
font-size: 2rem; /* 2026-07-09: aligned with other section h2 scale */
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: 2.4rem; } /* was 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: 3.2rem;
max-width: 32rem;
padding: 0;
list-style: none;
margin: 0 auto;
}
@media (min-width: 768px) {
.benefits-strip .reason-grid--feature {
gap: 3.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;
/* 2026-07-13: 番号(01)を見出しの縦中央（2行時は2行の中央）に置くため
grid化。col1=番号 / col2=見出し、align-items:center で相互センタ。 */
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.9rem;
row-gap: 0.65rem;
align-items: center;
}
@media (min-width: 768px) {
.benefits-strip .reason-card--feature .reason-card__panel {
padding: 0.85rem 1.4rem 0.75rem;
column-gap: 1rem;
row-gap: 0.35rem;
}
}
/* Big outlined "01/02/03" number — grid col1, vertically centered vs label */
.benefits-strip .reason-card--feature .reason-card__num {
position: static;
grid-column: 1;
grid-row: 1;
align-self: center;
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;
}
}
/* 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;
grid-column: 2;
grid-row: 1;
margin: 0;
padding-left: 0;
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;
min-height: 2rem;
}
}
/* Lead description — white smaller text just under the title */
.benefits-strip .reason-card--feature .reason-card__lead {
position: relative;
z-index: 2;
grid-column: 1 / -1;
margin: 0 0 1.1rem;
color: #ffffff;
font-size: clamp(1.125rem, 5vw, 1.28rem);
line-height: 1.6;
font-weight: 600;
opacity: 0.95;
}
@media (min-width: 768px) {
.benefits-strip .reason-card--feature .reason-card__lead {
font-size: 1.25rem;
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;
}
/* Photos now fill the visual edge-to-edge (2026-07-12) — the dashed ring
decoration was designed for the old icon-on-mint images and would sit on
top of an opaque photo, so it's dropped here. The <768 and >=1024 blocks
below re-declare their own ::after with explicit content and keep working. */
.benefits-strip .reason-card--feature .reason-card__visual::after {
content: none;
}
.benefits-strip .reason-card--feature .reason-card__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (min-width: 768px) {
.benefits-strip .reason-card--feature .reason-card__visual {
aspect-ratio: 16 / 4;
}
}
/* 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
======================================================================== */
/* 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: #ef4444 !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;
paint-order: stroke fill !important;
-webkit-text-stroke: 3px #ffffff !important;
filter: none !important;
text-shadow:
3px 3px 0 #b91c1c,
5px 5px 0 #991b1b,
7px 7px 0 #7f1d1d,
9px 9px 0 #5a0e0e,
11px 16px 24px rgba(0, 0, 0, 0.55) !important;
transform: rotate(-3.5deg) !important;
margin-top: 0.15rem;
letter-spacing: -0.045em;
}
@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 .cases-common-tactics {
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 .cases-common-tactics { padding: 1.85rem !important; }
}
/* Heading "共通する手口の特徴" — bigger and bolder */
#section-cases .cases-common-tactics > h4 {
font-size: 1.35rem !important;
font-weight: 900 !important;
color: var(--muted-foreground) !important; /* 2026-09 client request: グレーに (was --text-heading) */
margin-bottom: 1rem !important;
padding-bottom: 0.85rem;
border-bottom: 2px solid var(--brand-mint);
}
@media (min-width: 768px) {
#section-cases .cases-common-tactics > h4 { font-size: 1.35rem !important; }
}
#section-cases .cases-common-tactics > 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 .cases-common-tactics .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 .cases-common-tactics .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 .cases-common-tactics .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 .cases-common-tactics .bg-white strong {
font-size: clamp(1.125rem, 5vw, 1.28rem) !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 .cases-common-tactics .bg-white p {
font-size: clamp(1.125rem, 5vw, 1.28rem) !important;
color: #475569 !important;
line-height: 1.55 !important;
margin-top: 0.25rem !important;
font-weight: 500;
}
@media (min-width: 768px) {
#section-cases .cases-common-tactics .bg-white strong { font-size: 1.125rem !important; }
#section-cases .cases-common-tactics .bg-white p { font-size: 1.125rem !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 {
/* 2026-07-03: 01/02/03 gaps widened per client (was 1.5rem) */
padding: 4.5rem 0 4.5rem !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: 3.2rem;
}
.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: var(--brand-teal-light);
border-top-right-radius: 7.6rem;
column-gap: 1rem;
row-gap: 1rem;
}
.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;
padding-left: 0;
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.125rem, 5vw, 1.28rem);
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;
}
}
/* Desktop POINT cards — wide alternating panels like the reference site. */
@media (min-width: 1024px) {
#section-benefits.benefits-strip {
/* Keep the generous desktop spacing; the shared seamless background
above is intentionally retained at every breakpoint. */
padding: 5.5rem 0 9rem !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: 5.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;
/* 2026-07-13: hug the content — the old fixed-height floor
(--desktop-card-height) left a large empty teal area under the
shorter copy. The card is now exactly as tall as its text panel,
and the photo centers against it (see .reason-card__visual). */
height: auto;
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: auto;
min-height: 0;
padding: 3.45rem 4.15rem 3.6rem clamp(10rem, 14.6vw, 18.9rem);
background: var(--brand-teal-light);
border-radius: 0 5.45rem 5.45rem 0;
overflow: hidden;
column-gap: clamp(1.8rem, 2.2vw, 2.8rem);
row-gap: 1.65rem;
}
.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: 0;
margin: 0;
padding-left: 0;
padding-right: 0;
display: flex;
align-items: center;
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: 0;
}
.benefits-strip .reason-card--feature .reason-card__lead {
position: relative;
z-index: 2;
width: min(100%, 43rem);
margin: 0; /* 2026-07-13: was 2.2rem — the lead is now the last element */
color: #ffffff;
font-size: clamp(1.5rem, 1.7vw, 1.9rem);
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: 50%;
transform: translateY(-50%);
/* 2026-07-13: tuck the photo 5.5rem UNDER the panel (panel is
z-index 2, photo 1) so the panel's 5.45rem rounded end curves
over the photo instead of leaving a crescent of page background
between the curve and the photo's straight edge. Width grows by
the same amount so the outer edge stays where it was. */
left: calc(var(--desktop-panel-width) - 5.5rem);
width: calc(var(--desktop-visual-width) + 5.5rem);
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));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.benefits-strip .reason-card--feature:nth-child(even) .reason-card__visual {
right: calc(var(--desktop-panel-width) - 5.5rem);
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%;
}
/* 2026-07-13: gradient wash + radar-ring overlays removed — they were
tuned for the old tinted illustration imagery and read as artifacts
over the new photographic images. */
.benefits-strip .reason-card--feature .reason-card__visual::before,
.benefits-strip .reason-card--feature .reason-card__visual::after {
content: none;
}
/* 全額返金 blocks sit low AND their "!!" hugs the right edge of image02.
Vertical: bias the crop toward the bottom. Horizontal: the 5.5rem
panel tuck would swallow the "!!", so slide the image half the tuck
to the left — the hidden strip is then split between the image's
left edge (finger area, expendable) and right edge (clears the !!). */
.benefits-strip .reason-card--feature:nth-child(2) .reason-card__photo {
object-position: 50% 68%;
transform: translateX(-2.75rem);
}
}
/* (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(18, 72, 118, 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, #4F8FCB 0%, #185FA5 50%, #124876 100%) !important;
background-image: linear-gradient(135deg, #4F8FCB 0%, #185FA5 50%, #124876 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.85rem !important;
letter-spacing: -0.01em;
white-space: nowrap;
}
@media (min-width: 768px) {
#section-contact #contact-submit-subtext {
font-size: 1rem !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;
}
/* ---- 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.15rem;
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.2rem;
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: 1.05rem;
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.95rem;
font-weight: 800;
padding: 0.15rem 0.55rem;
border-radius: 999px;
white-space: nowrap;
}
.news-accordion__title {
flex: 1;
font-size: 1.28rem;
font-weight: 600; /* 2026-09 client request: ニュース記事の文字が太い (was 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: 1.15rem;
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: 1.05rem;
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: 1.08rem; }
.news-accordion__cat { font-size: 0.98rem; }
.news-accordion__title { font-size: 1.35rem; }
.news-accordion__body {
padding: 0 1.25rem 1.35rem;
}
.news-accordion__thumb {
margin-top: 1.1rem;
max-width: 24rem;
}
.news-accordion__excerpt {
font-size: 1.1rem;
}
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
#news-ticker,
#news-ticker .ticker-track,
.reason-card,
.sticky-cta-bar,
/* 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__bottom::after,
/* Shine sweeps */
.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 {
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;
}
}
/* ==========================================================================
#section-flow — strong02 (boat-assist style) full redesign
========================================================================== */
#section-flow.flow-strong02 {
position: relative;
background: var(--brand-teal-dark);
color: #ffffff;
padding: 3rem 1rem 2rem;
overflow: hidden;
isolation: isolate;
}
#section-flow.flow-strong02::before,
#section-flow.flow-strong02::after {
content: "";
position: absolute;
z-index: -1;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
pointer-events: none;
}
#section-flow.flow-strong02::before {
top: -6rem;
right: -6rem;
width: 18rem;
height: 18rem;
}
#section-flow.flow-strong02::after {
bottom: -5rem;
left: -6rem;
width: 16rem;
height: 16rem;
}
#section-flow .flow-strong02__container {
max-width: 480px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 1;
}
/* --- Header ---------------------------------------------------------------- */
#section-flow .flow-strong02__header {
position: relative;
margin-bottom: 2.5rem;
padding-top: 1.5rem;
}
#section-flow .flow-strong02__kicker {
display: block;
text-align: center;
font-family: "Lato", sans-serif;
font-weight: 900;
color: #991b1b;
letter-spacing: 0.32em;
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
#section-flow .flow-strong02__title {
display: block;
margin: 0;
padding: 0;
text-align: left;
position: relative;
}
#section-flow .flow-strong02__title-floating {
display: block;
color: #ffffff;
font-weight: 700;
font-size: 1.6rem; /* 2026-07-03: bumped from 1.4rem per client (もっと大きく) */
line-height: 1.3;
text-align: center;
margin-bottom: 1.8rem;
letter-spacing: 0.02em;
}
#section-flow .flow-strong02__title-floating strong {
color: #ffffff;
font-weight: 900;
font-size: 2.2rem; /* was 1.9rem */
margin: 0 0.15em;
letter-spacing: 0.04em;
}
#section-flow .flow-strong02__figure {
position: relative;
display: flex;
align-items: flex-end;
margin: 0;
padding: 0;
min-height: 5.5rem;
}
#section-flow .flow-strong02__bar {
flex: 1;
background: #ffffff;
padding: 0.45rem 7.5rem 0.45rem 1.2rem;
border-radius: 0.4rem;
line-height: 1.25;
color: var(--brand-teal-dark);
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}
#section-flow .flow-strong02__bar-sub {
display: block;
font-size: 1.1rem;
font-weight: 700;
color: var(--brand-teal-dark);
margin-bottom: 0.15rem;
}
#section-flow .flow-strong02__bar-main {
display: block;
font-size: 1.55rem;
font-weight: 800;
color: var(--brand-teal-dark);
line-height: 1.2;
}
#section-flow .flow-strong02__bar-main strong {
color: #991b1b;
font-weight: 900;
font-size: 2.2rem;
margin-right: 0.1em;
letter-spacing: 0.01em;
}
#section-flow .flow-strong02__bar-main em {
display: inline-block;
font-style: normal;
color: #991b1b;
font-weight: 900;
font-size: 1.9rem;
transform: rotate(12deg);
transform-origin: 50% 70%;
margin-left: 0.1em;
}
#section-flow .flow-strong02__chara {
position: absolute;
right: -0.2rem;
top: auto;
bottom: -1rem;
width: 7rem;
height: auto;
z-index: 2;
pointer-events: none;
object-fit: contain;
object-position: center bottom;
}
#section-flow .flow-strong02__lead-copy {
color: #ffffff;
font-weight: 700;
text-align: center;
font-size: 1.1rem;
line-height: 1.55;
margin: 1.5rem 0 0;
}
/* --- Card list ------------------------------------------------------------- */
#section-flow .flow-strong02__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 3.2rem;
margin: 2.5rem 0 0;
padding: 0;
}
#section-flow .flow-strong02__list > * + * { margin-top: 0; }
#section-flow .flow-strong02__card {
background: #ffffff;
color: var(--brand-teal-dark);
padding: 1.5rem 1.2rem 0.4rem;
position: relative;
overflow: visible;
box-shadow: 0.4rem 0.4rem 0 rgba(8, 42, 69, 0.55);
}
#section-flow .flow-strong02__card:nth-child(odd) {
border-radius: 0 4rem 4rem 0;
margin-right: 1.2rem;
}
#section-flow .flow-strong02__card:nth-child(even) {
border-radius: 4rem 0 0 4rem;
margin-left: 1.2rem;
padding-left: 1.8rem;
}
#section-flow .flow-strong02__card-inner {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#section-flow .flow-strong02__card-text {
position: relative;
padding-left: 3.4rem;
min-height: 2.6rem;
}
#section-flow .flow-strong02__card-num {
position: absolute;
left: 0;
top: -0.4rem;
font-family: "Lato", sans-serif;
font-weight: 900;
font-size: 2.6rem;
line-height: 1;
color: #991b1b;
-webkit-text-stroke: 1px rgba(18, 72, 118, 0.25);
}
#section-flow .flow-strong02__card-title {
display: block;
margin: 0 0 0.6rem;
color: var(--brand-teal-deeper);
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
font-weight: 900;
font-size: 1.55rem;
line-height: 1.4;
letter-spacing: -0.01em;
}
#section-flow .flow-strong02__card-desc {
margin: 0;
color: #2c4f53;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
font-size: 1.2rem;
line-height: 1.7;
font-weight: 500;
letter-spacing: 0.005em;
}
#section-flow .flow-strong02__card-img {
display: block;
width: 70%;
max-width: 240px;
height: auto;
margin: 0.4rem auto -1.8rem;
position: relative;
z-index: 1;
}
/* --- Tablet (>=744px) ----------------------------------------------------- */
@media (min-width: 744px) {
#section-flow.flow-strong02 {
padding: 6rem 1.5rem 5rem;
}
#section-flow.flow-strong02::before {
top: -8rem;
right: -10rem;
width: 30rem;
height: 30rem;
}
#section-flow.flow-strong02::after {
bottom: -10rem;
left: -10rem;
width: 32rem;
height: 32rem;
}
#section-flow .flow-strong02__container {
max-width: 720px;
}
#section-flow .flow-strong02__header {
margin-bottom: 3rem;
padding-top: 2rem;
}
#section-flow .flow-strong02__kicker {
font-size: 1rem;
}
#section-flow .flow-strong02__title-floating {
font-size: 2rem;
margin-bottom: 1rem;
}
#section-flow .flow-strong02__title-floating strong {
font-size: 3.2rem;
}
#section-flow .flow-strong02__bar {
padding: 1rem 10rem 1rem 2rem;
}
#section-flow .flow-strong02__bar-sub {
font-size: 1.2rem;
}
#section-flow .flow-strong02__bar-main {
font-size: 1.7rem;
}
#section-flow .flow-strong02__bar-main strong {
font-size: 2.6rem;
}
#section-flow .flow-strong02__bar-main em {
font-size: 2.2rem;
}
#section-flow .flow-strong02__chara {
width: 13rem;
right: 0;
}
#section-flow .flow-strong02__lead-copy {
font-size: 1.3rem;
}
#section-flow .flow-strong02__list {
gap: 3rem;
margin-top: 3.5rem;
}
#section-flow .flow-strong02__card {
padding: 2rem 2.5rem 0;
}
#section-flow .flow-strong02__card:nth-child(odd) {
border-radius: 0 3.5rem 3.5rem 0;
margin-right: 2rem;
}
#section-flow .flow-strong02__card:nth-child(even) {
border-radius: 3.5rem 0 0 3.5rem;
margin-left: 2rem;
padding-left: 3rem;
}
#section-flow .flow-strong02__card-text {
padding-left: 4.5rem;
}
#section-flow .flow-strong02__card-num {
font-size: 3.6rem;
top: -0.6rem;
}
#section-flow .flow-strong02__card-title {
font-size: 1.7rem;
}
#section-flow .flow-strong02__card-desc {
font-size: 1.05rem;
}
#section-flow .flow-strong02__card-img {
max-width: 440px;
margin-bottom: -1.8rem;
}
}
/* --- Desktop (>=1024px) — side-by-side cards ------------------------------ */
@media (min-width: 1024px) {
#section-flow.flow-strong02 {
padding: 7rem 2rem 6rem;
}
#section-flow .flow-strong02__container {
max-width: 980px;
}
#section-flow .flow-strong02__header {
margin-bottom: 4rem;
}
#section-flow .flow-strong02__title-floating {
font-size: 2.2rem;
}
#section-flow .flow-strong02__title-floating strong {
font-size: 3.6rem;
}
#section-flow .flow-strong02__bar {
padding: 1.1rem 12rem 1.1rem 2.5rem;
}
#section-flow .flow-strong02__bar-sub {
font-size: 1.3rem;
}
#section-flow .flow-strong02__bar-main {
font-size: 1.85rem;
}
#section-flow .flow-strong02__bar-main strong {
font-size: 2.9rem;
}
#section-flow .flow-strong02__bar-main em {
font-size: 2.4rem;
}
#section-flow .flow-strong02__chara {
width: 14.5rem;
right: 1rem;
}
#section-flow .flow-strong02__lead-copy {
font-size: 1.4rem;
margin-top: 2rem;
}
#section-flow .flow-strong02__list {
gap: 3.5rem;
}
#section-flow .flow-strong02__card {
padding: 0;
margin: 0;
}
#section-flow .flow-strong02__card:nth-child(odd),
#section-flow .flow-strong02__card:nth-child(even) {
margin: 0;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
#section-flow .flow-strong02__card-inner {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
background: #ffffff;
padding: 1.8rem 2.5rem;
box-shadow: 0.5rem 0.5rem 0 rgba(8, 42, 69, 0.55);
position: relative;
}
#section-flow .flow-strong02__card:nth-child(odd) .flow-strong02__card-inner {
border-radius: 0 4rem 4rem 0;
margin-right: 3rem;
padding-right: 1.5rem;
}
#section-flow .flow-strong02__card:nth-child(even) .flow-strong02__card-inner {
flex-direction: row-reverse;
border-radius: 4rem 0 0 4rem;
margin-left: 3rem;
padding-left: 1.5rem;
}
#section-flow .flow-strong02__card-text {
flex: 1;
min-width: 0;
padding-left: 5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
#section-flow .flow-strong02__card-num {
font-size: 4rem;
top: -0.4rem;
}
#section-flow .flow-strong02__card-title {
font-size: 1.9rem;
margin-bottom: 0.5rem;
}
#section-flow .flow-strong02__card-desc {
font-size: 1.1rem;
}
#section-flow .flow-strong02__card-img {
flex: 0 0 320px;
width: 320px;
max-width: 320px;
margin: 0;
position: relative;
bottom: 0;
}
}
@media (max-width: 743.98px) {
#site-footer.site-footer-mobile { background: linear-gradient(180deg, #124876 0%, #0F3C63 55%, #0C355A 100%) !important; padding: 1.75rem 0 5rem !important; border-top: 6px solid var(--brand-teal-light) !important; }
#site-footer.site-footer-mobile .footer-mobile__dots { opacity: 0.04; background-size: 14px 14px; }
.footer-mobile { display: flex; flex-direction: column; align-items: stretch; padding: 0 1.25rem; }
.footer-mobile__hero { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.footer-mobile__logo-card { flex: 1 1 auto; align-self: stretch; background: #ffffff; border-radius: 0.9rem; padding: 0.25rem 0.35rem; box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; min-width: 0; }
.footer-mobile__logo-img { display: block; width: 100%; height: auto; max-height: 6.8rem; object-fit: contain; }
.footer-mobile__illust-col { flex: 0 0 7.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.footer-mobile__speech { position: relative; display: inline-block; background: #FFD84D; color: #0C355A; font-size: 0.92rem; font-weight: 900; line-height: 1.3; padding: 0.45rem 0.75rem; border-radius: 0.75rem; box-shadow: 0 5px 12px rgba(0,0,0,0.22); text-align: center; letter-spacing: 0.02em; white-space: nowrap; }
.footer-mobile__speech::after { content: ''; position: absolute; bottom: -0.3rem; left: 50%; transform: translateX(-50%) rotate(45deg); width: 0.65rem; height: 0.65rem; background: #FFD84D; border-radius: 0.15rem; }
.footer-mobile__illust { position: relative; width: 100%; height: 6.5rem; }
.footer-mobile__illust-halo { position: absolute; inset: 0.4rem; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255,216,77,0.32) 0%, rgba(255,216,77,0.16) 42%, rgba(10,150,144,0) 72%); filter: blur(2px); z-index: 0; animation: footerMobileHalo 4.5s ease-in-out infinite; }
@keyframes footerMobileHalo { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }
.footer-mobile__illust-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.footer-mobile__brand { text-align: center; margin-bottom: 1.1rem; }
.footer-mobile__badge { display: inline-block; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.1em; color: #0C355A; background: #FFD84D; padding: 0.22rem 0.8rem; border-radius: 999px; margin-bottom: 0.45rem; }
.footer-mobile__name { font-size: 1.4rem; font-weight: 900; line-height: 1.2; letter-spacing: 0.02em; color: #ffffff; margin: 0 0 0.35rem; }
.footer-mobile__tagline { font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0; font-weight: 600; }
.footer-mobile__nav { margin-bottom: 1rem; }
.footer-mobile__nav-title { display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; font-weight: 900; color: #FFD84D; letter-spacing: 0.08em; margin: 0 0 0.6rem; }
.footer-mobile__nav-title::before { content: ''; display: block; width: 1.3rem; height: 2px; background: #FFD84D; border-radius: 2px; flex-shrink: 0; }
.footer-mobile__nav-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,216,77,0.4), rgba(255,216,77,0)); }
.footer-mobile__pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; list-style: none; padding: 0; margin: 0; }
.footer-mobile__pills-wide { grid-column: 1 / -1; }
.footer-mobile__pill { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.65rem 0.5rem; font-size: 0.95rem; font-weight: 800; color: #ffffff; text-decoration: none; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 0.7rem; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
.footer-mobile__pill:active { background: rgba(255,216,77,0.18); border-color: rgba(255,216,77,0.5); transform: scale(0.97); }
.footer-mobile__pill--wide { background: rgba(255,216,77,0.12); border-color: rgba(255,216,77,0.35); color: #FFD84D; }
.footer-mobile__cta { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.95rem; }
.footer-mobile__cta-tel { display: flex; flex-direction: column; align-items: center; padding: 0.55rem 1rem; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.8rem; text-decoration: none; color: #ffffff; }
.footer-mobile__cta-tel-label { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; color: #FFD84D; margin-bottom: 0.15rem; }
.footer-mobile__cta-tel-num { font-size: 1.55rem; font-weight: 900; letter-spacing: 0.02em; color: #ffffff; font-variant-numeric: tabular-nums; }
.footer-mobile__cta-line { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.78rem 1.25rem; margin-top: 0.7rem; background: linear-gradient(135deg, #06C755 0%, #05b64d 100%); color: #ffffff; font-size: 1.15rem; font-weight: 900; text-decoration: none; border-radius: 999px; box-shadow: 0 8px 20px rgba(6,199,85,0.32), inset 0 1px 0 rgba(255,255,255,0.2); letter-spacing: 0.04em; }
.footer-mobile__cta-line-icon { width: 1.3rem; height: 1.3rem; }
.footer-mobile__meta { margin-bottom: 0.85rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,216,77,0.25); border-radius: 0.8rem; overflow: hidden; }
.footer-mobile__meta-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0.68rem 1rem; font-size: 0.95rem; font-weight: 800; color: #ffffff; }
.footer-mobile__meta-summary::-webkit-details-marker { display: none; }
.footer-mobile__meta-label { position: relative; padding-left: 0.875rem; letter-spacing: 0.04em; }
.footer-mobile__meta-label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 0.95rem; background: #FFD84D; border-radius: 2px; }
.footer-mobile__meta-chev { width: 0.55rem; height: 0.55rem; border-right: 2px solid #FFD84D; border-bottom: 2px solid #FFD84D; transform: rotate(45deg); transition: transform 0.25s ease; margin-top: -0.15rem; }
.footer-mobile__meta[open] .footer-mobile__meta-chev { transform: rotate(-135deg); margin-top: 0.15rem; }
.footer-mobile__meta-body { padding: 0 1rem 0.85rem; }
.footer-mobile__meta-dl { margin: 0; display: grid; grid-template-columns: 3.5rem 1fr; row-gap: 0.45rem; column-gap: 0.6rem; font-size: 0.9rem; line-height: 1.55; }
.footer-mobile__meta-dl dt { color: #FFD84D; font-weight: 800; letter-spacing: 0.04em; }
.footer-mobile__meta-dl dd { margin: 0; color: rgba(255,255,255,0.82); font-weight: 600; }
.footer-mobile__legal { padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; }
.footer-mobile__legal-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.45rem; }
.footer-mobile__legal-links a { color: rgba(255,255,255,0.78); text-decoration: none; }
.footer-mobile__legal-links span { color: rgba(255,255,255,0.3); }
.footer-mobile__copy { font-size: 0.66rem; color: rgba(255,255,255,0.5); letter-spacing: 0.02em; margin: 0; font-weight: 600; line-height: 1.5; }
}
/* FLOW section — full-bleed bar + flat-side bleed on cards (mobile only) */
@media (max-width: 743.98px) {
#section-flow .flow-strong02__container {
max-width: none;
}
#section-flow .flow-strong02__figure {
margin-left: -1rem;
margin-right: -1rem;
}
#section-flow .flow-strong02__bar {
border-radius: 0;
padding-left: 1.5rem;
}
#section-flow .flow-strong02__card:nth-child(odd) {
margin-left: -1rem;
padding-left: 2.2rem;
}
#section-flow .flow-strong02__card:nth-child(even) {
margin-right: -1rem;
padding-right: 2.2rem;
}
}
/* Hero — staff character as subtle teal-tinted background watermark */
#section-hero.hero { position: relative; isolation: isolate; }
#section-hero.hero::after {
content: '';
position: absolute;
inset: 0;
background-image: url('assets/images/staff-review-modern-office.webp');
background-repeat: no-repeat;
background-position: right 70%;
background-size: auto 95%;
opacity: 0.16;
filter: saturate(0.55) brightness(0.7) contrast(1.1);
mix-blend-mode: luminosity;
z-index: 0;
pointer-events: none;
}
@media (max-width: 743.98px) {
#section-hero.hero::after {
background-position: 50% 75%;
background-size: auto 78%;
opacity: 0.16;
}
}
/* Ensure hero content renders ABOVE the watermark */
#section-hero.hero > * { position: relative; z-index: 1; }
#section-hero.hero .hero__bg { z-index: 0; }
/* === 2026-06-01: Reason cards mobile boat-assist clone + hero watermark refine === */
@media (max-width: 743.98px) {
/* --- Reason cards (#section-benefits .reason-grid--feature) --- */
#section-benefits .reason-grid.reason-grid--feature {
list-style: none;
margin: 0;
padding: 0;
gap: 4rem; /* 2026-07-03: was 1.4rem — 01/02/03 cards were too tight */
display: flex;
flex-direction: column;
}
#section-benefits .reason-card.reason-card--feature {
margin: 0;
padding: 0;
background: var(--brand-teal-light);
color: #ffffff;
box-shadow: 0.35rem 0.4rem 0 rgba(8, 42, 69, 0.55);
overflow: hidden;
display: block;
position: relative;
min-height: 0;
height: auto;
border: 0;
}
/* Edge bleed: odd cards flat on left, even flat on right */
#section-benefits .reason-card.reason-card--feature:nth-child(odd) {
margin-left: -1rem;
border-radius: 0 2.2rem 2.2rem 0;
}
#section-benefits .reason-card.reason-card--feature:nth-child(even) {
margin-right: -1rem;
border-radius: 2.2rem 0 0 2.2rem;
box-shadow: -0.35rem 0.4rem 0 rgba(8, 42, 69, 0.55);
}
/* Text panel */
#section-benefits .reason-card.reason-card--feature .reason-card__panel {
padding: 1.2rem 1.25rem 1.1rem;
background: transparent;
border: 0;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.85rem;
row-gap: 0.1rem;
align-items: start;
position: static;
min-height: 0;
max-height: none;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#section-benefits .reason-card.reason-card--feature .reason-card__num {
display: block;
grid-column: 1;
grid-row: 1;
align-self: center;
font-family: 'Lato', 'Inter', sans-serif;
font-weight: 900;
font-size: 1.75rem;
font-style: normal;
line-height: 1;
color: #CDF1ED;
margin: 0;
padding: 0;
letter-spacing: 0.01em;
-webkit-text-stroke: 0;
text-shadow: none;
position: static;
top: auto;
left: auto;
width: auto;
height: auto;
min-width: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
z-index: auto;
}
#section-benefits .reason-card.reason-card--feature .reason-card__label {
display: block;
grid-column: 2;
grid-row: 1;
align-self: start;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
font-size: 1.75rem;
font-weight: 900;
color: #ffffff;
line-height: 1.2;
margin: 0;
max-width: 100%;
letter-spacing: -0.005em;
white-space: normal;
overflow-wrap: break-word;
min-height: 0;
padding-left: 0;
padding-right: 0;
}
#section-benefits .reason-card.reason-card--feature .reason-card__lead {
grid-column: 1 / -1;
margin: 0;
font-size: clamp(1.125rem, 5vw, 1.28rem);
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
line-height: 1.5;
}
#section-benefits .reason-card.reason-card--feature .reason-card__check {
grid-column: 1 / -1;
margin-top: 0.2rem;
display: block;
background: transparent;
padding: 0;
}
#section-benefits .reason-card.reason-card--feature .reason-card__check-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #ffffff;
font-weight: 700;
font-size: 0.88rem;
padding: 0;
background: transparent;
margin: 0 0 0.18rem;
border: 0;
}
#section-benefits .reason-card.reason-card--feature .reason-card__check-tag svg {
width: 1.05rem;
height: 1.05rem;
}
#section-benefits .reason-card.reason-card--feature .reason-card__check-text {
letter-spacing: 0.04em;
}
#section-benefits .reason-card.reason-card--feature .reason-card__check-body {
border: 1.5px solid rgba(255, 255, 255, 0.55);
border-radius: 0.4rem;
padding: 0.4rem 0.7rem;
background: transparent;
}
#section-benefits .reason-card.reason-card--feature .reason-card__body {
margin: 0;
font-size: 0.95rem;
color: #ffffff;
font-weight: 600;
line-height: 1.45;
}
/* Photo area — full-bleed bottom of card */
#section-benefits .reason-card.reason-card--feature .reason-card__visual {
margin: 0;
padding: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18));
background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18));
display: block;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: 5 / 3;
position: relative;
overflow: hidden;
border: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#section-benefits .reason-card.reason-card--feature .reason-card__visual::before,
#section-benefits .reason-card.reason-card--feature .reason-card__visual::after {
content: none;
display: none;
}
#section-benefits .reason-card.reason-card--feature .reason-card__photo {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* 2026-07-12: contain + padding left teal gaps around the photos;
client wants edge-to-edge (slight crop OK) */
object-fit: cover;
object-position: center bottom;
padding: 0;
}
/* --- Hero watermark refinement — more ambient, less silhouette-y --- */
#section-hero.hero::after {
background-size: 75vw auto !important;
background-position: right -10vw bottom 4rem !important;
background-repeat: no-repeat !important;
opacity: 0.3 !important;
filter: saturate(0.6) brightness(0.82) contrast(1.1) blur(0.5px) !important;
-webkit-mask-image: radial-gradient(ellipse 70% 75% at 78% 75%, #000 50%, transparent 95%) !important;
mask-image: radial-gradient(ellipse 70% 75% at 78% 75%, #000 50%, transparent 95%) !important;
}
/* --- FLOW card mobile: vertically align number ① and title via grid --- */
#section-flow .flow-strong02__card-text {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.75rem;
align-items: center;
padding-left: 0;
min-height: auto;
position: static;
}
#section-flow .flow-strong02__card-num {
position: static;
grid-column: 1;
grid-row: 1;
font-size: 2.4rem;
line-height: 1;
align-self: center;
margin: 0;
padding: 0;
top: auto;
left: auto;
}
#section-flow .flow-strong02__card-title {
grid-column: 2;
grid-row: 1;
align-self: center;
margin: 0;
}
#section-flow .flow-strong02__card-desc {
grid-column: 1 / -1;
margin-top: 0.55rem;
}
}
@media (max-width: 743.98px) {
/* News section — dynamic heading */
#section-column {
padding-top: 1.25rem !important;
padding-bottom: 1.5rem !important;
}
#section-column .container > .text-center {
margin-bottom: 1rem !important;
}
#section-column h2 {
position: relative;
display: inline-block;
font-size: 2rem !important;
font-weight: 900 !important;
letter-spacing: 0.04em;
line-height: 1 !important;
color: var(--brand-teal-deeper) !important;
margin: 0 0 0.4rem !important;
padding: 0 !important;
transform: rotate(-1.5deg);
}
#section-column h2 > span {
position: relative;
border-bottom: 0 !important;
padding-bottom: 0 !important;
background: linear-gradient(180deg, transparent 0%, transparent 65%, #FFD84D 65%, #FFD84D 90%, transparent 90%);
padding: 0 0.3rem;
}
#section-column .container > .text-center > p {
font-size: 0.78rem !important;
color: #4a5d63 !important;
font-weight: 700 !important;
margin-top: 0.3rem !important;
}
/* 2026-07-03: mobile 01/02/03 gaps widened ~3x per client (were 1.75 / 1.5 / 1.25rem) */
#section-cases {
padding-bottom: 5.25rem !important;
}
#section-reasons {
padding-bottom: 4.5rem !important;
}
#section-cases {
padding-top: 3.75rem !important;
}
/* Edit 4: tighten FLOW section vertical padding + boost kicker contrast on mobile */
#section-flow.flow-strong02 {
padding-top: 2rem !important;
padding-bottom: 1rem !important;
}
#section-flow .flow-strong02__kicker,
.flow-strong02 .flow-strong02__kicker {
color: #FFD84D !important;
}
/* Edit 5: tighten FAQ and CONTACT mobile padding */
#section-faq {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
#section-contact {
padding-top: 1.5rem !important;
padding-bottom: 1.75rem !important;
}
}
/* === #section-flow background pattern decorations (subtle blended) === */
/* Final override: widen the 4 POINT card spacing with sibling margins.
This is intentionally placed after the mobile-specific card restyle because
earlier gap rules are overridden by the later #section-benefits selectors. */
#section-benefits .reason-grid.reason-grid--feature {
gap: 0 !important;
}
#section-benefits .reason-grid.reason-grid--feature > .reason-card.reason-card--feature + .reason-card.reason-card--feature {
margin-top: 3.2rem !important;
}
@media (max-width: 743.98px) {
#section-benefits .reason-grid.reason-grid--feature > .reason-card.reason-card--feature + .reason-card.reason-card--feature {
margin-top: 3.2rem !important;
}
}
@media (min-width: 1024px) {
#section-benefits .reason-grid.reason-grid--feature > .reason-card.reason-card--feature + .reason-card.reason-card--feature {
margin-top: 3.2rem !important;
}
}
/* Image-only hero: the supplied artwork contains all hero text and visuals. */
#section-hero.hero.hero--image-only {
padding: 0 !important;
margin: 0;
background: #ffffff !important;
overflow: hidden;
border: 0;
}
#section-hero.hero.hero--image-only::before,
#section-hero.hero.hero--image-only::after {
content: none !important;
display: none !important;
}
#section-hero.hero.hero--image-only .hero-image {
display: block;
width: 100%;
}
#section-hero.hero.hero--image-only .hero-image__img {
display: block;
width: 100%;
height: auto;
}
/* Front page temporary header: hamburger only, overlaid on the hero image. */
#site-header.site-header--hero-menu-only {
position: absolute !important;
top: 0;
left: 0;
right: 0;
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#site-header.site-header--hero-menu-only > .container {
justify-content: flex-end !important;
}
#site-header.site-header--hero-menu-only > .container > a {
display: none !important;
}
#site-header.site-header--hero-menu-only #mobile-menu-toggle {
color: #ffffff !important;
background: rgba(0, 24, 72, 0.28) !important;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0, 20, 60, 0.22);
}
#site-header.site-header--hero-menu-only #mobile-menu-toggle:hover {
background: rgba(0, 24, 72, 0.42) !important;
}
#section-flow.flow-strong02 {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(135deg, #075b5d 0%, #064b50 52%, #043f43 100%) !important;
}
#section-flow.flow-strong02::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
background-image: url("assets/images/flow-cube-pattern.svg");
background-repeat: repeat;
background-position: center top;
background-size: clamp(200px, 18vw, 280px) auto;
opacity: 0.72;
z-index: 0;
pointer-events: none;
}
#section-flow.flow-strong02::after {
content: none;
display: none;
}
/* Lift the FLOW content above the decorations */
#section-flow.flow-strong02 > .flow-strong02__container {
position: relative;
z-index: 1;
}
@media (max-width: 743.98px) {
#section-flow.flow-strong02::before {
background-size: 168px auto;
background-position: center top;
opacity: 0.66;
}
}
/* === Section connector wedge — large triangle bridging #section-reasons → #section-cases === */
#section-cases {
position: relative;
isolation: isolate;
overflow: hidden;
}
/* 2026-07-13: cases-geo-ribbons.svg の三角形タイル装飾はクライアント指摘
（「無駄な三角」）により削除。 */
#section-cases > .container {
position: relative;
z-index: 3;
}
/* Hide the existing small ▼ for cases specifically (keep it on other sections) */
#section-cases > .container > .text-center::before {
content: none !important;
display: none !important;
}
/* 2026-07-13: 白い逆三角のくさび（#section-cases::before, 前セクションとの
繋ぎ演出）もクライアント指摘により削除。 */
/* Heading sits ON TOP of the wedge — boat-assist style overlap */
#section-cases > .container > .text-center {
position: relative;
z-index: 3;
padding-top: 1.75rem !important;
}
@media (max-width: 743.98px) {
#section-cases > .container > .text-center {
padding-top: 1.25rem !important;
}
}
@media (min-width: 1024px) {
#section-cases > .container > .text-center {
padding-top: 2.5rem !important;
}
}
/* === Cases carousel — "共通する手口の特徴" container gets generous top margin (Tailwind mt-X not reliably in bundle) === */
.cases-common-tactics {
margin-top: 3.5rem !important;
}
@media (max-width: 743.98px) {
.cases-common-tactics {
margin-top: 2.5rem !important;
}
}
/* ========================================================================
2026-07-09 balance pass — intro / contact h2 were noticeably smaller
(24px Tailwind) than the other section headings (2.3rem via CSS).
Bring them onto the same scale, and give the contact banner sub-copy
a matching bump.
======================================================================== */
#section-intro h2,
#section-contact h2 {
font-size: 2rem;
line-height: 1.3;
}
@media (min-width: 768px) {
#section-intro h2,
#section-contact h2 {
font-size: 2.4rem;
}
}
#section-contact .bg-primary p {
font-size: 1.1rem;
line-height: 1.7;
}
/* ========================================================================
2026-07-13 orphan-line pass — 全画面幅チェックで「す。」のような1〜3文字
だけが最終行に取り残される孤立行を27件検出。文言は一切変えず、CSSの
text-wrap: balance でブラウザに折り返し位置を自動調整させて解消する。
(実測で text-wrap: pretty は一部の段落で孤立行を解消しきれなかったため、
全対象を balance に統一。balance は仕様上おおむね6行までしか効かないが、
対象は全て2〜4行程度の短い段落なので範囲内。未対応ブラウザでは通常の
折り返しにフォールバックするだけで安全。今回のレポートで severity
「軽微」だった #section-intro / .benefits-strip__title / #section-reasons
のチェックリスト / .flow-strong02__card-desc,__lead-copy /
.news-accordion__title も同じ仕組みで恩恵を受けるが、今回は指摘のあった
severe 10セレクタに絞って適用。) */
/* balance は「全行を均等な長さに縮める」ため、左寄せの本文に使うと
右側に不自然な余白ができる（2026-07-13 ユーザー指摘）。そこで
・balance ＝ 見出し・ラベル・センター揃えの短文だけ（均等が似合う場所）
・本文 ＝ 行は目一杯使い、文末7〜9字を .keep-tail（分離不能）にして
孤立行だけをピンポイントで防ぐ
の2本立てに再設計。 */
.reason-card__label,
#section-cases h3,
#section-cases .bg-gradient-to-r p,
#section-faq button[data-faq-toggle] span,
.cases-common-tactics p,
.flow-strong02__bar-main,
.footer-li-text,
footer p,
#section-intro h2,
.benefits-strip__title,
#section-reasons .grid > div > span,
.news-accordion__title,
.flow-strong02__lead-copy,
#section-column > .container > .text-center > p,
#contact-form .bg-secondary\/30 span,
.footer-mobile__meta-dl dd {
text-wrap: balance;
}
/* footer li itself is a flex container (icon dot + text) — balance on the
li directly doesn't reach the text (it becomes an anonymous flex item),
so the text is wrapped in .footer-li-text (see footer.php) instead.
2026-07-14: 旧 .pc-br（PC専用手動改行）は「取り扱い業務は全項目1行」の
クライアント指定により撤去。1行化はファイル末尾のグリッド再配分
（max-content カラム + nowrap）で保証する。 */
.footer-li-text {
display: inline-block;
}
@media (min-width: 1024px) {
/* フロア例外: 取り扱い業務タグはナビゲーション的要素のため
本文フロア(24px+)は適用しない（サイズは末尾ブロックで指定）。 */
#site-footer .footer-li-text {
font-size: 1.15rem !important;
line-height: 1.4;
}
}
/* 左寄せ本文 — 行を短くせず、pretty（対応ブラウザのみの緩い孤立行回避）＋
マークアップ側の .keep-tail で確実に防ぐ。
注意: FAQ のセレクタは span:not(.keep-tail) にすること。text-wrap は
white-space のロングハンド（text-wrap-mode）を兼ねるため、keep-tail 自身に
pretty を当てると white-space: nowrap の折り返し禁止が上書きされて壊れる。 */
#section-intro p,
.reason-card__lead,
#section-cases [data-slot="card-content"] .bg-secondary\/50 p,
#section-faq [data-faq-answer] span:not(.keep-tail),
.flow-strong02__card-desc,
.sticky-cta-bar p {
text-wrap: pretty;
}
/* 文末の数文字を1行に固定するグルー。チャンクは8字前後＝最小幅約150px で、
本文カラムの最小幅(約270px)より十分小さいため折り返し自体は壊さない。
ここが折れると存在意義がないので !important で保護。 */
.keep-tail {
white-space: nowrap !important;
}
/* ===== 心当たりチェックリスト（2026-07-13 クライアント指定の改行位置）=====
sp-br: スマホだけ有効な改行。PC(md+)は2カラムで幅が広く、指定改行は
不要とのことなので非表示にする。 */
@media (min-width: 768px) {
.sp-br {
display: none;
}
}
/* スマホでは文字を大きくする分、チェック項目まわりの余白を少し詰めて
テキストの有効幅を稼ぐ（指定の2行が320px端末でも収まる前提を守る）。 */
@media (max-width: 767.98px) {
#section-reasons .grid > div {
padding: 0.6rem 0.55rem !important;
gap: 0.5rem !important;
}
#section-reasons .bg-gray-50 {
padding: 0.5rem !important;
}
}
/* 「リプラスは、負けず…」の締め文言 —
を含むブロックは Chrome の
balance が働かない（forced break で bail）ため、行を block 化した span に
分けて span 単位で balance を効かせる。 */
#section-benefits .container > p.text-center span {
display: block;
text-wrap: balance;
/* balance単独だと「最大/限」のような語中折れが起きるため、日本語の
文節境界で折るauto-phraseを併用（Chrome 119+。非対応ブラウザは
通常の折り返しにフォールバックするだけで無害）。 */
word-break: auto-phrase;
}
/* フッター(モバイル)の登録情報 dd —
入りで balance が効かないため、
単語間（空白）と文節境界でのみ折り返す keep-all で「号」1文字の孤立を防ぐ。
この dd の各行は最長13字で 320px 幅にも収まることを確認済み。 */
.footer-mobile__meta-dl dd:nth-of-type(2) {
word-break: keep-all;
}
/* 「3STEPで完結!」バッジ — 折り返し位置を「3STEP｜で完結!」の間に固定。
で完結! の途中で切れて「結!」だけ落ちるのを防ぐ。 */
.flow-strong02__bar-main-seg {
white-space: nowrap;
}
/* フッターの電話番号 — 数字の途中折り返しは電話番号として読み間違いのもと
なので常に1行。1024〜1279px はカラム幅が足りないため一段縮小。 */
#site-footer a.text-3xl[href^="tel:"] {
white-space: nowrap;
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
#site-footer a.text-3xl[href^="tel:"] {
font-size: 1.55rem;
}
}
/* ===== 2026-07-13 モバイル本文の文字サイズ引き上げ =====
クライアント指定の本文系をスマホで一段大きく（18px→画面幅連動で最大20.5px）。
文末グルー(.keep-tail)は最長10字×20.5px≒210pxで、対象ブロックの最小幅
(FAQ回答 約209px@320) にぎりぎり収まる設計。md+ は据え置き。 */
@media (max-width: 767.98px) {
#section-intro p,
#section-cases [data-slot="card-content"] .bg-secondary\/50 p,
#section-faq [data-faq-answer],
#section-column > .container > .text-center > p,
#section-benefits .container > p.text-center span {
font-size: clamp(1.125rem, 5vw, 1.28rem) !important;
}
/* 事例カードのサブタイトル（グラデーション帯内の説明文） */
#section-cases .bg-gradient-to-r p {
font-size: 1.125rem !important;
}
/* 「共通する手口の特徴」— 2026-07-16: ここにあった引き上げ指定は 3060行台の
#section-cases 付きベースルール(詳細度が上)に常に負けて無効だったため削除。
サイズはベースルール側を直接 clamp(1.125rem,5vw,1.28rem) 等へ引き上げ済み。 */
}
/* 強調語（全額回収・着手金0円）が行またぎで「全/額回収」のように泣き別れ
しないよう分離禁止。4〜5字なのでどの幅でも1行に収まる。 */
#section-intro p strong {
white-space: nowrap;
}
/* ニュース副文 — balanceの語中折れ（対/策）を日本語の文節折りで回避
(Chrome 119+。非対応ブラウザは通常折り返しで無害) */
#section-column > .container > .text-center > p {
word-break: auto-phrase;
}
/* ========================================================================
2026-07-13 PC タイポグラフィフロア＋余白圧縮
クライアント指定:「PC画面上に見える文字は .reason-card__lead(PC) =
clamp(1.5rem, 1.7vw, 1.9rem) が最低サイズ」。本文系はフロアに揃え、
見出し・タイトル系はさらに一段上のティアで階層を維持する。
併せて「全体的に余白が大きすぎる」指摘に対応し、01〜03エリアの
セクション余白・カード間隔を圧縮。すべて min-width:1024px 限定で、
タブレット(768-1023px)以下には影響しない。
======================================================================== */
@media (min-width: 1024px) {
/* ---- 本文フロア(= reason-card__lead と同サイズ) ---- */
#section-intro p,
#section-reasons .grid > div > span,
#section-reasons > .container > .text-center > p,
#section-cases .bg-gradient-to-r p,
#section-cases [data-slot="card-content"] .bg-secondary\/50 p,
.cases-common-tactics .grid strong,
.cases-common-tactics .grid p,
#news-ticker span,
#section-column > .container > .text-center > p,
.news-accordion__date,
.news-accordion__cat,
.news-accordion__excerpt,
.news-accordion__more,
#section-column .text-center a.inline-flex,
.flow-strong02__lead-copy,
.flow-strong02__card-desc,
.flow-strong02__bar-sub,
.flow-strong02__kicker,
#section-faq [data-faq-answer],
#section-faq span[class*="bg-primary"],
#section-contact .bg-primary p,
#contact-form label,
#contact-form label span[class*="bg-"],
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form #contact-submit span,
#contact-form .bg-secondary\/30,
#site-footer p,
#site-footer li,
#site-footer .space-y-6,
#site-footer .text-xl,
#site-footer .border-t,
#site-header .flex-col span {
font-size: clamp(1.5rem, 1.7vw, 1.9rem) !important;
}
/* 送信ボタンの補足文(既存の #contact-submit-subtext !important を上書き) */
#section-contact #contact-submit-subtext {
font-size: clamp(1.5rem, 1.7vw, 1.9rem) !important;
white-space: normal;
}
/* ---- タイトル・ティア(フロアより一段上げて階層維持) ---- */
#section-cases [data-slot="card"] h3 {
font-size: clamp(1.75rem, 2vw, 2.2rem) !important;
}
.cases-common-tactics h4 {
font-size: clamp(1.6rem, 1.85vw, 2.05rem) !important;
}
.news-accordion__title {
font-size: clamp(1.6rem, 1.85vw, 2.05rem) !important;
}
#section-faq button[data-faq-toggle] {
font-size: clamp(1.55rem, 1.8vw, 1.95rem) !important;
}
.flow-strong02__card-title {
font-size: clamp(2rem, 2.2vw, 2.4rem) !important;
}
#site-footer h3 {
font-size: clamp(1.6rem, 1.85vw, 2.05rem) !important;
}
/* ---- 追従バナー(固定UI): フロアをそのまま当てると1024px幅で
物理的に収まらないため、一段控えめの拡大に留める ---- */
.sticky-cta-bar p {
font-size: 1.3rem !important;
}
.sticky-cta-bar a span,
.sticky-cta-bar button span {
font-size: 1.25rem !important;
}
.sticky-cta-bar .bg-secondary.-rotate-2 {
font-size: 1.15rem !important;
}
/* ---- 余白圧縮(PCのみ)。従来値: benefits 5.5rem 0 9rem /
reasons 15rem / cases 7.5rem / カード間 5.5rem ---- */
#section-benefits.benefits-strip {
padding: 3.5rem 0 5rem !important;
}
.benefits-strip .reason-grid--feature {
gap: 3.5rem;
}
#section-reasons {
padding-top: 6.5rem !important;
padding-bottom: 6.5rem !important;
}
#section-cases {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
}
/* 2026-07-14: モバイルの POINT→実績バー→注意喚起のつなぎを圧縮。
CTA直下とバー直下だけを詰め、カード内の読みやすい余白・PC版は維持する。 */
@media (max-width: 743.98px) {
#section-benefits.benefits-strip {
padding-bottom: 1.25rem !important;
}
#section-reasons {
padding-top: 2rem !important;
}
}
/* 2026-07-14: イラスト画像を実写スタッフ写真へ統一。
写真枠を必ず塗り切るクロップにし、旧イラスト用の余白・位置補正を解除する。 */
.benefits-strip .reason-card--feature:nth-child(3) .reason-card__photo {
object-fit: cover;
object-position: 50% 45%;
transform: none !important;
}
/* FLOW見出しは実写写真を丸くクロップして、旧透過キャラクターの空きをなくす。 */
#section-flow .flow-strong02__chara {
width: 6.4rem;
height: 6.4rem;
right: 0.35rem;
bottom: -0.4rem;
border: 4px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0.45rem 1.1rem rgba(0, 55, 58, 0.28);
object-fit: cover;
object-position: 44% 38%;
}
/* 3STEPカードは横幅いっぱいの写真面にし、透過イラスト用の70%幅と負マージンを解除。 */
#section-flow .flow-strong02__card-img {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 16 / 9;
margin: 0.45rem 0 0;
border-radius: 1rem;
object-fit: cover;
object-position: center 45%;
}
#section-flow .flow-strong02__card:nth-child(2) .flow-strong02__card-img {
object-position: 48% 43%;
}
#section-flow .flow-strong02__card:nth-child(3) .flow-strong02__card-img {
object-position: 45% 46%;
}
@media (min-width: 744px) {
#section-flow .flow-strong02__chara {
width: 10.5rem;
height: 10.5rem;
right: 0.5rem;
}
}
@media (min-width: 1024px) {
#section-flow .flow-strong02__chara {
width: 11.5rem;
height: 11.5rem;
right: 1rem;
}
#section-flow .flow-strong02__card-img {
flex: 0 0 21rem;
width: 21rem;
height: 13.5rem;
aspect-ratio: auto;
margin: 0;
border-radius: 1.5rem;
}
}
/* モバイルフッターも写真面を塗り切り、人物イラスト用のハローを外す。 */
@media (max-width: 743.98px) {
.footer-mobile__illust {
height: 6.5rem;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.88);
border-radius: 0.85rem;
box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.24);
}
.footer-mobile__illust-halo {
display: none;
}
.footer-mobile__illust-img {
object-fit: cover;
object-position: 62% 44%;
}
}
/* 2026-07-14: PC限定の可読性・フッター密度調整。 */
@media (min-width: 1024px) {
/* POINT締めコピーは2つの意味単位を各1行で大きく見せる。 */
#section-benefits .benefits-strip__closing {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
#section-benefits .benefits-strip__closing span {
font-size: clamp(1.75rem, 2vw, 2.15rem) !important;
line-height: 1.5;
white-space: nowrap;
}
/* 解決事例の補足と共通手口パネルを、PCの閲覧距離に合うサイズへ。 */
#section-cases > .container > .text-center > p {
margin-top: 0.45rem;
font-size: clamp(1.65rem, 1.9vw, 2rem) !important;
line-height: 1.45;
}
#section-cases .cases-common-tactics > h4 {
font-size: clamp(1.9rem, 2.2vw, 2.3rem) !important;
line-height: 1.35;
}
#section-cases .cases-common-tactics .grid strong {
font-size: clamp(1.65rem, 1.85vw, 1.95rem) !important;
line-height: 1.4;
}
#section-cases .cases-common-tactics .grid p {
font-size: clamp(1.45rem, 1.65vw, 1.75rem) !important;
line-height: 1.55 !important;
text-wrap: pretty;
}
#section-cases .cases-common-tactics .bg-white {
padding: 1.15rem 1.25rem !important;
}
/* PCフッターは情報量を保ったまま、見出し・本文・余白を一段コンパクトに。 */
#site-footer.site-footer-mobile {
padding-top: 2.5rem !important;
padding-bottom: 1.75rem !important;
}
#site-footer .footer-desktop > .grid {
gap: 2rem !important;
margin-bottom: 2rem !important;
}
#site-footer .footer-desktop > .grid > div:first-child > .flex {
gap: 0.8rem !important;
margin-bottom: 1rem !important;
}
#site-footer .brand-logo-footer__img {
height: 4rem;
}
#site-footer .footer-desktop h3 {
margin-bottom: 1rem !important;
font-size: 1.25rem !important;
line-height: 1.35;
}
#site-footer .footer-desktop p,
#site-footer .footer-desktop li,
#site-footer .footer-desktop .text-xl,
#site-footer .footer-desktop .space-y-6,
#site-footer .footer-desktop .border-t {
font-size: 1rem !important;
line-height: 1.65;
}
#site-footer .footer-desktop .footer-li-text {
font-size: 1rem !important;
line-height: 1.45;
}
#site-footer .footer-desktop .space-y-6 > :not([hidden]) ~ :not([hidden]) {
margin-top: 1rem !important;
}
#site-footer .footer-desktop .bg-white\/5 {
padding: 1.2rem !important;
}
#site-footer .footer-desktop .bg-white\/5 .mb-6 {
margin-bottom: 1rem !important;
}
#site-footer .footer-desktop > .border-t {
gap: 1rem !important;
padding-top: 1.15rem !important;
}
#site-footer .footer-desktop > .border-t a,
#site-footer .footer-desktop > .border-t p {
font-size: 0.85rem !important;
white-space: nowrap;
}
#site-footer .footer-desktop__dots {
background-size: 16px 16px !important;
opacity: 0.035 !important;
}
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
/* 1024pxでは事務所概要を少し広げ、住所・登録番号の語中改行を防ぐ。
2026-07-14: 取り扱い業務1行化に伴い2列目を max-content に変更
（0.65fr≒129pxでは「情報商材詐欺返金請求」が収まらない）。
gap圧縮で原資を捻出し、事務所概要の実幅は従来並みを維持。 */
#site-footer .footer-desktop > .grid {
grid-template-columns:
minmax(0, 1.4fr)
max-content
minmax(0, 1.42fr)
minmax(0, 1.18fr) !important;
gap: 1rem !important;
}
#site-footer .footer-desktop .footer-li-text {
white-space: nowrap;
}
#site-footer .footer-desktop > .grid > div {
grid-column: auto !important;
}
#site-footer .footer-desktop .space-y-6 > .flex {
gap: 0.65rem !important;
}
#site-footer .brand-logo-footer__img {
height: 3.5rem;
}
#site-footer .footer-desktop > .grid > div:nth-child(2) h3 {
font-size: 1.1rem !important;
white-space: nowrap;
}
}
/* ===== 2026-07-14: PC問い合わせフォームの縦見切れ修正 =====
PC文字フロア(clamp≒24px)適用後も Tailwind の h-12(48px) が残り、
#section-contact 側の padding 0.75rem×2 と合わさって select の
「選択してください」の下半分が切れていた。高さを内容に追従させる。
input も同じフロア+高さ固定で余裕ゼロのため一緒に解放する。 */
@media (min-width: 1024px) {
#contact-form input,
#contact-form select {
height: auto;
line-height: 1.35;
}
}
/* ===== 2026-07-14: PCフッター「取り扱い業務」全項目1行化 =====
クライアント指定：情報商材詐欺返金請求（10字）等を折り返さず1行で表示。
旧 lg:col-span-2 ではカラム実幅が1024pxで約127pxしかなく物理的に不可能
なため、グリッドを再配分する：
- 業務カラムは max-content（最長項目=約190pxに追従）
- gap を圧縮して原資を捻出
- 事務所概要/お問い合わせの実幅は従来並みを維持
nowrap は保険（max-content カラムなので通常は発動しない）。
1024〜1279px帯は既存の !important 付き専用ブロック（上方）が担当する
ため、ここは1280px以上のみ。文字サイズは1280px以上=1.05rem、
1024〜1279px帯=1rem（既存コンパクトブロックの指定をそのまま利用）。 */
@media (min-width: 1280px) {
#site-footer .footer-desktop > .grid {
grid-template-columns: 4fr max-content 3.15fr 3.15fr;
gap: 1.75rem;
}
#site-footer .footer-desktop > .grid > div {
grid-column: auto;
}
#site-footer .footer-desktop .footer-li-text {
font-size: 1.05rem !important;
line-height: 1.4;
white-space: nowrap;
}
}
/* 2026-07-16: モバイルのセクション上下余白を圧縮。
対象: intro 上下(4rem→2rem) / benefits 上(6.75rem→2.5rem) /
reasons 下(4.5rem→2.5rem) / cases 上(3.75rem→1.5rem)・下(5.25rem→2.5rem)。
PC版、benefits 下(1.25rem)・reasons 上(2rem) は 2026-07-14 の圧縮値のまま維持。 */
@media (max-width: 743.98px) {
#section-intro {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
#section-benefits.benefits-strip {
padding-top: 2.5rem !important;
}
#section-reasons {
padding-bottom: 2.5rem !important;
}
#section-cases {
padding-top: 1.5rem !important;
padding-bottom: 2.5rem !important;
}
}