/* Copy and compact native examples. The original films and their controls stay intact. */
.useful-home .hero-copy h1{font-size:clamp(44px,5.3vw,72px);line-height:1.25;max-width:900px;text-wrap:balance}
.useful-home .hero-copy .hero-detail{max-width:44rem}
.useful-home .hero-copy .hero-detail br{display:initial}
.useful-home .service-card{grid-template-rows:auto auto auto 1fr auto}
.useful-home .service-card .tool-example{grid-column:1/-1;align-self:start;margin:0 0 24px;padding:16px;background:#f4f8fc;border:1px solid #dce7f0;border-radius:12px;min-width:0;color:#3e5872}
.useful-home .service-directory .service-card>p{grid-column:1/-1;margin:18px 0 20px}
.tool-example figcaption{font-size:16px;font-weight:600;line-height:1.5;margin:0 0 12px;color:#4c647b}
.tool-image-pair,.tool-change-pair{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:8px;align-items:center}
.tool-image-pair>div,.tool-change-pair>div{min-width:0}
.tool-image-pair span,.tool-change-pair>div>span:first-child{display:block;font-size:16px;line-height:1.5;margin-bottom:8px;overflow-wrap:anywhere}
.tool-image-pair img{display:block;width:100%;height:64px;object-fit:cover;border:1px solid #d7e2ec;border-radius:6px}
.tool-example b{font-size:18px;font-weight:500;text-align:center;color:#5a7590}
.tool-file-bar{display:block;height:5px;width:100%;background:#9ab5ce;border-radius:5px;margin-top:9px}
.tool-file-bar-small{width:40%;background:#3a8a99}
.tool-example-note{display:block;font-size:16px;line-height:1.6;margin-top:12px;color:#4c647b}
.tool-change-pair code,.tool-subtitle-value{display:block;padding:10px 7px;font-size:16px;line-height:1.5;border-radius:6px;overflow-wrap:anywhere}
.tool-value-before{color:#74572c;background:#fff1d8;border:1px solid #ebd5b3}
.tool-value-after{color:#205e60;background:#e7f4f1;border:1px solid #c8e5de}
.tool-subtitle-value{background:#e7edf4;color:#344f68}
.tool-subtitle-value.tool-value-after{background:#e7f4f1;color:#205e60}
.tool-price-sum{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:8px;align-items:center}
.tool-price-sum>div{min-width:0}
.tool-price-sum span,.tool-price-total span{display:block;font-size:16px;line-height:1.5;margin-bottom:6px;overflow-wrap:anywhere}
.tool-price-sum strong,.tool-price-total strong{font-size:20px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums}
.tool-price-total{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;background:#e7f4f1;border:1px solid #c8e5de;padding:10px 12px;border-radius:7px;margin-top:12px;color:#205e60}
.tool-price-total span{margin:0}
@media(max-width:760px){
 .useful-home .hero-copy h1,html:lang(ja) .useful-home .hero-copy h1{font-size:clamp(34px,8.9vw,48px);line-height:1.3;letter-spacing:-.045em}
 .useful-home .hero-copy .hero-detail,html:lang(ja) .useful-home .hero-copy .hero-detail{font-size:16px;line-height:1.85}
 .useful-home .service-card .tool-example{padding:16px;margin-bottom:20px}
 .tool-image-pair img{height:68px}
}