@charset "utf-8";

/* PC対応 */
@media screen and (min-width: 781px) {
    .pc_view { display:block; }
    .sp_view { display:none; }
  }
  
/* スマートフォン対応 */
@media screen and (max-width: 780px) {
.pc_view { display:none; }
.sp_view { display:block; }
}

#contact { }
#contact.w1000 { width: 1000px; }
#contact form > .flex { flex-wrap: nowrap; -ms-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; justify-content: space-between; }
#contact .image_area { width: 450px; }
#contact .image_area figure img { width: 100%; }
#contact .image_area p { margin: -10px 0 40px; font-size: 20px; }
#contact .image_area .contact_top_text { background: #f7f7f1; padding: 40px 30px; border-radius: 30px; font-size: 20px; }

#contact .form_area { padding: 30px 40px; border-radius: 30px; }
#contact dl { }
#contact dl input { }
#contact dl input.company { width: 100%; }
#contact dl .radio_btn_area { align-items: center; }
#contact dl .radio_box { width: 49%; height: auto; line-height: 1; border: transparent solid 4px; padding: 20px 15px; }
#contact dl .radio_box_active { border: rgba(250 194 194 / 96%) solid 4px; }
#contact dl dd { margin-bottom: 20px; }
#contact #steps { margin-top: 30px; }
#contact .fm_koumoku label::before { top: 2px; }
#contact .form_area p.center { text-align: center; }


#contact dl dd input[type="text"], #contact dl dd input[type="email"], #contact dl dd input[type="tel"], #contact dl dd input[type="url"], #contact dl dd select { height: 46px!important; }

#contact dl dd input[type="text"], #contact dl dd input[type="email"], #contact dl dd input[type="tel"], #contact dl dd input[type="url"], #contact dl dd textarea, #contact dl dd select { font-size: 22px; }

#contact dl dd input::placeholder { color: #b0a59f; font-size: 20px; }

#document_pagetitle h1 { font-size: 36px; }
#document_pagetitle .under_line { width: 260px; }

/* 送信ボタン */
  #submit { display: flex; justify-content: center; }
  #submit input:disabled { background-color: #CCC !important; color: #fff !important; cursor: not-allowed; }

/* チェックボックスのCSS */
  #contact input[type="checkbox"] { display: inline;}
  .agree_btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .agree_btn label { font-weight: bold; font-size: 18px; }
  .agree_btn label a { color: #9c1f24; font-weight: bold; text-decoration: underline; }
  input#agree {
    appearance: none;
    height: 24px;
    width: 24px;
    margin: 4px;
    border: 1px solid #e1e0d2;
    border-radius: 4px;
    background: #fff;
  }
  label#agree {
    margin: 4px;
  }
  #agree:checked {
    border: 1px solid #e1e0d2;
    background-color: #fff;
  }
  #agree:checked::before {
    content: "";
    display: block;
    position: relative;
    left: 7.4px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid #98312f;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }
  #agree:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .fm_online select { background: #fff!important; }


  footer { margin-top: -24px; }

  .page_footer { background: #f5f5f5; color: #231815; }
  .page_footer .flex { justify-content: space-between; max-width: 1220px; margin: 0 auto; }
  .page_footer .img_block { width: 516px; }
  .page_footer .img_block img { width: 100%; }
  .page_footer .txt_block { width: 649px; }
  .page_footer .txt_block .ttl { font-size: 32px; }
  .page_footer .txt_block .ttl span { display: block; font-size: 150%; }
  .page_footer .txt_block .btn { display: flex; margin-bottom: 20px; }
  .page_footer>div a { background: rgb(136,134,51); background: linear-gradient(90deg, rgba(136,134,51,1) 0%, rgba(153,150,59,1) 100%); border-bottom: none; margin-left: 0; padding: 20px 20px; height: auto; width: 48%; border-radius: 50px; color: #fff; font-weight: bold; font-size: 26px; text-align: center; }
  .page_footer>div a:nth-of-type(2) { background: rgb(106,26,24); background: linear-gradient(90deg, rgba(106,26,24,1) 0%, rgba(152,48,46,1) 100%); border-bottom: none; margin-left: 30px; padding: 20px 100px; font-weight: bold; }

  .page_footer_tel { display: flex; align-items: center; border:none;}
  .page_footer_tel span { font-size: 50px; }
  .page_footer_tel img { width: 50px; margin-right: 20px; }
  .page_footer_hour { border: none; padding: 0; font-size: 20px; font-weight: bold; text-align: left; }

  .sptop .flex { margin-top: 0px; flex-wrap: wrap!important; }
  .sptop #contact .form_area { order: 1; width: 100%; margin-bottom: 30px; }
  .sptop .contact_top_text { order: 2; width: 100%; }
  .sptop .contact_top_text { background: #f7f7f1; padding: 30px 20px; border-radius: 30px; font-size: 18px; }
  .sptop #document_pagetitle { margin-bottom: 0; }
  .sptop #contact #steps { margin-top: 0; }
  .sptop .image_area { padding: 0 20px; }
  .sptop #document_pagetitle .under_line { margin-bottom: 10px; }
  .sptop #document_pagetitle p { text-align: left; font-weight: normal; margin: 0; }
  .sptop #contact dl dt { font-size: 18px;}
  .sptop #contact dl dt span { padding: 2px 8px; font-size: 12px; vertical-align: middle; }
  .sptop .agree_btn label { font-size: 4.1vw; }
  @media screen and (max-width: 400px) {
    .sptop .agree_btn label { font-size: 3.6vw; }
  }
  .sptop .errorMessage { margin-top: -8px; }
  .sptop #contact dl dd label { font-size: 18px; }
  .sptop dd .online_hissu { padding: 2px 8px; font-size: 12px!important; vertical-align: middle; }

  #contact dl dt { margin-bottom: 6px; }
  #contact dl dd.fm_name input, #contact dl dd.fm_kana input {
    width: 24%;
    @media screen and (max-width: 600px) {
      width: 48%;
    }
  }

  #contact input[type="submit"] { width: 430px; }
  #contact .return input[type="submit"] { width: 180px; }