/* 2026-09-27: 静かな手描き線の演出。JSが動かない時も線画は見える。 */
.hero-photo{position:relative;display:flex;flex-direction:column;align-items:center;width:min(100%,420px);justify-self:center;}
.hero-photo img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;}
.hero-text{align-self:center;}
.hero-accent{
  position:absolute;
  z-index:1;
  top:-12px;
  right:-12px;
  width:72px;
  height:72px;
  pointer-events:none;
  overflow:visible;
}
.hero-accent path,
.service-icon path{
  fill:none;
  stroke:var(--ink,#2B2622);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.service-icon{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  margin-bottom:0;
  background:var(--accent,#F2C94C);
  border-radius:50%;
  flex-shrink:0;
}
.hero-accent path{stroke:var(--accent,#F2C94C);}
.service-icon svg{display:block;width:28px;height:28px;overflow:visible;}
#services-index .index-list > li{grid-template-columns:minmax(0,1fr);}
#services-index .index-list.numbered > li::before{display:none;}
#services-index .index-body{display:flex;align-items:center;gap:16px;}
#services-index .index-body a{display:block;flex:1;}
.btn::after{content:"→";display:inline-block;margin-left:.5em;transition:transform 180ms ease-out;}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(4px);}
.more::after{display:inline-block;transition:transform 180ms ease-out;}
.more:hover::after,.more:focus-visible::after{transform:translateX(4px);}

@media (prefers-reduced-motion:reduce){
  .more::after,.btn::after{transition:none;}
  .more:hover::after,.more:focus-visible::after,
  .btn:hover::after,.btn:focus-visible::after{transform:none;}
}
@media (max-width:767px){
  .hero{padding-top:24px;}
  .hero-grid{grid-template-areas:"photo" "text";gap:24px;}
  .hero-accent{width:58px;height:58px;top:-10px;right:-10px;}
  .hero-photo{width:180px;}
  .hero-photo img{width:180px;height:210px;object-fit:cover;object-position:top;}
}
@media (min-width:768px) and (max-width:1023px){
  .hero-grid{grid-template-areas:"photo" "text";gap:32px;}
  .hero-photo{width:240px;}
  .hero-photo img{width:240px;height:280px;object-fit:cover;object-position:top;}
}