@charset "utf-8";

.pc {
    display:block;
}

span.pc {
    display:inline-block;
}

.sp {
    display:none;
}

span.sp {
    display:none;
}

/*------------------------------------------------------------
  トップページ
------------------------------------------------------------*/

#main .contactBox {
  margin: 0 20px 20px 0;
  padding: 20px;
  box-shadow: 3px 3px 5px #c2bcb3;
  border-radius: 8px;
  position: relative;
  behavior: url(/js/pie.htc);
  border: 1px solid #F1ECE1;
  background-color: #fff;
}

#main .contactBox p {
  margin-bottom: 10px;
  font-size: 1.5em;
  color: #333;
}

#main h1 span {
  color: #ff0000;
}

#main .mailForm {
  border-top: 1px solid #CFCFCF;
}

#main .mailForm table {
  width: 100%;
  border-collapse: collapse;
}

#main .mailForm th,
#main .mailForm td {
  padding: 5px 10px;
  color: #333;
  font-size: 1.4em;
  line-height: 2;
  text-align: left;
  border-bottom: 2px solid #CFCFCF;
}

#main .mailForm th {
  vertical-align: top;
}

#main .mailForm td {
  vertical-align: middle;
}

#main .mailForm th {
  width: 25%;
  font-weight: normal;
  background-color: #E0E0E0;
}

#main .mailForm th span {
  display: inline-block;
  margin-left: 5px;
  color: #fd2020;
}

#main .mailForm .specialTd {
  padding: 0;
}

#main .mailForm td dl {
}

#main .mailForm td dl:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

#main .mailForm td dt {
  float: left;
  width: 80px;
  padding: 5px;
}

#main .mailForm td dd {
  float: left;
  padding: 5px;
  border-bottom: 1px solid #CFCFCF;
}

#main input[type="text"],
#main input[type="email"] {
  width: 300px;
  height: 20px;
  border: 1px solid #c4c4c4;
  position: relative;
}

#main textarea {
  position: relative;
  width: 100%;
  min-height: 150px;
  border: 1px solid #c4c4c4;
}

#main .mailForm td .last {
  border-bottom: none;
}

#main .submit {
  margin-top: 10px;
  text-align: center;
}

#main .submit li input {
  cursor: pointer;
}

#main .compensate {
  margin-bottom: 50px;
  border-radius: 10px;
  background-color: #FFF;
  box-shadow: 3px 3px 5px #c2bcb3;
  position:relative;
  top:0;
  left:0;
}

#main .compensate .text {
    position:absolute;
    top:25px;
    left:50%;
    text-align:center;
    font-size:2.3em;
    font-weight:bold;
    width:315px;
    margin-left:-157.5px;
}

#main .compensate .text span {
    color:#91004f;
}

/* SmatPhones */
@media (max-width:979px) {

    .pc {
        display:none !important;
    }

    span.pc {
        display:none !important;
    }

    .sp {
        display:block;
    }

    span.sp {
        display:inline-block;
    }

    #gHeader {
        background-image: url("");
        display:block;
    }

    #gHeader .inner {
        width:95% !important;
        padding:0 !important;
        margin:20px auto;
    }

    #gHeader .inner .title {
        float:none;
        width:100%;
    }

    #gHeader .inner .title img {
        max-width:100%;
        display:block;
        margin:0 auto;
    }

    #gHeader .inner .area {
        display:none;
    }

    #main {
        padding-top:25px;
        padding-bottom:28px;
        width:90% !important;
        margin:0 auto;
    }

    #main input[type="text"], #main input[type="email"] {
        width:100% !important;
    }

    #main .contactBox {
        margin:0 auto 20px !important;
    }

    #main .mailForm th {
        display:block;
        width:100% !important;
        box-sizing:border-box;
    }

    #main .mailForm td {
        display:block;
        width:100% !important;
        box-sizing:border-box;
    }

    #main .compensate {
    }

    #main .compensate img {
        width:100% !important;
    }

    #main .compensate .text {
        top:20%;
        left:25% !important;
        width:50% !important;
        text-align:center;
        font-size:14px;
        margin-left:0 !important;
    }

}

/* iPhone6のみ */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {

    .pc {
        display:none !important;
    }

    span.pc {
        display:none !important;
    }

    .sp {
        display:block;
    }

    span.sp {
        display:inline-block;
    }

    #gHeader {
        background-image: url("");
        display:block;
    }

    #gHeader .inner {
        width:95% !important;
        padding:0 !important;
        margin:20px auto;
    }

    #gHeader .inner .title {
        float:none;
        width:100%;
    }

    #gHeader .inner .title img {
        max-width:100%;
        display:block;
        margin:0 auto;
    }

    #gHeader .inner .area {
        display:none;
    }

    #main {
        padding-top:25px;
        padding-bottom:28px;
        width:90% !important;
        margin:0 auto;
    }

    #main input[type="text"], #main input[type="email"] {
        width:100% !important;
    }

    #main .contactBox {
        margin:0 auto 20px !important;
    }

    #main .mailForm th {
        display:block;
        width:100% !important;
        box-sizing:border-box;
    }

    #main .mailForm td {
        display:block;
        width:100% !important;
        box-sizing:border-box;
    }

    #main .compensate {
    }

    #main .compensate .text {
        top:15px;
        text-align:center;
        font-size:13px;
    }

}

/* iPhone6 Plus ~ ちょっと大きいスマホまで */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {

    .pc {
        display:none !important;
    }

    span.pc {
        display:none !important;
    }

    .sp {
        display:block;
    }

    span.sp {
        display:inline-block;
    }

    #gHeader {
        background-image: url("");
        display:block;
    }

    #gHeader .inner {
        width:95% !important;
        padding:0 !important;
        margin:20px auto;
    }

    #gHeader .inner .title {
        float:none;
        width:100%;
    }

    #gHeader .inner .title img {
        max-width:100%;
        display:block;
        margin:0 auto;
    }

    #gHeader .inner .area {
        display:none;
    }

    #main {
        padding-top:25px;
        padding-bottom:28px;
        width:90% !important;
        margin:0 auto;
    }

    #main input[type="text"], #main input[type="email"] {
        width:100% !important;
    }

    #main .contactBox {
        margin:0 auto 20px !important;
    }

    #main .mailForm th {
        display:block;
        width:100% !important;
        box-sizing:border-box;
    }

    #main .mailForm td {
        display:block;
        width:100% !important;
        box-sizing:border-box;
    }

    #main .compensate {
    }

    #main .compensate .text {
        top:15px;
        text-align:center;
        font-size:13px;
    }

}