@charset "UTF-8";

/* =====================
  bg
===================== */
article.bg .u-inner {
  padding-top: 153px;
  max-inline-size: 1120px;
  padding-bottom: 39px;
}
@media not all and (min-width: 768px) {
  article.bg .u-inner {
    padding-top: calc((100 / 750) * 167 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
    padding-bottom: calc((100 / 750) * -20 * 1vw);
  }
}
article.bg .u-hgroup {
  margin-bottom: 70px;
}
@media not all and (min-width: 768px) {
  article.bg .u-hgroup {
    margin-bottom: calc((100 / 750) * 93 * 1vw);
  }
}

/* =====================
  unit
===================== */
article.unit {
  max-inline-size: 1060px;
  margin-inline: auto;
  margin-bottom: 94px;
  display: grid;
  grid-template-areas:
    'h3 h3'
    'picture iframe'
    'address a';
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 6px;
}
article.unit[data-col='1'] {
  grid-template-areas:
    'h3 h3'
    'picture picture'
    'iframe iframe'
    'address a';
  grid-template-rows: auto auto auto;
}
@media not all and (min-width: 768px) {
  article.unit {
    display: block;
  }
}
article.unit h3 {
  grid-area: h3;
}
article.unit picture {
  grid-area: picture;
}
article.unit iframe {
  grid-area: iframe;
}
article.unit address {
  grid-area: address;
}
article.unit a {
  grid-area: a;
}

@media not all and (min-width: 768px) {
  article.unit {
    margin-bottom: calc((100 / 750) * 134 * 1vw);
  }
}
article.unit h3 {
  background: #000;
  color: white;
  border-radius: 10px;
  font-family: var(--mincho);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto 1fr;
  align-items: center;
  font-size: 24px;
  gap: 10px;
  margin-bottom: 30px;
  padding-block: 17px;
  padding-inline: 30px;
}
@media not all and (min-width: 768px) {
  article.unit h3 {
    border-radius: calc((100 / 750) * 10 * 1vw);
    font-size: calc((100 / 750) * 36 * 1vw);
    padding-block: calc((100 / 750) * 20 * 1vw);
    padding-inline: calc((100 / 750) * 20 * 1vw);
    margin-bottom: calc((100 / 750) * 40 * 1vw);
  }
}
article.unit h3::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../img/common/tri-line.svg');
  width: 17px;
  aspect-ratio: 17 / 16;
}
@media not all and (min-width: 768px) {
  article.unit h3::before {
    width: calc((100 / 750) * 34 * 1vw);
  }
}

/* ==== iframe ==== */
article.unit iframe {
  width: 100%;
  height: 350px;
}
article.unit[data-col='1'] iframe {
  height: 500px;
  margin-top: 6px;
}
@media not all and (min-width: 768px) {
  article.unit iframe,
  article.unit[data-col='1'] iframe {
    height: calc((100 / 750) * 600 * 1vw);
    margin-top: calc((100 / 750) * 20 * 1vw);
  }
}

/* ==== address ==== */
article.unit address {
  line-height: 2.12;
  margin-top: 18px;
}
@media not all and (min-width: 768px) {
  article.unit address {
    font-size: calc((100 / 750) * 26 * 1vw);
    margin-top: calc((100 / 750) * 23 * 1vw);
  }
  article.unit address a {
    text-decoration: underline;
    color: var(--red);
  }
}

/* ==== anchor ==== */
article.unit .u-anchor {
  width: 283px;
  margin-top: 31px;
  margin-inline: auto 0;
}
@media not all and (min-width: 768px) {
  article.unit .u-anchor {
    width: calc((100 / 750) * 491 * 1vw);
    margin-inline: auto;
    margin-top: calc((100 / 750) * 25 * 1vw);
  }
}