@charset "UTF-8";

/* =========================================================
  mayor
========================================================= */

/* mayorMainVisual
----------------------------------------------- */
#mayorMainVisual {
  margin-bottom: 40px;
  text-align: center;
}

/* contentPage
----------------------------------------------- */
.contentPage {
  margin-bottom: 50px;
}

/* column-block
----------------------------------------------- */
.column-block {
  display: flex;
  flex-wrap: wrap;
  gap: 100px 40px;
}

.column-block .piece {
  flex-grow: 1;
  flex-basis: calc((100% - 40px) / 2);
}

.column-block .piece h2 {
  margin-bottom: 10px;
  padding: 15px 8px 15px 20px;
  border-bottom: 2px solid var(--ac-color-blue-1);
  background: var(--ac-color-blue-3);
  font-weight: 700;
  font-size: 1.125rem;
}

#mayorDocsAll .more a,
#mayorDocsPhoto .link a {
  border: 1px solid #b5b5b5;
  border-radius: 30px;
  text-decoration: underline;
  text-align: center;
  outline-offset: -4px;
  transition: all 0.25s ease-in-out;
}

#mayorDocsAll .more a,
#mayorDocsPhoto .link a.back_link {
  padding: 10px 45px;
  background: url(/_themes/site/images/ic-docs.svg) 18px center no-repeat var(--mono-color-9);
}

#mayorDocsPhoto .link a.doc_link {
  padding: 10px 58px;
  background: url(/_themes/site/images/ic-tetsuzuki.svg) 16px center no-repeat var(--mono-color-9);
}

#mayorDocsAll .more a:hover,
#mayorDocsPhoto .link a:hover {
  background-color: #b5b5b5;
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
  .column-block {
    flex-direction: column;
    gap: 40px;
  }

  .column-block .piece {
    flex-basis: 0;
    width: 100%;
  }
}

/* mayorDocsAll
----------------------------------------------- */
#mayorDocsAll li {
  display: flex;
  gap: 0 16px;
  position: relative;
  padding: 15px 0;
  border-bottom: 1px dotted #ccc;
}

#mayorDocsAll li a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

#mayorDocsAll li .update_date {
  flex-shrink: 0;
}

#mayorDocsAll .more {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

#mayorDocsAll .more a {
  min-width: 286px;
}

@media only screen and (max-width: 534px) {
  #mayorDocsAll li {
    flex-direction: column;
  }
}

/* mayorDocsPhoto
----------------------------------------------- */
#mayorDocsPhoto .thumb {
  padding-top: 8px;
  text-align: center;
}

#mayorDocsPhoto .thumb img {
  width: 100%;
  max-width: 480px;
}

#mayorDocsPhoto .thumb .title {
  display: block;
  padding-top: 10px;
}

#mayorDocsPhoto .link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 8px;
  padding-top: 30px;
}

#mayorDocsPhoto .link a {
  flex-grow: 1;
  max-width: 286px;
  min-width: 240px;
}

/* mayorTopMenu
----------------------------------------------- */
#mayorTopMenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding-top: 17px;
}

#mayorTopMenu li {
  flex-basis: 226px;
}

#mayorTopMenu li a {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 100px;
  padding: 3px;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,.1);
  background-color: var(--mono-color-9);
  color: inherit;
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  transition: all 0.25s ease-in-out;
}

#mayorTopMenu li a:hover {
  box-shadow: none;
  background-color: var(--ac-color-blue-1);
  color: var(--mono-color-9);
}

#mayorTopMenu li a img[src*="ic-profile.svg"] {
  width: 22%;
  margin: 0 7.8% 0 10.6%;
}

#mayorTopMenu li a img[src*="ic-kaiken.svg"] {
  width: 25.5%;
  margin: 0 5.7% 0 8.8%;
}

#mayorTopMenu li a img[src*="ic-koho.svg"] {
  width: 37.5%;
  margin: 0 6% 0 7.5%;
}

#mayorTopMenu li a img[src*="ic-ugoki.svg"] {
  width: 27.5%;
  margin: 0 9.7% 0 9.7%;
}

#mayorTopMenu li a img[src*="ic-koyaku.svg"] {
  width: 20%;
  margin: 0 5.7% 0 8.8%;
}