@charset "utf-8";

@font-face {
  font-family: "LouisVuittonNotice";
  src: url("/assets/wp-assets/fonts/LouisVuitton-Regular.woff2") format("woff2");
  font-weight: 300;
  font-display: block;
}
@font-face {
  font-family: "LouisVuittonNotice";
  src: url("/assets/wp-assets/fonts/LouisVuitton-Regular-Oblique.woff2") format("woff2");
  font-weight: 300;
  font-style: oblique;
  font-display: block;
}
@font-face {
  font-family: "LouisVuittonNotice";
  src: url("/assets/wp-assets/fonts/LouisVuitton-Medium.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "LouisVuittonNotice";
  src: url("/assets/wp-assets/fonts/LouisVuitton-Medium-Oblique.woff2") format("woff2");
  font-weight: 400;
  font-style: oblique;
  font-display: block;
}
@font-face {
  font-family: "LouisVuittonNotice";
  src: url("/assets/wp-assets/fonts/LouisVuitton-Demi.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "LouisVuittonNotice";
  src: url("/assets/wp-assets/fonts/LouisVuitton-Demi-Oblique.woff2") format("woff2");
  font-weight: 500;
  font-style: oblique;
  font-display: block;
}

@scope (body) {
  :scope:has(#notice:not(:empty)) {
    --notice-height: 32px;
  }
}

@scope (#notice) {
  :scope {
    --notice-bottom-offset: 16px;
    position: relative;
    width: 100%;
    background-color: var(--color-white, #fff);
    z-index: 10;
    font-family: "LouisVuittonNotice", var(--font-family, verdana, helvetica, arial, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif);
    font-size: 10.666px;
    font-feature-settings: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    transform: translateZ(0)
  }

  h1:not(:has(img)),
  h2:not(:has(img)),
  h3:not(:has(img)),
  h4:not(:has(img)),
  h5:not(:has(img)),
  h6:not(:has(img)),
  p:not(:has(img)),
  span:not(:has(img)),
  ul:not(:has(img)),
  li:not(:has(img)),
  ol:not(:has(img)),
  a:not(:has(img)),
  div:not(:has(img)),
  section:not(:has(img)),
  figure:not(:has(img)),
  hgroup:not(:has(img)),
  time:not(:has(img)) {
    text-box: trim-both cap alphabetic;
    line-height: var(--line-height-heading);
  }

  :scope * {
    text-rendering: geometricPrecision;
  }

  :scope .notice__content {
    display: flex;
    justify-content: center;
  }

  :scope .notice__inner {
    display: grid;
    grid-template-columns: 1fr auto max-content 1fr;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
  }

  :scope a {
    font-family: "LouisVuittonNotice", "LouisVuitton", var(--font-family, verdana, helvetica, arial, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif);
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    text-align: left;
    font-weight: 300;
    font-size: 12px;
    color: var(--color-black, #000);
    line-height: var(--line-height-heading, 1.2);
    text-decoration: none;
    letter-spacing: normal;
    padding: var(--notice-bottom-offset, 16px) 40px;
    box-sizing: border-box;
    background: url("/assets/wp-assets/images/divider_horizon.gif") bottom repeat-x;
  }

  :scope .notice__date {
    grid-column: 2;
    white-space: nowrap;
  }

  :scope .notice__title {
    grid-column: 3;
    margin-left: 12px;
    display: block;
    min-width: 0;
  }

  :scope a:hover {
    color: var(--color-red);
  }

  :scope b {
    font-weight: 400;
    line-height: var(--line-height-heading);
  }

  :scope time {
    color: var(--color-gray);
  }

  :scope a:hover time {
    color: var(--color-red);
  }
}

@media (max-width: 960px) {
  @scope (#notice) {
    :scope a {
      font-size: 12px;
      padding: var(--notice-bottom-offset, 16px) 20px;
    }
    :scope .notice__inner {
      grid-template-columns: auto 1fr;
      width: 100%;
      max-width: 100%;
    }
    :scope .notice__date {
      grid-column: 1;
    }
    :scope .notice__title {
      grid-column: 2;
    }
  }
}