/* 笑実マルチサロン トップ（Figma Make バージョン8が元） 2026-09-21／2026-10-16 読みやすさの修正 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #fff; color: #141414;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px; line-height: 2.0; letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p { margin: 0; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #8CADD5; border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }

.wrap { max-width: 680px; margin: 0 auto; overflow-x: hidden; }

/* ---- 写真プレースホルダー（窓＝片側を画面外へ抜く） ---- */
/* 外枠は監視用。clip-path を掛けると IntersectionObserver が発火しないので内側に掛ける */
.ph__in {
  width: 100%; height: 100%;
  background: #ECEFF3; border: 2px dashed #8CADD5;
  display: flex; align-items: center; justify-content: center;
  transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
}
.ph p {
  font-size: 14px; font-weight: 400; letter-spacing: .08em;
  color: #2E5C87; text-align: center; line-height: 1.8;
}
.ph--right .ph__in { border-radius: 10px 0 0 10px; clip-path: inset(0 100% 0 0); }
.ph--left  .ph__in { border-radius: 0 10px 10px 0; clip-path: inset(0 0 0 100%); }
.ph.is-open .ph__in { clip-path: inset(0); }
/* 実写が入った枠：破線と地の色を外して写真だけ見せる */
.ph__in--photo { display: block; background: none; border: none; overflow: hidden; }
.ph__in--photo picture, .ph__in--photo img { display: block; width: 100%; height: 100%; }
.ph__in--photo img { object-fit: cover; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }

/* ---- ヘッダー／ヒーロー ---- */
.bar { padding: 16px 24px; border-bottom: 1.5px solid #8CADD5; }
.bar__en { font-size: 12px; font-weight: 500; letter-spacing: .2em; color: #2E5C87; }
.bar__ja { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; margin-top: 2px; }

/* 2026-10-11 廉の指示でヒーロー写真は左右とも幅いっぱい（角丸なし） */
.hero__photo { margin-left: 0; }
.hero__photo .ph__in { border-radius: 0; }
.hero__photo .ph__in { clip-path: none; transition: none; } /* 2026-10-16 開いた瞬間に白くならないよう演出を外した */
.hero__body { padding: 28px 24px 40px; }
.hero__catch { font-size: 24px; font-weight: 700; line-height: 1.65; letter-spacing: .06em; margin-bottom: 10px; }
.hero__sub { font-size: 18px; line-height: 2; color: #444; margin-bottom: 28px; }
.hero__note { font-size: 16px; color: #2E5C87; margin-top: 8px; }

/* ---- ボタン ---- */
.btn-tel {
  display: inline-flex; align-items: center; gap: 10px;
  background: #D9556B; color: #fff; padding: 17px 32px;
  border-radius: 10px; font-size: 20px; font-weight: 700;
  letter-spacing: .08em; text-decoration: none; white-space: nowrap;
}

/* ---- セクション ---- */
.sec { padding: 64px 24px; }
.sec--blue { background: #F3F8FD; }
.sec--pink { background: #FBE4E8; } /* 2026-10-16 濃い面は重いので淡い面＋黒文字に */
.sec--pale { background: #FDF0F2; padding-bottom: 80px; }

.head { display: flex; align-items: flex-start; gap: 12px; }
.head__bar { width: 4px; min-height: 52px; background: #D9556B; border-radius: 9999px; flex-shrink: 0; margin-top: 4px; }
.head__en { font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .2em; color: #2E5C87; }
.head__ja { font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; color: #141414; margin-top: 4px; }
.sec--pink .head__bar { background: #D9556B; }
.sec--pink .head__en { color: #B03A52; }
.sec--pink .head__ja { color: #141414; }

/* ---- メニュー ---- */
.menu { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.menu__card { border: 1.5px solid #8CADD5; border-radius: 10px; padding: 22px 24px; }
.menu__name { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.menu__time { font-size: 14px; font-weight: 500; letter-spacing: .15em; color: #2E5C87; margin-bottom: 12px; }
.menu__price { font-size: 18px; font-weight: 400; color: #141414; margin-bottom: 2px; }
.menu__note { font-size: 16px; color: #444; line-height: 1.7; }

.pay { margin-top: 28px; background: #E3ECF7; border-radius: 10px; padding: 20px 24px; }
.pay__label { font-size: 14px; font-weight: 700; letter-spacing: .2em; color: #2E5C87; margin-bottom: 10px; }
.pay__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pay__chips span {
  background: #fff; color: #2E5C87; border-radius: 9999px;
  padding: 4px 18px; font-size: 15px; font-weight: 700;
}
.caution { font-size: 16px; color: #444; line-height: 1.9; margin-top: 20px; }

/* ---- スタッフ ---- */
.staff { margin-top: 40px; display: flex; flex-direction: column; gap: 32px; }
.staff__row { display: flex; gap: 20px; align-items: flex-start; }
.staff__face {
  width: 88px; height: 88px; flex-shrink: 0;
  background: #ECEFF3; border: 2px dashed #8CADD5; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.staff__face span { font-size: 12px; color: #2E5C87; text-align: center; line-height: 1.6; }
.staff__name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.staff__text { font-size: 18px; line-height: 2; color: #3A3A3A; }

/* ---- わたしたちについて ---- */
.about__lead { font-size: 22px; font-weight: 700; line-height: 1.7; color: #141414; margin: 40px 0 24px; }
.about__body { font-size: 18px; line-height: 2; color: #3A3A3A; margin-bottom: 36px; }

/* ---- 初めての方へ ---- */
.badge {
  display: inline-block; margin-top: 16px; background: #8CADD5;
  border-radius: 9999px; padding: 6px 20px;
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .1em;
}
.steps { margin-top: 36px; }
.step { display: flex; }
.step__rail { display: flex; flex-direction: column; align-items: center; width: 44px; flex-shrink: 0; }
.step__num {
  width: 38px; height: 38px; border-radius: 9999px; background: #C2405A;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.step__line { width: 2px; flex: 1; background: #8CADD5; min-height: 20px; border-radius: 1px; margin: 4px 0; }
.step__body { padding-left: 16px; padding-bottom: 32px; }
.step:last-child .step__body { padding-bottom: 0; }
.step__title { font-size: 18px; font-weight: 700; margin: 6px 0; }
.step__text { font-size: 18px; line-height: 2; color: #3A3A3A; }

/* ---- 場所 ---- */
.map { margin-top: 36px; }
.ph__in--map { display: block; border: none; overflow: hidden; }
.ph__in--map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__link { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 700; color: #2E5C87; }
.info { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.info__row { display: flex; gap: 16px; align-items: flex-start; }
.info__icon { font-size: 20px; flex-shrink: 0; line-height: 1.6; }
.info__label { font-size: 13px; font-weight: 500; letter-spacing: .2em; color: #2E5C87; margin-bottom: 2px; }
.info__value { font-size: 18px; line-height: 2; }
.parking { margin-top: 24px; }
.visit { margin-top: 28px; background: #E3ECF7; border-radius: 10px; padding: 24px; }
.visit__label { font-size: 14px; font-weight: 700; letter-spacing: .2em; color: #2E5C87; margin-bottom: 8px; }
.visit__strong { font-size: 18px; line-height: 1.8; color: #141414; font-weight: 700; margin-bottom: 8px; }
.visit__text { font-size: 18px; line-height: 2; color: #3A3A3A; }

/* ---- 予約 ---- */
.rsv__lead { font-size: 18px; line-height: 2; color: #444; margin: 32px 0 36px; }
.rsv__tel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #D9556B; color: #fff; border-radius: 10px;
  padding: 17px 24px; text-decoration: none; margin-bottom: 20px;
}
.rsv__label { font-size: 19px; font-weight: 700; letter-spacing: .06em; color: #fff; margin-bottom: 10px; }
.rsv__number { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.rsv__number p { font-size: 30px; font-weight: 700; letter-spacing: .1em; line-height: 1; }
.rsv__note { font-size: 16px; color: #444; text-align: center; line-height: 1.9; }

/* ---- フッター ---- */
.foot { background: #F3F8FD; border-top: 1.5px solid #8CADD5; padding: 32px 24px; text-align: center; }
.foot__name { font-size: 14px; font-weight: 500; letter-spacing: .15em; color: #2E5C87; }
.foot__addr { font-size: 15px; color: #444; margin-top: 4px; }
.foot__link { display: inline-block; margin-top: 12px; font-size: 14px; color: #2E5C87; }

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

/* =========================================================
   求人ページ（make-recruit.html）用 2026-10-11
   トップと同じトークンだけで組む。新しい色・影は足さない
   ========================================================= */
.hero__caption { font-size: 14px; color: #2E5C87; margin: 10px 24px 0; }
.hero__waiting { font-size: 18px; font-weight: 700; color: #B03A52; margin-bottom: 28px; }

.lead { font-size: 22px; font-weight: 700; line-height: 1.7; margin: 40px 0 12px; }
.lead + p { font-size: 18px; line-height: 2; color: #444; }
.sec--pale .lead, .sec--pink .lead { margin-top: 32px; }
.sec--pink .lead { color: #141414; }

/* 条件カード＝メニューカードと同じ枠（窓の桟） */
.terms { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.terms__card { border: 1.5px solid #8CADD5; border-radius: 10px; padding: 22px 24px; }
.terms__label { font-size: 13px; font-weight: 500; letter-spacing: .2em; color: #2E5C87; margin-bottom: 4px; }
.terms__value { font-size: 22px; font-weight: 700; line-height: 1.6; margin-bottom: 8px; }
.terms__note { font-size: 16px; line-height: 1.9; color: #3A3A3A; }

/* 設備の写真（縦長）＝スタッフ行と同じ組み方 */
.gear { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
.gear__row { display: flex; gap: 20px; align-items: center; }
.gear__photo { width: 38%; flex-shrink: 0; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; }
.gear__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gear__text { font-size: 16px; line-height: 1.9; color: #3A3A3A; }

.fig { margin: 40px 0 0; }
.fig figcaption { font-size: 14px; color: #2E5C87; margin-top: 10px; }
.sec--pink .fig figcaption { color: #2E5C87; }

/* お心当たりのある方へ＝「ご来店について」と同じ青い面 */
.notice { margin-top: 0; }
.notice .visit__text + .visit__text { margin-top: 12px; }

/* よくある質問＝ステップと同じ丸数字の型 */
.faq { margin-top: 36px; display: flex; flex-direction: column; gap: 28px; }
.faq__q { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; font-weight: 700; line-height: 1.8; }
.faq__a { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 2; color: #3A3A3A; margin-top: 10px; }
.faq__mark {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1; margin-top: 2px;
}
.faq__q .faq__mark { background: #C2405A; color: #fff; }
.faq__a .faq__mark { background: #fff; color: #2E5C87; border: 1.5px solid #8CADD5; }

/* 店をつくった人から＝ABOUT USと同じピンク面 */
.voice__body p { font-size: 18px; line-height: 2; color: #3A3A3A; margin-top: 20px; }
.voice__vision { font-size: 22px; font-weight: 700; line-height: 1.7; color: #141414; margin-top: 32px; }
.voice__sign { font-size: 16px; font-weight: 700; letter-spacing: .15em; color: #B03A52; margin-top: 24px; text-align: right; }

.rsv__addr { font-size: 15px; color: #444; text-align: center; margin-top: 16px; }

/* =========================================================
   トップに追加（2026-10-11）：お知らせ／店内のようす／美容師さんへ
   ========================================================= */
.sec--news { padding-top: 48px; padding-bottom: 48px; border-top: 1.5px solid #8CADD5; }
.news { list-style: none; margin: 28px 0 0; padding: 0; }
.news__item { padding: 16px 0; border-bottom: 1px solid #DCE6F2; }
.news__item:first-child { border-top: 1px solid #DCE6F2; }
.news__date { display: block; font-size: 14px; font-weight: 500; letter-spacing: .15em; color: #2E5C87; }
.news__text { font-size: 16px; line-height: 1.9; margin-top: 4px; }
.news__text a { color: #B03A52; font-weight: 700; }

.gallery { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gallery__item { margin: 0; }
.gallery__photo { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
.gallery__photo picture, .gallery__photo img { display: block; width: 100%; height: 100%; }
.gallery__photo img { object-fit: cover; }
.gallery__item figcaption { font-size: 14px; color: #2E5C87; margin-top: 8px; }

.btn-sub {
  display: block; margin-top: 32px; text-align: center;
  background: #fff; color: #B03A52; border: 2.67px solid #D9556B;
  border-radius: 50px; padding: 20px 0; font-size: 17px; font-weight: 700;
  letter-spacing: .08em; text-decoration: none;
}

/* 求人ページの設備写真（縦長3枚）：言葉なしで3列に並べる 2026-10-11 */
.gallery--3 { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 40px; }
.gallery--3 .gallery__photo { aspect-ratio: 2 / 3; }

/* =========================================================
   2026-10-16 読みやすさの修正
   ========================================================= */
/* トップのメニュー：料金が決まるまでは1つの表にまとめる */
.menu-list { margin-top: 32px; border-top: 1.5px solid #8CADD5; }
.menu-list__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid #DCE6F2; }
.menu-list__name { font-size: 20px; font-weight: 700; }
.menu-list__time { font-size: 16px; color: #2E5C87; white-space: nowrap; }
.menu-list__price { font-size: 18px; margin-top: 16px; }

/* 求人の条件：大事な3つは大きく、残りは一覧に */
.terms__card--key { border: 2.5px solid #D9556B; }
.terms__card--key .terms__label { color: #B03A52; }
.terms__card--key .terms__value { font-size: 24px; }
.terms-list { margin-top: 28px; border-top: 1.5px solid #8CADD5; }
.terms-list__row { padding: 16px 0; border-bottom: 1px solid #DCE6F2; }
.terms-list__row .terms__label { margin-bottom: 0; }
.terms-list__row .terms__value { font-size: 19px; margin-bottom: 4px; }

/* 画面の下に固定の電話ボタン（最初の電話ボタンが見えなくなったら出す） */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid #DCE6F2;
  transform: translateY(110%); transition: transform .25s ease;
}
.callbar.is-shown { transform: none; }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 648px; margin: 0 auto; background: #D9556B; color: #fff;
  border-radius: 10px; padding: 12px 16px; text-decoration: none;
  font-size: 19px; font-weight: 700; letter-spacing: .06em;
}
body.has-callbar { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .callbar { transition: none; } }

/* 求人「お電話からの流れ」：①〜③を番号つきの並びに。折り返した行は字下げ */
.flow { list-style: none; margin: 0; padding: 0; }
.flow li { font-size: 18px; line-height: 1.9; color: #3A3A3A; padding-left: 1.4em; text-indent: -1.4em; }
.flow li + li { margin-top: 8px; }

/* 2026-10-19 スクロールで下からふわっと出る（.rv はJSが付ける） */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.rv.is-in { opacity: 1; transform: none; }