/* ============================================================
   誌面で読ませる型（テーマの @motion に folio。<html class="mv mv-folio">）の見た目と動き（folio.css）

   - 写真は止めたまま。屋号・番号・大きな英字で誌面のように組み、読み進めると大きな英字がすべり、
     写真が下から上へめくれて出る。PC のメニューは、左の写真が読み進めた品に合わせてめくれて替わる
     （業種別サイト傾向調査の「看板の品1つに1つの節」「英字の大見出し＋日本語の小見出し」の型）
   - 5秒を超えて自動で動くものはない。動くのは、開いたとき（一度だけ）と、読み進めたときだけ
   - motion.css の後に読む。印（.mv-boot・.mv-live・.mv-ready・.mv-settled・.is-still）の意味は motion.css の先頭。この型の印：
       .fo-past-hero … ヒーローを読み過ぎた（PC の右の端に、ページ内の目次を出す）
   - 色と書体はテーマの変数。この型だけの変数は --fo-*（下の .mv-folio。テーマの :root[data-theme] で上書きできる）
   - JavaScript が動かないとき・動きを止めたときも、同じ組み方で全部が見える（めくれる写真の舞台は出さない）
   ============================================================ */

.mv-folio {
  --fo-outline: var(--c-line);                        /* 大きな英字の線（飾り。読み上げない） */
  --fo-drift: 16vw;                                   /* 大きな英字が、読み進めるあいだにすべる幅 */
  --fo-title-size: clamp(3.75rem, 19vw, 8.75rem);     /* 屋号 */
  --fo-wipe: 1.2s;                                    /* 写真がめくれて出る長さ */
}

/* ============ ヒーロー（表紙）：屋号を大きく、写真は止めたまま ============ */
.mv-folio .hero {
  grid-template-areas: "body" "media";
}

.mv-folio .hero__inner {
  padding-block: clamp(36px, 8vw, 88px) clamp(28px, 5vw, 48px);
}

/* スマホ・タブレット（文字が写真の上の段）では、右上の「動きを止める」ボタンの下から始める。
   長い小見出しがボタンの下に入り込まないように */
@media (max-width: 767px) {
  .mv-folio .hero__inner {
    padding-top: 80px;
  }
}

.mv-folio .hero__card {
  max-width: none;
  container-type: inline-size;
}

.mv-folio .hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
}

.mv-folio .hero__eyebrow::before {
  content: "";
  flex: none;
  width: 2.75em;
  height: 1px;
  background: currentColor;
}

/* 屋号は1行に収める。字数（motion.py が書く --n）で、文字の面の幅を割った大きさを上限にする */
.mv-folio .hero__title {
  margin-top: 0.18em;
  font-size: min(var(--fo-title-size), calc(100cqi / (var(--n, 4) * 1.1)));
  line-height: 1.08;
  letter-spacing: 0.06em;
}

/* 屋号は、行の枠の下から字だけがせり上がる（motion.py が .mv-line で包む） */
.mv-folio .mv-line {
  display: block;
  overflow: clip;
  padding-block: 0.04em 0.12em;
}

.mv-folio .mv-line__in {
  display: inline-block;
}

.mv-folio .hero__lead {
  max-width: 24em;
  margin-top: 1.2em;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 3.9vw, 1.375rem);
  font-weight: 500;
  line-height: 2;
}

.mv-folio .hero__media {
  min-height: 0;
  margin: 0 var(--gutter) clamp(28px, 6vw, 56px);
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .mv-folio .hero {
    grid-template-areas: "body media";
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: min(90svh, 880px);
  }

  .mv-folio .hero__body {
    align-self: center;
  }

  .mv-folio .hero__inner {
    width: auto;
    margin-inline: 0;
    padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)) clamp(16px, 3vw, 40px);
  }

  .mv-folio .hero__media {
    margin: clamp(20px, 3vw, 40px) var(--gutter) clamp(20px, 3vw, 40px) 0;
    aspect-ratio: auto;
  }
}

/* 開いたとき（一度だけ。約1.4秒）：屋号の字が枠の下からせり上がり、写真が下から上へめくれて出る。
   ほかの型の「ヒーローの文字が下から出る」（motion.css）は、屋号にだけは使わない */
.mv-folio.mv-boot:not(.is-still):not(.mv-settled) .hero__title {
  opacity: 1;
  animation: none;
}

.mv-folio.mv-boot:not(.is-still):not(.mv-ready) .mv-line__in {
  transform: translate3d(0, 115%, 0);
  /* folio.js・motion.js が読めなかったときも、4秒で見せる */
  animation: fo-show 0.01s linear 4s forwards;
}

.mv-folio.mv-ready:not(.is-still):not(.mv-settled) .mv-line__in {
  animation: fo-line 1.1s var(--mv-ease) 0.1s both;
}

.mv-folio.mv-boot:not(.is-still):not(.mv-ready) .hero__media {
  clip-path: inset(100% 0 0 0);
  animation: fo-show 0.01s linear 4s forwards;
}

.mv-folio.mv-ready:not(.is-still):not(.mv-settled) .hero__media {
  animation: fo-wipe-up var(--fo-wipe) var(--mv-ease-io) 0.15s both;
}

/* 読み進めると、写真が枠の中で少し遅れて動く（folio.js が --fo-hero に 0〜1 を入れる） */
.mv-folio.mv-live:not(.is-still) .hero__media > img,
.mv-folio.mv-live:not(.is-still) .hero__media > .ph {
  transform: translate3d(0, calc(var(--fo-hero, 0) * 4.5%), 0) scale(1.1);
}

@keyframes fo-line {
  from {
    transform: translate3d(0, 115%, 0);
  }

  to {
    transform: none;
  }
}

@keyframes fo-wipe-up {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes fo-show {
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}

/* ============ 見出し：番号・線・大きな英字・明朝の見出し ============ */
.mv-folio .section__head {
  display: grid;
  grid-template-areas: "no rule" "label label" "title title";
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin-bottom: clamp(36px, 7vw, 72px);
  text-align: left;
}

/* 節の番号（base.css の counter section。読み上げない） */
.mv-folio .section__head::before {
  content: counter(section, decimal-leading-zero);
  content: counter(section, decimal-leading-zero) / "";
  grid-area: no;
  color: var(--s-accent);
  font-family: var(--font-num);
  font-size: clamp(1.375rem, 4.6vw, 2rem);
  font-style: italic;
  line-height: 1;
}

.mv-folio .section__head::after {
  content: "";
  grid-area: rule;
  height: 1px;
  background: var(--s-text);
}

/* 英字の小見出し（もとから読み上げない）を、線だけの大きな英字にする。読み進めるあいだ、横にすべる
   （folio.js が節ごとに --fo-p に 0〜1 を入れる。節が画面の真ん中にあるとき 0.5 で、ずれない） */
.mv-folio .section__label {
  grid-area: label;
  display: block;
  margin: 0.12em 0 0.04em;
  color: transparent;
  font-family: var(--font-label);
  font-size: clamp(3.5rem, 17vw, 10.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  -webkit-text-stroke: 1px var(--fo-outline);
  transform: translate3d(calc((0.5 - var(--fo-p, 0.5)) * var(--fo-drift)), 0, 0);
}

.mv-folio .section__title {
  grid-area: title;
  font-size: clamp(1.5rem, 5.6vw, 2.625rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.mv-folio .section__title::after {
  display: none;
}

/* ============ 何をしているのか：墨の地に反転した紹介の段と、3段組みの強み ============ */
.mv-folio .about__intro {
  gap: clamp(28px, 6vw, 64px);
}

.mv-folio .about__media {
  aspect-ratio: 4 / 5;
}

.mv-folio .about__text > p:first-child {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 3.8vw, 1.4375rem);
  font-weight: 500;
  line-height: 2.05;
}

.mv-folio .about__sign {
  font-family: var(--font-num);
  font-style: italic;
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .mv-folio .about__intro {
    grid-template-areas: "text media";
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }
}

.mv-folio .points {
  gap: 0;
  margin-top: clamp(48px, 9vw, 96px);
  border-top: 1px solid var(--s-line);
}

.mv-folio .point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 4vw, 28px);
  padding: clamp(24px, 5vw, 36px) 0;
  border: 0;
  border-bottom: 1px solid var(--s-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.mv-folio .point__num {
  grid-row: 1 / span 2;
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--s-accent);
  font-size: clamp(2.75rem, 10vw, 4.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.9;
}

.mv-folio .point__title {
  margin-top: 0;
  font-size: clamp(1.125rem, 3.6vw, 1.3125rem);
}

@media (min-width: 960px) {
  .mv-folio .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
  }

  .mv-folio .point {
    display: block;
    padding: 4px clamp(20px, 2.6vw, 36px);
    border-bottom: 0;
    border-left: 1px solid var(--s-line);
  }

  .mv-folio .point:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .mv-folio .point__num {
    margin-bottom: 18px;
  }
}

/* ============ サービスと料金：1品に1つの節 ============ */
/* スマホ・タブレットは、品ごとに写真・番号・品名・料金を積む。PC（960px〜）は folio.js が左に写真の舞台を組み、
   読み進めた品の写真が、下へ読むときは右から、上へ戻るときは左からめくれて替わる */
.mv-folio .menu__list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: fo-item;
}

.mv-folio .menu-item {
  counter-increment: fo-item;
  grid-template-areas: "media media" "no name" "no desc" "no price";
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 3.5vw, 24px);
  row-gap: 6px;
  padding: 0 0 clamp(44px, 10vw, 80px);
  border: 0;
  border-radius: 0;
  background: none;
}

.mv-folio .menu-item::before {
  content: "No." counter(fo-item, decimal-leading-zero);
  content: "No." counter(fo-item, decimal-leading-zero) / "";
  grid-area: no;
  align-self: start;
  padding-top: 0.45em;
  color: var(--s-accent);
  font-family: var(--font-num);
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.mv-folio .menu-item__media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
}

.mv-folio .menu-item__name {
  font-size: clamp(1.375rem, 5.4vw, 2rem);
  line-height: 1.45;
}

.mv-folio .menu-item__desc {
  max-width: 30em;
}

.mv-folio .menu-item__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  margin-top: 6px;
  font-size: clamp(1.375rem, 4.8vw, 1.75rem);
}

.mv-folio .menu-item__price::before {
  content: "";
  flex: 0 0 2.5em;
  align-self: center;
  height: 1px;
  background: var(--s-text);
}

/* 写真の舞台（folio.js が組む。PC だけ） */
.mv-folio .fo-stage {
  display: none;
}

@media (min-width: 960px) {
  .mv-folio .fo-menu {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    gap: clamp(40px, 5vw, 88px);
  }

  .mv-folio .fo-stage {
    position: sticky;
    top: 10svh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    height: 80svh;
  }

  .mv-folio .fo-stage__frame {
    position: relative;
    overflow: hidden;
    background: var(--c-band);
  }

  .mv-folio .fo-stage__page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--img-filter);
    clip-path: inset(0 0 0 100%);
  }

  .mv-folio .fo-stage__page.from-left {
    clip-path: inset(0 100% 0 0);
  }

  .mv-folio .fo-stage__page.was-on {
    z-index: 1;
    clip-path: inset(0);
  }

  .mv-folio .fo-stage__page.is-on {
    z-index: 2;
    clip-path: inset(0);
  }

  .mv-folio.mv-live:not(.is-still) .fo-stage__page {
    transition: clip-path 0.95s var(--mv-ease-io);
  }

  /* メニューに写真がない業種は、番号を大きく出す */
  .mv-folio .fo-stage__type {
    display: grid;
    place-items: center;
    background: var(--c-surface);
    color: transparent;
    font-family: var(--font-num);
    font-size: clamp(8rem, 17vw, 15rem);
    font-style: italic;
    line-height: 1;
    -webkit-text-stroke: 1px var(--fo-outline);
  }

  .mv-folio .fo-stage__cap {
    display: flex;
    align-items: baseline;
    gap: 0.9em;
    min-height: 1.6em;
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: var(--fw-head);
    line-height: 1.5;
  }

  .mv-folio .fo-stage__no {
    flex: none;
    color: var(--s-accent);
    font-family: var(--font-num);
    font-style: italic;
    font-weight: 400;
  }

  .mv-folio .fo-menu .menu-item {
    position: relative;
    grid-template-areas: "no name" "no desc" "no price";
    align-content: center;
    min-height: 58svh;
    padding-block: 5svh;
    border-top: 1px solid var(--s-line);
  }

  .mv-folio .fo-menu .menu-item:first-child {
    border-top: 0;
  }

  /* 品の写真は左の舞台に出すので、ここでは見せない（読み上げでは、写真の説明をこの位置で読む） */
  .mv-folio .fo-menu .menu-item__media {
    position: absolute;
    grid-area: auto;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ============ 実績・仕事の写真：大小を組み合わせた組み写真 ============ */
.mv-folio .works__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3.4vw, 36px) clamp(12px, 2.4vw, 28px);
  counter-reset: fo-fig;
}

.mv-folio .work:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.mv-folio .work:nth-child(3n + 1) .work__media {
  aspect-ratio: 16 / 10;
}

.mv-folio .work figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin-top: 10px;
  color: var(--s-text);
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 500;
}

.mv-folio .work figcaption::before {
  content: "Fig." counter(fo-fig);
  content: "Fig." counter(fo-fig) / "";
  counter-increment: fo-fig;
  flex: none;
  color: var(--s-accent);
  font-family: var(--font-num);
  font-style: italic;
}

@media (min-width: 960px) {
  .mv-folio .works__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 大きい写真を 1・4・5 枚目にして、3段とも「大＋小」「小＋大」「大＋小」に組む */
  .mv-folio .work:nth-child(3n + 1) {
    grid-column: auto;
  }

  .mv-folio .work:nth-child(3n + 1) .work__media {
    aspect-ratio: 1 / 1;
  }

  .mv-folio .work:nth-child(6n + 1),
  .mv-folio .work:nth-child(6n + 4),
  .mv-folio .work:nth-child(6n + 5) {
    grid-column: span 2;
  }

  .mv-folio .work:nth-child(6n + 1) .work__media,
  .mv-folio .work:nth-child(6n + 4) .work__media,
  .mv-folio .work:nth-child(6n + 5) .work__media {
    aspect-ratio: 2 / 1;
  }
}

/* 施工の前と後の組（data-pairs）は、組が崩れないよう2列の同じ大きさにそろえる */
.mv-folio .works__grid[data-pairs] .work {
  grid-column: auto;
}

.mv-folio .works__grid[data-pairs] .work .work__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 960px) {
  .mv-folio .works__grid[data-pairs] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============ お知らせ：見出しの並ぶ紙面 ============ */
.mv-folio .news__list {
  border-top: 2px solid var(--s-text);
}

.mv-folio .news-item {
  padding: clamp(20px, 4vw, 28px) 0;
}

.mv-folio .news-item__date {
  color: var(--s-text);
  font-size: 1.0625rem;
  font-style: italic;
}

.mv-folio .news-item__tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}

.mv-folio .news-item__title {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 4vw, 1.4375rem);
  font-weight: var(--fw-head);
  line-height: 1.55;
}

/* ============ 地図・行き方、営業時間・連絡先 ============ */
.mv-folio .map-ph {
  outline: 1px solid var(--s-line);
  outline-offset: 8px;
}

.mv-folio .access__list {
  counter-reset: fo-way;
}

.mv-folio .access__list li {
  padding-left: 2.4em;
}

.mv-folio .access__list li::before {
  content: counter(fo-way, decimal-leading-zero);
  content: counter(fo-way, decimal-leading-zero) / "";
  counter-increment: fo-way;
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--s-accent);
  font-family: var(--font-num);
  font-style: italic;
}

.mv-folio .info {
  max-width: 50rem;
  border-top: 2px solid var(--s-text);
}

.mv-folio .info__row dt {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
}

@media (min-width: 360px) {
  .mv-folio .info__row {
    grid-template-columns: 7.5em minmax(0, 1fr);
    padding: 16px 0;
  }
}

/* ============ 連絡ボタンの帯 ============ */
.mv-folio .cta--top {
  border-bottom: 1px solid var(--c-line);
}

.mv-folio .cta--bottom .cta__lead {
  font-size: clamp(1.375rem, 5.4vw, 2.125rem);
  line-height: 1.6;
}

.mv-folio .btn {
  letter-spacing: 0.1em;
}

/* ============ ページ内の目次（PC の右の端。爪見出しのように番号だけを出し、押すとその節へ）と、読み進めた量の線 ============ */
.mv-folio .mv-index {
  display: none;
}

@media (min-width: 1200px) {
  .mv-folio .mv-index {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 20;
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }

  /* ヒーローを読み過ぎたら出す。JavaScript が動かないときは最初から出す */
  .mv-folio.fo-past-hero .mv-index,
  .mv-folio:not(.mv-live) .mv-index {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s ease;
  }

  .mv-folio .mv-index ol {
    display: grid;
    gap: 4px;
  }

  .mv-folio .mv-index a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 18px 6px 14px;
    border: 1px solid var(--c-text);
    border-right: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 0.8125rem;
    line-height: 1.2;
    text-decoration: none;
    transform: translateX(calc(100% - 3.25rem));
    transition: transform 0.35s var(--mv-ease), background-color 0.2s ease, color 0.2s ease;
  }

  .mv-folio .mv-index a:hover,
  .mv-folio .mv-index a:focus-visible {
    transform: none;
  }

  .mv-folio .mv-index a:focus-visible {
    outline-offset: -4px;
  }

  .mv-folio .mv-index a[aria-current] {
    background: var(--c-text);
    color: var(--c-bg);
  }

  .mv-folio .mv-index__no {
    min-width: 1.4em;
    font-family: var(--font-num);
    font-size: 1rem;
    font-style: italic;
  }

  .mv-folio .mv-index__en {
    font-family: var(--font-label);
    font-style: italic;
    white-space: nowrap;
  }
}

.mv-progress {
  display: none;
}

.mv-folio.mv-live .mv-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  display: block;
  height: 3px;
  pointer-events: none;
}

.mv-folio .mv-progress i {
  display: block;
  height: 100%;
  background: var(--c-accent-deco);
  transform: scaleX(var(--fo-read, 0));
  transform-origin: 0 50%;
}

/* ============ スクロールで出す：写真は下から上へめくれて出る（文と見出しは motion.css の下から出る形） ============ */
.mv-folio.mv-boot:not(.is-still) .about__media[data-mv-reveal]:not(.is-in),
.mv-folio.mv-boot:not(.is-still) .map-ph[data-mv-reveal]:not(.is-in) {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
}

.mv-folio.mv-boot:not(.is-still) .work[data-mv-reveal]:not(.is-in) .work__media,
.mv-folio.mv-boot:not(.is-still) .menu-item[data-mv-reveal]:not(.is-in) .menu-item__media {
  clip-path: inset(100% 0 0 0);
}

.mv-folio.mv-live:not(.is-still) .about__media[data-mv-reveal],
.mv-folio.mv-live:not(.is-still) .map-ph[data-mv-reveal] {
  transition: clip-path var(--fo-wipe) var(--mv-ease-io);
}

.mv-folio.mv-live:not(.is-still) .work .work__media,
.mv-folio.mv-live:not(.is-still) .menu-item .menu-item__media {
  transition: clip-path var(--fo-wipe) var(--mv-ease-io) 0.1s;
}

/* motion.js が読めなかったときも、4秒で見せる（めくれる前の形も外す） */
.mv-folio.mv-boot:not(.mv-live):not(.is-still) [data-mv-reveal],
.mv-folio.mv-boot:not(.mv-live):not(.is-still) [data-mv-reveal] .work__media,
.mv-folio.mv-boot:not(.mv-live):not(.is-still) [data-mv-reveal] .menu-item__media {
  animation: fo-show 0.01s linear 4s forwards;
}

/* ============ 動きを止めているとき・撮影のとき ============ */
.is-still.mv-folio .section__label,
.is-still.mv-folio .hero__media > img,
.is-still.mv-folio .hero__media > .ph {
  transform: none;
}

.is-still.mv-folio .mv-index a {
  transition: none;
}

html[data-shot] .mv-index,
html[data-shot] .mv-progress {
  display: none !important;
}