@charset "utf-8";

:root {
	--fontSize: 16px;
	--mapColor001: #f15c21;
	--mapColor002: #8dc63f;
	--mapColor003: #0067b1;
}

.img_box {
    display: inline-block;
}
.img_box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.sub_facility_guidance {
	display: flex;
	align-items: flex-start;
	gap: 50px;
	font-size: var(--fontSize);
}
.sub_facility_guidance .map {
	margin: 0 auto;
	flex-shrink: 0;
	position: relative;
	font-size: 0;
	background: url(/theme/gcyf/img/page/img_mapBg.png) no-repeat 50% 50%/cover;
}

.map img {
    max-width: 100%;
}
.map svg {
    position: absolute;
    top: 0;
    left: 0;
}
.map svg polygon {
    cursor: pointer;
}
.infoList {
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px 14px;
    font-size: 1em;
    background: #fff;
    border: 1px solid #215297;
    border-radius: 10px;
}
.infoList:not(.active) {
    display: none;
}
.infoList li {
    padding-left: 20px;
    margin-top: 4px;
}
.infoList li:first-of-type {
    margin-top: 0;
}
.infoList li .trigger {
	font-size: var(--fontSize);
}
.infoList li .trigger,
.infoList li a {
    color: inherit;
    display: block;
    font-weight: 500;
    text-decoration: none;

	width: 100%;
	padding: 0;
	text-align: left;
	background-color: transparent;
}
.infoList li .trigger:hover,
.infoList li a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.infoList li .trigger:first-of-type,
.infoList li a:first-of-type {
    text-indent: -20px;
}
.infoList li .trigger:first-of-type::before,
.infoList li a:first-of-type::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    margin-left: 4px;
    text-indent: 0;
    border-radius: 8px;
    vertical-align: top;
    margin-top: 8px;
}
.infoList li.bg-color1 a:first-of-type::before {background: var(--mapColor001);}
.infoList li.bg-color2 a:first-of-type::before {background: var(--mapColor002);}
.infoList li.bg-color3 a:first-of-type::before {background: var(--mapColor003);}
.infoList li.bg-color1 .trigger:first-of-type::before {background: var(--mapColor001);}
.infoList li.bg-color2 .trigger:first-of-type::before {background: var(--mapColor002);}
.infoList li.bg-color3 .trigger:first-of-type::before {background: var(--mapColor003);}
.infoList#list_001 {
    top: 31%;
    right: 46%;
}
.infoList#list_002 {
    top: calc(42% + 2px);
    right: 44%;
}
.infoList#list_003 {
    top: 40%;
    right: 20%;
}

#map_list {
	flex-shrink: 1;
    width: 100%;
	max-width: 480px;
    padding: 28px 32px 15px;
	margin-left: auto;
    border: 3px solid;
    border-radius: 20px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
#map_list.cate_001 {border-color: var(--mapColor001);}
#map_list.cate_002 {border-color: var(--mapColor002);}
#map_list.cate_003 {border-color: var(--mapColor003);}
.map_name {
	font-size: calc( 1.5em + 2px );
    font-weight: 600;
    margin-bottom: 14px;
}
#map_list[class*="cate_"] .map_name::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 30px;
	margin-top: 5px;
	margin-right: 8px;
	vertical-align: top;
	background: no-repeat 50% 50%/auto 26px;
}
#map_list.cate_001 .map_name::before { background-image: url(/img/svg/icon_milestone_001.svg);}
#map_list.cate_002 .map_name::before { background-image: url(/img/svg/icon_milestone_002.svg);}
#map_list.cate_003 .map_name::before { background-image: url(/img/svg/icon_milestone_003.svg);}
.map_text {
	margin-bottom: 16px;
	font-size: calc(1em + 2px);
    word-break: keep-all;
}
.map_info {
	display: flex;
    width: 100%;
	flex-direction: column;
	gap: 16px;
}
.map_info .img_box {
	/* height: 212px; */
	overflow: hidden;
    border-radius: 10px;
}
.map_info .img_box img {
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 56%;
}
.map_info table {
	width: 100%;
	border-top: 2px solid;
}
#map.cate_001 .map_info table {border-color: var(--mapColor001)}
#map.cate_002 .map_info table {border-color: var(--mapColor002)}
#map.cate_003 .map_info table {border-color: var(--mapColor003)}
.map_info table tr {
	border-bottom: 1px solid var(--gray-300);
}
.map_info table th {
	height: 40px;
	padding-top: calc(12px - 8px);
}
.map_info table td {
	padding: 0.75rem 0.5rem calc(0.5rem + 2px);
	word-break: keep-all;
}
.map_info table .new_pg {
	position: relative;
	display: inline-block;
	color: var(--primary_textColor);
}
.map_info table .new_pg::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 16px;
	background: url(/img/svg/theme/icon_link.svg) no-repeat 50% 50%/auto 16px;
	transform: translate(calc(100% + 6px), 4px);
}
.map_info table .new_pg:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.map_info_box {
    transition: opacity 0.3s ease;
}
.fade-out {
    opacity: 0;
}

@media screen and (min-width: 1200px) and (max-width:1560px) {
	/*  */
    .sub_facility_guidance .map {
		width: 62%;
    }
	/*  */
    .infoList#list_001 {
        top: 13%;
        right: auto;
        left: 16%;
    }
    .infoList#list_002 {
        top: 42%;
        right: 43%;
    }
    .infoList#list_003 {
        top: 41%;
        right: 19%;
    }
}
@media screen and (max-width:1199px) {
    /*  */
    .sub_facility_guidance {
        flex-wrap: wrap;
        gap: calc(50px * 0.75);
        justify-content: center;
    }
    .sub_facility_guidance .map {
        flex-shrink: 1;
    }
	/*  */
    .infoList#list_001 {
        top: 13%;
        right: auto;
        left: 16%;
    }
    .infoList#list_002 {
        top: 42%;
        right: 43%;
    }
    .infoList#list_003 {
        top: 41%;
        right: 19%;
    }
	/*  */
	#map_list {
		margin-right: auto;
		width: 480px;
		max-width: 100%;
	}
}
@media screen and (max-width:959px) {
	/*  */
	:root {
		--fontSize: 14px;
	}
	.wrapper.type_sub .header + .inner:has(.sub_facility_guidance) {
		padding-top: 40px;
	}
	/*  */
    .infoList#list_001 {
        top: 13%;
        right: auto;
        left: 16%;
    }
    .infoList#list_002 {
        top: 42%;
        right: 42%;
    }
    .infoList#list_003 {
        top: 41%;
        right: 19%;
    }
}
@media screen and (max-width:767px) {
    /*  */
    .infoList#list_001 {
        top: 7%;
    }
    .infoList#list_002 {
        top: 41%;
        right: 37%;
    }
    .infoList#list_003 {
        right: 10%;
    }
}
@media screen and (max-width:499px) {
    /*  */
	.sub_facility_guidance .map {
        margin-right: -20px;
        margin-left: -20px;
    }
	/*  */
    .infoList#list_001 {
        top: 53%;
        left: 20px;
    }
    .infoList#list_002 {
        top: 21%;
        right: 29%;
    }
    .infoList#list_003 {
        top: 75%;
        right: 20px;
    }
	/*  */
	#map_list {
		padding: 20px;
	}
	#map_list[class*="cate_"] .map_name::before {
		margin-top: 2px;
	}

	.map_info col:first-of-type {
		width: 72px !important;
	}
}