/* C の磨き（2026-10-24）：
   ※ 開いたときの赤い画面（オープニング）は A/B とそろえるため外した。scene.js の1か所で、?opening=1 を付けたときだけ流れるように変えている。
   9月の形と意図はそのまま、余白・文字の大きさ・色を A/B と同じ基準にそろえる。
   このファイルと polish.js を外せば、磨く前の C に戻る。 */

/* 1. 外枠の左右を 24px にそろえる（ヘッダーの白い枠は9月のまま。中のロゴを 24px に） */
html[data-variant="3"] .site-header .brand{left:24px!important}
html[data-variant="3"] .hero-visit.visit-bar{left:24px!important;right:24px!important;height:44px!important;gap:8px!important}

/* 2. ロゴを少し大きく、「HAIR & MAKE」を読める大きさ（11px）に。押せる高さは 44px */
html[data-variant="3"] .site-header .brand{top:9px!important;width:auto!important;height:44px!important;min-height:44px;display:flex!important;align-items:center;gap:8px}
html[data-variant="3"] .circle-wordmark{flex:none;width:106px!important;height:auto!important}
html[data-variant="3"] .site-header .brand,html[data-variant="3"] .brand-sub{text-decoration:none!important}
html[data-variant="3"] .brand-sub{position:static!important;height:auto!important;top:auto!important;left:auto!important;justify-content:center!important;gap:1px;font-size:11px!important;line-height:1.15!important;letter-spacing:.08em!important}

/* 3. キャッチを文字にして 24px（A/B と同じ）、英文は 12px */
html[data-variant="3"] .portrait-copy h1{font-family:'Noto Sans JP',sans-serif!important;font-weight:500!important;font-size:24px!important;line-height:1.4!important;letter-spacing:.12em!important;color:var(--red);white-space:nowrap}
html[data-variant="3"] .portrait-copy h1 span{display:inline!important;font-size:inherit!important}
html[data-variant="3"] .portrait-copy p{font-size:12px!important;letter-spacing:2px!important;margin-top:10px}
html[data-variant="3"] .portrait-copy h1,html[data-variant="3"] .portrait-copy p{text-align:center!important}

/* 4. 下のバー：言い方を A とそろえ、電話番号を見せる */
html[data-variant="3"] .hero-visit .holidays{height:44px!important;min-height:44px!important}
html[data-variant="3"] .hero-visit .holiday-next b{font-size:0!important;letter-spacing:0!important}
html[data-variant="3"] .hero-visit .holiday-next b::after{content:'今月のお休み';font-size:14px;letter-spacing:.06em}
html[data-variant="3"] .hero-visit.visit-bar{height:54px!important}
html[data-variant="3"] .hero-visit .holidays{height:54px!important;min-height:54px!important}
html[data-variant="3"] .hero-visit .phone{width:auto!important;height:54px!important;min-height:54px!important;padding:0 18px!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:2px!important;line-height:1.5}
html[data-variant="3"] .hero-visit .phone .tel-cap{font-size:12px;font-weight:400;letter-spacing:.05em;white-space:nowrap}
html[data-variant="3"] .hero-visit .phone .tel-num{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;letter-spacing:.05em;white-space:nowrap}
html[data-variant="3"] .hero-visit .phone .tel-num img{width:12px;height:12px;flex:none}

/* 5. コンセプト：上下の余白を 80px、文章は B と同じ細い段（幅 283px）、段落の間 16px */
html[data-variant="3"] .concept{padding-top:80px!important;padding-bottom:80px!important}
html[data-variant="3"] .concept-copy{width:min(283px,calc(100% - 48px))!important;margin-left:auto!important;margin-right:auto!important;padding:0!important}
html[data-variant="3"] .concept-copy p{color:#1a1a1a!important;font-weight:400!important;font-size:14px!important;line-height:2.1!important;letter-spacing:.05em!important;margin:0!important}
html[data-variant="3"] .concept-copy p+p{margin-top:16px!important}

/* 6. 押せる大きさ：アクセスの電話番号 */
html[data-variant="3"] .a-phone{display:inline-flex!important;align-items:center;min-height:44px}

/* 7. 幅の狭いスマホ（374px 以下）：下のバーが入りきるように */
@media (max-width:374px){
  html[data-variant="3"] .hero-visit.visit-bar{left:16px!important;right:16px!important;gap:6px!important}
  html[data-variant="3"] .hero-visit .holidays{padding:0 10px!important}
  html[data-variant="3"] .hero-visit .holiday-next b::after{font-size:13px}
  html[data-variant="3"] .hero-visit .phone{padding:0 12px!important}
  html[data-variant="3"] .hero-visit .phone .tel-cap{font-size:11px;letter-spacing:0}
  html[data-variant="3"] .hero-visit .phone .tel-num{font-size:13px;letter-spacing:0}
  html[data-variant="3"] .hero-visit .hol-go{display:none!important}
  html[data-variant="3"] .circle-wordmark{width:96px!important}
}

/* 8. コンセプトから下の余白（22時45分 見直し）
   決まり：白い面どうしは 64＋64＝128px（A/B と同じ）。
   色の面（赤いメニュー・赤いフッター）や写真の帯との境目は、どちら側も 96px で釣り合わせる（23時 案1）。 */
html[data-variant="3"] .concept{padding-bottom:96px!important}
html[data-variant="3"] .w-menu .m-red{padding:96px 24px!important}
/* 大きな見出し（Menu・Access 36px）の下は 40px、ほかの要素の間は 24px（22時50分） */
html[data-variant="3"] .w-menu .m-title{margin-bottom:40px!important}
html[data-variant="3"] .w-access .a-title{margin-bottom:16px!important}
html[data-variant="3"] .w-band{margin-top:96px!important}
html[data-variant="3"] .w-access{padding:96px 24px 64px!important}
html[data-variant="3"] .w-recruit{padding:64px 24px 96px!important}
html[data-variant="3"] .w-footer{padding-left:24px!important;padding-right:24px!important;padding-top:96px!important}