@charset "UTF-8";
/* =============================================
   ACCESSページ（2026リニューアル / Figma ACCESS_PC node 267:470）
   - カラーは _variables.scss の変数を使用（$ink / $white）
   - 単位: サイズは em() 関数で指定（_mixins.scss）。PC = Figmaのpx値をそのまま em(px)。
     font-size を持つ要素（とその子）は第2引数で補正: em(px, 親font-size)
   - Figma上の地図は静的画像プレースホルダーのため Google Maps iframe で実装
   - SP: Figma SPフレーム未提供のためPCデザインを基にした暫定実装（440px幅基準）。
     正式SPデザイン受領後に後追い調整する
============================================= */
/*--- em単位の基準（ACCESSページのみ） ---*/
/* style_access.css はスラッグ判定で access ページ限定読み込み（header.php）。
   common.css の body{font-size:1.4rem}(SP) より後に読み込まれるので本ルールが優先される */
body {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.6363636364vw;
  }
}

/* 全ページ共通(style.css)の main{padding-top:160px / SP 26.7vw} を打ち消し、
   固定ヘッダー分のオフセットは .access 側に集約する（style_top / style_company と同じ考え方） */
main {
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  main {
    padding-top: 0;
  }
}

/*--- ページラッパー ---*/
.access {
  color: #2c2c2c;
  /* fixedヘッダー高(90px) + Figma: 見出し上余白118px */
  padding-top: 13em;
  /* Figma: TOKYOブロック下端→footer上端 約150px。common.scss の .footer{margin-top:100px} との差分 */
  padding-bottom: 3.125em;
}
@media screen and (max-width: 768px) {
  .access {
    /* チェックバック: SPの見出し位置も全ページ統一。基準は PHILOSOPHY の em(104)
       （SP固定ヘッダー 70.4px = 16vw ＋ 見出し上余白 33.6px）。旧値 em(150.4) */
    padding-top: 6.5em;
    padding-bottom: 1.875em;
  }
}

/*--- ページ見出し ---*/
/* チェックバック: 見出しの高さを全ページで統一（基準 = PHILOSOPHY / OUR BUSINESS）。
   基準ページは line-height 未指定で、common.scss の body{line-height:1.5em} の
   計算値24pxをそのまま継承している（単位付きのため計算値が継承される）。
   ここに line-height:1.24（=80.6px）を指定していると行ボックスの半レディング差で
   文字の見た目上端が約28px下がるため、PCでは指定しない。
   SPは基準が未確定なので従来どおり 1.24 を維持する */
.access__heading {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 600;
  font-size: 4.0625em;
  letter-spacing: 0.05em;
  text-align: center;
  /* Figma: 見出し下端(y≒289)→NAGOYAラベル上端(y=432) の143px に、
     line-height を外したことで縮む要素高さ56.6px を足して下のコンテンツ位置を保つ */
  margin-bottom: 3.0707692308em;
}
@media screen and (max-width: 768px) {
  .access__heading {
    /* SPも基準(PHILOSOPHY)に統一: font-size em(46) / line-height は指定せず継承(27.2px)。
       margin-bottom は元の60pxに、line-height を外して縮む要素高さ22.4px(49.6→27.2)を足し、
       見出し〜NAGOYAラベルの間隔を従来どおりに保つ（基準は自身のfont-size 46px） */
    font-size: 2.875em;
    margin-bottom: 1.7913043478em;
  }
}

/*--- オフィスブロック（NAGOYA / TOKYO 共通） ---*/
.access-office {
  /* Figma: フレーム1200のうちコンテンツ幅840（左右余白 各180）
     チェックバック: max-width だけだと840px未満のブラウザ幅で画面いっぱいに張り付き、
     左右余白が無くなっていた。%を併用して必ず余白を作る
     （companyの .company-hero__inner と同じ対応） */
  max-width: 52.5em;
  width: 92%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .access-office {
    max-width: none;
    width: auto; /* SPは下のpaddingで余白を作るため%指定を打ち消す */
    padding: 0 1.5625em;
  }
}

.access-office + .access-office {
  /* Figma: NAGOYAブロック下端(y≒776)→TOKYOラベル上端(y=893) */
  margin-top: 7.3125em;
}
@media screen and (max-width: 768px) {
  .access-office + .access-office {
    margin-top: 6.25em;
  }
}

.access-office__label {
  display: flex;
  align-items: center;
  gap: 0.48em;
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 700;
  font-size: 1.5625em;
  letter-spacing: 0.1em;
  /* Figma: ラベル下端(y≒463)→社名上端(y=505) */
  margin-bottom: 1.68em;
}
@media screen and (max-width: 768px) {
  .access-office__label {
    font-size: 1.25em;
    margin-bottom: 1.2em;
  }
}

.access-office__label-icon {
  width: 1em;
  height: auto;
}

.access-office__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .access-office__body {
    display: block;
  }
}

.access-office__name {
  font-weight: 700;
  font-size: 1.125em;
  line-height: 1.389;
  letter-spacing: 0.1em;
  margin-bottom: 1.1666666667em;
}

.access-office__address,
.access-office__tel,
.access-office__transit {
  font-weight: 500;
  font-size: 0.9375em;
  line-height: 1.667;
  letter-spacing: 0.1em;
}

.access-office__address,
.access-office__tel {
  margin-bottom: 1.4em;
}

.access-office__map {
  width: 23.4375em;
  height: 16.9375em;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .access-office__map {
    width: 100%;
    margin-top: 1.5em;
  }
}

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

/* チェックバック: タブレット幅で左右のブロックがぶつかる件。
   Figmaの設計はコンテンツ幅840pxで「テキスト465px ＋ 地図375px」の space-between、
   つまり列間の余白が0の前提で、テキストが465pxに収まることで成立していた。
   .access-office{width:92%} は913pxを境に840pxを下回るため、それ未満の幅では
   テキスト列だけが痩せ、行末が地図に接触していた（地図は flex-shrink:0 で不動）。
   タブレット帯では列間の余白を明示し、地図を可変にしてテキスト列の幅を確保する。 */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .access-office__body {
    gap: 1.5em;
  }
  .access-office__map {
    /* 幅を可変にするぶん、高さは aspect-ratio で 375:271 を維持する */
    width: 44%;
    height: auto;
    aspect-ratio: 375/271;
  }
  /* 社名の改行をタブレットでも生かす（common.scss の .hidden-md は min-width:770px で
     display:none !important のため、詳細度で上回るこのセレクタで打ち消す） */
  .access-office__name br {
    display: inline !important;
  }
}