/* ==========================================================================
   components.css — ビルド生成（手編集しない）
   Source: components.entry.css  |  npm run build:components-css
   ========================================================================== */

/* ==========================================================================
   components/body-copy.css — ボディコピー（corporate）
   Figma: ボディコピー _Zen Kaku Gothic New_Regular_18_32
   - font-size: 1.125rem / line-height 1.78 / letter-spacing 0.0225rem
   - color: #454443 (Mono Dark Gray)
   ========================================================================== */

.body-copy {
  color: var(--color-gray-800);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.0225rem;
}

/* ==========================================================================
   components/breadcrumb.css — パンくずリスト（corporate）
   ==========================================================================
   Figma: TOP > NEWS
   - gap: 16px / フォント: 0.8125rem, line-height 1, letter-spacing 0.01625rem
   - 区切り: 右向き chevron（0.3125rem × 0.625rem）
   - 色: #454443 (Mono Dark Gray)
   ========================================================================== */

.breadcrumb {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline-start: 20px;
  font-family: var(--font-sans);
  overflow-x: auto;
  overflow-y: hidden;

  .breadcrumb__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumb__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 16px;
  }

  .breadcrumb__item:last-child {
    padding-right: 20px;
  }

  .breadcrumb__link,
  .breadcrumb__text {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01625rem;
    color: var(--color-gray-800);
    text-decoration: none;
  }

  .breadcrumb__link:hover {
    text-decoration: underline;
  }

  .breadcrumb__text {
    color: var(--color-gray-800);
  }

  .breadcrumb__item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 0.3125rem;
    height: 0.625rem;
    flex-shrink: 0;
    background-color: var(--color-gray-800);
    -webkit-mask-image: url("/site-assets/corporate/images/common/chevron-right.svg");
    mask-image: url("/site-assets/corporate/images/common/chevron-right.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }


  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    padding-inline: 42px;
  }

  html[data-viewport="desktop"] & {
    overflow-x: visible;
    overflow-y: visible;

    .breadcrumb__list {
      flex-wrap: wrap;
    }
  }
}

/* ==========================================================================
   components/page-title.css — ページタイトル（corporate）
   Figma: ページヘッダー（ご利用について / LEGAL）
   Mobile: kicker 14px / text 40-50px / gap 6px
   PC: kicker 22px / text 79px, line-height 100px, letter-spacing 13.43px / gap 22px
   - color: #454443 (Mono Dark Gray)
   ========================================================================== */

.page-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  margin-inline: 0;
  margin-block-end: 0;
  color: var(--color-gray-800);

  .page-title__text,
  &:not(:has(.page-title__text)) .page-title__kicker {
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.3125rem;
    text-transform: uppercase;
    text-decoration: none;
  }

  .page-title__kicker {
    margin: 0;
    font-family: var(--font-heading-jp);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0.08rem;
    text-decoration: none;
  }

  &:not(:has(.page-title__text)) .page-title__kicker {
    line-height: 1.35;
    font-size: 2rem;
    letter-spacing: 0.08rem;
  }

  .page-title__text {
    line-height: 1;
    font-family: var(--font-accent-en);
    font-size: 2.5rem;
  }

  &[data-tone="light"] {
    color: var(--color-white);
  }

  &[data-tone="light"] .page-title__kicker,
  &[data-tone="light"] .page-title__text {
    color: inherit;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    gap: 4px;

    &:not(:has(.page-title__text)) .page-title__kicker {
      font-size: 3.25rem;
      letter-spacing: 0.13rem;
    }

    .page-title__text {
      font-size: 4.9375rem;
      letter-spacing: 0.839375rem;
    }

    .page-title__kicker {
      font-size: 1.375rem;
    }
  }

  html[data-viewport="desktop"] & {
    &:not(:has(.page-title__text)) {
      padding-top: 40px;
    }
  }
}

/* ==========================================================================
   components/page-header.css — ページヘッダー（汎用コンポーネント）
   ==========================================================================
   責務:
   - 各ページのタイトル＋補足テキスト（body-copy など）を表示する汎用ブロック
   - brand の page-header に倣った構造
   ========================================================================== */

.page-header {
  background-color: var(--color-white);
  padding-block-start: 40px;
  padding-block-end: 20px;

  .page-header__inner {
    display: flex;
    flex-direction: column;
  }
}

/* ==========================================================================
   site-header.css — コーポレートサイト共通ヘッダー
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  width: 100%;
  background-color: var(--color-gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);

  .site-header__inner {
    position: relative;
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: 20px;
    padding-block: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .site-header__logo {
    flex-shrink: 0;
    display: block;
    width: 180px;
    height: 24px;
  }

  .site-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .site-header__actions {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.065rem;
    text-transform: uppercase;
    text-align: center;
  }

  .site-header__actions .text-link {
    color: var(--color-white);
    text-decoration: none;
  }

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

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .site-header__inner {
      padding-block: 32px;
      padding-inline: 42px 62px;
    }

    .site-header__actions .text-link {
      font-size: 0.8125rem;
    }
  }
}

/* ==========================================================================
   components/button.css — ボタン系コンポーネント（corporate 共通）
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 120px;
  padding: 7px 35px;
  border-radius: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.035rem;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;

  /* wysiwyg の外部リンクアイコンを打ち消し（コンポーネントは独自デザインのため） */
  &[target="_blank"]:not([href$=".pdf"])::after {
    content: none;
  }

  &[data-style="primary"] {
    background-color: var(--color-main);
    color: var(--color-white);
    border-color: var(--color-main);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--color-white);
        color: var(--color-main);
      }
    }
  }

  &[data-style="outline"] {
    background-color: var(--color-white);
    color: var(--color-main);
    border-color: var(--color-main);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--color-main);
        color: var(--color-white);
      }
    }
  }

  &[data-style="on-dark"] {
    background-color: var(--color-white);
    color: var(--color-gray-800);
    border-color: var(--color-white);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 0.9;
      }
    }
  }

  &[data-size="lg"] {
    min-width: 180px;
    padding-block: 13px;
  }

  &[data-size="sm"] {
    min-width: 100px;
    padding: 6px 16px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   components/section.css — セクションベースレイアウト（corporate 共通）
   ========================================================================== */

.section {
  .section__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-inline: 20px;
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .section__lead {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-gray-800);

    &[data-tone="light"] {
      color: var(--color-white);
    }
  }

  .section__footer-link {
    max-width: var(--content-max-width);
    margin: 40px auto 0;
    text-align: center;

    .text-link[data-icon="chevron"] {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.6;
      letter-spacing: 0.0625rem;
      color: var(--color-main);
    }
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .section__inner {
      gap: 38px;
      padding-inline: 120px;
    }

    .section__kicker {
      font-size: 1.2rem;
    }

    .section__lead {
      margin-top: 24px;
    }
  }
}

/* ==========================================================================
   components/section-title.css — セクション見出し（corporate 共通）
   Figma: boreca_section title
   ========================================================================== */

.section-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  color: var(--color-gray-800);

  .section-title__kicker {
    margin: 0;
    font-family: var(--font-heading-jp);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0;
  }

  .section-title__text {
    margin: 0;
    font-family: var(--font-accent-en);
    font-size: 3.125rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-gray-800);
    letter-spacing: 0.4196875rem;
    text-decoration: none;
    text-transform: uppercase;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    align-items: flex-start;
    gap: 8px;

    .section-title__kicker {
      font-size: 1.375rem;
    }

    .section-title__text {
      font-size: 4.9375rem;
      letter-spacing: 0.66310625rem;
    }
  }
}

/* ==========================================================================
   site-footer.css — 共通フッター（corporate 用）
   Figma BORECA CORPORATE_TOP に準拠
   モバイルファースト
   ========================================================================== */

.site-footer {
  position: relative;
  background-color: var(--color-gray-800);
  color: var(--color-white);
  padding-inline: 40px;
  padding-top: 80px;
  padding-bottom: 32px;
  font-size: 0.875rem;
  line-height: 1;

  .text-link {
    text-decoration: none;
  }

  .site-footer__upper {
    max-width: var(--content-max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .site-footer__upper-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .site-footer__logo img {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  .site-footer__shop-social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
  }

  .site-footer__shops .text-link {
    font-size: 0.875rem;
    color: var(--color-white);
  }

  .site-footer__social {
    display: flex;
    gap: 8px;
  }

  .site-footer__social img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
  }

  .site-footer__link-row {
    margin-top: 16px;
  }

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

  .site-footer__upper-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .site-footer__upper-right .site-footer__logo {
    display: block;
    margin: 0;
    text-decoration: none;
  }

  .site-footer__upper-right .site-footer__logo img {
    height: 20px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
  }

  .site-footer__sns-shops {
    display: flex;
    gap: 24px;
    margin-top: 24px;
  }

  .site-footer__shop-sns {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .site-footer__shop-sns span {
    font-size: 0.875rem;
    color: var(--color-white);
  }

  .site-footer__shop-sns img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
  }

  .site-footer__primary-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
  }

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

  .site-footer__divider {
    max-width: var(--content-max-width);
    margin-inline: auto;
    margin-block-start: 60px;
    padding-block-start: 60px;
    border-top: 1px solid var(--color-white);
  }

  .site-footer__lower {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding-inline: 20px;
  }

  .site-footer__lower-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .site-footer__boreca-logo {
    height: 50px;
  }

  .site-footer__boreca-logo img {
    height: 100%;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
  }

  .site-footer__copy {
    display: block;
    margin: 60px auto 0;
    max-width: var(--content-max-width);
    font-size: 0.875rem;
    color: var(--color-white);
    text-align: center;
  }

  .site-footer__nav-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .site-footer__nav-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

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

  .site-footer__decoration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(578px, 100vw);
    pointer-events: none;
  }

  .site-footer__decoration img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* tablet / desktop 向けの上書き */
  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    padding-inline: 120px;

    .site-footer__upper {
      flex-direction: row;
      align-items: flex-start;
      gap: 120px;
    }

    .site-footer__shop-social-row {
      flex-direction: row;
      margin-top: 30px;
    }

    .site-footer__link-row {
      margin-top: 20px;
    }

    .site-footer__sns-shops {
      margin-top: 30px;
    }

    .site-footer__shop-sns span {
      font-size: 0.875rem;
    }

    .site-footer__primary-links {
      margin-top: 20px;
      gap: 14px;
    }

    .site-footer__primary-links .text-link {
      font-size: 0.875rem;
    }

    .site-footer__lower {
      align-items: center;
      padding-inline: 0;
    }

    .site-footer__nav-groups {
      flex-direction: row;
      gap: 48px;
    }

    .site-footer__nav-group .text-link {
      font-size: 0.875rem;
    }
  }

  html[data-viewport="tablet"] & {
    .site-footer__lower {
      gap: 50px;
    }
  }

  html[data-viewport="desktop"] & {
    .site-footer__lower {
      flex-direction: row;
      gap: 98px;
    }

    .site-footer__copy {
      margin-block-start: 20px;
      text-align: left;
    }
  }
}

/* ==========================================================================
   components/text-link.css — テキストリンク（corporate 共通）
   ========================================================================== */

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-gray-800);
  text-decoration: underline;
  text-underline-offset: 3px;

  &[target="_blank"]:not([href$=".pdf"]):not(:has(.text-link__icon))::after {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: -0.175rem;
    width: 0.65625rem;
    height: 0.65625rem;
    background-color: currentColor;
    mask-image: url("/site-assets/corporate/images/common/icon-external.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("/site-assets/corporate/images/common/icon-external.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  &[href$=".pdf"]:not(:has(.text-link__icon))::before {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: -0.175rem;
    width: 0.63rem;
    height: 0.8225rem;
    background-color: currentColor;
    mask-image: url("/site-assets/corporate/images/common/icon-pdf.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("/site-assets/corporate/images/common/icon-pdf.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  html[data-viewport="desktop"] & {
    gap: 9px;
    font-size: 1.125rem;
    text-underline-offset: 4px;

    &[target="_blank"]:not([href$=".pdf"]):not(:has(.text-link__icon))::after {
      margin-bottom: -0.1125rem;
      width: 0.75rem;
      height: 0.75rem;
    }

    &[href$=".pdf"]:not(:has(.text-link__icon))::before {
      margin-bottom: -0.1125rem;
      width: 0.81rem;
      height: 1.0575rem;
    }

    .text-link__icon {
      width: 0.875rem;
      height: 0.875rem;
    }

    &[data-icon="external"] .text-link__icon,
    &[target="_blank"] .text-link__icon {
      width: 1.225rem;
      height: 1.225rem;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover::after {
      opacity: 0.6;
    }
  }

  .text-link__icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.125rem;
  }

  &[data-icon="external"] .text-link__icon,
  &[target="_blank"] .text-link__icon {
    width: 1.05rem;
    height: 1.05rem;
  }
}

/* ==========================================================================
   components/tag.css — タグコンポーネント（corporate 共通）
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  border: 1px solid var(--color-gray-800);
  color: var(--color-gray-800);
  background-color: var(--color-white);

  &[data-style="primary"] {
    background-color: var(--color-main);
    color: var(--color-white);
  }

  &[data-style="pale"] {
    background-color: var(--color-white);
  }
}

/* ==========================================================================
   components/key-message.css — キーメッセージブロック（corporate 共通）
   ========================================================================== */

.key-message {
  position: relative;
  z-index: 0;
  background-color: var(--color-white);
  overflow: hidden;

  .important-notice+& {
    margin-block-start: 80px;
  }

  &+.section {
    margin-block-start: 80px;
  }

  .key-message__inner {
    display: flex;
    justify-content: center;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: 20px;
    padding-block-start: 40px;
    padding-block-end: 40px;
  }

  .key-message__header {
    position: relative;
    z-index: 1;
    padding-top: 0;
  }

  .key-message__logo {
    display: flex;
    margin-top: 24px;
  }

  .key-message__logo img {
    display: block;
    width: 200px;
    height: auto;
    object-fit: contain;
  }

  .key-message__title {
    margin: 0;
    font-family: var(--font-heading-jp);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--color-gray-800);
    text-decoration: none;
  }

  .key-message__body {
    position: relative;
    z-index: 1;
    margin-top: 32px;
  }

  .key-message__lead {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0;
    color: var(--color-gray-800);
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .key-message__inner {
      padding-inline: 120px;
      padding-block-start: 80px;
      padding-block-end: 80px;
    }

    .key-message__header {
      text-align: center;
    }

    .key-message__logo {
      margin-top: 57px;
      justify-content: center;
    }

    .key-message__logo img {
      width: 560px;
    }

    .key-message__title {
      font-size: 2.0625rem;
      line-height: 1.7;
    }

    .key-message__body {
      margin-top: 56px;
      text-align: center;
    }

    .key-message__lead {
      font-size: 1.125rem;
      line-height: 2.1;
    }
  }
}

/* ==========================================================================
   components/important-notice.css — 重要なお知らせブロック（corporate 共通）
   ========================================================================== */

.important-notice {
  margin-top: 0;

  .important-notice__inner {
    max-width: min(792px, 100%);
    margin-inline: auto;
    background-color: var(--color-main-light);
    padding: 24px 28px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-direction: column;
  }

  .important-notice__header {
    flex-shrink: 0;
  }

  .important-notice__body {
    flex: unset;
    min-width: 0;
  }

  .important-notice__label {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-decoration: none;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .important-notice__inner {
      padding: 24px 40px;
    }

    .important-notice__body {
      flex: 1 0 0;
    }
  }

  html[data-viewport="desktop"] & {
    .important-notice__inner {
      flex-direction: row;
      align-items: center;
      gap: 40px;
    }
  }
}

/* --------------------------------------------------------------------------
   Block: notice-list
   -------------------------------------------------------------------------- */

.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 2;
  font-weight: 300;
  color: var(--color-gray-600);

  .notice-list__item {
    display: flex;
  }

  .notice-list__date {
    display: inline-block;
    min-width: 77px;
    font-family: var(--font-accent-en, var(--font-sans));
    font-size: 0.875rem;
    font-weight: 300;
    vertical-align: top;
  }

  .notice-list__text {
    margin: 0 0 0 8px;
    display: inline;
    font-size: 0.875rem;
    font-weight: 300;
  }

  html[data-viewport="desktop"] & {
    .notice-list__item+.notice-list__item {
      margin-top: 4px;
    }
  }
}

/* ==========================================================================
   components/link-card-list.css — リンクカードリストブロック（corporate 共通）
   ==========================================================================
   Figma: link-card-list
   - data-cols（カラム数 1〜4）
   - data-align="center"（アイテムが少ないとき中央寄せ）
   - data-has-border="true"（アイテム間にボーダーあり）
   ========================================================================== */

.link-card-list {
  display: grid;
  gap: 30px 24px;
  grid-template-columns: repeat(1, 1fr);
  list-style: none;
  padding: 0;

  &[data-cols="1"] {
    grid-template-columns: repeat(1, 1fr);
  }

  &[data-cols="2"] {
    grid-template-columns: repeat(2, 1fr);
  }

  &[data-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
  }

  &[data-cols="4"] {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --------------------------------------------------------------------------
     Align: data-align="center"（アイテムが少ないとき中央寄せ）
     flexbox で justify-content: center により中央寄せ
     -------------------------------------------------------------------------- */
  &[data-align="center"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  &[data-align="center"][data-cols="1"] .link-card-list__item {
    flex: 0 1 min(360px, 100%);
  }

  &[data-align="center"][data-cols="2"] .link-card-list__item {
    flex: 0 1 min(360px, calc((100% - 24px) / 2));
  }

  &[data-align="center"][data-cols="3"] .link-card-list__item {
    flex: 0 1 min(360px, calc((100% - 48px) / 3));
  }

  &[data-align="center"][data-cols="4"] .link-card-list__item {
    flex: 0 1 min(320px, calc((100% - 72px) / 4));
  }

  .link-card-list__item {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .link-card-list__item > * {
    flex: 1;
    min-height: 0;
  }

  /* --------------------------------------------------------------------------
     Border: data-has-border="true"（アイテム間にボーダーあり）
     -------------------------------------------------------------------------- */
  &[data-has-border="true"] {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: min(792px, 100%);
    margin-inline: auto;
  }

  &[data-has-border="true"] .link-card-list__item {
    border-top: 2px solid var(--color-gray-200);
  }

  &[data-has-border="true"] .link-card-list__item:last-child {
    border-bottom: 2px solid var(--color-gray-200);
  }

  /* --------------------------------------------------------------------------
     Responsive
     -------------------------------------------------------------------------- */
  html[data-viewport="mobile"] & {
    gap: 20px;
  }

  html[data-viewport="mobile"] &[data-cols="2"],
  html[data-viewport="mobile"] &[data-cols="3"],
  html[data-viewport="mobile"] &[data-cols="4"] {
    grid-template-columns: 1fr;
  }

  html[data-viewport="mobile"] &[data-align="center"] .link-card-list__item {
    flex: 0 1 100%;
  }
}

/* ==========================================================================
   components/link-card.css — リンクカードブロック（corporate 共通）
   ==========================================================================
   Figma: コーポレート link-card（会員システム規約一覧など）
   テキストのみ・画像なし・タイトル下線付き
   ========================================================================== */

.link-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  align-items: center;
  background-color: var(--color-main-light);

  /* wysiwyg の外部リンクアイコンを打ち消し（コンポーネントは独自デザインのため） */
  &[target="_blank"]:not([href$=".pdf"])::after {
    content: none;
  }

  .link-card__image {
    display: none;
  }

  .link-card__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 0;
    background-color: transparent;
  }

  .link-card__title {
    margin: 0;
    display: inline-block;
    border-bottom: 1px solid var(--color-gray-800);
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.9;
    text-align: center;
    color: var(--color-gray-800);
  }

  .link-card__description {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
    color: var(--color-gray-800);
    text-align: center;
  }

  /* --------------------------------------------------------------------------
     Responsive（Figma モバイル: PC と同じ 16px / 28px）
     -------------------------------------------------------------------------- */
}

/* ==========================================================================
   components/news.css — お知らせセクション（corporate 共通）
   ========================================================================== */

.news {
  .news__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-inline: 20px;
    max-width: var(--content-max-width);
    margin-inline: auto;

    html[data-viewport="tablet"] &,
    html[data-viewport="desktop"] & {
      padding-inline: 120px;
      gap: 38px;
    }
  }

  .news__footer-link {
    max-width: var(--content-max-width);
    margin: 40px auto 0;
  }

  .news__footer-link .text-link {
    font-size: 0.8125rem;
    line-height: 2.5;
    letter-spacing: 0.0625rem;
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-800);
  }

  .news-filter+.news-grid {
    margin-top: 20px;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .news-filter+.news-grid {
      margin-top: 40px;
    }

    .news__footer-link .text-link {
      font-size: 1.125rem;
      line-height: 2.5;
      letter-spacing: 0.0625rem;
      text-decoration: none;
      border-bottom: 1px solid var(--color-gray-800);
    }
  }
}

/* --------------------------------------------------------------------------
   Block: news-filter
   -------------------------------------------------------------------------- */

.news-filter {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: 24px;
  padding-block: 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;

  .news-filter__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
    min-width: auto;
  }

  .news-filter__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }

  .news-filter__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 28px;
  }

  .news-filter__label {
    flex: 0;
    min-width: calc(1.75rem + 16px);
    font-size: 0.875rem;
    border-right: 1px solid var(--color-black);
  }

  .news-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    align-items: center;
  }

  .news-filter__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-black);
    cursor: pointer;
  }

  .news-filter__option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0;
    border: 1px solid var(--color-black);
    background-color: transparent;
    display: inline-block;
    position: relative;
  }

  .news-filter__option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: var(--color-black);
  }

  html[data-viewport="desktop"] & {
    padding-inline: 60px;
    padding-block: 20px;
    flex-direction: row;
    align-items: center;
    gap: 60px;
    background-color: var(--color-main-light);
    border: none;

    .news-filter__title {
      min-width: 64px;
    }
  }
}

/* --------------------------------------------------------------------------
   Block: news-grid
   -------------------------------------------------------------------------- */

.news-grid {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 13px;

  html[data-viewport="desktop"] & {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 24px;
  }
}

/* --------------------------------------------------------------------------
   Block: news-card
   -------------------------------------------------------------------------- */

.news-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  text-decoration: none;

  .news-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #9b9b9b;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMSAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik05OC40NDE0IDQxLjYwMTVDOTYuMTM0MyAzNy45NDgyIDkyLjU0OCAzNS4yMjkgODcuNzgyOSAzMy41MjY2QzgyLjMwNjQgMzEuNTYwNiA3NS40OTMxIDMwLjk4MDYgNjguOTUyOSAzMS44NDY5QzY5Ljg4NzIgMjUuNzkxIDY5LjMzMzcgMTguOTg5MiA2Ny4zNSAxMy4yNzIxQzYyLjg3OTggMC4zNjkwODcgNTEuNzQ2OSAwIDUwLjQ5NjQgMEM0OS4xNzQgMCA0NS43MDk4IDAuMjQ4NTY5IDQyLjAxNTcgMi41MzA4OUMzOC4zMjg2IDQuODEzMTkgMzUuNTgzMiA4LjM2ODQ4IDMzLjg1ODMgMTMuMDgzOEMzMS44MSAxOC42ODAzIDMxLjE0MTYgMjUuNjMyNyAzMS45NDY2IDMxLjk1MjRDMjUuNjQzNSAzMC45NzMyIDE4LjkwOTIgMzEuNDQwMiAxMy40MDM5IDMzLjMwODJDMC4zNzM3MjggMzcuNzM3MyAwIDQ4Ljc1NzEgMCA1MEMwIDUxLjMxMDYgMC4yNTE1NDkgNTQuNzQ1NSAyLjU1ODYgNTguMzk4NUM0Ljg2NTY2IDYyLjA1MTggOC40NTIwMSA2NC43NzEgMTMuMjE3IDY2LjQ3MzRDMTcuMDQ3OCA2Ny44NDQyIDIxLjUzMjUgNjguNTQ0NyAyNi4xMjUgNjguNTQ0N0MyOC4wNTg0IDY4LjU0NDcgMzAuMDEzMiA2OC40MTY2IDMxLjkzOTQgNjguMTY4MUMzMS4xNTYgNzQuNDU3NyAzMS44MzE2IDgxLjM0OTggMzMuODY1NSA4Ni45MTYzQzM1LjU5MDUgOTEuNjMxNSAzOC4zMzU5IDk1LjE3OTIgNDIuMDIyOSA5Ny40NjkyQzQ1LjcwOTggOTkuNzUxNSA0OS4xODEyIDEwMCA1MC41MDM2IDEwMEM1MS43NjEyIDEwMCA2Mi44ODY5IDk5LjYzMSA2Ny4zNTczIDg2LjcyNzlDNjkuMzQ4IDgwLjk4MDYgNjkuODk0MyA3NC4xMzM3IDY4LjkzODQgNjguMDQ3NkM3MS4wODczIDY4LjM4NjYgNzMuMzAxIDY4LjU1OTggNzUuNTA3NCA2OC41NTk4Qzc5Ljc0MDUgNjguNTU5OCA4My45NDUgNjcuOTM0NyA4Ny41OTYxIDY2LjY5MThDMTAwLjYyNiA2Mi4yNjI3IDEwMSA1MS4yNDI5IDEwMSA1MEMxMDEgNDguNjg5NCAxMDAuNzQ4IDQ1LjI1NDcgOTguNDQxNCA0MS42MDg5VjQxLjYwMTVaTTM3LjYzODcgMTQuNDMyMUM0MS4yODI1IDQuNDc0MjQgNDguOTk0NCAzLjk2OTU2IDUwLjUwMzYgMy45Njk1NkM1MS40NjY2IDMuOTY5NTYgNTkuOTk3OCA0LjI2MzM0IDYzLjU2MjUgMTQuNTYwMUM2NS43NDAzIDIwLjg0OTcgNjUuOTk5IDI4LjU5MjkgNjQuMjIzOCAzNC43NjE5QzYxLjUyODYgNDQuMTU0OCA1NS43OTMzIDU3LjAyNzcgMzcuMjU3OSA2My4xMDYzQzM3LjgyNTYgNjEuMzM2MyAzOC4zNTAyIDU5Ljg5IDM4LjgxMDEgNTguNjQ3M0MzOS44NTI0IDU1LjgwNzQgNDAuNjc4OCA1My41NzAzIDQwLjg3MjkgNTAuMzE2M0M0MS4wODg2IDQ2LjY2MzIgNDAuMTE4MiA0NC4yMDc2IDM4Ljg4OTIgNDEuMDk2OEMzOC4wNjI3IDM5LjAxMDMgMzcuMTI4NCAzNi42NDUgMzYuMjA4NiAzMy4yMTAzQzM1LjA4NzQgMjcuMDYzOSAzNS42MTIgMTkuOTk4NSAzNy42NDYgMTQuNDMyMUgzNy42Mzg3Wk0xNC41ODI2IDYyLjcyOTdDNC41Mjc4NSA1OS4xMjE4IDQuMDE3NTcgNTEuNDkxNSA0LjAxNzU3IDQ5Ljk5MjRDNC4wMTc1NyA0OS4wNDM0IDQuMzE5NDQgNDAuNTkyMSAxNC43MTE5IDM3LjA2NjlDMTkuOTg3MyAzNS4yNzQyIDI2LjgyOTMgMzQuOTQyNyAzMi44NjY0IDM2LjE0NzlDMzMuNjcxNCAzOC44Mjk1IDM0LjQ3NjQgNDAuODU1NiAzNS4xNDQ5IDQyLjU1MDVDMzYuMzE2MyA0NS41MTgyIDM3LjAyNzkgNDcuMzAzNCAzNi44NjI2IDUwLjA5MDNDMzYuNzA0NCA1Mi43NjQ0IDM2LjA0MzEgNTQuNTY0NyAzNS4wMzY5IDU3LjI5ODlDMzQuMzk3NCA1OS4wNDY1IDMzLjYyMTEgNjEuMTYzMSAzMi43ODc1IDY0LjAyNTNDMjYuNTQxOSA2NS4wNDk3IDE5Ljc0MyA2NC41OTAyIDE0LjU4MjYgNjIuNzM3M1Y2Mi43Mjk3Wk02My41NjI1IDg1LjQzMjRDNTkuOTk3OCA5NS43MjE2IDUxLjQ2NjYgOTYuMDIyOSA1MC41MDM2IDk2LjAyMjlDNDguOTk0NCA5Ni4wMjI5IDQxLjI4MjUgOTUuNTE4MiAzNy42Mzg3IDg1LjU2MDVDMzUuNjk4MiA4MC4yNSAzNS4xMzA0IDczLjU2ODkgMzYuMDU3NiA2Ny42MjU4QzQ1LjU4NzcgNjQuOTM2OCA1My4yMjAyIDYwLjMzNDUgNTguNzYxNiA1My45MTY4QzU4LjkwNTIgNTMuNzUxMSA1OS4wNDE4IDUzLjU3NzkgNTkuMTg1NSA1My40MTIxQzYxLjI2OTkgNTYuODAxOCA2Mi45MjI4IDYwLjY4ODQgNjQuMjMwOSA2NS4yMjI5QzY2LjAwNjEgNzEuMzkxOSA2NS43NDc0IDc5LjEzNTMgNjMuNTY5NyA4NS40MjQ4TDYzLjU2MjUgODUuNDMyNFpNODYuMjk1MyA2Mi45MjU2QzgwLjk0MDggNjQuNzQwOCA3My45ODM3IDY1LjA1NzMgNjcuOTk3IDYzLjgyMTlDNjYuNDMwMiA1OC40NzM5IDY0LjM4MTggNTMuOTMxOSA2MS43NTE0IDUwQzY0LjQxMDYgNDYuMDE1MyA2Ni40ODc3IDQxLjM5ODEgNjguMDQ3MiAzNi4wMTI0Qzc0LjM0MzEgMzQuOTUwMyA4MS4yMjExIDM1LjQwMjMgODYuNDMxNyAzNy4yNzAzQzk2LjQ4NjQgNDAuODc4MiA5Ni45OTY4IDQ4LjUwODUgOTYuOTk2OCA1MC4wMDc2Qzk2Ljk5NjggNTAuOTU2NiA5Ni42OTQ5IDU5LjQwNzkgODYuMzAyNCA2Mi45MzMxTDg2LjI5NTMgNjIuOTI1NloiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30% auto;
  }

  .news-card__image img {
    width: 100%;
    aspect-ratio: 384 / 214;
    height: auto;
    object-fit: cover;
  }

  /* メタ行: カテゴリ + 区切り + 日付（Figma デザイン準拠） */
  .news-card__meta {
    order: 1;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .news-card__category {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-deep-green);
  }

  .news-card__category+.news-card__date::before {
    content: "";
    display: inline-block;
    width: 0.25rem;
    height: 0.0625rem;
    margin-inline-end: 8px;
    margin-block-end: 3px;
    vertical-align: middle;
    background-color: var(--color-gray-400);
  }

  .news-card__date {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-gray-500);
  }

  /* タグ行（メタ行の下） */
  .news-card__tags {
    order: 2;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .news-card__title {
    order: 3;
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.04375rem;
  }

  .news-card__title::before {
    content: none;
  }

  html[data-viewport="tablet"] &,
  html[data-viewport="desktop"] & {
    .news-card__meta {
      order: unset;
      margin-top: 8px;
    }

    .news-card__tags {
      order: unset;
    }

    .news-card__title {
      order: unset;
      font-size: 1rem;
      letter-spacing: 0.05rem;
    }
  }
}

/* ==========================================================================
   components/opening-animation.css — オープニングアニメーション（corporate トップ）
   ========================================================================== */

@property --opening-mask-top {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --opening-mask-bottom {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@keyframes opening-animation__slide-right {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes opening-animation__slide-in {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes opening-animation__logo-mask {
  0% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  100% {
    clip-path: inset(50% 0 50% 0);
    opacity: 0;
  }
}

@keyframes opening-animation__overall-mask {
  0% {
    --opening-mask-top: 50%;
    --opening-mask-bottom: 50%;
    visibility: visible;
    pointer-events: auto;
  }

  99% {
    visibility: visible;
    pointer-events: auto;
  }

  100% {
    --opening-mask-top: 0%;
    --opening-mask-bottom: 100%;
    visibility: hidden;
    pointer-events: none;
  }
}

.opening-animation {
  --opening-mask-top: 50%;
  --opening-mask-bottom: 50%;
  position: fixed;
  inset: 0;
  z-index: var(--z-index-opening-overlay);
  overflow: hidden;
  background-color: var(--color-white);
  mask-image: linear-gradient(to bottom,
      #fff 0,
      #fff var(--opening-mask-top),
      transparent var(--opening-mask-top),
      transparent var(--opening-mask-bottom),
      #fff var(--opening-mask-bottom),
      #fff 100%);
  -webkit-mask-image: linear-gradient(to bottom,
      #fff 0,
      #fff var(--opening-mask-top),
      transparent var(--opening-mask-top),
      transparent var(--opening-mask-bottom),
      #fff var(--opening-mask-bottom),
      #fff 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  pointer-events: auto;

  .opening-animation__layer {
    position: absolute;
    inset: 0;
  }

  .opening-animation__layer[data-layer="line"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .opening-animation__line {
    width: 100%;
    height: clamp(2.8px, 0.55vw, 7px);
    background-color: var(--color-black);
  }

  .opening-animation__layer[data-layer="white-left"] {
    background-color: var(--color-white);
    transform: translateX(-100%);
    animation: opening-animation__slide-in 1s 1.6s forwards;
  }

  .opening-animation__layer[data-layer="logo"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .opening-animation__layer[data-layer="logo"] img {
    display: block;
    width: auto;
    height: 28px;
    object-fit: contain;
    background-color: var(--color-white);
    animation: opening-animation__logo-mask 500ms 2.9s forwards;
  }

  html[data-viewport="tablet"] & .opening-animation__layer[data-layer="logo"] img,
  html[data-viewport="desktop"] & .opening-animation__layer[data-layer="logo"] img {
    height: clamp(28px, 5vw, 60px);
  }

  .opening-animation__layer[data-layer="white-top"] {
    background-color: var(--color-white);
    animation: opening-animation__slide-right 1s 0.3s forwards;
  }

  animation: opening-animation__overall-mask 500ms 3.55s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .opening-animation {
    animation: opening-animation__overall-mask 0.01ms 0.1s forwards;
  }

  .opening-animation__layer[data-layer="white-left"] {
    animation: none;
    transform: translateX(0);
  }

  .opening-animation__layer[data-layer="logo"] img {
    animation: none;
  }

  .opening-animation__layer[data-layer="white-top"] {
    animation: none;
    transform: translateX(100%);
  }
}

.toc-nav {
    padding: 24px 0;
    background: rgba(69, 68, 67, 0.05);
}

.toc-nav ul {
    margin-top: 0;
}

.toc-nav ul li {
    padding: 5px 0;
    list-style: none;
}

.toc-nav ul li a {}

.toc-nav ul li a::before {
    content: "↓";
    display: inline-block;
}