@charset "UTF-8"; /* ========================================================================= グローバル: スムーズスクロール（アンカー遷移用） ========================================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 88px; /* .ldx-header の見かけ高さ + α */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================================= SWELL 親テーマヘッダーの非表示（独自ヘッダーに置き換え） - SWELL は body_class を ではなく
に出力するため、 `body.ldx-hide-swell-header` セレクタはマッチしない。`.ldx-hide-swell-header` を任意のスコープ要素として用いる。 - display + visibility + height の三段階で確実に消す ========================================================================= */ .ldx-hide-swell-header #header, .ldx-hide-swell-header .l-header, .ldx-hide-swell-header header.l-header, .ldx-hide-swell-header header[role="banner"]:not(.ldx-header), .ldx-hide-swell-header .l-header__inner, .ldx-hide-swell-header .l-fixHeader, .ldx-hide-swell-header .c-gnav, .ldx-hide-swell-header .l-header__bar { display: none !important; height: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* SWELL が body にトップ余白を付ける場合がある → 独自ヘッダー前提に揃える */ .ldx-hide-swell-header { padding-top: 0 !important; margin-top: 0 !important; } /* 本文を独自ヘッダーの高さ分下げる（fixed 配置の独自ヘッダーと衝突しないよう） */ .ldx-hide-swell-header { --ldx-header-h: 80px; } @media (max-width: 1023.98px) { .ldx-hide-swell-header { --ldx-header-h: 64px; } } .ldx-hide-swell-header #content, .ldx-hide-swell-header .l-content, .ldx-hide-swell-header .l-mv, .ldx-hide-swell-header main { padding-top: var(--ldx-header-h, 80px); } /* SWELL のフッター / 固定ボタン / 検索モーダル / スクロールオブザーバを非表示 LDX 独自フッター・PageTop・スクロール処理が既にあり、重複出力をレイアウトから除外 */ .ldx-hide-swell-header .l-footer, .ldx-hide-swell-header footer.l-footer, .ldx-hide-swell-header .p-fixBtnWrap, .ldx-hide-swell-header #search_modal, .ldx-hide-swell-header .l-scrollObserver { display: none !important; } /* ========================================================================= .ldx-header — 独自グローバルヘッダー ========================================================================= */ /* スキップリンク（スクリーンリーダー / キーボード用） */ .ldx-skip-link { position: absolute; top: -200px; left: 16px; z-index: 10001; padding: 10px 16px; background: var(--ldx-color-primary); color: #FFFFFF; text-decoration: none; border-radius: var(--ldx-radius-sm); font-weight: 700; } .ldx-skip-link:focus-visible { top: 16px; outline: 3px solid var(--ldx-color-accent); outline-offset: 2px; } .ldx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(255, 255, 255, 0.0); font-family: var(--ldx-font-sans); transition: background 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease, height 200ms ease; isolation: isolate; } /* 透明スタートだと白背景ページでロゴが見えないため、初期は微弱な白から始める */ .ldx-header { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; } .ldx-header--scrolled { background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 20px rgba(30, 58, 138, 0.08); border-bottom-color: rgba(30, 58, 138, 0.06); } .ldx-header__container { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1200px, 96%); margin: 0 auto; height: 80px; padding: 0 16px; transition: height 200ms ease; } .ldx-header--scrolled .ldx-header__container { height: 64px; } @media (max-width: 1023.98px) { .ldx-header__container { height: 64px; } .ldx-header--scrolled .ldx-header__container { height: 56px; } } /* ----- ブランドロゴ ----- */ .ldx-header__brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .ldx-header__brand-logo { display: block; height: 56px; width: auto; max-width: 100%; object-fit: contain; transition: height 200ms ease; } .ldx-header--scrolled .ldx-header__brand-logo { height: 44px; } @media (max-width: 1023.98px) { .ldx-header__brand-logo { height: 44px; } .ldx-header--scrolled .ldx-header__brand-logo { height: 38px; } } .ldx-header__brand:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 4px; border-radius: var(--ldx-radius-sm); } /* ----- メインナビ ----- */ .ldx-header__nav { flex: 1; display: flex; justify-content: center; } .ldx-header__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(4px, 1vw, 14px); } .ldx-header__menu-item { position: relative; } .ldx-header__menu-link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border: 0; background: transparent; font-family: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--ldx-color-text); text-decoration: none; letter-spacing: 0.02em; cursor: pointer; border-radius: var(--ldx-radius-sm); position: relative; transition: color 150ms ease, background 150ms ease; } .ldx-header__menu-link:hover { color: var(--ldx-color-primary); background: rgba(30, 58, 138, 0.04); } .ldx-header__menu-link:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 2px; } /* アクティブリンクの下線 */ .ldx-header__menu-link--active { color: var(--ldx-color-primary); } .ldx-header__menu-link--active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); } .ldx-header__chev { width: 14px; height: 14px; transition: transform 150ms ease; } .ldx-header__menu-item--open .ldx-header__chev, .ldx-header__menu-item--has-dropdown:hover .ldx-header__chev, .ldx-header__menu-item--has-dropdown:focus-within .ldx-header__chev { transform: rotate(180deg); } /* ----- ドロップダウン ----- */ .ldx-header__dropdown { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 280px; /* 280px+ で広めに */ margin: 0; padding: 8px 0; /* 縦方向のみ余白、リンクで横余白を取る */ list-style: none; background: #FFFFFF; border: 1px solid var(--ldx-color-border); border-radius: var(--ldx-radius-md); box-shadow: var(--ldx-shadow-glow); opacity: 0; visibility: hidden; /* 完全に非表示。is-open で復活 */ pointer-events: none; transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; z-index: 1100; /* SWELL 親テーマの要素より上 */ } /* 透明な「橋」: 親項目とドロップダウンの間 6px をマウスが横切っても閉じない */ .ldx-header__dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; /* top:calc(100% + 6px) ぶんを覆う */ background: transparent; } /* dropdown 自身に hover してる間も開いたまま維持（蛇行マウス対策） */ .ldx-header__menu-item--has-dropdown:hover .ldx-header__dropdown, .ldx-header__menu-item--has-dropdown:focus-within .ldx-header__dropdown, .ldx-header__menu-item--open .ldx-header__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .ldx-header__dropdown-link { display: flex; align-items: center; min-height: 44px; /* iOS推奨タップ領域 */ padding: 14px 24px; /* 縦14×横24で大きめのタップ領域 */ font-size: 0.95rem; line-height: 1.4; font-weight: 600; color: var(--ldx-color-text); text-decoration: none; border-radius: 0; transition: background 120ms ease, color 120ms ease; } .ldx-header__dropdown-link:hover, .ldx-header__dropdown-link:focus-visible { background: rgba(201, 169, 97, 0.10); /* gold うっすら */ color: var(--ldx-color-accent-dark); } .ldx-header__dropdown-link:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: -3px; } .ldx-header__dropdown-link.ldx-header__menu-link--active { color: var(--ldx-color-primary); background: rgba(30, 58, 138, 0.06); } /* ----- CTA ボタン ----- */ .ldx-header__cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; box-shadow: 0 6px 16px rgba(30, 58, 138, 0.24); transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; flex-shrink: 0; white-space: nowrap; } .ldx-header__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(30, 58, 138, 0.30); } .ldx-header__cta:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 3px; } .ldx-header__cta-arrow { transition: transform 150ms ease; } .ldx-header__cta:hover .ldx-header__cta-arrow { transform: translateX(3px); } /* ----- ハンバーガー（モバイル時のみ表示） ----- */ .ldx-header__hamburger { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; border-radius: var(--ldx-radius-sm); } .ldx-header__hamburger:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 2px; } .ldx-header__hamburger-line { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--ldx-color-primary-dark); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease, top 200ms ease; } .ldx-header__hamburger-line:nth-child(1) { top: 13px; } .ldx-header__hamburger-line:nth-child(2) { top: 19px; } .ldx-header__hamburger-line:nth-child(3) { top: 25px; } .ldx-header__hamburger--open .ldx-header__hamburger-line:nth-child(1) { top: 19px; transform: rotate(45deg); } .ldx-header__hamburger--open .ldx-header__hamburger-line:nth-child(2) { opacity: 0; } .ldx-header__hamburger--open .ldx-header__hamburger-line:nth-child(3) { top: 19px; transform: rotate(-45deg); } /* ----- レスポンシブ切替 ----- */ @media (max-width: 1023.98px) { .ldx-header__nav, .ldx-header__cta { display: none; } .ldx-header__hamburger { display: block; } } /* ----- フルスクリーンモバイルメニュー ----- */ .ldx-mobile-menu { position: fixed; inset: 0; z-index: 9990; background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%); padding: 80px 24px 32px; overflow-y: auto; opacity: 0; transform: scale(0.98); transition: opacity 200ms ease, transform 200ms ease; } .ldx-mobile-menu--open { opacity: 1; transform: scale(1); } .ldx-mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 480px; margin: 0 auto; } .ldx-mobile-menu__link { display: flex; align-items: center; width: 100%; min-height: 56px; /* タップしやすい高さ */ padding: 14px 16px; font-size: 1.125rem; font-weight: 700; color: var(--ldx-color-primary-dark); text-decoration: none; border: 0; background: transparent; border-radius: var(--ldx-radius-md); border-bottom: 1px solid var(--ldx-color-border); transition: background 150ms ease, color 150ms ease; text-align: left; cursor: pointer; } .ldx-mobile-menu__link:hover, .ldx-mobile-menu__link:focus-visible { background: rgba(30, 58, 138, 0.06); color: var(--ldx-color-primary); } /* アコーディオン親 (サービス) */ .ldx-mobile-menu__group-toggle { justify-content: space-between; } .ldx-mobile-menu__chev { width: 18px; height: 18px; margin-left: 12px; flex-shrink: 0; transition: transform 200ms ease; color: var(--ldx-color-muted); } .ldx-mobile-menu__group-toggle[aria-expanded="true"] .ldx-mobile-menu__chev { transform: rotate(180deg); } /* アコーディオン子 (各サービス) */ .ldx-mobile-menu__sub { list-style: none; padding: 4px 0 8px; margin: 0; display: flex; flex-direction: column; gap: 2px; background: rgba(30, 58, 138, 0.025); border-radius: var(--ldx-radius-md); } .ldx-mobile-menu__sub[hidden] { display: none; } .ldx-mobile-menu__sub-link { display: flex; align-items: center; min-height: 48px; /* モバイル推奨タップ領域 */ padding: 12px 28px; font-size: 1rem; font-weight: 600; color: var(--ldx-color-text); text-decoration: none; border-radius: var(--ldx-radius-sm); line-height: 1.4; } .ldx-mobile-menu__sub-link:hover, .ldx-mobile-menu__sub-link:focus-visible { background: rgba(201, 169, 97, 0.10); color: var(--ldx-color-accent-dark); } .ldx-mobile-menu__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 16px 24px; border-radius: 999px; background: linear-gradient(135deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; font-size: 1rem; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px rgba(30, 58, 138, 0.24); } .ldx-mobile-menu__cta:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 3px; } /* ボディスクロール抑止（モバイルメニュー開き中）*/ html.ldx-no-scroll, html.ldx-no-scroll body { overflow: hidden !important; } /* ヘッダー JS が無効でも最低限機能するためのフォールバック ブラウザが IntersectionObserver も無いような環境でも、 ボタンとリンクが「素のボタン/リンク」として動くだけで OK */ @media (prefers-reduced-motion: reduce) { .ldx-header, .ldx-header__container, .ldx-header__cta, .ldx-header__hamburger-line, .ldx-mobile-menu, .ldx-header__chev, .ldx-header__dropdown { transition: none !important; } } /* Template: swell Theme Name: SWELL CHILD Theme URI: https://swell-theme.com/ Description: SWELLの子テーマ Version: 1.0.0 Author: LOOS WEB STUDIO Author URI: https://loos-web-studio.com/ License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* ========================================================================= Design Tokens（docs/design-system.md 準拠） ========================================================================= */ :root { --ldx-color-primary: #1E3A8A; --ldx-color-primary-dark: #172C6B; --ldx-color-primary-soft: #2C4DAE; --ldx-color-accent: #C9A961; --ldx-color-accent-dark: #A88841; --ldx-color-bg: #FFFFFF; --ldx-color-bg-soft: #F7F8FA; --ldx-color-text: #1F2937; --ldx-color-muted: #6B7280; --ldx-color-border: #E5E7EB; --ldx-font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --ldx-font-serif: "Noto Serif JP", "Yu Mincho", serif; --ldx-radius-sm: 6px; --ldx-radius-md: 12px; --ldx-radius-lg: 20px; --ldx-shadow-card: 0 4px 12px rgba(30, 58, 138, 0.08); --ldx-shadow-cta: 0 12px 28px rgba(30, 58, 138, 0.28); --ldx-shadow-glow: 0 24px 60px rgba(30, 58, 138, 0.18); --ldx-transition: 150ms ease; } /* ========================================================================= Hero Section（.ldx-hero） トップページのファーストビュー ========================================================================= */ .ldx-hero { position: relative; overflow: hidden; isolation: isolate; padding: 96px 0 88px; background: radial-gradient(120% 80% at 88% -10%, rgba(201, 169, 97, 0.18), transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%); color: var(--ldx-color-text); font-family: var(--ldx-font-sans); /* SWELL 本文コンテナ（~1080px）の制約を抜けて画面幅 100vw にフルブリード 親テーマ/プラグインの max-width に確実に勝つため !important を使う */ width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 0; margin-bottom: 0; } /* 念のため：親 .wp-block-html / .post_content などが overflow を持っていても ヒーロー内の絶対配置カード（.ldx-hero__card--accent 等の right:0）が ビューポート右端まできちんと収まるよう、コンテナ側の幅を再確認しておく。 */ .ldx-hero .ldx-hero__container { box-sizing: border-box; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } /* >=1280px : ワイド画面で右側装飾カードに余裕を持たせる */ @media (min-width: 1280px) { .ldx-hero__visual { max-width: 520px; } } .ldx-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .ldx-hero__bg::before, .ldx-hero__bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; } .ldx-hero__bg::before { top: -160px; left: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(30, 58, 138, 0.35) 0%, transparent 70%); } .ldx-hero__bg::after { bottom: -200px; right: -140px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(201, 169, 97, 0.30) 0%, transparent 70%); } .ldx-hero__bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(30, 58, 138, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 58, 138, 0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 80%); } .ldx-hero__container { width: min(1200px, 92%); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } /* ----- Content ----- */ .ldx-hero__content { max-width: 720px; } .ldx-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 8px 16px 8px 8px; background: rgba(30, 58, 138, 0.06); border: 1px solid rgba(30, 58, 138, 0.12); border-radius: 999px; font-size: 0.875rem; color: var(--ldx-color-primary); font-weight: 600; letter-spacing: 0.02em; } .ldx-hero__eyebrow-badge { display: inline-flex; align-items: center; padding: 4px 12px; background: linear-gradient(135deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); color: #FFFFFF; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; } .ldx-hero__title { margin: 0 0 24px; font-family: var(--ldx-font-serif); font-size: clamp(2.25rem, 5.2vw, 3.75rem); line-height: 1.25; font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.02em; } .ldx-hero__title-accent { display: inline-block; position: relative; color: var(--ldx-color-primary); } .ldx-hero__title-accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px; background: linear-gradient(90deg, rgba(201, 169, 97, 0.55), rgba(201, 169, 97, 0.15)); z-index: -1; border-radius: 2px; } .ldx-hero__lead { margin: 0 0 40px; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.9; color: var(--ldx-color-text); max-width: 38em; } /* ----- CTA ----- */ .ldx-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 56px; } .ldx-hero__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 32px; border-radius: var(--ldx-radius-md); font-size: 1.0625rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; transition: transform var(--ldx-transition), box-shadow var(--ldx-transition), background var(--ldx-transition), color var(--ldx-transition), border-color var(--ldx-transition); white-space: nowrap; } .ldx-hero__btn--primary { background: linear-gradient(135deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; box-shadow: var(--ldx-shadow-cta); } .ldx-hero__btn--primary:hover, .ldx-hero__btn--primary:focus-visible { background: linear-gradient(135deg, var(--ldx-color-primary-dark) 0%, var(--ldx-color-primary) 100%); transform: translateY(-2px); color: #FFFFFF; } .ldx-hero__btn--secondary { background: #FFFFFF; color: var(--ldx-color-primary); border: 2px solid var(--ldx-color-primary); } .ldx-hero__btn--secondary:hover, .ldx-hero__btn--secondary:focus-visible { background: var(--ldx-color-primary); color: #FFFFFF; transform: translateY(-2px); } .ldx-hero__btn:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 3px; } .ldx-hero__btn-arrow { font-size: 1.25rem; transition: transform var(--ldx-transition); } .ldx-hero__btn:hover .ldx-hero__btn-arrow { transform: translateX(4px); } /* ----- Metrics ----- */ .ldx-hero__metrics { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--ldx-color-border); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ldx-hero__metric { display: flex; flex-direction: column; gap: 4px; } .ldx-hero__metric-num { font-family: var(--ldx-font-serif); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; color: var(--ldx-color-primary); display: inline-flex; align-items: baseline; gap: 4px; } .ldx-hero__metric-unit { font-size: 0.875rem; font-weight: 600; color: var(--ldx-color-accent-dark); } .ldx-hero__metric-label { font-size: 0.8125rem; color: var(--ldx-color-muted); letter-spacing: 0.02em; } /* ----- Visual ----- 主カード（-42% + バーチャート）を上段にフル幅、 サブカード 2 枚（120h / Certified）を下段で横並び。 重なりを排してクリーンな構成にする。 */ .ldx-hero__visual { display: none; grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "accent small"; gap: 20px; max-width: 480px; margin-left: auto; } .ldx-hero__card { position: relative; background: #FFFFFF; border: 1px solid var(--ldx-color-border); border-radius: var(--ldx-radius-lg); box-shadow: var(--ldx-shadow-glow); padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ldx-hero__card--main { grid-area: main; background: linear-gradient(160deg, #FFFFFF 0%, #F7F8FA 100%); padding: 28px 30px 24px; } .ldx-hero__card--accent { grid-area: accent; background: linear-gradient(135deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; border: none; } .ldx-hero__card--accent .ldx-hero__card-label, .ldx-hero__card--accent .ldx-hero__card-value { color: #FFFFFF; } .ldx-hero__card--accent .ldx-hero__card-value { font-size: 1.625rem; } .ldx-hero__card--small { grid-area: small; border-left: 4px solid var(--ldx-color-accent); } .ldx-hero__card-label { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ldx-color-muted); text-transform: uppercase; } .ldx-hero__card-value { font-family: var(--ldx-font-serif); font-size: 1.75rem; font-weight: 700; color: var(--ldx-color-primary); line-height: 1.2; } .ldx-hero__card-bars { display: flex; align-items: flex-end; gap: 8px; height: 72px; margin-top: 8px; } .ldx-hero__card-bar { flex: 1; background: linear-gradient(180deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); border-radius: 4px 4px 0 0; } .ldx-hero__card-bar--1 { height: 35%; } .ldx-hero__card-bar--2 { height: 60%; } .ldx-hero__card-bar--3 { height: 45%; } .ldx-hero__card-bar--4 { height: 80%; opacity: 0.95; background: linear-gradient(180deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); } .ldx-hero__card-bar--5 { height: 100%; background: linear-gradient(180deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); } /* ----- レスポンシブ ----- */ @media (min-width: 768px) { .ldx-hero { padding: 112px 0 96px; } } @media (min-width: 1024px) { .ldx-hero { padding: 128px 0 112px; } .ldx-hero__container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; } .ldx-hero__visual { display: grid; } } @media (max-width: 640px) { .ldx-hero { padding: 64px 0 56px; } .ldx-hero__eyebrow { font-size: 0.8125rem; padding: 6px 14px 6px 6px; } .ldx-hero__cta { margin-bottom: 40px; } .ldx-hero__btn { width: 100%; min-height: 56px; } .ldx-hero__metrics { grid-template-columns: 1fr; gap: 16px; } .ldx-hero__metric { flex-direction: row; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--ldx-color-border); } .ldx-hero__metric:last-child { border-bottom: none; padding-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .ldx-hero__btn, .ldx-hero__btn-arrow { transition: none; } .ldx-hero__btn:hover { transform: none; } } /* ========================================================================= 共通: セクションフルブリード（SWELL 本文コンテナを抜ける） ========================================================================= */ .ldx-services, .ldx-reasons, .ldx-cta, .ldx-process, .ldx-cases, .ldx-faq, .ldx-contact, .ldx-footer { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); font-family: var(--ldx-font-sans); color: var(--ldx-color-text); position: relative; isolation: isolate; } /* ========================================================================= Section 2: Services（.ldx-services） アウフヘーベンが提供する 4 つのサービス ========================================================================= */ .ldx-services { padding: clamp(72px, 10vw, 120px) 0; background: var(--ldx-color-bg); } .ldx-services__container { width: min(1200px, 92%); margin: 0 auto; } .ldx-services__header { text-align: center; margin-bottom: clamp(40px, 6vw, 64px); } .ldx-services__eyebrow { display: inline-block; margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ldx-color-accent-dark); } .ldx-services__heading { margin: 0 0 16px; font-family: var(--ldx-font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.35; font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.02em; } .ldx-services__sub { margin: 0 auto; max-width: 42em; font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); line-height: 1.85; color: var(--ldx-color-muted); } .ldx-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 32px); } .ldx-services__card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 32px); background: var(--ldx-color-bg); border: 1px solid var(--ldx-color-border); border-radius: var(--ldx-radius-lg); box-shadow: var(--ldx-shadow-card); transition: transform var(--ldx-transition), box-shadow var(--ldx-transition), border-color var(--ldx-transition); } .ldx-services__card:hover, .ldx-services__card:focus-within { transform: translateY(-6px); box-shadow: var(--ldx-shadow-glow); border-color: rgba(30, 58, 138, 0.20); } .ldx-services__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--ldx-radius-md); background: linear-gradient(135deg, rgba(201, 169, 97, 0.18) 0%, rgba(201, 169, 97, 0.06) 100%); color: var(--ldx-color-accent-dark); transition: background var(--ldx-transition), color var(--ldx-transition); } .ldx-services__card:hover .ldx-services__icon, .ldx-services__card:focus-within .ldx-services__icon { background: linear-gradient(135deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; } .ldx-services__icon svg { width: 28px; height: 28px; } .ldx-services__card-title { margin: 0; font-family: var(--ldx-font-serif); font-size: clamp(1.125rem, 1.6vw, 1.25rem); font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.02em; line-height: 1.5; } .ldx-services__card-desc { margin: 0; font-size: 0.9375rem; line-height: 1.85; color: var(--ldx-color-text); flex: 1; } .ldx-services__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.9375rem; font-weight: 700; color: var(--ldx-color-primary); text-decoration: none; letter-spacing: 0.02em; transition: color var(--ldx-transition), gap var(--ldx-transition); } .ldx-services__link:hover, .ldx-services__link:focus-visible { color: var(--ldx-color-accent-dark); gap: 10px; } .ldx-services__link:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 4px; border-radius: 4px; } @media (min-width: 1024px) { .ldx-services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 1023.98px) { .ldx-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================= Section 3: Reasons（.ldx-reasons） なぜアウフヘーベンが選ばれるのか ========================================================================= */ .ldx-reasons { padding: clamp(80px, 11vw, 128px) 0; background: radial-gradient(60% 50% at 92% 8%, rgba(201, 169, 97, 0.10), transparent 60%), linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%); overflow: hidden; } .ldx-reasons::before { content: ""; position: absolute; top: -120px; left: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(30, 58, 138, 0.10) 0%, transparent 70%); filter: blur(40px); z-index: -1; pointer-events: none; } .ldx-reasons__container { width: min(1200px, 92%); margin: 0 auto; } .ldx-reasons__header { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); } .ldx-reasons__eyebrow { display: inline-block; margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ldx-color-accent-dark); } .ldx-reasons__heading { margin: 0 0 16px; font-family: var(--ldx-font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.35; font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.02em; } .ldx-reasons__sub { margin: 0 auto; max-width: 42em; font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); line-height: 1.85; color: var(--ldx-color-muted); } .ldx-reasons__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.5vw, 40px); } .ldx-reasons__item { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3.5vw, 40px); background: #FFFFFF; border: 1px solid var(--ldx-color-border); border-radius: var(--ldx-radius-lg); box-shadow: var(--ldx-shadow-card); } .ldx-reasons__item::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 4px; background: linear-gradient(90deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); border-radius: 0 0 4px 4px; } .ldx-reasons__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--ldx-radius-md); background: linear-gradient(135deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; margin-bottom: 4px; } .ldx-reasons__icon svg { width: 26px; height: 26px; } .ldx-reasons__big-num { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--ldx-font-serif); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.0; color: var(--ldx-color-primary); letter-spacing: -0.02em; } .ldx-reasons__big-num small { font-size: 0.45em; font-weight: 600; color: var(--ldx-color-accent-dark); letter-spacing: 0.04em; } .ldx-reasons__item-title { margin: 0; font-family: var(--ldx-font-serif); font-size: clamp(1.125rem, 1.6vw, 1.25rem); font-weight: 700; color: var(--ldx-color-primary-dark); line-height: 1.5; } .ldx-reasons__item-desc { margin: 0; font-size: 0.9375rem; line-height: 1.9; color: var(--ldx-color-text); } @media (min-width: 768px) { .ldx-reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ldx-reasons__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================= Section 4: CTA（.ldx-cta） 業務改善は、相談から始まる。 ========================================================================= */ .ldx-cta { padding: clamp(64px, 10vw, 96px) 0; min-height: clamp(320px, 45vh, 480px); display: flex; align-items: center; background: radial-gradient(80% 60% at 92% 20%, rgba(201, 169, 97, 0.22), transparent 60%), linear-gradient(135deg, var(--ldx-color-primary-dark) 0%, var(--ldx-color-primary) 60%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; overflow: hidden; } .ldx-cta::before { content: ""; position: absolute; bottom: -180px; left: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 70%); filter: blur(50px); z-index: -1; pointer-events: none; } .ldx-cta__inner { width: min(960px, 92%); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 28px); } .ldx-cta__heading { margin: 0; font-family: var(--ldx-font-serif); font-size: clamp(1.875rem, 4.6vw, 2.875rem); line-height: 1.35; font-weight: 700; color: #FFFFFF; letter-spacing: 0.04em; } .ldx-cta__sub { margin: 0; max-width: 36em; font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); line-height: 1.95; color: rgba(255, 255, 255, 0.92); } .ldx-cta__buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 8px; } .ldx-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 32px; border-radius: var(--ldx-radius-md); font-size: 1.0625rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; transition: transform var(--ldx-transition), box-shadow var(--ldx-transition), background var(--ldx-transition), color var(--ldx-transition); white-space: nowrap; } .ldx-cta__btn--primary { background: linear-gradient(135deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); color: var(--ldx-color-primary-dark); box-shadow: 0 12px 28px rgba(201, 169, 97, 0.35); } .ldx-cta__btn--primary:hover, .ldx-cta__btn--primary:focus-visible { background: linear-gradient(135deg, var(--ldx-color-accent-dark) 0%, var(--ldx-color-accent) 100%); color: var(--ldx-color-primary-dark); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(201, 169, 97, 0.45); } .ldx-cta__btn--secondary { background: transparent; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.7); } .ldx-cta__btn--secondary:hover, .ldx-cta__btn--secondary:focus-visible { background: #FFFFFF; color: var(--ldx-color-primary-dark); transform: translateY(-2px); border-color: #FFFFFF; } .ldx-cta__btn:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 3px; } .ldx-cta__btn-arrow { font-size: 1.25rem; transition: transform var(--ldx-transition); } .ldx-cta__btn:hover .ldx-cta__btn-arrow { transform: translateX(4px); } @media (max-width: 640px) { .ldx-cta__btn { width: 100%; min-height: 56px; } } /* ========================================================================= Section 5: Process（.ldx-process） ご相談から導入・運用までの 5 ステップフロー ========================================================================= */ .ldx-process { padding: clamp(72px, 10vw, 120px) 0; background: var(--ldx-color-bg); } .ldx-process__container { width: min(1200px, 92%); margin: 0 auto; } .ldx-process__header { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); } .ldx-process__eyebrow { display: inline-block; margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ldx-color-accent-dark); } .ldx-process__heading { margin: 0 0 16px; font-family: var(--ldx-font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.35; font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.02em; } .ldx-process__sub { margin: 0 auto; max-width: 42em; font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); line-height: 1.85; color: var(--ldx-color-muted); } /* ステップ列 */ .ldx-process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); counter-reset: ldx-step; } .ldx-process__step { counter-increment: ldx-step; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(20px, 3vw, 28px) clamp(12px, 2vw, 20px); } /* 番号バッジ（ゴールド円） */ .ldx-process__badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); color: #FFFFFF; font-family: var(--ldx-font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 8px 20px rgba(201, 169, 97, 0.30); } .ldx-process__badge::before { content: "STEP"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--ldx-color-primary-dark); color: #FFFFFF; font-family: var(--ldx-font-sans); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; } .ldx-process__badge-num { font-size: 1.75rem; line-height: 1; } /* アイコン */ .ldx-process__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: var(--ldx-radius-md); background: rgba(30, 58, 138, 0.06); color: var(--ldx-color-primary); } .ldx-process__icon svg { width: 24px; height: 24px; } .ldx-process__step-title { margin: 0 0 6px; font-family: var(--ldx-font-serif); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); font-weight: 700; color: var(--ldx-color-primary-dark); line-height: 1.5; } .ldx-process__duration { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; background: rgba(30, 58, 138, 0.06); font-size: 0.75rem; font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.04em; } .ldx-process__step-desc { margin: 0; font-size: 0.875rem; line-height: 1.85; color: var(--ldx-color-text); max-width: 22em; } /* PC: 横並び + 接続線 */ @media (min-width: 1024px) { .ldx-process__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } /* 接続線（バッジ中心の高さに合わせる）*/ .ldx-process__step:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(20px, 3vw, 28px) + 36px); /* badge の中心 = top padding + 36px (badge 半径) */ left: calc(50% + 36px); right: calc(-50% + 36px); height: 0; border-top: 2px dashed rgba(30, 58, 138, 0.25); z-index: -1; } } /* タブレット: 2 列横並び + 2 列目以降は接続線なし */ @media (min-width: 640px) and (max-width: 1023.98px) { .ldx-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 32px); } } /* モバイル: 縦 + 縦接続線 */ @media (max-width: 639.98px) { .ldx-process__step:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(20px, 3vw, 28px) + 72px + 12px); /* badge bottom 直下 */ left: 50%; width: 0; height: 32px; border-left: 2px dashed rgba(30, 58, 138, 0.25); transform: translateX(-50%); } .ldx-process__step { padding-bottom: clamp(28px, 6vw, 40px); } } /* ========================================================================= Section 7: Contact（.ldx-contact） 主導線：mailto / 副導線：tel ========================================================================= */ .ldx-contact { padding: clamp(72px, 10vw, 120px) 0; background: radial-gradient(70% 60% at 50% -10%, rgba(201, 169, 97, 0.18), transparent 60%), linear-gradient(180deg, #FFFBF3 0%, #FFFFFF 100%); overflow: hidden; scroll-margin-top: 80px; } .ldx-contact::before { content: ""; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 169, 97, 0.18) 0%, transparent 70%); filter: blur(50px); z-index: -1; pointer-events: none; } .ldx-contact__container { width: min(960px, 92%); margin: 0 auto; text-align: center; } .ldx-contact__eyebrow { display: inline-block; margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ldx-color-accent-dark); } .ldx-contact__heading { margin: 0 0 16px; font-family: var(--ldx-font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.4; font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.02em; } .ldx-contact__sub { margin: 0 auto clamp(32px, 5vw, 48px); max-width: 36em; font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); line-height: 1.9; color: var(--ldx-color-text); } /* 2導線 */ .ldx-contact__channels { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); margin-bottom: clamp(28px, 4vw, 40px); } @media (min-width: 768px) { .ldx-contact__channels { grid-template-columns: 1.2fr 1fr; align-items: stretch; } } .ldx-contact__channel { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4vw, 40px); background: #FFFFFF; border: 1px solid var(--ldx-color-border); border-radius: var(--ldx-radius-lg); box-shadow: var(--ldx-shadow-card); text-align: left; } .ldx-contact__channel--primary { background: linear-gradient(135deg, var(--ldx-color-primary) 0%, var(--ldx-color-primary-soft) 100%); color: #FFFFFF; border-color: transparent; box-shadow: var(--ldx-shadow-cta); } .ldx-contact__channel-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ldx-color-accent-dark); } .ldx-contact__channel--primary .ldx-contact__channel-label { color: var(--ldx-color-accent); } .ldx-contact__channel-title { margin: 0; font-family: var(--ldx-font-serif); font-size: clamp(1.125rem, 1.7vw, 1.25rem); font-weight: 700; color: var(--ldx-color-primary-dark); line-height: 1.5; } .ldx-contact__channel--primary .ldx-contact__channel-title { color: #FFFFFF; } .ldx-contact__channel-desc { margin: 0; font-size: 0.9375rem; line-height: 1.85; color: var(--ldx-color-text); flex: 1; } .ldx-contact__channel--primary .ldx-contact__channel-desc { color: rgba(255, 255, 255, 0.88); } .ldx-contact__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: var(--ldx-radius-md); font-size: 1rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; transition: transform var(--ldx-transition), box-shadow var(--ldx-transition), background var(--ldx-transition), color var(--ldx-transition), border-color var(--ldx-transition); white-space: nowrap; } .ldx-contact__btn--primary { background: linear-gradient(135deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); color: var(--ldx-color-primary-dark); box-shadow: 0 10px 22px rgba(201, 169, 97, 0.32); } .ldx-contact__btn--primary:hover, .ldx-contact__btn--primary:focus-visible { background: linear-gradient(135deg, var(--ldx-color-accent-dark) 0%, var(--ldx-color-accent) 100%); color: var(--ldx-color-primary-dark); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(201, 169, 97, 0.42); } .ldx-contact__btn--secondary { background: #FFFFFF; color: var(--ldx-color-primary); border: 2px solid var(--ldx-color-primary); } .ldx-contact__btn--secondary:hover, .ldx-contact__btn--secondary:focus-visible { background: var(--ldx-color-primary); color: #FFFFFF; transform: translateY(-2px); } .ldx-contact__btn:focus-visible { outline: 3px solid var(--ldx-color-accent); outline-offset: 3px; } .ldx-contact__btn-arrow { font-size: 1.125rem; transition: transform var(--ldx-transition); } .ldx-contact__btn:hover .ldx-contact__btn-arrow { transform: translateX(4px); } .ldx-contact__channel-note { margin: 0; font-size: 0.8125rem; color: var(--ldx-color-muted); letter-spacing: 0.04em; } .ldx-contact__channel--primary .ldx-contact__channel-note { color: rgba(255, 255, 255, 0.75); } .ldx-contact__phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ldx-font-serif); font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; color: var(--ldx-color-primary); letter-spacing: 0.04em; } .ldx-contact__phone-icon { font-size: 1.5rem; color: var(--ldx-color-accent-dark); } /* 安心バッジ */ .ldx-contact__trust { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin: 0; padding: 12px 20px; background: rgba(30, 58, 138, 0.04); border: 1px solid rgba(30, 58, 138, 0.10); border-radius: 999px; font-size: 0.8125rem; color: var(--ldx-color-primary-dark); letter-spacing: 0.04em; } .ldx-contact__trust-item { display: inline-flex; align-items: center; gap: 6px; } .ldx-contact__trust-item::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--ldx-color-accent) 0%, var(--ldx-color-accent-dark) 100%); } /* ========================================================================= Section 6: Footer（.ldx-footer） ========================================================================= */ .ldx-footer { padding: clamp(56px, 8vw, 88px) 0 0; background: #0F1F4A; color: rgba(255, 255, 255, 0.88); } .ldx-footer a { color: rgba(255, 255, 255, 0.88); text-decoration: none; transition: color var(--ldx-transition); } .ldx-footer a:hover, .ldx-footer a:focus-visible { color: var(--ldx-color-accent); } .ldx-footer a:focus-visible { outline: 2px solid var(--ldx-color-accent); outline-offset: 3px; border-radius: 2px; } .ldx-footer__container { width: min(1200px, 92%); margin: 0 auto; } .ldx-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 48px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } @media (min-width: 640px) { .ldx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ldx-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(32px, 4vw, 56px); } } .ldx-footer__brand { margin: 0 0 16px; font-family: var(--ldx-font-serif); font-size: 1.125rem; font-weight: 700; color: #FFFFFF; letter-spacing: 0.04em; } .ldx-footer__brand-tag { display: block; margin-top: 4px; font-family: var(--ldx-font-sans); font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.12em; } .ldx-footer__address { font-style: normal; font-size: 0.875rem; line-height: 1.95; color: rgba(255, 255, 255, 0.78); } .ldx-footer__address dt { display: inline-block; min-width: 4.5em; color: rgba(255, 255, 255, 0.55); font-weight: 500; letter-spacing: 0.04em; } .ldx-footer__address dd { display: inline; margin: 0 0 0 4px; } .ldx-footer__address dd + dt { margin-top: 2px; } .ldx-footer__address-row { display: flex; gap: 6px; flex-wrap: wrap; } /* Why: SWELL 親テーマの `.post_content h2 { margin-top: 4em }` が