@charset "UTF-8";

@media (min-width: 768px) {
  .under_ttl h1 span { font-size: 8.05vw;}
  .training .flow {
    margin: 0 0 7.08vw;
  }
  .training .inner {
    width: 81.8vw;
    margin: 0 auto 9.0vw;
  }
  .training .ttl_cell {
    margin: 0 auto 6.9vw;
  }
  .training .ttl_cell h2 {
    width: max-content;
    height: 5.2vw;
    background: #fff;
    font-size: 5.0vw;
    font-weight: 600;
    line-height: 5.2vw;
    border: 1px solid #000;
    font-family: "Roboto Condensed", sans-serif;
    transform: rotate(-2.98deg);
    margin: 0 auto 1.38vw;
    padding: 0 1.0vw;
  }
  .training .ttl_cell p {
    text-align: center;
    line-height: 1;
    font-size: 1.38vw;
    color: #000;
    font-weight: 500;
  }
  .training .flow ul {
    display: flex;
    flex-direction: column;
    width: 80.9vw;
    margin: 0 auto;
  }
  .training .flow ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 0 6.25vw;
    margin: 0 0 7.2vw;
    background: url(../img/training/flow_arrow.png) no-repeat bottom center;
    background-size: 100% 3.05vw;
  }
  .training .flow ul li:last-child {
    padding: 0 0 3.6vw;
    margin: 0 0 0vw;
    background: url(../img/training/flow_last.png) no-repeat bottom center;
    background-size: 100% 0.5vw;
  }
  .training .flow ul li::after {
    display: block;
    position: absolute;
    content: "";
    z-index: -1;
  }
  .training .flow ul li:nth-child(1)::after {
    right: -1.9vw;
    top: -6.25vw;
    width: 11.1vw;
    height: 10.2vw;
    background: url(../img/training/num_01.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li:nth-child(2)::after {
    right: -3.5vw;
    top: -6.25vw;
    width: 12.7vw;
    height: 10.2vw;
    background: url(../img/training/num_02.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li:nth-child(3)::after {
    right: -3.5vw;
    top: -6.25vw;
    width: 12.6vw;
    height: 10.2vw;
    background: url(../img/training/num_03.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li:nth-child(4)::after {
    right: -3.5vw;
    top: -6.25vw;
    width: 12.9vw;
    height: 10.2vw;
    background: url(../img/training/num_04.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li .txt_cell {
    width: 57%;
  }
  .training .flow ul li .txt_cell .ttl {
    position: relative;
    margin: 0 0 2.7vw;
  }
  .training .flow ul li .txt_cell .ttl p {
    position: absolute;
    left: -1.0vw;
    top: -3.125vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1AAEFA;
    width: 15.9vw;
    height: 5.7vw;
    color: #fff;
    font-size: 2.22vw;
    font-weight: bold;
    transform: rotate(-2.98deg);
  }
  .training .flow ul li .txt_cell .ttl h3 {
    margin: 0 0 0 17vw;
    font-size: 1.66vw;
    font-weight: bold;
    line-height: 1;
  }
  .training .flow ul li .txt_cell .detail {
    font-size: 1.11vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0 0 0;
  }
  .training .flow ul li .img {
    width: 33.4%;
  }

  .training .option {
    background: url(../img/training/option_bg.png) no-repeat center;
    background-size: 100% 100%;
    padding: 6.6vw 0 10.7vw;
  }
  .training .option .ttl_cell p {
    color: #fff;
  }
  .training .option .lead {
    font-size: 1.17vw;
    font-weight: bold;
    line-height: 2.0;
    width: 48.9vw;
    margin: 0 auto 6.6vw;
    color: #fff;
  }
  .training .option .cell {
    width: 82.5vw;
    border: 2px solid #fff;
    margin: 0 auto;
    padding: 5.0vw 0 3.8vw;
  }
  .training .option .cell img {
    display: block;
    width: 43.75vw;
    margin: 0 auto;
  }
  .training .option .cell ul {
    width: 73.2vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .training .option .cell ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #000;
    font-size: 1.38vw;
    font-weight: 500;
    text-align: center;
    width: 23.7%;
    height: 3.9vw;
    margin: 0 1.7% 1.2vw 0;
  }
  .training .option .cell ul li:nth-child(4n) {
    margin: 0 0% 1.2vw 0;
  }
  .training .option .cell ul li:nth-child(5) {
    font-size: 1.11vw;
  }
}

@media (max-width: 767px) {
  .under_ttl {
    margin-bottom: 8.0vw;
  }
  .under_ttl h1 span {
    font-size: 15.4vw;
  }
  .training .flow {
    margin: 0 0 25.6vw;
  }
  .training .inner {
    width: 81.8vw;
    margin: 0 auto 9.0vw;
  }
  .training .ttl_cell {
    margin: 0 auto 22.6vw;
  }
  .training .option .ttl_cell {
    margin: 0 auto 8.6vw;
  }
  .training .ttl_cell h2 {
    width: max-content;
    height: 15.7vw;
    background: #fff;
    font-size: 11.73vw;
    font-weight: 600;
    line-height: 15.7vw;
    border: 1px solid #000;
    font-family: "Roboto Condensed", sans-serif;
    transform: rotate(-3.92deg);
    margin: 0 auto 3.2vw;
    padding: 0 6.6vw;
  }
  .training .ttl_cell p {
    text-align: center;
    line-height: 1;
    font-size: 4.2vw;
    color: #000;
    font-weight: 500;
  }
  .training .flow ul {
    display: flex;
    flex-direction: column;
    width: 83.4vw;
    margin: 0 auto;
  }
  .training .flow ul li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 24vw;
    margin: 0 0 13.8vw;
    background: url(../img/training/flow_arrow_sp.png) no-repeat bottom center;
    background-size: 100% 11.7vw;
  }
  .training .flow ul li:last-child {
    padding: 0 0 12.2vw;
    margin: 0 0 0vw;
    background: url(../img/training/flow_last_sp.png) no-repeat bottom center;
    background-size: 100% 1.86vw;
  }
  .training .flow ul li::after {
    display: block;
    position: absolute;
    content: "";
    z-index: -1;
  }
  .training .flow ul li:nth-child(1)::after {
    right: 0vw;
    top: -9.3vw;
    width: 32.5vw;
    height: 29.3vw;
    background: url(../img/training/num_01.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li:nth-child(2)::after {
    right: 0vw;
    top: 2.6vw;
    width: 37.0vw;
    height: 28.3vw;
    background: url(../img/training/num_02.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li:nth-child(3)::after {
    right: 0vw;
    top: 2.6vw;
    width: 36.7vw;
    height: 29.3vw;
    background: url(../img/training/num_03.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li:nth-child(4)::after {
    right: 0vw;
    top: 2.6vw;
    width: 37.3vw;
    height: 29.3vw;
    background: url(../img/training/num_04.png) no-repeat center;
    background-size: 100% 100%;
  }
  .training .flow ul li .txt_cell {
    width: 100%;
    margin: 0 0 8.0vw;
  }
  .training .flow ul li .txt_cell .ttl {
    position: relative;
    margin: 0 0 7.3vw;
    display: flex;
    flex-direction: column;
  }
  .training .flow ul li .txt_cell .ttl p {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1AAEFA;
    width: 30.4vw;
    height: 16.2vw;
    color: #fff;
    font-size: 5.33vw;
    font-weight: bold;
    transform: rotate(-2.98deg);
    margin: 0 0 9.3vw;
  }
  .training .flow ul li .txt_cell .ttl h3 {
    margin: 0 0 0 0;
    font-size: 4.8vw;
    font-weight: bold;
    line-height: 1;
  }
  .training .flow ul li .txt_cell .detail {
    font-size: 3.73vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0 0 0;
  }
  .training .flow ul li .img {
    width: 100%;
    margin: 0 0 0vw;
  }

  .training .option {
    background: url(../img/training/option_bg.png) no-repeat center;
    background-size: 100% 100%;
    padding: 12vw 0 25.6vw;
  }
  .training .option h2 {
    width: 94.1vw;
    margin: 0 auto 2.3vw;
    border: none;
    background: none;
    padding: 0;
    height: auto;
    line-height: 1;
  }
  .training .option .ttl_cell p {
    color: #fff;
  }
  .training .option .lead {
    font-size: 3.73vw;
    font-weight: bold;
    line-height: 2.0;
    width: 83.4vw;
    margin: 0 auto 16.6vw;
    color: #fff;
  }
  .training .option .cell {
    width: 83.4vw;
    border: 2px solid #fff;
    margin: 0 auto;
    /*
    padding: 9.3vw 0 9.3vw;
    */
    padding: 28vw 0 28vw;
  }
  .training .option .cell img {
    display: block;
    width: 65.8vw;
    margin: 0 auto;
  }
  .training .option .cell ul {
    width: 72.2vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .training .option .cell ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #000;
    font-size: 2.93vw;
    font-weight: 500;
    text-align: center;
    width: 48.7%;
    height: 7.4vw;
    margin: 0 2.6% 1.3vw 0;
  }
  .training .option .cell ul li:nth-child(2n) {
    margin: 0 0% 1.2vw 0;
  }
  .training .option .cell ul li:nth-child(5) {
    font-size: 2.6vw;
  }
}