@charset "UTF-8";

@import url("./TOP/index.css?v=20260902-future-growth-02");
@media (min-width: 768px) {
  .growth-pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.growth-service-title-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 116px;
  margin: 0 0 22px;
}

.growth-service-title-logo img {
  display: block;
  width: auto;
  height: 76px;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}

.growth-service-title-logo--featured img {
  height: 76px;
  max-width: 100%;
  max-height: none;
}

.growth-service-subtitle {
  display: block;
  margin-top: 8px;
  color: #31527d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.08em;
}

.growth-service-title-logo--tremo .growth-service-subtitle {
  color: #b5121b;
}

.growth-service-title-logo--formlink .growth-service-subtitle {
  color: #1268c8;
}

.growth-service-title-logo--dr-value .growth-service-subtitle {
  color: #a46a12;
}

.growth-service-title-logo--white-label .growth-service-subtitle {
  color: #24272c;
}

.growth-service-title-logo--optimization .growth-service-subtitle {
  color: #08795e;
}

.growth-service-title-logo--strategy .growth-service-subtitle {
  color: #60309a;
}

.growth-service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.growth-featured-service__visual img,
.growth-service-card__scene {
  opacity: 0.92;
}

.growth-inline-cta__description {
  max-width: 720px;
  margin: 12px 0 0;
  line-height: 1.8;
}

.growth-final-cta__description {
  max-width: 620px;
  margin: 16px 0 0;
  line-height: 1.8;
}
.growth-featured-service h4,
.growth-service-card h4 {
  min-height: 3.2em;
  margin: 0 0 14px;
  color: var(--growth-navy);
  font-family: var(--growth-serif);
  font-size: clamp(17px, 1.18vw, 20px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

@media (max-width: 767px) {
  .growth-pain-grid {
    grid-template-columns: 1fr;
  }

  .growth-service-title-logo {
    min-height: 94px;
    margin-bottom: 16px;
  }

  .growth-service-title-logo img,
  .growth-service-title-logo--featured img {
    width: auto;
    height: 58px;
    max-width: 100%;
    max-height: none;
  }

  .growth-service-subtitle {
    margin-top: 7px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  .growth-featured-service h4,
  .growth-service-card h4 {
    min-height: 0;
    font-size: 15px;
  }
}
@media screen and (min-width:768px){
  .growth-hero .growth-hero__content{
    transform:translateX(42px);
  }
}

@media screen and (min-width:768px) and (max-width:1100px){
  .growth-hero .growth-hero__content{
    transform:translateX(24px);
  }
}

@media screen and (max-width:767px){
  .growth-hero .growth-hero__content{
    transform:none;
  }
}


/* =========================================================
   2026-08-31 | TOP SERVICES — MOBILE VISUAL HIDE
   スマホ版のみ、各サービスCTA下のビジュアル画像を非表示
   PC / tablet は現状維持
   ========================================================= */
@media screen and (max-width:767px){
  .growth-services .growth-featured-service__visual,
  .growth-services .growth-service-card__media{
    display:none!important;
  }

  .growth-services .growth-featured-service,
  .growth-services .growth-service-card{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   2026-09-01 | TOP SERVICE NUMBER TYPOGRAPHY UNIFY
   Service 01〜06 を FORMLINK の Service 02 基準に統一
   ========================================================= */
.growth-services .growth-service-number{
  color:#8fb8e7!important;
  font-family:var(--growth-serif)!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.06em!important;
  text-transform:none!important;
}

@media screen and (max-width:767px){
  .growth-services .growth-service-number{
    font-size:12px!important;
  }
}


/* =========================================================
   2026-09-01 | AI STRATEGY LOGO OPTICAL SIZE ADJUST
   横長・細身のロゴのため、見た目の大きさを他サービスと揃える
   ========================================================= */
.growth-service-title-logo--strategy img{
  height:88px!important;
  max-width:100%!important;
}

@media screen and (max-width:767px){
  .growth-service-title-logo--strategy img{
    height:66px!important;
  }
}



/* =========================================================
   2026-09-09 | TOP MOBILE — NO-JS HERO GAP FIX
   TOP service-reveal JS is no longer used.
   Remove the viewport-height reservation that belonged to the
   animation, while preserving the current smartphone HERO layout.
   ========================================================= */
@media screen and (max-width:767px){

  /* The old reveal animation reserved almost one viewport for HERO.
     With JS removed this became a large empty area below the content. */
  .growth-page .growth-hero[data-top-reveal-hero],
  .growth-page .growth-hero,
  .growth-page .growth-hero__inner{
    height:auto!important;
    min-height:0!important;
  }

  /* Keep the HERO content in normal document flow and close the gap
     naturally after the SCROLL cue / stats area. */
  .growth-page .growth-hero{
    padding-bottom:20px!important;
  }

  .growth-page .growth-hero__mobile-scroll{
    margin-bottom:0!important;
  }

  /* The service hub overlay was controlled only by the removed JS.
     Do not keep its hidden 100svh animation layer alive. */
  .growth-page .top-service-reveal{
    display:none!important;
    position:static!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    opacity:0!important;
    transform:none!important;
    pointer-events:none!important;
  }

  /* SERVICES begins immediately after the normal-flow HERO. */
  .growth-page .growth-services[data-top-reveal-services]{
    margin-top:0!important;
  }
}


/* =========================================================
   2026-09-10 | TOP HERO — L.EVER BUSINESS-CARD GLASS FLOW
   名刺の「白 × 淡いブルー × 透明な流体ガラス」をHERO背景へ反映。
   既存のネットワーク / シティ / 光軌道レイヤーは停止し、
   HEROコンテンツ・実績・右側ビジュアルはそのまま維持する。
   ========================================================= */
.growth-page .growth-hero {
  background-color: #f7fbff !important;
  background-image: url("../img/top/top-hero-glass-flow-bg-v1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* 旧HERO背景演出を無効化して、新しい流体背景だけを見せる */
.growth-page .growth-hero::before,
.growth-page .growth-hero::after,
.growth-page .growth-hero__inner::before,
.growth-page .growth-hero__inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* テキスト周辺は背景画像自体の白い余白を活かす */
.growth-page .growth-hero__content {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .74) !important;
}

@media screen and (max-width: 900px) {
  .growth-page .growth-hero {
    background-position: 58% center !important;
    background-size: cover !important;
  }
}

@media screen and (max-width: 560px) {
  .growth-page .growth-hero {
    /* Mobile: move the glass-flow artwork downward so the blue streaks
       stay below the HERO copy while keeping the horizontal framing. */
    background-position: 61% center !important;
  }
}