@charset "utf-8";

/* ==========================================================================
   access.css
   アクセスページ専用スタイル
   ------------------------------------------------------------------------
   ※1rem = 10px（reset.css の html { font-size: 62.5%; } 前提）
   ※タイトルセクション・パンくず・共通見出し（.c-heading）・
     ページ内リンク（.c-anchorlink）の共通スタイルは common.css にあります。
     ここではタイトルセクションの背景画像だけ指定します。
   ※余白・文字サイズはデザインJPG（1:1スケール）の実測値です。
   ========================================================================== */

/* ==========================================================================
   1. タイトルセクション
   ========================================================================== */
.c-pagetitle--access {
  background-image: url("/assets/img/access/img_title_bgimg_access.jpg");
}

/* ==========================================================================
   2. 本社所在地
   ========================================================================== */
.p-office {
  margin-bottom: 7.2rem;
}

.p-office__body {
  display: grid;
  grid-template-columns: 1fr 50rem;
  align-items: start;
  column-gap: 5.1rem;
  margin-top: 4.8rem;
}

.p-office__name {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border-blue);
  color: var(--color-main);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-office__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  column-gap: 4rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border-blue);
}

.p-office__label {
  color: var(--color-main);
  font-weight: 700;
}

/* Googleマップを別タブで開くボタン。共通の.c-btnより小ぶりなページ固有サイズ */
.p-office__maplink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  width: 25.1rem;
  height: 5.2rem;
  margin-top: 2rem;
  border: 1px solid var(--color-main);
  border-radius: 10px;
  color: var(--color-main);
}

/* 外部リンクアイコン */
.p-office__mapicon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/common/icon_externallink.svg") no-repeat center center / contain;
          mask: url("/assets/img/common/icon_externallink.svg") no-repeat center center / contain;
}

@media (hover: hover) {
  .p-office__maplink:hover {
    background-color: var(--color-main);
    color: #fff;
  }
}

/* 埋め込み地図。縦横比はデザイン実測（PC 500×399／SP 324×259）から5:4 */
.p-office__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border: 0;
  border-radius: 10px;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .p-office {
    margin-bottom: 4rem;
  }

  .p-office__body {
    grid-template-columns: 1fr;
    margin-top: 3.2rem;
  }

  .p-office__name {
    font-size: 2rem;
  }

  /* ラベルと値を縦に積む */
  .p-office__row {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
    padding: 2.4rem 0 2rem;
  }

  .p-office__label {
    line-height: 1.6;
  }

  .p-office__maplink {
    width: 100%;
    height: 5.6rem;
  }

  .p-office__map {
    margin-top: 2.4rem;
  }
}

/* ==========================================================================
   3. 交通案内
   ========================================================================== */
.p-route {
  margin-bottom: 14.4rem;
  padding: 7.2rem 0;
  background-color: var(--color-bg-blue);
}

.p-route__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.5rem;
  margin-top: 4.8rem;
}

.p-route__card {
  padding: 4rem 3.6rem;
  border-radius: 10px;
  background-color: #fff;
}

.p-route__head {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--color-border-blue);
}

/* 支給SVG（白の線画・viewBox 54×54）を青い丸の中央に置く */
.p-route__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  background-color: var(--color-main);
}

/* 丸の大きさは変えず、アイコンだけ83%に縮める */
.p-route__icon img {
  width: 83%;
}

.p-route__ja {
  color: var(--color-main);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-route__en {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-text-strong);
}

.p-route__detail {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border-blue);
}

.p-route__time {
  margin-top: 0.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}

/* 案内図は白いカードの中に幅いっぱいで置く */
.p-route__map {
  overflow: hidden;
  margin-top: 5.6rem;
  border-radius: 10px;
  background-color: #fff;
}

.p-route__map img {
  width: 100%;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .p-route {
    margin-bottom: 8rem;
    padding: 4rem 0;
  }

  /* カードを縦に積む */
  .p-route__list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    margin-top: 3.2rem;
  }

  .p-route__card {
    padding: 3rem 1.6rem 2.4rem;
  }

  .p-route__time {
    font-size: 1.6rem;
  }

  .p-route__map {
    margin-top: 2.4rem;
  }
}