a {
  text-decoration: none;
}
.b {
  height: 80%;
  margin: 10px auto;
}
.head {
  position: relative;
  width: 375px;
  height: 60px;
  font-size: var(--font-size-sm);
}
.kv-child,
.kv-item {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-gainsboro);
  width: 375px;
  height: 200px;
}
.kv-item {
  top: 200px;
  background-color: var(--color-silver);
}
.kv-inner {
  position: absolute;
  background-color: var(--color-gainsboro);
  width: 375px;
  height: 200px;
  top: 0;
  background-image: url(./public/kv.png);
  background-size: cover;
  height: 400px;
}
.b1,
.b2 {
  position: absolute;
  top: 165px;
  left: 68px;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b2 {
  top: 201px;
}
.p {
  margin: 0;
}
.b3,
.b4 {
  position: absolute;
  top: 275px;
  left: 68px;
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b4 {
  left: 190px;
}
.copy-child,
.kv {
  position: relative;
}
.kv {
  width: 375px;
  height: 400px;
  font-size: var(--font-size-5xl);
}
.copy-child {
  width: 25.74px;
  height: 43px;
}
.span {
  font-weight: 600;
  font-family: var(--font-outfit);
}
.b5 {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}
.ok {
  text-align: center;
  position: relative;
  line-height: 135%;
}
.copy {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
}
.frame-child {
  position: relative;
  width: 40px;
  height: 40px;
}
.b6,
.b7 {
  align-self: stretch;
  position: relative;
  line-height: 125%;
}
.b7 {
  font-size: var(--font-size-3xl);
}
.group-parent,
.parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.parent {
  text-align: left;
}
.group-parent {
  flex-direction: row;
  justify-content: center;
  gap: var(--gap-xs);
}
.b-yoyaku-child {
  position: relative;
  width: 24px;
  height: 24px;
}
.b-yoyaku,
.cv {
  align-self: stretch;
  display: flex;
}
.b-yoyaku {
  border-radius: var(--br-71xl);
  background-color: var(--white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  flex-direction: row;
  padding: var(--padding-3xs) var(--padding-lg) var(--padding-3xs)
    var(--padding-14xl);
  align-items: center;
  justify-content: center;
  gap: var(--gap-3xs);
  font-size: var(--font-size-base);
  color: var(--coral);
  animation: squash 1.2s ease-in-out infinite;
}
.b-yoyaku:hover {
  opacity: 0.9;
}
@keyframes squash {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.cv {
  background-color: var(--coral);
  flex-direction: column;
  padding: var(--padding-21xl) var(--padding-xl);
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
  color: var(--white);
  font-size: 18px;
}
.cv a {
  margin: 0 auto;
}
.group-child {
  position: absolute;
  top: 49px;
  left: calc(50% - 34.5px);
  width: 127px;
  height: 16px;
  object-fit: cover;
}
.b8,
.b9 {
  letter-spacing: 0.04em;
}
.b8 {
  position: absolute;
  top: 26px;
  left: 0;
  line-height: 135%;
}
.b9 {
  top: 76px;
  left: 17px;
}
.b10,
.b11,
.b9 {
  position: absolute;
  line-height: 135%;
}
.b10 {
  top: 26px;
  left: 228px;
  letter-spacing: 0.04em;
}
.b11 {
  top: 0;
  left: 105px;
  font-size: var(--font-size-45xl);
  color: var(--white);
  -webkit-text-stroke: 1.4px #7686c0;
}

/* アニメーションのため初期化 */
.b11,
.group-child {
  opacity: 0;
}

.rectangle-parent {
  position: absolute;
  top: 64px;
  left: calc(50% - 130.5px);
  width: 259px;
  height: 101px;
  font-size: var(--font-size-13xl);
}
.b12 {
  position: absolute;
  top: 213px;
  left: 56px;
  font-size: var(--font-size-xl);
  letter-spacing: 0.04em;
  line-height: 150%;
  text-align: left;
}

/* 吹き出しの領域 */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.bounce-and-fade {
  animation: bounce 2s ease-in-out infinite;
  animation-iteration-count: 1;
}
/* 吹き出しの領域 */

.vector-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 155.58px;
  height: 110.39px;
}
.b13 {
  position: absolute;
  top: 30px;
  left: 21px;
  letter-spacing: 0.04em;
  line-height: 150%;
  /* 文字傾き */
  /* animation: amoeba 5s infinite;  */
}

/* Create a keyframes for the amoeba effect */
@keyframes amoeba {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1) rotate(10deg);
  }
  50% {
    transform: scale(0.9) rotate(-10deg);
  }
  75% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    transform: scale(1);
  }
}
.vector-parent {
  position: absolute;
  top: 252px;
  left: 17px;
  width: 155.58px;
  height: 110.39px;
  color: var(--white);
}
.vector-icon1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 140px;

  /* ウニウニ */
  /* background: #7686c0;
  animation: uneune 2.5s linear infinite; */
}
/* ウニウニ */
@keyframes uneune {
  0% {
    border-radius: 60% 70% 80% 90% / 50% 80% 70% 90%;
  }

  25% {
    border-radius: 80% 70% 60% 100% / 90% 100% 50% 110%;
  }

  50% {
    border-radius: 70% 50% 80% 70% / 50% 70% 60% 70%;
  }

  75% {
    border-radius: 100% 70% 50% 80% / 80% 60% 90% 50%;
  }

  100% {
    border-radius: 60% 70% 80% 90% / 50% 80% 70% 90%;
  }
}
.b14 {
  position: absolute;
  top: 33px;
  left: 28px;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.vector-group {
  position: absolute;
  top: 261.75px;
  left: 178.77px;
  width: 182.7px;
  height: 141.25px;
  color: var(--white);
}
.vector-icon2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 193.82px;
  height: 82.8px;
}
.b15 {
  position: absolute;
  top: 25px;
  left: 30.95px;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.vector-container {
  position: absolute;
  top: 372.53px;
  left: 27.05px;
  width: 193.82px;
  height: 82.8px;
  color: var(--white);
}
.frame-item {
  position: relative;
  border-radius: 50%;
  background-color: var(--navy);
  width: 6px;
  height: 6px;
}
.ellipse-wrapper {
  display: flex;
  flex-direction: row;
  padding: var(--padding-10xs) 0 0;
  align-items: flex-start;
  justify-content: flex-start;
}
.span1 {
  font-weight: 500;
}
.b16 {
  color: var(--color-lightcoral-100);
}
.frame-group,
.frame-parent {
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-group {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  gap: var(--gap-5xs);
}
.frame-parent {
  position: absolute;
  top: 245px;
  left: 38px;
  width: 297px;
  display: none;
  flex-direction: column;
  gap: 21px;
  text-align: left;
  font-size: var(--font-size-base);
}
.child {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 375px;
  height: 240px;
}
.div {
  position: relative;
  background-color: var(--white);
  width: 375px;
  height: 716px;
  text-align: center;
  font-size: var(--font-size-mini);
}
.b20 {
  position: absolute;
  top: 0;
  left: 15px;
  line-height: 135%;
}
.group-item {
  position: absolute;
  top: 96px;
  left: calc(50% - 163.5px);
  width: 325px;
  height: 16px;
  object-fit: cover;
}

.group-item-1 {
  opacity: 0;
  position: absolute;
  top: 96px;
  left: calc(50% - 163.5px);
  width: 325px;
  height: 16px;
  object-fit: cover;
}
/* スライド上下左右 */
@keyframes slideDown {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-down {
  animation: slideDown 1.3s forwards;
}

.slide-up {
  animation: slideUp 1.3s forwards;
}

.slide-right {
  animation: slideRight 1.3s forwards;
}

.slide-left {
  animation: slideLeft 1.3s forwards;
}
/* スライド上下 */

.b21 {
  position: absolute;
  top: 50px;
  left: calc(50% - 162.5px);
  font-size: var(--font-size-45xl);
  line-height: 135%;
  color: var(--lightcoral);
  text-shadow: -1px -1px 0 #f58f81, 1px -1px 0 #f58f81, -1px 1px 0 #f58f81,
    1px 1px 0 #f58f81;
  opacity: 0;
}
.group {
  width: 327px;
  height: 112px;
}
.div5,
.group,
.item {
  position: relative;
}
.item {
  width: 375px;
  height: auto;
  padding: 20px;
}
.item img {
  width: 100%;
  height: auto;
}
.div5 {
  letter-spacing: 0.08em;
  line-height: 200%;
  font-weight: 500;
  display: inline-block;
  width: 315px;
}
.group-icon {
  position: relative;
  width: 335px;
  height: 196.25px;
}
.b22 {
  position: relative;
  font-size: var(--font-size-9xl);
  letter-spacing: 0.08em;
  line-height: 200%;
  display: inline-block;
  text-align: center;
  width: 315px;
}
.group-inner {
  position: absolute;
  top: 246.43px;
  left: calc(50% - 51.5px);
  width: 102.49px;
  height: 103.49px;
  overflow: hidden;
}
.group-child1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 166px;
  height: 141px;
}
.b23 {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 175%;
}
.wrapper {
  position: absolute;
  top: 123.27px;
  left: 36px;
  border-radius: var(--br-9xs);
  background-color: var(--coral);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  padding: var(--padding-5xs);
  align-items: center;
  justify-content: center;
}
.group-child2,
.group-parent1 {
  position: absolute;
  top: 144px;
  left: 169px;
  width: 166px;
  height: 150.27px;
}
.group-child2 {
  top: 0;
  left: 0;
  width: 162.76px;
  height: 129.88px;
}
.frame {
  position: absolute;
  top: 114.69px;
  left: 20px;
  border-radius: var(--br-9xs);
  background-color: var(--coral);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  padding: var(--padding-5xs);
  align-items: center;
  justify-content: center;
}
.group-child3,
.group-parent2 {
  position: absolute;
  top: 103.58px;
  left: 0;
  width: 162.76px;
  height: 141.69px;
}
.group-child3 {
  top: 0;
  width: 160.76px;
  height: 129.62px;
}
.wrapper1 {
  position: absolute;
  top: 105.27px;
  left: 36px;
  border-radius: var(--br-9xs);
  background-color: var(--coral);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  padding: var(--padding-5xs);
  align-items: center;
  justify-content: center;
}
.group-parent3 {
  position: absolute;
  top: 0;
  left: 136px;
  width: 160.76px;
  height: 132.27px;
}
.b26,
.group-div {
  position: relative;
}
.group-div {
  width: 335px;
  height: 349.92px;
}
.b26 {
  font-size: var(--font-size-xl);
  letter-spacing: 0.08em;
  line-height: 175%;
  display: inline-block;
  color: var(--black);
  width: 315px;
}
/* 車を使う空想 */
@keyframes fadeIn {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1.5s forwards;
}

.group-parent1,
.group-parent2,
.group-parent3 {
  opacity: 0;
}
/* 車を使う空想 */

.group-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-21xl);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--white);
}

/* ボーダーのアニメーション */
@keyframes colorChangeBorder {
  0% {
    border-color: transparent;
    transform: translateX(-100%);
  }
  100% {
    border-color: #f58f81;
    transform: translateX(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.b27,
.b27-1 {
  color: var(--coral);
  border-bottom: 2px solid transparent;
  transition: transform 2s ease-out; /* 追加 */
}

.b27-1.animated {
  animation: colorChangeBorder 2s forwards, slideIn 2s forwards;
}

/* ボーダーのアニメーション */
.b28,
.div6 {
  position: relative;
}
.div6 {
  letter-spacing: 0.08em;
  line-height: 200%;
  display: inline-block;
  width: 315px;
}
.b28 {
  flex: 1;
  letter-spacing: 0.04em;
  line-height: 135%;
}
.wrapper2 {
  align-self: stretch;
  border-radius: var(--br-5xs) var(--br-5xs) 0 0;
  background-color: var(--coral);
  display: flex;
  flex-direction: row;
  padding: var(--padding-base);
  align-items: center;
  justify-content: center;
}
.group-child4 {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid var(--coral);
  box-sizing: border-box;
  width: 142px;
  height: 142px;
}
.b29,
.b30 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Element centering */
  width: 100%;
  text-align: center;
  line-height: 150%;
  position: absolute;
}
.ellipse-parent {
  position: relative;
  width: 142px;
  height: 142px;
}
.group-parent4 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-2xs);
}
.b31 {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.01em;
  line-height: 150%;
  color: var(--black);
}
.frame-parent3 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.div7 {
  align-self: stretch;
  position: relative;
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
  line-height: 150%;
  font-weight: 500;
  color: var(--color-dimgray);
  text-align: left;
}
.frame-parent1,
.frame-parent2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent2 {
  border-radius: 0 0 var(--br-base) var(--br-base);
  background-color: var(--white);
  padding: var(--padding-5xl) var(--padding-xl);
  gap: var(--gap-5xl);
  color: var(--coral);
}
.frame-parent-1 {
  opacity: 0;
  text-align: center;
  color: var(--white);
}
.frame-child1 {
  position: relative;
  width: 335px;
  height: 180.78px;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-45xl);
  text-align: left;
  font-size: var(--font-size-base);
}
.b33 {
  position: absolute;
  top: 88px;
  left: 131px;
  letter-spacing: 0.04em;
  line-height: 200%;
}
.union-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 327px;
  height: 130px;
}
.b34 {
  position: absolute;
  top: 28px;
  left: 19px;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.union-parent {
  position: absolute;
  top: 146px;
  left: 24px;
  width: 327px;
  height: 130px;
  font-size: var(--font-size-lg);
  color: var(--coral);
  opacity: 0;
}
.b35 {
  position: absolute;
  top: 11.16px;
  left: 27px;
  line-height: 120%;
}
.group-child6 {
  position: absolute;
  top: 0.16px;
  left: 286px;
  width: 49px;
  height: 61.15px;
}
.group-child7 {
  top: 0;
  left: 0;
  width: 42px;
  height: 57.16px;
}
.b36,
.group-child7,
.parent2 {
  position: absolute;
}
.parent2 {
  top: 272.84px;
  left: 20px;
  width: 335px;
  height: 121.16px;
  font-size: var(--font-size-37xl);
  color: var(--coral);
  opacity: 0;
}
.b36 {
  top: 434px;
  left: 109px;
  letter-spacing: 0.04em;
  line-height: 200%;
}
.frame-child2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 40px;
}
.parent1 {
  position: relative;
  width: 375px;
  height: 516px;
  overflow: hidden;
  flex-shrink: 0;
  background-image: url(./public/frame-5@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  font-size: var(--font-size-5xl);
}
.div4 {
  background-color: var(--lightcoral);
  display: flex;
  flex-direction: column;
  padding: 72px 0 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-45xl);
  text-align: center;
  font-size: var(--font-size-13xl);
}
.b40 {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b40,
.b41,
.parent4 {
  align-self: stretch;
}
.b41 {
  position: relative;
  font-size: var(--font-size-13xl);
  letter-spacing: 0.04em;
  line-height: 150%;
}
.parent4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.rectangle-icon {
  position: absolute;
  top: 30px;
  left: 0;
  border-radius: var(--br-5xl);
  width: 335px;
  height: 220px;
  object-fit: cover;
}
.b42 {
  position: absolute;
  top: -20px;
  left: 10px;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: white;
  text-shadow: -1px -1px 0 #f58f81, 1px -1px 0 #f58f81, -1px 1px 0 #f58f81,
    1px 1px 0 #f58f81;
}
.rectangle-group {
  position: relative;
  width: 335px;
  height: 250px;
}
.div11 {
  position: relative;
  font-size: var(--font-size-base);
  letter-spacing: 0.04em;
  line-height: 175%;
  font-weight: 500;
  color: var(--black);
  display: inline-block;
  width: 315px;
}
.group-parent6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-13xl);
}
.rectangle-container {
  position: relative;
  width: 335px;
  height: 250px;
  font-size: var(--font-size-45xl);
  font-family: var(--font-outfit);
}
.parent6 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 0 var(--padding-3xs);
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
  font-size: var(--font-size-xl);
  color: var(--coral);
}
.span9 {
  font-weight: 600;
}
.b48 {
  font-size: var(--font-size-sm);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}
.div13 {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 150%;
  color: var(--coral);
  text-align: right;
  font-size: var(--font-size-xl);
  font-family: var(--font-outfit);
}
.parent7 {
  border-radius: var(--br-5xs) var(--br-5xs) 0 0;
}
.parent7,
.parent8 {
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  padding: var(--padding-xs);
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xl);
}
.span11 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-family: var(--font-outfit);
}
.div15 {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 150%;
  color: var(--coral);
  text-align: right;
}
.parent12,
.parent13,
.parent9 {
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  padding: var(--padding-5xl) var(--padding-xs);
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xl);
}
.parent12,
.parent13 {
  padding: 60px var(--padding-xs);
}
.parent13 {
  border-radius: 0 0 var(--br-5xs) var(--br-5xs);
  padding: var(--padding-xs);
}
.frame-parent6 {
  display: flex;
  gap: var(--gap-11xs);
}
.frame-parent5,
.frame-parent6,
.frame-wrapper {
  align-self: stretch;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-wrapper {
  border-radius: 0 0 var(--br-base) var(--br-base);
  background-color: var(--lightcoral);
  display: flex;
  padding: var(--padding-xl);
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--black);
}
.frame-parent5 {
  display: none;
  text-align: center;
}
.group-child9,
.rectangle-div {
  position: absolute;
  left: 0;
  width: 232px;
}
.rectangle-div {
  top: 0;
  background-color: var(--color-black);
  height: 1px;
}
.group-child9 {
  top: 38px;
}
.frame-child4,
.group-child10,
.group-child9 {
  background-color: var(--color-black);
  height: 1px;
}
.group-child10 {
  position: absolute;
  top: 75.97px;
  left: 0;
  width: 232px;
}
.frame-child4 {
  position: relative;
  width: 1px;
}
.rectangle-parent2 {
  position: absolute;
  top: 114px;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-11xs);
}
.group-child11,
.group-child12,
.group-child13 {
  position: absolute;
  top: 152px;
  left: 0;
  background-color: var(--color-black);
  width: 232px;
  height: 1px;
}
.group-child12,
.group-child13 {
  top: 190px;
}
.group-child13 {
  top: 228px;
}
.rectangle-parent3,
.rectangle-parent4,
.rectangle-parent5,
.rectangle-parent6 {
  position: absolute;
  top: 266px;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-11xs);
}
.rectangle-parent4,
.rectangle-parent5,
.rectangle-parent6 {
  top: 304px;
}
.rectangle-parent5,
.rectangle-parent6 {
  top: 342px;
}
.rectangle-parent6 {
  top: 380px;
}
.group-child14,
.group-child15 {
  position: absolute;
  top: 418px;
  left: 0;
  background-color: var(--color-black);
  width: 232px;
  height: 1px;
}
.group-child15 {
  top: 456px;
}
.rectangle-parent1 {
  opacity: 0.15;
}
.group-frame,
.rectangle-parent1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 232px;
  height: 457px;
}
.b62,
.div20 {
  position: absolute;
  top: 2px;
  left: 185px;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b62 {
  top: 8px;
  left: 25px;
  font-size: var(--font-size-sm);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
  color: var(--black);
  text-align: left;
}
.group-child16 {
  position: absolute;
  top: 0;
  left: 5px;
  background-color: var(--coral);
  width: 4px;
  height: 27px;
}
.group-child17 {
  position: absolute;
  top: 25px;
  left: 0;
  width: 14px;
  height: 10px;
}
.parent14,
.parent15,
.rectangle-parent7 {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 35px;
}
.parent14,
.parent15 {
  width: 215px;
}
.parent15 {
  top: 38px;
}
.b65,
.div22 {
  position: absolute;
  top: 28px;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b65 {
  left: 155px;
}
.div22 {
  left: 148px;
  top: 24px;
}
.b65 {
  top: 27px;
  left: 25px;
  color: var(--black);
  text-align: left;
}
.group-child20 {
  position: absolute;
  top: 0;
  left: 5px;
  background-color: var(--coral);
  width: 4px;
  height: 65px;
}
.group-child21,
.rectangle-parent9 {
  position: absolute;
  top: 63px;
  left: 0;
  width: 14px;
  height: 10px;
}
.rectangle-parent9 {
  top: 0;
  height: 73px;
}
.parent16,
.parent17,
.parent18 {
  position: absolute;
  left: 0;
  width: 215px;
}
.parent16 {
  top: 76px;
  height: 73px;
  font-size: var(--font-size-sm);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}
.parent17,
.parent18 {
  top: 152px;
  height: 35px;
}
.parent18 {
  top: 190px;
}
.b71 {
  top: 86px;
  left: 189px;
}
.div25 {
  top: 83px;
  left: 183px;
}
.b71,
.div25 {
  position: absolute;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b71 {
  top: 88px;
  left: 25px;
  font-size: var(--font-size-sm);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
  color: var(--black);
  text-align: left;
}
.group-child26 {
  position: absolute;
  top: 0;
  left: 5px;
  background-color: var(--coral);
  width: 4px;
  height: 177px;
}
.group-child27 {
  position: absolute;
  top: 177px;
  left: 0;
  width: 14px;
  height: 10px;
}
.parent19,
.parent20,
.rectangle-parent12 {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 187px;
}
.parent19,
.parent20 {
  top: 228px;
  width: 215px;
}
.parent20 {
  top: 418px;
  height: 35px;
}
.group-child30,
.group-parent9 {
  position: absolute;
  top: 2.03px;
  left: 10px;
  width: 215px;
  height: 453px;
}
.group-child30 {
  top: 0;
  left: 0;
  background-color: var(--navy);
  width: 47px;
  height: 457px;
}
.b74,
.div27 {
  letter-spacing: 0.04em;
  line-height: 150%;
}
.div27 {
  position: absolute;
  top: 19px;
  left: 2px;
  font-size: 30px;
  font-weight: 600;
  font-family: var(--font-outfit);
}
.b74 {
  top: 55px;
  left: 9px;
}
.b74,
.b75,
.parent21 {
  position: absolute;
}
.b75 {
  top: 0;
  left: 0;
  line-height: 150%;
}
.parent21 {
  top: 194.93px;
  left: 7px;
  width: 33px;
  height: 67px;
}
.rectangle-parent14 {
  position: absolute;
  top: 0.03px;
  left: 248px;
  width: 47px;
  height: 457px;
  font-size: var(--font-size-base);
  color: var(--white);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}
.group-parent8 {
  position: relative;
  width: 295px;
  height: 457.03px;
}
.group-wrapper {
  align-self: stretch;
  border-radius: 0 0 var(--br-base) var(--br-base);
  background-color: var(--lightcoral);
  padding: 32px var(--padding-xl);
  text-align: right;
  font-size: var(--font-size-xl);
  color: var(--coral);
  font-family: var(--font-outfit);
}
.frame-parent7,
.group-parent7,
.group-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent7 {
  align-self: stretch;
  text-align: center;
}
.group-parent7 {
  gap: var(--gap-13xl);
  font-size: var(--font-size-base);
  color: var(--white);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}
.rectangle-parent15 {
  position: relative;
  width: 335px;
  height: 250px;
  font-family: var(--font-outfit);
}
.parent22,
.parent23 {
  align-self: center;
  display: flex;
}
.parent22 {
  flex-direction: column;
  padding: 0 var(--padding-3xs);
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
  font-size: var(--font-size-xl);
}
.parent23 {
  border-radius: var(--br-5xs) var(--br-5xs) 0 0;
  background-color: var(--coral);
  flex-direction: row;
  padding: var(--padding-base);
  align-items: center;
  justify-content: center;
  gap: var(--gap-base);
}
.div29,
.t {
  position: relative;
}
.t {
  flex: 1;
  line-height: 150%;
}
.div29 {
  line-height: 175%;
  color: var(--coral);
  text-align: right;
  display: inline-block;
  flex-shrink: 0;
}
.t-parent {
  border-radius: var(--br-5xs) var(--br-5xs) 0 0;
}
.k-parent,
.t-parent {
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  padding: var(--padding-xs);
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.div31 {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: var(--coral);
  text-align: right;
  display: inline-block;
  width: 105px;
  flex-shrink: 0;
  font-size: var(--font-size-xl);
  font-family: var(--font-outfit);
}
.k-group {
  align-self: stretch;
  border-radius: 0 0 var(--br-5xs) var(--br-5xs);
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  padding: var(--padding-xs);
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.frame-wrapper1 {
  border-radius: 0 0 var(--br-base) var(--br-base);
  background-color: var(--lightcoral);
  padding: var(--padding-xl);
  font-size: var(--font-size-sm);
  color: var(--black);
}
.frame-parent9,
.frame-wrapper1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.httpswwwwithnaviorgdrive {
  position: relative;
  font-size: 12px;
  line-height: 175%;
  font-weight: 500;
  color: var(--color-dimgray);
  text-align: center;
}
.frame-parent8,
.group-parent10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.frame-parent8 {
  align-self: stretch;
  gap: var(--gap-base);
  font-size: var(--font-size-base);
  color: var(--white);
}
.group-parent10 {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}
.line {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 200%;
  display: inline-block;
  width: 315px;
}
.line-parent {
  align-self: stretch;
  display: flex;
  padding: 0 var(--padding-3xs);
  gap: var(--gap-xl);
  font-size: var(--font-size-xl);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}
.div10,
.frame-parent4,
.group-parent12,
.line-parent {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.group-parent12 {
  display: none;
  gap: var(--gap-13xl);
}
.div10,
.frame-parent4 {
  display: flex;
  gap: var(--gap-37xl);
}
.frame-parent4 {
  text-align: left;
  font-size: var(--font-size-45xl);
  color: var(--coral);
  font-family: var(--font-outfit);
  align-items: center;
}
.div10 {
  margin: 0 auto;
  align-self: stretch;
  background-color: var(--white);
  padding: var(--padding-45xl) var(--padding-xl);
  text-align: center;
  font-size: var(--font-size-base);
}
.line-capture-710153400-icon {
  position: relative;
  border-radius: var(--br-base);
  width: 261px;
  height: 352px;
  object-fit: cover;
}
.line-capture-710153400-parent {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.inner {
  position: relative;
  width: 335px;
  height: 352px;
}
.div36 {
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  font-size: var(--font-size-13xl);
  padding-top: 64px;
}
.child1 {
  position: absolute;
}
.child1 {
  top: 21px;
  left: -57px;
  width: 448px;
  height: 488px;
  display: none;
  opacity: 0.66;
}
.b89 {
  top: 64px;
  left: 37px;
  line-height: 150%;
}
.frame-icon {
  left: calc(50% + 5px);
  transform: translateX(-50%);
  position: absolute;
  top: 182px;
  width: 327px;
  height: 178px;
  object-fit: cover;
}
.b90 {
  top: 30px;
  left: 50px;
  letter-spacing: 0.04em;
  line-height: 260%;
}
.b91 {
  top: 24px;
  left: 48px;
  font-size: 120px;
  font-family: var(--font-outfit);
  text-align: right;
  position: absolute;
}
/* 数字のかいてん */
@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(720deg);
  }
}

.b91.rotating {
  animation: flip 1.5s linear;
}

/* 数字の回転 */
.b92 {
  top: 74px;
  left: 198px;
  font-size: var(--font-size-13xl);
  letter-spacing: 0.04em;
  line-height: 120%;
  text-align: left;
  position: absolute;
}
.frame-child396 {
  position: absolute;
  top: 2px;
  left: 2px;
  border: 1px solid var(--coral);
  box-sizing: border-box;
  width: 317px;
  height: 168px;
}
.frame-parent11,
.parent26 {
  margin: 0 auto;
  width: 327px;
  height: 178px;
}
.parent26 {
  top: 178px;
  background-color: var(--white);
  border: 3px solid var(--coral);
  box-sizing: border-box;
  position: absolute;
}
.frame-parent11 {
  margin: 40px auto 48px;
  top: 158px;
  left: 24px;
  font-size: var(--font-size-xl);
  color: var(--coral);
}
img {
  animation: shimmer 2s infinite linear;
}
/* イラストのキラキラ */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.b93 {
  text-align: center;
  line-height: 150%;
}
.payarea {
  max-width: 375px;
  margin: 0 auto;
  text-align: left;
}
.vector-icon3 {
  height: 9px;
  padding-left: 20px;
}
.div37 {
  align-self: stretch;
  position: relative;
  padding: 64px 0 72px;
  background-image: url(./public/@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  text-align: center;
  font-size: var(--font-size-5xl);
}
.b97 {
  top: 64.03px;
  left: calc(50% - 125.5px);
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b97,
.b98,
.child2 {
  position: absolute;
}
.child2 {
  top: 137.03px;
  left: calc(50% - 99.5px);
  width: 198.92px;
  height: 138px;
}
.b98 {
  top: 307.03px;
  left: calc(50% - 113.5px);
  font-size: var(--font-size-base);
  letter-spacing: 0.04em;
  line-height: 175%;
}
.frame-child398 {
  border-radius: 50%;
  background-color: var(--white);
  height: 300px;
  margin: 0 auto;
  margin-top: -80px;
  margin-bottom: 50px;
  margin-right: calc(20% - 50vw);
  margin-left: calc(20% - 50vw);
}
.b99,
.line2 {
  text-align: center;
  line-height: 130%;
}
.b99 {
  opacity: 0;
}
.line2 {
  top: 146px;
  left: 47px;
  font-size: var(--font-size-lg);
  letter-spacing: 0.04em;
  line-height: 175%;
  color: var(--black);
}
.frame-child399 {
  margin: 0 auto 10px;
  width: 98px;
  height: 42px;
}
.ellipse-parent1 {
  background-color: var(--lightcoral);
  width: 376px;
  overflow: hidden;
  font-size: 40px;
  color: var(--coral);
  margin: 200px auto 0;
  padding-bottom: 50px;
}
.div38 {
  align-self: stretch;
  position: relative;
  background-color: var(--white);
  text-align: center;
  font-size: var(--font-size-13xl);
}
.b103 {
  top: 2px;
  left: 2px;
  letter-spacing: 0.04em;
  line-height: 150%;
}
.b103,
.b104,
.parent29 {
  position: absolute;
}
.b104 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  top: 0;
  left: 0;
  line-height: 150%;
  text-shadow: -1px -1px 0 #f58f81, 1px -1px 0 #f58f81, -1px 1px 0 #f58f81,
    1px 1px 0 #f58f81;
}
.parent29 {
  position: absolute;
  top: 0;
  left: 48.36px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 209px;
  height: 100%;
}
.group-child34,
.group-child35 {
  position: absolute;
  top: 0;
  left: 271px;
  width: 31.72px;
  height: 100%;
  object-fit: cover;
}
.group-child35 {
  top: -1.95px;
  left: 266.63px;
  width: 35.15px;
  height: 60.71px;
}
.group-child36,
.group-child37 {
  position: absolute;
  top: 0;
  left: 3px;
  width: 31.72px;
  height: 100%;
  object-fit: cover;
}
.group-child37 {
  top: -1.95px;
  left: -2.07px;
  width: 35.15px;
  height: 60.71px;
}
.group-parent16 {
  position: relative;
  width: 302.72px;
  height: 59px;
  display: flex;
  align-items: center;
}
.b105 {
  position: absolute;
  top: 78px;
  left: -10px;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: var(--black);
}
.group-child38 {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: var(--coral);
  width: 100%;
  height: 100%;
}

.b106 {
  position: absolute;
  left: calc(50% - 16px);
  letter-spacing: 0.04em;
  line-height: 150%;
}
.ellipse-parent2,
.ellipse-parent3 {
  position: relative;
  width: 54px;
  height: 54px;
  margin-left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ellipse-parent3 {
  margin-left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.b108 {
  position: absolute;
  left: calc(50% - 9px);
  letter-spacing: 0.04em;
  line-height: 150%;
}
.group-parent18 {
  position: absolute;
  top: 0;
  left: calc(50% - 68.5px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--font-size-13xl);
}
.frame-child401 {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 327px;
  height: 208px;
  object-fit: cover;
}
.group-child41 {
  position: absolute;
  top: 0;
  left: 0;
  width: 279px;
  height: 31px;
}
.b109 {
  position: absolute;
  top: 8px;
  left: 83px;
  letter-spacing: 0.04em;
  line-height: 175%;
}
.vector-parent1 {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 279px;
  height: 31px;
}
.span32 {
  font-size: var(--font-size-13xl);
}
.b110 {
  position: absolute;
  top: 84px;
  left: calc(50% - 88.5px);
  line-height: 115%;
  color: var(--coral);
  font-size: var(--font-size-29xl);
}
.frame-child402 {
  position: absolute;
  top: 5px;
  left: 5px;
  border: 1px solid var(--coral);
  box-sizing: border-box;
  width: 317px;
  height: 198px;
}
.group-parent19 {
  background-color: var(--white);
  border: 3px solid var(--coral);
  box-sizing: border-box;
}
.frame-parent12,
.frame-wrapper2,
.group-parent19 {
  position: absolute;
  top: 0;
  left: 0;
  width: 327px;
  height: 208px;
}
.frame-wrapper2 {
  top: 124px;
}
.parent30 {
  position: relative;
  width: 327px;
  height: 80px;
}
.b114,
.line3 {
  position: absolute;
  line-height: 175%;
}
.line3 {
  top: 78px;
  left: 7px;
  color: var(--black);
}
.b114 {
  top: 8px;
  left: calc(50% - 27.5px);
  letter-spacing: 0.04em;
}
.vector-parent2 {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 279px;
  height: 31px;
  color: var(--white);
}
.b115 {
  position: absolute;
  top: 0;
  left: 97px;
}
.b115,
.b116,
.b117 {
  line-height: 175%;
}
.b116 {
  position: absolute;
  top: 2px;
  left: 83px;
  font-size: var(--font-size-37xl);
}
.b117 {
  top: 0;
  left: 0;
}
.b117,
.b118,
.parent31 {
  position: absolute;
}
.parent31 {
  top: 0;
  left: 0;
  width: 237px;
  height: 47px;
}
.b118 {
  top: 21px;
  left: 239px;
  font-size: var(--font-size-9xl);
  letter-spacing: 0.04em;
  line-height: 120%;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
  text-align: left;
}
.group-parent22 {
  position: absolute;
  top: 87px;
  left: 32px;
  width: 267px;
  height: 47px;
  text-align: right;
  font-size: var(--font-size-51xl);
  font-family: var(--font-outfit);
}
.parent22 .line {
  margin-top: var(--gap-13xl);
}
.parent22 .div11 {
  margin-bottom: var(--gap-13xl);
}
.b119 {
  position: absolute;
  top: 151px;
  left: calc(50% - 71.5px);
  font-size: var(--font-size-9xl);
  letter-spacing: 0.04em;
  line-height: 120%;
  text-align: left;
}
.frame-parent14 {
  position: absolute;
  top: 156px;
  left: 0;
  width: 327px;
  height: 208px;
  color: var(--coral);
}
.frame-parent13 {
  position: relative;
  width: 327px;
  height: 364px;
}
.group-parent17 {
  align-items: center;
  gap: 48px;
  font-size: var(--font-size-lg);
}
.div39,
.group-parent17,
.sp {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.div39 {
  align-self: stretch;
  align-items: center;
  gap: var(--gap-21xl);
  background-image: url(./public/1@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  text-align: center;
  font-size: var(--font-size-37xl);
  color: var(--white);
  padding: 64px;
}
.present1,
.present2 {
  opacity: 0;
}
.sp {
  position: relative;
  background-color: var(--white);
  width: 100%;
  overflow: hidden;
  align-items: center;
  text-align: left;
  font-size: var(--font-size-lg);
  color: var(--black);
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 500;
}

/* スライダー */
.swiper-slide {
  width: 261px !important;
  height: auto;
}

.l-wrapper {
  margin-top: 56px;
  margin-bottom: 64px;
}

/* アコーディオン */
.accordion-content {
  display: block;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
}

.accordion-toggle {
  cursor: pointer;
}

.bg-2 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.bg-2-sur {
  font-size: 20px;
  margin: 0 10px;
}
.bg-2 p {
  font-size: 16px;
  color: white;
}
/* アコーディオンにここをタップという文言の追加 */
/* ただすいません！にアニメーションの追加 */
/* 最後の特典の表示位置の変更 */

.btnshine {
  position: relative;
  display: inline-block;
  background: var(--coral) !important;
  color: #fff;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}

.btnshine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 252, 252, 0.883) 100%
  );
  transform: skewX(-25deg);
  animation: shine 1s infinite 3s; /* Add animation in the normal state, not on hover. */
}

/* 特商法 */
footer {
  width: 100%;
  background: #cbbaba;
  padding: 10px 0;
  text-align: center;
}
.special-law-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}
.special-law-link:hover {
  text-decoration: underline;
}

.info{
  text-align: center;
}

.merchant-info {
  max-width: 400px;
  margin: 80px auto 0;
}

.info-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #f00;
  padding-bottom: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.info-item, .info-item strong {
  margin: 10px 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.info-item strong {
  color: #333;
}

.info-item ul {
  list-style-type: none;
  padding-left: 0;
  list-style: none;
}

.info-item ul li {
  text-indent: -1em;
  position: relative;
  margin-left: -10px;
}

.info-item ul li:before {
  content: "• ";
  color: #f00;
  position: absolute;
  left: 0;
}


@keyframes shine {
  100% {
    left: 125%;
  }
}


/* ブラウザバックcss */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s ease-in-out;
}

.modal-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* モーダル内容のスタイル */
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.line_btn{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -0%);
}

.line_btn{
  text-align: center;
  margin: 0 auto;
}

.modal-content img {
  max-width: 300px;
  margin-bottom: 20px;
}

.modal-content button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.modal-content button:hover {
  background-color: #0056b3;
}