#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: #f1e7c9; padding: 6px 0; color: #7a7461; font-size: 14px; font-feature-settings: "palt"; letter-spacing: 0.2em; text-align: center; /*border-radius: 20px;*/ margin-bottom: 10px; position: relative; /*&::after { content: ""; display: block; position: absolute; top: 3px; left: 3px; box-sizing: border-box; border: 1px solid $map_color1; width: calc(100% - 6px); height: calc(100% - 6px);
}*/ }
#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: 768px) { #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 ul::after { content: ""; display: inline-block; width: 24%; }
#googlemapAPI_BOX #mNav li { color: #f1e7c9; font-size: 15px; background-color: #7a7461; width: 24%; text-align: center; padding: 15px 0; font-feature-settings: "palt"; letter-spacing: 0.05em; position: relative; /*border-radius: 2px;*/ cursor: pointer; box-sizing: border-box; border: 2px solid #7a7461; margin-bottom: 0.75rem; transition: background-color 200ms; }
#googlemapAPI_BOX #mNav li.active, #googlemapAPI_BOX #mNav li:hover { background-color: #f1e7c9; color: #7a7461; border: 2px solid #f1e7c9; }
#googlemapAPI_BOX #mNav li::after { content: ""; display: block; position: absolute; top: 3px; left: 3px; box-sizing: border-box; border: 1px solid #7a7461; width: calc(100% - 6px); height: calc(100% - 6px); }
@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: 768px) { #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 #mSide li { position: relative; border-bottom: 1px solid #dad3c3; padding: 4px 0 4px 23px; font-size: 12px; }
#googlemapAPI_BOX #mWrap #mSide li span { line-height: 1.3; }
#googlemapAPI_BOX #mWrap #mSide li:hover, #googlemapAPI_BOX #mWrap #mSide li.active { background: rgba(255, 255, 255, 0.4); }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mWrap #mSide li { padding: 8px 0 8px 25px; } }
#googlemapAPI_BOX #mWrap #mSide .num { background: #f1e7c9; color: #7a7461 !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 #mSide .num.empty { display: none; }
@media screen and (max-width: 1024px) { #googlemapAPI_BOX #mWrap #mSide .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: 768px) { #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: #dad3c3; */ 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; }