/* ========================================================================== JSTB Modern Redesign スコープ：配下のみ。ロゴ・文言は変更せず、配色・余白・角丸・影・タイポグラフィのみで現代的な質感を再構築する。 ========================================================================== */ .jstb-modern.lang-en, .jstb-modern.lang-en h1, .jstb-modern.lang-en h2, .jstb-modern.lang-en h3, .jstb-modern.lang-en h4, .jstb-modern.lang-en h5, .jstb-modern.lang-en h6 { font-family: var(--font-en), var(--font-jp); } .jstb-modern { /* Hero canvas（js/topVisual.js）の循環色 #0077b6 / #00b4d8 / #03045e と統一 */ --jm-navy-950: #03045e; --jm-navy-900: #050a4a; --jm-navy-800: #0077b6; --jm-blue: #00b4d8; --jm-teal: #0077b6; --jm-gradient: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%); --jm-glow: 0 10px 40px -8px rgba(0, 180, 216, 0.55); --jm-shadow-soft: 0 24px 60px -24px rgba(3, 4, 94, 0.35); --jm-shadow-hover: 0 30px 70px -24px rgba(3, 4, 94, 0.28); --jm-radius-lg: 24px; --jm-radius-pill: 999px; --jm-glass-bg: rgba(255, 255, 255, 0.75); /* 文字色3段階：見出し強調／本文／控えめ。旧#212121・#45536b・#5b6b82の混在を統一 */ --jm-text-strong: #050a4a; --jm-text-body: #3d4a63; --jm-text-muted: #8a97ab; } /* ---- Nav: sticky glass ---- */ .jstb-modern .header { position: sticky; top: 0; z-index: 1000; background: var(--jm-glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(15, 32, 55, 0.06); transition: box-shadow 0.3s ease; } .jstb-modern .header.is-scrolled { box-shadow: 0 8px 30px -14px rgba(6, 11, 22, 0.25); } .jstb-modern .navbar-default .navbar-nav > li > a { font-weight: 600; letter-spacing: 0.02em; position: relative; } /* ---- 言語トグル（jm-lbl-en / jm-lbl-ja） ---- */ /* 既定はJA表示。body（.jstb-modern）にlang-enが付くとEN表示に切り替わる */ .jstb-modern .jm-lbl-en { display: none; } .jstb-modern .jm-lbl-ja { display: inline; } .jstb-modern.lang-en .jm-lbl-en { display: inline; } .jstb-modern.lang-en .jm-lbl-ja { display: none; } .jstb-modern .jm-lang-toggle { appearance: none; border: 1px solid rgba(15, 32, 55, 0.15); background: transparent; color: inherit; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; padding: 6px 14px; border-radius: var(--jm-radius-pill); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .jstb-modern .jm-lang-toggle:hover { background: var(--jm-gradient); color: #fff; border-color: transparent; } .jstb-modern .jm-lang-toggle-item { display: flex; align-items: center; margin-left: 8px; } .jstb-modern .footer-top .jm-lang-toggle { display: none; } .jstb-modern .navbar-default .navbar-nav > li > a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--jm-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .jstb-modern .navbar-default .navbar-nav > li > a:hover::after, .jstb-modern .navbar-default .navbar-nav > li.active > a::after { transform: scaleX(1); } .jstb-modern .navbar-default .navbar-toggle { border-color: transparent; border-radius: 10px; } .jstb-modern .navbar-default .navbar-toggle .icon-bar { background: var(--jm-gradient); border-radius: 2px; } .jstb-modern .navbar-default .navbar-nav > li > a { padding-top: 14px; padding-bottom: 14px; } /* ガラスパネルはモバイルのドロップダウン展開時のみ（backdrop-filterがスタッキングコンテキストを生成し、デスクトップではfloatしたロゴより上のレイヤーに描画されてロゴを隠してしまうため） */ @media (max-width: 767px) { .jstb-modern .navbar-default .navbar-collapse { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 0 0 var(--jm-radius-lg) var(--jm-radius-lg); box-shadow: var(--jm-shadow-soft); } /* style.css側の旧テーマ由来ルール（.navbar-nav > li > a { color:#fff }）が上記の白系ガラスパネル背景と衝突し、未選択項目の文字が見えなくなるため上書き。 PC版と同じ配色（通常#828282／選択中#31A3DD）に揃える */ .jstb-modern .navbar-default .navbar-nav > li > a { color: #828282; } .jstb-modern .navbar-default .navbar-nav > li.active > a { color: #31A3DD; } } /* ---- Hero ---- */ .jstb-modern .animation-container { border-radius: 0 0 var(--jm-radius-lg) var(--jm-radius-lg); } .jstb-modern .animation-container::after { content: ''; position: absolute; inset: 0; background: rgba(3, 4, 40, 0.4); z-index: 2; pointer-events: none; } .jstb-modern .content h1 { font-weight: 800; letter-spacing: -0.02em; } .jstb-modern .content .hero-cta { margin-top: 1.75rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease forwards; animation-delay: 1.6s; } @media (prefers-reduced-motion: reduce) { .jstb-modern .content .hero-cta { opacity: 1; transform: none; animation: none; } } /* ---- 内側ページHero（hero-gradient、company/jobs/news/recruit/contact/security） ---- */ /* 分割レイアウト：左にテキスト、右に抽象ノードグラフィック（SVG） */ .jstb-modern .hero-gradient { background: linear-gradient(135deg, var(--jm-navy-800) 0%, var(--jm-navy-950) 100%); padding: var(--space-6) 24px; overflow: hidden; } .jstb-modern .hero-gradient .container { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 32px; } .jstb-modern .jm-hero-text { grid-column: 1; grid-row: 1; text-align: left; } .jstb-modern .jm-hero-graphic { grid-column: 2; grid-row: 1; width: 100%; max-width: 280px; height: auto; justify-self: end; align-self: center; overflow: visible; } .jstb-modern .jm-hero-graphic circle { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(0, 220, 255, 1)) drop-shadow(0 0 22px rgba(0, 220, 255, 0.8)); } .jstb-modern .jm-hero-graphic line { filter: drop-shadow(0 0 3px rgba(0, 200, 255, 0.7)); } @media (min-width: 768px) { .jstb-modern .jm-hero-graphic { display: block; } } .jstb-modern .jm-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 18px; } .jstb-modern .jm-breadcrumb a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease; } .jstb-modern .jm-breadcrumb a:hover { color: #fff; } .jstb-modern .jm-breadcrumb-sep { color: rgba(255, 255, 255, 0.35); } .jstb-modern .hero-gradient h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; padding-bottom: 0; display: block; } .jstb-modern .hero-gradient h1::after { content: none; } .jstb-modern .hero-gradient p { width: auto; margin: 14px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 1.05rem; } @media (max-width: 767px) { .jstb-modern .hero-gradient .container { display: block; position: relative; } .jstb-modern .jm-hero-text { position: relative; z-index: 1; } .jstb-modern .jm-hero-graphic { display: block; position: absolute; top: 50%; right: -30px; transform: translateY(-50%); width: 160px; max-width: none; opacity: 0.3; justify-self: auto; align-self: auto; z-index: 0; } } /* ---- セクション見出し（heading-lvl03、ページの大見出し） ---- */ .jstb-modern .heading-lvl03 { background: none; border-bottom: none; padding: 0; margin: 64px 0 28px; display: flex; align-items: center; gap: 16px; } .jstb-modern .heading-lvl03:first-of-type { margin-top: 0; } .jstb-modern .heading-lvl03::before { content: ''; width: 6px; height: 36px; border-radius: 4px; background: var(--jm-gradient); flex-shrink: 0; } .jstb-modern .heading-lvl03 h2 { color: var(--jm-navy-950); font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; } /* ---- welcome / 本文 ---- */ .jstb-modern .welcome { padding: 72px 0 80px; } .jstb-modern .welcome p, .jstb-modern .welcome font { line-height: 1.9; color: var(--jm-text-body); } /* ---- リード文（各セクション冒頭の導入文） ---- */ .jstb-modern .jm-lead { margin: 8px 0 32px; } .jstb-modern .jm-lead p { font-size: 1.15rem; color: var(--jm-text-strong); font-weight: 500; line-height: 1.8; margin-bottom: 8px; } .jstb-modern .jm-lead p:last-child { margin-bottom: 0; } /* 採用情報ページのように1文1段落が連続するリード文向け：語りのリズム（1文1行）は保ったまま行間・段落間だけ詰めて、縦に長くなりすぎるのを防ぐ（後続コンテンツがフォールドより下に押しやられる対策） */ .jstb-modern .jm-lead--tight p { line-height: 1.65; margin-bottom: 4px; } /* ---- 段落内サブ見出し・原則リスト（フォントタグ羅列を構造化した箇所） ---- */ .jstb-modern .jm-subheading { margin: 40px 0 18px; font-size: 1.1rem; font-weight: 700; color: var(--jm-navy-800); } .jstb-modern .jm-principle-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .jstb-modern .jm-principle-list > li { padding: 20px 24px; background: #fff; border: 1px solid rgba(15, 32, 55, 0.06); border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(3, 4, 94, 0.25); } .jstb-modern .jm-principle-title { display: block; font-weight: 700; color: var(--jm-text-strong); margin-bottom: 6px; font-size: 1.05rem; } .jstb-modern .jm-principle-list > li > p { margin: 0; color: var(--jm-text-body); line-height: 1.8; } .jstb-modern .jm-principle-list > li > ul { list-style: disc; margin: 8px 0 0 20px; padding: 0; } .jstb-modern .jm-principle-list > li > ul > li { color: var(--jm-text-body); line-height: 1.9; margin-bottom: 4px; } .jstb-modern .jm-signature { text-align: right; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(15, 32, 55, 0.08); } .jstb-modern .jm-signature-date { color: var(--jm-text-muted); font-size: 0.9rem; margin-bottom: 6px; } .jstb-modern .jm-signature-name { color: var(--jm-text-strong); font-weight: 600; line-height: 1.8; margin: 0; } /* ---- お知らせリスト（news.html） ---- */ .jstb-modern .jm-news-list { list-style: none; padding: 0; margin: 40px 0 0; } .jstb-modern .jm-news-list li { padding: 24px 4px; border-bottom: 1px solid rgba(15, 32, 55, 0.08); transition: padding-left 0.25s ease; } .jstb-modern .jm-news-list li:first-child { padding-top: 0; } .jstb-modern .jm-news-list li:last-child { border-bottom: none; } .jstb-modern .jm-news-list li:hover { padding-left: 12px; } .jstb-modern .jm-news-list p { margin: 0; color: var(--jm-text-body); line-height: 1.9; } .jstb-modern .jm-news-list p + p { margin-top: 6px; } /* ---- お問い合わせカード（contact.html） ---- */ .jstb-modern .jm-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; } .jstb-modern .jm-contact-card { background: #fff; border: 1px solid rgba(15, 32, 55, 0.06); border-radius: var(--jm-radius-lg); padding: 28px 26px; box-shadow: var(--jm-shadow-soft); } .jstb-modern .jm-contact-card h3 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 700; color: var(--jm-text-strong); padding-bottom: 14px; border-bottom: 1px solid rgba(15, 32, 55, 0.08); } .jstb-modern .jm-contact-card dl.jstbjpn-plain { margin: 0; } .jstb-modern .jm-contact-card dt { margin: 0 0 4px; color: var(--jm-text-muted); font-size: 0.85rem; } .jstb-modern .jm-contact-card dd { margin: 0 0 12px; } .jstb-modern .jm-contact-card dd:last-child { margin-bottom: 0; } .jstb-modern .jm-contact-card dd.department { width: auto; color: var(--jm-text-body); font-weight: 600; } @media (max-width: 767px) { .jstb-modern .jm-contact-grid { grid-template-columns: 1fr; } } /* ---- データテーブル ---- */ .jstb-modern .jstbjpn-table-A01 { margin-top: 32px; border-radius: var(--jm-radius-lg); overflow: hidden; box-shadow: var(--jm-shadow-soft); } .jstb-modern .jstbjpn-table-A01-unit th { background: #f5fbff; color: var(--jm-text-strong); font-weight: 700; } .jstb-modern .jstbjpn-table-A01-unit td { color: var(--jm-text-body); } .jstb-modern .jstbjpn-table-A01-unit tr:hover th, .jstb-modern .jstbjpn-table-A01-unit tr:hover td { background: #f0f9ff; } /* ---- CTAボタン（グラデーション・pill・glow） ---- */ .jstb-modern .cta-button { display: inline-block; padding: 16px 44px; background: var(--jm-gradient); color: #fff; font-weight: 700; letter-spacing: 0.01em; border-radius: var(--jm-radius-pill); text-decoration: none; box-shadow: var(--jm-glow); transition: transform 0.25s ease, box-shadow 0.25s ease; pointer-events: auto; } .jstb-modern .cta-button:hover { transform: translateY(-3px); box-shadow: 0 16px 50px -10px rgba(0, 180, 216, 0.65); color: #fff; text-decoration: none; } .jstb-modern .cta-button:active { transform: translateY(-1px) scale(0.97); } /* ---- サービスカード：ガラス風エレベーテッドカード ---- */ .jstb-modern .team { padding: 86px 0 96px; background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%); } .jstb-modern .service { margin-bottom: 30px; } .jstb-modern .enigma_service_area { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 30px; background: #fff; border: 1px solid rgba(15, 32, 55, 0.06); border-radius: var(--jm-radius-lg); box-shadow: var(--jm-shadow-soft); height: 100%; position: relative; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; text-decoration: none; cursor: pointer; } .jstb-modern .enigma_service_area::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--jm-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .jstb-modern .enigma_service_area:hover::before { transform: scaleX(1); } .jstb-modern .enigma_service_area:hover { transform: translateY(-8px); box-shadow: var(--jm-shadow-hover); } .jstb-modern .enigma_service_iocn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 0 22px 0; border-radius: 18px; color: #fff; font-size: 1.6rem; box-shadow: var(--jm-glow); position: relative; overflow: hidden; } /* 旧デザインのワイプ演出を復元：::beforeが常時グラデーション青の下地、 ::afterが白いパネルで、ホバー時に上から下へスライドインして白地に、離れると下から上へ退いて青に戻る（要素自体の高さの100%だけ上に隠しておき、ホバーでtranslateY(0)まで下ろす） */ .jstb-modern .enigma_service_iocn::before { content: ''; position: absolute; inset: 0; background: var(--jm-gradient); z-index: 0; } .jstb-modern .enigma_service_iocn::after { content: ''; position: absolute; inset: 0; background: #fff; z-index: 0; transform: translateY(-100%); transition: transform 0.5s ease; } .jstb-modern .enigma_service_area:hover .enigma_service_iocn::after { transform: translateY(0); } .jstb-modern .enigma_service_iocn i { position: relative; z-index: 1; transition: color 0.5s ease; } .jstb-modern .enigma_service_area:hover .enigma_service_iocn i { color: #31A3DD; } .jstb-modern .enigma_service_detail h3 { margin-top: 0; margin-bottom: 12px; font-size: 1.25rem; font-weight: 700; color: var(--jm-text-strong); } .jstb-modern .enigma_service_detail p { margin-bottom: 0; color: var(--jm-text-body); line-height: 1.8; } /* ---- 写真カード（w3_agile_team_grid：jobs.htmlのサービス紹介） ---- */ .jstb-modern .w3_agile_team_grids { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; } .jstb-modern .w3_agile_team_grid { float: none; width: calc(33.333% - 16px); background: #fff; border: 1px solid rgba(15, 32, 55, 0.06); border-radius: var(--jm-radius-lg); overflow: hidden; box-shadow: var(--jm-shadow-soft); transition: transform 0.35s ease, box-shadow 0.35s ease; } .jstb-modern .w3_agile_team_grid:hover { transform: translateY(-8px); box-shadow: var(--jm-shadow-hover); } .jstb-modern .hover14.column { margin: 0; } .jstb-modern .hover14.column img { width: 100%; height: 220px; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); } .jstb-modern .w3_agile_team_grid h3 { margin: 20px 24px 8px; font-size: 1.15rem; font-weight: 700; color: var(--jm-text-strong); } .jstb-modern .w3_agile_team_grid p { margin: 0 24px 24px; color: var(--jm-text-body); line-height: 1.8; } @media (max-width: 767px) { .jstb-modern .w3_agile_team_grid { width: 100%; } } /* ---- CTAセクション：ダークグラスバナー ---- */ .jstb-modern .cta-section { padding: 90px 24px; margin: 0 20px; background: radial-gradient(ellipse at top, var(--jm-navy-800) 0%, var(--jm-navy-950) 70%); border-radius: var(--jm-radius-lg); text-align: center; position: relative; overflow: hidden; } .jstb-modern .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(0, 180, 216, 0.3), transparent 42%), radial-gradient(circle at 82% 80%, rgba(0, 119, 182, 0.28), transparent 42%); } .jstb-modern .cta-section .container { position: relative; z-index: 1; } .jstb-modern .cta-text { color: #fff; font-weight: 600; font-size: 1.5rem; margin-bottom: 28px; } .jstb-modern .cta-section .cta-button { background: #fff; color: var(--jm-navy-900); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.45); } .jstb-modern .cta-section .cta-button:hover { color: var(--jm-navy-900); } /* ---- フッター：ディープネイビー ---- */ .jstb-modern .footer-top { background: #0a1a5c; padding-top: 72px; } .jstb-modern .footer-top h3 { letter-spacing: 0.06em; font-weight: 700; } .jstb-modern .footer-w3layouts { border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ---- Back-to-topボタン ---- */ .jstb-modern .scrollup { width: 48px; height: 48px; line-height: 48px; border-radius: var(--jm-radius-pill); background: var(--jm-gradient); box-shadow: var(--jm-glow); opacity: 1; } .jstb-modern .scrollup:hover, .jstb-modern .scrollup:focus { background: var(--jm-gradient); opacity: 0.9; } /* ---- レスポンシブ ---- */ @media (max-width: 767px) { .jstb-modern .team { padding: 58px 0 64px; } .jstb-modern .cta-section { margin: 0 12px; padding: 60px 20px; } .jstb-modern .enigma_service_area { align-items: center; text-align: center; } .jstb-modern .enigma_service_iocn { margin: 0 0 18px 0; } } @media (prefers-reduced-motion: reduce) { .jstb-modern .cta-button, .jstb-modern .enigma_service_area, .jstb-modern .header { transition: none; } }