/*Recommend*/
div.RecommendArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

div.RecommendBox {
    margin: 5px 10px;
    position: relative;
    width:100%;
    overflow:hidden;
}

/* コンテナ要素の擬似要素(ここで比率を調整) */
div.RecommendBox::before {
  content: "";
  display: block;
  padding-top: 72.72%; /* 比率を指定 */
}
div.Recommend {
    /*aspect-ratio: 1414/1000;*/ /*白銀比*/
    /*aspect-ratio: 1618/1000;*/ /*黄金比*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top:8px;
}

    div.Recommend img {
        width: 100%;
        object-fit: cover;
        object-position: 50% 0;
    }

        div.Recommend img:hover {
            opacity: 0.6;
        }

span.RecommendTime {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    background-color: black;
    font-size: 0.7em;
    padding: 0 4px;
}

span.RecommendTitle {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
    background-color: black;
    font-size: 0.75em;
    padding: 2px 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*Ranking*/
div.RankingArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

div.RankingAreaTab {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 6px 0;
}

div.RankingBox {
    margin: 5px 10px;
    position: relative;
    width:100%;
    overflow:hidden;
}

/* コンテナ要素の擬似要素(ここで比率を調整) */
div.RankingBox::before {
  content: "";
  display: block;
  padding-top: 72.72%; /* 比率を指定 */
}

div.Ranking {
    /*aspect-ratio: 1414/1000;*/ /*白銀比*/
    /*aspect-ratio: 1618/1000;*/ /*黄金比*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top:8px;
}

    div.Ranking img {
        width: 100%;
        object-fit: cover;
        object-position: 50% 0;
        min-width: 100%;
    }

        div.Ranking img:hover {
            opacity: 0.6;
        }

span.RankingRank {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    background-color: black;
    font-size: 0.9em;
    padding: 4px 8px;
    width: 18px;
}

span.RankingTime {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    background-color: black;
    font-size: 0.75em;
    padding: 0 4px;
}

span.RankingTitle {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
    background-color: black;
    font-size: 0.75em;
    padding: 2px 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

a.RankingSwitch {
    display: block;
    padding: 7px 10px;
    border: solid 1px #2b6f03;
    width: 100%;
    text-decoration: none;
    font-size: 0.85em;
    box-sizing:border-box;
}

a.RankingBorderDouble {
    margin-left: -1px;
}

@media screen and (max-width: 1120px) {
    /*div.RecommendBox {
        margin: 15px 10px;
    }

    div.Recommend {
        width: 300px;
        height: auto;
    }

    div.RankingBox {
        margin: 10px;
    }

    div.Ranking {
        width: 300px;
        height: auto;
    }*/

    span.RankingTitle {
        font-size: 0.8em;
    }

    span.RecommendTitle {
        font-size: 0.8em;
    }
}


/*Recommend*/
/*
div.RecommendArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

div.RecommendBox {
    margin: 5px 10px;
}

div.Recommend {
    display: inline-block;
    width: 100%;
    aspect-ratio: 1414/1000; 白銀比
    aspect-ratio: 1618/1000; 黄金比
    position: relative;
    margin-top:8px;
}

    div.Recommend img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 0;
    }

        div.Recommend img:hover {
            opacity: 0.6;
        }

span.RecommendTime {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    background-color: black;
    font-size: 0.7em;
    padding: 0 4px;
}

span.RecommendTitle {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
    background-color: black;
    font-size: 0.75em;
    padding: 2px 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

Ranking
div.RankingArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

div.RankingAreaTab {
    display: flex;
    justify-content: space-between;
    width: 240px;
    margin: 6px 0;
}

div.RankingBox {
    margin: 5px 10px;
}

div.Ranking {
    display: inline-block;
    width: 100%;
    aspect-ratio: 1414/1000; 白銀比
    aspect-ratio: 1618/1000; 黄金比
    position: relative;
    margin-top:8px;
}

    div.Ranking img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 0;
        min-width: 100%;
    }

        div.Ranking img:hover {
            opacity: 0.6;
        }

span.RankingRank {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    background-color: black;
    font-size: 0.9em;
    padding: 4px 8px;
    width: 18px;
}

span.RankingTime {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    background-color: black;
    font-size: 0.75em;
    padding: 0 4px;
}

span.RankingTitle {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
    background-color: black;
    font-size: 0.75em;
    padding: 2px 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

a.RankingSwitch {
    display: block;
    padding: 7px 10px;
    border: solid 1px #2b6f03;
    width: 100%;
    text-decoration: none;
    font-size: 0.85em;
    box-sizing:border-box;
}

a.RankingBorderDouble {
    margin-left: -1px;
}

@media screen and (max-width: 1120px) {
    div.RecommendBox {
        margin: 15px 10px;
    }

    div.Recommend {
        width: 100%;
        height: auto;
    }

    div.RankingBox {
        margin: 15px 10px;
    }

    div.Ranking {
        width: 100%;
        height: auto;
    }

    div.RankingAreaTab {
        width: 94%;
    }

    span.RankingTitle {
        font-size: 0.8em;
    }

    span.RecommendTitle {
        font-size: 0.8em;
    }
}
*/