@charset "UTF-8";
/* =========================================================================
 * sans age サイト共通スタイル
 *
 * 【編集のしかた】
 *  ・セクションごとに ===== の見出しで区切っています。
 *    デザインを変えるときは、その見出しの区間を丸ごと差し替えてください。
 *  ・他のセクションに影響する書き方（全体指定・!important の多用）はしません。
 *  ・色とサイズは下の「共通の決めごと」の変数を通して使います。
 *    ここを変えればサイト全体の色味が変わります。
 * ===================================================================== */

/* ===== 共通の決めごと（旧サイトの設定値をそのまま写したもの） ===== */
:root {
  /* 色 */
  --sa-bg:        #FAFAFA;  /* ページ全体の背景 */
  --sa-text:      #3C3835;  /* 本文の文字 */
  --sa-secondary: #54595F;
  --sa-accent:    #D7C5AB;
  --sa-subtitle:  #8B8B8B;
  --sa-gold:      #D4AF37;  /* 大見出しの金色 */
  --sa-esthe:     #E288D9;
  --sa-nail:      #005ED6;
  --sa-header-bg: #FAFAFAE0; /* ヘッダー背景（少し透ける） */
  --sa-footer-bg: #FFFFFF;
  --sa-copy-bg:   #2A2A2A;
  --sa-copy-text: #C8D5DC;

  /* 書体 */
  --sa-font-system: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sa-font-body:    "Noto Sans JP", sans-serif;
  --sa-font-serif:   "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --sa-font-marcell: "Marcellus", serif;
  --sa-font-display: "Qwigley", cursive;              /* 大見出し（旧 absolute-beauty） */
  --sa-font-menu:    "Marcellus", serif;
  --sa-font-menu-alt:"Cormorant Garamond", serif;     /* メニュー英字（旧 scotch-text） */

  /* 寸法 */
  --sa-container:   1140px;  /* 本文の最大幅 */
  --sa-header-h:    100px;   /* ヘッダーの高さ（PC） */
  --sa-header-h-sp: 80px;    /* ヘッダーの高さ（スマホ） */
}

/* ===== 全体の土台 ===== */
body {
  background-color: var(--sa-bg);
  color: var(--sa-text);
  font-family: var(--sa-font-body);
  /* SWELLは本文の太さを500にしますが、旧サイトは400です。
     Noto Sans JP は太さの段階を持つ書体なので、500のままだと文字幅が変わり
     行の折り返しがずれます。旧サイトに合わせて400に戻しています。 */
  font-weight: 400;
}

/* 旧サイトと同じく、横方向にはみ出しても横スクロールを出さない */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* ===== 画面に入ったらふわっと出る（旧サイトの fadeIn 33か所ぶん） ===== */
.sa-fade {
  opacity: 0;
  transition: opacity .8s ease;
}
.sa-fade.is-in { opacity: 1; }
.sa-fade--slow { transition-duration: 2s; }   /* 旧サイトの「ゆっくり」設定に合わせています */

/* 画面に入るときに少し下から持ち上がる（スタッフ紹介など） */
.sa-rise { opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform .8s ease; }
.sa-rise.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .sa-fade, .sa-rise { opacity: 1; transform: none; transition: none; }
}

/* ===== ここから下に、セクションごとのスタイルを足していきます =====
 *
 *  01. ヘッダー          （未着手）
 *  02. 全画面ナビ        （未着手）
 *  03. フッター          （未着手）
 *  04. トップページ      （未着手）
 *  05. メニュー一覧      （未着手）
 *  06. 各施術ページ      （未着手）
 *  07. サロン紹介        （未着手）
 *  08. 料金             （未着手）
 *  09. 採用             （未着手）
 *  10. お問い合わせ      （未着手）
 *  11. 法務ページ        （未着手）
 *  12. 404ページ        （未着手）
 * ===================================================================== */

/* 注意：SWELLはスマホで html の文字サイズを13.5pxに変えます。
   そのため rem / em はここでは使わず、px で書いています。 */

/* ============================================================
   02. ヘッダー（旧サイトの Header-frontpage / Header-entire を再現）
   ・上に貼りつく帯 ＋ 横並びメニュー ＋ 縦並びメニュー（トップのみ）
   ・幅767px以下ではハンバーガー＋全画面メニューに切り替わります
   ============================================================ */

#sa-header{ position:relative; }

/* --- 上に貼りつく帯 --- */
.sa-bar{
  position:fixed; top:0; left:0; width:100%;
  box-sizing:border-box; display:flex;
  min-height:var(--sa-header-h);
  background:var(--sa-header-bg);
  z-index:1000;
}
.sa-bar__inner{ width:100%; max-width:var(--sa-container); margin:0 auto; box-sizing:border-box; display:flex; }
.sa-bar__row{ width:90%; box-sizing:border-box; padding:10px; display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* 下層ページ：帯の左右に10px、下に0.5pxの線 */
.sa-header--sub .sa-bar{ padding:0 10px; border-bottom:.5px solid #333; }
.sa-header--sub .sa-bar__inner{ padding:10px 0; }

/* トップページ：線は最初透明で、スクロールすると出てくる */
.sa-header--front .sa-bar{ padding:0; border-bottom:.5px solid transparent; transition:border-color .5s ease-in-out; }
.sa-header--front .sa-bar.with-border{ border-bottom-color:#000; }
.sa-header--front .sa-bar__inner{ padding:0; }

@media (max-width:767px){
  .sa-bar__row{ width:100%; }
  .sa-header--front .sa-bar{ min-height:var(--sa-header-h-sp); }
  .sa-logo{ margin:5px 0 5px 5px; } /* 旧サイトはリンク側に余白があり、外枠は155x70になる */
}

/* --- ロゴ ---
   旧サイトはリンクの文字サイズ40px・行間1.5（＝60px）の行の中に
   画像を vertical-align:middle で置いており、その位置関係まで写しています。 */
.sa-logo-wrap{ flex:0 0 auto; }
.sa-logo{ display:inline-block; font-family:var(--sa-font-menu); font-size:40px; line-height:1.5; text-decoration:none; }
.sa-logo img{ display:inline-block; vertical-align:middle; width:150px; max-width:150px; height:auto; }

/* --- 横並びメニュー（768px以上） --- */
/* ★ z-index は .sa-bar（1000）より上でなければならない。999 だと
   半透明のヘッダー帯が横メニューの上にかぶさり、リンクが押せなくなる。
   縦メニュー（.sa-tate-wrap）と同じ 1111 にそろえてある。 */
.sa-yoko-wrap{ position:fixed; top:0; right:0; width:90%; box-sizing:border-box; padding:10px; z-index:1111; display:flex; }
.sa-yoko{ position:absolute; right:0; top:30px; z-index:2000;
  font-family:var(--sa-font-menu); font-style:normal; font-weight:300; }
.sa-yoko .menu{ display:flex; list-style:none; padding:0; margin:0; }
.sa-yoko .menu-item{ position:relative; margin-right:20px; }
.sa-yoko .menu-item > a{ display:flex; align-items:center; padding:10px 15px; text-decoration:none;
  color:#333; font-size:18px; line-height:1.5; font-family:inherit; font-weight:inherit;
  transition:all .3s ease-in-out; position:relative; }
.sa-yoko .menu-item.menu-item-has-children > a::after{ content:"+"; font-size:16px; margin-left:10px; transition:transform .3s ease-in-out; }
.sa-yoko .menu-item.menu-item-has-children:hover > a::after{ transform:rotate(180deg); }
.sa-yoko .sub-menu{ list-style:none; margin:0; position:absolute; top:100%; left:0;
  background:#fafafa; box-shadow:0 4px 6px rgba(0,0,0,.1);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s ease; }
.sa-yoko .menu-item.menu-item-has-children:hover .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.sa-yoko .sub-menu .menu-item > a{ display:block; font-size:14px; color:#555; text-align:left; white-space:nowrap; transition:all .3s ease-in-out; }
.sa-yoko .sub-menu .menu-item > a:hover{ color:#007BFF; background:#f8f9fa; }

/* 旧サイトはトップと下層で余白が少し違うので、そこも分けています */
.sa-header--sub   .sa-yoko .sub-menu{ padding:5px 0; }
.sa-header--sub   .sa-yoko .sub-menu .menu-item{ padding:4px 15px; }
.sa-header--sub   .sa-yoko .sub-menu .menu-item > a{ padding:4px 15px; }
.sa-header--front .sa-yoko .sub-menu{ padding:0; }
.sa-header--front .sa-yoko .sub-menu .menu-item{ padding:8px 15px; }
.sa-header--front .sa-yoko .sub-menu .menu-item > a{ padding:8px 15px; }
.sa-header--front .sa-yoko .menu-item > a{ transition:all .5s ease-in-out; }

/* トップページは最初かくれていて、スクロールで出てくる */
/* ★ 透明なあいだは触れないようにする。opacity:0 のままでもリンクは生きているので、
   トップの上のほうの何もない場所を押すと menu や price list へ飛んでしまう。 */
.sa-header--front .sa-yoko{ opacity:0; pointer-events:none; transform:translateY(-20px);
  transition:opacity .5s ease-in-out, transform .5s ease-in-out; }
.sa-header--front .sa-yoko.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

@media (max-width:767px){ .sa-yoko-wrap{ display:none; } }

/* --- 縦並びメニュー（トップページのみ・右上） --- */
.sa-tate-wrap{ position:relative; width:100%; box-sizing:border-box; padding:10px; z-index:1111;
  opacity:1; transition:opacity .5s ease-in-out; }
.sa-tate-wrap.hidden{ opacity:0; }
.sa-tate{ position:fixed; top:31px; right:0; z-index:999; font-family:var(--sa-font-menu);
  box-sizing:content-box; padding-right:16px; /* 旧サイトはウィジェットに右16pxの余白があった */ }
.sa-tate .menu{ list-style:none; padding:0; margin:0; }
.sa-tate .menu-item{ position:relative; margin-bottom:5px; }
.sa-tate .menu-item > a{ display:flex; justify-content:flex-end; align-items:center; padding:10px;
  text-decoration:none; color:#333; background:none; font-size:18px; line-height:1.5;
  transition:all .5s ease-in-out; position:relative; }
.sa-tate .menu-item > a::after{ content:"+"; font-size:16px; margin-left:10px; transition:transform .3s ease-in-out; visibility:hidden; }
.sa-tate .menu-item.menu-item-has-children > a::after{ visibility:visible; }
.sa-tate .menu-item.menu-item-has-children:hover > a::after{ transform:rotate(180deg); }
.sa-tate .sub-menu{ list-style:none; padding:0; margin:0; height:0; overflow:hidden; opacity:0;
  transform:translateY(-10px); transition:height 1.3s ease, opacity .3s ease, transform .3s ease; }
.sa-tate .menu-item.menu-item-has-children:hover .sub-menu{ height:auto; opacity:1; transform:translateY(0); overflow:visible; }
.sa-tate .sub-menu .menu-item{ background:none; padding:8px 0; }
.sa-tate .sub-menu .menu-item > a{ display:block; padding:5px 10px; font-size:14px; color:#555; text-align:right; transition:all .5s ease-in-out; }
.sa-tate .sub-menu .menu-item > a:hover{ color:#007BFF; transform:translateX(5px); }
@media (max-width:767px){ .sa-tate{ display:none; } } /* 外枠(高さ20px)は旧サイトでも残っているので消さない */

/* --- ハンバーガー（767px以下） --- */
.sa-burger{ display:none; }
@media (max-width:767px){
  .sa-burger{ display:flex; align-items:center; justify-content:center; position:relative;
    width:30px; height:30px; box-sizing:border-box; padding:10px 0;
    background:none; border:0; cursor:pointer; flex:0 0 auto; z-index:99999999; }
  .sa-burger *{ transition:all .2s; }
  .sa-burger > span{ position:relative; display:block; width:100%; height:2px; background:#000; }
  .sa-burger > span::before,
  .sa-burger > span::after{ content:""; position:absolute; left:0; width:100%; height:2px; background:#000; }
  .sa-burger > span::before{ top:-10px; }
  .sa-burger > span::after{ top:10px; }
  .sa-burger.is-open > span{ transform:rotate(135deg); }
  .sa-burger.is-open > span::before{ top:0; transform:rotate(90deg); }
  .sa-burger.is-open > span::after{ top:0; opacity:0; }
}

/* --- 全画面メニュー（767px以下） --- */
.sa-fsmenu{ position:fixed; top:0; right:0; bottom:0; left:0; visibility:hidden; pointer-events:none; z-index:99998; }
.sa-fsmenu__inner{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background-image:linear-gradient(270deg, #000000 0%, #000000C4 100%);
  transform:translate(100%, 0); opacity:0; visibility:hidden;
  transition:opacity .7s ease, transform .7s ease; }
.sa-fsmenu.is-open{ pointer-events:auto; }
.sa-fsmenu.is-open .sa-fsmenu__inner{ visibility:visible; opacity:1; transform:translate(0, 0); }
.sa-fsmenu__nav{ width:100%; text-align:center; opacity:0; transition:opacity .4s ease; }
.sa-fsmenu.is-open .sa-fsmenu__nav{ opacity:1; transition:opacity .4s ease .4s; }
.sa-fsmenu .menu,
.sa-fsmenu .sub-menu{ list-style:none; margin:0; padding:0; }
.sa-fsmenu .menu > .menu-item{ margin:15px; }
.sa-fsmenu .menu-item > a{ display:inline-block; color:#fff; text-decoration:none;
  font-family:var(--sa-font-menu); font-size:18px; line-height:1.5; }
.sa-fsmenu .sub-menu .menu-item{ margin:10px; }
.sa-fsmenu .sub-menu .menu-item > a{ font-size:15px; line-height:1.5; }
@media (min-width:768px){ .sa-fsmenu{ display:none; } }

/* ============================================================
   03. フッター（旧サイトの sans-footer を再現）
   4列（ロゴ＋SNS / クイックリンク / 連絡先 / 地図）＋ コピーライト帯
   ※画像は inline-block＋vertical-align で置いています。旧サイトと同じ置き方でないと
     文字の下に入る余白のぶん、高さが数px変わります。
   ============================================================ */

.sa-footer{ background:var(--sa-footer-bg); }
.sa-footer__main{ background:var(--sa-footer-bg); padding:0; }
.sa-footer__inner{ max-width:970px; margin:0 auto; padding:4% 0;
  display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; gap:0; }
.sa-fcol{ display:flex; flex-direction:column; box-sizing:border-box; }
.sa-fcol--brand{   width:30%; padding-right:5%; gap:0; }
.sa-fcol--links{   width:25%; gap:24px; }
.sa-fcol--contact{ width:25%; gap:24px; }
.sa-fcol--map{     width:20%; gap:20px; }

@media (max-width:1024px){
  .sa-footer__main{ padding:0 4%; }
  .sa-footer__inner{ padding:8% 0; flex-wrap:wrap; }
  .sa-fcol--brand{   width:36%; padding-right:0; gap:30px; }
  .sa-fcol--links{   width:32%; padding-left:4%; }
  .sa-fcol--contact{ width:32%; padding-left:4%; }
  .sa-fcol--map{     width:100%; margin-top:8%; }
}
@media (max-width:767px){
  .sa-footer__main{ padding:0 6%; }
  .sa-footer__inner{ padding:20% 0; }
  .sa-fcol--brand{   width:100%; align-items:center; gap:0; }
  .sa-fcol--links{   width:45%; margin-top:48px; padding-left:0; align-items:flex-start; } /* 旧サイトの3em＝48px */
  .sa-fcol--contact{ width:55%; margin-top:48px; padding-left:0; align-items:flex-start; }
  .sa-fcol--map{     width:100%; margin-top:32px; } /* 旧サイトの2em＝32px */
}

/* --- 1列目：ロゴとことば --- */
.sa-fbrand{ margin-bottom:2em; font-family:var(--sa-font-system); font-size:16px; line-height:24px; }
/* ↑ ここだけ端末の標準フォントを指定しています。文字は出ませんが、画像の下に入る
   すきまの大きさがフォントで変わるため、旧サイトと同じ指定にしています。 */
.sa-fbrand__img{ display:inline-block; vertical-align:baseline; margin:0 0 10px; width:60%; }
.sa-fbrand__img img{ display:block; width:100%; height:auto; }
.sa-fbrand__desc{ margin:0; font-family:"Poppins", var(--sa-font-body);
  font-size:12px; font-weight:300; line-height:1.7em; letter-spacing:0; color:var(--sa-text); }
@media (max-width:1024px){
  .sa-fbrand__img{ width:45%; margin-bottom:15px; }
  .sa-fbrand__desc{ font-size:14px; }
}
@media (max-width:767px){
  .sa-fbrand{ text-align:center; width:min(300px, 100%); margin-left:auto; margin-right:auto; }
}

/* --- 1列目：SNS --- */
.sa-fsns{ display:flex; flex-direction:column; gap:15px; }
.sa-fsns__row{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:15px; }
.sa-fsns__labelbox{ font-family:var(--sa-font-system); font-size:16px; line-height:24px; }
.sa-fsns__label{ display:inline-block; vertical-align:middle; width:115px; height:auto; }
.sa-fsns__label--nail{ width:80px; margin-right:50px; }
.sa-fsns__icons{ list-style:none; margin:0; padding:1px 1px 1px 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; min-width:0; }
.sa-fsns__icons img{ display:block; width:20px; height:20px; }
@media (max-width:1024px){
  .sa-fsns__row:first-child .sa-fsns__icons{ gap:0 15px; }
  .sa-fsns__icons img{ width:18px; height:18px; }
}
@media (max-width:767px){
  .sa-fsns{ width:64%; }
  .sa-fsns__row{ gap:10px; }
  .sa-fsns__labelbox{ min-width:0; }
  .sa-fsns__label{ max-width:100%; }
  .sa-fsns__icons img{ width:20px; height:20px; }
}

/* --- 2列目・3列目の見出し画像 --- */
.sa-fheadbox{ font-family:var(--sa-font-system); font-size:16px; line-height:24px; }
.sa-fhead{ display:inline-block; vertical-align:middle; height:auto; }
.sa-fhead--link{ width:140px; }
.sa-fhead--touch{ width:145px; }
@media (max-width:767px){ .sa-fhead--link{ width:130px; } }

/* --- 2列目：クイックリンク ---
   旧サイトは下の階層をたたんだ状態で出しているので、同じく隠しています。
   （リンク自体はHTMLに残しているので、検索エンジンからはたどれます） */
.sa-fnav{ display:flow-root; padding:0 32px 0 0; }
.sa-fnav .menu{ list-style:none; margin:-6px 0 16px; padding:0; }
.sa-fnav .sub-menu{ display:none; }
.sa-fnav a{ display:block; text-decoration:none; padding:9.6px 16px;
  font-family:"Roboto", var(--sa-font-body); font-size:14px; font-weight:400; line-height:20px;
  letter-spacing:0; color:var(--sa-text); transition:color .3s; }
.sa-fnav a:hover{ color:#C8D5DC; }
.sa-fnav .menu-item-has-children > a{ display:flex; align-items:center; }
.sa-fnav .menu-item-has-children > a::after{
  content:""; flex:0 0 auto; width:24px; height:14px; margin:0;
  background-image:linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat, no-repeat;
  background-size:12.25px 2.625px, 2.625px 14px;
  background-position:right center, right 4.8125px center;
}
@media (max-width:767px){ .sa-fnav{ padding:0; } }

/* --- 3列目：連絡先 --- */
.sa-flist{ list-style:none; margin:0; padding:0; }
.sa-flist li{ font-family:"Roboto", var(--sa-font-body); font-size:14px; font-weight:400;
  line-height:40px; color:var(--sa-text); }
.sa-flist li:not(:last-child){ padding-bottom:5px; }
.sa-flist li:not(:first-child){ margin-top:5px; }
.sa-flist a{ color:inherit; text-decoration:none; }
@media (max-width:1024px){ .sa-flist li{ font-family:var(--sa-font-body); font-size:16px; line-height:40px; } }
@media (max-width:767px){
  .sa-flist li:not(:last-child){ padding-bottom:4px; }
  .sa-flist li:not(:first-child){ margin-top:4px; }
}

/* --- 4列目：地図（旧サイトと同じく白黒） --- */
.sa-fmapbox{ font-family:var(--sa-font-system); font-size:16px; line-height:24px; }
.sa-fcol--map iframe{ width:100%; height:245px; border:0; display:inline; vertical-align:baseline; filter:grayscale(100%); }

/* --- コピーライト帯 --- */
.sa-copy{ min-height:45px; background:var(--sa-copy-bg);
  display:flex; flex-direction:column; justify-content:center; align-items:stretch; }
.sa-copy__text{ margin:0; text-align:center;
  font-family:"Poppins", var(--sa-font-body); font-size:16px; font-weight:300; line-height:1.5em;
  letter-spacing:0; color:var(--sa-copy-text); }
.sa-copy__links{ display:inline-block; margin-left:10px; font-size:10px; font-weight:400; letter-spacing:.08em; opacity:.72; }
.sa-copy__links a{ color:inherit; font-size:10px; line-height:inherit; letter-spacing:inherit; text-decoration:none; }
.sa-copy__sep{ margin:0 7px; }
@media (max-width:1024px){ .sa-copy__text{ font-size:14px; } }

/* ============================================================
   04. メニュー詳細ページ（facial / body / hair removal / detox / nail）
   5ページとも同じ骨組みです。中身は parts/pages/〈スラッグ〉.php にあります。
   ============================================================ */

/* ページ全体の背景（旧サイトと同じ、うすいベージュ） */
body.sa-page-facial, body.sa-page-body, body.sa-page-hair,
body.sa-page-detox, body.sa-page-nail,
body.sa-page-esthetic-prices, body.sa-page-nail-prices{ background-color:#D7C5AB30; }

/* 旧サイトは左右に160pxの余白を置いていますが、中の箱（830px）はその余白を無視して
   画面の中央にきます。余白があると幅768〜1024pxで箱が画面からはみ出して切れるだけなので、
   PC/タブレットでは余白を0にしています（位置は旧サイトと同じ・森川様の了解ずみ）。 */
.sa-menu{ margin:80px 0; padding:0; }
.sa-menu__inner{ display:flex; flex-direction:column; align-items:center; }
/* width は旧サイトどおり830pxですが、max-width を足して画面からはみ出さないようにしています。
   旧サイトは幅768〜1024pxで左右がはみ出していました（森川様の了解を得て直しています）。 */
.sa-menu__content{ width:830px; max-width:100%; position:relative; display:flex; flex-direction:column; }

/* 大きな金色の見出し（旧サイトは Adobe Fonts。ここは自社設置の Qwigley に置き換え） */
.sa-menu__title{ margin:160px 0 100px -80px; } /* 80px＋見出しウィジェットの下20px */
.sa-menu__title h1{ margin:0; padding:0;
  font-family:var(--sa-font-display); font-size:120px; line-height:120px; font-weight:500;
  letter-spacing:4px; color:var(--sa-gold); }

/* 大見出しの下に小さく添える日本語。主役はあくまで金の見出しなので、
   小さく・字間を広く・色を落として「余韻」として置いています。 */
.sa-menu__ja{ margin:0; padding-left:2px;
  font-family:var(--sa-font-serif); font-size:12px; line-height:1;
  letter-spacing:.3em; color:#6F6963; }

/* 斜めに置いた飾りの絵 */
.sa-menu__deco{ position:absolute; top:-20px; right:-35px; width:400px; max-width:min(400px, 100vw); text-align:center; }
.sa-menu__deco img{ display:block; width:100%; height:auto; opacity:.15; transform:rotate(20deg); }

/* 施術ブロック（写真＋文章） */
.sa-menu__block{ display:flex; flex-direction:row-reverse; flex-wrap:nowrap;
  justify-content:space-between; gap:20px; }
.sa-menu__block + .sa-menu__block{ margin-top:20px; }
.sa-menu__photo{ width:65%; max-width:65%; align-self:center; text-align:center; }
.sa-menu__photo img{ display:block; width:100%; height:auto; }
.sa-menu__text{ width:60%; display:flex; flex-direction:column; }
.sa-menu__name{ margin:0 0 20px; padding:0;
  font-family:var(--sa-font-serif); font-size:26px; font-weight:700; line-height:1.5;
  letter-spacing:normal; color:#333; }
.sa-menu__catch{ margin:0 0 20px; padding:0;
  font-family:var(--sa-font-serif); font-size:16px; font-weight:700; line-height:1.2em;
  letter-spacing:normal; color:#333; }
.sa-menu__body{ margin:0;
  font-family:var(--sa-font-body); font-size:16px; font-weight:400; line-height:40px; color:var(--sa-text); }
.sa-menu__body p{ margin:0 0 .9em; } /* 旧サイトの段落の下余白 */

/* スマホ用の見出し（hair removal だけ・旧サイトも2種類のHTMLを出し分けています） */
.sa-menu__title-sp{ display:none; }
/* 旧サイトどおり120pxです。以前92pxにしていたのは、埋め込んであった書体の中身が
   Qwigleyではなく字幅の広い別の書体だったためで、2026-09-02に本物へ入れ替えて解消しました。 */
.sa-menu__title-sp h1{ margin:0; padding:0;
  font-family:var(--sa-font-display); font-size:120px; line-height:60px; font-weight:500;
  letter-spacing:4px; color:var(--sa-gold); text-align:start; white-space:nowrap; }
.sa-menu__sub{ display:block; text-align:right; }

@media (max-width:767px){
  .sa-menu{ margin:-32px 0 0; padding:0 16px; }
  .sa-menu__content{ width:100%; margin-top:160px; }
  .sa-menu__title{ margin:32px 0 20px; text-align:start; align-self:center; }
  .sa-menu__title--pc{ display:none; }
  .sa-menu__title-sp{ display:block; width:100%; max-width:100%; align-self:center;
    margin:32px 0 20px; padding:0 24px 0 0; }
  .sa-menu__deco{ top:350px; }
  .sa-menu__block{ flex-direction:column; }
  .sa-menu__photo{ width:100%; max-width:100%; }
  .sa-menu__text{ width:100%; }
}

/* ---- フェイシャルページだけの並び（4つの商品ブロックが左右交互） ---- */
.sa-facial__list{ display:flex; flex-direction:column; gap:100px; }
.sa-facial__block{ display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; gap:20px; }
.sa-facial__block:nth-child(even){ flex-direction:row-reverse; }
.sa-facial__block:last-child{ margin-bottom:32px; }
.sa-facial__left,
.sa-facial__right{ width:50%; display:flex; flex-direction:column; gap:20px; }
.sa-facial__right{ justify-content:center; }
.sa-facial__img{ min-height:250px; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.sa-facial__rec{ font-family:var(--sa-font-body); font-size:16px; font-weight:400; line-height:32px; color:var(--sa-text); }
.sa-facial__rec p{ margin:0 0 .9em; }
.sa-facial__name{ margin:0; padding:0; font-family:var(--sa-font-serif); font-size:26px; font-weight:700; line-height:26px; color:#333; }
.sa-facial__catch{ margin:0; padding:0; font-family:var(--sa-font-serif); font-size:16px; font-weight:700; line-height:1.2em; color:#333; }
.sa-facial__body{ font-family:var(--sa-font-body); font-size:16px; font-weight:400; line-height:40px; color:var(--sa-text); }
.sa-facial__body p{ margin:0 0 .9em; }
@media (max-width:767px){
  .sa-facial__block,
  .sa-facial__block:nth-child(even){ flex-direction:column; }
  .sa-facial__left,
  .sa-facial__right{ width:100%; }
}

/* ============================================================
   05. トップページ
   ============================================================ */

/* --- 1-0. ファーストビューの言葉（フェーズ4.5・旧サイトにはありません） ---
 *
 *  【動きの筋書き】
 *   1. 白い幕が画面を覆い、言葉だけが横書きで現れる（読ませる）
 *   2. 一字ずつ、横の並びから縦の列へ折れながら右へ移る（1.6秒）
 *   3. 幕がひらいて写真が現れ、言葉は右の余白に席をとる
 *   4. スクロールすると、写真と同じ割合で静かに消える（上に戻すとまた出る）
 *
 *  ・幕と言葉は画面に固定した層（.sa-open）に置いています。
 *    トップの写真には一切さわっていないので、この層を消せば納品時の姿に戻ります。
 *  ・席をとるのは画面幅1200px以上のときだけ。
 *    それより狭いと右の余白が足りないので、横書きで見せたあとそのまま消えます。
 *  ・同じ方には1日1回だけ出します（2回目からは席についた状態で始まります）。
 * --------------------------------------------------------------- */

/* 席の位置：写真の右の余白のまんなか。R = (画面幅 - 写真3枚の940px) ÷ 4 */
.sa-open{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  --sa-R: calc((100vw - 940px) / 4);
  --sa-seat-top: 360px;
  --sa-step: 21.96px;   /* 文字の送り（18px × 1.22） */
  --sa-half: 142.7px;   /* 横書きのときの中央寄せ（14字ぶんの半分） */
  --sa-fold: 1.6s;      /* 折れるのにかける時間 */
  --sa-t0: 2.2s;        /* 折れはじめる時刻 */
}

.sa-open__veil{
  position:absolute; inset:0; z-index:1;
  background:var(--sa-bg);
  opacity:0; visibility:hidden;
}
.sa-open.is-play .sa-open__veil{
  opacity:1; visibility:visible;
  animation:sa-veil-out 1.2s ease var(--sa-t0) forwards;
}

/* --- 日本語（一字ずつ置いて、横並び → 縦並び へ移す） --- */
.sa-open__ja{
  position:absolute; z-index:2; margin:0; padding:0;
  right:var(--sa-R); top:var(--sa-seat-top);
  width:0; height:0; transform-origin:0 0;
}
.sa-open__ja s{
  position:absolute; left:0; top:0; display:block;
  text-decoration:none; white-space:pre;
  font-family:var(--sa-font-serif); font-weight:400; font-size:18px; line-height:1;
  color:#3C3835;
  transform:translate(var(--px,0px), calc(var(--i) * var(--sa-step) + var(--py,0px)));
}
.sa-open.is-play .sa-open__ja{
  transform:translate(calc(-25vw - 235px), calc(50vh - 380px)) scale(1.7);
  animation:sa-travel calc(var(--sa-fold) + .2s) var(--sa-ease) var(--sa-t0) forwards;
}
.sa-open.is-play .sa-open__ja s{
  opacity:0;
  transform:translate(calc(var(--i) * var(--sa-step) - var(--sa-half)), 0);
  animation-name:sa-char-in, sa-fold;
  animation-duration:.6s, var(--sa-fold);
  animation-delay:calc(.8s + var(--i) * .045s), calc(var(--sa-t0) + var(--i) * .028s);
  animation-timing-function:var(--sa-ease), var(--sa-ease);
  animation-fill-mode:forwards, forwards;
}

/* --- 英字：横用と縦用を用意して、折れる瞬間に入れ替える --- */
.sa-open__en-h{
  position:absolute; z-index:2; margin:0; left:0; right:0;
  top:calc(50vh - 74px); text-align:center;
  font-family:var(--sa-font-marcell); font-size:12px; letter-spacing:.3em;
  color:var(--sa-subtitle);
  opacity:0; visibility:hidden;
}
.sa-open.is-play .sa-open__en-h{
  visibility:visible;
  animation:sa-soft-in .9s ease .35s forwards, sa-soft-out .5s ease calc(var(--sa-t0) + .1s) forwards;
}
/* 縦の英字。回転させるのではなく縦書きにしています（英字は自動で90度寝ます） */
.sa-open__en-v{
  position:absolute; z-index:2; margin:0;
  right:calc(var(--sa-R) + 38px); top:calc(var(--sa-seat-top) + 2px);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--sa-font-marcell); font-size:10px; letter-spacing:.26em;
  color:var(--sa-subtitle); white-space:nowrap;
}
.sa-open.is-play .sa-open__en-v{
  opacity:0;
  animation:sa-soft-in .8s ease calc(var(--sa-t0) + var(--sa-fold) * .72) forwards;
}

/* --- 狭い画面用（1199px以下）：折らずに横書きのまま見せて、そのまま消える --- */
.sa-open__ja-sp{
  display:none; position:absolute; z-index:2; margin:0;
  left:24px; right:24px; top:calc(50vh - 28px); text-align:center;
  font-family:var(--sa-font-serif); font-weight:400;
  font-size:clamp(18px, 5.2vw, 20px);
  line-height:2.05; letter-spacing:.12em; color:#3C3835;
}
/* 単語・文節の途中で折り返さない */
.sa-open__ja-sp, .sa-open__en-h{ word-break:keep-all; overflow-wrap:normal; line-break:strict; }
.sa-u{ display:inline-block; white-space:nowrap; }

/* スマホ（600px以下）は文節ごとに2行で見せる。375pxでは1行に収まり360pxでは折れる、という幅による揺れを止めるため、
   はじめから2行の組みに固定して、左右に余白を残す。 */
@media (max-width:600px){
  .sa-open__ja-sp .sa-u{ display:block; }
  .sa-open__ja-sp{ top:calc(50vh - 48px); }
  .sa-open__en-h{ top:calc(50vh - 94px); }
}

@keyframes sa-char-in{
  from{ opacity:0; transform:translate(calc(var(--i) * var(--sa-step) - var(--sa-half)), 6px); }
  to  { opacity:1; transform:translate(calc(var(--i) * var(--sa-step) - var(--sa-half)), 0); }
}
@keyframes sa-fold{
  from{ transform:translate(calc(var(--i) * var(--sa-step) - var(--sa-half)), 0); }
  to  { transform:translate(var(--px,0px), calc(var(--i) * var(--sa-step) + var(--py,0px))); }
}
@keyframes sa-travel{
  from{ transform:translate(calc(-25vw - 235px), calc(50vh - 380px)) scale(1.7); }
  to  { transform:none; }
}
@keyframes sa-veil-out{ to{ opacity:0; visibility:hidden; } }
@keyframes sa-soft-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sa-soft-out{ to{ opacity:0; } }

@media (max-width:1359px){
  /* 席をとらない。横書きで見せて、幕と一緒に消える。
     1360px を境にしているのは、これより狭いと写真と文字のあいだが
     30px を切って、ぶつかって見えるためです（1440pxで71px、1280pxで31px）。 */
  .sa-open__ja, .sa-open__en-v{ display:none; }
  .sa-open__ja-sp{ display:block; opacity:0; visibility:hidden; }
  .sa-open__en-h{ top:calc(50vh - 72px); }
  .sa-open.is-play .sa-open__veil{ animation-delay:3.9s; animation-duration:1s; }
  .sa-open.is-play .sa-open__en-h{
    animation:sa-soft-in .9s ease .3s forwards, sa-soft-out 1s ease 3.9s forwards;
  }
  .sa-open.is-play .sa-open__ja-sp{
    visibility:visible;
    animation:sa-rise-in 1.1s var(--sa-ease) .85s forwards, sa-soft-out 1s ease 3.9s forwards;
  }
  .sa-open.is-done{ display:none; }
  @keyframes sa-rise-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}

@media (prefers-reduced-motion:reduce){
  .sa-open__veil{ display:none; }
  .sa-open.is-play .sa-open__ja,
  .sa-open.is-play .sa-open__ja s,
  .sa-open.is-play .sa-open__en-h,
  .sa-open.is-play .sa-open__en-v,
  .sa-open.is-play .sa-open__ja-sp{ animation:none !important; }
  .sa-open.is-play .sa-open__ja{ transform:none; }
  .sa-open.is-play .sa-open__ja s{ opacity:1;
    transform:translate(var(--px,0px), calc(var(--i) * var(--sa-step) + var(--py,0px))); }
  .sa-open.is-play .sa-open__en-h{ opacity:0; }
  .sa-open.is-play .sa-open__en-v{ opacity:1; }
}

/* Concept の頭に静かに置くひとこと */
.sa-top__catch-sub{
  margin:0 0 8px;
  font-family:var(--sa-font-body);
  font-size:14px; line-height:2.2; font-weight:400;
  letter-spacing:.04em; color:var(--sa-subtitle);
  word-break:keep-all; overflow-wrap:normal; line-break:strict;
}
.sa-top__catch-sub p{ margin:0; }
@media (max-width:767px){
  .sa-top__catch-sub{ font-size:13px; line-height:2.1; }
}

/* --- 1. メインビジュアル --- */
.sa-top{ position:relative; margin:0 80px; padding:160px 0 0;
  display:flex; flex-direction:row; justify-content:center; align-items:stretch; gap:20px;
  min-height:100vh; box-sizing:border-box; }
.sa-top__col{ width:300px; display:flex; flex-direction:column; }
.sa-top__col--1{ margin-top:256px; }
.sa-top__col--2{ margin-top:128px; min-height:100px; position:relative; }
.sa-top__col--1 img,
.sa-top__col--3 img{ width:400px; max-width:100%; height:500px; object-fit:cover;
  opacity:.6; filter:saturate(0%); }
.sa-top__col--1 img{ object-position:bottom left; }
.sa-top__col--3 img{ object-position:center center; }
.sa-top__movie{ width:100%; }
.sa-top__movie video{ display:block; width:100%; aspect-ratio:9 / 16; object-fit:cover; background:#000; }

/* 斜めに置いた「For women For beauty.」 */
.sa-top__logo{ position:absolute; left:100px; top:364px; width:500px; max-width:500px; }
.sa-top__logo img{ display:block; width:660px; max-width:100%; height:auto;
  transform:rotate(-16deg); }
.sa-top__logo2{ display:none; }

/* --- 2. Concept と 3. スタッフ紹介 の共通の枠 --- */
.sa-concept,
.sa-about{ width:1000px; max-width:min(100%, 1000px); margin:0 auto;
  display:flex; flex-direction:row; justify-content:space-between; gap:20px; box-sizing:border-box; }
.sa-concept{ padding:0 0 32px; align-items:flex-end; }
.sa-about{ padding:80px 0 32px; align-items:center; margin-bottom:20px; } /* フッターとの間の20px（旧サイトと同じ） */
.sa-concept__inner,
.sa-about__inner{ width:100%; margin-right:48px; padding:10px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:20px; }

/* 見出し画像（concept / salon staff） */
.sa-concept__label{ margin:0 0 16px -48px; }
.sa-concept__label img{ display:block; width:auto; max-width:100%; height:75px;
  object-fit:contain; object-position:center left; }

/* リード文 */
.sa-concept__lead{ font-family:var(--sa-font-serif); font-size:16px; font-weight:700; line-height:1.2em;
  color:var(--sa-subtitle); }
/* 旧サイトは中身だけを16px上にずらしています（枠の位置は動かさない） */
.sa-concept__lead p{ margin:-16px 0 .9em; }

/* 本文 */
.sa-concept__text{ font-family:var(--sa-font-body); font-size:16px; font-weight:400; line-height:40px; color:var(--sa-text); }
.sa-concept__text p{ margin:0 0 .9em; }
.sa-concept__head{ margin:0; padding:0;
  font-family:var(--sa-font-serif); font-size:16px; font-weight:700; line-height:1.2em; color:#333; }
.sa-concept__photo{ text-align:center; }
.sa-concept__photo img{ display:block; margin:0 auto; width:800px; max-width:100%; height:auto; }

/* --- スタッフ --- */
.sa-staff{ display:flex; flex-direction:row; justify-content:space-between; gap:20px; }
.sa-staff__item{ width:25%; }
.sa-staff__photo{ margin:0; }
.sa-staff__photo img{ display:block; width:100%; height:auto; border-radius:50%; }
.sa-staff__body{ padding:10px; font-size:14px; line-height:21px; }
.sa-staff__name{ margin:5px 0; padding:0;
  font-family:var(--sa-font-menu); font-size:20px; font-weight:700; line-height:24px;
  letter-spacing:1px; color:#272727; }
.sa-staff__position{ margin:5px 0 10px; padding:0;
  font-family:var(--sa-font-menu); font-size:14px; font-weight:400; line-height:16.8px;
  letter-spacing:.7px; color:var(--sa-subtitle); }
.sa-staff__text{ margin:0 0 14.4px; font-size:12px; line-height:18px; color:#272727; }

@media (max-width:767px){
  .sa-top{ margin:0; padding:160px 0 0; }
  .sa-top__col{ width:100%; }
  .sa-top__col--1,
  .sa-top__col--3{ display:none; }
  .sa-top__col--2{ margin-top:0; }
  .sa-top__logo{ left:3px; width:550px; max-width:550px; }
  .sa-top__logo2{ display:block; position:absolute; left:12px; top:280px; }
  .sa-top__logo2 img{ display:inline-block; width:800px; max-width:100%; height:auto; transform:rotate(-15deg); }
  .sa-concept,
  .sa-about{ width:100%; margin:80px 0 0; padding:16px; }
  .sa-concept__inner,
  .sa-about__inner{ margin-right:0; }
  .sa-concept__label{ margin:0 0 16px -16px; }
  .sa-concept__label img{ height:55px; }
  .sa-staff{ flex-wrap:wrap; }
  .sa-staff__item{ width:45%; }
  /* 旧サイトはスマホで文字の大きさが変わります（旧プラグインが em で組んでいたため）。
     ここは実測値をそのまま px で写しています。 */
  .sa-staff__name    { font-size:18.375px; line-height:22.05px; }
  .sa-staff__position{ font-size:12.6px;   line-height:15.12px; }
  .sa-staff__text    { font-size:12.8px;   line-height:19.2px; }
}

/* ==================================================================
 * 06. メニュー一覧ページ  /menu/
 *
 *  旧サイト（Elementor）の実測値をそのまま px で写しています。
 *  ・ページ上部の写真は画面の高さいっぱい（100vh）
 *  ・ごあいさつの箱は 800px 固定で中央ぞろえ
 *  ・施術内容は 900px の中を 4 : 6 で分け、間を 20px あける
 * ================================================================== */

/* ----- 1. ページ上部の大きな写真（下層ページ共通・parts/pages/_page-head.php）-----
 *  写真・文字・ロゴ画像の幅はページ側から CSS変数で渡しています。 */
.sa-phead {
  position: relative;
  margin: 0 0 var(--sa-phead-gap, 160px);   /* ページによって 80px / 160px */
}
.sa-phead__photo {
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sa-phead__box {
  position: absolute;
  left: 100px;
  bottom: 100px;
  width: calc(100% - 20px);
  padding: 10px;
  box-sizing: border-box;
}
.sa-phead__lead {
  margin: 0 0 14.4px;
  font-family: var(--sa-font-system);
  font-size: 16px;
  line-height: 24px;
  color: var(--sa-phead-lead-color, #333333);
}
.sa-phead__logo { margin: 0; line-height: 0; }
.sa-phead__logo img {
  display: inline-block;
  width: var(--sa-phead-logo-w, 250px);
  height: auto;
  vertical-align: top;
}

/* ----- 2. ごあいさつ ----- */
.sa-mgreet {
  margin: 0 0 80px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-mgreet__inner {
  position: relative;
  width: 800px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sa-mgreet__title {
  margin: 96px 0 64px -80px;   /* 旧サイトの 6rem 0 4rem -5rem */
  padding: 0;
  font-family: var(--sa-font-menu);
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  color: #333333;
  text-align: start;
  border: none;
  background: none;
}
.sa-mgreet__title::before,
.sa-mgreet__title::after { content: none; }
.sa-mgreet__body {
  max-width: 800px;
  font-family: var(--sa-font-body);
  font-size: 16px;
  line-height: 40px;
  color: #333333;
}
.sa-mgreet__body p { margin: 0; }
.sa-mgreet__deco {
  position: absolute;
  top: -50px;
  right: -165px;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}
.sa-mgreet__deco img { width: 100%; height: auto; opacity: 0.15; }

/* ----- 3. 施術内容 ----- */
.sa-msvc {
  padding: 10px;
  background-color: var(--sa-text);
  display: flex;
  justify-content: center;
}
.sa-msvc__inner {
  width: 900px;
  max-width: 100%;
  display: flex;
  gap: 20px;
}
.sa-msvc__head {
  width: 40%;
  max-width: 40%;
  min-width: 0;
  padding: 32px 0 0;
  box-sizing: border-box;
}
.sa-msvc__title {
  margin: 0;
  padding: 0;
  /* 旧サイトは Marcellus のみを指定していて、日本語は端末の標準書体に落ちます */
  font-family: "Marcellus";
  font-size: 45px;
  line-height: 45px;
  font-weight: 400;
  color: var(--sa-bg);
  border: none;
  background: none;
}
.sa-msvc__title::before,
.sa-msvc__title::after { content: none; }
.sa-msvc__list {
  width: 60%;
  max-width: 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sa-mcard {
  container-type: inline-size;   /* 下の「Hair Removal」の文字サイズ調整で使います */
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sa-mcard__photo {
  position: relative;
  display: block;
  min-height: 330px;
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: none;
}
/* 旧サイトのマウスオーバー：白いグラデーションがふわっとかぶさる */
.sa-mcard__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  transition: background .3s, opacity .3s;
}
.sa-mcard__photo:hover::before {
  background-image: linear-gradient(180deg, #FFFCFC 0%, #FFFAFB 60%);
  opacity: 0.6;
}
.sa-mcard__namebox { position: relative; line-height: 0; }   /* 写真に重なる見出しを前面に出す */
.sa-mcard__name {
  margin: -48px 0 -32px;       /* 旧サイトの -3rem 0 -2rem */
  padding: 0;
  font-family: var(--sa-font-display);
  font-size: 90px;
  line-height: 90px;
  font-weight: 400;
  color: var(--sa-gold);
  border: none;
  background: none;
}
.sa-mcard__name::before,
.sa-mcard__name::after { content: none; }
/* Qwigley は旧サイトの absolute-beauty より横に長く、"Hair Removal" だけが枠からはみ出して2行になります。
 * 行の高さ（90px）はそのままに、この見出しだけ枠に収まるまで文字を小さくしています。
 * ＝ 書体を入れ替えたことによる、あらかじめお伝えしている例外です。 */
.sa-mcard__name { white-space: nowrap; }
.sa-mcard__name--long { font-size: 56px; }        /* 古いブラウザ用の控え */
@supports (width: 1cqw) {
  .sa-mcard__name--long { font-size: min(90px, calc(17cqw - 3.5px)); }
}
.sa-mcard__text {
  font-family: var(--sa-font-system);
  font-size: 16px;
  line-height: 24px;
  color: var(--sa-bg);
}
.sa-mcard__text p { margin: 0 0 14.4px; }
.sa-mcard__text strong { font-weight: 700; }

/* ----- 1025px 以上：ごあいさつの箱は 500px 固定 ----- */
@media (min-width: 1025px) {
  .sa-phead__box { width: 500px; }
}

/* ----- 767px 以下（スマホ） ----- */
@media (max-width: 767px) {
  .sa-phead        { margin-bottom: 48px; }
  .sa-phead__box   { left: 10px; bottom: 50px; }
  .sa-phead__logo img { width: var(--sa-phead-logo-w-sp, 300px); }

  .sa-mgreet       { margin-bottom: 0; padding: 0 16px; flex-direction: column; }
  .sa-mgreet__inner{ width: 100%; }
  .sa-mgreet__title{ margin: 0; }

  .sa-msvc__inner  { flex-direction: column; }
  .sa-msvc__head   { width: 100%; max-width: 100%; }
  .sa-msvc__list   { width: 100%; max-width: 100%; }
}

/* ==================================================================
 * 07. サロン紹介ページ  /salon/
 *
 *  ページ上部の大きな写真は「05.5 ページ上部の大きな写真」を使います。
 *  ここから下は ご挨拶 → 会社概要 → アクセス の3つです。
 * ================================================================== */

.sa-sgreet {
  margin: 0 0 80px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-sgreet__inner {
  position: relative;
  width: 800px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- 見出し（ご挨拶／会社概要）--- */
.sa-sgreet__head { margin: 96px 0 64px -80px; }   /* 旧サイトの 6rem 0 4rem -5rem */
.sa-sgreet__title {
  margin: 0;
  padding: 0;
  font-family: var(--sa-font-menu);
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  color: #333333;
  text-align: start;
  border: none;
  background: none;
}
.sa-sgreet__title::before,
.sa-sgreet__title::after { content: none; }

/* --- 写真＋文章＋サイン --- */
.sa-sprof {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 0;
}
.sa-sprof__photo { width: 32%; flex: 0 0 auto; }
.sa-sprof__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* 旧サイトはElementorのマスク（縦長の楕円）で写真を切り抜いています。
     同じ形のSVGをCSSの中に直接書いて、プラグインなしで同じ見た目にしています。 */
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='50' rx='40' ry='50'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='50' rx='40' ry='50'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% auto;
          mask-size: 100% auto;
  -webkit-mask-position: 0% 10%;
          mask-position: 0% 10%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.sa-sprof__text {
  width: 65%;
  flex: 0 1 auto;
  font-family: var(--sa-font-system);
  font-size: 14px;
  line-height: 40px;
  color: #333333;
}
.sa-sprof__text p { margin: 0 0 14.4px; }
.sa-sprof__sign {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: end;
  line-height: 0;
}
.sa-sprof__sign img { width: 80px; height: auto; }

/* --- 会社概要の表 --- */
.sa-sinfo { padding: 16px 0 0; }
.sa-sinfo dl {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  font-family: var(--sa-font-body);
  color: #444444;
  font-size: 14px;
  line-height: 1.8;
}
.sa-sinfo dt,
.sa-sinfo dd {
  margin: 0;
  padding: 20px 10px;
  vertical-align: top;
  border-top: 0.5px solid #cccccc;
  background: none;
}
.sa-sinfo dt {
  width: 150px;
  font-weight: bold;
  float: left;
  clear: left;
}
.sa-sinfo dd { margin-left: 150px; }
.sa-sinfo dl::after { content: ""; display: block; clear: both; }

/* --- アクセス（動画＋道案内）--- */
.sa-saccess {
  padding: 10px;
  display: flex;
  gap: 20px;
}
.sa-saccess__video { width: 45%; }
.sa-saccess__video video {
  display: block;
  width: 100%;
  aspect-ratio: 1.77777;
  object-fit: cover;
}
.sa-saccess__guide {
  width: 50%;
  font-family: var(--sa-font-system);
  font-size: 15px;
  line-height: 22.5px;
  color: #333333;
}
.sa-saccess__guide h5 {
  margin: 8px 0 16px;
  padding: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: #333333;
  border: none;
  background: none;
}
.sa-saccess__guide h5::before,
.sa-saccess__guide h5::after { content: none; }
.sa-saccess__guide p { margin: 0 0 14.4px; }

/* --- うっすら重なる六角形の飾り --- */
.sa-sgreet__deco {
  position: absolute;
  top: -50px;
  right: -165px;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}
.sa-sgreet__deco img { width: 100%; height: auto; opacity: 0.15; }

/* ----- 1024px 以下（タブレット） ----- */
@media (max-width: 1024px) {
  .sa-sgreet__head     { margin: 0; padding: 0 0 48px 16px; }
  .sa-sgreet__head--2  { padding: 0 0 0 16px; }
  .sa-sprof            { width: 95%; margin: 0 0 32px 16px; }
  .sa-sprof__sign      { bottom: -15px; }
  .sa-sinfo            { padding: 32px 16px 16px; }
}

/* ----- 767px 以下（スマホ） ----- */
@media (max-width: 767px) {
  .sa-sgreet          { margin-bottom: 0; padding: 0 16px; flex-direction: column; }
  .sa-sgreet__inner   { width: 100%; }
  .sa-sgreet__head    { margin: 0; }
  .sa-sgreet__head--2 { margin: 32px 0 0; }

  .sa-sprof           { width: auto; justify-content: center; margin: 0 0 16px; }
  .sa-sprof__photo    { width: 60%; }
  .sa-sprof__text     { width: 100%; }

  .sa-sinfo           { padding: 16px 0 0; }

  .sa-saccess         { flex-wrap: wrap; }
  .sa-saccess__video  { width: 100%; }
  .sa-saccess__guide  { width: 100%; }
}

/* ==================================================================
 * 08. 料金表ページ  /esthetic-prices/  /nail-prices/
 *
 *  骨組み（830pxの箱・大きな見出し・斜めの飾り）はメニュー詳細ページと同じものを使い、
 *  中身だけこのセクションで作っています。料金表そのものは「画像」です。
 * ================================================================== */

.sa-price__list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 0 0 48px;
  text-align: center;
}
/* 「esthetic」「nail」の手書き文字。旧サイトと同じく高さ55pxで左寄せ */
.sa-price__label {
  margin: 0 0 0 -48px;
  text-align: start;
  line-height: 0;
}
.sa-price__label img {
  display: inline-block;
  height: 55px;
  max-width: 100%;
  object-fit: contain;
  object-position: 0% 50%;
}
/* 料金表の画像。押すと大きく表示します */
.sa-price__zoom {
  display: inline-block;
  max-width: 100%;
  margin-inline: auto;
  line-height: 0;
  cursor: zoom-in;
}
.sa-price__zoom img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  /* 旧サイトどおり110pxです。以前は画面幅に合わせて縮めていましたが、それは
     埋め込んであった書体の中身が本物のQwigleyではなかったためで、2026-09-02に解消しました。 */
  .sa-price .sa-menu__title h1 { font-size: 110px; line-height: 110px; white-space: nowrap; }
  .sa-price__label     { margin-left: 0; }
  .sa-price__label img { object-position: 50% 50%; }
}

/* --- 8-2. 文字の料金表（フェーズ4.5で追加・旧サイトにはありません） ---
   旧サイトは料金を画像だけで見せていました。検索エンジンにもAIにも読めないので、
   同じ内容を文字で組み直したものです。画像はページ下部にたたんで残しています。 */
.sa-ptables { display: flex; flex-direction: column; gap: 64px; margin: 0 0 56px; }

.sa-ptable__head { margin: 0 0 16px; padding: 0 0 12px; display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--sa-gold); }
.sa-ptable__en { font-family: var(--sa-font-display); font-size: 64px; line-height: 1; letter-spacing: 2px; color: var(--sa-gold); }
.sa-ptable__ja { font-family: var(--sa-font-serif); font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--sa-text); }
.sa-ptable__lead { margin: 0 0 24px; font-family: var(--sa-font-body); font-size: 14px; line-height: 2; color: var(--sa-subtitle); }

.sa-ptable__rows { margin: 0; padding: 0; }
.sa-ptable__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 16px 0; border-bottom: 1px dotted #DED6C9; }
.sa-ptable__row:first-child { border-top: 1px dotted #DED6C9; }
.sa-ptable__dt { margin: 0; flex: 1 1 auto; min-width: 0; }
.sa-ptable__dd { margin: 0; flex: 0 1 auto; text-align: right; }
.sa-ptable__name { font-family: var(--sa-font-serif); font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--sa-text); }
.sa-ptable__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: 2px;
  background: var(--sa-gold); color: #fff;
  font-family: var(--sa-font-body); font-size: 11px; font-weight: 400; letter-spacing: .06em; }
.sa-ptable__sub { display: block; margin-top: 4px; font-family: var(--sa-font-body); font-size: 13px; line-height: 1.8; color: var(--sa-subtitle); }
.sa-ptable__time { display: block; font-family: var(--sa-font-body); font-size: 12px; line-height: 1.6; color: var(--sa-subtitle); }
.sa-ptable__price { display: block; font-family: var(--sa-font-marcell); font-size: 19px; line-height: 1.5; color: var(--sa-text); }
.sa-ptable__notes { margin: 16px 0 0; padding: 0; list-style: none; }
.sa-ptable__notes li { padding-left: 1em; text-indent: -1em;
  font-family: var(--sa-font-body); font-size: 12px; line-height: 2; color: var(--sa-subtitle); }
.sa-ptable__notes li::before { content: "※ "; }

/* 表の下の共通の注意書き */
.sa-pfoot { margin: 0 0 48px; padding: 24px 28px; list-style: none; background: #FFFFFF80; border: 1px solid #EDE7DE; }
.sa-pfoot li { padding-left: 1em; text-indent: -1em;
  font-family: var(--sa-font-body); font-size: 13px; line-height: 2; color: var(--sa-subtitle); }
.sa-pfoot li::before { content: "・"; }

/* 出口（予約・電話・もう一方のメニューへ） */
.sa-pexit { margin: 0 0 40px; text-align: center; }
.sa-pexit__text { margin: 0 0 20px; font-family: var(--sa-font-serif); font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--sa-text); }
.sa-pexit__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sa-pexit__link { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 240px;
  padding: 16px 24px; border: 1px solid var(--sa-gold); color: var(--sa-text); text-decoration: none;
  transition: background-color .3s ease, color .3s ease; }
.sa-pexit__link:hover { background: var(--sa-gold); color: #fff; }
.sa-pexit__link:hover .sa-pexit__sub { color: #FFFFFFCC; }
.sa-pexit__link--primary { background: var(--sa-gold); color: #fff; }
.sa-pexit__link--primary .sa-pexit__sub { color: #FFFFFFCC; }
.sa-pexit__link--primary:hover { background: #fff; color: var(--sa-text); }
.sa-pexit__link--primary:hover .sa-pexit__sub { color: var(--sa-subtitle); }
.sa-pexit__label { font-family: var(--sa-font-serif); font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.sa-pexit__sub { font-family: var(--sa-font-body); font-size: 12px; color: var(--sa-subtitle); transition: color .3s ease; }

/* デザイン版（画像）のたたみ */
.sa-pfold { margin: 0 0 8px; text-align: center; }

/* 採用ページの応募ブロックの一文（フェーズ4.5で追加） */
.sa-rec2__note { margin: -8px 0 20px; font-family: var(--sa-font-body); font-size: 13px;
  line-height: 2; color: var(--sa-subtitle); }
.sa-pfold > summary { display: inline-block; padding: 10px 20px; cursor: pointer; list-style: none;
  border: 1px solid #DED6C9; font-family: var(--sa-font-body); font-size: 13px; letter-spacing: .06em; color: var(--sa-subtitle); }
.sa-pfold > summary::-webkit-details-marker { display: none; }
.sa-pfold > summary::after { content: " ＋"; }
.sa-pfold[open] > summary::after { content: " －"; }
.sa-pfold__list { margin-top: 32px; }

@media (max-width: 767px) {
  .sa-ptables { gap: 48px; }
  .sa-ptable__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sa-ptable__en { font-size: 48px; }
  .sa-ptable__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .sa-ptable__dd { text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .sa-ptable__price { font-size: 17px; }
  .sa-pfoot { padding: 20px 18px; }
  .sa-pexit__links { flex-direction: column; }
  .sa-pexit__link { min-width: 0; width: 100%; }
}

/* ==================================================================
 * 09. 料金一覧ページ  /price-list/
 *
 *  このページだけは制作会社が手書きしたHTMLとCSSでできています。
 *  中身を変えないほうが安全なので、そのまま写しました（クラス名も元のまま）。
 * ================================================================== */

.sa-plist-wrap { padding: 10px; }
.sa-plist-wrap > .sans-age-price-simple { width: 1140px; max-width: 100%; margin: 0 auto; }

.sans-age-price-simple{box-sizing:border-box;color:#fff;font-family:"Noto Serif JP","Yu Mincho","YuMincho",serif}
.sans-age-price-simple *{box-sizing:border-box}
.sans-age-price-simple__intro{position:relative;overflow:hidden;padding:92px 24px 78px;background:#fff;color:#403b38}
.sans-age-price-simple__intro::after{content:"";position:absolute;top:20px;right:max(5vw,40px);width:min(52vw,620px);height:190px;background:url("/wp-content/uploads/2025/04/hexagon03@2x.webp") center/contain no-repeat;opacity:.1}
.sans-age-price-simple__intro-inner{position:relative;z-index:1;width:min(100%,940px);margin:0 auto}
.sans-age-price-simple__intro h1{margin:0;font-family:"Poppins","Helvetica Neue",sans-serif;font-size:30px;font-weight:400;letter-spacing:.04em;line-height:1.2;padding:0;border:none;background:none}
.sans-age-price-simple__intro h1::before,.sans-age-price-simple__intro h1::after{content:none}
.sans-age-price-simple__list{padding:78px 24px 90px;background:#3b3734}
.sans-age-price-simple__list-inner{width:min(100%,900px);margin:0 auto}
/* 制作会社の指定は34pxですが、旧サイトではElementorのサイト設定（Marcellus 28px）がまさっていて、実際は28pxで出ています。旧サイトの見た目に合わせて28pxにしています。 */
.sans-age-price-simple__list-title{margin:0 0 52px;padding:0;color:#f5f1ed;font-family:"Marcellus";font-size:28px;font-weight:400;letter-spacing:.08em;line-height:1.5;border:none;background:none}
.sans-age-price-simple__list-title::before,.sans-age-price-simple__list-title::after{content:none}
.sans-age-price-simple__item{padding:0 0 54px}
.sans-age-price-simple__item+.sans-age-price-simple__item{padding-top:54px;border-top:1px solid rgba(255,255,255,.16)}
.sans-age-price-simple img.sans-age-price-simple__script{display:block!important;width:auto!important;max-width:100%!important;height:auto!important;margin:0 0 22px!important;object-fit:contain!important;object-position:left center!important;filter:sepia(1) saturate(1.3);opacity:.94}
.sans-age-price-simple img.sans-age-price-simple__script[src*="esthetic.webp"]{width:340px!important}
.sans-age-price-simple img.sans-age-price-simple__script[src*="nail.webp"]{width:212px!important}
.sans-age-price-simple__row{display:flex;align-items:center;gap:36px}
.sans-age-price-simple__photo{display:block;flex:0 0 190px;width:190px;max-width:190px;aspect-ratio:1.75/1;object-fit:cover}
.sans-age-price-simple__text{display:block;flex:1 1 auto;min-width:0;color:#eee8e3;font-size:16px!important;line-height:2!important;letter-spacing:.04em}
.sans-age-price-simple__text p{margin:0 0 20px}
.sans-age-price-simple__link{display:inline-block;color:#d7b53d!important;font-size:14px!important;font-weight:400!important;line-height:1.8!important;letter-spacing:.05em!important;text-decoration:underline!important;text-decoration-color:#a8892d!important;text-underline-offset:5px}
.sans-age-price-simple__link:hover{color:#ead273!important}
@media(max-width:767px){
.sans-age-price-simple__intro{padding:65px 22px 56px}
.sans-age-price-simple__intro::after{top:8px;right:-125px;width:390px;height:150px}
.sans-age-price-simple__intro h1{font-size:25px}
.sans-age-price-simple__list{padding:56px 20px 68px}
.sans-age-price-simple__list-title{margin-bottom:38px;font-size:28px}
.sans-age-price-simple__item{padding-bottom:42px}
.sans-age-price-simple__item+.sans-age-price-simple__item{padding-top:42px}
.sans-age-price-simple img.sans-age-price-simple__script{max-width:100%!important;height:auto!important;margin-bottom:16px!important}
.sans-age-price-simple__row{flex-direction:column;align-items:flex-start;gap:20px}
.sans-age-price-simple__photo{flex:0 0 auto;width:190px;max-width:100%}
.sans-age-price-simple__text{font-size:15px!important;line-height:1.9!important}
.sans-age-price-simple__text p{margin-bottom:16px}
.sans-age-price-simple__link{font-size:13px!important}
}

/* ==================================================================
 * 拡大表示（料金表の画像を押したとき）
 * ================================================================== */
.sa-zoom {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.88);
  opacity: 0;
  transition: opacity .25s ease;
}
.sa-zoom.is-in { opacity: 1; }
.sa-zoom img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}
.sa-zoom__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

/* ==================================================================
 * 10. 採用情報ページ  /recruit/
 * ================================================================== */

.sa-rec  { margin: 80px 0 0;   padding: 0; display: flex; align-items: center; justify-content: center; }
.sa-rec2 { margin: 0 0 160px;  padding: 0; display: flex; align-items: center; justify-content: center; }

.sa-rec__inner  { width: 830px; display: flex; flex-direction: column; gap: 20px; }
.sa-rec2__inner { width: 800px; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }

.sa-rec__head, .sa-rec2__head { margin: 96px 0 64px -80px; }   /* 旧サイトの 6rem 0 4rem -5rem */
.sa-rec__head h1,
.sa-rec2__head h3 {
  margin: 0;
  padding: 0;
  font-family: var(--sa-font-menu);
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  color: #333333;
  text-align: start;
  border: none;
  background: none;
}
.sa-rec__head h1::before,  .sa-rec__head h1::after,
.sa-rec2__head h3::before, .sa-rec2__head h3::after { content: none; }

.sa-rec__msg    { display: flex; flex-direction: column; gap: 20px; }
.sa-rec__photos { display: flex; flex-direction: row; gap: 20px; }
.sa-rec__photos > div { flex: 1 1 0; min-width: 0; }
.sa-rec__photos img   { display: block; width: 100%; height: auto; }

.sa-rec__text,
.sa-rec2__job {
  font-family: var(--sa-font-body);
  font-size: 16px;
  line-height: 40px;
  color: #333333;
}
.sa-rec__text p,
.sa-rec2__job p { margin: 0 0 14.4px; }
.sa-rec2__job   { display: flex; flex-direction: row; }

@media (max-width: 767px) {
  .sa-rec  { margin: 0; padding: 0 16px; }
  .sa-rec2 { margin: 32px 0 0;  padding: 0 16px; }
  .sa-rec__inner  { width: 100%; }
  .sa-rec2__inner { width: 100%; }
  .sa-rec__head, .sa-rec2__head { margin: 0; }
  .sa-rec__head h1 { font-size: 22px; line-height: 22px; }
  .sa-rec__photos  { flex-direction: column; }
}

/* ==================================================================
 * 11. 規約2ページ  /privacy-policy/  /terms-of-use/
 *
 *  中身は旧サイトから取り寄せた制作会社のHTML＋CSSをそのまま使っています
 *  （parts/pages/privacy-policy.php と terms-of-use.php）。
 *  ここは、旧テーマにあってSWELLにない指定だけを足しています。
 * ================================================================== */

/* 旧サイトは表の文字が本文より1割小さく、行の高さも1.5で出ます（旧テーマの既定）。
   SWELLは表の行の高さが2.0なので、そのままだと表が縦に伸びてしまいます。 */
.sans-age-privacy-policy table,
.sans-age-terms table { font-size: .9em; line-height: 1.5; }

/* 旧サイトは、この2ページだけ本文の上に14px・下に15pxのすき間が入ります（旧テーマの作り）。 */
.sa-main.sa-page--privacy-policy,
.sa-main.sa-page--terms-of-use { padding: 14px 0 15px; }

/* ==================================================================
 * 12. 404ページ（ページが見つかりません）
 *
 *  旧サイトの子テーマ style.css の 404 部分をそのまま写しています。
 *  （body に付くクラス名だけ SWELL 版に合わせて sa-page-404 に変えています）
 * ================================================================== */

/* Branded 404 page -------------------------------------------------------- */

.sans-age-404 {
	box-sizing: border-box;
	display: grid;
	min-height: clamp(720px, 82vh, 980px);
	overflow: hidden;
	padding: clamp(100px, 10vw, 150px) 24px clamp(70px, 8vw, 120px);
	position: relative;
	place-items: center;
	background: #fbfaf8;
	color: #302a28;
	text-align: center;
}

.sans-age-404__inner {
	box-sizing: border-box;
	width: min(100%, 1080px);
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 2;
}

.sans-age-404__stage {
	display: grid;
	height: clamp(360px, 43vw, 560px);
	margin-top: 0;
	place-items: center;
	position: relative;
}

.sans-age-404__number {
	margin: 0;
	color: transparent;
	font-family: "Bodoni 72", Didot, "Times New Roman", serif;
	font-size: clamp(420px, 52vw, 820px);
	font-weight: 400;
	left: 50%;
	letter-spacing: -0.08em;
	line-height: 0.75;
	opacity: 0.72;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scaleX(0.78);
	white-space: nowrap;
	-webkit-text-stroke: 2px rgba(48, 42, 40, 0.34);
	text-stroke: 2px rgba(48, 42, 40, 0.34);
	user-select: none;
	z-index: 0;
}

.sans-age-404__copy {
	box-sizing: border-box;
	position: relative;
	width: min(19vw, 220px);
	z-index: 2;
}

.sans-age-404__motif {
	background-image: url("../../uploads/2025/04/hexagon03@2x.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: clamp(170px, 20vw, 300px);
	opacity: 0.18;
	pointer-events: none;
	position: absolute;
	width: clamp(420px, 46vw, 760px);
	z-index: 1;
}

.sans-age-404__motif--top {
	right: -14%;
	top: -5%;
	transform: rotate(-7deg);
}

.sans-age-404__motif--bottom {
	bottom: -5%;
	left: -15%;
	transform: rotate(174deg);
}

.sans-age-404__eyebrow {
	margin: 0 0 14px;
	color: #9d7c28;
	font-family: "Marcellus", serif;
	font-size: 20px;
	letter-spacing: 0.12em;
	line-height: 1.3;
}

.sans-age-404__title {
	margin: 0 0 -16px;
	color: #302a28;
	font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
	font-size: clamp(27px, 3.4vw, 40px);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.5;
	position: relative;
	z-index: 3;
}

.sans-age-404__message {
	margin: 0 auto;
	color: #675e59;
	font-size: 14px;
	line-height: 1.8;
}

.sans-age-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: clamp(16px, 2vw, 28px);
	position: relative;
	z-index: 3;
}

.sans-age-404__button {
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 220px;
	width: 220px;
	min-width: 210px;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 1px solid #302a28;
	border-radius: 999px;
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Elementor's site-wide link typography has higher selector specificity. */
.sans-age-404__button {
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.sans-age-404__title {
	font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
	font-size: clamp(27px, 3.4vw, 40px);
}

.sans-age-404__button--primary,
.sans-age-404__button--primary:visited {
	background: #302a28;
	color: #fff;
}

.sans-age-404__button--secondary,
.sans-age-404__button--secondary:visited {
	background: transparent;
	color: #302a28;
}

.sans-age-404__button:hover,
.sans-age-404__button:focus-visible {
	background: #8d796e;
	border-color: #8d796e;
	color: #fff;
}

.sans-age-404__button:focus-visible,
.sans-age-404__contact a:focus-visible {
	outline: 2px solid #302a28;
	outline-offset: 4px;
}

.sans-age-404__contact {
	margin: 30px 0 0;
	color: #675e59;
	font-size: 14px;
	line-height: 1.8;
}

.sans-age-404__contact a,
.sans-age-404__contact a:visited {
	color: #302a28;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-decoration-color: #b6a299;
	text-underline-offset: 4px;
}

@media (max-width: 767px) {
	.sans-age-404 {
		min-height: 760px;
		padding: 150px 20px 76px;
	}

	.sans-age-404__inner {
		padding: 0;
	}

	.sans-age-404__stage {
		height: 340px;
		margin-top: 0;
	}

	.sans-age-404__number {
		font-size: clamp(280px, 98vw, 390px);
		letter-spacing: -0.1em;
		opacity: 0.6;
		-webkit-text-stroke-width: 1px;
		text-stroke-width: 1px;
	}

	.sans-age-404__motif {
		height: 150px;
		opacity: 0.16;
		width: 390px;
	}

	.sans-age-404__motif--top {
		right: -44%;
		top: -6%;
	}

	.sans-age-404__motif--bottom {
		bottom: -7%;
		left: -46%;
	}

	.sans-age-404__copy {
		width: 150px;
	}

	.sans-age-404__eyebrow {
		font-size: 15px;
		letter-spacing: 0.04em;
		margin-bottom: 10px;
		white-space: nowrap;
	}

	.sans-age-404__title {
		font-size: 27px;
		letter-spacing: 0.05em;
		margin-bottom: -12px;
	}

	.sans-age-404__message {
		font-size: 12px;
		line-height: 1.75;
	}

	.sans-age-404__desktop-break {
		display: none;
	}

	.sans-age-404__actions {
		flex-direction: column;
		margin-top: 18px;
	}

	.sans-age-404__button {
		flex-basis: auto;
		width: 100%;
		min-width: 0;
	}
}

/* ==================================================================
 * 13. お問い合わせページ  /contact/
 *
 *  旧サイトは Elementor Pro のフォーム、SWELL版は Contact Form 7 です。
 *  部品が違うので、見た目（幅・高さ・余白）を旧サイトの実測値に合わせています。
 * ================================================================== */

.sa-ct { margin: 80px 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.sa-ct__inner {
  position: relative;
  width: 800px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sa-ct__head { margin: 96px 0 64px -80px; }
.sa-ct__head h1 {
  margin: 0;
  padding: 0;
  font-family: var(--sa-font-menu);
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  color: #333333;
  text-align: start;
  border: none;
  background: none;
}
.sa-ct__head h1::before, .sa-ct__head h1::after { content: none; }

.sa-ct__deco {
  position: absolute;
  top: -50px;
  right: -165px;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}
.sa-ct__deco img { width: 100%; height: auto; opacity: 0.15; }

/* --- フォーム本体（Contact Form 7）--- */
.sa-ct__form .wpcf7 { margin: 0; }
.sa-ct__form form.wpcf7-form { margin: 0; }
.sa-cf__row { margin: 0 0 40px; }
.sa-cf__label {
  display: block;
  width: fit-content;
  margin: 0;
  padding: 0 0 5px;
  font-family: var(--sa-font-system);
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  color: #333333;
}
/* 必須の項目には旧サイトと同じ赤い米印を付けます */
.sa-cf__label--req::after { content: "*"; padding-left: 3.2px; color: #ff0000; }
.sa-ct__form .wpcf7-form-control-wrap { display: block; }
.sa-ct__form input.sa-cf__input,
.sa-ct__form textarea.sa-cf__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sa-font-system);
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  color: #1f2124;
  background: #ffffff;
  border: 1px solid #8b8b8b;
  border-radius: 3px;
}
.sa-ct__form input.sa-cf__input     { height: 40px; padding: 8px 16px; }
.sa-ct__form textarea.sa-cf__textarea { height: 138px; padding: 5px 14px; resize: vertical; }
/* お名前・メールアドレスは旧サイトと同じく本文幅の60% */
.sa-cf__row--60 .wpcf7-form-control-wrap { width: calc(60% - 8px); }

.sa-cf__privacy {
  margin: 0 0 40px;
  font-family: var(--sa-font-system);
  font-size: 12px;
  line-height: 21.6px;
  letter-spacing: .02em;
  color: #675e59;
}
.sa-cf__privacy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #9d7c28;
  text-underline-offset: 3px;
}
.sa-cf__submit { position: relative; margin: 0; }
.sa-ct__form input.sa-cf__button {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 3px;
  background: #3c3835;
  color: #ffffff;
  font-family: var(--sa-font-system);
  font-size: 15px;
  line-height: 15px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}
.sa-ct__form input.sa-cf__button:hover { opacity: .88; }
/* 送信中のくるくる印は、高さが増えないよう重ねて置きます */
.sa-ct__form .wpcf7-spinner { position: absolute; top: 8px; right: 16px; margin: 0; }
/* Contact Form 7 が出す案内文（空のときは場所を取らないように） */
.sa-ct__form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.8;
}
.sa-ct__form .wpcf7-response-output:empty { display: none; margin: 0; padding: 0; border: 0; }
.sa-ct__form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12px; line-height: 1.8; }
/* 迷惑メール対策プラグインが足す「おとり」の入力欄は画面外に隠します */
.sa-ct__form .altEmail_container {
  position: absolute !important;
  left: -9999px !important;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 1024px以下では、旧サイトと同じく飾りの六角形が左端から右へはみ出します */
@media (max-width: 1024px) {
  .sa-ct__deco { left: 0; width: auto; max-width: 100vw; }
}

@media (max-width: 767px) {
  .sa-ct        { margin: 0; padding: 0 16px; }
  .sa-ct__inner { width: 100%; }
  .sa-ct__head  { margin: 0; }
  .sa-ct__deco  { left: auto; right: -165px; width: auto; max-width: 100vw; }
  .sa-cf__row--60 .wpcf7-form-control-wrap { width: 100%; }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 12. 予約バー（フェーズ4.5で追加・旧サイトにはありません）
 *
 *  PCは右下に小さく、スマホは画面の下いっぱいに出ます。
 *  ファーストビューを隠さないよう、少しスクロールしてから静かに出ます。
 *  出す・出さないは parts/reserve-bar.php と functions.php で切り替えます。
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.sa-rsv {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.sa-rsv.is-in { opacity: 1; visibility: visible; transform: none; }

.sa-rsv__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 190px;
  padding: 12px 16px;
  text-decoration: none;
  border: 1px solid var(--sa-gold);
  background: #FFFFFFF2;
  color: var(--sa-text);
  transition: background-color .3s ease, color .3s ease;
}
.sa-rsv__btn--web { background: var(--sa-gold); color: #fff; }
.sa-rsv__btn--web:hover { background: #fff; color: var(--sa-text); }
.sa-rsv__btn--tel:hover { background: var(--sa-gold); color: #fff; }
.sa-rsv__en {
  font-family: var(--sa-font-marcell);
  font-size: 11px;
  letter-spacing: .18em;
  line-height: 1;
  opacity: .8;
}
.sa-rsv__ja {
  font-family: var(--sa-font-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .sa-rsv {
    right: 0; left: 0; bottom: 0;
    flex-direction: row;
    gap: 0;
    transform: translateY(100%);
    box-shadow: 0 -2px 12px #00000014;
  }
  .sa-rsv__btn { width: 50%; padding: 10px 8px; border: 0; }
  .sa-rsv__btn--tel { border-right: 1px solid #FFFFFF66; background: #fff; }
  .sa-rsv__en { font-size: 10px; }
  .sa-rsv__ja { font-size: 14px; }
  /* バーの分だけフッターの下に余白を足して、最後の行が隠れないようにします */
  body { padding-bottom: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-rsv { transition: none; }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 13. 動きと手触り（フェーズ4.5で追加・旧サイトにはありません）
 *
 *  考え方：急がない。distance は小さく、時間は長く。
 *  手書きの大見出しは「いま書かれた」ように左から現れます。
 *  動きが苦手な方の設定（prefers-reduced-motion）では、すべて止まります。
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

:root {
  --sa-ease: cubic-bezier(.22, .61, .36, 1); /* 最後にすっと止まる曲線 */
}

/* ---- 13-1. 手書きの大見出しが、左から書かれるように現れる ----
   上下を大きめに外して、Qwigleyの長い払いが切れないようにしています。 */
.sa-write {
  clip-path: inset(-40% 100% -40% 0);
  transition: clip-path 1.3s var(--sa-ease);
}
.sa-write.is-in { clip-path: inset(-40% -0.25em -40% 0); }

/* ---- 13-2. ファーストビューの入場 ----
   英字が書かれ、そのあと日本語が下から静かに上がってきます。 */
/* ファーストビューの言葉は、2026-09-03 から「白い幕 → 横書き → 縦に折れて席につく」に
   作り直しました。そちらの指定は上の「1-0.」にまとまっています。 */
@keyframes sa-write-in {
  from { clip-path: inset(-40% 100% -40% 0); }
  to   { clip-path: inset(-40% -0.25em -40% 0); }
}
@keyframes sa-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 13-3. 料金表は、上から順に静かに出る ---- */
.sa-ptable { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--sa-ease), transform 1s var(--sa-ease); }
.sa-ptable.is-in { opacity: 1; transform: none; }
.sa-ptables .sa-ptable:nth-child(2) { transition-delay: .12s; }
.sa-ptables .sa-ptable:nth-child(3) { transition-delay: .24s; }
.sa-ptables .sa-ptable:nth-child(4) { transition-delay: .36s; }
.sa-pfoot, .sa-pexit { transition: opacity 1s var(--sa-ease), transform 1s var(--sa-ease); transform: translateY(12px); }
.sa-pfoot.is-in, .sa-pexit.is-in { transform: none; }

/* ---- 13-4. 横メニューのホバー ----
   金色の細い線が、左から伸びます。いま見ているページには最初から出ています。 */
.sa-yoko .menu-item > a { position: relative; }
.sa-yoko .menu-item > a::before {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 6px;
  height: 1px;
  background: var(--sa-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--sa-ease);
}
.sa-yoko .menu-item > a:hover::before,
.sa-yoko .menu-item > a:focus-visible::before { transform: scaleX(1); }
.sa-yoko .menu-item.current-menu-item > a::before,
.sa-yoko .menu-item.current_page_item > a::before { transform: scaleX(1); opacity: .45; }

/* 全画面メニューのリンクも同じ手ざわりに */
.sa-fsmenu__nav a { transition: color .4s var(--sa-ease), letter-spacing .4s var(--sa-ease); }
.sa-fsmenu__nav a:hover { letter-spacing: .06em; }

/* ---- 13-5. 料金表の画像 ---- */
.sa-price__zoom { overflow: hidden; }
.sa-price__zoom img { transition: transform .8s var(--sa-ease); }
.sa-price__zoom:hover img { transform: scale(1.012); }

/* ---- 13-6. 押したときの手ごたえ ---- */
.sa-pexit__link, .sa-rsv__btn, .sa-pfold > summary { transition: background-color .35s var(--sa-ease), color .35s var(--sa-ease), transform .12s ease-out, border-color .35s var(--sa-ease); }
.sa-pexit__link:active, .sa-rsv__btn:active, .sa-pfold > summary:active { transform: translateY(1px); }

/* ---- 13-7. キーボードで操作する方に、いまどこにいるかを見せる ---- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sa-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sa-write, .sa-write.is-in { clip-path: none; transition: none; }
  .sa-ptable, .sa-pfoot, .sa-pexit { opacity: 1; transform: none; transition: none; }
  .sa-yoko .menu-item > a::before { transition: none; }
  .sa-price__zoom img, .sa-price__zoom:hover img { transition: none; transform: none; }
  .sa-pexit__link:active, .sa-rsv__btn:active, .sa-pfold > summary:active { transform: none; }
}


/* ============================================================
   §14 角丸（2026/09/03）
   写真と動画にだけ、軽い角丸をつけます。

   つけないもの（意図的）
   - ロゴ・文字画像・飾りの線画（透明なPNG/SVG）
     → もともと四角い枠がないので、角を丸めても見た目は変わらず、
       図柄の角を欠けさせる危険だけが残ります。
   - 各ページの上の大きな写真（.sa-phead__photo）
     → 画面の左右いっぱいに広がっているため、角を丸めると
       「画面が割れている」ように見えます。

   大きさの決め方
   - 写真は 8px、ボタンや入力欄は 4px。
     小さいものに同じ数値を使うと丸すぎて見えるので、半分に。
     数値は下の2つを変えるだけで全部そろって変わります。
   ============================================================ */
:root{
  --sa-r-img: 8px;   /* 写真・動画 */
  --sa-r-ui:  4px;   /* ボタン・入力欄 */
}

/* --- 写真と動画 --- */
.sa-top__col--1 img,
.sa-top__col--3 img,
.sa-top__movie,
.sa-top__movie video,
.sa-concept__photo img,
.sa-menu__photo,
.sa-menu__photo img,
.sa-mcard__photo,
.sa-facial__img,
.sa-sprof__photo img,
.sa-saccess__video,
.sa-saccess__video video,
.sans-age-price-simple__row img,
.sa-pfold img,
.sa-fade--slow img{
  border-radius: var(--sa-r-img);
}

/* カーソルで少し大きくなる写真は、はみ出しを角丸のかたちで切る */
.sa-top__movie,
.sa-menu__photo,
.sa-mcard__photo,
.sa-facial__img,
.sa-saccess__video{
  overflow: hidden;
}

/* --- 押すもの・書き込むもの --- */
.sa-rsv__btn,
.sa-pexit__link,
.sa-pfold > summary,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea.wpcf7-textarea,
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form input[type="submit"],
.wpcf7-form button{
  border-radius: var(--sa-r-ui);
}


/* ============================================================
   §15 料金表をグループごとに畳む（2026/09/03）

   エステは37件、ネイルは21件あります。
   一度に全部見えていると、読みはじめる前に「多い」と感じてしまう。
   見出しを押すと開く形にして、はじめは全部閉じておきます。

   ・HTMLは畳む前とまったく同じで、価格はすべてページの中にあります。
     GoogleにもAIにも全部読めます。畳むのは見た目だけの話です。
   ・パソコンでも同じく、はじめは全部閉じています。
     閉じているほうが1画面にジャンルが並び、目的の分類へ早く着けるためです。
   ============================================================ */
.sa-ptable.is-fold > .sa-ptable__head{
  cursor: pointer;
  position: relative;
  flex-wrap: wrap;
  /* 印を置く場所をあけておく（狭い画面では見出しが2〜3行に折り返すため、
     印は流れに乗せず、右端に固定します） */
  padding-right: 26px;
  transition: opacity .3s var(--sa-ease);
  -webkit-tap-highlight-color: transparent;
}
.sa-ptable.is-fold > .sa-ptable__head:hover{ opacity: .74; }
.sa-ptable.is-fold > .sa-ptable__head:focus-visible{
  outline: 1px solid var(--sa-gold); outline-offset: 6px;
}

/* 開く前に中身がわかるように、件数と最低価格を右に。
   開いたら役目を終えるので、すっと消えます（場所は残すので行はずれません） */
.sa-ptable__meta{
  margin-left: auto;
  font-family: var(--sa-font-body);
  font-size: 12px; letter-spacing: .06em;
  color: var(--sa-subtitle); white-space: nowrap;
  transition: opacity .3s var(--sa-ease), transform .3s var(--sa-ease);
}
.sa-ptable.is-open > .sa-ptable__head .sa-ptable__meta{
  opacity: 0; transform: translateX(8px);
}

/* 開いているかどうかの印。細い十字が、開くと横棒になる */
.sa-ptable__mark{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px;
}
.sa-ptable__mark::before,
.sa-ptable__mark::after{
  content: ''; position: absolute; left: 0; top: 5px;
  width: 11px; height: 1px; background: var(--sa-gold);
  transition: transform .45s var(--sa-ease);
}
.sa-ptable__mark::after{ transform: rotate(90deg); }
.sa-ptable.is-open > .sa-ptable__head .sa-ptable__mark::after{ transform: rotate(0deg); }

/* 開け閉め。高さを決め打ちせずに、0fr→1fr で伸ばす */
.sa-ptable.is-fold .sa-ptable__body{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--sa-ease);
}
.sa-ptable.is-fold.is-open .sa-ptable__body{ grid-template-rows: 1fr; }
.sa-ptable__bodyin{ overflow: hidden; min-height: 0; }

/* 畳んでいるときは、見出しどうしの間を詰める。
   はじめは全部閉じているので、1画面にジャンルが並び、そのまま目次として使えます */
.sa-ptables:has(.sa-ptable.is-fold){ gap: 40px; }

@media (max-width: 899px){
  .sa-ptable__meta{ font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
  .sa-ptable.is-fold .sa-ptable__body,
  .sa-ptable__mark::before,
  .sa-ptable__mark::after{ transition: none; }
}


/* ============================================================
   §16 手書き見出しを「行ごとに、字の切れ目の呼吸で」書く（2026/09/03）

   §13 の書き出しは、箱ぜんたいに1枚の幕をかけて等速で引くものでした。
   そのため 2行あると、1行目を書き終わる前に2行目が出はじめます。
   人は1行目を書き終えてから2行目にいくので、そこが不自然でした。

   ここでは JavaScript が行ごとの入れものに分け、
   幕の「進む速さ」を字の切れ目に合わせます（sans-age.js の initWriteRhythm）。
   文字そのものは切らないので、つながった筆記体の連結は保たれます。

   ※ 本物の書き順（ペンが上下する）は、見出しを1つずつ手で線に
      起こす必要があるため、切り替え後の宿題（C案）としています。
   ============================================================ */
.sa-write--split{ clip-path: none !important; transition: none !important; }

/* 行のかたまり。JavaScript が作る入れもの（既にある要素にも同じ役をさせます） */
.sa-wblock{ display: block; }

/* 幕は「文字のある範囲だけ」を動きます。
   --sa-l  … 文字の左端（その要素の箱に対する割合）
   --sa-r0 … 書きはじめ（幕を右いっぱいまで閉じた位置）
   --sa-r1 … 書きおわり（文字の右端の少し外。払いを切らないよう 0.25文字ぶん外へ）
   こうすると、右寄せの行でも、幕が左の空白を無駄に滑りません。 */
.sa-wline{
  clip-path: inset(-40% var(--sa-r0, 100%) -40% var(--sa-l, 0%));
  transition: clip-path var(--sa-d, 1.3s) var(--sa-ease) var(--sa-delay, 0s);
}
.sa-write--split.is-in .sa-wline{
  clip-path: inset(-40% var(--sa-r1, -0.25em) -40% var(--sa-l, 0%));
}

@media (prefers-reduced-motion: reduce){
  .sa-wline{ clip-path: none !important; transition: none !important; }
}


/* ============================================================
   §17 日本語の折り返しを文節で（2026/09/03）

   日本語は、指定しないと**どこでも**折り返します。
   採用ページの本文では「施術」が「施／術」に、
   「一人ひとり」が「一人／ひとり」に割れていました。

   `word-break: auto-phrase` は、ブラウザに文節を見つけさせて
   そこで折り返させる指定です。長い本文にも安全に使えます
   （§13 の `.sa-u` は短い見せ場の文だけに使う手で、用途が違います）。

   対応していないブラウザでは、この一行はただ無視されるだけで、
   これまでどおりの折り返しに戻ります。害はありません。

   `text-wrap: pretty` は、最後の行に1文字だけ残るような
   みっともない折り返しを避けてくれます。
   ============================================================ */
/* 2026/09/09 追記：本文だけでなく、見出し・キャッチコピーを含めた
   ヘッダーの横メニュー・フッターも含めた、ページぜんたいに効かせます。word-break と text-wrap は親から子へ受け継がれる
   ため、.sa-main に一度だけ書けば中のすべての文字に届きます。
   （§13 の .sa-u のように、自分で word-break を持っている要素はそのまま優先されます）
   直前の状態：キャッチコピーで「LED脱／毛」「肌育ピー／リング」のように
   語の途中で割れていました。 */
body,
.sa-main p,
.sa-main li,
.sa-main dd,
.sa-main dt,
.sa-main figcaption,
.sa-phead__lead,
.sa-ptable__lead,
.sa-ptable__sub,
.sa-ptable__name,
.sa-pfoot li,
.sa-pexit__text,
.sa-rec__head{
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* どうしても語の途中で割れてしまう短い語だけ、名指しで折り返しを止めます。
   （例：「そのため」「取り入れて」。長い語には使わないこと＝画面からはみ出します） */
.sa-kw {
  white-space: nowrap;
}


/* ============================================================
   §18 安心して来られる理由（トップ・Concept のすぐ後ろ）
   ------------------------------------------------------------
   左の列に写真、右の列に文字。写真がない項目は左の列がそのまま余白に
   なります。文字の始まる位置は写真のあるなしに関係なく常に同じなので、
   写真が増えても組み直しは要りません（スマホでは空の列は出しません）。
   枠は Concept／スタッフ紹介と同じ 1000px に合わせています。
   ============================================================ */
.sa-reason{ width:1000px; max-width:min(100%, 1000px); margin:0 auto;
  padding:40px 0 0; box-sizing:border-box; }
.sa-reason__inner{ width:100%; margin-right:48px; padding:10px; box-sizing:border-box; }

.sa-reason__en{ margin:0 0 10px; font-family:var(--sa-font-marcell); font-size:12px;
  letter-spacing:.18em; color:var(--sa-subtitle); }
.sa-reason__head{ margin:0 0 10px; font-family:var(--sa-font-serif); font-size:24px; font-weight:700;
  letter-spacing:.04em; line-height:1.5; color:var(--sa-text); }
.sa-reason__lead{ margin:0 0 34px; font-family:var(--sa-font-body); font-size:14px;
  line-height:1.9; color:var(--sa-subtitle); }

.sa-reason__list{ list-style:none; margin:0; padding:0; }
.sa-reason__item{ display:grid; grid-template-columns:320px 1fr; column-gap:40px;
  align-items:start; padding:32px 0; border-top:1px solid rgba(60,56,53,.10); }
.sa-reason__item:last-child{ border-bottom:1px solid rgba(60,56,53,.10); }
.sa-reason__col{ min-width:0; }
/* 写真のある行は、文字を写真の高さのまんなかに置く（下に大きな空きができないように） */
.sa-reason__item.is-photo{ align-items:center; }
.sa-reason__body{ min-width:0; }

/* 写真（角丸は §14 の --sa-r-img に合わせる。拡大しないので overflow は保険） */
.sa-reason__photo{ overflow:hidden; border-radius:var(--sa-r-img); }
.sa-reason__photo img{ display:block; width:100%; height:auto; border-radius:var(--sa-r-img); }

.sa-reason__no{ margin:0 0 10px; font-family:var(--sa-font-marcell); font-size:12px;
  letter-spacing:.16em; color:var(--sa-gold); }
.sa-reason__t{ margin:0 0 8px; font-family:var(--sa-font-serif); font-size:17px; font-weight:700;
  line-height:1.7; color:var(--sa-text); word-break:auto-phrase; text-wrap:pretty; }
.sa-reason__d{ margin:0; font-family:var(--sa-font-body); font-size:14px; line-height:2;
  color:var(--sa-secondary); word-break:auto-phrase; text-wrap:pretty; }
.sa-reason__note{ margin:28px 0 0; font-family:var(--sa-font-body); font-size:13px; line-height:2;
  color:var(--sa-subtitle); word-break:auto-phrase; text-wrap:pretty; }

@media (max-width:900px){
  .sa-reason{ padding:24px 0 0; }
  .sa-reason__inner{ margin-right:0; }
  .sa-reason__item{ grid-template-columns:220px 1fr; column-gap:28px; }
}
@media (max-width:767px){
  .sa-reason__head{ font-size:21px; }
  .sa-reason__item{ grid-template-columns:1fr; row-gap:16px; padding:26px 0; }
  /* 写真のない項目でスマホに空の列が残らないように */
  .sa-reason__item:not(.is-photo) .sa-reason__col{ display:none; }
}


/* ============================================================
   §19 2つの扉（エステ／ネイル・トップ・Concept のすぐ後ろ）
   ------------------------------------------------------------
   合意した設計「入口は分けて、出口でつなぐ」の入口側。
   左が肌（エステ）、右が指先（ネイル）＝サロンの一行を絵にしています。
   色は増やしていません（業者のカラーキットにあるエステ #E288D9 /
   ネイル #005ED6 は、このサイトの静けさとぶつかるため使っていません）。
   枠は Concept／スタッフ紹介と同じ 1000px。
   ============================================================ */
.sa-doors{ width:1000px; max-width:min(100%, 1000px); margin:0 auto;
  padding:40px 0 0; box-sizing:border-box; }
.sa-doors__inner{ width:100%; margin-right:48px; padding:10px; box-sizing:border-box; }

.sa-doors__en{ margin:0 0 10px; font-family:var(--sa-font-marcell); font-size:12px;
  letter-spacing:.18em; color:var(--sa-subtitle); }
.sa-doors__head{ margin:0 0 10px; font-family:var(--sa-font-serif); font-size:24px; font-weight:700;
  letter-spacing:.04em; line-height:1.5; color:var(--sa-text); }
.sa-doors__lead{ margin:0 0 34px; font-family:var(--sa-font-body); font-size:14px;
  line-height:1.9; color:var(--sa-subtitle); }

.sa-doors__grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }

.sa-door{ min-width:0; }
.sa-door__main{ display:block; text-decoration:none; color:inherit; }
.sa-door__photo{ display:block; overflow:hidden; border-radius:var(--sa-r-img);
  aspect-ratio:4 / 3; }
.sa-door__photo img{ display:block; width:100%; height:100%; object-fit:cover;
  border-radius:var(--sa-r-img); transition:transform .8s var(--sa-ease); }
.sa-door__main:hover .sa-door__photo img,
.sa-door__main:focus-visible .sa-door__photo img{ transform:scale(1.012); }

.sa-door__en{ display:block; margin:18px 0 4px; font-family:var(--sa-font-marcell);
  font-size:12px; letter-spacing:.18em; color:var(--sa-subtitle); }
.sa-door__name{ display:block; font-family:var(--sa-font-serif); font-size:22px; font-weight:700;
  letter-spacing:.06em; line-height:1.4; color:var(--sa-text); }
.sa-door__text{ margin:12px 0 0; font-family:var(--sa-font-body); font-size:14px; line-height:2;
  color:var(--sa-secondary); word-break:auto-phrase; text-wrap:pretty; }

/* 2つのリンク（メニュー／料金）。金色の矢印がホバーで少し伸びます */
.sa-door__links{ margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.sa-door__links a{ position:relative; padding-right:22px; text-decoration:none;
  font-family:var(--sa-font-body); font-size:13px; letter-spacing:.04em;
  color:var(--sa-text); transition:color .3s var(--sa-ease); }
.sa-door__links a::after{ content:''; position:absolute; right:0; top:50%;
  width:14px; height:1px; background:var(--sa-gold);
  transition:width .35s var(--sa-ease), right .35s var(--sa-ease); }
.sa-door__links a:hover, .sa-door__links a:focus-visible{ color:var(--sa-gold); }
.sa-door__links a:hover::after, .sa-door__links a:focus-visible::after{ width:20px; right:-6px; }

/* Instagram だけは外に出るリンクなので、矢印を控えめな灰色にして
   サイト内の2本（メニュー・料金）を主役のままにしています */
.sa-door__links a.is-sns{ color:var(--sa-subtitle); }
.sa-door__links a.is-sns::after{ background:var(--sa-subtitle); }
.sa-door__links a.is-sns:hover, .sa-door__links a.is-sns:focus-visible{ color:var(--sa-text); }
.sa-door__links a.is-sns:hover::after, .sa-door__links a.is-sns:focus-visible::after{ background:var(--sa-text); }

/* 出口でつなぐ一行（クロスセル） */
.sa-doors__bridge{ margin:36px 0 0; padding:20px 0 0; border-top:1px solid rgba(60,56,53,.10);
  font-family:var(--sa-font-body); font-size:14px; line-height:2; color:var(--sa-secondary);
  word-break:auto-phrase; text-wrap:pretty; }
.sa-doors__bridge strong{ font-weight:700; color:var(--sa-text); }

@media (max-width:900px){
  .sa-doors{ padding:24px 0 0; }
  .sa-doors__inner{ margin-right:0; }
  .sa-doors__grid{ gap:28px; }
  .sa-door__name{ font-size:20px; }
}
@media (max-width:767px){
  .sa-doors__head{ font-size:21px; }
  .sa-doors__grid{ grid-template-columns:1fr; gap:40px; }
}

/* ------------------------------------------------------------
   §20 予約の前によくいただく質問

   料金表と同じ「たたむ」考え方です。ただし料金表はJSで畳みますが、
   ここは最初から閉じた見た目にしたいので、
   ・HTMLとCSSの初期状態は「全部ひらいている」
   ・JSが動いたときだけ .is-js が付いて畳まれる
   という順にしてあります。JSが止まっても答えは全部読めますし、
   検索エンジンとAIにも文章がそのまま届きます。
------------------------------------------------------------ */
.sa-faq{ width:1000px; max-width:min(100%,1000px); margin:0 auto; padding:56px 0 0; box-sizing:border-box; }
.sa-faq__en{ font-family:var(--sa-font-marcell); font-size:12px; letter-spacing:.16em; color:var(--sa-gold); margin:0 0 10px; }
.sa-faq__ttl{ font-size:22px; font-weight:500; letter-spacing:.04em; margin:0 0 6px; }
.sa-faq__lead{ font-size:14px; color:var(--sa-subtitle); margin:0; }
.sa-faq__list{ margin:24px 0 0; border-top:1px solid rgba(60,56,53,.10); }
.sa-faq__item{ border-bottom:1px solid rgba(60,56,53,.10); }
.sa-faq__q{ display:flex; align-items:center; gap:20px; width:100%; margin:0; padding:20px 0; background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:default; }
.sa-faq.is-js .sa-faq__q{ cursor:pointer; }
.sa-faq__qt{ flex:1 1 auto; font-size:15.5px; letter-spacing:.02em; line-height:1.7; }
.sa-faq__mark{ display:none; position:relative; flex:0 0 auto; width:12px; height:12px; }
.sa-faq.is-js .sa-faq__mark{ display:block; }
.sa-faq__mark::before,.sa-faq__mark::after{ content:''; position:absolute; left:0; top:50%; width:12px; height:1px; background:var(--sa-gold); transition:transform .45s var(--sa-ease); }
.sa-faq__mark::after{ transform:rotate(90deg); }
.sa-faq__item.is-open .sa-faq__mark::after{ transform:rotate(0deg); }
.sa-faq__a{ display:grid; grid-template-rows:1fr; }
/* 読み込みの瞬間に「開いた状態から畳まれる」のが見えないよう、
   最初のたたみだけは動かさず、次の描画から動きを許可します */
.sa-faq.is-ready .sa-faq__a{ transition:grid-template-rows .45s var(--sa-ease); }
.sa-faq.is-js .sa-faq__a{ grid-template-rows:0fr; }
.sa-faq.is-js .sa-faq__item.is-open .sa-faq__a{ grid-template-rows:1fr; }
.sa-faq__ain{ overflow:hidden; min-height:0; }
.sa-faq__ain p{ margin:0; padding:0 32px 24px 0; max-width:44em; font-size:14.5px; line-height:2.05; color:var(--sa-subtitle); }
@media (max-width:767px){
  .sa-faq{ padding:40px 0 0; }
  .sa-faq__ttl{ font-size:19px; }
  .sa-faq__q{ gap:14px; padding:18px 0; }
  .sa-faq__qt{ font-size:14.5px; }
  .sa-faq__ain p{ padding:0 0 20px; font-size:13.5px; line-height:2; }
}


/* ==============================================================
   §21 いまのsans âge（Instagram）－ トップのいちばん下・フェーズ4.5で追加
   --------------------------------------------------------------
   中身は Smash Balloon（Instagram Feed）が出すマス目。
   その上から、このサイトの角丸・余白・所作をかぶせて、
   他の区画と同じ顔にしています。枠は 2つの扉・FAQ と同じ 1000px。
   ============================================================== */
.sa-insta{ width:1000px; max-width:min(100%,1000px); margin:0 auto; padding:56px 0 0; box-sizing:border-box; }
.sa-insta__inner{ width:100%; margin-right:48px; padding:10px; box-sizing:border-box; }

.sa-insta__en{ margin:0 0 10px; font-family:var(--sa-font-marcell); font-size:12px;
  letter-spacing:.18em; color:var(--sa-subtitle); }
.sa-insta__head{ margin:0 0 10px; font-family:var(--sa-font-serif); font-size:24px; font-weight:700;
  letter-spacing:.04em; line-height:1.5; color:var(--sa-text); }
.sa-insta__lead{ margin:0 0 34px; font-family:var(--sa-font-body); font-size:14px;
  line-height:1.9; color:var(--sa-subtitle); }

/* 片方の鍵が切れて1列になっても崩れないよう auto-fit にしています */
.sa-insta__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); gap:40px; }
.sa-insta__col{ min-width:0; }

.sa-insta__name{ margin:0 0 14px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.sa-insta__ttl{ font-family:var(--sa-font-serif); font-size:16px; font-weight:700;
  letter-spacing:.06em; color:var(--sa-text); }
.sa-insta__id{ font-family:var(--sa-font-body); font-size:12px; letter-spacing:.02em;
  color:var(--sa-subtitle); text-decoration:none; transition:color .3s var(--sa-ease); }
.sa-insta__id:hover, .sa-insta__id:focus-visible{ color:var(--sa-gold); }

/* 「もっと見る」は2つの扉のリンクと同じ、金色の線が伸びる所作 */
.sa-insta__more{ margin:16px 0 0; }
.sa-insta__more a{ position:relative; padding-right:22px; text-decoration:none;
  font-family:var(--sa-font-body); font-size:13px; letter-spacing:.04em;
  color:var(--sa-text); transition:color .3s var(--sa-ease); }
.sa-insta__more a::after{ content:''; position:absolute; right:0; top:50%;
  width:14px; height:1px; background:var(--sa-gold);
  transition:width .35s var(--sa-ease), right .35s var(--sa-ease); }
.sa-insta__more a:hover, .sa-insta__more a:focus-visible{ color:var(--sa-gold); }
.sa-insta__more a:hover::after, .sa-insta__more a:focus-visible::after{ width:20px; right:-6px; }

/* --- ここから、プラグインが出すマス目をサイトに合わせる --- */
.sa-insta #sb_instagram,
.sa-insta .sb_instagram_header{ padding:0 !important; width:100% !important; }
.sa-insta #sb_instagram #sbi_images{ padding:0 !important; }
.sa-insta #sb_instagram .sbi_item{ padding:4px !important; }
.sa-insta #sb_instagram .sbi_photo_wrap{ overflow:hidden; border-radius:var(--sa-r-img); }
.sa-insta #sb_instagram .sbi_photo{ display:block; border-radius:var(--sa-r-img);
  transition:transform .8s var(--sa-ease); }
.sa-insta #sb_instagram .sbi_photo img{ display:block; border-radius:var(--sa-r-img); }
.sa-insta #sb_instagram .sbi_item:hover .sbi_photo{ transform:scale(1.03); }
.sa-insta #sb_instagram .sbi_loader,
.sa-insta #sb_instagram .sbi_follow_btn,
.sa-insta #sb_instagram #sbi_load{ display:none !important; }

@media (max-width:900px){
  .sa-insta{ padding:24px 0 0; }
  .sa-insta__inner{ margin-right:0; }
  .sa-insta__grid{ gap:28px; }
}
@media (max-width:767px){
  .sa-insta__head{ font-size:21px; }
  .sa-insta__grid{ grid-template-columns:1fr; gap:36px; }
}


/* ★ 透明になっているあいだは触れないようにする。
   opacity:0 のままだとリンクは生きているので、ページの端の何もない場所を押すと
   見えないメニューを踏んでしまう。 */
.sa-tate-wrap.hidden{ pointer-events:none; }


/* ===========================================================================
   22. メニューの大小と色（2026-09-06 森川様のご指示）
   ・親項目は大文字＋字間ゆったり、子項目は小文字。大小で階層を見せています。
   ・色は業者の #333 / #555 / #007BFF（ブートストラップの青）から、
     サイトのトークンに置き換えました。
   ・後ろに置いて、上のルールを後勝ちで上書きしています。
   =========================================================================== */
:root{ --sa-menu-sub:#6E6660; }

.sa-yoko .menu-item > a,
.sa-tate .menu-item > a,
.sa-fsmenu .menu-item > a{
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sa-yoko .menu-item > a,
.sa-tate .menu-item > a{ color:var(--sa-text); }

.sa-yoko .sub-menu .menu-item > a,
.sa-tate .sub-menu .menu-item > a,
.sa-fsmenu .sub-menu .menu-item > a{
  text-transform:lowercase;
  letter-spacing:.02em;
}
.sa-yoko .sub-menu .menu-item > a,
.sa-tate .sub-menu .menu-item > a{ color:var(--sa-menu-sub); }
.sa-tate .sub-menu .menu-item > a:hover,
.sa-tate .sub-menu .menu-item > a:focus-visible{ color:var(--sa-text); }

/* 写真に乗せたときの動き。1.012倍は目に見えなかったので、
   Instagramのタイルと同じ 1.03倍にそろえました。
   スタッフの写真はリンクではないので、あえて付けていません。 */
.sa-door__main:hover .sa-door__photo img,
.sa-door__main:focus-visible .sa-door__photo img{ transform:scale(1.03); }
.sa-price__zoom:hover img{ transform:scale(1.03); }

@media (prefers-reduced-motion: reduce){
  .sa-door__main:hover .sa-door__photo img,
  .sa-door__main:focus-visible .sa-door__photo img,
  .sa-price__zoom:hover img{ transform:none; }
}


/* ===========================================================================
   23. ファーストビューの縦書きを左へ34px（2026-09-06）
   22でメニューを大文字にしたところ、CONTACT の C に縦書きの「く」が重なった。
   もともと2pxしか空いていなかった場所で、大文字にすると必ずぶつかる。
   英字と日本語の2本を、間隔を保ったまま同じ量だけ左へ寄せている。
   （スマホは .sa-open__ja-sp を使うので影響なし）
   =========================================================================== */
@media (min-width:768px){
  .sa-open__ja{ right:177px; }
  .sa-open__en-v{ right:215px; }
}


/* ===========================================================================
   24. 開幕を、終わったら奥へ（2026-09-06）
   .sa-open は開幕の幕（veil）を全面に出すため z-index:9000 で最前面にいる。
   ところが席についたあと（.is-done）もそのままなので、
   半透明のヘッダー帯（z:1000）や予約バーの「上」に縦書きが描かれてしまう。
   スクロール中に文字が予約バーを横切って見えるのはこれが原因。
   終わったら背景側（z:1）に下げる。位置も見た目も変わらない。
   =========================================================================== */
.sa-open.is-done{ z-index:1; }


/* 25. メニューの日本語ホバー（2026-09-07 森川様のご指示）
   英語と日本語を同じマスに重ね、カーソルを合わせると入れ替わります。
   マスの幅は「英語と日本語の広いほう」で決まるので、入れ替わっても
   メニューの並びは1pxも動きません。日本語は6文字以内に収めてあり、
   いちばん広い英語（PRICE LIST）を超えないため、幅は現状のままです。
   指にはホバーがないので、スマホ（767px以下）では日本語を出しません。 */
.sa-lb{ display:inline-grid; text-align:center; }
.sa-lb > span{ grid-area:1 / 1; transition:opacity .22s ease, transform .22s ease; }
/* 同じ場所で薄め合うと文字が重なって滲むので、上下に入れ替える */
.sa-lb__en{ transform:translateY(0); }
.sa-yoko .menu-item > a:hover  .sa-lb__en,
.sa-yoko .menu-item > a:focus-visible .sa-lb__en,
.sa-tate .menu-item > a:hover  .sa-lb__en,
.sa-tate .menu-item > a:focus-visible .sa-lb__en{ transform:translateY(-.34em); }
.sa-lb__ja{ transform:translateY(.34em); }
.sa-yoko .menu-item > a:hover  .sa-lb__ja,
.sa-yoko .menu-item > a:focus-visible .sa-lb__ja,
.sa-tate .menu-item > a:hover  .sa-lb__ja,
.sa-tate .menu-item > a:focus-visible .sa-lb__ja{ transform:translateY(0); }
.sa-lb__ja{ font-family:"Noto Sans JP", sans-serif; font-size:.86em;
  letter-spacing:.02em; text-transform:none; opacity:0; }
.sa-yoko .menu-item > a:hover  .sa-lb__en,
.sa-yoko .menu-item > a:focus-visible .sa-lb__en,
.sa-tate .menu-item > a:hover  .sa-lb__en,
.sa-tate .menu-item > a:focus-visible .sa-lb__en{ opacity:0; }
.sa-yoko .menu-item > a:hover  .sa-lb__ja,
.sa-yoko .menu-item > a:focus-visible .sa-lb__ja,
.sa-tate .menu-item > a:hover  .sa-lb__ja,
.sa-tate .menu-item > a:focus-visible .sa-lb__ja{ opacity:1; }
@media (max-width:767px){
  .sa-lb{ display:inline; }
  .sa-lb__ja{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .sa-lb > span{ transition:none; transform:none !important; }
}


/* ···········································································
   26. 開幕の署名（2026-09-07 森川様のご指示）
   言葉が右へ折れたあと、空いた真ん中にロゴを一筆で書きます。

   ・書き順は森川様がなぞってくださった7本を、そのまま座標にしています。
   ・ロゴの塗りは1pxも変えていません。上から「白い太線」でできた覆い（マスク）を
     少しずつ伸ばして、下にあるロゴを出しているだけです。線を描いてはいません。
   ・1360px以上のときだけ出します。それより狭い画面は真ん中が空く時間がないので、
     いまの開幕（4.9秒）のままにしてあります。

   時間割：2.60s 書きはじめ → 4.94s 書き上がり → 5.00s 幕がひらく → 6.20s 幕が消える
   （幕がひらく時刻だけ、もとの2.2sから5.0sへ移しています）
   ··········································································· */
.sa-open__sig{
  display:none;
  position:absolute; z-index:2;
  left:50%; top:calc(50vh - 20px);
  width:min(440px, 34vw);
  transform:translate(-50%, -50%);
  opacity:0;
}
@media (min-width:1360px){ .sa-open__sig{ display:block; } }

.sa-sig{ display:block; width:100%; height:auto; }
.sa-sig-a{ fill:#231815; }
.sa-sig-b{ fill:#b5b5b6; }
.sa-sig-c{ fill:#ede6d0; }
.sa-sig-a, .sa-sig-b, .sa-sig-c{ stroke-width:0px; }

/* 覆いの中だけにいる線。画面には出てきません */
.sa-sig__w{
  fill:none; stroke:#fff; stroke-width:5.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--L) var(--L); stroke-dashoffset:var(--L);
  opacity:0;
}
.sa-open.is-play .sa-open__sig{
  opacity:1;
  animation:sa-sig-out .8s ease 5.05s forwards;
}
.sa-open.is-play .sa-sig__w{
  animation:sa-sig-draw var(--d) cubic-bezier(.34,.02,.30,1) var(--b) forwards;
}
/* 右上の小さな印だけは、書き終わりにそっと置きます */
.sa-sig__ho{ opacity:0; }
.sa-open.is-play .sa-sig__ho{ animation:sa-soft-in .45s ease var(--ho) forwards; }

@keyframes sa-sig-draw{
  from{ stroke-dashoffset:var(--L); opacity:1; }
  to  { stroke-dashoffset:0;        opacity:1; }
}
@keyframes sa-sig-out{ to{ opacity:0; } }

/* 幕は、署名を書き終えてからひらきます（1360px以上のときだけ） */
@media (min-width:1360px){
  .sa-open.is-play .sa-open__veil{ animation-delay:5.00s; }
}

@media (prefers-reduced-motion: reduce){
  .sa-open__sig{ display:none !important; }
}


/* ···········································································
   27. 開幕のちらつき止め（2026-09-07 森川様のご指摘）
   幕（白い覆い）はJSが動いてから白くなっていたため、開いた直後に
   0.2秒ほどメニューと写真が見えてしまっていた。
   <head> で「今日この方に開幕を出すか」だけ先に判定し、出す場合は
   <html> に .sa-open-now が付く（functions.php）。その間だけ幕を白くしておく。
   幕がひらく動き（アニメーション）はこの指定より強いので、開幕の動きは変わらない。
   終わったら .is-done が付いて、ここは効かなくなる。
   ··········································································· */
html.sa-open-now .sa-open:not(.is-done) .sa-open__veil{
  opacity:1; visibility:visible;
}


/* ···········································································
   28. 下に開くメニューは、頭を揃える（2026-09-07 森川様のご指摘）
   §25で英語と日本語を同じマスに重ねたため、マスの幅が「広いほう」で決まる。
   横一列の親メニューは中央でよいが、下に開く子メニューは縦に並ぶので、
   中央だと facial / body / hair removal / detox の頭がばらばらに見えていた。
   子メニューの中だけ、左に揃える。
   ··········································································· */
/* マスの幅は「英語と日本語の広いほう」のまま。中の文字だけ、
   その並びの揃え方（横メニュー＝左、縦メニュー＝右、全画面＝中央）に合わせる。 */
.sub-menu .sa-lb{ text-align:inherit; }
.sub-menu .sa-lb > span{ justify-self:stretch; }


/* ···········································································
   29. お問い合わせページの公式LINE（2026-09-08 森川様のご指示）
   実際にいちばん使われている連絡手段が、いちばん連絡したい人が来るページに
   なかったので、フォームの手前に置いた。
   ボタンの形・大きさ・ホバーは予約バー（§ .sa-rsv__btn）と同じ言語にそろえ、
   LINEらしさは18pxの緑の印ひとつに閉じ込めている。
   ··········································································· */
.sa-ct__line{ margin:0 auto 46px; text-align:center; }
.sa-ct__line-lead{
  margin:0 0 20px; font-size:14px; line-height:2; color:var(--sa-secondary);
  word-break:keep-all; overflow-wrap:normal; line-break:strict;
}
.sa-ct__line-btns{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.sa-lbtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:190px; padding:12px 16px; text-decoration:none;
  border:1px solid var(--sa-gold); background:#FFFFFFF2; color:var(--sa-text);
  transition:background-color .3s ease, color .3s ease;
}
.sa-lbtn:hover{ background:var(--sa-gold); color:#fff; }
.sa-lbtn__mark{ display:block; width:18px; height:18px; margin-bottom:4px; }
.sa-lbtn__mark img{ display:block; width:100%; height:100%; }
.sa-lbtn__en{
  font-family:var(--sa-font-marcell); font-size:11px; letter-spacing:.18em;
  line-height:1; opacity:.8;
}
.sa-lbtn__ja{
  font-family:var(--sa-font-serif); font-size:15px; letter-spacing:.08em; line-height:1.5;
}
.sa-ct__line-note{ margin:16px 0 0; font-size:12px; color:var(--sa-subtitle); }

@media (max-width:600px){
  .sa-ct__line{ margin-bottom:36px; }
  .sa-ct__line-btns{ gap:12px; }
  .sa-lbtn{ width:calc(50% - 6px); padding:12px 8px; }
  .sa-lbtn__ja{ font-size:14px; }
}


/* ···········································································
   30. 次回予約の特典（2026-09-08 森川様のご指示）
   施術当日にその場で次回をお決めいただいた方への5%。これまで11か月前の
   Instagramのハイライトにしか書かれておらず、ほとんどの方が知らなかった。
   料金表の数字は下げず、条件つきの特典として、予約の導線のすぐ手前に置く。
   枠はアクセント（#D7C5AB）の細罫、数字だけを金にして、値引きの店に見えないようにしている。
   ··········································································· */
.sa-perk{
  max-width:640px; margin:34px auto 0; padding:22px 26px 20px;
  border:1px solid var(--sa-accent); background:#FFFFFFF2; text-align:center;
}
.sa-perk__en{
  margin:0 0 8px; font-family:var(--sa-font-marcell);
  font-size:11px; letter-spacing:.22em; line-height:1; color:var(--sa-gold);
}
.sa-perk__ja{
  margin:0; font-family:var(--sa-font-serif); font-size:16px; line-height:1.9;
  letter-spacing:.04em; color:var(--sa-text);
  word-break:keep-all; overflow-wrap:normal; line-break:strict;
}
.sa-perk__ja b{ font-weight:500; color:var(--sa-gold); }
.sa-perk__notes{ margin:12px 0 0; padding:0; list-style:none; }
.sa-perk__notes li{
  font-size:12px; line-height:1.9; color:var(--sa-subtitle);
  word-break:keep-all; overflow-wrap:normal; line-break:strict;
}
.sa-perk__notes li::before{ content:"※ "; }

@media (max-width:600px){
  .sa-perk{ margin-top:26px; padding:18px 16px 16px; }
  .sa-perk__ja{ font-size:15px; }
}


/*                                                             
   §31 スマホでのスタッフ紹介を「1人ずつ縦に」（2026/09/09）

   これまでスマホでは2人ずつ横に並べていたため、本文の欄が125pxしかなく、
   1行が7〜9文字にしかなりませんでした（詩のような見え方になっていた）。
   折り返しの指定をいくら整えても、欄が細ければ読みにくいままです。

   ここでは 599px 以下のときだけ、1人ぶんを横幅いっぱいに広げ、
   写真を左・お名前と肩書きを右、コメントはその下に横幅いっぱいで置きます。
   （600〜767px は これまでどおり2人ずつ。欄が300px前後あるので読めます）

   .sa-staff__body に display:contents を当てているのは、
   お名前・肩書き・コメントの3つを、入れものを飛び越えて
   そのまま格子（grid）の升目に置くためです。
                                                                */
@media (max-width: 599px) {
  .sa-staff       { flex-direction: column; flex-wrap: nowrap; gap: 40px; }
  .sa-staff__item { width: 100%; display: grid;
                    grid-template-columns: 132px 1fr; column-gap: 18px; }
  .sa-staff__photo    { grid-column: 1; grid-row: 1 / span 2; }
  .sa-staff__body     { display: contents; }
  .sa-staff__name     { grid-column: 2; grid-row: 1; align-self: end;   margin: 0; }
  .sa-staff__position { grid-column: 2; grid-row: 2; align-self: start; margin: 6px 0 0; }
  .sa-staff__text     { grid-column: 1 / -1; grid-row: 3; margin: 16px 0 0; }
}

/*                                                             
   §32 パソコンのスタッフ紹介を「上2人・下3人」に（2026/09/09）

   これまでは5人を横一列（`width:25%` の flex）に並べていたため
   本文の欄が168pxしかなく、1行11〜15文字でした。
   さらに flex は中身の量で縮み方が変わるので、肩書きの長い
   MIYUだけ写真が大きくなり、本文の始まる高さもずれていました。

   ここでは6本の柱（grid）を敷き、1人ぶんを2本分＝291pxに固定します。
   上の段は2本目と4本目から始めるので、2人がちょうど中央にそろいます。
   5人とも同じ幅・同じ写真の大きさ・同じ高さから本文が始まります。

   上の段は役職のあるお二人（MIYU／HITOMI）。
   並び順そのものは site-top.php の $sa_staff の並びで決まります。
                                                                */
/* 768〜899pxは横幅が足りず3列だと欄が細くなるので、これまでどおり2人ずつ。 */
@media (min-width: 768px) and (max-width: 899px) {
  .sa-staff       { flex-wrap: wrap; }
  .sa-staff__item { width: 45%; }
}

@media (min-width: 900px) {
  .sa-staff { display: grid; grid-template-columns: repeat(6, 1fr);
              column-gap: 30px; row-gap: 60px; align-items: start; }
  .sa-staff__item { width: auto; }
  .sa-staff__item:nth-child(1) { grid-column: 2 / span 2; grid-row: 1; }
  .sa-staff__item:nth-child(2) { grid-column: 4 / span 2; grid-row: 1; }
  .sa-staff__item:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
  .sa-staff__item:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
  .sa-staff__item:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }
}


/*                                                             
   §33 メニューとフッターに残っていた「業者の青」を消す（2026/09/09）

   森川様のご指摘「トップ、ホバーで日本語に変わる時に急に水色の文字になる」。
   探したところ、業者の原稿のまま残っていた2か所でした。
   ・横メニューの子項目にマウスを乗せたとき … #007BFF（ブートストラップの青）
   ・フッターのリンクにマウスを乗せたとき … #C8D5DC（青みのある灰）
   §22で縦メニューだけは直していましたが、横メニューとフッターが残っていました。

   横メニューは縦メニューと同じ「文字の色が濃くなる」に統一し、
   地の色も青みのある灰（#f8f9fa）から、金をひとさじ落とした温かい色へ。
   フッターは、他のリンク（2つの扉・Instagram）と同じ金にそろえました。
                                                                */
.sa-yoko .sub-menu .menu-item > a:hover,
.sa-yoko .sub-menu .menu-item > a:focus-visible {
  color: var(--sa-text);
  background: rgba(212, 175, 55, .08);
}
.sa-fnav a:hover,
.sa-fnav a:focus-visible { color: var(--sa-gold); }


/* ============================================================
   §34 追従ヘッダー：すりガラス（2026-09-09）
   ・帯の地を「ぼかし28px ＋ 白55%」のすりガラスに
     （従来は #FAFAFAE0＝ぼかし無しの88%で、下の本文が読めていた）
   ・下の境界線を #000 / #333 から 本文色16% の極細線へ
   ============================================================ */
:root {
  --sa-header-bg: rgba(250, 250, 250, .55);
}
.sa-bar {
  -webkit-backdrop-filter: blur(28px) saturate(115%);
          backdrop-filter: blur(28px) saturate(115%);
}
/* すりガラスが効かない環境では、透けたままにせず不透明の地に落とす */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --sa-header-bg: #FAFAFA; }
}
.sa-header--sub .sa-bar {
  border-bottom-color: rgba(60, 56, 53, .16);
}
.sa-header--front .sa-bar.with-border {
  border-bottom-color: rgba(60, 56, 53, .16);
}


/* ============================================================
   §35 フッターSNS：2行のアイコン開始位置をそろえる（2026-09-09）
   ラベルの入れものが flex で中身の量に合わせて縮むため、
   エステ行(115px)とネイル行(130px)でアイコンの始まりが15pxずれていた。
   行を display:contents で飛び越えて、親を2列の grid にする。
   1列目は max-content ＝ 広いほうのラベルに自動でそろう（固定値なし）。
   ※ アイコンの色は公式配布データのまま。触っていない。
   ============================================================ */
.sa-fsns {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 15px;
  row-gap: 15px;
  align-items: center;
  justify-content: start;
}
.sa-fsns__row { display: contents; }


/* ============================================================
   §36 折り返しの仕上げ（2026-09-09）
   ① 表のマス目だけ SWELL本体の main.css に `td, th { word-break: break-all }`
      があり、番地の数字やカタカナが途中で割れていた
      （例「伊勢田町中山6／0-1」「メールアド／レス」）。文節そろえに戻す。
      ※ サイト内で本物の <table> はプライバシーポリシーの1つだけ。
         料金表・サロン情報は見た目が表でも table ではないので影響なし。
   ② 日本語の禁則を厳しく。伸ばし棒や小さいかなが行頭に落ちないようにする
      （例「プライバシーポリシ／ー」）。継承するので1行でサイト全体に効く。
   ③ 320px の極小画面でだけ、法務2ページの見出しが2行に折れる
      （26px×10字＋字間2.6px×10＝286px > 入る幅280px）。24pxで1行に収める。
   ============================================================ */
.sa-main td,
.sa-main th { word-break: auto-phrase; }

body { line-break: strict; }

@media (max-width: 360px) {
  /* ページ内の <style> が後から 26px を当ててくるので、詳細度を1つ上げる */
  .sa-main.sa-page--privacy-policy h1,
  .sa-main.sa-page--terms-of-use h1 { font-size: 24px; }
}


/* ============================================================
   §37 会社概要の下の「H.O」（2026-09-10）
   ロゴに薄く入っている H.O ＝ hitohira osteopathy の由来を、
   会社概要まで下りてきた人だけが見つける小さな一段落として置く。
   前に出さないのが趣旨なので、見出しは立てず、文字も本文より小さく。
   ============================================================ */
.sa-sho {
  /* 親が flex(column) なので、幅を指定しないと中身の量に縮む（auto余白で伸びが止まる） */
  width: 100%;
  max-width: 620px;
  margin: 72px auto 0;
  padding-top: 30px;
  border-top: .5px solid rgba(60, 56, 53, .16);
  text-align: center;
}
.sa-sho__label {
  font-family: "Marcellus", "Cormorant Garamond", serif;
  font-size: 12px;
  /* .38em だと「H . O」と点が浮いて見えるので詰める */
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--sa-gold);
  margin: 0 0 16px;
}
.sa-sho__body {
  font-size: 13px;
  line-height: 2.15;
  color: var(--sa-menu-sub);
  margin: 0;
}
.sa-sho__sign {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--sa-subtitle);
  margin: 20px 0 0;
}

@media (max-width: 599px) {
  .sa-sho      { margin-top: 52px; padding-top: 26px; }
  .sa-sho__body { font-size: 12.5px; line-height: 2.05; }
}


/* ============================================================
   §38 /salon/ ご挨拶の組み直し（2026-09-10）
   MIYUの文章が3段落→5段落に増えたため、写真250×255の下に
   257pxの空白ができて間延びしていた。写真を300×400の縦長楕円にして
   文章と高さをそろえる（区画の高さ 912px → 552px）。
   写真は同じ1枚。寄りを変えた新しい切り出しに差し替えている
   （sa-miyu-portrait.webp 600×800 42KB／元は3021×3086を縮小表示していた）。
   ※ 楕円のマスクは img に付いているので、3:4になった今は
      preserveAspectRatio="none" の全面楕円で上書きする。
   ============================================================ */
@media (min-width: 768px) {
  .sa-sprof {
    flex-wrap: nowrap;
    gap: 0 46px;
    align-items: flex-start;
  }
  .sa-sprof__photo {
    flex: 0 0 300px;
    width: 300px;
    height: 400px;
  }
  /* 文章側は幅を書かず、残りいっぱいに伸ばす（flexで縮ませない） */
  .sa-sprof__text {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}
.sa-sprof__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cellipse cx='50' cy='50' rx='50' ry='50'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cellipse cx='50' cy='50' rx='50' ry='50'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}