@charset "UTF-8";
/* ===================================
	File Name   : login.css
	Description : entrance UI CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2022/04/04] 複製調整

====================================== */

/*========== Style Contents ==========

  1. Header Items Redefinition
	2. Article Settings

====================================== */



/*===== 2. Header Items Redefinition =====*/
/* Base Box */
footer { margin-top: 0;}
main {
  flex: none;
  margin: 2rem;
}


/* Header Items */
header > dl dt { margin: 0 1rem 0 0;}


@media (max-width: 768px){
  /* Base Box */
  footer { margin-top: 0;}
  main { margin: 1.5rem 1rem;}

  
  /* Header Items */
  header { align-items: center;}
  
  header > :first-child { flex: 1;}
  
  header > div:last-child {
    width: auto;
    margin-left: auto;
  }
  
  header > dl {
    order: 3;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: .5rem 0 0;
  }
}



/*===== 2. Article Settings =====*/
article {
  display: flex;
}
article > div {
  order: 2;
  flex: 1;
  padding: 5rem;
}

article > div h2 {
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  text-align: center;
}

article > div h2 span {
  display: block;
  margin-bottom: 2.5rem;
  font-size: 4.0rem;
  line-height: 1;
}

article > div form { text-align: right;}
article > div ul { margin-bottom: .5rem;}
article > div li { position: relative; margin-bottom: 1.5rem;}
article > div .txtlink { font-size: 1.4rem;}
article > div .boxlink { margin-top: 2.5rem;}

article > div li input { padding-right: 3.5rem !important;}
article > div li i {
  position: absolute;
  top: 50%;
  right: .5rem;
  margin: auto;
  font-size: 3rem;
  color: #999;
  transform: translateY(-50%);
}
article > div li input:focus + i { color: #333;}

article > figure {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 16.8vw;
  min-width: 150px;
  padding: 5rem 1rem;
  background: linear-gradient(125deg, #b4f8fc 5%, #12c8f2 45%, #0472a2 95%);
  color: #bffaff;
  text-align: center;
}
article > figure span {
  display: block;
  max-width: 140px;
  margin: 0 auto 1rem;
  font-size: 0;
}

article > figure figcaption {
  font-size: 2.4rem;
  line-height: 1.2;
  opacity: .5;
}


@media (max-width: 768px){
  article {
    flex-direction: column;
  }
  article > div {
    padding: 2rem;
  }

  article > div h2 {
    margin-bottom: 2.5rem;
    font-size: 1.4rem;
    text-align: center;
  }

  article > div h2 span {
    display: block;
    margin-bottom: 2.5rem;
    font-size: 4.0rem;
    line-height: 1;
  }

  article > div form { text-align: right;}
  article > div ul { margin-bottom: .5rem;}
  article > div li { position: relative; margin-bottom: 1.5rem;}
  article > div .txtlink { font-size: 1.4rem;}
  article > div .boxlink { margin-top: 2.5rem;}

  article > div li input { padding-right: 3.5rem !important;}
  article > div li i {
    position: absolute;
    top: 50%;
    right: .5rem;
    margin: auto;
    font-size: 3rem;
    color: #999;
    transform: translateY(-50%);
  }
  article > div li input:focus + i { color: #333;}

  article > figure {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 1rem;
  }
  article > figure span {
    display: block;
    width: 5rem;
    max-width: none;
    margin: 0 1rem 0 0;
  }

  article > figure figcaption {
    width: calc(100% - 10rem);
    margin: 0 5rem 0 auto;
    font-size: 2.4rem;
    line-height: 1.2;
    opacity: .5;
  }
}