@charset "UTF-8";

/* ==========================================
   アクセス（TOP の access）
   XD: 01_TOP_SP の access（375px。見出し y=3630.56、カード x=14.5 y=3706 345×600）、01_TOP_PC の access（1366px。見出し y=3736、カード x=203 y=3827 960×600）
   y は XD の値（カードの上端からの相対値は、行の高さを決めるときの根拠）
   ========================================== */
.access {
  margin: 0 0 80px; /* XD SP: カードの下端 4306 → 次の contact の上端 4386 */
}

.access__title {
  /* XD SP: 見出し YuGo-Bold 30px・字間 3px・中央（x=123.5 w=129、ベースライン 3656.56）、波線 x=124.29 y=3655.44 128.58×9.99。カードの上端 3706 まで 44.44 */
  position: relative;
  display: block;
  width: fit-content;
  height: 31px;
  margin: 0 auto 44.44px;
  padding: 1px 0 0 3px; /* 左：最後の字の後の字間を中央揃えから外す。上：ベースライン */
  font-family: var(--font-ja);
  font-size: 30px;
  font-weight: 700;
  line-height: 1; /* 30px ÷ 30px */
  letter-spacing: 0.1em; /* 3px ÷ 30px */
  color: var(--color-text);
}

.access__title::after {
  content: "";
  position: absolute;
  bottom: -3.87px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 9.99px;
  background-image: url("../../img/wavyline.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

.access-box {
  /* XD SP: カード 345×600・角丸 50・影 0 3 3。左上の緑の列 139×350、その右が値、下が地図 345×249 */
  display: grid;
  grid-template-columns: 139px 1fr;
  grid-template-rows: 350px 249px;
  width: min(345px, 100% - 30px);
  margin: 0 auto;
  border-radius: 50px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.access-box__sidebar {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  background-color: var(--color-main);
}

.access-box__label {
  /* XD SP: 見出し（会社名ほか）YuGo-Bold 16px・x=34.5。ベースライン 3752・3798・3884・3930（カードの上端から 46・92・178・224） */
  margin: 0;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1; /* 16px ÷ 16px */
  color: var(--color-text);
}

.access-box__sidebar-labels {
  padding: 32.5px 0 0 20px;
}

.access-box__label--name,
.access-box__label--tel {
  height: 46px;
}

.access-box__label--address {
  height: 86px; /* 値が 3 行 */
}

.access-box__sidebar-map {
  /* XD SP: Google マップ（ベースライン 3998）と 拡大地図を表示（YuGo-Bold 12px・ベースライン 4022・下線 0.5px） */
  position: absolute;
  top: 278.5px;
  left: 20px;
}

.access-box__map-link {
  display: block;
  margin-top: 10.4px;
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1667; /* 14px ÷ 12px */
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3.5px;
}

.access-box__info {
  grid-column: 2;
  grid-row: 1;
  padding: 29.7px 20px 0;
}

.access-box__info-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-box__item {
  /* XD SP: 値 YuGo-Medium 14px・x=173.5。住所は幅 126 で 3 行（行の高さ 21）、営業時間は 2 行（行の高さ 24） */
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5; /* 21px ÷ 14px */
  color: var(--color-text);
}

.access-box__item--name {
  height: 45px;
}

.access-box__item--address {
  height: 87px;
}

.access-box__item--tel {
  height: 43.5px;
}

.access-box__item--hours {
  line-height: 1.7143; /* 24px ÷ 14px */
}

.access-box__info-list address {
  max-width: 126px;
  font-style: normal;
}

.access-box__info-list a {
  color: inherit;
  text-decoration: none;
}

.access-box__line {
  display: block;
}

.access-box__item--hours .access-box__line {
  /* 受付時間の「10:00〜18:00」と「（土日祝を除く）」は、それぞれの中で折り返さない */
  white-space: nowrap;
}

.access-box__map {
  grid-column: 1 / 3;
  grid-row: 2;
  min-height: 0;
}

.access-box__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (width >= 768px) {
  .access {
    margin-bottom: 160px;
  }

  .access__title {
    /* XD PC: 見出し 40px・字間 4px（x=597 w=172、ベースライン 3771）、波線 x=597.38 y=3762.83 171.43×13.32。カードの上端 3827 まで 48.6 */
    height: auto;
    margin-bottom: 48.6px;
    padding: 0 0 0 4px;
    font-size: 40px;
    line-height: 42.4px; /* 比率（1.06）にすると 1/64px ずれて位置が 1px 動くので px のまま（AUDIT CSS-1 の要確認） */
    letter-spacing: 0.1em;
  }

  .access__title::after {
    bottom: 2.3px;
    height: 13.32px;
  }

  .access-box {
    /* XD PC: カード 960×600・角丸 100。緑の列 250×600、値の領域 710×300、地図 710×300（右下が丸い） */
    grid-template-columns: 250px 1fr;
    grid-template-rows: 300px 300px;
    width: min(960px, 100% - 32px);
    border-radius: 100px;
  }

  .access-box__sidebar {
    grid-row: 1 / 3;
  }

  .access-box__sidebar-labels {
    /* XD PC: 見出し YuGo-Bold 20px・x=253・行の間隔 50（ベースライン 3925・3975・4025・4075） */
    padding: 66.1px 0 0 50px;
  }

  .access-box__label {
    font-size: 20px;
    line-height: 2.5; /* 50px ÷ 20px */
  }

  .access-box__label--name,
  .access-box__label--address,
  .access-box__label--tel {
    height: auto;
  }

  .access-box__sidebar-map {
    /* XD PC: Google マップ（20px・ベースライン 4168）、拡大地図を表示（16px・ベースライン 4211） */
    top: 309.1px;
    left: 50px;
  }

  .access-box__map-link {
    margin-top: 7.4px;
    font-size: 16px;
    line-height: 1.5; /* 24px ÷ 16px */
  }

  .access-box__info {
    /* XD PC: 値 YuGo-Medium 16px・x=503・行の間隔 50（ベースライン 3923・3973・4023・4073）。住所・営業時間は 1 行 */
    padding: 66.1px 20px 0 50px;
  }

  .access-box__item {
    font-size: 16px;
    line-height: 3.125; /* 50px ÷ 16px */
  }

  .access-box__item--name,
  .access-box__item--address,
  .access-box__item--tel {
    height: auto;
  }

  .access-box__item--hours {
    line-height: 3.125; /* 50px ÷ 16px */
  }

  .access-box__info-list address {
    max-width: none;
  }

  .access-box__line {
    display: inline;
  }

  .access-box__map {
    grid-column: 2;
  }
}