@charset "utf-8"; /* ============================================================================ Positive ONE / FPGA — UI theme layer (v1) 既存のマークアップ・画像・製品データベースには一切手を入れず、 見た目だけを上書きするレイヤー。必ず最後に読み込むこと。 ========================================================================= */ /* ---------------------------------------------------------------- 1. tokens */ :root{ /* ground */ --ink:#0B1720; --ink-soft:#132330; --ink2:#132330; --ink-deep:#071019; --paper:#FFFFFF; --paper-warm:#EFF3F6; --warm:#EFF3F6; --card:#FFFFFF; /* single accent: crimson */ --signal:#C8102E; --signal2:#C8102E; --signal-deep:#9C0C23; --signal-on-dark:#FF5C68; --signal-on-light:#C8102E; --signal-text:#C8102E; /* demoted secondary: steel, not teal */ --trace:#93A9B7; --trace2:#3C5364; --trace-deep:#3C5364; --steel:#566875; --steel-l:#9FB0BC; --steel-light:#9FB0BC; --line:rgba(11,23,32,.13); --line2:rgba(11,23,32,.22); --line-strong:rgba(11,23,32,.22); --gold:#8A6D1F; /* type: geometric sans everywhere. serif token is repurposed as display sans */ --sans:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --serif:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --mono:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --wr-red:#C8102E; --wr-red-hi:#E4002B; --wr-hdr:66px; } html{scroll-padding-top:calc(var(--wr-hdr) + 12px);} body{ background:var(--paper); line-height:1.85; letter-spacing:0; font-feature-settings:"palt" 1; } :focus-visible{outline:2px solid var(--wr-red-hi);outline-offset:2px;} /* 数字は等幅で */ .hs-n,.hero-strip .num,.cat-count,.gcount,.pc-spec .v,.num{font-variant-numeric:tabular-nums;} /* ------------------------------------------------------------ 2. typography */ .hero-top h1, .sec-head h2, .tech-h h2, .svc-left h2, .seg h3, .blk h2, .rel-blk h2, .uhero h1, .usec-h{ font-family:var(--serif); font-weight:800; letter-spacing:-.005em; } .hero-top h1{font-size:clamp(27px,3.5vw,44px);line-height:1.34;} .sec-head h2{font-size:clamp(25px,3.1vw,38px);line-height:1.38;} .tech-h h2{font-size:clamp(24px,3vw,35px);line-height:1.38;} .svc-left h2{font-size:clamp(24px,3vw,35px);line-height:1.38;} .seg h3{font-size:22px;line-height:1.5;font-weight:800;} .uhero h1{font-size:clamp(27px,4vw,40px);line-height:1.3;} /* 見出し中の em は「斜体の別色」ではなく「赤の強調」 */ .tech-h h2 em{font-style:normal;color:var(--wr-red);} .hero-top h1 em{font-style:normal;color:#fff;} /* ヒーロー見出しは Wind River と同じ2段構え： 1段目＝太く大きい主張、2段目＝細く同じ大きさの補足。 */ .hero-top h1{font-weight:300;} .hero-top h1 em{font-weight:300;} .hero-top h1 .lead{ font-family:var(--sans);font-weight:800;font-size:1em;letter-spacing:-.01em; color:#fff;margin-bottom:4px;line-height:1.3; } /* -------------------------------------------------------- 3. eyebrow / rules */ .eyebrow, .sec-index, .tech-eyebrow, .gbar-eyebrow, .blk .tag, .fg-label, .foot-col h3, .fnav-col b, .band .label{ font-family:var(--sans); font-weight:700; text-transform:uppercase; } .sec-index, .tech-eyebrow, .gbar-eyebrow, .blk .tag{ display:flex;align-items:center;gap:.7em; font-size:11px;letter-spacing:.2em;color:var(--wr-red); } .sec-index::before, .tech-eyebrow::before, .gbar-eyebrow::before, .blk .tag::before{ content:"";width:26px;height:2px;background:var(--wr-red);flex:none; } .tech-eyebrow{justify-content:flex-start;} .sec-index{margin-bottom:6px;} /* 番号ラベルの直後に来る和文ラベルは、装飾を重ねず従属させる */ .sec-head .eyebrow{ display:block;font-size:11.5px;letter-spacing:.14em;font-weight:700; color:var(--steel);margin:0 0 18px;text-transform:none; } .catalog .sec-head .eyebrow, .contact .sec-head .eyebrow, .why .sec-head .eyebrow{color:#8DA1AF;} /* 暗い面の上では少し明るい赤 */ .catalog .sec-index, .contact .sec-index, .why .sec-index, .tech-eyebrow,.gbar-eyebrow{color:var(--signal-on-dark);} .catalog .sec-index::before, .contact .sec-index::before, .why .sec-index::before, .tech-eyebrow::before,.gbar-eyebrow::before{background:var(--signal-on-dark);} .hero-eyebrow{ display:inline-flex;align-items:center;gap:.7em; border-left:0;padding-left:0;color:#fff;font-weight:700; font-size:11px;letter-spacing:.2em;margin-bottom:22px; } .hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--wr-red);flex:none;} /* ------------------------------------------------------------- 4. buttons */ .btn,.gnav-cta,.gbar-cta,.cat-reset,.seg-link,.pc-detail,.rel-more a{ font-family:var(--sans); } .btn{ font-size:14px;font-weight:700;letter-spacing:.01em; padding:14px 26px;border-width:2px;border-radius:2px; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; } .btn:hover{transform:translateY(-1px);} .btn-fill{background:var(--wr-red);border-color:var(--wr-red);color:#fff;} .btn-fill:hover{background:var(--wr-red-hi);border-color:var(--wr-red-hi);color:#fff;} .btn-line{border-color:rgba(255,255,255,.55);color:#fff;background:transparent;} .btn-line:hover{background:#fff;border-color:#fff;color:var(--ink);} /* 明るい面に置かれた線ボタン */ .guide .btn-line,.services .btn-line,.faq .btn-line,.ct-lead-btns .btn-line, .apps .btn-line,.segments .btn-line{border-color:var(--ink);color:var(--ink);} .guide .btn-line:hover,.services .btn-line:hover,.faq .btn-line:hover, .ct-lead-btns .btn-line:hover,.apps .btn-line:hover,.segments .btn-line:hover{ background:var(--ink);color:#fff;border-color:var(--ink); } .btn .arr{font-weight:400;} /* 「»」を使う派生リンク */ .seg-link,.pc-detail,.rel-more a{font-weight:700;letter-spacing:0;} .seg.a .seg-link,.seg.b .seg-link{color:var(--wr-red);} .rel-more a{color:var(--wr-red);border-bottom-color:var(--wr-red);} .rel-card em{color:var(--wr-red);font-weight:700;} /* ------------------------------------------------------ 5. global header */ /* 旧テーマの
はクリーム色の背景を持つ。背景だけ無効化し、 sticky は
側に残す。 position:sticky は「親要素の箱の中でしか動けない」ため、 高さ 66px の
の中にある .gnav を sticky にしても、 親ごとスクロールアウトして追従しない。sticky にするのは body 直下の
でなければならない。 */ header{ background:transparent;border-bottom:0; position:sticky;top:0;z-index:100; -webkit-backdrop-filter:none;backdrop-filter:none; } .gnav{ position:relative;top:auto;z-index:1; background:#fff; -webkit-backdrop-filter:none;backdrop-filter:none; border-bottom:1px solid var(--line); box-shadow:0 1px 14px rgba(11,23,32,.07); transition:background .25s ease,border-color .25s ease,box-shadow .25s ease; } .gnav-in{max-width:1280px;height:var(--wr-hdr);gap:16px;padding:0 32px;} .gnav-logo{ background:transparent;border-radius:0;box-shadow:none;padding:0; transition:filter .25s ease; } .gnav-logo img{height:28px;} .gnav-links{gap:0;flex:1;justify-content:flex-end;} .gnav-links a{ position:relative;font-size:13.5px;font-weight:700;color:var(--ink); padding:0 15px;height:var(--wr-hdr);display:inline-flex;align-items:center; border-bottom:0;white-space:nowrap; } .gnav-links a::after{ content:"";position:absolute;left:15px;right:15px;bottom:0;height:3px; background:var(--wr-red);transform:scaleX(0);transition:transform .2s ease; } .gnav-links a:hover{color:var(--wr-red);} .gnav-links a:hover::after, .gnav-links a.on::after{transform:scaleX(1);} .gnav-links a.on{color:var(--ink);border-bottom-color:transparent;} .gnav-cta{ background:var(--wr-red);color:#fff;font-size:13px;font-weight:700; padding:11px 20px;border-radius:2px;border:2px solid var(--wr-red); transition:background .18s ease,border-color .18s ease; } .gnav-cta:hover{background:var(--wr-red-hi);border-color:var(--wr-red-hi);color:#fff;} .gsw-btn,.langsw-btn{ font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em; color:var(--steel);border:1px solid var(--line2);background:transparent; padding:8px 11px;border-radius:2px; } .gsw-btn:hover,.langsw-btn:hover{color:var(--ink);border-color:var(--ink);} .gsw-list,.langsw-list{border-radius:0;border:0;border-top:3px solid var(--wr-red);box-shadow:0 22px 50px rgba(11,23,32,.22);} .langsw-list .ls-on{background:#F2F5F7;} .gsw-list a:hover,.langsw-list a:hover{background:#F2F5F7;color:var(--wr-red);} .gnav-burger{color:var(--ink);} /* --- ヒーロー上（ページ最上部）では透明ヘッダー --- */ html.wr-top .gnav{ background:transparent;border-bottom-color:rgba(255,255,255,.16);box-shadow:none; } html.wr-top .gnav-logo{ background:#fff;border-radius:2px;padding:6px 12px; } html.wr-top .gnav-links a{color:#fff;} html.wr-top .gnav-links a:hover{color:#fff;} html.wr-top .gsw-btn,html.wr-top .langsw-btn{color:#fff;border-color:rgba(255,255,255,.42);} html.wr-top .gsw-btn:hover,html.wr-top .langsw-btn:hover{border-color:#fff;} html.wr-top .gnav-burger{color:#fff;} /* ------------------------------------------------------------- 6. hero */ /* トップページのヒーロー（スライドショーを持つもの）だけに適用 */ html.wr-ov-a .hero{padding:0;} html.wr-ov-a .hero > .wrap{max-width:1280px;padding:0 32px;} .hero-top{padding-top:calc(var(--wr-hdr) + 56px);padding-bottom:52px;gap:52px;} .hero-slide.active{opacity:.62;} .hero-slideshow::after{ background: linear-gradient(90deg,var(--ink) 4%,rgba(11,23,32,.86) 34%,rgba(11,23,32,.42) 74%,rgba(11,23,32,.20) 100%), linear-gradient(0deg,rgba(11,23,32,.75) 0%,rgba(11,23,32,0) 42%); } .hero-grid-bg{ background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; } .hero-sub{ font-size:14px;line-height:2;color:rgba(255,255,255,.78); border-top:1px solid rgba(255,255,255,.2);padding-top:24px; } .hero-sub b{color:#fff;} .hero-actions{gap:12px;margin-top:32px;} .hero-stats{border-top:1px solid rgba(255,255,255,.2);padding-top:24px;margin-top:36px;} .hs-n{font-size:30px;font-weight:800;letter-spacing:-.02em;} .hs-n em{color:var(--steel-l);font-size:.5em;font-weight:600;margin-left:.2em;} .hs-l{font-size:11.5px;color:var(--steel-l);line-height:1.75;margin-top:8px;} .hero-strip{border-top:1px solid rgba(255,255,255,.2);} .hero-strip .cell{border-right-color:rgba(255,255,255,.14);padding:26px 26px 30px 0;} .hero-strip .num{ font-family:var(--sans);font-weight:800;font-size:34px;letter-spacing:-.02em;color:#fff; } .hero-strip .num span{color:var(--steel-l);font-size:.5em;font-weight:600;} .hero-strip .lbl{ font-size:11px;letter-spacing:.04em;text-transform:none;color:var(--steel-l); line-height:1.7;margin-top:10px; } .stat-note{color:rgba(255,255,255,.55);font-size:11.5px;line-height:1.9;padding-bottom:26px;} /* -------------------------------------------------------- 7. platform band */ .band{background:var(--ink-soft);border-bottom:0;border-top:1px solid rgba(255,255,255,.1);} .band .wrap{max-width:1280px;padding:20px 32px;gap:22px;} .band .label{font-size:11px;letter-spacing:.2em;color:#7C909E;} .band .vendor{ font-family:var(--sans);font-size:12px;font-weight:600;color:#CBD7DF; border:1px solid rgba(255,255,255,.18);border-radius:2px;padding:7px 13px;letter-spacing:.02em; } /* ------------------------------------------------------- 8. tech (4 pillars) */ .tech{background:var(--ink);padding:92px 0;} .tech-bg{opacity:.13;} .tech-h{text-align:left;} .tech-eyebrow{justify-content:flex-start;} .tech-sub{text-align:left;margin:16px 0 46px;font-size:15px;line-height:2;color:#A9BAC6;} .tech-grid{background:rgba(255,255,255,.14);border:0;border-top:3px solid var(--wr-red);} .tc{padding:34px 28px 38px;} .tc:hover{background:#12283A;} .tc-ico{margin-bottom:18px;} .tc-n{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em; color:var(--signal-on-dark);margin-bottom:14px; } .tc h3{font-size:17px;font-weight:800;line-height:1.6;margin-bottom:12px;} .tc p{font-size:13px;color:#A9BAC6;line-height:1.95;} .tc-spec{ font-family:var(--sans);font-size:12px;font-weight:700;color:#fff; border-top:1px solid rgba(255,255,255,.16);margin-top:20px;padding-top:14px;letter-spacing:.01em; } /* -------------------------------------------------------- 9. two segments */ .segments{background:var(--paper-warm);} .seg-grid{border:1px solid var(--line-strong);background:#fff;} .seg{padding:44px 40px;} .seg-tag{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;margin-bottom:18px; } .seg.a .seg-tag,.seg.b .seg-tag{color:var(--steel);} .seg.a .chip,.seg.b .chip{background:var(--wr-red);width:8px;height:8px;} .seg .vendor-name{ font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--steel);margin-bottom:20px; } .seg p{font-size:14px;line-height:2;color:var(--steel);} .seg ul li{font-size:13.5px;padding:12px 0;} .seg ul li .v{font-family:var(--sans);font-size:11.5px;letter-spacing:0;} .seg-num{ font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.2em; color:var(--line2);top:44px;right:40px; } /* 上端の赤いキーライン */ .seg::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--wr-red);} .seg.b::before{background:var(--ink);} /* ---------------------------------------------------- 10. product database */ .catalog{background:var(--ink);} .cat-controls{ background:var(--ink-soft);border:1px solid rgba(255,255,255,.14); padding:24px;top:var(--wr-hdr); } .cat-search input{ font-family:var(--sans);font-size:13.5px;letter-spacing:0; background:var(--ink);border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:14px 16px; } .cat-search input:focus{outline:2px solid var(--wr-red-hi);border-color:var(--wr-red-hi);} .cat-count{font-family:var(--sans);font-size:13px;color:var(--steel-l);} .cat-count b{color:#fff;font-size:22px;font-weight:800;margin-right:.2em;} .fg-label{font-size:10.5px;letter-spacing:.2em;color:#7C909E;margin-bottom:12px;} .chip-btn{ font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0; border:1px solid rgba(255,255,255,.22);border-radius:2px;color:#B7C6D0;padding:8px 13px; } .chip-btn:hover{border-color:#fff;color:#fff;background:transparent;} .chip-btn.active, .chip-btn.active.tr{background:var(--wr-red);border-color:var(--wr-red);color:#fff;} .chip-btn.active:hover, .chip-btn.active.tr:hover{background:var(--wr-red-hi);border-color:var(--wr-red-hi);} .cat-reset{ font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--steel-l); background:none;border:0;cursor:pointer; } .cat-reset:hover{color:var(--signal-on-dark);} .cat-group-head{border-bottom:1px solid rgba(255,255,255,.14);} .gtag{ font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;border-radius:2px; } .gcount{font-family:var(--sans);font-size:12px;} .pcard{ background:var(--ink-soft);border:1px solid rgba(255,255,255,.12); padding:24px 22px 22px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .pcard::before{ content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px; background:var(--wr-red);transform:scaleX(0);transform-origin:left;transition:transform .2s ease; } .pcard:hover{ background:var(--ink-soft);border-color:rgba(255,255,255,.34); transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.34); } .pcard:hover::before{transform:scaleX(1);} .pcard .pc-name{font-size:15.5px;font-weight:800;line-height:1.5;} .pcard .pc-dev{font-family:var(--sans);font-size:11.5px;color:var(--trace);letter-spacing:0;margin-top:5px;} .pcard .pc-badge{ font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.1em; padding:4px 8px;border-radius:2px; } .badge-encl{background:rgba(255,255,255,.1);color:#DCE6ED;} .badge-soce{background:var(--wr-red);color:#fff;} .pcard .pc-spec .k{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.1em;color:#7C909E;} .pcard .pc-spec .v{font-family:var(--sans);font-size:11.5px;color:#DCE6ED;} .pcard .pc-desc{font-size:12.5px;line-height:1.85;color:#A9BAC6;} .pcard .pc-detail{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--signal-on-dark);} .pcard .pc-grade{font-family:var(--sans);font-size:10px;color:#7C909E;} .cat-empty{font-family:var(--sans);font-size:14px;color:var(--steel-l);line-height:2;} /* -------------------------------------------------------- 11. applications */ .apps{background:var(--paper-warm);} .app{ background:#fff;border:1px solid var(--line-strong);border-top:3px solid var(--ink); padding:32px 28px 34px;border-radius:0; } .app:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,23,32,.13);border-top-color:var(--wr-red);} .app .ico{ width:44px;height:44px;border:2px solid var(--wr-red);color:var(--wr-red); font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.04em;margin-bottom:20px; } .app.s1 .ico,.app.s2 .ico,.app.s3 .ico,.app.s4 .ico{color:var(--wr-red);border-color:var(--wr-red);} .app h3{font-size:16.5px;font-weight:800;line-height:1.6;margin-bottom:10px;} .app p{font-size:13px;color:var(--steel);line-height:1.95;} .app .a-prod{ font-family:var(--sans);font-size:10.5px;color:var(--steel);letter-spacing:.02em; margin-top:16px;padding-top:12px;border-top:1px solid var(--line);line-height:1.7; } /* ------------------------------------------------------- 12. selection table */ .guide{background:var(--paper);} .guide-table-wrap{border:1px solid var(--line-strong);background:#fff;} .guide-table th{ background:var(--ink);color:#fff;font-family:var(--sans);font-size:11px;font-weight:700; letter-spacing:.16em;padding:15px 18px; } .guide-table td{padding:18px;font-size:13.5px;line-height:1.9;background:#fff;border-bottom:1px solid var(--line);} .guide-table tr:nth-child(even) td{background:#fff;} .guide-table tbody tr:hover td{background:#F7F9FA;} .guide-table tr td.need{font-weight:700;color:var(--ink);width:28%;} .guide-table tr td.rec{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--wr-red);} .guide-table tr td.why{color:var(--steel);font-size:13px;line-height:1.9;} /* ----------------------------------------------------------- 13. services */ .services{background:var(--paper-warm);} .svc-step{border-top:1px solid var(--line);padding:24px 0;gap:22px;} .svc-step::before{ font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--wr-red); } .svc-step h3{font-size:16px;font-weight:800;margin-bottom:6px;} .svc-step p{font-size:13.5px;color:var(--steel);line-height:1.95;} .svc-left p{font-size:15px;line-height:2;color:var(--steel);} .ct-lead-block{border-left:4px solid var(--wr-red);border-radius:0;} .ct-lead-text{font-size:14.5px;line-height:2;color:var(--steel);} /* ---------------------------------------------------------------- 14. why */ .why{background:var(--ink-soft);} .why-item{border-top:3px solid var(--wr-red);padding-top:22px;} .why-item h3{font-size:17px;font-weight:800;line-height:1.6;margin-bottom:12px;} .why-item p{font-size:13.5px;color:#A9BAC6;line-height:1.95;} /* ---------------------------------------------------------------- 15. faq */ .faq{background:var(--paper);} .faq-item{border-bottom:1px solid var(--line-strong);} .faq-q{font-family:var(--sans);font-size:16px;font-weight:700;line-height:1.7;padding:24px 4px;} .faq-q:hover{color:var(--wr-red);} .faq-q .qm{font-family:var(--sans);color:var(--wr-red);font-size:24px;font-weight:300;} .faq-a p{font-size:14px;color:var(--steel);line-height:2;} /* 製品ページ側の
FAQ */ .faq summary{font-family:var(--sans);font-weight:700;} .faq summary::after{color:var(--wr-red);font-family:var(--sans);} /* ------------------------------------------------------------ 16. contact */ .contact{background:var(--ink);} .contact-info .ci-row .k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;color:#7C909E;} .contact-info .ci-row .v{font-size:14.5px;} /* トップページの暗いコンタクト節にあるフォームだけを対象にする。 専用ページ /contact/ のフォームは白地なので触らないこと。 */ .contact .cform{background:var(--ink-soft);border:1px solid rgba(255,255,255,.14);} .contact .cform .selected-product{background:rgba(200,16,46,.12);border-color:rgba(200,16,46,.5);} .contact .cform .selected-product .sp-label{color:var(--signal-on-dark);font-family:var(--sans);font-weight:700;} .contact .field label{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;} .contact .field label .req{color:var(--signal-on-dark);} .contact .field input,.contact .field select,.contact .field textarea{border-radius:2px;font-family:var(--sans);} .contact .field input:focus,.contact .field select:focus,.contact .field textarea:focus{outline:2px solid var(--wr-red-hi);border-color:var(--wr-red-hi);} .contact .form-consent a{color:#fff;} .contact .cform .btn-submit{background:var(--wr-red);border-color:var(--wr-red);} .contact .cform .btn-submit:hover{background:var(--wr-red-hi);border-color:var(--wr-red-hi);} .contact .form-success{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);} /* ------------------------------------------------------------- 17. footer */ footer{background:var(--ink-deep);padding:72px 0 30px;} .fnav{background:var(--ink-deep);} .fnav-col b{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:#fff; } .fnav-col a{font-size:13px;color:rgba(255,255,255,.7);} .fnav-col a:hover{color:#fff;text-decoration:none;} .foot-col h3{font-size:11px;letter-spacing:.2em;color:#fff;} .foot-col a{font-size:13px;} .foot-col a:hover{color:var(--signal-on-dark);} .foot-brand p{font-size:13px;line-height:1.95;} .foot-bottom{font-family:var(--sans);font-size:11.5px;letter-spacing:.02em;border-top:1px solid rgba(255,255,255,.1);margin-top:0;} /* -------------------------------------------------- 18. interior pages */ .uhero{background:var(--ink);} .uhero-bg{opacity:.42;} .uhero-bg::after{background:linear-gradient(180deg,rgba(11,23,32,.55) 10%,rgba(11,23,32,.96));} .ucrumb{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--steel-l);} .usec-h{font-size:26px;font-weight:800;line-height:1.5;} .usec-s{font-size:14px;line-height:1.95;} .dev-c{border-top:3px solid var(--wr-red);border-radius:0;} .crumb{background:var(--paper-warm);font-family:var(--sans);font-size:12px;} .crumb .nav a{border:1px solid var(--line2);border-radius:2px;} .crumb .nav a:hover{border-color:var(--ink);color:var(--ink);} .hero-badge{ font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em; color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:2px; } .hero .dev{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--trace);} .hero-photo,.hero-block{border-radius:2px;} .figs img,.figs svg{border-radius:2px;} .cb-temp{border-radius:2px;font-family:var(--sans);} .cb-temp.cb-com{background:rgba(11,23,32,.08);color:var(--steel);} .cb-temp.cb-ind{background:rgba(200,16,46,.1);color:var(--wr-red);} .cb-fpga,.fs-dev{font-family:var(--sans);color:var(--wr-red);} .ct-quote-note{border-left:3px solid var(--wr-red);background:var(--paper-warm);} .ct-quote-note a{color:var(--wr-red);} .rel-card:hover{background:var(--paper-warm);} .cta-blk{background:var(--ink);padding:72px 0;} .gbar{background:var(--ink);} .gbar-lead{font-size:clamp(18px,2.1vw,23px);font-weight:800;line-height:1.5;} .gbar-cta{ font-family:var(--sans);font-size:13px;font-weight:700;border-radius:2px; background:var(--wr-red);border-color:var(--wr-red); } .gbar-cta:hover{background:#fff;border-color:#fff;color:var(--ink);} .ilist li{background:var(--paper-warm);border-radius:0;} .ilist li::before{color:var(--wr-red);} /* ------------------------------------------------------- 19. responsive */ @media (max-width:1024px){ .cat-controls{position:static;} .tech-grid{border-top-width:3px;} } /* ナビ文言が長い言語でも溢れないよう、1180px 以下はバーガーへ切り替える */ /* 狭幅のドロワー表示は html.wr-compact に一本化している（セクション 37）。 ここは wr-menu.js が読み込めなかった場合の保険として、最低限だけ持つ。 */ @media (max-width:1180px){ html:not(.wr-compact) .gnav-links{ position:absolute;top:var(--wr-hdr);left:0;right:0; flex-direction:column;align-items:stretch; justify-content:flex-start;flex:none; background:#fff;border-bottom:1px solid var(--line); box-shadow:0 18px 34px rgba(11,23,32,.16); padding:8px 0;display:none; max-height:calc(100vh - var(--wr-hdr));overflow-y:auto; } html:not(.wr-compact) .gnav-links.open{display:flex;} html:not(.wr-compact) .gnav-links a{ height:auto;padding:14px 22px;font-size:14px;color:var(--ink); border-bottom:1px solid var(--line); } html:not(.wr-compact) .gnav-links a:last-child{border-bottom:0;} html:not(.wr-compact) .gnav-links a::after{display:none;} html:not(.wr-compact) .gnav-links a.on{color:var(--wr-red);} html.wr-top:not(.wr-compact) .gnav-links a{color:var(--ink);} html:not(.wr-compact) .gnav-burger{display:block;min-width:44px;min-height:44px;} } @media (max-width:900px){ :root{--wr-hdr:60px;} .gnav-in{padding:0 20px;} .hero-top{padding-top:calc(var(--wr-hdr) + 40px);} } @media (max-width:760px){ .hero .wrap,.band .wrap{padding-left:20px;padding-right:20px;} .hero h1{font-size:clamp(26px,7vw,34px);} .seg{padding:32px 24px;} .seg-num{top:26px;right:24px;} .tc{padding:28px 22px 30px;} .hero-strip .cell{padding:22px 18px 24px 0;} .guide-table .need{width:auto;} } @media (prefers-reduced-motion:reduce){ .btn:hover,.app:hover,.pcard:hover{transform:none;} } /* 印刷 */ @media print{ .gnav,.cat-controls,.hero-slideshow,.hero-grid-bg{display:none!important;} body{background:#fff;color:#000;} } /* ------------------------------------------- 20. hero overlay (JS が付与) */ html.wr-ov-a .hero{margin-top:calc(-1 * var(--wr-hdr));} html.wr-ov-b .uhero{margin-top:calc(-1 * var(--wr-hdr));} html.wr-ov-b .uhero-in{padding-top:calc(var(--wr-hdr) + 56px);} html.wr-ov-c .fv{margin-top:calc(-1 * var(--wr-hdr));padding-top:calc(var(--wr-hdr) + 44px);} html.wr-ov-d .ct-head{margin-top:calc(-1 * var(--wr-hdr));padding-top:calc(var(--wr-hdr) + 56px);} /* JS 無効時にヘッダー下へ潜り込まないよう、既定は重ねない */ /* ---------------------------------------- 21. 既存CSSの取りこぼしを整える */ /* 別ページ用の footer{text-align:center} を拾ってしまうため戻す */ footer{text-align:left;} [dir="rtl"] footer{text-align:right;} /* フッターのブランドマーク（暗い地に暗い四角で沈んでいた） */ .brand .glyph{background:var(--wr-red);width:38px;height:38px;} .brand .glyph::after{font-family:var(--sans);font-size:20px;} .brand .bt b{font-weight:800;letter-spacing:.02em;} .brand .bt small{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;} /* 製品グループのタグ：赤は SoC-e 側だけに寄せ、Enclustra は中立に */ .gtag{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.14em;padding:5px 9px;} .gtag.encl{background:rgba(255,255,255,.08);color:#DCE6ED;border:1px solid rgba(255,255,255,.22);} .gtag.soce{background:var(--wr-red);color:#fff;border:1px solid var(--wr-red);} .cat-group-head h3{font-size:19px;font-weight:800;letter-spacing:.01em;} /* リセットは下線ではなくホバーで示す */ .cat-reset{text-decoration:none;padding:8px 2px;} .cat-reset:hover{text-decoration:underline;} /* カード境界は .pgrid の 1px グリッドに任せ、線を二重に引かない */ .pcard{border-color:transparent;} .pcard:hover{border-color:rgba(255,255,255,.30);} /* 製品ページ側のパーツ */ .pnav a,.rel-card b{font-weight:700;} .qspec .k{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;} .spec th{font-family:var(--sans);font-weight:600;letter-spacing:.1em;} .blk h2{font-size:24px;line-height:1.5;} .hero-cta .btn{font-size:13.5px;} /* 一覧ハブ（family / usecase）*/ .hub h1{font-family:var(--sans);font-weight:800;line-height:1.4;} .hub .lead{font-size:14.5px;line-height:2;color:var(--steel);} .crumbs{font-family:var(--sans);font-size:12px;color:var(--steel);} /* ============================================================================ 22. 製品ページのレスポンシブ復旧 このビルドの product.css は @media(max-width:900px) の中身が展開されて 常時適用されており、デスクトップでもモバイル1カラムで表示されていた。 901px 以上で本来のデスクトップ指定へ戻す。 ========================================================================= */ @media (min-width:901px){ .hero-in{grid-template-columns:1fr 1fr;gap:44px;} .hero-photo{order:0;min-height:280px;} .figs{grid-template-columns:1fr 1fr;} .ilist{grid-template-columns:1fr 1fr;} .pnav{grid-template-columns:1fr auto 1fr;} .pnav .list{grid-column:auto;order:0;} .qspec-in{grid-template-columns:repeat(4,1fr);gap:20px;} /* 型番表をカード表示からテーブル表示へ戻す */ .order-table{display:table;width:100%!important;} .order-table thead{display:table-header-group;} .order-table tbody{display:table-row-group;} .order-table tr{display:table-row;width:auto!important;margin-bottom:0;border:0;} .order-table th{display:table-cell;width:auto!important;} .order-table td{display:table-cell;width:auto!important;} } /* ============================================================================ 23. モバイルヘッダー ロゴ・グループサイト・言語・CTA・バーガーが横並びのままはみ出していたため、 幅に応じて優先度の低いものから畳む。 ========================================================================= */ @media (max-width:900px){ .gnav-in{gap:10px;padding:0 16px;flex-wrap:nowrap;} .gnav-logo img{height:22px;} html.wr-top .gnav-logo{padding:5px 10px;} .gsw-btn,.langsw-btn{padding:7px 9px;font-size:11px;} .gnav-cta{padding:10px 14px;font-size:12px;} .gnav-burger{flex:none;margin-left:2px;padding:4px 2px;font-size:20px;} .langsw{margin-left:0;} } @media (max-width:640px){ /* グループサイトの導線はフッターにも同じものがあるため、ここでは畳む */ .gsw{display:none;} .gnav-in{gap:8px;padding:0 14px;} .gnav-logo img{height:19px;} html.wr-top .gnav-logo{padding:4px 8px;} .gnav-cta{padding:9px 11px;font-size:11.5px;letter-spacing:0;} .langsw-btn{padding:6px 7px;} } @media (max-width:380px){ .gnav-cta{display:none;} } /* 逆向きに潰れていた指定（モバイル用が先、デスクトップ用が後）を狭幅で戻す */ @media (max-width:900px){ .qspec-in{grid-template-columns:1fr 1fr;gap:16px;padding:18px 20px;} .ilist{grid-template-columns:1fr;} .figs{grid-template-columns:1fr;} } @media (max-width:480px){ .qspec-in{grid-template-columns:1fr;gap:12px;} } /* 言語によってナビ文言の長さが大きく違うため、幅が詰まったら段階的に圧縮する */ /* 横並びナビが出る幅（1181px 以上）でだけ詰める。 1180px 以下はドロワー表示なので、ここで詰めると行が潰れる。 */ @media (max-width:1440px){ .gnav-in{gap:10px;padding:0 24px;} .gnav-cta{padding:10px 14px;font-size:12.5px;} .gsw-btn,.langsw-btn{padding:7px 9px;font-size:11.5px;} } @media (min-width:1181px) and (max-width:1440px){ .gnav-links a{padding:0 10px;font-size:12.5px;} .gnav-links a::after{left:10px;right:10px;} } @media (max-width:1240px){ .gnav-cta{padding:9px 12px;font-size:12px;} } /* ============================================================================ 24. インライン SVG の色 マークアップ内に旧配色（オレンジ／ティール）が属性で直書きされているため、 HTML には触れず CSS 側でテーマ色へ寄せる。CSS は presentation attribute に 優先するので上書きが効く。 ========================================================================= */ svg [fill="#ff5a36"],svg [fill="#d63a1c"]{fill:var(--wr-red);} svg [stroke="#ff5a36"],svg [stroke="#d63a1c"]{stroke:var(--wr-red);} svg [fill="#00b4a6"],svg [fill="#067c74"],svg [fill="#19c8b8"],svg [fill="#9fc4b6"]{fill:#8FA6B4;} svg [stroke="#00b4a6"],svg [stroke="#067c74"],svg [stroke="#9fc4b6"]{stroke:#8FA6B4;} svg [fill="#c9a84a"]{fill:#8FA6B4;} svg [stroke="#c9a84a"]{stroke:#8FA6B4;} /* 明るいカード上に置かれた黒はインクへ */ svg [fill="#0a1622"]{fill:var(--ink);} svg [stroke="#0a1622"]{stroke:var(--ink);} /* ============================================================================ 25. ユーティリティクラスに直書きされた旧配色 ビルドが生成した .u-xxxxxxxx は !important 付きで旧アクセント色を持つため、 同じ形で色だけテーマ側へ差し替える。 ========================================================================= */ .u-03e36a90{border-left-color:var(--wr-red) !important} .u-0b22c160{border-left:4px solid var(--wr-red) !important} .u-10daf281{border-top-color:#7FA0B4 !important} .u-357b9fe0{border-left-color:var(--wr-red) !important} .u-3a07a0b0{border-left-color:#7FA0B4 !important} .u-3e4b24da{background:#7FA0B4 !important} .u-46e43640{border-left-color:var(--wr-red) !important} .u-4e43eb6b{border-top-color:#7FA0B4 !important} .u-86f51a42{background:var(--wr-red) !important} .u-8dfa520b{border-left-color:#7FA0B4 !important} .u-b9aeab64{border-left:4px solid #7FA0B4 !important} .u-e467b1c1{background:#7FA0B4 !important} .u-e5de26b7{border-left:4px solid #7FA0B4 !important} .u-ebda5855{background:var(--wr-red) !important} .u-f02604cc{border-top-color:var(--wr-red) !important} .u-f7e0373f{border-top-color:var(--wr-red) !important} /* ============================================================================ 26. ハブページ（ファミリ別 / 用途別） 旧配色がハードコードされているため個別に上書き。 ========================================================================= */ .hub-grid{background:var(--line);border:1px solid var(--line);} .hub-card{background:#fff;padding:26px 24px;} .hub-card:hover{background:var(--paper-warm);} .hub-card h2{font-size:16.5px;font-weight:800;line-height:1.6;color:var(--ink);margin-bottom:10px;} .hub-card p{font-size:13px;line-height:1.9;color:var(--steel);} .hub-card .cnt{ font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.04em; color:var(--wr-red);margin-top:14px; } .hub .crumbs a{color:var(--steel);} .hub .crumbs a:hover{color:var(--wr-red);} .hub .lead{color:var(--steel);} /* 余った空セルが浮かないよう、グリッドの地はカードと同じ白に寄せる */ .hub-grid::after{content:none;} /* 4本柱カードは下端の数値を揃える */ .tc{display:flex;flex-direction:column;} .tc-spec{margin-top:auto;} /* ============================================================================ 27. ハーフラインのグリッド 「gap:1px + 親の背景色」で罫線を作る組み方は、最終行が埋まらないと 空セルが色の付いたブロックとして残る。カード側の枠線＋負マージンに 切り替えて、空セルが出ないようにする。 ========================================================================= */ .hub-grid{background:transparent;border:0;gap:0;} .hub-card{border:1px solid var(--line);margin:-1px 0 0 -1px;} .pgrid{background:transparent;border:0;gap:0;} .pcard{border:1px solid rgba(255,255,255,.12);margin:-1px 0 0 -1px;} .pcard:hover{border-color:rgba(255,255,255,.34);position:relative;z-index:2;} .rel-grid{background:transparent;border:0;gap:0;} .rel-card{border:1px solid var(--line);margin:-1px 0 0 -1px;} /* ============================================================================ 28. お問い合わせページ（/contact/）のフォーム 白地のページ。旧アクセント（オレンジ／ベージュ）だけを差し替える。 ========================================================================= */ .ct-head .eyebrow{ display:flex;align-items:center;gap:.7em; font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em; color:var(--signal-on-dark); } .ct-head .eyebrow::before{content:"";width:26px;height:2px;background:var(--signal-on-dark);flex:none;} .ct-head h1{font-family:var(--sans);font-weight:800;line-height:1.4;} .ct-info{border:1px solid var(--line);border-top:3px solid var(--wr-red);} .ct-info h2{font-size:16.5px;font-weight:800;} .ci-row .k{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--steel);} .ci-row .v a{color:var(--wr-red);} #fpga-contact-form label, #fpga-contact-form .label-like{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);} #fpga-contact-form .req{font-family:var(--sans);font-weight:700;background:var(--wr-red);border-radius:2px;} #fpga-contact-form .req-any{font-family:var(--sans);font-weight:700;background:var(--ink);border-radius:2px;} #fpga-contact-form .field-help{color:var(--steel);} #fpga-contact-form input[type="text"], #fpga-contact-form input[type="email"], #fpga-contact-form input[type="tel"], #fpga-contact-form textarea, #fpga-contact-form select{font-family:var(--sans);border-radius:2px;} #fpga-contact-form input[type="text"]:focus, #fpga-contact-form input[type="email"]:focus, #fpga-contact-form input[type="tel"]:focus, #fpga-contact-form textarea:focus{ border-color:var(--wr-red);box-shadow:0 0 0 3px rgba(200,16,46,.16); } #fpga-contact-form .checkbox-card{border-radius:2px;border-color:var(--line2);font-family:var(--sans);} #fpga-contact-form .checkbox-card:hover{border-color:var(--wr-red);} #fpga-contact-form .checkbox-card input[type="checkbox"]{accent-color:var(--wr-red);} #fpga-contact-form .checkbox-card.consent{background:var(--paper-warm);} #fpga-contact-form .ec-error{background:#FCEBEE;border-left-color:var(--wr-red);color:#8E0C21;} #fpga-contact-form .submit-button{ font-family:var(--sans);font-size:14px;font-weight:700;border-radius:2px; background:var(--wr-red);border:2px solid var(--wr-red);padding:15px 34px; } #fpga-contact-form .submit-button:hover:not(:disabled){background:var(--wr-red-hi);border-color:var(--wr-red-hi);} #fpga-contact-form .selected-product{ background:var(--paper-warm);border-left:4px solid var(--wr-red); } #fpga-contact-form .selected-product .sp-label{font-family:var(--sans);font-weight:700;letter-spacing:.12em;color:var(--steel);} #fpga-contact-form .selected-product button:hover{color:var(--wr-red);} /* ------------------------------------------------ 29. 可読性の微調整 */ /* フィルター見出しが暗い面で 2.8:1 しかなかったため引き上げる */ .filter-group .fg-label{color:#A9BAC6;} .stat-note{color:rgba(255,255,255,.72);} .pcard .pc-grade{color:#93A9B7;} .band .label{color:#93A9B7;} /* キーボード操作の可視性 */ .gnav-links a:focus-visible, .chip-btn:focus-visible, .pcard:focus-visible, .btn:focus-visible, .gnav-cta:focus-visible{outline:2px solid var(--wr-red-hi);outline-offset:3px;} .catalog :focus-visible,.contact :focus-visible,.why :focus-visible,.tech :focus-visible{outline-color:#FF7A85;} /* ------------------------------------- 30. 暗い面の上のアクセント文字 --signal を #C8102E にしたことで、暗い地の「文字色としての赤」が 3:1 前後まで落ちる。テキスト用途だけ --signal-on-dark へ振り替える。 */ .guide-table thead th, .guide-table thead th.need, .guide-table thead th.rec, .guide-table thead th.why{color:#fff;} .cat-group-head .gcount{color:#93A9B7;font-family:var(--sans);font-size:12px;} .ent .go{color:var(--signal-on-dark);} .hpanel-num{color:var(--signal-on-dark);} .hhint{color:rgba(255,255,255,.72);} .contact .ci-row .v a,.contact-info a{color:var(--signal-on-dark);} .u-400c211a{color:#93A9B7 !important;} /* ロジックセル規模バー：スチールのグラデでは白文字が乗らない */ .sr-fill{background:linear-gradient(90deg,#8E0C21,var(--wr-red));} .sr:hover{border-color:var(--wr-red);} .contact .contact-note{color:#93A9B7;} .foot-bottom .legal{color:#93A9B7;} /* ------------------------ 31. rgba() で残っていた旧アクセントの掃除 */ .uc-chip i{background:var(--wr-red);font-family:var(--sans);font-weight:700;border-radius:2px;} .cb-temp.cb-ind{background:rgba(200,16,46,.10);color:var(--wr-red);} .cb-temp.cb-com{background:rgba(11,23,32,.07);color:var(--steel);} .ot-custom-h{background:rgba(200,16,46,.10);color:var(--wr-red);} .ot-custom{background:rgba(200,16,46,.04);color:var(--steel);} .ot-std-h{background:rgba(11,23,32,.07);color:var(--ink);} .ot-std{background:rgba(11,23,32,.03);} .fv-badge{border:1px solid rgba(255,255,255,.4);color:#fff;font-family:var(--sans);font-weight:700;border-radius:2px;} .fv-brand{ border:1px solid rgba(255,255,255,.18);border-left:3px solid var(--wr-red); background:rgba(255,255,255,.05); } .pm-note{background:var(--paper-warm);border-left:3px solid var(--wr-red);border-radius:0;} .hero-photo.noimg{border:1px solid rgba(255,255,255,.18);} .hero-grid-bg,.fv-grid-bg{ background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); } .sr-dev{color:var(--wr-red);font-weight:800;} /* 短いバーでもラベルが読めるよう、ラベル自体に地色を持たせる */ .sr-fill span{background:var(--wr-red);padding:3px 7px;border-radius:2px;} /* ============================================================================ 32. 見出しのウェイト 旧デザインは明朝の font-weight:400 を前提にしていた。サンセリフに 置き換えた以上、細いままだと見出しに見えないので太らせる。 （トップページのヒーローだけは意図的に細字の2段組みなので除外） ========================================================================= */ h1,h2{font-weight:800;letter-spacing:-.005em;} h3,h4{font-weight:700;} .fv h1,.sec-h,.hpanel h3,.blk h1,.cta-blk h2,.hero-in h1{font-weight:800;} .sec-h{font-size:clamp(23px,2.9vw,32px);line-height:1.45;} .hero-in h1{font-size:clamp(26px,3.4vw,40px);line-height:1.35;} .fv h1{line-height:1.32;} /* ヒーロー（トップ）は2段構えを維持 */ .hero-top h1{font-weight:300;} .hero-top h1 .lead{font-weight:800;} .ucta h2{font-weight:800;font-size:clamp(23px,2.8vw,30px);line-height:1.45;} .u-58205c0e{font-weight:800 !important;line-height:1.4 !important;} .cta h2{font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.45;} /* ============================================================================ 33. 信号トレース（動く波形） ヒーロー背景の写真を邪魔せず、FPGA / 産業用 Ethernet の主題を示す署名要素。 本文が乗る左側はマスクで抜き、視線を奪わない範囲に抑える。 ========================================================================= */ .wr-trace{ position:absolute;inset:0;width:100%;height:100%; z-index:1;pointer-events:none;overflow:hidden; /* 見出し・本文が乗る左下を抜き、空が写る右上へ寄せる */ -webkit-mask-image:radial-gradient(82% 98% at 100% 0%,#000 0%,#000 40%,rgba(0,0,0,.40) 66%,transparent 88%); mask-image:radial-gradient(82% 98% at 100% 0%,#000 0%,#000 40%,rgba(0,0,0,.40) 66%,transparent 88%); } .wr-trace path,.wr-trace circle{vector-effect:non-scaling-stroke;} /* 配線 */ .wr-lane{fill:none;stroke:#FF5C68;stroke-width:1.1;stroke-dasharray:5 9;opacity:.44;} .wr-lane.alt{stroke:#7FB4D8;opacity:.38;} /* 走るパルス */ .wr-pulse{ fill:none;stroke:#FF5C68;stroke-width:2.2;stroke-linecap:round; stroke-dasharray:26 1600;stroke-dashoffset:1626;opacity:.85; animation:wr-run 11s linear infinite; } .wr-pulse.alt{stroke:#8FD0FF;stroke-width:1.8;opacity:.8;animation-duration:14s;} @keyframes wr-run{from{stroke-dashoffset:1626;}to{stroke-dashoffset:0;}} /* 矩形波（ビット列） */ .wr-wave{ fill:none;stroke:#8FD0FF;stroke-width:1.6;stroke-linejoin:miter; opacity:.62;stroke-dasharray:220 1400;stroke-dashoffset:1620; animation:wr-bits 13s linear infinite; } .wr-wave.alt{stroke:#FF5C68;opacity:.42;animation-duration:16s;} @keyframes wr-bits{from{stroke-dashoffset:1620;}to{stroke-dashoffset:0;}} /* 分岐ノード */ .wr-node{fill:#FF5C68;opacity:.5;animation:wr-blink 4.5s ease-in-out infinite;} .wr-node.alt{fill:#8FD0FF;opacity:.42;} @keyframes wr-blink{0%,100%{opacity:.22;}50%{opacity:.85;}} /* 短いヒーローでは配線を控えめに */ html.wr-ov-b .wr-trace, html.wr-ov-d .wr-trace{opacity:.7;} /* タブレット・スマートフォン：本文が画面幅いっぱいに広がり、配線を逃がす 余白が無い。位置で切り分ける代わりに、既存のグリッド背景と同じ「地の テクスチャ」として全体を薄くし、本文の可読性を優先する。 */ @media (max-width:1024px){ .wr-trace{ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%); mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%); opacity:.5; } } @media (max-width:640px){ .wr-trace{opacity:.4;} } /* 動きを減らす設定では静止した配線図として見せる */ @media (prefers-reduced-motion:reduce){ .wr-pulse,.wr-wave,.wr-node{animation:none;} .wr-pulse{stroke-dasharray:none;stroke-dashoffset:0;opacity:.22;} .wr-wave{stroke-dasharray:none;stroke-dashoffset:0;} } /* ============================================================================ 34. タブレット（横 761〜1024px）の詰まり解消 元 CSS の分岐は 760px と 1024px しか無く、iPad 縦（834px）で 4 カラムのまま詰まる箇所があったため補う。 ========================================================================= */ @media (max-width:1024px){ .hero-strip{grid-template-columns:1fr 1fr;} .hero-strip .cell:nth-child(2n){border-right:0;} .hero-strip .cell{padding:22px 20px 24px 0;} .hs{flex:0 0 50%;min-width:0;padding-right:16px;} .hero-stats{gap:16px 0;} .tech-grid{grid-template-columns:1fr 1fr;} .svc-grid{grid-template-columns:1fr;gap:34px;} .why-grid{grid-template-columns:1fr 1fr;gap:28px;} .app-grid{grid-template-columns:1fr 1fr;} .pgrid{grid-template-columns:1fr 1fr;} .ct-grid{grid-template-columns:1fr;gap:32px;} .form-grid{grid-template-columns:1fr;gap:34px;} .foot-grid{grid-template-columns:1fr 1fr;} .filter-row{gap:20px;} } @media (max-width:760px){ .hero-strip{grid-template-columns:1fr;} .hero-strip .cell{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);} .hero-strip .cell:last-child{border-bottom:0;} .why-grid{grid-template-columns:1fr;} } /* ============================================================================ 35. スマートフォンの操作性 タップ領域 44px 以上、本文まわりの最小文字サイズ 11px を確保する。 ========================================================================= */ @media (max-width:760px){ /* --- タップ領域 --- */ .gnav-burger{min-width:44px;min-height:44px;display:grid;place-items:center;} .gsw-btn,.langsw-btn{min-height:40px;padding:9px 11px;} .foot-col a,.fnav-col a{padding:11px 0;line-height:1.5;} .crumb .in a,.ucrumb a,.crumbs a{display:inline-block;padding:8px 2px;} .pnav a{min-height:44px;display:inline-flex;align-items:center;} .seg-link,.cat-reset,.what-link,.rel-more a,.pt-all{ min-height:44px;display:inline-flex;align-items:center; } .langsw-list a,.gsw-list a{padding:13px 16px;} .faq-q{padding:20px 4px;min-height:56px;} /* --- 最小文字サイズ --- */ .filter-group .fg-label{font-size:11px;} .pcard .pc-badge,.gtag{font-size:10.5px;} .pcard .pc-spec .k,.qspec .k,.contact-info .ci-row .k,.ci-row .k{font-size:11px;} .pcard .pc-grade{font-size:11px;} .pt-role,.lv-n,.hhint,.scroll-hint,.req-any,.req{font-size:11px;} .pcard .pc-desc,.app p,.tc p,.seg p{font-size:13.5px;} .hs-l,.hero-strip .lbl{font-size:12px;} } @media (max-width:760px){ .gnav-logo{padding:8px 0;} html.wr-top .gnav-logo{padding:7px 9px;} .qspec .q .k{font-size:11px;} #fpga-contact-form .req-any,#fpga-contact-form .req{font-size:11px;padding:3px 8px;} #fpga-contact-form .checkbox-card{min-height:52px;} #fpga-contact-form .checkbox-card input[type="checkbox"]{width:20px;height:20px;} /* 一覧チップ・アンカーナビのタップ領域 */ .pt-list a,.pt-chip,.ss-list a,.lv-list a,.anchor-nav a,.lnav a{ min-height:40px;display:inline-flex;align-items:center; } } @media (max-width:760px){ .pt-links a,.gg-list a,.uc-links a,.sp-links a,.foot-links a,.crumb .nav a{ min-height:40px;display:inline-flex;align-items:center; } .crumb .nav a{padding:0 12px;} } /* 34-b. 34 で入れた 1024px の 2 カラム指定が、元 CSS の 760px 分岐より 後ろに来るため狭幅で勝ってしまう。760px 以下を明示して打ち消す。 */ @media (max-width:760px){ .pgrid{grid-template-columns:1fr;} .app-grid{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr;} .hero-stats .hs{flex:0 0 50%;} } @media (max-width:560px){ .tech-grid{grid-template-columns:1fr;} } /* 35-b. 極小幅（〜430px）でヘッダーの行が溢れないよう詰める */ @media (max-width:430px){ .gnav-in{gap:6px;padding:0 12px;} .gnav-burger{min-width:40px;min-height:44px;margin-right:-6px;} .gnav-cta{padding:9px 10px;font-size:11px;} .langsw-btn{padding:9px 8px;font-size:10.5px;} .gnav-logo img{height:18px;} } @media (max-width:360px){ .gnav-cta{display:none;} .gnav-logo img{height:17px;} } @media (max-width:430px){ .band .label{white-space:normal;} .band .wrap{gap:14px;padding-left:16px;padding-right:16px;} .wrap{padding-left:16px;padding-right:16px;} } /* 長い型番・インタフェース名（例: Ethernet / PCIe / USB 2.0/3.0）が グリッドの最小幅を押し広げてカードをはみ出させるのを防ぐ */ .pcard,.pcard .pc-specs,.pcard .pc-spec{min-width:0;} .pcard .pc-spec .v,.pcard .pc-dev,.pcard .pc-name{overflow-wrap:anywhere;} .prod__spec li,.seg ul li .v{min-width:0;overflow-wrap:anywhere;} /* 2 つの中核ソリューションの一覧：右側の値が nowrap のまま 狭幅ではみ出していたので折り返す */ @media (max-width:900px){ .seg ul li{flex-wrap:wrap;gap:2px 12px;} .seg ul li .v{white-space:normal;text-align:left;flex:1 1 100%;} .seg ul li .k{flex:1 1 100%;} } /* ============================================================================ 36. メガメニュー ナビに触れた瞬間に、その配下の項目がすべて見える状態にする。 ========================================================================= */ .wr-nav-item{position:relative;display:flex;align-items:center;} .wr-nav-toggle{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:var(--wr-hdr);margin-left:-10px;padding:0; background:none;border:0;cursor:pointer;color:inherit; } .wr-nav-toggle span{ width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);opacity:.6;transition:transform .2s ease,opacity .2s ease; } .wr-nav-item:hover .wr-nav-toggle span, .wr-nav-item.is-open .wr-nav-toggle span{opacity:1;} .wr-nav-item.is-open .wr-nav-toggle span{transform:rotate(-135deg) translate(-3px,-3px);} .wr-nav-toggle{color:var(--ink);} html.wr-top .wr-nav-toggle{color:#fff;} /* 開いている親は赤の下線を出したままにする */ .wr-nav-item.is-open > a::after{transform:scaleX(1);} .wr-nav-item.is-open > a{color:var(--wr-red);} html.wr-top .wr-nav-item.is-open > a{color:#fff;} .wr-mega{ position:absolute;top:100%;left:50%; transform:translateX(-50%) translateY(6px); z-index:120; min-width:280px;max-width:min(820px,94vw); background:var(--ink);border-top:3px solid var(--wr-red); box-shadow:0 28px 64px rgba(11,23,32,.34); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .16s ease,transform .16s ease; } .wr-nav-item.is-open .wr-mega{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } .wr-mega-in{display:flex;gap:0;padding:26px 0;} .wr-mega-col{padding:0 28px;min-width:220px;border-right:1px solid rgba(255,255,255,.12);} .wr-mega-col:last-child{border-right:0;} .wr-mega-h{ display:block;font-family:var(--sans);font-size:10.5px;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--signal-on-dark); padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.18); } .wr-mega ul{list-style:none;margin:0;padding:0;} .wr-mega li{margin:0;} .wr-mega li a{ display:flex;align-items:baseline;gap:.6em; padding:8px 0;font-size:13.5px;font-weight:500;line-height:1.55; color:#D6E1E9;white-space:normal; } .wr-mega li a::before{ content:"–";color:#65808F;flex:none;transition:color .15s ease; } .wr-mega li a:hover{color:#fff;} .wr-mega li a:hover::before{color:var(--signal-on-dark);} .wr-mega-more{ display:inline-flex;align-items:center;gap:.45em;margin-top:12px; font-size:12.5px;font-weight:700;color:var(--signal-on-dark); } .wr-mega-more::after{content:"»";transition:transform .18s ease;} .wr-mega-more:hover::after{transform:translateX(3px);} /* 端に寄せて画面外へ出さない */ .gnav-links > .wr-nav-item:first-child .wr-mega{left:0;transform:translateX(0) translateY(6px);} .gnav-links > .wr-nav-item:first-child.is-open .wr-mega{transform:translateX(0) translateY(0);} .gnav-links > .wr-nav-item:last-child .wr-mega{left:auto;right:0;transform:translateX(0) translateY(6px);} .gnav-links > .wr-nav-item:last-child.is-open .wr-mega{transform:translateX(0) translateY(0);} /* ---- 狭幅（バーガー内）はアコーディオンとして開く ---- */ @media (prefers-reduced-motion:reduce){ .wr-mega{transition:none;} } /* 36-b. ヘッダーのリンク指定がパネル内のリンクにも効いてしまうため打ち消す */ .gnav-links .wr-mega a{ height:auto;padding:8px 0;font-size:13.5px;font-weight:500; color:#D6E1E9;white-space:normal;display:flex; } .gnav-links .wr-mega a::after{display:none;} .gnav-links .wr-mega a:hover{color:#fff;} .gnav-links .wr-mega .wr-mega-more{ padding:0;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--signal-on-dark); display:inline-flex;align-items:center; } .gnav-links .wr-mega .wr-mega-more:hover{color:#fff;} html.wr-top .gnav-links .wr-mega a{color:#D6E1E9;} html.wr-top .gnav-links .wr-mega a:hover{color:#fff;} html.wr-top .gnav-links .wr-mega .wr-mega-more{color:var(--signal-on-dark);} /* 項目が多い列は 2 段に折り返して縦を詰める */ .wr-mega-col.is-split{min-width:420px;} .wr-mega-col.is-split ul{columns:2;column-gap:26px;} .wr-mega-col.is-split li{break-inside:avoid;} /* ============================================================================ 37. 実測によるバーガー切り替え ナビ文言が 1 行に収まらない言語・幅では、JS が html.wr-compact を付ける。 1180px 以下と同じ表示へ落とす。 ========================================================================= */ html.wr-compact .gnav-links{ position:absolute;top:var(--wr-hdr);left:0;right:0; flex-direction:column;align-items:stretch; /* PC 用の右寄せ（justify-content:flex-end）が縦積みでも効くと、 内容がはみ出したとき上方向へあふれてスクロールで戻せなくなる。 */ justify-content:flex-start;flex:none; background:#fff;border-bottom:1px solid var(--line); box-shadow:0 18px 34px rgba(11,23,32,.16); padding:8px 0;display:none; max-height:calc(100vh - var(--wr-hdr));overflow-y:auto; } html.wr-compact .gnav-links.open{display:flex;} html.wr-compact .gnav-links a{ height:auto;padding:14px 22px;font-size:14px;color:var(--ink); border-bottom:1px solid var(--line); } html.wr-compact .gnav-links a:last-child{border-bottom:0;} html.wr-compact .gnav-links a::after{display:none;} html.wr-compact .gnav-links a.on{color:var(--wr-red);} html.wr-compact .gnav-burger{display:block;min-width:44px;min-height:44px;} html.wr-compact .wr-nav-item{display:block;position:relative;} html.wr-compact .wr-nav-item > a{padding-right:56px;} html.wr-compact .wr-nav-toggle{ position:absolute;right:10px;top:0;margin-top:0;width:48px;height:52px;color:var(--ink); } html.wr-compact .wr-mega{ position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; display:none;min-width:0;max-width:none; background:#F2F5F7;border-top:1px solid var(--line);box-shadow:none; } html.wr-compact .wr-nav-item.is-open .wr-mega{display:block;} html.wr-compact .wr-mega-in{display:block;padding:14px 0 18px;} html.wr-compact .wr-mega-col{border-right:0;padding:0 22px;min-width:0;} html.wr-compact .wr-mega-col.is-split ul{columns:1;} html.wr-compact .wr-mega-h{color:var(--wr-red);border-bottom-color:var(--line);} html.wr-compact .gnav-links .wr-mega a{color:var(--ink);font-size:14px;padding:11px 0;border-bottom:0;} html.wr-compact .gnav-links .wr-mega a:hover{color:var(--wr-red);} html.wr-compact .gnav-links .wr-mega .wr-mega-more{color:var(--wr-red);} html.wr-compact .wr-nav-toggle{color:var(--ink);} html.wr-compact .wr-mega-col + .wr-mega-col{margin-top:16px;} html.wr-compact .wr-mega li a::before{color:#93A9B7;} html.wr-compact .wr-mega-more{color:var(--wr-red);} html.wr-compact .wr-mega-col.is-split{min-width:0;} html.wr-compact .gnav-links > .wr-nav-item:first-child .wr-mega, html.wr-compact .gnav-links > .wr-nav-item:last-child .wr-mega{left:auto;right:auto;transform:none;} html.wr-compact .wr-nav-item.is-open .wr-mega{transform:none;} /* 開いた項目の見出しが上へ流れないよう、スクロール位置の基準を持たせる */ html.wr-compact .wr-nav-item{scroll-margin-top:0;} /* ============================================================================ 38. 製品タイプカード（fpga-guide #ptype）の写真レイアウト 写真・ブロック図・アイコンが混在し、それぞれ縦横比も地色も違うため、 高さ固定では絵の大きさがばらついて並びが崩れる。 ・図版枠を固定比率にして、列幅が変わっても行が揃うようにする ・地色を 1 種類に統一し、絵は切らずに収める ・件数とリンクを下端へ寄せ、説明文の長短で行が段違いにならないようにする ========================================================================= */ .pt-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-items:stretch;} .pt{border:1px solid var(--line);border-radius:0;background:#fff;} .pt:hover{box-shadow:0 16px 38px rgba(11,23,32,.12);transform:translateY(-2px);} .pt-photo{ height:auto;aspect-ratio:16 / 10; padding:12px;background:#fff;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:center;overflow:hidden; } .pt-photo picture{display:flex;width:100%;height:100%;} .pt-photo img{ width:100%;height:100%;max-width:none;max-height:none;object-fit:contain; } .pt-photo-ip{background:#F4F7F9;} .pt-photo-ip svg [stroke]{stroke:var(--steel);} .pt-photo-ip svg{width:auto;height:58%;max-width:50%;} .pt-body{display:flex;flex-direction:column;flex:1;padding:22px 20px 20px;} .pt-role{ font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--steel);margin-bottom:8px; } .pt h3{font-size:17px;font-weight:800;line-height:1.5;margin-bottom:10px;} .pt-d{font-size:13px;line-height:1.85;color:var(--steel);margin-bottom:16px;min-height:0;} /* 件数から下を下端へ寄せて、カードごとのボタン位置を揃える */ .pt-cnt{ margin-top:auto;margin-bottom:12px;padding-top:14px; border-top:1px solid var(--line); font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.04em; color:var(--wr-red); } .pt-links{gap:7px;} .pt-links a{ font-family:var(--sans);font-size:11.5px;font-weight:600; padding:7px 11px;border:1px solid var(--line2);border-radius:2px;color:var(--ink); } .pt-links a:hover{background:var(--ink);color:#fff;border-color:var(--ink);} .pt-all{ background:var(--wr-red);border-color:var(--wr-red);color:#fff;font-family:var(--sans); } .pt-all:hover{background:var(--wr-red-hi);border-color:var(--wr-red-hi);color:#fff;} @media (max-width:760px){ .pt-grid{grid-template-columns:1fr;} .pt-photo{aspect-ratio:16 / 9;padding:14px;} } /* ============================================================================ 39. 法務リンク（プライバシーポリシー）の置き場所 本文やカードの中に混ぜず、フッター最下部の法務行に 1 本だけ置く。 コピーライトと視覚的に切り離し、文章の続きに見えないようにする。 ========================================================================= */ footer{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px; } .wr-legal-text{flex:1 1 auto;min-width:0;} .wr-legal-link{ flex:none;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em; color:#93A9B7;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.22); transition:color .15s ease,border-color .15s ease; } .wr-legal-link:hover{color:#fff;border-bottom-color:#fff;} /* トップページなど foot-bottom を持つページ */ .foot-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;} .foot-bottom .legal{flex:1 1 auto;} .foot-bottom .wr-legal-link{margin-left:auto;} @media (max-width:760px){ footer,.foot-bottom{flex-direction:column;align-items:flex-start;gap:12px;} .foot-bottom .wr-legal-link{margin-left:0;} .wr-legal-link{min-height:40px;display:inline-flex;align-items:center;} } /* 下層ページの