html, body {
  margin: 0 auto; 
  padding: 0;
  overflow-x: hidden;
  max-width: 1400px;
  width: 100%;
  scroll-behavior: smooth;
  background-color: #111;
}

:root{
  --blue:#1D2A52;
  --gold:#E8B500;
  --ink:#111;
  --card:#141820;
  --text:#cfd5e1;
  --muted:#8491a5b3;
  --accent:#ff5c5c;
  --ring1:#4b7bff;
  --ring2:#1dcad3;
  --ring3:#ff9a3e;
}

body {
  font-family: 'Noto Sans SC', 'Source Han Sans CN', sans-serif;
  position: relative;
  margin-top: var(--header-h);
}

main.main_width{
    padding:  0;
    margin-left:0!important;
    margin-right:0!important;
}

.container-fluid.main_width {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

img {
    width: 100%;
    vertical-align: bottom;
}

a {
    text-decoration: none;
}
a:hover{
  opacity: .92;                 
  transition: opacity .2s ease; 
}

.note {
    font-size: 0.65rem;
    vertical-align: middle;
    line-height: 1;  
}
.note2 {
    font-size: 0.8rem;
    vertical-align: middle;
    line-height: 1;     
    letter-spacing: 0.1em;   
}

ul, ol {
  list-style: none;
  padding-left: 0; 
  margin: 0;
}

/* ===========================
   btn
=========================== */
/* FV を基準として絶対配置 */
/* #sec_1{
  margin-top: 6.5%;
} */
#sec_1, #sec_9 {
  position: relative;
  width: 100%;
}

/* ボタン位置 & 大きさを比率化 */
#sec_1 .contact {
  position: absolute;

  /* FV画像に対しての比率で位置を指定（% = 画像に対しての相対位置） */
  left: 58%;        /* 中央寄せ */
  bottom: 23%;      /* ← ★ ここを調整するとFV内の比率位置が変えられる */

  transform: translateX(-50%);
  
  /* 画面幅に合わせてスケールする（比率フォントサイズと同じ） */
  width: 28vw;       /* ← ボタン大きさは画面幅の割合で */
  max-width: 30%;  /* 大きい画面での最大 */
}

#sec_9 .contact {
  position: absolute;
  width: 28vw;
  max-width: 35%;
  transform: translateX(-50%);
  bottom: 23%;  
  left: 50%;  
}
.contact:hover {
  position: relative;
  transition: all 0.35s ease;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
}


/* ===========================
   HEADER
=========================== */
:root{
  --header-h: 64px;
  /* --bg: #0b0b0b; */
  --fg: #ffffff;
  --muted: #bfc6d1;
  --cta: #ec0d3e;           /* 赤（好みで） */
  --cta-shadow: rgba(236,13,62,.35);
}

/* 位置・ベース */
.site-header{
  position: fixed;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--bg);
  color: var(--fg);
  background-color: #0b0b0b;
  width: 100%;
}

/* 内側レイアウト */
.site-header__inner{
  height: 100%;
  max-width: min(1180px, 94vw);
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ロゴ */
.site-logo{ display:inline-flex; align-items:center; gap:10px; }
.site-logo img{
   display: block;
    height: auto;
    width: auto;
    max-width: 120px;
  }

/* ナビ（PC） */
.primary-nav{ display:block; }
.primary-nav__list{
  display:flex;
  align-items:center;
  gap: clamp(16px, 4vw, 36px);
  margin:0; padding:0; list-style:none;
}
.primary-nav__link{
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing:.02em;
  transition: opacity .2s ease, transform .2s ease;
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible{ opacity:.8; }

/* Contact（赤い丸ボタン風） */
.primary-nav__link--cta{
  background: var(--cta);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 18px var(--cta-shadow);
}
.primary-nav__link--cta:hover{ transform: translateY(-1px); opacity: .95; }
.primary-nav__link--cta:active{ transform: translateY(0); }

/* モバイル・タブレット */
.nav-toggle{
  display:none;
  width:42px; height:42px;
  border:0; background:transparent; color:var(--fg);
  align-items:center; justify-content:center; gap:5px;
}
.nav-toggle__bar{
  display:block; width:22px; height:2px; background:var(--fg);
}

/* トグルボタン（SPのみ表示） */
/* SPのトグルボタン（赤丸） */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;    /* ★縦方向に積む */
  justify-content: center;
  align-items: center;
  gap: 5px;                  /* ★線と線の間隔 */
  width: 46px;
  height: 46px;
  background: #ec0d3e;       /* 赤丸 */
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 2000;
}

/* 横棒3本 */
.nav-toggle__bar {
  width: 70%;                /* 棒の長さ */
  height: 3px;               /* 棒の太さ */
  background: #fff;          /* 白い棒 */
  display: block;
  border-radius: 2px;
}

/* PCでは非表示 */
@media (min-width: 881px) {
  .nav-toggle {
    display: none;
  }
}

@media (max-width: 880px){
  .nav-toggle{ display:inline-flex; }
  .primary-nav{
    position: fixed;
    inset: var(--header-h) 0 auto 0;         /* ヘッダーの下から */
    background: rgba(11,11,11,.96);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .primary-nav.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .primary-nav__list{
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 18px 22px;
  }
  .primary-nav__link{ font-size: 15px; }
  .primary-nav__link--cta{ align-self: stretch; text-align:center; }
}

/* アクセシビリティ */
.primary-nav__link:focus-visible,
.nav-toggle:focus-visible,
.site-logo:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}



/* ===========================
   Graph iframe
=========================== */

.graph-frame {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

/* タブレット */
@media (max-width: 768px) {
  .graph-frame {
    height: 480px;
  }
}

/* スマホ */
@media (max-width: 480px) {
  .graph-frame {
    height: 420px;
  }
}
/* SP 〜 600px以下 の時は vertical stack */
@media (max-width: 600px) {
  #sec_3,
  #sec_5 {
    display: flex;
    flex-direction: column;   /* ← 縦並びに */
    align-items: center;
    gap: 20px;
  }

  #sec_3 iframe,
  #sec_5 iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;      /* SPでも綺麗に */
  }

  #sec_3 img,
  #sec_5 img {
    width: 100%;
    height: auto;
  }
}
/* 🔥 スマホ時（iframe が縦並びになった時）の高さ調整 */
@media (max-width: 768px) {
  iframe.graph-frame {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
  }
}
@media (max-width: 480px) {
  iframe.graph-frame {
    height: auto;
  }
}

/* ===========================
   sec_1
=========================== */
/* sec_1のボタン画像に残っている中央寄せabsoluteを無効化 */
#sec_1.FV--split .contact{
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(70vw, 360px);   /* お好みで */
  max-width: none !important;
  height: auto;
  display: block;
}
#sec_1.FV--split .fv-content{
  text-align: left;
}

#sec_1.FV--split .contact-link{
  display: block;
  width: max-content;
  margin: 18px 0 0;
}



.FV--split{
  position: relative;
  overflow: hidden;
  min-height: 640px;
  height: min(72vh, 720px);
}

/* 背景動画 */
.FV--split .fv-bg{
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
}
.FV--split .fv-bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.FV--split .fv-bg .sp{ display:none; }
@media (max-width: 768px){
  .FV--split .fv-bg .pc{ display:none; }
  .FV--split .fv-bg .sp{ display:block; }
}

/* 白いベール（スクショの雰囲気） */
.FV--split .fv-veil{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* ←ここで暗さ調整 */
  z-index: 1;                 /* ←videoより上 */
  pointer-events: none;
}

/* 中身：左右2カラム */
.FV--split .fv-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  column-gap: 56px;
  align-items: center;
}

/* 左：9:16縦型動画枠 */
.FV--split .fv-vertical{
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  border-radius: 48px;
  background: #0b0b0f;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
  position: relative;
}

/* ノッチっぽい装飾（不要なら削除OK） */
.FV--split .fv-vertical::before{
  content:"";
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 42px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  background: #0b0b0f;
  z-index: 3;
}

.FV--split .fv-vertical video{
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: cover;
  border-radius: 36px;
}

/* 右：テキスト */
.FV--split .fv-content{
  min-width: 0;
  text-align: left;
}

/* 見出し（黒帯ぬるっと） */
.FV--split .fv-title{
  font-size: clamp(20px, 3.1vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

.FV--split .fv-line{
  position: relative;
  display: inline-block;
  padding: 14px 22px;
  margin: 10px 0;

  opacity: 0;
  transform: translateX(-12px) skewX(6deg); /* ←逆方向 */
  animation: fvTextIn .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--delay, 0ms);
}

.FV--split .fv-line > *{
  display: inline-block;
  transform: skewX(-6deg); /* ←さらに中身だけ戻す */
}


.FV--split .fv-line::before{
  content:"";
  position:absolute;
  inset:0;
  background:#000;

  transform-origin: left center;
  transform: scaleX(0) skewX(-6deg);

  animation: fvBarIn .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--delay, 0ms);

  z-index:-1;
}


@keyframes fvBarIn{
  to{
    transform: scaleX(1) skewX(-6deg);
  }
}

@keyframes fvTextIn{
  0%{
    opacity:0;
    transform: translateX(-12px) skewX(6deg);
  }
  40%{
    opacity:0;
  }
  100%{
    opacity:1;
    transform: translateX(0) skewX(6deg);
  }
}


/* CTA（既存 btn.png をそのまま） */
.FV--split .contact-link{
  display: block;
  width: max-content;
  margin: 18px 0 0; 
}

/* SP：縦型→上、テキスト→下 */
@media (max-width: 900px){
  .FV--split{
    height: auto;
    min-height: 0;
    padding-bottom: 24px;
  }
  .FV--split .fv-inner{
    grid-template-columns: 1fr;
    row-gap: 22px;
    justify-items: center;
    padding: 24px 16px;
  }
  .FV--split .fv-vertical{
    max-width: 340px;
  }
  .FV--split .fv-content{
    width: min(92vw, 520px);
  }
   #sec_1.FV--split .fv-content{
    justify-self: stretch; /* 中央配置の影響を外す */
  }
  #sec_1.FV--split .contact-link{
    justify-self: start;   /* 念のため */
  }
  #sec_1.FV--split .fv-content{
    display: none;
  }

  #sec_1.FV--split .fv-overlaySp{
    display: block;
  }
}



/* TikTok風 グラデ文字 */
.grad {
  background: linear-gradient(
    90deg,
    #35f0ff 0%,
    #5cc8ff 25%,
    #c77dff 55%,
    #ff4bd8 85%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
/* SP：sec_1（FV--split内）だけは、ボタンを「テキストの下」に戻す */
@media (max-width: 768px){

  /* ← これが最重要：SPで付いてる absolute をFV--split内だけ殺す */
  #sec_1.FV--split .fv-contentSp .contact-link{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block;
    width: max-content;
    margin: 14px auto 0;        /* 「次世代〜」の下に余白 */
  }

  #sec_1.FV--split .fv-contentSp .contact{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block;
    width: min(78vw, 360px);
    max-width: none !important;
    height: auto;
  }

  /* もし fv-overlaySp を使ってないなら、念のため消す */
  #sec_1.FV--split .fv-overlaySp{
    display: none !important;
  }
  h1.fv-title {
    display: unset;
    text-align: center;
    margin: 0 auto;
  }
  

}

/* ===========================
   SP：左寄せの塊を「画面中央」に固定（確実版）
=========================== */
@media (max-width: 900px){

  /* SPでは右カラム（PC用）と overlay は使わない */
  #sec_1.FV--split .fv-content{ display:none !important; }
  #sec_1.FV--split .fv-overlaySp{ display:none !important; }

  #sec_1.FV--split .fv-copy .contact{
    position: static !important;
    transform: none !important;
    display: block;
    width: min(78vw, 360px);
    max-width: none !important;
    height: auto;
  }
}

.problem-div {
  padding: var(--padding);
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: border-box;
}



/* ===========================
   sec_3
=========================== */
#sec_3 {
  background: url(../images/sec3_bg.png) center top / cover no-repeat;
  color: #fff;
  position: relative;
}
#sec_3 img {
  width: 100%;
  /* display: block; */
}

#sec_3 iframe {
  width: 100%;
  display: block;
}

#sec_3 .graph_text {
  /* position: absolute; */
  z-index: 5;
  width: 100%;
  color: #fff;

    margin-left: clamp(8%, 14vw, 14%);
    margin-top: clamp(-30%, -6vw, -6%);
    padding-bottom: clamp(5%, 10vw, 10%);
}
#sec_3 .graph_text h4 {
  font-size: clamp(
    14px, 
    calc(14px + (18 - 14) * ((100vw - 420px) / (1400 - 420))),
    18px
  );
}
#sec_3 .graph_text p {
  font-size: clamp(
    10px,
    calc(10px + (16 - 10) * ((100vw - 420px) / (1400 - 420))),
    16px
  );
}


/* ===========================
   sec_5
=========================== */
#sec_5 {
  position: relative;
  background: url(../images/sec5_bg.png) center top / cover no-repeat;

  max-width: 1400px;   /* ← ここを追加：1400px の世界を作る */
  margin: 0 auto;      /* ← 中央寄せ */
  color: #fff;
  transform: scale(calc(100vw / 1400));
  transform-origin: top left;
  width: 100%;
  height: auto;
}

#sec_5 img {
  width: 100%;
  /* display: block; */
}

#sec_5 iframe {
  width: 100%;
  display: block;
}

#sec_5 .graph_text {
  /* position: absolute; */
  z-index: 5;
  width: 100%;
  color: #fff;

    margin-left: clamp(8%, 14vw, 14%);
    margin-top: clamp(-30%, -6vw, -6%);
    padding-bottom: clamp(5%, 10vw, 10%);
}
#sec_5 .graph_text h4 {
  font-size: clamp(
    14px, 
    calc(14px + (18 - 14) * ((100vw - 420px) / (1400 - 420))),
    18px
  );
}
#sec_5 .graph_text p {
  font-size: clamp(
    10px,
    calc(10px + (16 - 10) * ((100vw - 420px) / (1400 - 420))),
    16px
  );
}


/* ===========================
   footer
=========================== */
.lp-footer {
  background: #000;
  color: #fff;
  padding: 60px 20px 40px;
  font-family: "Inter", "Noto Sans JP", sans-serif;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 左上エリア --- */
.footer-main {
  margin-bottom: 80px;
}

.footer-logo {
  width: 160px;
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 16px;
  margin-bottom: 20px;
}

.footer-link {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-link img {
  width: 18px;
}

/* --- 下部中央ナビ --- */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0 auto 30px;
  display: flex;
  gap: 30px;
  justify-content: center;
}

.footer-nav a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.footer-nav a:hover {
  opacity: 1;
}

/* --- コピーライト --- */
.footer-copy {
  display: block;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
}

/* --- SP レスポンシブ --- */
@media (max-width: 480px) {

  .footer-main {
    margin-bottom: 50px;
  }

  .footer-tagline,
  .footer-link {
    font-size: 14px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 12px;
  }

  .footer-nav a {
    font-size: 13px;
  }

  .footer-copy {
    font-size: 12px;
  }
}

/* ===========================
   responsive sp
=========================== */
.sp{
  display: none;
}
/* --- SP レスポンシブ --- */
@media (max-width: 768px) {

  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  #sec_1 .contact {
    position: static;
  transform: none;
  width: 28vw;
  max-width: 30%;
  height: auto;
  display: block;
}
#sec_1 .contact-link{
  position: absolute;
  left: 6vw;     /* ← 好みで調整（例） */
  bottom: 23%;
  transform: none;
  display: block;
  width: max-content;
}
#sec_9 .contact {
    position: absolute;
    width: 66vw;
    max-width: 90%;
    transform: translateX(-50%);
    bottom: 23%;
    left: 50%;
}
}
/* --- SP sec8 --- */
#sec_8{
  position: relative;
}
.sp_sec8_3{
  position: relative;
}
.sp_sec8_3wrap {
    position: absolute;
    bottom: 13%;
    left: 15%;
    width: 71%;
    overflow: hidden;
}
.sp_sec8_3box {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.sp_sec8_3box img {
    display: inline-block;
    width: 131vw;
    max-width: none;
}

/* ===========================
   SP：黒帯2行（fv-line）を“画面中央に配置された左寄せ塊”にする
=========================== */
@media (max-width: 900px){

  /* 親（舞台）：中央寄せ */
  #sec_1.FV--split .fv-contentSp{
    width: 100% !important;
    text-align: center !important; /* inline-block を中央へ */
  }

  /* 子（塊）：左寄せ */
  #sec_1.FV--split .fv-copy{
    display: inline-block !important;
    text-align: left !important;
    max-width: 92vw;
  }

  /* ★ここが肝：黒帯（fv-line）自体を中央に寄せる */
  #sec_1.FV--split .fv-copy .fv-line{
    display: block !important;      /* 行をブロック化 */
    width: fit-content;             /* 中身幅 */
    max-width: 92vw;
    margin: 10px auto !important;   /* ← 左右autoで中央へ */
  }

  /* ついでに：h1の余計な中央寄せが残ってもOK */
  #sec_1.FV--split .fv-copy .fv-title{
    margin: 0;
  }
}