/* お問い合わせ（afuribrewing.com/pages/contact と同じ構成）
   上に小さな「CONTACT」と細い線、その下に、枠で囲んだ入力欄が 4 つ縦に並び、黒い送信ボタン */

.ct {
  --ct-line: #bfbfbf;
  --ct-ink: #121212;
  padding: 0 var(--gutter) 120px;
}

/* 見出し：中央に「CONTACT」、下に細い線 */
.ct-head {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ヘッダー（ロゴ）の下に置く */
  margin: 0 auto;
  padding: 150px 0 28px;
}
.ct-head-t {
  font-size: 23px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ct-body { max-width: 736px; margin: 0 auto; padding-top: 135px; }

/* 入力欄 */
.ct-fields { display: grid; gap: 20px; margin-bottom: 20px; }

.ct-field { position: relative; margin-bottom: 0; }
.ct-form > .ct-field { margin-top: 0; }
.ct-form > .ct-field + .ct-field { margin-top: 20px; }

.ct-input {
  display: block;
  width: 100%;
  height: 72px;
  padding: 36px 24px 12px 32px;
  border: 1px solid var(--ct-line);
  border-radius: 0;
  background: #fff;
  color: var(--ct-ink);
  font: inherit;
  font-size: 15px;
  line-height: 24px;
  -webkit-appearance: none;
  appearance: none;
}
.ct-textarea { height: 160px; padding-top: 40px; resize: vertical; }
.ct-input:focus { outline: none; border-color: var(--ct-ink); box-shadow: inset 0 0 0 1px var(--ct-ink); }

/* 枠の中のラベル：入力すると、上に小さく移る */
.ct-label {
  position: absolute;
  left: 33px;
  top: 25px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: rgba(18, 18, 18, 0.75);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.2s ease-out, top 0.2s ease-out;
}
.ct-input:focus ~ .ct-label,
.ct-input:not(:placeholder-shown) ~ .ct-label { top: 11px; transform: scale(0.72); }

.ct-error { margin-top: 16px; color: #b3261e; font-size: 14px; line-height: 22px; }

/* 送信ボタン：黒、中央 */
.ct-button { display: flex; justify-content: center; margin-top: 20px; }
.ct-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  padding: 0 48px;
  border: 0;
  border-radius: 3px;
  background: var(--ct-ink);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
.ct-submit:hover,
.ct-submit:focus-visible { opacity: 0.8; }

/* 電話・メールの案内（フォームの下に、控えめに） */
.ct-info { margin-top: 96px; padding-top: 32px; border-top: 1px solid #ececec; }
.ct-info-h { font-size: 15px; line-height: 24px; font-weight: 700; margin-bottom: 20px; }
.ct-info-list > div { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid #ececec; }
.ct-info-list dt { font-size: 13px; line-height: 1.9;  /* 約 1.7 より 0.2 広く */ color: rgba(18, 18, 18, 0.75); }
.ct-info-list dd { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; line-height: 1.8; text-align: right; }
.ct-info-list dd span { font-size: 12px; line-height: 1.87; color: rgba(18, 18, 18, 0.65); }
.ct-info-list a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .ct { padding-bottom: 80px; }
  .ct-head { padding: 124px 0 24px; }
  .ct-head-t { font-size: 20px; }
  .ct-body { padding-top: 64px; }
  .ct-input { height: 64px; padding: 32px 20px 10px 22px; font-size: 16px; }
  .ct-textarea { height: 148px; padding-top: 36px; }
  .ct-label { left: 23px; top: 21px; font-size: 16px; }
  .ct-input:focus ~ .ct-label,
  .ct-input:not(:placeholder-shown) ~ .ct-label { top: 9px; }
  .ct-submit { width: 100%; height: 56px; font-size: 14px; }
  .ct-info { margin-top: 64px; }
  .ct-info-list > div { grid-template-columns: 1fr; }
  .ct-info-list dd { align-items: flex-start; text-align: left; }
}