/* =========================================================
   Ultra Flow
========================================================= */


/* =========================================================
   HERO
========================================================= */

.ultra-flow-hero,
.ultra-flow-hero *{
  box-sizing: border-box;
}

.ultra-flow-hero{
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 56%)
    minmax(0, 44%);

  width: 100%;
  min-height: 430px;

  overflow: hidden;

  background: #ffffff;
}

.ultra-flow-hero__media{
  position: relative;

  min-width: 0;
  min-height: 430px;

  overflow: hidden;

  background: #e9eef2;
}

.ultra-flow-hero__photo{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background-image:
    var(--ultra-flow-hero-image, none);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ultra-flow-hero__heading{
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;

  padding:
    calc(var(--ultra-header-height, 60px) + 40px)
    clamp(40px, 5vw, 76px)
    54px;

  background:
    color-mix(
      in srgb,
      var(--ultra-primary, #0c6636) 58%,
      #001625
    );

  color: #ffffff;
}

.ultra-flow-hero__heading-inner{
  width: 100%;
}

.ultra-flow-hero__en{
  margin: 0 0 12px;

  color: #ffffff;

  font-family:
    Impact,
    "Arial Narrow",
    "Helvetica Neue Condensed",
    sans-serif;

  font-size:
    clamp(40px, 4.6vw, 64px);

  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.025em;
}

.ultra-flow-hero__title{
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(16px, 1.7vw, 21px);

  font-weight: 700;
  line-height: 1.55;

  letter-spacing: 0.14em;
}


/* =========================================================
   PAGE
========================================================= */

.ultra-flow-page{
  padding-top: 72px;
  padding-bottom: 100px;
}


/* =========================================================
   INTRO
========================================================= */

.ultra-flow-intro{
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;
  margin-bottom: 68px;

  text-align: center;
}

.ultra-flow-intro__heading{
  margin: 0;

  color:
    var(--ultra-primary, #0c6636);

  font-size:
    clamp(21px, 2.6vw, 28px);

  font-weight: 800;
  line-height: 1.75;

  letter-spacing: 0.12em;
}

.ultra-flow-intro__rule{
  width:
    min(480px, 72%);

  height: 1px;

  margin:
    26px
    auto
    34px;

  background:
    color-mix(
      in srgb,
      var(--ultra-primary, #0c6636) 40%,
      #ffffff
    );
}

.ultra-flow-intro__body{
  color:
    var(--c-text, #222222);

  font-size: 14px;
  font-weight: 500;
  line-height: 2;

  letter-spacing: 0.07em;
}

.ultra-flow-intro__body p{
  margin:
    0
    0
    22px;
}

.ultra-flow-intro__body p:last-child{
  margin-bottom: 0;
}


/* =========================================================
   ROUTE
========================================================= */

.ultra-flow-route,
.ultra-flow-route *{
  box-sizing: border-box;
}

.ultra-flow-route{
  margin-bottom: 0;
}


/* =========================================================
   ROUTE GUIDE
========================================================= */

.ultra-flow-route__lead{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap:
    8px
    12px;

  width: fit-content;
  max-width: 100%;

  margin:
    0
    auto
    34px;

  padding:
    11px
    18px;

  border:
    1px solid
    color-mix(in srgb, var(--ultra-primary, #0c6636) 18%, transparent);

  border-radius: 999px;

  background:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 4%, #ffffff);

  color:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 35%, #222222);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;

  letter-spacing: 0.04em;
}

.ultra-flow-route__lead-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 24px;
  height: 24px;

  border-radius: 50%;

  background:
    var(--ultra-primary, #0c6636);

  color: #ffffff;

  font-size: 16px;
  line-height: 1;
}

.ultra-flow-route__lead > span:last-child{
  color:
    rgba(34, 34, 34, 0.58);

  font-size: 11px;
  font-weight: 500;
}


/* =========================================================
   ROUTE MAP
========================================================= */

.ultra-flow-route__map{
  position: relative;

  overflow: hidden;

  isolation: isolate;
}

.ultra-flow-route__track{
  position: absolute;

  z-index: 1;

  inset: 0;

  background:
    url('../images/flow/route-pc.svg')
    center top / 100% 100%
    no-repeat;

  pointer-events: none;
}

.ultra-flow-route__list{
  position: relative;

  z-index: auto;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none;
}


/* =========================================================
   ROUTE STEP
========================================================= */

.ultra-flow-route__step{
  position: relative;

  z-index: auto;

  --ultra-flow-step-bg:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 12%, #ffffff);

  min-height: 280px;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent;

  list-style: none;
}

.ultra-flow-route__step:nth-child(even){
  --ultra-flow-step-bg:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 7%, #ffffff);
}

.ultra-flow-route__step::before{
  content: "";

  position: absolute;

  z-index: 0;

  inset: 0;

  background:
    var(--ultra-flow-step-bg);

  pointer-events: none;

  transition:
    background-color 0.35s ease;
}

.ultra-flow-route__step + .ultra-flow-route__step{
  margin-top: 0 !important;
}


/* =========================================================
   ROUTE REVEAL
========================================================= */

.ultra-flow-route__step.ultra-reveal,
.ultra-flow-route__step.ultra-reveal.is-visible{
  opacity: 1 !important;

  transform: none !important;
}


/* =========================================================
   ROUTE STEP INNER
========================================================= */

.ultra-flow-route__inner{
  position: relative;

  z-index: 10;

  display: grid;

  grid-template-columns:
    270px
    minmax(0, 1fr)
    230px;

  align-items: center;

  gap: 32px;

  width:
    min(100%, 1040px);

  min-height: 280px;

  margin: 0 auto;

  padding:
    44px
    28px;
}


/* =========================================================
   ROUTE VISUAL
========================================================= */

.ultra-flow-route__visual{
  position: relative;

  z-index: 12;

  min-height: 190px;
}

.ultra-flow-route__scene{
  position: absolute;

  z-index: 12;

  inset: 0;

  pointer-events: none;
}

.ultra-flow-route__scene-image{
  position: absolute;

  display: block;

  width: 80%;
  max-width: 100%;
  height: auto;

  transform-origin:
    center bottom;

  transition:
    opacity 0.38s ease,
    transform 0.42s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.ultra-flow-route__scene-image--gray{
  z-index: 12;

  opacity: 1;
}

.ultra-flow-route__scene-image--color{
  z-index: 13;

  opacity: 0;
}


/* =========================================================
   ROUTE VISUAL POSITION PC
========================================================= */

.ultra-flow-route__step--01
.ultra-flow-route__scene-image{
  left: 48px;
  bottom: -12px;

  max-width: 190px;
}

.ultra-flow-route__step--02
.ultra-flow-route__scene-image{
  left: 0;
  bottom: -6px;

  max-width: 216px;
}

.ultra-flow-route__step--03
.ultra-flow-route__scene-image{
  left: 66px;
  bottom: -12px;

  max-width: 206px;
}

.ultra-flow-route__step--04
.ultra-flow-route__scene-image{
  left: 14px;
  bottom: -10px;

  max-width: 238px;
}

.ultra-flow-route__step--05
.ultra-flow-route__scene-image{
  left: 88px;
  bottom: -16px;

  max-width: 170px;
}

.ultra-flow-route__step--06
.ultra-flow-route__scene-image{
  left: 44px;
  bottom: -8px;

  max-width: 182px;
}


/* =========================================================
   ROUTE NUMBER
========================================================= */

.ultra-flow-route__number{
  position: absolute;

  z-index: 20;

  top: 8px;
  left: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  border-radius: 50%;

  background:
    rgba(74, 94, 114, 0.46);

  color: #ffffff;

  font-family:
    Impact,
    "Arial Narrow",
    "Helvetica Neue Condensed",
    sans-serif;

  font-size: 24px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.03em;

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}


/* =========================================================
   ROUTE TEXT
========================================================= */

.ultra-flow-route__content{
  position: relative;

  z-index: 20;

  min-width: 0;

  background: transparent;
}

.ultra-flow-route__en{
  position: relative;

  z-index: 21;

  margin:
    0
    0
    5px !important;

  color:
    rgba(34, 34, 34, 0.48);

  font-family:
    Impact,
    "Arial Narrow",
    "Helvetica Neue Condensed",
    sans-serif;

  font-size: 29px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.02em;

  transition:
    color 0.35s ease;
}

.ultra-flow-route__title{
  position: relative;

  z-index: 21;

  margin:
    0
    0
    13px !important;

  color: #161616;

  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;

  letter-spacing: 0.035em;
}

.ultra-flow-route__copy{
  position: relative;

  z-index: 21;

  max-width: 410px;

  margin: 0;

  color:
    rgba(34, 34, 34, 0.76);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.85;

  letter-spacing: 0.045em;
}


/* =========================================================
   ROUTE ACTIONS
========================================================= */

.ultra-flow-route__actions{
  position: relative;

  z-index: 30;

  display: flex;
  flex-direction: column;

  gap: 10px;

  width: 100%;

  background: transparent;
}

.ultra-flow-route__button{
  position: relative;

  z-index: 31;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    26px;

  align-items: center;

  gap: 10px;

  width: 100%;
  min-height: 42px;

  margin: 0;

  padding:
    6px
    8px
    6px
    18px;

  border:
    1px solid
    rgba(34, 34, 34, 0.28);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.92);

  color: #1f1f1f;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.08em;

  text-align: center;

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.ultra-flow-route__button > span:first-child{
  padding-left: 10px;
}

.ultra-flow-route__button-plus{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  border-radius: 50%;

  background:
    var(--ultra-primary, #0c6636);

  color: #ffffff;

  font-size: 16px;
  font-weight: 400;
  line-height: 1;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

.ultra-flow-route__link{
  position: relative;

  z-index: 31;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 100%;

  margin:
    2px
    0
    0;

  padding:
    4px
    8px;

  border: 0;

  background: transparent;

  color:
    var(--ultra-primary, #0c6636);

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;

  letter-spacing: 0.05em;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.ultra-flow-route__button:focus-visible,
.ultra-flow-route__link:focus-visible{
  outline:
    2px solid
    var(--ultra-primary, #0c6636);

  outline-offset: 3px;
}


/* =========================================================
   ROUTE HOVER PC
========================================================= */

@media (hover: hover) and (pointer: fine){

  .ultra-flow-route__step:hover{
    --ultra-flow-step-bg: #fff59a;
  }

  .ultra-flow-route__step:hover
  .ultra-flow-route__number{
    background: #111111;

    transform:
      scale(1.06);
  }

  .ultra-flow-route__step:hover
  .ultra-flow-route__en{
    color:
      rgba(34, 34, 34, 0.65);
  }

  .ultra-flow-route__step:hover
  .ultra-flow-route__scene-image--gray{
    opacity: 0;

    transform:
      translateY(-5px)
      scale(1.055);
  }

  .ultra-flow-route__step:hover
  .ultra-flow-route__scene-image--color{
    opacity: 1;

    transform:
      translateY(-5px)
      scale(1.055);
  }

  .ultra-flow-route__step:hover
  .ultra-flow-route__button{
    border-color:
      color-mix(in srgb, var(--ultra-primary, #0c6636) 55%, transparent);

    background: #ffffff;

    box-shadow:
      0 8px 22px
      color-mix(in srgb, var(--ultra-primary, #0c6636) 12%, transparent);
  }

  .ultra-flow-route__step:hover
  .ultra-flow-route__button-plus{
    transform:
      rotate(90deg);
  }

  .ultra-flow-route__button:hover{
    border-color:
      var(--ultra-primary, #0c6636);

    background:
      var(--ultra-primary, #0c6636);

    color: #ffffff;

    transform:
      translateY(-1px);
  }

  .ultra-flow-route__button:hover
  .ultra-flow-route__button-plus{
    background: #ffffff;

    color:
      var(--ultra-primary, #0c6636);
  }

  .ultra-flow-route__link:hover{
    opacity: 0.68;

    transform:
      translateX(2px);
  }

}


/* =========================================================
   MODAL
========================================================= */

.ultra-flow-modal{
  position: fixed;
  inset: 0;

  width: 100%;
  max-width: none;

  height: 100%;
  max-height: none;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color:
    var(--c-text, #222222);

  overflow: hidden;
}

.ultra-flow-modal::backdrop{
  background:
    rgba(0, 0, 0, 0.62);

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}

.ultra-flow-modal[open]{
  display: flex;
  align-items: center;
  justify-content: center;
}

.ultra-flow-modal__panel{
  position: relative;

  display: flex;
  flex-direction: column;

  width:
    min(
      700px,
      calc(100% - 48px)
    );

  max-height:
    min(
      88vh,
      840px
    );

  max-height:
    min(
      88dvh,
      840px
    );

  margin: auto;

  overflow: hidden;

  border-radius: 20px;

  background: #ffffff;

  box-shadow:
    0 20px 70px
    rgba(0, 0, 0, 0.26);

  animation:
    ultra-flow-modal-in
    0.28s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.ultra-flow-modal.is-closing
.ultra-flow-modal__panel{
  animation:
    ultra-flow-modal-out
    0.2s
    ease
    both;
}


/* =========================================================
   MODAL PROGRESS
========================================================= */

.ultra-flow-modal__progress{
  flex: 0 0 auto;

  padding:
    20px
    72px
    14px
    48px;

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.08);

  background: #ffffff;
}

.ultra-flow-modal__progress-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 10px;
}

.ultra-flow-modal__progress-meta strong{
  color:
    var(--ultra-primary, #0c6636);

  font-family:
    Impact,
    "Arial Narrow",
    "Helvetica Neue Condensed",
    sans-serif;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.045em;
}

.ultra-flow-modal__progress-meta span{
  color:
    rgba(34, 34, 34, 0.55);

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.ultra-flow-modal__progress-dots{
  display: flex;
  align-items: center;

  gap: 7px;

  width: 100%;
}

.ultra-flow-modal__progress-dot{
  display: block;

  width: 7px;
  height: 7px;

  border-radius: 999px;

  background:
    rgba(34, 34, 34, 0.16);

  transition:
    width 0.22s ease,
    background-color 0.22s ease;
}

.ultra-flow-modal__progress-dot.is-active{
  width: 23px;

  background:
    var(--ultra-primary, #0c6636);
}


/* =========================================================
   MODAL CLOSE
========================================================= */

.ultra-flow-modal__close{
  position: absolute;

  z-index: 20;

  top: 15px;
  right: 18px;

  width: 38px;
  height: 38px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #f2f2f2;

  color: #222222;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.ultra-flow-modal__close::before,
.ultra-flow-modal__close::after{
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 1.5px;

  border-radius: 999px;

  background: currentColor;
}

.ultra-flow-modal__close::before{
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

.ultra-flow-modal__close::after{
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}

.ultra-flow-modal__close:focus-visible{
  outline:
    2px solid
    var(--ultra-primary, #0c6636);

  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine){

  .ultra-flow-modal__close:hover{
    background:
      color-mix(in srgb, var(--ultra-primary, #0c6636) 8%, transparent);

    transform:
      rotate(90deg);
  }

}


/* =========================================================
   MODAL INNER
========================================================= */

.ultra-flow-modal__inner{
  flex: 1 1 auto;

  min-height: 0;

  width: 100%;

  padding:
    28px
    48px
    34px;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;
}

.ultra-flow-modal__inner.is-slide-out-next{
  animation:
    ultra-flow-content-out-next
    0.13s
    ease
    both;
}

.ultra-flow-modal__inner.is-slide-out-prev{
  animation:
    ultra-flow-content-out-prev
    0.13s
    ease
    both;
}

.ultra-flow-modal__inner.is-slide-in-next{
  animation:
    ultra-flow-content-in-next
    0.2s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.ultra-flow-modal__inner.is-slide-in-prev{
  animation:
    ultra-flow-content-in-prev
    0.2s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}


/* =========================================================
   MODAL CONTENT
========================================================= */

.ultra-flow-modal__content{
  width: 100%;
}

.ultra-flow-modal__header{
  margin:
    0
    0
    20px;

  padding:
    0
    0
    20px;

  border-bottom:
    1px solid
    color-mix(in srgb, var(--ultra-primary, #0c6636) 24%, transparent);
}

.ultra-flow-modal__step{
  display: none;
}

.ultra-flow-modal__title{
  margin: 0;

  color:
    var(--c-text, #222222);

  font-size: 25px;
  font-weight: 800;
  line-height: 1.45;

  letter-spacing: 0.055em;
}

.ultra-flow-modal__key{
  max-width: 540px;

  margin:
    10px
    0
    0 !important;

  color:
    rgba(34, 34, 34, 0.72);

  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;

  letter-spacing: 0.035em;
}


/* =========================================================
   MODAL VISUAL
========================================================= */

.ultra-flow-modal__visual{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 80%;
  max-width: 460px;

  margin:
    0
    auto
    24px;
}

.ultra-flow-modal__visual img{
  display: block;

  width: 100%;
  height: auto;

  margin: 0 auto;

  object-fit: contain;
}


/* =========================================================
   MODAL BODY
========================================================= */

.ultra-flow-modal__body{
  color:
    var(--c-text, #222222);

  font-size: 14px;
  line-height: 1.8;

  letter-spacing: 0.035em;
}

.ultra-flow-modal__body p{
  margin:
    0
    0
    14px;
}

.ultra-flow-modal__body p:last-child{
  margin-bottom: 0;
}

.ultra-flow-modal__lead{
  margin-bottom:
    20px !important;

  color:
    var(--c-text, #222222);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;

  letter-spacing: 0.035em;
}


/* =========================================================
   MODAL LABEL
========================================================= */

.ultra-flow-modal__label{
  margin:
    0
    0
    10px !important;

  color:
    var(--ultra-primary, #0c6636);

  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;

  letter-spacing: 0.07em;
}


/* =========================================================
   IMPORTANT
========================================================= */

.ultra-flow-modal__entry-check{
  margin:
    20px
    0
    22px;

  padding:
    16px
    18px;

  border-left:
    4px solid
    #e3ab00;

  border-radius:
    0
    8px
    8px
    0;

  background:
    #fff8d8;
}

.ultra-flow-modal__entry-check
.ultra-flow-modal__label{
  color: #896600;
}

.ultra-flow-modal__entry-check p{
  margin-bottom: 7px;
}

.ultra-flow-modal__entry-check p:last-child{
  margin-bottom: 0;
}

.ultra-flow-modal__entry-check strong{
  color: #2a2618;

  font-weight: 800;
  line-height: 1.7;
}


/* =========================================================
   MODAL CHECK
========================================================= */

.ultra-flow-modal__check{
  margin:
    20px
    0
    0;

  padding:
    17px
    19px;

  border-left:
    4px solid
    var(--ultra-primary, #0c6636);

  background:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 5.5%, transparent);
}

.ultra-flow-modal__check ul{
  display: flex;
  flex-wrap: wrap;

  gap:
    7px
    20px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.ultra-flow-modal__check li{
  position: relative;

  margin: 0;

  padding-left: 17px;

  font-size: 13px;
  line-height: 1.6;
}

.ultra-flow-modal__check li::before{
  content: "";

  position: absolute;

  top: 0.72em;
  left: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--ultra-primary, #0c6636);

  transform:
    translateY(-50%);
}

.ultra-flow-modal__check li strong{
  font-weight: 800;
}


/* =========================================================
   QUICK LIST
========================================================= */

.ultra-flow-modal__quick-list{
  margin:
    20px
    0
    0;

  border-top:
    1px solid
    rgba(34, 34, 34, 0.10);
}

.ultra-flow-modal__quick-item{
  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr);

  align-items: center;

  gap: 14px;

  padding:
    14px
    4px;

  border-bottom:
    1px solid
    rgba(34, 34, 34, 0.10);
}

.ultra-flow-modal__quick-number{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border-radius: 50%;

  background:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 8%, transparent);

  color:
    var(--ultra-primary, #0c6636);

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.ultra-flow-modal__quick-item strong{
  display: block;

  margin:
    0
    0
    2px;

  color:
    var(--c-text, #222222);

  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.ultra-flow-modal__quick-item p{
  margin:
    0 !important;

  color:
    rgba(34, 34, 34, 0.70);

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   SMALL NOTE
========================================================= */

.ultra-flow-modal__small-note{
  margin-top:
    17px !important;

  color:
    rgba(34, 34, 34, 0.60);

  font-size:
    11px !important;

  font-weight: 500;

  line-height:
    1.65 !important;
}


/* =========================================================
   SIMPLE FLOW
========================================================= */

.ultra-flow-modal__simple-flow{
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: center;

  gap: 14px;

  margin:
    20px
    0
    0;
}

.ultra-flow-modal__simple-flow-item{
  padding:
    15px
    14px;

  border:
    1px solid
    color-mix(in srgb, var(--ultra-primary, #0c6636) 18%, transparent);

  background:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 3.5%, transparent);

  text-align: center;
}

.ultra-flow-modal__simple-flow-label{
  display: block;

  margin-bottom: 5px;

  color:
    var(--ultra-primary, #0c6636);

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.06em;
}

.ultra-flow-modal__simple-flow-item strong{
  display: block;

  font-size: 13px;
  line-height: 1.5;
}

.ultra-flow-modal__simple-flow-arrow{
  color:
    var(--ultra-primary, #0c6636);

  font-size: 18px;
  line-height: 1;
}


/* =========================================================
   SEQUENCE
========================================================= */

.ultra-flow-modal__sequence{
  margin-top: 20px;
}

.ultra-flow-modal__sequence-list{
  display: flex;
  align-items: stretch;

  margin: 0;
  padding: 0;

  list-style: none;
}

.ultra-flow-modal__sequence-list li{
  position: relative;

  flex: 1 1 0;

  min-width: 0;

  margin: 0;

  padding:
    0
    8px;

  text-align: center;
}

.ultra-flow-modal__sequence-list
li:not(:last-child)::after{
  content: "";

  position: absolute;

  top: 14px;
  right: -7px;

  width: 14px;
  height: 1px;

  background:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 30%, transparent);
}

.ultra-flow-modal__sequence-list li span{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  margin:
    0
    auto
    8px;

  border-radius: 50%;

  background:
    var(--ultra-primary, #0c6636);

  color: #ffffff;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ultra-flow-modal__sequence-list li strong{
  display: block;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}


/* =========================================================
   MOVIE
========================================================= */

.ultra-flow-modal__movie{
  margin-top: 27px;

  padding-top: 21px;

  border-top:
    1px solid
    rgba(34, 34, 34, 0.10);
}

.ultra-flow-modal__movie-frame{
  position: relative;

  overflow: hidden;

  width: 100%;

  padding-top: 56.25%;

  border-radius: 12px;

  background: #000000;
}

.ultra-flow-modal__movie-frame iframe{
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
   MODAL ACTIONS
========================================================= */

.ultra-flow-modal__actions{
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: 100%;

  margin-top: 26px;
}

.ultra-flow-modal__actions--multiple{
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.ultra-flow-modal .ultra-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 440px;
  min-height: 48px;

  margin: 0;

  padding:
    8px
    22px;

  border-radius: 999px;

  appearance: none;
  -webkit-appearance: none;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.04em;

  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.ultra-flow-modal
.ultra-btn-primary{
  border:
    2px solid
    var(--ultra-primary, #0c6636);

  background:
    var(--ultra-primary, #0c6636);

  color: #ffffff;
}

.ultra-flow-modal
.ultra-btn-outline{
  border:
    2px solid
    var(--ultra-primary, #0c6636);

  background: #ffffff;

  color:
    var(--ultra-primary, #0c6636);
}

.ultra-flow-modal
.ultra-btn[aria-disabled="true"],
.ultra-flow-modal
button.ultra-btn:disabled{
  pointer-events: none;

  border-color: #bfbfbf;

  background: #bfbfbf;

  color: #ffffff;

  opacity: 1;
}

@media (hover: hover) and (pointer: fine){

  .ultra-flow-modal
  .ultra-btn:not(:disabled):hover{
    transform:
      translateY(-1px);
  }

  .ultra-flow-modal
  .ultra-btn-outline:not(:disabled):hover{
    background:
      var(--ultra-primary, #0c6636);

    color: #ffffff;
  }

}


/* =========================================================
   MODAL NAVIGATION
========================================================= */

.ultra-flow-modal__navigation{
  flex: 0 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  width: 100%;

  border-top:
    1px solid
    rgba(34, 34, 34, 0.09);

  background: #ffffff;
}

.ultra-flow-modal__nav-button{
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
  min-height: 68px;

  margin: 0;

  padding:
    10px
    22px;

  border: 0;

  background: #ffffff;

  color:
    var(--c-text, #222222);

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition:
    background-color 0.2s ease;
}

.ultra-flow-modal__nav-button--prev{
  align-items: flex-start;

  border-right:
    1px solid
    rgba(34, 34, 34, 0.09);

  text-align: left;
}

.ultra-flow-modal__nav-button--next{
  align-items: flex-end;

  text-align: right;
}

.ultra-flow-modal__nav-button[hidden]{
  display: none;
}

.ultra-flow-modal__nav-direction{
  display: block;

  margin-bottom: 3px;

  color:
    var(--ultra-primary, #0c6636);

  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.05em;
}

.ultra-flow-modal__nav-button strong{
  display: block;

  width: 100%;

  overflow: hidden;

  color:
    var(--c-text, #222222);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;

  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine){

  .ultra-flow-modal__nav-button:hover{
    background:
      color-mix(in srgb, var(--ultra-primary, #0c6636) 4.5%, transparent);
  }

}


/* =========================================================
   MINI TIMELINE
========================================================= */

.ultra-flow-mini-timeline{
  width: 100%;

  margin-top: 20px;
}

.ultra-flow-mini-timeline__list{
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  width: 100%;

  margin: 0;

  padding:
    18px
    0
    0;

  list-style: none;
}

.ultra-flow-mini-timeline__list::before{
  content: "";

  position: absolute;

  top: 25px;

  left: 10%;
  right: 10%;

  height: 1px;

  background:
    color-mix(in srgb, var(--ultra-primary, #0c6636) 35%, transparent);
}

.ultra-flow-mini-timeline__item{
  position: relative;

  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;

  margin: 0;

  padding:
    0
    5px;

  text-align: center;
}

.ultra-flow-mini-timeline__dot{
  display: block;

  width: 15px;
  height: 15px;

  margin:
    0
    auto
    14px;

  border:
    3px solid
    var(--ultra-primary, #0c6636);

  border-radius: 50%;

  background: #ffffff;
}

.ultra-flow-mini-timeline__time{
  display: block;

  min-height: 32px;

  margin-bottom: 4px;

  color:
    var(--ultra-primary, #0c6636);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.ultra-flow-mini-timeline__text strong{
  display: block;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}


/* =========================================================
   PACE TABLE
========================================================= */

.ultra-flow-pace-tabs .ultra-table-wrap{
  margin-top: 14px;
}

.ultra-flow-pace-tabs .ultra-table{
  min-width: 650px;
}

.ultra-flow-pace-tabs .ultra-table th,
.ultra-flow-pace-tabs .ultra-table td{
  vertical-align: middle;
}

.ultra-flow-pace-tabs .ultra-table th:first-child{
  min-width: 150px;
  white-space: normal;
}

.ultra-flow-pace-tabs .ultra-table td{
  white-space: nowrap;
}


/* =========================================================
   MOTION
========================================================= */

@keyframes ultra-flow-modal-in{

  from{
    opacity: 0;

    transform:
      translateY(14px)
      scale(0.985);
  }

  to{
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}

@keyframes ultra-flow-modal-out{

  from{
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

  to{
    opacity: 0;

    transform:
      translateY(10px)
      scale(0.99);
  }

}

@keyframes ultra-flow-content-out-next{

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

  to{
    opacity: 0;
    transform: translateX(-32px);
  }

}

@keyframes ultra-flow-content-in-next{

  from{
    opacity: 0;
    transform: translateX(32px);
  }

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

}

@keyframes ultra-flow-content-out-prev{

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

  to{
    opacity: 0;
    transform: translateX(32px);
  }

}

@keyframes ultra-flow-content-in-prev{

  from{
    opacity: 0;
    transform: translateX(-32px);
  }

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

}


/* =========================================================
   TABLET
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1024px){

  .ultra-flow-route__inner{
    grid-template-columns:
      235px
      minmax(0, 1fr)
      205px;

    gap: 22px;

    padding:
      38px
      20px;
  }

  .ultra-flow-route__title{
    font-size: 29px;
  }

  .ultra-flow-route__copy{
    font-size: 12px;
  }

}


/* =========================================================
   SP
========================================================= */

@media screen and (max-width: 767px){

  /* HERO */

  .ultra-flow-hero{
    display: block;

    min-height: 0;
  }

  .ultra-flow-hero__media{
    min-height: 0;

    height:
      clamp(
        245px,
        72vw,
        340px
      );
  }

  .ultra-flow-hero__heading{
    min-height: 170px;

    padding:
      30px
      24px
      32px;
  }

  .ultra-flow-hero__en{
    margin-bottom: 8px;

    font-size:
      clamp(
        36px,
        11.5vw,
        48px
      );
  }

  .ultra-flow-hero__title{
    font-size: 14px;
  }


  /* PAGE */

  .ultra-flow-page{
    width:
      calc(100% - 32px);

    padding-top: 46px;
    padding-bottom: 68px;
  }


  /* INTRO */

  .ultra-flow-intro{
    margin-bottom: 46px;
  }

  .ultra-flow-intro__heading{
    font-size: 18px;

    line-height: 1.8;

    letter-spacing: 0.075em;
  }

  .ultra-flow-intro__rule{
    margin:
      22px
      auto
      26px;
  }

  .ultra-flow-intro__body{
    font-size: 12px;

    line-height: 1.95;

    letter-spacing: 0.035em;
  }


  /* ROUTE GUIDE */

  .ultra-flow-route__lead{
    width: 100%;

    margin-bottom: 22px;

    padding:
      11px
      14px;

    border-radius: 18px;

    font-size: 11px;

    text-align: center;
  }

  .ultra-flow-route__lead > span:last-child{
    width: 100%;

    font-size: 10px;
  }


  /* ROUTE TRACK */

  .ultra-flow-route__track{
    z-index: 1;

    inset: 0;

    background:
      url('../images/flow/route-sp.svg')
      center top / 100% 100%
      no-repeat;
  }


  /* ROUTE STEP */

  .ultra-flow-route__step{
    min-height: auto;
  }

  .ultra-flow-route__step.ultra-reveal,
  .ultra-flow-route__step.ultra-reveal.is-visible{
    opacity: 1 !important;

    transform: none !important;
  }

  .ultra-flow-route__inner{
    z-index: 10;

    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;

    min-height: auto;

    padding:
      28px
      20px
      26px;
  }


  /* ROUTE CURRENT */

  .ultra-flow-route__step.is-current{
    --ultra-flow-step-bg: #fff59a;
  }

  .ultra-flow-route__step.is-current
  .ultra-flow-route__number{
    background: #111111;

    transform:
      scale(1.06);
  }

  .ultra-flow-route__step.is-current
  .ultra-flow-route__en{
    color:
      rgba(34, 34, 34, 0.65);
  }

  .ultra-flow-route__step.is-current
  .ultra-flow-route__scene-image--gray{
    opacity: 0;

    transform:
      translateY(-4px)
      scale(1.04);
  }

  .ultra-flow-route__step.is-current
  .ultra-flow-route__scene-image--color{
    opacity: 1;

    transform:
      translateY(-4px)
      scale(1.04);
  }


  /* ROUTE VISUAL */

  .ultra-flow-route__visual{
    z-index: 12;

    min-height: 175px;
  }

  .ultra-flow-route__number{
    z-index: 20;

    top: 0;
    left: 2px;

    width: 54px;
    height: 54px;

    font-size: 19px;
  }

  .ultra-flow-route__scene{
    position: relative;

    z-index: 12;

    min-height: 175px;
  }

  .ultra-flow-route__scene-image{
    width: 78%;
  }


  /* ROUTE VISUAL POSITION SP */

  .ultra-flow-route__step--01
  .ultra-flow-route__scene-image{
    left:
      clamp(
        88px,
        29vw,
        118px
      );

    bottom: 0;

    max-width: 170px;
  }

  .ultra-flow-route__step--02
  .ultra-flow-route__scene-image{
    left: 8px;
    bottom: 0;

    max-width: 188px;
  }

  .ultra-flow-route__step--03
  .ultra-flow-route__scene-image{
    left:
      clamp(
        78px,
        25vw,
        104px
      );

    bottom: 0;

    max-width: 174px;
  }

  .ultra-flow-route__step--04
  .ultra-flow-route__scene-image{
    left: 2px;
    bottom: 0;

    max-width: 198px;
  }

  .ultra-flow-route__step--05
  .ultra-flow-route__scene-image{
    left:
      clamp(
        118px,
        37vw,
        150px
      );

    bottom: 0;

    max-width: 152px;
  }

  .ultra-flow-route__step--06
  .ultra-flow-route__scene-image{
    left: 42px;
    bottom: 0;

    max-width: 162px;
  }


  /* ROUTE TEXT */

  .ultra-flow-route__content{
    z-index: 20;

    min-width: 0;

    padding: 0;
    margin: 0;

    background: transparent;
  }

  .ultra-flow-route__en{
    font-size: 23px;
  }

  .ultra-flow-route__title{
    margin-bottom:
      9px !important;

    font-size: 25px;
  }

  .ultra-flow-route__copy{
    max-width: none;

    font-size: 12px;

    line-height: 1.8;
  }


  /* ROUTE ACTIONS */

  .ultra-flow-route__actions{
    z-index: 30;

    gap: 8px;

    padding: 0;
    margin: 0;

    background: transparent;
  }

  .ultra-flow-route__button{
    z-index: 31;

    min-height: 42px;

    font-size: 12px;
  }


  /* PACE TABLE */

  .ultra-flow-pace-tabs .ultra-table{
    min-width: 620px;
  }


  /* MODAL */

  .ultra-flow-modal[open]{
    align-items: flex-end;
    justify-content: stretch;
  }

  .ultra-flow-modal__panel{
    width: 100%;

    max-height: 88vh;
    max-height: 88dvh;

    margin:
      auto
      0
      0;

    border-radius:
      20px
      20px
      0
      0;

    box-shadow:
      0 -12px 45px
      rgba(0, 0, 0, 0.18);

    animation:
      ultra-flow-sheet-in
      0.32s
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }

  .ultra-flow-modal__panel::before{
    content: "";

    display: block;
    flex: 0 0 auto;

    width: 42px;
    height: 4px;

    margin:
      9px
      auto
      0;

    border-radius: 999px;

    background:
      rgba(34, 34, 34, 0.18);
  }


  /* PROGRESS */

  .ultra-flow-modal__progress{
    padding:
      14px
      60px
      12px
      20px;
  }

  .ultra-flow-modal__progress-meta{
    margin-bottom: 8px;
  }

  .ultra-flow-modal__progress-meta strong{
    font-size: 14px;
  }

  .ultra-flow-modal__progress-meta span{
    font-size: 10px;
  }

  .ultra-flow-modal__progress-dots{
    gap: 6px;
  }

  .ultra-flow-modal__progress-dot{
    width: 6px;
    height: 6px;
  }

  .ultra-flow-modal__progress-dot.is-active{
    width: 20px;
  }


  /* CLOSE */

  .ultra-flow-modal__close{
    top: 20px;
    right: 14px;

    width: 34px;
    height: 34px;
  }


  /* INNER */

  .ultra-flow-modal__inner{
    padding:
      24px
      20px
      28px;
  }


  /* MODAL HEADER */

  .ultra-flow-modal__header{
    margin-bottom: 17px;

    padding-bottom: 17px;
  }

  .ultra-flow-modal__title{
    font-size: 21px;
  }

  .ultra-flow-modal__key{
    margin-top:
      8px !important;

    font-size: 12px;

    line-height: 1.75;
  }


  /* VISUAL */

  .ultra-flow-modal__visual{
    width: 80%;
    max-width: 300px;

    margin-bottom: 20px;
  }


  /* BODY */

  .ultra-flow-modal__body{
    font-size: 13px;
  }

  .ultra-flow-modal__body br{
    display: none;
  }

  .ultra-flow-modal__lead{
    margin-bottom:
      17px !important;

    font-size: 13px;
  }


  /* IMPORTANT */

  .ultra-flow-modal__entry-check{
    margin:
      17px
      0
      18px;

    padding:
      14px
      15px;
  }


  /* CHECK */

  .ultra-flow-modal__check{
    margin-top: 17px;

    padding:
      14px
      15px;
  }

  .ultra-flow-modal__check ul{
    display: block;
  }

  .ultra-flow-modal__check li{
    margin-bottom: 6px;

    font-size: 12px;
  }

  .ultra-flow-modal__check li:last-child{
    margin-bottom: 0;
  }


  /* QUICK LIST */

  .ultra-flow-modal__quick-list{
    margin-top: 16px;
  }

  .ultra-flow-modal__quick-item{
    grid-template-columns:
      32px
      minmax(0, 1fr);

    gap: 11px;

    padding:
      11px
      2px;
  }

  .ultra-flow-modal__quick-number{
    width: 28px;
    height: 28px;

    font-size: 10px;
  }

  .ultra-flow-modal__quick-item strong{
    font-size: 13px;
  }

  .ultra-flow-modal__quick-item p{
    font-size: 11px;
  }


  /* SIMPLE FLOW */

  .ultra-flow-modal__simple-flow{
    gap: 8px;

    margin-top: 17px;
  }

  .ultra-flow-modal__simple-flow-item{
    padding:
      12px
      8px;
  }

  .ultra-flow-modal__simple-flow-item strong{
    font-size: 11px;
  }


  /* SEQUENCE */

  .ultra-flow-modal__sequence{
    margin-top: 17px;

    overflow-x: auto;

    -webkit-overflow-scrolling:
      touch;
  }

  .ultra-flow-modal__sequence-list{
    min-width: 470px;
  }


  /* MOVIE */

  .ultra-flow-modal__movie{
    margin-top: 22px;

    padding-top: 18px;
  }

  .ultra-flow-modal__movie-frame{
    border-radius: 8px;
  }


  /* ACTIONS */

  .ultra-flow-modal__actions{
    display: block;

    margin-top: 23px;
  }

  .ultra-flow-modal__actions--multiple{
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;
  }

  .ultra-flow-modal .ultra-btn{
    max-width: 100%;

    min-height: 46px;

    font-size: 13px;
  }


  /* NAVIGATION */

  .ultra-flow-modal__nav-button{
    min-height: 64px;

    padding:
      9px
      16px
      calc(
        9px
        + env(safe-area-inset-bottom)
      );
  }

  .ultra-flow-modal__nav-direction{
    font-size: 9px;
  }

  .ultra-flow-modal__nav-button strong{
    font-size: 11px;
  }


  /* MINI TIMELINE */

  .ultra-flow-mini-timeline__list{
    display: block;

    padding:
      2px
      0
      0;
  }

  .ultra-flow-mini-timeline__list::before{
    top: 11px;
    bottom: 11px;

    left: 7px;
    right: auto;

    width: 1px;
    height: auto;
  }

  .ultra-flow-mini-timeline__item{
    display: grid;

    grid-template-columns:
      15px
      minmax(0, 1fr);

    align-items: start;

    column-gap: 14px;

    margin:
      0
      0
      19px;

    padding: 0;

    text-align: left;
  }

  .ultra-flow-mini-timeline__item:last-child{
    margin-bottom: 0;
  }

  .ultra-flow-mini-timeline__dot{
    width: 15px;
    height: 15px;

    margin:
      4px
      0
      0;
  }

  .ultra-flow-mini-timeline__time{
    min-height: 0;

    margin-bottom: 2px;

    font-size: 10px;
  }

  .ultra-flow-mini-timeline__text strong{
    font-size: 13px;
  }

}


/* =========================================================
   SP MODAL MOTION
========================================================= */

@keyframes ultra-flow-sheet-in{

  from{
    opacity: 0;

    transform:
      translateY(100%);
  }

  to{
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){

  .ultra-flow-route__number,
  .ultra-flow-route__scene-image,
  .ultra-flow-route__button,
  .ultra-flow-route__button-plus,
  .ultra-flow-route__link,
  .ultra-flow-modal__panel,
  .ultra-flow-modal__inner,
  .ultra-flow-modal__progress-dot,
  .ultra-flow-modal__nav-button{
    transition: none !important;
    animation: none !important;
  }

}