@charset 'UTF-8';

/* map
 ----------------------------------------------------------------- */
.map{
    padding: 70px 0 100px;
    background-color: #FCF1EA;
}

.map-inner{
    margin: 40px auto 68px;
    max-width: 1000px;
    padding-right: 30px;
    padding-left: 30px;
}

.map-title{
    color: #0b8c5d;
    font-family: nitalago-ruika, sans-serif;
	font-size: 4.0rem;
	font-weight: 100;
	font-style: normal;
	margin-bottom: 15px;
	text-align: center;
	line-height: 1.125;
}

.map-area{
    position: relative;
}

.map-item{
    position: absolute;
}

.map-link{
    display: block;
    width: 100%;
    transition: all 0.3s;
}

.map-link:hover{
    opacity: 0.8;
}

@media screen and (min-width: 600px) {

    .map-item-01{
        top: 8.6%;
        left: 6%;
        width: 18.3%;
    }
    
    .map-item-02{
        top: 53.1%;
        left: 6%;
        width: 18.3%;
    }
    
    .map-item-03{
        top: 8.6%;
        left: 28.7%;
        width: 18.3%;
    }
    
    .map-item-04{
        top: 53.1%;
        left: 28.7%;
        width: 18.3%;
    }
    
    .map-item-05{
        left: 28.7%;
        bottom: 1%;
        width: 18.3%;
    }
    
    .map-item-06{
        top: 8.6%;
        right: 28.6%;
        width: 18.3%;
    }
    
    .map-item-07{
        top: 44.6%;
        right: 28.6%;
        width: 18.3%;
    }
    
    .map-item-08{
        top: 71.8%;
        right: 28.6%;
        width: 18.3%;
    }
    
    .map-item-09{
        right: 0.5%;
        top: 1.1%;
        width: 23.8%;
    }
    
    .map-item-10{
        top: 27.7%;
        right: 6.2%;
        width: 18.3%;
    }
    
    .map-item-11{
        right: 6.2%;
        top: 54.7%;
        width: 18.3%;
    }
    
    .map-item-12{
        right: 6.2%;
        bottom: 1%;
        width: 18.3%;
    }
}

@media screen and (max-width:599px) {
    .map{
        padding: 4vw 0 10.5vw;
    }

    .map-inner{
        margin: 2.66vw auto;
        padding: 0 7vw;
    }

    .map-title {
		font-size: 2.0rem;
		font-size: 5.33vw;
		margin-bottom: 17px;
	}

    .map-item-01{
        top: 3.9%;
        right: 8.1%;
        width: 37.8%;
    }
    
    .map-item-02{
        top: 3.9%;
        left: 10.4%;
        width: 37.8%;
    }
    
    .map-item-03{
        top: 27.8%;
        right: 8.1%;
        width: 37.8%;
    }
    
    .map-item-04{
        top: 27.8%;
        left: 16.6%;
        width: 30.9%;
    }
    
    .map-item-05{
        top: 27.8%;
        left: 1.1%;
        width: 9.5%;
    }
    
    .map-item-06{
        top: 51.8%;
        right: 8.1%;
        width: 31.1%;
    }

    .map-item-07{
        top: 51.8%;
        left: 35.4%;
        width: 19%;
    }

    .map-item-08{
        top: 51.8%;
        left: 9.3%;
        width: 19%;
    }

    .map-item-09{
        right: 1.1%;
        bottom: 0.6%;
        width: 23.6%;
    }

    .map-item-10{
        left: 50.4%;
        bottom: 4.8%;
        width: 18.9%;
    }

    .map-item-11{
        left: 16.5%;
        bottom: 4.8%;
        width: 28.3%;
    }

    .map-item-12{
        left: 1.1%;
        bottom: 4.8%;
        width: 9.5%;
    }
}