@charset "UTF-8";
/* ==========================================================================
   お問い合わせページ（contact.html）専用のスタイル ＝ 入力フォームだけ
   ※ css/index.css を読み込んだ「あと」に読み込んでください
   ※ ページ見出し帯（.lead-band）は製品ページと共通のため、css/index.css に移しました
   ========================================================================== */

/* ==========================================================================
   フォーム（明るい面）
   ========================================================================== */
.entry-sec{background:var(--gray);color:var(--ink);position:relative;z-index:10;
  padding-top:9rem;padding-bottom:11rem}
.entry-sec a{color:var(--ink)}
.entry-sec .uline-mid::before{background-color:var(--ink)}

.entry{max-width:78rem;margin:0 auto}
.entry__row+.entry__row{margin-top:3.2rem}

.entry__label{display:inline-flex;align-items:center;gap:1.2rem;font-size:1.5rem;font-weight:700;line-height:1.6}
.entry__req{
  font-size:1.1rem;font-weight:500;letter-spacing:.08em;line-height:1;
  background:var(--navy);color:#fff;border-radius:100px;padding:.5rem .9rem}
.entry__note{margin-top:.8rem;font-size:1.3rem;line-height:1.8;opacity:.6}
.entry__field{margin-top:1.2rem}

/* 姓・名のように横に2つ並べる */
.entry__pair{display:flex;gap:2rem}
.entry__pair>*{flex:1;min-width:0}

/* 入力欄 */
.entry input[type="text"],
.entry input[type="email"],
.entry input[type="tel"],
.entry select,
.entry textarea{
  width:100%;display:block;
  background:#fff;color:var(--ink);
  border:1px solid rgba(31,31,31,.18);border-radius:.4rem;
  padding:1.4rem 1.6rem;font-size:1.5rem;line-height:1.6;
  font-family:inherit;font-feature-settings:'palt';
  transition:border-color .3s var(--e1),box-shadow .3s var(--e1)}

.entry input::placeholder,
.entry textarea::placeholder{color:rgba(51,51,51,.35)}

.entry input:focus,
.entry select:focus,
.entry textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(35,39,132,.16)}

.entry textarea{min-height:20rem;line-height:1.9;resize:vertical}

/* プルダウン（右端に矢印を描いています） */
.entry__field--pick{position:relative}
.entry select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:4.6rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23333333' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.8rem center;background-size:1.2rem auto}
/* プルダウンの文字色（選択肢の一覧も含めて黒で統一） */
.entry select,
.entry select option{color:var(--ink)}

/* 個人情報の注意書き */
.entry__terms{margin-top:4rem;font-size:1.3rem;line-height:2;opacity:.7;text-align:center}

/* 送信ボタン */
.entry__captcha{margin-top:3.4rem;display:flex;justify-content:center}
.entry__send{margin-top:2.4rem;text-align:center}
.sendbtn{
  display:inline-block;position:relative;z-index:1;overflow:hidden;
  min-width:30rem;line-height:6.2rem;padding:0 4rem;border-radius:100px;
  background:var(--navy);color:#fff;
  font-size:1.5rem;font-weight:700;letter-spacing:.08em;
  box-shadow:0 4px 10px 0 rgba(0,0,0,.14);
  transition:background-color .4s var(--e1),box-shadow .4s var(--e1),transform .4s var(--e2)}
.sendbtn:hover{background:var(--navy-3);box-shadow:0 10px 24px 0 rgba(0,0,0,.22)}
.sendbtn:active{transform:translateY(1px)}


/* ==========================================================================
   送信まわり（迷惑メール対策の欄・結果の表示・送信完了の画面）
   ========================================================================== */

/* 人には見えない欄。読み上げソフトにも読ませません */
.entry__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.sendbtn[disabled]{opacity:.55;cursor:default;box-shadow:none}
.sendbtn[disabled]:hover{background:var(--navy);box-shadow:none}

/* 送信の結果（ふだんは出しません） */
.entry__msg{display:none;margin-top:2.2rem;font-size:1.4rem;line-height:1.9;text-align:center}
.entry__msg.is-on{display:block}
.entry__msg.is-error{color:#c0392b}

/* 送信できたときの画面 */
.thanks{padding:6rem 0;text-align:center}
.thanks__head{font-size:2.6rem;font-weight:700;line-height:1.6}
.thanks__text{margin-top:2.2rem;font-size:1.6rem;line-height:2.1;opacity:.8}
.thanks__act{margin-top:4rem}
/* .entry-sec a{color:var(--ink)} を打ち消して、送信ボタンと同じ見た目にします */
.entry-sec .thanks__act .sendbtn{color:#fff;text-align:center}


/* ==========================================================================
   画面幅への対応
   ========================================================================== */
@media screen and (max-width:767px){
  .entry-sec{padding-top:6rem;padding-bottom:7.4rem}
  .entry__row+.entry__row{margin-top:2.6rem}
  .entry__label{font-size:1.4rem}
  .entry__note{font-size:1.2rem}
  .entry__pair{display:block}
  .entry__pair>*+*{margin-top:2.6rem}
  .entry input[type="text"],
  .entry input[type="email"],
  .entry input[type="tel"],
  .entry select,
  .entry textarea{font-size:16px;padding:1.3rem 1.4rem}  /* 16px 未満だと iPhone で入力時に画面が拡大されます */
  .entry textarea{min-height:16rem}
  .entry__terms{margin-top:3rem;font-size:1.2rem;text-align:left}
  .entry__send{margin-top:2.8rem}
  .sendbtn{min-width:0;width:100%;line-height:5.6rem}
  .entry__msg{margin-top:2rem;font-size:1.3rem;text-align:left}
  .thanks{padding:4.4rem 0}
  .thanks__head{font-size:2.1rem}
  .thanks__text{margin-top:1.8rem;font-size:1.45rem}
  .thanks__act{margin-top:3.2rem}
}