@charset "utf-8";

div#contents_wrap { padding: 35px 0; text-align: left;}
div#wrapin { margin: 0 auto; width: 94%;}
br.ds_no { display: none;}
header#contact_h { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px dotted #AEAEAE;}
header#contact_h h2 { font-size: 70%;}
header#contact_h h2 img { height: 15px;}
header#contact_h h3 { margin-top: 25px; font-size: 90%;}
header#contact_h h4 { margin: 25px 0 0; font-size: 80%;}
header#contact_h p { margin-top: 25px; color: #666; text-align: left; font-size: 75%; line-height: 150%;}
header#contact_h h4 + p { margin: 0;}
header#contact_h li { margin: 15px 0 0; padding: 0 0 0 1em; color: #666; text-indent: -1em; font-size: 65%;}
header#contact_h h4 span { display: inline-block; margin: 0 5px 0 0; height: 13px;}
header#contact_h h4 span img { height: 100%; vertical-align: middle;}
header#contact_h a { text-decoration: underline;}
header#contact_h a:hover { text-decoration: none;}
header#contact_h dl { margin: 15px 0 0; color: #666; font-size: 75%;}
header#contact_h .post { color: #333; text-align: left; font-weight: bold; font-size: 75%;}
header#contact_h .conf { color: #333; text-align: left; font-weight: bold; font-size: 75%;}
header#contact_h .fin { color: #333; text-align: left; font-weight: bold; font-size: 75%;}
span.hissu { padding-left: 4px; color: #f00;}
header#contact_h .btn { position: absolute; right: 0; bottom: 20px; width: calc(50% - 5px);}
header#contact_h .btn a { position: relative; display: block; padding: 10px; border: 2px solid #cbcbcb; background: #eaeaea; vertical-align: middle; text-align: left; text-decoration: none; font-weight: bold; font-size: 80%; line-height: 1;}
header#contact_h .btn a:after { position: absolute; top: 50%; right: 10px; margin: -5px 0 0; width: 6px; height: 6px; border-top: 2px solid #999; border-right: 2px solid #999; content: ""; transform: rotate(45deg);}
header#contact_h .btn i { display: inline-block; margin: 0 .5em 0 0; width: 15%; vertical-align: middle;}
header#contact_h .btn i img { width: 100%; vertical-align: sub;}

/*件名*/
section#cnt_subject,
section#cnt_subject2 { padding: 0 0 0 2%;}
section#cnt_subject h3,
section#cnt_subject2 h3 { margin-bottom: 10px; color: #666; font-size: 75%;}
section#cnt_subject p,
section#cnt_subject2 p { font-weight: bold; font-size: 75%; line-height: 230%;}
section#cnt_subject p input,
section#cnt_subject2 p input { margin-right: 8px;}

/*個人情報*/
dl#cnt_privacy,
dl#cnt_privacy2 { margin-top: 25px; border-top: 1px dotted #AEAEAE;}
dl#cnt_privacy dt,
dl#cnt_privacy dd,
dl#cnt_privacy2 dt,
dl#cnt_privacy2 dd { font-size: 75%; line-height: 1.5;}
dl#cnt_privacy dt .exp,
dl#cnt_privacy dd .exp,
dl#cnt_privacy2 dt .exp,
dl#cnt_privacy2 dd .exp { margin: 10px 0 0; color: #666; font-size: 90%;}
dl#cnt_privacy2 dt { color: #666;}
dt.con1,
dt.con2 { font-size: 75%;}
dt.con1 { padding: 15px 2% 10px;}
dd.con1 { padding: 0px 2% 15px;}
dt.con2 { padding: 15px 2% 0;}
dd.con2 { padding: 10px 2% 0;}
dt.con3 { padding: 15px 2% 10px;}
dd.con3 { padding: 0 2% 20px;}
dl#cnt_privacy dd.con1,
dl#cnt_privacy2 dd.con1 { border-bottom: 1px dotted #AEAEAE;}
dl#cnt_privacy dd input { padding: 2px; width: 98%;}
dl#cnt_privacy dd textarea { padding: 2px; width: 96%; height: 200px;}

/*個人情報保護方針*/
div#privacypolicy { clear: both; border-top: 1px dotted #AEAEAE;}
div#privacypolicy section { overflow: auto; margin: 40px 5px 0 5px; padding: 20px; height: 130px; border: 1px solid #CBCBCB;}
div#privacypolicy section h4 { margin-bottom: 20px; font-size: 85%; line-height: 110%;}
div#privacypolicy section h5 { margin-bottom: 8px; font-size: 80%; line-height: 110%;}
div#privacypolicy section p { margin-bottom: 18px; font-size: 75%; line-height: 140%;}
section#submit_btn { clear: both; margin-top: 30px; padding-top: 25px; border-top: 1px dotted #AEAEAE;}
section#submit_btn p { margin-bottom: 15px; color: #666; text-align: center; font-weight: bold; font-size: 75%;}
section#submit_btn p input { margin: 0 10px; width: 100px; height: 30px; border-radius: 0;}
section#submit_btn p img { margin: 0 10px; width: 100px; height: 30px;}

/* 確認 */
div#err_gr { margin: 0 auto 20px auto;}
div#err_gr p { color: #B80D0F; text-align: center; font-size: 75%; line-height: 140%;}
.contact_list { margin: 25px 0 0; padding: 25px 0 0; border-top: 1px dotted #aeaeae;}
.contact_list section { margin: 0 0 25px; padding: 0 0 25px; border-bottom: 1px dotted #AEAEAE;}
.contact_list section a { display: block;}
.contact_list h3 { font-size: 85%; line-height: 110%;}
.contact_list h3 img { margin: 2px 10px 0 0;}
.contact_list p { margin: 10px 0 0; font-size: 75%;}
.ttl-conf { color: #333; font-weight: bold; font-size: 75%;}
.table-conf { margin: 20px 0 0; border-collapse: collapse; color: #333; font-size: 75%;}
.table-conf th { display: block; padding: 20px 0 0; vertical-align: top; font-weight: bold;}
.table-conf td { display: block; padding: 0; color: #666; vertical-align: top;}
.error_messe { margin: 20px 0 0; color: #f00; font-size: 75%;}
.thanks { font-size: 75%;}
button { padding: 8px 30px; border: 1px solid #333; background: none; background: #333; color: #fff; font-size: 110%; line-height: 1;}
button + button { margin: 0 0 0 10px;}
.btn-back { display: inline-block; padding: 8px 30px; border: 1px solid #333; background: #fff; color: #333; font-weight: normal; font-size: 110%; line-height: 1; cursor: pointer;}

/* content */
.content { font-size: 80%; line-height: 1.5;}
.content a { text-decoration: underline;}
.list-ico { margin: 0 -5px; text-align: center;}
.list-ico li { display: inline-block; box-sizing: border-box; padding: 0 5px; width: 50%;}
.list-ico a { display: block; padding: 10px 0; border: 2px solid #cbcbcb; text-decoration: none; font-weight: bold;}
.list-ico img { width: 25%; vertical-align: middle;}
.list-ico span { display: block; margin: 5px 0 0;}
.list-circle { margin: 15px 0 0;}
.list-circle li { margin: 10px 0 0; padding: 0 0 0 1em; text-indent: -1em;}
.list-circle li:first-child { margin: 0;}
.box { margin: 15px 0 0; padding: 15px; border: 2px solid #ebebeb;}
.content dl { font-weight: bold; font-size: 110%;}
.content dd span { display: inline-block; margin: 0 .2em 0 0; padding: 0 0 0 1em; height: 1em;}
.content dd span img { height: 100%; vertical-align: middle;}
.content dl + p { margin: 15px 0 0;}
.content dl + p br { display: none;}
form + a,
.thanks + a { display: none !important;}

table { width: 100%; font-size: 75%; line-height: 1.8;}
th { display: block; padding: 20px 0 0; width: 100%; border-top: 1px dotted #AEAEAE;}
form > table tr:first-child th{ padding: 0; border: none;}
th em { color: #f00;}
td { display: block; padding: 0 0 20px; width: 100%;}
td div { padding: 5px 0;}
table input { padding: 5px;}
table input[type="text"],
table input[type="tel"],
table input[type="email"] { box-sizing: border-box; width: 100%;}
table textarea { box-sizing: border-box; padding: 5px; width: 100%; height: 100px;}
table textarea.mid { height: 50px;}
table input[type="text"].short { width: 40%;}
table label + span { margin: 0 0 0 10px;}
table label { line-height: 1;}
table input[type="checkbox"],
table input[type="radio"] { position: relative; top: -1px; display: inline-block; margin: 0 5px 0 0; vertical-align: middle;}
table .pc { display: none;}

.item { margin: 20px 0 0;}
.item h4 { padding: 5px 10px; background: #aeaeae; color: #fff; font-size: 100%;}
.item h4 + table tr:first-child th { padding: 20px 0 0; border: none;}

.conf { margin: 0 0 20px; padding: 5px 10px; background: #aeaeae; color: #fff; font-size: 100%;}

/*520-759px*/
@media only screen and (min-width: 520px) {
    div#contents_wrap { padding: 40px 0 35px 0;}
    div#wrapin { width: 94%;}
    header#contact_h { margin-bottom: 30px; padding-bottom: 25px;}
    header#contact_h h2 img { height: 20px;}
    header#contact_h .btn i { margin: 0 1em 0 0; width: 16%;}

    /* content */
    .list-ico span br { display: none;}
}

/*760-1049px*/
@media only screen and (min-width: 760px) {
    div#contents_wrap { padding: 55px 0 65px 0;}
    div#wrapin { min-height: 400px;  width: 88%;}
    header#contact_h h2 { text-align: left;}
    header#contact_h h3 { text-align: left;}
    header#contact_h p { text-align: left;}
    header#contact_h .btn { bottom: 25px;}
    header#contact_h .btn a { border: 3px solid #cbcbcb; font-size: 100%;}

    /*件名*/
    section#cnt_subject,
    section#cnt_subject2 { padding: 5px 0 5px 20px; border-left: 4px solid #CBCBCB;}
    section#cnt_subject h3,
    section#cnt_subject2 h3 { margin-bottom: 15px;}

    /*個人情報*/
    dl#cnt_privacy,
    dl#cnt_privacy2 { margin-top: 35px;}
    dt.con1,
    dt.con2 { float: left; clear: both; width: 25%;}
    dt.con1 { padding: 20px 0 20px 7%;}
    dd.con1 { padding: 20px 0 20px 7%;}
    dt.con2 { padding: 20px 0 0 7%;}
    dd.con2 { padding: 20px 0 0 7%;}
    dt.con3 { padding: 20px 0 15px 7%;}
    dd.con3 { padding: 0 0 30px 7%;}
    dl#cnt_privacy dd input { width: 60%;}
    dl#cnt_privacy dd textarea { width: 80%; height: 200px;}

    /*個人情報保護方針*/
    section#submit_btn { margin-top: 35px; padding-top: 30px;}
    div#privacypolicy section { margin: 40px 50px 0 50px;}
    .table-conf th { display: table-cell; padding: 20px 40px 0 0;}
    .table-conf td { display: table-cell; padding: 20px 0 0;}

    /* content */
    .list-ico a { padding: 15px; border: 3px solid #cbcbcb; line-height: 1;}
    .list-ico span { display: inline-block; margin: 0 0 0 1em; vertical-align: middle; font-size: 135%;}
    .list-ico img { width: 15%;}
    .box { padding: 30px 60px;}
    .content dl { text-align: center; font-size: 130%;}
    .content dl + p { text-align: center;}
    
    th { display: table-cell; padding: 20px 0; width: 30%; border-top: 1px dotted #AEAEAE; vertical-align: top;}
    form > table tr:first-child th { padding: 0 0 20px;}
    td { display: table-cell; padding: 20px 0; width: 70%; border-top: 1px dotted #AEAEAE; vertical-align: top;}
    form > table tr:first-child td { padding: 0 0 20px; border: none;}
    td div { padding: 0 0 10px;}
    .item h4 + table tr:first-child th { padding: 20px 0;}
    .item h4 + table tr:first-child td { padding: 20px 0; border: none;}
}

@media only screen and (min-width: 1000px) {
    div#contents_wrap { padding: 55px 0 65px;}
    div#wrapin { width: 88%;}
    header#contact_h .btn { width: calc(50% - 10px);}
    header#contact_h .btn a { border: 4px solid #cbcbcb; text-align: center;}
    header#contact_h .btn i { width: 10%;}

    /*件名*/
    section#cnt_subject,
    section#cnt_subject2 { float: left; width: 260px;}

    /*個人情報*/
    dl#cnt_privacy,
    dl#cnt_privacy2 { float: right; margin-top: 0px; width: 535px; border-top: 0px;}
    dt.con1,
    dt.con2 { width: 189px;}
    dt.con1 { padding: 20px 0 20px 10px;}
    dd.con1 { padding: 20px 0 20px 10px;}
    dt.con2 { padding: 20px 0 0 10px;}
    dd.con2 { padding: 20px 0 0 10px;}
    dt.con3 { padding: 20px 0 15px 10px;}
    dd.con3 { padding: 0 0 30px 10px;}
    dl#cnt_privacy dd input { width: 340px;}
    dl#cnt_privacy dd textarea { width: 490px;}

    /* content */
    .list-ico { margin: 0 -10px;}
    .list-ico li { padding: 0 10px;}
    .list-ico a { padding: 20px; border: 4px solid #cbcbcb;}
    .list-circle { margin: 25px 0 0;}
    .box { margin: 25px 0 0; padding: 30px 70px;}
    .content dl { text-align: center; font-size: 130%;}
    .content dl + p { text-align: center;}
    .content dl + p br { display: block;}
    th { width: 35%;}
    td { width: 65%;}
    table textarea { height: 200px;}
    table textarea.mid { height: 100px;}
}

@media only screen and (min-width: 1040px) {
    div#contents_wrap { padding: 55px 0 65px 0;}
    div#wrapin { width: 880px;}
    header#contact_h dl { overflow: hidden; margin: 0; zoom: 1;}
    header#contact_h dl dt { float: left; clear: left;}
    header#contact_h dl dd { margin: 0 0 0 350px;}
    header#contact_h p + dl { margin: 25px 0 0;}

    /*件名*/
    section#cnt_subject,
    section#cnt_subject2 { width: 275px;}

    /*個人情報*/
    dl#cnt_privacy,
    dl#cnt_privacy2 { width: 565px;}
    dl#cnt_privacy dd input { width: 330px;}
    dl#cnt_privacy dd textarea { width: 500px;}
}