@charset "UTF-8";
html {
    font-size: 62.5%;
}

body {
	font-family: "YakuHanJPs", "Roboto", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, "nc3Jp", sans-serif !important;

	width: 100%;
    margin: 0;
    padding: 0;

    color: #3c3c3c

}

article{
	font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
}


#popular,#new{
	padding-bottom: 12vh;
}

#new{
	background-color: rgb(245,245,245);

}

h2,h3{
	margin:0;
	padding: 0;
    color: #191b26;

	/*color:rgb(0,0,0);*/
	background:url();
	text-align: center;
}
h2{
	padding: 60px 0;

	font-size: 3.5rem;
	font-weight: 900;
}

h3{
	font-size: 2.5rem;
	font-weight: 600;
}


.item-container{
	/*margin: 0 3%;*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-wrap: wrap;
	justify-content:center;
}

.item{
	flex-basis: 400px;
	margin: 20px;
	text-align: center;
}

.item iframe{
	width: 100%;
	aspect-ratio: 16 / 9;
}

button{
	margin: 0.5vh 0.1vw;
	width: 180px;
}

button.btn-download-full {
    background-color: rgb(209 26 139);
    border-color: rgb(209 26 139);
    color: rgb(255 255 255);
}

button.btn-download-full:hover{
    background-color: rgb(189 6 119);
    border-color: rgb(209 26 139);
    color: rgb(255 255 255);
}


button.btn-download-short {
    background-color: rgb(26 139 209);
    border-color: rgb(26 139 209);
    color: rgb(255 255 255);
}

button.btn-download-short:hover{
    background-color: rgb(6 119 189);
    border-color: rgb(26 139 209);
    color: rgb(255 255 255);
}


button.btn-product {
    background-color: rgb(255 158 13);
    border-color: rgb(255 158 13);
    color: rgb(255 255 255);
}

button.btn-product:hover {
    background-color: rgb(235 138 3);
    border-color: rgb(235 138 3);
    color: rgb(255 255 255);
}

button.disabled{
	background-color: rgb(200 200 200) !important;
	color: rgb(150 150 150) !important;
}


button.btn-block{
	width: 100%;
}


button .bi{
	margin: auto 10px;
}


/* ↓↓ランキング表示用 */
.list_crown {
    list-style: none;
}

.list_crown > li {
    position: relative;
    padding: 0px 0px 0px 2.5em;
    color: #3388dd;
    font-size: 18px;
}
.list_crown > li::before,
.list_crown > li::after {
    position: absolute;
    left: 0px;
    width: 0px;
    height: 0px;
    content: "";
}
.list_crown > li::before {
    top: -1.25em;
	border: 1em solid transparent;
    border-bottom: 1.5em solid currentColor;
}
.list_crown > li::after {
    top: 0.25em;
    border: 0.5em solid transparent;
    border-left: 1em solid currentColor;
    border-right: 1em solid currentColor;
}
.list_crown > li.first {
    color: #dbb400;
}
.list_crown > li.second {
    color: #9fa0a0;
}
.list_crown > li.third {
    color: #c47022;
}

/* ↑↑ */

footer{
	background-color: #bbb;
	text-align:center;
}