/*! Writen  by SCSS */
.anq {
  position: absolute;
  top: -90px; }

@media screen and (max-width: 767px) {
  .anq {
    position: absolute;
    top: 0; } }
div.container {
  padding: 50px 10px 50px; }

.sec {
  position: relative;
  display: flex;
  justify-content: space-between; }
  .sec .txt {
    width: 40%; }
  .sec .img {
    width: 57%; }

.fbox {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .fbox .link_blank {
    font-size: 13px; }

h3.pttl {
  font-size: 35px;
  font-feature-settings: "palt"; }

@media screen and (max-width: 1200px) {
  h3.pttl {
    font-size: 2.5vw; } }
@media screen and (max-width: 890px) {
  h3.pttl {
    font-size: 2.3vw; }

  .fbox .link_blank {
    font-size: 10px; } }
@media screen and (max-width: 767px) {
  h3.pttl {
    font-size: 26px; }

  .fbox .link_blank {
    font-size: 12px; } }
.kako {
  background: #e5f0f8;
  padding: 15px 20px;
  width: 100%; }

.txt1 {
  font-size: 18px; }

.flex1 {
  display: flex;
  justify-content: space-between; }
  .flex1 .kako {
    width: 48.53%; }

.flex11 {
  display: flex;
  justify-content: space-between; }
  .flex11 > div {
    width: 48.27587%; }

.data {
  border-bottom: solid 1px #000;
  border-top: solid 1px #000;
  padding: 10px 0;
  font-size: 12px; }
  .data .datat {
    font-size: 14px; }

.flex2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .flex2 > div:nth-child(1) {
    width: 70.3%; }
  .flex2 > div:nth-child(2) {
    width: 26.470589%; }
  .flex2 .kako .table_wrap {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 767px) {
      .flex2 .kako .table_wrap {
        display: block; } }
    .flex2 .kako .table_wrap table {
      border-top: 1px solid #cccccc;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 11px; }
      .flex2 .kako .table_wrap table caption {
        font-size: 13px;
        text-align: left; }
      .flex2 .kako .table_wrap table tr {
        border-bottom: 1px solid #cccccc; }
      .flex2 .kako .table_wrap table th {
        background: #eeeeee;
        text-align: left;
        padding: 5px 5px 5px 15px; }
        @media screen and (max-width: 767px) {
          .flex2 .kako .table_wrap table th {
            width: 35%; } }
      .flex2 .kako .table_wrap table td {
        background: #fff;
        padding: 5px 5px 5px 15px; }
        @media screen and (max-width: 767px) {
          .flex2 .kako .table_wrap table td {
            width: 65%; } }
    .flex2 .kako .table_wrap table:nth-child(1) {
      width: calc(308% / 6.44); }
      @media screen and (max-width: 767px) {
        .flex2 .kako .table_wrap table:nth-child(1) {
          margin-bottom: 20px;
          width: 100%; } }
    .flex2 .kako .table_wrap table:nth-child(2) {
      width: calc(322% / 6.44); }
      @media screen and (max-width: 767px) {
        .flex2 .kako .table_wrap table:nth-child(2) {
          width: 100%; } }

.flex3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .flex3 > div:nth-child(1) {
    /*width: 70.3%;*/
    width: 65.643274853%;
    margin-bottom: 4%; }
  .flex3 > div:nth-child(2) {
    /*width: 26.470589%;*/
    width: 30.847953216%;
    margin-bottom: 4%; }
  .flex3 > div:nth-child(3),
  .flex3 > div:nth-child(4) {
    width: 48.5295%; }

.txta {
  font-size: 18px;
  color: #fff;
  line-height: 1;
  padding: 8px 10px;
  background: #0069b7;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px; }
  .txta::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2em;
    border-right: 2em solid transparent;
    border-bottom: 2em solid #fff;
    border-left: 2em solid transparent; }

@media screen and (max-width: 767px) {
  div.container {
    padding: 30px 10px 30px; }

  .sec {
    display: block; }
    .sec .txt {
      width: 100%;
      margin-bottom: 30px; }
    .sec .img {
      width: 100%; }

  .kako {
    padding: 15px; }

  .txt1 {
    font-size: 16px; }

  .flex1 {
    display: block; }
    .flex1 .kako {
      width: 100%; }

  .flex2 {
    display: block;
    justify-content: space-between; }
    .flex2 > div:nth-child(1) {
      width: 100%;
      margin-bottom: 20px; }
    .flex2 > div:nth-child(2) {
      width: 100%; }

  .txta {
    font-size: 15px;
    padding: 5px 8px; }

  .flex3 > div:nth-child(1) {
    width: 48.5295%;
    display: none; }
  .flex3 > div:nth-child(2) {
    width: 48.5295%;
    display: none; }
  .flex3 > div:nth-child(3),
  .flex3 > div:nth-child(4) {
    width: 48.5295%; } }
@media screen and (max-width: 400px) {
  h3.pttl {
    font-size: 23px;
    font-feature-settings: "palt";
    letter-spacing: -0.05em; }

  .link_blank a span.link {
    width: 20px; } }
@media screen and (max-width: 320px) {
  h3.pttl {
    font-size: 21px;
    font-feature-settings: "palt";
    letter-spacing: -0.05em; } }
h3.pttl .nm01 {
  font-size: 2.9vw; }
  @media screen and (max-width: 767px) {
    h3.pttl .nm01 {
      font-size: 32px; } }
  @media screen and (max-width: 400px) {
    h3.pttl .nm01 {
      font-size: 28px; } }

.sec4 {
  background: #e5f0f8;
  padding: 60px 30px 40px; }
  @media screen and (max-width: 767px) {
    .sec4 {
      padding: 30px 20px; } }
  .sec4 .en {
    color: #0069b7;
    display: inline-block;
    font-size: 20px;
    margin-bottom: 10px;
    position: relative; }
    @media screen and (max-width: 767px) {
      .sec4 .en {
        font-size: 15px; } }
  .sec4 .sttl {
    color: #0069b7;
    font-size: 35px;
    margin-bottom: 10px; }
    @media screen and (max-width: 767px) {
      .sec4 .sttl {
        font-size: 23px; } }
  .sec4 .before {
    display: flex; }
    @media screen and (max-width: 767px) {
      .sec4 .before {
        display: block; } }
    .sec4 .before .ttl {
      align-items: center;
      background: #57595a;
      display: flex;
      justify-content: center;
      width: calc(60% / 11.4); }
      @media screen and (max-width: 767px) {
        .sec4 .before .ttl {
          padding: 5px;
          width: 100%; } }
    .sec4 .before .bg {
      background: #eeeeee;
      padding: 25px;
      width: calc(1080% / 11.4); }
      @media screen and (max-width: 767px) {
        .sec4 .before .bg {
          padding: 20px 20px 0;
          width: 100%; } }
      .sec4 .before .bg .en_s {
        color: #333;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px; }
        @media screen and (max-width: 767px) {
          .sec4 .before .bg .en_s {
            font-size: 14px; } }
      .sec4 .before .bg .sttl {
        color: #333;
        font-size: 18px;
        margin-bottom: 20px; }
        @media screen and (max-width: 767px) {
          .sec4 .before .bg .sttl {
            font-size: 16px; } }
        .sec4 .before .bg .sttl span {
          font-size: 14px; }
          @media screen and (max-width: 767px) {
            .sec4 .before .bg .sttl span {
              font-size: 12px; } }
      .sec4 .before .bg ul {
        display: flex;
        justify-content: space-between; }
        @media screen and (max-width: 767px) {
          .sec4 .before .bg ul {
            flex-wrap: wrap; } }
        .sec4 .before .bg ul li {
          position: relative;
          width: calc(182% / 10.3); }
          @media screen and (max-width: 767px) {
            .sec4 .before .bg ul li {
              display: flex;
              margin-bottom: 20px;
              width: 100%; }
              .sec4 .before .bg ul li .img {
                position: relative;
                width: calc(182% / 3.8);
                min-width: 48%;
                max-width: 182px;
                z-index: 1; }
              .sec4 .before .bg ul li .body {
                margin-left: 2%; }
                .sec4 .before .bg ul li .body span {
                  background: #a4a4a4;
                  color: #fff;
                  display: block;
                  font-size: 14px;
                  letter-spacing: 0.1em;
                  margin-bottom: 10px;
                  padding: 2px 10px; } }
          .sec4 .before .bg ul li .img {
            margin-bottom: 10px; }
            @media screen and (max-width: 767px) {
              .sec4 .before .bg ul li .img {
                text-align: center; } }
  .sec4 .after {
    display: flex; }
    @media screen and (max-width: 767px) {
      .sec4 .after {
        display: block; } }
    .sec4 .after .ttl {
      align-items: center;
      background: #0069b7;
      display: flex;
      justify-content: center;
      width: calc(60% / 11.4); }
      @media screen and (max-width: 767px) {
        .sec4 .after .ttl {
          padding: 5px;
          width: 100%; } }
    .sec4 .after .bg {
      align-items: center;
      background: #ccefee;
      display: flex;
      justify-content: space-between;
      padding: 50px 25px;
      width: calc(1080% / 11.4); }
      @media screen and (max-width: 767px) {
        .sec4 .after .bg {
          display: block;
          padding: 20px;
          width: 100%; } }
      .sec4 .after .bg .text {
        width: calc(266% / 10.3); }
        @media screen and (max-width: 767px) {
          .sec4 .after .bg .text {
            margin-bottom: 20px;
            width: 100%; } }
      .sec4 .after .bg .img {
        width: calc(710% / 10.3); }
        @media screen and (max-width: 767px) {
          .sec4 .after .bg .img {
            text-align: center;
            width: 100%; } }
      .sec4 .after .bg .en_s {
        color: #0069b7;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px; }
        @media screen and (max-width: 767px) {
          .sec4 .after .bg .en_s {
            font-size: 14px; } }
      .sec4 .after .bg .sttl {
        color: #333;
        font-size: 18px;
        margin-bottom: 20px; }
        @media screen and (max-width: 767px) {
          .sec4 .after .bg .sttl {
            font-size: 16px; } }
  .sec4 .result {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 767px) {
      .sec4 .result {
        flex-wrap: wrap; } }
    .sec4 .result li {
      width: calc(216% / 11.4); }
      @media screen and (max-width: 767px) {
        .sec4 .result li {
          margin-bottom: 20px;
          width: 100%; } }
      .sec4 .result li .img {
        margin-bottom: 10px; }
        @media screen and (max-width: 767px) {
          .sec4 .result li .img {
            background: #a4a4a4; } }
      .sec4 .result li .body span {
        font-weight: bold; }
  .sec4 .btn {
    display: block;
    margin: 0 auto;
    max-width: 687px; }
    .sec4 .btn a {
      background: #0069b7;
      color: #fff;
      font-size: 21px;
      justify-content: center;
      letter-spacing: 0.1em;
      padding: 20px; }
      @media screen and (max-width: 767px) {
        .sec4 .btn a {
          font-size: 16px;
          padding: 15px; } }