@charset "UTF-8";
/*color*/
/* guideline */
/*font-family*/
/* 物件会員限定サイト（MEMBER SITE）まわり */
/*category color*/
/*border*/
/*gradient*/
/*text-shadow*/
/*box-shadow*/
/*media query break point*/
/*gHeader用*/
/*gHeader用*/
/* SP下部の固定メニュー（.sp-nav-bar）の高さ。背景固定ブロックの高さ計算に使う */
/* 背景固定ブロック（.c-fixbg）の高さ。
   1画面ぶんが既定。2画面ぶんにしたいときは fixbg_height($mult: 2) のように使う。
   高さの中身を変えるときは _base.scss の --fixbg-h を修正する。 */
/* media query */
/* ------------------------------------------------------------
    ROSEN（路線図）
    デザイン基準幅：PC 1440
    ・路線図は書き出し画像。現地マーカーだけ画像に含まれないので、
      SVGを上に重ねて描いている（→ __pin）
------------------------------------------------------------ */
.s-rosen {
  padding-top: clamp(56px, 41.1428571429px + 3.8095238095vw, 96px);
  /* 見出しと路線図のあいだ（デザイン実寸96px） */
}
.s-rosen .c-heading--l {
  margin-bottom: clamp(40px, 19.2px + 5.3333333333vw, 96px);
}
.s-rosen__fig {
  position: relative;
  max-width: 800px; /* デザイン実寸 */
  margin-inline: auto;
}
.s-rosen__fig img {
  display: block;
  width: 100%;
  height: auto;
  /* 読み込み前から高さを確保する（表示のガタつき・アニメの発火位置ズレ対策） */
  aspect-ratio: 1600/1189; /* fig-rosen.webp */
}
.s-rosen {
  /* --- 現地マーカー ---
     中心の丸のまわりに、輪が2つ広がっては消える。
     2つめは再生位置を半周ぶんずらして（animation-delay: -1.5s）、
     途切れずに広がり続けるように見せている。
     ※ viewBox が画像と同じ比率なので、画像を縮めてもマーカーの位置はずれない */
}
.s-rosen__pin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.s-rosen__pin-dot {
  fill: #A48B52;
}
.s-rosen__pin-ring {
  fill: none;
  stroke: #A48B52;
  /* 画像が縮んでも線の太さは1pxのまま */
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
  -webkit-transform-origin: 382.08px 269.08px;
          transform-origin: 382.08px 269.08px; /* 丸の中心 */
  -webkit-animation: s-rosen-ring-pulse 3s ease-out infinite;
          animation: s-rosen-ring-pulse 3s ease-out infinite;
}
.s-rosen__pin-ring--b {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.s-rosen {
  /* OSで「視差効果を減らす／アニメーションを減らす」設定の人には広がる輪を出さない */
}
@media (prefers-reduced-motion: reduce) {
  .s-rosen .s-rosen__pin-ring {
    -webkit-animation: none;
            animation: none;
    opacity: 0;
  }
}

/* 輪が広がって消える。デザイン実寸：半径11.18 → 34.43（＝3.08倍） */
@-webkit-keyframes s-rosen-ring-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.64;
  }
  100% {
    -webkit-transform: scale(3.08);
            transform: scale(3.08);
    opacity: 0;
  }
}
@keyframes s-rosen-ring-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.64;
  }
  100% {
    -webkit-transform: scale(3.08);
            transform: scale(3.08);
    opacity: 0;
  }
}
/* ------------------------------------------------------------
    STATION（駅からの所要時間）
    デザイン基準幅：PC 1440
    ・PC（768px〜）：3カラム。写真は画面いっぱいに3等分
    ・SP（〜767px）：シンプルな1カラム
------------------------------------------------------------ */
.s-station {
  padding-top: clamp(64px, 43.2px + 5.3333333333vw, 120px);
  /* --- 「岡町」駅徒歩9分 --- */
  /* 2行の左端をそろえたうえで、かたまりごと画面の中央に置く。
     text-align:center だと行ごとに中央寄せされて左端がずれるので、
     中身の幅に合わせた箱（fit-content）を左右autoで中央に寄せている。 */
}
.s-station__lead {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
  margin-bottom: clamp(32px, 26.0571428571px + 1.5238095238vw, 48px);
}
.s-station__lead-sub {
  font-size: clamp(1.3rem, 1.1885714286rem + 0.2857142857vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  /* 下の行は「9」が大きいぶん行の高さに余白ができる。
     そのぶん食い込ませて、デザインどおりの間隔にする（自分の文字サイズ基準）。 */
  margin-bottom: -0.5em;
}
.s-station__lead-main {
  font-size: clamp(2.8rem, 2.2057142857rem + 1.5238095238vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: normal;
  margin-left: -0.2em;
}
.s-station__lead-num {
  font-size: clamp(4.4rem, 3.5085714286rem + 2.2857142857vw, 6.8rem);
  line-height: 1;
}
.s-station {
  /* （約660m）。大きい文字の足元に添える */
}
.s-station__lead-note {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #444444;
}
@media only screen and (min-width: 768px) {
  .s-station__lead-note {
    font-size: 1.1rem;
  }
}
.s-station__lead-note {
  letter-spacing: 0.04em;
}
.s-station {
  /* --- 「〇〇駅より」＋3カラム --- */
}
.s-station__body {
  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(12px, 10.5142857143px + 0.380952381vw, 16px);
}
.s-station__from {
  font-size: clamp(1.5rem, 1.3885714286rem + 0.2857142857vw, 1.8rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
}
.s-station__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: 40px;
}
@media only screen and (min-width: 768px) {
  .s-station__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch; /* 罫線の位置を3カラムで揃えるため */
    gap: 0;
  }
}
.s-station__item {
  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(16px, 13.0285714286px + 0.7619047619vw, 24px);
}
@media only screen and (min-width: 768px) {
  .s-station__item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
  }
}
.s-station {
  /* --- 写真＋英字ラベル --- */
}
.s-station__ph {
  /* .c-cap--image が position:relative を付けている */
  position: relative;
}
.s-station__ph::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.s-station__ph {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 白い英字ラベルを読みやすくするための黒い膜。
     ::before は写真より前・文字より後ろに描かれるので、重なり順の指定は不要
     （::after にすると文字の上に乗ってしまうので注意）。
     濃さを変えたいときは下の 24% を調整してください。 */
}
.s-station__ph::before {
  background-color: rgba(0, 0, 0, 0.24);
}
.s-station__ph img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480/336; /* ph-○○.webp */
}
.s-station__ph-en {
  position: absolute;
  left: 0;
  width: 100%;
  font-size: min(7vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .s-station__ph-en {
    font-size: clamp(1.6rem, 1.0057142857rem + 1.5238095238vw, 3.2rem);
  }
}
.s-station {
  /* --- 路線名／所要時間／注記 --- */
}
.s-station__info {
  padding-inline: clamp(20px, 18.5142857143px + 0.380952381vw, 24px);
}
@media only screen and (min-width: 768px) {
  .s-station__info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.s-station__info-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: clamp(6px, 5.2571428571px + 0.1904761905vw, 8px);
  width: 100%;
  padding-bottom: clamp(12px, 10.5142857143px + 0.380952381vw, 16px);
  border-bottom: 1px solid rgba(45, 37, 25, 0.16);
}
@media only screen and (min-width: 768px) {
  .s-station__info-in {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.s-station__info-line {
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.s-station__info-main {
  line-height: 1.2;
  letter-spacing: 0.035em;
  margin-left: -0.3em;
}
.s-station__info-st, .s-station__info-num {
  font-size: clamp(2.4rem, 2.1028571429rem + 0.7619047619vw, 3.2rem);
  line-height: 1.2;
}
.s-station__info-u {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  line-height: 1;
}
/*# sourceMappingURL=area_access.css.map */