@charset "utf-8";

/* ==================================================================
	contact.css
	
=================================================================== */

.contents form {
    margin-bottom: 213px;
    max-width: 100%;
}

.contents .leadtext {
	margin-bottom: 60px;
}

.contents .buttonStyle button {
    text-align: center;
    letter-spacing: 0.05em;    
}

/* --------------------------------
   □ tableStyle
-------------------------------- */ 
form .tableStyle {
	border: 0;
	width: 100%;
	margin-bottom: 60px;
}

form .tableStyle tr,
form .tableStyle tr:last-child {
    border: none;
}

    form .tableStyle th,
    form .tableStyle td {
        border: 0;
        padding: 0 0 17px 0;
        width: 100%;
        display: block;
        letter-spacing: 0.05em;
    }

	form .tableStyle td {
        padding-bottom: 36px;
	}

        form .tableStyle tr:last-child td {
            padding-bottom: 0;
        }

    form .tableStyle th span {		
		display: inline-block;
		background-color: rgba(255,255,255,0.5);
		color: #fff;
		margin-left: 12px;
		font-size: 87.5%;
        border-radius: 4px; 
        padding: 3px 8px;
        line-height: 1;
	}

	form .tableStyle td textarea {
		box-sizing: border-box;
		width: 100%;
	}
	
.contents p.error{
	display: block;
    background: #F00;    
	background: #347ABC;
	color: #fff;
	padding: 10px 18px;
	margin: 10px 0;
	font-size: 87.5%;
}

/* --------------------------------
   □ check
-------------------------------- */ 
#check p.error {
    margin-bottom: 60px;
}

#check table.tableStyle th {  
    display: table-cell;
    width: 35%;
}

#check table.tableStyle td {  
    display: table-cell;
}

.checktext {
    text-align: center;
    margin-bottom: 60px;
}

#check .submitArea li {
    display: inline-block;
    width: 48%;    
}

#check .submitArea li >* {
    text-align: center;
    letter-spacing: 0.05em;
}
/* 
    #check .submitArea li:first-child a {
       background: #1F232A; 
    }

    #check .submitArea li:first-child a:hover {
       background: #2D3440;
    }
 */ 

/* --------------------------------
   □ complete
-------------------------------- */
.complete {
    margin-bottom: 220px;
}

.complete h3 {
    font-size: 212.5%;
    margin-bottom: 60px;
    text-align: center;
}

.complete p.text {
	margin-bottom: 80px;
}

.complete .buttonStyle a {
    text-align: center;
}

@media (max-width: 1300px) and 
(min-width: 768px) {
    
   .contents main .chapter {
        width: auto;
        margin-left: 2%;
        margin-right: 2%;
    }
    
    .contents main .inner {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
}	

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

    .contents main .inner {
        margin-right: 0;
        margin-left: 0;
    }
        
    /* --------------------------------
       □ .tableStyle
    -------------------------------- */ 
    form .tableStyle th,
    form .tableStyle td{
        display:block;
        border:0;
        padding:8px 0 15px;
    }
    form .tableStyle th{
        padding-bottom:2%;
        width:auto;
    }
        form .tableStyle th span{
            float:none;
        }        

    form .tableStyle td p.error { 
        font-size: 92.85%;
    }
        
    /* --------------------------------
       □ check
    -------------------------------- */
    #check p.error {
        margin-bottom: 30px;
    }

    #check form .tableStyle th,
    #check form .tableStyle td {
        display: block;
        border: 0;
        width: 100%;
        padding: 8px 0;
    }
        
    #check form .tableStyle td {
        padding-top: 0;
        padding-bottom: 20px;
    }

    .checktext {
        margin-bottom: 30px;
        font-size: 87.5%;
        text-align: left;
    }   
        
    #check .submitArea li {
        width: auto;
        display: block;
    }
        
        #check .submitArea li:first-child {
            margin-right: 0;
            margin-bottom: 25px;
        }
    
    /* --------------------------------
       □ complete
    -------------------------------- */
    .complete h3 {
        font-size: 162.5%;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .complete p.text {
        text-align: left;
        font-size: 87.5%;
    }

}