@charset "utf-8";

/*--------------------------------------
    ランキング(TOP最上段のカテゴリー)
--------------------------------------*/

/* 集計の更新時間。積み荷パックの絞り込み・並び替えと同じ行(ヘッダー内)に出す。
   html の font-size が 768px 以下で 16px → 8px に切り替わり rem だと急に小さくなるため、
   画面幅に合わせてなだらかに縮める(幅1024px以上で 17.6px、約700px以下で下限の 12px) */
.ranking-updated {
    align-self: center;
    font-size: clamp(12px, 1.72vw, 17.6px);
    color: #7a6a4f;
}

/* reset.css が span に font-size: 16px を直接指定しているため、「更新時間：」と同じ大きさを継承させる */
.ranking-updated .ranking-updated-at {
    font-size: inherit;
    font-weight: bold;
}

/* データが無い場合(集計バッチ未実行など)に出す案内文。
   .contpack-list は grid のため、そのままだと1カラム分の幅に収まってしまうので全幅に広げる */
.ranking-empty {
    grid-column: 1 / -1;
    padding: 3rem 0;
    text-align: center;
    color: #7a6a4f;
}

/* 一覧のカードは積み荷パックとまったく同じ(列数・サイズ・帯・商品名)。
   順位はカードの外(上)に、下線付きのシンプルな表示で出す。
   カード左上の帯(おすすめ等)はカード上端からはみ出すため、順位の下に帯の分の余白を取り、
   帯と重ならないようにする。余白は .pickup の位置(top_released.css / top_compress.css、
   見切れ対策の top_tab.css)に合わせてブレークポイントごとに変える。
   順位の分だけ1段が高くなるので、行の間隔は通常の積み荷パックより広くなる */
.rank-label {
    --ranking-ribbon-space: 46px;
    display: flex;
    align-items: baseline;
    gap: 2px;
    width: fit-content;
    margin: 0 0 var(--ranking-ribbon-space) 4px;
    /* 下線を数字より長く引くため、右側に余白を取る */
    padding: 0 28px 2px 4px;
    border-bottom: 2px solid #222;
    font-family: "Noto Serif JP", serif;
    line-height: 1;
}

/* 王冠の無い順位は、下線の中央に数字が来るよう左右の余白を均等にする(左右の合計は .rank-label と同じなので下線の長さは変わらない) */
.rank-label:not(.rank-1) {
    padding-left: 16px;
    padding-right: 16px;
}

/* reset.css が span に color / font-size を直接指定しているため、span 側に指定する */
.rank-label .rank-num {
    color: #222;
    font-weight: 900;
    line-height: 1;
}

.rank-label .rank-num {
    font-size: 2.4rem;
}

.rank-label .rank-crown {
    align-self: center;
    width: 1.6rem;
    height: auto;
    margin-right: 2px;
    color: #222;
}

@media (max-width: 1100px) {
    .rank-label {
        --ranking-ribbon-space: 28px;
    }
}

@media (max-width: 1024px) {
    .rank-label {
        --ranking-ribbon-space: 20px;
    }
}

/* 768px以下は html の font-size が 8px */
@media (max-width: 768px) {
    .rank-label {
        --ranking-ribbon-space: 14px;
        padding-right: 20px;
        border-bottom-width: 1px;
    }

    .rank-label:not(.rank-1) {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rank-label .rank-num {
        font-size: 2.4rem;
    }

    .rank-label .rank-crown {
        width: 1.8rem;
    }
}

/* 高さ500px以下は帯の見切れ対策(下げる指定)が効かず、帯の位置が別に調整されている */
@media screen and (max-height: 500px) {
    .rank-label {
        --ranking-ribbon-space: 30px;
    }
}

/* モーダル(商品詳細)の左上に出す順位。表記は一覧と同じ .rank-label で、位置だけ変える。
   iframe に重ねるとスクロールした内容が順位の下に潜り込むため、順位を出すときだけ
   .modal-close-bar(通常は高さ0で iframe に重なる)に順位の分の高さを持たせ、iframe をその下から始める */
.modal-close-bar:has(> .modal-rank:not(.none)) {
    height: auto;
}

.rank-label.modal-rank {
    position: relative;
    z-index: 2;
    margin: 8px 0 6px 12px;
}

/* 高さ500px以下は .modal が grid で、.modal-close-bar の行が高さ0に固定されている(modal.css) */
@media screen and (max-height: 500px) {
    .modal:has(#modalRank:not(.none)) {
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
}

.rank-label.modal-rank:not(.rank-1) .rank-crown {
    display: none;
}

/* 画面高が低いときは、順位の帯の分だけ商品詳細の表示領域が狭くなるため、
   幅768px以下と同じ大きさにする(ルートの font-size が 16px のため px で指定)。
   閾値は「カートに追加」行がある場合に iframe が 420px 以下の詰めたレイアウト(confirmation.css)になる
   画面高(約606px)に余裕を持たせた値 */
@media screen and (max-height: 620px) {
    .rank-label.modal-rank {
        padding-right: 20px;
        border-bottom-width: 1px;
    }

    .rank-label.modal-rank:not(.rank-1) {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rank-label.modal-rank .rank-num {
        font-size: 19.2px;
    }

    .rank-label.modal-rank .rank-crown {
        width: 14.4px;
    }
}

/*--------------------------------------
    タブ(ランキング追加分)
--------------------------------------*/

/* タブが4つになるため、3つ前提の max-width を広げる */
#tabcontrol {
    max-width: 640px;
    gap: 0.6rem;
}

/* 他のタブ(積み荷パック・宝玉・サブスク)と同じ見た目に揃える。
   .tab_item span は白文字が既定で、他タブは非選択時だけ #333 を当てているが、
   ランキングはその指定に含まれていないため白背景に白文字で読めなくなっていた */
input#ranking:checked+.tab_item {
    color: #333;
    border: 1px solid #750000;
    border-radius: 3px 3px 0 0;
    background: #750000;
}

input#ranking:not(:checked)+.tab_item {
    border: 1px solid #333;
    border-radius: 3px 3px 0 0;
    box-shadow: none;
}

input#ranking:checked+.tab_item span {
    color: #fff;
}

input#ranking:not(:checked)+.tab_item span {
    color: #333;
}

/* アイコンも文字と同じ色にする(SVGは currentColor で塗っている) */
input#ranking:checked+.tab_item .tab-icn-ranking {
    color: #fff;
}

input#ranking:not(:checked)+.tab_item .tab-icn-ranking {
    color: #750000;
}

input#ranking:checked+.tab_item::before {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 10px;
    height: 28px;
    left: 4px;
    top: 50%;
    transform: translate(0px, -50%);
}

input#ranking:checked+.tab_item::after {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 10px;
    height: 28px;
    right: 4px;
    top: 50%;
    transform: scale(-1.0) translate(0px, 50%);
}

.tab_item .tab-icn-ranking {
    height: 25px;
    width: auto;
}

@media screen and (max-width: 768px) {
    #tabcontrol {
        max-width: 100%;
        gap: 0.2rem;
    }

    .tab_item span {
        font-size: 11px;
    }

    .tab_item .tab-icn-ranking {
        height: 18px;
    }

    input#ranking:checked+.tab_item {
        border-width: 1px;
        border-radius: 2px 2px 0 0;
    }

    input#ranking:not(:checked)+.tab_item {
        border-radius: 2px 2px 0 0;
    }

    input#ranking:checked+.tab_item::before,
    input#ranking:checked+.tab_item::after {
        width: 8px;
        height: 19px;
    }
}