@charset "UTF-8";

/* reward
------------------------------- */
/* 報酬合計表示 */
.totalReward {
    position: relative;
    /* 画像とテキストの親コンテナ */
    display: flex;
}

/* 報酬合計の画像表示 */
.totalReward-Box {
    display: block;
    width: 80%;
    /* 必要に応じてサイズ調整 */
    margin: 0 auto;
}

/* 報酬合計の数値テキスト */
.totalReward-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 文字色 */
    color: #371d03;
    font-size: 6vw;
    /* font-size: clamp(14px, 1.7vw, 80px); */
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

/* 報酬合計のpOas表示サイズ */
.totalReward-text .small-text {
    font-size: 3vw;
    /* 小さくしたいサイズ */
}


/* 報酬詳細表示 */
.detailReward {
    position: relative;
    /* 画像とテキストの親コンテナ */
    display: flex;
}

/* 報酬詳細の画像表示 */
.detailReward-Box {

    position: relative;
    margin: 5% auto;
    width: 80%;
}

/* 報酬詳細の画像表示 */
.detailReward-img {
    width: 80%;
    height: auto;
    /* 縦横比を保つ */
    display: block;
    margin: 0 auto;
}

/* 報酬詳細データテキスト*/
.detailReward-Box ul {

    position: absolute;
    top: 42%;
    /* 親要素の中央 */
    left: 50%;
    transform: translate(-50%, -50%);
    /* 自分の幅高さの半分だけ戻す */
    width: 60%;
    /* 背景画像に対する幅 */
    color: #371d03;
    padding: 0;
    list-style: none;
    margin: 0;
    font-size: clamp(5.5px, 1vw, 23px);
    font-weight: 700;

}

/* 報酬詳細数値テキスト*/
.detailReward-Box li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3%;
}

/* 詳細合計 */
.detailReward-sum {

    position: absolute;
    top: 88%;
    /* 親要素の中央 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    display: flex;
    justify-content: space-between;
    color: #371d03;
    padding: 0;
    list-style: none;
    margin: 0 auto;
    font-size: clamp(2vw, 1.7em, 4vw);
    font-weight: 700;
}

/* 親コンテナを中央寄せ用に設定 */
.rewardbtn-container {
    display: flex;
    justify-content: center;
    /* 横方向中央 */
    align-items: center;
    /* 縦方向中央 */
    margin-bottom: 10%;
}

/* 報酬受け取りボタン */
.rewardbtn {

    display: inline-flex;
    align-items: center;
    background-color: #000;
    /* 背景を黒 */
    color: white;
    /* 文字色 */
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 20px;
    /* 丸み */
    border: 3px solid #f4a531;
    /* 外枠の黄色 */
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    font-size: 18px;
    width: 200px;
    /* 好きな幅に調整 */
    box-sizing: border-box;
    justify-content: center;
}

/* 報酬受け取りボタン　済 */
.rewardbtnnow {

    display: inline-flex;
    align-items: center;
    background-color: #f4a531;
    /* 背景を黒 */
    color: white;
    /* 文字色 */
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 20px;
    /* 丸み */
    border: 3px solid #f4a531;
    /* 外枠の黄色 */
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    font-size: 18px;
    width: 200px;
    /* 好きな幅に調整 */
    box-sizing: border-box;
    justify-content: center;
}

/* 報酬受け取りボタン　済 */
.rewardbtndone {

    display: inline-flex;
    align-items: center;
    background-color: #f4a531;
    /* 背景を黒 */
    color: black;
    /* 文字色 */
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 20px;
    /* 丸み */
    border: 3px solid #f4a531;
    /* 外枠の黄色 */
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    font-size: 18px;
    width: 200px;
    /* 好きな幅に調整 */
    box-sizing: border-box;
    justify-content: center;
}


.rewardbtn:hover {
    background-color: #f4a531;
}

/* 左側テキスト */
.rewardbtn-text {
    display: block;
    color: #fff;
}


/* 左側テキスト */
.selectSeTop {
     display: flex;
   justify-content: center;
   margin: 5% 0;
}

.selectSe {
    display: inline-flex;
    align-items: center;
    position: relative;
    max-width: 400px;
    width: 60%;
    height: 30%;
}

.selectSe::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectSe select {
    appearance: none;
    min-width: 100%;
    max-width: 100%;
    height: 2.5em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #2e2e2e;
    border-radius: 25px;
    background-color: #fff;
    color: #333333;
    font-size: clamp(18px, 2vw, 22px);
    cursor: pointer;
    text-align-last: center;
    font-weight: 700;
}

/*********************************************************
 モバイル版 命令
 800px以下の場合の処理
 *********************************************************/
@media (max-width: 800px) {}