#googlemapAPI_BOX { width: 100%; /*background: $map_color1;*/ padding-bottom: 70px; padding-top: 10px; }
#googlemapAPI_BOX h4 { font-size: 18px; letter-spacing: 0.1em; text-align: center; margin-bottom: 20px; }
#googlemapAPI_BOX h5 { background-color: #2d2d2d; padding: 6px 0; color: #fff; font-size: 14px; font-feature-settings: "palt"; letter-spacing: 0.2em; text-align: center; /*border-radius: 20px;*/ margin-bottom: 10px; position: relative; }
#googlemapAPI_BOX ul, #googlemapAPI_BOX li { padding: 0; list-style: none; }
#googlemapAPI_BOX #lifeinfo { max-width: 1000px; width: 90%; margin: auto; }
#googlemapAPI_BOX #lifeinfo .area .IB .I { margin: 1.02041%; width: 22.95918%; }
@media (max-width: 760px) and (max-aspect-ratio: 128 / 100) { #googlemapAPI_BOX #lifeinfo .area .IB .I { width: 46.93878%; } }
#googlemapAPI_BOX #lifeinfo .mapblock_wrap { margin: 5% auto 1%; }
#googlemapAPI_BOX .how { text-align: center; }
@media screen and (max-width: 599px) { #googlemapAPI_BOX .how { font-size: 0.8rem; } }
#googlemapAPI_BOX #mNav { margin: 2% auto 30px; }
#googlemapAPI_BOX #mNav ul { display: flex; justify-content: space-between; flex-flow: row wrap; margin-top: 40px; }
#googlemapAPI_BOX #mNav li { color: #fff; font-size: 15px; background-color: #2d2d2d; width: 16%; height: 50px; text-align: center; font-feature-settings: "palt"; letter-spacing: 0.05em; position: relative; cursor: pointer; margin-bottom: 0.75rem; transition: background-color 200ms; }
#googlemapAPI_BOX #mNav li span { display: block; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#googlemapAPI_BOX #mNav li.active, #googlemapAPI_BOX #mNav li:hover { background-color: #6f132f; }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mNav li { width: 32.5%; }
  #googlemapAPI_BOX #mNav li:nth-child(n+4) { margin-top: 5px; } }
@media screen and (max-width: 599px) { #googlemapAPI_BOX #mNav li { width: 49.5%; }
  #googlemapAPI_BOX #mNav li:nth-child(n+3) { margin-top: 3px; } }
#googlemapAPI_BOX #mWrap { position: relative; overflow: hidden; max-width: 1080px; margin: 0 auto; height: 620px; font-feature-settings: "pkna" 1; /*
#side01 { li { &.active, &:hover { .num { background: #b59d5c; } } }
}
#side02 { li { &.active, &:hover { .num { background: #cb7b79; } } }
}
#side03 { li { &.active, &:hover { .num { background: #608ea9; } } }
}
#side04 { li { &.active, &:hover { .num { background: #98ad75; } } }
}
#side05 { li { &.active, &:hover { .num { background: #8f7397; } } }
}
#side06 { li { &.active, &:hover { .num { background: #599987; } } }
}
*/ }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mWrap { height: auto; } }
#googlemapAPI_BOX #mWrap li { position: relative; border-bottom: 1px solid #dad3c3; padding: 4px 0 4px 23px; font-size: 12px; }
#googlemapAPI_BOX #mWrap li span { line-height: 1.3; }
#googlemapAPI_BOX #mWrap li:hover, #googlemapAPI_BOX #mWrap li.active { background: rgba(255, 255, 255, 0.4); }
#googlemapAPI_BOX #mWrap li:hover .num, #googlemapAPI_BOX #mWrap li.active .num { background: #6f132f !important; }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mWrap li { padding: 8px 0 8px 25px; } }
#googlemapAPI_BOX #mWrap .num { background: #2d2d2d; color: #fff !important; display: block; position: absolute; top: 2px; left: 0; width: 15px; line-height: 18px; text-align: center; margin: 2px 0; padding: 0; }
#googlemapAPI_BOX #mWrap .num.empty { display: none; }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mWrap .num { top: 6px; } }
#googlemapAPI_BOX #mWrap .txt01 { display: block; float: left; text-align: left; }
#googlemapAPI_BOX #mWrap .txt02 { display: block; float: right; text-align: right; width: 37%; }
#googlemapAPI_BOX #lctMap { height: 100%; /*width: 66%;*/ margin-right: 38%; background: #9aa; }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #lctMap { height: 600px; margin-right: 0; margin-bottom: 20px; } }
@media screen and (max-width: 599px) { #googlemapAPI_BOX #lctMap { height: 320px; } }
#googlemapAPI_BOX #mSide { position: absolute; top: 0; right: 0; width: 37%; height: 100%; }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mSide { position: relative; width: 100%; height: auto; } }
#googlemapAPI_BOX #mSide .sideWrap { width: 100%; height: 100%; padding-left: 1em; overflow-y: auto; position: absolute; top: 0; right: 0; display: none; }
#googlemapAPI_BOX #mSide .sideWrap a { text-decoration: none; color: #000; padding: 2px 0; display: block; overflow: hidden; }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mSide .sideWrap { position: static; height: auto; padding-left: 0; } }
#googlemapAPI_BOX #mSide .sideWrap.active { display: block; }