@charset "UTF-8";

#content {
    color: rgb(80, 80, 80);
}

#content > div {
    margin-bottom: 60px;
}

#content > div.comment {
    margin-bottom: 20px;
}

#content > div.comment > div:nth-child(1) {
    width: 48%;
    padding: 20px;
    background-color: rgb(220, 230, 240);
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#content > div.comment > div:nth-child(1) > h3 {
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(120, 120, 120);
    margin-bottom: 20px;
}

#content > div.comment > div:nth-child(2) {
    width: 48%;
    float: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#content > div.comment > div:nth-child(2) > h3 {
    font-size: 20px;
}

#content > div.comment > div:nth-child(2) > p {
    font-size: 33px;
    color: rgb(250, 145, 165);
    letter-spacing: 4px;
}

#content > ul {
    margin-bottom: 50px;
}

#content > ul > li {
    padding: 10px 15px;
    border-radius: 5px;
    line-height: 1;
    color: #fff;
    background-color: rgb(250, 145, 165);
    display: inline-block;
}

#content > div > h3 {
    margin-bottom: 30px;
    color: rgb(250, 145, 165);
}

#content > div > dl {
    border: 1px solid rgb(80, 80, 80);
    margin-bottom: 30px;
}

#content > div > dl > dt {
    width: 30%;
    padding: 15px;
    border-bottom: 1px solid rgb(80, 80, 80);
    background-color: rgb(240, 240, 240);
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#content > div > dl > dd {
    width: 70%;
    padding: 15px;
    border-bottom: 1px solid rgb(80, 80, 80);
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#content > div > dl > dd.table_box {
    padding: 0;
}

#content > div > dl > dd.table_box table {
    width: 100%;
}

#content > div > dl > dd.table_box table tr {
    border-bottom: 1px solid rgb(80, 80, 80);
    line-height: 1;
}

#content > div > dl > dd.table_box table tbody tr:last-child {
    border-bottom: none;
}

#content > div > dl > dd.table_box table tr th,
#content > div > dl > dd.table_box table tr td {
    padding: 12px;
    line-height: 1.5;
}

#content > div > dl > dd.table_box table th:first-child {
    background-color: rgb(240, 250, 255);
}

#content > div > dl > dt:last-of-type,
#content > div > dl > dd:last-of-type {
    border-bottom: none;
}

/*オファーボタン*/
.inline {
    padding: 25px 20px;
    border-radius: 5px;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    background-color: forestgreen;
    display: block;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.inline:hover {
    color: yellow;
    opacity: 0.8;
}

.inline > i {
    margin-right: 10px;
}

.inline-off {
    padding: 25px 20px;
    border-radius: 5px;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    background-color: #8aa4af;
    display: block;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.inline-off:hover {
    /*color: yellow;
    opacity: 0.8;*/
}

.inline-off > i {
    margin-right: 10px;
}

.modaal-container {
    padding: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.modaal-content-container {
    padding: 0;
}

.modaal-content-container form h2 {
    padding-bottom: 15px;
    border-bottom: 1px solid rgb(150, 150, 150);
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.4;
}

.modaal-content-container form > div {
    margin-bottom: 30px;
}

.modaal-content-container form > div > h3,
.modaal-content-container form > div > input {
    font-size: 17px;
    display: inline-block;
}

.modaal-content-container form > div > input {
    width: 300px;
    padding: 10px;
    border: 1px solid rgb(80, 80, 80);
    margin-left: 10px;
}

.modaal-content-container form > textarea {
    width: 100%;
    height: 180px;
    padding: 10px 15px;
    border: 1px solid rgb(80, 80, 80);
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.8;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.modaal-content-container form input:focus,
.modaal-content-container form textarea:focus {
    outline: 0;
    border-color: rgb(250, 145, 165);
}

.modaal-content-container form > p {
    margin-bottom: 20px;
}

.modaal-content-container form > button {
    width: 100%;
    padding: 20px 0;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    background-color: rgb(250, 145, 165);
    display: block;
}

.modaal-content-container form > button:hover {
    opacity: 0.8;
}

/*===============================
//
MAXWIDTH / 480
//
===============================*/

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

    #content > div {
        margin-bottom: 120px;
    }

    #content > div.comment {
        margin-bottom: 30px;
    }

    #content > div.comment > div:nth-child(1) {
        width: 100%;
        padding: 20px;
        margin-bottom: 25px;
        float: none;
    }

    #content > div.comment > div:nth-child(1) > h3 {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    #content > div.comment > div:nth-child(2) {
        width: 100%;
        text-align: center;
        float: none;
    }

    #content > div.comment > div:nth-child(2) > h3 {
        margin-bottom: 10px;
        font-size: 18px;
    }

    #content > div.comment > div:nth-child(2) > p {
        font-size: 36px;
        letter-spacing: 2px;
        line-height: 1;
        text-align: center;
    }

    #content > ul {
        margin-bottom: 20px;
    }

    #content > ul > li {
        padding: 8px 10px;
        margin-bottom: 6px;
        border-radius: 3px;
        font-size: 14px;
    }

    #content > div > dl {
        border: 1px solid rgb(80, 80, 80);
        margin-bottom: 25px;
    }

    #content > div > dl > dt {
        width: 100%;
        padding: 15px 10px;
        float: none;
    }

    #content > div > dl > dt:nth-last-of-type(1) {
        border-bottom: 1px solid rgb(80, 80, 80);
    }

    #content > div > dl > dd {
        width: 100%;
        padding: 15px 10px;
        float: none;
    }

    #content > div > dl > dd.table_box table tr {
        width: 100%;
    }

    #content > div > dl > dd.table_box table tr th,
    #content > div > dl > dd.table_box table tr td {
        width: 100%;
        padding: 12px;
        line-height: 1.5;
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    #content > div > dl > dd.table_box table tr th:first-child {
        width: 100%;
        border-bottom: 1px solid rgb(80, 80, 80);
    }

    /*オファーボタン*/
    .inline {
        width: 96%;
        padding: 24px 0;
        border-radius: 0;
        font-size: 18px;
        text-align: center;
        right: 2%;
        left: 2%;
        bottom: 30px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    .inline > i {
        margin-right: 8px;
    }

    .modaal-outer-wrapper {}

    .modaal-inner-wrapper {
        padding: 0;
    }

    .modaal-container {
        width: 93%;
        padding: 30px 20px;
    }

    .modaal-content-container {
        padding: 0;
    }

    .modaal-content-container form h2 {
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-size: 16px;
    }

    .modaal-content-container form > div {
        margin-bottom: 20px;
    }

    .modaal-content-container form > div > h3,
    .modaal-content-container form > div > input {
        font-size: 16px;
    }

    .modaal-content-container form > div > h3 {
        margin-bottom: 10px;
    }

    .modaal-content-container form > div > input {
        width: 100%;
        padding: 8px;
        margin-left: 0;
    }

    .modaal-content-container form > textarea {
        height: 240px;
        padding: 8px;
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 1.5;
    }

    .modaal-content-container form > p {
        margin-bottom: 20px;
        line-height: 1;
    }

    .modaal-content-container form > button {
        padding: 15px 0;
    }

    .modaal-wrapper .modaal-close {
        width: 30px;
        height: 30px;
        top: 15px;
        right: 15px;
    }

    .modaal-wrapper .modaal-close:before {
        height: 30px;
        top: 0;
        left: 13px;
    }

    .modaal-wrapper .modaal-close:after {
        height: 30px;
        top: 0;
        left: 13px;
    }

}