/* ============================================================ Layout width overrides (LINK FINANCE) 元: --max-width: max(1440 * var(--px), 90 * var(--rem)); --offset: clamp(20*--px, ..., 60*--px) ------------------------------------------------------------ 問題: 1440px基準で左右にも大きな offset (最大80px) が入り、 画面が広くてもコンテンツの見える幅が広がらない。 修正: - max-width を viewport に追従（最大 2400px まで） - 左右の余白を控えめに（最大40px） - content area を一律 ~80〜130px ずつ拡張 ============================================================ */ /* ============================================================ プリローダー中は FV / bodyCopy を完全に隠して、トランジションを無効化。 プリローダー終了後に JS が -shown を付け直してイントロを再生する。 ============================================================ */ html.lf-preloading .fv, html.lf-preloading .bodyCopy, html.lf-preloading .fv *, html.lf-preloading .bodyCopy * { transition: none !important; animation: none !important; } html.lf-preloading .fv, html.lf-preloading .bodyCopy { opacity: 0 !important; pointer-events: none !important; } /* ============================================================ プリローダー（Outline Fill アニメ） ページ表示時に「LINK FINANCE」が線画 → 塗りつぶしの順で現れ、 その後フェードアウトしてページが見える - 0.2s: 線画状態で表示開始 - 0.2〜1.0s: 文字がじわっと塗りつぶされる - 1.0〜1.3s: 塗り完了で一瞬とどまる - 1.3〜1.8s: 全体フェードアウト ============================================================ */ #link-finance-preloader { position: fixed; inset: 0; z-index: 99999; background: var(--color-background, #eff0ee); display: flex; align-items: center; justify-content: center; animation: preloader-out 0.5s ease 1.3s forwards; } @keyframes preloader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } } #link-finance-preloader .text { font-family: var(--ff-en, "Noto Sans JP", "Hiragino Sans", sans-serif); font-size: clamp(2.5rem, 8vw, 7rem); font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--color-black, #222); letter-spacing: 0.06em; line-height: 1; margin: 0; animation: preloader-text-fill 0.8s ease 0.2s forwards; } @keyframes preloader-text-fill { to { color: var(--color-black, #222); } } @media (prefers-reduced-motion: reduce) { #link-finance-preloader { animation: preloader-out 0.2s linear 0.4s forwards; } #link-finance-preloader .text { color: var(--color-black, #222); animation: none; } } :root { /* セクションは viewport 幅まで広げる（超ワイドだけ 2400px で頭打ち） */ --max-width: min(100vw, 2400px); /* 左右の余白を抑えてコンテンツエリアを広げる 1280px: 20px / 1440px: 24px / 1920px: 36px / 2560px: 40px */ --offset: clamp(16px, calc((100vw - 1280px) * 0.025 + 20px), 40px); /* ====== アクセントカラーを #c4d8a8 系（セージグリーン）に変更 ====== */ --color-lightgreen: #c4d8a8; /* メインアクセント */ --color-darkgreen: #9aaa84; /* フォーカス・濃い補助 */ --color-green: #a8bb88; /* 中間 */ --color-sub-green: #b5c898; /* sub */ --color-sub-lightgreen: #cce0b4; /* sub light */ } /* ============================================================ 横スクロール防止 元サイトは FV ヒーロー英字が意図的に viewport 幅を超え、 横スクロールバーが出る状態だった。 - body / html / main / FV section に overflow-x: clip を付け、 画面幅 = viewport 幅にぴったり合わせる - clip は scrollbar を出さず・スクロール禁止 ============================================================ */ html, body { overflow-x: clip; max-width: 100vw; } main { overflow-x: clip; } .fv, [data-astro-cid-mnynwuyc].fv { overflow-x: clip; } /* ============================================================ FV ヒーローテキストの調整 元: 巨大フォント (max 7.375rem * scale ≈ 157px @1920) + line-height:1ch + gap:1.875rem で行が詰めすぎ、 "BUSINESS" が viewport 右端で見切れていた 修正: - フォントサイズの上限を抑えて画面内に収める - flex column の gap を増やして行間を確保 - line-height:1ch を少し緩める ============================================================ */ .fv_textEnText[data-astro-cid-mnynwuyc] { /* 上下の余白（flex column gap） */ gap: clamp(1.5rem, calc(2vw + 0.75rem), 4.5rem); /* 「Empowering BUSINESS」(19 chars) が viewport - 余白に収まるサイズで計算 (100vw - 120px) / 13.5 ≒ 19文字分の幅 ÷ 文字ピッチ比率 これで全 viewport で見切れない */ font-size: clamp(2.25rem, calc((100vw - 120px) / 13.5), 7.5rem); line-height: 1.15; /* 念のため最大幅も viewport に追随させる */ max-width: calc(100vw - 80px); /* 単語が長すぎる場合の折り返し（保険） */ overflow-wrap: break-word; } .fv_textJaText[data-astro-cid-mnynwuyc] { /* 日本語キャッチを少し大きく + 余白も */ margin-top: clamp(1.25rem, 2vw, 2.5rem); font-size: clamp(1.25rem, 1.6vw, 2rem); } /* ============================================================ 非FV セクションの中央寄せ 元: section.container が 6 列フルワイド grid で image を左端・ text/heading/button を右端に張り付け → 端寄りで間延び 修正: section.container を最大 1400px に絞って margin-inline:auto で 画面中央に配置。内側の grid 構造はそのまま、見え方だけ中央寄せ 対象: data-astro-cid-m54o4cta（about/work/people等プレビュー） 他の同種 layout cid も含めて network 内全部 ============================================================ */ section.container[data-astro-cid-m54o4cta], section.container[data-astro-cid-4xhrpwox], [data-components-modules-sectionbase]:not(.fv) { max-width: min(calc(100vw - 60px), 1400px); margin-inline: auto; } /* bodyCopy セクション（リード文セクション）も同じく中央寄せに */ section.bodyCopy { max-width: min(calc(100vw - 60px), 1400px); margin-inline: auto; } /* TOPページのお問い合わせ・会社案内セクション中央寄せは撤回（元のレイアウトに戻す） */ /* ============================================================ ② ナビバー・フッター・モバイルメニューのロゴを「LINK FINANCE」テキストに差し替え 元の SVG ロゴは「CrowdLoan」のパスデータなので非表示にして、 同じ位置に LINK FINANCE のテキスト型ロゴを表示 ============================================================ */ .siteName_link[data-astro-cid-xbstl6g3] svg[data-icon="logo"], .siteName[data-astro-cid-mtxgg6pp] svg[data-icon="logo-white"], .header_siteName[data-astro-cid-52d4wjy7] svg[data-icon="logo-white"] { display: none !important; } .siteName_link[data-astro-cid-xbstl6g3]::before { content: "LINK FINANCE"; font-family: var(--ff-en, "Noto Sans JP", sans-serif); font-weight: 700; font-size: clamp(1.05rem, 1.1vw + 0.6rem, 1.6rem); letter-spacing: 0.08em; color: var(--color-black); line-height: 1; display: inline-block; white-space: nowrap; } .siteName[data-astro-cid-mtxgg6pp]::before { content: "LINK FINANCE"; font-family: var(--ff-en, "Noto Sans JP", sans-serif); font-weight: 700; font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem); letter-spacing: 0.08em; color: var(--color-white); line-height: 1; display: inline-block; white-space: nowrap; } .header_siteName[data-astro-cid-52d4wjy7]::before { content: "LINK FINANCE"; font-family: var(--ff-en, "Noto Sans JP", sans-serif); font-weight: 700; font-size: clamp(1.05rem, 1.1vw + 0.6rem, 1.6rem); letter-spacing: 0.08em; color: var(--color-white); line-height: 1; display: inline-block; white-space: nowrap; } /* サブページのヒーローを背景画像化する override は撤回（元のレイアウトに戻す） */ /* TOP「お問い合わせ」「会社案内」: 画像とテキストの間の空列(-)を削除して隣接させる */ section[data-astro-cid-7mrmaqjl] .inner { grid-template-areas: "heading heading heading image image image" "text text text image image image" "button button button image image image" !important; } section[data-astro-cid-4xhrpwox] { grid-template-areas: "heading heading heading heading heading heading" "image image image text text text" "image image image button button button" !important; } /* ============================================================ ① コンタクトページ「お問い合わせの流れについて」section 元: 2列grid(heading 左 / 内容 右に縦並び) 新: 単一列スタック。見出しを上に、各ステップを下に縦並びで h3 と そのすぐ下の説明文/リスト が必ずペアで表示される 注意: 4列grid化すると h3 と内容が別カラムに分散して壊れる ============================================================ */ section[data-astro-cid-rnqwip2c] { --_content-column: 1 / -1 !important; grid-template-columns: minmax(0, 1fr) !important; } /* ステップ群を内包する div は元の vertical stack のまま（block レイアウト） */ section[data-astro-cid-rnqwip2c] > div:not(:is(intersector-component, [class*="heading"])) { display: block; margin-top: clamp(1.5rem, 3vw, 3rem); } /* h3 見出しは元のスタイル（横線セパレータ + 余白）のまま使う */ /* ============================================================ ② コンタクトページ お問い合わせフォーム「送信する」テキストを ボタン内の右側に寄せる ============================================================ */ [data-astro-cid-fngpnsyf] a[href*="application"] .text, .button[data-astro-cid-fngpnsyf] a .text { text-align: right; justify-self: end; } /* ============================================================ ③ トップページ以外のフッターの aside CTA Careers / Contact の矢印アイコン「中の色（背景塗りつぶし）」を 互いに逆色にして、hover で入れ替わるように - 通常時: Careers=黄緑塗り, Contact=ダークグレー塗り - hover時: 互いに反転 (Careers→ダークグレー, Contact→黄緑) ============================================================ */ /* インライン