/* 章の罫線は読み進めて到達した時に左から引かれる。本文の文字は薄くしない。 */
html.has-motion .sec-head .line {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.15s cubic-bezier(.22, .61, .36, 1) .08s;
}
html.has-motion .sec-head.is-seen .line { transform: none; }

/* 表紙は読み込み後に一度だけ、名前・コピー・金線・署名・品書き・縦書きの順に静かに現れる。 */
html.has-cover .cover .kicker,
html.has-cover .cover h1,
html.has-cover .cover .sub,
html.has-cover .cover .cover-nav,
html.has-cover .vertical-lettering {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s cubic-bezier(.22, .61, .36, 1), transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
html.has-cover .cover h1 { transition-delay: .15s; }
html.has-cover .vertical-lettering { transition-delay: .3s; }
html.has-cover .cover .sub { transition-delay: .75s; }
html.has-cover .cover .cover-nav { transition-delay: .95s; }
html.has-cover .cover .hairline {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .9s cubic-bezier(.22, .61, .36, 1) .55s;
}
html.has-cover.is-loaded .cover .kicker,
html.has-cover.is-loaded .cover h1,
html.has-cover.is-loaded .cover .sub,
html.has-cover.is-loaded .cover .cover-nav,
html.has-cover.is-loaded .vertical-lettering { opacity: 1; transform: none; }
html.has-cover.is-loaded .cover .hairline { transform: none; }
/* スマホの表紙コピーは輪の手前に置く指定があるため、現れ方の後も重なり順を保つ。 */
@media (max-width: 820px) { html.has-cover .cover h1 { z-index: 2; } }

/* 最下段の桜は、電話案内へ到達した時に一筆ずつ引かれる。輪→花びら→花脈→蕾→中心の順。 */
html.has-motion .sakura-draw .s-ring, html.has-motion .sakura-draw .s-p, html.has-motion .sakura-draw .s-v, html.has-motion .sakura-draw .s-st, html.has-motion .sakura-draw .s-c { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.has-motion .sakura-watermark.is-drawn .sakura-draw .s-ring, html.has-motion .sakura-watermark.is-drawn .sakura-draw .s-p, html.has-motion .sakura-watermark.is-drawn .sakura-draw .s-v, html.has-motion .sakura-watermark.is-drawn .sakura-draw .s-st, html.has-motion .sakura-watermark.is-drawn .sakura-draw .s-c {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4, .1, .3, 1);
}
html.has-motion .sakura-watermark.is-drawn .s-ring2 { transition-delay: .25s; }
html.has-motion .sakura-watermark.is-drawn .s-p:nth-of-type(1) { transition-delay: .5s; }
html.has-motion .sakura-watermark.is-drawn .s-p:nth-of-type(2) { transition-delay: .68s; }
html.has-motion .sakura-watermark.is-drawn .s-p:nth-of-type(3) { transition-delay: .86s; }
html.has-motion .sakura-watermark.is-drawn .s-p:nth-of-type(4) { transition-delay: 1.04s; }
html.has-motion .sakura-watermark.is-drawn .s-p:nth-of-type(5) { transition-delay: 1.22s; }
html.has-motion .sakura-watermark.is-drawn .s-v { transition-delay: 1.7s; transition-duration: 1s; }
html.has-motion .sakura-watermark.is-drawn .s-st { transition-delay: 2s; transition-duration: .9s; }
html.has-motion .sakura-watermark.is-drawn .s-c { transition-delay: 2.5s; transition-duration: .8s; }
html.has-motion.off-draw .sakura-draw * { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }

/* 章が到着すると、見出し→本文の順に14pxだけ静かに沈み込んで収まる。文字は薄くしない。 */
@media (min-width: 821px) {
  html.has-motion:not(.off-settle) main > section.wrap > * { transform: translateY(14px); transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
  html.has-motion:not(.off-settle) main > section.wrap > * + * { transition-delay: .12s; }
  html.has-motion:not(.off-settle) main > section.wrap.is-seen > * { transform: none; }
  html.has-motion:not(.off-settle) .call > .kicker,
  html.has-motion:not(.off-settle) .call > .tel,
  html.has-motion:not(.off-settle) .call > .hours,
  html.has-motion:not(.off-settle) .call > p { transform: translateY(14px); transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
  html.has-motion:not(.off-settle) .call > .tel { transition-delay: .1s; }
  html.has-motion:not(.off-settle) .call > .hours { transition-delay: .18s; }
  html.has-motion:not(.off-settle) .call > p { transition-delay: .26s; }
  html.has-motion:not(.off-settle) .call.is-reached > * { transform: none; }
}
/* 電話案内へ到達すると、番号の下に金線が中央から引かれ、番号の奥から光の輪が一度だけ広がる。 */
html.has-motion .call .tel { position: relative; isolation: isolate; }
html.has-motion .call .tel::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5.2em; height: 2.2em; margin: -1.1em 0 0 -2.6em;
  border-radius: 50%; opacity: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(156,127,67,.20), rgba(156,127,67,.06) 60%, transparent);
}
html.has-motion .call.is-reached .tel::after { left: 0; right: 0; transition-duration: 1.2s; }
html.has-motion .call.is-reached .tel::before { animation: call-ripple 3.2s cubic-bezier(.22, .61, .36, 1) .6s 1 both; }
/* 線のない光。数字を横切らず、奥からにじんで引く。 */
@keyframes call-ripple {
  0% { transform: scale(.7); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* 電話番号に触れると、中央から金の細線が伸びる。 */
html.has-motion .call .tel::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 1px; background: var(--gold);
  transition: left .6s cubic-bezier(.22, .61, .36, 1), right .6s cubic-bezier(.22, .61, .36, 1);
}
html.has-motion .call .tel:hover::after,
html.has-motion .call .tel:focus-visible::after { left: 0; right: 0; }

@media (prefers-reduced-motion: reduce) {
  /* ?motion=preview（html.motion-preview）の時だけ、確認のためこの静止指定を外す。 */
  html.has-motion:not(.motion-preview) .sec-head .line,
  html.has-cover:not(.motion-preview) .cover .hairline,
  html.has-cover:not(.motion-preview) .cover .kicker,
  html.has-cover:not(.motion-preview) .cover h1,
  html.has-cover:not(.motion-preview) .cover .sub,
  html.has-cover:not(.motion-preview) .cover .cover-nav,
  html.has-cover:not(.motion-preview) .vertical-lettering { opacity: 1; transform: none; transition: none; }
  html.has-motion:not(.motion-preview) .call .tel::after { transition: none; }
  html.has-motion:not(.motion-preview) .call .tel::before { animation: none; }
  html.has-motion:not(.motion-preview) main > section.wrap > *, html.has-motion:not(.motion-preview) .call > * { transform: none; transition: none; }
  html.has-motion:not(.motion-preview) .sakura-draw * { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}
@media print {
  html.has-motion .sec-head .line,
  html.has-cover .cover .hairline,
  html.has-cover .cover .kicker,
  html.has-cover .cover h1,
  html.has-cover .cover .sub,
  html.has-cover .cover .cover-nav,
  html.has-cover .vertical-lettering { opacity: 1; transform: none; transition: none; }
  html.has-motion .call .tel::after, html.has-motion .call .tel::before { display: none; }
  html.has-motion main > section.wrap > *, html.has-motion .call > * { transform: none; transition: none; }
  html.has-motion .sakura-draw * { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}