/*
Theme Name: Lightning Child
Template: lightning
Version: 1.0.1
*/

/* =========================================================
   Top Hero専用（トップページに #ae-hero がある前提）
========================================================= */

/* トップページだけ：Lightning側の外側余白を消す */
body.home #content,
body.home #content .container,
body.home #content .container-fluid,
body.home .siteContent,
body.home .site-content,
body.home main,
body.home .vk_outer,
body.home .vk-content{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* 親の overflow で切られる場合があるので可視化 */
body.home #page,
body.home #wrap,
body.home #content,
body.home main{
  overflow: visible !important;
}

:root{
  /* --ae-radius: 16px; */
  --ae-radius: 0px;
  /* --ae-outer-gap: 18px; */ /* 画面端の余白 */
  --ae-outer-gap: 0px; /* 画面端の余白 */
  --ae-sp-shift-y: 0px; /* SP縦動画の上下微調整（-で上、+で下） */
}

/* ヒーロー：フルブリード + 外側余白 */
#ae-hero{
  height: 100vh;
  box-sizing: border-box;

  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: var(--ae-outer-gap) !important;
  max-width: none !important;
}

#ae-hero .ae-hero__frame{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--ae-radius);
  overflow: hidden;
}

#ae-hero .ae-hero__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ↓scroll（2秒後に表示） */
/* Scroll をロゴ直後に配置 */
.ae-scroll-hint{
  position: absolute !important;
  left: 50% !important;

  /* 👇 ロゴ直後に来る高さ（調整ポイント） */
  top: 73% !important;

  transform: translateX(-50%) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 180px;
  padding: 12px 18px;
  border-radius: 999px;

  background: rgba(255,255,255,.78);
  color: rgba(0,0,0,.78);
  font-weight: 700;

  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);

  z-index: 10;
  opacity: 0;
  animation: ae-fadein .25s ease forwards;
  animation-delay: 1s;
  pointer-events: none;
}
@keyframes ae-fadein{ to { opacity: 1; } }

.ae-scroll-hint__arrow{
  display:inline-block;
  animation: ae-bounce 1.2s infinite ease-in-out;
}
@keyframes ae-bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(4px); }
}

/* =========================================================
   ヘッダー制御（ae-top.js が html に class を付与）
   - 先頭：ヘッダー非表示＋“ヘッダー分の余白”も0にする
   - スクロール：滑らかに表示
========================================================= */

/* アニメーション */
.siteHeader, .site-header, .l-header, header{
  transition: transform .28s ease, opacity .28s ease !important;
  will-change: transform, opacity;
}

/* 先頭：ヘッダーを上へ */
html.ae-at-top .siteHeader,
html.ae-at-top .site-header,
html.ae-at-top .l-header,
html.ae-at-top header{
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 先頭：テーマが確保する“ヘッダー高さ分の上余白”を潰す */
html.ae-at-top body,
html.ae-at-top #page,
html.ae-at-top #wrap,
html.ae-at-top #content,
html.ae-at-top .siteContent,
html.ae-at-top .site-content,
html.ae-at-top main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* スクロール後：表示 */
html:not(.ae-at-top) .siteHeader,
html:not(.ae-at-top) .site-header,
html:not(.ae-at-top) .l-header,
html:not(.ae-at-top) header{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ロゴのチラ見え対策（あなたが特定した要素） */
html.ae-at-top h1.site-header-logo,
html.ae-scrolling h1.site-header-logo{
  display: none !important;
}

/* =========================================================
   PC / SP 動画切り替え
========================================================= */
.ae-hero__media--sp{ display: none !important; }
.ae-hero__media--pc{ display: block !important; }

@media (max-width: 768px){
  /* iPhone等のvh揺れ対策 */
  #ae-hero{ height: 100dvh; }

  /* SPは縦動画 */
  .ae-hero__media--pc{ display: none !important; }
  .ae-hero__media--sp{ display: block !important; }

  /* SP縦動画：上下だけ微調整 */
  #ae-hero video.ae-hero__media--sp{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: translateY(var(--ae-sp-shift-y)) scale(1.02) !important;
    transform-origin: center center;
  }
  
  .ae-scroll-hint{
    top: 75% !important;
    min-width: 160px;
    padding: 10px 16px;
  }

}


/* =========================================
   TOP：ヒーロー上の白帯を根絶（Lightning外枠の上余白を全潰し）
========================================= */
body.home,
body.home #page,
body.home #wrap,
body.home #container,
body.home #content,
body.home .siteContent,
body.home .site-content,
body.home main,
body.home .vk_outer,
body.home .vk-content,
body.home .container,
body.home .container-fluid{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* テーマによっては header の後ろに “スペーサー” を挿すことがあるので、それも潰す */
body.home .siteHeader + * ,
body.home .site-header + * ,
body.home header + *{
  margin-top: 0 !important;
}

/* 念のため：最初のセクション/ブロックに上マージンが付くケースを潰す */
body.home #content > *:first-child,
body.home main > *:first-child,
body.home .siteContent > *:first-child,
body.home .site-content > *:first-child{
  margin-top: 0 !important;
}

/* ヒーロー自体も “上に余白を持たない” を確実化 */
body.home #ae-hero{
  margin-top: 0 !important;
}

/* =========================================
   Lightningの固定ヘッダー用オフセット（白帯）を相殺
   - ヘッダー高さを --ae-header-offset に入れて、ヒーローを上に引き上げる
========================================= */
:root{
  --ae-header-offset: 0px;
}

/* 先頭表示中は、白帯ぶん上に引き上げて、表示高さも増やす */
html.ae-at-top body.home #ae-hero{
  margin-top: calc(-1 * var(--ae-header-offset)) !important;
  height: calc(110vh + var(--ae-header-offset)) !important;
}

/* スクロール後は通常に戻す（ガクつき防止のため明示） */
html:not(.ae-at-top) body.home #ae-hero{
  margin-top: 0 !important;
  height: 110vh !important;
}


.top-title-left__frame{
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
/*  border-radius: 24px; */
}

.top-title-left__img{
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の上に重ねる文字 */
.top-title-left__text{
  position: absolute;
  left: 10%;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;

  color: #fff;
  text-align: left;

  /* 読みやすさ確保 */
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* 英字 */
.top-title-left__text .en{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  opacity: 0.9;
}

/* 日本語 */
.top-title-left__text .jp{
  font-size: 42px;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
}
@media (max-width: 768px){
  .top-title-left__text{
    left: 12%;
    top: 50%;
  }
  .top-title-left__text .en{
    font-size: 14px;
  }
  .top-title-left__text .jp{
    font-size: 26px;
  }
}

/* Company Profile 英字と日本語の間の線を完全に無効化 */
.top-title-left__text .en,
.top-title-left__text .jp{
  border: none !important;
}

/* 疑似要素で出ている線を完全に殺す */
.top-title-left__text .en::before,
.top-title-left__text .en::after,
.top-title-left__text .jp::before,
.top-title-left__text .jp::after{
  content: none !important;
  display: none !important;
}

/* Lightning が見出しに入れる装飾を無効化 */
.top-title-left__text h1,
.top-title-left__text h2,
.top-title-left__text p{
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}




.top-title-right__frame{
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
/*  border-radius: 24px; */
}

.top-title-right__img{
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の上に重ねる文字 */
.top-title-right__text{
  position: absolute;
  right: 10%;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;

  color: #fff;
  text-align: left;

  /* 読みやすさ確保 */
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* 英字 */
.top-title-right__text .en{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  opacity: 0.9;
}

/* 日本語 */
.top-title-right__text .jp{
  font-size: 42px;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
}
@media (max-width: 768px){
  .top-title-right__text{
    right: 12%;
    top: 50%;
  }
  .top-title-right__text .en{
    font-size: 14px;
  }
  .top-title-right__text .jp{
    font-size: 26px;
  }
}

/* Company Profile 英字と日本語の間の線を完全に無効化 */
.top-title-right__text .en,
.top-title-right__text .jp{
  border: none !important;
}

/* 疑似要素で出ている線を完全に殺す */
.top-title-right__text .en::before,
.top-title-right__text .en::after,
.top-title-right__text .jp::before,
.top-title-right__text .jp::after{
  content: none !important;
  display: none !important;
}

/* Lightning が見出しに入れる装飾を無効化 */
.top-title-right__text h1,
.top-title-right__text h2,
.top-title-right__text p{
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}





.top-title-big__frame{
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  overflow: hidden;
/*  border-radius: 24px; */
}

.top-title-big__img{
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の上に重ねる文字 */
.top-title-big__text{
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%); /* ← XもYも中央補正 */
  z-index: 2;

  color: #fff;
  text-align: center;

  /* 読みやすさ確保 */
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* 英字 */
.top-title-big__text .en{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  opacity: 0.9;
}

/* 日本語 */
.top-title-big__text .jp{
  font-size: 42px;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
}
@media (max-width: 768px){
  .top-title-big__text{
    left: 50%;
    top: 28%;
  }
  .top-title-big__text .en{
    font-size: 14px;
  }
  .top-title-big__text .jp{
    font-size: 26px;
  }
}

/* Company Profile 英字と日本語の間の線を完全に無効化 */
.top-title-big__text .en,
.top-title-big__text .jp{
  border: none !important;
}

/* 疑似要素で出ている線を完全に殺す */
.top-title-big__text .en::before,
.top-title-big__text .en::after,
.top-title-big__text .jp::before,
.top-title-big__text .jp::after{
  content: none !important;
  display: none !important;
}

/* Lightning が見出しに入れる装飾を無効化 */
.top-title-big__text h1,
.top-title-big__text h2,
.top-title-big__text p{
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}