/* ===========================================================
   Survitec Group Section — Embed Stylesheet
   for https://rfd.co.jp/about/

   全スタイルを .survitec 配下にスコープしているため、
   既存サイトのCSSと衝突しません。
   CSS変数も .survitec のみに定義（:root に汚染しません）。
   =========================================================== */

/* ---------- Root section + scoped tokens ---------- */
.survitec {
  /* Color: Background */
  --color-bg-primary: #F6F6F6;
  --color-bg-secondary: #1f242c;
  --color-bg-elevated: #2a3038;

  /* Color: Text */
  --color-text-primary: #1f242c;
  --color-text-secondary: #c5cbd3;
  --color-text-muted: #8a93a0;

  /* Color: Accent */
  --color-accent-primary: #f0810b;
  --color-accent-hover: #ff9433;

  /* Color: Border */
  --color-border-subtle: #2f3540;
  --color-divider: #3a414c;

  /* Typography */
  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-family-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-display: 40px;
  --font-size-display-pc: 80px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-base: 1.8;
  --letter-spacing-wide: 0.12em;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Layout */
  --container-max: 1120px;
  --container-padding-sp: 20px;
  --container-padding-pc: 40px;

  /* ---------- Section base ---------- */
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  padding: 0 0 4%;
  margin-bottom: 4%;
  margin-top: 4%;
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  box-sizing: border-box;
}

.survitec *,
.survitec *::before,
.survitec *::after {
  box-sizing: border-box;
}

/* ---------- Inner container ---------- */
.survitec .survitec__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding-sp);
  position: relative;
  z-index: 1;
}

/* ---------- Header ---------- */
.survitec .survitec__header {
  text-align: center;
  padding: 60px 0 90px;
  position: relative;
  overflow: hidden;
}
.survitec .survitec__header:before{
  background-image:linear-gradient(180deg,rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.7) 100%);
  content: "";
  display: block;
  position: absolute;
  top: 0 ;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode:multiply;
  z-index: 1;
}
.survitec .survitec__header .headbg{
  position: absolute;
  top: 0 ;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.survitec .survitec__header .headbg .himg{
  position: absolute;
  top: 0 ;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image:  url(../img/survitec-header_00005.jpg);
  background-size:cover;
  background-position: center;
}
.survitec .survitec__header .headbg .himg01{
  background-image:  url(../img/survitec-header_00005.jpg);
  animation: bgfade01 20.0s ease-in-out infinite;
  opacity: 1;
  z-index: 1;
}
.survitec .survitec__header .headbg .himg02{
  background-image:  url(../img/survitec-header_00002.jpg);
  animation: bgfade02 20.0s ease-in-out infinite;
  opacity: 0;
}
.survitec .survitec__header .headbg .himg03{
  background-image:  url(../img/survitec-header_00004.jpg);
  animation: bgfade03 20.0s ease-in-out infinite;
  opacity: 0;
}
.survitec .survitec__header .headbg .himg04{
  background-image:  url(../img/survitec-header_00007.webp);
  animation: bgfade04 20.0s ease-in-out infinite;
  opacity: 0;
}
@keyframes bgfade01 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 1;
  }
  25.0% {
    opacity: 0;
  }
  37.5% {
    opacity: 0;
  }
  50.0% {
    opacity: 0;
  }
  62.5% {
    opacity: 0;
  }
  75.0% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100.0% {
    opacity: 1;
  }
}
@keyframes bgfade02 {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 0;
  }
  25.0% {
    opacity: 1;
  }
  37.5% {
    opacity: 1;
  }
  50.0% {
    opacity: 0;
  }
  62.5% {
    opacity: 0;
  }
  75.0% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100.0% {
    opacity: 0;
  }
}
@keyframes bgfade03 {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 0;
  }
  25.0% {
    opacity: 0;
  }
  37.5% {
    opacity: 0;
  }
  50.0% {
    opacity: 1;
  }
  62.5% {
    opacity: 1;
  }
  75.0% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  100.0% {
    opacity: 0;
  }
}
@keyframes bgfade04 {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 0;
  }
  25.0% {
    opacity: 0;
  }
  37.5% {
    opacity: 0;
  }
  50.0% {
    opacity: 0;
  }
  62.5% {
    opacity: 0;
  }
  75.0% {
    opacity: 1;
  }
  87.5% {
    opacity: 1;
  }
  100.0% {
    opacity: 0;
  }
}
.survitec .survitec__label {
  display: inline-block;
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-family-en);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-accent-primary);
  background: transparent;
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
}

.survitec .survitec__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-family-en);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: #fff;
  background-color: transparent;
  padding-top: clamp(60px,25%,100px);
  background-image: url(../img/survitec-logo.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: clamp(120px,50%,200px);
}
.survitec .survitec__title:after {
  content: none;
}

.survitec .survitec__subtitle {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* ---------- Lead ---------- */
.survitec .survitec__lead {
  max-width: 840px;
  margin: 0 auto;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.survitec .survitec__lead p {
  margin: 0 0 15px;
  color: #fff;
  font-size: 14px;
}

.survitec .survitec__lead strong {
  /*
  color: var(--color-text-primary);
  */
  font-weight: var(--font-weight-bold);
  font-size: 120%;
  display:block;
}

/* ---------- Generic block ---------- */
.survitec .survitec__block {
  margin-bottom: var(--space-3xl);
}

.survitec .survitec__block-title {
  margin: 0 0 var(--space-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  background-color: transparent;
}

.survitec .survitec__block-sub {
  margin: 0 0 var(--space-xl);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

/* ---------- KPI grid ---------- */
.survitec .kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 2% 4% 40%;
    background-color: #fff;
  background-image: url(../img/survitec-world-map.webp);
  background-repeat: no-repeat;
  background-size: 90% auto;
  background-position: left bottom 3%;
}

.survitec .kpi-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-sm);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.survitec .kpi-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--color-accent-primary);
}

.survitec .kpi-value {
  display: block;
  font-family: var(--font-family-en);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text-secondary);
  letter-spacing: -0.02em;
}

.survitec .kpi-unit {
  font-size: 0.5em;
  color: var(--color-accent-primary);
  margin-left: 2px;
  vertical-align: top;
}

.survitec .kpi-label {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ---------- Heritage block ---------- */
.survitec .heritage-block {
  padding-top: 5%;
}

.survitec .heritage-eyebrow {
  margin: 0 0 var(--space-md);
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-accent-primary);
  text-transform: uppercase;
}

.survitec .heritage-text {
  margin: 0;
  color: var(--color-text-primary);
}

/* ---------- Domains grid ---------- */
.survitec .domain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.survitec .domain-card {
  position: relative;
  padding: var(--space-xl);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.survitec .domain-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
}

.survitec .domain-card--primary {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

.survitec .domain-en {
  margin: 0;
  font-family: var(--font-family-en);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  letter-spacing: 0.02em;
}

.survitec .domain-ja {
  margin: var(--space-xs) 0 var(--space-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.survitec .domain-desc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.survitec .domain-badge {
  display: inline-block;
  margin: var(--space-md) 0 0;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-primary);
  background-color: var(--color-accent-primary);
  border-radius: var(--radius-sm);
}

/* ---------- Closing block ---------- */
.survitec .survitec__closing {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  border-radius: var(--radius-lg);
}

.survitec .closing-title {
  padding: 0 0 15px;
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  background: none;
}
.survitec .closing-title:after{
  content: none;
}

.survitec .closing-text {
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  text-align: left;
}

.survitec .closing-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-primary);
  background-color: var(--color-accent-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.survitec .closing-cta:hover,
.survitec .closing-cta:focus {
  background-color: var(--color-accent-hover);
  color: var(--color-bg-primary);
  text-decoration: none;
}

.survitec .closing-cta-arrow {
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-bold);
  transition: transform 0.2s ease;
}

.survitec .closing-cta:hover .closing-cta-arrow {
  transform: translateX(4px);
}
@media (max-width: 767px) {
  .nosp{
    display: none;
  }
}
/* ===========================================================
   Tablet (768px – 1023px)
   =========================================================== */
@media (min-width: 768px) {
  .sp{
    display: none;
  }
  .survitec .survitec__title {
    font-size: 44px;
  }

  .survitec .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-right: 53%;
    padding-left: 3%;
  background-size: auto 85%;
  background-position: right 3% center;
  }

  .survitec .survitec__lead strong {
    display:inline;
  }
  .survitec .domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================================================
   PC (1024px+)
   =========================================================== */
@media (min-width: 1024px) {
  .sp{
    display: none;
  }
  .survitec {
  }

  .survitec .survitec__inner {
    padding: 0 var(--container-padding-pc);
  }

  .survitec .survitec__header {
  }
  .survitec .survitec__title {
    font-size: 56px;
  }

  .survitec .survitec__subtitle {
    font-size: var(--font-size-lg);
  }

  .survitec .survitec__lead {
    font-size: var(--font-size-lg);
  }
  .survitec .survitec__lead strong {
    display:inline;
  }
  .survitec .survitec__block {
    margin-bottom: var(--space-4xl);
  }

  .survitec .survitec__block-title {
    /*
    font-size: var(--font-size-3xl);
    */
  }

  .survitec .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  background-size: auto 85%;
  background-position: right 3% center;
  }

  .survitec .kpi-tile {
    padding: var(--space-lg);
  }

  .survitec .kpi-tile::before {
    width: 64px;
    height: 4px;
  }

  .survitec .kpi-value {
    font-size: 5.5vw;
  }

  .survitec .kpi-label {
    margin-top: var(--space-xs);
    font-size: var(--font-size-md);
  }

  .survitec .heritage-block {
  }

  .survitec .heritage-text {
  }

  .survitec .domain-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .survitec .closing-title {
    font-size: var(--font-size-3xl);
  }
}