/* =========================================
   LK・Partners AX Solution - Landing CSS
   - Organized for easy maintenance
   - Futuristic / Luxury / Bold AX stage
========================================= */

/* ========== 0) Reset / Base ========== */
h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  position: relative;
  color: #fff;
}

html, body{
  overflow-x: hidden;
  width: 100%;
}

/* ========== 1) Background Layers (Video + Gradient + Scanlines) ========== */
/* Main gradient + red glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(139,0,0,0.22) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(circle at 82% 70%, rgba(139,0,0,0.14) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.92) 0%,
      rgba(139,0,0,0.66) 50%,
      rgba(0,0,0,0.92) 100%
    );
  pointer-events: none;
  z-index: 0;
}

/* Scanlines overlay (AX futuristic) */
body::after {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;               /* before:0 < after:1 < content:2+ */
  opacity: 0.18;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    );
  mix-blend-mode: overlay;
  animation: scanMove 8s linear infinite;
}

@keyframes scanMove{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(60px); }
}

/* Background video */
.bg-video{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;

  /* iOSの1pxはみ出し対策 */
  max-width: 100%;
  overflow: hidden;
}

/* ========== 2) Main Visual ========== */
.main-visual {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.overlay {
  text-align: center;
  color: #fff;
}
.logo {
  max-width: 300px;
  height: auto;
  margin-bottom: 45px;
}
.dept-title{
  margin-top: 0px;
  font-family: "Poppins","Noto Sans JP",sans-serif;
  font-size: 36px;
  letter-spacing: .18em;
  text-transform: uppercase;

  color: #ffffff;   /* ← 白ベタ */

  /* 上品な立体感だけ残す */
  text-shadow:
    0 2px 6px rgba(0,0,0,0.5),
    0 0 12px rgba(255,255,255,0.15);
}


.catchcopy {
  font-size: 5vw;
  color: #fff;
}

/* ========== 3) Contents Layout ========== */
.contents {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 22px 16px 54px;
}

/* Optional image style (if you add images later) */
.contents a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Contents stage glow */
.contents::before {
  content: "";
  position: absolute;
  inset: -80px -80px;
  background:
    radial-gradient(circle at 50% 18%, rgba(139,0,0,0.16) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 92%, rgba(139,0,0,0.10) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 0;
}

/* ========== 4) AX Futuristic Cards (Buttons) ========== */
.content-btn{
  position: relative;
  z-index: 1;
  display: block;
  padding: 22px 18px;
  min-height: 132px;
  border-radius: 18px;
  text-decoration: none;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.16);

  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.78) 0%,
    rgba(139,0,0,0.52) 50%,
    rgba(0,0,0,0.88) 100%
  );

  box-shadow:
    0 16px 44px rgba(0,0,0,0.60),
    0 0 26px rgba(139,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12);

  backdrop-filter: blur(3px);

  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Link states: prevent blue/purple */
.content-btn,
.content-btn:visited,
.content-btn:hover,
.content-btn:active{
  color: #fff;
}

/* Moving light (sweep) */
.content-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 35%,
    rgba(255,80,80,0.22) 50%,
    rgba(255,255,255,0.10) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-60%);
  transition: transform .6s cubic-bezier(0.25,1,0.5,1);
  pointer-events:none;
  opacity: 0.9;
}

/* Edge glow ring */
.content-btn::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.20),
    rgba(255,80,80,0.38),
    rgba(255,255,255,0.12)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: 0.85;
}

/* Hover: lift (PC will be stronger in media query) */
.content-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.28);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.70),
    0 0 36px rgba(139,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.content-btn:hover::before{
  transform: translateX(60%);
}
.content-btn:hover::after{
  opacity: 1;
}

/* Mobile tap feedback */
.content-btn:active{
  transform: scale(0.99);
  border-color: rgba(255,255,255,0.30);
}

/* Typography */
.btn-title{
  display:block;
  font-size: 18px;
  letter-spacing: 0.04em;

  /* 上：白 → 中央：白 → 下：濃い赤 */
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 50%,      /* ← 中央まで白をキープ */
    rgba(200,0,0,0.95) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 0 14px rgba(139,0,0,0.18);
}

.btn-sub{
  display:block;
  margin-top: 8px;
  color: rgba(255,255,255,0.78);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.88;
}

/* Description (ensure white, prevent blue on mobile) */
.btn-desc{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.95;
  opacity: 0.92;
  color: rgba(255,255,255,0.86);
}

/* Optional CTA label if you add <span class="btn-cta">DETAIL →</span> */
.btn-cta{
  display:inline-block;
  margin-top: 14px;
  font-family: "Poppins", sans-serif;
  letter-spacing: .14em;
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  opacity: .9;
}

/* ========== 5) Animation (Scroll-in) ========== */
/* Delay per item */
.contents .anim-box:nth-child(1){ animation-delay: 0s; }
.contents .anim-box:nth-child(2){ animation-delay: .08s; }
.contents .anim-box:nth-child(3){ animation-delay: .16s; }
.contents .anim-box:nth-child(4){ animation-delay: .24s; }
.contents .anim-box:nth-child(5){ animation-delay: .32s; }

.anim-box{
  opacity: 0;
  transform: translate(0,0);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.anim-box.is-animated{
  opacity: 1;
  filter: blur(0);
  transition: filter .55s cubic-bezier(0.25,1,0.5,1);
}

/* ===== AX Drop Motion (Sequential Landing & Stay) ===== */

/* --- 順番ディレイ設定 --- */
.contents .anim-box:nth-child(1){ --axDelay: 0s; }
.contents .anim-box:nth-child(2){ --axDelay: 0.85s; }
.contents .anim-box:nth-child(3){ --axDelay: 1.70s; }
.contents .anim-box:nth-child(4){ --axDelay: 2.55s; }
.contents .anim-box:nth-child(5){ --axDelay: 3.40s; }


/* --- アニメーション指定（delay中も0%状態を維持するため “both”） --- */
.anim-box.slide-left-top.is-animated{
  animation: ax-in-drop-left 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--axDelay) both;
}

.anim-box.slide-right-top.is-animated{
  animation: ax-in-drop-right 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--axDelay) both;
}

/* 5つ目も左から入って落として止める */
.anim-box.slide-up.is-animated{
  animation: ax-in-drop-left 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--axDelay) both;
}


/* --- 左 → 中央（止） → ズドンと落ちて停止 --- */
@keyframes ax-in-drop-left{
  0%{
    transform: translate(-50vw,-15vh);
    opacity: 0;
  }
  55%{
    transform: translate(0,0);
    opacity: 1;
  }
  75%{
    transform: translate(0,72px);
    opacity: 1;
  }
  100%{
    transform: translate(0,72px);
    opacity: 1;
  }
}


/* --- 右 → 中央（止） → ズドンと落ちて停止 --- */
@keyframes ax-in-drop-right{
  0%{
    transform: translate(50vw,-15vh);
    opacity: 0;
  }
  55%{
    transform: translate(0,0);
    opacity: 1;
  }
  75%{
    transform: translate(0,72px);
    opacity: 1;
  }
  100%{
    transform: translate(0,72px);
    opacity: 1;
  }
}


/* ========== 6) Footer ========== */
.site-footer {
  width: 100%;
  min-height: 200px;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0 20px 0;
  color: #fff;
  position: relative;
  z-index: 2;
}
.footer-content {
  text-align: center;
}
.footer-logo {
  max-width: 125px;
  height: auto;
  margin-bottom: 10px;
}
.footer-copy {
  font-size: 14px;
  color: #FFF;
}

/* ========== 7) Responsive: Tablet ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  .contents{
    width: min(820px, 90%);
    margin: 0 auto;
    padding: 110px 0 90px;
    gap: 36px;
  }

  .content-btn{
    padding: 30px 30px;
    min-height: 150px;
    border-radius: 20px;
  }

  .btn-title{ font-size: 22px; }
  .btn-sub{ font-size: 12px; letter-spacing: 0.16em; }
  .btn-desc{ font-size: 14px; }
}

/* ========== 8) Responsive: PC Luxury Stage ========== */
@media (min-width: 1025px) {
  .contents{
    width: min(820px, 88%);
    margin: 0 auto;
    padding: 160px 0 140px;
    gap: 60px;
  }

  .content-btn{
    min-height: 180px;
    padding: 46px 48px;
    border-radius: 22px;

    border: 1px solid rgba(255,255,255,0.18);

    background: linear-gradient(
      135deg,
      rgba(0,0,0,0.75) 0%,
      rgba(139,0,0,0.45) 50%,
      rgba(0,0,0,0.85) 100%
    );

    box-shadow:
      0 30px 80px rgba(0,0,0,0.65),
      0 0 35px rgba(139,0,0,0.28),
      inset 0 1px 0 rgba(255,255,255,0.12);

    backdrop-filter: blur(4px);
  }

  .btn-title{
    font-size: 26px;
    letter-spacing: 0.05em;
    text-shadow: 0 0 22px rgba(139,0,0,0.22);
  }

  .btn-sub{
    font-size: 13px;
    letter-spacing: 0.18em;
    opacity: 0.85;
  }

  .btn-desc{
    font-size: 14px;
    line-height: 2.0;
  }

  /* Stronger hover on PC */
  .content-btn:hover{
    transform: translateY(-8px) scale(1.01);
    box-shadow:
      0 40px 110px rgba(0,0,0,0.75),
      0 0 55px rgba(139,0,0,0.40),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }

  /* 5th item climax */
  .contents .content-btn:nth-child(5){
    min-height: 210px;
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow:
      0 40px 120px rgba(0,0,0,0.80),
      0 0 70px rgba(139,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }
}

/* ========== 9) Mobile video stability (keep) ========== */
@media (max-width: 768px){
  .bg-video{
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }

  .catchcopy{
    font-size: 16vw;
  }

  .logo{
    max-width: 200px;
    height: auto;
    margin-bottom: 50px;
  }
  .dept-title{ font-size: 24px; }
}