@charset "UTF-8";
/* =====================
	地区ガバナーエレクトの紹介ページ
 ======================= */

/** ------------------------ governor ------------------------ **/
.governor .governor-inner {
  padding: 0 8.24%;
}

.governor section {
  margin-bottom: 6.34%;
}

.governor .sec-ttl {
  font-size: 133.33%;
  font-weight: 500;
  margin-bottom: 0.21em;
}

.governor .list-wrapper {
  padding-left: 15.77%;
  line-height: 1.78;
}

.governor .dl-list {
  display: grid;
  grid-template-columns: 22.91% max-content;
}

/** ------------------------ profile ------------------------ **/
.governor .profile {
  display: flex;
  column-gap: 1.28em;
}

.governor .profile .governor-img {
  width: 36.48%;
}

.governor .profile .governor-info {
  flex: 1;
  font-weight: 500;
}

.governor .profile .sec-ttl.profile-ttl {
  margin-bottom: 0.88em;
}

.governor .profile .governor-name {
  font-size: 216.67%;
  margin-bottom: 0.28em;
}

.governor .profile .governor-name ruby rt {
  font-size: 41.03%;
  ruby-align: center;
}

.governor .profile .governor-info-list dt,
.governor .profile .governor-info-list dd {
  display: table-cell;
}

/** ------------------------ biography ------------------------ **/
.governor .biography .dl-list .dt-current {
  opacity: 0;
}

.governor .biography .dl-list .dd-current {
  text-align: right;
  margin-top: 0.39em;
}

/** -------------------- タブレット -------------------- **/
@media (max-width: 1280px) {
}

/** -------------------- スマホ -------------------- **/
@media (max-width: 699px) {
  /** ------------------------ governor ------------------------ **/
  .governor .governor-inner {
    padding: 0;
  }

  .governor section {
    margin-bottom: 50px;
  }

  .governor .sec-ttl {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .governor .list-wrapper {
    padding-left: 50px;
  }

  .governor .dl-list {
    grid-template-columns: 1fr;
    width: fit-content;
  }

  .governor .dl-list dt:nth-of-type(n + 2) {
    margin-top: 1.5em;
  }

  /** ------------------------ profile ------------------------ **/
  .governor .profile {
    flex-direction: column;
    align-items: center;
    row-gap: 25px;
  }

  .governor .profile .governor-img {
    width: 200px;
  }

  .governor .profile .sec-ttl.profile-ttl {
    margin-bottom: 10px;
  }

  .governor .profile .governor-name {
    font-size: 30px;
    margin-bottom: 10px;
  }

  .governor .profile .governor-name ruby rt {
    font-size: 12px;
  }

  /** ------------------------ biography ------------------------ **/
  .governor .biography .dl-list .dt-current {
    margin: 0;
  }

  .governor .biography .dl-list .dd-current {
    margin: 0;
  }

  /** ------------------------ public-office ------------------------ **/
  .governor .public-office .public-office-list2 {
    margin-top: 1.5em;
  }
}