/* 切貼舎 採用サイト。版下の台紙に、写真と、写真から切り抜いた文字を貼り込む */
:root {
  --ink: #1F1D1B;
  --ink-soft: #46433F;
  --scrap: #FBFAF6;
  --board: #F3F1EB;
  --tone-light: #ECE9E1;
  --tone-kraft: #CDB994;
  --label: #D9C8A4;
  --pencil: #B9301B;
  --grid: rgb(70 140 190 / .16);
  --mincho: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --slab: "Superclarendon", "Rockwell", "Clarendon", Georgia, serif;
  --latin: "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --gutter: clamp(1.25rem, .6rem + 3vw, 4rem);
  --paper: url("img/paper.webp") 0 0 / 400px;
}

body {
  color: var(--ink);
  background: var(--paper), var(--tone-light);
  background-blend-mode: multiply;
  font: 400 1rem/2 var(--mincho);
  font-feature-settings: "palt";
  letter-spacing: .06em;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--pencil); outline-offset: 3px; }

/* ===== 上に付いてくる角印と案内 ===== */
.site-head {
  position: fixed;
  top: calc(3rem + .75rem);
  right: var(--gutter);
  left: var(--gutter);
  z-index: 900;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  pointer-events: none;
  transition: translate .45s cubic-bezier(.6, 0, .2, 1), opacity .3s;
}
.site-head > * { pointer-events: auto; }
.site-head.is-away { translate: 0 -9rem; opacity: 0; }
.stamp {
  display: grid;
  justify-items: center;
  margin-right: auto;
  padding: .3rem .6rem .35rem;
  color: var(--pencil);
  background: var(--board);
  border: 2px solid currentColor;
  border-radius: 3px;
  text-decoration: none;
  rotate: -3deg;
}
.stamp__name { font: 700 1.125rem/1.3 var(--mincho); letter-spacing: .24em; margin-right: -.24em; }
.stamp__sub { font: 700 .6875rem/1.3 var(--gothic); letter-spacing: .2em; }
.gnav { display: none; }
.gnav ul {
  display: flex;
  margin: 0;
  padding: .2rem .6rem;
  background: var(--paper), var(--label);
  background-blend-mode: multiply;
  clip-path: polygon(0 4%, 1% 30%, 0 60%, 1% 100%, 99% 96%, 100% 70%, 99% 40%, 100% 0);
  rotate: .8deg;
}
.gnav a, .head-entry {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .25rem 1rem;
  font: 700 .875rem/1.3 var(--gothic);
  letter-spacing: .12em;
  text-decoration: none;
}
.gnav a:hover { text-decoration: underline; text-decoration-color: var(--pencil); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.head-entry { color: var(--scrap); background: var(--ink); clip-path: polygon(0 4%, 100% 0, 97% 100%, 3% 95%); transition: background-color .2s; }
.head-entry:hover { background: #3A3633; }

/* ===== 最初の画面: 版下の台紙 ===== */
.cover { position: relative; }
.kv {
  position: sticky;
  top: 3rem;
  z-index: 0;
  height: calc(100svh - 3rem);
  min-height: 36rem;
  overflow: hidden;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 2rem,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 2rem 100%,
    var(--paper), var(--board);
  background-blend-mode: normal, normal, multiply;
}
.kv__board { position: absolute; inset: 0; pointer-events: none; }
.crop { position: absolute; width: 2rem; height: 2rem; border: 0 solid var(--ink); }
.crop--tl { top: 5.5rem; left: 1rem; border-width: 0 1px 1px 0; }
.crop--tr { top: 5.5rem; right: 1rem; border-width: 0 0 1px 1px; }
.crop--bl { bottom: 1rem; left: 1rem; border-width: 1px 1px 0 0; }
.crop--br { right: 1rem; bottom: 1rem; border-width: 1px 0 0 1px; }
.reg { position: absolute; bottom: .9rem; left: 50%; width: 1.75rem; translate: -50% 0; fill: none; stroke: var(--ink); stroke-width: 1; }
.slug { position: absolute; bottom: 1.15rem; left: 3.75rem; color: #3F6E92; font: 600 .6875rem/1.4 var(--latin); letter-spacing: .14em; }

.kv__photos { position: absolute; inset: 0; container-type: size; }
.kv__ph {
  position: absolute;
  top: calc(var(--y) * 1cqh);
  left: calc(var(--x) * 1cqw);
  width: calc(var(--w) * 1cqw);
  max-width: none;
  transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg));
  translate: calc(var(--kp, 0) * var(--vx) * 1px + var(--mx-p, 0) * var(--d) * 2px) calc(var(--kp, 0) * var(--vy) * -1px + var(--my-p, 0) * var(--d) * 2px);
  rotate: calc(var(--kp, 0) * var(--vr) * 1deg);
  user-select: none;
}

/* 写真から切り抜いた文字。白い縁は同じ文字を太い線で下に敷く */
.kv__copy { position: absolute; top: 47%; left: 5%; right: 5%; z-index: 2; }
.kv__title { font: 900 clamp(1.75rem, .4rem + 7.4vw, 3.6rem)/1.08 var(--gothic); letter-spacing: -.01em; font-feature-settings: "palt"; }
.cutout { position: relative; display: block; width: fit-content; }
.cutout + .cutout { margin-top: .12em; }
.cutout__edge {
  position: absolute;
  inset: 0;
  color: var(--scrap);
  -webkit-text-stroke: .16em var(--scrap);
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .3));
  white-space: nowrap;
}
.cutout__fill {
  position: relative;
  display: block;
  color: var(--ink);
  white-space: nowrap;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .cutout__fill {
    color: transparent;
    background: url("img/fill.webp") 0 0 / 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .cutout--2 .cutout__fill, .cutout--3 .cutout__fill { background-position: 0 100%; }
}
.cutout--1 { translate: calc(var(--kp, 0) * -140px) 0; }
.cutout--2 { translate: calc(var(--kp, 0) * 180px) 0; }
.kv__sub { display: grid; justify-items: start; gap: .9rem; margin-top: 1.25rem; font: 600 .9375rem/1.8 var(--mincho); }
.kv__sub p { padding: .2em .5em; background: rgb(243 241 235 / .9); }

/* 赤鉛筆の書き込み */
.pencil { position: absolute; overflow: visible; pointer-events: none; }
.pencil path { fill: none; stroke: var(--pencil); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pencil--ring { top: -14%; left: 16%; width: 40%; height: 128%; }
.pencil--under { bottom: -.42em; left: -.2em; width: calc(100% + .4em); height: .5em; }

/* ===== 紙の章。上の辺を破って、前の章に重ねる ===== */
.sheet {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow-x: clip;
  margin-top: -30px;
  padding: calc(clamp(5rem, 3rem + 7vw, 10rem) + 30px) var(--gutter) clamp(5rem, 3rem + 7vw, 10rem);
  --tone: var(--tone-light);
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--paper), var(--tone);
  background-blend-mode: multiply;
  clip-path: var(--tear);
}
.sheet::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 48px;
  background: url("img/rim-a.webp") 0 0 / 100% 48px no-repeat;
  pointer-events: none;
}
.tear-b::after { background-image: url("img/rim-b.webp"); }
.sheet--kraft { --tone: var(--tone-kraft); }
.sheet--ink { --tone: #2B2926; color: var(--scrap); }

/* 章の見出し。マスキングテープの上に、赤鉛筆で丸をつけた番号 */
.hd {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: .1em .45em;
  padding: .16em .6em .2em .45em;
  background: rgb(242 232 200 / .82);
  font: 600 clamp(1.75rem, 1.2rem + 1.8vw, 3rem)/1.3 var(--mincho);
  letter-spacing: .06em;
  clip-path: polygon(0 0, 1.2% 12%, 0 24%, 1.4% 38%, 0 52%, 1.2% 66%, 0 80%, 1.4% 92%, 0 100%, 100% 100%, 98.8% 88%, 100% 76%, 98.6% 62%, 100% 48%, 98.8% 34%, 100% 20%, 98.6% 8%, 100% 0);
  rotate: -1deg;
}
.hd__no {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  color: var(--pencil);
  border: 2px solid currentColor;
  border-radius: 52% 46% 50% 48%;
  font: 700 .42em/1 var(--slab);
  letter-spacing: 0;
  rotate: -8deg;
}
.ch { display: inline-block; transform: translateY(var(--fy, 0)) rotate(var(--fr, 0deg)); }

/* ===== ばらばらの写真が、一枚の壁に揃う ===== */
.wall { overflow: clip; }
.wall__stage { display: grid; gap: 2.5rem; }
.wall .hd { font-size: clamp(1.375rem, 1rem + 1.5vw, 2.5rem); }
.wall__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: center; justify-items: center; }
.wall__grid img {
  --q: clamp(0, calc(var(--p, 1) * 1.7 - var(--d)), 1);
  --e: calc(var(--q) * var(--q) * (3 - 2 * var(--q)));
  --u: calc(1 - var(--e));
  max-height: 26svh;
  width: auto;
  transform: translate(calc(var(--u) * var(--dx) * 1vw), calc(var(--u) * var(--dy) * 1vh)) rotate(calc(var(--rr) * 1deg + var(--u) * var(--dr) * 1deg)) scale(calc(1 + var(--u) * .3));
}
.wall__note { justify-self: end; padding: .4em .8em; background: var(--scrap); font: 600 .9375rem/1.8 var(--mincho); clip-path: polygon(0 3%, 100% 0, 99% 100%, 1% 96%); }

/* ===== 左に見出しを止め、右に中身を流す ===== */
.split { display: grid; gap: 3rem; max-width: 84rem; margin-inline: auto; }
.split__head { display: grid; gap: 1.75rem; align-content: start; }
.split__lead { max-width: 30rem; font-weight: 600; line-height: 2.1; }

/* 仕事を知る */
.roles { display: grid; gap: clamp(5rem, 3rem + 6vw, 9rem); }
.role { display: grid; gap: 2rem; }
.role__pics { position: relative; padding: 0 12% 18% 0; }
.role__main { width: 100%; rotate: calc(var(--r) * 1deg); }
.role__sub { position: absolute; right: 0; bottom: 0; width: 38%; rotate: calc(var(--r) * 1deg); }
.role__no { font: 700 1rem/1 var(--slab); letter-spacing: .1em; }
.role__no::before { content: "No."; margin-right: .3em; font-size: .75em; }
.role__title { position: relative; display: inline-block; margin: .8rem 0 1rem; font: 600 clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem)/1.35 var(--mincho); letter-spacing: .08em; }
.role__name { margin-bottom: .75rem; font: 700 .9375rem/1.6 var(--gothic); letter-spacing: .12em; }
.role__text > p:last-child { max-width: 30rem; font-weight: 600; }

/* ある一日 */
.day__track { display: grid; gap: 3rem 2rem; margin: 0; padding: 0; list-style: none; }
.day__intro { display: grid; gap: 1.5rem; align-content: start; font-weight: 600; }
.note {
  position: relative;
  display: grid;
  gap: .75rem;
  align-content: start;
  max-width: 24rem;
  padding: 1rem 1rem 1.25rem;
  background: var(--scrap);
  rotate: calc(var(--r) * 1deg);
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .18));
  clip-path: polygon(0 1%, 100% 0, 99.5% 98%, 60% 100%, .5% 99%);
}
.note:nth-child(2n) { justify-self: end; }
.note img { width: 100%; height: 13rem; object-fit: cover; object-position: center; }
.note__time { font: 700 1.75rem/1 var(--slab); letter-spacing: .04em; }
.note__text { font-weight: 600; line-height: 1.9; }

/* 私たちのこと。広い画面では縦に組む */
.letter { display: grid; gap: 3rem; }
.letter__body { display: grid; gap: 2.5rem; align-content: start; }
.letter__text { font: 600 clamp(1.0625rem, .9rem + .5vw, 1.375rem)/2.2 var(--mincho); letter-spacing: .12em; }
.letter__text p + p { margin-block-start: 1.6em; }
.letter__sign { font-size: .8125em; text-align: end; }
.dots { font-style: normal; -webkit-text-emphasis: filled sesame var(--pencil); text-emphasis: filled sesame var(--pencil); }
.ring { position: relative; font-style: normal; white-space: nowrap; }
.ring::after {
  content: "";
  position: absolute;
  inset: -.3em -.35em;
  border: 2px solid var(--pencil);
  border-radius: 52% 46% 50% 48%;
  opacity: .85;
  rotate: -6deg;
}
.letter__photos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; order: 2; }
.letter__photos img { width: 100%; rotate: calc(var(--r) * 1deg); }
.letter__photos img:nth-child(2) { margin-top: 2rem; }

/* 募集中の職種 */
.cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card { position: relative; display: grid; gap: .6rem; align-content: start; padding: 0 1.25rem 1.5rem; background: var(--scrap); clip-path: polygon(0 0, 100% .6%, 99.6% 100%, .4% 99.2%); }
.card__pics { position: relative; height: 10rem; margin: 0 -1.25rem .75rem; overflow: hidden; background: var(--paper), var(--tone-light); background-blend-mode: multiply; }
.card__pics img { position: absolute; width: 44%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.card__pics img:nth-child(1) { top: 10%; left: 4%; transform: rotate(-5deg); }
.card__pics img:nth-child(2) { top: 26%; left: 34%; transform: rotate(4deg); }
.card__pics img:nth-child(3) { top: 4%; left: 64%; width: 30%; transform: rotate(-2deg); }
.card__tag { justify-self: start; padding: .1em .6em; color: var(--scrap); background: var(--ink); font: 700 .8125rem/1.6 var(--gothic); letter-spacing: .12em; }
.card__tag--mid { color: var(--ink); background: var(--label); }
.card__title { font: 600 1.5rem/1.4 var(--mincho); letter-spacing: .06em; }
.card__title span { display: block; margin-top: .25rem; color: var(--ink-soft); font: 700 .875rem/1.6 var(--gothic); letter-spacing: .06em; }
.card__meta { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid #D5D3CE; font: 500 .875rem/1.7 var(--gothic); letter-spacing: .04em; }
.card__meta dt { color: var(--ink-soft); font-size: .8125rem; }
.card__meta dd { margin: 0; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__pics img:nth-child(1) { transform: translate(-10%, 8%) rotate(-12deg); }
  .card:hover .card__pics img:nth-child(2) { transform: translate(4%, -14%) rotate(9deg) scale(1.05); }
  .card:hover .card__pics img:nth-child(3) { transform: translate(12%, 10%) rotate(7deg); }
}

/* ボタン */
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.actions--center { justify-content: center; }
.btn {
  display: inline-flex;
  flex: 1 1 16rem;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: .5rem 2rem;
  color: var(--scrap);
  background: var(--ink);
  font: 700 1rem/1.4 var(--gothic);
  letter-spacing: .14em;
  text-decoration: none;
  clip-path: polygon(0 3%, 100% 0, 99.6% 100%, .3% 96%);
  transition: background-color .2s;
}
.btn:hover { background: #3A3633; }
.btn--small { flex: none; min-height: 2.75rem; padding: .4rem 1.4rem; font-size: .875rem; }
.btn--ghost { color: var(--ink); background: var(--scrap); }
.btn--ghost:hover { background: #FFFFFF; }
.btn--light { flex: 0 1 22rem; color: var(--ink); background: var(--scrap); }
.btn--light:hover { background: #FFFFFF; }

/* 募集要項 */
.req__body { display: grid; gap: 1.5rem; }
.spec { position: relative; margin: 0 0 2.5rem; padding: 1.5rem clamp(1.25rem, .8rem + 2vw, 2.5rem); background: var(--scrap); font: 500 .9375rem/1.8 var(--gothic); letter-spacing: .04em; clip-path: polygon(0 .5%, 100% 0, 99.7% 100%, .3% 99.4%); }
.spec div { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid #DDDBD5; }
.spec div:last-child { border-bottom: 0; }
.spec dt { font-weight: 700; }
.spec dd { margin: 0; }
.faq__title { font: 600 1.5rem/1.4 var(--mincho); letter-spacing: .08em; }
.faq details { border-top: 1px solid #A9A7A1; }
.faq details:last-child { border-bottom: 1px solid #A9A7A1; }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: .75rem 2.5rem;
  font: 700 1rem/1.6 var(--gothic);
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: .25rem; font: 700 1.25rem/1 var(--slab); }
.faq summary::after { content: ""; position: absolute; right: .75rem; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; translate: 0 -25%; rotate: 45deg; transition: rotate .25s; }
.faq details[open] summary::after { rotate: 225deg; translate: 0 25%; }
.faq details p { padding: 0 2.5rem 1.25rem; font-weight: 600; }

/* 応募の章 */
.entry { overflow: hidden; text-align: center; }
.entry__photos { position: absolute; inset: 48px 0 0; z-index: -1; overflow: clip; container-type: size; }
.entry__photos img { position: absolute; top: calc(var(--y) * 1cqh); left: calc(var(--x) * 1cqw); width: calc(var(--w) * 1cqw); min-width: 7rem; max-width: none; opacity: .9; rotate: calc(var(--r) * 1deg); }
.entry__body { position: relative; display: grid; justify-items: center; gap: 1.75rem; max-width: 44rem; margin-inline: auto; }
.entry__title { font: 900 clamp(2.75rem, 1.4rem + 5.5vw, 6.5rem)/1.1 var(--gothic); letter-spacing: -.01em; }
.entry__text { font-weight: 600; line-height: 2.1; }
.entry__mail { display: grid; gap: .25rem; padding: .75rem 1.5rem; color: var(--ink); background: var(--scrap); font: 700 clamp(1rem, .8rem + 1vw, 1.375rem)/1.5 var(--slab); letter-spacing: .04em; clip-path: polygon(0 4%, 100% 0, 99% 100%, 1% 94%); }
.entry__mail span { font: 700 .75rem/1.5 var(--gothic); letter-spacing: .14em; }
.entry__note { color: #D8D5CE; font: 500 .8125rem/1.8 var(--gothic); }

/* ===== 狭い画面と中くらいの画面: 写真を上、見出しを下に積む ===== */
@media (max-width: 63.99rem) {
  .kv__ph:not([style*="--mx"]) { display: none; }
  .kv__ph { top: calc(var(--my) * 1cqh); left: calc(var(--mx) * 1cqw); width: calc(var(--mw) * 1cqw); }
  .kv__ph--hero { width: min(calc(var(--mw) * 1cqw), 63cqh); }
  .wall__grid img:nth-child(n + 7) { display: none; }
  .entry__photos img:nth-child(n + 3) { display: none; }
}
@media (max-width: 47.99rem) {
  .slug { display: none; }
  .wall__grid img { max-height: 17svh; }
}

/* ===== 広い画面 ===== */
@media (min-width: 48rem) {
  .wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 76rem; width: 100%; margin-inline: auto; }
  .role { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .role--flip .role__pics { order: 2; padding: 0 0 18% 12%; }
  .role--flip .role__sub { right: auto; left: 0; }
  .day__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note:nth-child(2n) { justify-self: start; }
  .spec div { grid-template-columns: 7rem 1fr; }
}
@media (min-width: 64rem) {
  .gnav { display: block; }
  .kv__copy { top: 27%; right: auto; left: 31%; }
  .kv__title { font-size: clamp(3rem, .4rem + 6vw, 7rem); }
  .cutout--2 { margin-left: .9em; }
  .kv__sub { margin-left: .9em; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; }
  .split__head { position: sticky; top: 8rem; align-self: start; }
  .split > .actions { grid-column: 2; }
  .day__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .letter { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; max-width: 84rem; margin-inline: auto; }
  .letter__body { justify-items: end; }
  .letter__body .hd { justify-self: end; }
  .letter__text { writing-mode: vertical-rl; height: 24em; }
  .letter__sign { margin-block-start: 2.6em; }
  .letter__photos { display: block; order: 0; min-height: 40rem; }
  .letter__photos img { position: absolute; width: 52%; }
  .letter__photos img:nth-child(1) { top: 2%; left: 8%; width: 38%; }
  .letter__photos img:nth-child(2) { top: 34%; left: 40%; margin: 0; }
  .letter__photos img:nth-child(3) { top: 58%; left: 4%; width: 38%; }
}

/* ===== 動きを許す時だけの演出 ===== */
@media (prefers-reduced-motion: no-preference) {
  /* 読み込み: トンボが付き、写真が一枚ずつ台紙に置かれ、切り抜き文字が貼られ、赤鉛筆が入る */
  .is-motion .crop, .is-motion .reg { animation: mark .5s .1s cubic-bezier(.3, .7, .3, 1) both; }
  .is-motion .slug { animation: fade .6s .3s both; }
  .is-motion .kv__ph { animation: land .8s calc(.4s + var(--i) * .2s) cubic-bezier(.2, .8, .25, 1) both; }
  .is-motion .kv .cutout__edge { animation: edge .35s 1.35s cubic-bezier(.3, .7, .35, 1.2) both; }
  .is-motion .kv .cutout__fill { animation: punch .6s 1.5s cubic-bezier(.7, 0, .2, 1) both; }
  .is-motion .kv .cutout--2 .cutout__edge { animation-delay: 1.6s; }
  .is-motion .kv .cutout--2 .cutout__fill { animation-delay: 1.75s; }
  .is-motion .kv__sub { animation: rise .6s 2.2s cubic-bezier(.2, .8, .2, 1) both; }
  .is-motion .pencil--ring path { animation: draw .6s 2.45s cubic-bezier(.5, 0, .3, 1) both; }

  /* 画面に入った時 */
  .is-motion .pencil--under path { transition: stroke-dashoffset .7s .3s cubic-bezier(.5, 0, .3, 1); }
  .is-motion .pencil--under.is-wait path { stroke-dashoffset: 1; }
  .is-motion .ch { transition: transform .75s calc(var(--ci) * 45ms) cubic-bezier(.25, 1.5, .4, 1), opacity .3s calc(var(--ci) * 45ms); }
  .is-motion .hd.is-wait .ch { opacity: 0; transform: translateY(var(--jy)) rotate(var(--jr)) scale(1.4); }
  .is-motion .letter__text p { transition: clip-path 1s cubic-bezier(.6, 0, .2, 1); }
  .is-motion .letter__text p.is-wait { clip-path: inset(0 0 100% 0); }
  .is-motion .cutout--3 .cutout__edge { transition: opacity .3s, scale .35s cubic-bezier(.3, .7, .35, 1.2); }
  .is-motion .cutout--3 .cutout__fill { transition: clip-path .6s .25s cubic-bezier(.7, 0, .2, 1); }
  .is-motion .cutout--3.is-wait .cutout__edge { opacity: 0; scale: 1.1; }
  .is-motion .cutout--3.is-wait .cutout__fill { clip-path: inset(0 100% 0 0); }

  /* ばらばらの写真を止めた画面の中で揃える */
  .is-motion .wall { height: 300vh; padding-bottom: 0; }
  .is-motion .wall__stage { position: sticky; top: 3rem; height: calc(100svh - 3rem); padding-bottom: 2rem; grid-template-rows: auto 1fr auto; align-content: center; }

  /* 広い画面では、一日を横に流す */
  @media (min-width: 64rem) {
    .is-motion .day { height: 340vh; padding-block: 30px 0; }
    .is-motion .day__stage { position: sticky; top: 3rem; display: flex; align-items: center; height: calc(100svh - 3rem); margin-inline: calc(var(--gutter) * -1); overflow: hidden; }
    .is-motion .day__track { display: flex; gap: 4rem; width: max-content; padding: 0 12vw 0 var(--gutter); align-items: center; transform: translateX(calc(var(--p, 0) * var(--shift, 0) * -1px)); }
    .is-motion .day__intro { width: 24rem; }
    .is-motion .note { width: 21rem; }
    .is-motion .note:nth-child(2n) { translate: 0 -3.5rem; }
    .is-motion .note:nth-child(2n + 1) { translate: 0 3rem; }
  }
}
@keyframes mark {
  from { opacity: 0; scale: .3; }
}
@keyframes fade {
  from { opacity: 0; }
}
@keyframes land {
  0% { opacity: 0; transform: translate(-50%, -50%) translateY(-7cqh) rotate(calc(var(--r) * 1deg + 7deg)) scale(1.1); }
  60% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)); }
}
@keyframes edge {
  from { opacity: 0; scale: 1.12; }
}
@keyframes punch {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes rise {
  from { opacity: 0; translate: 0 1rem; }
}
@keyframes draw {
  from { stroke-dashoffset: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kv { position: relative; top: 0; }
  .site-head, .card__pics img, .btn, .head-entry { transition: none; }
}

/* 破れ目の線。scratchpad の build.py が出した点列 */
.tear-a { --tear: polygon(0.00% 11.9px, 0.78% 14.4px, 1.56% 16.0px, 2.34% 15.0px, 3.12% 15.7px, 3.91% 15.9px, 4.69% 16.0px, 5.47% 15.8px, 6.25% 18.4px, 7.03% 17.8px, 7.81% 20.6px, 8.59% 18.5px, 9.38% 18.8px, 10.16% 21.0px, 10.94% 21.5px, 11.72% 22.4px, 12.50% 25.1px, 13.28% 26.2px, 14.06% 25.3px, 14.84% 26.2px, 15.62% 24.7px, 16.41% 26.4px, 17.19% 25.3px, 17.97% 26.7px, 18.75% 28.3px, 19.53% 28.4px, 20.31% 28.1px, 21.09% 26.3px, 21.88% 23.9px, 22.66% 24.7px, 23.44% 24.3px, 24.22% 21.7px, 25.00% 21.7px, 25.78% 25.2px, 26.56% 26.6px, 27.34% 27.0px, 28.12% 26.7px, 28.91% 27.4px, 29.69% 27.4px, 30.47% 24.7px, 31.25% 25.0px, 32.03% 25.5px, 32.81% 25.2px, 33.59% 24.7px, 34.38% 26.7px, 35.16% 25.8px, 35.94% 24.3px, 36.72% 24.5px, 37.50% 24.9px, 38.28% 23.9px, 39.06% 22.5px, 39.84% 22.0px, 40.62% 22.2px, 41.41% 23.2px, 42.19% 22.4px, 42.97% 23.7px, 43.75% 25.9px, 44.53% 23.3px, 45.31% 22.6px, 46.09% 22.8px, 46.88% 23.7px, 47.66% 21.3px, 48.44% 20.2px, 49.22% 18.3px, 50.00% 18.1px, 50.78% 16.7px, 51.56% 17.6px, 52.34% 16.7px, 53.12% 15.7px, 53.91% 16.5px, 54.69% 15.4px, 55.47% 16.3px, 56.25% 18.4px, 57.03% 19.1px, 57.81% 22.4px, 58.59% 25.1px, 59.38% 24.7px, 60.16% 24.8px, 60.94% 26.0px, 61.72% 26.4px, 62.50% 28.6px, 63.28% 25.9px, 64.06% 25.4px, 64.84% 25.1px, 65.62% 24.3px, 66.41% 25.9px, 67.19% 26.6px, 67.97% 25.9px, 68.75% 25.7px, 69.53% 24.4px, 70.31% 23.2px, 71.09% 20.5px, 71.88% 20.6px, 72.66% 22.5px, 73.44% 21.0px, 74.22% 21.8px, 75.00% 23.6px, 75.78% 22.5px, 76.56% 21.9px, 77.34% 22.6px, 78.12% 20.8px, 78.91% 18.5px, 79.69% 18.1px, 80.47% 16.6px, 81.25% 14.2px, 82.03% 13.4px, 82.81% 9.9px, 83.59% 10.4px, 84.38% 9.7px, 85.16% 11.5px, 85.94% 11.1px, 86.72% 8.8px, 87.50% 8.8px, 88.28% 8.5px, 89.06% 6.5px, 89.84% 6.3px, 90.62% 8.6px, 91.41% 10.2px, 92.19% 11.4px, 92.97% 10.4px, 93.75% 10.6px, 94.53% 13.1px, 95.31% 14.1px, 96.09% 16.8px, 96.88% 14.9px, 97.66% 13.7px, 98.44% 11.5px, 99.22% 12.5px, 100.00% 11.6px, 100% 100%, 0 100%); }
.tear-b { --tear: polygon(0.00% 12.5px, 0.78% 11.3px, 1.56% 12.0px, 2.34% 12.2px, 3.12% 13.5px, 3.91% 13.8px, 4.69% 11.5px, 5.47% 10.2px, 6.25% 8.8px, 7.03% 9.0px, 7.81% 11.0px, 8.59% 13.8px, 9.38% 13.7px, 10.16% 13.0px, 10.94% 14.8px, 11.72% 13.3px, 12.50% 13.2px, 13.28% 14.8px, 14.06% 15.2px, 14.84% 16.0px, 15.62% 18.4px, 16.41% 21.5px, 17.19% 22.5px, 17.97% 21.2px, 18.75% 22.3px, 19.53% 22.6px, 20.31% 27.1px, 21.09% 27.4px, 21.88% 28.3px, 22.66% 26.8px, 23.44% 26.6px, 24.22% 27.4px, 25.00% 27.9px, 25.78% 27.5px, 26.56% 26.1px, 27.34% 21.5px, 28.12% 20.4px, 28.91% 20.1px, 29.69% 20.5px, 30.47% 21.9px, 31.25% 19.1px, 32.03% 18.1px, 32.81% 16.9px, 33.59% 17.1px, 34.38% 16.3px, 35.16% 15.2px, 35.94% 16.1px, 36.72% 17.2px, 37.50% 19.4px, 38.28% 21.0px, 39.06% 19.3px, 39.84% 18.9px, 40.62% 19.1px, 41.41% 19.6px, 42.19% 20.8px, 42.97% 20.9px, 43.75% 23.8px, 44.53% 23.9px, 45.31% 23.3px, 46.09% 23.5px, 46.88% 20.7px, 47.66% 21.8px, 48.44% 23.3px, 49.22% 23.6px, 50.00% 22.1px, 50.78% 22.5px, 51.56% 20.8px, 52.34% 20.8px, 53.12% 20.2px, 53.91% 20.4px, 54.69% 19.9px, 55.47% 19.3px, 56.25% 20.4px, 57.03% 18.8px, 57.81% 18.5px, 58.59% 19.0px, 59.38% 16.8px, 60.16% 16.2px, 60.94% 16.3px, 61.72% 16.0px, 62.50% 13.1px, 63.28% 16.0px, 64.06% 16.8px, 64.84% 18.4px, 65.62% 17.7px, 66.41% 17.5px, 67.19% 18.8px, 67.97% 20.4px, 68.75% 18.8px, 69.53% 18.8px, 70.31% 18.9px, 71.09% 19.8px, 71.88% 19.8px, 72.66% 17.8px, 73.44% 17.3px, 74.22% 18.2px, 75.00% 17.2px, 75.78% 16.5px, 76.56% 16.9px, 77.34% 16.4px, 78.12% 13.1px, 78.91% 14.7px, 79.69% 14.9px, 80.47% 13.7px, 81.25% 15.9px, 82.03% 13.0px, 82.81% 11.4px, 83.59% 10.2px, 84.38% 11.0px, 85.16% 9.6px, 85.94% 8.6px, 86.72% 7.6px, 87.50% 6.5px, 88.28% 8.2px, 89.06% 6.8px, 89.84% 7.2px, 90.62% 9.6px, 91.41% 9.5px, 92.19% 11.8px, 92.97% 12.0px, 93.75% 13.0px, 94.53% 10.3px, 95.31% 10.0px, 96.09% 10.4px, 96.88% 11.6px, 97.66% 12.8px, 98.44% 11.4px, 99.22% 13.5px, 100.00% 13.1px, 100% 100%, 0 100%); }