/* ===================================================================== hp-theme.css — loftal.jp 全ページ共通リニューアルテーマ - base.html.twig で client.id==1 のときのみ + 本CSS を読み込む - 既存 style.css / Bootstrap を壊さず、上書きで統一感を出す - トップ (/) は templates/main/index/index.twig 側のインラインCSSが詳細スタイルを持つ (hp-renewal クラス配下) ため、本 CSS では共通ガワ + 各ページ UI を担当 ===================================================================== */ /* --------- 1. デザイントークン --------- */ body.hp-theme { --hp-navy-900:#061230; --hp-navy-800:#0A1F4D; --hp-navy-700:#14306E; --hp-navy-600:#1E3A8A; --hp-navy-500:#3B5BC4; --hp-navy-100:#DCE4F5; --hp-navy-050:#EEF2FA; --hp-accent:#2563EB; --hp-accent-2:#60A5FA; --hp-ink:#0A1230; --hp-muted:#5D6785; --hp-line:#E5E7EB; --hp-paper:#FAFAF7; --hp-paper-2:#F4F3EE; --hp-ok:#1FB36B; font-family:"Inter","Zen Kaku Gothic New","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; color:var(--hp-ink); background:var(--hp-paper); -webkit-font-smoothing:antialiased; font-feature-settings:"palt"; line-height:1.75; } /* JP-specific & mono/serif helpers (共用) */ body.hp-theme .jp, body.hp-theme h1, body.hp-theme h2, body.hp-theme h3, body.hp-theme h4, body.hp-theme .page-title-heading, body.hp-theme .l-page-title { font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; } body.hp-theme .serif { font-family:"Instrument Serif","Zen Kaku Gothic New",serif; font-style:italic; font-weight:400; } body.hp-theme .mono { font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.hp-theme ::selection { background:var(--hp-accent); color:#fff; } body.hp-theme a { transition:color .2s; } body.hp-theme a:hover { text-decoration:none; } /* --------- 2. ヘッダー (.header-type1) --------- */ /* 既存は白bg + bootstrap grid + 中央寄せロゴ + 右メニュー。新テーマでは navy tint + 左ロゴ + 右メニュー（テキストリンクをよりミニマルに） */ body.hp-theme .header-type1 { background:#fff !important; border-bottom:1px solid var(--hp-line); } body.hp-theme .header-type1__pc .container { padding-top:16px !important; padding-bottom:16px !important; } body.hp-theme .header-type1 .header-menu ul { gap:0; } body.hp-theme .header-type1 .header-menu li { padding:0; } body.hp-theme .header-type1 .header-menu li a { color:var(--hp-navy-800); padding:8px 14px; border-radius:6px; font-size:14px; font-weight:500; transition:background .2s, color .2s; position:relative; } body.hp-theme .header-type1 .header-menu li a:hover { background:var(--hp-navy-050); color:var(--hp-accent); } body.hp-theme .header-type1 .header-menu li a .tiny-font, body.hp-theme .header-type1 .header-menu li a .font-font-light { font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.1em; font-size:9.5px !important; text-transform:uppercase; color:var(--hp-muted); display:block; margin-top:2px; } body.hp-theme .header-type1 .header-menu li a.font-bold, body.hp-theme .header-type1 .header-menu li a[class*="font-bold"] { color:var(--hp-accent); } body.hp-theme .header-type1 .header-menu li a.font-bold::after { content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--hp-accent); border-radius:1px; } /* site-brand (Loftalロゴ + 株式会社ロフタル) */ body.hp-theme .site-brand-double__title, body.hp-theme [class*="site-brand"] h1, body.hp-theme [class*="site-brand"] .site-brand-double__title { font-family:"Zen Kaku Gothic New",sans-serif; color:var(--hp-navy-800); letter-spacing:-.01em; } body.hp-theme [class*="site-brand"] img { filter:none; } /* --------- 3. モバイルヘッダー --------- */ body.hp-theme .header-type1__mobile, body.hp-theme .header-mobile { background:#fff !important; border-bottom:1px solid var(--hp-line); } body.hp-theme .drawer-hamburger-icon, body.hp-theme .drawer-hamburger-icon::before, body.hp-theme .drawer-hamburger-icon::after { background-color:var(--hp-navy-800) !important; } /* --------- 4. ページタイトル帯 (.l-page-title) --------- */ /* 既存は濃紺ベタ塗り / 新テーマはグラデーション + タイポ強化 + 小さな装飾 */ body.hp-theme .l-page-title { background:linear-gradient(135deg, var(--hp-navy-800) 0%, var(--hp-navy-600) 100%) !important; background-size:cover !important; background-position:center !important; padding:60px 0 !important; position:relative; overflow:hidden; color:#fff; } body.hp-theme .l-page-title::before { content:""; position:absolute; inset:0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.25), transparent), radial-gradient(1.5px 1.5px at 90% 20%, rgba(255,255,255,.3), transparent); opacity:.7; pointer-events:none; } body.hp-theme .l-page-title::after { content:""; position:absolute; top:-60px; right:-80px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, var(--hp-accent) 0%, transparent 70%); opacity:.25; filter:blur(40px); pointer-events:none; } body.hp-theme .l-page-title .container { position:relative; z-index:1; } body.hp-theme .l-page-title .large-font, body.hp-theme .l-page-title > div > div > div { font-size:38px !important; font-weight:700 !important; letter-spacing:-.02em; line-height:1.15; color:#fff; } @media (max-width:768px){ body.hp-theme .l-page-title { padding:40px 0 !important; } body.hp-theme .l-page-title .large-font { font-size:28px !important; } } /* --------- 5. パンくず --------- */ body.hp-theme .breadcrumbs { padding:0; display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; margin:0; } body.hp-theme .bg-thin-gray.font-dark-gray[aria-label*="パンくず"], body.hp-theme nav[aria-label*="パンくず"] { background:transparent !important; border-bottom:1px solid var(--hp-line); padding-top:12px !important; padding-bottom:12px !important; } body.hp-theme .breadcrumbs__item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--hp-muted); } body.hp-theme .breadcrumbs__item + .breadcrumbs__item::before { content:"/"; color:var(--hp-muted); opacity:.5; } body.hp-theme .breadcrumbs__link { color:var(--hp-muted) !important; text-decoration:none; font-family:"Inter","Zen Kaku Gothic New",sans-serif; } body.hp-theme .breadcrumbs__link:hover { color:var(--hp-accent) !important; } body.hp-theme .breadcrumbs__item [aria-current="page"] { color:var(--hp-navy-800); font-weight:600; } body.hp-theme .breadcrumbs-wave { display:none !important; /* 既存の波形SVGは撤去、モダンなライン区切りに */ } /* --------- 6. 見出し共通 --------- */ /* 既存 .heading-circle-bottom big-font を新スタイルに */ body.hp-theme .heading-circle-bottom { font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.02em; line-height:1.2; position:relative; padding-bottom:20px !important; margin-top:24px !important; } body.hp-theme .heading-circle-bottom::after { content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:40px; height:3px; background:linear-gradient(90deg, var(--hp-accent) 0%, var(--hp-accent-2) 100%); border-radius:2px; } body.hp-theme .big-font { font-size:32px !important; } body.hp-theme .heading-circle-bottom.big-font { font-size:32px !important; } @media (max-width:768px){ body.hp-theme .heading-circle-bottom.big-font, body.hp-theme .big-font { font-size:24px !important; } } /* 本文内見出し */ body.hp-theme .fr-view h1, body.hp-theme .fr-view h2, body.hp-theme .fr-view h3 { font-family:"Zen Kaku Gothic New",sans-serif; color:var(--hp-navy-800); letter-spacing:-.01em; } body.hp-theme .fr-view h2 { font-size:24px; margin-top:2em; margin-bottom:.8em; padding-left:14px; border-left:4px solid var(--hp-accent); line-height:1.4; } body.hp-theme .fr-view h3 { font-size:19px; margin-top:1.8em; margin-bottom:.6em; line-height:1.4; color:var(--hp-navy-700); } /* --------- 7. ボタン --------- */ body.hp-theme .btn { display:inline-flex !important; align-items:center !important; gap:8px; padding:12px 22px !important; border-radius:999px !important; font-size:14px; font-weight:600; transition:transform .2s, box-shadow .2s, background .2s, color .2s; border:1px solid var(--hp-navy-800); background:#fff; color:var(--hp-navy-800); text-decoration:none; } body.hp-theme .btn:hover { background:var(--hp-navy-800); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(11,27,61,.15); text-decoration:none; } body.hp-theme .btn-primary { background:var(--hp-accent) !important; border-color:var(--hp-accent) !important; color:#fff !important; box-shadow:0 6px 18px rgba(37,99,235,.25); } body.hp-theme .btn-primary:hover { background:var(--hp-navy-800) !important; border-color:var(--hp-navy-800) !important; box-shadow:0 10px 26px rgba(11,27,61,.25); } /* --------- 8. カード共通 (blog, service, news) --------- */ /* 8-1. blog-list-card 既存 style.css が `.blog-list-card__item { flex: 0 0 32%; max-width: 32% }` で flex ベース 3 カラムを構築している。grid に差し替える際、 max-width: 32% が grid セル内で効いてカード超細になる事故があったため、 grid 化と同時に max-width / flex / ::after クリアランスを明示的に解除する。段階グリッド: - <576px : 1 列 - <992px : 2 列 - <1200px : 3 列 - >=1200px: 4 列（デスクトップ広ビュー） */ body.hp-theme .blog-list-card { display:grid !important; grid-template-columns:repeat(2, 1fr); gap:20px; list-style:none; padding:0; margin:0; width:100%; } body.hp-theme .blog-list-card::after { display:none !important; /* flex clear 用擬似要素、grid では不要 */ } body.hp-theme .blog-list-card__item { padding:0 !important; list-style:none; float:none !important; width:auto !important; max-width:none !important; /* 既存 32% 制約を解除 */ flex:unset !important; /* 既存 flex-basis を解除 */ margin:0 !important; /* 既存 margin-bottom:3rem を解除 */ } @media (max-width: 575.98px){ body.hp-theme .blog-list-card { grid-template-columns:1fr; gap:16px; } } @media (min-width: 992px){ body.hp-theme .blog-list-card { grid-template-columns:repeat(3, 1fr); } } @media (min-width: 1200px){ body.hp-theme .blog-list-card { grid-template-columns:repeat(4, 1fr); } } body.hp-theme .blog-list-card__item { padding:0; list-style:none; float:none; width:auto !important; } body.hp-theme .blog-list-card__link { display:block; background:#fff; border:1px solid var(--hp-line); border-radius:16px; overflow:hidden; height:100%; transition:transform .25s, box-shadow .25s, border-color .25s; color:var(--hp-ink) !important; text-decoration:none; } body.hp-theme .blog-list-card__link:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(11,27,61,.12); border-color:var(--hp-accent); text-decoration:none; } body.hp-theme .blog-list-card__image { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--hp-navy-050); } /* 既存 style.css の `.blog-list-card__image::before { padding-top: 52.5% }` を aspect-ratio 併用で二重高さにさせないよう無効化 */ body.hp-theme .blog-list-card__image::before { display:none !important; } body.hp-theme .blog-list-card__image > div { position:absolute; inset:0; width:100%; height:100%; background-size:cover !important; background-position:center !important; transition:transform .4s; } body.hp-theme .blog-list-card__link:hover .blog-list-card__image > div { transform:scale(1.05); } body.hp-theme .blog-list-card__link .label { display:inline-block; background:var(--hp-navy-800); color:#fff; padding:3px 10px; border-radius:4px; font-size:10.5px; font-weight:600; letter-spacing:.05em; margin:14px 14px 0; } body.hp-theme .blog-list-card__link .small-font { color:var(--hp-muted) !important; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px !important; letter-spacing:.04em; margin:14px 14px 0 0; } body.hp-theme .blog-list-card__title { font-weight:700 !important; font-size:15.5px; line-height:1.5; letter-spacing:-.005em; color:var(--hp-navy-800); padding:10px 14px; margin:0; } body.hp-theme .blog-list-card__keywords { color:var(--hp-muted); font-size:11.5px; padding:0 14px 16px; font-family:"JetBrains Mono",ui-monospace,monospace; } /* 8-2. custom-post-list-type1 (news 一覧) */ body.hp-theme .custom-post-list-type1 { max-width:920px; margin:0 auto; } body.hp-theme .custom-post-list-type1__row { display:grid; grid-template-columns:110px 110px 1fr auto; gap:20px; align-items:center; padding:24px 0; border-top:1px solid var(--hp-line); transition:padding-left .2s, background .2s; } body.hp-theme .custom-post-list-type1__row:hover { padding-left:8px; } body.hp-theme .custom-post-list-type1__row:last-child { border-bottom:1px solid var(--hp-line); } body.hp-theme .custom-post-list-type1__header { display:contents; } body.hp-theme .custom-post-list-type1__date { font-family:"JetBrains Mono",ui-monospace,monospace; color:var(--hp-muted); font-size:13px; letter-spacing:.04em; } body.hp-theme .custom-post-list-type1__label .label { background:var(--hp-navy-050); color:var(--hp-navy-800); padding:3px 10px; border:1px solid rgba(10,31,77,.12); border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:inline-block; width:fit-content; line-height:1.4; } body.hp-theme .custom-post-list-type1__main { display:contents; } body.hp-theme .custom-post-list-type1__link { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; grid-column:3 / span 2; color:var(--hp-navy-800) !important; text-decoration:none; } body.hp-theme .custom-post-list-type1__link:hover { color:var(--hp-accent) !important; text-decoration:none; } body.hp-theme .custom-post-list-type1__title { font-weight:500; font-size:16px; line-height:1.55; letter-spacing:.005em; } body.hp-theme .custom-post-list-type1__see { color:var(--hp-navy-800); transition:color .2s, transform .2s; } body.hp-theme .custom-post-list-type1__link:hover .custom-post-list-type1__see { color:var(--hp-accent); transform:translateX(4px); } @media (max-width:768px){ body.hp-theme .custom-post-list-type1__row { grid-template-columns:100px 1fr; gap:10px 12px; padding:20px 0; } body.hp-theme .custom-post-list-type1__link { grid-column:1 / -1; margin-top:6px; } body.hp-theme .custom-post-list-type1__title { font-size:14.5px; } } /* 8-3. service-list-card 既存 style.css が `.service-list-card__col { flex: 0 0 31%; max-width: 31%; margin: 0 1% 2.0rem }` で flex 3 カラム。grid 化時に max-width 31% が効いてカード細になるため明示解除。 ~length-1/2/gt2 の修飾子も含めて吸収する。 */ body.hp-theme .service-list-card, body.hp-theme .service-list-card.-length-1, body.hp-theme .service-list-card.-length-2, body.hp-theme .service-list-card.-length-gt2 { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; width:100%; margin:24px 0; justify-content:stretch; } body.hp-theme .service-list-card.-length-1 { grid-template-columns:minmax(260px, 480px); justify-content:center; } body.hp-theme .service-list-card.-length-2 { grid-template-columns:repeat(2, minmax(260px, 480px)); justify-content:center; } body.hp-theme .service-list-card::before, body.hp-theme .service-list-card::after { display:none !important; /* flex clear ダミー要素を無効化 */ } body.hp-theme .service-list-card__col { display:block; background:#fff; border:1px solid var(--hp-line); border-radius:18px; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s; color:var(--hp-ink) !important; text-decoration:none; flex:unset !important; max-width:none !important; margin:0 !important; } /* 画像の ::before アスペクト確保を無効化 (aspect-ratio 利用) */ body.hp-theme .service-list-card__image-wrap::before { display:none !important; } body.hp-theme .service-list-card__col:hover { transform:translateY(-4px); box-shadow:0 20px 44px rgba(11,27,61,.14); border-color:var(--hp-accent); text-decoration:none; } body.hp-theme .service-list-card__image-wrap { aspect-ratio:16/9; overflow:hidden; background:var(--hp-navy-050); } body.hp-theme .service-list-card__image { width:100%; height:100%; background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; transition:transform .4s; } body.hp-theme .service-list-card__image.-cover { background-size:cover !important; } body.hp-theme .service-list-card__col:hover .service-list-card__image { transform:scale(1.04); } body.hp-theme .service-list-card__title { font-weight:700; font-size:18px; color:var(--hp-navy-800); margin-bottom:8px; letter-spacing:-.01em; line-height:1.35; } body.hp-theme .service-list-card__abstract { font-size:13.5px; color:var(--hp-muted); line-height:1.75; } body.hp-theme .service-list-card__bottom__bar { display:inline-block; width:32px; height:2px; background:var(--hp-accent); border-radius:2px; transition:width .3s; } body.hp-theme .service-list-card__col:hover .service-list-card__bottom__bar { width:80px; } /* --------- 9. ラベル (.label) --------- */ body.hp-theme .label { background:var(--hp-navy-800); color:#fff; padding:3px 10px; border-radius:4px; font-size:10.5px; font-weight:600; letter-spacing:.05em; } /* --------- 10. about / 会社概要等の本文エリア --------- */ body.hp-theme .fr-view { font-size:16px; line-height:2; color:var(--hp-ink); } body.hp-theme .fr-view strong, body.hp-theme .fr-view .font-bold { color:var(--hp-navy-800); font-weight:700; } body.hp-theme .fr-view a { color:var(--hp-accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } body.hp-theme .fr-view a:hover { text-decoration-thickness:2px; } /* center 中央寄せタイトル (about page の H2 "楽を追求する" 等) */ body.hp-theme .font-main-c, body.hp-theme .font-accent, body.hp-theme .page-content h2.text-center, body.hp-theme .page-content h3 { color:var(--hp-navy-800); } /* 会社概要テーブル */ body.hp-theme table { border-collapse:collapse; } body.hp-theme table th, body.hp-theme table td { padding:14px 18px; border-bottom:1px solid var(--hp-line); font-size:14.5px; line-height:1.8; vertical-align:top; } body.hp-theme table th { font-weight:700; color:var(--hp-navy-800); background:var(--hp-navy-050); width:160px; text-align:left; } body.hp-theme table td { color:var(--hp-ink); } /* --------- 11. member/detail (代表挨拶) --------- */ /* 既存の構造: 画像 + 名前 + 説明テーブル。テーマで装飾強化 */ body.hp-theme .member-detail, body.hp-theme [class*="member"] .row { margin-top:32px; } body.hp-theme [class*="member"] img { border-radius:14px; box-shadow:0 16px 40px rgba(11,27,61,.15); border:1px solid var(--hp-line); } /* --------- 12. ブログ詳細本文 --------- */ body.hp-theme .custom-post-detail__title, body.hp-theme .blog-detail__title { font-family:"Zen Kaku Gothic New",sans-serif; font-size:28px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.015em; line-height:1.4; } body.hp-theme .side-list__title, body.hp-theme .side h2, body.hp-theme .side h3 { font-family:"Zen Kaku Gothic New",sans-serif; font-size:15px; font-weight:700; color:var(--hp-navy-800); padding-bottom:8px; margin-bottom:14px; border-bottom:2px solid var(--hp-navy-800); letter-spacing:-.005em; } /* --------- 13. フッター --------- */ /* 既存 .bg-sub.font-sub-c を新デザインに */ body.hp-theme footer.bg-sub { background:var(--hp-navy-900) !important; color:rgba(255,255,255,.85) !important; padding:80px 0 40px !important; border-top:none; position:relative; overflow:hidden; } body.hp-theme footer.bg-sub::before { content:"LOFTAL"; position:absolute; bottom:30px; left:-20px; right:0; font-size:clamp(80px, 14vw, 200px); font-weight:700; letter-spacing:-.04em; color:rgba(255,255,255,.04); pointer-events:none; line-height:.85; white-space:nowrap; overflow:hidden; } body.hp-theme footer.bg-sub > * { position:relative; z-index:1; } body.hp-theme footer.bg-sub .font-main-c, body.hp-theme footer.bg-sub a { color:rgba(255,255,255,.85) !important; } body.hp-theme footer.bg-sub a:hover { color:var(--hp-accent-2) !important; text-decoration:none; } body.hp-theme footer.bg-sub ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; padding:0; margin:0; list-style:none; } body.hp-theme footer.bg-sub ul li { padding:0; } body.hp-theme footer.bg-sub ul li a { padding:4px 0; font-size:13.5px; font-weight:500; transition:color .2s; } body.hp-theme footer.bg-sub .small-font { font-size:12px !important; color:rgba(255,255,255,.5) !important; } body.hp-theme footer.bg-sub .small-font:hover { color:rgba(255,255,255,.85) !important; } body.hp-theme .scroll-to-top { background:var(--hp-navy-800) !important; color:#fff !important; border-radius:999px !important; padding:8px 14px !important; box-shadow:0 6px 18px rgba(11,27,61,.25); } /* footer の copyright & powered by */ body.hp-theme footer.bg-sub [class*="col-auto"]:last-child, body.hp-theme footer.bg-sub [class*="align-self-center"] { color:rgba(255,255,255,.5); font-size:11.5px; letter-spacing:.02em; font-family:"JetBrains Mono",ui-monospace,monospace; } /* footer-brand (フッター内のロゴ) — 既存はsvgが白地を想定しているため背景調整 */ body.hp-theme footer.bg-sub img { filter:brightness(0) invert(1); opacity:.9; } /* --------- 14. fixed (画面固定の CTA/SNS バー) --------- */ body.hp-theme .l-fixed, body.hp-theme [class*="fixed"] [class*="bn"] { /* 既存 fixed のデザインはそのまま維持 */ } /* --------- 15. ページ全体の container 調整 --------- */ body.hp-theme main > .container, body.hp-theme main .container-fluid > .container { max-width:1200px; } body.hp-theme .py-4, body.hp-theme .py-5 { padding-top:48px !important; padding-bottom:48px !important; } /* --------- 16. テーマ外の bg-bg は paper にマップ --------- */ body.hp-theme .bg-bg { background:var(--hp-paper) !important; } body.hp-theme .bg-thin-gray { background:var(--hp-navy-050) !important; } body.hp-theme .font-dark-gray { color:var(--hp-muted) !important; } body.hp-theme .font-bg-bottom { border-color:var(--hp-line) !important; } /* --------- 17. prefers-reduced-motion --------- */ @media (prefers-reduced-motion: reduce){ body.hp-theme * { animation:none !important; transition:none !important; } } /* --------- 18. モバイル微調整 --------- */ @media (max-width:768px){ body.hp-theme footer.bg-sub { padding:60px 0 32px !important; } body.hp-theme footer.bg-sub ul { gap:6px 16px; } body.hp-theme footer.bg-sub ul li a { font-size:13px; } body.hp-theme .py-4, body.hp-theme .py-5 { padding-top:32px !important; padding-bottom:32px !important; } } /* ============================================================ 19. Blog リニューアル (client.id==1 の /blog ページ専用) - Hero band (navy gradient) / sticky filter / featured post / grid / pagination - body に .hp-blog-renewal を付与して適用 ============================================================ */ .hp-blog-renewal { background:var(--hp-paper); color:var(--hp-ink); font-family:"Inter","Zen Kaku Gothic New","Noto Sans JP",sans-serif; } .hp-blog-renewal * { box-sizing:border-box; } /* -- Hero band -- */ .hp-blog-renewal .hp-blog-hero { padding:120px 40px 48px; background:linear-gradient(180deg, var(--hp-navy-800) 0%, var(--hp-navy-700) 100%); color:#fff; position:relative; overflow:hidden; } .hp-blog-renewal .hp-blog-hero::before { content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(circle at 75% 40%, rgba(96,165,250,.2), transparent 50%); } .hp-blog-renewal .hp-blog-hero__wrap { max-width:1320px;margin:0 auto;position:relative; } .hp-blog-renewal .hp-blog-hero__eye { font-size:11px;letter-spacing:.2em;color:var(--hp-accent-2);margin-bottom:16px; font-family:"JetBrains Mono",ui-monospace,monospace; } .hp-blog-renewal .hp-blog-hero__grid { display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:flex-end; } .hp-blog-renewal .hp-blog-hero__title { font-size:clamp(32px,3.8vw,52px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; } .hp-blog-renewal .hp-blog-hero__title .serif { color:var(--hp-accent-2); font-style:italic; font-family:"Instrument Serif","Zen Kaku Gothic New",serif; font-weight:400; } .hp-blog-renewal .hp-blog-hero__lead { font-size:14px;color:rgba(255,255,255,.7);line-height:1.8;margin:0;max-width:380px; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; } /* -- Sticky filter bar -- */ .hp-blog-renewal .hp-blog-filter { position:sticky;top:0;z-index:10; background:rgba(250,250,247,.9); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--hp-line); } .hp-blog-renewal .hp-blog-filter__wrap { max-width:1320px;margin:0 auto;padding:14px 40px; display:flex;align-items:center;gap:24px;flex-wrap:wrap; } .hp-blog-renewal .hp-blog-filter__cats { display:flex; gap:4px; flex-wrap:wrap; } .hp-blog-renewal .hp-blog-filter__cat { padding:8px 16px;border-radius:999px;border:1px solid var(--hp-line); background:transparent;color:var(--hp-navy-800) !important; font-size:13px;font-weight:500; transition:all .2s;text-decoration:none; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; } .hp-blog-renewal .hp-blog-filter__cat:hover { border-color:var(--hp-navy-800); background:var(--hp-navy-050); text-decoration:none; } .hp-blog-renewal .hp-blog-filter__cat.is-active { background:var(--hp-navy-800) !important;color:#fff !important;border-color:var(--hp-navy-800); } .hp-blog-renewal .hp-blog-filter__spacer { flex:1; } .hp-blog-renewal .hp-blog-filter__search { display:flex;align-items:center;gap:8px;padding:8px 14px; border:1px solid var(--hp-line);border-radius:999px;background:#fff;min-width:260px; color:var(--hp-muted); } .hp-blog-renewal .hp-blog-filter__search input { border:none !important;outline:none !important;background:transparent !important; font-size:13px;flex:1;font-family:inherit;padding:0;color:var(--hp-ink); box-shadow:none !important; } .hp-blog-renewal .hp-blog-filter__count { font-size:11px;color:var(--hp-muted);letter-spacing:.1em; font-family:"JetBrains Mono",ui-monospace,monospace; } /* -- Featured -- */ .hp-blog-renewal .hp-blog-featured { max-width:1320px;margin:0 auto;padding:60px 40px 20px; } .hp-blog-renewal .hp-blog-featured__card { display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center; padding:32px;border-radius:24px;background:#fff;border:1px solid var(--hp-line); transition:transform .3s, box-shadow .3s; text-decoration:none;color:inherit !important; } .hp-blog-renewal .hp-blog-featured__card:hover { transform:translateY(-2px);box-shadow:0 20px 50px rgba(10,31,77,.1); color:inherit !important;text-decoration:none; } /* Featured 画像ラッパー: badge の位置決め用 */ .hp-blog-renewal .hp-blog-featured__image-wrap { position:relative; border-radius:16px; overflow:hidden; background:var(--hp-navy-050); } /* 方式: 画像の自然なアスペクト比で表示 (上下余白なし) */ .hp-blog-renewal img.hp-blog-featured__image { display:block;width:100%;height:auto; object-fit:contain; border-radius:0; } /* フォールバック (画像なし) のときだけグラデを敷く div */ .hp-blog-renewal div.hp-blog-featured__image--fallback { aspect-ratio:16/10; background:linear-gradient(135deg, var(--hp-navy-800), var(--hp-accent)); } .hp-blog-renewal .hp-blog-featured__image::before { content:"";position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(circle at 30% 40%, rgba(96,165,250,.5), transparent 50%), radial-gradient(circle at 70% 70%, rgba(37,99,235,.3), transparent 50%); } .hp-blog-renewal .hp-blog-featured__badge { position:absolute;top:20px;left:20px;z-index:1; padding:5px 12px;border-radius:999px; background:rgba(255,255,255,.15);backdrop-filter:blur(10px);color:#fff; font-size:11px;font-weight:600;letter-spacing:.05em; font-family:"JetBrains Mono",ui-monospace,monospace; } .hp-blog-renewal .hp-blog-featured__body { min-width:0; } .hp-blog-renewal .hp-blog-featured__meta { display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap; } .hp-blog-renewal .hp-blog-featured__cat { padding:4px 10px;border-radius:999px;color:#fff; font-size:11px;font-weight:600;letter-spacing:.04em; font-family:"JetBrains Mono",ui-monospace,monospace; text-transform:uppercase; background:var(--cat-color, var(--hp-accent)); } .hp-blog-renewal .hp-blog-featured__date { font-size:14px;color:var(--hp-muted); font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.02em; } .hp-blog-renewal .hp-blog-featured__title { font-size:32px;line-height:1.25;letter-spacing:-.02em;font-weight:700; color:var(--hp-navy-800);margin:0 0 14px; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; } .hp-blog-renewal .hp-blog-featured__keywords { font-size:12px;color:var(--hp-muted);margin:0; font-family:"JetBrains Mono",ui-monospace,monospace; } /* -- Grid -- */ .hp-blog-renewal .hp-blog-grid { max-width:1320px;margin:0 auto;padding:40px 40px 80px; } .hp-blog-renewal .hp-blog-grid__items { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; list-style:none;padding:0;margin:0; } .hp-blog-renewal .hp-blog-card { background:#fff;border-radius:16px;overflow:hidden; border:1px solid var(--hp-line); transition:transform .25s, box-shadow .25s, border-color .25s; display:flex;flex-direction:column; text-decoration:none;color:inherit !important; } .hp-blog-renewal .hp-blog-card:hover { transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,31,77,.08); border-color:var(--cat-color, var(--hp-accent)); text-decoration:none;color:inherit !important; } /* Grid カード画像: は自然なアスペクト比で表示 (画像の高さが可変) fallback div は 16:9 固定グラデ */ .hp-blog-renewal img.hp-blog-card__image { display:block;width:100%;height:auto; object-fit:contain; background:var(--hp-navy-050); } .hp-blog-renewal div.hp-blog-card__image--fallback { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg, var(--cat-color, var(--hp-accent)) 0%, var(--hp-navy-800) 100%); } .hp-blog-renewal div.hp-blog-card__image--fallback::after { content:attr(data-label); position:absolute;right:18px;bottom:10px; font-size:96px;line-height:.8;color:rgba(255,255,255,.15); font-family:"Instrument Serif", serif;font-style:italic; } .hp-blog-renewal .hp-blog-card__body { padding:22px;flex:1;display:flex;flex-direction:column; } .hp-blog-renewal .hp-blog-card__meta { display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap; } .hp-blog-renewal .hp-blog-card__cat { padding:3px 8px;border-radius:4px; border:1px solid var(--cat-color, var(--hp-accent)); color:var(--cat-color, var(--hp-accent)); font-size:10px;font-weight:600;letter-spacing:.04em; font-family:"JetBrains Mono",ui-monospace,monospace; text-transform:uppercase; background:transparent; } .hp-blog-renewal .hp-blog-card__date { font-size:13px;color:var(--hp-muted); font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.02em; } .hp-blog-renewal .hp-blog-card__title { font-size:16.5px;line-height:1.5;font-weight:700; color:var(--hp-navy-800);letter-spacing:-.005em;margin:0 0 14px; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; } .hp-blog-renewal .hp-blog-card__foot { display:flex;align-items:center;justify-content:space-between;gap:10px; padding-top:14px;margin-top:auto; border-top:1px solid var(--hp-line);font-size:11px; } .hp-blog-renewal .hp-blog-card__keywords { color:var(--hp-muted); font-family:"JetBrains Mono",ui-monospace,monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0; } .hp-blog-renewal .hp-blog-card__more { color:var(--hp-accent);font-weight:600;flex-shrink:0; font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.08em; } .hp-blog-renewal .hp-blog-card:hover .hp-blog-card__more { transform:translateX(2px); } /* -- Category color mapping (data-cat) -- */ .hp-blog-renewal [data-cat*="PigeonCloud"] { --cat-color: #2563EB; } .hp-blog-renewal [data-cat*="AI"] { --cat-color: #8B5CF6; } .hp-blog-renewal [data-cat*="受託"] { --cat-color: #10B981; } .hp-blog-renewal [data-cat*="データベース"]{ --cat-color: #2563EB; } .hp-blog-renewal [data-cat*="比較"] { --cat-color: #F59E0B; } .hp-blog-renewal [data-cat*="新規事業"] { --cat-color: #EC4899; } .hp-blog-renewal [data-cat*="マーケティング"]{ --cat-color: #EF4444; } /* -- Pagination -- */ .hp-blog-renewal .hp-blog-pager { display:flex;justify-content:center;align-items:center;gap:4px;margin-top:60px; flex-wrap:wrap; } .hp-blog-renewal .hp-blog-pager a, .hp-blog-renewal .hp-blog-pager span { width:40px;height:40px;border-radius:8px; border:1px solid var(--hp-line);background:#fff;color:var(--hp-navy-800); font-size:13px;font-weight:500; display:grid;place-items:center; font-family:"JetBrains Mono",ui-monospace,monospace; text-decoration:none;transition:all .2s; } .hp-blog-renewal .hp-blog-pager a:hover { background:var(--hp-navy-050);border-color:var(--hp-navy-800); text-decoration:none;color:var(--hp-navy-800); } .hp-blog-renewal .hp-blog-pager .is-active { background:var(--hp-navy-800);color:#fff;border-color:var(--hp-navy-800); } .hp-blog-renewal .hp-blog-pager .is-disabled { opacity:.3;cursor:not-allowed; } /* -- Empty state -- */ .hp-blog-renewal .hp-blog-empty { text-align:center;padding:80px 20px;color:var(--hp-muted); font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; } /* -- Responsive -- */ @media (max-width: 1024px) { .hp-blog-renewal .hp-blog-hero__grid { grid-template-columns:1fr; gap:24px; } .hp-blog-renewal .hp-blog-featured__card { grid-template-columns:1fr; gap:20px; padding:20px; } .hp-blog-renewal .hp-blog-grid__items { grid-template-columns:repeat(2,1fr); } } @media (max-width: 768px) { .hp-blog-renewal .hp-blog-hero { padding:80px 20px 32px; } .hp-blog-renewal .hp-blog-filter__wrap { padding:12px 20px; gap:12px; } .hp-blog-renewal .hp-blog-filter__search { min-width:0; width:100%; order:3; } .hp-blog-renewal .hp-blog-filter__count { order:2; margin-left:auto; } .hp-blog-renewal .hp-blog-featured { padding:32px 20px 16px; } .hp-blog-renewal .hp-blog-featured__card { padding:16px; border-radius:16px; } .hp-blog-renewal .hp-blog-featured__title { font-size:22px; } .hp-blog-renewal .hp-blog-grid { padding:24px 20px 60px; } .hp-blog-renewal .hp-blog-grid__items { grid-template-columns:1fr; } .hp-blog-renewal .hp-blog-pager { gap:2px; } .hp-blog-renewal .hp-blog-pager a, .hp-blog-renewal .hp-blog-pager span { width:36px; height:36px; font-size:12px; } } /* ===================================================================== 20. About リニューアル (page.url == 'about') - hp-about ラッパー配下に Hero / Philosophy / Fact / Access / Timeline / CTA ===================================================================== */ body.hp-theme .hp-about { background:var(--hp-paper); color:var(--hp-ink); line-height:1.75; } /* デフォルトで section padding を解除 (各セクションが独自に padding を設定するため)。ただし .hp-about-hero など個別 padding を持つセクションを上書きしないよう :where() で詳細度を 0 にしておく */ body.hp-theme .hp-about :where(section) { padding:0; } body.hp-theme .hp-about .mono { letter-spacing:.18em; } body.hp-theme .hp-about .eye { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.2em; color:var(--hp-muted); margin-bottom:18px; display:flex; align-items:center; gap:10px; } body.hp-theme .hp-about .eye::before { content:""; width:24px; height:1px; background:currentColor; display:inline-block; } /* -- 20-1 Hero -- */ body.hp-theme .hp-about-hero { padding:120px 40px 80px; background:linear-gradient(180deg, var(--hp-navy-800) 0%, var(--hp-navy-700) 60%, var(--hp-navy-600) 100%); color:#fff; position:relative; overflow:hidden; } body.hp-theme .hp-about-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4), transparent), radial-gradient(1.2px 1.2px at 85% 20%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,.3), transparent); opacity:.55; } body.hp-theme .hp-about-hero::after { content:""; position:absolute; top:40%; right:-5%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, var(--hp-accent-2) 0%, transparent 70%); opacity:.2; filter:blur(40px); } body.hp-theme .hp-about-hero .wrap { max-width:1320px; margin:0 auto; position:relative; } body.hp-theme .hp-about-hero .eye { color:var(--hp-accent-2); } body.hp-theme .hp-about-hero .grid { display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:flex-end; } body.hp-theme .hp-about-hero h1 { font-size:clamp(36px, 5vw, 72px); line-height:1.08; letter-spacing:-.03em; font-weight:700; margin:0; color:#fff; } body.hp-theme .hp-about-hero h1 .serif { color:var(--hp-accent-2); } body.hp-theme .hp-about-hero p { font-size:15px; color:rgba(255,255,255,.7); line-height:1.9; margin:0; max-width:400px; } /* -- 20-2 Philosophy -- */ body.hp-theme .hp-about-philosophy { padding:140px 40px; background:var(--hp-paper); } body.hp-theme .hp-about-philosophy .wrap { max-width:960px; margin:0 auto; } body.hp-theme .hp-about-philosophy .lead { font-size:clamp(20px, 2.4vw, 32px); line-height:1.85; letter-spacing:-.01em; font-weight:500; color:var(--hp-navy-800); margin:0 0 28px; } body.hp-theme .hp-about-philosophy .lead .serif { color:var(--hp-accent); font-weight:400; } body.hp-theme .hp-about-philosophy .body { font-size:15.5px; line-height:2; color:var(--hp-muted); margin:0; max-width:700px; } /* -- 20-3 Fact sheet -- */ body.hp-theme .hp-about-fact { padding:120px 40px; background:var(--hp-paper-2); border-top:1px solid var(--hp-line); } body.hp-theme .hp-about-fact .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-about-fact .layout { display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:flex-start; } body.hp-theme .hp-about-fact .head { position:sticky; top:100px; } body.hp-theme .hp-about-fact .head h2 { font-size:clamp(28px, 3.5vw, 48px); line-height:1.2; letter-spacing:-.02em; font-weight:700; color:var(--hp-navy-800); margin:0 0 24px; } body.hp-theme .hp-about-fact .head p { font-size:14.5px; color:var(--hp-muted); line-height:1.9; margin:0; max-width:280px; } body.hp-theme .hp-about-fact dl { margin:0; padding:0; } body.hp-theme .hp-about-fact .row { display:grid; grid-template-columns:200px 1fr; gap:32px; padding:28px 0; border-top:1px solid var(--hp-line); } body.hp-theme .hp-about-fact .row:first-of-type { border-top:1px solid var(--hp-navy-800); } body.hp-theme .hp-about-fact .row:last-of-type { border-bottom:1px solid var(--hp-navy-800); } body.hp-theme .hp-about-fact dt { font-size:13px; color:var(--hp-muted); margin:0; font-weight:500; display:flex; align-items:flex-start; gap:10px; } body.hp-theme .hp-about-fact dt .num { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--hp-accent); letter-spacing:.1em; } body.hp-theme .hp-about-fact dd { margin:0; font-size:17px; font-weight:600; color:var(--hp-navy-800); letter-spacing:-.005em; } body.hp-theme .hp-about-fact dd .sub { display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--hp-muted); font-weight:400; letter-spacing:.02em; margin-top:4px; } body.hp-theme .hp-about-fact .biz { margin-top:48px; padding:36px 40px; border-radius:20px; background:#fff; border:1px solid var(--hp-line); } body.hp-theme .hp-about-fact .biz .label { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.2em; color:var(--hp-accent); margin-bottom:20px; } body.hp-theme .hp-about-fact .biz h3 { font-size:20px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.01em; margin:0 0 24px; } body.hp-theme .hp-about-fact .biz-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } body.hp-theme .hp-about-fact .biz-h { font-size:14px; font-weight:700; color:var(--hp-navy-800); margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--hp-line); } body.hp-theme .hp-about-fact .biz-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } body.hp-theme .hp-about-fact .biz-list li { font-size:13.5px; color:var(--hp-ink); display:flex; gap:10px; align-items:baseline; } body.hp-theme .hp-about-fact .biz-list li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--hp-accent); flex-shrink:0; margin-top:6px; } /* -- 20-4 Access -- */ body.hp-theme .hp-about-access { padding:100px 40px; background:var(--hp-paper); border-top:1px solid var(--hp-line); } body.hp-theme .hp-about-access .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-about-access .layout { display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:flex-start; } body.hp-theme .hp-about-access h2 { font-size:clamp(24px, 2.6vw, 34px); font-weight:700; letter-spacing:-.02em; color:var(--hp-navy-800); margin:0; line-height:1.3; } body.hp-theme .hp-about-access .stations { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--hp-navy-800); border-bottom:1px solid var(--hp-line); } body.hp-theme .hp-about-access .stations > div { padding:24px 0 24px 24px; border-left:1px solid var(--hp-line); } body.hp-theme .hp-about-access .stations > div:first-child { padding-left:0; border-left:none; } body.hp-theme .hp-about-access .st-name { font-size:12px; color:var(--hp-muted); margin-bottom:6px; } body.hp-theme .hp-about-access .st-walk { font-size:18px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.01em; } body.hp-theme .hp-about-access .st-line { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--hp-muted); letter-spacing:.08em; margin-top:4px; } body.hp-theme .hp-about-access .map-link { display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:13px; color:var(--hp-accent); font-weight:600; } /* -- 20-5 Timeline -- */ body.hp-theme .hp-about-timeline { padding:120px 40px; background:var(--hp-navy-900); color:#fff; position:relative; overflow:hidden; } body.hp-theme .hp-about-timeline::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 80% 50%, rgba(37,99,235,.25), transparent 50%); } body.hp-theme .hp-about-timeline .wrap { max-width:1320px; margin:0 auto; position:relative; } body.hp-theme .hp-about-timeline .eye { color:var(--hp-accent-2); } body.hp-theme .hp-about-timeline h2 { font-size:clamp(28px, 3.8vw, 56px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 60px; color:#fff; max-width:840px; } body.hp-theme .hp-about-timeline h2 .serif { color:var(--hp-accent-2); } body.hp-theme .hp-about-timeline .list { position:relative; } body.hp-theme .hp-about-timeline .list::before { content:""; position:absolute; left:80px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.15); } body.hp-theme .hp-about-timeline .item { display:grid; grid-template-columns:80px 60px 1fr; gap:24px; padding:24px 0; align-items:center; } body.hp-theme .hp-about-timeline .yr { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:24px; font-weight:700; color:#fff; letter-spacing:-.02em; } body.hp-theme .hp-about-timeline .dot { display:flex; justify-content:center; } body.hp-theme .hp-about-timeline .dot span { width:14px; height:14px; border-radius:50%; background:var(--hp-navy-600); border:2px solid #fff; } body.hp-theme .hp-about-timeline .item.is-last .dot span { background:var(--hp-accent); box-shadow:0 0 20px var(--hp-accent); } body.hp-theme .hp-about-timeline .body { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } body.hp-theme .hp-about-timeline .tag { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; padding:3px 10px; border-radius:4px; border:1px solid rgba(255,255,255,.2); color:var(--hp-accent-2); letter-spacing:.08em; } body.hp-theme .hp-about-timeline .desc { font-size:15.5px; color:rgba(255,255,255,.85); line-height:1.6; } /* -- 20-6 CTA -- */ body.hp-theme .hp-about-cta { padding:100px 40px; background:var(--hp-paper); } body.hp-theme .hp-about-cta .card { max-width:1320px; margin:0 auto; padding:72px 60px; border-radius:32px; background:linear-gradient(135deg, var(--hp-navy-800), var(--hp-navy-600)); color:#fff; position:relative; overflow:hidden; } body.hp-theme .hp-about-cta .card::before { content:""; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:var(--hp-accent); opacity:.25; filter:blur(50px); } body.hp-theme .hp-about-cta .grid { position:relative; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; } body.hp-theme .hp-about-cta .eye { color:var(--hp-accent-2); } body.hp-theme .hp-about-cta h3 { font-size:clamp(24px, 3vw, 44px); font-weight:700; letter-spacing:-.02em; line-height:1.2; margin:0 0 18px; color:#fff; } body.hp-theme .hp-about-cta h3 .serif { color:var(--hp-accent-2); } body.hp-theme .hp-about-cta p { font-size:15px; color:rgba(255,255,255,.7); margin:0; max-width:480px; line-height:1.8; } body.hp-theme .hp-about-cta .btns { display:flex; flex-direction:column; gap:12px; } body.hp-theme .hp-about-cta .btn { padding:18px 24px; border-radius:14px; display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:700; transition:transform .2s; } body.hp-theme .hp-about-cta .btn:hover { transform:translateY(-2px); } body.hp-theme .hp-about-cta .btn-primary { background:#fff; color:var(--hp-navy-800); } body.hp-theme .hp-about-cta .btn-ghost { border:1px solid rgba(255,255,255,.25); color:#fff; } body.hp-theme .hp-about-cta .btn svg { flex-shrink:0; } /* -- About レスポンシブ -- */ @media (max-width: 1024px) { body.hp-theme .hp-about-hero { padding:80px 24px 56px; } body.hp-theme .hp-about-hero .grid { grid-template-columns:1fr; gap:24px; align-items:flex-start; } body.hp-theme .hp-about-philosophy { padding:80px 24px; } body.hp-theme .hp-about-fact .layout, body.hp-theme .hp-about-access .layout { grid-template-columns:1fr; gap:40px; } body.hp-theme .hp-about-fact .head { position:static; } body.hp-theme .hp-about-fact { padding:80px 24px; } body.hp-theme .hp-about-access { padding:64px 24px; } body.hp-theme .hp-about-fact .biz-grid { grid-template-columns:1fr; } body.hp-theme .hp-about-timeline { padding:80px 24px; } body.hp-theme .hp-about-cta .card { padding:48px 32px; } body.hp-theme .hp-about-cta .grid { grid-template-columns:1fr; } } @media (max-width: 640px) { body.hp-theme .hp-about-fact .row { grid-template-columns:1fr; gap:8px; } body.hp-theme .hp-about-fact .biz { padding:24px; } body.hp-theme .hp-about-access .stations { grid-template-columns:1fr; } body.hp-theme .hp-about-access .stations > div { border-left:none; border-top:1px solid var(--hp-line); padding:18px 0; } body.hp-theme .hp-about-access .stations > div:first-child { border-top:none; padding-top:0; } body.hp-theme .hp-about-timeline .list::before { left:20px; } body.hp-theme .hp-about-timeline .item { grid-template-columns:50px 30px 1fr; gap:12px; padding:18px 0; } body.hp-theme .hp-about-timeline .yr { font-size:18px; } body.hp-theme .hp-about-cta { padding:64px 16px; } body.hp-theme .hp-about-cta .card { padding:32px 20px; border-radius:20px; } body.hp-theme .hp-about-cta .btn { padding:14px 18px; font-size:14px; } } /* ===================================================================== 21. Service リニューアル ===================================================================== */ body.hp-theme .hp-service { background:var(--hp-paper); color:var(--hp-ink); line-height:1.75; } body.hp-theme .hp-service .eye { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.2em; color:var(--hp-muted); margin-bottom:18px; display:flex; align-items:center; gap:10px; } body.hp-theme .hp-service .eye::before { content:""; width:24px; height:1px; background:currentColor; display:inline-block; } /* -- 21-1 Hero -- */ body.hp-theme .hp-service-hero { padding:130px 40px 80px; background:var(--hp-paper); position:relative; overflow:hidden; } body.hp-theme .hp-service-hero .wrap { max-width:1320px; margin:0 auto; position:relative; } body.hp-theme .hp-service-hero .grid { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:flex-end; } body.hp-theme .hp-service-hero h1 { font-size:clamp(36px, 5vw, 74px); line-height:1.1; letter-spacing:-.03em; font-weight:700; color:var(--hp-navy-800); margin:0; } body.hp-theme .hp-service-hero h1 .serif { color:var(--hp-accent); font-weight:400; } body.hp-theme .hp-service-hero p { font-size:15px; color:var(--hp-muted); line-height:1.9; margin:0; max-width:420px; } body.hp-theme .hp-service-hero .chips { margin-top:60px; padding-top:28px; border-top:1px solid var(--hp-line); display:flex; gap:10px; flex-wrap:wrap; align-items:center; } body.hp-theme .hp-service-hero .chips .label { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.18em; color:var(--hp-muted); } body.hp-theme .hp-service-hero .chip { font-size:12.5px; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--hp-line); color:var(--hp-navy-800); font-weight:600; display:inline-flex; align-items:center; gap:8px; } body.hp-theme .hp-service-hero .chip .num { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; color:var(--hp-accent); letter-spacing:.1em; } /* -- 21-2 Product Row -- */ body.hp-theme .hp-service-product { padding:120px 40px; border-top:1px solid var(--hp-line); background:var(--hp-paper-2); position:relative; overflow:hidden; } body.hp-theme .hp-service-product.is-second { background:var(--hp-paper); } body.hp-theme .hp-service-product.is-dark { background:var(--hp-navy-900); color:#fff; } body.hp-theme .hp-service-product.is-dark::after { content:""; position:absolute; top:20%; right:-10%; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, var(--hp-accent) 0%, transparent 70%); opacity:.2; filter:blur(50px); } body.hp-theme .hp-service-product .wrap { max-width:1320px; margin:0 auto; position:relative; } body.hp-theme .hp-service-product .grid { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center; } /* is-reverse は order で視覚順だけ反転 (DOM 順 = a11y 読み上げ順は維持) */ body.hp-theme .hp-service-product.is-reverse .col-text { order:2; } body.hp-theme .hp-service-product.is-reverse .col-mock { order:1; } body.hp-theme .hp-service-product .brand-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:10px; background:#fff; color:var(--hp-navy-800); box-shadow:0 4px 14px rgba(0,0,0,.15); margin-bottom:18px; } body.hp-theme .hp-service-product.is-dark .brand-chip { box-shadow:0 4px 14px rgba(0,0,0,.4); } body.hp-theme .hp-service-product .brand-chip img { width:28px; height:28px; object-fit:contain; display:block; flex-shrink:0; } body.hp-theme .hp-service-product .brand-chip span { font-size:13px; font-weight:700; letter-spacing:-.01em; } body.hp-theme .hp-service-product .meta { display:flex; align-items:center; gap:14px; margin-bottom:24px; } body.hp-theme .hp-service-product .meta .label { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.18em; color:var(--hp-accent); } body.hp-theme .hp-service-product.is-dark .meta .label { color:var(--hp-accent-2); } body.hp-theme .hp-service-product .badge { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em; padding:4px 10px; border-radius:6px; background:var(--hp-navy-050); color:var(--hp-accent); } body.hp-theme .hp-service-product.is-dark .badge { background:rgba(96,165,250,.15); color:var(--hp-accent-2); border:1px solid rgba(96,165,250,.25); } body.hp-theme .hp-service-product h2 { font-family:"Inter",sans-serif; font-size:clamp(34px, 4.4vw, 64px); font-weight:700; letter-spacing:-.03em; line-height:1; margin:0 0 12px; color:var(--hp-navy-800); } body.hp-theme .hp-service-product.is-dark h2 { color:#fff; } body.hp-theme .hp-service-product .tag { font-size:16.5px; color:var(--hp-accent); font-weight:600; margin-bottom:6px; letter-spacing:-.005em; } body.hp-theme .hp-service-product.is-dark .tag { color:var(--hp-accent-2); } body.hp-theme .hp-service-product .kicker { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--hp-muted); letter-spacing:.15em; text-transform:uppercase; margin-bottom:24px; } body.hp-theme .hp-service-product.is-dark .kicker { color:rgba(255,255,255,.45); } body.hp-theme .hp-service-product .copy { font-size:15.5px; line-height:2; margin:0 0 32px; color:var(--hp-ink); max-width:540px; } body.hp-theme .hp-service-product.is-dark .copy { color:rgba(255,255,255,.8); } body.hp-theme .hp-service-product .features { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; } body.hp-theme .hp-service-product .feature { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:baseline; } body.hp-theme .hp-service-product .feature .num { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; color:var(--hp-accent); letter-spacing:.08em; } body.hp-theme .hp-service-product.is-dark .feature .num { color:var(--hp-accent-2); } body.hp-theme .hp-service-product .feature .h { font-size:14.5px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.005em; } body.hp-theme .hp-service-product.is-dark .feature .h { color:#fff; } body.hp-theme .hp-service-product .feature .s { font-size:12.5px; color:var(--hp-muted); line-height:1.7; margin-left:10px; } body.hp-theme .hp-service-product.is-dark .feature .s { color:rgba(255,255,255,.55); } body.hp-theme .hp-service-product .stats { display:flex; gap:0; margin-bottom:32px; padding:14px 0; border-top:1px solid var(--hp-line); border-bottom:1px solid var(--hp-line); } body.hp-theme .hp-service-product.is-dark .stats { border-top-color:rgba(255,255,255,.12); border-bottom-color:rgba(255,255,255,.12); } body.hp-theme .hp-service-product .stat { flex:1; padding-left:20px; border-left:1px solid var(--hp-line); } body.hp-theme .hp-service-product .stat:first-child { padding-left:0; border-left:none; } body.hp-theme .hp-service-product.is-dark .stat { border-left-color:rgba(255,255,255,.12); } body.hp-theme .hp-service-product .stat .v { font-family:"Instrument Serif",serif; font-style:italic; font-size:26px; color:var(--hp-accent); letter-spacing:-.01em; line-height:1; margin-bottom:6px; } body.hp-theme .hp-service-product.is-dark .stat .v { color:var(--hp-accent-2); } body.hp-theme .hp-service-product .stat .l { font-size:11.5px; color:var(--hp-muted); } body.hp-theme .hp-service-product.is-dark .stat .l { color:rgba(255,255,255,.6); } body.hp-theme .hp-service-product .cta { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px; background:var(--hp-navy-800); color:#fff; font-size:14px; font-weight:700; transition:transform .2s; } body.hp-theme .hp-service-product.is-dark .cta { background:#fff; color:var(--hp-navy-800); } body.hp-theme .hp-service-product .cta:hover { transform:translateY(-2px); color:#fff; } body.hp-theme .hp-service-product.is-dark .cta:hover { color:var(--hp-navy-800); } body.hp-theme .hp-service-product .mock { position:relative; aspect-ratio:1.5/1; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--hp-line); box-shadow:0 20px 60px rgba(10,31,77,.12); } body.hp-theme .hp-service-product.is-dark .mock { border:1px solid rgba(255,255,255,.15); box-shadow:0 30px 80px rgba(37,99,235,.3); } body.hp-theme .hp-service-product .mock svg { display:block; width:100%; height:100%; } body.hp-theme .hp-service-product .floating-tag { position:absolute; bottom:-18px; right:24px; padding:10px 18px; border-radius:999px; background:var(--hp-navy-800); color:#fff; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; font-weight:700; letter-spacing:.05em; box-shadow:0 10px 30px rgba(10,31,77,.25); white-space:nowrap; } body.hp-theme .hp-service-product.is-dark .floating-tag { background:var(--hp-accent); } /* 共通 PigeonCloud モック partial を内包するときは外枠 (.mock の overflow:hidden / 背景 / 枠) を解除して内側 .pc-mock の角丸・影をそのまま見せ、floating-tag の bottom:-18px はみ出しが切れないようにする */ body.hp-theme .hp-service-product .mock--unframed { overflow: visible; background: transparent; border: none; box-shadow: none; aspect-ratio: auto; } /* -- 21-3 Matrix -- */ body.hp-theme .hp-service-matrix { padding:120px 40px; background:var(--hp-paper); border-top:1px solid var(--hp-line); } body.hp-theme .hp-service-matrix .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-service-matrix h2 { font-size:clamp(24px, 3vw, 40px); font-weight:700; letter-spacing:-.02em; color:var(--hp-navy-800); margin:0 0 40px; line-height:1.2; } body.hp-theme .hp-service-matrix h2 .serif { color:var(--hp-accent); font-weight:400; } body.hp-theme .hp-service-matrix .table { overflow:hidden; border-radius:16px; border:1px solid var(--hp-line); background:#fff; } body.hp-theme .hp-service-matrix .head-row { display:grid; grid-template-columns:200px repeat(2, 1fr); border-bottom:1px solid var(--hp-navy-800); background:var(--hp-navy-050); } body.hp-theme .hp-service-matrix .head-cell { padding:20px 24px; } body.hp-theme .hp-service-matrix .head-row .head-cell + .head-cell { border-left:1px solid var(--hp-line); } body.hp-theme .hp-service-matrix .label { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.18em; color:var(--hp-muted); } body.hp-theme .hp-service-matrix .num { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; color:var(--hp-accent); letter-spacing:.12em; margin-bottom:4px; } body.hp-theme .hp-service-matrix .pname { font-size:18px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.01em; } body.hp-theme .hp-service-matrix .ptag { font-size:12px; color:var(--hp-muted); margin-top:2px; } body.hp-theme .hp-service-matrix .row { display:grid; grid-template-columns:200px repeat(2, 1fr); border-bottom:1px solid var(--hp-line); margin:0; /* Bootstrap .row { margin: -15px } 上書き対策 */ } body.hp-theme .hp-service-matrix .row:last-child { border-bottom:none; } body.hp-theme .hp-service-matrix .row .crit { padding:18px 24px; background:var(--hp-paper-2); text-align:center; display:flex; align-items:center; justify-content:center; } body.hp-theme .hp-service-matrix .row .crit span { font-size:13px; color:var(--hp-muted); } body.hp-theme .hp-service-matrix .head-row .head-cell:first-child { text-align:center; } body.hp-theme .hp-service-matrix .row .v { padding:18px 24px; border-left:1px solid var(--hp-line); font-size:14px; color:var(--hp-navy-800); font-weight:500; } /* -- 21-4 CTA -- */ body.hp-theme .hp-service-cta { padding:100px 40px; background:var(--hp-paper-2); border-top:1px solid var(--hp-line); } body.hp-theme .hp-service-cta .card { max-width:1320px; margin:0 auto; padding:60px 56px; border-radius:28px; background:linear-gradient(135deg, var(--hp-navy-800), var(--hp-navy-600)); color:#fff; position:relative; overflow:hidden; } body.hp-theme .hp-service-cta .card::before { content:""; position:absolute; top:-120px; right:-80px; width:420px; height:420px; border-radius:50%; background:var(--hp-accent); opacity:.2; filter:blur(50px); } body.hp-theme .hp-service-cta .grid { position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:50px; align-items:center; } body.hp-theme .hp-service-cta .eye { color:var(--hp-accent-2); } body.hp-theme .hp-service-cta h3 { font-size:clamp(22px, 2.8vw, 40px); font-weight:700; letter-spacing:-.02em; line-height:1.2; margin:0 0 16px; color:#fff; } body.hp-theme .hp-service-cta h3 .serif { color:var(--hp-accent-2); font-weight:400; } body.hp-theme .hp-service-cta p { font-size:14.5px; color:rgba(255,255,255,.75); margin:0; max-width:480px; line-height:1.9; } body.hp-theme .hp-service-cta .btns { display:flex; flex-direction:column; gap:12px; } body.hp-theme .hp-service-cta .btn { padding:18px 24px; border-radius:14px; display:flex; justify-content:space-between; align-items:center; font-size:15.5px; font-weight:700; transition:transform .2s; } body.hp-theme .hp-service-cta .btn:hover { transform:translateY(-2px); } body.hp-theme .hp-service-cta .btn-primary { background:#fff; color:var(--hp-navy-800); } body.hp-theme .hp-service-cta .btn-ghost { border:1px solid rgba(255,255,255,.25); color:#fff; } /* -- Service レスポンシブ -- */ @media (max-width: 1024px) { body.hp-theme .hp-service-hero { padding:80px 24px 56px; } body.hp-theme .hp-service-hero .grid { grid-template-columns:1fr; gap:24px; align-items:flex-start; } body.hp-theme .hp-service-product { padding:80px 24px; } body.hp-theme .hp-service-product .grid { grid-template-columns:1fr; gap:32px; } /* モバイルでは順序リセット (上からテキスト → モックの順で表示) */ body.hp-theme .hp-service-product.is-reverse .col-text, body.hp-theme .hp-service-product.is-reverse .col-mock { order:0; } body.hp-theme .hp-service-matrix { padding:64px 24px; } body.hp-theme .hp-service-matrix .head-row, body.hp-theme .hp-service-matrix .row { grid-template-columns:140px 1fr 1fr; } body.hp-theme .hp-service-cta { padding:64px 16px; } body.hp-theme .hp-service-cta .card { padding:40px 24px; } body.hp-theme .hp-service-cta .grid { grid-template-columns:1fr; gap:32px; } } @media (max-width: 640px) { body.hp-theme .hp-service-product .stats { flex-wrap:wrap; gap:12px; } body.hp-theme .hp-service-product .stat { flex:1 1 30%; padding-left:0; border-left:none; } body.hp-theme .hp-service-matrix .head-row, body.hp-theme .hp-service-matrix .row { grid-template-columns:1fr; } body.hp-theme .hp-service-matrix .head-row .head-cell + .head-cell, body.hp-theme .hp-service-matrix .row .v { border-left:none; border-top:1px solid var(--hp-line); } body.hp-theme .hp-service-cta .card { padding:32px 20px; border-radius:20px; } body.hp-theme .hp-service-cta .btn { padding:14px 18px; font-size:14px; } } /* ===================================================================== 22. Custom Development リニューアル ===================================================================== */ body.hp-theme .hp-cd { background:var(--hp-paper); color:var(--hp-ink); line-height:1.75; } body.hp-theme .hp-cd .eye { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.2em; color:var(--hp-muted); margin-bottom:18px; display:flex; align-items:center; gap:10px; } body.hp-theme .hp-cd .eye::before { content:""; width:24px; height:1px; background:currentColor; display:inline-block; } /* -- 22-1 Hero -- */ body.hp-theme .hp-cd-hero { padding:120px 40px 90px; background:linear-gradient(180deg, var(--hp-navy-800) 0%, var(--hp-navy-700) 100%); color:#fff; position:relative; overflow:hidden; } body.hp-theme .hp-cd-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(1px 1px at 18% 30%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 72% 60%, rgba(255,255,255,.35), transparent), radial-gradient(1.2px 1.2px at 88% 22%, rgba(255,255,255,.3), transparent); opacity:.5; } body.hp-theme .hp-cd-hero::after { content:""; position:absolute; right:-120px; bottom:-80px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, var(--hp-accent) 0%, transparent 70%); opacity:.22; filter:blur(45px); } body.hp-theme .hp-cd-hero .wrap { max-width:1320px; margin:0 auto; position:relative; } body.hp-theme .hp-cd-hero .eye { color:var(--hp-accent-2); } body.hp-theme .hp-cd-hero .grid { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:flex-end; } body.hp-theme .hp-cd-hero h1 { font-size:clamp(34px, 5vw, 76px); line-height:1.08; letter-spacing:-.03em; font-weight:700; margin:0 0 24px; color:#fff; } body.hp-theme .hp-cd-hero h1 .em { color:var(--hp-accent-2); font-weight:700; } body.hp-theme .hp-cd-hero .lead { font-size:16px; color:rgba(255,255,255,.75); margin:0; max-width:540px; line-height:1.9; } body.hp-theme .hp-cd-hero .stats-card { position:relative; padding:28px 28px 24px; border-radius:20px; background:linear-gradient(160deg, rgba(37,99,235,.18), rgba(10,31,77,.4)); border:1px solid rgba(96,165,250,.2); backdrop-filter:blur(10px); } body.hp-theme .hp-cd-hero .stats-card .label { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.25em; color:rgba(96,165,250,.7); margin-bottom:20px; display:flex; align-items:center; gap:10px; } body.hp-theme .hp-cd-hero .stats-card .label::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--hp-ok); box-shadow:0 0 8px var(--hp-ok); } body.hp-theme .hp-cd-hero .stats-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:22px; } body.hp-theme .hp-cd-hero .stat { padding-bottom:6px; } body.hp-theme .hp-cd-hero .stat.has-line { border-bottom:1px dashed rgba(255,255,255,.12); } body.hp-theme .hp-cd-hero .stat .top { display:flex; align-items:baseline; gap:3px; margin-bottom:6px; line-height:1; } body.hp-theme .hp-cd-hero .stat .pre { font-family:"Instrument Serif",serif; font-style:italic; font-size:22px; color:var(--hp-accent-2); letter-spacing:-.01em; } body.hp-theme .hp-cd-hero .stat .v { font-family:"Inter",sans-serif; font-size:40px; font-weight:700; color:#fff; letter-spacing:-.04em; line-height:1; } body.hp-theme .hp-cd-hero .stat .suf { font-size:13px; color:var(--hp-accent-2); font-weight:600; letter-spacing:-.01em; } body.hp-theme .hp-cd-hero .stat .l { font-size:12px; color:rgba(255,255,255,.8); font-weight:500; margin-bottom:2px; } body.hp-theme .hp-cd-hero .stat .sub { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; color:rgba(255,255,255,.4); letter-spacing:.08em; text-transform:uppercase; } body.hp-theme .hp-cd-hero .tags { margin-top:60px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:12px; flex-wrap:wrap; } body.hp-theme .hp-cd-hero .tags .label { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.45); } body.hp-theme .hp-cd-hero .tag { font-size:12px; padding:5px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.85); } /* -- 22-2 Scopes -- */ body.hp-theme .hp-cd-scopes { padding:120px 40px; background:var(--hp-paper); } body.hp-theme .hp-cd-scopes .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-cd-scopes .head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:60px; flex-wrap:wrap; } body.hp-theme .hp-cd-scopes h2 { font-size:clamp(26px, 3.2vw, 44px); font-weight:700; letter-spacing:-.02em; color:var(--hp-navy-800); margin:0; line-height:1.2; max-width:640px; } body.hp-theme .hp-cd-scopes h2 .serif { color:var(--hp-accent); font-weight:400; } body.hp-theme .hp-cd-scopes .lead { font-size:14.5px; color:var(--hp-muted); margin:0; max-width:360px; line-height:1.9; } body.hp-theme .hp-cd-scopes .grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; } body.hp-theme .hp-cd-scope { grid-column:span 3; position:relative; padding:32px 32px 36px; border-radius:20px; background:#fff; color:var(--hp-ink); border:1px solid var(--hp-line); overflow:hidden; } body.hp-theme .hp-cd-scope.is-wide { grid-column:span 6; background:var(--hp-navy-800); color:#fff; border:none; } body.hp-theme .hp-cd-scope.is-wide::before { content:""; position:absolute; top:-80px; right:-80px; width:300px; height:300px; border-radius:50%; background:var(--hp-accent); opacity:.2; filter:blur(40px); } body.hp-theme .hp-cd-scope .icon-wrap { position:relative; margin-bottom:20px; aspect-ratio: 280 / 200; border-radius:14px; background:linear-gradient(135deg, var(--hp-navy-050), #fff); border:1px solid var(--hp-line); padding:0; overflow:hidden; } body.hp-theme .hp-cd-scope .icon-wrap .num { position:absolute; top:10px; right:14px; z-index:2; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.2em; color:var(--hp-muted); } body.hp-theme .hp-cd-scope .icon { position:absolute; inset:0; display:block; } body.hp-theme .hp-cd-scope .icon > div { width:100%; height:100%; } body.hp-theme .hp-cd-scope .icon svg, body.hp-theme .hp-cd-scope .icon img { display:block; width:100%; height:100%; object-fit:cover; } body.hp-theme .hp-cd-scope.is-wide .icon-wrap-side { position:absolute; right:28px; top:20px; width:220px; height:100px; opacity:.9; } body.hp-theme .hp-cd-scope .row { position:relative; display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; } body.hp-theme .hp-cd-scope .en { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.15em; color:var(--hp-muted); text-transform:uppercase; } body.hp-theme .hp-cd-scope.is-wide .en { color:rgba(255,255,255,.45); } body.hp-theme .hp-cd-scope .pill { font-family:"JetBrains Mono",ui-monospace,monospace; padding:5px 11px; border-radius:999px; font-size:10.5px; font-weight:600; background:var(--hp-navy-050); color:var(--hp-accent); letter-spacing:.04em; } body.hp-theme .hp-cd-scope.is-wide .pill { background:rgba(255,255,255,.1); color:var(--hp-accent-2); } body.hp-theme .hp-cd-scope h3 { font-size:21px; font-weight:700; letter-spacing:-.015em; margin:0 0 18px; line-height:1.35; color:var(--hp-navy-800); position:relative; } body.hp-theme .hp-cd-scope.is-wide h3 { font-size:28px; color:#fff; } body.hp-theme .hp-cd-scope p { font-size:14.5px; line-height:1.95; color:var(--hp-ink); margin:0; max-width:720px; position:relative; } body.hp-theme .hp-cd-scope.is-wide p { color:rgba(255,255,255,.8); } body.hp-theme .hp-cd-scope ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; position:relative; } body.hp-theme .hp-cd-scope li { font-size:13.5px; color:var(--hp-ink); display:flex; gap:10px; align-items:baseline; line-height:1.6; } body.hp-theme .hp-cd-scope.is-wide li { color:rgba(255,255,255,.85); } body.hp-theme .hp-cd-scope li::before { content:""; flex-shrink:0; margin-top:8px; width:14px; height:1px; background:var(--hp-accent); } body.hp-theme .hp-cd-scope.is-wide li::before { background:var(--hp-accent-2); } body.hp-theme .hp-cd-scope .more { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:12.5px; color:var(--hp-accent); font-weight:600; position:relative; } /* -- 22-3 Lab -- */ body.hp-theme .hp-cd-lab { padding:100px 40px; background:var(--hp-paper-2); border-top:1px solid var(--hp-line); } body.hp-theme .hp-cd-lab .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-cd-lab .layout { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; } body.hp-theme .hp-cd-lab h2 { font-size:clamp(24px, 3vw, 40px); font-weight:700; letter-spacing:-.02em; color:var(--hp-navy-800); margin:0 0 20px; line-height:1.2; } body.hp-theme .hp-cd-lab h2 .serif { color:var(--hp-accent); font-weight:400; } body.hp-theme .hp-cd-lab p { font-size:15px; color:var(--hp-muted); line-height:1.9; margin:0 0 28px; max-width:520px; } body.hp-theme .hp-cd-lab .price-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; } body.hp-theme .hp-cd-lab .price-card { flex:1 1 220px; padding:22px 24px; background:#fff; border-radius:14px; border:1px solid var(--hp-line); } body.hp-theme .hp-cd-lab .price-card .role { font-size:12px; color:var(--hp-muted); margin-bottom:8px; } body.hp-theme .hp-cd-lab .price-card .price-line { display:flex; align-items:baseline; gap:6px; } body.hp-theme .hp-cd-lab .price-card .price { font-size:28px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.02em; } body.hp-theme .hp-cd-lab .price-card .per { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--hp-muted); } body.hp-theme .hp-cd-lab .more { display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--hp-accent); font-weight:600; } body.hp-theme .hp-cd-lab .reco { padding:32px; background:#fff; border:1px solid var(--hp-line); border-radius:20px; } body.hp-theme .hp-cd-lab .reco .h { font-size:13px; font-weight:700; color:var(--hp-navy-800); margin-bottom:18px; display:flex; align-items:center; gap:10px; } body.hp-theme .hp-cd-lab .reco .h::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--hp-accent); } body.hp-theme .hp-cd-lab .reco ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; } body.hp-theme .hp-cd-lab .reco li { font-size:14px; color:var(--hp-ink); display:flex; gap:12px; align-items:baseline; padding-bottom:14px; border-bottom:1px dashed var(--hp-line); line-height:1.6; } body.hp-theme .hp-cd-lab .reco li:last-child { border-bottom:none; padding-bottom:0; } body.hp-theme .hp-cd-lab .reco li .num { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--hp-accent); flex-shrink:0; min-width:22px; } /* -- 22-4 Reasons -- */ body.hp-theme .hp-cd-reasons { padding:120px 40px; background:var(--hp-paper); } body.hp-theme .hp-cd-reasons .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-cd-reasons h2 { font-size:clamp(26px, 3.2vw, 44px); font-weight:700; letter-spacing:-.02em; color:var(--hp-navy-800); margin:0 0 50px; line-height:1.2; } body.hp-theme .hp-cd-reasons h2 .serif { color:var(--hp-accent); font-weight:400; } body.hp-theme .hp-cd-reasons .grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid var(--hp-navy-800); border-bottom:1px solid var(--hp-line); } body.hp-theme .hp-cd-reason { padding:36px 28px; border-left:1px solid var(--hp-line); display:flex; flex-direction:column; } body.hp-theme .hp-cd-reason:first-child { border-left:none; } body.hp-theme .hp-cd-reason .top { display:flex; justify-content:space-between; align-items:flex-start; height:52px; margin-bottom:18px; } body.hp-theme .hp-cd-reason .num { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.18em; color:var(--hp-accent); } body.hp-theme .hp-cd-reason .pop { font-family:"Instrument Serif",serif; font-style:italic; font-size:40px; color:var(--hp-navy-800); line-height:1; letter-spacing:-.02em; } body.hp-theme .hp-cd-reason .pop.is-empty { visibility:hidden; } body.hp-theme .hp-cd-reason h3 { font-size:17px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.01em; margin:0 0 12px; line-height:1.45; } body.hp-theme .hp-cd-reason p { font-size:13.5px; color:var(--hp-muted); line-height:1.85; margin:0; } /* -- 22-5 Process -- */ body.hp-theme .hp-cd-process { padding:120px 40px; background:var(--hp-navy-900); color:#fff; position:relative; overflow:hidden; } body.hp-theme .hp-cd-process::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 20% 30%, rgba(37,99,235,.25), transparent 50%); } body.hp-theme .hp-cd-process .wrap { max-width:1320px; margin:0 auto; position:relative; } body.hp-theme .hp-cd-process .eye { color:var(--hp-accent-2); } body.hp-theme .hp-cd-process h2 { font-size:clamp(26px, 3.2vw, 44px); font-weight:700; letter-spacing:-.02em; margin:0 0 60px; line-height:1.2; color:#fff; } body.hp-theme .hp-cd-process h2 .serif { color:var(--hp-accent-2); font-weight:400; } body.hp-theme .hp-cd-process .steps { position:relative; } body.hp-theme .hp-cd-process .steps::before { content:""; position:absolute; left:24px; top:12px; bottom:12px; width:1px; background:rgba(255,255,255,.12); } body.hp-theme .hp-cd-step { display:grid; grid-template-columns:80px 1fr; gap:32px; padding-bottom:40px; position:relative; } body.hp-theme .hp-cd-step:last-child { padding-bottom:0; } body.hp-theme .hp-cd-step .num { width:48px; height:48px; border-radius:12px; background:var(--hp-navy-700); color:#fff; display:grid; place-items:center; font-size:20px; font-weight:700; } body.hp-theme .hp-cd-step.is-first .num { background:var(--hp-accent); box-shadow:0 0 24px rgba(37,99,235,.5); } body.hp-theme .hp-cd-step .body { padding-top:6px; } body.hp-theme .hp-cd-step .title-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; } body.hp-theme .hp-cd-step h3 { font-size:19px; font-weight:700; color:#fff; letter-spacing:-.01em; margin:0; } body.hp-theme .hp-cd-step .chip { font-size:11px; padding:3px 10px; border-radius:999px; background:rgba(96,165,250,.15); color:var(--hp-accent-2); font-weight:600; letter-spacing:.02em; } body.hp-theme .hp-cd-step p { font-size:14px; color:rgba(255,255,255,.7); line-height:1.9; margin:0; max-width:780px; } /* -- 22-6 Stack -- */ body.hp-theme .hp-cd-stack { padding:80px 40px; background:var(--hp-paper-2); border-top:1px solid var(--hp-line); } body.hp-theme .hp-cd-stack .wrap { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:240px 1fr; gap:60px; align-items:center; } body.hp-theme .hp-cd-stack h3 { font-size:20px; font-weight:700; color:var(--hp-navy-800); letter-spacing:-.01em; margin:0; line-height:1.4; } body.hp-theme .hp-cd-stack .tags { display:flex; flex-wrap:wrap; gap:8px; } body.hp-theme .hp-cd-stack .tag { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; padding:7px 14px; border-radius:8px; background:#fff; border:1px solid var(--hp-line); color:var(--hp-navy-800); letter-spacing:.02em; } /* -- 22-7 FAQ -- */ body.hp-theme .hp-cd-faq { padding:120px 40px; background:var(--hp-paper); } body.hp-theme .hp-cd-faq .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-cd-faq .layout { display:grid; grid-template-columns:1fr 2fr; gap:60px; align-items:flex-start; } body.hp-theme .hp-cd-faq h2 { font-size:clamp(24px, 3vw, 40px); font-weight:700; letter-spacing:-.02em; color:var(--hp-navy-800); margin:0 0 20px; line-height:1.2; } body.hp-theme .hp-cd-faq h2 .serif { color:var(--hp-accent); font-weight:400; } body.hp-theme .hp-cd-faq p { font-size:14px; color:var(--hp-muted); margin:0; max-width:260px; line-height:1.9; } body.hp-theme .hp-cd-faq details { border-top:1px solid var(--hp-line); } body.hp-theme .hp-cd-faq details:first-child { border-top:1px solid var(--hp-navy-800); } body.hp-theme .hp-cd-faq details:last-child { border-bottom:1px solid var(--hp-navy-800); } body.hp-theme .hp-cd-faq summary { list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; } body.hp-theme .hp-cd-faq summary::-webkit-details-marker { display:none; } body.hp-theme .hp-cd-faq summary .q { font-size:16px; font-weight:600; color:var(--hp-navy-800); letter-spacing:-.005em; display:flex; gap:14px; align-items:baseline; } body.hp-theme .hp-cd-faq summary .qn { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--hp-accent); letter-spacing:.1em; } body.hp-theme .hp-cd-faq summary .chev { width:16px; height:16px; position:relative; flex-shrink:0; transition:transform .25s; } body.hp-theme .hp-cd-faq summary .chev::before { content:""; position:absolute; top:7px; left:0; width:16px; height:2px; background:var(--hp-navy-800); } body.hp-theme .hp-cd-faq summary .chev::after { content:""; position:absolute; top:0; left:7px; width:2px; height:16px; background:var(--hp-navy-800); } body.hp-theme .hp-cd-faq details[open] summary .chev { transform:rotate(45deg); } body.hp-theme .hp-cd-faq .a { padding:0 0 24px 58px; font-size:14.5px; color:var(--hp-ink); line-height:1.95; max-width:760px; } /* -- 22-8 Contact (form) -- */ body.hp-theme .hp-cd-contact { padding:100px 40px; background:var(--hp-paper-2); border-top:1px solid var(--hp-line); } body.hp-theme .hp-cd-contact .wrap { max-width:1320px; margin:0 auto; } body.hp-theme .hp-cd-contact .card { padding:60px 56px; border-radius:28px; background:linear-gradient(135deg, var(--hp-navy-800), var(--hp-navy-600)); color:#fff; position:relative; overflow:hidden; margin-bottom:40px; } body.hp-theme .hp-cd-contact .card::before { content:""; position:absolute; top:-120px; right:-80px; width:420px; height:420px; border-radius:50%; background:var(--hp-accent); opacity:.2; filter:blur(50px); } body.hp-theme .hp-cd-contact .card .grid { position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:50px; align-items:center; } body.hp-theme .hp-cd-contact .eye { color:var(--hp-accent-2); } body.hp-theme .hp-cd-contact h3 { font-size:clamp(22px, 2.8vw, 40px); font-weight:700; letter-spacing:-.02em; line-height:1.2; margin:0 0 16px; color:#fff; } body.hp-theme .hp-cd-contact h3 .serif { color:var(--hp-accent-2); font-weight:400; } body.hp-theme .hp-cd-contact .lead { font-size:14.5px; color:rgba(255,255,255,.75); margin:0; max-width:500px; line-height:1.9; } body.hp-theme .hp-cd-contact .meta-row { margin-top:8px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:rgba(255,255,255,.55); } body.hp-theme .hp-cd-contact .form-card { background:#fff; border-radius:24px; border:1px solid var(--hp-line); padding:48px; max-width:880px; margin:0 auto; box-shadow:0 20px 60px rgba(10,31,77,.06); } body.hp-theme .hp-cd-contact .form-card h4 { font-size:22px; font-weight:700; color:var(--hp-navy-800); margin:0 0 28px; letter-spacing:-.01em; } body.hp-theme .hp-cd-contact .alert { background:#FEF2F2; color:#991B1B; padding:14px 18px; border-radius:12px; border:1px solid #FECACA; margin-bottom:24px; font-size:14px; } body.hp-theme .hp-cd-contact .field { margin-bottom:24px; } body.hp-theme .hp-cd-contact label { display:block; font-size:13px; color:var(--hp-navy-800); font-weight:600; margin-bottom:8px; letter-spacing:-.005em; } body.hp-theme .hp-cd-contact label .req { color:#E11D48; margin-left:4px; } body.hp-theme .hp-cd-contact label .opt { color:var(--hp-muted); font-weight:400; margin-left:6px; font-size:11.5px; } body.hp-theme .hp-cd-contact input[type="text"], body.hp-theme .hp-cd-contact input[type="email"], body.hp-theme .hp-cd-contact input[type="tel"], body.hp-theme .hp-cd-contact select, body.hp-theme .hp-cd-contact textarea { width:100%; padding:13px 16px; border-radius:10px; border:1px solid var(--hp-line); background:var(--hp-paper); font-size:14.5px; color:var(--hp-ink); font-family:inherit; transition:border-color .2s, box-shadow .2s; } body.hp-theme .hp-cd-contact input:focus, body.hp-theme .hp-cd-contact select:focus, body.hp-theme .hp-cd-contact textarea:focus { outline:none; border-color:var(--hp-accent); box-shadow:0 0 0 3px rgba(37,99,235,.1); } body.hp-theme .hp-cd-contact textarea { resize:vertical; min-height:140px; line-height:1.7; } body.hp-theme .hp-cd-contact .help { font-size:12px; color:var(--hp-muted); margin-top:6px; } body.hp-theme .hp-cd-contact .submit-row { text-align:center; margin-top:32px; } body.hp-theme .hp-cd-contact .submit { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 48px; border-radius:999px; border:none; background:linear-gradient(135deg, var(--hp-navy-800), var(--hp-accent)); color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .2s; box-shadow:0 10px 24px rgba(37,99,235,.3); } body.hp-theme .hp-cd-contact .submit:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,99,235,.4); } body.hp-theme .hp-cd-contact .submit:disabled { opacity:.7; cursor:not-allowed; transform:none; } body.hp-theme .hp-cd-contact .submit .spin { display:none; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:hpcdspin .8s linear infinite; } body.hp-theme .hp-cd-contact .submit.is-loading .spin { display:inline-block; } @keyframes hpcdspin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body.hp-theme .hp-cd-contact .submit .spin { animation-duration:2s; } } /* -- Custom Development レスポンシブ -- */ @media (max-width: 1024px) { body.hp-theme .hp-cd-hero { padding:80px 24px 56px; } body.hp-theme .hp-cd-hero .grid { grid-template-columns:1fr; gap:32px; } body.hp-theme .hp-cd-scopes { padding:80px 24px; } body.hp-theme .hp-cd-scopes .grid { grid-template-columns:repeat(2, 1fr); } body.hp-theme .hp-cd-scope { grid-column:span 1; } body.hp-theme .hp-cd-scope.is-wide { grid-column:span 2; } body.hp-theme .hp-cd-lab { padding:64px 24px; } body.hp-theme .hp-cd-lab .layout { grid-template-columns:1fr; gap:32px; } body.hp-theme .hp-cd-reasons { padding:64px 24px; } body.hp-theme .hp-cd-reasons .grid { grid-template-columns:repeat(2, 1fr); } body.hp-theme .hp-cd-reason:nth-child(3) { border-left:none; } body.hp-theme .hp-cd-reason:nth-child(n+3) { border-top:1px solid var(--hp-line); } body.hp-theme .hp-cd-process { padding:80px 24px; } body.hp-theme .hp-cd-stack { padding:48px 24px; } body.hp-theme .hp-cd-stack .wrap { grid-template-columns:1fr; gap:24px; } body.hp-theme .hp-cd-faq { padding:80px 24px; } body.hp-theme .hp-cd-faq .layout { grid-template-columns:1fr; gap:32px; } body.hp-theme .hp-cd-contact { padding:64px 16px; } body.hp-theme .hp-cd-contact .card { padding:40px 24px; } body.hp-theme .hp-cd-contact .card .grid { grid-template-columns:1fr; gap:32px; } body.hp-theme .hp-cd-contact .form-card { padding:32px 24px; border-radius:18px; } } @media (max-width: 640px) { body.hp-theme .hp-cd-scopes .grid { grid-template-columns:1fr; } body.hp-theme .hp-cd-scope, body.hp-theme .hp-cd-scope.is-wide { grid-column:span 1; } body.hp-theme .hp-cd-scope.is-wide .icon-wrap-side { display:none; } body.hp-theme .hp-cd-reasons .grid { grid-template-columns:1fr; } body.hp-theme .hp-cd-reason { border-left:none; border-top:1px solid var(--hp-line); padding:24px 0; } body.hp-theme .hp-cd-reason:first-child { border-top:none; } body.hp-theme .hp-cd-process .steps::before { left:18px; } body.hp-theme .hp-cd-step { grid-template-columns:50px 1fr; gap:16px; padding-bottom:28px; } body.hp-theme .hp-cd-step .num { width:36px; height:36px; font-size:16px; border-radius:10px; } body.hp-theme .hp-cd-stack .tag { font-size:11px; padding:6px 10px; } body.hp-theme .hp-cd-faq summary { padding:16px 0; } body.hp-theme .hp-cd-faq .a { padding:0 0 18px 0; } body.hp-theme .hp-cd-contact .card { padding:28px 18px; border-radius:18px; } body.hp-theme .hp-cd-contact .form-card { padding:24px 18px; } body.hp-theme .hp-cd-contact .submit { width:100%; padding:14px 24px; } } /* ===================================================================== 23. style.css 既存汎用クラスとの衝突リセット - 既存 style.css に .label / .btn の汎用スタイルがあり hp-theme 配下のページで赤紫ボーダー等が漏れていた ===================================================================== */ body.hp-theme .hp-about .label, body.hp-theme .hp-service .label, body.hp-theme .hp-cd .label, body.hp-theme .hp-blog-renewal .label { padding: 0; border: 0; border-radius: 0; line-height: inherit; background: transparent; } /* hp-theme 配下の dark hero / cta カード内の .btn は独自スタイルを使うので既存 .btn の background-color/font-size/padding をリセット */ body.hp-theme .hp-about-cta .btn, body.hp-theme .hp-service-cta .btn { background-color: transparent; font-size: 16px; font-weight: 700; padding: 18px 24px; text-align: left; text-decoration: none; } /* ===================================================================== 24. ヘッダー (loftal 既存 .header-type1) を newhp プロトタイプ調に上書き - 白背景固定 + sticky スクロール追従 + ロゴ大きめ - dark hero ページでも自然に重ならないよう sticky 採用 (透明化はしない) ===================================================================== */ /* sticky は header を内包する .l-outer-side に適用 (header.header-type1 の containing block を body 全体にする) */ body.hp-theme .l-outer-side { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow .25s; } body.hp-theme .l-outer-side.is-scrolled { box-shadow: 0 4px 18px rgba(10, 31, 77, .08); } body.hp-theme .l-outer-side.is-scrolled #header.header-type1__pc { border-bottom-color: transparent; } body.hp-theme header.header-type1 { background: #fff; } body.hp-theme #header.header-type1__pc { background: #fff !important; border-bottom: 1px solid var(--hp-line); transition: padding .25s, border-color .25s; } body.hp-theme #header .container { padding-top: 18px; padding-bottom: 18px; transition: padding .25s; } body.hp-theme .l-outer-side.is-scrolled #header.header-type1__pc .container { padding-top: 12px; padding-bottom: 12px; } /* ロゴ: 大きめ + 行間ゆとり */ body.hp-theme #header .site-brand { display: flex; align-items: center; gap: 14px; } body.hp-theme #header .site-brand__image { flex-shrink: 0; } body.hp-theme #header .site-brand__image span { width: 56px; height: 56px; display: block; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; transition: width .25s, height .25s; } body.hp-theme .l-outer-side.is-scrolled .site-brand__image span { width: 44px; height: 44px; } body.hp-theme #header .site-brand__title { font-family: "Inter", "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--hp-navy-800); line-height: 1.15; } body.hp-theme #header .site-brand__right .small-font { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; color: var(--hp-muted); line-height: 1.3; } /* メニュー: 黒文字 + 上下スタック + 字間少し 7 項目 + 言語切替が col-md-8 (≒760px) に収まるよう padding / letter-spacing を縮小 */ body.hp-theme #header .header-menu ul { gap: 0; flex-wrap: nowrap; } body.hp-theme #header .header-menu ul .col-auto { padding: 0 9px; } body.hp-theme #header .header-menu a { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; color: var(--hp-navy-800) !important; font-weight: 500; transition: color .2s; white-space: nowrap; } body.hp-theme #header .header-menu a:hover { color: var(--hp-accent) !important; } body.hp-theme #header .header-menu a span:first-child { font-size: 13px; letter-spacing: 0; } body.hp-theme #header .header-menu a .tiny-font { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .08em; color: var(--hp-muted); text-transform: uppercase; }