/*
***************************
* カテゴリー一覧画面スタイル(共通）
***************************
*/
@charset "utf-8";

/* 吹き出し */
.speech-bubble {
    position:  absolute;
    z-index: 1;
    top: 0%;
    left: 67%;
    width: 30%; 
}

/* 王冠 */
.crown {
    width: 34%;
    opacity: 1;
}

/* 各カテゴリー要素の親 */
.category-box {
    height: 50vh;
}

#grid-list{
    display:grid;
    width:100%;
    grid-template-columns: 50% 1fr;
    padding: 0rem 2vw;
}

.inner-grid{
    display:grid;
    width:fit-content;
    height:fit-content;
}
.content-reward{
    z-index: 1;
}

/* 各カテゴリーのスタイル */
.category0 {
    display:flex;
    grid-area:1/1;
    width: 100%;
    z-index: 0;
}
.categoryNum {
    grid-area:1/1;
    width: auto;
    z-index: 10;
    font-size:min(5vw,2.5vh);
    margin:0;
}

.category1 {
    display:flex;
    grid-area:1/1;
    width: 100%;
    z-index: 0;
}
.category2 {
    display:flex;
    grid-area:1/1;
    width: 100%;
    z-index: 0;
}

.category3 {
    display:flex;
    grid-area:1/1;
    width: 100%;
    z-index: 0;
}

.counter{
    grid-area:1/1;
    display:flex;
    position: relative;
    z-index: 2;
}

/* コンテンツ報酬ポイント */
.point {
    top: min(3vw,1.5vh);
    position:  absolute;
    right: min(10.5vw,4.7vh);
}

/* 括線 */
.diagonal-line {
    position:  absolute;
    top: min(6vw,2.5vh);
    right: min(6vw,2.7vh);
    width: min(6vw,3vh);
    height: min(6vw,3vh);
}

.diagonal-line::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6%; /* 太さを設定 */
    background: rgba(248, 249, 250, 1);
    top: 50%;
    transform: translateY(-50%) rotate(-50deg);
}

/* ステージ数 */
.number-of-stages {
    position:  absolute;
    top: min(6vw,2.7vh);
    right: min(4.7vw,2.2vh);
}

/* 幅最大 */
.no-gutters {
    margin:0;
    padding:0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    margin:0;
    padding:0;
}

/*
* イベントを下の要素に伝達
* ボタン要素の上に画像を表示する必要がある場合に使用する 
*/
.event-through {
    pointer-events: none;
}