.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:#d9d9d9;
  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ブロック（固定サイズ） */
  --creator-block-w: 233px;
  --creator-block-h: 171px;
  --creator-block-left: 190px;
  --creator-block-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: 設計書の四角（中身全部入り） */
.creator-block{
  position: absolute;
  width: var(--creator-block-w);
  height: var(--creator-block-h);
  top: var(--creator-block-top);
  left: clamp(
    16px, /* ← ここが「詰まった時の最低余白」(好きに変更OK) */
    calc(50% - var(--base-half) + var(--creator-block-left)),
    99999px
  );
}

/* CREATOR文字 */
.creator-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;
}

/* 所属クリエイター */
.creator-sub{
  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-所属クリエイター（色分け） */
.creator-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;
}

.creator-breadcrumb .bc-top{
  color: #989898;
}
.creator-breadcrumb .bc-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;

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

  display: block;
}


.footer-nav .footer-link{
  position: absolute;
  top: 0;
  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; }

.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: 2830px;
  --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座標に */
  .creator-block{
    position: absolute;
    top: 118px;
    left: 34px;
    width: 175px;   /* CREATOR文字の幅に合わせるなら */
    height: 132px;  /* 必要なら。指定が無ければautoでもOK */
  }

  /* ✅ CREATOR */
  .creator-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;
  }

  /* ✅ 所属クリエイター */
  .creator-sub{
    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-所属クリエイター */
  .creator-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;
  }

  .creator-breadcrumb .bc-top{ color: #989898; }
  .creator-breadcrumb .bc-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-position: center;
    background-size: cover;

    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;
  }
  

}


/* 横スクロール防止（右上画像がはみ出してもスクロールさせない） */
body{
  overflow-x: hidden;
}

/* =========================
   TOP HERO（1400×1477）
   ========================= */
.top-hero{
  position: relative;
  width: 100%;
  height: 1477px;
  
}

.top-hero__impact{
  position: absolute;
  top: 0;
  right: 0;
  width: 1400px;
  height: 1477px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.top-hero__mask{
  position: absolute;
  top: 0;
  right: 0;
  width: 1183px;
  height: 1154px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 4;
}

.top-hero__tal{
  position: absolute;
  top: 206px;
  left: 53px;
  width: 785px;
  height: 316px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

.top-hero__mes{
  position: absolute;
  top: 303px;
  left: 79px;
  width: 562px;
  height: 76px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 6;
}
/* 画面が1400より広いときも、右端に“吸着”させる */
.top-hero__impact,
.top-hero__mask{
  right: calc((100% - 100vw) / 2);
}
/* 1400時：left 815 / w 417 → right 168 */
.top-hero__circle{
  position: absolute;
  top: 162px;
  right: calc(168px + (100% - 100vw) / 2); /* impact/maskと同じ吸着ロジック */
  width: 417px;
  height: 417px;
  object-fit: cover;
  border-radius: 9999px;
  z-index: 2; /* maskより上、文字より下にしたいならこの値でOK */
  pointer-events: none;
  user-select: none;
}
/* =========================
   TOP: NEWS（最新3件）
   ========================= */
.top-news{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* NEWSが載る範囲（top-hero内想定） */
  height: 1477px;
  z-index: 20; /* hero画像より上に出す */
}

/* NEWS 見出し */
.top-news__title{
  position: absolute;
  top: 966px;
  left: 221px;
  width: 127px;
  height: 49px;

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

/* お知らせ */
.top-news__sub{
  position: absolute;
  top: 1015px;
  left: 221px;
  width: 64px;
  height: 22px;

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

/* 線開始位置（top:1037 / left:441 / width:765） */
.top-news .news-list{
  position: absolute;
  top: 1037px;
  left: 441px;
  width: 765px;
}

/* 「線→要素→線…」は border で再現 */
.top-news .news-items{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #C8C8C8;
}

.top-news .news-item{
  height: 72px;
  border-bottom: 1px solid #C8C8C8;
}

.top-news .news-link{
  display: flex;
  align-items: flex-start;
  height: 72px;
  padding-top: 22px; /* 1037→1059 の差分 */
  text-decoration: none;
}

.top-news .news-date{
  width: 158px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 175%;
  letter-spacing: 0.04em; /* 4% */
  color: #686868;
  white-space: nowrap;
}

.top-news .news-title{
  margin-left: 2px;
  width: 494px;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 175%;
  letter-spacing: 0.04em; /* 4% */
  color: #000000;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-news .news-link:hover .news-title{
  text-decoration: underline;
}

/* =========================
   TOP : CREATOR（先頭5人）
   ========================= */

.top-creator{
  position: absolute;
  left: 0;
  width: 100%;
  /* セクション自体は高さ指定なし（中身が絶対配置なのでOK） */
}

.top-creator__title{
  position: absolute;
  top: 1323px;
  left: calc(50% - var(--base-half) + 221px);

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

.top-creator__sub{
  position: absolute;
  top: 1391px;
  left: calc(50% - var(--base-half) + 221px);

  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;
}

/* 5枚を「1400幅内で均等」に配置 */
.top-creator__grid{
  position: absolute;
  top: 1477px;
  left: 0;
  width: 100%;

  display: flex;
  justify-content: space-between;
}

/* トップ用カードサイズ（指定） */
.top-creator__grid .creator-card{
  position: relative;
  width: 261.5px;
  height: 388.75px;
}

/* 写真サイズ（指定）※幅はカードに合わせて100%にして崩れ防止 */
.top-creator__grid .creator-photo{
  width: 100%;
  height: 260.7916px;
  object-fit: cover;
  border-radius: 8.13px; /* creator.htmlと同じ角 */
}

/* 下のテキスト類は「creator.htmlの間隔」を保ったまま下にずらす */
.top-creator__grid .creator-name{ top: 271.54px; }      /* 225 + 46.54 */
.top-creator__grid .creator-username{ top: 297.91px; }  /* 251.37 + 46.54 */
.top-creator__grid .creator-sns{ top: 337.54px; }       /* 291 + 46.54 */
/* top.css の .top-creator にこれを追加 */
.top-creator{
  top: 0;       /* ← これ */
  z-index: 20;  /* ← 念のため（NEWSと同じ前面） */
}
/* =========================
   VIEW MORE button (TOP用)
   ========================= */
.view-more-btn{
  position: absolute;
  width: 140px;
  height: 41px;
  border-radius: 29px;
  border: 0.5px solid #C8C8C8;
  background: transparent;
  text-decoration: none;
  display: block;
  z-index: 5;
  background-color: #fff;
}

.view-more-btn__text{
  position: absolute;
  width: 78px;
  height: 16px;
  top: 13px;
  left: 18px;

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

.view-more-btn__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;
}

.view-more-btn__arrow{
  color: #fff;
  font-family: Alexandria, system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* NEWSの「線（441〜1206）」の右端にボタン右端を揃える */
.view-more-btn--news{
  top: 1079px; /* ここは前のままでOK（必要ならあとでFigma値で直す） */
  left: 221px;
}


.view-more-btn--creator{
  top: 1938px; /* CREATOR(1340)の中央寄せ：1340 + (49-41)/2 */
  left: calc(50% - 70px);
}
/* =========================
   2038px〜2830px 白背景（1400幅中央・上だけ角丸）
   ========================= */
.top-white-slab{
  position: absolute;
  top: 2038px;
  left: 50%;
  transform: translateX(-50%);

  width: min(1400px, 100%);
  height: calc(2830px - 2038px); /* = 792px */

  background: #fff;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;

  /* 角丸の“外側”が見えるように必要なら */
  overflow: hidden;

  /* 他の要素の背面に敷く（必要に応じて微調整） */
  z-index: 1;
}
/* 1400px中央寄せの左端を基準に配置 */
.next-headline{
  position: absolute;
  top: 2141px;

  /* ここが重要：1400の左端(50%-700) + 194px */
  left: calc(50% - 700px + 194px);

  width: 361px;
  height: 124px;

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

  color: #000;
  margin: 0;

  /* 白台座より上に出す（白台座がz-index:1ならこれでOK） */
  z-index: 2;
}
.next-headline__grad{
  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

:root{
  --next-blue-grad: linear-gradient(138.77deg, #00C7FB 2.89%, #807CF8 97.11%);
}

/* 説明文（黒） */
.next-desc{
  position: absolute;
  top: 2155px;
  left: calc(50% - var(--base-half) + 712px);
  width: 494px;
  height: 168px;

  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;

  white-space: pre-line;
  z-index: 2;
}

/* このブロックの VIEW MORE（形は既存のまま） */
.view-more-btn--next{
  top: 2369px;
  left: calc(50% - var(--base-half) + 714px);
}

/* グラデの四角×3 */
.next-grad-card{
  position: absolute;
  top: 2525px;
  width: 327px;
  height: 233px;
  border-radius: 11px;

  background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
  z-index: 2;
}
.next-grad-card--1{ left: calc(50% - var(--base-half) + 176px); }
.next-grad-card--2{ left: calc(50% - var(--base-half) + 537px); }
.next-grad-card--3{ left: calc(50% - var(--base-half) + 898px); }
/* グラデ3カード内の文字（白字） */
.next-card-text{
  position: absolute;
  top: 2553px;

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

  color: #fff;
  margin: 0;

  z-index: 3; /* カード(z=2)より上 */
}

.next-card-text--1{
  left: calc(50% - var(--base-half) + 200px);
  width: 120px;
  height: 84px;
}

.next-card-text--2{
  left: calc(50% - var(--base-half) + 556px);
  width: 121px;
  height: 56px;
}

.next-card-text--3{
  left: calc(50% - var(--base-half) + 917px);
  width: 163px;
  height: 56px;
}
/* =========================
   SP: TOP HERO（390基準・中央寄せ）
   ========================= */

/* SP専用画像はデフォルト非表示（PCで出ないように） */
.top-hero__impact-sp,
.top-hero__mask-sp1,
.top-hero__mask-sp2,
.top-hero__tal-sp,
.top-hero__mes-sp{
  display: none;
}

@media (max-width: 768px){

  /* hero自体の高さ（impact_spに合わせる） */
  .top-hero{
    height: 1262px;
  }

  /* PC用hero画像はSPでは消す */
  .top-hero__impact,
  .top-hero__tal,
  .top-hero__mes,
  .top-hero__mask{
    display: none;
  }

  /* impact_sp（390×1262） */
  .top-hero__impact-sp{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 1262px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  /* top_mask_sp（347×322 / left 43 / top指定なし→0にしておく） */
  .top-hero__mask-sp1{
    display: block;
    position: absolute;
    top: 0;
    left: 43px;
    width: 347px;
    height: 322px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 4;
  }

  /* top_mask_sp2（390×251 / top 627） */
  .top-hero__mask-sp2{
    display: block;
    position: absolute;
    top: 627px;
    left: 0;
    width: 390px;
    height: 251px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 4;
  }

  /* top_tal_sp（410×164 / top 475）※幅が390より大きいので中央寄せ */
  .top-hero__tal-sp{
    display: block;
    position: absolute;
    top: 475px;
    left: 50%;
    transform: translateX(-50%);
    width: 410px;
    height: 164px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 5;
  }

  /* top_mes_sp（370×50 / top 510 / left 15.71） */
  .top-hero__mes-sp{
    display: block;
    position: absolute;
    top: 510px;
    left: 15.71px;
    width: 370px;
    height: 50px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 6;
  }

  /* じぇらーーと（282×282 / top 220 / left 54 / 円形） */
  .top-hero__circle{
    top: 220px;
    left: 54px;
    right: auto;          /* PCのright指定を無効化 */
    width: 282px;
    height: 282px;
    border-radius: 9999px;
    object-fit: cover;
    z-index: 2;
  }
}
/* =========================
   SP: NEWS（390pxレイアウト）
   ========================= */
@media (max-width: 768px){

  /* SPはFVの高さ(1262px)に合わせて、NEWSレイヤーも同じ高さに揃える */
  .top-news{
    height: 1262px;
  }

  .top-news__title{
    width: 101px;
    height: 39px;
    top: 856px;
    left: 34px;

    font-family: Alexandria, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0;
  }

  .top-news__sub{
    width: 56px;
    height: 19px;
    top: 895px;
    left: 34px;

    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    line-height: 138%;
    letter-spacing: 0;
  }

  .top-news .news-list{
    width: 322px;  /* 線の長さもここに揃う */
    top: 955px;
    left: 34px;
  }

  /* 線 → ニュース → 線 … を確実に出す */
  .top-news .news-items{
    border-top: 1px solid #C8C8C8;
  }
  .top-news .news-item{
    height: 72px;
    border-bottom: 1px solid #C8C8C8;
  }

  .top-news .news-link{
    padding-top: 22px; /* 955 → 977 の差分 */
    display: flex;
    align-items: baseline;
  }

  .top-news .news-date{
    width: 78px;
    height: 25px;

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

  .top-news .news-title{
    width: 160px;
    height: 25px;
    margin-left: 25px; /* 34+78 → 137 の差分 */

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

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* NEWS VIEW MORE（SP） */
  .view-more-btn--news{
    top: 1224px;
    left: 125px;
  }
  /* CREATOR 見出し（SP） */
  .top-creator__title{
    top: 1347px;
    left: 34px;
    width: 155px;
    height: 39px;

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

  .top-creator__sub{
    top: 1386px;
    left: 34px;
    width: 112px;
    height: 19px;

    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 138%;
    letter-spacing: 0;
  }
  /* ====== CREATOR carousel（SP） ====== */

  .top-creator__grid{
    position: absolute;
    top: 1455px;
    left: 0;
    width: 390px;
    height: 303px;

    display: flex;
    justify-content: flex-start;
    gap: 21.12px; /* ≒ 224.6 - 203.6 */

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* ここが肝：スナップしたカードのleftが 85.72px になる */
    padding-left: 85.72px;
    padding-right: 100.68px; /* 390 - 85.72 - 203.601 */

    scroll-snap-type: x mandatory;
    scroll-padding-left: 85.72px;
    scroll-padding-right: 100.68px;

    /* スクロールバー非表示 */
    scrollbar-width: none;
  }
  .top-creator__grid::-webkit-scrollbar{ display: none; }

  /* 1人カードのサイズ（指定どおり） */
  .top-creator__grid .creator-card{
    flex: 0 0 203.6010131836px;
    height: 302.9999084473px;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* 端末によって効く：スナップ強め */
  }

  /* 中身はPCと同じ構造のまま、SPカード幅に合わせて調整 */
  .top-creator__grid .creator-photo{
    width: 100%;
    height: 203.6010131836px; /* 正方形で収める */
    object-fit: cover;
    border-radius: 8.13px;
  }

  .top-creator__grid .creator-name{
    top: 212px;
    left: 0;
    width: 100%;
  }

  .top-creator__grid .creator-username{
    top: 233px;
    left: 0;
    width: 100%;
  }

  .top-creator__grid .creator-sns{
    top: 264px;
    left: 0;
  }
}
@media (max-width: 768px){

  /* CREATOR 見出し（指定値） */
  .top-creator__title{
    top: 1347px;
    left: 34px;
    width: 155px;
    height: 39px;

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

  .top-creator__sub{
    top: 1386px;
    left: 34px;
    width: 112px;
    height: 19px;

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

  /* 5人カルーセル（無限ループ前提の横スクロール領域） */
  .top-creator__grid{
    position: absolute;
    top: 1455px;
    left: 0;

    width: 390px;         /* 最大幅390の中央寄せ想定 */
    height: 303px;

    display: flex;
    gap: 21.12px;         /* 85.72 → -139 の差分から逆算 */
    overflow-x: auto;
    overflow-y: hidden;

    padding-left: 85.72px;  /* “中央扱い”カードの左位置 */
    padding-right: 100.68px;/* 390 - 85.72 - 203.601 ≒ 100.68 */

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    /* CSSスナップ（JSでも寄せるけど、保険でON） */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 85.72px;
    scroll-padding-right: 100.68px;

    /* 見た目：スクロールバー非表示 */
    scrollbar-width: none;
  }
  .top-creator__grid::-webkit-scrollbar{ display:none; }

  .top-creator__grid .creator-card{
    flex: 0 0 203.601px;
    width: 203.601px;
    height: 303px;
    scroll-snap-align: start;
  }
  .view-more-btn--creator{
    top: 1821px;
    left: calc(50% - 70px); /* 390幅の中央寄せ＝left 125px相当 */
  }
  .top-white-slab{
    top: 1925px;
    width: min(390px, 100%);
    height: calc(3150px - 1925px);
    border-top-left-radius: 75px;
    border-top-right-radius: 75px;
  }
  :root{
    --below-top: 3150px;
  }
  /* --- 見出し（黒＋「次」だけグラデ） --- */
  .next-headline{
    position: absolute;
    top: 1996px;
    left: 20px;
    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;
    z-index: 2; /* 白台座より上 */
  }

  .next-headline__grad{
    /* ページで使ってるグラデに合わせてここを同じにしてください */
    background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
  }

  /* --- 本文（黒） --- */
  .next-desc{
    position: absolute;
    top: 2080px;
    left: 34px;
    width: 322px;
    height: 175px; /* 指定。自動で伸ばしたいなら消してOK */

    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;
    z-index: 2;

    white-space: pre-line; /* 改行を効かせたい場合 */
  }

  /* --- NEXTのボタン（形：既存のview moreのまま） --- */
  .view-more-btn--next{
    width: 140px;
    height: 41px;
    border-radius: 29px;

    /* 位置指定がまだ無いので “本文の下で中央” に仮置き
       後でtop/leftが来たらここだけ差し替えればOK */
    position: absolute;
    top: 2310px;            /* 1996/2110の流れから自然な位置に仮置き */
    left: calc(50% - 70px); /* 390中央基準＝left:125相当 */

    z-index: 2;
  }
}
@media (max-width: 768px){

  /* ===== グラデ四角（SP） ===== */
  .next-grad-card{
    position: absolute;
    width: 322px;
    height: 206px;
    left: 34px;
    border-radius: 10.83px;

    /* 既に変数があるならそれを使用、なければこのままでもOK */
    background: linear-gradient(138.77deg, #D585FA 2.89%, #7694FF 97.11%);

    z-index: 2; /* 白台座の上 */
  }

  .next-grad-card--1{ top: 2456px; }
  .next-grad-card--2{ top: 2676px; }
  .next-grad-card--3{ top: 2896px; }

  /* ===== 四角の上の文字（SP） ===== */
  .next-card-text{
    position: absolute;
    left: 57.63px;

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

    color: #fff;
    margin: 0;
    z-index: 3; /* 四角より上 */
    white-space: pre-line; /* 改行を効かせる */
  }

  .next-card-text--1{
    top: 2475px;
    width: 144px;
    height: 99px;
  }

  .next-card-text--2{
    top: 2695px;
    width: 145px;
    height: 66px;
  }

  .next-card-text--3{
    top: 2915px;
    width: 196px;
    height: 66px;
  }
}
/* PC: wit.png / wit2.png（白領域の左右にぴったり配置） */
.top-white-slab .wit-image{
  position: absolute;
  top: 392px; /* 2430px - 2038px */
  
  height: 158px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.top-white-slab .wit-image--left{ left: 0; width: 795px;}
.top-white-slab .wit-image--right{ right: 0; width: 534px;}
@media (max-width: 768px){
  .top-white-slab .wit-image{ display: none; }
}
/* デフォルトは非表示（PCで出ないように） */
.wit-image--sp{ display: none; }

@media (max-width: 768px){
  .top-white-slab .wit-image--sp{
    display:block;
    position:absolute;
    top: 434px;   /* 2359 - 1925 */
    left: 50%;
    transform: translateX(-50%);
    width: 390px;
    height: 158px;
    object-fit: contain;
    z-index: 2;
  }
}

/* =========================
   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;
  }
}