@charset "UTF-8";
/* ==========================================================================
   family.css — 02.FAMILY ROUTE（下層02）専用スタイル
   出典: XD 案件 260911-_-_-0819 / snapshot 2026-08-19T04-06-38-069Z
         アートボード SP_下層02_FAMILY ROUTE（750×15694 / guid 31e8d025…）
         02_mainv 74847929… / contents 2b91c4db…（内側 contents d2d22da3…）
   前提: 750px 固定・スマホのみ（メディアクエリ / vw は使わない）
         共通は css/common.css（オーナー: 共通側）。tokens.css の変数を利用。
         common.css のリセットで body { font-size:0; line-height:0 } のため
         テキストには必ず font-size / line-height を書く。
   font-size は 16px 基準の rem（末尾コメントに XD の px）。寸法は px のまま。

   目次
   0. ページ全体の枠
   1. メインビジュアル（XD: 02_mainv / 750×930）
   2. ルート本体（内側 contents = 縦スタック spacings 60）
     2-1. 時刻 + 場所（グループ 12942 = 縦スタック spacings 15）
     2-2. コピー画像（Koburina Gothic Std W6 のため画像化）
     2-3. 商品情報（グループ 12856 / 13328 = 縦スタック spacings 10、
     2-4. 関連リンクの箱（長方形 9846 = 650×110 / #E4E8EC / border 1px #333）
     2-5. 写真
   3. スポットごとのコラージュ（stack でない Group = 絶対配置）
     3-1. family_01 グループ 13370（650×619）
     3-2. family_02 グループ 13342（650×700）
     3-3. family_03 グループ 13343（650×635）
     3-4. family_06 グループ 13415（658×450 → 650px 幅に正規化）
     3-5. family_07 グループ 13417（650×480）
   4. 装飾イラスト（アートボード直下の illust。本文の上に重ねる）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ページ全体の枠
   XD: 02_mainv 0〜930 → contents（縦スタック spacings 120）1050〜15694
   末尾の共通ブロックは .family-body の外（main 直下）に置き、
   メインビジュアルとの 120px も含めて間隔は common.css の main > * + * が持つ。
   -------------------------------------------------------------------------- */
/* メインビジュアルとの間の 120px は common.css の 9-7（main > * + *）が付ける。
   以前は margin: 0 auto でその共通ルールを打ち消したうえで padding-top: 120px を
   足し直していた（同じ 120px が ART / BEAUTY と別の作り方になっていた）。 */
.family-body {
  position: relative;              /* illust（装飾）の absolute 基準 */
  width: var(--page-w);
  display: flex;
  flex-direction: column;
  align-items: center;             /* 中身の .family-routes（650px）を中央に置く */
}

/* --------------------------------------------------------------------------
   1. メインビジュアル（XD: 02_mainv / 750×930）
   緑の地図・家族のイラスト・タイトル・リード文はすべて 1 枚に平坦化した PNG
   （2 倍 1500×1860 → 表示 750×930）。焼き込まれた文字は HTML 側に
   .u-visually-hidden の実テキストで残している。
   .js-header-switch の下端を過ぎたら共通ヘッダーが出る（script.js）。
   -------------------------------------------------------------------------- */
.family-mainv {
  position: relative;
  width: var(--page-w);
  height: 930px;
}
.family-mainv__img {
  display: block;
  width: 750px;
  height: 930px;
}

/* --------------------------------------------------------------------------
   2. ルート本体（内側 contents = 縦スタック spacings 60）
   -------------------------------------------------------------------------- */
.family-routes {
  position: relative;
  z-index: 1;
  width: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.family-spot {                /* family_01〜07（縦スタック spacings 30） */
  width: 650px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 2-1. 時刻 + 場所（グループ 12942 = 縦スタック spacings 15）
   時刻（10:00 等）は common.css 9-4 の .time-num、白帯 + ピン + 施設名は
   common.css 9-5 の .place-band（XD: グループ 13326 を白帯ごと 2 倍 PNG で書き出したもの）。
   帯の寸法は画像そのものが持つので、ここでは幅を指定しない。 */
.family-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  /* 親（.family-spot）の 650px へ引き伸ばさず、中身の幅で止める。
     16:00 の白帯だけ 651px あり（XD: 長方形 10098 = 651×80）、
     stretch のままだと 650px の箱から 1px はみ出した状態になっていた。
     他の 4 行は 633 / 589 / 336 / 548px なので、この指定でも見た目は変わらない。 */
  align-self: flex-start;
}

/* 2-2. コピー画像（Koburina Gothic Std W6 のため画像化）
   表示サイズは書き出し画像のスケール判定（高さ 234/380 = 2倍 / 117/190 = 1倍）で決めた値。
   XD のグループ実寸より 1px 大きいが、これは XD の書き出し時の切り上げ分。 */
.family-copy { display: block; }
.family-copy img { display: block; width: 100%; height: 100%; }
.family-copy--04 { width: 630px; height: 117px; } /* family_04 は stack の直下 */

/* 2-3. 商品情報（グループ 12856 / 13328 = 縦スタック spacings 10、
        その外側 グループ 13329 / 13340 / 13413 = spacings 30） */
.family-detail {
  width: 650px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.family-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.family-info__brand {         /* Noto Serif JP Bold 28 / 行送り 36 */
  font-family: var(--f-jp-serif);
  font-size: 1.75rem;         /* 28px */
  font-weight: 700;
  line-height: 36px;          /* XD 行送り 36px */
  padding-top: 2px;           /* リーディング補正: XD 実測ボックス 1 行 = 40px */
  padding-bottom: 2px;
  color: var(--c-ink);
}
.family-info__item {          /* Noto Serif JP Medium 28 / 行送り 42 */
  font-family: var(--f-jp-serif);
  font-size: 1.75rem;         /* 28px */
  font-weight: 500;
  line-height: 42px;          /* XD 行送り 42px */
  margin-top: -1px;           /* リーディング補正: 1 行 40px・2 行 82px */
  margin-bottom: -1px;
  color: var(--c-ink);
}
/* 〈日本橋西川〉のスペック 3 行だけの体裁。XD は 5 行すべて Noto Serif JP 28 / 行送り 42 だが、
   BEAUTY の .beauty-detail__note（〈SK-II〉の注記）に合わせて小さくする指示（2026-09-10）。
   **書体は XD どおり Noto Serif JP のまま**（2026-09-10 追加指示。いったんゴシックにしたが差し戻した）。
   合わせたのはサイズ・行送りだけで、23px / 38px が .beauty-detail__note と同値。
   **XD より小さいので取り直しで戻さないこと。**
   XD の charSpacing は 0 なので、共通の palt は .beauty-detail__note と同じく打ち消す。 */
.family-info__note {
  font-family: var(--f-jp-serif);  /* .family-info__item と同じ明朝 */
  font-size: 1.4375rem;       /* 23px（.beauty-detail__note と同値） */
  font-weight: 400;
  line-height: 38px;          /* .beauty-detail__note と同値 */
  margin-top: -2px;           /* リーディング補正: 行送り 38px → テキスト枠 1 行 34px */
  margin-bottom: -2px;
  font-feature-settings: normal;
  color: var(--c-ink);
}
.family-info__cols {          /* グループ 13434 / 13389（横スタック gap 10） */
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.family-info__cols .family-info__item { width: 320px; }
/* 行頭の四角は ■ (U+25A0)。XD 原稿の ◼ (U+25FC) + 異体字セレクタ (U+FE0E) は
   読み込んでいる 4 フォントに無く端末のフォントに落ちるため置き換えている
   （art.css の .art-meta-s と同じ扱い）。XD から取り直しても戻さないこと。 */
.family-info__period {        /* Noto Serif JP Medium 24 / 行送り 34 */
  font-family: var(--f-jp-serif);
  font-size: 1.5rem;          /* 24px */
  font-weight: 500;
  line-height: 34px;          /* XD 行送り 34px */
  padding-top: .5px;          /* リーディング補正: 1 行 35px */
  padding-bottom: .5px;
  color: var(--c-ink);
}
.family-detail__text {        /* Noto Sans JP Regular 26 / 行送り 48 */
  font-family: var(--f-jp);
  font-size: 1.625rem;        /* 26px */
  font-weight: 400;
  line-height: 48px;          /* XD 行送り 48px */
  margin-top: -5.5px;         /* リーディング補正: 37 + 48(n-1) */
  margin-bottom: -5.5px;
  /* XD のこの本文には文字ツメが入っていないため共通の palt を打ち消す
     （付けたままだと XD より 1 行短く折り返す。family_01 / family_06 で実証） */
  font-feature-settings: normal;
  color: var(--c-ink);
}

/* リーディング補正について
   XD のテキストボックス高さは「1 行目だけフォント本来の行高 + 2 行目以降が行送り」で決まる
   （Serif 28px = 40 / Serif 24px = 35 / Sans 26px = 37 / Sans 24px = 35）。
   CSS は全行に line-height を掛けるので、行送りだけ写すとブロックごとに数 px 膨らみ、
   縦に積み上がってイラストの位置がずれる。padding / 負の margin で差を吸収している。 */

/* 2-4. 関連リンクの箱（長方形 9846 = 650×110 / #E4E8EC / border 1px #333） */
.family-linkbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.family-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 650px;
  height: 110px;
  border: 1px solid var(--c-ink);
  background: var(--c-gray00);
}
.family-link__label {         /* Noto Sans JP Regular 28 / 行送り 52 / ls .12em */
  font-family: var(--f-jp);
  font-size: 1.75rem;         /* 28px */
  font-weight: 400;
  line-height: 1.86;          /* 52px / 28px */
  letter-spacing: .12em;
  color: var(--c-ink);
}
.family-link__stack {         /* グループ 13430（2 行組み） */
  display: flex;
  flex-direction: column;
}
.family-link__sub {           /* Noto Sans JP Regular 22 / 行送り 48 / 中央 */
  font-family: var(--f-jp);
  font-size: 1.375rem;        /* 22px */
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  color: var(--c-ink);
}
.family-link__stack .family-link__label { line-height: 40px; }
/* リンクボタンの丸アイコン（XD: 前面オブジェクトで型抜き 9）は common.css 9-3 の .link-icon。
   XD にはボタン下に「※外部サイトへ遷移します」の注記があるが、削除指示のため実装しない（2026-09-10）。 */

/* 2-5. 写真
   XD には stroke 2px inside があるが、四角い枠線は不要との指示で外している（2026-08-20） */
.family-photo {
  display: block;
  object-fit: cover;
}
.family-photo--full     { width: 650px; height: 450px; } /* family_04（XD レイヤー DSC01067-Edit-cut）= イッタラの器 */
/* family_05。XD のレイヤー名が「gray」だったため書き出しも gray.png だったが、
   中身は〈日本橋西川〉newmine シルクアイマスクの商品写真（グレーの仮枠ではない）。
   2026-08-24 に nishikawa_eyemask.png へ改名した。仮枠と誤解して差し替えないこと。 */
.family-photo--w650h500 { width: 650px; height: 500px; }

/* --------------------------------------------------------------------------
   3. スポットごとのコラージュ（stack でない Group = 絶対配置）
   位置は「グループの外形サイズ + XD の constraints（fixed-left/right/top/bottom）
   + Rectangle / Ellipse の実座標」から復元している
   -------------------------------------------------------------------------- */
.family-collage { position: relative; }
.family-collage > * { position: absolute; }

/* 3-1. family_01 グループ 13370（650×619） */
.family-collage--01 { width: 650px; height: 619px; }
.family-collage--01 .family-photo--parco    { left: 290px; top: 0;     width: 360px; height: 288px; }
.family-collage--01 .family-copy           { left: 0;     top: 0;     width: 259px; height: 190px; }
/* 2026-08-20 の XD 更新で、グレー仮枠（長方形 10116 #A0A0A0）は
   ちいかわらんどの実写真（800×800 → 表示 400×400）に差し替わった。位置・サイズは変更なし。 */
.family-collage--01 .family-photo--chiikawa { left: 0;    top: 219px; width: 400px; height: 400px; }

/* 3-2. family_02 グループ 13342（650×700） */
.family-collage--02 { width: 650px; height: 700px; }
.family-collage--02 .family-photo--a { left: 250px; top: 0;     width: 400px; height: 450px; }
.family-collage--02 .family-photo--b { left: 0;     top: 250px; width: 400px; height: 450px; }
.family-collage--02 .family-blur     { left: 245px; top: 25px;  width: 20px;  height: 20px; }
.family-collage--02 .family-copy     { left: 0;     top: 30px;  width: 378px; height: 117px; } /* XD レンダー実測 */

/* 3-3. family_03 グループ 13343（650×635） */
.family-collage--03 { width: 650px; height: 635px; }
.family-collage--03 .family-photo--a { left: 130px; top: 0;     width: 520px; height: 416px; }
.family-collage--03 .family-photo--b { left: 0;     top: 317px; width: 325px; height: 260px; }
.family-collage--03 .family-copy     { left: 351px; top: 445px; width: 299px; height: 190px; }

/* 3-4. family_06 グループ 13415（658×450 → 650px 幅に正規化） */
.family-collage--06 { width: 650px; height: 450px; }
.family-collage--06 .family-photo    { left: 0;     top: 0;     width: 400px; height: 450px; }
.family-collage--06 .family-copy     { left: 417px; top: 260px; width: 233px; height: 190px; }

/* 3-5. family_07 グループ 13417（650×480） */
.family-collage--07 { width: 650px; height: 480px; }
.family-collage--07 .family-photo    { left: 200px; top: 30px;  width: 450px; height: 450px; }
.family-collage--07 .family-blur     { left: 185px; top: 59px;  width: 40px;  height: 40px; }
.family-collage--07 .family-copy     { left: 0;     top: 0;     width: 349px; height: 190px; }

/* ぼかしの丸（楕円形 101 / 102 = #D4D8DC / blur 10） */
.family-blur {
  border-radius: 50%;
  background: var(--c-gray01);
  filter: blur(10px);
}

/* --------------------------------------------------------------------------
   4. 装飾イラスト（アートボード直下の illust。本文の上に重ねる）
   top は .family-body の上端（= アートボード y1050 = メインビジュアル 930 + 余白 120）
   からの距離。

   ■ 装飾イラストの原点は 3 ページで別（意図的に揃えていない）
     ART    = 重なっているスポットの左上（このファイル）
     FAMILY = 本文ブロック .family-body の上端（= アートボード y1050）
     BEAUTY = .beauty-page の上端（= アートボード y0。アートボード座標そのまま）
     ART だけスポット原点なのは、ART の記事がスポットごとに原稿の行数なりの高さで、
     まだ差し替え予定の原稿が残っているため（ページ絶対座標だと原稿が 1 行増えた
     時点でそれ以降のイラストが全部ずれる）。逆に FAMILY / BEAUTY をスポット原点へ
     移すと、イラストがスポットの重なり順の中に入るぶん前後関係が変わる
     （後ろのスポットが前のスポットのはみ出しを覆う）。揃えるときは要スクリーンショット確認。

   ■ 2026-09-04: illust--3〜--10 の top を +194px 補正（XD 2026-09-03 保存に追随）
     11:30 POP MART に「POP MART」リンクボタン（650×110）が追加され、それより下の
     装飾イラストが XD 上で 194px 下がった。本文（family_01〜07）はボタン追加済みで
     XD と一致していたのに、イラストだけ旧 XD の座標が残っていたため、タンブラー
     （--3）が〈ジェラート ピケ カフェ〉の帯に重なっていた。
     値は snapshot 2026-09-04T09-36-05-276Z の onArtboard y −1050（= .family-body 上端）。
     ※ 09-03 保存の座標と完全一致（本日の再送信でイラストの位置は動いていない）。
     illust--1 / --2 はボタンより上なので変更なし。

   ■ 2026-09-10: illust--2〜--10 の top を −45px 補正
     ちいかわらんど（family_01）のリンクボタン下にあった「※外部サイトへ遷移します」を
     削除した（46c5bac、ユーザー指示）。注記 35px + stack 10px = 45px ぶん、それより下の
     本文が上がったのに、絶対座標のイラストだけ XD の位置に取り残されていた。
     XD 側は注記が存在する前提の座標（この帯の onArtboard y=2346）なので、
     **XD の絶対座標をそのまま使うのではなく、削除したぶんを引いた値を使う**。
     検証: 〈ちいかわらんど〉見出し（注記より上）は XD と 0px 一致、
     〈POP MART〉見出し（注記より下）は XD より 45px 上。イラストは 0px = 取り残し。
     illust--1（top 550px）は注記（offset 1296px）より上なので対象外。

   ■ 2026-09-10: illust--8 / --9 / --10 をさらに −6px 補正
     〈日本橋西川〉のスペック 3 行を .family-info__note（23px / 行送り 38）へ落としたことで
     （ユーザー指示）そのブロックが 6px 縮み、以降の本文が 6px 上がった。
     変更箇所は offset 6572〜6782 なので、それより下の 3 本だけが対象
     （--7 は top 6552px で変更箇所より上なので対象外）。
     検証: 〈ミートデリスギモト〉7918→7912 /〈アンテノール〉8920→8914 と同じ −6px。
   -------------------------------------------------------------------------- */
.family-illust {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.family-illust img { display: block; object-fit: cover; }

.family-illust--1 { left: 509px; top: 550px;  width: 265px; height: 197px; }
.family-illust--1 img { width: 265px; height: 197px; }

/* XD のグループ配下は「グループの translation + 子の translation」が実座標。
   グループ x だけを使っていたため横位置がずれていた（family-01 の実座標 x=424）。 */
.family-illust--2 { left: 424px; top: 1985px; width: 360px; height: 492px; } /* 家族イラスト */
.family-illust--2 img { position: absolute; }
.family-illust--2 .family-illust__b { left: 208px; top: 0;     width: 152px; height: 472px; }
.family-illust--2 .family-illust__a { left: 0;     top: 17px;  width: 185px; height: 463px; }
.family-illust--2 .family-illust__c { left: 135px; top: 135px; width: 118px; height: 358px; }

/* 回転しているノードの置き方（XD 実測で確定）
   XD の x / y は「ローカル原点（＝回転前の左上）を回転させたあとの平行移動先」で、
   回転軸は中心ではなく左上。書き出し PNG は回転後の外接矩形（絵柄は回転済み）。
   したがって外接矩形の左上は (x, y) + (回転後 4 隅の最小 x, 最小 y) で求める。
   rotate() は付けない（付けると二重に回る）。 */
.family-illust--3 { left: -32px; top: 3425.43px; width: 164px; height: 223.5px; }  /* 116×200 r-15 */
.family-illust--3 img { width: 164px; height: 223.5px; }

/* 同上。XD 実座標は 画像130 = (623,5332) / 画像131 = (567,5395) なので
   コンテナ左は 567、中身も左右が入れ替わる（画像130 が右上・画像131 が左下）。 */
.family-illust--4 { left: 567px; top: 4431px; width: 133px; height: 143px; }
.family-illust--4 img { position: absolute; }
.family-illust--4 .family-illust__a { left: 56px; top: 0;   width: 77px; height: 80px; } /* 画像130 */
.family-illust--4 .family-illust__b { left: 0;    top: 63px; width: 71px; height: 80px; } /* 画像131 */

.family-illust--5 { left: -32px; top: 5275px; width: 213px; height: 120px; }
.family-illust--5 img { width: 213px; height: 120px; }

.family-illust--6 { left: 543.94px; top: 5649.53px;    width: 137.5px; height: 144.5px; } /* 110×120 r15 */
.family-illust--6 img { width: 137.5px; height: 144.5px; }

.family-illust--7 { left: 480px;    top: 6552.26px; width: 256.5px; height: 103.5px; } /* 250×82 r-5 */
.family-illust--7 img { width: 256.5px; height: 103.5px; }

.family-illust--8 { left: 610px;    top: 7457.02px;    width: 139.5px; height: 134.5px; } /* 107×94 r30 */
.family-illust--8 img { width: 139.5px; height: 134.5px; }

.family-illust--9 { left: 404px; top: 7942.5px; width: 97px; height: 119px; }
.family-illust--9 img { width: 97px; height: 119px; }

.family-illust--10 { left: 80px; top: 8644px; width: 187px; height: 244px; }
.family-illust--10 img { width: 187px; height: 244px; }

/* ページ末尾の共通ブロック（.route-cards / .quiz-rally / .season-info / .page-foot）は
   すべて main の直下に置き、CSS は css/common.css がオーナー。family.css では持たない。 */