/* reset */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

/* style */
:root {
    --inner_width: 750px;
}
.conts {
    background: url("../img/bg.jpg") no-repeat center center;
    background-size: cover;
    height: var(--inner_width);
    width: 100%;
}
.map {
    background: url("../img/map.png") no-repeat center center;
    background-size: 100% 100%;
    width: var(--inner_width);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    position: relative;
}
.item {
    position: absolute;
    opacity: 0.5;
    background: none !important;
}
.item.item-all {
    top: 19%;
    right: 5%;
    width: 40%;
    height: 5%;
    background-color: rgb(78, 112, 48);
}
.item.item-ua {
    top: 33%;
    left: 65%;
    width: 9%;
    height: 18%;
    background-color: rgb(0, 255, 13);
}
.item.item-ca {
    top: 33%;
    left: 56%;
    width: 9%;
    height: 18%;
    background-color: rgb(255, 123, 0);
}
.item.item-jp {
    top: 29%;
    left: 86%;
    width: 9%;
    height: 19%;
    background-color: rgb(255, 30, 0);
}
.item.item-ar {
    top: 29%;
    left: 77%;
    width: 9%;
    height: 19%;
    background-color: rgb(0, 217, 255);
}
.item.item-c_renge {
    top: 51%;
    left: 56%;
    width: 8%;
    height: 22%;
    background-color: rgb(0, 140, 255);
}
.item.item-c_junsui {
    top: 51%;
    left: 64%;
    width: 10%;
    height: 19%;
    background-color: rgb(68, 0, 255);
}
.item.item-c_acacia {
    top: 62%;
    left: 27%;
    width: 12%;
    height: 23%;
    background-color: rgb(195, 0, 255);
}
.item.item-original85 {
    top: 59%;
    left: 39%;
    width: 12%;
    height: 21%;
    background-color: rgb(255, 0, 157);
}
.item.item-hu {
    top: 69%;
    left: 13%;
    width: 14%;
    height: 20%;
    background-color: rgb(255, 0, 85);
}
@media screen and (max-width: 750px) {
    :root {
        --inner_width: 100vw;
    }
    .conts {
        height: var(--inner_width);
        width: 100%;
    }
    .map {
        width: var(--inner_width);
    }

}