.design-hero{background:#252e54;color:white;padding:60px 0}.design-hero>.wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:50px;align-items:center}.design-hero h1{font-size:clamp(30px,3.3vw,44px);line-height:1.6}.design-hero .eyebrow{color:#ceb27a}.design-hero .label{color:#acd8d2}.design-hero .lead{color:#d0daea;font-size:14px}.hero-link{color:white;font-size:12px}.design-visual{padding:30px;background:#ffffff09;border:1px solid #ffffff26;text-align:center}.design-visual>p{font-size:9px;letter-spacing:.18em;color:#c8b27d}.design-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.design-inputs span{background:white;color:#252e54;font-size:12px;padding:12px 6px}.visual-arrow{color:#a1d7cf;font-size:23px;padding:10px}.design-center{background:#1b2446;padding:22px}.design-center img{width:160px;max-width:100%}.design-center strong{display:block;font-size:15px;margin-top:12px}.design-output{border:1px solid #a1d7cf;padding:17px;color:#d7ebe7;font-size:17px}.design-intro{padding-top:45px;padding-bottom:45px}.design-intro p{max-width:1000px;font-size:16px;margin:0}.requirements-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:45px}.requirements-layout p{font-size:17px;line-height:2.45;word-break:auto-phrase}.nobr{white-space:nowrap}.requirements-layout aside{padding:28px;background:#edf5f4;border-top:3px solid #07878b;position:relative;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-top-color .2s ease}.requirements-layout aside:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(37,46,84,.1);border-top-color:#b18b43}.requirements-layout aside>a::after{content:"";position:absolute;inset:0;z-index:1}.requirements-layout aside:hover a{text-decoration:underline;text-underline-offset:3px}.requirements-layout h3{font-size:18px}.requirements-layout ul{padding-left:20px;color:#637087;font-size:13px}.requirements-layout li{padding:6px 0}.design-bandwidth article{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding:35px 0;border-top:1px solid #dce4e9}.design-bandwidth h3{font-size:25px}.design-bandwidth p,.design-bandwidth li{font-size:14px}.design-bandwidth .metaphor{color:#07878b}.design-bandwidth ul{padding-left:20px;color:#637087}.design-bandwidth li{padding:6px 0}.design-bandwidth figure{margin:0;background:white;padding:20px}.design-bandwidth img{width:100%;height:auto;display:block}.design-bandwidth figcaption{font-size:10px;color:#7a8798;margin-top:10px}.design-note{font-size:11px;border-left:2px solid #b18b43;padding-left:15px;margin-top:25px}.design-related{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.design-related a{padding:27px;border:1px solid #dce4e9;border-top:2px solid #07878b}.design-related small{color:#a3813d;letter-spacing:.1em;font-size:10px}.design-related h3{font-size:19px;margin:15px 0}.design-related span{font-size:12px;color:#07878b;font-weight:700}.design-cta{background:#edf5f4}@media(max-width:900px){.design-hero>.wrap{gap:25px;grid-template-columns:1.2fr 1fr}.design-hero .actions{align-items:flex-start;flex-direction:column}.requirements-layout,.design-bandwidth article{gap:25px}.design-related{gap:15px}}@media(max-width:640px){.design-hero{padding:40px 0}.design-hero>.wrap,.requirements-layout,.design-bandwidth article,.design-related{grid-template-columns:1fr}.design-hero h1{font-size:29px}.design-visual{margin-top:10px;padding:25px}.design-intro p{font-size:14px}.requirements-layout h2{font-size:26px}.design-bandwidth h3{font-size:23px}.design-bandwidth article{gap:20px}.design-bandwidth figure{padding:12px}.design-cta .actions{align-items:flex-start;flex-direction:column}}

/* 2026-10-27　ご提案・設計の手順（阪本さんご指示）
     ・上にあった4つのボックスは外した
     ・下の4項目を、トップページの「導入までの流れ」と同じ
       「縦線＋丸＋Step 1」の形にした
     ・個別通信設計は1項目の文章が長いため、トップのような横並びにはせず、
       縦に積んで線を縦に伸ばしている（トップのスマホ表示と同じ考え方） */
/*  線は ol ではなく各項目に持たせ、
    「最初の丸の中心」から「最後の丸の中心」までで終わるようにしている。
    ol に border-left を引くと、項目の文章の長さによって
    最後の丸より下に線が余ってしまうため。 */
.design-flow{list-style:none;margin:38px 0 0;padding:0}
.design-flow li{position:relative;padding:4px 0 34px 34px}
.design-flow li:last-child{padding-bottom:4px}
.design-flow li:not(:last-child):after{content:"";position:absolute;
                       left:8px;top:16px;bottom:-16px;width:2px;
                       background:#d8e0e7;z-index:0}
.design-flow li:before{content:"";position:absolute;left:0;top:7px;z-index:1;
                       width:12px;height:12px;border-radius:50%;
                       border:3px solid #fff;background:#07878b;
                       box-shadow:0 0 0 1px #07878b}
.design-flow li:nth-child(2n):before{background:#b18b43;box-shadow:0 0 0 1px #b18b43}
.design-flow li span{display:block;font-size:12px;font-weight:700;
                     letter-spacing:.04em;color:#07878b;margin-bottom:5px}
.design-flow li b{display:block;font-size:20px;line-height:1.5;color:#252e54}
.design-flow li p{margin:9px 0 0;font-size:14px;line-height:1.95;max-width:760px}
@media(max-width:700px){
  .design-flow{margin-top:28px}
  .design-flow li{padding:2px 0 28px 26px}
  .design-flow li b{font-size:17px}
  .design-flow li p{font-size:13px}
}
@media(max-width:700px){.requirements-layout p{font-size:15px;line-height:2.05}}