@charset "UTF-8";

.detail-page { --detail-ink:#16251b; --detail-green:#1b6339; --detail-dark:#0e2015; --detail-pale:#edf4ed; --detail-line:#bbd0bf; color:var(--detail-ink); background:#f7f9f4; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif; }
.detail-page main { padding-top:64px; }
.detail-page .shell { width:min(100% - 88px,1260px); }
.detail-page main [id] { scroll-margin-top:88px; }
.detail-page a:focus-visible,.detail-page summary:focus-visible { outline:3px solid #bd342b; outline-offset:4px; }
.detail-hero { position:relative; min-height:670px; overflow:hidden; color:#f4f9f3; background:radial-gradient(circle at 77% 23%,rgba(54,111,67,.43),transparent 38%),linear-gradient(125deg,#0d1f14,#173623); }
.detail-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right,rgba(204,236,209,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(204,236,209,.04) 1px,transparent 1px); background-size:92px 92px; mask-image:linear-gradient(90deg,transparent 25%,#000); }
.detail-hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:50px; align-items:center; padding-block:clamp(88px,10vw,150px); }
.detail-eyebrow,.detail-kicker { margin:0; color:#348051; font:700 11px ui-monospace,SFMono-Regular,monospace; letter-spacing:.16em; }
.detail-eyebrow { color:#a2d9ad; }
.detail-hero h1 { max-width:850px; margin:27px 0 28px; font-size:clamp(43px,5.2vw,78px); line-height:1.22; font-weight:700; letter-spacing:-.075em; }
.detail-hero h1 em { color:#bce7c4; font-style:normal; }
.detail-lead { max-width:700px; color:#d2e3d4; font-size:clamp(15px,1.3vw,18px); line-height:2; }
.detail-hero-link { min-height:52px; display:inline-flex; align-items:center; gap:40px; margin-top:30px; padding:8px 3px; border-bottom:1px solid #bce7c4; color:#d7f1db; font-size:13px; font-weight:700; }
.detail-hero-link:hover { color:#fff; }
.detail-hero-art { position:relative; min-height:420px; display:grid; place-items:center; isolation:isolate; }
.art-orbit { position:absolute; aspect-ratio:1; width:min(36vw,430px); border:1px solid rgba(184,229,191,.23); border-radius:50%; animation:detail-orbit 28s linear infinite; }
.art-orbit::after { content:""; position:absolute; top:9%; left:19%; width:6px; height:6px; border-radius:50%; background:#d7f8db; box-shadow:0 0 17px #abe3b6; }
.art-orbit-two { width:min(26vw,310px); transform:rotate(50deg); border-style:dashed; animation-duration:36s; animation-direction:reverse; }
.art-orbit-three { width:min(16vw,190px); animation-duration:22s; }
.art-core { z-index:1; width:175px; height:175px; display:grid; place-items:center; border-radius:50%; background:#c7e9c9; box-shadow:0 0 80px rgba(116,201,133,.18); color:#16482a; font:700 20px ui-monospace,monospace; text-align:center; line-height:1.55; letter-spacing:-.03em; }
.detail-hero-art > small { position:absolute; bottom:5%; color:#9fc5a5; font:10px ui-monospace,monospace; letter-spacing:.12em; }
@keyframes detail-orbit { to { transform:rotate(360deg); } }
.service-diagram,.ai-diagram { position:relative; z-index:2; width:min(100%,470px); border:1px solid rgba(210,250,216,.35); background:linear-gradient(140deg,rgba(25,66,41,.82),rgba(9,33,22,.87)); box-shadow:0 28px 70px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(14px); }
.service-diagram::before,.ai-diagram::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 20%,rgba(201,246,209,.07) 43%,transparent 55%); background-size:220% 100%; animation:diagram-sheen 8s ease-in-out infinite; }
.diagram-caption,.ai-diagram-head { min-height:44px; padding:13px 18px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(206,249,214,.19); color:#b6d4bc; font:700 9px ui-monospace,SFMono-Regular,monospace; letter-spacing:.13em; }
.diagram-caption b,.ai-diagram-head b { margin-left:auto; color:#d0f2d4; font-size:9px; font-weight:600; }
.diagram-pulse { width:6px; height:6px; flex:none; border-radius:50%; background:#93eda6; box-shadow:0 0 0 4px rgba(147,237,166,.12),0 0 14px #93eda6; animation:diagram-pulse 2.8s ease-in-out infinite; }
.diagram-main { min-height:245px; padding:34px 22px 22px; display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); align-items:center; gap:5px; }
.diagram-input,.diagram-output { display:grid; align-content:center; gap:9px; }
.diagram-input>span,.diagram-output>span { margin-bottom:6px; color:#a1cbaa; font:700 9px ui-monospace,SFMono-Regular,monospace; letter-spacing:.12em; }
.diagram-input>div { height:35px; padding:9px 11px; display:flex; align-items:center; gap:5px; border:1px solid rgba(205,243,212,.22); background:rgba(238,255,241,.07); transform:skewY(-3deg); box-shadow:7px 7px 0 rgba(5,19,11,.16); }
.diagram-input>div:nth-of-type(2) { margin-inline:9px -9px; }
.diagram-input i { display:block; height:3px; width:25%; border-radius:5px; background:#a5c6ad; opacity:.8; }
.diagram-input i:nth-child(2) { width:39%; opacity:.48; }
.diagram-input i:nth-child(3) { width:18%; opacity:.65; }
.diagram-hub { position:relative; width:64px; height:64px; display:grid; place-items:center; border:1px solid #b5e8bb; border-radius:50%; background:radial-gradient(circle,#9ee4aa 0 16%,#205d38 18% 46%,#103a26 48%); box-shadow:0 0 0 9px rgba(116,203,133,.08),0 0 30px rgba(125,238,145,.4); }
.diagram-hub::before,.diagram-hub::after { content:""; position:absolute; z-index:-1; top:50%; width:28px; height:1px; background:linear-gradient(90deg,transparent,#b5e8bb); }
.diagram-hub::before { right:100%; }.diagram-hub::after { left:100%; transform:rotate(180deg); }
.hub-ring { position:absolute; inset:-12px; border:1px dashed rgba(175,232,184,.52); border-radius:50%; animation:detail-orbit 11s linear infinite; }
.hub-signal { color:#edfff0; font-size:32px; line-height:1; transform:translateY(-2px); }
.diagram-output>div { min-height:34px; padding:7px 9px 7px 12px; display:flex; justify-content:space-between; align-items:center; border:1px solid rgba(180,237,192,.42); background:linear-gradient(100deg,rgba(185,242,195,.16),rgba(220,255,226,.05)); color:#e6ffea; font:700 12px ui-monospace,SFMono-Regular,monospace; letter-spacing:.08em; animation:diagram-path 5s ease-in-out infinite; }
.diagram-output>div:nth-of-type(2) { animation-delay:.35s; }.diagram-output>div:nth-of-type(3) { animation-delay:.7s; }
.diagram-output i { color:#b3e7bd; font-style:normal; font-size:16px; }
.diagram-track { min-height:42px; padding:8px 18px; display:flex; justify-content:space-between; align-items:center; gap:7px; border-top:1px solid rgba(206,249,214,.19); color:#b9d7bf; font-size:10px; font-weight:700; letter-spacing:.04em; }
.diagram-track i { width:clamp(12px,4vw,48px); height:1px; background:linear-gradient(90deg,#98d9a5,rgba(152,217,165,.25)); }
.ai-diagram { width:min(100%,430px); padding-bottom:15px; }
.ai-diagram-head { margin-bottom:10px; }
.ai-step { position:relative; min-height:79px; margin-inline:16px; padding:10px 14px; display:grid; grid-template-columns:28px minmax(0,1fr) 30px; align-items:center; gap:10px; border:1px solid rgba(197,238,204,.26); background:rgba(222,255,229,.08); }
.ai-step-num { color:#a9d0b1; font:10px ui-monospace,SFMono-Regular,monospace; align-self:start; margin-top:3px; }
.ai-step>div { min-width:0; }
.ai-step small { position:static; display:block; margin-bottom:4px; color:#9dc9a6; font:700 9px ui-monospace,SFMono-Regular,monospace; letter-spacing:.12em; }
.ai-step strong { color:#f1fff2; font-size:15px; letter-spacing:-.02em; }
.ai-lines { display:flex; gap:5px; margin-top:7px; }
.ai-lines i { width:43%; height:2px; background:#a2c5aa; opacity:.5; }.ai-lines i:last-child { width:24%; opacity:.27; }
.ai-step-icon { color:#b8eac3; font-size:20px; }
.ai-step-draft { background:linear-gradient(110deg,rgba(55,123,72,.58),rgba(152,225,166,.1)); border-color:rgba(159,233,174,.58); box-shadow:inset 2px 0 #a5edb2; }
.ai-processing { display:flex; gap:3px; align-items:center; }.ai-processing i { width:4px; height:4px; border-radius:50%; background:#b5efc0; animation:diagram-pulse 1.4s ease-in-out infinite; }.ai-processing i:nth-child(2) { animation-delay:.2s; }.ai-processing i:nth-child(3) { animation-delay:.4s; }
.ai-step-review { background:#c9edd0; border-color:#c9edd0; }.ai-step-review .ai-step-num,.ai-step-review small { color:#306d42; }.ai-step-review strong { color:#123d23; }
.ai-approved { width:30px; height:30px; display:grid; place-items:center; border:1px solid #347c4b; border-radius:50%; color:#1b6b36; font-size:20px; font-weight:700; }
.ai-connector { height:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }.ai-connector span { width:1px; height:8px; background:#a8e3b3; }.ai-connector i { width:5px; height:5px; border-right:1px solid #a8e3b3; border-bottom:1px solid #a8e3b3; transform:rotate(45deg); }
@keyframes diagram-sheen { 50% { background-position:100% 0; } }
@keyframes diagram-pulse { 50% { opacity:.45; box-shadow:0 0 0 7px rgba(147,237,166,.07),0 0 22px #93eda6; } }
@keyframes diagram-path { 50% { border-color:rgba(190,255,202,.9); background-color:rgba(151,226,164,.18); transform:translateX(3px); } }
.detail-section { padding-block:clamp(85px,9vw,140px); }
.detail-two-col { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,2.8vw,36px); }
.detail-two-col > div { min-width:0; }
.detail-two-col > div:last-child { max-width:850px; }
.detail-two-col h2,.detail-section-head h2 { margin:20px 0 0; font-size:clamp(31px,4vw,58px); line-height:1.3; letter-spacing:-.07em; }
.detail-two-col p:not(.detail-kicker) { max-width:70ch; margin:0 0 20px; color:#445b49; font-size:15px; line-height:1.95; }
.detail-two-col p.detail-large { color:#243e2c; font-size:clamp(18px,1.8vw,24px); line-height:1.85; }
.detail-approach { background:#fff; }
.detail-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:54px; }
.detail-compare>div { min-width:0; padding:clamp(24px,3vw,45px); background:#eef3ed; border:1px solid #c1d4c2; }
.detail-compare>div:last-child { background:#163a25; border-color:#163a25; color:#edf8ed; }
.detail-compare small { color:#3f8a56; font:700 10px ui-monospace,monospace; letter-spacing:.15em; }
.detail-compare>div:last-child small { color:#a5dbaf; }
.detail-compare h3 { margin:18px 0 24px; font-size:clamp(21px,2vw,30px); letter-spacing:-.05em; }
.detail-compare ol { margin:0; padding-left:1.4em; display:grid; gap:12px; font-size:14px; line-height:1.65; }
.detail-section-head { max-width:850px; margin-bottom:42px; }
.detail-section-head h2 { margin-bottom:17px; }
.detail-section-head>p:not(.detail-kicker) { color:#526b56; font-size:15px; line-height:1.9; }
.detail-menu { background:#e8f1e8; }
.detail-service-menu { border-top:1px solid #9ab69e; }
.detail-service-menu a { min-height:104px; padding:20px 8px; display:grid; grid-template-columns:55px minmax(0,1fr) 170px 24px; gap:22px; align-items:center; border-bottom:1px solid #9ab69e; transition:padding .25s,background .25s; }
.detail-service-menu a:hover { padding-inline:19px; background:rgba(255,255,255,.5); }
.detail-service-menu span,.detail-service-menu small { color:#4f7857; font:11px ui-monospace,monospace; letter-spacing:.06em; }
.detail-service-menu strong { font-size:clamp(20px,2.3vw,31px); letter-spacing:-.055em; }
.detail-service-menu b { color:#187446; font-size:22px; font-weight:400; }
.detail-service { background:#fff; border-bottom:1px solid #d4dfd2; }
.detail-service-alt { background:#f1f6ef; }
.detail-service-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(25px,3vw,42px); }
.detail-service-title { position:relative; min-height:0; padding-bottom:28px; border-bottom:1px solid #bfd0c1; }
.detail-service-title>p { margin:0; color:#337b4b; font:11px ui-monospace,monospace; letter-spacing:.15em; }
.detail-service-title h2 { position:relative; z-index:1; margin:30px 0; font-size:clamp(35px,4vw,57px); line-height:1.3; letter-spacing:-.07em; }
.detail-service-mark { position:absolute; right:4px; bottom:-8px; color:#d9e9d8; font:700 clamp(90px,12vw,155px) ui-monospace,monospace; letter-spacing:-.13em; line-height:1; }
.detail-service-copy { min-width:0; max-width:850px; }
.detail-service-copy>p { margin:0 0 18px; color:#425b48; font-size:15px; line-height:1.95; }
.detail-service-copy>p.detail-tagline { color:#183e27; font-size:clamp(19px,2vw,27px); font-weight:700; line-height:1.65; letter-spacing:-.04em; }
.detail-suitable { margin-top:35px; padding:26px 30px; background:#eaf2e9; border-left:3px solid #2a8750; }
.detail-suitable h3 { margin:0 0 14px; color:#1b6037; font-size:15px; }
.detail-suitable ul { margin:0; padding-left:1.2em; display:grid; gap:9px; color:#2e4d37; font-size:13px; line-height:1.7; }
.detail-method { margin-top:22px; padding-top:22px; border-top:1px solid #aec8b1; }
.detail-method small { color:#2b7b48; font:11px ui-monospace,monospace; letter-spacing:.12em; }
.detail-method p { margin:9px 0 7px; color:#465f4a; font-size:13px; line-height:1.8; }
.detail-method a,.detail-link-row a { display:inline-flex; min-height:44px; align-items:center; color:#166939; border-bottom:1px solid currentColor; font-size:13px; font-weight:700; }
.detail-method a:hover,.detail-link-row a:hover { color:#0a3f22; }
.detail-pricing { background:#e7f0e6; }
.detail-steps,.detail-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:45px; padding:1px; background:#abc8b0; border:1px solid #abc8b0; }
.detail-steps article,.detail-role-grid article { min-height:225px; padding:clamp(25px,3vw,42px); background:#f9fcf8; }
.detail-steps span,.detail-role-grid small { color:#32814e; font:11px ui-monospace,monospace; letter-spacing:.1em; }
.detail-steps h3,.detail-role-grid h3 { margin:34px 0 13px; font-size:clamp(19px,1.9vw,27px); letter-spacing:-.05em; }
.detail-steps p,.detail-role-grid p { margin:0; color:#4d6552; font-size:13px; line-height:1.8; }
.detail-faq { background:#fff; }
.detail-faq-list { border-top:1px solid #bad0bd; }
.detail-faq-list details { border-bottom:1px solid #bad0bd; }
.detail-faq-list summary { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 4px; cursor:pointer; font-size:15px; font-weight:700; list-style:none; }
.detail-faq-list summary::-webkit-details-marker { display:none; }
.detail-faq-list summary::after { content:"+"; color:#297a49; font-size:24px; font-weight:400; }
.detail-faq-list details[open] summary::after { content:"−"; }
.detail-faq-list details>p { margin:0 0 23px; color:#4c6551; font-size:13px; line-height:1.8; }
.detail-cta { padding-block:clamp(75px,9vw,130px); color:#f5faf4; background:radial-gradient(circle at 88% 25%,#285d38,transparent 38%),#102719; }
.detail-cta .shell { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 35px; align-items:end; }
.detail-cta p { grid-column:1/-1; margin:0; color:#a8d6b1; font:11px ui-monospace,monospace; letter-spacing:.13em; }
.detail-cta h2 { grid-column:1/-1; margin:14px 0 10px; font-size:clamp(36px,5vw,68px); line-height:1.25; letter-spacing:-.07em; }
.detail-cta span { max-width:60ch; color:#c6dec9; font-size:14px; line-height:1.8; }
.detail-cta a { min-height:48px; display:inline-flex; align-items:center; padding:12px 22px; background:#ccebd1; color:#123c22; font-size:13px; font-weight:700; white-space:nowrap; }
.detail-cta a:hover { background:#fff; }
.detail-end { padding-block:22px; background:#0c1b12; color:#bcd4bf; }
.detail-end .shell { display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; font-size:11px; }
.detail-end strong { color:#f4faf4; font-size:21px; }
.detail-end a { margin-left:auto; border-bottom:1px solid currentColor; }
.detail-flow-section { background:#e9f2e9; }
.detail-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.detail-flow article { min-height:195px; padding:27px; background:#fff; border:1px solid #bcd0be; }
.detail-flow span,.detail-control-grid span { color:#3b8754; font:11px ui-monospace,monospace; letter-spacing:.1em; }
.detail-flow h3,.detail-control-grid h3 { margin:23px 0 11px; font-size:clamp(19px,2vw,27px); letter-spacing:-.05em; }
.detail-flow p,.detail-control-grid p { margin:0; color:#4c6350; font-size:13px; line-height:1.85; }
.detail-tool-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.detail-tool-list span { min-height:44px; display:inline-flex; align-items:center; padding:10px 17px; border:1px solid #a7c2ab; color:#2c603a; background:#f5faf4; font-size:12px; font-weight:700; }
.detail-review { background:#f0f6ef; }
.detail-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.detail-control-grid article { min-height:180px; padding:clamp(25px,3vw,42px); border:1px solid #b5cbb8; background:#fff; }
.detail-sample-section { background:#e8f2e8; }
.detail-sample-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:25px; }
.detail-sample-links a,.detail-contact-grid a { position:relative; min-height:215px; padding:30px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid #a7c7ae; background:#fff; transition:transform .25s,background .25s; }
.detail-sample-links a:hover,.detail-contact-grid a:hover { transform:translateY(-3px); background:#fbfefb; }
.detail-sample-links small,.detail-contact-grid small { color:#337c4d; font:11px ui-monospace,monospace; letter-spacing:.1em; }
.detail-sample-links strong,.detail-contact-grid strong { margin:31px 0 9px; font-size:clamp(20px,2vw,28px); letter-spacing:-.05em; }
.detail-sample-links span,.detail-contact-grid span { color:#526b56; font-size:12px; line-height:1.8; }
.detail-sample-links b,.detail-contact-grid b { position:absolute; right:24px; top:24px; color:#257449; font-size:23px; font-weight:400; }
.detail-link-row { display:flex; flex-wrap:wrap; gap:15px 25px; margin-top:18px; }
.detail-company-work { background:#e8f1e8; }
.detail-areas { background:#fff; }
.detail-area-line { display:flex; flex-wrap:wrap; align-items:center; gap:17px; margin-top:36px; padding-block:24px; border-top:1px solid #a9c4ac; border-bottom:1px solid #a9c4ac; color:#1b5b34; font-size:clamp(16px,2vw,25px); font-weight:700; }
.detail-area-line i { color:#8ab698; font-style:normal; }
.detail-clarity { background:#eef4ed; }
.detail-contact-methods { background:#e8f1e8; }
.detail-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.detail-contact-grid a { min-height:230px; }
.detail-contact-next { background:#fff; }
@media(max-width:850px) {
  .detail-page .shell { width:min(100% - 44px,700px); }
  .detail-hero-grid,.detail-two-col,.detail-service-grid { grid-template-columns:1fr; }
  .detail-hero-grid { gap:0; padding-block:75px 60px; }
  .detail-hero { min-height:0; }
  .detail-hero-art { min-height:300px; }
  .art-orbit { width:300px; }.art-orbit-two { width:220px; }.art-orbit-three { width:145px; }
  .detail-service-title { min-height:0; padding-bottom:30px; border-bottom:1px solid #bfceb9; }
  .detail-service-mark { right:0; left:auto; bottom:0; font-size:100px; }
  .detail-two-col { gap:25px; }
  .detail-service-grid { gap:30px; }
  .detail-service-menu a { grid-template-columns:35px 1fr 24px; gap:15px; }
  .detail-service-menu small { display:none; }
  .detail-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-role-grid,.detail-steps,.detail-sample-links { grid-template-columns:1fr; }
  .detail-role-grid article,.detail-steps article { min-height:0; }
}
@media(max-width:600px) {
  .detail-page .shell { width:min(100% - 36px,700px); }
  .detail-section { padding-block:76px; }
  .detail-hero h1 { font-size:clamp(38px,10vw,56px); }
  .detail-hero-grid { padding-block:65px 30px; }
  .detail-hero-art { min-height:260px; }
  .detail-service-art { min-height:330px; }
  .detail-tech-art { min-height:420px; }
  .service-diagram,.ai-diagram { width:min(100%,410px); }
  .diagram-main { min-height:212px; padding:22px 13px 14px; grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); }
  .diagram-hub { width:50px; height:50px; }.hub-ring { inset:-7px; }
  .diagram-hub::before,.diagram-hub::after { width:12px; }
  .diagram-input>div { height:31px; padding-inline:7px; }
  .diagram-output>div { min-height:31px; padding-inline:7px; font-size:10px; }
  .diagram-track { padding-inline:12px; font-size:9px; }
  .ai-diagram-head b { max-width:95px; text-align:right; line-height:1.35; }
  .detail-compare,.detail-control-grid,.detail-contact-grid { grid-template-columns:1fr; }
  .detail-flow { grid-template-columns:1fr; }
  .detail-service-menu a { min-height:78px; }
  .detail-service-menu strong { font-size:19px; }
  .detail-suitable { padding:22px; }
  .detail-cta .shell { grid-template-columns:1fr; }
  .detail-cta h2,.detail-cta p { grid-column:1; }
  .detail-cta a { width:max-content; margin-top:8px; }
  .detail-end a { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  .detail-page .art-orbit,.detail-page .hub-ring,.detail-page .diagram-pulse,.detail-page .service-diagram::before,.detail-page .ai-diagram::before,.detail-page .diagram-output>div,.detail-page .ai-processing i { animation:none; }
}
@media(prefers-reduced-motion:reduce) { .art-orbit { animation:none; }.detail-service-menu a,.detail-sample-links a,.detail-contact-grid a { transition:none; } }

/* 具体例と情報の区分を、文章だけに頼らず読める形にする。 */
.detail-example-section { padding: 10px 0 clamp(70px, 7vw, 110px); background: #e9f2e9; }
.detail-example-flow { padding: clamp(24px, 4vw, 48px); border: 1px solid #a9c4af; background: #f8fcf7; }
.detail-example-flow > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 18px; }
.detail-example-flow article { padding: clamp(18px, 2.5vw, 32px); border-top: 3px solid #3c8b58; background: #fff; }
.detail-example-flow article small { color: #237348; font-weight: 700; }
.detail-example-flow article p { margin: 16px 0 0; color: #2e4c36; font-size: 14px; line-height: 1.8; }
.detail-example-flow > small { color: #55745d; font-size: 12px; }
.detail-tool-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.detail-tool-groups > div { padding: 25px; border: 1px solid #b7cdb9; background: #f8fbf7; }
.detail-tool-groups h3 { margin: 0; color: #244e31; font-size: 17px; }
.detail-tool-groups .detail-tool-list { margin-top: 18px; }
.detail-tool-groups p { margin: 19px 0 0; color: #59715e; font-size: 12px; line-height: 1.7; }
.detail-area-line span small { display: block; margin-top: 5px; color: #5b7c64; font-size: 11px; font-weight: 500; }
.detail-team { background: #eaf2e9; }
.detail-profile { padding: clamp(24px, 3vw, 42px); border-left: 3px solid #2f8050; background: #fff; }
.detail-profile small { color: #2e7950; font: 700 11px ui-monospace, monospace; letter-spacing: .12em; }
.detail-profile h3 { margin: 18px 0; color: #173c27; font-size: clamp(25px, 2.8vw, 36px); }
.detail-profile a { display: inline-block; margin-top: 8px; color: #176b3a; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 851px) {
  .detail-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .detail-example-flow > div, .detail-tool-groups { grid-template-columns: 1fr; }
}
.detail-next-steps{display:grid;gap:0;margin:0 0 22px;padding:0;list-style:none;border-top:1px solid #afc9b3}
.detail-next-steps li{padding:22px 0;border-bottom:1px solid #afc9b3}
.detail-next-steps span{display:block;color:#287d49;font:700 11px ui-monospace,monospace;letter-spacing:.1em}
.detail-next-steps strong{display:block;margin:9px 0;color:#203c2b;font-size:20px}
.detail-next-steps p{margin:0!important}
.detail-output-example { margin: 18px 0 22px; padding: 17px; border: 1px solid #b7d4bd; background: #f4faf4; }
.detail-output-example > strong { display: flex; align-items: baseline; gap: 10px; color: #1e623a; font-size: 13px; }
.detail-output-example > strong small { color: #537c60; font-size: 10px; font-weight: 500; }
.detail-output-example > div { display: flex; align-items: stretch; gap: 6px; margin-top: 12px; }
.detail-output-example span { display: grid; flex: 1; min-height: 46px; place-items: center; padding: 7px; border: 1px solid #c4dcc8; background: #fff; color: #204c2d; font-size: 11px; font-weight: 700; text-align: center; }
.detail-output-example b { align-self: center; color: #478b59; font-size: 14px; font-weight: 400; }
@media (max-width: 600px) {
  .detail-output-example { padding: 13px; }
  .detail-output-example span { font-size: 10px; }
}

/* 相談ページでは入力への到達を優先し、準備事項は短い補足にする。 */
@media (max-width: 600px) {
  .detail-contact .detail-hero-grid { padding-block: 48px 56px; }
  .detail-contact .detail-hero-art { display: none; }
  .detail-contact #prepare { padding-block: 44px; }
  .detail-contact #prepare .detail-steps { margin-top: 24px; }
  .detail-contact #prepare .detail-steps article { padding: 17px 20px; }
  .detail-contact #prepare .detail-steps h3 { margin: 8px 0 4px; font-size: 18px; }
}