/* ==========================================================================
   corporate-top.css — コーポレート TOP ページ固有スタイル（モバイルファースト）
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout: site-header がヒーロー上にオーバーレイ
   -------------------------------------------------------------------------- */
.page {
  position: relative;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-fixed);
  background-color: transparent;
}

.site-header[data-color="light"] {
  color: var(--color-white);
}

.site-header[data-color="light"] .site-header__actions .text-link {
  color: var(--color-white);
}

.site-header[data-color="light"] .site-header__actions .text-link:hover {
  color: var(--color-white);
  opacity: 0.9;
}

.site-header[data-color="dark"] {
  color: var(--color-gray-800);
}

.site-header[data-color="dark"] .site-header__logo img {
  filter: brightness(0);
}

.site-header[data-color="dark"] .site-header__actions .text-link {
  color: var(--color-gray-800);
}

.site-header[data-color="dark"] .site-header__actions .text-link:hover {
  color: var(--color-gray-800);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Layout: hero + important-notice
   -------------------------------------------------------------------------- */
.corporate-hero+.important-notice {

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    margin-block-start: 100px;
  }
}

/* --------------------------------------------------------------------------
   Block: corporate-hero
   -------------------------------------------------------------------------- */
.corporate-hero {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  min-height: 100lvh;

  .corporate-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .corporate-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .corporate-hero__logo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .corporate-hero__logo img {
    width: 200px;
    height: 28px;
    max-width: none;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }


  html[data-viewport="tablet"] & .corporate-hero__logo img,
  html[data-viewport="desktop"] & .corporate-hero__logo img {
    width: min(39vw, 557px);
    max-width: min(39vw, 557px);
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Section: brand-lineup（Figma: Bland Lineup）
   -------------------------------------------------------------------------- */
.section[data-type="brand-lineup"] {
  .section__inner {
    gap: 22px;
  }
}

/* --------------------------------------------------------------------------
   Block: brand-lineup
   -------------------------------------------------------------------------- */
.brand-lineup {
  --brand-card-media-image-height-desktop: clamp(140px, 18vw, 252px);

  display: flex;
  flex-direction: column;
  margin-top: 70px;
  padding-bottom: 56px;
  /* 飛び出した画像の高さ */

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    margin-top: 100px;
    padding-bottom: calc(var(--brand-card-media-image-height-desktop) / 252 * 138);
  }
}

/* --------------------------------------------------------------------------
   Block: brand-card（Figma: Boreca / Seibu Fitness Club）
   -------------------------------------------------------------------------- */
.brand-card {
  position: relative;
  width: 100%;
  color: var(--color-white);

  --brand-card-media-image-height-mobile: clamp(108px, 28vw, 160px);
  --brand-card-media-image-height-desktop: clamp(140px, 18vw, 252px);
  --brand-card-media-image-height-desktop-lg: clamp(270px, 33vw, 428px);

  &+.brand-card {
    margin-top: 103px;
  }

  .brand-card__kicker,
  .brand-card__name,
  .brand-card__location,
  .brand-card__description {
    color: var(--color-white);
  }

  &[data-brand="boreca"] {
    background-color: var(--color-main);
  }

  &[data-brand="seibu-fitness"] {
    background-color: var(--color-seibu-main);
  }

  .text-link {
    color: var(--color-white);
  }

  .text-link:hover {
    color: var(--color-white);
    opacity: 0.9;
  }

  /* モバイル: スタックレイアウト・コンパクトなパディング */
  .brand-card__inner {
    position: relative;
    display: grid;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: 20px;
    /* .brand-card__media-image の高さに応じて動的に下paddingを調整（最小値: 画像高さ/2 + 44px） */
    padding-block-start: 40px;
    padding-block-end: max(calc(var(--brand-card-media-image-height-mobile, 0px) / 2 + 44px), 100px);
  }

  &[data-brand="boreca"] .brand-card__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }

  &[data-brand="seibu-fitness"] .brand-card__inner {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .brand-card__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Figma: H2 ENG 18p — tracking 5.4px */
  .brand-card__kicker {
    margin: 0;
    font-family: var(--font-accent-en);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-white);
  }

  /* wysiwyg h3 の ::before（左ボーダー）を無効化 */
  .brand-card__name::before {
    display: none;
  }

  /* モバイル: 可変フォントサイズ */
  .brand-card__name {
    margin: 0;
    display: block;
    font-family: var(--font-accent-en);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .brand-card__location {
    font-family: var(--font-heading-jp);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.9;
  }

  .brand-card__description {
    margin-block-start: 8px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0;
  }

  /* Figma: BORECA サービスアイコン（44px 枠、gap 12px） */
  .brand-card__service-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    margin-block-start: 24px;
    padding: 0;
    list-style: none;
  }

  .brand-card__service-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .brand-card__service-link:hover,
  .brand-card__service-link:focus-visible {
    opacity: 0.9;
  }

  .brand-card__service-link:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }

  .brand-card__service-link img {
    display: block;
    width: 44px;
    height: 44px;
  }

  .brand-card__body {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  .brand-card__actions {
    margin-top: 20px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.9;
  }

  .brand-card__action .text-link {
    letter-spacing: 0;
    font-size: 0.75rem;
  }

  .brand-card__cta {
    margin-top: 24px;
  }

  .brand-card__media {
    position: absolute;
    right: 0;
    bottom: -56px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
  }

  .brand-card__media-row {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 8px;
  }

  .brand-card__media-image {
    width: var(--brand-card-media-image-height-mobile);
    min-width: 0;
    height: var(--brand-card-media-image-height-mobile);
    object-fit: cover;
  }

  .brand-card__media[data-breakpoint="desktop"] {
    display: none;
  }

  /* モバイル: SEIBU ロケーションは1カラム */
  &[data-brand="seibu-fitness"] .brand-card__locations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block-end: 40px;
  }

  .brand-card__location-block {
    display: flex;
    flex-direction: column;
    gap: 0;
  }


  /* タブレット以上: デスクトップレイアウト */
  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    &+.brand-card {
      margin-top: calc(var(--brand-card-media-image-height-desktop) / 252 * 106 + 80px);
    }

    .brand-card__inner {
      padding-inline: 120px;
      padding-block-end: calc(var(--brand-card-media-image-height-desktop) / 252 * 138 + 80px);
    }

    &[data-brand="boreca"] .brand-card__inner {
      padding-block-end: 100px;
    }

    &[data-brand="seibu-fitness"] .brand-card__inner {
      padding-block-end: calc(var(--brand-card-media-image-height-desktop) / 252 * 114 + 64px);
    }

    .brand-card__body {
      margin-top: 40px;
      flex-direction: row;
      gap: 40px;
    }

    &[data-brand="seibu-fitness"] .brand-card__location-block {
      margin-right: auto;
    }

    .brand-card__location-block {
      max-width: 384px;
    }

    /* モバイル用メディアは非表示、デスクトップ用を表示 */
    .brand-card__media[data-breakpoint="mobile"] {
      display: none;
    }

    .brand-card__media[data-breakpoint="desktop"] {
      display: flex;
    }

    .brand-card__media {
      bottom: calc(var(--brand-card-media-image-height-desktop) / 252 * 138 * -1);
    }

    .brand-card__media-inner {
      display: flex;
      flex-direction: column;
      gap: 32px;
      top: 100px;
    }

    .brand-card__media-row {
      gap: 32px;
    }

    .brand-card__media-image {
      width: auto;
      height: var(--brand-card-media-image-height-desktop);
      aspect-ratio: 414 / 252;
    }

    .brand-card__media-image[data-size="lg"] {
      height: var(--brand-card-media-image-height-desktop-lg);
      aspect-ratio: 290 / 428;
    }

    .brand-card__name {
      line-height: 1.2;
      font-size: 3.125rem;
    }

    .brand-card__location {
      font-size: 1.375rem;
    }

    .brand-card__description {
      font-size: 1rem;
    }

    .brand-card__actions {
      gap: 10px;
    }

    .brand-card__action .text-link {
      font-size: 0.8125rem
    }
  }
}

/* --------------------------------------------------------------------------
   Layout: section[brand-lineup] + news（corporate トップ）
   -------------------------------------------------------------------------- */
.section[data-type="brand-lineup"]+.news {
  margin-block-start: 120px;
}

html[data-viewport="mobile"] .section[data-type="brand-lineup"]+.news {
  margin-block-start: 120px;
}

/* --------------------------------------------------------------------------
   Block: company（Figma: 運営会社・採用情報 / COMPANY）
   モバイル: ヘッダー→テキスト→(リンク|メディア)
   タブレット以上: 2カラム（左=ヘッダー+コンテンツ、右=メディア）
   -------------------------------------------------------------------------- */
.company {
  margin-block-start: 120px;
  background-color: var(--color-main-light);
  padding-block: 112px;

  /* モバイルファースト: ベース = モバイル */
  .company__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px 16px;
    align-items: start;
    padding-inline: 20px;
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .section-title {
    grid-column: 1 / -1;
  }

  /* Figma: B2 JP 16p — Zen Kaku Gothic New, 16px, line-height 1.9 */
  .company__text {
    margin: 0;
    grid-column: 1 / -1;
    max-width: 384px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0;
    color: var(--color-gray-800);
  }

  .company__links {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    grid-column: 1;
    grid-row: 3;
  }

  /* Figma: boreca_button_下線 — 18px Medium, uppercase, 常時下線 */
  .company__links .text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 2.5;
    letter-spacing: 0;
    color: var(--color-gray-800);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-800);
  }

  .company__links .text-link::after {
    display: none;
  }

  .company__media {
    position: relative;
    padding-right: 29px;
    padding-bottom: 29px;
    width: fit-content;
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    align-self: center;
  }

  /* Figma: image-access 1 — モバイル: 150×96px、タブレット以上: 368×236px */
  .company__image-main {
    position: relative;
    z-index: 1;
    max-width: 150px;
    aspect-ratio: 368 / 236;
    overflow: hidden;
  }

  /* Figma: image-access 2 — 緑アクセントブロック（モバイル: 150×96px、右下オフセット） */
  .company__media::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: 150px;
    max-height: 96px;
    background-color: var(--color-main);
  }

  .company__image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* タブレット: text+links の2セルに対し、横に media を配置 */
  html[data-viewport="tablet"] & {
    .company__text {
      grid-column: 1;
      grid-row: 2;
    }

    .company__links {
      grid-row: 3;
    }

    .company__media {
      grid-column: 2;
      grid-row: 2 / 4;
      justify-self: center;
      align-self: center;
    }

    .company__image-main {
      max-width: 240px;
      max-height: 154px;
    }

    .company__media::after {
      max-width: 240px;
      max-height: 154px;
    }
  }

  /* デスクトップ */
  html[data-viewport="desktop"] & {
    .company__inner {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto auto;
      gap: 32px 80px;
      padding-inline: 120px;
    }

    /* 左列: サブタイトル → 見出し → 説明文 → リンク の順 */
    .section-title {
      grid-column: 1;
      grid-row: 1;
    }

    .company__text {
      grid-column: 1;
      grid-row: 2;
      margin-top: 24px;
    }

    .company__links {
      flex-direction: row;
      align-items: center;
      grid-column: 1;
      grid-row: 3;
      gap: 30px;
    }

    .company__links .text-link {
      font-size: 1.125rem;
    }

    .company__media {
      padding-right: 0;
      padding-bottom: 0;
      grid-column: 2;
      grid-row: 1 / -1;
      justify-self: center;
      align-self: center;
    }

    .company__media::after {
      right: -70px;
      bottom: -70px;
      max-width: 369px;
      max-height: 236px;
    }

    .company__image-main {
      max-width: 368px;
    }
  }
}