@charset "UTF-8";

/* ==========================================================================
Base
========================================================================== */

/*!
 * @acab/reset.css
 */
*,
*::before,
*::after {
  box-sizing: border-box; /* もちろん、より直感的なbox-sizingに設定 */
  margin: 0; /* マージンは0に */
  padding: 0; /* パディングも常に0に */
}

:where([hidden]:not([hidden="until-found"])) {
  display: none !important; /* hiddenは非表示を意味します */
}

:where(html) {
  text-size-adjust: none; /* iOSのランドスケープでテキストが調整されないようにする */
  color-scheme: dark light; /* ユーザーがダークテーマを好む場合、自動的にダークテーマになる */
}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth; /* 何かにフォーカスがある場合のみスムーズスクロール */
  }
}

:where(body) {
  font-family: system-ui, sans-serif; /* timeの代わりにシステムフォントを使用 */
  line-height: 1.5; /* アクセシブルな行の高さ */
  block-size: 100%; /* サファリ以外のブラウザのフォールバック */
  block-size: 100dvb; /* 1dvbは動的ビューポートの長さの1%、100dvbで高さいっぱいに */
  -webkit-font-smoothing: antialiased; /* テキストのレンダリングを改善 */
}

:where(input, button, textarea, select) {
  color: inherit; /* カラーも継承 */
  font: inherit; /* フォーム コントロールは親フォントを継承 */
}

:where(textarea) {
  resize: vertical; /* テキストエリアの水平リサイズを無効に */
  resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer; /* インタラクティブなものにカーソルを合わせる */
}

:where(:disabled) {
  cursor: not-allowed; /* フォームコントロール無効時のカーソルを許可しない */
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed; /* ラベルにもカーソルを許可しない */
}

:where(button) {
  border-style: solid; /* ボタンのボーダーのスタイルを設定しやすくする */
}

:where(a) {
  text-underline-offset: 0.2ex; /* 下線の上にスペースを追加する */
}

:where(ul, ol) {
  list-style: none; /* ビュレットを削除、必要に応じて手動で追加する */
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block; /* 置換された要素をより予測可能にする */
}

:where(img, picture, svg) {
  max-inline-size: 100%; /* images should never overflow past the available space */
  block-size: auto; /* アスペクト比を保持 */
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word; /* 長い単語は改行 */
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem); /* 見出しの行の高さを減らす */
}

:where(hr) {
  overflow: visible;

  /* より一貫性のある、スタイリッシュなhr */
  border: none;
  color: inherit;
  border-block-start: 1px solid;
  block-size: 0;
}

:where(:focus-visible) {
  /* より一貫性のある、カスタマイズ可能なフォーカスのアウトライン */
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px;
}

/* .visually-hiddenは後のカスケードレイヤーを上書きするために!importantを使用 */
:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

:root {
  --color-00-black: #000;
  --color-00-white: #fff;
  --color-00-brown: #c4afa7;
  --color-60-gray: #6b7075;
  --color-70-gray: #979ca1;
  --color-80-gray: #dbdee3;
  --color-90-gray: #f2f3f5;
  --color-95-gray: #f7f7f7;
  --color-01-brown: #623b12;
  --color-01-beige: #ffe7a2;
  --color-02-beige: #f8f3c4;
  --color-background-01: #816527;
  --color-background-02: #6c4723;
  --color-button-01: #b79853;
  --color-button-02: #57300d;
  --gradation-01: linear-gradient(90deg, #b9a59d 0%, #a28478 100%);
  --font-main: "zen-old-mincho", serif;
  --font-noto-sans: "Noto Sans JP", sans-serif;
  --font-noto-serif: "Noto Serif JP", serif;
}

html {
  height: -webkit-fill-available;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

html:has(dialog[open]) {
  overflow: hidden !important;
}

@media print, screen and (width >=768px) {
  html {
    scroll-padding-top: 95px;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-00-brown);
  color: var(--color-00-black);
  font-family: var(--font-main);
}

@media print, screen and (width >=768px) {
  body {
    padding-top: 95px;
  }
}

body.p-home {
  padding-top: 0;
  background-color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  body.p-home {
    padding-top: 0;
  }
}

/* visually-hidden */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
}

@media print, screen and (width <=767px) {
  .-pc-only {
    display: none !important;
  }
}

@media print, screen and (width >=768px) {
  .-sp-only {
    display: none !important;
  }
}

@media print, screen and (width <=767px) {
  #tab {
    scroll-margin-top: 70px;
  }
}

/* ==========================================================================
Components
========================================================================== */
.c-background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body.p-home .c-background {
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/top/background_sp.webp");
}

@media print, screen and (width >=768px) {
  body.p-home .c-background {
    background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/top/background_pc.webp");
  }
}

body.p-holiday-limited .c-background {
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/background_sp.webp");
}

@media print, screen and (width >=768px) {
  body.p-holiday-limited .c-background {
    background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/background_pc.webp");
  }
}

body.p-dryness-care .c-background {
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/dryness_care/background_sp.webp");
}

@media print, screen and (width >=768px) {
  body.p-dryness-care .c-background {
    background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/dryness_care/background_pc.webp");
  }
}

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 70px;
  background-color: rgb(255 255 255 / 88%);
  color: var(--color-00-black);
  transition: background-color 400ms;
}

@media print, screen and (width >=768px) {
  .c-header {
    height: 95px;
    background-color: var(--color-00-white);
  }
}

body.p-home .c-header {
  background-color: rgb(255 255 255 / 0%);
}

body.p-home .c-header .c-header__logo a {
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/logo_fair_white.svg");
}

body.p-home .c-header .c-header__burger-icon > span {
  background-color: var(--color-00-white);
}

.c-header.-scrolled {
  background-color: var(--color-00-white);
}

.c-header__body {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding-inline: 20px 8px;
}

@media print, screen and (width >=768px) {
  .c-header__body {
    padding-inline: 50px;
  }
}

.c-header__logo {
  width: 235px;
  height: 32px;
}

@media print, screen and (width >=768px) {
  .c-header__logo {
    width: 334px;
    height: 37px;
  }
}

.c-header__logo a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/logo_fair_black.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}

.c-header__logo-text {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
}

.c-header__burger {
  z-index: 201;
  width: 50px;
  height: 50px;
}

.c-header__burger-button {
  display: flex;
  width: 50px;
  height: 50px;
  background-color: unset;
  border: none;
  align-items: center;
  justify-content: center;
}

.c-header__burger-button[aria-expanded="true"] .c-header__burger-icon > span {
  background-color: var(--color-00-black) !important;
}

.c-header__burger-button[aria-expanded="true"] .c-header__burger-icon > span:nth-child(1) {
  transform: translateY(8px) rotate(30deg);
}

.c-header__burger-button[aria-expanded="true"] .c-header__burger-icon > span:nth-child(2) {
  transform: scale(0, 0) !important;
}

.c-header__burger-button[aria-expanded="true"] .c-header__burger-icon > span:nth-child(3) {
  transform: translateY(-8px) rotate(-30deg);
}

@media (hover: hover) {
  .c-header__burger-button[aria-expanded="true"] {
    transition: opacity 200ms;
  }

  .c-header__burger-button[aria-expanded="true"]:hover {
    opacity: 0.7;
  }
}

.c-header__burger-button:hover .c-header__burger-icon > span:nth-child(2) {
  transform: scale(0.6, 1);
}

.c-header__burger-icon {
  display: flex;
  width: 32px;
  height: 18px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
}

.c-header__burger-icon > span {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 1px;
  background-color: var(--color-00-black);
  border-radius: 2px;
  transition: transform 100ms;
}

.c-header__burger-icon > span:nth-child(2) {
  transform-origin: right center;
  transform: scale(0.6, 1);
}

.c-burger-menu {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: 200;
  width: 100%;
  max-width: 500px;
  height: 100lvh;
  background-color: transparent;
  border: none;
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-burger-menu {
    max-width: 790px;
    height: 100vh;
  }
}

.c-burger-menu__body {
  position: relative;
  overflow: scroll;
  height: auto;
  height: 100%;
  max-height: 100lvh;
  margin: 0 0 0 auto;
  background-color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-burger-menu__body {
    height: 100%;
  }
}

.c-burger-menu__logo-container {
  position: sticky;
  top: 0;
  display: flex;
  height: 71px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 20px 8px;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__logo-container {
    position: relative;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    padding: 73px 0 30px;
  }
}

.c-burger-menu__logo {
  width: 235px;
  height: 32px;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__logo {
    width: 350px;
    height: 41px;
  }
}

.c-burger-menu__logo a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/logo_fair_black.svg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}

.c-burger-menu__logo-text {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
}

.c-burger-menu__inner {
  padding: 20px;
  background-color: rgb(255 255 255 / 91%);
}

@media print, screen and (width >=768px) {
  .c-burger-menu__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    background-color: rgb(255 255 255 / 95%);
  }
}

.c-burger-menu a {
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-burger-menu a {
    transition: opacity 200ms;
  }
}

.c-burger-menu a:hover {
  opacity: 0.7;
}

.c-burger-menu__holiday {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__holiday {
    grid-template-columns: 295px 1fr;
    gap: 20px;
    align-items: center;
  }
}

.c-burger-menu__holiday-image {
  width: 100%;
}

.c-burger-menu__holiday-image img {
  display: block;
  width: 100%;
  height: auto;
}

.c-burger-menu__holiday-button {
  display: flex;
  padding: 10px 25px;
  background-color: var(--color-button-01);
  border-radius: 10px;
  color: var(--color-00-white);
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__holiday-button {
    padding: 16px 10px 16px 20px;
    border-radius: 100px;
    justify-content: space-between;
    gap: 10px;
  }
}

.c-burger-menu__holiday-button-icon {
  display: block;
  width: 33px;
  height: auto;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/icon_calendar.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 32/36;
}

.c-burger-menu__holiday-button-text {
  font-family: var(--font-noto-sans);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__holiday-button-text {
    text-align: center;
  }
}

.c-burger-menu__holiday-button-arrow {
  display: none;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/arrow_button_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 33/10;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__holiday-button-arrow {
    display: block;
    width: 30px;
  }
}

.c-burger-menu__article {
  margin-top: 40px;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__article {
    margin-top: 35px;
  }
}

.c-burger-menu__article-link {
  display: grid;
  grid-template-columns: 1fr;
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-burger-menu__article-link {
    display: grid;
    grid-template-columns: 1fr 220px;
    align-items: center;
    gap: 25px;
  }
}

.c-burger-menu__article-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.c-burger-menu__article-text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__article-text {
    font-size: 21px;
  }
}

.c-burger-menu__article-arrow {
  flex: 0 0 64px;
  width: 64px;
  height: auto;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/arrow_burger.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 33/10;
}

.c-burger-menu__article-image {
  display: none;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__article-image {
    display: block;
    width: 220px;
    flex: none;
  }
}

.c-burger-menu__beautyjam {
  margin-top: 40px;
}

.c-burger-menu__beautyjam-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-right: -20px;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__beautyjam-logo {
    margin-right: -75px;
  }
}

.c-burger-menu__beautyjam-logo img {
  display: block;
  width: 240px;
  flex: 0 0 240px;
}

.c-burger-menu__beautyjam-logo::after {
  display: block;
  height: 1px;
  content: "";
  border-top: 1px solid var(--color-00-black);
  flex: 1 1 auto;
}

.c-burger-menu__beautyjam-list {
  display: grid;
  margin-top: 30px;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__beautyjam-list {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

.c-burger-menu__beautyjam-link {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-burger-menu__beautyjam-link {
    grid-template-columns: 136px 1fr;
    gap: 15px;
  }
}

.c-burger-menu__beautyjam-text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}

@media print, screen and (width >=768px) {
  .c-burger-menu__beautyjam-text {
    font-size: 16px;
  }
}

.c-footer {
  position: relative;
  z-index: 1;
  background-color: var(--color-00-black);
  color: var(--color-00-white);
  padding-block: 40px 20px;
}

@media print, screen and (width >=768px) {
  .c-footer {
    padding-block: 50px;
    padding-inline: 50px;
    min-width: 1200px;
  }
}

.c-footer__body {
  display: grid;
  grid-template-columns: 1fr;
  font-family: "FOT-TsukuARdGothic Std", serif;
}

@media print, screen and (width >=768px) {
  .c-footer__body {
    width: 1100px;
    margin: 0 auto;
    align-items: center;
    grid-template-areas: "copyright list";
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
  }
}

.c-footer__list {
  gap: 60px;
  display: grid;
  grid-template-columns: auto 1fr;
  margin: auto;
}

@media print, screen and (width >=768px) {
  .c-footer__list {
    grid-area: list;
    justify-content: flex-end;
    width: 100%;
    grid-template-columns: auto auto;
  }
}

.c-footer__list li a {
  color: inherit;
  font-family: "FOT-TsukuARdGothic Std", serif;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-footer__list li a {
    transition: opacity 200ms;
  }

  .c-footer__list li a:hover {
    opacity: 0.7;
  }
}

.c-footer__copyright {
  display: block;
  margin-top: 40px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

@media print, screen and (width >=768px) {
  .c-footer__copyright {
    margin-top: 0;
    font-size: 12px;
    grid-area: copyright;
  }
}

.c-hero {
  position: relative;
  overflow: hidden;
}

@media print, screen and (width >=768px) {
  .c-hero {
    min-width: 1200px;
  }
}

.c-hero h1 {
  display: block;
  width: 100vw;
  height: auto;
}

.c-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

@media print, screen and (width >=768px) {
  .c-hero img {
    object-position: center center;
  }
}

.c-top-main {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 50px 20px 90px;
  background-color: rgb(129 101 39 / 80%);
  color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-top-main {
    padding: 120px 50px 80px;
  }
}

.c-top-main__body {
  position: relative;
  z-index: 1;
}

@media print, screen and (width >=768px) {
  .c-top-main__body {
    min-width: 1200px;
  }
}

.c-top-main__title {
  width: fit-content;
  margin: 0 auto;
  font-weight: bold;
  text-align: center;
}

.c-top-main__title::after {
  display: block;
  width: 98px;
  height: 1px;
  margin: 20px auto 0;
  content: "";
  border-top: 1px solid var(--color-00-white);
}

.c-top-main__title-line1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-top-main__title-line1 {
    font-size: 25px;
    letter-spacing: 0.05em;
  }
}

.c-top-main__title-line2 {
  margin: 5px 0 0;
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

@media print, screen and (width >=768px) {
  .c-top-main__title-line2 {
    font-size: 39px;
  }
}

.c-top-main__title-line2 span {
  color: var(--color-01-beige);
}

.c-top-main__title-line3 {
  margin: 10px 0 0;
  font-size: 16px;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-top-main__title-line3 {
    margin-top: 15px;
    font-size: 20px;
  }
}

.c-top-main__days {
  margin: 20px 0 70px;
  font-family: var(--font-noto-sans);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.04em;
}

@media print, screen and (width >=768px) {
  .c-top-main__days {
    margin-bottom: 80px;
    font-size: 30px;
  }
}

.c-top-main__lead {
  margin: 0 10px 35px;
  font-size: 19px;
  font-weight: bold;
  line-height: 1.8;
  text-align: left;
  letter-spacing: 0.05em;
}

@media print, screen and (width >=768px) {
  .c-top-main__lead {
    margin: 0 0 80px;
    font-size: 40px;
    text-align: center;
  }
}

.c-top-main__text {
  position: relative;
  margin: 0 10px;
  padding-bottom: 160px;
  font-size: 13px;
  font-weight: bold;
  line-height: 2.2;
  letter-spacing: 0.03em;
}

@media print, screen and (width >=768px) {
  .c-top-main__text {
    width: fit-content;
    margin: 0 auto;
    padding-bottom: 180px;
    font-size: 21px;
    text-align: center;
  }
}

.c-top-main__text::after {
  position: absolute;
  right: -20px;
  bottom: 60px;
  z-index: -1;
  display: block;
  width: 230px;
  height: auto;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/top/text_autumn.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  content: "";
  aspect-ratio: 557/227;
}

@media print, screen and (width >=768px) {
  .c-top-main__text::after {
    right: -160px;
    bottom: 70px;
    width: 557px;
  }
}

.c-top-maincut {
  position: relative;
  z-index: 1;
  padding: 0 0 100px;
  background-color: rgb(129 101 39 / 80%);
  color: var(--color-00-white);
}

.c-top-maincut__container {
  padding: 50px 20px;
  background-color: rgb(108 71 35 / 90%);
  border-radius: 35px;
}

@media print, screen and (width >=768px) {
  .c-top-maincut__container {
    min-width: 1200px;
    padding: 120px 50px;
  }
}

@media print, screen and (width >=768px) {
  .c-top-maincut__inner {
    width: 1100px;
    margin: 0 auto;
  }
}

.c-maincut-item {
  margin-right: -20px;
  margin-bottom: 70px;
  margin-left: 20px;
  padding: 80px 20px 60px;
  background-color: rgb(108 71 35 / 80%);
  border-radius: 30px 0 0 30px;
  color: var(--color-00-white);
  font-family: var(--font-main);
}

@media print, screen and (width >=768px) {
  .c-maincut-item {
    margin-right: 0;
    margin-bottom: 66px;
    margin-left: 0;
    padding: 120px 0 60px;
    border-radius: 30px;
  }
}

@media print, screen and (width >=768px) {
  .c-maincut-item__inner {
    width: 1100px;
    margin: 0 auto;
  }
}

.c-maincut-item__main {
  padding-right: 20px;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__main {
    display: grid;
    grid-template-areas: "image title" "image lead";
    grid-template-columns: 39% 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 0 33px;
    padding-right: 0;
  }
}

.c-maincut-item__main img {
  display: block;
  width: 100%;
  height: auto;
  grid-area: image;
}

.c-maincut-item__title {
  position: relative;
  display: flex;
  margin: 0 -20px 22px 0;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  font-family: var(--font-main);
  font-size: 20px;
  grid-area: title;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__title {
    margin: 0;
  }
}

.c-maincut-item__title span {
  display: block;
  flex: 0 0 auto;
  font-size: 20px;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__title span {
    font-size: 22px;
  }
}

.c-maincut-item__title::after {
  display: block;
  height: 1px;
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--color-00-white);
}

body.p-home .c-maincut-item__title::after {
  border-color: var(--color-00-white);
}

.c-maincut-item__lead {
  margin-top: 23px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: bold;
  line-height: 2.2rem;
  grid-area: lead;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__lead {
    margin-top: 0;
    font-size: 17px;
    line-height: 3.9rem;
  }
}

.c-maincut-item__list {
  margin: 33px -20px 0 0;
  padding-right: 20px;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__list {
    max-width: 1100px;
    margin-top: 110px;
    padding-right: 0;
  }
}

.c-maincut-item__item {
  scroll-snap-align: start;
  width: 260px;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__item {
    width: 320px;
    padding-right: 5px;
  }
}

.c-maincut-item__item:last-child {
  width: 280px;
  padding-right: 20px;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__item:last-child {
    width: 320px;
    padding-right: 5px;
  }
}

.c-maincut-item__item img {
  clip-path: url("#path1");
}

.c-maincut-item__copy {
  margin-bottom: 19px;
  font-family: var(--font-main);
  font-weight: bold;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__copy {
    margin-bottom: 30px;
  }
}

.c-maincut-item__copy p {
  margin: 0;
  font-size: 19px;
  line-height: 1.77;
  letter-spacing: -0.05em;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__copy p {
    font-size: 18px;
  }
}

.c-maincut-item__image {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid var(--color-01-brown);
}

@media print, screen and (width >=768px) {
  .c-maincut-item__image {
    margin-bottom: 16px;
  }
}

@media print, screen and (width >=768px) {
  .c-maincut-item__image img {
    width: 100%;
  }
}

.c-maincut-item__container1 {
  font-family: var(--font-noto-sans);
}

.c-maincut-item__date {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: block;
  width: 95px;
  height: 95px;
  margin: 0 auto;
  background-color: var(--color-button-01);
  border-radius: 50%;
  color: var(--color-00-black);
  font-family: var(--font-main);
  line-height: 1;
  transform-origin: left top;
}

@media print, screen and (width <=767px) {
  .c-maincut-item__date {
    transform: scale(0.8);
  }
}

.c-maincut-item__date > span {
  position: absolute;
  display: block;
  letter-spacing: 0;
}

.c-maincut-item__date-text1 {
  top: calc(50% - 33px);
  left: calc(50% - 33px);
  width: fit-content;
  font-size: 28px;
  text-align: right;
}

.c-maincut-item__date-text2 {
  top: calc(50% - 18px);
  left: 0;
  width: 100%;
  font-size: 20px;
  text-align: center;
}

.c-maincut-item__date-text3 {
  top: calc(50% - 10px);
  left: calc(50% + 3px);
  width: fit-content;
  font-size: 28px;
  text-align: left;
}

.c-maincut-item__date-text4 {
  top: calc(50% + 17px);
  left: 0;
  width: 100%;
  font-size: 18px;
  text-align: center;
}

.c-maincut-item__brand {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__brand {
    font-size: 16px;
  }
}

.c-maincut-item__details {
  font-family: var(--font-noto-sans);
}

.c-maincut-item__details[open] .c-maincut-item__summary::after {
  content: "▲";
}

.c-maincut-item__summary {
  position: relative;
  display: flex;
  height: 32px;
  margin-top: 15px;
  background-color: var(--color-button-02);
  color: var(--color-00-white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__summary {
    height: 44px;
    font-size: 16px;
    transition: filter 200ms;
  }

  .c-maincut-item__summary:hover {
    filter: brightness(1.1);
  }
}

.c-maincut-item__summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}

.c-maincut-item__summary::after {
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--color-00-white);
  font-size: 12px;
  line-height: 1;
  content: "▼";
  transform: translateY(-50%);
}

@media print, screen and (width >=768px) {
  .c-maincut-item__summary::after {
    font-size: 16px;
  }
}

.c-maincut-item__name {
  margin: 15px 0 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__name {
    font-size: 16px;
  }
}

.c-maincut-item__color {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__color {
    font-size: 16px;
  }
}

.c-maincut-item__size {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__size {
    font-size: 16px;
  }
}

.c-maincut-item__price {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  text-align: right;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__price {
    font-size: 16px;
  }
}

.c-maincut-item__note1 {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__note1 {
    font-size: 14px;
  }
}

.c-maincut-item__date1, .c-maincut-item__date2 {
  margin: 0;
  color: var(--color-01-beige);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__date1, .c-maincut-item__date2 {
    font-size: 16px;
  }
}

.c-maincut-item__single-button {
  margin: 10px 0 20px;
}

.c-maincut-item__buttons {
  display: grid;
  margin: 10px 0 20px;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__buttons {
    gap: 14px;
  }
}

.c-maincut-item__button {
  height: 38px;
}

.c-maincut-item__shop-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__shop-title {
    font-size: 16px;
  }
}

.c-maincut-item__shop-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-maincut-item__shop-text {
    font-size: 14px;
  }
}

.c-maincut-item__shop-text span::after {
  content: " / ";
}

.c-maincut-item__shop-text span:last-child::after {
  content: none;
}

.c-top-contents {
  position: relative;
  z-index: 1;
  margin-top: 50px;
  margin-bottom: 30px;
}

@media print, screen and (width >=768px) {
  .c-top-contents {
    width: 100%;
    min-width: 1100px;
    margin: auto;
  }
}

.c-top-contents__main {
  position: relative;
}

@media print, screen and (width >=768px) {
  .c-top-contents__main {
    margin-top: 100px;
  }
}

.c-top-contents__holiday {
  position: relative;
  padding: 90px 20px;
  background-color: rgb(98 59 18 / 80%);
  box-shadow: 10px 20px 0 0 rgb(0 0 0 / 30%);
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday {
    padding: 90px 78px 90px 45px;
  }
}

.c-top-contents__holiday::before, .c-top-contents__holiday::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/item_corner_left-beige.svg"), url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/item_corner_right-beige.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top 10px left 10px, top 10px right 10px;
  background-size: 45px 45px, 45px 45px;
  content: "";
  pointer-events: none;
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday::before, .c-top-contents__holiday::after {
    background-position: top 15px left 15px, top 15px right 15px;
    background-size: 75px 75px, 75px 75px;
  }
}

.c-top-contents__holiday::after {
  transform: rotate(180deg);
}

.c-top-contents__holiday-content {
  display: grid;
  grid-template-areas: "text" "image" "button";
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday-content {
    grid-template-areas: "text image" "button image";
    grid-template-columns: repeat(2, 1fr);
  }
}

.c-top-contents__holiday-text {
  font-size: 16px;
  font-weight: bold;
  line-height: 2.9rem;
  grid-area: text;
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday-text {
    font-size: 25px;
    line-height: 5.3rem;
    text-align: right;
  }
}

.c-top-contents__holiday-button {
  display: flex;
  margin-top: 30px;
  padding: 20px 15px;
  background-color: var(--color-button-01);
  border-radius: 10px;
  color: var(--color-00-white);
  grid-area: button;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday-button {
    margin-top: 0;
    margin-bottom: 25px;
    padding: 0 25px;
    justify-content: center;
    border-radius: 50px;
    transition: opacity 200ms;
  }

  .c-top-contents__holiday-button:hover {
    opacity: 0.7;
  }
}

.c-top-contents__holiday-button-icon {
  display: block;
  width: 33px;
  height: auto;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/icon_calendar.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 32/36;
}

.c-top-contents__holiday-button-text {
  font-family: var(--font-noto-sans);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday-button-text {
    font-size: 18px;
  }
}

.c-top-contents__holiday-button-arrow {
  display: none;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/arrow_button_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 33/10;
}

.c-top-contents__holiday-image {
  grid-area: image;
  margin-top: 20px;
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday-image {
    margin-top: 0;
    margin-left: 36px;
  }
}

.c-top-contents__holiday-image img {
  width: 100%;
}

.c-top-contents__holiday-calender {
  display: none;
}

@media print, screen and (width >=768px) {
  .c-top-contents__holiday-calender {
    position: absolute;
    top: -5%;
    right: 90px;
    display: block;
    width: 263px;
  }
}

.c-top-contents__dryness {
  margin-top: 80px;
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness {
    margin-top: 120px;
  }
}

.c-top-contents__dryness-content {
  display: grid;
  grid-template-areas: "image" "text" "button";
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness-content {
    grid-template-areas: "image text" "image button";
    grid-template-columns: 55% 1fr;
  }
}

.c-top-contents__dryness-text {
  margin-top: 35px;
  font-weight: bold;
  text-align: center;
  grid-area: text;
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness-text {
    margin-top: 15px;
    margin-left: 25px;
    text-align: left;
  }
}

.c-top-contents__dryness-title {
  font-size: 19px;
  line-height: 3.6rem;
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness-title {
    font-size: 33px;
    line-height: 5.6rem;
  }
}

.c-top-contents__dryness-read {
  margin-top: 15px;
  font-size: 13px;
  line-height: 2.2rem;
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness-read {
    margin-top: 35px;
    font-size: 20px;
    line-height: 4.6rem;
  }
}

.c-top-contents__dryness-image {
  grid-area: image;
}

.c-top-contents__dryness-button {
  grid-area: button;
  margin: 25px auto 0;
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness-button {
    margin: 0 0 0 auto;
    gap: 10px;
  }
}

.c-top-contents__dryness-button a {
  position: relative;
  display: flex;
  width: fit-content;
  color: var(--color-00-white);
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness-button a {
    transition: opacity 200ms;
  }
}

.c-top-contents__dryness-button a:hover {
  opacity: 0.7;
}

.c-top-contents__dryness-button a span {
  position: relative;
  z-index: 1;
  display: block;
  padding-bottom: 8px;
  font-family: zen-old-mincho, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.c-top-contents__dryness-button a::after {
  z-index: 2;
  display: block;
  width: 64px;
  height: 11px;
  margin-bottom: 10px;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/arrow_button_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

@media print, screen and (width >=768px) {
  .c-top-contents__dryness-button a::after {
    width: 47px;
  }
}

.c-cosme {
  position: relative;
  z-index: 1;
  background-color: var(--color-00-brown);
  color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-cosme {
    min-width: 1200px;
  }
}

.c-cosme__image {
  width: 100%;
}

@media print, screen and (width >=768px) {
  .c-cosme__image {
    min-width: 1200px;
  }
}

.c-cosme__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px 0;
}

@media print, screen and (width >=768px) {
  .c-cosme__inner {
    padding: 120px 0 0;
  }
}

.c-cosme__title {
  font-size: 30px;
  text-align: center;
}

@media print, screen and (width >=768px) {
  .c-cosme__title {
    font-size: 49px;
    line-height: 1.3;
  }
}

.c-cosme__title.-top-line::before {
  display: block;
  width: 210px;
  margin: 0 auto 70px;
  content: "";
  border-top: 1px solid var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-cosme__title.-top-line::before {
    margin-bottom: 120px;
  }
}

.c-cosme__content {
  padding-bottom: 70px;
  text-align: center;
}

.c-cosme__content:last-of-type {
  padding-bottom: 120px;
}

@media print, screen and (width >=768px) {
  .c-cosme__content {
    margin: auto;
    padding-bottom: 120px;
  }
}

.c-cosme__text {
  margin: 30px 0 50px;
  font-family: "Noto Sans JP", serif;
  font-size: 14px;
}

@media print, screen and (width >=768px) {
  .c-cosme__text {
    width: 630px;
    margin: auto;
    padding: 50px 0;
    font-size: 20px;
  }
}

.c-cosme__button {
  width: 236px;
  margin: auto;
}

@media print, screen and (width >=768px) {
  .c-cosme__button {
    width: 439px;
    height: 85px;
  }
}

.c-cosme__button a {
  position: relative;
  display: flex;
  width: 100%;
  height: 53px;
  color: var(--color-00-black);
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-cosme__button a {
    height: 100%;
    transition: filter 200ms;
  }
}

.c-cosme__button a:hover {
  filter: brightness(1.1);
}

.c-cosme__button a span {
  position: relative;
  z-index: 1;
  display: block;
  margin-right: 10px;
  padding-bottom: 8px;
  font-family: zen-old-mincho, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media print, screen and (width >=768px) {
  .c-cosme__button a span {
    font-size: 42px;
  }
}

.c-cosme__button a::before {
  position: absolute;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-01-brown);
  content: "";
}

.c-cosme__button a::after {
  position: absolute;
  top: 15px;
  right: 18px;
  z-index: 2;
  display: block;
  width: 21px;
  height: 21px;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/icon_blank.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

@media print, screen and (width >=768px) {
  .c-cosme__button a::after {
    top: 50%;
    right: 52px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
  }
}

.c-cosme__button > div {
  position: relative;
  display: flex;
  width: 100%;
  height: 53px;
  background-color: #ccc;
  color: var(--color-00-black);
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-cosme__button > div {
    height: 100%;
  }
}

.c-cosme__button > div span {
  position: relative;
  z-index: 1;
  display: block;
  margin-right: 10px;
  padding-bottom: 8px;
  font-family: zen-old-mincho, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media print, screen and (width >=768px) {
  .c-cosme__button > div span {
    font-size: 42px;
  }
}

@media print, screen and (width >=768px) {
  .c-cosme__diagnosis {
    display: grid;
    width: clamp(1100px, 67.3250564334vw, 1193px);
    margin: auto;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
  }
}

@media print, screen and (width >=768px) {
  .c-cosme__diagnosis .c-cosme__button {
    width: 100%;
  }
}

@media print, screen and (width >=768px) {
  .c-cosme__diagnosis-content {
    display: grid;
    width: 498px;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

@media print, screen and (width >=768px) {
  .c-cosme__diagnosis-content:nth-child(n+3) .c-cosme__diagnosis-image {
    margin-top: 100px;
  }
}

.c-cosme__diagnosis-image {
  margin-top: 70px;
}

@media print, screen and (width >=768px) {
  .c-cosme__diagnosis-image {
    margin-top: 0;
  }
}

.c-cosme__diagnosis-text {
  margin: 25px 0;
  font-size: 25px;
  font-weight: bold;
  text-align: left;
}

@media print, screen and (width >=768px) {
  .c-cosme__diagnosis-text {
    font-size: 32px;
  }
}

.c-beautyjam {
  position: relative;
  z-index: 1;
  background-color: var(--color-00-white);
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-beautyjam {
    min-width: 1200px;
  }
}

@media print, screen and (width >=768px) {
  .c-beautyjam__hidden {
    overflow: hidden;
  }
}

.c-beautyjam__inner {
  margin: 0 auto;
  padding: 100px 20px;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__inner {
    max-width: 840px;
    padding: 120px 0;
  }
}

.c-beautyjam__title-logo {
  width: 100%;
  max-width: 334px;
  margin: 0 auto;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__title-logo {
    display: flex;
    max-width: none;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
  }

  .c-beautyjam__title-logo img {
    display: block;
    width: 294px;
    height: auto;
    flex: 0 0 294px;
  }

  .c-beautyjam__title-logo::after {
    display: block;
    height: 1px;
    content: "";
    border-top: 1px solid var(--color-00-black);
    flex: 1 1 auto;
  }
}

.c-beautyjam__contents {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  margin-top: 70px;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__contents {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 50px;
  }
}

@media print, screen and (width >=768px) {
  .c-beautyjam__content {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    gap: 15px;
  }
}

.c-beautyjam__content-title {
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__content-title {
    margin-top: 0;
    font-size: 20px;
  }
}

.c-beautyjam__content-button {
  display: flex;
  width: fit-content;
  margin: 15px 0 0 auto;
  color: var(--color-00-black);
  text-decoration: none;
  align-items: center;
  gap: 20px;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__content-button {
    margin-top: 0;
    transition: opacity 200ms;
  }

  .c-beautyjam__content-button:hover {
    opacity: 0.7;
  }
}

.c-beautyjam__content-button span {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  flex: 0 0 auto;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__content-button span {
    font-size: 25px;
  }
}

.c-beautyjam__content-button::after {
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/icon_blank.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  flex: 0 0 24px;
}

.c-beautyjam__banner {
  margin-top: 70px;
  padding: 20px 15px;
  border-top: 1px solid var(--color-00-black);
  border-bottom: 1px solid var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-beautyjam__banner {
    margin: 60px auto 0;
    padding: 30px 40px 30px 60px;
  }
}

.c-beautyjam__banner a {
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__banner a {
    transition: opacity 200ms;
  }
}

.c-beautyjam__banner a:hover {
  opacity: 0.7;
}

.c-beautyjam__banner a p {
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-beautyjam__banner-inner {
    display: grid;
    grid-template-columns: 205px auto;
    gap: 40px;
    place-items: center;
  }
}

.c-beautyjam__banner-image img {
  width: 100%;
}

.c-beautyjam__banner-content {
  font-family: "Noto Sans JP", serif;
}

.c-beautyjam__banner-title {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__banner-title {
    margin-top: 0;
    font-size: 20px;
  }
}

.c-beautyjam__banner-text {
  margin-top: 18px;
  font-size: 14px;
}

@media print, screen and (width >=768px) {
  .c-beautyjam__banner-text {
    font-size: 16px;
  }
}

.c-news {
  position: relative;
  z-index: 1;
  background-color: rgb(129 101 39 / 80%);
  color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-news {
    min-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
  }
}

.c-news__inner {
  padding: 60px 20px 100px;
}

@media print, screen and (width >=768px) {
  .c-news__inner {
    width: 1100px;
    margin: 0 auto;
    padding: 120px 0;
  }
}

.c-news__title {
  margin: 0 0 50px;
  color: var(--color-00-white);
  text-align: center;
}

@media print, screen and (width >=768px) {
  .c-news__title {
    margin-bottom: 60px;
  }
}

.c-news__title h2 {
  margin: 0 0 5px;
  font-size: 32px;
  letter-spacing: 0.06em;
}

@media print, screen and (width >=768px) {
  .c-news__title h2 {
    font-size: 40px;
  }
}

.c-news__title p {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.07em;
}

@media print, screen and (width >=768px) {
  .c-news__title p {
    font-size: 18px;
  }
}

.c-news__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 40px;
}

@media print, screen and (width >=768px) {
  .c-news__tabs {
    gap: 9px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 40px;
  }
}

.c-news__tab {
  display: flex;
  height: 55px;
  padding: 8px 5px;
  background-color: rgb(183 152 83 / 81%);
  border: none;
  color: var(--color-00-white);
  cursor: pointer;
  transition: background-color 200ms;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-news__tab {
    height: 91px;
    padding: 24px 9px;
    transition: opacity 200ms;
  }

  .c-news__tab:hover {
    background-color: #b79853;
  }
}

.c-news__tab.-active {
  background-color: var(--color-01-brown);
  background-image: none;
}

.c-news__tab.-active span {
  color: var(--color-00-white);
}

.c-news__tab[data-index="4"] span {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media print, screen and (width >=768px) {
  .c-news__tab[data-index="4"] span {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.04em;
  }
}

.c-news__tab span {
  display: block;
  color: var(--color-01-text);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

@media print, screen and (width >=768px) {
  .c-news__tab span {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.04em;
  }
}

.c-news__contents {
  margin-bottom: 50px;
}

@media print, screen and (width >=768px) {
  .c-news__contents {
    margin-bottom: 130px;
  }
}

.c-news__content {
  display: none;
}

.c-news__content.-active {
  display: block;
}

.c-news-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  font-family: var(--font-noto-sans);
}

@media print, screen and (width >=768px) {
  .c-news-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
  }
}

.c-news-list__item {
  padding: 20px 15px;
  background-color: var(--color-00-white);
  border: 1px solid var(--color-00-black);
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-news-list__item {
    padding: 60px 30px;
  }
}

.c-news-list__head {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

@media print, screen and (width >=768px) {
  .c-news-list__head {
    gap: 24px;
  }
}

.c-news-list__image img {
  border: 1px solid var(--color-00-black);
}

.c-news-list__area {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-news-list__area {
    margin-bottom: 10px;
    font-size: 14px;
  }
}

.c-news-list__date {
  margin-bottom: 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-news-list__date {
    font-size: 14px;
  }
}

.c-news-list__title {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

@media print, screen and (width >=768px) {
  .c-news-list__title {
    font-size: 17px;
  }
}

.c-news-list__body {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-news-list__body {
    font-size: 14px;
  }
}

.c-news-list__link1, .c-news-list__link2 {
  margin-top: 0.5em;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-news-list__link1, .c-news-list__link2 {
    font-size: 14px;
  }
}

.c-news-list__link1 a, .c-news-list__link2 a {
  color: var(--color-00-black);
  text-decoration: underline;
  transition: opacity 300ms;
}

.c-news-list__link1 a:hover, .c-news-list__link2 a:hover {
  opacity: 0.7;
  text-decoration: none;
}

.c-news-large-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 50px;
}

@media print, screen and (width >=768px) {
  .c-news-large-list {
    gap: 70px;
    margin-bottom: 100px;
  }
}

.c-news-large-list__item {
  padding: 20px 15px;
  background-color: var(--color-00-white);
  border: 1px solid var(--color-00-black);
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-news-large-list__item {
    display: grid;
    padding: 30px 60px;
    grid-template-columns: 350px 1fr;
    gap: 45px;
    align-items: center;
  }
}

@media print, screen and (width >=768px) {
  .c-news-large-list__image {
    align-self: start;
  }
}

.c-news-large-list__image img {
  width: 100%;
  border: 1px solid var(--color-00-black);
}

.c-news-large-list__content {
  font-family: var(--font-noto-sans);
}

.c-news-large-list__title {
  margin-top: 10px;
  font-family: var(--font-main);
  font-size: 35px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

@media print, screen and (width >=768px) {
  .c-news-large-list__title {
    margin-top: 0;
    font-size: 40px;
    line-height: 1.1;
  }
}

.c-news-large-list__area {
  margin: 5px 0 0;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-news-large-list__area {
    margin-top: 10px;
    font-size: 14px;
  }
}

.c-news-large-list__brand {
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-news-large-list__brand {
    margin-top: 20px;
    font-size: 17px;
  }
}

.c-news-large-list__text {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-news-large-list__text {
    margin-top: 20px;
    font-size: 14px;
  }
}

.c-news-large-list__text a {
  color: var(--color-00-black);
  text-decoration: underline;
  transition: opacity 300ms;
}

.c-news-large-list__text a:hover {
  opacity: 0.7;
}

.c-footer-navigation {
  position: relative;
  top: 0;
  z-index: 1;
  background-color: rgb(94 54 15 / 85%);
  backdrop-filter: blur(10px);
  color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-footer-navigation {
    min-width: 1200px;
  }
}

.c-footer-navigation a {
  color: inherit;
}

.c-footer-navigation__inner {
  padding: 80px 20px 0;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__inner {
    width: 1100px;
    margin: 0 auto;
    padding: 200px 0 0;
  }
}

.c-footer-navigation__head {
  text-align: center;
}

.c-footer-navigation__title::after {
  display: block;
  width: 98px;
  height: 1px;
  margin: 20px auto 0;
  content: "";
  border-top: 1px solid var(--color-00-white);
}

.c-footer-navigation__title h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: 0.055em;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__title h2 {
    font-size: 39px;
  }
}

.c-footer-navigation__title h2 span {
  color: var(--color-01-beige);
}

.c-footer-navigation__title p {
  margin: 0;
}

.c-footer-navigation__title p:nth-of-type(1) {
  font-size: 18px;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__title p:nth-of-type(1) {
    font-size: 25px;
  }
}

.c-footer-navigation__title p:nth-of-type(2) {
  font-size: 16px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__title p:nth-of-type(2) {
    font-size: 20px;
  }
}

.c-footer-navigation__days {
  margin: 20px 0 30px;
  font-family: "Noto Sans JP", serif;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.04em;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__days {
    margin-bottom: 70px;
    font-size: 30px;
  }
}

.c-footer-navigation__button {
  width: 250px;
  height: 50px;
  margin: 0 auto 70px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button {
    width: 340px;
    height: 60px;
    margin: 0 auto 113px;
  }
}

.c-footer-navigation__button a {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--color-button-01);
  border-radius: 25px;
  color: var(--color-00-white);
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button a {
    border-radius: 30px;
    transition: opacity 300ms;
  }

  .c-footer-navigation__button a:hover {
    opacity: 0.7;
  }
}

.c-footer-navigation__button span {
  font-family: "Noto Sans JP", serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button span {
    font-size: 20px;
  }
}

.c-footer-navigation__button-viewmore {
  display: none;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button-viewmore {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    margin-top: 0;
  }
}

.c-footer-navigation__button-viewmore p {
  position: relative;
  display: flex;
  width: fit-content;
  height: 53px;
  padding: 0 25px;
  color: var(--color-00-black);
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button-viewmore p {
    height: 63px;
    padding: 0 45px;
  }
}

.c-footer-navigation__button-viewmore p span {
  position: relative;
  z-index: 1;
  display: block;
  padding-bottom: 8px;
  font-family: zen-old-mincho, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button-viewmore p span {
    font-size: 34px;
  }
}

.c-footer-navigation__button-viewmore p::before {
  position: absolute;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-background-01);
  content: "";
}

.c-footer-navigation__button-viewmore p::after {
  position: absolute;
  top: 15px;
  right: -50px;
  z-index: 2;
  display: block;
  width: 64px;
  height: 13px;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/arrow_burger.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

.c-footer-navigation__button-viewmore.-arrow p::after {
  top: 30px;
  right: -30px;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/arrow_burger.svg");
}

.c-footer-navigation__button-viewmore.-blank p {
  width: 100%;
}

.c-footer-navigation__button-viewmore.-blank p::after {
  top: 23px;
  right: 15px;
  width: 23px;
  height: 20px;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/icon_blank.svg");
}

.c-footer-navigation__button-coming {
  display: none;
  height: 100%;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button-coming {
    display: block;
  }
}

.c-footer-navigation__button-coming div {
  position: relative;
  display: flex;
  width: 100%;
  height: 53px;
  background-color: #ccc;
  color: var(--color-00-black);
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button-coming div {
    height: 100%;
  }
}

.c-footer-navigation__button-coming div span {
  padding-bottom: 8px;
  font-size: 24px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__button-coming div span {
    font-size: 34px;
  }
}

@media print, screen and (width >=768px) {
  .c-footer-navigation .c-top-contents__dryness-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

.c-footer-navigation .c-top-contents__dryness-text {
  text-align: left;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation .c-top-contents__dryness-text {
    display: grid;
    margin-top: 0;
    margin-left: 100px;
    align-items: flex-end;
  }
}

.c-footer-navigation .c-top-contents__dryness-button {
  margin: 25px 0 25px auto;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation .c-top-contents__dryness-button {
    margin: 20px 0 0 110px;
  }
}

.c-footer-navigation__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 73px 62px;
    padding: 0 45px;
  }
}

.c-footer-navigation__item {
  flex: 0 0 336px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
}

.c-footer-navigation__item a {
  display: block;
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item a {
    display: grid;
    align-items: center;
    gap: 15px;
    transition: opacity 300ms;
    grid-template-columns: auto;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  .c-footer-navigation__item a:hover {
    opacity: 0.7;
  }
}

.c-footer-navigation__item-coming {
  display: block;
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item-coming {
    display: grid;
    align-items: center;
    gap: 15px;
    grid-template-columns: auto;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

.c-footer-navigation__item-image {
  margin-right: 14px;
  box-shadow: 15px 15px 0 rgb(165 135 124);
}

.c-footer-navigation__item-image img {
  width: 100%;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item-image {
    margin-right: 9px;
    box-shadow: 9px 8px 0 rgb(165 135 124);
  }
}

.c-footer-navigation__item-link {
  display: grid;
  height: 100%;
  margin-top: 26px;
  text-decoration: none;
  grid-template-columns: 1fr 62px;
  gap: 20px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item-link {
    display: block;
    margin-top: 0;
  }
}

.c-footer-navigation__item-text {
  position: relative;
  display: block;
  color: var(--color-00-black);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.44;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item-text {
    font-size: 28px;
    text-align: left;
  }
}

.c-footer-navigation__item-text::after {
  position: absolute;
  top: calc(50% - 6px);
  right: -15px;
  display: block;
  width: 64px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item-text::after {
    content: none;
  }
}

.c-footer-navigation__item-arrow {
  margin-top: 14px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item-arrow {
    display: none;
  }
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__item-arrow img {
    margin-bottom: 5px;
  }
}

.c-footer-navigation__top {
  position: relative;
  display: flex;
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.5;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__top {
    margin-top: 50px;
    font-size: 26px;
    letter-spacing: 0.1em;
    transition: opacity 200ms;
  }
}

@media print, screen and (width >=768px) and (width <= 1340px) {
  .c-footer-navigation__top {
    font-size: 20px;
  }
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__top:hover {
    opacity: 0.7;
  }
}

.c-footer-navigation__top::after {
  display: block;
  width: 30px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  flex: 0 0 30px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__top::after {
    flex: 0 0 50px;
    width: 50px;
    height: 14px;
  }
}

@media print, screen and (width >=768px) and (width <= 1340px) {
  .c-footer-navigation__top::after {
    flex: 0 0 40px;
    width: 40px;
    height: 13px;
  }
}

.c-footer-navigation__beautyjam {
  margin-top: 55px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__beautyjam {
    margin-top: 120px;
  }
}

.c-footer-navigation__beautyjam-logo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  margin-right: -20px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__beautyjam-logo {
    margin-right: auto;
  }
}

.c-footer-navigation__beautyjam-logo::after {
  width: auto;
  height: 1px;
  background-color: var(--color-00-white);
  content: "";
}

.c-footer-navigation__beautyjam-inner {
  padding: 36px 0 0;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__beautyjam-inner {
    padding: 0;
  }
}

.c-footer-navigation__beautyjam-content {
  display: grid;
  color: var(--color-00-black);
  grid-template-rows: repeat(2, 1fr);
  gap: 31px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__beautyjam-content {
    width: 100%;
    margin: 40px 0 50px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }
}

.c-footer-navigation__beautyjam-content a {
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__beautyjam-content a {
    transition: opacity 200ms;
  }
}

.c-footer-navigation__beautyjam-content a:hover {
  opacity: 0.7;
}

.c-footer-navigation__beautyjam-item {
  display: grid;
  align-items: center;
  grid-template-columns: 141px auto;
  gap: 25px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__beautyjam-item {
    grid-template-columns: 203px auto;
  }
}

.c-footer-navigation__beautyjam-text {
  color: var(--color-00-white);
  font-size: 18px;
  font-weight: bold;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__beautyjam-text {
    font-size: 19px;
  }
}

.c-footer-navigation__banner {
  margin-top: 70px;
  padding: 20px 15px;
  border-top: 1px solid var(--color-00-white);
  border-bottom: 1px solid var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__banner {
    width: 1100px;
    margin: 0 auto;
    padding: 30px 40px 30px 60px;
  }
}

.c-footer-navigation__banner a {
  text-decoration: none;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__banner a {
    transition: opacity 200ms;
  }
}

.c-footer-navigation__banner a:hover {
  opacity: 0.7;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__banner-inner {
    display: grid;
    grid-template-columns: 205px auto;
    gap: 40px;
    place-items: center;
  }
}

.c-footer-navigation__banner-image img {
  width: 100%;
}

.c-footer-navigation__banner-content {
  font-family: "Noto Sans JP", serif;
}

.c-footer-navigation__banner-title {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__banner-title {
    margin-top: 0;
    font-size: 20px;
  }
}

.c-footer-navigation__banner-text {
  margin-top: 18px;
  font-size: 14px;
}

@media print, screen and (width >=768px) {
  .c-footer-navigation__banner-text {
    font-size: 16px;
  }
}

@media print, screen and (width >=768px) {
  .c-button.-modal .c-button__link {
    height: 55px;
    font-size: 18px;
  }
}

.c-button__link {
  display: flex;
  width: 100%;
  height: 38px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-button__link {
    font-size: 16px;
  }
}

.c-button__link.-reserve {
  background-color: var(--color-00-white);
  border: 0;
  color: var(--color-button-02);
  transition: opacity 300ms;
}

@media print, screen and (width >=768px) {
  .c-button__link.-reserve:hover {
    opacity: 0.7;
  }
}

.c-button__link.-netshop {
  background-color: var(--color-button-02);
  border: 0;
  color: var(--color-00-white);
  transition: opacity 300ms;
}

@media print, screen and (width >=768px) {
  .c-button__link.-netshop:hover {
    opacity: 0.7;
  }
}

.c-button__link.-normal {
  background-color: var(--color-button-02);
  border: 0;
  color: var(--color-00-white);
  transition: opacity 300ms;
}

@media print, screen and (width >=768px) {
  .c-button__link.-normal:hover {
    opacity: 0.7;
  }
}

.c-banners {
  padding: 100px 20px;
}

@media print, screen and (width >=768px) {
  .c-banners {
    width: 1100px;
    margin: auto;
    padding: 70px 0 120px;
  }
}

.c-banners__calender {
  margin-bottom: 25px;
}

@media print, screen and (width >=768px) {
  .c-banners__calender {
    margin-bottom: 50px;
  }
}

.c-banners__calender-button-link {
  position: relative;
  display: flex;
  width: 100%;
  height: 153px;
  background-color: rgb(87 48 13 / 90%);
  color: var(--color-00-white);
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0;
  transition: filter 200ms;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

@media print, screen and (width >=768px) {
  .c-banners__calender-button-link {
    height: 225px;
  }
}

.c-banners__calender-button-link:hover {
  filter: brightness(1.1);
}

.c-banners__calender-button-text-en {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  gap: 8px;
}

@media print, screen and (width >=768px) {
  .c-banners__calender-button-text-en {
    font-size: 40px;
    gap: 13px;
  }
}

.c-banners__calender-button-text-en::before {
  display: block;
  width: 29px;
  height: 29px;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/common/icon_calendar.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

@media print, screen and (width >=768px) {
  .c-banners__calender-button-text-en::before {
    width: 36px;
    height: 36px;
  }
}

.c-banners__calender-button-text-jp {
  font-size: 20px;
}

@media print, screen and (width >=768px) {
  .c-banners__calender-button-text-jp {
    font-size: 18px;
  }
}

.c-banners__tokyu {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: 25px;
}

@media print, screen and (width >=768px) {
  .c-banners__tokyu {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    justify-content: center;
  }
}

.c-banners__tokyu-item {
  width: 100%;
}

.c-banners__tokyu a {
  display: flex;
  background-color: var(--color-00-white);
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-banners__tokyu a {
    height: 167px;
  }
}

@media (hover: hover) {
  .c-banners__tokyu a {
    transition: opacity 200ms;
  }

  .c-banners__tokyu a:hover {
    opacity: 0.7;
  }
}

.c-lower-hero {
  position: relative;
}

.c-lower-hero__image {
  width: 100%;
  height: auto;
}

@media print, screen and (width >=768px) {
  .c-lower-hero__image {
    min-width: 1200px;
  }
}

.c-lower-hero__image img {
  width: 100%;
  height: auto;
}

@media print, screen and (width >=768px) {
  .c-lower-hero__image img {
    object-position: center center;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.c-lower-hero__content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 40px 20px;
}

@media print, screen and (width >=768px) {
  .c-lower-hero__content {
    max-width: 1466px;
    margin: 0 auto;
    padding: 90px 50px 0;
  }
}

.c-lower-hero__title {
  color: var(--color-00-white);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

@media print, screen and (width >=768px) {
  .c-lower-hero__title {
    font-size: 52px;
  }
}

.c-lower-contents {
  position: relative;
  overflow: hidden;
  background-color: rgb(129 101 39 / 80%);
  color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-lower-contents {
    min-width: 1200px;
  }
}

.c-lower-contents__inner {
  padding: 100px 20px 30px;
}

@media print, screen and (width >=768px) {
  .c-lower-contents__inner {
    width: 1100px;
    margin: auto;
    padding: 150px 0;
  }
}

.c-lower-contents__title {
  font-size: 19px;
  line-height: 3.6rem;
  text-align: center;
}

@media print, screen and (width >=768px) {
  .c-lower-contents__title {
    font-size: 33px;
    line-height: 5.6rem;
  }
}

.c-lower-contents__text {
  margin: 32px 0 0;
  font-size: 13px;
  line-height: 2.2rem;
  text-align: center;
}

@media print, screen and (width >=768px) {
  .c-lower-contents__text {
    margin: 30px 0 0;
    font-size: 20px;
    line-height: 4.6rem;
  }
}

.c-special-care {
  position: relative;
  background-color: rgb(129 101 39 / 80%);
  color: var(--color-00-white);
}

@media print, screen and (width >=768px) {
  .c-special-care {
    min-width: 1200px;
  }
}

.c-special-care__inner {
  padding: 30px 20px 100px;
}

@media print, screen and (width >=768px) {
  .c-special-care__inner {
    width: 768px;
    margin: 0 auto;
    padding: 60px 0 120px;
  }
}

.c-relaxing {
  position: relative;
  background-color: var(--color-background-02);
  color: var(--color-00-black);
}

@media print, screen and (width >=768px) {
  .c-relaxing {
    min-width: 1200px;
  }
}

.c-relaxing__inner {
  padding: 100px 20px 110px;
}

@media print, screen and (width >=768px) {
  .c-relaxing__inner {
    width: 1100px;
    margin: auto;
    padding: 150px 0 200px;
  }
}

.c-trend-color {
  position: relative;
  background-color: var(--color-background-02);
  color: var(--color-00-black);
}

.c-trend-color__inner {
  padding: 100px 20px 110px;
}

@media print, screen and (width >=768px) {
  .c-trend-color__inner {
    width: 1100px;
    margin: auto;
    padding: 150px 0 200px;
  }
}

.c-list-item {
  font-family: var(--font-noto-sans);
}

.c-list-item + .c-list-item {
  margin-top: 60px;
}

@media print, screen and (width >=768px) {
  .c-list-item + .c-list-item {
    margin-top: 120px;
  }
}

.c-list-item__body {
  position: relative;
}

@media print, screen and (width >=768px) {
  .c-list-item__body {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
  }
}

.c-list-item__copy {
  margin-bottom: 20px;
}

@media print, screen and (width >=768px) {
  .c-list-item__copy {
    margin-bottom: 50px;
  }
}

.c-list-item__copy p {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0;
}

@media print, screen and (width >=768px) {
  .c-list-item__copy p {
    font-size: 22px;
  }
}

.c-list-item__copy sup {
  font-size: 80%;
  vertical-align: super;
}

.c-list-item__copy small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

@media print, screen and (width >=768px) {
  .c-list-item__copy small {
    font-size: 16px;
  }
}

.c-list-item__layout {
  display: grid;
  grid-template-areas: "content1 content2" "content4 content4" "content3 content3";
  grid-template-columns: 130px 1fr;
  gap: 15px;
  align-items: start;
}

@media print, screen and (width >=768px) {
  .c-list-item__layout {
    grid-template: "content1 content2" auto "content1 content3" 1fr "content4 content4" auto / 350px 1fr;
    gap: 15px 30px;
    align-items: start;
  }
}

.c-list-item__layout-content1 {
  grid-area: content1;
}

.c-list-item__layout-content2 {
  grid-area: content2;
}

@media print, screen and (width >=768px) {
  .c-list-item__layout-content2 {
    align-self: self-end;
  }
}

.c-list-item__layout-content3 {
  grid-area: content3;
}

@media print, screen and (width >=768px) {
  .c-list-item__layout-content3 {
    align-self: self-start;
  }
}

.c-list-item__layout-content3:not(:has(p)) {
  display: none;
}

.c-list-item__layout-content4 {
  grid-area: content4;
}

@media print, screen and (width >=768px) {
  .c-list-item__layout-content4 {
    justify-content: center;
    margin-top: 20px;
  }
}

.c-list-item__layout-content4:not(:has(.c-button)) {
  display: none;
}

@media print, screen and (width >=768px) {
  .c-list-item__image {
    grid-area: image;
  }
}

.c-list-item__image img {
  border: solid 1px var(--color-00-black);
}

.c-list-item__brand {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__brand {
    font-size: 16px;
  }
}

.c-list-item__name {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__name {
    font-size: 16px;
  }
}

.c-list-item__color {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__color {
    font-size: 16px;
  }
}

.c-list-item__size-price-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.c-list-item__size {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__size {
    font-size: 16px;
  }
}

.c-list-item__price {
  margin: 0 0 10px auto;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  text-align: right;
}

@media print, screen and (width >=768px) {
  .c-list-item__price {
    font-size: 16px;
  }
}

.c-list-item__note1 {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__note1 {
    font-size: 14px;
  }
}

.c-list-item__date1, .c-list-item__date2 {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__date1, .c-list-item__date2 {
    font-size: 16px;
  }
}

@media print, screen and (width >=768px) {
  .c-list-item__single-button {
    width: 350px;
    margin: 0 auto;
  }
}

.c-list-item__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

@media print, screen and (width >=768px) {
  .c-list-item__buttons {
    width: 535px;
    gap: 14px;
    margin: 0 auto;
  }
}

.c-list-item__button {
  height: 38px;
}

@media print, screen and (width >=768px) {
  .c-list-item__button {
    height: 55px;
  }
}

.c-list-item__shop {
  margin-top: 10px;
}

.c-list-item__shop-title {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__shop-title {
    font-size: 16px;
  }
}

.c-list-item__shop-text {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item__shop-text {
    font-size: 14px;
  }
}

.c-list-item__shop-text span::after {
  content: " / ";
}

.c-list-item__shop-text span:last-child::after {
  content: none;
}

.c-list-item-large {
  font-family: var(--font-noto-sans);
}

.c-list-item-large + .c-list-item-large {
  margin-top: 120px;
}

@media print, screen and (width >=768px) {
  .c-list-item-large + .c-list-item-large {
    margin-top: 120px;
  }
}

.c-list-item-large__body {
  position: relative;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__body {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
}

@media print, screen and (width >=768px) {
  .c-list-item-large__inner {
    display: grid;
    grid-template-areas: "copy copy" "image name" "image option" "image note" "image date1" "image date2" "button button" "shop shop";
    grid-template-columns: repeat(2, 1fr);
  }
}

@media print, screen and (width >=768px) {
  .c-list-item-large__image {
    grid-area: image;
    margin-right: 30px;
  }
}

.c-list-item-large__image img {
  border: solid 1px var(--color-00-black);
}

.c-list-item-large__single-button {
  margin: 20px 0;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__single-button {
    width: 350px;
    margin: 30px auto 50px;
    grid-area: button;
  }
}

.c-list-item-large__buttons {
  display: grid;
  margin: 20px 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__buttons {
    width: 535px;
    gap: 35px;
    margin: 30px auto 50px;
    grid-area: button;
  }
}

.c-list-item-large__buttons:not(:has(.c-button)) {
  display: none;
}

.c-list-item-large__button {
  height: 38px;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__button {
    height: 55px;
  }
}

@media print, screen and (width >=768px) {
  .c-list-item-large__single-button, .c-list-item-large__button {
    height: 55px;
  }
}

@media print, screen and (width >=768px) {
  .c-list-item-large__single-button .c-button, .c-list-item-large__button .c-button {
    height: 100%;
  }
}

@media print, screen and (width >=768px) {
  .c-list-item-large__single-button .c-button__link, .c-list-item-large__button .c-button__link {
    height: 100%;
  }
}

.c-list-item-large__single-button .c-button__link.-reserve, .c-list-item-large__button .c-button__link.-reserve {
  border: 1px solid var(--color-01-brown);
}

.c-list-item-large__copy {
  margin-top: 40px;
  margin-bottom: 25px;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__copy {
    margin-top: 0;
    margin-bottom: 50px;
    grid-area: copy;
  }
}

.c-list-item-large__copy p {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__copy p {
    font-size: 22px;
  }
}

.c-list-item-large__copy sup {
  font-size: 80%;
  vertical-align: super;
}

.c-list-item-large__copy small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__copy small {
    font-size: 16px;
  }
}

.c-list-item-large__copy::after {
  display: block;
  width: 165px;
  height: 1px;
  margin: 25px auto 0;
  background-color: var(--color-00-white);
  content: "";
}

@media print, screen and (width >=768px) {
  .c-list-item-large__copy::after {
    display: none;
  }
}

@media print, screen and (width >=768px) {
  .c-list-item-large__brand-name-wrapper {
    margin-top: 20px;
    grid-area: name;
  }
}

.c-list-item-large__brand {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  font-feature-settings: "palt";
}

@media print, screen and (width >=768px) {
  .c-list-item-large__brand {
    font-size: 16px;
  }
}

.c-list-item-large__name {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__name {
    margin: 10px 0 0;
    font-size: 16px;
  }
}

.c-list-item-large__color-size-price-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__color-size-price-wrapper {
    display: block;
    gap: 20px;
    grid-area: option;
  }
}

.c-list-item-large__color {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__color {
    font-size: 18px;
  }
}

.c-list-item-large__size {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__size {
    font-size: 18px;
  }
}

.c-list-item-large__price {
  margin-left: auto;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  text-align: right;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__price {
    margin-left: 0;
    font-size: 18px;
  }
}

.c-list-item-large__note1 {
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__note1 {
    font-size: 14px;
    grid-area: note;
  }
}

.c-list-item-large__date1, .c-list-item-large__date2 {
  margin: 0;
  color: var(--color-02-beige);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__date1, .c-list-item-large__date2 {
    display: inline-block;
    margin-right: 20px;
    font-size: 16px;
  }
}

.c-list-item-large__date1 {
  margin-top: 30px;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__date1 {
    grid-area: date1;
  }
}

@media print, screen and (width >=768px) {
  .c-list-item-large__date2 {
    grid-area: date2;
  }
}

.c-list-item-large__shop {
  margin-top: 40px;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__shop {
    grid-area: shop;
  }
}

.c-list-item-large__shop-title {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__shop-title {
    font-size: 18px;
  }
}

.c-list-item-large__shop-text {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-list-item-large__shop-text {
    font-size: 18px;
  }
}

.c-list-item-large__shop-text span::after {
  content: " | ";
}

.c-list-item-large__shop-text span:last-child::after {
  content: none;
}

.c-list-item-large__date {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  display: block;
  width: 95px;
  height: 95px;
  margin: 0 auto;
  background-color: var(--color-01-brown);
  border-radius: 50%;
  color: var(--color-00-white);
  font-family: var(--font-main);
  line-height: 1;
  transform-origin: left top;
}

@media print, screen and (width <=767px) {
  .c-list-item-large__date {
    top: 10px;
    left: 10px;
    transform: scale(0.8);
  }
}

.c-list-item-large__date > span {
  position: absolute;
  display: block;
  letter-spacing: 0;
}

.c-list-item-large__date-text1 {
  top: calc(50% - 33px);
  left: calc(50% - 33px);
  width: fit-content;
  font-size: 28px;
  text-align: right;
}

.c-list-item-large__date-text2 {
  top: calc(50% - 18px);
  left: 0;
  width: 100%;
  font-size: 20px;
  text-align: center;
}

.c-list-item-large__date-text3 {
  top: calc(50% - 10px);
  left: calc(50% + 3px);
  width: fit-content;
  font-size: 28px;
  text-align: left;
}

.c-list-item-large__date-text4 {
  top: calc(50% + 17px);
  left: 0;
  width: 100%;
  font-size: 18px;
  text-align: center;
}

.c-advent-calendar {
  margin-top: 50px;
  padding: 0;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar {
    width: 1100px;
    margin: auto;
    margin-top: 90px;
    padding: 0;
  }
}

.c-advent-calendar__list {
  display: grid;
  margin: 0 auto;
}

@media print, screen and (width <=767px) {
  .c-advent-calendar__list {
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    grid-template-areas: "item1 item1" "item2 item3" "item4 item4" "item5 item5" "item6 item7" "item8 item8" "item9 item9" "item10 item10" "item11 item11" "item12 item12" "item13 item14" "item15 item15" "item21 item21" "item22 item22" "item16 item16" "item17 item18" "item19 item19" "item20 item20" "item23 item23" "item24 item25" "item26 item26" "item27 item27";
  }
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    grid-template-areas: "item1 item1 item2 item3" "item1 item1 item4 item4" "item5 item5 item5 item5" "item6 item7 item8 item8" "item9 item9 item8 item8" "item10 item10 item11 item11" "item12 item12 item13 item14" "item12 item12 item15 item15" "item21 item21 item22 item22" "item16 item16 item16 item16" "item17 item18 item19 item19" "item20 item20 item19 item19" "item23 item23 item24 item25" "item23 item23 item26 item26" "item27 item27 item27 item27";
  }
}

.c-advent-calendar__item {
  position: relative;
  background-color: rgb(98 59 18 / 80%);
  color: #f7da86;
}

@media (hover: hover) {
  .c-advent-calendar__item {
    transition: background-color 300ms;
  }

  .c-advent-calendar__item:hover {
    background-color: rgb(98 59 18 / 60%);
  }
}

.c-advent-calendar__item[data-no="1"] {
  grid-area: item1;
}

.c-advent-calendar__item[data-no="2"] {
  grid-area: item2;
}

.c-advent-calendar__item[data-no="3"] {
  grid-area: item3;
}

.c-advent-calendar__item[data-no="4"] {
  grid-area: item4;
}

.c-advent-calendar__item[data-no="5"] {
  grid-area: item5;
}

.c-advent-calendar__item[data-no="6"] {
  grid-area: item6;
}

.c-advent-calendar__item[data-no="7"] {
  grid-area: item7;
}

.c-advent-calendar__item[data-no="8"] {
  grid-area: item8;
}

.c-advent-calendar__item[data-no="9"] {
  grid-area: item9;
}

.c-advent-calendar__item[data-no="10"] {
  grid-area: item10;
}

.c-advent-calendar__item[data-no="11"] {
  grid-area: item11;
}

.c-advent-calendar__item[data-no="12"] {
  grid-area: item12;
}

.c-advent-calendar__item[data-no="13"] {
  grid-area: item13;
}

.c-advent-calendar__item[data-no="14"] {
  grid-area: item14;
}

.c-advent-calendar__item[data-no="15"] {
  grid-area: item15;
}

.c-advent-calendar__item[data-no="16"] {
  grid-area: item16;
}

.c-advent-calendar__item[data-no="17"] {
  grid-area: item17;
}

.c-advent-calendar__item[data-no="18"] {
  grid-area: item18;
}

.c-advent-calendar__item[data-no="19"] {
  grid-area: item19;
}

.c-advent-calendar__item[data-no="20"] {
  grid-area: item20;
}

.c-advent-calendar__item[data-no="21"] {
  grid-area: item21;
}

.c-advent-calendar__item[data-no="22"] {
  grid-area: item22;
}

.c-advent-calendar__item[data-no="23"] {
  grid-area: item23;
}

.c-advent-calendar__item[data-no="24"] {
  grid-area: item24;
}

.c-advent-calendar__item[data-no="25"] {
  grid-area: item25;
}

.c-advent-calendar__item[data-no="26"] {
  grid-area: item26;
}

.c-advent-calendar__item[data-no="27"] {
  grid-area: item27;
}

.c-advent-calendar__item[data-no="28"] {
  grid-area: item28;
}

.c-advent-calendar__item[data-no="29"] {
  grid-area: item29;
}

.c-advent-calendar__item[data-no="30"] {
  grid-area: item30;
}

.c-advent-calendar__item[data-no="5"], .c-advent-calendar__item[data-no="6"], .c-advent-calendar__item[data-no="7"], .c-advent-calendar__item[data-no="8"], .c-advent-calendar__item[data-no="9"], .c-advent-calendar__item[data-no="16"], .c-advent-calendar__item[data-no="17"], .c-advent-calendar__item[data-no="18"], .c-advent-calendar__item[data-no="19"], .c-advent-calendar__item[data-no="20"] {
  background-color: rgb(255 252 226 / 80%);
  color: #5e360f;
}

@media (hover: hover) {
  .c-advent-calendar__item[data-no="5"], .c-advent-calendar__item[data-no="6"], .c-advent-calendar__item[data-no="7"], .c-advent-calendar__item[data-no="8"], .c-advent-calendar__item[data-no="9"], .c-advent-calendar__item[data-no="16"], .c-advent-calendar__item[data-no="17"], .c-advent-calendar__item[data-no="18"], .c-advent-calendar__item[data-no="19"], .c-advent-calendar__item[data-no="20"] {
    transition: background-color 300ms;
  }

  .c-advent-calendar__item[data-no="5"]:hover, .c-advent-calendar__item[data-no="6"]:hover, .c-advent-calendar__item[data-no="7"]:hover, .c-advent-calendar__item[data-no="8"]:hover, .c-advent-calendar__item[data-no="9"]:hover, .c-advent-calendar__item[data-no="16"]:hover, .c-advent-calendar__item[data-no="17"]:hover, .c-advent-calendar__item[data-no="18"]:hover, .c-advent-calendar__item[data-no="19"]:hover, .c-advent-calendar__item[data-no="20"]:hover {
    background-color: rgb(255 252 226 / 60%);
  }
}

.c-advent-calendar__item:nth-child(1), .c-advent-calendar__item:nth-child(8), .c-advent-calendar__item:nth-child(12), .c-advent-calendar__item:nth-child(19), .c-advent-calendar__item:nth-child(23) {
  position: relative;
}

.c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-button {
  grid-template: "brand " auto "image" auto "date" auto / 1fr;
  gap: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-button, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-button {
    gap: 10px;
    padding-bottom: 10px;
  }
}

.c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-image {
  width: 42.6666666667vw;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-image, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-image {
    width: 300px;
  }
}

.c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-brand {
  margin-top: 10px;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-brand, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-brand {
    margin-top: 5px;
  }
}

.c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-date, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-date, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-date, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-date, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-date {
  display: grid;
  grid-template-areas: "text1 text2" "text3 text3";
  align-items: center;
  justify-content: start;
  width: fit-content;
  margin: 0 auto;
}

.c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-date-text1, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-date-text1, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-date-text1, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-date-text1, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-date-text1 {
  margin-left: -0.5em;
  padding: 0;
  grid-area: text1;
}

.c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-date-text2, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-date-text2, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-date-text2, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-date-text2, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-date-text2 {
  grid-area: text2;
  margin-left: -1.8em;
}

.c-advent-calendar__item:nth-child(1) .c-advent-calendar__item-date-text3, .c-advent-calendar__item:nth-child(8) .c-advent-calendar__item-date-text3, .c-advent-calendar__item:nth-child(12) .c-advent-calendar__item-date-text3, .c-advent-calendar__item:nth-child(19) .c-advent-calendar__item-date-text3, .c-advent-calendar__item:nth-child(23) .c-advent-calendar__item-date-text3 {
  grid-area: text3;
  margin-top: -0.1em;
}

.c-advent-calendar__item:nth-child(1)::before, .c-advent-calendar__item:nth-child(1)::after, .c-advent-calendar__item:nth-child(8)::before, .c-advent-calendar__item:nth-child(8)::after, .c-advent-calendar__item:nth-child(12)::before, .c-advent-calendar__item:nth-child(12)::after, .c-advent-calendar__item:nth-child(19)::before, .c-advent-calendar__item:nth-child(19)::after, .c-advent-calendar__item:nth-child(23)::before, .c-advent-calendar__item:nth-child(23)::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/item_corner_left-beige.svg"), url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/item_corner_right-beige.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top 10px left 10px, top 10px right 10px;
  background-size: 45px 45px, 45px 45px;
  content: "";
  pointer-events: none;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item:nth-child(1)::before, .c-advent-calendar__item:nth-child(1)::after, .c-advent-calendar__item:nth-child(8)::before, .c-advent-calendar__item:nth-child(8)::after, .c-advent-calendar__item:nth-child(12)::before, .c-advent-calendar__item:nth-child(12)::after, .c-advent-calendar__item:nth-child(19)::before, .c-advent-calendar__item:nth-child(19)::after, .c-advent-calendar__item:nth-child(23)::before, .c-advent-calendar__item:nth-child(23)::after {
    background-position: top 15px left 15px, top 15px right 15px;
    background-size: 75px 75px, 75px 75px;
  }
}

.c-advent-calendar__item:nth-child(1)::after, .c-advent-calendar__item:nth-child(8)::after, .c-advent-calendar__item:nth-child(12)::after, .c-advent-calendar__item:nth-child(19)::after, .c-advent-calendar__item:nth-child(23)::after {
  transform: rotate(180deg);
}

.c-advent-calendar__item[data-no="8"]::before, .c-advent-calendar__item[data-no="8"]::after, .c-advent-calendar__item[data-no="19"]::before, .c-advent-calendar__item[data-no="19"]::after {
  background-image: url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/item_corner_left-brown.svg"), url("/shibuyabeautyjam/cosmeticfair/2025winter/assets/images/holiday_limited/item_corner_right-brown.svg");
}

.c-advent-calendar__item[data-no="2"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="6"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="13"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="17"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="24"] .c-advent-calendar__item-button {
  grid-template-areas: "brand" "image" "date";
  grid-template-columns: 1fr;
  gap: 5px;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="2"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="6"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="13"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="17"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="24"] .c-advent-calendar__item-button {
    gap: 10px;
  }
}

.c-advent-calendar__item[data-no="3"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="7"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="14"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="18"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="25"] .c-advent-calendar__item-button {
  grid-template-areas: "date" "image" "brand";
  grid-template-columns: 1fr;
  gap: 5px;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="3"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="7"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="14"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="18"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="25"] .c-advent-calendar__item-button {
    gap: 10px;
  }
}

.c-advent-calendar__item[data-no="5"], .c-advent-calendar__item[data-no="16"], .c-advent-calendar__item[data-no="27"] {
  position: relative;
}

.c-advent-calendar__item[data-no="5"]::before, .c-advent-calendar__item[data-no="16"]::before, .c-advent-calendar__item[data-no="27"]::before {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: solid 1px #623b12;
  content: "";
  pointer-events: none;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="5"]::before, .c-advent-calendar__item[data-no="16"]::before, .c-advent-calendar__item[data-no="27"]::before {
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
  }
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="5"] .c-advent-calendar__item-image, .c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-image, .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-image {
    width: 230px;
  }
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="5"] .c-advent-calendar__item-date-text1, .c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-date-text1, .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-date-text1 {
    font-size: 88px;
  }
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="5"] .c-advent-calendar__item-date-text2, .c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-date-text2, .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-date-text2 {
    font-size: 30px;
  }
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="5"] .c-advent-calendar__item-date-text3, .c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-date-text3, .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-date-text3 {
    font-size: 108px;
  }
}

.c-advent-calendar__item[data-no="5"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-button {
  grid-template-areas: "brand date" "image date";
  grid-template-columns: 1fr 1fr;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="5"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-button {
    grid-template-areas: "brand image date date";
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.c-advent-calendar__item[data-no="27"]::before {
  border-color: rgb(255 231 162 / 60%);
}

.c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-button {
  grid-template-areas: "brand brand" "image date";
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-button {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "brand image  date";
  }
}

.c-advent-calendar__item[data-no="4"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="9"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="15"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="20"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="26"] .c-advent-calendar__item-button {
  grid-template-areas: "brand date" "image date";
  grid-template-columns: 1fr 1fr;
  gap: 5px 0;
  padding-bottom: 5px;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="4"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="9"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="15"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="20"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="26"] .c-advent-calendar__item-button {
    gap: 10px 0;
    padding-bottom: 10px;
  }
}

.c-advent-calendar__item[data-no="10"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="11"] .c-advent-calendar__item-button {
  grid-template-areas: "date brand" "date image";
  grid-template-columns: 1fr 1fr;
  gap: 5px 0;
  padding-bottom: 5px;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="10"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="11"] .c-advent-calendar__item-button {
    gap: 10px 0;
    padding-bottom: 10px;
  }
}

.c-advent-calendar__item[data-no="21"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="22"] .c-advent-calendar__item-button {
  padding-bottom: 5px;
  grid-template-areas: "brand brand" "image date";
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

@media print, screen and (width <=767px) {
  .c-advent-calendar__item[data-no="21"] .c-advent-calendar__item-button .c-advent-calendar__item-brand, .c-advent-calendar__item[data-no="22"] .c-advent-calendar__item-button .c-advent-calendar__item-brand {
    text-align: left;
  }
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="21"] .c-advent-calendar__item-button, .c-advent-calendar__item[data-no="22"] .c-advent-calendar__item-button {
    grid-template-areas: "date brand" "date image";
    gap: 10px 0;
    padding-bottom: 10px;
  }
}

.c-advent-calendar__item[data-no="1"] .c-advent-calendar__item-image {
  transform: scale(1.2);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="1"] .c-advent-calendar__item-image {
    transform: scale(1.4);
  }
}

.c-advent-calendar__item[data-no="3"] .c-advent-calendar__item-image {
  transform: scale(1.65) translateY(-5px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="3"] .c-advent-calendar__item-image {
    transform: scale(1.65) translateY(-10px);
  }
}

.c-advent-calendar__item[data-no="4"] .c-advent-calendar__item-image {
  transform: scale(1.3);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="4"] .c-advent-calendar__item-image {
    transform: scale(1.2);
  }
}

.c-advent-calendar__item[data-no="5"] .c-advent-calendar__item-image {
  transform: scale(1.3);
}

.c-advent-calendar__item[data-no="6"] .c-advent-calendar__item-image {
  transform: scale(1.5);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="6"] .c-advent-calendar__item-image {
    transform: scale(1.5);
  }
}

.c-advent-calendar__item[data-no="7"] .c-advent-calendar__item-image {
  transform: scale(1.4) translateY(-5px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="7"] .c-advent-calendar__item-image {
    transform: scale(1.6) translateY(-10px);
  }
}

.c-advent-calendar__item[data-no="9"] .c-advent-calendar__item-image {
  transform: scale(1.2) translateY(-5px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="9"] .c-advent-calendar__item-image {
    transform: scale(1.2) translateY(-8px);
  }
}

.c-advent-calendar__item[data-no="10"] .c-advent-calendar__item-image {
  transform: scale(1.2) translateY(-5px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="10"] .c-advent-calendar__item-image {
    transform: scale(1.2) translateY(-10px);
  }
}

.c-advent-calendar__item[data-no="11"] .c-advent-calendar__item-image {
  transform: scale(1.6) translateY(-5px) translateX(-3px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="11"] .c-advent-calendar__item-image {
    transform: scale(2) translateY(-10px) translateX(-12px);
  }
}

.c-advent-calendar__item[data-no="12"] .c-advent-calendar__item-image {
  transform: scale(1.7);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="12"] .c-advent-calendar__item-image {
    transform: scale(1.6);
  }
}

.c-advent-calendar__item[data-no="14"] .c-advent-calendar__item-image {
  transform: scale(1.4);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="14"] .c-advent-calendar__item-image {
    transform: scale(1.7);
  }
}

.c-advent-calendar__item[data-no="15"] .c-advent-calendar__item-image {
  transform: scale(0.9) translateY(-3px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="15"] .c-advent-calendar__item-image {
    transform: scale(0.9) translateY(-5px);
  }
}

.c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-image {
  transform: scale(1.1);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="16"] .c-advent-calendar__item-image {
    transform: scale(1.2);
  }
}

.c-advent-calendar__item[data-no="17"] .c-advent-calendar__item-image {
  transform: scale(1.3);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="17"] .c-advent-calendar__item-image {
    transform: scale(1.5);
  }
}

.c-advent-calendar__item[data-no="18"] .c-advent-calendar__item-image {
  transform: scale(1.2);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="18"] .c-advent-calendar__item-image {
    transform: scale(1.5) translateY(-5px);
  }
}

.c-advent-calendar__item[data-no="19"] .c-advent-calendar__item-image {
  transform: scale(1.3);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="19"] .c-advent-calendar__item-image {
    transform: scale(1.3);
  }
}

.c-advent-calendar__item[data-no="20"] .c-advent-calendar__item-image {
  transform: scale(0.8) translateY(-10px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="20"] .c-advent-calendar__item-image {
    transform: scale(0.9) translateY(-5px);
  }
}

.c-advent-calendar__item[data-no="21"] .c-advent-calendar__item-image {
  transform: scale(1.3);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="21"] .c-advent-calendar__item-image {
    transform: scale(1.5) translateY(-10px) translateX(-10px);
  }
}

.c-advent-calendar__item[data-no="22"] .c-advent-calendar__item-image {
  transform: scale(1.1);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="22"] .c-advent-calendar__item-image {
    transform: scale(1.2) translateY(-5px) translateX(-10px);
  }
}

.c-advent-calendar__item[data-no="23"] .c-advent-calendar__item-brand {
  margin-top: 25px;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="23"] .c-advent-calendar__item-brand {
    margin-top: 15px;
  }
}

.c-advent-calendar__item[data-no="23"] .c-advent-calendar__item-image {
  transform: scale(1.1);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="23"] .c-advent-calendar__item-image {
    transform: scale(1.2);
  }
}

.c-advent-calendar__item[data-no="24"] .c-advent-calendar__item-image {
  transform: scale(1.3);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="24"] .c-advent-calendar__item-image {
    transform: scale(1.4);
  }
}

.c-advent-calendar__item[data-no="25"] .c-advent-calendar__item-image {
  transform: scale(1);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="25"] .c-advent-calendar__item-image {
    transform: scale(1.2) translateY(-5px);
  }
}

.c-advent-calendar__item[data-no="26"] .c-advent-calendar__item-image {
  transform: scale(1.4) translateY(-5px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="26"] .c-advent-calendar__item-image {
    transform: scale(1.6) translateY(-10px) translateX(5px);
  }
}

.c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-image {
  transform: scale(1.1) translateX(5px);
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item[data-no="27"] .c-advent-calendar__item-image {
    transform: scale(1.3);
  }
}

.c-advent-calendar__item-button {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  background-color: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item-button {
    padding: 30px 10px;
  }
}

.c-advent-calendar__item-image {
  width: 29.3333333333vw;
  grid-area: image;
  margin: 0 auto;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item-image {
    width: 150px;
  }
}

.c-advent-calendar__item-image img {
  display: block;
  width: 100%;
  height: auto;
}

.c-advent-calendar__item-brand {
  font-family: var(--font-noto-sans);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  grid-area: brand;
  letter-spacing: -0.05em;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item-brand {
    font-size: 17px;
  }
}

.c-advent-calendar__item-date {
  grid-area: date;
}

.c-advent-calendar__item-date-text1 {
  font-family: viva-std-condensed, Roboto, sans-serif;
  font-size: 48px;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item-date-text1 {
    padding-bottom: 15px;
  }
}

.c-advent-calendar__item-date-text2 {
  font-family: var(--font-noto-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item-date-text2 {
    font-size: 24px;
  }
}

.c-advent-calendar__item-date-text3 {
  font-family: viva-std-condensed, Roboto, sans-serif;
  font-size: 58px;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
}

@media print, screen and (width >=768px) {
  .c-advent-calendar__item-date-text3 {
    font-size: 88px;
  }
}

.c-advent-modal {
  position: fixed;
  top: 70px;
  left: 0;
  z-index: 199;
  overflow-y: auto;
  overflow-y: scroll;
  width: 100%;
  height: calc(100dvh - 70px);
  margin: 0;
  padding: 20px 0 0;
  background-color: rgb(98 59 18 / 90%);
  backdrop-filter: blur(10px);
  border: 0;
  color: var(--color-00-white);
  transition: opacity 200ms;
  overscroll-behavior: none;
}

.c-advent-modal ::backdrop {
  background: rgb(0 0 0 / 40%);
  backdrop-filter: blur(6px);
}

@media print, screen and (width >=768px) {
  .c-advent-modal {
    top: 95px;
    height: calc(100vh - 95px);
    padding-top: 20px;
  }
}

.c-advent-modal__body {
  position: relative;
  padding-bottom: 100px;
  font-family: var(--font-noto-sans);
}

@media print, screen and (width >=768px) {
  .c-advent-modal__body {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 60px;
  }
}

.c-advent-modal__close {
  position: sticky;
  top: 0;
  display: flex;
  width: 50px;
  height: 50px;
  margin: 0 0 0 auto;
  background-color: unset;
  border: none;
  align-items: center;
  justify-content: center;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__close {
    top: 0;
    margin-right: -50px;
  }
}

.c-advent-modal__close-icon {
  display: flex;
  width: 32px;
  height: 18px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 15px;
}

.c-advent-modal__close-icon > span {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 1px;
  background-color: var(--color-00-white);
  border-radius: 2px;
  transition: transform 100ms;
}

.c-advent-modal__close-icon > span:nth-child(1) {
  transform: translateY(8px) rotate(30deg);
}

.c-advent-modal__close-icon > span:nth-child(2) {
  transform: translateY(-8px) rotate(-30deg);
}

.c-advent-modal__inner {
  width: 280px;
  margin: 0 auto;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__inner {
    width: 100%;
  }
}

.c-advent-modal__copy {
  margin-bottom: 20px;
  font-family: var(--font-main);
}

@media print, screen and (width >=768px) {
  .c-advent-modal__copy {
    margin-bottom: 50px;
  }
}

.c-advent-modal__copy p {
  font-size: 15px;
  text-align: center;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__copy p {
    font-size: 22px;
  }
}

.c-advent-modal__copy sup {
  font-size: 80%;
  vertical-align: super;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__layout {
    display: grid;
    grid-template-areas: "content1 content2" "content3 content3";
    grid-template-columns: 350px 1fr;
    gap: 40px 30px;
    align-items: start;
  }
}

.c-advent-modal__layout-content1 {
  grid-area: content1;
}

.c-advent-modal__layout-content2 {
  grid-area: content2;
  margin-top: 20px;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__layout-content2 {
    margin-top: 0;
  }
}

.c-advent-modal__layout-content3 {
  grid-area: content3;
  margin-top: 20px;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__layout-content3 {
    margin-top: 0;
  }
}

.c-advent-modal__image {
  position: relative;
  background-color: var(--color-00-white);
}

.c-advent-modal__image img {
  border: solid 1px var(--color-01-text);
}

.c-advent-modal__date {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: block;
  width: 95px;
  height: 95px;
  margin: 0 auto;
  background-color: var(--color-button-01);
  border-radius: 50%;
  color: var(--color-00-black);
  font-family: var(--font-main);
  line-height: 1;
  transform-origin: left top;
}

@media print, screen and (width <=767px) {
  .c-advent-modal__date {
    transform: scale(0.8);
  }
}

.c-advent-modal__date > span {
  position: absolute;
  display: block;
  letter-spacing: 0;
}

.c-advent-modal__date-text1 {
  top: calc(50% - 33px);
  left: calc(50% - 33px);
  width: fit-content;
  font-size: 28px;
  text-align: right;
}

.c-advent-modal__date-text2 {
  top: calc(50% - 18px);
  left: 0;
  width: 100%;
  font-size: 20px;
  text-align: center;
}

.c-advent-modal__date-text3 {
  top: calc(50% - 10px);
  left: calc(50% + 3px);
  width: fit-content;
  font-size: 28px;
  text-align: left;
}

.c-advent-modal__date-text4 {
  top: calc(50% + 17px);
  left: 0;
  width: 100%;
  font-size: 18px;
  text-align: center;
}

.c-advent-modal__brand {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__brand {
    font-size: 16px;
  }
}

.c-advent-modal__name {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__name {
    font-size: 16px;
  }
}

.c-advent-modal__color {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__color {
    font-size: 16px;
  }
}

.c-advent-modal__size-price-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.c-advent-modal__size {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__size {
    font-size: 16px;
  }
}

.c-advent-modal__price {
  margin: 0 0 10px auto;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  text-align: right;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__price {
    font-size: 16px;
  }
}

.c-advent-modal__note1 {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__note1 {
    font-size: 14px;
  }
}

.c-advent-modal__date1, .c-advent-modal__date2 {
  margin: 20px 0 0;
  color: var(--color-01-beige);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__date1, .c-advent-modal__date2 {
    font-size: 16px;
  }
}

.c-advent-modal__date1 + .c-advent-modal__date2 {
  margin-top: 5px;
}

.c-advent-modal__single-button {
  margin: 20px 0;
}

.c-advent-modal__buttons {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__buttons {
    gap: 20px;
    max-width: 535px;
  }
}

@media print, screen and (width >=768px) {
  .c-advent-modal__button {
    height: 55px;
  }
}

.c-advent-modal__shop {
  margin-top: 20px;
}

.c-advent-modal__shop-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__shop-title {
    font-size: 16px;
  }
}

.c-advent-modal__shop-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media print, screen and (width >=768px) {
  .c-advent-modal__shop-text {
    font-size: 14px;
  }
}

.c-advent-modal__shop-text span::after {
  content: " | ";
}

.c-advent-modal__shop-text span:last-child::after {
  content: none;
}

.js-inview {
  opacity: 0;
  transition: opacity 0.4s ease-out, transform 0.8s ease-out;
  transform: translateY(50px);
}

.js-inview.-showed {
  opacity: 1;
  transform: translateY(0);
}