/** * TOP カード帯：6 列グリッド＋高級トーン（DOM/JS 非変更・CSS のみ）。 * レイアウト: 枚数が 2 / 3 / 6 / 9 のときは L 字（左 3×2 + 右上下 3×1 を縦に連結）。 * それ以外は 4n 非対称。:has() 非対応ブラウザは 4n のみ。 * 対象: 業務サービス / AIツール / ナビカード / 価格ライン（trends 除外）。 */ @media (min-width: 769px) { #app.lib-app--top .lib-api-top-services .lib-st-columns-container, #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container, #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container, #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container, #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 32px !important; row-gap: 32px !important; grid-auto-flow: row; align-items: stretch; width: 100%; box-sizing: border-box; } /* デフォルト: 4n 非対称（:has L が当たらない件数用） */ #app.lib-app--top .lib-api-top-services .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 1), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 1), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 1), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 1), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 1) { grid-column: span 4; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 2), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 2), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 2), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 2), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 2) { grid-column: span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 3), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 3), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 3), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 3), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 3), #app.lib-app--top .lib-api-top-services .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 4), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 4), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 4), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 4), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container > [data-testid="column"].stColumn:nth-child(4n + 4) { grid-column: span 2; } /* ----- L 字: 2 枚（左縦長 + 右上のみ、右下は余白） ----- */ #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(1) { grid-column: 1 / span 3; grid-row: span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(2):last-child) > [data-testid="column"].stColumn:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; } /* ----- L 字: 3 枚（典型サービス帯） ----- */ #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(3) { grid-column: 4 / span 3; grid-row: 2; } /* ----- L 字 ×2: 6 枚 ----- */ #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(3) { grid-column: 4 / span 3; grid-row: 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(4) { grid-column: 1 / span 3; grid-row: 3 / span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(5) { grid-column: 4 / span 3; grid-row: 3; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(6):last-child) > [data-testid="column"].stColumn:nth-child(6) { grid-column: 4 / span 3; grid-row: 4; } /* ----- L 字 ×3: 9 枚 ----- */ #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(1), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(2), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(3), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(3) { grid-column: 4 / span 3; grid-row: 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(4), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(4) { grid-column: 1 / span 3; grid-row: 3 / span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(5), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(5) { grid-column: 4 / span 3; grid-row: 3; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(6), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(6) { grid-column: 4 / span 3; grid-row: 4; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(7), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(7), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(7), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(7), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(7) { grid-column: 1 / span 3; grid-row: 5 / span 2; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(8), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(8), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(8), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(8), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(8) { grid-column: 4 / span 3; grid-row: 5; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(9), #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(9), #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(9), #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(9), #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(9):last-child) > [data-testid="column"].stColumn:nth-child(9) { grid-column: 4 / span 3; grid-row: 6; } } @media (max-width: 900px) and (min-width: 769px) { #app.lib-app--top .lib-api-top-services .lib-st-columns-container, #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container, #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container, #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container, #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container { gap: 24px !important; row-gap: 24px !important; } } @media (max-width: 768px) { #app.lib-app--top .lib-api-top-services .lib-st-columns-container > [data-testid="column"].stColumn, #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container > [data-testid="column"].stColumn, #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container > [data-testid="column"].stColumn, #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container > [data-testid="column"].stColumn, #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container > [data-testid="column"].stColumn { grid-column: span 6 !important; grid-row: auto !important; } #app.lib-app--top .lib-api-top-services .lib-st-columns-container, #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container, #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container, #app.lib-app--top .lib-top-section--price_line_cards .lib-st-columns-container, #app.lib-app--top .lib-top-section--ai_tools .lib-st-columns-container { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; row-gap: 20px !important; } } /* ----- カード本体（サービス / AIツール） ----- */ #app.lib-app--top a.lib-metric.card.st-node--card, #app.lib-app--top .lib-top-ai-tools-wrap a.lib-top-ai-tool-card { padding: 28px 24px 32px; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; } /* 上部アクセント（既存 ::before はプレースホルダ等に使用中のため ::after で帯のみ） */ #app.lib-app--top a.lib-metric.card.st-node--card::after, #app.lib-app--top .lib-top-ai-tools-wrap a.lib-top-ai-tool-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #d4af37, #c9a227); opacity: 0.88; z-index: 3; pointer-events: none; border-radius: 20px 20px 0 0; } #app.lib-app--top a.lib-metric.card.st-node--card:hover, #app.lib-app--top .lib-top-ai-tools-wrap a.lib-top-ai-tool-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); } #app.lib-app--top a.lib-metric.card.st-node--card:hover::after, #app.lib-app--top .lib-top-ai-tools-wrap a.lib-top-ai-tool-card:hover::after { height: 6px; } /* プレースホルダ帯（top-cards-layout の ::before）: 画像は差し替えず高さ・角のみ整える */ #app.lib-app--top a.lib-metric.card.st-node--card:not(:has(img))::before, #app.lib-app--top a.lib-metric.card.st-node--card.lib-card-img-missing::before { height: 200px; border-radius: 12px 12px 0 0; margin: -28px -24px 16px -24px; } #app.lib-app--top a.lib-metric.card.st-node--card img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; } /* タイポ（.val / p.val = 見出し相当, .lbl / p.lbl = 本文） */ #app.lib-app--top a.lib-metric.card.st-node--card p.val, #app.lib-app--top a.lib-metric.card.st-node--card .val, #app.lib-app--top a.lib-metric.card.st-node--card h1, #app.lib-app--top a.lib-metric.card.st-node--card h2, #app.lib-app--top a.lib-metric.card.st-node--card h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; letter-spacing: 0.02em; color: #0f1c2e; } #app.lib-app--top a.lib-metric.card.st-node--card p.lbl, #app.lib-app--top a.lib-metric.card.st-node--card .lbl { font-size: 14px; line-height: 1.7; color: #555; } #app.lib-app--top a.lib-metric.card.st-node--card > * + * { margin-top: 12px; } #app.lib-app--top a.lib-metric.card.st-node--card h2 + p, #app.lib-app--top a.lib-metric.card.st-node--card p.val + p.lbl { margin-top: 8px; } #app.lib-app--top .lib-top-ai-tool-card__name { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0; color: #0f1c2e; } #app.lib-app--top .lib-top-ai-tool-card__desc { font-size: 14px; line-height: 1.7; color: #555; } #app.lib-app--top .lib-top-ai-tools-wrap a.lib-top-ai-tool-card > * + * { margin-top: 12px; } /* ----- ナビカード（背景はインライン維持。上乗せで質感のみ） ----- */ #app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro { padding: 28px 24px 32px; border-radius: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.28); } #app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #d4af37, #c9a227); opacity: 0.88; z-index: 3; pointer-events: none; border-radius: 20px 20px 0 0; } #app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); border-color: rgba(201, 162, 77, 0.45); } #app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro:hover::after { height: 6px; } #app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro .st-nav-card-label { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.45; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); } @media (prefers-reduced-motion: reduce) { #app.lib-app--top a.lib-metric.card.st-node--card, #app.lib-app--top .lib-top-ai-tools-wrap a.lib-top-ai-tool-card, #app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro { transition: box-shadow 0.2s ease; } #app.lib-app--top a.lib-metric.card.st-node--card:hover, #app.lib-app--top .lib-top-ai-tools-wrap a.lib-top-ai-tool-card:hover, #app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro:hover { transform: none; } } /* TOP #page-host 先頭の「業務内容／価格の目利き／AI分析ツール」3枚: 6列L字をやめて同幅3列（#page-host は #app の兄弟のため body:has で束ねる） */ @media (min-width: 769px) { body:has(#app.lib-app--top) #page-host .lib-api-top-services:not(.lib-api-top-ai-tools) .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row; gap: clamp(1rem, 2.4vw, 1.5rem) !important; row-gap: clamp(1rem, 2.4vw, 1.5rem) !important; } body:has(#app.lib-app--top) #page-host .lib-api-top-services:not(.lib-api-top-ai-tools) .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(1), body:has(#app.lib-app--top) #page-host .lib-api-top-services:not(.lib-api-top-ai-tools) .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(2), body:has(#app.lib-app--top) #page-host .lib-api-top-services:not(.lib-api-top-ai-tools) .lib-st-columns-container:has(> [data-testid="column"].stColumn:nth-child(3):last-child) > [data-testid="column"].stColumn:nth-child(3) { grid-column: auto !important; grid-row: auto !important; } }