/* =============================
フォーム
=============================*/
#contact {
background: #FAFAF7;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}

@media screen and (max-width: 699px) {
#contact {
background: #FAFAF7;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
}


.camp_bnr {
text-align: center;
}

@media screen and (max-width: 699px) {
.camp_bnr {
font-size: 0.12rem;
}
}

.camp_bnr img {
padding-bottom: 0.1rem;
}

@media screen and (max-width: 699px) {
.camp_bnr strong {
font-size: 0.12rem;
}
}

/* フォーム */
#contact form {
}

#contact form table {
font-size: 0.18rem;
width: 100%;
border: 5px solid #f15a24;
}

@media screen and (max-width: 699px) {
#contact form table {
font-size: 0.12rem;
}
}

#contact form tr {
background: #FFF;
}

#contact form tr:nth-child(even) {
background: #ECE8E4;
}

@media screen and (max-width: 699px) {
#contact form tr:nth-child(even) {
background: #FFF;
}
}

#contact form th {
width: 20%;
position: relative;
text-align: left;
box-sizing: border-box;
padding: 0.2rem;
vertical-align: top;
line-height: 2;
}

@media screen and (max-width: 699px) {
#contact form th {
width: 100%;
line-height: 1.8;
display: block;
padding: 0.1rem;
background: #ECE8E4;
font-size: 0.14rem;
}
}

#contact form th span {
position: absolute;
top:0.36rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
font-size: 0.12rem;
color: #FFF;
background: #FF0000;
padding: 0.04rem;
display: inline-block;
border-radius: 3px;
line-height: 1;
}

@media screen and (max-width: 699px) {
#contact form th span {
position: absolute;
top:0.24rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0.1rem;
font-size: 0.1rem;
color: #FFF;
background: #FF0000;
padding: 0.04rem;
display: inline-block;
border-radius: 3px;
line-height: 1.2;
}
}

#contact form td {
padding: 0.2rem;
}

@media screen and (max-width: 699px) {
#contact form td {
width: 100%;
line-height: 1.8;
display: block;
padding: 0.1rem;
box-sizing: border-box;
font-size: 0.14rem;
}
}

#contact form td div {
border-left: 1px dotted #CCC;
padding-left: 0.2rem;
}

@media screen and (max-width: 699px) {
#contact form td div {
border-left:0;
padding-left: 0;
}
}

#contact form td input {
font-size: 0.16rem;
padding: 0.1rem;
border: 1px solid #CCC;
box-sizing: border-box;
border-radius: 3px;
}

@media screen and (max-width: 699px) {
#contact form td input {
font-size: 0.12rem;
padding: 0.06rem;
}
}

/* select */
#contact form td select {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
font-family: "Roboto","游ゴシック","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",verdana,"メイリオ","Meiryo",sans-serif;
font-size: 0.16rem;
}

@media screen and (max-width: 699px) {
#contact form td select {
font-size: 0.12rem;
}
}

#contact form td select::-ms-expand {
display: none;
}

.cp_sl01 {
position: relative;
border: 1px solid #CCC;
border-radius:3px;
background: #ffffff;
width: 40%;
}

dd p.cp_sl01 {
position: relative;
border: 1px solid #CCC;
border-radius:3px;
background: #ffffff;
width: 24%;
display: inline-block;
}

.cp_sl01::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
}

@media screen and (max-width: 699px) {
.cp_sl01::before {
right: 0.4em;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #666666;
pointer-events: none;
}
}

.cp_sl01 select {
padding: 8px 38px 8px 8px;
color: #666666;
}

#contact form td dl {
display: flex;
width: 100%;
}

@media screen and (max-width: 699px) {
#contact form td dl {
display: block;
}
}

#contact form td dl:first-child {
padding-bottom: 0.2rem;
}

#contact form td dt {
padding-right: 0.1rem;
padding-top: 0.14rem;
}

@media screen and (max-width: 699px) {
#contact form td dt {
margin: 0;
padding-right: 0;
padding-top: 0;
font-size: 0.16rem;
font-weight: 700;
}
}

#contact form td dd {
max-width: 700px;
width: 80%;
}

@media screen and (max-width: 699px) {
#contact form td dd {
margin: 0;
width: 80%;
font-size: 0.14rem;
}
}


#contact form td dd p {
margin-left: 0.1rem;
}

@media screen and (max-width: 699px) {
#contact form td dd p {
margin-left: 0;
margin-right: 0;
}
}

#contact form td input.w20 {
width: 12%;
}

#contact form td input.w80 {
width: 80%;
}

@media screen and (max-width: 699px) {
#contact form td input.w80 {
width: 100%;
}
}

#contact form td textarea {
font-size: 0.16rem;
padding: 0.1rem;
border: 1px solid #CCC;
box-sizing: border-box;
border-radius: 3px;
width: 100%;
height: 150px;
line-height: 1.8;
font-family: "Roboto","游ゴシック","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",verdana,"メイリオ","Meiryo",sans-serif;
}

@media screen and (max-width: 699px) {
#contact form td textarea {
font-size: 0.14rem;
}
}

#contact form td ul {
line-height: 2;
}

@media screen and (max-width: 699px) {
#contact form td ul li label {
font-size: 0.14rem;
}
}


/* プライバシーポリシーの同意 */
.privacy_doui {
text-align: center;
padding: 0.3rem;
}

.privacy_doui a {
color: #333;
}

@media screen and (max-width: 699px) {
.privacy_doui label,
.privacy_doui label a {
font-size: 0.14rem;
}
}

/* 送信ボタン */
.submit_box  {
text-align: center;
}

.submit_box p {
font-size: 0.16rem;
padding-bottom: 0.16rem;
text-align: center;
}

@media screen and (max-width: 699px) {
.submit_box p {
font-size: 0.14rem;
}
}

.submit_box input.reset {
border: 0;
padding: 0.16rem;
font-size: 0.22rem;
color: #FFF;
background: #999;
border-radius: 4px;
box-shadow: 0 2px 0 rgba(0,0,0,0.2);
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
transition: all 0.3s ease;
-webkit-appearance: button;
min-width: 150px;
}

@media screen and (max-width: 699px) {
.submit_box input.reset {
font-size: 0.16rem;
}
}

.submit_box input.submit {
border: 0;
padding:0.16rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
font-size: 0.22rem;
color: #FFF;
background: rgba(241,90,36,1);
border-radius: 4px;
box-shadow: 0 2px 0 rgba(241,90,36,0.3);
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
transition: all 0.3s ease;
-webkit-appearance: button;
}

@media screen and (max-width: 699px) {
.submit_box input.submit {
font-size: 0.16rem;
}
}


.submit_box input.submit.disabled {
cursor: not-allowed;
background: rgba(0,0,0,0.5);
box-shadow: 0 2px 0 rgba(0,0,0,0.1);
color: #CCC;
}

.submit_box input:hover {
opacity: 0.7;
}


/* =============================
確認画面
=============================*/
#form_header {
background: url("../img/header_logo_bg.png") repeat-x 0 bottom;
padding-top: 0.2rem;
margin-bottom: 0.2rem;
}

@media screen and (max-width: 699px) {
#form_header {
background-size: 100% 1px;
}
}

#form_header img {
display: block;
margin: auto;
max-width: 250px;
}

@media screen and (max-width: 699px) {
#form_header img {
max-width: 150px;
}
}

#contact form td dt.confirm {
padding-top: 0;
}

#contact form .ERR {
color: red;
font-weight: 700;
}

#contact form .checkbox_list {
line-height: 1.8;
}

/* =============================
完了画面
=============================*/
.backBtn {
clear: both;
padding: 10px;
text-align: center;
}

.backBtn a {
padding: 15px;
padding-left: 25px;
padding-right: 25px;
box-shadow: 0 2px 0 rgba(0,0,0,0.2);
display: inline-block;
font-size: 0.2rem;
color: #FFF;
text-decoration: none;
border-radius: 4px;
background: #222;
}

@media screen and (max-width: 699px) {
.backBtn a {
font-size: 0.14rem;
}
}

.backBtn a i {
padding-right: 10px;
}