@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
/*
font-family: $font-gothic;
300 400 500 700
*/
@import url("//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600&display=swap");
/*
font-family: $font-min;
300 400 500 600
*/
@import url("//fonts.googleapis.com/css2?family=Bentham&display=swap");
/*
font-family: $font-en;
400
*/
/*@include font-gothic();*/
/*@include font-min();*/
/*@include font-en();*/
/*@include incImg100();*/
/*@include incSmooth();*/
/*@include dropshadow;*/
/*@include boxshadow;*/
/*@include fs();*/
/*@include btm();*/
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 1000px;
  padding-top: 60px;
  min-width: auto;
  min-width: none;
  width: 100%;
  position: relative; }
  body:after {
    background: #B90E5B;
    content: '';
    height: 52vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0; }

.wrap {
  display: block;
  width: 100%; }

.loginArea {
  margin-bottom: 0;
  max-width: 100%;
  width: 100%; }
  .loginArea .inr {
    background-color: #FFF;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    display: block;
    margin: 0 auto;
    max-width: 740px;
    padding: 40px;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
    .loginArea .inr .logo {
      margin-bottom: 20px;
      text-align: center; }
      .loginArea .inr .logo .logoImg {
        display: block;
        margin-bottom: 20px;
        text-align: center; }
        .loginArea .inr .logo .logoImg img {
          width: 90px; }
      .loginArea .inr .logo .logoTitleSet .logoNum {
        display: block;
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 1.7;
        line-height: 1.4;
        font-weight: 500;
        margin-right: 5px;
        vertical-align: 2px; }
        @media only screen and (max-width: 960px) {
          .loginArea .inr .logo .logoTitleSet .logoNum {
            font-size: 20px;
            font-size: 2rem; } }
      .loginArea .inr .logo .logoTitleSet .logoTitle {
        font-size: 36px;
        font-size: 3.6rem;
        line-height: 1.7;
        line-height: 1.4;
        font-weight: 500;
        letter-spacing: -0.02em; }
        @media only screen and (max-width: 960px) {
          .loginArea .inr .logo .logoTitleSet .logoTitle {
            font-size: 31px;
            font-size: 3.1rem; } }
      .loginArea .inr .logo .logoDate {
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.7;
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1;
        margin-left: 20px;
        padding-top: 2px; }
        @media only screen and (max-width: 960px) {
          .loginArea .inr .logo .logoDate {
            font-size: 12px;
            font-size: 1.2rem; } }
        .loginArea .inr .logo .logoDate .num {
          font-size: 22px;
          font-size: 2.2rem;
          line-height: 1.7;
          line-height: 1.4;
          font-weight: 500;
          margin: 0 2px; }
          @media only screen and (max-width: 960px) {
            .loginArea .inr .logo .logoDate .num {
              font-size: 19px;
              font-size: 1.9rem; } }
    .loginArea .inr .formArea {
      margin: 0 auto;
      max-width: 500px; }
      .loginArea .inr .formArea .formStart {
        font-weight: 500;
        margin-bottom: 15px; }
      .loginArea .inr .formArea ul.inputs li {
        margin-bottom: 14px; }
        .loginArea .inr .formArea ul.inputs li input {
          border: 1px solid #DDD;
          border-radius: 5px;
          padding: 10px 15px;
          color: #111;
          min-height: 50px;
          transition: 0.2s;
          width: 100%; }
          .loginArea .inr .formArea ul.inputs li input:focus {
            background: #FBFFF8;
            border: 1px solid #61B226; }
        .loginArea .inr .formArea ul.inputs li .smallAtt {
          background-color: #3788f7;
          border-radius: 30px;
          color: #FFF;
          display: block;
          font-size: 14px;
          font-weight: 600;
          margin-top: 7px;
          padding: 6px 10px 7px 20px;
          position: relative; }
          .loginArea .inr .formArea ul.inputs li .smallAtt:before {
            content: "";
            position: absolute;
            top: -26px;
            left: 10%;
            margin-left: -13px;
            border: 13px solid transparent;
            border-bottom: 15px solid #3788f7; }
      .loginArea .inr .formArea .attBox {
        border: 1px solid #DDD;
        margin: 30px 0;
        padding: 20px 30px 25px;
        text-align: center; }
        .loginArea .inr .formArea .attBox p.attTitle {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px; }
        .loginArea .inr .formArea .attBox ul {
          margin-bottom: 20px;
          text-align: left; }
          .loginArea .inr .formArea .attBox ul li {
            color: #000;
            font-size: 14px;
            font-weight: 600; }
        .loginArea .inr .formArea .attBox .loginBtn {
          text-align: center; }
          .loginArea .inr .formArea .attBox .loginBtn button {
            background: linear-gradient(90deg, #4b8ed0 0%, #63ced0 100%);
            border-radius: 50px;
            color: #FFF;
            display: inline-block;
            font-size: 18px;
            font-size: 1.8rem;
            line-height: 1.7;
            font-weight: 600;
            padding: 10px 15px;
            max-width: 400px;
            width: 100%;
            transition: 0.2s; }
            @media only screen and (max-width: 960px) {
              .loginArea .inr .formArea .attBox .loginBtn button {
                font-size: 15px;
                font-size: 1.5rem; } }
            .loginArea .inr .formArea .attBox .loginBtn button:hover {
              opacity: 0.7; }

.registArea {
  background-color: #FFF;
  box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.1);
  margin: 40px auto 0;
  padding: 40px 0 30px;
  max-width: 800px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .registArea .first {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.7;
    font-weight: 600;
    text-align: center; }
    @media only screen and (max-width: 960px) {
      .registArea .first {
        font-size: 15px;
        font-size: 1.5rem; } }
  .registArea .registBtn {
    padding: 15px 0;
    text-align: center; }
    .registArea .registBtn a {
      background: #f30095;
      border-radius: 50px;
      color: #FFF;
      display: inline-block;
      text-decoration: none;
      font-size: 20px;
      font-size: 2rem;
      line-height: 1.7;
      font-weight: 600;
      padding: 14px 25px 14px 15px;
      max-width: 400px;
      width: 100%;
      transition: 0.2s; }
      @media only screen and (max-width: 960px) {
        .registArea .registBtn a {
          font-size: 17px;
          font-size: 1.7rem; } }
      .registArea .registBtn a:hover {
        opacity: 0.7; }
      .registArea .registBtn a i {
        font-size: 22px;
        font-size: 2.2rem;
        line-height: 1.7;
        line-height: 1.4;
        margin-right: 20px; }
        @media only screen and (max-width: 960px) {
          .registArea .registBtn a i {
            font-size: 19px;
            font-size: 1.9rem; } }

footer {
  background: none !important;
  color: #000 !important; }

.footer small {
  color: #333 !important; }

/* Responsive Start */
@media only screen and (max-width: 960px) {
  body {
    display: block;
    height: auto;
    height: none;
    min-height: auto;
    min-height: none;
    padding: 24px 3vw;
    min-width: auto;
    min-width: none;
    width: auto; }

  .wrap {
    width: auto; }

  .loginArea {
    margin: 0; }
    .loginArea .inr {
      padding: 20px 5vw 30px;
      max-width: auto;
      max-width: none; }
      .loginArea .inr .logo {
        margin-bottom: 20px; }
        .loginArea .inr .logo .logoImg {
          margin-bottom: 16px; }
          .loginArea .inr .logo .logoImg img {
            width: 56px; }
        .loginArea .inr .logo .logoTitleSet .logoNum {
          display: block;
          font-size: 16px;
          margin-right: 4px;
          vertical-align: 1px; }
        .loginArea .inr .logo .logoTitleSet .logoTitle {
          font-size: 20px;
          font-weight: 600; }
        .loginArea .inr .logo .logoDate {
          font-size: 12px;
          margin-left: 0;
          padding-top: 4px; }
          .loginArea .inr .logo .logoDate .num {
            font-size: 16px;
            font-weight: 500;
            margin: 0 2px; }
      .loginArea .inr .formArea {
        max-width: auto;
        max-width: none; }
        .loginArea .inr .formArea .formStart {
          font-size: 13px;
          line-height: 1.6;
          margin-bottom: 10px;
          text-indent: -1em;
          padding-left: 1em; }
        .loginArea .inr .formArea ul.inputs li {
          margin-bottom: 10px; }
          .loginArea .inr .formArea ul.inputs li input {
            border-radius: 5px;
            font-size: 16px;
            padding: 10px 15px; }
          .loginArea .inr .formArea ul.inputs li .smallAtt {
            border-radius: 5px;
            font-size: 13px;
            line-height: 1.5;
            margin-top: 5px;
            text-indent: -1em;
            padding: 12px 15px 12px 30px; }
        .loginArea .inr .formArea .attBox {
          margin: 20px 0 0;
          padding: 20px 16px; }
          .loginArea .inr .formArea .attBox p.attTitle {
            font-size: 14px; }
          .loginArea .inr .formArea .attBox ul {
            margin-bottom: 20px; }
            .loginArea .inr .formArea .attBox ul li {
              font-size: 10px;
              line-height: 1.5;
              margin-bottom: 7px;
              text-indent: -1em;
              padding-left: 1em; }

  .registArea {
    background-color: #FFF;
    box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.1);
    margin: 20px 3.5vw 0;
    padding: 40px 3.5vw 30px;
    max-width: 800px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
    .registArea .first {
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1.7;
      font-weight: 600;
      text-align: center; } }
    @media only screen and (max-width: 960px) and (max-width: 960px) {
      .registArea .first {
        font-size: 15px;
        font-size: 1.5rem; } }
@media only screen and (max-width: 960px) {
    .registArea .registBtn {
      padding: 15px 0 10px; }
      .registArea .registBtn a {
        font-weight: 600;
        padding: 12px 15px 12px 10px;
        text-decoration: none;
        max-width: auto;
        max-width: none;
        width: 100%; }
        .registArea .registBtn a:hover {
          opacity: 1; }
        .registArea .registBtn a i {
          margin-right: 15px; } }