@charset "UTF-8";
/* CSS Document */
/*20190705form css*/
div#form {
    background-color: #f1f1f1;
    padding: 3% 3% 11%;
    padding-top: 12%;
}
div#form h3{
    width: 800px;
    text-align: center;
    color: #1e68d6;
    font-size: 1.5rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #999;
    margin: 20px auto 15px;
    display: flex;
    justify-content: center;
}
div#form h3 img{
    width: 6%;
    margin-bottom: 5px;
    margin-right: 5px;
}
div#form .explanation{
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: bold;
}
.explanation .must{
    font-size: 70%;
    margin-right: 5px;
    color: #fff;
    background: #ff6000;
    padding: 4px 10px 5px;
    font-size: 13px;
    margin-bottom: 2px;
    border-radius: 3px;
    font-weight: bold;
}
.form_tbl{
    width: 590px;
    margin: 0 auto;
    padding: 7% 5%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px #e6e6e6;
}
.form_tbl table {
    width: 100%;
    border: none;
}
.form_tbl th {
    display: block;
    width: 100%;
    border: none!important;
    color: #313131;
    font-size: 16px;
    text-align: left;
    margin-bottom: 5px;
}
.form_tbl td {
    display: block;
    width: 100%;
    border: none!important;
    margin-bottom: 13px;
}
.form_tbl tr .min{
    font-size: 0.7rem;
    margin-bottom: 5px;
    font-weight:normal;
}
.form_tbl input, select, textarea {
    text-indent: 1em;
    padding: 10px 0;
    width: 100%;
}
input[type="radio" i] {
    margin: 3px 3px 0px 25%;
}

input[type="radio" i]:first-child{
     margin: 3px 3px 0px 0px;
}
input[type="checkbox" i] {
    margin: 3px 3px 2% 0;
}

input[type="checkbox" i]:first-child{
     margin: 3px 3px 0px 0px;
}

.form_tbl input#tel {
    text-indent: 1em;
    padding: 10px 0;
    width: 27%;
}
.form_tbl input#zip {
    text-indent: 1em;
    padding: 10px 0;
    width: 30%;
}
.form_tbl input#date1, #date2 {
    text-indent: 0.6em;
    padding: 10px 0;
    width: 27%;
    margin-bottom: 5px;
}
.form_tbl select#time1, #time2 {
    text-indent: 0.8em;
    padding: 10px 0;
    width: 22%;
}
.form_tbl input, select, textarea {
    border: 1.5px solid #cacaca;
    border-radius: 5px;
}
.form_tbl input.radio {
    width: inherit;
}
label span.must {
    font-size: 70%;
    margin-right: 10px;
    margin-left: 0;
    color: #fff;
    background: #ff6000;
    padding: 4px 10px 5px;
    font-size: 13px;
    margin-bottom: 2px;
    border-radius: 3px;
}
.submitbtn {
    text-align: center;
    margin-top: 20px;
}
input[type=submit] {
    -webkit-appearance: none;
    width: auto !important;
    padding: 15px 30px 12px 12px;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background: linear-gradient(to bottom, #00aeff, #00aeff);
    border: none; /* 境界線なし */
    border-radius: 5px;
    box-shadow: 0 7px 0 #0471d7; /* 下に影をくっきり */
    font-size: 20px;
    font-weight: bold;
}
.backbtn {
    -webkit-appearance: none;
    width: 290px;
    font-size: 20px;
    margin: 0 auto;
    margin-top: 40px;
    font-weight: bold;
    padding: 16px 5px 15px 5px;
    text-decoration: none;
    color: #FFF;
    background: linear-gradient(to bottom, #00aeff, #00aeff);
    border: none; /* 境界線を削除 */
    border-radius: 5px;
    box-shadow: 0 7px 0 #0471d7; /* submitボタンと同じく下にくっきり影 */
    text-align: center;
}
.backbtn a:visited {
    color: #fff;
}
.backbtn a:link {
    color: #fff;
    text-decoration: none;
}

.submit-back {
    width: auto !important;
    padding: 15px 30px 12px 12px;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background: linear-gradient(to bottom, #969696, #969696);
    border: none; /* 境界線を削除 */
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
    cursor: pointer;
    padding-left: 10%;
    box-shadow: 0 7px 0 #555555; /* 濃いグレーの下向き影 */
}


/*スクロール*/
.suc{
    height: 150px;
    overflow-y: scroll;
    border-color: #d6d6d6;
    border-style: solid;
    border-width: 1px;
    padding: 20px 13px 15px 20px;
    font-size: 12px;
    margin: 2% 0%;
    word-break: break-all;
}
/* スクロールの幅の設定 */
.suc::-webkit-scrollbar {
width: 5px;
height: 5px;
}

/* スクロールの背景の設定 */
.suc::-webkit-scrollbar-track {
border-radius: 3px;
box-shadow: 0 0 3px #fff inset;
}

/* スクロールのつまみ部分の設定 */
.suc::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #d6d6d6;
}
.ds_no_pc{
    display: none;
}
body{
    margin:0px;
}
#wrapper.steps{
    background-color: #f1f1f1;
    margin: 0 auto;
    width: 100%;
}
#wrapper.steps h2{
    padding: 40px 0 45px;
    margin-top:0;
}
#wrapper.steps th {
    background: #ececec;
}
#wrapper.steps #content{
    background-color: #f1f1f1;
}
#wrapper.steps .header {
    width: 100%;
    height: auto;
}
#wrapper.steps .h-bg {
    width: 100%;
    background: #fff;
}
@media (min-width: 1920px) {
    #wrapper.steps{
        width: 1920px;
    }
    #wrapper.steps .header {
        width: 1920px;
        height: auto;
    }
}


@media (max-width: 767px) {

.ds_no_pc{
    display: block;
}
.qa {
    width: 100%;
    margin: 40px auto;
    padding: 6%;
    box-sizing: border-box;
    padding-top: 0;
}
div#form h3 {
    width: 100%;
}
.form_tbl {
    width: 100%;
    margin: 0 auto;
    padding: 11% 5%;
    box-sizing: border-box;
}
input[type="checkbox" i]{
     margin: 5px 3px 0px 0px;
}
div#form h3 img {
    width: 12%;
}
#wrapper.steps{
    width: 100%;
}
.form_tbl input#tel {
    text-indent: 0.5em;
}
.form_tbl input#date1 {
    width: 85%;
    text-indent: 0.2em;
}
.form_tbl input#time1 {
    width: 65%;
    text-indent: 0.2em;
}
}

textarea{
    resize:vertical;
}

.zip-wrapper {
    display: flex;
    align-items: center;
    gap: 5px; /* 郵便番号入力欄の間隔 */
}
.zip-wrapper input {
    width: 27% !important; /* 各郵便番号入力欄の幅 */
}
.form_tbl select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='50' viewBox='0 0 24 24' width='50' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 25px 30px;
    padding-right: 30px;
  }

  @media screen and (min-width: 768px) {
    div#form {
        background-color: #f1f1f1;
        padding: 3% 3% 11%;
        padding-top: 7%;
    }
    .form_tbl {
        width: 55%;
        min-width: 600px;
        margin: 0 auto;
        padding: 4% 5%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 5px #e6e6e6;
    }
    label span.must {
        font-size: 70%;
        margin-right: 10px;
        margin-left: 0;
        color: #fff;
        background: #ff6000;
        padding: 4px 10px 5px;
        font-size: 13px;
        margin-bottom: 2px;
        border-radius: 3px;
    }
    .form_tbl table {
      display: table;
      width: 100%;
    }
  
    .form_tbl tr {
      display: table-row;
    }
  
    .form_tbl th,
    .form_tbl td {
      display: table-cell;
      vertical-align: center;
      padding: 5px;
    }
  
    .form_tbl th {
      width: 1%;
      white-space: nowrap;
      text-align: left;
    }
  
    .form_tbl td {
      width: 70%;
    }
  
    .form_tbl input[type="text"],
    .form_tbl input[type="tel"],
    .form_tbl input[type="email"],
    .form_tbl select,
    .form_tbl textarea {
      width: 100%;
      box-sizing: border-box;
    }
  
    .form_tbl input#tel {
      width: 28%;
      min-width: 70px;
    }
  
    .form_tbl .zip-wrapper {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  
    .form_tbl .zip-wrapper input {
      width: 40% !important;
    }
  
    .form_tbl .min {
      display: block;
      margin-top: 4px;
      font-size: 0.75rem;
    }
    #content {
        margin: 0 auto;
        max-width: 3000px;
        width: 100%;
        text-align: left;
        background-color: #fff;
        padding: 15px 30px 100px;
    }
    .form_tbl th {
        font-size: 20px;
    }
    .form_tbl th, .form_tbl td {
        padding: 10px;
    }
}
  }