@charset "UTF-8";


/*===============================================
●共通
===============================================*/

    

/*===============================================
●画面の横幅が641px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 641px) {

/* !サブページ　タイトル */
    #sub-page-title > h1 > img {
        width: 138px;
    }
    

/* box01 */
    #box01 {
        width: 100%;
        margin:30px auto 0 auto;
        text-align:center;
    }
    
    #box01 > p:nth-of-type(1) {
        margin: 0;
        font-size: 18px;
    }
    
    #box01 > p:nth-of-type(2) {
        margin: 20px 0 0 0;
    }
    
    #box01 > p:nth-of-type(2) > img {
        width: 261px;
    }
    
    #box01 > p:nth-of-type(3) {
        margin: 10px 0 0 0;
        font-size: 14px;
    }
    
    #box01 > p:nth-of-type(4) {
        margin: 60px 0 0 0;
    }
    
    #box01 > form > p {
        margin: 40px 0 0 0;
        font-size: 14px;
    }
    
    #box01 > form > p a {
        text-decoration: underline;
    }
    
    #box01 > form > div:nth-of-type(1) {
        width:800px;
        margin: 30px auto 0 auto;
    }
    
    table　{
        width:800px;
        margin: 0 auto;
    }
	
    table th{
        width:215px;
        padding:20px 0 18px 0;
        box-sizing:border-box;
        vertical-align:top;
        border-top: #f3ece0 1px solid;
	}
			
    table th span{
        float: right;
        width:38px;
        margin: 4px 0 0 0;
        padding:1px 0 0 0;
        text-align:center;
        font-size: 13px;
        color:#FFF;
        background-color:#b62519;
        box-sizing:border-box;
        line-height: 150%;
	}
    
    table td{
        width: 585px;
        padding:20px 0 18px 30px;
        border-top: #f3ece0 1px solid;
        text-align: left;
	}
    
    table.table-check td{
        padding:27px 0px 15px 0;
        font-size: 16px;
	}
	
    table td input[type="text"]{
        width:505px;
        height: 30px;
        padding-left:10px;
        font-size: 16px;
        border-radius: 0;
	}
    	
    table td textarea{
        width:505px;
        padding: 10px;
        font-size: 16px;
        border-radius: 0;
	}
    
    
    #box01 > form > div:nth-of-type(2) {
        width: 100%;
        margin-top: 40px;
        text-align: center;
    }
    
    #box01 > form > div:nth-of-type(2) > ul {
        display: inline;
    }
    
    #box01 > form > div:nth-of-type(2) > ul > li {
        display: inline-block;
    }

    input.button01 {
        width:300px;
        height:50px;
        color:#b09a4d;
        background-color:#FFF;
        border:#b09a4d 1px solid;
    }

    input.button01:hover {
        color:#FFF;
        background-color:#b09a4d;
        border:none;
    }
    
    input.button02 {
        width:140px;
        height:50px;
        color:#b09a4d;
        background-color:#FFF;
        border:#b09a4d 1px solid;
    }
    
    input.button02:hover {
        color:#FFF;
        background-color:#b09a4d;
        border:none;
    }
    
    .tmp-margin {
        margin: 60px auto 120px auto !important;
    }

    
/* お問い合わせ完了画面 */
    #contact-comp{
        width:800px;
        margin:60px auto 200px auto;
        padding: 60px 0;
        text-align:center;
        background-color: #FFF;
        border: #cccccc double;
	}

    #contact-comp p:nth-of-type(1){
        margin: 0 0 30px 0;
        text-align: center;
        font-size: 18px;
	}
    
/* プライバシーポリシー */
    #box02 {
        width: 960px;
        margin:60px auto 120px auto;
        padding: 20px 40px;
        text-align:left;
        background-color: #FFF;
        border: #cccccc double;
    }
    
    #box02 p:nth-of-type(1) {
        font-size: 21px;
        margin: 0 0 15px 0;
    }
    
 
/* リンクの反転 */
    .link {
        border: #b09a4d 1px solid;
        width: 360px;
        height: 50px;
    }
    
    .link:hover:after {
        background-color: #FFF;
    }
    
    .link:after {
        width: 33px;
        right: 21px;
        bottom: 20px;
        background-color: #b09a4d;
    }
    
    .link:before {
        background-color: #b09a4d;
    }
    
    .link span.wrap:before {
        background-image: url(../../images/contact/arr_w.png);
        /*background-image: url(../images/common/arr_w.svg);*/
        width: 15px;
        height: 5px;
        background-size: 15px 5px;
        right: 20px;
        bottom: 20px;
    }
    .link span.wrap:after {
        background-image: url(../../images/contact/arr.png);
        /*background-image: url(../images/common/arr.svg);*/
        width: 15px;
        height: 5px;
        background-size: 15px 5px;
        right: 20px;
        bottom: 20px;
    }
    
    .link span.wrap span {
        padding: 10px 0 0 0;
        font-size: 16px;
        color: #b09a4d;
    }

    
}

/*===============================================
●画面の横幅が640px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 640px) {	

/* !サブページ　タイトル */
    #sub-page-title > h1 > img {
        width: 99px;
    }
    
    
/* box01 */
    #box01 {
        width:90%;
        margin:35px auto 0 auto;
        text-align:center;
    }
    
    #box01 > p:nth-of-type(1) {
        margin: 0;
    }
    
    #box01 > p:nth-of-type(2) {
        margin: 10px 0 0 0;
    }
    
    #box01 > p:nth-of-type(2) img {
        width: 190px;
    }
    
    #box01 > p:nth-of-type(3) {
        margin: 10px 0 0 0;
        font-size: 12px;
    }
    
    #box01 > p:nth-of-type(4) {
        margin: 45px 0 0 0;
        text-align: left;
    }
    
    #box01 > form > p {
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    
    #box01 > form > p a {
        text-decoration: underline;
    }
    
    #box01 > form > div:nth-of-type(1) {
        width:100%;
        margin: 20px auto 0 auto;
    }
    
    table{
        width:100%;
        }

    table th{
        display:block;
        width:100%;
        padding:10px 0 0 0;
        box-sizing:border-box;
        border-top: #f3ece0 1px solid;
        }
    
    table th span{
        display: inline-block;
        width:30px;
        margin:0 0 0 10px;
        padding:1px 0 0 0;
        font-size:10px;
        text-align:center;
        color:#FFF;
        background-color:#b62519;
        box-sizing:border-box;
        line-height: 150%;
        }

    table td{
        display:block;
        width:100%;
        padding:7px 0 20px 0;
        box-sizing:border-box;
        text-align: left;
    }

    table input[type="text"],
    table textarea{
        width:100%;
        padding:5px;
        font-size: 16px;
    }
    
    #btn_position {
        width: 280px;
        margin:30px auto 0px auto;
        text-align:center;
    }
    
    #box01 > form > div:nth-of-type(2) {
        width: 280px;
        margin:30px auto 0px auto;
        text-align:center;
    }
    
    #box01 > form > div:nth-of-type(2) > ul {
        width: 280px;
    }
    
    #box01 > form > div:nth-of-type(2) > ul > li {
        width: 280px;
    }

    
    input.button01 {
        width:200px;
        height:45px;
        color:#b09a4d;
        background-color:#FFF;
        border:#b09a4d 1px solid;
    }

    input.button02 {
        width:70px;
        height:45px;
        color:#b09a4d;
        background-color:#FFF;
        border:#b09a4d 1px solid;
    }
    
    .tmp-margin {
        margin: 40px auto 60px auto !important;
    }

    /* お問い合わせ完了画面 */
    #contact-comp{
        width:90%;
        margin:40px auto 100px auto;
        padding: 30px 10px;
        text-align:center;
        background-color: #FFF;
        border: #cccccc double;
	}

    #contact-comp p:nth-of-type(1){
        margin: 0 0 20px 0;
        text-align: center;
        font-size: 16px;
	}
    
    #contact-comp p:nth-of-type(2){
        text-align: left;
	}

    
/* box02 */
    #box02 {
        width: 90%;
        margin:28px auto 60px auto;
        padding: 15px 20px;
        text-align:left;
        border: #cccccc double;
    }
    
    #box02 p:nth-of-type(1) {
        font-size: 16px;
        margin: 0 0 10px 0;
    }
    
    
/* リンクの反転 */
    a.link {
        border: #b09a4d 1px solid;
        width: 280px;
        height: 50px;
    }
    
    a.link:after {
        width: 25px;
        right: 21px;
        bottom: 20px;
        background-color: #b09a4d;
    }
    
    a.link span.wrap:after {
        background-image: url(../../images/contact/arr.png);
        /*background-image: url(../images/common/arr.svg);*/
        width: 9px;
        height: 3px;
        background-size: 9px 3px;
        right: 20px;
        bottom: 20px;
    }
    
    a.link span.wrap span {
        padding: 10px 0 0 0;
        font-size: 14px;
        color: #b09a4d;
    }
    
    
}