/** Shopify CDN: Minification failed Line 1493:10 Expected ";" **/ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');:root { --Number: 0rem; --Size-Common-120-: 7.5rem; --Size-Common-16-: 1rem; --Size-Common-160-: 10rem; --Size-Common-20-: 1.25rem; --Size-Common-24-: 1.5rem; --Size-Common-240-: 15rem; --Size-Common-32-: 2rem; --Size-Common-4-: 0.25rem; --Size-Common-40-: 2.5rem; --Size-Common-48-: 3rem; --Size-Common-64-: 4rem; --Size-Common-72-: 4.5rem; --Size-Common-8-: 0.5rem; --Size-Common-80-: 5rem; --Size-Common-92-: 5.75rem; --Size-Common-SP-25: 0rem; --Size-Grid-Frame: 90rem; --Size-Grid-Grid-11: 73.25rem; --Size-Grid-Grid-12: 80rem; --Size-Grid-Grid-4: 26rem; --Size-Grid-Grid-5: 32.75rem; --Size-Grid-Grid-6: 39.5rem; --Size-Grid-Grid-8: 53rem; --Size-Image-Magazine-2clm: 32.75rem; --Size-Image-Product-2clm: 32.75rem; --Size-Image-Product-3clm: 26rem; --Size-Text-Common-H2: 1.5rem; --Size-Text-Common-Text-L: 1.25rem; --Size-Text-Common-Text-LL: 1.75rem; --Size-Text-Common-Text-M: 1rem; --Size-Text-Common-Text-S: 0.875rem; --Size-Text-Common-Text-SS: 0.75rem; --Size-Text-Mag-Mag-H1: 2.5rem; --Size-Text-Mag-Mag-H2: 1.75rem; --Size-Text-Mag-Mag-Text: 1.125rem; --Size-Text-Other-Text-Product-Name: 2rem; --Typo-JP-ex-small: 0.75rem; /* == Original == */ /* ヘッダー高さは iPhone ノッチ/ステータスバー分（safe-area-inset-top）を含む */ --global-header-height: calc(6.25rem + env(safe-area-inset-top, 0px)); --global-header-height-home: calc(5.25rem + env(safe-area-inset-top, 0px)); --z-index-global-header: 100; --content-padding-inline: 5rem; }@media (min-width: 769px) { :root { --content-max-width: var(--Size-Grid-Frame); } }@media (max-width: 768px){ :root { --Size-Common-120-: 5.625rem; --Size-Common-16-: 0.75rem; --Size-Common-160-: 7.5rem; --Size-Common-20-: 0.9375rem; --Size-Common-24-: 1.125rem; --Size-Common-240-: 11.25rem; --Size-Common-32-: 1.5rem; --Size-Common-4-: 0.1875rem; --Size-Common-40-: 1.875rem; --Size-Common-48-: 2.25rem; --Size-Common-64-: 3rem; --Size-Common-72-: 3.375rem; --Size-Common-8-: 0.375rem; --Size-Common-80-: 3.75rem; --Size-Common-92-: 4.3125rem; --Size-Common-SP-25: 1.5625rem; --Size-Grid-Frame: 23.4375rem; --Size-Grid-Grid-11: 21.875rem; --Size-Grid-Grid-12: 20.3125rem; --Size-Grid-Grid-4: 20.3125rem; --Size-Grid-Grid-5: 20.3125rem; --Size-Grid-Grid-6: 20.3125rem; --Size-Grid-Grid-8: 20.3125rem; --Size-Image-Magazine-2clm: 21.875rem; --Size-Image-Product-2clm: 20.3125rem; --Size-Image-Product-3clm: 9.6875rem; --Size-Text-Common-H2: 1.25rem; --Size-Text-Common-Text-L: 1.125rem; --Size-Text-Common-Text-LL: 1.3125rem; --Size-Text-Common-Text-M: 0.9375rem; --Size-Text-Common-Text-S: 0.8125rem; --Size-Text-Common-Text-SS: 0.6875rem; --Size-Text-Mag-Mag-H1: 1.5rem; --Size-Text-Mag-Mag-H2: 1.3125rem; --Size-Text-Mag-Mag-Text: 1rem; --Size-Text-Other-Text-Product-Name: 1.5rem; --global-header-height: calc(4rem + env(safe-area-inset-top, 0px)); --global-header-height-home: calc(4rem + env(safe-area-inset-top, 0px)); --content-padding-inline: 1.5625rem; } }/* 狭幅ヘッダー（Figma 476-4975 / 476-5103）: 641〜840px は2段ナビ・高さ83px */@media (min-width: 641px) and (max-width: 840px){ :root { --global-header-height: calc(5.1875rem + env(safe-area-inset-top, 0px)); --global-header-height-home: calc(5.1875rem + env(safe-area-inset-top, 0px)); } }:root { --Color-Black: rgb(0 0 0); --Color-Gray: rgb(215 215 215); --Color-White: rgb(255 255 255); --Color-Body: #CACACA; --Color-Yellow: #FFD900; }:root { --Font-Font: fot-cezanne-pron, 'FOT-Cezanne ProN', sans-serif; }:root{ /* * text-box-trim未対応ブラウザ(Firefox)向けのトリム量（capボックス中央前提の近似・負値）。 * 自動適用はしない。leading-trimを効かせたい箇所で任意に以下のように書く: * * @supports not (text-box-trim: trim-both){ * .foo{ margin-block: var(--leading-trim); } ← マージン指定の無い要素 * .bar{ margin-block-start: calc(rem(40px) + var(--leading-trim)); } ← 明示マージンと合成 * } */ --leading-trim: calc((1cap - 1lh) / 2); }:root { --easing-cubic-out: cubic-bezier(0.23, 1, 0.32, 1); --easing-cubic-in: cubic-bezier(0.42, 0, 1, 1); --easing-cubic-in-out: cubic-bezier(0.42, 0, 0.58, 1); --easing-cubic-out-in: cubic-bezier(0.23, 1, 0.32, 1); --easing-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --easing-quad-in: cubic-bezier(0.16, 1, 0.3, 1); --easing-quad-in-out: cubic-bezier(0.42, 0, 0.58, 1); --easing-quad-out-in: cubic-bezier(0.25, 0.46, 0.45, 0.94); --easing-quart-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --easing-quart-in: cubic-bezier(0.16, 1, 0.3, 1); --easing-quart-in-out: cubic-bezier(0.42, 0, 0.58, 1); --easing-quart-out-in: cubic-bezier(0.25, 0.46, 0.45, 0.94); --easing-quint-out: cubic-bezier(0.23, 1, 0.32, 1); --easing-quint-in: cubic-bezier(0.64, 0, 0.78, 0); --easing-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1); --easing-quint-out-in: cubic-bezier(0.77, 0, 0.17, 1); --easing-expo-out: cubic-bezier(0.19, 1, 0.22, 1); --easing-expo-in: cubic-bezier(0.95, 0.05, 0.79, 0.03); --easing-expo-in-out: cubic-bezier(1, 0, 0, 1); --easing-expo-out-in: cubic-bezier(0, 0, 0, 1); --easing-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1); --easing-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335); --easing-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86); --easing-circ-out-in: cubic-bezier(0.075, 0.82, 0.165, 1); --easing-bounce-out: cubic-bezier(0.175, 0.885, 0.32, 1.275); --easing-bounce-in: cubic-bezier(0.6, -0.28, 0.735, 0.045); --easing-bounce-in-out: cubic-bezier(0.42, 0, 0.58, 1); --easing-bounce-out-in: cubic-bezier(0.175, 0.885, 0.32, 1.275); --easing-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275); --easing-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045); --easing-back-in-out: cubic-bezier(0.42, 0, 0.58, 1); --easing-back-out-in: cubic-bezier(0.175, 0.885, 0.32, 1.275); }:root { --z-index-global-logo: 80; --z-index-global-nav-toggle: 100; --z-index-global-cart-toggle: 100; --z-index-global-menu: 120; /* ヘッダーはSPメニューより上（メニュー展開中もロゴ・×・カートを見せる）、 カートモーダルより下（モーダルは自前のロゴ・×を持つため覆わせる） */ --z-index-global-header: 150; --z-index-global-nav-modal: 200; --z-index-global-cart-modal: 200; --z-index-product-quick-cart: 110; --z-index-curtain: 200; }:root { /* 色の定義をシンプルに */ --focus-white: #ffffff; --focus-yellow: #FFD43D; --focus-black: #000000; /* 必要に応じて太さを調整可能に */ --ring-yellow-width: 2px; --ring-white-width: 4px; --ring-black-width: 6px; }:root { --transition-hover-image-scale: 1.05; --transition-hover-image-scale-duration: 0.3s; --transition-hover-image-scale-easing: var(--easing-quart-out); --transition-hover-image-scale-base: var(--transition-hover-image-scale-duration) var(--transition-hover-image-scale-easing); }@keyframes spinner-dash { 0% { stroke-dashoffset: 280; } 50% { stroke-dashoffset: 75; transform: rotate(135deg); } 100% { stroke-dashoffset: 280; transform: rotate(450deg); } }@keyframes spinner-rotator{ 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } }/* @keyframes arrow-right-hover{ 0% { transform: translateX(0); } 50% { transform: translateX(0.5em); } 100% { transform: translateX(0); } } *//* Foundation *//*! kiso.css v1.2.4 | MIT License | https://github.com/tak-dcxi/kiso.css *//* ====================================================== // MARK: Universal // ====================================================== */*, ::before, ::after { /* * Includes `padding` and `border` in the element's specified dimensions. * It is highly recommended to set `box-sizing: border-box;` by default, as it makes styling much easier, especially when specifying `width: 100%;`. */ box-sizing: border-box; }/* ====================================================== // MARK: Document and Body Elements // ====================================================== */:where(:root) { /* In Safari, if `font-family` is not specified, a serif font is applied by default, so `sans-serif` is set as the default here. */ font-family: sans-serif; /* * For accessibility, it is recommended to set the `line-height` to at least 1.5 times the text size within paragraphs. * @see https://waic.jp/translations/WCAG21/#visual-presentation */ line-height: 1.5; /* Remove space when punctuation marks are adjacent, and also remove leading spaces in a line. */ text-spacing-trim: trim-start; /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */ text-autospace: normal; /* Prevents misreading by applying strict line-breaking rules. */ line-break: strict; /* Wraps English words mid-word. Specifying `anywhere` also prevents content from overflowing in layouts like `flex` or `grid`. */ overflow-wrap: anywhere; /* * Mobile browsers have an algorithm that automatically adjusts font sizes to prevent text from becoming too small. * This controls the auto-adjustment feature to prevent unwanted resizing. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* * Prevents layout shift caused by the appearance or disappearance of the scrollbar. * Starting with Chrome 145, specifying `scrollbar-gutter: stable` will cause vw to be calculated without considering the scrollbar, which will also prevent horizontal scrolling. */ scrollbar-gutter: stable; /* Suppresses the tap highlight on iOS. */ -webkit-tap-highlight-color: transparent; }:where(body) { /* * When creating a sticky footer, a minimum height is often required. * Setting the `min-block-size` to the dynamic viewport height ensures enough space for the footer. */ min-block-size: 100dvb; /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */ margin: unset; }/* ====================================================== // MARK: Sections // ------------------------------------------------------ */:where(:is(h1, h2, h3, h4, h5, h6):lang(en)) { /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */ text-wrap: pretty; }:where(h1) { /* * Adjusts user agent (UA) styles for `h1` elements within sectioning content. * This addresses DevTools warnings that appear when `h1` elements nested within sectioning content lack `font-size` and `margin` properties. * @see https://html.spec.whatwg.org/#sections-and-headings */ margin-block: 0.67em; font-size: 2em; }:where(h2, h3, h4, h5, h6) { /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-block: unset; }:where(search) { /* * The `` element is supported from Safari 17. * This prevents it from being displayed as an inline element in unsupported environments. */ display: block flow; }/* ====================================================== // MARK: Grouping content // ====================================================== */:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) { /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-block: unset; }:where(blockquote, figure) { /* The `margin-inline` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-inline: unset; }:where(p:lang(en)) { /* * In English, a single word on the last line is called a "widow" or "orphan" and is considered something to avoid as it makes the text harder to read. * Therefore, when lang="en", this prevents the last line from ending with a single word. */ text-wrap: pretty; }:where(address:lang(ja)) { /* Italic style is not common in Japanese, so the `font-style` is reset. */ font-style: unset; }:where(ul, ol, menu) { /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ padding-inline-start: unset; /* * In Safari, using `list-style: none` prevents screen readers from announcing lists. * `list-style-type: ""` is used to hide markers without affecting accessibility. * @see https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */ list-style-type: ""; }:where(dt) { /* It is common to display `
` elements in bold, so `font-weight: bolder;` is set by default. */ font-weight: bolder; }:where(dd) { /* The `margin-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */ margin-inline-start: unset; }:where(pre) { /* * Since `text-spacing-trim` can affect spacing in `
` elements even with its initial value, the final rendering may depend on the user's font settings.
  * To ensure consistent alignment, `space-all` is explicitly specified and inheritance is prevented.
  */
  text-spacing-trim: space-all;

  /* Set to `no-autospace` as it can cause misalignment with monospaced fonts. */
  text-autospace: no-autospace;
}@media print {
  :where(pre) {
    /* Prevent text wrapping in print media. */
    text-wrap-mode: unset;
  }
}/* ======================================================
//  MARK: Text-level semantics
// ====================================================== */:where(em:lang(ja)) {
  /* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
  font-weight: bolder;
}:where(:is(i, cite, em, dfn):lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}:where(u, s, del, ins) {
  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}:where(code, kbd, samp) {
  /*
  * Set a monospace font family referencing Tailwind.
  * @see https://tailwindcss.com/docs/font-family
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to `initial` to prevent inheritance. */
  font-feature-settings: initial;
  font-variation-settings: initial;

  /* Resets the `font-size` specified in the UA stylesheet to allow inheritance. */
  font-size: unset;

  /*
  * Disables font ligatures for programming fonts (like Fira Code)
  * to prevent character combinations like `=>` from being rendered as a single symbol (e.g., `⇒`).
  */
  font-variant-ligatures: none;
}:where(abbr[title]) {
  /*
  * The `` element with the `title` attribute isn't helpful regarding accessibility because support is inconsistent, and it's only accessible to some users.
  * This rule shows a dotted underline on abbreviations in all browsers (there's a bug in Safari) and changes the cursor.
  * @see https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
  */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-inset: auto;
  cursor: help;
}:where(time) {
  /* Set to `no-autospace` because date notations in typography do not include spaces. */
  text-autospace: no-autospace;
}@media (forced-colors: active) {
  :where(mark) {
    /*
    * In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
    */
    background-color: Highlight;
    color: HighlightText;
  }
}@media print {
  :where(mark) {
    /*
    * Not all printers support color, and users might print in grayscale.
    * It's worth adding a non-disruptive style that scales with the text, as an alternative to relying only on background color.
    * @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkPrint
    */
    border-width: 1px;
    border-style: dotted;
  }
}/* ======================================================
//  MARK: Links
// ====================================================== */:where(a) {
  /*
  * The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance.
  * In Firefox on iOS, the user agent stylesheet’s text color is applied even when the text is not a link.
  * @see https://github.com/darkreader/darkreader/issues/9836
  */
  color: unset;
}:where(a:any-link) {
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  text-decoration-line: unset;

  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;

  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}/* ======================================================
//  MARK: Embedded content
// ====================================================== */:where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) {
  /* Prevents overflow by setting the maximum width to `100%`. */
  max-inline-size: 100%;

  /* Prevents extra space from appearing at the bottom of the element. */
  vertical-align: bottom;
}:where(img, svg, picture, video, canvas, model, iframe, embed, object) {
  /*
  * Automatically adjust block size based on content.
  * Exclude the