@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Kanit:ital,wght@1,500&display=swap");
/* -----------------------------------------------------
	flexLayout
----------------------------------------------------- */
.flexColumn01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }
  .flexColumn01.bC {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center; }
  .flexColumn01.between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .flexColumn01.aC {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }
  .flexColumn01.aEnd {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end; }

/* -----------------------------------------------------
	columnLayout
----------------------------------------------------- */
.columnLayout {
  clear: both; }
  .columnLayout .colLeft {
    float: left; }
  .columnLayout .colRight {
    float: right; }

/* -----------------------------------------------------
	Clearfix
----------------------------------------------------- */
.columnLayout:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden; }

.columnLayout {
  *display: inline-table;
  *zoom: 1; }

@media screen and (max-width: 767px) {
  .anchorWrap {
    margin-top: -45px;
    padding-top: 45px; } }

/* 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; }

figure {
  margin: 0;
  padding: 0; }

img {
  vertical-align: bottom; }

p {
  margin-bottom: 0; }

.cs-w-20 {
  width: 20%; }

.cs-w-30 {
  width: 30%; }

.cs-w-35 {
  width: 35%; }

.cs-w-40 {
  width: 40%; }

.cs-w-60 {
  width: 60%; }

.cs-w-65 {
  width: 65%; }

.cs-w-70 {
  width: 70%; }

.cs-w-80 {
  width: 80%; }

br.spNone {
  display: inline !important; }
  @media screen and (max-width: 767px) {
    br.spNone {
      display: none !important; } }

/* contentsWrap 
*****************************************/
#contentsWrap {
  margin: 0 0 2px; }

#contentsWrap * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.area02,
.area03,
.area04 {
  min-width: 960px; }
  @media screen and (max-width: 767px) {
    .area02,
    .area03,
    .area04 {
      min-width: 100%; } }
  .area02 > .inner01,
  .area03 > .inner01,
  .area04 > .inner01 {
    max-width: 960px;
    margin: 0 auto; }

.area01 {
  position: relative; }
  @media screen and (min-width: 768px) {
    .area01 {
      min-width: 960px;
      overflow: hidden;
      height: 160px;
      background: #222222; }
      .area01::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: #f0f0f0; } }
  @media screen and (min-width: 768px) {
    .area01 .ti01 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1440px; } }

.area02 {
  background: #000;
  padding: 39px 0 15px; }
  @media screen and (max-width: 767px) {
    .area02 {
      padding: 8.8vw 0 6.6666666667vw; } }
  .area02 > .inner01 {
    padding: 0 20px;
    position: relative; }
    @media screen and (max-width: 767px) {
      .area02 > .inner01 {
        padding: 0 4vw; } }
    .area02 > .inner01 .tx01 {
      text-align: center;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500;
      font-feature-settings: "palt";
      color: #fff;
      font-size: 33.7px;
      text-align: center;
      margin-bottom: 41px; }
      @media screen and (max-width: 767px) {
        .area02 > .inner01 .tx01 {
          font-size: 4.8vw;
          letter-spacing: 0.025em;
          margin-left: -4vw;
          margin-right: -4vw;
          margin-bottom: 10.4vw; } }
    .area02 > .inner01 .tx02 {
      background: url("../img2/bg01.png") no-repeat 0 0/613px;
      color: #fff;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500;
      font-feature-settings: "palt";
      font-size: 24px;
      line-height: 1.6;
      padding-bottom: 20px;
      margin-bottom: 35px;
      margin-left: -20px;
      padding-left: 20px; }
      @media screen and (max-width: 767px) {
        .area02 > .inner01 .tx02 {
          margin-left: -4vw;
          padding-left: 7.4666666667vw;
          font-size: 16.84px;
          line-height: 1.2;
          background: url("../img2/bg01.png") no-repeat 3.4666666667vw 0 / 90.8vw;
          margin-bottom: 1.3333333333vw; } }
      .area02 > .inner01 .tx02 span {
        font-size: 36px; }
        @media screen and (max-width: 767px) {
          .area02 > .inner01 .tx02 span {
            display: block;
            margin-top: 2vw;
            font-size: 25.26px; } }
    .area02 > .inner01 .tx03 {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500;
      font-feature-settings: "palt";
      color: #ffff00;
      font-size: 26px;
      letter-spacing: 0.025em;
      margin-bottom: 27px; }
      @media screen and (max-width: 767px) {
        .area02 > .inner01 .tx03 {
          font-size: 20px;
          line-height: 1.3;
          margin-bottom: 3.4666666667vw; } }
    .area02 > .inner01 .pointList01 li {
      background: url("../img2/ic01.png") no-repeat 0 2px/24px;
      padding-left: 29px;
      color: #fff;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500;
      font-feature-settings: "palt";
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.025em; }
      @media screen and (max-width: 767px) {
        .area02 > .inner01 .pointList01 li {
          background: url("../img2/ic01.png") no-repeat 0 2px/24px;
          padding-left: 7.7333333333vw;
          font-size: 14px;
          line-height: 1.5714285714; } }
      .area02 > .inner01 .pointList01 li + li {
        margin-top: 16px; }
        @media screen and (max-width: 767px) {
          .area02 > .inner01 .pointList01 li + li {
            margin-top: 3.7333333333vw; } }
    @media screen and (min-width: 768px) {
      .area02 > .inner01 .ph01 {
        position: absolute;
        top: 77px;
        right: 9px; } }
    @media screen and (max-width: 767px) {
      .area02 > .inner01 .ph01 {
        width: 54.5333333333vw;
        margin-left: 14.5333333333vw;
        margin-bottom: 2.6666666667vw; } }
    .area02 > .inner01 > .inner02 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 70px; }
      @media screen and (max-width: 767px) {
        .area02 > .inner01 > .inner02 {
          padding-top: 7.6vw; } }
      .area02 > .inner01 > .inner02 .col01 {
        width: 460px; }
        .area02 > .inner01 > .inner02 .col01 .tx04 {
          font-family: 'Noto Sans JP', sans-serif;
          font-weight: 500;
          font-feature-settings: "palt";
          color: #fff;
          font-size: 24px;
          border-bottom: 1px solid #fff;
          padding-bottom: 11px;
          margin-bottom: 18px; }
          @media screen and (max-width: 767px) {
            .area02 > .inner01 > .inner02 .col01 .tx04 {
              padding-bottom: 3.2vw;
              margin-bottom: 5.3333333333vw; } }
        .area02 > .inner01 > .inner02 .col01 .tx05 {
          font-family: 'Noto Sans JP', sans-serif;
          font-weight: 400;
          font-feature-settings: "palt";
          color: #fff;
          font-size: 14px;
          line-height: 1.7142857143;
          letter-spacing: 0.025em; }
          @media screen and (max-width: 767px) {
            .area02 > .inner01 > .inner02 .col01 .tx05 {
              margin-bottom: 4.2666666667vw; } }
      .area02 > .inner01 > .inner02 .col02 {
        width: 400px; }
        .area02 > .inner01 > .inner02 .col02 .button01 {
          margin-bottom: 10px; }
        .area02 > .inner01 > .inner02 .col02 .tx06 {
          text-align: center;
          font-family: 'Noto Sans JP', sans-serif;
          font-weight: 500;
          font-feature-settings: "palt";
          color: #ffff00;
          font-size: 18px;
          margin-bottom: 1px; }
          @media screen and (max-width: 767px) {
            .area02 > .inner01 > .inner02 .col02 .tx06 {
              font-size: 15.52px; } }
        .area02 > .inner01 > .inner02 .col02 .tx07 {
          text-align: center;
          font-family: 'Noto Sans JP', sans-serif;
          font-weight: 500;
          font-feature-settings: "palt";
          color: #ff9696;
          font-size: 14px; }
          @media screen and (max-width: 767px) {
            .area02 > .inner01 > .inner02 .col02 .tx07 {
              font-size: 12px; } }
          .area02 > .inner01 > .inner02 .col02 .tx07 span {
            font-size: 25px;
            margin-left: 0.15em;
            margin-right: 0.15em; }
            @media screen and (max-width: 767px) {
              .area02 > .inner01 > .inner02 .col02 .tx07 span {
                font-size: 21.56px; } }

.area03 {
  background: #1f1f1f;
  padding: 54px 0 57px; }
  @media screen and (max-width: 767px) {
    .area03 {
      padding: 6.9333333333vw 4vw 10.4vw; } }
  .area03 > .inner01 {
    padding: 0 0 0 480px;
    position: relative; }
    @media screen and (max-width: 767px) {
      .area03 > .inner01 {
        padding: 0; } }
    .area03 > .inner01 .tx01 {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500;
      font-feature-settings: "palt";
      color: #fff;
      font-size: 24px;
      letter-spacing: 0.025em;
      margin-bottom: 9px; }
      @media screen and (max-width: 767px) {
        .area03 > .inner01 .tx01 {
          font-size: 20px; } }
    .area03 > .inner01 .tx02 {
      color: #fff;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-feature-settings: "palt";
      font-size: 40px;
      line-height: 1.0833333333;
      padding-bottom: 20px;
      margin-bottom: 50px; }
      @media screen and (max-width: 767px) {
        .area03 > .inner01 .tx02 {
          font-size: 28px;
          padding-bottom: 5.3333333333vw;
          margin-bottom: 0; } }
      .area03 > .inner01 .tx02 span {
        display: block;
        margin-top: 7px;
        font-size: 48px; }
        @media screen and (max-width: 767px) {
          .area03 > .inner01 .tx02 span {
            font-size: 32px; } }
    @media screen and (min-width: 768px) {
      .area03 > .inner01 .img01 {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 417px; } }
    @media screen and (max-width: 767px) {
      .area03 > .inner01 .img01 {
        width: 83.3333333333vw;
        margin-left: 3.7333333333vw;
        margin-bottom: 9.5vw; } }
    .area03 > .inner01 .logo {
      margin-bottom: 60px; }
      @media screen and (min-width: 768px) {
        .area03 > .inner01 .logo {
          width: 396px; } }
      @media screen and (max-width: 767px) {
        .area03 > .inner01 .logo {
          width: 70.5333333333vw;
          margin-bottom: 11.8vw; } }
    .area03 > .inner01 .tx03 {
      text-align: center;
      color: #ababab;
      font-size: 12px;
      line-height: 1.75;
      letter-spacing: 0.025em;
      margin-top: 17px; }
      @media screen and (max-width: 767px) {
        .area03 > .inner01 .tx03 {
          font-size: 10px;
          margin-top: 3.2vw; } }

.area04 {
  background: #444;
  padding: 65px 0 100px; }
  @media screen and (max-width: 767px) {
    .area04 {
      padding: 8.5333333333vw 4vw 18.6666666667vw; } }
  .area04 .img01 {
    text-align: center;
    margin-bottom: 66px; }
    @media screen and (max-width: 767px) {
      .area04 .img01 {
        margin-bottom: 9.3333333333vw; } }
  .area04 .img02 {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 20px; }
    @media screen and (max-width: 767px) {
      .area04 .img02 {
        display: none; } }
  .area04 .tx01 {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-feature-settings: "palt";
    color: #ffff00;
    font-size: 46px;
    line-height: 1.35;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 17px; }
    @media screen and (max-width: 767px) {
      .area04 .tx01 {
        font-size: 6.9333333333vw;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 6.4vw; } }
  .area04 .tx02 {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-feature-settings: "palt";
    color: #fff;
    font-size: 34px;
    line-height: 1.35;
    margin-bottom: 28px; }
    @media screen and (max-width: 767px) {
      .area04 .tx02 {
        font-size: 4.8vw;
        margin-bottom: 8vw; } }
  .area04 .tx03 {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-feature-settings: "palt";
    color: #fff;
    font-size: 16px;
    text-align: right;
    margin-bottom: 6px;
    margin-right: 7.5em; }
    @media screen and (max-width: 767px) {
      .area04 .tx03 {
        font-size: 3.2vw;
        margin-bottom: 3.7333333333vw;
        margin-right: 1.5em; } }
  .area04 .tx04 {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-feature-settings: "palt";
    color: #fff;
    font-size: 34px;
    line-height: 1.375;
    margin-bottom: 57px; }
    @media screen and (max-width: 767px) {
      .area04 .tx04 {
        font-size: 4.8vw;
        margin-bottom: 8.5333333333vw; } }
  .area04 .tx05Wrap {
    display: flex;
    flex-wrap: wrap;
    text-align: center; }
    @media screen and (max-width: 767px) {
      .area04 .tx05Wrap {
        display: none; } }
    .area04 .tx05Wrap .tx05 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      text-align: center;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 400;
      font-feature-settings: "palt";
      color: #fff;
      font-size: 16px;
      line-height: 1.375;
      padding-bottom: 25px;
      position: relative; }
      .area04 .tx05Wrap .tx05::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-12%);
        width: 0;
        height: 0;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        border-width: 15px 8.5px 0px 8.5px; }
      .area04 .tx05Wrap .tx05.type01 {
        width: 204px;
        margin-left: 59px; }
      .area04 .tx05Wrap .tx05.type02 {
        width: 228px;
        margin-left: 42px; }
      .area04 .tx05Wrap .tx05.type03 {
        width: 212px;
        margin-left: 15px; }
  .area04 .tx06 {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-feature-settings: "palt";
    color: #fff;
    font-size: 12px;
    line-height: 1.375; }
  .area04 .btlist01 {
    border-bottom: 1px solid #fff;
    padding: 0 20px 50px;
    margin-bottom: 50px; }
    @media screen and (max-width: 767px) {
      .area04 .btlist01 {
        padding: 0 0 8.2666666667vw;
        margin-bottom: 5.0666666667vw; } }
    .area04 .btlist01 li {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      min-height: 66px; }
      .area04 .btlist01 li .button01 {
        width: 300px;
        padding-top: 4px; }
        @media screen and (max-width: 767px) {
          .area04 .btlist01 li .button01 {
            padding-top: 0;
            width: 80vw;
            margin-left: auto;
            margin-right: auto; } }
      .area04 .btlist01 li .button02 {
        width: 101px;
        padding-top: 4px; }
        @media screen and (max-width: 767px) {
          .area04 .btlist01 li .button02 {
            padding-top: 0;
            width: 26.9333333333vw;
            margin-left: auto;
            margin-right: auto; } }
      .area04 .btlist01 li p {
        width: calc(100% - 360px);
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-feature-settings: "palt";
        color: #fff;
        font-size: 16px;
        line-height: 1.4; }
        @media screen and (max-width: 767px) {
          .area04 .btlist01 li p {
            width: 100%;
            font-size: 3.7333333333vw;
            margin-top: 6.1333333333vw; } }
      .area04 .btlist01 li + li {
        margin-top: 24px; }
        @media screen and (max-width: 767px) {
          .area04 .btlist01 li + li {
            margin-top: 10.1333333333vw; } }
  @media screen and (min-width: 768px) {
    .area04 .btlist02 {
      display: none; } }
  @media screen and (max-width: 767px) {
    .area04 .btlist02 {
      padding: 0 0 0;
      margin-bottom: 13.3333333333vw; } }
  .area04 .btlist02 li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 66px; }
    .area04 .btlist02 li .button {
      width: 80vw;
      margin-left: auto;
      margin-right: auto; }
    .area04 .btlist02 li p {
      width: calc(100% - 360px);
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 400;
      font-feature-settings: "palt";
      color: #fff;
      font-size: 16px;
      line-height: 1.4; }
      @media screen and (max-width: 767px) {
        .area04 .btlist02 li p {
          width: 100%;
          font-size: 3.7333333333vw;
          margin-top: 6.1333333333vw; } }
    .area04 .btlist02 li + li {
      margin-top: 24px; }
      @media screen and (max-width: 767px) {
        .area04 .btlist02 li + li {
          margin-top: 5.3333333333vw; } }

.btn01 {
  text-align: center; }
  .btn01 a {
    max-width: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-feature-settings: "palt";
    font-size: 18px;
    color: #fff;
    background: #006dff;
    border-radius: 27px;
    padding: 0.75em 2em;
    position: relative; }
    @media screen and (max-width: 767px) {
      .btn01 a {
        max-width: 85.3333333333vw;
        font-size: 3.8666666667vw; } }
    .btn01 a::before {
      content: '';
      position: absolute;
      top: 50%;
      right: 20px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent transparent #fff;
      border-width: 4.5px 0px 4.5px 8px;
      transform: translateY(-50%); }
      @media screen and (max-width: 767px) {
        .btn01 a::before {
          right: 14px; } }
    .btn01 a:hover {
      transition: .3s; }
      @media screen and (min-width: 768px) {
        .btn01 a:hover {
          text-decoration: none;
          background: #4d99ff;
          transition: .3s; } }