@charset "utf-8";

/*--------------------------------------
    TOPのタブ表示
--------------------------------------*/

/* ランキング・積み荷パック・宝玉・サブスクの各セクション(index.htmlのdata-tab-panel)は
   選択中のタブのものだけを表示する。
   表示側にルールを持たずに非表示側だけを指定しているのは、セクションごとに異なる
   display(block/flex等)をタブ側で上書きしないため。
   初期表示はタブのラジオ(tsumini_header.htmlでchecked)と揃えて積み荷パックにしてあり、
   JSの読み込み前でも全セクションが並んで見えることはない。 */
[data-tab-panel]:not(.is-active) {
    display: none;
}

/*--------------------------------------
    ギフトタブ
--------------------------------------*/

/* タブが5つになるため、4つ前提(top_ranking.css)の max-width を広げる */
#tabcontrol {
    max-width: 780px;
}

/* 絞り込み・並び替えを出さないタブ(宝玉など)。高さを揃えるため積み荷の行を見えない状態で置く(top.js の applyTab) */
.select-box-wrap.is-placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* 1番目の商品の上端を積み荷パック(.cont-pack)に揃える。
   .cont-pack の開始位置は top_released.css(40px / 高さ500px以下 12px)と
   top_category.css(幅768px以下 20px)にあり、同じ値をタブごとのセクションにも当てる */
.cont-gift,
.cont-subscription,
.cont-ranking,
.cont_treasure {
    margin-top: 40px;
}

@media screen and (max-width: 768px) {
    .cont-gift,
    .cont-subscription,
    .cont-ranking,
    .cont_treasure {
        margin-top: 20px;
    }
}

@media screen and (max-height: 500px) {
    #main .cont-gift,
    #main .cont-subscription,
    #main .cont-ranking,
    #main .cont_treasure {
        margin-top: 12px;
    }
}

/* 「おすすめ」「超おすすめ」「ギフト」の帯は .pickup の位置でカード上端から大きくはみ出し、
   最上段だけ帯の上部がタブ・並び替えの行(白背景で前面)に隠れる。
   帯の高さに対する割合で下げ、どの画面幅でも開始位置の余白に収まるようにする。
   (「WebStore限定」等の .pickup-web ははみ出しが小さいので対象外。
    高さ500px以下は top_released.css で帯の位置を個別に調整済みなので対象外。
    幅1025px以上は帯が大きく(top_released.css)、下げると商品画像内のアイテムアイコンに重なる。
    下げなくても開始位置の余白(40px)に収まり行に隠れないため対象外) */
@media screen and (min-height: 501px) and (max-width: 1024px) {
    .container-packaging .pickup:not(.pickup-web) {
        transform: translateY(25%);
    }
}

/* 他のタブ(積み荷パック・宝玉・サブスク・ランキング)と同じ見た目に揃える */
input#gift:checked+.tab_item {
    color: #333;
    border: 1px solid #750000;
    border-radius: 3px 3px 0 0;
    background: #750000;
}

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

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

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

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

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

input#gift: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#gift: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-gift {
    height: 25px;
    width: auto;
}

/* スマホはタブ5つ分の横幅が取れず「積み荷パック」が折り返せない(nowrap)ため、
   アイコンを省いて文字だけにする */
@media screen and (max-width: 768px) {
    .tab_item div img,
    .tab_item .tab-icn-ranking,
    .tab_item .tab-icn-gift {
        display: none;
    }

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

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

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

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

/* ギフト・サブスクの並び替え */
.list-sort-select {
    border: none;
    padding: 2px 38px 2px 12px;
    font-size: 14px;
    cursor: pointer;
}

/* 文字サイズは積み荷パックの並び替え(#sort-select)と同じ値にする
   (top_released.css / top_compress.css の #sort-select の指定に合わせる) */
@media (max-width: 768px) {
    .list-sort-select {
        font-size: 10px;
    }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
    .list-sort-select {
        font-size: 10px;
    }

    /* 画像アイコン(.tab_item div img)は top_released.css で 20px に縮むため、SVGアイコンも合わせる。
       揃えないとギフト・ランキングのタブだけ高くなり、他のタブの下端が下線から浮く */
    .tab_item .tab-icn-gift,
    .tab_item .tab-icn-ranking {
        height: 20px;
    }
}