@charset "utf-8";

.banana-service {
  width: 100%;
  margin: 1px auto 0;
  overflow: hidden;
  background: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
}

.service-stage {
  position: relative;
  width: 390px;
  height: 4444px;
  zoom: var(--banana-stage-scale, 1);
  margin: 0;
  overflow: hidden;
  background: #ffffff;
}

.service-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.service-background,
.service-decoration,
.hero-copy,
.capabilities-heading,
.capabilities-list,
.service-note,
.flow-heading,
.flow-list,
.cost-copy,
.cost-photo {
  position: absolute;
  box-sizing: border-box;
}

.service-background {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.service-decoration {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.hero-copy p,
.capabilities-heading p,
.service-note h2 {
  margin: 0;
  letter-spacing: 0;
}

.service-mobile-hero-background,
.service-mobile-card-background,
.service-mobile-flow-background,
.service-mobile-flow-background img {
  position: absolute;
  display: block;
}

.service-mobile-hero-background {
  left: 0;
  top: 0;
  width: 390px;
  height: 693px;
  object-fit: cover;
  z-index: 0;
}

.service-desktop-hero-background,
.service-desktop-card-background,
.service-desktop-flow-background {
  display: none;
}

.service-hero {
  width: 390px;
  height: 693px;
}

.hero-copy {
  left: 34px;
  top: 252px;
  width: 311px;
  z-index: 2;
}

.hero-copy h1 {
  color: #092a69;
  font-size: 38px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.hero-copy p {
  margin-top: 14px;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.hero-left-boat {
  left: 20px;
  top: 495px;
  width: 177px;
  height: 151px;
}

.hero-sun {
  left: 261px;
  top: 43px;
  width: 104px;
  height: 104px;
}

.hero-right-banana {
  left: 223px;
  top: 522px;
  width: 142px;
  height: 142px;
}

.service-capabilities {
  height: 720px;
}

.service-mobile-card-background {
  max-width: none;
  object-fit: cover;
  transform-origin: top left;
  z-index: 0;
}

.service-mobile-card-background-top {
  top: 0;
  object-position: left center;
}

.service-mobile-card-background-bottom {
  object-position: right center;
}

.service-capabilities .service-mobile-card-background {
  left: 9px;
  width: 360px;
  height: 372px;
  transform: translateX(372px) rotate(90deg);
}

.service-capabilities .service-mobile-card-background-bottom {
  top: 360px;
}

.service-notes .service-mobile-card-background {
  left: 9px;
  width: 320px;
  height: 372px;
  transform: translateX(372px) rotate(90deg);
}

.service-notes .service-mobile-card-background-bottom {
  top: 320px;
}

.service-cost .service-mobile-card-background {
  left: 0;
  width: 360px;
  height: 366px;
  transform: translateX(366px) rotate(90deg);
}

.service-cost .service-mobile-card-background-bottom {
  top: 360px;
}

.service-capabilities .service-desktop-card-background,
.service-notes .service-desktop-card-background,
.service-cost .service-desktop-card-background {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.capabilities-heading {
  left: 38px;
  top: 42px;
  width: 314px;
  text-align: center;
  z-index: 2;
}

.capabilities-heading h2,
.cost-copy h2 {
  color: #0160b8;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

.capabilities-heading p {
  width: 300px;
  margin-top: 12px;
  margin-right: auto;
  margin-left: auto;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
}

.capabilities-heading br {
  display: none;
}

.capabilities-list {
  left: 47px;
  top: 184px;
  display: flex;
  flex-wrap: wrap;
  width: 296px;
  z-index: 2;
}

.capability-item {
  width: 135px;
  margin-right: 26px;
  margin-bottom: 26px;
  text-align: center;
}

.capability-item:nth-child(2),
.capability-item:nth-child(4) {
  margin-right: 0;
}

.capability-item:nth-child(5) {
  margin-left: 80px;
  margin-right: 0;
  margin-bottom: 0;
}

.capability-photo {
  position: relative;
  width: 111px;
  height: 111px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.capability-photo img {
  position: absolute;
  left: -43px;
  top: -11px;
  display: block;
  width: 197px;
  height: 132px;
  max-width: none;
  object-fit: cover;
}

.capability-item p {
  margin-top: 8px;
  color: #0160b8;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.capabilities-coral {
  left: 301px;
  top: 12px;
  width: 82px;
  height: 82px;
}

.capabilities-bubbles {
  left: -25px;
  top: 565px;
  width: 120px;
  height: 120px;
}

.service-notes {
  height: 640px;
}

.service-note {
  left: 45px;
  width: 300px;
  text-align: center;
  z-index: 2;
}

.note-connections {
  top: 48px;
}

.note-schedule {
  top: 326px;
}

.service-note img {
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.note-connections img {
  width: 79px;
  height: 54px;
}

.note-schedule img {
  width: 64px;
  height: 64px;
}

.service-note h2 {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.note-connections h2 {
  color: #4da900;
}

.note-schedule h2 {
  margin-top: 6px;
  color: #0160b8;
}

.service-note p {
  margin-top: 16px;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
}

.note-schedule p {
  margin-top: 12px;
}

.notes-coral-left {
  left: -18px;
  top: 30px;
  width: 112px;
  height: 75px;
}

.notes-coral-right {
  left: 306px;
  top: 310px;
  width: 82px;
  height: 82px;
}

.service-flow {
  position: relative;
  left: 0;
  top: 0;
  width: 390px;
  height: 1671px;
}

.service-mobile-flow-background {
  left: 0;
  width: 390px;
  overflow: hidden;
  z-index: 0;
}

.service-mobile-flow-background-top {
  top: 0;
  height: 926px;
}

.service-mobile-flow-background-bottom {
  top: 607px;
  height: 1064px;
}

.service-mobile-flow-background img {
  left: -106px;
  width: 602px;
  height: 1806px;
  max-width: none;
}

.service-mobile-flow-background-top img {
  top: 0;
}

.service-mobile-flow-background-bottom img {
  top: -882px;
  height: 1946px;
}

.flow-heading {
  left: 35px;
  top: 40px;
  width: 320px;
  text-align: center;
  z-index: 2;
}

.flow-heading h2 {
  color: #0160b8;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

.flow-heading p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.flow-list {
  left: 45px;
  top: 168px;
  display: flex;
  flex-flow: column nowrap;
  gap: 30px;
  width: 300px;
  z-index: 2;
}

.flow-card {
  position: relative;
  width: 300px;
  min-height: 147px;
  padding: 40px 16px 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.flow-number {
  position: absolute;
  left: 50%;
  top: -14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0064be;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transform: translateX(-50%);
}

.flow-card h3 {
  color: #0064be;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.service-section h1,
.service-section h2,
.service-section h3,
.service-section p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.flow-card p {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.flow-card br {
  display: none;
}

.service-cost {
  width: 366px;
  height: 720px;
  margin-left: 12px;
}

.cost-copy {
  left: 28px;
  top: 52px;
  width: 310px;
  z-index: 3;
}

.cost-copy p {
  width: 300px;
  margin-top: 12px;
  margin-right: auto;
  margin-left: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: left;
}

.cost-copy h2 {
  text-align: center;
}

.cost-copy br {
  display: none;
}

.cost-copy a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 192px;
  height: 48px;
  margin-top: 24px;
  border-radius: 8px;
  background: #0069c4;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.cost-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.cost-photo-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 7px solid #ffffff;
  border-radius: 8px;
  object-fit: cover;
}

.cost-photo-left {
  left: 26px;
  top: 334px;
  width: 170px;
  height: 130px;
}

.cost-photo-center {
  left: 170px;
  top: 370px;
  width: 170px;
  height: 132px;
}

.cost-photo-right {
  left: 96px;
  top: 512px;
  width: 178px;
  height: 132px;
}

.cost-photo-left .cost-photo-frame {
  transform: rotate(-5deg);
}

.cost-photo-center .cost-photo-frame {
  transform: rotate(9deg);
}

.cost-photo-right .cost-photo-frame {
  transform: rotate(1deg);
}

.cost-tape-blue,
.cost-tape-yellow,
.cost-tape-pink {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.cost-tape-blue {
  left: 34px;
  top: 316px;
  width: 62px;
  height: 48px;
}

.cost-tape-yellow {
  left: 220px;
  top: 350px;
  width: 62px;
  height: 48px;
}

.cost-tape-pink {
  left: 145px;
  top: 491px;
  width: 58px;
  height: 48px;
}

.cost-tape-blue img,
.cost-tape-yellow img,
.cost-tape-pink img {
  width: 54px;
  height: 33px;
}

.cost-tape-blue img {
  transform: rotate(-30deg);
}

.cost-tape-yellow img {
  transform: rotate(-156deg);
}

.cost-tape-pink img {
  transform: rotate(-46deg);
}

.cost-shell {
  left: 286px;
  top: 6px;
  width: 82px;
  height: 82px;
  transform: rotate(-20deg);
}

@media (min-width: 768px) {
  .service-stage {
    width: 1000px;
    height: auto;
    margin: 0 auto;
  }

  .service-mobile-hero-background,
  .service-mobile-card-background,
  .service-mobile-flow-background {
    display: none;
  }

  .service-desktop-hero-background,
  .service-desktop-card-background,
  .service-capabilities,
  .service-notes,
  .service-cost,
  .service-desktop-flow-background,
  .flow-heading {
    display: block;
  }

  .service-capabilities .service-background,
  .service-notes .service-background,
  .service-cost .service-background {
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: none;
  }

  .capabilities-heading br,
  .cost-copy br {
    display: inline;
  }

  .capability-item,
  .capability-item:nth-child(2),
  .capability-item:nth-child(4),
  .capability-item:nth-child(5) {
    margin-left: 0;
    margin-bottom: 0;
  }

  .capabilities-list {
    flex-wrap: nowrap;
    width: auto;
  }

  .capability-item:nth-child(2),
  .capability-item:nth-child(4) {
    margin-right: 24px;
  }

  .capability-item:nth-child(5) {
    margin-right: 0;
  }

  .service-hero,
  .service-flow {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .flow-list {
    flex-flow: row wrap;
    gap: 30px 16px;
  }

  .flow-card {
    width: 210px;
    height: 164px;
    min-height: 0;
    padding: 40px 16px 0;
  }

  .flow-card br {
    display: inline;
  }

.service-hero {
  height: 333px;
}

.hero-copy {
  left: 0;
  top: 108px;
  width: 1000px;
  text-align: center;
  z-index: 2;
}

.hero-copy h1 {
  color: #092a69;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-copy p {
  margin-top: 24px;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

.hero-left-boat { left: 35px; top: 183px; width: 140px; height: 119px; }
.hero-sun { left: 752px; top: 53px; width: 98px; height: 98px; }
.hero-right-banana { left: 825px; top: 169px; width: 148px; height: 148px; }

.service-capabilities {
  height: 333px;
}

.capabilities-heading {
  left: 213px;
  top: 34px;
  width: 574px;
  text-align: center;
  z-index: 2;
}

.capabilities-heading h2,
.flow-heading h2,
.cost-copy h2 {
  color: #0160b8;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}

.capabilities-heading p {
  width: auto;
  margin-top: 12px;
  margin-right: 0;
  margin-left: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
}

.capabilities-list {
  left: 175px;
  top: 136px;
  display: flex;
  z-index: 2;
}

.capability-item {
  width: 111px;
  margin-right: 24px;
  text-align: center;
}

.capability-item:last-child { margin-right: 0; }

.capability-photo {
  position: relative;
  width: 111px;
  height: 111px;
  border-radius: 50%;
  overflow: hidden;
}

.capability-photo img {
  position: absolute;
  left: -42.75px;
  top: -10.5px;
  display: block;
  width: 197.05px;
  height: 131.383px;
  max-width: none;
  object-fit: cover;
}

.capability-item p {
  margin-top: 8px;
  color: #0160b8;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.capabilities-coral { left: 891px; top: 12px; width: 101px; height: 101px; }
.capabilities-bubbles { left: -31px; top: 248px; width: 145px; height: 145px; }

.service-notes {
  height: 333px;
}

.service-note {
  top: 71px;
  width: 383px;
  text-align: center;
  z-index: 2;
}

.note-connections { left: 87px; }
.note-schedule { left: 530px; }

.service-note img {
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.note-connections img { width: 79px; height: 54px; }
.note-schedule img { width: 64px; height: 64px; }

.service-note h2 {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.note-connections h2 { color: #4da900; }
.note-schedule h2 { margin-top: 6px; color: #0160b8; }

.service-note p {
  margin-top: 16px;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
}

.note-schedule p {
  margin-top: 12px;
}

.notes-coral-left { left: -20px; top: 39px; width: 137px; height: 91px; }
.notes-coral-right { left: 872px; top: 17px; width: 111px; height: 111px; }

.service-flow {
  height: 577px;
}

.service-flow .service-background {
  height: 563px;
}

.flow-heading {
  left: 286px;
  top: 41px;
  width: 429px;
  text-align: center;
  z-index: 2;
}

.flow-heading p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.flow-list {
  left: 49px;
  top: 147px;
  width: 903px;
  z-index: 2;
}

.flow-number {
  font-size: 20px;
}

.service-cost {
  margin-left: 13px;
  width: 971px;
  height: 324px;
}

.cost-copy {
  left: 50px;
  top: 74px;
  width: 393px;
  z-index: 3;
}

.cost-copy p {
  width: auto;
  margin-top: 12px;
  margin-right: 0;
  margin-left: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.cost-copy h2 {
  text-align: left;
}

.cost-copy a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 192px;
  height: 48px;
  margin-top: 29px;
  border-radius: 8px;
  background: #0069c4;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.cost-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.cost-photo-frame {
  display: block;
  width: 177.705px;
  height: 131.298px;
  border: 7px solid #ffffff;
  border-radius: 8px;
  object-fit: cover;
}

.cost-photo-left { left: 443px; top: 46px; width: 187.799px; height: 145.322px; }
.cost-photo-center { left: 583px; top: 75px; width: 197.529px; height: 159.735px; }
.cost-photo-right { left: 753px; top: 143px; width: 178.078px; height: 131.803px; }
.cost-photo-left .cost-photo-frame { transform: rotate(-4.67deg); }
.cost-photo-center .cost-photo-frame { transform: rotate(9.84deg); }
.cost-photo-right .cost-photo-frame { transform: rotate(0.16deg); }
.cost-tape-blue,
.cost-tape-yellow,
.cost-tape-pink {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.cost-tape-blue { left: 453px; top: 26px; width: 71.09px; height: 59.912px; }
.cost-tape-yellow { left: 646px; top: 53px; width: 72.158px; height: 60.172px; }
.cost-tape-pink { left: 805px; top: 108px; width: 60.982px; height: 61.434px; }
.cost-tape-blue img { width: 62.88px; height: 33.24px; transform: rotate(-29.53deg); }
.cost-tape-yellow img { width: 62px; height: 38.037px; transform: rotate(-155.71deg); }
.cost-tape-pink img { width: 53.655px; height: 32.917px; transform: rotate(-45.88deg); }
.cost-shell { left: 878px; top: -18px; width: 106.956px; height: 106.956px; transform: rotate(-19.8deg); }
}

/* SiblooのStyle Manager非対応ルールをeditor CSSから分離 */
* {
  box-sizing: border-box
}

* {
  box-sizing: border-box
}