/* The town characters introduce a concern; the service stays easy to find. */
.service-track{gap:28px;padding-top:14px;padding-bottom:34px;scroll-padding-inline:max(var(--gutter),calc((100vw - 1240px)/2))}
.service-card.town-card{flex-basis:370px;max-width:none;padding:0;background:#fff;border-radius:28px;overflow:hidden;--town-accent:#ffe69a}
.town-card.town-calendar{--town-accent:#c3f2ff}
.town-card.town-sns{--town-accent:#ffdbeb}
.town-card.town-books{--town-accent:#d9edca}
.town-card.town-training{--town-accent:#dce6ff}
.town-heading{display:flex;align-items:center;gap:14px;min-height:92px;padding:24px 25px 15px}
.town-number{font-size:12px;font-weight:900;width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border:1px solid #132d9155;border-radius:50%}
.town-card .town-heading h3{font-size:25px;letter-spacing:-.045em;line-height:1.45;margin:0}
.town-scene{height:338px;position:relative;isolation:isolate;overflow:hidden}
.town-circle{position:absolute;z-index:0;width:290px;height:290px;right:-20px;bottom:-22px;border-radius:50%;background:var(--town-accent)}
.town-portrait{position:absolute;z-index:3;right:3px;bottom:0;width:245px;height:282px;object-fit:contain;object-position:center bottom;mix-blend-mode:normal;filter:none;transform-origin:50% 100%}
.town-worry{position:absolute;z-index:2;top:8px;left:24px;padding:13px 16px;background:#fff;border:1.5px solid var(--navy);border-radius:17px;rotate:-4deg;font-size:13px;font-weight:800;line-height:1.9;letter-spacing:-.02em}
.town-worry:after{content:'';position:absolute;width:13px;height:13px;right:27px;bottom:-8px;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);background:#fff;transform:skewY(24deg);clip-path:polygon(0 0,100% 0,100% 100%)}
.town-owner{position:absolute;z-index:1;left:26px;bottom:32px;writing-mode:vertical-rl;font-size:10px;letter-spacing:.1em;display:flex;gap:9px;align-items:center}
.town-owner b{font-size:14px;font-weight:900}
.town-body{padding:20px 26px 25px;border-top:1px solid #132d911c;display:flex;flex-direction:column;flex:1}
.town-body .service-catch{margin:0;font-size:13px;font-weight:800;line-height:1.8}
.town-body .service-description{font-size:13px;line-height:1.95;margin:9px 0 18px;min-height:77px;color:#344a79}
.town-body .service-link{margin:0;margin-top:auto;padding-top:16px;font-size:12px}
.town-card .service-link>span{flex-shrink:0}
.town-web .service-link>span{background:var(--yellow);color:var(--navy)}
[data-theme=B] .service-card.town-card{border-radius:28px;border-color:#00c8ff;box-shadow:6px 7px 0 #00c8ff}
[data-motion=paused] .town-portrait{transform:none!important}
@media(hover:hover){
  .town-portrait{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .town-card:hover .town-portrait{transform:translateY(-4px) rotate(2deg)}
}
@media(max-width:700px){
  .service-track{gap:20px}
  .service-card.town-card{flex-basis:calc(100vw - 66px);max-width:345px;border-radius:24px}
  .town-heading{min-height:85px;padding:21px 20px 13px;gap:12px}
  .town-card .town-heading h3{font-size:23px}
  .town-number{width:29px;height:29px;font-size:10px}
  .town-scene{height:308px}
  .town-circle{width:267px;height:267px;right:-35px;bottom:-24px}
  .town-portrait{height:252px;width:215px;right:0}
  .town-worry{font-size:12px;left:19px;top:8px;padding:12px 13px}
  .town-owner{left:20px;bottom:24px;font-size:9px}
  .town-owner b{font-size:12px}
  .town-body{padding:19px 22px 22px}
  .town-body .service-catch{font-size:12px}
  .town-body .service-description{font-size:12px;min-height:72px}
  .town-body .service-link{font-size:11px}
}
@media(max-width:360px){
  .service-card.town-card{flex-basis:calc(100vw - 52px)}
  .town-heading{padding-inline:17px;gap:8px}
  .town-card .town-heading h3{font-size:20px}
  .town-worry{font-size:11px;left:16px;padding:11px}
  .town-owner{left:17px}
  .town-portrait{width:195px}
  .town-body{padding-inline:18px}
}