*{ box-sizing: border-box; }

html{
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
}

body{ margin: 0; }

:root{
  --waveH: clamp(110px, calc(100vw * (220 / 1440)), 240px);
  --badgeIcon: clamp(38px, 4vw, 56px);
  --badgeGap: clamp(14px, 2vw, 22px);
}

.hero{
  position: relative;
  background: transparent;
  color: #10202a;
  overflow: hidden;
}

.hero__media{
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1920 / 1010;
  min-height: 320px;
  overflow: hidden;
  background: #fff;
}

.hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}

.hero__titleSvg{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--waveH) * 0.15);
  width: clamp(360px, 44vw, 700px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  display: block;
}

.hero__wave{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: var(--waveH);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  display: block;
  overflow: visible;
}

@media (max-width: 800px){
  .hero__titleSvg{
    width: clamp(300px, 44vw, 360px);
    bottom: calc(var(--waveH) * 0.16);
  }
}
@media (max-width: 700px){
  .hero__titleSvg{
    width: clamp(240px, calc(311px - (700px - 100vw) * 0.05), 311px);
  }
}
@media (max-width: 600px){
  .hero__titleSvg{
    width: clamp(240px, calc(311px - (700px - 100vw) * 0.19), 311px);
  }
}

.hero__intro{
  position: relative;
  z-index: 3;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  margin-top: -1px;
  padding: clamp(18px, 3vw, 40px) 0 clamp(36px, 6vw, 64px);
}

.hero__inner{
  position: relative;
  z-index: 5;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}

.heroIntroFish{
  position: absolute;
  left: clamp(40vw, 60vw, 75vw);
  top: clamp(35vh, 50vh, 60vh);

  width: clamp(180px, 22vw, 360px);
  height: auto;

  opacity: .85;
  pointer-events: none;
  z-index: 4;

  offset-rotate: 0deg;

  offset-path: path("M 0 0 C 80 -20, 160 -90, 210 -160 C 250 -220, 260 -290, 320 -420");
  offset-distance: 0%;

  animation: heroFishLoop 14s linear infinite, heroFishIdle 4.8s ease-in-out infinite;
  will-change: offset-distance, transform, opacity;
}

@keyframes heroFishLoop{
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: .85; }
  92% { opacity: .85; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes heroFishIdle{
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce){
  .heroIntroFish{ animation: none; opacity: .5; }
}

.heroIntroTurtle{
  position: absolute;

  left: clamp(-10vw, 5vw, 12vw);
  top: clamp(2vh, 8vh, 15vh);

  width: clamp(240px, 28vw, 480px);
  height: auto;

  opacity: .9;
  pointer-events: none;
  z-index: 0;

  will-change: transform, opacity;
}

.heroIntroTurtle.isFloating{
  animation: heroTurtleFloat 6.5s ease-in-out infinite;
}

@keyframes heroTurtleFloat{
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce){
  .heroIntroTurtle.isFloating{ animation: none; }
}

.hero__text{
  text-align: center;
  margin-top: clamp(-34px, -2.8vw, -18px);
  padding-top: 2px;
}

.hero__date{
  margin: 0 0 clamp(18px, 2.6vw, 36px);
  font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(29px, calc(100vw * (62 / 1440)), 62px);
  line-height: 1.05;
  letter-spacing: 0.09em;
  color: #627dff;
}

.hero__dow{
  font-size: 0.66em;
  letter-spacing: 0.08em;
  margin-left: -0.4em;
  vertical-align: baseline;
}

.hero__lead{
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(22px, calc(100vw * (48 / 1440)), 48px);
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: #132b36;
}

.hero__lead--accent{
  color: #627dff;
  font-size: 0.98em;
  font-weight: 500;
  line-height: 1;
  vertical-align: -0.01em;
}

.hero__badge{
  margin-top: clamp(36px, 4.5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.9vw, 6px);
  text-align: center;
}

.hero__badgeIcon{
  width: var(--badgeIcon);
  height: var(--badgeIcon);
  flex: 0 0 auto;
  display: block;
}

.hero__badgeIcon img{
  width: 100%;
  height: 100%;
  display: block;
}

.hero__badgeTitle{
  font-family:
    "Avenir Next Condensed",
    "DIN Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;
  font-weight: 600;
  font-size: clamp(12px, calc(100vw * (20 / 1440)), 20px);
  letter-spacing: 0.02em;
  color: #627dff;
  line-height: 1.0;
}

.hero__badgeSub{
  margin-top: clamp(9px, 1.3vw, 15px);
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(15px, calc(100vw * (18 / 1440)), 18px);
  letter-spacing: 0.04em;
  color: #132b36;
  line-height: 1.2;
}

@media (max-width: 700px){
  .hero__inner{
    width: min(1080px, calc(100% - 28px));
  }
  .hero__text{
    margin-top: clamp(-24px, -3.2vw, -12px);
  }
}

@media (max-width: 600px){
  :root{
    --waveH: clamp(97px, calc(100vw * (190 / 1440)), 140px);
  }
}

.p1{
  position: relative;
  padding: clamp(28px, 4vw, 52px) 0 0;
}

.p1Cards{
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  row-gap: clamp(42px, 6vw, 88px);
  column-gap: 0;
  padding-bottom: clamp(28px, 5vw, 56px);
}

.p1Card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(10px, 1.2vw, 16px);
  align-items: center;
  grid-template-areas: "text media";
}

.p1Card--reverse{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "media text";
}

.p1Card__text{
  grid-area: text;
  justify-self: stretch;
  width: auto;
  min-width: 0;
}

.p1Card__media{
  grid-area: media;
  justify-self: stretch;
  width: auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(10, 35, 55, 0.14);
}

.p1Card__media img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.p1Card__title{
  margin: 0 0 5px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #132b36;
}

.p1Card__titleAccent{ color: #627dff; }

.p1Card__sub{
  margin: 0 0 14px;
  font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #47bbc3;
}

.p1Card__desc{
  margin:  0 0 28px;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #132b36;
  max-width: 26em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.p1Meta{
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
}

.p1Meta__row{
  font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 13px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0px;
  padding: 2px 0;
  align-items: baseline;
}

.p1Meta dt{
  font-weight: 00;
  letter-spacing: 0.16em;
  color: #47bbc3;
}

.p1Meta dd{
  margin: 0;
  color: #132b36;
  letter-spacing: 0.05em;
}

.p1Card--animal{
  border: 2px solid rgba(98,125,255,0.25);
  padding: clamp(20px, 1.8vw, 30px);
  width: calc(100% - clamp(10px, 2vw, 18px));
  margin: 0 auto;
  column-gap: clamp(30px, 4vw, 60px);
  box-sizing: border-box;
}

.p1Card--animal .p1Card__media{
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.p1Card--animal .p1Card__media img{
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
}

.animal-break{
  display: none;
}

@media (min-width: 800px) and (max-width: 1050px){
  .animal-break{
    display: inline;
  }
}

.title-break{
  display: none;
}

@media (min-width: 550px) and (max-width: 610px){
  .title-break{
    display: inline;
  }
}

.endline-break{
  display: none;
}

@media (min-width: 550px) and (max-width: 670px){
  .endline-break{
    display: inline;
  }
}

.p1Card--animal .p1Card__title{
  margin: 0 0 15px;
  font-size: 22px;
}

.p1Card--animal .p1Card__desc{
  max-width: 28em;
}

@media (max-width: 550px){
  .p1{
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
  .p1Meta dd{
    white-space: nowrap;
  }
  .p1Meta__row{
    font-size: 13px;
  }
  }
}

@media (min-width: 551px){
  .p1Cards{
    padding-left: clamp(12px, 2.4vw, 28px);
  }

  .p1Cards > .p1Card:nth-child(1) .p1Card__text{
    position: relative;
    left: clamp(10px, 3vw, 42px);
  }

  .p1Cards > .p1Card:nth-child(2) .p1Card__media{
    position: relative;
    left: clamp(-28px, -2vw, -12px);
  }

  .p1Cards > .p1Card:nth-child(3) .p1Card__text{
    position: relative;
    left: clamp(10px, 3vw, 42px);
  }
}

@media (max-width: 870px){
  .p1Card{ gap: clamp(10px, 1.6vw, 14px); }

  .p1Card__title{
    font-size: 18px;
    line-height: 1.28;
  }

  .p1Card__sub{
    margin: 0 0 10px;
  }

  .p1Card__desc{
    line-height: 1.75;
    margin: 0  0 30px;
  }

  .p1Meta{
    line-height: 1.65;
  }

  .p1Meta__row{
    padding: 1px 0;
  }
}

@media (max-width: 800px){
  .p1Card__desc{ max-width: 22em; }
  .p1Meta__row{ max-width: 18em; }
}

@media (max-width: 700px){
  .p1Card__desc{ max-width: 20em; }
  .p1Meta__row{ max-width: 18em; }
}

@media (max-width: 650px){
  .p1Card__desc{ max-width: 18em; }
  .p1Meta__row{ max-width: 18em; }
}

@media (max-width: 580px){
  .p1Card__desc{ max-width: 16em; }
  .p1Meta__row{ max-width: 16em; }
}

.narrow-break{
  display: none;
}

@media (max-width: 480px){
  .narrow-break{
    display: inline;
  }
}

.supernarrow-break{
  display: none;
}

@media (max-width: 370px){
  .supernarrow-break{
    display: inline;
  }
}

.ultranarrow-break{
  display: none;
}

@media (max-width: 340px){
  .ultranarrow-break{
    display: inline;
  }
}

@media (max-width: 550px){
  .p1Cards{
    width: min(1080px, calc(100% - 28px));
  }

  .p1Card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
    gap: 14px;
  }

  .p1Card__desc{ max-width: none; }
}


.p1__highlights{
  background: transparent;
  padding: clamp(54px, 7vw, 100px) 0;
  margin-top: clamp(26px, 5vw, 52px);
  border-top: 2px solid #47bbc3;
}

.p1__inner{
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}

.p1__highlights{
  background: transparent;
  padding: clamp(54px, 7vw, 100px) 0;
  margin-top: clamp(26px, 5vw, 52px);
  border-top: 2px solid #47bbc3;
}

.p1__inner{
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}

.p1__highlights{
  background: transparent;
  padding: clamp(54px, 7vw, 100px) 0;
  margin-top: clamp(26px, 5vw, 52px);
  border-top: 2px solid #47bbc3;
}

.p1Highlights{
  display: grid;
  grid-template-areas:
    "badge badge"
    "copy media";
  grid-template-columns: minmax(0, 6fr) minmax(0, 8fr);

  column-gap: clamp(18px, 2.2vw, 28px);
  row-gap: clamp(22px, 3.6vw, 42px);
  align-items: start;
}

.p1__badge{
  grid-area: badge;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  gap: clamp(6px, 0.9vw, 10px);
  margin: 0;
  padding-bottom: clamp(28px, 4.2vw, 56px);
}

.p1__badgeIcon{
  width: var(--badgeIcon);
  height: var(--badgeIcon);
  flex: 0 0 auto;
  display: block;
}
.p1__badgeIcon img{
  width: 100%;
  height: 100%;
  display: block;
}

.p1__badgeText{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p1__badgeTitle{
  font-family:
    "Avenir Next Condensed",
    "DIN Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;
  font-weight: 600;
  font-size: clamp(12px, calc(100vw * (20 / 1440)), 20px);
  letter-spacing: 0.02em;
  color: #627dff;
  line-height: 1.0;
}

.p1__badgeSub{
  margin-top: clamp(9px, 1.3vw, 15px);
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(15px, calc(100vw * (18 / 1440)), 18px);
  letter-spacing: 0.04em;
  color: #132b36;
  line-height: 1.2;
}

.p1H2{
  margin: clamp(27px, 3.9vw, 42px) 0 0;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #132b36;
  text-align: center;
}
.p1H2 span{ color: #627dff; }

.p1Highlights__copy{
  grid-area: copy;
  min-width: 0;
}

.p1Bodytitle{
  max-width: 27em;
  margin: 0 0 34px;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #132b36;
}

.p1Body{
  max-width: 27em;
}

.p1Body p{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: #132b36;
}

.p1Btn{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(27px, 5.3vw, 42px);
  inline-size: min(100%, 27em);
  padding: clamp(8px, 1.2vw, 10px) clamp(16px, 2.4vw, 22px);
  min-height: clamp(36px, 5vw, 40px);
  background: #627dff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
}

.p1Btn__label{
  grid-column: 2;
  justify-self: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.p1Btn__icon{
  grid-column: 3;
  justify-self: end;

  width: clamp(12px, 1.4vw, 14px);
  height: clamp(12px, 1.4vw, 14px);
  display: block;
}
.p1Highlights__media{
  grid-area: media;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(10, 35, 55, 0.14);
  width: 100%;
  justify-self: end;
}

.p1Highlights__media img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.p1__badge,
.p1Highlights__copy,
.p1Highlights__media{
  min-width: 0;
}

@media (max-width: 650px){
  .p1Bodytitle{
    margin-bottom: 24px;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.65;
  }

  .p1Body p{
    font-size: 13px;
    line-height: 1.9;
  }
}

@media (max-width: 1000px) and (min-width: 550px){
  .p1Highlights{
    column-gap: clamp(14px, 2vw, 22px);
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 40%);
    align-items: stretch;
  }

  .p1Highlights__copy{
    align-self: stretch;
  }

  .p1Highlights__media{
    align-self: stretch;
  }

  .p1Highlights__media img{
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

@media (max-width: 550px){
  .p1Highlights{
    grid-template-columns: 1fr;
    grid-template-areas:
      "badge"
      "media"
      "copy";
    row-gap: 18px;
    align-items: start;
  }

  .p1Highlights__copy{
    padding: clamp(10px, 3.6vw, 18px) 0 0;
  }

  .p1Highlights__media{
    width: 100%;
    justify-self: stretch;
    box-shadow: 0 18px 50px rgba(10, 35, 55, 0.14);
    background: #fff;
  }

  .p1Highlights__media img{
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .p1Bodytitle,
  .p1Body{ max-width: none; }
}


.p1Thumbs{
  background: #eaf6f8;
  padding: clamp(26px, 4vw, 44px) 0;
}

.p1Thumbs__viewport{
  width: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  padding: 0 clamp(12px, 2.2vw, 24px);
  box-sizing: border-box;
}

.p1Thumbs__viewport::before,
.p1Thumbs__viewport::after{
  content: none;
}

.p1Thumbs__track{
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.2vw, 44px);
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: none;
  backface-visibility: hidden;
}

.p1Thumbs__track img{
  aspect-ratio: 1005 / 877;
  width: clamp(220px, 22vw, 340px);
  height: auto;
  display: block;
  flex: 0 0 auto;
  object-fit: cover;

  border-radius: 0;
  background: #fff;
  transform: translate3d(0,0,0);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.p1Thumbs__track.is-ready{
  animation: p1ThumbsScroll var(--p1ThumbsDuration, 26s) linear infinite;
}

@keyframes p1ThumbsScroll{
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(var(--p1ThumbsTo, -50%), 0, 0); }
}


@media (hover:hover){
  .p1Thumbs__viewport:hover .p1Thumbs__track{
    animation-play-state: paused;
  }
}

@media (min-width: 1400px){
  .p1Thumbs__track img{
    width: clamp(240px, 18vw, 380px);
  }
}

@media (max-width: 900px){
  .p1Thumbs__viewport{
    width: min(1240px, calc(100% - 44px));
  }
  .p1Thumbs__viewport::before,
  .p1Thumbs__viewport::after{
    width: 56px;
  }
}

@media (max-width: 520px){
  .p1Thumbs{ padding: 22px 0; }
  .p1Thumbs__viewport{ width: calc(100% - 28px); }
  .p1Thumbs__viewport::before,
  .p1Thumbs__viewport::after{ width: 42px; }
}

@media (prefers-reduced-motion: reduce){
  .p1Thumbs__track{ animation: none; }
}


:root { color-scheme: light; }

body{
  background:#fff;
  color:#132b36;
}

.p1BgZone{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

:root{
  --wfTop: clamp(18px, 4.5vw, 56px); 
  --wfW: clamp(308px, 36vw, 504px);
}

.p1BgZone > *{
  position: relative;
  z-index: 3;
}

.p1BgZone::before{
  content:"";
  position:absolute;
  top: calc(var(--wfTop) + clamp(30px, 5vw, 150px));
  right: 0;

  width: var(--wfW);
  aspect-ratio: 687 / 4700;
  z-index: 2;
  pointer-events:none;

  background-repeat:no-repeat;
  background-position:right top;
  background-size:100% 100%;

  animation: bubblesDrift 12s ease-in-out infinite;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 687.2 2354.3'>\
  <defs>\
    <clipPath id='clip'>\
      <path d='M687.1,34.5v2299.5h-45.7c-163.8,0-414.9-42.2-515.6-332.1-176.4-507.9,180.3-770.3,215.4-1033.2,33.3-249-83.2-443.2-34.6-639.8C360,112.4,529.6,38.6,687.2,34.6h-.1Z'/>\
    </clipPath>\
  </defs>\
  <g clip-path='url(%23clip)'>\
    <g opacity='1'>\
      <path fill='%23f2f8fa' fill-rule='evenodd' d='M517.8,620.5c36.7,0,66.4,29.7,66.4,66.4s-29.7,66.4-66.4,66.4-66.4-29.7-66.4-66.4,29.7-66.4,66.4-66.4Z'/>\
      <path fill='%23e4f1f5' fill-rule='evenodd' d='M559.6,675.5c1,3.6,1.5,7.4,1.5,11.3,0,24-19.5,43.4-43.4,43.4s-7.7-.5-11.3-1.5c-5.2-1.4-8.9-6-8.9-11.5s3.5-10.1,8.8-11.5c14.7-4.1,26.2-15.6,30.2-30.2,1.5-5.2,6.1-8.8,11.5-8.8s10.1,3.5,11.5,8.9h.1Z'/>\
    </g>\
    <g opacity='1'>\
      <path fill='%23f2f8fa' fill-rule='evenodd' d='M449,780.8c26.3,0,47.7,21.4,47.7,47.7s-21.4,47.7-47.7,47.7-47.7-21.4-47.7-47.7,21.4-47.7,47.7-47.7Z'/>\
      <path fill='%23e4f1f5' fill-rule='evenodd' d='M479.1,820.3c.7,2.6,1.1,5.3,1.1,8.1,0,17.2-14,31.2-31.2,31.2s-5.6-.4-8.1-1.1c-3.7-1.1-6.3-4.4-6.3-8.2s2.5-7.3,6.3-8.3c10.5-2.9,18.8-11.2,21.7-21.7,1.1-3.7,4.4-6.3,8.3-6.3s7.3,2.6,8.2,6.3h0Z'/>\
    </g>\
    <g opacity='1'>\
      <path fill='%23f2f8fa' fill-rule='evenodd' d='M463.9,934.1c17.2,0,31.1,13.9,31.1,31.1s-13.9,31.1-31.1,31.1-31.1-13.9-31.1-31.1,13.9-31.1,31.1-31.1Z'/>\
      <path fill='%23e4f1f5' fill-rule='evenodd' d='M483.5,959.9c.4,1.7.7,3.4.7,5.3,0,11.2-9.1,20.3-20.3,20.3s-3.6-.2-5.3-.7c-2.5-.6-4.2-2.8-4.2-5.3s1.6-4.7,4.1-5.5c6.8-1.9,12.3-7.3,14.1-14.1.6-2.5,2.9-4.2,5.5-4.1,2.6,0,4.7,1.7,5.3,4.2h.1Z'/>\
    </g>\
    <g opacity='1'>\
      <path fill='%23f5fafc' fill-rule='evenodd' d='M552.7,1381.7c-17.4,0-31.5,14.1-31.5,31.5s14.1,31.5,31.5,31.5,31.5-14.1,31.5-31.5-14.1-31.5-31.5-31.5Z'/>\
      <path fill='%23e4f1f5' fill-rule='evenodd' d='M532.8,1407.9c-.4,1.7-.7,3.5-.7,5.3,0,11.4,9.2,20.6,20.6,20.6s3.6-.2,5.3-.7c2.5-.6,4.2-2.9,4.2-5.5s-1.7-4.8-4.2-5.5c-7-1.9-12.4-7.4-14.3-14.3-.6-2.5-2.9-4.2-5.5-4.2s-4.8,1.7-5.5,4.2h0Z'/>\
    </g>\
    <g opacity='1'>\
      <path fill='%23f2f8fa' fill-rule='evenodd' d='M584.2,1478.7c-12.5,0-22.7,10.2-22.7,22.7s10.2,22.7,22.7,22.7,22.7-10.2,22.7-22.7-10.2-22.7-22.7-22.7Z'/>\
      <path fill='%23e4f1f5' fill-rule='evenodd' d='M569.9,1497.6c-.3,1.3-.5,2.6-.5,3.8,0,8.2,6.6,14.9,14.9,14.9s2.7-.2,3.8-.5c1.8-.5,3-2,3-4s-1.2-3.4-3-4c-5-1.4-9-5.3-10.4-10.4-.5-1.8-2-3-4-3s-3.4,1.2-4,3h.1Z'/>\
    </g>\
    <g opacity='1'>\
      <path fill='%23f2f8fa' fill-rule='evenodd' d='M538.9,1543.2c-12.5,0-22.7,10.2-22.7,22.7s10.2,22.7,22.7,22.7,22.7-10.2,22.7-22.7-10.2-22.7-22.7-22.7Z'/>\
      <path fill='%23e4f1f5' fill-rule='evenodd' d='M524.5,1562c-.3,1.3-.5,2.6-.5,3.8,0,8.2,6.6,14.9,14.9,14.9s2.7-.2,3.8-.5c1.8-.5,3-2,3-4s-1.2-3.4-3-4c-5-1.4-9-5.3-10.4-10.4-.5-1.8-2-3-4-3s-3.4,1.2-4,3h.1Z'/>\
    </g>\
    <g opacity='1'>\
      <path fill='%23f2f8fa' fill-rule='evenodd' d='M552.7,1625.6c-8.1,0-14.8,6.6-14.8,14.8s6.6,14.8,14.8,14.8,14.8-6.6,14.8-14.8-6.6-14.8-14.8-14.8Z'/>\
      <path fill='%23e4f1f5' fill-rule='evenodd' d='M543.4,1637.9c-.2.9-.3,1.6-.3,2.6,0,5.3,4.3,9.6,9.6,9.6s1.7-.1,2.6-.3c1.2-.3,1.9-1.4,1.9-2.6s-.7-2.2-1.9-2.6c-3.2-.9-5.9-3.4-6.7-6.7-.3-1.2-1.4-1.9-2.6-1.9s-2.2.7-2.6,1.9h0Z'/>\
    </g>\
  </g>\
</svg>");
}

@keyframes bubblesDrift{
  0% { transform: translate(0,0); }
  50% { transform: translate(-10px,-16px); }
  100% { transform: translate(0,0); }
}

.p1BgZone::after{
  content:"";
  position:absolute;
  top: calc(var(--wfTop) + clamp(30px, 5vw, 150px));
  right: 0;

  width: var(--wfW);
  aspect-ratio: 687 / 4700; 
  z-index: 1;
  pointer-events:none;

  background-repeat:no-repeat;
  background-position:right top;
  background-size:100% 100%;

  transform-origin: 100% 0%; 
  animation: waterBreath 8.5s ease-in-out infinite;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 687.2 2354.3'>\
<defs>\
<linearGradient id='_g2' x1='303.7' y1='29.6' x2='744.8' y2='2286.4' gradientTransform='translate(0 2348.3) scale(1 -1)' gradientUnits='userSpaceOnUse'>\
<stop offset='0' stop-color='%23fff' stop-opacity='0'/>\
<stop offset='0' stop-color='%23fafcfd' stop-opacity='.1'/>\
<stop offset='0' stop-color='%23f4f9fb' stop-opacity='.3'/>\
<stop offset='0' stop-color='%23eff6f9' stop-opacity='.5'/>\
<stop offset='0' stop-color='%23eaf4f7' stop-opacity='.7'/>\
<stop offset='0' stop-color='%23e7f2f6' stop-opacity='.8'/>\
<stop offset='.2' stop-color='%23e4f0f5' stop-opacity='.9'/>\
<stop offset='.2' stop-color='%23e2eff4' stop-opacity='.9'/>\
<stop offset='.2' stop-color='%23e1eff4'/>\
<stop offset='.3' stop-color='%23e1eff4'/>\
<stop offset='.9' stop-color='%23e1eff4'/>\
<stop offset='1' stop-color='%23e1eff4' stop-opacity='.6'/>\
</linearGradient>\
</defs>\
<path fill='url(%23_g2)' d='M687.1,34.5v2299.5h-45.7c-163.8,0-414.9-42.2-515.6-332.1-176.4-507.9,180.3-770.3,215.4-1033.2,33.3-249-83.2-443.2-34.6-639.8C360,112.4,529.6,38.6,687.2,34.6h-.1Z'/>\
<path fill='%23dceef1' fill-rule='evenodd' d='M603.1,12.3c-103,6.5-181.8,79.1-201.1,89-21,10.8,13.7,12.3,39.3-13.3,25.5-25.6,68.6-47.1,92.5-50.4,19.1-2.7,49.7-15.1,69.2-17.1l.2-8.2h0Z'/>\
<path fill='%23dceef1' fill-rule='evenodd' d='M182.3,2185.7l4.8-6.7c-14.3-13.4-31.2-41.8-44.7-55.5-17-17.1-38.3-60.3-43.1-96.1-4.9-35.8-33.5-55.6-23.2-34.3,9.4,19.6,28.2,125.1,106.4,192.5h-.2Z'/>\
<path fill='%23dceef1' fill-rule='evenodd' d='M349.1,156.8c10.3-7.8,38.8-43,26.4-35.1h0'/>\
<path fill='%23dceef1' fill-rule='evenodd' d='M309.5,201c-23.3,35.1-27.2,85.1-45.8,106.8-18.6,21.7-8.4,54.5.7,33.3,9.1-21.3,14.3-47.6,28.7-68.8,14.4-21.2,34.3-92.3,16.4-71.3h0Z'/>\
<path fill='%23dceef1' fill-rule='evenodd' d='M29.9,1846.4c3.3,31.4,24.9,62.1,24.6,83.5s21.2,35.5,16.3,18.9c-4.9-16.6-14.4-34.3-16.3-53.4-1.8-19.1-24.2-69.7-24.6-49h0Z'/>\
<path fill='%23dceef1' fill-rule='evenodd' d='M104,2107.3c-55.1-57.7-69.8-209.1-84.5-241.2s10,101.1,30.7,157.7c20.7,56.6,60.9,109.3,53.8,83.5Z'/>\
</svg>");
}

@keyframes waterBreath{
  0%   { transform: translateX(0) scaleX(1)    scaleY(1);    opacity:1;    }
  50%  { transform: translateX(-6px) scaleX(1.03) scaleY(1.01); opacity:.965; }
  100% { transform: translateX(0) scaleX(1)    scaleY(1);    opacity:1;    }
}

@media (max-width: 768px){
  :root{
    --wfW: clamp(190px, 46vw, 300px); 
    --wfTop: clamp(14px, 4vw, 36px); 
  }
}

@media (prefers-reduced-motion: reduce){
  .p1BgZone::after{ animation: none; }
}

.p1BgZoneTwo{
  position: relative;
  background:transparent;
  overflow:hidden;
  isolation:isolate;
  min-height: 520px;
}

.p1BgZoneTwo > *{
  position: relative;
  z-index: 3;
}

.p1BgZoneTwo{
  --leftTop: calc(100% * 0.1 / 20);
  --leftW: clamp(308px, 36vw, 504px);
  --bleed: 42px;
}

.p1BgZoneTwo::before{
  content:"";
  position:absolute;
  top: var(--leftTop);
  bottom: 38%;

  left: calc(-1 * var(--bleed));
  width: calc(var(--leftW) + var(--bleed));

  z-index: 2;
  pointer-events:none;

  background-repeat:no-repeat;
  background-position: left top;
  background-size: 100% 100%;

  transform-origin: 0% 50%;
  animation: bubblesDriftL 12s ease-in-out infinite;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 687.2 2354.3'>\
  <g>\
    <path fill='%23f5fafc' fill-rule='evenodd' d='M162.3,1673.2c-11.9,0-21.5,9.6-21.5,21.5s9.6,21.5,21.5,21.5,21.5-9.6,21.5-21.5-9.6-21.5-21.5-21.5Z'/>\
    <path fill='%23e4f1f5' fill-rule='evenodd' d='M148.7,1691c-.3,1.2-.5,2.4-.5,3.7,0,7.8,6.3,14,14,14s2.5-.2,3.7-.5c1.7-.5,2.9-2,2.9-3.7s-1.1-3.3-2.8-3.7c-4.7-1.3-8.5-5-9.8-9.8-.5-1.7-2-2.8-3.7-2.8s-3.3,1.2-3.7,2.9h0Z'/>\
  </g>\
  <g>\
    <path fill='%23f2f8fa' fill-rule='evenodd' d='M183.8,1739.2c-8.5,0-15.4,6.9-15.4,15.4s6.9,15.4,15.4,15.4,15.4-6.9,15.4-15.4-6.9-15.4-15.4-15.4Z'/>\
    <path fill='%23e4f1f5' fill-rule='evenodd' d='M174,1752c-.2.8-.3,1.7-.3,2.6,0,5.6,4.5,10.1,10.1,10.1s1.8,0,2.6-.3c1.2-.3,2.1-1.4,2.1-2.7s-.8-2.4-2-2.7c-3.4-.9-6.1-3.6-7-7-.3-1.2-1.4-2-2.7-2s-2.3.8-2.7,2.1h-.1Z'/>\
  </g>\
  <g>\
    <path fill='%23f2f8fa' fill-rule='evenodd' d='M152.9,1783c-8.5,0-15.4,6.9-15.4,15.4s6.9,15.4,15.4,15.4,15.4-6.9,15.4-15.4-6.9-15.4-15.4-15.4Z'/>\
    <path fill='%23e4f1f5' fill-rule='evenodd' d='M143.1,1795.8c-.2.8-.3,1.7-.3,2.6,0,5.6,4.5,10.1,10.1,10.1s1.8,0,2.6-.3c1.2-.3,2.1-1.4,2.1-2.7s-.8-2.4-2-2.7c-3.4-.9-6.1-3.6-7-7-.3-1.2-1.4-2-2.7-2s-2.3.8-2.7,2.1h-.1Z'/>\
  </g>\
  <g>\
    <path fill='%23f2f8fa' fill-rule='evenodd' d='M162.3,1839.1c-5.6,0-10.1,4.5-10.1,10.1s4.5,10.1,10.1,10.1,10.1-4.5,10.1-10.1-4.5-10.1-10.1-10.1Z'/>\
    <path fill='%23e4f1f5' fill-rule='evenodd' d='M155.9,1847.4c-.1.5-.2,1.1-.2,1.7,0,3.6,2.9,6.6,6.6,6.6s1.2,0,1.7-.2c.8-.2,1.3-.9,1.3-1.7s-.5-1.5-1.3-1.8c-2.2-.6-4-2.4-4.6-4.6-.2-.8-.9-1.3-1.8-1.3s-1.5.5-1.7,1.3Z'/>\
  </g>\
  <g>\
    <path fill='%23f2f8fa' fill-rule='evenodd' d='M134.9,1256.3c13.8,4.1,21.6,18.6,17.5,32.4s-18.6,21.6-32.4,17.5-21.6-18.6-17.5-32.4,18.6-21.6,32.4-17.5Z'/>\
    <path fill='%23e4f1f5' fill-rule='evenodd' d='M144.5,1281.7c0,1.5-.3,3-.7,4.4-2.7,9-12.2,14.1-21.2,11.4s-2.8-1.1-4.1-1.8c-1.8-1.1-2.6-3.3-2-5.3.6-2.1,2.4-3.4,4.6-3.4,6,0,11.6-2.9,14.7-8,1.1-1.8,3.3-2.6,5.3-2,2.1.6,3.4,2.5,3.3,4.6h0Z'/>\
  </g>\
  <g>\
    <path fill='%23f2f8fa' fill-rule='evenodd' d='M104.6,1326.6c9.9,3,15.5,13.4,12.6,23.3s-13.4,15.5-23.3,12.6c-9.9-3-15.5-13.4-12.6-23.3s13.4-15.5,23.3-12.6Z'/>\
    <path fill='%23e4f1f5' fill-rule='evenodd' d='M111.5,1344.9c0,1.1-.2,2.1-.5,3.2-1.9,6.5-8.7,10.2-15.2,8.2s-2-.8-2.9-1.3c-1.3-.8-1.9-2.3-1.5-3.8s1.8-2.4,3.3-2.4c4.3,0,8.3-2.1,10.6-5.7.8-1.3,2.4-1.9,3.8-1.4,1.5.4,2.4,1.8,2.4,3.3h0Z'/>\
  </g>\
  <g>\
    <path fill='%23f2f8fa' fill-rule='evenodd' d='M114.1,1388.8c6.5,1.9,10.1,8.7,8.2,15.2s-8.7,10.1-15.2,8.2-10.1-8.7-8.2-15.2,8.7-10.1,15.2-8.2Z'/>\
    <path fill='%23e4f1f5' fill-rule='evenodd' d='M117.9,1400.3c0,.7-.1,1.4-.3,2.2-1.3,4.4-5.8,6.9-10.2,5.5s-1.3-.5-1.9-.9c-.9-.5-1.3-1.5-1-2.6s1.2-1.6,2.2-1.6c2.9,0,5.6-1.4,7.1-3.8.5-.9,1.6-1.3,2.6-.9,1,.3,1.6,1.2,1.6,2.2h0Z'/>\
  </g>\
</svg>");
}

@keyframes bubblesDriftL{
  0% { transform: translate3d(0,0,0); opacity:.95; }
  50% { transform: translate3d(10px,-16px,0); opacity:1; }
  100% { transform: translate3d(0,0,0); opacity:.95; }
}

.p1BgZoneTwo::after{
  content:"";
  position:absolute;
  top: var(--leftTop);
  bottom: 38%;

  left: calc(-1 * var(--bleed));
  width: calc(var(--leftW) + var(--bleed));

  z-index: 1;
  pointer-events:none;

  background-repeat:no-repeat;
  background-position: left top;
  background-size: 100% 100%;

  transform-origin: 0% 50%;
  animation: waterBreathL 8.5s ease-in-out infinite;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 687.2 2354.3'>\
  <defs>\
    <linearGradient id='wfL' x1='214.7' y1='236.9' x2='214.7' y2='1610.5' gradientTransform='translate(0 2354) scale(1 -1)' gradientUnits='userSpaceOnUse'>\
      <stop offset='0' stop-color='%23fff' stop-opacity='0'/>\
      <stop offset='0' stop-color='%23f9fbfc' stop-opacity='.2'/>\
      <stop offset='0' stop-color='%23f4f9fb' stop-opacity='.4'/>\
      <stop offset='0' stop-color='%23eff6f9' stop-opacity='.5'/>\
      <stop offset='.2' stop-color='%23ebf4f7' stop-opacity='.6'/>\
      <stop offset='.2' stop-color='%23e8f2f6' stop-opacity='.8'/>\
      <stop offset='.3' stop-color='%23e5f1f5' stop-opacity='.8'/>\
      <stop offset='.4' stop-color='%23e3f0f4' stop-opacity='.9'/>\
      <stop offset='.5' stop-color='%23e2eff4'/>\
      <stop offset='.6' stop-color='%23e1eff4'/>\
      <stop offset='1' stop-color='%23e1eff4'/>\
    </linearGradient>\
  </defs>\
  <path fill='url(%23wfL)' fill-rule='evenodd' d='M372.1,1329.6c-75.9,144.3-94,229.4-98.9,324.3-4.7,89.4-69.2,434.6-272.2,463.2V743.5c103.2,32.4,229.9,13.7,338.2,147.2,117.1,144.3,108.8,294.6,33,439h-.1Z'/>\
  <path fill='%23dceef1' fill-rule='evenodd' d='M173.7,747.2c28.5,16.4,73.1,41.3,108,57.6,55.9,26.1,102.9,94.6,60.2,32.8-32.8-47.4-80.3-61.1-166.1-108.8l-2,18.5h-.1Z'/>\
  <path fill='%23dceef1' fill-rule='evenodd' d='M309.6,837.4c-8.4.8,10.9,9.2,19.1,16s1.5,3.4,15.5,20.9,16.1,5.7,7-1.9c-9.1-7.5-23.8-31.1-41.6-35h0Z'/>\
  <path fill='%23dceef1' fill-rule='evenodd' d='M390.2,883.6c48.3,48.3,26.3,145.1,34.9,168.3,8.6,23.2,14.4-64.7,5.3-104.4s-41.6-81.5-40.2-63.9h0Z'/>\
</svg>");
}

@keyframes waterBreathL{
  0% { transform: translateX(0) scaleX(1) scaleY(1); opacity:1; }
  50% { transform: translateX(6px) scaleX(1.03) scaleY(1.01); opacity:.965; }
  100% { transform: translateX(0) scaleX(1) scaleY(1); opacity:1; }
}

@media (max-width: 768px){
  .p1BgZoneTwo{ min-height: 480px; }
  .p1BgZoneTwo{
    --leftW: clamp(190px, 46vw, 300px);
  }
}

@media (prefers-reduced-motion: reduce){
  .p1BgZoneTwo::before,
  .p1BgZoneTwo::after{
    animation: none;
  }
}

.p2Qa{
  position: relative;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(18px, 3vw, 34px);
  padding-bottom: clamp(34px, 5vw, 64px);
  padding-left: clamp(20px, 4vw, 28px);
  padding-right: clamp(20px, 4vw, 28px);
  --p2QaLine: 2px;
  --p2QaMarkCol: 26px;
  --p2QaGap: 26px;
}

.p2Qa__head{
  width: min(980px, calc(100% - 56px));
  margin: 0 auto;
  text-align: center;
  margin-top: calc(clamp(18px, 3vw, 34px) * 1.6);
}

.p2Qa__badge{
  margin-top: clamp(36px, 4.5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.9vw, 6px);
  text-align: center;
}

.p2Qa__badgeIcon{
  width: var(--badgeIcon);
  height: var(--badgeIcon);
  flex: 0 0 auto;
  display: block;
}

.p2Qa__badgeIcon img{
  width: 100%;
  height: 100%;
  display: block;
}

.p2Qa__badgeTitle{
  font-family:
    "Avenir Next Condensed",
    "DIN Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;
  font-weight: 600;
  font-size: clamp(12px, calc(100vw * (20 / 1440)), 20px);
  letter-spacing: 0.02em;
  color: #627dff;
  line-height: 1.0;
}

.p2Qa__badgeSub{
  margin-top: clamp(9px, 1.3vw, 15px);
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(15px, calc(100vw * (18 / 1440)), 18px);
  letter-spacing: 0.04em;
  color: #132b36;
  line-height: 1.2;
}

.p2Qa__title{
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: #132b36;
  font-size: clamp(22px, calc(100vw * (34 / 1440)), 34px);
  line-height: 1.12;
}

.p2Qa__title span{
  color: #627dff;
  letter-spacing: 0.06em;
}

.p2Qa__grid{
  width: min(1080px, calc(100% - 120px));
  margin: calc(clamp(22px, 3.4vw, 40px) * 2.2) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(45px, 6vw, 80px);
  row-gap: clamp(32px, 4vw, 54px);
}

.p2Qa__item{
  max-width: 480px;
}

.p2Qa__qRow{
  display: grid;
  grid-template-columns: var(--p2QaMarkCol) 1fr;
  column-gap: var(--p2QaGap);
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(98,125,255,0.34);
}

.p2Qa__mark{
  font-weight: 400;
  font-size: clamp(26px, calc(100vw * (32 / 1440)), 32px);
  letter-spacing: 0.10em;
  color: #627dff;
  line-height: 1;
}

.p2Qa__q{
  margin: 0;
  font-weight: 600;
  font-size: clamp(15px, calc(100vw * (18 / 1440)), 18px);
  letter-spacing: 0.06em;
  color: #627dff;
  line-height: 1.35;
}

.p2Qa__aRow{
  position: relative;
  display: grid;
  grid-template-columns: var(--p2QaMarkCol) 1fr;
  column-gap: var(--p2QaGap);
  align-items: center;
  padding-top: 18px;
  padding-bottom: 14px;
}

.p2Qa__aRow::after{
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--p2QaLine);
  height: 100%;
  background: rgba(98,125,255,0.34);
  pointer-events: none;
}

.p2Qa__aRow .p2Qa__mark{
  align-self: center;
}

.p2Qa__a{
  margin: 0;

  font-size: clamp(14px, calc(100vw * (15 / 1440)), 15px);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: rgba(19,43,54,0.82);
  padding-right: clamp(18px, 2.4vw, 26px);
}

@media (max-width: 775px){
  .p2Qa__grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .p2Qa__item{
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width: 550px){
  .p2Qa{
    padding-left: 20px;
    padding-right: 20px;
  }

  .p2Qa__grid{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .p2Qa__item{
    width: 100%;
    max-width: 460px;
  }
}


.p3Near{
  position: relative;
  background: transparent;
  padding-top: clamp(42px, 6vw, 72px);
  padding-bottom: clamp(34px, 6vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.p3Near__badge{
  margin: 0 auto;
  width: min(980px, calc(100% - 56px));
  justify-content: center;
  margin-bottom: 0;
}

.p3Near__wrap{
  width: min(1200px, calc(100% - 56px));
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(clamp(22px, 3.4vw, 40px) *2.2);
}

.p3Near__carousel{
  position: relative;
}

.p3Near__viewport{
  overflow: hidden;
  padding: 0;
}

.p3Near__track{
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  will-change: transform;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}

.p3Near__nav{
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(98,125,255,0.25);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.p3Near__nav span{
  font-size: 26px;
  line-height: 1;
  color: #627dff;
}
.p3Near__nav--prev{ left: -14px; }
.p3Near__nav--next{ right: -14px; }

.p3NearCard{
  flex: 0 0 auto;
  width: clamp(300px, 32vw, 360px);
  border: 2px solid rgba(98,125,255,0.22);
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.p3NearCard__media{
  margin: 0;
  padding: 18px 18px 0;
}
.p3NearCard__media img{
  width: 100%;
  aspect-ratio: 1005 / 877;
  object-fit: cover;
  display: block;
}

.p3NearCard__body{
  padding: 16px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.p3NearCard__title{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #132b36;
  font-weight: 500;
  text-align: center;
}

.p3NearCard__sub{
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #627dff;
  text-align: center;
  margin-bottom: 14px;
}

.p3NearCard__desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(19,43,54,0.82);
  letter-spacing: 0.05em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  min-height: calc(1.75em * 4);
}

.p3NearCard__btn{
  margin: 10px auto 0;
  margin-top: auto;
  width: 86%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  padding: 0 46px;
  background: #627dff;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.p3NearCard__btnLabel{
  display: block;
  text-align: center;
  white-space: nowrap;
}

.p3NearCard__btnIcon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
}

@media (max-width: 900px){
  .p3Near__nav{
    display: none;
  }

  .p3Near__viewport{
    overflow: hidden; 
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    padding-bottom: 8px;
  }

  .p3Near__track{
    will-change: transform;
    transition: transform 520ms cubic-bezier(.22,.9,.22,1);
    padding-bottom: 8px;
  }

  .p3NearCard{
    width: clamp(260px, 72vw, 360px);
  }
}

@media (max-width: 550px){
  .p3Near__wrap{
    width: calc(100% - 28px);
  }

  .p3NearCard{
    width: clamp(260px, 84vw, 360px);
  }
}

.p4{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.p4__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p4__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.p4__inner{
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 56px));
  margin: 0 auto;
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.p4__badge{
  --badgeIcon: clamp(32px, 5vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(38px, 5.5vw, 64px);
}

.p4__badgeIcon{
  width: var(--badgeIcon);
  height: var(--badgeIcon);
  flex: 0 0 auto;
}

.p4__badgeIcon img{
  width: 100%;
  height: 100%;
  display: block;
}

.p4__badgeText{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p4__badgeTitle{
  font-family:
    "Avenir Next Condensed",
    "DIN Condensed",
    "Arial Narrow",
    Arial,
    sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.4vw, 16px);
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}

.p4__lead{
  margin: 0;
  font-weight: 500;
  text-align: center;
  font-size: clamp(18px, 2.3vw, 23px);
  letter-spacing: 0.10em;
  color: #06345a;
}

.lead-break{
  display: none;
}

@media (max-width: 500px){
  .lead-break{
    display: inline;
  }
}

.p4__title{
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 3.6vw, 34px);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.p4List{
  margin-top: clamp(38px, 5vw, 60px);
}

.p4Spot{
  margin-top: clamp(57px, 9vw, 101px);
}

.p4Spot__bar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
}

.p4Spot__barMain{ display: contents; }

.p4Spot__name{
  grid-column: 2 / 3;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  padding: 0;
  color: #06345a;
  font-size: clamp(13px, 2.1vw, 20px);
  letter-spacing: 0.12em;
  align-self: end;
  transform: translateY(clamp(18px, .9vw, 24px));
}

.p4Spot__map{
  grid-column: 3 / 4;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0 calc(clamp(8px, 1.4vw, 14px) + clamp(40px, 15vw, 80px)) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
  position: static;
  transform: translateY(clamp(18px, .9vw, 24px));
}

.p4Spot__map:link,
.p4Spot__map:visited,
.p4Spot__map:hover,
.p4Spot__map:active{
  text-decoration: none;
}

.p4Spot__mapLabel{
  font-size: clamp(13px, 2.1vw, 20px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #06345a;
}

.p4Spot__mapArrow{
  font-size: clamp(13px, 2.1vw, 20px);
  line-height: 1;
  color: rgba(255,255,255,0.85);
}

.p4Spot__line{
  grid-column: 2 / 4;
  grid-row: 2;
  width: 100%;
  height: 2.5px;
  background: rgba(255,255,255,0.65);
}

.art-break{
  display: none;
}

@media (min-width: 590px) and (max-width: 690px){
  .art-break{
    display: inline;
  }
}

.p4Spot__no{
  grid-column: 1 / 2;
  grid-row: 2;
  align-self: center;
  width: clamp(36px, 9vw, 92px);
  height: clamp(36px, 9vw, 92px);
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #7fbfc8;
  display: grid;
  place-items: center;
  font-size: clamp(20px, 4.2vw, 50px);
  font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  letter-spacing: 0.1em;
  padding-left: 0.05em;
}

.p4Spot__media{
  margin-top: clamp(16px, 2.6vw, 22px);
  margin-bottom: clamp(16px, 2.4vw, 20px);
  position: relative;
  overflow: hidden;
  width: min(860px, 100%);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1018 / 580;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
}

.p4Spot__track{
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform 700ms ease;
}

.p4Spot__track img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p4Spot__desc{
  color: rgba(19,43,54,0.82);
  font-size: clamp(13px, .9vw, 18px);
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 840px;
  margin: clamp(20px, 3.4vw, 36px) auto;
}

.pc-br{
  display: inline;
}

@media (max-width: 590px){
  .pc-br{
    display: none;
  }
  .p4Spot__desc{
    text-align: justify;
    text-justify: inter-ideograph;
    text-align-last: left;
  }
}

@media (max-width: 768px){
  :root{
    --p4Side: 16px;
  }

  .p4__inner{
    width: calc(100% - 32px);
  }

  .p4Spot__name{
    font-size: clamp(12px, 4.0vw, 18px);
    transform: translateY(2px);
  }

  .p4Spot__mapLabel,
  .p4Spot__mapArrow{
    font-size: clamp(12px, 4.0vw, 18px);
  }

  .p4Spot__map{
    margin-right: 6px;
    gap: 6px;
    transform: translateY(2px);
  }

  .p4Spot__media{
    width: 100%;
    width: calc(100% - (var(--p4Side) * 2));
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1018 / 580;
  }
  .p4Spot__desc{
    width: calc(100% - (var(--p4Side) * 2));
    margin-left: auto;
    margin-right: auto;
  }
}

.Footer{
  background:#f4f4f4;
}

.Footer__top{
  width:min(1100px, calc(100% - 56px));
  margin:0 auto;
  padding: clamp(54px, 8.5vw, 96px) 0;
  text-align:center;
}

.Footer__title{
  margin:0 0 clamp(21px, 3.3vw, 27px);
  font-size: clamp(27px, 3.3vw, 36px);
  letter-spacing: 0.12em;
  color:#132b36;
  font-weight:500;
}

.Footer__primaryBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: min(320px, 100%);
  padding: 14px 22px;
  background:#4f67c7;
  color:#fff;
  text-decoration:none;
  border-radius: 2px;
  letter-spacing: 0.12em;
  font-size: clamp(13px, 1.4vw, 16px);
}

.Footer__tiles{
  margin-top: clamp(88px, 12.8vw, 128px);
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5.2vw, 44px);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.Footer__tile{
  display:block;
  border: 1px solid rgba(19,43,54,0.18);
  background:#fff;
  overflow:hidden;
  border-radius: 2px;
}

.Footer__tile img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 667 / 197;
  object-fit: cover;
}

.Footer__bar{
  background: #413c3c;
}

.Footer__barInner{
  width:min(1100px, calc(100% - 56px));
  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: clamp(28px, 4.4vw, 40px) 0;
  gap: clamp(16px, 3vw, 36px);
}

.Footer__logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding-left: clamp(8px, 1.4vw, 18px);
}

.Footer__logo img{
  height: clamp(28px, 3.2vw, 42px);
  width:auto;
  display:block;
}

.Footer__actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap: clamp(10px, 1.6vw, 16px);
}

.Footer__barBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: clamp(36px, 4.2vw, 44px);
  padding: 0 clamp(14px, 2vw, 20px);

  border: 1.2px solid rgba(255,255,255,0.68);
  color: rgba(255,255,255,0.88);
  text-decoration:none;
  letter-spacing: 0.10em;
  font-size: 13px;
  background: transparent;
  border-radius: 2px;

  white-space: nowrap;
  min-width: 140px;
}

.Footer__reserve{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  min-width: 160px;
}

.Footer__barBtn--reserve{
  width:100%;
}

.Footer__barBtnMain{
  line-height:1.1;
}

.Footer__barBtnNote{
  width:100%;
  text-align:center;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.70);
  line-height: 1.2;
}

.Footer__bottom{
  background:#ffffff;
  padding: 12px 0 clamp(33px, 3.5vw, 48px);
}

.Footer__copy{
  width:min(1100px, calc(100% - 56px));
  margin:0 auto;
  text-align:center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #413c3c;
}

@media (max-width: 768px){
  .Footer__top,
  .Footer__barInner,
  .Footer__copy{
    width: calc(100% - 32px);
  }

  .Footer__tiles{
    grid-template-columns: 1fr;
  }

  .Footer__actions{
    justify-content:center;
    flex-wrap:wrap;
  }

  .Footer__barBtn{
    min-width: min(220px, 100%);
  }

  .Footer__reserve{
    min-width: min(220px, 100%);
  }
}


.p1Route{
  position: relative;
  isolation: isolate;
}

.routeFish{
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(100px, 11vw, 200px); 
  height: auto;
  opacity: .55;
  pointer-events: none;
  z-index: 0; 
  transform: rotate(0deg);

  offset-path: path("M -220 120 C 120 40, 320 60, 520 180 S 820 360, 1080 260 S 1380 120, 1760 220");
  offset-distance: 0%;
  offset-rotate: auto;

  animation: routeSwim 16s linear infinite;
}

@keyframes routeSwim{
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .routeFish{ animation: none; }
}


.p2QaRoute{
  position: relative;
  isolation: isolate;
}

.p2QaFish{
  position: absolute;
  left: 0;
  top: 0;

  width: clamp(180px, 22vw, 360px);
  height: auto;

  opacity: .55;
  pointer-events: none;
  z-index: 0;

  offset-position: 100% 0%;
  transform: translateX(120px);

  offset-path: path(
    "M 1460 220 C 980 140, 760 160, 600 240 S 320 360, 120 300 S -120 220, -260 260"
  );

  offset-distance: 0%;
  offset-rotate: 0deg;

  animation: p2QaFishPass 16s linear infinite;
  will-change: offset-distance, opacity, transform;
}

@keyframes p2QaFishPass{
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: .55; }
  90% { opacity: .55; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .p2QaFish{
    animation: none;
    opacity: .25;
  }
}


.p3NearRoute{
  position: relative;
  isolation: isolate;
}

.p3NearFish{
  position: absolute;
  left: 0;
  top: 0;

  width: clamp(100px, 11vw, 200px);
  height: auto;

  opacity: .55;
  pointer-events: none;
  z-index: 0;
  transform: rotate(0deg);

  offset-path: path(
    "M -260 110 C 60 80, 240 60, 420 100 S 760 220, 980 120 S 1180 40, 1760 200"
  );

  offset-distance: 0%;
  offset-rotate: auto;

  animation: routeSwim 16s linear infinite;
  will-change: offset-distance, opacity;
}

@keyframes routeSwim{
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  6% {
    opacity: .55;
  }
  92% {
    opacity: .55;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .p3NearFish{ animation: none; }
}