@charset "UTF-8";
/*******　人事制度　*******/
.system {
  width: 100%;
  overflow-x: hidden; }
  .system .keyvisual {
    width: 100vw;
    aspect-ratio: 390 / 400;
    background-image: url("../../system/img/system_kv_sp.jpg");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 769px) {
      .system .keyvisual {
        width: 100%;
        aspect-ratio: 1920 / 700;
        background-image: url("../../system/img/system_kv_pc.jpg"); } }
  .system .keyvisual-inner {
    width: 100vw;
    padding-top: calc(115 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .system .keyvisual-inner {
        width: 100%;
        padding-top: calc(375 / 1920 * 100vw); } }
  .system .keyvisual-inner-logo {
    width: calc(330 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .system .keyvisual-inner-logo {
        width: calc(858 / 1920 * 100vw); } }
  .system .keyvisual-inner-lead {
    width: calc(370 / 390 * 100vw);
    margin: calc(35 / 390 * 100vw) auto 0;
    font-size: calc(14 / 390 * 100vw);
    font-weight: 600;
    line-height: 1.7;
    text-align: center; }
    @media only screen and (min-width: 769px) {
      .system .keyvisual-inner-lead {
        width: calc(858 / 1920 * 100vw);
        margin: calc(95 / 1920 * 100vw) auto 0;
        font-size: calc(35 / 1920 * 100vw);
        line-height: 1.65; } }
  .system .outline {
    width: 100%;
    position: relative;
    padding: calc(47 / 390 * 100vw) 0 calc(70 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .system .outline {
        margin: calc(0 / 1080 * 100vw) auto 0;
        padding: calc(125 / 1080 * 100vw) 0 calc(90 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .outline {
        margin: 0px auto 0;
        padding: 125px 0 90px; } }
    @media only screen and (min-width: 1981px) {
      .system .outline {
        margin: 0px auto 0; } }
  .system .page-title {
    position: absolute;
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: calc(340 / 390 * 100vw);
    height: calc(62 / 390 * 100vw);
    margin: auto;
    top: calc(-60 / 390 * 100vw);
    left: 0;
    right: 0; }
    @media only screen and (min-width: 769px) {
      .system .page-title {
        width: calc(960 / 1080 * 100vw);
        height: calc(110 / 1080 * 100vw);
        top: calc(-60 /1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .page-title {
        width: 960px;
        height: 110px;
        top: -60px; } }
  .system .outline-inner {
    width: calc(300 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .system .outline-inner {
        width: calc(878 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .outline-inner {
        width: 878px; } }
  .system .outline-inner-text {
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .system .outline-inner-text {
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .system .outline-inner-text {
        margin: 0 auto 0; } }
  .system .h3-acc_square {
    margin-top: calc(50 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .system .h3-acc_square {
        margin-top: calc(68 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .h3-acc_square {
        margin-top: 68px; } }
  .system .h2-text + .h3-acc_square {
    margin-top: 1.8em; }
  .system .h3-acc_square + .body-text {
    margin-top: 1em; }
    @media only screen and (min-width: 769px) {
      .system .h3-acc_square + .body-text {
        margin-top: 1.2em; } }
  .system .column {
    width: 100%;
    border: 1px solid #df6a86;
    border-radius: calc(13 / 390 * 100vw);
    background-color: #FFF; }
    @media only screen and (min-width: 769px) {
      .system .column {
        border-radius: calc(13 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .column {
        border-radius: 13px; } }
  .system .block01 {
    width: 100%;
    background-color: #fcf0f3;
    margin: calc(0 / 390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .system .block01 {
        width: 100%;
        margin: calc(0 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .system .block01 {
        margin: 0px auto 0; } }
  .system .block01-inner {
    width: calc(350 / 390 * 100%);
    padding: calc(37 / 390 * 100vw) 0 calc(50 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .system .block01-inner {
        width: calc(960 / 1080 * 100vw);
        padding: calc(80 / 1080 * 100vw) 0 calc(100 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .block01-inner {
        width: 960px;
        padding: 80px 0 100px; } }
  .system .block01-inner-table {
    width: 100%;
    margin: 1em auto 0; }
    @media only screen and (min-width: 769px) {
      .system .block01-inner-table {
        width: calc(960 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .block01-inner-table {
        width: 960px; } }
  .system .block01-inner-note {
    margin-top: 0.6em; }
  .system .case {
    width: 100%;
    margin: calc(30 / 390 * 100vw) auto; }
    @media only screen and (min-width: 769px) {
      .system .case {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: wrap;
        margin: calc(50 / 1080 * 100vw) auto; } }
    @media only screen and (min-width: 1080px) {
      .system .case {
        margin: 50px auto; } }
    .system .case .case_ti {
      width: 100%;
      margin: 0 0 0.7em 0;
      font-size: calc(15 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .system .case .case_ti {
          font-size: calc(18 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .case .case_ti {
          font-size: 1.8rem; } }
    .system .case .h3-acc_square + .case_ti {
      margin-top: 1em; }
    @media only screen and (min-width: 769px) {
      .system .case .case_model {
        width: calc(716 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .case .case_model {
        width: 716px; } }
    .system .case .case_result {
      display: flex;
      justify-content: space-between; }
      @media only screen and (min-width: 769px) {
        .system .case .case_result {
          display: block;
          width: calc(216 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .case .case_result {
          width: 216px; } }
      .system .case .case_result table {
        width: 49%;
        margin-top: calc(10 / 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .system .case .case_result table {
            width: 100%;
            margin-top: calc(10 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .system .case .case_result table {
            margin-top: 10px; } }
    .system .case .note {
      text-indent: -1em;
      padding-left: 1em;
      margin-top: 1em;
      font-size: calc(12 / 390 * 100vw);
      line-height: 1.5em; }
      @media only screen and (min-width: 769px) {
        .system .case .note {
          font-size: calc(12 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .case .note {
          font-size: 1.2rem; } }
  .system .block02 {
    width: 100%;
    padding: calc(60 / 390 * 100vw) 0 calc(60 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .system .block02 {
        width: 100%;
        padding: calc(80 / 1080 * 100vw) 0 calc(100 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .block02 {
        padding: 80px 0 100px; } }
    .system .block02 .block02-inner {
      width: calc(350 / 390 * 100%);
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .system .block02 .block02-inner {
          width: calc(960 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block02 .block02-inner {
          width: 960px; } }
    .system .block02 .block02-inner-fig02 {
      width: 100%;
      margin: calc(50 / 390 * 100vw) auto;
      text-align: center; }
      @media only screen and (min-width: 769px) {
        .system .block02 .block02-inner-fig02 {
          margin: calc(70 / 390 * 100vw) auto; } }
      @media only screen and (min-width: 1080px) {
        .system .block02 .block02-inner-fig02 {
          margin: 70px auto; } }
  .system .block03 {
    background-color: #fcf0f3;
    width: 100%;
    padding: calc(60 / 390 * 100vw) 0 calc(60 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .system .block03 {
        width: 100%;
        padding: calc(80 / 1080 * 100vw) 0 calc(100 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .block03 {
        padding: 80px 0 100px; } }
    .system .block03 .block03-inner {
      width: calc(350 / 390 * 100%);
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .system .block03 .block03-inner {
          width: calc(960 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block03 .block03-inner {
          width: 960px; } }
    .system .block03 .block03-column {
      margin: calc(25 / 390 * 100vw) auto 0;
      padding: calc(24 / 390 * 100vw) calc(24 / 390 * 100vw) calc(35 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .system .block03 .block03-column {
          margin: calc(40 / 1080 * 100vw) auto 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: calc(24 / 1080 * 100vw) calc(70 / 1080 * 100vw) calc(24 / 1080 * 100vw) calc(58 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block03 .block03-column {
          margin: 40px auto 0;
          padding: 24px 70px 24px 58px; } }
    .system .block03 .block03-column + .block03-column {
      margin-top: calc(25 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .system .block03 .block03-column + .block03-column {
          margin-top: calc(20 / 390 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block03 .block03-column + .block03-column {
          margin-top: 20px; } }
    .system .block03 .block03-column-md {
      width: 100%;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .system .block03 .block03-column-md {
          width: calc(144 / 1080 * 100vw);
          margin: 0; } }
      @media only screen and (min-width: 1080px) {
        .system .block03 .block03-column-md {
          width: 144px; } }
      .system .block03 .block03-column-md .circle-md {
        width: calc(144 / 390 * 100vw);
        height: calc(144 / 390 * 100vw);
        display: flex;
        background: #df6a86;
        border-radius: 144px;
        justify-content: center;
        align-items: center;
        font-size: calc(18 / 390 * 100vw);
        line-height: 1.5em;
        text-align: center;
        color: #FFF;
        font-weight: 500;
        margin: 0 auto; }
        @media only screen and (min-width: 769px) {
          .system .block03 .block03-column-md .circle-md {
            font-size: calc(18 / 1080 * 100vw);
            width: calc(144 / 1080 * 100vw);
            height: calc(144 / 1080 * 100vw);
            margin: 0; } }
        @media only screen and (min-width: 1080px) {
          .system .block03 .block03-column-md .circle-md {
            font-size: 18px;
            width: 144px;
            height: 144px; } }
    .system .block03 .block03-column-text {
      width: 100%;
      margin: 1.5em auto 0; }
      @media only screen and (min-width: 769px) {
        .system .block03 .block03-column-text {
          width: calc(640 / 1080 * 100vw);
          margin: calc(0 / 1080 * 100vw) 0 0; } }
      @media only screen and (min-width: 1080px) {
        .system .block03 .block03-column-text {
          width: 640px; } }
  .system .block04 {
    width: 100%;
    padding: calc(60 / 390 * 100vw) 0 calc(100 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .system .block04 {
        width: 100%;
        padding: calc(80 / 1080 * 100vw) 0 calc(190 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .system .block04 {
        padding: 80px 0 190px; } }
    .system .block04 .block04-inner {
      position: relative;
      width: calc(350 / 390 * 100%);
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .system .block04 .block04-inner {
          width: calc(960 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block04 .block04-inner {
          width: 960px; } }
    .system .block04 .block04-column {
      margin: calc(40 / 390 * 100vw) auto 0;
      padding: calc(32 / 390 * 100vw) calc(14 / 390 * 100vw) calc(30 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .system .block04 .block04-column {
          margin: calc(50 / 1080 * 100vw) auto 0;
          padding: calc(30 / 1080 * 100vw) calc(45 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block04 .block04-column {
          margin: 40px auto 0;
          padding: 30px 45px; } }
    .system .block04 .block04-column + .block04-column {
      margin-top: calc(30 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .system .block04 .block04-column + .block04-column {
          margin-top: calc(40 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block04 .block04-column + .block04-column {
          margin-top: 40px; } }
    .system .block04 .block04-column-md {
      width: 100%;
      margin: 0 auto;
      border-bottom: solid 1px #000;
      font-size: calc(18 / 390 * 100vw);
      padding: 0 0 0.5em 0.1em; }
      @media only screen and (min-width: 769px) {
        .system .block04 .block04-column-md {
          font-size: calc(20 / 1080 * 100vw);
          margin: 0; } }
      @media only screen and (min-width: 1080px) {
        .system .block04 .block04-column-md {
          font-size: 20px; } }
    .system .block04 .block04-column-text {
      width: 100%;
      margin: 1em auto 0; }
    .system .block04 .block04-list {
      width: 100%;
      margin-top: calc(30 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .system .block04 .block04-list {
          margin-top: calc(40 / 1080 * 100vw);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap; } }
      @media only screen and (min-width: 1080px) {
        .system .block04 .block04-list {
          margin-top: 40px; } }
      .system .block04 .block04-list-md {
        width: 11em;
        text-align: center;
        margin: 0 auto calc(10 / 390 * 100vw);
        background: #df6a86;
        border-radius: 3em;
        padding: 0.3em;
        color: #FFF;
        font-size: calc(16 / 390 * 100vw);
        line-height: 1em; }
        @media only screen and (min-width: 769px) {
          .system .block04 .block04-list-md {
            font-size: calc(16 / 1080 * 100vw);
            margin: 0 0 calc(20 /1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .system .block04 .block04-list-md {
            font-size: 16px;
            margin: 0 0 20px; } }
      .system .block04 .block04-list-text {
        margin: 0 auto calc(25 / 390 * 100vw);
        text-align: center;
        font-size: calc(14 / 390 * 100vw);
        line-height: 1.4em; }
        @media only screen and (min-width: 769px) {
          .system .block04 .block04-list-text {
            width: calc(660 /1080 * 100vw);
            margin: 0 0 calc(20 /1080 * 100vw);
            text-align: left;
            font-size: calc(14 /1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .system .block04 .block04-list-text {
            width: 660px;
            margin: 0 0 20px;
            font-size: 14px; } }
    .system .block04 .block04-inner-btn {
      margin: calc(40 / 390 * 100vw) auto 0;
      cursor: pointer; }
      @media only screen and (min-width: 769px) {
        .system .block04 .block04-inner-btn {
          margin: calc(15 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .system .block04 .block04-inner-btn {
          margin: 15px auto 0; } }
  .system .block05 {
    background-color: #fcf0f3;
    width: 100%; }
    @media only screen and (min-width: 769px) {
      .system .block05 {
        width: 100%; } }
    .system .block05 .block05-inner {
      position: relative;
      width: calc(350 / 390 * 100%);
      margin: 0 auto;
      padding: calc(60 / 390 * 100vw) 0 calc(60 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .system .block05 .block05-inner {
          width: calc(1040 / 1080 * 100vw);
          padding: calc(110 / 1080 * 100vw) 0 calc(110 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block05 .block05-inner {
          width: 1040px;
          padding: 110px 0 110px; } }
    .system .block05 .block05-inner-baloon {
      position: absolute;
      top: calc(-21 / 390 * 100vw);
      left: 0;
      right: 0;
      margin: auto; }
      @media only screen and (min-width: 769px) {
        .system .block05 .block05-inner-baloon {
          top: calc(-33 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .system .block05 .block05-inner-baloon {
          top: -33px; } }
    .system .block05 .voice-index {
      width: 100%;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .system .block05 .voice-index {
          width: calc(1040 / 1080 * 100vw);
          display: flex;
          justify-content: space-between; } }
      @media only screen and (min-width: 1080px) {
        .system .block05 .voice-index {
          width: 1040px; } }
      .system .block05 .voice-index li {
        width: 100%; }
        @media only screen and (min-width: 769px) {
          .system .block05 .voice-index li {
            width: calc(320 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .system .block05 .voice-index li {
            width: 320px; } }
        .system .block05 .voice-index li .ph {
          width: calc(240 / 390 * 100vw);
          margin: 0 auto; }
          @media only screen and (min-width: 769px) {
            .system .block05 .voice-index li .ph {
              width: calc(240 / 1080 * 100vw); } }
          @media only screen and (min-width: 1080px) {
            .system .block05 .voice-index li .ph {
              width: 240px; } }
        .system .block05 .voice-index li .text {
          width: 100%;
          font-size: calc(16 / 390 * 100vw);
          font-weight: 500;
          text-align: center;
          line-height: 1.5em;
          margin-top: 1em; }
          @media only screen and (min-width: 769px) {
            .system .block05 .voice-index li .text {
              font-size: calc(16 / 1080 * 100vw); } }
          @media only screen and (min-width: 1080px) {
            .system .block05 .voice-index li .text {
              font-size: 1.6rem; } }
        .system .block05 .voice-index li .voice-btn {
          margin: 1em auto 0;
          cursor: pointer; }
      .system .block05 .voice-index li + li {
        margin-top: calc(55 / 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .system .block05 .voice-index li + li {
            margin-top: 0; } }

.modal-01 .cont_wrap .cont {
  width: 100%;
  margin: 0 auto 0;
  padding-top: 0.3em; }
  @media only screen and (min-width: 769px) {
    .modal-01 .cont_wrap .cont {
      margin: 0 0 0; } }
  @media only screen and (min-width: 1080px) {
    .modal-01 .cont_wrap .cont {
      margin: 0 0 0; } }
  .modal-01 .cont_wrap .cont h2.system_h2_area {
    color: #df6a86;
    font-size: calc(18/390 * 100vw);
    font-weight: 600; }
    @media only screen and (min-width: 769px) {
      .modal-01 .cont_wrap .cont h2.system_h2_area {
        font-size: calc(20/1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .modal-01 .cont_wrap .cont h2.system_h2_area {
        font-size: 2rem; } }
    .modal-01 .cont_wrap .cont h2.system_h2_area span {
      background: #FFF;
      border: 1px solid #df6a86;
      border-radius: 3em;
      text-align: center;
      padding: 0.3em 2em;
      font-size: calc(13/390 * 100vw);
      color: #df6a86;
      margin-right: 1em; }
      @media only screen and (min-width: 769px) {
        .modal-01 .cont_wrap .cont h2.system_h2_area span {
          font-size: calc(14/1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .modal-01 .cont_wrap .cont h2.system_h2_area span {
          font-size: 1.4rem; } }
  .modal-01 .cont_wrap .cont ul {
    width: 100%;
    margin: calc(25/390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .modal-01 .cont_wrap .cont ul {
        display: flex;
        justify-content: space-between;
        margin: calc(25/1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .modal-01 .cont_wrap .cont ul {
        margin: 25px auto 0; } }
    .modal-01 .cont_wrap .cont ul .text {
      width: 100%;
      line-height: 1.75em; }
      @media only screen and (min-width: 769px) {
        .modal-01 .cont_wrap .cont ul .text {
          width: calc(330/1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .modal-01 .cont_wrap .cont ul .text {
          width: 330px; } }
    .modal-01 .cont_wrap .cont ul .ph {
      width: 100%;
      margin-top: calc(15/390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .modal-01 .cont_wrap .cont ul .ph {
          width: calc(440/1080 * 100vw);
          margin-top: 0; } }
      @media only screen and (min-width: 1080px) {
        .modal-01 .cont_wrap .cont ul .ph {
          width: 440px; } }
  .modal-01 .cont_wrap .cont ul + h2.system_h2_area {
    margin-top: 2.5em; }

.modal-02 .cont_wrap .cont {
  width: 100%;
  margin: 0 auto 0; }
  @media only screen and (min-width: 769px) {
    .modal-02 .cont_wrap .cont {
      margin: 0 0 0; } }
  @media only screen and (min-width: 1080px) {
    .modal-02 .cont_wrap .cont {
      margin: 0 0 0; } }
  .modal-02 .cont_wrap .cont h2.system_h2_area {
    color: #df6a86;
    font-size: calc(19/390 * 100vw);
    font-weight: 600; }
    @media only screen and (min-width: 769px) {
      .modal-02 .cont_wrap .cont h2.system_h2_area {
        font-size: calc(20/1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .modal-02 .cont_wrap .cont h2.system_h2_area {
        font-size: 2rem; } }
  .modal-02 .cont_wrap .cont .text {
    width: 100%;
    line-height: 1.75em;
    margin: calc(25/390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .modal-02 .cont_wrap .cont .text {
        display: flex;
        justify-content: space-between;
        margin: calc(25/1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .modal-02 .cont_wrap .cont .text {
        margin: 25px auto 0; } }
  .modal-02 .cont_wrap .cont .ph {
    width: 100%;
    margin: calc(20/390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .modal-02 .cont_wrap .cont .ph {
        display: flex;
        justify-content: space-between;
        margin: calc(20/1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .modal-02 .cont_wrap .cont .ph {
        margin: 20px auto 0; } }
    .modal-02 .cont_wrap .cont .ph li {
      width: 100%;
      margin: 0; }
      @media only screen and (min-width: 769px) {
        .modal-02 .cont_wrap .cont .ph li {
          width: calc(370/1080 * 100vw);
          margin: 0; } }
      @media only screen and (min-width: 1080px) {
        .modal-02 .cont_wrap .cont .ph li {
          width: 370px;
          margin: 0; } }
      .modal-02 .cont_wrap .cont .ph li .cap {
        margin-top: 0.7em;
        font-size: calc(12/390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .modal-02 .cont_wrap .cont .ph li .cap {
            font-size: calc(12/1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .modal-02 .cont_wrap .cont .ph li .cap {
            font-size: 12px; } }
    .modal-02 .cont_wrap .cont .ph li + li {
      margin-top: calc(30/390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .modal-02 .cont_wrap .cont .ph li + li {
          margin-top: 0; } }

.modal-03 .cont_wrap .cont, .modal-04 .cont_wrap .cont, .modal-05 .cont_wrap .cont {
  width: 100%;
  margin: 0 auto 0; }
  @media only screen and (min-width: 769px) {
    .modal-03 .cont_wrap .cont, .modal-04 .cont_wrap .cont, .modal-05 .cont_wrap .cont {
      margin: 0 0 0; } }
  @media only screen and (min-width: 1080px) {
    .modal-03 .cont_wrap .cont, .modal-04 .cont_wrap .cont, .modal-05 .cont_wrap .cont {
      margin: 0 0 0; } }
  .modal-03 .cont_wrap .cont h2.system_h2, .modal-04 .cont_wrap .cont h2.system_h2, .modal-05 .cont_wrap .cont h2.system_h2 {
    color: #df6a86;
    font-size: calc(19/390 * 100vw);
    line-height: 1.4em;
    font-weight: 600; }
    @media only screen and (min-width: 769px) {
      .modal-03 .cont_wrap .cont h2.system_h2, .modal-04 .cont_wrap .cont h2.system_h2, .modal-05 .cont_wrap .cont h2.system_h2 {
        font-size: calc(20/1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .modal-03 .cont_wrap .cont h2.system_h2, .modal-04 .cont_wrap .cont h2.system_h2, .modal-05 .cont_wrap .cont h2.system_h2 {
        font-size: 2rem; } }
  .modal-03 .cont_wrap .cont ul, .modal-04 .cont_wrap .cont ul, .modal-05 .cont_wrap .cont ul {
    width: 100%;
    margin: calc(20/390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .modal-03 .cont_wrap .cont ul, .modal-04 .cont_wrap .cont ul, .modal-05 .cont_wrap .cont ul {
        display: flex;
        justify-content: space-between;
        margin: calc(25/1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .modal-03 .cont_wrap .cont ul, .modal-04 .cont_wrap .cont ul, .modal-05 .cont_wrap .cont ul {
        margin: 25px auto 0; } }
    .modal-03 .cont_wrap .cont ul .ph, .modal-04 .cont_wrap .cont ul .ph, .modal-05 .cont_wrap .cont ul .ph {
      width: 100%;
      margin-top: calc(15/390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .modal-03 .cont_wrap .cont ul .ph, .modal-04 .cont_wrap .cont ul .ph, .modal-05 .cont_wrap .cont ul .ph {
          width: calc(186/1080 * 100vw);
          margin-top: 0; } }
      @media only screen and (min-width: 1080px) {
        .modal-03 .cont_wrap .cont ul .ph, .modal-04 .cont_wrap .cont ul .ph, .modal-05 .cont_wrap .cont ul .ph {
          width: 186px; } }
      .modal-03 .cont_wrap .cont ul .ph .cap, .modal-04 .cont_wrap .cont ul .ph .cap, .modal-05 .cont_wrap .cont ul .ph .cap {
        margin-top: 0.7em;
        font-size: calc(12/390 * 100vw);
        line-height: 1.3em; }
        @media only screen and (min-width: 769px) {
          .modal-03 .cont_wrap .cont ul .ph .cap, .modal-04 .cont_wrap .cont ul .ph .cap, .modal-05 .cont_wrap .cont ul .ph .cap {
            font-size: calc(12/1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .modal-03 .cont_wrap .cont ul .ph .cap, .modal-04 .cont_wrap .cont ul .ph .cap, .modal-05 .cont_wrap .cont ul .ph .cap {
            font-size: 12px; } }
    .modal-03 .cont_wrap .cont ul .text, .modal-04 .cont_wrap .cont ul .text, .modal-05 .cont_wrap .cont ul .text {
      width: 100%;
      line-height: 1.75em;
      margin-top: 1.5em; }
      @media only screen and (min-width: 769px) {
        .modal-03 .cont_wrap .cont ul .text, .modal-04 .cont_wrap .cont ul .text, .modal-05 .cont_wrap .cont ul .text {
          width: calc(590/1080 * 100vw);
          margin-top: 0; } }
      @media only screen and (min-width: 1080px) {
        .modal-03 .cont_wrap .cont ul .text, .modal-04 .cont_wrap .cont ul .text, .modal-05 .cont_wrap .cont ul .text {
          width: 590px; } }