@charset "UTF-8";
/* ==========================================================================
   beauty.css — 下層03 BEAUTY ROUTE 専用
   値の出典: XD 案件 260911-_-_-0819 / snapshot 2026-08-19T04-07-19-995Z
             アートボード SP_下層03_BEAUTY ROUTE 12ffac77（750×15563）
             03_mainv 32f18884 / contents 61525797 > contents b75f8621
   方針: 750px 固定・メディアクエリなし・XD の px をそのまま使う。
         font-size だけ rem（16px 基準）、寸法・余白は px。
         こぶりなゴシック W6 のテキストは Web フォントを使わず画像で配置。
   共通ブロック（.route-card / .quiz-rally / .season-info / .notes / .link-btn）は
   css/common.css がオーナー。このファイルでは一切定義しない。

   目次
   0. ページ枠
   1. 合体シェイプ（円の union）のマスク
   2. メインビジュアル（XD: 03_mainv 32f18884 / 750×930）
   3. 本文の外枠（XD: contents > contents b75f8621 / 9073px）
   4. スポットの見出し（時刻 / 場所 / 店名）
   5. カプセル型写真 3 枚 + 交差部（XD: グループ 13381 / 750×780）
   6. 写真クラスター（スポットごと）
   7. 店名・料金・本文（XD: グループ 13396 / 13433 / 13432 / 13350 / 13351 ほか）
   8. 店名バー（XD: グループ 13394 / 13392 = 長方形 9846 650×110 + ラベル + ▶）
   9. 装飾イラスト（アートボード直下・contents より前面）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ページ枠
   アートボード直下の装飾イラストを絶対配置するための基準。
   -------------------------------------------------------------------------- */
.beauty-page {
  position: relative;
  width: 750px;
}

/* --------------------------------------------------------------------------
   1. 合体シェイプ（円の union）のマスク
   XD の BooleanGroup（合体 29 / 合体 31 / gray・line）は
   直径 300px の円を 175px / 200px 間隔で並べた union。
   CSS では radial-gradient を並べたマスクで同じ形を作り、
   輪郭（XD の 2px stroke）は「半径 +2px の同形マスク × 単色」を背面に敷いて出す。
   -------------------------------------------------------------------------- */
.beauty-blob6,
.beauty-blob6__line {
  position: absolute;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* 6 円（3列×2段）= 650×500 */
.beauty-blob6 {
  z-index: 1;
  width: 650px;
  height: 500px;
  -webkit-mask-image:
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%);
          mask-image:
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 300px 300px;
          mask-size: 300px 300px;
  -webkit-mask-position: 0 0, 175px 0, 350px 0, 0 200px, 175px 200px, 350px 200px;
          mask-position: 0 0, 175px 0, 350px 0, 0 200px, 175px 200px, 350px 200px;
}

/* シェイプいっぱいに敷く写真。メインビジュアルの map（シェイプより大きく
   オフセットして置く）と衝突しないよう、専用クラスで指定する */
.beauty-blob__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 6 円の輪郭（半径 152px = 直径 304px・位置は 2px 外側） */
.beauty-blob6__line {
  z-index: 0;
  left: -2px;
  top: -2px;
  width: 654px;
  height: 504px;
  background-color: var(--c-ink);
  -webkit-mask-image:
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%);
          mask-image:
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side, #000 99%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 304px 304px;
          mask-size: 304px 304px;
  -webkit-mask-position: 0 0, 175px 0, 350px 0, 0 200px, 175px 200px, 350px 200px;
          mask-position: 0 0, 175px 0, 350px 0, 0 200px, 175px 200px, 350px 200px;
}

/* 4 円（2列×2段）= 475×500（XD: 合体 31） */

/* --------------------------------------------------------------------------
   2. メインビジュアル（XD: 03_mainv 32f18884 / 750×930）
   6 円シェイプの地図・lady・ステッカー・タイトル・リード文はすべて
   1 枚に平坦化した PNG（2 倍 1500×1860 → 表示 750×930）。
   焼き込まれた文字は HTML 側に .u-visually-hidden の実テキストで残している。
   -------------------------------------------------------------------------- */
.beauty-mv {
  position: relative;
  width: 750px;
  height: 930px;
}
.beauty-mv__img {
  display: block;
  width: 750px;
  height: 930px;
}

/* --------------------------------------------------------------------------
   3. 本文の外枠（XD: contents > contents b75f8621 / 9073px）
   ブロック間は XD の stack spacing 60px。
   スポットの高さは XD 実寸を固定して、内部テキストの折り返し差による
   ページ全体の縦ズレ（＝装飾イラストの位置ズレ）を出さないようにしている。
   -------------------------------------------------------------------------- */
/* XD の contents スタック（間隔 120）では、メインビジュアルの下に 120px の間が入る。
   ART / FAMILY はこれを common.css 9-7 の main > * + * が付けているが、BEAUTY だけは
   本文が main の直下ではなく .beauty-page の中にあって共通ルールが届かないため、
   同じ 120px をここで持つ。値を変えるときは common.css 9-7 と揃えること。 */
.beauty-body { position: relative; z-index: 1; width: 750px; margin-top: 120px; }
.beauty-body > * + * { margin-top: 60px; }

.beauty-spot { position: relative; width: 750px; }
.beauty-spot > * + * { margin-top: 30px; } /* XD: 各スポット内の stack spacing 30px */
.beauty-spot--01 { height: 2842px; }
.beauty-spot--02 { height: 1322px; }
.beauty-spot--03 { height: 1551px; }
.beauty-spot--04 { height: 825px; }
/* XD 実寸は 1873px。「※外部サイトへ遷移します」を 2 か所削除した（2026-09-10）ぶん
   90px（注記 35px + stack 10px の 2 組）を引いて 1783px にしてある。詰めないと
   スポット下端に 89px の空白が残る。装飾イラストは .beauty-page 原点の絶対配置で、
   最下点 .beauty-illust--10 の下端 8607px はこのスポットの中身より上なので影響しない。 */
.beauty-spot--05 { height: 1783px; }

/* --------------------------------------------------------------------------
   4. スポットの見出し（時刻 / 場所 / 店名）
   XD: グループ 12942（stack 15px）= 時刻 + 場所ボックス + 店名ボックス
   -------------------------------------------------------------------------- */
.beauty-spot__head { margin-left: 50px; }

/* 時刻（10:00 等）は common.css 9-4 の .time-num。
   白帯 + ピン + 施設名（XD: グループ 13326）と店名の白箱（XD: グループ 13341 / 13349 / 13407）は
   どちらも YuGothic のため白帯ごと 2 倍 PNG で書き出して貼っている（common.css 9-5）。
   帯・白箱の寸法は画像そのものが持つので、ここでは縦の間隔だけ指定する。 */
.beauty-spot__place {
  margin-top: 15px;         /* XD: グループ 12942 の stack spacing 15px */
}
.beauty-spot__name {        /* 店名の白箱。白地・左右の余白は画像に含まれる */
  display: block;
  margin-top: 15px;         /* XD: グループ 12942 の stack spacing 15px */
}
.beauty-spot__name img {
  display: block;
}

/* --------------------------------------------------------------------------
   5. カプセル型写真 3 枚 + 交差部（XD: グループ 13381 / 750×780）
   交差部は「片方のシェイプで切り抜いた枠 × もう片方のシェイプ」で作る。
   オレンジ塗り + 2px の輪郭を両側の弧ぶん重ねて出している。
   -------------------------------------------------------------------------- */
/* XD レンダー実測：3 枚のピルは左端 25px から始まり、右端はアートボードからはみ出して切れる。
   中の相対関係はそのままに、グループごと 25px 右へ寄せる。 */
.beauty-pills { position: relative; width: 750px; height: 780px; margin-left: 25px; }
.beauty-pills__flat { display: block; width: 750px; height: 780px; }
.beauty-pill {
  position: absolute;
  width: 450px;
  height: 300px;
  border: 2px solid var(--c-ink);
  border-radius: 150px;
  object-fit: cover;
}
.beauty-pill--dior    { left: 300px; top: 0;     z-index: 2; }
.beauty-pill--clarins { left: 0;     top: 240px; z-index: 3; }
.beauty-pill--tiara   { left: 250px; top: 480px; z-index: 1; }

.beauty-pills__dot {
  position: absolute;
  left: 285px;
  top: 145px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--c-gray01);
  filter: blur(10px);
  z-index: 4;
}
/* XD レンダー（アートボード 1 倍 PNG）実測で確定した位置。
   3 本の罫線が y=1377 / 1450 / 1523・いずれも x=50 開始（幅 254 / 175 / 308）で、
   画像内の罫線が y=42 / 115 / 188・x=0 開始なので
   ブロック左上 = アートボード (50, 1335)。ディオールのピル上端も 1335 なので
   .beauty-pills（左 25px・上端 = ディオール上端）に対しては left: 25px / top: 0。
   左端は見出しの時刻・場所・店名（.beauty-spot__head の margin-left: 50px）と揃う。
   ※ get_design_node が返す x:0 / y:42 は失効値で採用しない。 */
.beauty-pills__copy { position: absolute; left: 25px; top: 0; width: 318px; height: 189px; z-index: 5; }

.beauty-cross {
  position: absolute;
  width: 450px;
  height: 300px;
  border-radius: 150px;
  overflow: hidden;
  z-index: 6;
}
.beauty-cross > i {
  position: absolute;
  display: block;
  width: 450px;
  height: 300px;
  border: 2px solid var(--c-ink);
  border-radius: 150px;
}
/* 交差 14: クラランス ∩ ティアラリーン */
.beauty-cross--a1        { left: 250px; top: 480px; }                                        /* 枠 = ティアラリーン */
.beauty-cross--a1 > i    { left: -250px; top: -240px; background-color: var(--c-amber); }    /* 中身 = クラランス */
.beauty-cross--a2        { left: 0;     top: 240px; }                                        /* 枠 = クラランス */
.beauty-cross--a2 > i    { left: 250px;  top: 240px; }                                       /* 輪郭 = ティアラリーン */
/* 交差 15: ディオール ∩ クラランス */
.beauty-cross--b1        { left: 0;     top: 240px; }                                        /* 枠 = クラランス */
.beauty-cross--b1 > i    { left: 300px;  top: -240px; background-color: var(--c-amber); }    /* 中身 = ディオール */
.beauty-cross--b2        { left: 300px; top: 0; }                                            /* 枠 = ディオール */
.beauty-cross--b2 > i    { left: -300px; top: 240px; }                                       /* 輪郭 = クラランス */

/* --------------------------------------------------------------------------
   6. 写真クラスター（スポットごと）
   -------------------------------------------------------------------------- */
.beauty-cluster { position: relative; margin-left: 50px; }
/* 平坦化した写真ブロック（XD の合体シェイプはそのまま 1 枚で貼る） */
.beauty-cluster__flat { display: block; width: 100%; height: 100%; }

/* 13:00 unique（XD: グループ 13380 / 701×646）
   平坦化 PNG の書き出し範囲は「中身の外接矩形」なので、絵柄の左端（丸写真の x=20）が
   PNG の x=0 にあたる。したがってページ左端から 20px の位置に置く。 */
.beauty-cluster--02 { width: 702px; height: 646px; margin-left: 20px; }

/* 14:30 SK-II（XD: 合体 29 / 650×500） */
.beauty-blobwrap { position: relative; width: 650px; height: 500px; margin-left: 50px; }
.beauty-blobwrap .beauty-blob6 { left: 0; top: 0; }

/* NARS（XD: グループ 13379 / 650×500 = オレンジ合体シェイプ + 商品写真） */
.beauty-cluster--04 { width: 650px; height: 500px; }

/* 16:00 CosmeKitchen / Biople（XD: グループ 13403 / 650×750） */
.beauty-cluster--05 { width: 651px; height: 751px; } /* 平坦化 PNG 1302×1502 */

/* こぶりなゴシックのコピー画像を単体で置くとき（14:30 / XD: グループ 13377） */
.beauty-copy { display: block; width: 406px; height: 116px; margin-left: 50px; }

/* --------------------------------------------------------------------------
   7. 店名・料金・本文（XD: グループ 13396 / 13433 / 13432 / 13350 / 13351 ほか）
   -------------------------------------------------------------------------- */
/* ■ 行送りとボックス高さの扱い（リーディング補正）
   XD のテキストボックスの高さは「1 行目だけフォント本来の行高 + 2 行目以降は行送り」で決まる。
   CSS は全行に line-height を掛けるため、行送りだけ写すとブロックごとに数 px 膨らみ、
   スポットの固定高（.beauty-spot--0N）を本文が突き抜けて、次の矢印との 60px が食われる
   （修正前の実測: 突き抜け 13〜47px ／ 矢印手前の余白が 60 → 13px）。
   ART / FAMILY と同じく、はみ出しぶんを負の margin で削ってボックス高を XD に一致させる。
   差はブロックごとに一定（行数が変わっても変化しない）。

   XD 実測値（find_design_nodes / snapshot 2026-08-20T02-26-13-346Z）
     .beauty-detail__name  Serif 28 / 枠 40px   … 〈unique(ユニイク)〉 40 → 補正なし
     .beauty-detail__item  Serif 28 / 行送り 42 … 2 行 82px（40 + 42）      → −2
     .beauty-detail__text  Sans  26 / 行送り 48 … 3 行 133px（37 + 48×2）   → −11
     .beauty-detail__note  Sans  23 / 行送り 38 … 1 行 34px                 → −4
     （.beauty-barwrap__note は注記の削除にともない撤去。2026-09-10） */

.beauty-detail { width: 650px; margin-left: 50px; }
.beauty-detail__list > * + * { margin-top: 10px; } /* XD: グループ 12856 の stack spacing 10px */
/* リーディング補正で上へ 1px 詰めたぶん、stack spacing 側を 1px 足しておく
   （補正なしの 10px と見た目を揃えるため。この 1 行が無いと上の * + * が負けて間隔が消える） */
.beauty-detail__list > * + .beauty-detail__item { margin-top: 9px; }

.beauty-detail__name {
  font-family: var(--f-jp-serif);
  font-size: 1.75rem;   /* 28px */
  font-weight: 700;
  line-height: 40px;    /* XD: テキスト枠 40px（行送り 36px は 1 行のため未使用） */
  color: var(--c-ink);
}
.beauty-detail__name--tight { letter-spacing: -.04em; } /* XD: 文字間 −40 */

.beauty-detail__item {
  font-family: var(--f-jp-serif);
  font-size: 1.75rem;   /* 28px */
  font-weight: 500;
  line-height: 42px;    /* XD: 行送り 42px */
  margin-top: -1px;     /* リーディング補正: 42n → 40 + 42(n-1) */
  margin-bottom: -1px;
  color: var(--c-ink);
}

.beauty-detail__text {
  margin-top: 24.5px;   /* XD: stack spacing 30px − リーディング補正 5.5px */
  margin-bottom: -5.5px;/* リーディング補正: 48n → 37 + 48(n-1) */
  font-family: var(--f-jp);
  font-size: 1.625rem;  /* 26px */
  font-weight: 400;
  line-height: 48px;    /* XD: 行送り 48px */
  /* XD のこの本文には文字ツメが入っていないため共通の palt を打ち消す
     （付けたままだと XD と折り返し位置が変わる） */
  font-feature-settings: normal;
  color: var(--c-ink);
}

.beauty-detail__note {
  margin-top: 28px;     /* XD: stack spacing 30px − リーディング補正 2px */
  margin-bottom: -2px;  /* リーディング補正: 38n → 34 + 38(n-1) */
  font-family: var(--f-jp);
  font-size: 1.4375rem; /* 23px */
  font-weight: 400;
  line-height: 38px;    /* XD: 行送り 38px */
  /* XD のこの本文には文字ツメが入っていないため共通の palt を打ち消す
     （付けたままだと XD と折り返し位置が変わる） */
  font-feature-settings: normal;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   8. 店名バー（XD: グループ 13394 / 13392 = 長方形 9846 650×110 + ラベル + ▶）
   -------------------------------------------------------------------------- */
/* 丸アイコン（XD: 前面オブジェクトで型抜き 9）は common.css 9-3 の .link-icon。
   以前は中身が同一の SVG 3 本（9_44c79e / 9_ca9986 / 9_e23695）を貼っていた。 */
.beauty-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;              /* XD: グループ 12945 の stack spacing 30px */
  width: 650px;
  height: 110px;
  margin-left: 50px;
  border: 1px solid var(--c-ink);
  background-color: var(--c-gray00);
}
.beauty-bar__label {
  font-family: var(--f-jp);
  font-size: 1.75rem;   /* 28px */
  font-weight: 400;
  line-height: 40px;    /* XD: テキスト枠 40px */
  letter-spacing: .12em; /* XD: 120 */
  color: var(--c-ink);
}
/* 店名バーの受け皿（XD: 縦スタック spacing 10px）。
   XD では下に「※外部サイトへ遷移します」が続くスタックだったが、注記は削除済み
   （2026-09-10）。バー 1 枚だけになったので gap は現状効いていない。 */
.beauty-barwrap {
  display: flex;
  flex-direction: column;
  gap: 10px;            /* XD: stack spacing 10px */
}

/* --------------------------------------------------------------------------
   9. 装飾イラスト（アートボード直下・contents より前面）
   top はアートボード座標そのまま（.beauty-page の上端 = アートボード y=0）。

   ■ 装飾イラストの原点は 3 ページで別（意図的に揃えていない）
     ART    = 重なっているスポットの左上（このファイル）
     FAMILY = 本文ブロック .family-body の上端（= アートボード y1050）
     BEAUTY = .beauty-page の上端（= アートボード y0。アートボード座標そのまま）
     ART だけスポット原点なのは、ART の記事がスポットごとに原稿の行数なりの高さで、
     まだ差し替え予定の原稿が残っているため（ページ絶対座標だと原稿が 1 行増えた
     時点でそれ以降のイラストが全部ずれる）。逆に FAMILY / BEAUTY をスポット原点へ
     移すと、イラストがスポットの重なり順の中に入るぶん前後関係が変わる
     （後ろのスポットが前のスポットのはみ出しを覆う）。揃えるときは要スクリーンショット確認。
   -------------------------------------------------------------------------- */
.beauty-illusts {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 750px;
  height: 100%;
  pointer-events: none;
}
.beauty-illust { position: absolute; }
.beauty-illust--01 { left: 110px; top: 1895px; width: 222px; height: 220px; }
.beauty-illust--02 { left: 614px; top: 4161px; width: 96px;  height: 100px; }
.beauty-illust--03 { left: 541px; top: 4596px; width: 300px; height: 560px; }
.beauty-illust--04 { left: 35px;  top: 4786px; width: 90px;  height: 101px; }
.beauty-illust--05 { left: 641px; top: 5940px; width: 97px;  height: 120px; }
/* 回転しているノードの置き方（XD 実測で確定）
   XD の x / y は「ローカル原点（＝回転前の左上）を回転させたあとの平行移動先」で、
   回転軸は中心ではなく左上。書き出し PNG は回転後の外接矩形（絵柄は回転済み）。
   したがって外接矩形の左上は (x, y) + (回転後 4 隅の最小 x, 最小 y) で求める。
   rotate() は付けない（付けると二重に回る）。 */
.beauty-illust--06 { left: -48.92px; top: 6304px;    width: 159px; height: 155.5px; } /* 110×120 r60 */
.beauty-illust--07 { left: -6.12px;  top: 7191.08px; width: 169px; height: 167px; }   /* 126×120 r150 */
.beauty-illust--08 { left: 521px; top: 7665px; width: 209px; height: 243px; }
.beauty-illust--09 { left: 452px; top: 8209px; width: 119px; height: 160px; }
.beauty-illust--10 { left: 529px;    top: 8369px;    width: 171px; height: 237.5px; } /* 58×240 r30 */