@charset "UTF-8";
/*
 *1080px以上がPC480以下がスマホで、1080 ~ 480の間をtabletとしている。
 *状況によって、1200とか980、750を使い分ける
 */
html,
body {
  font-size: 62.5%;
  font-family: fot-udkakugo-large-pr6n, source-han-sans-japanese, sans-serif, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
}

main {
  width: 100%;
}

a {
  text-decoration: none;
}
a:hover {
  cursor: pointer;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
img.object-fit {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pc {
  display: none;
}
@media screen and (min-width: 1080px) {
  .pc {
    display: block;
  }
}

@media screen and (min-width: 1080px) {
  .mb {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  br.mobile-br {
    display: none;
  }
}
br.ipad-br {
  display: none;
}
@media screen and (min-width: 750px) {
  br.ipad-br {
    display: inline-block;
  }
}
@media screen and (min-width: 1080px) {
  br.ipad-br {
    display: none;
  }
}
br.pc-br {
  display: none;
}
@media screen and (min-width: 1080px) {
  br.pc-br {
    display: inline-block;
  }
}

.position-r {
  position: relative;
}

.position-a {
  position: absolute;
}

.margin {
  display: block;
  margin: 0 auto;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.transition {
  transition: all 0.3s;
}

.flex {
  display: flex;
}
.flex.in-flex {
  display: inline-flex;
}
.flex.al-ce {
  align-items: center;
}
.flex.al-en {
  align-items: flex-end;
}
.flex.al-st {
  align-items: flex-start;
}
.flex.fle-en {
  justify-content: flex-end;
}
.flex.fle-st {
  justify-content: flex-start;
}
.flex.column {
  flex-direction: column;
}
.flex.column-reverse {
  flex-direction: column-reverse;
}
.flex.spa-be {
  justify-content: space-between;
}
.flex.spa-ar {
  justify-content: space-around;
}
.flex.ju-ce {
  justify-content: center;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.col-to-row {
  flex-direction: column;
}
@media screen and (min-width: 1080px) {
  .flex.col-to-row {
    flex-direction: row;
  }
}
@media screen and (min-width: 750px) {
  .flex.col-to-row.col-to-row-change-ipad {
    flex-direction: row;
  }
}
.flex.row-to-col {
  flex-direction: row;
}
@media screen and (min-width: 1080px) {
  .flex.row-to-col {
    flex-direction: column;
  }
}
@media screen and (min-width: 750px) {
  .flex.row-to-col.row-to-col-change-ipad {
    flex-direction: column;
  }
}
.flex.fle-sh {
  flex-shrink: 0;
}
.flex.fle-gr {
  flex-grow: 1;
}

.flex-ce {
  display: flex;
  justify-content: center;
  align-items: center;
}

.in-flex-ce {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.grid-ce {
  display: grid;
  place-items: center;
}

.width-child {
  line-height: 1.5;
  min-width: 15rem;
  display: inline-block;
}

.bg-defalut {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.d-block {
  display: block;
}

.ct {
  margin: 0 auto;
  width: 91.73vw;
  max-width: 960px;
}

h1, h2, h3, h4, h5, h6, p, a, span {
  line-height: 1.5;
  font-style: normal;
  color: #191919;
  margin: 0;
}

h2, h3 {
  font-weight: 700;
}
h2 span, h3 span {
  font-weight: 700;
}

p, a {
  font-weight: 400;
  font-size: 1.4rem;
}
p span, a span {
  font-weight: 400;
  font-size: 1.4rem;
}

.lh-1_67 {
  line-height: 1.67;
}

.ex-light {
  font-weight: 100;
}

.light {
  font-weight: 200;
}

.normal {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.extra-bold {
  font-weight: 800;
}

.heavy {
  font-weight: 900;
}

@media screen and (min-width: 750px) {
  br.mobile-br {
    display: none;
  }
}
br.ipad-br {
  display: none;
}
@media screen and (min-width: 750px) {
  br.ipad-br {
    display: inline-block;
  }
}
@media screen and (min-width: 1080px) {
  br.ipad-br {
    display: none;
  }
}
br.pc-br {
  display: none;
}
@media screen and (min-width: 1080px) {
  br.pc-br {
    display: inline-block;
  }
}
@media screen and (min-width: 1080px) {
  br.pc-non {
    display: none;
  }
}

.txt-ce {
  text-align: center;
}

.txt-r {
  text-align: right;
}

.txt-l {
  text-align: left;
}

@media screen and (min-width: 750px) {
  .text-non-ipad {
    display: none;
  }
}

@media screen and (min-width: 1080px) {
  .text-non-pc {
    display: none;
  }
}

.text-open-mobile {
  display: block;
}
@media screen and (min-width: 750px) {
  .text-open-mobile {
    display: none;
  }
}

.text-open-ipad {
  display: none;
}
@media screen and (min-width: 750px) {
  .text-open-ipad {
    display: block;
  }
}

.text-open-pc {
  display: none;
}
@media screen and (min-width: 1080px) {
  .text-open-pc {
    display: block;
  }
}

.font-fot-large {
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-style: normal;
}

.font-noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
}

.font-quicksand {
  font-family: "Quicksand", sans-serif;
}

.font-m1plus-1p {
  font-family: "M PLUS 1p", sans-serif;
}

.font-open-sans {
  font-family: "Open Sans", sans-serif;
}

.font-han-sans-cjk-ja {
  font-family: source-han-sans-cjk-ja, sans-serif;
}

@font-face {
  font-family: "GenEiNuGothic-EB";
  src: url(/fonts/GenEiNuGothic-EB.woff?9ac4ca869af1c05f9af00543cf78515e) format("woff1");
}
.font-genei-nu-gothic {
  font-family: "GenEiNuGothic-EB", sans-serif;
  font-style: normal;
}

@font-face {
  font-family: "GenEiMGothic";
  src: url(/fonts/GenEiMGothic2-Black.woff?50a820ac01155f4c9f3e19b1c9119702) format("woff1"), url(/fonts/GenEiMGothic2-Bold.woff?85c1075cdce06d4bac26e11331385177) format("woff2"), url(/fonts/GenEiMGothic2-Heavy.woff?8c46b74b7adc25a536c8d41e35186dc4) format("woff3"), url(/fonts/GenEiMGothic2-Medium.woff?db586ecd451735ecc8e489a25ab92af7) format("woff4"), url(/fonts/GenEiMGothic2-Regular.woff?224cd6d5134ea4827b93ebbfde2150d1) format("woff5");
}
.font-genei-gothic {
  font-family: "GenEiMGothic", sans-serif;
  font-style: normal;
}

@font-face {
  font-family: "genjyuugothic-x";
  src: url(/fonts/GenJyuuGothicX-Bold.woff?99fb9020fca7c2f656d8a70c5b87dcb0) format("woff1"), url(/fonts/GenJyuuGothicX-Heavy.woff?2b66574700a7e7fd768694698f855e7c) format("woff2"), url(/fonts/GenJyuuGothicX-ExtraLight.woff?30916cb553ddfac94a94b7db8263e1db) format("woff3"), url(/fonts/GenJyuuGothicX-Light.woff?c10eab20362d49c3d1caabece09f7289) format("woff4"), url(/fonts/GenJyuuGothicX-Medium.woff?800707f54794894641905f9352b5eb1c) format("woff5"), url(/fonts/GenJyuuGothicX-Normal.woff?24d4aefe63ed135ba6fb6ecaab8b0c05) format("woff6"), url(/fonts/GenJyuuGothicX-Regular.woff?8fc34f2396213d8bdbefea2265625fd1) format("woff7");
}
.font-genjyuugothic-x {
  font-family: "genjyuugothic-x", sans-serif;
  font-style: normal;
}

@font-face {
  font-family: "genjyuugothic-l";
  src: url(/fonts/GenJyuuGothicL-Bold.woff?b78ae06ba6888847c3919d363abd2f26) format("woff1"), url(/fonts/GenJyuuGothicL-Heavy.woff?04a176026e34cfd64678f54f2f84ae1a) format("woff2"), url(/fonts/GenJyuuGothicL-Light.woff?1fad2422928123fd1efa319920f6d462) format("woff3"), url(/fonts/GenJyuuGothicL-Medium.woff?d248a26d2eaf24181c90a3277d6ff4bd) format("woff4"), url(/fonts/GenJyuuGothicL-Regular.woff?905e43c8b39afe88901bd7334b9cb273) format("woff5"), url(/fonts/GenJyuuGothicL-Normal.woff?40083bb856f39f6eb4adb3b10d2a3d55) format("woff6");
}
.font-genjyuugothic-l {
  font-family: "genjyuugothic-l", sans-serif;
  font-style: normal;
}

/*
* topボタン
*/
.scroll-to-top {
  position: fixed;
  z-index: 999999;
  bottom: 50px;
  right: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
@media screen and (min-width: 1080px) {
  .scroll-to-top {
    right: 32px;
  }
}

/** アイコンの共通部品 **/
.badge {
  display: inline-block;
  padding: 8px 10px 5px;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 5px;
}

.icon-megaphone {
  padding-left: 30px;
  background: url("/images/40 megaphone.png?5f0732f0d30b643a98813d1b1124e1e6") no-repeat left center;
}

.icon-pen {
  padding-left: 30px;
  background: url("/images/pen (2).png?152262ed3bd75f897b39436a7133dfa7") no-repeat left center;
}

.icon-course {
  padding-left: 30px;
  background: url(/images/Icons.png?1358dd596ec5f8af0ca7a2fb767d2669) no-repeat left center;
}

.icon-certificate {
  padding-left: 30px;
  margin: 0 auto 21px auto;
  font-size: 2rem;
  background: url(/images/certificate.png?a8977b60c73f6d784a491413a912da83) no-repeat left center;
}

.icon-rate {
  margin: 0 0 21px;
  padding-left: 30px;
  font-size: 2rem;
  background: url(/images/rate.png?b69ddb028fc3f35d2ec4e51d7cc6e292) no-repeat left center;
}

.icon-layer {
  padding-left: 30px;
  margin: 0 auto 21px;
  font-size: 2rem;
  background: url("/images/Layer 41.png?b3516a087e05a32fffe5b7e35aa916a7") no-repeat left center;
}

.icon-file {
  padding-left: 30px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  background: url(/images/file.png?e0030064b80d0eb62f759ae98590f8eb) no-repeat left center;
}
@media screen and (min-width: 860px) {
  .icon-file {
    margin-bottom: 92px;
  }
}

.icon-registered {
  padding-left: 30px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  background: url(/images/registered.png?589d6090923981cdcf695dfbbd2bf50f) no-repeat left center;
}

.next-arrow {
  position: relative;
  display: inline-block;
  padding-right: 20px;
  box-sizing: border-box;
}
.next-arrow:before {
  content: "";
  width: 12px;
  height: 12px;
  border: 0px;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
}

.pre-arrow {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  box-sizing: border-box;
}
.pre-arrow:before {
  content: "";
  width: 12px;
  height: 12px;
  border: 0px;
  border-bottom: solid 2px #333;
  border-left: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
}

/** ページネーションの共通部品 **/
.pager {
  margin-top: 38px;
  height: 50px;
  background-color: #F5F5F5;
  text-align: center;
}
.pager .pagination {
  padding: 0;
  width: 100%;
  display: block;
}
.pager .pagination li {
  padding: 0;
  display: inline-block;
  background: #E0E0E0;
  width: 35px;
  height: 35px;
  text-align: center;
  position: relative;
  border-radius: 5px;
  margin: 7px 4px 0;
}
.pager .pagination li button {
  display: contents;
}
.pager .pagination li button:disabled {
  color: #7A7A7A;
  cursor: auto;
}
.pager .pagination li span {
  vertical-align: middle;
  position: absolute;
  color: #7A7A7A;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
  line-height: 35px;
  font-size: 14px;
}
.pager .pagination li .leader {
  background-color: #F5F5F5;
}
.pager .pagination .active {
  background-color: #FFF;
}
.pager .pagination .pre {
  float: left;
  background-color: #F5F5F5;
}
.pager .pagination .pre span {
  margin-left: 20px;
}
.pager .pagination .next {
  float: right;
  background-color: #F5F5F5;
}
.pager .pagination .next span {
  margin-left: -10px;
}

/** Form関連の共通部品 **/
.form-group {
  display: inline-flex;
  width: 100%;
}

input.error, textarea.error, select.error {
  border-color: #e3342f !important;
}

.error-msg {
  color: #e3342f;
  font-size: 12px;
  white-space: pre-wrap;
}

input,
select {
  border: 1px solid #DDDDDD;
  display: block;
  width: 100%;
  padding: 0 12px;
  line-height: 48px;
  background-color: #FFF;
}
input::-moz-placeholder, select::-moz-placeholder {
  color: #D1D1D1D1;
}
input:-ms-input-placeholder, select:-ms-input-placeholder {
  color: #D1D1D1D1;
}
input::placeholder,
select::placeholder {
  color: #D1D1D1D1;
}

.select-wrap {
  position: relative;
}
.select-wrap:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 22px;
  border-top: 4px solid #777;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  pointer-events: none;
}
.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border: 1px solid #DDDDDD;
  line-height: 48px;
  width: 100%;
  background-color: #FFF;
}
.select-wrap select::-ms-expand {
  display: none;
}

/*
* フォーム　性別入力
*/
.radio-input {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  width: 120px;
}

.radio-input:checked + .radio-label {
  background: #3D6AC5;
  color: #fff;
  width: 120px;
  text-align: center;
}

.radio-label {
  display: inline-block;
  line-height: 48px;
  padding: 0 12px;
  transition: all 0.2s;
  width: 120px;
  text-align: center;
  background-color: #FFF;
  border: 1px solid #DDDDDD;
  font-size: 1.6rem;
}

/** ボタン関連の共通部品 **/
.btn {
  line-height: 1;
  display: block;
  width: 100%;
  font-size: 14px;
  border: 1px solid #333;
  cursor: pointer;
  text-decoration: none;
  margin: 0 15px;
  padding: 0;
}

.btn-shadow {
  box-shadow: 3px 3px 5px #bebebe;
}

.btn-radius {
  border-radius: 100vh;
}

.btn-white,
a.btn-white,
.badge-white {
  color: #121212;
  background-color: #FFF;
}

.btn-white,
a.btn-white,
.badge-white {
  color: #121212;
  background-color: #FFF;
}

.btn-lightgreen,
a.btn-lightgreen,
.badge-lightgreen {
  color: #FFF;
  background-color: #78C9AA;
}

.btn-green,
a.btn-green,
.badge-green {
  color: #FFF;
  background-color: #28A745;
}

.btn-yellow,
a.btn-yellow,
.badge-yellow {
  color: #FFF;
  background-color: #FFC934;
}

.btn-gray,
a.btn-gray,
.badge-gray {
  color: #121212;
  background-color: #D2D2D2;
}

.btn-middlegray,
a.btn-sofgray,
.badge-lightdarkgray {
  color: #FFF;
  background-color: #7A7A7A;
}

.btn-darkgray,
a.btn-darkgray,
.badge-darkgray {
  color: #FFF;
  background-color: #333;
}

.btn-red,
a.btn-red,
.badge-red {
  color: #FFF;
  background-color: #FF1645;
}

.btn-normal {
  width: 98px;
}

.btn-middle {
  width: 190px;
}

.btn-long {
  width: 280px;
}

/** パンくず関連の共通部品 **/
.breadcrumbs {
  list-style: none;
  padding: 0;
}
.breadcrumbs li {
  font-size: 12px;
  line-height: 1.5;
  display: inline;
}
.breadcrumbs li::after {
  content: "＞";
  display: inline-block;
  padding: 0 5px;
}
.breadcrumbs li:last-child::after {
  display: none;
}
.breadcrumbs li a {
  font-size: 12px;
  text-decoration: underline;
}

/********************
マイページ
*********************/
.mypage-wrapper {
  margin: 0 auto 0 auto;
}
.mypage-wrapper .mypage-contents h2 {
  font-size: 18px;
  text-indent: 10px;
  font-weight: 600;
  margin: 30px auto 30px auto;
}
.mypage-wrapper .mypage-contents .title-line {
  border-left: #FFC934 4px solid;
  padding: 4px 0px 4px 3px;
}
.mypage-wrapper .mypage-contents .news-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.mypage-wrapper .mypage-contents .news-table td,
.mypage-wrapper .mypage-contents .news-table th {
  border-top: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
  height: 58px;
  margin: 0;
  font-size: 14px;
}
.mypage-wrapper .mypage-contents .news-table td {
  padding: 0px 4px;
}
.mypage-wrapper .mypage-contents .news-table td:first-child {
  padding-left: 20px;
  width: 110px;
}
.mypage-wrapper .mypage-contents .news-table td:nth-child(2) {
  width: 65px;
}
.mypage-wrapper .mypage-contents .news-table a {
  color: #0033CC;
  text-decoration: none;
}
.mypage-wrapper .mypage-contents .news-table a:hover {
  text-decoration: underline;
}
.mypage-wrapper .mypage-contents .news-detail {
  background-color: #F9F9F9;
  font-size: 12px;
  padding: 37px 28px;
  margin-bottom: 40px;
}
.mypage-wrapper .mypage-contents .news-detail .news-date {
  margin-bottom: 20px;
}
.mypage-wrapper .mypage-contents .news-detail .news-message {
  line-height: 22px;
}
.mypage-wrapper .mypage-contents .news-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  text-align: center;
}
.mypage-wrapper .mypage-contents .news-btn .pre-arrow {
  padding-left: 13px;
  top: -3px;
}
.mypage-wrapper .mypage-contents .news-btn .next-arrow {
  margin-right: -10px;
  top: -3px;
  left: 4px;
}
.mypage-wrapper .mypage-contents .news-btn .disabled {
  color: #7A7A7A;
  border-color: #7A7A7A;
  cursor: auto;
}
.mypage-wrapper .mypage-contents .usersetting-menu {
  margin-bottom: 24px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents .usersetting-menu {
    margin-bottom: 34px;
  }
}
.mypage-wrapper .mypage-contents .usersetting-menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mypage-wrapper .mypage-contents .usersetting-menu ul li {
  border-collapse: collapse;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  width: calc( 100% / 4);
}
.mypage-wrapper .mypage-contents .usersetting-menu ul li:first-child {
  border-radius: 7px 0 0 7px;
}
.mypage-wrapper .mypage-contents .usersetting-menu ul li:last-child {
  border-radius: 0 7px 7px 0;
  border-right: 2px solid #333;
}
.mypage-wrapper .mypage-contents .usersetting-menu ul li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: 10px 5px 20px;
  text-align: center;
  line-height: 1.5;
  font-size: 1.3rem;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents .usersetting-menu ul li a {
    font-size: 1.6rem;
    padding: 10px 0;
  }
}
.mypage-wrapper .mypage-contents .usersetting-menu ul .active {
  background-color: #17A2B8;
  color: #FFF;
}
.mypage-wrapper .mypage-contents #course-wrap {
  /*
  * レッスン詳細
  */
}
.mypage-wrapper .mypage-contents #course-wrap .row {
  margin: 0;
  padding: 0;
}
.mypage-wrapper .mypage-contents #course-wrap .col-4 {
  margin: 0;
  padding: 0;
}
.mypage-wrapper .mypage-contents #course-wrap .progress {
  height: 18px;
  background-color: #FFF;
  width: 100%;
  border: 2px solid #FFC934;
  border-radius: 5px;
}
.mypage-wrapper .mypage-contents #course-wrap .progress .progress-bar {
  background-repeat: initial;
  background-size: 1.6rem 1.6rem;
  background-color: #ffc107;
}
.mypage-wrapper .mypage-contents #course-wrap .progress-value {
  width: 100%;
  position: relative;
  top: -18px;
  text-align: center;
}
.mypage-wrapper .mypage-contents #course-wrap .progress-value .perfect {
  color: #F9F9F9;
}
.mypage-wrapper .mypage-contents #course-wrap .progress-value .perfect .icon-shining {
  height: 23px;
  margin-bottom: 3px;
}
.mypage-wrapper .mypage-contents #course-wrap .progress-value .incomplete {
  color: #7A7A7A !important;
}
.mypage-wrapper .mypage-contents #course-wrap .course-card {
  width: 210px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 5px 5px 0 rgba(126, 125, 125, 0.2);
  margin: 0 10px 40px 2px;
}
.mypage-wrapper .mypage-contents #course-wrap .course-card .card-img img {
  border-radius: 10px 10px 0 0;
}
.mypage-wrapper .mypage-contents #course-wrap .course-card .card-body {
  padding-top: 12px;
}
.mypage-wrapper .mypage-contents #course-wrap .course-card .card-title {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.mypage-wrapper .mypage-contents #course-wrap .course-card .card-text {
  margin-top: 10px;
}
.mypage-wrapper .mypage-contents #course-wrap .course-card a {
  text-decoration: none;
}
.mypage-wrapper .mypage-contents #course-wrap .course-card .badge {
  border: #8CD8D0 1px solid;
  color: #8CD8D0;
  font-weight: 600;
  font-size: 10px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail {
  /*
  * 講座ヘッダー
  */
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail h2 {
  font-size: 2rem;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top {
  background-color: #FFFBE9;
  padding: 24px 3.98%;
  margin-bottom: 80px;
}
@media screen and (min-width: 1280px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top {
    padding: 24px 56px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top h3 {
  font-size: 1.8rem;
  margin-bottom: 22px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top h3 {
    font-size: 2.4rem;
    margin-bottom: 0;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .cours-activity h3 {
  margin-bottom: 24px;
}
@media screen and (min-width: 1280px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .cours-activity {
    flex-direction: row !important;
    margin-bottom: 35px;
  }
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .cours-activity h3 {
    margin-bottom: 0;
    width: 540px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-clear,
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-not-clear {
  width: 304px;
  max-width: 100%;
  padding: 14px 0 13px;
  font-size: 2.1rem;
  border-radius: 7px;
  margin-bottom: 24px;
}
@media screen and (min-width: 1280px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-clear,
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-not-clear {
    margin-bottom: 0;
    width: 180px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-clear {
  background-color: #FF6565;
  color: #FFF;
  border: 2px solid #4A4A4A;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-not-clear {
  background-color: #FFF;
  border: 2px solid #D2D2D2;
  color: #D2D2D2;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-description {
  font-size: 1.6rem;
  line-height: 1.67;
  margin-bottom: 44px;
  white-space: pre-line;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-description {
    margin-bottom: 52px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top h4 {
  font-size: 1.4rem;
  margin-bottom: 16px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top h4 {
    font-size: 1.6rem;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .course-progress {
  padding: 10px;
  height: 48px;
  background-color: #F9F9F9;
  position: relative;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .progress {
  height: 28px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .progress-value {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-top .progress-value span {
  color: #FFF;
  font-size: 1.8rem;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate {
  margin-bottom: 84px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate {
    margin-bottom: 64px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail {
  width: 100%;
  padding: 32px 0;
  background-color: #F9F9F9;
  border-radius: 6px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail a, .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail button {
  cursor: pointer;
  width: 68.97vw;
  font-size: 1.6rem;
  padding: 10px 0;
  border-radius: 4px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail a, .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail button {
    width: 420px;
    padding: 12px 0 10px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail .certificate-download-btn {
  color: #FFF;
  border: 1px solid #586d8d;
  background: #2e31e4;
  background: linear-gradient(to bottom, #50A5FF 0%, #087FFF 100%);
  text-decoration: none;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail .certificate-download-btn img {
  margin-right: 10px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail .disabled {
  color: #7A7A7A;
  border: 1px solid #ccc;
  background: #f1e767;
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  box-shadow: inset 1px 1px 1px #fff;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-certificate .certificate-detail .disabled img {
  -moz-filter: contrast(0%);
  -ms-filter: contrast(0%);
  -o-filter: contrast(0%);
  filter: contrast(0%);
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-skill {
  margin-bottom: 104px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-skill {
    margin-bottom: 64px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-skill ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-skill ul {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-skill li {
  background-color: #EFEFEF;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.4rem;
  padding: 21px 14px 18px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-skill li {
    padding: 31px 38px 29px;
    font-size: 1.6rem;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-skill .bg-yellow {
  background-color: #FFC934;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson h2 {
  margin: 0 auto 30px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-margin {
  margin-top: 80px;
}
.lesson-detail:not(.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson:last-of-type) {
  margin-bottom: 64px;
}
@media screen and (min-width: 1080px) {
  .lesson-detail:not(.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson:last-of-type) {
    margin-bottom: 80px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail {
  border: 2px solid #333;
  border-radius: 6px;
  padding: 29px 0 32px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .chapter-list:not(.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .chapter-list:first-of-type) {
  margin-top: 64px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .chapter-list:not(.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .chapter-list:first-of-type) {
    margin-top: 80px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail h3 {
  font-size: 1.8rem;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .movie-title {
  margin-bottom: 32px;
  padding: 0 3.98%;
}
@media screen and (min-width: 1280px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .movie-title {
    margin-bottom: 54px;
    padding: 0 48px;
    flex-direction: row !important;
    justify-content: space-between;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-time {
  font-size: 1.6rem;
  margin-top: 12px;
}
@media screen and (min-width: 1280px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-time {
    margin-top: 0px;
    margin-left: 24px;
    flex-shrink: 0;
  }
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-description-box {
    flex-direction: column !important;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-description {
  font-size: 1.5rem;
  line-height: 1.67;
  word-break: break-all;
  margin-bottom: 60px;
  padding: 0 3.98%;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-description {
    padding: 0 48px;
    font-size: 1.6rem;
    flex-direction: column !important;
    margin-bottom: 52px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-download-btn {
  font-size: 18px;
  background-color: #EFEFEF;
  height: 64px;
  margin: 0 auto 32px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-download-btn {
    width: 621px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-mask {
  position: absolute;
  width: 100%;
  height: 270px;
}
@media screen and (min-width: 480px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-mask {
    height: 350px;
  }
}
@media screen and (min-width: 750px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-mask {
    width: 666px;
    height: 500px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-z1 {
  z-index: 1;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-z999 {
  z-index: 999;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie-wh {
  width: 100%;
  padding-top: 55%;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie {
  background-color: #DDDDDD;
  padding: 0 0 15px;
  text-align: center;
  margin-bottom: 32px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie {
    padding: 24px 3.98%;
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1280px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie {
    padding: 24px 138px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie img {
  border-radius: 5px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .movie-iframe {
  width: 100%;
  position: relative;
  margin-bottom: 12px;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .movie-iframe {
    margin-bottom: 16px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .movie-iframe::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.53%;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .movie-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn {
  cursor: pointer;
  width: 96.59%;
  border: 2px solid #1CB7A7;
  border-radius: 27px;
  padding: 10px 0;
  margin: auto;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn.before {
  background-color: #4FC4B8;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn.before span {
  color: #FFFFFF;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn.before img {
  margin-right: 15px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn.complete {
  background-color: #F2F2F2;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn.complete span {
  color: #333333;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn.complete img {
  margin-right: 19px;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn span {
  text-align: left;
  font-size: 1.4rem;
}
@media screen and (min-width: 1080px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn {
    font-size: 1.8rem;
    width: 622px;
    max-width: 100%;
    margin: auto;
  }
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn.complete img {
    margin-right: 65px;
  }
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn span {
    font-size: 1.9rem;
  }
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-lesson .lesson-detail .lesson-movie .lesson-complete-btn span br {
    display: none;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task-title {
  padding: 0 3.98%;
  margin-bottom: 16px;
}
@media screen and (min-width: 860px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task-title {
    padding: 0 48px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task-description {
  padding: 0 3.98%;
}
@media screen and (min-width: 860px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task-description {
    padding: 0 48px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task {
  padding: 0 3.98%;
}
@media screen and (min-width: 860px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task {
    padding: 0 48px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task h4 {
  font-size: 18px;
  font-weight: 600;
  border-bottom: solid 2px #333;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-submission,
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement {
  margin-bottom: 20px;
}
@media screen and (min-width: 860px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-submission,
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement {
    width: calc( 90% / 2 );
  }
}
@media screen and (min-width: 1180px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-submission,
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement {
    width: 380px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-submission .submission-wrap {
  width: 100%;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-submission .submission-wrap .submission-btn {
  width: 86.36%;
  margin: 0 auto 48px;
  font-size: 1.6rem;
  border-width: 2px;
  padding: 10px 0 22px;
  line-height: 1.67;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-submission .submission-wrap .submission-btn:hover {
  color: #FFF;
  background-color: #FFC934;
}
@media screen and (min-width: 860px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-submission .submission-wrap .submission-btn {
    width: 100%;
    margin: auto;
    font-size: 1.8rem;
    padding: 24px 0 22px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul {
  width: 100%;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li {
  width: 100%;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li:not(.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li:last-of-type) {
  margin-bottom: 8px;
}
@media screen and (min-width: 860px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li:not(.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li:last-of-type) {
    margin-bottom: 5px;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li button {
  width: 86.36%;
  padding: 11px 0;
  border-width: 2px;
  margin: auto;
  font-size: 1.8rem;
  color: #D2D2D2;
}
@media screen and (min-width: 860px) {
  .mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li button {
    width: 100%;
  }
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li .wait-btn-active {
  color: #FFF;
  background-color: #28A745;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li .pass-btn-active {
  color: #FFF;
  background-color: #FF1645;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li .failure-btn-active {
  color: #FFF;
  background-color: #3D6AC5;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-task .task-judgement ul li .unsubmitted-btn-active {
  color: #FFF;
  background-color: #333;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-footer {
  margin-top: 85px;
  text-align: right;
}
.mypage-wrapper .mypage-contents #course-wrap #course-detail .course-footer p a {
  font-weight: 600;
  color: #3797FF;
}
.mypage-wrapper .mypage-contents #course-wrap .course-certificate p {
  font-size: 14px;
}
.mypage-wrapper .mypage-contents #course-wrap .course-certificate .certificate-img {
  margin: 35px auto;
}
.mypage-wrapper .mypage-contents #course-wrap .course-certificate .certificate-footer {
  display: flex;
}
.mypage-wrapper .mypage-contents #course-wrap .course-certificate .certificate-footer .back-btn {
  width: 70px;
  line-height: 35px;
  font-weight: 600;
  color: #7A7A7A;
  border: 2px solid #7A7A7A;
  border-radius: 5px;
  margin-left: 0;
}
.mypage-wrapper .mypage-contents #course-wrap .course-certificate .certificate-footer .download-btn {
  width: 125px;
  line-height: 35px;
  font-weight: 600;
  color: #28A745;
  border: 2px solid #28A745;
  border-radius: 5px;
  margin-left: 0;
}
.mypage-wrapper .mypage-contents #course-wrap .course-empty {
  border: 2px solid #FFC934;
  border-radius: 5px;
  width: 670px;
}
.mypage-wrapper .mypage-contents #course-wrap .course-empty p {
  line-height: 55px;
  padding-left: 15px;
  margin: 0;
}
.mypage-wrapper .mypage-contents #course-wrap .empty-btn {
  text-align: center;
  margin-top: 85px;
}
.mypage-wrapper .mypage-contents #course-wrap .empty-btn .search-course-btn {
  width: 280px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 600;
  margin: auto;
}
.mypage-wrapper .mypage-contents #course-wrap .empty-btn .search-course-btn:hover {
  color: #FFF;
}
.mypage-wrapper .mypage-nav {
  width: 240px;
}

/********************
会員登録関連
*********************/
.register-wrapper {
  margin: 32px auto 240px auto;
}
@media screen and (min-width: 1080px) {
  .register-wrapper {
    margin: 40px auto 160px auto;
  }
}
.register-wrapper .form-body {
  margin-top: 26px;
  padding: 42px 178px;
  background-color: #F9F9F9;
}
.register-wrapper .form-body h4 {
  text-align: center;
  font-size: 20px;
  margin: 0 0 18px 0;
}
.register-wrapper .form-body h2 {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  width: 540px;
  padding-bottom: 20px;
  border-bottom: 2px solid #FFC934;
}
.register-wrapper .form-body .form-message {
  text-align: center;
  margin: 46px auto 66px auto;
}
.register-wrapper .form-body .form-message p {
  line-height: 1.8rem;
}

/*
* inner max-width 940px;
*/
.inner-940 {
  width: 91.73vw;
  max-width: 940px;
  margin: 0 auto;
}

/*
  * frontのセクションとして使うときのタイトル
  */
.front-title-box h2 {
  font-size: 2.8rem;
}
.front-title-box img {
  margin-right: 10px;
}
@media screen and (min-width: 1080px) {
  .front-title-box h2 {
    font-size: 4rem;
  }
  .front-title-box img {
    margin-right: 13px;
  }
}

.front-section-link {
  margin: auto;
  color: #FFFFFF;
  font-size: 1.8rem;
  width: 344px;
  max-width: 95%;
  height: 57px;
  background-color: #FE89A4;
  border: 2px solid #4A4A4A;
  border-radius: 27px;
}

.front-inks a {
  width: 91.73vw;
  max-width: 448px;
}
@media screen and (min-width: 1080px) {
  .front-inks a {
    width: 448px;
  }
}

/*
* swiper
*/
.swiper-wrapper {
  transition-timing-function: linear !important;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper-slide {
  border-radius: 10px;
}

/*
* スライダー
*/
.user-front-swiper {
  height: auto;
  padding: 5px 0 40px !important;
}
.user-front-swiper li {
  width: 100%;
}

.swiper-pagination {
  bottom: 0;
}

/*
* スライダー　ナビゲーション
*/
.course-status_list {
  position: relative;
}

.user-front-swiper-navi-prev,
.user-front-swiper-navi-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 10;
}

.user-front-swiper-navi-prev {
  left: 0;
}
@media screen and (min-width: 1080px) {
  .user-front-swiper-navi-prev {
    left: -30px;
  }
}

.user-front-swiper-navi-next {
  right: 0;
}
@media screen and (min-width: 1080px) {
  .user-front-swiper-navi-next {
    right: -30px;
  }
}

.user-front-swiper-navi-prev:after {
  content: url(/images/swiper-button-prev.svg?69b8b0f85ce1d646b6da571b7479c9e4);
}

.user-front-swiper-navi-next:after {
  content: url(/images/swiper-button-nex.svg?f35c0690fdcfb68d196a97d12e836559);
}