@charset "utf-8";


.asobi_map{
	display: none !important;
}

gmp-internal-camera-control{
	display: none !important;
}

.c-contain,
.c-cover{
  position: relative;
  z-index: 1;
}

.c-cover video,
.c-cover img{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}
.c-contain video,
.c-contain img{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.breadthumb_sp{
	display: none;
}

@media(max-width: 768px) {
	.breadthumb_sp{
		display: block;
	}

	.breadthumb_pc{
		display: none;
	}	
}
/* --------------------------------------------------------  */



#page {
    overflow: visible;
}
.breadthumb_pc .container{
	padding: 0;
}

.breadthumb{
    margin-bottom: 2.8rem;
}


.asobiba{}

.asobiba::after {
   content: "";
   display: block;
   clear: both;
}

.gmap{
	float: left;
	width: 50%;
	height: calc(100vh - 80px);
	position: sticky;
	z-index: 1;
	top: 5.5em;
	left: 0;
}
.mapmain{
	/* background: #0f0; */
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.gmap_menu{
	position: absolute;
	z-index: 5;
	background: #FFFFFF;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	top: 2.5rem;
	left: 4rem;
	right: 4rem;
	padding: 11px 15px;
}
.gmap_menu_arrow{
display: none;
}
.gmap_menu_ttl{
    font-size: 14px;
    color: #B6B6B6;
}
.gmap_menu_cat{
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	gap: 10px;
}
.gmap_menu_cat a{
	background: #ECF5F7;
	color: #000;
	border-radius: 100px;
	padding: 7px 12px;
	font-size: 14px;
	line-height: 1;
}


.asobiba_main{
	float: right;
	width: 50%;
	overflow: hidden;
	padding: 0 4rem;
}
.asobiba_area{}
.asobiba_area + .asobiba_area{
	margin-top: 6.4rem;
}
.asobiba_area_ttl{
    font-size: 32px;
    font-size: 2.2em;
    font-weight: 600;
    border-bottom: solid 2px #50B59D;
    padding-bottom: 7px;
    margin-bottom: 1.3em;
}
.asobiba_list{
	border-bottom: 1px dashed #C3C3C3;
	padding-bottom: 1.4rem;
	cursor: pointer;
}

.asobiba_list + .asobiba_list{/* margin-top: 1.3rem; */padding-top: 2.2rem;}




.asobiba_list_ttl{
    padding: 0 0 0 63px;
    font-size: 18px;
    margin-bottom: 1.4em;
    position: relative;
    z-index: 1;
}

.asobiba_list_ttl:before{
	content: "";
	z-index: 1;
	position: absolute;
	background:  50% 50% no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	top: -11px;
	left: 0;
}



.asobiba_list_ttl.-icon1:before{
	background-image: url(../img/map/marker1_icon.svg);
}
.asobiba_list_ttl.-icon2:before{
	background-image: url(../img/map/marker2_icon.svg);
}
.asobiba_list_ttl.-icon3:before{
	background-image: url(../img/map/marker3_icon.svg);
}

.asobiba_list_imgs{
    /* margin-left: -4rem; */
    /* margin-right: -4rem; */
    overflow-y: auto;
}
.asobiba_list_imgs_inner{
    display: flex;
}
.asobiba_list_imgs_inner:after {
    content: "";
    width: 4rem;
    flex-shrink: 0;
    display: none;
}

.asobiba_list_imgs_inner:before {
    content: "";
    width: 4rem;
    flex-shrink: 0;
    display: none;
}

.asobiba_list_img{
   flex-shrink: 0;
   width: 12.4rem;
   aspect-ratio: 100/76;
   overflow: hidden;
   border-radius: 5px;
}
.asobiba_list_img + .asobiba_list_img{
	margin-left: 10px;
}
.asobiba_list_addr{
    margin: 12px 0 0 0;
    padding-left: 26px;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.asobiba_list_addr:before{
	content: "";
	z-index: 1;
	position: absolute;
	background: url(../img/map/icon1.svg) 50% 50% no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	top: 2px;
	left: 0;
}



@media(max-width: 768px) {

	#page {}
	.container{}
	.breadthumb{
    margin-bottom: 0;
}
	.asobiba{
}
	.asobiba::after {}
	.gmap{
    float: none;
    width: auto;
    position: relative;
    height: 74vw;
    background: #D6F0F6;
    top: 0;
}
	.mapmain{
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
}
	.gmap_menu{
    top: 28px;
    left: auto;
    right: 25px;
    min-height: 28vw;
    padding: 11px 15px;
}
	.gmap_menu.on{
		left: 25px;
		padding: 11px 15px 11px 36px;
	}
	.gmap_menu_arrow{
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.gmap_menu_arrow:before{
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		width: 6px;
		height: 6px;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		transform: rotate(-135deg);
		margin: auto;
	}
	.gmap_menu.on .gmap_menu_arrow{
		right: auto;
		width: 25px;
		background: #E8E8E8;
		top: 10px;
		bottom: 10px;
		border-radius: 0 5px 5px 0;
	}
	.gmap_menu.on .gmap_menu_arrow:before{
		transform: rotate(45deg);
	}


	.gmap_menu_ttl{
    font-size: 12px;
    display: none;
}
	.gmap_menu_cat{
    gap: 5px;
    display: none;
}

	.gmap_menu.on .gmap_menu_ttl{
		display: block;
	}
	.gmap_menu.on .gmap_menu_cat{
		display: flex;
	}	

	.gmap_menu_cat a{
    font-size: 13px;
    padding: 5px 10px;
}
	.asobiba_main{
    float: none;
    width: auto;
    padding: 8vw 4% 7vw;
}
	.asobiba_area{}
	.asobiba_area + .asobiba_area{
    margin-top: 17vw;
}
	.asobiba_area_ttl{
    font-size: 18px;
    font-size: 4.8vw;
}
	.asobiba_list{
    padding-bottom: 6vw;
}
	.asobiba_list + .asobiba_list{}
	.asobiba_list_ttl{
    padding: 0 0 0 10vw;
    font-size: 14px;
    font-size: 3.8vw;
}
	.asobiba_list_ttl:before{
    width: 8vw;
    height: 8vw;
    top: -1.2vw;
}
	.asobiba_list_ttl.-icon1:before{}
	.asobiba_list_ttl.-icon2:before{}
	.asobiba_list_ttl.-icon3:before{}
	.asobiba_list_imgs{}
	.asobiba_list_imgs_inner{}
	.asobiba_list_imgs_inner:after {}
	.asobiba_list_imgs_inner:before {
    width: 27vw;
}
	.asobiba_list_img{
    width: 36.2vw;
}
	.asobiba_list_img + .asobiba_list_img{
    margin-left: 2vw;
}
	.asobiba_list_addr{
    font-size: 12px;
    font-size: 3.2vw;
}
	.asobiba_list_addr:before{}

}

/* --------------------------------------------------------  */


.popup{
	position: fixed;
	z-index: 2100000000;
	top: 5.5em;
	left: 0;
	right: 0;
	bottom: 0;
	/* display: flex; */
	/* align-items: center; */
	justify-content: center;
	visibility: hidden;
	transition: transform .2s, opacity .2s, visibility 0s .2s;
	opacity: 0;
}
.popup.open{
    visibility: visible;
    transition: transform .4s, opacity .4s;
    opacity: 1;
}

.popup_box{
	position: absolute;
	z-index: 5;
	background: #fff;
	width: 1080px;
	border-radius: 5px;
	/* padding: 4%; */
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 6rem;
	bottom: 6rem;
}
.popup_close{
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 10px;
	border: none;
	background: none;
	width: 60px;
	height: 60px;
	display: block;
	overflow: hidden;
	text-indent: -999px;
}

.popup_close:after,
.popup_close:before{
	content: "";
	z-index: 1;
	position: absolute;
	background: #000;
	width: 45%;
	height: 2px;
	top:0;
	bottom: 0;
	right:0;
	left: 0;
	margin: auto;
	transform: rotate(45deg);
}
.popup_close:after{
	transform: rotate(-45deg);
}

.popup_box_inner{
    overflow-y: auto;
    /* max-height: 571px; */
    position: absolute;
    top: 70px;
    left: 70px;
    right: 70px;
    bottom: 70px;
}
.popup_bg{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.2);
}

.popup_data{
    display: none;
}
.popup_data.view{
    display: block;
}
.popup_data_inner{
	display: flex;
	align-items:flex-start;
}
.popup_data_img{
	width: 48%;
	margin-right: 4%;
}
.popup_data_img1{
    list-style: none;
    position: relative;
    z-index: 1;
    aspect-ratio: 100/74;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 5px;
}
.popup_data_img1 li{
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.popup_data_img1 li.on{
	z-index: 5;
}


.popup_data_img2{
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 0;
    margin: 16px 0 0;
    gap: 0 9px;
}
.popup_data_img2 li{
    aspect-ratio: 100 / 74;
    overflow: hidden;
    border-radius: 5px;
}

.popup_data_img2 li.on:after,
.popup_data_img2 li.on:before{
	content: "";
	z-index: 1;
	position: absolute;
	
	border:4px solid #fff;

	top:0;
	bottom: 0;
	right:0;
	left: 0;
}
.popup_data_img2 li.on:before{
	z-index: 2;
	border-color: #50B59D;
	border-width: 2px;
}

.popup_data_img3{
	display: none;
}


.popup_data_main{
    flex: 1;
}

.popup_data_main{}
.popup_data_main_ttl1{
    font-size: 32px;
    font-size: 2.2em;
    font-weight: 600;
    border-bottom: solid 2px #50B59D;
    padding-bottom: 7px;
    padding-left: 2.1em;
    margin-bottom: 0.7em;
    position: relative;
    z-index: 1;
}
.popup_data_main_ttl1:before{
	content: "";
	z-index: 1;
	position: absolute;
	background:  50% 50% no-repeat;
	background-size: contain;
	width: 1.5em;
	height: 1.5em;
	top: 0.2em;
	left: 0;
}

.popup_data_main_ttl1.-icon1:before{
	background-image: url(../img/map/marker1_icon.svg);
}
.popup_data_main_ttl1.-icon2:before{
	background-image: url(../img/map/marker2_icon.svg);
}
.popup_data_main_ttl1.-icon3:before{
	background-image: url(../img/map/marker3_icon.svg);
}

.popup_data_main_ttl2{
    font-size: 18px;
    margin-bottom: 1.0em;
    position: relative;
    z-index: 1;
    padding: 0 0 0 12px;
}
.popup_data_main_ttl2:before{
	content: "";
	z-index: 1;
	position: absolute;
	background: #50B59D;
	width: 4px;
	height: 21px;
	top: 7px;
	left: 0;
}
.popup_data_main_list{
    list-style: none;
    margin: 0;
    padding: 0;
}
.popup_data_main_list li{
    padding: 0 0 13px 29px;
    border-bottom: 1px solid #E7E7E7;
    margin-bottom: 12px;
    font-size: 16px;
    position: relative;
    z-index: 1;
}
.popup_data_main_list li:before{
	content: "";
	z-index: 1;
	position: absolute;
	background:  50% 50% no-repeat;
	background-size: contain;
	width: 1.5em;
	height: 1.5em;
	top: 0.2em;
	left: 0;
}


.popup_data_main_list .popup_data_main_icon1:before{
	background-image: url(../img/map/icon1.svg);
}
.popup_data_main_list .popup_data_main_icon2:before{
	background-image: url(../img/map/icon2.svg);
}
.popup_data_main_list .popup_data_main_icon3:before{
	background-image: url(../img/map/icon3.svg);
}
.popup_data_main_list .popup_data_main_icon4:before{
	background-image: url(../img/map/icon4.svg);
}



.popup_data_main_btn{
    text-align: center;
    margin-top: 42px;
}
.popup_data_main_btn a{
	background: #50B59D;
	font-size: 16px;
	text-align: center;
	color: #fff;
	display: inline-block;
	padding: 16px 53px 16px 49px;
	border-radius: 100px;
	position: relative;
	z-index: 1;
}

.popup_data_main_btn a:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 24px;
	width: 8px;
	height: 8px;
	margin: auto;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
}

@media(max-width: 1250px) {
	.popup_box{
		width: auto;
		left: 5rem;
		right: 5rem;
	}

}


@media(max-width: 768px) {
	.popup{}
	.popup.open{
    top: 4.5em;
}
	.popup_box{
    left: 1rem;
    right: 1rem;
    top: 1rem;
    bottom: 1rem;
}
	.popup_close{
    width: 50px;
    height: 50px;
    top: 4px;
    right: 4px;
}
	.popup_close:after,
	.popup_close:before{}
	.popup_close:after{}
	.popup_box_inner{
    top: 40px;
    left: 0;
    right: 0;
    bottom: 20px;
}
	.popup_bg{}
	.popup_data{}
	.popup_data.view{}
	.popup_data_inner{
    display: block;
}
	.popup_data_img{
    display: none;
}
	.popup_data_img1{}
	.popup_data_img1 li{}
	.popup_data_img1 li.on{}
	.popup_data_img2{}
	.popup_data_img2 li{}
	.popup_data_img2 li.on:after,
	.popup_data_img2 li.on:before{}
	.popup_data_img2 li.on:before{}


	.popup_data_img3{
	    margin-left: 0;
	    margin-right: 0;
	    overflow-y: auto;
	    display: block;
	    margin-bottom: 10px;
	}
	.popup_data_img3_inner{
 	   display: flex;		
	}

	.popup_data_img3_inner:after,
	.popup_data_img3_inner:before {
	    content: "";
	    width: 22px;
	    flex-shrink: 0;
	}

	.popup_data_img3_img{
	    flex-shrink: 0;
	    width: 12.4rem;
	    aspect-ratio: 100 / 76;
	    overflow: hidden;
	    border-radius: 5px;
	}

    .popup_data_img3_img + .popup_data_img3_img {
        margin-left: 3vw;
    }


	.popup_data_main{}
	.popup_data_main{}
	.popup_data_main_ttl1{
    font-size: 18px;
    padding-bottom: 14px;
    padding-left: 2.7em;
    padding-top: 3px;
    margin-bottom: 15px;
    margin-left: 22px;
    margin-right: 22px;
}
	.popup_data_main_ttl1:before{
    width: 40px;
    height: 40px;
    top: 0;
}
	.popup_data_main_ttl1.-icon1:before{}
	.popup_data_main_ttl1.-icon2:before{}
	.popup_data_main_ttl1.-icon3:before{}
	.popup_data_main_ttl2{
    font-size: 14px;
    margin-bottom: 11px;
    margin-left: 22px;
    margin-right: 22px;
}
	.popup_data_main_ttl2:before{
    top: 4px;
    height: 17px;
}
	.popup_data_main_list{
    margin-left: 22px;
    margin-right: 22px;
}
	.popup_data_main_list li{
    font-size: 12px;
}
	.popup_data_main_list li:before{}
	.popup_data_main_list .popup_data_main_icon1:before{}
	.popup_data_main_list .popup_data_main_icon2:before{}
	.popup_data_main_list .popup_data_main_icon3:before{}
	.popup_data_main_list .popup_data_main_icon4:before{}
	.popup_data_main_btn{
    margin-top: 28px;
}
	.popup_data_main_btn a{
    font-size: 14px;
    padding: 11px 47px 11px 32px;
}
	.popup_data_main_btn a:before{}

}