@charset "UTF-8";
/* =============================================================
   フォトスタジオ｜ pages.css
   ★明るさ・余白・柔らかさ。器から有彩色を抜いて作品の色だけを立てる（IMA から借用）
   ★ブランドピンクは使わない
   ============================================================= */

/* 不規則グリッド：1点だけ大きく抜き、サイズを揃えない */
/* ★2026-08-21：1点だけ大きく抜く不規則グリッドをやめ、全タイル同寸に統一した。
   岩田さん指示「みんなのサイトで散々やって改善した部分」＝ .tile-grid / .tile が正本。
   実害：スタジオの作例が 幅135〜281px・高180〜375px でバラついていた（実測） */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;align-items:start}
.gallery>*{min-width:0}
.gallery figure,.gallery .big{position:relative;display:block;width:100%;aspect-ratio:3/4;
  margin:0;overflow:hidden;background:var(--band);line-height:0}
.gallery .big{grid-column:auto;grid-row:auto}
.gallery img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:top center;display:block;margin:0}
@media (max-width:900px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 店舗カード */
.shops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.shops>*{min-width:0}
.shops figure{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:var(--band);line-height:0;margin:0 0 16px}
.shops figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:top center;display:block}
.shops .ph{aspect-ratio:4/3;margin-bottom:16px}
.shops b{display:block;font-weight:400;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
@media (max-width:899px){.shops{grid-template-columns:minmax(0,1fr)}}

/* 料金表：★価格はテキストで書く（画像だけの料金表はAIに読めない＝存在しないのと同じ） */
table.price{width:100%;table-layout:fixed;border-top:1px solid var(--ink);margin-top:24px}
table.price th,table.price td{padding:16px 0;border-bottom:1px solid var(--line);
  font-size:14px;overflow-wrap:break-word;vertical-align:top}
table.price th{width:52%;padding-right:16px;font-weight:400}
table.price td{font-family:var(--ff-en);font-size:clamp(16px,1.8vw,20px);text-align:right;white-space:nowrap}
table.price td .unit{font-family:var(--ff-body);font-size:12px;color:var(--mut);margin-left:.3em}
table.price .note{display:block;font-family:var(--ff-body);font-size:11.5px;color:var(--mut);
  white-space:normal;line-height:1.8;margin-top:6px}
@media (max-width:560px){
  table.price th{width:58%}
  table.price td{font-size:16px}
}

/* スタイリスト */
.staff{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.staff>*{min-width:0}
.staff figure{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;
  background:var(--band);line-height:0;margin:0 0 12px}
.staff figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:top center;display:block}
.staff .ph{aspect-ratio:3/4;margin-bottom:12px}
.staff b{display:block;font-weight:400;font-size:15px;margin-bottom:4px}
@media (max-width:899px){.staff{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* お客様の声 */
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.voices>div{background:var(--paper);padding:24px 20px 28px;min-width:0}
.voices .star{font-family:var(--ff-en);font-size:13px;color:var(--mut)}
.voices p{font-size:14px;line-height:1.95;margin-top:10px;max-width:none}
@media (max-width:899px){.voices{grid-template-columns:minmax(0,1fr)}}

.eyebrow{display:block;font-family:var(--ff-en);font-size:12px;
  letter-spacing:.12em;color:var(--mut);margin-bottom:14px}
.tbd{display:inline-block;border:1px dashed var(--line-2);color:var(--mut);
  font-size:11px;letter-spacing:.04em;padding:2px 8px;margin-left:6px;white-space:nowrap}

/* 柔らかさ＝角に微量の丸みを許す（面は0のまま。写真と枠だけ） */
.ph{border-radius:4px}
.plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.plan>*{min-width:0}
.plan figure{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;
  background:var(--band);line-height:0;margin:0 0 16px}
.plan figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:top center;display:block}
.plan .ph{aspect-ratio:4/5;margin-bottom:16px}
.plan b{display:block;font-weight:400;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
@media (max-width:899px){.plan{grid-template-columns:minmax(0,1fr)}}