/* Top page redesign for the Apps AI-led corporate mock direction. */
body:has(.apps-home-hero) {
  background: #fff;
  color: #07122f;
}

body:has(.apps-home-hero) header {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
}

body:has(.apps-home-hero) header .container-site {
  height: 88px;
  max-width: 1240px;
}

body:has(.apps-home-hero) header a[aria-label="株式会社アップス トップページ"] > span {
  width: 156px;
  height: 57px;
}

body:has(.apps-home-hero) header nav > a[href="/contact/"] {
  border-radius: 8px !important;
  padding: 12px 18px !important;
  box-shadow: 0 12px 28px rgba(0, 91, 238, 0.22) !important;
}

main:has(> .apps-home-hero) {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 82% 20%, rgba(0, 111, 255, 0.09), transparent 26rem),
    linear-gradient(180deg, #fff 0%, #f8fbff 54%, #fff 100%);
}

.apps-home-hero ~ section:nth-of-type(3),
.apps-home-hero ~ section:nth-of-type(4),
.apps-home-hero ~ section:nth-of-type(5),
.apps-home-hero ~ section:nth-of-type(7) {
  display: none !important;
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid h3 {
  font-size: 22px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid p.mt-5 {
  display: none !important;
  text-transform: none !important;
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > .h-full > .flex.h-full > span.grid:first-child {
  position: relative;
  width: 100% !important;
  max-width: 314px !important;
  height: clamp(186px, 15vw, 204px) !important;
  margin: 0 auto !important;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 58% 20%, rgba(255, 255, 255, 0.88), transparent 34%),
    radial-gradient(circle at 36% 76%, rgba(24, 105, 220, 0.11), transparent 48%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.72)),
    linear-gradient(135deg, #fafdff 0%, #eef5fd 52%, #dce9f7 100%) !important;
  box-shadow: 0 14px 34px rgba(11, 31, 68, 0.055) !important;
  color: transparent !important;
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > .h-full > .flex.h-full > span.grid:first-child svg {
  display: none !important;
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > .h-full > .flex.h-full > span.grid:first-child::before {
  content: "";
  position: absolute;
  right: 11%;
  bottom: 15px;
  left: 11%;
  z-index: 1;
  height: 18px;
  border-radius: 999px;
  background: rgba(13, 30, 58, 0.05);
  filter: blur(16px);
  opacity: 0.14;
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > .h-full > .flex.h-full > span.grid:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: none;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-1.4deg);
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > :nth-child(1) > .flex.h-full > span.grid:first-child::after {
  width: 84%;
  height: 112px;
  background-image: url("/assets/brand/business-logo-apps-ai.png?v=20260617-business-logo-d5");
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > :nth-child(2) > .flex.h-full > span.grid:first-child::after {
  width: 76%;
  height: 118px;
  background-image: url("/assets/brand/business-logo-apps.png?v=20260617-business-logo-d5");
  transform: translate(-50%, -50%) rotate(-1.1deg);
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > :nth-child(3) > .flex.h-full > span.grid:first-child::after {
  width: 76%;
  height: 130px;
  background-image: url("/assets/brand/business-logo-apps-ventures.png?v=20260617-business-logo-d5");
  transform: translate(-50%, -50%) rotate(1deg);
}

.apps-home-hero ~ section:nth-of-type(2) .mt-12.grid > .h-full > .flex.h-full > h3 {
  margin-top: 24px !important;
}

.apps-home-hero ~ section:nth-of-type(2) .flex.flex-col.gap-3.items-center.text-center > span {
  text-transform: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .apps-home-hero ~ section:nth-of-type(2) .mt-12.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .apps-home-hero ~ section:nth-of-type(2) .mt-12.grid h3 {
    font-size: 22px !important;
  }
}

@media (min-width: 1024px) {
  .apps-home-hero ~ section:nth-of-type(2) .mt-12.grid h3 {
    font-size: clamp(22px, 2vw, 26px) !important;
  }
}

.apps-home-hero {
  position: relative;
  min-height: clamp(760px, calc(100svh - 88px), 900px);
}

.apps-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/brand/apps-ai-hero-visual-v2.webp");
  background-position: right -8px bottom 0;
  background-repeat: no-repeat;
  background-size: min(1180px, 96vw) auto;
}

.apps-home-hero .container-site.relative.grid {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  grid-template-columns: minmax(0, 650px) minmax(470px, 1fr) !important;
  gap: 18px !important;
  padding-top: clamp(80px, 9vh, 124px) !important;
  padding-bottom: clamp(56px, 7vh, 90px) !important;
}

.apps-home-hero .container-site.relative.grid > div:first-child {
  position: relative;
  z-index: 5;
  max-width: 650px !important;
}

.apps-home-hero h1 {
  margin-top: 0 !important;
  font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(42px, 4.1vw, 52px) !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

.apps-home-hero h1 + div,
.apps-home-hero p {
  font-size: clamp(16px, 1.45vw, 19px) !important;
  line-height: 2.05 !important;
  color: #071735 !important;
}

.apps-home-hero .mt-9 {
  margin-top: 46px !important;
}

.apps-home-hero .mt-9 a {
  min-width: 180px;
  border-radius: 8px !important;
  padding: 17px 25px !important;
  font-size: 18px !important;
}

.apps-home-hero .mt-9 a:first-child {
  background: #005cec !important;
  box-shadow: 0 18px 36px rgba(0, 91, 238, 0.22) !important;
}

.apps-home-hero .container-site.relative.grid > div:last-child {
  display: block !important;
}

.apps-home-hero .apps-home-visual {
  width: min(50vw, 700px) !important;
  height: min(54vw, 670px) !important;
  min-width: 470px;
  min-height: 590px;
  margin-right: -70px !important;
}

.apps-home-hero .apps-home-visual > div:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.apps-home-hero .grid.h-64.w-64.place-items-center.rounded-\[2\.5rem\] {
  display: block !important;
  position: absolute;
  inset: -44px 50px -58px -214px;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("/assets/brand/apps-ai-hero-visual-v2.webp") !important;
  background-position: right bottom 110px;
  background-repeat: no-repeat;
  background-size: 1060px auto;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.apps-home-hero .grid.h-64.w-64.place-items-center.rounded-\[2\.5rem\] > * {
  display: none !important;
}

.apps-home-hero .apps-home-visual > .absolute,
.apps-home-hero .apps-home-visual::before,
.apps-home-hero .apps-home-visual::after {
  position: absolute;
  z-index: 2;
  width: clamp(176px, 15vw, 228px);
  min-height: 92px;
  border: 1px solid rgba(146, 188, 255, 0.55);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 46px rgba(20, 67, 140, 0.14);
  backdrop-filter: blur(12px);
}

.apps-home-hero .apps-home-visual::before,
.apps-home-hero .apps-home-visual::after {
  width: 250px;
}

.apps-home-hero .apps-home-visual > .absolute span {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  padding: 22px 24px !important;
  font-size: 0 !important;
}

.apps-home-hero .apps-home-visual > .absolute span > span {
  display: none !important;
}

.apps-home-hero .apps-home-visual > .absolute span::before,
.apps-home-hero .apps-home-visual > .absolute span::after,
.apps-home-hero .apps-home-visual::before,
.apps-home-hero .apps-home-visual::after {
  white-space: pre-line;
}

.apps-home-hero .apps-home-visual > .absolute span::before {
  display: block;
  margin-bottom: 12px;
  color: #005cec;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.apps-home-hero .apps-home-visual > .absolute span::after {
  display: block;
  color: #233858;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(2) {
  top: 12px !important;
  right: 210px !important;
  bottom: auto !important;
  left: auto !important;
  transform: rotate(-2deg);
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(2) span::before {
  content: "整える";
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(2) span::after {
  content: "会社・商品・FAQをAIが扱える形に";
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(3) {
  top: 188px !important;
  left: -64px !important;
  right: auto !important;
  bottom: auto !important;
  transform: rotate(2deg);
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(3) span::before {
  content: "届ける";
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(3) span::after {
  content: "申込・決済・会員提供の流れを";
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(4) {
  top: 172px !important;
  right: 106px !important;
  bottom: auto !important;
  left: auto !important;
  transform: rotate(-2deg);
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(4) span::before {
  content: "育てる";
}

.apps-home-hero .apps-home-visual > .absolute:nth-of-type(4) span::after {
  content: "作り手とプロダクトに「売り先」を";
}

.apps-home-hero .apps-home-visual::before {
  content: "";
  display: none !important;
  left: 0;
  bottom: 52px;
  padding: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iOTIiIHZpZXdCb3g9IjAgMCAyNTAgOTIiPjx0ZXh0IHg9IjI2IiB5PSIzNyIgZm9udC1mYW1pbHk9IkhpcmFnaW5vIFNhbnMsIFl1IEdvdGhpYywgTm90byBTYW5zIEpQLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE4IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMDA1Y2VjIj7ntpnntprmlLnlloQ8L3RleHQ+PHRleHQgeD0iMjYiIHk9IjY2IiBmb250LWZhbWlseT0iSGlyYWdpbm8gU2FucywgWXUgR290aGljLCBOb3RvIFNhbnMgSlAsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSI0MDAiIGZpbGw9IiMyMzM4NTgiPuODreOCsOOCkuimi+OBpuaUueWWhDwvdGV4dD48L3N2Zz4=") left top / 250px 92px no-repeat rgba(255, 255, 255, 0.86);
}

.apps-home-hero .apps-home-visual::after {
  content: "";
  display: none !important;
  right: 96px;
  bottom: 22px;
  padding: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iOTIiIHZpZXdCb3g9IjAgMCAyNTAgOTIiPjx0ZXh0IHg9IjI2IiB5PSIzNyIgZm9udC1mYW1pbHk9IkhpcmFnaW5vIFNhbnMsIFl1IEdvdGhpYywgTm90byBTYW5zIEpQLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE4IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMDA1Y2VjIj7lh7rlj6Pjgbjjga7mjqXntpo8L3RleHQ+PHRleHQgeD0iMjYiIHk9IjY2IiBmb250LWZhbWlseT0iSGlyYWdpbm8gU2FucywgWXUgR290aGljLCBOb3RvIFNhbnMgSlAsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGZvbnQtd2VpZ2h0PSI0MDAiIGZpbGw9IiMyMzM4NTgiPuS6i+alreOBq+WQiOOBhuWFiOOBuOa4oeOBmTwvdGV4dD48L3N2Zz4=") left top / 250px 92px no-repeat rgba(255, 255, 255, 0.86);
  transform: rotate(4deg);
}

.apps-home-news,
.apps-home-hero ~ section:nth-of-type(6) {
  order: 2;
  background: transparent !important;
  padding-top: 12px !important;
  padding-bottom: 72px !important;
}

.apps-home-news .container-site,
.apps-home-hero ~ section:nth-of-type(6) .container-site {
  max-width: 920px;
}

.apps-home-news .rounded-3xl,
.apps-home-hero ~ section:nth-of-type(6) .rounded-3xl {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.apps-home-news h2,
.apps-home-hero ~ section:nth-of-type(6) h2 {
  font-size: clamp(30px, 3.6vw, 42px) !important;
}

.apps-home-news a.group,
.apps-home-hero ~ section:nth-of-type(6) a.group {
  border-radius: 0 !important;
  background: transparent !important;
}

body:has(.apps-home-hero) footer {
  background: linear-gradient(135deg, #062a61 0%, #001936 100%) !important;
}

body:has(.apps-home-hero) footer a[aria-label="株式会社アップス トップページ"] > span {
  width: 168px;
  height: 61px;
}

body:has(.apps-home-hero) [style*="opacity:0"] {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 1023px) {
  body:has(.apps-home-hero) header .container-site {
    height: 72px;
  }

  body:has(.apps-home-hero) header a[aria-label="株式会社アップス トップページ"] > span {
    width: 122px;
    height: 45px;
  }

  .apps-home-hero .container-site.relative.grid {
    display: block !important;
    padding-top: 70px !important;
  }

  .apps-home-hero .container-site.relative.grid > div:last-child {
    display: none !important;
  }

  .apps-home-hero .mt-9 a {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .apps-home-hero h1 {
    font-size: clamp(34px, 9.1vw, 38px) !important;
    line-height: 1.48 !important;
  }

  .apps-home-hero h1 + div,
  .apps-home-hero p {
    line-height: 1.92 !important;
  }
}