@charset "UTF-8";
/* arguments inittial */
/* font style */
/* site style */
/* [ opacity ]
-------------------------------------------------*/
/* [ display style ]
-------------------------------------------------*/
/* [ background-image ]
-------------------------------------------------*/
/* [ writing-mode ]
-------------------------------------------------*/
/* [ illustrator & photoshop letter spacing ]
-------------------------------------------------*/
/* [ easy breakpoint ]
-------------------------------------------------*/
/* [ easy transform ]
-------------------------------------------------*/
.fv {
  position: relative;
  width: 100%;
  min-height: 480px;
  height: 60vh;
}
.fv-img {
  background-image: url("../img/town-planning/fv-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}
@media (min-width: 768px) {
  .fv-img {
    background-image: url("../img/town-planning/fv-img-pc.jpg");
  }
}
.fv-img:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  z-index: 3;
}
@media (min-width: 768px) {
  .fv {
    height: 70vh;
  }
}
.fv .wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.fv-caption {
  position: absolute;
  z-index: 4;
  left: 5px;
  bottom: 5px;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 500;
}

.headbtn {
  padding: 30px 15px;
}
@media (min-width: 768px) {
  .headbtn {
    padding: 70px 15px 0;
  }
}
.headbtn-title {
  text-align: center;
  position: relative;
  z-index: 6;
  max-width: 300px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .headbtn-title {
    transform: translateY(-100%);
    padding: 0 8rem;
    max-width: none;
  }
}

.titlearea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 15px;
  position: relative;
  z-index: 3;
  padding: 0 15px 30px;
}
@media (min-width: 768px) {
  .titlearea {
    margin-top: 0;
    padding-bottom: 70px;
  }
}
.titlearea-eng {
  margin-bottom: -12vw;
}
@media (min-width: 768px) {
  .titlearea-eng {
    margin-bottom: -80px;
  }
}
.titlearea-eng.title-access {
  width: 100%;
  max-width: 1200px;
}
.titlearea-eng.title-car {
  margin-bottom: 0;
}

.sup {
  padding-top: 0;
}

.sec01 {
  background: #f1f0ec;
  padding: 60px 0;
}
@media (min-width: 768px) {
  .sec01 {
    padding: 100px 0;
  }
}
.sec01-h2 {
  color: #8a8074;
  padding: 2px 0 4px;
  font-size: 18px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.sec01-h2-img {
  max-height: 15px;
}
@media (min-width: 768px) {
  .sec01-h2-img {
    max-height: none;
  }
}
@media (min-width: 768px) {
  .sec01-h2 {
    gap: 20px;
    font-size: 22px;
    padding: 0;
    line-height: 40px;
  }
}
.sec01-title {
  text-align: center;
  padding: 30px 15px;
}
.sec01-subtext {
  text-align: center;
  font-size: 16px;
  color: #595959;
  font-weight: 500;
  padding: 10px 0 30px;
}
@media (min-width: 768px) {
  .sec01-subtext {
    font-size: 20px;
  }
}
.sec01-subtitle {
  text-align: center;
  font-size: 16px;
  color: #000000;
  font-weight: normal;
  padding: 10px 0 30px;
}
@media (min-width: 768px) {
  .sec01-subtitle {
    font-size: 20px;
  }
}
.sec01-img {
  padding: 20px 15px;
  display: block;
  max-width: 665px;
  margin: 0 auto;
}
.sec01-text {
  text-align: center;
  font-size: 13px;
  line-height: 2.5;
  color: #595959;
  margin-top: 30px;
  font-weight: 400;
}
.sec01-text img {
  padding: 0 10px;
}
@media (min-width: 768px) {
  .sec01-text {
    font-size: 16px;
  }
}

.sec07 {
  padding: 50px 15px 50px;
  font-feature-settings: "palt";
}
@media (min-width: 768px) {
  .sec07 {
    padding: 70px 15px 70px;
  }
}
.sec07 img {
  vertical-align: top;
}
.sec07 sup {
  font-size: 10px;
}
.sec07-intro-flex {
  display: flex;
  flex-direction: column;
}
.sec07-intro-smart, .sec07-intro-resilience {
  padding: 15px;
}
@media (min-width: 768px) {
  .sec07-intro-smart, .sec07-intro-resilience {
    padding: 30px;
  }
}
.sec07-intro-smart .text-black, .sec07-intro-resilience .text-black {
  color: #595757;
}
.sec07-intro-smart-col, .sec07-intro-resilience-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.sec07-intro-smart-col .title, .sec07-intro-resilience-col .title {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 22px;
  border-bottom: 1px solid #fff;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .sec07-intro-smart-col .title, .sec07-intro-resilience-col .title {
    flex-direction: row;
    font-size: 3.45vw;
    letter-spacing: 0.2em;
  }
}
@media screen and (min-width: 900px) {
  .sec07-intro-smart-col .title, .sec07-intro-resilience-col .title {
    font-size: 34px;
  }
}
.sec07-intro-smart-col .title img, .sec07-intro-resilience-col .title img {
  height: 50px;
}
@media (min-width: 768px) {
  .sec07-intro-smart-col .title img, .sec07-intro-resilience-col .title img {
    height: 40px;
  }
}
.sec07-intro-smart-col .text, .sec07-intro-resilience-col .text {
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.sec07-intro-smart-col .text sup, .sec07-intro-resilience-col .text sup {
  font-size: 10px;
}
@media (min-width: 768px) {
  .sec07-intro-smart-col .text, .sec07-intro-resilience-col .text {
    font-size: 23px;
  }
}
.sec07-intro-smart-col .flex, .sec07-intro-resilience-col .flex {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 950px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sec07-intro-smart-col .flex, .sec07-intro-resilience-col .flex {
    flex-direction: row;
  }
}
.sec07-intro-smart-col .flex .col, .sec07-intro-resilience-col .flex .col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  background: #fff;
  padding: 15px;
  letter-spacing: -1px;
  line-height: 1.5;
}
.sec07-intro-smart-col .flex .col .text, .sec07-intro-resilience-col .flex .col .text {
  color: #fff;
  font-size: 14px;
  text-align: center;
}
@media (min-width: 768px) {
  .sec07-intro-smart-col .flex .col .text, .sec07-intro-resilience-col .flex .col .text {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .sec07-intro-smart-col .flex .col.col1, .sec07-intro-resilience-col .flex .col.col1 {
    width: 47.5%;
  }
}
@media (min-width: 768px) {
  .sec07-intro-smart-col .flex .col.col2, .sec07-intro-resilience-col .flex .col.col2 {
    width: calc(52.5% - 15px);
  }
}
.sec07-intro-smart-col .img, .sec07-intro-resilience-col .img {
  position: relative;
}
.sec07-intro-smart-col .img-caption, .sec07-intro-resilience-col .img-caption {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 10px;
  letter-spacing: 0;
  color: #000;
}
.sec07-intro-smart-col .img-caption.wbg, .sec07-intro-resilience-col .img-caption.wbg {
  color: #000;
  text-shadow: 0 0 5px #fff;
}
.sec07-intro-smart-col .img-caption.bbg, .sec07-intro-resilience-col .img-caption.bbg {
  color: #fff;
  text-shadow: 0 0 5px #000;
}
.sec07-intro-smart {
  background: #5bc2d9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec07-intro-smart .flex {
  margin: 0 auto;
  max-width: 800px;
}
.sec07-intro-smart .flex .col .text {
  color: #5bc2d9;
}
.sec07-intro-smart-col {
  color: #fff;
}
.sec07-intro-smartbtn {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .sec07-intro-smartbtn {
    margin-top: 30px;
  }
}
.sec07-intro-smartbtn-btn {
  transition: all 0.4s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  display: inline-block;
}
.sec07-intro-smartbtn-btn:hover {
  transform: translate(-5px, -5px);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.sec07-intro-caption {
  font-size: 10px;
  color: #fff;
  letter-spacing: 0;
}
.sec07-intro-image {
  text-align: center;
}
.sec07-intro-image img {
  vertical-align: top;
}
.sec07-intro-resilience {
  background: #a2926d;
}
.sec07-intro-resilience .flex {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .sec07-intro-resilience .flex {
    flex-direction: row;
  }
}
.sec07-intro-resilience .flex .col {
  padding: 0;
  padding-top: 15px;
}
.sec07-intro-resilience .flex .col .text {
  color: #a2926d;
}
.sec07-intro-caption {
  max-width: 700px;
  margin: 0 auto;
}
.sec07-infra {
  padding: 30px 0 0;
}
@media (min-width: 768px) {
  .sec07-infra {
    padding: 70px 15px 0;
  }
}
.sec07-infra-title {
  font-size: 16px;
  line-height: 1.8;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .sec07-infra-title {
    font-size: 20px;
  }
}
.sec07-infra-image {
  margin: 0 auto;
  margin-top: 30px;
  max-width: 800px;
  position: relative;
}
@media (min-width: 768px) {
  .sec07-infra-image {
    text-align: center;
  }
}
.sec07-infra-image .image-caption {
  font-size: 10px;
  font-weight: normal;
}
@media (min-width: 768px) {
  .sec07-infra-image .image-caption {
    position: absolute;
    left: 25%;
    bottom: 5%;
    z-index: 2;
  }
}
.sec07-infra-flex {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.sec07-infra-caption {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}
.sec07-infra-caption .caption {
  font-size: 10px;
}
.sec07-infra-text {
  margin: 0 auto;
  font-size: 10px;
  padding: 0 15px;
  max-width: 690px;
  width: 100%;
  text-align: left;
  padding-top: 5px;
}
.sec07-infra-icon {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .sec07-infra-icon {
    width: 100%;
    justify-content: center;
  }
}
.sec07-infra-icon .infra {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 768px) {
  .sec07-infra-icon .infra {
    gap: 0;
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.1fr;
    column-gap: 30px;
    row-gap: 10px;
    justify-content: space-between;
    width: 100%;
  }
}
.sec07-infra-icon .infra-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.sec07-infra-icon .infra-icon .icon {
  position: relative;
}
.sec07-infra-icon .infra-icon .icon img {
  display: flex;
  vertical-align: middle;
}
.sec07-infra-icon .infra-icon .text {
  font-size: 10px;
}
.sec07-infra-map {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .sec07-infra-map {
    max-width: 660px;
    width: 100%;
    padding: 10px 0;
  }
}
.sec07-infra-map .map {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .sec07-infra-map .map {
    gap: 0;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    column-gap: 15px;
    row-gap: 10px;
    text-align: left;
  }
}
.sec07-infra-map .map-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.sec07-infra-map .map-icon .icon {
  position: relative;
}
.sec07-infra-map .map-icon .icon img {
  display: flex;
  vertical-align: middle;
}
.sec07-infra-map .map-icon .text {
  font-size: 10px;
}
.sec07-resilience {
  padding: 30px 0 0;
}
@media (min-width: 768px) {
  .sec07-resilience {
    padding: 50px 15px 0;
  }
}
.sec07-resilience-title {
  background: #a2926d;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0;
  padding: 15px;
  text-align: center;
  line-height: 1.5;
  margin-top: 30px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
@media (min-width: 768px) {
  .sec07-resilience-title {
    font-size: 23px;
    padding: 15px;
    letter-spacing: 0.15em;
    margin-top: 50px;
    gap: 10px;
  }
}
.sec07-resilience-title .guideline {
  background: #fff;
  color: #a0906d;
  display: flex;
  align-items: center;
  padding: 0 3px;
  letter-spacing: 0;
  font-size: 10px;
}
@media (min-width: 768px) {
  .sec07-resilience-title .guideline {
    font-size: 19px;
    padding: 0 10px;
  }
}
.sec07-resilience-title .guideline-dum {
  display: none;
}
@media (min-width: 768px) {
  .sec07-resilience-title .guideline-dum {
    display: block;
    width: 6rem;
  }
}
.sec07-resilience-text {
  padding: 15px;
  text-align: left;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .sec07-resilience-text {
    text-align: center;
  }
}
.sec07-resilience-image {
  max-width: 747px;
  margin: 0 auto;
}
.sec07-resilience-image .caption {
  color: #666666;
}
.sec07-resilience-caption {
  font-size: 10px;
  margin-top: 30px;
  max-width: 747px;
  margin: 0 auto;
  letter-spacing: 0;
  line-height: 1.5;
}
.sec07-resilience-caption .captiontitle {
  background: #de5422;
  color: #fff;
  display: inline-block;
  padding: 3px;
  margin-bottom: 5px;
}
.sec07-resilience-flex {
  margin-top: 15px;
}
@media (min-width: 768px) {
  .sec07-resilience-flex {
    margin-top: 30px;
  }
}
.sec07-resilience-flex-col {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}
.sec07-resilience-flex-col .image {
  position: relative;
}
.sec07-resilience-flex-col .image .caption {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #fff;
  font-size: 10px;
}
.sec07-resilience-flex-col .text {
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .sec07-resilience-flex-col .text {
    font-size: 16px;
  }
}
.sec07-resilience-flex-col .text .title {
  font-size: 1.5em;
}
.sec07-resilience-flex-col .text .caption {
  margin-top: 15px;
  display: block;
  font-size: 10px;
}
.sec07-resilience-flex-col .flex {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sec07-resilience-flex-col .flex .col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 900px;
}
@media (min-width: 768px) {
  .sec07-resilience-flex-col .flex .col {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .sec07-resilience-flex-col .flex .col .image {
    width: 40%;
  }
}
.sec07-resilience-flex-col .flex .col .text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) {
  .sec07-resilience-flex-col .flex .col .text {
    width: calc(60% - 30px);
  }
}
.sec07-resilience-flex-col .flex .col .caption01 {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .sec07-resilience-flex-col .flex .col .caption01 {
    position: static;
    text-align: right;
    color: #000;
    padding-top: 5px;
  }
}
.sec07-resilience-flex-col .flex .col .caption02 {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #666666;
  font-size: 10px;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .sec07-resilience-flex-col .flex .col .caption02 {
    position: static;
    text-align: right;
    padding-top: 5px;
  }
}
.sec07-smart {
  padding: 30px 0 0;
}
@media (min-width: 768px) {
  .sec07-smart {
    padding: 50px 15px 0;
  }
}
.sec07-smart-manage {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 30px 0;
}
@media (min-width: 768px) {
  .sec07-smart-manage {
    flex-direction: row;
  }
}
.sec07-smart-manage .manage-col {
  width: 100%;
}
@media (min-width: 768px) {
  .sec07-smart-manage .manage-col {
    width: 50%;
  }
}
.sec07-smart-title {
  background: #5bc2d9;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
  padding: 5px;
  text-align: center;
  line-height: 1.5;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .sec07-smart-title {
    font-size: 28px;
    padding: 15px;
    letter-spacing: 0.15em;
  }
}
.sec07-smart-title .small {
  font-size: 15px;
}
@media (min-width: 768px) {
  .sec07-smart-title .small {
    font-size: 21px;
  }
}
.sec07-smart-title .pcsmall {
  font-size: 18px;
}
@media (min-width: 768px) {
  .sec07-smart-title .pcsmall {
    font-size: 21px;
  }
}
.sec07-smart-radiustitle {
  background: #5bc2d9;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
  padding: 10px;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.15em;
}
@media (min-width: 768px) {
  .sec07-smart-radiustitle {
    font-size: 28px;
    padding: 10px;
  }
}
.sec07-smart-radiustitle .small {
  font-size: 16px;
}
@media (min-width: 768px) {
  .sec07-smart-radiustitle .small {
    font-size: 21px;
  }
}
.sec07-smart-text {
  padding: 15px;
  text-align: left;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .sec07-smart-text {
    text-align: center;
  }
}
.sec07-smart-text .caption {
  display: block;
  text-align: right;
  max-width: 660px;
  margin: 0 auto;
}
.sec07-smart-flex {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 660px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sec07-smart-flex {
    flex-direction: row;
  }
}
.sec07-smart-flex-col {
  border: 2px solid #5bc2d9;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec07-smart-image {
  max-width: 720px;
  margin: 0 auto;
  padding: 15px 0;
}
.sec07-smart-facility {
  display: flex;
  flex-direction: column;
}
.sec07-smart-facility .flex {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 300px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sec07-smart-facility .flex {
    max-width: 600px;
    flex-direction: row;
  }
}
.sec07-smart-facility .col {
  border: 2px solid #00b3c6;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #00b3c6;
  justify-content: space-between;
}
.sec07-smart-facility .col .image {
  background: #fff;
}
.sec07-smart-facility .col .flex {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding-bottom: 5px;
  position: relative;
  width: 100%;
}
.sec07-smart-facility .col .flex .title {
  color: #ffffa7;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}
@media (min-width: 768px) {
  .sec07-smart-facility .col .flex .title {
    font-size: 23px;
  }
}
.sec07-smart-facility .col .flex .text {
  font-size: 14px;
  text-align: center;
  padding: 5px;
  color: #fff;
}
.sec07-smart-facility .col .flex .abs-sup {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ffffa7;
}
.sec07-smart-facility .caption {
  display: block;
  font-size: 10px;
  text-align: right;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding-top: 5px;
}
.sec07-smart-caption {
  margin-top: 15px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  font-size: 10px;
  letter-spacing: 0;
  margin-top: 15px;
  color: #666666;
}
.sec07-smart-subtext {
  color: #0063b2;
  margin-top: 20px;
  text-align: center;
  letter-spacing: 0;
  padding-bottom: 10px;
  font-size: 18px;
}
@media (min-width: 768px) {
  .sec07-smart-subtext {
    font-size: 23px;
  }
}
.sec07-smart-service {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}
.sec07-smart-service .text-blue {
  color: #4871c5;
}
.sec07-smart-service .text-orange {
  color: #ed7c31;
}
.sec07-smart-service .flex {
  width: 100%;
  border: 2px solid #0063b2;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .sec07-smart-service .flex {
    flex-grow: 1;
    width: auto;
  }
}
.sec07-smart-service .flex .subtitle {
  color: #fff;
  background: #0063b2;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  padding: 5px;
}
.sec07-smart-service .flex .fstart {
  margin: 0 auto;
}
.sec07-smart-service .flex .col {
  min-height: 5rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 15px;
  gap: 10px;
  letter-spacing: 0;
  flex-direction: column;
}
.sec07-smart-service .flex .col .inlineflex {
  display: flex;
  letter-spacing: -1px;
}
.sec07-smart-service .flex .col .inlineflex::before {
  content: "■";
}
.sec07-smart-service-caption {
  text-align: center;
  font-size: 10px;
  padding: 15px;
  color: #666666;
}
.sec07-smart-nisumu {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 30px;
  padding-bottom: 15px;
  background: #fff;
}
.sec07-smart-nisumu .sec06-smart-title {
  margin: 0;
  padding: 10px;
}
.sec07-smart-nisumu .logo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5px 0;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .logo {
    flex-direction: column;
    padding: 0 0 15px;
    max-width: 100%;
  }
}
.sec07-smart-nisumu .logo-col1 {
  max-width: 60%;
  padding: 10px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .logo-col1 {
    max-width: none;
    margin: 0;
  }
  .sec07-smart-nisumu .logo-col1 img {
    max-width: 200px;
  }
}
.sec07-smart-nisumu .logo-col2 {
  width: 100%;
  padding: 10px;
  text-align: left;
  line-height: 1.5;
  font-size: 14px;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .logo-col2 {
    font-size: 16px;
    width: auto;
    text-align: left;
  }
}
.sec07-smart-nisumu .logo-col3 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .logo-col3 {
    flex-direction: row;
  }
}
.sec07-smart-nisumu .detail {
  display: flex;
  flex-direction: column-reverse;
  max-width: 600px;
  margin: 0 auto;
  gap: 15px;
  padding: 15px;
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail {
    flex-direction: row;
    gap: 30px;
    max-width: 100%;
    padding: 30px 30px;
    padding-bottom: 0;
  }
}
.sec07-smart-nisumu .detail .caption {
  font-size: 12px;
}
.sec07-smart-nisumu .detail-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col {
    flex-direction: column;
    gap: 0;
  }
}
.sec07-smart-nisumu .detail-col .flex {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col .flex {
    width: 50%;
  }
}
.sec07-smart-nisumu .detail-col .flex .text {
  text-align: left;
  padding: 5px 10px;
  display: inline-block;
  font-size: 12px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col .flex .text {
    font-size: 14px;
  }
}
.sec07-smart-nisumu .detail-col .flex .text span {
  display: inline-block;
  padding-left: 10px;
}
.sec07-smart-nisumu .detail-col .flex .caption {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #fff;
}
.sec07-smart-nisumu .detail-col .image {
  max-width: 100px;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col .image {
    max-width: none;
  }
}
.sec07-smart-nisumu .detail-col .caption {
  padding-bottom: 10px;
  font-size: 10px;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col .caption {
    padding: 0;
  }
}
.sec07-smart-nisumu .detail-col .pbottom {
  padding-bottom: 5px;
}
.sec07-smart-nisumu .detail-col2 {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 15px;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col2 {
    flex-direction: row-reverse;
  }
}
.sec07-smart-nisumu .detail-col3 .title {
  background: #5bc2d9;
  color: #fff;
  text-align: center;
  padding: 8px 5px 5px;
  line-height: 1;
}
.sec07-smart-nisumu .detail-col4 {
  padding-top: 15px;
}
.sec07-smart-nisumu .detail-col4-flex {
  display: flex;
  gap: 15px;
  flex-direction: column;
  padding: 15px 0;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col4-flex {
    flex-direction: row;
  }
}
.sec07-smart-nisumu .detail-col4-flex .text {
  text-align: left;
  padding: 5px 10px;
  display: inline-block;
  font-size: 12px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col4-flex .text {
    font-size: 14px;
    width: 40%;
  }
}
.sec07-smart-nisumu .detail-col4-flex .text span {
  display: inline-block;
  padding-left: 10px;
}
.sec07-smart-nisumu .detail-col4-flex .img {
  text-align: center;
}
@media (min-width: 768px) {
  .sec07-smart-nisumu .detail-col4-flex .img {
    width: 60%;
  }
}
.sec07-smart-nisumu-caption {
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 12px;
  color: #666666;
}
.sec07-smart-camera {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: 30px auto;
  gap: 20px;
}
@media (min-width: 768px) {
  .sec07-smart-camera {
    flex-direction: row;
  }
}
.sec07-smart-camera .image {
  width: 100%;
}
@media (min-width: 768px) {
  .sec07-smart-camera .image {
    width: calc((100% - 20px) / 2);
  }
}
.sec07-smart-camera .image .caption {
  font-size: 10px;
  position: relative;
  z-index: 2;
  margin-top: -15px;
  padding-left: 5px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.8);
}
.sec07-smart-camera .text {
  width: 100%;
  align-self: center;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .sec07-smart-camera .text {
    width: calc((100% - 20px) / 2);
  }
}
.sec07-smart-camera .text .caption {
  display: block;
  margin-top: 20px;
  font-size: 10px;
  letter-spacing: 0;
}

.leadtown {
  padding: 50px 0 50px;
}
.leadtown-title {
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.leadtown-text {
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .leadtown-text {
    font-size: 16px;
    margin-top: 40px;
  }
}
.leadtown-img {
  padding: 30px 15px 0;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) {
  .leadtown-img {
    padding: 50px 15px 0;
  }
}/*# sourceMappingURL=town-planning.css.map */