/* お問い合わせフォーム
   ──────────────────────────────────────────────
   入力欄そのものの見た目（枠1px #ccc・内側8px・文字16px、
   ボタンは背景#333の白文字）は**テーマがすでに付けている。**
   実測して確かめたので、ここでは触らない。

   ここに書くのは、自前にしたことで新しく要るものだけ。
     ・「必須」の印
     ・機械よけの欄を隠す
     ・結果の画面（送れました／送れませんでした）の体裁 */

/* ============================================ 入力欄の並び */
.cf-row { margin: 0 0 22px; }
.cf-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1.7;
}
/* ■ 入力欄の見た目は、**前と同じにする**
   テーマは Contact Form 7 のクラス（.wpcf7-form-control）を狙って
   書いていたので、自前のフォームには当たらない。外した瞬間に
   ブラウザの初期状態（枠2px inset・内側1px・高さ22px）に戻った。

   前の実測値
       枠      1px solid #ccc
       内側    8px
       文字    16px          ← スマホで16px未満だと、触ったときに
       背景    #fff             画面が勝手に拡大される
       高さ    入力欄37px / 本文300px

   幅だけは広げる。前は size="40" 任せで、335pxの枠に対して
   293pxしか使っていなかった。 */
.cf-row input,
.cf-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}
.cf-row textarea { height: 300px; }
.cf-row input:focus,
.cf-row textarea:focus {
  border-color: #eb6ea0;
  outline: none;
}

/* 「必須」。色だけで伝えると、色が見えにくい人に届かないので**文字で書く。** */
.cf-req {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #eb6ea0;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: 2px;
  letter-spacing: .04em;
}

/* ============================================ 機械よけ（ハニーポット）
   人には見えず、機械には見える欄。埋まっていたら機械と分かる。

   **display:none にはしない。** 見えない欄を読み飛ばす機械がいるので、
   それでは罠にならない。画面の外へ追い出して、
   読み上げと Tab の順からも外す（aria-hidden と tabindex はHTML側）。 */
.cf-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================ 送信ボタン */
.cf-send { margin: 26px 0 0; }
.cf-send button {
  min-width: 225px;
  padding: 14px 30px;
  border: 0;
  background: #333;
  color: #fff;
  font-size: 14px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s;
}
.cf-send button:hover { background: #eb6ea0; }

/* ============================================ 結果の画面 */
.cf-result { padding: 6px 0 10px; }
.cf-result .cf-lead {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.8;
}
.cf-result p { line-height: 2; }
.cf-back { margin-top: 28px; }
.cf-back a {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid #333;
  font-size: 14px;
  letter-spacing: .06em;
  transition: background .2s, color .2s, border-color .2s;
}
.cf-back a:hover {
  background: #eb6ea0;
  border-color: #eb6ea0;
  color: #fff;
}

/* ============================================ 見つからなかったとき（/404.html）
   このCSSは /contact/ 用だが、404ページも同じ型から作っているので
   （gen_404.py が /contact/index.html を写している）ここに置く。 */
.nf-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e6e6e6;
}
.nf-list li { border-bottom: 1px solid #e6e6e6; }
.nf-list a {
  display: block;
  padding: 15px 4px;
  font-size: 15px;
  transition: color .2s;
}
.nf-list a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 11px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg) translateY(-1px);
  transition: border-color .2s;
}
.nf-list a:hover { color: #eb6ea0; }
.nf-list a:hover::before { border-color: #eb6ea0; }