/* 調整する場合は、まずこの変数を変更してください。既存ページへの影響を避けるため全ルールを限定しています。 */
.hm-contact {
  --hm-width: 760px;
  --hm-label-width: 190px;
  --hm-input-height: 46px;
  --hm-textarea-height: 190px;
  --hm-button-bg: #000;
  --hm-button-hover: #333;
  --hm-button-color: #fff;
  --hm-border: #ccc;
  width: 100%; max-width: var(--hm-width); margin: 64px auto;
  color: #222; font-family: inherit; font-size: 15px; line-height: 1.8;
}
.hm-contact *, .hm-contact *::before, .hm-contact *::after {box-sizing: border-box;}
.hm-contact [hidden] {display: none !important;}
.hm-contact h2 {font-size: 34px; color: #111; line-height: 1.3; margin: 0 0 22px; font-weight: 700;}
.hm-contact h3 {font-size: 21px; margin: 0 0 14px;}
.hm-contact .hm-intro {margin: 0 0 26px;}
.hm-contact .hm-intro > span {display: block; color: #666; font-size: 13px;}
.hm-contact .hm-row {display: grid; grid-template-columns: var(--hm-label-width) minmax(0, 1fr); gap: 20px; margin: 0 0 20px; align-items: start;}
.hm-contact label {font-weight: 600; padding-top: 9px; text-align: right;}
.hm-contact .hm-required {display: inline-block; font-size: 10px; line-height: 1.5; color: #555; border: 1px solid #bbb; padding: 1px 5px; margin-left: 5px; vertical-align: middle; font-weight: 400;}
.hm-contact .hm-sublabel {display: block; font-size: 12px;}
.hm-contact input, .hm-contact select, .hm-contact textarea {display: block; width: 100%; min-width: 0; max-width: 100%; min-height: var(--hm-input-height); margin: 0; padding: 10px 12px; background: #fff; color: #222; border: 1px solid var(--hm-border); border-radius: 0; box-shadow: none; font: inherit; font-size: 16px; line-height: 1.5;}
.hm-contact select {appearance: auto;}
.hm-contact textarea {min-height: var(--hm-textarea-height); resize: vertical;}
.hm-contact input:focus, .hm-contact textarea:focus, .hm-contact select:focus, .hm-contact button:focus-visible {outline: 2px solid #333; outline-offset: 3px;}
.hm-contact small {display: block; margin-top: 7px; font-size: 12px; color: #666;}
.hm-contact .hm-actions {display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 32px 0 0;}
.hm-contact .hm-button {appearance: none; display: inline-block; min-width: 150px; min-height: 48px; padding: 10px 28px; margin: 0; border: 2px solid var(--hm-button-bg); border-radius: 0; background: var(--hm-button-bg); color: var(--hm-button-color); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s;}
.hm-contact .hm-button:hover {background: var(--hm-button-hover);}
.hm-contact .hm-back {background: #fff; color: #222;}
.hm-contact .hm-back:hover {background: #eee;}
.hm-contact .hm-button:disabled {opacity: .45; cursor: not-allowed;}
.hm-contact .hm-status {color: #a12727; font-size: 14px; margin: 0 0 20px; white-space: pre-wrap;}
.hm-contact .hm-status:empty {display: none;}
.hm-contact .hm-summary {margin: 24px 0; border-top: 1px solid #ddd;}
.hm-contact .hm-summary > div {display: grid; grid-template-columns: var(--hm-label-width) minmax(0,1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid #ddd;}
.hm-contact dt {font-weight: 600; margin: 0;}
.hm-contact dd {margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;}
.hm-contact .hm-captcha {display: flex; justify-content: center; min-height: 0;}
.hm-contact .hm-success {padding: 28px; background: #f5f5f5; border-top: 2px solid #222; line-height: 2;}
.hm-contact .hm-trap {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);}
@media (max-width: 600px) {
  .hm-contact {margin: 40px auto;}
  .hm-contact .hm-row, .hm-contact .hm-summary > div {grid-template-columns: minmax(0,1fr); gap: 7px;}
  .hm-contact label {text-align: left; padding-top: 0;}
  .hm-contact .hm-sublabel {display: inline;}
  .hm-contact .hm-button {min-width: 125px;}
}