@charset "shift_jis";
/* Updated 2025/09/26.T */
/*-------------------------------
layout
-------------------------------*/
body {
  overflow: hidden;
  min-width: auto;
}
#header-wrap {
  z-index: 4;
}
/* SP STYLES */
@media screen and (max-width: 767px) {
  #main-area {
    background-color: #ffffff;
  }
}
.cpEndTxt {
  z-index: 4;
}
#containment-area {
  margin-bottom: 0;
}
#footer-area {
  position: relative;
  z-index: 2;
}
#footer-content {
  margin-top: 0;
}
.footer-logo {
padding-bottom: 109px;
}
.cpEndShow {
  display: none;
}
body.cpnloadEnd .footer-logo {
  padding-bottom: 0;
}
body.cpnloadEnd .cpEndShow {
  display: block !important;
}
.layout-container01 {
  position: relative;
  z-index: 2;
  overflow: visible;
  margin: 0 auto;
  max-width: 500px;
  background-color: #ffffff;
  box-shadow: 0 4px 64px rgba(0, 57, 39, 0.3);
}
.layout-bg01 {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: flex;
  height: 100vh;
  background: url("/kojin/olive/student/imgs/index_bg_04.png") top center no-repeat;
  background-size: cover;
}
@media screen and (max-width: 500px) {
  .layout-bg01 {
    display: none;
  }
}
/*-------------------------------
common
-------------------------------*/

.text02{
  font-size: 1.6rem;
  margin-top: 15px;
}

.cmn-btn01 {
  display: block;
  align-items: center;
  padding: 12px 0px;
  margin: 0 auto;
  max-width: 335px;
  min-width: 300px;
  height: 50px;
  background: #FFF200;
  border: 1px solid #141D1D;
  border-radius: 40px;
  color: #141D1D;
  font-weight: bold;
  text-decoration: none;
  position: relative;
}
.cmn-btn01::after {
  content: '';
  display: block;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: -1px;
  z-index: 2;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: url("/kojin/olive/student/imgs/index_ico_01.svg") no-repeat center center/20px auto,#ffffff;
  border: 1px solid #141D1D;
}
.cmn-btn01 span{
  width: calc(100% - 20px);
  display: block;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .cmn-btn01{
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
.cmn-btn01.app_active{
  display: block;
}

.btn-type01>.inner{
  font-size: 1.6rem;
  color: #141D1D;
  padding-left: 1.25em !important;
}
.btn-type01>.inner:after{
  content: none;
}

@media screen and (max-width: 499px) {
  .btn-type01>.inner{
    font-size: calc(100vw * 16 / 375);
  }
}

.wrap01 {
  text-align: center;
  padding: 15px 0px;
  background: linear-gradient(90deg, #8CBEFF 0%, #9E95FF 74.04%, #C578FF 100%);
}
@media screen and (max-width: 499px) {
  .wrap01 {
    /* padding: 0 5.06667vw 8.8vw 5.06667vw; */
  }
}
.wrap01 .txt01 {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 10px;
}
@media screen and (max-width: 499px) {
  .wrap01 .txt01 {
    font-size: calc(100vw * 14 / 375);
  }
}
.wrap01 .txt01:before {
  display: block;
  margin: 0 8px 0 0;
  width: 15px;
  height: 18px;
  background: url("/kojin/olive/student/imgs/index_ico_03.svg") bottom center no-repeat;
  background-size: 100% auto;
  content: "";
}
@media screen and (max-width: 499px) {
  .wrap01 .txt01:before {
    margin: 0 1.6vw 0 0;
    width: 3.46667vw;
    height: 5.86667vw;
  }
}
.wrap01 .txt01:after {
  display: block;
  margin: 0 0 0 8px;
  width: 15px;
  height: 18px;
  background: url("/kojin/olive/student/imgs/index_ico_04.svg") bottom center no-repeat;
  background-size: 100% auto;
  content: "";
}
@media screen and (max-width: 499px) {
  .wrap01 .txt01:after {
    margin: 0 0 0 1.6vw;
    width: 3.46667vw;
    height: 5.86667vw;
  }
}


/*-------------------------------
kv-area
-------------------------------*/
.kv-area01 {
  position: relative;
}

/*-------------------------------
nav-area
-------------------------------*/

.nav-area01 {
  padding:  0 ;
  background: url("/kojin/olive/student/imgs/index_bg_01.png") 0 0 repeat;
  background-size: 11px auto;
}

.nav-area01 .notes{
  margin: 10px 15px;
  padding: 10px 17px;
  border: 1px solid #000;
  background-color: #fff;
  font-size: 1.2rem;
}

.list-nav01{
  padding: 37px 0;
  display: flex;
  justify-content: center;
  align-items:stretch;
}
.list-nav01 li{
  position: relative;
  text-align: center;
  width: 50%;
}
.list-nav01 li:first-child:after{
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0px;
  top:0;
  background-color: #000;
}

.list-nav01 li a{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 20px;
}
.list-nav01 li a:hover{
  text-decoration: underline;
}
.list-nav01 li a::after{
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: url("/kojin/olive/student/imgs/index_ico_01.svg") no-repeat center center / 13px auto;
  transform: translateX(-50%) rotate(90deg);
  left: 50%;
  bottom: 0px;
}

/*-------------------------------
point-area
-------------------------------*/
.point-area01 .frame01{
  padding: 40px 15px 45px;
  background: linear-gradient(#e5fcff 30%, #ffe8f4 70%);
}
.point-area01 .tab-block01:not(:first-child){
  margin-top: 20px;
}

.point-area01 .panel{
  border: 1px solid #000;
  background-color: #fff;
  text-align: center;
  margin-top: 20px;
}

.point-area01 .panel.-pink{
  background-color: #F2C1EB;
}

.point-area01 .panel.-blue{
  background-color: #CFF8FF;
}

.point-area01 .panel .inner{
  padding: 0px 10px 45px;
}

.point-area01 .panel .text-point01{
  position: relative;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #000;
  padding: 15px 20px;
  margin: 60px auto 25px;
  font-size: 24px;
  font-weight: bold;
}
.point-area01 .panel .inner .item01:nth-child(2) .text-point01{
  padding: 15px 43px;
}
.point-area01 .panel .inner .item01:nth-child(3) .text-point01{
  padding: 15px 40px;
}
.point-area01 .panel .inner .item01:nth-child(4) .text-point01{
  padding: 2px 20px;
}
.point-area01 .panel .inner .item01:nth-child(5) .text-point01{
  padding: 15px 30px;
}

@media screen and (max-width: 499px) {
  .point-area01 .panel .text-point01{
    font-size: calc(100vw * 24 / 375);
  }
}

.point-area01 .panel .text-point01::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 18px 17.5px 0 17.5px;
  border-color: #000000 transparent transparent;
  transform: translate(-50%, 100%);
}

.point-area01 .panel .text-point01::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 16.6px 16.1px 0 16.1px;
  border-color: #ffffff transparent transparent;
  transform: translate(-50%, 100%);
}

.point-area01 .panel .text-point01.-pink{
  color: #E41D82;
  box-shadow: 3px 3px 0px 0px #FF6CB7;
}

.point-area01 .panel .text-point01.-blue{
  color: #1A7683;
  box-shadow: 3px 3px 0px 0px #1A7683;
}

.point-area01 .panel .text-point01 .-normal{
  font-size: 1.8rem;
  color: #000;
  display: block;
}

.point-area01 .panel .item01 .item-inner01{
  background-color: #fff;
  padding: 28px 0;
  margin-top: 10px;
}
.point-area01 .panel .item01 .item-inner02{
  background-color: #fff;
  padding: 35px 0;
  margin-top: 35px;
}
.point-area01 .panel .item01 .item-inner01:first-of-type{
  margin-top: 0;
}
.point-area01 .panel .item01 .item-inner01 img:nth-child(2){
  margin-top: 30px;
}
.point-area01 .panel .item01 .item-inner01 img:nth-child(3){
  margin-top: 15px;
}

.point-area01 .panel .item01 .text-point02{
  color: #8C8C8C;
  font-size: 1.2rem;
  margin-top: 12px;
  text-align: left;
  text-indent: -1rem;
  padding: 0 18px 0 calc(25px + 1rem);
}

@media screen and (min-width: 768px) and (hover:hover) {
  .tab-block01>.list>.item>.switch:hover{
    opacity: 0.75;
  }
  .tab-block01>.list>.item>.switch[aria-selected=true]:hover>.inner {
    color: #fff;
  }
}

.point-area01 .cmn-block01.card-normal01{
  border: 1px solid #000;
  border-radius: 0px;
}

.point-area01 .cmn-block01.card-normal01>.inner>.header>.title{
  font-size: 1.6rem;
  text-align: center;
}

.point-area01 .cmn-block01.card-normal01>.inner>.header{
  padding: 10px 28px;
}

.point-area01 .cmn-block01[class*=card-normal]>.inner>.header>.title[class*=glyph-]>.inner{
  padding-left: 0;
  color: #000;
}

.point-area01 .cmn-block01[class*=card-normal]>.inner>.header>.title[class*=glyph-]>.inner::before{
  content:none;
}

.point-area01 .cmn-block01.toggle-block01>[role=tablist]>[role=tab]::after{
  width: 22px;
  height: 22px;
  background: url(/kojin/olive/student/imgs/index_ico_02.svg) center center / contain no-repeat;
  top: calc(50% - 9px);
  right: 45px;
}
.point-area01 .cmn-block01.card-normal01>.inner>.body:not(:first-child)::before{
  width: calc(100%);
  left: 0;
  background: #3F3C3C;
}

.point-area01 .cmn-block01 .body{
  padding: 30px 15px 10px;
  line-height: 2.4rem;
  font-size: 1.4rem;
}

.point-area01 .cmn-block01 .list-circle01:not(:first-child){
  margin-top: 0;
}

.point-area01 .cmn-block01 .title-attention01{
  position: relative;
  font-size: 1.6rem;
  font-weight: bold;
  padding-left: 20px;
  margin-bottom: 10px;
}

.point-area01 .cmn-block01 .title-attention01:before{
  content: '';
  display: block;
  position: absolute;
  top: .5em;
  left: 0rem;
  width: .65em;
  height: .65em;
  background-color: #FF6CB7;
    border-radius: 50%;
}

.point-area01 .cmn-block01 .list-circle01{
  margin-bottom: 20px;
}

.point-area01 .cmn-block01 .list-circle01>.item::before{
  content: "";
  display: block;
  position: absolute;
  transform: translateX(-50%);
  top: .7em;
  left: .7rem;
  width: .2em;
  height: .2em;
  background: #000;
  border-radius: 50%;
}

.point-area01 .cmn-block01 .list-circle01>.item .list-item01 li{
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}
.point-area01 .cmn-block01 .list-circle01>.item .list-item02 li{
  padding-left: 1.5rem;
}

.point-area01 .cmn-block01 a{
  color: #8C8C8C;
}

.point-area01 .cmn-block01 a[target="_blank"]:not(:has(img))::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background: url(/kojin/olive/student/imgs/index_ico_06.svg) no-repeat center / contain;
}


/*-------------------------------
process-area
-------------------------------*/
.process-area01 .frame01{
  padding: 40px 15px 55px;
  background: url("/kojin/olive/student/imgs/index_bg_02.png") 0 0 repeat;
}

.process-area01 .item02{
  background-color: #fff;
  padding: 15px 10px;
  margin-top: 10px;
}

.process-area01 .item02 p{
  font-size: 1.8rem;
  margin-bottom: 20px;
}
.process-area01 .item02 p.-left{
  text-align: left;
  margin-bottom: 0;
}

.process-area01 .item02 p.text03,
.process-area01 .item02 p.text04{
  font-weight: bold;
}

.process-area01 .item02 p.text03{
  line-height: 100%;
}

.process-area01 .item02 p.text03 .text-sub01{
  font-size: 1.3rem;
}

.process-area01 .item02 .item-inner02{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.process-area01 .item02>*:nth-child(4) {
  padding: 20px 0;
}

@media screen and (max-width: 499px) {
  .process-area01 .item02 p{
    font-size: calc(100vw * 18 / 375);
  }
}

/*-------------------------------
faq-area
-------------------------------*/
.faq-area01 {
  padding: 15px 15px 80px;
  background: url(/kojin/olive/student/imgs/index_bg_03.png) 0 0 repeat;
  background-color: #fff;
}
.faq-area01 .ttl01 {
  text-align: center;
  margin-bottom: 25px;
}
.faq-area01 .frame01 {
  padding: 12px 0 24px;
  background-color: #ffffff;
  border: 1px solid #000;
}
.faq-area01 .card-normal03 {
  position: relative;
  border-radius: 0px;
  box-shadow: none;
  margin-top: 0;
}

.faq-area01 .card-normal03:after {
  position: absolute;
  bottom: 0px;
  left: 20px;
  display: block;
  width: calc(100% - 40px);
  height: 1px;
  background-color: #d5dedb;
  content: "";
}

.faq-area01 .card-normal03 .text-mark02 > .mark {
  font-size: 2.6rem;
  font-weight: normal;
  font-family: "roboto";
  width: 40px;
  height: 40px;
  text-align: center;
  border:1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-area01 .card-normal03 .text-mark02 > .mark.-blue01 {
  background-color: #78EDFF;
}
.faq-area01 .card-normal03 .text-mark02 > .mark.-pink01 {
  background-color: #FF6CB7;
  color: #fff;
}

.faq-area01 .card-normal03>.inner>.header>.title>.inner{
  font-size: 2rem;
  line-height: 160%;
  color: #000;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 499px) {
  .faq-area01 .card-normal03>.inner>.header>.title>.inner{
    font-size: calc(100vw * 20 / 375);
  }
}

.faq-area01 .card-normal03 > .inner > .header {
  padding: 20px 16px 16px;
}

.faq-area01 .card-normal03:first-child > .inner > .header {
  padding: 14px 16px 16px;
}

.faq-area01 .toggle-block01.card-normal03>.inner>.header[role=tab]>.title{
  padding-right: 40px;
}

.faq-area01 .card-normal03 > .inner > .body {
  padding: 15px 18px 15px;
  font-size: 1.4rem;
}
.faq-area01 .toggle-block01.card-normal03 > .inner > .header[role=tab]::after {
  right: 22px;
  width: 22px;
  height: 22px;
  top: calc(50% - 11px);
}
.faq-area01 .list01 > .item {
  padding-left: calc(2em + 7px);
}
.faq-area01 .list01 > .item > .mark {
  width: 2em;
}

.faq-area01 .toggle-block01>[role=tablist]>[role=tab]::after{
  background: url(/kojin/olive/student/imgs/index_ico_02.svg) center center / contain no-repeat;
}


/*-------------------------------
menu-area
-------------------------------*/
.menu-area01 {
  position: fixed;
  top: 310px;
  left: calc(50% - 756px);
  z-index: 2;
  width: 386px;
  border: 1px solid #000;
}
.menu-area01 .ttl01 {
  padding: 12px 0px 8px 0;
  background: #FF6CB7;
  text-align: center;
  border-bottom: 1px solid #000;
  font-size: 2.8rem;
  letter-spacing: 1rem;
  color: #fff;
  font-weight: 900;
  padding-left: 1.3rem;
}
.menu-area01 .list01 {
  padding: 45px 0 55px 0;
  background-color: #ffffff;
}
.menu-area01 .list01 li:not(:first-child) {
  margin-top: 5px;
}
.menu-area01 a {
  position: relative;
  display: block;
  padding: 7px 0 8px 90px;
  color: #000;
  text-decoration: none;
  line-height: 1.2;
}
.menu-area01 a:before {
  position: absolute;
  top: calc(50% - 9px);
  left: 60px;
  display: block;
  width: 16px;
  height: 16px;
  background: url("/kojin/olive/student/imgs/index_ico_05.png") 0 0 no-repeat;
  background-size: 100% auto;
  content: "";
  opacity: 0;
}
.menu-area01 a.is-current {
  font-weight: bold;
}
.menu-area01 a.is-current:before {
  opacity: 1;
}
@media screen and (max-width: 1640px) {
  .menu-area01 {
    left: 20px;
  }
}
@media screen and (max-width: 1360px) {
  .menu-area01 {
    width: 300px;
  }
  .menu-area01 .list01 {
    font-size: 1.5rem;
  }
  .menu-area01 a {
    padding-left: 34px;
  }
  .menu-area01 a:before {
    left: 14px;
  }
}
@media screen and (max-width: 1240px) {
  .menu-area01 {
    width: 230px;
  }
}
@media screen and (max-width: 1024px) {
  .menu-area01 {
    display: none !important;
  }
}
@media screen and (max-height: 1006px) {
  .menu-area01 {
    top: calc(50% - 208px);
  }
}
@media screen and (max-height: 540px) {
  .menu-area01 {
    top: calc(50% - 165px);
  }
  .menu-area01 .ttl01 {
    padding: 22px 5px 22px 0;
  }
  .menu-area01 .list01 {
    padding: 18px 0;
  }
  .menu-area01 .list01 li:not(:first-child) {
    margin-top: 0;
  }
}
@media screen and (max-height: 420px) {
  .menu-area01 {
    display: none !important;
  }
}
/*-------------------------------
fixed-area
-------------------------------*/
.fixed-area01 {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: none;
  width: 100%;
  background: linear-gradient(90deg, rgba(140, 190, 255,.8) 0%, rgba(158, 149, 255,.8) 74.04%, rgba(197, 120, 255,.8) 100%);
}

.fixed-area01 .wrap01{
  background: none;
  max-width: 500px;
  margin: 0 auto;
}

/*-------------------------------
modal
-------------------------------*/
/* SP STYLES */
@media screen and (max-width: 767px) {
  .modal-block01 .card-modal01 > .inner > .img {
    margin-right: auto;
    margin-left: auto;
  }
}