@charset "UTF-8";

/* =========================================================
   道案内ページ専用
   guide-shibuya.html（JR渋谷駅）／ guide-shibuya-chika.html（地下鉄渋谷駅）／ guide-omotesando.html（表参道駅）
   `03_pc_260904.psd` の「all」アートボード3枚（x=0 / 2020 / 4040, y=5824）の実測値。
   各ステップ画像（*_itemNN.png）は写真・説明文・下向き矢印が一体の書き出しなので、
   グループ内レイヤーの和集合の左上に置き、枠（デザインの x=500〜1600、1100px）に対する % で指定している。
   ========================================================= */

/* --gscale：タイトルの表示倍率。PCはデザインより小さめに見せる（.85 からさらに一回り小さく .9 倍）
   --lscale：ステップ一覧の表示倍率。PSD改訂（2026-09-30）でステップがデザイン上 1/1.1264 に縮んだので、
             改訂前と同じ比率になるよう --gscale × 1.1264（4918 / 4366）にしている
   枠の幅は画面幅−40px で頭打ち。ステップ画像は枠の右端まで届かず（最大でも左から約89%）、
   枠をデザインどおりの位置に置いたままでも画面内に収まるので、画面幅によらず中央基準で置く */
:root {
  --gscale: .765;
  --lscale: .8617;
  --gw: min(calc(57.2917 * var(--u) * var(--lscale)), calc(100vw - 40px));
}

/* 下の余白は法人概要ページ（.caccess）と同じ。一覧の後ろに「トップページへ戻る」（.cback）が入る */
.sguide {
  padding: calc(4.2292 * var(--u)) 0 calc(6.7188 * var(--u));
  background: #fff;
}

.sguide__title {
  width: calc(36.6667% * var(--gscale));
  margin: 0 auto;
}

.sguide__list {
  position: relative;
  width: var(--gw);
  aspect-ratio: 1100 / 4366;
  margin-top: calc(2.5521 * var(--u));
  /* デザインでは枠の左端がページ中央から 460px 左（460 / 1100 = .41818） */
  margin-left: calc(53% - var(--gw) * .41818);
}

.sguide__item {
  position: absolute;
}

/* 地下鉄・表参道のタイトルは書き出しそのまま（JRの切り出しより上に4px・下に9px余白が少ない）なので、
   タイトルとステップ一覧の位置がJRと揃うよう上下の余白で調整している */
.sguide--chika,
.sguide--omote {
  padding-top: calc(4.4063 * var(--u));
}

.sguide--chika .sguide__list,
.sguide--omote .sguide__list {
  margin-top: calc(2.7708 * var(--u));
}

.sguide--chika .sguide__title {
  width: calc(42.8125% * var(--gscale));
}

.sguide--omote .sguide__title {
  width: calc(35.625% * var(--gscale));
}

/* ---------- JR渋谷駅から（1100 × 4366） ---------- */
.sguide--jr .sguide__item:nth-child(1) {
  left: .9091%;
  top: 0;
  width: 72.9091%;
}

.sguide--jr .sguide__item:nth-child(2) {
  left: 1.0909%;
  top: 10.2153%;
  width: 74.1818%;
}

.sguide--jr .sguide__item:nth-child(3) {
  left: .9091%;
  top: 20.82%;
  width: 74.5455%;
}

.sguide--jr .sguide__item:nth-child(4) {
  left: .7273%;
  top: 30.9666%;
  width: 74.7273%;
}

.sguide--jr .sguide__item:nth-child(5) {
  left: 1.0909%;
  top: 41.3422%;
  width: 68.4545%;
}

.sguide--jr .sguide__item:nth-child(6) {
  left: 1.0909%;
  top: 51.5804%;
  width: 74.9091%;
}

.sguide--jr .sguide__item:nth-child(7) {
  left: 1.2727%;
  top: 61.7728%;
  width: 84.3636%;
}

.sguide--jr .sguide__item:nth-child(8) {
  left: 1.2727%;
  top: 71.9881%;
  width: 75.0909%;
}

.sguide--jr .sguide__item:nth-child(9) {
  left: 1.0909%;
  top: 81.9285%;
  width: 70.9091%;
}

.sguide--jr .sguide__item:nth-child(10) {
  left: 1.0909%;
  top: 92.2355%;
  width: 86.8182%;
}

/* ---------- 地下鉄渋谷駅から（1100 × 4366）
   1・2は地下の専用画像、3以降はJRと同じ画像。3以降の位置もJRとほぼ同じ（デザイン上1px右） ---------- */
.sguide--chika .sguide__item:nth-child(1) {
  left: .9091%;
  top: 0;
  width: 70.8182%;
}

.sguide--chika .sguide__item:nth-child(2) {
  left: 1.0909%;
  top: 10.2153%;
  width: 74.1818%;
}

.sguide--chika .sguide__item:nth-child(3) {
  left: .9091%;
  top: 20.82%;
  width: 74.5455%;
}

.sguide--chika .sguide__item:nth-child(4) {
  left: .8182%;
  top: 30.9666%;
  width: 74.7273%;
}

.sguide--chika .sguide__item:nth-child(5) {
  left: 1.1818%;
  top: 41.3422%;
  width: 68.4545%;
}

.sguide--chika .sguide__item:nth-child(6) {
  left: 1.1818%;
  top: 51.5804%;
  width: 74.9091%;
}

.sguide--chika .sguide__item:nth-child(7) {
  left: 1.3636%;
  top: 61.7728%;
  width: 84.3636%;
}

.sguide--chika .sguide__item:nth-child(8) {
  left: 1.3636%;
  top: 71.9881%;
  width: 75.0909%;
}

.sguide--chika .sguide__item:nth-child(9) {
  left: 1.1818%;
  top: 81.9285%;
  width: 70.9091%;
}

.sguide--chika .sguide__item:nth-child(10) {
  left: 1.1818%;
  top: 92.2355%;
  width: 86.8182%;
}

/* ---------- 表参道駅から（1100 × 3482） ---------- */
.sguide--omote .sguide__list {
  aspect-ratio: 1100 / 3482;
}

.sguide--omote .sguide__item:nth-child(1) {
  left: .9091%;
  top: 0;
  width: 77.6364%;
}

.sguide--omote .sguide__item:nth-child(2) {
  left: 1.0909%;
  top: 12.8087%;
  width: 65.5455%;
}

.sguide--omote .sguide__item:nth-child(3) {
  left: .9091%;
  top: 26.1057%;
  width: 73.3636%;
}

.sguide--omote .sguide__item:nth-child(4) {
  left: .8182%;
  top: 38.8283%;
  width: 79.8182%;
}

.sguide--omote .sguide__item:nth-child(5) {
  left: 1.1818%;
  top: 51.838%;
  width: 74.6364%;
}

.sguide--omote .sguide__item:nth-child(6) {
  left: 1.1818%;
  top: 64.6755%;
  width: 74.9091%;
}

.sguide--omote .sguide__item:nth-child(7) {
  left: 1.3636%;
  top: 77.4555%;
  width: 66.6364%;
}

.sguide--omote .sguide__item:nth-child(8) {
  left: 1.3636%;
  top: 90.2642%;
  width: 87.5455%;
}

/* =========================================================
   SP （750px以下 / デザイン基準幅 750px）
   `03_sp_260904.psd` の「all_sp」アートボード3枚（x=850 / 1700 / 2550）の実測値。
   --u = 1vw ＝ デザイン7.5px。CSS値は「デザインpx ÷ 7.5」で算出。
   ========================================================= */
@media screen and (max-width: 750px) {

  /* SPはデザインより大きめに見せる。
     --lscale は PSD改訂前と同じ見た目になるよう 1.08 × .9497（5904 / 6217）。
     いちばん幅の広いステップ（689px）が画面幅の約94%になり、左右に約3%ずつ余白が残る */
  :root {
    --gscale: 1.08;
    --lscale: 1.0256;
  }

  .sguide {
    padding: calc(7.3333 * var(--u)) 0 calc(12.4 * var(--u));
  }

  .sguide__title {
    width: calc(66.1333% * var(--gscale));
  }

  /* SPは枠＝画面幅（デザインの x=0〜750）を --lscale 倍にして、画面中央を基準に広げる */
  .sguide__list {
    width: calc(100% * var(--lscale));
    aspect-ratio: 750 / 6217;
    margin-top: calc(6.2667 * var(--u));
    margin-left: calc((1 - var(--lscale)) * 50%);
  }

  .sguide--chika,
  .sguide--omote {
    padding-top: calc(7.9093 * var(--u));
  }

  .sguide--chika .sguide__list,
  .sguide--omote .sguide__list {
    margin-top: calc(6.9467 * var(--u));
  }

  /* 書き出しの company_title02_sp.png は文言が「JR渋谷駅から」のままなので、
     img/company_title02_sp.png はPC版タイトルを2行に組み直したもの（615 × 183）で代用している。
     PSDが直ったら書き出しで上書きし、この幅（82%）を書き出しの幅に合わせる */
  .sguide--chika .sguide__title {
    width: calc(65% * var(--gscale));
  }

  .sguide--omote .sguide__title {
    width: calc(63.6% * var(--gscale));
  }

  /* ---------- JR渋谷駅から（750 × 6217） ---------- */
  .sguide--jr .sguide__item:nth-child(1) {
    left: 8.6667%;
    top: 0;
    width: 80.8%;
  }

  .sguide--jr .sguide__item:nth-child(2) {
    left: 7.0667%;
    top: 9.9887%;
    width: 86%;
  }

  .sguide--jr .sguide__item:nth-child(3) {
    left: 6.2667%;
    top: 20.6048%;
    width: 87.4667%;
  }

  .sguide--jr .sguide__item:nth-child(4) {
    left: 8.6667%;
    top: 30.9635%;
    width: 76%;
  }

  .sguide--jr .sguide__item:nth-child(5) {
    left: 8.6667%;
    top: 41.0166%;
    width: 78.6667%;
  }

  .sguide--jr .sguide__item:nth-child(6) {
    left: 4%;
    top: 50.8766%;
    width: 91.8667%;
  }

  .sguide--jr .sguide__item:nth-child(7) {
    left: 5.2%;
    top: 60.9136%;
    width: 89.4667%;
  }

  .sguide--jr .sguide__item:nth-child(8) {
    left: 4%;
    top: 71.2562%;
    width: 91.8667%;
  }

  .sguide--jr .sguide__item:nth-child(9) {
    left: 8.6667%;
    top: 81.2128%;
    width: 76.8%;
  }

  .sguide--jr .sguide__item:nth-child(10) {
    left: 8.6667%;
    top: 90.5903%;
    width: 80.8%;
  }

  /* ---------- 地下鉄渋谷駅から（750 × 6152） ---------- */
  .sguide--chika .sguide__list {
    aspect-ratio: 750 / 6152;
  }

  .sguide--chika .sguide__item:nth-child(1) {
    left: 8%;
    top: 0;
    width: 77.2%;
  }

  .sguide--chika .sguide__item:nth-child(2) {
    left: 8%;
    top: 9.7367%;
    width: 80.8%;
  }

  .sguide--chika .sguide__item:nth-child(3) {
    left: 6.2667%;
    top: 19.7659%;
    width: 87.4667%;
  }

  .sguide--chika .sguide__item:nth-child(4) {
    left: 8.1333%;
    top: 30.2016%;
    width: 76%;
  }

  .sguide--chika .sguide__item:nth-child(5) {
    left: 7.7333%;
    top: 40.2633%;
    width: 78.6667%;
  }

  .sguide--chika .sguide__item:nth-child(6) {
    left: 4%;
    top: 50.3576%;
    width: 91.8667%;
  }

  .sguide--chika .sguide__item:nth-child(7) {
    left: 5.2%;
    top: 60.4356%;
    width: 89.4667%;
  }

  .sguide--chika .sguide__item:nth-child(8) {
    left: 4%;
    top: 70.9363%;
    width: 91.8667%;
  }

  .sguide--chika .sguide__item:nth-child(9) {
    left: 7.8667%;
    top: 80.9168%;
    width: 76.8%;
  }

  .sguide--chika .sguide__item:nth-child(10) {
    left: 8%;
    top: 90.4909%;
    width: 80.8%;
  }

  /* ---------- 表参道駅から（750 × 4778） ---------- */
  .sguide--omote .sguide__list {
    aspect-ratio: 750 / 4778;
  }

  .sguide--omote .sguide__item:nth-child(1) {
    left: 9.0667%;
    top: 0;
    width: 79.0667%;
  }

  .sguide--omote .sguide__item:nth-child(2) {
    left: 9.0667%;
    top: 12.8087%;
    width: 76.4%;
  }

  .sguide--omote .sguide__item:nth-child(3) {
    left: 9.0667%;
    top: 24.6756%;
    width: 76.2667%;
  }

  .sguide--omote .sguide__item:nth-child(4) {
    left: 8.9333%;
    top: 37.882%;
    width: 79.8667%;
  }

  .sguide--omote .sguide__item:nth-child(5) {
    left: 9.0667%;
    top: 50.9837%;
    width: 81.7333%;
  }

  .sguide--omote .sguide__item:nth-child(6) {
    left: 8.2667%;
    top: 64.5668%;
    width: 85.6%;
  }

  .sguide--omote .sguide__item:nth-child(7) {
    left: 8.9333%;
    top: 75.7848%;
    width: 76.8%;
  }

  .sguide--omote .sguide__item:nth-child(8) {
    left: 9.0667%;
    top: 87.7773%;
    width: 80.4%;
  }
}