@charset "UTF-8";

@media (min-width: 768px) {
  .under_ttl {
    margin-bottom: 0;
  }
  .under_ttl h1 { font-size: 3.88vw;}
  .under_ttl h1 span { font-size: 8.05vw;}
  .training {
    position: relative;
    z-index: 1;
    background: url(../img/training/new/training_bg.png) no-repeat top center;
    background-size: 100% auto;
    margin-top: -4.6vw;
    padding: 10.7vw 0 0;
  }
  .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 .future {
  }
  .training .future .future_ttl {
    width: 51.5vw;
    margin: 0 auto 4.16vw;
  }
  .training .future .future_lead {
    font-size: 1.38vw;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    margin: 0 auto 4.8vw;
  }
  .training .future .case {
    position: relative;
  }
  .training .future .case.case01 {
    padding: 8.8vw 20.8vw 13.5vw 9.0vw;
    background: url(../img/training/new/case01_bg.png) no-repeat top left;
    background-size: 73.8vw 100%;
    z-index: 1;
    margin: 5.9vw 0 0;
  }
  .training .future .case.case02 {
    padding: 12.1vw 10.7vw 10.4vw 10.4vw;
    background: url(../img/training/new/case02_bg.png) no-repeat top right;
    background-size: 73.8vw 100%;
    z-index: 2;
    margin: -12.3vw 0 6.7vw;
  }
  .training .future .case .flcell {
    display: flex;
    justify-content: space-between;
  }
  .training .future .case.case02 .flcell {
    flex-direction: row-reverse;
  }
  .training .future .case .flcell .fleft {
    width: 50.4%;
  }
  .training .future .case.case02 .flcell .fleft {
    width: 51.4%;
  }
  .training .future .case .flcell .fleft .fleft_ttl {
    margin: 0 0 2.7vw 1.25vw;
    width: 30.2vw;
  }
  .training .future .case.case02 .flcell .fleft .fleft_ttl {
    width: 25vw;
  }
  .training .future .case .flcell .fleft .fleft_ttl p {
    width: max-content;
    height: 3.8vw;
    background: #fff;
    font-size: 2.08vw;
    font-weight: 600;
    line-height: 3.8vw;
    border: 1px solid #000;
    font-family: "Roboto Condensed", sans-serif;
    transform: rotate(-2.98deg);
    margin: 0 0 0.8vw;
    padding: 0 3.125vw;
    /*
    padding: 0 1.0vw;
    */
  }
  .training .future .case .flcell .fleft .fleft_txt {
    font-size: 1.11vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0;
    color: #fff;
  }

  .training .future .case .flcell .fright {
    width: 42.5%;
  }
  .training .future .case.case02 .flcell .fright {
    width: 41.5%;
  }

  .training .option {
    background: url(../img/training/new/option_bg.png) no-repeat center;
    background-size: 100% 100%;
    padding: 6.6vw 0 10.7vw;
  }
  .training .option .ttl_cell {
    margin-bottom: 2.43vw;
  }
  .training .option .ttl_cell h2 {
    margin-bottom: 2.8vw;
  }
  .training .option .ttl_cell p {
    color: #fff;
    font-size: 2.5vw;
  }
  .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: calc(83.1vw - 15.26vw);
    border: 2px solid #fff;
    margin: 0 auto;
    padding: 8.7vw 7.63vw 9.72vw;
    color: #fff;
  }
  .training .option .cell .cell_lead_txt {
    font-size: 1.80vw;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 1.0vw;
    text-align: left;
  }
  .training .option .cell .cell_lead_txt span {
    font-size: 270%;
    font-family: "Roboto Condensed", sans-serif;
  }
  .training .option .cell .cell_lead_img {
    width: 96%;
    margin: 0 auto 4.86vw 0;
  }
  .training .option .cell h3 {
    text-align: center;
    font-size: 2.5vw;
    font-weight: bold;
    line-height: 1;
    position: relative;
    padding: 0 0 1.9vw;
    margin: 0 auto 3.4vw;
  }
  .training .option .cell h3::after {
    display: block;
    position: absolute;
    content: "";
    width: 10vw;
    height: 1px;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .training .option .flcell {
    display: flex;
    justify-content: space-between;
    margin: 0 0 6.0vw;
  }
  .training .option .flcell:last-of-type {
    margin: 0 0 0vw;
  }
  .training .option .flcell .fleft {
    width: 25%;
  }
  .training .option .flcell .fright {
    width: 68.8%;
  }
  .training .option .flcell .fright h4 {
    font-size: 1.38vw;
    font-weight: bold;
    line-height: 1.0;
    margin: 0 0 1.0vw;
    padding: 0 0 1.0vw;
    border-bottom: 1px solid #fff;
  }
  .training .option .cell .fright .fright_txt {
    font-size: 1.11vw;
    font-weight: bold;
    line-height: 2.0;
    margin: 0 0 2.0vw;
  }
  .training .option .cell .fright .fright_txt02 {
    font-size: 1.04vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0 0 0vw;
  }
  .training .option .cell .fright ul {
    display: flex;
    flex-wrap: wrap;
  }
  .training .option .cell .fright ul li {
    width: 32.2%;
    height: 3.3vw;
    margin: 0 1.7% 0.7vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: 1.04vw;
    font-weight: 500;
    color: #000;
    text-align: center;
    background: #fff;
  }
  .training .option .cell .fright ul li:nth-child(3n) {
    margin: 0 0% 0.7vw 0;
  }


  .training .voice {
    background: url(../img/training/new/voice_bg.png) no-repeat top center;
    background-size: 100% 100%;
    padding: 11.4vw 0 4.86vw;
  }
  .training .voice .ttl_cell {
    margin-top: -14.0vw;
  }
  .training .voice .ttl_cell h2 {
    margin-bottom: 2.8vw;
  }
  .training .voice .ttl_cell p {
    font-size: 2.5vw;
  }
  .training .voice ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 83.125vw;
    margin: 0 auto;
  }
  .training .voice ul li {
    width: 48.9%;
    margin: 0 0 3.47vw;
  }
  .training .voice ul li .voice_bg {
    background: #fff;
    padding: 2.7vw 2.9vw;
    border: 1px solid #EAEAEA;
  }
  .training .voice ul li .voice_ttl {
    display: flex;
    align-items: center;
    margin: 0 0 2.2vw;
  }
  .training .voice ul li .voice_ttl .voice_icon {
    width: 13.4%;
    margin: 0 4.8% 0 0;
  }
  .training .voice ul li .voice_ttl .voice_icon img {
    margin: 0 0 0.83vw;
  }
  .training .voice ul li .voice_ttl .voice_icon p {
    text-align: center;
    font-size: 1.38vw;
    font-weight: 500;
    line-height: 1;
    margin: 0;
  }
  .training .voice ul li .voice_ttl h3 {
    font-size: 1.66vw;
    font-weight: bold;
    color: #1AAEFA;
    line-height: 1.66;
    margin: 0 0 0;
    width: 81.8%;
  }
  .training .voice ul li .voice_detail {
    overflow: hidden;
    position: relative;
    max-height: 6.59vw;
  }
  .training .voice ul li .voice_detail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 1) 100%
    );
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }
  .training .voice ul li .voice_detail.isOpen {
    max-height: max-content;
  }
  .training .voice ul li .voice_detail.isOpen::after {
    opacity: 0;
  }
  .training .voice ul li .voice_detail .voice_txt {
    font-size: 1.11vw;
    font-weight: 500;
    line-height: 1.875;
    margin: 0 0 2.4vw;
  }
  .training .voice ul li .voice_detail .voice_txt:last-of-type {
    margin: 0 0 0;
  }
  .training .voice ul li .btnWrap {
    display: block;
    width: 3.125vw;
    height: 3.47vw;
    background: url(../img/training/new/icon_plus.png) no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    margin: 1.38vw 0 0 auto;
  }
  .training .voice ul li .btnWrap.isOpen {
    background: url(../img/training/new/icon_min.png) no-repeat center;
    background-size: 100% 100%;
  }


  .training .bottom_lead {
    background: url(../img/training/new/bottom_lead_bg.png) no-repeat center;
    background-size: 100% 100%;
    padding: 9.86vw 0 9.86vw;
    margin: 0 auto;
  }
  .training .bottom_lead p {
    text-align: center;
    color: #fff;
    font-size: 3.88vw;
    font-weight: 500;
    line-height: 1.4;
  }
  .training .bottom_lead p.txt01 {
    padding-right: 15vw;
  }
  .training .bottom_lead p.txt02 {
    padding-left: 7vw;
  }
  .training .bottom_lead p span {
    font-size: 134%;
  }

}

@media (max-width: 767px) {
  .training .option .ttl_cell {
    margin: 0 auto 8.6vw;
  }
  .under_ttl {
    margin-bottom: 0;
  }
  .under_ttl h1 {
    font-size: 8.53vw;
  }
  .under_ttl h1 span {
    font-size: 181.2%;
    margin-bottom: 3.0vw;
  }
  .training {
    position: relative;
    z-index: 1;
    background: url(../img/training/new/training_bg_sp.png) no-repeat top center;
    background-size: 100% auto;
    margin-top: -11.7vw;
    padding: 29.3vw 0 0;
  }
  .training .ttl_cell {
    margin: 0 auto 6.9vw;
  }
  .training .ttl_cell h2 {
    width: max-content;
    height: 12.5vw;
    background: #fff;
    font-size: 11.73vw;
    font-weight: 600;
    line-height: 12.5vw;
    border: 1px solid #000;
    font-family: "Roboto Condensed", sans-serif;
    transform: rotate(-3.92deg);
    margin: 0 auto 3.2vw;
    padding: 0 3.6vw;
  }
  .training .ttl_cell p {
    text-align: center;
    line-height: 1;
    font-size: 4.2vw;
    color: #000;
    font-weight: 500;
  }

  .training .future {
  }
  .training .future .future_ttl {
    width: 84vw;
    margin: 0 auto 9.3vw;
  }
  .training .future .future_lead {
    font-size: 4.0vw;
    font-weight: 500;
    text-align: center;
    line-height: 1.86;
    margin: 0 auto 16vw;
  }
  .training .future .btn_blk {
    width: 58.9vw;
  }

  .training .future .case {
    position: relative;
  }
  .training .future .case.case01 {
    padding: 25.6vw 7.4vw 0vw 7.4vw;
    background: url(../img/training/new/case01_bg_sp.png) no-repeat top center;
    background-size: 100% auto;
    z-index: 1;
    margin: 28.8vw 0 0;
  }
  .training .future .case.case02 {
    padding: 20.2vw 7.4vw 0vw 7.4vw;
    background: url(../img/training/new/case02_bg_sp.png) no-repeat top center;
    background-size: 100% auto;
    z-index: 2;
    margin: 10.1vw 0 13.8vw;
  }
  .training .future .case .flcell {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .training .future .case .flcell .fleft {
    width: 100%;
    margin: 0 0 19.4vw;
  }
  .training .future .case .flcell .fleft .fleft_ttl {
    margin: 0 0 7.46vw 0vw;
    width: 79.4vw;
  }
  .training .future .case.case02 .flcell .fleft .fleft_ttl {
    width: 62.1vw;
  }
  .training .future .case .flcell .fleft .fleft_ttl p {
    width: max-content;
    height: 11.2vw;
    background: #fff;
    font-size: 5.86vw;
    font-weight: 600;
    line-height: 11.2vw;
    border: 1px solid #000;
    font-family: "Roboto Condensed", sans-serif;
    transform: rotate(-2.98deg);
    margin: 0 0 1.8vw;
    padding: 0 4.0vw;
    /*
    padding: 0 2.5vw;
    */
  }
  .training .future .case .flcell .fleft .fleft_txt {
    font-size: 3.73vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0;
    color: #fff;
  }

  .training .future .case .flcell .fright {
    width: 100%;
  }

  .training .option {
    background: url(../img/training/new/option_bg_sp.png) no-repeat center;
    background-size: 100% 100%;
    padding: 13.8vw 0 30.9vw;
  }
  .training .option .ttl_cell {
    margin-bottom: 6.13vw;
  }
  .training .option .ttl_cell h2 {
    margin-bottom: 5.3vw;
  }
  .training .option .ttl_cell p {
    color: #fff;
    font-size: 6.4vw;
    line-height: 1.33;
  }
  .training .option .lead {
    font-size: 3.73vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0 auto 5.3vw;
    color: #fff;
    width: 84.5vw;
  }
  .training .option .cell {
    width: calc(84.5vw - 5.2vw);
    border: 1px solid #fff;
    margin: 0 auto;
    padding: 20vw 2.6vw 20vw;
    color: #fff;
  }
  .training .option .cell .cell_lead_txt {
    font-size: 3.73vw;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 11.2vw;
    text-align: left;
  }
  .training .option .cell .cell_lead_txt span {
    font-size: 257%;
    font-family: "Roboto Condensed", sans-serif;
  }
  .training .option .cell .cell_lead_img {
    width: 100%;
    margin: 0 auto 13.3vw 0;
  }
  .training .option .cell h3 {
    text-align: center;
    font-size: 5.33vw;
    font-weight: bold;
    line-height: 1;
    position: relative;
    padding: 0 0 3.7vw;
    margin: 0 auto 10.1vw;
  }
  .training .option .cell h3::after {
    display: block;
    position: absolute;
    content: "";
    width: 25.8vw;
    height: 1px;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .training .option .flcell {
    display: flex;
    flex-direction: column;
    margin: 0 auto 20.2vw;
    width: 71.7vw;
  }
  .training .option .flcell:last-of-type {
    margin: 0 auto 0vw;
  }
  .training .option .flcell .fleft {
    width: 36vw;
    margin: 0 auto 5.8vw;
  }
  .training .option .flcell .fright {
    width: 100%;
  }
  .training .option .flcell .fright h4 {
    font-size: 4.26vw;
    font-weight: bold;
    line-height: 1.0;
    margin: 0 0 3.2vw;
    padding: 0 0 3.2vw;
    border-bottom: 1px solid #fff;
  }
  .training .option .cell .fright .fright_txt {
    font-size: 3.73vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0 0 12.0vw;
  }
  .training .option .cell .fright .fright_txt02 {
    font-size: 2.93vw;
    font-weight: 500;
    line-height: 2.0;
    margin: -5.3vw 0 0vw;
  }
  .training .option .cell .fright ul {
    display: flex;
    flex-wrap: wrap;
  }
  .training .option .cell .fright ul li {
    width: 49.4%;
    height: 7.46vw;
    margin: 0 1.2% 1.0vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: 2.93vw;
    font-weight: 500;
    color: #000;
    text-align: center;
    background: #fff;
  }
  .training .option .cell .fright ul li:nth-child(2n) {
    margin: 0 0% 1.0vw 0;
  }


  .training .voice {
    background: url(../img/training/new/voice_bg_sp.png) no-repeat top center;
    background-size: 100% auto;
    padding: 11.4vw 0 18.6vw;
  }
  .training .voice .ttl_cell {
    width: 94.1vw;
    margin: -24.0vw auto 8.0vw;
  }
  .training .voice .ttl_cell .sp_ttl {
    margin-bottom: 6.9vw;
  }
  .training .voice .ttl_cell p {
    font-size: 6.4vw;
  }
  .training .voice ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 84.5vw;
    margin: 0 auto;
  }
  .training .voice ul li {
    width: 100%;
    margin: 0 0 3.4vw;
  }
  .training .voice ul li:last-child {
    margin: 0 0 0vw;
  }
  .training .voice ul li .voice_bg {
    background: #fff;
    padding: 8.0vw 5.3vw 3.2vw;
    border: 1px solid #EAEAEA;
  }
  .training .voice ul li .voice_ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 6.6vw;
  }
  .training .voice ul li .voice_ttl .voice_icon {
    width: 17.8vw;
    margin: 0 auto 4.26vw;
  }
  .training .voice ul li .voice_ttl .voice_icon img {
    margin: 0 auto 2.6vw;
  }
  .training .voice ul li .voice_ttl .voice_icon p {
    text-align: center;
    font-size: 5.3vw;
    font-weight: 500;
    line-height: 1;
    margin: 0;
  }
  .training .voice ul li .voice_ttl h3 {
    font-size: 4.26vw;
    font-weight: bold;
    color: #1AAEFA;
    line-height: 2.0;
    margin: 0 auto 0;
    text-align: center;
  }
  .training .voice ul li .voice_detail {
    overflow: hidden;
    position: relative;
    max-height: 21.3vw;
  }
  .training .voice ul li .voice_detail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 1) 100%
    );
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }
  .training .voice ul li .voice_detail.isOpen {
    max-height: max-content;
  }
  .training .voice ul li .voice_detail.isOpen::after {
    opacity: 0;
  }
  .training .voice ul li .voice_detail .voice_txt {
    font-size: 3.73vw;
    font-weight: 500;
    line-height: 2.0;
    margin: 0 0 8.5vw;
  }
  .training .voice ul li .voice_detail .voice_txt:last-of-type {
    margin: 0 0 0;
  }
  .training .voice ul li .btnWrap {
    display: block;
    width: 9.3vw;
    height: 10.4vw;
    background: url(../img/training/new/icon_plus.png) no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    margin: 2.1vw 0 0 auto;
  }
  .training .voice ul li .btnWrap.isOpen {
    background: url(../img/training/new/icon_min.png) no-repeat center;
    background-size: 100% 100%;
  }


  .training .bottom_lead {
    background: url(../img/training/new/bottom_lead_bg_sp.png) no-repeat center;
    background-size: 100% 100%;
    padding: 22.5vw 0 22.5vw;
    margin: 0 auto;
  }
  .training .bottom_lead p {
    text-align: center;
    color: #fff;
    font-size: 5.33vw;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 auto 9.3vw;
  }
  .training .bottom_lead p:last-of-type {
    margin: 0 auto 0vw;
  }
  .training .bottom_lead p span {
    font-size: 135%;
  }
}