/* ==========================================================================
   スター精機 コーポレートサイト / 常設展示場 STAR PLAZA ページ（/star-plaza/）

   子テーマの css/ に置き、functions.php の一番最後に読み込みます。

   パンくずは star-company.css のものをそのまま使います。
   （HTMLの一番外側に class="st-cmp st-plz" と書いてあるため）

   見せ方：「入口だけ特別、中身は情報」（2026-10-08）。
   2026-10-22（v1.18.0）にトヨタ会館を参考に作り直した（このファイルの後半の節）：
   ページのタイトルを全画面の写真＋大きな英字に（ほかの下層ページの白いタイトルの例外）、
   イントロ（赤 → ロゴ。最初に開いたときだけ）、導入の写真の横スライド、紹介動画、
   Floor を暗い面の写真カードに、予約の流れを番号＋線のアイコンに、右側の項目。
   後半の節は前半の指定を上書きする前提で書いてあるので、順番を入れ替えない
   ========================================================================== */


/* 写真（入口・拠点など）の指定は star-images.css にまとめています。写真台帳.md も参照 */

/* ページ内リンク・右側の項目から飛んだときに、ヘッダーの下へ隠れないように */
.st-plz [id]{ scroll-margin-top: 100px; }


/* ---- Lightningが見出しやリストに付ける装飾を打ち消す ---------------------- */
.st-plz h3, .st-plz h4, .st-plz dl, .st-plz dt, .st-plz dd,
.st-plz ol, .st-plz ul, .st-plz li, .st-plz figure{
  margin: 0;
  padding: 0;
  background: none !important;
  font-family: inherit;
}
.st-plz h3::before, .st-plz h3::after,
.st-plz h4::before, .st-plz h4::after{ content: none !important; }
.st-plz h3, .st-plz h4{ border: 0 !important; }
.st-plz ol, .st-plz ul{ list-style: none; }

/* WordPressが差し込む余計な要素でレイアウトが崩れないように
   ★新しい子要素のクラスを足したときは、ここの :not() にも足すこと */
.st-plz .plz-zone > :not(.plz-zone__item),
.st-plz .plz-zone__item > :not(.plz-zone__head):not(.plz-zone__mcs),
.st-plz .plz-zone__mcs > :not(.plz-mc),
.st-plz .plz-loc > :not(.plz-loc__item),
.st-plz .plz-flow > :not(.plz-flow__step),
.st-plz .plz-nocontact__btns > :not(.plz-btn){ display: none !important; }


/* ---- 共通の文字 ----------------------------------------------------------- */
.st-plz .plz-p{
  font-size: 14.5px;
  line-height: 2;
  font-weight: 500;
  color: #2b2b2b;
  max-width: 46em;
}
.st-plz .plz-p + .plz-p{ margin-top: 1em; }
.st-plz .plz-lead{ margin-bottom: 36px; }
.st-plz .plz-aside{
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.9;
  font-weight: 500;
  color: var(--ink-soft);
}


/* ---- 導入 ------------------------------------------------------------------
   左に見出し、右に本文。その下に写真の横スライド（下の v1.18.0 の節）。
   大きな英字（Gateway to innovation）は v1.18.0 で入口へ移した */
.st-plz .plz-intro{ padding: 72px 0 0; }
.st-plz .plz-intro .wrap{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 56px;
  align-items: end;
}
.st-plz .plz-intro__ttl{
  margin-top: 22px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 900;
  line-height: 1.7;
  color: var(--ink);
}
.st-plz .plz-intro__ttl{ border: 0 !important; }
.st-plz .plz-intro__ttl::before, .st-plz .plz-intro__ttl::after{ content: none !important; }
.st-plz .plz-intro__ttl{ word-break: auto-phrase; }
.st-plz .plz-intro__body .plz-p{ max-width: none; }


/* ---- 各セクション --------------------------------------------------------- */
.st-plz .plz-sec{ padding: 96px 0 0; }


/* ---- 本社のフロア（5つのゾーン） ------------------------------------------
   入口から奥へ、ゾーンを1段ずつ縦に並べます。
   左にゾーン（番号・名前・説明・関連リンク）、右に展示している主な製品（機種名＋一言）。
   来る人が知りたいのは「何が展示されているか」なので、展示機の一覧を主役にし、
   特設サイトなどへのリンクは小さく添えるだけにしています（2026-10-08 わただ） */
.st-plz .plz-zone{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  border-bottom: 1px solid var(--line);
}
.st-plz .plz-zone__item{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 16px 56px;
  padding: 30px 0 32px;
  border-top: 1px solid var(--line);
}
.st-plz .plz-zone__item{ grid-column: 1 / -1; }
/* 展示機の一覧がないゾーン（01・02）は、2つで1段に横並び。右側が空かないように */
.st-plz .plz-zone__item--half{ grid-column: auto; grid-template-columns: 1fr; }
.st-plz .plz-zone__item--half .plz-zone__txt{ max-width: 30em; }
/* 入口の段（01・02 の両方）だけ、上の線を黒く太く（通路の始まり） */
.st-plz .plz-zone__item:first-child,
.st-plz .plz-zone__item--half + .plz-zone__item--half{ border-top: 2px solid var(--ink); }
/* 通路の線からの小さな目印 */
.st-plz .plz-zone__item::before{
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 28px; height: 3px;
  background: var(--red);
}
/* ゾーンの写真・ロゴ。ゾーン名の上に、どれも同じ 16:10 の枠で */
.st-plz .plz-zone__media{
  aspect-ratio: 16 / 10;
  margin-bottom: 18px;
  overflow: hidden;
  background: #eceeed !important;
}
.st-plz .plz-zone__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ロゴ（02 STAR MUSEUM・05 スターテクノ）は薄いグレーの面の中央に、切らずに置きます */
.st-plz .plz-zone__media--logo{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10% 14%;
  background: #f6f7f7 !important;
}
.st-plz .plz-zone__media--logo img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.st-plz .plz-zone__no{
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--red);
}
.st-plz .plz-zone__ttl{
  margin-top: 6px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--ink);
  /* 意味のまとまりで折り返す（1文字だけ次の行に落ちないように） */
  word-break: auto-phrase;
  text-wrap: balance;
}
.st-plz .plz-zone__txt,
.st-plz .plz-mc__txt{ word-break: auto-phrase; }
.st-plz .plz-zone__txt{
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.9;
  color: #2b2b2b;
}
/* 関連リンク（特設サイトなど）。主役ではないので小さく */
.st-plz .plz-zone__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.st-plz .plz-zone__link .ar{ color: var(--red); }
.st-plz .plz-zone__link:hover{ color: var(--ink); border-color: var(--ink); }

/* 展示している主な製品。2列に並べ、機種名を太く、一言を添えます */
.st-plz .plz-zone__mcs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  align-content: start;
}
.st-plz .plz-mc{
  padding: 12px 0;
  border-top: 1px solid #ededed;
}
.st-plz .plz-mc:nth-child(-n+2){ border-top: 0; padding-top: 2px; }
.st-plz .plz-mc__name{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--ink);
}
.st-plz .plz-mc__link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.st-plz .plz-mc__link .ar{ color: var(--red); }
.st-plz .plz-mc__link:hover{ color: var(--ink); border-color: var(--ink); }
.st-plz .plz-mc__txt{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  color: #2b2b2b;
}


/* ---- 3つの拠点 ------------------------------------------------------------ */
.st-plz .plz-loc{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.st-plz .plz-loc__item{ min-width: 0; }
.st-plz .plz-loc__photo{
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #eceeed;
  background-image: var(--ph-flat);
  margin-bottom: 20px;
}
.st-plz .plz-loc__photo--hq{ background-image: var(--plz-hq), var(--ph-flat); }
.st-plz .plz-loc__photo--kanto{ background-image: var(--plz-kanto), var(--ph-flat); }
.st-plz .plz-loc__photo--osaka{ background-image: var(--plz-osaka), var(--ph-flat); }
.st-plz .plz-loc__tag{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--red);
}
.st-plz .plz-loc__name{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}
.st-plz .plz-loc__addr{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 500;
  color: #2b2b2b;
}
.st-plz .plz-loc__tel{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.st-plz .plz-loc__dl{ margin-top: 14px; }
.st-plz .plz-loc__row{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #ededed;
}
.st-plz .plz-loc__row:last-child{ border-bottom: 1px solid #ededed; }
.st-plz .plz-loc__row dt{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--ink-soft);
}
.st-plz .plz-loc__row dd{
  font-size: 13px;
  font-weight: 500;
  line-height: 1.85;
  color: #2b2b2b;
}
.st-plz .plz-loc__map{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.st-plz .plz-loc__map .ar{ color: var(--red); }
.st-plz .plz-loc__map:hover{ color: var(--red); border-color: var(--red); }

/* 3つのカードの行（開設・営業時間・お車・電車・地図）の高さを横でそろえる（v1.18.1、2026-10-22）
   関東の「お車」だけ2行になって、その下が1行ずつずれていた（わただ）。
   カードの中身を、写真・タグ・名前・住所・TEL・表の4行・地図の10段に分けて、3つのカードで段を共有する（subgrid）。
   表（dl）は display: contents で、4行をそのままカードの段にする。スマホ（1列）では使わない */
@media (min-width: 621px){
  .st-plz .plz-loc{ grid-template-rows: repeat(10, auto); row-gap: 0; }
  .st-plz .plz-loc__item{
    display: grid;
    grid-row: span 10;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .st-plz .plz-loc__dl{ display: contents; }
  .st-plz .plz-loc__row:first-child{ margin-top: 14px; }
  .st-plz .plz-loc__map{ justify-self: start; align-self: start; }
}
.st-plz .plz-loc__row dd{ word-break: auto-phrase; }
/* 途中で折り返したくない言葉（関東の「足利方面へ」。「足利方／面へ」になっていた） */
.st-plz .plz-nw{ white-space: nowrap; }


/* ---- 見学のご予約 --------------------------------------------------------- */
.st-plz .plz-flow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.st-plz .plz-flow__step{
  border-top: 2px solid var(--line);
  padding: 20px 24px 0 0;
}
.st-plz .plz-flow__step:first-child{ border-top-color: var(--ink); }
.st-plz .plz-flow__no{
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--red);
}
.st-plz .plz-flow__ttl{
  margin-top: 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--ink);
}
.st-plz .plz-flow__txt{
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.85;
  color: #2b2b2b;
}

/* 担当者がわからない方は */
.st-plz .plz-nocontact{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 32px;
  margin-top: 48px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.st-plz .plz-nocontact__ttl{
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}
.st-plz .plz-nocontact__txt{
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.9;
  color: #2b2b2b;
}
.st-plz .plz-nocontact__btns{ display: flex; gap: 12px; }
.st-plz .plz-btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 190px;
  padding: 15px 20px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: background .22s ease, color .22s ease;
}
/* 乗せたとき：黒の塗りつぶしは強いので、薄いグレーの面に。矢印が少し右へ（2026-10-14） */
.st-plz .plz-btn:hover{ background: #f1f2f3; }
.st-plz .plz-btn .ar{ transition: transform .22s ease; }
.st-plz .plz-btn:hover .ar{ transform: translateX(4px); }
.st-plz .plz-btn--main{ background: var(--ink); color: #fff !important; }
.st-plz .plz-btn--main:hover{ background: #2b2b2b; }
.st-plz .plz-btn .ar{ color: var(--red); font-size: 16px; }


/* ---- 下部の導線 -----------------------------------------------------------
   他の下層ページと同じ、画面いっぱいの薄い帯です */
.st-plz .plz-links{
  --st-wrap: 1180px;
  background: #f6f7f7;
  margin-top: 96px;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 54px max(24px, calc((100vw - var(--st-wrap)) / 2)) 58px;
}
.st-plz .plz-links__inner{
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  /* 2026-10-14：左右に分けず、文とボタンの組ごと中央に */
  justify-content: center;
  gap: 24px 56px;
  flex-wrap: wrap;
}
.st-plz .plz-links__lead{
  font-size: 15px;
  line-height: 2;
  font-weight: 600;
  color: var(--ink);
}
.st-plz .plz-links__btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 250px;
  padding: 17px 24px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
  transition: background .22s ease, color .22s ease;
}
/* 乗せたとき：黒の塗りつぶしは強いので、薄いグレーの面に。矢印が少し右へ（2026-10-14） */
.st-plz .plz-links__btn:hover{ background: #f1f2f3; }
.st-plz .plz-links__btn .ar{ transition: transform .22s ease; }
.st-plz .plz-links__btn:hover .ar{ transform: translateX(4px); }
.st-plz .plz-links__btn .ar{ color: var(--red); font-size: 16px; }


/* ---- タブレット ----------------------------------------------------------- */
@media (max-width: 960px){
  .st-plz .plz-intro .wrap{ grid-template-columns: 1fr; row-gap: 24px; }

  /* ゾーンは、展示機の一覧をゾーンの説明の下へ */
  .st-plz .plz-zone__item{ grid-template-columns: 1fr; gap: 18px; }
  .st-plz .plz-zone{ column-gap: 32px; }
  /* 1段まるごとのゾーン（03〜05）は、写真が画面いっぱいに広がらないように */
  .st-plz .plz-zone__item:not(.plz-zone__item--half) .plz-zone__media{ max-width: 420px; }

  .st-plz .plz-loc{ gap: 20px; }
  .st-plz .plz-loc__name{ font-size: 16px; }
  .st-plz .plz-loc__row{ grid-template-columns: 1fr; gap: 0; }

  .st-plz .plz-nocontact{ grid-template-columns: 1fr; }
}


/* ---- スマホ --------------------------------------------------------------- */
@media (max-width: 620px){
  .st-plz .plz-intro{ padding: 40px 0 0; }
  .st-plz .plz-intro__ttl{ margin-top: 16px; }
  .st-plz .plz-p{ font-size: 14px; }

  .st-plz .plz-sec{ padding: 64px 0 0; }
  .st-plz .plz-lead{ margin-bottom: 28px; }

  .st-plz .plz-zone__item{ padding: 24px 0 26px; }
  /* 01・02 も縦に。02 の上の線は細い線に戻す */
  .st-plz .plz-zone{ grid-template-columns: 1fr; }
  .st-plz .plz-zone__item:not(.plz-zone__item--half) .plz-zone__media{ max-width: none; }
  .st-plz .plz-zone__item--half + .plz-zone__item--half{ border-top: 1px solid var(--line); }
  .st-plz .plz-zone__ttl{ font-size: 17px; }
  /* 展示機は1列に */
  .st-plz .plz-zone__mcs{ grid-template-columns: 1fr; }
  .st-plz .plz-mc:nth-child(2){ border-top: 1px solid #ededed; padding-top: 12px; }

  .st-plz .plz-loc{ grid-template-columns: 1fr; gap: 40px; }
  .st-plz .plz-loc__row{ grid-template-columns: 64px 1fr; gap: 12px; }

  .st-plz .plz-flow{ grid-template-columns: 1fr; }
  .st-plz .plz-flow__step{
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
  }
  .st-plz .plz-flow__step:first-child{ border-top: 2px solid var(--ink); }
  .st-plz .plz-flow__no{ grid-row: 1 / span 2; padding-top: 3px; }
  .st-plz .plz-flow__ttl{ margin-top: 0; }

  .st-plz .plz-nocontact__btns{ flex-direction: column; }
  .st-plz .plz-btn{ width: 100%; }

  .st-plz .plz-links{
    margin-top: 64px;
    padding: 40px max(16px, calc((100vw - var(--st-wrap)) / 2)) 44px;
  }
  .st-plz .plz-links__inner{ flex-direction: column; align-items: stretch; gap: 22px; }
  .st-plz .plz-links__lead{ text-align: center; }
  .st-plz .plz-links__btn{ width: 100%; }
}


/* ==========================================================================
   2026-10-22（子テーマ v1.18.0）トヨタ会館を参考に作り直した分
   試作（02_作業中/_plaza/_mock、2026-10-21〜22）を、わただと画面で確かめながら決めたもの。経緯は案件の CLAUDE.md。
   前半の指定を上書きする。前に決めたことは守る：展示機の一覧（機種名＋一言）は文字で残す／
   ゾーンの色分けはしない／H1 は固定ページのタイトルのまま（入口の英字は CSS の飾りで、H1 には入らない）
   ========================================================================== */


/* ---- 入口（ページのタイトル）を全画面の写真に -------------------------
   ほかの下層ページの「白地に英字＋日本語」の例外。STAR PLAZA だけ。
   写真は本社の全景（--plz-hq）。あとで動画に替えるときも、この枠のまま */
body:has(.st-plz) .page-header{
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, calc(100svh - 118px), 900px);
  border-bottom: 0 !important;
  background: #0d0d0d !important;
}
/* 共通の「水墨のにじみ」をやめて、写真をそのまま全面に。
   文字が読めるように、左と下だけ暗く。開いたときに写真がゆっくり引いていく */
body:has(.st-plz) .page-header::after{
  background:
    linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 62%),
    var(--plz-hq) center 62% / cover no-repeat;
  filter: none;
  opacity: 1;
  -webkit-mask: none;
          mask: none;
  transform-origin: 60% 60%;
  animation: plz-hero-in 9s var(--plz-open, 0s) cubic-bezier(.2,.6,.2,1) both;
}
@keyframes plz-hero-in{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}

/* 文字は左下に */
body:has(.st-plz) .page-header > *{
  align-items: flex-start;
  text-align: left;
  padding: 0 0 clamp(48px, 7vw, 96px) !important;
}
/* 大きな英字。パンフレットのキャッチ
   行の高さ 1 だと「Gateway」の y の下と「innovation」の i の点がぶつかったので 1.12 に（わただ） */
body:has(.st-plz) .page-header > *:first-child::before{
  content: "Gateway to\A innovation";
  white-space: pre;
  font-size: clamp(44px, 8vw, 124px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: clamp(18px, 2.4vw, 32px);
  animation: plz-rise 1.2s calc(var(--plz-open, 0s) + .2s) cubic-bezier(.2,.6,.2,1) both;
}
/* 日本語（H1） */
body:has(.st-plz) .page-header .page-header-title,
body:has(.st-plz) .page-header h1{
  color: #fff !important;
  font-size: clamp(14px, 1.3vw, 18px) !important;
  letter-spacing: .2em;
  padding: 0 !important;
  text-align: left !important;
  animation: plz-rise 1.2s calc(var(--plz-open, 0s) + .45s) cubic-bezier(.2,.6,.2,1) both;
}
@keyframes plz-rise{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: none; }
}

/* 右下の「SCROLL」と、下へ流れる細い線 */
body:has(.st-plz) .page-header > *:first-child::after{
  content: "SCROLL" !important;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-bottom: 76px;
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  color: #fff;
  background: linear-gradient(#fff, #fff) center bottom / 1px 64px no-repeat;
  animation: plz-scroll 2.4s ease-in-out infinite;
}
@keyframes plz-scroll{
  0%{ background-size: 1px 0; background-position: center calc(100% - 64px); }
  45%{ background-size: 1px 64px; background-position: center calc(100% - 0px); }
  100%{ background-size: 1px 0; background-position: center bottom; }
}

/* ---- イントロ：一面スターレッド → 赤が上へ抜けて、真ん中に STAR PLAZA のロゴが浮かぶ（約3秒）
   最初に開いたときだけ（2026-10-21 わただ）：子テーマの js/star-plaza-head.js（functions.php が書き出す）が
   <head> で html に .plz-op をつけたときだけ出す。HTML の hidden で、ふだんは出ない（JS・CSS が動かなくても出ない）。
   入口の写真・英字・右の札は、イントロが出るときだけ、終わるころ（--plz-open）から動き出す。
   ロゴは 00_資料集/LOGO/STAR_PLAZA.svg から _ロゴのPNGを作る.py で作った PNG */
html.plz-op body:has(.st-plz){ --plz-open: 2.4s; }
.st-plz .plz-opening{ display: none; }
html.plz-op .st-plz .plz-opening{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none;
  animation: plz-open-out .7s 2.5s ease forwards;
}
.st-plz .plz-opening__red{
  position: absolute;
  inset: 0;
  background: var(--red, #e60012);
  clip-path: inset(0 0 0 0);
  animation: plz-open-red 1s .6s cubic-bezier(.75,0,.2,1) forwards;
}
.st-plz .plz-opening__logo{
  position: relative;
  width: min(280px, 52vw);
  height: auto;
  opacity: 0;
  filter: blur(14px);
  transform: scale(.94);
  animation: plz-open-logo 1.1s 1.15s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes plz-open-red{ to{ clip-path: inset(0 0 100% 0); } }
@keyframes plz-open-logo{ to{ opacity: 1; filter: blur(0); transform: none; } }
@keyframes plz-open-out{ to{ opacity: 0; visibility: hidden; } }

/* 英字を入口へ移したので、導入は日本語の見出しから。
   見出しと右の文章は、上下の真ん中をそろえる（v1.18.1、2026-10-22 わただ。
   元は下の端 → 試作で頭そろえ → 見出しが上に寄って見えたので真ん中に） */
.st-plz .plz-intro .wrap{ align-items: center; }
.st-plz .plz-intro__ttl{ margin-top: 0; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.6; }

/* ---- 導入の写真：右から左へ流れる横スライド（写真3枚 → 11枚。2026-10-22 に4枚足した）
   同じ並びを2回続けて、半分まで流したら最初に戻す（つなぎ目が見えない）。乗せると止まる。
   画面の端から端まで */
.st-plz .plz-reel{
  grid-column: 1 / -1;
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 56px 0 0 -50vw;
  overflow: hidden;
}
.st-plz .plz-reel__track{
  display: flex;
  width: max-content;
  animation: plz-reel 125s linear infinite;  /* 11枚で、7枚のとき（80s）と同じ速さ */
}
.st-plz .plz-reel:hover .plz-reel__track{ animation-play-state: paused; }
.st-plz .plz-reel__set{ display: flex; gap: 12px; padding-right: 12px; }
.st-plz .plz-reel__item{
  flex: none;
  height: clamp(200px, 28vw, 400px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #eceeed !important;
}
.st-plz .plz-reel__item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes plz-reel{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.st-plz .plz-reel > :not(.plz-reel__track),
.st-plz .plz-reel__track > :not(.plz-reel__set),
.st-plz .plz-reel__set > :not(.plz-reel__item){ display: none !important; }

@media (prefers-reduced-motion: reduce){
  body:has(.st-plz){ --plz-open: 0s; }
  .st-plz .plz-opening{ display: none; }
  /* 流さずに、指で横にずらして見る */
  .st-plz .plz-reel{ overflow-x: auto; }
  .st-plz .plz-reel__track{ animation: none; }
  .st-plz .plz-reel__set[aria-hidden]{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  body:has(.st-plz) .page-header::after,
  body:has(.st-plz) .page-header > *:first-child::before,
  body:has(.st-plz) .page-header h1,
  body:has(.st-plz) .page-header > *:first-child::after{ animation: none; }
}


/* ---- Floor を写真のカードに -----------------------------------------
   節ごと暗い面にして、展示場の中にいるような見え方に（写真が浮き立つ）。
   01・02 は2枚並びのカード、03〜05 は写真を大きく左右交互に置き、反対側に展示機の一覧 */
/* 暗い面だけを画面いっぱいに（中身の幅はほかの節と同じ） */
.st-plz #floor{
  position: relative;
  isolation: isolate;
  margin-top: 96px;
  padding: 104px 0 112px;
}
.st-plz #floor::before{
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: #121519;
}
.st-plz #floor .sec-en{ color: #fff; }
.st-plz #floor .sec-jp{ color: #a9afb6; }
.st-plz #floor .plz-p{ color: #d5d9dd; }
.st-plz #floor .plz-aside{ color: #8d949b; margin-top: 28px; }

.st-plz .plz-zone{
  gap: 28px;
  border-bottom: 0;
}
.st-plz .plz-zone__item{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 0;
  padding: 0;
  border-top: 0 !important;
  background: #1c2026 !important;
  overflow: hidden;
}
.st-plz .plz-zone__item::before{ content: none; }
/* 写真・番号・名前を、カードの格子に直接並べる */
.st-plz .plz-zone__head{ display: contents; }

/* 写真：左の列を上から下まで */
.st-plz .plz-zone__media{
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: auto;
  min-height: 100%;
  margin: 0;
}
.st-plz .plz-zone__item:not(.plz-zone__item--half) .plz-zone__media{ min-height: 420px; }
.st-plz .plz-zone__media img{ transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.st-plz .plz-zone__item:hover .plz-zone__media img{ transform: scale(1.05); }
/* 番号が読めるよう、写真の左下を暗く */
.st-plz .plz-zone__media:not(.plz-zone__media--logo)::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(20deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
}

/* 番号：写真の左下に大きく */
.st-plz .plz-zone__no{
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: end;
  justify-self: start;
  position: relative;
  z-index: 1;
  padding: 0 0 18px 26px;
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
}
/* ロゴの面（02・05）の番号は濃いグレー。黒（#0d0d0d）はロゴより強く目に入った（2026-10-22 わただ。
   4色を比べた画面は 02_作業中/_plaza/_確認_ロゴの面の番号の色_20261022.jpg（git 対象外）） */
.st-plz .plz-zone__media--logo + .plz-zone__no{ color: #3a4048; }

/* 名前・説明・リンク・展示機：右の列 */
.st-plz .plz-zone__ttl,
.st-plz .plz-zone__txt,
.st-plz .plz-zone__link,
.st-plz .plz-zone__mcs{
  grid-column: 2;
  margin-left: 40px;
  margin-right: 40px;
}
.st-plz .plz-zone__ttl{ grid-row: 1; margin-top: 40px; font-size: 22px; color: #fff; }
.st-plz .plz-zone__txt{ grid-row: 2; color: #c9ced3; max-width: none; }
.st-plz .plz-zone__link{
  grid-row: 3;
  justify-self: start;
  color: #c9ced3;
  border-color: rgba(255,255,255,.25);
}
.st-plz .plz-zone__link:hover{ color: #fff; border-color: #fff; }
.st-plz .plz-zone__mcs{
  grid-row: 4;
  margin-top: 26px;
  margin-bottom: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  gap: 0 28px;
}
.st-plz .plz-mc{ border-top-color: rgba(255,255,255,.08); }
.st-plz .plz-mc__name{ color: #fff; font-size: 14.5px; }
.st-plz .plz-mc__txt{ color: #b7bdc3; font-size: 12.5px; }
.st-plz .plz-mc__link{ color: #c9ced3; border-color: rgba(255,255,255,.25); }
.st-plz .plz-mc__link:hover{ color: #fff; border-color: #fff; }

/* 04 だけ写真を右に（左右交互） */
.st-plz .plz-zone__item:nth-child(4){ grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.st-plz .plz-zone__item:nth-child(4) .plz-zone__media,
.st-plz .plz-zone__item:nth-child(4) .plz-zone__no{ grid-column: 2; }
.st-plz .plz-zone__item:nth-child(4) :is(.plz-zone__ttl, .plz-zone__txt, .plz-zone__link, .plz-zone__mcs){ grid-column: 1; }

/* 01・02：2枚並びのカード。写真が上、名前と説明が下 */
.st-plz .plz-zone__item--half{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
}
.st-plz .plz-zone__item--half .plz-zone__media{ grid-row: 1; aspect-ratio: 16 / 10; min-height: 0; }
.st-plz .plz-zone__item--half .plz-zone__no{ grid-row: 1; }
.st-plz .plz-zone__item--half :is(.plz-zone__ttl, .plz-zone__txt, .plz-zone__link){
  grid-column: 1;
  margin-left: 32px;
  margin-right: 32px;
}
.st-plz .plz-zone__item--half .plz-zone__ttl{ grid-row: 2; margin-top: 26px; }
.st-plz .plz-zone__item--half .plz-zone__txt{ grid-row: 3; }
.st-plz .plz-zone__item--half .plz-zone__link{ grid-row: 4; align-self: start; margin-bottom: 30px; }


/* ---- 予約の流れを「線でつないだ番号＋線のアイコン」に -----------------------
   スタースクールの申込の流れ（star-school.css の .sch-flow--road、v1.15.0）と同じ形。
   パソコン：薄いグレーの面に3段を横並び・すべて中央。タブレット・スマホ：縦の線で縦並び。
   アイコンは HTML の中の SVG。文言は変えない */
.st-plz .plz-flow--road{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 40px 28px 34px;
  background: #f6f7f7 !important;  /* 冒頭の ol の background: none !important に負けないように */
}
.st-plz .plz-flow--road .plz-flow__step{
  position: relative;
  border-top: 0;
  padding: 0 12px;
  text-align: center;
}
/* 番号の丸と、丸どうしをつなぐ線（丸の中心から次の丸の中心へ） */
.st-plz .plz-flow--road .plz-flow__step::before{
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: #c9cccc;
}
.st-plz .plz-flow--road .plz-flow__step:last-child::before{ content: none; }
.st-plz .plz-flow--road .plz-flow__no{
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
/* 最初の一歩（お客様がすること）だけ赤 */
.st-plz .plz-flow--road .plz-flow__step:first-child .plz-flow__no{ border-color: var(--red); color: var(--red); }
.st-plz .plz-flow--road .plz-flow__ic{
  position: relative;
  display: block;
  margin: 20px auto 0;
  width: 52px;
  height: 52px;
  color: var(--ink);
}
.st-plz .plz-flow--road .plz-flow__ic svg{
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* アイコンの間の「＞」 */
.st-plz .plz-flow--road .plz-flow__step:not(:last-child) .plz-flow__ic{ width: 100%; }
.st-plz .plz-flow--road .plz-flow__step:not(:last-child) .plz-flow__ic svg{ width: 52px; margin: 0 auto; }
.st-plz .plz-flow--road .plz-flow__step:not(:last-child) .plz-flow__ic::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1.4px solid #9a9a9a;
  border-right: 1.4px solid #9a9a9a;
  transform: rotate(45deg);
}
.st-plz .plz-flow--road .plz-flow__ttl{ margin-top: 14px; font-size: 15px; line-height: 1.5; }
.st-plz .plz-flow--road .plz-flow__txt{ margin-top: 6px; font-size: 13px; word-break: auto-phrase; text-wrap: balance; }


/* ---- 紹介動画（YouTube）。導入と Floor のあいだ ---------------------------
   iframe は youtube-nocookie（再生するまで Cookie を使わない）と loading="lazy" */
.st-plz .plz-movie .plz-lead{ margin-left: auto; margin-right: auto; text-align: center; word-break: auto-phrase; }
.st-plz .plz-movie__frame{
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
}
.st-plz .plz-movie__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.st-plz .plz-movie__link{ max-width: 960px; margin: 14px auto 0; text-align: right; }
.st-plz .plz-movie__link a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.st-plz .plz-movie__link .ar{ color: var(--red); }
.st-plz .plz-movie__link a:hover{ color: var(--ink); border-color: var(--ink); }


/* ---- 右側の項目（参考：トヨタ会館の右の「フロアガイド・リーフレット・車両一覧・団体予約」）
   画面の右端に固定。暗い半透明の札を縦に積み、最後の「見学のご予約」だけ赤（このページの CTA）。
   タブレット・スマホは画面の下に横一列の帯 */
.st-plz .plz-side{
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transform: translateY(-50%);
  animation: plz-side-in .8s calc(var(--plz-open, 0s) + 1s) cubic-bezier(.2,.6,.2,1) both;
}
@keyframes plz-side-in{
  from{ opacity: 0; transform: translate(24px, -50%); }
  to{ opacity: 1; transform: translate(0, -50%); }
}
.st-plz .plz-side__item{
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 168px;
  padding: 13px 18px;
  background: rgba(13,13,13,.82);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s ease, padding .2s ease;
}
.st-plz .plz-side__item:hover{ background: #0d0d0d; padding-left: 24px; }
.st-plz .plz-side__sub{ font-size: 10.5px; font-weight: 500; letter-spacing: .08em; color: #b9bec4; }
.st-plz .plz-side__item--main{ background: var(--red); }
.st-plz .plz-side__item--main:hover{ background: #c4000f; }
.st-plz .plz-side > :not(.plz-side__item){ display: none !important; }

@media (prefers-reduced-motion: reduce){
  .st-plz .plz-side{ animation: none; }
}
/* 本文の右の余白が札の幅（168px）より狭い画面では、縦書きの細い札にして本文にかぶらないように */
@media (min-width: 961px) and (max-width: 1439px){
  .st-plz .plz-side__item{
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 44px;
    padding: 16px 0;
    writing-mode: vertical-rl;
    letter-spacing: .12em;
  }
  .st-plz .plz-side__item:hover{ padding-left: 0; width: 50px; }
  .st-plz .plz-side__sub{ text-combine-upright: none; }
}


/* ---- タブレット ----------------------------------------------------------- */
@media (max-width: 960px){
  /* 右側の項目は、画面の下に横一列の帯。フッターが帯に隠れないよう、ページの下を空ける */
  .st-plz .plz-side{
    top: auto;
    bottom: 0;
    left: 0;
    flex-direction: row;
    transform: none;
    animation: none;
    padding-bottom: env(safe-area-inset-bottom);
    background: #15181c;  /* 半透明だと後ろの見出しが透けて読みにくい */
  }
  .st-plz .plz-side__item{
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
    min-height: 52px;
    padding: 6px 4px;
    font-size: 12px;
    letter-spacing: 0;
    text-align: center;
    background: transparent;
  }
  .st-plz .plz-side__item:hover{ padding-left: 4px; }
  .st-plz .plz-side__sub{ font-size: 9.5px; }
  .st-plz .plz-side__item--main{ background: var(--red); }
  body:has(.st-plz){ padding-bottom: 52px; }

  /* 予約の流れ：縦に並べ、左に番号の丸と縦の線。アイコンは見出しの左に小さく */
  .st-plz .plz-flow--road{ grid-template-columns: 1fr; row-gap: 0; padding: 26px 20px 8px; }
  .st-plz .plz-flow--road .plz-flow__step,
  .st-plz .plz-flow--road .plz-flow__step:first-child{
    display: grid;
    grid-template-columns: 31px 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 0 0 22px;
    border-top: 0;
    text-align: left;
  }
  .st-plz .plz-flow--road .plz-flow__step::before{
    top: 31px; left: 15px; width: 1px; height: calc(100% - 31px);
  }
  .st-plz .plz-flow--road .plz-flow__no{ grid-column: 1; grid-row: 1 / span 2; padding-top: 0; }
  .st-plz .plz-flow--road .plz-flow__ic,
  .st-plz .plz-flow--road .plz-flow__step:not(:last-child) .plz-flow__ic{ grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; margin: -4px 0 0; }
  .st-plz .plz-flow--road .plz-flow__ic::after{ content: none !important; }
  .st-plz .plz-flow--road .plz-flow__step .plz-flow__ic svg{ width: 40px; }
  .st-plz .plz-flow--road .plz-flow__ttl,
  .st-plz .plz-flow--road .plz-flow__txt{ grid-column: 3; }
  .st-plz .plz-flow--road .plz-flow__ttl{ margin-top: 4px; }

  .st-plz #floor{ padding-top: 80px; padding-bottom: 88px; }
  .st-plz .plz-zone{ gap: 20px; }
  /* 03〜05 も写真が上、名前と展示機が下 */
  .st-plz .plz-zone__item,
  .st-plz .plz-zone__item:nth-child(4){
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
  }
  .st-plz .plz-zone__item .plz-zone__media,
  .st-plz .plz-zone__item:nth-child(4) .plz-zone__media{ grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; min-height: 0 !important; max-width: none !important; }
  .st-plz .plz-zone__item .plz-zone__no,
  .st-plz .plz-zone__item:nth-child(4) .plz-zone__no{ grid-column: 1; grid-row: 1; }
  .st-plz .plz-zone__item :is(.plz-zone__ttl, .plz-zone__txt, .plz-zone__link, .plz-zone__mcs),
  .st-plz .plz-zone__item:nth-child(4) :is(.plz-zone__ttl, .plz-zone__txt, .plz-zone__link, .plz-zone__mcs){
    grid-column: 1;
    margin-left: 28px;
    margin-right: 28px;
  }
  .st-plz .plz-zone__ttl{ grid-row: 2; margin-top: 24px; }
  .st-plz .plz-zone__txt{ grid-row: 3; }
  .st-plz .plz-zone__link{ grid-row: 4; }
  .st-plz .plz-zone__mcs{ grid-row: 5; }
  .st-plz .plz-zone__item--half .plz-zone__media{ aspect-ratio: 16 / 10; }
}

/* ---- スマホ --------------------------------------------------------------- */
@media (max-width: 620px){
  body:has(.st-plz) .page-header{ min-height: clamp(420px, 78svh, 680px); }
  body:has(.st-plz) .page-header > *:first-child::after{ display: none; }
  .st-plz #floor{
    margin-top: 64px;
    padding: 64px 0 72px;
  }
  .st-plz .plz-zone__item :is(.plz-zone__ttl, .plz-zone__txt, .plz-zone__link, .plz-zone__mcs),
  .st-plz .plz-zone__item:nth-child(4) :is(.plz-zone__ttl, .plz-zone__txt, .plz-zone__link, .plz-zone__mcs){
    margin-left: 20px;
    margin-right: 20px;
  }
  .st-plz .plz-zone__ttl{ font-size: 19px; }
  .st-plz .plz-zone__no{ padding: 0 0 12px 18px; }
  .st-plz .plz-mc:nth-child(2){ border-top-color: rgba(255,255,255,.08); }
}