a:hover {
  color: inherit;
}

.app-background-image{
  /* 右側が濃い色 */
  background-image: radial-gradient(circle at 67% 83%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 1%,transparent 1%, transparent 5%,transparent 5%, transparent 100%),radial-gradient(circle at 24% 80%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 27%,transparent 27%, transparent 63%,transparent 63%, transparent 100%),radial-gradient(circle at 23% 5%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 26%,transparent 26%, transparent 82%,transparent 82%, transparent 100%),radial-gradient(circle at 21% 11%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 35%,transparent 35%, transparent 45%,transparent 45%, transparent 100%),radial-gradient(circle at 10% 11%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 21%,transparent 21%, transparent 81%,transparent 81%, transparent 100%),radial-gradient(circle at 19% 61%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 20%,transparent 20%, transparent 61%,transparent 61%, transparent 100%),radial-gradient(circle at 13% 77%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 63%,transparent 63%, transparent 72%,transparent 72%, transparent 100%),radial-gradient(circle at 30% 93%, hsla(317,0%,96%,0.05) 0%, hsla(317,0%,96%,0.05) 33%,transparent 33%, transparent 82%,transparent 82%, transparent 100%),linear-gradient(90deg, rgba(255,169,159, 0.71),rgb(252,101,145)) !important;
  min-height: 100vh; /* 画面全体の高さを確保 */
}

.bg-height-100vh{
  min-height: 100vh; /* 画面全体の高さを確保 */
  padding-bottom: 20px; /* 画面下の余白 */
}
.bg-salmon-pink{
  background-image: radial-gradient(circle at 46% 12%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 43% 86%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 36% 69%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 3%,transparent 3%, transparent 100%),radial-gradient(circle at 74% 62%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 11% 65%, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.01) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 44% 92%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 68% 61%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 88% 9%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 59% 86%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 7%,transparent 7%, transparent 100%),radial-gradient(circle at 91% 23%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 67% 78%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 0% 17%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 93% 12%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 93% 94%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 5%,transparent 5%, transparent 100%),radial-gradient(circle at 90% 17%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 5%,transparent 5%, transparent 100%),linear-gradient(90deg, rgb(255,51,131),rgb(255,209,154));
}
.bg-light-pink{
  background-color: rgb(255, 241, 246);
}

.bg-warm-pink{
  background-image: linear-gradient(90deg, rgb(255,200,190),rgba(255,160,191, 0.72));
}

.pink-shadow{
  color: #333333;
  border-radius: 3px;
  box-shadow: 0px 5px 30px 0px rgba(224, 144, 196, 0.35);
}

.bg-peach-light{
  background-color: #F0C6C1;
}

#parent-box {
  position: relative;
}

#currency{
  position: absolute;
  bottom:4px;
  left: 0;
}

/* フラッシュメッセージのスタイル */
.flash-message {
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  font-size: 16px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.alert-success {
  background-color: #CFF4FC;
  color: gray;
}

.alert-error {
  background-color: #f44336;
  color: white;
}

/* ウェルカムページ */
.button-white-outline {
  width: 150px;
  border: 1px solid #fff;
  color: white;
  padding: 16px 18px 16px;
  border-radius: 40px;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.42px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.button-white-outline:hover {
  background: white;
  color: rgb(255,51,131);
  transition: 300ms;
}

/* クリック時: 透明度を下げる */
.button-white-outline:active {
  transform: scale(0.95);
  opacity: 0.8;
}
.button-pink-outline {
  width: 150px;
  height: 50px;
  border: 1px solid rgb(250, 37, 122);
  color: rgb(255,51,131);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.3); /* ほんのり白背景を追加 */
  padding: 16px 18px;
  border-radius: 40px;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.42px;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  transition: all 0.3s ease-in-out;
}
/* ホバー時: ピンクのグラデーション背景に */
.button-pink-outline:hover {
  background: linear-gradient(45deg, rgb(255, 51, 131), rgb(245, 148, 208));
  color: white;
  border: none;
}

/* クリック時: 透明度を下げる */
.button-pink-outline:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.login_link {
  line-height: 1.29;
  color: rgb(250, 31, 118);
  font-weight: 900;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 文字に薄い影をつける */
  background: rgba(255, 255, 255, 0.5); /* ほんのり白背景を追加 */
  letter-spacing: 0.6px;
  padding: 16px 18px;
  border-radius: 40px;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

/* ホバー時: 下線が表示される */
.login_link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: rgb(255, 51, 131);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.login_link:hover {
  /* color: white; */
  color: rgb(250, 31, 118);

}
.login_link:hover::after {
  transform: scaleX(0.7);
}

/* クリック時: 少し暗くなる */
.login_link:active {
  color: rgb(200, 40, 100);
}

/* サブスクindexページ */
.button-white {
  width: 150px;
  height: 50px;
  border: 1px solid white;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.1);
  padding: 14px 18px;
  border-radius: 40px;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.42px;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  transition: all 0.3s ease-in-out;
}

/* ホバー時: ピンクのグラデーション背景に */
.button-white:hover {
  background: linear-gradient(45deg, rgb(255, 51, 131), rgb(245, 148, 208));
  color: white;
  border: none;
}

/* クリック時: 透明度を少なくする */
.button-white:active {
  transform: scale(0.95);
  opacity: 0.8;
}