/* ロゴ */
:root {
  --logo-size: 80px;
  --logo-size-quarter: calc(var(--logo-size) / 4);
  --logo-color: #1B9D6F;
  --logo-weight: 500;
  --logo-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN",
                 "Hiragino Mincho ProN", "MS P明朝", serif;
}

.product-header-logo {
  width: 100%;
  height: var(--logo-size);

  display: flex;
  justify-content: center; /* ← セット全体を中央 */
  align-items: center;

  color: var(--logo-color);

  transform: translateX(-20px);
}

.product-header-logo::before {
  content: "";
  width: var(--logo-size);
  height: var(--logo-size);

  background-image: url(../img/product-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  margin-right: var(--logo-size-quarter);
}

.product-header-text,
.product-header-subtext {
  font-family: var(--logo-family);
  white-space: nowrap;
  font-weight: var(--logo-weight);
}

.product-header-text {
  font-size: var(--logo-size-quarter);
}

.product-header-subtext {
  margin-left: calc(var(--logo-size-quarter) * 0.5);
  font-size: calc(var(--logo-size-quarter) * 1.5);
}

/* タイトル */
.product-title {
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;   /* 縦並び */
  align-items: center;      /* 横方向中央 */
  justify-content: center;  /* 縦方向中央（必要なら） */

  color: #1B9D6F;           /* さっきのテキスト色 */
  text-align: center;
  line-height: 1.2;
}

.product-title-text {
  font-family: var(--logo-family);
  font-size: calc(var(--logo-size-quarter) * 1.2);
  font-weight: var(--logo-weight);
}

.product-title-subtext {
  font-family: var(--logo-family);
  font-size: calc(var(--logo-size) / 5);
  font-weight: var(--logo-weight);
}

/* 入力フォーム */
.pf-c-form-control:focus {
    border: solid 1px #a9a9a9;
    background-color: #fff;
}

/* ログインボタン */
.pf-c-button.pf-m-primary {
    background-color: #4DB9B0;
}

.pf-m-primary:hover {
    background-color: #5dcec4;
}