@charset "utf-8";

/* ==================================================================

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

.contents .accentArea{
    background-image: url(../../images/contact/title_bg.jpg);
}
.contents section h2.title{
    font-size: 200%;
    background: url(../../images/common/h2_line.svg) 0 100% no-repeat;
    padding-bottom: 40px;
    margin-bottom: 50px;
}
.contents section h2.title .en{
    font-size: 46%;
    margin-bottom: 12px;
    display: block;
    color: #7BAAC0;
}
.contents section h2.title .ruby{
    display: block;
    color: #2E3B92;
}

/* --------------------------------
   □ お電話からのお問い合わせ
-------------------------------- */ 
#telInfo .chapter{
    padding-top: 0;
}
#telInfo dl {
    background-color: #F7F7FA;
    display: table;
    box-sizing: border-box;
    padding: 72px;
    color: #2E3B92;
    width: 100%;
    box-sizing: border-box;
}
#telInfo dl dt {
    display: table-cell;
    vertical-align: middle;
    font-size: 125%;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
}
#telInfo dl dd {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#telInfo dl dd .telArea {
    display: inline-block;
}
#telInfo dl dd .num {
    font-size: 218%;
    padding-left: 42px;
    background: url(../../images/contact/iconTel.svg) 0 50% no-repeat;
    display: block;
    line-height: 1.2;
    font-weight: 500;
}
#telInfo dl dd .reception {
    font-size: 81%;
    display: block;
}
#telInfo dl dd .faxArea {
    display: inline-block;
    font-size: 130%;
    padding-left: 24px;
    margin-left: 16px;
    background: url(../../images/contact/slash.svg) 0 50% no-repeat;
    font-weight: 500;
    vertical-align: top;
    padding-top: 10px;
}

@media only screen and
(max-width : 767px) {
    
    #telInfo dl {
        padding: 10%;
    }
    #telInfo dl dt {
        display: block;
        font-size: 116%;
        margin-bottom: 20px;
    }
    #telInfo dl dd {
        display: block;
    }
    #telInfo dl dd .num {
        font-size: 180%;
        padding-left: 32px;
        background-size: 24px;
        line-height: 1.2;
    }
    #telInfo dl dd .faxArea {
        padding-left: 0;
        margin-left: 0;
        background: none;
        padding-top: 0;
    }
}

/* 確認画面では非表示 */
.confirmed#telInfo {
    display: none;
}




/* --------------------------------
   □ フォームからのお問い合わせ
-------------------------------- */ 

.contents p.error{
    background: #EE2260;
    margin-top: 10px;
    font-size: 88.88%;
    color: #fff;
    padding: 8px 16px;
}
.contents p.error.message,
.contents main .message {
	margin-bottom: 30px;
    text-align: left;
}
.contents main .chapter p.text-center,
.contents main .chapter p.checktext{
	text-align: center;    
    line-height: 1.8;
}

.contents main .chapter p.checktext{
	margin-bottom: 50px;
}

/* --------------------------------
   □ tableStyle
-------------------------------- */ 

form table.tableStyle {
	border:0;
	width:100%;
	margin: 40px 0;    
}
form table.tableStyle tr,
form table.tableStyle tr:last-child {
    border: none;
}
form table.tableStyle th, 
form table.tableStyle td {
    padding: 15px 0;
}
form table.tableStyle th{
    padding: 20px 20px 20px 0;
    width: 28%;
    min-width: 220px;
    font-weight: 700;
    color: #483C34;
    letter-spacing: 0.05em;
    border: none;
}
form table.tableStyle td{
}

form table.tableStyle th span.req{
    border-radius: 4px;
    color: #7BAAC0;
    background-color: #fff;
    border: 1px solid #7BAAC0;
    font-size: 75%;
    font-weight: 500;
    padding: 0 10px;
    text-align: center;
    float: right;
}
form table.tableStyle td input.short{
    box-sizing:border-box;
    width:30%;
}	
form table.tableStyle td select{
    box-sizing:border-box;
    width:40%;
}	
form table.tableStyle td input.middle{
    box-sizing:border-box;
    width:100%;
}
form table.tableStyle td textarea{
    box-sizing:border-box;
    width:100%;
    line-height: 1.8;
}

form table.tableStyle .addressBox {
    display: none;    
}
form table.tableStyle .addressBox span {
    display: block;
    padding: 10px 0;
}
.confirmed form table.tableStyle .addressBox {
    display: block;    
}
.confirmed form table.tableStyle .addressBox span {
    display: block;
    padding: 10px 0 0;
}

form table.tableStyle td p.buttonStyle{
    display: inline-block;
    margin-left: 20px;
}
form table.tableStyle td p.buttonStyle a{
    padding: 8px 40px;
    font-size: 93.75%;
    width: 100%;
    background: #a67f63;
    color: #fff;
    box-shadow: none;
    border: none;
}

ul.submitArea{
	text-align:center;
}
    ul.submitArea li{
        display:inline-block;
        margin:0 20px;
        width: calc( 50% - 40px);
        max-width: 360px;
    }
    ul.submitArea li.buttonStyle button,
    ul.submitArea li.buttonStyle a{
        background:#2E3B92;
        border: none;
        color: #fff;
    }
    ul.submitArea li.buttonStyle button:hover,
    ul.submitArea li.buttonStyle a:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .contents .buttonStyle button span:before, .contents .buttonStyle a span:before {
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

ul.submitArea li.buttonStyle.bg_gray button,
ul.submitArea li.buttonStyle.bg_gray a {
        background-color: #ACACAC;    
    }

#submitButton.disabled {
    background: #666;
    border: #666;
    opacity: 0.5;
}
    #submitButton.disabled:hover{
        color: #fff;
    }
    #submitButton.disabled span:hover{
        background: none;
        color: #fff;	
    }
    #submitButton.disabled span:before{
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

.contents .complete{
    margin: 80px 0;
}
.contents .complete h3{
    margin-bottom:40px;
    color: #2E3B92;
    font-size: 200%;
}
.contents .complete p.text{
    margin-bottom:60px;
}

td label {
	accent-color: #8AC682;
    padding-right: 30px;
    line-height: 2;
}
    td label:last-child {
        padding-right: 0;
    }

input[type="radio"] {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 3px 0;
}
    input[type="radio"]::before, 
    input[type="radio"]::after{
        content: "";
        display: block;
        border-radius: 50%;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
    }
    input[type="radio"]::before {
        background-color: #fff;
        border: 1px solid #c2c1c1;
        height: 20px;
        width: 20px;
        left: 0px;
    }
    input[type="radio"]::after {
        background-color: #8AC682;
        opacity: 0;
        height: 14px;
        width: 14px;
        left: 4px;
    }
    input[type="radio"]:checked::after {
        opacity: 1;
    }

/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and 
(min-width: 768px) {

    #contact main .chapter{
        width:auto;
        margin-left:4%;
        margin-right:4%;
    }

    /* --------------------------------
    □ お電話からのお問い合わせ
    -------------------------------- */ 

    #telInfo dl {
        padding: 30px 2%;
    }
    #telInfo dl dd.tel {
        font-size: 212.5%;
    }
    #telInfo dl dd.hrs {
        font-size: 87.5%;
    }

    /* --------------------------------
    □ フォームからのお問い合わせ
    -------------------------------- */ 

    ul.submitArea li {
        max-width: 300px;
    }
}

/* SP用
-------------------------------------------- */
@media only screen and
(max-width : 767px) {
	
    #contact main .chapter {
        padding: 60px 0;
        max-width: 92%;
    }

    /* --------------------------------
    □ お電話からのお問い合わせ
    -------------------------------- */ 

    #telInfo dl:first-child {       
        margin-bottom: 30px;
    }

    #telInfo dl dd.tel {
        font-size: 193.75%;
    }
    #telInfo dl dd.hrs {
        font-size: 87.5%;
    }

    /* --------------------------------
    □ フォームからのお問い合わせ
    -------------------------------- */ 

    .contents main .message{
        margin-bottom: 30px;
    }
    .contents  p.text {
        margin-bottom: 25px;
    }
    .contents main .chapter p.center,
    .contents main .chapter p.message, 
    .contents main .chapter p.checktext {
        text-align: left;
        font-size: 100%;
    }
    .contents main .chapter p.checktext {   
        margin-bottom: 30px;
    }

    /* --------------------------------
       □ tableStyle
    -------------------------------- */ 
    td label {
        display: block;
    }
    form table.tableStyle {  
        margin: 30px 0;
    }
    form table.tableStyle th,
    form table.tableStyle td{
        display:block;
        border:0;
        width: 100%;
        font-size: 100%;
    }
    form table.tableStyle th {
        width:auto;
        padding: 4% 0 0 0;
        min-width: inherit;
    }
    form table.tableStyle td {
        display:block;
        border:0;
        padding: 2% 0 6%;
        width: 100%;
        font-size: 100%;
    }
        form table.tableStyle tr:last-child td {
            padding: 4% 0 0;
        }

    form table.tableStyle th span.req {
        float:none;
        display: inline-block;
        margin-left: 10px;
        font-size: 87.5%;
    }
    form table.tableStyle td select,
    form table.tableStyle td input.short,
    form table.tableStyle td input.middle {
        width:100%;
        font-size: 93.75%;
    }

    .contents main#lower form table.tableStyle td textarea {
        line-height: 1.8;
    }

    ul.submitArea{
        margin: 0;
    }
    ul.submitArea li{
        margin: 0 auto;
        width: 100%;
        max-width: 388px;
        margin-bottom: 30px;
    }
        ul.submitArea li:last-child{
            margin-bottom: 0;
        }

    .checktext{
        margin-bottom:3%;
        padding-top:3%;
    }

    .contents main .complete p.text{
        margin-bottom:40px;
        text-align: left;
    }

}