@charset "utf-8";
.font-article-title {font-size: 17px;}
.alternative-background-color {background-color: #f9f8f6;}

.tag-highlight:hover {background-color: #F36108; color:#FFF;border-color:#F36108}
.tag-highlight:hover::after {border-color:#FFF}

.hover-reverse {transition: all 0.3s; border:1px solid transparent}
.hover-reverse:hover {color:#F36108; background-color: #FFF; border-color:#F36108;}

.category-title > div {height:300px}
.category-title > div:first-child {width:30%}
.category-title > div:last-child {width:70%;border-radius: 10px;}
.category-title > div:last-child img {object-fit: cover; width:100%; height:300px; object-position: center;}


/*swiper*/
.category-articles .swiper-slide {height:auto}
.category-articles article {padding:20px 10px;height:100%}
.category-articles article a {border-radius: 5px;height:100%;}
.category-articles article figure {height:130px;margin:0;padding:0}
.category-articles article img {height:100%; width:100%; object-fit: cover; object-position:50% 0}
.category-articles article p {margin:5px}

/* PC */
@media screen and (min-width:769px) {

    
    .category-articles {height:380px;}
    .swiper {height:360px}

    ul.category-tags li {margin: 5px; padding: 5px 35px 5px 10px; border: 1px solid #DDD; border-radius:5px; cursor: pointer}
    ul.category-tags li::after {content:"";border-top-width: 1px; border-right-width: 1px; border-left-width: 0px; border-bottom-width: 0px; border-color:#999; border-style: solid; width:8px;height:8px;position:absolute;right:5px;transform: rotate(135deg);transform-origin: left;}

    .category-title .category-card {border-radius: 10px; padding: 25px 15px; width:150%; top:50%; transform:translate(0, -50%)}
    .category-title .category-card a {border-radius: 10px; padding: 10px 15px;}    
}
/* SP */
@media screen and (max-width:768px) {
    .padding-top-bottom-half-sp {padding-top: 10px; padding-bottom: 10px;}

    .category-articles {height:360px;}

    ul.category-tags {margin-left:10px}
    ul.category-tags li {margin: 10px 5px; cursor: pointer; list-style-type: disc; text-decoration: underline;}
    ul.category-tags li::after {display:none}

    .category-title > div {height:auto}
    .category-title > div:first-child {width:auto}
    .category-title > div:last-child {width:0%;}

    .category-title .category-card {width:auto}
}