@charset "UTF-8";
.submenu {
  height: 100%;
  padding: 23px 20px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.submenu.submenu-with-tab {
  height: calc(100vh - 90px - 60px);
}
.submenu.submenu-with-tab.submenu-with-subtab {
  height: calc(100vh - 90px - 60px - 60px);
}
.submenu .submenu-header {
  margin-bottom: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.submenu .submenu-header .submenu-header-back {
  width: 26px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  font-size: 26px;
}
.submenu .submenu-header .submenu-header-back i {
  color: #bf8e01;
}
.submenu .submenu-header .submenu-header-name {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-left: 0.5rem;
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: left;
  font-weight: bold;
  color: #000;
  pointer-events: none;
}
.submenu .submenu-header .submenu-header-name .submenu-header-name-help {
  font-size: 1.4rem;
  font-weight: normal;
}
.submenu .submenu-lesson-progress {
  margin: 20px 0 25px;
}
.submenu .submenu-lesson-progress p {
  width: 100%;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 25px;
  position: relative;
  background: linear-gradient(135deg, #fec00f, #bf8e01);
  overflow: hidden;
  width: 100%;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 25px;
}
.submenu .submenu-lesson-progress p .percent {
  font-size: 1.2rem;
  color: #fff;
  position: absolute;
  top: 4px;
  left: 25%;
  z-index: 1;
}
.submenu .submenu-lesson-progress p .background {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/common/progress_bg01.040d15b279fd.png") repeat right center;
  z-index: 1;
}
.submenu .request {
  margin-top: 0;
  margin-bottom: 20px;
}
.submenu .request a {
  font-size: 1.4rem;
  padding: 17px 0px 16px;
}
.submenu .request a .request_icon {
  background-size: 18px auto;
  width: 37px;
  height: 37px;
  top: 5px;
  left: 5px;
}
.submenu .submenu-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow-y: hidden;
  overflow-x: visible;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 -20px;
}
.submenu .submenu-content ul {
  overflow-y: auto;
}
.submenu .submenu-content ul li {
  margin: 10px 20px 0;
  line-height: 1.4;
  position: relative;
}
.submenu .submenu-content ul li:first-child {
  margin-top: 0;
}
.submenu .submenu-content ul li .new_icon {
  top: 50%;
  margin-top: -13px;
  right: 10px;
  left: auto;
  pointer-events: none;
}
.submenu .submenu-content ul li .user_icon {
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 10px;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.submenu .submenu-content ul li .submenu-item-help {
  font-weight: normal;
}
.submenu .submenu-content.grade ul li {
  position: relative;
  border-radius: 5px;
  background: linear-gradient(135deg, #fec00f, #bf8e01);
  z-index: 1;
}
.submenu .submenu-content.grade ul li .background {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  pointer-events: none;
}
.submenu .submenu-content.grade ul li a {
  background-color: transparent;
  position: relative;
  z-index: 1;
}
.submenu .submenu-content.grade ul li a:hover {
  background-color: #d9073d;
  color: #fff;
}
.submenu .submenu-content.with-icon ul li a {
  padding-left: 45px;
}
.submenu .submenu-content .submenu-content-title {
  margin: 0 0 20px;
}
.submenu .submenu-content-title {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 15px 20px;
  color: #353535;
  background-color: #ebebeb;
  position: relative;
  margin: 0 -20px 20px;
}
.submenu .submenu-content-title.blue {
  color: #ffffff;
  background-color: #bf8e01;
}
.submenu .submenu-sort {
  margin: 20px 0 0;
}
.submenu .submenu-sort ul {
  background-color: #fff;
  border-radius: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.submenu .submenu-sort ul li {
  width: 50%;
}
.submenu .submenu-sort ul li a {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  padding: 19px 0 17px;
  display: block;
  border-radius: 25px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  position: relative;
}
.submenu .submenu-sort ul li a:after {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #bf8e01;
  border-radius: 25px;
  opacity: 0;
  pointer-events: none;
}
.submenu .submenu-sort ul li.active a:after {
  opacity: 1;
}
.submenu .submenu-sort ul li.comp a:after {
  left: auto;
  right: 100%;
}
.submenu .submenu-sort ul li.name.active a:after {
  left: 0;
}
.submenu .submenu-sort ul li.comp.active a:after {
  right: 0;
}
.submenu .submenu-sort ul li.active a {
  color: #fff;
}
.submenu .submenu-sort ul li a span {
  padding: 0 15px 0 0;
  background-repeat: no-repeat;
  background-size: 12px 14px;
  background-position: right center;
  position: relative;
  z-index: 2;
}
.submenu .submenu-sort ul li.name a span {
  background-image: url("../img/common/order_icon01.e1b0f16494e2.png");
}
.submenu .submenu-sort ul li.name.asc a span {
  background-image: url("../img/common/order_icon01_asc.e1b0f16494e2.png");
}
.submenu .submenu-sort ul li.name.desc a span {
  background-image: url("../img/common/order_icon01_desc.744866f65d5e.png");
}
.submenu .submenu-sort ul li.comp a span {
  background-image: url("../img/common/order_icon02.a90a0e362c8e.png");
}
.submenu .submenu-sort ul li.comp.asc a span {
  background-image: url("../img/common/order_icon02_asc.a90a0e362c8e.png");
}
.submenu .submenu-sort ul li.comp.desc a span {
  background-image: url("../img/common/order_icon02_desc.83b61b2273e9.png");
}
.submenu .submenu-sort ul li.name.active a span {
  background-image: url("../img/common/order_icon01_white.2e3153acb72f.png");
}
.submenu .submenu-sort ul li.name.active.asc a span {
  background-image: url("../img/common/order_icon01_white_asc.2e3153acb72f.png");
}
.submenu .submenu-sort ul li.name.active.desc a span {
  background-image: url("../img/common/order_icon01_white_desc.f9446c62b8fd.png");
}
.submenu .submenu-sort ul li.comp.active a span {
  background-image: url("../img/common/order_icon02_white.784be832209b.png");
}
.submenu .submenu-sort ul li.comp.active.asc a span {
  background-image: url("../img/common/order_icon02_white_asc.784be832209b.png");
}
.submenu .submenu-sort ul li.comp.active.desc a span {
  background-image: url("../img/common/order_icon02_white_desc.3f5b18e9d324.png");
}
.submenu .logout_btn {
  margin-top: 25px;
}
.submenu .logout_btn a {
  display: block;
  font-size: 1.4rem;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 19px 0 17px;
  border-radius: 50px;
  background-color: #bf8e01;
}

.submenu .submenu-content ul li a {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
  padding: 20px 15px 20px 15px;
  background-color: #fff;
  border-radius: 5px;
  background-size: 20px 17px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.submenu .submenu-content ul li a:hover {
  background-color: #d9073d;
  color: #fff;
}
.submenu .submenu-content ul li input {
  display: none;
}
.submenu .submenu-content ul li label {
  display: block;
}
.submenu .submenu-content ul li label span {
  font-size: 1.2rem;
  font-weight: bold;
  margin-left: 20px;
  padding: 20px 15px 20px 20px;
  position: relative;
  display: block;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.submenu .submenu-content ul li label input:checked + span {
  background: #d9073d;
  color: #fff;
}
.submenu .submenu-content ul li label span::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: -20px;
  width: 12px;
  height: 12px;
  border: 2px solid #b0b0b0;
  border-radius: 50%;
}
.submenu .submenu-content ul li label input:checked + span::before {
  border: 2px solid #d9073d;
}
.submenu .submenu-content ul li label input:checked + span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: -16px;
  width: 4px;
  height: 4px;
  background: #d9073d;
  border-radius: 50%;
}
.submenu .submenu-content ul li.shinki label span {
  text-align: center;
  font-size: 1.4rem;
}
.submenu .submenu-content ul li.active a {
  color: #fff;
  background-color: #d9073d;
}
.submenu .submenu-content ul li.active .new_icon {
  border: none;
  padding: 7px 1px 0 0;
}
.submenu .submenu-content ul li.disabled a {
  background-color: rgba(0, 0, 0, 0.1);
  cursor: default;
}
.submenu .submenu-content ul li.disabled a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.submenu .submenu-content ul li.crown a {
  background-image: url("../img/common/mycourse_icon01.f5a1155c8818.png");
}
.submenu .submenu-content ul li.check a {
  background-image: url("../img/common/mycourse_icon02.975c6b9594fd.png");
}
.submenu .submenu-content ul li.back a {
  background-image: url("../img/common/mycourse_icon03.a877d77cdf61.png");
}
.submenu .submenu-content ul li.crown.white a {
  background-image: url("../img/common/mycourse_icon01_white.6200c3d8736a.png");
}
.submenu .submenu-content ul li.check.white a {
  background-image: url("../img/common/mycourse_icon02_white.61c46aad828c.png");
}
.submenu .submenu-content ul li.back.white a {
  background-image: url("../img/common/mycourse_icon03_white.a49cc2b74b86.png");
}
.submenu .submenu-content ul li.lock a:before {
  font-family: "Line Awesome Free";
  font-size: 20pt;
  line-height: 1;
  content: "\f023";
  position: absolute;
  top: calc(50% - 10pt);
  left: 15px;
  color: #bf8e01;
}
.submenu .submenu-content ul li.lock.white a:before {
  color: white;
}
.submenu .submenu-content ul li.initial:before {
  background-color: #bf8e01;
  color: white;
  font-size: 15px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  left: 15px;
  top: calc(50% - 10px);
  z-index: 10;
}
.submenu .submenu-content ul li.initial:hover:before {
  background-color: white;
  color: #d9073d;
}
.submenu .submenu-content ul li.initial-a:before {
  content: "A";
}
.submenu .submenu-content ul li.initial-b:before {
  content: "B";
}
.submenu .submenu-content ul li.initial-c:before {
  content: "C";
}
.submenu .submenu-content ul li.initial-d:before {
  content: "D";
}
.submenu .submenu-content ul li.initial-e:before {
  content: "E";
}
.submenu .submenu-content ul li.initial-f:before {
  content: "F";
}
.submenu .submenu-content ul li.initial-g:before {
  content: "G";
}
.submenu .submenu-content ul li.initial-h:before {
  content: "H";
}
.submenu .submenu-content ul li.initial-i:before {
  content: "I";
}
.submenu .submenu-content ul li.initial-j:before {
  content: "J";
}
.submenu .submenu-content ul li.initial-k:before {
  content: "K";
}
.submenu .submenu-content ul li.initial-l:before {
  content: "L";
}
.submenu .submenu-content ul li.initial-m:before {
  content: "M";
}
.submenu .submenu-content ul li.initial-n:before {
  content: "N";
}
.submenu .submenu-content ul li.initial-o:before {
  content: "O";
}
.submenu .submenu-content ul li.initial-p:before {
  content: "P";
}
.submenu .submenu-content ul li.initial-q:before {
  content: "Q";
}
.submenu .submenu-content ul li.initial-r:before {
  content: "R";
}
.submenu .submenu-content ul li.initial-s:before {
  content: "S";
}
.submenu .submenu-content ul li.initial-t:before {
  content: "T";
}
.submenu .submenu-content ul li.initial-u:before {
  content: "U";
}
.submenu .submenu-content ul li.initial-v:before {
  content: "V";
}
.submenu .submenu-content ul li.initial-w:before {
  content: "W";
}
.submenu .submenu-content ul li.initial-x:before {
  content: "X";
}
.submenu .submenu-content ul li.initial-y:before {
  content: "Y";
}
.submenu .submenu-content ul li.initial-z:before {
  content: "Z";
}

@media screen and (max-width: 1023px) {
  .submenu {
    padding: 23px 4.17% 32px;
  }
  .submenu .submenu-content-title {
    padding-left: 4.17%;
    padding-right: 4.17%;
    margin-left: -4.17%;
    margin-right: -4.17%;
  }
  .submenu.submenu-with-tab {
    height: calc(100vh - 90px - 60px - 15vh);
  }
  .submenu.submenu-with-tab.submenu-with-subtab {
    height: calc(100vh - 90px - 60px - 60px - 15vh);
  }
}
@media screen and (max-width: 768px) {
  .submenu.submenu-with-tab {
    height: calc(100vh - 90px - 60px - 115px);
  }
  .submenu.submenu-with-tab.submenu-with-subtab {
    height: calc(100vh - 90px - 60px - 60px - 115px);
  }
}
@media screen and (max-width: 767px) {
  .sp_page .submenu {
    display: none;
  }

  .submenu,
.submenu.submenu-with-tab {
    height: auto;
    padding: 9% 4% 6%;
  }
  .submenu .submenu-content-title,
.submenu.submenu-with-tab .submenu-content-title {
    padding-left: 4%;
    padding-right: 4%;
    margin-left: -4%;
    margin-right: -4%;
  }
  .submenu .submenu-lesson-progress,
.submenu.submenu-with-tab .submenu-lesson-progress {
    margin: 7% 0 25px;
  }
  .submenu .submenu-content,
.submenu.submenu-with-tab .submenu-content {
    height: auto;
  }
  .submenu .submenu-content ul,
.submenu.submenu-with-tab .submenu-content ul {
    height: auto;
  }
  .submenu .submenu-content ul li a,
.submenu.submenu-with-tab .submenu-content ul li a {
    padding: 18px 15px 18px 45px;
    position: relative;
  }
  .submenu .submenu-content ul li a:after,
.submenu.submenu-with-tab .submenu-content ul li a:after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-left: 1px solid #838383;
    border-top: 1px solid #838383;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
    right: 15px;
    top: 50%;
    margin-top: -3px;
  }
  .submenu .submenu-content ul li.active a:after,
.submenu.submenu-with-tab .submenu-content ul li.active a:after {
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
  }
  .submenu .submenu-content ul li .user_icon,
.submenu.submenu-with-tab .submenu-content ul li .user_icon {
    margin-top: -17px;
    left: 3%;
    width: 34px;
    height: 34px;
  }
  .submenu .submenu-content .submenu-content-title,
.submenu.submenu-with-tab .submenu-content .submenu-content-title {
    font-size: 1.4rem;
    padding: 18px 0;
    margin-bottom: 5%;
    position: relative;
  }
  .submenu .submenu-content .submenu-content-title:after,
.submenu.submenu-with-tab .submenu-content .submenu-content-title:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 6px;
    border: 6px solid transparent;
    border-left: 10px solid #d9073d;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    margin-top: -4px;
  }
  .submenu .submenu-content .submenu-content-title.open:after,
.submenu.submenu-with-tab .submenu-content .submenu-content-title.open:after {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    margin-top: -10px;
  }
  .submenu .logout_btn,
.submenu.submenu-with-tab .logout_btn {
    margin-top: 8%;
  }
  .submenu .logout_btn a,
.submenu.submenu-with-tab .logout_btn a {
    font-size: 1.2rem;
    padding: 13px 0 13px;
  }
}
.movieopen #cboxTopCenter,
.movieopen #cboxTopRight,
.movieopen #cboxTopLeft {
  display: block;
  height: 20px;
  background-color: white;
}
.movieopen #cboxClose {
  text-indent: unset;
  background-image: none;
  color: transparent;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.movieopen #cboxClose::before {
  color: black;
  content: "\f00d";
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  font-family: "Line Awesome Free";
  font-weight: 900;
}
.movieopen #cboxClose:hover::before {
  color: #0d0d0d;
}

table.online-lesson-history {
  line-height: 2;
  border-collapse: collapse;
  width: 100%;
}
table.online-lesson-history thead tr th,
table.online-lesson-history tbody tr td {
  padding: 1ex 0.5ex;
}
table.online-lesson-history thead tr th {
  font-weight: bold;
}
table.online-lesson-history tbody tr {
  border-top: solid 1px black;
}

.online-price-tables {
  margin-top: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
}

.online-price-table {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border: black solid 1px;
  line-height: 2;
  vertical-align: bottom;
}

.online-price-table-head {
  background-color: #eaeaea;
  text-align: center;
  padding: 1ex 0;
  font-weight: bold;
}

.online-price-table-body {
  padding: 1em;
}

.online-price-table-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  border-top: black solid 1px;
  padding: 1ex 0;
  gap: 5px;
}

.online-price-table-row-price {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
}

.online-price-table-row-with-supple {
  padding-bottom: 0;
}

.online-price-table-row-supple {
  border-top: none;
  color: #d9073d;
  padding-top: 0;
  font-size: 90%;
}

.online-price-table-row-supple div {
  white-space: nowrap;
}

.online-price-table strong {
  font-weight: normal;
  font-size: 150%;
  line-height: 1;
  margin-left: 0.5ex;
  margin-right: 0.5ex;
}

@media screen and (max-width: 767px) {
  .online-price-table {
    width: 100%;
  }
}
.contents02.library .library__search {
  max-width: 940px;
}
.contents02.library .library__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-gap: 35px 20px;
}
.contents02.library .library__list .library__list__item > a:first-child {
  display: block;
  border: 1px solid #bf8e01;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 5px;
  font-size: 150%;
  line-height: 1;
}
.contents02.library .library__list .library__list__item > a:first-child:hover {
  background-color: #bf8e01;
  color: white;
}
.contents02.library .library__list .library__list__item > a:last-child {
  font-weight: bold;
  font-size: 80%;
}
.contents02.library .library__list .library__list__item > a:last-child:hover {
  -webkit-text-decoration: underline #bf8e01;
          text-decoration: underline #bf8e01;
}

@media screen and (max-width: 767px) {
  .contents02.library .library__search {
    max-width: 100%;
  }
  .contents02.library .library__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 25px 15px;
  }
}
.mycourse_page .mycourse_edit p a {
  display: block;
  font-size: 1.4rem;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 15px 0 12px;
  border-radius: 50px;
  background-color: #bf8e01;
}

.mycourse_page .mycourse_edit p img {
  vertical-align: middle;
  margin: 0 5px 2px 0;
}

@media screen and (max-width: 1023px) {
  .mycourse_page .mycourse_edit p a {
    padding: 13px 0 10px;
  }
}
@media screen and (max-width: 767px) {
  .mycourse_page .mycourse_edit p a {
    padding: 12px 0 10px;
  }

  .mycourse_page .mycourse_edit p img {
    vertical-align: middle;
    margin: 0 5px 3px 0;
    width: 15px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  hatena_txt
* --------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .contents01 .hatena_txt {
    padding-top: 50px;
  }
  .contents01 .hatena_txt .check_ttl p,
.contents01 .hatena_txt .lesson_ttl p,
.contents01 .hatena_txt .chat_ttl p {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 3%;
    color: #d9073d;
  }
  .contents01 .hatena_txt .check_ttl p:first-child,
.contents01 .hatena_txt .lesson_ttl p:first-child,
.contents01 .hatena_txt .chat_ttl p:first-child {
    font-size: 1.4rem;
    font-weight: bold;
    color: #787878;
  }
  .contents01 .hatena_txt .check_ttl p:last-child,
.contents01 .hatena_txt .lesson_ttl p:last-child,
.contents01 .hatena_txt .chat_ttl p:last-child {
    font-size: 1.6rem;
    font-weight: bold;
    color: #d9073d;
  }
  .contents01 .hatena_txt .check_top,
.contents01 .hatena_txt .lesson_top,
.contents01 .hatena_txt .chat_top {
    padding: 0;
  }
  .contents01 .hatena_txt .hatena_txt__txt,
.contents01 .hatena_txt .list li {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  .txt {
    font-size: 1.4rem;
    line-height: 1.8;
  }

  p.txt,
h4.txt {
    margin-bottom: 1.4rem;
  }

  h4.txt {
    margin-top: 3rem;
    font-weight: bold;
  }

  h5.txt {
    font-weight: bold;
    color: #d9073d;
  }

  .indent {
    padding-left: 1em;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  login
* --------------------------------------------------------------------------------------------------*/
.login_page {
  background-color: #f5f5f5;
  /*
  width: 320px;
  */
  margin: auto;
  position: relative;
}
.login_page form {
  max-width: 320px;
  margin: auto;
}

.other_login {
  max-width: 320px;
  margin: auto;
}

.edge .login_page .login_form {
  width: auto;
}

.login_page .login_form {
  width: 500px;
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translateY(-45%) translateX(-50%);
          transform: translateY(-45%) translateX(-50%);
}
.login_page .notes {
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
  margin: 20px 0;
}
.login_page h1 {
  margin: 0 0 40px;
  text-align: center;
}
.login_page input {
  font-size: 1.2rem;
  padding: 0 15px;
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  background-color: #fff;
}
.login_page input + input {
  margin-top: 20px;
}
.login_page button,
.login_page .button {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 1.4rem;
  background-color: #d9073d;
  padding: 15px 0;
  margin-top: 20px;
  width: 100%;
  border-radius: 5px;
}
.login_page .hatena {
  text-align: center;
  margin-bottom: 45px;
  margin-top: 15px;
}
.login_page .hatena img {
  width: 15px;
  margin-right: 5px;
  vertical-align: middle;
}
.login_page .other_login p {
  text-align: center;
  position: relative;
  margin-bottom: 25px;
}
.login_page .other_login p:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #898989;
}
.login_page .other_login p span {
  font-size: 1.2rem;
  font-weight: bold;
  display: inline-block;
  padding: 0 20px;
  background-color: #f5f5f5;
  position: relative;
  z-index: 1;
}
.login_page .other_login ul {
  text-align: center;
}
.login_page .other_login ul li {
  width: 50px;
  display: inline-block;
}
.login_page .other_login ul li + li {
  margin-left: 20px;
}

@media screen and (max-height: 767px) {
  .login_page .hatena img {
    vertical-align: bottom;
  }
}
@media screen and (max-height: 560px) {
  .login_page .login_form {
    padding: 20px 0;
    width: 100%;
    position: static;
    top: 45%;
    left: 50%;
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
  }
}
@media screen and (max-width: 767px) {
  .login_page .login_form {
    width: 100%;
  }
}
.login_page_monitor_ja {
  background-image: url("/static/img/login/bg_monitor_ja.82c296455983.png");
  background-position: center center;
  background-size: 350px 350px;
}

@media screen and (max-height: 767px) {
  .login_page_monitor_ja {
    background-size: 200px 200px;
  }

  .login_page {
    background-color: #f5f5f5;
    /*
    max-width: 320px;
    */
    width: 90%;
    margin: auto;
    position: relative;
  }
  .login_page h1 {
    margin: 0 auto 40px;
  }

  .ie11.login_page .login_form {
    width: 100%;
  }

  .login_page form,
.other_login {
    max-width: 320px;
    margin: auto;
  }

  .login_page h1 {
    text-align: center;
    max-width: 320px;
    margin: auto;
  }
  .login_page .other_login ul li {
    width: 48px;
  }
  .login_page .notes {
    text-align: center;
    font-weight: bold;
    line-height: 1.6;
    margin: 20px 0;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  mycourse_page
* --------------------------------------------------------------------------------------------------*/
.mycourse_page .mycourse_edit {
  margin-top: 30px;
}
.mycourse_page #lesson .txt {
  font-size: 1.4rem;
}
.mycourse_page #lesson p.txt,
.mycourse_page #lesson h4.txt {
  margin-bottom: 1.4rem;
}
.mycourse_page #lesson h4.txt {
  margin-top: 3rem;
  font-weight: bold;
}
.mycourse_page #lesson h5.txt {
  font-weight: bold;
  color: #d9073d;
}
.mycourse_page #lesson .indent {
  padding-left: 1em;
}

@media screen and (max-width: 767px) {
  .mycourse_page #lesson .txt {
    font-size: 1.2rem;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  mycourse2_page
* --------------------------------------------------------------------------------------------------*/
.mycourse2_page #lesson .lesson_top .lesson_ttl {
  width: 100%;
  float: none;
}
.mycourse2_page #lesson .lesson_top .lesson_ttl p {
  margin-top: 0;
}
.mycourse2_page #lesson .lesson_top .lesson_ttl p + p {
  margin-top: 13px;
}
.mycourse2_page #lesson .txt {
  font-size: 1.4rem;
}
.mycourse2_page .mycourse_edit_icon.help {
  display: none;
}

.mycourse3_page .mycourse_edit_icon.help {
  display: none;
}

@media screen and (max-width: 767px) {
  .mycourse2_page #lesson .txt {
    font-size: 1.2rem;
  }
  .mycourse2_page .mycourse_edit_icon.help {
    display: block;
  }
  .mycourse2_page .mycourse_edit_icon.help a {
    font-size: 30px;
    color: #bf8e01;
  }
  .mycourse2_page .mycourse_edit_icon.help a:hover {
    color: #d8a101;
  }

  .mycourse3_page .mycourse_edit_icon.help {
    display: block;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  account_page共通
* --------------------------------------------------------------------------------------------------*/
.account_page .change_btn_list {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.account_page .change_btn_list a {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  display: block;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 18px 0 17px;
}
.account_page .account_active_history {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e9e9e9;
}
.account_page .account_ttl p {
  font-size: 2rem;
  font-weight: bold;
  color: #d9073d;
  margin-bottom: 25px;
}
.account_page .account_active_history ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.account_page .account_active_history ul li {
  font-size: 1.4rem;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1ex;
}
.account_page .account_active_history ul li span:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 1ex;
  white-space: nowrap;
}
.account_page .account_active_history ul li span:first-child::before {
  display: inline-block;
  width: 22px;
  height: 22px;
  content: "";
  background-size: 22px auto;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.account_page .account_active_history ul li span:first-child.point::before {
  background-image: url("../img/account/history_icon01.3fb6ed42dd49.png");
}
.account_page .account_active_history ul li span:first-child.stamp::before {
  background-image: url("../img/account/history_icon02.a4bf32fb6d9a.png");
}
.account_page .account_active_history ul li span:first-child.badge::before {
  background-image: url("../img/account/history_icon03.2d048dc2fe59.png");
}
.account_page .account_active_history ul li span:first-child.days::before {
  background-image: url("../img/account/history_icon05.b6ab9351f700.png");
}
.account_page .account_active_history ul li span:first-child.check::before {
  background-image: url("../img/account/history_icon04.000429d7380e.png");
}
.account_page .account_active_history ul li span:first-child.video-entry::before {
  content: "\f03d";
  font-family: "Line Awesome Free";
  font-weight: 900;
  font-size: 22px;
  line-height: 22px;
}
.account_page .account_active_history ul li span:last-child {
  display: inline-block;
  text-align: right;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.account_page .account_violinrental {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e9e9e9;
}
.account_page .account_violinrental table {
  border-top: solid 1px #ccc;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
.account_page .account_violinrental tr {
  margin: 0px;
  padding: 0px;
}
.account_page .account_violinrental th,
.account_page .account_violinrental td {
  border-bottom: solid 1px #ccc;
  margin: 0px;
  padding: 15px 5px;
}
.account_page .account_violinrental th {
  font-weight: bold;
  background-color: #eee;
}
.account_page .account_violinrental .resign_button {
  padding: 5px 15px;
  font-size: 1.2rem;
  text-align: center;
  color: #000;
  display: block;
  background-color: #f5f5f5;
  border: 2px solid #f5f5f5;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 10px;
}
.account_page .account_violinrental .resign_button:hover {
  background-color: #fff;
  border: 2px solid #d9073d;
  color: #d9073d;
}

@media screen and (max-width: 850px) {
  .account_page .change_btn_list a {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .account_page .change_btn_list {
    margin-top: 4%;
    grid-template-columns: 1fr 1fr;
  }
  .account_page .change_btn_list a {
    font-size: 1.1rem;
    padding: 13% 0 12%;
    position: relative;
    -webkit-box-shadow: 1px 2px 1px #afafaf;
            box-shadow: 1px 2px 1px #afafaf;
  }
  .account_page .account_active_history {
    margin-top: 8%;
    padding-top: 8%;
    border-top: 2px solid #e9e9e9;
  }
  .account_page .account_ttl p {
    font-size: 2rem;
    font-weight: bold;
    color: #d9073d;
    margin-bottom: 5%;
  }
  .account_page .account_active_history ul {
    grid-template-columns: 1fr;
  }
  .account_page .account_active_history ul li {
    font-size: 1.2rem;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  account_top_page
* --------------------------------------------------------------------------------------------------*/
.account_top_page #account .account_icon {
  width: 140px;
  height: 140px;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
}
.account_top_page #account .account_name {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #d9073d;
  margin-top: 10px;
  word-break: break-word;
}

@media screen and (max-width: 767px) {
  .account_page .contents02 {
    padding-bottom: 8%;
  }

  .account_top_page #account .account_name {
    margin-bottom: 5%;
  }
  .account_top_page #account .account_icon {
    position: relative;
    width: 60%;
    padding-top: 60%;
  }
  .account_top_page #account .account_icon img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  account_option_page
* --------------------------------------------------------------------------------------------------*/
.account_option_page .account_sub_ttl {
  font-size: 1.5rem;
  font-weight: bold;
  color: #353535;
  margin-bottom: 15px;
}
.account_option_page .account_edit_list {
  margin-top: 30px;
}
.account_option_page .account_edit_list ul {
  margin-top: -18px;
}
.account_option_page .account_edit_list ul li {
  width: 48%;
  float: left;
  margin-top: 18px;
}
.account_option_page .account_edit_list ul li:nth-child(even) {
  margin-left: 4%;
}
.account_option_page .account_edit_list ul li a {
  font-size: 1.3rem;
  color: #717171;
  text-align: center;
  font-weight: bold;
  display: block;
  border-radius: 5px;
  padding: 10px 0 10px;
  border: 2px solid #b0b0b0;
}

@media screen and (max-width: 767px) {
  .account_option_page .account_sub_ttl {
    margin-bottom: 3%;
  }
  .account_option_page .account_edit_list {
    margin-top: 8%;
    padding-top: 8%;
    border-top: 2px solid #e9e9e9;
  }
  .account_option_page .account_edit_list ul {
    margin-top: -4%;
  }
  .account_option_page .account_edit_list ul li {
    margin-top: 4%;
  }
  .account_option_page .account_edit_list ul li a {
    font-size: 1rem;
    padding: 7px 0 7px;
    border: 1px solid #b0b0b0;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  account_stamp_page
* --------------------------------------------------------------------------------------------------*/
.account_stamp_page .account_stamp_get {
  text-align: center;
  width: 165px;
  margin: auto;
  position: relative;
}
.account_stamp_page .account_stamp_get span {
  position: absolute;
  bottom: 20px;
  left: 5px;
  right: 0;
  font-size: 7rem;
  line-height: 1;
  color: #d9073d;
  font-weight: bold;
  text-align: center;
}
.account_stamp_page .account_stamp_get_txt {
  font-size: 1.6rem;
  font-weight: bold;
  color: #353535;
  text-align: center;
  margin-top: 15px;
}
.account_stamp_page .account_stamp_get_txt .red {
  color: #d9073d;
  margin: 0 5px;
}
.account_stamp_page .account_stamp_get_txt .big {
  font-size: 3rem;
}

@media screen and (max-width: 767px) {
  .account_stamp_page .account_stamp_get_txt {
    font-size: 1.4rem;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  account_badge_page
* --------------------------------------------------------------------------------------------------*/
.account_badge_page .contents02 {
  padding: 30px calc(15px + 1.5%) 8% 3%;
}
.account_badge_page .account_badge_list {
  overflow: hidden;
}
.account_badge_page .account_badge_list ul {
  margin-top: -25px;
}
.account_badge_page .account_badge_list li {
  width: 145px;
  float: left;
  margin-right: 37px;
  margin-top: 25px;
}
.account_badge_page .account_badge_list .badge_icon {
  width: 145px;
  border-radius: 50%;
  border: 6px solid #cccccc;
  overflow: hidden;
  margin: auto;
  position: relative;
}
.account_badge_page .account_badge_list .badge_name {
  font-size: 1.3rem;
  line-height: 1.4;
  color: #353535;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
}

@media screen and (max-width: 1080px) {
  .account_badge_page .account_badge_list li {
    width: 29%;
    margin-right: 5%;
  }
  .account_badge_page .account_badge_list li:nth-child(3n) {
    margin-right: 0;
  }
  .account_badge_page .account_badge_list .badge_icon {
    max-width: 145px;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .account_badge_page .contents02 {
    padding: 5% 4% 8%;
  }
  .account_badge_page .account_badge_list ul {
    margin-top: -8%;
  }
  .account_badge_page .account_badge_list li {
    margin-top: 8%;
  }
  .account_badge_page .account_badge_list .badge_name {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 500px) {
  .account_badge_page .account_badge_list li {
    width: 47%;
    margin-right: 6%;
  }
  .account_badge_page .account_badge_list li:nth-child(3n) {
    width: 47%;
    margin-right: 6%;
  }
  .account_badge_page .account_badge_list li:nth-child(2n) {
    margin-right: 0;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  check_page
* --------------------------------------------------------------------------------------------------*/
.check_page #check .check_top .check_ttl {
  width: 100%;
  float: none;
  margin: 0 0 25px;
}
.check_page #check .check_top .check_ttl p {
  color: #787878;
  font-size: 2rem;
  font-weight: bold;
  color: #d9073d;
}
.check_page #check .txt {
  font-size: 1.4rem;
  line-height: 1.8;
}

#check .request_box {
  background-color: #f5f5f5;
  border-radius: 25px;
  padding: 30px;
  max-width: 495px;
  margin-top: 40px;
}
#check .request_box .coach_icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
#check .request_box .coach_info {
  float: left;
  margin-left: 10px;
  margin-top: 3px;
}
#check .request_box .coach_info span {
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: bold;
  display: block;
}
#check .request_box .coach_info span img {
  margin-right: 5px;
}
#check .request_box .coach_info .user_name {
  font-size: 1.4rem;
}
#check .request_box .coach_select {
  float: right;
  max-width: 200px;
  width: 46%;
}
#check .request_box .coach_select a {
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
  color: #fff;
  background-color: #bf8e01;
  display: block;
  padding: 13px 0 13px;
  border-radius: 25px;
}
#check .request_box .pc_movie {
  margin-top: 35px;
}
#check .request_box .pc_movie p {
  text-align: center;
}
#check .request_box .pc_movie p a {
  display: inline-block;
  position: relative;
}
#check .request_box .pc_movie p a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/lesson/movie_icon01.e558dccc7134.png"), url("../img/lesson/movie_bg01.fabee04504f3.png");
  background-repeat: no-repeat, repeat;
  background-position: center center, left top;
  background-size: 23px 26px, 100% 100%;
  pointer-events: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#check .request_box .pc_movie p a:hover:after {
  background-image: url("../img/lesson/movie_icon01.e558dccc7134.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 23px 26px;
  opacity: 0.8;
}
#check .request_box .mobile_movie > div {
  width: 235px;
  margin: 35px auto 0;
}
#check .request_box .mobile_movie > div div {
  width: 100%;
  padding-top: 68%;
  position: relative;
}
#check .request_box .mobile_movie video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.movie_select {
  max-width: 235px;
  margin: 15px auto 0;
}
.movie_select a {
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  display: block;
  background-color: #bf8e01;
  border: 2px solid #bf8e01;
  border-radius: 50px;
  position: relative;
  padding: 17px 0px 15px 20px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.movie_select a .movie_icon {
  display: block;
  background: url("../img/common/movie_icon01.f1941ad44470.png") no-repeat center center #fff;
  background-size: 20px auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.movie_select a:hover {
  background-color: #fff;
  color: #bf8e01;
}
.movie_select a:hover .movie_icon {
  background: url("../img/common/movie_icon02.778a2b7ff79c.png") no-repeat center center #bf8e01;
  background-size: 20px auto;
}

#check .request.retry_btn a {
  padding: 16px 0px 16px 0px;
}
#check .request.retry_btn a:hover {
  background-color: #d9073d;
  color: #fff;
}

.checkcoach2open #cboxLoadedContent {
  border-radius: 10px;
}
.checkcoach2open #cboxClose {
  width: 25px;
  height: 25px;
  top: 17px;
  right: 25px;
  background: url("../img/lesson/close_btn02.3231c2962f79.png") no-repeat 0 0 !important;
  background-size: 25px !important;
  z-index: 999;
}

.lessoncheckselectopen #cboxClose {
  width: 25px;
  height: 25px;
  top: 17px;
  right: 25px;
  background: url("../img/lesson/close_btn02.3231c2962f79.png") no-repeat 0 0 !important;
  background-size: 25px !important;
  z-index: 999;
}

@media screen and (max-width: 1023px) {
  #check .request_box {
    padding: 4.7%;
    max-width: 495px;
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .check_page .mycourse_name {
    font-size: 1.8rem;
    text-align: center;
    color: #000;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
  }
  .check_page .check_top {
    padding: 8% 0 5%;
  }

  #check .request_box {
    padding: 4.7%;
    max-width: 109%;
    width: 109%;
    margin-top: 4%;
    margin-left: -4.5%;
    border-radius: 0;
  }
  #check .request_box .coach_select {
    float: none;
    max-width: 100%;
    width: 100%;
    clear: both;
    padding-top: 3%;
  }
  #check .request_box .coach_select a {
    font-size: 1.2rem;
    padding: 13px 0 13px;
  }
  #check .request_box .mobile_movie > div {
    width: 100%;
    margin: 5% auto 0;
  }

  .movie_select {
    max-width: 100%;
    width: 100%;
    margin: 5% auto 0;
  }

  #check .request_box .request {
    margin: 5% 0 0;
  }
  #check .request.retry_btn a:before {
    display: none;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  check04_page
* --------------------------------------------------------------------------------------------------*/
.check_contents02_pattern01 {
  padding-bottom: 4%;
}

@media screen and (max-width: 767px) {
  .check_contents02_pattern01 {
    background-color: #f5f5f5;
  }

  .check04_page #contents {
    position: relative;
    min-height: calc(100vh - 108px - 70px);
  }
  .check04_page #contents:before {
    content: "";
    width: 100%;
    height: 50vh;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  .check_contents02_pattern01 {
    overflow: visible;
  }
  .check_contents02_pattern01 .check_top {
    display: none;
  }
  .check_contents02_pattern01 .check_top + .txt {
    display: none;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  check06_page
* --------------------------------------------------------------------------------------------------*/
.check06_page .check_top .check_ttl p img {
  margin-right: 5px;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .check06_page #contents {
    position: relative;
    min-height: calc(100vh - 108px - 70px);
  }
  .check06_page #contents:before {
    content: "";
    width: 100%;
    height: 50vh;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .check06_page #check .request_box {
    margin-top: 0;
  }
  .check06_page .check_contents02_pattern01 .check_top {
    margin: 0 0 -4.7% -4.5%;
    padding: 0 4% 0;
    width: 109%;
    display: block;
    background-color: #f5f5f5;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  chat_page
* --------------------------------------------------------------------------------------------------*/
.chat_page .chat_back {
  display: none;
}
.chat_page #chat .chat_top .chat_ttl {
  width: 100%;
  float: none;
  margin: 0 0 25px;
}
.chat_page #chat .chat_top .chat_ttl p {
  color: #787878;
  font-size: 2rem;
  font-weight: bold;
  color: #d9073d;
}
.chat_page #chat .txt {
  font-size: 1.4rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .chat_page .chat_back {
    display: block;
    background-color: #fff;
    padding: 15px 4% 15px;
    margin: 0 auto 0;
    position: relative;
    z-index: 2;
  }
  .chat_page .chat_back:before {
    content: "";
    position: absolute;
    width: 92%;
    height: 2px;
    left: 4%;
    bottom: -2px;
    background-color: #e9e9e9;
  }
  .chat_page .mycourse_name {
    font-size: 1.8rem;
    text-align: center;
    color: #000;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
  }
  .chat_page .mycourse_name.red {
    color: #d9073d;
  }
  .chat_page .chat_back p.back {
    float: left;
    margin-top: 5px;
  }
  .chat_page .chat_back p.help {
    float: right;
  }
  .chat_page .chat_top {
    padding: 8% 0 5%;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  use_page
* --------------------------------------------------------------------------------------------------*/
#use {
  padding-bottom: 5%;
}

.use_page #use .use_top .use_ttl {
  width: 100%;
  float: none;
  margin: 25px 0 10px;
}
.use_page #use .use_top .use_ttl p {
  color: #787878;
  font-size: 2rem;
  font-weight: bold;
  color: #d9073d;
}
.use_page #use .use_top:first-of-type .use_ttl {
  margin: 0 0 25px;
}
.use_page #use .txt,
.use_page #use .txt * {
  font-size: 1.4rem;
  line-height: 1.8;
}
.use_page #use .txt .red,
.use_page #use .txt * .red {
  color: #d9073d;
}
.use_page #use p.txt,
.use_page #use ul.txt {
  margin-bottom: 1.4rem;
}
.use_page #use ul.txt {
  margin-left: 1em;
}
.use_page #use ul.txt > li {
  list-style: disc;
}
.use_page #use .more_btn {
  width: 235px;
}
.use_page #use .more_btn a {
  display: block;
  background-color: #f5f5f5;
  font-size: 1.4rem;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  padding: 18px 0 18px;
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  .use_page .contents02 {
    padding-bottom: 8%;
  }
  .use_page #use .txt,
.use_page #use .txt * {
    font-size: 1.1rem;
  }
  .use_page #use .more_btn {
    width: 100%;
  }
  .use_page #use .more_btn a {
    font-size: 1.2rem;
    padding: 18px 0 18px;
    margin-top: 2%;
    position: relative;
  }
  .use_page #use .more_btn a:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: -2px;
    left: 0;
    margin: auto;
    background-color: #afafaf;
    z-index: -1;
    border-radius: 10px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  use01_page
* --------------------------------------------------------------------------------------------------*/
.use01_page #use .use_top .use_ttl {
  width: 100%;
  float: none;
  margin: 50px 0 15px;
}

@media screen and (max-width: 767px) {
  .use_page01 #use .use_top .use_ttl {
    margin: 7% 0 2%;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  use02_page
* --------------------------------------------------------------------------------------------------*/
.use02_page #use .pc_movie {
  border-bottom: 0;
}
.use02_page #use .lesson_btn {
  max-width: 495px;
}
.use02_page #use .lesson_btn a {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  color: #fff;
  display: block;
  border-radius: 50px;
  background-color: #d9073d;
  padding: 23px 0 23px;
}

@media screen and (max-width: 1023px) {
  .use02_page #use .lesson_btn {
    max-width: 100%;
  }
  .use02_page #use .mobile_movie {
    border-bottom: none;
  }
}
@media screen and (max-width: 767px) {
  .use02_page #use .lesson_btn a {
    font-size: 1.6rem;
    padding: 19px 0 18px;
  }
  .use02_page #use .mobile_movie {
    border-bottom: none;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  use03_page
* --------------------------------------------------------------------------------------------------*/
.use03_page #use .category {
  margin-top: 60px;
}
.use03_page #use .category + .category {
  margin-top: 40px;
}
.use03_page #use .category_ttl {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}
.use03_page #use .category dl {
  border-width: 2px;
  border-style: solid;
  border-color: #f5f5f5;
  border-radius: 5px;
  -webkit-transition: all 0.3s, border-color 0.3s 0.3s;
  transition: all 0.3s, border-color 0.3s 0.3s;
}
.use03_page #use .category dl.open {
  border-color: #d9073d;
}
.use03_page #use .category dl + dl {
  margin-top: 10px;
}
.use03_page #use .category dl dt {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 16px 15px 16px;
  background-color: #f5f5f5;
  position: relative;
  -webkit-transition: all 0.3s, background-color 0.3s 0.3s, color 0.3s 0.3s;
  transition: all 0.3s, background-color 0.3s 0.3s, color 0.3s 0.3s;
  cursor: pointer;
}
.use03_page #use .category dl.open dt {
  color: #fff;
  background-color: #d9073d;
}
.use03_page #use .category dl dt:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  border: 6px solid transparent;
  border-left: 10px solid #d9073d;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  margin-top: -4px;
}
.use03_page #use .category dl.open dt:after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  margin-top: -10px;
  border-left: 10px solid #fff;
}
.use03_page #use .category dl dd {
  padding: 15px;
  font-size: 1.2rem;
  line-height: 1.8;
}
.use03_page #use dl.tree-set {
  margin-top: 5px;
  /* progress */
}
.use03_page #use dl.tree-set dt.tree-set-title {
  padding: 10px;
  font-weight: normal;
}
.use03_page #use dl.tree-set dt.tree-set-title span {
  position: relative;
  z-index: 1;
}
.use03_page #use dl.tree-set dd.tree-lessons {
  padding: 10px;
}
.use03_page #use dl.tree-set dd.tree-lessons ul {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  grid-column-gap: 8px;
}
.use03_page #use dl.tree-set dd.tree-lessons ul li {
  line-height: 1.75;
  display: contents;
}
.use03_page #use dl.tree-set dd.tree-lessons ul li a {
  display: contents;
}
.use03_page #use dl.tree-set.open dt.tree-set-title {
  padding: 10px;
  font-weight: normal;
}
.use03_page #use dl.tree-set dt.tree-set-rate::before {
  z-index: 0;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #fec00f, #bf8e01);
  border-radius: 3px;
  opacity: 1;
  -webkit-transition: opacity 0.3s 0.6s, -webkit-clip-path 0.3s 0.6s;
  transition: opacity 0.3s 0.6s, -webkit-clip-path 0.3s 0.6s;
  transition: opacity 0.3s 0.6s, clip-path 0.3s 0.6s;
  transition: opacity 0.3s 0.6s, clip-path 0.3s 0.6s, -webkit-clip-path 0.3s 0.6s;
}
.use03_page #use dl.tree-set dt.tree-set-rate-0::before {
  -webkit-clip-path: inset(0 0% 0 0);
          clip-path: inset(0 0% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-1::before {
  -webkit-clip-path: inset(0 1% 0 0);
          clip-path: inset(0 1% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-2::before {
  -webkit-clip-path: inset(0 2% 0 0);
          clip-path: inset(0 2% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-3::before {
  -webkit-clip-path: inset(0 3% 0 0);
          clip-path: inset(0 3% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-4::before {
  -webkit-clip-path: inset(0 4% 0 0);
          clip-path: inset(0 4% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-5::before {
  -webkit-clip-path: inset(0 5% 0 0);
          clip-path: inset(0 5% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-6::before {
  -webkit-clip-path: inset(0 6% 0 0);
          clip-path: inset(0 6% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-7::before {
  -webkit-clip-path: inset(0 7% 0 0);
          clip-path: inset(0 7% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-8::before {
  -webkit-clip-path: inset(0 8% 0 0);
          clip-path: inset(0 8% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-9::before {
  -webkit-clip-path: inset(0 9% 0 0);
          clip-path: inset(0 9% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-10::before {
  -webkit-clip-path: inset(0 10% 0 0);
          clip-path: inset(0 10% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-11::before {
  -webkit-clip-path: inset(0 11% 0 0);
          clip-path: inset(0 11% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-12::before {
  -webkit-clip-path: inset(0 12% 0 0);
          clip-path: inset(0 12% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-13::before {
  -webkit-clip-path: inset(0 13% 0 0);
          clip-path: inset(0 13% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-14::before {
  -webkit-clip-path: inset(0 14% 0 0);
          clip-path: inset(0 14% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-15::before {
  -webkit-clip-path: inset(0 15% 0 0);
          clip-path: inset(0 15% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-16::before {
  -webkit-clip-path: inset(0 16% 0 0);
          clip-path: inset(0 16% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-17::before {
  -webkit-clip-path: inset(0 17% 0 0);
          clip-path: inset(0 17% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-18::before {
  -webkit-clip-path: inset(0 18% 0 0);
          clip-path: inset(0 18% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-19::before {
  -webkit-clip-path: inset(0 19% 0 0);
          clip-path: inset(0 19% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-20::before {
  -webkit-clip-path: inset(0 20% 0 0);
          clip-path: inset(0 20% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-21::before {
  -webkit-clip-path: inset(0 21% 0 0);
          clip-path: inset(0 21% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-22::before {
  -webkit-clip-path: inset(0 22% 0 0);
          clip-path: inset(0 22% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-23::before {
  -webkit-clip-path: inset(0 23% 0 0);
          clip-path: inset(0 23% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-24::before {
  -webkit-clip-path: inset(0 24% 0 0);
          clip-path: inset(0 24% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-25::before {
  -webkit-clip-path: inset(0 25% 0 0);
          clip-path: inset(0 25% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-26::before {
  -webkit-clip-path: inset(0 26% 0 0);
          clip-path: inset(0 26% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-27::before {
  -webkit-clip-path: inset(0 27% 0 0);
          clip-path: inset(0 27% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-28::before {
  -webkit-clip-path: inset(0 28% 0 0);
          clip-path: inset(0 28% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-29::before {
  -webkit-clip-path: inset(0 29% 0 0);
          clip-path: inset(0 29% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-30::before {
  -webkit-clip-path: inset(0 30% 0 0);
          clip-path: inset(0 30% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-31::before {
  -webkit-clip-path: inset(0 31% 0 0);
          clip-path: inset(0 31% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-32::before {
  -webkit-clip-path: inset(0 32% 0 0);
          clip-path: inset(0 32% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-33::before {
  -webkit-clip-path: inset(0 33% 0 0);
          clip-path: inset(0 33% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-34::before {
  -webkit-clip-path: inset(0 34% 0 0);
          clip-path: inset(0 34% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-35::before {
  -webkit-clip-path: inset(0 35% 0 0);
          clip-path: inset(0 35% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-36::before {
  -webkit-clip-path: inset(0 36% 0 0);
          clip-path: inset(0 36% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-37::before {
  -webkit-clip-path: inset(0 37% 0 0);
          clip-path: inset(0 37% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-38::before {
  -webkit-clip-path: inset(0 38% 0 0);
          clip-path: inset(0 38% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-39::before {
  -webkit-clip-path: inset(0 39% 0 0);
          clip-path: inset(0 39% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-40::before {
  -webkit-clip-path: inset(0 40% 0 0);
          clip-path: inset(0 40% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-41::before {
  -webkit-clip-path: inset(0 41% 0 0);
          clip-path: inset(0 41% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-42::before {
  -webkit-clip-path: inset(0 42% 0 0);
          clip-path: inset(0 42% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-43::before {
  -webkit-clip-path: inset(0 43% 0 0);
          clip-path: inset(0 43% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-44::before {
  -webkit-clip-path: inset(0 44% 0 0);
          clip-path: inset(0 44% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-45::before {
  -webkit-clip-path: inset(0 45% 0 0);
          clip-path: inset(0 45% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-46::before {
  -webkit-clip-path: inset(0 46% 0 0);
          clip-path: inset(0 46% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-47::before {
  -webkit-clip-path: inset(0 47% 0 0);
          clip-path: inset(0 47% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-48::before {
  -webkit-clip-path: inset(0 48% 0 0);
          clip-path: inset(0 48% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-49::before {
  -webkit-clip-path: inset(0 49% 0 0);
          clip-path: inset(0 49% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-50::before {
  -webkit-clip-path: inset(0 50% 0 0);
          clip-path: inset(0 50% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-51::before {
  -webkit-clip-path: inset(0 51% 0 0);
          clip-path: inset(0 51% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-52::before {
  -webkit-clip-path: inset(0 52% 0 0);
          clip-path: inset(0 52% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-53::before {
  -webkit-clip-path: inset(0 53% 0 0);
          clip-path: inset(0 53% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-54::before {
  -webkit-clip-path: inset(0 54% 0 0);
          clip-path: inset(0 54% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-55::before {
  -webkit-clip-path: inset(0 55% 0 0);
          clip-path: inset(0 55% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-56::before {
  -webkit-clip-path: inset(0 56% 0 0);
          clip-path: inset(0 56% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-57::before {
  -webkit-clip-path: inset(0 57% 0 0);
          clip-path: inset(0 57% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-58::before {
  -webkit-clip-path: inset(0 58% 0 0);
          clip-path: inset(0 58% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-59::before {
  -webkit-clip-path: inset(0 59% 0 0);
          clip-path: inset(0 59% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-60::before {
  -webkit-clip-path: inset(0 60% 0 0);
          clip-path: inset(0 60% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-61::before {
  -webkit-clip-path: inset(0 61% 0 0);
          clip-path: inset(0 61% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-62::before {
  -webkit-clip-path: inset(0 62% 0 0);
          clip-path: inset(0 62% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-63::before {
  -webkit-clip-path: inset(0 63% 0 0);
          clip-path: inset(0 63% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-64::before {
  -webkit-clip-path: inset(0 64% 0 0);
          clip-path: inset(0 64% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-65::before {
  -webkit-clip-path: inset(0 65% 0 0);
          clip-path: inset(0 65% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-66::before {
  -webkit-clip-path: inset(0 66% 0 0);
          clip-path: inset(0 66% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-67::before {
  -webkit-clip-path: inset(0 67% 0 0);
          clip-path: inset(0 67% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-68::before {
  -webkit-clip-path: inset(0 68% 0 0);
          clip-path: inset(0 68% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-69::before {
  -webkit-clip-path: inset(0 69% 0 0);
          clip-path: inset(0 69% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-70::before {
  -webkit-clip-path: inset(0 70% 0 0);
          clip-path: inset(0 70% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-71::before {
  -webkit-clip-path: inset(0 71% 0 0);
          clip-path: inset(0 71% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-72::before {
  -webkit-clip-path: inset(0 72% 0 0);
          clip-path: inset(0 72% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-73::before {
  -webkit-clip-path: inset(0 73% 0 0);
          clip-path: inset(0 73% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-74::before {
  -webkit-clip-path: inset(0 74% 0 0);
          clip-path: inset(0 74% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-75::before {
  -webkit-clip-path: inset(0 75% 0 0);
          clip-path: inset(0 75% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-76::before {
  -webkit-clip-path: inset(0 76% 0 0);
          clip-path: inset(0 76% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-77::before {
  -webkit-clip-path: inset(0 77% 0 0);
          clip-path: inset(0 77% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-78::before {
  -webkit-clip-path: inset(0 78% 0 0);
          clip-path: inset(0 78% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-79::before {
  -webkit-clip-path: inset(0 79% 0 0);
          clip-path: inset(0 79% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-80::before {
  -webkit-clip-path: inset(0 80% 0 0);
          clip-path: inset(0 80% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-81::before {
  -webkit-clip-path: inset(0 81% 0 0);
          clip-path: inset(0 81% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-82::before {
  -webkit-clip-path: inset(0 82% 0 0);
          clip-path: inset(0 82% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-83::before {
  -webkit-clip-path: inset(0 83% 0 0);
          clip-path: inset(0 83% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-84::before {
  -webkit-clip-path: inset(0 84% 0 0);
          clip-path: inset(0 84% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-85::before {
  -webkit-clip-path: inset(0 85% 0 0);
          clip-path: inset(0 85% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-86::before {
  -webkit-clip-path: inset(0 86% 0 0);
          clip-path: inset(0 86% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-87::before {
  -webkit-clip-path: inset(0 87% 0 0);
          clip-path: inset(0 87% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-88::before {
  -webkit-clip-path: inset(0 88% 0 0);
          clip-path: inset(0 88% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-89::before {
  -webkit-clip-path: inset(0 89% 0 0);
          clip-path: inset(0 89% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-90::before {
  -webkit-clip-path: inset(0 90% 0 0);
          clip-path: inset(0 90% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-91::before {
  -webkit-clip-path: inset(0 91% 0 0);
          clip-path: inset(0 91% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-92::before {
  -webkit-clip-path: inset(0 92% 0 0);
          clip-path: inset(0 92% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-93::before {
  -webkit-clip-path: inset(0 93% 0 0);
          clip-path: inset(0 93% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-94::before {
  -webkit-clip-path: inset(0 94% 0 0);
          clip-path: inset(0 94% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-95::before {
  -webkit-clip-path: inset(0 95% 0 0);
          clip-path: inset(0 95% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-96::before {
  -webkit-clip-path: inset(0 96% 0 0);
          clip-path: inset(0 96% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-97::before {
  -webkit-clip-path: inset(0 97% 0 0);
          clip-path: inset(0 97% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-98::before {
  -webkit-clip-path: inset(0 98% 0 0);
          clip-path: inset(0 98% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-99::before {
  -webkit-clip-path: inset(0 99% 0 0);
          clip-path: inset(0 99% 0 0);
}
.use03_page #use dl.tree-set dt.tree-set-rate-100::before {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.use03_page #use dl.tree-set.open dt.tree-set-rate::before {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}

@media screen and (max-width: 767px) {
  .use03_page #use .category {
    margin-top: 10%;
  }
  .use03_page #use .category + .category {
    margin-top: 10%;
  }
  .use03_page #use .category_ttl {
    font-size: 1.6rem;
    margin-bottom: 3%;
  }
  .use03_page #use .category dl + dl {
    margin-top: 3%;
  }
  .use03_page #use .category dl dt {
    font-size: 1.2rem;
    padding: 19px 15px 19px;
  }
  .use03_page #use .category dl dd {
    padding: 4% 3%;
    font-size: 1.1rem;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  use04_page
* --------------------------------------------------------------------------------------------------*/
.use04_page #select_file {
  margin-top: 20px;
}
.use04_page #select_file div {
  width: 100%;
  border: 1px solid #cccccc;
  border-radius: 5px;
  cursor: pointer;
}
.use04_page #select_file .select_file_btn {
  background: #cccccc;
  padding: 10px;
}
.use04_page #select_file .select_file_name {
  display: inline-block;
  font-size: 1.3rem;
  margin-left: 10px;
  vertical-align: text-top;
}
.use04_page form {
  margin-top: 35px;
  max-width: 495px;
}
.use04_page textarea {
  font-size: 1.3rem;
  height: 120px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 10px;
}
.use04_page input[type=submit] {
  font-size: 1.3rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #d9073d;
  border-radius: 50px;
  border: none;
  padding: 16px 0 16px 1em;
  width: 100%;
  cursor: pointer;
  margin-top: 20px;
  letter-spacing: 1em;
}

@media screen and (max-width: 767px) {
  .use04_page form {
    margin-top: 5%;
    max-width: 100%;
  }
  .use04_page #select_file {
    margin-top: 3%;
  }
  .use04_page #select_file .select_file_name {
    font-size: 1.2rem;
    vertical-align: middle;
    margin-left: 2%;
    margin-bottom: 2px;
  }
  .use04_page input[type=submit] {
    font-size: 1.4rem;
    padding: 10px 0 10px 1em;
    margin-top: 4%;
  }
  .use04_page #select_file .select_file_btn img {
    width: 15px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  コーチ
* --------------------------------------------------------------------------------------------------*/
/*modalコメント*/
.c_lessoncomment2open #cboxLoadedContent {
  border-radius: 10px;
}
.c_lessoncomment2open iframe.cboxIframe {
  background-color: transparent;
}

.c_lesson_comment2_page .chat_log .chat_send {
  background-color: transparent;
}

.c_lessoncomment2open #cboxClose {
  width: 25px;
  height: 25px;
  top: 0;
  right: -35px;
  background: url("../img/common/close_btn03.ef3bf4498f13.png") no-repeat 0 0 !important;
  background-size: 25px !important;
  z-index: 999;
}

@media screen and (max-width: 767px) {
  /*modalコメント*/
  .c_lessoncomment2open #cboxLoadedContent {
    border-radius: 0px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  special_page kihon_page
* --------------------------------------------------------------------------------------------------*/
.check_back {
  display: none;
}

@media screen and (max-width: 767px) {
  .check_back {
    display: block;
    background-color: #fff;
    padding: 15px 4% 15px;
    margin: 0 auto 0;
    position: relative;
    z-index: 2;
  }
  .check_back:before {
    content: "";
    position: absolute;
    width: 92%;
    height: 2px;
    left: 4%;
    bottom: -2px;
    background-color: #e9e9e9;
  }
  .check_back p.back {
    float: left;
    margin-top: 5px;
    font-size: 26px;
  }
  .check_back p.back i {
    color: #bf8e01;
  }
  .check_back p.help {
    float: right;
  }
  .check_back p.help a {
    font-size: 30px;
    color: #bf8e01;
  }
  .check_back p.help a:hover {
    color: #d8a101;
  }
}
.add_mycourse {
  height: 70px;
}
.add_mycourse .add_button {
  width: 49%;
  max-width: 233px;
  padding: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  font-size: 1.4rem;
  text-align: center;
  color: #000;
  font-weight: bold;
  display: block;
  background-color: #f5f5f5;
  border: 2px solid #f5f5f5;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 10px;
  float: left;
}
.add_mycourse .add_message {
  display: block;
  height: 50px;
  margin: 20px 20px 20px 0;
  padding: 16px;
  color: #20c020;
  float: left;
}

@media screen and (max-width: 767px) {
  .m_custom_page .mycourse_name {
    font-size: 1.6rem;
    text-align: center;
    color: #000;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  kihon4_page
* --------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .kihon4_page .mycourse_name {
    font-size: 1.6rem;
    text-align: center;
    color: #000;
    font-weight: bold;
    position: absolute;
    top: 23px;
    right: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
  }

  .kihon4_page .mycourse_name {
    top: 3px;
  }
}
@media screen and (max-width: 320px) {
  .kihon4_page .mycourse_name {
    font-size: 1.4rem;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  rireki_page
* --------------------------------------------------------------------------------------------------*/
.rireki_page #lesson .txt {
  font-size: 1.4rem;
  line-height: 1.8;
}

/* ----------------------------------------------------------------------------------------------------
*  rireki2_page
* --------------------------------------------------------------------------------------------------*/
.rireki2_page #lesson .txt {
  font-size: 1.4rem;
  line-height: 1.8;
}

/* ----------------------------------------------------------------------------------------------------
*  news_page
* --------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------
*  news_page
* --------------------------------------------------------------------------------------------------*/
.news_page .banner + .date {
  background-color: #f5f5f5;
  padding: 15px 15px;
  font-size: 1.4rem;
  font-weight: bold;
  max-width: 494px;
  margin-top: 10px;
}
.news_page .banner + .date br {
  display: none;
}
.news_page .banner + .date.use-br br {
  display: block;
}
.news_page .news_ttl {
  font-size: 2rem;
  font-weight: bold;
  color: #d9073d;
  padding: 0 0 20px;
  border-bottom: 3px solid #e5e5e5;
}
.news_page .news_container {
  margin-top: 40px;
  margin-bottom: 50px;
}
.news_page .news_list_item {
  margin-top: 20px;
  position: relative;
}
.news_page .news_list_item_link {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.news_page .news_list_item_link:hover {
  opacity: 0.05;
  cursor: pointer;
}
.news_page .news_return_list_btn {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}
.news_page .news_return_list_btn a {
  padding: 10px 30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s ease;
}
.news_page .news_return_list_btn a:hover {
  background: rgba(255, 80, 76, 0.2);
}
.news_page .news_body {
  margin-top: 40px;
}
.news_page .news_body .date {
  font-size: 1rem;
  color: #848484;
  margin-bottom: 15px;
}
.news_page .news_body .news_list_ttl {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 12px;
}
.news_page .news_body .news_list_ttl span {
  color: #bf8e01;
}
.news_page .news_body .desc {
  font-size: 1.2rem;
  line-height: 1.8;
}
.news_page .news_body .news_list_ttl span.new {
  position: relative;
  top: -1px;
  display: inline-block;
  padding: 3px 10px;
  margin-right: 10px;
  background: #d9073d;
  color: #fff;
  font-size: 10px;
}
.news_page .news_body .article-contents {
  margin-top: 30px;
  padding: 20px;
}
.news_page .news_body .article-contents,
.news_page .news_body .article-contents * {
  line-height: 1.5;
}
.news_page .news_body .article-contents p,
.news_page .news_body .article-contents div {
  margin-top: 1em;
  margin-bottom: 1em;
}
.news_page .news_body .article-contents ul,
.news_page .news_body .article-contents ol {
  margin-top: 1em;
  margin-bottom: 1em;
}
.news_page .news_body .article-contents ul > li,
.news_page .news_body .article-contents ol > li {
  margin-left: 2em;
}
.news_page .news_body .article-contents ul > li > ul, .news_page .news_body .article-contents ul > li > ol,
.news_page .news_body .article-contents ol > li > ul,
.news_page .news_body .article-contents ol > li > ol {
  margin-top: 0;
}
.news_page .news_body .article-contents p:first-child,
.news_page .news_body .article-contents div:first-child,
.news_page .news_body .article-contents ul:first-child,
.news_page .news_body .article-contents ol:first-child {
  margin-top: 0;
}
.news_page .news_body .article-contents p:last-child,
.news_page .news_body .article-contents div:last-child,
.news_page .news_body .article-contents ul:last-child,
.news_page .news_body .article-contents ol:last-child {
  margin-bottom: 0;
}
.news_page .news_body .article-contents ul > li {
  list-style: disc;
}
.news_page .news_body .article-contents ul > li > ul > li {
  list-style: circle;
}
.news_page .news_body .article-contents ul > li > ul > li > ul > li {
  list-style: square;
}
.news_page .news_body .article-contents ol > li {
  list-style: decimal;
}
.news_page .news_body .article-contents ol > li > ol > li {
  list-style: lower-roman;
}

@media screen and (max-width: 767px) {
  .news_page .contents02 {
    background: #fff;
    padding-bottom: 6%;
  }
  .news_page .news_body li {
    margin-top: 10%;
  }
  .news_page .banner + .date {
    padding: 10px 2%;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 494px;
    margin-top: 3%;
  }
  .news_page .news_body .date {
    font-size: 1.1rem;
    margin-bottom: 1.5%;
  }
  .news_page .news_body .news_list_ttl {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 3%;
  }
}
@media screen and (max-width: 320px) {
  .news_page .banner + .date br {
    display: block;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  m_custom_page
* --------------------------------------------------------------------------------------------------*/
.m_custom_page #lesson .lesson_top .lesson_ttl {
  width: 100%;
}
.m_custom_page #lesson .txt {
  font-size: 1.4rem;
}
.m_custom_page #lesson .list li {
  position: relative;
  line-height: 1.8;
  padding-left: 1.5em;
}
.m_custom_page #lesson .list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0.5em;
  background: #000;
  width: 6px;
  height: 6px;
  border-radius: 100%;
}
.m_custom_page .contents02 .lesson_top_btn {
  display: none;
}
.m_custom_page .sinki_tuika .form {
  max-width: 495px;
  width: 100%;
}
.m_custom_page .sinki_tuika .form input[type=text] {
  font-size: 1.2rem;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 0px 20px;
  height: 50px;
  width: 100%;
  display: block;
}
.m_custom_page .sinki_tuika .form textarea {
  font-size: 1.2rem;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 0px 20px;
  height: 50px;
  width: 100%;
  display: block;
  padding: 20px 20px;
  min-width: 100%;
  max-width: 100%;
  height: 235px;
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .m_custom_page .lesson_top_btn {
    position: static;
    width: 108%;
    margin-left: -4%;
    margin-top: 8%;
  }
  .m_custom_page .lesson_top_btn a {
    height: auto;
    line-height: 1;
    padding: 20px 0;
  }
  .m_custom_page .contents02 .lesson_top_btn {
    display: block;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  m_custom2_page
* --------------------------------------------------------------------------------------------------*/
.m_custom2_page .sinki_tuika .form .submit {
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding: 15px 0;
  display: block;
  background: #d9073d;
  width: 100%;
  margin-top: 30px;
}
.m_custom2_page .sinki_tuika .form .submit.kettei {
  background: #bf8e01;
  margin-top: 20px;
}

@media screen and (max-width: 1023px) {
  .m_custom_page .sinki_tuika .form {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .m_custom2_page {
    background: #f5f5f5;
  }
  .m_custom2_page #lesson {
    padding-bottom: 0;
  }

  .m_custom_page .sinki_tuika .form input[type=text] {
    padding: 0px 3%;
    height: 45px;
  }
  .m_custom_page .sinki_tuika .form textarea {
    padding: 3%;
    height: 200px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  m_custom5_page
* --------------------------------------------------------------------------------------------------*/
.m_custom5_page .course_select .form {
  max-width: 495px;
  width: 100%;
}

.m_custom_page .course_select input {
  display: none;
}
.m_custom_page .course_select.sinki_tuika ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.m_custom_page .course_select ul li {
  width: 49%;
  margin-top: 20px;
}
.m_custom_page .course_select ul li:nth-child(even) {
  margin-left: 2%;
}
.m_custom_page .course_select label {
  display: table;
  height: 100%;
  width: 100%;
}
.m_custom_page .course_select label span {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: bold;
  padding: 14px 15px 14px 20px;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid #f5f5f5;
  background: #f5f5f5;
}

.m_custom5_page .course_select label input:checked + span,
.m_custom6_page .course_select label input:checked + span,
.m_custom7_page .course_select label input:checked + span {
  border: 2px solid #d9073d;
  color: #d9073d;
  background: #fff;
}

.m_custom_page .course_select .form .submit {
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding: 15px 0;
  display: block;
  background: #d9073d;
  width: 100%;
  margin-top: 30px;
}

@media screen and (max-width: 1023px) {
  .m_custom5_page .course_select .form {
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .m_custom_page .course_select label span {
    font-size: 1.2rem;
    border-radius: 5px;
  }

  .m_custom5_page .contents02 {
    padding-bottom: 6%;
  }
  .m_custom5_page .course_select label span {
    position: relative;
  }
  .m_custom5_page .course_select label span:after {
    content: "";
    position: absolute;
    height: 100%;
    width: calc(100% + 2px);
    left: -1px;
    bottom: -4px;
    background: #afafaf;
    z-index: -1;
    border-radius: 5px;
  }

  .m_custom7_page .course_select label span:after {
    content: "";
    position: absolute;
    height: 100%;
    width: calc(100% + 2px);
    left: -1px;
    bottom: -4px;
    background: #afafaf;
    z-index: -1;
    border-radius: 5px;
  }

  .m_custom5_page .course_select label input:checked + span:after,
.m_custom7_page .course_select label input:checked + span:after {
    display: none;
  }

  .m_custom5_page .mycourse_name {
    top: 3px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  m_custom6_page
* --------------------------------------------------------------------------------------------------*/
.m_custom6_page .sinki_tuika .form textarea {
  height: 95px;
}
.m_custom6_page .course_select label input:checked + span:before {
  content: "削除";
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  font-weight: bold;
  letter-spacing: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: rgba(130, 130, 130, 0.8);
  border-radius: 10px;
  padding-top: 15px;
}
.m_custom6_page .course_select .last_tuika a {
  font-size: 1.4rem;
  text-align: center;
  font-weight: bold;
  color: #bf8e01;
  display: block;
  border: 2px dotted #bf8e01;
  border-radius: 10px;
  padding: 14px 15px 14px 20px;
  position: relative;
}
.m_custom6_page .course_select .last_tuika a:before {
  content: "\f067";
  position: absolute;
  left: 15px;
  color: #bf8e01;
  font-family: "Line Awesome Free";
}
.m_custom6_page .course_select .btnarea {
  position: fixed;
  bottom: 0;
  right: 0;
  background: #cccccc;
  width: calc(100% - 110px - 360px);
  padding: 20px 30px 20px 30px;
}
.m_custom6_page .course_select .btnarea .submit {
  max-width: 495px;
  border-radius: 50px;
  margin-top: 0;
}
.m_custom6_page .course_select .btnarea div {
  max-width: 495px;
  margin-top: 20px;
}
.m_custom6_page .course_select .btnarea div .submit {
  color: #353535;
  background-color: #fff;
  width: 49%;
  float: left;
}
.m_custom6_page .course_select .btnarea div .submit + .submit {
  margin-left: 2%;
}

@media screen and (max-height: 800px) {
  .m_custom6_page .course_select .btnarea {
    position: absolute;
    width: calc(100% + 60px);
    bottom: -30px;
    left: -30px;
  }
  .m_custom6_page #lesson {
    padding-bottom: 162px;
  }
}
@media screen and (max-width: 1023px) {
  .m_custom6_page .course_select .btnarea {
    position: absolute;
    width: 104.6%;
    left: -2.3%;
    bottom: -30px;
    padding: 20px 1.5% 20px 1.5%;
  }
  .m_custom6_page #lesson {
    padding-bottom: 162px;
    min-height: 100%;
  }
  .m_custom6_page .course_select .btnarea .submit {
    max-width: 100%;
  }
  .m_custom6_page .course_select .btnarea div {
    max-width: 100%;
    margin-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  .m_custom6_page .course_select .last_tuika a {
    font-size: 1.2rem;
  }
  .m_custom6_page .course_select .last_tuika a:before {
    left: 5%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }
  .m_custom6_page .course_select label span:after {
    content: "";
    position: absolute;
    height: 100%;
    width: calc(100% + 2px);
    left: -1px;
    bottom: -4px;
    background: #afafaf;
    z-index: -1;
    border-radius: 5px;
  }
  .m_custom6_page .course_select label input:checked + span:after {
    display: none;
  }
  .m_custom6_page .course_select label input:checked + span:before {
    font-size: 1.2rem;
    border-radius: 5px;
    padding-top: 15px;
  }
  .m_custom6_page .course_select .btnarea {
    position: static;
    width: 108%;
    margin-left: -4%;
    margin-top: 10%;
    padding: 20px 4% 20px 4%;
  }
  .m_custom6_page #lesson {
    padding-bottom: 0;
  }
  .m_custom6_page .contents02 .lesson_top_btn {
    margin-top: 0;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  m_custom7_page
* --------------------------------------------------------------------------------------------------*/
.m_custom7_page .course_select {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e5e5e5;
}
.m_custom7_page #lesson .lesson_top {
  padding-top: 0;
}
.m_custom7_page .course_select .course_name {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
}
.m_custom7_page .course_select .course_txt {
  font-size: 1.2rem;
  line-height: 1.8;
  font-weight: bold;
}
.m_custom7_page .course_select .btnarea {
  margin-top: 40px;
}
.m_custom7_page .course_select .btnarea .submit {
  width: 48%;
  float: left;
  border-radius: 50px;
  letter-spacing: 2px;
  margin-top: 0;
}
.m_custom7_page .course_select .btnarea .submit.back {
  background-color: #bf8e01;
}
.m_custom7_page .course_select .btnarea .submit + .submit {
  margin-left: 4%;
}

@media screen and (max-width: 767px) {
  .m_custom_page .course_select .form .submit {
    padding: 9px 0;
  }
  .m_custom_page #lesson {
    padding-bottom: 0;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  オンラインレッスン
* --------------------------------------------------------------------------------------------------*/
.btn {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  display: block;
  border-radius: 10px;
  padding: 18px 17px 17px;
  cursor: pointer;
}
.btn.btn-sm {
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 1.2rem;
}
.btn.btn-gray-light {
  background-color: #f5f5f5;
  color: #353535;
}
.btn.btn-gray-light.btn-text-pale {
  color: #c1c1c1;
}
.btn.btn-gray {
  background-color: #d1d1d1;
}
.btn.btn-red {
  background-color: #d9073d;
  color: #fff;
}
.btn.btn-blue {
  color: #fff;
  background-color: #bf8e01;
}
.btn.btn-text-large {
  font-size: 1.4rem;
}
.btn.btn-text-small {
  font-size: 1.2rem;
}
.btn.btn-shrink {
  display: inline-block;
  padding-left: 2em;
  padding-right: 2em;
}

@media screen and (max-width: 767px) {
  .btn.btn-shrink {
    display: block;
    padding-left: 17px;
    padding-right: 17px;
  }
}
#online {
  padding-bottom: 30px;
}

.chrome #online {
  padding-bottom: 0;
}

#online .head-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 15px;
}
#online .head-buttons .btn {
  -ms-flex-preferred-size: 49%;
      flex-basis: 49%;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  margin-top: 20px;
}
#online .bottom-buttons {
  margin-top: 30px;
  margin-bottom: 30px;
}
#online .bottom-buttons .btn {
  margin-bottom: 15px;
  width: 100%;
}
#online .head .red_ttl {
  font-size: 2rem;
  font-weight: bold;
  color: #d9073d;
}
#online .head .lead {
  font-size: 1.4rem;
  line-height: 1.8;
  margin-top: 20px;
}
#online .head .col2_gray_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 15px;
}
#online .head .col2_gray_btn li {
  width: 49%;
  margin-top: 20px;
}
#online .head .col2_gray_btn li a {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  display: block;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 18px 0 17px;
}
#online .head .col2_gray_btn li span.add_favorite {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  display: block;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 18px 0 17px;
  color: #c1c1c1;
  cursor: default;
}
#online .top_btn {
  margin-top: 30px;
}
#online .top_btn a {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  display: block;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 18px 0 17px;
}
#online h3 {
  color: #d9073d;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.d_comment,
.d_contact {
  margin-top: 35px;
}

.d_comment .ttl,
.d_contact .ttl {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.d_comment .gray_box,
.d_contact .gray_box {
  padding: 20px 20px;
  background: #f5f5f5;
  border-radius: 5px;
}

.d_comment .gray_box + .gray_box,
.d_contact .gray_box + .gray_box {
  margin-top: 10px;
}

.d_comment .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.d_comment .date {
  font-size: 1.1rem;
  line-height: 1.4;
}

.d_contact .date {
  font-size: 1.1rem;
  line-height: 1.4;
}

.d_comment .txt,
.d_contact .txt {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 10px;
}

/*レッスン詳細　コーチに問合せ*/
.coach_contact {
  margin-top: 35px;
}
.coach_contact .ttl {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.coach_contact .gray_box {
  padding: 20px 20px;
  background: #f5f5f5;
  border-radius: 5px;
}
.coach_contact .txt {
  font-size: 1.3rem;
  line-height: 1.5;
}
.coach_contact textarea {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  min-height: 120px;
  resize: vertical;
  padding: 10px;
  margin-top: 20px;
}
.coach_contact input[type=submit] {
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #d9073d;
  border: none;
  padding: 16px 0 16px 0;
  width: 100%;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 5px;
}

@media screen and (max-width: 1023px) {
  #online {
    padding-bottom: 0;
  }

  .ipad #online {
    padding-bottom: 75px;
  }

  .android #online {
    padding-bottom: 105px;
  }
}
@media screen and (max-width: 767px) {
  .android #online {
    padding-bottom: 0;
  }

  #online .head {
    padding-top: 3%;
  }
  #online .head .lead {
    font-size: 1.1rem;
    margin-top: 4%;
  }
  #online .head .col2_gray_btn {
    margin-top: 0;
  }
  #online .head .col2_gray_btn li {
    margin-top: 5%;
    position: relative;
    width: 48.5%;
  }
  #online .head .col2_gray_btn li a {
    font-size: 1.2rem;
    padding: 13% 0 12%;
    border-radius: 8px;
  }
  #online .head .col2_gray_btn li a:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: -2px;
    left: 0;
    margin: auto;
    background-color: #afafaf;
    z-index: -1;
    border-radius: 10px;
  }
  #online .top_btn a {
    font-size: 1.2rem;
    position: relative;
    padding: 4.9% 0 4.8%;
  }
  #online .top_btn a:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: -2px;
    left: 0;
    margin: auto;
    background-color: #afafaf;
    z-index: -1;
    border-radius: 10px;
  }

  /*レッスン詳細終了*/
  .d_comment,
.d_contact {
    margin-top: 12%;
  }

  .d_comment .ttl,
.d_contact .ttl {
    font-size: 1.6rem;
  }

  .d_comment .gray_box,
.d_contact .gray_box {
    width: 108.4%;
    margin-left: -4.2%;
    border-radius: 0;
    padding: 10px;
  }

  .d_comment .gray_box + .gray_box,
.d_contact .gray_box + .gray_box {
    margin-top: 10px;
  }

  .d_comment .txt,
.d_contact .txt {
    font-size: 1.1rem;
    margin-top: 5px;
  }

  /*レッスン詳細　コーチに問合せ*/
  .coach_contact {
    margin-top: 12%;
  }
  .coach_contact .ttl {
    font-size: 1.6rem;
  }
  .coach_contact .gray_box {
    width: 108.4%;
    margin-left: -4.2%;
    border-radius: 0;
    padding: 10px;
  }
  .coach_contact .txt {
    font-size: 1.1rem;
  }
  .coach_contact textarea {
    min-height: 100px;
    margin-top: 20px;
  }
  .coach_contact input[type=submit] {
    font-size: 1.4rem;
    padding: 10px 0 10px 0;
    border-radius: 50px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  オンラインレッスン チケット購入
* --------------------------------------------------------------------------------------------------*/
.p_ticket {
  margin-top: 25px;
}
.p_ticket .list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #f5f5f5;
  border-radius: 5px;
  padding: 15px 20px;
}
.p_ticket .list li + li {
  margin-top: 5px;
}
.p_ticket .list li .type {
  width: calc(100% - 115px - 10px);
}
.p_ticket .list li .type .name {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: bold;
}
.p_ticket .list li .type .price {
  font-size: 1.3rem;
  line-height: 1.4;
  margin-top: 5px;
}
.p_ticket .list li .select {
  width: 115px;
  position: relative;
}
.p_ticket .list li .select::before {
  width: 1px;
  height: 50%;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  margin: auto;
  background: #cfcfcf;
  pointer-events: none;
}
.p_ticket .list li .select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -2px;
  width: 4px;
  height: 4px;
  border: 3px solid transparent;
  border-top: 5px solid #4f4f4f;
  pointer-events: none;
}
.p_ticket .list li select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 1.4rem;
  background: #fff;
  border-radius: 5px;
  padding: 10px 30px 10px 10px;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
  width: 115px;
}
.p_ticket .list li select::-ms-expand {
  display: none;
}
.p_ticket input[type=submit], .p_ticket input[type=button] {
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #d9073d;
  border: none;
  padding: 16px 0 16px 0;
  width: 100%;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .p_ticket .list li {
    width: 108.4%;
    margin-left: -4.2%;
    border-radius: 0;
    padding: 10px 4%;
  }
  .p_ticket .list li .type {
    width: calc(100% - 110px - 10px);
  }
  .p_ticket .list li .type .name {
    font-size: 1.2rem;
  }
  .p_ticket .list li .type .price {
    font-size: 1rem;
  }
  .p_ticket .list li .select {
    width: 110px;
  }
  .p_ticket .list li select {
    font-size: 1.2rem;
    width: 110px;
  }
  .p_ticket input[type=submit], .p_ticket input[type=button] {
    font-size: 1.4rem;
    padding: 10px 0 10px 0;
    border-radius: 50px;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  オンラインレッスン チケット利用状況
* --------------------------------------------------------------------------------------------------*/
.s_ticket {
  margin-top: 30px;
}
.s_ticket table.ticket-history {
  border-top: 2px solid #cfcfcf;
  border-bottom: 2px solid #cfcfcf;
  border-collapse: collapse;
  width: 100%;
}
.s_ticket table.ticket-history th {
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: bold;
  padding: 13px 5px;
}
.s_ticket table.ticket-history tr:last-child th {
  border-bottom: 2px solid #cfcfcf;
}
.s_ticket table.ticket-history td {
  font-size: 1.2rem;
  line-height: 1.2;
  padding: 10px 5px;
  border-top: 1px solid #cfcfcf;
}
.s_ticket table.ticket-history th:nth-of-type(3), .s_ticket table.ticket-history th:nth-of-type(4), .s_ticket table.ticket-history th:nth-of-type(5), .s_ticket table.ticket-history th:nth-of-type(6) {
  text-align: center;
}
.s_ticket table.ticket-history td:nth-of-type(3), .s_ticket table.ticket-history td:nth-of-type(4), .s_ticket table.ticket-history td:nth-of-type(5), .s_ticket table.ticket-history td:nth-of-type(6) {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .s_ticket {
    margin-top: 12%;
  }
  .s_ticket table.ticket-history th {
    font-size: 1rem;
    padding: 5px 5px;
  }
  .s_ticket table.ticket-history td {
    font-size: 1rem;
    padding: 3px 5px;
  }
  .s_ticket table.ticket-history th:nth-of-type(3), .s_ticket table.ticket-history th:nth-of-type(4), .s_ticket table.ticket-history th:nth-of-type(5), .s_ticket table.ticket-history th:nth-of-type(6) {
    min-width: 35px;
  }
  .s_ticket table.ticket-history td:nth-of-type(3), .s_ticket table.ticket-history td:nth-of-type(4), .s_ticket table.ticket-history td:nth-of-type(5), .s_ticket table.ticket-history td:nth-of-type(6) {
    min-width: 35px;
  }

  #online .head .col2_gray_btn.sp_col1_gray_btn {
    display: block;
  }
  #online .head .col2_gray_btn.sp_col1_gray_btn li {
    width: 100%;
  }
  #online .head .col2_gray_btn.sp_col1_gray_btn li a {
    padding: 4.5% 0 5%;
  }
}
/* ----------------------------------------------------------------------------------------------------
*  オンラインレッスン オンラインレッスンを依頼
* --------------------------------------------------------------------------------------------------*/
.user_head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.user_head .icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}
.user_head .left .first {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.r_c_detail .comment.two span:last-child {
  background: url("../img/common/star_icon01_white.b4f87e9d0ae0.png") no-repeat center center/100%;
}
.r_c_detail .comment.one span:last-child, .r_c_detail .comment.one span:nth-child(2) {
  background: url("../img/common/star_icon01_white.b4f87e9d0ae0.png") no-repeat center center/100%;
}

.user_head .name {
  font-size: 1.3rem;
  font-weight: bold;
  margin-right: 8px;
}
.user_head .comment {
  font-size: 1.1rem;
  margin-left: 3px;
}
.user_head .second {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 5px;
}
.user_head .second span {
  padding: 3px 0;
}
.user_head .second .real:before {
  content: "\f108";
  font-family: "Line Awesome Free";
  color: #d9073d;
  margin-right: 0.5rem;
}
.user_head .second .online:before {
  content: "\f108";
  font-family: "Line Awesome Free";
  color: #bf8e01;
  margin-right: 0.5rem;
}

.r_coach {
  margin-top: 47px;
}
.r_coach .sort {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 2px solid #cccccc;
  border-radius: 50px;
}
.r_coach .sort li {
  -ms-flex-preferred-size: 33%;
      flex-basis: 33%;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.r_coach .sort li a {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  display: block;
  text-align: center;
  border-radius: 50px;
  line-height: 42px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.r_coach .sort li a span {
  padding: 0;
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: right center;
  position: relative;
  z-index: 2;
}
.r_coach .sort li.active a {
  color: #fff;
  background-color: #bf8e01;
}
.r_coach .sort li.with-icon.icon-sort a span {
  margin-right: 1ex;
}
.r_coach .filter {
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.r_coach .filter .btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.r_coach .filter .btn + p {
  margin-left: 16px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.r_coach .select {
  margin-top: 25px;
}
.r_coach .select ul {
  border-bottom: 1px solid #cccccc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-column-gap: 25px;
     -moz-column-gap: 25px;
          column-gap: 25px;
  row-gap: 25px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding-bottom: 25px;
}
.r_coach .select ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-width: 280px;
}
.r_coach .select ul li .user_head {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.r_coach .select ul li .user_head .icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 140px;
  height: 140px;
}
.r_coach .select ul li ul.history {
  border: none;
  display: block;
  margin: auto;
}
.r_coach .select ul li ul.history li {
  display: list-item;
  margin: auto;
  min-width: unset;
}
.r_coach .select .txt {
  font-size: 1.2rem;
  line-height: 1.66;
  margin-top: 5px;
}
.r_coach .select .btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 15px;
}
.r_coach .select .btn_area p {
  width: 48.5%;
}
.r_coach .select .btn_area p a {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 5px;
  background: #696969;
  padding: 8px 5px;
}
.r_coach .select .btn_area p a:hover {
  cursor: pointer;
}
.r_coach .select .btn_area .entry a {
  background: #d9073d;
}

.ipad .r_coach .select ul li,
.mobile .r_coach .select ul li {
  padding-right: 0;
}

/*連絡画面*/
.r_c_detail {
  margin-top: 20px;
}
.r_c_detail .user_head {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #f5f5f5;
  border-radius: 5px;
  padding: 18px;
}
.r_c_detail .user_head .icon {
  width: 140px;
  height: 140px;
}
.r_c_detail .user_head .left {
  padding-top: 10px;
  width: calc(100% - 140px - 20px);
}
.r_c_detail .user_head .name {
  font-size: 1.6rem;
  color: #d9073d;
}
.r_c_detail .user_head .catch {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 12px 0 12px;
}
.r_c_detail .user_head .contact p {
  font-size: 1.1rem;
  display: block;
  background: #fff;
  padding: 7px 10px 6px;
  border-radius: 5px;
}
.r_c_detail .user_head .contact p span::before {
  font-family: "Line Awesome Free";
  color: #d9073d;
  font-weight: 900;
  margin-right: 0.6rem;
}
.r_c_detail .user_head .contact p.mail span::before {
  content: "\f0e0";
}
.r_c_detail .user_head .contact p.tel span::before {
  content: "\f10b";
}
.r_c_detail .user_head .contact p + p {
  margin-top: 5px;
}
.r_c_detail .user_head .contact p a {
  text-decoration: underline;
}
.r_c_detail .user_head .contact p a:hover {
  text-decoration: none;
}
.r_c_detail .detail {
  margin: 20px 0 25px;
}
.r_c_detail .detail p {
  font-size: 1.2rem;
  line-height: 1.66;
  margin-bottom: 15px;
}
.r_c_detail .detail img {
  margin-bottom: 15px;
}
.r_c_detail .comment .ttl {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}
.r_c_detail .comment ul {
  max-height: 300px;
  overflow-y: scroll;
  border-top: 2px solid #cfcfcf;
  border-bottom: 2px solid #cfcfcf;
}
.r_c_detail .comment ul li {
  padding: 15px 0;
}
.r_c_detail .comment ul li + li {
  border-top: 1px solid #ececec;
}
.r_c_detail .comment .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.r_c_detail .comment .top .date {
  font-size: 1.1rem;
  margin-left: 7px;
}
.r_c_detail .comment .txt {
  font-size: 1.2rem;
  line-height: 1.66;
  margin-top: 11px;
}

/*連絡画面 フォーム*/
.r_c_form {
  margin-top: 45px;
}
.r_c_form dt {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.r_c_form dd + dt {
  margin-top: 25px;
}
.r_c_form textarea {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  min-height: 120px;
  resize: vertical;
  padding: 10px;
}
.r_c_form input[type=submit] {
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #d9073d;
  border: none;
  padding: 16px 0 16px 0;
  width: 100%;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 5px;
}

/*評価とコメント*/
.o_eva {
  margin-top: 35px;
}
.o_eva .star_area .ttl {
  font-size: 1.4rem;
  font-weight: bold;
}
.o_eva .star_area .ttl span {
  font-size: 1.2rem;
  font-weight: normal;
}
.o_eva .star_area .star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
}
.o_eva .star_area .star label + label {
  margin-left: 5px;
}
.o_eva .star_area .star label input {
  display: none;
}
.o_eva .star_area .star label span {
  cursor: pointer;
  display: block;
  width: 20px;
  height: 20px;
  background: url("../img/common/star_icon01_white.b4f87e9d0ae0.png") no-repeat center center/100%;
}
.o_eva .star_area .star label input:checked + span {
  background: url("../img/common/star_icon01.3890a007cb14.png") no-repeat center center/100%;
}
.o_eva .comment {
  margin-top: 40px;
}
.o_eva .comment .ttl {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.o_eva .comment textarea {
  width: 100%;
  min-height: 140px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  resize: vertical;
}
.o_eva input[type=submit] {
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #d9073d;
  border: none;
  padding: 16px 0 16px 0;
  width: 100%;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 5px;
}

@media screen and (max-width: 1045px) {
  .r_coach .select ul {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 767px) {
  .r_coach .sort {
    border-width: 1px;
  }
  .r_coach .sort li a {
    font-size: 1.1rem;
  }
  .r_coach .sort li a span {
    padding-right: 14px;
    background-size: 13px auto;
  }
  .r_coach .select ul {
    padding-bottom: 10px;
  }

  /*連絡画面*/
  .r_c_detail .user_head {
    display: block;
  }
  .r_c_detail .user_head .icon {
    display: block;
    margin: auto;
  }
  .r_c_detail .user_head .left {
    padding-top: 0;
    margin-top: 5%;
    width: 100%;
  }
  .r_c_detail .user_head .left .first {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .r_c_detail .user_head .name {
    font-size: 2rem;
  }
  .r_c_detail .user_head .second {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .r_c_detail .user_head .catch {
    font-size: 1.1rem;
  }
  .r_c_detail .user_head .contact p {
    font-size: 1rem;
    padding: 5px 10px 4px;
  }
  .r_c_detail .user_head .contact p span::before {
    margin-top: -3px;
    width: 11px;
    height: 13px;
  }
  .r_c_detail .user_head .contact p.tel span::before {
    margin-top: -5px;
  }
  .r_c_detail .detail p {
    font-size: 1.1rem;
  }
  .r_c_detail .comment .ttl {
    font-size: 1.6rem;
  }
  .r_c_detail .comment .txt {
    font-size: 1.1rem;
  }

  /*連絡画面 フォーム*/
  .r_c_form {
    margin-top: 10%;
  }
  .r_c_form dt {
    font-size: 1.2rem;
  }
  .r_c_form dd + dt {
    margin-top: 5%;
  }
  .r_c_form textarea {
    min-height: 100px;
  }
  .r_c_form input[type=submit] {
    font-size: 1.4rem;
    padding: 10px 0 10px 0;
    border-radius: 50px;
  }

  .r_c_confirm input[type=submit] {
    font-size: 1.4rem;
    padding: 10px 0 10px 0;
    border-radius: 50px;
  }
  .r_c_confirm dl {
    padding: 8px 0;
  }
  .r_c_confirm dl dt,
.r_c_confirm dl dd {
    font-size: 1.1rem;
  }
  .r_c_confirm dl dt {
    padding: 0 8px;
    width: 130px;
  }
  .r_c_confirm dl dd {
    width: calc(100% - 130px);
  }
  .r_c_confirm .contact p {
    font-size: 1rem;
  }
  .r_c_confirm .check label {
    font-size: 1rem;
  }
  .r_c_confirm .check span {
    padding-left: 16px;
  }
  .r_c_confirm .check span::before {
    border: 1px solid #d9073d;
    top: -1px;
    width: 14px;
    height: 14px;
  }
  .r_c_confirm .check input:checked + span::after {
    top: 0px;
    left: 1px;
    width: 6px;
    height: 11px;
  }

  /*連絡画面 確認画面*/
  /*評価とコメント*/
  .o_eva {
    margin-top: 12%;
  }
  .o_eva input[type=submit] {
    font-size: 1.4rem;
    padding: 10px 0 10px 0;
    border-radius: 50px;
  }
  .o_eva .star_area .ttl {
    font-size: 1.2rem;
  }
  .o_eva .star_area .ttl span {
    font-size: 1.2rem;
  }
  .o_eva .comment {
    margin-top: 12%;
  }
  .o_eva .comment .ttl {
    font-size: 1.2rem;
  }
  .o_eva .comment textarea {
    min-height: 100px;
  }
}
.button {
  font-size: 1.3rem;
  text-align: center;
  font-weight: bold;
  border-radius: 50px;
  border: none;
  padding: 16px;
  width: 100%;
  cursor: pointer;
  margin-top: 20px;
  line-height: 1;
}
.button.button-letter-separated {
  letter-spacing: 1em;
}
.button.button-radius-sm {
  border-radius: 5px;
}
.button.button-red {
  color: #fff;
  background-color: #d9073d;
}
.button.button-blue {
  color: #fff;
  background-color: #bf8e01;
}
.button.button-d-block {
  display: block;
}
.button.button-pill {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  width: auto;
  margin-top: 0;
}

.button-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -20px;
}
.button-block .button {
  margin-left: 20px;
}

a.link-text {
  font-weight: bold;
  text-decoration: underline;
}
a.link-text:hover {
  font-weight: bold;
  text-decoration: none;
}

.text-multiline {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.text-red {
  color: #d9073d;
}
.text-red * {
  color: #d9073d;
}

.confirm-dialog {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
}
.confirm-dialog .confirm-dialog--dialog {
  margin: 0 auto;
  background: #fff;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 50%;
  margin-top: -100px;
  left: 50%;
  margin-left: -130px;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.confirm-dialog .confirm-dialog--dialog .confirm-dialog--dialog--header {
  background-color: #d9073d;
  color: #fff;
  padding: 10px 15px;
}
.confirm-dialog .confirm-dialog--dialog .confirm-dialog--dialog--body {
  padding: 30px 15px;
}

a.lesson_share {
  line-height: 24px;
}
a.lesson_share i {
  line-height: 1;
  font-size: 24px;
  vertical-align: bottom;
  color: #bf8e01;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a.lesson_share:hover i {
  color: #d8a101;
}

div.lesson_share--mobile_wrap {
  display: none;
}

@media screen and (max-width: 767px) {
  div.lesson_share--mobile_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 40px;
  }
}
.complete-switch {
  line-height: 30px;
  width: 90px;
  position: relative;
}
.complete-switch label {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: bold;
  height: 30px;
  border-radius: 15px;
}
.complete-switch label:after {
  content: "";
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 12px;
  position: absolute;
  top: 3px;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}
.complete-switch label span:after {
  display: block;
  font-size: 1.2rem;
  line-height: 30px;
  width: 60px;
  text-align: left;
  -webkit-transition: margin-right 0.5s, margin-left 0.5s;
  transition: margin-right 0.5s, margin-left 0.5s;
}
.complete-switch input[type=checkbox] {
  display: none;
}
.complete-switch input[type=checkbox] + label {
  background-color: #888888;
  color: #fff;
}
.complete-switch input[type=checkbox] + label:after {
  left: 3px;
}
.complete-switch input[type=checkbox] + label span:after {
  content: "マスター";
  margin-right: 0px;
  margin-left: 30px;
}
.complete-switch input[type=checkbox]:checked + label {
  background-color: #d9073d;
  color: #fff;
}
.complete-switch input[type=checkbox]:checked + label:after {
  left: 63px;
}
.complete-switch input[type=checkbox]:checked + label span:after {
  content: "マスター";
  margin-right: 24px;
  margin-left: 6px;
}

#colorbox.cbox-members-card #cboxLoadedContent {
  border-radius: 15px;
}
#colorbox.cbox-members-card #cboxLoadedContent .cboxPhoto {
  width: 100% !important;
  height: 100% !important;
}

.errorlist {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
.errorlist li {
  color: #d9073d;
}

div.form,
form.form {
  margin-top: 35px;
  max-width: 495px;
}
div.form label,
form.form label {
  font-weight: bold;
}
div.form input[type=checkbox] + label,
form.form input[type=checkbox] + label {
  font-weight: normal;
}

.field_container {
  margin-top: 10px;
  margin-bottom: 25px;
  line-height: 1.5;
}
.field_container > label {
  display: block;
  margin-bottom: 10px;
}
.field_container input[type=text],
.field_container input[type=email],
.field_container input[type=tel],
.field_container input[type=number],
.field_container select {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  font-size: 1.2rem;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  background-color: #fff;
}
.field_container textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 5px;
  border: 1px solid #cccccc;
}
.field_container .image-container .file-upload {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}
.field_container .image-container .file-upload .clearable-file-input input[type=checkbox] {
  -webkit-appearance: checkbox;
     -moz-appearance: checkbox;
          appearance: checkbox;
}
.field_container input[type=checkbox] {
  -webkit-appearance: checkbox;
     -moz-appearance: checkbox;
          appearance: checkbox;
  margin-top: 1px;
  margin-bottom: 1px;
  vertical-align: text-top;
}
.field_container input[type=checkbox] + label {
  display: inline;
  margin-bottom: 0;
}
.field_container .help {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 80%;
  line-height: 2;
}
.field_container .errorlist {
  margin-top: 10px;
}
.field_container.field_container_col2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field_container.field_container_col2 div > label {
  display: block;
  margin-bottom: 10px;
}
.field_container.with_button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.field_container.with_button input[type=text],
.field_container.with_button input[type=email],
.field_container.with_button input[type=tel],
.field_container.with_button input[type=number] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.field_container.with_button input[type=text] + button[type=reset],
.field_container.with_button input[type=email] + button[type=reset],
.field_container.with_button input[type=tel] + button[type=reset],
.field_container.with_button input[type=number] + button[type=reset] {
  height: 50px;
  border: solid 1px #bf8e01;
  color: #bf8e01;
  white-space: nowrap;
  padding: 0 1em;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.file_upload_container {
  display: contents;
}
.file_upload_container input[type=file] {
  display: none;
}
.file_upload_container div.fade {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.file_upload_container div.fade button.select_file_btn {
  background-color: #ccc;
  padding: 10px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.file_upload_container div.fade .select_file_name {
  font-size: 1.3rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file_upload_container div.fade .select_file_size {
  font-size: 1.3rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  white-space: nowrap;
  padding-right: 10px;
}

.chip {
  padding: 1ex;
  border-radius: 5px;
}
.chip.chip-red {
  background-color: #d9073d;
  color: white;
}