html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}


* {
  box-sizing: border-box;
}


body {
  margin: 0;

  color: #222;
  background: #f7f7f7;
}


input,
textarea,
button {
  font: inherit;
  font-size: 16px;
}


/* =========================================
   全体
========================================= */

.contact-shell {
  width: min(100%, 760px);

  margin: 0 auto;

  padding:
    34px
    16px
    70px;
}


/* =========================================
   ヘッダー
========================================= */

.contact-head {
  margin-bottom: 28px;

  text-align: center;
}


.site-name {
  margin:
    0
    0
    18px;

  font-size: .9rem;

  letter-spacing: .18em;

  color: #777;
}


.contact-head h1 {
  margin:
    0
    0
    12px;

  font-size: 1.55rem;
  font-weight: 500;
}


.contact-intro {
  margin: 0;

  color: #777;

  font-size: .86rem;

  line-height: 1.8;
}


/* =========================================
   フォーム
========================================= */

.contact-card {
  padding: 20px;

  border:
    1px solid
    #ddd;

  background: #fff;
}


#contact-form {
  display: grid;

  gap: 20px;
}


.form-field {
  display: grid;

  gap: 8px;
}


.form-field > span {
  font-size: .9rem;
}


.form-field input,
.form-field textarea {
  width: 100%;

  padding:
    10px
    11px;

  border:
    1px solid
    #bbb;

  border-radius: 0;

  background: #fff;

  color: #222;
}


.form-field textarea {
  min-height: 190px;

  resize: vertical;

  line-height: 1.7;
}


.form-field input:focus,
.form-field textarea:focus {
  outline:
    1px solid
    #777;

  outline-offset: 1px;
}


/* =========================================
   注意書き
========================================= */

.contact-note {
  margin: 0;

  color: #777;

  font-size: .78rem;

  line-height: 1.7;
}


/* =========================================
   bot対策
========================================= */

.contact-honeypot {
  position: absolute;

  left: -9999px;

  width: 1px;
  height: 1px;

  overflow: hidden;
}


/* =========================================
   ステータス
========================================= */

.contact-status {
  min-height: 1.4em;

  margin: 0;

  color: #b00020;

  font-size: .85rem;

  line-height: 1.6;
}


/* =========================================
   送信
========================================= */

.contact-submit {
  width: 100%;

  padding:
    12px
    16px;

  border:
    1px solid
    #888;

  border-radius: 0;

  background: #fff;

  color: #222;

  cursor: pointer;
}


.contact-submit:active {
  background: #f1f1f1;
}


.contact-submit:disabled {
  opacity: .55;

  cursor: default;
}


/* =========================================
   下部ナビ
========================================= */

.contact-nav {
  margin-top: 32px;

  text-align: center;

  color: #888;

  font-size: .82rem;
}


.contact-nav a {
  color: inherit;

  text-decoration: underline;
  text-underline-offset: 3px;
}