@charset "UTF-8";
/* =========================================================
   hair memory ─ 共通スタイル
   書体: 案A（しっぽり明朝B1 × Cormorant Garamond）
   色  : 生成り / グレージュ / 墨
   ========================================================= */

:root{
  --cream:#f2ece3;      /* 生成り（背景）※2026-08-06 一段濃くした。白との差を出すため */
  --cream-l:#f8f5f0;    /* 生成り・淡い（濃い背景の上の文字色に使う） */
  --cream-d:#e9e2d7;    /* 生成り・濃いめ */
  --greige:#a99e90;     /* グレージュ（小さい文字・英字見出し） */
  --sumi:#3a3632;       /* 墨（本文。真っ黒にしない） */
  --sumi-l:#6b635b;     /* 墨・薄め */
  --line:#e2ddd5;       /* 罫線 */
  --marker:#ded5c7;     /* 蛍光ペン風の帯（2026-08-08 追加）。グレージュを薄くした色 */
  --green:#525c44;      /* 深いセージ緑＝予約の色（2026-08-08 追加）
                           店の写真に写っている観葉植物から拾った色（実測 #909467〜#959b83）を、
                           生成りの文字が読める濃さまで落としたもの。予約に関わる箇所だけに使う */
  --jp:"Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --en:"Cormorant Garamond", "Times New Roman", serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:#fff;
  color:var(--sumi);
  font-family:var(--jp);
  font-size:16px;
  line-height:2.15;          /* 明朝は行間を広めに取る */
  letter-spacing:.06em;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

/* =========================================================
   アクセシビリティ（2026-08-09 追加）
   ここは見た目を変えるためではなく、
   キーボードだけで操作する人・読み上げソフトを使う人のための指定。
   ========================================================= */

/* 画面には出さず、読み上げソフトにだけ伝える文字。
   display:none だと読み上げソフトも読まないので、1pxに潰して隠す */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* 「本文へスキップ」＝毎ページ同じナビを読み飛ばすための入口。
   ふだんは画面の外に隠れていて、Tabキーを押した瞬間だけ現れる */
.skip{
  position:fixed;left:12px;top:-80px;z-index:100;
  background:var(--sumi);color:var(--cream);
  font-family:var(--jp);font-size:14px;letter-spacing:.08em;
  padding:12px 20px;border-radius:6px;
  transition:top .15s ease;
}
.skip:focus{top:12px;}

/* フォーカス枠＝キーボードで今どこにいるかを示す枠。
   :focus ではなく :focus-visible を使うので、マウスでクリックしたときには出ない */
:focus-visible{
  outline:2px solid var(--sumi);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- 共通の型 ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.wrap-n{max-width:820px;margin:0 auto;padding:0 24px;}
.sec{padding:96px 0;}
.sec-cream{background:var(--cream);}
.sec-tight{padding:64px 0;}

/* ※ 「濃い背景のセクション（.sec-dark）」は 2026-08-08 に全廃した。
   経緯＝8/07「白すぎて個性がない」→ 墨の帯を差し込む → 8/08「黒い部分に違和感」
   → こげ茶に変更 → それでも違和感 → タカさん指示で上下の背景と同じにする（＝帯をなくす）。
   該当3か所（TOPのCONCEPT／SALONのCONCEPT／STYLE&MENUのギャラリー）は .sec に変更済み。
   HTML側に class="sec-dark" が残っていても何も起きないよう、指定ごと削除している。 */

.en-ttl{
  font-family:var(--en);
  font-size:13px;
  font-weight:400;
  letter-spacing:.42em;
  color:#7b7062;        /* 2026-08-07 グレージュだと生成りに沈んで読めなかったため濃くした */
  text-transform:uppercase;
  margin:0 0 14px;
}
.jp-ttl{
  font-size:27px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.1em;
  margin:0 0 34px;
}

/* 蛍光ペンで線を引いたような強調。文字の下半分にだけ帯を敷く（2026-08-08 追加）。
   ⚠️ 帯の高さと位置は em（文字の大きさ基準）で指定している。
   行の高さ基準にすると、行間を変えたときに帯が上下にずれてしまうため。
   これで PC 27px／スマホ 22px のどちらでも、同じ比率で下半分に乗る */
.mk{
  background-image:linear-gradient(var(--marker), var(--marker));
  background-repeat:no-repeat;
  background-size:100% .5em;
  background-position:0 .75em;   /* 実測して調整：.58em だと文字の35%〜85%で上寄りだった */
  padding:0 .1em;
}

/* ※ 「見出しの上に短い縦罫」は 2026-08-07 に全廃した。
   透かし見出しと重なって「変な線」に見えたため（装飾は透かし見出しの1つだけに絞る）。
   HTML側に class="rule-v" が残っていても何も起きないよう、指定ごと削除している。 */

/* ---------- セクションの見出し＝大きな英字1つ ----------
   2026-08-08 変更。もとは背景に敷く「透かし」だったが、
   ①小さい英字と二重になる ②背景に埋もれて読めない の2点から、
   透かしをやめて「読める大きさ・読める濃さの見出し」に作り替えた。
   日本語のラベル見出しは廃止し、英字1本に統一している。 */
.ttl-wrap{position:relative;}
.en-ghost{
  display:block;
  font-family:var(--en);font-weight:300;
  font-size:48px;line-height:1.15;letter-spacing:.14em;
  text-transform:uppercase;
  color:#7b7062;   /* 2026-08-09 #8a7f6f だと白地とのコントラストが3.93しかなく余裕がなかった。
                      .en-ttl と同じ濃さに揃えて4.85に */
  margin:0 0 28px;
}
.ttl-wrap.center .en-ghost{text-align:center;}
/* 日本語で見出しを出す場合（2026-08-08 STYLE&MENU の「よくある質問」だけ）。
   英字用の48pxのまま日本語を出すと大きすぎるので、見た目の重さが揃う30pxに落としている */
.en-ghost.jp{
  font-family:var(--jp);font-weight:400;
  font-size:30px;letter-spacing:.16em;text-transform:none;
}
.lead{font-size:16.5px;line-height:2.3;margin:0 0 20px;}
.small{font-size:13.5px;color:var(--sumi-l);line-height:2;}

/* ---------- スタイリストの名前 ----------
   2026-08-08 新設。もとは .en-ttl（13px）で下の説明文より小さく、名前が目に入らなかった */
.stf-name{
  font-family:var(--en);
  font-size:25px;font-weight:400;line-height:1.3;
  letter-spacing:.18em;
  color:var(--sumi);
  margin:0 0 10px;
}

/* ---------- ボタン ----------
   .btn は予約ボタン専用（サイト内5か所すべてが「予約する」ボタン）。
   2026-08-08 墨 → 植物の緑に変更（タカさん指示） */
.btn{
  display:inline-block;
  font-family:var(--en);
  font-size:14px;
  letter-spacing:.28em;
  text-transform:uppercase;
  background:var(--green);
  color:var(--cream);
  padding:19px 46px;
  border:1px solid var(--green);
  border-radius:8px;      /* 2026-08-08 角に少し丸みをつけた */
  transition:opacity .2s;
}
.btn:hover{opacity:.78;}
.btn-o{background:transparent;color:var(--green);}
.btn-o:hover{background:var(--green);color:var(--cream);opacity:1;}
.btn-jp{font-family:var(--jp);font-size:14px;letter-spacing:.16em;text-transform:none;}
.more{
  display:inline-block;
  font-family:var(--en);
  font-size:12.5px;
  letter-spacing:.3em;
  color:var(--sumi-l);
  border-bottom:1px solid var(--greige);
  padding-bottom:4px;
  margin-top:26px;
}
.more:hover{color:var(--sumi);border-color:var(--sumi);}

/* ---------- ヘッダー ---------- */
.hd{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--line);
}
.hd-in{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
/* ロゴ＝案5（hm ＋ 店名） */
.logo{display:flex;align-items:baseline;gap:12px;font-family:var(--en);color:var(--sumi);}
.logo .hm{font-size:31px;font-weight:300;line-height:1;letter-spacing:.03em;}
.logo .nm{font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;color:var(--sumi-l);}
.gnav{display:flex;align-items:center;gap:30px;}
.gnav a{font-family:var(--en);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--sumi-l);white-space:nowrap;}
.gnav a:hover{color:var(--sumi);}
/* ヘッダーの RESERVE も予約なので緑（2026-08-08） */
.gnav a.res{
  border:1px solid var(--green);color:var(--green);
  padding:11px 22px;letter-spacing:.2em;
  border-radius:6px;      /* 予約ボタンと同じく丸みを揃える。小さいぶん半径も控えめに */
}
.gnav a.res:hover{background:var(--green);color:var(--cream);}

/* ---------- ハンバーガー（760px以下でのみ表示） ---------- */
.hamb{
  display:none;
  width:44px;height:44px;padding:0;margin:0;
  border:0;background:transparent;cursor:pointer;
  position:relative;
}
.hamb span{
  position:absolute;left:11px;width:22px;height:1px;background:var(--sumi);
  transition:transform .28s ease, opacity .2s ease;
}
.hamb span:nth-child(1){top:16px;}
.hamb span:nth-child(2){top:22px;}
.hamb span:nth-child(3){top:28px;}
body.nav-open .hamb span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.nav-open .hamb span:nth-child(2){opacity:0;}
body.nav-open .hamb span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* 開いたときの全画面メニュー */
.drawer{
  position:fixed;inset:0;z-index:70;
  background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  /* 開くときは即座に表示し、閉じるときだけ消えるのを0.3秒待たせる */
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility 0s .3s;
}
body.nav-open .drawer{opacity:1;visibility:visible;transition:opacity .3s ease, visibility 0s 0s;}
.drawer a{
  font-family:var(--en);font-size:19px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sumi);padding:17px 26px;text-align:center;line-height:1.4;
}
.drawer a.res{border:1px solid var(--green);color:var(--green);margin-top:20px;padding:17px 40px;border-radius:8px;}
.drawer .d-jp{
  /* 2026-08-09 グレージュだと生成りの上でコントラスト2.24しかなく読めなかった */
  font-family:var(--jp);font-size:12px;letter-spacing:.14em;color:var(--sumi-l);
  display:block;margin-top:4px;text-transform:none;
}
.drawer .d-tel{
  margin-top:40px;font-family:var(--en);font-size:15px;letter-spacing:.22em;color:var(--sumi-l);
  border-bottom:1px solid var(--line);padding:0 0 6px;
}
body.nav-open{overflow:hidden;}

/* ---------- 写真の枠（※写真が届いたら <img> に差し替え） ---------- */
.ph{
  background:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),
    repeating-linear-gradient(45deg,#ddd6cc 0 9px,#e9e3da 9px 18px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--sumi-l);   /* 2026-08-09 グレージュだと薄すぎたため */
  font-family:var(--jp);font-size:12px;letter-spacing:.08em;line-height:1.9;
  padding:10px;
}
.r-hero{aspect-ratio:16/9;}
.r-45{aspect-ratio:4/5;}
.r-11{aspect-ratio:1/1;}
.r-32{aspect-ratio:3/2;}
.r-34{aspect-ratio:3/4;}

/* ---------- ヒーロー（写真4枚をふんわり入れ替える） ---------- */
.hero{position:relative;}
.hero-slides{position:relative;aspect-ratio:16/9;min-height:520px;overflow:hidden;}
.hero-slide{position:absolute;inset:0;opacity:0;animation:heroFade 36s infinite;}
.hero-slide:nth-child(1){animation-delay:0s;}
.hero-slide:nth-child(2){animation-delay:9s;}
.hero-slide:nth-child(3){animation-delay:18s;}
.hero-slide:nth-child(4){animation-delay:27s;}
.hero-slide .ph{width:100%;height:100%;aspect-ratio:auto;border:0;}
/* 4枚とも人物・主役が右寄りなので、切り取りを人物側に寄せる */
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:68% center;}
@keyframes heroFade{
  0%   {opacity:0;}
  8%   {opacity:1;}   /* 約3秒かけてゆっくり現れる */
  25%  {opacity:1;}   /* 約6秒そのまま（1枚あたり合計9秒） */
  33%  {opacity:0;}   /* 約3秒かけてゆっくり消える */
  100% {opacity:0;}
}
/* 動きを減らす設定をしている人には、1枚目で静止させる */
@media(prefers-reduced-motion:reduce){
  .hero-slide{animation:none;opacity:0;}
  .hero-slide:nth-child(1){opacity:1;}
}

/* ---------- ヒーローの停止ボタン（2026-08-09 追加） ----------
   自動で動き続けるものには「止める手段」を画面に置く必要がある（WCAG 2.2.2）。
   OSの「動きを減らす」設定に頼るだけでは、設定を変えていない人が止められない。
   ⚠️ ヒーローは「見出しだけ」と決めた場所なので、飾りではなく機能として
   右下に小さく1つだけ置く。写真の邪魔をしない大きさ・薄さにしている */
.hero-slides.paused .hero-slide{animation-play-state:paused;}
.hero-pause{
  position:absolute;right:18px;bottom:18px;z-index:6;
  width:36px;height:36px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(58,54,50,.3);border-radius:50%;
  background:rgba(246,243,238,.75);
  cursor:pointer;
  transition:background .2s;
}
.hero-pause:hover{background:rgba(246,243,238,.96);}
/* 止まっていないとき＝一時停止の記号（縦棒2本） */
.hero-pause .ico{
  display:block;width:10px;height:12px;
  border-left:3px solid var(--sumi);
  border-right:3px solid var(--sumi);
}
/* 止まっているとき＝再生の記号（三角） */
.hero-pause[aria-pressed="true"] .ico{
  width:0;height:0;border:6px solid transparent;
  border-left:10px solid var(--sumi);border-right:0;
  margin-left:4px;
}
/* 動きを減らす設定の人は最初から静止しているので、ボタン自体を出さない */
@media(prefers-reduced-motion:reduce){ .hero-pause{display:none;} }
.hero-copy{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 8vw;
  background:linear-gradient(100deg,rgba(246,243,238,.93) 0%,rgba(246,243,238,.72) 42%,rgba(246,243,238,0) 72%);
}
.hero-copy h1{
  font-size:44px;font-weight:400;line-height:1.72;letter-spacing:.13em;
  margin:0;
}
/* ヒーローはロゴと見出しだけ（説明文・予約ボタンは2026-08-06に削除）
   2026-08-08 小さい英字1行 → 「hm」を大きく置く縦組みのロゴに変更。
   ヘッダーの .logo とは別クラスにして、こちらだけ大きくできるようにしている */
.hero-copy .hero-logo{
  font-family:var(--en);color:var(--sumi);line-height:1;margin:0 0 30px;
}
.hero-copy .hero-logo .hm{
  display:block;font-size:60px;font-weight:300;letter-spacing:.03em;
}
.hero-copy .hero-logo .nm{
  display:block;margin-top:14px;
  font-size:12.5px;font-weight:400;letter-spacing:.42em;
  text-transform:uppercase;color:var(--sumi-l);
}

/* ---------- 2カラム ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.cols-t{align-items:start;}

/* ---------- グリッド ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
/* スタイル写真は縦長3:4に固定。元画像の比率が違っても並びが崩れない */
.g4 img{width:100%;aspect-ratio:3/4;object-fit:cover;}

/* ---------- 料金表 ---------- */
.price{width:100%;border-collapse:collapse;}
.price th,.price td{
  border-bottom:1px solid var(--line);
  padding:19px 4px;font-weight:400;text-align:left;font-size:16px;
}
.price td{text-align:right;white-space:nowrap;font-family:var(--en);font-size:19px;letter-spacing:.04em;}
.price td span{font-family:var(--jp);font-size:13px;letter-spacing:.08em;}
.price tr.pick th,.price tr.pick td{color:var(--sumi);}
.price tr.pick th::after{
  content:"おすすめ";
  font-size:10.5px;letter-spacing:.14em;color:var(--cream);background:var(--greige);
  padding:3px 9px;margin-left:12px;vertical-align:2px;
}

/* ---------- FAQ（質問だけ並べ、押すと答えが開く） ----------
   2026-08-08 変更。<details>/<summary> というブラウザ標準の開閉に置き換えたので
   JavaScript は使っていない。矢印は文字ではなくCSSで線を引いている（書体に左右されないため） */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  display:block;                 /* 既定の三角マーカーを消す */
  list-style:none;
  position:relative;
  padding:26px 44px 26px 0;
  font-size:16.5px;letter-spacing:.08em;line-height:1.9;
  cursor:pointer;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--sumi-l);}
.faq summary::before{
  content:"Q";font-family:var(--en);font-size:16px;color:var(--greige);
  letter-spacing:.2em;margin-right:14px;
}
/* 右端の「∨」。開くと「∧」に反転する */
.faq summary::after{
  content:"";
  position:absolute;right:8px;top:50%;
  width:9px;height:9px;
  border-right:1px solid var(--greige);
  border-bottom:1px solid var(--greige);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg);}
.faq .a{
  font-size:15px;color:var(--sumi-l);line-height:2.2;
  padding:0 8px 28px 32px;
  animation:faqOpen .25s ease;
}
@keyframes faqOpen{
  from{opacity:0;transform:translateY(-5px);}
  to  {opacity:1;transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .faq .a{animation:none;}
  .faq summary::after{transition:none;}
}

/* ---------- 予約CTA帯 ---------- */
/* 2026-08-08 濃い帯をやめ、上の白いセクションと同じ背景にした（タカさん指示）。
   目立たせる役目は、中の濃いボタン（既定の .btn＝墨地に生成り）が受け持つ。 */
.cta{background:#fff;color:var(--sumi);text-align:center;padding:88px 24px;}
.cta h2{font-size:26px;font-weight:400;letter-spacing:.12em;margin:0 0 18px;line-height:1.8;}
.cta p{font-size:14.5px;color:var(--sumi-l);margin:0 0 34px;line-height:2.1;}
.cta .tel{
  /* 2026-08-09 高さが21pxしかなく指で押しにくかったので、上下に余白を足して33pxに */
  display:inline-block;margin-top:20px;padding:6px 10px;
  font-family:var(--en);
  font-size:13px;letter-spacing:.24em;color:var(--sumi-l);
}

/* ---------- フッター ---------- */
.ft{background:var(--cream);border-top:1px solid var(--line);padding:70px 0 34px;}
.ft-in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:44px;}
.ft .logo .hm{font-size:36px;}
.ft h3{font-family:var(--en);font-size:12px;letter-spacing:.34em;color:var(--greige);
  text-transform:uppercase;margin:0 0 16px;font-weight:400;}
.ft p,.ft li{font-size:13.5px;line-height:2.15;color:var(--sumi-l);margin:0;}
.ft ul{list-style:none;padding:0;margin:0;}
/* 2026-08-09 リンクの高さが20pxしかなく指で押しにくかったので、押せる範囲を広げた */
.ft ul a{display:inline-block;padding:4px 0;}
.ft .copy{
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  /* 2026-08-09 グレージュだとコントラストが2.24しかなく、11.5pxでは読めなかった */
  font-family:var(--en);font-size:11.5px;letter-spacing:.2em;color:var(--sumi-l);text-align:center;
}

/* ---------- サンプル注記 ---------- */
.sample-note{
  background:var(--cream-d);border:1px solid var(--line);
  padding:16px 20px;font-size:13px;line-height:2;color:var(--sumi-l);
}

/* ※ 画面下の固定バー（TEL／RESERVE）は 2026-08-06 に削除。
   予約導線は「ヘッダーのRESERVE」「各ページの予約CTA帯」「スマホのメニュー内」で足りるため。 */

/* ---------- 下層ページの見出し ---------- */
.phead{padding:78px 0 8px;text-align:center;}
.phead .en-ttl{margin-bottom:16px;}
.phead h1{font-size:30px;font-weight:400;letter-spacing:.13em;margin:0;line-height:1.7;}
/* 英字だけのページ見出し（2026-08-08 SALONに適用）。
   日本語のラベルを消して英字を見出し本体にする＝セクション見出しと同じ考え方 */
.phead-en h1{
  font-family:var(--en);font-weight:300;
  font-size:48px;letter-spacing:.14em;text-transform:uppercase;
  color:#7b7062;line-height:1.15;   /* 2026-08-09 .en-ghost と同じ理由で濃くした */
}

/* =========================================================
   スマホ
   ========================================================= */
@media(max-width:900px){
  .cols{grid-template-columns:1fr;gap:30px;}
  .ft-in{grid-template-columns:1fr;gap:34px;}
}
@media(max-width:760px){
  body{font-size:15.5px;line-height:2.1;}
  .sec{padding:64px 0;}
  .sec-tight{padding:48px 0;}
  .wrap,.wrap-n{padding:0 20px;}
  .jp-ttl{font-size:22px;margin-bottom:26px;}
  .en-ghost{font-size:34px;letter-spacing:.12em;margin-bottom:20px;}
  /* スマホは 4:5（3:4より横に広い＝切り取り量が減り、人物が入りきる） */
  .hero-slides{aspect-ratio:4/5;min-height:0;}
  /* 文字は写真の上に重ねたまま「下寄せ」に。顔は上に来るので重ならない。
     膜も下から上への薄いグラデに変え、上半分は写真がそのまま見えるようにする */
  .hero-copy{padding:0 24px 44px;
    background:linear-gradient(0deg,rgba(246,243,238,.94) 0%,rgba(246,243,238,.80) 30%,rgba(246,243,238,.30) 58%,rgba(246,243,238,0) 78%);
    justify-content:flex-end;}
  .hero-copy h1{font-size:28px;line-height:1.8;}
  .hero-copy .hero-logo{margin-bottom:18px;}
  .hero-copy .hero-logo .hm{font-size:42px;}
  .hero-copy .hero-logo .nm{font-size:11px;letter-spacing:.34em;margin-top:10px;}
  .stf-name{font-size:21px;}
  .g3,.g4{grid-template-columns:repeat(2,1fr);gap:12px;}
  .g2{gap:12px;}
  /* スマホはハンバーガーに切り替える（横並びナビは隠す） */
  .gnav{display:none;}
  .hamb{display:block;}
  .logo .hm{font-size:25px;}
  .logo .nm{font-size:9px;letter-spacing:.26em;}
  .hd-in{padding:9px 18px;}
  .cta{padding:64px 22px;}
  .cta h2{font-size:21px;}
  .btn{padding:17px 34px;font-size:13px;}
  .phead{padding:52px 0 4px;}
  .phead h1{font-size:23px;}
  .phead-en h1{font-size:34px;}
  .en-ghost.jp{font-size:22px;letter-spacing:.12em;}
  .price th,.price td{padding:15px 2px;font-size:15px;}
  .price td{font-size:17px;}
}
/* ※ 以前は420px以下で店名を隠していたが、ハンバーガー化で横幅に余裕ができたため表示したまま
   （ヘッダーに残るのは「ロゴ＋三本線」の2つだけ） */