@charset "UTF-8";
/*-------------------------------
	キービジュアル
-------------------------------*/
/* カンプ(1400px時)の数値
   写真 688×936（ヘッダー直下・右端まで） / 枠 416×502（左100） */
.specs-kv__inner {
  display: flex;
  align-items: flex-start;
}

/*----- テキスト（枠） */
.specs-kv__box {
  /* 写真の高さは画面幅で変わるので、枠は写真ではなく画面を基準に置く。
     ヘッダー(9rem)から下の表示領域の天地中央＝ファーストビューでの位置は画面幅によらず一定。
     写真(＝.specs-kv__inner)の下端までスクロールするまでその位置に留まる */
  position: -webkit-sticky;
  position: sticky;
  top: 29.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  width: 41.6rem;
  height: 50.2rem;
  /* カンプ(1400px)で左100px。画面が狭いと写真と近づくので、左余白を詰めて逃がす */
  margin-left: clamp(6rem, 10vw - 4rem, 10rem);
  /* 文字の天地中央がカンプより少し上に出るぶんを上パディングで押し下げる */
  padding: 0 0 0 2.4rem;
  border: 0.1rem solid #000;
  color: #243748;
}

.specs-kv__name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.specs-kv__area {
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin-top: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.specs-kv__lead {
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin-top: 2.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
}

/*----- 葉っぱ（あしらい・固定表示） */
/* 枠の右辺をまたぐ位置に置くので、枠側で切らないこと */
.specs-kv__leaf {
  position: absolute;
  top: 23.5rem;
  left: 35.4rem;
  width: 9.2rem;
  pointer-events: none;
}

/*----- 写真 */
/* 建物全体を見せる指定なので切り抜かず、元画像の比率のまま出す。
   幅はカンプ(1400px時688px)と同じ49.142%で固定 */
.specs-kv__photo {
  margin-left: auto;
  width: 49.142%;
}
.specs-kv__photo img {
  display: block;
  width: 100%;
  /* 高さの上限は元画像(1873px)の2倍まで。
     超える幅では縦に伸びず、上下がトリミングされる */
  max-height: 374.6rem;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 1023px) {
  /* 枠と写真が近づきすぎるので枠を小さくする。
     この幅ではヘッダーが追従しないので、画面全体の天地中央で固定する */
  .specs-kv__box {
    width: 34rem;
    height: 42rem;
    margin-left: 6rem;
    padding-left: 2rem;
  }
  .specs-kv__name {
    font-size: 2.8rem;
  }
  .specs-kv__area {
    margin-top: 1.6rem;
    font-size: 1.4rem;
  }
  .specs-kv__lead {
    margin-top: 2.4rem;
    font-size: 1.4rem;
  }
  .specs-kv__leaf {
    top: auto;
    bottom: 4rem;
    left: auto;
    right: -3.2rem;
    width: 7.6rem;
  }
  /* 769px時に葉っぱが写真へかからない幅 */
  .specs-kv__photo {
    width: 44%;
  }
}
@media screen and (max-width: 768px) {
  /* 横に並びきらないので、写真→枠の縦積みにする */
  .specs-kv__inner {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  /* 縦積みなので固定はしない */
  .specs-kv__box {
    position: relative;
    top: auto;
    width: auto;
    height: auto;
    margin: 2.4rem 2rem 0;
    padding: 3.2rem 2rem 3.6rem;
  }
  .specs-kv__name {
    font-size: 2.6rem;
  }
  .specs-kv__area {
    margin-top: 1.4rem;
    font-size: 1.4rem;
  }
  /* 1行が画面幅ぎりぎりになるので、TOPのFVリードと同じ1.3remまで落とす */
  .specs-kv__lead {
    margin-top: 2.4rem;
    font-size: 1.3rem;
  }
  /* 本文にかぶらないよう、枠の右上に移して写真との隙間に収める。
     画面の右端からはみ出さないよう右へのずらしは1.6remまで */
  .specs-kv__leaf {
    top: -2.4rem;
    right: -1.6rem;
    bottom: auto;
    left: auto;
    width: 7.2rem;
  }
  .specs-kv__photo {
    width: 100%;
  }
}
/*-------------------------------
	セクション見出し（各セクション共通）
-------------------------------*/
/* 日本語見出し＋英語＋リード文。共用部・ワークサポートで使う */
.section-title {
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.section-titleEN {
  font-family: "Inter", sans-serif;
  margin-top: 0.6rem;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0;
}

.section-lead {
  margin-top: 3.2rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
}

/*-------------------------------
	共用部のご紹介
-------------------------------*/
.specs-common {
  /* 次のセクション(Entrance Hall)までのカンプ上の間隔 */
  padding-bottom: 14.4rem;
  color: #243748;
  margin-top: 12.8rem;
}

/* ※付きの用語。下の注記で補足している */
.specs-common__term {
  text-decoration: underline;
  text-underline-offset: 0.1rem;
  text-decoration-thickness: 0.1rem;
}

.specs-common__text {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
}

.specs-common__note {
  margin-top: 1.6rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
}

@media screen and (max-width: 1023px) {
  .specs-common {
    padding-bottom: 10rem;
  }
  .section-title {
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 768px) {
  .specs-common {
    padding-bottom: 6rem;
    /* PCの12.8remのままだとKVの枠との間が画面の1/3近くになる。
       セクション間(6rem)より広く取ってKVとの切れ目は残しつつ、SPの尺に合わせる */
    margin-top: 8rem;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .section-titleEN {
    margin-top: 0.6rem;
    font-size: 1.2rem;
  }
  .section-lead {
    margin-top: 2.4rem;
    font-size: 1.4rem;
  }
  .specs-common__text {
    margin-top: 1.4rem;
    font-size: 1.4rem;
  }
  /* 段落間と同じ1.6remだと本文の続きに見えるので、注記として一段離す */
  .specs-common__note {
    margin-top: 2rem;
  }
  /* カンプの改行位置だと画面幅に収まらないので、自然に折り返させる */
  .specs-common__text br,
.specs-common__note br {
    display: none;
  }
}
/*-------------------------------
	見取り図つきのセクション
	（Entrance Hall / Roof Garden で共通）
-------------------------------*/
.specs-entrance {
  /* 次のセクションまでのカンプ上の間隔 */
  padding-bottom: 14.4rem;
}

.specs-roof {
  /* 次のセクションまでのカンプ上の間隔 */
  padding-bottom: 12.8rem;
}

/* 片側にテキスト、もう片側に見取り図。
   カンプ1400px時（内容幅1200）は見取り図529.5・テキスト568だが、
   テキストの最長行(Roof Gardenの2段落目1行目)は実際には580px必要で
   カンプ側で詰められているため、本文カラムは49%＝588pxにして改行位置を守る */
.floor-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: #243748;
}

/* 見取り図を左、テキストを右に置く（Roof Garden） */
.floor-section--reverse {
  flex-direction: row-reverse;
}

.floor-section__body {
  width: 49%;
}

/*----- 見出し（英語＋階数＋日本語ラベルを1行に） */
.floor-section__title {
  font-family: "Inter", sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0;
}

.floor-section__floor {
  margin-left: 1.2rem;
  font-weight: 500;
}

.floor-section__titleJP {
  margin-left: 2rem;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0;
}

.floor-section__text {
  margin-top: 3.2rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
}
.floor-section__text + .floor-section__text {
  margin-top: 1.6rem;
}

/*----- 見取り図 */
/* カンプ1400px時 529.5×387。内容幅1200に対して44.125% */
.floor-section__plan {
  flex-shrink: 0;
  width: 44.125%;
}

/* 横並びのままだと図の文字が小さいので、押すと拡大表示する */
.floor-section__planButton {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
  cursor: zoom-in;
  transition: opacity 0.3s ease;
  /* 透過PNGなので下地を敷く */
}
.floor-section__planButton:hover {
  opacity: 0.7;
}
.floor-section__planButton img {
  display: block;
  width: 100%;
  background: #FAFAF7;
}

/* カンプの改行位置(最長580px)が本文カラムに収まらなくなる幅からは縦積みにする。
   この幅では見取り図も小さくなりすぎるので、縦積みのほうが読みやすい */
@media screen and (max-width: 768px) {
  .floor-section {
    display: block;
  }
  .floor-section__body {
    width: auto;
  }
  /* 元画像(1059px)より大きくすると粗くなるので、そこで止める */
  .floor-section__plan {
    width: 100%;
    max-width: 105.9rem;
    margin-top: 4rem;
  }
}
/*-------------------------------
	サムネイル一覧（各セクション共通）
-------------------------------*/
/* カンプ1400px時 208×124（元画像の半分）× 5列 / 間隔40px */
.thumb-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 横はカンプの40px。縦は2行になるキャプションぶん間延びしないよう詰める */
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  row-gap: 1.6rem;
  margin-top: 7.2rem;
  list-style: none;
}

/* 5枚未満のときはカンプ通り右端に寄せる（3枚なら5列のうち右3列）。
   開始列はテンプレートが枚数から --thumb-start に入れる */
.thumb-list--right .thumb-list__item:first-child {
  grid-column-start: var(--thumb-start, 3);
}

/* クリックで拡大モーダルを開く想定。動きは後で付ける */
.thumb-list__button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border-radius: 2px;
}
.thumb-list__button:hover {
  opacity: 0.7;
}

.thumb-list__image {
  display: block;
  width: 100%;
}

/*----- 右下の＋ */
.thumb-list__plus {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: 1.2rem;
}

.thumb-list__caption {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  color: #243748;
}

@media screen and (max-width: 1023px) {
  .specs-entrance {
    padding-bottom: 10rem;
  }
  .floor-section__title {
    font-size: 2.6rem;
  }
  .thumb-list {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 3.2rem;
         column-gap: 3.2rem;
    margin-top: 5rem;
  }
  /* 3列になり右端まで埋まるので右寄せは解除する */
  .thumb-list--right .thumb-list__item:first-child {
    grid-column-start: auto;
  }
}
@media screen and (max-width: 768px) {
  .specs-entrance {
    padding-bottom: 6rem;
  }
  /* PCの12.8remが残っていてワークサポートとの間だけ空きすぎていた。
     他のセクションと同じ6remに揃える */
  .specs-roof {
    padding-bottom: 6rem;
  }
  .floor-section__title {
    font-size: 2rem;
  }
  .floor-section__floor {
    margin-left: 1.2rem;
  }
  .floor-section__titleJP {
    margin-left: 1.6rem;
    font-size: 1.2rem;
  }
  .floor-section__text {
    margin-top: 2.4rem;
    font-size: 1.4rem;
    /* カンプの改行位置だと画面幅に収まらないので、自然に折り返させる */
  }
  .floor-section__text + .floor-section__text {
    margin-top: 1.4rem;
  }
  .floor-section__text br {
    display: none;
  }
  .floor-section__plan {
    margin-top: 2.4rem;
  }
  .thumb-list {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    /* キャプションは画像の .4rem 下に付くので、行間が1.6remだと
       キャプションと次の行の画像が近く、どちらに属する文字か読み取りにくい。
       キャプションが2〜3行に折り返す化粧室の一覧でとくに効く */
    row-gap: 2.4rem;
    margin-top: 3.2rem;
  }
  .thumb-list__caption {
    font-size: 1.2rem;
  }
  .thumb-list__plus {
    right: 0.6rem;
    bottom: 0.6rem;
    width: 1rem;
  }
}
/*-------------------------------
	写真モーダル（各セクション共通）
-------------------------------*/
/* カンプ1400px時：メイン画像560×334 / 説明パネル600 / 間40 */
/* ふわっと出したいので display の切り替えではなく opacity で見せ隠しする */
.photo-modal {
  display: flex;
  visibility: hidden;
  position: fixed;
  inset: 0;
  z-index: 9990;
  align-items: center;
  justify-content: center;
  padding: 6rem 10rem;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  /* 閉じている間にスクロールバーを出さないよう、開いたときだけ縦スクロールを許す */
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.photo-modal.is-open {
  visibility: visible;
  opacity: 1;
  overflow-y: auto;
}

/* 画面より縦に長くなっても上が切れないようmarginで中央に置く */
.photo-modal__inner {
  width: 100%;
  max-width: 120rem;
  margin: auto;
}

/*----- 閉じるボタン */
.photo-modal__close {
  display: block;
  width: 1.5rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.photo-modal__close:hover {
  opacity: 0.7;
}
.photo-modal__close img {
  display: block;
  width: 100%;
}

/*----- メイン画像＋説明 */
.photo-modal__row {
  display: flex;
  align-items: stretch;
  gap: 4rem;
  margin-top: 1.3rem;
}

.photo-modal__main {
  width: 46.667%;
  border-radius: 5px;
  /* 説明パネルの方が高いときに枠だけ伸びると、
     下に敷いた切り替え前の画像がはみ出して見えるので伸ばさない */
  align-self: flex-start;
  /* 切り替え前の画像をJSがここに敷く。新しい画像はこの上でフェードインする */
  background: no-repeat center center/cover;
  /* 画像の読み込み前後で高さが変わらないよう、比率を先に確保しておく */
}
.photo-modal__main img {
  border-radius: 5px;
  display: block;
  width: 100%;
  aspect-ratio: 1120/668;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  /* 画像を差し替える一瞬だけトランジションを切る（JSが付け外しする） */
}
.photo-modal__main img.is-shown {
  opacity: 1;
}
.photo-modal__main img.is-instant {
  transition: none;
}

.photo-modal__info {
  width: 50%;
  padding: 2.4rem;
  padding-bottom: 4rem;
  background: #DDE3E7;
  color: #243748;
  border-radius: 2px;
  /* 説明文がないときは、見出しの上下を同じ余白で囲む */
}
.photo-modal__info:not(:has(.photo-modal__text:not(:empty))) {
  padding-bottom: 2.4rem;
}

.photo-modal__title {
  border-radius: 5px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  display: flex;
  align-items: center;
  height: 7.5rem;
  padding: 0 2.4rem;
  background: #FAFAF7;
  font-size: 1.8rem;
  font-weight: 500;
}

.photo-modal__text {
  margin-top: 1.6rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  font-size: 1.6rem;
  line-height: 2;
}
.photo-modal__text:empty {
  display: none;
}

/*----- 下の小サムネイル（押すとメイン画像が入れ替わる） */
/* カンプ1400px時 120×72・間隔16px。メイン画像の幅(560)に対する比率で持つ */
.photo-modal__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 21.428%);
  gap: 1.6rem;
  width: 46.667%;
  margin-top: 2.4rem;
  list-style: none;
}

/* 並べる画像が無いときは列ごと消す */
.photo-modal__thumbs:empty {
  display: none;
}

.photo-modal__thumb {
  border-radius: 5px;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
  cursor: pointer;
}
.photo-modal__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1120/668;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}

/*----- 開くときの読み込み待ち */
/* メイン画像が読み込めるまで、画像・説明・小サムネイルをまとめて隠しておき、
   揃ったところで一緒にフェードインさせる（画像だけが説明より遅れて出ないように）。
   is-loading はJSが付け外しする。
   lg以下では .photo-modal__row が display: contents になり opacity が効かないので、中の要素に直接かける */
.photo-modal__main,
.photo-modal__info,
.photo-modal__thumbs {
  transition: opacity 0.3s ease;
}

.photo-modal.is-loading .photo-modal__main,
.photo-modal.is-loading .photo-modal__info,
.photo-modal.is-loading .photo-modal__thumbs {
  visibility: hidden;
  opacity: 0;
  /* 隠すときは待たずに消す。閉じてすぐ開き直したとき、前の中身が見えないように */
  transition: none;
}

/*----- 見取り図の拡大表示（説明パネルなしで画像だけを大きく出す） */
.photo-modal--single {
  /* 図だけを出すので、写真モーダル(120rem)より控えめな幅にする */
}
.photo-modal--single .photo-modal__inner {
  max-width: 80rem;
}
.photo-modal--single .photo-modal__row {
  display: block;
}
.photo-modal--single .photo-modal__main {
  width: 100%;
  /* 元画像より大きくせず、画面に収まる範囲でいちばん大きく出す */
  /* 透過PNGなので下地を敷いて、後ろの暗幕が透けないようにする */
}
.photo-modal--single .photo-modal__main img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 16rem);
  margin: 0 auto;
  background: #FAFAF7;
  aspect-ratio: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.photo-modal--single .photo-modal__info {
  display: none;
}

@media screen and (max-width: 1023px) {
  .photo-modal {
    padding: 6rem;
  }
  /* 横に並べると画像も説明も小さくなりすぎるので、
     メイン画像 → サムネイル → 説明文 の順で縦積みにする */
  .photo-modal__inner {
    display: flex;
    flex-direction: column;
    max-width: 60rem;
    margin-top: 0;
  }
  /* 中の2つをinnerの並びに直接乗せ、orderで順番を入れ替える */
  .photo-modal__row {
    display: contents;
    margin-top: 0;
  }
  .photo-modal__close {
    order: 0;
  }
  .photo-modal__main {
    margin-top: 0.8rem;
    order: 2;
    width: 100%;
    align-self: auto;
  }
  .photo-modal__thumbs {
    order: 3;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }
  .photo-modal__info {
    order: 4;
    width: 100%;
    margin-top: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .photo-modal {
    padding: 6rem 2rem;
  }
  .photo-modal__info {
    margin-top: 1.6rem;
    /* 本文の終わりに少し余裕を持たせ、狭い画面でも窮屈に見せない */
    padding: 1.6rem 1.6rem 2.4rem;
  }
  .photo-modal__info:not(:has(.photo-modal__text:not(:empty))) {
    padding-bottom: 1.6rem;
  }
  .photo-modal__title {
    min-height: 5.6rem;
    height: auto;
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
  }
  .photo-modal__text {
    margin-top: 1.6rem;
    /* 見出しと本文の文字位置を揃え、PCから残る右余白も上書きする */
    padding: 0 0.8rem;
    font-size: 1.3rem;
  }
  .photo-modal__thumbs {
    gap: 1.2rem;
    margin-top: 1.6rem;
  }
}
/*-------------------------------
	ワークサポート
-------------------------------*/
.specs-support {
  /* 次のセクション(所在地/アクセス)までのカンプ上の間隔 */
  padding-bottom: 16rem;
  color: #243748;
}

/* 本文の下に置くので、見取り図つきセクションより余白を詰める */
.specs-support .thumb-list {
  margin-top: 4.8rem;
}

/*----- 小見出し（各階の化粧室） */
.section-subtitle {
  margin-top: 5.4rem;
  font-size: 2rem;
}

/* 小見出しの直後の一覧は詰める */
.section-subtitle + .thumb-list {
  margin-top: 2.4rem;
}

@media screen and (max-width: 1023px) {
  .specs-support {
    padding-bottom: 10rem;
  }
  .specs-support .thumb-list {
    margin-top: 4rem;
  }
  .section-subtitle {
    margin-top: 4rem;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 768px) {
  .specs-support {
    padding-bottom: 6rem;
  }
  .specs-support .thumb-list {
    margin-top: 3.2rem;
  }
  /* 直前のサムネイル一覧と切り離したいので、
     小見出しが自分の一覧に付く間隔(1.6rem)よりはっきり広く取る */
  .section-subtitle {
    margin-top: 4rem;
    font-size: 1.6rem;
  }
  .section-subtitle + .thumb-list {
    margin-top: 1.6rem;
  }
}
/*-------------------------------
	所在地 / アクセス
-------------------------------*/
.specs-access {
  /* パンくずまでのカンプ上の間隔 */
  padding-bottom: 17.6rem;
  color: #243748;
}

/*----- 地図（GoogleマップのiFrame） */
/* カンプ1400px時 1200×728。読み込み前に高さが変わらないよう比率で確保する */
.specs-access__map {
  margin-top: 3.2rem;
  aspect-ratio: 1200/736;
}
.specs-access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*----- 所在地・アクセス情報の枠 */
/* カンプ1400px時 580×236 × 2 / 間40px */
.specs-access__boxes {
  display: flex;
  align-items: stretch;
  gap: 4rem;
  margin-top: 5.6rem;
}

.specs-access__box {
  flex: 1;
  padding: 4.6rem 2rem 4rem;
  border: 0.1rem solid #243748;
  text-align: center;
  min-height: 23.5rem;
}

.specs-access__box-01 .specs-access__text {
  margin-top: 3.2rem;
}

.specs-access__boxTitle {
  font-size: 1.8rem;
  line-height: 1.2;
}

.specs-access__text {
  margin-top: 2.4rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  /* 折り返すとき郵便番号や番地の途中で切れないようにする */
}
.specs-access__text span {
  display: inline-block;
}

/* 路線名は駅名・所要時間に対する補足なので一段小さく出す。
   remではなくemで持つことで、本文(PC 1.6rem / SP 1.4rem)に追従して全幅で同じ比率になる。
   上の span 指定で inline-block になるので、括弧の途中では折り返らない */
.specs-access__route {
  font-size: 0.8em;
}

/* 複数行の行頭をそろえる。枠内では中央のまま、中身だけ左揃えにする */
.specs-access__text--start {
  display: inline-block;
  text-align: left;
}

.specs-access__link {
  margin-top: 1.6rem;
  font-size: 2rem;
  line-height: 1.2;
}
.specs-access__link a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
}

@media screen and (max-width: 1023px) {
  .specs-access {
    padding-bottom: 10rem;
  }
  .specs-access__box {
    padding: 3.2rem 2rem;
  }
  .specs-access__text {
    margin-top: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .specs-access {
    padding-bottom: 6rem;
  }
  .specs-access__map {
    margin-top: 2.4rem;
    /* 横長のままだと地図が小さくなりすぎるので、正方形に近づける */
    aspect-ratio: 4/3;
  }
  /* 横に並びきらないので縦積みにする */
  .specs-access__boxes {
    display: block;
    margin-top: 3.2rem;
  }
  .specs-access__box {
    padding: 2.4rem 1.6rem;
    /* min-height(23.5rem)は2枠を横に並べて高さを揃えるためのもの。
       縦積みのSPでは中身より枠が高くなって下に大きな余白が残るだけなので外す */
    min-height: 0;
  }
  .specs-access__box + .specs-access__box {
    margin-top: 2rem;
  }
  .specs-access__boxTitle {
    font-size: 1.6rem;
  }
  .specs-access__text {
    margin-top: 1.6rem;
    font-size: 1.4rem;
  }
  /* PCの3.2remが効いたままで、所在地の枠だけ見出しと本文の間が広かった。
     縦積みで2枠が並ぶぶん差が目立つので、アクセス情報の枠と同じ1.6remに揃える */
  .specs-access__box-01 .specs-access__text {
    margin-top: 1.6rem;
  }
  .specs-access__link {
    font-size: 1.6rem;
  }
}
/*# sourceMappingURL=specs.css.map */