:root{
    --brand:#0a0f14; 
    --fg:#fff; 
    --bg:#0d1116; 
    --grid-max:1200px;
    --title-font:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  }

  html,body{
    height:100%;margin:0;background:var(--bg);color:var(--fg);
    font-family:var(--title-font);
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  /* ========== HERO ========== */
  .hero{
    position:relative;height:100svh;overflow:hidden;background:var(--brand);
  }

	.hero {
		position: relative;
		width: 100%;
		height: 96vh;          /* ← ここを調整（50vh, 55vh など） */
		overflow: hidden;      /* ← はみ出た上下を隠す */
	}
	
	.hero video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;     /* ← 縦横比を保ったまま全面表示 */
	}
	


	/* ヒーローの子として波を重ねる */
.hero > .wave-sep{
  position:absolute;
  left:0; right:0; bottom:-1px;   /* 境界のスキマ消しで -1px */
  height:120px;                   /* 波の高さ（好みで） */
  z-index:2;                      /* 動画より前、タイトルより後ろでもOK */
  pointer-events:none;
}
.wave-sep svg{display:block;width:100%;height:100%}

@media (max-width: 768px) {
  .hero {
    height: 600px;
	}
}

  /* ========== TITLE（地平線マスク＋ランダム出現） ========== */
  .title{
    position:absolute;inset:0;
    display:grid;place-items:center;text-align:center;
    z-index:4;
    /* 中央の水平線から開く */
    clip-path: inset(50% 0 50% 0);
  }
  /* 地平線マスクを開く */
  .start .title{
    animation:horizonOpen .8s ease-out .25s forwards;
  }
  @keyframes horizonOpen{
    to{clip-path: inset(0 0 0 0)}
  }

  /* でっかいタイトル */
  .fx-horizon{
    margin:0;
    font-weight:900;
    font-size:clamp(46px, 16vw, 200px);
    letter-spacing:.02em;
    line-height:1;
    white-space:nowrap;
  }

  /* 文字1文字ずつ */
  .fx-horizon .ch{
    display:inline-block;
    opacity:0;
    transform:translateY(12px);
    animation:chIn 0.8s cubic-bezier(.2,.8,.2,1) forwards;
  }
  /* 文字アニメ（出現） */
  @keyframes chIn{
    to{opacity:1;transform:translateY(0)}
  }

  /* 文字全部出てから → 1秒待って → 上昇で消える */
  .start .fx-horizon{
    animation:titleUp 1s cubic-bezier(.2,.8,.2,1) 1.6s forwards;
  }
  /* 上昇アニメ */
  @keyframes titleUp{
    to{transform:translateY(-52svh);opacity:0;visibility: hidden;}
  }

  /* ========== 幕（カーテン） ========== */
  .curtain{
    position:absolute;inset:0;background:var(--brand);
    z-index:3;transform:translateY(0);
  }
  .start .curtain{
    animation:curtainUp 0.5s cubic-bezier(.2,.8,.2,1) 1.6s forwards;
  }
  @keyframes curtainUp{
    to{transform:translateY(-100%)}
  }

/* ===== HEADER（安全＆遅延付き） ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:72px;
  display:flex; align-items:center; padding:0 20px;
  z-index:10;

  /* 初期は透明（スペースは確保） */
  opacity:0; pointer-events:none;

  /* ← ここで “最初の一回だけ” 2.25s 待ってからフェード */
  transition: opacity .6s ease;
  transition-delay: 2.25s;  /* 幕＆動画のタイミングに合わせて調整可 */

  isolation:isolate;
  contain: paint;
  font-size:16px; line-height:1;
}

.show-header .site-header{
  opacity:1; pointer-events:auto;
}

/* 中身のレイアウトは固定。transformは使わない */
.site-header .inner{
  width:100%; max-width:1800px;
  margin:0 auto; display:flex; align-items:center; gap:24px;
  opacity:1; transform:none;
}
.brand img{ height:30px; width:auto }
nav{ margin-left:auto }
.gnav{ display:flex; gap:22px; font-weight:700; font-size:14px }

.sticky{
  background:rgba(10,15,20,.45);
  backdrop-filter:saturate(1.1) blur(10px);
}

.brand-wrap{
  display: flex;
  align-items: center;
  gap: 18px;
}
/* ===== Header logo sizing & menu dot removal ===== */

/* 会社ロゴを小さく */
.brand-company img{
  height: 18px;      /* ← 小さめ */
  width: auto;
  opacity: .9;
  display: block;
}

/* SUI LORD ロゴをもっと大きく */
.brand-suilord img{
  height: 80px;      /* ← 主役サイズ（必要なら60pxまでOK） */
  width: auto;
  display: block;
}

/* 区切り線（少しだけ控えめに） */
.brand-divider{
  width: 1px;
  height: 32px;                 /* ← ロゴサイズに合わせて少し長く */
  background: rgba(255,255,255,.6); /* ← 今よりハッキリ */
  display: inline-block;
  flex-shrink: 0;
}

/* メニューの “・” がCSS疑似要素で出てる場合を完全に潰す */
.gnav li::before,
.gnav li::after,
.gnav a::before,
.gnav a::after{
  content: none !important;
}

/* 代わりに、自然な間隔だけで整える */
.gnav{
  display: flex;
  gap: 18px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================
   HAMBURGER（SP）
========================= */
.hamburger{
  display:none;
  position: relative;
  width: 28px;
  height: 20px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:1001;
}

.hamburger span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#fff;
  transition:.3s;
}

.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:9px; }
.hamburger span:nth-child(3){ bottom:0; }

/* open時 */
body.menu-open .hamburger span:nth-child(1){
  transform: rotate(45deg);
  top:9px;
}
body.menu-open .hamburger span:nth-child(2){
  opacity:0;
}
body.menu-open .hamburger span:nth-child(3){
  transform: rotate(-45deg);
  bottom:9px;
}

/* =========================
   SP MENU
========================= */
@media (max-width: 800px){
.sp-menu{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: .35s ease;
  z-index: 1001;

  /* 画面全体に薄い暗幕（背景が見える） */
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(2px);
}

body.menu-open .sp-menu{
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体（右側に出す。左側は背景が見える） */
.sp-nav{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(50vw, 420px); /* ← 約2/3 */
  padding: 110px 26px 26px;

  /* ガラスっぽい透過 */
  background: rgba(10,15,20,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid rgba(255,255,255,.12);

  /* ちょい影 */
  box-shadow: -20px 0 60px rgba(0,0,0,.25);

  /* 右からスッ… */
  transform: translateX(16px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

body.menu-open .sp-nav{
  transform: translateX(0);
}


.sp-nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.sp-nav li{
  margin: 14px 0;
}

.sp-nav a{
  font-size: 18px;          /* ← 24px → 18px に */
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .92;
}

.sp-nav a:active{
  opacity: .7;
}

.site-header{ 
	padding: 0 10px;
}

.brand-company img {
	height: 14px;
}
	.site-header nav{ 
		display:none;
	} /* ← ヘッダーのナビだけ消す */
	.hamburger{
		display:block;
	}

	/* メニューを開いている間はヘッダー(=×ボタン)を最前面に */
body.menu-open .site-header{
  z-index: 3000;
}

/* 念のため：SPメニューより下に固定（数値は相対でOK） */
.sp-menu{ z-index: 2000; }
.sp-nav { z-index: 2001; }

/* クリックできない事故を防ぐ */
body.menu-open .hamburger{
  z-index: 3001;
  pointer-events: auto;
}
}

/* PCではSPメニューを完全に無効化 */
@media (min-width: 801px){
  .sp-menu{ display:none !important; }
  .hamburger{ display:none !important; }
}

/* =========================
   SP hamburger fix（線ズレ対策：最終上書き）
========================= */
@media (max-width: 800px){

  /* ボタン本体 */
  .hamburger{
    position: fixed;
    top: 18px;
    right: 16px;
    width: 44px;
    height: 44px;

    display: block;               /* gridだとspan配置が崩れる環境があるので固定 */
    border: 0;
    padding: 0;
    cursor: pointer;

    background: rgba(0,0,0,.45);  /* 透過黒丸 */
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 3001;
    pointer-events: auto;
  }

  /* 線：必ずボタン基準で配置 */
  .hamburger span{
    position: absolute !important;
    left: 50% !important;
    width: 22px !important;
    height: 2px !important;
    background: #fff !important;

    transform: translateX(-50%) !important;
    opacity: 1 !important;

    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-origin: center;
  }

  .hamburger span:nth-child(1){ top: 15px !important; }
  .hamburger span:nth-child(2){ top: 21px !important; }
  .hamburger span:nth-child(3){ top: 27px !important; }

  /* open時（×） */
  body.menu-open .hamburger span:nth-child(1){
    transform: translateX(-50%) translateY(6px) rotate(45deg) !important;
  }
  body.menu-open .hamburger span:nth-child(2){
    opacity: 0 !important;
  }
  body.menu-open .hamburger span:nth-child(3){
    transform: translateX(-50%) translateY(-6px) rotate(-45deg) !important;
  }
}
/* =========================
   スクロール（sticky）でヘッダー中身を消す（ハンバーガーは残す）
========================= */
@media (max-width: 800px){
  /* sticky時：ブランド一式 + PCナビ（もし残ってたら）を消す */
  .site-header.is-scrolled .brand-wrap{
		display: none;
	}
	.site-header.is-scrolled nav{
		display: none;
	}
	
  /* innerを右詰め（見た目が気持ちいい） */
  .site-header.sticky .inner{
    justify-content: flex-end;
	}
	.site-header.sticky{
    background: transparent !important;
    backdrop-filter: none !important;
  }
}


/* 動き控えめ設定のときは遅延なしで即表示に */
@media (prefers-reduced-motion: reduce){
  .site-header{ transition-delay:0s }
}


  /* ========== 次セクション（サンプル） ========== */
  .kv-strip{
    padding:36px 20px;
    background:linear-gradient(180deg, rgba(39,194,255,.08), rgba(39,194,255,0));
  }
  .container{max-width:var(--grid-max);margin:0 auto}
  .claim{font-weight:800;font-size:clamp(18px,3vw,24px)}

  /* モーションを減らす利用者 */
  @media (prefers-reduced-motion: reduce){
    .curtain{display:none}
    .hero video{opacity:1}
    .site-header{opacity:1;transform:none}
    .title{clip-path:none}
    .fx-horizon .ch{opacity:1;transform:none;animation:none}
    .start .fx-horizon{animation:none}
  }

/* ===== White section under HERO ===== */
.section-white{
  background:#fff; color:#333; padding:72px 20px;
}
.section-white .container{ max-width: 1100px; margin: 0 auto; }
.section-white .eyebrow{
  font: 700 12px/1 var(--title-font);
  letter-spacing:0.2em; text-transform:uppercase; color:#ff6b6b; margin:0 0 18px;
}
.section-white .h2{
  margin:0 0 14px; font-weight:900; font-size: clamp(60px, 8vw, 80px); line-height:1.2;
}
.section-white .lead{
  margin:0; color:#555; font-size:clamp(15px,2.3vw,18px);
  max-width: 900px;
}
.kicker{
  color:#ff6b6b;
  font-size: 20px;
	margin-bottom: 18px;
	font-weight:bold;
}

/* ===== SP ===== */
@media (max-width: 768px){
	.section-white {
    padding: 8px 20px 40px;
}
	.section-white .h2{
		font-size:40px;
}
	.kicker {
		font-size:16px;
}
}




/* せくしょん */
.section-label {
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: #ff6b6b;
      margin-bottom: 10px;
    }

    .section-title {
      font-size: clamp(26px, 3vw, 32px);
      font-weight: 700;
      margin-bottom: 20px;
    }

    .section-lead {
      color: #c1cad4;
      max-width: 720px;
      margin-bottom: 26px;
      font-size: 14px;
    }

    .section-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 36px;
      align-items: center;
    }


/* ===== Catch: 水の主、降臨。 ===== */
.catch-gradient {
  font-family: var(--title-font);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .02em;
  text-align: center;
  margin: 80px 0 10px;
  font-size: clamp(40px, 10vw, 120px);
	/* background: linear-gradient(180deg, #ff1212, #ff8246, #ffa90d); */
	background:linear-gradient(180deg, #ff0000, #ffa100, #ff0000);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

  display: inline-block;
  background-size: 200% 200%;
  animation: gradientFlow 2.4s ease forwards;
}

@keyframes gradientFlow {
  from { background-position: 100% 50%; }
  to   { background-position: 0% 50%; }
}

/* ===== 水の主、降臨。演出 ===== */
/* 初期：画面外 左 */
.catch-reveal .catch-gradient {
  transform: translateX(-120%);
  opacity: 1;              /* フェードしない */
}

/* 表示 */
.catch-reveal.is-show .catch-gradient {
  animation: catchSlideIn 0.5s cubic-bezier(.5,1,.4,1) forwards;

}

@keyframes catchSlideIn {
  to {
    transform: translateX(0);
  }
}


@keyframes catchUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== スライド動画：右 → 左 ===== */
.mv-slide-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 32px;
}

/* 初期：画面外 右（推進中） */
.mv-slide {
  width: 100%;
  max-width: 1800px;
  display: block;

  /* 右の画面外 */
  transform: translateX(120%) scale(1.04);

  transition:
    transform 1.2s cubic-bezier(.2,.8,.2,1);
}

/* 停止位置：画面右半分（安定） */
.mv-slide-wrap.is-show .mv-slide {
  transform: translateX(12%) scale(1);
}


/* ===== セクション共通 ===== */
.section {
  padding: 96px 20px;
  background: #fff;
}

.section-dark {
  background: #0d1116;
  color: #fff;
}

.section-light {
  background: #f5f7fa;
}

.wave-section {
  position: relative;
}

.section-label {
  font-size: 11px;
  letter-spacing: .24em;
  color: #ff6b6b;
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  margin-bottom: 24px;
}

.section-lead {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 48px;
}

/* ===== レイアウト ===== */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.image-single img,
.image-grid img {
  width: 100%;
  border-radius: 16px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.usecase-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  font-weight: 700;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* セクション全体 */
/* .problem-section {
  background: #fff;
} */

.about-video-wrap{
  width: min(980px, 100%);
  margin: 22px auto 26px;
}

.about-video{
  width: 100%;
  height: auto;
  display: block;

  border-radius: 500px;     /* 角丸 */
  overflow: hidden;        /* 念のため */

  /* “枠っぽさ”を出したい場合だけ */
  /* box-shadow: 0 16px 36px rgba(12,18,28,.10); */
  /* outline: 1px solid rgba(20,24,30,.08); */
}



/* ===== 波（フッターと同じ思想） ===== */
.wave-problem {
  position: relative;
  width: 100%;
  height: 120px;
  background: #fff;     /* 前のセクション色 */
  overflow: hidden;
  margin-bottom: -1px;  /* 隙間防止 */
}

.wave-problem svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* テキスト */
.section-label {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .2em;
  margin-bottom: 40px;
}

/* ===== PROBLEM セクション ===== */
.problem-section {
  background: #e5332a;
  color: #fff;
  padding: 10px 0 100px;
}

/* 中央寄せ */
.problem-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

/* PROBLEM セクション専用テキスト */
.problem-section .section-label {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.15em;
}

.problem-title {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.4;
}

.problem-text {
  font-size:clamp(15px,2.3vw,18px);
  line-height: 2.1;
  opacity: 0.95;
}


/* ===== PROBLEM 横長画像 ===== */
.problem-image {
  margin-top: 48px;
}

.problem-image img {
  width: 100%;
  max-width: 1000px;   /* 横に伸びすぎ防止 */
  height: auto;
  display: block;
  margin: 0 auto;      /* 中央寄せ */
  border-radius: 6px;
}

.delay-2 {
  transition-delay: .5s;
}

@media (max-width: 768px) {
  .problem-title {
		font-size:20px;
	}
	.problem-section .section-label {
		font-size: 10px;
	}
	.section-label {
		margin-bottom: 10px;
	}
	.problem-image {
    margin-top: 10px;
	}
}


/* ===== SOLUTION の波 ===== */
.wave-solution {
  position: relative;
  width: 100%;
  height: 120px;
  background: #e5332a;   /* 直前（PROBLEM）の色 */
  overflow: hidden;
  margin-bottom: -1px;
}

.wave-solution svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== SOLUTION ===== */
.solution-section {
  background: #0f1115;
  color: #fff;
  padding: 120px 0 140px;
}

.solution-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 100px;
}

/* タイトル */
.solution-title {
  margin: 24px 0 64px;
  line-height: 1.2;
}

.solution-title-sub {
  display: block;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
}

.solution-title-main {
	display: block;
	background: linear-gradient(135deg, #ffea00, #ff006a, #ff0000);
	-webkit-background-clip: text;
	background-clip: text;
-webkit-text-fill-color: transparent;
  font-size: 104px;
  font-weight: 800;
  margin-top: 8px;
}

/* グリッド */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* カード */
.solution-item {
  background: #151820;
  border-radius: 14px;
  padding: 16px;
}

/* 動画 */
.solution-video {
  border-radius: 10px;
  overflow: hidden;
}

.solution-video video {
  width: 100%;
  height: auto;
  display: block;
}

/* 下部情報 */
/* ===== solution-meta 全体 ===== */
.solution-meta {
  display: flex;
  gap: 24px;              /* 余白も拡張 */
  margin-top: 24px;
  align-items: flex-start;
}

/* ===== アイコン（約2倍） ===== */
.solution-icon {
  width: 80px;            /* ← 40px → 80px */
  height: 80px;
  flex-shrink: 0;
}

.solution-icon img {
  width: 100%;
  height: auto;
  display: block;
  padding-top: 10px;
}



/* ===== SP ===== */
@media (max-width: 768px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }

  .solution-title-main {
    font-size: 60px;
  }

  .solution-icon {
    width: 56px;
    height: 56px;
  }

  .solution-text h3 {
    font-size: 22px;
  }

  .solution-text p {
    font-size: 16px;
	}
	.solution-inner {
		padding: 0 12px;
	}
	.solution-section {
		padding: 0 0 40px 0 ;
	}

	.section-label {
		font-size: 10px;
	}
}


/* 動画タイトル */
.solution-item h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  margin: 8px 0 6px;
  letter-spacing: 0.04em;
}

/* 動画説明 */
.solution-item {
  padding: 40px 28px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01)
  );
}

/* ===== テキストブロック ===== */
.solution-text h3 {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.solution-text p {
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.8;
  opacity: 0.9;
}

/* ===== SOLUTION CTA ===== */
.solution-cta{
  margin-top: 80px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 共通ボタン */
.solution-btn{
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;          /* 細長い角丸 */
  text-decoration: none;
  line-height: 1;
  transition: all .25s ease;
  white-space: nowrap;
}

/* お問い合わせ（主） */
.solution-btn--primary{
  color: #fff;
  background: linear-gradient(135deg, #ff1212, #ff8246, #ffa90d);
  box-shadow: 0 6px 16px rgba(255, 80, 0, .35);
}

.solution-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 80, 0, .45);
}

/* カタログDL（副） */
.solution-btn--secondary{
  color: #ff8246;
  border: 1px solid rgba(255, 130, 70, .6);
  background: transparent;
}

.solution-btn--secondary:hover{
  background: rgba(255, 130, 70, .08);
}
@media (max-width: 600px){
  .solution-cta{
    align-items: center;
  }
}

/* ===== SOLUTION → TECHNOLOGY 斜めつなぎ ===== */
.diag-to-tech{
  position: relative;
  width: 100%;
  height: 120px;              /* 斜めの高さ */
  background: #8f1717;        /* TECHNOLOGY と同じ赤 */
  clip-path: polygon(
    0 90%,     /* 左下寄り */
    100% 0%,   /* 右上 */
    100% 100%,
    0 100%
  );
}


/* ===== TECHNOLOGY SECTION ===== */

.technology-section {
  background: linear-gradient(
    180deg,
    #8f1d1d 0%,
    #b21f1f 40%,
    #7a0f0f 100%
  );
  color: #fff;
	padding: 80px 0;
	position: relative;   /* 追加 */
  z-index: 0;           /* 追加（斜めパーツの重なり制御しやすくなる） */

}

.technology-section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-2px;            /* ←ここが効く：上に2pxはみ出して境界を隠す */
  height:6px;          /* ちょい厚めに（2〜10pxでOK） */
  background: #8f1d1d; /* TECHNOLOGYの一番上の色に合わせる */
  z-index:-1;
  pointer-events:none;
}


.tech-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 100px;
}

/* セクションラベル */
.technology-section .section-label {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 80px;
}

/* 各項目 */
.tech-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 180px;
}

/* 交互レイアウト */
.tech-item.reverse {
  direction: rtl;
}
.tech-item.reverse > * {
  direction: ltr;
}

/* テキスト */
.tech-text h3 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  margin-bottom: 16px;
}

.tech-text p {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.9;
  opacity: 0.95;
}

/* 動画 */
.tech-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  display: block;
  pointer-events: none;
}

.js-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* スマホ対応 */
@media (max-width: 900px) {
  .tech-item {
    grid-template-columns: 1fr;
		gap: 8px;
		margin-bottom: 48px;
  }

  .tech-item.reverse {
    direction: ltr;
  }

  .technology-section {
    padding: 120px 0;
	}
	
	.tech-container {
		padding: 0 24px;
	}
	.technology-section {
		padding: 10px 0;
	}
	.technology-section .section-label {
		font-size: 10px;
		margin-bottom: 10px;
	}
	
	
}

/* =========================
   USE CASE Showcase（添付風）
========================= */
.usecase-showcase{
  background:#000;
  color:#fff;
  padding: 110px 0 200px;
  overflow:hidden;
}

/* 見出しブロック */
.usecase-head{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  text-align:center;
}

.usecase-big{
  margin: 0 0 48px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(48px, 7vw, 100px);
  background: linear-gradient(
    135deg,
    #ff1212,
    #ff8246,
    #ffa90d
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;   /* 念のため */
  color: transparent;      /* 念のため */
}


/* 小ラベル（“シームレスに…”の位置） */
.usecase-label{
  margin: 0 0 6px;
  opacity: .9;
}

/* サブ（“簡単撮影”の位置に「現場実績」） */
.usecase-sub{
  margin: 0 0 42px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 3.6vw, 54px);
}

/* スライダー */
.usecase-slider{
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 矢印 */
.uc-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size: 30px;
  line-height: 1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 5;
  backdrop-filter: blur(8px);
}
.uc-prev{ left: 10px; }
.uc-next{ right: 10px; }
.uc-nav:hover{ border-color: rgba(255,255,255,.5); }

/* ビューポート：左右チラ見え */
.uc-viewport{
  overflow: hidden;
}

/* track：横並び */
.uc-track{
  display:flex;
  gap: 22px;
  will-change: transform;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

/* スライド幅：中央が大きく見えるように */
.uc-slide{
  flex: 0 0 clamp(280px, 78vw, 980px);
  opacity: .55;
  transform: scale(.92);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease;
}

/* アクティブだけ強調 */
.uc-slide.is-active{
  opacity: 1;
  transform: scale(1);
}

/* カード */
.uc-card{
  position:relative;
  border-radius: 24px;
  overflow:hidden;
  background:#111;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* 動画はフィット */
.uc-video{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
  background:#000;
  pointer-events:none;
}

/* キャプション */
.uc-cap{
	max-width:240px;
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}

.uc-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  opacity: .9;
}

.uc-title{
  margin: 6px 0 2px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 900;
}

.uc-desc{
  margin:0;
  opacity:.9;
  font-size: clamp(13px, 1.4vw, 16px);
}

/* ドット */
.uc-dots{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 18px;
}

/* SP */
@media (max-width: 768px){
  .usecase-big {
		margin: 0 0 10px;
		line-height: 1.2;
	}

	/* キャプションを動画の下へ */
	.uc-cap{
		position: static;        /* absolute解除 */
		margin-top: 0;
		max-width: none;
		background: rgba(0,0,0,.6); /* 読みやすさ維持 */
		border-radius: 4px;
	}

	/* absolute前提の余白を解除 */
	.uc-card{
		padding-bottom: 0;
		border-radius:4px;
	}
	
}

/* =========================
   VALUE（添付みたいなシンプルおしゃれ）
========================= */

/* 波：直前が黒系を想定（必要なら background を直前色に合わせてね） */
.wave-value{
  position: relative;
  width:100%;
  height:120px;
  background:#000;         /* ←直前セクションの背景色に合わせる */
  overflow:hidden;
  margin-bottom:-1px;      /* 隙間防止 */
}
.wave-value svg{
	display:block;
	width:100%;
	height:100%;
	transform: translateY(1px);
}

/* セクション本体 */
.value-simple{
  background:#fff;
  color:#111;
  padding: 110px 24px 120px;
}
.value-inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align:center;
}

.value-title{
  margin:0 0 52px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(34px, 4.5vw, 56px);
}

/* 3カード */
.value-grid-simple{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  text-align:left;
}

/* カード：白×淡い影×角丸（添付の雰囲気） */
.value-card{
  background:#eeeeee;
  border-radius: 26px;
  padding: 34px 32px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.value-card h3{
  margin:0 0 16px;
  font-weight: 900;
  letter-spacing: .01em;
  font-size: clamp(20px, 2.2vw, 30px);
}

.value-card p{
  margin:0;
  color:#5b5f66;
  line-height: 1.9;
  font-size: 16px;
}

/* SP */
@media (max-width: 980px){
  .value-grid-simple{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .value-card{
    padding: 28px 24px;
	}
	.value-simple{
		padding:  28px 24px;
	}
	.value-title {
    margin: 0 0 20px;
    font-size: 24px;
	}
}



/* =========================
   SPECS：仕様一覧
========================= */
/* SPECSだけ幅を狭くして中央へ */
.specs-label{
  margin-bottom: 18px;
}

/* ===== Tech highlight (Porsche Taycan風) ===== */
.section-tech{
  background:#fff;
  color:#333;
  padding:84px 100px;
}
.section-tech .container{
  max-width: var(--grid-max);
  margin: 0 auto;
}
.tech-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr; /* 左:スペック/右:画像 */
  gap: clamp(20px, 3vw, 40px);
  align-items:center;
}

/* 左：代表スペック（大きい数字＋単位＋説明） */
.spec-list{ display:grid; gap: clamp(20px, 2.8vw, 34px); }

.spec{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  column-gap: 14px;
  row-gap: 6px;
}

.spec .num{
  grid-row: 1 / span 2;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  font-size: clamp(42px, 7.2vw, 120px); /* タイカン級にデカく */
}
.spec .unit{
  align-self:end;
  font-weight:700;
  color:#555;
  font-size: clamp(14px, 1.8vw, 22px);
  margin-bottom: 6px;
}
.spec .label{
  grid-column: 2 / -1;
  font-size: clamp(12px, 1.6vw, 14px);
  color:#777;
}

/* 右：製品画像（仮） */
/* 右：製品画像（背景なし・全体表示） */
.product-hero{
  position: relative;
  border-radius: 0;         /* 背景を見せないなら角丸も無しが綺麗 */
  overflow: visible;        /* 画像を切らない */
  background: transparent;  /* ←背景なし */
  aspect-ratio: auto;       /* 固定比率やめる（画像を自然に） */
  box-shadow: none;         /* ←影なし */
}

.product-hero img{
  width: 100%;
  height: auto;
  object-fit: contain;      /* ←画像全体を見せる */
  transform: none;
}



/* 右からスライドイン */
.js-slide-right{
  opacity: 0;
  transform: translateX(60px); /* ← マイナスをプラスにするだけ */
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}

.js-slide-right.is-visible{
  opacity: 1;
  transform: translateX(0);
}




/* 「仕様」見出し */
.specs-detail{
	max-width: 800px; 
  margin: clamp(46px, 5vw, 70px) auto 0;
}

.specs-title{
  margin: 0 0 18px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(24px, 3vw, 36px);
}

/* 仕様テーブル（カード） */
.specs-box{
  background: #eeeeee;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
  overflow: hidden;
}


/* dlを表っぽく */
.specs-dl{
  margin: 0;
}

.specs-row{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  padding: 10px 22px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.specs-row:first-child{
  border-top: none;
}

.specs-row dt{
  font-weight: 800;
  color: #5a5a5a;
  letter-spacing: .01em;
}

.specs-row dd{
  margin: 0;
  color: #4f5661;
  line-height: 1.8;
}

/* 注記 */
.specs-note{
  margin: 14px 2px 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.7;
}

/* SP */
@media (max-width: 900px){
  .specs-row{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .specs-row{
    padding: 16px 18px;
	}
	.section-tech {
    padding: 40px 24px;
	}
	.specs-row dd {
    line-height: 1.4;
		font-size: 12px;
	}
}



/* =========================
   SUPPORT（信頼とサポート）
========================= */

/* セクション枠 */
.support-section{
  position: relative;
  overflow: hidden;
  background:#0d1116;
  color:#fff;
}

.support-section::before{
  content:"";
  position:absolute;
  inset:0;

  /* ★ 横幅を100%に固定、縦は自動 */
  background-image: url("img/supprtbk.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto; /* ← ここが核心 */

  opacity: 0;
  transform: translateY(0) scale(1.01);
  transition: opacity .8s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
  z-index:0;
	pointer-events:none;
	
	filter: saturate(1.05) contrast(1.05);
}



/* 暗幕（読みやすさ） */
.support-section::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(13,17,22,.35);
  opacity: 0;
  transition: opacity .8s ease;
  z-index:1;
  pointer-events:none;
}

.support-section.is-show::before{
  opacity: .85;   /* 少しだけ濃く（containは薄く見えがち） */
  transform: scale(1);
}
.support-section.is-show::after{
  opacity: 1;
}

/* “ガラス箱”は残すが、横並びを壊さない幅と余白に */
.support-container{
  position: relative;
  z-index: 2;

  max-width: 1040px;
  margin: 70px auto;       /* ★上下に余白を作る（背景が見える） */
  padding: 34px 22px;      /* ★中身は少し締める */

  /* background: rgba(13,17,22,.52);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px; */

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1);

  transition-delay: 1s;    /* ★ここで 1秒遅延に変更 */
}

@media (max-width: 850px){
  .support-container{
    margin: 34px auto;
    padding: 28px 18px;
	}
	.support-section::before{
    display: none;
	}
	.support-card{
    position: relative;
    overflow: hidden;
  }

  /* ぼかし背景 */
  .support-card::before{
    content: "";
    position: absolute;
    inset: -20px; /* ぼかしのはみ出し対策 */
    background-image: var(--support-bg);
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(.6);
    transform: scale(1.2);
    z-index: 0;
  }

  /* 中身を前に */
  .support-card > *{
    position: relative;
    z-index: 1;
	}
	.support-card{
    --support-bg: none;
  }

  .support-card:nth-child(1){
    --support-bg: url("img/support01.png");
  }
  .support-card:nth-child(2){
    --support-bg: url("img/support02.png");
  }
  .support-card:nth-child(3){
    --support-bg: url("img/support03.png");
  }
}


.support-section.is-show .support-container{
  opacity: 1;
  transform: translateY(0);
}

/* 3カラムを確実に横並びに戻す */
.support-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; /* ★カード間を少し詰める */
  margin-top: 26px;
}

.support-thumb img{
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display:block;
}

/* テキストを少し引き締めて3枚でも読みやすく */
.support-h3{
  font-size: clamp(18px, 1.8vw, 24px);
}
.support-text{
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.85;
}

/* 1150px以下で2列、850px以下で1列（自然） */
@media (max-width: 1150px){
  .support-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px){
  .support-grid{ grid-template-columns: 1fr; }
  .support-container{ padding: 28px 18px; }
}

/* モーション控えめ */
@media (prefers-reduced-motion: reduce){
  .support-section::before,
  .support-section::after,
  .support-container{
    transition: none !important;
    transform: none !important;
  }
  .support-section::before{ opacity:.75; }
  .support-section::after{ opacity:1; }
  .support-container{ opacity:1; }
}

.support-label{
  color: #ff6b6b;
  opacity: .9;
  margin-bottom: 18px;
}

.support-title{
  margin: 0 0 18px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(42px, 6vw, 84px);
	line-height: 1.1;
  background: linear-gradient(
    135deg,
    #ff1212,
    #ff8246,
    #ffa90d
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;   /* 念のため */
  color: transparent;      /* 念のため */
}

.support-lead{
  margin: 0 0 56px;
  color: rgba(255,255,255,.72);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.9;
  max-width: 980px;
}

.support-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.support-card{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  overflow: hidden;
  padding: 22px 22px 26px;
}

/* 横長画像エリア */
.support-thumb{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

.support-thumb img{
  width: 100%;
  aspect-ratio: 16 / 7;  /* 横長 */
  object-fit: cover;
  display: block;
}

.support-step{
  margin: 18px 0 10px;
  font-weight: 800;
  letter-spacing: .28em;
  color: #ff6b6b;
  font-size: 12px;
}

.support-h3{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(18px, 2.2vw, 28px);
}

.support-text{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.95;
  font-size: clamp(14px, 1.4vw, 16px);
}

/* SP */
@media (max-width: 980px){
  .support-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .support-card{
    padding: 18px 18px 22px;
	}
	.support-lead{
		margin: 0 0 1px;
	}
	.support-card{
		border-radius: 0px;
		padding: 22px 22px 26px;
	}
	
}



/* =========================
   CONTACT / CTA（白背景＋グラデボタン）
========================= */
.contact-cta{
  background: #fff;
  color: #111;
  padding: 120px 24px 130px;
}

.contact-inner{
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.contact-label{
  color: #ff6b6b;
  margin-bottom: 40px;
}

.contact-title{
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(34px, 4.6vw, 56px);
}

.contact-lead{
  margin: 0 auto 44px;
  max-width: 820px;
  color: #4b5563;
  line-height: 1.9;
  font-size: clamp(15px, 1.6vw, 18px);
}

/* ボタン群 */
.contact-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin: 0 auto 22px;
}

/* 共通ボタン */
.btn-grad{
  position: relative;
  display: grid;
  gap: 8px;
  padding: 24px 16px;
  border-radius: 18px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 22px;
  line-height: 1.2;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  user-select: none;
}


/* メイン：強いグラデ */
.btn-grad--primary{
  color: #fff;
	background: linear-gradient(120deg, #ff1212, #ff8246, #ffa90d);
  box-shadow: 0 18px 45px rgba(47,121,255,.22), 0 10px 26px rgba(137,80,245,.18);
}

/* サブ：白背景だけど“かっこいい”グラデ枠 */
.btn-grad--ghost{
  color: #111;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}

/* ゴースト側のグラデ縁取り（疑似要素で高級感） */
.btn-grad--ghost::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(47,121,255,.55), rgba(137,80,245,.55), rgba(255,107,107,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* hover */
.btn-grad:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
}
.btn-grad--primary:hover{
  box-shadow: 0 22px 55px rgba(47,121,255,.26);
}

/* ===== SP ===== */
@media (max-width: 768px) {
  .contact-title {
		font-size: 24px;
	}
	.contact-lead {
		font-size: 12px;
	}
	.contact-actions{
		grid-template-columns: 1fr;
		gap: 24px;
    margin: 0 auto 22px;
	}
	.btn-grad {
		width:240px;
		margin:0 auto;
    padding: 20px 14px;
    font-size: 18px;
}
}

	/* ===== フッター波（上向きの黒い波） ===== */
	.wave-footer{
		position:relative;
		width:100%;
		height:120px;
		background:#fff;     /* CONTACT(白)とつながる */
		overflow:hidden;
		margin: 0;
	}
	
	.wave-footer svg{
		display:block;
		width:100%;
		height:100%;
		transform: translateY(1px); /* ← 1pxの隙間・線を潰す */
	}
	
	.contact-cta{
		background: #fff;
		color: #111;
		padding: 120px 24px 130px;
	}

/* レスポンシブ */
@media (max-width: 768px) {
	.contact-cta{
		padding: 40px 24px;
	}
	
}

/* =========================
   FOOTER
========================= */
.site-footer{
  background:#0d1116;
  color: rgba(255,255,255,.82);
  padding: 0;                 /* ← 黒い余白の原因を消す */
}

/* 波型が footer の中にある前提：波の下に余白が欲しいならここ */
.site-footer .wave-footer{
  margin-bottom: -1px; /* 波の隙間対策をしてるならそのまま */
}

/* 中身 */
.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 40px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ブランド */
.footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.footer-logo img{
  width: 180px;
  height: auto;
  display: block;
}
.footer-tagline{
  margin: 16px 0 0;
  color: rgba(255,255,255,.70);
  line-height: 1.8;
  font-size: 14px;
}

/* 右側カラム */
/* 右側カラムをまとめて右寄せ */
.footer-columns{
  display: grid;
  grid-template-columns: auto auto;
  gap: 48px;
  justify-content: end;   /* ← 右寄せの決め手 */
  align-items: start;
}

/* CTAブロックを縦中央寄せ */
.footer-cta{
  display: flex;
  align-items: center;
}


/* フッター会社ロゴ */
.footer-company-logo{
  width: 140px;          /* 120〜160pxで好み調整 */
  height: auto;
  margin-bottom: 14px;
  opacity: 0.9;
}


.footer-head{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
  font-size: 14px;
  opacity: .92;
}

.footer-list,
.footer-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-list li{
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  font-size: 13px;
}

/* リンク */
.footer-links a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: 13px;
}
.footer-links a:hover{
  color: #fff;
  text-decoration: underline;
}



.footer-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  user-select: none;
}

.footer-btn--primary{
  color: #fff;
	/* background: linear-gradient(120deg, #2f79ff 0%, #8950f5 48%, #ff6b6b 100%); */
}
.footer-btn--ghost{
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer-btn:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
}

/* ミニリンク */
.footer-mini{
  margin-top: 12px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}
.footer-mini-link{
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.footer-mini-link:hover{ color:#fff; text-decoration: underline; }
.footer-mini-dot{ margin: 0 6px; opacity:.6; }
.footer-cta{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start; /* 右寄せしたいなら end に */
}

/* 最下部 */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 24px;
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* レスポンシブ */
@media (max-width: 800px){
  .footer-inner{
    grid-template-columns: 1fr;
		gap: 26px;
		padding: 24px 24px 40px;
  }
  
  .footer-columns{
    grid-template-columns: 1fr;
    justify-content: start;
    gap: 80px;
  }

  .footer-cta-col{
    align-items: flex-start;
  }

  .footer-logo img{
    width: 160px;
	}
	.footer-cta{
    flex-direction: row;     /* ← 横並び */
		gap: 12px;
		font-size: 12px;
  }

  .footer-btn{
    flex: 1;                 /* ← 横幅を揃える（重要） */
    justify-content: center;
	}
	.footer-head{
		display:none;
	}
	.footer-btn {
		padding:10px;
	}
}

/* ===== footer wave (moving) ===== */
.wave-footer{
  height: 120px;
  overflow: hidden;
  background: #fff;          /* 上の白背景と馴染ませる */
  line-height: 0;
}

.wave-footer-svg{
  display: block;
  width: 200%;               /* 2枚分を表示するため */
  height: 100%;
}

/* 波を左→右へ流す（※中身は左に動かすと“右へ流れて見える”） */
.wave-footer-move{
  animation: wave-slide 12s linear infinite;  /* 速度：短いほど速い */
  will-change: transform;
}

/* 継ぎ目が鋭角っぽく見えるのを減らす小技 */
.wave-footer-move path{
  shape-rendering: geometricPrecision;
}

@keyframes wave-slide{
  from{ transform: translateX(0); }
  to  { transform: translateX(-1440px); }    /* 1枚分スライドでループが繋がる */
}







/* ===== フェード（文字だけ） ===== */
.fade-text {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}

.fade-text.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* ===== フェードイン ===== */
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}

.fade-section.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* レスポンシブ */
@media (max-width: 900px) {
  .image-grid,
  .value-grid,
  .two-col {
    grid-template-columns: 1fr;
  }
}


/* レスポンシブ */
@media (max-width: 980px){
  .tech-grid{ grid-template-columns: 1fr; }
  .product-hero{ order: -1; } /* 画像 → 上、数値 → 下 */
}
/* 降臨文字モバイル調整 */
@media (max-width: 768px) {
  .mv-slide-wrap.is-show .mv-slide {
    transform: translateX(15%) scale(1);
  }
}

/* 小さめ画面 */
@media (max-width: 900px){
  .feature-cards{ grid-template-columns: 1fr; }
}

.br-sp {
	display: none;
}

@media (max-width: 600px) {
	.br-sp {
			display: block;
	}
}