@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
/*base is →　! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */
@import url(https://fonts.googleapis.com/css2?family=Roboto&family=Viga&display=swap);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

article, aside, footer, header, nav, section, figcaption, figure, main {
  display: block; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

img {
  border-style: none;
  vertical-align: top; }

table {
  border-collapse: collapse; }

button, input, select, textarea {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; }

textarea {
  overflow: auto;
  resize: vertical; }

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0; }

a, area, button, input, label, select, summary, textarea, [tabindex] {
  touch-action: manipulation; }

/* --------------- variables --------------------- */
/* Break Point */
/* Color */
/*受講者用カラー*/
/*評価者用カラー*/
/* Font */
@media screen and (max-width: 600px) {
  body {
    font-family: "Roboto", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 15px; }
    body.orange {
      --thmeCloro: #FF8200; }
    body.blue {
      --thmeCloro: #265491; }
  /* login
----------------------------------------*/
  .login {
    display: flex;
    height: 100vh;
    flex-direction: column; }
  .loginLogo {
    position: absolute;
    display: flex;
    width: 50%;
    background-color: var(--thmeCloro);
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px; }
    .loginLogo p {
      font-family: "Viga", "sans-serif", "meiryo";
      color: #ffffff;
      font-size: 44px;
      text-align: center; }
      .loginLogo p span {
        display: block;
        font-size: 15px;
        text-align: center; }
    .loginLogo img {
      width: 60vw; }
  .loginCol {
    position: absolute;
    top: 200px;
    display: flex;
    width: 50%;
    margin-top: 20px;
    justify-content: center;
    width: 100%;
    height: 65%; }
  .loginWrap {
    width: 70%;
    max-width: 335px;
    margin: 0 auto;
    width: 90%; }
  .loginWrap .errorTxt {
    border: none;
    background: none;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--thmeCloro);
    margin-bottom: 30px;
    margin-bottom: 15px; }
  .loginWrap .forgotpass {
    text-align: center;
    margin-top: 15px; }
    .loginWrap .forgotpass a {
      text-decoration: none;
      display: inline-block;
      color: #000;
      position: relative; }
      .loginWrap .forgotpass a:after {
        content: '';
        width: 6px;
        height: 6px;
        border: 0px;
        border-top: solid 1px var(--thmeCloro);
        border-right: solid 1px var(--thmeCloro);
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        position: absolute;
        top: calc(50% - 3px);
        right: -15px; }
  .loginTtl {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
    margin-bottom: 15px; }
  .loginForm dl {
    margin-bottom: 40px;
    margin-bottom: 20px; }
  .loginForm dd:not(:last-child) {
    margin-bottom: 30px;
    margin-bottom: 15px; }
  .loginForm dd input {
    font-size: 18px;
    line-height: 1;
    width: 100%;
    padding: 14px 24px;
    color: #333333;
    border: none;
    outline: none;
    background-color: #f2f2f2;
    border-radius: 0; }
  .loginForm dd input::-webkit-input-placeholder {
    color: #ababab; }
  .loginForm dd input::-moz-placeholder {
    color: #ababab; }
  .loginForm dd input::-ms-input-placeholder {
    color: #ababab; }
  .loginForm dd input::placeholder {
    color: #ababab; }
  .loginForm dd input:focus::-webkit-input-placeholder {
    color: transparent; }
  .loginForm dd input:focus::-moz-placeholder {
    color: transparent; }
  .loginForm dd input:focus::-ms-input-placeholder {
    color: transparent; }
  .loginForm dd input:focus::placeholder {
    color: transparent; }
  .loginBtnWrap {
    position: relative;
    display: table;
    min-width: 200px;
    margin: auto; }
    .loginBtnWrap.top::before {
      content: none; }
    .loginBtnWrap.top .loginBtn {
      background-color: #fff;
      display: inline-block;
      text-decoration: none;
      text-align: center;
      position: relative;
      font-size: 18px; }
      .loginBtnWrap.top .loginBtn:not(:first-of-type) {
        margin-top: 40px;
        margin-top: 30px; }
      .loginBtnWrap.top .loginBtn.jukou {
        color: #FF8200;
        border: 1px solid #FF8200; }
        .loginBtnWrap.top .loginBtn.jukou::before {
          position: absolute;
          z-index: 2;
          top: 0;
          right: 24px;
          bottom: 0;
          display: block;
          width: 8px;
          height: 8px;
          margin: auto;
          content: '';
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #FF8200;
          border-right: 1px solid #FF8200; }
      .loginBtnWrap.top .loginBtn.hyouka {
        color: #265491;
        border: 1px solid #265491; }
        .loginBtnWrap.top .loginBtn.hyouka::before {
          position: absolute;
          z-index: 2;
          top: 0;
          right: 24px;
          bottom: 0;
          display: block;
          width: 8px;
          height: 8px;
          margin: auto;
          content: '';
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #265491;
          border-right: 1px solid #265491; }
  .loginBtnWrap::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 24px;
    bottom: 0;
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff; }
  .loginBtn {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 20px 16px;
    cursor: pointer;
    transition: 0.3s;
    color: #ffffff;
    border: none;
    border-radius: 40px;
    outline: none;
    background-color: var(--thmeCloro); }
  .loginBtn:hover {
    opacity: 0.7; }
  .modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999; }
    .modal.scroll {
      overflow: auto; }
  .modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%; }
  .modal__content {
    background: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 10px;
    border: 1px solid var(--thmeCloro);
    width: 90%; }
    .modal__content.scroll {
      width: 100%;
      left: inherit;
      position: relative;
      top: inherit;
      -webkit-transform: none;
              transform: none;
      border-radius: 0px; }
    .modal__content .title {
      text-align: center;
      font-weight: bold;
      border-bottom: 1px solid #DEDEDB;
      padding: 20px 10px;
      font-size: 22px; }
    #modal_item_comment .modal__content .title {
      text-align: left; }
    #modal_item_evaluation .modal__content .title {
      text-align: left; }
    #modal_item_evaluation select {
      padding-left: 15px;
      padding-right: 15px;
      width: 100px; }
    #modal_item_evaluation .text {
      display: flex;
      height: 35px; }
    #modal_item_evaluation .selectlabel {
      padding-top: 8px; }
      .modal__content .title .tac {
        text-align: center; }
    .modal__content .content {
      padding: 10px 10px; }
      .modal__content .content ul {
        list-style: none; }
        .modal__content .content ul li {
          display: flex; }
        .modal__content .content .grayBg ul li {
          display: inline-block; }
          .modal__content .content ul li + li {
            margin-top: 10px; }
          .modal__content .content ul li span.tit {
            font-weight: 700;
            width: 100px; }
          .modal__content .content ul li span.comment {
            flex: 1; }
      .modal__content .content .text.tac {
        text-align: center; }
      .modal__content .content .text span.bigTxt {
        font-size: 1.3em; }
      .modal__content .content .text span.orange {
        color: var(--thmeCloro); }
      .modal__content .content .input {
        width: 100%;
        margin-top: 10px; }
        .modal__content .content .input input[type=text] {
          width: 100%;
          height: 43px;
          background-color: #F2F2F2;
          border: none;
          padding: 0 10px; }
        .modal__content .content .input textarea {
          width: 100%;
          height: 126px;
          background-color: #F2F2F2;
          border: none;
          padding: 10px; }
        .modal__content .content .input .error {
          color: var(--thmeCloro); }
      .modal__content .content .grayBg {
        background-color: #F2F2F2;
        padding: 1em; }
        .modal__content .content .grayBg ul {
          padding-left: 1em;
          font-size: 1.3em;
          font-weight: 700; }
          .modal__content .content .grayBg ul span.tit {
            display: inline-block;
            width: 170px;
            margin-right: 1em; }
          .modal__content .content .grayBg ul span.orange {
            color: var(--thmeCloro); }
    .modal__content .js-modal-close {
      color: #fff;
      font-size: 30px;
      position: absolute;
      top: -45px;
      right: 0px;
      text-decoration: none; }
    .modal__content .js-modal-close.close_btn {
      position: static;
      font-size: 16px; }
    .modal__content .form_btn_wrap {
      text-align: center;
      margin-top: 30px; }
      .modal__content .form_btn_wrap .back_btn {
        text-decoration: none;
        display: inline-block;
        border: 2px solid var(--thmeCloro);
        color: var(--thmeCloro);
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        padding: 10px 40px;
        position: relative;
        box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.62);
        /*
			&:before{
				content: '';
				width: 6px;
				height: 6px;
				border: 0px;
				border-bottom: solid 2px var(--thmeCloro);
				border-left: solid 2px var(--thmeCloro);
				transform: rotate(45deg);
				position: absolute;
				top: calc(50% - 3px);
				left: 15px;
			}
			*/ }
        .modal__content .form_btn_wrap .back_btn.themeColor {
          background-color: var(--thmeCloro);
          color: #fff; }
        .modal__content .form_btn_wrap .back_btn:hover {
          opacity: .7; }
      .modal__content .form_btn_wrap .start_btn {
        text-decoration: none;
        display: inline-block;
        border: 1px solid var(--thmeCloro);
        background-color: var(--thmeCloro);
        color: #fff;
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        padding: 10px 40px;
        position: relative;
        box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.62);
        /*
			&:before{
				content: '';
				width: 6px;
				height: 6px;
				border: 0px;
				border-top: solid 2px #fff;
				border-right: solid 2px #fff;
				transform: rotate(45deg);
				position: absolute;
				top: calc(50% - 3px);
				right: 15px;
			}
			*/ }
        .modal__content .form_btn_wrap .start_btn.offBtn {
          background-color: #DEDEDB;
          border-color: #DEDEDB;
          color: #8E8E8E; }
        .modal__content .form_btn_wrap .start_btn:hover {
          opacity: .7; }
  input[type='text'].error_input,
  input[type='date'].error_input,
  input[type='number'].error_input {
    border: 1px solid red;
    background: #f8eaea; }
  .btn {
    width: 179px;
    height: 44px;
    border: 1px solid var(--thmeCloro);
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: var(--thmeCloro);
    text-decoration: none;
    background-color: #fff; }
    .btn .icon {
      width: 14px;
      height: 14px;
      fill: var(--thmeCloro);
      margin-right: 10px; }
  header {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 50px;
    background-color: var(--thmeCloro);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5); }
    header .inner {
      width: 95%;
      height: 50px;
      margin: 0 auto;
      position: relative; }
      header .inner h1 {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400; }
        header .inner h1 a {
          color: #fff;
          text-decoration: none; }
          header .inner h1 a:hover {
            text-decoration: underline; }
        header .inner h1 .icon {
          vertical-align: middle;
          display: inline-block;
          margin-right: .8em;
          width: 15px;
          height: 15px; }
          header .inner h1 .icon.arrow {
            width: 8px;
            height: 15px;
            fill: #fff; }
      header .inner #menuBtn {
        width: 30px;
        height: 30px;
        border: 1px solid #fff;
        position: absolute;
        top: 10px;
        right: 10px; }
        header .inner #menuBtn span {
          display: block;
          width: 16px;
          height: 2px;
          background-color: #fff;
          position: absolute;
          left: 6px;
          transition: all .3s; }
          header .inner #menuBtn span:nth-of-type(1) {
            top: 6px; }
          header .inner #menuBtn span:nth-of-type(2) {
            top: 13px; }
          header .inner #menuBtn span:nth-of-type(3) {
            top: 20px; }
        header .inner #menuBtn.isOpen span:nth-of-type(1) {
          top: 13px;
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg); }
        header .inner #menuBtn.isOpen span:nth-of-type(2) {
          opacity: 0; }
        header .inner #menuBtn.isOpen span:nth-of-type(3) {
          top: 13px;
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg); }
      header .inner nav {
        position: fixed;
        top: 50px;
        left: 100%;
        background-color: #f6f5f0;
        width: 100vw;
        padding-top: 40px;
        padding-bottom: 30px;
        transition: all .3s; }
        header .inner nav ul {
          width: 90%;
          margin: 0 auto;
          list-style: none; }
          header .inner nav ul li {
            font-size: 20px;
            color: #000;
            border-bottom: 1px solid #E6E6E2; }
            header .inner nav ul li.userInfo {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-bottom: 20px; }
              header .inner nav ul li.userInfo .medal {
                width: 20%; }
                header .inner nav ul li.userInfo .medal img {
                  width: 100%; }
              header .inner nav ul li.userInfo .txt {
                width: 70%; }
                header .inner nav ul li.userInfo .txt span {
                  display: block; }
                  header .inner nav ul li.userInfo .txt span#user {
                    font-size: 18px; }
                  header .inner nav ul li.userInfo .txt span#division {
                    font-size: 14px; }
            header .inner nav ul li a {
              color: #000;
              display: flex;
              padding: 20px 15px;
              font-size: 16px;
              text-decoration: none;
              align-items: center; }
              header .inner nav ul li a .icon {
                width: 18px;
                height: 18px;
                fill: #8E8E8E;
                margin-right: 5px; }
        header .inner nav.isOpen {
          left: 0; }
        header .inner nav .menuClose {
          margin: 30px auto 0; }
  footer {
    width: 100%;
    height: 65px;
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    margin-top: 40px; }
    footer .inner {
      width: 100%;
      height: 65px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      footer .inner .copy {
        font-size: 10px; }
  .subHeader {
    background-color: #3868A8;
    position: relative;
    z-index: 0; }
    .subHeader .inner {
      width: 90%;
      margin: 0 auto;
      padding: 10px 0 15px; }
      .subHeader .inner.acd {
        display: none; }
      .subHeader .inner dl {
        display: flex;
        align-items: flex-start;
        color: #fff;
        font-size: 15px;
        vertical-align: middle;
        margin-right: 2em;
        margin-top: 10px; }
        .subHeader .inner dl dt {
          color: #7C9FCE;
          font-size: 13px;
          white-space: nowrap; }
          .subHeader .inner dl dt .icon {
            height: 15px;
            width: 15px;
            fill: #7C9FCE;
            display: inline-block;
            vertical-align: middle; }
        .subHeader .inner dl dd {
          margin-left: 1em; }
        .subHeader .inner dl.full {
          width: 100%;
          margin-right: 0; }
    .subHeader .acdBtn {
      text-align: center;
      padding: 5px 0; }
      .subHeader .acdBtn .icon {
        width: 20px;
        height: 15px;
        fill: #fff;
        display: block;
        margin: 0 auto;
        transition: all .3s; }
      .subHeader .acdBtn.isOpen .icon {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg); }
  #headWrap {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; }
  .topMovie.pt0 {
    padding-top: 0; }
  .topMovie.pb0 {
    padding-bottom: 0; }
  .topMovie {
    background-color: #28323C;
    padding: 10px 0 10px; }
    .topMovie.blueBG {
      background-color: #69A4DF; }
    .topMovie .movieTab {
      width: 90%;
      margin: 0 auto; }
      .topMovie .movieTab ul {
        list-style: none;
        display: flex;
        border-bottom: 3px solid #EC670B; }
        .topMovie .movieTab ul li {
          width: 50%;
          background-color: #475058;
          color: #fff;
          line-height: 1;
          text-align: center;
          cursor: pointer;
          padding: 5px 0; }
          .topMovie .movieTab ul li.on {
            background-color: #EC670B; }
    .topMovie .postMovie {
      display: none; }
    .topMovie .videoWrap {
      width: 90%;
      margin: 0 auto;
      position: relative; }
      .topMovie .videoWrap video {
        width: 100%;
        height: auto; }
      .topMovie .videoWrap .noVideo {
        height: 261px;
        background-color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center; }
        .topMovie .videoWrap .noVideo.autoHeight {
          height: auto; }
      .topMovie .videoWrap .setting {
        width: 35px;
        height: 35px;
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        bottom: -30px;
        right: 0;
        border-radius: 0 0 5px 5px;
        z-index: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .3s;
        padding-bottom: 5px; }
        .topMovie .videoWrap .setting .haguruma {
          fill: #fff;
          width: 25px;
          height: 25px;
          order: 2; }
        .topMovie .videoWrap .setting .diameter {
          order: 1;
          overflow: hidden;
          display: block;
          display: none;
          opacity: 0;
          transition: all .3s; }
          .topMovie .videoWrap .setting .diameter .settingBtn {
            padding-top: 4px; }
            .topMovie .videoWrap .setting .diameter .settingBtn span {
              width: 40px;
              display: block; }
              .topMovie .videoWrap .setting .diameter .settingBtn span .icon {
                width: 40px;
                height: 30px;
                margin-bottom: 8px;
                fill: #999; }
        .topMovie .videoWrap .setting.open {
          width: 50px;
          height: auto;
          border-radius: 5px; }
          .topMovie .videoWrap .setting.open .diameter {
            display: block;
            opacity: 1; }
      .topMovie .videoWrap .likes {
        position: absolute;
        top: 0;
        right: 0;
        width: 87px; }
        .topMovie .videoWrap .likes ul {
          list-style: none; }
          .topMovie .videoWrap .likes ul li {
            background-color: rgba(236, 103, 11, 0.6);
            color: #fff;
            display: flex;
            align-items: center;
            width: 87px;
            padding: 5px; }
            .topMovie .videoWrap .likes ul li + li {
              margin-top: 1px; }
            .topMovie .videoWrap .likes ul li .icon {
              width: 18px;
              height: 14px;
              fill: #fff; }
            .topMovie .videoWrap .likes ul li span {
              font-size: 10px;
              padding-left: 1em; }
            .topMovie .videoWrap .likes ul li:nth-of-type(even) {
              background-color: rgba(48, 159, 209, 0.6); }
  .likeArea {
    display: flex;
    justify-content: center;
    margin-top: 5px; }
    .likeArea .item {
      display: flex;
      align-items: center; }
      .likeArea .item + .item {
        margin-left: 30px; }
      .likeArea .item .likeBtn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        ox-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); }
        .likeArea .item .likeBtn .iine {
          font-size: 10px; }
      .likeArea .item .count {
        color: #fff;
        font-size: 18px;
        margin-left: 10px; }
      .likeArea .item.like .likeBtn {
        color: #EC670B; }
        .likeArea .item.like .likeBtn .icon {
          fill: #EC670B;
          width: 21px;
          height: 23px; }
      .likeArea .item.dislike .likeBtn {
        color: #309FD1; }
        .likeArea .item.dislike .likeBtn .icon {
          fill: #309FD1;
          width: 30px;
          height: 18px; }
      .likeArea .item.delete a {
        text-decoration: none;
        color: #fff; }
      .likeArea .item.delete .likeBtn {
        background-color: transparent;
        box-shadow: 0 0 0 transparent;
        width: 21px;
        height: 24px;
        border-radius: 0; }
        .likeArea .item.delete .likeBtn .icon {
          width: 21px;
          height: 24px;
          fill: #fff; }
  #topInfo {
    width: 100%;
    background-color: #F7F7EF;
    background-image: url(../images/grid.png);
    padding: 30px 0; }
    #topInfo .inner {
      background-color: #fff;
      width: 90%;
      border-radius: 10px;
      margin: 0 auto;
      justify-content: space-between;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
      #topInfo .inner .nowDivision {
        display: flex;
        align-items: center;
        padding: 30px 15px 15px; }
        #topInfo .inner .nowDivision .division {
          width: 48px; }
          #topInfo .inner .nowDivision .division img {
            width: 48px;
            height: auto; }
        #topInfo .inner .nowDivision .detail {
          margin-left: 20px; }
          #topInfo .inner .nowDivision .detail .name {
            font-size: 22px; }
          #topInfo .inner .nowDivision .detail .now, #topInfo .inner .nowDivision .detail .next {
            font-size: 14px; }
          #topInfo .inner .nowDivision .detail .bronz {
            color: #D4863C; }
          #topInfo .inner .nowDivision .detail .silver {
            color: #ADAEAE; }
          #topInfo .inner .nowDivision .detail .gold {
            color: #D0AA50; }
          #topInfo .inner .nowDivision .detail .rookie {
            color: #5FA254; }
      #topInfo .inner .count {
        display: flex; }
        #topInfo .inner .count .ended, #topInfo .inner .count .leftover {
          border-left: 1px solid #EFEFEF;
          border-top: 1px solid #EFEFEF;
          padding: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          line-height: 1;
          width: 50%; }
          #topInfo .inner .count .ended .title, #topInfo .inner .count .leftover .title {
            font-size: 13px;
            color: #8E8E8E; }
          #topInfo .inner .count .ended .num, #topInfo .inner .count .leftover .num {
            font-size: 50px;
            color: #FF8200; }
            #topInfo .inner .count .ended .num span, #topInfo .inner .count .leftover .num span {
              font-size: 13px;
              color: #8E8E8E; }
        #topInfo .inner .count .ended .num {
          color: #CFC385; }
  #movieInfo {
    width: 100%;
    background-color: #F7F7EF;
    padding: 10px 0; }
    #movieInfo.blue {
      background-color: #EAF0F9; }
    #movieInfo .inner {
      width: 90%;
      margin: 0 auto; }
      #movieInfo .inner .txt > span {
        display: block;
        font-size: 14px;
        color: #8E8E8E;
        font-weight: 700; }
      #movieInfo .inner .txt h2 {
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        margin-top: 5px; }
      #movieInfo .inner .txt .myDivision {
        display: flex;
        align-items: center;
        margin-top: 10px; }
        #movieInfo .inner .txt .myDivision .medal {
          width: 21px; }
          #movieInfo .inner .txt .myDivision .medal img {
            width: 100%;
            height: auto; }
        #movieInfo .inner .txt .myDivision p {
          font-size: 15px;
          font-weight: 700;
          padding-left: .5em;
          line-height: 1; }
      #movieInfo .inner .txt .cat {
        margin-top: 10px; }
        #movieInfo .inner .txt .cat dl {
          display: flex;
          font-size: 15px; }
          #movieInfo .inner .txt .cat dl dt {
            margin-right: 1em; }
          #movieInfo .inner .txt .cat dl dd {
            color: #8E8E8E; }
          #movieInfo .inner .txt .cat dl dt.orange {
            color: #EC670B;
            font-weight: bold; }
          #movieInfo .inner .txt .cat dl dd.orange {
            color: #EC670B;
            font-weight: bold; }
      #movieInfo .inner .result {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: 1px solid #fff;
        margin-top: 10px;
        padding-top: 10px; }
        #movieInfo .inner .result .title {
          font-size: 20px;
          font-weight: 700;
          color: #0268B2;
          display: flex;
          align-items: center;
          width: 40%; }
        #movieInfo .inner .result .success {
          width: 60%;
          display: flex;
          align-items: center;
          padding-left: 20px; }
          #movieInfo .inner .result .success .icon {
            width: 51px;
            height: 51px;
            fill: #0268B2; }
        #movieInfo .inner .result .likes {
          border: 1px solid #DEDEDB;
          background-color: #fff;
          width: 30%;
          margin-top: 10px; }
          #movieInfo .inner .result .likes .item {
            display: flex;
            align-items: center;
            padding: 0 10px 10px 10px; }
            #movieInfo .inner .result .likes .item + .item {
              border-top: 1px solid #DEDEDB; }
            #movieInfo .inner .result .likes .item.like .likeBtn {
              color: #EC670B; }
              #movieInfo .inner .result .likes .item.like .likeBtn .icon {
                fill: #EC670B; }
            #movieInfo .inner .result .likes .item.like .count {
              color: #EC670B; }
            #movieInfo .inner .result .likes .item.dislike .likeBtn {
              color: #0268B2; }
              #movieInfo .inner .result .likes .item.dislike .likeBtn .icon {
                fill: #0268B2; }
            #movieInfo .inner .result .likes .item.dislike .count {
              color: #0268B2; }
            #movieInfo .inner .result .likes .item .likeBtn {
              width: 40px;
              height: 35px; }
              #movieInfo .inner .result .likes .item .likeBtn .iine {
                font-size: 10px;
                line-height: 1; }
              #movieInfo .inner .result .likes .item .likeBtn .icon {
                width: 30px;
                height: 22px; }
            #movieInfo .inner .result .likes .item .count {
              padding-top: 15px;
              font-size: 22px;
              line-height: 1; }
        #movieInfo .inner .result .points {
          width: 70%;
          display: flex;
          flex-wrap: wrap;
          border: 1px solid #DEDEDB;
          border-width: 1px 1px 1px 0;
          background-color: #fff;
          margin-top: 10px; }
          #movieInfo .inner .result .points .line {
            display: flex;
            align-items: center;
            line-height: 1;
            padding: 0 10px;
            width: 100%;
            border-bottom: 1px solid #DEDEDB; }
            #movieInfo .inner .result .points .line .tit {
              font-size: 12px;
              color: #8E8E8E;
              padding: 10px 0; }
            #movieInfo .inner .result .points .line .point {
              font-size: 18px;
              margin-left: 15px;
              font-weight: 700; }
            #movieInfo .inner .result .points .line .limit {
              font-size: 14px;
              height: 18px;
              padding-top: 4px;
              margin-left: 3px; }
          #movieInfo .inner .result .points .member {
            display: flex;
            width: calc(100% / 2); }
            #movieInfo .inner .result .points .member + .member {
              width: calc(100% / 2);
              border-left: 1px solid #DEDEDB; }
            #movieInfo .inner .result .points .member.blue {
              background-color: #E6F7FF;
              color: #0089C7; }
            #movieInfo .inner .result .points .member.orange {
              background-color: #FFFAF5;
              color: #EC670B; }
            #movieInfo .inner .result .points .member .memberInner {
              padding: 10px;
              text-align: center; }
              #movieInfo .inner .result .points .member .memberInner span {
                display: block; }
                #movieInfo .inner .result .points .member .memberInner span.person {
                  font-size: 10px; }
              #movieInfo .inner .result .points .member .memberInner .point {
                font-size: 18px; }
                #movieInfo .inner .result .points .member .memberInner .point a.comment .icon {
                  width: 11px;
                  height: 10px;
                  fill: #EC670B; }
            #movieInfo .inner .result .points .member .edit {
              padding: 10px 10px 10px 0; }
              #movieInfo .inner .result .points .member .edit a {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #0268B2;
                border-radius: 10px;
                background-color: #fff; }
                #movieInfo .inner .result .points .member .edit a .icon {
                  width: 15px;
                  height: 15px; }
  .trainingList {
    width: 90%;
    margin: 0 auto; }
    .trainingList .listHead {
      padding-top: 40px; }
      .trainingList .listHead h2 {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
        vertical-align: baseline; }
        .trainingList .listHead h2 .medal {
          width: 30px;
          display: inline-block;
          margin-right: 10px;
          -webkit-transform: translateY(10px);
                  transform: translateY(10px);
          vertical-align: baseline; }
          .trainingList .listHead h2 .medal img {
            width: 30px;
            height: auto;
            vertical-align: baseline; }
        .trainingList .listHead h2 .title {
          display: inline-block; }
        .trainingList .listHead h2 .sub {
          font-size: 14px;
          display: block; }
      .trainingList .listHead .perecnt {
        display: flex;
        justify-content: flex-end; }
        .trainingList .listHead .perecnt .gauge {
          width: 60px;
          height: 10px;
          border: 1px solid #B7B7B7;
          border-radius: 5px;
          position: relative; }
          .trainingList .listHead .perecnt .gauge span {
            display: block;
            position: absolute;
            top: -1px;
            left: 0;
            height: 10px;
            width: 100%;
            border: 1px solid #FF8200;
            border-radius: 5px;
            background-color: #FF8200; }
        .trainingList .listHead .perecnt .num {
          width: 2.5em;
          height: 12px;
          font-size: 12px;
          line-height: 1;
          text-align: right; }
  .task {
    background-color: #F7F7EF;
    padding: 10px;
    margin-top: 30px; }
    .task.gray {
      background-color: #F2F2F2; }
    .task.darkgray {
      background-color: #A0A0A0; }
    .task .title {
      font-size: 18px;
      font-weight: 700;
      position: relative;
      padding-right: 100px; }
      .task .title span {
        display: block;
        font-size: 14px;
        color: #404040; }
      .task .title .slideBtn {
        width: 93px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0; }
        .task .title .slideBtn .status {
          font-size: 14px;
          line-height: 1;
          color: #000; }
        .task .title .slideBtn .arrow {
          width: 50px;
          height: 50px;
          border: 2px solid #FF8200;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #FF8200;
          box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
          transition: all .3s; }
          .task .title .slideBtn .arrow .icon {
            width: 15px;
            height: 8px;
            fill: #fff;
            transition: all .3s; }
          .task .title .slideBtn .arrow.isOpen {
            border-color: #FF8200; }
            .task .title .slideBtn .arrow.isOpen .icon {
              fill: #fff;
              -webkit-transform: rotate(180deg);
                      transform: rotate(180deg); }
    .task .thumbnail {
      position: relative;
      width: 100%;
      margin-top: 15px;
      display: none; }
      .task .thumbnail img {
        width: 100%;
        height: auto; }
      .task .thumbnail .time {
        min-width: 56px;
        height: 26px;
        padding: 0 .5em;
        background-color: #000;
        position: absolute;
        bottom: 5px;
        right: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px; }
    .task .advance {
      display: none; }
  .advance {
    margin: 40px 0; }
    .advance ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      width: 296px;
      position: relative;
      z-index: 10;
      margin: 0 auto; }
      .advance ul li {
        width: 74px; 
        padding: 10px 0;}
        .advance ul li .sp-learning-note {
          position: absolute;
          top: -22px;
          text-align: center;
          left: 16px;
          color: #000;
          font-weight: 900;
        }
        .advance ul li .btn.sp-btn-text {
          border: none;
        }
        .advance ul li .btn.sp-btn-text .status{
          top: 2px;
          bottom: 0;
          left: 4px;
          padding: 10px;
          font-size: 17px;
          line-height: 20px;
          color: #000;
          font-weight: 400;
        }
        .advance ul li .sp-top-content-evaluation .btn {
          display: none;
        }
        .advance ul li .warning {
          color: red;
          font-size: 9px;
          margin-top: 7px;
          text-decoration: underline;
        }
        .advance ul li .p-relative {
          position: relative;
        }
        .advance ul li .sp-button-note {
          position: absolute;
          top: -2px;
          left: 73px;
          width: 170px;
          z-index: 1;
          background: #ccc;
          min-height: 65px;
          font-size: 11px;
          padding: 5px;
        }
        .advance ul li .sp-btn-icon:hover {
          opacity: .7;
        }
        .advance ul li .sp-content-code .warning {
          position: absolute;
          top: -35px;
          font-size: 11px;
          width: 88px;
          color: red;
          text-decoration: underline;
        }
        .advance ul li .sp-content-code .back-review-type {
          font-size: 12px;
          color: blueviolet;
          text-decoration: underline;
          cursor: pointer;
          text-align: center;
        }
        .advance ul li .d-none {
          display: none;
        }
        .advance ul li .btn.sp-btn-icon {
          cursor: pointer;
          box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
          transition: all .3s;}
          .advance ul li .btn.sp-btn-icon .status.position-status {
            top: 3px;
            left: 3px;
            color: #000;
          }
        .advance ul li .name {
          font-size: 13px;
          color: #8E8E8E;
          display: block;
          text-align: center;
          line-height: 1; }
          .advance ul li .name.orange {
            color: #FF8200; }
        .advance ul li .dot {
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 5px;
          margin: 10px auto 0;
          background-color: #8E8E8E;
          position: relative; }
          .advance ul li .dot.dot-d-none {
            display: none;
          }
          .advance ul li .dot.orange {
            background-color: #FF8200; }
        .advance ul li + li .dot:before {
          content: "";
          display: block;
          width: 74px;
          height: 2px;
          background-color: #8E8E8E;
          position: absolute;
          top: 4px;
          right: 5px;
          z-index: -1; }
        .advance ul li + li .dot.orange:before {
          background-color: #FF8200; }
        .advance ul li .btn {
          width: 61px;
          height: 61px;
          border: 2px solid #FF8200;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 10px auto 0;
          background-color: #fff;
          position: relative; }
          .advance ul li .btn.d-none {
            display: none;
          }
          .advance ul li .btn .icon {
            width: 45px;
            height: 45px;
            fill: #FF8200;
            display: block;
            margin: 0 auto; }
            .advance ul li .btn .icon.failure {
              fill: #0089C7; }
          .advance ul li .btn .status {
            display: block;
            font-size: 13px;
            line-height: 1;
            position: absolute;
            bottom: 3px;
            right: 3px;
            color: #FF8200;
            font-weight: 700; }
          .advance ul li .status.position-status {
            top: 3px;
            left: 3px;
            color: #000;
          }
          .advance ul li .btn.gray {
            background-color: #DEDEDB;
            border-color: #DEDEDB; }
            .advance ul li .btn.gray .icon {
              fill: #8E8E8E; }
          .advance ul li .btn.failure {
            border-color: #0089C7; }
            .advance ul li .btn.failure .icon {
              fill: #0089C7; }
          .advance ul li .btn.orange {
            background-color: #FFD5AA; }
        .advance ul li a {
          display: block;
          width: 61px;
          height: 61px;
          margin: 10px auto 0;
          transition: all .3s; }
          .advance ul li a:hover {
            opacity: .7; }
            .advance ul li a:hover .btn {
              box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3); }
          .advance ul li a .btn {
            box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
            margin: 0;
            transition: all .3s; }
        .advance ul li.message {
          width: 100%; }
          .advance ul li.message.tar {
            text-align: right; }
          .advance ul li.message.tac {
            text-align: center; }
          .advance ul li.message.tal {
            text-align: left; }
          .advance ul li.message span.orange {
            color: #FF8200; }
          .advance ul li.message span.blue {
            color: #265491; }
          .advance ul li.message span.red {
            color: #E10000; }
      .advance ul .check {
        text-align: center;
        font-size: 13px;
        line-height: 1;
        color: #0089C7;
        margin-top: 5px;
        display: block; }
        .advance ul .check.orange {
          color: #FF8200; }
      .advance ul .retry {
        text-align: center;
        font-size: 13px;
        line-height: 1;
        color: #E10000;
        margin-top: 5px;
        display: block; }
  .checkList {
    max-width: 688px;
    width: 95%;
    margin: 10px auto 0; }
    .checkList h2 {
      font-size: 20px;
      vertical-align: middle;
      line-height: 1; }
      .checkList h2 .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle; }
    .checkList .read {
      font-size: 15px;
      margin-top: 2em; }
    .checkList h3 {
      font-size: 16px;
      color: var(--thmeCloro);
      font-weight: 700;
      margin-top: 10px; }
    .checkList .persons {
      display: none; }
    .checkList ul.checkUl {
      list-style: none;
      border: 1px solid #DEDEDB;
      margin-top: 5px; }
      .checkList ul.checkUl.inPerson li {
        padding: 0; }
        .checkList ul.checkUl.inPerson li span.num {
          width: 10%;
          text-align: center;
          padding: 10px 0;
          border-bottom: 1px solid #DEDEDB; }
        .checkList ul.checkUl.inPerson li span.txt {
          width: 90%;
          flex: auto;
          padding: 10px 0;
          border-bottom: 1px solid #DEDEDB; }
      .checkList ul.checkUl li {
        display: flex;
        flex-wrap: wrap;
        line-height: 1.5; }
        .checkList ul.checkUl li .num {
          width: 2em; }
        .checkList ul.checkUl li .txt {
          flex: 1; }
          .checkList ul.checkUl li .txt .redTxt {
            display: block;
            font-size: 13px;
            color: #f00; }
        .checkList ul.checkUl li .person {
          width: 50%;
          text-align: center;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          padding: 10px 0; }
          .checkList ul.checkUl li .person .name {
            width: 100%;
            font-size: 12px;
            color: #8E8E8E; }
          .checkList ul.checkUl li .person a.comment .icon {
            width: 11px;
            height: 10px;
            fill: #FF8200;
            margin-right: 5px; }
          .checkList ul.checkUl li .person a.edit {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #0268B2;
            border-radius: 10px;
            background-color: #fff;
            margin-left: 10px; }
            .checkList ul.checkUl li .person a.edit .icon {
              width: 15px;
              height: 15px; }
          .checkList ul.checkUl li .person + .person {
            width: 50%;
            border-left: 1px solid #DEDEDB; }
        .checkList ul.checkUl li + li {
          border-top: 1px solid #DEDEDB; }
        .checkList ul.checkUl li:nth-of-type(even) {
          background-color: #F2F2F2; }
    .checkList .bottomBtns {
      margin-top: 40px;
      display: flex;
      flex-direction: column; }
      .checkList .bottomBtns.threebtns {
        flex-direction: row;
        flex-wrap: wrap; }
        .checkList .bottomBtns.threebtns .order2 {
          margin-top: 0 !important; }
      .checkList .bottomBtns a {
        display: block;
        transition: all .3s; }
        .checkList .bottomBtns a.btn {
          min-width: 180px;
          border: 2px solid #FF8200;
          border-radius: 10px;
          text-align: center;
          font-size: 15px;
          line-height: 1;
          padding: 10px 15px;
          display: flex;
          justify-content: space-between;
          color: #FF8200;
          font-weight: 700;
          text-decoration: none; }
          .checkList .bottomBtns a.btn.short {
            min-width: 120px;
            width: 40%; }
          .checkList .bottomBtns a.btn .icon {
            width: 15px;
            height: 15px;
            fill: #FF8200;
            display: block; }
          .checkList .bottomBtns a.btn.orange {
            background-color: #FF8200;
            color: #fff; }
            .checkList .bottomBtns a.btn.orange .icon {
              fill: #fff; }
          .checkList .bottomBtns a.btn.order3 {
            order: 3;
            margin-top: 20px; }
          .checkList .bottomBtns div.sub-order1 a {
            padding-left: 40px;
          }
          .checkList .bottomBtns div.sub-order1 p {
            padding-top: 10px;
            font-size: 13px;
            text-align: center;
          }
          .checkList .bottomBtns a.btn.order2, .checkList .bottomBtns div.order2 {
            order: 2;
            margin-top: 20px; }
          .checkList .bottomBtns a.btn.order1, .checkList .bottomBtns div.order1 {
            order: 1; }
  #movingWrap {
    width: 100%;
    height: calc(100vh - 135px);
    background-color: #F7F7EF;
    background-image: url(../images/grid.png);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    #movingWrap.movingWrap-modal4 {
      height: 100%;
      background-image: none;
    }
    #movingWrap.movingWrap-modal4 .modal__content {
      text-align: center;
    }
    #movingWrap.blue {
      background-color: #DAE7F8; }
    #movingWrap + footer {
      margin-top: 0;
      position: relative;
      z-index: 1; }
    #movingWrap .inner h2.roundTitle {
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      width: 136px;
      height: 23px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px; }
      #movingWrap .inner h2.roundTitle.orange {
        color: #fff;
        background-color: var(--thmeCloro); }
    #movingWrap .inner h2.slashTitle {
      font-size: 22px;
      text-align: center;
      font-weight: 700;
      color: var(--thmeCloro); }
      #movingWrap .inner h2.slashTitle:before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: var(--thmeCloro);
        -webkit-transform: rotate(60deg);
                transform: rotate(60deg);
        margin-right: 20px; }
      #movingWrap .inner h2.slashTitle:after {
        content: "";
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: var(--thmeCloro);
        -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
        margin-left: 20px; }
    #movingWrap .inner p.movingInfo {
      font-size: 18px;
      text-align: left;
      font-weight: 700;
      line-height: 1.6;
      margin-top: 30px; }
      #movingWrap .inner p.movingInfo span {
        color: var(--thmeCloro); }
    #movingWrap .confirmation {
      margin-top: 30px;
      margin-bottom: 100px;
      align-items: center; }
      #movingWrap .confirmation video {
        width: auto;
        height: 200px; }
      #movingWrap .confirmation .movieButton {
        margin-top: 0;
        margin-left: 20px; }
    #movingWrap .movieButton {
      width: 240px;
      height: 120px;
      border-radius: 15px;
      border: 2px solid var(--thmeCloro);
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 50px auto 0;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      text-decoration: none; }
      #movingWrap .movieButton .icon {
        fill: var(--thmeCloro);
        width: 140px;
        height: auto; }
      #movingWrap .movieButton .txt {
        font-size: 20px;
        font-weight: 700;
        color: var(--thmeCloro);
        text-align: center; }
    #movingWrap .btn {
      min-width: 179px;
      min-height: 44px;
      display: flex;
      align-items: center;
      text-decoration: none;
      padding: 0 10px;
      background-color: #fff;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); }
      #movingWrap .btn .icon {
        fill: var(--thmeCloro);
        width: 8px;
        height: 15px;
        margin-right: .8em; }
        #movingWrap .btn .icon.video {
          width: 30px;
          height: auto; }
      #movingWrap .btn .txt {
        font-size: 16px;
        line-height: 1;
        font-weight: 700; }
      #movingWrap .btn.lb {
        position: absolute;
        left: 30px;
        bottom: 30px; }
      #movingWrap .btn.orange {
        color: var(--thmeCloro);
        border: 2px solid var(--thmeCloro);
        border-radius: 10px;
        color: var(--thmeCloro); }
    #movingWrap .uploadInfo {
      display: flex;
      align-items: center;
      margin-top: 30px; }
      #movingWrap .uploadInfo p {
        font-size: 18px; }
        #movingWrap .uploadInfo p .time {
          color: var(--thmeCloro); }
      #movingWrap .uploadInfo .progress {
        width: 93px;
        height: 10px;
        border: 1px solid #B7B7B7;
        border-radius: 5px;
        background-color: #fff;
        position: relative;
        margin-left: 30px; }
        #movingWrap .uploadInfo .progress span {
          display: block;
          position: absolute;
          top: -1;
          left: -1;
          background-color: var(--thmeCloro);
          border-radius: 5px;
          width: 30%;
          height: 100%; }
      #movingWrap .uploadInfo .num {
        margin-left: 20px;
        font-size: 18px; }
  form.hide {
    display: none; }
  #shopHeader {
    background-color: #DAE7F8;
    background-image: url(../images/grid.png);
    padding: 20px 0; }
    #shopHeader .inner {
      width: 90%;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 0 20px; }
      #shopHeader .inner .shop {
        font-size: 18px;
        color: #000; }
      #shopHeader .inner .area {
        font-size: 12px;
        color: #8E8E8E;
        margin-left: 20px; }
      #shopHeader .inner .count {
        margin: 0 0 0 auto;
        display: flex;
        align-items: center;
        border-left: 1px solid #309FD1;
        padding-left: 10px; }
        #shopHeader .inner .count .tit {
          color: #8E8E8E;
          font-size: 13px; }
        #shopHeader .inner .count .num {
          font-size: 30px;
          color: #265491;
          margin-left: 10px; }
          #shopHeader .inner .count .num span {
            font-size: 13px;
            color: #4A4A4A;
            margin-left: 10px; }
  .shopTab {
    border-bottom: 3px solid #265491;
    margin-top: 30px; }
    .shopTab ul {
      display: flex;
      width: 90%;
      margin: 0 auto;
      list-style: none; }
      .shopTab ul li {
        background-color: #F2F2F2;
        border-radius: 5px 5px 0 0;
        padding: 5px 30px;
        font-size: 16px;
        color: #8E8E8E;
        cursor: pointer; }
        .shopTab ul li + li {
          margin-left: 2px; }
        .shopTab ul li.active {
          background-color: #265491;
          color: #fff; }
        .shopTab ul li .num {
          font-size: 12px;
          display: inline-block;
          margin-left: .5em; }
  .tabArea .title {
    font-size: 22px;
    font-weight: 700;
    width: 90%;
    margin: 40px auto 0; }
  .tabArea .grade {
    width: 90%;
    display: flex;
    align-items: center;
    margin: 20px auto 0; }
    .tabArea .grade .medal {
      width: 30px;
      height: 41px; }
    .tabArea .grade .gradeName {
      font-size: 18px;
      margin-left: 10px; }
      .tabArea .grade .gradeName span {
        display: inline-block;
        margin-left: 5px; }
        .tabArea .grade .gradeName span.num {
          font-size: 18px; }
        .tabArea .grade .gradeName span.uni {
          font-size: 13px; }
  .tabArea .list ul {
    list-style: none;
    margin-top: 20px; }
    .tabArea .list ul li {
      background-color: #EAF0F9;
      margin-top: 3px;
      display: flex;
      justify-content: space-between; }
    .tabArea .list ul.right li {
      text-align: right;
      background-color: #EAF0F9;
      padding-top: 6px;
      padding-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: flex-end; }
    .tabArea .list ul.right .btn {
      margin: 0px;}
      .tabArea .list ul li .left {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px; }
        .tabArea .list ul li .left a {
          font-size: 18px;
          color: #265491; }
        .tabArea .list ul li .left span {
          display: block;
          width: 100%; }
          .tabArea .list ul li .left span.goldName {
            font-size: 18px;
            color: #000;
            margin-left: 0; }
          .tabArea .list ul li .left span.position {
            font-size: 12px;
            color: #8E8E8E; }
          .tabArea .list ul li .left span.during {
            background-color: #508AD8;
            font-size: 12px;
            color: #fff;
            line-height: 1;
            border-radius: 10px;
            padding: 5px 10px;
            text-align: center; }
          .tabArea .list ul li .left span.team {
            font-size: 16px;
            color: #8E8E8E; }
      .tabArea .list ul li .right {
        list-style: none;
        display: inline-block;
        padding: 0 10px 0 0;
        margin-top: 0; }
        .tabArea .list ul li .right li .during {
          display: block;
          background-color: #265491;
          font-size: 14px;
          color: #fff;
          line-height: 1;
          border-radius: 10px;
          padding: 5px 10px; }
        .tabArea .list ul li .right li .btn {
          display: block;
          width: auto;
          height: auto;
          border: none;
          background-color: transparent;
          box-shadow: none; }
          .tabArea .list ul li .right li .btn a {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 40px;
            margin-left: 10px;
            border-radius: 10px;
            background-color: #fff;
            border: 1px solid #265491;
            text-decoration: none; }
            .tabArea .list ul li .right li .btn a .icon {
              width: 26px;
              height: 25px;
              fill: #265491; }
            .tabArea .list ul li .right li .btn a span {
              font-size: 15px;
              color: #265491;
              font-weight: 700; }
          .tabArea .list ul li .right li .btn span {
            display: block;
            font-size: 12px;
            line-height: 1.3; }
            .tabArea .list ul li .right li .btn span.blue {
              color: #265491; }
            .tabArea .list ul li .right li .btn span.red {
              color: #E10000; }
  .tabArea .report {
    margin-top: 40px; }
    .tabArea .report .title {
      font-size: 18px;
      font-weight: 700;
      border-bottom: 1px solid #DEDEDB;
      padding-bottom: 15px; }
    .tabArea .report .reportHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      margin: 20px auto 0;
      width: 90%; }
      .tabArea .report .reportHeader .rate .medal {
        display: none; }
      .tabArea .report .reportHeader .rate + .rate {
        display: none; }
    .tabArea .report .reportList {
      list-style: none; }
      .tabArea .report .reportList li {
        background-color: #EAF0F9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5vw;
        margin-top: 2px; }
        .tabArea .report .reportList li .shop {
          width: 40%; }
        .tabArea .report .reportList li .rates .rate {
          display: flex;
          align-items: center; }
          .tabArea .report .reportList li .rates .rate:before {
            content: "";
            display: inline-block;
            width: 15px;
            height: 21px;
            background-size: 100% auto;
            background-repeat: no-repeat; }
          .tabArea .report .reportList li .rates .rate.bronze:before {
            background-image: url(../images/medal-bronze.svg); }
          .tabArea .report .reportList li .rates .rate.silver:before {
            background-image: url(../images/medal-silver.svg); }
          .tabArea .report .reportList li .rates .rate.gold:before {
            background-image: url(../images/medal-gold.svg); }
          .tabArea .report .reportList li .rates .rate span {
            display: inline-block;
            width: 3em;
            text-align: right; }
            .tabArea .report .reportList li .rates .rate span:nth-of-type(1) {
              margin-right: 1em; }
        .tabArea .report .reportList li:nth-of-type(even) {
          background-color: #F2F2F2; }
  .waiting {
    display: none; }
    .waiting .wrap {
      max-width: 1034px;
      width: 95%;
      margin: 40px auto 0;
      background-color: #EFEFEF;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 20px; }
      .waiting .wrap p {
        color: #265491;
        font-size: 16px; }
      .waiting .wrap .close {
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #265491;
        position: absolute;
        top: 50%;
        right: 5px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%); }
        .waiting .wrap .close .icon {
          width: 14px;
          height: 14px;
          fill: #265491;
          margin-right: 10px; }
  /* ココから下には記入禁止 */
  .forPC {
    display: none !important; }
  .bg_orange {
    background-color: #FF8200 !important; }
  .ff_orange {
    color: #FF8200 !important; }
  .bg_blue {
    background-color: #265491 !important; }
  .ff_blue {
    color: #265491 !important; } }

@media screen and (min-width: 800px) {
  body {
    font-family: "Roboto", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 15px; }
    body.orange {
      --thmeCloro: #FF8200; }
    body.blue {
      --thmeCloro: #265491; }
  /* login
----------------------------------------*/
  .login {
    display: flex;
    height: 100vh; }
  .loginLogo {
    display: flex;
    width: 50%;
    background-color: var(--thmeCloro);
    align-items: center;
    justify-content: center; }
    .loginLogo p {
      font-family: "Viga", "sans-serif", "meiryo";
      color: #ffffff;
      width: 60vw; }
      .loginLogo p img {
        width: 100%;
        height: auto;
      }
      .loginLogo p span {
        display: block;
        font-size: 15px;
        text-align: center; }
  .loginCol {
    display: flex;
    width: 50%;
    margin-top: 20px;
    justify-content: center; }
  .loginWrap {
    width: 70%;
    max-width: 335px;
    margin: 0 auto; }
  .loginWrap .errorTxt {
    border: none;
    background: none;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--thmeCloro);
    margin-bottom: 30px; }
  .loginWrap .forgotpass {
    text-align: center; }
    .loginWrap .forgotpass a {
      text-decoration: none;
      display: inline-block;
      color: #000;
      position: relative; }
      .loginWrap .forgotpass a:after {
        content: '';
        width: 6px;
        height: 6px;
        border: 0px;
        border-top: solid 1px var(--thmeCloro);
        border-right: solid 1px var(--thmeCloro);
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        position: absolute;
        top: calc(50% - 3px);
        right: -15px; }
  .loginTtl {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px; }
  .loginForm dl {
    margin-bottom: 40px; }
  .loginForm dd:not(:last-child) {
    margin-bottom: 30px; }
  .loginForm dd input {
    font-size: 18px;
    line-height: 1;
    width: 100%;
    padding: 14px 24px;
    color: #333333;
    border: none;
    outline: none;
    background-color: #f2f2f2;
    border-radius: 0; }
  .loginForm dd input::-webkit-input-placeholder {
    color: #ababab; }
  .loginForm dd input::-moz-placeholder {
    color: #ababab; }
  .loginForm dd input::-ms-input-placeholder {
    color: #ababab; }
  .loginForm dd input::placeholder {
    color: #ababab; }
  .loginForm dd input:focus::-webkit-input-placeholder {
    color: transparent; }
  .loginForm dd input:focus::-moz-placeholder {
    color: transparent; }
  .loginForm dd input:focus::-ms-input-placeholder {
    color: transparent; }
  .loginForm dd input:focus::placeholder {
    color: transparent; }
  .loginBtnWrap {
    position: relative;
    display: table;
    min-width: 200px;
    margin: auto; }
    .loginBtnWrap.top::before {
      content: none; }
    .loginBtnWrap.top .loginBtn {
      background-color: #fff;
      display: inline-block;
      text-decoration: none;
      text-align: center;
      position: relative;
      font-size: 18px; }
      .loginBtnWrap.top .loginBtn:not(:first-of-type) {
        margin-top: 40px; }
      .loginBtnWrap.top .loginBtn.jukou {
        color: #FF8200;
        border: 1px solid #FF8200; }
        .loginBtnWrap.top .loginBtn.jukou::before {
          position: absolute;
          z-index: 2;
          top: 0;
          right: 24px;
          bottom: 0;
          display: block;
          width: 8px;
          height: 8px;
          margin: auto;
          content: '';
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #FF8200;
          border-right: 1px solid #FF8200; }
      .loginBtnWrap.top .loginBtn.hyouka {
        color: #265491;
        border: 1px solid #265491; }
        .loginBtnWrap.top .loginBtn.hyouka::before {
          position: absolute;
          z-index: 2;
          top: 0;
          right: 24px;
          bottom: 0;
          display: block;
          width: 8px;
          height: 8px;
          margin: auto;
          content: '';
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #265491;
          border-right: 1px solid #265491; }
  .loginBtnWrap::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 24px;
    bottom: 0;
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff; }
  .loginBtn {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 20px 16px;
    cursor: pointer;
    transition: 0.3s;
    color: #ffffff;
    border: none;
    border-radius: 40px;
    outline: none;
    background-color: var(--thmeCloro); }
  .loginBtn:hover {
    opacity: 0.7; }
  .modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999; }
    .modal.scroll {
      overflow: auto; }
  .modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%; }
  .modal__content {
    background: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 10px;
    border: 1px solid var(--thmeCloro); }
    .modal__content .title {
      text-align: center;
      font-weight: bold;
      border-bottom: 1px solid #DEDEDB; }
    #modal_item_comment .modal__content .title {
      text-align: left; }
    #modal_item_evaluation .modal__content .title {
      text-align: left; }
    #modal_item_evaluation select {
      padding-left: 15px;
      padding-right: 15px;
      width: 100px; }
    #modal_item_evaluation .text {
      display: flex;
      height: 35px; }
    #modal_item_evaluation .selectlabel {
      padding-top: 8px; }
      .modal__content .title .tac {
        text-align: center; }
    .modal__content .content .text.tac {
      text-align: center; }
    .modal__content .content .text span.bigTxt {
      font-size: 1.3em; }
    .modal__content .content .text span.orange {
      color: var(--thmeCloro); }
    .modal__content .content .input {
      width: 100%;
      margin-top: 10px; }
      .modal__content .content .input input[type=text] {
        width: 100%;
        height: 43px;
        background-color: #F2F2F2;
        border: none;
        padding: 0 10px; }
      .modal__content .content .input textarea {
        width: 100%;
        height: 126px;
        background-color: #F2F2F2;
        border: none;
        padding: 10px; }
      .modal__content .content .input .error {
        color: var(--thmeCloro); }
    .modal__content .content .grayBg {
      background-color: #F2F2F2;
      padding: 1em; }
      .modal__content .content .grayBg ul {
        padding-left: 1em;
        font-size: 1.3em;
        font-weight: 700; }
        .modal__content .content .grayBg ul span.tit {
          display: inline-block;
          width: 170px;
          margin-right: 1em; }
        .modal__content .content .grayBg ul span.orange {
          color: var(--thmeCloro); }
    .modal__content .js-modal-close {
      color: #fff;
      font-size: 30px;
      position: absolute;
      top: -45px;
      right: 0px;
      text-decoration: none; }
    .modal__content .js-modal-close.close_btn {
      position: static;
      font-size: 16px; }
    .modal__content .form_btn_wrap {
      text-align: center;
      margin-top: 30px; }
      .modal__content .form_btn_wrap .back_btn {
        text-decoration: none;
        display: inline-block;
        border: 2px solid var(--thmeCloro);
        color: var(--thmeCloro);
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        padding: 10px 40px;
        position: relative;
        box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.62);
        /*
			&:before{
				content: '';
				width: 6px;
				height: 6px;
				border: 0px;
				border-bottom: solid 2px var(--thmeCloro);
				border-left: solid 2px var(--thmeCloro);
				transform: rotate(45deg);
				position: absolute;
				top: calc(50% - 3px);
				left: 15px;
			}
			*/ }
        .modal__content .form_btn_wrap .back_btn.themeColor {
          background-color: var(--thmeCloro);
          color: #fff; }
        .modal__content .form_btn_wrap .back_btn:hover {
          opacity: .7; }
      .modal__content .form_btn_wrap .start_btn {
        text-decoration: none;
        display: inline-block;
        border: 1px solid var(--thmeCloro);
        background-color: var(--thmeCloro);
        color: #fff;
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        padding: 10px 40px;
        position: relative;
        box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.62);
        /*
			&:before{
				content: '';
				width: 6px;
				height: 6px;
				border: 0px;
				border-top: solid 2px #fff;
				border-right: solid 2px #fff;
				transform: rotate(45deg);
				position: absolute;
				top: calc(50% - 3px);
				right: 15px;
			}
			*/ }
        .modal__content .form_btn_wrap .start_btn.offBtn {
          background-color: #DEDEDB;
          border-color: #DEDEDB;
          color: #8E8E8E; }
        .modal__content .form_btn_wrap .start_btn:hover {
          opacity: .7; }
  input[type='text'].error_input,
  input[type='date'].error_input,
  input[type='number'].error_input {
    border: 1px solid red;
    background: #f8eaea; }
  header {
    position: relative;
    z-index: 10; }
  .subHeader {
    background-color: #3868A8; }
  #headWrap {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; }
  .topMovie {
    background-color: #28323C; }
    .topMovie.blueBG {
      background-color: #69A4DF; }
    .topMovie .movieTab ul {
      list-style: none;
      display: flex;
      border-bottom: 3px solid #EC670B; }
      .topMovie .movieTab ul li {
        width: 50%;
        background-color: #475058;
        color: #fff;
        line-height: 1;
        text-align: center;
        cursor: pointer;
        padding: 5px 0; }
        .topMovie .movieTab ul li.on {
          background-color: #EC670B; }
    .topMovie .postMovie {
      display: none; }
  #movingWrap.blue {
    background-color: #DAE7F8; }
  form.hide {
    display: none; }
  #shopHeader {
    background-color: #DAE7F8;
    background-image: url(../images/grid.png); }
  .shopTab {
    border-bottom: 3px solid #265491; }
  .waiting {
    display: none; }
  /* ココから下には記入禁止 */
  .bg_orange {
    background-color: #FF8200 !important; }
  .ff_orange {
    color: #FF8200 !important; }
  .bg_blue {
    background-color: #265491 !important; }
  .ff_blue {
    color: #265491 !important; } }

@media print, screen and (min-width: 601px) {
  body {
    font-family: "Roboto", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 15px; }
    body.orange {
      --thmeCloro: #FF8200; }
    body.blue {
      --thmeCloro: #265491; }
  /* login
----------------------------------------*/
  .login {
    display: flex;
    height: 100vh; }
  .loginLogo {
    display: flex;
    width: 50%;
    background-color: var(--thmeCloro);
    align-items: center;
    justify-content: center; }
    .loginLogo p {
      font-family: "Viga", "sans-serif", "meiryo";
      color: #ffffff;
      font-size: 57px;
      width: 230px; }
      .loginLogo p img {
        width: 100%;
        height: auto;
      }
      .loginLogo p span {
        display: block;
        font-size: 15px;
        text-align: center; }
  .loginCol {
    display: flex;
    width: 50%;
    margin-top: 20px;
    justify-content: center; }
  .loginWrap {
    width: 70%;
    max-width: 335px;
    margin: 0 auto; }
  .loginWrap .errorTxt {
    border: none;
    background: none;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--thmeCloro);
    margin-bottom: 30px; }
  .loginWrap .forgotpass {
    text-align: center;
    font-size: 16px;
    margin-top: 20px; }
    .loginWrap .forgotpass a {
      text-decoration: none;
      display: inline-block;
      color: #000;
      position: relative; }
      .loginWrap .forgotpass a:after {
        content: '';
        width: 6px;
        height: 6px;
        border: 0px;
        border-top: solid 1px var(--thmeCloro);
        border-right: solid 1px var(--thmeCloro);
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        position: absolute;
        top: calc(50% - 3px);
        right: -15px; }
  .loginTtl {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px; }
  .loginForm dl {
    margin-bottom: 40px; }
  .loginForm dd:not(:last-child) {
    margin-bottom: 30px; }
  .loginForm dd input {
    font-size: 18px;
    line-height: 1;
    width: 100%;
    padding: 14px 24px;
    color: #333333;
    border: none;
    outline: none;
    background-color: #f2f2f2;
    border-radius: 0; }
  .loginForm dd input::-webkit-input-placeholder {
    color: #ababab; }
  .loginForm dd input::-moz-placeholder {
    color: #ababab; }
  .loginForm dd input::-ms-input-placeholder {
    color: #ababab; }
  .loginForm dd input::placeholder {
    color: #ababab; }
  .loginForm dd input:focus::-webkit-input-placeholder {
    color: transparent; }
  .loginForm dd input:focus::-moz-placeholder {
    color: transparent; }
  .loginForm dd input:focus::-ms-input-placeholder {
    color: transparent; }
  .loginForm dd input:focus::placeholder {
    color: transparent; }
  .loginBtnWrap {
    position: relative;
    display: table;
    min-width: 200px;
    margin: auto; }
    .loginBtnWrap.top::before {
      content: none; }
    .loginBtnWrap.top .loginBtn {
      background-color: #fff;
      display: inline-block;
      text-decoration: none;
      text-align: center;
      position: relative;
      font-size: 18px; }
      .loginBtnWrap.top .loginBtn:not(:first-of-type) {
        margin-top: 40px; }
      .loginBtnWrap.top .loginBtn.jukou {
        color: #FF8200;
        border: 1px solid #FF8200; }
        .loginBtnWrap.top .loginBtn.jukou::before {
          position: absolute;
          z-index: 2;
          top: 0;
          right: 24px;
          bottom: 0;
          display: block;
          width: 8px;
          height: 8px;
          margin: auto;
          content: '';
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #FF8200;
          border-right: 1px solid #FF8200; }
      .loginBtnWrap.top .loginBtn.hyouka {
        color: #265491;
        border: 1px solid #265491; }
        .loginBtnWrap.top .loginBtn.hyouka::before {
          position: absolute;
          z-index: 2;
          top: 0;
          right: 24px;
          bottom: 0;
          display: block;
          width: 8px;
          height: 8px;
          margin: auto;
          content: '';
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-top: 1px solid #265491;
          border-right: 1px solid #265491; }
  .loginBtnWrap::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 24px;
    bottom: 0;
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff; }
  .loginBtn {
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 20px 16px;
    cursor: pointer;
    transition: 0.3s;
    color: #ffffff;
    border: none;
    border-radius: 40px;
    outline: none;
    background-color: var(--thmeCloro); }
  .loginBtn:hover {
    opacity: 0.7; }
  .modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999; }
    .modal.scroll {
      overflow: auto; }
  .modal__bg {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%; }
  .modal__content {
    background: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 10px;
    border: 1px solid var(--thmeCloro);
    width: 50%;
    max-width: 560px; }
    .modal__content.sp-modal-bottom-confirm {
      max-width: 600px;
    }
    .modal__content .title {
      text-align: center;
      font-weight: bold;
      border-bottom: 1px solid #DEDEDB;
      padding: 25px 20px 20px;
      font-size: 22px; }
      .modal__content .title .tac {
        text-align: center; }
    #modal_item_comment .modal__content .title {
      text-align: left; }
    #modal_item_evaluation .modal__content .title {
      text-align: left; }
    #modal_item_evaluation select {
      padding-left: 15px;
      padding-right: 15px;
      width: 100px; }
    #modal_item_evaluation .text {
      display: flex;
      height: 35px; }
    #modal_item_evaluation .selectlabel {
      padding-top: 8px; }
      .modal__content .title .tac {
        text-align: center; }
    .modal__content .content {
      padding: 10px 10px; }
      .modal__content .content ul {
        list-style: none; }
        .modal__content .content ul li {
          display: flex; }
        .modal__content .content .grayBg ul li {
          display: inline-block; }
          .modal__content .content ul li + li {
            margin-top: 10px; }
          .modal__content .content ul li span.tit {
            font-weight: 700;
            width: 100px; }
          .modal__content .content ul li span.comment {
            flex: 1; }
      .modal__content .content .text.tac {
        text-align: center; }
      .modal__content .content .text span.bigTxt {
        font-size: 1.3em; }
      .modal__content .content .text span.orange {
        color: var(--thmeCloro); }
      .modal__content .content .input {
        width: 100%;
        margin-top: 10px; }
        .modal__content .content .input input[type=text] {
          width: 100%;
          height: 43px;
          background-color: #F2F2F2;
          border: none;
          padding: 0 10px; }
        .modal__content .content .input textarea {
          width: 100%;
          height: 126px;
          background-color: #F2F2F2;
          border: none;
          padding: 10px; }
        .modal__content .content .input .error {
          color: var(--thmeCloro); }
      .modal__content .content .grayBg {
        background-color: #F2F2F2;
        padding: 1em; }
        .modal__content .content .grayBg ul {
          padding-left: 1em;
          font-size: 1.3em;
          font-weight: 700; }
          .modal__content .content .grayBg ul span.tit {
            display: inline-block;
            width: 170px;
            margin-right: 1em; }
          .modal__content .content .grayBg ul span.orange {
            color: var(--thmeCloro); }
    .modal__content .js-modal-close {
      color: #fff;
      font-size: 30px;
      position: absolute;
      top: -45px;
      right: 0px;
      text-decoration: none; }
    .modal__content .js-modal-close.close_btn {
      position: static;
      font-size: 16px; }
    .modal__content .form_btn_wrap {
      text-align: center;
      margin-top: 30px; }
      .modal__content .form_btn_wrap .back_btn {
        text-decoration: none;
        display: inline-block;
        border: 2px solid var(--thmeCloro);
        color: var(--thmeCloro);
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        padding: 10px 40px;
        position: relative;
        box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.62);
        /*
			&:before{
				content: '';
				width: 6px;
				height: 6px;
				border: 0px;
				border-bottom: solid 2px var(--thmeCloro);
				border-left: solid 2px var(--thmeCloro);
				transform: rotate(45deg);
				position: absolute;
				top: calc(50% - 3px);
				left: 15px;
			}
			*/ }
        .modal__content .form_btn_wrap .back_btn.themeColor {
          background-color: var(--thmeCloro);
          color: #fff; }
        .modal__content .form_btn_wrap .back_btn:hover {
          opacity: .7; }
      .modal__content .form_btn_wrap .start_btn {
        text-decoration: none;
        display: inline-block;
        border: 1px solid var(--thmeCloro);
        background-color: var(--thmeCloro);
        color: #fff;
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        padding: 10px 40px;
        position: relative;
        box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.62);
        /*
			&:before{
				content: '';
				width: 6px;
				height: 6px;
				border: 0px;
				border-top: solid 2px #fff;
				border-right: solid 2px #fff;
				transform: rotate(45deg);
				position: absolute;
				top: calc(50% - 3px);
				right: 15px;
			}
			*/ }
        .modal__content .form_btn_wrap .start_btn.offBtn {
          background-color: #DEDEDB;
          border-color: #DEDEDB;
          color: #8E8E8E; }
        .modal__content .form_btn_wrap .start_btn:hover {
          opacity: .7; }
  input[type='text'].error_input,
  input[type='date'].error_input,
  input[type='number'].error_input {
    border: 1px solid red;
    background: #f8eaea; }
  header {
    position: relative;
    z-index: 10;
    width: 100%;
    background-color: var(--thmeCloro);
    height: 50px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); }
    header .inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 95%;
      height: 50px;
      margin: 0 auto; }
      header .inner h1 {
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        vertical-align: middle; }
        header .inner h1 a {
          color: #fff;
          text-decoration: none; }
          header .inner h1 a:hover {
            text-decoration: underline; }
        header .inner h1 .icon {
          vertical-align: middle;
          display: inline-block;
          margin-right: .8em;
          width: 15px;
          height: 15px; }
          header .inner h1 .icon.arrow {
            width: 8px;
            height: 15px;
            fill: #fff; }
      header .inner #menuBtn {
        display: none; }
      header .inner nav ul {
        list-style: none;
        display: flex; }
        header .inner nav ul li {
          font-size: 16px;
          color: #fff; }
          header .inner nav ul li span {
            display: inline-block; }
            header .inner nav ul li span.medal {
              display: none; }
            header .inner nav ul li span#division {
              margin-left: 20px; }
          header .inner nav ul li + li {
            margin-left: 20px; }
          header .inner nav ul li a {
            color: #fff;
            text-decoration: none;
            display: block; }
          header .inner nav ul li svg.icon {
            width: 16px;
            height: 16px;
            fill: #fff;
            display: inline-block;
            margin-right: 5px; }
  footer {
    width: 100%;
    height: 55px;
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    margin-top: 60px; }
    footer .inner {
      width: 100%;
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center; }
      footer .inner .logo {
        margin-right: 20px; }
      footer .inner .copy {
        font-size: 16px;
        line-height: 1; }
      footer .inner img {
        vertical-align: middle; }
  .subHeader {
    background-color: #3868A8; }
    .subHeader .acdBtn {
      display: none; }
    .subHeader .inner {
      max-width: 1033px;
      width: 95%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0 10px; }
      .subHeader .inner dl {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 15px;
        vertical-align: middle;
        margin-right: 2em;
        margin-top: 10px; }
        .subHeader .inner dl dt {
          color: #7C9FCE;
          font-size: 13px; }
          .subHeader .inner dl dt .icon {
            height: 15px;
            width: 15px;
            fill: #7C9FCE;
            display: inline-block;
            vertical-align: middle; }
        .subHeader .inner dl dd {
          margin-left: 1em; }
        .subHeader .inner dl.full {
          width: 100%;
          margin-right: 0; }
  #headWrap {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; }
  .topMovie.pt0 {
    padding-top: 0; }
  .topMovie.pb0 {
    padding-bottom: 0; }
  .topMovie {
    background-color: #28323C;
    padding: 10px 0 10px;
    display: flex;
    justify-content: center; }
    .topMovie.blueBG {
      background-color: #69A4DF; }
    .topMovie .movieTab {
      width: 464px;
      margin: 0 auto; }
      .topMovie .movieTab ul {
        list-style: none;
        display: flex;
        border-bottom: 3px solid #EC670B; }
        .topMovie .movieTab ul li {
          width: 50%;
          background-color: #475058;
          color: #fff;
          line-height: 1;
          text-align: center;
          cursor: pointer;
          padding: 5px 0; }
          .topMovie .movieTab ul li.on {
            background-color: #EC670B; }
    .topMovie .postMovie {
      display: none; }
    .topMovie .videoWrap {
      height: 266px;
      position: relative; }
      .topMovie .videoWrap .noVideo {
        height: 266px;
        background-color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center; }
        .topMovie .videoWrap .noVideo.autoHeight {
          height: auto; }
      .topMovie .videoWrap .setting {
        width: 34px;
        height: 34px;
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        bottom: 10px;
        right: -34px;
        border-radius: 0 5px 5px 0;
        z-index: 10;
        display: flex;
        align-items: center;
        cursor: pointer;
        padding-top: 5px;
        padding-bottom: 5px;
        transition: all .3s;
        display: flex;
        flex-direction: column; }
        .topMovie .videoWrap .setting .haguruma {
          fill: #fff;
          width: 25px;
          height: 25px;
          order: 2; }
        .topMovie .videoWrap .setting .diameter {
          overflow: hidden;
          display: inline-block;
          display: none;
          opacity: 0;
          transition: all .3s;
          order: 1;
          text-align: center;
          margin-bottom: 5px; }
          .topMovie .videoWrap .setting .diameter .settingBtn {
            padding-top: 4px; }
            .topMovie .videoWrap .setting .diameter .settingBtn span {
              width: 30px;
              cursor: pointer;
              margin-bottom: 5px;
              display: block; }
              .topMovie .videoWrap .setting .diameter .settingBtn span .icon {
                width: 30px;
                height: 23px;
                fill: #999; }
              .topMovie .videoWrap .setting .diameter .settingBtn span:hover .icon {
                fill: #999; }
        .topMovie .videoWrap .setting.open {
          width: 50px;
          height: auto;
          border-radius: 5px; }
          .topMovie .videoWrap .setting.open .diameter {
            display: block;
            opacity: 1; }
      .topMovie .videoWrap .likes {
        position: absolute;
        top: 0;
        right: 0;
        width: 87px; }
        .topMovie .videoWrap .likes ul {
          list-style: none; }
          .topMovie .videoWrap .likes ul li {
            background-color: rgba(236, 103, 11, 0.6);
            color: #fff;
            display: flex;
            align-items: center;
            width: 87px;
            padding: 5px; }
            .topMovie .videoWrap .likes ul li + li {
              margin-top: 1px; }
            .topMovie .videoWrap .likes ul li .icon {
              width: 18px;
              height: 14px;
              fill: #fff; }
            .topMovie .videoWrap .likes ul li span {
              font-size: 10px;
              padding-left: 1em; }
            .topMovie .videoWrap .likes ul li:nth-of-type(even) {
              background-color: rgba(48, 159, 209, 0.6); }
    .topMovie video {
      width: auto;
      height: 266px; }
  .likeArea {
    margin-left: 10px; }
    .likeArea .item {
      display: flex;
      align-items: center;
      margin-bottom: 10px; }
      .likeArea .item .likeBtn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        ox-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
        transition: all .3s; }
        .likeArea .item .likeBtn:hover {
          opacity: 1.0; }
        .likeArea .item .likeBtn .iine {
          font-size: 10px; }
      .likeArea .item .count {
        color: #fff;
        font-size: 18px;
        margin-left: 10px; }
      .likeArea .item.like .likeBtn {
        color: #EC670B; }
        .likeArea .item.like .likeBtn .icon {
          fill: #EC670B;
          width: 21px;
          height: 23px; }
      .likeArea .item.dislike .likeBtn {
        color: #309FD1; }
        .likeArea .item.dislike .likeBtn .icon {
          fill: #309FD1;
          width: 30px;
          height: 18px; }
      .likeArea .item.delete a {
        text-decoration: none;
        color: #fff; }
      .likeArea .item.delete .likeBtn {
        background-color: transparent;
        box-shadow: 0 0 0 transparent;
        width: 21px;
        height: 24px;
        border-radius: 0; }
        .likeArea .item.delete .likeBtn .icon {
          width: 21px;
          height: 24px;
          fill: #fff; }
  #topInfo {
    width: 100%;
    background-color: #F7F7EF;
    background-image: url(../images/grid.png);
    padding: 30px; }
    #topInfo .inner {
      background-color: #fff;
      max-width: 1033px;
      width: 95%;
      border-radius: 10px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
      #topInfo .inner .nowDivision {
        display: flex;
        align-items: center;
        padding: 30px; }
        #topInfo .inner .nowDivision .division {
          width: 55px; }
          #topInfo .inner .nowDivision .division img {
            width: 55px;
            height: auto; }
        #topInfo .inner .nowDivision .detail {
          margin-left: 20px; }
          #topInfo .inner .nowDivision .detail .name {
            font-size: 18px; }
          #topInfo .inner .nowDivision .detail .now, #topInfo .inner .nowDivision .detail .next {
            font-size: 14px; }
          #topInfo .inner .nowDivision .detail .bronz {
            color: #D4863C; }
          #topInfo .inner .nowDivision .detail .silver {
            color: #ADAEAE; }
          #topInfo .inner .nowDivision .detail .gold {
            color: #D0AA50; }
          #topInfo .inner .nowDivision .detail .rookie {
            color: #5FA254; }
      #topInfo .inner .count {
        display: flex; }
        #topInfo .inner .count .ended, #topInfo .inner .count .leftover {
          border-left: 1px solid #EFEFEF;
          padding: 30px 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          line-height: 1; }
          #topInfo .inner .count .ended .title, #topInfo .inner .count .leftover .title {
            font-size: 13px;
            color: #8E8E8E; }
          #topInfo .inner .count .ended .num, #topInfo .inner .count .leftover .num {
            font-size: 50px;
            color: #FF8200; }
            #topInfo .inner .count .ended .num span, #topInfo .inner .count .leftover .num span {
              font-size: 13px;
              color: #8E8E8E; }
        #topInfo .inner .count .ended .num {
          color: #CFC385; }
  #movieInfo {
    width: 100%;
    background-color: #F7F7EF;
    padding: 10px 0; }
    #movieInfo.blue {
      background-color: #EAF0F9; }
      #movieInfo.blue .inner {
        width: min(800px, 90%); }
    #movieInfo.orange .inner {
      width: min(800px, 90%); }
    #movieInfo .inner {
      width: 688px;
      margin: 0 auto;
      display: flex; }
      #movieInfo .inner .txt .flex {
        display: flex;
        align-items: flex-end; }
        #movieInfo .inner .txt .flex.vAlinC {
          align-items: center; }
        #movieInfo .inner .txt .flex .cat {
          margin-left: 20px; }
      #movieInfo .inner .txt > span {
        display: block;
        font-size: 14px;
        color: #8E8E8E;
        font-weight: 700; }
      #movieInfo .inner .txt h2 {
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        margin-top: 5px; }
      #movieInfo .inner .txt .myDivision {
        display: flex;
        align-items: center;
        margin-top: 10px; }
        #movieInfo .inner .txt .myDivision .medal {
          width: 21px; }
          #movieInfo .inner .txt .myDivision .medal img {
            width: 100%;
            height: auto; }
        #movieInfo .inner .txt .myDivision p {
          font-size: 15px;
          font-weight: 700;
          padding-left: .5em;
          line-height: 1; }
      #movieInfo .inner .txt .cat {
        margin-top: 10px; }
        #movieInfo .inner .txt .cat dl {
          display: flex;
          font-size: 15px; }
          #movieInfo .inner .txt .cat dl dt {
            margin-right: 1em; }
          #movieInfo .inner .txt .cat dl dd {
            color: #8E8E8E; }
          #movieInfo .inner .txt .cat dl dt.orange {
            color: #EC670B;
            font-weight: bold; }
          #movieInfo .inner .txt .cat dl dd.orange {
            color: #EC670B;
            font-weight: bold; }
      #movieInfo .inner .result {
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #fff;
        margin-top: 10px;
        padding-top: 10px; }
        #movieInfo .inner .result .title {
          font-size: 20px;
          font-weight: 700;
          color: #0268B2;
          display: flex;
          align-items: center;
          width: 100%;
          padding-bottom: 10px; }
        #movieInfo .inner .result .success {
          width: 51px;
          display: flex;
          align-items: center;
          margin-left: 20px; }
          #movieInfo .inner .result .success .icon {
            width: 51px;
            height: 51px;
            fill: #0268B2; }
        #movieInfo .inner .result .likes {
          border: 1px solid #DEDEDB;
          display: flex;
          margin-left: 20px;
          background-color: #fff; }
          #movieInfo .inner .result .likes .item {
            display: flex;
            align-items: center;
            padding: 0 10px 10px 10px; }
            #movieInfo .inner .result .likes .item + .item {
              border-left: 1px solid #DEDEDB; }
            #movieInfo .inner .result .likes .item.like .likeBtn {
              color: #EC670B; }
              #movieInfo .inner .result .likes .item.like .likeBtn .icon {
                fill: #EC670B; }
            #movieInfo .inner .result .likes .item.like .count {
              color: #EC670B; }
            #movieInfo .inner .result .likes .item.dislike .likeBtn {
              color: #0268B2; }
              #movieInfo .inner .result .likes .item.dislike .likeBtn .icon {
                fill: #0268B2; }
            #movieInfo .inner .result .likes .item.dislike .count {
              color: #0268B2; }
            #movieInfo .inner .result .likes .item .likeBtn {
              width: 40px;
              height: 35px; }
              #movieInfo .inner .result .likes .item .likeBtn .iine {
                font-size: 10px;
                line-height: 1; }
              #movieInfo .inner .result .likes .item .likeBtn .icon {
                width: 30px;
                height: 22px; }
            #movieInfo .inner .result .likes .item .count {
              padding-top: 15px;
              font-size: 22px;
              line-height: 1; }
        #movieInfo .inner .result .points {
          display: flex;
          border: 1px solid #DEDEDB;
          margin-left: 20px;
          background-color: #fff; }
          #movieInfo .inner .result .points .line {
            display: flex;
            align-items: center;
            line-height: 1;
            padding: 0 10px; }
            #movieInfo .inner .result .points .line .tit {
              font-size: 12px;
              color: #8E8E8E; }
            #movieInfo .inner .result .points .line .point {
              font-size: 18px;
              margin-left: 15px;
              font-weight: 700; }
            #movieInfo .inner .result .points .line .limit {
              font-size: 14px;
              height: 18px;
              padding-top: 4px;
              margin-left: 3px; }
          #movieInfo .inner .result .points .member {
            display: flex;
            border-left: 1px solid #DEDEDB;
            min-width: 100px;
            justify-content: center; }
            #movieInfo .inner .result .points .member.blue {
              background-color: #E6F7FF;
              color: #0089C7; }
            #movieInfo .inner .result .points .member.orange {
              background-color: #FFFAF5;
              color: #EC670B; }
            #movieInfo .inner .result .points .member .memberInner {
              padding: 10px;
              text-align: center; }
              #movieInfo .inner .result .points .member .memberInner span {
                display: block; }
                #movieInfo .inner .result .points .member .memberInner span.person {
                  font-size: 10px; }
              #movieInfo .inner .result .points .member .memberInner .point {
                font-size: 18px; }
                #movieInfo .inner .result .points .member .memberInner .point a.comment .icon {
                  width: 20px;
                  height: 16px;
                  fill: #EC670B; }
            #movieInfo .inner .result .points .member .edit {
              padding: 10px 10px 10px 0; }
              #movieInfo .inner .result .points .member .edit a {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #0268B2;
                border-radius: 10px;
                background-color: #fff; }
                #movieInfo .inner .result .points .member .edit a .icon {
                  width: 15px;
                  height: 15px; }
  .trainingList {
    max-width: 1033px;
    width: 95%;
    margin: 0 auto; }
    .trainingList .listHead {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-top: 40px; }
      .trainingList .listHead h2 {
        display: flex;
        align-items: flex-end;
        font-size: 18px;
        line-height: 1;
        font-weight: 400; }
        .trainingList .listHead h2 .medal {
          width: 30px;
          display: block;
          margin-right: 10px;
          -webkit-transform: translateY(10px);
                  transform: translateY(10px); }
          .trainingList .listHead h2 .medal img {
            width: 30px;
            height: auto; }
        .trainingList .listHead h2 .sub {
          font-size: 12px;
          margin-left: 15px; }
      .trainingList .listHead .perecnt {
        display: flex; }
        .trainingList .listHead .perecnt .gauge {
          width: 75px;
          height: 12px;
          border: 1px solid #B7B7B7;
          border-radius: 5px;
          position: relative; }
          .trainingList .listHead .perecnt .gauge span {
            display: block;
            position: absolute;
            top: -1px;
            left: 0;
            height: 12px;
            width: 100%;
            border: 1px solid #FF8200;
            border-radius: 5px;
            background-color: #FF8200; }
        .trainingList .listHead .perecnt .num {
          width: 3em;
          height: 12px;
          font-size: 12px;
          line-height: 1;
          text-align: right; }
  .task {
    display: flex;
    align-items: flex-start;
    background-color: #F7F7EF;
    padding: 40px 30px;
    margin-top: 40px; }
    .task.gray {
      background-color: #F2F2F2; }
    .task.darkgray {
      background-color: #A0A0A0; }
    .task .title {
      order: 2;
      font-size: 18px;
      font-weight: 700;
      margin-left: 20px; }
      .task .title span {
        display: block;
        font-size: 14px;
        color: #404040; }
      .task .title .slideBtn {
        display: none; }
    .task .thumbnail {
      order: 1;
      position: relative; }
      .task .thumbnail .time {
        min-width: 56px;
        height: 26px;
        padding: 0 .5em;
        background-color: #000;
        position: absolute;
        bottom: 5px;
        right: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px; }
  .advance {
    order: 3;
    margin-left: auto; }
    .advance.sp-sub-advance {
      padding: 25px 0;
    }
    .advance ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      width: 296px;
      position: relative;
      z-index: 10; }
      .advance ul li {
        width: 74px; }
        .advance ul li .sp-learning-note {
          position: absolute;
          top: -22px;
          text-align: center;
          left: 16px;
          color: #000;
          font-weight: 900;
        }
        .advance ul li .btn.sp-btn-text {
          border: none;
        }
        .advance ul li .btn.sp-btn-text .status {
          top: 2px;
          bottom: 0;
          left: 4px;
          padding: 10px;
          font-size: 17px;
          line-height: 20px;
          color: #000;
          font-weight: 400;
        }
        .advance ul li .sp-top-content-evaluation .btn {
          display: none;
        }
        .advance ul li .warning {
          color: red;
          font-size: 9px;
          margin-top: 10px;
          text-decoration: underline;
        }
        .advance ul li .p-relative {
          position: relative;
        }
        .advance ul li .sp-button-note {
          position: absolute;
          top: 0;
          left: 73px;
          width: 146px;
          z-index: 1;
          background: #ccc;
          min-height: 61px;
          font-size: 11px;
          padding: 5px;
        }
        
        .advance ul li .btn.sp-btn-icon {
          cursor: pointer;
          box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
          transition: all .3s;
        }
        .advance ul li .sp-btn-icon:hover {
          opacity: .7;
        }
        .advance ul li .sp-content-code .warning {
          position: absolute;
          top: -43px;
          font-size: 9px;
          width: 77px;
          color: red;
          text-decoration: underline;
        }
        .advance ul li .sp-content-code .back-review-type {
          font-size: 12px;
          color: blueviolet;
          text-decoration: underline;
          cursor: pointer;
          text-align: center;
        }
        .advance ul li .d-none {
          display: none;
        }
        .advance ul li .name {
          font-size: 13px;
          color: #8E8E8E;
          display: block;
          text-align: center;
          line-height: 1; }
          .advance ul li .name.orange {
            color: #FF8200; }
        .advance ul li .dot {
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 5px;
          margin: 10px auto 0;
          background-color: #8E8E8E;
          position: relative; }
          .advance ul li .dot.dot-d-none {
            display: none;
          }
          .advance ul li .dot.orange {
            background-color: #FF8200; }
        .advance ul li + li .dot:before {
          content: "";
          display: block;
          width: 74px;
          height: 2px;
          background-color: #8E8E8E;
          position: absolute;
          top: 4px;
          right: 5px;
          z-index: -1; }
        .advance ul li + li .dot.orange:before {
          background-color: #FF8200; }
        .advance ul li .btn {
          width: 61px;
          height: 61px;
          border: 2px solid #FF8200;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 10px auto 0;
          background-color: #fff;
          position: relative; }
          .advance ul li .btn.d-none {
            display: none;
          }
          .advance ul li .btn .icon {
            width: 45px;
            height: 45px;
            fill: #FF8200; }
            .advance ul li .btn .icon.failure {
              fill: #0089C7; }
          .advance ul li .btn .status {
            display: block;
            font-size: 13px;
            line-height: 1;
            position: absolute;
            bottom: 3px;
            right: 3px;
            color: #FF8200;
            font-weight: 700; }
          .advance ul li .status.position-status {
            top: 3px;
            left: 3px;
            color: #000;
          }
          .advance ul li .btn.gray {
            background-color: #DEDEDB;
            border-color: #DEDEDB; }
            .advance ul li .btn.gray .icon {
              fill: #8E8E8E; }
          .advance ul li .btn.failure {
            border-color: #0089C7; }
            .advance ul li .btn.failure .icon {
              fill: #0089C7; }
          .advance ul li .btn.orange {
            background-color: #FFD5AA; }
        .advance ul li a {
          display: block;
          width: 61px;
          height: 61px;
          margin: 10px auto 0;
          transition: all .3s; }
          .advance ul li a:hover {
            opacity: .7; }
            .advance ul li a:hover .btn {
              box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3); }
          .advance ul li a .btn {
            box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
            margin: 0;
            transition: all .3s; }
        .advance ul li.message {
          width: 100%; }
          .advance ul li.message.tar {
            text-align: right; }
          .advance ul li.message.tac {
            text-align: center; }
          .advance ul li.message.tal {
            text-align: left; }
          .advance ul li.message span.orange {
            color: #FF8200; }
          .advance ul li.message span.blue {
            color: #265491; }
          .advance ul li.message span.red {
            color: #E10000; }
      .advance ul .check {
        text-align: center;
        font-size: 13px;
        line-height: 1;
        color: #0089C7;
        margin-top: 5px;
        display: block; }
        .advance ul .check.orange {
          color: #FF8200; }
      .advance ul .retry {
        text-align: center;
        font-size: 13px;
        line-height: 1;
        color: #E10000;
        margin-top: 5px;
        display: block; }
  .checkList {
    max-width: 688px;
    width: 95%;
    margin: 10px auto 0; }
    .checkList.blue {
      max-width: 800px; }
    .checkList h2 {
      font-size: 20px;
      vertical-align: middle;
      line-height: 1; }
      .checkList h2 .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle; }
    .checkList .read {
      font-size: 15px;
      margin-top: 2em; }
    .checkList h3 {
      font-size: 16px;
      color: var(--thmeCloro);
      font-weight: 700;
      margin-top: 10px; }
    .checkList .persons {
      display: flex;
      justify-content: flex-end;
      width: 100%; }
      .checkList .persons.noComment span {
        width: 60px; }
      .checkList .persons span {
        width: 90px;
        text-align: center;
        font-size: 14px;
        color: #8E8E8E;
        margin-left: auto;
        margin-top: 10px; }
        .checkList .persons span + span {
          margin: 0;
        margin-top: 10px; }
      .checkList .persons + ul.checkUl {
        margin-top: 0; }
    .checkList ul.checkUl {
      list-style: none;
      border: 1px solid #DEDEDB;
      margin-top: 5px; }
      .checkList ul.checkUl.inPerson li {
        padding: 0; }
        .checkList ul.checkUl.inPerson li span {
          padding: 10px 0; }
          .checkList ul.checkUl.inPerson li span.num {
            padding: 10px 0 10px 10px; }
      .checkList ul.checkUl.noComment li .person {
        width: 60px; }
      .checkList ul.checkUl li {
        padding: 10px;
        display: flex;
        line-height: 1.5; }
        .checkList ul.checkUl li .num {
          width: 2em; }
        .checkList ul.checkUl li .txt {
          flex: 1; }
          .checkList ul.checkUl li .txt .redTxt {
            display: block;
            font-size: 13px;
            color: #f00;
            padding: 0; }
        .checkList ul.checkUl li .person {
          width: 90px;
          border-left: 1px solid #DEDEDB;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center; }
          .checkList ul.checkUl li .person .name {
            display: none; }
          .checkList ul.checkUl li .person a.comment .icon {
            width: 20px;
            height: 16px;
            fill: #FF8200;
            margin-right: 5px; }
          .checkList ul.checkUl li .person a.edit {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #0268B2;
            border-radius: 10px;
            background-color: #fff;
            margin-left: 10px; }
            .checkList ul.checkUl li .person a.edit .icon {
              width: 15px;
              height: 15px; }
        .checkList ul.checkUl li + li {
          border-top: 1px solid #DEDEDB; }
        .checkList ul.checkUl li:nth-of-type(even) {
          background-color: #F2F2F2; }
    .checkList .bottomBtns {
      margin-top: 40px;
      display: flex;
      justify-content: space-between; }
      .checkList .bottomBtns a {
        display: block;
        transition: all .3s; }
        .checkList .bottomBtns a:hover {
          opacity: .7; }
        .checkList .bottomBtns a.btn {
          min-width: 180px;
          border: 2px solid var(--thmeCloro);
          border-radius: 10px;
          text-align: center;
          font-size: 15px;
          line-height: 1;
          padding: 10px 15px;
          display: flex;
          justify-content: space-between;
          color: var(--thmeCloro);
          font-weight: 700;
          text-decoration: none; }
          .checkList .bottomBtns a.btn.short {
            min-width: 120px; }
          .checkList .bottomBtns a.btn.toRight {
            margin-left: auto;
            margin-right: 20px; }
          .checkList .bottomBtns a.btn .icon {
            width: 15px;
            height: 15px;
            fill: var(--thmeCloro);
            display: block; }
          .checkList .bottomBtns div.order1 {
            text-align: end;
          }
          .checkList .bottomBtns div.sub-order1 {
            padding-bottom: 40px;
            position: relative;
          }
          .checkList .bottomBtns div.sub-order1 a {
            padding-left: 40px;
          }
          .checkList .bottomBtns div.sub-order1 p {
            position: absolute;
            padding: 10px 0;
            right: -95px;
            width: 380px;
            font-size: 13px;
          }
          .checkList .bottomBtns a.btn.orange {
            background-color: var(--thmeCloro);
            color: #fff; }
            .checkList .bottomBtns a.btn.orange .icon {
              fill: #fff; }
  #movingWrap {
    width: 100%;
    height: calc(100vh - 135px);
    background-color: #F7F7EF;
    background-image: url(../images/grid.png);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    #movingWrap.movingWrap-modal4 {
      height: 100%;
      background-image: none;
    }
    #movingWrap.movingWrap-modal4 .modal__content {
      text-align: center;
    }
    #movingWrap.blue {
      background-color: #DAE7F8; }
    #movingWrap + footer {
      margin-top: 0;
      position: relative;
      z-index: 1; }
    #movingWrap .inner h2.roundTitle {
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      width: 136px;
      height: 23px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px; }
      #movingWrap .inner h2.roundTitle.orange {
        color: #fff;
        background-color: var(--thmeCloro); }
    #movingWrap .inner h2.slashTitle {
      font-size: 22px;
      text-align: center;
      font-weight: 700;
      color: var(--thmeCloro); }
      #movingWrap .inner h2.slashTitle:before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: var(--thmeCloro);
        -webkit-transform: rotate(60deg);
                transform: rotate(60deg);
        margin-right: 20px; }
      #movingWrap .inner h2.slashTitle:after {
        content: "";
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: var(--thmeCloro);
        -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
        margin-left: 20px; }
    #movingWrap .inner p.movingInfo {
      font-size: 23px;
      text-align: center;
      font-weight: 700;
      line-height: 1.6;
      margin-top: 30px; }
      #movingWrap .inner p.movingInfo span {
        color: var(--thmeCloro); }
    #movingWrap .confirmation {
      display: flex;
      align-items: center;
      margin-top: 30px; }
      #movingWrap .confirmation video {
        display: block;
        width: auto;
        height: 235px; }
      #movingWrap .confirmation .movieButton {
        margin-top: 0;
        margin-left: 30px; }
    #movingWrap .movieButton {
      width: 240px;
      height: 235px;
      border-radius: 15px;
      border: 2px solid var(--thmeCloro);
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 50px auto 0;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      text-decoration: none; }
      #movingWrap .movieButton:hover {
        opacity: .7; }
      #movingWrap .movieButton .icon {
        fill: var(--thmeCloro);
        width: 140px;
        height: auto; }
      #movingWrap .movieButton .txt {
        font-size: 26px;
        font-weight: 700;
        color: var(--thmeCloro);
        text-align: center; }
    #movingWrap .btn {
      min-width: 179px;
      height: 44px;
      display: flex;
      align-items: center;
      text-decoration: none;
      padding: 0 10px;
      background-color: #fff;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); }
      #movingWrap .btn:hover {
        opacity: .7; }
      #movingWrap .btn .icon {
        fill: var(--thmeCloro);
        width: 8px;
        height: 15px;
        margin-right: .8em; }
        #movingWrap .btn .icon.video {
          width: 30px;
          height: auto; }
      #movingWrap .btn .txt {
        font-size: 16px;
        line-height: 1;
        font-weight: 700; }
      #movingWrap .btn.lb {
        position: absolute;
        left: 30px;
        bottom: 30px; }
      #movingWrap .btn.orange {
        color: var(--thmeCloro);
        border: 2px solid var(--thmeCloro);
        border-radius: 10px;
        color: var(--thmeCloro); }
    #movingWrap .uploadInfo {
      display: flex;
      align-items: center;
      margin-top: 30px; }
      #movingWrap .uploadInfo p {
        font-size: 18px; }
        #movingWrap .uploadInfo p .time {
          color: var(--thmeCloro); }
      #movingWrap .uploadInfo .progress {
        width: 93px;
        height: 10px;
        border: 1px solid #B7B7B7;
        border-radius: 5px;
        background-color: #fff;
        position: relative;
        margin-left: 30px; }
        #movingWrap .uploadInfo .progress span {
          display: block;
          position: absolute;
          top: -1;
          left: -1;
          background-color: var(--thmeCloro);
          border-radius: 5px;
          width: 30%;
          height: 100%; }
      #movingWrap .uploadInfo .num {
        margin-left: 20px;
        font-size: 18px; }
  form.hide {
    display: none; }
  #shopHeader {
    background-color: #DAE7F8;
    background-image: url(../images/grid.png);
    padding: 20px 0; }
    #shopHeader .inner {
      max-width: 1034px;
      width: 95%;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      padding: 0 20px; }
      #shopHeader .inner .shop {
        font-size: 18px;
        color: #000; }
      #shopHeader .inner .area {
        font-size: 12px;
        color: #8E8E8E;
        margin-left: 40px; }
      #shopHeader .inner .count {
        margin: 0 0 0 auto;
        display: flex;
        align-items: center;
        border-left: 1px solid #309FD1;
        padding-left: 10px;
        cursor: pointer; }
        #shopHeader .inner .count .tit {
          color: #8E8E8E;
          font-size: 13px; }
        #shopHeader .inner .count .num {
          font-size: 50px;
          color: #265491;
          margin-left: 10px; }
          #shopHeader .inner .count .num span {
            font-size: 13px;
            color: #4A4A4A;
            margin-left: 10px; }
  .shopTab {
    border-bottom: 3px solid #265491;
    margin-top: 30px; }
    .shopTab ul {
      display: flex;
      max-width: 1034px;
      width: 95%;
      margin: 0 auto;
      list-style: none; }
      .shopTab ul li {
        background-color: #F2F2F2;
        border-radius: 5px 5px 0 0;
        padding: 5px 30px;
        font-size: 18px;
        color: #8E8E8E;
        cursor: pointer; }
        .shopTab ul li + li {
          margin-left: 2px; }
        .shopTab ul li.active {
          background-color: #265491;
          color: #fff; }
  .tabArea {
    max-width: 1034px;
    width: 95%;
    margin: 0 auto; }
    .tabArea .title {
      font-size: 26px;
      font-weight: 700;
      margin-top: 40px; }
    .tabArea .grade {
      display: flex;
      margin-top: 40px; }
      .tabArea .grade .medal {
        width: 30px;
        height: 41px; }
      .tabArea .grade .gradeName {
        font-size: 18px;
        margin-left: 10px; }
        .tabArea .grade .gradeName span {
          display: inline-block;
          margin-left: 5px; }
          .tabArea .grade .gradeName span.num {
            font-size: 30px; }
          .tabArea .grade .gradeName span.uni {
            font-size: 13px; }
    .tabArea .list ul {
      list-style: none;
      margin-top: 20px; }
      .tabArea .list ul li {
        background-color: #EAF0F9;
        margin-top: 3px;
        display: flex;
        justify-content: space-between; }
    .tabArea .list ul.right li {
      text-align: right;
      background-color: #EAF0F9;
      padding-top: 6px;
      padding-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: flex-end; }
        .tabArea .list ul li .left {
          display: flex;
          align-items: center;
          padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 20px; }
          .tabArea .list ul li .left a {
            font-size: 22px;
            color: #265491; }
          .tabArea .list ul li .left span {
            margin-left: 10px; }
            .tabArea .list ul li .left span.goldName {
              font-size: 22px;
              color: #000;
              margin-left: 0; }
            .tabArea .list ul li .left span.position {
              font-size: 12px;
              color: #8E8E8E; }
            .tabArea .list ul li .left span.during {
              background-color: #508AD8;
              font-size: 12px;
              color: #fff;
              line-height: 1;
              border-radius: 10px;
              padding: 5px 10px;
              text-align: center; }
            .tabArea .list ul li .left span.team {
              font-size: 16px;
              color: #8E8E8E; }
        .tabArea .list ul li .right {
          list-style: none;
          display: inline-block;
          padding: 0 20px 0 0;
          margin-top: 0; }
          .tabArea .list ul li .right li .during {
            display: block;
            background-color: #265491;
            font-size: 16px;
            color: #fff;
            line-height: 1;
            border-radius: 10px;
            padding: 5px 10px; }
          .tabArea .list ul li .right li .btn a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 105px;
            height: 40px;
            margin-left: 10px;
            border-radius: 10px;
            background-color: #fff;
            border: 1px solid #265491;
            text-decoration: none; }
            .tabArea .list ul li .right li .btn a .icon {
              width: 35px;
              height: 34px;
              fill: #265491; }
            .tabArea .list ul li .right li .btn a span {
              margin-left: 0;
              font-size: 18px;
              color: #265491;
              font-weight: 700; }
          .tabArea .list ul li .right li .btn span {
            display: block;
            font-size: 12px;
            line-height: 1.3; }
            .tabArea .list ul li .right li .btn span.blue {
              color: #265491; }
            .tabArea .list ul li .right li .btn span.red {
              color: #E10000; }
    .tabArea .report {
      margin-top: 60px; }
      .tabArea .report .title {
        font-size: 18px;
        font-weight: 700;
        border-bottom: 1px solid #DEDEDB;
        padding-bottom: 15px; }
      .tabArea .report .reportHeader {
        display: flex;
        align-items: center;
        font-size: 15px;
        margin-top: 20px; }
        .tabArea .report .reportHeader .shopName {
          width: 40%; }
        .tabArea .report .reportHeader .rate {
          width: 20%;
          display: flex;
          align-items: center; }
      .tabArea .report .reportList {
        list-style: none; }
        .tabArea .report .reportList li {
          background-color: #EAF0F9;
          display: flex; }
          .tabArea .report .reportList li .shop {
            width: 40%; }
          .tabArea .report .reportList li .rates {
            width: 60%;
            display: flex;
            align-items: center; }
            .tabArea .report .reportList li .rates .rate {
              width: calc((100% - 30px) / 3);
              padding-left: 10px; }
              .tabArea .report .reportList li .rates .rate span {
                display: inline-block;
                width: 3em;
                text-align: right; }
                .tabArea .report .reportList li .rates .rate span:nth-of-type(1) {
                  margin-right: 1em; }
          .tabArea .report .reportList li:nth-of-type(even) {
            background-color: #F2F2F2; }
  .waiting {
    display: none; }
    .waiting .wrap {
      max-width: 1034px;
      width: 95%;
      margin: 40px auto 0;
      background-color: #EFEFEF;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 20px; }
      .waiting .wrap p {
        color: #265491;
        font-size: 16px; }
      .waiting .wrap .close {
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #265491;
        position: absolute;
        top: 50%;
        right: 10px;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%); }
        .waiting .wrap .close .icon {
          width: 14px;
          height: 14px;
          fill: #265491;
          margin-right: 10px; }
  /* ココから下には記入禁止 */
  .forSP {
    display: none !important; }
  .bg_orange {
    background-color: #FF8200 !important; }
  .ff_orange {
    color: #FF8200 !important; }
  .bg_blue {
    background-color: #265491 !important; }
  .ff_blue {
    color: #265491 !important; } }

/*# sourceMappingURL=map/styles.css.map */

@media screen and (max-width: 992px) {
  .checkList .bottomBtns div.sub-order1 p {
    right: 0;
  }
}