.service-banners { display:grid; gap:18px; padding:clamp(40px,5vw,72px) max(28px,calc((100vw - 1238px)/2)); background:linear-gradient(135deg,#9fbd65 0%,#b9d881 52%,#d9eab8 100%); }
.service-banner { position:relative; display:flex; align-items:center; width:min(960px,100%); min-height:240px; margin-inline:auto; overflow:hidden; }
.service-banner__visual { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.service-banner__copy { position:relative; z-index:1; width:min(55%,560px); padding:clamp(32px,4vw,54px); }
.service-banner .eyebrow { margin:0 0 13px; font-size:13px; font-weight:700; letter-spacing:.12em; }
.service-banner .eyebrow::before { display:inline-block; width:21px; height:2px; margin:0 12px 4px 0; content:""; background:currentColor; }
.service-banner h2 { margin:0 0 11px; font-family:Outfit,"Noto Sans JP",sans-serif; font-size:clamp(32px,3.3vw,44px); line-height:1.12; letter-spacing:-.055em; }
.service-banner__copy > p:not(.eyebrow) { margin:0; font-size:16px; line-height:1.8; }
.service-banner .button { margin-top:20px; font-size:14px; }
.service-banner--kuchikomi { color:#fff; background:#5b3322; }
.service-banner--kuchikomi .eyebrow { color:#f1bb80; }
.service-banner--kuchikomi .service-banner__copy > p:not(.eyebrow) { color:#f4ddd0; }
.service-banner--kuchikomi .button { color:#4c281c; background:#fff6ec; border-color:#fff6ec; }
.service-banner--kuchikomi .button:hover,.service-banner--kuchikomi .button:focus-visible { color:#fff; background:#8e5034; border-color:#8e5034; }
.service-banner--aichat { color:#20253a; border:1px solid #e4e7f0; background:#fff; }
.service-banner--aichat .eyebrow { color:#4254df; }
.service-banner--aichat h2 { color:#3852dc; }
.service-banner--aichat .service-banner__copy > p:not(.eyebrow) { color:#566073; }
.service-banner--aichat .button { color:#fff; background:#4053e6; border-color:#4053e6; }
.service-banner--aichat .button:hover,.service-banner--aichat .button:focus-visible { color:#fff; background:#e2863e; border-color:#e2863e; }
.service-banner--skill { color:#17212b; border:1px solid #e1e4ea; background:#fff; }
.service-banner--skill .eyebrow { color:#684bd7; }
.service-banner--skill h2 { background:linear-gradient(90deg,#2d6bff,#8b5cf6,#db4d9e); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.service-banner--skill .service-banner__copy > p:not(.eyebrow) { color:#53606c; }
.service-banner--skill .button { color:#fff; background:#253242; border-color:#253242; }
.service-banner--skill .button:hover,.service-banner--skill .button:focus-visible { color:#fff; background:#6b4bd7; border-color:#6b4bd7; }
@media (min-width:761px) { .service-banners { grid-template-columns:repeat(2,minmax(0,1fr)); }.service-banner { width:100%; }.service-banner__copy { width:72%; padding:26px; }.service-banner h2 { font-size:clamp(25px,2.5vw,33px); }.service-banner__copy > p:not(.eyebrow) { font-size:14px; } }
@media (max-width:760px) { .service-banners { gap:18px; padding:40px 0; }.service-banner { min-height:330px; align-items:flex-start; }.service-banner__visual { object-position:66% center; }.service-banner__copy { width:100%; padding:32px 28px; }.service-banner h2 { font-size:32px; }.service-banner__copy > p:not(.eyebrow) { max-width:280px; }.service-banner--kuchikomi::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(70,35,22,.7),rgba(70,35,22,.08) 75%); }.service-banner--kuchikomi .service-banner__copy { z-index:2; } }

/* 検討スペシャル：紹介ページと共通の配色・マーク */
.service-banner--special { color:#282334; border:1px solid #e4dbe9; background:radial-gradient(circle at 95% 15%,rgba(229,154,103,.28),transparent 48%),radial-gradient(circle at 82% 75%,rgba(197,84,150,.16),transparent 46%),linear-gradient(145deg,#f3f0fa,#faf3f7 56%,#f8eee9); }
.service-banner--special .eyebrow { color:#6656c9; font-size:12px; letter-spacing:.02em; }
.service-banner--special .eyebrow::before { display:none; }
.service-banner--special h2 { color:#55439b; }
.service-banner--special .service-banner__copy { width:82%; }
.service-banner--special .service-banner__copy > p:not(.eyebrow) { color:#59515f; }
.service-banner--special .button { color:#fff; background:linear-gradient(110deg,#6656c9,#b54b87 58%,#a8583e) border-box; border-color:transparent; box-shadow:0 16px 34px rgba(126,72,151,.2); }
.service-banner--special .button:hover,.service-banner--special .button:focus-visible { color:#fff; background:linear-gradient(110deg,#6656c9,#b54b87 58%,#a8583e) border-box; border-color:transparent; box-shadow:0 20px 42px rgba(126,72,151,.28); }
.service-banner--special .button:focus-visible { outline:3px solid #282334; outline-offset:4px; }
.service-banner__special-mark { position:absolute; width:clamp(95px,12vw,150px); height:auto; right:-12px; top:50%; transform:translateY(-50%); opacity:.2; pointer-events:none; }
@media (max-width:760px) { .service-banner--special .service-banner__copy { width:100%; }.service-banner__special-mark { width:140px; right:12px; top:auto; bottom:-12px; transform:none; opacity:.16; } }