@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : news.css
Description :
===================================================================== */

/* =====================================================================
*    news
* =================================================================== */
.news {
    padding: calc(100 / 750 * 100%) 0;
    background-color: #ffe822;
}

.news::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(235 / 750 * 100%);
    background: url(../images/common/line_tate_white.png) repeat left top;
    background-size: calc(20 / 750 * 100%) auto;
    position: absolute;
    left: 0;
    bottom: 0;
}

.news .inner {
    z-index: 2;
}

.news_list > li {
    margin: 0 0 calc(40 / 750 * 100%);
}

.news_list > li:last-child {
    margin: 0;
}

.news_date {
    width: calc(375 / 750 * 100%);
    padding: 0.5em 0 0.58em calc(140 / 750 * 100%);
    background-color: #000;
    color: #39d7fc;
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: calc(25 / 750 * 100%) 0 0;
}

.news_details {
    width: calc(690 / 750 * 100%);
    margin: 0 0 0 auto;
    padding: calc(115 / 750 * 100%) calc(60 / 750 * 100%) calc(50 / 750 * 100%);
    background-color: #fff;
}

.news_details_ttl {
    color: #e5003b;
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 0 0 3.5%;
    margin: 0 0 5%;
    background: url(../images/common/line_dot_bk2.png) repeat-x left bottom;
    background-size: calc(10 / 570 * 100%) auto;
}

.news_details_txt {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.7;
}

.news_details_txt_margin > li {
    margin: 0 0 6%;
}

.news_details_txt_margin > li:last-child {
    margin: 0;
}

.news_details_txt strong {
    font-weight: 700;
}

.news_blue {
    color: #39d7fc;
}

.news_details_txt p {
}

.news_details_txt p.txt_r {
    text-align: right;
}

.news_details_img {
}

.news_details_img li {
    margin: 0 0 4%;
}

.news_details_img li:last-child {
    margin: 0;
}

.news_details_list {
}

.news_details_list li {
    margin: 0 0 4%;
    padding: 0 0 0 1.2em;
}

.news_details_list li:last-child {
    margin: 0;
}

.news_details_list li:before {
    content: "";
    display: block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: #e5003b;
    position: absolute;
    top: 0.6em;
    left: 0.2em;
}

@media screen and (min-width: 768px) {
    .news {
        padding: calc(100 / 1100 * 100%) 0 calc(80 / 1100 * 100%);
    }
    
    .news::after {
        padding-top: calc(200 / 1100 * 100%);
        background-size: calc(10 / 1100 * 100%) auto;
    }
    
    .news .sec_ttl {
        margin: 0 auto calc(50 / 1100 * 100%);
    }
    
    .news_list {
        width: calc(830 / 1100 * 100%);
        margin: 0 auto;
    }
    
    .news_list > li {
        margin: 0 0 calc(30 / 830 * 100%);
    }
    
    .news_date {
        width: calc(235 / 830 * 100%);
        margin: calc(20 / 830 * 100%) 0 0;
        padding: 0.5em 0 0.58em calc(90 / 830 * 100%);
        font-size: 1.9rem;
    }
    
    .news_details {
        width: calc(800 / 830 * 100%);
        padding: calc(80 / 830 * 100%) calc(60 / 830 * 100%) calc(50 / 830 * 100%);
    }
    
    .news_details_ttl {
        font-size: 1.9rem;
        padding: 0 0 2%;
        margin: 0 0 2.5%;
        background-size: calc(5 / 680 * 100%) auto;
    }
    
    .news_details_txt {
        font-size: 1.6rem;
    }
    
    .news_details_txt_margin > li {
        margin: 0 0 2%;
    }
    
    .news_details_txt p {
    }
    
    .news_details_img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .news_details_img1 {
        display: block;
    }
    
    .news_details_img li {
        width: calc(325 / 680 * 100%);
        margin: 0 calc(30 / 680 * 100%) 0 0;
    }
    
    .news_details_img li:last-child {
        margin: 0;
    }
    
    .news_details_img1 li {
        width: calc(500 / 680 * 100%);
        margin: 0 auto !important;
    }
    
    .news_details_list {
    }
    
    .news_details_list li {
        margin: 0 0 1.5%;
    }
    
}

@media screen and (min-width: 1100px) {
    .news {
        padding: 100px 0 80px;
    }
    
    .news::after {
        padding-top: 200px;
        background-size: 10px auto;
    }
    
    .news_details_list li:before {
        width: 10px;
        height: 10px;
    }
}