/* スタジオ一覧・スタジオ詳細（/studio/・/studio/{slug}/・2026-11-03 新設）
   .p-studio にスコープ。単位は em・メディアクエリは max-width:769px のみ（CLAUDE.md の規約）。
   ヘッダー（header.site）は position:absolute で本文に重なるため、上に余白を取る。 */
.p-studio {
  --studio-ink: #1a1a1a;
  --studio-accent: #ff5a5f;
  --studio-tint: #f5f5f5;
  --studio-open: #fff0f0;
  display: block;
  padding: 5.5em 0 7.5em;
  color: var(--studio-ink);
  font-family: 'Google Sans', 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}
.p-studio a { color: inherit; }
.p-studio a:hover { color: var(--studio-accent); }
.p-studio img { display: block; max-width: 100%; height: auto; }
.p-studio__container { width: min(92%, 80em); margin: 0 auto; } /* サイト共通のコンテナ幅（CLAUDE.md） */
.p-studio__crumb { font-size: 0.75em; }
.p-studio__crumb a { text-decoration: none; }

.p-studio__head { margin: 2.5em 0 3em; }
.p-studio__head--detail { margin: 2em 0 1.5em; }
.p-studio__en { margin: 0; font-size: 0.8125em; font-weight: 700; letter-spacing: 0.2em; }
.p-studio__area { margin: 0; font-size: 0.8125em; font-weight: 700; }
.p-studio__title { margin: 0.125em 0 0.375em; font-size: 2.25em; line-height: 1.3; }
.p-studio__lead { margin: 0; font-size: 0.9375em; }

/* ボタン：主（ブランドカラー）／黒／淡いグレー */
.c-studio-btn {
  display: block;
  padding: 0.875em 1em;
  border-radius: 62.5em;
  font-size: 0.9375em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.p-studio .c-studio-btn--primary { background: var(--studio-accent); color: #fff; }
.p-studio .c-studio-btn--dark { background: var(--studio-ink); color: #fff; }
.p-studio .c-studio-btn--light { background: var(--studio-tint); color: var(--studio-ink); }
.p-studio .c-studio-btn:hover { color: #fff; opacity: 0.85; }
.p-studio .c-studio-btn--light:hover { color: var(--studio-ink); }

.c-studio-dl { margin: 0; display: grid; grid-template-columns: 4.75em minmax(0, 1fr); row-gap: 0.375em; font-size: 0.875em; }
.c-studio-dl dt { font-weight: 700; }
.c-studio-dl dd { margin: 0; }
.c-studio-dl address { font-style: normal; }

/* ===== 一覧 ===== */
.p-studio__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5em; }
.c-studio-card { display: flex; flex-direction: column; gap: 1em; }
.c-studio-card__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1em; }
.c-studio-card__name { display: flex; align-items: baseline; gap: 0.75em; }
.c-studio-card__title { margin: 0; font-size: 1.75em; line-height: 1.3; }
.c-studio-card__title a { text-decoration: none; }
.c-studio-card__area { font-size: 0.8125em; font-weight: 700; }
.c-studio-card__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625em; margin-top: 0.25em; }

.p-studio__common { margin-top: 4.5em; padding: 2em 2.5em; border-radius: 1em; background: var(--studio-tint); }
.p-studio__common-title { margin: 0 0 1em; font-size: 1.125em; }
.p-studio__common-list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5em; }
.p-studio__common-list dt { font-size: 0.8125em; font-weight: 700; }
.p-studio__common-list dd { margin: 0; font-size: 0.9375em; }

/* ===== 詳細 ===== */
.c-studio-hero { margin: 0; }
.c-studio-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 1em; }
.c-studio-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 12.5em 12.5em; gap: 0.5em; border-radius: 1em; overflow: hidden; }
.c-studio-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
.c-studio-mosaic__item img { width: 100%; height: 100%; object-fit: cover; }

.p-studio__body { display: flex; align-items: flex-start; gap: 3.5em; margin-top: 3em; }
.p-studio__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4em; }
.p-studio__sect { margin: 0; }
.p-studio__sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.p-studio__h2 { margin: 0 0 1em; font-size: 1.375em; }
.p-studio__h3 { margin: 1.5em 0 0.75em; font-size: 1em; }
.p-studio__text { margin: 0; font-size: 0.9375em; }
.p-studio__note { margin: 0.75em 0 0; font-size: 0.8125em; }
.p-studio__more { font-size: 0.875em; font-weight: 700; white-space: nowrap; }

.c-studio-menus { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.c-studio-menus__link { display: flex; flex-direction: column; gap: 0.375em; text-decoration: none; }
.c-studio-menus__img { display: block; aspect-ratio: 4 / 3; border-radius: 0.625em; overflow: hidden; background: var(--studio-tint); }
.c-studio-menus__img img { width: 100%; height: 100%; object-fit: cover; }
.c-studio-menus__name { font-size: 0.9375em; font-weight: 700; }
.c-studio-menus__price { font-size: 0.8125em; }

.c-studio-inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; }
.c-studio-inside__item { margin: 0; }
.c-studio-inside__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.625em; }
.c-studio-inside__item figcaption { margin-top: 0.5em; font-size: 0.875em; }

.c-studio-gallery { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5em; }
.c-studio-gallery img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 0.5em; }

.c-studio-access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; }
.c-studio-access__map { aspect-ratio: 4 / 3; border-radius: 0.625em; overflow: hidden; background: var(--studio-tint); }
.c-studio-access__map iframe { width: 100%; height: 100%; border: 0; }
.c-studio-route { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75em; }
.c-studio-route__item { display: flex; flex-direction: column; gap: 0.375em; font-size: 0.8125em; }
.c-studio-route__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5em; }

.c-studio-voice { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.5em; border-radius: 0.75em; background: var(--studio-tint); }
.c-studio-voice p { margin: 0; font-size: 0.9375em; }

/* Googleの口コミ */
/* ★（0.25刻み）：淡い★5つの上に、色付きの★5つを幅を絞って重ねる。幅は c-stars--r{0〜20}＝r×5% */
.c-stars { position: relative; display: inline-block; color: #dcdcdc; letter-spacing: 0.05em; white-space: nowrap; line-height: 1; }
.c-stars::before { content: "★★★★★"; position: absolute; top: 0; left: 0; overflow: hidden; color: var(--studio-accent); width: 0; }
.c-stars--r1::before { width: 5%; }
.c-stars--r2::before { width: 10%; }
.c-stars--r3::before { width: 15%; }
.c-stars--r4::before { width: 20%; }
.c-stars--r5::before { width: 25%; }
.c-stars--r6::before { width: 30%; }
.c-stars--r7::before { width: 35%; }
.c-stars--r8::before { width: 40%; }
.c-stars--r9::before { width: 45%; }
.c-stars--r10::before { width: 50%; }
.c-stars--r11::before { width: 55%; }
.c-stars--r12::before { width: 60%; }
.c-stars--r13::before { width: 65%; }
.c-stars--r14::before { width: 70%; }
.c-stars--r15::before { width: 75%; }
.c-stars--r16::before { width: 80%; }
.c-stars--r17::before { width: 85%; }
.c-stars--r18::before { width: 90%; }
.c-stars--r19::before { width: 95%; }
.c-stars--r20::before { width: 100%; }
.c-studio-rating { display: flex; align-items: baseline; gap: 0.5em; margin-bottom: 1.25em; }
.c-studio-rating__avg { font-size: 2.25em; font-weight: 700; line-height: 1; }
.c-studio-rating__stars { font-size: 1.125em; }
.c-studio-rating__count { font-size: 0.875em; }
.c-studio-reviews { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.c-studio-review { padding: 1.25em; border-radius: 0.75em; background: var(--studio-tint); }
.c-studio-review__meta { margin: 0 0 0.5em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-size: 0.8125em; font-weight: 700; }
.c-studio-review__meta time { font-weight: 400; }
.c-studio-review__stars { font-size: 1em; }
/* 長文は5行で切る（全文はGoogleで） */
.c-studio-review__text { margin: 0; font-size: 0.875em; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.c-studio-review__reply { margin-top: 0.75em; font-size: 0.8125em; }
.c-studio-review__reply summary { cursor: pointer; font-weight: 700; }
.c-studio-review__reply p { margin: 0.5em 0 0; white-space: pre-line; }
.c-studio-reviews__more { display: inline-block; margin-top: 1em; padding-left: 2em; padding-right: 2em; }
.c-studio-card__rating { margin-left: auto; font-size: 0.9375em; font-weight: 700; white-space: nowrap; }
.c-studio-card__rating span { color: var(--studio-accent); }
.c-studio-card__rating small { font-size: 0.8125em; font-weight: 400; }

.c-studio-staff { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; text-align: center; }
.c-studio-staff img { width: 7.5em; height: 7.5em; margin: 0 auto 0.5em; object-fit: cover; border-radius: 50%; }
.c-studio-staff b { display: block; font-size: 0.875em; }
.c-studio-staff span { font-size: 0.75em; }

.c-studio-faq { padding: 1em 0; border-bottom: 0.0625em solid #eee; }
.c-studio-faq summary { font-size: 0.9375em; font-weight: 700; cursor: pointer; }
.c-studio-faq p { margin: 0.5em 0 0; font-size: 0.875em; }

/* 予約パネル（PCは右に固定・スマホは店名の下） */
.c-studio-panel { position: sticky; top: 1.5em; flex: none; width: 21.25em; padding: 1.5em; border-radius: 1em; background: #fff; box-shadow: 0 0.25em 1.5em rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 0.875em; }
.c-studio-panel__title { margin: 0; font-size: 1em; font-weight: 700; }
.c-studio-panel__note { margin: 0; font-size: 0.75em; }
.c-studio-panel__tel { margin: 0; font-size: 0.8125em; text-align: center; }
.c-studio-av { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25em; text-align: center; }
.c-studio-av__day { padding: 0.375em 0; border-radius: 0.375em; background: var(--studio-tint); font-size: 0.75em; }
.c-studio-av__day.is-open { background: var(--studio-open); }
.c-studio-av__date { display: block; }
.c-studio-av__date small { display: block; font-size: 0.8125em; }
.c-studio-av__date.is-sun { color: #c62828; }
.c-studio-av__date.is-sat { color: #1f4e9c; }

.p-studio__others { margin-top: 5em; }
.c-studio-others { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.c-studio-others a { display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 1.5em; align-items: center; padding: 1em; border-radius: 1em; background: var(--studio-tint); text-decoration: none; }
.c-studio-others img { width: 15em; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.625em; }
.c-studio-others span { font-size: 0.875em; }
.c-studio-others small { display: block; font-size: 0.875em; font-weight: 700; }
.c-studio-others b { display: block; font-size: 1.5em; }

@media (max-width: 769px) {
  .p-studio { padding: 4.5em 0 6em; }
  .p-studio__title { font-size: 1.75em; }
  .p-studio__head { margin: 1.5em 0 2em; }
  .c-studio-btn { font-size: 1em; }

  .p-studio__list { grid-template-columns: 1fr; gap: 3em; }
  .c-studio-card__title { font-size: 1.5em; }
  .c-studio-card__btns { grid-template-columns: 1fr; }
  .p-studio__common { padding: 1.25em; margin-top: 3em; }
  .p-studio__common-list { grid-template-columns: 1fr; gap: 0.75em; }

  .p-studio--detail .p-studio__container { width: 100%; }
  .p-studio--detail .p-studio__crumb,
  .p-studio--detail .p-studio__head,
  .p-studio__body,
  .p-studio__others { width: 92%; margin-left: auto; margin-right: auto; }
  .c-studio-hero img { aspect-ratio: 4 / 3; border-radius: 0; }
  /* モザイクは横にスワイプする1列に */
  .c-studio-mosaic { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0; grid-template-rows: none; }
  .c-studio-mosaic__item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; }

  .p-studio__body { flex-direction: column-reverse; gap: 2.5em; margin-top: 1.5em; }
  .p-studio__main { width: 100%; gap: 3em; }
  .c-studio-panel { position: static; width: 100%; box-sizing: border-box; padding: 1em; box-shadow: none; background: var(--studio-tint); }
  .c-studio-av__day { background: #fff; }
  .p-studio .c-studio-panel .c-studio-btn--light { background: #fff; } /* パネルが淡いグレーなので、白にしないとボタンに見えない */
  .c-studio-av__day.is-open { background: var(--studio-open); }
  .p-studio__h2 { font-size: 1.25em; }

  .c-studio-menus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
  .c-studio-inside { grid-template-columns: 1fr; }
  .c-studio-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-studio-gallery li:nth-child(n+7) { display: none; }
  .c-studio-access { grid-template-columns: 1fr; }
  .c-studio-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-studio-voice { flex-direction: column; align-items: stretch; }
  .c-studio-reviews { grid-template-columns: 1fr; }
  .c-studio-reviews__more { display: block; }
  .c-studio-card__name { flex-wrap: wrap; }
  .c-studio-staff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-studio-staff img { width: 5.5em; height: 5.5em; }
  .c-studio-others { grid-template-columns: 1fr; }
  .c-studio-others a { grid-template-columns: 7.5em minmax(0, 1fr); gap: 0.875em; padding: 0.75em; }
  .c-studio-others img { width: 7.5em; }

}