@charset "UTF-8";

/* Scss Document */

body {

  position: relative;

  overflow: hidden; }



.training_menu {

  margin: 0 auto 50px; }



/***************************************/

.message_box {

  max-width: 1280px;

  width: calc(100% - 80px);

  margin: 0 auto 100px;

  position: relative; }

  .message_box .message_top {

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    align-items: stretch;

    padding: 0 40px 60px;

    margin: 0 auto 45px; }

    .message_box .message_top .txt {

      width: 45%;

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      flex-direction: column;

      flex-wrap: wrap;

      -webkit-box-pack: justify;

      -ms-flex-pack: justify;

      -webkit-justify-content: flex-end;

      justify-content: flex-end;

      align-items: flex-end;

      padding: 0 40px 10px;

      color: #20325f;

      z-index: 1; }

      .message_box .message_top .txt p {

        font: 26px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 400;

        margin: 0 0 20px;

        text-align: left;

        width: 100%;

        max-width: 360px; }

      .message_box .message_top .txt dl {

        width: 100%;

        max-width: 360px;

        text-align: left; }

      .message_box .message_top .txt dt {

        font: 16px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 400;

        border: 1px solid #20325f;

        width: 100px;

        text-align: center;

        margin: 0 0 5px;

        padding: 5px 0; }

      .message_box .message_top .txt dd {

        margin: 0 0 20px;

        font: 16px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 400; }

    .message_box .message_top .message_pic {

      width: 55%;

      position: relative;

      padding: 0 0 0 40px; }

      .message_box .message_top .message_pic:before {

        position: absolute;

        content: "";

        display: block;

        width: 100vw;

        left: 0;

        background-color: #ebf1fa;

        height: 300px;

        bottom: -60px;

        border-radius: 20px; }

      .message_box .message_top .message_pic > div {

        width: 445px;

        height: 333px;

        transform: scale(0.9);

        position: relative;

        overflow: hidden;

        border-radius: 20px; }

      .message_box .message_top .message_pic img {

        border-radius: 20px;

        position: absolute;

        top: 50%;

        left: 50%;

        -webkit-transform: translate(-50%, -50%);

        /* Safari用 */

        transform: translate(-50%, -50%);

        height: 100%;

        width: auto; }

  .message_box .message_item {

    max-width: 1080px;

    width: calc(100% - 100px);

    border-left: 7px solid #20325f;

    padding: 0 0 30px 40px;

    margin: 0 auto; }

    .message_box .message_item h2 {

      font: 30px/1.5em 'Klee One', cursive;

      margin: 0 0 20px; }

    .message_box .message_item p {

      font: 16px/2.4em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

      font-weight: 400;

      text-align: justify;

      text-justify: inter-ideograph;

      margin: 0 0 20px; }



.message_box:nth-of-type(2n) .message_top .txt {

  order: 2; }

.message_box:nth-of-type(2n) .message_top .message_pic {

  order: 1;

  padding: 0 40px 0 0; }

  .message_box:nth-of-type(2n) .message_top .message_pic:before {

    left: auto;

    right: 0; }



.training_btm_box {

  margin: 250px 0 0; }



@media (max-width: 1280px) {

  .message_box .message_top .message_pic > div {

    width: 500px;

    height: 375px; }



  .message_box:nth-of-type(2n) .message_top {

    padding: 0 0 60px 0; }

    .message_box:nth-of-type(2n) .message_top .txt {

      order: 2; }

    .message_box:nth-of-type(2n) .message_top .message_pic {

      order: 1;

      padding: 0 40px 0 0; } }

/*max-width:1280px*/

@media (max-width: 1024px) {

  .message_box {

    max-width: 1280px;

    width: calc(100% - 80px);

    margin: 0 auto 100px;

    position: relative; }

    .message_box .message_top {

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      flex-direction: column;

      flex-wrap: wrap;

      -webkit-box-pack: justify;

      -ms-flex-pack: justify;

      -webkit-justify-content: flex-start;

      justify-content: flex-start;

      align-items: center;

      padding: 0 !important;

      margin: 0 auto 45px;

      position: relative; }

      .message_box .message_top:before {

        position: absolute;

        content: "";

        display: block;

        width: 120vw;

        height: 75%;

        top: auto;

        bottom: 0;

        left: 50%;

        -webkit-transform: translate(-50%, 0%);

        /* Safari用 */

        transform: translate(-50%, 0%);

        background-color: #ebf1fa; }

      .message_box .message_top .txt {

        order: 2;

        width: 100%;

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        flex-direction: column;

        flex-wrap: wrap;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        -webkit-justify-content: flex-end;

        justify-content: flex-end;

        align-items: flex-end;

        padding: 20px 40px 15px;

        color: #20325f;

        z-index: 1; }

        .message_box .message_top .txt p {

          width: 100%;

          max-width: 400px;

          margin: 0 auto 20px; }

        .message_box .message_top .txt dl {

          width: 100%;

          max-width: 400px;

          margin: 0 auto;

          text-align: left; }

      .message_box .message_top .message_pic {

        order: 1;

        width: 100%;

        position: relative;

        padding: 0 !important; }

        .message_box .message_top .message_pic:before {

          display: none; }

        .message_box .message_top .message_pic > div {

          width: 500px;

          height: 375px;

          margin: 0 auto; }

    .message_box .message_item {

      width: 100%;

      padding: 0 40px 30px 40px;

      margin: 0 auto; }



  .training_btm_box {

    margin: 150px 0 0; } }

/*max-width:1024px*/

@media (max-width: 768px) {

  .message_box {

    width: 100%;

    margin: 0 auto 100px; }

    .message_box .message_top {

      margin: 0 auto 45px;

      position: relative; }

      .message_box .message_top .txt {

        max-width: 500px;

        padding: 20px 60px 15px; }

        .message_box .message_top .txt p {

          max-width: 500px; }

        .message_box .message_top .txt dl {

          max-width: 500px; }

      .message_box .message_top .message_pic {

        width: 100%;

        max-width: 500px;

        padding: 0 30px !important; }

        .message_box .message_top .message_pic > div {

          transform: scale(1);

          width: 100%;

          max-width: 500px;

          padding: 75% 0 0 0;

          height: 0;

          margin: 0 auto; }

    .message_box .message_item {

      width: calc(100% - 30px);

      padding: 0 15px 30px 20px;

      margin: 0 0 0 20px; }

      .message_box .message_item h2 {

        font: 25px/1.5em 'Klee One', cursive;

        margin: 0 0 20px;

        text-align: justify;

        text-justify: inter-ideograph; }

      .message_box .message_item p {

        font: 16px/2.2em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 400;

        text-align: justify;

        text-justify: inter-ideograph;

        margin: 0 0 20px; }



  .training_btm_box {

    margin: 150px 0 0; } }

/*max-width:768px*/

@media (max-width: 480px) {

  .message_box {

    margin: 0 auto 80px; }

    .message_box .message_top {

      margin: 0 auto 30px; }

      .message_box .message_top .txt {

        padding: 20px 20px 10px; }

        .message_box .message_top .txt p {

          font: 22px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

          font-weight: 400;

          max-width: 500px; }

        .message_box .message_top .txt dt {

          font: 14px/1em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

          font-weight: 400;

          width: 80px; }

        .message_box .message_top .txt dd {

          margin: 0 0 20px;

          font: 15px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

          font-weight: 400; }

      .message_box .message_top .message_pic {

        width: 100%;

        max-width: 330px;

        padding: 0 20px !important; }

    .message_box .message_item {

      width: calc(100% - 10px);

      padding: 0 15px 30px 20px;

      margin: 0 0 0 5px; }

      .message_box .message_item p {

        font: 16px/2.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

        font-weight: 400; }



  .training_btm_box {

    margin: 100px 0 0; } }

/*max-width:480px*/