/* The original treatment photograph is the hero's primary visual. */
.hero--photo {
  isolation: isolate;
  background: linear-gradient(118deg, #e7f4ff 0%, #f4faff 43%, #f3f3ee 100%);
}
.hero--photo .hero-inner {
  position: static;
  display: block;
  width: min(1380px, calc(100% - 112px));
  min-height: 760px;
  padding: 45px 0 102px;
}
.hero--photo .hero-copy,
.hero--photo .hero-support {
  position: relative;
  z-index: 3;
  width: 55%;
  padding: 0;
}
.hero--photo .eyebrow-pill {
  padding: 11px 23px;
  gap: 10px;
  background: linear-gradient(105deg, #073773, #134e91);
  box-shadow: 0 5px 18px #123f7623, inset 0 1px 1px #ffffff25;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .035em;
}
.hero--photo .eyebrow-pill > span { font-size: 1.2rem; line-height: 1; }
.hero--photo h1 {
  margin: 23px 0 26px;
  color: #06254e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(3.65rem, 5.8vw, 6rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.28;
}
.hero-title-first,
.hero-title-second { display: block; white-space: nowrap; }
.hero-title-second { font-size: 1.13em; margin-top: 6px; }
.hero--photo .marker {
  position: relative;
  display: inline;
  background: linear-gradient(transparent 57%, #ffdc2f 57%, #ffe153 92%, transparent 92%);
  padding-inline: .025em;
  margin-left: -.025em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-period { letter-spacing: -.15em; }
.hero--photo .hero-credential {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 19px;
  margin: 0;
  max-width: 100%;
  border: 1px solid #dcebf6;
  border-radius: 999px;
  background: #ffffffed;
  box-shadow: 0 3px 13px #164a7c0c;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .025em;
}
.hero--photo .hero-credential .icon {
  width: 28px;
  height: 28px;
  padding: 4px;
  background: #e9f3ff;
  color: #0757a7;
}
.hero--photo .hero-description {
  margin-top: 17px;
  color: #163e69;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .02em;
}
.hero--photo .hero-description strong { font-weight: 800; }
.hero--photo .hero-features {
  display: flex;
  align-items: stretch;
  gap: 13px;
  margin-top: 21px;
}
.hero--photo .hero-features li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 10px;
  padding: 11px 9px;
  border: 1px solid #e9f2fa;
  border-radius: 15px;
  background: #ffffffed;
  box-shadow: 0 4px 18px #285b8310;
  color: #103c73;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.65;
}
.hero--photo .hero-features .icon {
  display: block;
  width: 29px;
  height: 29px;
  color: #064c95;
}
.hero--photo .hero-actions {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 15px;
  margin-top: 27px;
}
.hero--photo .hero-actions .button {
  width: 100%;
  min-height: 65px;
  padding: 15px 18px;
  gap: 9px;
  font-size: 1rem;
  white-space: nowrap;
}
.hero--photo .hero-actions .button-yellow {
  background: linear-gradient(108deg, #ffd800, #ffe54f);
  box-shadow: 0 8px 27px #f0c60030, inset 0 1px 1px #ffffff60;
}
.hero--photo .button-instagram {
  background: #fffffff2;
  border: 1px solid #8ab2dd;
  color: #0b3972;
  box-shadow: 0 4px 18px #1647790a;
}
.hero--photo .button-instagram:hover { background: #f0f7ff; }
.hero--photo .hero-actions .icon { width: 24px; height: 24px; }
.hero--photo .hero-actions .arrow { width: 15px; height: 15px; margin-left: auto; }
.hero--photo .hero-schedule-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0 6px;
  font-size: .9375rem;
}
.hero--photo .hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 68%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
}
.hero--photo .hero-treatment-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 36% top;
}
.hero--photo .hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #f1f8ff 0%, #f1f8fff5 9%, #f1f8ffce 17%, #f1f8ff65 27%, #f1f8ff00 42%),
    linear-gradient(0deg, #eff8ff 0%, #eff8ff00 11%);
  pointer-events: none;
}
.hero-city-strip {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: min(630px, 48%);
  aspect-ratio: 530 / 91;
  overflow: hidden;
  opacity: .48;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #0008 40%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #0008 40%, transparent 100%);
  pointer-events: none;
}
.hero-city-strip img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 315.472%;
  height: auto;
  max-width: none;
}
.hero--photo + .overview { margin-top: -35px; }
.overview-card strong.visit-destinations { font-size: clamp(1rem, 1.48vw, 1.25rem); }

@media (min-width: 1600px) {
  .hero--photo .hero-inner { min-height: 820px; padding-top: 50px; }
  .hero--photo .hero-copy, .hero--photo .hero-support { width: 54%; }
  .hero--photo h1 { margin-top: 25px; }
  .hero--photo .hero-actions .button { min-height: 72px; font-size: 1.075rem; padding-inline: 24px; }
}
@media (min-width: 2000px) {
  .hero--photo .hero-visual { width: 64%; }
  .hero--photo .hero-treatment-photo { object-position: center 20%; }
}
@media (max-width: 1150px) {
  .hero--photo .hero-inner { width: calc(100% - 64px); min-height: 710px; padding-block: 36px 86px; }
  .hero--photo .hero-copy, .hero--photo .hero-support { width: 57%; }
  .hero--photo .eyebrow-pill { font-size: .875rem; padding: 10px 16px; }
  .hero--photo h1 { font-size: clamp(3.3rem, 5.7vw, 4.15rem); margin-block: 24px; }
  .hero--photo .hero-credential { font-size: .875rem; padding: 10px 14px; gap: 8px; }
  .hero--photo .hero-description { font-size: 1rem; }
  .hero--photo .hero-features { gap: 9px; }
  .hero--photo .hero-features li { gap: 7px; padding: 10px 7px; font-size: .875rem; }
  .hero--photo .hero-features .icon { width: 23px; height: 23px; }
  .hero--photo .hero-actions { gap: 10px; }
  .hero--photo .hero-actions .button { min-height: 59px; font-size: .875rem; padding: 13px 14px; gap: 7px; }
  .hero--photo .hero-actions .icon { width: 20px; height: 20px; }
  .hero--photo .hero-actions .arrow { width: 13px; height: 13px; }
  .hero--photo .hero-visual { width: 70%; }
  .hero--photo .hero-treatment-photo { object-position: 34% top; }
  .hero--photo .hero-visual::after { background: linear-gradient(90deg, #f1f8ff 0%, #f1f8fff7 12%, #f1f8ffa6 25%, #f1f8ff00 43%), linear-gradient(0deg, #eff8ff, #eff8ff00 10%); }
}
@media (max-width: 900px) and (min-width: 701px) {
  .hero--photo .hero-inner { width: calc(100% - 44px); min-height: 690px; }
  .hero--photo .hero-copy, .hero--photo .hero-support { width: 62%; }
  .hero--photo h1 { font-size: 3.2rem; }
  .hero--photo .hero-actions { display: flex; flex-wrap: wrap; max-width: 430px; }
  .hero--photo .hero-actions .button { flex: 1 1 190px; min-height: 54px; padding-inline: 12px; }
  .hero--photo .hero-features { gap: 7px; }
  .hero--photo .hero-features .icon { width: 21px; height: 21px; }
  .hero--photo .hero-features li { font-size: .875rem; gap: 6px; padding: 9px 6px; }
  .hero--photo .hero-visual { width: 67%; }
  .hero--photo .hero-treatment-photo { object-position: 31% top; }
}
@media (max-width: 700px) {
  .hero--photo .hero-inner {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 27px 0 46px;
  }
  .hero--photo .hero-copy, .hero--photo .hero-support { width: calc(100% - 40px); margin-inline: auto; }
  .hero--photo .hero-copy { order: 1; }
  .hero--photo .eyebrow-pill { padding: 8px 13px; font-size: .8125rem; gap: 8px; letter-spacing: 0; }
  .hero--photo .eyebrow-pill > span { font-size: 1rem; }
  .hero--photo h1 { font-size: clamp(3.05rem, 9vw, 4.25rem); line-height: 1.26; margin: 18px 0 19px; letter-spacing: -.03em; }
  .hero-title-second { margin-top: 4px; font-size: 1.17em; }
  .hero--photo .hero-credential { padding: 9px 13px; gap: 8px; font-size: .8125rem; line-height: 1.6; letter-spacing: 0; }
  .hero--photo .hero-credential .icon { width: 25px; height: 25px; padding: 4px; }
  .hero--photo .hero-description { margin-top: 12px; font-size: 1rem; line-height: 1.85; letter-spacing: 0; }
  .hero--photo .hero-visual {
    order: 2;
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 2048 / 1365;
    margin: 14px 0 0;
  }
  .hero--photo .hero-treatment-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .hero--photo .hero-visual::after {
    inset: 0;
    background: linear-gradient(180deg, #f0f8ff 0%, #f0f8ff00 8%), linear-gradient(0deg, #f0f8ff 0%, #f0f8ff00 12%);
  }
  .hero--photo .hero-support { order: 3; margin-top: -1px; }
  .hero--photo .hero-features { margin-top: 0; gap: 9px; }
  .hero--photo .hero-features li { flex-direction: column; gap: 6px; text-align: center; padding: 12px 6px 11px; font-size: .875rem; line-height: 1.65; border-radius: 13px; }
  .hero--photo .hero-features .icon { width: 25px; height: 25px; }
  .hero--photo .hero-actions { display: grid; grid-template-columns: 1.06fr 1fr; gap: 10px; margin-top: 17px; }
  .hero--photo .hero-actions .button { min-height: 55px; padding: 11px 10px; gap: 6px; font-size: .875rem; white-space: normal; }
  .hero--photo .hero-actions .icon { width: 19px; height: 19px; }
  .hero--photo .hero-actions .arrow { display: none; }
  .hero--photo .hero-schedule-link { display: flex; justify-content: center; margin: 17px 0 0; font-size: .875rem; }
  .hero-city-strip { display: none; }
  .hero--photo + .overview { margin-top: -12px; }
  .overview-card strong.visit-destinations { font-size: 1.125rem; }
}
@media (max-width: 390px) {
  .hero--photo .hero-copy, .hero--photo .hero-support { width: calc(100% - 32px); }
  .hero--photo .eyebrow-pill { font-size: .75rem; padding-inline: 11px; }
  .hero--photo h1 { font-size: clamp(2.65rem, 12vw, 3.1rem); }
  .hero--photo .hero-credential { font-size: .75rem; padding: 9px 11px; gap: 6px; }
  .hero--photo .hero-credential .icon { width: 23px; height: 23px; }
  .hero--photo .hero-actions { grid-template-columns: 1fr; gap: 10px; }
  .hero--photo .hero-actions .button { font-size: .9375rem; min-height: 54px; gap: 10px; }
  .hero--photo .hero-features { gap: 6px; }
  .hero--photo .hero-features li { padding-inline: 4px; }
}