/* ============================================================
   動きのあるスタイル（D）の共通スタイル（premium.css）

   - base.css とテーマの変数の上に、開いたときの演出・ヘッダー・流れる英字・波の線・
     横に動かす写真・スクロールに合わせた動きを足す。対象は <html class="pm"> のページだけ
   - 動きは <html> の3つの印で切り替える
       .is-opening … 開いたときの演出の最中（head の短いスクリプトが付け、premium.js が外す。
                     premium.js が読めなくても、幕は CSS だけで上がって消える）
       .pm-live    … premium.js が動いている。スクロールで出す前の「隠した状態」は、この印があるときだけ
       .is-still   … 動きを止めている（OS の「視差効果を減らす」か、ページの「動きを止める」ボタン）
     JavaScript が動かないときと .is-still のときは、すべて最初から見える止まった表示になる
   - 色はテーマの変数（--c-*・--pm-*）から取る。業種ごとの値は themes/<業種>.css の D のブロック
   ============================================================ */

.pm {
  --pm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --pm-t0: 1.7s;               /* 開いたときの演出で、ヒーローが出始める時刻 */
  --pm-slide: 6.5s;            /* ヒーローの写真を切り替える間隔（premium.js の INTERVAL と同じ） */
  --pm-btn-fill: var(--pm-grad);
  --pm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11h14.2l-5.1-5.1L13.5 4.5 21 12l-7.5 7.5-1.4-1.4 5.1-5.1H3z'/%3E%3C/svg%3E");
  scroll-padding-top: 84px;
}

.pm body {
  overflow-x: clip;
}

/* 横に流れる英字が画面の右からはみ出しても、横にスクロールしないよう帯ごとに切る（上の波は縦にはみ出すので、切るのは横だけ） */
.pm .section {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* ============ 開いたときの演出（幕） ============ */
.pm-opening {
  display: none;
}

.is-opening .pm-opening {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pm-grad);
  animation: pm-curtain 1s var(--pm-ease-io) 1.35s both;
}

@keyframes pm-curtain {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
  }
}

.pm-opening__strand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(120vw, 900px);
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.pm-opening__strand path {
  stroke-dasharray: 1;
  animation: pm-draw 1.6s var(--pm-ease) 0.1s both;
}

.pm-opening__strand path + path {
  opacity: 0.6;
  animation-delay: 0.25s;
}

.pm-opening__word {
  position: relative;
  display: flex;
  color: var(--pm-ink);
  font-family: var(--font-label);
  font-size: clamp(2.75rem, 12vw, 6.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.pm-opening__word span {
  display: inline-block;
  animation: pm-rise 0.9s var(--pm-ease) both;
  animation-delay: calc(0.15s + var(--i, 0) * 0.055s);
}

@keyframes pm-rise {
  from {
    opacity: 0;
    transform: translateY(0.45em);
  }
}

@keyframes pm-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ============ ヘッダー（上に浮かぶ細長い枠） ============ */
/* 高さ0の sticky にして、ヒーローを押し下げずに重ねる */
.pm-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 0;
}

.pm-header__bar {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  min-height: 56px;
  margin-inline: auto;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  color: var(--pm-ink);
  transition: transform 0.6s var(--pm-ease);
}

/* すりガラスの面。backdrop-filter を枠そのものに付けると、中のメニュー（position: fixed）が枠の中に閉じ込められるため、疑似要素に置く */
.pm-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: rgba(255, 253, 251, 0.72);
  box-shadow: 0 10px 36px -12px rgba(45, 38, 36, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: background-color 0.4s ease;
}

.pm-header.is-solid .pm-header__bar::before {
  background: rgba(255, 253, 251, 0.9);
}

.pm-header.is-hidden .pm-header__bar {
  transform: translateY(calc(-100% - 20px));
}

.pm-header:focus-within .pm-header__bar {
  transform: none;
}

.pm-header__logo {
  margin-right: auto;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-decoration: none;
  white-space: nowrap;
}

.pm-header__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--c-btn-bg);
  color: var(--c-btn-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: translate 0.6s var(--pm-ease);
}

.pm-header__toggle {
  display: none;
}

/* スクロールした量を示す細い線 */
.pm-header__progress {
  position: absolute;
  right: 28px;
  bottom: 3px;
  left: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--pm-grad);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* スマホ・タブレット：メニューは右上のボタンで開く、画面いっぱいの面 */
@media (max-width: 1099.98px) {
  .pm-nav {
    display: none;
  }

  .pm-live .pm-header__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--pm-ink);
    color: var(--pm-ivory);
    cursor: pointer;
  }

  .pm-live .pm-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    padding: 96px 24px 56px;
    overflow-y: auto;
    background: var(--pm-grad);
    clip-path: circle(0% at calc(100% - 46px) 46px);
    visibility: hidden;
    transition: clip-path 0.7s var(--pm-ease-io), visibility 0s linear 0.7s;
  }

  .is-nav-open .pm-nav {
    clip-path: circle(150% at calc(100% - 46px) 46px);
    visibility: visible;
    transition: clip-path 0.8s var(--pm-ease-io);
  }

  .pm-nav__list {
    display: grid;
    gap: 2px;
    text-align: center;
  }

  .pm-nav__list a {
    display: inline-block;
    padding: 10px 16px;
    font-size: clamp(1.25rem, 5.6vw, 1.625rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
  }

  .pm-live .pm-nav__list li {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.4s ease, transform 0.6s var(--pm-ease);
  }

  .is-nav-open .pm-nav__list li {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.25s + var(--i, 0) * 0.06s);
  }

  .is-nav-open {
    overflow: hidden;
  }
}

/* PC：メニューは枠の中に並べる */
@media (min-width: 1100px) {
  .pm-header__bar {
    gap: 4px;
  }

  .pm-nav__list {
    display: flex;
    gap: 0;
  }

  .pm-nav__list a {
    position: relative;
    display: inline-block;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
  }

  /* 下線が左から伸び、離すと右へ抜ける */
  .pm-nav__list a::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 6px;
    left: 12px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.5s var(--pm-ease);
  }

  .pm-nav__list a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .pm-header__cta {
    margin-left: 8px;
  }
}

.pm-burger,
.pm-burger::before,
.pm-burger::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--pm-ease), background-color 0.2s ease;
}

.pm-burger {
  position: relative;
}

.pm-burger::before,
.pm-burger::after {
  content: "";
  position: absolute;
  left: 0;
}

.pm-burger::before {
  top: -6px;
}

.pm-burger::after {
  top: 6px;
}

.is-nav-open .pm-burger {
  background-color: transparent;
}

.is-nav-open .pm-burger::before {
  transform: translateY(6px) rotate(45deg);
}

.is-nav-open .pm-burger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============ 動きを止める・戻すボタン（ヘッダーの中。画面の動きをすべて止める） ============ */
.pm-motion {
  display: none;
}

.pm-live .pm-motion {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(45, 38, 36, 0.14);
  border-radius: 50%;
  background: transparent;
  color: var(--pm-ink);
  cursor: pointer;
}

.pm-motion__icon {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pm-grad);
}

/* 動いているあいだは一時停止の2本線、止めているあいだは再生の三角 */
.pm-motion__icon::before {
  content: "";
  position: absolute;
  inset: 8px 10px;
  background: linear-gradient(90deg, var(--pm-ink) 0 2px, transparent 2px 4px, var(--pm-ink) 4px 6px);
}

.is-still .pm-motion__icon::before {
  inset: 8px 8px 8px 11px;
  background: var(--pm-ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ============ 1. ヒーロー（鏡の形の枠で写真が切り替わる） ============ */
.pm .pm-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  grid-template-areas: "media" "body";
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(24px, 6vw, 44px);
  padding: 84px var(--gutter) clamp(64px, 12vw, 96px);
}

.pm .pm-hero .hero__inner {
  width: auto;
  padding: 0;
}

.pm .pm-hero .hero__body {
  align-self: center;
}

.pm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.pm-blob {
  position: absolute;
  border-radius: 50%;
}

.pm-blob--1 {
  top: -28vmax;
  right: -26vmax;
  width: 72vmax;
  height: 72vmax;
  background: radial-gradient(closest-side, var(--pm-blob-2), transparent);
  animation: pm-float 18s ease-in-out infinite alternate;
}

.pm-blob--2 {
  bottom: -32vmax;
  left: -30vmax;
  width: 64vmax;
  height: 64vmax;
  background: radial-gradient(closest-side, var(--pm-blob-1), transparent);
  animation: pm-float 22s ease-in-out -6s infinite alternate-reverse;
}

@keyframes pm-float {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(4vmax, 3vmax, 0) scale(1.08);
  }
}

/* 髪の束のような2本の線。ヒーローの奥を横切る */
.pm-strand {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.pm-strand g {
  animation: pm-sway 9s ease-in-out infinite alternate;
}

.pm-strand path:first-child {
  stroke: var(--pm-deco-2);
}

.pm-strand path:last-child {
  stroke: var(--pm-deco-1);
}

@keyframes pm-sway {
  from {
    transform: translateY(-10px);
  }

  to {
    transform: translateY(12px);
  }
}

/* 写真の枠：上が半円の鏡の形（縦横 4:5 のとき、上の角の縦の半径は高さの40%） */
/* スマホでは枠を少し小さくし、最初の画面に屋号まで入れる */
.pm .pm-hero__frame {
  justify-self: center;
  width: min(80%, 460px);
  isolation: isolate;
  border-radius: 50% 50% var(--radius-img) var(--radius-img) / 40% 40% var(--radius-img) var(--radius-img);
  background: var(--c-ph-a);
  box-shadow: 0 40px 60px -40px rgba(45, 38, 36, 0.45);
}

@media (min-width: 560px) {
  .pm .pm-hero__frame {
    width: min(100%, 460px);
  }
}

.pm .pm-slide {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.6s ease, transform 0s linear 1.7s;
}

.pm .pm-slide.is-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.6s ease, transform 8s linear;
}

.pm .pm-slide.is-leaving {
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.6s ease, transform 1.6s linear;
}

/* 何枚目かの表示（動いているときだけ） */
.pm-counter {
  display: none;
}

.pm-live:not(.is-still) .pm-counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 251, 0.86);
  color: var(--pm-ink);
  font-family: var(--font-num);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: lining-nums tabular-nums;
}

.pm-counter__bar {
  overflow: hidden;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: rgba(45, 38, 36, 0.18);
}

.pm-counter__bar i {
  display: block;
  height: 100%;
  background: var(--pm-ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.pm-counter__bar.is-run i {
  animation: pm-bar var(--pm-slide) linear both;
}

@keyframes pm-bar {
  to {
    transform: scaleX(1);
  }
}

.pm .pm-hero .hero__card {
  max-width: 36rem;
}

.pm .pm-hero .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.pm .pm-hero .hero__eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: 1px;
  background: currentColor;
}

.pm .pm-hero .hero__title {
  margin-top: 0.2em;
  line-height: 1.15;
}

.pm-chars {
  display: inline-flex;
}

.pm-chars > span {
  display: inline-block;
}

.pm .pm-hero .hero__lead {
  margin-top: 1.1em;
  font-size: clamp(1rem, 3.6vw, 1.1875rem);
  line-height: 2;
}

/* スクロールの合図（PCだけ） */
.pm-scroll {
  display: none;
}

/* 開いたときの演出：幕が上がると、枠の中の色がめくれて写真が現れ、屋号の文字が1字ずつ上がる */
.is-opening .pm-hero__frame::after {
  z-index: 3;
  background: var(--pm-grad);
  transform-origin: top center;
  animation: pm-uncover 1.5s var(--pm-ease-io) both;
  animation-delay: calc(var(--pm-t0) - 0.25s);
}

@keyframes pm-uncover {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0);
  }
}

.is-opening .pm-slide.is-active {
  animation: pm-zoom-in 3.2s var(--pm-ease) both;
  animation-delay: calc(var(--pm-t0) - 0.25s);
}

@keyframes pm-zoom-in {
  from {
    transform: scale(1.25);
  }

  to {
    transform: scale(1);
  }
}

.is-opening .pm-intro {
  animation: pm-up 1.1s var(--pm-ease) both;
  animation-delay: calc(var(--pm-t0) + var(--i, 0) * 0.1s);
}

@keyframes pm-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.is-opening .pm-chars > span {
  animation: pm-char 1.2s var(--pm-ease) both;
  animation-delay: calc(var(--pm-t0) + 0.15s + var(--i, 0) * 0.08s);
}

@keyframes pm-char {
  from {
    opacity: 0;
    transform: translateY(0.6em) rotate(8deg);
    filter: blur(8px);
  }
}

.is-opening .pm-strand path {
  stroke-dasharray: 1;
  animation: pm-draw 2.6s var(--pm-ease) both;
  animation-delay: calc(var(--pm-t0) + 0.1s);
}

@media (min-width: 900px) {
  .pm .pm-hero {
    grid-template-areas: "body media";
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    column-gap: clamp(32px, 5vw, 88px);
    min-height: min(100svh, 940px);
    padding: 112px max(var(--gutter), calc((100% - 1200px) / 2)) 96px;
  }

  .pm .pm-hero__frame {
    width: min(100%, 480px);
  }

  .pm-live .pm-scroll {
    position: absolute;
    bottom: 32px;
    left: max(var(--gutter), calc((100% - 1200px) / 2));
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--c-muted);
    font-family: var(--font-label);
    font-size: 1rem;
    font-style: italic;
    letter-spacing: 0.1em;
  }

  .pm-scroll::after {
    content: "";
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%) 0 0 / 200% 100% no-repeat;
    animation: pm-scrollline 2.4s var(--pm-ease-io) infinite;
  }
}

@keyframes pm-scrollline {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

/* ============ ボタン（押す前に色が左から満ち、矢印が入れ替わる） ============ */
.pm .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-areas: "icon label arrow" "icon sub arrow";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: 0 12px;
  min-height: 60px;
  padding: 10px 10px 10px 22px;
  text-align: left;
  transition: color 0.5s var(--pm-ease), border-color 0.5s var(--pm-ease), transform 0.3s ease, translate 0.6s var(--pm-ease);
}

.pm .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pm-btn-fill);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s var(--pm-ease-io);
}

.pm .btn__icon {
  grid-area: icon;
}

.pm .btn__label {
  grid-area: label;
}

.pm .btn__sub {
  grid-area: sub;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.pm-btn__arrow {
  position: relative;
  grid-area: arrow;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.pm-btn__arrow::before,
.pm-btn__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 13px;
  height: 13px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--pm-arrow) center / contain no-repeat;
  mask: var(--pm-arrow) center / contain no-repeat;
  transition: transform 0.6s var(--pm-ease-io);
}

.pm-btn__arrow::after {
  transform: translateX(-250%);
}

@media (hover: hover) {
  .pm .btn:hover {
    border-color: transparent;
    color: var(--pm-ink);
    filter: none;
  }

  .pm .btn:hover::before {
    clip-path: inset(0 0 0 0);
  }

  .pm .btn:hover .pm-btn__arrow::before {
    transform: translateX(250%);
  }

  .pm .btn:hover .pm-btn__arrow::after {
    transform: translateX(0);
  }
}

/* ============ 2・9. 連絡ボタン ============ */
.pm .cta--top {
  padding-block: 8px clamp(72px, 11vw, 112px);
}

.pm .cta__lead {
  font-weight: 500;
}

.pm .cta__buttons {
  grid-template-columns: minmax(0, 24rem);
  gap: 14px;
  margin-top: 22px;
}

.pm .cta__note {
  color: var(--c-muted);
}

@media (min-width: 640px) {
  .pm .cta__buttons {
    grid-template-columns: repeat(2, minmax(0, 20rem));
  }
}

.pm .cta--bottom {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(120px, 18vw, 200px) clamp(96px, 13vw, 136px);
  background: var(--pm-grad);
  --c-focus: var(--pm-ink);
  --pm-btn-fill: var(--pm-ivory);
}

.pm .cta--bottom .cta__lead {
  font-size: clamp(1.25rem, 4.4vw, 1.625rem);
  font-weight: 500;
}

.pm .cta--bottom .cta__note {
  color: var(--pm-ink);
}

/* ============ 3〜8. 見出し（大きな英字は横に流れ、見出しは左から現れる） ============ */
.pm .section__head {
  position: relative;
  margin-bottom: clamp(40px, 7vw, 72px);
}

.pm .section__label {
  margin-bottom: 0.05em;
  line-height: 0.95;
  white-space: nowrap;
}

.pm .section__title {
  max-width: 30em;
}

/* ============ 3. 何をしているのか ============ */
.pm .about {
  overflow: clip;
}

.pm-blob--about {
  top: 8%;
  right: -22vmax;
  z-index: -1;
  width: 54vmax;
  height: 54vmax;
  background: radial-gradient(closest-side, var(--pm-blob-2), transparent);
  animation: pm-float 20s ease-in-out infinite alternate;
}

.pm .about__intro {
  gap: clamp(48px, 8vw, 96px);
}

.pm-about__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
}

.pm .about__media {
  isolation: isolate;
  border-radius: 50% 50% var(--radius-img) var(--radius-img) / 40% 40% var(--radius-img) var(--radius-img);
  box-shadow: 0 40px 60px -40px rgba(45, 38, 36, 0.45);
}

.pm-live:not(.is-still) [data-parallax-img] {
  transform: scale(1.18);
}

/* 丸い写真（飾り。同じ写真は「仕上がりの写真」にもある） */
.pm-bubble {
  position: absolute;
  bottom: -6%;
  left: -6%;
  width: 40%;
  aspect-ratio: 1;
}

.pm-bubble__img {
  display: block;
  width: 100%;
  height: 100%;
  border: 6px solid var(--c-bg);
  border-radius: 50%;
  background: center / cover no-repeat;
  box-shadow: 0 24px 40px -24px rgba(45, 38, 36, 0.5);
  animation: pm-bob 7s ease-in-out infinite alternate;
}

@keyframes pm-bob {
  from {
    transform: translateY(-5%) rotate(-3deg);
  }

  to {
    transform: translateY(5%) rotate(3deg);
  }
}

.pm .about__sign {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.pm .about__sign::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.pm .points {
  gap: 16px;
  margin-top: clamp(64px, 10vw, 112px);
}

.pm .point {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 32px);
  box-shadow: 0 24px 48px -36px rgba(45, 38, 36, 0.4);
}

/* 上の辺の線が、出てくるときに左から引かれる */
.pm .point::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--pm-grad);
  transform-origin: left center;
  transition: transform 1.2s var(--pm-ease-io);
  transition-delay: calc(var(--i, 0) * 0.09s + 0.35s);
}

.pm-live:not(.is-still) .point:not(.is-in)::before {
  transform: scaleX(0);
}

.pm .point__num {
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

@media (hover: hover) {
  .pm .point::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--pm-grad);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .pm .point:hover::after {
    opacity: 1;
  }
}

/* ============ 流れる英字の帯（飾り） ============ */
.pm-marquee {
  overflow: hidden;
  padding-block: clamp(8px, 2vw, 20px);
  color: var(--pm-ink);
  pointer-events: none;
  user-select: none;
}

/* 次の帯（料金）の波がかぶらないよう、下を波の高さだけ空ける */
.pm-marquee--band {
  padding-bottom: calc(clamp(28px, 5vw, 64px) + 16px);
}

.pm-marquee__row {
  display: flex;
  width: max-content;
}

.pm-marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  animation: pm-marquee 60s linear infinite;
}

.pm-marquee__row--rev .pm-marquee__track {
  animation-duration: 72s;
  animation-direction: reverse;
}

.pm-marquee__track span {
  padding-inline: 0.3em;
  font-family: var(--font-label);
  font-size: clamp(3.5rem, 13vw, 8.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
}

.pm-marquee__track span:nth-of-type(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--pm-ink);
}

.pm-marquee__track i {
  flex: none;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--pm-grad);
  font-size: clamp(3.5rem, 13vw, 8.5rem);
}

@keyframes pm-marquee {
  to {
    transform: translateX(-100%);
  }
}

.pm-marquee--cta {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: -1;
  color: rgba(255, 253, 251, 0.5);
  transform: translateY(-50%);
}

.pm-marquee--cta .pm-marquee__track span,
.pm-marquee--cta .pm-marquee__track i {
  font-size: clamp(5rem, 22vw, 14rem);
}

.pm-marquee--cta .pm-marquee__track span:nth-of-type(even) {
  -webkit-text-stroke-color: rgba(255, 253, 251, 0.9);
}

/* ============ 帯の境目の波（ゆっくり横に流れる） ============ */
.pm-wave {
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: clamp(28px, 5vw, 64px);
  overflow: hidden;
  color: var(--s-bg);
  pointer-events: none;
}

.pm-wave svg {
  display: block;
  width: 200%;
  height: 100%;
  fill: currentColor;
  animation: pm-wave 30s linear infinite;
}

.pm-wave--rev svg {
  animation-direction: reverse;
  animation-duration: 36s;
}

@keyframes pm-wave {
  to {
    transform: translateX(-50%);
  }
}

/* 下の連絡帯の上に、営業時間の帯の色の波を垂らす */
.pm-wave--hang {
  top: -1px;
  bottom: auto;
  color: var(--contact-bg, var(--c-band));
  transform: scaleY(-1);
}

/* ============ 4. サービスと料金 ============ */
.pm .menu__list {
  gap: 0 clamp(32px, 5vw, 64px);
}

.pm .menu-item {
  position: relative;
  padding: 22px 4px;
  border-bottom: 0;
}

/* 下の線は、出てくるときに左から引かれる */
.pm .menu-item::after,
.pm .news-item::after,
.pm .info__row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--s-line);
  transform-origin: left center;
  transition: transform 1.2s var(--pm-ease-io);
  transition-delay: calc(var(--i, 0) * 0.09s + 0.2s);
}

.pm-live:not(.is-still) .menu-item:not(.is-in)::after,
.pm-live:not(.is-still) .news-item:not(.is-in)::after,
.pm-live:not(.is-still) .info__row:not(.is-in)::after {
  transform: scaleX(0);
}

.pm .menu-item__name {
  font-weight: 500;
}

.pm .menu-item__price {
  letter-spacing: 0.02em;
}

.pm .menu-item__price small {
  font-family: var(--font-body);
}

@media (hover: hover) {
  .pm .menu-item::before {
    content: "";
    position: absolute;
    inset: 6px -14px;
    z-index: -1;
    border-radius: 16px;
    background: rgba(255, 253, 251, 0.75);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.4s ease, transform 0.5s var(--pm-ease);
  }

  .pm .menu-item:hover::before {
    opacity: 1;
    transform: none;
  }
}

/* ============ 5. 実績・仕事の写真（ココアの帯で、横に動かす） ============ */
.pm .works .section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 24px;
}

.pm .works .section__label,
.pm .works .section__title {
  grid-column: 1;
}

.pm .works :focus-visible {
  outline-color: var(--pm-focus-dark);
}

.pm-works__nav {
  display: none;
}

.pm-live .pm-works__nav {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  gap: 10px;
}

.pm-arrow {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(247, 243, 239, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--pm-ivory);
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, opacity 0.3s ease;
}

.pm-arrow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.pm-arrow--prev svg {
  transform: scaleX(-1);
}

.pm-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (hover: hover) {
  .pm-arrow:hover:not(:disabled) {
    border-color: var(--pm-ivory);
    background: var(--pm-ivory);
    color: var(--pm-ink);
  }
}

.pm .pm-works__track {
  position: relative;
  display: flex;
  gap: clamp(14px, 2.4vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px max(var(--gutter), calc((100% - var(--container)) / 2)) 8px;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  counter-reset: work;
}

.pm .pm-works__track::-webkit-scrollbar {
  display: none;
}

/* 最後の写真の右にも、左と同じ余白を残す */
.pm .pm-works__track::after {
  content: "";
  flex: 0 0 1px;
}

.pm-live .pm-works__track {
  cursor: grab;
}

.pm .pm-works__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.pm .pm-works__track .work {
  flex: 0 0 clamp(248px, 72vw, 400px);
  scroll-snap-align: start;
}

.pm .pm-works__track .work__media {
  aspect-ratio: 1;
}

.pm .pm-works__track img {
  -webkit-user-drag: none;
  transition: transform 1.2s var(--pm-ease);
}

@media (hover: hover) {
  .pm .pm-works__track .work:hover img {
    transform: scale(1.06);
  }
}

.pm .pm-works__track figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.pm .pm-works__track figcaption::before {
  content: counter(work, decimal-leading-zero);
  counter-increment: work;
  flex: none;
  color: var(--s-accent);
  font-family: var(--font-num);
  font-size: 1.0625rem;
  font-style: italic;
}

.pm-works__bar {
  display: none;
}

.pm-live .pm-works__bar {
  position: relative;
  display: block;
  overflow: hidden;
  height: 2px;
  margin-top: clamp(28px, 4vw, 44px);
  border-radius: 2px;
  background: rgba(247, 243, 239, 0.2);
}

.pm-works__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--w, 0.3) * 100%);
  background: var(--pm-grad);
  transform: translateX(calc(var(--x, 0) * (100% / var(--w, 0.3) - 100%)));
}

/* ============ 6. お知らせ ============ */
.pm .news__list {
  border-top: 0;
}

.pm .news-item {
  position: relative;
  padding: 24px 0;
  border-bottom: 0;
}

.pm .news-item__date {
  font-size: 1.0625rem;
  font-style: italic;
  letter-spacing: 0.04em;
}

.pm .news-item__tag {
  border-color: var(--c-accent-deco);
}

/* ============ 7. 地図・行き方 ============ */
.pm .access__body {
  gap: clamp(32px, 5vw, 56px);
}

.pm .map-ph {
  box-shadow: 0 30px 50px -40px rgba(45, 38, 36, 0.45);
}

.pm .map-ph__pin {
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s, opacity 0.4s ease 0.4s;
}

/* ピンは、地図が出てきたあとに上から落ちてくる */
.pm-live:not(.is-still) .map-ph:not(.is-in) .map-ph__pin {
  opacity: 0;
  transform: translate(-50%, -300%) rotate(-45deg);
}

/* ピンの先から広がる輪 */
.pm-ripple {
  position: absolute;
  top: calc(44% + 18px);
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}

.pm-ripple::before,
.pm-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-map-pin);
  border-radius: 50%;
  animation: pm-ripple 3s var(--pm-ease) infinite;
}

.pm-ripple::after {
  animation-delay: 1.5s;
}

@keyframes pm-ripple {
  from {
    opacity: 0.8;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(5);
  }
}

.pm .access__list li::before {
  background: var(--pm-grad);
}

/* ============ 8. 営業時間・連絡先 ============ */
.pm .info {
  max-width: 48rem;
  border-top: 0;
}

.pm .info__row {
  position: relative;
  padding: 18px 0;
  border-bottom: 0;
}

.pm .info__row dt {
  color: var(--s-accent);
  font-weight: 500;
}

/* ============ フッター ============ */
.pm .site-footer {
  padding: 64px var(--gutter) 72px;
}

.pm .footer__name {
  font-size: 1.375rem;
  letter-spacing: 0.22em;
}

/* ============ マウスを追う円（マウスのときだけ） ============ */
.pm-cursor {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .pm-live:not(.is-still) .pm-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    display: block;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: opacity 0.3s ease;
  }

  .pm-cursor.is-visible {
    opacity: 1;
  }

  .pm-cursor::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.45s var(--pm-ease);
  }

  .pm-cursor.is-link::before {
    transform: scale(3.6);
  }

  .pm-live:not(.is-still) .pm-cursor.is-drag {
    mix-blend-mode: normal;
  }

  .pm-cursor.is-drag::before {
    background: var(--pm-grad);
    transform: scale(7);
  }

  .pm-cursor__label {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--pm-ink);
    font-family: var(--font-label);
    font-size: 1.0625rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity 0.3s ease, transform 0.45s var(--pm-ease);
  }

  .pm-cursor.is-drag .pm-cursor__label {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ============ スクロールで出す（premium.js が .is-in を付ける） ============ */
.pm-live:not(.is-still) [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 1s var(--pm-ease), transform 1.2s var(--pm-ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}

.pm-live:not(.is-still) [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* 見出しは、左から右へ幕を引くように現れる */
.pm-live:not(.is-still) [data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 1.3s var(--pm-ease-io);
}

.pm-live:not(.is-still) [data-reveal="wipe"].is-in {
  clip-path: inset(-20% -4% -20% 0);
}

/* 写真の枠は、中の色が上へめくれて写真が現れる（枠と影は先に見えている） */
.pm [data-reveal="frame"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pm-grad);
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.4s var(--pm-ease-io) 0.1s;
}

.pm-live:not(.is-still) [data-reveal="frame"] {
  opacity: 1;
  transform: none;
}

.pm-live:not(.is-still) [data-reveal="frame"]:not(.is-in)::after {
  transform: scaleY(1);
}

/* ============ 動きを止めているとき ============ */
.is-still {
  scroll-behavior: auto;
}

.is-still .pm-blob,
.is-still .pm-strand g,
.is-still .pm-bubble__img,
.is-still .pm-marquee__track,
.is-still .pm-wave svg,
.is-still .pm-scroll::after {
  animation-play-state: paused;
}

.is-still .pm-ripple {
  display: none;
}

.is-still .pm-slide,
.is-still .pm-slide.is-active,
.is-still .pm-slide.is-leaving {
  transform: none;
  transition: none;
}

.is-still .pm-slide.is-leaving {
  opacity: 0;
}

/* メニューの開閉・ボタンの色も、動かさずに切り替える */
.is-still .pm-nav,
.is-still .pm-nav__list li,
.is-still .pm-header__bar,
.is-still .btn,
.is-still .btn::before,
.is-still .pm-btn__arrow::before,
.is-still .pm-btn__arrow::after {
  transition: none;
}