@charset "UTF-8";

.tp_tit{font-size: 1.8em;text-align: center;animation-name: fadeInUp;}
.tp_tit + p{font-size: 0.8em;margin-top: 0.8em;text-align: center;line-height: 1.8;animation-name: fadeInUp;}

#intro figure{margin-top: 2em;animation-name: fadeInUp;}
#intro figure .cap_b{bottom: 15em;right: 10em;}

#contents{background: #f7f7f7;}
.town_planning_map{margin-top: 2.5em;}
.town_planning_map img{mix-blend-mode: multiply;}
.town_planning_map .cap_o{padding-right: 5.7em;}
.town_planning_map_item{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.town_planning_map_item > li{background: url("../img/town_planning_map_item_bk.webp") center center;border-radius: 1em;box-shadow: 0.2em 0.2em 0.2em rgba(0,0,0,0.5);overflow: hidden;padding: 1.2em;width: 19em;animation-name: fadeInUp;position: absolute;}
.town_planning_map_item > li::before{content: "";display: block; width: calc(100% - 1.2em);height: calc(100% - 1.2em);border: 1px solid #8d8276;position: absolute;top:0;bottom:0;left:0;right: 0;margin: auto;z-index: 1;pointer-events: none;}
.town_planning_map_item > li h4{font-size: 1.2em;color: #8d8376;line-height: 1.2;}
.town_planning_map_item > li h4 + p{font-size: 0.8em;margin-top: 0.5em;}

@media screen and (min-width: 769px) {
.town_planning_map_item > li:nth-of-type(1){top: 1.75em;left: 0;}
.town_planning_map_item > li:nth-of-type(2){top: 13.3em;left: 9em;animation-delay: 0.3s;}
.town_planning_map_item > li:nth-of-type(3){top: 1.75em;left: 20.6em;}
}

@media screen and (max-width: 768px) {
.tp_tit{font-size: 5.5vw;text-align: center;animation-name: fadeInUp;}
.tp_tit + p{font-size: 0.9em;margin-top: 0.8em;text-align: left;line-height: 1.8;}

#intro .wrap1280{padding: 0;}
#intro figure{margin-top: 5vw;}
#intro figure .cap_b{bottom: 8vw;right: 4vw;}

#contents{background: #f7f7f7;overflow: hidden;}
.town_planning_map{margin-top: 1vw;}
.town_planning_map figure{width: 110vw;margin: 0 -9vw;}
.town_planning_map .cap_o{padding-right: 6vw;}
.town_planning_map_item{position: static;}
.town_planning_map_item > li{padding: 1.2em;position: relative;margin-top: 4vw;width: 100%;}
.town_planning_map_item > li h4 + p{font-size: 0.85em;}

}