@charset "UTF-8"; /* ========================================================================== FUKU60 child theme stylesheet Design tokens as CSS custom properties; `.fku60-dark` on (toggled by assets/js/fuku60.js) swaps the semantic tokens for the dark palette so component rules below never need a duplicate dark-mode declaration. ========================================================================== */ :root { --fku60-brand-50: #effaf3; --fku60-brand-100: #d8f3e4; --fku60-brand-200: #b5e7cd; --fku60-brand-300: #7ed9a8; --fku60-brand-400: #34c882; --fku60-brand-500: #16b268; --fku60-brand-600: #0e9455; --fku60-brand-700: #10744a; --fku60-brand-800: #0f5f3d; --fku60-brand-900: #0f4f35; --fku60-accent-300: #ffcf87; --fku60-accent-400: #ffb347; --fku60-accent-500: #f59e34; --fku60-accent-600: #dd8117; --fku60-gradient-brand: linear-gradient(120deg, #0e9455, #16b268 45%, #6fd39b); --fku60-gradient-warm: linear-gradient(120deg, #16b268, #f59e34); --fku60-body-bg: #f6faf5; --fku60-body-text: #1b2a22; --fku60-muted: #5c6b62; --fku60-line: #dbe6dc; --fku60-card-bg: #ffffff; --fku60-card-border: rgba(219, 230, 220, 0.7); --fku60-card-shadow: 0 20px 50px rgba(14, 148, 85, 0.08); --fku60-card-alt-bg: #fbfcf8; --fku60-header-bg: rgba(255, 255, 255, 0.9); --fku60-header-border: #dbe6dc; --fku60-header-text: #45524b; --fku60-link: #10744a; --fku60-link-decoration: rgba(16, 116, 74, 0.25); --fku60-icon-accent: #0e9455; --fku60-badge-bg: #d8f3e4; --fku60-badge-text: #0f5f3d; --fku60-badge-news-bg: #fdefdb; --fku60-badge-news-text: #8a4f06; --fku60-badge-news-border: var(--fku60-accent-500); --fku60-section-label: #0e9455; --fku60-btn-secondary-bg: #ffffff; --fku60-btn-secondary-text: #1b2a22; --fku60-btn-secondary-border: #dbe6dc; --fku60-btn-secondary-hover-bg: #effaf3; --fku60-input-bg: #ffffff; --fku60-input-border: #dbe6dc; --fku60-input-text: #1b2a22; --fku60-input-placeholder: rgba(92, 107, 98, 0.6); --fku60-page-hero-bg: #f6faf5; --fku60-consult-box-bg: #0f4f35; --fku60-consult-box-border: #0f5f3d; --fku60-ease: cubic-bezier(0.16, 1, 0.3, 1); } html.fku60-dark { --fku60-body-bg: #0e1310; --fku60-body-text: #ecf5ee; --fku60-muted: #b6c1ba; --fku60-line: rgba(255, 255, 255, 0.1); --fku60-card-bg: rgba(255, 255, 255, 0.04); --fku60-card-border: rgba(255, 255, 255, 0.1); --fku60-card-shadow: none; --fku60-card-alt-bg: rgba(255, 255, 255, 0.04); --fku60-header-bg: rgba(14, 19, 16, 0.9); --fku60-header-border: rgba(255, 255, 255, 0.1); --fku60-header-text: #b6c1ba; --fku60-link: #7ed9a8; --fku60-link-decoration: rgba(126, 217, 168, 0.3); --fku60-icon-accent: #7ed9a8; --fku60-badge-bg: rgba(52, 200, 130, 0.15); --fku60-badge-text: #b5e7cd; --fku60-badge-news-bg: rgba(245, 158, 52, 0.18); --fku60-badge-news-text: var(--fku60-accent-300); --fku60-badge-news-border: var(--fku60-accent-400); --fku60-section-label: #7ed9a8; --fku60-btn-secondary-bg: rgba(255, 255, 255, 0.04); --fku60-btn-secondary-text: #ecf5ee; --fku60-btn-secondary-border: rgba(255, 255, 255, 0.15); --fku60-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08); --fku60-input-bg: rgba(255, 255, 255, 0.04); --fku60-input-border: rgba(255, 255, 255, 0.1); --fku60-input-text: #ecf5ee; --fku60-input-placeholder: rgba(182, 193, 186, 0.55); --fku60-page-hero-bg: #0e1310; --fku60-consult-box-bg: #0b2d21; --fku60-consult-box-border: rgba(126, 217, 168, 0.2); } /* ---------------------------------------------------------------------- */ /* Base */ /* ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The Lightning parent theme shrinks the root font-size to 87.5% below 992px width (`body, html { font-size: calc(var(--vk-size-text) * .875) }`). Every spacing/type value in this theme is authored in rem against a 16px base, so left alone that rule quietly shrinks all padding/gaps/text by 12.5% on tablet and mobile. Pin it back to 16px unconditionally. */ html { scroll-behavior: smooth; font-size: 16px; } body.fku60-body { margin: 0; background: var(--fku60-body-bg); color: var(--fku60-body-text); font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; font-feature-settings: 'palt'; -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease, color 0.3s ease; } .fku60-body h1, .fku60-body h2, .fku60-body h3, .fku60-body h4, .fku60-body h5, .fku60-body h6 { font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; font-weight: 700; line-height: 1.35; scroll-margin-top: 96px; margin: 0; /* Reset the Lightning parent theme's default boxed/underlined heading look (h3/h4 :where(...) rules add background, border-bottom, padding) so headings inside this theme's components render plain, as designed. */ padding: 0; background: none; border: none; border-radius: 0; /* When a heading has to wrap (e.g. a single long katakana word like 「プライバシーポリシー」 with no natural phrase break), this keeps the browser from leaving a lonely character/short fragment on its own line by balancing line lengths instead. Ignored gracefully in browsers that don't support it yet. */ text-wrap: balance; } .fku60-body img { max-width: 100%; height: auto; } /* Bare element selector (not `.fku60-body a`) so this reset always loses the cascade to any single-class component rule (e.g. `.fku60-button--*`, `.fku60-header__nav-link`) that sets its own `color` — a class+element selector here would tie or beat those on specificity and silently make text inherit the surrounding color instead, which previously produced an invisible white-on-white CTA button. */ a { color: inherit; text-decoration: none; } main.fku60-main { padding-top: 64px; min-height: 100vh; } .fku60-page-shell { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 640px) { .fku60-page-shell { padding: 0 1.5rem; } } @media (min-width: 1024px) { .fku60-page-shell { padding: 0 2rem; } } .fku60-section-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fku60-section-label); } .fku60-section-title { font-size: 1.875rem; font-weight: 700; color: var(--fku60-body-text); } @media (min-width: 768px) { .fku60-section-title { font-size: 2.25rem; } } .fku60-readable { font-weight: 500; line-height: 2; letter-spacing: 0.015em; color: var(--fku60-muted); } .fku60-gradient-text { background: var(--fku60-gradient-warm); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------------------------------------------------------------- */ /* Icons */ /* ---------------------------------------------------------------------- */ .fku60-icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } /* ---------------------------------------------------------------------- */ /* Logo (FUKU60 wordmark) — see fku60_render_logo() in inc/helpers.php */ /* ---------------------------------------------------------------------- */ .fku60-logo { height: 1.75rem; width: auto; } .fku60-logo__dark { fill: #0f4f35; } html.fku60-dark .fku60-logo__dark { fill: #effaf3; } .fku60-logo__brand { fill: var(--fku60-brand-500); } html.fku60-dark .fku60-logo__brand { fill: var(--fku60-brand-400); } /* ---------------------------------------------------------------------- */ /* Buttons / cards / links */ /* ---------------------------------------------------------------------- */ .fku60-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 700; border: none; cursor: pointer; transition: transform 0.2s var(--fku60-ease), box-shadow 0.2s ease, background-color 0.2s ease; } /* Compounded with `.fku60-button` (rather than bare `.fku60-button--*`) so these color declarations reliably beat the lower-effort `.fku60-body a` reset below — a plain single-class selector has the same specificity as that class+element rule and can lose the cascade depending on source order, which previously left on-dark buttons with invisible white-on-white text. */ .fku60-button.fku60-button--primary { color: #ffffff; background: var(--fku60-gradient-brand); } .fku60-button.fku60-button--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(22, 178, 104, 0.3); } .fku60-button.fku60-button--secondary { background: var(--fku60-btn-secondary-bg); color: var(--fku60-btn-secondary-text); border: 1px solid var(--fku60-btn-secondary-border); } .fku60-button.fku60-button--secondary:hover { background: var(--fku60-btn-secondary-hover-bg); } .fku60-button.fku60-button--on-dark { background: #ffffff; color: var(--fku60-brand-900); } .fku60-button.fku60-button--on-dark:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } .fku60-button.fku60-button--outline-on-dark { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); } .fku60-button.fku60-button--outline-on-dark:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .fku60-button:disabled { cursor: not-allowed; opacity: 0.7; } .fku60-button--block { width: 100%; } .fku60-subtle-link { font-size: 0.875rem; font-weight: 700; color: var(--fku60-link); text-decoration: underline; text-decoration-color: var(--fku60-link-decoration); text-underline-offset: 4px; } .fku60-subtle-link:hover { text-decoration-color: var(--fku60-link); } .fku60-card { border-radius: 1.5rem; border: 1px solid var(--fku60-card-border); background: var(--fku60-card-bg); box-shadow: var(--fku60-card-shadow); } .fku60-card--lift { transition: transform 0.35s var(--fku60-ease), box-shadow 0.35s ease, border-color 0.2s ease, background-color 0.2s ease; } .fku60-card--lift:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(14, 148, 85, 0.16); border-color: rgba(22, 178, 104, 0.4); } .fku60-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700; background: var(--fku60-badge-bg); color: var(--fku60-badge-text); } /* News category pill (お知らせ / 導入事例), sat above a card/article title — reuses the badge token pair so it tracks light/dark automatically, plus an accent border and label-style casing so it reads as a category, not just another tag pill. */ .fku60-badge--category { /* The pill must hug its label: inside the card body (a flex column) an inline-flex child would otherwise stretch to the full card width. */ align-self: flex-start; width: fit-content; max-width: 100%; margin-bottom: 0.75rem; letter-spacing: 0.04em; border: 1px solid var(--fku60-icon-accent); } /* お知らせ = accent orange, 導入事例 = brand green. Both pairs are defined in the light/dark token blocks so the pills invert with the theme. */ .fku60-badge--cat-announcement { background: var(--fku60-badge-news-bg); color: var(--fku60-badge-news-text); border-color: var(--fku60-badge-news-border); } .fku60-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--fku60-badge-bg); color: var(--fku60-icon-accent); transition: transform 0.3s var(--fku60-ease); } .fku60-card--lift:hover .fku60-icon-tile, .fku60-service-card:hover .fku60-icon-tile { transform: rotate(6deg) scale(1.1); } /* ---------------------------------------------------------------------- */ /* Decorative blobs / reveal / gradient animation */ /* ---------------------------------------------------------------------- */ .fku60-blob { position: absolute; border-radius: 9999px; filter: blur(60px); pointer-events: none; animation: fku60-float 14s ease-in-out infinite alternate; } @keyframes fku60-float { from { transform: translate(0, 0); } to { transform: translate(24px, -28px); } } .fku60-animate-gradient { background-size: 200% 200%; animation: fku60-gradient-shift 18s ease-in-out infinite; } @keyframes fku60-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .fku60-reveal { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s var(--fku60-ease); transition-delay: var(--fku60-reveal-delay, 0ms); } html:not(.fku60-no-js) .fku60-reveal { opacity: 0; transform: translateY(24px); } html:not(.fku60-no-js) .fku60-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fku60-blob, .fku60-animate-gradient { animation: none; } .fku60-reveal, html:not(.fku60-no-js) .fku60-reveal { opacity: 1; transform: none; transition: none; } } /* ---------------------------------------------------------------------- */ /* Header */ /* ---------------------------------------------------------------------- */ .fku60-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; border-bottom: 1px solid var(--fku60-header-border); background: var(--fku60-header-bg); backdrop-filter: blur(10px); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .fku60-header.is-scrolled { box-shadow: 0 8px 24px rgba(15, 79, 53, 0.08); } .fku60-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 84rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .fku60-header__inner { padding: 0 1.5rem; } } @media (min-width: 1024px) { .fku60-header__inner { padding: 0 2rem; } } .fku60-header__brand { display: flex; align-items: center; gap: 0.75rem; } .fku60-header__logo { height: 1.75rem; width: auto; } .fku60-header__brand-name { display: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--fku60-header-text); } @media (min-width: 640px) { .fku60-header__brand-name { display: inline; } } .fku60-header__nav { display: none; align-items: center; gap: 1.75rem; } @media (min-width: 1024px) { .fku60-header__nav { display: flex; } } .fku60-header__nav-link { position: relative; font-size: 0.875rem; font-weight: 700; color: var(--fku60-header-text); transition: color 0.2s ease; } .fku60-header__nav-link::after { content: ''; position: absolute; right: 0; left: 0; bottom: -6px; height: 3px; border-radius: 9999px; background: var(--fku60-gradient-brand); opacity: 0; transform: scaleX(0.6); transition: opacity 0.25s ease, transform 0.25s var(--fku60-ease); } .fku60-header__nav-link:hover, .fku60-header__nav-link.is-active { color: var(--fku60-link); } .fku60-header__nav-link.is-active::after { opacity: 1; transform: scaleX(1); } .fku60-header__cta { padding: 0.5rem 1rem; } .fku60-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: none; background: transparent; color: var(--fku60-header-text); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .fku60-theme-toggle:hover { background: var(--fku60-brand-50); color: var(--fku60-link); } html.fku60-dark .fku60-theme-toggle:hover { background: rgba(255, 255, 255, 0.1); } .fku60-theme-toggle__icon--moon { display: none; } html.fku60-dark .fku60-theme-toggle__icon--sun { display: none; } html.fku60-dark .fku60-theme-toggle__icon--moon { display: inline-block; } .fku60-header__mobile-controls { display: flex; align-items: center; gap: 0.5rem; } @media (min-width: 1024px) { .fku60-header__mobile-controls { display: none; } } .fku60-header__menu-button { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid var(--fku60-line); background: transparent; color: var(--fku60-header-text); cursor: pointer; } .fku60-header__menu-button:hover { background: var(--fku60-brand-50); } html.fku60-dark .fku60-header__menu-button:hover { background: rgba(255, 255, 255, 0.1); } /* Mobile full-screen menu */ .fku60-mobile-menu { position: fixed; inset: 0; z-index: 60; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(6px); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } html.fku60-dark .fku60-mobile-menu { background: rgba(14, 19, 16, 0.97); } .fku60-mobile-menu.is-open { opacity: 1; visibility: visible; } .fku60-mobile-menu__header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 1rem; border-bottom: 1px solid var(--fku60-header-border); } .fku60-mobile-menu__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; overflow-y: auto; } .fku60-mobile-menu__item { display: flex; align-items: center; justify-content: space-between; border-radius: 1rem; border: 1px solid transparent; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 700; color: var(--fku60-body-text); opacity: 0; transform: translateY(10px); } .fku60-mobile-menu.is-open .fku60-mobile-menu__item { animation: fku60-menu-item-in 0.4s var(--fku60-ease) both; animation-delay: var(--fku60-item-delay, 0ms); } @keyframes fku60-menu-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .fku60-mobile-menu__item:hover { border-color: var(--fku60-line); background: var(--fku60-brand-50); } html.fku60-dark .fku60-mobile-menu__item:hover { background: rgba(255, 255, 255, 0.1); } .fku60-mobile-menu__cta { justify-content: center; margin-top: 1rem; } .fku60-mobile-menu__legal { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--fku60-line); font-size: 0.875rem; font-weight: 700; color: var(--fku60-muted); } .fku60-mobile-menu__legal a:hover { color: var(--fku60-link); } @media (prefers-reduced-motion: reduce) { .fku60-header__nav-link::after { transition: none; } .fku60-mobile-menu.is-open .fku60-mobile-menu__item { animation: none; opacity: 1; transform: none; } } /* ---------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------- */ .fku60-footer { border-top: 1px solid var(--fku60-line); background: var(--fku60-card-bg); color: var(--fku60-muted); } /* `padding-block` only, for the same reason as `.fku60-hero__inner` above — this element also carries `.fku60-page-shell`, which already owns the responsive horizontal padding. */ .fku60-footer__inner { padding-block: 2.5rem; } .fku60-footer__top { display: grid; gap: 2rem; } @media (min-width: 768px) { .fku60-footer__top { grid-template-columns: 1fr auto; align-items: end; } } .fku60-footer__brand { display: inline-flex; align-items: center; gap: 0.75rem; } .fku60-footer__brand span { font-size: 0.875rem; font-weight: 700; color: var(--fku60-body-text); } .fku60-footer__tagline { margin-top: 0.75rem; max-width: 36rem; font-size: 0.875rem; line-height: 1.75; } .fku60-footer__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 700; } .fku60-footer__nav a:hover { color: var(--fku60-link); } .fku60-footer__bottom { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--fku60-line); font-size: 0.75rem; } @media (min-width: 768px) { .fku60-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } } .fku60-footer__bottom a { font-weight: 700; } .fku60-footer__bottom a:hover { color: var(--fku60-link); } /* ---------------------------------------------------------------------- */ /* Page hero band (inner pages) */ /* ---------------------------------------------------------------------- */ .fku60-page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--fku60-line); background: var(--fku60-page-hero-bg); padding: 4rem 0; } @media (min-width: 768px) { .fku60-page-hero { padding: 5rem 0; } } .fku60-page-hero__title { text-align: center; font-size: 2.25rem; font-weight: 900; } @media (min-width: 768px) { .fku60-page-hero__title { font-size: 3rem; } } .fku60-page-hero__text { max-width: 42rem; margin: 1.25rem auto 0; text-align: center; font-size: 1rem; line-height: 2; color: var(--fku60-muted); } /* Wrap a short Japanese phrase in this so the browser only ever breaks the line between phrases, never mid-word/mid-verb (e.g. "お届" / "けします") — browsers have no concept of Japanese word boundaries in unspaced text, so short lead/heading copy needs this marked up by hand. */ .fku60-nowrap { white-space: nowrap; } /* ---------------------------------------------------------------------- */ /* Hero (home) */ /* ---------------------------------------------------------------------- */ .fku60-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--fku60-line); background-image: linear-gradient(120deg, #effaf3 0%, #d8f3e4 28%, #b5e7cd 52%, #ffefd6 78%, #effaf3 100%); } html.fku60-dark .fku60-hero { background-image: linear-gradient(120deg, #0e1310 0%, #10271d 38%, #14382a 64%, #12241b 86%, #0e1310 100%); } .fku60-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: calc(100vh - 4rem); /* `padding-block` (not the `padding` shorthand) so this only ever touches top/bottom — the shorthand would zero out the horizontal padding that `.fku60-page-shell` (the other class on this same element) sets, since both rules have equal specificity and this one loads later. */ padding-block: 4rem; } @media (min-width: 768px) { .fku60-hero__inner { padding-block: 5rem; } } @media (min-width: 1024px) { .fku60-hero__inner { padding-block: 6rem; } } .fku60-hero__grid { display: grid; gap: 2.5rem; width: 100%; align-items: center; } @media (min-width: 1024px) { .fku60-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } } .fku60-hero__heading { margin-top: 1.25rem; font-size: 2.25rem; font-weight: 900; line-height: 1.3; } @media (min-width: 768px) { .fku60-hero__heading { font-size: 3rem; } } .fku60-hero__heading span.line { display: block; } .fku60-hero__heading span.phrase { display: inline-block; white-space: nowrap; } .fku60-hero__lead { margin-top: 1.25rem; max-width: 36rem; font-size: 1.125rem; } .fku60-hero__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; } @media (min-width: 640px) { .fku60-hero__actions { flex-direction: row; } } .fku60-hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 2rem; list-style: none; padding: 0; } @media (min-width: 640px) { .fku60-hero__chips { display: flex; flex-wrap: wrap; } } .fku60-hero__chip { display: flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--fku60-line); background: rgba(255, 255, 255, 0.85); padding: 0.5rem 0.875rem; font-size: 0.75rem; font-weight: 700; } html.fku60-dark .fku60-hero__chip { background: rgba(255, 255, 255, 0.06); } @media (min-width: 640px) { .fku60-hero__chip { font-size: 0.875rem; padding: 0.5rem 1rem; } } .fku60-hero__illustration { width: 100%; max-width: 36rem; margin: 0 auto; animation: fku60-hero-float 8s ease-in-out infinite alternate; } .fku60-hero__illustration--mobile { max-width: 24rem; } @keyframes fku60-hero-float { from { transform: translateY(0); } to { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .fku60-hero__illustration { animation: none; } } /* One-shot entrance animation for above-the-fold content (hero). Unlike .fku60-reveal, this never hides content — it only adds a subtle fade/rise on first paint, so there is no flash-of-hidden-content risk. */ @keyframes fku60-fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fku60-fade-in { animation: fku60-fade-in-up 0.55s ease-out both; animation-delay: var(--fku60-fade-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .fku60-fade-in { animation: none; } } /* ---------------------------------------------------------------------- */ /* Generic section paddings */ /* ---------------------------------------------------------------------- */ .fku60-section { padding: 5rem 0; } @media (min-width: 768px) { .fku60-section { padding: 6rem 0; } } .fku60-section--alt { background: var(--fku60-body-bg); border-top: 1px solid var(--fku60-line); border-bottom: 1px solid var(--fku60-line); } .fku60-section--white { background: var(--fku60-card-bg); } .fku60-section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; } @media (min-width: 768px) { .fku60-section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .fku60-section-head__desc { max-width: 36rem; font-size: 1rem; line-height: 2; color: var(--fku60-muted); } /* ---------------------------------------------------------------------- */ /* Philosophy */ /* ---------------------------------------------------------------------- */ .fku60-philosophy { display: grid; gap: 3rem; } @media (min-width: 1280px) { .fku60-philosophy { grid-template-columns: 0.78fr 1.22fr; align-items: start; } } .fku60-philosophy__intro-img { margin-top: 2rem; width: 100%; max-width: 24rem; } .fku60-principle-list { display: grid; gap: 1rem; } .fku60-principle { display: grid; gap: 1.25rem; border-radius: 1.5rem; border: 1px solid var(--fku60-line); background: var(--fku60-card-alt-bg); padding: 1.25rem; box-shadow: 0 18px 50px rgba(23, 33, 29, 0.06); } @media (min-width: 640px) { .fku60-principle { grid-template-columns: 5rem 1fr; padding: 1.5rem; } } .fku60-principle__index { display: flex; align-items: center; gap: 1rem; } @media (min-width: 640px) { .fku60-principle__index { display: block; } } .fku60-principle__number { font-size: 0.875rem; font-weight: 900; letter-spacing: 0.18em; color: rgba(16, 116, 74, 0.5); } html.fku60-dark .fku60-principle__number { color: rgba(126, 217, 168, 0.5); } .fku60-principle__title { font-size: 1.25rem; font-weight: 700; } @media (min-width: 768px) { .fku60-principle__title { font-size: 1.5rem; } } .fku60-principle__text { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.9; color: var(--fku60-muted); } /* ---------------------------------------------------------------------- */ /* Real photo section (home) — genuine photography, deliberately placed */ /* alongside the illustrated sections to ground the page in real people. */ /* ---------------------------------------------------------------------- */ .fku60-photo-single { margin: 0; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--fku60-line); box-shadow: var(--fku60-card-shadow); } .fku60-photo-single img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; } @media (min-width: 768px) { .fku60-photo-single img { aspect-ratio: 21 / 9; } } /* ---------------------------------------------------------------------- */ /* Services (home preview + detail) */ /* ---------------------------------------------------------------------- */ .fku60-services-grid { display: grid; gap: 1rem; } @media (min-width: 768px) { .fku60-services-grid { grid-template-columns: 1fr 1fr; } } .fku60-service-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 16rem; padding: 1.5rem; } .fku60-service-card__title { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 700; } .fku60-service-card__text { margin-top: 1rem; font-size: 0.875rem; line-height: 1.75; color: var(--fku60-muted); } .fku60-service-card__points { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.75rem; } .fku60-service-card__more { display: flex; align-items: center; margin-top: 1.75rem; font-size: 0.875rem; font-weight: 700; color: var(--fku60-link); } .fku60-service-card:hover .fku60-service-card__more .fku60-icon { transform: translateX(4px); } .fku60-icon { transition: transform 0.2s ease; } .fku60-saas-list { display: flex; flex-direction: column; gap: 1.5rem; } .fku60-saas-card { display: grid; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--fku60-line); background: var(--fku60-card-bg); } @media (min-width: 768px) { .fku60-saas-card { grid-template-columns: 18rem 1fr; } } .fku60-saas-card__media { border-bottom: 1px solid var(--fku60-line); overflow: hidden; } @media (min-width: 768px) { .fku60-saas-card__media { border-bottom: none; border-right: 1px solid var(--fku60-line); } } .fku60-saas-card__media img { display: block; width: 100%; height: 14rem; object-fit: cover; } @media (min-width: 768px) { .fku60-saas-card__media img { height: 100%; min-height: 100%; } } .fku60-saas-card__body { padding: 1.5rem; } @media (min-width: 768px) { .fku60-saas-card__body { padding: 2rem; } } .fku60-saas-card__title { font-size: 1.5rem; font-weight: 700; } .fku60-saas-card__text { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.75; color: var(--fku60-muted); } /* Service detail page */ .fku60-service-detail { display: flex; flex-direction: column; gap: 2rem; } .fku60-service-detail__item { scroll-margin-top: 7rem; padding: 1.25rem; } @media (min-width: 768px) { .fku60-service-detail__item { padding: 2rem; } } .fku60-service-detail__grid { display: grid; gap: 2rem; } @media (min-width: 1024px) { .fku60-service-detail__grid { grid-template-columns: 1fr 1fr; align-items: center; } } .fku60-service-detail__grid--reverse .fku60-service-detail__media { order: 1; } @media (min-width: 1024px) { .fku60-service-detail__grid--reverse .fku60-service-detail__copy { order: 2; } .fku60-service-detail__grid--reverse .fku60-service-detail__media { order: 1; } } .fku60-service-detail__title { margin-top: 1rem; font-size: 1.875rem; font-weight: 700; } .fku60-service-detail__lead { margin-top: 1rem; font-size: 1rem; line-height: 1.9; } .fku60-service-detail__points { margin: 1.75rem 0 0; border-top: 1px solid var(--fku60-line); } .fku60-service-detail__points > div { display: grid; gap: 0.5rem; padding: 1rem 0; border-bottom: 1px solid var(--fku60-line); } @media (min-width: 640px) { .fku60-service-detail__points > div { grid-template-columns: 7rem 1fr; } } .fku60-service-detail__points dt { font-weight: 700; color: var(--fku60-badge-text); } .fku60-service-detail__points dd { margin: 0; font-size: 0.875rem; line-height: 1.75; color: var(--fku60-muted); } .fku60-service-detail__note { margin-top: 1.25rem; padding-left: 1rem; border-left: 2px solid var(--fku60-brand-500); font-size: 0.875rem; line-height: 1.75; } html.fku60-dark .fku60-service-detail__note { border-left-color: var(--fku60-brand-300); } .fku60-service-detail__price { margin-top: 1rem; font-size: 0.875rem; line-height: 1.75; color: var(--fku60-icon-accent); } .fku60-service-detail__media { border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--fku60-line); } .fku60-service-detail__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; } .fku60-service-detail__item:hover .fku60-service-detail__media img { transform: scale(1.03); } .fku60-service-detail__badge { display: inline-flex; border-radius: 9999px; padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; background: var(--fku60-badge-bg); color: var(--fku60-badge-text); } /* SaaS detail (service page) */ .fku60-saas-detail { display: grid; overflow: hidden; } @media (min-width: 1024px) { .fku60-saas-detail { grid-template-columns: 22rem 1fr; } } .fku60-saas-detail__media { border-bottom: 1px solid var(--fku60-line); background: var(--fku60-body-bg); padding: 1.25rem; } @media (min-width: 1024px) { .fku60-saas-detail__media { border-bottom: none; border-right: 1px solid var(--fku60-line); } } .fku60-saas-detail__media img { display: block; width: 100%; max-height: 15rem; border-radius: 1rem; object-fit: cover; margin: 0 auto; } @media (min-width: 1024px) { .fku60-saas-detail__media img { max-height: none; } } .fku60-saas-detail__body { padding: 1.25rem; } @media (min-width: 768px) { .fku60-saas-detail__body { padding: 2rem; } } .fku60-saas-detail__points { display: grid; gap: 0.75rem; margin-top: 1.75rem; } @media (min-width: 768px) { .fku60-saas-detail__points { grid-template-columns: repeat(3, 1fr); } } .fku60-saas-detail__point { border-radius: 1rem; border: 1px solid var(--fku60-line); background: var(--fku60-body-bg); padding: 1rem; } .fku60-saas-detail__point h3 { font-size: 1rem; font-weight: 700; color: var(--fku60-badge-text); } .fku60-saas-detail__point p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.75; color: var(--fku60-muted); } /* FAQ */ .fku60-faq-layout { display: grid; gap: 2.5rem; } @media (min-width: 1024px) { .fku60-faq-layout { grid-template-columns: 0.8fr 1.2fr; } } .fku60-faq-list { display: flex; flex-direction: column; gap: 1rem; } .fku60-faq-item { padding: 1.5rem; } .fku60-faq-item h3 { font-size: 1.125rem; font-weight: 700; } .fku60-faq-item p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.75; color: var(--fku60-muted); } /* ---------------------------------------------------------------------- */ /* Consulting section (home) */ /* ---------------------------------------------------------------------- */ .fku60-consulting-head { display: grid; gap: 1.5rem; } @media (min-width: 1024px) { .fku60-consulting-head { grid-template-columns: 0.85fr 1.15fr; align-items: end; } } .fku60-concerns-grid { display: grid; gap: 1rem; } @media (min-width: 768px) { .fku60-concerns-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .fku60-concerns-grid { grid-template-columns: repeat(4, 1fr); } } .fku60-concern-card { padding: 1.25rem; } .fku60-concern-card h3 { margin-top: 0; font-size: 1.125rem; font-weight: 700; } .fku60-concern-card p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--fku60-muted); } .fku60-steps-wrap { display: grid; gap: 1.5rem; margin-top: 3.5rem; } @media (min-width: 1024px) { .fku60-steps-wrap { grid-template-columns: 1.05fr 0.95fr; } } .fku60-steps { overflow: hidden; } .fku60-step { display: grid; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--fku60-line); } .fku60-step:last-child { border-bottom: none; } @media (min-width: 768px) { .fku60-step { grid-template-columns: 4rem 9rem 1fr; padding: 1.25rem 1.5rem; align-items: start; } } .fku60-step__number { font-size: 0.875rem; font-weight: 900; color: var(--fku60-link); } .fku60-step__title { font-size: 1rem; font-weight: 700; } .fku60-step__text { font-size: 0.875rem; color: var(--fku60-muted); } .fku60-consult-box { border-radius: 1.5rem; border: 1px solid var(--fku60-consult-box-border); background: var(--fku60-consult-box-bg); padding: 1.5rem; color: #ffffff; } .fku60-consult-box__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(239, 250, 243, 0.8); } .fku60-consult-box__title { margin-top: 1rem; font-size: 1.5rem; font-weight: 700; } .fku60-consult-box__text { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.875rem; color: rgba(239, 250, 243, 0.9); } .fku60-consult-box .fku60-button { margin-top: 1.5rem; background: #ffffff; color: var(--fku60-brand-900); } .fku60-consult-box .fku60-button:hover { background: var(--fku60-brand-50); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } /* ---------------------------------------------------------------------- */ /* CTA band */ /* ---------------------------------------------------------------------- */ .fku60-cta { position: relative; overflow: hidden; isolation: isolate; color: #ffffff; padding: 5rem 0; background-image: linear-gradient(120deg, #0f4f35 0%, #10744a 42%, #0e9455 68%, #0f5f3d 100%); } @media (min-width: 768px) { .fku60-cta { padding: 6rem 0; } } html.fku60-dark .fku60-cta { background-image: linear-gradient(120deg, #0b2d21 0%, #0f4f35 46%, #10744a 72%, #0b2d21 100%); } .fku60-cta__inner { position: relative; z-index: 1; } .fku60-cta__grid { display: grid; gap: 2.5rem; } @media (min-width: 1024px) { .fku60-cta__grid { grid-template-columns: 1fr auto; align-items: center; } } .fku60-cta__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(239, 250, 243, 0.8); } .fku60-cta__title { margin-top: 1rem; font-size: 1.875rem; font-weight: 700; line-height: 1.3; } @media (min-width: 768px) { .fku60-cta__title { font-size: 2.25rem; } } .fku60-cta__text { margin-top: 1.25rem; max-width: 42rem; font-size: 1rem; line-height: 2; color: rgba(239, 250, 243, 0.9); } .fku60-cta__actions { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .fku60-cta__actions { flex-direction: row; } } @media (min-width: 1024px) { .fku60-cta__actions { flex-direction: column; } } .fku60-cta__checks { display: grid; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.875rem; } @media (min-width: 768px) { .fku60-cta__checks { grid-template-columns: repeat(3, 1fr); } } .fku60-cta__checks p { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: rgba(239, 250, 243, 0.9); } .fku60-cta__checks .fku60-icon { color: var(--fku60-accent-300); } /* ---------------------------------------------------------------------- */ /* Company page */ /* ---------------------------------------------------------------------- */ .fku60-company-layout { display: grid; gap: 3rem; } @media (min-width: 1024px) { .fku60-company-layout { grid-template-columns: 0.7fr 1.3fr; } } .fku60-company-table { overflow: hidden; } .fku60-company-row { display: grid; gap: 0.5rem; padding: 1.25rem; border-bottom: 1px solid var(--fku60-line); } .fku60-company-row:last-child { border-bottom: none; } @media (min-width: 768px) { .fku60-company-row { grid-template-columns: 10rem 1fr; padding: 1.25rem 2rem; } } .fku60-company-row dt { font-size: 0.875rem; font-weight: 700; color: var(--fku60-muted); } .fku60-company-row dd { margin: 0; font-weight: 700; } .fku60-company-row__list { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } @media (min-width: 640px) { .fku60-company-row__list { grid-template-columns: 1fr 1fr; } } .fku60-company-row__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; } .fku60-company-row__list .fku60-icon { color: var(--fku60-icon-accent); } .fku60-map-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--fku60-line); background: var(--fku60-card-bg); box-shadow: var(--fku60-card-shadow); } .fku60-map-frame iframe { width: 100%; height: 100%; border: 0; } /* ---------------------------------------------------------------------- */ /* Contact page */ /* ---------------------------------------------------------------------- */ .fku60-contact-layout { display: grid; gap: 2.5rem; } @media (min-width: 1024px) { .fku60-contact-layout { grid-template-columns: 0.75fr 1.25fr; } } .fku60-contact-aside p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.9; color: var(--fku60-muted); } .fku60-contact-aside__mail { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; } .fku60-contact-panel { padding: 1.25rem; } @media (min-width: 768px) { .fku60-contact-panel { padding: 2rem; } } .fku60-form-row { margin-bottom: 1.25rem; } .fku60-form-row label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 700; } .fku60-form-row .required { color: #dc2626; } .fku60-form-row input[type='text'], .fku60-form-row input[type='email'], .fku60-form-row textarea { width: 100%; border-radius: 1rem; border: 1px solid var(--fku60-input-border); background: var(--fku60-input-bg); color: var(--fku60-input-text); padding: 0.75rem 1rem; font: inherit; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .fku60-form-row input::placeholder, .fku60-form-row textarea::placeholder { color: var(--fku60-input-placeholder); } .fku60-form-row input:focus, .fku60-form-row textarea:focus { border-color: var(--fku60-brand-500); box-shadow: 0 0 0 3px rgba(22, 178, 104, 0.2); } .fku60-form-row textarea { resize: vertical; min-height: 9rem; } .fku60-contact-submit { margin-top: 0.5rem; } .fku60-contact-note { margin-top: 2rem; text-align: center; font-size: 0.875rem; color: var(--fku60-muted); } /* CF7 shortcode markup lives inside .fku60-cf7-wrap; keep it visually consistent with the hand-built form styling above. */ .fku60-cf7-wrap .wpcf7-form-control-wrap { display: block; margin-bottom: 1.25rem; } .fku60-cf7-wrap .wpcf7-form-control-wrap label, .fku60-cf7-wrap p > label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 700; } .fku60-cf7-wrap input[type='text'], .fku60-cf7-wrap input[type='email'], .fku60-cf7-wrap textarea { width: 100%; border-radius: 1rem; border: 1px solid var(--fku60-input-border); background: var(--fku60-input-bg); color: var(--fku60-input-text); padding: 0.75rem 1rem; font: inherit; outline: none; } .fku60-cf7-wrap textarea { min-height: 9rem; resize: vertical; } .fku60-cf7-wrap .wpcf7-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 700; border: none; color: #ffffff; background: var(--fku60-gradient-brand); cursor: pointer; } .fku60-cf7-wrap .wpcf7-spinner { margin-left: 0.5rem; } .fku60-cf7-wrap .wpcf7-not-valid-tip { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: #dc2626; } .fku60-cf7-wrap form.sent .wpcf7-response-output, .fku60-cf7-wrap .wpcf7-response-output { margin-top: 1rem; border-radius: 1rem; padding: 0.875rem 1rem; font-size: 0.875rem; border: 1px solid var(--fku60-line); } .fku60-cf7-wrap form.invalid .wpcf7-response-output, .fku60-cf7-wrap form.failed .wpcf7-response-output, .fku60-cf7-wrap form.aborted .wpcf7-response-output, .fku60-cf7-wrap form.spam .wpcf7-response-output { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.08); color: #b91c1c; } .fku60-cf7-wrap form.sent .wpcf7-response-output { border-color: rgba(22, 178, 104, 0.3); background: var(--fku60-brand-50); color: var(--fku60-brand-800); } html.fku60-dark .fku60-cf7-wrap form.sent .wpcf7-response-output { background: rgba(52, 200, 130, 0.12); color: var(--fku60-brand-200); } /* JS-driven success panel, mirrors the original Nuxt "送信完了" screen. Hidden until fuku60.js flips it on after a wpcf7mailsent event. */ .fku60-contact-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1rem; } .fku60-contact-success.is-visible { display: flex; } .fku60-contact-success__icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; border-radius: 9999px; background: var(--fku60-badge-bg); color: var(--fku60-icon-accent); } .fku60-contact-success__icon .fku60-icon { width: 1.75rem; height: 1.75rem; } .fku60-contact-success__title { font-size: 1.5rem; font-weight: 700; } .fku60-contact-success__text { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.75; color: var(--fku60-muted); } .fku60-contact-success .fku60-button { margin-top: 2rem; } .fku60-cf7-wrap.is-submitted { display: none; } /* ---------------------------------------------------------------------- */ /* News */ /* ---------------------------------------------------------------------- */ .fku60-news-grid { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .fku60-news-grid { grid-template-columns: repeat(3, 1fr); } } /* With only one or two published posts, the fixed 3-column grid above leaves the rest of the row empty and pins the cards to the left edge. `--sparse` drops to the real card count and centres them, so a site that has just started posting doesn't read as a broken layout. `minmax(0, 22rem)` keeps a lone card near its 3-column width instead of stretching across the shell. */ @media (min-width: 768px) { .fku60-news-grid--sparse { grid-template-columns: repeat(var(--fku60-news-columns, 3), minmax(0, 22rem)); justify-content: center; } } .fku60-news-card { display: flex; flex-direction: column; overflow: hidden; } /* The grid stretches `.fku60-news-card` to match the tallest card in its row, but that height was never reaching `.fku60-news-card__body`'s `flex: 1` below because the plain `` in between only took its content height. Making the link itself a full-height flex column closes that gap, so "続きを読む" lands in the same spot whether or not the card has a thumbnail. */ .fku60-news-card > a { display: flex; flex-direction: column; height: 100%; } .fku60-news-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fku60-brand-50); } html.fku60-dark .fku60-news-card__media { background: rgba(255, 255, 255, 0.04); } .fku60-news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .fku60-news-card:hover .fku60-news-card__media img { transform: scale(1.05); } .fku60-news-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; } .fku60-news-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.6; } .fku60-news-card__excerpt { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.7; color: var(--fku60-muted); flex: 1; } /* Date bottom-left, "続きを読む" bottom-right — `.fku60-news-card__excerpt`'s flex-grow above pushes this row to the bottom of the card regardless of how much excerpt text there is. */ .fku60-news-card__footer { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .fku60-news-card__date { font-size: 0.75rem; font-weight: 700; color: var(--fku60-muted); } .fku60-news-card__more { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--fku60-link); } .fku60-news-empty { padding: 3rem 1rem; text-align: center; color: var(--fku60-muted); } .fku60-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 3rem; } .fku60-pagination a, .fku60-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; border-radius: 9999px; border: 1px solid var(--fku60-line); font-size: 0.875rem; font-weight: 700; } .fku60-pagination a:hover { background: var(--fku60-brand-50); } html.fku60-dark .fku60-pagination a:hover { background: rgba(255, 255, 255, 0.08); } .fku60-pagination .current { background: var(--fku60-gradient-brand); color: #ffffff; border-color: transparent; } /* `flex-wrap` so a long trail wraps as whole ホーム/お知らせ/{title} segments onto new lines, instead of every segment being squeezed narrower than its text and breaking mid-word (Japanese text wraps at any character by default). The fixed short labels get `white-space: nowrap` so "ホーム" itself never splits; the current-page title is left to wrap normally since it can be arbitrarily long. */ .fku60-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--fku60-muted); } .fku60-breadcrumb a { white-space: nowrap; } .fku60-breadcrumb a:hover { color: var(--fku60-link); } /* Breadcrumb sits directly above this on every article page, so the header carries its own top margin rather than relying on `.fku60-breadcrumb` to add spacing other pages that reuse the breadcrumb don't want. */ .fku60-article-header { max-width: 48rem; margin: 2rem auto 0; text-align: left; } .fku60-article-header__title { font-size: 1.75rem; font-weight: 700; line-height: 1.5; } /* Sits at the title's bottom-right. */ .fku60-article-header__meta { margin-top: 0.75rem; text-align: right; font-size: 0.8125rem; font-weight: 700; color: var(--fku60-muted); } @media (min-width: 768px) { .fku60-article-header { margin-top: 2.5rem; } .fku60-article-header__title { font-size: 2.25rem; } } .fku60-article-thumbnail { margin: 2.5rem auto 0; max-width: 56rem; border-radius: 1.5rem; overflow: hidden; } .fku60-article-thumbnail img { width: 100%; display: block; } .fku60-article-body { max-width: 42rem; margin: 2.5rem auto 0; padding: 2rem 1.25rem; } @media (min-width: 768px) { .fku60-article-body { padding: 2.5rem; } } .fku60-article-body p { margin: 0 0 1.25rem; line-height: 2; } .fku60-article-body h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; } .fku60-article-body h3 { margin: 2rem 0 0.75rem; font-size: 1.25rem; } .fku60-article-body img { border-radius: 1rem; margin: 1.5rem 0; } .fku60-article-body ul, .fku60-article-body ol { padding-left: 1.5rem; line-height: 2; } .fku60-article-body a { color: var(--fku60-link); text-decoration: underline; text-decoration-color: var(--fku60-link-decoration); text-underline-offset: 4px; } .fku60-article-nav { display: flex; justify-content: space-between; gap: 1rem; max-width: 42rem; margin: 2.5rem auto 0; padding: 0 1.25rem; } .fku60-article-nav a { font-size: 0.875rem; font-weight: 700; color: var(--fku60-link); } .fku60-article-nav__spacer { flex: 1; } /* ---------------------------------------------------------------------- */ /* Legal pages (privacy / terms) */ /* ---------------------------------------------------------------------- */ .fku60-legal { max-width: 48rem; margin: 3rem auto 0; padding: 2rem 1.25rem; } @media (min-width: 768px) { .fku60-legal { padding: 2.5rem 2rem; } } .fku60-legal p { margin: 0 0 1.25rem; line-height: 2; } .fku60-legal h2 { margin: 2.5rem 0 1rem; font-size: 1.375rem; } .fku60-legal ul, .fku60-legal ol { padding-left: 1.5rem; margin: 0 0 1.25rem; line-height: 2; } .fku60-legal hr { margin: 2.5rem 0; border: none; border-top: 1px solid var(--fku60-line); } .fku60-legal__signoff { text-align: right; font-size: 0.875rem; color: var(--fku60-muted); } .fku60-legal a { color: var(--fku60-link); text-decoration: underline; text-decoration-color: var(--fku60-link-decoration); text-underline-offset: 4px; } /* ---------------------------------------------------------------------- */ /* Screen-reader only helper */ /* ---------------------------------------------------------------------- */ .fku60-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }