/* P02 — AI導入・開発・伴走支援。共通の配色とヘッダーを継承。 */
.implementation .detail-shell{width:100%;max-width:1480px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.implementation .detail-section{padding-top:86px;padding-bottom:86px}
.implementation .detail-hero{padding-top:25px;padding-bottom:34px;background:var(--red);color:#fff}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px 15px;align-items:center;font-size:14px;color:var(--muted);line-height:1.8}
.detail-hero .breadcrumbs{color:inherit}
.detail-hero .breadcrumbs a:hover{color:inherit;text-decoration:underline;text-underline-offset:4px}
.detail-hero a:focus-visible{outline-color:#fff}
.detail-page-heading{padding:38px 0 20px}
.detail-hero h1{font-size:clamp(32px,3.2vw,46px);line-height:1.4;letter-spacing:-.05em;font-weight:750;margin:0 0 15px}
.detail-page-tagline{font-size:17px;font-weight:700;color:inherit;line-height:1.7}
.detail-page-intro{font-size:16px;line-height:1.9;color:inherit;max-width:800px;margin-top:10px}
.detail-button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;background:var(--red);color:#fff;border-radius:50px;padding:18px 23px;font-size:16px;line-height:1.7;font-weight:700;margin-top:28px;transition:background .2s}
.detail-button>span{font-size:24px;line-height:1}
.detail-button:hover{background:#1541a7}
.detail-mobile-break{display:none}
.detail-centered{text-align:center;max-width:790px;margin:0 auto 48px}
.detail-centered p,.detail-right-heading p{margin-top:22px;color:var(--muted);font-size:16px}
.fit-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px}
.fit-grid li>span{display:block;color:var(--red);font-size:40px;line-height:1.2;margin-bottom:20px}
.fit-grid h3{font-size:18px;line-height:1.7;letter-spacing:-.035em;margin-bottom:12px}
.fit-grid p{font-size:16px;color:var(--muted)}
.detail-split-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:42px}
.detail-split-heading>p{font-size:16px;max-width:500px;color:var(--muted)}
.scope-grid{list-style:none;counter-reset:scope;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 38px}
.scope-grid li{counter-increment:scope;border-bottom:1px solid var(--line);padding:24px 0 27px}
.scope-grid li::before{content:counter(scope,decimal-leading-zero);display:block;color:var(--red);font-size:16px;margin-bottom:17px}
.scope-grid h3{font-size:21px;line-height:1.7;margin-bottom:12px;letter-spacing:-.04em}
.scope-grid p{font-size:16px;color:var(--muted)}
.approach-band{background:#e2e2e2;margin:45px 0}
.approach-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:9%;align-items:start}
.approach-copy>p{margin-top:27px;max-width:420px}
.implementation p.detail-small{font-size:14px;color:var(--muted);line-height:1.9}
.approach-flow{min-width:0}
.approach-flow ol{list-style:none;counter-reset:approach;margin:0;padding:0}
.approach-flow li{position:relative;counter-increment:approach;display:grid;grid-template-columns:35px minmax(0,1fr);gap:20px;padding-bottom:30px}
.approach-flow li::before{content:counter(approach,decimal-leading-zero);background:var(--red);color:#fff;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:16px;position:relative;z-index:1}
.approach-flow li:not(:last-child)::after{content:"";position:absolute;top:35px;bottom:0;left:17px;width:1px;background:#b9b9b9}
.approach-flow h3{font-size:20px;letter-spacing:-.04em;line-height:1.6;margin:1px 0 7px}
.approach-flow li p{font-size:16px;color:var(--muted)}
.feedback-note{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--red);margin:0 0 16px}
.feedback-note>span{font-size:34px}
.detail-right-heading{text-align:right;margin:0 0 42px}
.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}
.example-grid article{background:#f4f4f1;border-radius:6px;padding:35px}
.example-category{font-size:14px;color:var(--red);font-weight:700;margin-bottom:18px}
.example-grid h3{font-size:25px;line-height:1.6;letter-spacing:-.04em}
.example-grid ul{margin:20px 0 0;padding-left:1.2em;font-size:16px;line-height:2}
.examples-note{margin-top:24px}
.responsibility-panel{background:var(--ink);color:var(--paper);padding:55px;display:grid;grid-template-columns:1fr 1.1fr;gap:8%;border-radius:6px}
.responsibility-panel h2{font-size:clamp(30px,3.2vw,46px);line-height:1.5}
.responsibility-panel h2 span{color:#fff}
.responsibility-panel p{font-size:16px}
.responsibility-panel ul{font-size:16px;line-height:2;margin:25px 0 0;padding-left:1.2em;color:#d4d4d4}
.responsibility-panel li+li{margin-top:7px}
.delivery-steps{counter-reset:delivery;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:27px;margin:0 0 50px;padding:0}
.delivery-steps li{counter-increment:delivery}
.delivery-steps li::before{content:counter(delivery,decimal-leading-zero);display:block;font-size:36px;line-height:1.4;color:var(--red);margin-bottom:20px}
.delivery-steps h3{font-size:18px;line-height:1.7;margin-bottom:12px;letter-spacing:-.04em}
.delivery-steps p{font-size:16px;color:var(--muted)}
.delivery-terms{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:40px;background:#e2e2e2;border-radius:6px}
.delivery-terms h3{font-size:24px;line-height:1.6;letter-spacing:-.04em;margin-bottom:20px}
.delivery-terms p{font-size:16px}
.implementation .detail-faq{padding-top:40px}
.detail-faq details p{font-size:16px;padding:0 30px 24px 0;color:var(--muted)}
@media(max-width:1100px){
  .fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .scope-grid{gap:16px 25px}
  .scope-grid h3{font-size:19px}
  .approach-layout{gap:6%;grid-template-columns:.9fr 1.1fr}
  .delivery-steps{gap:19px}
  .delivery-steps h3{font-size:16px}
  .responsibility-panel{padding:36px;gap:6%}
  .delivery-terms{padding:30px;gap:6%}
  .delivery-terms h3{font-size:21px}
}
@media(max-width:760px){
  .implementation .detail-section{padding-top:54px;padding-bottom:54px}
  .implementation .detail-hero{padding-top:17px;padding-bottom:22px}
  .breadcrumbs{gap:6px 10px}
  .detail-button{font-size:14px;padding:16px 20px;gap:20px;margin-top:23px}
  .detail-page-heading{padding:28px 0 12px}
  .detail-hero h1{font-size:clamp(28px,6.8vw,36px);line-height:1.4;margin-bottom:14px}
  .detail-hero h1>span{display:block}
  .detail-page-tagline{font-size:16px}
  .detail-page-intro{font-size:16px;margin-top:9px}
  .detail-mobile-break{display:initial}
  .detail-centered{margin-bottom:30px}
  .detail-centered p,.detail-right-heading p{font-size:16px;margin-top:18px}
  .fit-grid{grid-template-columns:1fr;gap:26px}
  .fit-grid li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:5px 18px}
  .fit-grid li>span{font-size:30px;grid-row:1/3;margin:0}
  .fit-grid h3{font-size:18px;margin:0}
  .fit-grid p{grid-column:2}
  .detail-split-heading{grid-template-columns:1fr;gap:23px;margin-bottom:20px}
  .detail-split-heading>p{font-size:16px}
  .scope-grid{grid-template-columns:1fr;gap:0}
  .scope-grid li{padding:24px 0}
  .scope-grid li::before{margin-bottom:10px}
  .scope-grid h3{font-size:21px;margin-bottom:8px}
  .approach-band{margin:10px 0}
  .approach-layout{grid-template-columns:1fr;gap:40px}
  .approach-copy>p{margin-top:22px;max-width:none}
  .approach-flow li{gap:14px;padding-bottom:25px}
  .approach-flow h3{font-size:18px}
  .approach-flow li p{font-size:16px}
  .feedback-note{font-size:14px}
  .detail-right-heading{margin-bottom:30px}
  .example-grid{grid-template-columns:1fr;gap:17px}
  .example-grid article{padding:25px 22px}
  .example-grid h3{font-size:21px}
  .example-category{margin-bottom:12px}
  .example-grid ul{font-size:16px;margin-top:15px}
  .responsibility-panel{padding:30px 24px;grid-template-columns:1fr;gap:27px}
  .responsibility-panel h2{font-size:31px}
  .responsibility-panel p{font-size:16px}
  .delivery-steps{grid-template-columns:1fr;gap:27px;margin-bottom:35px}
  .delivery-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 17px}
  .delivery-steps li::before{font-size:25px;grid-row:1/3;margin:0}
  .delivery-steps h3{font-size:18px;margin:0}
  .delivery-steps p{grid-column:2;font-size:16px}
  .delivery-terms{grid-template-columns:1fr;padding:28px 24px;gap:32px}
  .delivery-terms h3{font-size:22px;margin-bottom:17px}
  .implementation .detail-faq{padding-top:20px}
}
@media(prefers-reduced-motion:reduce){.detail-button{transition:none}}

/* Soft light and raised surfaces in the body. */
.fit-grid li>span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(140deg,#f9f9f9,#e2e2e2);box-shadow:7px 7px 16px #00000012,-7px -7px 16px #ffffffc9,inset 1px 1px 2px #fff;margin-bottom:24px}
.example-grid{gap:30px}
.example-grid article{background:linear-gradient(140deg,#f3f3f1,#e9e9e7);border-radius:16px;box-shadow:10px 10px 24px #00000013,-10px -10px 24px #ffffffb3,inset 1px 1px 1px #fff}
.approach-flow li::before{background:linear-gradient(140deg,#2d61d9,#1d50c7 55%,#1640a1);box-shadow:3px 4px 8px #0000001f,inset 1px 1px 2px #ffffff6b,inset -1px -1px 2px #10317d4d}
.responsibility-panel{background:linear-gradient(135deg,#292929,#191919 65%);border-radius:16px;box-shadow:0 17px 30px #0000001a,inset 0 1px 1px #ffffff29}
.delivery-terms{background:#e9e9e9;border-radius:16px;box-shadow:inset 7px 7px 16px #0000000e,inset -7px -7px 16px #ffffffbf}
@media(max-width:760px){
  .fit-grid li{grid-template-columns:48px minmax(0,1fr);gap:5px 18px}
  .fit-grid li>span{width:48px;height:48px;font-size:30px;margin:0;box-shadow:5px 5px 11px #00000012,-5px -5px 11px #ffffffc9,inset 1px 1px 2px #fff}
  .example-grid{gap:24px}
  .example-grid article{box-shadow:7px 7px 16px #00000013,-7px -7px 16px #ffffffb3,inset 1px 1px 1px #fff}
}

/* Keep the two full-width section headings on one line on desktop. */
@media(min-width:761px){
  #examples-title br,#delivery-title br{display:none}
  #examples-title,#delivery-title{white-space:nowrap}
  #delivery>.detail-centered{max-width:none}
}

/* Shared oversized lettering, scaled for the service page. */
.implementation .service-word-band{border:0;font-size:clamp(64px,8.5vw,136px);gap:40px;padding:20px 0 26px}
@media(max-width:760px){.implementation .service-word-band{font-size:64px;gap:25px;padding:12px 0 18px}}

/* Tonal brand relief fills the wide hero's right side without adding height. */
.implementation .detail-hero{overflow:hidden}
.detail-hero>.detail-shell{position:relative}
.detail-hero .breadcrumbs,.detail-page-heading{position:relative;z-index:1}
.service-hero-art{position:absolute;right:calc(var(--gutter) - 120px);top:50%;width:clamp(600px,50vw,760px);aspect-ratio:1;transform:translateY(-50%) rotate(-12deg);pointer-events:none}
.service-hero-art::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#3e6fe2 6%,#285acf 42%,#1441ab 90%);-webkit-mask:url('../kagari-logo-mark-v4-black.svg') center/contain no-repeat;mask:url('../kagari-logo-mark-v4-black.svg') center/contain no-repeat;filter:drop-shadow(8px 10px 12px #0929754d) drop-shadow(-5px -6px 10px #6392ff4d)}
@media(max-width:1199px){.service-hero-art{display:none}}

#examples>.detail-right-heading{text-align:center}