@charset "utf-8";

body {
  background: url("../../contact/images/bg.png") repeat-y center top;
    background-size: auto;
  background-size: 1700px auto;
}

.txt_color01{
    color: #fe7f00;
}

.notice{
    color: #fe7f00;
    font-weight: 700;
    font-size: clamp(8px, calc(20vw / 7.5), 16px);
    margin-top: 5px;
}

@media only screen and (max-width: 768px) {
  body {
    background: url("../../contact/images/bg_sp.png") repeat center top;
    background-size: auto;
    background-size: 100% auto;
  }
    
  #box01{
    padding-left: calc(130vw / 7.5);
  }

  .lead {
    padding-left: 0;
  }
}

/*　////////////////////
　　form
////////////////////*/

form{
    margin-top: 80px;
}

form dl{
    display: flex;
    align-items: center;
}

form dl + dl{
    margin-top: 2em;
}

form dl dt{
    width: 300px;
}

form dl dd{
    flex: 1;
}

form input,
form .inquiry{
    width: 100%;
    padding: .5em 1em;
    border: 1px solid #000;
    box-sizing: border-box;
    font-size: clamp(14px, calc(28vw / 7.5), 20px);
    letter-spacing: 0.05em;
    line-height: 1.8;    
}

form dl dd ul.cf{
    overflow: hidden;
}

form dl dd ul.cf li{
    float: left;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

form .kindSlect ul li{
    display: flex;
    align-items: center;
    gap:0 10px;
}

form .kindSlect ul input[type="radio"]{
    width: inherit;
}

form .kindSlect li + li{
    margin-top: 5px;
}

form .msg{
    display: block;
    color: red;
    font-weight: bold;
    font-size: clamp(12px, calc(24vw / 7.5), 16px);    
}

.input_tel{
    margin-right: 10px;
    text-align: center;
}

.btnArea{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;    
    max-width: 600px;
    margin: 100px auto 0;
}

.btnArea input[type="submit"] {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(14px, calc(28vw / 7.5), 20px);
    letter-spacing: 0.05em;
    line-height: 1.8;
    display: inline-block;
    text-align: center;
    padding: .5em 1em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 0;
    border: none;
    border-radius: 30px;    
    cursor: pointer;
}

.btnArea input[type="submit"].inputBtn {
    background-color: #f6a844;
    color: #fff !important;    
}

.btnArea input[type="submit"].inputBtn:hover {
    background-color: #dd7d36;
}

.btnArea input[type="submit"].backBtn {
  background-color: #f0f0f0;
  color: #333 !important;
}

.btnArea input[type="submit"].backBtn:hover {
  background-color: #ddd;
}

@media only screen and (max-width: 768px) {
    form {
        margin-top: calc(280vw / 7.5);
        margin-left: calc(-130vw / 7.5);
    }

    form dl{
        display: block;
    }

    form dl + dl{
        margin-top: 2em;
    }

    form dl dt{
        margin-bottom: 5px;
        width: 100%;
    }

    form dl dd{
        width: auto;
    }    
    
    .btnArea{
        padding: 0 3em;
        margin-top: 3em;
        grid-template-columns: 1fr; /* 1カラムに変更（縦並び） */
    }
    
}    
/*　////////////////////
　　form-confirm 
////////////////////*/

body.confirm form dl dd{
    background: rgb(238, 238, 238,0.7);
    border: none;
    padding: 0.5em 1em;
}


/*　////////////////////
　　form-thanks
////////////////////*/
body.thanks{
}

body.thanks footer{
    position: fixed;
    bottom: 0;
    width: 100%;
}

@media only screen and (max-width: 768px) {
    body.thanks{
    }

    body.thanks footer{
        position: inherit;
    }    
}