#contact { padding: 100px 0 0; }
#contact main { width: 100%; }

#contact .req { margin-left: 10px; height: 20px; line-height: 20px; padding: 0 5px; display: inline-block; font-size: 12px; background-color: #CA0001; color: #fff; }

#contact .caution { padding: 50px 0; }
#contact .caution .req { vertical-align: top; }
#contact .caution h3 { font-size: 20px; }
#contact .caution p { line-height: 150%; padding: 10px 0 0; }

.form_wrap { max-width: 900px; margin: auto; padding: 0 0 100px; }
.form .tr.join { padding: 20px 0; }
.form .tr .th,
.form .tr .td { box-sizing: border-box; min-height: 1px; }
.form .tr .field { padding: 15px 0; }
.form .tr .th { width: 250px; }
.form .tr .th p { padding: 30px 0 0; }
.form .tr .td { width: calc(100% - 250px); }
.form .tr .td input[type="text"],
.form .tr .td textarea { border: 1px solid #DCDCDC; box-sizing: border-box; font-size: 16px; }
.form .tr .td input[type="text"] { padding: 0 20px; height: 60px; line-height: 60px; width: 100%; }
.form .tr .td input[type="text"].short { width: 50%; }
.form .tr .td textarea { width: 100%; resize: vertical; line-height: 150%; padding: 10px 15px; }
.form .tr .td label { display: inline-block; padding: 0 20px 0 0; }
.form .tr .col span { display: inline-block; padding-left: 5px; }
.form .tr .col span:first-child { padding-right: 10px; padding-left: 0; }
.form .tr .col2 .col { width: 49%; }
.form .tr .col2 .col input { width: calc(100% - 120px); }
.form .tr .postal { width: 46%; }
.form .tr .postal::before { height: 20px; line-height: 20px; position: absolute; content: '〒'; left: 20px; top: 0; bottom: 0; z-index: 1; }
.form .tr .postal input { padding-left: 40px !important; } 
.form .find_address { padding: 0 20px; height: 30px; line-height: 30px; font-size: 14px; border-radius: 6px; background-color: #000; color: #fff; display: block; margin-left: 20px; }
.form .tr .td label { display: block; cursor: pointer; margin: 15px 0; }
.form .policy { font-size: 14px; padding: 30px 0; }
.form .policy a { color: #1933A5; text-decoration: underline; }
.form .btn { text-align: center; }
.form .btn input[type="submit"],
.form .btn a { font-size: 24px; color: #fff; padding: 0 50px; margin: 0 5px 20px; letter-spacing: 1px; height: 70px; line-height: 70px; border-radius: 50px; cursor: pointer; display: inline-block; vertical-align: middle; border: none; appearance: none; }
.form .btn input[type="submit"] { background-color: #0E355B; }
.form .btn a { background-color: #BBBBBB; }
.form .error_msg { color: #ec0404; font-size: 14px; }

.form .privacy { padding: 50px 0 30px; font-size: 14px; }
.form .privacy a { color: #1933A5; text-decoration: underline; }
.form .warning { font-size: 12px; color: #9B9B9B; }

.form .confirm { background-color: #fff; box-sizing: border-box; padding: 0 0 60px; border-radius: 5px; }
.form .confirm .tr { border-top: 1px solid #BBBBBB; }
.form .confirm form .tr:first-of-type { border: none; }
.form .confirm .tr .th,
.form .confirm .tr .td  { padding: 15px 20px; }
.form .confirm .tr .td .field { padding: 0; }
.form .confirm .tr .th p { padding: 0; }

.form .thanks { text-align: center; }
.form .thanks h2 { font-size: 34px; font-weight: bold; padding: 0 0 30px; }

.btn_wrap { padding: 30px 0 0; }
.btn_wrap .btn { font-size: 18px; color: #fff; height: 70px; line-height: 70px; max-width: 440px; width: 80%; display: block; margin: auto; border: none; cursor: pointer; transition: 0.5s; margin: 20px auto 0; }
.btn_wrap .btn:hover { opacity: 0.8; }
.btn_wrap .btn.green {  background: rgb(0,139,137); background: linear-gradient(94deg, rgba(0,139,137,1) 0%, rgba(197,227,207,1) 100%); }
.btn_wrap .btn.gray { background-color: #BBBBBB; }
.btn_wrap .btn img { width: 10px; right: 30px; top: 0; bottom: 0; margin: auto; }

.footer { width: 100%; padding: 60px 4% 30px; box-sizing: border-box; border-top: 1px solid #BBBBBB; }

@media screen and (max-width: 767px) {

    body { -webkit-text-size-adjust: 100%; }

    .head-style2 h4 span { font-size: 54px; }

    #contact .req { font-size: 10px; }
    #contact .caution h3 { font-size: 18px; }

    .form .tr { display: block; padding: 10px 0 0; }
    .form .tr .th,
    .form .tr .td { width: 100%; }
    .form .tr .field { padding: 8px 0 15px; }
    .form .tr .th p { font-size: 14px; }
    .form .tr .td input[type="text"] { height: 50px; line-height: 50px; padding: 0 15px; }
    .form .tr.join { padding: 10px 0 0; }

    .form .tr .th p { padding: 0; }
    
    .form .tr .col2 { display: block; }
    .form .tr .col2 .col { width: 100%; text-align: left; padding: 0 0 15px; }
    .form .tr .col2 .col input { width: calc(80% - 130px); }
    .form .tr .col span { min-width: 60px; box-sizing: border-box; }

    .form .tr .postal { width: 100%; }
    .form .tr .postal::before { left: 12px; }
    .form .find_address { margin: 15px 0 0; font-size: 12px; }

    .form .tr .td label { font-size: 14px; padding-right: 10px; }
    .form .privacy { padding: 0 0 20px; }

    .form .confirm { padding: 30px 0; }
    .form .confirm .tr { padding: 15px 0; }
    .form .confirm .tr .th,
    .form .confirm .tr .td { padding: 0 3%; }
    .form .confirm .tr .td { font-weight: 600; }
    .form .confirm .tr .field { padding: 0; }

    .btn_wrap .btn { font-size: 16px; height: 60px; line-height: 60px; }
    .btn_wrap .btn img { right: 6%; }
}