@charset "UTF-8";
/* 写真スタジオ用トークン｜wire.css の派生（差分だけを上書きする）
   調査より：美容室は「艶・上質・ピンク」、スタジオは【明るさ・余白・柔らかさ】。
   ★ブランドピンクは使わない。
   ★現行スタジオサイトは本文13px・書体5種混在で設計が古く、写す対象ではない（作り直す） */
:root{
  --band:#f6f6f6;      /* 美容室(#f2f2f2)より明るい地 */
  --wm:#f0f0f0;
  --sec:clamp(80px,11vw,160px);   /* 余白をさらに広く */
  --fs-ja:clamp(19px,2.2vw,32px); /* 見出しは美容室より一段小さく、圧を下げる */
}
/* 柔らかさ＝角に微量の丸みを許す（面は0のまま。写真と枠だけ） */
.ph{border-radius:4px}
.brand,.card{border-radius:4px}

/* 撮影プラン：均等に並べず段差。子どもの節目の順に並べる（＝「次がある」） */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.plans>div{min-width:0}
/* 右肩下がりにしない。交互のずらしで均一さだけを崩す */
.plans>div:nth-child(even){margin-top:clamp(20px,3.4vw,48px)}
.plans .ph{aspect-ratio:3/4;margin-bottom:16px;border-radius:4px}
.plans .en{display:block;font-size:12px;color:var(--mut);margin-bottom:4px}
.plans b{display:block;font-weight:400;font-size:17px;letter-spacing:-.01em}
.plans .yen{font-family:'ShipporiMix',"Baskervville",serif;font-size:18px;display:block;margin-top:10px}
@media(max-width:899px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans>div:nth-child(3n+2),.plans>div:nth-child(3n){margin-top:0}
  .plans>div:nth-child(even){margin-top:clamp(16px,3vw,32px)}
}
/* 安心の3点＝大手が構造上できないこと（RESEARCH_STUDIO §5-3） */
.assure{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.assure>div{border-right:1px solid var(--line);padding:0 clamp(16px,2vw,28px) 36px;min-width:0}
.assure>div:last-child{border-right:none}
.assure>div{padding-top:24px}
.assure b{display:block;font-weight:400;font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
@media(max-width:899px){
  .assure{grid-template-columns:minmax(0,1fr)}
  .assure>div{border-right:none;border-bottom:1px solid var(--line);padding:22px 0!important}
  .assure>div:last-child{border-bottom:none}
}
/* 衣装カタログ */
.costume{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.costume .ph{aspect-ratio:2/3;border-radius:4px}
.costume>div:nth-child(even){margin-top:clamp(12px,2vw,24px)}
@media(max-width:899px){.costume{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 動画 */
.movies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.movies .ph{aspect-ratio:16/9;border-radius:4px}
.movies>div:nth-child(even){margin-top:clamp(14px,2.4vw,28px)}
@media(max-width:899px){.movies{grid-template-columns:repeat(2,minmax(0,1fr))}}