@charset "utf-8";

.bkn__list{
    display        : flex;
    gap            : 30px;
    justify-content: center;
}
.bkn__links{
    display: block;
    padding: 20px;
}
.popular__link {
    display: block;
}
.bkng__img__wrap{
    position: relative;
    flex-shrink: 0;
}
.bkng__img {
    height: 212px;
}
.bkn__label {
    display: inline-block;
    background: var(--point-color);
    color: var(--sub-font-color);
    font-size: var(--small-txt);
    letter-spacing: .08em;
    padding: 3px 7px 1px;
    z-index: 1;
}
.bkn__favicon{
    width: 42px;
    height: 42px;
    background-color: rgb(255 255 255 / 90%);
    box-shadow: var(--icon_shadow);
    border-radius: 50%;
    position: absolute;
    top     : 10px;
    right   : 10px;
}
.bkn__name__wrap{
    display: flex;
    align-items: center;
    justify-content: center;
}
.bkn__name{
    text-overflow: ellipsis;
    overflow     : hidden;
    white-space  : nowrap;
    font-size  : 16px;
    font-weight: 700;
}
.bkn__side {
    display: flex;
    gap: 10px;
    align-items: center;
    text-overflow: ellipsis;
    overflow     : hidden;
    white-space  : nowrap;
}
.price__block{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.bkn__price {
    font-weight: bold;
}
.bkn__price span{
    font-size: var(--strong-text);
    color: var(--strong-color);
    line-height: 1.6;
}
.bkn__date {
    width: fit-content;
    border: 1px solid var(--strong-color);
    padding: 2px 4px 0;
    font-size: var(--small-txt);
    color: var(--strong-color);
    text-overflow: ellipsis;
    overflow     : hidden;
    white-space  : nowrap;
}
.bkn__infotxt{
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.bkn__smalltxt{
    font-size: var(--small-txt);
    color: var(--text-subcolor);
}
.bkn__comment{
    background: #EEEEEE;
    margin: 10px 0 0;
    padding: 8px 9px 2px;
    overflow          : hidden;
    display           : -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--small-txt);
}

/* ランキング用
--------------------------- */
.rank > li {
    counter-increment: section;
}
.rank__icon {
    width: 44px;
    height: 44px;
    background-color: #78909C;
    border-radius: 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size: 10px;
}
.rank > li:first-child .rank__icon    { background-color: #9D8E30;}
.rank > li:nth-child(2) .rank__icon   { background-color: #5F89B8;}
.rank > li:nth-of-type(3) .rank__icon { background-color: #9A7A56;}

.rank__icon span {
    font-size: 10px;
    color: var(--white);
    font-weight: bold;
}
.rank__icon span::after{
    content:counter(section);
    font-size: var(--title-large);
}


/*-------------------------------------------------------------------------
ranking共通
-------------------------------------------------------------------------*/
[class*="bkn__rank--"]{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    align-content: center;
    font-size  : 10px;
    font-weight: 700;
    color      : #fff;
    text-align: center;
}
[class*="bkn__rank--"] span {
    font-size  : 20px;
    font-weight: inherit;
    color      : inherit;
}
.bkn__rank--01    { background-color: #9D8E30;}
.bkn__rank--02    { background-color: #5F89B8;}
.bkn__rank--03    { background-color: #9A7A56;}
.bkn__rank--under { background-color: #78909C;}