/* ========================================================================== Unitee 静的サイト共用スタイル v3（エディトリアル・リデザイン）参照: isshiki-law（構造・タイポ階層・写真の使い方・余白リズムのみ借用／色は一切借りない）カラーは Unitee ブランド: - #147E8C プライマリ（ブランド全般） - #B94824 CTA アクセント（無料相談ボタンのみ） - #0e3a42 系 ink / #eef5f6 系 tint / #fafcfc paper デザイン方針: - 見出しは Zen Kaku Gothic New weight 500（細字）＋字間広め＝静謐感 - 各 h2 の上に eyebrow 英語ラベル（Outfit uppercase letter-spacing 0.28em）3層階層 - 写真は「セクション末尾のフルブリード帯」→ カードに閉じ込めない - 影・角丸は控えめ。radial-gradient 装飾は撤去 - body line-height 1.9 / letter-spacing 0.04em / ジェネラス余白 - モーション: transform/opacity のみ・prefers-reduced-motion で全停止 ========================================================================== */ :root { --brand: #147e8c; --brand-deep: #0d5560; --brand-ink: #0e3a42; --tint: #eef5f6; --tint-strong: #e0edef; --paper: #fafcfc; --ink: #22383e; --ink-soft: #56727a; --ink-mute: #7a929a; --line: #d5e0e2; --line-soft: #e6edee; --dark-bg: #0e343b; --dark-bg-2: #0a272d; --accent: #b94824; --accent-dark: #9c3a1b; --white: #ffffff; --ease: cubic-bezier(0.16, 1, 0.3, 1); --radius-panel: 8px; --radius-small: 6px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; font-weight: 400; color: var(--ink); background: var(--white); line-height: 1.9; letter-spacing: 0.04em; line-break: strict; text-wrap: pretty; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand); text-decoration: none; } ::selection { background: rgba(20, 126, 140, 0.16); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; } /* --- 見出し共通（Bold＋字間広め＝メリハリと静謐の両立） --- */ h1, h2, h3, .site-logo { font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-feature-settings: "palt"; letter-spacing: 0.06em; } /* --- 見出しの改行バランス（ぶら下がり抑制・日本語意味区切り優先） --- text-wrap: balance = 2〜3行見出しの各行幅を揃え最終行の単語孤立を防ぐ word-break: auto-phrase = Chrome 119+ の日本語文節単位改行（非対応ブラウザは無視されるだけ・progressive enhancement） line-break: strict は body 側で既に指定済み（禁則処理・句読点/助詞から行を始めない）*/ h1, h2, h3, .section-title, .hero h1, .service-hero h3, .story h2, .cta-panel h2, .lead-block h3, .hero__lead { text-wrap: balance; word-break: auto-phrase; } /* リード文・お悩みリストは pretty（末尾1行のみバランス調整・見出しほど強く効かない）*/ .lead-block p, .worry-list li, .story p, .service-hero p { word-break: auto-phrase; } /* 本文中の意味的キーワード強調（A/B案切替）デフォルト = A案（無彩色 Bold）。でB案（プライマリカラー）薬機法辞書照合済み（効能効果表現ゼロ）*/ strong.em { font-weight: 700; color: inherit; font-style: normal; } body[data-typo="b"] strong.em { color: var(--brand); } /* ダーク背景（hero/service-hero/story/cta）内でのB案色はコントラスト確保のためライトブルーへ差し替え */ body[data-typo="b"] .hero strong.em, body[data-typo="b"] .service-hero strong.em, body[data-typo="b"] .story strong.em, body[data-typo="b"] .cta-banner strong.em { color: #a4dee5; } /* --- eyebrow（英語ラベル・3層階層の一番上・左に3本線マークで軽やかな視覚リズム） --- */ .eyebrow { font-family: "Outfit", "Cormorant Garamond", serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brand); margin-bottom: 22px; display: inline-flex; align-items: center; gap: 12px; } /* eyebrow 左添えの3本線マーク（jmc の label__flag を借用・色は Unitee ブランドに置換） */ .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 14px; background: linear-gradient(var(--brand) 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(var(--brand) 0 0) 0 6px / 70% 2px no-repeat, linear-gradient(var(--ink-mute) 0 0) 0 11px / 45% 2px no-repeat; flex-shrink: 0; } .eyebrow--light { color: rgba(255, 255, 255, 0.78); } .eyebrow--light::before { background: linear-gradient(rgba(255, 255, 255, 0.9) 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(rgba(255, 255, 255, 0.7) 0 0) 0 6px / 70% 2px no-repeat, linear-gradient(rgba(255, 255, 255, 0.45) 0 0) 0 11px / 45% 2px no-repeat; } /* --- レイアウト共通 --- */ .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; } .section { padding: 128px 0; } .section--tint { background: var(--tint); } .section-title { /* min 1.85rem = 本文の1.85倍 / max 2.5rem = 2.5倍：明確なメリハリ */ font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 700; line-height: 1.5; color: var(--brand-ink); margin-bottom: 44px; letter-spacing: 0.08em; text-wrap: balance; } /* span を inline に落として、コンテナ幅で自然改行を許可（desktop 広画面での強制2行を回避） */ .section-title span { display: inline; } .lead-block { max-width: 680px; } .lead-block p { margin-bottom: 1.5em; } .lead-block h3 { /* 見出しとして機能させるため 1.1rem→1.35rem・weight 500→700 に格上げ */ font-size: 1.35rem; font-weight: 700; color: var(--brand-deep); margin: 2.4em 0 0.9em; letter-spacing: 0.08em; line-height: 1.55; } .emphasis { font-weight: 700; font-size: 1.1rem; color: var(--brand-deep); padding-top: 0.8em; border-top: 1px solid var(--line); margin-top: 0.6em; letter-spacing: 0.06em; line-height: 1.85; } /* --- ボタン（isshiki 型: 角ばった長方形＋長い padding＋広い字間 = 静かで上質） --- */ .btn { display: inline-block; padding: 18px 44px; border-radius: 2px; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.14em; text-decoration: none; text-align: center; transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); } .btn--primary { background: var(--accent); color: var(--white); border: 1px solid var(--accent); } .btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); } .btn--brand { background: var(--brand); color: var(--white); border: 1px solid var(--brand); } .btn--brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); } /* LINE ボタン（公式LINEでの相談導線）*/ .btn--line { background: #06C755; color: var(--white); border: 1px solid #06C755; } .btn--line:hover { background: #05a648; border-color: #05a648; color: var(--white); } /* isshiki 型の outline-btn（1px 線・透明背景・hover でネガ反転） */ .btn--outline { border: 1px solid var(--line); background: transparent; color: var(--brand-ink); } .btn--outline:hover { background: var(--brand-ink); color: var(--white); border-color: var(--brand-ink); } .btn--outline-light { border: 1px solid rgba(255, 255, 255, 0.75); background: transparent; color: var(--white); } .btn--outline-light:hover { background: var(--white); color: var(--brand-ink); } /* ゴースト（互換のため残置） */ .btn--ghost { border: 1px solid var(--brand); color: var(--brand-deep); background: transparent; } .btn--ghost:hover { background: var(--brand); color: var(--white); } .btn-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 44px; } .btn-row--center { justify-content: center; } .text-link { display: inline-block; margin-top: 24px; color: var(--brand); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; letter-spacing: 0.04em; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .text-link:hover { color: var(--brand-deep); } /* --- ヘッダー（isshiki 型: 透明・シンプルな細ライン） --- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line-soft); } .site-header__inner { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; min-height: 84px; } /* ロゴ: 緑主体の画像ロゴ + タグライン small を縦積み */ .site-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; line-height: 1.15; } .site-logo img { display: block; height: 38px; width: auto; /* 白背景ヘッダー上での視認性確保・ロゴの色は加工しない */ transition: opacity 0.3s var(--ease); } .site-logo:hover img { opacity: 0.82; } .site-logo small { display: none; font-family: "Noto Sans JP", sans-serif; font-size: 0.66rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.18em; line-height: 1.4; padding-left: 14px; border-left: 1px solid var(--line); } .global-nav ul { display: flex; align-items: center; gap: 30px; list-style: none; } .global-nav a { color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em; transition: color 0.3s var(--ease); } .global-nav li:not(.nav-cta) a { position: relative; padding-bottom: 3px; } .global-nav li:not(.nav-cta) a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .global-nav li:not(.nav-cta) a:hover { color: var(--brand-deep); } .global-nav li:not(.nav-cta) a:hover::after { transform: scaleX(1); } .global-nav .nav-cta a { background: var(--accent); color: var(--white); padding: 11px 22px; border-radius: 2px; font-weight: 500; letter-spacing: 0.1em; transition: background-color 0.3s var(--ease); } .global-nav .nav-cta a:hover { background: var(--accent-dark); color: var(--white); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 12px; } .nav-toggle span { display: block; width: 24px; height: 1px; background: var(--ink); margin: 6px 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== HERO — フルブリード大画像＋文字レイヤー（isshiki 型）背景層(inset:0) → オーバーレイ層 → 文字層(z-index:2) WCAG 2.2 AA を担保するため左半分に濃い teal オーバーレイを敷く ========================================================================== */ .hero { position: relative; min-height: 720px; min-height: min(92vh, 860px); display: flex; align-items: center; overflow: hidden; color: var(--white); padding: 140px 0 120px; isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } /* ダーク teal オーバーレイ: 左に濃く、右に薄く（左寄せテキストの可読性確保） */ .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 39, 45, 0.82) 0%, rgba(14, 58, 66, 0.72) 30%, rgba(14, 58, 66, 0.42) 65%, rgba(14, 58, 66, 0.25) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, transparent 22%, transparent 72%, rgba(0, 0, 0, 0.35) 100%); } .hero__inner { position: relative; z-index: 2; max-width: 1120px; } .hero .eyebrow { color: rgba(255, 255, 255, 0.92); margin-bottom: 28px; } /* eyebrow の3本線マークを白系に反転（hero では eyebrow--light を併用してもここでも保証） */ .hero .eyebrow::before { background: linear-gradient(rgba(255, 255, 255, 0.95) 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(rgba(255, 255, 255, 0.75) 0 0) 0 6px / 70% 2px no-repeat, linear-gradient(rgba(255, 255, 255, 0.5) 0 0) 0 11px / 45% 2px no-repeat; } .hero h1 { /* min 2.1rem = 本文の2.1倍 / max 3.2rem = 3.2倍：最上位見出しとして強く効かせる */ font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.2rem); font-weight: 700; line-height: 1.5; color: var(--white); margin-bottom: 36px; letter-spacing: 0.08em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28); max-width: 820px; text-wrap: balance; } /* span を inline に落として、コンテナ幅で自然改行を許可 */ .hero h1 span { display: inline; } .hero-em { font-style: normal; color: #a4dee5; font-weight: 700; /* "つながり" とクオート記号を1つの塊として扱い、行末で分断させない */ white-space: nowrap; } .hero__lead { font-size: 1.02rem; color: rgba(255, 255, 255, 0.94); line-height: 2.05; letter-spacing: 0.06em; margin-bottom: 20px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); } .hero__lead span { display: inline-block; } /* ヒーローのボタンはコンパクト padding で横並びを維持 */ .hero .btn { padding: 16px 34px; font-size: 0.94rem; letter-spacing: 0.12em; } .hero .btn-row { margin-top: 40px; } /* isshiki 型: 右下端に小さな英語キャプション（フルブリード表現のアクセント） */ .hero__caption { position: absolute; right: 32px; bottom: 24px; z-index: 2; margin: 0; font-family: "Outfit", serif; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.72); text-transform: none; } /* ========================================================================== Lv2 HERO --compact — about/services 用（画面高 30〜40%）フルブリード画像は残しつつ、本文が上部に立ち上がるリズムを担保 ========================================================================== */ .hero.hero--compact { min-height: 40vh; padding: 96px 0 72px; } .hero.hero--compact h1 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.6rem); margin-bottom: 22px; } .hero.hero--compact .hero__lead { font-size: 0.98rem; line-height: 1.9; margin-bottom: 14px; } .hero.hero--compact .btn-row { margin-top: 26px; } .hero.hero--compact .hero .eyebrow, .hero.hero--compact .eyebrow { margin-bottom: 18px; } .hero.hero--compact .hero__caption { right: 24px; bottom: 16px; font-size: 0.66rem; letter-spacing: 0.20em; } /* ========================================================================== Lv3 PAGE-HEAD — profile/works/company/privacypolicy 用（画像なし・見出し帯のみ）画面高 15〜20%・var(--tint) の薄い帯 + eyebrow + h1 ========================================================================== */ .page-head { position: relative; min-height: 20vh; display: flex; align-items: center; padding: 120px 0 40px; background: var(--tint); border-bottom: 1px solid var(--line-soft); color: var(--ink); isolation: isolate; } .page-head__inner { position: relative; z-index: 1; max-width: 1120px; } .page-head .eyebrow { color: var(--brand-deep); margin-bottom: 18px; } .page-head h1 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-size: clamp(1.7rem, 1.15rem + 1.6vw, 2.2rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; color: var(--brand-ink); margin-bottom: 12px; text-wrap: balance; word-break: auto-phrase; } /* span を inline に落として、コンテナ幅で自然改行を許可 */ .page-head h1 span { display: inline; } .page-head__lead { font-size: 0.96rem; line-height: 1.9; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0; } .page-head__lead span { display: inline-block; } /* ========================================================================== お悩みリスト — isshiki 型: カード風味を弱め、罫線ベースの一覧に ========================================================================== */ .worry-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 880px; margin: 0 0 64px; border-top: 1px solid var(--line); } .worry-list li { position: relative; padding: 22px 20px 22px 44px; border-bottom: 1px solid var(--line); line-height: 1.85; font-size: 0.98rem; color: var(--ink); background: transparent; } .worry-list li:nth-child(odd) { border-right: 1px solid var(--line); } .worry-list li::before { content: ""; position: absolute; left: 18px; top: 30px; transform: translateY(-50%) rotate(45deg); width: 6px; height: 11px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transition: transform 0.4s var(--ease), border-color 0.3s var(--ease); } /* np-kakebarai 風の軽い hover リフト（罫線一覧を保ちつつ機能訴求の "軽さ" を借用） */ .worry-list li { transition: background-color 0.35s var(--ease); } .worry-list li:hover { background: rgba(255, 255, 255, 0.55); } .worry-list li:hover::before { transform: translateY(-50%) rotate(45deg) scale(1.15); border-color: var(--brand-deep); } .worry-note { max-width: 680px; } .worry-note p { margin-bottom: 1.5em; } /* ========================================================================== 3つの支援 — フルブリード大画像＋文字レイヤー（3セクション連続配置）支援 01/03: 左寄せテキスト＋左が濃いオーバーレイ支援 02: 右寄せテキスト＋右が濃いオーバーレイ巨大番号 01/02/03 はエディトリアル要素として絶対配置 ========================================================================== */ .support-intro { padding: 112px 0 96px; } .support-intro .section-title { margin-bottom: 0; } .service-hero { position: relative; min-height: 640px; min-height: min(88vh, 780px); display: flex; align-items: center; overflow: hidden; color: var(--white); padding: 120px 0; isolation: isolate; } .service-hero__bg { position: absolute; inset: 0; z-index: 0; } .service-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; } .service-hero__overlay { position: absolute; inset: 0; z-index: 1; } /* 左寄せテキスト用オーバーレイ（左に濃く・右に薄く） */ .service-hero--left .service-hero__overlay { background: linear-gradient(90deg, rgba(10, 39, 45, 0.88) 0%, rgba(14, 58, 66, 0.78) 32%, rgba(14, 58, 66, 0.42) 68%, rgba(14, 58, 66, 0.22) 100%); } /* 右寄せテキスト用オーバーレイ（右に濃く・左に薄く） */ .service-hero--right .service-hero__overlay { background: linear-gradient(270deg, rgba(10, 39, 45, 0.88) 0%, rgba(14, 58, 66, 0.78) 32%, rgba(14, 58, 66, 0.42) 68%, rgba(14, 58, 66, 0.22) 100%); } /* 巨大番号 01/02/03（エディトリアル要素・写真の上に大きく載る） */ .service-hero__num { position: absolute; z-index: 2; font-family: "Outfit", serif; font-size: clamp(8rem, 6rem + 10vw, 16rem); font-weight: 500; line-height: 0.9; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.14); pointer-events: none; user-select: none; top: 48px; } .service-hero--left .service-hero__num { left: 32px; } .service-hero--right .service-hero__num { right: 32px; } .service-hero__inner { position: relative; z-index: 3; max-width: 1120px; width: 100%; display: flex; } .service-hero--right .service-hero__inner { justify-content: flex-end; } .service-hero__content { max-width: 560px; } .service-hero .eyebrow { color: rgba(255, 255, 255, 0.92); margin-bottom: 22px; } .service-hero .eyebrow::before { background: linear-gradient(rgba(255, 255, 255, 0.95) 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(rgba(255, 255, 255, 0.75) 0 0) 0 6px / 70% 2px no-repeat, linear-gradient(rgba(255, 255, 255, 0.5) 0 0) 0 11px / 45% 2px no-repeat; } .service-hero h3 { /* min 1.85rem = 本文の1.85倍 / max 2.35rem = 2.35倍 */ font-size: clamp(1.85rem, 1.3rem + 1.5vw, 2.35rem); font-weight: 700; line-height: 1.45; color: var(--white); margin-bottom: 22px; letter-spacing: 0.08em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.32); } .service-hero p { color: rgba(255, 255, 255, 0.94); font-size: 1rem; line-height: 2.05; letter-spacing: 0.05em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); } /* ========================================================================== STORY — 夕暮れの集落写真をフルブリード背景に、文字を前面レイヤーに単色ダーク背景を廃止し、実写夜景に置換 ========================================================================== */ .story { position: relative; overflow: hidden; color: #e8f2f4; padding: 140px 0 132px; isolation: isolate; } .story__bg { position: absolute; inset: 0; z-index: 0; } .story__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; } /* オーバーレイ: 上から下にかけて濃くなるティール系 + 中央部の可読性強化 */ .story__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 39, 45, 0.55) 0%, rgba(14, 58, 66, 0.72) 40%, rgba(10, 39, 45, 0.85) 100%), radial-gradient(ellipse 70% 60% at 30% 50%, rgba(0, 0, 0, 0.35) 0%, transparent 65%); } .story .container { position: relative; max-width: 780px; z-index: 2; } .story__label { font-family: "Outfit", serif; letter-spacing: 0.32em; font-size: 0.78rem; font-weight: 500; color: #a4dee5; text-transform: uppercase; margin-bottom: 26px; display: block; } .story h2 { /* min 1.75rem = 本文の1.75倍 / max 2.3rem = 2.3倍 */ font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700; line-height: 1.55; color: var(--white); margin-bottom: 40px; letter-spacing: 0.08em; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.4); } .story p { margin-bottom: 1.55em; line-height: 2.1; color: #e8f2f4; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); } .story__quote { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-feature-settings: "palt"; font-weight: 500; font-size: 1.15rem; line-height: 1.9; color: var(--white); border-left: 2px solid rgba(164, 222, 229, 0.8); padding: 8px 0 8px 26px; margin: 2em 0; letter-spacing: 0.04em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4); } /* STORY 末尾のサービスへのブリッジ段落 */ .story__bridge { margin-top: 2em; color: rgba(255, 255, 255, 0.94); } .story__link { display: inline-block; margin-left: 0.4em; color: #a4dee5; border-bottom: 1px solid rgba(164, 222, 229, 0.6); padding-bottom: 2px; font-weight: 500; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .story__link:hover { color: var(--white); border-color: var(--white); } /* ========================================================================== CTA — hero-connect 写真をフルブリード背景として再利用（画像は流用維持）全8ページ共通の帯として使うため、①padding 圧縮 ②オーバーレイ濃度アップ ③背景を軽く blur で被写体感を下げる、の3点で「毎ページ大きく主張しない帯」化。 ========================================================================== */ .cta-banner { position: relative; overflow: hidden; /* 132px → 60px（総高約264px→約120px 削減 / 帯として控えめに） */ padding: 60px 0; color: var(--white); isolation: isolate; background: #0e3a42; /* blur時に画像外周が透けても違和感なくフォールバック */ } /* 背景画像レイヤーを疑似要素に分離して blur を適用（本文にはブラーがかからない） */ .cta-banner::before { content: ""; position: absolute; /* blur による外周のにじみを隠すため少し外側まで拡張 */ inset: -8px; z-index: 0; background: url("../img/hero-connect.png") center 40% / cover no-repeat; filter: blur(2px); } .cta-banner__overlay { position: absolute; inset: 0; z-index: 1; /* 濃度: 0.88/0.88/0.82 → 0.94/0.94/0.90 に強化して被写体感を下げる */ background: linear-gradient(135deg, rgba(14, 58, 66, 0.94) 0%, rgba(10, 39, 45, 0.94) 55%, rgba(14, 58, 66, 0.90) 100%), radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, 0.22) 0%, transparent 70%); } .cta-banner .container { position: relative; z-index: 2; } .cta-panel { position: relative; /* 32px 20px → 16px 16px（総高さらに約32px 削減） */ padding: 16px 16px; text-align: center; color: var(--white); background: transparent; } .cta-panel .eyebrow { color: rgba(255, 255, 255, 0.78); /* eyebrow の下余白も圧縮（22px → 14px） */ margin-bottom: 14px; } .cta-panel h2 { position: relative; /* 1.8-2.3rem → 1.4-1.9rem に圧縮（帯としての控えめさ優先） */ font-size: clamp(1.4rem, 1.0rem + 1.3vw, 1.9rem); font-weight: 700; line-height: 1.5; /* 20px → 12px */ margin-bottom: 12px; color: var(--white); letter-spacing: 0.06em; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.36); } .cta-panel h2 span { display: inline-block; } .cta-panel p { position: relative; margin-bottom: 4px; color: rgba(255, 255, 255, 0.94); letter-spacing: 0.06em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); } .cta-panel .btn-row { position: relative; /* 見出し・本文と btn の間を詰めて総高圧縮 */ margin-top: 14px; } /* ========================================================================== フッター — isshiki 型: ライトな帯 + 中央ブランド + 罫線 + 住所風テキスト ========================================================================== */ .site-footer { background: var(--tint); color: var(--ink-soft); padding: 88px 0 36px; font-size: 0.9rem; border-top: 1px solid var(--line-soft); } .site-footer .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "brand nav" "desc nav" "copy copy"; gap: 8px 48px; } .site-footer__brand { grid-area: brand; font-family: "Outfit", sans-serif; color: var(--brand-ink); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.06em; } .site-footer__desc { grid-area: desc; margin-bottom: 32px; line-height: 1.95; color: var(--ink-soft); letter-spacing: 0.04em; } .footer-nav { grid-area: nav; } .footer-nav ul { list-style: none; columns: 2; column-gap: 40px; } .footer-nav li { margin-bottom: 12px; break-inside: avoid; } .footer-nav a { color: var(--ink-soft); text-decoration: none; letter-spacing: 0.04em; transition: color 0.3s var(--ease); } .footer-nav a:hover { color: var(--brand); } .copyright { grid-area: copy; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 24px; font-family: "Outfit", sans-serif; font-size: 0.78rem; letter-spacing: 0.16em; color: var(--ink-mute); } /* ========================================================================== スクロール・リビール（JS 有効時のみ・reduced-motion で無効） ========================================================================== */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal[data-delay="1"] { transition-delay: 0.12s; } .js .reveal[data-delay="2"] { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .btn, .global-nav a, .nav-toggle span { transition: none; } } /* ========================================================================== レスポンシブ ========================================================================== */ @media (max-width: 960px) { .hero { padding: 120px 0 96px; min-height: 640px; } .hero h1 { max-width: 100%; } /* Lv2 (960px以下): --compact は帯を維持 */ .hero.hero--compact { min-height: 42vh; padding: 88px 0 64px; } /* Lv3 (960px以下): 見出し帯 */ .page-head { min-height: 18vh; padding: 100px 0 36px; } .service-hero { min-height: 560px; padding: 96px 0; } .service-hero__num { font-size: clamp(6rem, 4rem + 12vw, 12rem); top: 32px; } .service-hero--left .service-hero__num { left: 20px; } .service-hero--right .service-hero__num { right: 20px; } .site-footer .container { grid-template-columns: 1fr; grid-template-areas: "brand" "desc" "nav" "copy"; } } @media (max-width: 768px) { .container { padding: 0 24px; } .section { padding: 88px 0; } .hero { padding: 96px 0 72px; min-height: 560px; } /* Lv2 モバイル: --compact は 30vh 帯 */ .hero.hero--compact { padding: 76px 0 52px; min-height: 30vh; } .hero.hero--compact h1 { font-size: 1.55rem; line-height: 1.5; margin-bottom: 16px; } .hero.hero--compact .hero__lead { font-size: 0.9rem; line-height: 1.85; margin-bottom: 10px; } .hero.hero--compact .btn-row { margin-top: 18px; } /* Lv3 モバイル: 見出し帯 15vh */ .page-head { min-height: 15vh; padding: 88px 0 28px; } .page-head h1 { font-size: 1.45rem; line-height: 1.5; margin-bottom: 10px; } .page-head__lead { font-size: 0.88rem; line-height: 1.85; } .page-head h1 span, .page-head__lead span { display: inline; } .hero h1 { /* モバイルでも本文比 1.75× 以上を維持 */ font-size: 1.75rem; font-weight: 700; line-height: 1.55; letter-spacing: 0.05em; /* 日本語見出しでは overflow-wrap: anywhere は過剰（"Unitee" 等の英単語や "つながり" のクオート記号を無用に分断する）。break-word に緩和し、 word-break は上位の auto-phrase（文節単位改行）を継承。 line-break: strict（body 継承）＋ text-wrap: balance で禁則と行バランスを担保 */ overflow-wrap: break-word; margin-bottom: 24px; } /* モバイルではスパン間で改行を許可（inline-block を解除） */ .hero h1 span, .section-title span, .cta-panel h2 span { display: inline; } .hero__lead { font-size: 0.94rem; } .hero__caption { right: 20px; bottom: 14px; font-size: 0.62rem; letter-spacing: 0.18em; } .section-title { /* モバイル本文 16px の 1.7× */ font-size: 1.7rem; line-height: 1.5; margin-bottom: 32px; } .lead-block h3 { font-size: 1.2rem; } .worry-list { grid-template-columns: 1fr; } .worry-list li:nth-child(odd) { border-right: 0; } /* 3つの支援モバイル: 常に左寄せ・番号は小さく上部に */ .service-hero { min-height: 480px; padding: 80px 0; } .service-hero__inner { justify-content: flex-start; } .service-hero--right .service-hero__inner { justify-content: flex-start; } /* モバイルでは常に左が濃いオーバーレイに（可読性優先） */ .service-hero__overlay, .service-hero--right .service-hero__overlay { background: linear-gradient(180deg, rgba(10, 39, 45, 0.86) 0%, rgba(14, 58, 66, 0.78) 60%, rgba(14, 58, 66, 0.72) 100%); } .service-hero__num { font-size: 5rem; top: 20px; } .service-hero--left .service-hero__num, .service-hero--right .service-hero__num { left: 20px; right: auto; } .service-hero h3 { /* モバイル本文比 1.65× を維持（元 1.45rem からメリハリ強化） */ font-size: 1.65rem; line-height: 1.5; } .support-intro { padding: 72px 0 56px; } .story { padding: 96px 0 88px; } /* モバイル: 96px → 44px（総高約192px→約88px 削減） */ .cta-banner { padding: 44px 0; } /* モバイル: 24px 16px → 12px 12px */ .cta-panel { padding: 12px 12px; } /* モバイルは blur を弱めに（低解像度でにじみが目立つのを抑える） */ .cta-banner::before { filter: blur(1.5px); inset: -6px; } .site-header__inner { padding: 0 24px; min-height: 68px; } .site-logo img { height: 36px; } .site-logo small { display: none; /* モバイルはロゴ画像のみに絞る（幅節約・可読性優先） */ } /* モバイルナビ */ .nav-toggle { display: block; } .global-nav { position: absolute; top: 68px; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: none; } .global-nav.is-open { display: block; animation: navIn 0.4s var(--ease); } @keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .global-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; } .global-nav li { border-bottom: 1px solid var(--line-soft); } .global-nav li:last-child { border-bottom: 0; } .global-nav a { display: block; padding: 16px 24px; } .global-nav li:not(.nav-cta) a::after { display: none; } .global-nav .nav-cta a { margin: 12px 24px; text-align: center; } .btn-row .btn { width: 100%; max-width: 380px; } }