/* =============================
メインビジュアル
=============================*/
.contactform_mv {
background-image: url("../img/privacy_mv.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

.contactform_mv h1 {
color: #fff;
font-size: 0.48rem;
font-weight: 100;
}
@media screen and (max-width: 699px) {
}


/* =============================
リード
=============================*/
.contactform_top {
margin-bottom: 1rem;
}


.contactform_top p {
text-align: center;
line-height: 2;
}
/* =============================
個人情報
=============================*/
.contactform_privacy_rule {
margin-top: 0.4rem;
}


.contactform_privacy_rule h3 {
font-size: 0.18rem;
font-weight: bold;
text-align: center;
margin-bottom: 0.2rem;
}


.contactform_privacy_rule_box {
overflow: scroll;
height: 2.35rem;
background: #1a1a1a;
border: 1px solid #333333;
padding: 0.2rem;
overflow-x: hidden;
}


.contactform_privacy_rule_box p {
margin-bottom: 0.2rem;
line-height: 1.6;
}


/* =============================
フォーム
=============================*/
#contactform {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
color: #fff;
}
@media screen and (max-width: 699px) {
#contactform {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
}


/* フォーム */
#contactform form table {
font-size: 0.18rem;
width: 100%;
}
@media screen and (max-width: 699px) {
#contactform form table {
font-size: 0.12rem;
}
}


#contactform form tr {
background: rgba(0,209,204,0.1);
}


#contactform form tr:nth-child(even) {
background: rgba(0,209,204,0.2);
}
@media screen and (max-width: 699px) {
}


#contactform form th {
width: 25%;
position: relative;
text-align: left;
box-sizing: border-box;
padding: 0.2rem;
vertical-align: top;
line-height: 2;
color: #fff;
}
@media screen and (max-width: 699px) {
#contactform form th {
width: 100%;
line-height: 1.8;
display: block;
padding: 0.1rem;
font-size: 0.14rem;
}
}


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


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


#contactform form td div {
padding-left: 0.2rem;
	line-height: 1.7;
}
@media screen and (max-width: 699px) {
#contactform form td div {
border-left:0;
padding-left: 0;
}
}


#contactform form td input {
font-size: 0.16rem;
padding: 0.1rem;
border: 1px solid #CCC;
box-sizing: border-box;
border-radius: 3px;
background: #000;
color: #fff;
}
@media screen and (max-width: 699px) {
#contactform form td input {
font-size: 0.12rem;
padding: 0.06rem;
}
}


/* select */
#contactform form td select {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: #000;
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;
font-weight: bold;
color: #fff;
}
@media screen and (max-width: 699px) {
#contactform form td select {
font-size: 0.12rem;
}
}


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


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


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;*/
color: #4d4d4d;
}


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


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

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

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

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

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


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

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

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

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

#contactform form td input.w100 {
width: 100%;
}

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

#contactform 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;
background: #000;
color: #fff;
}


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

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

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


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

.privacy_doui p {
text-align: center;
margin-bottom: 0.3rem;
}

.privacy_doui label {
font-size: 0.18rem;
font-weight: bold;
}

.checkbox-input{
display: none;
}

.checkbox-parts{
padding-left: 20px;
position:relative;
margin-right: 20px;
}

.checkbox-parts::before{
content: "";
display: block;
position: absolute;
top: 0;
left: -10px;
width: 20px;
height: 20px;
border: 1px solid #00d1cc;
}

.checkbox-input:checked{
color: #000;
background: #00d1cc
}

.checkbox-input:checked + .checkbox-parts::before{
border: 1px solid #00d1cc;
background: #00d1cc;
}

.checkbox-input:checked + .checkbox-parts::after{
content: "";
display: block;
position: absolute;
top: 0;
left: -5px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #000;
border-right: 3px solid #000;
}
@media screen and (max-width: 699px) {
.privacy_doui label,
.privacy_doui label a {
font-size: 0.14rem;
}
}


/* 送信ボタン */
.submit_box  {
margin-top: 0.2rem;
position: relative;
margin: 0 auto;
	text-align: center;
}

.submit_box p {
	text-align: center;
	padding-bottom: 0.1rem;
}

.submit_box button.submit {
display: block;
box-sizing: border-box;
padding: 15px 10px;
text-decoration: none;
font-size: 0.14rem;
position: relative;
letter-spacing: 0.06;
width: 100%;
color: #1a1a1a;
background: #00d1cc;
text-align: left;
border: initial;
max-width: 210px;
margin: auto;
}

.submit_box button.submit:hover {
background: #FFF;
color: #00d1cc;
}
@media screen and (max-width: 699px) {
.submit_box button.submit {
font-size: 0.16rem;
}
}

/* 送信確認画面用 */
.submit_box input.submit {
display: inline-block;
box-sizing: border-box;
padding: 15px 10px;
text-decoration: none;
font-size: 0.16rem;
font-weight: 700;
position: relative;
letter-spacing: 0.06;
width: 100%;
color: #FFF;
background: #00d1cc;
text-align: center;
border: initial;
max-width: 210px;
margin-left: 0.1rem;
margin-right: 0.1rem;
	margin-bottom: 0.1rem;
cursor: pointer;
}

.submit_box input.reset {
display: inline-block;
box-sizing: border-box;
padding: 15px 10px;
text-decoration: none;
font-size: 0.16rem;
font-weight: 700;
position: relative;
letter-spacing: 0.06;
width: 100%;
color: #FFF;
background: #666;
text-align: center;
border: initial;
max-width: 210px;
margin-left: 0.1rem;
margin-right: 0.1rem;
		margin-bottom: 0.1rem;
cursor: pointer;
}

/*アイコン*/
.submit_box button.submit i {
width: 0.35rem;
height: 0.06rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0.1rem;
transition: width 0.3s ease, right 0.3s ease;
background: url(../img/arrow_black.png) no-repeat right center;
background-size: auto 100%;
}

.submit_box button.submit:hover i {
width: 0.25rem;
right: 0.06rem;
background: url("../img/arrow_green.png") no-repeat right center;
background-size: auto 100%;
}



.submit_box button.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;
}



/* =============================
確認画面
=============================*/
.contactform_header {
margin-bottom: 0.2rem;
padding-top: 0.3rem;
}

.contactform_header p {
text-align: center;
}

@media screen and (max-width: 699px) {
.contactform_header p {
text-align: left;
}
}

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

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

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

/* =============================
完了画面
=============================*/
.complete_header {
margin-top: 0.4rem;
margin-bottom: 0.4rem;
}

.complete_header strong {
font-size: 0.2rem;
}

.complete_header p{
text-align: center;
}

/*ボタン*/
.complete_btn {
margin: 0 auto;
}