@charset "utf-8";

/*------------  contact  ------------*/

.contact_title_block { padding: 20px 0 40px; }
.contact_title { text-align: center; font-family: 'Noto Sans JP', sans-serif; font-size: 30px; font-weight: 900; color: #53231b; }

.contact_wrap { padding: 0 2% 120px; }

.input_inner { margin: 0 auto; padding: 45px 0 0; max-width: 940px; border-top: 1px solid #d0c199; }
.input_inner .item { display: flex; align-items: center; width: 100%; padding: 0 0 30px; }
.input_inner .label { display: block; width: 26%; font-weight: bold; color: #53231b; }
.input_inner .required { display: inline-block; margin: 0 0 0 1.2em; padding: 2px 6px; border: 1px solid #e00; font-size: 11px; font-weight: normal; line-height: 1; color: #e00; }
.input_inner .data { display: flex; align-items: center; width: 74%; line-height: 1.2; }
.input_inner .box1 { width: 80%; }
.input_inner .box2 { width: 100%; }
.input_inner .textarea { width: 100%; height: 16em; }
.input_inner .btn_set { display: flex; justify-content: center; padding: 18px 0 0; }
.input_inner .btn { width: 260px; }

/* text email textarea */
input[type="text"],
input[type="email"],
textarea { display: block; padding: 13px; border: 1px solid #d0c199; -webkit-appearance: none; background: #fff; font-size: 14px; line-height: 1.5; }
textarea { outline: none; resize: vertical; }

/* submit button */
input[type="submit"],
input[type="button"] { display: block; appearance: button; border: none; background: #53231b; width: 100%; text-align: center; line-height: 52px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 500; color: #fff; cursor: pointer; opacity: 1; transition: all .3s; }
input[type="submit"]:-webkit-search-decoration,
input[type="button"]:-webkit-search-decoration { display: none; }
input[type="submit"]:focus,
input[type="button"]:focus { outline-offset:-2px; }
input[type="submit"]:hover,
input[type="button"]:hover { opacity: .6; }


.contact_wrap .tel_block { display: flex; margin: 0 auto; padding: 50px 3%; max-width: 980px; border-bottom: 1px solid #d0c199; }
.contact_wrap .tel_block:first-child { border-top: 1px solid #d0c199; }
.contact_wrap .icon { margin: 0 3% 0 0; width: 62px; }
.contact_wrap .lead { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 1.5; color: #53231b; }
.contact_wrap .lead .ttl { font-size: 16px; }
.contact_wrap .lead .box { display: flex; align-items: center; padding: 5px 0 0; }
.contact_wrap .lead .name { font-size: 20px; }
.contact_wrap .lead .tel { margin: 0 .2em 0 .8em; font-size: 28px; }
.contact_wrap .lead .txt { font-size: 15px; }
.contact_wrap .lead .note { font-size: 13px; }




@media screen and (max-width: 960px) {

  .contact_title { font-size: 26px; }
  .input_inner .item { flex-direction: column; padding: 0 0 30px; }
  .input_inner .label { width: 100%; padding: 0 0 16px; }
  .input_inner .data { width: 100%; }
  .input_inner .box1 { width: 100%; }
  .input_inner .btn_set { padding: 18px 0 0; }

  .contact_wrap .lead { font-size: 13px;}
  .contact_wrap .icon { width: 56px; }
  .contact_wrap .lead .ttl { font-size: 15px; }
  .contact_wrap .lead .name { font-size: 18px; }
  .contact_wrap .lead .tel { font-size: 26px; }
  .contact_wrap .lead .txt { font-size: 13px; }

}




@media screen and (max-width: 760px) {

  .contact_title_block { padding: 24px 0 20px; }
  .contact_title { font-size: 20px; }

  .contact_wrap { padding: 0 4% 50px; }

  .input_inner .item { padding: 0 0 20px; }
  .input_inner .label { width: 100%; padding: 0 0 11px; font-size: 13px; }
  .input_inner .btn { width: 220px; }
  .input_inner .btn_set { padding: 0; }

  input[type="text"],
  input[type="email"],
  textarea { padding: 8px; }

  input[type="submit"],
  input[type="button"] { line-height: 48px; font-size: 13px; transition: all 0; }
  input[type="submit"]:hover,
  input[type="button"]:hover { opacity: 1; }

  .contact_wrap .tel_block { flex-direction: column; margin: 0 auto; padding: 28px 0; max-width: inherit; }
  .contact_wrap .icon { margin: 0 auto 10px; width: 46px; }
  .contact_wrap .lead { font-size: 13px; text-align: center; }
  .contact_wrap .lead .ttl { font-size: 14px; }
  .contact_wrap .lead .box { flex-direction: column; padding: 10px 0 0; }
  .contact_wrap .lead .name { font-size: 15px; }
  .contact_wrap .lead .tel { margin: 0; font-size: 24px; line-height: 1.4; }
  .contact_wrap .lead .txt { font-size: 13px; }
  .contact_wrap .lead .note { font-size: 12px; }

}