.lead{color:var(--dim); font-size:15px; max-width:620px; margin-bottom:50px;}

.hero::after{content:""; position:absolute; top:-30%; right:-6%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(108,47,133,.15), transparent 65%);}
.hero-index{font-family:'Noto Sans JP', sans-serif; font-size:13px; color:var(--purple); letter-spacing:.15em; margin-bottom:20px;}
.hero h1{font-size:clamp(24px,3.4vw,40px); font-weight:700; line-height:1.4; margin-bottom:20px; white-space:nowrap; color:var(--purple-deep);}
.hero p{color:var(--dim); font-size:15.5px;}

/* overview */
.overview{padding:30px 0 50px; border-bottom:1px solid var(--line-soft);}
.overview-image{display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:16px; margin-bottom:28px;}
.overview p{color:var(--dim); font-size:14.5px; margin-bottom:14px;}

/* solutions detail (anchored sub-sections) */
.sol-detail{padding:30px 0 50px; border-bottom:1px solid var(--line-soft);}
.sol-detail-item{position:relative; display:block; background:#fff; padding:34px 36px; border:1.5px solid var(--purple); border-radius:14px; margin-bottom:20px; scroll-margin-top:110px; transition:transform .25s, box-shadow .25s;}
.sol-detail-item:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(108,47,133,.28);}
.sol-detail-item:last-child{margin-bottom:0;}
.sol-detail-logo{height:32px; display:flex; align-items:center; margin-bottom:18px;}
.sol-detail-logo img{height:100%; width:auto; max-width:220px; object-fit:contain; display:block;}
.sol-detail-item h3{font-size:19px; margin-bottom:12px; color:var(--text);}
.sol-detail-item p{font-size:14px; color:var(--dim); margin-bottom:10px;}
.sol-detail-item .case-link{font-family:'Noto Sans JP', sans-serif; font-size:12.5px; color:var(--purple); font-weight:600; display:inline-block; margin-top:6px;}
.case-link-row{display:flex; justify-content:space-between; align-items:center;}
.case-link-end{display:flex; justify-content:space-between; align-items:center;}
.sol-detail-stretched-link{position:absolute; inset:0; z-index:1;}
.sol-detail-item .case-link--btn{
  position:relative; z-index:2;
  display:inline-block; border:1.5px solid var(--purple); background:var(--purple); color:#fff;
  padding:8px 18px; font-size:12px; font-family:'Noto Sans JP', sans-serif; border-radius:999px;
  font-weight:400; margin-top:0; transition:.2s;
}
.sol-detail-item .case-link--btn:hover{background:transparent; color:var(--purple);}

/* features */
.features{padding:30px 0 50px; border-bottom:1px solid var(--line-soft);}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px;}
.feature-card{border:1.5px solid var(--purple); border-radius:16px; padding:36px; background:#fff;}
.feature-icon{font-size:30px; margin-bottom:20px;}
.feature-card h3{font-size:16.5px; margin-bottom:12px;}
.feature-card p{font-size:13.5px; color:var(--dim);}

/* flow */
.flow{padding:30px 0 50px; border-bottom:1px solid var(--line-soft);}
.flow-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px; position:relative;}
.flow-step{text-align:center; padding:0 16px; position:relative;}
.flow-step .num{width:44px; height:44px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Noto Sans JP', sans-serif; margin:0 auto 18px; font-size:14px; position:relative; z-index:1;}
.flow-step h4{font-size:14px; margin-bottom:8px;}
.flow-step p{font-size:12.5px; color:var(--dim);}
.flow-step:not(:last-child)::after{content:""; position:absolute; top:22px; left:50%; width:100%; height:1px; background:var(--line-soft); z-index:0;}

/* case */
.case{padding:30px 0 50px; border-bottom:1px solid var(--line-soft);}
.case-subtitle{
  display:block; width:100%; box-sizing:border-box; text-align:center;
  font-family:'Noto Sans JP', sans-serif; font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:12px 14px; border-radius:999px; margin-bottom:20px; scroll-margin-top:110px;
  background:#F0EAF3; color:var(--purple);
}
.case-grid{display:flex; flex-direction:column; gap:24px; margin-bottom:44px;}
.case-grid:last-of-type{margin-bottom:0;}
.case-card{position:relative; background:#fff; border:1.5px solid var(--purple); border-radius:16px; overflow:hidden; transition:transform .25s, box-shadow .25s; text-align:left;}
.case-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(108,47,133,.28);}
.case-media{width:25%; aspect-ratio:1200/630; background:linear-gradient(155deg,#F5F1FA,#fff); overflow:hidden;}
.case-media img{width:100%; height:100%; object-fit:contain; display:block;}
.case-body{position:absolute; top:0; right:0; bottom:0; left:25%; padding:20px 32px; overflow:hidden;}
.case-body .tagline{font-family:'Noto Sans JP', sans-serif; font-size:11px; color:var(--purple); margin-bottom:8px;}
.case-body h3{font-size:18px; margin-bottom:8px; line-height:1.4;}
.case-body p{font-size:13.5px; color:var(--dim); margin-bottom:8px; line-height:1.5;}
.case-link{display:none;}

/* CTA */
.cta{padding:28px 0 50px; text-align:center;}
.cta h2{font-size:clamp(26px,3.2vw,36px); margin-bottom:18px; color:var(--purple-deep);}
.cta p{color:var(--dim); margin-bottom:38px;}
.btn-primary{background:var(--purple); color:#fff; padding:17px 42px; border:1.5px solid var(--purple); border-radius:999px; font-size:13.5px; font-weight:600; font-family:'Noto Sans JP', sans-serif; transition:.2s;}
.btn-primary:hover{background:#fff; color:var(--purple);}

@media(max-width:900px){
  .case-media{width:100%;}
  .case-body{position:static; left:auto; right:auto; top:auto; bottom:auto; overflow:visible;}
  .feature-grid{grid-template-columns:1fr; gap:18px; margin-top:28px;}
  .flow-steps{display:flex; flex-direction:column; gap:0; margin-top:28px;}
  .flow-step{display:grid; grid-template-columns:44px 1fr; grid-template-areas:"num title" "num desc"; column-gap:16px; row-gap:6px; text-align:left; padding:0 0 28px;}
  .flow-step:last-child{padding-bottom:0;}
  .flow-step .num{grid-area:num; margin:0;}
  .flow-step h4{grid-area:title; margin-bottom:0;}
  .flow-step p{grid-area:desc;}
  .flow-step:not(:last-child)::after{content:""; position:absolute; top:44px; left:21px; width:2px; bottom:-28px; background:var(--line-soft);}
  .hero h1{white-space:normal;}
  .hero{padding:28px 0 22px;}
  .overview{padding:16px 0 45px;}
  .sol-detail{padding:16px 0 45px;}
  .sol-detail-item{padding:24px 22px;}
  .features{padding:16px 0 45px;}
  .feature-card{padding:26px;}
  .flow{padding:16px 0 45px;}
  .flow-steps{margin-top:28px;}
  .case{padding:16px 0 45px;}
  .case-grid{gap:16px;}
  .case-body{padding:28px 24px;}
  .cta{padding:20px 0 60px;}
  .cta p{margin-bottom:24px;}
}