@charset "utf-8";

/* ------------------------------------------ */
/* letter CSS */
/* ------------------------------------------ */
#sec-canaria {
}

/* letter-title */
#sec-canaria .letter-title {
    display: block;
    width: 90%;
    max-width: 1220px;
    margin: 0 auto;
    border-bottom: 1px solid #362918;
}

#sec-canaria .letter-title .text {
    display: block;
    line-height: 1;
    letter-spacing: 0.02em;
    padding-bottom: 8px;
}

#sec-canaria .letter-container {
}

#sec-canaria .letter-container .container-fluid {
    max-width: 900px;
}

.letter-wrap {
    position: relative;
}

.letter-wrap .c-item {
    display: block;
    position: absolute;
    bottom: -58px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
}

.letter-wrap .c-item img {
}

.letter-wrap .let-box {
    border: 2px solid #00905b;
    padding: 100px 100px 80px;
}

.letter-wrap .let-box .c-header {
    display: block;
    border-bottom: 1px solid #c2beb9;
    position: relative;
}

.letter-wrap .let-box .c-header img {
    display: block;
    width: auto;
    position: absolute;
    left: -69px;
    bottom: -3px;
}

.letter-wrap .let-box .c-contents {
}

.letter-wrap .let-box .c-contents .c-ttl {
    display: block;
    line-height: 1;
}

.letter-wrap .let-box .c-contents .c-ttl .text {
    display: block;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #007f48;
}

.letter-wrap .let-box .c-contents .c-text {
    display: block;
    padding-top: 20px;
}

.letter-wrap .let-box .c-contents .c-text .text {
    display: block;
    line-height: 2;
    letter-spacing: 0.01em;
}

.reply-wrap {
    position: relative;
}

.reply-wrap .rep-box {
}

.reply-wrap .c-item {
    display: table;
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
}

.reply-wrap .c-item img {
}

.reply-wrap .rep-box {
    border: 2px solid #7e6b5a;
    padding: 100px 100px 80px;
}

.reply-wrap .rep-box .c-header {
    display: block;
    border-bottom: 1px solid #c2beb9;
    position: relative;
}

.reply-wrap .rep-box .c-header img {
    display: block;
    width: auto;
    position: absolute;
    left: -69px;
    bottom: -3px;
}

.reply-wrap .rep-box .c-contents {
}

.reply-wrap .rep-box .c-contents .c-text {
}

.reply-wrap .rep-box .c-contents .c-text .text {
}

#sec-canaria .btn-area {
    display: block;
    padding-top: 110px;
}
#sec-canaria .btn-area .btn-tp05 {
    margin: 0 auto;
}

@media (max-width: 768px) {
    .letter-wrap {
    }

    .letter-wrap .c-item {
        bottom: -43px;
    }

    .letter-wrap .c-item img {
        width: 200px;
    }

    .letter-wrap .let-box {
        padding: 70px 65px 50px;
    }

    .letter-wrap .let-box .c-header {
        display: block;
        border-bottom: 1px solid #c2beb9;
        position: relative;
    }

    .letter-wrap .let-box .c-header img {
        width: 200px;
        left: -50px;
        bottom: -3px;
    }

    .letter-wrap .let-box .c-contents {
    }

    .letter-wrap .let-box .c-contents .c-ttl {
        display: block;
        line-height: 1;
    }

    .letter-wrap .let-box .c-contents .c-ttl .text {
        display: block;
        line-height: 1.3;
        letter-spacing: 0.02em;
        color: #007f48;
    }

    .letter-wrap .let-box .c-contents .c-text {
        display: block;
        padding-top: 20px;
    }

    .letter-wrap .let-box .c-contents .c-text .text {
        display: block;
        line-height: 2;
        letter-spacing: 0.01em;
    }

    .reply-wrap {
        position: relative;
    }

    .reply-wrap .rep-box {
    }

    .reply-wrap .c-item {
        display: table;
        position: absolute;
        right: 2px;
        bottom: 2px;
        z-index: 1;
    }

    .reply-wrap .c-item img {
        width: 80px;
    }

    .reply-wrap .rep-box {
        padding: 70px 65px 50px;
    }

    .reply-wrap .rep-box .c-header {
        display: block;
        border-bottom: 1px solid #c2beb9;
        position: relative;
    }

    .reply-wrap .rep-box .c-header img {
        width: 200px;
        left: -50px;
        bottom: -3px;
    }

    .reply-wrap .rep-box .c-contents {
    }

    .reply-wrap .rep-box .c-contents .c-text {
    }

    .reply-wrap .rep-box .c-contents .c-text .text {
    }

    #sec-canaria .btn-area {
        display: block;
        padding-top: 110px;
    }

    #sec-canaria .btn-area .btn-tp05 {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .letter-wrap {
    }

    .letter-wrap .c-item {
        bottom: -35px;
    }

    .letter-wrap .c-item img {
        width: 200px;
    }

    .letter-wrap .let-box {
        padding: 55px 25px 25px;
    }

    .letter-wrap .let-box .c-header {
        display: block;
        border-bottom: 1px solid #c2beb9;
        position: relative;
        margin-left: 30px;
    }

    .letter-wrap .let-box .c-header img {
        width: 150px;
        left: -40px;
        bottom: -3px;
    }

    .letter-wrap .let-box .c-contents {
    }

    .letter-wrap .let-box .c-contents .c-ttl {
        display: block;
        line-height: 1;
    }

    .letter-wrap .let-box .c-contents .c-ttl .text {
        display: block;
        line-height: 1.3;
        letter-spacing: 0.02em;
        color: #007f48;
    }

    .letter-wrap .let-box .c-contents .c-text {
        display: block;
        padding-top: 20px;
    }

    .letter-wrap .let-box .c-contents .c-text .text {
        display: block;
        line-height: 2;
        letter-spacing: 0.01em;
    }

    .reply-wrap {
        position: relative;
    }

    .reply-wrap .rep-box {
    }

    .reply-wrap .c-item {
        display: table;
        position: absolute;
        right: 2px;
        bottom: 2px;
        z-index: -1;
    }

    .reply-wrap .c-item img {
        width: 50px;
    }

    .reply-wrap .rep-box {
        padding: 55px 25px 25px;
    }

    .reply-wrap .rep-box .c-header {
        display: block;
        border-bottom: 1px solid #c2beb9;
        position: relative;
        margin-left: 30px;
    }

    .reply-wrap .rep-box .c-header img {
        width: 150px;
        left: -40px;
        bottom: -3px;
    }

    .reply-wrap .rep-box .c-contents {
    }

    .reply-wrap .rep-box .c-contents .c-text {
    }

    .reply-wrap .rep-box .c-contents .c-text .text {
    }

    #sec-canaria .btn-area {
        display: block;
        padding-top: 110px;
    }

    #sec-canaria .btn-area .btn-tp05 {
        margin: 0 auto;
    }
}