@charset "UTF-8";
/*color*/
/* セクションの背景に敷くベージュ（ACCESS など） */
/* セクションの背景に敷くグリーン（LOCATION など） */
/* guideline */
/*font-family*/
/*text-shadow*/
/*box-shadow*/
/*media query break point*/
/*gHeader用*/
/* SP下部の固定ナビ（.sp-nav-bar）の高さ。768px以上では非表示 */
/* 背景固定ブロック（.c-fixbg）の高さ ＝ MVの高さ
   .s-mv / .s-park内 / .s-cg で共通。変えるときは _base.scss の --fixbg-h を修正。
   $extra … その分だけ窓を下に伸ばす（MV→CONCEPTのフェード用）
   $mult  … 画面◯個ぶんの高さにする（次のセクションを重ねたい時に使う） */
/* MV → CONCEPT のフェード帯の高さ
   ・MVの窓（.s-mv）をこの分だけ下に伸ばす
   ・s-concept をこの分だけ上に引き上げて、グラデーションで映像を消す
   ※fl_size() を使うので、関数定義より後で宣言すること */
/* ページタイトル欄（.p-pagettl）の高さ
   ・下に続く画像（.p-pagettl-image）が、画面に貼りつける画像の高さを
     計算するのに使う。高さを変えるときはここだけ直せばよい
   ※fl_size() を使うので、関数定義より後で宣言すること */
/* media query */
/* ------------------------------------------------------------
    LAYOUT
------------------------------------------------------------ */
/* ------------------------------------------------------------
    TRAIN ACCESS
------------------------------------------------------------ */
.s-train {
  padding-top: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  /* 英字見出し（.c-heading--en）と路線図（.s-access__in）の間に入るリード文まわり */
}
.s-train__hd-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, 15.0857142857px + 2.2857142857vw, 48px);
  margin-top: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  margin-bottom: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
}
.s-train__hd {
  /* 文字サイズ等は共通の .c-heading--m。余白はgapで揃えるため打ち消す */
  margin-bottom: 0;
}

/* ------------------------------------------------------------
    ACCESS（路線図＋各駅の写真）
------------------------------------------------------------
   トップページ（top.scss の .s-access）からそのまま移してきたもの。
   ※トップページ側を削除するときは、あわせて top.scss / top.js の
     .s-access__in 以降と initAccessMap() も削除すること
------------------------------------------------------------ */
@media only screen and (min-width: 768px) {
  .s-access__in {
    width: 90%;
    max-width: 1140px;
    margin-inline: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.s-access {
  /* 路線図 ------------------------------ */
}
.s-access__map {
  width: 90%;
  max-width: 420px; /* SP：大きくしすぎない */
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .s-access__map {
    /* PC：写真を見ている間、路線図を画面内に留める */
    position: sticky;
    top: clamp(80px, 65.1428571429px + 3.8095238095vw, 120px);
    width: 40%;
    max-width: none; /* PCは幅%で決めるので上限を解除 */
    margin-inline: 0;
  }
}
@media only screen and (min-width: 1000px) {
  .s-access__map {
    width: 34.74%; /* 396 / 1140 */
  }
}
.s-access__map-in {
  position: relative;
}
.s-access__map-img {
  display: block;
  width: 100%;
  height: auto;
  /* 読み込み前から高さを確保する（レイアウトのガタつき＝表示アニメのズレ防止） */
  aspect-ratio: 472/713;
}
@media only screen and (min-width: 768px) {
  .s-access__map-img {
    aspect-ratio: 345/675;
  }
}
.s-access {
  /* スクロールで動く円。位置は路線図に対する％なので、幅が変わってもズレない。
     ・SP：桃山台(14.8%) → 天王寺(91.1%) を等速で移動
     ・PC：新大阪(22.8%) から、中央に来た写真の駅へ移動
     ※移動は top を GSAP で動かす（top.js の initAccessMap） */
}
.s-access__circle {
  position: absolute;
  left: 55.7%;
  top: 14.8%;
  width: 21.9%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .s-access__circle {
    left: 39%;
    top: 22.8%;
    width: 26.8%;
  }
}
.s-access {
  /* 各駅の写真 ------------------------------ */
}
.s-access__list {
  /* SP：2列・余白なしで全幅に敷き詰める */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  margin-top: 48px;
}
@media only screen and (min-width: 768px) {
  .s-access__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px);
    width: 55%;
    margin-top: 0;
  }
}
@media only screen and (min-width: 1000px) {
  .s-access__list {
    width: 59.65%; /* 680 / 1140 */
  }
}
.s-access__item {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .s-access__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: clamp(8px, -0.9142857143px + 2.2857142857vw, 32px);
  }
}
.s-access__item {
  /* SPだけに出る「DIRECT / ACCESS」のセル */
}
.s-access__item--label {
  background-color: #EAEAEA;
  aspect-ratio: 440/296;
}
@media only screen and (min-width: 768px) {
  .s-access__item--label {
    display: none;
  }
}
.s-access__label {
  position: absolute;
  left: clamp(24px, 15.0857142857px + 2.2857142857vw, 48px);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.48em;
  color: #B59A5B;
}
.s-access__ph {
  position: relative;
  aspect-ratio: 440/296;
  overflow: hidden;
  /* PC/SP出し分けの <picture> を、セルいっぱいに広げるための受け皿 */
}
.s-access__ph picture {
  display: block;
  width: 100%;
  height: 100%;
}
.s-access__ph img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.s-access__ph {
  /* SP：白い駅名を乗せるための暗いオーバーレイ */
}
.s-access__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.24);
}
.s-access__ph .c-cap--w-sh {
  z-index: 1; /* オーバーレイより前面へ */
}
@media only screen and (min-width: 768px) {
  .s-access__ph {
    width: 58%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .s-access__ph::after {
    content: none;
  }
}
@media only screen and (min-width: 1000px) {
  .s-access__ph {
    width: 64.7%; /* 440 / 680 */
  }
}
.s-access {
  /* 駅名＋所要時間。SPは写真の上に中央配置、PCは写真の右へ */
}
.s-access__data {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  width: 100%;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-access__data {
    position: static;
    -webkit-transform: none;
            transform: none;
    width: auto;
    text-align: left;
  }
}
.s-access__station {
  font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
  font-size: clamp(1.8rem, 1.4285714286rem + 0.9523809524vw, 2.8rem);
}
@media only screen and (min-width: 768px) {
  .s-access__station {
    color: #222222;
    font-size: clamp(1.5rem, 1.0171428571rem + 1.2380952381vw, 2.8rem);
  }
}
.s-access__time {
  /* SPでは所要時間が路線図の画像内に入っているので出さない */
  display: none;
}
@media only screen and (min-width: 768px) {
  .s-access__time {
    display: block;
    font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #222222;
    margin-top: 0.5em;
  }
  .s-access__time .num {
    font-size: clamp(2.8rem, 2.3542857143rem + 1.1428571429vw, 4rem);
  }
  .s-access__time .u {
    font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  }
}
.s-access__time-day {
  /* SPでは所要時間が路線図の画像内に入っているので出さない */
  display: none;
}
@media only screen and (min-width: 768px) {
  .s-access__time-day {
    display: block;
    font-size: clamp(1.1rem, 1.0257142857rem + 0.1904761905vw, 1.3rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-top: 0.3em;
    color: #666;
  }
}

/* ------------------------------------------------------------
    広域アクセス（見出し＋関西の路線図＋写真3点）
------------------------------------------------------------
   Figmaの「Frame 166」。中の間隔は gap でまとめて指定している
------------------------------------------------------------ */
.s-train__wide {
  margin-top: clamp(64px, 43.2px + 5.3333333333vw, 120px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
}

/* キャッチコピー＋リード文 */
.s-train__wide-hd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, 15.0857142857px + 2.2857142857vw, 48px);
}
.s-train__wide-hd .c-heading--m {
  /* 余白はgapで揃えるため打ち消す */
  margin-bottom: 0;
}

/* 関西の路線図（デザイン実寸 768×780）
   ・SPは画面幅に合わせて縮小して全体を見せる（文字が小さくなるのは了承済み） */
.s-train__fig {
  width: 90%;
  max-width: 768px;
}
.s-train__fig img {
  display: block;
  width: 100%;
  height: auto;
  /* 読み込み前から高さを確保する（表示アニメのズレ防止） */
  aspect-ratio: 768/877.8;
}

/* ------------------------------------------------------------
    広域アクセスの写真3点（大阪空港・神戸・京都）
------------------------------------------------------------
   デザイン実寸：PC 400×240 を3列（合計1200px・列の間隔なし）
   ・スマホでも3列のまま並べる（1列＝画面幅の3分の1）
   ・上の余白は親（.s-train__wide）の gap で付く
------------------------------------------------------------ */
.s-train__city {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.s-train__city__item {
  position: relative;
  height: 128px; /* SPは高さ固定 */
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .s-train__city__item {
    height: auto;
    aspect-ratio: 400/240;
  }
}
.s-train__city__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.s-train__city__item {
  /* 白い文字を乗せるための暗いオーバーレイ */
}
.s-train__city__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.24);
}
.s-train__city__item .c-cap--w-sh {
  z-index: 1; /* オーバーレイより前面へ */
}
.s-train__city {
  /* 都市名（写真の中央） */
}
.s-train__city__label {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .s-train__city__label {
    font-size: clamp(1.6rem, 1.3028571429rem + 0.7619047619vw, 2.4rem);
  }
}
.s-train__city__label {
  font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #fff;
}

/* ------------------------------------------------------------
    CAR ACCESS
------------------------------------------------------------ */
.s-car {
  padding-top: clamp(80px, 47.3142857143px + 8.380952381vw, 168px);
  /* 帯状の固定表示写真（部品は .c-fixbg--band）
     この写真は上側を見せたいので上揃えにする。
     ※部品側の既定（中央）を確実に上書きするため、部品のクラス名も一緒に書いている */
}
.s-car__fix.c-fixbg--band .c-fixbg__media > img,
.s-car__fix.c-fixbg--band .c-fixbg__media > picture > img {
  -o-object-position: center top;
     object-position: center top;
}
.s-car {
  /* 写真より下の内容。ここだけ背景色が変わる */
}
.s-car__in {
  background-color: #F0EDE7; /* デザイン指定のベージュ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  padding-block: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  /* 英字見出しだけは横いっぱい（＝左寄せのまま）にする */
}
.s-car__in > .c-heading--en {
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
}
.s-car {
  /* キャッチコピー＋リード文 */
}
.s-car__hd-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, 15.0857142857px + 2.2857142857vw, 48px);
}
.s-car__hd {
  /* 文字サイズ等は共通の .c-heading--m。余白はgapで揃えるため打ち消す */
  margin-bottom: 0;
}
.s-car {
  /* 名神高速道路のブロック ------------------------------ */
}
.s-car__ic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.s-car__ic-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}
.s-car__ic-road {
  font-size: clamp(1.4rem, 1.3257142857rem + 0.1904761905vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.04em;
}
.s-car__ic-time {
  font-size: clamp(2.2rem, 1.8285714286rem + 0.9523809524vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.s-car__ic-time .num {
  font-size: clamp(3.2rem, 2.6057142857rem + 1.5238095238vw, 4.8rem);
  line-height: 1;
}
.s-car {
  /* 新御堂筋のブロック ------------------------------ */
}
.s-car__road {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(32px, 23.0857142857px + 2.2857142857vw, 56px);
}
.s-car__road-ttl {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
}
.s-car {
  /* 入口2つ（大阪方面／箕面方面）。SPは縦並び、PCは横並び */
}
.s-car__road-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(32px, 20.1142857143px + 3.0476190476vw, 64px);
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .s-car__road-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.s-car__road-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px);
}
@media only screen and (min-width: 768px) {
  .s-car__road-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
  }
}
.s-car__road-hd {
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(164, 139, 82, 0.32);
  text-align: center;
  font-size: clamp(1.6rem, 1.4514285714rem + 0.380952381vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #A48B52;
}
.s-car {
  /* 行き先3つ（駅名＋所要時間） */
}
.s-car__cells {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-inline: clamp(0px, -5.9428571429px + 1.5238095238vw, 16px);
}
.s-car__cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  /* 2つめ以降の左に区切り線 */
}
.s-car__cell + .s-car__cell {
  border-left: 1px solid rgba(164, 139, 82, 0.32);
}
.s-car__station {
  margin-bottom: 4px; /* 駅名と所要時間の間だけ少し広げる */
  font-size: clamp(1.8rem, 1.4285714286rem + 0.9523809524vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.04em;
}
.s-car__time {
  line-height: 1;
}
.s-car__time .num {
  font-size: clamp(2.8rem, 2.3542857143rem + 1.1428571429vw, 4rem);
}
.s-car__time .u {
  font-size: clamp(2rem, 1.7028571429rem + 0.7619047619vw, 2.8rem);
}
/*# sourceMappingURL=area_access.css.map */