@charset "UTF-8";

/* ==============================
   p-flow-lead / p-flow-point
   撮影・レンタルまでの流れ：リードと3つのポイント
   ============================== */
.p-flow-point { gap: 10px; }
.p-flow-point__title { font-size: 17px; }
@media (min-width: 768px) {
  .p-flow-lead__title { font-size: 30px; }
}

/* ==============================
   p-flow-step
   撮影・レンタルまでの流れ：STEP 01〜06（縦のタイムライン）
   ============================== */
.p-flow-steps { max-width: 960px; margin: 0 auto; }
.p-flow-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 16px; overflow: hidden; } /* 縦線をはみ出させない */
.p-flow-step__no {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font: 600 20px/1 var(--font-en);
}
.p-flow-step__label { font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }
/* 番号の下の縦線（最後のSTEPは無し） */
.p-flow-step:not(:last-child) .p-flow-step__no::after {
  content: "";
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: 1px;
  height: 2000px;
  background: #D8C9BC;
}
.p-flow-step__main { padding: 4px 0 36px; }
.p-flow-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.p-flow-step__title { font: 700 18px var(--font-mincho); letter-spacing: .05em; }
.p-flow-step__sub { font-size: 12px; letter-spacing: .06em; color: var(--color-beige); }
.p-flow-step__card { display: grid; margin-top: 14px; border: 1px solid var(--color-line); background: var(--color-bg-white); }
.p-flow-step__img { position: relative; min-height: 140px; background: #EDE4DB; }
.p-flow-step__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-flow-step__body { min-width: 0; padding: 18px 20px; }
.p-flow-step__desc { font-size: 13.5px; line-height: 2; color: var(--color-text-sub); }
.p-flow-step__note { margin-top: 10px; font-size: 12.5px; line-height: 1.8; color: var(--color-beige); }
@media (min-width: 768px) {
  .p-flow-step { grid-template-columns: 64px minmax(0, 1fr); gap: 0 24px; }
  .p-flow-step__no { width: 64px; height: 64px; font-size: 24px; }
  .p-flow-step__label { font-size: 9px; }
  .p-flow-step__main { padding: 6px 0 40px; }
  .p-flow-step__title { font-size: 21px; }
  .p-flow-step__card { grid-template-columns: 240px minmax(0, 1fr); margin-top: 16px; }
  .p-flow-step__img { min-height: 160px; }
  .p-flow-step__body { padding: 22px 26px; }
}

/* ==============================
   p-flow-link
   撮影・レンタルまでの流れ：プラン・料金ページへのリンク
   ============================== */
.p-flow-links { display: grid; gap: 16px; }
.p-flow-link { display: flex; flex-direction: column; border: 1px solid var(--color-line); background: var(--color-bg-white); color: var(--color-text); transition: border-color .2s; }
.p-flow-link:hover { border-color: var(--color-accent); color: var(--color-text); }
.p-flow-link__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-alt); }
.p-flow-link__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.p-flow-link:hover .p-flow-link__img img { transform: scale(1.04); }
.p-flow-link__text { display: flex; align-items: center; gap: 10px; padding: 20px 22px; }
.p-flow-link__text::after { content: "→"; margin-left: auto; font-weight: 700; color: var(--color-accent); }
.p-flow-link__name { font: 700 17px var(--font-mincho); }
.p-flow-link__sub { font-size: 12px; color: var(--color-beige); }
@media (min-width: 768px) {
  .p-flow-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}