/* 店へ向かう導線は、ポケットに入れる小さな折り地図。 */
.about-copy .access-map-link{
  position:relative;display:grid;grid-template-columns:45px 1fr 43px;gap:15px;align-items:center;
  width:min(100%,328px);min-width:0;min-height:82px;padding:10px 17px 10px 13px;
  border:1.5px solid #173f2c;border-radius:5px 17px 5px 5px;
  background:#fff8e9;color:#173f2c;box-shadow:5px 5px 0 #d6dfb0;
  transform:rotate(-1deg);transition:transform .24s,box-shadow .24s;isolation:isolate;
}
.access-map-link:after{content:'';position:absolute;right:8px;top:8px;width:4px;height:4px;border-radius:50%;background:#ec91a6}
.access-folded-map{width:45px;height:56px;transform:rotate(-7deg);transition:transform .28s cubic-bezier(.2,.8,.22,1.25)}
.access-map-label{display:block;white-space:nowrap;font-size:13px;font-weight:800;line-height:1.4;letter-spacing:.01em}
.access-map-label>small{display:block;font:700 8px/1.4 var(--english-font);letter-spacing:.15em;margin-bottom:6px}
.access-turn-arrow{width:43px;height:36px;overflow:visible}
.access-turn-tip{transition:transform .25s}.access-turn-dot{transition:transform .35s}
.access-map-pin{transform-origin:42px 27px;transition:transform .28s}
.about-copy .access-map-link:is(:hover,:focus-visible){background:#fff8e9;color:#173f2c;transform:translateY(-3px) rotate(0deg);box-shadow:6px 8px 0 #d6dfb0}
.access-map-link:is(:hover,:focus-visible) .access-folded-map{transform:rotate(2deg) scale(1.05)}
.access-map-link:is(:hover,:focus-visible) .access-map-pin{transform:translateY(-3px) rotate(8deg)}
.access-map-link:is(:hover,:focus-visible) .access-map-trail{animation:do-pocket-route .7s linear infinite}
.access-map-link:is(:hover,:focus-visible) .access-turn-tip{transform:translateX(3px)}
.access-map-link:is(:hover,:focus-visible) .access-turn-dot{transform:translateX(9px)}
.about-copy .access-map-link:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #d6dfb0}
.access-map-link:focus-visible{outline:3px solid #c55764;outline-offset:7px}

.do-map-route-toggle.route-play-toggle{
  min-height:60px;max-width:100%;gap:13px;padding:8px 10px 8px 15px;
  border:1.5px solid #173f2c;border-radius:6px 32px 32px 6px;
  background:#fff8e9;color:#173f2c;box-shadow:3px 4px 0 #d6dfb0;
  font:800 12px/1.4 var(--body-font);letter-spacing:.02em;transition:transform .2s,box-shadow .2s;
}
.route-play-toggle::after{content:none}
.route-play-toggle [data-route-label]{white-space:nowrap;min-width:7em;text-align:left}
.route-pocket-map{width:30px;height:36px;flex:0 0 30px;transform:rotate(-5deg);transition:transform .25s}
.route-walk-switch{width:76px;height:40px;flex:0 0 76px;overflow:visible}
.route-walk-marker{transition:transform .32s cubic-bezier(.25,.8,.25,1)}
.route-play-toggle[aria-pressed="true"] .route-walk-marker{transform:translateX(46px)}
.route-print{opacity:.6}
.route-play-toggle[aria-pressed="false"] .route-footprints,.route-play-toggle[aria-pressed="false"] .route-walk-line{opacity:.2}
.route-play-toggle[aria-pressed="false"] .route-pocket-trail{opacity:.2}
.do-map-route-toggle.route-play-toggle:is(:hover,:focus-visible){background:#fff8e9;color:#173f2c;transform:translateY(-2px);box-shadow:4px 6px 0 #d6dfb0}
.route-play-toggle:is(:hover,:focus-visible) .route-pocket-map{transform:rotate(3deg)}
.route-play-toggle:is(:hover,:focus-visible) .route-pocket-trail{animation:do-pocket-route .7s linear infinite;opacity:1}
.route-play-toggle:is(:hover,:focus-visible) .route-print{animation:do-pocket-step 1.2s ease-in-out infinite}
.route-play-toggle:is(:hover,:focus-visible) .route-print-two{animation-delay:.16s}
.route-play-toggle:is(:hover,:focus-visible) .route-print-three{animation-delay:.32s}
.do-map-route-toggle.route-play-toggle:active{transform:translate(2px,2px);box-shadow:1px 2px 0 #d6dfb0}
.route-play-toggle:focus-visible{outline:3px solid #c55764;outline-offset:7px}
@keyframes do-pocket-route{to{stroke-dashoffset:-6}}
@keyframes do-pocket-step{0%,70%,100%{opacity:.3}35%{opacity:1}}
@media(max-width:760px){
  .about-copy .access-map-link{min-width:0;width:min(100%,305px);grid-template-columns:41px 1fr 39px;gap:11px;min-height:77px;margin-top:29px;padding-right:15px}
  .access-map-label{font-size:12px}.access-map-label>small{font-size:7px}.access-folded-map{width:41px;height:52px}.access-turn-arrow{width:39px}
  .do-map-route-toggle.route-play-toggle{gap:11px;min-height:58px;font-size:11px;padding-left:12px}
  .route-walk-switch{width:70px;flex-basis:70px}.route-pocket-map{width:27px;flex-basis:27px}
}
@media(prefers-reduced-motion:reduce){
  .about-copy .access-map-link,.access-folded-map,.access-map-pin,.access-turn-tip,.access-turn-dot,.do-map-route-toggle.route-play-toggle,.route-pocket-map,.route-walk-marker{transition:none}
  .access-map-link:is(:hover,:focus-visible) .access-map-trail,.route-play-toggle:is(:hover,:focus-visible) .route-pocket-trail,.route-play-toggle:is(:hover,:focus-visible) .route-print{animation:none}
  .about-copy .access-map-link:is(:hover,:focus-visible),.do-map-route-toggle.route-play-toggle:is(:hover,:focus-visible){transform:none}
  .access-map-link:is(:hover,:focus-visible) .access-folded-map,.access-map-link:is(:hover,:focus-visible) .access-map-pin,.access-map-link:is(:hover,:focus-visible) .access-turn-tip,.access-map-link:is(:hover,:focus-visible) .access-turn-dot,.route-play-toggle:is(:hover,:focus-visible) .route-pocket-map{transform:none}
}
/* スマホでは手書きの飾りを地図ボタンの下へ分ける。 */
@media(max-width:760px){
  .about-copy{padding-bottom:65px}
  .about-sign{bottom:0;right:4%;font-size:38px;line-height:.8;pointer-events:none}
}