/**
 * Flow page
 */

.page--flow {
  overflow-x: clip;
}

.page--flow .flow-intro.sub-kv {
  overflow: visible;
  background: transparent;
}

.flow-intro,
.flow-step {
  position: relative;
  z-index: 1;
}

.flow-intro {
  padding: calc(40px + 86px + clamp(1rem, 2.5vw, 1.5rem)) var(--space-md)
    clamp(8rem, 16vw, 15rem);
}

.flow-intro__inner {
  position: relative;
  display: flex;
  flex-direction: column;
}

.flow-intro__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 720px);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.flow-intro__content {
  min-width: 0;
}

.flow-intro__catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-section-size);
  line-height: 1.44;
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  text-align: center;
}

.flow-intro__catch-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  text-align: center;
}

.js .flow-intro__catch-line {
  opacity: 0;
  animation: ichigo-kv-fade-in 1.1s var(--motion-ease-in-out) both;
}

.js .flow-intro__catch-line:nth-child(1) {
  animation-delay: 0.15s;
}

.js .flow-intro__catch-line:nth-child(2) {
  animation-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .js .flow-intro__catch-line {
    animation: none;
    opacity: 1;
  }
}

@media (min-width: 961px) {
  .flow-intro__lead {
    --flow-intro-column-gap: clamp(2rem, 4vw, 3.5rem);
    --flow-intro-visual-edge-gap: clamp(
      36px,
      (100vw - var(--container-width)) / 2,
      (1440px - var(--container-width)) / 2
    );
    column-gap: var(--flow-intro-column-gap);
  }

  .flow-intro__catch-line:last-child {
    white-space: nowrap;
  }

  .flow-intro__visual {
    justify-self: end;
    width: min(720px, 100%);
    margin-right: calc(-1 * var(--flow-intro-visual-edge-gap));
  }

  .flow-intro__frame {
    width: 100%;
    margin-inline: 0;
  }

  .flow-intro__frame .framed-image__photo {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: 0;
  }
}

.flow-intro__body {
  max-width: 40rem;
  margin-top: clamp(1.25rem, 2.5vw, 3rem);
}

.flow-intro__text {
  margin: 0;
  font-size: var(--page-body-size);
  line-height: var(--page-body-lh);
  letter-spacing: var(--tracking-body);
}

.flow-intro__visual {
  position: relative;
}

.flow-intro__frame {
  width: min(100%, 783px);
  margin-left: auto;
  margin-right: 0;
}

.flow-step {
  padding: 0;
  overflow-x: clip;
}

.flow-step__inner {
  width: 100%;
}

.flow-step__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.flow-step__item {
  position: relative;
  padding-block: clamp(1.5rem, 3vw, 3rem);
  --flow-step-column-gap: clamp(1.5rem, 3vw, 2.5rem);
  --flow-step-body-edge-gap: 36px;
}

.flow-step__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

/* 各ステップの斜め水彩帯（画像下のレイヤーではなくセクション背景） */
.flow-step__item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 100vw;
  max-width: none;
  aspect-ratio: 1440 / 845;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.flow-step__item--image-left::before {
  background-image: url("../images/flow/bg_flow_R.png");
}

.flow-step__item--image-right::before {
  background-image: url("../images/flow/bg_flow_L.png");
}

.flow-step__visual,
.flow-step__body {
  position: relative;
}

.flow-step__visual {
  width: min(100%, 787px);
  max-width: 787px;
}

.flow-step__frame {
  width: 100%;
  max-width: 787px;
}

/* TOP と違い、写真下の水彩レイヤーは出さない */
.flow-step__frame .framed-image__layer {
  display: none;
}

.flow-step__body {
  margin-top: clamp(1.25rem, 4vw, 2rem);
}

.flow-step__panel {
  position: relative;
  margin-inline: 0;
  padding-block: clamp(1.5rem, 2vw, 2rem);
  padding-inline: 0;
  text-align: center;
}

.flow-step__eyebrow {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-body-size);
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  opacity: 0.6;
}

.flow-step__name {
  margin: 0.45em 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.45;
  letter-spacing: 0.09em;
  color: var(--color-text);
  text-align: center;
}

.flow-step__item:last-child .flow-step__name {
  color: var(--color-accent);
}

.flow-step__text {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-base);
  font-size: var(--text-body-size);
  line-height: 2.5;
  letter-spacing: var(--tracking-body);
  color: var(--color-text);
  text-align: left;
}

.js .flow-intro__frame:not(.is-layer-visible) .framed-image__layer {
  opacity: 0;
}

.js
  .flow-intro__frame.framed-image--peek-bottom-left:not(.is-layer-visible)
  .framed-image__layer {
  transform: translate(2%, 1%) scale(0.96);
}

.js .flow-intro__frame:not(.is-layer-visible) .framed-image__photo,
.js
  .flow-step__item--image-left
  .flow-step__frame:not(.is-layer-visible)
  .framed-image__photo {
  opacity: 0;
  transform: translateX(var(--motion-slide-offset, 4%));
}

.js
  .flow-step__item--image-right
  .flow-step__frame:not(.is-layer-visible)
  .framed-image__photo {
  opacity: 0;
  transform: translateX(calc(-1 * var(--motion-slide-offset, 4%)));
}

.js .flow-intro__frame.is-layer-visible .framed-image__photo,
.js
  .flow-step__item--image-left
  .flow-step__frame.is-layer-visible
  .framed-image__photo {
  animation: ichigo-step-photo-slide-right 0.65s var(--motion-ease-out) 0s both;
}

.js
  .flow-step__item--image-right
  .flow-step__frame.is-layer-visible
  .framed-image__photo {
  animation: ichigo-step-photo-slide-left 0.65s var(--motion-ease-out) 0s both;
}

.js .flow-intro__frame.is-layer-visible .framed-image__layer--back {
  animation: ichigo-step-layer-extend 0.52s var(--motion-ease-out) 0.18s both;
  --layer-stack-x: -8%;
  --layer-stack-y: 10%;
  --layer-stack-opacity: var(--framed-image-layer-back-opacity);
  --layer-start-x: 2%;
  --layer-start-y: -1%;
}

.js .flow-intro__frame.is-layer-visible .framed-image__layer--mid {
  animation: ichigo-step-layer-extend-mid 0.46s var(--motion-ease-out) 0.28s
    both;
  --layer-stack-x: -4%;
  --layer-stack-y: 5%;
  --layer-stack-opacity: var(--framed-image-layer-mid-opacity);
  --layer-start-x: 1%;
  --layer-start-y: -0.5%;
}

@keyframes ichigo-step-photo-slide-left {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--motion-slide-offset, 4%)));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ichigo-step-photo-slide-right {
  from {
    opacity: 0;
    transform: translateX(var(--motion-slide-offset, 4%));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ichigo-step-layer-extend {
  0% {
    opacity: 0;
    transform: translate(var(--layer-start-x, 0), var(--layer-start-y, 0))
      scale(0.96);
  }

  100% {
    opacity: var(
      --layer-stack-opacity,
      var(--framed-image-layer-back-opacity, 0.58)
    );
    transform: translate(var(--layer-stack-x, -8%), var(--layer-stack-y, -10%))
      scale(1);
  }
}

@keyframes ichigo-step-layer-extend-mid {
  0% {
    opacity: 0;
    transform: translate(var(--layer-start-x, 0), var(--layer-start-y, 0))
      scale(0.97);
  }

  100% {
    opacity: var(
      --layer-stack-opacity,
      var(--framed-image-layer-mid-opacity, 0.68)
    );
    transform: translate(var(--layer-stack-x, -4%), var(--layer-stack-y, -5%))
      scale(1);
  }
}

@media (max-width: 1200px) {
  .flow-intro__lead {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }

  .flow-intro__visual {
    order: -1;
  }

  .flow-intro__content {
    max-width: none;
  }

  .flow-intro__visual {
    max-width: 820px;
    margin-inline: auto;
    margin-right: auto;
  }

  .flow-intro__frame {
    margin-inline: auto;
  }

  .flow-intro__frame .framed-image__photo {
    margin-inline: auto;
  }
}

@media (min-width: 961px) {
  .flow-step__content {
    flex-direction: row;
    align-items: center;
    column-gap: var(--flow-step-column-gap);
  }

  /* DOM は visual → body。画像右配置のときだけ反転 */
  .flow-step__item--image-right .flow-step__content {
    flex-direction: row-reverse;
  }

  .flow-step__visual {
    flex: 0 0 auto;
    width: min(787px, 55%);
    max-width: 787px;
  }

  .flow-step__body {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
  }

  .flow-step__panel {
    padding-block: clamp(1.5rem, 2vw, 2rem);
    padding-inline: 0;
  }

  .flow-step__item--image-right .flow-step__body {
    padding-left: var(--flow-step-body-edge-gap);
  }

  .flow-step__item--image-left .flow-step__body {
    padding-right: var(--flow-step-body-edge-gap);
  }
}

@media (max-width: 960px) {
  .page--flow::before {
    background-size: auto 980px;
  }

  .flow-intro {
    padding: calc(16px + 71px + 1rem) var(--space-md) clamp(3rem, 8vw, 5rem);
  }

  .flow-intro__lead {
    gap: clamp(1.25rem, 4vw, 2rem);
  }

  .flow-intro__visual {
    width: calc(100% + var(--space-md));
    max-width: none;
    margin-right: calc(-1 * var(--space-md));
    margin-left: 0;
  }

  .flow-intro__frame {
    width: 86%;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
  }

  .flow-intro__frame .framed-image__photo {
    margin-left: auto;
    margin-right: 0;
  }

  .flow-intro__catch {
    gap: 0;
    margin-top: clamp(1rem, 3.5vw, 1.75rem);
    font-size: var(--page-heading-sp-size);
    line-height: 1.35;
  }

  .flow-intro__body {
    margin-top: clamp(1rem, 3vw, 1.5rem);
  }

  .flow-intro__text {
    font-size: 14px;
    line-height: 2.1;
  }

  .flow-step__visual {
    width: min(100%, 787px);
    max-width: 787px;
    margin-inline: auto;
  }

  .flow-step__frame {
    width: 100%;
    max-width: 787px;
  }

  .flow-step__item {
    padding-block: clamp(1rem, 4vw, 2rem);
  }

  .flow-step__body {
    margin-top: 0;
  }

  .flow-step__item::before {
    width: 130vw;
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    top: 50%;
    background-size: cover;
    background-position: center;
  }

  .flow-step__panel {
    padding-inline: var(--space-md);
  }

  .flow-step__name {
    margin: 0.3em 0;
    font-size: clamp(22px, 6.4vw, 40px);
    line-height: 1.5;
    letter-spacing: var(--tracking-heading);
  }

  .flow-step__text {
    line-height: 2.1;
  }

  .js .flow-intro__frame.is-layer-visible .framed-image__layer--back {
    --layer-stack-x: -9%;
    --layer-stack-y: 9%;
  }

  .js .flow-intro__frame.is-layer-visible .framed-image__layer--mid {
    --layer-stack-x: -4.5%;
    --layer-stack-y: 4.5%;
  }
}