@charset "UTF-8";
@media screen and (min-width: 653px) {
    .h3_map01Wrap {
        margin-bottom: 30px;
        background: none;
        background-image: url(/sc/soc_japan/ecopia_forest/img/wood_03.png);
        background-repeat: no-repeat;
        background-size: 48px;
        padding-left: 56px;
    }
    .h3_map01Wrap p {
        font-size: 14px;
    }
    .h3_map01 {
        font-size: 24px;
        font-weight: 600 !important;
    }
    .map {
        width: 100%;
        height: auto;
        color: #333;
        background-color: #fdffd3;
        border: solid 3px #61bc4c;
        padding: 27px;
        margin: 35px 0 15px;
        box-sizing: border-box;
    }
    .spView {
        display: none !important;
    }
    .pcView {
        display: block !important;
    }
    .mapBox {
        width: 100%;
        height: auto;
        position: relative;
    }
    .mapBox img {
        display: block;
    }
    .linkBox {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        list-style: none;
        z-index: 100;
        background-image: url(/sc/soc_japan/ecopia_forest/img/map_bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 0;
    }
    .linkBox .linkitem {
        position: absolute;
        background-color: none;
        opacity: 0.5;
    }
    .linkBox .linkitem.link01 {
        left: 79.6%;
        top: 27.5%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem.link02 {
        left: 79.6%;
        top: 41.6%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem.link03 {
        left: 79.6%;
        top: 55.5%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem.link04 {
        left: 37%;
        top: 9.1%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem.link05 {
        left: 4.1%;
        top: 27.52%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem.link06 {
        left: 4.1%;
        top: 70.8%;
        width: 19.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link07 {
        left: 4.1%;
        top: 56.1%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem.link08 {
        left: 4.1%;
        top: 42%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem.link09 {
        left: 18.1%;
        top: 13.3%;
        width: 16.2%;
        height: 10.6%;
    }
    .linkBox .linkitem a {
        width: 100%;
        height: 100%;
        display: block;
    }
}

@media screen and (max-width: 652px) {
    .h3_map01Wrap {
        margin-bottom: 10px;
        background: none;
        background-image: url(/sc/soc_japan/ecopia_forest/img/wood_03.png);
        background-repeat: no-repeat;
        background-size: 48px;
        padding-left: 56px;
    }
    .h3_map01Wrap p {
        font-size: 14px;
    }
    .h3_map01 {
        font-size: 16px;
        font-weight: 600 !important;
    }
    .map {
        width: 100%;
        height: auto;
        color: #333;
        background-color: #fdffd3;
        border: solid 3px #61bc4c;
        padding: 16px;
        margin: 35px 0 15px;
        box-sizing: border-box;
    }
    .map_area {}
    .spView {
        display: block !important;
    }
    .pcView {
        display: none !important;
    }
    .mapBox {
        width: 100%;
        height: auto;
        position: relative;
    }
    .mapBox img {
        display: block;
    }
    .linkBox {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        list-style: none;
        z-index: 100;
        background-image: url(/sc/soc_japan/ecopia_forest/img/map_sp_bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 0;
    }
    .linkBox .linkitem {
        position: absolute;
        background-color: none;
        opacity: 0.5;
    }
    .linkBox .linkitem.link01 {
        left: 67.5%;
        top: 41.2%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link02 {
        left: 67.5%;
        top: 55.3%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link03 {
        left: 67.5%;
        top: 69.3%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link04 {
        left: 20.6%;
        top: 0%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link05 {
        left: 0.3%;
        top: 28%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link06 {
        left: 35.6%;
        top: 89.7%;
        width: 37.6%;
        height: 10.6%;
    }
    .linkBox .linkitem.link07 {
        left: 0.3%;
        top: 89.7%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link08 {
        left: 0.3%;
        top: 42%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem.link09 {
        left: 0.3%;
        top: 13.8%;
        width: 32.1%;
        height: 10.6%;
    }
    .linkBox .linkitem a {
        width: 100%;
        height: 100%;
        display: block;
    }
}