@charset "shift_jis";
/* Updated 2025/12/24.T */

.introduction-btn:focus,
.feature-btn a:focus,
.campaign-bnr a:focus,
.more-boxBtn a:focus {
  outline: none !important;
}

.mv-title {
  color: #004831;
  text-align: center;
  position: relative;
  overflow-x: clip;
  padding:34px 0 0;
}

.mv-title > .mv-titleMainTxt {
  max-width: 332px;
  margin: 0 auto;
  transition: all 1s;
}
.mv-title > .mv-titleMainTxt .mv_titleMainImg{
  max-width: 332px;
}
.mv-img {
  max-width: 307px;
  margin: 12px auto 0;
}
.mv-imgCnt {
  width: 35%;
  max-width: 105px;
  margin:auto;
}
.mv-img > .mv-imgTop,
.mv-img > .mv-imgBottom {
  position: relative;
  display: inline-block;
  width: 100%;
}
.mv-img > .mv-imgTop::before {
  content: '';
  position: absolute;
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_bg_mv01.svg) no-repeat;
  background-size: contain;
  width:80px;
  height:auto;
  top: 40px;
  left:0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s;
}
.mv-img > .mv-imgTop::after {
  content: '';
  position: absolute;
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_bg_mv02.svg) no-repeat;
  background-size: contain;
  width:82px;
  height:auto;
  top: 30px;
  right:0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s;
}
.mv-img > .mv-imgBottom::before {
  content: '';
  position: absolute;
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_bg_mv03.svg) no-repeat;
  background-size: contain;
  width: 96px;
  height:auto;
  bottom: 32px;
  left: 9%;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s;
}
.mv-img > .mv-imgBottom::after {
  content: '';
  position: absolute;
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_bg_mv04.svg) no-repeat;
  background-size: contain;
  width:76px;
  height:auto;
  bottom: 36px;
  right: 11%;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s;
}
@media screen and (max-width:350px){
  .mv-title > .mv-titleMainTxt .mv_titleMainImg {
      max-width: 90%;
  }
}

.mv-img > .mv-imgTop::before {
  width: 100%;
  max-width: 80px;
  height: 100px;
  top:3px;
  left:11px;
}
.mv-img > .mv-imgTop::after {
  width: 100%;
  max-width: 82px;
  height: 100px;
  top:-10px;
  right:0;
}
.mv-img > .mv-imgBottom::before {
  width: 100%;
  max-width: 96px;
  height: 100px;
  bottom: 20px;
  left: 0;
}
.mv-img > .mv-imgBottom::after {
  width: 100%;
  max-width: 76px;
  height: 100px;
  bottom:16px;
  right:11px;
}

.mv-img.show-bg01 > span:first-of-type::before,
.mv-img.show-bg02 > span:first-of-type::after,
.mv-img.show-bg03 > span:last-of-type::before,
.mv-img.show-bg04 > span:last-of-type::after {
  opacity: 1;
  transform: translateY(0);
}

.mv-lead {
  width: 100%;
  box-sizing: border-box;
  background-color: #F4EBDA;
  padding: 0 0 40px;
}
.mv-lead .toggle-wrap01 {
  width: 83%;
  margin: auto;
}
.mv-lead .btn01 {
  padding: 13px 43px 13px 16px;
  background-color: #fff;
  border-radius: 8px;
  position: relative;
}
.mv-lead .btn01 .switch-btnTxt{
  max-width: 217px;
  margin: 0 auto;
}
.mv-lead .toggle-wrap01 .btn01[aria-expanded="true"] {
  border-radius: 8px 8px 0 0;
}
.mv-lead .btn01::after {
    content: "";
  background: url(/kojin/cmn/imgs/ico_arrow_right_01.svg) no-repeat;
  background-size: contain;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%) rotate(90deg);
}
.mv-lead .btn01[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(-90deg);
}
.mv-lead .body01 {
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  padding: 24px 16px;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #141D1D;
  border-top: 1px solid #D5DEDB;
}
.mv-leadTxt {
  font-size: 1.4rem;
  line-height: 1.5;
  color: #004831;
  margin-bottom: 8px;
}
.mv-leadImg{
  max-width:279px;
  margin:0 auto;
}

.introduction {
  /* background-color: #4D7F6F; */
}
.introduction > .introduction-inner{
  position: relative;
  padding: 14px 16px 84px;
}
.introduction > .introduction-inner:first-of-type{
  padding-top:40px;
}
.introduction > .introduction-inner::before,
.introduction > .introduction-inner::after{
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   bottom: 0;
   border-top: transparent 30px solid;
}
.introduction > .introduction-inner:nth-of-type(1):before {
  left: 0;
  border-left: #B3C8C1 170px solid;
  border-right: transparent 170px solid;
  border-bottom: #B3C8C1 30px solid;
}
.introduction > .introduction-inner:nth-of-type(1)::after {
  right: 0;
  border-left: transparent 170px solid;
  border-right: #B3C8C1 170px solid;
  border-bottom: #B3C8C1 30px solid;
}
.introduction > .introduction-inner:nth-of-type(2)::before {
  left: 0;
   border-left: #4D7F6F 170px solid;
   border-right: transparent 170px solid;
  border-bottom: #4D7F6F 30px solid;
}
.introduction > .introduction-inner:nth-of-type(2)::after {
  right: 0;
   border-left: transparent 170px solid;
   border-right: #4D7F6F 170px solid;
  border-bottom: #4D7F6F 30px solid;
}
.introduction > .introduction-inner:nth-of-type(3)::before {
  left: 0;
   border-left: #004831 170px solid;
   border-right: transparent 170px solid;
  border-bottom: #004831 30px solid;
}
.introduction > .introduction-inner:nth-of-type(3)::after {
  right: 0;
   border-left: transparent 170px solid;
   border-right: #004831 170px solid;
  border-bottom: #004831 30px solid;
}
.introduction > .introduction-inner:first-of-type{
  background-color: #EFF1EB;
}
.introduction > .introduction-inner:nth-of-type(2){
    background-color:#B3C8C1;
}
.introduction > .introduction-inner:nth-of-type(3){
    background-color:#4D7F6F;
}
.introduction > .introduction-inner:nth-of-type(4){
    background-color:#004831;
}
.introduction > .introduction-inner:last-of-type{
  padding-bottom:54px;
}
.introduction > .introduction-inner:nth-of-type(3) .introduction-title,
.introduction > .introduction-inner:nth-of-type(4) .introduction-title{
  color:#fff;
}

.introduction > .introduction-inner .introduction-title::before{
  content:'';
  display:inline-block;
  width:40px;
  height:40px;
  vertical-align:middle;
  margin-right:2px;
}
.introduction > .introduction-inner:nth-of-type(1) .introduction-title::before{
  background:url(/kojin/olive-account/guide/onboarding/imgs/index_ico_introduction01.png) center center no-repeat;
  background-size:23px auto;
}
.introduction > .introduction-inner:nth-of-type(2) .introduction-title::before{
  background:url(/kojin/olive-account/guide/onboarding/imgs/index_ico_introduction02.png) center center no-repeat;
  background-size:36px auto;
}
.introduction > .introduction-inner:nth-of-type(3) .introduction-title::before{
  background:url(/kojin/olive-account/guide/onboarding/imgs/index_ico_introduction03.png) center center no-repeat;
  background-size:32px auto;
}
.introduction > .introduction-inner:nth-of-type(4) .introduction-title::before{
  background:url(/kojin/olive-account/guide/onboarding/imgs/index_ico_introduction04.png) center center no-repeat;
  background-size:32px auto;
}
.introduction-title {
  text-align: center;
  color: #fff;
  margin-bottom: 16px;
  font-size:2.4rem;
  font-weight:bold;
  letter-spacing:0.04em;
  color: #004831;
}
.introduction-title .number{
  font-family: Roboto;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1.5;
  letter-spacing: 4%;
  margin-right:2px;
}
.introduction-title > p {
  position: relative;
  width: fit-content;
  margin: auto;
}
.introduction-title > p:first-of-type {
  font-size: 1.6rem;
}
.introduction-title > p:first-of-type::before {
  content: '';
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 16px;
  transform: rotate(-15deg);
  top: 5px;
  left: -10px;
}
.introduction-title > p:first-of-type::after {
  content: '';
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 16px;
  transform: rotate(15deg);
  top: 5px;
  right: -10px;
}
.introduction-title > p:last-of-type {
  font-size: 2.6rem;
  font-weight: bold;
  padding-left: 32px;
}
.introduction-title > p:last-of-type::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 42px;
  top: 0;
  left: 0;
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_ico_introduction01.png) no-repeat;
  background-size: contain;
}
.introduction-wrap{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:450px;
  margin:0 auto;
}
.introduction-btn {
  display: flex;
  background-color: #FDFBF7;
  border-radius: 8px;
  padding: 12px 20px 15px 24px;
  box-shadow: #C1CCC5 4px 4px;
  text-decoration: none;
  gap:8px;
}
.introduction-btn:hover {
      background-color: #F5F5F5;
}
.introduction > .introduction-inner:nth-of-type(2) .introduction-btn {
  box-shadow: #D5DEDB 4px 4px;
}
.introduction-image{
  width:72px;
}
.introduction-wrapRight{
  width:calc(100% - 80px);
}
.introduction-subTitle {
  display: inline-block;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: #A89346;
  border-radius: 32px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.introduction-txt{
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.introduction-btn:first-of-type:before {
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_ico_introduction02.png) no-repeat;
  background-size: contain;
}
.introduction-btn:last-of-type:before {
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_ico_introduction03.svg) no-repeat;
  background-size: contain;
}
.introduction-btn > span:first-of-type {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: #A89346;
  border-radius: 32px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
.introduction-btn > span:last-of-type {
  font-size: 1.6rem;
  font-weight: bold;
  color: #004831;
}
.more-benefits .introduction-titleWrap{
  text-align:center;
}
.more-benefits .introduction-listen {
  position:relative;
  display:inline-block;
  font-size: 1.6rem;
  font-weight: 400;
  text-align:center;
  color:#fff;
  margin:0 auto;
}
.more-benefits .introduction-listen::before {
  content: '';
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 16px;
  transform: rotate(-30deg);
  top: 5px;
  left: -12px;
}
.more-benefits .introduction-listen::after {
  content: '';
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 16px;
  transform: rotate(30deg);
  top: 5px;
  right: -12px;
}

.feature {
  width: 100%;
  background-color: #F4EBDA;
  padding: 32px 5% 40px;
}
.feature-titleWrap {
  text-align: center;
  color: #004831;
  margin-bottom: 24px;
}
.feature-titleWrap > .feature-title {
  position: relative;
  width: fit-content;
  margin: auto;
}
.feature-titleWrap > .feature-title {
  font-size: 2.6rem;
  font-weight: bold;
  padding-left: 50px;
}
.feature-titleWrap > .feature-title::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  top: 3px;
  left: 0;
  background: url(/kojin/olive-account/guide/common/imgs/oliveguide_ico_feature01.svg) no-repeat;
  background-size: contain;
}

.feature-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.feature-btn > a {
  width: calc(50% - 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FDFBF7;
  border-radius: 8px;
  padding: 16px 14px;
  box-shadow: #D1C6AF 4px 4px;
  margin-bottom: 16px;
  text-decoration: none;
  position: relative;
}
.feature-btn > a:hover {
  background-color: #F5F5F5;
}
.feature-btnLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: #a89346;
  border-radius: 32px;
  padding: 2px 8px;
  margin-bottom: 8px;
  line-height: 1.2;
  min-height: 32px;
}
.feature-btnLabel.feature-btnLabelFs{
  font-size: 1.1rem;
}
.feature-btnImg {
  max-width: 72px;
  margin: 12px auto;
}
.feature-btnTxt {
  font-size: 1.6rem;
  font-weight: bold;
  color: #004831;
  text-align: center;
}
.feature-link {
  text-align: center;
  margin-top: 8px;
}
.feature-link a.icon-link01 {
  font-size: 1.8rem;
}

.campaign {
  background-color: #004831;
  padding: 32px 7% 48px;
}
.campaign-titleWrap {
  text-align: center;
  color: #fff;
  margin-bottom:24px;
}
.campaign-titleWrap > .campaign-title {
  position: relative;
  margin: auto;
  font-size: 2.6rem;
  font-weight: bold;
}
.campaign-titleWrap > .campaign-title::before {
  content: '';
  display: inline-block;
  background-color: #fff;
  width: 48px;
  height: 48px;
  background: url(/kojin/olive-account/guide/onboarding/imgs/index_ico_canpaign01.png) center center no-repeat;
  background-size:26px auto;
  vertical-align: middle;
  margin-right:4px;
}

.campaign-bnr{
  text-align: center;
}
.campaign-bnr > .campaign-bnrImageWrap {
  display: inline-block;
  max-width:320px;
  margin-top: 24px;
  margin:0 auto;
}
.campaign-bnrImage {
  max-width: 320px;
}

.info .info-store{
  margin-top:0;
}