.creator-card.is-hidden{
  display: none;
}

:root{
  --header-h: 131px;

  /* 1400px時に座標一致させる固定パディング（必須） */
  --pad-left-fixed: 66px;
  --pad-right-fixed: 58px;

  /* 1400pxでの余白（449.72 : 72）をfr化 */
  --spacer-left-fr: 6.2461;
  --spacer-right-fr: 1;

  --brand-w: 214.28px;
  --brand-h: 41.05px;

  --nav-w: 400px;
  --nav-h: 20px;

  --contact-w: 140px;
  --contact-h: 39px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: Alexandria, system-ui, sans-serif;
  background:#fafafa;
  padding-top: var(--header-h);
}

/* ========= Header Frame（幅は最大1400、中央寄せ） ========= */
.header-frame{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 9999;

  /* 透過の見た目 */
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 境界線（任意） */
  /* border-bottom: 1px solid rgba(0,0,0,0.08); */
}
.header-frame.is-scrolled{
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(0,0,0,0.12);
}

/* Grid：固定要素 + 可変スペース（余白だけ伸縮させる） */
.header-inner{
  height: 100%;
  display: grid;
  padding-left: 66px;
  padding-right: 58px;

  /* ★calc() をやめて fr を直書き */
  grid-template-columns:
    214.28px
    6.2461fr
    400px
    1fr
    140px;

  align-items: start;
}


/* 1400px未満でだけ“余白（padding）”を自然に詰める
   ※1400pxジャストは固定値のままなので座標死守できる */
@media (max-width: 1399.98px){
  .header-inner{
    padding-left: clamp(16px, 4.7142857vw, var(--pad-left-fixed));  /* 66/1400*100 */
    padding-right: clamp(16px, 4.1428571vw, var(--pad-right-fixed)); /* 58/1400*100 */
  }
}

/* ========= 1) brand ========= */
.brand{
  width: var(--brand-w);
  height: var(--brand-h);
  margin-top: 45px;  /* top=45 */
  border-radius: 7px;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* 画像版（使うなら） */
.brand-mark-img{
  position:absolute;
  left: 0;
  top: 0;
  width: 41px;
  height: 41px;
  border-radius: 7px;
  object-fit: cover;
}

/* 画像がない場合の代替（黒四角） */
.brand-mark{
  position:absolute;
  left: 0;
  top: 0;
  width: 41px;
  height: 41px;
  border-radius: 7px;
  background: #111;
}

.header-frame .brand-mark{
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
}

.brand-text{
  position:absolute;
  left: 52.28px; /* 118.28 - 66 */
  top: 0;
  width: 162px;
  height: 41px;

  font-weight: 600;
  font-size: 33.54px;
  line-height: 1;
  letter-spacing: -0.02em;

  display:flex;
  align-items:center;
  white-space: nowrap;
}

.header-frame .brand-text{
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========= 2) nav-main ========= */
.nav-main{
  width: var(--nav-w);
  height: var(--nav-h);
  margin-top: 56px; /* top=56 */
  position: relative;
}

.nav-main a{
  position:absolute;
  top:0;
  height: var(--nav-h);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color:#111;
  text-decoration:none;
  white-space: nowrap;
}

/* leftは基準（730px）からの相対 */
.nav-main .about   { left: 0px;   width: 58px; }
.nav-main .creator { left: 101px; width: 78px; }
.nav-main .news    { left: 222px; width: 51px; }
.nav-main .company { left: 316px; width: 84px; }

/* ========= 3) CONTACT ========= */
.nav-contact{
  width: var(--contact-w);
  height: var(--contact-h);
  margin-top: 46px; /* top=46 */
  border-radius: 20px;
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);/* 仮 */
  position: relative;
  text-decoration:none;
  overflow:hidden;
}

.contact-text{
  position:absolute;
  left: 17px; /* 1219 - 1202 */
  top: 10px;  /* 56 - 46 */
  width: 77px;
  height: 20px;

  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color:#fff;

  display:flex;
  align-items:center;
  white-space: nowrap;
}

.contact-mark{
  position:absolute;
  left: 97px; /* 1299 - 1202 */
  top: 19px;  /* 65 - 46 */
  width: 7px;
  height: 7px;
  display:block;
}

.contact-pill{
  position:absolute;
  left: 112px; /* 1314 - 1202 */
  top: 15px;   /* 61 - 46 */
  width: 17px;
  height: 10.52px;
  border-radius: 16.74px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-arrow{
  width: 10px;
  height: 6px;
  display:block;
}

/* 任意：ホバー */
.nav-main a:hover{ opacity: .75; }
.nav-contact:hover{ filter: brightness(1.05); }

.brand { grid-column: 1; }
.nav-main { grid-column: 3; }
.nav-contact { grid-column: 5; }


:root{
  /* 本体CREATORブロック（固定サイズ） */
  --hero-w: 233px;
  --hero-h: 171px;
  --hero-left: 190px;
  --hero-top: 173px;
}

/* 本体：背景は任意（今はボディの背景を使う） */
.page{
  width: 100%;
}

/* ヘッダーと同じ思想：中身だけ1400基準で中央寄せ */
.page-inner{
  width: min(1400px, 100%);
  margin-inline: auto;
  position: relative;

  /* 絶対配置するので、最低限スクロール領域確保（足りなければ調整OK） */
  min-height: 600px;
  top: calc(var(--header-h) * -1);
  --base-w:1400px;
  --base-half:calc(var(--base-w)/2);
}

/* :white_check_mark: 設計書の四角（中身全部入り） */
.page-hero{
  position: absolute;
  width: var(--hero-w);
  height: var(--hero-h);
  top: var(--hero-top);
  left: clamp(
    16px, /* ← ここが「詰まった時の最低余白」(好きに変更OK) */
    calc(50% - var(--base-half) + var(--hero-left)),
    99999px
  );
}

/* CREATOR文字 */
.page-hero__title{
  position: absolute;
  left: 0;
  top: 0;
  width: 233px;
  height: 59px;

  margin: 0;
  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 500;  /* Medium相当 */
  font-size: 48px;
  line-height: 1;    /* 100% */
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
}

/* 所属クリエイター */
.page-hero__subtitle{
  position: absolute;
  left: 0;
  top: 66px;        /* 239 - 173 = 66 */
  width: 128px;
  height: 22px;

  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.38; /* 138% */
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
}

/* TOP-所属クリエイター（色分け） */
.breadcrumb{
  position: absolute;
  left: 0;
  top: 153px;       /* 326 - 173 = 153 */
  width: 140px;
  height: 18px;

  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.38;
  letter-spacing: 0;
  white-space: nowrap;
}

.breadcrumb .breadcrumb__home{
  color: #989898;
}
.breadcrumb .breadcrumb__current{
  color: #000000;
}







.creator-card .creator-photo{
  position: absolute;
  width: 214.25px;
  height: 214.25px;
  top: 0;
  left: 0.05px;
  border-radius: 8.13px;
  object-fit: cover;
  display: block;
  background: #ddd;
}

.creator-card .creator-name{
  position: absolute;
  width: 31px;
  height: 26px;
  top: 225px;
  left: 0;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
  white-space: nowrap;
}

.creator-card .creator-username{
  position: absolute;
  width: 142px;
  height: 23px;
  top: 251.37px;
  left: 0;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
  white-space: nowrap;
}

.creator-card .creator-sns{
  position: absolute;
  width: 66px;
  height: 28px;
  top: 291px;
  left: 0;
  display: flex;
  gap: 10px;
}

.creator-card .sns-btn{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  text-decoration: none;
  background: transparent;
}

.creator-card .sns-btn img{
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 0;
}

:root{
  --card-w: 214.3px;
  --card-h: 319px;

  /* 座標差＝ステップ（あなたの設計値） */
  --col-step: 236.59px;
  --row-step: 375px;

  /* Gridのgapは「隙間」なので、ステップ-サイズで作る */
  --grid-col-gap: calc(var(--col-step) - var(--card-w)); /* 22.29px */
  --grid-row-gap: calc(var(--row-step) - var(--card-h)); /* 56px */

  --grid-start-left: 238px;
  --grid-start-top: 431px;
}

.creator-grid{
  position: absolute;
  top: var(--grid-start-top);
  left: calc(50% - var(--base-half) + var(--grid-start-left));

  display: grid;
  grid-template-columns: repeat(4, var(--card-w));
  grid-auto-rows: var(--card-h);

  /* :white_check_mark: ここが隙間 */
  column-gap: var(--grid-col-gap);
  row-gap: var(--grid-row-gap);

  width: calc(var(--card-w) * 4 + var(--grid-col-gap) * 3);
}

/* カード本体（中身はあなたの既存スタイルをそのまま使用） */
.creator-grid .creator-card{
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
}

:root{
  /* 既存の --card-w, --card-h, --grid-col-gap, --grid-row-gap... の下に追加 */
  --grid-w: calc(var(--card-w) * 4 + var(--grid-col-gap) * 3);
  --grid-h: calc(var(--card-h) * 4 + var(--grid-row-gap) * 3);
}


.more-btn{
  position: absolute;

  /* 楕円全体 */
  width: 140px;
  height: 41px;
  border-radius: 29px;
  border: 0.5px solid #C8C8C8;
  background: transparent;
  text-decoration: none;

  /* 位置：グリッドの下、グリッド中央に配置（余白40px） */
  top: calc(var(--grid-start-top) + var(--grid-h) + 220px);
  left: calc(
    50% - var(--base-half) + var(--grid-start-left) + (var(--grid-w) - 140px)/2
  );
}

/* 中の「もっとみる」文字 */
.more-btn .more-text{
  position: absolute;
  width: 65px;
  height: 16px;
  top: 13px;
  left: 30px;

  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
}

.more-btn .more-arrow-pill{
  position: absolute;
  width: 21px;
  height: 13px;
  top: 14px;
  left: 108px;

  border-radius: 20.68px;
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);/* 仮 */

  display: grid;
  place-items: center;
}

/* 中の「↓」文字 */
.more-btn .more-arrow{
  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  transform: translateY(-1px); /* 見た目の縦中心微調整（不要なら消してOK） */
}

/* 任意：ホバー */
.more-btn:hover{
  filter: brightness(0.98);
}


/* =========================
   下の四角（背景あり）
   ========================= */
.below-section{
  position: absolute;

  width: min(var(--below-max-w), 100vw);
  height: var(--below-h);

  top: var(--below-top);
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../img/Join_img.png");
  background-size: contain;

  /* ✅ 追加：この四角の“実際の幅”と、1400基準の倍率 */
  --below-w: min(var(--below-max-w), 100vw);
  --s: calc(var(--below-w) / var(--below-base-w));
}


/* =========================
   フッター：背景は全幅 / 中身は1400枠（ボーダー）
   ========================= */
.footer{
  position: absolute;

  width: 100%;
  height: 347px;

  /* 「その下」なので、上2122 + 高さ537 = 2659 */
  top: calc(var(--below-top) + var(--below-h));
  left: 0;
    border: 1px solid #62627c;
  background: #191929; /* :white_check_mark: 1400px以上でも全幅で白 */
}

/* :white_check_mark: 1400枠の四角（ボーダー付き） */
.footer-box{
  width: min(1400px, 100%);
  height: 347px;
  margin-inline: auto;

  
  background: transparent; /* 外側の.footerが白なので透明でOK */
  box-sizing: border-box;
  position: relative;
}

/* 中身（配置の基準） */
.footer-inner{
  position: relative;
  width: 100%;
  height: 100%;

  /* :white_check_mark: 1400px時は66pxを死守、1400未満は自然に詰める */
  padding-left: 0;
  padding-right: 58px; /* ヘッダーと揃えるなら */
  box-sizing: border-box;
}

@media (max-width: 1399.98px){
  .footer-inner{
    padding-left: clamp(16px, 4.7142857vw, 66px);  /* 66/1400*100 */
    padding-right: clamp(16px, 4.1428571vw, 58px); /* 58/1400*100 */
  }
}

/* フッター内：ロゴ＋文字ブロック */
.footer-brand{
  position: absolute;
  width: 214.28px;
  height: 41.05px;

  /* フッター四角の中での座標（topは固定） */
  top: 94px;
  left: clamp(16px,4.7142857vw,66px); /* :white_check_mark: padding-leftが66pxを担うので0にする */

  border-radius: 7px;
  text-decoration: none;
  color: inherit;
}

/* アイコン（四角） */
.footer-brand-mark{
  position: absolute;
  width: 41px;
  height: 41px;
  left: 0;
  top: 0;
  border-radius: 7px;
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
}

/* Milestone文字 */
.footer-brand-text{
  position: absolute;
  width: 162px;
  height: 41px;

  left: 52.28px; /* 118.28 - 66 */
  top: 0.05px;   /* 94.05 - 94 */

  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 600;
  font-size: 33.54px;
  line-height: 1;
  letter-spacing: -0.02em;
  
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.footer-nav{
  position: absolute;
  width: 607px;
  height: 20px;
  top: 105px;

  /* 1400基準 left=618 を中央基準へ */
  left: calc(50% - 700px + 618px);

  display: flex;
  align-items: center;
  justify-content: space-between; /* :white_check_mark: 間を均等に */
  padding-right: 18px;
  box-sizing: border-box;
  position: absolute;
}

/* リンク共通 */
.footer-nav .footer-link{
  position: static; /* :white_check_mark: absoluteをやめる */
  height: 20px;

  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.footer-nav .footer-link:hover{ opacity: .75; }

/* TOPだけ右寄せ指定があるので、文字の見え方だけ合わせる */
.footer-nav .footer-top{
  text-align: right;
  color: #fff;
}

.footer-nav .footer-about{
  color: #fff;
}

.footer-nav .footer-creator{
  color: #fff;
}

.footer-nav .footer-news{
  color: #fff;
}

.footer-nav .footer-company{
  color: #fff;
}

.footer-nav .footer-contact{
  color: #fff;
}

.footer-nav-mark{
  position: absolute;
  width: 8px;
  height: 8px;

  /* nav箱内：right基準にするとズレない */
  top: 6px;      /* 113-105 */
  right: 0px;    /* :white_check_mark: 右端 */
  
  border: 1px solid #000;
  box-sizing: border-box;
  transform: rotate(45deg);
}

:root{
  --below-top: 2122px;
  --below-base-w: 1400px;
  --below-base-h: 537px;

  /* :white_check_mark: ここで「どこまで拡大するか」を決める（好きな数値にしてOK） */
  --below-max-w: 2000px;

  /* :white_check_mark: ビューポート幅と最大幅の小さい方を採用して、高さを比率で計算 */
  --below-h: calc(min(var(--below-max-w), 100vw) * 537 / 1400);
}


.footer-divider{
  position: absolute;
  left: 0;
  right: 0;        /* = width:100% と同義 */
  top: 270px;
  height: 0;
  border-top: 1px solid #62627C;
  opacity: 1;
}

/* コピーライト：1400基準の位置を中央基準に変換して固定 */
.footer-copyright{
  position: absolute;
  width: 352px;
  height: 15px;
  top: 301px;

  /* 1400基準 left=524 を、どの幅でも同じ見え方に */
  left: calc(50% - 700px + 524px);

  margin: 0;

  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;          /* 100% */
  letter-spacing: 0.06em;  /* 6% */
  text-align: center;
  white-space: nowrap;

  color: #000;
}

/* =========================
   below-section上の CONTACT CTA
   ========================= */
.contact-cta{
  position: absolute;

  /* 1400基準：w367 h102.24 top261 left516 */
  width:  calc(367px * var(--s, 1));
  height: calc(102.24px * var(--s, 1));
  top:    calc(261px * var(--s, 1));
  left:   calc(516px * var(--s, 1));

  border-radius: calc(52.43px * var(--s, 1));
  border: calc(4px * var(--s, 1)) solid transparent;

  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%) border-box;

  box-sizing: border-box;
  text-decoration: none;
  display: block;
}

/* CONTACT文字（1400時：上288 左575 → 差分：+27 +59） */
.contact-cta .cta-text{
  position: absolute;
  top:  calc(27px * var(--s, 1));
  left: calc(59px * var(--s, 1));

  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(39.27px * var(--s, 1));
  line-height: 1;
  white-space: nowrap;

  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 文字横マーク（1400時：上308.49 左770 → 差分：+47.49 +254） */
.contact-cta .cta-mark{
  position: absolute;
  width:  calc(17.454546px * var(--s, 1));
  height: calc(17.454546px * var(--s, 1));
  top:  calc(47.49px * var(--s, 1));
  left: calc(254px * var(--s, 1));

  border: calc(2px * var(--s, 1)) solid #000;
  box-sizing: border-box;
  transform: rotate(45deg);
}

/* 右の小楕円（1400時：上300 左813 → 差分：+39 +297） */
.contact-cta .cta-pill{
  position: absolute;
  width:  calc(40.53846px * var(--s, 1));
  height: calc(25.095238px * var(--s, 1));
  top:  calc(39px * var(--s, 1));
  left: calc(297px * var(--s, 1));

  border-radius: calc(39.91px * var(--s, 1));
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 矢印線 */
.contact-cta .cta-arrow{
  display: block;
  color: #fff;
  font-weight: 700;      /* 太さはお好み */
  line-height: 1;
  font-size: 12px;       /* PC基準。SPで上書きする */
  transform: translateY(-0.5px); 
}


/* 右上固定の背景画像（659×726） */
body::before{
  content: "";
  position: fixed;
  top: 0;
  right: 0;

  width: 659px;
  height: 726px;

  background-image: url("../img/Mask_group.png"); 
  background-size: 659px 726px;               /* 追従しない＝固定サイズ */
  background-repeat: no-repeat;
  background-position: top right;

  z-index: -1;        /* ✅ 他要素より下 */
  pointer-events: none;
}

.footer .footer-brand-text{
   background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Safari/Chrome用 */
  color: transparent;                  /* 念のため */
  display: inline-block;               /* クリップ安定 */
}

.corner-mark{
  position: absolute;
  display: block;
  object-fit: contain;
}

/* ヘッダーのCONTACT内（7×7の位置） */
.nav-contact .corner-mark--header{
  left: 97px;
  top: 19px;
  width: 7px;
  height: 7px;
}

/* CTAの記号（画像版・可変） */
.contact-cta .corner-mark--cta{
  width:  calc(17.454546px * var(--s, 1));
  height: calc(17.454546px * var(--s, 1));
  top:  calc(45px * var(--s, 1));
  left: calc(254px * var(--s, 1));
}

/* フッターナビ右端の記号（画像版） */
.footer-nav .corner-mark--footer{
  width: 8px;
  height: 8px;
  top: 6px;     /* 113-105 と同じ思想 :contentReference[oaicite:10]{index=10} */
  right: 6px;
}

.hamburger{
  display: none;
}

/* PCでは改行を無効化して1行にする */
.footer-copyright br{
  display: none;
}


/* =========================
   SP Header (A案: max 390px中央寄せ)
   ========================= */
@media (max-width: 768px){

  :root{
    --header-h: 85px; /* SPのヘッダー高さ */
  }

  /* PCと同じ雰囲気（透過＋ぼかし）は維持 */
  .header-frame{
    height: var(--header-h);
  }

  /* 中身だけ390基準で中央寄せ */
  .header-inner{
    display: block;     /* ✅ gridを解除 */
    padding: 0;         /* ✅ PCの66/58を無効化 */
  }

  /* SPはナビ類は一旦非表示（ハンバーガーで後から出す） */
  .nav-main,
  .nav-contact{
    display: none;
  }

  /* brand：設計通りに配置 */
  .brand{
    margin: 0 !important;
    position: absolute;
    top: 31px;
    left: 26px;
    width: auto;
    height: 26.213px;
  }

  .brand-mark{
    width: 26.213093px;
    height: 26.213093px;
    border-radius: 4.48px;
  }

  .brand-text{
    font-size: 21.45px;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  /* PCのbrand内で文字位置を固定しているなら、SPだけ差分にする */
  /* （brand-textのleftが52.28px固定などの場合に備えた上書き） */
  .brand-text{
    position: absolute;
    top: 0;
    left: 33.43px; /* 59.43 - 26 */
    height: 26px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

/* ハンバーガー：余計な背景/枠/ハイライトを消す */
.hamburger{
    /* 表示 */
    display: grid;

    /* 位置（A案：header-inner基準） */
    position: absolute;
    top: 34px;
    right: 19px;

    /* サイズ */
    width: 26px;
    height: 19px;

    /* 3本線の並び */
    align-content: space-between; /* gapより安定 */
    gap: 0;

    /* 余計な装飾を消す */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  .hamburger span{
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #111; /* 線の色 */
  }

/* クリック/タップ時の青いハイライト（iOS対策） */
.hamburger{
  -webkit-tap-highlight-color: transparent;
}

/* フォーカス時の枠が要らない場合（キーボード操作を残したいなら下のfocus-visibleだけ推奨） */
.hamburger:focus{
  outline: none;
}
.hamburger:focus-visible{
  outline: none; /* もしアクセシビリティ優先なら、ここだけは薄い枠を付けるのがおすすめ */
}

body::before{
  content: "";
  position: fixed;
  top: 0;
  right: 0;

  width: 195px;
  height: 379px;

  background-image: url("../img/Mask_group_min.png"); 
  background-size: 195px 379px;               /* 追従しない＝固定サイズ */
  background-repeat: no-repeat;
  background-position: top right;

  z-index: -1;        /* ✅ 他要素より下 */
  pointer-events: none;
}

/* 390基準（header-innerと同じ思想：中央寄せコンテナ） */
  .page-inner{
    width: 100%;
    max-width: 390px;
    margin-inline: auto;
    position: relative;
  }

  /* ✅ CREATORブロック本体を390座標に */
  .page-hero{
    position: absolute;
    top: 118px;
    left: 34px;
    width: 175px;   /* CREATOR文字の幅に合わせるなら */
    height: 132px;  /* 必要なら。指定が無ければautoでもOK */
  }

  /* ✅ CREATOR */
  .page-hero__title{
    position: absolute;
    top: 0;         /* 118基準なので0 */
    left: 0;        /* 34基準なので0 */
    width: 175px;
    height: 44px;

    margin: 0;
    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* ✅ 所属クリエイター */
  .page-hero__subtitle{
    position: absolute;
    top: 48px;      /* 166 - 118 = 48 */
    left: 0;
    width: 120px;
    height: 21px;

    margin: 0;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.38;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* ✅ TOP-所属クリエイター */
  .breadcrumb{
    position: absolute;
    top: 115px;     /* 233 - 118 = 115 */
    left: 0;
    width: 129px;
    height: 17px;

    margin: 0;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.38;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .breadcrumb .breadcrumb__home{ color: #989898; }
  .breadcrumb .breadcrumb__current{ color: #000; }


  :root{
    --sp-card-w: 153.9743px;
    --sp-card-h: 242.9152px;

    /* 1人目の座標（390基準） */
    --sp-grid-left: 33px;
    --sp-grid-top: 303px;

    /* 1人目→3人目の差分から行間を作る（591-303=288） */
    --sp-row-step: 288px;
    --sp-row-gap: calc(var(--sp-row-step) - var(--sp-card-h)); /* ≒45.0848px */

    /* 右列のleftが不明でも成立するように、残り幅から列gapを計算 */
    --sp-col-gap: calc(390px - (var(--sp-grid-left) * 2) - (var(--sp-card-w) * 2));
    /* ↑ 390幅で左右33px固定なら、自動的に右列もピッタリ決まる */
  }

  /* 390基準の座標面（左上基準） */
  .creator-grid{
    position: absolute;
    top: var(--sp-grid-top);
    left: var(--sp-grid-left);

    display: grid;
    grid-template-columns: repeat(2, var(--sp-card-w));
    grid-auto-rows: var(--sp-card-h);
    column-gap: var(--sp-col-gap);
    row-gap: var(--sp-row-gap);

    width: calc(var(--sp-card-w) * 2 + var(--sp-col-gap));
  }

  /* カード本体 */
  .creator-grid .creator-card{
    position: relative;
    width: var(--sp-card-w);
    height: var(--sp-card-h);
  }

  /* 画像（正方形） */
  .creator-card .creator-photo{
    width: 153.9362px;
    height: 153.9362px;
    top: 0;
    left: 0.04px;
    border-radius: 5.84px;
  }

  /* 名前（topはカード内基準に変換：464.66-303=161.66） */
  .creator-card .creator-name{
    top: 161.66px;
    left: 0;
    width: 29px;
    height: 25px;

    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  /* username（489-303=186） */
  .creator-card .creator-username{
    top: 186px;
    left: 0;
    width: 131px;
    height: 21px;

    font-size: 12px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  /* SNS（519-303=216） */
  .creator-card .creator-sns{
    top: 216px;
    left: 0;
    width: 63.45px; /* 69.53-33=36.53 + 26.915 ≒ 63.445 */
    height: 26.9152px;
    gap: 10px;   /* 69.53-33-26.915 ≒ 9.615 */
  }

  .creator-card .sns-btn{
    width: 26px;
    height: 26px;
    border-radius: 6px; /* お好みで */
  }

  .creator-card .sns-btn img{
    width: 26px;
    height: 26px;
  }

  /* もっとみる：ボタン本体（390基準） */
  .more-btn{
    position: absolute;
    top: 2620px;
    left: 125px;

    width: 140px;
    height: 41px;
    border-radius: 29px;

    border: 0.5px solid #C8C8C8;
    background: #fff;

    display: block;
    text-decoration: none;
  }

  /* もっとみる文字（ボタン内座標） */
  .more-btn .more-text{
    position: absolute;
    top: 14px;
    left: 50%;

    width: 65px;
    height: 16px;
    transform: translate(-50%, 0);
    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;     /* 100% */
    letter-spacing: 0;
    color: #000;
    white-space: nowrap;
  }

  .more-btn .more-arrow-pill{
  box-sizing: border-box;
  display: flex;                   /* ✅ gridより安定 */
  align-items: center;
  justify-content: center;
}

  .more-btn .more-arrow{
    display: block;
    line-height: 1;
    font-size: 12px;                 /* 13pxでもOK、潰れるなら12 */
    transform: none;                 /* 余計なズレ防止 */
  }

  :root{
    /* below-section（SP） */
    --below-base-w: 390px;
    --below-max-w: 390px;
    --below-h: 586px;
    --below-top: 2737px;

    /* CTA（SP座標：below-section内基準） */
    --cta-w: 291px;
    --cta-h: 81.0642776px;
    --cta-top: 245.22px;
    --cta-left: 50px;
    --cta-radius: 41.57px;
    --cta-border: 3.17px;

    /* CTA内：ボタン左上基準に変換済み */
    --cta-text-top: 21.41px;   /* 266.63 - 245.22 */
    --cta-text-left: 46.78px;  /* 96.78 - 50 */
    --cta-text-size: 31.14px;

    --cta-mark-size: 13.83998px;
    --cta-mark-top: 37.66px;   /* 282.88 - 245.22 */
    --cta-mark-left: 201.4px;  /* 251.4 - 50 */

    --cta-pill-w: 32.1435738px;
    --cta-pill-h: 19.8984032px;
    --cta-pill-top: 30.92px;   /* 276.14 - 245.22 */
    --cta-pill-left: 235.5px;  /* 285.5 - 50 */
    --cta-pill-radius: 31.65px;

    --cta-arrow-w: 9.65px;
    --cta-arrow-stroke: 1.0px;
    --footer-top: calc(var(--below-top) + var(--below-h));
  }

    /* ✅ below-section：390×586 を基準に、幅に合わせて等比スケール */
  .below-section{
    position: absolute;
    top: var(--below-top);
    left: 0;
    width: 100%;
    max-width: 390px;
    height: var(--below-h);

    transform: none;
    transform-origin: initial;

    background-image: url("../img/Mask_sp.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;

    z-index: 0;
  }

  /* ✅ CTA含む子要素は “スケール前の座標系(390基準)” で置けばOK */
  .below-section .contact-cta{
    position: absolute;
    top: var(--cta-top);
    left: 50%;
    transform: translateX(-50%);

    width: var(--cta-w);
    height: var(--cta-h);

    border-radius: var(--cta-radius);
    border: var(--cta-border) solid transparent;

    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%) border-box;

    box-sizing: border-box;
    text-decoration: none;
    display: block;
    z-index: 2;
  }

  .below-section .contact-cta .cta-text{
    position: absolute;
    top: var(--cta-text-top);
    left: var(--cta-text-left);
    font-size: var(--cta-text-size);
    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;

    background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* 記号（画像） */
  .below-section .contact-cta .corner-mark--cta{
    position: absolute;
    width: var(--cta-mark-size);
    height: var(--cta-mark-size);
    top: var(--cta-mark-top);
    left: var(--cta-mark-left);
    display: block;
  }

  /* 右の小楕円＋矢印 */
  .below-section .contact-cta .cta-pill{
    position: absolute;
    width: var(--cta-pill-w);
    height: var(--cta-pill-h);
    top: var(--cta-pill-top);
    left: var(--cta-pill-left);
    border-radius: var(--cta-pill-radius);

    background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
    display: grid;
    place-items: center;
  }

  .below-section .contact-cta .cta-arrow{
    font-size: 11px;       /* 10〜12で調整 */
    transform: none;
  }

  
  
  :root{
    --footer-top: calc(var(--below-top) + var(--below-h));
    --footer-h: 493px;
  }

  .footer{
    position: absolute;          /* PCと同じ思想で “座標固定” にする */
    top: var(--footer-top);
    left: 0;
    width: 100%;
    height: var(--footer-h);
    box-sizing: border-box;
  }

  .footer-box{
    width: 100%;
    height: var(--footer-h);
    margin: 0;
    position: relative;
    box-sizing: border-box;
  }

  /* ===== 左：ロゴ + Milestone（設計どおり） ===== */
  .footer-brand{
    position: absolute;
    top: 84px;
    left: 26px;
    width: 140px;     /* だいたいでOK（中身は絶対配置） */
    height: 26.21px;
  }

  .footer-brand-mark{
    width: 26.2131px;
    height: 26.2131px;
    border-radius: 4.48px;
  }

  .footer-brand-text{
    position: absolute;
    top: 0.03px;
    left: 33.43px; /* 59.43 - 26 = 33.43 */
    width: 104px;
    height: 26px;

    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 600;
    font-size: 21.45px;
    line-height: 1;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  /* ===== 右：ナビ（left=248px、縦並び） ===== */
  .footer-nav{
    position: absolute;
    left: auto;           /* ✅ left固定を解除 */
    right: 50px;  
    top: 84px;
    width: 120px;
    height: auto;
  }

  .footer-nav .footer-link{
    position: absolute;   /* ← 座標指定に合わせる */
    left: 0;
    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
  }

  .footer-nav .footer-top{     top: 0px;   width: 33px; text-align: right; }
  .footer-nav .footer-about{   top: 44px;  }
  .footer-nav .footer-creator{ top: 88px;  }

  /* NEWS / COMPANY / CONTACT も同じ間隔(44px)で増やすだけ */
  /* 例）
  .footer-nav .footer-news{    top: 132px; }
  .footer-nav .footer-company{ top: 176px; }
  .footer-nav .footer-contact{ top: 220px; }
  */

  /* 角マークは一旦非表示（必要なら座標もらって置く） */
  .corner-mark--footer{
    display: none;
  }
  /* ===== 右：ナビ 追加（座標どおり） ===== */
  .footer-nav .footer-news{    top: 132px; } /* 216 - 84 */
  .footer-nav .footer-company{ top: 176px; } /* 260 - 84 */
  .footer-nav .footer-contact{ top: 220px; } /* 304 - 84 */

  /* ✅ ナビ文字色：TOP〜CONTACT全部白 */
  .footer-nav .footer-link{
    color: #fff;
  }

  /* ===== 区切り線（top=414px, 幅390, 1px） ===== */
  .footer-divider{
    position: absolute;
    top: 414px;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid #62627C;
    opacity: 1;
  }

  /* ===== コピーライト（top=446px left=59px 幅273） ===== */
  .footer-copyright{
    position: absolute;
    top: 435px;
    left: 50%;
    width: 273px;
    text-align: center;
    height: 21px;
    transform: translateX(-50%);
    margin: 0;
    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-align: center;
    color: #fff;
    white-space: pre-line;  /* 改行を反映させたい場合用 */
    white-space: normal;     /* ✅ 折り返し/改行OK */
    line-height: 1.5; 
  }

  .footer-copyright br{
    display: inline;
  }
  

}


/* ✅ about.css：以下を末尾に追記（PC 1400px基準で座標配置） */

/* =========================================================
   ABOUT intro (PC base layout: 1400px)
   - left = calc(50% - 700px + <design-left>)
   ========================================================= */

:root{
  --base-w: 1400px;
  --base-half: calc(var(--base-w) / 2);

  /* ABOUT intro container */
  --about-intro-w: 979px;
  --about-intro-h: 238px;
  --about-intro-left: 194px;
  --about-intro-top: 409px;

  /* Left headline box */
  --about-head-w: 361px;
  --about-head-h: 124px;

  /* Right body box（Figmaの絶対座標） */
  --about-body-w: 494px;
  --about-body-h: 224px;
  --about-body-left: 679px; /* design-left */
  --about-body-top: 423px;  /* design-top */
}

.about-intro{
  position: absolute;
  width: var(--about-intro-w);
  height: var(--about-intro-h);
  top: var(--about-intro-top);
  left: clamp(
    16px, /* ← ここが「詰まった時の最低余白」(好きに変更OK) */
    calc(50% - var(--base-half) + var(--about-intro-left)),
    99999px
  );
}

/* 左：見出し（2行） */
.about-intro__headline{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--about-head-w);
  height: var(--about-head-h);
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 42.89px;
  line-height: 1.38; /* 138% */
  letter-spacing: 0;
  color: #000;
}

.about-intro__quote{ white-space: nowrap; }
.about-intro__em{
  font-size: 42.89px; /* 「次」 */
  font-weight: 500;
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-intro__dot{
  font-size: 46.67px; /* 。だけ大きい */
}

/* 右：本文（改行・空行はHTML側の<br>で再現） */
.about-intro__body{
  position: absolute;
  left: calc(var(--about-body-left) - var(--about-intro-left));
  top:  calc(var(--about-body-top)  - var(--about-intro-top));
  width: var(--about-body-w);
  height: var(--about-body-h);
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;     /* 175% */
  letter-spacing: 0.04em; /* 4% */
  color: #000;
}
/* ✅ about.css：追記（OUTLINEラベル） */
:root{
  --outline-w: 143px;
  --outline-h: 76px;
  --outline-left: 221px;
  --outline-top: 729px;
}

.section-label{
  position: absolute;
  width: var(--outline-w);
  height: var(--outline-h);
  top: var(--outline-top);
  left: clamp(
    16px, /* ← ここが「詰まった時の最低余白」(好きに変更OK) */
    calc(50% - var(--base-half) + var(--outline-left)),
    99999px
  );
}

/* OUTLINE */
.section-label__title{
  position: absolute;
  left: 0;
  top: 0;
  width: 143px;
  height: 39px;
  margin: 0;

  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
}

/* Milestoneの強み */
.section-label__subtitle{
  position: absolute;
  left: 0;
  top: 55px; /* 784 - 729 */
  width: 115px;
  height: 21px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38; /* 138% */
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
}
/* ✅ about.css：追記（OUTLINE 3カード） */

/* （必要なら）Zen Kaku Gothic New をheadで読み込み：
   https://fonts.google.com/specimen/Zen+Kaku+Gothic+New */

/* グラデ文字（共通） */
:root{
  --grad: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);

  --outline-cards-w: 816px;
  --outline-cards-h: 674px;
  --outline-cards-left: 440px;
  --outline-cards-top: 729px;
  --tab-gap: 32px;
  --card-r: 11px;
}

/* 3カード全体（見えない箱） */
.outline-cards{
  position: absolute;
  width: var(--outline-cards-w);
  height: var(--outline-cards-h);
  top: var(--outline-cards-top);
  left: calc(50% - var(--base-half) + var(--outline-cards-left));
}

/* カード共通 */
.outline-card{
  position: absolute;
  left: 0;
  width: 816px;
  border-radius: var(--card-r);
  background: #fff;
}

/* 各カードの位置/サイズ */
.outline-card--1{ top: 0;    height: 201px; }
.outline-card--2{ top: 228px; height: 198px; } /* 957-729 */
.outline-card--3{ top: 456px; height: 218px; } /* 1185-729 */

/* 左見出し共通（Zen） */
.outline-card__headline{
  position: absolute;
  left: 44px;  /* 484 - 440 */
  margin: 0;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.30; /* 130% */
  letter-spacing: 0;
  color: #000;
}

/* 右本文共通（Noto Sans JP） */
.outline-card__body{
  position: absolute;
  left: 323px; /* 763 - 440 */
  width: 454px;
  height: 112px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;     /* 175% */
  letter-spacing: 0.04em; /* 4% */
  color: #000;
}

/* 各カード内のtop（design-topベースで差分） */
.outline-card--1 .outline-card__headline{ top: 53px; } /* 782-729 */
.outline-card--1 .outline-card__body{     top: 46px; } /* 775-729 */

.outline-card--2 .outline-card__headline{ top: 46px; } /* 1003-957 */
.outline-card--2 .outline-card__body{     top: 46px; } /* 1003-957 */

.outline-card--3 .outline-card__headline{ top: 46px; } /* 1231-1185 */
.outline-card--3 .outline-card__body{     top: 46px; } /* 1231-1185 */

/* 見出し内のグラデ単語 */
.outline-card__em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* ✅ about.css：追記（3つの選択ボタン） */

/* =========================================================
   Tabs (Audience selector)
   - PC base: 1400px
   - Button + opened content share ONE gradient background
   - No gap between buttons and opened content
   - below-section / footer position is controlled by --below-top (JS updates)
   ========================================================= */

:root{
  /* Theme */
  --grad: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);

  /* Tabs */
  --tab-h: 124px;
  --tab-radius: 150px;
  --tab-bg-off: #E3E3E3;
  --tab-text-off: #828282;
  --tab-text-on: #FFFFFF;

  /* Placement */
  --tab-gap: 32px;         /* OUTLINE下 → タブ全体（wrap）の上 */
  --tab-to-below-gap: 0px; /* タブ領域 → below-section（隙間0なら0） */

  /* Start page design helpers (panel-local positioning) */
  --start-page-top: 1563px;   /* = 1439 (page top incl tabs) + 124 (tab height) */
  --start-pane-w: 1406px;
  --start-pane-left: -3px;

  /* JS will override */
  --below-top: 2600px;
}

/* ---------------------------------------------------------
   Wrap (gradient background for buttons + content)
   --------------------------------------------------------- */

.tab-wrap{
  position: absolute;
  top: calc(var(--outline-cards-top) + var(--outline-cards-h) + var(--tab-gap));
  left: calc(50% - var(--base-half));
  width: var(--base-w);

  background: var(--grad);
  color: #fff;

  /* ✅ 上左右だけ角丸で背景をクリップ（四角枠に見えるの防止） */
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  overflow: hidden;

  padding: 0;
}

/* ---------------------------------------------------------
   Tab buttons (inside wrap)
   --------------------------------------------------------- */

.tab-hero{
  position: relative;
  width: 100%;
  display: flex;
}

.tab-hero__tab{
  width: calc(var(--base-w) / 3);
  height: var(--tab-h);

  border: 0;
  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0;
  text-align: center;

  background: var(--tab-bg-off);
  color: var(--tab-text-off);

  cursor: pointer;
  user-select: none;
}

/* ✅ ボタンの角丸（見た目安定） */
.tab-hero__tab:nth-child(1){ border-top-left-radius: var(--tab-radius); }
.tab-hero__tab:nth-child(3){ border-top-right-radius: var(--tab-radius); }

/* ✅ 選択中はwrap背景（グラデ）と一体化 */
.tab-hero__tab.is-active{
  background: transparent;
  color: var(--tab-text-on);
}

/* ---------------------------------------------------------
   Tab content (inside wrap)
   --------------------------------------------------------- */

.tab-content{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Panel switch */
.tab-panel{ display: none;
position: relative; }
.tab-panel.is-active{ display: block; }

/* ✅ panel側には背景を付けない（背景はtab-wrapが持つ） */
.tab-panel--start{
  min-height: 0;
  background: transparent;
  color: #fff;
}

/* ---------------------------------------------------------
   Start pane (Tab #1) - text layout
   - NOTE: start-pane itself has NO background
   --------------------------------------------------------- */

.start-pane{
  position: relative;
  width: var(--start-pane-w);
  left: var(--start-pane-left);

  background: transparent;
  color: #fff;
  min-height: 4317px;
  padding: 0;
}

/* Title (left) */
.start-pane__title{
  position: absolute;
  width: 280px;
  height: 192px;
  top: calc(1633px - var(--start-page-top));
  left: 194px;

  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 46.6px;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
}

/* Lead (right top) */
.start-pane__lead{
  position: absolute;
  width: 648px;
  height: 66px;
  top: calc(1642px - var(--start-page-top));
  left: 564px;

  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Body (right bottom) */
.start-pane__body{
  position: absolute;
  width: 648px;
  height: 112px;
  top: calc(1737px - var(--start-page-top));
  left: 564px;

  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* ---------------------------------------------------------
   below-section / footer
   - keep your existing rules:
     .below-section { top: var(--below-top); ... }
     .footer { top: calc(var(--below-top) + var(--below-h)); ... }
   - JS updates --below-top based on .tab-wrap bottom
   --------------------------------------------------------- */
/* =========================================================
   Start tab: MERIT heading + box
   ========================================================= */

.start-merit__en{
  position: absolute;
  width: 103px;
  height: 39px;

  top: calc(1948px - var(--start-page-top));
  left: 221px;

  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.start-merit__jp{
  position: absolute;
  width: 175px;
  height: 21px;

  top: calc(2003px - var(--start-page-top));
  left: 221px;

  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
}

/* 右側の白い箱 */
.start-merit-box{
  position: absolute;
  width: 816px;
  height: 245px;

  top: calc(1948px - var(--start-page-top));
  left: 440px;

  border-radius: 11px;
  background: #fff;
}

/* MERIT boxes 2 & 3 */
.start-merit-box--2{
  width: 816px;
  height: 198px;
  top: calc(2223px - var(--start-page-top));
  left: 440px;
}

.start-merit-box--3{
  width: 816px;
  height: 240px;
  top: calc(2451px - var(--start-page-top));
  left: 440px;
}

/* =========================================================
   Start tab: Merit box #1 text
   ========================================================= */

.merit1-title{
  position: absolute;
  top: 41px;
  left: 44px;
  width: 192px;
  height: 126px;
  margin: 0;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.3;
  color: #000;
}

.merit1-title__em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.merit1-lead{
  position: absolute;
  top: 46px;
  left: 323px;
  width: 454px;
  height: 56px;
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
}

.merit1-list{
  position: absolute;
  top: 125px;
  left: 338px;
  width: 407px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #414141;
}

.merit1-list li{
  position: relative;
  padding-left: 2px;
}

/* 四角（グラデ） */
.merit1-list li::before{
  content: "";
  position: absolute;
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--grad);
}

/* 四角の位置（箱基準のtop：134/159/184）から、リストtop(125)を引く */
.merit1-list li:nth-child(1)::before{ top: 5px; }   /* 134-125 */
.merit1-list li:nth-child(2)::before{ top: 6px; }  /* 159-125 */
.merit1-list li:nth-child(3)::before{ top: 7px; }  /* 184-125 */



.start-merit-box__inner{
  position: relative; /* ✅ これで「箱の中の座標」になる */
  width: 100%;
  height: 100%;
}

/* =========================================================
   Start tab: Merit box #2 text
   ========================================================= */

/* 左タイトル */
.merit2-title{
  position: absolute;
  top: 46px;
  left: 44px;
  width: 224px;
  height: 84px;
  margin: 0;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
}

/* 「顔出しなし」だけグラデ */
.merit2-title__em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 右本文 */
.merit2-body{
  position: absolute;
  top: 46px;
  left: 323px;
  width: 454px;
  height: 112px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
}
/* =========================================================
   Start tab: Merit box #3 text
   ========================================================= */

/* 左タイトル */
.merit3-title{
  position: absolute;
  top: 46px;
  left: 44px;
  width: 256px;
  height: 84px;
  margin: 0;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
}

/* 「解決」だけグラデ */
.merit3-title__em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 右説明 */
.merit3-lead{
  position: absolute;
  top: 46px;
  left: 323px;
  width: 454px;
  height: 56px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
}

/* リスト（右下） */
.merit3-list{
  position: absolute;
  top: 123px;
  left: 338px;
  width: 392px;
  height: 75px;

  margin: 0;
  padding: 0;
  list-style: none;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #414141;
}

.merit3-list li{
  position: relative;
  padding-left: 2px;
}

/* ✅ 四角（10x10, radius 2, グラデ） */
.merit3-list li::before{
  content: "";
  position: absolute;
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--grad);
}

/* 四角の縦位置（見た目優先で微調整。必要なら後で変更OK）
   1個目の四角：箱基準 top 132px、リスト top 123px → 差分 9px が理論値
   ただし箱1で「最適値」を優先していたので、同様に微調整可能 */
.merit3-list li:nth-child(1)::before{ top: 7px; }
.merit3-list li:nth-child(2)::before{ top: 8px; }
.merit3-list li:nth-child(3)::before{ top: 9px; }
/* =========================================================
   Start tab: white divider line
   ========================================================= */

.start-divider{
  position: absolute;

  width: 1037px;
  height: 0; /* Figma通り */

  top: calc(2761px - var(--start-page-top));
  left: 219px;

  margin: 0;
  border: 0;
  border-top: 1px solid #fff; /* ✅ 白線 */
  opacity: 1;
}
/* =========================================================
   Start tab: FLOW heading
   ========================================================= */

.start-flow-title{
  position: absolute;
  width: 96px;
  height: 39px;

  top: calc(2810px - var(--start-page-top));
  left: 221px;

  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;   /* 100% */
  letter-spacing: 0;
  color: #fff;
}

.start-flow-sub{
  position: absolute;
  width: 135px;
  height: 21px;

  top: calc(2865px - var(--start-page-top));
  left: 221px;

  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38; /* 138% */
  letter-spacing: 0;
  color: #fff;
}

/* =========================================================
   Start tab: FLOW step number
   ========================================================= */

.start-flow-step1-num{
  position: absolute;
  width: 46px;
  height: 144px;

  top: calc(2915px - var(--start-page-top));
  left: 246px;

  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 118.15px;
  line-height: 1; /* 100% */
  letter-spacing: 0;

  color: #fff;
}


/* =========================================================
   Start tab: FLOW step 1 & 2
   ========================================================= */

/* Step1 title */
.start-flow1-title{
  position: absolute;
  width: 454px;
  height: 35px;
  top: calc(2933px - var(--start-page-top));
  left: 484px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Step1 line */
.start-flow1-line1{
  position: absolute;
  width: 772px;
  height: 0;
  top: calc(2989px - var(--start-page-top));
  left: 484px;
  margin: 0;
  border: 0;
  border-top: 1px solid #fff;
}

/* Step1 body */
.start-flow1-body{
  position: absolute;
  width: 454px;
  height: 56px;
  top: calc(3012px - var(--start-page-top));
  left: 484px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Step1 note */
.start-flow1-note{
  position: absolute;
  width: 454px;
  height: 28px;
  top: calc(3098px - var(--start-page-top));
  left: 484px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Step1 box (rectangle outline) */
.start-flow1-box{
  position: absolute;
  width: 772px;
  height: 216px;
  top: calc(3141px - var(--start-page-top));
  left: 484px;

  border: 1px solid #fff;
  border-radius: 0;
  background: transparent;
}

/* Step1 list inside the box */
.start-flow1-list{
  position: absolute;
  width: 454px;
  height: 156px;
  top: calc(3171px - var(--start-page-top));
  left: 511px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Connector vertical line between step 1 and 2 */
.start-flow-connector12{
  position: absolute;
  width: 330px;
  height: 0;
  top: calc(3375px - var(--start-page-top));
  left: 269px;
  margin: 0;

  border: 0;
  border-top: 1px solid #fff;
  transform-origin: left top;
  transform: rotate(-90deg);
}

/* Step2 number */
.start-flow-step2-num{
  position: absolute;
  width: 70px;
  height: 144px;
  top: calc(3385px - var(--start-page-top));
  left: 234px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 118.15px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

/* Step2 title */
.start-flow2-title{
  position: absolute;
  width: 454px;
  height: 35px;
  top: calc(3401px - var(--start-page-top));
  left: 484px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Step2 line */
.start-flow2-line1{
  position: absolute;
  width: 772px;
  height: 0;
  top: calc(3457px - var(--start-page-top));
  left: 484px;
  margin: 0;
  border: 0;
  border-top: 1px solid #fff;
}

/* Step2 body */
.start-flow2-body{
  position: absolute;
  width: 772px;
  height: 56px;
  top: calc(3480px - var(--start-page-top));
  left: 484px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}
/* =========================================================
   Start tab: FLOW step 3 - 5
   ========================================================= */

/* ---------- vertical connector lines (no rotate) ---------- */
/* 共通：縦線は width:0 + border-left */
.start-flow-vline{
  position: absolute;
  width: 0;
  border-left: 1px solid #fff;
  opacity: 1;
}

/* 2 -> 3 : (線) width 73, angle -90 のやつ → 縦線 height 73 */
.start-flow-vline--23{
  height: 73px;
  top: calc(3520px - var(--start-page-top));
  left: 269px;
}

/* 3 -> 4 */
.start-flow-vline--34{
  height: 73px;
  top: calc(3735px - var(--start-page-top));
  left: 269px;
}

/* 4 -> 5 */
.start-flow-vline--45{
  height: 73px;
  top: calc(3948px - var(--start-page-top));
  left: 269px;
}

/* ---------- step numbers ---------- */
.start-flow-step3-num,
.start-flow-step4-num,
.start-flow-step5-num{
  position: absolute;
  margin: 0;
  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 118.15px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.start-flow-step3-num{
  width: 71px;
  height: 144px;
  top: calc(3602px - var(--start-page-top));
  left: 234px;
}

.start-flow-step4-num{
  width: 71px;
  height: 144px;
  top: calc(3815px - var(--start-page-top));
  left: 234px;
}

.start-flow-step5-num{
  width: 74px;
  height: 144px;
  top: calc(4028px - var(--start-page-top));
  left: 234px;
}

/* ---------- titles ---------- */
.start-flow3-title,
.start-flow4-title,
.start-flow5-title{
  position: absolute;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

.start-flow3-title{
  width: 520px;
  height: 35px;
  top: calc(3618px - var(--start-page-top));
  left: 484px;
}

.start-flow4-title{
  width: 517px;
  height: 35px;
  top: calc(3831px - var(--start-page-top));
  left: 484px;
}

.start-flow5-title{
  width: 517px;
  height: 35px;
  top: calc(4044px - var(--start-page-top));
  left: 484px;
}

/* ---------- horizontal lines under titles ---------- */
.start-flow3-line1,
.start-flow4-line1,
.start-flow5-line1{
  position: absolute;
  width: 772px;
  height: 0;
  left: 484px;
  margin: 0;
  border: 0;
  border-top: 1px solid #fff;
  opacity: 1;
}

.start-flow3-line1{ top: calc(3674px - var(--start-page-top)); }
.start-flow4-line1{ top: calc(3887px - var(--start-page-top)); }
.start-flow5-line1{ top: calc(4100px - var(--start-page-top)); }

/* ---------- bodies ---------- */
.start-flow3-body,
.start-flow4-body,
.start-flow5-body{
  position: absolute;
  width: 772px;
  height: 56px;
  left: 484px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

.start-flow3-body{ top: calc(3697px - var(--start-page-top)); }
.start-flow4-body{ top: calc(3910px - var(--start-page-top)); }
.start-flow5-body{ top: calc(4123px - var(--start-page-top)); }

/* ---------- FLOW end divider ---------- */
.start-flow-endline{
  position: absolute;
  width: 1037px;
  height: 0;

  top: calc(4283px - var(--start-page-top));
  left: 219px;

  margin: 0;
  border: 0;
  border-top: 1px solid #fff;
  opacity: 1;
}

/* =========================================================
   Start tab: Q&A (final)
   - A以降の座標は元レイアウトに固定
   - 開閉で白枠の高さが変化
   - 畳むと下のカードが自動で詰まる（JSでtop再計算）
   ========================================================= */

:root{
  --qa-card-w: 816px;
  --qa-left: 440px;
  --qa-closed-h: 87px; /* Q行だけ見える高さ（崩さない最小値） */
}

/* Heading（あなたの既存指定） */
.start-qa-title{
  position: absolute;
  width: 72px;
  height: 39px;
  top: calc(4332px - var(--start-page-top));
  left: 221px;
  margin: 0;
  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: #fff;
}
.start-qa-sub{
  position: absolute;
  width: 90px;
  height: 21px;
  top: calc(4387px - var(--start-page-top));
  left: 221px;
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  color: #fff;
}

/* stack（特に見た目は不要。JSが順番にカードを詰める） */
.start-qa-stack{
  position: relative;
}

/* Card（topはJSが決める。left/widthは固定） */
.start-qa-card{
  position: absolute;
  left: var(--qa-left);
  width: var(--qa-card-w);

  border-radius: 11px;
  background: #fff;

  overflow: hidden;
  transition: height 220ms ease;
}

/* 開いてる高さはJSが style.height に入れる */
.start-qa-card.is-collapsed{
  height: var(--qa-closed-h) !important;
}

/* Q row */
.qa-qrow{
  position: relative;
  height: var(--qa-closed-h);
}

/* Q badge */
.qa-qbadge{
  position: absolute;
  width: 27.21875px;
  height: 27.21875px;
  top: 30px;
  left: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: var(--grad);

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15.33px;
  line-height: 1.5;
  color: #fff;
}

/* Q text（元の left差分に固定） */
.qa-qtext{
  position: absolute;
  top: 30px;
  left: 78px;
  margin: 0;

  width: 650px; /* 長いQに対応。必要なら微調整OK */
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
}

/* Toggle button（元の差分固定） */
.qa-toggle{
  position: absolute;
  width: 20px;
  height: 40px;
  top: 22px;
  left: 770px;

  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  z-index: 3;
}

/* ＋/−（ボタン文字だけグラデ） */
.qa-toggle__icon{
  display: inline-block;
  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Answer（ここが “元のレイアウト座標” に固定） */
.qa-answer{
  position: absolute;
  top: 103px;   /* ここが「Aブロックの開始位置」 */
  left: 0;
  right: 0;
}

/* A. badge（元の差分：top 103 / left 44） */
.qa-abadge{
  position: absolute;
  top: 0px;
  left: 44px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 2;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A head（A.の隣は黒。元の差分：top 107 / left 78） */
.qa-ahead{
  position: absolute;
  top: 5px;
  left: 78px;
  width: 692px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
}

/* A body（元の差分：top 152 / left 78） */
.qa-abody{
  position: absolute;
  top: 55px;
  left: 78px;
  width: 692px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #5B5B5B;
}

/* 閉じたら回答は消す（高さはカード側が縮む） */
.start-qa-card.is-collapsed .qa-answer{
  display: none;
}

/* =========================================================
   Tab #3 (tiktok) pane
   - “ボタン込みtop=189” を基準に座標変換
   - 基準top = 189 + タブ高さ124 = 313
   ========================================================= */

:root{
  --tiktok-page-top: 313px;    /* 189 + 124 */
  --tiktok-pane-w: 1407px;     /* 指定 */
  --tiktok-pane-h: 3876px;     /* 4000 - 124（パネル分） */
  --tiktok-pane-left: -3px;    /* 指定 */
}

/* ✅ パネル自体は透明（背景は tab-wrap のグラデが見える） */
.tab-panel[data-panel="tiktok"]{
  background: transparent;
}

/* ✅ 3つ目の“中身のキャンバス” */
.tiktok-pane{
  position: relative;
  width: var(--tiktok-pane-w);
  min-height: var(--tiktok-pane-h);
  left: var(--tiktok-pane-left);

  /* 背景は付けない（tab-wrapと一体でグラデにするため） */
  color: #fff;
}

/* 左タイトル */
.tiktok-title{
  position: absolute;
  width: 234px;
  height: 192px;
  top: calc(383px - var(--tiktok-page-top)); /* 383 - 313 = 70 */
  left: 199px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 46.67px;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
}

/* 右上リード */
.tiktok-lead{
  position: absolute;
  width: 648px;
  height: 66px;
  top: calc(392px - var(--tiktok-page-top)); /* 79 */
  left: 569px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0.04em; /* 4% */
  color: #fff;
}

/* 右本文 */
.tiktok-body{
  position: absolute;
  width: 648px;
  height: 84px;
  top: calc(487px - var(--tiktok-page-top)); /* 174 */
  left: 569px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;      /* 175% */
  letter-spacing: 0.04em; /* 4% */
  color: #fff;
}
/* =========================================================
   TikTok tab: MERIT / Pitfalls
   base-top = --tiktok-page-top (313px)
   ========================================================= */

/* MERIT heading */
.tiktok-merit-title{
  position: absolute;
  width: 103px;
  height: 39px;
  top: calc(670px - var(--tiktok-page-top));
  left: 219px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.tiktok-merit-sub{
  position: absolute;
  width: 120px;
  height: 21px;
  top: calc(725px - var(--tiktok-page-top));
  left: 219px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
}

/* 共通：白枠 */
.tiktok-merit-box{
  position: absolute;
  width: 816px;
  left: 438px;

  border-radius: 11px;
  background: #fff;
}

.tiktok-merit-box__inner{
  position: relative;
  width: 100%;
  height: 100%;
}

/* box 1 */
.tiktok-merit-box--1{
  height: 245px;
  top: calc(670px - var(--tiktok-page-top));
}

/* box 2 */
.tiktok-merit-box--2{
  height: 367px;
  top: calc(945px - var(--tiktok-page-top));
}

/* box 3 */
.tiktok-merit-box--3{
  height: 278px;
  top: calc(1342px - var(--tiktok-page-top));
}

/* --------------------------
   Merit 1 texts
   -------------------------- */
.tiktok-merit1-title{
  position: absolute;
  width: 240px;
  height: 117px;
  top: calc(711px - 670px); /* box内差分 */
  left: calc(482px - 438px);
  margin: 0;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
}

.tiktok-merit1-title__em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.tiktok-merit1-body{
  position: absolute;
  width: 454px;
  height: 168px;
  top: calc(716px - 670px);
  left: calc(761px - 438px);
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
}

/* --------------------------
   Merit 2 texts
   -------------------------- */
.tiktok-merit2-title{
  position: absolute;
  width: 224px;
  height: 84px;
  top: calc(991px - 945px);
  left: calc(482px - 438px);
  margin: 0;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
}

.tiktok-merit2-title__em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.tiktok-merit2-body{
  position: absolute;
  width: 454px;
  height: 280px;
  top: calc(991px - 945px);
  left: calc(761px - 438px);
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
}

/* --------------------------
   Merit 3 texts
   -------------------------- */
.tiktok-merit3-title{
  position: absolute;
  width: 240px;
  height: 117px;
  top: calc(1388px - 1342px);
  left: calc(482px - 438px);
  margin: 0;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
}

.tiktok-merit3-title__em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.tiktok-merit3-body{
  position: absolute;
  width: 454px;
  height: 196px;
  top: calc(1388px - 1342px);
  left: calc(761px - 438px);
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000;
}

/* --------------------------
   Divider (white line)
   -------------------------- */
.tiktok-divider{
  position: absolute;
  width: 1037px;
  height: 0;
  top: calc(1677px - var(--tiktok-page-top));
  left: 219px;

  border: 0;
  border-top: 1px solid #fff;
  margin: 0;
}

/* --------------------------
   Migration Pitfalls heading
   -------------------------- */
.tiktok-pitfalls-title{
  position: absolute;
  width: 273px;
  height: 39px;
  top: calc(1726px - var(--tiktok-page-top));
  left: 221px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.tiktok-pitfalls-sub{
  position: absolute;
  width: 135px;
  height: 21px;
  top: calc(1781px - var(--tiktok-page-top));
  left: 221px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
}

/* Pitfalls big white box */
.tiktok-pitfalls-box{
  position: absolute;
  width: 1035px;
  height: 307px;
  top: calc(1859px - var(--tiktok-page-top));
  left: 219px;

  border-radius: 11px;
  background: #fff;
}

.tiktok-pitfalls-box__inner{
  position: relative;
  width: 100%;
  height: 100%;
}
/* Pitfalls box inner is the 기준 */
.tiktok-pitfalls-box__inner{
  position: relative;
  width: 100%;
  height: 100%;
}

/* ========== Pitfall #1 (inside pitfalls box) ========== */

/* ../img/x.png */
.tiktok-pit1-x{
  position: absolute;
  width: 20px;
  height: 20px;
  top: 53px;   /* 1912 - 1859 */
  left: 43px;  /* 262 - 219 */
}

/* left title */
.tiktok-pit1-leftTitle{
  position: absolute;
  width: 260px;
  height: 60px;
  top: 47px;   /* 1906 - 1859 */
  left: 72px;  /* 291 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5; /* 150% */
  letter-spacing: 0;
  color: #000;
}

/* left body */
.tiktok-pit1-leftBody{
  position: absolute;
  width: 378px;
  height: 125px;
  top: 132px;  /* 1991 - 1859 */
  left: 74px;  /* 293 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75; /* 175% */
  letter-spacing: 0.04em;
  color: #5B5B5B;
}

/* ../img/right.png */
.tiktok-pit1-arrow{
  position: absolute;
  width: 57px;
  height: 57px;
  top: 138px;  /* 1997 - 1859 */
  left: 489px; /* 708 - 219 */
}

/* ../img/check.png */
.tiktok-pit1-check{
  position: absolute;
  width: 38px;
  height: 38px;
  top: 54px;   /* 1913 - 1859 */
  left: 560px; /* 779 - 219 */
}

/* right title (gradient text) */
.tiktok-pit1-rightTitle{
  position: absolute;
  width: 337px;
  height: 72px;
  top: 53px;   /* 1912 - 1859 */
  left: 618px; /* 837 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5; /* 150% */
  letter-spacing: 0;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* right body */
.tiktok-pit1-rightBody{
  position: absolute;
  width: 378px;
  height: 84px;
  top: 142px;  /* 2001 - 1859 */
  left: 618px; /* 837 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75; /* 175% */
  letter-spacing: 0.04em;
  color: #000;
}
/* =========================================================
   TikTok tab: Pitfalls (boxes 2 & 3)
   ========================================================= */

.tiktok-pitfalls-box{
  position: absolute;
  width: 1035px;
  height: 307px;
  left: 219px;
  border-radius: 11px;
  background: #fff;
}

.tiktok-pitfalls-box__inner{
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------- box #2 position ---------- */
.tiktok-pitfalls-box--2{
  top: calc(2191px - var(--tiktok-page-top));
}

/* x icon */
.tiktok-pit2-x{
  position: absolute;
  width: 20px;
  height: 20px;
  top: 53px;  /* 2244 - 2191 */
  left: 43px; /* 262 - 219 */
}

/* left title */
.tiktok-pit2-leftTitle{
  position: absolute;
  width: 340px;
  height: 60px;
  top: 47px;  /* 2238 - 2191 */
  left: 72px; /* 291 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #000;
}

/* left body (✅黒に統一) */
.tiktok-pit2-leftBody{
  position: absolute;
  width: 378px;
  height: 100px;
  top: 132px; /* 2323 - 2191 */
  left: 74px; /* 293 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #5B5B5B; /* ✅黒 */
}

/* arrow */
.tiktok-pit2-arrow{
  position: absolute;
  width: 57px;
  height: 57px;
  top: 138px;  /* 2329 - 2191 */
  left: 489px; /* 708 - 219 */
}

/* check icon */
.tiktok-pit2-check{
  position: absolute;
  width: 38px;
  height: 38px;
  top: 54px;   /* 2245 - 2191 */
  left: 560px; /* 779 - 219 */
}

/* right title (グラデ文字、下の本文は黒) */
.tiktok-pit2-rightTitle{
  position: absolute;
  width: 192px;
  height: 72px;
  top: 53px;   /* 2244 - 2191 */
  left: 618px; /* 837 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* right body (✅黒に統一) */
.tiktok-pit2-rightBody{
  position: absolute;
  width: 378px;
  height: 84px;
  top: 142px;  /* 2333 - 2191 */
  left: 618px; /* 837 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000; /* ✅黒 */
}


/* ---------- box #3 position ---------- */
.tiktok-pitfalls-box--3{
  top: calc(2523px - var(--tiktok-page-top));
}

/* x icon */
.tiktok-pit3-x{
  position: absolute;
  width: 20px;
  height: 20px;
  top: 53px;  /* 2576 - 2523 */
  left: 43px; /* 262 - 219 */
}

/* left title */
.tiktok-pit3-leftTitle{
  position: absolute;
  width: 340px;
  height: 60px;
  top: 47px;  /* 2570 - 2523 */
  left: 72px; /* 291 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #000;
}

/* left body (✅黒に統一) */
.tiktok-pit3-leftBody{
  position: absolute;
  width: 378px;
  height: 100px;
  top: 132px; /* 2655 - 2523 */
  left: 74px; /* 293 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #5B5B5B; /* ✅黒 */
}

/* arrow */
.tiktok-pit3-arrow{
  position: absolute;
  width: 57px;
  height: 57px;
  top: 138px;  /* 2661 - 2523 */
  left: 489px; /* 708 - 219 */
}

/* check icon */
.tiktok-pit3-check{
  position: absolute;
  width: 38px;
  height: 38px;
  top: 54px;   /* 2577 - 2523 */
  left: 560px; /* 779 - 219 */
}

/* right title (グラデ文字) */
.tiktok-pit3-rightTitle{
  position: absolute;
  width: 288px;
  height: 72px;
  top: 53px;   /* 2576 - 2523 */
  left: 618px; /* 837 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* right body (✅黒に統一) */
.tiktok-pit3-rightBody{
  position: absolute;
  width: 378px;
  height: 84px;
  top: 142px;  /* 2665 - 2523 */
  left: 618px; /* 837 - 219 */
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #000; /* ✅黒 */
}

/* =========================================================
   TikTok tab: divider + VOICE heading
   ========================================================= */

.tiktok-voice-line{
  position: absolute;
  width: 1037px;
  height: 0;
  top: calc(2895px - var(--tiktok-page-top));
  left: 219px;

  border: 0;
  border-top: 1px solid rgba(255,255,255,0.85);
}

/* VOICE */
.tiktok-voice{
  position: absolute;
  width: 102px;
  height: 39px;
  top: calc(2944px - var(--tiktok-page-top));
  left: 221px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.tiktok-voice-sub{
  position: absolute;
  width: 120px;
  height: 21px;
  top: calc(2999px - var(--tiktok-page-top));
  left: 221px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
}
/* =========================================================
   TikTok tab: VOICE cards
   - グラデ以外は #5B5B5B
   ========================================================= */

/* 2枚まとめて扱うラッパー（必要なら） */
.tiktok-voice-card{
  position: absolute;
}

/* human.png（共通） */
.tiktok-voice-human{
  position: absolute;
  width: 122px;
  height: 122.00018310546875px;
  object-fit: cover;
}

/* 吹き出し（白の小パーツ） */
.tiktok-voice-bubble{
  position: absolute;
  width: 28.36012322537765px;
  height: 41.55087741550037px;
  background: #fff;
  border-radius: 6px; /* 見た目用。不要なら消してOK */
  transform-origin: center;
}

/* 大きい白枠 */
.tiktok-voice-box{
  position: absolute;
  width: 847px;
  border-radius: 13.19px;
  background: #fff;
}

/* タイトル（24px / #5B5B5B） */
.tiktok-voice-title{
  position: absolute;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #000;
}

/* 本文（15px / #5B5B5B / letter-spacing 4%） */
.tiktok-voice-body{
  position: absolute;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #5B5B5B;
}

/* 強調（グラデ + 太字） */
.tiktok-voice-em{
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.04em;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* =========================================================
   VOICE #1（座標指定）
   ========================================================= */

.tiktok-voice-card--1{ top: calc(3082px - var(--tiktok-page-top)); left: 0; }

/* human 1 */
.tiktok-voice-human--1{
  top: 0px;    /* 3082 - 3082 */
  left: 219px; /* 指定 */
}

/* white box 1 */
.tiktok-voice-box--1{
  top: 0px;     /* 3082 - 3082 */
  left: 409px;
  height: 439px;
}

/* title 1 */
.tiktok-voice-title--1{
  top: 40px;   /* 3122 - 3082 */
  left: 64px;  /* 473 - 409 */
  width: 503px;
  height: 72px;
}

/* body 1 */
.tiktok-voice-body--1{
  top: 136px;  /* 3218 - 3082 */
  left: 64px;  /* 473 - 409 */
  width: 692px;
  height: 234px;
}

/* =========================================================
   VOICE #2（座標指定）
   ========================================================= */

.tiktok-voice-card--2{ top: calc(3610px - var(--tiktok-page-top)); left: 0; }

/* human 2 */
.tiktok-voice-human--2{
  top: 0px;      /* 3610 - 3610 */
  left: 1134px;  /* 指定 */
}

/* white box 2 */
.tiktok-voice-box--2{
  top: 0px;     /* 3610 - 3610 */
  left: 219px;
  height: 471px;
}

/* title 2 */
.tiktok-voice-title--2{
  top: 40px;   /* 3650 - 3610 */
  left: 64px;  /* 283 - 219 */
  width: 509px;
  height: 72px;
}

/* body 2 */
.tiktok-voice-body--2{
  top: 136px;  /* 3746 - 3610 */
  left: 64px;  /* 283 - 219 */
  width: 692px;
  height: 260px;
}
/* 吹き出し（画像・回転なしで配置） */
.tiktok-voice-bubble{
  position: absolute;
  width: 40px;
  height: 50px;

  display: block;
  object-fit: contain;
  background-color: transparent;
  /* ✅回転しない */
  transform: none;

  /* ✅白枠より前に出す（必要なら） */
  z-index: 3;

  /* ✅クリック不要なら（任意） */
  pointer-events: none;
}
/* =========================================================
   吹き出し座標（回転なし）
   ========================================================= */

/* VOICE #1 吹き出し */
.tiktok-voice-bubble--1{
  top: 39px;     /* 3121 - 3082 */
  left: 377px;   /* Figma left そのまま（card left=0前提） */
}

/* VOICE #2 吹き出し */
.tiktok-voice-bubble--2{
  top: 44px;     /* 3654 - 3610 */
  left: 1058px;  /* Figma left そのまま（card left=0前提） */
}

/* =========================================================
   Tab #2 (already) pane - OFFICIAL CLEAN
   - “ボタン込みtop=189” を基準に座標変換
   - 基準top = 189 + タブ高さ124 = 313
   ========================================================= */

:root{
  --already-page-top: 313px;    /* ✅統一（383などのFigma topから引く基準） */
  --already-pane-w: 1407px;
  --already-pane-h: 3566px;     /* 3690 - 124（パネル分） */
  --already-pane-left: -3px;
}

/* パネル自体：absolute要素が見切れないよう高さを持たせる */
.tab-panel[data-panel="already"]{
  position: relative;
  min-height: calc(var(--already-pane-h) + 124px); /* 念のため余裕 */
  background: transparent;
}

/* 2ページ目の“中身キャンバス” */
.already-pane{
  position: relative;
  width: var(--already-pane-w);
  min-height: var(--already-pane-h);
  left: var(--already-pane-left);
  color: #fff; /* 基本文字色は白 */
}

/* =========================================================
   HERO（ここまでは白字）
   ========================================================= */

.already-title{
  position: absolute;
  width: 281px;
  height: 128px;
  top: calc(383px - var(--already-page-top));
  left: 199px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 46.67px;
  line-height: 1.38;
  letter-spacing: 0;
  color: #fff;
}

.already-lead{
  position: absolute;
  width: 648px;
  height: 66px;
  top: calc(392px - var(--already-page-top));
  left: 569px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0.04em;
  color: #fff;
}

.already-body{
  position: absolute;
  width: 648px;
  height: 196px;
  top: calc(487px - var(--already-page-top));
  left: 569px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #fff;
}

/* =========================================================
   PROBLEM（白字）
   ========================================================= */

.already-problem{
  position: absolute;
  width: 162px;
  height: 39px;
  top: calc(715px - var(--already-page-top));
  left: 221px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: #fff;
}

.already-problem-sub{
  position: absolute;
  width: 225px;
  height: 21px;
  top: calc(770px - var(--already-page-top));
  left: 221px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  color: #fff;
}

/* =========================================================
   PROBLEM：6つの白枠カード
   ========================================================= */

.already-probcard{
  position: absolute;
  width: 328px;
  height: 210px;
  border-radius: 11px;
  background: #fff;
}

/* 1段目 */
.already-probcard--1{ top: calc(843px - var(--already-page-top)); left: 219px; }
.already-probcard--2{ top: calc(843px - var(--already-page-top)); left: 554px; }
.already-probcard--3{ top: calc(843px - var(--already-page-top)); left: 889px; }

/* 2段目 */
.already-probcard--4{ top: calc(1060px - var(--already-page-top)); left: 219px; }
.already-probcard--5{ top: calc(1060px - var(--already-page-top)); left: 554px; }
.already-probcard--6{ top: calc(1060px - var(--already-page-top)); left: 889px; }

/* カード内テキスト（黒字） */
.already-probtext{
  position: absolute;
  top: 21px;
  left: 27px;
  margin: 0;

  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.30;
  color: #000;
}

.already-probtext--small{
  font-size: 28px;
}

/* グラデ単語 */
.already-em{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* divider line */
.already-line{
  position: absolute;
  width: 1037px;
  height: 0;
  top: calc(1359px - var(--already-page-top));
  left: 219px;

  border: 0;
  border-top: 1px solid rgba(255,255,255,0.85);
}

/* =========================================================
   STEP（ここから白字）
   ========================================================= */

.already-step{
  position: absolute;
  width: 82px;
  height: 39px;
  top: calc(1408px - var(--already-page-top));
  left: 221px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: #fff;
}

.already-step-sub{
  position: absolute;
  width: 174px;
  height: 21px;
  top: calc(1463px - var(--already-page-top));
  left: 221px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  color: #fff;
}

.already-step-img{
  position: absolute;
  width: 1083px;
  height: 588.3508911132812px;
  top: calc(1484px - var(--already-page-top));
  left: 183px;

  display: block;
  object-fit: contain;
}

.already-line2{
  position: absolute;
  width: 1037px;
  height: 0;
  top: calc(2161px - var(--already-page-top));
  left: 219px;

  border: 0;
  border-top: 1px solid rgba(255,255,255,0.85);
}

/* =========================================================
   VOICE（白字）
   ========================================================= */

.already-voice{
  position: absolute;
  width: 102px;
  height: 39px;
  top: calc(2210px - var(--already-page-top));
  left: 221px;
  margin: 0;

  font-family: "Alexandria", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: #fff;
}

.already-voice-sub{
  position: absolute;
  width: 120px;
  height: 21px;
  top: calc(2265px - var(--already-page-top));
  left: 221px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.38;
  color: #fff;
}

/* human（ページ基準） */
.already-voice-human{
  position: absolute;
  width: 122px;
  height: 122.00018310546875px;
  display: block;
  object-fit: contain;
  z-index: 5; /* 白枠より上 */
}

/* ✅human #1 / #2 / #3 */
.already-voice-human--1{ top: calc(2348px - var(--already-page-top)); left: 218px; }
.already-voice-human--2{ top: calc(2876px - var(--already-page-top)); left: 1134px; }
.already-voice-human--3{ top: calc(3382px - var(--already-page-top)); left: 218px; }

/* VOICE白枠（ページ基準） */
.already-voice-box{
  position: absolute;
  width: 847px;
  background: #fff;
  border-radius: 13.19px;
  z-index: 1;
}

.already-voice-box--1{
  top: calc(2348px - var(--already-page-top));
  left: 409px;
  height: 466px;
}

.already-voice-box--2{
  top: calc(2876px - var(--already-page-top));
  left: 219px;
  height: 444px;
}

.already-voice-box--3{
  top: calc(3382px - var(--already-page-top));
  left: 409px;
  height: 435px;
}
/* =========================================================
   VOICE：fukidashi（画像）
   - 回転なし / 指定座標に配置
   ========================================================= */

.already-voice-bubble{
  position: absolute;
  width: 40px;
  height: 50px;
  display: block;
  object-fit: contain;

  z-index: 4; /* ✅白枠(1)より上、human(5)より少し下 */
}

/* VOICE #1：human右横（fukidashi_l） */
.already-voice-bubble--1{
  top: 2075px;
  left: 376px;
}

/* VOICE #2：human左横（fukidashi_r） */
.already-voice-bubble--2{
  top: 2610px;
  left: 1058px;
}

/* VOICE #3：human右横（fukidashi_l）
   ※ #1と同じ“相対関係”で置きたいので、#3のhumanに合わせた座標にする
   （#1の吹き出しは「human top+73 / left+158」だったのでそれを適用）
*/
.already-voice-bubble--3{
  top: 3110px;  /* 3455px */
  left: calc(218px + 158px);                              /* 376px */
}
/* =========================================================
   VOICE: box（枠）と text（中身）を別レイヤーで重ねる
   ========================================================= */

/* 既存の枠 */
.already-voice-box{
  position: absolute;
  width: 847px;
  border-radius: 13.19px;
  background: #fff;
  z-index: 1;
}

/* 中身レイヤー（枠の上） */
.already-voice-text{
  position: absolute;
  width: 847px;
  z-index: 2; /* 枠より前 */
  pointer-events: none; /* クリック不要なら安全 */
}

/* ✅ 位置と高さは枠と同じにする（ズレ防止） */
.already-voice-text--1{
  top: calc(2348px - var(--already-page-top));
  left: 409px;
  height: 466px;
}
.already-voice-text--2{
  top: calc(2876px - var(--already-page-top));
  left: 219px;
  height: 444px;
}
.already-voice-text--3{
  top: calc(3382px - var(--already-page-top));
  left: 409px;
  height: 435px;
}

/* ---------------------------------------------------------
   テキスト（Figma相対：title top 40/left 64、body top 136/left 64）
   --------------------------------------------------------- */

.already-voice-title{
  position: absolute;
  top: 40px;
  left: 64px;
  margin: 0;

  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: 0;
  color: #000;
}

.already-voice-body{
  position: absolute;
  top: 136px;
  left: 64px;
  width: 692px;

  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 175%;
  letter-spacing: 0.04em;
  color: #5B5B5B;
}

/* タイトル幅（指定通り） */
.already-voice-title--1{ width: 336px; height: 72px; }
.already-grad{
  font-weight: 700;
  font-size: 15px;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 768px){
  /* ヘッダー背景は全幅のまま */
  .header-frame{
    width: 100%;
  }

  .header-inner{
    display: block;
    padding: 0;
    width: min(390px, 100%);
    margin-inline: auto;
    position: relative;
    height: 100%;
  }
  /* すでに入っているSP absolute配置（left/top）はこの“390キャンバス”基準で効く */
  /* about-intro を「座標指定用のレイヤー」にする */
  .about-intro{
    position: absolute;
    left: 0;
    top: 0;
    width: min(390px, 100%);
  }

  /* ライバーとしての「次」を一緒に。 */
  .about-intro__headline{
    position: absolute;
    top: 345px;
    left: 21px;
    width: 236px;
    height: 78px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.38;   /* 138% */
    letter-spacing: 0;
    color: #000;
  }

  /* 「次」(グラデ) と 「。」のサイズも見出しに合わせる */
  .about-intro__em{ font-size: 28px; }
  .about-intro__dot{ font-size: 28px; }

  /* 本文ブロック：右から下へ移動 */
  .about-intro__body{
    position: absolute;
    top: 459px;
    left: 34px;
    width: 322px;
    height: 175px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;      /* 175% */
    letter-spacing: 0.04em; /* 4% */
    color: #000;
  }


  /* OUTLINE ラベル（390基準） */
  .section-label{
    position: absolute;
    top: 698px;
    left: 34px;
    width: 125px;
    height: 57px; /* title 34 + subtitle 18 + 余白（好みで調整） */
  }
  .section-label__title{
    position: absolute;
    top: 0;
    left: 0;
    width: 125px;
    height: 34px;
    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
  }
  .section-label__subtitle{
    position: absolute;
    top: 39px; /* 737 - 698 */
    left: 0;
    width: 100px;
    height: 18px;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;
  }

  /* ①カードを 322×314 / (top=791, left=34) に */
  .outline-cards{
    position: absolute;
    top: 791px;
    left: 34px;
    width: 322px;
  }
  .outline-card{
    width: 322px;
    border-radius: 11px;
  }
  .outline-card--1{
    position: absolute;
    top: 0;
    left: 0;
    height: 314px;
  }
  .outline-card--1 .outline-card__headline{
    position: absolute;
    top: 39px;   /* 830 - 791 */
    left: 26px;  /* 60 - 34 */
    width: 144px;
    height: 62px;
    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.3;
  }
  .outline-card--1 .outline-card__body{
    position: absolute;
    top: 120px;  /* 911 - 791 */
    left: 26px;  /* 60 - 34 */
    width: 271px;
    height: 150px;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
  /* ✅ 下のタブ位置計算に使われるので、SP用に更新 */
  :root{
    --outline-cards-top: 791px;
    --outline-cards-left: 34px;
    --outline-cards-w: 322px;
    --outline-cards-h: 980px; /* ③(1457+314) - ①top(791) = 980 */
  }

  /* 3カード全体 */
  .outline-cards{
    position: absolute;
    top: var(--outline-cards-top);
    left: var(--outline-cards-left);
    width: var(--outline-cards-w);
    height: var(--outline-cards-h);
  }

  /* カード共通（白枠を確実に出す） */
  .outline-card{
    position: absolute;
    left: 0;
    width: 322px;
    height: 314px;
    background: #fff;
    border-radius: 11px;
    box-sizing: border-box;
  }

  /* ①②③：SPの絶対top */
  .outline-card--1{ top: 0; }       /* 791 */
  .outline-card--2{ top: 333px; }   /* 1124 - 791 */
  .outline-card--3{ top: 666px; }   /* 1457 - 791 */

  /* ✅ ここが最重要：②③も“縦積み用の座標”で上書き（PCのleft:323pxを殺す） */
  .outline-card__headline{
    position: absolute;
    top: 39px;
    left: 26px;  /* 60 - 34 */
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0;
    color: #000;
  }

  .outline-card__body{
    position: absolute;
    top: 120px;
    left: 26px;      /* 60 - 34 */
    width: 271px;    /* 指定値 */
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #000;
  }

  /* 見出しの箱サイズだけカード別に合わせる */
  .outline-card--1 .outline-card__headline{ width: 144px; height: 62px; }
  .outline-card--2 .outline-card__headline{ width: 144px; height: 62px; }
  .outline-card--3 .outline-card__headline{ width: 216px; height: 62px; }

  /* ③は3行で本文と近いので、被るなら本文開始を下げる（必要なときだけON） */
  .outline-card--3 .outline-card__body{ top: 152px; }
  .outline-cards{
    position: absolute;
    top: 791px;
    left: 34px;
    width: 322px;
    height: 980px;
  }

  .outline-card{
    position: absolute;
    left: 0;
    width: 322px;
    height: 314px;
    background: #fff;
    border-radius: 11px;
    box-sizing: border-box;
  }

  .outline-card--1{ top: 0; }
  .outline-card--2{ top: 333px; }  /* 1124 - 791 */
  .outline-card--3{ top: 666px; }  /* 1457 - 791 */

  /* ✅ ②の本文：あなたの指定（top1244/left60）に一致させる
     カード左上(34,1124)基準 → left=60-34=26 / top=1244-1124=120 */
  .outline-card--2 .outline-card__body{
    position: absolute;
    top: 120px;
    left: 26px;
    width: 271px;
    height: 150px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #000;
  }

  /* ついでに②の見出しも同じ考え方で固定（被り予防） */
  .outline-card--2 .outline-card__headline{
    position: absolute;
    top: 39px;    /* 1163 - 1124 */
    left: 26px;   /* 60 - 34 */
    width: 144px;
    height: 62px;
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0;
    color: #000;
  }
  .outline-card--3 .outline-card__headline br:first-of-type{
    display: none;
  }
  .tab-wrap{
    position: absolute;
    top: 1844px;
    left: 0;
    width: min(390px, 100%);
    height: 5541px;

    /* PC仕様：背景はグラデ */
    background: var(--grad);
    color: #fff;

    border-radius: 75px 75px 0 0;
    overflow: hidden;
    padding: 0;
  }

  /* ===== 3ボタンを「Figma座標」で置く（flexを殺す） ===== */
  .tab-hero{
    position: relative;
    width: 100%;
    height: 124px;         /* PCの--tab-hに合わせる（必要なら調整） */
    display: block;        /* flex解除 */
  }

  .tab-hero__tab{
    position: absolute;
    border: 0;
    padding: 0;
    margin: 0;

    /* 文字指定 */
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: 0;
    text-align: center;

    /* 改行・折り返しを活かして「3行/2行/3行」を作る */
    white-space: normal;
    word-break: keep-all;

    /* ボタン見た目（PCと同じ思想） */
    background: var(--tab-bg-off);
    color: var(--tab-text-off);

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Activeはwrap背景(グラデ)と一体化 */
  .tab-hero__tab.is-active{
    background: transparent;
    color: var(--tab-text-on);
  }

  /* ===== ① これからライブ配信を始めたい（3行化：幅78で「これからライブ配信を」が2行に折れる + <br>で3行） ===== */
  .tab-hero__tab[data-tab="start"]{
    top: 0px;      /* 1870 - 1844 */
    left: -1px;
    width: 130px;
    height: 97px;   /* 指定 */
    border-top-left-radius: 75px;
  }

  /* ===== ② すでに配信を行なっている（2行化：幅79で自動折り返し） ===== */
  .tab-hero__tab[data-tab="already"]{
    top: 0px;      /* 1874 - 1844 */
    left: 129px;
    width: 131px;
    height: 97px;   /* 指定 */
  }

  /* ===== ③ 配信場所をTikTokに変えたい（3行化：2行目が幅65で折れて3行になる + <br>） ===== */
  .tab-hero__tab[data-tab="tiktok"]{
    top: 0px;      /* 1870 - 1844 */
    left: 260px;
    width: 130px;
    height: 97px;   /* 指定 */
    border-top-right-radius: 75px;
  }
  .tab-hero__tab{
    white-space: normal;          /* 折り返しOK */
    overflow-wrap: anywhere;      /* 英字でも強制折り返しOK */
    word-break: break-word;       /* 追加の保険（環境差対策） */
    line-break: anywhere;         /* 日本語も折れやすくする */
    hyphens: none;
  }
  .start-pane{
    width: min(390px, 100%);
    left: 0;             /* PCの left:-3px を無効化 */
  }

  /* 見出し：これが「右寄り」原因の本丸なので、ここを上書き */
  .start-pane__title{
    top: 48px;           /* = 1989 - 1844 - 97 */
    left: 34px;
    width: 192px;
    height: 132px;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.38;
    letter-spacing: 0;

    /* tab-wrapがグラデ背景なので白文字が自然（必要なら黒に変えてOK） */
    color: #fff;
    margin: 0;
  }
  /* はじめてでも大丈夫。〜 */
  .start-pane__lead{
    position: absolute;
    top: 228px;     /* 2169 - 1844 - 97 */
    left: 34px;
    width: 294px;
    height: 84px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.38;      /* 138% */
    letter-spacing: 0.04em; /* 4% */
    color: #fff;
  }

  /* 「何を話せばいい？」〜 */
  .start-pane__body{
    position: absolute;
    top: 333px;     /* 2274 - 1844 - 97 */
    left: 34px;
    width: 322px;
    height: 175px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;      /* 175% */
    letter-spacing: 0.04em; /* 4% */
    color: #fff;
  }

   /* MERIT */
  .start-merit__en{
    position: absolute;
    top: 587px;   /* 2528 - 1844 - 97 */
    left: 34px;
    width: 91px;
    height: 34px;
    margin: 0;

    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1; /* 100% */
    letter-spacing: 0;
    color: #fff;
  }

  /* Milestoneに入るメリット */
  .start-merit__jp{
    position: absolute;
    top: 626px;   /* 2567 - 1844 - 97 */
    left: 34px;
    width: 152px;
    height: 18px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38; /* 138% */
    letter-spacing: 0;
    color: #fff;
  }
   /* 共通：白枠 */
  .start-merit-box{
    position: absolute;
    left: 34px;
    width: 322px;
    border-radius: 11px;
    background: #fff;
  }

  /* ① 1個目：322×393 / top=2616 */
  .start-merit-box--1{
    top: 675px;     /* 2616 - 1844 - 97 */
    height: 393px;
  }

  /* ② 2個目：322×295 / top=3028 */
  .start-merit-box--2{
    top: 1087px;    /* 3028 - 1844 - 97 */
    height: 295px;
  }

  /* ③ 3個目：322×400 / top=3342 */
  .start-merit-box--3{
    top: 1401px;    /* 3342 - 1844 - 97 */
    height: 400px;
  }
   /* 白枠1枚目の見出し（枠内座標で置く） */
  .start-merit-box--1 .merit1-title{
    position: absolute;
    top: 39px;     /* 2655 - 2616 */
    left: 26px;    /* 60 - 34 */
    width: 192px;
    height: 62px;
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0;
    color: #000;
  }

  /* 2つ目のbrだけ消す（2行化） */
  .start-merit-box--1 .merit1-title br:nth-of-type(2){
    display: none;
  }
  .start-merit-box--1 .merit1-lead{
    position: absolute;
    top: 120px;   /* 2736 - 2616 */
    left: 26px;   /* 60 - 34 */
    width: 271px;
    height: 50px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;      /* 175% */
    letter-spacing: 0.04em; /* 4% */
    color: #000;
  }
  /* 白枠1のリスト（文字ブロック） */
  .start-merit-box--1 .merit1-list{
    position: absolute;
    top: 198px;     /* 2814 - 2616 */
    left: 41px;     /* 75 - 34 */
    width: 256px;
    height: 138px;

    margin: 0;
    padding: 0;
    list-style: none;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;      /* 175% */
    letter-spacing: 0.04em; /* 4% */
    color: #414141;
  }

  /* 行ごとの箱（四角の基準になる） */
  .start-merit-box--1 .merit1-list li{
    position: relative;
    padding-left: 0; /* テキスト開始をlistのleftに合わせる */
  }

  /* 左のグラデ四角（10x10, radius2） */
  .start-merit-box--1 .merit1-list li::before{
    content: "";
    position: absolute;
    left: -15px;     /* 41px - 15px = 26px → pageのleft60相当 */
    top: 6px;        /* 見た目の中心合わせ（必要なら微調整OK） */
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--grad);
  }
  /* ===== 白枠2 ===== */
  .start-merit-box--2 :is(.merit2-title, h4){
    position: absolute;
    top: 39px;
    left: 26px;
    width: 168px;
    height: 62px;
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0;
    color: #000;
  }

  .start-merit-box--2 :is(.merit2-lead, p){
    position: absolute;
    top: 120px;
    left: 26px;
    width: 271px;
    height: 125px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #000; /* ←黒字 */
  }

  /* ===== 白枠3 ===== */
  .start-merit-box--3 :is(.merit3-title, h4){
    position: absolute;
    top: 39px;
    left: 26px;
    width: 192px;
    height: 62px;
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0;
    color: #000;
  }

  .start-merit-box--3 :is(.merit3-lead, p){
    position: absolute;
    top: 120px;
    left: 26px;
    width: 271px;
    height: 75px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #000; /* ←黒字 */
  }

  /* リスト（文字ブロック） */
  .start-merit-box--3 :is(.merit3-list, ul){
    position: absolute;
    top: 214px;
    left: 41px;
    width: 256px;
    height: 138px;

    margin: 0;
    padding: 0;
    list-style: none;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #414141;
  }

  .start-merit-box--3 :is(.merit3-list, ul) li{
    position: relative;
  }

  /* 左のグラデ四角（10×10, radius2） */
  .start-merit-box--3 :is(.merit3-list, ul) li::before{
    content: "";
    position: absolute;
    left: -15px;     /* 41 - 15 = 26 → page left:60相当 */
    top: 6px;        /* ←さっき同様、必要ならここを -1px して微調整OK */
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--grad);
  }
  /* ---- セクションの上にある白線（322px） ---- */
  .start-divider{
    position: absolute;
    top: 1856px;   /* 3797 - 1844 - 97 */
    left: 34px;
    width: 322px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.7);
  }

  /* ---- FLOW ---- */
  .start-flow-title{
    position: absolute;
    top: 1875px;   /* 3816 - 1844 - 97 */
    left: 34px;
    width: 84px;
    height: 34px;
    margin: 0;

    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
  }

  .start-flow-sub{
    position: absolute;
    top: 1914px;   /* 3855 - 1844 - 97 */
    left: 34px;
    width: 117px;
    height: 18px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: 0;
    color: #fff;
  }

  /* ---- STEP 1 ---- */
  .start-flow-step1-num{
    position: absolute;
    top: 1972px;   /* 3909 - 1844 - 97 */
    left: 34px;
    width: 22px;
    height: 68px;

    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 55.8px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
  }

  .start-flow1-title{
    position: absolute;
    top: 1973px;   /* 3914 - 1844 - 97 */
    left: 76px;
    width: 186px;
    height: 32px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .start-flow1-line1{
    position: absolute;
    top: 2022px;   /* 3963 - 1844 - 97 */
    left: 76px;
    width: 280px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.7);
  }

  .start-flow1-body{
    position: absolute;
    top: 2039px;   /* 3980 - 1844 - 97 */
    left: 76px;
    width: 280px;
    height: 69px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .start-flow1-note{
    position: absolute;
    top: 2127px;   /* 4068 - 1844 - 97 */
    left: 76px;
    width: 281px;
    height: 26px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .start-flow1-box{
    position: absolute;
    top: 2180px;   /* 4121 - 1844 - 97 */
    left: 76px;
    width: 280px;
    height: 252px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.8);
    background: transparent;
  }

  .start-flow1-list{
    position: absolute;
    top: 2210px;   /* 4151 - 1844 - 97 */
    left: 93px;
    width: 250px;
    height: 184px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }
  .tab-panel--start .start-flow-connector12{
    position: absolute;
    top: 2039px;   /* 3980 - 1844 - 97 */
    left: 45px;

    width: 0;
    height: 436px; /* Figma width 436 / -90deg を “縦線” に変換 */

    margin: 0;
    border: 0;
    border-left: 1px solid #fff;
    opacity: 1;

    transform: none; /* PCの rotate を殺す */
  }
  
   .tab-panel--start .start-flow-step2-num{
    position: absolute;
    top: 2480px; /* 4416 - 1941 */
    left: 28px;
    width: 33px;
    height: 68px;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 55.79px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
  }

  .tab-panel--start .start-flow2-title{
    position: absolute;
    top: 2480px; /* 4421 - 1941 */
    left: 76px;
    width: 262px;
    height: 32px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .tab-panel--start .start-flow2-line1{
    position: absolute;
    top: 2529px; /* 4470 - 1941 */
    left: 76px;
    width: 280px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 0.99px solid rgba(255,255,255,.8);
  }

  .tab-panel--start .start-flow2-body{
    position: absolute;
    top: 2546px; /* 4487 - 1941 */
    left: 76px;
    width: 280px;
    height: 92px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  /* 2→3 の縦線（Figma: width=143 / angle=-90） */
  .tab-panel--start .start-flow-connector23{
    position: absolute;
    top: 2543px; /* 4484 - 1941 */
    left: 45px;
    width: 0;
    height: 143px;

    margin: 0;
    border: 0;
    border-left: 1px solid #fff;
    opacity: 1;
    transform: none;
  }


  /* =========================
     STEP 3
     ========================= */

  .tab-panel--start .start-flow-step3-num{
    position: absolute;
    top: 2691px; /* 4627 - 1941 */
    left: 28px;
    width: 34px;
    height: 68px;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 55.79px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
  }

  .tab-panel--start .start-flow3-title{
    position: absolute;
    top: 2691px; /* 4632 - 1941 */
    left: 76px;
    width: 281px;
    height: 64px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .tab-panel--start .start-flow3-line1{
    position: absolute;
    top: 2772px; /* 4713 - 1941 */
    left: 76px;
    width: 280px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 0.99px solid rgba(255,255,255,.8);
  }

  .tab-panel--start .start-flow3-body{
    position: absolute;
    top: 2789px; /* 4730 - 1941 */
    left: 76px;
    width: 280px;
    height: 92px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  /* 3→4 の縦線（Figma: width=174 / angle=-90） */
  .tab-panel--start .start-flow-connector34{
    position: absolute;
    top: 2755px; /* 4696 - 1941 */
    left: 45px;
    width: 0;
    height: 174px;

    margin: 0;
    border: 0;
    border-left: 1px solid #fff;
    opacity: 1;
    transform: none;
  }


  /* =========================
     STEP 4
     ========================= */

  .tab-panel--start .start-flow-step4-num{
    position: absolute;
    top: 2934px; /* 4870 - 1941 */
    left: 28px;
    width: 34px;
    height: 68px;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 55.79px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
  }

  .tab-panel--start .start-flow4-title{
    position: absolute;
    top: 2934px; /* 4875 - 1941 */
    left: 76px;
    width: 281px;
    height: 64px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .tab-panel--start .start-flow4-line1{
    position: absolute;
    top: 3015px; /* 4956 - 1941 */
    left: 76px;
    width: 280px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 0.99px solid rgba(255,255,255,.8);
  }

  .tab-panel--start .start-flow4-body{
    position: absolute;
    top: 3032px; /* 4973 - 1941 */
    left: 76px;
    width: 280px;
    height: 69px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  /* 4→5 の縦線（Figma: width=143 / angle=-90） */
  .tab-panel--start .start-flow-connector45{
    position: absolute;
    top: 3001px; /* 4942 - 1941 */
    left: 45px;
    width: 0;
    height: 143px;

    margin: 0;
    border: 0;
    border-left: 1px solid #fff;
    opacity: 1;
    transform: none;
  }


  /* =========================
     STEP 5
     ========================= */

  .tab-panel--start .start-flow-step5-num{
    position: absolute;
    top: 3154px; /* 5090 - 1941 */
    left: 28px;
    width: 35px;
    height: 68px;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 55.79px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
  }

  .tab-panel--start .start-flow5-title{
    position: absolute;
    top: 3154px; /* 5095 - 1941 */
    left: 76px;
    width: 281px;
    height: 64px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }

  .tab-panel--start .start-flow5-line1{
    position: absolute;
    top: 3235px; /* 5176 - 1941 */
    left: 76px;
    width: 280px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 0.99px solid rgba(255,255,255,.8);
  }

  .tab-panel--start .start-flow5-body{
    position: absolute;
    top: 3252px; /* 5193 - 1941 */
    left: 76px;
    width: 280px;
    height: 69px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #fff;
  }
  /* 共通：縦線 */
  .tab-panel--start .start-flow-vline{
    position: absolute;
    width: 0;
    margin: 0;
    border-left: 1px solid #fff;
    opacity: 1;
    transform: none;
  }

  /* 2 → 3（top:4484 / left:45 / height:143） */
  .tab-panel--start .start-flow-vline--23{
    top: 2538px;   /* 4484 - 1941 */
    left: 45px;
    height: 143px;
  }

  /* 3 → 4（top:4696 / left:45 / height:174） */
  .tab-panel--start .start-flow-vline--34{
    top: 2748px;   /* 4696 - 1941 */
    left: 45px;
    height: 174px;
  }

  /* 4 → 5（top:4942 / left:45 / height:143） */
  .tab-panel--start .start-flow-vline--45{
    top: 2998px;   /* 4942 - 1941 */
    left: 45px;
    height: 143px;
  }

  .start-flow5-body br{
    display: none;
  }
  /* FLOW end divider（Q&A直前の白線） */
  .tab-panel--start .start-flow-endline{
    position: absolute;
    top: 3393px;           /* 5334 - 1941 */
    left: 34px;
    width: 322px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.8);
    opacity: 1;
  }

  /* Q&A */
  .tab-panel--start .start-qa-title{
    position: absolute;
    top: 3412px;           /* 5353 - 1941 */
    left: 34px;
    width: 63px;
    height: 34px;
    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1;        /* 100% */
    letter-spacing: 0;
    color: #fff;
  }

  /* よくある質問 */
  .tab-panel--start .start-qa-sub{
    position: absolute;
    top: 3451px;           /* 5392 - 1941 */
    left: 34px;
    width: 91px;
    height: 18px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;     /* 138% */
    letter-spacing: 0;
    color: #fff;
  }
  .tab-wrap{
    height: auto;   /* ←固定やめる */
    min-height: 0;
    overflow: hidden;  
  }
  .tab-panel--start .start-pane{
    min-height: 5450px;
  }

  /* SPで br を消す */
  .start-flow5-body br{ display: none; }

  /* Q&A：JSの影響を受けないようにSPは固定配置 */
  .tab-panel--start .start-qa-stack{
    position: static !important;
  }

  .tab-panel--start .start-qa-card{
    left: 34px !important;
    width: 322px !important;
    border-radius: 11px !important;
    overflow: hidden;
    background: #fff;
  }

  .tab-panel--start .start-qa-card--1{ top: 3500px !important; height: 321px !important; }
  .tab-panel--start .start-qa-card--2{ top: 3840px !important; height: 343px !important; }
  .tab-panel--start .start-qa-card--3{ top: 4202px !important; height: 348px !important; }
  .tab-panel--start .start-qa-card--4{ top: 4566px !important; height: 373px !important; }
  .tab-panel--start .start-qa-card--5{ top: 4958px !important; height: 402px !important; }
   /* SPでは開閉UIを使わない（見た目も挙動も固定） */
  .tab-panel--start .qa-toggle{
    display: none !important;
  }
  .tab-panel--start .start-qa-card{
    transition: none !important;
  }

  /* カード内の基準を作る */
  .tab-panel--start .start-qa-card{
    position: absolute;      /* ←あなたのtop固定が効く前提 */
  }

  /* ===== card1 の中身配置 ===== */
  .tab-panel--start .start-qa-card--1 .qa-qrow{
    position: relative;
    height: 101px;           /* Aが始まる位置(=5542)まで */
  }

  /* Qバッジ（グラデ円＋Q） */
  .tab-panel--start .start-qa-card--1 .qa-qbadge{
    position: absolute;
    top: 35px;               /* 5476 - 5441 */
    left: 19px;              /* 53 - 34 */
    width: 20.68994px;
    height: 20.68994px;

    display: grid;
    place-items: center;

    border-radius: 999px;
    background: linear-gradient(135deg, #D585FA 0%, #7694FF 100%);

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 11.66px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #fff;
  }

  /* 質問文 */
  .tab-panel--start .start-qa-card--1 .qa-qtext{
    position: absolute;
    top: 33px;               /* 5474 - 5441 */
    left: 49px;              /* 83 - 34 */
    width: 210px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #111;
  }

  /* Answer ブロック（カード内で絶対配置） */
  .tab-panel--start .start-qa-card--1 .qa-answer{
    position: absolute;
    top: 101px;              /* 5542 - 5441 */
    left: 0;
    width: 100%;
  }

  /* A. */
  .tab-panel--start .start-qa-card--1 .qa-abadge{
    position: absolute;
    top: 0px;
    left: 22px;              /* 56 - 34 */
    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 2;          /* 200% */
    letter-spacing: 0;

  }

  /* 回答見出し */
  .tab-panel--start .start-qa-card--1 .qa-ahead{
    position: absolute;
    top: 0px;
    left: 46px;              /* 80 - 34 */
    width: 243px;            /* 見出しは139でもOKだけど、折返し事故防止で少し余裕 */
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #111;
  }

  /* 回答本文 */
  .tab-panel--start .start-qa-card--1 .qa-abody{
    position: absolute;
    top: 46px;               /* 5588 - 5542 */
    left: 46px;              /* 80 - 34 */
    width: 239px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;

  }
  /* ===== card2 の中身配置 ===== */
  .tab-panel--start .start-qa-card--2 .qa-qrow{
    position: relative;
    height: 77px;            /* A開始(=5858)まで：5858-5781=77 */
  }

  /* Qバッジ（グラデ円＋Q） */
  .tab-panel--start .start-qa-card--2 .qa-qbadge{
    position: absolute;
    top: 35px;               /* 5816 - 5781 */
    left: 19px;              /* 53 - 34 */
    width: 20.68994px;
    height: 20.68994px;

    display: grid;
    place-items: center;

    border-radius: 999px;
    background: linear-gradient(135deg, #D585FA 0%, #7694FF 100%);

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 11.66px;      /* card1と揃え */
    line-height: 1.5;
    letter-spacing: 0;
    color: #fff;
  }

  /* 質問文 */
  .tab-panel--start .start-qa-card--2 .qa-qtext{
    position: absolute;
    top: 33px;               /* 5814 - 5781 */
    left: 49px;              /* 83 - 34 */
    width: 226px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #111;
  }

  /* Answer ブロック */
  .tab-panel--start .start-qa-card--2 .qa-answer{
    position: absolute;
    top: 77px;               /* 5858 - 5781 */
    left: 0;
    width: 100%;
  }

  /* A. */
  .tab-panel--start .start-qa-card--2 .qa-abadge{
    position: absolute;
    top: 0px;
    left: 22px;              /* 56 - 34 */
    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 2;          /* 200% */
    letter-spacing: 0;
  }

  /* 回答見出し（2行想定なので width=229 を忠実に） */
  .tab-panel--start .start-qa-card--2 .qa-ahead{
    position: absolute;
    top: 0px;
    left: 46px;              /* 80 - 34 */
    width: 229px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #111;
  }

  /* 回答本文 */
  .tab-panel--start .start-qa-card--2 .qa-abody{
    position: absolute;
    top: 65px;               /* 5923 - 5858 */
    left: 46px;              /* 80 - 34 */
    width: 243px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
  /* ===== card3 の中身配置 ===== */
  .tab-panel--start .start-qa-card--3 .qa-qrow{
    position: relative;
    height: 101px;           /* A開始(=6244)まで：6244-6143=101 */
  }

  /* Qバッジ（グラデ円＋Q） */
  .tab-panel--start .start-qa-card--3 .qa-qbadge{
    position: absolute;
    top: 35px;               /* 6178 - 6143 */
    left: 19px;              /* 53 - 34 */
    width: 20.68994px;
    height: 20.68994px;

    display: grid;
    place-items: center;

    border-radius: 999px;
    background: linear-gradient(135deg, #D585FA 0%, #7694FF 100%);

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 11.66px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  /* 質問文 */
  .tab-panel--start .start-qa-card--3 .qa-qtext{
    position: absolute;
    top: 33px;               /* 6176 - 6143 */
    left: 49px;              /* 83 - 34 */
    width: 200px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  /* Answer ブロック */
  .tab-panel--start .start-qa-card--3 .qa-answer{
    position: absolute;
    top: 101px;              /* 6244 - 6143 */
    left: 0;
    width: 100%;
  }

  /* A. */
  .tab-panel--start .start-qa-card--3 .qa-abadge{
    position: absolute;
    top: 0px;
    left: 22px;              /* 56 - 34 */
    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0;
  }

  /* 回答見出し */
  .tab-panel--start .start-qa-card--3 .qa-ahead{
    position: absolute;
    top: 0px;
    left: 46px;              /* 80 - 34 */
    width: 235px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  /* 回答本文 */
  .tab-panel--start .start-qa-card--3 .qa-abody{
    position: absolute;
    top: 65px;               /* 6309 - 6244 */
    left: 46px;              /* 80 - 34 */
    width: 243px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
  .tab-panel--start .start-qa-card--4 .qa-qrow{
    position: relative;
    height: 101px;           /* 6608 - 6507 */
  }

  .tab-panel--start .start-qa-card--4 .qa-qbadge{
    position: absolute;
    top: 35px;               /* 6542 - 6507 */
    left: 19px;              /* 53 - 34 */
    width: 20.68994px;
    height: 20.68994px;

    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #D585FA 0%, #7694FF 100%);

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 11.66px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .tab-panel--start .start-qa-card--4 .qa-qtext{
    position: absolute;
    top: 33px;               /* 6540 - 6507 */
    left: 49px;              /* 83 - 34 */
    width: 210px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .tab-panel--start .start-qa-card--4 .qa-answer{
    position: absolute;
    top: 101px;              /* 6608 - 6507 */
    left: 0;
    width: 100%;
  }

  .tab-panel--start .start-qa-card--4 .qa-abadge{
    position: absolute;
    top: 0px;
    left: 22px;              /* 56 - 34 */
    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0;
  }

  .tab-panel--start .start-qa-card--4 .qa-ahead{
    position: absolute;
    top: 0px;
    left: 46px;              /* 80 - 34 */
    width: 232px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  .tab-panel--start .start-qa-card--4 .qa-abody{
    position: absolute;
    top: 65px;               /* 6673 - 6608 */
    left: 46px;              /* 80 - 34 */
    width: 243px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
  .tab-panel--start .start-qa-card--5 .qa-qrow{
    position: relative;
    height: 101px;           /* 7000 - 6899 */
  }

  .tab-panel--start .start-qa-card--5 .qa-qbadge{
    position: absolute;
    top: 35px;               /* 6934 - 6899 */
    left: 19px;              /* 53 - 34 */
    width: 20.68994px;
    height: 20.68994px;

    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #D585FA 0%, #7694FF 100%);

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 11.66px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .tab-panel--start .start-qa-card--5 .qa-qtext{
    position: absolute;
    top: 33px;               /* 6932 - 6899 */
    left: 49px;              /* 83 - 34 */
    width: 210px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .tab-panel--start .start-qa-card--5 .qa-answer{
    position: absolute;
    top: 101px;              /* 7000 - 6899 */
    left: 0;
    width: 100%;
  }

  .tab-panel--start .start-qa-card--5 .qa-abadge{
    position: absolute;
    top: 0px;
    left: 22px;              /* 56 - 34 */
    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0;
  }

  /* 見出しは高さ78（=3行想定） */
  .tab-panel--start .start-qa-card--5 .qa-ahead{
    position: absolute;
    top: 0px;
    left: 46px;              /* 80 - 34 */
    width: 232px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  .tab-panel--start .start-qa-card--5 .qa-abody{
    position: absolute;
    top: 91px;               /* 7091 - 7000 */
    left: 46px;              /* 80 - 34 */
    width: 243px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
   /* ヘッダーは左右いっぱいに広げる */
  .header-frame{
    width: 100%;
  }

  /* 中身も 390 で縛らず全幅にする（中央寄せ解除） */
  .header-inner{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;          /* 余白は left/right の値で作るなら0でOK */
    position: relative;  /* brand/hamburger の absolute 基準 */
    display: block;
  }
  /* 端に合わせたいなら、left/right を「端基準」にする */
  .brand{
    position: absolute;
    left: 26px;  /* ←左端からの距離 */
    top: 31px;
  }

  .hamburger{
    position: absolute;
    right: 19px; /* ←右端からの距離 */
    top: 34px;
  }

   /* 2ページ目（already）をSPキャンバス390基準にする */
  .tab-panel[data-panel="already"]{
    position: relative;
    min-height: 6123px; /* ボタン97px込みの高さならこのままでOK */
  }

  .tab-panel[data-panel="already"] .already-pane{
    position: relative;
    width: min(390px, 100%);
    min-height: 6123px;
    margin-inline: auto;
    left: 0;
  }

  :root{
    --already-sp-offset: 200px; /* ← 245→45 から確定 */
  }

  .tab-panel[data-panel="already"] .already-title{
    position: absolute;
    top: calc(245px - var(--already-sp-offset));
    left: 34px;
    width: 193px;
    height: 88px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.38;
    letter-spacing: 0;
  }

  /* 同じく全部、topはこの形式にする */
  .tab-panel[data-panel="already"] .already-lead{
    position: absolute;
    top: calc(373px - var(--already-sp-offset));
    left: 34px;
    width: 295px;
    height: 84px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.38;
    letter-spacing: 0.04em;
  }

  .tab-panel[data-panel="already"] .already-body{
    position: absolute;
    top: calc(478px - var(--already-sp-offset));
    left: 34px;
    width: 322px;
    height: 275px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  :root{
    --already-sp-offset: 200px; /* 245 -> 45 で確定した補正 */
  }

  /* =========================
     PROBLEM 見出し
  ========================= */
  .tab-panel[data-panel="already"] .already-problem{
    position: absolute;
    top: calc(808px - var(--already-sp-offset));
    left: 34px;
    width: 142px;
    height: 34px;
    margin: 0;

    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1; /* 100% */
    letter-spacing: 0;
  }

  .tab-panel[data-panel="already"] .already-problem-sub{
    position: absolute;
    top: calc(847px - var(--already-sp-offset));
    left: 34px;
    width: 195px;
    height: 18px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: 0;
  }

  /* =========================
     PROBLEM カード共通（白枠）
  ========================= */
  .tab-panel[data-panel="already"] .already-probcard{
    position: absolute;
    width: 158px;
    height: 111px;
    border-radius: 5.66px;
    overflow: hidden;
    /* background は既存に任せる（指定しない） */
  }

  /* カード内テキスト共通（既存クラス名に合わせて調整） */
  .tab-panel[data-panel="already"] .already-probcard .already-probtext{
    position: absolute;
    margin: 0;
    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* =========================
     1行目
  ========================= */
  /* 視聴者が増えない */
  .tab-panel[data-panel="already"] .already-probcard--1{
    top: calc(896px - var(--already-sp-offset));
    left: 34px;
  }
  .tab-panel[data-panel="already"] .already-probcard--1 .already-probtext{
    top: 12px;  /* 908 - 896 */
    left: 15px; /* 49  - 34  */
    width: 64px;
    height: 42px;
    font-size: 16px;
  }

  /* 初見が入ってもすぐ抜ける */
  .tab-panel[data-panel="already"] .already-probcard--2{
    top: calc(896px - var(--already-sp-offset));
    left: 198px;
  }
  .tab-panel[data-panel="already"] .already-probcard--2 .already-probtext{
    top: 12px;  /* 908 - 896 */
    left: 13px; /* 211 - 198 */
    width: 112px;
    height: 42px;
    font-size: 16px;
  }

  /* =========================
     2行目
  ========================= */
  /* コメントが増えない */
  .tab-panel[data-panel="already"] .already-probcard--3{
    top: calc(1013px - var(--already-sp-offset));
    left: 34px;
  }
  .tab-panel[data-panel="already"] .already-probcard--3 .already-probtext{
    top: 12px;  /* 1025 - 1013 */
    left: 15px; /* 49  - 34  */
    width: 80px;
    height: 42px;
    font-size: 16px;
  }

  /* ギフト・応援が伸びない */
  .tab-panel[data-panel="already"] .already-probcard--4{
    top: calc(1013px - var(--already-sp-offset));
    left: 198px;
  }
  .tab-panel[data-panel="already"] .already-probcard--4 .already-probtext{
    top: 12px;  /* 1025 - 1013 */
    left: 13px; /* 211 - 198 */
    width: 112px;
    height: 42px;
    font-size: 16px;
  }

  /* =========================
     3行目
  ========================= */
  /* 配信内容がマンネリ化して企画が思いつかない（font 14） */
  .tab-panel[data-panel="already"] .already-probcard--5{
    top: calc(1130px - var(--already-sp-offset));
    left: 34px;
  }
  .tab-panel[data-panel="already"] .already-probcard--5 .already-probtext{
    top: 12px;  /* 1142 - 1130 */
    left: 15px; /* 49  - 34  */
    width: 126px;
    height: 54px;
    font-size: 14px;
  }

  /* モチベーションが落ちている */
  .tab-panel[data-panel="already"] .already-probcard--6{
    top: calc(1130px - var(--already-sp-offset));
    left: 198px;
  }
  .tab-panel[data-panel="already"] .already-probcard--6 .already-probtext{
    top: 12px;  /* 1142 - 1130 */
    left: 13px; /* 211 - 198 */
    width: 112px;
    height: 42px;
    font-size: 16px;
  }

  /* ===== divider line（白線） ===== */
  .tab-panel[data-panel="already"] .already-line{
    position: absolute;
    top: calc(1283px - var(--already-sp-offset));
    left: 34px;
    width: 322px;
    height: 0;
    margin: 0;

    border: 0;
    border-top: 1px solid #fff; /* 色は既存の文字色に追従 */
  }

  /* ===== STEP ===== */
  .tab-panel[data-panel="already"] .already-step{
    position: absolute;
    top: calc(1313px - var(--already-sp-offset));
    left: 34px;
    width: 72px;
    height: 34px;
    margin: 0;

    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
  }

  /* 伸び悩み解決の4ステップ */
  .tab-panel[data-panel="already"] .already-step-sub{
    position: absolute;
    top: calc(1352px - var(--already-sp-offset));
    left: 34px;
    width: 151px;
    height: 18px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: 0;
  }

  .tab-panel[data-panel="already"] .already-step-img{
    position: absolute;
    left: 0px; /* left指定が無いので0で配置（必要なら後で調整） */
    top: calc(1412px - var(--already-sp-offset));

    width: 391px;
    height: 1975px;

    display: block;
    object-fit: contain;

    /* ★ ここで画像を差し替え（PCではsrcのstep.pngに戻る） */
    content: url("../img/step_h.png");
  }

  /* VOICE上の白線 */
  .tab-panel[data-panel="already"] .already-line2{
    top: 3250px;        /* 3460 - 200 */
    left: 34px;
    width: 322px;
    border-top-width: 1px;
  }

  /* VOICE */
  .tab-panel[data-panel="already"] .already-voice{
    top: 3279px;        /* 3479 - 200 */
    left: 34px;
    width: 89px;
    height: 34px;

    font-size: 28px;
    line-height: 1;
    font-weight: 500;
  }

  /* 先輩ライバーの声 */
  .tab-panel[data-panel="already"] .already-voice-sub{
    top: 3318px;        /* 3518 - 200 */
    left: 34px;
    width: 104px;
    height: 18px;

    font-size: 13px;
    line-height: 1.38;
    font-weight: 500;
  }
  /* ✅ alreadyパネルのSP基準（あなたの運用：Figma top 200px → panel top 0） */
  .tab-panel[data-panel="already"]{ position: relative !important; }

  /* ---- human（3つ） ---- */
  .tab-panel[data-panel="already"] .already-voice-human{
    position: absolute !important;
    width: 87px !important;
    height: 87px !important;
    object-fit: contain !important;
    z-index: 5 !important;
  }

  /* 3580-200 / 4538-200 / 5432-200 */
  .tab-panel[data-panel="already"] .already-voice-human--1{ left: 152px !important; top: 3380px !important; }
  .tab-panel[data-panel="already"] .already-voice-human--2{ left: 152px !important; top: 4338px !important; }
  .tab-panel[data-panel="already"] .already-voice-human--3{ left: 152px !important; top: 5232px !important; }

  /* ---- 白枠（3つ） ---- */
  .tab-panel[data-panel="already"] .already-voice-box{
    position: absolute !important;
    left: 34px !important;
    width: 322px !important;
    background: #fff !important;
    border-radius: 11px !important;
    z-index: 1 !important;
  }

  /* 3709-200 / 4667-200 / 5561-200 */
  .tab-panel[data-panel="already"] .already-voice-box--1{ top: 3509px !important; height: 746px !important; }
  .tab-panel[data-panel="already"] .already-voice-box--2{ top: 4467px !important; height: 682px !important; }
  .tab-panel[data-panel="already"] .already-voice-box--3{ top: 5361px !important; height: 682px !important; }

  /* ---- テキストレイヤー（白枠に重ねる） ---- */
  .tab-panel[data-panel="already"] .already-voice-text{
    position: absolute !important;
    left: 34px !important;
    width: 322px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .tab-panel[data-panel="already"] .already-voice-text--1{ top: 3509px !important; height: 746px !important; }
  .tab-panel[data-panel="already"] .already-voice-text--2{ top: 4467px !important; height: 682px !important; }
  .tab-panel[data-panel="already"] .already-voice-text--3{ top: 5361px !important; height: 682px !important; }

  /* 枠内テキスト（枠左上基準の相対位置はそのままでOK） */
  .tab-panel[data-panel="already"] .already-voice-title{
    position: absolute !important;
    left: 24px !important;
    top: 37px !important;
    margin: 0 !important;
    width: 226px !important;
    height: 48px !important;
    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 150% !important;
    letter-spacing: 0 !important;
    color: #000 !important;
  }

  .tab-panel[data-panel="already"] .already-voice-body{
    position: absolute !important;
    left: 24px !important;
    top: 113px !important;
    width: 276px !important;
    margin: 0 !important;
    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 175% !important;
    letter-spacing: 0.04em !important;
    color: #5B5B5B !important;
  }

  .tab-panel[data-panel="already"] .already-grad{
    font-weight: 700 !important;
  }

  /* 共通：SPの吹き出し(センター) */
  .tab-panel[data-panel="already"] .already-voice-bubble{
    position: absolute !important;
    width: 28px !important;
    height: 45.8212432861px !important;
    left: 181px !important;
    z-index: 6 !important; /* humanより上なら 6、下なら 4 */
  }

  /* 画像は疑似要素で出す */
  .tab-panel[data-panel="already"] .already-voice-bubble::before{
    content: "" !important;
    position: absolute;
    inset: 0;
    background: url("../img/fukidashi_c.png") center / contain no-repeat;
  }

  /* 1 */
  .tab-panel[data-panel="already"] .already-voice-bubble--1{
    top: 3486px !important; /* 3686 - 200 */
  }

  /* 2 */
  .tab-panel[data-panel="already"] .already-voice-bubble--2{
    top: 4444px !important; /* 4644 - 200 */
  }

  /* 3 */
  .tab-panel[data-panel="already"] .already-voice-bubble--3{
    top: 5338px !important; /* 5538 - 200 */
  }
  .tab-panel[data-panel="already"] .already-voice-bubble,
  .tab-panel[data-panel="already"] .already-voice-bubble::before{
    transform: none !important;
    rotate: 0deg !important; /* 念のため */
  }
  .tab-panel[data-panel="already"] .already-voice-bubble{
    content: url("../img/fukidashi_c.png") !important;
    transform: none !important;
    rotate: 0deg !important;
  }

  /* =========================
     TikTok panel (SP) 固定レイアウト
     ========================= */

  .tab-panel[data-panel="tiktok"]{
    position: relative;
    width: 390px;
    min-height: 6075px;
  }

  /* --- HERO --- */
  .tab-panel[data-panel="tiktok"] .tiktok-title{
    position: absolute;
    top: 51px;
    left: 34px;
    width: 160px;
    height: 132px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.38;
    letter-spacing: 0;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-lead{
    position: absolute;
    top: 231px;
    left: 34px;
    width: 311px;
    height: 56px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.38;
    letter-spacing: 0.04em;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-body{
    position: absolute;
    top: 314px;
    left: 34px;
    width: 322px;
    height: 100px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  /* --- MERIT 見出し（※20px上げ後の座標） --- */
  .tab-panel[data-panel="tiktok"] .tiktok-merit-title{
    position: absolute;
    top: 479px;
    left: 34px;
    width: 91px;
    height: 34px;
    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-merit-sub{
    position: absolute;
    top: 518px;
    left: 34px;
    width: 104px;
    height: 18px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: 0;
  }

  /* --- 白枠（3つ） --- */
  .tab-panel[data-panel="tiktok"] .tiktok-merit-box{
    position: absolute;
    left: 34px;
    width: 322px;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
  }
  .tab-panel[data-panel="tiktok"] .tiktok-merit-box--1{ top: 567px;  height: 419px; }
  .tab-panel[data-panel="tiktok"] .tiktok-merit-box--2{ top: 1004px; height: 520px; }
  .tab-panel[data-panel="tiktok"] .tiktok-merit-box--3{ top: 1542px; height: 441px; }

  /* 枠内を相対基準にする（ここ重要：文字が変わらない原因がこれ） */
  .tab-panel[data-panel="tiktok"] .tiktok-merit-box__inner{
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* --- 1枚目：タイトル / 本文 --- */
  .tab-panel[data-panel="tiktok"] .tiktok-merit1-title{
    position: absolute;
    top: 39px;   /* 826 - 787 */
    left: 26px;  /* 60 - 34 */
    width: 192px;
    height: 93px;
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.30;
    letter-spacing: 0;
  }
  .tab-panel[data-panel="tiktok"] .tiktok-merit1-body{
    position: absolute;
    top: 153px;  /* 940 - 787 */
    left: 26px;  /* 60 - 34 */
    width: 271px;
    height: 225px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }

  /* --- 2枚目：タイトル / 本文 --- */
  .tab-panel[data-panel="tiktok"] .tiktok-merit2-title{
    position: absolute;
    top: 39px;   /* 1263 - 1224 */
    left: 26px;
    width: 168px;
    height: 62px;
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.30;
    letter-spacing: 0;
  }
  .tab-panel[data-panel="tiktok"] .tiktok-merit2-body{
    position: absolute;
    top: 120px;  /* 1344 - 1224 */
    left: 26px;
    width: 271px;
    height: 350px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
  /* 2つ目のbrだけ消す */
  .tab-panel[data-panel="tiktok"] .tiktok-body br:nth-of-type(2){
    display: none;
  }
  /* --- 3枚目：タイトル / 本文 --- */
  .tab-panel[data-panel="tiktok"] .tiktok-merit3-title{
    position: absolute;
    top: 39px;   /* 1801 - 1762 */
    left: 26px;
    width: 192px;
    height: 93px;
    margin: 0;

    font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.30;
    letter-spacing: 0;
  }
  .tab-panel[data-panel="tiktok"] .tiktok-merit3-body{
    position: absolute;
    top: 156px;  /* 1918 - 1762 */
    left: 26px;
    width: 271px;
    height: 225px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.04em;
  }
  /* =========================
   TikTok (SP) : Migration Pitfalls 見出し（Figma完全反映版）
   ※ 既存の「calc(◯px - var(--tiktok-page-top))」方式に合わせる
   ========================= */

  .tab-panel[data-panel="tiktok"] .tiktok-divider{
    position: absolute;
    top: 2030px;
    left: 34px;
    width: 322px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #fff;
    opacity: 1;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-title{
    position: absolute;
    top: 2049px;
    left: 34px;
    width: 239px;
    height: 34px;
    margin: 0;

    font-family: Alexandria, system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1; /* 100% */
    letter-spacing: 0%;
    color: #fff;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-sub{
    position: absolute;
    top: 2088px;
    left: 34px;
    width: 117px;
    height: 18px;
    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38; /* 138% */
    letter-spacing: 0%;
    color: #fff;
  }
  /* TikTokパネルが「絶対配置の基準」になるようにする */
  .tab-panel[data-panel="tiktok"]{
    position: relative;
  }

  /* boxは“箱の役割だけ”にして、位置決めの親にしない */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box{
    position: static !important;      /* ←これが超重要 */
    width: 0 !important;
    height: 0 !important;
  }

  /* 白枠の描画（ページ基準で配置） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box::before{
    content: "";
    position: absolute;
    left: 34px;
    top: 2143px; /* 2363 - 220 */

    width: 322px;
    height: 599px;

    background: #fff;
    border-radius: 11px;
    opacity: 1;
    box-sizing: border-box;
    z-index: 1;
  }

  /* 中身は「ページ基準」で全部置く（Figma - 220） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box__inner{
    position: static !important; /* ここもrelativeにしない */
  }

  /* x.png */
  .tab-panel[data-panel="tiktok"] .tiktok-pit1-x{
    position: absolute !important;
    left: 53px !important;
    top: 2179px !important; /* 2399 - 220 */
    width: 20px !important;
    height: 20px !important;
    z-index: 2 !important;
  }

  /* 左タイトル */
  .tab-panel[data-panel="tiktok"] .tiktok-pit1-leftTitle{
    position: absolute !important;
    left: 83px !important;
    top: 2176px !important; /* 2396 - 220 */
    width: 210px !important;
    height: 48px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5 !important; /* 150% */
    letter-spacing: 0 !important;
    color: #000 !important;
    z-index: 2 !important;
  }

  /* 左本文 */
  .tab-panel[data-panel="tiktok"] .tiktok-pit1-leftBody{
    position: absolute !important;
    left: 80px !important;
    top: 2241px !important; /* 2461 - 220 */
    width: 243px !important;
    height: 175px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.75 !important; /* 175% */
    letter-spacing: 0.04em !important; /* 4% */
    color: #5B5B5B !important;
    z-index: 2 !important;
  }

  /* 矢印：SP時だけ down.png に差し替え + 角度 */
  .tab-panel[data-panel="tiktok"] .tiktok-pit1-arrow{
    position: absolute !important;
    left: 168px !important;
    top: 2443px !important; /* 2663 - 220 */
    width: 54px !important;
    height: 54px !important;
    z-index: 2 !important;

    content: url("../img/down.png") !important;
    
  }

  /* check.png */
  .tab-panel[data-panel="tiktok"] .tiktok-pit1-check{
    position: absolute !important;
    left: 50px !important;
    top: 2524px !important; /* 2744 - 220 */
    width: 26px !important;
    height: 26px !important;
    z-index: 2 !important;
  }

  /* 右タイトル */
  .tab-panel[data-panel="tiktok"] .tiktok-pit1-rightTitle{
    position: absolute !important;
    left: 83px !important;
    top: 2524px !important; /* 2744 - 220 */
    width: 229px !important;
    height: 48px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;

    background: var(--grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    z-index: 2 !important;
  }

  /* 右本文 */
  .tab-panel[data-panel="tiktok"] .tiktok-pit1-rightBody{
    position: absolute !important;
    left: 80px !important;
    top: 2589px !important; /* 2809 - 220 */
    width: 243px !important;
    height: 100px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
    color: #000 !important;

    z-index: 2 !important;
  }
  
  /* box本体は配置に使わない（::beforeで白枠を描く） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2{
    position: static !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* 白枠（Figma 2980 - 220 = 2760） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2::before{
    content: "";
    position: absolute;
    left: 34px;
    top: 2760px; /* 2980 - 220 */

    width: 322px;
    height: 627px;

    background: #fff;
    border-radius: 11px;
    opacity: 1;
    box-sizing: border-box;
    z-index: 1;
  }

  /* 中身はページ基準配置 */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pitfalls-box__inner{
    position: static !important;
  }

  /* x画像（3016-220=2796） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pit2-x{
    position: absolute !important;
    left: 53px !important;
    top: 2796px !important;

    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 左タイトル（3013-220=2793） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pit2-leftTitle{
    position: absolute !important;
    left: 83px !important;
    top: 2793px !important;

    width: 210px !important;
    height: 72px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: #000 !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 左本文（3101-220=2881） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pit2-leftBody{
    position: absolute !important;
    left: 80px !important;
    top: 2881px !important;

    width: 243px !important;
    height: 175px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important; /* 4% */
    color: #5B5B5B !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* down画像（3303-220=3083）※回転なし */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pit2-arrow{
    position: absolute !important;
    left: 168px !important;
    top: 3083px !important;

    width: 54px !important;
    height: 54px !important;

    content: url("../img/down.png") !important;
    transform: none !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* check画像（3384-220=3164） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pit2-check{
    position: absolute !important;
    left: 50px !important;
    top: 3164px !important;

    width: 26px !important;
    height: 26px !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 右タイトル（3384-220=3164） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pit2-rightTitle{
    position: absolute !important;
    left: 83px !important;
    top: 3164px !important;

    width: 229px !important;
    height: 48px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;

    background: var(--grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 右本文（3449-220=3229） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--2 .tiktok-pit2-rightBody{
    position: absolute !important;
    left: 80px !important;
    top: 3229px !important;

    width: 243px !important;
    height: 100px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
    color: #000 !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* box本体は配置に使わない（::beforeで白枠を描く） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3{
    position: static !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* 白枠（Figma 3625 - 220 = 3405） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3::before{
    content: "";
    position: absolute;
    left: 34px;
    top: 3405px; /* 3625 - 220 */

    width: 322px;
    height: 588px;

    background: #fff;
    border-radius: 11px;
    opacity: 1;
    box-sizing: border-box;
    z-index: 1;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pitfalls-box__inner{
    position: static !important;
  }

  /* x（3661-220=3441） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pit3-x{
    position: absolute !important;
    left: 53px !important;
    top: 3441px !important;

    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 左タイトル（3658-220=3438） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pit3-leftTitle{
    position: absolute !important;
    left: 83px !important;
    top: 3438px !important;

    width: 210px !important;
    height: 48px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: #000 !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 左本文（3725-220=3505） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pit3-leftBody{
    position: absolute !important;
    left: 80px !important;
    top: 3505px !important;

    width: 243px !important;
    height: 150px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important; /* 4% */
    color: #5B5B5B !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* down（3908-220=3688）※回転なし */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pit3-arrow{
    position: absolute !important;
    left: 168px !important;
    top: 3688px !important;

    width: 54px !important;
    height: 54px !important;

    content: url("../img/down.png") !important;
    transform: none !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* check（3989-220=3769） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pit3-check{
    position: absolute !important;
    left: 50px !important;
    top: 3769px !important;

    width: 26px !important;
    height: 26px !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 右タイトル（3989-220=3769） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pit3-rightTitle{
    position: absolute !important;
    left: 83px !important;
    top: 3769px !important;

    width: 229px !important;
    height: 48px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;

    background: var(--grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* 右本文（4054-220=3834） */
  .tab-panel[data-panel="tiktok"] .tiktok-pitfalls-box--3 .tiktok-pit3-rightBody{
    position: absolute !important;
    left: 80px !important;
    top: 3834px !important;

    width: 243px !important;
    height: 100px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
    color: #000 !important;

    opacity: 1 !important;
    z-index: 2 !important;
  }
  .tiktok-pit3-leftTitle br{
    display: none;
  }

  /* Divider line */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-line{
    position: absolute;
    left: 34px;
    top: 4041px; /* 4261 - 220 */

    width: 322px;
    height: 0;

    margin: 0;
    border: 0;
    border-top: 1px solid #fff;
    opacity: 1;
  }

  /* VOICE */
  .tab-panel[data-panel="tiktok"] .tiktok-voice{
    position: absolute;
    left: 34px;
    top: 4060px; /* 4280 - 220 */

    width: 89px;
    height: 34px;

    margin: 0;

    font-family: "Alexandria", system-ui, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1; /* 100% */
    letter-spacing: 0;
    color: #fff;
    opacity: 1;
  }

  /* 先輩ライバーの声 */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-sub{
    position: absolute;
    left: 34px;
    top: 4099px; /* 4319 - 220 */

    width: 104px;
    height: 18px;

    margin: 0;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.38; /* 138% */
    letter-spacing: 0;
    color: #fff;
    opacity: 1;
  }

  /* card 自体は座標の基準にしない（0固定の透明ラッパー） */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-card--1{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 390px !important;
    height: 0 !important;
  }

  /* human */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-human--1{
    position: absolute !important;
    width: 87px !important;
    height: 87.0001297px !important;
    top: 4381px !important;
    left: 152px !important;
    opacity: 1 !important;
    z-index: 6 !important;
  }

  /* 吹き出し：SPだけ fukidashi_c に差し替え */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-bubble--1{
    position: absolute !important;
    width: 28px !important;
    height: 45.8212432861px !important;
    top: 4487px !important;
    left: 181px !important;
    opacity: 1 !important;
    z-index: 7 !important;

    /* img差し替え（CSS側で差し替える） */
    content: url("../img/fukidashi_c.png") !important;
  }

  /* 下の白枠 */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--1{
    position: absolute !important;
    width: 322px !important;
    height: 727px !important;
    top: 4510px !important;
    left: 34px !important;
    border-radius: 11px !important;
    background: #fff !important;
    opacity: 1 !important;

    /* 子要素の absolute 基準 */
    position: absolute !important;
  }

  /* タイトル：白枠基準の相対配置で置く（ズレ防止） */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--1 .tiktok-voice-title--1{
    position: absolute !important;
    width: 244px !important;
    height: 72px !important;

    /* 4547 - 4510 = 37 / 58 - 34 = 24 */
    top: 37px !important;
    left: 24px !important;

    margin: 0 !important;
    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 150% !important;
    letter-spacing: 0 !important;
    color: #000 !important;
  }

  /* 本文：白枠基準の相対配置 */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--1 .tiktok-voice-body--1{
    position: absolute !important;
    width: 276px !important;
    height: 525px !important;

    /* 4643 - 4510 = 133 / 58 - 34 = 24 */
    top: 133px !important;
    left: 24px !important;

    margin: 0 !important;
    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 175% !important;
    letter-spacing: 0.04em !important;
    color: #5B5B5B !important;
  }
  .tab-panel[data-panel="tiktok"] .tiktok-voice-human--1,
  .tab-panel[data-panel="tiktok"] .tiktok-voice-bubble--1,
  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--1{
    transform: translateY(-220px);
  }

  /* 1) ここが基準 */
  .tab-panel[data-panel="tiktok"]{
    position: relative;
  }

  /* 2) card2を“透明ラッパー化”してレイアウト影響を遮断 */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-card--2{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 390px !important; /* ざっくりSP幅でOK */
    height: 0 !important;
  }

  /* 3) human/bubble/box を Figma座標で置いて、まとめて -220px */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-human--2,
  .tab-panel[data-panel="tiktok"] .tiktok-voice-bubble--2,
  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--2{
    transform: translateY(-220px) !important;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-voice-human--2{
    position: absolute !important;
    left: 152px !important;
    top: 5286px !important;
    width: 87px !important;
    height: 87.0001297px !important;
    z-index: 6 !important;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-voice-bubble--2{
    position: absolute !important;
    left: 181px !important;
    top: 5392px !important;
    width: 28px !important;
    height: 45.8212432861px !important;
    z-index: 7 !important;

    /* SPだけ吹き出し差し替え */
    content: url("../img/fukidashi_c.png") !important;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--2{
    position: absolute !important;
    left: 34px !important;
    top: 5415px !important;
    width: 322px !important;
    height: 780px !important;
    border-radius: 11px !important;
    background: #fff !important;
    z-index: 1 !important;
  }

  /* タイトル/本文は白枠基準（ズレない） */
  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--2 .tiktok-voice-title--2{
    position: absolute !important;
    left: 24px !important;  /* 58-34 */
    top: 37px !important;   /* 5452-5415 */
    width: 225px !important;
    height: 72px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: #000 !important;
    z-index: 2 !important;
  }

  .tab-panel[data-panel="tiktok"] .tiktok-voice-box--2 .tiktok-voice-body--2{
    position: absolute !important;
    left: 24px !important;  /* 58-34 */
    top: 129px !important;  /* 5544-5415 */
    width: 276px !important;
    height: 600px !important;
    margin: 0 !important;

    font-family: "Noto Sans JP", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
    color: #5B5B5B !important;
    z-index: 2 !important;
  }
}

@media (min-width: 769px){

  /* まず全部の br を無効化（=基本は改行しない） */
  .tab-hero__tab br{ display: none; }

  /* start：1つ目の br だけ残す → 2行化
     「これから / ライブ配信を / 始めたい」→「これからライブ配信を / 始めたい」にする */
  .tab-hero__tab[data-tab="start"] br:first-of-type{ display: inline; }
  .tab-hero__tab[data-tab="start"] br:nth-of-type(2){ display: none; }

  /* already：brは全部消す → 1行 */
  .tab-hero__tab[data-tab="already"] br{ display: none; }

  /* tiktok：1つ目の br だけ残す → 2行
     「配信場所を / TikTokに / 変えたい」→「配信場所を / TikTokに変えたい」 */
  .tab-hero__tab[data-tab="tiktok"] br:first-of-type{ display: inline; }
  .tab-hero__tab[data-tab="tiktok"] br:nth-of-type(2){ display: none; }
  /* 1) 「…？」と「…？」の間の改行を消す（=同じ行にする） */
  .start-pane__body br:nth-of-type(1){
    display: none;
  }

  /* 2) 連続する <br><br> の「2個目」を消して、空行を作らない */
  .start-pane__body br:nth-of-type(2){
    display: none;
  }
  .start-qa-card--5 .qa-ahead br:first-of-type{
    display: none;
  }
  .tab-panel[data-panel="already"] .already-step-img{
    content: unset; /* ← SPで差し替えたcontentを無効化 */
  }
  .tiktok-pit2-leftTitle br:nth-of-type(2){
    display: none;
  }
  .tiktok-voice-title--1 br:nth-of-type(1){
    display: none;
  }
}
/* =========================
   SP MENU（高さ442px / グラデ背景 / 390中央寄せ）
   ※ハンバーガー自体は触らない
   ========================= */
@media (max-width: 768px){
  .sp-menu{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
  }

  /* 442pxより下（クリックで閉じる用） */
  .sp-menu__overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 442px;
    bottom: 0;

    background: transparent;
    opacity: 0;
    transition: opacity .28s ease;
  }

  /* パネル：上から442pxだけ出す */
  .sp-menu__panel{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 442px;
    z-index: 1;

    /* このcssで大量に使われているグラデ */
    background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);

    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .28s ease, transform .28s ease;

    overflow: hidden;
  }

  /* メニュー内ブランド（ヘッダー同様：画面左基準で固定） */
  .sp-menu .brand{
    z-index: 2;
  }
  .sp-menu .brand-mark{
    background: #fff; /* 指定：白い四角 */
  }
  .sp-menu .brand-text{
    color: #fff;
  }

  /* 閉じる（×：線で描画） */
.sp-menu__close{
  position: absolute;
  top: 36px;
  right: 24px;
  z-index: 3;

  width: 25px;
  height: 14.7058801651px;

  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sp-menu__close::before,
.sp-menu__close::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 2px solid #fff; /* border-width: 2px */
  transform-origin: 50% 50%;
}
.sp-menu__close::before{
  transform: translateY(-50%) rotate(35deg);
}
.sp-menu__close::after{
  transform: translateY(-50%) rotate(-35deg);
}


  /* 390px中央寄せの“座標キャンバス” */
  .sp-menu__nav{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 390px;
    height: 442px;
  }

  .sp-menu__list{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sp-menu__list li{
    margin: 0;
    padding: 0;
  }

  /* リンク共通（16px） */
  .sp-menu__link{
    position: absolute;
    display: block;
    height: 20px;

    text-decoration: none;
    color: #fff;

    font-family: Alexandria, "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
  }

  /* 位置・サイズ（Figma指定どおり） */
  .sp-menu__link--top{
    top: 114px;
    left: 178px;
    width: 33px;
    text-align: right;
  }
  .sp-menu__link--about{
    top: 158px;
    left: 166px;
    width: 58px;
  }
  .sp-menu__link--creator{
    top: 202px;
    left: 156px;
    width: 78px;
  }
  .sp-menu__link--news{
    top: 246px;
    left: 169px;
    width: 51px;
  }
  .sp-menu__link--company{
    top: 290px;
    left: 153px;
    width: 84px;
  }
  .sp-menu__link--contact{
    top: 334px;
    left: 156px;
    width: 77px;
  }

  /* 開いた状態 */
  .sp-menu.is-open{
    pointer-events: auto;
  }
  .sp-menu.is-open .sp-menu__overlay{
    opacity: 1;
  }
  .sp-menu.is-open .sp-menu__panel{
    opacity: 1;
    transform: translateY(0);
  }

  body.is-menu-open{
    overflow: hidden;
    touch-action: none;
  }
  /* w_path（8×8） */
.sp-menu__wpath{
  position: absolute;
  top: 340px;
  left: 236px;
  width: 8px;
  height: 8px;
  opacity: 1;
  pointer-events: none;
}

}

@media (min-width: 769px){
  .sp-menu{
    display: none;
  }
}