/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* Apply a linear gradient background */
body {
  font-family: "Hiragino Maru Gothic Pro", "Hiragino Maru Gothic",
    "M PLUS Rounded 1c", "Yu Gothic", "Meiryo", sans-serif;
  color: #3567bf;
}
.issue-card {
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* shadow */
  text-align: center;
  backdrop-filter: blur(24px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.4) 100%
  );
}

footer {
  margin-bottom: 2em;
}
/* Download links styling */
.download-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Image styling */
.download-links img {
  height: 60px;
  transition: transform 0.3s;
}

/* Hover effect */
.download-links img:hover {
  transform: scale(1.1);
}

/* Responsive design */
@media (min-width: 768px) {
  .download-links {
    flex-direction: row;
  }
}

.background-image {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  aspect-ratio: 1;

  &.blue {
    background-image: url("lp/blue.svg");
    top: -10vw;
    left: -10vw;
    width: 25vh;
    height: auto;
  }

  &.purple {
    background-image: url("lp/purple.svg");
    bottom: 5vh; /* Arbitrary top position */
    left: 80vw;
    width: 30vh; /* Responsive width based on viewport width */
    max-width: 200px; /* Maximum width cap */
    height: auto; /* Maintain aspect ratio */
  }

  &.yellow {
    background-image: url("lp/yellow.svg");
    bottom: 15vh; /* Arbitrary top position */
    left: 40vw;
    width: 10vh;
    height: auto;
  }

  &.green {
    background-image: url("lp/green.svg");
    bottom: 25vh;
    left: 1vw; /* Arbitrary left position */
    width: 15vh;
    height: auto;
  }

  &.red {
    background-image: url("lp/red.svg");
    top: 20vh; /* Arbitrary top position */
    right: -5vh; /* Arbitrary left position */
    width: 20vh;
    height: auto;
  }

  &.orange {
    background-image: url("lp/orange.svg");
    top: 5vh; /* Arbitrary top position */
    left: 60vw;
    width: 10vh;
    height: auto;
  }
}

#hero .background-image.blue {
  /* これまで top:-10vw; left:-10vw; width:25vh; など */
  /* → hero 左端に寄せたいなら left:0 に */
  top: 10vh;
  left: 0;
  width: 20vh;
}

#hero .background-image.red {
  /* これまで right:-5vh; top:20vh; など */
  /* → hero 右端に寄せたいなら right:0 に */
  top: 30vh;
  right: 0;
  width: 20vh;
}

@media (max-width: 1630px) {
  .hero-bg-images {
    display: none;
  }
}
@media (min-width: 1631px) {
  .hero-bg-images {
    display: block;
  }
}

.swiper-button-next::after,
.swiper-button-prev::after {
  transform: scale(0.6);
  color: #3567bf;
}

/* 左矢印をカードの外に少し出す */
.swiper-button-prev {
  left: -0.15rem !important;
}

/* 右矢印をカードの外に少し出す */
.swiper-button-next {
  right: -0.15rem !important;
}

.responsive-img {
  height: auto;
  max-width: 75px; /* mobile: container 96px × 0.8 */
}

@media (min-width: 640px) {
  .responsive-img {
    max-width: 75px; /* tablet: container 112px × 0.8 */
  }
}

@media (min-width: 768px) {
  .responsive-img {
    max-width: 110px; /* desktop: container 208px × 0.8 */
  }
}

@media (min-width: 1024px) {
  .responsive-img {
    max-width: 130px; /* lg: container 240px × 0.8 */
  }
}

.img-store-eval {
  height: auto;
  max-width: 45px; /* mobile: container 96px × 0.3 */
}

@media (min-width: 640px) {
  .img-store-eval {
    max-width: 55px; /* tablet: container 112px × 0.35 */
  }
}

@media (min-width: 768px) {
  .img-store-eval {
    max-width: 63px; /* desktop: container 208px × 0.3 */
  }
}

@media (min-width: 1024px) {
  .img-store-eval {
    max-width: 75px; /* lg: container 240px × 0.3 */
  }
}

p span {
  margin: 0;
  padding: 0;
}