@charset "UTF-8";
.nav_btn,
.h_side_nav {
  display: none !important; }

.wrapper {
  width: 100%;
  padding: 40px 0;
  position: relative;
  height: 100vh; }
  @media screen and (max-width: 480px) {
    .wrapper {
      padding: 0; } }

.contents_wrap {
  position: relative;
  background: #f2efef;
  background: #fff; }
  .contents_wrap::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: #f2efef;
    background: #fff;
    height: 40px;
    z-index: 20; }
    @media screen and (max-width: 768px) {
      .contents_wrap::after {
        height: 5px; } }
    @media screen and (max-width: 480px) {
      .contents_wrap::after {
        content: none; } }
  .contents_wrap::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2efef;
    background: #fff;
    height: 40px;
    z-index: 20; }
    @media screen and (max-width: 768px) {
      .contents_wrap::before {
        height: 5px; } }
    @media screen and (max-width: 480px) {
      .contents_wrap::before {
        content: none; } }

.login_area {
  height: 100%; }
  .login_area .login_in {
    width: calc(100% - (40px + 4vw) * 2);
    max-width: 100%;
    height: calc(100dvh - 80px);
    background: #FFF;
    border-radius: 5px;
    color: #333;
    text-align: center; }
    @media screen and (max-width: 480px) {
      .login_area .login_in {
        width: 100%;
        padding-top: 8vh;
        height: 100dvh; } }
    .login_area .login_in .login_cont {
      width: calc(100% - 60px);
      margin: 0 auto;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      .login_area .login_in .login_cont .login_ttl {
        max-width: 300px;
        width: 100%; }
        .login_area .login_in .login_cont .login_ttl img {
          width: 100%; }
      .login_area .login_in .login_cont .login_name {
        margin: 30px 0 40px;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        font-size: clamp(12px, 1.334vw, 16px);
        text-align: center;
        color: #333; }
        @media screen and (max-width: 480px) {
          .login_area .login_in .login_cont .login_name {
            margin: 15px auto 20px;
            font-size: calc(14vw/3.9);
            letter-spacing: 0;
            margin-bottom: 30px; } }
        @media screen and (max-width: 375px) {
          .login_area .login_in .login_cont .login_name {
            font-size: calc(13vw/3.9); } }
        .login_area .login_in .login_cont .login_name .big {
          display: block;
          font-size: clamp(40px, 4.167vw, 50px);
          line-height: 1; }
          @media screen and (max-width: 480px) {
            .login_area .login_in .login_cont .login_name .big {
              letter-spacing: 0.2em; } }
          @media screen and (max-width: 375px) {
            .login_area .login_in .login_cont .login_name .big {
              font-size: clamp(30px, 10vw, 40px); } }
      .login_area .login_in .login_cont .form_area {
        max-width: 400px;
        max-width: 300px;
        width: 100%;
        margin: 0 auto 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: clamp(60px, 7.5vw, 90px);
        letter-spacing: 0.1em; }
        @media screen and (max-width: 480px) {
          .login_area .login_in .login_cont .form_area {
            max-width: 250px; } }
        .login_area .login_in .login_cont .form_area .password_txt {
          font-size: clamp(12px, 1.334vw, 16px);
          text-align: center;
          font-weight: 400;
          letter-spacing: 0.1em;
          line-height: 1;
          margin-bottom: 10px; }
        .login_area .login_in .login_cont .form_area .form_l {
          width: 100%; }
        .login_area .login_in .login_cont .form_area .form_r {
          width: 100%; }
        .login_area .login_in .login_cont .form_area .password {
          text-align: center;
          width: 100%;
          padding: 18px 20px;
          padding: 12px 15px;
          display: block;
          vertical-align: middle;
          border: none;
          box-sizing: border-box;
          font-size: 16px;
          font-family: inherit;
          background: #FFF;
          border: 1px solid #333;
          margin-bottom: 20px; }
          @media screen and (max-width: 768px) {
            .login_area .login_in .login_cont .form_area .password {
              width: 100%;
              font-size: 14px;
              padding: 10px 15px; } }
          @media screen and (max-width: 480px) {
            .login_area .login_in .login_cont .form_area .password {
              padding: 12px 5px; } }
        .login_area .login_in .login_cont .form_area .submit {
          position: relative;
          width: 100%;
          cursor: pointer;
          padding: 14px 20px;
          transition: 0.3s all ease-in-out 0s;
          font-size: 19px;
          padding: 8px;
          font-size: 14px;
          background: #333;
          color: #FFF;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          outline: none;
          border: none;
          overflow: hidden;
          z-index: 1;
          transition: 0.3s background ease-in-out 0s; }
          body:not(.mobile) .login_area .login_in .login_cont .form_area .submit:hover {
            background: #000; }
          @media screen and (max-width: 768px) {
            .login_area .login_in .login_cont .form_area .submit {
              width: 100%; } }
          @media screen and (max-width: 480px) {
            .login_area .login_in .login_cont .form_area .submit {
              font-size: 12px;
              letter-spacing: 0.2em; } }
      .login_area .login_in .login_cont .login_contact_group {
        flex-direction: column;
        row-gap: 5px; }
        @media screen and (max-width: 480px) {
          .login_area .login_in .login_cont .login_contact_group {
            row-gap: 5px; } }
        .login_area .login_in .login_cont .login_contact_group .l01 {
          font-size: clamp(12px, 1.167vw, 14px);
          margin-bottom: 1.5em;
          letter-spacing: 0.1em; }
          @media screen and (max-width: 480px) {
            .login_area .login_in .login_cont .login_contact_group .l01 {
              font-size: 13px;
              margin-bottom: 0.8em;
              letter-spacing: 0.05em; } }
        .login_area .login_in .login_cont .login_contact_group .tel_text {
          font-size: clamp(26px, 3.667vw, 44px);
          font-size: clamp(12px, 1.667vw, 20px);
          line-height: 1;
          display: inline-block;
          letter-spacing: 0.05em; }
          @media screen and (max-width: 480px) {
            .login_area .login_in .login_cont .login_contact_group .tel_text {
              font-size: calc(20vw/3.9); } }
        .login_area .login_in .login_cont .login_contact_group .l02 {
          font-size: clamp(10px, 1vw, 12px); }
          @media screen and (max-width: 480px) {
            .login_area .login_in .login_cont .login_contact_group .l02 {
              font-size: 11px;
              font-size: calc(12vw/3.9);
              letter-spacing: 0; } }

/*	ログインエラー	*/
.login_error_wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: 0.2s opacity ease-in-out 0s; }
  body.login_error .login_error_wrap {
    pointer-events: all;
    opacity: 1; }
  .login_error_wrap .login_error_bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7); }
  .login_error_wrap .error_box {
    position: absolute;
    inset: 0;
    margin: auto;
    background: #FFF;
    border-radius: 10px;
    padding: 50px 20px;
    height: max-content;
    border: 2px solid #FFF;
    width: calc(100% - 40px);
    max-width: 600px;
    text-align: center;
    transform: scale(1);
    opacity: 0;
    pointer-events: none; }
    @media screen and (max-width: 480px) {
      .login_error_wrap .error_box {
        padding: 30px 20px; } }
    body.login_error.log_lim .login_error_wrap .error_box.err_lim {
      pointer-events: all;
      -webkit-animation: showSweetAlert .3s forwards;
      animation: showSweetAlert .3s forwards; }
    body.login_error.log_att .login_error_wrap .error_box.err_att {
      pointer-events: all;
      -webkit-animation: showSweetAlert .3s forwards;
      animation: showSweetAlert .3s forwards; }
    .login_error_wrap .error_box.err_lim {
      background: rgba(119, 55, 55, 0.9); }
    .login_error_wrap .error_box.err_att {
      background: rgba(85, 81, 75, 0.9); }
    .login_error_wrap .error_box .error_txt {
      font-size: 16px;
      color: #FFF;
      line-height: 2; }
      @media screen and (max-width: 480px) {
        .login_error_wrap .error_box .error_txt {
          font-size: 14px; } }
      .login_error_wrap .error_box .error_txt .yellow {
        display: inline-block;
        line-height: 1;
        color: #FF9;
        font-size: 120%; }
    .login_error_wrap .error_box .error_cancel {
      width: fit-content;
      margin: 20px auto 0;
      cursor: pointer;
      border-radius: 10px;
      background: #FFF;
      font-size: 16px;
      line-height: 1;
      color: #000;
      padding: 15px 30px;
      transition: 0.3s transform ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .login_error_wrap .error_box .error_cancel {
          font-size: 14px; } }
      body:not(.mobile) .login_error_wrap .error_box .error_cancel:hover {
        transform: scale(1.1); }
    .login_error_wrap .error_box .icon_error {
      width: 80px;
      height: 80px;
      border-width: 4px;
      border-style: solid;
      border-radius: 50%;
      padding: 0;
      position: relative;
      box-sizing: content-box;
      margin: 0 auto 20px;
      border-color: #FFF;
      text-align: center; }
      .login_error_wrap .error_box .icon_error .error_mark {
        position: relative;
        display: block;
        height: 80px;
        transform-origin: center; }
        body.login_error .login_error_wrap .error_box .icon_error .error_mark {
          -webkit-animation: animateXMark .5s;
          animation: animateXMark .5s; }
        .login_error_wrap .error_box .icon_error .error_mark .error_line {
          position: absolute;
          height: 5px;
          width: 47px;
          background-color: #FFF;
          display: block;
          top: 37px;
          border-radius: 2px; }
          .login_error_wrap .error_box .icon_error .error_mark .error_line.err_left {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            left: 17px; }
          .login_error_wrap .error_box .icon_error .error_mark .error_line.err_right {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            right: 16px; }
@keyframes showSweetAlert {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1); }
  1% {
    opacity: 0.1;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  45% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  80% {
    opacity: 1;
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }
@keyframes animateXMark {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0; }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0; }
  80% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }

/*# sourceMappingURL=login.css.map */