#services .section-intro{margin-bottom:42px}
#services .services-doodle{display:none}
#services .section-intro::after{
  content:"";
  position:absolute;
  right:0;
  top:-78px;
  width:238px;
  height:132px;
  background:url('services-ink-c107.svg') center / contain no-repeat;
  pointer-events:none;
}
#services .service-grid{gap:14px 48px}
#services .service-card,
#services .service-card:nth-child(even){
  grid-template-columns:62% minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  column-gap:18px;
  min-height:0;
  padding:26px 0 28px;
  overflow:visible;
}
#services .service-top{grid-column:2;grid-row:1;margin:0 0 6px}
#services .service-top>span{font-size:43px;line-height:1;color:#b74632}
#services .service-card h3{
  grid-column:2;
  grid-row:2;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(28px,2.25vw,36px);
  font-weight:900;
  line-height:1.55;
  letter-spacing:0;
  margin:0 0 13px;
}
#services .service-card p{
  grid-column:2;
  grid-row:3;
  font-size:16px;
  line-height:1.95;
  color:#263127;
  max-width:none;
  min-height:0;
}
#services .card-note{
  grid-column:2;
  grid-row:4;
  font-size:15px;
  line-height:1.8;
  color:#344b38;
  margin-top:16px;
  padding-top:8px;
}

#services .service-art{
  grid-column:1;
  grid-row:1 / 5;
  width:122%;
  max-width:none;
  height:380px;
  margin-left:-22%;
  margin-right:0;
  margin-top:0;
  align-self:center;
  object-fit:contain;
  object-position:center;
  transform:translate3d(var(--service-art-x,0px),var(--service-art-y,0px),0) rotate(var(--service-art-turn,0deg));
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
  transform-origin:50% 60%;
}
#services .service-card:nth-child(even){grid-template-columns:minmax(0,1fr) 62%}
#services .service-card:nth-child(even) .service-top,
#services .service-card:nth-child(even) h3,
#services .service-card:nth-child(even) p,
#services .service-card:nth-child(even) .card-note{grid-column:1}
#services .service-card:nth-child(even) .service-art{
  grid-column:2;
  margin-left:0;
  margin-right:-22%;
  margin-top:0;
}
#services .service-card::after{width:62%;opacity:.46}
#services .service-card:nth-child(even)::after{width:62%;opacity:.46}
#services .service-card.is-service-touched .service-art{
  transform:translate3d(0,-5px,0) rotate(-.75deg);
}
@media(hover:hover) and (pointer:fine){
  #services .service-card:hover .service-art{
    transform:translate3d(var(--service-art-x,0px),calc(var(--service-art-y,0px) - 5px),0) rotate(var(--service-art-turn,-.65deg));
  }
}

@media(min-width:801px) and (max-width:1199px){
  #services .section-intro::after{width:145px;height:96px;top:-18px}
  #services .service-grid{column-gap:36px}
  #services .service-card,
  #services .service-card:nth-child(even){grid-template-columns:50% minmax(0,1fr);column-gap:16px;padding-top:22px}
  #services .service-card h3{font-size:28px}
  #services .service-art{width:118%;height:315px;margin-left:-18%}
  #services .service-card:nth-child(even){grid-template-columns:minmax(0,1fr) 50%}
  #services .service-card:nth-child(even) .service-art{margin-left:0;margin-right:-18%}
}

@media(max-width:800px){
  #services .section-intro{margin-bottom:14px}
  #services .section-intro::after{display:none}
  #services .service-grid{gap:0}
  #services .service-card,
  #services .service-card:nth-child(even){
    grid-template-columns:55% minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    gap:0 15px;
    padding:23px 0 28px;
    min-height:0;
  }
  #services .service-top,
  #services .service-card:nth-child(even) .service-top{grid-column:2;grid-row:1;align-self:end;margin:0 0 7px}
  #services .service-top>span{font-size:39px}
  #services .service-card h3,
  #services .service-card:nth-child(even) h3{grid-column:2;grid-row:2;align-self:start;font-size:26px;line-height:1.55;margin:0}
  #services .service-art,
  #services .service-card:nth-child(even) .service-art{
    grid-column:1;
    grid-row:1 / 3;
    width:113%;
    height:212px;
    margin-left:-7%;
    margin-right:0;
    margin-top:0;
    justify-self:start;
  }
  #services .service-card p,
  #services .service-card:nth-child(even) p{grid-column:1 / -1;grid-row:3;font-size:16px;line-height:1.95;margin-top:14px}
  #services .card-note,
  #services .service-card:nth-child(even) .card-note{grid-column:1 / -1;grid-row:4;font-size:15px;margin-top:9px;padding-top:0}
  #services .service-card::after,
  #services .service-card:nth-child(even)::after{left:0;right:auto;width:75%;opacity:.43}
}
@media(max-width:430px){
  #services .service-card,
  #services .service-card:nth-child(even){column-gap:13px;padding-top:20px}
  #services .service-card h3,
  #services .service-card:nth-child(even) h3{font-size:25px}

  #services .service-card:nth-child(5) h3 .phrase:last-child{white-space:nowrap;font-size:clamp(18px,5.8vw,25px)}
  #services .service-card:nth-child(6) h3 .phrase{white-space:nowrap}
  #services .service-art,
  #services .service-card:nth-child(even) .service-art{height:202px}
}
@media(max-width:350px){

  #services .service-card,
  #services .service-card:nth-child(even){grid-template-columns:52% minmax(0,1fr)}
  #services .service-card h3,
  #services .service-card:nth-child(even) h3{font-size:22px}
}

.reduce-motion #services .service-art,
.reduce-motion #services .service-card:hover .service-art,
.reduce-motion #services .service-card.is-service-touched .service-art{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  #services .service-art,
  #services .service-card:hover .service-art,
  #services .service-card.is-service-touched .service-art{transform:none!important;transition:none!important}
}