@charset "UTF-8";
.l-main {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}
@media only screen and (max-width: 768px) {
  .l-main {
    padding-bottom: 10.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .l-main {
    padding-bottom: 82px;
  }
}

img {
  display: block;
}
@media only screen and (max-width: 768px) {
  img {
    width: 100%;
  }
}

.p-mv {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-mv {
    margin-bottom: 5.3333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-mv {
    margin-bottom: 62px;
  }
}
.p-mv .p-mv-image img {
  height: auto;
  width: 100%;
}
.p-mv .p-mv-catch {
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .p-mv .p-mv-catch {
    left: 50%;
    translate: -50%;
    top: 11.4666666667vw;
    width: 81.0666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-mv .p-mv-catch {
    left: 186px;
    top: 50%;
    translate: 0 -50%;
  }
}

.p-page-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .p-page-link {
    gap: 1.8666666667vw;
    margin-bottom: 4.8vw;
    padding-inline: 4vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-page-link {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
    margin-bottom: 62px;
  }
}
@media only screen and (max-width: 768px) {
  .p-page-link p {
    height: 25.0666666667vw;
    width: 45.0666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-page-link p {
    height: 94px;
    width: 462px;
  }
}
.p-page-link a {
  color: var(--blue);
  display: -ms-grid;
  display: grid;
  font-weight: bold;
  place-content: center;
  position: relative;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-page-link a {
    font-size: 3.7333333333vw;
    height: 21.8666666667vw;
    padding-top: 12.2666666667vw;
    place-content: start center;
  }
}
@media print, screen and (min-width: 769px) {
  .p-page-link a {
    font-size: 1.25rem;
    height: 82px;
  }
}
.p-page-link a span {
  display: inline-block;
  position: relative;
}
@media print, screen and (min-width: 769px) {
  .p-page-link a:hover {
    opacity: 0.7;
  }
}
@media only screen and (max-width: 768px) {
  .p-page-link .-setting {
    background: url("/manabi/tutorial/img/bg-btn_sp.svg") no-repeat left top/100% auto;
  }
}
@media print, screen and (min-width: 769px) {
  .p-page-link .-setting {
    background: url("/manabi/tutorial/img/bg-btn.svg") no-repeat left top/100% auto;
  }
}
@media only screen and (max-width: 768px) {
  .p-page-link .-setting a {
    background: url("/manabi/tutorial/img/icon-setting.svg") no-repeat center 1.6vw/9.3333333333vw;
  }
}
.p-page-link .-setting a::after {
  background: url("/manabi/tutorial/img/icon-arrow-pagelink.svg") no-repeat left top/cover;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
}
@media print, screen and (min-width: 769px) {
  .p-page-link .-setting a::after {
    height: 17px;
    right: 20px;
    width: 17px;
  }
}
@media only screen and (max-width: 768px) {
  .p-page-link .-setting span {
    background: url("/manabi/tutorial/img/icon-arrow-pagelink.svg") no-repeat right center/4.5333333333vw;
    padding-right: 5.8666666667vw;
  }
}
.p-page-link .-setting span::before {
  background: url("/manabi/tutorial/img/icon-setting.svg") no-repeat left top/cover;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
@media print, screen and (min-width: 769px) {
  .p-page-link .-setting span::before {
    height: 52px;
    left: -62px;
    width: 52px;
  }
}
@media only screen and (max-width: 768px) {
  .p-page-link .-use {
    background: url("/manabi/tutorial/img/bg-btn_sp.svg") no-repeat left top/100% auto;
  }
}
@media print, screen and (min-width: 769px) {
  .p-page-link .-use {
    background: url("/manabi/tutorial/img/bg-btn.svg") no-repeat left top/100% auto;
  }
}
@media only screen and (max-width: 768px) {
  .p-page-link .-use a {
    background: url("/manabi/tutorial/img/icon-use.svg") no-repeat center 2.1333333333vw/8.2666666667vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-page-link .-use span {
    background: url("/manabi/tutorial/img/icon-arrow-pagelink.svg") no-repeat right center/4.5333333333vw;
    padding-right: 5.8666666667vw;
  }
}
.p-page-link .-use span::before {
  background: url("/manabi/tutorial/img/icon-use.svg") no-repeat left top/cover;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
@media print, screen and (min-width: 769px) {
  .p-page-link .-use span::before {
    height: 51px;
    left: -57px;
    width: 45px;
  }
}
.p-page-link .-use a::after {
  background: url("/manabi/tutorial/img/icon-arrow-pagelink.svg") no-repeat left top/cover;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
}
@media print, screen and (min-width: 769px) {
  .p-page-link .-use a::after {
    height: 17px;
    right: 20px;
    width: 17px;
  }
}

.p-tutorial-title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (max-width: 768px) {
  .p-tutorial-title {
    margin-bottom: 10.1333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-tutorial-title {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .p-tutorial-title .p-tutorial-title-icon {
    margin-bottom: 3.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-tutorial-title .p-tutorial-title-icon {
    margin-bottom: 22px;
  }
}
.p-tutorial-title .p-tutorial-title-sub {
  color: var(--blue);
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-tutorial-title .p-tutorial-title-sub {
    font-size: 4.2666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-tutorial-title .p-tutorial-title-sub {
    font-size: 1.25rem;
  }
}
.p-tutorial-title .p-tutorial-title-main {
  color: var(--blue);
}
@media only screen and (max-width: 768px) {
  .p-tutorial-title .p-tutorial-title-main {
    font-size: 6.4vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-tutorial-title .p-tutorial-title-main {
    font-size: 2.25rem;
  }
}

@media only screen and (max-width: 768px) {
  .p-setting {
    margin-bottom: 21.3333333333vw;
    padding-inline: 5.3333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting {
    margin-bottom: 130px;
  }
}
@media only screen and (max-width: 768px) {
  .p-setting .p-tutorial-title-icon {
    width: 16.2666666667vw;
  }
}
.p-setting .p-setting-item {
  background: #fff;
  margin-inline: auto;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-item {
    border-radius: 4.2666666667vw;
    padding: 7.2vw 5.3333333333vw 10.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-item {
    border-radius: 40px;
    padding-block: 50px 40px;
    width: 1320px;
  }
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-item + div {
    margin-top: 10.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-item + div {
    margin-top: 40px;
  }
}
.p-setting .p-setting-title {
  color: var(--blue);
  margin-inline: auto;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-title {
    font-size: 5.8666666667vw;
    line-height: 1.363;
    margin-bottom: 5.3333333333vw;
    text-align: center;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-title {
    font-size: 1.875rem;
    margin-bottom: 35px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.p-setting .p-setting-title span {
  display: block;
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-title span {
    right: 0;
    top: -40px;
    width: 21.6vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-title span {
    right: -125px;
    top: -80px;
  }
}
.p-setting .p-setting-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-step {
    margin-bottom: 1.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-step {
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-step img {
    width: 12.5333333333vw;
  }
}
.p-setting .p-setting-heading {
  color: var(--blue);
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-heading {
    font-size: 4.2666666667vw;
    line-height: 1.4;
    margin-bottom: 3.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-heading {
    font-size: 1rem;
    margin-bottom: 12px;
  }
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-image {
    margin-bottom: 2.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-image {
    margin-bottom: 12px;
  }
}
.p-setting .p-setting-image img {
  height: auto;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-text {
    font-size: 3.7333333333vw;
    line-height: 1.6;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-text {
    font-size: 0.875rem;
  }
}
.p-setting .p-setting-button a {
  border: 1px solid var(--blue);
  color: var(--blue);
  display: -ms-grid;
  display: grid;
  font-weight: bold;
  place-content: center;
  position: relative;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-button a {
    border-radius: 1.0666666667vw;
    font-size: 3.7333333333vw;
    height: 11.7333333333vw;
    width: 100%;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-button a {
    font-size: 0.875rem;
    border-radius: 4px;
    height: 46px;
    width: 302px;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-button a:hover {
    background: var(--blue);
    color: #fff;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-button a:hover::after {
    background: #fff;
  }
}
.p-setting .p-setting-button a::after {
  background: var(--blue);
  content: "";
  display: block;
  -webkit-mask-image: url("/manabi/tutorial/img/icon-arrow.svg");
          mask-image: url("/manabi/tutorial/img/icon-arrow.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
@media only screen and (max-width: 768px) {
  .p-setting .p-setting-button a::after {
    height: 2.6666666667vw;
    right: 5.3333333333vw;
    width: 1.6vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-setting .p-setting-button a::after {
    height: 11px;
    right: 20px;
    width: 6px;
  }
}

@media only screen and (max-width: 768px) {
  .-s01 .p-s01-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .-s01 .p-s01-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 105px;
  }
}
@media only screen and (max-width: 768px) {
  .-s01 .p-s01-item {
    width: 35.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s01 .p-s01-item {
    width: 200px;
  }
}

.-s02 .p-s02-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-items {
    gap: 5.3333333333vw 8vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-items {
    gap: 54px 73px;
    padding-inline: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-item {
    width: 35.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item {
    width: 200px;
  }
}
.-s02 .p-s02-item:last-child {
  position: relative;
  width: 100%;
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child {
    height: 427px;
    padding-left: 474px;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child .p-setting-step {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child .p-setting-heading {
    text-align: left;
  }
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-item:last-child .p-setting-image {
    margin-bottom: 9.3333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child .p-setting-image {
    left: 0;
    position: absolute;
    top: 0;
    width: 427px;
  }
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-item:last-child .p-s02-sub + div {
    margin-top: 8vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child .p-s02-sub + div {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-item:last-child .p-s02-heading {
    border-left: 0.8vw solid var(--blue);
    font-size: 3.7333333333vw;
    line-height: 1.428;
    margin-bottom: 1.8666666667vw;
    padding-left: 1.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child .p-s02-heading {
    font-size: 0.875rem;
    border-left: 3px solid var(--blue);
    line-height: 1.5;
    margin-bottom: 7px;
    padding-left: 7px;
  }
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-item:last-child .p-s02-list {
    margin-bottom: 3.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child .p-s02-list {
    margin-bottom: 7px;
  }
}
.-s02 .p-s02-item:last-child .p-s02-list li {
  margin-left: 0.5em;
  text-indent: -0.5em;
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-item:last-child .p-s02-list li {
    font-size: 3.7333333333vw;
    line-height: 1.6;
  }
}
@media print, screen and (min-width: 769px) {
  .-s02 .p-s02-item:last-child .p-s02-list li {
    font-size: 0.875rem;
  }
}
.-s02 .p-s02-item:last-child .p-s02-list li::before {
  content: "・";
}
@media only screen and (max-width: 768px) {
  .-s02 .p-s02-item:last-child .p-s02-list li + li {
    margin-top: 1.8666666667vw;
  }
}

@media print, screen and (min-width: 769px) {
  .-s03 .p-s03-inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
    padding-inline: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .-s03 .p-setting-image {
    margin-bottom: 6.9333333333vw;
  }
}
@media only screen and (max-width: 768px) {
  .-s03 .p-setting-text {
    font-size: 4.2666666667vw;
    margin-bottom: 8vw;
  }
}
@media print, screen and (min-width: 769px) {
  .-s03 .p-setting-text {
    font-size: 1rem;
    margin-bottom: 12px;
  }
}
@media only screen and (max-width: 768px) {
  .-s03 .p-setting-text small {
    display: inline-block;
    font-size: 2.6666666667vw;
    line-height: 1.6;
    margin-left: 1em;
    padding-top: 1.8666666667vw;
    text-indent: -1em;
  }
}
@media print, screen and (min-width: 769px) {
  .-s03 .p-setting-text small {
    font-size: 0.75rem;
  }
}

@media only screen and (max-width: 768px) {
  .p-use {
    padding-inline: 5.3333333333vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-tutorial-title {
    margin-bottom: 6.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-tutorial-title {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-tutorial-title .p-tutorial-title-icon {
    width: 15.7333333333vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-tutorial-title .p-tutorial-title-sub {
    line-height: 1.4;
    text-align: center;
  }
}
.p-use .p-use-item {
  background: #fff;
  margin-inline: auto;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-item {
    border-radius: 5.3333333333vw;
    padding: 8vw 5.3333333333vw 12vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-item {
    border-radius: 40px;
    padding-block: 40px 82px;
    width: 1320px;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-item + div {
    margin-top: 40px;
  }
}
.p-use .p-use-title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-title {
    margin-bottom: 6.9333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-title {
    margin-bottom: 36px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-title-icon {
    margin-bottom: 2.6666666667vw;
    width: 6.1333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-title-icon {
    margin-bottom: 14px;
  }
}
.p-use .p-use-title-sub {
  color: var(--blue);
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-title-sub {
    font-size: 3.7333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-title-sub {
    font-size: 1rem;
  }
}
.p-use .p-use-title-main {
  color: var(--blue);
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-title-main {
    font-size: 5.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-title-main {
    font-size: 1.5rem;
  }
}
.p-use .p-use-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-links {
    gap: 1.6vw;
    margin-bottom: 5.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-links {
    gap: 19px;
    margin: 0 auto 55px;
    width: 944px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-link {
    height: 15.4666666667vw;
    width: 100%;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-link {
    height: 55px;
    width: 302px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-link:has(.is-active) {
    background: url("/manabi/tutorial/img/bg-btn-home_sp_on.svg") no-repeat left top/100% auto;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-link:has(.is-active) {
    background: url("/manabi/tutorial/img/bg-btn-home_on.svg") no-repeat left top/100% auto;
  }
}
.p-use .p-use-link:has(.is-active) a {
  background: none;
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-link:hover {
    background: url("/manabi/tutorial/img/bg-btn-home_on.svg") no-repeat left top/100% auto;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-link:hover a {
    background: none;
    color: #fff;
  }
}
.p-use .p-use-link a {
  color: var(--blue);
  display: -ms-grid;
  display: grid;
  font-weight: bold;
  place-content: center;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-link a {
    background: url("/manabi/tutorial/img/bg-btn-home_sp.svg") no-repeat left top/100% auto;
    font-size: 3.7333333333vw;
    height: 13.8666666667vw;
    line-height: 1.2;
    text-align: center;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-link a {
    background: url("/manabi/tutorial/img/bg-btn-home.svg") no-repeat left top/100% auto;
    height: 46px;
    width: 302px;
  }
}
.p-use .p-use-link a.is-active {
  color: #fff;
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-inline: auto;
    padding-inline: 120px 85px;
    width: 944px;
  }
}
.p-use .p-use-image {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-image {
    margin-bottom: 10.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-image {
    width: 424px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-image figure {
    margin-inline: -3.2vw;
  }
}
.p-use .p-use-image figure img {
  height: auto;
  width: 100%;
}
.p-use .p-use-image .p-use-num {
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-image .p-use-num {
    width: 8vw;
  }
}
.p-use .p-use-list {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list {
    padding-top: 14px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-list li + li {
    margin-top: 1.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li + li {
    margin-top: 15px;
  }
}
.p-use .p-use-list li:nth-child(1) a {
  background-image: url("/manabi/tutorial/img/txt-num01.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(1) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num01_on.svg");
  }
}
.p-use .p-use-list li:nth-child(2) a {
  background-image: url("/manabi/tutorial/img/txt-num02.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(2) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num02_on.svg");
  }
}
.p-use .p-use-list li:nth-child(3) a {
  background-image: url("/manabi/tutorial/img/txt-num03.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(3) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num03_on.svg");
  }
}
.p-use .p-use-list li:nth-child(4) a {
  background-image: url("/manabi/tutorial/img/txt-num04.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(4) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num04_on.svg");
  }
}
.p-use .p-use-list li:nth-child(5) a {
  background-image: url("/manabi/tutorial/img/txt-num05.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(5) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num05_on.svg");
  }
}
.p-use .p-use-list li:nth-child(6) a {
  background-image: url("/manabi/tutorial/img/txt-num06.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(6) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num06_on.svg");
  }
}
.p-use .p-use-list li:nth-child(7) a {
  background-image: url("/manabi/tutorial/img/txt-num07.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(7) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num07_on.svg");
  }
}
.p-use .p-use-list li:nth-child(8) a {
  background-image: url("/manabi/tutorial/img/txt-num08.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(8) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num08_on.svg");
  }
}
.p-use .p-use-list li:nth-child(9) a {
  background-image: url("/manabi/tutorial/img/txt-num09.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(9) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num09_on.svg");
  }
}
.p-use .p-use-list li:nth-child(10) a {
  background-image: url("/manabi/tutorial/img/txt-num10.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(10) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num10_on.svg");
  }
}
.p-use .p-use-list li:nth-child(11) a {
  background-image: url("/manabi/tutorial/img/txt-num11.svg");
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list li:nth-child(11) a:hover {
    background-image: url("/manabi/tutorial/img/txt-num11_on.svg");
  }
}
.p-use .p-use-list a {
  background-position: left center;
  background-repeat: no-repeat;
  cursor: default;
  display: block;
}
@media only screen and (max-width: 768px) {
  .p-use .p-use-list a {
    background-size: 8vw;
    font-size: 3.7333333333vw;
    line-height: 2.14;
    padding-left: 10.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list a {
    font-size: 1rem;
    background-size: 30px;
    padding-left: 47px;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
}
.p-use .p-use-list a span {
  display: block;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transform-origin: left;
          transform-origin: left;
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list a:hover {
    color: var(--blue);
    font-weight: bold;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .p-use-list a:hover span {
    scale: 1.05;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 {
    margin-bottom: 6.6666666667vw;
  }
}
.p-use .-u01 .p-use-main {
  display: none;
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 .p-use-main.is-active {
    display: block;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 .p-use-main.is-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.p-use .-u01 #sho figure {
  translate: 1px;
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i01 {
    left: 10.1333333333vw;
    top: 4vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i01 {
    left: 65px;
    top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i02 {
    left: 42.4vw;
    top: -2.1333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i02 {
    left: 228px;
    top: -12px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i03 {
    right: 11.2vw;
    top: 0;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i03 {
    right: 70px;
    top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i04 {
    left: 10.1333333333vw;
    top: 16.8vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i04 {
    left: 65px;
    top: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i05 {
    bottom: -4vw;
    right: 41.6vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i05 {
    bottom: -20px;
    right: 225px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i06 {
    right: 10.4vw;
    top: 15.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i06 {
    right: 66px;
    top: 77px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i07 {
    left: 12.5333333333vw;
    top: 47.4666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i07 {
    left: 77px;
    top: 240px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i08 {
    left: 12.5333333333vw;
    top: 59.7333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i08 {
    left: 77px;
    top: 303px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i09 {
    bottom: -4vw;
    right: 32.2666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i09 {
    bottom: -20px;
    right: 178px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i10 {
    bottom: 17.6vw;
    left: 10.1333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i10 {
    bottom: 102px;
    left: 65px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i11 {
    bottom: -4vw;
    right: 23.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i11 {
    bottom: -20px;
    right: 131px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i12 {
    bottom: 8vw;
    left: 10.1333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i12 {
    bottom: 54px;
    left: 65px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #sho .-i13 {
    bottom: -4vw;
    right: 13.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #sho .-i13 {
    bottom: -20px;
    right: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i01 {
    left: 10.1333333333vw;
    top: 4vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i01 {
    left: 65px;
    top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i02 {
    left: 42.4vw;
    top: -2.1333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i02 {
    left: 228px;
    top: -12px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i03 {
    right: 11.2vw;
    top: 0;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i03 {
    right: 70px;
    top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i04 {
    left: 10.1333333333vw;
    top: 16.8vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i04 {
    left: 65px;
    top: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i05 {
    bottom: -4vw;
    right: 41.6vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i05 {
    bottom: -20px;
    right: 225px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i06 {
    right: 10.4vw;
    top: 15.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i06 {
    right: 66px;
    top: 77px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i07 {
    left: 10.6666666667vw;
    top: 42.4vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i07 {
    left: 67px;
    top: 215px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i08 {
    bottom: -4vw;
    right: 32.2666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i08 {
    bottom: -20px;
    right: 178px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i09 {
    left: 10.6666666667vw;
    top: 58.9333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i09 {
    left: 67px;
    top: 257px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i10 {
    bottom: -4vw;
    right: 23.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i10 {
    bottom: -20px;
    right: 131px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i11 {
    left: 10.6666666667vw;
    top: 58.9333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i11 {
    left: 67px;
    top: 300px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i12 {
    bottom: -4vw;
    right: 13.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i12 {
    bottom: -20px;
    right: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #chu .-i13 {
    bottom: -4vw;
    right: 13.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #chu .-i13 {
    bottom: -20px;
    right: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i01 {
    left: 10.1333333333vw;
    top: 4vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i01 {
    left: 65px;
    top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i02 {
    left: 42.4vw;
    top: -2.1333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i02 {
    left: 228px;
    top: -12px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i03 {
    right: 11.2vw;
    top: 0;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i03 {
    right: 70px;
    top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i04 {
    left: 10.1333333333vw;
    top: 16.8vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i04 {
    left: 65px;
    top: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i05 {
    bottom: -4vw;
    right: 41.6vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i05 {
    bottom: -20px;
    right: 225px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i06 {
    right: 10.4vw;
    top: 15.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i06 {
    right: 66px;
    top: 77px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i07 {
    left: 10.6666666667vw;
    top: 31.7333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i07 {
    left: 67px;
    top: 161px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i08 {
    bottom: -4vw;
    right: 32.2666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i08 {
    bottom: -20px;
    right: 178px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i09 {
    left: 10.6666666667vw;
    top: 44.2666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i09 {
    left: 67px;
    top: 225px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i10 {
    bottom: -4vw;
    right: 23.2vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i10 {
    bottom: -20px;
    right: 131px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i11 {
    bottom: 31.4666666667vw;
    left: 10.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i11 {
    bottom: 160px;
    left: 67px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i12 {
    bottom: -4vw;
    right: 13.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i12 {
    bottom: -20px;
    right: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u01 #other .-i13 {
    bottom: -4vw;
    right: 13.8666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u01 #other .-i13 {
    bottom: -20px;
    right: 84px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u02 .-i01 {
    left: 11.2vw;
    top: 7.4666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u02 .-i01 {
    left: 70px;
    top: 37px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u02 .-i02 {
    left: 26.9333333333vw;
    top: 30.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u02 .-i02 {
    left: 150px;
    top: 155px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u02 .-i03 {
    right: 12.5333333333vw;
    top: 45.3333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u02 .-i03 {
    right: 77px;
    top: 230px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u02 .-i04 {
    right: 12.5333333333vw;
    top: 54.4vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u02 .-i04 {
    right: 77px;
    top: 275px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u02 .-i05 {
    bottom: 30.4vw;
    right: 12.5333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u02 .-i05 {
    bottom: 154px;
    right: 77px;
  }
}
@media only screen and (max-width: 768px) {
  .p-use .-u02 .-i06 {
    bottom: 15.2vw;
    right: 12.5333333333vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-use .-u02 .-i06 {
    bottom: 76px;
    right: 77px;
  }
}

@media only screen and (max-width: 768px) {
  .p-bottom-offer {
    padding: 5.3333333333vw 5.3333333333vw 8vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-bottom-offer {
    margin-inline: auto;
    padding-block: 30px;
    width: 1024px;
  }
}
.p-bottom-offer li {
  color: #808080;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  margin-left: 1em;
  text-indent: -1em;
}
@media only screen and (max-width: 768px) {
  .p-bottom-offer li {
    font-size: 2.6666666667vw;
  }
}
@media print, screen and (min-width: 769px) {
  .p-bottom-offer li {
    font-size: 0.75rem;
  }
}