.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}.scene-card{background:#fff;border:1px solid #dce5e8;border-top:3px solid #0b9798;display:block}.scene-card img{display:block;width:100%;height:170px;object-fit:cover;filter:saturate(.65)}.scene-card>div{padding:23px}.scene-card small{color:#ad873e;font-family:Georgia,serif}.scene-card h3{font-size:19px;margin:8px 0}.scene-card p{font-size:13px}.scene-card span{font-size:12px;font-weight:700;color:#07878b}.scene-card:hover{border-color:#07878b}.scene-card:nth-child(4),.scene-card:nth-child(5){grid-column:auto}.scene-detail{border-bottom:1px solid #dce5e8}.scene-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.scene-heading h2{font-size:33px}.scene-heading p:last-child{font-size:14px;margin:0}.scene-heading>img{width:100%;height:300px;object-fit:cover;filter:saturate(.7)}.examples{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:25px 0;margin:20px 0;border-bottom:1px solid #dce5e8;font-size:11px}.examples b{margin-right:12px}.examples span{padding:5px 12px;background:#f1f5f6;color:#647085}.point-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:30px}.point-grid article{padding:25px 28px;background:#f6f7f9}.point-grid article:last-child{background:#edf5f4}.point-grid h3{font-size:18px}.point-grid ul{padding-left:20px;font-size:13px;color:#637087}.point-grid li{padding:5px 0}.connection{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:35px;padding:25px;background:#fafbfc;border:1px solid #dce5e8}.connection>span{flex:1;text-align:center;font-size:13px}.connection>strong{background:#252e54;color:white;padding:16px 35px;text-align:center;font-size:19px}.connection small{display:block;font-size:10px;font-weight:400}.connection i{font-style:normal;color:#07878b;font-size:24px}.scene-actions{display:flex;align-items:center;flex-wrap:wrap;gap:25px;margin-top:27px}.scene-note{font-size:11px;color:#738096;margin-top:23px;margin-bottom:0}.back{display:block;text-align:right;color:#07878b;font-size:11px;margin-top:20px}.white-link{color:white;font-size:13px;font-weight:700}@media(max-width:900px){.scene-grid{grid-template-columns:1fr 1fr}.scene-heading{gap:25px}.scene-heading h2{font-size:28px}.connection{gap:12px}.connection>strong{padding:14px 25px}}@media(max-width:640px){.scene-grid{grid-template-columns:1fr}.scene-card img{height:190px}.scene-heading{grid-template-columns:1fr}.scene-heading>img{height:220px}.scene-heading h2{font-size:26px}.point-grid{grid-template-columns:1fr;gap:15px}.examples{align-items:flex-start}.examples b{width:100%}.connection{gap:8px;padding:18px 8px}.connection>span{font-size:10px;overflow-wrap:anywhere}.connection>strong{padding:12px;font-size:15px}.connection small{font-size:8px}.connection i{font-size:18px}.scene-actions{align-items:flex-start;flex-direction:column}.scene-actions .button{width:100%}.scene-note{font-size:11px}}
/* ── FVに画像を敷く（2026-10-24）──
   usecases.css は support.css の後ろで読まれるので、
   ここに書いた .hero の指定はこのページだけに効く。 */
.hero{position:relative;isolation:isolate;overflow:hidden;
      min-height:600px;display:flex;align-items:center;padding:0}
.hero>.wrap{position:relative;z-index:1;width:100%}
.hero img.hero-photo{position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:center center;z-index:-2}
/* 暗くする処理は画像側に焼き込み済み。ここは文字を読みやすくする分だけ */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(0deg,rgba(18,26,48,.58) 0%,rgba(18,26,48,.28) 14%,rgba(18,26,48,0) 32%),
  linear-gradient(90deg,rgba(18,26,48,.7) 0%,rgba(18,26,48,.64) 28%,rgba(18,26,48,.4) 46%,
  rgba(18,26,48,.12) 60%,rgba(18,26,48,0) 74%)}
.hero>.wrap>div{max-width:720px}
@media(max-width:860px){
  .hero{min-height:500px}
  .hero img.hero-photo{object-position:64% center}
  .hero::after{background:
    linear-gradient(180deg,rgba(18,26,48,.76) 0%,rgba(18,26,48,.68) 45%,rgba(18,26,48,.62) 100%)}
  .hero>.wrap>div{max-width:none}
}