@charset "utf-8";
/* ==========================================================================
   eyeny.brow リニューアル — 共通スタイル
   Figma: 26_アイニーブロウ_HPデザイン (wUNLgqsrjgnSV9Q9cB5J8m)
   基準アートボード: PC 1920px / SP 375px
   ========================================================================== */

:root {
  /* Figma 変数 */
  --rn-blue: #1517e2;        /* 色 */
  --rn-blue-pale: #f1f1ff;   /* 色 2 */
  --rn-blue-line: #cbcbff;   /* 色 3 */
  --rn-black: #000000;       /* 色 4 */
  --rn-gray: #7d7d7d;        /* 色 6 */
  /* 派生色（Figma 実測） */
  --rn-gray-text: #6b6b6b;
  --rn-pink-pale: #fff1f1;
  --rn-red: #e21515;
  --rn-blue-pale2: #f1f2ff;
  --rn-access-tab: #9999ff;  /* アクセスの非アクティブタブ文字色（Figma 実測） */
  --rn-script: #8283ff;

  /* レイアウト（Figma 1920 基準） */
  --rn-side: 170px;          /* 左サイド帯 */
  --rn-header-h: 120px;
  --rn-main-max: 1750px;     /* x=170〜1920 */
  --rn-pad: 40px;            /* 本体内側 x=210 まで */

  /* フォント */
  --rn-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --rn-sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --rn-cond: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
}

/* ---------- reset（子テーマ style.css のリセットを前提に最小限） ---------- */
.rn *,
.rn *::before,
.rn *::after { box-sizing: border-box; }

.rn {
  margin: 0;                 /* 旧 style.css を読まないためブラウザ既定の 8px が残る */
  font-family: var(--rn-sans);
  color: var(--rn-black);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* :where() で詳細度を 0 にし、後段のコンポーネント指定を打ち消さないようにする */
:where(.rn) :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: inherit; font-weight: inherit; }
:where(.rn) :where(dl, dd, figure, blockquote) { margin: 0; }
:where(.rn) :where(button) { font: inherit; color: inherit; }
:where(.rn) :where(table) { border-collapse: collapse; }

:where(.rn) :where(img) { max-width: 100%; height: auto; vertical-align: bottom; }
:where(.rn) :where(a) { color: inherit; text-decoration: none; }
:where(.rn) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.rn) :where(p) { margin: 0; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
/* スクロール追従。body 直下にあり祖先に overflow が無いので sticky がそのまま効く。
   SP のドロワー（.rn-gnav）は inset: var(--rn-header-h) 0 0 の固定配置なので、
   ヘッダーが画面上端に居続けることでようやく位置が正しくなる。 */
.rn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--rn-header-h);
  background: #fff;
  border-bottom: 1px solid var(--rn-blue-line);
  display: flex;
  align-items: stretch;
}

.rn-header__logo {
  flex: 0 0 379px;              /* 縦罫線 x=379 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 40px;
  border-right: 1px solid var(--rn-blue-line);
}
.rn-header__logo img.rn-logo-mark { width: 112px; height: auto; }
.rn-header__logo img.rn-logo-type { width: 187px; height: auto; }

.rn-gnav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-left: 40px;
}
.rn-gnav__item { position: relative; }
.rn-gnav__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rn-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .2s;
}
.rn-gnav__link:hover { opacity: .6; }
.rn-gnav__toggle-icon { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.rn-gnav__item.is-open .rn-gnav__toggle-icon { transform: rotate(45deg); }

/* 店舗一覧のドロップダウン */
.rn-gnav__sub {
  position: absolute;
  top: calc(100% + 22px);
  left: -20px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--rn-blue-line);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.rn-gnav__item:hover .rn-gnav__sub,
.rn-gnav__item.is-open .rn-gnav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.rn-gnav__sub a {
  display: block;
  padding: 12px 20px;
  font-size: 16px;
  transition: opacity .2s;
}
.rn-gnav__sub a:hover { opacity: .6; }

.rn-header__cta {
  flex: 0 0 280px;
  margin: 20px 40px 20px 0;
  background: var(--rn-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 500;
  font-size: 20px;
  transition: opacity .2s;
}
.rn-header__cta:hover { opacity: .6; }
.rn-header__cta img { width: 31px; height: 28px; flex: none; }

/* SP 用ハンバーガー（PC では非表示） */
.rn-burger { display: none; }

/* ==========================================================================
   シェル（左サイド帯 + 本体）
   ========================================================================== */
.rn-shell { display: flex; align-items: flex-start; }

.rn-side {
  flex: 0 0 var(--rn-side);
  align-self: stretch;
  position: relative;
  border-right: 1px solid var(--rn-blue-line);
}
/* 追従ヘッダーの下に潜り込まないよう、ヘッダー高さぶん下げて残りの高さに収める */
.rn-side__inner {
  position: sticky;
  top: var(--rn-header-h);
  height: calc(100vh - var(--rn-header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.rn-side__text {
  writing-mode: vertical-rl;
  font-family: var(--rn-cond);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .1em;
  color: var(--rn-blue);
  white-space: nowrap;
}
.rn-side__line { width: 1px; height: 100px; background: var(--rn-blue-line); }

.rn-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--rn-main-max);
}

/* セクションの基本 */
.rn-section { border-top: 1px solid var(--rn-blue-line); }
.rn-section:first-child { border-top: 0; }
.rn-inner { padding: 0 var(--rn-pad); }

/* 2カラム（左見出し 516px / 右コンテンツ） */
.rn-split { display: flex; align-items: stretch; }
.rn-split__head {
  flex: 0 0 516px;
  border-right: 1px solid var(--rn-blue-line);
  padding: 40px var(--rn-pad);
}
.rn-split__body { flex: 1 1 auto; min-width: 0; padding: 40px var(--rn-pad); }

/* ==========================================================================
   共通パーツ
   ========================================================================== */
/* セクション見出し（英ラベル + 和文） */
.rn-label {
  font-family: var(--rn-cond);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .1em;
  color: var(--rn-blue);
  line-height: 1;
}
.rn-heading {
  font-family: var(--rn-serif);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: .1em;
  line-height: 1.45;
  margin-top: 20px;
}
.rn-heading--sm { font-size: 32px; }
.rn-heading em { color: var(--rn-blue); font-style: normal; }

.rn-rule { width: 60px; height: 1px; background: var(--rn-blue-line); margin: 28px 0; }

.rn-lead {
  font-size: 20px;
  line-height: 1.9;
  /* 幅 435px の狭いカラムなので、PC でも文節で折り返す（「パー／ツ。」を防ぐ） */
  word-break: auto-phrase;
  text-wrap: pretty;
}
.rn-lead + .rn-lead { margin-top: 1.9em; }

.rn-script { display: block; }
.rn-script img { display: block; }

/* ボタン */
.rn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  padding: 0 24px;
  font-weight: 700;
  font-size: 18px;
  background: var(--rn-blue);
  color: #fff;
  border: 1px solid var(--rn-blue);
  transition: opacity .2s;
}
.rn-btn:hover { opacity: .6; }
.rn-btn__arrow { width: 10px; height: 16px; flex: none; }


.rn-btn--ghost { background: #fff; color: var(--rn-blue); }


.rn-btn--lg { height: 80px; font-size: 20px; }

/* 矢印アイコン（青→白の切替用に mask を使う）
   Figma の書き出しは左向きのため 180 度回転させて右向きにする */
.rn-arrow {
  width: 10px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url(../img/icon-arrow-right.svg) no-repeat center / contain;
  mask: url(../img/icon-arrow-right.svg) no-repeat center / contain;
  transform: rotate(180deg);
}
.rn-cal {
  width: 31px;
  height: 28px;
  flex: none;
  background: currentColor;
  -webkit-mask: url(../img/icon-calendar.svg) no-repeat center / contain;
  mask: url(../img/icon-calendar.svg) no-repeat center / contain;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.rn-footer { display: flex; align-items: stretch; border-top: 1px solid var(--rn-blue-line); }

.rn-footer__info {
  flex: 0 0 686px;
  padding: 40px var(--rn-pad);
  background: #fff;
}
.rn-footer__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.rn-footer__logo img.rn-logo-mark { width: 112px; }
.rn-footer__logo img.rn-logo-type { width: 187px; }

.rn-footer__company { font-size: 16px; line-height: 1.6; padding-bottom: 24px; border-bottom: 1px solid var(--rn-blue-line); }
.rn-footer__shop { padding: 24px 0; border-bottom: 1px solid var(--rn-blue-line); }
.rn-footer__shop-name { font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.rn-footer__shop-addr { font-size: 14px; line-height: 1.6; color: var(--rn-black); }

.rn-footer__nav {
  flex: 1 1 auto;
  background: var(--rn-blue);
  color: #fff;
  padding: 40px var(--rn-pad);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px 34px;
  align-content: start;
}
.rn-footer__col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.6);
  margin-bottom: 18px;
}
.rn-footer__col ul li { margin-top: 12px; }
.rn-footer__col ul li:first-child { margin-top: 0; }
.rn-footer__col ul a,
.rn-footer__col-title a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  transition: opacity .2s;
}
.rn-footer__col ul a:hover,
.rn-footer__col-title a:hover { opacity: .6; }
.rn-footer__col .rn-arrow { width: 8px; height: 12px; }

.rn-footer__sns a { display: inline-flex; align-items: center; gap: 8px; }
.rn-footer__sns img.rn-ig { width: 16px; height: 16px; }

.rn-footer__script {
  position: absolute;
  right: 40px;
  bottom: 70px;
  width: 449px;
  opacity: .45;
  pointer-events: none;
}
.rn-footer__copy {
  position: absolute;
  right: 40px;
  bottom: 20px;
  font-size: 14px;
  letter-spacing: .02em;
}

/* ==========================================================================
   1280px 以下（等倍スケールの適用外。ここからリフローするレスポンシブ）
   ========================================================================== */
@media screen and (max-width: 1280px) {
  .rn-gnav { gap: 26px; padding-left: 26px; }
  .rn-gnav__link { font-size: 16px; }
  .rn-header__logo { flex-basis: 300px; padding-left: 24px; }
  .rn-header__logo img.rn-logo-mark { width: 88px; }
  .rn-header__logo img.rn-logo-type { width: 150px; }
  .rn-header__cta { flex-basis: 230px; font-size: 17px; margin-right: 24px; }
  .rn-split__head { flex-basis: 420px; }
  .rn-footer__info { flex-basis: 520px; }
  .rn-footer__nav { gap: 40px 20px; }
  .rn-footer__script { width: 320px; }
}

@media screen and (max-width: 1280px) {
  :root { --rn-side: 100px; --rn-pad: 28px; }

  /* ロゴ 300 + ナビ 553 + CTA 230 + 余白 24 = 1107px 必要で、
     1024px 幅だと横スクロールになるためヘッダー一式を詰める */
  .rn-header__logo { flex-basis: 240px; padding-left: 16px; gap: 8px; }
  .rn-header__logo img.rn-logo-mark { width: 68px; }
  .rn-header__logo img.rn-logo-type { width: 120px; }
  .rn-gnav { gap: 16px; padding-left: 16px; }
  .rn-gnav__link { font-size: 15px; gap: 6px; }
  .rn-gnav__toggle-icon { width: 15px; height: 15px; }
  .rn-header__cta { flex-basis: 200px; font-size: 15px; gap: 10px; margin-right: 16px; }
  .rn-header__cta img,
  .rn-header__cta .rn-cal { width: 24px; height: 22px; }

  .rn-heading { font-size: 32px; }
  .rn-lead { font-size: 18px; }
  .rn-side__text { font-size: 20px; }
  .rn-footer { flex-direction: column; }
  .rn-footer__info { flex-basis: auto; }
  .rn-footer__nav { grid-template-columns: repeat(2, 1fr); }
  .rn-footer__script { display: none; }
  .rn-footer__copy { position: static; margin-top: 40px; }
}

/* ==========================================================================
   SP（375px 基準）
   ========================================================================== */
@media screen and (max-width: 767px) {
  :root {
    --rn-side: 0px;
    --rn-header-h: 64px;
    --rn-pad: 20px;
  }

  .rn-header { height: var(--rn-header-h); }
  .rn-header__logo { flex: 1 1 auto; border-right: 0; padding-left: 16px; gap: 8px; }
  .rn-header__logo img.rn-logo-mark { width: 46px; }
  .rn-header__logo img.rn-logo-type { width: 104px; }
  .rn-gnav {
    position: fixed;
    inset: var(--rn-header-h) 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s;
    z-index: 90;
  }
  .rn-gnav.is-open { transform: translateX(0); }
  .rn-gnav__item { border-bottom: 1px solid var(--rn-blue-line); }
  .rn-gnav__link { width: 100%; padding: 18px 20px; font-size: 16px; justify-content: space-between; }
  /* SP は子リンクを常時表示（親リンクは店舗一覧へ遷移する） */
  .rn-gnav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    background: var(--rn-blue-pale);
    display: block;
    padding: 0;
    min-width: 0;
  }
  .rn-gnav__toggle-icon { display: none; }
  .rn-gnav__sub a { padding: 14px 32px; font-size: 15px; }

  .rn-header__cta {
    flex: 0 0 auto;
    margin: 0;
    width: 56px;
    height: var(--rn-header-h);
    font-size: 0;
    gap: 0;
  }
  .rn-header__cta img,
  .rn-header__cta .rn-cal { width: 24px; height: 22px; }

  .rn-burger {
    display: flex;
    flex: 0 0 56px;
    height: var(--rn-header-h);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: 0;
    border-left: 1px solid var(--rn-blue-line);
    cursor: pointer;
    padding: 0;
  }
  .rn-burger span { display: block; width: 22px; height: 2px; background: var(--rn-blue); transition: transform .3s, opacity .3s; }
  .rn-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .rn-burger.is-open span:nth-child(2) { opacity: 0; }
  .rn-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .rn-side { display: none; }
  .rn-shell { display: block; }
  .rn-main { max-width: none; }

  .rn-split { display: block; }
  .rn-split__head { flex: none; border-right: 0; padding: 40px var(--rn-pad) 24px; }
  .rn-split__body { padding: 0 var(--rn-pad) 40px; }

  .rn-label { font-size: 16px; }
  .rn-heading { font-size: 24px; margin-top: 12px; letter-spacing: .06em; }
  .rn-heading--sm { font-size: 20px; }
  .rn-rule { margin: 20px 0; }
  .rn-lead { font-size: 15px; line-height: 1.9; }

  .rn-btn { height: 52px; font-size: 15px; width: 100%; }
  .rn-btn--lg { height: 56px; font-size: 16px; }

  .rn-footer__info { padding: 32px var(--rn-pad); }
  .rn-footer__logo img.rn-logo-mark { width: 64px; }
  .rn-footer__logo img.rn-logo-type { width: 120px; }
  .rn-footer__nav { grid-template-columns: 1fr; gap: 32px; padding: 32px var(--rn-pad) 40px; }
  .rn-footer__copy { font-size: 12px; }
}


/* ==========================================================================
   SHOP LIST  (y=4995-6194)
   ========================================================================== */
.rn-shop { padding: 40px 0; }
.rn-shop__script { width: 459px; height: auto; flex: none; margin-right: 64px; }
.rn-shop__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
.rn-shop__item { border: 1px solid var(--rn-blue); padding: 40px; }
.rn-shop__photo img { width: 100%; height: 420px; object-fit: cover; }
.rn-shop__name {
  font-family: var(--rn-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: .1em;
  color: var(--rn-blue);
  margin: 32px 0 0;
}

.rn-shop__info { margin-top: 24px; }
.rn-shop__info dt,
.rn-shop__info dd { font-size: 20px; line-height: 1.5; padding: 19px 0; }
.rn-shop__info dt {
  float: left;
  width: 200px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  clear: both;
}
.rn-shop__info dd { overflow: hidden; border-bottom: 1px solid var(--rn-blue-line); padding-left: 8px; }

.rn-shop__btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 32px; }
.rn-shop__btns .rn-btn { font-size: 20px; }

/* アイコン（塗り分けできるよう mask で描画） */
.rn-ico {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-block;
  background: var(--rn-blue);
  vertical-align: -5px;
}
.rn-ico--pin { -webkit-mask: url(../img/icon-pin.svg) no-repeat center / contain; mask: url(../img/icon-pin.svg) no-repeat center / contain; }
.rn-ico--clock { -webkit-mask: url(../img/icon-clock.svg) no-repeat center / contain; mask: url(../img/icon-clock.svg) no-repeat center / contain; }
.rn-ico--cal { -webkit-mask: url(../img/icon-calendar-sm.svg) no-repeat center / contain; mask: url(../img/icon-calendar-sm.svg) no-repeat center / contain; }
.rn-ico--tel { -webkit-mask: url(../img/icon-tel.svg) no-repeat center / contain; mask: url(../img/icon-tel.svg) no-repeat center / contain; }
.rn-ico--cert { -webkit-mask: url(../img/icon-cert.svg) no-repeat center / contain; mask: url(../img/icon-cert.svg) no-repeat center / contain; }
.rn-ico--heart { -webkit-mask: url(../img/icon-heart.svg) no-repeat center / contain; mask: url(../img/icon-heart.svg) no-repeat center / contain; }


/* ==========================================================================
   スクロールアニメーション
   ========================================================================== */
[data-rn-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-rn-animate].is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rn-animate] { opacity: 1; transform: none; transition: none; }
}

/* ページ内アンカー（メニューページのタブなど）をスムーズに送る。
   このファイルはリニューアル系ページでしか読み込まれないため、旧 TCD 側には影響しない。
   ヘッダーが追従するので、その高さぶんを逃がさないと見出しがヘッダーの下に隠れる。 */
html { scroll-behavior: smooth; }
.rn [id],
.rn-section[id] { scroll-margin-top: calc(var(--rn-header-h) + 24px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


.rn-sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* ==========================================================================
   店舗セクションのレスポンシブ（共通パーツのため common に置く）
   ========================================================================== */
@media screen and (max-width: 1280px) {
  .rn-shop__script { width: 340px; margin-right: 0; }
}

@media screen and (max-width: 1280px) {
  .rn-shop__list { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
  .rn-shop { padding: 40px 0; }
  .rn-shop .rn-sec-head { flex-direction: column; }
  .rn-shop__script { width: 200px; align-self: flex-end; }
  .rn-shop__list { gap: 16px; margin-top: 24px; }
  .rn-shop__item { padding: 20px; }
  .rn-shop__photo img { height: 220px; }
  .rn-shop__name { font-size: 20px; margin-top: 20px; }
  .rn-shop__info dt, .rn-shop__info dd { font-size: 14px; padding: 10px 0; }
  /* アイコンを文字サイズに合わせて小さくし、値はラベルの文字位置（アイコン 18 + 間 8）に揃える */
  .rn-shop__info dt { float: none; width: auto; gap: 8px; padding-bottom: 0; }
  .rn-shop__info dt .rn-ico { width: 18px; height: 18px; }
  .rn-shop__info dd { padding-left: 26px; padding-top: 4px; }
  .rn-shop__btns { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .rn-shop__btns .rn-btn { font-size: 15px; }
}


/* ==========================================================================
   FV 共通パーツ（TOP・店舗詳細で共用）
   ========================================================================== */
.rn-fv__catch {
  font-family: var(--rn-serif);
  font-weight: 400;
  font-size: 60px;
  line-height: 98px;
  letter-spacing: .1em;
  margin: 0;
}
.rn-fv__catch em { font-style: normal; color: var(--rn-blue); }

.rn-fv__sub {
  margin-top: 29px;
  font-size: 24px;
  /* Figma は 44px。WF 2026-09-06 の TOP サブコピーが 4 行になり
     660px の FV 内（実績帯 y=553 まで）に収まらないため 36px に詰めている */
  line-height: 36px;
}

/* SP でだけ出す横書きのタグライン（PC は左サイド帯に縦組みで出る） */
.rn-fv__tagline { display: none; }

/* 実績 3 指標 (y=553 / 774x107) */
.rn-stats {
  flex: 0 0 107px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--rn-blue-pale);
  border-top: 1px solid var(--rn-blue-line);
}
.rn-stats__item {
  display: flex;
  align-items: center;
  justify-content: center;   /* Figma は 3 列とも中身を列内で中央寄せ（アイコン x=198/483/739 と一致） */
  gap: 16px;
  padding: 0 16px;
  border-left: 1px solid var(--rn-blue-line);
}
.rn-stats__item:first-child { border-left: 0; }
.rn-stats__icon { width: 40px; height: 40px; flex: none; }
.rn-stats__text { display: flex; flex-direction: column; gap: 2px; }
.rn-stats__label {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--rn-blue);
}
.rn-stats__value {
  font-family: var(--rn-cond);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: var(--rn-blue);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.rn-stats__unit { font-family: var(--rn-sans); font-weight: 700; font-size: 18px; }
.rn-stats__value--sm { font-family: var(--rn-sans); font-weight: 700; font-size: 24px; white-space: nowrap; }

/* FV 共通パーツの中間幅。TOP 専用の renewal-front.css だけに書くと店舗詳細に効かず、
   上の共通定義（60px/98px）より前のメディアクエリに書いても後勝ちで打ち消される。
   共通定義の直後に置くこと */
@media screen and (max-width: 1280px) {
  .rn-fv__catch { font-size: 48px; line-height: 1.6; }
  .rn-fv__sub { font-size: 20px; line-height: 1.8; }
}

@media screen and (max-width: 767px) {
  .rn-stats { flex-basis: auto; grid-template-columns: repeat(3, 1fr); }
  .rn-stats__item {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    text-align: center;
  }
  .rn-stats__item:first-child { padding-left: 6px; }
  .rn-stats__icon { width: 28px; height: 28px; }
  .rn-stats__text { align-items: center; gap: 2px; }
  .rn-stats__label { font-size: 13px; }
  .rn-stats__value { font-size: 20px; gap: 2px; justify-content: center; }
  .rn-stats__unit { font-size: 13px; }
  .rn-stats__value--sm { font-size: 15px; }
  .rn-fv__catch { font-size: 30px; line-height: 1.55; letter-spacing: .04em; }
  /* FV 共通パーツなので common に置く（front 側だけに書くと店舗詳細で PC 用の
     24px/44px のまま残る）。TOP 固有の中央寄せ・max-width は front 側で上書きする */
  .rn-fv__sub { margin-top: 16px; font-size: 14px; line-height: 1.9; }
}


/* ==========================================================================
   複数ページで使う共通セクション（REASON / 比較表 / CASE / FAQ）
   ========================================================================== */
/* ==========================================================================
   REASON  (y=1943-3981)
   ========================================================================== */
.rn-reason__head { padding: 40px 40px 0; }

.rn-reason__row {
  display: flex;
  align-items: stretch;
  margin: 40px 40px 0;
  border: 1px solid var(--rn-blue);
}
.rn-reason__row:last-child { margin-bottom: 60px; }

.rn-reason__aside {
  flex: 0 0 640px;
  background: var(--rn-blue-pale);
  border-right: 1px solid var(--rn-blue);
  padding: 40px;
  position: relative;
}
.rn-reason__num {
  display: block;
  font-family: 'Brawler', var(--rn-serif);
  font-size: 60px;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--rn-blue-line);
}
.rn-reason__title {
  font-family: var(--rn-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--rn-blue);
  margin: 60px 0 0;
}
.rn-reason__desc { margin-top: 34px; font-size: 20px; line-height: 38px; }
.rn-reason__script { display: block; margin-top: 40px; width: 380px; max-width: 100%; opacity: .55; }

.rn-reason__main { flex: 1 1 auto; min-width: 0; padding: 40px; }

/* 検定カード */
.rn-cert { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.rn-cert__card { background: var(--rn-blue-pale); }
.rn-cert__title {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rn-blue);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}
.rn-cert__body { padding: 24px; text-align: center; }
.rn-cert__body img { width: 225px; height: auto; }
.rn-cert__body p { margin-top: 16px; font-size: 16px; line-height: 1.7; text-align: left; }
/* メダル画像の直下に出す公式資格名（WF TOP R70） */
.rn-cert__body .rn-cert__official {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--rn-gray);
  text-align: center;
}

.rn-cert__note { display: flex; align-items: center; gap: 40px; margin-top: 40px; }
.rn-cert__badge { width: 117px; height: 117px; flex: none; }
.rn-cert__note p {
  font-family: var(--rn-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.7;
  letter-spacing: .1em;
}
.rn-cert__note em { font-style: normal; color: var(--rn-blue); }
.rn-cert__note-body { display: flex; flex-direction: column; gap: 12px; }
.rn-cert__note .rn-cert__salon {
  font-family: var(--rn-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: .04em;
}
.rn-cert__note .rn-cert__salon em { display: block; font-weight: 700; }
.rn-cert__salon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: .04em;
}
.rn-cert__salon-list em { font-style: normal; font-weight: 700; color: var(--rn-blue); }

/* 02 写真 2 枚 */
.rn-reason__main--photos { display: flex; gap: 40px; align-items: center; }
.rn-reason__main--photos img { width: calc(50% - 20px); height: 363px; object-fit: cover; }

/* 03 ミニお客様の声 */
.rn-reason__main--voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.rn-minivoice { border: 1px solid var(--rn-blue); padding: 24px; text-align: center; }
.rn-minivoice img { width: auto; height: 124px; margin: 0 auto; }
.rn-minivoice__name { font-size: 20px; margin-top: 12px; }
.rn-minivoice__text { font-size: 16px; line-height: 1.7; margin-top: 16px; text-align: left; }

/* 04 ワックス比較表 */
.rn-wax { width: 100%; border-collapse: collapse; }
.rn-wax th, .rn-wax td { border: 1px solid var(--rn-blue); padding: 14px 20px; font-size: 16px; line-height: 1.7; }
.rn-wax thead th { background: var(--rn-blue); color: #fff; font-weight: 700; font-size: 20px; text-align: center; height: 58px; }
.rn-wax thead th:first-child { background: var(--rn-blue); border-color: var(--rn-blue); }
.rn-wax tbody th { background: var(--rn-blue-pale); color: var(--rn-blue); font-weight: 700; font-size: 20px; text-align: center; width: 190px; }
/* 箇条書き：2 行目以降を「・」の後ろに揃える（ぶら下げインデント） */
.rn-wax__list li { padding-left: 1em; text-indent: -1em; }
.rn-wax__list li::before { content: '・'; }
.rn-wax__note {
  margin-top: 34px;
  font-family: var(--rn-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: .1em;
}


/* ==========================================================================
   OUR DIFFERENCE  (y=4466-4995)
   ========================================================================== */
.rn-compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rn-compare th, .rn-compare td { border: 1px solid var(--rn-blue-line); font-size: 20px; line-height: 1.5; padding: 14px 16px; text-align: center; }
.rn-compare thead th { height: 99px; font-weight: 700; font-size: 30px; color: #fff; }
.rn-compare__corner { background: var(--rn-blue-pale2); border-color: var(--rn-blue-pale2) !important; width: 21%; }
.rn-compare__ours { background: var(--rn-blue); border-color: var(--rn-blue); }
.rn-compare__theirs { background: #8d8d8d; border-color: #8d8d8d; }
.rn-compare tbody th { background: var(--rn-blue-pale2); color: var(--rn-blue); font-weight: 700; height: 70px; }
.rn-compare tbody td { background: #fff; }
.rn-compare tbody td.is-ours { color: var(--rn-blue); border-left: 1px solid var(--rn-blue); border-right: 1px solid var(--rn-blue); }
.rn-compare tbody tr:last-child td.is-ours { border-bottom: 1px solid var(--rn-blue); }


/* ==========================================================================
   CASE  (y=6194-6765)
   ========================================================================== */
.rn-case__script { display: block; margin-top: 56px; width: 380px; max-width: 100%; opacity: .5; }
.rn-case__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.rn-case__photos { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); }
.rn-case__photos img { width: 100%; height: 320px; object-fit: cover; }
.rn-case__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 61px;
  height: 61px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rn-blue);
}
/* 支給素材が 1 枚の中に上＝施術前／下＝施術後を収めた組写真の場合。
   2 枚並べの枠に入れると横方向が大きく切れるので、元画像の比率のまま 1 枚で見せる。 */
.rn-case__photos--single { grid-template-columns: 1fr; }
/* 組写真は素材ごとに比率が違う（TOP=1:1／店舗詳細=533:400）ので、
   aspect-ratio は指定せず img の width/height 属性から出る実比率に任せる。
   （`aspect-ratio: auto` と書くと属性由来の比率まで消えて高さが 0 になる） */
.rn-case__photos--single img { height: auto; }
/* 組写真は上下に並ぶので、before → after を示す矢印も下向きにする
   （.rn-arrow の素材は左向きの「く」の字。既定の 180deg で右向きなので 270deg で下向き）。
   .rn-case__arrow の位置指定（left/top 50%）がそのまま上下の継ぎ目に重なる */
.rn-case__photos--single .rn-arrow { transform: rotate(270deg); }
.rn-case__body { background: var(--rn-blue-pale); padding: 24px; }
.rn-case__name { font-size: 20px; }
.rn-case__text { font-size: 16px; line-height: 1.7; margin-top: 16px; }


/* ==========================================================================
   FAQ  (y=7838-8407)
   ========================================================================== */
.rn-faq__item + .rn-faq__item { margin-top: 20px; }
.rn-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0 10px 20px;
  background: var(--rn-blue-pale);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.rn-faq__mark {
  font-family: var(--rn-cond);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: .1em;
  color: var(--rn-blue);
  line-height: 1;
}
.rn-faq__text { flex: 1 1 auto; font-weight: 700; font-size: 20px; line-height: 1.5; }
.rn-faq__icon {
  flex: none;
  width: 60px;
  align-self: stretch;
  background: var(--rn-blue);
  position: relative;
}
.rn-faq__icon::before,
.rn-faq__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .3s, opacity .3s;
}
.rn-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.rn-faq__item.is-open .rn-faq__icon { background: #000; }
.rn-faq__item.is-open .rn-faq__icon::after { opacity: 0; }

.rn-faq__a {
  max-height: 0;
  overflow: hidden;
  background: var(--rn-blue-pale);
  transition: max-height .35s ease;
}
.rn-faq__a p { padding: 0 20px 24px; font-size: 16px; line-height: 1.8; }


/* 共通セクションのレスポンシブ */

@media screen and (max-width: 1280px) {
  .rn-reason__aside { flex-basis: 42%; }
  .rn-reason__title { font-size: 26px; margin-top: 32px; }
  .rn-reason__desc { font-size: 18px; line-height: 2; }
  .rn-cert__note p, .rn-wax__note { font-size: 20px; }
  .rn-cert__note .rn-cert__salon, .rn-cert__salon-list { font-size: 16px; }
  .rn-voice__script { width: 240px; margin-right: 0; }
  .rn-compare th, .rn-compare td { font-size: 17px; }
  .rn-compare thead th { font-size: 24px; }
}

@media screen and (max-width: 1280px) {
  .rn-reason__row { flex-direction: column; }
  .rn-reason__aside { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--rn-blue); }
  .rn-reason__script { display: none; }
  .rn-case__script, .rn-concept__script { width: 260px; }
}

@media screen and (max-width: 767px) {
  .rn-voice__script { width: 180px; align-self: flex-end; margin-top: 0; }
  .rn-reason__head { padding: 40px 20px 0; }
  .rn-reason__row { margin: 24px 20px 0; }
  .rn-reason__row:last-child { margin-bottom: 40px; }
  .rn-reason__aside, .rn-reason__main { padding: 24px 20px; }
  .rn-reason__num { font-size: 44px; }
  .rn-reason__title { font-size: 20px; margin-top: 20px; }
  .rn-reason__desc { font-size: 14px; line-height: 1.9; margin-top: 20px; }
  .rn-cert__title { height: 48px; font-size: 15px; }
  .rn-cert__body { padding: 16px; }
  .rn-cert__body p { font-size: 13px; }
  .rn-cert__note { flex-direction: column; gap: 16px; margin-top: 24px; }
  .rn-cert__note p { font-size: 15px; }
  .rn-cert__note .rn-cert__salon, .rn-cert__salon-list { font-size: 13px; }
  .rn-cert__salon-list { flex-direction: column; gap: 2px; }
  .rn-cert__body .rn-cert__official { font-size: 11px; }
  .rn-reason__main--photos { flex-direction: column; gap: 16px; }
  .rn-reason__main--photos img { width: 100%; height: 220px; }
  .rn-reason__main--voices { grid-template-columns: 1fr; gap: 16px; }
  .rn-minivoice { padding: 16px; }
  .rn-minivoice img { height: 90px; }
  .rn-minivoice__name { font-size: 15px; }
  .rn-minivoice__text { font-size: 13px; }
  /* 幅 290px 前後しかないので、見出し列を詰めて本文の列幅を確保する */
  .rn-wax { table-layout: fixed; }
  .rn-wax th, .rn-wax td { font-size: 12px; padding: 10px 6px; }
  /* 「ハードワックス」を 1 行に収める。320px 幅では 12px だと列からはみ出すので幅に合わせて縮める */
  .rn-wax thead th { font-size: min(12px, 3.5vw); height: 44px; padding: 8px 2px; letter-spacing: 0; white-space: nowrap; }
  .rn-wax thead th:first-child { width: 66px; }
  .rn-wax tbody th { font-size: 12px; width: 66px; padding: 10px 2px; letter-spacing: 0; white-space: nowrap; }
  .rn-wax__list li + li { margin-top: 4px; }
  .rn-wax__note { font-size: 15px; margin-top: 20px; }
  .rn-compare th, .rn-compare td { font-size: 12px; padding: 10px 6px; }
  .rn-compare thead th { height: 60px; font-size: 15px; }
  .rn-compare tbody th { height: auto; }
  .rn-case__list { gap: 20px; }
  .rn-case__photos img { height: 180px; }
  .rn-case__photos--single img { height: auto; }
  .rn-case__arrow { width: 40px; height: 40px; }
  .rn-case__body { padding: 16px; }
  .rn-case__name { font-size: 15px; }
  .rn-case__text { font-size: 13px; margin-top: 10px; }
  .rn-case__script { width: 200px; margin-top: 28px; }
  .rn-faq__q { padding-left: 14px; gap: 10px; }
  .rn-faq__mark { font-size: 20px; }
  .rn-faq__text { font-size: 15px; }
  .rn-faq__icon { width: 44px; }
  .rn-faq__a p { padding: 0 14px 20px; font-size: 13px; }
}

.rn-voice__script { width: 300px; height: auto; flex: none; margin-top: 10px; margin-right: 211px; }

@media screen and (max-width: 1280px) {
  .rn-voice__script { width: 240px; margin-right: 0; }
}
@media screen and (max-width: 767px) {
  .rn-voice__script { width: 180px; align-self: flex-end; margin-top: 0; }

  /* 見出しと手書き文字を横に並べると見出し側が 243px まで潰れ、
     「SHIHO担当お客様の声」の「声」だけが次行に落ちる。SP では縦積みにする。
     .rn-sec-head の定義（上方）より後ろに置かないと後勝ちで打ち消される */
  .rn-sec-head { flex-direction: column; }
}


/* ==========================================================================
   投稿カード（TOP の新着ブログ / ブログ一覧 / アーカイブ / 検索で共用）
   ========================================================================== */
.rn-card-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px; margin-top: 34px; }
.rn-card { border: 1px solid var(--rn-blue); }
.rn-card > a { display: block; position: relative; padding: 16px 16px 54px; height: 100%; transition: opacity .2s; }
.rn-card > a:hover { opacity: .6; }
.rn-card__photo img { width: 100%; height: 245px; object-fit: cover; }
.rn-card__date { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 20px; }
.rn-card__date .rn-ico { width: 16px; height: 16px; }
.rn-card__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.rn-card__more {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70px;
  height: 38px;
  background: var(--rn-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rn-card--empty { display: flex; align-items: center; justify-content: center; padding: 40px; }


@media screen and (max-width: 1280px) {
  .rn-card-list { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 767px) {
  .rn-card-list { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .rn-card__photo img { height: 200px; }
  .rn-card__title { font-size: 16px; }
}

/* ==========================================================================
   SP の改行位置
   幅が狭く 1 行の文字数が少ないため、既定の折り返しだと語の途中で割れたり
   最後の 1〜2 文字だけが次行に落ちたりする。PC は Figma どおりの改行を
   保ちたいので 767px 以下にだけ適用する。
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* 日本語を文節単位で折り返す（「サロン」が「サ/ロン」と割れるのを防ぐ） */
  .rn :where(h1, h2, h3, h4, p, li, dt, dd, figcaption) { word-break: auto-phrase; }

  /* auto-phrase は min-content 幅を「最長の文節」まで押し上げる。grid/flex アイテムは
     既定の min-width:auto でそれ未満に縮めず、はみ出す（施術の流れの li で実際に発生）。
     縮めるよう min-width を明示する */
  .rn :where(ul, ol, dl) > :where(li, dt, dd) { min-width: 0; }

  /* 本文は最終行が極端に短くなるのを避ける */
  .rn :where(p, li, dd) { text-wrap: pretty; }

  /* 見出し・ラベルは行長を均等化して「最後の1〜2文字だけ次行」を防ぐ。
     p タグの .rn-badge__title 等があるので上の pretty より後に置くこと */
  .rn :where(h1, h2, h3, h4),
  .rn-badge__title,
  .rn-staffcard__label,
  .rn-flow__name,
  .rn-news__title,
  .rn-faq__q { text-wrap: balance; }

  /* TOP の資格カード・認定サロンは幅が狭く、文節単位だと行末に 1〜3 文字分の空きが出る
     （2026-09-08 先方指摘「右側に余白が空いている」）。文字単位で折り返して両端揃えにする。
     2026-09-16 追加指摘で REASON 02 以降（本文・お客様の声・ワックス注記）にも広げた。
     ワックス表のセルは狭すぎて字間が開くので対象外 */
  .rn-cert__body p:not(.rn-cert__official),
  .rn-cert__note-body > p,
  .rn-reason__desc,
  .rn-minivoice__text,
  .rn-wax__note {
    word-break: normal;
    line-break: strict;
    text-wrap: wrap;
    text-align: justify;
  }
}

/* ==========================================================================
   SP のタップ領域
   フッターのリンクと電話番号が行の高さ（20〜26px）しかなく、指では押しづらい。
   文字サイズは変えずに min-height だけで 44px を確保する。
   ========================================================================== */
@media screen and (max-width: 767px) {
  .rn-footer__col ul a,
  .rn-footer__col-title a,
  .rn-shop__info dd a,
  .rn-overview__info dd a,
  .rn-contact__tel a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* 店舗カードの電話番号は 44px のタップ領域ぶん行が広がるので、上下の余白を相殺して他の行と間隔を揃える */
  .rn-shop__info dd a { margin: -12px 0 -10px; }
  /* 上の min-height でリンクが縦に伸びる分、リスト側の余白は詰める */
  .rn-footer__col ul li + li { margin-top: 0; }

  /* パンくずとカード内のサブリンクは帯の高さ（40px）に収める必要があるため
     44px は取れない。WCAG 2.5.8 の最小 24px は満たす */
  .rn-crumb a,
  .rn-staffcard__name a,
  .rn-profile__name a { display: inline-flex; align-items: center; min-height: 24px; }
}

/* ==========================================================================
   SP 追従の予約 CTA（footer-renewal.php / renewal.js）
   767px 以下だけ画面下に固定。FV を過ぎたら .is-shown で下からせり上がる。
   ヘッダーの CTA はアイコンだけなので、親指の届く位置に店舗別の導線を置く
   ========================================================================== */
.rn-fixcta { display: none; }

@media screen and (max-width: 767px) {
  .rn { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  .rn-fixcta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90; /* ヘッダー（100）とドロワーより下 */
    display: flex;
    gap: 1px;
    background: #fff;
    border-top: 1px solid #fff;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(21, 23, 226, .12);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .rn-fixcta.is-shown {
    transform: none;
    visibility: visible;
    transition: transform .3s ease;
  }
  .rn-fixcta__btn {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--rn-blue);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: opacity .2s;
  }
  .rn-fixcta__btn:hover { opacity: .6; }
  .rn-fixcta__btn .rn-cal { width: 20px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-fixcta, .rn-fixcta.is-shown { transition: none; }
}

/* ==========================================================================
   等倍スケール（1281px 以上）
   1920px のデザインをリフローさせず、そのまま比例縮小／拡大する。
   倍率 --rn-zoom は header-renewal.php の <head> インラインスクリプトが
   実ビューポート幅（スクロールバーを除いた clientWidth）から算出する。
   1280px 以下は倍率 1 のまま、通常のレスポンシブ（タブレット/SP）に切り替わる。
   ※ 後勝ちで打ち消されないよう、必ずファイル末尾に置くこと
   ========================================================================== */
@media screen and (min-width: 1281px) {
  .rn { zoom: var(--rn-zoom, 1); }

  /* ビューポート単位は zoom の影響を受けない（実ピクセルのまま）ため、
     倍率で割り戻して見かけの高さを画面高さに一致させる。
     ヘッダー高さは zoom 座標系の値なので、割り戻したあとに引く */
  .rn-side__inner { height: calc(100vh / var(--rn-zoom, 1) - var(--rn-header-h)); }
}