@charset "utf-8";
/* Magazine */
.magazine{background: #1a3558; padding: 90px 0 120px;}
.mag-txt{color: #fff; text-align: center; font-size: 2rem; line-height: 1.8; font-weight: 500;}
.mag-tit{text-align: center; margin: 8px 0 65px;}
.mag-tit2{color: #fff; font-size: 3rem; font-weight: bold; line-height: 1.8; text-align: center; margin: 0 0 20px;}

@media (max-width: 767px){
    .magazine{padding: 60px 0;}
    .mag-txt{font-size: 1.3rem; margin: 0 -20px;}
    .mag-tit{margin: 8px 0 40px;}
    .mag-tit2{font-size: 2rem;}
}

/* Filters */
.filters{display: flex; justify-content: center; flex-wrap: wrap; padding: 0 0 50px;}
.filters li{margin: 0 4px 10px;}
.filters label:before{content: '#';}
.filters label{border: 1px solid #fff; padding: 5px 10px 7px; border-radius: 34px; color: #fff; line-height: 1.5; min-width: 160px; font-family: 'Lato', sans-serif; font-weight: bold; text-align: center; display: block; cursor: pointer;}
.filters label:hover{background: #fff; color: #1a3558;}

@media (max-width: 767px){    
    .filters{padding: 0 0 30px; margin: 0 -10px;}
    
    .filters label{min-width: 120px;}
}

input[type="radio"] {position: absolute; left: -9999px;}

[value="all"]:checked ~ .filters [for="all"],
[value="area"]:checked ~ .filters [for="area"],
[value="workplace"]:checked ~ .filters [for="workplace"], 
[value="aaaaa"]:checked ~ .filters [for="aaaaa"], 
[value="bbbbb"]:checked ~ .filters [for="bbbbb"], 
[value="ccccc"]:checked ~ .filters [for="ccccc"] {background: #fff; color: #1a3558;}

[value="all"]:checked ~ .targets [data-category] {display: block;}

[value="area"]:checked ~ .targets .target:not([data-category~="area"]), 
[value="workplace"]:checked ~ .targets .target:not([data-category~="workplace"]), 
[value="aaaaa"]:checked ~ .targets .target:not([data-category~="aaaaa"]),
[value="bbbbb"]:checked ~ .targets .target:not([data-category~="bbbbb"]), 
[value="ccccc"]:checked ~ .targets .target:not([data-category~="ccccc"]) {display: none;}

/* Targets */
.targets{display: flex; flex-wrap: wrap;}
.target{background: #fff; position: relative;}
.target:after{content: ''; position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; background: url("../img/common/btn_arrow.jpg") no-repeat top left/100% 100%;}
.target .inner{padding: 25px 30px 60px; line-height: 2;}
.target .date{line-height: 1; font-weight: 700; font-family: 'Barlow', sans-serif; letter-spacing: 0.05em; color: #1a3558;}
.target .label{line-height: 1; font-weight: 900; font-family: 'Lato', sans-serif; border: 1px solid #1a3558; border-radius: 30px; padding: 0.4375em 1.25em 0.375em; margin-top: 0.3125em; color: #1a3558; margin: 12px 0 0 0; display: inline-block;}
.target .tit{font-size: 2rem; font-weight: bold; line-height: 1.7; padding: 12px 0 8px;}

@media (min-width: 768px){
    .targets{margin: 0 -18px;}
    .target{width: calc((100% - 108px) / 3 ); margin: 0 18px 36px;}        
    .target .img{overflow: hidden; background: #000;}
    .target .img img{transition: .5s;}
    .target:hover .img img{opacity: .8; transform: scale(1.05); -webkit-transform: scale(1.05);}
    .target:hover{color: #1a3558;}
}

@media (max-width: 1199px) and (min-width: 768px){
    .target:after{width: 45px; height: 45px;}
    .target .inner{padding: 18px 20px 40px;}
}

@media (max-width: 767px){    
    .target{margin: 0 0 20px;}
    .target:after{width: 34px; height: 34px;}
    .target .inner{padding: 18px 20px 34px; line-height: 1.9;}
    .target .img img{width: 100%;}
    .target .tit{font-size: 1.6rem; padding: 12px 0 5px;}
}