﻿#main_visual{
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:  #c9c7b8;
    padding-bottom: 100px;
    background: url(/wp/wp-content/themes/wp-templ/assets/img/contact/contact_main_background.jpg);
    background-size: cover;
  }
  #main_visual .catch_copy{
    font-size: 5.5rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.26em;
    text-align: center;
  }
  #main_visual .catch_copy .en{
    font-size: 1.7rem;
    font-weight: normal;
    letter-spacing: 0.26em;
    line-height: 1em;
    display: block;
    padding-top: 6px;
  }
  #container{
    padding-bottom: 60px;
    background-color: #f2dc26;
  }
  #contact_outline{
    position: relative;
    width: 94%;
    max-width: 940px;
    margin: -100px auto 0;
  }
  #contact_outline .other_contact_link{
    position: absolute;
    max-width: 800px;
    margin: auto;
    display: flex;
    gap: 17px;
    bottom: calc( 100% + 35px);
    left: 0;
    right: 0;
  }
  #contact_outline .other_contact_link a{
    display: flex;
    height: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    border: 1px solid #fff;
    border-radius: 10px;
    filter: drop-shadow(0px 0px 3px #fff);
    position: relative;
    color: #fff;
    overflow: hidden;
  }
  #contact_outline .other_contact_link a.link_reserv{
    background-color: #78d1d9;
  }
  #contact_outline .other_contact_link a.link_maintenance{
    background-color: #e8af5d;
  }
  #contact_outline .other_contact_link a.link_realestate{
    background-color: #7cbb6a;
  }
  #contact_outline .other_contact_link a::after{
    content: "";
    position: absolute;
    height: 50%;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #efefef;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
  }
  #contact_outline .other_contact_link a .img{
    max-width: 35px;
  }
  #contact_outline .other_contact_link a .img img{
    width: 100%;
    display: block;
  }
  #contact_outline .other_contact_link a .main{
    font-size: 1.8rem;
    font-weight: bold;
  }
  #contact_outline .other_contact_link a .sub{
    font-size: 1.2rem;
  }
  #contact_outline .contact_card{
    background-color: #fff;
    border: 1px solid #f2dc26;
    padding: 10px;
    border-radius: 25px;
    color: #424242;
  }
  #contact_outline .contact_card .span-border{
    border-bottom: 1px dashed #424242;
    max-width: 800px;
    margin: 70px auto;
  }
  #contact_outline .contact_text{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 680px;
    width: 98%;
    margin: auto;
  }#contact_outline .contact_text img {
      display: block;
      width: 76px;
      height: auto;
      margin: 120px auto 35px;
  }
  #contact_outline .contact_text .contact_cat{
    text-align: center;
    margin-bottom: 3rem;
  }
  #contact_outline .contact_text b{
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }
  
  
  #contact_outline .contact_tel{
    display: flex;
    justify-content: center;
    margin: 70px auto 0;
  
  }
  #contact_outline .contact_tel a{
    max-width: 800px;
    width: 98%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--page-main-color);
    border-radius: 100px;
  }
  #contact_outline .contact_tel .tel_text{
    text-align: center;
  }
  #contact_outline .contact_tel a .text{
    font-size: 1.2rem;
  }
  #contact_outline .contact_tel a .num{
    display: flex;
    align-items: center;
    font-size: 4rem;
    gap: 10px;
    font-weight: bold;
  }


  @media (max-width: 767px){
    #main_visual .catch_copy{
      font-size: 3rem;
    }
    #main_visual .catch_copy .en{
      font-size: 1.2rem;
    }
    #contact_outline .contact_text img{
      margin: 60px auto 30px;
    }
    #contact_outline .other_contact_link{
      gap: 10px;
      bottom: calc( 100% + 15px);
    }
    #contact_outline .other_contact_link a .main{
      font-size: 1.5rem;
    }
    #contact_outline .other_contact_link a .sub{
      font-size: 1rem;
    }
    #contact_outline .contact_card{
      padding: 10px 10px 30px;
    }
    #contact_outline .contact_tel{
      flex-direction: column;
    }
    #contact_outline .contact_tel .tel_text{
      font-size: 1.2rem;
      margin-bottom: 1em;
    }
    #contact_outline .contact_tel a{
      padding: 10px;
      margin: 0 20px;
      width: auto;
    }
    #contact_outline .contact_tel a .num{
      font-size: 1.5rem;
    }
    #contact_outline .contact_tel a .num img{
      width: 28px;
      height: auto;
    }
    #contact_form{
      margin: 90px auto 20px;
    }
    #contact_form .tableContact{
      gap: 50px;
      padding: 10px;
    }
    #contact_form .tableContact .item{
      flex-direction: column;
      gap: 18px;
    }
    #contact_form .tableContact .item .item_title{
      display: flex;
      width: initial;
      align-items: end;
    }
    #contact_form .tableContact .item .item_title{
      display: flex;
      width: initial;
    }
    #contact_form .tableContact .item .policy_table{
      align-items: start;
    }
    #contact_form .tableContact .item .item_content .mwform-radio-field{
      width: initial;
    }
    #contact .product-item .horizontal-item{
      width: initial;
    }
    #contact_form .tableContact .check_table.select-check label span{
      padding-left: calc(10px + 1.5em);
    }
    #contact_form .submit-btn{
      margin: 50px auto 0;
    }
  }

/*確認画面と完了画面を非表示*/
.confirm_area{
    display: none;
}

/*デフォルトのサンクスメッセージを非表示*/
/*
.wpcf7-response-output {
    display: none;
}
*/
/*
  #form_block内限定のCSSリセット
*/
@scope (#form_block){
  p {
    margin  : 0;
      padding : 0;
  }
  ol, ul {
      list-style : none;
      margin     : 0;
      padding    : 0;
  }
  input, textarea {
      margin    : 0;
      font-size : 100%;
      resize    : none;
  }
  input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="url"] {
      word-break         : normal;
      white-space        : nowrap;
      -webkit-appearance : none;
      -moz-appearance    : none;
      -ms-appearance     : none;
      -o-appearance      : none;
      appearance         : none;
  }
  input[type=date], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea{
    border-radius : 0;
  }
  table {
      width           : 100%;
      border-collapse : collapse;
      border-spacing  : 0;
      font-size       : 100%;
  }
  dl, dt, dd, th, td {
      margin  : 0;
      padding : 0;
  }
  h1, h2, h3, h4, h5, h6 {
      font-weight : 400;
      margin      : 0;
      padding     : 0;
  }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, dialog {
      margin         : 0;
      padding        : 0;
      border         : 0;
      outline        : 0;
      vertical-align : baseline;
      background     : transparent;
  }
  img {
      margin         : 0;
      padding        : 0;
      vertical-align : middle;
      border         : 0;
      max-width      : 100%;
      height         : auto;
  }
  table img {
      margin         : 0;
      padding        : 0;
      vertical-align : middle;
      border         : 0;
  }
  article, aside, dialog, figure, footer, header, hgroup, nav, section {
      display : block;
  }
  nav ul {
      list-style : none;
  }
  *, *::before, *::after {
      -webkit-box-sizing      : border-box;
      -moz-box-sizing         : border-box;
      -ms-box-sizing          : border-box;
      -o-box-sizing           : border-box;
      box-sizing              : border-box;
      -webkit-font-smoothing  : antialiased;
      -moz-osx-font-smoothing : grayscale;
  }
  *:focus {
      outline : none;
  }
  label, select, button {
      cursor : pointer;
  }
  @media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
      select::-ms-expand {
          display : none;
      }
  }
  @media screen\0 {
      select::-ms-expand {
          display : none;
      }
  }
  a {
      outline    : none;
      transition : 0.3s;
      color      : #000;
  }
  @media only screen and (min-width:1025px) {
      a:hover {
          text-decoration : none;
          opacity         : .5;
      }
  }
  a:link, a:visited, a:active {
      text-decoration : none;
  }
  .grecaptcha-badge{
      bottom: 100px !important;
  }
  @media (max-width: 767px){
      .grecaptcha-badge{
          bottom: 64px !important;
      }   
  }
}



#form_block{
  font-size: 15px;
}
@media (max-width: 767px) {
  #form_block{
    font-size: 13px;
  }
}

#form_block input,
#form_block button,
#form_block optgroup,
#form_block textarea,
#form_block select{
  font-family: var(--ff-base );
}
::placeholder {
    color : #b1b1b1;
}
#contact .monospaced,
.formBlock .monospaced,
#form_block .monospaced {
    width     : 450px;
    max-width : 100%;
}
#form_block .error {
    display: block;
    color: #dd0000;
    font-size: var(--fs-en-ttl);
}
#form_block {
    max-width : 800px;
    margin    : 40px auto;
    display        : flex;
    flex-direction : column;
    gap            : 50px;
}
#form_block .innerframe{
    display        : flex;
    flex-direction : column;
    gap            : 50px;
    align-items: center;
  }
#form_block .item {
    display : flex;
    width: 650px;
    max-width: 100%;
    gap     : 50px;

  }
#form_block .item .item_title {
    width : 150px;
}
#form_block .item .item_content {
  padding: 0 1em;
  width: 100%;
}
#form_block .item.no_title{
    justify-content: center;
}

#form_block .item.no_title .item_title::before {
    content : "";
    display : block;
    width: 150px;
}
#form_block .item .item_title::after {
    content    : "※任意";
    display    : block;
    font-style : normal;
    font-size  : 1.2rem;
    padding    : 0 7px;
}
#form_block .item.required_title .item_title::after {
    content : "※必須";
    color   : #dd0000;
}
#form_block .item.no_status .item_title::after {
    content : "";
}
#form_block .item .item_title p {
    line-height      : 2em;
    padding          : 0 7px;
    background-color : #777777;
    width            : 150px;
    color            : #fff;
}
#form_block .item .item_content .reserv-date-item{
    margin-top : 10px;
}
#form_block .item .item_content .reserv-date-item input,
#form_block .item .item_content .reserv-date-item select {
    width : 250px;
}
#form_block .item em {
    font-style : normal;
    font-size  : 1.2rem;
    padding    : 0 7px;
}
#form_block .item em.red {
  color: #dd0000;
}
#form_block .item .radio_table,
#form_block .item .check_table {
    display   : flex;
    flex-wrap : wrap;
    gap       : 10px;
    flex      : 1;
}
#form_block .item .not_selected_radio .first{
    display: none;
}
#form_block .item .item_content .mwform-radio-field {
    display : block;
    width   : 135px;
}
#form_block .item .radio_table input[type=radio],
#form_block .item .check_table input[type=checkbox],
#form_block .item .policy_table input[type=checkbox] {
    display : none;
}
#form_block .radio_table label span,
#form_block .select-check label span {
    display          : block;
    height           : 32px;
    width            : 100%;
    padding          : 0 10px;
    position         : relative;
    transition       : .3s;
    z-index          : 10;
    border           : 1px solid #ababab;
    border-radius    : 32px;
    background-color : #fff;
    font-size        : 1.2rem;
    color            : #000;
    letter-spacing   : 0.1em;
    line-height      : 32px;
    text-align       : center;
}
#form_block .product-item .horizontal-item {
    width : initial;
}
#form_block .check_table.select-check label span {
    width   : initial;
    padding : 0 calc(10px + 1.5em);
}
#form_block .radio_table label input:checked+span,
#form_block .select-check label input:checked+span {
    background-color : #f2dc26;
    border-color     : #f2dc26;
    background-color : var(--page-main-color);
    border-color     : var(--page-main-color);
}
#form_block .check_table label span::after {
    content             : "";
    position            : absolute;
    height              : 14px;
    width               : 14px;
    left                : 0.8em;
    top                 : 0;
    bottom              : 0;
    margin              : auto;
    background-image    : url(/wp/wp-content/themes/wp-templ/assets/img/contact/check_mark_gray.png);
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : left;
    transition-duration : .1s;
    transition-delay    : .0s;
    opacity             : 0;
}
#form_block .select-check label input:checked+span::after {
    opacity : 1;
}
#form_block .item .policy_table {
    display        : flex;
    flex-direction : column;
    align-items    : center;
}
#form_block .policy_table label span,
#form_block .confirm_area .policy_table span {
    display      : block;
    width        : 100%;
    position     : relative;
    padding-left : 46px;
}
#form_block .policy_table label span::before,
#form_block .confirm_area .policy_table span::before {
    content          : "";
    position         : absolute;
    height           : 36px;
    width            : 36px;
    background-color : #fff;
    border           : 1px solid #ababab;
    border-radius    : 50%;
    left             : 0;
    top              : 0;
    transition       : .3s;
}
#form_block .policy_table label input:checked+span::before,
#form_block .confirm_area .policy_table span::before {

    left             : 0;
    top              : 0;
    background-color : #f2dc26;
    border-color     : #f2dc26;
    background-color : var(--page-main-color);
    border-color     : var(--page-main-color);
}
#form_block .policy_table label span::after,
#form_block .confirm_area .policy_table span::after {
    content             : "";
    position            : absolute;
    height              : 30px;
    width               : 30px;
    left                : 3px;
    top                 : 3px;
    background-image    : url(/wp/wp-content/themes/wp-templ/assets/img/contact/check_mark_gray.png);
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : left;
    transition-duration : .1s;
    opacity             : 0;
}
#form_block .policy_table label input:checked+span::after,
#form_block .confirm_area .policy_table span::after {
    opacity : 1;
}

#form_block .item .policy_table a {
    position    : relative;
    left        : 60px;
    line-height : 1.2em;
    font-size   : 1rem;
    color       : #424242;
}

#form_block .item.button{
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
#form_block .item.button p{
  width: 100%;
}

#form_block .item .item_content input[type=text],
#form_block .item .item_content input[type=tel],
#form_block .item .item_content input[type=email],
#form_block .item .item_content input[type=date]{
    font-size  : 1.2rem;
    margin-top : 3px;
    height     : 26px;
    border     : 1px solid #ababab;
    padding    : 0 10px;
}
#form_block .item .item_content textarea {
    height    : 6em;
    padding   : 5px;
    font-size : 1.2rem;
    border    : 1px solid #ababab;
}
#form_block .item .item_content select {
    border             : 1px solid #ababab;
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    background         : #fff url(/wp/wp-content/themes/wp-templ/assets/img/contact/ico_arrow.svg) no-repeat right 16px center/12px 8px;
    height             : 26px;
    padding            : 0 10px;
    font-size          : 1.2rem;
}
#form_block .item .item_content input[type=text]:has(+ .error),
#form_block .item .item_content input[type=text]:has(~ .error),
#form_block .item .item_content input[type=tel]:has(+ .error),
#form_block .item .item_content input[type=tel]:has(~ .error),
#form_block .item .item_content .post_item:has(~ .error) input[type=tel],
#form_block .item .item_content input[type=email]:has(+ .error),
#form_block .item .item_content input[type=email]:has(~ .error),
#form_block .item .item_content textarea:has(+ .error),
#form_block .item .item_content select:has(+ .error),
#form_block .item .item_content select:has(~ .error),
#form_block .item .item_content p:has(~ .error) select,
#form_block .item .item_content p:has(~ .error) input[type=text],
#form_block .policy_table span:has(~ .error) label span::before,
#form_block .item .item_content span:has(~ .error) input[type=text],
#form_block .item .error:not(span) {
    background-color : #ffd1d1;
}
#form_block .item .item_content .post_num1{
    width : calc(4em + 10px);
}
#form_block .item .item_content .post_num2{
    width : calc(6em + 10px);
}
#form_block .policy_table .error {
    padding-left : 46px;
}
#form_block .item .item_content .txt-note {
    font-size : 1.2rem;
}
#form_block .item .item_content .txt-box {
    font-size : 1.2rem;
}
#form_block .horizontal-item+.horizontal-item {
    margin-left : 0;
}
#form_block input[type=button],
#form_block input[type=submit] {
  cursor: pointer;
}

#form_block .remove_button {
        width            : 400px;
        height           : 40px;
        border           : 1px solid #fff;
        background-color : #ccc;
    /* background-color: var(--page-main-color); */
    max-width      : 90%;
    margin         : 40px auto 0;
    display        : block;
    border-radius  : 50px;
    font-size      : 1.8rem;
    letter-spacing : 0.26em;
    font-weight    : bold;
    position       : relative;
    overflow       : hidden;
}
#form_block .btn-submit{
    width: 100%;
}
#form_block .submit-btn,
#form_block .confirm_button {
    width            : 570px;
    height           : 55px;
    border           : 1px solid #fff;
    background-color : #f2dc26;
    background-color : var(--page-main-color);
    max-width        : 90%;
    margin           : 0 auto;
    display          : block;
    border-radius    : 50px;
    font-size        : 1.8rem;
    letter-spacing   : 0.26em;
    font-weight      : bold;
    position         : relative;
    overflow         : hidden;
}
#form_block .confirm_button[disabled] {
    background-color : #999;
}
#form_block .submit-btn::after,
#form_block .confirm_button::after {
    content          : "";
    position         : absolute;
    height           : 50%;
    width            : 100%;
    bottom           : 0;
    left             : 0;
    background-color : #efefef;
    mix-blend-mode   : multiply;
    pointer-events   : none;
}
/*
#form_block .btn-reset {
    display : none;
}
*/

#form_block .reset-btn,
#form_block .back_button{
    display: block;
    width: 300px;
    height: 40px;
    border: 1px solid #fff;
    background-color: #ddd;
    max-width: 90%;
    margin: auto;
    border-radius: 50px;
    font-size: var(--fs-txt-m);
    font-family: var(--ff-base);
    letter-spacing: 0.26em;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}
#form_block .confirm_post_num1:not(:empty)::before{
  content: "〒";
}
#form_block .confirm_post_num2:not(:empty)::before{
  content: "-";
}
#autozip {
    display : none !important;
}
.datepicker::placeholder {
  color: #000;
}
@media (max-width: 767px) {
    #form_block {
        margin : 90px auto 20px;
    }
    #form_block {
        gap     : 50px;
        padding : 10px;
    }
    #form_block .item {
        flex-direction : column;
        gap            : 18px;
    }
    #form_block .item.no_title{
        gap: 0;
    }
    #form_block .item .item_title {
        display     : flex;
        width       : initial;
        align-items : end;
    }
    #form_block .item .policy_table {
        align-items : start;
    }
    #form_block .item .item_content .mwform-radio-field {
        width : initial;
    }
    #reservation .product-item .horizontal-item {
        width : initial;
    }
    #form_block .check_table.select-check label span {
        padding-left : calc(10px + 1.5em);
    }
    #form_block .submit-btn {
        margin : 50px auto 0;
    }
    /*
    #form_block .btn-reset {
        display : none;
    }
    */
    #form_block .wpcf7-list-item{
      margin: 0 0 0 0.3em;
    }
}
