@charset "utf-8";

.banana-feature {
  width: 100%;
  overflow: hidden;
  color: #000000;
  background: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
}

.banana-feature-stage {
  position: relative;
  width: 390px;
  height: 4780px;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  zoom: var(--banana-stage-scale, 1);
  background: #ffffff;
}

.banana-feature-stage * {
  box-sizing: border-box;
}

.banana-feature-stage h1,
.banana-feature-stage h2,
.banana-feature-stage h3,
.banana-feature-stage p {
  margin: 0;
}

.banana-feature-background,
.banana-feature-decoration,
.banana-feature-overview-background,
.banana-feature-photo,
.banana-feature-title-decoration,
.banana-feature-mobile-craft-background {
  position: absolute;
  display: block;
}

.banana-feature-hero-background,
.banana-feature-second-background,
.banana-feature-overview-background {
  display: none;
}

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

.banana-feature-mobile-custom-background {
  top: 1672px;
  left: 0;
  width: 390px;
  height: 1056px;
  object-fit: cover;
}

.banana-feature-first-background {
  top: 767px;
  left: 0;
  width: 904px;
  height: 430px;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translateX(410px) rotate(90deg);
  transform-origin: top left;
}

.banana-feature-mobile-craft-background {
  left: 1px;
  width: 388px;
  overflow: hidden;
}

.banana-feature-mobile-craft-background-top {
  top: 2738px;
  height: 605px;
}

.banana-feature-mobile-craft-background-bottom {
  top: 3205px;
  height: 549px;
}

.banana-feature-mobile-craft-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--banana-feature-craft-background-height);
  height: 388px;
  max-width: none;
  object-fit: cover;
  transform: translateX(388px) rotate(90deg);
  transform-origin: top left;
}

.banana-feature-mobile-craft-background-top img {
  --banana-feature-craft-background-height: 605px;
  object-position: left center;
}

.banana-feature-mobile-craft-background-bottom img {
  --banana-feature-craft-background-height: 549px;
  object-position: right center;
}

.banana-feature-hero-copy,
.banana-feature-title-decoration,
.banana-feature-overview > h2,
.banana-feature-cards,
.banana-feature-custom-copy,
.banana-feature-custom-rows,
.banana-feature-craft-copy,
.banana-feature-fit > h2,
.banana-feature-fit-list {
  position: absolute;
  z-index: 1;
}

.banana-feature-hero-copy {
  top: 186px;
  left: 34px;
  width: 311px;
}

.banana-feature-hero-copy h1 {
  width: 245px;
  color: #092a69;
  font-size: 38px;
  font-weight: 700;
  line-height: normal;
}

.banana-feature-hero-copy p {
  margin-top: 14px;
  width: 311px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.banana-feature-hero-coral {
  top: 575px;
  left: 32px;
  width: 88px;
  height: 88px;
  z-index: 1;
}

.banana-feature-hero-banana {
  top: 442px;
  left: 121px;
  width: 262px;
  height: 240px;
  z-index: 1;
}

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

.banana-feature-title-decoration {
  top: 700px;
  height: 64px;
  overflow: hidden;
}

.banana-feature-title-decoration-left {
  left: 80px;
  width: 56px;
}

.banana-feature-title-decoration-right {
  top: 703px;
  left: 250px;
  width: 61px;
}

.banana-feature-title-decoration img {
  position: absolute;
  top: -24px;
  left: 0;
  width: 454px;
  height: 113px;
  max-width: none;
}

.banana-feature-title-decoration-right img {
  left: -392px;
}

.banana-feature-overview > h2 {
  top: 723px;
  left: 120px;
  width: 150px;
  text-align: center;
}

.banana-feature-cards {
  top: 789px;
  left: 46px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 286px;
}

.banana-feature-card {
  position: relative;
  width: 286px;
  height: 157px;
  flex: 0 0 157px;
  padding-top: 51px;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.banana-feature-card:nth-child(4) {
  height: 175px;
  flex-basis: 175px;
}

.banana-feature-card-number {
  position: absolute;
  top: 0;
  left: 127px;
  display: block;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  color: #ffffff;
  background: #004fae;
  font-size: 24px;
  font-weight: 700;
  line-height: 31px;
  text-align: center;
}

.banana-feature-card h3 {
  color: #0160b8;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

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

.banana-feature-hero-copy h1,
.banana-feature-hero-copy p,
.banana-feature-card p,
.banana-feature-custom h2,
.banana-feature-custom p,
.banana-feature-craft-copy h2,
.banana-feature-fit > h2 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.banana-feature-custom-copy {
  top: 1751px;
  left: 52px;
  width: 286px;
  text-align: center;
}

.banana-feature-custom-copy p,
.banana-feature-craft-copy p {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.banana-feature-custom-rows {
  top: 1880px;
  left: 39px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
}

.banana-feature-custom-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  width: 300px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid #bed5ea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  text-align: center;
}

.banana-feature-custom-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.banana-feature-custom-cell p {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.banana-feature-custom-arrow img {
  display: block;
  width: 26px;
  height: 18px;
  transform: rotate(90deg);
}

.banana-feature-left-decoration {
  top: 2693px;
  left: -16px;
  width: 169px;
  height: 113px;
  z-index: 1;
}

.banana-feature-right-character {
  top: 2494px;
  left: 222px;
  width: 155px;
  height: 206px;
  z-index: 1;
}

.banana-feature-craft-copy {
  top: 2834px;
  left: 52px;
  width: 286px;
  text-align: center;
}

.banana-feature-photo {
  left: 45px;
  width: 302px;
  height: 201px;
  overflow: hidden;
  z-index: 1;
}

.banana-feature-photo img {
  display: block;
  width: 302px;
  height: 201px;
  max-width: none;
  object-fit: cover;
}

.banana-feature-craft-left {
  top: 3037px;
}

.banana-feature-craft-center {
  top: 3254px;
}

.banana-feature-craft-right {
  top: 3471px;
}

.banana-feature-bottom-left {
  top: 3754px;
  left: 0;
  width: 100px;
  height: 100px;
  z-index: 1;
}

.banana-feature-right-decoration {
  top: 4650px;
  left: 275px;
  width: 115px;
  height: 115px;
  z-index: 1;
}

.banana-feature-fit > h2 {
  top: 3820px;
  left: 100px;
  width: 190px;
  text-align: center;
}

.banana-feature-fit-list {
  left: 44px;
  width: 302px;
  text-align: center;
}

.banana-feature-fit-good {
  top: 3884px;
}

.banana-feature-fit-bad {
  top: 4310px;
}

.banana-feature-fit-list h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 302px;
  height: 50px;
  border: 1px solid #bed5ea;
  border-radius: 8px 8px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.banana-feature-fit-good h3 {
  background: #e6f2fb;
}

.banana-feature-fit-bad h3 {
  background: #edeeed;
}

.banana-feature-fit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 302px;
  height: 88px;
  padding: 8px 8px;
  border-right: 1px solid #bed5ea;
  border-bottom: 1px solid #bed5ea;
  border-left: 1px solid #bed5ea;
  background: rgba(255, 255, 255, 0.72);
}

.banana-feature-fit-item:last-child {
  border-radius: 0 0 8px 8px;
}

.banana-feature-fit-bad .banana-feature-fit-item:last-child {
  height: 96px;
}

.banana-feature-fit-item img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.banana-feature-fit-item p {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.banana-feature-fit-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .banana-feature-stage {
    width: 1000px;
    height: 1800px;
    isolation: auto;
  }

  .banana-feature-mobile-hero-background,
  .banana-feature-mobile-custom-background,
  .banana-feature-mobile-craft-background {
    display: none;
  }

  .banana-feature-hero-background,
  .banana-feature-first-background,
  .banana-feature-second-background,
  .banana-feature-overview-background {
    display: block;
  }

  .banana-feature-background {
    left: 0;
    width: 1000px;
    object-fit: cover;
    transform: none;
  }

  .banana-feature-hero-background {
    top: 0;
    height: 333px;
  }

  .banana-feature-first-background {
    top: 598px;
    height: 482px;
  }

  .banana-feature-second-background {
    top: 1080px;
    height: 333px;
    max-width: 100%;
    object-position: center;
  }

  .banana-feature-overview-background {
    top: 397px;
    left: 0;
    width: 1000px;
    height: 201px;
    overflow: hidden;
  }

  .banana-feature-overview-background img {
    position: absolute;
    top: -64px;
    left: 0;
    width: 1000px;
    height: 482px;
    max-width: none;
  }

  .banana-feature-hero-copy {
    top: 84px;
    left: 108px;
    width: auto;
    white-space: nowrap;
  }

  .banana-feature-hero-copy h1 {
    width: auto;
    font-size: 50px;
  }

  .banana-feature-hero-copy p {
    margin-top: 14px;
    width: auto;
  }

  .banana-feature-hero-coral {
    top: 227px;
    left: 0;
    width: 88px;
    height: 88px;
  }

  .banana-feature-hero-banana {
    top: 26px;
    left: 637px;
    width: 363px;
    height: 333px;
  }

  .banana-feature-stage h2 {
    font-size: 24px;
  }

  .banana-feature-title-decoration {
    top: 327px;
    height: 64px;
  }

  .banana-feature-title-decoration-left {
    left: 387px;
    width: 56px;
  }

  .banana-feature-title-decoration-right {
    top: 330px;
    left: 557px;
    width: 61px;
  }

  .banana-feature-overview > h2 {
    top: 350px;
    left: 425px;
    width: 150px;
  }

  .banana-feature-cards {
    top: 415px;
    left: 21px;
    flex-direction: row;
    gap: 0;
    width: 958px;
  }

  .banana-feature-card,
  .banana-feature-card:nth-child(4) {
    width: 177px;
    height: 151px;
    flex: 0 0 auto;
    margin-right: 18px;
    padding-top: 41px;
  }

  .banana-feature-card:last-child {
    margin-right: 0;
  }

  .banana-feature-card-number {
    top: -12px;
    left: 72px;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }

  .banana-feature-custom-copy {
    top: 654px;
    left: 213px;
    width: 574px;
  }

  .banana-feature-custom-copy p,
  .banana-feature-craft-copy p {
    font-weight: 500;
    white-space: nowrap;
  }

  .banana-feature-custom-rows {
    top: 734px;
    left: 150px;
    display: flex;
    gap: 0;
    width: 700px;
    height: 280px;
    overflow: hidden;
    border: 1px solid #9fc8ec;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
  }

  .banana-feature-custom-row {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #9fc8ec;
    border-radius: 0;
    background: transparent;
  }

  .banana-feature-custom-row-last {
    border-bottom: 0;
  }

  .banana-feature-custom-cell {
    width: auto;
    padding: 14px 20px;
  }

  .banana-feature-custom-problem,
  .banana-feature-custom-solution {
    flex: 1 1 0;
  }

  .banana-feature-custom-arrow {
    flex: 0 0 74px;
    align-self: stretch;
    padding: 0;
    border-left: 1px solid #9fc8ec;
    border-right: 1px solid #9fc8ec;
  }

  .banana-feature-custom-arrow img {
    display: block;
    width: 18px;
    height: 18px;
    transform: none;
  }

  .banana-feature-left-decoration {
    top: 1023px;
    left: -4px;
    width: 169px;
    height: 113px;
  }

  .banana-feature-right-character {
    top: 854px;
    left: 822px;
    width: 169px;
    height: 226px;
  }

  .banana-feature-craft-copy {
    top: 1113px;
    left: 213px;
    width: 574px;
  }

  .banana-feature-photo {
    top: 1209px;
    width: 250px;
    height: 167px;
  }

  .banana-feature-photo img {
    width: 250px;
    height: 167px;
  }

  .banana-feature-craft-left {
    left: 70px;
  }

  .banana-feature-craft-center {
    left: 375px;
  }

  .banana-feature-craft-right {
    left: 680px;
  }

  .banana-feature-right-decoration {
    top: 1706px;
    left: 885px;
    width: 115px;
    height: 115px;
  }

  .banana-feature-fit > h2 {
    top: 1421px;
    left: 306px;
    width: 389px;
  }

  .banana-feature-fit-list {
    top: 1458px;
    width: 458px;
  }

  .banana-feature-fit-good {
    left: 42px;
  }

  .banana-feature-fit-bad {
    left: 500px;
    width: 459px;
  }

  .banana-feature-fit-list h3 {
    display: flex;
    width: 100%;
    height: 50px;
    border: 1px solid #bed5ea;
    border-radius: 8px 8px 0 0;
  }

  .banana-feature-fit-item {
    display: flex;
    flex-direction: row;
    gap: 18px;
    width: 100%;
    height: 64px;
    padding: 8px 24px;
    border-right: 1px solid #bed5ea;
    border-bottom: 1px solid #bed5ea;
    border-left: 1px solid #bed5ea;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.72);
  }

  .banana-feature-fit-bad .banana-feature-fit-item:last-child {
    height: 64px;
  }

  .banana-feature-fit-item img {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  .banana-feature-fit-item p {
    height: auto;
    flex: 1 1 auto;
  }

  .banana-feature-fit-copy {
    flex: 1 1 auto;
  }

  .banana-feature-bottom-left {
    top: 1408px;
    left: 0;
    width: 100px;
    height: 100px;
  }
}

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