/* =====================================================================
   top.css — TOPページ刷新（素案 w1920_m260 準拠 / 1920px基準のvw比例）
   素案PNGの実測値を vw（value/19.2）に変換して忠実再現。
   スコープは body.page-top2 配下に限定。
   ===================================================================== */

/* Android Chrome の OSフォントスケール（非線形テキスト拡大）対策。
   端末の「フォントサイズ: 大」設定で文字だけが拡大され、XD固定レイアウトの
   円・行ボックスから文字があふれて衝突する（Zenfone 10 で実証）。
   本ページは寸法連動のピクセル設計のため拡大をオプトアウトする。
   ※ top.css は TOPページのみ読み込み＝他ページの文字拡大は従来どおり有効 */
html { -webkit-text-size-adjust: none; text-size-adjust: none; }

body.page-top2 {
  --ink:        #0a0a0a;
  --sky:        #40A9FA;   /* デザイン指定アクセントカラー */
  --sky-dark:   #2691e0;
  --sky-deep:   #1B6FB0;   /* 青帯の上に置くボタンのホバー色（帯より確実に濃い青） */
  --serif:      'Noto Serif JP', serif;
  --serif-en:   'Times New Roman', 'Times', serif;  /* 英字見出し（Midashi EN） */
  --gothic:     'Noto Sans JP', sans-serif;
  --script:     'Parisienne', cursive;
  --mg:         13.542vw;  /* 左右マージン 260px */
  /* ヒーローのメディア開始位置（XD y=116）。body の固定 padding-top（＝--header-height）を
     差し引いた分だけ内側へ下げ、グローバルメニューとの間に隙間をつくる。
     狭い幅ではヘッダー実高が72px未満になり計算値が負になるため 0 を下限にする */
  --hero-top:   max(0px, calc(6.042vw - var(--header-height)));
  background: var(--ink);
  color: #fff;
  font-family: var(--gothic);
}

/* コンテンツ幅：素案の左右マージン260px（=13.54vw）に一致させる */
body.page-top2 .container {
  max-width: none;
  padding-inline: var(--mg);
}

/* ---- 共通セクション見出し ---- */
.t2-head__label {                 /* Midashi(EN)：Times New Roman/25/Bold/文字間700 */
  display: block;
  font-family: var(--serif-en);
  letter-spacing: .7em;
  font-size: 1.302vw;             /* 25px */
  font-weight: 700;
  text-transform: none;
  color: var(--color-dark);
  line-height: 1;                 /* 既定の行間が上下に余白を生むので殺す */
  margin-bottom: .3vw;            /* デザイナー指摘: EN ラベルと日本語見出しを近づける */
}
.t2-head__title {                 /* 見出し（大）：Noto Sans JP/50/Bold */
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 2.604vw;            /* 50px */
  letter-spacing: .18em;
  line-height: 1.25;
}
.t2-service .t2-head__label { color: #fff; }

/* =====================================================================
   HEADER（透過・バイリンガルnav）
   ===================================================================== */
body.page-top2 .header {
  position: absolute;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
body.page-top2 .header__inner {
  height: 5.05vw;
  max-width: none;
  padding-inline: 10.9vw 9.9vw;
}
body.page-top2 .header__logo,
body.page-top2 .header__nav-link { color: #fff; }
/* ロゴは素案どおり全て白 */
body.page-top2 .header__logo span,
body.page-top2 .footer__logo span { color: inherit; }
body.page-top2 .header__logo { font-size: 1.563vw; font-weight: 700; letter-spacing: .02em; }  /* 30px Bold */
body.page-top2 .header.is-scrolled {
  position: fixed;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(8px);
}

body.page-top2 .t2-nav { gap: 0; }
.t2-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.t2-nav__item { display: flex; align-items: center; }
.t2-nav__item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 2.6vw;
  background: rgba(255,255,255,.55);
  transform: rotate(28deg);
  margin: 0 2.1vw;
}
.t2-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
  transition: opacity var(--transition);
}
.t2-nav__link:hover { opacity: .65; }
.t2-nav__en {                     /* グローバルメニュー：Noto Sans JP/16/SemiBold */
  font-family: var(--gothic);
  font-weight: 600;
  font-size: .833vw;             /* 16px */
  letter-spacing: .35em;
}
.t2-nav__ja {                     /* ナビ日本語：Noto Sans/12/SemiBold */
  font-size: .625vw;             /* 12px */
  font-weight: 600;
  letter-spacing: .25em;
  color: rgba(255,255,255,.9);
  margin-top: .3vw;
}

/* ---------------------------------------------------------------------
   グローバルナビのドロップダウン（XD: 事業内容_プルダウン_PC）
   XD には黒文字のテキストだけがあり背景パネルが描かれていない（暗い背景の
   上では読めない未完成状態）。黒文字＝明るいパネル前提とみて白パネルで実装。
   項目ピッチ 55px / 12px SemiBold / 文字間500 は XD 実測どおり。
   ※ TOP・下層で共通のヘッダーなので page.css ではなくここに置く
   --------------------------------------------------------------------- */
/* 位置基準は li ではなくリンクを包む要素。li は区切り線の ::after を含んで
   横に広いため、li 基準だと右にずれる */
.t2-nav__has-dropdown { position: relative; }
.t2-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: 8.333vw;             /* 160px */
  padding: .6vw 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 20;
}
.t2-nav__has-dropdown:hover .t2-nav__dropdown,
.t2-nav__has-dropdown:focus-within .t2-nav__dropdown { opacity: 1; visibility: visible; }
.t2-nav__dropdown-link {
  display: block;
  padding: 0 1.2vw;
  line-height: 2.865vw;           /* 55px */
  font-size: .625vw;              /* 12px SemiBold */
  font-weight: 600;
  letter-spacing: .5em;
  text-indent: .5em;
  text-align: center;
  white-space: nowrap;
  color: #000;
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.t2-nav__dropdown-link:hover { background: var(--sky); color: #fff; }

/* =====================================================================
   HERO（高さ1230px=64.06vw / タイトル90px / 下線は左端まで）
   ===================================================================== */
.t2-hero {
  position: relative;
  height: 60.73vw;          /* XD: 1166px / 1920 */
  overflow: hidden;
  background: var(--ink);
}
.t2-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 動画タイル（TikTok風UIオーバーレイ）
   XD: 幅590px×4枚＋10px隙間、ヘッダー下(y=116)から、先頭タイルは左へはみ出し(x=-253) */
.t2-hero__tiles {
  top: var(--hero-top);    /* グローバルメニューとの間に隙間（XD y=116 準拠） */
  bottom: 0;
  width: auto; height: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: .52vw;              /* 10px */
  margin-left: -13.18vw;   /* x=-253 */
  z-index: 1;
}
.tt {
  position: relative;
  flex: 0 0 30.73vw;       /* 590px */
  overflow: hidden;
  color: #fff;
}
.tt__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* TikTokロゴ（右上） */
.tt__logo {
  position: absolute;
  top: .9vw; right: .8vw;
  width: 1.5vw; height: 1.5vw;
  fill: currentColor;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  opacity: .95;
}
/* 右の縦アクションレール（いいね/コメント/共有） */
.tt__rail {
  position: absolute;
  right: .5vw; bottom: 9vw;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.15vw;
}
.tt__act { display: flex; flex-direction: column; align-items: center; gap: .12vw; }
.tt__ic { width: 1.7vw; height: 1.7vw; fill: currentColor; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.tt__act b { font-size: .64vw; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
/* キャプション（左下） */
.tt__cap {
  position: absolute;
  left: .7vw; right: 3vw; bottom: 6.5vw;
  font-size: .74vw; font-weight: 600; line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* プロフィール行（フィーチャータイルのみ・上部） */
.tt__profile {
  position: absolute;
  top: .8vw; left: .7vw; right: 2.6vw;
  display: flex; align-items: center; gap: .45vw;
}
.tt__ava { width: 1.9vw; height: 1.9vw; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.85); flex: none; }
.tt__name { font-size: .72vw; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tt__name i { display: block; font-size: .58vw; font-weight: 400; font-style: normal; opacity: .85; }
.tt__follow {
  margin-left: auto;
  background: #FE2C55; color: #fff;
  font-size: .6vw; font-weight: 700; white-space: nowrap;
  padding: .35em .7em; border-radius: .25vw;
}
/* 再生・音量コントロール（左下端） */
.tt__ctrl { position: absolute; left: .6vw; bottom: 3.5vw; display: flex; gap: .5vw; opacity: .92; }
.tt__ctrl .tt__ic { width: 1.4vw; height: 1.4vw; }

/* グリッド（方眼テクスチャ）XD: 約19px角 */
.t2-hero__grid {
  position: absolute;
  top: var(--hero-top); left: 0; right: 0; bottom: 0;   /* 方眼もメディア領域に合わせる */
  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 1vw 1vw;
}
.t2-hero__scrim {
  position: absolute;
  inset: 0;
  top: var(--hero-top);    /* 暗幕もメディア領域に合わせる（隙間は地の黒のまま） */
  z-index: 2;
  background:
    /* 左を暗く（テキスト可読性） */
    linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.32) 72%, rgba(10,10,10,.5) 100%),
    /* 下側をだんだん黒へ（下端は下セクションと同色#0a0a0aで完全不透明→継ぎ目なし・多段で滑らか） */
    linear-gradient(0deg,
      rgb(10,10,10) 0%,
      rgba(10,10,10,.94) 7%,
      rgba(10,10,10,.8) 13%,
      rgba(10,10,10,.55) 21%,
      rgba(10,10,10,.32) 30%,
      rgba(10,10,10,.15) 39%,
      rgba(10,10,10,.05) 47%,
      rgba(10,10,10,0) 55%),
    /* 全体を少し暗く（網掛け部分） */
    rgba(10,10,10,.2);
}
.t2-hero__inner {
  --hero-pad: 9.43vw;    /* XD: タイトル左 x=181 */
  position: absolute;
  left: 0; right: 0;
  top: 40%;              /* 上下6:4の6側（上寄り）にコピー中心を配置 */
  transform: translateY(-50%);
  z-index: 3;            /* 人物(z4)より後ろ＝はみ出す下線が人物の背後に回る */
  padding: 0 var(--hero-pad);
}
.t2-hero__title {
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 4.167vw;           /* 80px（XD指定） */
  line-height: 1.1;
  letter-spacing: .6em;         /* XD指定 letterSpacing 600 */
  text-shadow: 0 .2vw 1.6vw rgba(0,0,0,.5);
}
/* 文字下の線（XD準拠・左右非対称・1px白） */
.t2-hero__title .u-underline {
  display: block;
  padding-bottom: .01em;
  border-bottom: 1px solid rgba(255,255,255,.92);
}
/* 1行目：左からはみ出し → 文字右端で終わる（XD 線7: x-164〜903） */
.t2-hero__title .u-underline--l {
  width: fit-content;
  white-space: nowrap;          /* 詰めで縮んでも折り返さない（下線だけ短くする） */
  padding-left: 17.97vw;        /* 文字左(x181)から線左端(x-164)まで=345px */
  margin-left: -17.97vw;        /* 文字位置は保ったまま線だけ左へ伸ばす */
  margin-bottom: .62em;         /* 2行の間隔（XD 130px相当） */
}
/* 下線を「。」直後で止める（XD 線7 x903準拠）：末尾letter-spacing＋句点の右アキ分を詰める */
.t2-hero__title .u-underline--l .u-underline__cut { margin-right: -1.175em; }
/* 2行目：文字左端から始まり → 右へはみ出し（XD 線6: x182〜2214） */
.t2-hero__title .u-underline--r {
  margin-right: -20vw;          /* 画面右端を越えてブリード */
}
.t2-hero__sub {                   /* サブコピー：22px Bold */
  margin-top: 1.1vw;              /* 2行目下線に少し寄せる */
  font-size: 1.146vw;
  font-weight: 700;
  letter-spacing: .5em;           /* デザイナー指摘: キャッチ下は字間を広く */
  color: rgba(255,255,255,.95);
}
.u-hero-sub-br { display: none; }  /* サブの改行はSPのみ（XD準拠の3行）。PCは1行 */
.u-sp-br { display: none; }        /* SPのみ有効な改行（円ラベル等） */
/* 代表切り抜き（XD: x1103/y149・幅671・高さ1017・右余白7.6%） */
.t2-hero__figure {
  position: absolute;
  right: 7.6%;
  bottom: 0;
  height: 52.97vw;    /* 1017px / 1920 */
  z-index: 4;
  pointer-events: none;
}
/* 人物の背後に柔らかい影を敷いて背景になじませる */
.t2-hero__figure::before {
  content: "";
  position: absolute;
  left: -22%; right: -22%; top: 0; bottom: -3%;
  z-index: -1;
  background: radial-gradient(54% 52% at 52% 60%,
    rgba(0,0,0,.65) 0%, rgba(0,0,0,.36) 46%, rgba(0,0,0,0) 74%);
  filter: blur(1.8vw);
}
.t2-hero__figure img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 .5vw 2vw rgba(0,0,0,.55));
}
/* 下部フェード：人物(z4)より上に敷き、動画も人物もまとめて黒へ→次セクションへ継ぎ目なく */
.t2-hero__bottomfade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(0deg,
    rgb(10,10,10) 0%,
    rgba(10,10,10,.95) 12%,
    rgba(10,10,10,.72) 26%,
    rgba(10,10,10,.4) 44%,
    rgba(10,10,10,.15) 66%,
    rgba(10,10,10,0) 100%);
}
/* サイン（タグライン右下・人物の左肩付近）：手書き風ロゴ画像 */
.t2-hero__sign {
  position: absolute;
  right: 31.5vw;
  bottom: 31%;
  z-index: 5;
  display: block;
  width: 15vw;
  height: auto;
  filter: drop-shadow(0 .15vw .6vw rgba(0,0,0,.5));
}

/* 右端フローティング（お問い合わせ縦タブ + SNS）：慣性つきで滑るように追従（JS制御） */
.t2-hero__aside {
  position: fixed;
  right: 0.8vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
  will-change: transform;
}
.t2-hero__contact-tab {
  writing-mode: vertical-rl;
  background: var(--sky);
  color: #fff;
  padding: 1.4em .62em;
  border-radius: .4vw;
  letter-spacing: .32em;
  font-size: .938vw;             /* 18px SemiBold */
  font-weight: 600;
  text-decoration: none;
  box-shadow: -0.2vw .2vw 1vw rgba(0,0,0,.3);
  /* ホバーは青⇄白のフェード反転で統一（hiroshima-mac.com のボタン挙動に準拠） */
  border: 1px solid var(--sky);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.t2-hero__contact-tab:hover { background: #fff; color: var(--sky); }
.t2-hero__socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5vw;
}
.t2-hero__socials a {
  width: 2.3vw; height: 2.3vw;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(10,10,10,.55);   /* 白背景セクションでも視認できるよう暗い下地 */
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  transition: all var(--transition);
}
.t2-hero__socials a:hover { background: #fff; color: var(--ink); }
.t2-hero__socials svg { width: 1.05vw; height: 1.05vw; }

/* =====================================================================
   SERVICE（黒背景・白カードが写真の左下に重なる・急角度の斜め線）
   ===================================================================== */
.t2-service {
  position: relative;
  background: var(--ink);
  padding: 2.35vw 0 4.7vw;
  overflow: hidden;
}
/* 斜め細線（約68°） */
.t2-service::before,
.t2-service::after,
.t2-service .t2-cards::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 120%;
  background: rgba(255,255,255,.22);
  transform: rotate(22deg);   /* 垂直線を22°傾け≒水平から68° */
  transform-origin: center;
  pointer-events: none;
}
.t2-service::before { left: 66%; top: -10%; }
.t2-service::after  { left: 96%; top: -40%; }
.t2-service .t2-cards::before { left: 4%; top: 20%; }

.t2-cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7.8vw;
  margin-top: 3.2vw;
}
.t2-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}
/* 写真：カラム右寄せ（白カードが左に50pxはみ出す構図） */
.t2-card__photo {
  display: block;
  width: 92.3%;
  margin-left: auto;
  aspect-ratio: 600 / 455;
  object-fit: cover;
}
.t2-card__body {
  position: relative;
  /* デザイナー指摘: 白い四角の中で文字を上下センターに。
     上下パディングを揃えたうえで中央寄せする（矢印は絶対配置なので影響しない） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  color: var(--color-dark);
  width: 73.9%;
  margin-top: -7vw;
  padding: 2.1vw;
  min-height: 22vw;
  box-shadow: 0 1vw 3vw rgba(0,0,0,.25);
}
.t2-card__title {                 /* 見出し（中）：Noto Sans JP/40/SemiBold */
  font-family: var(--gothic);
  font-weight: 600;
  font-size: 2.083vw;            /* 40px */
  letter-spacing: .12em;
  margin-bottom: 1.1vw;
}
.t2-card__text {                  /* 本文：Noto Sans JP/16/Regular/行間30 */
  font-family: var(--gothic);
  font-weight: 400;
  font-size: .833vw;             /* 16px */
  line-height: 1.875;            /* 30 / 16 */
  letter-spacing: .04em;
  color: #333;
}
.t2-card__arrow {
  position: absolute;
  right: 1.6vw;
  bottom: 1.6vw;
  width: 2.5vw; height: 2.5vw;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--color-dark);
  transition: background .6s ease, border-color .6s ease, color .6s ease;
}
.t2-card:hover .t2-card__arrow { background: var(--sky); border-color: var(--sky); color: #fff; }
.t2-card__arrow svg { width: 1.35vw; height: 1.35vw; }  /* XD: ＞（円径の約45%）に合わせる */

/* =====================================================================
   WORKS（白背景・直径420pxの円×3・斜め線2本）
   ===================================================================== */
.t2-works {
  position: relative;
  background: #fff;
  color: var(--color-dark);
  padding: 6.25vw 0 1.5vw;
  overflow: hidden;
}
/* XD: 両端の円の外側端(中心高さ)から45°で画面外へ伸びる斜め線 */
.t2-circle:first-child::before,
.t2-circle:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 43vw;                 /* XD 585×√2≈827px */
  height: 1px;
  background: #d8dde3;
  pointer-events: none;
}
.t2-circle:first-child::before { /* 左端円の左端 → 左下へ45° */
  left: 0;
  transform-origin: left center;
  transform: rotate(135deg);
}
.t2-circle:last-child::after {   /* 右端円の右端 → 右上へ45° */
  left: 100%;
  transform-origin: left center;
  transform: rotate(-45deg);
}
/* XD: EN ラベル(Works)は独立した1行、その下で見出し(制作実績)とキャプションが
   横並びでベースラインを共有する。以前は .t2-head（ラベル+見出しのブロック）と
   キャプションを同じ flex 行で baseline 揃えしていたが、ブロック要素である
   .t2-head の flex baseline は「最初の子要素＝ラベルの baseline」に解決される
   ため、キャプションがラベルの高さに引っ張られてズレていた（見出しとは無関係の
   位置になる）。見出しとキャプションを同じ行の直接の子どうしにすることで、
   両者自身のテキスト baseline が正しく揃う。 */
.t2-works__topline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.t2-works__titlerow {
  display: flex;
  align-items: baseline;
  gap: 3vw;
  flex-wrap: wrap;
}
.t2-works .t2-head__title { font-size: 2.604vw; }  /* 見出し（大）50px */
.t2-works__caption {              /* 22px Regular */
  font-size: 1.146vw;
  color: #555;
  letter-spacing: .12em;
}
.t2-circles {
  display: flex;
  justify-content: center;
  margin-top: 4.7vw;
  position: relative;
  z-index: 1;
}
.t2-circle {
  width: 23.44vw;                 /* XD 直径450px */
  height: 23.44vw;
  border: 1px solid #dfe3e8;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;        /* XD: 塗りなし＝重なりで輪っか同士が交差 */
  margin-inline: -0.781vw;        /* XD 中心間隔420px＝隣と30px重ねる */
  flex: none;
  position: relative;            /* 端の円から伸びる斜め線のアンカー */
}
.t2-circle__label {               /* 35px SemiBold */
  font-size: 1.823vw;
  font-weight: 600;
  letter-spacing: .12em;
}
.t2-circle__note {                /* 16px Regular */
  font-size: .833vw;
  color: #9aa3ad;
  letter-spacing: .08em;
  margin-top: .5vw;
}
.t2-circle__num {                 /* 実績数字：Times New Roman/155/Bold Italic/#40A9FA */
  /* Tinos を先頭に置く。Times New Roman とメトリック互換なので見た目は変えずに、
     TNR を持たない端末（Android 等）で幅広の serif に化けるのを防ぐ */
  font-family: 'Tinos', var(--serif-en);
  font-style: italic;
  font-weight: 700;
  color: var(--sky);
  font-size: 8.073vw;           /* 155px */
  letter-spacing: -.04em;       /* XD: ls=-40 */
  line-height: 1;
  margin-top: 1.2vw;
  display: inline-block;        /* 着地ポップ(scale)を効かせるため */
}
.t2-circle__num.is-pop { animation: t2-num-pop .42s cubic-bezier(.2,.8,.2,1); }
@keyframes t2-num-pop {           /* 着地の「ドン」：一瞬スケールアップ→戻る */
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.t2-circle__num small {           /* 単位：Noto Sans/38/Bold */
  font-family: var(--gothic);
  font-size: .245em;            /* 38 / 155 */
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;            /* 数字側の詰め(-.04em)を和文の単位まで引き継がせない */
  margin-left: .05em;
}
.t2-works__cta { text-align: right; margin-top: 3.9vw; }

/* =====================================================================
   SOCIAL（全幅の英文＋中央縦書き＋一直線サムネ）
   ===================================================================== */
.t2-social {
  position: relative;
  background: #fff;
  color: var(--color-dark);
  padding-bottom: 4.4vw;
  /* 縦書き見出しは上下に少しはみ出すのが素案の意匠。上のWorksも白背景なのでclipしない */
  overflow: visible;
}
.t2-social__textwrap {
  position: relative;
  padding: 3.3vw .2vw 0;
}
.t2-social__bgtext {
  margin: 0;
  font-family: var(--serif-en);  /* Times New Roman/27/#EEEEEE */
  color: #EEEEEE;
  font-size: 1.406vw;
  line-height: 1.22;
  text-align: justify;
  letter-spacing: .01em;
  user-select: none;
  word-break: break-word;
}
.t2-social__vertical {           /* XD: 縦書き2列（数字をつくる｜私たちの発信）を段違い配置 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row-reverse;   /* 「数字をつくる」を右・「私たちの発信」を左に */
  align-items: flex-start;
  gap: 1.33em;                   /* 列の中心間隔をXDの70pxに（列幅1em＋gap1.33em＝2.33em） */
  margin: 0;
  font-family: var(--gothic);    /* 30px Regular（XD指定） */
  font-weight: 400;
  font-size: 1.563vw;
  color: var(--color-dark);
}
.t2-social__vcol {
  writing-mode: vertical-rl;
  line-height: 1;
  letter-spacing: 1.33em;        /* 縦の字間：XD lineHeight70相当（30+40=70px） */
  white-space: nowrap;
}
.t2-social__vcol--b {
  margin-top: 4.7em;             /* XD: 「私たちの発信」は141px下へずらす */
}
/* サムネ：幅282px(14.69vw)・gap9px・左端は見切れスタート */
.t2-thumbs {                      /* PICK UP WORKS風：横に自動で流れるマーキー */
  width: 100vw;
  margin-left: calc(50% - 50vw - .94vw);
  margin-top: 5.1vw;
  padding: 0;
  overflow: hidden;
}
.t2-thumbs__track {
  display: flex;
  width: max-content;
  animation: t2-thumbs-scroll 90s linear infinite;   /* 常時流し続ける（トラック倍増に合わせ速度は据え置き） */
}
@keyframes t2-thumbs-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* 後半セットが前半位置に来て継ぎ目なし */
}
.t2-thumb {
  flex: 0 0 14.69vw;
  aspect-ratio: 282 / 500;
  overflow: hidden;
  background: #eee;
  margin-right: .47vw;            /* 旧gap相当。全要素に付与し-50%ループを成立させる */
  border-radius: 1.5625vw;        /* XD: r=30px（1920幅基準） */
}
.t2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {   /* 動きを抑える設定なら流さず手動スクロールに戻す */
  .t2-thumbs { overflow-x: auto; scrollbar-width: none; }
  .t2-thumbs::-webkit-scrollbar { display: none; }
  .t2-thumbs__track { animation: none; }
}
.t2-social .t2-works__cta { margin-top: 1.9vw; }

/* =====================================================================
   CONTACT（スカイブルー帯）
   ===================================================================== */
.t2-contact {
  background: var(--sky);
  color: #fff;
  padding-block: 3.1vw 4.2vw;
}
.t2-contact__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3vw;
  flex-wrap: wrap;
}
.t2-contact__label {              /* Midashi(EN)：Times New Roman/25/Bold/文字間700 */
  font-family: var(--serif-en);
  letter-spacing: .7em;
  font-size: 1.302vw;            /* 25px */
  font-weight: 700;
  line-height: 1;                /* .t2-head__label と同じ扱い */
}
.t2-contact__title {              /* 見出し（大）：Noto Sans JP/50/Bold */
  font-family: var(--gothic);
  font-weight: 700;
  font-size: 2.604vw;           /* 50px */
  letter-spacing: .2em;
  margin: .3vw 0 1.2vw;         /* デザイナー指摘: Contact と見出しを近づける */
}
.t2-contact__text {               /* 本文：Noto Sans JP/16/Regular/行間30 */
  font-size: .833vw;            /* 16px */
  line-height: 1.875;
  letter-spacing: .1em;
}
.t2-contact__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4vw;
  background: #fff;
  color: var(--sky);
  border: none;
  min-width: 20.8vw;
  padding: 1.45vw 2.2vw;
  border-radius: 0;
  font-weight: 500;              /* 22px Medium/#40A9FA */
  font-size: 1.146vw;
  letter-spacing: .22em;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 0.42vw;          /* XD: ボタン右端を右端から13.96vwに（既定13.54vwより少し内側へ） */
  transition: background var(--transition), color var(--transition);
}
.t2-contact__btn::after {
  content: "";
  position: absolute;
  inset: .5vw -.5vw -.5vw .5vw;
  border: 1px solid rgba(255,255,255,.9);
  pointer-events: none;
}
.t2-contact__btn svg { width: 1.8vw; height: .42vw; }
/* 青帯の上なので、反転先は帯より濃い青（--sky のままだと帯に溶ける） */
.t2-contact__btn:hover { background: var(--sky-deep); color: #fff; }

/* =====================================================================
   アウトラインボタン（Works / Social 共通・二重枠）
   ===================================================================== */
.t2-btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.2vw;
  border: 1px solid currentColor;
  padding: .95vw 2vw;
  border-radius: 0;
  font-size: .833vw;             /* 16px Medium */
  font-weight: 500;
  letter-spacing: .2em;
  text-decoration: none;
  color: inherit;
  background: #fff;              /* XD: 長方形1696 は fill=#FFFFFF。背面の枠を隠す */
  /* 二重枠の外側（XD: 長方形1697 = 枠線のみを右下へ10pxオフセット）。
     疑似要素で重ねると枠線がボタンの上を横切ってしまい、z-index:-1 で背面に送ると
     今度は親セクション(.t2-works/.t2-social)の白背景に隠れて消える。
     box-shadow は要素自身の背景より奥に描かれるので、この二段重ねだけが
     「重なった部分は白地で隠れ、右と下だけ枠が覗く」XDどおりの見えになる。
     1枚目(白・spread -1px)で2枚目(黒)の内側を抜き、1pxの枠線に見せている。 */
  --btn-offset: .52vw;           /* XD: 10px 右下へ */
  box-shadow: var(--btn-offset) var(--btn-offset) 0 -1px #fff,
              var(--btn-offset) var(--btn-offset) 0 0 currentColor;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
/* 文字が白に反転しても背面の枠は青で残す（currentColor のままだと白く消える） */
.t2-btn-outline:hover {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
  box-shadow: var(--btn-offset) var(--btn-offset) 0 -1px #fff,
              var(--btn-offset) var(--btn-offset) 0 0 var(--sky);
}
.t2-btn-outline svg { width: 1.8vw; height: .42vw; }

/* =====================================================================
   FOOTER 上書き（ロゴ40px・□メニュー・余白）
   ===================================================================== */
body.page-top2 .footer { padding-top: 5.2vw; }
/* XD準拠：ブランド（左）とメニュー（右）を両端に配置し、右端まで届かせる */
body.page-top2 .footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4vw;
}
body.page-top2 .footer__brand { max-width: 30vw; }
body.page-top2 .footer__copy {    /* コピーライト：Noto Sans JP/12/Regular */
  font-family: var(--gothic);
  font-weight: 400;
  font-size: .625vw;             /* 12px */
}
body.page-top2 .footer__logo { font-size: 2.188vw; font-weight: 700; }  /* 42px Bold */
body.page-top2 .footer__tagline {
  font-size: .73vw;              /* 14px */
  line-height: 2.1;
  letter-spacing: .06em;
}
body.page-top2 .footer__address {  /* 住所：タグライン下の独立ブロック（Noto Sans JP/14） */
  font-family: var(--gothic);
  font-size: .73vw;              /* 14px */
  line-height: 2.1;
  letter-spacing: .06em;
  color: var(--color-gray-light);
  margin-top: 1.4vw;
}
/* 下部：コピーライト（左）とポリシー（右・「／」区切り）を両端配置 */
body.page-top2 .footer__links { gap: 0; align-items: center; }
body.page-top2 .footer__policy { font-size: .73vw; letter-spacing: .04em; }  /* 14px */
body.page-top2 .footer__sep {
  color: rgba(255,255,255,.4);
  font-size: .73vw;
  margin: 0 .7em;
}
.t2-footer-menu {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1.1vw 3.2vw;
  list-style: none;
  margin: 0;
  padding: 0;
  align-content: start;
}
.t2-footer-menu__link {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: .833vw;             /* 16px Medium */
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}
.t2-footer-menu__link::before {
  content: "";
  width: .63vw; height: .63vw;
  border: 1px solid rgba(255,255,255,.6);
  flex: none;
}
.t2-footer-menu__link:hover { color: #fff; }
.t2-footer-menu__link:hover::before { background: rgba(255,255,255,.25); }

/* =====================================================================
   RESPONSIVE — スマホ版（SP素案 TOPページ_w390_マージン40_SP を実測再現）
   基準: アートボード W390 / サイド余白20px（コンテンツ350px）。
   ブレークポイントはグローバルナビ→ハンバーガー切替（1024px）に合わせる。
   詳細な実測ログ: design/worklog_sp.md
   ===================================================================== */
@media (max-width: 1023px) {
  /* =====================================================
     SPは「390基準スケーリング」：--u が XDアートボードの1pxに相当。
     どの端末幅でも calc(N * var(--u)) で XD比率を完全維持する
     （PC版の「1920基準vw」と同じ考え方。実機幅 360/375/390/412/430 全対応）
     ===================================================== */
  body.page-top2 {
    --u: calc(100vw / 390);
    padding-top: 0;   /* 固定ヘッダー用のbody余白を解除（XD座標系 y0 起点に一致させる） */
  }
  /* ---- 基準余白 20px ---- */
  body.page-top2 .container { padding-inline: calc(20 * var(--u)); }

  /* ---- HEADER（透過・白ロゴ・白ハンバーガー）
     XD_SP: ヘッダー帯は110px（背景メディアは y110 から）。ロゴ・ハンバーガーは帯の下寄り（ベースライン y99） ---- */
  /* SPヘッダー: 下スクロールで隠れ・上スクロールで再表示（script.jsの is-hidden/is-scrolled を活用）
     - 常時 fixed。最上部は透過（heroの黒帯が透ける＝XDの見た目）、y>8 で is-scrolled の黒背景に
     - .header の箱の高さを中身(110*u)と一致させる。既定の64pxのままだと translateY(-100%) が
       64pxしか上がらず、下寄せ配置のロゴ/ハンバーガーが画面に残る（Zenfoneで発生した残留の原因） */
  body.page-top2 .header { position: fixed; height: calc(110 * var(--u)); }
  body.page-top2 .header__inner { height: calc(110 * var(--u)); max-width: none; padding-inline: calc(20 * var(--u)); align-items: flex-end; padding-bottom: calc(8 * var(--u)); }
  body.page-top2 .header__logo { font-size: calc(20 * var(--u)); }
  body.page-top2 .header__hamburger-line { background: #fff; }
  /* ドロワーはヘッダー帯直下から。dvh非対応(iOS15.3以前)は vh にフォールバック */
  body.page-top2 .header__drawer { top: calc(110 * var(--u)); height: calc(100vh - 110 * var(--u)); }
  @supports (height: 1dvh) {
    body.page-top2 .header__drawer { height: calc(100dvh - 110 * var(--u)); }
  }

  /* ---- HERO（XD_SP実測: メディアは y110 から・黒背景 y110-660 / タイトル ベースライン y196/251・下線は+3px / 代表切り抜き y260・264×400 を下部ボトム揃え） ---- */
  .t2-hero { height: calc(660 * var(--u)); min-height: 0; }   /* XD: ヘッダー帯込みで黒背景下端 y660 まで */
  .t2-hero__tiles { top: calc(110 * var(--u)); }   /* XD: 背景メディアはヘッダー帯(110px)の下から */
  .t2-hero__grid { top: calc(110 * var(--u)); }    /* 方眼もメディア領域のみ */
  .t2-hero__scrim {
    top: calc(110 * var(--u));
    background:
      linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.1) 55%, rgba(10,10,10,.5) 100%);
  }
  /* タイトル/サブは XD 実測位置に絶対配置し、人物より前面に置いて白抜きで読ませる
     XD: 下線1 y199・下線2 y254（=ベースライン+3px）→ 行ボックス38.4px+境界2pxで逆算 top=158px */
  .t2-hero__inner {
    --hero-pad: calc(20 * var(--u));
    top: calc(158 * var(--u));
    transform: none;
    padding: 0 var(--hero-pad);
    z-index: 6;              /* 人物(z4)・下部フェード(z5)より前面。XDでも文字は人物の上 */
  }
  .t2-hero__title { font-size: calc(32 * var(--u)); line-height: 1.2; letter-spacing: .2em; }  /* XD letterSpacing 200 */
  .t2-hero__title .u-underline { white-space: nowrap; }  /* 保険: 文字が強制拡大されても折返しでレイアウト崩壊させない（はみ出しはheroでクリップ） */
  .t2-hero__title .u-underline { border-bottom-width: 2px; padding-bottom: 0; }
  .t2-hero__title .u-underline--l { margin-bottom: .5em; }                      /* 下線1→2行目の間隔（XD 55pxピッチ） */
  .t2-hero__title .u-underline--l .u-underline__cut { margin-right: -.772em; }  /* SP: letter-spacing .2em に合わせ詰め量を調整 */
  .t2-hero__sub { font-size: calc(14 * var(--u)); letter-spacing: .55em; line-height: 1.786; margin-top: calc(18 * var(--u)); }  /* XD ls550・lh25 */
  .u-hero-sub-br { display: inline; }   /* SPは XD どおり3行に折り返す */
  /* 代表切り抜き：XD x142.9/y259.9・264×401 → 幅67.7%・下部ボトム揃え・右へ約17pxブリード。
     素材 founder_cutout.webp は 815×1600（縦横比1.96）で XD 素材（2233×3384＝1.52）より縦長のため、
     幅だけ指定して高さを auto にすると 518px に伸び、頭が下線2（y254）より上へ突き上がる。
     XD どおり 401px の枠を切って cover+top で上端を合わせ、頭が「設計する。」の直下に来るようにする。
     はみ出す足元は下部フェード（z5・黒）に隠れるので見えない。 */
  .t2-hero__figure { height: calc(401 * var(--u)); width: 67.7%; right: -4.4%; bottom: 0; opacity: 1; z-index: 4; }
  .t2-hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  /* サイン（手書き風ロゴ画像）：XD パス956 (22,366)・約106×38 → サブ文字の下・左寄せで表示 */
  .t2-hero__sign {
    display: block;
    left: calc(20 * var(--u)); right: auto;
    top: calc(358 * var(--u)); bottom: auto;
    width: calc(106 * var(--u));
    height: auto;
    z-index: 6;
  }
  .t2-hero__aside { display: none; }

  /* ---- 共通見出し（XD_SP: EN 14px ls700 / JA 28px ls300） ---- */
  .t2-head__label { font-size: calc(14 * var(--u)); letter-spacing: .7em; margin-bottom: calc(4 * var(--u)); }
  .t2-head__title { font-size: calc(28 * var(--u)); letter-spacing: .3em; }

  /* ---- SERVICE（黒背景・フルブリード写真390×250＋重なる白カード350） ---- */
  .t2-service { padding: calc(44 * var(--u)) 0 calc(56 * var(--u)); }
  .t2-service::before,
  .t2-service::after,
  .t2-service .t2-cards::before { display: none; }
  .t2-cards { grid-template-columns: 1fr; gap: calc(50 * var(--u)); margin-top: calc(28 * var(--u)); }
  .t2-card__photo { width: calc(100% + 40 * var(--u)); max-width: none; margin-left: calc(-20 * var(--u)); aspect-ratio: 390 / 250; }  /* max-width:none…resetの100%制限を解除しフルブリード */
  .t2-card__body {
    width: 100%;
    margin-top: calc(-60 * var(--u));
    padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u));
    min-height: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  .t2-card__title { font-size: calc(23 * var(--u)); letter-spacing: .1em; margin-bottom: calc(12 * var(--u)); }  /* XD ls100 */
  .t2-card__text { font-size: calc(13 * var(--u)); line-height: 1.69; }        /* XD lh22 */
  .t2-card__arrow { width: calc(33 * var(--u)); height: calc(33 * var(--u)); right: calc(25 * var(--u)); bottom: auto; top: calc(22 * var(--u)); }  /* XD (312,941)→カード内 right25/top22 */
  .t2-card__arrow svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }  /* PCと同比率の＞ */

  /* ---- WORKS（白背景・円 直径250px×3 を斜めカスケード・XDどおり斜め45°線あり） ---- */
  .t2-works { padding: calc(42 * var(--u)) 0 calc(24 * var(--u)); }
  /* XD_SP 線251/250: 円1の左端点→左下へ・円3の右端点→右上へ 45°の黒1px線 */
  .t2-circle:first-child::before,
  .t2-circle:last-child::after { width: 110vw; background: #000; }
  .t2-works__topline { gap: calc(8 * var(--u)); }
  /* SP は XD どおり見出しとキャプションも上下に積む（PCのみ横並び・baseline共有） */
  .t2-works__titlerow { flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); }
  .t2-works .t2-head__title { font-size: calc(28 * var(--u)); }
  .t2-works__caption { font-size: calc(14 * var(--u)); letter-spacing: .3em; line-height: 1.43; }  /* XD ls300 lh20 */
  .t2-circles { flex-direction: column; align-items: flex-start; margin-top: calc(32 * var(--u)); }
  .t2-circle {
    width: calc(250 * var(--u));        /* XD r125 */
    height: calc(250 * var(--u));
    margin: 0;
    background: #fff;                   /* XD: 白塗り（重なり・斜め線を白で隠す） */
    overflow: hidden;                   /* 保険: 文字が強制拡大されても隣の円と衝突せず円内でクリップ */
  }
  .t2-circle:nth-child(1) { margin-left: calc(100 * var(--u)); }   /* XD x120（コンテナ余白20を引いた値） */
  .t2-circle:nth-child(2) { margin-left: calc(50 * var(--u)); margin-top: calc(-43 * var(--u)); }  /* XD x70・重なり41px */
  .t2-circle:nth-child(3) { margin-left: 0; margin-top: calc(-43 * var(--u)); }                    /* XD x20 */
  /* 円内テキストは XD 原寸（ラベル26/注記12/数字110）だと最長の「100万人+」が
     円弧からはみ出し、.t2-circle の overflow:hidden で「+」が切れる（実測 ratio 1.13）。
     中身は正方形の中央に積まれるのに実際の境界は円で、数字の位置では弦が直径より
     ずっと狭いのが原因。幅に依らず一定の比率なので、全幅で等しく起きる。
     下の値は 360/375/390/412/430px で実測して決めた縮小版（ratio 0.87）。
     Tinos が読めず幅広serifになった場合でも ratio 0.98 と円内に留まる。
     3つの値は必ずセットで動かすこと（1つだけ大きくすると弦からはみ出す）。 */
  .t2-circle__label { font-size: calc(20 * var(--u)); letter-spacing: .05em; line-height: 1.15; }  /* XD 26 */
  .u-sp-br { display: inline; }                                     /* 円ラベル「年間SNS／総再生数」2行（XD準拠） */
  .t2-circle__note { font-size: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }             /* XD 12 */
  .t2-circle__num { font-size: calc(84 * var(--u)); letter-spacing: -.055em; margin-top: calc(4 * var(--u)); }  /* XD 110 / ls=-55 */
  .t2-circle__num small { font-size: .236em; }                      /* 26/110 */
  .t2-works__cta { text-align: center; margin-top: calc(28 * var(--u)); }

  /* ---- SOCIAL（縦書き見出し＋背景英文＋横一列サムネ / XD_SP: 英文20px lh29・縦書き字送り50px・段差202px） ---- */
  .t2-social { padding-bottom: calc(40 * var(--u)); }
  .t2-social__textwrap { padding-top: calc(72 * var(--u)); }       /* XD: WORKSのCTA→英文まで約110px */
  .t2-social__bgtext { font-size: calc(20 * var(--u)); line-height: 1.45; max-height: calc(435 * var(--u)); overflow: hidden; }  /* XD: 英文ブロックは約15行 */
  .t2-social__vertical { font-size: calc(20 * var(--u)); top: calc(63 * var(--u)); transform: translateX(-50%); gap: 1.2em; }  /* XD: 縦書きは英文の9px上から・列中心間隔44px */
  .t2-social__vcol { letter-spacing: 1.5em; }       /* XD: 縦の字送り50px（20px+30px） */
  .t2-social__vcol--b { margin-top: 10.1em; }       /* XD: 「私たちの発信」は202px下へ段違い */
  .t2-thumbs { margin-top: calc(100 * var(--u)); margin-left: calc(50% - 50vw); }   /* 縦書き「私たちの発信」が実測でテキスト枠を58px超えて伸びるため、見た目の余白を確保する分を上乗せ */
  .t2-thumb { flex: 0 0 calc(207 * var(--u)); margin-right: calc(6 * var(--u)); border-radius: calc(30 * var(--u)); }  /* XD 約207×369・r=30px */
  .t2-social .t2-works__cta { margin-top: calc(24 * var(--u)); text-align: center; }

  /* ---- CONTACT（青帯・白ボタン青文字300×60 / XD: 見出しls300・本文ls300） ---- */
  .t2-contact { padding-block: calc(44 * var(--u)) calc(48 * var(--u)); }
  .t2-contact__inner { flex-direction: column; align-items: flex-start; gap: calc(18 * var(--u)); }
  .t2-contact__label { font-size: calc(14 * var(--u)); letter-spacing: .7em; }             /* XD ls700 */
  .t2-contact__title { font-size: calc(28 * var(--u)); letter-spacing: .3em; margin: calc(4 * var(--u)) 0 calc(14 * var(--u)); }  /* XD ls300 */
  .t2-contact__text { font-size: calc(14 * var(--u)); line-height: 1.45; letter-spacing: .3em; }    /* XD ls300 lh20 */
  .t2-contact__text br { display: none; }   /* SPは自然折返し（PC用改行を無効化） */
  .t2-contact__btn { min-width: 0; width: 100%; max-width: calc(300 * var(--u)); padding: calc(18 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: .3em; gap: calc(12 * var(--u)); margin-right: 0; }
  .t2-contact__btn::after { inset: calc(10 * var(--u)) calc(-10 * var(--u)) calc(-10 * var(--u)) calc(10 * var(--u)); }   /* XD: オフセット10px */
  .t2-contact__btn svg { width: calc(28 * var(--u)); height: calc(7 * var(--u)); }

  /* ---- アウトラインボタン（二重枠 260×60 / XD: オフセット10px・文字ls300） ---- */
  .t2-btn-outline { font-size: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(28 * var(--u)); gap: calc(12 * var(--u)); min-width: calc(260 * var(--u)); justify-content: center; letter-spacing: .3em; }
  .t2-btn-outline { --btn-offset: calc(10 * var(--u)); }   /* XD_SP: オフセット10px */
  .t2-btn-outline svg { width: calc(28 * var(--u)); height: calc(7 * var(--u)); }

  /* ---- FOOTER（ロゴ35・縦メニュー） ---- */
  body.page-top2 .footer { padding-top: calc(44 * var(--u)); }
  body.page-top2 .footer__inner { flex-direction: column; gap: calc(28 * var(--u)); }
  body.page-top2 .footer__brand { max-width: none; }
  body.page-top2 .footer__logo { font-size: calc(35 * var(--u)); }
  body.page-top2 .footer__tagline { font-size: calc(12 * var(--u)); line-height: 1.5; }    /* XD lh18 */
  body.page-top2 .footer__address { font-size: calc(12 * var(--u)); line-height: 1.5; margin-top: calc(14 * var(--u)); }
  .t2-footer-menu { grid-template-columns: 1fr; gap: calc(16 * var(--u)); margin-top: calc(4 * var(--u)); }  /* XD 行ピッチ35px */
  .t2-footer-menu__link { font-size: calc(14 * var(--u)); }
  .t2-footer-menu__link::before { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
  body.page-top2 .footer__copy { font-size: calc(12 * var(--u)); }
  body.page-top2 .footer__links { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) 0; }
  body.page-top2 .footer__policy { font-size: calc(12 * var(--u)); }
  body.page-top2 .footer__sep { margin: 0 .5em; }

  /* ---- ドロワー（EN/JA バイリンガル・青CTA） ---- */
  .t2-drawer__link { flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u)); padding: calc(16 * var(--u)) 0; }
  .t2-drawer__link::after { content: none; }
  .t2-drawer__en { font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: .06em; color: #000; }
  .t2-drawer__ja { font-size: calc(13 * var(--u)); color: #666; letter-spacing: .08em; }
  .t2-drawer__cta { margin-top: calc(8 * var(--u)); }
  .t2-drawer__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12 * var(--u));
    width: 100%;
    max-width: calc(300 * var(--u));
    background: var(--sky);
    color: #fff;
    padding: calc(18 * var(--u));
    font-weight: 500;                 /* XD: Medium */
    font-size: calc(14 * var(--u));
    letter-spacing: .3em;             /* XD: ls300 */
    text-indent: .3em;                /* 字送りで右に寄る分を戻して中央に見せる */
    text-decoration: none;
  }
  .t2-drawer__btn::after {
    content: "";
    position: absolute;
    inset: calc(10 * var(--u)) calc(-10 * var(--u)) calc(-10 * var(--u)) calc(10 * var(--u));
    /* XD: 長方形1697 は stroke=#40A9FA。ドロワーは白背景なので白枠だと見えない */
    border: 1px solid var(--sky);
    pointer-events: none;
  }
  .t2-drawer__btn svg { width: calc(28 * var(--u)); height: calc(7 * var(--u)); }

  /* PC用ドロップダウンは SP では出さない（ドロワー側にサブ項目を持たせる） */
  .t2-nav__dropdown { display: none; }

  /* ドロワーのサブ項目（XD: ハンバーガーメニュー — Service 配下に個人/法人） */
  .t2-drawer__sub {
    display: flex;
    flex-direction: column;
    padding-left: calc(24 * var(--u));
    margin-top: calc(-4 * var(--u));
    padding-bottom: calc(12 * var(--u));
  }
  .t2-drawer__sub-link {
    font-size: calc(14 * var(--u));
    font-weight: 600;
    letter-spacing: .5em;
    line-height: calc(40 * var(--u));
    color: #333;
    text-decoration: none;
  }
  .t2-drawer__sub-link:hover { color: var(--sky); }
}