/* 店舗情報: 部品は pages.css の nx-。ここは店舗の一覧(dl)だけ */
.page-shop .shop-row {
  scroll-margin-top: calc(var(--header-height) + 24px);
}
.page-shop .shop-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* 店名が長いオンライン専門店も札が1行に収まるよう、札は右の余白まで使う */
.page-shop .shop-cards .photo-card-body h3 {
  margin-right: -22px;
}
/* 本社の写真は縦長。余白なしで埋め、「© 2022 Google」の表示が枠に入る高さに合わせる */
.page-shop .shop-row-online .photo-card-image img {
  object-position: 50% 85%;
}
.page-shop .shop-dl {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  margin: 4px 0 22px;
  font-size: 15px;
  border-top: 3px solid var(--brand-green);
}
.page-shop .shop-dl dt,
.page-shop .shop-dl dd {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
}
.page-shop .shop-dl dt {
  font-weight: 700;
}
.page-shop .shop-dl dd {
  color: var(--color-text-sub);
}
.page-shop .shop-dl a {
  color: var(--color-text);
  font-weight: 700;
}
.page-shop .photo-card-body .btn {
  align-self: flex-start;
  text-align: center;
  margin-top: auto;
}

/* オンライン専門店のカードの「法人事業について」(たいち 11/08「もっと目立たせて」): 塗りのボタンに右向きの矢印 */
.page-shop .photo-card-body .shop-corp-btn {
  min-width: 260px;
}
.page-shop .shop-corp-btn-arrow {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page-shop .shop-corp-btn:hover .shop-corp-btn-arrow {
    transform: translateX(4px) rotate(45deg);
  }
}
@media (max-width: 760px) {
  .page-shop .photo-card-body .shop-corp-btn {
    align-self: stretch;
    min-width: 0;
  }
}

/* お問い合わせ先 */
@media (max-width: 760px) {
  /* スマホは2列に並べて短くする(たいち 11/08「カード類は横に並べたりして見やすく」) */
  .page-shop .shop-contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .page-shop .shop-contacts .nx-doc {
    /* PC の行そろえ(subgrid)は、印を上に置くスマホでは使わない */
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 12px 18px;
  }
  .page-shop .shop-contacts .nx-doc .nx-icon {
    grid-row: auto;
    margin-bottom: 8px;
  }
  .page-shop .shop-contacts .nx-icon {
    width: 34px;
    height: 34px;
    padding: 8px;
  }
  .page-shop .shop-contacts .nx-icon svg {
    width: 18px;
    height: 18px;
  }
  .page-shop .shop-contacts h3 {
    /* 縦に積む(flex)と、共通の align-self: end が「右へ寄せる」に変わる。題も左の端から始める(たいち 11/13) */
    align-self: stretch;
    font-size: 14px;
  }
  .page-shop .shop-contacts .nx-doc-q {
    font-size: 12px;
  }
  .page-shop .shop-contacts .nx-doc-body {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 13px;
  }
}
.page-shop .shop-contacts a {
  font-weight: 700;
}
.page-shop .page-hero-lead {
  max-width: 780px;
}
/* 帯(2026-11-08 たいち「送った画像つかえー」): 写真は白くぼかさず、そのまま見せる。
   白い文字が読めるよう、全体を少しだけ暗くし、文字にだけ薄い影を付ける */
.page-shop .page-hero-photo::after {
  background: linear-gradient(
    90deg,
    rgba(20, 21, 22, 0.42) 0%,
    rgba(20, 21, 22, 0.26) 55%,
    rgba(20, 21, 22, 0.08) 100%
  );
}
.page-shop .page-hero :is(h1, .page-hero-lead) {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
@media (max-width: 760px) {
  /* スマホは文字が帯の幅いっぱいに広がるので、暗さを左右でそろえる。写真は机と椅子の場面を見せる */
  .page-shop .page-hero-photo::after {
    background: rgba(20, 21, 22, 0.4);
  }
  .page-shop .page-hero-photo img {
    object-position: 20% 50%;
  }
}

@media (min-width: 761px) and (max-width: 1240px) {
  /* 3枚を3列に収めきれない幅では、写真が左・文が右の横長で縦に並べる */
  .page-shop .shop-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-shop .shop-cards .photo-card-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .page-shop .shop-cards .photo-card-image {
    position: relative;
    aspect-ratio: auto;
    min-height: 100%;
  }
  .page-shop .shop-cards .photo-card-image img {
    position: absolute;
    inset: 0;
  }
  .page-shop .shop-cards .photo-card-body {
    padding-top: 20px;
  }
  .page-shop .shop-cards .photo-card-body h3 {
    margin: 0 0 14px -22px;
  }
}

@media (max-width: 760px) {
  /* 店舗は情報が多いので、写真を上にした縦長のカードにする */
  .page-shop .shop-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .page-shop .shop-cards .photo-card-inner {
    display: flex;
    flex-direction: column;
  }
  .page-shop .shop-cards .photo-card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
  }
  .page-shop .shop-cards .photo-card-body {
    padding: 0 18px 20px;
  }
  .page-shop .shop-cards .photo-card-body h3 {
    margin: -24px 0 14px -18px;
  }
  .page-shop .shop-dl {
    grid-template-columns: 80px minmax(0, 1fr);
    font-size: 14.5px;
  }
}

/* スマホ: 帯の高さに収めるため、ボタンを2列に並べる。余った1つは幅いっぱい */
@media (max-width: 760px) {
  .page-shop .page-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-shop .page-hero-actions .btn {
    min-height: 48px;
    padding: 8px 6px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .page-shop .page-hero-actions .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ===== 厚みを足す(2026-11-08 たいち「質素すぎ」) ===== */
/* A 案(本番): 店舗は写真の大きい横長で、写真の左右を交互にする */
@media (min-width: 761px) {
  .page-shop .shop-cards.is-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .page-shop .shop-cards.is-rows .photo-card-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    box-shadow: 0 18px 40px rgba(20, 21, 22, 0.08);
  }
  .page-shop .shop-cards.is-rows .photo-card-image {
    position: relative;
    aspect-ratio: auto;
    min-height: 380px;
  }
  .page-shop .shop-cards.is-rows .photo-card-image img {
    position: absolute;
    inset: 0;
  }
  .page-shop .shop-cards.is-rows .photo-card:nth-child(even) .photo-card-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
  .page-shop .shop-cards.is-rows .photo-card:nth-child(even) .photo-card-image {
    order: 2;
  }
  .page-shop .shop-cards.is-rows .photo-card-body {
    justify-content: center;
    padding: 40px 48px;
  }
  .page-shop .shop-cards.is-rows .photo-card-body h3 {
    margin: 0 0 20px -48px;
    font-size: 19px;
  }
}

/* B 案(?an=b の時だけ): 店舗一覧を黒い写真の帯に置く。カードの中は白地のまま黒い文字にする */
.page-shop .shop-list-band .photo-card-inner {
  color: var(--color-text);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* スマホ: 帯の高さに収めるため、ボタンを2列に並べる。余った1つは幅いっぱい */
@media (max-width: 760px) {
  .page-shop .page-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-shop .page-hero-actions .btn {
    min-height: 48px;
    padding: 8px 6px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .page-shop .page-hero-actions .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ===== スタッフの様子(2026-11-08 たいち「俺が送ったやつの背景そのまま使え」) =====
   背景はたいちの画像(staff-room.webp、2000×667)をそのまま使う。画像には題と写真3枚が描き込まれているので、
   PC は画像と同じ縦横比の舞台を作り、本物の題と写真3枚を、描き込みと同じ位置に % で重ねる。
   題の文字は「店舗一覧」「お問い合わせ先」と同じ section-title-center。題の下の金色の線は出さない(2026-11-09 たいち「変な線」)。
   位置は画像の画素を読んで測った値(題 x808〜1198・y70〜119、線 x963〜1036・y156〜161、
   写真の白い縁 x223〜719 / 751〜1248 / 1281〜1777・y222〜525)。幅が変わっても舞台ごと伸び縮みするのでずれない */
.page-shop .shop-staff {
  padding: 0;
  background: #faf6f2;
}
.page-shop .shop-staff-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 667;
  background: url("/img/shop/staff-room.webp") center / 100% 100% no-repeat;
  container-type: inline-size;
}
/* 描き込みの題と線を、まわりの壁と同じ色でふんわり隠す(本物の題をこの上に置く) */
.page-shop .shop-staff-cover {
  position: absolute;
  left: 36.5%;
  top: 7.5%;
  width: 27%;
  height: 19.5%;
  border-radius: 50%;
  background: rgb(250, 246, 242);
  box-shadow: 0 0 2cqw 1.6cqw rgb(250, 246, 242);
}
/* 題は描き込みの題を隠した所(shop-staff-cover)の真ん中に置く。文字の大きさ・太さ・書体は section-title-center のまま */
.page-shop .shop-staff-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 11.5%;
}
.page-shop .shop-staff-photos {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 写真の札: 描き込みの白い縁より少しだけ大きくして、描き込みが見えないようにする */
.page-shop .shop-staff-photos li {
  position: absolute;
  top: 33.1%;
  width: 25.05%;
  height: 46%;
  padding: 0.35cqw;
  border-radius: 0.6cqw;
  background: #fff;
  box-shadow: 0 0.6cqw 1.6cqw rgba(60, 45, 20, 0.12);
}
.page-shop .shop-staff-photos li:nth-child(1) {
  left: 11.05%;
}
.page-shop .shop-staff-photos li:nth-child(2) {
  left: 37.45%;
}
.page-shop .shop-staff-photos li:nth-child(3) {
  left: 63.95%;
}
.page-shop .shop-staff-photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  border-radius: 0.35cqw;
}
.page-shop .shop-staff-photos:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 6px;
}
@media (max-width: 760px) {
  /* スマホ(2026-11-09 たいち「自分でスライドしないと全部映ってないのキモい。自動スライドさせれば」):
     描き込みの舞台は使わず、壁と同じ色の地に題、その下に写真を1枚ずつ画面幅いっぱいに並べる。
     数秒ごとに自動で次の写真へ送る(shop/index.astro の小さな script)。指で送ってもよい。写真はたいちの物そのまま */
  .page-shop .shop-staff-stage {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    padding: var(--section-space) 0 48px;
    background: #faf6f2;
    container-type: normal;
  }
  .page-shop .shop-staff-cover {
    display: none;
  }
  .page-shop .shop-staff-title {
    position: static;
  }
  .page-shop .shop-staff-photos {
    order: 2;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .page-shop .shop-staff-photos::-webkit-scrollbar {
    display: none;
  }
  .page-shop .shop-staff-photos li {
    position: static;
    flex: 0 0 100%;
    width: auto;
    height: auto;
    padding: 0 16px 14px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    scroll-snap-align: center;
  }
  .page-shop .shop-staff-photos img {
    height: auto;
    aspect-ratio: 4 / 3;
    border: 4px solid #fff;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(60, 45, 20, 0.12);
  }
  .page-shop .shop-staff-photos:focus-visible {
    outline-offset: -3px;
  }
}

/* 再総点検(2026-11-10): お問い合わせ先の札の題「アパマンショップ」が幅320の2列で枠から6pxはみ出すので、狭い時だけ少し小さく詰める */
@media (max-width: 340px) {
  .page-shop .shop-contacts h3 {
    font-size: 13px;
    letter-spacing: 0;
  }
}

/* お問い合わせ先(スマホの2列): 題の行数が違っても、黄緑の線と TEL・FAX の高さをそろえる(2026-11-13 たいち)。
   同じ段の2枚は同じ高さなので、線から下(.nx-doc-body)をカードの下に寄せ、空きは小見出しの下に出す */
@media (max-width: 760px) {
  .page-shop .shop-contacts .nx-doc {
    display: flex;
    flex-direction: column;
  }
  .page-shop .shop-contacts .nx-doc-q {
    margin-bottom: 12px;
  }
  .page-shop .shop-contacts .nx-doc-body {
    width: 100%;
    margin-top: auto;
  }
}