/* =========================================================
   FTERA Hero only (PC first / rebuilt v2)
   ========================================================= */

.hero2026{
  padding: 0;
}

.heroShell{
  position: relative;
  border: 1px solid rgba(255,255,255,.40);
  border-bottom-color: rgba(17,19,24,.08);
  border-radius: 28px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 72px rgba(12,18,28,.10);
  overflow: hidden;
}

.heroStage{
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.heroImageLayer.heroQuadGrid{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  padding: 12px;
}

.heroQuadCard{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  box-shadow:
    0 8px 18px rgba(12,18,28,.08),
    inset 0 1px 0 rgba(255,255,255,.16);
  opacity: .90;
  transform: scale(.975);
  transition:
    transform .6s ease,
    opacity .6s ease,
    box-shadow .6s ease,
    border-color .6s ease,
    filter .6s ease;
}

.heroQuadCard img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: brightness(.94) contrast(.96);
}

.heroQuadCard.is-focus{
  opacity: 1;
  transform: scale(.992);
  border-color: rgba(255,255,255,.34);
  box-shadow:
    0 12px 28px rgba(12,18,28,.12),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.heroQuadCard::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.05));
}

/* フロートパネル：少し左、少し上 */
.heroFloatingCopy{
  position: absolute;
  z-index: 3;
  left: 41%;
  top: -2%;
  width: min(520px, calc(100% - 56px));
  transform: translateX(-50%);
}

.heroCard{
  position: relative;
  border: 1px solid rgba(255,255,255,.30);
  border-bottom-color: rgba(17,19,24,.08);
  border-radius: 28px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  box-shadow:
    0 14px 34px rgba(12,18,28,.07),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.heroCardArchitect{
  max-width: 520px;
}

.heroCard .leadArchitect{
  max-width: 30ch;
  margin-bottom: 14px;
}

.heroCard .ctaRow{
  margin-top: 14px;
}

.heroCard .heroMeta{
  margin-top: 16px;
}

.heroCard .microCard{
  margin-top: 16px;
}

/* 下チップは必ず見せる */
.heroBottomRail{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.chipsArchitect{
  max-width: 62%;
  justify-content: flex-end;
}

/* タブレット */
@media (max-width:1100px){
  .heroStage{
    aspect-ratio: 15 / 10;
  }

  .heroImageLayer.heroQuadGrid{
    gap: 10px;
    padding: 10px;
  }

  .heroFloatingCopy{
    width: min(460px, calc(100% - 40px));
    left: 41%;
    top: 0%;
  }

  .heroCard{
    padding: 20px;
    border-radius: 24px;
  }

  .heroCard .leadArchitect{
    max-width: 28ch;
    font-size: 15px;
    line-height: 1.72;
  }

  .heroMeta{
    grid-template-columns: 1fr 1fr;
  }

  .heroBottomRail{
    left: 14px;
    right: 14px;
    bottom: 10px;
  }

  .chipsArchitect{
    max-width: 68%;
  }
}

/* スマホは次フェーズで最適化、今回は破綻防止だけ */
@media (max-width:900px){
  .heroStage{
    aspect-ratio: auto;
    display: grid;
    gap: 10px;
  }

  .heroImageLayer.heroQuadGrid{
    position: relative;
    inset: auto;
    aspect-ratio: 1 / 1;
    gap: 8px;
    padding: 8px;
  }

  .heroFloatingCopy{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .heroCard{
    padding: 18px;
    border-radius: 22px;
  }

  .heroBottomRail{
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    justify-content: flex-start;
    pointer-events: auto;
    margin-top: 8px;
  }

  .chipsArchitect{
    max-width: none;
    justify-content: flex-start;
  }
}

/* =========================================================
   Hero compatibility layer migrated from style_new.css
   ========================================================= */

.heroShell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(255,255,255,.26), transparent 58%),
    radial-gradient(760px 360px at 88% 92%, rgba(17,19,24,.05), transparent 58%);
}

.heroCard::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(700px 280px at 14% 8%, rgba(255,255,255,.22), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%);
}

.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip{
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.44);
  background: rgba(30,36,48,.26);
  box-shadow: 0 10px 24px rgba(10,14,20,.16);
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.heroBottomRail{
  padding: 10px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width:1100px){
  .displayArchitect{
    max-width: none;
    font-size: clamp(30px, 8.8vw, 46px);
  }

  .leadArchitect{
    max-width: none;
    font-size: 15px;
    line-height: 1.8;
  }

  .ctaRow .btn{
    flex: 1;
  }

  .chip{
    color: var(--fg);
    background: rgba(255,255,255,.58);
    border-color: rgba(255,255,255,.36);
  }
}

/* =========================================================
   Desktop hero banded fix (2026-03-18)
   ========================================================= */

/* 標準的なPC・ノート */
@media (min-width:1101px) and (max-width:1399px){
  .heroStage{
    min-height: 780px;
  }

  .heroFloatingCopy{
    top: -3.5%;
  }

  .heroBottomRail{
    z-index: 4;
    bottom: 14px;
  }
}

/* 広めのデスクトップ */
@media (min-width:1400px){
  .heroStage{
    min-height: 860px;
  }

  .heroFloatingCopy{
    top: -5.5%;
  }

  .heroBottomRail{
    z-index: 4;
    bottom: 14px;
  }
}

/* =========================================================
   Desktop hero width expansion fix (2026-03-18)
   ========================================================= */
@media (min-width:1101px){
  .heroFloatingCopy{
    width: min(580px, calc(100% - 56px));
    left: 40%;
  }

  .heroCardArchitect{
    max-width: 580px;
  }

  .heroCard .leadArchitect{
    max-width: 36ch;
  }
}

/* =========================================================
   Desktop hero width expansion fix (2026-03-18)
   ========================================================= */
@media (min-width:1101px){
  .heroFloatingCopy{
    width: min(580px, calc(100% - 56px));
    left: 40%;
  }

  .heroCardArchitect{
    max-width: 580px;
  }

  .heroCard .leadArchitect{
    max-width: 36ch;
  }
}

/* =========================================================
   Desktop hero width expansion fix v2 (2026-03-18)
   ========================================================= */
@media (min-width:1101px){
  .heroFloatingCopy{
    width: min(640px, calc(100% - 56px));
    left: 39.5%;
  }

  .heroCardArchitect{
    max-width: 640px;
  }

  .heroCard .leadArchitect{
    max-width: 40ch;
  }
}

/* =========================================================
   Desktop short-height compact mode (2026-03-18)
   ========================================================= */
@media (min-width:1101px) and (max-height:900px){
  .heroStage{
    min-height: 820px;
  }

  .heroFloatingCopy{
    width: min(680px, calc(100% - 56px));
    left: 39.5%;
    top: -6%;
  }

  .heroCard{
    padding: 18px 20px;
  }

  .heroCardArchitect{
    max-width: 680px;
  }

  .displayArchitect{
    font-size: clamp(46px, 4.2vw, 56px);
    line-height: 1.02;
    margin-bottom: 10px;
  }

  .heroCard .leadArchitect{
    max-width: 42ch;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
  }

  .heroCard .ctaRow{
    margin-top: 10px;
  }

  .heroCard .heroMeta{
    margin-top: 12px;
  }

  .heroCard .microCard{
    margin-top: 12px;
  }

  .metaCard{
    padding: 12px;
  }

  .metaLabel{
    margin-bottom: 10px;
  }

  .microCard{
    padding: 14px;
  }

  .heroBottomRail{
    z-index: 4;
    bottom: 12px;
  }
}