@charset "utf-8";

/* ************************************************ 
*	お問い合わせ
* ************************************************ */	
.contact-block {
width: 90%;
max-width: 1000px;
padding: 0 0 100px 0;
margin: 0 auto;
}
.contact-block table.contact,
.contact-block table.contact-input {
width: 100%;
margin: 0 0 50px 0;
padding: 0 0 0 0;
border-top: 1px #999 solid;
border-collapse: collapse;
border-spacing: 0;
}

.contact-block table.contact th,
.contact-block table.contact-input th {
font-weight: 500;
text-align: left;
padding: 10px;
white-space: nowrap; 
vertical-align: middle;
border-bottom: 1px #999 solid;
width:25%;
background-color:#efefef;
}
.contact-block table.contact th.last,
.contact-block table.contact-input th.last {
vertical-align: top;
}
.contact-block table.contact td,
.contact-block table.contact-input td {
text-align: left;
padding: 10px;
font-weight: 500;
vertical-align: middle;
border-bottom: 1px #999 solid;
}

.contact-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.contactlink,
.confirmlink {
margin: 0 0 0 20px;
padding: 0;
text-align:center;
background-color:#ffcd4c;
width: 250px;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}
.contact-backlink {
margin: 0 0 0 20px;
padding: 0;
text-align:center;
background-color:#fff;
width: 250px;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}
.contactlink a,
.confirmlink a,
.contact-backlink a{
color: #333;
display: block;
padding: 11px 0 10px 0;
line-height: 200%;
text-decoration: none;
border: 1px solid #333;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}
.contactlink a:hover,
.confirmlink a:hover,
.contact-backlink a:hover{
color: #fff;
background-color:#333;
border: 1px solid #333;
border-radius: 50vh; /* CSS3 */
 -webkit-border-radius: 50vh; /* Firefox */
 -moz-border-radius: 50vh; /* Safari,Chrome */
}


input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    width: 98%;
    padding: 10px 1%;
}


/* ************************************************ 
*	申し込み完了
* ************************************************ */	
.thanks-block {
width: 90%;
max-width: 960px;
padding: 50px 0 150px 0;
margin: 0 auto;
}
.thanks-box {
margin: 0 0 100px 0;
padding: 0 0 0 0;
}
.thanks-box p{
text-align: center;
margin: 0 auto;
padding: 0;
}



/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){
}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.contact-block { padding: 0 0 50px 0; }
.thanks-block { padding: 50px 0 80px 0; }
}


/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.contact-block { padding: 0 0 20px 0; }
.contact-block table.contact th,
.contact-block table.contact-input th {
display:block;
width: 94%;
padding: 10px 3%;
border-bottom: none;
text-align:left;
font-weight:500;
font-size: 4vw;
}
.contact-block table.contact-input td.textline {
display:block;
width: 94%;
padding: 15px 3%;
}
.contact-block table.contact td {
display:block;
width: 94%;
padding: 15px 3%;
font-size: 4vw;
}
.contact-block table.contact-input td {
display:block;
width: calc(100% - 2px);
padding: 15px 0;
font-size: 4vw;
}

.contact-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contactlink,
.contact-backlink {
width: calc(47.5% - 2px);
margin: 0;
}
.confirmlink {
width: calc(100% - 2px);
margin: 0;
}
.contactlink a,
.confirmlink a,
.contact-backlink a{ font-size: 4.5vw; }

.thanks-block { padding: 0; }
.thanks-box { margin: 0 0 50px 0; }
.thanks-box p{
text-align: left;
margin: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    width: 96%;
    padding: 10px 2%;
}

}