/* C×A 1案：レスポンシブ（タブレット・PC・大画面）。スマホ（〜599px）は先方確認済みの形のまま変えない。
   11-02 松原さん「レスポンシブ対応ちゃんとしてほしい。SP・タブレット・PC・大画面（1920）で崩れないように。最新のコンテンツ幅やデザインルールを調査して」
   → 調べた結果（資料70）から、次の決まりにした。
   11-02 夕方：松原さんが Figma（node 661:381・PC 1512 の Cantina 寄せ版）で調整した値を入れた（資料72）。
   Cantina 寄せ（資料71・add-cantina.css）はこの版に取り込んだので、切り替えはなくした。

   ■ 幅の段階（3つ）
     〜599 スマホ ／ 600〜1023 タブレット ／ 1024〜 PC（1600〜 は大画面。中身の幅が上限で止まる）
     根拠：Android の画面の大きさの区分（600・840・1200・1600）、Tailwind の lg＝1024（iPad の横向き 1024・1180 は PC の形）
   ■ 中身の幅
     タブレット：720 まで（1列）／PC：1320 まで（2列。Bootstrap のいちばん広い箱と同じ）
     左右の余白 --gutter：24（600）→ 50（1024）→ 76（1440）→ 最大 120。画面の幅に合わせてなめらかに増える
   ■ 文字と余白は clamp() で、600 のスマホの値から 1024 の PC の値まで、画面の幅に合わせてなめらかに大きくする（段階の境目で跳ばない）
     本文 14→16／注記 12→14（税込の注記だけ 12 のまま）／コンセプト 14→20／英字の大きな見出し 36→64／見出しの下の日本語 12→16／メニューの区分・店名 20→24
     セクションの上 96→140／コンセプト → 赤い面 128→200／赤い面の下 132→176／サロン情報の下 64→80／求人の写真の上 64→100・下 96→180／フッターの上 96→120
   ■ PC の形（Figma）
     ・ヘッダー：ロゴ 左 40／メニューの丸 60・右 40・上 40／下のバー 右 40・下 40（四隅を 40 にそろえた）
     ・大きな見出し 64（行の箱 .75）→ 8 → 日本語 16・500
     ・サロン情報：左の列＝写真2枚（356：262・縦長 3:4）→ 地図／右の列＝店の情報（写真の上下の中央）→ カレンダー。列の間 80
       カレンダー：2か月を並べ、3か月目は左右のボタンで横にずらす（タブレットも同じ。地図は PC だけ）
     ・フッター：左にロゴ 245 と住所、右（サロン情報の右の列と同じ線）にメニュー 2×2 と SNS。© は右下
   このファイルを外せば、スマホ版を横に伸ばした形に戻る。 */

/* ---------- 全部の幅：12px より小さい文字をなくす（スマホのメニューの注記 10・11px → 12） ---------- */
html[data-variant="3"] .mp-rows dt small{font-size:12px!important}
html[data-variant="3"] .mp-note{font-size:12px!important}
/* PC だけで使う部品（add.js が入れる）。スマホ・タブレットでは出さない／箱を無いものとして扱う */
html[data-variant="3"] .wf-right{display:contents}
html[data-variant="3"] .wf-zip,html[data-variant="3"] .cal-nav{display:none}
html[data-variant="3"] .info-col{display:contents}
html[data-variant="3"] .info-col>*{position:relative;z-index:1} /* カーブ（.w-access::before）より上に（add-info.css の .w-access>* と同じ） */

/* ---------- 全部の幅：文字の太さと字間を PC にそろえる（11-02 23時32分 松原さん「SP もフォントウェイトなど PC とそろえて」） ----------
   ・字間：本文・注記は .10em（前はスマホ .05em・タブレットから上 .10em）
   ・太さ 500：コンセプトの文／大きな見出しの下の日本語（メニュー・料金／サロン情報／スタッフ募集）／店の情報（店名・住所・営業時間・定休日・電話）
   ・大きさと行の高さは、画面の大きさに合わせて変わるもの（下の段階ごと）なので、ここではそろえない */
html[data-variant="3"] :is(.m-title small,.a-title small,.m2-ja,.mp-rows dt,.mp-rows dd,.mp-note,.a-store address,.a-facts dt,.a-facts dd,.a-facts dd small,.a-facts .a-phone,.a-cal-title,.w-legend span,.wr-ja,.wf-info,.w-holidays-label,.w-holidays-dates){letter-spacing:.1em!important}
html[data-variant="3"] :is(.concept-copy p,.concept-copy .mel){letter-spacing:.1em!important;font-weight:500!important}
html[data-variant="3"] :is(.m-title,.a-title,.wr-text) :is(small,.wr-ja){font-weight:500!important}
html[data-variant="3"] .a-store :is(.a-store-name,address,.a-gmap,dt,dd,dd span,dd small,.a-phone){font-weight:500!important}
html[data-variant="3"] .wf-info a{letter-spacing:.1em!important}

/* ---------- 全部の幅：住所の「Google Map」と求人の矢印（11-02 23時42分 松原さん「SP も PC と同じに」） ----------
   ・住所の「Google Map」は住所の下の行に（Figma どおり。前は PC だけ）
   ・求人の矢印：文字の下の「→」をやめ、写真の右下に白い丸と赤い「→」（Figma node 659:806）。
     丸 44（スマホ）→ 60（1024〜）／端から 20 → 40／矢印 16 → 21.8。600〜1024 でなめらかに変わる。丸と矢印の比は同じ */
html[data-variant="3"] .a-store address .a-gmap{display:block;width:fit-content}
html[data-variant="3"] .wr-text .wr-arrow{display:none!important}
html[data-variant="3"] .wr-arrow-pc{--wa:clamp(44px,calc(3.774vw + 21.36px),60px);--wo:clamp(20px,calc(4.717vw - 8.3px),40px);display:grid;place-items:center;position:absolute;z-index:2;right:var(--wo);bottom:var(--wo);width:var(--wa);height:var(--wa);border-radius:50%;background:#fff;color:var(--red);font:700 calc(var(--wa) * .3633)/1 'Noto Sans JP',sans-serif;transition:transform .4s cubic-bezier(.22,1,.36,1)}
html[data-variant="3"] .wr-card:hover .wr-arrow-pc{transform:translateX(6px)}

/* ---------- タブレットから上（600px〜） ---------- */
@media (min-width:600px){
  html[data-variant="3"]{
    --gutter:clamp(24px,calc(6.25vw - 13.5px),120px);
    --pc-pad:max(var(--gutter),calc((100vw - 720px) / 2));
    /* 文字（600 → 1024 で、スマホの値から PC の値へ） */
    --fs-body:clamp(14px,calc(11.17px + .472vw),16px);
    --fs-note:clamp(12px,calc(9.17px + .472vw),14px);
    --fs-label:clamp(12px,calc(6.34px + .943vw),16px);         /* 大きな見出しの下の日本語 */
    --fs-cal:clamp(13px,calc(11.585px + .236vw),14px);
    --fs-cal-title:clamp(16px,calc(13.17px + .472vw),18px);
    --fs-concept:clamp(14px,calc(8.34px + .9434vw),18px); /* 20時03分 松原さん：PC 20 → 18 に戻す */
    --fs-h2:clamp(36px,calc(4.717vw + 7.7px),56px); /* 20時03分：大きな見出し PC 64 → 56 */
    --fs-sub:clamp(20px,calc(14.34px + .943vw),24px);
    /* 余白（600 → 1024） */
    --sp-color:clamp(96px,calc(33.74px + 10.377vw),140px);      /* セクションの上（色・写真の面の境目） */
    --sp-concept-b:clamp(128px,calc(26.1px + 16.98vw),200px);   /* コンセプト → 赤い面 */
    --sp-menu-b:clamp(132px,calc(69.74px + 10.377vw),176px);    /* 赤い面の内側の下（＋カーブの高さ 36） */
    --sp-access-t:clamp(60px,calc(18.87vw - 53.2px),140px);     /* Information の上（スマホはカーブに重なる分 60） */
    --sp-access-b:clamp(64px,calc(41.36px + 3.774vw),80px);     /* カレンダーの下 */
    --sp-recruit-t:clamp(64px,calc(13.06px + 8.491vw),100px);   /* 求人の写真の上（カレンダーから 80＋100＝180） */
    --sp-recruit-b:clamp(96px,calc(19.811vw - 22.87px),180px);  /* 求人の写真 → フッター（上と同じ 180） */
    --sp-footer-t:clamp(96px,calc(62.04px + 5.66vw),120px);     /* フッターの内側の上 */
    /* 最初の画面 */
    --fv-circle:clamp(256px,calc(108.8px + 24.53vw),360px);
    /* キャッチ：円からはみ出さないように、円の直径の 0.12 倍まで（文字のインクの幅が円の 0.9 倍。11-02 23時32分。前は 900〜1280 で円より広かった）
       英文とその間は、キャッチに対する割合で（Figma の 52：20：30）。12 より小さくはしない */
    --fv-h1fs:min(clamp(24px,calc(6.604vw - 15.62px),52px),calc(var(--fv-circle) * .12));
    --fv-pfs:max(12px,calc(var(--fv-h1fs) * .3846));
    --fv-gap:max(12px,calc(var(--fv-h1fs) * .577));
  }

  /* 中身の幅 */
  html[data-variant="3"] .w-menu .m-red,
  html[data-variant="3"] .w-access,
  html[data-variant="3"] .w-recruit{padding-left:var(--pc-pad)!important;padding-right:var(--pc-pad)!important}

  /* 最初の画面：円とキャッチ。2行のまとまりの中心を円の中心に置く（スマホの top：50svh − 26.4px と同じ考え方） */
  html[data-variant="3"] .travelling-circle{width:var(--fv-circle)!important;height:var(--fv-circle)!important;top:calc(50svh - var(--fv-circle) / 2)!important}
  html[data-variant="3"] .circle-surface{width:var(--fv-circle)!important;height:var(--fv-circle)!important}
  html[data-variant="3"] .portrait-copy{top:calc(50svh - (var(--fv-h1fs) * 1.2083 + var(--fv-gap) + var(--fv-pfs) * 1.5) / 2 - var(--fv-h1fs) * .08)!important} /* 文字のインクは行の箱より下に寄るので、見出しの大きさの 8% だけ上げる（インクの中心で測って円の中心と ±3px） */
  html[data-variant="3"] .portrait-copy h1{font-size:var(--fv-h1fs)!important}
  html[data-variant="3"] .portrait-copy p{font-size:var(--fv-pfs)!important;margin-top:var(--fv-gap)!important}

  /* 文字 */
  html[data-variant="3"] :is(.mp-rows dt,.mp-rows dd,.a-store address,.a-gmap,.a-facts dd,.a-facts dd span,.a-cal-title){font-size:var(--fs-body)!important}
  html[data-variant="3"] :is(.m2-ja,.a-facts dt,.a-facts dd small,.mp-note,.mp-rows dt small,.w-holidays-label,.w-holidays-dates,.w-legend span,.w-footer small,.w-cal-tentative){font-size:var(--fs-note)!important}
  html[data-variant="3"] :is(.m-title small,.a-title small,.wr-ja){font-size:var(--fs-label)!important}
  html[data-variant="3"] .a-facts dt{line-height:calc(var(--fs-body) * 2.1)!important}
  html[data-variant="3"] .a-facts .a-phone{font-size:var(--fs-body)!important;line-height:calc(var(--fs-body) * 2.1)!important;padding:calc((44px - var(--fs-body) * 2.1) / 2) 0!important;margin:calc((var(--fs-body) * 2.1 - 44px) / 2) 0!important}
  html[data-variant="3"] .wf-info a{font-size:max(15px,var(--fs-body))!important}
  html[data-variant="3"] :is(.w-day,.w-cal-block th){font-size:var(--fs-cal)!important}
  html[data-variant="3"] .w-cal-block-title{font-size:var(--fs-cal-title)!important}
  html[data-variant="3"] :is(.m-title,.a-title,.wr-en){font-size:var(--fs-h2)!important}
  html[data-variant="3"] .w-menu .m-title{font-size:var(--fs-h2)!important;line-height:var(--fs-h2)!important}
  html[data-variant="3"] :is(.m2-en,.a-store-name){font-size:var(--fs-sub)!important}
  /* 字間 .10em と文字の太さ 500 は、11-02 23時32分からスマホも同じ（ファイルの先頭「全部の幅」） */

  /* 余白 */
  html[data-variant="3"] .concept{padding-top:var(--sp-color)!important;padding-bottom:var(--sp-concept-b)!important}
  html[data-variant="3"] .w-menu .m-red{padding-top:var(--sp-color)!important;padding-bottom:var(--sp-menu-b)!important}
  html[data-variant="3"] .w-access{padding-top:var(--sp-access-t)!important;padding-bottom:var(--sp-access-b)!important}
  html[data-variant="3"] .w-recruit{padding-top:var(--sp-recruit-t)!important;padding-bottom:var(--sp-recruit-b)!important}
  html[data-variant="3"] .w-footer{padding-top:var(--sp-footer-t)!important}
  /* 店の情報：要素の間 24（資料69） */
  html[data-variant="3"] .a-store{gap:24px!important}
  html[data-variant="3"] .a-store-name{margin-bottom:0!important}
  html[data-variant="3"] .a-facts{gap:24px!important}

  /* コンセプト：中央の列。行の長さは文に合わせる（幅の上限を外す）。行の高さ 2.25（Figma：20px で 45） */
  html[data-variant="3"] .concept-copy{max-width:none!important;width:auto!important;display:flex;flex-direction:column;align-items:center}
  html[data-variant="3"] :is(.concept-copy p,.concept-copy .mel,.concept-copy .mel-sr){font-size:var(--fs-concept)!important;line-height:2.25!important}
  html[data-variant="3"] .concept-copy p{white-space:nowrap}

  /* カレンダー：2か月を並べ、3か月目は横にずらして見る（左右のボタン。指・トラックパッドでも動く）。点はスマホだけ */
  html[data-variant="3"]{--cal-gap:24px;--cal-pad:24px}
  html[data-variant="3"] .w-cal-months{display:flex!important;gap:var(--cal-gap)!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none;padding:0!important;scroll-padding:0!important;overscroll-behavior-x:contain}
  html[data-variant="3"] .w-cal-months::-webkit-scrollbar{display:none}
  html[data-variant="3"] .w-cal-block{display:block!important;flex:0 0 calc((100% - var(--cal-gap)) / 2)!important;width:auto!important;scroll-snap-align:start}
  html[data-variant="3"] .w-cal-dots{display:none!important}
  /* 「予定のため変わることがあります」は表の下へ（並べたときに、ほかの月と曜日の行の高さがそろうように） */
  html[data-variant="3"] .w-cal-block{display:flex!important;flex-direction:column}
  html[data-variant="3"] .w-cal-tentative{order:9;margin:4px 0 0!important}
  /* 枠が狭いとき（480 より狭い：PC の 1024〜1240 あたりは右の列が 400〜470）は、1か月ずつ。2か月だと1マス 28px を切って丸が重なる */
  html[data-variant="3"] .w-calendar{container-type:inline-size}
  @container (max-width:479px){html[data-variant="3"] .w-cal-block{flex-basis:100%!important}}
  /* 11-02 23時02分 松原さん「ベージュの枠の左右に白い枠がそろっているので余白を」：月の白い枠と枠の端のあいだを 24。月と月の間も 24
     （間を左右の余白と同じにしておくと、横に並べたとき次の月の端が 24 の余白の中に少しだけ出る、ということが起きない）。下の「定休日・臨時休業」も 24 から */
  html[data-variant="3"] .w-cal-months{padding:0 var(--cal-pad)!important;scroll-padding:0 var(--cal-pad)!important}
  html[data-variant="3"] .w-legend{padding-left:var(--cal-pad)!important}
  html[data-variant="3"] .a-card{position:relative}
  html[data-variant="3"] .cal-nav{display:flex;gap:8px;position:absolute;z-index:2;top:12px;right:var(--cal-pad)}
  html[data-variant="3"] .cal-nav.is-off{display:none}
  html[data-variant="3"] .cal-nav button{position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--red);cursor:pointer;transition:opacity .2s}
  html[data-variant="3"] .cal-nav button::before{content:'';position:absolute;inset:-4px} /* 押せる大きさ 44 */
  html[data-variant="3"] .cal-nav button:disabled{opacity:.35;cursor:default}
  html[data-variant="3"] .cal-nav button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
}

/* ---------- PC（1024px〜）：2列。大画面（1600px〜）は中身 1320 で止まる ---------- */
@media (min-width:1024px){
  html[data-variant="3"]{
    --pc-pad:max(var(--gutter),calc((100vw - 1320px) / 2));
    --col-gap:clamp(64px,calc(7.69vw - 14.8px),96px);
    /* 最初の画面：円 360（1024）→ 400（1280）→ 440（1600〜）。キャッチは 60・英文 20（Figma） */
    --fv-circle:clamp(360px,calc(217.8px + 13.89vw),440px);
    --fv-h1fs:min(52px,calc(var(--fv-circle) * .12)); /* 20時03分 松原さん「コピーももう少し小さく」60 → 52。円が小さい 1024〜1500 は円に合わせる。英文・間は上の割合のまま（52 で 20・30） */
  }

  /* ヘッダー：ロゴを少し大きく、端から離す（参考：ロゴ幅 112〜140・左 37〜76） */
  html[data-variant="3"] .site-header .brand{top:20px!important;left:40px!important}
  html[data-variant="3"] .site-header .brand .logo-orig{width:120px;height:81.34px}
  /* メニューの丸：35 → 60（Figma。線も同じ割合で 24×2.1）。右 40・上 40。開いたときの閉じるボタンも同じ場所・大きさ */
  html[data-variant="3"] .menu-button,html[data-variant="3"].scrolled .menu-button{top:40px!important;right:40px!important;width:60px!important;height:60px!important;gap:5.25px!important}
  html[data-variant="3"] .menu-button .menu-disc{left:0!important;top:0!important;width:60px!important;height:60px!important}
  html[data-variant="3"] .menu-button span{width:24.2px!important;height:2.1px!important}
  html[data-variant="3"] .sm-close{top:40px!important;right:40px!important;width:60px!important;height:60px!important;background:radial-gradient(circle,#fff 29.5px,transparent 30.5px)!important}
  html[data-variant="3"] .sm-close span{left:17.9px!important;top:28.95px!important;width:24.2px!important;height:2.1px!important}

  /* 下のバー：右下（右 40・下 40・高さ 60・角丸 60）。メニューの丸・ロゴと同じ 40 にそろえた（11-02 前は右 52＝yard-dental）。押したときの沈みは中央寄せの translate を外す */
  .a-bar{left:auto;right:40px;bottom:40px;transform:none;width:384px;max-width:none;height:60px;border-radius:60px}
  .a-bar>a,.a-bar>button{min-height:60px}
  .a-bar .ab-phone,.a-bar .ab-hol{font-size:15px}
  .a-bar .ab-hol::before{top:14px;bottom:14px}
  .a-bar:has(>:active),.a-bar.is-press{transform:scale(.98)}
  .a-bar>a::after,.a-bar>button::after{border-radius:30px}

  /* 最初の画面のキャッチ：Figma で 60 にしたときの字間（px のまま残った値を em に。「°」の後ろだけ 5px 詰めてある） */
  html[data-variant="3"] .portrait-copy h1 span:nth-child(1){letter-spacing:-.2637em!important}
  html[data-variant="3"] .portrait-copy h1 span:nth-child(2){letter-spacing:-.1318em!important}
  html[data-variant="3"] .portrait-copy h1 span:nth-child(3){letter-spacing:.0963em!important}
  html[data-variant="3"] .portrait-copy h1 span:nth-child(4){letter-spacing:.1797em!important}
  html[data-variant="3"] .portrait-copy h1 span:nth-child(5){letter-spacing:.1677em!important}
  html[data-variant="3"] .portrait-copy h1 span:nth-child(6){letter-spacing:.1438em!important}
  html[data-variant="3"] .portrait-copy h1 span:nth-child(7){letter-spacing:.036em!important;margin-right:-.036em}
  html[data-variant="3"] .portrait-copy p{letter-spacing:.15em!important}

  /* コンセプト：PC 用の改行（add.js の <br class="pc">）。段落の間 56（太さ 500 は全部の幅で） */
  html[data-variant="3"] .concept-copy p+p{margin-top:56px!important}
  html[data-variant="3"] .concept-copy br.sp{display:none}
  html[data-variant="3"] .concept-copy br.pc{display:inline}

  /* 大きな見出し（Menu・Information・Recruit）：64・行の箱 .75（Figma の 48）→ 8 → 日本語 16・500 */
  html[data-variant="3"] :is(.m-title,.a-title,.wr-en){line-height:.75!important}
  html[data-variant="3"] .w-menu .m-title{line-height:.75!important}
  html[data-variant="3"] :is(.m-title,.a-title){gap:8px!important}
  html[data-variant="3"] .wr-text{gap:8px!important}
  html[data-variant="3"] :is(.m-title,.a-title,.wr-text) :is(small,.wr-ja){line-height:1.8!important} /* add-info.css の行の高さ 2.1（:is の中に .a-facts .a-phone があり強い）に勝つ書き方 */

  /* メニュー（赤い面）：左に見出しと税込の注記（224 以上＝注記が1行に入る）、右に一覧（幅 720 まで） */
  html[data-variant="3"] .w-menu .m-red{display:grid!important;grid-template-columns:minmax(224px,1fr) minmax(0,720px);grid-template-rows:auto 1fr;column-gap:var(--col-gap)}
  html[data-variant="3"] .w-menu .m-title{grid-column:1;grid-row:1;align-items:flex-start!important;text-align:left!important;margin:0!important}
  html[data-variant="3"] .w-menu .m2-list{grid-column:2;grid-row:1 / span 2;width:100%}
  html[data-variant="3"] .w-menu .m-tax{grid-column:1;grid-row:2;align-self:start;margin-top:24px!important}

  /* サロン情報（11-02 22時53分 松原さん決定：左＝店の情報とカレンダー／右＝写真2枚と地図）
     列の箱（.info-col）と地図の箱（.a-map-block）は無いものとして、写真・店の情報・カレンダー・地図・リンクを .w-access の格子に直接置く
     列は 596：644・間 80（Figma の 644：596 を左右反転）
     上の段：店の情報｜写真2枚（店の情報は写真のまとまりの上下の中央。1024 あたりで文字のほうが高いときは写真を文字の中央に）
     下の段：カレンダー｜地図（上の端も下の端もそろえる）。地図の下の「Google Mapsで開く →」は 11-06 になくした（住所の下の「Google Map」と同じ行き先なので） */
  html[data-variant="3"] .w-access{display:grid!important;grid-template-columns:minmax(0,596fr) minmax(0,644fr);grid-template-areas:"t t" "s p" "c m";column-gap:80px!important;row-gap:0!important;align-items:start}
  html[data-variant="3"] .w-access .a-title{grid-area:t;margin-bottom:48px!important}
  html[data-variant="3"] .w-access .info-col{display:contents}
  html[data-variant="3"] .w-access .a-map-block{display:contents!important}
  html[data-variant="3"] .info-photos{grid-area:p;align-self:center;margin-bottom:0!important;grid-template-columns:356fr 262fr;column-gap:24px}
  html[data-variant="3"] .info-photos .ip-b{margin-top:103.8%} /* 右の写真の幅に対する割合（Figma：幅 262 で 272 下げる）。幅が変わっても同じ形 */
  html[data-variant="3"] .a-store{grid-area:s;align-self:center;margin-top:0!important}
  html[data-variant="3"] .a-card{grid-area:c;margin-top:80px!important;width:100%}
  html[data-variant="3"] .w-access .a-map{grid-area:m;align-self:stretch;position:relative;width:100%;height:auto;min-height:240px;margin:80px 0 0!important;background:#eee8e0}
  html[data-variant="3"] .w-access .a-map iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
  /* カレンダー（11-02 23時02分）：PC は余白を足しても月の大きさは前のまま（枠の幅 −16 の半分。1512 で 290）。2か月目は右の端で見切れる＝横にずらせると分かる
     枠が狭く1か月ずつのとき（〜479）は、枠の幅いっぱい（左右 24 を引いた幅） */
  html[data-variant="3"] .w-cal-block{flex-basis:calc((100cqw - 16px) / 2)!important}
  @container (max-width:479px){html[data-variant="3"] .w-cal-block{flex-basis:100%!important}}

  /* 求人：横長の帯（中身の幅いっぱい・横 1320 に対して高さ 440）。写真は PC 用（recruit-pc.webp・Figma の切り取り）。上を少し暗く
     矢印は文字の下ではなく、写真の右下（端から 40）に白い丸 60・赤い「→」（Figma node 659:806）。文字（Recruit・スタッフ募集）は写真の上下左右の中央 */
  html[data-variant="3"] .wr-card{aspect-ratio:3 / 1!important;max-width:none;margin:0 auto}
  html[data-variant="3"] .wr-photo{left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:cover;object-position:50% 50%}
  html[data-variant="3"] .wr-overlay{background:linear-gradient(to bottom,rgba(47,47,47,.3),rgba(47,47,47,0))!important}

  /* フッター：左にロゴ 245 と住所（間 42）、右にメニュー 2×2（横 42・縦 24）と SNS 30（間 40）。右の列はサロン情報の右の列と同じ線
     右のまとまりは左のまとまりの上下の中央。© は右下（住所の下の端にそろえる）。上下 120 */
  html[data-variant="3"] .w-footer{display:grid!important;grid-template-columns:minmax(0,644fr) minmax(0,596fr);grid-template-rows:auto auto;column-gap:80px!important;row-gap:0!important;align-items:start;justify-items:start;text-align:left;padding:var(--sp-footer-t) var(--pc-pad) 120px!important}
  html[data-variant="3"] .wf-logo{grid-column:1;grid-row:1}
  html[data-variant="3"] .wf-logo img{width:200px;height:auto} /* 11-02 23時02分 245 → 200（松原さん「もう少し小さく」） */
  html[data-variant="3"] .wf-info{grid-column:1;grid-row:2;margin-top:42px!important;font-size:16px!important;line-height:2.1!important;opacity:1}
  html[data-variant="3"] .wf-zip{display:inline}
  html[data-variant="3"] .wf-info a{display:block;width:max-content;min-height:0!important;margin-top:16px;font-size:16px!important;line-height:2.1;letter-spacing:.1em}
  html[data-variant="3"] .wf-right{grid-column:2;grid-row:1 / 3;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:40px}
  html[data-variant="3"] .wf-nav{display:grid!important;grid-auto-flow:column;grid-template-rows:auto auto;column-gap:42px;row-gap:24px;justify-content:start}
  html[data-variant="3"] .wf-nav a{min-height:0;padding:0;font-size:24px!important;line-height:1;letter-spacing:.04em}
  html[data-variant="3"] .wf-nav a{position:relative}
  html[data-variant="3"] .wf-nav a::after{content:'';position:absolute;inset:-10px -8px} /* 押せる範囲だけ 44 に（見た目と並びは変えない。上下の行の間 24 なので、となりと重ならない） */
  html[data-variant="3"] .wf-sns{gap:40px}
  html[data-variant="3"] .wf-sns a{width:30px;height:30px}
  html[data-variant="3"] .wf-sns svg{width:30px;height:30px}
  html[data-variant="3"] .w-footer small{position:absolute;right:var(--pc-pad);bottom:120px;font-size:14px!important}
}

/* ---------- メニュー画面（ハンバーガーで開く画面）：タブレットと PC の形（11-02 18時21分 松原さん「開いた中もスマホの形のまま。他のサイズ用に」） ----------
   タブレット（600〜1023）：スマホと同じ中央ぞろえのまま、文字とボタンを大きく（英字 24 → 32・和文 12 → 13・ボタン幅 280 → 320）
   PC（1024〜）：ページと同じ 2 列（644：596・間 80・中身の幅 1320 まで）。左＝項目（英字 48＝大きな見出し 56 より一段小さく（20時03分 56 → 48）・和文 14 を右に）
     右＝ロゴ → 40 → 住所 → 32 → 電話で予約する → 24 → SNS（左ぞろえ）。2 つの列は画面の上下の中央。閉じるボタンはメニューボタンと同じ場所・大きさ（上 40・右 40・60） */
@media (min-width:600px){
  html[data-variant="3"] .sm-nav{gap:8px!important}
  html[data-variant="3"] .sm-nav a{min-height:64px!important;gap:16px!important}
  html[data-variant="3"] .sm-nav .sm-en{font-size:32px!important}
  html[data-variant="3"] .sm-nav .sm-ja{font-size:13px!important}
  html[data-variant="3"] .sm-bar{width:320px}
  html[data-variant="3"] .sm-addr{font-size:13px;letter-spacing:.1em}
  html[data-variant="3"] .sm-logo img.sm-logo-orig{width:120px!important;height:auto!important}
}
@media (min-width:1024px){
  html[data-variant="3"] dialog.sm[open]{display:grid!important;grid-template-columns:minmax(0,644fr) minmax(0,596fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:80px;padding:0 var(--pc-pad)!important}
  html[data-variant="3"] .sm .sm-head{position:absolute!important;top:0;left:0;right:0;height:0!important}
  html[data-variant="3"] .sm .sm-nav{grid-column:1;grid-row:2 / 6;align-self:center;align-items:flex-start!important;gap:20px!important;margin:0!important;padding:0!important}
  html[data-variant="3"] .sm .sm-nav a{justify-content:flex-start!important;gap:24px!important;min-height:0!important;padding:4px 0!important;transition:translate .5s cubic-bezier(.22,1,.36,1)}
  html[data-variant="3"] .sm .sm-nav a:hover{translate:8px 0}
  html[data-variant="3"] .sm .sm-nav .sm-en{font-size:48px!important;line-height:1.1!important;letter-spacing:-.005em!important}
  html[data-variant="3"] .sm .sm-nav .sm-ja{font-size:14px!important;letter-spacing:.14em!important}
  html[data-variant="3"] .sm .sm-info>.sm-logo{grid-column:2;grid-row:2;align-self:end;justify-self:start;margin:0!important;padding:0!important}
  html[data-variant="3"] .sm .sm-logo img.sm-logo-orig{width:160px!important;height:auto!important}
  html[data-variant="3"] .sm .sm-info>.sm-foot{display:contents!important}
  html[data-variant="3"] .sm .sm-addr{grid-column:2;grid-row:3;justify-self:start;margin:40px 0 0;font-size:16px;line-height:2;letter-spacing:.1em;text-align:left;opacity:1}
  html[data-variant="3"] .sm .sm-info>.sm-bar{grid-column:2;grid-row:4;justify-self:start;align-self:start;width:320px;height:60px;margin:32px 0 0!important;font-size:16px}
  html[data-variant="3"] .sm .sm-bar>a{min-height:60px}
  html[data-variant="3"] .sm .sm-sns{grid-column:2;grid-row:5;justify-self:start;align-self:start;margin:24px 0 0 -10px;gap:16px}
  html[data-variant="3"] .sm .sm-sns svg{width:24px;height:24px}
  html[data-variant="3"] dialog.sm[open] :is(.sm-addr,.sm-sns){animation:sm-up .6s cubic-bezier(.22,1,.36,1) .44s both}
}