@charset "shift_jis";
/* Updated 2026/08/07.T */
/* Updated 2025/12/24.T */
.introduction-btn:focus,
.feature-btn a:focus {
  outline: none !important;
}
.mv-title {
  color: #004831;
  text-align: center;
  position: relative;
  overflow-x: clip;
  padding: 34px 5% 20px;
}
.mv-title > .mv-titleMainTxt {
  margin: 0 auto;
  transition: all 1s;
}
.mv-title > .mv-titleMainTxt .mv_titleMainImg {
  max-width: 319px;
}
.mv-card {
  width: 100%;
  min-height: 333px;
  background-color: #f4ebda;
  margin: auto;
  padding: 20px 0;
  text-align: center;
}
.mv-cardCnt {
  position: relative;
  width: 100%;
  max-width: 323px;
  height: auto;
  text-align: center;
  margin: auto;
}
@media screen and (max-width: 350px) {
  .mv-title > .mv-titleMainTxt .mv_titleMainImg {
    max-width: 72%;
  }
  .mv-card {
    max-width: 320px;
}
.mv-cardCnt {
    max-width: 85%;
    transform-style: preserve-3d;
  }
}
.mv-cardItem {
  position: absolute;
}
[data-mvcardselect="1"] [data-mvcard="1"],
[data-mvcardselect="2"] [data-mvcard="2"],
[data-mvcardselect="3"] [data-mvcard="3"] {
  z-index: 10;
  animation: card-shuffle forwards .7s ease-in-out;
}
[data-mvcardselect="3"] [data-mvcard="1"],
[data-mvcardselect="1"] [data-mvcard="2"],
[data-mvcardselect="2"] [data-mvcard="3"] {
  transform: rotateZ(-5deg) translate3d(5px,0,-200px) scale(.98);
}
[data-mvcardselect="2"] [data-mvcard="1"],
[data-mvcardselect="3"] [data-mvcard="2"],
[data-mvcardselect="1"] [data-mvcard="3"] {
  transform: rotateZ(5deg) translate3d(-5px,0,-200px) scale(.98);
}
@keyframes card-shuffle {
  0% {
    transform: rotateZ(-5deg) translate3d(-5px,0,-200px) scale(.98);
  }
  50% {
    transform: rotateZ(-2deg) translate3d(-15px,-5px,-100px);
  }
  100% {
    transform: translate3d(0,0,0) rotateZ(0) scale(1);
  }
}
.mv-cardItemBtn {
  display: block;
}
.mv-cardBtn {
  position: absolute;
  bottom: -10px;
  right: -20px;
  width: 68px;
  height: 68px;
  background-color:rgba(253, 251, 247, 0.8);
  border: solid 2px #004831;
  border-radius: 50%;
  text-align: right;
  z-index: 11;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mv-cardBtn::before {
  content: "";
  background: url(/kojin/olive-account/guide/top/imgs/index_ico_mv01.svg) no-repeat;
  background-size: contain;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
@media screen and (any-hover: hover){
  .mv-cardBtn:hover {
    background-color: rgba(229, 237, 234, 0.8);
  }
}
.introduction {
    background-color: #004831;
    padding: 40px 16px;
}
.introduction-title {
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    margin: 0 auto 16px;
    position: relative;
}
.introduction-title > span {
    display: inline-block;
    width: auto;
    height: 28px;
    padding-right: 5px;
    box-sizing: content-box;
    transform: translateY(-6px);
}
.introduction-title > span > img {
    height: 100%;
    width: auto;
}
.introduction-title > .animation-txt {
  color: #fff;
  font-family: noto-sans;
  font-size: 1.8rem;
  font-weight: 400;
  position: relative;
  width: fit-content;
  margin: auto;
  transition: transform;
}
.introduction-title > .animation-txt::before {
    content: '';
    position: absolute;
    background-color: #fff;
    width: 2px;
    height: 16px;
    transform: rotate(-30deg);
    top: 5px;
    left: -15px;
}
.introduction-title > .animation-txt::after {
    content: '';
    position: absolute;
    background-color: #fff;
    width: 2px;
    height: 16px;
    transform: rotate(30deg);
    top: 5px;
    right: -15px;
}
.introduction-btn.fadein-active > .animation-txt {
    animation: shake-txt forwards 1s ease-in-out 1s;
}
.introduction-txtDitail {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 24px;
}
@keyframes shake-txt {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.introduction-txt {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  max-width: 343px;
  margin: 0 auto;
}
.introduction-img {
  width: 100%;
  max-width: 343px;
  margin: 24px auto;
}