@charset "utf-8";

/* CSS Document */
header {
    margin-top: 0;
}

#sub .h2_bg_box {
    background: url(../img/top/ric_bg.jpg);
}

#sub h2.def {
    margin: 0 auto;
    color: #3DB49A;
    background: rgba(60, 180, 154, 0.2);
    font-size: 34px;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    height: 100px;
    padding-top: 60px;
    letter-spacing: 2px;
}

#sub h1.def b {
    font-weight: 500;
}

#sub h1.def span {
    font-size: 14px;
    font-weight: 300;
    display: block;
}


.contact p {
    color: #333;
    font-size: 18px;
}

.contact .box01 {
    background: url(../img/top/contactfv.jpg) no-repeat center bottom #000;
    width: 100%;
    background-size: cover;
    margin: 0 auto;
    color: #fff;
}

.contact .box01 p {
    font-size: 22px;
    line-height: 1.8;
    font-weight: 300;
    width: 960px;
    margin: 0 auto;
    padding: 130px 0px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 2px black, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.contact .box01 p span {
    color: #C59F4B;
    font-size: 28px;
    margin: 0 10px;
}

.contact h3 {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    line-height: 54px;
    padding-left: 10px;
    color: #3DB49A;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
}

.contact .warp {
    width: 960px;
    margin: 0 auto;
}

.contact .box02,
.contact .box03 {
    margin-top: 60px;
}

.contact .box02 ul {
    padding-left: 0px;
    list-style: none;
    margin: 50px auto 30px;
}

.contact .box02 ul li {
    display: block;
    font-size: 36px;
    text-align: center;
}

.contact .box02 p {
    text-align: center;
    text-shadow: none;
    line-height: 1.6;
}

.contact .box02 p a {
    color: #3DB49A;
    font-size: 26px;
    margin: 10px auto;
}

.contact .box03 table {
    width: 900px;
    margin: 50px auto 30px;
}

.contact .box03 table th {
    background: #3DB49A;
    padding: 14px;
    color: #fff;
    border-bottom: 1px solid #fff;
    font-size: 18px;
    font-weight: 200;
    width: 280px;
    vertical-align: middle;
    text-align: left;
}

.contact .box03 table td {
    background: #f3f3f3;
    padding: 14px;
    border-bottom: 1px solid #fff;
    font-size: 16px;
    font-weight: normal;
}

.contact .box03 table td.last {
    border-bottom: 0px solid #ccc;
}

.contact .box03 form input,
.contact .box03 form textarea,
.entry .box03 form input,
.entry .box03 form textarea {
    padding: 6px 10px;
    width: 96%;
    font-size: 18px;
}

.contact .box03 form input.yuubin,
.contact .box03 form input.tel {
    width: 80px;
}

.contact .box03 form textarea {
    border: 1px solid #ccc;
}

.hissu {
    background-color: #ffcc00;
    color: #000;
    display: inline-block;
    float: right;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    padding: 1% 3%;
}

.contact p.btm_text {
    text-align: center;
    font-size: 18px;
    text-shadow: none;
    margin-bottom: 30px;
    line-height: 1.6;
}

.contact p.btm_text a {
    color: cornflowerblue;
    display: inline-block;
}

.contact p.next {
    text-align: center;
    font-size: 14px;
    text-shadow: none;
    margin-bottom: 100px;
    margin-top: -47px;
    padding-left: 90px;
}

.contact blockquote p {
    text-align: center;
    font-size: 20px;
    text-shadow: none;
    margin-top: 60px;
    line-height: 1.6;
}

.contact .btn_box {
    margin-bottom: 50px;
    text-align: center;
}


.contact .msg {
    margin-bottom: 50px;
    color: #F80004;
}

.contact .post h3 {
    background: none;
    text-align: center;
}

.contact .post ul li {
    display: block;
    margin: 0 auto;
}

.contact p.mail a {
    text-transform: lowercase;
    margin-bottom: 30px;
}

input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
}

@media(max-width:960px) and (min-width: 641px) {


    .contact .box01 {
        height: auto;
    }

    .contact .box01 p {
        font-size: 18px;
        padding: 60px 20px 60px;
        width: auto;
    }

    .contact .box01 p.text01 {
        text-align: center;
        padding: 20px 20px 20px;
    }

    .contact .box01 p.text02,
    .contact .box01 p.text03 {
        text-align: center;
        padding: 10px 20px 20px;
        font-size: 16px;
    }

    .contact .warp {
        width: auto;
        margin: 0 20px;
    }

    .contact .box02,
    .contact .box03 {
        margin-top: 40px;
    }

    .contact .box02 ul {
        width: 280px;
        margin: 0 auto 30px;
    }

    .contact .box02 ul li {
        width: 280px;
    }

    .contact .post ul li {
        width: 100%;
        text-align: center;
    }

    .contact .box02 ul li img {
        width: 60px;
    }

    .contact .box03 form input,
    .contact .box03 form textarea {
        width: 94%;
        padding: 10px;
    }

    .mwform-tel-field input {
        width: auto;
    }

    .contact .box03 table th,
    .contact .box03 table td {
        width: auto;
        display: block;
        font-size: 18px;
    }

    .contact .box03 table th {
        height: 26px;
        line-height: 26px;
        text-align: left;
    }

    .contact blockquote p {
        padding-top: 30px;
        margin: 0 10px;
    }

    .contact h3 {
        padding: 0px 10px 0px 20px;
        font-size: 22px;
    }



    .hissu {
        padding: 2px 4px;
        line-height: 20px;
    }

    #sub h2.def {
        width: auto;
        font-size: 26px;
        height: 100px;
        padding-top: 60px;
    }

    .contact .box01 p {
        font-size: 20px;
        width: auto;
    }

    .contact .box02 ul li,
    .contact .box02 ul {
        width: auto;
    }

    .contact .box03 table {
        width: 100%;
        max-width: 800px;
    }

}

@media(max-width:640px) and (min-width: 320px) {
    .contact .warp {
        width: auto;
    }

    .contact blockquote p {
        text-align: left !important;
        font-size: 18px !important;
    }

    input[type="button"],
    input[type="submit"] {
        -webkit-appearance: none;
    }

    .contact .box01 p {
        font-size: 15px;
        padding: 60px 10px 0;
    }

    .contact h3 {
        line-height: 1.6;
        padding-bottom: 10px;
        font-size: 20px;
        padding-left: 0;
    }

    .contact .box03 table th,
    .contact .box03 table td {
        width: 90%;
    }

    .contact .box03 form input,
    .contact .box03 form textarea {
        width: 90%;
    }

    .contact p.btm_text {
        font-size: 16px !important;
    }

    .contact blockquote p {
        text-align: center;
        padding: 30px 10px 0;
    }

    #sub h2.def {
        width: auto;
        font-size: 22px;
        height: auto;
        padding: 40px 0;
        line-height: 1.6;
    }

    .contact .box01 p {
        font-size: 16px;
        padding: 50px 0px;
        width: auto;
    }

    .contact .box01 {
        height: auto;
    }

    .contact .box02 ul li,
    .contact .box02 ul {
        width: auto;
    }

    .contact .box03 table {
        width: 100%;
        max-width: 800px;
        overflow: hidden;
    }

    .contact .box02 ul {
        margin: 30px auto;
    }

    .contact .box02 ul li {
        font-size: 28px;
    }

    .contact .box03 table th,
    .contact .box03 table td {
        width: auto;
        display: block;
        font-size: 18px;
    }

    .contact .box03 table th {
        height: 26px;
        line-height: 26px;
        text-align: left;
    }

    .contact .box01,
    .contact .box02,
    .contact .box03 {
        padding: 0 10px;
    }

    .contact .box02 p {
        font-size: 16px;
    }

    .contact blockquote p {
        margin-top: 0;
        text-align: center !important;
    }

    .contact .box03 {
        margin-top: 30px;
    }

    .contact .box03 form input.yuubin,
    .contact .box03 form input.tel {
        width: 40px;
    }

}

@media(max-width:3000px) and (min-width: 320px) {
    .conf p.btm_text {
        display: none !important;
    }

    .input-area {
        width: 100%;
        max-width: 620px;
        margin: 50px auto 100px;
        text-align: center;
    }

    .mw_wp_form_input .input-area {
        max-width: 960px;

    }

    .input-area .button,
    a.backtop {
        width: 45% !important;
        padding: 0 !important;
        margin: 0 2%;
        height: 60px;
        line-height: 60px;
        display: inline-block;
        border: 0px solid #fff;
        border-radius: 4px;
        background-image: none !important;
        color: #000 !important;
        font-size: 24px !important;
        font-weight: bold;
    }

    a.backtop {
        display: block;
        margin: 0 auto !important;
        background: #ffcc00 !important;
        line-height: 60px !important;
    }

    .input-area .next,
    a.backtop {
        background: #ffcc00 !important;
        background-image: none !important;
    }

    .input-area .next span {
        font-size: 14px !important;
    }

    .input-area .back {
        background: #eee !important;
    }

    .input-area .button:hover,
    a.backtop:hover {
        opacity: 0.8;
    }

}

@media(max-width:640px) and (min-width: 320px) {
    .input-area {
        width: 100%;
        max-width: 280px;
        margin: 30px auto;
    }


    .input-area .button,
    a.backtop {
        width: 90% !important;
        padding: 0 !important;
        margin: 0 5%;
        height: 60px;
        line-height: 60px;
        display: inline-block;
        border: 0px solid #fff;
        border-radius: 4px;
        background-image: none !important;
        color: #000 !important;
        font-size: 22px !important;
        font-weight: bold;
    }

    .input-area .back {
        margin-bottom: 20px;
    }

}
/* 任意項目バッジ(.hissu と同形状のグレー版) */
.nini {
    background-color: #999;
    color: #fff;
    display: inline-block;
    float: right;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    padding: 1% 3%;
}

@media screen and (max-width: 767px) {
    .nini {
        padding: 2px 4px;
        line-height: 20px;
    }
}