/* ============================================================= MIF LLC — design system White base, generous whitespace, monospace labels. Monochrome: white / black / gray only (no colored accent). ============================================================= */ /* ---- Design tokens ---- */ :root { --bg: #ffffff; --surface: #fafafa; --surface-2: #f4f4f5; --text: #0a0a0b; --muted: #6b7280; --faint: #9ca3af; --border: #e7e7e9; /* 差し色は使わず、アクセントは黒（モノクロ統一）。色を戻したい時はここだけ変える。 */ --accent: #0a0a0b; --accent-ink:#0a0a0b; /* フォーム等のエラー表示（モノクロ例外＝可読性のための最小限の赤）。 */ --error: #b91c1c; --maxw: 1120px; --pad: 24px; --radius: 12px; /* 英字＝Inter、和文＝Zen Kaku Gothic New（Interに無い字は自動で和文へフォールバック）。 */ --font-sans: "Inter", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Roboto Mono", monospace; /* 見出し用：英語ページ＝General Sans（上質グロテスク）。日本語ページは下の html[lang="ja"] で M PLUS 1（幾何学ゴシック）に上書き。本文は --font-sans のまま。 */ --font-head: "General Sans", "Zen Kaku Gothic New", "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; --ease: cubic-bezier(.2, .7, .2, 1); } /* 日本語ページの見出しは M PLUS 1（テック感のある幾何学ゴシック）。英語見出しは General Sans のまま。 */ html[lang="ja"] { --font-head: "M PLUS 1", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; } /* ---- Per-section themes (sub-sites) ---- 現在はモノクロ統一のため、事業ごとの色分けはしない（全て黒アクセント）。将来また事業色を出したくなったら、ここの値を変えるだけで復活できる。のフックは残してある。 */ body.theme-ai-software { --accent: #0a0a0b; --accent-ink: #0a0a0b; } /* AI & Software */ body.theme-fintech { --accent: #0a0a0b; --accent-ink: #0a0a0b; } /* fintech */ body.theme-ec { --accent: #0a0a0b; --accent-ink: #0a0a0b; } /* commerce */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; letter-spacing: .01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; margin: 0; } /* 日本語は大きい見出し(h1/h2)=M PLUS 1（テック感）、小さい見出し(h3/h4)=Zen Kaku Gothic New（小さくても読みやすい）。 */ html[lang="ja"] h3, html[lang="ja"] h4 { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 700; } p { margin: 0; } /* ---- Layout primitives ---- */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .section { padding: 96px 0; } .section--tight { padding: 64px 0; } .divider { height: 1px; background: var(--border); border: 0; margin: 0; } /* monospace eyebrow label, e.g. "事業"（旧 "// 事業" の // プレフィックスは廃止） */ .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; } .lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 60ch; } /* ---- Skip link（キーボード操作用。フォーカスされた時だけ画面左上に出す）---- */ .skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; } .skip-link:focus { top: 12px; } /* ---- Header / nav ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-family: var(--font-mono); font-weight: 600; font-size: 16px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 9px; } .brand .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); display: inline-block; } .brand b { font-weight: 700; } .brand .tld { color: var(--faint); font-weight: 400; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 14.5px; color: var(--muted); padding: 8px 14px; border-radius: 8px; transition: color .15s var(--ease), background .15s var(--ease); } .nav-links a:hover { color: var(--text); background: var(--surface-2); } /* 現在地＝薄グレーのピル。お問い合わせ（黒の塗りボタン）とインバウンド支援（付箋）は対象外＝各自の見せ方を維持。 */ .nav-links a[aria-current="page"]:not(.nav-cta):not(.nav-feature) { color: var(--text); background: var(--surface-2); } /* ── インバウンド支援＝付箋（紙を貼った）風の特集スロット。日本語ナビのみ。 ── 現在地ピル規則から :not(.nav-feature) で除外済みのため、リンク自体は背景なしのままでよい（付箋＝内側の span で見せる）。 */ /* padding は平常時/ホバー時で同一に固定（.nav-links a に詳細度で負けてホバー時だけ縮む＝隣がズレる不具合を防ぐ）。 */ .nav-links a.nav-feature, .nav-links a.nav-feature:hover { padding: 4px 6px; } /* ホバー時の薄グレー塗り（.nav-links a:hover）も付箋には付けない（詳細度で上書き／!important 不要）。 */ .nav-links a.nav-feature:hover { background: none; } .nav-feature__paper { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 2px; padding: 5px 11px; position: relative; box-shadow: 1px 3px 7px rgba(0,0,0,.13); transform: rotate(-3deg); transition: box-shadow .15s var(--ease); } /* 付箋の右下の折れ角 */ .nav-feature__paper::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 11px 11px; border-color: transparent transparent var(--surface-2) transparent; } .nav-feature__icon { width: 15px; height: 15px; flex: none; } /* ホバーは位置・サイズを動かさない（影だけわずかに濃く＝押せる合図）。左隣のナビがズレないように。 */ .nav-feature:hover .nav-feature__paper { box-shadow: 1px 4px 9px rgba(0,0,0,.16); } /* 現在地（インバウンド支援ページ自身）＝付箋の枠を濃くして在処を示す。 */ .nav-feature[aria-current="page"] .nav-feature__paper { border-color: var(--text); } /* セレクタを .nav-links a.nav-cta に具体化して .nav-links a に詳細度で勝つ（!important 不要）。 */ .nav-links a.nav-cta { font-size: 14.5px; color: var(--bg); background: var(--text); padding: 9px 16px; border-radius: 8px; } .nav-links a.nav-cta:hover { background: var(--accent); color: #fff; } /* 言語切替リンク（EN / 日本語）。モノスペースの控えめなアクセント。同上で具体化（!important 不要）。 */ .nav-links a.nav-lang { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12.5px; letter-spacing: .02em; color: var(--muted); border: 1px solid var(--border, rgba(0,0,0,.12)); padding: 6px 12px; margin-left: 6px; } .nav-links a.nav-lang:hover { color: var(--text); border-color: var(--accent); } .nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span { width: 18px; height: 1.5px; background: var(--text); position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--text); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } /* ---- Sub-site brand lockup (← MIF LLC · Section) ---- */ .brand-lock { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } /* ポータルへ戻る丸ボタン（← を円で囲む）。社名 MIF LLC はその右に残す。 */ .brand-home { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-size: 15px; line-height: 1; background: var(--bg); transition: background .15s var(--ease), border-color .15s var(--ease); } .brand-home:hover { background: var(--surface-2); border-color: var(--text); } .brand-parent { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--muted); white-space: nowrap; transition: color .15s var(--ease); } .brand-parent:hover { color: var(--text); } .brand-sep { color: var(--faint); } .brand-section { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--accent); white-space: nowrap; transition: opacity .15s var(--ease); } .brand-section:hover { opacity: .75; } /* （旧 .subnav の2段目ナビCSSは削除。事業内ナビは SectionHeader.astro が .site-header / .nav-links を流用して実装している。） */ /* breadcrumb */ .crumb { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; } .crumb a { color: var(--muted); } .crumb a:hover { color: var(--text); } .crumb span::before { content: "/"; margin-right: 8px; color: var(--border); } /* case-study detail */ .cs-hero h1 { font-size: clamp(30px, 5vw, 50px); max-width: 18ch; } .prose { max-width: 70ch; } .prose h2 { font-size: clamp(22px, 3vw, 28px); margin: 48px 0 16px; } .prose h3 { font-size: 18px; margin: 32px 0 10px; } .prose p { color: var(--text); margin-bottom: 16px; } .prose p.muted { color: var(--muted); } .prose ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 10px; } .prose ul li { padding-left: 24px; position: relative; color: var(--muted); } .prose ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--text); color: var(--bg); } .btn--primary:hover { background: var(--accent); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn--ghost:hover { border-color: var(--text); } .btn .arrow { transition: transform .15s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ---- Hero ---- */ .hero { padding: clamp(72px, 12vw, 128px) 0 clamp(56px, 8vw, 88px); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); opacity: .5; } .hero h1 { font-size: clamp(34px, 6vw, 64px); max-width: 16ch; } .hero .lead { margin-top: 24px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero-actions.actions-end { justify-content: flex-end; } /* 一例の補足（左）とCTA（右）を同じ行に。CTAは右下・左テキストの高さに揃える。折り返さず（nowrap）、狭くなったら760pxで縦積みに切替（ボタンだけ落ちて間延びするのを防ぐ）。 */ .ex-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: nowrap; } .ex-foot .ex-note { margin-top: 22px; flex: 1 1 auto; min-width: 0; } .ex-foot .hero-actions { margin-top: 0; flex: 0 0 auto; } @media (max-width: 760px) { .ex-foot { flex-direction: column; align-items: stretch; gap: 14px; } } /* ---- Cards / grids ---- */ .grid { display: grid; gap: 20px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; background: var(--bg); transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); display: flex; flex-direction: column; } a.card:hover { transform: translateY(-3px); border-color: var(--text); box-shadow: 0 12px 36px -18px rgba(10,10,11,.25); } .card .num { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-bottom: 16px; } .card h3 { font-size: 19px; margin-bottom: 8px; } .card p { color: var(--muted); font-size: 14.5px; } .card .card-link { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 550; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } /* 罫線グリッド型カード（隙間なし・1枠で囲い、間を細線で仕切る "表" 風）。トップの3事業で使用。 */ .cards-framed { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .cards-framed .card { border: 0; border-radius: 0; border-left: 1px solid var(--border); } .cards-framed .card:first-child { border-left: 0; } .cards-framed a.card:hover { transform: none; box-shadow: none; background: var(--surface); } @media (max-width: 860px) { .cards-framed .card { border-left: 0; border-top: 1px solid var(--border); } .cards-framed .card:first-child { border-top: 0; } } /* feature row (icon-less, label + desc) */ .feature { padding: 24px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 240px 1fr; gap: 32px; } .feature:last-child { border-bottom: 1px solid var(--border); } .feature h3 { font-size: 18px; } .feature .tag { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 8px; } .feature p { color: var(--muted); font-size: 15px; } .feature ul { margin: 14px 0 0; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .feature ul li { font-family: var(--font-mono); font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; } /* section heading block */ .sec-head { max-width: 62ch; margin-bottom: 48px; } .sec-head h2 { font-size: clamp(26px, 4vw, 38px); } .sec-head p { color: var(--muted); margin-top: 16px; font-size: 17px; } /* tech strip */ .techstrip { display: flex; flex-wrap: wrap; gap: 10px; } .techstrip span { font-family: var(--font-mono); font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; background: var(--surface); } /* 自動化する業務 × 技術（アプローチ）。行にホバーすると薄い灰色が左から満ちる（文字は反転しない）。 */ .cap-list { border-top: 1px solid var(--border); } .cap-list .cap { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 28px; align-items: center; padding: 26px 20px; border-bottom: 1px solid var(--border); overflow: hidden; } .cap-list .cap::before { content: ""; position: absolute; inset: 0; background: var(--surface); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); z-index: 0; } .cap-list .cap:hover::before { transform: scaleX(1); } .cap-list .cap > * { position: relative; z-index: 1; } .cap-list .cap-idx { font-family: var(--font-mono); font-size: 13px; color: var(--faint); } .cap-list .cap h3 { font-size: 20px; } .cap-list .cap p { color: var(--muted); font-size: 14px; margin-top: 4px; } .cap-list .cap-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 320px; font-family: var(--font-mono); font-size: 12px; } .cap-list .cap-tags span { border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; color: var(--muted); transition: border-color .3s var(--ease); } .cap-list .cap:hover .cap-tags span { border-color: var(--faint); } /* リスト下のさりげない技術基盤の1行表記。 */ .cap-stack { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 24px; font-family: var(--font-mono); font-size: 12.5px; } .cap-stack .lbl { color: var(--faint); letter-spacing: .1em; text-transform: uppercase; } .cap-stack .items { color: var(--muted); } @media (max-width: 760px) { .cap-list .cap { grid-template-columns: 1fr; gap: 10px; } .cap-list .cap-tags { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .cap-list .cap::before { transition: none; } } /* small tech chips */ .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .chips span { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; background: var(--bg); } /* product card (home showcase) */ .pcard .num { color: var(--accent); } .pcard .ptag { color: var(--text); font-weight: 600; font-size: 15px; margin-bottom: 8px; } .pcard p { margin-bottom: 4px; } /* product detail block (catalog) */ .product { border-top: 1px solid var(--border); padding: 44px 0; display: grid; grid-template-columns: 300px 1fr; gap: 48px; } .product:first-of-type { border-top: 0; padding-top: 8px; } .product-aside .pnum { font-family: var(--font-mono); font-size: 12px; color: var(--faint); letter-spacing: .04em; } .product-aside h3 { font-size: 23px; margin-top: 10px; } .product-aside .ptag { color: var(--accent); font-size: 14.5px; margin-top: 10px; font-weight: 600; } .product-aside .repo { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 14px; display: inline-block; } .product-body > p { color: var(--text); margin-bottom: 18px; max-width: 64ch; } .product-feats { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; } .product-feats li { padding-left: 22px; position: relative; color: var(--muted); font-size: 14px; } .product-feats li::before { content: "→"; position: absolute; left: 0; color: var(--accent); } .product-high { border-left: 3px solid var(--accent); background: var(--surface); padding: 13px 18px; border-radius: 8px; font-size: 13.5px; color: var(--muted); } /* stat / callout band */ .band { background: var(--text); color: #fff; border-radius: 16px; padding: clamp(32px, 5vw, 56px); } .band .eyebrow { color: rgba(255,255,255,.55); } .band h2 { font-size: clamp(24px, 4vw, 34px); color: #fff; max-width: 24ch; } .band p { color: rgba(255,255,255,.7); margin-top: 16px; max-width: 56ch; } /* 暗い band 上のプライマリボタンは白地・黒文字に反転（旧インラインstyleの置換） */ .band .btn--primary { background: var(--bg); color: var(--text); } .band .btn--primary:hover { background: var(--surface-2); } /* 取り組み実績：左テキスト＋右モニター（WorkMonitor）の2カラム。モニターは上寄せ・CTAは右下。 */ .work-2col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; } /* eyebrow をひと回り大きく見せる汎用モディファイア（取り組み実績で使用） */ .eyebrow--lg { font-size: 15px; letter-spacing: .1em; margin-bottom: 16px; } /* 取り組み実績のタグは小さめにして1行に収める（パルスなし・静止） */ .work-2col .tags { gap: 6px; margin-top: 20px; } .work-2col .tags span { font-size: 11px; padding: 3px 8px; white-space: nowrap; } .work-right { display: flex; flex-direction: column; height: 100%; } .work-art { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; } .work-cta { display: flex; justify-content: flex-end; margin-top: 16px; } @media (max-width: 720px) { .work-2col { grid-template-columns: 1fr; } .work-art { align-items: center; margin: 8px auto 0; max-width: 300px; } .work-cta { justify-content: flex-start; } } /* ライト枠 band（白背景＋細罫線）。トップ末尾の導入事例で使用（Fintech の暗い band とは別系統）。 */ .band--framed { background: var(--bg); color: var(--text); border: 1px solid var(--border); } .band--framed .eyebrow { color: var(--accent); } .band--framed h2 { color: var(--text); } .band--framed p { color: var(--muted); } .band--framed .btn--primary { background: var(--text); color: var(--bg); } .band--framed .btn--primary:hover { background: var(--accent); } /* ============================================================= トップページ専用セクション（2025-06 新構成） ============================================================= */ /* 区分ラベル（事業カード／一例の mono ラベル）。旧 .num の代替。 */ .card .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; } /* 2. 事業紹介：企業向け開発を全幅で大きく、金融AI・EC を下段2枚に。 */ .biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .biz-grid .card--feat { grid-column: 1 / -1; padding: clamp(28px, 4vw, 44px); } .card--feat h3 { font-size: clamp(22px, 3vw, 30px); } .card--feat p { font-size: 15.5px; max-width: 62ch; } /* フィーチャーカード内：左テキスト＋右に触れる線画（歯車 BizGears） */ .card--feat .feat-2col { display: grid; grid-template-columns: 1fr 180px; gap: clamp(20px, 3vw, 40px); align-items: center; } @media (max-width: 760px) { .biz-grid { grid-template-columns: 1fr; } .card--feat .feat-2col { grid-template-columns: 1fr; } } /* 3-4. 開発・支援の一例 */ .sub-h { font-size: 16px; color: var(--muted); font-weight: 600; margin: 0 0 20px; } .ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ex { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; background: var(--bg); transition: border-color .2s ease, background-color .5s ease; } .ex:hover { border-color: var(--text); } .ex h4 { display: inline-block; font-size: 17px; margin: 0 0 8px; padding-bottom: 3px; background-image: linear-gradient(var(--text), var(--text)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left bottom; transition: background-size .28s ease; } .ex:hover h4 { background-size: 100% 1.5px; } .ex p { color: var(--muted); font-size: 14.5px; } /* 5秒ごとの順送りハイライト（薄グレー塗り） */ .ex.is-active { background-color: var(--surface-2); border-color: var(--border); } .ex-note { color: var(--muted); font-size: 14px; margin-top: 22px; max-width: 64ch; } @media (max-width: 760px) { .ex-grid { grid-template-columns: 1fr; } } /* 5. 取り組み実績：タグ列 */ .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .tags span { border: 1px solid var(--border); border-radius: 6px; padding: 4px 11px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .band--framed .tags span { border-color: var(--border); } /* 6. 進め方：3ステップ */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } } .step { border-top: 2px solid var(--text); padding-top: 18px; } .step .step-num { font-family: var(--font-mono); font-size: 13px; color: var(--faint); } .step h3 { font-size: 17px; margin: 8px 0 8px; } .step p { color: var(--muted); font-size: 14.5px; } .how-note { color: var(--muted); font-size: 14px; margin-top: 28px; max-width: 64ch; } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } } /* case study */ .case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } .case-meta { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .case-meta div { background: var(--bg); padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; } .case-meta dt { color: var(--muted); font-size: 13px; font-family: var(--font-mono); } .case-meta dd { margin: 0; font-size: 14px; font-weight: 550; text-align: right; } /* definition table (about) */ .spec { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .spec div { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--border); } .spec div:first-child { border-top: 0; } .spec dt { padding: 18px 24px; background: var(--surface); font-size: 14px; font-weight: 600; font-family: var(--font-mono); } .spec dd { padding: 18px 24px; margin: 0; color: var(--text); } .spec dd.todo { color: var(--faint); } /* notice / disclaimer */ .notice { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 8px; padding: 18px 22px; font-size: 14px; color: var(--muted); } /* contact */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; } .field label { font-size: 14px; font-weight: 550; } .field input, .field textarea { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); transition: border-color .15s var(--ease); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--border); padding: 56px 0 40px; margin-top: 24px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .footer-grid h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; font-weight: 600; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer-grid a { color: var(--muted); font-size: 14.5px; } .footer-grid a:hover { color: var(--text); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--faint); font-size: 13px; font-family: var(--font-mono); flex-wrap: wrap; gap: 12px; } /* utilities */ .center { text-align: center; } .mt-0 { margin-top: 0; } .muted { color: var(--muted); } /* ---- Responsive ---- */ @media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } .feature { grid-template-columns: 1fr; gap: 12px; } .case { grid-template-columns: 1fr; gap: 28px; } .product { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; } .product-feats { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .spec div { grid-template-columns: 1fr; } .spec dt { border-bottom: 1px solid var(--border); } .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px var(--pad) 18px; display: none; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 13px 14px; } /* 展開メニューの現在地＝左バーで明確化。お問い合わせ・付箋は対象外（各自の見せ方を維持）。 */ .nav-links a[aria-current="page"]:not(.nav-cta):not(.nav-feature) { border-left: 3px solid var(--text); } /* ── スマホ専用：インバウンド支援（付箋）は解除し、地球儀アイコン付きの通常行として全幅で揃える ── */ .nav-links a.nav-feature, .nav-links a.nav-feature:hover { padding: 0; background: none; } .nav-feature__paper, .nav-feature:hover .nav-feature__paper { display: flex; width: 100%; justify-content: flex-start; align-items: center; gap: 9px; transform: none; box-shadow: none; background: none; border: 0; border-radius: 8px; padding: 13px 14px; font-size: 14.5px; font-weight: 400; color: var(--muted); } .nav-feature__paper::after { display: none; } /* 付箋の折れ角を消す */ .nav-feature__icon { width: 17px; height: 17px; opacity: .7; } .nav-feature[aria-current="page"] .nav-feature__paper { border: 0; border-left: 3px solid var(--text); color: var(--text); font-weight: 600; } /* お問い合わせ＝全幅の黒ボタン。上に区切りの余白。 */ .nav-links a.nav-cta { display: block; text-align: center; margin-top: 12px; padding: 13px 16px; } /* 言語切替＝CTA からしっかり離し、中央の独立ピルに（お問い合わせとの被りを解消） */ .nav-links li:last-child { display: flex; justify-content: center; margin-top: 12px; } .nav-links a.nav-lang { display: inline-block; margin-left: 0; padding: 9px 22px; } .section { padding: 64px 0; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: stretch; } .btn { justify-content: center; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* ===== 記事フィード（記事ハブ Blog.astro / 事業別一覧 BlogSection.astro 共通） ===== 先頭＝テキスト＋画像の2カラム（feature）／以降＝サムネ左の行リスト。 */ .feed { margin-top: 18px; } .feed-item { display: block; color: var(--text); } .feed-thumb { aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); display: grid; place-items: center; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 34px 34px; background-position: -1px -1px; } .feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .feed-thumb .ph { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); } .feed .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); } .feed-text h3 { font-family: var(--font-head); letter-spacing: -.01em; margin-top: 10px; } html[lang="ja"] .feed-text h3 { font-family: "M PLUS 1", sans-serif; } .feed-text p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin-top: 8px; } .feed-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .feed-foot time { font-family: var(--font-mono); font-size: 12px; color: var(--faint); } .feed-foot .card-link { margin: 0; padding: 0; font-size: 14px; } .feed-foot .soon { font-family: var(--font-mono); font-size: 12px; color: var(--faint); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } /* 先頭＝フィーチャー（テキスト左＋画像右の2カラム・見出し大） */ .feed-item--feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-bottom: 38px; margin-bottom: 6px; } .feed-item--feature .feed-text { order: 1; } .feed-item--feature .feed-thumb { order: 2; } .feed-item--feature h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; font-weight: 800; max-width: 20ch; } .feed-item--feature p { font-size: 16px; max-width: 60ch; } /* 2件目以降＝行リスト（サムネ左・本文右） */ .feed-item:not(.feed-item--feature) { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; padding: 28px 0; border-top: 1px solid var(--border); } .feed-item:not(.feed-item--feature) h3 { font-size: 20px; font-weight: 700; line-height: 1.35; } .feed-item--coming { opacity: .6; } @media (max-width: 880px) { .feed-item--feature { grid-template-columns: 1fr; gap: 0; } .feed-item--feature .feed-text { order: 2; margin-top: 20px; } .feed-item--feature .feed-thumb { order: 1; } } @media (max-width: 640px) { .feed-item:not(.feed-item--feature) { grid-template-columns: 1fr; gap: 14px; } }