/* ════════════════════════════════════════════════════════════ RESET ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { width: 100%; overflow-x: hidden; font-size: 62.5%; line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* ページ内アンカーをスムーズスクロール */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* 動きを抑えたいユーザーには即時ジャンプ */ } /* ページ内アンカーの着地位置を固定ヘッダー分だけ下げる (#service / #results / #about / #team / #supervision / #b2b 等) */ section[id] { scroll-margin-top: calc(var(--hdr-fixed-h) + var(--hdr-fixed-pc-inset) + 12px); } body { font-family: 'Noto Sans JP', '游ゴシック体', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2D2820; background: #FFFFFF; width: 100%; overflow-x: hidden; } img { display: block; width: 100%; height: auto; object-fit: cover; } a { text-decoration: none; color: inherit; cursor: pointer; } ul { list-style: none; } button { appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; padding: 0; color: inherit; font: inherit; } body.is-nav-open { overflow: hidden; } /* ════════════════════════════════════════════════════════════ DESIGN TOKENS ════════════════════════════════════════════════════════════ */ :root { /* ── Colour ── */ --amber: #D4914A; --amber-deep: #B47030; --amber-bright: #E8A050; --dark: #2D2820; --mid: #6A6057; --bg: #FFFFFF; --bg-warm: #FAF6EE; --line-green: #06C755; /* ── Breakpoints (used only via @media — kept here for reference) ── --bp-md: 768px (drawer ↔ desktop nav switchover) --bp-lg: 1100px (compact nav ↔ full inline nav) */ /* ── Layout: padding / gap (responsive via clamp) ── */ --pad-x-page: clamp(20px, 4vw, 60px); --pad-y-hdr: clamp(10px, 1.2vw, 18px); /* tighter header padding */ --gap-hdr: clamp(16px, 2.2vw, 36px); --gap-nav: clamp(14px, 1.6vw, 26px); /* ── Layout: heights ── The values below are minimum heights; the header sizes to its content + padding, so changing logo/font/padding here reflows downstream. The firstview derives its top padding from --hdr-origin-h, so resizing the header reflows the FV content without breaking the layout. */ /* 実コンテンツ高 = ロゴ clamp(52px,5.5vw,72px) + 上下pad 2×clamp(10px,1.2vw,18px) ≒ 7.9vw（上限 108px）。FVのpadding-topがこれを下回るとロゴがヘッダーに 潜り込むため、トークンは実高以上になるよう合わせている */ --hdr-origin-h: clamp(64px, 7.9vw, 108px); --hdr-fixed-h: clamp(56px, 5vw, 70px); --hdr-fixed-pc-inset: clamp(20px, 2.4vw, 36px); /* gap from viewport edges */ } /* ════════════════════════════════════════════════════════════ PC / SP utilities ════════════════════════════════════════════════════════════ */ .pc { display: none !important; } @media (min-width: 768px) { .pc { display: block !important; } .sp { display: none !important; } .pc.flex { display: flex !important; } } /* ════════════════════════════════════════════════════════════ DRAWER (mobile) ════════════════════════════════════════════════════════════ */ .drawer-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(45,40,32,0.55); opacity: 0; pointer-events: none; transition: opacity 0.35s; } .drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; z-index: 90; width: min(310px, 82vw); height: 100dvh; background: #FFFFFF; padding: 88px 28px 32px; overflow-y: auto; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 0.4s cubic-bezier(.4,0,.2,1); } .drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; } .drawer__brand { margin-bottom: 24px; } .drawer__brand img { height: 52px; width: auto; display: block; } .drawer__list li a { display: block; padding: 14px 0; font-size: 14px; font-weight: 700; color: var(--dark); border-bottom: 1px solid rgba(0,0,0,0.07); transition: color 0.2s, padding-left 0.2s; } .drawer__list li a:hover { color: var(--amber); padding-left: 6px; } .drawer__list li a .t-en { display: block; font-family: 'Ubuntu', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; color: var(--amber); margin-top: 4px; } .drawer__legal { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 8px; } .drawer__legal a { font-size: 11px; letter-spacing: 0.05em; color: var(--mid); padding: 6px 0; transition: color 0.2s; } .drawer__legal a:hover { color: var(--amber); } .drawer__btns { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .drawer__btns a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 100px; font-size: 13px; font-weight: 700; color: #fff; } .drawer__btn-line { background: var(--line-green); } .drawer__btn-tel { background: var(--amber); } /* ════════════════════════════════════════════════════════════ WRAPPER (relative — anchor for absolute children) ════════════════════════════════════════════════════════════ */ .wrapper { position: relative; width: 100%; overflow: hidden; } @media (min-width: 1100px) { .wrapper { min-width: 1200px; } } /* ════════════════════════════════════════════════════════════ ORIGIN HEADER — flex-based layout, NO absolute positioning of children. Intrinsic sizing; tokens via --vars. Visibility: • < 768px hidden (drawer is the nav) • 768-1099 logo + burger only (compact) • ≥ 1100px full inline nav + LINE button ════════════════════════════════════════════════════════════ */ .hdr-origin { display: none; } @media (min-width: 768px) { .hdr-origin { display: block; position: absolute; z-index: 50; inset: 0 0 auto 0; /* top:0; right:0; left:0; auto-height */ background: #FFFFFF; } .hdr-origin__inner { display: flex; align-items: center; gap: var(--gap-hdr); padding: var(--pad-y-hdr) var(--pad-x-page); min-height: var(--hdr-origin-h); } /* ── Logo (flex item, never shrinks) ── */ .hdr-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .hdr-logo__icon { flex-shrink: 0; width: clamp(44px, 4.5vw, 60px); height: clamp(44px, 4.5vw, 60px); color: var(--amber); } .hdr-logo__img { flex-shrink: 0; height: clamp(52px, 5.5vw, 72px); width: auto; display: block; } .hdr-logo__text { display: flex; flex-direction: column; line-height: 1.15; } .hdr-logo__text .t-brand { font-family: 'Ubuntu', sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: 0.3em; color: var(--dark); padding-left: 0.3em; white-space: nowrap; } .hdr-logo__text .t-sub { margin-top: 4px; font-size: clamp(9px, 0.8vw, 11px); letter-spacing: 0.25em; color: var(--mid); font-weight: 400; white-space: nowrap; } /* ── Nav list (flex item, takes remaining space, right-aligned) ── */ .hdr-list { display: flex; flex: 1 1 auto; min-width: 0; /* allow shrink without forcing overflow */ justify-content: flex-end; align-items: center; gap: var(--gap-nav); flex-wrap: nowrap; } .hdr-list-item { position: relative; padding: 10px 0; font-size: clamp(12px, 1vw, 14px); font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: var(--dark); white-space: nowrap; text-decoration: underline dotted transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: opacity 0.2s ease, text-decoration-color 0.25s ease; } /* Vertical separator between items (rendered via ::before in the gap) */ .hdr-list-item + .hdr-list-item::before { content: ''; position: absolute; top: 50%; left: calc(var(--gap-nav) / -2); transform: translate(-50%, -50%); width: 1px; height: 11px; background: var(--dark); } .hdr-list-item:hover { opacity: 0.85; text-decoration-color: var(--amber); } /* ── LINE button (flex item, never shrinks) ── */ .hdr-line { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px clamp(18px, 1.8vw, 28px); background: var(--line-green); color: #fff; border-radius: 8px; font-size: clamp(13px, 1vw, 14px); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; transition: opacity 0.2s; } .hdr-line:hover { opacity: 0.85; } /* 768-1099: hide inline nav + LINE. Drawer trigger is in .hdr-fixed. */ .hdr-burger { display: none !important; } .hdr-list { display: none; } .hdr-line { display: none; } } @media (min-width: 1100px) { .hdr-burger { display: none !important; } .hdr-list { display: flex; } .hdr-line { display: inline-flex; } } @media (min-width: 768px) and (max-width: 1099px) { .hdr-origin { display: none; } } /* Hamburger button (flex item, never absolute) — visibility is owned by the @media rules above (only the 768-1099 range shows it). */ .hdr-burger { display: none; /* default off; @media may flip it on */ flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; gap: 5px; padding: 5px; margin-left: auto; /* push to the far right of the flex row */ } .hdr-burger span { display: block; width: 22px; height: 1.5px; background: var(--dark); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .hdr-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hdr-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hdr-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ════════════════════════════════════════════════════════════ FIXED HEADER (slides in on scroll) ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ FIXED HEADER — flex layout, hidden by its own height. Off-screen state uses translateY(-100%) which scales with the element regardless of height. The visible-state offset (PC pill distance from viewport top) is expressed only in the visible state via a token, so the hidden state never depends on it. ════════════════════════════════════════════════════════════ */ .hdr-fixed { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background: #FFFFFF; box-shadow: 0 2px 16px rgba(0,0,0,0.08); transform: translateY(-100%); transition: transform 0.4s ease; } .hdr-fixed.is-visible { transform: translateY(0); } .hdr-fixed__inner { display: flex; align-items: center; gap: var(--gap-hdr); padding: 10px var(--pad-x-page); min-height: var(--hdr-fixed-h); } /* PC: floating pill, side-inset from viewport edges */ @media (min-width: 768px) { .hdr-fixed { left: var(--hdr-fixed-pc-inset); right: var(--hdr-fixed-pc-inset); width: auto; border-radius: 16px; } .hdr-fixed.is-visible { transform: translateY(var(--hdr-fixed-pc-inset)); } .hdr-fixed__inner { padding: 10px clamp(20px, 2vw, 36px); } } @media (max-width: 1099px) { .hdr-fixed { left: 0; right: auto; width: 100%; border-radius: 0; transform: none; } .hdr-fixed.is-visible { transform: none; } .hdr-fixed__inner { min-height: 62px; gap: 12px; padding: 8px 18px; } } /* ── Children of hdr-fixed (all flex items, no absolute positioning) ── */ .fix-logo { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .fix-logo__icon { width: clamp(26px, 2.4vw, 34px); height: clamp(26px, 2.4vw, 34px); color: var(--amber); } .fix-logo__img { flex-shrink: 0; height: clamp(34px, 3.4vw, 46px); width: auto; display: block; } .fix-logo__brand { font-family: 'Ubuntu', sans-serif; font-size: clamp(14px, 1.1vw, 17px); font-weight: 500; letter-spacing: 0.3em; padding-left: 0.3em; white-space: nowrap; } .fix-list { display: none; /* visibility owned by the ≥1100px breakpoint */ flex: 1 1 auto; min-width: 0; justify-content: flex-end; align-items: center; gap: var(--gap-nav); flex-wrap: nowrap; } .fix-list a { font-size: clamp(12px, 0.95vw, 13.5px); font-weight: 700; white-space: nowrap; transition: opacity 0.2s; } .fix-list a:hover { opacity: 0.5; } .fix-line { flex-shrink: 0; margin-left: auto; /* push to the right when fix-list is hidden */ display: inline-flex; align-items: center; gap: 5px; padding: 8px clamp(13px, 1.2vw, 18px); background: var(--line-green); color: #fff; border-radius: 8px; font-size: clamp(11px, 0.9vw, 13px); font-weight: 700; white-space: nowrap; transition: opacity 0.2s; } .fix-line:hover { opacity: 0.85; } @media (max-width: 480px) { .hdr-fixed__inner { gap: 8px; padding: 8px 14px; } .fix-logo__brand { font-size: 14px; letter-spacing: 0.24em; } .fix-line { height: 36px; padding: 0 12px; font-size: 11px; } .fix-line svg { width: 14px; height: 14px; } .fix-burger { width: 34px; height: 34px; } } .fix-burger { flex-shrink: 0; margin-left: auto; /* push to the far right of the flex row */ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; gap: 5px; background: transparent; border-radius: 0; box-shadow: none; } .fix-burger span { display: block; width: 23px; height: 1.8px; background: var(--dark); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .fix-burger.is-open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); } .fix-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .fix-burger.is-open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); } @media (min-width: 1100px) { .fix-burger { display: none; } } /* ≥1100px: enough room to show inline nav */ @media (min-width: 1100px) { .fix-list { display: flex; } .fix-line { margin-left: 0; } /* nav now occupies remaining space */ } /* ════════════════════════════════════════════════════════════ FIRSTVIEW ─ 写真スライドショーは廃止（2026-07 クライアント要望）。 ─ ロゴを最上部・中央に、直下にキャッチコピー、下部中央に スクロールインジケーターを置くシンプル構成（参考: biophilia.co.jp）。 ════════════════════════════════════════════════════════════ */ .firstview { position: relative; width: 100%; height: 100vh; /* svh非対応ブラウザ用フォールバック */ height: 100svh; min-height: 560px; background: #FFFFFF; } /* ロゴ+キャッチ+スクロールインジケーターを1本のflexカラムに積む。 ロゴとインジケーターの margin-top:auto が残余スペースを等分するため ロゴ+キャッチは中央に保たれ、gap が最低間隔を保証する （どんなに低い画面でもキャッチとインジケーターは重ならない） */ .fv__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vh, 48px); gap: clamp(24px, 4svh, 48px); width: 100%; height: 100%; padding: calc(var(--hdr-origin-h) + 16px) var(--pad-x-page) clamp(22px, 4vh, 40px); padding-bottom: clamp(22px, 4svh, 40px); text-align: center; } /* ── Brand logo (最上部・中央) ── */ .fv__brand { margin-top: auto; } .fv__brand-link { display: block; } .fv__brand-img { display: block; /* svh 基準: 背の低い画面ではロゴが縮み、下の要素を圧迫しない */ height: clamp(170px, 26vh, 240px); height: clamp(170px, 26svh, 240px); width: auto; } @media (min-width: 768px) { .fv__brand-img { height: clamp(200px, 34vh, 320px); height: clamp(200px, 34svh, 320px); } } /* ── Catch copy (ロゴ直下) ── */ .fv__catch { margin: 0; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.7; letter-spacing: 0.08em; font-weight: 700; color: var(--amber); } @media (max-width: 374px) { .fv__catch { font-size: 22px; } } /* ── Scroll indicator: paw-trail (下部中央・全デバイス) 4 paws stacked, alternating left/right offset (like real tracks), fading in/out sequentially top → bottom to imply "scroll down" ── */ .fv__scroll { margin-top: auto; /* 残余スペースを吸収して下端に寄る（.fv__brand と対） */ display: flex; flex-direction: column; align-items: center; gap: 12px; } .fv__scroll-text { writing-mode: vertical-rl; font-family: 'Ubuntu', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.25em; line-height: 1; color: var(--dark); } .fv__scroll-paws { position: relative; width: 32px; height: 96px; } .fv__scroll-paw { position: absolute; width: 12px; height: 12px; opacity: 0; animation: kPawTrail 4.8s ease-in-out infinite; } .fv__scroll-paw svg { width: 100%; height: 100%; fill: var(--amber); display: block; } .fv__scroll-paw:nth-child(odd) svg { transform: rotate(-10deg); } .fv__scroll-paw:nth-child(even) svg { transform: rotate(10deg); } /* 4 paws, gentler stagger (0.6s) for a calmer rhythm */ .fv__scroll-paw:nth-child(1) { left: 30%; top: 0%; animation-delay: 0s; } .fv__scroll-paw:nth-child(2) { left: 55%; top: 30%; animation-delay: 0.6s; } .fv__scroll-paw:nth-child(3) { left: 30%; top: 60%; animation-delay: 1.2s; } .fv__scroll-paw:nth-child(4) { left: 55%; top: 90%; animation-delay: 1.8s; } /* Softer envelope: lower peak opacity + longer rest period between cycles */ @keyframes kPawTrail { 0% { opacity: 0; } 18%, 42% { opacity: 0.5; } 60% { opacity: 0; } 100% { opacity: 0; } } /* reduce-motion環境ではループを止め、足あとは静止表示 */ @media (prefers-reduced-motion: reduce) { .fv__scroll-paw { animation: none; opacity: 0.5; } } /* ════════════════════════════════════════════════════════════ LEAD SECTION (FV直下) ─ TAILSのメッセージを伝えるオープニング段落。 ─ スクロール連動で、背景の波線SVGがゆっくり描かれながら、 本文の行ごとが静かにフェードアップする。 ─ 必要なJS: GSAP / ScrollTrigger / SplitText / CustomEase (v3.13+) ─ 原典演出: 犬猫生活トップ「生まれてきてよかったね」セクション ════════════════════════════════════════════════════════════ */ .lead-section { position: relative; padding: clamp(64px, 8vw, 120px) 24px clamp(120px, 14vw, 200px); text-align: center; font-family: 'Noto Serif JP', serif; font-weight: 500; overflow: hidden; line-break: strict; /* 日本語の禁則処理 (「。」「、」が行頭にこない等) */ } @media (min-width: 1100px) { .lead-section { padding-inline: 60px; } } /* 背景の波線SVG ─ pin + scrub で draw → erase */ .lead-section__circle { position: absolute; top: -50%; left: 0; width: 100%; height: 100vh; pointer-events: none; user-select: none; z-index: 0; } .lead-section__circle path { fill: none; stroke-width: 0.5px; stroke-miterlimit: 10; opacity: 0.3; } .lead-section__circle--sp { display: none; } .lead-section__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; } /* 本文 ─ 行ごと×文字ごとフェードアップ */ .lead-section__body { font-size: clamp(14px, 1.2vw, 17px); line-height: 2.8; letter-spacing: 0.05em; color: var(--dark); font-weight: 500; } .lead-section__body + .lead-section__body { margin-top: clamp(16px, 2vw, 28px); } /* リードセクション冒頭の繋ぎデザイン (犬と猫のシルエット) タイトル「犬猫と〜」はFVへ移動したため (2026-07)、全デバイスで表示。 */ .lead-connector { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-bottom: clamp(28px, 6vw, 48px); } .lead-connector__cat { display: block; width: 44px; height: 31px; opacity: 0.7; } .lead-connector__cat--center { width: 64px; height: 32px; opacity: 1; } .lead-connector__cat path { fill: var(--amber); } /* 犬は viewBox を実コンテンツに合わせてクロップ済み (150 190 → 830 795) 立ち姿は猫より縦に長いので少し背高めにして自然なバランス */ .lead-connector__dog { display: block; width: 38px; height: 42px; opacity: 0.85; transform: translateY(8px); } .lead-connector__dog path { fill: var(--amber); } /* 締めの一文 ─ アンバー強調 (タイトルと響き合うクローズ) */ .lead-section__close { margin: clamp(48px, 6vw, 80px) 0 0; font-size: clamp(22px, 3vw, 38px); font-weight: 700; letter-spacing: 0.1em; line-height: 1.85; color: var(--amber); font-family: 'Noto Serif JP', serif; } @media (max-width: 767px) { .lead-section__circle--pc { display: none; } .lead-section__circle--sp { display: block; } .lead-section__circle { top: 60px; height: 280px; } .lead-section__circle path { stroke-width: 1px; } .lead-section__body { font-size: 14px; line-height: 2.15; letter-spacing: 0.06em; } /* SP では段落間の余白をやや広めにして「フレーズごと1行」のリズムに合わせる */ .lead-section__body + .lead-section__body { margin-top: 20px; } /* SP はFV直後の間を詰めて「フレーズごと1行」のリズムに繋げる */ .lead-section { padding-top: clamp(20px, 5vw, 36px); } .lead-connector { margin-bottom: clamp(20px, 4vw, 32px); } } @media (prefers-reduced-motion: reduce) { .lead-section__circle path { stroke-dasharray: none; stroke-dashoffset: 0; } } /* ════════════════════════════════════════════════════════════ STATS BANNER (実績数値) ─ 4つの実績を横並びに配置し、それぞれを金色の月桂樹で囲う アワード・カード形式。 ════════════════════════════════════════════════════════════ */ .stats-banner { --gold: #C9A04F; /* 月桂樹 / + 記号 (採用色) */ --gold-eye: #A8804A; /* eyebrow / 下線 (やや暗め) */ --gold-deep: #B8860B; /* (legacy: 残しているが現状未使用) */ position: relative; margin-top: clamp(64px, 7vw, 112px); /* 上下に波SVGを抱える分、padding を少し厚めに */ padding: clamp(80px, 8vw, 130px) clamp(20px, 4vw, 60px); /* 控えめな幾何学三角形タイル模様 */ background-color: #F5EFE0; background-image: url("data:image/svg+xml;utf8,"); background-size: 120px 120px; text-align: center; isolation: isolate; overflow: hidden; box-shadow: inset 0 5px 0 #fff, inset 0 -5px 0 #fff; } /* ── 上下の波SVG (参考LP entrypocket と同じ手法) ─────────────── ・top/bottom: 5px で白安全帯の下/上に揃える ・height はビューポート連動 (clamp) でレスポンシブ ・fill=#ffffff で隣接する白セクションへ流れ込んで見せる */ .stats-banner::before, .stats-banner::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .stats-banner::before { top: 5px; height: clamp(36px, 4.4vw, 60px); background-image: url("data:image/svg+xml;utf8,"); } .stats-banner::after { bottom: 5px; height: clamp(36px, 4.4vw, 60px); background-image: url("data:image/svg+xml;utf8,"); transform: scaleY(-1); } /* ★ モバイル:section の縦 padding と波 SVG の高さを絞り、波が画面を占める割合を下げる */ @media (max-width: 767px) { .stats-banner { padding: 56px clamp(16px, 4vw, 24px); } .stats-banner::before, .stats-banner::after { height: 26px; } } /* heading / row はテキスト層なので波の上に重ねる */ .stats-banner__eyebrow, .stats-banner__heading, .stats-banner__row { position: relative; z-index: 3; } .stats-banner__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 12px; letter-spacing: 0.3em; color: var(--gold-eye); font-weight: 700; margin-bottom: clamp(10px, 1.2vw, 16px); } .stats-banner__eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--gold-eye); margin: 10px auto 0; opacity: 0.7; } .stats-banner__heading { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: 0.12em; color: var(--dark); margin-bottom: clamp(40px, 5vw, 64px); line-height: 1.5; } /* ── Stats row (4 cells, each flanked by tilted laurel branches) ── */ .stats-banner__row { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 24px); } @media (max-width: 767px) { .stats-banner__row { grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 3.5vw, 28px); max-width: 560px; } } .stats-banner__cell { position: relative; display: flex; align-items: center; justify-content: center; /* 横 padding 最大値を 72→56 に緩和:ラベル文字サイズUP後も全帯域で余裕を確保 */ padding: clamp(18px, 2vw, 28px) clamp(40px, 4vw, 56px); min-height: clamp(112px, 11vw, 144px); /* ★ grid item の default min-width: auto を解除し、nowrap content による列幅拡張を防止 (右寄りに見える/獣医師監修のセルが他より広がる現象の根本対応) */ min-width: 0; } /* ★ 4カラムが詰まる中間帯域(768〜1099px): ラベル文字を大きくした分、cell の横 padding と月桂樹サイズを絞ってはみ出し防止 */ @media (min-width: 768px) and (max-width: 1099px) { .stats-banner__cell { padding: 16px 22px; } } @media (max-width: 767px) { .stats-banner__cell { padding: 14px clamp(38px, 9vw, 54px); min-height: 104px; } } /* ★ 超狭幅(≤380px)では padding をさらに削り、長いラベルも収まるように */ @media (max-width: 380px) { .stats-banner__cell { padding: 12px 18px; min-height: 96px; } } /* 月桂樹: 文字と同じ縦の高さで両脇に立て、軽く外側に寝かせる */ .stats-banner__laurel { position: absolute; top: 50%; height: clamp(82px, 8.5vw, 116px); width: auto; aspect-ratio: 180 / 495; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(168,128,74,0.18)); } /* 中間帯域:月桂樹も縮めて文字との衝突を回避 */ @media (min-width: 768px) and (max-width: 1099px) { .stats-banner__laurel { height: clamp(64px, 7vw, 84px); } .stats-banner__laurel--left { left: 0 !important; } .stats-banner__laurel--right { right: 0 !important; } } @media (max-width: 767px) { .stats-banner__laurel { height: clamp(64px, 14vw, 86px); } } @media (max-width: 380px) { .stats-banner__laurel { height: 56px; } } /* 左の枝: 反時計回りに約12°だけ寝かせる → 上の葉先が外側へ */ .stats-banner__laurel--left { left: clamp(4px, 0.6vw, 12px); transform: translateY(-50%) rotate(-12deg); transform-origin: center; } /* 右の枝: 時計回りに約12°寝かせる (左右対称) */ .stats-banner__laurel--right { right: clamp(4px, 0.6vw, 12px); transform: translateY(-50%) rotate(12deg); transform-origin: center; } .stats-banner__cell-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .stats-banner__label { display: block; font-size: clamp(16px, 1.6vw, 21px); font-weight: 700; letter-spacing: 0.12em; color: var(--dark); margin-bottom: clamp(8px, 1vw, 12px); line-height: 1.2; white-space: nowrap; } .stats-banner__value { display: block; color: var(--dark); line-height: 1.1; white-space: nowrap; } .stats-banner__value .stats-num { font-family: 'Ubuntu', sans-serif; font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 0.02em; } .stats-banner__value .stats-ja { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(12px, 1.1vw, 15px); font-weight: 700; margin-left: 2px; letter-spacing: 0.04em; } .stats-banner__value .stats-plus { font-family: 'Ubuntu', sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 700; margin-left: 1px; color: var(--gold); } .stats-banner__value--text { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(13px, 1.3vw, 17px); font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; white-space: normal; } /* ★ モバイル:
で "全コンテンツ / 対応" に2分割し、font は大きいまま維持 */ .sb-mobile-br { display: none; } @media (max-width: 767px) { .sb-mobile-br { display: inline; } .stats-banner__value--text { font-size: clamp(13px, 3.6vw, 16px); letter-spacing: 0.02em; line-height: 1.3; white-space: normal; } } .stats-banner__sub { display: block; margin-top: 4px; font-size: clamp(9px, 0.8vw, 11px); letter-spacing: 0.08em; color: #4A3D30; font-weight: 500; } /* ════════════════════════════════════════════════════════════ SERVICE SECTION (事業紹介) ─ 画像と文章が左右で入り組む 2 カラム交互レイアウト。 ─ 各ブロックに大きな番号、カテゴリラベル、見出し、説明、箇条書き、 詳細リンクの構造。背景にずらしたクリーム色のシェイプを配置。 ════════════════════════════════════════════════════════════ */ .service-section { position: relative; padding: clamp(80px, 9vw, 140px) 0; background: #FFFFFF; overflow: hidden; } .service-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } .service-section__header { max-width: 880px; margin: 0 auto clamp(48px, 6vw, 88px); text-align: center; } .service-section__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 12px; letter-spacing: 0.3em; color: var(--amber); font-weight: 700; margin-bottom: clamp(10px, 1.2vw, 16px); } .service-section__eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--amber); margin: 10px auto 0; } .service-section__heading { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 0.1em; color: var(--dark); margin-bottom: clamp(18px, 2vw, 28px); line-height: 1.5; } .service-section__lead { font-size: clamp(13px, 1.1vw, 16px); line-height: 2; letter-spacing: 0.04em; color: var(--dark); } /* ── Service block (2-col with alternating order) ── */ .service-block { position: relative; display: grid; align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(48px, 6vw, 96px) 0; } .service-block + .service-block { border-top: 1px solid rgba(45, 40, 32, 0.06); } @media (min-width: 768px) { .service-block--image-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); } .service-block--image-right .service-block__text { order: 1; } .service-block--image-right .service-block__image { order: 2; } .service-block--image-left { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); } .service-block--image-left .service-block__text { order: 2; padding-left: clamp(8px, 1.5vw, 24px); } .service-block--image-left .service-block__image { order: 1; } } @media (max-width: 767px) { .service-block { grid-template-columns: 1fr; } .service-block .service-block__image { order: 1; } .service-block .service-block__text { order: 2; } .service-section__lead { font-size: 15px; line-height: 2.1; } .service-section__lead .sp-hide { display: none; } } /* ── Image (with decorative offset shape behind) ── */ .service-block__image { position: relative; } .service-block__image img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; z-index: 1; } .service-block__image::before { content: ''; position: absolute; width: 72%; height: 78%; background: var(--bg-warm); border-radius: 16px; z-index: 0; } .service-block--image-right .service-block__image::before { right: clamp(-20px, -1.5vw, -8px); bottom: clamp(-20px, -1.5vw, -8px); } .service-block--image-left .service-block__image::before { left: clamp(-20px, -1.5vw, -8px); bottom: clamp(-20px, -1.5vw, -8px); } /* ── Carousel (画像を複数切替表示) ※ .service-block__image img のグローバル指定 (aspect 4/3 / position relative) を 上書きする必要があるため、詳細度を上げて指定する。 ── */ .service-block__image .service-block__carousel { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--bg-warm); z-index: 1; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .service-block__image .service-block__carousel-item { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0; opacity: 0; transition: opacity 0.7s ease; /* ネイティブ画像ドラッグを抑止 (Pointer Events を奪わせない) */ -webkit-user-drag: none; pointer-events: none; } .service-block__image .service-block__carousel-item.is-active { opacity: 1; } .service-block__carousel-dots { position: absolute; z-index: 2; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; } .service-block__carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: background 0.25s ease, transform 0.25s ease; } .service-block__carousel-dot.is-active { background: var(--amber); transform: scale(1.15); } .service-block__carousel-dot:hover { background: var(--amber-bright); } /* ── Text column ── */ .service-block__text { position: relative; } .service-block__category { font-family: 'Ubuntu', sans-serif; display: inline-flex; align-items: center; gap: 18px; font-size: clamp(14px, 1.3vw, 18px); letter-spacing: 0.24em; color: var(--amber); font-weight: 700; margin-bottom: clamp(14px, 1.6vw, 22px); position: relative; z-index: 2; } .service-block__category-num { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: 0; } .service-block__category-bar { display: inline-block; width: 32px; height: 1px; background: var(--amber); } .service-block__category-ja { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: 0.14em; color: var(--mid); font-weight: 700; } /* 大きな筆記体の英語タイトル（背景装飾） */ .service-block__category-en { position: absolute; top: clamp(-24px, -1.6vw, -12px); left: clamp(-8px, -0.6vw, -4px); font-family: 'Allura', cursive; font-size: clamp(72px, 9vw, 150px); font-weight: 400; line-height: 0.95; letter-spacing: 0.01em; color: var(--amber); opacity: 0.16; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; transform: rotate(-3deg); transform-origin: left top; } .service-block__sub { font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.14em; color: var(--mid); margin-bottom: 6px; position: relative; z-index: 1; } .service-block__title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: 0.02em; line-height: 1.55; color: var(--dark); margin-bottom: clamp(18px, 2vw, 28px); position: relative; z-index: 1; word-break: keep-all; } @media (max-width: 767px) { .service-block__category-en { font-size: clamp(56px, 16vw, 90px); opacity: 0.13; } } .service-block__release { display: inline-block; padding: 6px 14px; background: var(--amber); color: #fff; font-size: 11px; letter-spacing: 0.1em; font-weight: 700; border-radius: 100px; margin-bottom: clamp(14px, 1.6vw, 20px); } .service-block__lead { font-size: clamp(15px, 1.1vw, 16px); line-height: 1.95; letter-spacing: 0.04em; color: var(--dark); margin-bottom: clamp(18px, 2vw, 28px); } .service-block__points-label { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 18px); margin-bottom: clamp(14px, 1.6vw, 20px); } .service-block__points-label-en { font-family: 'Ubuntu', sans-serif; font-size: clamp(10px, 0.9vw, 12px); font-weight: 700; letter-spacing: 0.28em; color: var(--amber); text-transform: uppercase; white-space: nowrap; } .service-block__points-label-ja { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(11px, 0.95vw, 13px); font-weight: 700; letter-spacing: 0.18em; color: var(--mid); white-space: nowrap; } .service-block__points-label::after { content: ''; flex: 1; height: 1px; background: rgba(45, 40, 32, 0.12); } .service-block__points { list-style: none; margin-bottom: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); } .service-block__points li { position: relative; padding-left: 22px; font-size: clamp(14px, 1.05vw, 15px); line-height: 1.9; letter-spacing: 0.03em; color: var(--dark); } .service-block__points li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 12px; height: 1px; background: var(--amber); } .service-block__link { position: relative; display: inline-flex; justify-content: center; align-items: center; min-width: 280px; max-width: 100%; height: 50px; padding: 0 52px 0 28px; background-color: #4e4d4d; color: #f4f3ee; border-radius: 25px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; line-height: 1; white-space: nowrap; text-decoration: none; transition: background 0.25s, transform 0.2s; cursor: pointer; } .service-block__link:hover { background: var(--dark); text-decoration: none; transform: translateY(-1px); } .service-block__link[aria-disabled="true"] { cursor: not-allowed; } .service-block__link-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: 'Ubuntu', sans-serif; font-weight: 400; font-size: 16px; line-height: 1; } /* ── Platform sub-block (YouTube / Instagram / TikTok を縦に並べる) ─ ヘアラインのみで区切り。枠・影・背景・縦バーは使わない (流れの中の セクション分けはタイポと細罫線のみで表現する方針)。 ── */ .service-block__platform + .service-block__platform { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid rgba(45, 40, 32, 0.08); } .service-block__platform .service-block__points { margin-bottom: clamp(18px, 2vw, 24px); } /* リストが無いブロック (TikTok) では label と links の間の隙間を確保 */ .service-block__platform .service-block__points-label + .service-block__links { margin-top: clamp(14px, 1.6vw, 20px); } /* Instagram などサブタイトル付き */ .service-block__platform-title { font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; letter-spacing: 0.05em; color: var(--dark); margin: 0 0 clamp(10px, 1.2vw, 14px); } /* ── 複数ボタンを横並び (折り返し可) ── */ .service-block__links { display: flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 14px); } .service-block__links .service-block__link { min-width: 0; /* 横並び時は flex 幅に従う */ flex: 0 1 auto; } @media (max-width: 480px) { .service-block__links .service-block__link { width: 100%; /* 狭幅では1列に積む */ } } /* ════════════════════════════════════════════════════════════ STAGGERED ENTRY ANIMATIONS ════════════════════════════════════════════════════════════ */ .firstview.is-entering .fv__brand, .firstview.is-entering .fv__catch { opacity: 0; transform: translateY(16px); } .firstview.is-entering .fv__scroll { opacity: 0; } .firstview.is-ready .fv__brand, .firstview.is-ready .fv__catch { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s ease; } .firstview.is-ready .fv__catch { transition-delay: 0.4s; } .firstview.is-ready .fv__scroll { opacity: 1; transition: opacity 1s ease; transition-delay: 1s; } /* ════════════════════════════════════════════════════════════ RESULTS SECTION (実績・メディア掲載) ─ 3ブロック構成: 01 YouTube / 02 LINE / 03 メディア掲載 ─ 企業との連携実績は stats-banner 直下の別セクション (#corporate-results) へ移設 ─ 各ブロックは「番号 + タイトル + 区切り罫線」のヘッダ統一 ─ TAILS既存トークン (--bg-warm / --amber / --dark / --mid) + 採用金色 #C9A04F ═══════════════════════════════════════════════════════════ */ .results-section { position: relative; padding: clamp(8px, 1.5vw, 20px) 0 clamp(80px, 9vw, 140px); background: #FFFFFF; overflow: hidden; } .results-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } /* ── Section header ── */ .results-section__header { max-width: 880px; margin: 0 auto clamp(56px, 6vw, 96px); text-align: center; } .results-section__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 12px; letter-spacing: 0.3em; color: var(--amber); font-weight: 700; margin-bottom: clamp(10px, 1.2vw, 16px); } .results-section__eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--amber); margin: 10px auto 0; } .results-section__heading { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 0.1em; color: var(--dark); margin-bottom: clamp(18px, 2vw, 28px); line-height: 1.5; } .results-section__lead { font-size: clamp(14px, 1.1vw, 16px); line-height: 2; letter-spacing: 0.04em; color: var(--dark); } .results-section__lead-br-sp { display: none; } @media (max-width: 767px) { .results-section__lead-br-sp { display: inline; } } /* ── Block 共通 (01〜04) ── */ .results-block { margin-top: clamp(56px, 6vw, 88px); } .results-block:first-of-type { margin-top: 0; } .results-block__head { display: flex; align-items: baseline; gap: clamp(14px, 1.8vw, 22px); margin-bottom: clamp(24px, 3vw, 36px); padding-bottom: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid rgba(45, 40, 32, 0.12); } .results-block__num { font-family: 'Ubuntu', sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: #C9A04F; letter-spacing: 0.04em; flex-shrink: 0; line-height: 1; } .results-block__title { font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; letter-spacing: 0.08em; color: var(--dark); line-height: 1.4; } /* ════════ Block 01: YouTube ════════ */ .yt-eyebrow { margin: 0 0 8px; color: var(--amber); font-size: clamp(12px, 1vw, 14px); font-weight: 700; letter-spacing: 0.12em; } .yt-title-row { position: relative; padding-right: calc(clamp(112px, 14vw, 200px) + clamp(16px, 2vw, 24px)); margin-bottom: clamp(20px, 2.5vw, 32px); } @media (max-width: 768px) { .yt-title-row { padding-right: 0; } } .yt-title { margin: 0; min-width: 0; color: var(--dark); font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; font-weight: 900; letter-spacing: -0.01em; } .yt-hero-lineart { display: block; position: absolute; right: 0; bottom: clamp(-57px, -4.1vw, -32px); width: clamp(112px, 14vw, 200px); height: auto; object-fit: contain; pointer-events: none; } @media (max-width: 768px) { .yt-hero-lineart { display: none; } } .yt-hero-card { display: grid; grid-template-columns: clamp(150px, 17vw, 220px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(26px, 3.2vw, 40px) 0; margin-bottom: clamp(14px, 1.8vw, 22px); } @media (max-width: 768px) { .yt-hero-card { grid-template-columns: 1fr; gap: 18px; } } .yt-hero-copy { min-width: 0; } .yt-lead-line, .yt-sub-line { display: inline; font-size: clamp(17px, 1.9vw, 30px); font-weight: 900; line-height: 1.7; background: linear-gradient(transparent 62%, rgba(255, 235, 59, 0.55) 62%); } .yt-lead-accent { color: var(--amber); font-size: 1.1em; } .yt-note { margin: 6px 0 14px; color: var(--mid); font-size: clamp(12px, 0.95vw, 14px); font-weight: 500; letter-spacing: 0.04em; } .yt-note:last-child { margin-bottom: 0; } .yt-divider { height: 1px; background: rgba(45, 40, 32, 0.1); margin: 0 0 18px; } .yt-badge-wrap { display: flex; justify-content: center; align-items: center; } @media (max-width: 768px) { .yt-badge-wrap { display: none; } } .yt-badge-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 16px rgba(45, 40, 32, 0.12)); } .yt-detail-list { display: grid; gap: 0; margin: clamp(24px, 3vw, 38px) auto 0; max-width: 980px; border-top: 1px solid rgba(45, 40, 32, 0.12); border-bottom: 1px solid rgba(45, 40, 32, 0.12); } .yt-detail-list__row { display: grid; grid-template-columns: clamp(130px, 18vw, 190px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); padding: clamp(14px, 1.8vw, 20px) 0; border-top: 1px solid rgba(45, 40, 32, 0.08); } .yt-detail-list__row:first-child { border-top: 0; } .yt-detail-list__term { color: var(--amber); font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; letter-spacing: 0.08em; line-height: 1.6; } .yt-detail-list__desc { color: var(--dark); font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; letter-spacing: 0.04em; line-height: 1.8; } @media (max-width: 767px) { .yt-detail-list__row { grid-template-columns: 1fr; gap: 4px; } } /* ════════ Block 02: LINE ════════ */ .line-banner { border-radius: 16px; overflow: hidden; line-height: 0; box-shadow: 0 6px 24px rgba(6, 199, 85, 0.10); } .line-banner__img { display: block; width: 100%; height: auto; } /* ════════ Block 03: メディア掲載・執筆実績 ════════ */ .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 3.5vw, 44px); } @media (max-width: 767px) { .media-grid { grid-template-columns: 1fr; gap: 20px; } } .media-card { background: var(--bg-warm); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } /* ── Visual (image area) ── */ .media-card__visual { position: relative; overflow: hidden; height: clamp(190px, 21vw, 256px); } .media-card__visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* Diamond Online: full-width top row, horizontal layout */ .media-card--diamond { grid-column: 1 / -1; flex-direction: row; min-height: clamp(220px, 24vw, 320px); } .media-card--diamond .media-card__visual { flex: 0 0 50%; height: auto; } .media-card--diamond .media-card__body { justify-content: center; } @media (max-width: 767px) { .media-card--diamond { flex-direction: column; min-height: 0; } .media-card--diamond .media-card__visual { flex: none; height: clamp(190px, 52vw, 260px); } } /* Book: full cover on warm cream */ .media-card--book .media-card__visual { background: #F5EFE0; display: flex; align-items: center; justify-content: center; } .media-card--book .media-card__visual img { object-fit: contain; padding: 14px 30px; } /* Instagram iPhone: full phone on deep background */ .media-card--insta .media-card__visual { background: #141414; display: flex; align-items: center; justify-content: center; } .media-card--insta .media-card__visual img { object-fit: contain; padding: 10px 40px; } /* ── Badge (top-left chip) ── */ .media-card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; line-height: 1; white-space: nowrap; background: var(--amber); color: #fff; } .media-card__badge--rank { background: #C9A04F; } /* ── Card body ── */ .media-card__body { padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) clamp(22px, 2.8vw, 30px); display: flex; flex-direction: column; flex: 1; } .media-card__source { font-family: 'Ubuntu', sans-serif; font-size: 10px; letter-spacing: 0.32em; color: var(--amber); font-weight: 700; margin-bottom: 8px; } .media-card__title { font-size: clamp(14px, 1.35vw, 17px); font-weight: 700; letter-spacing: 0.03em; line-height: 1.55; color: var(--dark); margin-bottom: clamp(10px, 1.2vw, 14px); } .media-card__desc { font-size: clamp(14px, 1vw, 15px); line-height: 1.9; letter-spacing: 0.025em; color: var(--mid); flex: 1; } .media-card__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(16px, 2vw, 24px); padding: 0 28px; height: 46px; background: #4e4d4d; color: #f4f3ee; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; align-self: flex-start; } .media-card__link[aria-disabled="true"] { cursor: not-allowed; } /* ════════ 企業との連携実績 (#corporate-results) ════════ */ /* ── 掲載ロゴ（ポリシー上部・横並びウォール） ── */ .partner-logos { list-style: none; margin: 0 0 clamp(28px, 3.5vw, 44px); padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 4.5vw, 56px); } .partner-logos__item { display: flex; align-items: center; justify-content: center; } .partner-logos__item img { display: block; width: auto; height: auto; max-height: clamp(34px, 4.4vw, 54px); max-width: clamp(130px, 22vw, 230px); object-fit: contain; } /* KYOWA＋Sobagni の合成バナー（2段組）は少し大きめに */ .partner-logos__item--banner img { max-height: clamp(60px, 8vw, 92px); max-width: clamp(170px, 30vw, 290px); } .partner-simple { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 28px); background: #FAFAFA; border-radius: 10px; } .partner-simple__label { font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.15em; color: var(--amber); margin-bottom: 4px; } .partner-simple__text { font-size: clamp(13px, 1.1vw, 15px); color: var(--dark); line-height: 1.8; letter-spacing: 0.03em; } .partner-notice { border-left: 3px solid var(--amber); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.5vw, 32px); background: var(--bg-warm); border-radius: 0 10px 10px 0; } .partner-notice__eyebrow { font-family: 'Ubuntu', sans-serif; font-size: 10px; letter-spacing: 0.3em; color: var(--amber); font-weight: 700; margin-bottom: clamp(12px, 1.4vw, 18px); } .partner-notice__body { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 12px); } .partner-notice__line { font-size: clamp(14px, 1.05vw, 15px); line-height: 1.9; letter-spacing: 0.03em; color: var(--dark); padding-left: 1.2em; text-indent: -1.2em; } .partner-notice__line::before { content: '—'; margin-right: 0.4em; color: var(--amber); font-weight: 700; } /* ════════════════════════════════════════════════════════════ ABOUT SECTION (会社概要) ─ Mission / Vision カード + 会社情報テーブル ════════════════════════════════════════════════════════════ */ .about-section { position: relative; padding: clamp(80px, 9vw, 140px) 0; background: #FFFFFF; } .about-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } .about-section__header { max-width: 880px; margin: 0 auto clamp(56px, 6vw, 88px); text-align: center; } .about-section__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 12px; letter-spacing: 0.3em; color: var(--amber); font-weight: 700; margin-bottom: clamp(10px, 1.2vw, 16px); } .about-section__eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--amber); margin: 10px auto 0; } .about-section__heading { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 0.1em; color: var(--dark); line-height: 1.5; } /* ── Mission & Vision — editorial, hairline-only, serif typography ── */ .about-mv { margin-bottom: clamp(72px, 9vw, 120px); display: flex; flex-direction: column; position: relative; counter-reset: mv; } .about-mv__item { counter-increment: mv; display: grid; grid-template-columns: clamp(120px, 15vw, 196px) 1fr; gap: clamp(32px, 4vw, 72px); align-items: start; padding: clamp(64px, 7vw, 104px) clamp(8px, 2vw, 32px) clamp(72px, 7.5vw, 112px); position: relative; border-top: 1px solid rgba(45, 40, 32, 0.12); } .about-mv__item:last-child { border-bottom: 1px solid rgba(45, 40, 32, 0.12); } /* Editorial chapter number — sits on the top hairline, italic serif */ .about-mv__item::before { content: counter(mv, decimal-leading-zero); position: absolute; top: 0; left: clamp(8px, 2vw, 32px); transform: translateY(-52%); font-family: 'Noto Serif JP', serif; font-style: italic; font-weight: 400; font-size: clamp(13px, 1.15vw, 15px); letter-spacing: 0.22em; color: var(--amber); background: #FFFFFF; padding: 0 14px 0 0; line-height: 1; } /* Refined watermark — italic serif, lowercase */ .about-mv__item::after { content: attr(data-en); position: absolute; right: -0.06em; bottom: -0.25em; font-family: 'Noto Serif JP', serif; font-style: italic; font-weight: 400; font-size: clamp(88px, 13vw, 168px); letter-spacing: 0.005em; color: var(--amber); opacity: 0.07; line-height: 1; pointer-events: none; user-select: none; text-transform: lowercase; } @media (max-width: 599px) { .about-mv__item { grid-template-columns: 1fr; gap: 18px; padding: clamp(44px, 9vw, 64px) 4px clamp(52px, 10vw, 72px); } .about-mv__item::before { left: 4px; padding: 0 12px 0 0; } .about-mv__item::after { font-size: clamp(56px, 20vw, 88px); bottom: -0.15em; } } .about-mv__label { font-family: 'Ubuntu', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.34em; color: var(--amber); padding-top: 14px; position: relative; z-index: 1; } .about-mv__label::before { content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 1px; background: var(--amber); } @media (max-width: 599px) { .about-mv__label { padding-top: 0; } .about-mv__label::before { display: none; } } .about-mv__text { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); position: relative; z-index: 1; } /* 核心フレーズ: Serif JP・極太 → 上品で記憶に残る声 */ .about-mv__headline { display: block; font-family: 'Noto Serif JP', serif; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: 0.04em; line-height: 1.6; color: var(--dark); text-wrap: balance; } /* 補足説明: サンセリフ・小 → 自然に流し読みされる */ .about-mv__body { display: block; font-family: 'Noto Sans JP', sans-serif; font-size: clamp(14px, 1.1vw, 16px); font-weight: 500; letter-spacing: 0.05em; line-height: 1.95; color: var(--dark); } /* ── Company info table ── */ .about-info { margin-top: clamp(40px, 5vw, 72px); } .about-info__subtitle { font-family: 'Ubuntu', sans-serif; font-size: 12px; letter-spacing: 0.28em; color: var(--amber); font-weight: 700; display: inline-block; margin-bottom: clamp(24px, 3vw, 40px); } .about-info__subtitle::after { content: ''; display: block; width: 28px; height: 1px; background: var(--amber); margin-top: 8px; } .about-info__table { width: 100%; border-collapse: collapse; font-size: clamp(13px, 1.05vw, 15px); } .about-info__table tr { border-bottom: 1px solid rgba(45, 40, 32, 0.08); } .about-info__table tr:first-child { border-top: 1px solid rgba(45, 40, 32, 0.08); } .about-info__table th { width: clamp(120px, 18vw, 200px); padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px) clamp(16px, 2vw, 22px) 0; font-weight: 700; letter-spacing: 0.06em; color: var(--amber); vertical-align: top; white-space: nowrap; text-align: left; line-height: 1.6; } .about-info__table td { padding: clamp(16px, 2vw, 22px) 0 clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px); color: var(--dark); letter-spacing: 0.03em; line-height: 1.85; vertical-align: top; border-left: 1px solid rgba(45, 40, 32, 0.08); } .about-info__table td a { color: var(--amber); text-decoration: underline; text-decoration-color: rgba(212, 145, 74, 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s; } .about-info__table td a:hover { text-decoration-color: var(--amber); } .about-info__notice { display: inline-flex; align-items: center; font-size: 11px; color: var(--mid); background: rgba(45, 40, 32, 0.05); border-radius: 4px; padding: 2px 8px; margin-left: 8px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.6; vertical-align: middle; } .about-info__pending { color: var(--mid); font-weight: 500; font-size: 0.9em; } @media (max-width: 599px) { .about-info__table thead, .about-info__table tbody, .about-info__table tr, .about-info__table th, .about-info__table td { display: block; width: 100%; } .about-info__table th { padding: 16px 0 4px; white-space: normal; border-left: 3px solid var(--amber); padding-left: 10px; border-bottom: none; } .about-info__table td { padding: 4px 0 16px 13px; border-left: 3px solid rgba(45, 40, 32, 0.08); border-bottom: none; } .about-info__table tr { border-bottom: 1px solid rgba(45, 40, 32, 0.08); padding: 0; } } /* ════════════════════════════════════════════════════════════ TEAM SECTION (チーム紹介) ─ service-block と同じ開放グリッド。カードなし・影なし。 ════════════════════════════════════════════════════════════ */ .team-section { position: relative; padding: clamp(80px, 9vw, 140px) 0; background: #FFFFFF; overflow: hidden; } .team-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } .team-section__header { max-width: 880px; margin: 0 auto clamp(48px, 6vw, 88px); text-align: center; } .team-section__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 12px; letter-spacing: 0.3em; color: var(--amber); font-weight: 700; margin-bottom: clamp(10px, 1.2vw, 16px); } .team-section__eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--amber); margin: 10px auto 0; } .team-section__heading { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 0.1em; color: var(--dark); line-height: 1.5; } /* ── Member block (service-block と同一パターン) ── */ .team-block { position: relative; display: grid; align-items: start; gap: clamp(28px, 5vw, 80px); padding: clamp(48px, 6vw, 96px) 0; } .team-block + .team-block { border-top: 1px solid rgba(45, 40, 32, 0.06); } @media (min-width: 768px) { .team-block--photo-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .team-block--photo-left .team-block__image { order: 1; } .team-block--photo-left .team-block__text { order: 2; } .team-block--photo-right { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .team-block--photo-right .team-block__text { order: 1; padding-right: clamp(8px, 1.5vw, 24px); } .team-block--photo-right .team-block__image { order: 2; } } @media (max-width: 767px) { .team-block { grid-template-columns: 1fr; } .team-block .team-block__image { order: 1; } .team-block .team-block__text { order: 2; } } /* ── Photo (service-block__image と同じ装飾手法) ── */ .team-block__image { position: relative; } .team-block__image::before { content: ''; position: absolute; width: 72%; height: 78%; background: var(--bg-warm); border-radius: 16px; z-index: 0; } .team-block--photo-left .team-block__image::before { right: clamp(-20px, -1.5vw, -8px); bottom: clamp(-20px, -1.5vw, -8px); } .team-block--photo-right .team-block__image::before { left: clamp(-20px, -1.5vw, -8px); bottom: clamp(-20px, -1.5vw, -8px); } /* 写真本体: 上丸み＋下角取り（pawpark方式） */ .team-block__photo { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 160px 160px 16px 16px; overflow: hidden; background: var(--bg-warm); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; z-index: 1; } .team-block__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .team-block__photo-paw { width: clamp(52px, 7vw, 80px); height: auto; color: var(--amber); opacity: 0.22; } .team-block__photo-label { font-family: 'Ubuntu', sans-serif; font-size: 10px; letter-spacing: 0.32em; color: var(--amber); opacity: 0.45; font-weight: 700; } /* ── Text column ── */ .team-block__text { position: relative; display: flex; flex-direction: column; gap: clamp(22px, 2.8vw, 36px); } /* 大きな背景装飾文字 (service-block__category-en と同じ手法) */ .team-block__name-en-bg { position: absolute; top: clamp(-28px, -2vw, -14px); left: clamp(-8px, -0.5vw, -4px); font-family: 'Allura', cursive; font-size: clamp(80px, 11vw, 160px); font-weight: 400; line-height: 0.95; letter-spacing: 0.01em; color: var(--amber); opacity: 0.13; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; transform: rotate(-3deg); transform-origin: left top; } .team-block__header { position: relative; z-index: 1; } .team-block__role-label { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: clamp(10px, 0.85vw, 12px); font-weight: 700; letter-spacing: 0.2em; color: var(--amber); margin-bottom: clamp(10px, 1.2vw, 16px); } .team-block__role-label::after { content: ''; display: block; width: 24px; height: 1px; background: var(--amber); margin-top: 7px; } .team-block__name { font-size: clamp(28px, 3.4vw, 46px); font-weight: 900; letter-spacing: 0.1em; color: var(--dark); line-height: 1.25; margin: 0 0 6px; } .team-block__position { font-size: clamp(12px, 1vw, 14px); font-weight: 700; letter-spacing: 0.08em; color: var(--mid); } /* ── Credentials (実績ステート: editorial stat row) ── - 枠線・背景・影なし。3カラムのテキストブロックでメトリクスを表現 - ラベル(Eng 小キャップス) → 大きな明朝の figure → 小さな単位/補足 の縦積み */ .team-block__badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin: 0; padding: clamp(4px, 0.6vw, 10px) 0 0; list-style: none; position: relative; z-index: 1; } .team-block__badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(8px, 0.9vw, 12px); padding: clamp(12px, 1.4vw, 18px) 0 0; position: relative; background: transparent; border: 0; color: var(--dark); line-height: 1; } /* 各バッジの上中央に短いヘアラインを置く (リード装飾) */ .team-block__badge::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: clamp(24px, 2.6vw, 36px); height: 1px; background: var(--amber); } .team-block__badge-label { display: inline-block; font-family: 'Ubuntu', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber); line-height: 1.35; } .team-block__badge-figure { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.05; letter-spacing: 0.02em; color: var(--dark); display: inline-flex; align-items: baseline; justify-content: center; } .team-block__badge-figure small { font-size: 0.55em; font-weight: 500; letter-spacing: 0.06em; margin-left: 3px; color: var(--amber-deep); opacity: 0.85; } .team-block__badge-figure em { font-style: normal; font-size: 1.25em; font-weight: 700; letter-spacing: 0; margin: 0 1px; color: var(--amber-deep); } .team-block__badge-unit { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.45; color: var(--mid); } @media (max-width: 599px) { .team-block__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2.4vw, 14px); } .team-block__badge { gap: 7px; padding-top: 12px; } .team-block__badge::before { width: 18px; } .team-block__badge-label { font-size: 9px; letter-spacing: 0.16em; } .team-block__badge-figure { font-size: clamp(18px, 5.4vw, 24px); } .team-block__badge-figure small { font-size: 0.5em; } .team-block__badge-unit { font-size: 10px; letter-spacing: 0.06em; line-height: 1.4; } } @media (max-width: 379px) { .team-block__badges { gap: 6px; } .team-block__badge-label { font-size: 8.5px; letter-spacing: 0.14em; } .team-block__badge-figure { font-size: clamp(16px, 5vw, 20px); } .team-block__badge-unit { font-size: 9.5px; } } /* ── Credentials dl ── */ .team-block__dl { display: flex; flex-direction: column; border-top: 1px solid rgba(45, 40, 32, 0.08); position: relative; z-index: 1; } .team-block__dl-row { display: grid; grid-template-columns: clamp(72px, 12vw, 120px) 1fr; gap: clamp(10px, 1.4vw, 18px); padding: clamp(10px, 1.2vw, 14px) 0; border-bottom: 1px solid rgba(45, 40, 32, 0.08); font-size: clamp(12px, 1vw, 14px); line-height: 1.85; } .team-block__dl-row dt { font-weight: 700; color: var(--amber); letter-spacing: 0.06em; } .team-block__dl-row dd { color: var(--dark); letter-spacing: 0.03em; margin: 0; } @media (max-width: 479px) { .team-block__dl-row { grid-template-columns: 1fr; gap: 3px; } } /* ── Message ── */ .team-block__message { margin: 0; padding-left: clamp(20px, 2.5vw, 28px); border-left: 3px solid var(--amber); position: relative; z-index: 1; } .team-block__message-body { font-size: clamp(13px, 1.05vw, 15px); font-weight: 500; line-height: 2.05; letter-spacing: 0.04em; color: var(--dark); margin: 0 0 clamp(10px, 1.2vw, 14px); } .team-block__message-sig { font-family: 'Ubuntu', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--amber); } .team-block__pending { color: var(--mid); font-weight: 500; font-size: 0.9em; } /* ── インライン版 pending (dl の dd 内などで使う、控えめな “準備中” 表示) ── */ .team-block__pending--inline { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: transparent; border: 0; font-size: 0.9em; letter-spacing: 0.05em; line-height: 1; color: var(--amber-deep); } .team-block__pending-bar { position: relative; display: inline-block; width: 18px; height: 2px; background: rgba(212, 145, 74, 0.25); border-radius: 2px; overflow: hidden; } .team-block__pending-bar::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--amber); border-radius: 2px; animation: teamPendingBar 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite; } .team-block__pending-text { font-weight: 700; } .team-block__pending-en { font-family: 'Ubuntu', sans-serif; font-size: 0.78em; font-weight: 700; letter-spacing: 0.22em; color: rgba(212, 145, 74, 0.55); padding-left: 10px; position: relative; } .team-block__pending-en::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 1px; background: rgba(212, 145, 74, 0.45); transform: translateY(-50%); } @keyframes teamPendingBar { 0% { transform: translateX(-100%); } 60% { transform: translateX(250%); } 100% { transform: translateX(250%); } } /* ════════════════════════════════════════════════════════════ TEAM LETTER — メンバーからの手紙形式メッセージ .team-letter : 完成版 (本文表示) .team-letter--draft : "執筆中" プレースホルダー (status / preview-tag を追加) どちらも枠線・背景・影なしで本文フローに馴染ませる ════════════════════════════════════════════════════════════ */ .team-block__message.team-letter { padding-left: 0; border-left: 0; } .team-letter { position: relative; isolation: isolate; padding: clamp(6px, 0.6vw, 10px) 0 clamp(4px, 0.4vw, 6px); background: transparent; border: 0; overflow: visible; } /* 巨大な “” マーク (背景装飾 / プルクオート風) */ .team-letter__mark { position: absolute; top: clamp(28px, 3vw, 48px); left: clamp(-6px, -0.4vw, -2px); font-family: 'Noto Serif JP', 'Allura', serif; font-size: clamp(110px, 13vw, 180px); font-weight: 500; line-height: 0.8; color: var(--amber); opacity: 0.11; user-select: none; pointer-events: none; z-index: 0; transform: translateY(-12%); } /* ヘッダー: ラベル + ステータス */ .team-letter__head { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(14px, 1.6vw, 22px); padding-bottom: clamp(10px, 1.2vw, 14px); border-bottom: 1px dashed rgba(212, 145, 74, 0.32); z-index: 2; } .team-letter__eyebrow { font-family: 'Ubuntu', sans-serif; font-size: clamp(10px, 0.85vw, 12px); font-weight: 700; letter-spacing: 0.3em; color: var(--amber); } /* 補助ラベル (右側): 完成版で eyebrow と対になる小キャプション */ .team-letter__head-sub { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: rgba(106, 96, 87, 0.78); } .team-letter__head-sub::before { content: ''; display: inline-block; width: 14px; height: 1px; background: rgba(212, 145, 74, 0.5); } .team-letter__status { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; color: var(--amber-deep); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; line-height: 1; } .team-letter__status-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); } .team-letter__status-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(212, 145, 74, 0.45); animation: teamLetterPulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; z-index: -1; } .team-letter__status-text { font-weight: 700; } .team-letter__status-en { font-family: 'Ubuntu', sans-serif; font-size: 9px; letter-spacing: 0.22em; font-weight: 700; color: rgba(212, 145, 74, 0.72); padding-left: 10px; margin-left: 2px; position: relative; } .team-letter__status-en::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 1px; background: rgba(212, 145, 74, 0.55); transform: translateY(-50%); } @keyframes teamLetterPulse { 0% { transform: scale(0.8); opacity: 0.9; } 70% { transform: scale(2.0); opacity: 0; } 100% { transform: scale(2.0); opacity: 0; } } /* プレビュー (想定原稿) */ .team-letter__preview { position: relative; z-index: 2; } .team-letter__preview-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; color: rgba(212, 145, 74, 0.78); margin-bottom: clamp(12px, 1.4vw, 16px); } .team-letter__preview-tag::before { content: ''; display: inline-block; width: 14px; height: 1px; background: rgba(212, 145, 74, 0.55); } .team-letter__preview-body { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: clamp(13px, 1.05vw, 15px); font-weight: 400; font-style: normal; line-height: 2.15; letter-spacing: 0.05em; color: rgba(45, 40, 32, 0.78); margin: 0; text-indent: 0.5em; /* かすかに下にフェードして "未完成感" を表現 */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.75) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.75) 100%); } /* 完成版の本文 (--draft なしのとき) */ .team-letter__body { position: relative; z-index: 2; font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: clamp(14px, 1.1vw, 16px); font-weight: 400; line-height: 2.15; letter-spacing: 0.05em; color: var(--dark); display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); } .team-letter__body p { margin: 0; text-indent: 1em; } /* フッター: 署名ライン */ .team-letter__foot { position: relative; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(18px, 2vw, 26px); padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px dashed rgba(212, 145, 74, 0.32); z-index: 2; } .team-letter__sig-line { flex: 0 0 clamp(28px, 4vw, 48px); height: 1px; background: var(--amber); position: relative; } .team-letter__sig-line::before, .team-letter__sig-line::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); top: 50%; transform: translateY(-50%); } .team-letter__sig-line::before { left: -3px; } .team-letter__sig-line::after { right: -3px; } .team-letter__sig-block { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; } .team-letter__sig-role { font-family: 'Ubuntu', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--mid); text-transform: uppercase; } .team-letter__sig-name { font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; letter-spacing: 0.14em; color: var(--dark); } .team-letter__sig-cursive { margin-left: auto; font-family: 'Allura', cursive; font-size: clamp(34px, 4.2vw, 56px); font-weight: 400; line-height: 1; color: var(--amber); opacity: 0.55; transform: rotate(-4deg) translateY(-2px); letter-spacing: 0.01em; pointer-events: none; user-select: none; } @media (max-width: 479px) { .team-letter--draft { padding: 22px 18px; } .team-letter__head { align-items: flex-start; } .team-letter__foot { flex-wrap: wrap; } .team-letter__sig-cursive { margin-left: 0; font-size: 38px; } } /* ── 大型序数 (背景装飾レイヤー) ── */ .team-block__ordinal { position: absolute; font-family: 'Ubuntu', sans-serif; font-size: clamp(140px, 20vw, 240px); font-weight: 900; line-height: 0.85; letter-spacing: -0.06em; color: var(--amber); opacity: 0.07; pointer-events: none; user-select: none; z-index: 0; top: clamp(-20px, -1.5vw, -10px); transform: rotate(-4deg); } .team-block--photo-left .team-block__ordinal { right: 0; transform-origin: right top; } .team-block--photo-right .team-block__ordinal { left: 0; transform-origin: left top; } /* ── 縦書きラベル (写真エッジ) ── */ .team-block__image::after { content: attr(data-label); position: absolute; font-family: 'Ubuntu', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.3em; color: var(--amber); writing-mode: vertical-rl; white-space: nowrap; opacity: 0.38; pointer-events: none; user-select: none; z-index: 2; top: clamp(32px, 3.5vw, 52px); } .team-block--photo-left .team-block__image::after { right: clamp(-28px, -2vw, -14px); } .team-block--photo-right .team-block__image::after { left: clamp(-28px, -2vw, -14px); } @media (max-width: 767px) { .team-block__image::after { display: none; } } /* ════════════════════════════════════════════════════════════ SUPERVISION SECTION (監修体制) ─ 4-area numbered grid + 行動学 specialization callout ─ "全コンテンツ・商品は獣医師監修" を構造として示す ════════════════════════════════════════════════════════════ */ .supervision-section { position: relative; padding: 0 0 clamp(80px, 9vw, 140px); background: #FFFFFF; } .supervision-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } .supervision-section__header { max-width: 880px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; } .supervision-section__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 12px; letter-spacing: 0.3em; color: var(--amber); font-weight: 700; margin-bottom: clamp(10px, 1.2vw, 16px); } .supervision-section__eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--amber); margin: 10px auto 0; } .supervision-section__heading { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 0.1em; color: var(--dark); line-height: 1.5; margin-bottom: clamp(18px, 2vw, 26px); } .supervision-section__lead { font-size: clamp(14px, 1.1vw, 16px); line-height: 2; letter-spacing: 0.05em; color: var(--dark); } .supervision-section__lead strong { font-weight: 700; color: var(--amber-deep); } /* ── 4-area numbered grid (hairline dividers, no card) ── */ .supervision-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; margin: 0 auto clamp(64px, 7.5vw, 104px); border-top: 1px solid rgba(45, 40, 32, 0.1); } .supervision-item { position: relative; display: grid; grid-template-columns: clamp(56px, 7vw, 88px) 1fr; gap: clamp(18px, 2.5vw, 32px); padding: clamp(28px, 3.8vw, 48px) clamp(20px, 3vw, 40px); align-items: start; border-bottom: 1px solid rgba(45, 40, 32, 0.1); } .supervision-item:nth-child(odd) { border-right: 1px solid rgba(45, 40, 32, 0.1); } @media (max-width: 767px) { .supervision-grid { grid-template-columns: 1fr; } .supervision-item { border-right: 0 !important; padding: clamp(24px, 5vw, 32px) clamp(4px, 2vw, 16px); grid-template-columns: clamp(48px, 14vw, 72px) 1fr; gap: clamp(14px, 3vw, 24px); } } .supervision-item__num { display: flex; flex-direction: column; align-items: flex-start; padding-top: 4px; } .supervision-item__num-figure { font-family: 'Ubuntu', sans-serif; font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1; color: var(--amber); letter-spacing: 0; } .supervision-item__num::after { content: ''; display: block; width: 22px; height: 1px; background: var(--amber); margin-top: 10px; } .supervision-item__body { display: flex; flex-direction: column; gap: clamp(8px, 1.1vw, 14px); min-width: 0; } .supervision-item__label { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; color: var(--dark); } .supervision-item__desc { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.95; letter-spacing: 0.04em; color: var(--dark); } .supervision-item__strong { font-weight: 700; color: var(--amber-deep); background: linear-gradient(transparent 62%, rgba(212, 145, 74, 0.16) 62%); padding: 0 2px; } /* ── 行動学 specialization callout (cream panel, blends with about-mv) ── */ .supervision-spec { position: relative; background: var(--bg-warm); border-radius: 10px; padding: clamp(40px, 5.5vw, 72px) clamp(28px, 5vw, 80px); overflow: hidden; } .supervision-spec__paw { position: absolute; width: 64px; height: 64px; display: block; pointer-events: none; user-select: none; opacity: 0.1; } .supervision-spec__paw svg { width: 100%; height: 100%; fill: var(--amber); display: block; } .supervision-spec__paw--tr { top: 18px; right: 22px; transform: rotate(14deg); } .supervision-spec__paw--bl { bottom: 18px; left: 22px; transform: rotate(-12deg); } @media (max-width: 767px) { .supervision-spec__paw { width: 42px; height: 42px; opacity: 0.08; } .supervision-spec__paw--tr { top: 14px; right: 14px; } .supervision-spec__paw--bl { bottom: 14px; left: 14px; } } .supervision-spec__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; } @media (max-width: 767px) { .supervision-spec__inner { grid-template-columns: 1fr; gap: clamp(18px, 3vw, 28px); } } .supervision-spec__label { font-family: 'Ubuntu', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.32em; color: var(--amber); padding-top: 12px; position: relative; margin-bottom: clamp(14px, 1.6vw, 22px); display: block; } .supervision-spec__label::before { content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--amber); } .supervision-spec__heading { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(20px, 2.3vw, 30px); font-weight: 800; letter-spacing: 0.04em; line-height: 1.65; color: var(--dark); } .supervision-spec__heading strong { font-weight: 800; color: var(--amber-deep); background: linear-gradient(transparent 65%, rgba(212, 145, 74, 0.22) 65%); padding: 0 4px; } .supervision-spec__body-col { padding-top: clamp(0px, 0.6vw, 8px); } .supervision-spec__body { font-size: clamp(14px, 1.1vw, 16px); line-height: 2.1; letter-spacing: 0.05em; color: var(--dark); } .supervision-spec__body strong { font-weight: 700; color: var(--dark); background: linear-gradient(transparent 62%, rgba(212, 145, 74, 0.18) 62%); padding: 0 2px; } .supervision-spec__body + .supervision-spec__body { margin-top: clamp(10px, 1.2vw, 16px); } /* ════════════════════════════════════════════════════════════ B2B SECTION (企業様へ / B2B PARTNERSHIP) ─ 3 reasons + 提携種類テーブル + オーディエンスデータ + Contact ─ セクション全体をクリーム背景にし、企業向けゾーンとして視覚的に分離 ════════════════════════════════════════════════════════════ */ .b2b-section { position: relative; padding: 0; background: var(--bg-warm); overflow: hidden; } .b2b-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); position: relative; } /* セクション ヘッダー（privacy.html の page-head と同じ意匠） */ .b2b-section__header { position: relative; padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 60px) clamp(56px, 7vw, 96px); margin: 0 calc(50% - 50vw) clamp(56px, 7vw, 96px); text-align: center; background: var(--bg-warm); overflow: hidden; isolation: isolate; } .b2b-section__header > * { position: relative; z-index: 2; } /* ── Paw scatter (decorative background) ── */ .b2b-section__paws { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .b2b-section__paw { position: absolute; color: var(--amber); width: clamp(40px, 7vw, 96px); height: auto; } .b2b-section__paw--a { top: 14%; left: 6%; transform: rotate(-18deg); opacity: 0.10; width: clamp(56px, 9vw, 120px); } .b2b-section__paw--b { top: 8%; right: 9%; transform: rotate(22deg); opacity: 0.08; width: clamp(36px, 5.5vw, 70px); } .b2b-section__paw--c { bottom: 12%; left: 14%; transform: rotate(8deg); opacity: 0.07; width: clamp(28px, 4.5vw, 58px); } .b2b-section__paw--d { bottom: 18%; right: 6%; transform: rotate(-26deg); opacity: 0.11; width: clamp(48px, 7.5vw, 96px); } .b2b-section__paw--e { top: 48%; left: 2%; transform: rotate(40deg); opacity: 0.06; width: clamp(24px, 3.5vw, 48px); } .b2b-section__paw--f { top: 52%; right: 3%; transform: rotate(-10deg); opacity: 0.06; width: clamp(22px, 3.2vw, 44px); } /* ── Subtle dot pattern overlay ── */ .b2b-section__header::before { content: ''; position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(rgba(212, 145, 74, 0.16) 1px, transparent 1px); background-size: 22px 22px; background-position: 0 0; mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 45%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 45%, transparent 75%); pointer-events: none; } @media (max-width: 599px) { .b2b-section__paw--c, .b2b-section__paw--e, .b2b-section__paw--f { display: none; } .b2b-section__header { padding: 48px 20px 36px; margin-bottom: 24px; } } .b2b-section__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 11px; letter-spacing: 0.32em; color: var(--amber); font-weight: 700; margin-bottom: 14px; } .b2b-section__eyebrow::after { content: ''; display: block; width: 24px; height: 1px; background: var(--amber); margin: 8px auto 0; } .b2b-section__heading { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: clamp(22px, 3vw, 34px); font-weight: 700; letter-spacing: 0.08em; color: var(--dark); line-height: 1.55; margin-bottom: 0; } .b2b-section__lead { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(14px, 1.1vw, 16px); line-height: 2; letter-spacing: 0.06em; color: var(--mid); max-width: 680px; margin-left: auto; margin-right: auto; } /* サブ block 共通: 全幅カラーバンド (cream ↔ white) */ .b2b-block { position: relative; padding: clamp(64px, 8vw, 112px) 0; } .b2b-block + .b2b-block { margin-top: 0; } /* 全幅 bg を inner の max-width を超えて延長する */ .b2b-block--white::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: #FFFFFF; z-index: 0; } .b2b-block > * { position: relative; z-index: 1; } .b2b-block__header { margin-bottom: clamp(36px, 4.5vw, 60px); text-align: center; } .b2b-block__eyebrow { font-family: 'Ubuntu', sans-serif; display: inline-block; font-size: 11px; letter-spacing: 0.32em; color: var(--amber); font-weight: 700; margin-bottom: 10px; } .b2b-block__eyebrow::after { content: ''; display: block; width: 24px; height: 1px; background: var(--amber); margin: 8px auto 0; } .b2b-block__heading { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; letter-spacing: 0.08em; color: var(--dark); line-height: 1.5; } .b2b-block__heading strong { color: var(--amber-deep); } /* ── 3つの理由: 縦並び numbered blocks ── */ .b2b-reasons { list-style: none; display: flex; flex-direction: column; border-top: 1px solid rgba(45, 40, 32, 0.12); } .b2b-reason { display: grid; grid-template-columns: clamp(76px, 9vw, 128px) 1fr; gap: clamp(20px, 3vw, 44px); padding: clamp(32px, 4.5vw, 56px) clamp(4px, 1.5vw, 16px); border-bottom: 1px solid rgba(45, 40, 32, 0.12); align-items: start; } @media (max-width: 599px) { .b2b-reason { grid-template-columns: 1fr; gap: 16px; padding: clamp(28px, 5vw, 36px) 0; } } .b2b-reason__num { font-family: 'Ubuntu', sans-serif; font-size: clamp(40px, 5.4vw, 68px); font-weight: 800; line-height: 1; color: var(--amber); letter-spacing: -0.01em; } .b2b-reason__num::after { content: ''; display: block; width: 28px; height: 2px; background: var(--amber); margin-top: clamp(12px, 1.4vw, 18px); } .b2b-reason__body { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 16px); } .b2b-reason__title { font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: 0.05em; line-height: 1.55; color: var(--dark); } .b2b-reason__title strong { background: linear-gradient(transparent 62%, rgba(212, 145, 74, 0.22) 62%); padding: 0 4px; color: var(--amber-deep); } .b2b-reason__desc { font-size: clamp(13px, 1.05vw, 15px); line-height: 2; letter-spacing: 0.04em; color: var(--dark); } .b2b-reason__desc + .b2b-reason__desc { margin-top: clamp(6px, 0.8vw, 10px); } .b2b-reason__desc em { font-style: normal; font-weight: 700; color: var(--amber-deep); } /* ── 提携の種類: editorial table (hairlines, no card) ── */ .b2b-partnership__table { width: 100%; border-collapse: collapse; font-size: clamp(13px, 1.05vw, 15px); } .b2b-partnership__table tr { border-bottom: 1px solid rgba(45, 40, 32, 0.1); } .b2b-partnership__table tr:first-child { border-top: 1px solid rgba(45, 40, 32, 0.1); } .b2b-partnership__table th { width: clamp(150px, 22vw, 260px); padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px) clamp(4px, 1.5vw, 12px); font-weight: 700; letter-spacing: 0.08em; color: var(--amber-deep); vertical-align: top; white-space: nowrap; text-align: left; line-height: 1.5; } .b2b-partnership__table td { padding: clamp(20px, 2.6vw, 30px) clamp(4px, 1.5vw, 12px) clamp(20px, 2.6vw, 30px) clamp(20px, 2.4vw, 32px); color: var(--dark); letter-spacing: 0.04em; line-height: 1.95; vertical-align: top; border-left: 1px solid rgba(45, 40, 32, 0.1); } @media (max-width: 599px) { .b2b-partnership__table thead, .b2b-partnership__table tbody, .b2b-partnership__table tr, .b2b-partnership__table th, .b2b-partnership__table td { display: block; width: 100%; } .b2b-partnership__table th { padding: 18px 0 6px 12px; white-space: normal; border-left: 3px solid var(--amber); border-bottom: none; } .b2b-partnership__table td { padding: 4px 0 18px 15px; border-left: 3px solid rgba(45, 40, 32, 0.12); border-bottom: none; } .b2b-partnership__table tr { border-bottom: 1px solid rgba(45, 40, 32, 0.1); padding: 8px 0; } .b2b-partnership__table tr:first-child { border-top: none; } } /* ── オーディエンスデータ: 4-cell stat grid + notes ── */ .b2b-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(45, 40, 32, 0.12); border-bottom: 1px solid rgba(45, 40, 32, 0.12); } @media (max-width: 767px) { .b2b-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 419px) { .b2b-stats { grid-template-columns: 1fr; } } .b2b-stat { padding: clamp(28px, 4vw, 44px) clamp(12px, 2vw, 24px); text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(10px, 1.2vw, 14px); } .b2b-stat + .b2b-stat { border-left: 1px solid rgba(45, 40, 32, 0.12); } @media (max-width: 767px) { .b2b-stat + .b2b-stat { border-left: none; } .b2b-stat:nth-child(2n) { border-left: 1px solid rgba(45, 40, 32, 0.12); } .b2b-stat:nth-child(n+3) { border-top: 1px solid rgba(45, 40, 32, 0.12); } } @media (max-width: 419px) { .b2b-stat:nth-child(2n) { border-left: none; } .b2b-stat + .b2b-stat { border-top: 1px solid rgba(45, 40, 32, 0.12); } } .b2b-stat__label { font-family: 'Ubuntu', sans-serif; font-size: 10px; letter-spacing: 0.22em; color: var(--amber); font-weight: 700; text-transform: uppercase; position: relative; padding-bottom: 8px; } .b2b-stat__label::after { content: ''; display: block; width: 18px; height: 1px; background: var(--amber); margin: 6px auto 0; } .b2b-stat__label-ja { display: block; font-family: 'Noto Sans JP', sans-serif; font-size: 11px; letter-spacing: 0.1em; color: var(--mid); font-weight: 500; margin-top: 4px; } .b2b-stat__value { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: var(--amber-deep); font-weight: 800; line-height: 1; } .b2b-stat__value-num { font-family: 'Ubuntu', sans-serif; font-size: clamp(38px, 5vw, 56px); letter-spacing: -0.02em; } /* ── NumberFlow-style digit roll animation ── */ .num-flow { display: inline-block; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: baseline; /* overflow:hidden 子要素は baseline が "bottom margin edge" になり 視覚的にディジットが上に浮く。0.15em 下げてユニット (万人) と グリフ底辺を揃える。 */ position: relative; top: 0.15em; } .num-flow__digit, .num-flow__static { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; } .num-flow__digit-track { display: block; transform: translateY(0); transition: transform 1.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .num-flow__digit-track > span { display: block; height: 1em; line-height: 1; } @media (prefers-reduced-motion: reduce) { .num-flow__digit-track { transition: none; } } .b2b-stat__value-unit { font-size: clamp(13px, 1.3vw, 17px); letter-spacing: 0.04em; font-weight: 700; margin-left: 2px; } .b2b-stat__value-plus { font-family: 'Ubuntu', sans-serif; font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; color: var(--amber); margin-left: 1px; } .b2b-stat__sub { font-size: clamp(11px, 0.95vw, 13px); letter-spacing: 0.04em; color: var(--mid); line-height: 1.55; } /* Notes below stats */ .b2b-audience-notes { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 0; } .b2b-audience-note { display: grid; grid-template-columns: clamp(120px, 14vw, 170px) 1fr; gap: clamp(12px, 1.8vw, 28px); font-size: clamp(12px, 1vw, 14px); line-height: 1.95; letter-spacing: 0.04em; color: var(--dark); padding: clamp(14px, 1.6vw, 20px) 0; border-bottom: 1px dashed rgba(45, 40, 32, 0.18); } .b2b-audience-note:first-child { border-top: 1px dashed rgba(45, 40, 32, 0.18); } .b2b-audience-note__label { font-weight: 700; color: var(--amber-deep); letter-spacing: 0.08em; font-size: clamp(11px, 0.95vw, 13px); padding-top: 4px; } @media (max-width: 599px) { .b2b-audience-note { grid-template-columns: 1fr; gap: 4px; } } /* ── お問い合わせ CTA ── */ .b2b-contact { text-align: center; } .b2b-contact__lead { font-size: clamp(13px, 1.1vw, 16px); line-height: 2; letter-spacing: 0.05em; color: var(--dark); margin-bottom: clamp(28px, 3.5vw, 40px); max-width: 640px; margin-left: auto; margin-right: auto; } .b2b-contact__cta-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.4vw, 18px); } .b2b-contact__cta { display: inline-flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); padding: clamp(16px, 1.8vw, 22px) clamp(28px, 4vw, 52px); background: var(--amber); color: #fff; border-radius: 100px; font-weight: 700; letter-spacing: 0.05em; transition: background 0.2s, transform 0.2s; } .b2b-contact__cta:hover { background: var(--amber-deep); transform: translateY(-1px); } .b2b-contact__cta-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .b2b-contact__cta-icon svg { width: 100%; height: 100%; display: block; } .b2b-contact__cta-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; gap: 2px; } .b2b-contact__cta-label { font-family: 'Ubuntu', sans-serif; font-size: 9px; letter-spacing: 0.28em; font-weight: 700; opacity: 0.78; } .b2b-contact__cta-email { font-family: 'Ubuntu', sans-serif; font-size: clamp(13px, 1.2vw, 17px); letter-spacing: 0.04em; font-weight: 700; } .b2b-contact__note { font-size: clamp(11px, 0.95vw, 13px); letter-spacing: 0.04em; color: var(--mid); line-height: 1.7; } /* ── スクロール連動フェードイン ── */ .js-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .js-reveal.is-visible { opacity: 1; transform: none; } /* ════════════════════════════════════════════════════════════ SITE FOOTER ════════════════════════════════════════════════════════════ */ .site-foot { background: var(--bg-warm); padding: clamp(48px, 6vw, 72px) var(--pad-x-page) clamp(28px, 3vw, 40px); } .site-foot__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 40px); } .site-foot__top { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); align-items: flex-start; justify-content: space-between; } .site-foot__brand { display: flex; align-items: center; gap: 14px; } .site-foot__brand svg { width: clamp(40px, 4vw, 52px); height: clamp(40px, 4vw, 52px); color: var(--amber); flex-shrink: 0; } .site-foot__brand-img { height: clamp(50px, 5vw, 64px); width: auto; display: block; flex-shrink: 0; } .site-foot__brand-text { display: flex; flex-direction: column; line-height: 1.15; } .site-foot__brand-name { font-family: 'Ubuntu', sans-serif; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: 0.32em; color: var(--dark); padding-left: 0.32em; } .site-foot__brand-sub { margin-top: 4px; font-size: 10px; letter-spacing: 0.24em; color: var(--mid); font-weight: 400; } .site-foot__legal { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 32px); align-items: center; } .site-foot__legal a { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--dark); padding: 4px 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .site-foot__legal a:hover { color: var(--amber); border-bottom-color: var(--amber); } .site-foot__bottom { padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgba(45, 40, 32, 0.1); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; } .site-foot__copy { font-family: 'Ubuntu', sans-serif; font-size: 10px; letter-spacing: 0.22em; color: var(--mid); text-transform: uppercase; } .site-foot__addr { font-size: 11px; letter-spacing: 0.06em; color: var(--mid); line-height: 1.7; } @media (max-width: 599px) { .site-foot__top { flex-direction: column; align-items: flex-start; } .site-foot__bottom { flex-direction: column; align-items: flex-start; } }