/* =========================================================
   hero.css : Hero（A×B ハイブリッド 3D）/ Manifesto
   ========================================================= */

.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:140px var(--gut) 110px;overflow:hidden;
  /* 左右で釣り合う淡いアンビエントグロー（雰囲気の均衡） */
  background:
    radial-gradient(640px 520px at 14% 72%, color-mix(in srgb,var(--mint) 9%, transparent), transparent 62%),
    radial-gradient(760px 600px at 88% 26%, color-mix(in srgb,var(--blue) 9%, transparent), transparent 62%),
    var(--paper);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}

.hero__content{position:relative;z-index:2;max-width:620px;pointer-events:none;}
.hero__content a,.hero__content [data-magnetic]{pointer-events:auto;}

.hero__badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--en);font-size:.8rem;letter-spacing:.04em;
  padding:8px 15px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(6px);
  color:var(--ink-soft);margin-bottom:26px;}
.hero__badge i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);
  animation:heroPulse 2.4s ease-in-out infinite;}
@keyframes heroPulse{0%,100%{opacity:.4;transform:scale(.8);}50%{opacity:1;transform:scale(1);}}

.hero__title{font-size:clamp(3rem,9.5vw,7.4rem);font-weight:900;line-height:1.02;letter-spacing:.004em;margin-bottom:30px;}
/* ミニマル・ヒーロー：余白を広げてインパクト重視 */
.hero__content--minimal{max-width:760px;}
.hero__content--minimal .hero__lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);margin-bottom:36px;}
.hero__title .line{display:block;}
.hero__title em{background:linear-gradient(110deg,var(--mint),var(--blue),var(--lav));-webkit-background-clip:text;background-clip:text;color:transparent;}

.hero__lead{max-width:540px;color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.9;margin-bottom:40px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;}

/* パネルにホバー時の英語ラベル（3D座標を画面に投影して追従） */
/* フォーカスしたパネルに寄り添う“情報カード”。暗いスクリムで白パネルでも必ず読める。
   中身（画像・英語タイトル・連番・特徴チップ・ヒント）が時間差で浮かび上がる。 */
.hero-tag{position:absolute;left:0;top:0;z-index:3;pointer-events:none;text-align:left;
  width:max-content;max-width:min(330px,80vw);
  transform:translate(-50%,calc(-100% - 22px)) scale(.96);opacity:0;
  transition:opacity .35s var(--ease),transform .45s var(--ease);white-space:normal;
  background:linear-gradient(158deg,color-mix(in srgb,#05070d 88%,transparent),color-mix(in srgb,#05070d 64%,transparent));
  border:1px solid color-mix(in srgb,var(--mint) 26%,transparent);border-radius:17px;
  padding:18px 20px 19px;backdrop-filter:blur(13px);box-shadow:0 28px 70px rgba(0,0,0,.58);}
.hero-tag.is-show{opacity:1;transform:translate(-50%,calc(-100% - 28px)) scale(1);}
/* 上に余白が無い時は下に出す（見切れ防止） */
.hero-tag.is-below{transform:translate(-50%,20px) scale(.96);}
.hero-tag.is-below.is-show{transform:translate(-50%,28px) scale(1);}
/* コア（AIコア）ホバー時は画像・チップを隠してラベルのみ */
/* 中央(N)ホバー：黒いボックスを消して“文字だけ浮かぶ”おしゃれな表示に */
.hero-tag.is-core{max-width:none;background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;text-align:center;}
.hero-tag.is-core .hero-tag__chips,.hero-tag.is-core .hero-tag__thumb,.hero-tag.is-core .hint,.hero-tag.is-core .hero-tag__idx{display:none;}
.hero-tag.is-core .en{justify-content:center;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:.3em;color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.85), 0 0 26px color-mix(in srgb,var(--mint) 55%,transparent);}
.hero-tag.is-core .jp{display:inline-block;margin-top:14px;font-family:var(--en);font-size:.74rem;letter-spacing:.26em;
  text-transform:uppercase;color:color-mix(in srgb,var(--mint) 85%,#fff);
  padding:7px 16px;border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);border-radius:999px;
  text-shadow:0 2px 14px rgba(0,0,0,.8);}

.hero-tag__idx{position:absolute;top:11px;right:15px;font-family:var(--en);font-weight:700;font-size:1.05rem;
  letter-spacing:.06em;color:color-mix(in srgb,var(--mint) 70%,transparent);}
.hero-tag__thumb{display:block;width:100%;height:96px;object-fit:cover;object-position:center top;
  border-radius:9px;border:1px solid rgba(255,255,255,.14);margin-bottom:13px;background:#0b0e15;}
.hero-tag .en{display:inline-flex;align-items:center;gap:8px;font-family:var(--en);font-weight:700;
  font-size:1.12rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;}
.hero-tag .en::before{content:"";width:22px;height:1px;background:var(--mint);}
.hero-tag .jp{display:block;font-size:.8rem;letter-spacing:.08em;color:rgba(255,255,255,.72);margin-top:6px;}
.hero-tag .note{display:block;font-family:var(--en);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-top:11px;}
.hero-tag__chips{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0;list-style:none;}
.hero-tag__chips li{font-size:.7rem;color:rgba(255,255,255,.88);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.hero-tag .hint{display:block;font-family:var(--en);font-size:.64rem;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-top:12px;}
.hero-tag .hint::before{content:"";display:inline-block;width:14px;height:1px;background:rgba(255,255,255,.4);vertical-align:middle;margin-right:7px;}

/* 時間差リビール（is-show で順に浮かび上がる） */
.hero-tag__thumb,.hero-tag .en,.hero-tag .jp,.hero-tag .note,.hero-tag__chips li,.hero-tag .hint{
  opacity:0;transform:translateY(9px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.hero-tag.is-show .hero-tag__thumb{opacity:1;transform:none;transition-delay:.04s;}
.hero-tag.is-show .en{opacity:1;transform:none;transition-delay:.10s;}
.hero-tag.is-show .jp{opacity:1;transform:none;transition-delay:.16s;}
.hero-tag.is-show .note{opacity:1;transform:none;transition-delay:.22s;}
.hero-tag.is-show .hero-tag__chips li:nth-child(1){opacity:1;transform:none;transition-delay:.28s;}
.hero-tag.is-show .hero-tag__chips li:nth-child(2){opacity:1;transform:none;transition-delay:.34s;}
.hero-tag.is-show .hero-tag__chips li:nth-child(3){opacity:1;transform:none;transition-delay:.40s;}
.hero-tag.is-show .hint{opacity:1;transform:none;transition-delay:.46s;}

.hero__meta{position:absolute;left:var(--gut);right:var(--gut);bottom:34px;z-index:2;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--en);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 62%,transparent);}
.hero__scroll{display:inline-flex;align-items:center;gap:12px;}
.hero__scroll i{display:inline-block;width:38px;height:1px;background:linear-gradient(90deg,var(--mint),transparent);animation:scrollSlide 2s ease-in-out infinite;}
@keyframes scrollSlide{0%,100%{transform:scaleX(.3);opacity:.4;transform-origin:left;}50%{transform:scaleX(1);opacity:1;transform-origin:left;}}

/* =========================================================
   Hero v2：全画面3Dオブジェクトが主役。文字は最小・中央寄せ
   ========================================================= */
.hero--v2{text-align:left;min-height:92svh;}
/* キーアート構図：オブジェクトは中央のまま。コピーは重ねず“左下のキャームゾーン”へアンカー＝可読性確保 */
.hero__content--center{
  position:absolute;left:var(--gut);bottom:clamp(92px,15vh,150px);z-index:2;
  max-width:min(500px,82vw);margin:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
/* 下からのフロア・グラデ＝可読性＋ステージ感／淡いビネット＝奥行き（オブジェクトより手前・文字より奥） */
.hero--v2::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb,var(--paper) 92%,transparent), color-mix(in srgb,var(--paper) 34%,transparent) 22%, transparent 44%);}
.hero--v2::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(135% 105% at 50% 36%, transparent 50%, color-mix(in srgb,var(--paper) 50%, #000 10%) 100%);}
/* ブランド名（小さく上品に） */
.hero__brandline{
  font-family:var(--en);font-weight:600;font-size:clamp(.8rem,1.3vw,.95rem);
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:22px;padding-left:.42em; /* letter-spacingの右寄り補正 */
}
/* 英語キャッチコピー（主役の文字。背後の3Dを邪魔しない細めのウェイト） */
.hero__display{
  font-family:var(--en);font-weight:500;line-height:1.0;letter-spacing:-.01em;
  font-size:clamp(2.8rem,8.4vw,6.6rem);margin-bottom:40px;
  text-shadow:0 2px 40px color-mix(in srgb,var(--paper) 70%, transparent);
}
.hero__display .line{display:block;}
.hero__display em{font-style:italic;font-weight:400;
  background:linear-gradient(110deg,var(--mint),var(--blue),var(--lav));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
/* 上中央：会社名（ブランド）＝大きく特徴的に。Nosは差し色グラデ。タグライン帯はこの下。 */
.hero__topbrand{position:absolute;top:clamp(24px,4vh,46px);left:0;right:0;z-index:2;text-align:center;pointer-events:none;
  font-family:var(--en);font-weight:500;font-size:clamp(1.25rem,2.7vw,2.05rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink);padding-left:.3em;}
.hero__topbrand b{font-weight:700;background:linear-gradient(110deg,var(--mint),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;}
/* 下部中央：対応業種の一行（余白を埋め、誰向けかを伝える） */
.hero__serves{position:absolute;left:0;right:0;bottom:clamp(150px,23vh,228px);z-index:1;text-align:center;pointer-events:none;
  font-size:clamp(.78rem,1.4vw,.95rem);letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 62%,transparent);padding:0 var(--gut);}
.hero__serves b{color:var(--ink-soft);font-weight:600;}
/* 左下：大きな一文（差し色強調）＋CTA。語の途中で折れないよう em は nowrap。 */
.hero__statement{font-size:clamp(1.4rem,3vw,2.3rem);font-weight:800;line-height:1.5;letter-spacing:.01em;
  color:var(--ink);margin:0 0 30px;max-width:14em;text-shadow:0 2px 30px color-mix(in srgb,var(--paper) 82%,transparent);}
.hero__statement em{display:inline-block;white-space:nowrap;font-style:normal;font-weight:800;
  background:linear-gradient(110deg,var(--mint),var(--blue),var(--lav));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero__statement span{display:block;margin-top:8px;font-size:.8em;font-weight:600;color:color-mix(in srgb,var(--ink) 86%,transparent);}

/* 左下のロックアップ：社名ワードマーク＋一言＋CTA。発光オブジェクト上でも読めるよう微シャドウ。 */
.hero__wordmark{font-family:var(--en);font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0 0 14px;
  text-shadow:0 2px 30px color-mix(in srgb,var(--paper) 82%,transparent);}
.hero__wordmark b{font-weight:700;}
.hero__sub{font-size:clamp(.95rem,1.4vw,1.12rem);line-height:1.8;color:var(--ink-soft);margin:0 0 26px;max-width:32ch;
  text-shadow:0 1px 18px color-mix(in srgb,var(--paper) 72%,transparent);}
.hero__sub b{color:var(--ink);font-weight:600;}
.hero--v2 .hero__actions{justify-content:flex-start;}
/* 価値チップ：CTAの下に「お求めやすさ・速さ・柔軟さ」を一目で */
.hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none;}
.hero__chips li{display:inline-flex;align-items:baseline;gap:6px;font-size:.78rem;color:var(--ink-soft);
  padding:7px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);}
.hero__chips li b{font-family:var(--en);font-weight:700;font-size:.88rem;color:var(--ink);
  background:linear-gradient(110deg,var(--mint),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;}
/* 下部：左にコピー／右にScrollだけ（要素同士をぶつけない） */
.hero--v2 .hero__meta{justify-content:flex-end;z-index:2;}
.hero--v2 .hero__meta > span:not(.hero__scroll){display:none;}

/* 案の切替トグル（比較用・控えめ。確定後は削除可） */
.ver-toggle{
  position:fixed;left:var(--gut);top:18px;z-index:60;
  display:inline-flex;align-items:center;font-family:var(--en);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  padding:8px 14px;border-radius:999px;background:var(--glass);
  border:1px solid var(--line);backdrop-filter:blur(8px);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.ver-toggle:hover{color:var(--ink);border-color:color-mix(in srgb,var(--mint) 50%,var(--line));transform:translateX(-2px);}

/* ---- Manifesto（理念のキャッチコピー） ---- */
.manifesto{text-align:center;}
.manifesto__eyebrow{font-family:var(--en);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin-bottom:28px;}
.manifesto__text{max-width:960px;margin:0 auto;font-size:clamp(1.7rem,4vw,3rem);font-weight:700;line-height:1.5;letter-spacing:.01em;color:var(--ink);}
.manifesto__text em{background:linear-gradient(110deg,var(--mint),var(--lav));-webkit-background-clip:text;background-clip:text;color:transparent;}
.manifesto__sub{max-width:600px;margin:32px auto 0;font-size:clamp(.98rem,1.4vw,1.1rem);line-height:1.9;color:var(--ink-soft);}

@media(max-width:720px){
  .hero{padding-top:120px;}
  /* サービスページのヒーロー：上=3Dパネル（フル輝度）/ 下=コピーの2ゾーン */
  .hero:not(.hero--v2){align-items:flex-end;padding:96px 20px 92px;}
  .hero:not(.hero--v2)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top, var(--paper) 4%, color-mix(in srgb,var(--paper) 82%,transparent) 30%, transparent 56%);}
  .hero:not(.hero--v2) .hero__content{position:relative;z-index:2;}
  .hero:not(.hero--v2) .hero__badge{margin-bottom:16px;}
  .hero:not(.hero--v2) .hero__title{margin-bottom:16px;}
  .hero:not(.hero--v2) .hero__lead{margin-bottom:24px;}
  /* サービスページの見出し：語中で折れないサイズに（8〜9文字が1行に収まる） */
  .hero__title{font-size:clamp(2rem,9.2vw,2.5rem);line-height:1.28;}
  /* リード文：背後のパネルから浮かせる薄い影 */
  .hero__lead{text-shadow:0 1px 14px color-mix(in srgb,var(--paper) 85%,transparent),0 0 26px color-mix(in srgb,var(--paper) 70%,transparent);}
  .hero__meta{font-size:.66rem;}
  /* スマホ：社名はヘッダーと二重になるため非表示。3Dは上半分・文字は下半分に分離 */
  .hero__topbrand,.hero-topline{display:none;}
  .hero__serves{display:none;}
  /* 下半分の文字ゾーンを守るフロア・グラデを強める */
  .hero--v2::after{background:linear-gradient(to top, var(--paper), color-mix(in srgb,var(--paper) 78%,transparent) 34%, transparent 58%);}
  .hero--v2 .hero__content--center{bottom:clamp(70px,12vh,108px);max-width:90vw;}
  .hero__statement{font-size:clamp(1.3rem,6.2vw,1.8rem);line-height:1.45;max-width:none;margin-bottom:22px;}
  .hero__actions .btn{padding:14px 22px;}
  .hero__chips{gap:6px;margin-top:14px;}
  .hero__chips li{padding:6px 12px;font-size:.76rem;}
  .hero__chips li b{font-size:.8rem;}
}