// フォント
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');

// デフォルト設定
.SiteWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 1280px;
  margin: 0 auto;

  @media screen and (max-width: 1280px){
    width: 100%;
  }
}

.fixed {
  width: 100%;
  height: 100%;
  position: fixed;
}

.sp {
  display: none;

  @media screen and (max-width: 991px) {
    display: block;
  }
}

.pc {
  @media screen and (max-width: 991px){
    display: none;
  }
}

main {
  padding-top: 4rem;
  flex: 1;
  overflow-x: hidden;
}

// ヘッダー
header {
  height: 4rem;
  background: #FFF;
  filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.1));
  position: fixed;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  z-index: 3;

  // 1280px
  @media screen and (max-width: 1280px){
    max-width: 100%;
  }

  & .inner {
    padding: 14px 0;
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    position: relative;

    // 1100px
    @media screen and (max-width: 1100px){
      max-width: 100%;
      padding: 14px 30px;
    }
  }

  // ロゴ
  & .logo {
    background-image: url("../img/logo.png");
    background-image: image-set(url("../img/logo.png") 1x, url("../img/logo@2x.png") 2x);
    background-image: -webkit-image-set(url("../img/logo.png") 1x, url("../img/logo@2x.png") 2x);
    width: 132.65px;
    height: 36px;
    display: block;
    font-size: 0;
  }

  // メニュー
  & .menu {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 0 auto;
    display: flex;

    & li {
      margin-right: 1.25rem;

      & a {
        line-height: 2.5rem;
        color: #343434;
        font-family: m-plus-1p, sans-serif;
        font-weight: 500;
        font-style: normal;
      }

      &:last-child {
        margin-left: 0.5rem;
        margin-right: 0;
      }

      // ボタン
      & .btn {
        width: 136px;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #FFF;
        border-radius: 100px;
        display: block;
        font-size: 0.75rem;
        font-family: 'Noto Sans JP', sans-serif;

        &_list {
          display: flex;
        }

        &.black {
          background: #4A4848;

          &:hover {
            background: #626060;
          }
        }

        &.red {
          background: #DE0A14;
          &:hover {
            background: #FF271E;
          }
        }

        &:first-child {
          margin-right: 0.5rem;
        }
      }
    }

    @media screen and (max-width: 991px) {
      display: none;
    }

    &_btn {
      position: absolute;
      right: 30px;
      top: 22px;
      z-index: 2;
      width: 22px;
      height: 18px;
      cursor: pointer;

      &.active {

        &:before {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          top: 0.5rem;
        }

        &:after {
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
          bottom: 7px;
        }
      }

      &:before {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #ccc;
        position: absolute;
        left: 0;
        transition: all 300ms ease-out;
        border-radius: 0.5rem;
        top: 0;
      }

      &:after {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #ccc;
        position: absolute;
        left: 0;
        transition: all 300ms ease-out;
        border-radius: 0.5rem;
        bottom: 8px;
      }

      & span {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #ccc;
        position: absolute;
        left: 0;
        transition: all 300ms ease-out;
        bottom: 0;
        cursor: pointer;
        border-radius: 0.5rem;

        &.active {
          display: none;
        }
      }
    }
  }

  // メニュースマホ
  & .global_menu {
    display: none;
    background: #FFF;
    width: 100%;
    font-family: m-plus-1p, sans-serif;
    font-weight: 500;
    font-style: normal;

    &.active {
      display: block;
    }

    & > div {
      height: 43px;
      padding: 0.75rem 1.25rem;
      border-bottom: 1px solid #ccc;

      &:first-child {
        border-top: 1px solid #ccc;
      }

      &:last-child {
        border-bottom: none;
        height: 80px;
        padding: 1.25rem 0;
        margin: 0 auto;
        width: fit-content;
        display: flex;

        & .btn {
          width: 136px;
          height: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          color: #FFF;
          border-radius: 100px;
          display: block;
          font-size: 0.75rem;
          font-family: 'Noto Sans JP', sans-serif;

          &.black {
            background: #4A4848;
            margin-right: 0.5rem;

            &:hover {
              background: #626060;
            }
          }

          &.red {
            background: #DE0A14;
            &:hover {
              background: #FF271E;
            }
          }
        }
      }
    }
  }
}

// コンテンツ
main {

  & .inner {
    // first
    & .first {
      //background-image: url("../img/bg_first.png");
      //background-image: image-set(url("../img/bg_first.png") 1x, url("../img/bg_first@2x.png") 2x);
      //background-image: -webkit-image-set(url("../img/bg_first.png") 1x, url("../img/bg_first@2x.png") 2x);
      max-width: 1280px;
      max-height: 520px;
      height: 100vh;
      position: relative;
      padding: 110px 0;

      @media screen and (max-width: 1280px){
        max-width: 100%;
      }

      #bg-video-pc{
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        background: url('../img/bg_first.png') no-repeat;
        background-size: cover;

        @media screen and (max-width: 991px){
          display: none;
        }
      }

      #bg-video-sp {
        display: none;

        @media screen and (max-width: 991px) {
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -100;
          background: url('../img/bg_first.png') no-repeat center;
        }
      }

      & > div {
        width: fit-content;
        margin: 0 auto;
        position: relative; /*必ず必要*/
        z-index: 2; /*必ず必要*/
      }

      & .img_list {
        display: flex;
        margin: 0 auto 0.75rem auto;

        & img {
          display: block;
        }
      }

      & h1 {
        font-size: 3rem;
        font-family: m-plus-1p, sans-serif;
        font-weight: 500;
        font-style: normal;
        color: #FFF;
        line-height: 64px;
      }
    }

    // スライダー
    & .slider {
      padding: 2rem 0;

      & .slick-track {
        display: flex;

        & .slick-slide {
          margin-right: 44px;
          width: fit-content!important;
          height: 75px;
          display: flex;
          align-items: center;

          //& img {
          //  width: 80px;
          //}
        }
      }
    }

    // resolution
    & .resolution {
      padding: 84.4px 0 120px 0;

      @media screen and (max-width: 991px) {
        padding: 26px 0 56px 0;
      }

      & div {
        & h2 {
          font-family: m-plus-1p, sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 2.5rem;
          line-height: 54.5px;
          text-align: center;
          margin-bottom: 43px;

          @media screen and (max-width: 991px){
            font-size: 1.75rem;
            line-height: 36px;
          }

          & small {
            font-size: 1.25rem;

            @media screen and (max-width: 991px){
              font-size: 18px;
            }
          }
        }

        & > img {
          margin: 0 auto 5rem auto;
          display: block;

          &.sp {
            display: none;

            @media screen and (max-width: 991px) {
              display: block;
              width: auto;
            }
          }

          @media screen and (max-width: 991px) {
            &.pc {
              display: none;
            }
          }

          @media screen and (max-width: 1100px){
            width: 90%;
            height: 100%;
          }
        }

        // ポイント
        & .point {
          display: flex;
          margin: 0 auto 5rem auto;
          max-width: 1100px;
          width: 100%;

          @media screen and (max-width: 1100px){
            max-width: 100%;
          }

          @media screen and (max-width: 991px) {
            display: block;
            max-width: 302px;
            margin: 0 auto 2.5rem auto;
          }

          & li {
            border-left: 6px solid #F9F9F9;
            padding: 0 2.5rem;
            width: 33%;

            &:last-child {
              border-right: 6px solid #F9F9F9;
              width: 34%;
            }

            @media screen and (max-width: 991px){
              border-left: 0;
              border-bottom: 6px solid #F9F9F9;
              padding: 1.5rem 11.5px;
              width: auto;

              &:last-child {
                border-right: none;
                border-bottom: none;
                width: auto;
              }
            }

            & img {
              display: block;
              margin: 0 auto 30px auto;
            }

            & h3 {
              line-height: 41.5px;
              font-family: m-plus-1p, sans-serif;
              font-weight: 700;
              font-style: normal;
              font-size: 2rem;
              text-align: center;
              margin-bottom: 27px;

              @media screen and (max-width: 991px) {
                font-size: 1.5rem;
                line-height: 2rem;
                margin-bottom: 1rem;
              }
            }

            & p {
              font-family: m-plus-1p, sans-serif;
              font-weight: 400;
              font-style: normal;
              font-size: 1rem;
              line-height: 2rem;
            }
          }
        }

        & .btn {
          width: 335px;
          margin: 0 auto;
          display: block;
          border-radius: 100px;
          text-align: center;
          line-height: 56px;
          border: 2px solid #DE0A14;
          color: #DE0A14;
          font-family: m-plus-1p, sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1rem;

          &:hover {
            background: #FF271E;
            color: #FFF;
          }
        }
      }
    }

    // SNSのネットショップ
    & .shop {
      padding: 60px 0;
      background: #F9F9F9;
      width: 100%;

      @media screen and (max-width: 991px) {
        padding: 41px 0;
      }

      & div {
        max-width: 777.21px;
        margin: 0 auto;

        @media screen and (max-width: 991px) {
          max-width: 322.57px;
        }

        & h2 {
          font-family: m-plus-1p, sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 2rem;
          line-height: 29px;
          text-align: center;
          margin-bottom: 43px;

          @media screen and (max-width: 991px) {
            font-size: 1.75rem;
          }

          & small {
            font-size: 1.25rem;
            line-height: 30px;

            @media screen and (max-width: 991px){
              font-size: 18px;
              line-height: 33px;
            }
          }
        }

        & ul {
          display: flex;

          @media screen and (max-width: 991px){
            display: block;
          }

          & li {
            width: 50%;
            text-align: center;

            @media screen and (max-width: 991px) {
              width: 100%;
              margin-bottom: 25px;

              &:last-child {
                margin-bottom: 0;
              }
            }

            & img {
              width: 100%;
              height: 100%;
              display: block;
            }

            & a {
              font-family: m-plus-1p, sans-serif;
              font-weight: 500;
              font-style: normal;
              font-size: 14px;
              line-height: 1.25rem;
              color: #0092E5;
            }
          }
        }
      }
    }

    // コスト削減や管理軽減を実現
    & .abatement {
      padding: 80px 0 60px 0;
      max-width: 1085px;
      width: 100%;
      margin: 0 auto;

      @media screen and (max-width: 1100px){
        max-width: 100%;
      }

      @media screen and (max-width: 991px) {
        padding: 56px 0 2rem 0;
      }

      & div {
        & h2 {
          font-family: m-plus-1p, sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 2rem;
          line-height: 2.5rem;
          text-align: center;
          margin-bottom: 43px;

          @media screen and (max-width: 991px) {
            font-size: 1.75rem;
            line-height: 36px;
            margin-bottom: 2rem;
          }

          & small {
            font-size: 1.25rem;
            line-height: 30px;

            @media screen and (max-width: 991px){
              font-size: 18px;
            }
          }
        }

        & img {
          width: 100%;
          margin-bottom: 60px;

          &.pc {
            display: block;
          }

          @media screen and (max-width: 1100px){
            margin: 0 auto 60px auto;
            width: 95%;
            height: 100%;
          }

          &.sp {
            display: none;

            @media screen and (max-width: 991px) {
              display: block;
            }
          }

          @media screen and (max-width: 991px) {
            width: auto;
            margin-bottom: 2rem;
            &.pc {
              display: none;
            }
          }
        }

        & .btn {
          width: 335px;
          margin: 0 auto;
          display: block;
          border-radius: 100px;
          text-align: center;
          line-height: 56px;
          border: 2px solid #DE0A14;
          color: #DE0A14;
          font-family: m-plus-1p, sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1rem;

          &:hover {
            background: #FF271E;
            color: #FFF;
          }
        }
      }
    }

    // よくあるご質問
    & .qa {
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
      padding: 60px 0 120px 0;

      @media screen and (max-width: 991px){
        max-width: 335px;
        padding: 2rem 0;
      }

      & div {

        & h2 {
          font-family: m-plus-1p, sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 2.5rem;
          line-height: 54.5px;
          text-align: center;
          margin-bottom: 43px;

          @media screen and (max-width: 991px){
            font-size: 1.75rem;
            line-height: 2rem;
            margin-bottom: 2rem;
          }
        }

        // アコーディオン
        & .accordion {
          margin: 0 auto;
          position: relative;
          width: 100%;
          font-family: m-plus-1p, sans-serif;
          font-weight: 400;
          font-style: normal;

          &-title {
            color: #333;
            cursor: pointer;
            font-size: 1rem;
            position: relative;
            background: #F9F9F9;
            min-height: 54px;
            padding: 1rem 64px;
            line-height: 21px;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;

            &:before {
              content: "";
              display: block;
              width: 2rem;
              height: 2rem;
              position: absolute;
              left: 1.25rem;
              background-image: url("../img/icon_question.png");
              background-image: image-set(url("../img/icon_question.png") 1x, url("../img/icon_question@2x.png") 2x);
              background-image: -webkit-image-set(url("../img/icon_question.png") 1x, url("../img/icon_question@2x.png") 2x);
              top: 0.75rem;
            }

            &:after {
              border-right: 2px solid #999;
              border-top: 2px solid #999;
              content: "";
              display: block;
              height: 0.5rem;
              position: absolute;
              right: 25px;
              top: 38%;
              transform: rotate(135deg);
              transition: transform .3s ease-in-out,top .3s ease-in-out;
              width: 0.5rem;
            }

            &.open {
              border-radius: 0.5rem 0.5rem 0 0;
              &:after {
                top: 45%;
                transform: rotate(-45deg);
              }
            }
          }

          &-content {
            display: none;
            padding: 1rem 1.25rem 1rem 64px;
            line-height: 21px;
            position: relative;
            background: #F9F9F9;
            border-radius: 0 0 0.5rem 0.5rem;
            margin-bottom: 0.5rem;

            &:before {
              content: "";
              display: block;
              width: 2rem;
              height: 2rem;
              position: absolute;
              left: 1.25rem;
              background-image: url("../img/icon_answer.png");
              background-image: image-set(url("../img/icon_answer.png") 1x, url("../img/icon_answer@2x.png") 2x);
              background-image: -webkit-image-set(url("../img/icon_answer.png") 1x, url("../img/icon_answer@2x.png") 2x);
              top: 0.75rem;
            }

            & p {
              font-size: 1rem;
            }

            & a {
              font-size: 1rem;
              color: #0092E5;
            }
          }
        }
      }
    }

    // 導入の流れ
    & .flow {
      max-width: 1100px;
      width: 100%;
      margin: 0 auto;
      font-family: m-plus-1p, sans-serif;
      font-style: normal;
      padding: 80px 0 120px 0;

      @media screen and (max-width:  1100px){
        max-width: 100%;
      }

      @media screen and (max-width: 991px){
        padding: 56px 0;
      }

      & h2 {
        font-family: m-plus-1p, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 2.5rem;
        line-height: 54.5px;
        text-align: center;
        margin-bottom: 43px;

        @media screen and (max-width: 991px) {
          font-size: 1.75rem;
          line-height: 36px;
          margin-bottom: 2rem;
        }

        & small {
          font-size: 1.25rem;
          line-height: 30px;

          @media screen and (max-width: 991px){
            font-size: 18px;
          }
        }
      }

      & ul {
        display: flex;
        margin: 0 auto;

        @media screen and (max-width: 1100px){
          width: 90%;
        }

        & li {
          margin-right: 1.25rem;

          &:last-child {
            margin-right: 0;
          }

          @media screen and (max-width: 1100px) {
            & img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      & img {
        &.sp {
          width: auto;
          margin: 0 auto;
        }
      }
    }

    // 会社情報
    & .company {
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
      font-family: m-plus-1p, sans-serif;
      font-style: normal;
      padding: 86px 0 120px 0;

      @media screen and (max-width: 991px){
        max-width: 336px;
        padding: 56px 0;
      }

      & > div {

        & h2 {
          font-weight: 700;
          font-size: 2.5rem;
          line-height: 54.5px;
          text-align: center;
          margin-bottom: 43px;

          @media screen and (max-width: 991px) {
            font-size: 1.5rem;
            line-height: 44px;
            margin-bottom: 2rem;
          }
        }

        & > p {
          font-weight: 400;
          font-size: 1rem;
          line-height: 2.5rem;
          text-align: center;
          margin: 0 auto 83px auto;

          @media screen and (max-width: 991px){
            line-height: 2rem;
            margin: 0 auto 2.5rem auto;
          }
        }

        & dl {
          max-width: 100%;
          margin: 0 auto 2.5rem auto;

          & > div {
            margin-bottom: 0.5rem;
            display: flex;

            @media screen and (max-width: 991px){
              display: block;
            }

            & dt {
              width: 160px;
              background: #DE0A14;
              color: #FFF;
              font-weight: 700;
              padding: 0.75rem 1.25rem;
              line-height: 1.5rem;

              @media screen and (max-width: 991px){
                width: 100%;
              }
            }

            & dd {
              background: #F9F9F9;
              width: 100%;
              padding: 0.75rem 1.25rem;
              line-height: 1.5rem;

              & a {
                color: #0092E5;
              }

              & ul {

                & li {
                  display: flex;

                  & p {
                    width: 100%;
                  }

                  &:before {
                    content: "・";
                  }
                }
              }
            }
          }
        }

        @media screen and (max-width: 991px){
          & iframe {
            width: 100%;
            height: 420px;
          }
        }
      }
    }

    // お問い合わせ完了
    & .complete {
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
      padding: 80px 0;

      @media screen and (max-width: 991px){
        max-width: 336px;
        padding: 2.5rem 0;
      }

      & > div {

        & h2 {
          font-weight: 700;
          font-size: 2rem;
          line-height: 54.5px;
          text-align: center;
          margin-bottom: 43px;

          @media screen and (max-width: 991px){
            font-size: 1.75rem;
            line-height: 44px;
            margin-bottom: 2rem;
          }
        }

        & p {
          font-size: 1rem;
          line-height: 2rem;
        }
      }
    }

    // 無料見積もり・相談
    & .contact {
      background-image: url("../img/bg_contact.png");
      background-image: image-set(url("../img/bg_contact.png") 1x, url("../img/bg_contact@2x.png") 2x);
      background-image: -webkit-image-set(url("../img/bg_contact.png") 1x, url("../img/bg_contact@2x.png") 2x);
      max-width: 1280px;
      max-height: 395px;
      width: 100%;
      height: 100vh;
      padding: 80px 0;
      text-align: center;
      font-family: m-plus-1p, sans-serif;
      font-weight: 700;
      font-style: normal;

      @media screen and (max-width: 1280px){
        max-width: 100%;
        background-position: center;
      }

      & h3 {
        font-size: 2rem;
        color: #FFF;
        line-height: 43px;
        margin-bottom: 26px;

        @media screen and (max-width: 991px){
          font-size: 1.5rem;
          line-height: 2rem;
          margin-bottom: 25px;
        }
      }

      & .btn {
        width: 335px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        color: #FFF;
        border-radius: 100px;
        display: block;

        &_list {
          margin: 0 auto;
          display: block;
          width: fit-content;
        }

        &.black {
          background: #4A4848;
          margin-bottom: 0.75rem;

          &:hover {
            background: #626060;
          }
        }

        &.red {
          background: #E7271E;

          &:hover {
            background: #FF271E;
          }
        }
      }

      // お問い合わせフォーム
      &form {
        padding: 86px 0 120px 0;
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        font-family: m-plus-1p, sans-serif;
        font-style: normal;

        @media screen and (max-width: 991px){
          padding: 56px 0;
          max-width: 335px;
        }

        & > div {

          & h2 {
            font-weight: 700;
            font-size: 2rem;
            line-height: 2.5rem;
            display: block;
            width: fit-content;
            margin: 0 auto 66px auto;

            @media screen and (max-width: 991px){
              font-size: 1.75rem;
              line-height: 44px;
              margin-bottom: 2rem;
            }
          }

          & .form {

            &area {
              background: #F9F9F9;
              border-radius: 0.5rem;
              padding: 2.5rem;

              @media screen and (max-width: 991px){
                padding: 1.25rem;
              }

              & > div {
                margin-bottom: 1.25rem;
              }

              & label {
                display: flex;
                font-size: 1rem;
                line-height: 1.5rem;
                margin-bottom: 14px;
                font-weight: 700;

                & .badge {
                  background: #E7271E;
                  font-size: 0.75rem;
                  display: block;
                  color: #FFF;
                  padding: 0 4px;
                  border-radius: 4px;
                  margin-right: 0.5rem;
                  font-weight: 500;
                }
              }

              & select {
                border: 1px solid #ccc;
                background: #FFF;
                border-radius: 0.5rem;
                display: block;
                width: 100%;
                height: 42px;
                padding: 0 1.25rem;
              }

              & input[type="text"] {
                border: 1px solid #ccc;
                background: #FFF;
                border-radius: 0.5rem;
                display: block;
                width: 100%;
                height: 1.5rem;
                padding: 1.25rem;
              }

              & input[type="email"] {
                border: 1px solid #ccc;
                background: #FFF;
                border-radius: 0.5rem;
                display: block;
                width: 100%;
                height: 1.5rem;
                padding: 1.25rem;
              }

              & .asterisk {
                margin-top: 0.5rem;
                font-size: 0.75rem;
                line-height: 1.25rem;
                display: block;
                width: 100%;
                color: #333;
                font-weight: 400;
              }

              & textarea {
                padding: 1.25rem;
                border: 1px solid #ccc;
                background: #FFF;
                border-radius: 0.5rem;
                display: block;
                width: 100%;
                min-height: 144px;
              }

              & .checkbox_txt {
                display: flex;
                line-height: 22px;

                & input[type="checkbox"] {
                  position: relative;
                  margin: 5px 2rem 0 0;
                  cursor: pointer;
                  width: 0;
                  height: 0;

                  &:before {
                    background: #EFEFEF;
                    content: "";
                    display: block;
                    width: 22px;
                    height: 22px;
                    position: absolute;
                    top: 6px;
                    left: 0;
                    transform: translateY(-50%);
                    border: 1px solid;
                    border-radius: 50%;
                    cursor: pointer;
                  }

                  &:checked:before {
                    /*チェックしたときの箱の色を変える*/
                    background: #FFF;
                  }

                  &:checked:after {
                    content: "";
                    display: block;
                    width: 10px;
                    height: 6px;
                    box-sizing: border-box;
                    border-bottom: 2px solid #006666;
                    border-left: 2px solid #006666;
                    position: absolute;
                    /*ここから下は位置を調整する*/
                    top: 3px;
                    left: 8px;
                    /*箱を斜めに傾けてチェック表示にする*/
                    -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg) translateY(-50%);
                  }
                }

                & a {
                  color: #0092E5;
                }
              }
            }

            & .btn {
              width: 335px;
              margin: 2.5rem auto 0 auto;
              display: block;
              border-radius: 100px;
              text-align: center;
              line-height: 56px;
              border: 2px solid #E7271E;
              background: #E7271E;
              color: #FFF;
              font-family: m-plus-1p, sans-serif;
              font-weight: 700;
              font-style: normal;
              font-size: 1rem;

              @media screen {
                margin: 1.25rem auto 0 auto;
              }

              &:hover {
                background: #FF271E;
              }
            }
          }
        }
      }
    }
  }
}

// フッター
footer {
  height: 257px;
  background: #707070;

  @media screen and (max-width: 991px){
    height: 48px;
  }

  & .inner {
    max-width: 1190px;
    margin: 0 auto;
    padding: 60px 0 1.25rem;

    @media screen and (max-width: 1280px){
      max-width: 95%;
    }

    @media screen and (max-width: 991px){
      padding: 16.5px 0;
    }

    & nav {
      display: flex;
      margin-bottom: 49px;

      @media screen and (max-width: 991px){
        display: none;
      }

      & li {
        list-style-type: none;
        margin-right: 44px;

        @media screen and (max-width: 1111px){
          margin-right: 21px;
        }

        & p {
          color: #FFF;
          font-size: 0.75rem;
          line-height: 1.25rem;

          &.ttl {
            font-size: 1rem;
            font-family: m-plus-1p, sans-serif;
            font-weight: 700;
            font-style: normal;
            margin-bottom: 9px;
            line-height: 1.5rem;
          }

          & a {
            font-family: m-plus-1p, sans-serif;
            font-weight: 700;
            font-style: normal;
          }
        }

        & .sns {
          display: flex;

          & a {
            font-size: 0;
            width: 1.75rem;
            height: 1.75rem;
            display: block;

            &.twitter {
              background-image: url("../img/icon_twitter_white.png");
              background-image: image-set(url("../img/icon_twitter_white.png") 1x, url("../img/icon_twitter_white@2x.png") 2x);
              background-image: -webkit-image-set(url("../img/icon_twitter_white.png") 1x, url("../img/icon_twitter_white@2x.png") 2x);
              margin-right: 1.25rem;
            }

            &.tiktok {
              background-image: url("../img/icon_tiktok_white.png");
              background-image: image-set(url("../img/icon_tiktok_white.png") 1x, url("../img/icon_tiktok_white@2x.png") 2x);
              background-image: -webkit-image-set(url("../img/icon_tiktok_white.png") 1x, url("../img/icon_tiktok_white@2x.png") 2x);
            }

            @media screen and (max-width: 991px){
              width: 1.5rem;
              height: 1.5rem;
              background-size: cover;
            }
          }
        }

        @media screen and (max-width: 991px){
          display: none;
        }
      }
    }

    // コピーライト
    & .copyright {
      text-align: right;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 15px;
      color: #FFF;

      @media screen and (max-width: 991px){
        text-align: center;
      }
    }
  }
}

#contact_errors {

  & p {
    color: #F4044C;
    padding-top: 0.5rem;

    @media screen and (max-width: 991px){
      font-size: 0.75rem  ;
    }
  }
}