/* --------------------------------------------------

初めてのダービー予想！

-------------------------------------------------- */

.contents_wrap {
	width: calc(100% - 40px);
	margin-inline: auto;
}

.unit + .unit {
	margin-top: 15px;
}

.unit {
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--unit-bg-light);
}

.unit :is(.unit_heading,.data_area)
,.link {
	font-family: var(--font-serif);
}

.unit .unit_heading {
	padding-block: 16px;
	font-size: var(--font-size-20);
	background-color: var(--color-dark);
	color: var(--color-light);
	text-align: center;
	.sm {
		font-size: var(--font-size-16);
	}
}

.unit_inner {
    padding: 20px;
}

.unit_inner>*:nth-child(n+2)  {
    margin-top: 16px;
}


/* - データエリア
-------------------------------------------------- */

:root {
    --icon_w: clamp(1.375rem, 0.1250rem + 6.2500vw, 2rem);
    --icon_h: calc(var(--icon_w)*0.7273);
}

.data_area:not(.applicable) {
    display: grid;
    gap: 10px;
    grid-template-columns: auto calc(var(--icon_w) * 8);
    justify-content: center;
    border-radius: 10px;
    padding: 15px;
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    font-size: var(--font-size-12);
    background: rgb(from var(--color-light) r g b / 60%);
    color: var(--color-dark);
}

.data_area dl {
    display: grid;
    grid: subgrid / subgrid;
    grid-column: span 2;
}

.data_area dl dt {
    display: grid;
    place-content: center;
    padding: 6px 3px;
    border-radius: 4px;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    background-color: var(--color-dark);
    color: var(--color-light);
}

.data_area:not(.applicable) dl dd {
    background-image: url(../img/data_icon_horse.svg);
    background-size: var(--icon_w) var(--icon_h) ;
    background-repeat: repeat no-repeat;
    background-position: center left;
}

.data_area:not(.applicable) dd[data-nam='0'] {
    background:none;
}


/* ----- 馬アイコンの数 ----- */

.data_area:not(.applicable) dd[data-nam='1'] {
    width:calc(var(--icon_w) * 1);
}
.data_area:not(.applicable) dd[data-nam='2'] {
    width:calc(var(--icon_w) * 2);
}
.data_area:not(.applicable) dd[data-nam='3'] {
    width:calc(var(--icon_w) * 3);
}
.data_area:not(.applicable) dd[data-nam='4'] {
    width:calc(var(--icon_w) * 4);
}
.data_area:not(.applicable) dd[data-nam='5'] {
    width:calc(var(--icon_w) * 5);
}
.data_area:not(.applicable) dd[data-nam='6'] {
    width:calc(var(--icon_w) * 6);
}
.data_area:not(.applicable) dd[data-nam='7'] {
    width:calc(var(--icon_w) * 7);
}
.data_area:not(.applicable) dd[data-nam='8'] {
    width:calc(var(--icon_w) * 8);
}
.data_area:not(.applicable) dd[data-nam='14'] {
    width:calc(var(--icon_w) * 7);
    height: calc((var(--icon_h) * 2) + 8px);
    background-repeat: repeat space;
}


/* ----- メダルアイコン ----- */

.data_area.medal {
    grid-template-columns: min-content minmax(200px, auto) ;
}

.data_area.medal dt {
    width: clamp(2.125rem, -4.6250rem + 33.7500vw, 5.5rem);
}

.data_area.medal dd {
    display: flex;
    gap: 2px;
}

.data_area.medal img {
    width: calc((100% - 16px)/9);
}



/* - 画像
-------------------------------------------------- */
.unit .img_area {
    border-radius: 10px;
    overflow: hidden;
}

/* - テキストエリア
-------------------------------------------------- */

.text_area {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.text_area img {
    justify-self: center;
}

/* - 下部リンク
-------------------------------------------------- */

.link {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    padding: 24px;
    border-radius: 10px;
    margin-top: 24px;
    font-size: var(--font-size-20);
    line-height: 1;
    background-color: var(--color-dark);
	color: var(--color-light);
    & img {
        width: 16px;
        justify-self: end;
        vertical-align: bottom;
    }
}

/*------------------------------------------------------
	SP 480px以上
------------------------------------------------------*/
@media screen and (width >=480px) {
    :root {
        --icon_w: 24px;
    }

}

/*------------------------------------------------------
	PC 960px以上
------------------------------------------------------*/
@media screen and (width >=960px) {
    .data_area.medal dt {
        width: clamp(2.5rem, -10.1316rem + 21.0526vw, 7.5rem);
    }
}