@charset "UTF-8";
.comment {
    max-width: 300px;
    margin: 0 auto;
}
.comment_title {
    font-size: 16px;
    text-align: center;
    margin-bottom: 3px;
    line-height: 1.2;
}
.comment_title-left {
    text-align: left;
}
.comment_image {
    text-align: center;
}
.comment_image > img {}
.comment_text {
    line-height: 1.2;
    margin-top: 8px;
}
.spot {}
.spot_inner {
    max-width: 623px;
}
.spot_title {
    margin-bottom: 39px;
}
.spot_title > small {}
.spot_sect {
    margin-bottom: 40px;
}
.spot_headline {
    background: #469d4c;
    color: #fff;
    font-size: 20px;
    line-height: 1.2;
    padding: 11px 15px;
}
.spot_headline-no2 {
    background-color: #b7a54f;
}
.spot_headline-no3 {
    background-color: #e02a80;
}
.spot_main {
    position: relative;
}
.spot_main > img {}
.spot_message {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    padding: 10px;
}
.spot_message-no2 {
    right: auto;
    left: 10px;
}
.spot_message::after {
    content: "";
    display: block;
    border: 8px solid rgba(255, 255, 255, 0.9);
    position: absolute;
    z-index: 1;
    bottom: -20px;
    left: 39%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom: none;
    width: 0;
    border-top-width: 20px;
    transform: skewX(-30deg);
}
.spot_message-no2::after {
    transform: skewX(30deg);
}
.spot_message > b {
    display: block;
}
.spot_message > small {
    display: block;
    font-size: 10px;
}
.spot_cols {
    margin-top: 12px;
}
.spot_cols-no2 {
    margin-top: 0;
}
.spot_cols::after {
    content: "";
    display: block;
    clear: both;
}
.spot_col {
    width: 32%;
    float: left;
    margin-left: 2%;
}
.spot_col-no1 {
    margin-left: 16%;
}
.spot_col-no2 {}
.spot_col-no3 {}
.spot_col-no4 {
    width: 66%;
    margin-left: 0;
}
.spot_col-no5 {
    float: right;
    padding-top: 20px;
}
@media screen and (min-width:960px) {}
@media screen and (max-width:959px) {
    .comment {}
    .comment_title {
        font-size: 14px;
    }
    .comment_image {}
    .comment_image > img {}
    .comment_text {
        font-size: 12px;
        margin-top: 5px;
    }
    .spot {}
    .spot_inner {}
    .spot_title {}
    .spot_title > small {}
    .spot_sect {}
    .spot_headline {}
    .spot_headline-no2 {}
    .spot_main {}
    .spot_main > img {}
    .spot_message {}
    .spot_message-no2 {}
    .spot_message::after {}
    .spot_message-no2::after {}
    .spot_message > b {}
    .spot_message > small {}
    .spot_cols {}
    .spot_cols-no2 {}
    .spot_cols::after {}
    .spot_col {}
    .spot_col-no1 {}
    .spot_col-no2 {}
    .spot_col-no3 {}
    .spot_col-no4 {}
    .spot_col-no5 {
        padding-top: 15px;
    }
}
@media screen and (max-width:699px) {
    .comment {}
    .comment_title {}
    .comment_image {}
    .comment_image > img {}
    .comment_text {}
    .spot {}
    .spot_inner {}
    .spot_title {
        margin-bottom: 10px;
    }
    .spot_title > small {}
    .spot_sect {}
    .spot_headline {
        font-size: 16px;
        padding: 10px 10px;
        margin-bottom: 10px;
    }
    .spot_headline-no2 {}
    .spot_main {}
    .spot_main > img {}
    .spot_message {
        top: 5px;
        right: 5px;
        padding: 5px;
    }
    .spot_message-no2 {
        right: auto;
        left: 5px;
    }
    .spot_message::after {
        border-top-width: 10px;
        bottom: -10px;
        border-left-width: 5px;
        border-right-width: 5px;
    }
    .spot_message-no2::after {}
    .spot_message > b {
        font-size: 12px;
    }
    .spot_message > small {}
    .spot_cols {}
    .spot_cols-no2 {}
    .spot_cols::after {}
    .spot_col {
        width: auto;
        float: none;
        margin: 10px auto 0;
    }
    .spot_col-no1 {}
    .spot_col-no2 {}
    .spot_col-no3 {}
    .spot_col-no4 {}
    .spot_col-no5 {
        padding-top: 0;
    }
}