@charset "UTF-8";

/* フォーム
=========================================== */
#form {
  padding: 5% 0;
    /* iOSでのデフォルトスタイルをリセット */ }
    #form.pt1{
      padding-top: 1%;
    }
    @media only screen and (max-width: 767px) {
      #form.pt1{
        padding-top: 3%;
      } 
    }
    #form h2 {
      background-color: #1E2E53;
      color: #fff;
      font-size: 36.5px;
      text-align: center;
      padding: 1em 0;
      background-image: url(../image/bg_logo02.png);
      background-repeat: no-repeat;
      background-position: left 40% bottom;}
      @media only screen and (max-width: 767px) {
        #form h2 {
          font-size: 22.8px;
          background-size: 65.5px auto;
          padding: 1.25em 0;
          line-height: 150%; } }
    #form .container {
      max-width: 900px; }
      @media only screen and (max-width: 767px) {
        #form .container {
          padding-left: 10px;
          padding-right: 10px; } }
    #form figure {
      margin-top: 40px; }
    @media only screen and (max-width: 767px) {
      #form figure {
        margin-top: 30px; }
    }
    #form .formTbl {
      width: 100%;
      margin-top: 1em; }
      #form .formTbl th, #form .formTbl td {
        padding: 20px; }
        @media only screen and (max-width: 767px) {
          #form .formTbl th, #form .formTbl td {
            display: block;
            width: 100%;
            padding: 10px;
            border: none; } }
      #form .formTbl th {
        background-color: #eee;
        width: 25%;
        border-bottom: 10px solid #fff;
        border-right: 10px solid #fff;
        text-align: left;
        font-weight: normal;
        position: relative;
        vertical-align: top;
        line-height: 180%;
        padding-top: 30px; }
        @media only screen and (max-width: 767px) {
          #form .formTbl th {
            width: 100%;
            padding: 10px;
            border: none; } }
        #form .formTbl th span.req {
          display: inline-block;
          background-color: #ef0033;
          color: #fff;
          font-size: 11px;
          padding: 3px 10px;
          line-height: 1.5em;
          position: absolute;
          right: 20px;
          top: 35%;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          -o-border-radius: 4px;
          border-radius: 4px; }
        #form .formTbl th span.req.t30{
          top: 30px;
        }
        @media only screen and (max-width: 767px) {
          #form .formTbl th span.req,
          #form .formTbl th span.req.t30{
            top: 12px;
          }
        }
        #form .formTbl th span.req.ok {
          background-color: #4ca3e0; }
      #form .formTbl td {
        border-bottom: 10px solid #fff; }
        #form .formTbl td textarea,
        #form .formTbl td input[type=text],
        #form .formTbl td input[type=tel] {
          padding: 0 10px;
          font-size: 16px;
          line-height: 3em;
          background: #fff;
          min-height: 3em;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          -o-border-radius: 4px;
          border-radius: 4px;
          border: 1px solid #bbb;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none; }
        #form .formTbl td select {
          padding: 10px;
          font-size: 16px;
          line-height: 3em;
          background: #fff;
          color: black;
          min-height: 42px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          -o-border-radius: 4px;
          border-radius: 4px;
          border: 1px solid #bbb; }
        #form .formTbl td select.mt10 {
          margin-top: 10px;
        }
        #form .formTbl td .seiWrap,
        #form .formTbl td .meiWrap{
          display: flex;
          align-items: center;
          justify-content: center;
        }
        #form .formTbl td .seiWrap {
          margin-right: 20px;
        }
        
        @media only screen and (max-width: 767px) {
          #form .formTbl td .seiWrap {
            margin-right: 0;
          }
        }
        #form .formTbl td .seiWrap input,
        #form .formTbl td .meiWrap input{
          left: 5px;
        }
        #form .formTbl td #area_input p{
          margin-top: 5px;
        }
        #form .formTbl td #area_input label{
          font-size: 16px;
        }
        #form .formTbl td select.mr10 {
          margin-right: 10px;
        }
        #form .formTbl td textarea {
          width: 100%;
          height: 200px;
          resize: none;
          line-height: 150%; }
          @media only screen and (max-width: 767px) {
            #form .formTbl td textarea {
              height: 150px; } }
        #form .formTbl td .w60p {
          width: 60%; }
          @media only screen and (max-width: 767px) {
            #form .formTbl td .w60p {
              width: 100%; } }
        #form .formTbl td span.note {
          font-size: 12px;
          display: inline-block;
          margin-left: 5px; }
          @media only screen and (max-width: 767px) {
            #form .formTbl td span.note {
              margin-top: 5px; } }
      #form .formTbl td.pink {
        background: #fff3f3; }
    #form .submit {
      text-align: center;
      margin-top: 1em;
      position: relative;
      display: table;
      margin-left: auto;
      margin-right: auto; }
      #form .submit:before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-right: 1px #fff solid;
        border-bottom: 1px #fff solid;
        transform: rotate(-45deg);
        position: absolute;
        right: 20px;
        top: 43%;
        z-index: 2; }
    #form input[type="submit"],
    #form input[type="button"] {
      border-radius: 0;
      -webkit-box-sizing: content-box;
      -webkit-appearance: button;
      appearance: button;
      border: none;
      box-sizing: border-box; }
      #form input[type="submit"]::-webkit-search-decoration,
      #form input[type="button"]::-webkit-search-decoration {
        display: none; }
      #form input[type="submit"]:focus,
      #form input[type="button"]:focus {
        outline-offset: -2px; }
    #form input[type=submit] {
      font-size: 16px!important;
      background-color: #149721;
      border: none;
      color: #fff;
      font-family: "Yu Gothic", YuGothic;
      font-weight: 500;
      font-weight: bold;
      font-size: 1.2rem;
      padding: 1em 5em;
      cursor: pointer;
      position: relative; }
      .submitted input[type=submit] {
          background-color: #ccc !important;
      }
      @media only screen and (max-width: 767px) {
        #form input[type=submit] {
          font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro";
          width: 100%; } }
      #form input[type=submit]:hover {
        opacity: 0.8; }
  
  a.telLink {
    pointer-events: none; }
    @media only screen and (max-width: 767px) {
      a.telLink {
        pointer-events: auto;
        color: #fff; } }
  
  #confirm #form {
    padding-top: 0; }
    #confirm #form h2 {
      padding-top: 6em; }
    #confirm #form .formTbl th, #confirm #form .formTbl td {
      padding: 15px 10px;
      vertical-align: top;
      line-height: 180%; }
    #confirm #form .back {
      text-align: center; }
      #confirm #form .back a {
        display: inline-block;
        margin-top: 4em; }
        @media only screen and (max-width: 767px) {
          #confirm #form .back a {
            font-size: 1.0rem;
            margin-bottom: 5em; } }
  
  #thanks #form {
    padding-top: 0; }
    #thanks #form h2 {
      padding-top: 6em; }
    #thanks #form .container p {
      padding-top: 5em;
      line-height: 180%; }
      @media only screen and (max-width: 767px) {
        #thanks #form .container p {
          font-size: 1.0rem;
          padding-top: 2.5em; } }
    #thanks #form .back {
      text-align: center; }
      @media only screen and (max-width: 767px) {
        #thanks #form .back {
          margin-bottom: 5em; } }
      #thanks #form .back a {
        display: inline-block;
        margin-top: 4em; }
        @media only screen and (max-width: 767px) {
          #thanks #form .back a {
            font-size: 1.0rem; } }
            @media only screen and (max-width: 767px) {
              .pc {
                display: none; } }
      /* flexbox
=========================================== */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  @media only screen and (max-width: 767px) {
    .flex {
      flex-direction: column; } }
  @media only screen and (max-width: 767px) {
    .spFlexRow {
      flex-direction: row;
      flex-wrap: nowrap; } }
  @media only screen and (max-width: 767px) {
    .w30p {
      width: 80%; } }
  #form .formTbl td .w_short {
    width: 27%;
  }
  
  #form .formTbl td .w60p {
    width: 60%;
  }
  
  @media only screen and (max-width: 767px) {
    #form .formTbl td .w_short {
      width: 46%;
    }
    #form .formTbl td .w60p {
      width: 100%;
    }
  }
  .b-form-label-items-wrap .b-form-label-items .b-form-label-item{
    font-size: 16px;
  }
  .form_introduction{
    margin-top: 50px;
    padding: 0 10px;
    text-align: center;
  }
  @media only screen and (max-width: 767px) {
    .form_introduction{ 
      margin-top: 40px;
    }
  }
  .b-works-block.pb0{
    padding-bottom: 0;
  }
  .c-content-main .b-works-list{
    margin-top: 70px;
  }
  @media only screen and (max-width: 767px) {
    .c-content-main .b-works-list{
      margin-top: 50px;
    } 
  }

  .c-content-main .b-works-list li{
    margin-bottom: 0;
  }