@charset "utf-8";

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

/* =====================================================================
*    news
* =================================================================== */
.news {
    padding: calc(130 / 750 * 100%) 0 calc(150 / 750 * 100%);
}

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

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

.news_date {
    width: calc(280 / 630 * 100%);
    z-index: 2;
}

.news_date::before,
.news_date::after {
    padding-top: calc(5 / 275 * 100%);
}

.news_date span {
    padding: 0.55em;
    font-size: 2.2rem;
}

.news_sec {
    margin: calc(-30 / 630 * 100%) 0 0;
    padding: calc(60 / 630 * 100%) calc(50 / 630 * 100%);
    background-color: #fff;
    border-radius: calc(12 / 750 * 100vw);
    overflow: hidden;
}

.news_sec::before {
    content: "";
    display: block;
    width: calc(260 / 630 * 100%);
    padding-top: calc(260 / 630 * 100%);
    background: url(../images/common/bg_dot_g.png) repeat left bottom;
    background-size: calc(24 / 260 * 100%) auto;
    position: absolute;
    bottom: 0;
    right: 0;
}

.news_sec::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(260 / 630 * 100%);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
}

.news_ttl {
    padding: 0 0 calc(25 / 530 * 100%);
    border-bottom: 1px solid #d9558c;
    color: #cb1013;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.6;
    z-index: 2;
}

.news_txt {
    padding: calc(35 / 530 * 100%) 0 0;
    font-size: 2.4rem;
    line-height: 1.917;
    z-index: 2;
}

.news_txt > *:not(:last-child) {
    margin-bottom: calc(30 / 530 * 100%);
}

.news_txt p {
    margin-top: -0.5em;
    word-break: break-all;
}

.news_txt ul {
    font-size: 0;
}
.news_txt ul li {
    width: calc(99% /2);
    display: inline-block;
    padding: 5px;
}

.news_txt a {
    display: inline;
    color: #d9558c;
    text-decoration: underline;
}

.news_txt b,
.news_txt strong {
    font-weight: 700;
}

.news_photo2 img {
    width: calc(370 / 530 * 100%);
    margin: 0 auto;
}

.news_txt small {
    font-size: 85%;
}

.news_link {
    width: calc(460 / 530 * 100%);
    margin-left: auto;
    margin-right: auto;
}

.news_link a {
    display: block;
    padding: calc(27 / 460 * 100%) 0;
    background: url(../images/common/bg_dot_r2.png) repeat left bottom;
    background-size: calc(16 / 460 * 100%) auto;
    border-radius: 2em;
    -webkit-box-shadow: 0 0 calc(20 / 750 * 100vw) rgba(102, 102, 102, 0.5);
    box-shadow: 0 0 calc(20 / 750 * 100vw) rgba(102, 102, 102, 0.5);
    font-size: 2rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}

.news_link a::before {
    content: "";
    display: block;
    width: calc(410 / 460 * 100%);
    height: 100%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    background-color: #c03349;
    position: absolute;
    top: 0;
    left: 0;
}

.news_link a span {
    color: #fff;
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 0 calc(4 / 750 * 100vw) 0 #6d0000;
}

.news_btn{
border-radius: 2em;
    font-size: 2rem;
    color: #d9558c;
    border: 2px solid;
    text-align: center;
    margin: 0 auto;
    padding: 2% 4%;
	    width: 100%;
	max-width: 300px;

}
.news_btn a{
	display: block;
	color: #d9558c;
	text-decoration: none;
}
@media screen and (min-width: 768px) {
    .news {
        padding: calc(120 / 1300 * 100%) 0 calc(130 / 1300 * 100%);
    }

    .news_list {
        width: calc(840 / 1000 * 100%);
        margin: 0 auto;
    }
    
    .news_list > li {
        margin: 0 0 calc(30 / 840 * 100%);
    }
    
    .news_date {
        width: calc(190 / 840 * 100%);
    }
    
    .news_date span {
        padding: 0.5em;
        font-size: 1.6rem;
    }
    
    .news_date::before, .news_date::after {
        padding-top: calc(4 / 190 * 100%);
    }
    
    .news_sec {
        margin: calc(-20 / 840 * 100%) 0 0;
        padding: calc(40 / 840 * 100%) calc(50 / 840 * 100%);
        border-radius: calc(6 / 1300 * 100vw);
    }
    
    .news_sec::before {
        width: calc(180 / 840 * 100%);
        padding-top: calc(180 / 840 * 100%);
    }
    
    .news_sec::after {
        padding-top: calc(180 / 840 * 100%);
    }
    
    .news_ttl {
        padding: 0 0 calc(20 / 740 * 100%);
        border-width: 2px;
        font-size: 2.2rem;
        line-height: 1.545;
    }
    
    .news_txt {
        padding: calc(25 / 740 * 100%) 0 0;
        font-size: 1.6rem;
        line-height: 1.875;
    }
    
    .news_txt > *:not(:last-child) {
        margin-bottom: calc(30 / 740 * 100%);
    }
    
    .news_txt a:hover {
        text-decoration: none;
    }
    
    .news_photo1 img {
        width: calc(480 / 740 * 100%);
        margin: 0 auto;
    }
    
    .news_photo2 img {
        width: calc(340 / 740 * 100%);
    }
    
    .news_link {
        width: calc(400 / 740 * 100%);
    }
    
    .news_link a {
        padding: calc(22 / 400 * 100%) 0;
        background-size: calc(16 / 400 * 100%) auto;
        -webkit-box-shadow: 0 0 calc(20 / 1300 * 100vw) rgba(102, 102, 102, 0.5);
        box-shadow: 0 0 calc(20 / 1300 * 100vw) rgba(102, 102, 102, 0.5);
        top: 0;
    }
    
    .news_link a span {
        font-size: 2.2rem;
        text-shadow: 0 calc(4 / 1300 * 100vw) 0 #6d0000;
    }
    
    .news_link a:hover {
        top: -0.77vw;
    }
}

@media screen and (min-width: 1300px) {
    .news {
        padding: 120px 0 130px;
    }
    
    .news_sec {
        border-radius: 6px;
    }
    
    .news_link a {
        -webkit-box-shadow: 0 0 20px rgba(102, 102, 102, 0.5);
        box-shadow: 0 0 20px rgba(102, 102, 102, 0.5);
    }
    
    .news_link a span {
        text-shadow: 0 4px 0 #6d0000;
    }
    
    .news_link a:hover {
        top: -10px;
    }
}