.vision{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;grid-template-rows:auto auto 160px;row-gap:22px!important;align-items:start}
.vision .everyday{grid-column:1;grid-row:1 / span 2;min-height:510px;background:none}
.vision .everyday:before,.vision .everyday:after{position:absolute;left:0;right:0;height:calc(50% - 10px);border-radius:4px;background-color:#fffdf7;background-repeat:no-repeat;background-position:center;background-size:cover;box-shadow:0 1px 0 #d8e1d7;display:flex;align-items:flex-end;padding:13px 16px;color:var(--navy);font-size:15px;font-weight:900;letter-spacing:.04em}
.vision .everyday:before{content:"小樽市の高齢化率 42％ ⤴";top:0;justify-content:flex-end;align-items:center;padding:20px 22px 20px 42%;color:var(--orange);font-size:clamp(22px,2vw,34px);line-height:1.25;text-align:right;text-shadow:0 1px 0 #fff;background-image:linear-gradient(90deg,rgba(255,253,247,0) 35%,rgba(255,253,247,.88) 68%,rgba(255,253,247,.96)),url("assets/vision-aging-challenge.png")}
.vision .everyday:after{content:"小樽市の町会加入率 70％ ⤵";bottom:0;transform:none;width:auto;max-width:none;justify-content:flex-end;align-items:center;padding:20px 22px 20px 42%;color:var(--orange);font-size:clamp(22px,2vw,34px);line-height:1.25;text-align:right;text-shadow:0 1px 0 #fff;background-image:linear-gradient(90deg,rgba(255,253,247,0) 35%,rgba(255,253,247,.88) 68%,rgba(255,253,247,.96)),url("assets/vision-membership-challenge.png")}
.vision .section-intro{grid-column:2;grid-row:1;margin-top:0}.vision .section-intro h2{font-size:clamp(43px,3.25vw,58px)!important;line-height:1.34}.vision .vision-content{grid-column:2;grid-row:2}.vision .vision-lead{font-size:clamp(18px,1.35vw,23px)!important}.vision .stats{display:none}.vision .vision-content>p:last-child{font-size:17px;line-height:2.1;margin-top:22px}.vision:after{display:none}.vision-roles{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(4,1fr);height:160px;background:#fffdf7;border-top:1px solid #cbdacb;border-bottom:1px solid #cbdacb}.vision-role{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;padding:14px 20px;border-left:1px solid #d8e1d7}.vision-role:first-child{border-left:0}.vision-role:before{content:"";display:block;aspect-ratio:1/1;background-image:url("assets/vision-community-roles.png");background-size:400% 100%;background-repeat:no-repeat}.vision-role.role-disaster:before{background-position:0 center}.vision-role.role-safety:before{background-position:33.333% center}.vision-role.role-community:before{background-position:66.666% center}.vision-role.role-environment:before{background-position:100% center}.vision-role h3{margin:0;color:var(--navy);font-size:clamp(19px,1.55vw,27px);line-height:1.1}.vision-role p{margin:6px 0 0;color:#233c4b;font-size:13px;line-height:1.45}
@media(max-width:900px){.vision{grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto;gap:26px!important}.vision .everyday{grid-column:1;grid-row:1;min-height:500px}.vision .section-intro{grid-column:1;grid-row:2}.vision .vision-content{grid-column:1;grid-row:3}.vision-roles{grid-column:1;grid-row:4;height:auto;grid-template-columns:1fr 1fr}.vision-role{min-height:126px;grid-template-columns:82px 1fr;padding:12px;border-left:1px solid #d8e1d7;border-top:1px solid #d8e1d7}.vision-role:nth-child(odd){border-left:0}.vision-role:nth-child(-n+2){border-top:0}.vision .everyday:before,.vision .everyday:after{font-size:13px}.vision .section-intro h2{font-size:clamp(36px,8vw,50px)!important}}

/* 元のイラストの縦横比（約5:8）を保って表示する */
.vision-role{grid-template-columns:90px 1fr}
.vision-role:before{width:100%;aspect-ratio:5/8;justify-self:center}
@media(max-width:900px){.vision-role{grid-template-columns:72px 1fr}}

/* PCでは説明を左、課題イラストを右に配置する */
@media(min-width:901px){.vision .section-intro{grid-column:1}.vision .vision-content{grid-column:1}.vision .everyday{grid-column:2}}