@charset "shift_jis";
/* Updated 2025/12/24.T */
@font-face { font-family: "noto-sans-black"; src: url("/kojin/special/fonts/NotoSansJP-Black.woff") format("woff"); }

.guide-ankerLlink a:focus,
.guide-moreBtn:focus,
.feature-btn:focus,
.guide-stepSlider [tabindex]:focus,
.guide-stepSlider button:focus {
  outline: none !important;
}
.guide .-green01.btn-type02:focus,
.guide .btn-type01.-green01:focus {
  background: #004831;
}

/* ===　guide-stepスライダー　===*/
.slick-track {
  display: flex;
  align-items: flex-start;
}
.slick-slide {
  text-align: center;
  display: block !important;
}

.slick-slide .slider-img {
  width: 250px;
  margin: auto;
  margin-bottom: 76px;
}
.slick-slide .slider-img > img {
  width: 100%;
  height: auto;
}
.slick-slide .guide-stepBtn a.btn-type01 {
  max-width: 290px;
}
.guide-stepSlider {
  position: relative;
}
.guide-stepSlider .slick-slide > .inner {
  height: 100%;
  padding: 40px 21px 49px;
  background: #f9f8f3;
  border-radius: 8px;
  box-shadow: 0px 4px 10px 0px #0000000f;
}
.guide-stepSlider .slick-slide:first-child > .inner {
  padding: 16px 19px 49px;
}
.guide-stepSlider .slick-arrow {
  position: absolute;
  top: 188px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url(/kojin/olive-account/guide/common/imgs/oliveguide_ico_slider01.png)
    no-repeat 0 0 / 100%;
}
.guide-stepSlider .slick-prev {
  font-size: 0;
  left: 0;
  transform: rotate(-180deg);
  box-shadow: 0 -10px 12px rgba(20, 29, 29, 0.08),
    0 0 4px rgba(20, 29, 29, 0.05);
}
.guide-stepSlider .slick-next {
  font-size: 0;
  right: 0;
  box-shadow: 0 10px 12px rgba(20, 29, 29, 0.08), 0 0 4px rgba(20, 29, 29, 0.05);
}
.guide-stepSlider .slick-list {
  overflow: hidden;
  padding-bottom: 20px !important;
}
.guide-stepSlider .slick-arrow.slick-disabled {
  display: none !important;
}
.guide-stepSlider .slick-dots {
  position: absolute;
  top: 350px;
  left: calc(50% - 80px);
  justify-content: center;
  width: 160px;
  margin: auto;
  display: flex;
}
.guide-stepSlider .slick-dots > li {
  margin: 0;
  width: 100%;
}
.guide-stepSlider .slick-dots > li > button {
  display: block;
  cursor: text;
  font-size: 0;
  color: #004831;
  position: relative;
  margin-top: 24px;
  width: 100%;
  height: 4px;
  background: #b3c8c1;
}
.guide-stepSlider .slick-dots > li:first-of-type > button {
  border-radius: 5px 0px 0px 5px;
}
.guide-stepSlider .slick-dots > li:last-of-type > button {
  border-radius: 0 5px 5px 0;
}
.guide-stepSlider .slick-dots > li:first-of-type.slick-active > button {
  border-radius: 5px;
}
.guide-stepSlider .slick-dots > li:not(.slick-active ~ li) > button {
  background: #004831;
}

.slider-num {
  position: absolute;
  top: 320px;
  left: calc(50% - 30px);
  font-family: 'Roboto';
  text-align: center;
  color: #b3c8c1;
  font-size: 1.8rem;
  margin-top: 24px;
  font-weight: bold;
}
.slider-num .now-count {
  color: #004831;
}
.slick-slide .guide-stepBoxTxt {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-stepSlider .slick-slide > p:not(.guide-stepBoxTxt) {
  color: #004831;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
  width: 98%;
  margin: 20px auto;
}
.guide-stepSlider .slick-slide > .guide-stepBtn {
    width: 98%;
    margin: auto;
    margin-bottom: 24px;
  }

@media screen and (max-width: 304px) {
  .guide-stepSlider .slick-arrow {
    top: 217px;
  }
  .slick-slide .guide-stepBoxTxt {
    height: 120px;
  }
}
@media screen and (max-width: 340px) {
  .slick-slide .slider-img {
    width: 100%;
  }
}

/* ===　mv　===*/

.mv .mv-head > .mv-headLogo {
  width: 50%;
  max-width: 157px;
  height: auto;
}
.mv .mv-title {
  padding: 30px 5% 90px;
}
.mv-title > .mv-titleMainTxt {
  font-family: "noto-sans-black";
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  color: #004831;
  margin-bottom: 8px;
  line-height: 1.5;
}
.mv-titleImg {
  width: 65%;
  margin: 0 auto 16px;
  text-align: center;
}
.mv-titleImg > .mv-img {
  max-width: 108px;
  margin: 0 auto;
}
.mv-title > .mv-titleSubTxt {
  font-size: 2rem;
  font-weight: bold;
  position: relative;
  color: #004831;
  text-align: center;
  line-height: 1.5;
}

/* ===　guide　===*/

.guide {
  background-color: #004831;
  padding: 80px 5% 170px;
}
@media screen and (max-width: 485px) {
  .guide {
    padding: 80px 5% 125px;
  }
}
.guide-sBttom {
  padding-bottom: 64px;
}

.guide-ankerArea3Step {
  position: relative;
  background-color: #f9f8f3;
  border-radius: 16px;
  padding: 4px 20px 24px;
  margin-bottom: 40px;
  margin-top: -178px;
}
.guide-ankerArea3Step .guide-ankerTitle {
  text-align: center;
  max-width: 179px;
  margin: auto;
}
.guide-ankerArea3Step .guide-ankerLlink {
  width: 100%;
  margin-top: 12px;
}
.guide-ankerArea3Step .guide-ankerLlink > a {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: #004831;
  text-decoration: none;
  width: 100%;
  column-gap: 12px;
  position: relative;
}
.guide-ankerArea3Step .guide-ankerLlink > a > span {
  display: flex;
  align-items: center;
  margin-right: 19px;
  padding-bottom: 8px;
  border-bottom: dashed 2px #a89346;
}
.guide-ankerArea3Step .guide-ankerLlink > a span.guide-ankerLlinkNum {
  font-family: 'Roboto';
  display: inline-block;
  padding-right: 5px;
  font-size: 2.2rem;
  color: #a89346;
}
.guide-ankerArea3Step .guide-ankerLlink > a > span.guide-ankerAreaIcon {
  display: inline-block;
  border-bottom: none;
  width: 48px;
  height: auto;
  margin-right: 0;
}

.guide-ankerArea3Step .guide-ankerLlink > a::after {
  content: "";
  position: absolute;
  background: url(/kojin/cmn/imgs/ico_arrow_right_01.svg) center center / cover no-repeat;
  display: inline-block;
  width: 22px;
  height: 22px;
  top:0;
  bottom:0;
  right: 2px;
  margin:auto;
  transform: rotate(90deg);
}

/* point */
.guide-point {
  position: relative;
  background-color: #f9f8f3;
  border-radius: 16px;
  padding: 8px 20px 24px;
  margin-bottom: 44px;
  margin-top: -150px;
  text-align: center;
}
.guide-pointTitle {
  max-width: 106px;
  margin: auto;
}
.guide-pointTxt {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  color: #004831;
  margin-top: 12px;
}

/* index*/
.guide-ankerAreaIndex {
  width: 106%;
  position: relative;
  background-color: #f9f8f3;
  border-radius: 16px 0 0 16px;
  padding: 24px 24px;
  margin-top: 44px;
  margin-bottom: 56px;
}
.guide-ankerAreaIndex .guide-ankerTitle {
  font-size: 1.8rem;
  color: #004831;
  font-weight: bold;
  padding-left: 22px;
  position: relative;
}
.guide-ankerAreaIndex .guide-ankerTitle::before {
  content: "";
  position: absolute;
  background-color: #a89346;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: 0;
  top: 7px;
}
.guide-ankerAreaIndex .guide-ankerLink {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  margin-top: 12px;
}
.guide-ankerAreaIndex .guide-ankerLink > a {
  display: flex;
  font-size: 1.6rem;
  font-weight: bold;
  color: #004831;
  text-decoration: none;
  padding: 4px 16px 0 0;
  box-sizing: border-box;
}
.guide-ankerAreaIndex .guide-ankerLink > a > span {
  display: flex;
  align-items: center;
  border-bottom: dashed 2px #a89346;
  padding-bottom: 8px;
}
.guide-ankerAreaIndex .guide-ankerLink > a span.guide-ankerLlinkNum {
  font-family: 'Roboto';
  display: inline-block;
  padding-right: 14px;
  font-size: 2.2rem;
  color: #a89346;
}
.guide-ankerAreaIndex .guide-ankerLink > a::after {
  content: "";
  position: absolute;
  background: url(/kojin/cmn/imgs/ico_arrow_right_01.svg) 0px 0px / cover no-repeat;
  display: inline-block;
  transform: rotate(90deg);
  width: 22px;
  height: 22px;
  right: 2px;
  bottom: calc(50% - 16px);
}

.guide-stepBtn {
  margin-top: 20px;
  text-align: center;
}

/* SP STYLES */
@media screen and (max-width: 767.98px) {
  .guide .btn-type01.-custom {
    padding: 12px 15px;
  }
  .guide .btn-type01.-custom > .inner {
    line-height: 1.5;
  }
}

.guide-step > h2.guide-stepTitle {
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.guide-step > h2.guide-stepTitle > span.guide-stepTitleNum {
  font-family: 'Roboto';
  display: inline-block;
  background-color: #a89346;
  border-radius: 50px;
  padding: 0 12px 2px;
  margin-right: 5px;
}

.guide-step > h2.guide-stepTitle > span.guide-stepTitleTxt {
  width: calc(100% - 38px);
  text-align: center;
  display: inline-block;
  padding-right: 38px;
}

.guide-stepTxt {
  color: #fff;
  font-size: 1.6rem;
  text-align: left;
  margin-bottom: 24px;
}
.guide-stepBox {
  background-color: #f9f8f3;
  border-radius: 16px;
  padding: 30px 20px 20px;
  margin-bottom: 40px;
}

.guide-stepBox p.guide-stepBoxTxt {
  color: #004831;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}
@media screen and (max-width: 374px) {
  .guide-stepBox p.guide-stepBoxTxt {
    font-size: 5.33vw;
  }
}
.guide-stepBox .guide-stepBoxDetailTxt {
  color: #004831;
  font-size: 1.6rem;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 24px;
}
.guide-stepBtn a.btn-type01 {
  width: 100%;
}

/* ===　guide　アコーディオン　===*/
.toggle-wrap01 .btn01 {
  color: #004831;
  background-color: #eff1eb;
  border: 1px solid #d5dedb;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 28px;
  margin-top: 8px;
  position: relative;
}
.toggle-wrap01 .btn01[aria-expanded="true"] {
  border-radius: 8px 8px 0 0;
}
.toggle-wrap01 .btn01::after {
  content: "";
  position: absolute;
  border-bottom: solid 2px #004831;
  border-right: solid 2px #004831;
  display: inline-block;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  right: 14px;
  bottom: calc(50% - 4px);
}
.toggle-wrap01 .btn01[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  bottom: calc(50% - 8px);
}
.toggle-wrap01 .body01 {
  border: 1px solid #d5dedb;
  border-radius: 0 0 8px 8px;
  padding: 16px;
  background-color: #ffffff;
}
.toggle-wrap01 .body01 .guide-stepBoxDetail {
  background-color: #ffffff;
}
.toggle-wrap01 .body01 .guide-stepBoxDetailImg {
  text-align: center;
  margin: auto;
  max-width: 120px;
}
.toggle-wrap01 .body01 .guide-stepBoxDetailTxt {
  color: #004831;
  font-size: 1.6rem;
  margin-top: 16px;
}
.guide-caution {
  margin: 20px auto 40px;
  width: calc(100% - 40px);
  border: 1px solid #d5dedb;
  border-radius: 4px;
  background-color: #fdfbf7;
  margin-bottom: 40px;
}
.guide-stepBox .guide-caution {
  width: 100%;
  margin-bottom: 0;
}
.guide-cautionTitle {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #56635f;
  border-bottom: 1px solid #d5dedb;
  padding: 6px;
}
.guide-cautionTxt {
  padding: 8px 16px 8px;
  width: 100%;
  box-sizing: border-box;
  color: #56635f;
  font-size: 1.2rem;
}

.guide-accordion02 .inner {
  display: flex;
  flex-direction: column;
}
.guide-accordion02 .inner:has(.btn01[aria-expanded="true"]) {
  flex-direction: column-reverse;
}
.guide-accordion02.toggle-wrap01 .btn01 {
  color: #004831;
  background-color: #fdfbf7;
  border: none;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  padding: 12px 8px 8px;
  margin-top: 0;
  position: relative;
}
.guide-accordion02.toggle-wrap01 .btn01[aria-expanded="true"] {
  border-radius: 8px 8px 0 0;
}

.guide-accordion02.toggle-wrap01 .btn01::after {
  content: "";
  position: absolute;
  border-bottom: solid 2px #004831;
  border-right: solid 2px #004831;
  display: inline-block;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  right: 10px;
  bottom: 50%;
}
.guide-accordion02.toggle-wrap01 .btn01::after {
  content: "";
  position: absolute;
  border-bottom: solid 2px #004831;
  border-right: solid 2px #004831;
  display: inline-block;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  right: 14px;
  bottom: calc(50% - 4px);
}
.guide-accordion02.toggle-wrap01 .btn01[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  bottom: calc(50% - 8px);
}
.guide-accordion02.toggle-wrap01 .body01 {
  border: none;
  border-radius: none;
  padding: 0;
}

.guide-notice {
  text-indent: -1.2rem;
  margin-left: 1.2rem;
}

/* ===　guide-more　===*/
.guide-more {
  min-height: 474px;
  padding: 68px 0 5px;
  position: relative;
  margin-top: 64px;
}
.guide-more::before {
  content: "";
  position: absolute;
  background-color: #f4ebda;
  width: calc(100% + 80px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* SP STYLES */
@media screen and (max-width: 430.98px) {
  .guide-more::before {
    width: 126.4vw;
  }
}

.guide-more.-active {
  animation: aboutBubbleBounce 0.8s ease forwards;
}
@keyframes aboutBubbleBounce {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(6px) rotate(-6deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.1) translateY(0) rotate(2deg);
  }
  80% {
    transform: scale(0.95) translateY(0) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

.guide-moreTitle {
  text-align: center;
  color: #004831;
  margin-bottom: 24px;
}
.guide-moreOnlyItem .guide-moreTitle {
  margin-bottom: 75px;
}

.guide-moreTitle > p.guide-moreTitleSubTxt,
.guide-moreTitle > p.guide-moreTitleMainTxt {
  position: relative;
  width: fit-content;
  margin: auto;
}
.guide-moreTitle > p.guide-moreTitleSubTxt {
  font-size: 1.6rem;
}
.guide-moreTitle > p.guide-moreTitleSubTxt::before {
  content: "";
  position: absolute;
  background-color: #004831;
  width: 2px;
  height: 16px;
  transform: rotate(-15deg);
  top: 5px;
  left: -10px;
}
.guide-moreTitle > p.guide-moreTitleSubTxt::after {
  content: "";
  position: absolute;
  background-color: #004831;
  width: 2px;
  height: 16px;
  transform: rotate(15deg);
  top: 5px;
  right: -10px;
}
.guide-moreTitle > p.guide-moreTitleMainTxt {
  font-family: "noto-sans-black";
  font-size: 2.6rem;
  font-weight: bold;
  padding-left: 52px;
}
.guide-moreTitle > p.guide-moreTitleMainTxt::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  top: 3px;
  left: 0;
  background: url(/kojin/olive-account/guide/common/imgs/oliveguide_ico_guide01.png)
    no-repeat;
  background-size: contain;
}

a.guide-moreBtn {
  display: block;
  background-color: #fdfbf7;
  border-radius: 8px;
  padding: 12px 24px 12px 104px;
  box-shadow: #d1c6af 4px 4px;
  margin-bottom: 16px;
  text-decoration: none;
  position: relative;
}
.guide-moreBtn::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  top: 12px;
  left: 24px;
}
.guide-moreBtn:first-of-type:before {
  background: url(/kojin/olive-account/guide/debit-setting/imgs/index_ico_guide05.png)
    no-repeat;
  background-size: contain;
}
.guide-moreBtn:last-of-type:before {
  background: url(/kojin/olive-account/guide/debit-setting/imgs/index_ico_guide06.png)
    no-repeat;
  background-size: contain;
}

.guide-moreBtn > span.guide-moreBtnLabel {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: #a89346;
  border-radius: 32px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.guide-moreBtn > span.guide-moreBtnTxt {
  font-size: 1.6rem;
  font-weight: bold;
  color: #004831;
}

/*-------------------------------------
guide-caution toggle
-------------------------------------*/
.guide-caution.-rounded {
  border-radius: 8px;
}
.guide-caution .toggle-area01 > .toggle-content.-close::after {
  display: none;
}
.guide-caution .toggle-area01 > .toggle-content.-close {
  height: calc(18px * 4);
}
.guide-caution .toggle-area01 .btn01 {
  width: 100%;
  color: #004831;
  background-color: #fdfbf7;
  border: none;
  border-radius: 0 0 8px 8px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  padding: 12px 8px 8px;
  margin-top: 0;
  position: relative;
}
.guide-caution .toggle-area01 .btn01 > .inner {
  display: inline;
  padding-left: 0 !important;
}
.guide-caution .toggle-area01 .btn01 > .inner::after {
  right: 0;
  left: 42px;
  position: relative;
}
.guide-caution .toggle-area01 > .toggle-content + .btn {
  margin: 0 -16px -8px;
}

/* ===　feature ===*/
.feature {
  width: 100%;
  background-color: #f4ebda;
  padding: 40px 5% 32px;
}
.feature-title {
  font-family: "noto-sans-black";
  text-align: center;
  color: #004831;
  margin-bottom: 24px;
}

.feature-title > p.feature-titleSubTxt,
.feature-title > p.feature-titleMainTxt {
  position: relative;
  width: fit-content;
  margin: auto;
}

.feature-title > p.feature-titleSubTxt {
  font-size: 1.6rem;
}

.feature-title > p.feature-titleSubTxt::before {
  content: "";
  position: absolute;
  background-color: #004831;
  width: 2px;
  height: 16px;
  transform: rotate(-15deg);
  top: 5px;
  left: -10px;
}

.feature-title > p.feature-titleSubTxt::after {
  content: "";
  position: absolute;
  background-color: #004831;
  width: 2px;
  height: 16px;
  transform: rotate(15deg);
  top: 5px;
  right: -10px;
}

.feature-title > p.feature-titleMainTxt {
  font-size: 2.6rem;
  font-weight: bold;
  padding-left: 52px;
}

.feature-title > p.feature-titleMainTxt::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  top: -2px;
  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.feature-btnLink {
  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.feature-btnLink: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;
}