/* =========================================================
   Web制作ページのPC・モバイル最終調整
========================================================= */

/* =========================================================
   SF39 | assets/css/pages/web-production-polish.css
========================================================= */

/* =========================================================
   Capability band
========================================================= */

body .sf-web-production .sf-web-capabilities {
  display: grid !important;

  grid-template-columns: repeat(5,minmax(0,1fr)) !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

body .sf-web-production .sf-web-capabilities span {
  min-width: 0;

  box-sizing: border-box;
}

/* =========================================================
   SELECTED WORKS: override article-wide spacing only inside #works
========================================================= */

body .sf-web-production #works > .sf-web-section-en {
  margin: 0 0 18px !important;
  padding: 0 !important;

  min-height: 0 !important;
}

body .sf-web-production #works > h2 {
  margin: 0 0 22px !important;
  padding-top: 0 !important;
  padding-bottom: 18px !important;

  min-height: 0 !important;

  line-height: 1.5 !important;
}

body .sf-web-production #works > .sf-web-section-intro {
  margin: 0 !important;

  line-height: 1.9 !important;
}

body .sf-web-production #works .sf-web-works-showcase {
  display: grid !important;

  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 22px !important;

  margin-top: 30px !important;

  align-items: stretch;
}

body .sf-web-production #works .sf-web-project-card {
  display: flex !important;

  flex-direction: column !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

body .sf-web-production #works .sf-web-project-visual {
  display: block !important;

  flex: 0 0 auto !important;

  aspect-ratio: 16/8.6 !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;
}

body .sf-web-production #works .sf-web-project-visual img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover;
}

body .sf-web-production #works .sf-web-project-copy {
  display: flex !important;

  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 26px 27px 24px !important;
}

body .sf-web-production #works .sf-web-project-meta {
  display: flex !important;

  justify-content: space-between !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  flex: none !important;
}

body .sf-web-production #works .sf-web-project-meta > span {
  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;
}

body .sf-web-production #works .sf-web-project-card h3 {
  height: auto !important;
  min-height: 0 !important;

  margin: 0 0 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  font-size: clamp(18px,1.65vw,23px) !important;
  line-height: 1.5 !important;

  flex: none !important;
}

body .sf-web-production #works .sf-web-project-card p {
  height: auto !important;
  min-height: 0 !important;

  margin: 0 0 22px !important;
  padding: 0 !important;

  font-size: 14px !important;
  line-height: 1.9 !important;

  flex: none !important;
}

body .sf-web-production #works .sf-web-project-link {
  display: flex !important;

  justify-content: space-between !important;
  align-items: center !important;

  min-height: 0 !important;

  margin: auto 0 0 !important;
  padding: 16px 0 0 !important;

  flex: none !important;
}

@media (max-width:980px) {
  body .sf-web-production #works .sf-web-works-showcase {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:767px) {
  body .sf-web-production .sf-web-capabilities {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  body .sf-web-production .sf-web-capabilities span:last-child {
    grid-column: 1/-1;
  }

  body .sf-web-production #works .sf-web-works-showcase {
    grid-template-columns: 1fr !important;
    gap: 18px !important;

    margin-top: 24px !important;
  }

  body .sf-web-production #works .sf-web-project-visual {
    aspect-ratio: 16/9.2 !important;
  }

  body .sf-web-production #works .sf-web-project-copy {
    padding: 21px 20px 22px !important;
  }

  body .sf-web-production #works .sf-web-project-card h3 {
    font-size: 21px !important;
  }

  /* =========================================================
     Existing v1.17.85 mobile HERO
  ========================================================= */

  body .sf-raw-page .sf-web-production {
    padding-top: 0 !important;
    padding-inline: 10px !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    min-height: 0 !important;

    margin: 8px 0 0 !important;
    padding: 224px 0 0 !important;

    overflow: hidden !important;

    background: var(--studio-paper) !important;
    border: 1px solid #d8cfc1 !important;
    border-bottom: 3px solid var(--studio-coral) !important;
    box-shadow: 0 12px 30px rgba(21,85,91,.10) !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    display: block !important;
    inset: 0 0 auto 0 !important;

    width: 100% !important;
    height: 224px !important;

    background: url("../../images/web-production-bright-studio-hero.webp") 66% center/cover no-repeat !important;
    border: 0 !important;
    border-bottom: 3px solid var(--studio-coral) !important;

    pointer-events: none;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency::after {
    display: none !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-content {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 30px 22px 32px !important;

    color: var(--studio-abyss) !important;
    background: var(--studio-paper) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;

    text-shadow: none !important;
  }

  body .sf-web-production .sf-web-hero-agency .sf-web-hero-new-label {
    margin: 0 0 20px !important;
  }

  body .sf-web-production .sf-web-hero-agency .sf-web-hero-new-title {
    max-width: 100% !important;

    margin: 0 0 18px !important;

    color: var(--studio-abyss) !important;

    font-size: clamp(27px,8.2vw,34px) !important;
    line-height: 1.48 !important;
    letter-spacing: .015em !important;
  }

  body .sf-web-production .sf-web-hero-agency .sf-web-hero-new-title span {
    display: inline !important;

    white-space: normal !important;
  }

  body .sf-web-production .sf-web-hero-agency .sf-web-hero-new-line {
    margin-bottom: 22px !important;
  }

  body .sf-web-production .sf-web-hero-agency .sf-web-hero-new-lead {
    margin-bottom: 15px !important;

    color: var(--studio-petrol) !important;

    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  body .sf-web-production .sf-web-hero-agency .sf-web-hero-new-description,
  body .sf-web-production .sf-web-hero-agency .sf-web-hero-new-description p {
    color: #587074 !important;

    font-size: 13px !important;
    line-height: 1.9 !important;
  }

  body .sf-web-production .sf-web-hero-actions {
    display: grid !important;

    grid-template-columns: 1fr !important;
    gap: 10px !important;

    margin-top: 24px !important;
  }

  body .sf-web-production .sf-web-hero-action {
    width: 100% !important;
    min-height: 52px !important;
  }

  body .sf-web-production .sf-web-capabilities {
    margin-top: 0 !important;
  }
}

@media (max-width:390px) {
  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency {
    padding-top: 205px !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency::before {
    height: 205px !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-content {
    padding: 27px 19px 29px !important;
  }
}

/* =========================================================
   Existing v1.17.86 title lock
========================================================= */

@media (min-width:768px) {
  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-content {
    width: min(52%,620px) !important;
    max-width: 620px !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-title {
    max-width: none !important;

    font-size: clamp(30px,3.05vw,42px) !important;
    line-height: 1.5 !important;
    letter-spacing: .005em !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-title span {
    display: block !important;

    white-space: nowrap !important;
  }
}

@media (min-width:768px) and (max-width:980px) {
  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-content {
    width: 58% !important;

    padding-inline: 34px !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-title {
    font-size: 29px !important;
  }
}

@media (max-width:767px) {
  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-title {
    font-size: clamp(23px,7.2vw,30px) !important;
    line-height: 1.55 !important;
  }

  body .sf-web-production .sf-web-hero-new.sf-web-hero-agency .sf-web-hero-new-title span {
    display: block !important;

    white-space: nowrap !important;
  }
}