@charset "UTF-8";
/* トップの最初の画面（① 方眼紙の上の下書き）と、すぐ下の「頼み方と相談」（②）。2026-10-18 作り直し。
   🔴 型にしない決まり（社長「Claude Code で作ったみたい」）: 左に全部を積まない／丸いカードを並べない／紙を傾けない／
      大きさの差は題字だけにしない（題字は縦に大きく、作品は大小をつけて、ほかは小さく）。
   🔴 題字は動かさない（LCP）。作品・空き・書き込みは、下書き（sketch.js）が描き終わってから入る。
      JS が来なくても 4.5 秒で見える（mv-show）。動きを減らす設定では最初から見える。 */
/* ═══ ① 最初の画面 ═══════════════════════════════ */
.p-mv {
  --hdr: 4.45rem; /* 固定ヘッダーの高さ（layout/_header.scss の padding .55rem ＋ 帯 3.9rem）。方眼紙をヘッダーの裏まで敷く */
  --grid-c: rgba(39, 80, 106, .075);
  --grid-c2: rgba(39, 80, 106, .14);
  position: relative;
  margin-top: calc(var(--hdr) * -1);
  padding: calc(var(--hdr) + clamp(2.5rem, 5vh, 3.5rem)) var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid-c2) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c2) 1px, transparent 1px), linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  overflow: clip;
}

.p-mv__in {
  position: relative;
  width: min(100%, var(--w-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "say title" "desk desk" "now now" "how how";
  gap: var(--sp-5) var(--sp-4);
  align-items: end;
}

/* 題字（縦書き。右から「横浜のお店と事務所の、」「ホームページ」「担当です。」） */
.p-mv__title {
  grid-area: title;
  justify-self: end;
  align-self: start;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(2.9rem, 1.4rem + 7vw, 4.4rem);
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}

.p-mv__pre {
  display: block;
  font-size: max(0.27em, 1rem);
  letter-spacing: 0.32em;
  color: var(--ink-sub);
  padding-top: 0.2em;
  margin-left: 0.7em;
}

.p-mv__main {
  display: block;
  white-space: nowrap;
}

.p-mv__main + .p-mv__main {
  padding-top: 1.1em;
} /* 2列目は1字半下げて始める（縦組みの段違い） */
/* 何をするかの一文（縦書きの題字の横・横書き。社長「何を言ってるか分からない」への答え） */
.p-mv__say {
  grid-area: say;
  align-self: end;
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.85;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p-mv__say span {
  display: inline-block;
} /* 言葉の切れ目でだけ折り返す */
.p-mv__deskhead {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  letter-spacing: 0.08em;
  color: var(--ink);
}

.p-mv__deskhead small {
  margin-left: 0.9em;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-sub);
}

/* 作品の机（業種のちがう4件。紙は傾けない。大小で並べる） */
.p-mv__desk {
  grid-area: desk;
  position: relative;
}

.p-mv__works {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  aspect-ratio: 1/1.4;
}

.p-mv__work {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
}

.p-mv__work--okimatsu {
  --x: 0%;
  --y: 0%;
  --w: 68%;
}

.p-mv__work--ulu {
  --x: 73%;
  --y: 2%;
  --w: 27%;
}

.p-mv__work--ijyuraku {
  --x: 8%;
  --y: 37%;
  --w: 60%;
}

.p-mv__work--sanlife {
  --x: 73%;
  --y: 51%;
  --w: 27%;
}

.p-mv__work a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.p-mv__sheet {
  display: block;
  background: var(--white);
  padding: clamp(0.25rem, 0.6vw, 0.45rem);
  box-shadow: 0 1px 0 rgba(43, 40, 36, 0.08), 0 18px 32px -22px rgba(43, 40, 36, 0.55);
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.p-mv__sheet img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: 50% 0;
}

.p-mv__work--sp .p-mv__sheet img {
  aspect-ratio: 390/844;
}

.p-mv__kind {
  position: relative;
  z-index: 3; /* 隣の作品の下に潜らないよう、札は前に（点検 中2） */
  display: inline-block;
  margin-top: 0.45rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--accent);
  background: linear-gradient(var(--accent), var(--accent)) 0 100%/0 1.5px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}

/* 乗せると、藍のペンで下線が引かれる（跳ねさせない） */
.p-mv__work a:hover .p-mv__kind {
  background-size: 100% 1.5px;
}

.p-mv__work a:hover .p-mv__sheet {
  box-shadow: 0 0 0 1.5px var(--accent), 0 18px 32px -22px rgba(43, 40, 36, 0.55);
}

/* 今月の空き（代表の生の声のように、正直に1行） */
.p-mv__now {
  grid-area: now;
  align-self: end;
  margin: 0;
  max-width: 17em;
  font-size: var(--fs-sm);
  line-height: 1.8;
  font-weight: 700;
}

.p-mv__dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5em;
  vertical-align: 0.08em;
  box-shadow: 0 0 0 0 rgba(39, 80, 106, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .p-mv__dot {
    animation: mv-dot 2.4s ease-out infinite;
  }
}
@keyframes mv-dot {
  70% {
    box-shadow: 0 0 0 0.55em rgba(39, 80, 106, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(39, 80, 106, 0);
  }
}
/* 「この画面の作り方を見る」＝最後に残る、担当の書き込み */
.p-mv__how {
  grid-area: how;
  margin: 0;
  justify-self: end;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  letter-spacing: 0.06em;
}

.p-mv__how a {
  color: var(--accent);
  text-decoration: none;
}

.p-mv__how a::after {
  content: " →";
  content: " →"/"";
}

.p-mv__how a {
  background: linear-gradient(currentColor, currentColor) 0 100%/100% 1px no-repeat;
  padding-bottom: 0.15em;
  transition: background-size 0.4s var(--ease-out);
}

.p-mv__how a:hover {
  background-size: 0 1px;
}

/* 下書きの線とひと言（sketch.js が描く） */
.c-sketch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.c-sketch path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.55, 0.1, 0.3, 1), opacity 0.6s ease;
}

.c-sketch__note {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.1rem);
  letter-spacing: 0.05em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.45s ease, translate 0.45s var(--ease-out);
}

.c-sketch__note[data-at=tl] {
  translate: -4px calc(-100% - 16px);
}

.c-sketch__note[data-at=tr] {
  translate: calc(-100% + 4px) calc(-100% - 16px);
}

.c-sketch__note[data-at=bl] {
  translate: -4px 16px;
}

.c-sketch__note[data-at=br] {
  translate: calc(-100% + 4px) 16px;
}

[data-sketching] .c-sketch path {
  stroke-dashoffset: 0;
}

[data-sketching] .c-sketch__note {
  opacity: 1;
}

[data-sketched] .c-sketch path:not(.is-keep), [data-sketched] .c-sketch__note:not(.is-keep) {
  opacity: 0;
  transition-delay: 0s !important;
}

/* 🔴 2026-10-18: 作品・空き・書き込みは最初から見せる（隠して出すと「作りかけ」に見えた）。動くのはペンの線だけ */
@media (min-width: 768px) {
  .p-mv__kind {
    white-space: nowrap;
  }
  .p-mv__works {
    aspect-ratio: 4/3;
  }
  .p-mv__work--okimatsu {
    --x: 0%;
    --y: 3%;
    --w: 60%;
  }
  .p-mv__work--ulu {
    --x: 64%;
    --y: 0%;
    --w: 17%;
  }
  .p-mv__work--sanlife {
    --x: 83%;
    --y: 17%;
    --w: 17%;
  }
  .p-mv__work--ijyuraku {
    --x: 25%;
    --y: 51%;
    --w: 37%;
    z-index: 1;
  } /* 会計事務所の右下に少し重ねる（傾けずに奥行きを出す） */
}
@media (min-width: 900px) {
  .p-mv {
    min-height: 100svh;
    display: grid;
    align-content: center;
  }
  .p-mv__in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "desk title" "desk say" "now how";
    column-gap: clamp(2.5rem, 5vw, 6rem);
    row-gap: var(--sp-4);
    align-items: start;
  }
  .p-mv__title {
    font-size: clamp(3.6rem, min(8.6vh, 6.4vw), 6.6rem);
  }
  .p-mv__desk {
    align-self: center;
  }
  .p-mv__works {
    aspect-ratio: 4/3;
    max-height: calc(100svh - var(--hdr) - 10rem);
    margin-inline: auto;
  }
  .p-mv__now {
    max-width: none;
    align-self: center;
  }
  .p-mv__where {
    font-weight: 500;
    color: var(--ink-sub);
  }
  .p-mv__how {
    align-self: end;
    justify-self: end;
  }
  .p-mv__say {
    align-self: start;
    max-width: 15em;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem);
  }
  .p-mv__title {
    align-self: end;
  }
}
/* ═══ ② 頼み方と相談（方眼紙の続き。机に置いた品書きの紙1枚）═══════════ */
.p-start {
  position: relative;
  padding-block: var(--sp-6) var(--sec-y);
  background: var(--paper);
  isolation: isolate;
}

.p-start::before { /* 最初の画面の方眼が、下へ薄れながら続く */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(39, 80, 106, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 80, 106, 0.14) 1px, transparent 1px), linear-gradient(rgba(39, 80, 106, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 80, 106, 0.075) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
  mask-image: linear-gradient(#000, transparent 85%);
}

.p-start__in {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.p-start__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  margin: 0 0 var(--sp-3);
}

.p-start__lede {
  font-size: var(--fs-base);
  line-height: 1.95;
  margin: 0;
  max-width: 22em;
}

.p-start__slip {
  background: var(--white);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  box-shadow: 0 1px 0 rgba(43, 40, 36, 0.08), 14px 14px 0 var(--paper-2);
} /* 影の代わりに、濃い生成りの紙をずらして敷く */
.p-start__routes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-start__routes li + li {
  border-top: 1px dashed var(--rule);
}

.p-start__route {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  gap: 0.2rem 0.8rem;
  align-items: end;
  padding: 1rem 2rem 1rem 0;
  position: relative;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(rgba(39, 80, 106, 0.06), rgba(39, 80, 106, 0.06)) 0 0/0 100% no-repeat;
  transition: background-size 0.5s var(--ease-out);
}

.p-start__route::after {
  content: "→";
  content: "→"/"";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--accent);
  font-weight: 700;
  transition: translate var(--dur-1) var(--ease-out);
}

.p-start__route:hover {
  background-size: 100% 100%;
} /* 色が左から染みる（跳ねさせない） */
.p-start__route:hover::after {
  translate: 4px -50%;
}

.p-start__dots {
  align-self: end;
  margin-bottom: 1.55rem;
  border-bottom: 2px dotted rgba(43, 40, 36, 0.35);
}

.p-start__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  letter-spacing: 0.06em;
}

.p-start__name small, .p-start__price small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-sub);
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}

.p-start__price {
  text-align: right;
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.p-start__price b {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-right: 0.1em;
}

.p-start__note {
  font-size: var(--fs-sm);
  line-height: 1.75;
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}

.p-start__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
}

.p-start__promise {
  font-size: var(--fs-xs);
  color: var(--ink-sub);
  margin: var(--sp-2) 0 0;
  line-height: 1.8;
}

@media (min-width: 900px) {
  .p-start__in {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: var(--sp-8);
  }
  .p-start__lead {
    padding-top: var(--sp-4);
  }
}
@media (max-width: 479.98px) {
  .p-start__route {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-start__dots {
    display: none;
  }
  .p-start__price {
    text-align: left;
  }
}