@charset "UTF-8";
/* CSS Document */

/*
	html{
		height: 100%;
	}

	body{
		margin: 0;
		padding: 0;
		background-color: #ddd;
		display: flex;
		align-items:center;
		justify-content: center;
		height: 100%;


	} */


	.kt-sharemap-btn-close,
	.kt-sharemap-arrow-up,
	.kt-sharemap-arrow-bottom,
	.kt-sharemap-arrow-left,
	.kt-sharemap-arrow-right{
		position: fixed;
		height: 44px;
		width: 44px;

		border-radius: 50%;

		background-color: rgba(255,255,255,.7);

		z-index: 999;

		overflow: hidden;
	}

	.kt-sharemap-btn-close:hover,
	.kt-sharemap-arrow-up:hover,
	.kt-sharemap-arrow-bottom:hover,
	.kt-sharemap-arrow-left:hover,
	.kt-sharemap-arrow-right:hover{

		background-color: rgba(191,236,255,1);

	}


	.kt-sharemap-btn-close span,
	.kt-sharemap-arrow-up span,
	.kt-sharemap-arrow-bottom span,
	.kt-sharemap-arrow-left span,
	.kt-sharemap-arrow-right span{
		background-image: url("../images/arrow-right.svg");
		background-size: 100%;
		display: block;
		height: 44px;
		width: 44px;
		text-indent: -999px;
		color: rgba(0,0,0,0);
		text-decoration: none;
		opacity: .7;
	}

	.kt-sharemap-btn-close span:hover,
	.kt-sharemap-arrow-up span:hover,
	.kt-sharemap-arrow-bottom span:hover,
	.kt-sharemap-arrow-left span:hover,
	.kt-sharemap-arrow-right span:hover{
		opacity: .9;
	}


	.kt-sharemap-arrow-up span{

		background-image: url("../images/arrow-up.svg");
	}

	.kt-sharemap-arrow-bottom span{

		background-image: url("../images/arrow-bottom.svg");
	}

	.kt-sharemap-arrow-left span{

		background-image: url("../images/arrow-left.svg");
	}

	.kt-sharemap-btn-close span{

		background-image: url("../images/btn-share-map-close.svg");

	}


	.kt-sharemap-btn-close{
		right: 10px;
		top: 10px;
	}


	.kt-sharemap-arrow-up{
		left: 50%;
		top: 10px;
		margin-left: -22px;
	}

	.kt-sharemap-arrow-bottom{
		left: 50%;
		bottom: 10px;
		margin-left: -22px;
	}

	.kt-sharemap-arrow-left{
		left: 10px;
		top: 50%;
		margin-top: -22px;
	}

	.kt-sharemap-arrow-right{
		right: 10px;
		top: 50%;
		margin-top: -22px;
	}


	.kt-map-img{
		max-width: 100%;

	}

    .kt-box-renkei-map-container {

        aspect-ratio: 702 / 382;
        max-width: 702px;

        background-image: url(../images/map_kitakon.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .kt-box-renkei-map-container>div {
        aspect-ratio: 158 / 109.5;
        /*158 / 108;*/
        width: 22.4%;
        /*22.5071%;*/
        float: left;
        box-sizing: border-box;
        float: left;
    }

    .kt-box-renkei-map-container>div>a {
        display: block;
        width: 100%;
        aspect-ratio: 158 / 108;
    }

    .kt-box-renkei-map-container>div>a>span {
        display: block;
        width: 100%;
        aspect-ratio: 158 / 108;
        overflow: hidden;
        text-indent: -999px;
        transition: opacity .35s ease-out;
        background-color: rgba(255, 0, 0, 1);
        opacity: 0;
    }

    .kt-box-renkei-map-container>div>a:hover>span {
        opacity: .33;
    }

    .kt-box-renkei-map-container>div:nth-child(1),
    .kt-box-renkei-map-container>div:nth-child(2),
    .kt-box-renkei-map-container>div:nth-child(3),
    .kt-box-renkei-map-container>div:nth-child(4) {


        margin-top: 5.75915%;
        /*11.5183%;*/
        /*44px;*/
    }

    .kt-box-renkei-map-container>div:nth-child(1),
    .kt-box-renkei-map-container>div:nth-child(5) {
        margin-left: 7.4074%;
        /*52px*/
    }

    .kt-box-renkei-map-container>div:nth-child(9) {
        margin-left: 29.8074%;
        /* 7.4074%;*/
    }

/*  For Pinch    */


div.page {
  max-width: 100vw;
  text-align: left;
}

.pinch-zoom-parent {
 /* height: 80vh;*/
  /*width: 90vw;*/
	width: 100vw;
	height: 100vh;
}

/*img {
  /*height: 20vh;*/
	/* width:  100vw;
} */


.kt-map-img-pc-only{
	display: none;
}

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


	/*

	.kt-map-img-pc-only{
		display: block;
	}

	.pinch-zoom-parent {
		display: none;
	}
*/

}



/*  For Pinch end    */


@media screen and (max-height: 767px) and (orientation: landscape) {　


	.kt-map-img{
		height: 100%;
		width: auto;

	}

}