@charset "utf-8";
#contact-form{
  .wpcf7-not-valid-tip{
      display:none !important;
  }
  .wpcf7-spinner{
    display: block;
    position: absolute;
    left: 50%;
    margin-top: 20px;
    margin-left: -12px;
  }
  .ajax-loader {
    display:block !important;
  }
  .wpcf7 form .wpcf7-response-output {
    border-radius:0.5em;
    border-color:var(--color-theme);
    font-weight:bold;
    text-align:center;
  }
   .wpcf7-not-valid-tip{
    display:none;
  }

  .wpcf7-radio .wpcf7-list-item{
    display:block;
    margin:0;
  }
  .wpcf7-radio .wpcf7-list-item:not(:last-child){
    margin:0 0 .5em;
  }
}
@media ( width < 768px ) {
  #contact-form{
    .wpcf7-list-item label{
        display:flex;
        align-items:flex-start;
      }
    .wpcf7-list-item label input{
        margin: .35em 0 0;
    }
  }
}

/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    #contact-sec {
        margin: 0 auto;
        padding: 0;
        width: var(--content-width-sp);
    }
    #contact-form {
        margin: 0 auto;
        width: 100%;
    }
    #contact-form dl {
        margin: 8.0vw auto 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }
    #contact-form dl > dt {
        margin: 0;
        padding: 4.0vw;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 600;
        line-height: 1.0;
        background: #eee;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-top: 1px solid #ccc;
    }
    #contact-form dl > dt.required::after {
        display: block;
        margin: 0;
        padding: 0.35em 0.4em 0.4em;
        content: "必須";
        color: #fff;
        font-size: 3.2vw;
        font-weight: 700;
        line-height: 1.0;
        background: #c00;
        border-radius: 1.0vw;
    }
    #contact-form dl > dd {
        margin: 0;
        padding: 4.0vw;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 400;
        line-height: 1.5;
        background: #fff;
    }
    #contact-form dl > dd label {
        margin: 0;
        display: block;
    }
    #contact-form dl > dd label + label {
        margin-top: 0.5em;
    }
    #contact-form dl > dd :is(input[type="text"],input[type="email"],input[type="tel"],textarea) {
        padding: 0.5em 0.5em;
        width: 100%;
        font-size: max( 16px, 3.6vw );
        font-weight: 400;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 1.0vw;
    }
    #contact-form dl > dd :is(input[type="text"],input[type="email"],input[type="tel"],textarea)::placeholder {
        color: #ccc;
    }


    #contact-form input[type=submit], input[type=button]{
      cursor:pointer;
      appearance:none;
      -webkit-appearance:none;
      outline:none;
      border: none;
    }
    #contact-form .select{
      div:not(:last-child){
        margin:0 0 .5em;
      }
     .wpcf7-list-item-label{
        display:inline-block;
        margin:0 0 0 0.3em;
      }
    }
    #contact-form .zipcode-wrap{
      display: flex;
      align-items:center;
      gap:.3em;
      margin:0 0 1em;
      #form-zipcode01{
        width:3em;
      }
      #form-zipcode02{
        width:4em;
      }
    }
    #contact-form .js-zips{
      display: inline-block;
      padding: .6em .7em .7em;
      margin:0 0 0 1em;
      color: #fff;
      font-weight: bold;
      line-height: 1em;
      background: #333;
      border-radius:.5em;
      transition: opacity 0.3s ease-out;
      &:hover{
        opacity:.7;
      }
    }
    #contact-form .valid_msg{
      display: inline-block;
      padding: .5em .6em .6em;
      margin: .5em 0 0;
      color: #fff;
      font-weight: bold;
      font-size: .95em;
      line-height: 1em;
      background: #cc0000;
    }

    #contact-form .ws-agree {
        margin: 6.0vw auto 0;
    }
    #contact-form .ws-agree label {
        display: block;
        margin: 0 auto;
        width: max-content;
        max-width: 100%;
        font-size: 3.6vw;
    }
    #contact-form .ws-agree p {
        margin: 0.2em auto 0;
        font-size: 3.2vw;
        text-align: center;
    }
    #contact-form .ws-agree p a {
        text-decoration: underline;
    }
    #contact-form .ws-confirm {
        margin: 4.0vw auto 0;
    }
    #contact-form .ws-confirm p {
        margin: 0;
        font-size: 3.6vw;
        text-align: center;
    }
    #contact-form .ws-btns {
        margin: 6.0vw auto 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 4%;
    }
    #contact-form .ws-submit {
        position: relative;
        margin: 0;
        width: 64%;
        height: auto;
        aspect-ratio: 280 / 64;
        font-size: 4.0vw;
        border-radius: 1.0vw;
        z-index: 0;
        transition: color 0.3s ease-out, border 0.3s ease-out, background 0.3s ease-out;
    }
    #contact-form .ws-submit::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: var(--color-theme);
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        z-index: 2;
        transition: background 0.3s ease-out;
    }
    #contact-form .ws-submit input[type="submit"] {
        position: relative;
        display: block;
        margin: 0;
        padding: 0 1.0em;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 700;
        font-family: inherit;
        text-align: left;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 1;
        transition: color 0.3s ease-out;
    }
    #contact-form .ws-back {
        position: relative;
        margin: 0;
        width: 32%;
        height: auto;
        aspect-ratio: 140 / 64;
        font-size: 4.0vw;
        background: #999;
        border: 1px solid #999;
        border-radius: 1.0vw;
        z-index: 0;
        transition: color 0.3s ease-out, background 0.3s ease-out;
    }
    #contact-form .ws-back::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        left: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        rotate: 180deg;
        z-index: 2;
        transition: background 0.3s ease-out;
    }
    #contact-form .ws-back button[type="button"] {
        position: relative;
        display: block;
        margin: 0;
        padding: 0 1.0em;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 700;
        font-family: inherit;
        text-align: right;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 1;
        transition: color 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #contact-form .ws-submit:hover input[type="submit"] {
            color: var(--color-theme);
        }
        #contact-form .ws-back:hover {
            background: #fff;
        }
        #contact-form .ws-back:hover button[type="button"] {
            color: #999;
        }
        #contact-form .ws-back:hover::after {
            background: #999;
        }
    }

    #page-main #contact-sec .common-h3{
        padding:0;
    }
    #page-main #contact-sec .common-h3::before {
        display:none;
    }
    .contact-exit{
        margin:3em 0 0;
    }

    #page-main .cyan-box.contact-hurry{
        margin:3em 0 0;
        padding:1.5em;
        p{
          line-height:1.5em;
        }
        th,td{
          display:block;
          padding:1em 0 0;
          text-align:left;
          font-size: 3.75vw;
          line-height:1.3em;
        }
        td{
          padding:.5em 0 0;
        }
        td, td a{
          font-weight:bold;
          color: #1992ff;
        }
    }

}

/**
 * PC用設定
 */
@media ( width >= 768px ) {

    #contact-sec {
        margin: 0 auto;
        padding: 0;
        width: 80%;
    }
    #contact-form {
        margin: 0 auto;
        width: 100%;
    }
    #contact-form dl {
        margin: calc( 100vw * 40 / 1440 ) auto 0;
        width: 100%;
        display: grid;
        grid-template-columns: 35% 65%;
        gap: 0;
        border-top: 1px solid #ccc;
    }
    #contact-form dl > dt {
        margin: 0;
        padding: calc( 100vw * 30 / 1440 );
        width: 100%;
        font-size: calc( 100vw * 18 / 1440 );
        font-weight: 600;
        line-height: 1.0;
        background: #eee;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
    }
    #contact-form dl > dt.required::after {
        display: block;
        margin: 0;
        padding: 0.3em 0.4em 0.4em;
        content: "必須";
        color: #fff;
        font-size: calc( 100vw * 16 / 1440 );
        font-weight: 700;
        line-height: 1.0;
        background: #c00;
        border-radius: calc( 100vw * 4 / 1440 );
    }
    #contact-form dl > dd {
        margin: 0;
        padding: calc( 100vw * 30 / 1440 ) 0 calc( 100vw * 30 / 1440 ) calc( 100vw * 30 / 1440 );
        width: 100%;
        font-size: calc( 100vw * 18 / 1440 );
        font-weight: 400;
        line-height: 1.5;
        background: #fff;
        border-bottom: 1px solid #ccc;
    }
    #contact-form dl > dd label {
        margin: 0;
        display: block;
    }
    #contact-form dl > dd label + label {
        margin-top: 0.5em;
    }
    #contact-form dl > dd :is(input[type="text"],input[type="email"],input[type="tel"],textarea) {
        padding: 0.5em 0.5em;
        width: 100%;
        font-size: max( 16px, calc( 100vw * 18 / 1440 ) );
        font-weight: 400;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #contact-form dl > dd :is(input[type="text"],input[type="email"],input[type="tel"],textarea)::placeholder {
        color: #ccc;
    }

    #contact-form input[type=submit], input[type=button]{
      cursor:pointer;
      appearance:none;
      -webkit-appearance:none;
      outline:none;
      border: none;
    }
    #contact-form .select{
      div:not(:last-child){
        margin:0 0 .5em;
      }
      .wpcf7-list-item-label{
        display:inline-block;
        margin:0 0 0 0.3em;
      }
    }
    #contact-form .zipcode-wrap{
      display: flex;
      align-items:center;
      gap:.3em;
      margin:0 0 1em;
      #form-zipcode01{
        width:3em;
      }
      #form-zipcode02{
        width:4em;
      }
    }
    #contact-form .js-zips{
      display: inline-block;
      padding: .6em .7em .7em;
      margin:0 0 0 1em;
      color: #fff;
      font-weight: bold;
      font-size: .75em;
      line-height: 1em;
      background: #333;
      border-radius:.5em;
      transition: opacity 0.3s ease-out;
      &:hover{
        opacity:.7;
      }
    }
    #contact-form .valid_msg{
      display: inline-block;
      padding: .5em .6em .6em;
      margin: .5em 0 0;
      color: #fff;
      font-weight: bold;
      font-size: .85em;
      line-height: 1em;
      background: #cc0000;
    }

    #contact-form .ws-agree {
        margin: calc( 100vw * 60 / 1440 ) auto 0;
    }
    #contact-form .ws-agree label {
        display: block;
        margin: 0 auto;
        width: max-content;
        max-width: 100%;
        font-size: calc( 100vw * 18 / 1440 );
    }
    #contact-form .ws-agree p {
        margin: 0.2em auto 0;
        font-size: calc( 100vw * 14 / 1440 );
        text-align: center;
    }
    #contact-form .ws-agree p a {
        text-decoration: underline;
    }
    #contact-form .ws-confirm {
        margin: calc( 100vw * 40 / 1440 ) auto 0;
    }
    #contact-form .ws-confirm p {
        margin: 0;
        font-size: calc( 100vw * 18 / 1440 );
        text-align: center;
    }
    #contact-form .ws-btns {
        margin: calc( 100vw * 60 / 1440 ) auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 calc( 100vw * 40 / 1440 );
    }
    #contact-form .ws-submit {
        position: relative;
        margin: 0;
        width: 30%;
        height: auto;
        aspect-ratio: 280 / 64;
        font-size: calc( 100vw * 20 / 1440 );
        border-radius: calc( 100vw * 8 / 1440 );
        z-index: 0;
        transition: color 0.3s ease-out, border 0.3s ease-out, background 0.3s ease-out;
    }
    #contact-form .ws-submit::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: var(--color-theme);
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        z-index: 2;
        transition: background 0.3s ease-out;
    }
    #contact-form .ws-submit input[type="submit"] {
        position: relative;
        display: block;
        margin: 0;
        padding: 0 1.0em;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        font-family: inherit;
        text-align: left;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 1;
        transition: color 0.3s ease-out;
    }
    #contact-form .ws-back {
        position: relative;
        margin: 0;
        width: 15%;
        height: auto;
        aspect-ratio: 140 / 64;
        font-size: calc( 100vw * 20 / 1440 );
        background: #999;
        border: 1px solid #999;
        border-radius: calc( 100vw * 8 / 1440 );
        z-index: 0;
        transition: color 0.3s ease-out, background 0.3s ease-out;
    }
    #contact-form .ws-back::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        left: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        rotate: 180deg;
        z-index: 2;
        transition: background 0.3s ease-out;
    }
    #contact-form .ws-back button[type="button"] {
        position: relative;
        display: block;
        margin: 0;
        padding: 0 1.0em;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        font-family: inherit;
        text-align: right;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 1;
        transition: color 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #contact-form .ws-submit:hover input[type="submit"] {
            color: var(--color-theme);
        }
        #contact-form .ws-back:hover {
            background: #fff;
        }
        #contact-form .ws-back:hover button[type="button"] {
            color: #999;
        }
        #contact-form .ws-back:hover::after {
            background: #999;
        }
    }

    #page-main #contact-sec .common-h3{
        padding:0;
    }
    #page-main #contact-sec .common-h3::before {
        display:none;
    }
    .contact-exit{
        margin:3em 0 0;
    }

    #page-main .cyan-box.contact-hurry{
        margin:calc(100vw * 80 / 1440) 0 0 0;
        padding:calc(100vw * 40 / 1440);
        th,td{
          padding:1.5em 0 0;
          text-align:left;
          align-items:center;
          font-size: calc(100vw * 17 / 1440);
          line-height:1.3em;
        }
        th{
          padding-right:2em;
        }
        td, td a{
          font-weight:bold;
          color: #1992ff;
        }
    }
}