/* ARC-151: 日本語本文の可読性向上のため Noto Sans JP を自己ホストで採用。 */ /* 提供元: Google Fonts / ライセンス: SIL Open Font License 1.1(商用可・再配布可)。 */ /* 外部CDN・ホットリンクは使わず /assets/fonts/ 配下の woff2 を配信する(ARC-87方針)。 */ /* font-display: swap によりフォント読込中は下記フォールバックが即時表示される。 */ /* ARC-210: @font-face は build.py が「サイト用サブセット + 内容ハッシュURL」でへ */ /* 直接注入する(preload と src の最終URLを一致させ二重取得を無くすため)。ここには置かない。 */ :root { --c-bg: #ffffff; --c-bg-alt: #f5f7f9; --c-ink: #1b2733; --c-ink-soft: #4a5a6a; --c-line: #e1e7ec; --c-accent: #0f3d5e; --c-accent-2: #1c6e8c; --c-accent-soft: #e7f0f4; --c-amber: #f0a500; --radius: 10px; --maxw: 1080px; --shadow: 0 1px 2px rgba(16, 38, 56, .06), 0 8px 24px rgba(16, 38, 56, .06); --shadow-lg: 0 18px 50px rgba(16, 38, 56, .14); /* ARC-151: 先頭に Noto Sans JP を追加(自己ホスト)。未読込・非対応時は従来の */ /* システムフォントへフォールバックし、既存の見た目・ブランド感を保つ。 */ --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--c-ink); background: var(--c-bg); line-height: 1.8; font-size: 16px; -webkit-font-smoothing: antialiased; } /* ARC-258: フォーム要素はフォントを継承しない(UA既定フォントになる)ため明示的に継承させる。CJKフォントが無い閲覧環境では、UA既定フォントのままの日本語文言 (CONTACTの「文面をコピー」ボタン等)が豆腐(白い四角)で表示されてしまう。 */ button, input, select, textarea { font: inherit; } h1, h2, h3 { line-height: 1.4; color: var(--c-ink); } a { color: var(--c-accent-2); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .container.narrow { max-width: 820px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-accent); color: #fff; padding: 8px 16px; z-index: 100; } .skip-link:focus { left: 8px; top: 8px; } /* ---------- Icons (inline SVG, currentColor) ---------- */ .icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; flex: none; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--c-line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--c-ink); } .brand:hover { text-decoration: none; } .site-nav { display: flex; gap: 4px; align-items: center; } .site-nav a { color: var(--c-ink); font-size: 14px; font-weight: 600; letter-spacing: .03em; padding: 8px 12px; border-radius: 6px; } .site-nav a:hover { background: var(--c-bg-alt); text-decoration: none; } .site-nav a.active { color: var(--c-accent); } .site-nav a.active::after { content: ""; display: block; height: 2px; background: var(--c-accent); border-radius: 2px; margin-top: 2px; } .nav-toggle, .nav-toggle-label { display: none; } .nav-toggle:focus-visible + .nav-toggle-label { outline: 2px solid var(--c-accent-2); outline-offset: 4px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 8px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: .15s; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--c-accent); color: #fff; box-shadow: 0 6px 18px rgba(15, 61, 94, .22); } .btn-primary:hover { background: #0c3149; color: #fff; } .btn-primary:disabled { background: #9fb2bf; cursor: not-allowed; transform: none; box-shadow: none; } .btn-ghost { background: #fff; color: var(--c-accent); border-color: var(--c-line); } .btn-ghost:hover { background: var(--c-bg-alt); color: var(--c-accent); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(1200px 460px at 85% -20%, var(--c-accent-soft), transparent 62%), radial-gradient(680px 380px at 0% 120%, #eef6f9, transparent 60%), linear-gradient(180deg, #fbfdfe 0%, #ffffff 100%); border-bottom: 1px solid var(--c-line); } .hero-inner { padding: 64px 20px 60px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hero-copy { min-width: 0; } .hero-eyebrow { display: inline-block; color: var(--c-accent-2); font-weight: 700; font-size: 14px; letter-spacing: .08em; margin: 0 0 12px; padding: 6px 14px; background: var(--c-accent-soft); border-radius: 999px; } .hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 20px; letter-spacing: .01em; } .hero-lead { font-size: 17px; color: var(--c-ink-soft); max-width: 720px; margin: 0 0 28px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; } .hero-facts { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; padding-top: 24px; border-top: 1px solid var(--c-line); } .hero-facts div { display: flex; flex-direction: column; } .hero-facts dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-ink-soft); letter-spacing: .05em; } .hero-facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; } .fact-ic { display: inline-flex; color: var(--c-accent-2); } .fact-ic .icon { width: 16px; height: 16px; } .hero-visual { min-width: 0; display: flex; justify-content: center; } .hero-art { width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 24px 40px rgba(15, 61, 94, .14)); } /* ---------- Section ---------- */ .section { padding: 64px 0; } .section-alt { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .section-head { max-width: 720px; margin: 0 0 36px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--c-accent-2); font-weight: 700; font-size: 13px; letter-spacing: .12em; margin: 0 0 6px; } .section-head h2 { font-size: clamp(24px, 3.5vw, 32px); margin: 0 0 14px; } .section-lead { color: var(--c-ink-soft); margin: 0; } .section-more { margin-top: 28px; } .section-more a { font-weight: 700; } /* ---------- Service cards (home) ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .svc-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px; color: var(--c-ink); transition: .15s; } .svc-card:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-2px); border-color: #c7d6df; } .svc-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; margin-bottom: 16px; background: linear-gradient(135deg, var(--c-accent-soft), #f3f9fb); color: var(--c-accent); border: 1px solid #dcebf1; } .svc-ic .icon { width: 26px; height: 26px; } .svc-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--c-accent); } .svc-card p { margin: 0; color: var(--c-ink-soft); font-size: 15px; } .svc-card-more { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--c-accent-2); } /* ---------- Strengths ---------- */ .strength-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .strength { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 26px; } .strength-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 16px; background: var(--c-accent); color: #fff; box-shadow: 0 8px 18px rgba(15, 61, 94, .22); } .strength-ic .icon { width: 26px; height: 26px; } .strength h3 { margin: 0 0 10px; font-size: 18px; } .strength p { margin: 0; color: var(--c-ink-soft); font-size: 15px; } /* ---------- Page hero (sub pages) ---------- */ .page-hero { position: relative; overflow: hidden; background: radial-gradient(700px 300px at 88% -40%, #d7e9f0, transparent 60%), linear-gradient(180deg, var(--c-accent-soft), #ffffff); border-bottom: 1px solid var(--c-line); padding: 56px 0 44px; } .page-hero h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 14px; } .page-lead { color: var(--c-ink-soft); max-width: 760px; margin: 0; position: relative; } .page-hero .eyebrow { margin-bottom: 10px; } .eyebrow-ic { display: inline-flex; color: var(--c-accent-2); } .eyebrow-ic .icon { width: 18px; height: 18px; } .page-hero-art { position: absolute; right: -10px; top: -22px; color: #cfe2ea; opacity: .55; pointer-events: none; } .page-hero-art svg { width: 188px; height: 188px; stroke-width: 1.1; } /* ---------- Breadcrumb ---------- */ /* パンくず: コーポレートカラーの濃紺(#103a6b〜#0f3d5e)を背景アクセントに。文字は白〜淡色でコントラストを確保(WCAG AAA 相当)。 */ .breadcrumb { background: linear-gradient(180deg, #103a6b 0%, var(--c-accent) 100%); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; } .breadcrumb .container { padding-top: 12px; padding-bottom: 12px; } .breadcrumb a { color: rgba(255, 255, 255, .82); } .breadcrumb a:hover { color: #fff; text-decoration: underline; } .breadcrumb .sep { margin: 0 8px; color: rgba(255, 255, 255, .45); } .breadcrumb span[aria-current] { color: #fff; font-weight: 600; } /* ---------- Service detail ---------- */ .service-quick-section { padding: 38px 0 42px; background: #fff; border-bottom: 1px solid var(--c-line); } .service-quick-inner { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.7fr); gap: 34px; align-items: center; } .service-quick-head h2 { margin: 0 0 8px; color: var(--c-accent); font-size: clamp(21px, 2.5vw, 27px); } .service-quick-head p:last-child { margin: 0; color: var(--c-ink-soft); font-size: 14px; } .service-quick-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .service-quick-link { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 66px; padding: 11px 13px; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(16, 38, 56, .04); } .service-quick-link:hover { color: var(--c-accent); text-decoration: none; background: var(--c-accent-soft); border-color: rgba(28, 110, 140, .42); } .service-quick-link:focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; } .service-quick-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--c-accent); background: var(--c-accent-soft); border-radius: 8px; } .service-quick-ic .icon { width: 20px; height: 20px; } .service-quick-title { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.55; } .service-quick-arrow { color: var(--c-accent-2); font-size: 16px; font-weight: 800; } .svc-details { display: flex; flex-direction: column; gap: 28px; } .svc-detail { display: grid; grid-template-columns: 300px 1fr; gap: 28px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 30px; scroll-margin-top: 90px; transition: .15s; } .svc-detail:hover { box-shadow: var(--shadow); border-color: #c7d6df; } .svc-detail:target { border-color: var(--c-accent-2); box-shadow: 0 0 0 3px rgba(28, 110, 140, .14), var(--shadow); } .svc-detail-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; margin-bottom: 14px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color: #fff; box-shadow: 0 8px 18px rgba(15, 61, 94, .22); } .svc-detail-ic .icon { width: 28px; height: 28px; } .svc-detail-head h2 { font-size: 22px; margin: 0 0 12px; color: var(--c-accent); } .svc-detail-lead { color: var(--c-ink-soft); margin: 0; font-size: 15px; } .svc-detail-body h3 { font-size: 15px; margin: 0 0 12px; color: var(--c-ink-soft); letter-spacing: .04em; } .svc-consult { margin: 16px 0 0; padding: 14px 16px; background: var(--c-accent-soft); border-radius: 8px; font-size: 14px; } .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .check-list li { position: relative; padding-left: 26px; } .check-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 2px solid var(--c-accent-2); border-bottom: 2px solid var(--c-accent-2); transform: rotate(-45deg); } /* ---------- Works ---------- */ .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .work-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px; position: relative; transition: .15s; overflow: hidden; } .work-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); } .work-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #c7d6df; } .work-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c-accent-2); background: var(--c-accent-soft); padding: 4px 12px 4px 8px; border-radius: 999px; margin-bottom: 12px; } .work-tag-ic { display: inline-flex; } .work-tag-ic .icon { width: 15px; height: 15px; } .work-card h3 { margin: 0 0 10px; font-size: 17px; } .work-card p { margin: 0; color: var(--c-ink-soft); font-size: 14px; } .note-box { margin-top: 30px; background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 26px; position: relative; } .note-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px; background: #fff; color: var(--c-accent); border: 1px solid var(--c-line); } .note-ic .icon { width: 24px; height: 24px; } .note-box h2 { font-size: 19px; margin: 0 0 10px; } .note-box p { margin: 0; color: var(--c-ink-soft); } /* ---------- Company ---------- */ .company-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; } .company-msg-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; margin-bottom: 14px; background: var(--c-accent-soft); color: var(--c-accent); border: 1px solid #dcebf1; } .company-msg-ic .icon { width: 28px; height: 28px; } .company-message h2 { font-size: 22px; margin: 0 0 16px; } .company-message p { color: var(--c-ink-soft); } .company-table-wrap h2 { font-size: 19px; margin: 0 0 14px; } .company-table { width: 100%; border-collapse: collapse; font-size: 15px; } .company-table th, .company-table td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--c-line); } .company-table th { width: 120px; color: var(--c-ink-soft); font-weight: 700; white-space: nowrap; background: var(--c-bg-alt); } .access-box { margin-top: 36px; background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 26px; display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: center; } .access-ic { display: inline-flex; color: var(--c-accent-2); margin-bottom: 6px; } .access-ic .icon { width: 28px; height: 28px; } .access-box h2 { font-size: 19px; margin: 0 0 10px; } .access-box p { margin: 0; color: var(--c-ink-soft); } .access-map svg, .access-map iframe { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--c-line); display: block; } .access-map iframe { height: 320px; } /* ---------- FAQ ---------- */ .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; } .faq-item summary { cursor: pointer; list-style: none; padding: 18px 50px 18px 22px; font-weight: 700; position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "Q"; color: var(--c-accent-2); font-weight: 800; margin-right: 12px; } .faq-item summary::after { content: ""; position: absolute; right: 22px; top: 24px; width: 10px; height: 10px; border-right: 2px solid var(--c-accent-2); border-bottom: 2px solid var(--c-accent-2); transform: rotate(45deg); transition: .2s; } .faq-item[open] summary::after { transform: rotate(-135deg); } .faq-item p { margin: 0; padding: 0 22px 20px 56px; color: var(--c-ink-soft); font-size: 15px; } /* ARC-244: FAQ keyword and category filtering. */ .faq-filter[hidden], .faq-filter__empty[hidden], .faq-list[hidden], .faq-item[hidden] { display: none !important; } .faq-filter { display: grid; gap: 20px; margin-bottom: 28px; padding: clamp(20px, 4vw, 30px); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-alt); } .faq-filter__search { display: grid; gap: 8px; } .faq-filter__search label, .faq-filter__categories legend { color: var(--c-accent); font-weight: 700; } .faq-filter__search input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: var(--c-ink); font: inherit; } .faq-filter__search input:focus-visible, .faq-filter__category:focus-visible, .faq-filter__clear:focus-visible { outline: 3px solid var(--focus-ring-inner); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-ring-outer); } .faq-filter__categories { min-width: 0; margin: 0; padding: 0; border: 0; } .faq-filter__category-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .faq-filter__category, .faq-filter__clear { min-height: 44px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-accent); font: inherit; font-weight: 700; cursor: pointer; } .faq-filter__category { padding: 8px 16px; } .faq-filter__category[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent); color: #fff; } .faq-filter__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-filter__summary p { margin: 0; font-weight: 700; } .faq-filter__clear { padding: 8px 16px; } .faq-filter__clear:disabled { opacity: .5; cursor: default; } .faq-filter__empty { padding: 24px; border-radius: var(--radius); background: #fff; text-align: center; } .faq-filter__empty h2 { margin-bottom: 8px; font-size: 1.2rem; } .faq-filter__empty p { margin-bottom: 18px; color: var(--c-ink-soft); } @media (max-width: 520px) { .faq-filter__category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .faq-filter__category { width: 100%; padding-inline: 8px; } .faq-filter__summary { align-items: stretch; flex-direction: column; } .faq-filter__clear { align-self: flex-start; } } /* ---------- Contact ---------- */ .contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; } .contact-tel-box { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color: #fff; border-radius: var(--radius); padding: 22px 26px; margin-bottom: 30px; display: flex; align-items: center; gap: 18px; } .contact-tel-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 255, 255, .16); } .contact-tel-ic .icon { width: 28px; height: 28px; } .contact-tel-label { margin: 0 0 4px; font-size: 13px; opacity: .85; letter-spacing: .05em; } .contact-tel-num { margin: 0; font-size: 30px; font-weight: 800; } .contact-tel-num a { color: #fff; } .contact-tel-note { margin: 6px 0 0; font-size: 13px; opacity: .85; } .contact-main h2 { font-size: 20px; margin: 0 0 12px; } .contact-note { color: var(--c-ink-soft); font-size: 14px; background: #fff7e6; border: 1px solid #f0e0b8; border-radius: 8px; padding: 14px 16px; } .contact-form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 14px; font-weight: 700; } .field .req { color: #c0392b; font-size: 11px; margin-left: 6px; } .field input, .field textarea { font: inherit; padding: 11px 13px; border: 1px solid #c7d2da; border-radius: 8px; background: #fff; color: var(--c-ink); } .field input:focus, .field textarea:focus { outline: 2px solid var(--c-accent-2); border-color: var(--c-accent-2); } .contact-aside { background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px; } .contact-aside h2 { font-size: 17px; margin: 0 0 14px; } .contact-aside h2 + h2, .contact-aside .flow-list + h2 { margin-top: 26px; } .flow-list { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 14px; color: var(--c-ink-soft); font-size: 14px; } .flow-list li { display: flex; align-items: flex-start; gap: 12px; } .flow-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; margin-top: 2px; background: #fff; color: var(--c-accent); border: 1px solid var(--c-line); } .flow-ic .icon { width: 20px; height: 20px; } .flow-list li strong { color: var(--c-ink); } .aside-note { font-size: 13px; color: var(--c-ink-soft); margin: 18px 0 0; } /* ---------- CTA ---------- */ .cta { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); color: #fff; position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .06); } .cta::after { content: ""; position: absolute; left: -40px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .05); } .cta-inner { padding: 56px 20px; text-align: center; position: relative; } .cta h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; color: #fff; } .cta p { margin: 0 0 8px; opacity: .92; } .cta-tel { font-size: 22px; font-weight: 800; margin: 12px 0 22px !important; } .cta-tel a { color: #fff; } .cta .btn-primary { background: #fff; color: var(--c-accent); } .cta .btn-primary:hover { background: #eef3f6; color: var(--c-accent); } /* ---------- Footer ---------- */ .site-footer { background: #12222e; color: #c4d2dc; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; padding: 48px 20px 36px; } .footer-name { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px; } .footer-name span { font-size: 12px; font-weight: 400; opacity: .7; margin-left: 8px; } .footer-company p { margin: 6px 0; font-size: 14px; } .footer-addr { line-height: 1.7; } .footer-tel a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-head { font-weight: 700; color: #fff; margin: 0 0 12px; font-size: 14px; } .footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .footer-nav a { color: #c4d2dc; font-size: 14px; } .footer-nav a:hover { color: #fff; } .footer-bottom { border-top: 1px solid #243744; } .footer-bottom .container { padding-top: 16px; padding-bottom: 16px; } .footer-bottom small { color: #8aa0ad; font-size: 12px; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 28px; } .hero-visual { order: -1; max-width: 460px; margin: 0 auto; } .hero-art { max-width: 420px; } } @media (max-width: 860px) { .company-layout, .contact-layout { grid-template-columns: 1fr; gap: 28px; } .service-quick-inner { grid-template-columns: 1fr; gap: 22px; } .service-quick-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-detail { grid-template-columns: 1fr; gap: 18px; } .access-box { grid-template-columns: 1fr; gap: 20px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 720px) { .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .nav-toggle-label { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; padding: 10px; } .nav-toggle-label span { display: block; height: 2px; background: var(--c-ink); border-radius: 2px; transition: .2s; } .site-nav { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--c-line); padding: 8px 12px 16px; gap: 2px; box-shadow: var(--shadow); display: none; } .nav-toggle:checked ~ .site-nav { display: flex; } .site-nav a { padding: 12px 10px; } .site-nav a.active::after { display: none; } .hero-inner { padding: 44px 20px 40px; } .hero-facts { gap: 18px; } .contact-tel-box { flex-direction: row; } .page-hero-art svg { width: 140px; height: 140px; } } @media (max-width: 480px) { .service-quick-section { padding: 32px 0 36px; } .service-quick-nav { grid-template-columns: 1fr; gap: 8px; } .service-quick-link { min-height: 58px; padding: 9px 11px; } .contact-tel-box { gap: 12px; padding: 20px 18px; } .contact-tel-ic { width: 44px; height: 44px; border-radius: 10px; } .contact-tel-num { font-size: 26px; line-height: 1.35; white-space: nowrap; } } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover, .svc-card:hover, .work-card:hover, .svc-detail:hover { transform: none; } } /* ---------- Generated photo assets (ARC-1660) ---------- */ /* ヒーロー: 生成画像を額装した上品なカード。既存のレイアウト(.hero-visual)に内包する */ .hero-figure { position: relative; margin: 0; width: 100%; max-width: 560px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .6); } .hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 768; object-fit: cover; } .hero-figcap { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; background: rgba(15, 61, 94, .82); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 8px 14px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hero-figcap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-amber); flex: none; } /* サービス: 領域がひとつにつながることを示すワンポイント画像 */ .svc-showcase { margin: 0 0 26px; padding: 22px; background: linear-gradient(135deg, var(--c-accent-soft), #f3f9fb); border: 1px solid #dcebf1; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .svc-showcase img { display: block; width: 100%; max-width: 540px; height: auto; filter: drop-shadow(0 18px 34px rgba(15, 61, 94, .16)); } .svc-showcase figcaption { margin: 0; color: var(--c-accent); font-weight: 700; font-size: 15px; text-align: center; } /* CTA/相談導線: 相談の温度感が出る打ち合わせ画像を併置 */ .cta-inner--media { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; text-align: left; } .cta-media { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .35); } .cta-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .cta-inner--media .cta-copy h2, .cta-inner--media .cta-tel { text-align: left; } @media (max-width: 960px) { .hero-figure { max-width: 460px; margin: 0 auto; } } @media (max-width: 860px) { .cta-inner--media { grid-template-columns: 1fr; gap: 24px; text-align: center; } .cta-media { max-width: 480px; margin: 0 auto; order: -1; } .cta-inner--media .cta-copy h2, .cta-inner--media .cta-tel { text-align: center; } } /* ---------- Premium design brush-up (ARC-1709) ---------- */ :root { --c-bg: #fbfaf7; --c-bg-alt: #f3f0ea; --c-ink: #18202a; --c-ink-soft: #58616c; --c-line: #ddd6c8; --c-accent: #173247; --c-accent-2: #6d8b93; --c-accent-soft: #edf2f1; --c-amber: #b88950; --radius: 8px; --maxw: 1180px; --shadow: 0 1px 0 rgba(24, 32, 42, .03), 0 18px 42px rgba(24, 32, 42, .08); --shadow-lg: 0 24px 70px rgba(24, 32, 42, .16); } :where(body, h1, h2, h3, p, a, small, strong, span, dt, dd, summary, label, button, input, textarea, .eyebrow, .hero-eyebrow, .site-nav a) { letter-spacing: 0; } body { background: linear-gradient(180deg, #fbfaf7 0%, #ffffff 42%, #f8f6f1 100%); color: var(--c-ink); } h1, h2, h3 { font-weight: 650; } a { color: var(--c-accent); } .container { padding-inline: 24px; } .site-header { background: rgba(251, 250, 247, .9); border-bottom: 1px solid rgba(87, 75, 57, .16); box-shadow: 0 10px 34px rgba(24, 32, 42, .05); } .header-inner { height: 76px; gap: 20px; } .brand { gap: 14px; } .site-nav { gap: 2px; } .site-nav a { border-radius: 6px; color: #38424d; font-size: 13px; padding: 10px 12px; } .site-nav a:hover { background: rgba(184, 137, 80, .1); } .site-nav a.active { color: var(--c-accent); } .site-nav a.active::after { background: var(--c-amber); height: 1px; } .btn { border-radius: 6px; min-height: 48px; padding: 13px 24px; box-shadow: none; } .btn-primary { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 16px 34px rgba(23, 50, 71, .18); } .btn-primary:hover { background: #0f2435; } .btn-ghost { background: rgba(255, 255, 255, .72); border-color: rgba(87, 75, 57, .24); color: var(--c-accent); } .btn-ghost:hover { background: #fff; } .hero { background: linear-gradient(90deg, rgba(184, 137, 80, .1) 1px, transparent 1px), linear-gradient(180deg, #f8f5ef 0%, #ffffff 58%, #fbfaf7 100%); background-size: 72px 72px, auto; border-bottom: 1px solid rgba(87, 75, 57, .14); } .hero-inner { grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); gap: 62px; padding: 92px 24px 86px; } .hero-copy { position: relative; } .hero-copy::before { content: ""; position: absolute; left: -22px; top: 6px; width: 1px; height: 104px; background: linear-gradient(180deg, var(--c-amber), transparent); } .hero-eyebrow, .eyebrow { background: transparent; border-radius: 0; color: var(--c-amber); display: inline-flex; font-size: 13px; font-weight: 700; margin-bottom: 14px; padding: 0; } .hero h1 { font-size: 40px; line-height: 1.42; margin-bottom: 24px; max-width: 700px; text-wrap: balance; } .hero-lead, .section-lead, .page-lead { color: var(--c-ink-soft); line-height: 2; } .hero-lead { font-size: 17px; max-width: 700px; } .hero-actions { gap: 12px; margin-bottom: 34px; } .hero-facts { background: rgba(255, 255, 255, .66); border: 1px solid rgba(87, 75, 57, .14); border-radius: 8px; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 20px; } .hero-facts div { padding-inline: 18px; } .hero-facts div + div { border-left: 1px solid rgba(87, 75, 57, .14); } .hero-facts dt { color: #69727b; font-size: 12px; } .hero-facts dd { color: var(--c-ink); font-size: 16px; overflow-wrap: normal; word-break: keep-all; } .hero-facts dd a { white-space: nowrap; } .fact-ic { color: var(--c-amber); } .hero-figure { background: #fff; border: 1px solid rgba(87, 75, 57, .16); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 10px; } .hero-figure::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .46); border-radius: 5px; pointer-events: none; z-index: 1; } .hero-figure::after { content: ""; position: absolute; inset: 10px; background: linear-gradient(180deg, rgba(23, 50, 71, 0) 48%, rgba(23, 50, 71, .28) 100%); border-radius: 5px; pointer-events: none; z-index: 1; } .hero-photo { border-radius: 5px; filter: saturate(.86) contrast(1.04) brightness(.98); } .hero-figcap { background: rgba(251, 250, 247, .92); border: 1px solid rgba(184, 137, 80, .32); border-radius: 6px; bottom: 24px; color: var(--c-accent); font-size: 13px; left: 24px; padding: 9px 12px; z-index: 2; } .hero-figcap-dot { background: var(--c-amber); } .section { padding: 86px 0; } .section-alt { background: linear-gradient(180deg, #f3f0ea 0%, #f8f6f1 100%); border-color: rgba(87, 75, 57, .14); } .section-head { margin-bottom: 42px; max-width: 780px; } .section-head h2, .page-hero h1 { font-size: 32px; line-height: 1.45; } .section-head h2 { margin-bottom: 16px; } .svc-showcase { align-items: center; background: #fff; border: 1px solid rgba(87, 75, 57, .15); border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 34px; padding: 26px; } .svc-showcase img { filter: saturate(.9) drop-shadow(0 24px 46px rgba(24, 32, 42, .12)); max-width: 590px; } .svc-showcase figcaption { color: var(--c-accent); font-size: 14px; } .svc-grid, .work-grid, .strength-grid { gap: 20px; } .svc-card, .strength, .work-card, .faq-item, .note-box, .contact-aside, .svc-detail, .access-box { border-color: rgba(87, 75, 57, .15); border-radius: 8px; box-shadow: none; } .svc-card, .strength, .work-card { background: rgba(255, 255, 255, .9); } .svc-card { padding: 28px; } .svc-card::before { display: none; } .svc-card:hover, .strength:hover, .work-card:hover, .svc-detail:hover { border-color: rgba(184, 137, 80, .34); box-shadow: var(--shadow); transform: translateY(-2px); } .svc-ic { background: #f5f1ea; border-color: rgba(184, 137, 80, .24); border-radius: 8px; color: var(--c-accent); height: 46px; width: 46px; } .svc-card h3, .svc-detail-head h2 { color: var(--c-accent); } .svc-card p, .strength p, .work-card p, .faq-item p { line-height: 1.9; } .svc-card-more, .section-more a { color: var(--c-accent); } .strength { padding: 30px; } .strength::after { display: none; } .strength-ic { background: #fff; border: 1px solid rgba(184, 137, 80, .28); border-radius: 8px; box-shadow: none; color: var(--c-amber); } .work-card::before { background: var(--c-amber); width: 3px; } .work-tag { background: #f5f1ea; border-radius: 6px; color: var(--c-accent); } .faq-item summary { padding-block: 20px; } .faq-item summary::before, .faq-item summary::after { color: var(--c-amber); } .cta { background: linear-gradient(135deg, #172433 0%, #203a45 100%); } .cta::before, .cta::after { display: none; } .cta-inner { padding-block: 68px; } .cta h2 { font-size: 30px; } .cta .btn-primary { background: #fbfaf7; border-color: #fbfaf7; color: var(--c-accent); } .cta .btn-primary:hover { background: #efe8dc; } .cta-media { border-color: rgba(255, 255, 255, .24); border-radius: 8px; } .cta-media img { filter: saturate(.86) contrast(1.04); } .site-footer { background: #121a23; } .footer-bottom { border-top-color: rgba(255, 255, 255, .08); } .page-hero { background: linear-gradient(90deg, rgba(184, 137, 80, .1) 1px, transparent 1px), linear-gradient(180deg, #f8f5ef 0%, #ffffff 100%); background-size: 72px 72px, auto; border-color: rgba(87, 75, 57, .14); } .page-hero-art { color: rgba(184, 137, 80, .22); } .contact-tel-box { background: linear-gradient(135deg, #172433 0%, #203a45 100%); border-radius: 8px; } @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-block: 64px 62px; } .hero-visual { order: 0; } .hero h1 { font-size: 36px; } } @media (max-width: 720px) { .container { padding-inline: 18px; } .header-inner { height: 70px; } .site-nav { background: #fbfaf7; top: 70px; } .hero-inner { padding-block: 46px 50px; } .hero-copy::before { display: none; } .hero h1 { font-size: 31px; line-height: 1.42; } .hero-lead { font-size: 16px; } .hero-actions .btn { width: 100%; } .hero-facts { grid-template-columns: 1fr; padding: 16px; } .hero-facts div { padding: 10px 0; } .hero-facts div + div { border-left: 0; border-top: 1px solid rgba(87, 75, 57, .14); } .hero-figcap { bottom: 18px; left: 18px; right: 18px; justify-content: center; } .section { padding: 64px 0; } .section-head h2, .page-hero h1 { font-size: 28px; } .svc-showcase { padding: 18px; } .cta h2 { font-size: 26px; } } /* ---------- Corporate blue adjustment (ARC-12) ---------- */ /* コーポレートカラー=青を主軸に。深い青を軸、ロゴ由来の水色を細いハイライト、黄色をごく小さなポイントに限定する。高級感(余白・落ち着き・上質さ)は維持し、 premium-brushup の暖色(ベージュ/ブロンズ)基調をクールな青系ニュートラルへ寄せる。制約: letter-spacing は 0 / 角丸は 8px 以下 / 丸い光・orb 系の装飾は追加しない。 */ :root { --c-bg: #f6f9fc; --c-bg-alt: #eef3f8; --c-ink: #15202c; --c-ink-soft: #51616f; --c-line: #d7e1ec; --c-accent: #123a6b; /* 深い青(主軸・信頼感) */ --c-accent-2: #2b7bb9; /* 明るめの青(リンク・二次アクセント) */ --c-accent-soft: #e9f1fa; /* 淡い青(ソフト塗り) */ --c-cyan: #36a8db; /* ロゴ由来の水色(細いハイライト) */ --c-amber: #f2b50d; /* ロゴ由来の黄色(ごく小さなポイントのみ) */ } /* 背景: 暖色クリーム → クールな青寄りオフホワイト(余白の落ち着きは維持) */ body { background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 46%, #f2f7fb 100%); } a { color: var(--c-accent-2); } /* ヘッダー / ナビ */ .site-header { background: rgba(246, 249, 252, .9); border-bottom: 1px solid rgba(18, 58, 107, .14); box-shadow: 0 10px 34px rgba(18, 40, 70, .06); } .site-nav a:hover { background: rgba(43, 123, 185, .1); } .site-nav a.active::after { background: var(--c-cyan); } /* 水色の細いハイライト */ /* ARC-12: ヘッダーは正式支給ロゴPNGをそのまま表示する */ .brand { flex: none; line-height: 0; min-width: 0; max-width: calc(100vw - 112px); } .brand-logo { display: block; flex: none; width: 224px; height: auto; max-width: 100%; max-height: 48px; aspect-ratio: 1000 / 210; object-fit: contain; } /* ボタン(深い青はそのまま変数経由で反映) */ .btn-ghost { border-color: rgba(18, 58, 107, .22); } /* ヒーロー: 暖色グリッド → 青の細いグリッド(orb なし) */ .hero { background: linear-gradient(90deg, rgba(43, 123, 185, .09) 1px, transparent 1px), linear-gradient(180deg, #eef5fc 0%, #ffffff 58%, #f6f9fc 100%); background-size: 72px 72px, auto; border-bottom: 1px solid rgba(18, 58, 107, .12); } .hero-copy::before { background: linear-gradient(180deg, var(--c-cyan), transparent); /* 水色の縦ライン */ } /* アイブロウ: 青文字。ヒーローのみロゴ由来の小さな黄ドットを 1 点だけ添える */ .hero-eyebrow, .eyebrow { color: var(--c-accent-2); } .hero-eyebrow { align-items: center; } .hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-amber); margin-right: 9px; flex: none; } /* ヒーローのファクト枠 */ .hero-facts { border-color: rgba(18, 58, 107, .12); } .hero-facts div + div { border-left-color: rgba(18, 58, 107, .12); } .fact-ic { color: var(--c-accent-2); } /* ヒーロー画像: 枠は青系、トーンを少しクールに、上に水色ハイライト・下に青オーバーレイ */ .hero-figure { border-color: rgba(18, 58, 107, .16); } .hero-photo { filter: saturate(.82) contrast(1.05) brightness(.98); } .hero-figure::after { background: linear-gradient(180deg, rgba(54, 168, 219, .14) 0%, rgba(54, 168, 219, 0) 26%), linear-gradient(180deg, rgba(18, 42, 80, 0) 46%, rgba(15, 38, 74, .34) 100%); } .hero-figcap { background: rgba(246, 249, 252, .92); border-color: rgba(54, 168, 219, .42); color: var(--c-accent); } .hero-figcap-dot { background: var(--c-amber); } /* ロゴの黄を小ポイントで */ /* セクション背景 */ .section-alt { background: linear-gradient(180deg, #eef3f8 0%, #f4f8fc 100%); border-color: rgba(18, 58, 107, .12); } /* カード/パネル: 暖色ボーダー → クールな青系(角丸 8px は維持) */ .svc-showcase { border-color: rgba(18, 58, 107, .14); } .svc-card, .strength, .work-card, .faq-item, .note-box, .contact-aside, .svc-detail, .access-box { border-color: rgba(18, 58, 107, .12); } .svc-card:hover, .strength:hover, .work-card:hover, .svc-detail:hover { border-color: rgba(43, 123, 185, .4); } /* サービスアイコン: 青のソフト塗り */ .svc-ic { background: linear-gradient(135deg, var(--c-accent-soft), #f1f7fd); border-color: rgba(43, 123, 185, .22); color: var(--c-accent); } /* 強みアイコン: 青ストロークで一目で青と分かる */ .strength-ic { border-color: rgba(43, 123, 185, .3); color: var(--c-accent-2); } /* 実績カードの縦バー: 黄 → 水色→深い青のグラデ */ .work-card::before { background: linear-gradient(180deg, var(--c-cyan), var(--c-accent)); width: 3px; } .work-tag { background: var(--c-accent-soft); color: var(--c-accent); } /* FAQ マーカー */ .faq-item summary::before, .faq-item summary::after { color: var(--c-accent-2); } /* CTA / 連絡先 box: ダークスレート → 深い青グラデ(一目で青) */ .cta { background: linear-gradient(135deg, #103a6b 0%, #1f6aa8 100%); } .contact-tel-box { background: linear-gradient(135deg, #103a6b 0%, #1f6aa8 100%); } .cta .btn-primary { background: #f5f9fd; border-color: #f5f9fd; color: var(--c-accent); } .cta .btn-primary:hover { background: #e4eefa; } .cta-media img { filter: saturate(.86) contrast(1.04); } /* フッター: 黒に近い色 → 深い青ネイビー */ .site-footer { background: #0e2742; } /* サブページ見出し背景: 青の細いグリッド */ .page-hero { background: linear-gradient(90deg, rgba(43, 123, 185, .09) 1px, transparent 1px), linear-gradient(180deg, #eef5fc 0%, #ffffff 100%); background-size: 72px 72px, auto; border-color: rgba(18, 58, 107, .12); } .page-hero-art { color: rgba(43, 123, 185, .18); } /* モバイルナビ背景もクール側へ */ @media (max-width: 900px) { .nav-toggle-label { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; padding: 10px; flex: none; } .nav-toggle-label span { display: block; height: 2px; background: var(--c-ink); border-radius: 2px; transition: .2s; } .site-nav { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #f6f9fc; border-bottom: 1px solid var(--c-line); padding: 8px 12px 16px; gap: 2px; box-shadow: var(--shadow); display: none; } .nav-toggle:checked ~ .site-nav { display: flex; } .site-nav a { padding: 12px 10px; } .site-nav a.active::after { display: none; } } @media (max-width: 720px) { .brand { max-width: calc(100vw - 98px); } .brand-logo { width: 174px; max-height: 38px; } .site-nav { background: #f6f9fc; top: 70px; } } @media (max-width: 360px) { .brand-logo { width: 158px; max-height: 34px; } } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hero--premium-poster { color: #f7fbff; background: linear-gradient(90deg, rgba(96, 184, 231, .08) 1px, transparent 1px), linear-gradient(180deg, rgba(96, 184, 231, .07) 1px, transparent 1px), linear-gradient(135deg, #061827 0%, #0d2f57 54%, #10233d 100%); background-size: 88px 88px, 88px 88px, auto; border-bottom: 0; } .hero--premium-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(54, 168, 219, .24), transparent 32%), linear-gradient(300deg, rgba(242, 181, 13, .13), transparent 30%); pointer-events: none; } .hero--premium-poster .hero-premium-inner { display: block; padding-block: 108px 102px; } .hero-poster { position: relative; z-index: 1; margin: 0; overflow: hidden; border: 1px solid rgba(169, 217, 245, .26); border-radius: 8px; background: #071827; /* ARC-15 v6 padding: keep the supplied hero intact, but give it a calmer mat. */ padding: 34px; box-shadow: 0 34px 90px rgba(0, 10, 24, .36); } .hero-poster::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; pointer-events: none; } .hero-poster-image { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 900; object-fit: cover; border-radius: 4px; } .hero-copy--premium { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 42px 64px; align-items: end; margin-top: 68px; } .hero-copy--premium::before { display: none; } .hero--premium-poster .hero-eyebrow { grid-column: 1 / -1; width: fit-content; max-width: 100%; margin: 0; padding: 7px 12px; color: #bfe9ff; background: rgba(247, 251, 255, .10); border: 1px solid rgba(169, 217, 245, .24); border-radius: 6px; white-space: normal; overflow-wrap: anywhere; } .hero--premium-poster .hero-lead { color: rgba(247, 251, 255, .82); line-height: 1.95; margin: 0; } .hero--premium-poster .hero-actions { justify-content: flex-end; gap: 16px; margin: 0; } .hero--premium-poster .btn-primary { background: #f2b50d; border-color: #f2b50d; color: #09213b; box-shadow: 0 18px 34px rgba(0, 0, 0, .24); } .hero--premium-poster .btn-primary:hover { background: #ffca34; color: #09213b; } .hero--premium-poster .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(169, 217, 245, .36); color: #f7fbff; } .hero--premium-poster .btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; } .hero--premium-poster .hero-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 24px 0 0; padding: 0; overflow: hidden; border: 1px solid rgba(169, 217, 245, .24); border-radius: 8px; background: rgba(8, 28, 49, .58); box-shadow: 0 24px 60px rgba(0, 0, 0, .18); } .hero--premium-poster .hero-facts div { padding: 28px 32px; } .hero--premium-poster .hero-facts div + div { border-left: 1px solid rgba(169, 217, 245, .18); } .hero--premium-poster .hero-facts dt { color: rgba(247, 251, 255, .68); } .hero--premium-poster .hero-facts dd, .hero--premium-poster .hero-facts dd a { color: #f7fbff; } .hero--premium-poster .fact-ic { color: #7fd6ff; } @media (max-width: 960px) { .hero--premium-poster .hero-premium-inner { padding-block: 86px 88px; } .hero--premium-poster .hero-poster { padding: 28px; } .hero-copy--premium { grid-template-columns: 1fr; align-items: start; gap: 38px; margin-top: 56px; } .hero--premium-poster .hero-actions { justify-content: flex-start; gap: 14px; } } @media (max-width: 720px) { .hero--premium-poster .hero-premium-inner { padding-block: 72px 82px; padding-inline: 32px; } .hero--premium-poster .hero-poster { aspect-ratio: 900 / 675; padding: 20px; } .hero--premium-poster .hero-poster picture { display: block; width: 100%; height: 100%; } .hero--premium-poster .hero-poster-image { aspect-ratio: 900 / 675; height: 100%; } .hero-copy--premium { margin-top: 50px; gap: 36px; } .hero--premium-poster .hero-actions .btn { width: 100%; } .hero--premium-poster .hero-facts { grid-template-columns: 1fr; } .hero--premium-poster .hero-facts div { padding: 24px 24px; } .hero--premium-poster .hero-facts div + div { border-left: 0; border-top: 1px solid rgba(169, 217, 245, .18); } } /* ---------- ARC-19 generated visual polish ---------- */ .svc-showcase img { aspect-ratio: 1024 / 683; border-radius: 6px; max-width: 720px; object-fit: cover; object-position: center; } .visual-section { overflow: hidden; } .visual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .visual-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: rgba(255, 255, 255, .94); border: 1px solid rgba(18, 58, 107, .14); border-radius: 8px; box-shadow: 0 18px 42px rgba(18, 40, 70, .08); } .visual-card-media { margin: 0; aspect-ratio: 1024 / 683; overflow: hidden; background: #071827; } .visual-card-media img, .visual-split-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.05) brightness(.98); } .visual-card-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 22px; } .visual-card-tag { margin: 0 0 10px; color: var(--c-accent-2); font-size: 12px; font-weight: 800; } .visual-card h3 { margin: 0 0 10px; color: var(--c-accent); font-size: 18px; } .visual-card p { overflow-wrap: anywhere; } .visual-card-body > p:last-child { margin: 0; color: var(--c-ink-soft); font-size: 14px; line-height: 1.9; } .visual-split { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 34px; align-items: center; min-width: 0; padding: 18px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(18, 58, 107, .14); border-radius: 8px; box-shadow: 0 18px 42px rgba(18, 40, 70, .08); } .visual-split--reverse { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); } .visual-split--reverse .visual-split-media { order: 2; } .visual-split-media { margin: 0; min-width: 0; width: 100%; max-width: 720px; aspect-ratio: 1024 / 683; overflow: hidden; background: #071827; border-radius: 6px; } .visual-split-copy { min-width: 0; padding: 8px 10px; } .visual-split-copy h2 { margin: 0 0 14px; color: var(--c-accent); font-size: 30px; line-height: 1.45; } .visual-split-copy p { margin: 0 0 18px; color: var(--c-ink-soft); line-height: 1.95; overflow-wrap: anywhere; } .service-wide { max-width: 1200px; } .service-wide-media { margin: 0; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; background: #edf5fb; border-radius: 8px; } .service-wide-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.94) contrast(1.03) brightness(.99); } .service-wide-copy { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 38px; align-items: start; margin-top: 30px; } .service-wide-heading, .service-wide-text { min-width: 0; } .service-wide-heading h2 { margin: 0; color: var(--c-accent); font-size: 31px; line-height: 1.45; } .service-wide-text p { margin: 0 0 18px; color: var(--c-ink-soft); line-height: 1.95; overflow-wrap: anywhere; } /* HOME 提供サービス: 白い土台パネルを外し、横幅を活かしたワイド画像を主役にする(ARC-21) */ .service-wide--home .section-head { max-width: 820px; } .home-services-media { margin: 0; aspect-ratio: 2 / 1; } .home-services-media img { filter: saturate(.98) contrast(1.02); } .home-services-caption { margin: 18px 0 0; color: var(--c-accent); font-weight: 700; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; } .svc-grid--wide { margin-top: 34px; } .visual-point-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--c-ink); } .visual-point-list li { position: relative; min-width: 0; padding-left: 24px; overflow-wrap: anywhere; } .visual-point-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 2px; background: linear-gradient(90deg, var(--c-cyan), var(--c-accent-2)); border-radius: 2px; } .works-visual { margin-bottom: 32px; } .cta-media img { aspect-ratio: 1024 / 683; object-position: center 52%; } @media (max-width: 960px) { .visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .visual-split, .visual-split--reverse { grid-template-columns: 1fr; gap: 24px; } .visual-split--reverse .visual-split-media { order: 0; } .visual-split-media { margin-inline: auto; } .visual-split-copy h2 { font-size: 28px; } .service-wide-copy { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; } .service-wide-heading h2 { font-size: 28px; } } @media (max-width: 640px) { .visual-grid { grid-template-columns: 1fr; } .visual-card-media, .visual-split-media { aspect-ratio: 1024 / 683; } .visual-card-body { padding: 20px; } .visual-split { padding: 14px; } .visual-split-copy { padding: 4px 2px 2px; } .visual-split-copy h2 { font-size: 25px; } .service-wide { padding-inline: 14px; } .service-wide-media { aspect-ratio: 16 / 9; border-radius: 7px; } .service-wide-copy { gap: 18px; margin-top: 22px; } .service-wide-heading h2 { font-size: 25px; } .home-services-caption { font-size: 14px; margin-top: 14px; } .svc-grid--wide { margin-top: 26px; } } /* ---------- WORKS cards with thumbnails (ARC-24) ---------- */ /* 各対応領域カードにサムネイル画像を追加。画像は理解補助で、見出し・本文の */ /* テキストは残す。トーンは既存の青系コーポレートに合わせる。 */ .work-grid--media { grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 20px; } .work-card--media { padding: 0; display: flex; flex-direction: column; overflow: hidden; } .work-card-media { margin: 0; line-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-accent); border-bottom: 1px solid var(--c-line); } .work-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; } .work-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; } .work-card--media .work-tag { margin-bottom: 10px; } .work-card--media h3 { margin: 0 0 8px; font-size: 17px; color: var(--c-accent); } .work-card--media p { margin: 0; color: var(--c-ink-soft); font-size: 14px; } .works-point-list { max-width: 760px; margin: 26px auto 0; } /* ARC-24: Works冒頭のプロダクトコラージュ(リッチなWebPビジュアル) */ .works-board-section { padding-bottom: 0; } .works-board { margin: 0; border-radius: 14px; overflow: hidden; line-height: 0; background: var(--c-accent); box-shadow: 0 28px 60px rgba(18, 40, 70, .18); } .works-board img { display: block; width: 100%; height: auto; } .works-board-cap { max-width: 820px; margin: 18px auto 0; color: var(--c-ink-soft); font-size: 14px; line-height: 1.9; text-align: center; } @media (max-width: 560px) { .work-grid--media { grid-template-columns: 1fr; } .works-board { border-radius: 10px; } .works-board-cap { text-align: left; } } /* ---------- Visitor-type guidance band (ARC-27) ---------- */ /* 顧客(発注検討)・採用候補・取引先(協業)の3者に向けた導線カード。 */ /* 既存の青系コーポレートトーン(角丸8px / letter-spacing 0 / orb 装飾なし)に合わせ、 */ /* トップから SERVICE / WORKS / COMPANY / CONTACT へ最短で案内する。 */ .audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .audience-card { display: flex; flex-direction: column; min-width: 0; background: rgba(255, 255, 255, .94); border: 1px solid rgba(18, 58, 107, .12); border-radius: 8px; padding: 28px; box-shadow: 0 18px 42px rgba(18, 40, 70, .08); transition: .15s; } .audience-card:hover { border-color: rgba(43, 123, 185, .4); box-shadow: var(--shadow); transform: translateY(-2px); } .audience-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 8px; background: linear-gradient(135deg, var(--c-accent-soft), #f1f7fd); border: 1px solid rgba(43, 123, 185, .22); color: var(--c-accent); } .audience-ic .icon { width: 26px; height: 26px; } .audience-label { margin: 0 0 8px; color: var(--c-accent-2); font-size: 12px; font-weight: 800; } .audience-card h3 { margin: 0 0 10px; color: var(--c-accent); font-size: 19px; } .audience-body { margin: 0; color: var(--c-ink-soft); font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; } .audience-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 18px; } .audience-link { font-size: 14px; font-weight: 700; color: var(--c-accent-2); } .audience-link--primary { color: var(--c-accent); } .audience-link:hover { text-decoration: underline; } @media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr; gap: 16px; } .audience-card { padding: 24px; } } /* ARC-151 本掲載候補(v1.2 editorial): トップ「お客様の声」枠の再現ケース。既存の */ /* section / card 系トーンに合わせ、引用符・一人称推薦は使わず、画像(再現イメージ)＋ */ /* 利用シーン＋見出し＋説明文の情報階層で「サービス利用場面の再現ケース」を示す。 */ /* 実在の顧客情報・発言は載せない。各画像に見えるキャプションで再現イメージを明示する。 */ .voices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .voice-card { display: flex; flex-direction: column; min-width: 0; margin: 0; background: rgba(255, 255, 255, .94); border: 1px solid rgba(18, 58, 107, .12); border-radius: 8px; overflow: hidden; box-shadow: 0 18px 42px rgba(18, 40, 70, .08); transition: .15s; } .voice-card:hover { border-color: rgba(43, 123, 185, .4); box-shadow: var(--shadow); transform: translateY(-2px); } /* 事例カード上部の 3:2 編集写真。ARC-151 #11278: 梅本さん指示で画面上の */ /* 「再現イメージ(AI生成)」バッジ/キャプションは削除(画像 alt・台帳は内部に維持)。 */ .voice-media { margin: 0; aspect-ratio: 3 / 2; background: var(--c-bg-alt); } .voice-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .voice-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 24px 28px 28px; } .voice-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .voice-no { color: var(--c-accent-2); font-size: 12px; font-weight: 800; letter-spacing: .08em; } .voice-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #fff7e6; border: 1px solid #f0e0b8; /* #11220: 11px の小文字は WCAG AA 4.5:1 が必要。#9a6b00 は 4.40:1 で不足のため */ /* #946300(背景 #fff7e6 に対し 4.87:1)へ変更し AA を満たす。 */ color: #946300; font-size: 11px; font-weight: 700; white-space: nowrap; } .voice-situation { display: inline-flex; align-self: flex-start; margin: 0 0 12px; padding: 3px 10px; border-radius: 6px; background: var(--c-accent-soft); color: var(--c-accent); font-size: 12px; font-weight: 700; } .voice-title { margin: 0 0 10px; color: var(--c-ink); font-size: 17px; font-weight: 700; line-height: 1.55; } .voice-desc { margin: 0; color: var(--c-ink-soft); font-size: 14px; line-height: 1.9; } .voices-note { display: flex; gap: 10px; margin: 26px 0 0; padding: 16px 18px; background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: 8px; color: var(--c-ink-soft); font-size: 13.5px; line-height: 1.9; } .voices-note-ic { flex: 0 0 auto; display: inline-flex; color: var(--c-accent-2); margin-top: 2px; } .voices-note-ic .icon { width: 18px; height: 18px; } @media (max-width: 900px) { .voices-grid { grid-template-columns: 1fr; gap: 16px; } .voice-body { padding: 22px 24px 24px; } } /* ARC-96: Contact 種別別入口カード内の「書き添える内容例」。 */ /* 新規パーツは増やさず、既存の audience-card / check-list を組み合わせる。 */ .contact-entry-eg { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(18, 58, 107, .1); } .contact-entry-eg-label { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: var(--c-accent-2); } .contact-entry-eg .check-list { gap: 7px; } .contact-entry-eg .check-list li { font-size: 14px; line-height: 1.7; color: var(--c-ink-soft); } /* ARC-196: 種別別のメール作成CTA。既存の .btn/.btn-primary と .audience-actions を */ /* 再利用し、カード末尾に等幅で配置。アイコン間隔・折返し・フォーカス表示のみ最小追加。 */ .contact-entry-cta { width: 100%; gap: 8px; text-align: center; white-space: normal; } .contact-entry-cta .btn-ic { width: 18px; height: 18px; flex: none; } .contact-entry-cta:focus-visible { outline: 2px solid var(--c-accent-2); outline-offset: 3px; } /* =========================================================================== ARC-66 フルリニューアル層承認済みのシステム開発業向け方向性をベースに、コーポレートサイトとしての厚みを出す。既存の青系コーポレートトーン(深い青 #123a6b / 水色 / 黄の小ポイント、角丸 8px 前後、letter-spacing 0)を踏襲する。新規セクション: 信頼バンド(stats) / 進め方(process) / 採用導線(recruit)。 =========================================================================== */ /* アンカー(#recruit 等)がヘッダーに隠れないよう余白を確保 */ [id] { scroll-margin-top: 92px; } /* ---------- Stats band(ダークヒーローに重ねて浮かせる信頼バンド) ---------- */ .stats-section { position: relative; z-index: 3; margin-top: -46px; padding: 0; } .stats-band { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 26px 64px rgba(18, 40, 70, .18); overflow: hidden; } .stat { padding: 26px 28px; min-width: 0; border-left: 1px solid var(--c-line); } .stat:first-child { border-left: 0; } .stat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 0; color: var(--c-accent); font-size: 34px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; } .stat-unit { font-size: 15px; font-weight: 700; color: var(--c-accent-2); } .stat-label { margin: 9px 0 0; color: var(--c-ink-soft); font-size: 13px; line-height: 1.65; } /* ---------- Process(ご相談〜運用までの進め方) ---------- */ .process-section { background: linear-gradient(180deg, #f4f9fd 0%, #ffffff 100%); } .process-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 18px; } .process-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 26px 22px 24px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(18, 58, 107, .12); border-radius: 10px; box-shadow: 0 14px 36px rgba(18, 40, 70, .06); transition: .15s; } .process-step:hover { border-color: rgba(43, 123, 185, .4); box-shadow: var(--shadow); transform: translateY(-2px); } .process-num { color: var(--c-cyan); font-size: 13px; font-weight: 800; letter-spacing: .12em; } .process-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(135deg, var(--c-accent-soft), #f1f7fd); border: 1px solid rgba(43, 123, 185, .22); color: var(--c-accent); } .process-ic .icon { width: 24px; height: 24px; } .process-text h3 { margin: 2px 0 6px; color: var(--c-accent); font-size: 16px; } .process-text p { margin: 0; color: var(--c-ink-soft); font-size: 13.5px; line-height: 1.85; overflow-wrap: anywhere; } /* ---------- Recruit band(採用導線・ダークで一目立たせる) ---------- */ .recruit-section { position: relative; overflow: hidden; padding: 78px 0; background: linear-gradient(90deg, rgba(96, 184, 231, .07) 1px, transparent 1px), linear-gradient(135deg, #0e2742 0%, #123a6b 56%, #1f6aa8 100%); background-size: 84px 84px, auto; color: #eaf3fb; } .recruit-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: center; } .recruit-copy .eyebrow { color: #7fd6ff; } .recruit-copy h2 { margin: 0 0 16px; color: #fff; font-size: clamp(23px, 3vw, 30px); line-height: 1.5; } .recruit-lead { margin: 0 0 26px; color: rgba(234, 243, 251, .86); line-height: 1.95; } .recruit-actions { display: flex; flex-wrap: wrap; gap: 14px; } .recruit-actions .btn-primary { background: var(--c-amber); border-color: var(--c-amber); color: #09213b; box-shadow: 0 16px 32px rgba(0, 0, 0, .2); } .recruit-actions .btn-primary:hover { background: #ffca34; color: #09213b; } .recruit-actions .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(169, 217, 245, .4); color: #f7fbff; } .recruit-actions .btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; } .recruit-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .recruit-points li { position: relative; padding-left: 30px; color: #eaf3fb; font-size: 15px; line-height: 1.7; } .recruit-points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--c-cyan); border-bottom: 2px solid var(--c-cyan); transform: rotate(-45deg); } @media (max-width: 900px) { .recruit-inner { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 760px) { .stats-section { margin-top: -30px; } .stats-band { grid-template-columns: 1fr 1fr; } .stat { border-top: 1px solid var(--c-line); } .stat:nth-child(-n+2) { border-top: 0; } .stat:nth-child(odd) { border-left: 0; } .stat-value { font-size: 30px; } .recruit-section { padding: 60px 0; } .recruit-actions .btn { width: 100%; } } @media (max-width: 440px) { .stats-section { margin-top: 0; padding-top: 34px; } .stats-band { grid-template-columns: 1fr; } .stat { border-left: 0; border-top: 1px solid var(--c-line); } .stat:first-child { border-top: 0; } } /* =========================================================================== ARC-69: 承認済みトップページデザイン案ベースの実装梅本さんOK済みのデザイン案(ネイビー×ブルーの技術系ヒーロー+技術UIイメージ、「私たちの強み」4カード、「サービス」4カード)にトップページを揃える。ロゴは正式PNG(/assets/arc-corporate-logo.png)のまま。ここでは色・構成のみ調整。 =========================================================================== */ :root { --c-bg: #ffffff; --c-bg-alt: #f2f6fb; --c-ink: #16233b; --c-ink-soft: #4d5d75; --c-line: #dde5f0; --c-accent: #0e2a55; /* ネイビー(主軸) */ --c-accent-2: #2563eb; /* ブルー(アクセント) */ --c-accent-soft: #e8f0fc; --c-cyan: #38bdf8; --c-navy-deep: #0b1f42; } body { background: #ffffff; } /* ---------- ヘッダー: 白背景+右端CONTACTボタン(承認案) ---------- */ .site-header { background: #ffffff; border-bottom: 1px solid #e6ecf4; box-shadow: 0 2px 14px rgba(13, 42, 85, .06); } .site-nav a { font-weight: 600; color: #24344f; } .site-nav a:hover { background: rgba(37, 99, 235, .08); } .site-nav a.active { color: var(--c-accent-2); } .site-nav a.active::after { background: var(--c-accent-2); } .site-nav .nav-contact { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding: 10px 20px; background: var(--c-navy-deep); color: #ffffff; border-radius: 8px; font-weight: 700; letter-spacing: .04em; } .site-nav .nav-contact:hover { background: #17376e; color: #ffffff; } .site-nav .nav-contact.active { color: #ffffff; } .site-nav .nav-contact::after { display: none; } .nav-contact-ic { width: 16px; height: 16px; flex: none; } /* ---------- ヒーロー(承認案: 濃紺→青のグラデ+左コピー+右技術UI) ---------- */ .hero-design { position: relative; overflow: hidden; color: #ffffff; background: radial-gradient(900px 480px at 88% -12%, rgba(59, 130, 246, .45), transparent 62%), radial-gradient(700px 420px at -8% 110%, rgba(37, 99, 235, .32), transparent 60%), linear-gradient(116deg, #081c3e 0%, #0b2757 52%, #12429c 100%); /* 人物写真の撤去(ARC-83)に伴い、断ち切り前提の下パディング28px(ARC-79)をやめて上下バランスの取れた余白へ戻す */ padding: 64px 0 56px; } .hero-design::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(148, 190, 255, .05) 1px, transparent 1px), linear-gradient(180deg, rgba(148, 190, 255, .04) 1px, transparent 1px); background-size: 84px 84px; pointer-events: none; } .hero-design::after { content: ""; position: absolute; right: -140px; bottom: -190px; width: 480px; height: 480px; background: linear-gradient(135deg, rgba(56, 189, 248, .42), rgba(37, 99, 235, .10)); transform: rotate(45deg); border-radius: 48px; pointer-events: none; } .hero-design .container.hero-design-inner { max-width: 1280px; display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 53%); gap: 36px; align-items: center; position: relative; z-index: 1; } .hero-design-title { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.45; font-weight: 800; letter-spacing: .01em; color: #ffffff; } .hero-design-sub { margin: 22px 0 34px; font-size: clamp(15px, 1.5vw, 19px); line-height: 2; font-weight: 600; color: #d9e6fb; } .hero-design-actions { display: flex; flex-wrap: wrap; gap: 16px; } .btn-hero { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: 10px; font-size: 16px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn-hero:hover { text-decoration: none; transform: translateY(-1px); } .btn-hero--primary { background: linear-gradient(92deg, #2563eb 0%, #3f8cf9 100%); color: #ffffff; box-shadow: 0 12px 30px rgba(20, 70, 160, .5); } .btn-hero--primary:hover { color: #ffffff; box-shadow: 0 14px 34px rgba(20, 70, 160, .62); } .btn-hero--ghost { background: #ffffff; color: #10305f; box-shadow: 0 10px 26px rgba(6, 20, 46, .35); } .btn-hero--ghost:hover { color: #10305f; background: #f2f7ff; } .btn-hero-arrow { font-weight: 800; } /* ヒーロー右: 技術UIコンポジション(ダッシュボード/コード/フロー/ボード)。人物写真は撤去(ARC-83)。写真が占めていた高さを詰め、下段のフロー/ボードを下辺アンカーにして4パネルで密度を保つ(間延び防止)。 */ .hero-tech-wrap { min-width: 0; } .hero-tech-meta { display: flex; align-items: center; gap: 12px; margin: 0 4px 12px; color: #d9e6fb; } .hero-tech-label { flex: none; padding: 5px 9px; border: 1px solid rgba(147, 197, 253, .42); border-radius: 999px; background: rgba(30, 64, 125, .48); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1.4; } .hero-tech-note { margin: 0; color: #c7d9f4; font-size: 11px; line-height: 1.6; } .hero-tech { position: relative; width: 100%; aspect-ratio: 640 / 430; min-width: 0; font-family: var(--font); } .hv-panel { position: absolute; border-radius: 12px; box-shadow: 0 24px 54px rgba(3, 12, 32, .5); } .hv-panel-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #cfe0fb; letter-spacing: .03em; } /* ダッシュボード */ .hv-dash { left: 0; top: 3%; width: 46%; z-index: 2; padding: 14px 16px 12px; background: rgba(10, 30, 60, .92); border: 1px solid rgba(120, 170, 255, .28); backdrop-filter: blur(4px); } .hv-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .hv-stat { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: rgba(20, 48, 92, .65); border: 1px solid rgba(120, 170, 255, .2); } .hv-stat-label { font-size: 10px; color: #9db8e2; line-height: 1.5; } .hv-stat-value { font-size: 15px; font-weight: 800; color: #ffffff; line-height: 1.4; } .hv-stat-delta { font-size: 10px; font-weight: 700; color: #4ade80; line-height: 1.4; } .hv-dash-sub { margin: 0 0 4px; font-size: 10px; color: #9db8e2; } .hv-chart { display: block; width: 100%; height: auto; } .hv-chart-x { display: flex; justify-content: space-between; padding: 2px 2px 0; } .hv-chart-x span { font-size: 9px; color: #7e9cc9; line-height: 1.4; } /* コードエディタ */ .hv-code { right: 0; top: 0; width: 53%; z-index: 1; background: #0a1526; border: 1px solid rgba(120, 170, 255, .22); overflow: hidden; } .hv-code-tabs { display: flex; gap: 2px; background: #0d1c33; border-bottom: 1px solid rgba(120, 170, 255, .16); padding: 6px 8px 0; } .hv-tab { padding: 6px 12px 7px; font-size: 10.5px; color: #7e9cc9; border-radius: 6px 6px 0 0; } .hv-tab--on { background: #0a1526; color: #dbe7fb; border: 1px solid rgba(120,170,255,.16); border-bottom: 0; } .hv-code-body { margin: 0; padding: 10px 12px 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 1px; font-size: 10.5px; line-height: 1.75; overflow: hidden; } .hv-ln { color: #3d5a85; text-align: right; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; } .hv-lc { color: #c7d7f2; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: pre; } .hv-lc .k { color: #7aa2f7; } .hv-lc .t { color: #f0c674; } .hv-lc .fn { color: #5fd7d0; } .hv-lc .s { color: #e08fae; } /* API / データ連携フロー */ .hv-flow { left: 0; bottom: 4%; /* 写真撤去後は下辺基準で据える(高さ変動でも下に空白を作らない) */ width: 46%; z-index: 3; padding: 12px 14px 10px; background: rgba(8, 24, 48, .95); border: 1px solid rgba(120, 170, 255, .28); } .hv-flow-svg { display: block; width: 100%; height: auto; } .hv-node rect { fill: rgba(30, 64, 120, .55); stroke: #4f7fd9; stroke-width: 1; } .hv-node text { fill: #d6e4fb; font-size: 9px; font-weight: 600; text-anchor: middle; } .hv-node--sub rect { fill: rgba(16, 42, 84, .5); stroke: #38bdf8; } .hv-arrow path { fill: none; stroke: #6fa2e8; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .hv-arrow--dash path { stroke-dasharray: 3 3; stroke: #4f7fd9; } /* プロダクト計画ボード */ .hv-board { right: 0; bottom: 0; /* 写真撤去後の最下段。コード下端に少し重ねて奥行きを維持 */ width: 52%; z-index: 5; padding: 12px 14px 14px; background: #ffffff; border: 1px solid #dbe4f0; color: var(--c-ink); } .hv-board-title { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: #1c2f52; } .hv-board-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .hv-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hv-col-h { margin: 0 0 2px; font-size: 9.5px; font-weight: 700; color: #6a7ea3; border-bottom: 2px solid #e3ebf7; padding-bottom: 4px; } .hv-chip { font-size: 9px; line-height: 1.5; padding: 5px 7px; border-radius: 6px; border: 1px solid #d8e2f2; background: #f7faff; color: #33455f; } .hv-chip--done { border-color: #b9e3c9; background: #effaf3; color: #1e7a45; } /* チーム作業風景写真(.hv-photo)は梅本さん指示により撤去(ARC-83) */ /* ---------- セクション見出し(中央+青ライン。承認案) ---------- */ .section-head--center { max-width: 760px; margin: 0 auto 40px; text-align: center; } .section-head--center h2 { font-size: clamp(24px, 3.2vw, 32px); } .section-head--center h2::after { content: ""; display: block; width: 54px; height: 3px; border-radius: 2px; background: var(--c-accent-2); margin: 14px auto 0; } /* ---------- 私たちの強み: 4カード横並び(承認案) ---------- */ .strengths-section { padding: 72px 0 64px; background: #ffffff; } .strength-grid--quad { grid-template-columns: repeat(4, 1fr); gap: 18px; } .strength-grid--quad .strength { border: 1px solid #dbe4f0; border-radius: 12px; padding: 24px 22px; box-shadow: 0 4px 16px rgba(13, 42, 85, .05); } .strength-grid--quad .strength-ic { width: 46px; height: 46px; border-radius: 10px; background: #edf3fd; color: var(--c-accent-2); } .strength-grid--quad .strength h3 { font-size: 16.5px; color: #16233b; } .strength-grid--quad .strength p { font-size: 13.5px; line-height: 1.9; } /* ---------- サービス: 4カード横並び(承認案) ---------- */ .services-section { background: linear-gradient(180deg, #f2f6fb 0%, #eef4fb 100%); border-top: 1px solid #e3ebf6; border-bottom: 1px solid #e3ebf6; padding: 72px 0; } .svc-pill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .svc-pill { display: flex; align-items: center; gap: 12px; min-width: 0; background: #ffffff; border: 1px solid #dbe4f0; border-radius: 12px; padding: 20px 18px; box-shadow: 0 4px 16px rgba(13, 42, 85, .05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .svc-pill:hover { text-decoration: none; transform: translateY(-2px); border-color: #a9c3ec; box-shadow: 0 10px 26px rgba(13, 42, 85, .12); } .svc-pill-ic { flex: none; color: var(--c-accent-2); display: inline-flex; } .svc-pill-ic .icon { width: 26px; height: 26px; } .svc-pill-label { font-size: 15px; font-weight: 700; color: #16233b; line-height: 1.5; } .svc-pill-arrow { margin-left: auto; color: #93a9cf; font-size: 20px; font-weight: 700; } .svc-pill-note { margin: 26px 0 0; text-align: center; font-size: 14px; color: var(--c-ink-soft); } /* ---------- 下層トーン合わせ(最低限) ---------- */ .hero-eyebrow::before { display: none; } .cta { background: linear-gradient(116deg, #0a2452 0%, #12429c 100%); } /* ---------- レスポンシブ(ヒーロー/強み/サービス) ---------- */ @media (max-width: 1100px) { .strength-grid--quad { grid-template-columns: repeat(2, 1fr); } .svc-pill-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .site-nav .nav-contact { margin-left: 0; justify-content: center; } .hero-design .container.hero-design-inner { grid-template-columns: 1fr; gap: 40px; } .hero-design { padding: 52px 0 64px; } } @media (max-width: 640px) { .strength-grid--quad { grid-template-columns: 1fr; } .svc-pill-grid { grid-template-columns: 1fr; } .hero-design-actions { flex-direction: column; align-items: stretch; } .btn-hero { justify-content: center; } .hero-tech-meta { align-items: flex-start; flex-direction: column; gap: 7px; margin: 0 0 12px; } .hero-tech-note { font-size: 11.5px; } /* モバイルはダッシュボード+計画ボードのみの簡易コンポジション(写真は撤去済み。ARC-83) */ .hero-tech { aspect-ratio: auto; display: grid; gap: 14px; grid-template-columns: 1fr; } .hv-panel { position: static; width: auto; } .hv-code, .hv-flow { display: none; } .hv-board { order: 2; } } @media (min-width: 641px) and (max-width: 900px) { .hero-tech { max-width: 640px; margin: 0 auto; } } /* =========================================================================== ARC-71 全ページ品質仕上げ層梅本さん承認のキャプチャ方針(濃紺×青・技術UI感)をトップだけでなく下層ページ(SERVICE/WORKS/COMPANY/FAQ/CONTACT/404)へ展開する。あわせて問い合わせフォームの状態表示(エラー/完了)と、PoC相談例画像の視認性(暗すぎ補正)を整える。既存規則の上書きは末尾追記のカスケードで行う。 =========================================================================== */ /* ---------- 下層ヒーロー: 濃紺→青グラデ+薄グリッド(承認案トーン) ---------- */ .page-hero { background: radial-gradient(760px 360px at 90% -20%, rgba(59, 130, 246, .42), transparent 62%), radial-gradient(520px 300px at -6% 120%, rgba(37, 99, 235, .30), transparent 60%), linear-gradient(116deg, #081c3e 0%, #0b2757 55%, #10387f 100%); border-bottom: 0; padding: 58px 0 52px; } .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(148, 190, 255, .06) 1px, transparent 1px), linear-gradient(180deg, rgba(148, 190, 255, .05) 1px, transparent 1px); background-size: 84px 84px; pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .page-hero h1 { color: #ffffff; } .page-hero .eyebrow { color: #9cc0f7; } .page-hero .eyebrow-ic { color: var(--c-cyan); } .page-lead { color: #d9e6fb; } .page-hero-art { color: rgba(148, 190, 255, .34); opacity: 1; } /* パンくず帯とヒーローを連続した濃紺面として見せる */ .breadcrumb { background: linear-gradient(180deg, #071a39 0%, #081c3e 100%); border-bottom: 1px solid rgba(148, 190, 255, .14); } /* ---------- お問い合わせフォーム: 状態表示・実動化(ARC-71) ---------- */ .contact-lead-note { margin: 0 0 14px; color: var(--c-ink-soft); font-size: 15px; } .field-error { margin: 0; font-size: 13px; font-weight: 700; color: #c0392b; } .field--invalid input, .field--invalid textarea { border-color: #d64545; background: #fff8f8; } .field--invalid input:focus, .field--invalid textarea:focus { outline-color: #d64545; } .form-status { border: 1px solid; border-radius: 10px; padding: 18px 20px; margin: 0 0 18px; } .form-status strong { display: block; font-size: 17px; } .form-status p { margin: 8px 0 0; font-size: 14px; line-height: 1.9; } .form-status--ok { background: #eefaf3; border-color: #b9e6c9; color: #14532d; } .form-status--ok a { color: #14532d; font-weight: 700; } .form-status--ng { background: #fdf1f1; border-color: #f0c4c4; color: #7f1d1d; } .form-status--ng a { color: #7f1d1d; font-weight: 700; } .contact-form .form-status--ng { margin: 4px 0 2px; } .contact-form .btn-submit { border: 0; cursor: pointer; padding: 14px 24px; font-size: 16px; font-weight: 700; background: linear-gradient(90deg, var(--c-accent-2) 0%, #3b82f6 100%); box-shadow: 0 10px 24px rgba(37, 99, 235, .28); } .contact-form .btn-submit:hover { background: linear-gradient(90deg, #1d4ed8 0%, #2f74f0 100%); } .contact-form .btn-submit:disabled { background: #9db4d8; cursor: progress; transform: none; box-shadow: none; } .form-note { margin: 4px 0 0; font-size: 13px; color: var(--c-ink-soft); } /* ---------- WORKS: PoC相談例の静止画が暗すぎるため表示時に輝度補正 ---------- */ .visual-card--research .visual-card-media img { filter: brightness(2.2) contrast(1.08) saturate(1.05); } /* ---------- アクセス地図の枠をカードトーンに統一 ---------- */ .access-map iframe { border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 10px 26px rgba(13, 42, 85, .10); } /* ---------- 下層ヒーローのモバイル調整 ---------- */ @media (max-width: 640px) { .page-hero { padding: 44px 0 40px; } .page-hero-art svg { width: 132px; height: 132px; } } /* =========================================================================== ARC-161 ホーム画面ラグジュアリー・リファイン層 --------------------------------------------------------------------------- 既存の濃紺×青ブランド・構成・コピー・方向性は一切変えず、殺風景さを解消して「上質で力強い企業サイト」へ昇華する。手段は CSS の光/線/面/影/余白のみ (新規画像は生成・追加しない)。すべて末尾カスケードの追記で、影響範囲は HOME()に限定する。既存トークン(--c-accent 濃紺 / --c-accent-2 青 / --c-cyan / --c-amber)を用い、過剰装飾・派手なグラデ乱用は避ける。 prefers-reduced-motion・コントラスト・フォーカス表示に配慮する。 =========================================================================== */ /* --- 追加トークン(HOMEスコープの微調整用) --- */ .page-home { --lux-shadow-card: 0 1px 2px rgba(14, 42, 85, .05), 0 10px 30px rgba(14, 42, 85, .07); --lux-shadow-hover: 0 2px 4px rgba(14, 42, 85, .07), 0 22px 48px rgba(14, 42, 85, .16); --lux-line: linear-gradient(90deg, var(--c-accent-2), var(--c-cyan)); } /* ---------- ① セクションのリズムと奥行き(白面の平板さを解消) ---------- */ /* 明るい面が続く箇所に、ごく淡い光のにじみと1本の細い区切りで階層を与える。 */ .page-home .strengths-section { position: relative; background: radial-gradient(920px 400px at 90% -12%, rgba(37, 99, 235, .055), transparent 60%), radial-gradient(720px 360px at -6% 112%, rgba(56, 189, 248, .05), transparent 62%), #ffffff; } .page-home .works-section { position: relative; background: radial-gradient(860px 380px at 8% -10%, rgba(37, 99, 235, .05), transparent 60%), #ffffff; } .page-home .voices-section { position: relative; background: radial-gradient(900px 420px at 92% 0%, rgba(56, 189, 248, .06), transparent 62%), linear-gradient(180deg, #f7fafe 0%, #ffffff 46%); } /* セクションの継ぎ目に、髪の毛のように細い青のライン(奥行きの合図)。 */ .page-home .strengths-section::before, .page-home .works-section::before, .page-home .voices-section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1080px, 92%); height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .28), transparent); pointer-events: none; } /* ---------- ② 見出しの品格(エディトリアルなアクセント) ---------- */ .page-home .section-head h2, .page-home .section-head--center h2 { letter-spacing: .015em; } /* 左寄せ見出しのアイブロウに、先頭の短いグラデ・バーを添える。 */ .page-home .section-head .eyebrow { align-items: center; } .page-home .section-head:not(.section-head--center) .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--lux-line); } /* 中央見出しの下線を、光点を持つグラデ・バーへ格上げ。 */ .page-home .section-head--center h2::after { width: 64px; height: 3px; background: var(--lux-line); box-shadow: 0 0 0 4px rgba(37, 99, 235, .08); } /* ---------- ③ ヒーロー: 光と精度を足して力強さを底上げ ---------- */ .page-home .hero-design { background: radial-gradient(960px 520px at 88% -12%, rgba(59, 130, 246, .5), transparent 62%), radial-gradient(720px 440px at -8% 112%, rgba(37, 99, 235, .34), transparent 60%), radial-gradient(520px 520px at 50% 130%, rgba(56, 189, 248, .16), transparent 60%), linear-gradient(116deg, #071a3b 0%, #0b2757 52%, #123ea0 100%); } /* ヒーロー下辺に、発光する細いブランドライン(下のセクションへの橋渡し)。 */ .page-home .hero-design::after { /* 既存の回転スクエア(奥行き用)は残しつつ、区切り線は box-shadow で表現。 */ box-shadow: 0 0 90px 30px rgba(56, 189, 248, .12); } .page-home .hero-design-inner { z-index: 1; } .page-home .hero-design-title { letter-spacing: .02em; text-shadow: 0 2px 18px rgba(4, 14, 38, .45); } .page-home .hero-design-sub { color: #dbe8fd; } /* 技術UIコンポジションの背後に柔らかな発光を敷き、浮遊感を出す。 */ .page-home .hero-tech::before { content: ""; position: absolute; inset: -6% -4% -10% -6%; z-index: 0; background: radial-gradient(60% 60% at 62% 40%, rgba(56, 189, 248, .22), transparent 70%), radial-gradient(55% 55% at 30% 78%, rgba(37, 99, 235, .2), transparent 72%); filter: blur(6px); pointer-events: none; } /* CTAボタンの存在感を精密化(発光と質感)。 */ .page-home .btn-hero--primary { background: linear-gradient(92deg, #2563eb 0%, #4f97ff 100%); box-shadow: 0 14px 34px rgba(20, 70, 160, .55), inset 0 1px 0 rgba(255, 255, 255, .28); } .page-home .btn-hero--primary:hover { box-shadow: 0 18px 42px rgba(24, 90, 200, .66), inset 0 1px 0 rgba(255, 255, 255, .34); } .page-home .btn-hero--ghost { box-shadow: 0 12px 30px rgba(6, 20, 46, .38); } .page-home .btn-hero .btn-hero-arrow { transition: transform .18s ease; } .page-home .btn-hero:hover .btn-hero-arrow { transform: translateX(3px); } /* ---------- ④ カード群の統一的な格上げ(境界・影・ホバーの精度) ---------- */ /* 「強み」4カード: 上端に現れるアクセント線 + 深い浮き。アイコンは濃紺→青のグラデ。 */ .page-home .strength-grid--quad .strength { position: relative; overflow: hidden; border-color: #e0e8f4; box-shadow: var(--lux-shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .page-home .strength-grid--quad .strength::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lux-line); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .page-home .strength-grid--quad .strength:hover { transform: translateY(-4px); border-color: #bcd0ef; box-shadow: var(--lux-shadow-hover); } .page-home .strength-grid--quad .strength:hover::before { transform: scaleX(1); } .page-home .strength-grid--quad .strength-ic { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); color: #ffffff; box-shadow: 0 10px 22px rgba(20, 70, 160, .28); } /* 「サービス」ピル: 左のアクセント + アイコンチップ強調 + 矢印スライド。 */ .page-home .svc-pill { position: relative; overflow: hidden; border-color: #e0e8f4; box-shadow: var(--lux-shadow-card); } .page-home .svc-pill::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lux-line); transform: scaleY(0); transform-origin: top; transition: transform .25s ease; } .page-home .svc-pill:hover { box-shadow: var(--lux-shadow-hover); } .page-home .svc-pill:hover::before { transform: scaleY(1); } .page-home .svc-pill-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-accent-soft), #f3f8ff); border: 1px solid #dbe6f8; color: var(--c-accent-2); transition: background .2s ease, color .2s ease, border-color .2s ease; } .page-home .svc-pill:hover .svc-pill-ic { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); border-color: transparent; color: #ffffff; } .page-home .svc-pill-arrow { transition: transform .18s ease, color .18s ease; } .page-home .svc-pill:hover .svc-pill-arrow { transform: translateX(3px); color: var(--c-accent-2); } /* WORKS カード: 影と左バーの精度を上げ、タグをブランドグラデのピルへ。 */ .page-home .work-card { border-color: #e0e8f4; box-shadow: var(--lux-shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .page-home .work-card::before { width: 5px; } .page-home .work-card:hover { transform: translateY(-4px); border-color: #bcd0ef; box-shadow: var(--lux-shadow-hover); } .page-home .work-card .work-tag { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%); color: #ffffff; } /* 「ご依頼について」カード: 影を深め、画像はホバーで静かにズーム。 */ .page-home .voice-card { border-color: #e0e8f4; box-shadow: var(--lux-shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .page-home .voice-card:hover { transform: translateY(-4px); border-color: #bcd0ef; box-shadow: var(--lux-shadow-hover); } .page-home .voice-media { overflow: hidden; } .page-home .voice-media img { transition: transform .5s ease; } .page-home .voice-card:hover .voice-media img { transform: scale(1.05); } .page-home .voice-situation { background: linear-gradient(135deg, var(--c-accent-soft), #eef4ff); border: 1px solid #d8e5fb; } /* PROCESS ステップ: 番号を淡いゴースト数字にし、アイコンを濃紺グラデで引き締める。 */ .page-home .process-step { box-shadow: var(--lux-shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .page-home .process-step:hover { transform: translateY(-4px); box-shadow: var(--lux-shadow-hover); } .page-home .process-num { color: var(--c-accent-2); opacity: .9; } .page-home .process-ic { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); border-color: transparent; color: #ffffff; box-shadow: 0 8px 18px rgba(20, 70, 160, .24); } /* FAQ: 質問行の質感を上げ、開いた項目に左アクセントで所在を明示。 */ .page-home .faq-item { border-color: #e0e8f4; box-shadow: 0 1px 2px rgba(14, 42, 85, .04), 0 8px 22px rgba(14, 42, 85, .05); transition: box-shadow .2s ease, border-color .2s ease; } .page-home .faq-item:hover { border-color: #cbdaf1; box-shadow: var(--lux-shadow-card); } .page-home .faq-item[open] { border-color: #bcd0ef; box-shadow: var(--lux-shadow-card); } .page-home .faq-item summary::before { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- ⑤ CTA: 濃紺面の奥行きを強め、写真フレームを上質に ---------- */ .page-home .cta { background: radial-gradient(720px 380px at 84% -20%, rgba(59, 130, 246, .38), transparent 62%), radial-gradient(560px 320px at 6% 120%, rgba(56, 189, 248, .2), transparent 60%), linear-gradient(116deg, #071a3b 0%, #0b2757 50%, #123ea0 100%); } .page-home .cta-media { border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px rgba(3, 12, 32, .5); outline: 1px solid rgba(148, 190, 255, .18); outline-offset: -1px; } .page-home .cta .btn-primary { box-shadow: 0 16px 34px rgba(3, 12, 32, .4), inset 0 1px 0 rgba(255, 255, 255, .6); } /* ---------- ⑥ RECRUIT: アンバーCTAの発光を精密化 ---------- */ .page-home .recruit-actions .btn-primary { box-shadow: 0 16px 34px rgba(240, 165, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .4); } /* ---------- ⑦ モーション/レスポンシブ/アクセシビリティ ---------- */ @media (max-width: 640px) { /* モバイルでは装飾の継ぎ目ラインを控えめに(情報密度を優先)。 */ .page-home .strengths-section::before, .page-home .works-section::before, .page-home .voices-section::before { width: 88%; } /* ホバー由来の浮きは指タップで残らないよう、平常時の影だけ効かせる。 */ .page-home .voice-card:hover .voice-media img { transform: none; } } @media (prefers-reduced-motion: reduce) { .page-home *, .page-home *::before, .page-home *::after { transition: none !important; animation: none !important; } .page-home .strength-grid--quad .strength:hover, .page-home .work-card:hover, .page-home .voice-card:hover, .page-home .process-step:hover { transform: none; } .page-home .strength-grid--quad .strength::before, .page-home .svc-pill::before { transform: none; } .page-home .voice-card:hover .voice-media img { transform: none; } } /* =========================================================================== ARC-161 追加要件: 上品なモーション層(スクロール登場 + ヒーロー背景の呼吸) --------------------------------------------------------------------------- 梅本さん明示希望「ふわっと現れる登場アニメ / ヒーロー背景がゆっくり呼吸する常時アニメ」を、透明度と transform のみで軽量に付加する。 ★プログレッシブエンハンスメント: 登場の初期状態(隠す)は JS が付ける `.motion-ready`(=JS が動き、かつ reduced-motion でない時のみ)配下でしか効かない。JS 無効/失敗時・IntersectionObserver 非対応時は、この隠し状態が一切適用されず全内容が最初から見える。 ★prefers-reduced-motion: reduce では登場も呼吸も完全停止(前掲の一括停止 + 常時アニメは no-preference でのみ起動)。 ★hover/矢印/写真ズームとは非干渉: 登場が終わった要素は JS が reveal クラスを外して transform を既定へ返すため、hover の translateY を殺さない。 =========================================================================== */ /* --- スクロール登場(JS が .motion-ready を付けた時だけ有効) --- */ @media (prefers-reduced-motion: no-preference) { .motion-ready .page-home .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .motion-ready .page-home .reveal.in-view { opacity: 1; transform: none; } } /* --- ヒーロー背景の呼吸(常時・ごく緩やか。transform/opacity のみ) --- */ @media (prefers-reduced-motion: no-preference) { /* 技術UIの背後グロー: ゆっくり明滅+スケール(視認できる振幅・#11627) */ .page-home .hero-tech::before { animation: arc161-breathe-glow 7.5s ease-in-out infinite alternate; will-change: opacity, transform; } /* 右下の装飾スクエア(奥行き用)も同調してゆっくり呼吸 */ .page-home .hero-design::after { animation: arc161-breathe-square 9s ease-in-out infinite alternate; will-change: opacity, transform; } } @keyframes arc161-breathe-glow { /* #11627: 振幅を視認できる範囲へ拡大(明滅=opacity, 伸縮=scale)。それでもゆっくり(7.5s)で目立ちすぎない上品さを保つ。 */ from { opacity: .5; transform: scale(1); } to { opacity: 1; transform: scale(1.14); } } @keyframes arc161-breathe-square { /* 既存の transform: rotate(45deg) を保持しつつ、スケール+浮遊で呼吸を視認可能に(#11627)。 */ from { opacity: .72; transform: rotate(45deg) scale(1) translateY(0); } to { opacity: 1; transform: rotate(45deg) scale(1.09) translateY(-18px); } } /* --- モバイル: 振幅・移動量を抑えて読了を妨げない --- */ @media (max-width: 640px) { .motion-ready .page-home .reveal { transform: translateY(10px); } @media (prefers-reduced-motion: no-preference) { .page-home .hero-tech::before { animation-duration: 9s; } .page-home .hero-design::after { animation-duration: 11s; } } /* モバイルは振幅を抑えて読了を妨げない(PCより控えめ・#11627)。 */ @keyframes arc161-breathe-glow { from { opacity: .6; transform: scale(1); } to { opacity: 1; transform: scale(1.1); } } @keyframes arc161-breathe-square { from { opacity: .8; transform: rotate(45deg) scale(1) translateY(0); } to { opacity: 1; transform: rotate(45deg) scale(1.05) translateY(-12px); } } } /* --- reduced-motion では登場も呼吸も完全停止(静止で全表示) --- */ @media (prefers-reduced-motion: reduce) { .page-home .reveal, .page-home .reveal.in-view { opacity: 1 !important; transform: none !important; transition: none !important; } .page-home .hero-tech::before, .page-home .hero-design::after { animation: none !important; } } /* =========================================================================== ARC-163: ヒーロー全体を巡る「光の流れ」レイヤー(常時アニメ・豪華さの底上げ) ARC-164: 梅本さん「もっと光を目立たせてもいいよ」を受け、上記4層の明度/コントラスト・移動幅・速度・重なりを一段強化(テイストは維持)。上品さ・文字可読性・スマホ配慮・reduced-motion 完全停止は不変。 --------------------------------------------------------------------------- 梅本さん要望「ヒーロー全体で光がゆっくり巡る/流れる/明滅する」を、既存の右側の呼吸・浮遊(.hero-tech::before / .hero-design::after ・ARC-161)は一切触らず、独立した装飾レイヤー(.hero-aurora)として重ねる。設計方針: - CSS のみ・軽量(JSループなし・追加画像なし)。transform/opacity のみを動かす。 - 位相差のある3系統以上を合成: ① .ha-sweep … 横断する柔らかな光の帯(左右にゆっくり往復) ② .ha-streak … 斜めの光条が対角線をゆっくり横切る(別方向・別周期) ③ .ha-glow-a … 局所グローが漂い明滅(左上まわり) ④ .ha-glow-b … もう一つの局所グローが逆向きに漂う(右下まわり) それぞれ duration / delay / direction / transform を変え、重なりを生む。 - mix-blend-mode: screen で暗紺背景に自然に発光を重ねる(点滅/高コントラストは禁止)。 - 純装飾のため content 層(.hero-design-inner=z-index:1)より下(z-index:0)。 overflow:hidden の .hero-design 内でクリップされ、はみ出さない。 - ★prefers-reduced-motion: reduce では前掲の一括停止(.page-home *)で全停止。加えて下段で明示停止し、静止でも情報は常に前面に見える(装飾は背面)。 - ★スマホは層数・ぼかし・不透明度・振幅を落とし、可読性と負荷を優先。 =========================================================================== */ .page-home .hero-aurora { position: absolute; inset: 0; z-index: 0; /* content(.hero-design-inner=1)より下・背面の純装飾 */ overflow: hidden; pointer-events: none; } .page-home .ha-layer { position: absolute; pointer-events: none; mix-blend-mode: screen; /* 暗紺背景へ発光を自然加算(白飛び・点滅はしない低opacity) */ } /* ① 横断する柔らかな光の帯: ヒーロー幅より広く取り、左右にゆっくり往復 */ .page-home .ha-sweep { inset: -24% -34%; background: linear-gradient( 100deg, transparent 28%, rgba(96, 165, 250, .20) 44%, rgba(147, 197, 253, .32) 52%, rgba(56, 189, 248, .17) 60%, transparent 76% ); transform: translateX(-22%); } /* ② 斜めの光条: 縦長の柔らかいバーを傾け、対角線上をゆっくり通過 */ .page-home .ha-streak { top: -60%; left: -25%; width: 60%; height: 220%; background: linear-gradient( 90deg, transparent, rgba(191, 219, 254, .24), rgba(125, 211, 252, .17), transparent ); filter: blur(9px); transform: rotate(18deg) translateX(-40%); opacity: 0; } /* ③④ 局所グロー: ぼかした楕円光が位置と明るさを変えながら漂う */ .page-home .ha-glow { width: 56%; height: 78%; border-radius: 50%; filter: blur(34px); } .page-home .ha-glow--a { left: 6%; top: 4%; background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .30), transparent 70%); } .page-home .ha-glow--b { right: 4%; bottom: 0%; background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .32), transparent 68%); } /* --- 常時アニメ本体(no-preference の時だけ起動・位相差を明確に) --- */ @media (prefers-reduced-motion: no-preference) { .page-home .ha-layer { will-change: transform, opacity; } .page-home .ha-sweep { animation: arc163-sweep 15s ease-in-out infinite alternate; } .page-home .ha-streak { animation: arc163-streak 21s linear infinite; animation-delay: -6s; } .page-home .ha-glow--a { animation: arc163-drift-a 18s ease-in-out infinite alternate; animation-delay: -3s; } .page-home .ha-glow--b { animation: arc163-drift-b 24s ease-in-out infinite alternate; animation-delay: -11s; } } @keyframes arc163-sweep { from { transform: translateX(-22%); } to { transform: translateX(22%); } } @keyframes arc163-streak { /* 画面外→対角線を横切って画面外へ。両端はフェードして継ぎ目を隠す */ 0% { transform: rotate(18deg) translateX(-40%); opacity: 0; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { transform: rotate(18deg) translateX(230%); opacity: 0; } } @keyframes arc163-drift-a { from { transform: translate(0, 0) scale(1); opacity: .55; } to { transform: translate(19%, 14%) scale(1.20); opacity: 1; } } @keyframes arc163-drift-b { from { transform: translate(0, 0) scale(1.08); opacity: .5; } to { transform: translate(-18%, -16%) scale(1); opacity: .98; } } /* --- スマホ: 層を間引き・ぼかし/不透明度/振幅を抑えて可読性と負荷を優先 --- */ @media (max-width: 640px) { /* 斜め光条ともう一方のグローは省いて2系統に(負荷と情報の読みやすさ優先) */ .page-home .ha-streak, .page-home .ha-glow--b { display: none; } .page-home .hero-aurora { opacity: .78; } .page-home .ha-glow--a { filter: blur(26px); } @media (prefers-reduced-motion: no-preference) { /* PCより控えめに(周期を延ばす=振幅体感を下げる)。強化後も可読性優先 */ .page-home .ha-sweep { animation-duration: 22s; } .page-home .ha-glow--a { animation-duration: 26s; } } } /* --- reduced-motion: 光レイヤーも完全停止(静止・装飾は背面/情報は前面で常に可視) --- */ @media (prefers-reduced-motion: reduce) { .page-home .ha-sweep, .page-home .ha-streak, .page-home .ha-glow--a, .page-home .ha-glow--b { animation: none !important; } } .privacy-content { max-width: 880px; margin: 0 auto; color: var(--c-ink); line-height: 1.9; } .privacy-content h2 { margin: 2.5rem 0 0.75rem; color: var(--c-accent); font-size: clamp(1.25rem, 2.5vw, 1.6rem); } .privacy-content p + p, .privacy-content ul + p { margin-top: 1rem; } .privacy-content code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--c-bg-alt); font-size: 0.95em; } /* =========================================================================== ARC-201 モバイルナビ: checkbox → button + aria-expanded 同期 - 旧 .nav-toggle(checkbox)/.nav-toggle-label(label)は build.py 側で廃止。残存する旧セレクタ(:checked / label)は一致要素が無く不活性になる。 - 本ブロックは末尾追記のカスケードで、旧レイヤーの上に権威的に上書きする。 - プログレッシブエンハンスメント: 既定(JS無効/読込失敗時)は主要ナビを常に表示し、トグルボタンは隠す。 navigation.js が html.nav-enhanced を付与した時だけ、モバイル(<=900px)でハンバーガーボタン + aria-expanded 連動の折りたたみUIを有効化する。 - 既存のヘッダー配色・リンク文言・Contact CTA・GA4 は変更しない。 =========================================================================== */ /* トグルボタンの素の見た目を消し、既定(デスクトップ)では非表示にする。 */ .nav-toggle { display: none; appearance: none; -webkit-appearance: none; margin: 0; padding: 10px; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; } .nav-toggle:focus-visible { outline: 2px solid var(--c-accent-2); outline-offset: 3px; border-radius: 8px; } @media (max-width: 900px) { /* PE基盤: JS が無ければ主要ナビを常に見せ、到達可能にする(横並びは折り返す)。 */ .site-nav { display: flex; flex-wrap: wrap; } /* JS 無効時はヘッダーを可変高にして、ナビをブランドの下段へ回り込ませる。 */ html:not(.nav-enhanced) .header-inner { height: auto; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; row-gap: 4px; } html:not(.nav-enhanced) .site-nav { flex-basis: 100%; justify-content: flex-start; } /* --- JS 有効時のみ: ハンバーガーボタンと折りたたみUIを有効化 --- */ .nav-enhanced .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; flex: none; /* 旧 checkbox 用 visually-hidden 指定を確実に打ち消す。 */ position: static; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } .nav-enhanced .nav-toggle .nav-toggle-bar { display: block; width: 100%; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .2s, opacity .2s; } /* 既定は閉。ドロップダウンとしてヘッダー直下へ絶対配置。 */ .nav-enhanced .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 8px 12px 16px; background: #f6f9fc; border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow); } /* aria-expanded=true(=JSが開状態を同期)で開く。 */ .nav-enhanced .nav-toggle[aria-expanded="true"] ~ .site-nav { display: flex; } .nav-enhanced .site-nav a { padding: 12px 10px; } .nav-enhanced .site-nav a.active::after { display: none; } .nav-enhanced .site-nav .nav-contact { margin-left: 0; justify-content: center; } } /* ハンバーガー → × のモーフ(既存の reduced-motion 抑制方針に沿って transition 制御)。 */ .nav-enhanced .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-enhanced .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-enhanced .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav-enhanced .nav-toggle .nav-toggle-bar { transition: none; } } /* ARC-216: shared keyboard focus and current-page styling. The light/dark double ring remains visible on light, tinted, and dark areas. */ :root { --focus-ring-inner: #ffffff; --focus-ring-outer: #082f55; } :where(a, button, summary):focus-visible { outline: 3px solid var(--focus-ring-inner) !important; outline-offset: 2px !important; box-shadow: 0 0 0 7px var(--focus-ring-outer) !important; } .site-nav a[aria-current="page"] { color: var(--c-accent-2); } .site-nav a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 2px; border-radius: 2px; background: var(--c-accent-2); } .site-nav .nav-contact[aria-current="page"] { color: #ffffff; background: #17376e; } .site-nav .nav-contact[aria-current="page"]::after, .nav-enhanced .site-nav a[aria-current="page"]::after { display: none; } /* ===================================================================== ARC-234: WORKS掲載区分ラベルと「掲載内容について」(ARC-232設計) 区分は色ではなくラベル文字で伝える(公開可能な対応例 / 相談・支援の例)。アニメーションは追加しない(prefers-reduced-motion配慮は既存方針のまま)。 ===================================================================== */ .works-category { display: inline-flex; align-self: flex-start; margin: 0 0 8px; padding: 3px 10px; border: 1px solid var(--c-line); border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; line-height: 1.7; } .works-category--public { border-color: #b9cfdb; color: #0f3d5e; /* 白背景で11.35:1 (AA/AAA) */ } .works-category--consult { border-color: #d9cba4; color: #6d5410; /* 白背景で7.18:1 (AA/AAA) */ } .works-policy-section { padding-bottom: 0; } .works-policy-section .note-box { margin-top: 0; } .works-policy-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--c-ink-soft); font-size: 14px; line-height: 1.9; } .works-policy-list strong { color: var(--c-ink); }