/* ------------------------------------
// cmps
------------------------------------ */
.map {
  margin: 3rem 0;
}
.map iframe {
  aspect-ratio: 2/1;
}
@media screen and (max-width: 768px) {
  .map iframe {
    aspect-ratio: 2/2;
  }
}

#map_med {
  margin: 3rem 0;
  aspect-ratio: 2/1;
}
@media screen and (max-width: 768px) {
  #map_med {
    aspect-ratio: 2/2;
  }
}

/* ------------------------------------
// #searchBox
------------------------------------ */
#searchBox .clinicNumber {
  margin: -2rem 0 3rem;
}
#searchBox .clinicNumber strong {
  font-size: clamp(3rem, 2.8vw, 4rem);
  display: inline-block;
  margin: 0 1rem;
}
#searchBox .clinicNameSearch {
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem 1.5rem;
  align-items: center;
}
#searchBox .clinicNameSearch p {
  font-weight: bold;
  font-size: 1.8rem;
}
#searchBox .clinicNameSearch input {
  padding: 1.5rem 1rem;
  border: 1px solid #828282;
  border-radius: 5px;
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}
#searchBox .clinicNameSearch button {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  grid-column: 2/3;
  padding: 1.5rem 5rem;
  background: #084B7D;
  border-radius: 5px;
  font-size: clamp(1.6rem, 1.7vw, 2.4rem);
  font-weight: 500;
  color: #fff;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: fit-content;
  line-height: 1;
}
#searchBox .clinicNameSearch button::before {
  content: "";
  width: 3rem;
  aspect-ratio: 1;
  background: url(/cms/wp-content/themes/ooms/img/icon_searchbtn.svg) no-repeat center/contain;
  display: block;
}
@media screen and (max-width: 768px) {
  #searchBox .clinicNameSearch {
    grid-template-columns: 1fr;
  }
  #searchBox .clinicNameSearch button {
    grid-column: 1/2;
  }
}
#searchBox .searchLink li + li {
  margin-top: 1rem;
}
#searchBox .searchLink a {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 2rem;
  background: #084B7D;
  border-radius: 5px;
  font-size: clamp(1.6rem, 1.7vw, 2.4rem);
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
#searchBox .searchLink a::before {
  content: "";
  width: 3rem;
  aspect-ratio: 1;
  background: url(/cms/wp-content/themes/ooms/img/icon_searchbtn.svg) no-repeat center/contain;
  display: block;
}
#searchBox .searchLink a.areaSearch::before {
  background: url(/cms/wp-content/themes/ooms/img/icon_searchbtn.svg) no-repeat center/contain;
}
#searchBox .searchLink a.clinicList::before {
  background: url(/cms/wp-content/themes/ooms/img/icon_list.svg) no-repeat center/contain;
}
#searchBox .searchLink a.back {
  background: #00365E;
}
#searchBox .searchLink a.back::before {
  mask: url(/cms/wp-content/themes/ooms/img/icon_search.svg) no-repeat center/contain;
  background: #fff;
}

/* ------------------------------------
// area
------------------------------------ */
.univHospital {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}
.univHospital li {
  display: grid;
  grid-template-columns: subgrid;
}
.univHospital a {
  display: grid;
  grid-template-columns: 1fr clamp(1.4rem, 1.3vw, 1.8rem);
  gap: 0.5rem;
  align-items: center;
  padding: 1rem 1rem 1rem 1rem;
  background: #fff;
  position: relative;
}
.univHospital a:hover {
  background: #FFF8EB;
}
.univHospital a::after {
  content: "";
  display: block;
  width: clamp(1.4rem, 1.3vw, 1.8rem);
  aspect-ratio: 1;
  background: url(/cms/wp-content/themes/ooms/img/icon_openwin.svg) no-repeat center/contain;
}
@media screen and (max-width: 768px) {
  .univHospital {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.areaCategory {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem 1rem;
}
.areaCategory dt {
  text-align: center;
  background: rgba(164, 202, 255, 0.5);
  place-content: center;
  place-items: center;
  padding: 0 0.5rem;
}
.areaCategory dd {
  border-left: 2px solid #084B7D;
  padding-left: 1rem;
}
@media screen and (max-width: 768px) {
  .areaCategory {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1rem;
  }
  .areaCategory dt {
    padding: 1rem 0.5rem;
    font-weight: bold;
  }
  .areaCategory dd {
    border-left: none;
    padding: 0.5rem 0 3rem 0;
  }
}
.areaCategory ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.areaCategory ul + ul {
  margin-top: 1rem;
}
.areaCategory ul li {
  display: grid;
  grid-template-columns: subgrid;
}
.areaCategory ul a {
  display: grid;
  grid-template-columns: 1fr clamp(0.8rem, 0.6vw, 0.9rem);
  gap: 0.5rem;
  align-items: center;
  padding: 1rem 0.5rem 1rem 0.5rem;
  background: #fff;
  position: relative;
}
.areaCategory ul a:hover {
  background: #FFF8EB;
}
.areaCategory ul a::after {
  content: "";
  display: block;
  width: clamp(0.8rem, 0.6vw, 0.9rem);
  aspect-ratio: 0.8660254038;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #282828;
}
@media screen and (max-width: 1024px) {
  .areaCategory ul {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .areaCategory {
    display: grid;
    grid-template-columns: 1fr;
  }
  .areaCategory ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cliniclist {
  border-top: 1px solid #828282;
  border-left: 1px solid #828282;
  border-collapse: collapse;
  font-size: clamp(1.4rem, 1vw, 1.5rem);
  display: grid;
  grid-template-columns: 24em max-content max-content 1fr;
}
.cliniclist th,
.cliniclist td {
  background: #fff;
  vertical-align: middle;
  padding: 1rem 1rem;
  border-right: 1px solid #828282;
  border-bottom: 1px solid #828282;
  font-weight: 500;
  place-items: center;
  place-content: center;
}
.cliniclist thead,
.cliniclist tbody {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4;
}
.cliniclist tr {
  display: inherit;
  grid-template-columns: inherit;
  grid-column: inherit;
}
.cliniclist thead th {
  background: #454545;
  color: #fff;
}
.cliniclist tbody th {
  text-align: left;
}
.cliniclist tbody th a {
  color: #2A7EF3;
  text-decoration: underline;
}
.cliniclist tbody td {
  background: #F3F3F3;
}
.cliniclist tbody td:nth-child(2) {
  white-space: nowrap;
}
.cliniclist tbody td:nth-child(3) {
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .cliniclist {
    grid-template-columns: 20em 1fr 1fr;
  }
  .cliniclist thead,
  .cliniclist tbody {
    grid-column: span 3;
  }
  .cliniclist tr {
    grid-template-areas: "clinic kubun doctor" "clinic address address";
  }
  .cliniclist thead th {
    padding: 0.5rem 1rem;
  }
  .cliniclist thead th br {
    display: none;
  }
  .cliniclist thead th:nth-of-type(1) {
    grid-area: clinic;
  }
  .cliniclist thead th:nth-of-type(2) {
    grid-area: kubun;
  }
  .cliniclist thead th:nth-of-type(3) {
    grid-area: doctor;
  }
  .cliniclist thead th:nth-of-type(4) {
    grid-area: address;
  }
  .cliniclist tbody th {
    grid-area: clinic;
    font-weight: bold;
    border-bottom: 2px solid;
  }
  .cliniclist tbody td {
    padding: 0.5rem 1rem;
    background: #F3F3F3;
    font-size: 1.3rem;
  }
  .cliniclist tbody td:nth-of-type(1) {
    grid-area: kubun;
  }
  .cliniclist tbody td:nth-of-type(2) {
    grid-area: doctor;
  }
  .cliniclist tbody td:nth-of-type(3) {
    grid-area: address;
    border-bottom: 2px solid;
  }
}
@media screen and (max-width: 768px) {
  .cliniclist {
    grid-template-columns: 1fr 1fr;
  }
  .cliniclist tr {
    grid-template-areas: "clinic clinic" "kubun doctor" "address address";
  }
  .cliniclist thead th {
    background: #454545;
    color: #fff;
    padding: 0.5rem 1rem;
  }
  .cliniclist thead th br {
    display: none;
  }
  .cliniclist tbody th {
    font-weight: bold;
    border-bottom: 1px solid;
  }
  .cliniclist tbody td {
    padding: 0.5rem 1rem;
    background: #F3F3F3;
    font-size: 1.3rem;
  }
  .cliniclist tbody td:last-child {
    border-bottom: 2px solid;
  }
}

.clinicData {
  border-top: 1px solid #828282;
  border-left: 1px solid #828282;
  border-collapse: collapse;
  font-size: clamp(1.4rem, 1vw, 1.5rem);
  display: grid;
  grid-template-columns: max-content 1fr;
}
.clinicData th,
.clinicData td {
  background: #fff;
  vertical-align: middle;
  padding: 1rem 1rem;
  border-right: 1px solid #828282;
  border-bottom: 1px solid #828282;
  font-weight: 500;
}
.clinicData tbody {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}
.clinicData tr {
  display: inherit;
  grid-template-columns: inherit;
  grid-column: inherit;
}
.clinicData tbody th {
  font-weight: 600;
  text-align: left;
  background: #F3F3F3;
}
.clinicData tbody td a {
  color: #2A7EF3;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .clinicData {
    grid-template-columns: 1fr;
  }
  .clinicData tbody {
    grid-column: span 1;
  }
  .clinicData tbody th {
    font-weight: bold;
    background: #F3F3F3;
  }
  .clinicData tbody td {
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
  }
}