@charset "UTF-8";
@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
#wrapper {
  background: #ffffff;
}

.okap {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.okapKeyvisual {
  background: #efefef url(/images/rwd/oakapp/bg-keyvisual.svg) no-repeat center top/cover;
  width: 100%;
  color: #ffffff;
  position: relative;
  font-weight: 500;
  z-index: 1;
  overflow: hidden;
}
@media screen and (max-width: 820px) {
  .okapKeyvisual {
    background: #efefef url(/images/rwd/oakapp/bg-keyvisual_sp.svg) no-repeat center top/cover;
    z-index: 2;
    overflow-y: visible;
  }
}
.okapKeyvisual::before {
  content: "";
  display: block;
  width: min(1440px, 100vw);
  height: min(280px, 19.4444444444vw);
  background: url(/images/rwd/oakapp/bg-recommend.svg) no-repeat center bottom/cover;
  position: absolute;
  bottom: min(-110px, -7.6388888889vw);
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual::before {
    background: url(/images/rwd/oakapp/bg-recommend_sp.svg) no-repeat center bottom/cover;
    width: 100%;
    height: 19.4666666667vw;
    bottom: 0;
    left: 0;
    transform: none;
  }
}
.okapKeyvisual__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: min(648px, 45vw);
  width: min(1080px, 75vw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__inner {
    height: auto;
    width: 100%;
    flex-direction: column;
  }
}
.okapKeyvisual__inner > div {
  width: min(560px, 38.8888888889vw);
  margin-top: min(-89px, -6.1805555556vw);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__inner > div {
    padding: 8vw 4vw;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0;
  }
}
.okapKeyvisual__image {
  width: min(662px, 45.9722222222vw);
  height: auto;
  position: absolute;
  top: 50%;
  right: 0;
  padding: 0 4vw;
  box-sizing: border-box;
}
@media screen and (min-width: 821px) {
  .okapKeyvisual__image {
    transform: translate(20%, calc(-50% + min(40px, 2.7777777778vw))) !important;
  }
  .okapKeyvisual__image.is-animated {
    transform: translate(20%, -50%) !important;
  }
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__image {
    position: static;
    width: 100%;
    right: auto;
    top: auto;
    margin-top: 4vw;
  }
}
.okapKeyvisual__copy {
  font-size: min(56px, 3.8888888889vw);
  letter-spacing: 0em;
  line-height: calc(64 / 56);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__copy {
    font-size: 8.5333333333vw;
    letter-spacing: 0em;
    line-height: calc(40 / 32);
  }
}
.okapKeyvisual__title {
  font-size: min(40px, 2.7777777778vw);
  letter-spacing: 0em;
  line-height: calc(64 / 40);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__title {
    font-size: 6.4vw;
    letter-spacing: 0em;
    line-height: calc(40 / 24);
  }
}
.okapKeyvisual__download {
  margin-top: min(16px, 1.1111111111vw);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__download {
    margin-top: 4.2666666667vw;
  }
}
.okapKeyvisual__download p {
  font-size: min(16px, 1.1111111111vw);
  letter-spacing: 0em;
  line-height: 1;
  display: inline-block;
  vertical-align: text-bottom;
  position: relative;
}
.okapKeyvisual__download p span {
  font-size: min(22px, 1.5277777778vw);
  letter-spacing: 0em;
  line-height: 1;
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__download p {
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: 1;
  }
  .okapKeyvisual__download p span {
    font-size: 4.2666666667vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapKeyvisual__download p::after {
  content: "";
  display: block;
  position: absolute;
  width: min(12px, 0.8333333333vw);
  height: min(13px, 0.9027777778vw);
  background: url(/images/rwd/oakapp/img-keyvisual_here.svg) no-repeat center center/contain;
  top: 0;
  right: 0;
  transform: translate(100%, -20%);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__download p::after {
    width: 4.2666666667vw;
    height: 3.7333333333vw;
    transform: translate(75%, -50%);
  }
}
.okapKeyvisual__download ul {
  margin-top: min(8px, 0.5555555556vw);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__download ul {
    margin-top: 2.6666666667vw;
  }
}
.okapKeyvisual__download ul img {
  width: auto;
}
.okapKeyvisual__download ul img.ext-apple {
  height: min(60px, 4.1666666667vw);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__download ul img.ext-apple {
    height: 13.3333333333vw;
  }
}
.okapKeyvisual__download ul img.ext-google {
  height: min(60px, 4.1666666667vw);
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__download ul img.ext-google {
    height: 13.3333333333vw;
  }
}
@media screen and (min-width: 821px) {
  .okapKeyvisual__download ul li + li {
    margin-left: min(10px, 0.6944444444vw);
  }
}
@media screen and (max-width: 820px) {
  .okapKeyvisual__download ul li + li {
    margin-left: 2.6666666667vw;
  }
}
.okapRecommend {
  position: relative;
  z-index: 1;
  margin-top: min(-40px, -2.7777777778vw);
}
@media screen and (max-width: 820px) {
  .okapRecommend {
    margin-top: 10.6666666667vw;
  }
}
.okapRecommend__inner {
  width: min(920px, 63.8888888889vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 820px) {
  .okapRecommend__inner {
    width: 100%;
  }
}
.okapRecommend__title {
  font-size: min(40px, 2.7777777778vw);
  letter-spacing: 0em;
  line-height: calc(56 / 40);
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 820px) {
  .okapRecommend__title {
    font-size: 5.3333333333vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapRecommend__list {
  margin-top: min(60px, 4.1666666667vw);
  font-size: min(24px, 1.6666666667vw);
  letter-spacing: 0em;
  line-height: 1;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 820px) {
  .okapRecommend__list {
    margin-top: 8vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: 1;
    width: 100%;
    padding: 0 4vw;
    box-sizing: border-box;
  }
}
.okapRecommend__list li {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 820px) {
  .okapRecommend__list li + li {
    margin-top: 4vw;
  }
}
.okapRecommend__list li:nth-child(1) {
  color: #E49A46;
}
@media screen and (min-width: 821px) {
  .okapRecommend__list li:nth-child(1) {
    transform: translate(-30%, min(40px, 2.7777777778vw));
  }
  .okapRecommend__list li:nth-child(1).is-animated {
    transform: translate(-30%, 0) !important;
  }
}
.okapRecommend__list li:nth-child(2) {
  color: #50A0AA;
}
@media screen and (min-width: 821px) {
  .okapRecommend__list li:nth-child(2) {
    transform: translate(80%, calc(20% + min(40px, 2.7777777778vw)));
  }
  .okapRecommend__list li:nth-child(2).is-animated {
    transform: translate(80%, 20%) !important;
  }
}
.okapRecommend__list li:nth-child(3) {
  color: #284894;
}
@media screen and (min-width: 821px) {
  .okapRecommend__list li:nth-child(3) {
    transform: translate(-60%, min(40px, 2.7777777778vw));
  }
  .okapRecommend__list li:nth-child(3).is-animated {
    transform: translate(-60%, 0) !important;
  }
}
.okapRecommend__list li:nth-child(4) {
  color: #D4748E;
}
@media screen and (min-width: 821px) {
  .okapRecommend__list li:nth-child(4) {
    transform: translate(50%, min(40px, 2.7777777778vw));
  }
  .okapRecommend__list li:nth-child(4).is-animated {
    transform: translate(50%, 0) !important;
  }
}
.okapRecommend__list li::after {
  content: "";
  display: block;
  width: min(327.04px, 22.7111111111vw);
  height: min(53.55px, 3.71875vw);
  margin-top: min(-12px, -0.8333333333vw);
  background: url(/images/rwd/oakapp/bg-recommend_baloon.svg) no-repeat right bottom/contain;
  transform: scale(-1, 1);
}
@media screen and (max-width: 820px) {
  .okapRecommend__list li::after {
    width: 43.6053333333vw;
    height: 7.14vw;
    margin-top: auto;
    transform: scale(-1, 1) rotate(-5deg);
  }
}
.okapRecommend__list li:nth-child(1), .okapRecommend__list li:nth-child(3) {
  padding-right: min(56px, 3.8888888889vw);
}
@media screen and (max-width: 820px) {
  .okapRecommend__list li:nth-child(1), .okapRecommend__list li:nth-child(3) {
    padding-right: 0;
    align-self: flex-start;
  }
}
.okapRecommend__list li:nth-child(1)::after, .okapRecommend__list li:nth-child(3)::after {
  align-self: flex-end;
  margin-right: min(-56px, -3.8888888889vw);
}
@media screen and (max-width: 820px) {
  .okapRecommend__list li:nth-child(1)::after, .okapRecommend__list li:nth-child(3)::after {
    align-self: center;
    margin-right: 0;
  }
}
@media screen and (max-width: 820px) {
  .okapRecommend__list li:nth-child(3)::after {
    margin-right: -7.4666666667vw;
  }
}
.okapRecommend__list li:nth-child(2), .okapRecommend__list li:nth-child(4) {
  padding-left: min(56px, 3.8888888889vw);
}
@media screen and (max-width: 820px) {
  .okapRecommend__list li:nth-child(2), .okapRecommend__list li:nth-child(4) {
    padding-left: 0;
    align-self: flex-end;
  }
}
.okapRecommend__list li:nth-child(2)::after, .okapRecommend__list li:nth-child(4)::after {
  transform: none;
  margin-left: min(-56px, -3.8888888889vw);
}
@media screen and (max-width: 820px) {
  .okapRecommend__list li:nth-child(2)::after, .okapRecommend__list li:nth-child(4)::after {
    margin-left: -7.4666666667vw;
  }
}
.okapRecommend__image {
  margin-top: min(21px, 1.4583333333vw);
  width: min(824.72px, 57.2722222222vw);
  height: auto;
}
@media screen and (max-width: 820px) {
  .okapRecommend__image {
    margin-top: 5.3333333333vw;
    width: 100%;
    padding: 0 4vw;
    box-sizing: border-box;
  }
}
.okapIntro {
  padding: min(40px, 2.7777777778vw) 0;
  background: url(/images/rwd/oakapp/bg-intro.png) repeat left top/34px 34px;
}
@media screen and (max-width: 820px) {
  .okapIntro {
    padding: 4vw;
  }
}
.okapIntro__inner {
  margin: 0 auto;
  background: #ffffff;
  width: min(1080px, 75vw);
  text-align: center;
  padding: min(30px, 2.0833333333vw);
  box-sizing: border-box;
  border-radius: min(16px, 1.1111111111vw);
}
@media screen and (max-width: 820px) {
  .okapIntro__inner {
    width: 100%;
    padding: 4vw;
    text-align: left;
    border-radius: 3.7333333333vw;
  }
}
.okapIntro__text {
  font-size: min(24px, 1.6666666667vw);
  letter-spacing: 0em;
  line-height: calc(40 / 24);
  font-weight: 500;
}
@media screen and (max-width: 820px) {
  .okapIntro__text {
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(24 / 14);
  }
}
.okapIntro__text strong {
  color: #D4748E;
}
.okapStore {
  font-weight: 700;
  background: #ffffff;
  display: flex;
  align-items: center;
  border: 2px solid #efefef;
  border-radius: min(16px, 1.1111111111vw);
  padding: min(20px, 1.3888888889vw) min(30px, 2.0833333333vw);
  width: min(920px, 63.8888888889vw);
  box-sizing: border-box;
  margin: 0 auto;
}
@media screen and (max-width: 820px) {
  .okapStore {
    border-radius: 4.2666666667vw;
    padding: 4vw;
    width: calc(100% - 8vw);
    display: grid;
    grid-template-columns: 19.6693333333vw 1fr;
  }
}
.okapStore__logo {
  width: min(43.76px, 3.0388888889vw);
  height: auto;
}
@media screen and (max-width: 820px) {
  .okapStore__logo {
    width: 11.6693333333vw;
    grid-column: 1;
    grid-row: 1;
    padding-left: 8vw;
  }
}
.okapStore__text {
  margin-left: min(20px, 1.3888888889vw);
  font-size: min(24px, 1.6666666667vw);
  letter-spacing: 0em;
  line-height: calc(24 / 24);
  color: #E35D54;
}
@media screen and (max-width: 820px) {
  .okapStore__text {
    grid-column: 2;
    grid-row: 1;
    font-size: 5.3333333333vw;
    letter-spacing: 0em;
    line-height: calc(22 / 20);
    margin-left: 4vw;
    margin-right: auto;
  }
}
.okapStore__text strong {
  margin-top: min(4px, 0.2777777778vw);
  display: block;
  font-size: min(18px, 1.25vw);
  letter-spacing: 0em;
  line-height: calc(24 / 18);
}
@media screen and (max-width: 820px) {
  .okapStore__text strong {
    margin-top: 2.1333333333vw;
    font-size: 3.2vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapStore__download {
  margin-left: auto;
}
@media screen and (max-width: 820px) {
  .okapStore__download {
    grid-column: 1/span 2;
    grid-row: 2;
    margin-left: 0;
    margin-top: 2.6666666667vw;
  }
}
.okapStore__download p {
  display: inline-block;
  font-size: min(15px, 1.0416666667vw);
  letter-spacing: 0em;
  line-height: calc(24 / 15);
  vertical-align: text-bottom;
  position: relative;
  opacity: 0.5;
  color: #222;
}
@media screen and (max-width: 820px) {
  .okapStore__download p {
    text-align: center;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: 1;
    margin-left: 4vw;
  }
}
.okapStore__download p span {
  font-size: min(15px, 1.0416666667vw);
  letter-spacing: 0em;
  line-height: calc(24 / 15);
}
@media screen and (max-width: 820px) {
  .okapStore__download p span {
    font-size: 4.2666666667vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapStore__download p::after {
  content: "";
  display: block;
  position: absolute;
  width: min(12px, 0.8333333333vw);
  height: min(13px, 0.9027777778vw);
  background: url(/images/rwd/oakapp/img-download_here.svg) no-repeat center center/contain;
  top: 0;
  right: 0;
  transform: translate(100%, -20%);
}
@media screen and (max-width: 820px) {
  .okapStore__download p::after {
    width: 3.2vw;
    height: 3.4666666667vw;
    transform: translate(100%, -50%);
  }
}
.okapStore__download ul {
  margin-top: min(2px, 0.1388888889vw);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (max-width: 820px) {
  .okapStore__download ul {
    margin-top: 2.6666666667vw;
  }
}
.okapStore__download ul img {
  width: auto;
}
.okapStore__download ul img.ext-apple {
  height: min(50px, 3.4722222222vw);
}
@media screen and (max-width: 820px) {
  .okapStore__download ul img.ext-apple {
    width: 100%;
    height: auto;
  }
}
.okapStore__download ul img.ext-google {
  height: min(50px, 3.4722222222vw);
}
@media screen and (max-width: 820px) {
  .okapStore__download ul img.ext-google {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 820px) {
  .okapStore__download ul li {
    flex-shrink: 1;
  }
}
@media screen and (min-width: 821px) {
  .okapStore__download ul li + li {
    margin-left: min(10px, 0.6944444444vw);
  }
}
@media screen and (max-width: 820px) {
  .okapStore__download ul li + li {
    margin-left: 2.6666666667vw;
  }
}
.okapFeature {
  padding: min(70px, 4.8611111111vw) 0;
  background: url(/images/rwd/oakapp/bg-feature.png) repeat left top/34px 34px;
}
@media screen and (max-width: 820px) {
  .okapFeature {
    padding: 8vw 0;
  }
}
.okapFeature__box {
  background: #ffffff;
  width: min(960px, 66.6666666667vw);
  margin: min(100px, 6.9444444444vw) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 820px) {
  .okapFeature__box {
    width: calc(100% - 16vw);
    margin: 18.6666666667vw auto;
  }
}
.okapFeature__box + .okapStore {
  margin-top: min(70px, 4.8611111111vw);
}
@media screen and (max-width: 820px) {
  .okapFeature__box + .okapStore {
    margin-top: 18.6666666667vw;
  }
}
.okapFeature__title {
  position: relative;
  color: #50A0AA;
  font-size: min(40px, 2.7777777778vw);
  letter-spacing: 0em;
  line-height: calc(56 / 40);
  display: inline-block;
  font-weight: 500;
}
@media screen and (max-width: 820px) {
  .okapFeature__title {
    font-size: 6.4vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapFeature__title:before, .okapFeature__title:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: min(44.7px, 3.1041666667vw);
  height: min(49.08px, 3.4083333333vw);
  background: url(/images/rwd/oakapp/img-featre_title.svg) no-repeat left top/contain;
  transform: translate(-100%, -70%);
}
@media screen and (max-width: 820px) {
  .okapFeature__title:before, .okapFeature__title:after {
    width: 5.96vw;
    height: 6.544vw;
  }
}
.okapFeature__title:after {
  left: auto;
  right: 0;
  transform: translate(100%, -70%) scale(-1, 1);
}
.okapFeature__subtitle {
  font-size: min(20px, 1.3888888889vw);
  letter-spacing: 0em;
  line-height: calc(28 / 20);
  font-weight: 500;
  opacity: 0.5;
}
@media screen and (max-width: 820px) {
  .okapFeature__subtitle {
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(28 / 14);
  }
}
.okapFeature__list {
  margin: min(60px, 4.1666666667vw) min(-40px, -2.7777777778vw) 0;
  width: 100%;
}
@media screen and (max-width: 820px) {
  .okapFeature__list {
    margin: 16vw auto 0;
    width: calc(100% - 4vw);
  }
}
.okapFeature__list li {
  width: min(909px, 63.125vw);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  justify-self: flex-start;
  margin-left: min(-40px, -2.7777777778vw);
}
@media screen and (max-width: 820px) {
  .okapFeature__list li {
    margin-left: auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .okapFeature__list li + li {
    margin-top: 10.6666666667vw;
  }
}
.okapFeature__list li:nth-child(even) {
  flex-direction: row-reverse;
  justify-content: flex-end;
  justify-self: flex-end;
  margin-left: auto;
  margin-right: min(-40px, -2.7777777778vw);
}
.okapFeature__list li:nth-child(even) div {
  margin-left: auto;
  margin-right: min(35.6px, 2.4722222222vw);
}
@media screen and (max-width: 820px) {
  .okapFeature__list li:nth-child(even) {
    margin-right: auto;
    flex-direction: column;
  }
  .okapFeature__list li:nth-child(even) div {
    margin-left: auto;
    margin-right: auto;
  }
}
.okapFeature__list li:nth-child(1) h3 span {
  color: #D4748E;
}
.okapFeature__list li:nth-child(2) h3 span {
  color: #284894;
}
.okapFeature__list li:nth-child(3) h3 span {
  color: #50A0AA;
}
.okapFeature__list li:nth-child(4) h3 span {
  color: #6E6EF0;
}
.okapFeature__list li:nth-child(5) h3 span {
  color: #E49A46;
}
.okapFeature__list li img {
  width: min(246.35px, 17.1076388889vw);
  height: auto;
}
@media screen and (max-width: 820px) {
  .okapFeature__list li img {
    width: 40vw;
  }
}
.okapFeature__list li div {
  width: min(627px, 43.5416666667vw);
  margin-left: min(35.6px, 2.4722222222vw);
}
@media screen and (max-width: 820px) {
  .okapFeature__list li div {
    width: auto;
    margin-left: 0;
    margin-top: 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.okapFeature__list li div h3 {
  min-width: min(298.76px, 20.7472222222vw);
  padding: 0 min(50px, 3.4722222222vw) min(55px, 3.8194444444vw) min(50px, 3.4722222222vw);
  box-sizing: border-box;
  font-weight: 700;
  font-size: min(32px, 2.2222222222vw);
  letter-spacing: 0em;
  line-height: calc(40 / 32);
  position: relative;
  display: inline-block;
}
@media screen and (max-width: 820px) {
  .okapFeature__list li div h3 {
    padding: 0 8.8888888889vw 9.7777777778vw 8.8888888889vw;
    font-size: 5.3333333333vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapFeature__list li div h3 span {
  font-size: min(48px, 3.3333333333vw);
  letter-spacing: 0em;
  line-height: calc(40 / 48);
  margin-right: 0.25em;
}
@media screen and (max-width: 820px) {
  .okapFeature__list li div h3 span {
    font-size: 5.3333333333vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapFeature__list li div h3::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: url(/images/rwd/oakapp/bg-feature_baloon.svg) no-repeat right bottom/100% min(113.87px, 7.9076388889vw);
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 820px) {
  .okapFeature__list li div h3::before {
    background: url(/images/rwd/oakapp/bg-feature_baloon.svg) no-repeat right bottom/100% 15.1826666667vw;
  }
}
.okapFeature__list li div p {
  margin-top: min(20px, 1.3888888889vw);
  font-size: min(20px, 1.3888888889vw);
  letter-spacing: 0em;
  line-height: calc(28 / 20);
  font-weight: 500;
}
@media screen and (max-width: 820px) {
  .okapFeature__list li div p {
    margin-top: 4vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(20 / 14);
  }
}
.okapTrial {
  background: #efefef;
  padding: min(70px, 4.8611111111vw) 0 0;
  overflow-x: hidden;
}
@media screen and (max-width: 820px) {
  .okapTrial {
    padding: 8vw 0 0;
  }
}
.okapTrial::after {
  content: "";
  display: block;
  width: 100%;
  height: 83px;
  background: url(/images/rwd/oakapp/bg-trial.svg) repeat-x left bottom/83px;
  margin-top: min(83px, 5.7638888889vw);
}
@media screen and (max-width: 820px) {
  .okapTrial::after {
    margin-top: 22.1333333333vw;
  }
}
.okapTrial__inner {
  width: min(1045px, 72.5694444444vw);
  margin: 0 auto;
}
@media screen and (max-width: 820px) {
  .okapTrial__inner {
    width: calc(100% - 8vw);
  }
}
.okapTrial__title {
  display: inline-block;
  position: relative;
  font-size: min(40px, 2.7777777778vw);
  letter-spacing: 0em;
  line-height: calc(56 / 40);
  color: #284894;
  font-weight: 700;
  margin-top: min(100px, 6.9444444444vw);
}
.okapTrial__title:first-child {
  margin-top: 0;
}
@media screen and (max-width: 820px) {
  .okapTrial__title {
    font-size: 6.4vw;
    letter-spacing: 0em;
    line-height: calc(32 / 24);
    margin-top: 16vw;
  }
}
.okapTrial__title span {
  position: relative;
  z-index: 1;
}
.okapTrial__title::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #ffffff;
  z-index: 1;
}
.okapTrial__title::after {
  content: "";
  width: min(44.7px, 3.1041666667vw);
  height: min(49.08px, 3.4083333333vw);
  background: url(/images/rwd/oakapp/img-trial_title.svg) no-repeat center center/contain;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, -70%);
}
@media screen and (max-width: 820px) {
  .okapTrial__title::after {
    width: 5.96vw;
    height: 6.544vw;
    transform: translate(80%, -50%);
  }
}
.okapTrial__subtitle {
  margin-top: min(10px, 0.6944444444vw);
  font-size: min(20px, 1.3888888889vw);
  letter-spacing: 0em;
  line-height: calc(28 / 20);
  font-weight: 500;
}
@media screen and (max-width: 820px) {
  .okapTrial__subtitle {
    margin-top: 1.8666666667vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(24 / 14);
  }
}
.okapTrial__navi {
  margin-top: min(35px, 2.4305555556vw);
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  overflow-y: hidden;
  overflow-x: hidden;
  cursor: pointer;
}
@media screen and (max-width: 820px) {
  .okapTrial__navi {
    margin-top: 0vw;
    width: calc(100% + 8vw);
    left: auto;
    margin: 0 -4vw;
    overflow-x: scroll;
  }
}
.okapTrial__navi ul {
  display: flex;
  align-items: center;
  padding: min(10px, 0.6944444444vw) 0 min(10px, 0.6944444444vw) calc((100vw - min(1045px, 72.5694444444vw)) / 2);
  width: 100%;
}
@media screen and (max-width: 820px) {
  .okapTrial__navi ul {
    padding: 2.6666666667vw 0 2.6666666667vw 4vw;
  }
}
.okapTrial__navi ul li {
  white-space: nowrap;
}
.okapTrial__navi ul li + li {
  margin-left: min(16px, 1.1111111111vw);
}
@media screen and (max-width: 820px) {
  .okapTrial__navi ul li + li {
    margin-left: 3.7333333333vw;
  }
}
.okapTrial__navi ul li a {
  display: inline-block;
  position: relative;
  background: #ffffff;
  border-radius: min(10px, 0.6944444444vw);
  padding: min(10px, 0.6944444444vw) min(16px, 1.1111111111vw);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 820px) {
  .okapTrial__navi ul li a {
    border-radius: 7px;
    padding: 1.8666666667vw 3.7333333333vw;
  }
}
.okapTrial__navi ul li a.is-active {
  background: #284894;
  color: #ffffff;
}
.okapTrial__download {
  margin-top: min(50px, 3.4722222222vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.okapTrial__download a {
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(24px, 1.6666666667vw);
  letter-spacing: 0em;
  line-height: 1;
  font-weight: 500;
  color: #284894;
}
@media screen and (max-width: 820px) {
  .okapTrial__download a {
    font-size: 3.84vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapTrial__download a::before, .okapTrial__download a::after {
  content: "";
  width: min(19.57px, 1.3590277778vw);
  height: min(30.58px, 2.1236111111vw);
  background: url(/images/rwd/oakapp/icn-trial_download.svg) no-repeat center center/contain;
}
@media screen and (max-width: 820px) {
  .okapTrial__download a::before, .okapTrial__download a::after {
    width: 3.1312vw;
    height: 4.8928vw;
  }
}
.okapTrial__download a::before {
  margin-right: 0.5em;
}
.okapTrial__download a::after {
  margin-left: 0.5em;
}
.okapFeed {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  width: min(1065px, 73.9583333333vw);
  margin-top: min(30px, 2.0833333333vw);
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 820px) {
  .okapFeed {
    width: 100%;
    margin-top: 2.6666666667vw;
  }
}
.okapFeed__item {
  background: #ffffff;
  border-radius: 7px;
  padding: min(15px, 1.0416666667vw);
  width: 31.455399061%;
  margin-right: 1.8779342723%;
  margin-bottom: min(20px, 1.3888888889vw);
  box-sizing: border-box;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.08);
  position: relative;
  transition: opacity 0.4s;
  display: flex;
  flex-direction: column;
}
.okapFeed__item > a {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 820px) {
  .okapFeed__item {
    padding: 4vw;
    width: 100%;
    margin-right: 0;
    margin-bottom: 4vw;
  }
}
.okapFeed__place {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: min(12px, 0.8333333333vw);
  letter-spacing: 0em;
  line-height: 1;
  font-weight: 700;
}
@media screen and (max-width: 820px) {
  .okapFeed__place {
    font-size: 3.2vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapFeed__place::before {
  content: "";
  display: inline-block;
  background: url(/images/rwd/oakapp/icn-trial_pin.svg) no-repeat center center/contain;
  width: min(11.86px, 0.8236111111vw);
  height: min(14.5px, 1.0069444444vw);
  margin-right: min(6px, 0.4166666667vw);
}
@media screen and (max-width: 820px) {
  .okapFeed__place::before {
    width: 3.1626666667vw;
    height: 3.8666666667vw;
    margin-right: 1.6vw;
  }
}
.okapFeed__user {
  display: flex;
  align-items: center;
  margin-top: min(6px, 0.4166666667vw);
}
.okapFeed__user img {
  width: min(42px, 2.9166666667vw);
  height: min(42px, 2.9166666667vw);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: min(10px, 0.6944444444vw);
}
@media screen and (max-width: 820px) {
  .okapFeed__user img {
    width: 11.2vw;
    height: 11.2vw;
    margin-right: 2.6666666667vw;
  }
}
.okapFeed__user p {
  font-size: min(16px, 1.1111111111vw);
  letter-spacing: 0em;
  line-height: calc(18 / 16);
  font-weight: 500;
}
@media screen and (max-width: 820px) {
  .okapFeed__user p {
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(18 / 14);
  }
}
.okapFeed__user p span {
  display: block;
  opacity: 0.5;
  font-weight: 400;
}
.okapFeed__image {
  max-width: 100%;
  height: min(176.63px, 12.2659722222vw);
  -o-object-fit: cover;
     object-fit: cover;
  margin-top: min(15px, 1.0416666667vw);
  border-radius: 7px;
}
@media screen and (max-width: 820px) {
  .okapFeed__image {
    margin-top: 2.6666666667vw;
  }
}
.okapFeed__event {
  margin-top: min(12px, 0.8333333333vw);
  font-size: min(16px, 1.1111111111vw);
  letter-spacing: 0em;
  line-height: calc(20 / 16);
  color: #E35D54;
  text-decoration: underline;
}
@media screen and (max-width: 820px) {
  .okapFeed__event {
    margin-top: 2.6666666667vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(20 / 14);
  }
}
.okapFeed__event::before {
  content: "";
  display: inline-block;
  width: min(12.6px, 0.875vw);
  height: min(14px, 0.9722222222vw);
  background: url(/images/rwd/oakapp/icn-feed_calendar.svg) no-repeat center center/contain;
  margin-right: 0.5em;
}
@media screen and (max-width: 820px) {
  .okapFeed__event::before {
    width: 3.36vw;
    height: 3.7333333333vw;
  }
}
.okapFeed__text {
  margin-top: min(15px, 1.0416666667vw);
  font-size: min(16px, 1.1111111111vw);
  letter-spacing: 0em;
  line-height: calc(20 / 16);
}
@media screen and (max-width: 820px) {
  .okapFeed__text {
    margin-top: 2.6666666667vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(20 / 14);
  }
}
.okapFeed__action {
  margin-top: auto;
  padding-top: min(20px, 1.3888888889vw);
  display: flex;
  align-items: center;
  line-height: 1;
  font-size: min(14px, 0.9722222222vw);
  letter-spacing: 0em;
  line-height: calc(24 / 14);
}
@media screen and (max-width: 820px) {
  .okapFeed__action {
    margin-top: 4vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(24 / 14);
  }
}
.okapFeed__action span {
  display: flex;
  align-items: center;
  margin-right: min(10px, 0.6944444444vw);
}
@media screen and (max-width: 820px) {
  .okapFeed__action span {
    margin-right: 2.6666666667vw;
  }
}
.okapFeed__action span img {
  margin-right: 0.5em;
  width: auto;
  height: min(14px, 0.9722222222vw);
}
@media screen and (max-width: 820px) {
  .okapFeed__action span img {
    height: 3.7333333333vw;
  }
}
.okapEvent {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  width: min(1065px, 73.9583333333vw);
  margin-top: min(30px, 2.0833333333vw);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
@media screen and (max-width: 820px) {
  .okapEvent {
    width: 100%;
    margin-top: 2.6666666667vw;
    flex-direction: column;
  }
}
.okapEvent__item {
  background: #ffffff;
  border-radius: 7px;
  padding: min(15px, 1.0416666667vw);
  width: 31.455399061%;
  margin-right: 1.8779342723%;
  box-sizing: border-box;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.08);
  position: relative;
  transition: opacity 0.4s;
  display: flex;
  align-items: stretch;
}
.okapEvent__item > a {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 820px) {
  .okapEvent__item {
    padding: 4vw;
    width: 100%;
    margin-right: 0;
    margin-bottom: 4vw;
  }
}
.okapEvent__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.okapEvent__header .ext-place {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  font-size: min(12px, 0.8333333333vw);
  letter-spacing: 0em;
  line-height: 1;
  font-weight: 700;
  margin-right: min(12px, 0.8333333333vw);
}
@media screen and (max-width: 820px) {
  .okapEvent__header .ext-place {
    font-size: 3.2vw;
    letter-spacing: 0em;
    line-height: 1;
    margin-right: 3.2vw;
  }
}
.okapEvent__header .ext-place::before {
  content: "";
  display: inline-block;
  background: url(/images/rwd/oakapp/icn-trial_pin.svg) no-repeat center center/contain;
  width: min(11.86px, 0.8236111111vw);
  height: min(14.5px, 1.0069444444vw);
  margin-right: min(6px, 0.4166666667vw);
  margin-top: min(-1px, -0.0694444444vw);
}
@media screen and (max-width: 820px) {
  .okapEvent__header .ext-place::before {
    width: 3.1626666667vw;
    height: 3.8666666667vw;
    margin-right: 1.6vw;
    margin-top: -0.2666666667vw;
  }
}
.okapEvent__header .ext-date {
  font-size: min(12px, 0.8333333333vw);
  letter-spacing: 0em;
  line-height: 1;
  font-weight: normal;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
@media screen and (max-width: 820px) {
  .okapEvent__header .ext-date {
    font-size: 3.2vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapEvent__header .ext-date::before {
  content: "";
  display: inline-block;
  background: url(/images/rwd/oakapp/icn-event_calendar.svg) no-repeat center center/contain;
  width: min(10.8px, 0.75vw);
  height: min(12px, 0.8333333333vw);
  margin-right: min(6px, 0.4166666667vw);
  margin-top: min(-1px, -0.0694444444vw);
}
@media screen and (max-width: 820px) {
  .okapEvent__header .ext-date::before {
    width: 2.88vw;
    height: 3.2vw;
    margin-right: 1.6vw;
    margin-top: -0.2666666667vw;
  }
}
.okapEvent__image {
  max-width: 100%;
  height: min(176.63px, 12.2659722222vw);
  -o-object-fit: cover;
     object-fit: cover;
  margin-top: min(15px, 1.0416666667vw);
  border-radius: 7px;
}
@media screen and (max-width: 820px) {
  .okapEvent__image {
    margin-top: 2.6666666667vw;
    height: 47.1013333333vw;
  }
}
.okapEvent__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: min(16px, 1.1111111111vw);
}
@media screen and (max-width: 820px) {
  .okapEvent__tag {
    margin-top: 2.6666666667vw;
  }
}
.okapEvent__tag span {
  margin-right: 1em;
  font-weight: 700;
}
.okapEvent__tag .ext-oakhouse {
  display: flex;
  flex-wrap: nowrap;
  color: #E35D54;
  font-size: min(14px, 0.9722222222vw);
  letter-spacing: 0em;
  line-height: 1;
}
@media screen and (max-width: 820px) {
  .okapEvent__tag .ext-oakhouse {
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: 1;
  }
}
.okapEvent__tag .ext-oakhouse::before {
  content: "";
  width: min(14px, 0.9722222222vw);
  height: min(11.84px, 0.8222222222vw);
  background: url(/images/rwd/oakapp/icn-event_logo.svg) no-repeat center center/contain;
  display: inline-block;
  margin-right: min(7px, 0.4861111111vw);
}
@media screen and (max-width: 820px) {
  .okapEvent__tag .ext-oakhouse::before {
    width: 3.7333333333vw;
    height: 3.1573333333vw;
    margin-right: 1.8666666667vw;
  }
}
.okapEvent__tag .ext-open {
  color: #ffffff;
  background-color: #50A0AA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(12px, 0.8333333333vw);
  letter-spacing: 0em;
  line-height: 1;
  border-radius: min(4px, 0.2777777778vw);
  padding: 0.2em 0.4em;
}
@media screen and (max-width: 820px) {
  .okapEvent__tag .ext-open {
    font-size: 3.2vw;
    letter-spacing: 0em;
    line-height: 1;
    border-radius: 1.0666666667vw;
  }
}
.okapEvent__title {
  margin-top: min(4px, 0.2777777778vw);
  font-size: min(16px, 1.1111111111vw);
  letter-spacing: 0em;
  line-height: calc(24 / 16);
  font-weight: 700;
}
@media screen and (max-width: 820px) {
  .okapEvent__title {
    margin-top: 1.0666666667vw;
    font-size: 4.2666666667vw;
    letter-spacing: 0em;
    line-height: calc(24 / 16);
  }
}
.okapEvent__detail {
  margin-top: min(7px, 0.4861111111vw);
  display: flex;
  flex-wrap: wrap;
  font-size: min(14px, 0.9722222222vw);
  letter-spacing: 0em;
  line-height: calc(24 / 14);
}
@media screen and (max-width: 820px) {
  .okapEvent__detail {
    margin-top: 1.8666666667vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(24 / 14);
  }
}
.okapEvent__detail li {
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin-right: 1em;
}
.okapEvent__detail li.ext-member:before {
  content: "";
  display: inline-block;
  width: min(14px, 0.9722222222vw);
  height: min(11.45px, 0.7951388889vw);
  background: url(/images/rwd/oakapp/icn-event_member.svg) no-repeat center center/contain;
  margin-right: 0.5em;
}
@media screen and (max-width: 820px) {
  .okapEvent__detail li.ext-member:before {
    width: 3.7333333333vw;
    height: 3.0533333333vw;
  }
}
.okapEvent__detail li.ext-require:before {
  content: "";
  display: inline-block;
  width: min(14px, 0.9722222222vw);
  height: min(11.45px, 0.7951388889vw);
  background: url(/images/rwd/oakapp/icn-event_require.svg) no-repeat center center/contain;
  margin-right: 0.5em;
}
@media screen and (max-width: 820px) {
  .okapEvent__detail li.ext-require:before {
    width: 3.7333333333vw;
    height: 3.0533333333vw;
  }
}
.okapEvent__detail li.ext-author:before {
  content: "";
  display: inline-block;
  width: min(12.44px, 0.8638888889vw);
  height: min(14px, 0.9722222222vw);
  background: url(/images/rwd/oakapp/icn-event_author.svg) no-repeat center center/contain;
  margin-right: 0.5em;
}
@media screen and (max-width: 820px) {
  .okapEvent__detail li.ext-author:before {
    width: 3.3173333333vw;
    height: 3.7333333333vw;
  }
}
.okapEvent__text {
  margin-top: min(10px, 0.6944444444vw);
  font-size: min(14px, 0.9722222222vw);
  letter-spacing: 0em;
  line-height: calc(22.4 / 14);
}
@media screen and (max-width: 820px) {
  .okapEvent__text {
    margin-top: 2.6666666667vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(22.4 / 14);
  }
}
.okapEvent__action {
  margin-top: auto;
  padding-top: min(20px, 1.3888888889vw);
  display: flex;
  align-items: center;
  line-height: 1;
  font-size: min(14px, 0.9722222222vw);
  letter-spacing: 0em;
  line-height: calc(24 / 14);
}
@media screen and (max-width: 820px) {
  .okapEvent__action {
    margin-top: 4vw;
    font-size: 3.7333333333vw;
    letter-spacing: 0em;
    line-height: calc(24 / 14);
  }
}
.okapEvent__action span {
  display: flex;
  align-items: center;
  margin-right: min(10px, 0.6944444444vw);
}
@media screen and (max-width: 820px) {
  .okapEvent__action span {
    margin-right: 2.6666666667vw;
  }
}
.okapEvent__action span img {
  margin-right: 0.5em;
  width: auto;
  height: min(14px, 0.9722222222vw);
}
@media screen and (max-width: 820px) {
  .okapEvent__action span img {
    height: 3.7333333333vw;
  }
}

.js-inview.ext-float {
  opacity: 0;
  transform: translateY(min(40px, 2.7777777778vw)) translateZ(0);
  transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
@media screen and (max-width: 820px) {
  .js-inview.ext-float {
    transform: translateY(10.6666666667vw) translateZ(0);
  }
}
.js-inview.ext-float.is-animated {
  opacity: 1;
  transform: none;
}
.js-inview.ext-fade {
  opacity: 0;
  transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-inview.ext-fade.is-animated {
  opacity: 1;
}