@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
.wrap01 {
  display: flex;
  flex-wrap: wrap; }
  .wrap01.bC {
    justify-content: center; }
  .wrap01.between {
    justify-content: space-between; }
  .wrap01.aC {
    align-items: center; }
  .wrap01.aEnd {
    align-items: flex-end; }
  .wrap01.reverse {
    flex-direction: row-reverse; }

.spNoneImg {
  display: inline; }
  @media screen and (max-width: 767px) {
    .spNoneImg {
      display: none; } }

/* slideBottom 
*****************************************/
html .slideBottom {
  -webkit-transform: translateY(36px);
  transform: translateY(36px);
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  /*
transition: $moveTime all $easing;*/ }

html .slideBottom.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1; }

#contentsWrap {
  margin: 0 0 2px;
  background: #fff; }

.specialContentsWrap {
  box-sizing: border-box; }
  .specialContentsWrap * {
    box-sizing: border-box; }
  .specialContentsWrap p {
    margin-bottom: 0; }
  .specialContentsWrap .btn01 {
    margin-top: 53px; }
    @media screen and (max-width: 767px) {
      .specialContentsWrap .btn01 {
        margin-top: 7.7333333333vw; } }
    .specialContentsWrap .btn01 > a {
      cursor: pointer;
      margin: 0 auto;
      display: block;
      border-radius: 10px;
      text-decoration: none;
      text-align: center;
      border: none;
      background-color: #00009a;
      color: #fff;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-size: 24px;
      line-height: 1.1;
      padding: 20px;
      width: 640px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .btn01 > a {
          width: 92vw;
          font-size: 5.3333333333vw;
          padding: 5.0666666667vw; } }
      @media screen and (min-width: 768px) {
        .specialContentsWrap .btn01 > a:hover {
          opacity: 0.7; } }
  .specialContentsWrap .area01 {
    background: #4fa2ff;
    padding-top: 77px;
    padding-bottom: 48px; }
    @media screen and (max-width: 767px) {
      .specialContentsWrap .area01 {
        padding-top: 6.9333333333vw;
        padding-bottom: 8vw; } }
    .specialContentsWrap .area01 > .inner01 {
      width: 960px;
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area01 > .inner01 {
          width: 92vw; } }
    .specialContentsWrap .area01 .tx02 {
      margin-bottom: 34px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area01 .tx02 {
          margin-bottom: 4.5333333333vw; } }
    .specialContentsWrap .area01 ul {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-left: -3px;
      margin-right: -3px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area01 ul {
          flex-wrap: wrap;
          margin-left: auto;
          margin-right: auto;
          width: 72vw;
          gap: 4vw; } }
  .specialContentsWrap .area02 {
    background: #cae3ff;
    padding-top: 53px;
    padding-bottom: 84px; }
    @media screen and (max-width: 767px) {
      .specialContentsWrap .area02 {
        padding-top: 5.3333333333vw;
        padding-bottom: 16vw; } }
    .specialContentsWrap .area02 > .inner01 {
      width: 960px;
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 > .inner01 {
          width: 94.9333333333vw; } }
    .specialContentsWrap .area02 .btn01 {
      margin-top: 93px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .btn01 {
          margin-top: 14.4vw; } }
    .specialContentsWrap .area02 .tx03 {
      background: #0078ff;
      color: #fff;
      text-align: center;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 23.45px;
      line-height: 1;
      padding: 0.57em 0;
      margin-bottom: 30px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .tx03 {
          font-size: 5.3333333333vw;
          padding: 0.75em 0;
          font-feature-settings: "palt";
          margin-bottom: 30px; } }
    .specialContentsWrap .area02 .red {
      color: #ed0000; }
    .specialContentsWrap .area02 .tx04 {
      color: #0078ff;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-size: 26px;
      line-height: 1.75;
      margin-top: -7px;
      margin-bottom: 6px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .tx04 {
          font-size: 5.3333333333vw;
          margin-bottom: 0; } }
    .specialContentsWrap .area02 .tx05 {
      color: #000;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      line-height: 1.3888888889;
      margin-bottom: 17px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .tx05 {
          font-size: 4vw;
          margin-left: 0.8vw;
          font-feature-settings: "palt"; } }
    .specialContentsWrap .area02 .tx06 {
      color: #000;
      display: inline-block;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-size: 12px;
      line-height: 1.3888888889;
      border: 3px solid #000;
      border-radius: 5px;
      padding: 0.2em 0.5em;
      margin-bottom: 3px;
      background: #fff; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .tx06 {
          font-size: 2.88vw;
          border: 2px solid #000; } }
    .specialContentsWrap .area02 .tx07 {
      color: #000;
      font-family: "Noto Sans JP", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 14px;
      line-height: 1.4285714286; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .tx07 {
          font-size: 2.9333333333vw;
          line-height: 1.8181818182; } }
    .specialContentsWrap .area02 .img01 {
      width: 506px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .img01 {
          width: 100%;
          margin-bottom: 4.8vw; } }
    .specialContentsWrap .area02 .textWrap {
      width: 450px; }
      @media screen and (max-width: 767px) {
        .specialContentsWrap .area02 .textWrap {
          width: 100%; } }
      .specialContentsWrap .area02 .textWrap .col01 {
        padding-left: 50px;
        position: relative; }
        @media screen and (max-width: 767px) {
          .specialContentsWrap .area02 .textWrap .col01 {
            padding-left: 14.4vw; } }
        .specialContentsWrap .area02 .textWrap .col01 .no {
          position: absolute;
          top: 7px;
          left: 0;
          width: 40px; }
          @media screen and (max-width: 767px) {
            .specialContentsWrap .area02 .textWrap .col01 .no {
              width: 10.6666666667vw; } }
        .specialContentsWrap .area02 .textWrap .col01.no01 {
          padding-bottom: 199px; }
          @media screen and (max-width: 767px) {
            .specialContentsWrap .area02 .textWrap .col01.no01 {
              padding-bottom: 24.8vw; } }
          .specialContentsWrap .area02 .textWrap .col01.no01::before {
            content: '';
            position: absolute;
            bottom: 45px;
            left: 0;
            width: 100%;
            height: 112px;
            background: url("../img/arrow01.png") no-repeat 50% 100%; }
            @media screen and (max-width: 767px) {
              .specialContentsWrap .area02 .textWrap .col01.no01::before {
                bottom: 4.8vw;
                left: 50%;
                width: 18.5333333333vw;
                height: 19.7333333333vw;
                background: url("../img/arrow01s.png") no-repeat 50% 100%/contain;
                transform: translateX(-50%); } }
        @media screen and (max-width: 767px) {
          .specialContentsWrap .area02 .textWrap .col01.no02 {
            margin-top: 8vw; }
            .specialContentsWrap .area02 .textWrap .col01.no02 .tx04 {
              margin-bottom: 3.2vw; }
            .specialContentsWrap .area02 .textWrap .col01.no02 .tx05 {
              margin-left: 0; } }
      .specialContentsWrap .area02 .textWrap ul {
        margin-top: 17px; }
        @media screen and (max-width: 767px) {
          .specialContentsWrap .area02 .textWrap ul {
            margin-top: 3.2vw; } }
        .specialContentsWrap .area02 .textWrap ul li {
          display: flex;
          flex-wrap: wrap;
          align-items: center; }
          .specialContentsWrap .area02 .textWrap ul li + li {
            margin-top: 20px; }
            @media screen and (max-width: 767px) {
              .specialContentsWrap .area02 .textWrap ul li + li {
                margin-top: 3.2vw; } }
          .specialContentsWrap .area02 .textWrap ul li .icon {
            width: 38px;
            margin-right: 23px;
            margin-top: 5px; }
            @media screen and (max-width: 767px) {
              .specialContentsWrap .area02 .textWrap ul li .icon {
                width: 10.1333333333vw;
                margin-right: 5.3333333333vw;
                margin-top: 1.3333333333vw; } }
          .specialContentsWrap .area02 .textWrap ul li p {
            color: #000;
            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;
            font-size: 14px; }
            @media screen and (max-width: 767px) {
              .specialContentsWrap .area02 .textWrap ul li p {
                font-size: 2.9333333333vw;
                line-height: 1.8181818182; } }