/*
 *  ###########################################################################
 *    [ContactsInput]画面用
 *  ###########################################################################
 */

/* ログインボタン */
.btn-primary
{
  --tw-border-opacity: 1;
  border-color: rgb(2 80 187 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(2 80 187 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  text-decoration-line: none;
  width: auto;
}

.btn
{
  border-radius: .375rem;
  padding: 1rem;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  max-width: 320px;
}


input[type="text"], input[type="tel"], input[type="email"], textarea
{
  font-size: 1rem;
  width: 100%;
}

textarea
{
  height: 100px;
}

input[type="tel"], input[type="email"]
{
  margin: 0;
  border: solid 1px lightgray;
  border-radius: 1px;
  padding: 2px 2px;
  outline: none;
}

input[type="text"]:disabled, input[type="tel"]:disabled, input[type="email"]:disabled, textarea:disabled
{
  background-color: rgba(239, 239, 239, 0.3);
  color: rgb(42, 42, 42);
  opacity: 1; /* safariで見づらくならない対策 */
}

.mainAreaOut
{
  /*padding: 1rem;*/
}

.mainArea
{
  font-size: 1rem;
}

.msgArea
{
  border-bottom: 2px solid lightblue;
  margin-bottom: .5rem;
}

.mainAreaInner
{
  display: flex;
  justify-content: center;
}

  .mainAreaInner > div
  {
    width: 100%;
    max-width: 800px;
  }

.inputAreaItem
{
  margin-bottom: 5px;
}

.inputAreaItem > .inputItemArea
{
  padding: 5px 65px;
}

/**********************************************
 * CSSハック：padding
 **********************************************/
/* for mini-SP */
@media screen and (max-width:512px)
{
  .inputAreaItem > .inputItemArea
  {
    padding: 5px 0px;
  }

  .mainArea
  {
    width: calc(100% + 10px);
    padding-right: 10px; /* overlayscrollbars用 */
  }
}

.lblRequired
{
  color: red;
  margin-left: .5rem;
}

/**********************************************
 * CSSハック：font-size
 **********************************************/
/* for mini-SP */
@media screen and (max-width:350px)
{
  .inputTitle
  {
    font-size: clamp(0.938rem, 0.271rem + 3.33vw, 1rem);
  }
  .msg
  {
    font-size: clamp(0.875rem, 0.208rem + 3.33vw, 0.938rem);
  }
}
@media screen and (min-width:351px) and (max-width:411px)
{
  .msg
  {
    font-size: clamp(0.938rem, 0.572rem + 1.67vw, 1rem);
  }
}

.btnArea
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

  .btnArea .btn:not(:last-child)
  {
    margin-bottom: .5rem;
  }

/* dialog */
.dialog
{
  display: none;
}
/* ダイアログタイトルバー無し */
/*
.ui-dialog-titlebar
{
  display: none;
}
  */
.dialogBtn
{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px 10px 10px;
}

  .dialogBtn > *
  {
    margin-bottom: 12px;
    font-size: 1rem !important;
  }