header .logo span,
header .nav li {
  -webkit-text-stroke: .35em #fff;
  text-stroke: .35em #fff;
  paint-order: stroke;
}
header .nav li > a:hover{
  text-decoration-color: #333 ;
}
#open-service-modal .toggle-icon:before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 2px;
  border: solid 2px #fff;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
#open-service-modal .toggle-icon:after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 16px;
  border: solid 2px #fff;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  transition: transform 0.3s ease;
}
#open-service-modal.open .toggle-icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.firstview-wrapper {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  background: #ebf6fc;
  overflow: hidden;
  margin-top: -120px;
}
/* 雲と太陽 */
.sky-wrapper {
  position: absolute;
  top: 100px;
  width: 100%;
  height: 11vh;
}
.sky-wrapper .cloud-wrapper {
  background-image: url('../img/firstview/cloud.svg');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center center;
  animation: cloud-move 70s linear infinite;
}
.sky-wrapper .cloud-wrapper img {
  visibility: hidden;
  position: absolute;
}
.sky-wrapper .sun-wrapper {
  position: absolute;
  width: auto;
  top: 0;
  right: 80px;
  padding: 0 40px;
  background: #ebf6fc;
  background: linear-gradient(90deg,rgba(235, 246, 252, 0.01) 0%, rgba(235, 246, 252, 1) 25%, rgba(235, 246, 252, 1) 75%, rgba(235, 246, 252, 0) 100%);
}
.sky-wrapper .sun-wrapper img {
  width: 8em;
  height: auto;
}
@keyframes cloud-move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -750px 0;
  }
}
/* 街並み */
.firstview-wrapper .town-wrapper {
  position: relative;
  z-index: 0;
}
.firstview-wrapper .town-wrapper .town {
  height: 500px;
  max-height: 40vh;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: 50% bottom;
}
.firstview-wrapper .town-wrapper .town.bg1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/firstview/firstview_3_bg_1.svg');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: 50% bottom;
}
.firstview-wrapper .town-wrapper .town.bg2 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/firstview/firstview_3_bg_2.svg');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: 50% bottom;
}
.firstview-wrapper .town-wrapper .town.front {
  position: relative;
  background-image: url('../img/firstview/firstview_3_fr.svg');
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: 50% bottom;
}
.firstview-wrapper .town-wrapper .town img{
  visibility: hidden;
  position: absolute;
}
.firstview-wrapper .town-wrapper .hall-wrapper {
  position: absolute;
  width: 100%;
  bottom: 30%;
  height: 70%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
}
.firstview-wrapper .town-wrapper .hall {
  aspect-ratio: 356/365;
  height: 100%;
  left: 2.8vh;
  position: relative;
  perspective: 300px;
}
.firstview-wrapper .town-wrapper .hall img {
  transform-origin: center bottom;
  transform: scaleX(1) scaleY(1);
}
.firstview-wrapper.active .town-wrapper .hall img {
  /* アニメーションの共通設定 */
  animation-name: hallbouns;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-duration: 1.5s;
  animation-delay: 0s;
}
.firstview-wrapper .rainbow-wrapper {
  position: absolute;
  width: 100%;
  bottom: 35%;
  height: 130%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
}
.firstview-wrapper .rainbow-wrapper svg{
  position: relative;
  height: 90%;
  width: auto;
  transform: scaleX(1.15);
  left: 2.8vh;
}
#rainbow .rainbow-1, #rainbow .rainbow-2, #rainbow .rainbow-3, #rainbow .rainbow-4, #rainbow .rainbow-5, #rainbow .rainbow-6, #rainbow .rainbow-7 { fill: none; opacity: .8; stroke-miterlimit: 10; stroke-width: 14px; }
#rainbow .rainbow-1 { stroke: #62afe2; }
#rainbow .rainbow-2 { stroke: #9b8dc2; }
#rainbow .rainbow-3 { stroke: #f3a178; }
#rainbow .rainbow-4 { stroke: #fff251; }
#rainbow .rainbow-5 { stroke: #eb6d6c; }
#rainbow .rainbow-6 { stroke: #b4d580; }
#rainbow .rainbow-7 { stroke: #3a79ce; }
#rainbow .rpath {
  -webkit-transition: stroke-dashoffset 1.0s cubic-bezier(0.47, 0, 0.745, 0.715) .3s;
          transition: stroke-dashoffset 1.0s cubic-bezier(0.47, 0, 0.745, 0.715) .3s;
}
#rainbow .rainbow-1 {
  stroke-dashoffset: 2452.801513671875px;
  stroke-dasharray: 2452.801513671875px;
}
.active #rainbow .rainbow-1 {
  stroke-dashoffset: 4905.60302734375px;
}
#rainbow .rainbow-2 {
  stroke-dashoffset: 2364.793701171875px;
  stroke-dasharray: 2364.793701171875px;
}
.active #rainbow .rainbow-2 {
  stroke-dashoffset: 4729.58740234375px;
}
#rainbow .rainbow-3 {
  stroke-dashoffset: 2540.7236328125px;
  stroke-dasharray: 2540.7236328125px;
}
.active #rainbow .rainbow-3 {
  stroke-dashoffset: 5081.447265625px;
}
#rainbow .rainbow-4 {
  stroke-dashoffset: 2584.771484375px;
  stroke-dasharray: 2584.771484375px;
}
.active #rainbow .rainbow-4 {
  stroke-dashoffset: 5169.54296875px;
}
#rainbow .rainbow-5 {
  stroke-dashoffset: 2628.732666015625px;
  stroke-dasharray: 2628.732666015625px;
}
.active #rainbow .rainbow-5 {
  stroke-dashoffset: 5257.46533203125px;
}
#rainbow .rainbow-6 {
  stroke-dashoffset: 2496.762451171875px;
  stroke-dasharray: 2496.762451171875px;
}
.active #rainbow .rainbow-6 {
  stroke-dashoffset: 4993.52490234375px;
}
#rainbow .rainbow-7 {
  stroke-dashoffset: 2408.842529296875px;
  stroke-dasharray: 2408.842529296875px;
}
.active #rainbow .rainbow-7 {
  stroke-dashoffset: 4817.68505859375px;
}

/* ビルの伸び縮み */
@keyframes hallbouns {
  0% { transform: scaleX(1) scaleY(1); }
  10% { transform: scaleX(1.2) scaleY(.8); }
  30% { transform: scaleX(1) scaleY(1.2); }
  60% { transform: scaleX(0.9) scaleY(1.5); }
  70% { transform: scaleX(1) scaleY(1); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* テキスト */
.firstview-wrapper .top_text_wrapper {
  font-size: 1em;
  margin: 0;
  position: absolute;
  width: 520px;
  height: 90vh;
  left: calc(50% - 260px );
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  -webkit-text-stroke: .7em #fff;
  text-stroke: .7em #fff;
  paint-order: stroke;
  transition: left 1s ease-out 1s, opacity 2s ease-out 0s;
  opacity: 0;
}
.firstview-wrapper .top_text_wrapper .top {
  font-size: clamp(28px, calc(28px + (56 - 28) * ((100vw - 375px) / (1366 - 375))), 56px);
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: -.165em;
  text-decoration-thickness: .385em;
}
.firstview-wrapper .top_text_wrapper .cooppands {
  font-size: clamp(16px, calc(16px + (32 - 16) * ((100vw - 375px) / (1366 - 375))), 32px);
  margin-top: 1em;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: -.35em;
  text-decoration-thickness: .8em;
}
.firstview-wrapper.active .top_text_wrapper {
  opacity: 1;
}
.firstview-wrapper.active.act2 .top_text_wrapper {
  left: calc(50% + 20vw - 260px );
}
.firstview-wrapper.active.act2.animated .top_text_wrapper{
  transition: none;
}

/* 風船 */
.balloon-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}
.balloon-wrapper .photo {
  position: absolute;
  height: 20vh;
  aspect-ratio: 1/1;
  border-radius: 9999px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(15vh);
  transition: opacity 1.5s ease-out .5s, transform 1.5s ease-out .5s;
}
.balloon-wrapper .photo.ph1,
.balloon-wrapper .photo.ph3,
.balloon-wrapper .photo.ph5 {
  transform: translateY(10vh);
}
.active.act2.animated .balloon-wrapper .photo {
  transition: none;
  animation: swayud 3s ease-in-out infinite alternate;
}
.active.act2.animated .balloon-wrapper .photo.ph1 {
  animation: swayud 3s ease-in-out infinite alternate;
}
.active.act2.animated .balloon-wrapper .photo.ph3,
.active.act2.animated .balloon-wrapper .photo.ph5 {
  animation: swayud 3s ease-in-out infinite alternate .5s;
}
.active.act2.animated .balloon-wrapper .photo.ph2,
.active.act2.animated .balloon-wrapper .photo.ph4 {
  animation: swayud 3.5s ease-in-out infinite alternate .5s;
}
.active.act2 .balloon-wrapper .photo {
  opacity: 1;
  transform: translateY(-10px);
}
.balloon-wrapper .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.balloon-wrapper .photo .phslide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.3s ease-out 0s;
}
.balloon-wrapper .photo .phslide.current {
  opacity: 1;
}
.balloon-wrapper .photo.ph1 {
  height: 46vh;
  top: 50vh;
  right: 50vw;
  margin-top: -23vh;
  margin-right: 7vw;
}
.balloon-wrapper .photo.ph2 {
  height: 22vh;
  bottom: 50vh;
  right: 50vw;
  margin-bottom: 15vh;
  margin-right: 34.5vw;
}
.balloon-wrapper .photo.ph3 {
  height: 27vh;
  top: 0vh;
  right: 50vw;
  margin-top: -5vh;
  margin-right: 0;
}
.balloon-wrapper .photo.ph4 {
  height: 22vh;
  bottom: 50vh;
  left: 50vw;
  margin-bottom: 22vh;
  margin-left: 7vw;
}
.balloon-wrapper .photo.ph5 {
  height: 18vh;
  bottom: 15vh;
  right: 50vw;
  margin-top: -23vh;
  margin-right: 39.5vw;
}
.balloon {
  position: absolute;
  width: 60px;
  animation: sway 2.5s ease-in-out infinite alternate;
}
.balloon img {
  opacity: 0;
  transform: translateY(15vh);
  transition: all 1s ease-out 1s;
}
.firstview-wrapper.active.act2 .balloon img {
  transform: translateY(-10px);
  opacity: 1;
}
.firstview-wrapper.active.act2.animated .balloon.red img,
.firstview-wrapper.active.act2.animated .balloon.pink img {
  animation: swayud 2s ease-in-out infinite alternate .5s;
}
.firstview-wrapper.active.act2.animated .balloon.blue img
.firstview-wrapper.active.act2.animated .balloon.green img {
  animation: swayud 2.2s ease-in-out infinite alternate .7s;
}
.firstview-wrapper.active.act2.animated .balloon.yellow img,
.firstview-wrapper.active.act2.animated .balloon.brown img {
  animation: swayud 1.8s ease-in-out infinite alternate .3s;
}
.firstview-wrapper .balloon.blue {
  left: 50vw;
  margin-left: 18vw;
  top: 0;
  margin-top: -3vh;
}
.firstview-wrapper .balloon.green {
  right: 50vw;
  margin-right: 36vw;
  top: 50vh;
  margin-top: 6vh;
}
.firstview-wrapper .balloon.red {
  right: 50vw;
  margin-right: 28vw;
  top: 5vh;
}
.firstview-wrapper .balloon.yellow {
  right: 50vw;
  margin-right: 2vw;
  bottom: 50vh;
  margin-bottom: 8vh;
}
.firstview-wrapper .balloon.brown {
  left: 50vw;
  margin-left: 43vw;
  bottom: 50vh;
  margin-bottom: -8vh;
}
.firstview-wrapper .balloon.pink {
  left: 50vw;
  margin-left: 30vw;
  top: 50vh;
  margin-top: 15vh;
}

/* 全員共通の基本スタイル */
.person {
  position: absolute;
  height: 12vw; 
  max-height: 120px;
  min-height: 50px;
  aspect-ratio: 400 / 350; 
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  /* 初期位置：画面の左側に完全に隠す */
  left: -50%; 
  pointer-events: none;
  transition: opacity 2s ease 0s;
  /* アニメーションの共通設定 */
  animation-name: walkAcross;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.firstview-wrapper.active.act2 .person {
  opacity: 1;
}

/* --- 個別設定（画像・スピード・高さ・開始位置） --- */
.p3 { background-image: url('../img/top/3_anime.png'); bottom: 3%; z-index: 10; animation-duration: 90s; animation-delay: -5s; }
.p2 { background-image: url('../img/top/2_anime.png'); bottom: 3%; z-index: 11; animation-duration: 120s; animation-delay: -20s; }
.p0 { background-image: url('../img/top/0_anime.png'); bottom: 3%; z-index: 12; animation-duration: 90s; animation-delay: -40s; }
.p6 { background-image: url('../img/top/6_anime.png'); bottom: 3%; z-index: 12; animation-duration: 90s; animation-delay: -60s; }

.p1 { background-image: url('../img/top/1_anime.png'); bottom: 2%; z-index: 20; animation-duration: 60s; animation-delay: -10s; }
.p4 { background-image: url('../img/top/4_anime.png'); bottom: 2%; z-index: 21; animation-duration: 60s; animation-delay: -25s; }
.p7 { background-image: url('../img/top/7_anime.png'); bottom: 2%; z-index: 22; animation-duration: 60s; animation-delay: -40s; }
.p8 { background-image: url('../img/top/8_anime.png'); bottom: 2%; z-index: 23; animation-duration: 60s; animation-delay: -55s; }

.p5 { background-image: url('../img/top/5_anime.png'); bottom: 1%; z-index: 30; animation-duration: 25s; animation-delay: -5s; }

/* PC用のアニメーション移動距離 */
@keyframes walkAcross {
  0% { left: -30%; }
  100% { left: 110%; }
}

/* ★スマホ用の調整：密集回避と見切れ設定★ */
@media screen and (max-width: 768px) {
  .person {
    height: 18vw !important; 
    max-height: none !important;
    min-height: 80px;
    left: -80%;
  }
.p5{animation-duration: 15s!important;}

  @keyframes walkAcross {
    0% { left: -80%; } /* はるか左からスタート */
    100% { left: 100%; } /* はるか右まで歩かせて完全に見切る */
  }
}
@keyframes sway {
  from { transform: translateX(-20px); }
  to   { transform: translateX(20px); }
}
@keyframes swayud {
  from { transform: translateY(-10px) }
  to   { transform: translateY(10px) }
}

@media screen and (max-width: 768px){
  .firstview-wrapper {
    margin-top: 0;
    height: calc(100vh - 120px);
  }
  /* 雲と太陽 */
  .sky-wrapper {
    position: absolute;
    top: 4px;
    width: 100%;
    height: 8vh;
  }
  .sky-wrapper .sun-wrapper {
    right: 0;
    padding: 0 40px;
    margin-right: -60px;
  }
  .sky-wrapper .sun-wrapper img {
    width: 6em;
  }

  /* 街並み */
  .firstview-wrapper .town-wrapper {
    position: relative;
  }
  .firstview-wrapper .town-wrapper .town {
    height: 500px;
    max-height: 26vh;
  }

  .firstview-wrapper .town-wrapper .hall {
    left: 1.8vh;
  }
  .firstview-wrapper .rainbow-wrapper svg{
    position: relative;
    height: 100%;
    width: auto;
    transform: scale(1.4);
    left: 1.8vh;
  }
  /* 虹 */
  .firstview-wrapper .rainbow-wrapper {
    bottom: 3vh;
  }

  /* テキスト */
  .firstview-wrapper .top_text_wrapper {
    height: 85vh;
    left: calc(50% - 260px );
  }
  .firstview-wrapper.active.act2 .top_text_wrapper {
    left: calc(50% - 260px );
  }

  /* 風船 */
  .balloon-wrapper .photo.ph1 {
    width: 50vw;
    height: auto;
    left: 50vw;
    margin-left: -25vw;
    top: unset;
    margin-top: 0;
    bottom: 50vh;
    margin-bottom: -2vh;
  }
  .balloon-wrapper .photo.ph2 {
    width: 23.6vw;
    height: auto;
    right: 50vw;
    margin-right: 28vw;
    bottom: 50vh;
    margin-bottom: 18vh;
  }
  .balloon-wrapper .photo.ph3 {
    width: 29.5vw;
    height: auto;
    left: 50vw;
    margin-left: 8vw;
    right: unset;
    margin-right: 0;
    top: unset;
    margin-top: 0;
    bottom: 50vh;
    margin-bottom: 24vh;
  }
  .balloon-wrapper .photo.ph4 {
    width: 23.6vw;
    height: auto;
    left: 50vw;
    margin-left: 36vw;
    right: unset;
    margin-right: 0;
    top: unset;
    margin-top: 0;
    bottom: 50vh;
    margin-bottom: 0;
  }
  .balloon-wrapper .photo.ph5 {
    width: 23.6vw;
    height: auto;
    right: 50%;
    margin-right: 38vw;
    left: umset;
    margin-left: 0;
    top: unset;
    margin-top: 0;
    bottom: 50vh;
    margin-bottom: -12vh;

  }
  .balloon {
    width: 40px;
  }
  .firstview-wrapper .balloon.red {
    left:unset;
    margin-left: 0;
    right: 50vw;
    margin-right: 20vw;
    top: unset;
    margin-top: 0;
    bottom: 50vh;
    margin-bottom: 24vh;
  }
  .firstview-wrapper .balloon.yellow {
    left: 50vw;
    margin-left: 24vw;
    right: unset;
    margin-right: 0;
    bottom: 50vh;
    margin-bottom: 10vh;
  }
  .firstview-wrapper .balloon.green {
    right: 50vw;
    margin-right: 32vw;
    top: unset;
    margin-top: 0;
    bottom: 50vh;
    margin-bottom: -4vh;
  }
  .firstview-wrapper .balloon.blue {
    left: 50vw;
    margin-left: 36vw;
    top: 50vh;
    margin-top: -8vh;
  }
  .firstview-wrapper .balloon.pink {
    left: unset;
    margin-left: 0;
    right: 50vw;
    margin-right: 30vw;
    top: 50vh;
    margin-top: 2vh;
  }
  .firstview-wrapper .balloon.brown {
    left: 50vw;
    margin-left: 30vw;
    top: 50vh;
    margin-top: 8vh;
    bottom: unset;
    margin-bottom: 0;
  }

}