/* screen - index */

.index {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  min-width: 100%;
  position: relative;
  overflow-x: hidden;
}

.index .fv {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0.69vw;
  height: 48.61vw;
  justify-content: flex-end;
  position: relative;
  width: 100.0vw;

}

.index .frame-31 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.index .frame-30 {
  align-items: flex-end;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.index .frame-27 {
  align-items: center;
  display: flex;
  gap: 3.06vw;
  height: 30.63vw;
  justify-content: center;
  position: relative;
  width: 100.0vw;
}

.index .card-1 {
  border-radius: 2.93vw;
  height: 28.26vw;
  margin-left: -3.48vw;
  width: 17.99vw;
}

.index .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  left: 1.39vw;
  min-height: 23.4vw;
  position: relative;
  top: 2.78vw;
  width: 15.28vw;
}

.index .frame-26 {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 0.21vw;
  margin-left: 0.76vw;
  position: relative;
}

.index .ellipse {
  border-radius: 0.24vw;
  height: 0.49vw;
  width: 0.49vw;
}

.index .item {
  height: 15.28vw;
  margin-top: 1.81vw;
  width: 15.28vw;
}

.index .patagonia-3 {
  height: 13.61vw;
  margin-left: 0.07vw;
  object-fit: cover;
  width: 11.46vw;
}

.index .line-11 {
  align-self: center;
  height: 3.06vw;
  margin-left: 0.28vw;
  margin-top: 1.39vw;
  width: 0.14vw;
}

.index .card {
  border-radius: 2.93vw;
  height: 28.26vw;
  width: 17.99vw;
}

.index .tote {
  height: 10.83vw;
  object-fit: cover;
  width: 11.53vw;
}

.index .card-2 {
  border-radius: 3.71vw;
  height: 35.83vw;
  margin-bottom: -2.6vw;
  margin-top: -2.6vw;
  width: 22.8vw;
}

.index .flex-col-1 {
  align-items: flex-start;
  left: 1.74vw;
  min-height: 29.72vw;
  top: 3.47vw;
  width: 19.38vw;
}

.index .frame-26-1 {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 0.26vw;
  margin-left: 0.91vw;
  position: relative;
}

.index .ellipse-1 {
  border-radius: 0.31vw;
  height: 0.62vw;
  width: 0.62vw;
}

.index .item-2 {
  height: 19.38vw;
  margin-top: 2.36vw;
  width: 19.38vw;
}

.index .co200-3-2 {
  height: 18.05vw;
  margin-left: 0.09vw;
  margin-top: -0.09vw;
  object-fit: cover;
  width: 15.06vw;
}

.index .line-11-1 {
  align-self: center;
  height: 3.89vw;
  margin-left: 0.35vw;
  margin-top: 1.74vw;
  width: 0.21vw;
}

.index .danner-7 {
  height: 10.0vw;
  margin-left: 0.07vw;
  object-fit: cover;
  width: 12.99vw;
}

.index .card-3 {
  border-radius: 2.93vw;
  height: 28.26vw;
  margin-right: -3.48vw;
  width: 17.99vw;
}

.index .raincover-10 {
  height: 12.43vw;
  margin-left: -1.39vw;
  margin-top: 1.32vw;
  object-fit: cover;
  width: 9.44vw;
}

.index .frame-29 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 97.36vw;
}

.index .frame-25 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.69vw;
  position: relative;
}

.index .text-1-1 {
  color: var(--white);
  font-family: var(--font-family-noto_sans);
  font-size: var(--font-size-xxxl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 4.0vw;
  margin-top: -0.07vw;
  position: relative;
  text-decoration: underline;
  white-space: nowrap;
  width: fit-content;
}

.index .text-2-1 {
  color: var(--white);
  font-family: var(--font-family-noto_sans);
  font-size: var(--font-size-xxxl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-decoration: underline;
  width: fit-content;
}

.index .frame-33 {
  height: 6.39vw;
  position: relative;
  width: 32.43vw;
}

.index .unsplash192qm-ji9c28 {
  height: 16.67vw;
  margin-top: -13.89vw;
  object-fit: cover;
  position: relative;
  width: 100.0vw;
  z-index: 0;
}

.index .lead {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4.17vw;
  padding: 6.94vw 0.0vw 2.0vw;
  position: relative;
  width: 100.0vw;
}

.index .text-3-1 {
  letter-spacing: 0;
  line-height: 2.5vw;
  margin-top: -0.07vw;
  position: relative;
  text-align: center;
  width: fit-content;
}

.index .text-4 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  text-align: center;
  width: fit-content;
}

.index .section {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2.78vw;
  padding: 8.33vw 0.0vw 4.0vw;
}

.index .frame-12 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.index .totes-auto-openclose-titan-47 {
  letter-spacing: 0;
  line-height: 1.67vw;
  margin-top: -1.07vw;
  position: relative;
  text-align: center;
  width: fit-content;
  z-index: 1;
}

.index .rectangle-3 {
  background-color: var(--opal);
  height: 4.31vw;
  margin-top: -5.0vw;
  position: relative;
  transform: rotate(-3.85deg);
  width: 25.0vw;
  z-index: 0;
}

.index .frame-32 {
  align-items: center;
  background: linear-gradient(180deg, rgba(203, 202, 202, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  border-radius: 2.78vw;
  display: flex;
  height: 27.78vw;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 27.78vw;
}

.index .item-1 {
  height: 23.61vw;
  margin-left: 0.69vw;
  margin-top: 0.69vw;
  width: 23.61vw;
}

.index .tote-1 {
  height: 16.22vw;
  margin-left: 0;
  margin-top: 0;
  object-fit: cover;
  width: 17.26vw;
}

.index .frame-18 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.69vw;
  justify-content: center;
  position: relative;
}

.index .frame-1 {
  align-items: center;
  background-color: var(--lemon-glacier);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.69vw;
  justify-content: center;
  padding: 0.35vw 0.69vw;
  position: relative;
}

.index .text {
  letter-spacing: 0;
  line-height: 2.0vw;
  margin-top: -0.07vw;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .frame {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 1.39vw;
  position: relative;
}

.index .tote11 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .tote10 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .titan {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .tote9 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .tote8 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .frame-36 {
  align-items: center;
  background-color: var(--onyx);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2.78vw;
  padding: 1.11vw 4.17vw 1.11vw 5.56vw;
  position: relative;
}

.index .text-1 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .material-symbolsnavigate-next {
  height: 1.67vw;
  position: relative;
  width: 1.67vw;
}

.index .raincover-10-1 {
  height: 18.61vw;
  margin-left: -2.08vw;
  margin-top: 1.97vw;
  object-fit: cover;
  width: 14.14vw;
}

.index .text-11 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .raincover {
  height: 17.36vw;
  object-fit: cover;
  position: relative;
  width: 17.36vw;
}

.index .text-12 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .frame-48 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 1.39vw 1.39vw;
  position: relative;
}

.index .text-13 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .frame-45 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2.78vw;
  position: relative;
}

.index .text-2 {
  letter-spacing: 0;
  line-height: 1.67vw;
  margin-top: -0.07vw;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-44 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2.78vw;
  padding: 0.69vw 0.0vw;
  position: relative;
}

.index .line-12 {
  align-self: stretch;
  height: 0.07vw;
  margin-top: -0.07vw;
  position: relative;
  width: 100%;
}

.index .frame-4 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 1.25vw;
  position: relative;
}

.index .grery-nano24-1 {
  height: 13.89vw;
  object-fit: cover;
  position: relative;
  width: 13.89vw;
}

.index .frame-42 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1.94vw;
  justify-content: flex-end;
  position: relative;
}

.index .danner {
  letter-spacing: 0;
  line-height: 2.0vw;
  margin-top: -0.07vw;
  position: relative;
  width: fit-content;
}

.index .frame-36-1 {
  align-items: center;
  background-color: var(--onyx);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 1.39vw;
  padding: 0.56vw 0.83vw 0.56vw 2.22vw;
  position: relative;
}

.index .text-3 {
  letter-spacing: 0;
  line-height: 1.75vw;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .line-1 {
  align-self: stretch;
  height: 0.07vw;
  position: relative;
  width: 100%;
}

.index .co200-3-2-1 {
  height: 21.31vw;
  margin-left: 0.1vw;
  margin-top: -0.1vw;
  object-fit: cover;
  width: 17.78vw;
}

.index .text-20 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .frame-38 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 1.39vw;
  justify-content: center;
  position: relative;
}

.index .co200-13 {
  height: 20.83vw;
}

.index .co200-15 {
  height: 20.87vw;
}

.index .text-21 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .co200-8 {
  height: 20.83vw;
}

.index .co200-12 {
  height: 20.83vw;
}

.index .text-22 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .patagonia-3-1 {
  height: 20.38vw;
  margin-left: 0.1vw;
  margin-top: 0;
  object-fit: cover;
  width: 17.15vw;
}

.index .x1 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .patagonia-12 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .patagonia-4 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .text-28 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .patagonia-8 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .patagonia-7 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .text-29 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .patia-3lrain {
  height: 13.89vw;
  object-fit: cover;
  position: relative;
  width: 13.89vw;
}

.index .thece-antrajkt {
  height: 13.89vw;
  object-fit: cover;
  position: relative;
  width: 13.89vw;
}

.index .section-5 {
  height: 185.11vw;
}

.index .flex-col-2 {
  align-items: center;
  left: 28.47vw;
  min-height: 175.97vw;
  top: 8.33vw;
  width: 43.06vw;
}

.index .frame-46 {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  gap: 2.78vw;
  position: relative;
}

.index .danner-7-1 {
  height: 14.97vw;
  margin-left: 0.1vw;
  margin-top: 0;
  object-fit: cover;
  width: 19.44vw;
}

.index .text-37 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .danner-9-1 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .danner-4 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .text-38 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .danner-6 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .danner-5 {
  height: 20.83vw;
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .text-39 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}

.index .text-41 {
  height: 1.67vw;
  letter-spacing: 0;
  line-height: 1.67vw;
  margin-top: 5.49vw;
  min-width: 11.11vw;
  text-align: center;
  white-space: nowrap;
}

.index .line-12-1 {
  height: 0.07vw;
  margin-top: 3.47vw;
  width: 27.08vw;
}

.index .frame-4-1 {
  align-items: center;
  display: inline-flex;
  gap: 1.25vw;
  margin-top: 2.78vw;
  position: relative;
}

.index .danner-patrl-1 {
  height: 13.89vw;
  object-fit: cover;
  position: relative;
  width: 13.89vw;
}

.index .line-1-1 {
  height: 0.07vw;
  margin-top: 2.71vw;
  width: 27.08vw;
}

.index .danner-mntlgt2-d-brn-1 {
  height: 13.89vw;
  object-fit: cover;
  position: relative;
  width: 13.89vw;
}

.index .footer {
  align-items: center;
  background-color: var(--onyx);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1.67vw;
  padding: 2.78vw 41.88vw;
  position: relative;
  width: 100.0vw;
}

.index .logo {
  cursor: pointer;
  height: 3.23vw;
  position: relative;
  width: 6.94vw;
}

.index .copyright {
  color: var(--white);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .card-4 {
  background: linear-gradient(180deg, rgb(202.94, 202.09, 202.09) 0%, rgb(249.69, 249.69, 249.69) 100%);
  position: relative;
}

.index .co200 {
  object-fit: cover;
  position: relative;
  width: 20.83vw;
}

.index .ellipse-2 {
  background-color: var(--wild-sand);
  position: relative;
}

.index .flex-col-3 {
  display: flex;
  flex-direction: column;
  position: relative;
}

.index .item-3 {
  align-items: center;
  display: flex;
  justify-content: center;
}

.index .section-1 {
  background-color: var(--white);
  position: relative;
  width: 100.0vw;
}

.index .text_label-2 {
  letter-spacing: 0;
  line-height: 2.0vw;
  position: relative;
  width: 43.06vw;
}
/* screen - sp */

.sp {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  min-width: 100%;
  position: relative;
  overflow-x: hidden;

}

.sp .fv-1 {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6.98vw;
  height: 100.0vw;
  overflow: hidden;
  padding: 6.51vw 0.0vw 0.0vw;
  position: relative;
  width: 100.0vw;
}

.sp .frame-51 {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 2.9vw;
  height: 93.49vw;
  margin-right: -0.23vw;
  position: relative;
  z-index: 1;
}

.sp .frame-50 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.sp .frame-27-1 {
  align-items: center;
  display: flex;
  gap: 3.72vw;
  height: 67.21vw;
  justify-content: center;
  position: relative;
  width: 100.0vw;
}

.sp .card-4 {
  border-radius: 5.51vw;
  height: 53.13vw;
  margin-left: -46.49vw;
  width: 33.81vw;
}

.sp .flex-col-3 {
  gap: 3.49vw;
  left: 2.56vw;
  min-height: 35.81vw;
  position: absolute;
  top: 5.12vw;
  width: 28.6vw;
}

.sp .frame-26-2 {
  gap: 0.39vw;
  margin-left: 1.44vw;
}

.sp .ellipse-2 {
  border-radius: 0.46vw;
  height: 0.91vw;
  width: 0.91vw;
}

.sp .item-3 {
  height: 28.6vw;
  width: 28.6vw;
}

.sp .patagonia-3-2 {
  height: 25.58vw;
  margin-left: 0.14vw;
  width: 21.54vw;
}

.sp .line-11-3 {
  height: 0.23vw;
  left: -498.6vw;
  position: absolute;
  top: 1621.63vw;
  width: 5.81vw;
}

.sp .card-5 {
  border-radius: 5.51vw;
  height: 53.13vw;
  margin-left: -8.96vw;
  width: 33.81vw;
}

.sp .flex-col-4 {
  left: 2.56vw;
  min-height: 44.19vw;
  position: relative;
  top: 5.12vw;
  width: 28.6vw;
}

.sp .item-4 {
  height: 28.6vw;
  margin-top: 3.49vw;
  width: 28.6vw;
}

.sp .tote-2 {
  height: 20.36vw;
  width: 21.67vw;
}

.sp .line-11-2 {
  align-self: center;
  height: 5.81vw;
  margin-left: 0.52vw;
  margin-top: 2.56vw;
  width: 0.23vw;
}

.sp .card-6 {
  border-radius: 6.98vw;
  height: 67.35vw;
  margin-bottom: -0.07vw;
  margin-top: -0.07vw;
  width: 42.86vw;
}

.sp .flex-col-5 {
  left: 3.26vw;
  min-height: 55.81vw;
  position: relative;
  top: 6.51vw;
  width: 36.51vw;
}

.sp .frame-26-3 {
  gap: 0.5vw;
  margin-left: 1.7vw;
}

.sp .ellipse-3 {
  border-radius: 0.58vw;
  height: 1.16vw;
  width: 1.16vw;
}

.sp .item-6 {
  height: 36.51vw;
  margin-top: 4.42vw;
  width: 36.51vw;
}

.sp .co200-3-2-2 {
  height: 33.93vw;
  margin-left: 0.16vw;
  margin-top: -0.16vw;
  object-fit: cover;
  width: 28.3vw;
}

.sp .line-11-4 {
  align-self: center;
  height: 7.21vw;
  margin-left: 0.66vw;
  margin-top: 3.26vw;
  width: 0.23vw;
}

.sp .card-7 {
  border-radius: 5.51vw;
  height: 53.13vw;
  margin-right: -8.96vw;
  width: 33.81vw;
}

.sp .danner-7-2 {
  height: 18.8vw;
  margin-left: 0.14vw;
  width: 24.41vw;
}

.sp .card-8 {
  border-radius: 5.51vw;
  height: 53.13vw;
  margin-right: -46.49vw;
  width: 33.81vw;
}

.sp .raincover-10-2 {
  height: 23.37vw;
  margin-left: -2.6vw;
  margin-top: 2.49vw;
  object-fit: cover;
  width: 17.75vw;
}

.sp .line-11-5 {
  height: 0.23vw;
  left: -657.67vw;
  position: absolute;
  top: 1621.63vw;
  width: 5.81vw;
}

.sp .frame-25-1 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  padding: 0.0vw 0.0vw 0.0vw 5.0vw;
  position: relative;
}

.sp .text-44 {
  color: var(--white);
  font-family: var(--font-family-noto_sans);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  line-height: 6.7vw;
  margin-top: -0.23vw;
  text-decoration: underline;
  white-space: nowrap;
  width: fit-content;
}

.sp .text-45 {
  color: var(--white);
  font-family: var(--font-family-noto_sans);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  line-height: normal;
  text-decoration: underline;
  width: fit-content;
}

.sp .frame-49 {
  height: 5.42vw;
  position: relative;
  width: 100.0vw;
}

.sp .unsplash192qm-ji9c28-1 {
  height: 41.16vw;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 58.84vw;
  width: 100.0vw;
  z-index: 0;
}

.sp .lead-1 {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9.3vw;
  padding: 13.95vw 0.0vw 4.0vw;
  position: relative;
  width: 100.0vw;
}

.sp .text-46 {
  line-height: 7.53vw;
  margin-top: -0.23vw;
  text-align: center;
  width: fit-content;
}

.sp .text-47 {
  line-height: 5.86vw;
  text-align: justify;
  width: 90.7vw;
}

.sp .section-1 {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9.3vw;
  padding: 11.6vw 0.0vw 11.6vw;
  position: relative;
  width: 100.0vw;
}

.sp .frame-12-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.sp .totes-auto-openclose-titan-47-1 {
  letter-spacing: 0;
  line-height: 5.02vw;
  margin-top: -0.23vw;
  position: relative;
  text-align: center;
  width: fit-content;
  z-index: 1;
}

.sp .rectangle-3-1 {
  background-color: var(--opal);
  height: 14.42vw;
  margin-top: -16.74vw;
  position: relative;
  transform: rotate(-3.85deg);
  width: 83.72vw;
  z-index: 0;
}

.sp .frame-32-1 {
  height: 90.7vw;
  width: 90.7vw;
}

.sp .item-5 {
  height: 79.07vw;
  margin-left: 2.33vw;
  margin-top: 2.33vw;
  width: 79.07vw;
}

.sp .tote-3 {
  height: 54.32vw;
  width: 57.8vw;
}

.sp .frame-2 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2.33vw;
  justify-content: center;
  position: relative;
}

.sp .frame-1-1 {
  align-items: center;
  background-color: var(--lemon-glacier);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2.33vw;
  justify-content: center;
  padding: 1.16vw 2.33vw;
  position: relative;
}

.sp .text-5 {
  line-height: 5.86vw;
  margin-top: -0.23vw;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.sp .frame-3 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2.33vw;
  position: relative;
}

.sp .tote11-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .tote10-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .titan-1 {
  letter-spacing: 0;
  line-height: 5.86vw;
  position: relative;
  width: 90.7vw;
}

.sp .tote9-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .tote8-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .frame-36-2 {
  gap: 9.3vw;
  padding: 3.72vw 13.95vw 3.72vw 18.6vw;
}

.sp .text-6 {
  line-height: 6.7vw;
  white-space: nowrap;
  width: fit-content;
}

.sp .material-symbolsnavigate-next-1 {
  height: 5.58vw;
  position: relative;
  width: 5.58vw;
}

.sp .raincover-10-3 {
  height: 62.32vw;
  margin-left: -6.95vw;
  margin-top: 6.6vw;
  object-fit: cover;
  width: 47.35vw;
}

.sp .text-54 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .text-55 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .frame-48-1 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 2.33vw 2.33vw;
  position: relative;
}

.sp .raincover-6-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text-56 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .frame-45-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9.3vw;
  padding: 0.0vw 0.0vw 10.0vw;
  position: relative;
}

.sp .text-7 {
  line-height: 5.02vw;
  margin-top: -0.23vw;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.sp .frame-44-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9.3vw;
  padding: 2.33vw 0.0vw;
  position: relative;
}

.sp .line-12-2 {
  align-self: stretch;
  height: 0.23vw;
  margin-top: -0.23vw;
  position: relative;
  width: 100%;
}

.sp .frame-4-2 {
  gap: 4.19vw;
}

.sp .grery-nano24-1-1 {
  height: 46.51vw;
  object-fit: cover;
  position: relative;
  width: 46.51vw;
}

.sp .frame-42-1 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6.51vw;
  justify-content: flex-end;
  position: relative;
}

.sp .danner-1 {
  letter-spacing: 0;
  line-height: 5.86vw;
  margin-top: -0.23vw;
  position: relative;
  width: fit-content;
}

.sp .frame-36-3 {
  gap: 4.65vw;
  padding: 1.86vw 2.79vw 1.86vw 7.44vw;
}

.sp .text-8 {
  line-height: 5.86vw;
  white-space: nowrap;
  width: fit-content;
}

.sp .line-1-2 {
  align-self: stretch;
  height: 0.23vw;
  position: relative;
  width: 100%;
}

.sp .co200-3-2-3 {
  height: 71.38vw;
  margin-left: 0.35vw;
  margin-top: -0.35vw;
  object-fit: cover;
  width: 59.54vw;
}

.sp .text-63 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .co200-13-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .co200-15-1 {
  height: 44.26vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text-64 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .co200-8-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .co200-12-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text-65 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .patagonia-3-3 {
  height: 68.24vw;
  margin-left: 0.35vw;
  width: 57.45vw;
}

.sp .x1-1 {
  letter-spacing: 0;
  line-height: 5.86vw;
  position: relative;
  width: 90.7vw;
}

.sp .patagonia-12-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .patagonia-4-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text-71 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .patagonia-8-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .patagonia-7-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text-72 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .frame-4-3 {
  flex-direction: column;
  gap: 9.3vw;
}

.sp .patia-3lrain-1 {
  height: 46.51vw;
  object-fit: cover;
  position: relative;
  width: 46.51vw;
}

.sp .thece-antrajkt-1 {
  height: 46.51vw;
  object-fit: cover;
  position: relative;
  width: 46.51vw;
}

.sp .section-5-1 {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 18.6vw;
  padding: 10.6vw 0.0vw;
  position: relative;
  width: 100.0vw;
}

.sp .frame-32-2 {
  height: 93.02vw;
  width: 93.02vw;
}

.sp .danner-7-3 {
  height: 50.14vw;
  margin-left: 0.35vw;
  width: 65.11vw;
}

.sp .text-80 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .danner-9-1-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .danner-4-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text-81 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .danner-6-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .danner-5-1 {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text-82 {
  line-height: 5.86vw;
  width: 90.7vw;
}

.sp .danner-patrl-1-1 {
  height: 46.51vw;
  object-fit: cover;
  position: relative;
  width: 46.51vw;
}

.sp .danner-mntlgt2-d-brn-1-1 {
  height: 46.51vw;
  object-fit: cover;
  position: relative;
  width: 46.51vw;
}

.sp .footer-1 {
  align-items: center;
  background-color: var(--onyx);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 5.58vw;
  padding: 9.3vw 0.0vw;
  position: relative;
  width: 100.0vw;
}

.sp .logo-1 {
  cursor: pointer;
  height: 6.48vw;
  position: relative;
  width: 13.95vw;
}

.sp .copyright-1 {
  color: var(--white);
  font-family: var(--font-family-noto_sans_jp);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.sp .card {
  background: linear-gradient(180deg, rgb(202.94, 202.09, 202.09) 0%, rgb(249.69, 249.69, 249.69) 100%);
  position: relative;
}

.sp .danner-7 {
  margin-top: 0;
  object-fit: cover;
}

.sp .ellipse {
  background-color: var(--wild-sand);
  position: relative;
}

.sp .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.sp .frame-26 {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  position: relative;
}

.sp .frame-32 {
  align-items: center;
  background: linear-gradient(180deg, rgba(203, 202, 202, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  border-radius: 9.3vw;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.sp .frame-36 {
  align-items: center;
  background-color: var(--onyx);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
}

.sp .frame-4 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
}

.sp .item {
  align-items: center;
  display: flex;
  justify-content: center;
}

.sp .patagonia-3 {
  margin-top: 0;
  object-fit: cover;
}

.sp .raincover {
  height: 44.19vw;
  object-fit: cover;
  position: relative;
  width: 44.19vw;
}

.sp .text {
  letter-spacing: 0;
  position: relative;
}

.sp .text_label {
  letter-spacing: 0;
  line-height: 5.86vw;
  position: relative;
  width: 90.7vw;
}

.sp .tote {
  margin-left: 0;
  margin-top: 0;
  object-fit: cover;
}
@media screen and (max-width: 1439px) {
  .screen.index { 
    display: none;
   }
}
@media screen and (min-width: 1440px) {
  .screen.sp { 
    display: none;
   }
}


.rain-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.drop {
    position: absolute;
    bottom: 100%;
    width: 1px;
    height: 30px; /* 雨粒の長さ */
    background: rgba(188,226,232,0.55);
    animation: fall linear infinite;
    pointer-events: none;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

@-webkit-keyframes fall {
    to {
        -webkit-transform: translateY(100vh);
    }
}

/* レスポンシブ雨調整 */
@media (min-width: 1400px) {
    .drop {
        height: 30px; /* スマホ用に雨粒を短く */
        width: 1px;

    }
}