/* title_box */
.title_box article font { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; font-weight: 500; color: currentColor; }
.title_box article font span { margin: 0 .2em 0 .3em; }

/* exchange_list */
#exchange_list ul { display: flex; justify-content: center; align-items: center; gap: 1%; }
#exchange_list ul li { width: min(49%, 313px); text-align: center; }
#exchange_list ul li .txt { padding-bottom: 8%; width: 100%; aspect-ratio: 1 / 1; background: url(img/exchange_background.webp) no-repeat 50% / cover; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2em; }
#exchange_list ul li .txt * { line-height: 1; font-size: 14px; color: var(--clr-white); }
#exchange_list ul li .txt img { max-width: 65%; }
#exchange_list ul li .txt h3 { margin-top: .3em; font-size: 17px; }
#exchange_list ul li a { position: relative; margin-top: -20%; max-width: 90%; display: inline-block; }

/* scratchcard_item */
.scratch_item { position: relative; margin: auto; width: min(100%, 592px); aspect-ratio: 37 / 39; background: url(img/scratchcard_background.webp) no-repeat 50% / cover; border: 5px var(--clr-orange-base) solid; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.scratch_item .title_item { position: relative; pointer-events: none; }
.scratch_item .card_item { position: relative; }
.scratch_item .card_item .win_bonus { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.scratch_item .card_item .win_bonus b { position: absolute; display: block; font-style: italic; font-weight: 500; font-size: 130%; }
.scratch_item .card_item canvas { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; }
.scratch_item .bottom_item { padding: 1em 0 0 1em; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.scratch_item .bottom_item .img { width: 1%; flex: 1 1 auto; }
.scratch_item .bottom_item b { padding: .2em 1em; background: var(--clr-white); border: 4px var(--clr-orange-base) solid; border-radius: .2em .2em 0 .2em; transform: translate(4px, 4px); }

/* js_sc_box01 */
#js_sc_box01 { width: min(90%, 556px); aspect-ratio: 556 / 451; background: url(img/scratch_before01.webp) no-repeat 50% / cover; }
#js_sc_box01 .win_bonus { background: url(img/scratch_after01.webp) no-repeat 50% / cover; }

#js_sc_box01 b:nth-child(1) { top: 26%; left: 9%; }
#js_sc_box01 b:nth-child(2) { top: 40%; left: 49%; }
#js_sc_box01 b:nth-child(3) { top: 20%; right: 10%; }
#js_sc_box01 b:nth-child(4) { bottom: 18%; left: 17%; }
#js_sc_box01 b:nth-child(5) { bottom: 8%; left: 47%; }
#js_sc_box01 b:nth-child(6) { bottom: 13%; right: 12%; }

/* js_sc_box02 */
#js_sc_box02 { width: min(90%, 548px); aspect-ratio: 548 / 447; background: url(img/scratch_before02.webp) no-repeat 50% / cover; }
#js_sc_box02 .win_bonus { background: url(img/scratch_after02.webp) no-repeat 50% / cover; }

#js_sc_box02 b:nth-child(1) { top: 10%; left: 10%; }
#js_sc_box02 b:nth-child(2) { top: 39%; right: 47%; }
#js_sc_box02 b:nth-child(3) { top: 14%; right: 18%; }
#js_sc_box02 b:nth-child(4) { bottom: 25%; left: 10%; }
#js_sc_box02 b:nth-child(5) { bottom: 46%; right: 6%; }
#js_sc_box02 b:nth-child(6) { bottom: 7%; right: 10%; }

/* small_table */
.small_table tr td:last-child { width: 50%; }

@media screen and (max-width: 640px) {
	#exchange_list ul li .txt img { max-width: 55%; }
}
@media screen and (max-width: 550px) {
	.scratch_item .card_item .win_bonus b { font-size: 110%; }
	.scratch_item .bottom_item { padding-left: .2em; }
	.scratch_item .bottom_item b { padding: .2em .5em; }
}