@charset "UTF-8";/*! 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 `<search>` 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 `<dt>` 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 `<pre>` 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 `<abbr>` 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 <audio> element as it disappears when block-size is auto.
  * @see https://github.com/tak-dcxi/kiso.css/issues/5
  */
  block-size: auto;
}

:where(iframe) {
  /* The `border` specified in the UA stylesheet is often unnecessary, so it is reset. */
  border: unset;
}

/* ======================================================
//  MARK: Tabular data
// ====================================================== */
:where(table) {
  /* Collapse borders for a more refined table design. */
  border-collapse: collapse;
}

:where(caption, th) {
  /* The `text-align` specified in the UA stylesheet is often unnecessary, so it is reset. */
  text-align: unset;
}

:where(caption: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;
}

/* ======================================================
//  MARK: Forms
// ====================================================== */
:where(button, input, select, textarea),
::file-selector-button {
  /*
  * These elements are often styled with a border, so a `1px` border is applied by default for consistency.
  * This ensures readability even for unstyled elements.
  * When resetting, it's recommended to use `border-color: transparent` instead of `border: none` to account for forced color modes.
  */
  border-width: 1px;
  border-style: solid;

  /* These styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
  border-color: unset;
  border-radius: unset;
  color: unset;
  font: unset;
  letter-spacing: unset;
  text-align: unset;
}

:where(input:is([type="radio" i], [type="checkbox" i])) {
  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

:where(input[type="file" i]) {
  /* The `border` is often unnecessary, so it is reset here. */
  border: unset;
}

:where(input[type="search" i]) {
  /* Remove the rounded corners of search inputs on macOS and normalize the background color. */
  -webkit-appearance: textfield;
}

@supports (-webkit-touch-callout: none) {
  :where(input[type="search" i]) {
    /* normalize the background color on iOS. */
    background-color: Canvas;
  }
}

:where(
    input:is(
        [type="tel" i],
        [type="url" i],
        [type="email" i],
        [type="number" i]
      ):not(:placeholder-shown)
  ) {
  /*
  * Certain input types need to maintain left alignment even in right-to-left (RTL) languages.
  * However, this only applies when the value is not empty, as the placeholder should be right-aligned.
  * @see https://rtlstyling.com/posts/rtl-styling#form-inputs
  */
  direction: ltr;
}

:where(textarea) {
  /* The `margin-block` specified in Firefox's UA stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;

  /* Allows vertical resizing for `<textarea>` elements. */
  resize: block;
}

:where(
    input:not([type="button" i], [type="submit" i], [type="reset" i]),
    textarea,
    [contenteditable]
  ) {
  /* Set to `no-autospace` because `text-autospace` can insert spaces during input, potentially causing erratic behavior. */
  text-autospace: no-autospace;
}

:where(
    button,
    input:is([type="button" i], [type="submit" i], [type="reset" i])
  ),
::file-selector-button {
  /* The `background-color` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  background-color: unset;
}

:where(
    button,
    input:is([type="button" i], [type="submit" i], [type="reset" i]),
    [role="tab" i],
    [role="button" i],
    [role="option" i]
  ),
::file-selector-button {
  /*
  * On iOS, double-tapping a button can cause zooming, which harms usability.
  * `touch-action: manipulation` is specified to disable zooming on double-tap.
  * Third-party plugins such as Swiper sometimes use div elements with these roles as buttons, since double-tapping a div can still trigger zooming, it's advisable to specify this property.
  */
  touch-action: manipulation;
}

:where(
    button:enabled,
    label[for],
    select:enabled,
    input:is(
        [type="button" i],
        [type="submit" i],
        [type="reset" i],
        [type="radio" i],
        [type="checkbox" i]
      ):enabled,
    [role="tab" i],
    [role="button" i],
    [role="option" i]
  ),
:where(:enabled)::file-selector-button {
  /* Indicate clickable elements with a pointer cursor. */
  cursor: pointer;
}

:where(fieldset) {
  /*
  * Prevent fieldset from causing overflow.
  * Reset the default `min-inline-size: min-content` to prevent children from stretching fieldset.
  * @see https://github.com/twbs/bootstrap/issues/12359
  */
  min-inline-size: 0;

  /* The following default styles are often unnecessary, so they are reset. */
  margin-inline: unset;
  padding: unset;
  border: unset;
}

:where(legend) {
  /* The default `padding-inline` is often unnecessary, so it is reset. */
  padding-inline: unset;
}

:where(progress) {
  /* Resets the vertical alignment of the `<progress>` element to its initial value. */
  vertical-align: unset;
}

::placeholder {
  /* Standardize the opacity of placeholder text (it may be set lower by default in Firefox). */
  opacity: unset;
}

/* ======================================================
//  MARK: Interactive elements
// ====================================================== */
:where(summary) {
  /* The default triangle marker is often unnecessary, so it is disabled. */
  list-style-type: "";

  /* Changing the cursor to a pointer clarifies the clickability of the element. */
  cursor: pointer;
}

:where(summary)::-webkit-details-marker {
  /* In Safari versions earlier than 18.4 (released in April 2025), a triangle icon is displayed using the -webkit-details-marker CSS pseudo-element, so it should be removed. */
  display: none;
}

:where(dialog, [popover]) {
  /*
  * When these fixed-position elements are scrolled, preventing scroll chaining on the underlying page and bounce effects on mobile improves usability.
  * Disabling block-direction scroll chaining is recommended.
  */
  overscroll-behavior-block: contain;

  /* The following default styles are often unnecessary, so they are reset. */
  padding: unset;
  border: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  /*
  * These elements can be easily displayed by explicitly setting their `display` property.
  * To prevent them from appearing when not in an open state, they are forcibly hidden.
  */
  display: none !important;
}

:where(dialog) {
  /*
  * The max width and height of a `<dialog>` element are typically determined by the design.
  * These UA stylesheet properties are reset as they can be obstructive, especially when trying to make the dialog full-screen.
  */
  max-inline-size: unset;
  max-block-size: unset;
}

:where(dialog)::backdrop {
  /* Normalize the background color of the `::backdrop` element. */
  background-color: oklch(0% 0 0deg / 30%);
}

:where([popover]) {
  /*
  * While the UA stylesheet's `margin` for `<dialog>` elements is useful for centering with `inset: 0`,
  * but `margin` for `popover` elements is often obstructive as they frequently use Anchor Positioning.
  */
  margin: unset;
}

/* ======================================================
//  MARK: Focus Styles
// ====================================================== */
:where(:focus-visible) {
  /* Add space between the content and the focus outline. */
  outline-offset: 3px;
}

[tabindex="-1"]:focus {
  /* Prevent programmatically focused elements from displaying an outline unless they are naturally focusable. */
  outline: none !important;
}

/* ======================================================
//  MARK: Misc
// ====================================================== */
:where(:disabled, [aria-disabled="true" i]) {
  /* Display the default cursor on disabled elements to reflect their non-interactive state. */
  cursor: default;
}

[hidden]:not([hidden="until-found" i]) {
  /* Ensure that elements intended to be hidden are not displayed, improving clarity and layout control. */
  display: none !important;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin: unset;
}

:where(p) {
  margin: unset;
}

html {
  font-size: 100%;
}

a[href^=tel] {
  text-decoration: none;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  /* 強調をなくす */
}

a:hover {
  text-decoration: none;
}

img,
svg {
  vertical-align: middle;
}

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

:where(:any-link, button, [type=button], [type=reset], [type=submit], label[for], select, summary, [role=tab], [role=button]) {
  cursor: pointer;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  touch-action: manipulation;
}

:focus:not(:focus-visible) {
  outline: none;
}

input[type=text] {
  font-size: 1rem;
  /* = 16px */
}

textarea {
  field-sizing: content;
}

body {
  color: var(--color-text);
  font-family: var(--font-ja);
  font-weight: var(--fw-regular);
}

@property --root-font-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}
:root {
  /* inner */
  --inner: min(1200px, 100%);
  --inner-sp: min(500px, 100%);
  --padding-inner: 20px;
  --padding-inner-sp: 20px;
  /* 流体タイポグラフィ */
  --min: 10;
  --max: 16;
  --min-vw: 340;
  --max-vw: 375;
  --fluid-size: clamp(calc(var(--min) * 1px), calc(var(--min) * 1px + (var(--max) - var(--min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))), calc(var(--max) * 1px));
  /*  フォントサイズ  */
  --base-size: var(--fluid-size);
  /* z-index */
  --z-index-header: 900;
  /* color */
  --color-white: #fff;
  --color-black: #232323;
  --color-text: #383838;
  --color-text-sub: #4f4f4f;
  --color-orange: #ffcd00;
  --color-bg-brown: #bc7c63;
  --color-bg-cream: #f8f1e8;
  --color-brown: #6a1d00;
  --color-bg-dark-brown: #551801;
  --color-bg-light-beige: #ead7cf;
  --color-border-light: #dfd2c4;
  --color-cta-olive: #a57f00;
  --color-cta-burgundy: #9d2b00;
  /* font-weight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
  /* font-family */
  --font-ja: "Zen Kaku Gothic New", sans-serif;
  --font-mincho: "Zen Old Mincho", serif;
  --font-baskerville: "Libre Baskerville", serif;
  --font-din: "din-condensed-variable", sans-serif;
  --to-rem: calc(tan(atan2(1px, var(--root-font-size))) * 1rem);
  /* transition duration */
  --duration: 0.3s;
  /* opacity */
  --opacity: 0.7;
  /* header height */
  --header-height: 60px;
}
@media screen and (width >= 768px) {
  :root {
    --min: 12;
    --max: 16;
    --min-vw: 800;
    --max-vw: 1400;
    --fluid-size: clamp(calc(var(--min) * 1px), calc(var(--min) * 1px + (var(--max) - var(--min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))), calc(var(--max) * 1px));
  }
}
@media screen and (width >= 768px) {
  :root {
    --header-height: 89px;
  }
}

.l-footer {
  position: relative;
  z-index: 3;
  margin-block-start: calc(-30 * var(--to-rem));
}

.l-inner {
  max-width: calc(var(--inner) + var(--padding-inner) * 2);
  margin-inline: auto;
  padding-inline: var(--padding-inner);
}
@media screen and (max-width: 767px) {
  .l-inner {
    max-width: calc(var(--inner-sp) + var(--padding-inner-sp) * 2);
    padding-inline: var(--padding-inner-sp);
  }
}

.l-main {
  overflow-x: clip;
  margin-block-start: var(--header-height);
  background-image: url("../images/bg-category.webp");
  background-position: left top;
  background-size: contain;
  background-repeat: repeat;
  background-color: #efe8e6;
}

.c-arrow-cta {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(67 * var(--to-rem));
  padding-block: calc(14 * var(--to-rem));
  padding-inline: calc(20 * var(--to-rem)) calc(60 * var(--to-rem));
  border-radius: 5px;
  background-color: var(--color-brown);
  color: var(--color-white);
  font-family: var(--font-mincho);
  font-size: calc(1.25 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.45;
  letter-spacing: -0.014em;
  text-decoration: none;
  transition: opacity var(--duration);
}
@media screen and (max-width: 767px) {
  .c-arrow-cta {
    justify-content: center;
    min-height: calc(3.125 * var(--base-size));
    padding-inline: calc(0.625 * var(--base-size)) calc(2.5 * var(--base-size));
    font-size: calc(1 * var(--base-size));
  }
}
.c-arrow-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(18 * var(--to-rem));
  mask-image: url("../images/svg/icon-arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: calc(22 * var(--to-rem));
  height: calc(6 * var(--to-rem));
  background-color: currentcolor;
  translate: 0 -50%;
}
@media screen and (max-width: 767px) {
  .c-arrow-cta::after {
    right: calc(0.875 * var(--base-size));
  }
}
@media (any-hover: hover) {
  .c-arrow-cta:hover {
    opacity: var(--opacity);
  }
}

.c-section-heading {
  display: grid;
  gap: calc(26 * var(--to-rem));
  justify-items: center;
  color: var(--color-text);
  text-align: center;
}

.c-section-heading[data-color=light] {
  color: var(--color-white);
}
.c-section-heading[data-color=light] .c-section-heading__title::after {
  background-color: currentcolor;
}

.c-section-heading__title {
  position: relative;
  font-family: var(--font-mincho);
  font-size: calc(2.375 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.45;
}
@media screen and (max-width: 767px) {
  .c-section-heading__title {
    font-size: calc(1.75 * var(--base-size));
  }
}
.c-section-heading__title::after {
  content: "";
  display: block;
  width: calc(54 * var(--to-rem));
  height: calc(3 * var(--to-rem));
  margin-block-start: calc(8 * var(--to-rem));
  margin-inline: auto;
  background-color: var(--color-brown);
}

.c-section-heading__text {
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.5555555556;
}
@media screen and (max-width: 767px) {
  .c-section-heading__text {
    font-size: calc(1 * var(--base-size));
    text-align: left;
  }
}
.c-section-heading__text[data-align=center] {
  text-align: center;
}

.p-category {
  overflow: hidden;
  padding-block: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-category {
    padding-block: calc(70 * var(--to-rem));
  }
}

.p-category__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: calc(64 * var(--to-rem)) calc(30 * var(--to-rem));
  margin-block-start: calc(69 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-category__list {
    grid-template-columns: 1fr;
    gap: calc(60 * var(--to-rem));
    margin-block-start: calc(40 * var(--to-rem));
  }
}

.p-category__card {
  display: grid;
  height: 100%;
  color: var(--color-text);
}

.p-category__title {
  display: flex;
  gap: calc(8 * var(--to-rem));
  justify-content: center;
  align-items: flex-start;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(1.75 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.7;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-category__title {
    font-size: calc(1.5 * var(--base-size));
  }
}

.p-category__title::before,
.p-category__title::after {
  content: "";
  flex-shrink: 0;
  width: calc(18 * var(--to-rem));
  height: calc(18 * var(--to-rem));
}

.p-category__title::before {
  border-block-start: 3px solid var(--color-brown);
  border-inline-start: 3px solid var(--color-brown);
}

.p-category__title::after {
  align-self: flex-end;
  border-block-end: 3px solid var(--color-brown);
  border-inline-end: 3px solid var(--color-brown);
}

.p-category__image {
  overflow: hidden;
  margin-block-start: calc(30 * var(--to-rem));
}

.p-category__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 380/285;
  object-fit: cover;
}

.p-category__name {
  margin-block-start: calc(10 * var(--to-rem));
  font-family: var(--font-mincho);
  font-size: calc(1.5 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.4583333333;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-category__name {
    font-size: calc(1.25 * var(--base-size));
  }
}

.p-category__material {
  font-family: var(--font-mincho);
  font-size: calc(1 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-category__material {
    font-size: calc(1 * var(--base-size));
  }
}

.p-category__price {
  display: flex;
  gap: calc(11 * var(--to-rem));
  align-items: center;
  margin-block-start: calc(16 * var(--to-rem));
}

.p-category__price + .p-category__price {
  margin-block-start: calc(8 * var(--to-rem));
}

.p-category__price-label {
  display: block;
  flex-shrink: 0;
  min-width: calc(60 * var(--to-rem));
  padding-block: calc(5 * var(--to-rem));
  background-color: var(--color-brown);
  color: var(--color-white);
  font-size: calc(1 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-category__price-label {
    font-size: calc(1 * var(--base-size));
  }
}

.p-category__price-value {
  flex-shrink: 1;
  min-inline-size: 0;
  font-size: calc(1.25 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .p-category__price-value {
    font-size: calc(1.25 * var(--base-size));
  }
}
.p-category__price-value[data-value=value] {
  position: relative;
  top: -5px;
}

.p-category__price-value em {
  margin-inline-start: calc(-2 * var(--to-rem));
  font-size: calc(1.75 * var(--base-size));
  font-style: normal;
}

.p-category__more {
  display: inline-flex;
  gap: calc(10 * var(--to-rem));
  align-items: center;
  width: fit-content;
  margin-block-start: calc(21 * var(--to-rem));
  margin-inline: auto;
  padding-block-end: calc(8 * var(--to-rem));
  border-block-end: 3px solid currentcolor;
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(1.25 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--duration);
}
@media (any-hover: hover) {
  .p-category__more:hover {
    opacity: var(--opacity);
    text-decoration: none;
  }
}

.p-category__more::before {
  content: "";
  flex-shrink: 0;
  width: calc(24 * var(--to-rem));
  height: calc(24 * var(--to-rem));
  background: url("../images/svg/icon-link.svg") center/contain no-repeat;
}
@media screen and (max-width: 767px) {
  .p-category__more::before {
    width: calc(1.5 * var(--base-size));
    height: calc(1.5 * var(--base-size));
  }
}

.p-company {
  padding-block: 0;
  background-image: url("../images/bg-footer.webp");
  background-position: left top;
  background-size: auto 100%;
  background-repeat: repeat;
  background-color: var(--color-bg-dark-brown);
}
@media screen and (max-width: 767px) {
  .p-company {
    padding-block: 0 calc(40 * var(--to-rem));
  }
}

.p-company__card {
  position: relative;
  top: calc(-94 * var(--to-rem));
  padding-block: calc(5.5625 * var(--base-size));
  padding-inline: calc(3.75 * var(--base-size));
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .p-company__card {
    top: calc(-30 * var(--to-rem));
    padding-block: calc(28 * var(--to-rem));
    padding-inline: calc(28 * var(--to-rem));
  }
}

.p-company__logo {
  display: flex;
  justify-content: center;
}

.p-company__logo img {
  width: auto;
  height: calc(68 * var(--to-rem));
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .p-company__logo img {
    width: 100%;
    height: auto;
  }
}

.p-company__main {
  display: grid;
  grid-template-columns: minmax(0, 370fr) minmax(0, 460fr);
  gap: calc(30 * var(--to-rem));
  align-items: start;
  max-width: calc(860 * var(--to-rem));
  margin-block-start: calc(30 * var(--to-rem));
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-company__main {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--to-rem));
  }
}

.p-company__image {
  overflow: hidden;
  aspect-ratio: 370/300;
}

.p-company__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-company__content {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--to-rem));
}

.p-company__address {
  font-family: var(--font-mincho);
  font-size: calc(1.5 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-company__address {
    font-size: calc(1.125 * var(--base-size));
  }
}

.p-company__contact {
  display: flex;
  gap: calc(34 * var(--to-rem));
  align-items: center;
  padding-block-start: calc(14 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-company__contact {
    flex-direction: column;
    gap: calc(0.375 * var(--base-size));
    align-items: flex-start;
  }
}

.p-company__text {
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.4444444444;
}
@media screen and (max-width: 767px) {
  .p-company__text {
    font-size: calc(1 * var(--base-size));
  }
}

a.p-company__text {
  color: inherit;
  transition: opacity var(--duration);
}
@media (any-hover: hover) {
  a.p-company__text:hover {
    opacity: var(--opacity);
  }
}

.p-company__note {
  color: var(--color-text);
  font-size: max(0.875 * var(--base-size), 12px);
  font-weight: var(--fw-medium);
  line-height: 1.4285714286;
}

.p-company__hours {
  display: flex;
  gap: calc(0.875 * var(--base-size));
  align-items: center;
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
}
@media screen and (max-width: 767px) {
  .p-company__hours {
    flex-direction: column;
    gap: calc(0.375 * var(--base-size));
    align-items: flex-start;
    font-size: calc(1 * var(--base-size));
  }
}

.p-company__hours-label {
  flex-shrink: 0;
  padding-block: calc(4 * var(--to-rem));
  padding-inline: calc(15 * var(--to-rem));
  background-color: var(--color-brown);
  color: var(--color-white);
  font-size: calc(1 * var(--base-size));
}
@media screen and (max-width: 767px) {
  .p-company__hours-label {
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-company__award {
  display: grid;
  grid-template-columns: minmax(0, 460fr) minmax(0, 327fr);
  gap: calc(4.375 * var(--base-size));
  align-items: center;
  max-width: calc(860 * var(--to-rem));
  margin-block-start: calc(58 * var(--to-rem));
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-company__award {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--to-rem));
    justify-items: center;
    margin-block-start: calc(40 * var(--to-rem));
  }
}

.p-company__award-text img {
  width: 100%;
  height: auto;
}

.p-company__award-image {
  overflow: hidden;
  width: 100%;
  max-width: calc(327 * var(--to-rem));
  aspect-ratio: 1;
  border-radius: 50%;
}

.p-company__award-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-contact {
  overflow: hidden;
  background-color: var(--color-cta-burgundy);
  color: var(--color-white);
}

.p-contact__inner {
  position: relative;
  max-inline-size: calc(1400 * var(--to-rem));
  margin-inline: auto;
  padding-block: calc(35 * var(--to-rem)) calc(32 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-contact__inner {
    padding-block: calc(48 * var(--to-rem));
  }
}
.p-contact__inner::after {
  content: "";
  position: absolute;
  inset-block-end: calc(-2 * var(--to-rem));
  inset-inline-end: 0;
  width: calc(17 * var(--base-size));
  height: calc(13.4375 * var(--base-size));
  background: url("../images/svg/icon-mail02.svg") center/contain no-repeat;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .p-contact__inner::after {
    inset-block-end: calc(40 * var(--to-rem));
    inset-inline-end: calc(-40 * var(--to-rem));
    width: calc(11.25 * var(--base-size));
    height: calc(8.875 * var(--base-size));
  }
}

.p-contact__en {
  position: absolute;
  inset-block-start: calc(-1 * var(--base-size));
  inset-inline-start: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--font-baskerville);
  font-size: calc(7.5 * var(--base-size));
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .p-contact__en {
    inset-block-start: calc(-2 * var(--to-rem));
    font-size: calc(3.125 * var(--base-size));
  }
}

.p-contact__content {
  position: relative;
  z-index: 1;
}

.p-contact__lead {
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.4444444444;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-contact__lead {
    font-size: calc(1 * var(--base-size));
  }
}

.p-contact__body {
  display: flex;
  gap: calc(30 * var(--to-rem));
  justify-content: center;
  margin-block-start: calc(13 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-contact__body {
    flex-direction: column;
    gap: calc(28 * var(--to-rem));
  }
}

.p-contact__tel-group {
  display: grid;
  justify-items: end;
  padding-block-start: calc(24 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-contact__tel-group {
    gap: calc(10 * var(--to-rem));
    justify-items: center;
  }
}

.p-contact__tel-row {
  display: inline-flex;
  align-items: center;
}

.p-contact__tel-icon {
  position: relative;
  top: 4px;
  display: inline-flex;
  flex-shrink: 0;
}

.p-contact__tel-icon img {
  display: block;
  width: calc(36 * var(--to-rem));
  height: auto;
}
@media screen and (max-width: 767px) {
  .p-contact__tel-icon img {
    width: calc(1.75 * var(--base-size));
  }
}

.p-contact__tel {
  margin-inline-start: calc(10 * var(--to-rem));
  color: var(--color-white);
  font-family: var(--font-mincho);
  font-size: calc(2.875 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.4347826087;
  text-decoration: none;
  transition: opacity var(--duration);
}
@media screen and (max-width: 767px) {
  .p-contact__tel {
    font-size: calc(1.75 * var(--base-size));
  }
}
@media (any-hover: hover) {
  .p-contact__tel:hover {
    opacity: var(--opacity);
  }
}

.p-contact__time {
  font-size: calc(0.875 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.4285714286;
}

.p-contact__action {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--to-rem));
  align-items: center;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  .p-contact__action {
    margin-inline: auto;
  }
}

.p-contact__cta-image {
  display: inline-flex;
  margin-inline: auto;
}

.p-contact__cta-image img {
  display: block;
  width: auto;
  height: calc(24 * var(--to-rem));
}

.p-contact__button {
  position: relative;
  left: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  min-width: calc(310 * var(--to-rem));
  padding-block: calc(18 * var(--to-rem));
  padding-inline: calc(16 * var(--to-rem));
  border-radius: 5px;
  background-color: var(--color-white);
  color: var(--color-cta-burgundy);
  font-family: var(--font-mincho);
  font-size: calc(1.25 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.45;
  letter-spacing: -0.014em;
  text-decoration: none;
  transition: opacity var(--duration);
}
@media screen and (max-width: 767px) {
  .p-contact__button {
    min-width: calc(18.75 * var(--base-size));
    padding-block: calc(12 * var(--to-rem));
    font-size: calc(1 * var(--base-size));
  }
}
@media (any-hover: hover) {
  .p-contact__button:hover {
    opacity: var(--opacity);
  }
}

.p-contact__button::before {
  content: "";
  flex-shrink: 0;
  mask-image: url("../images/svg/icon-mail.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: calc(30 * var(--to-rem));
  height: calc(20 * var(--to-rem));
  margin-inline-end: calc(6 * var(--to-rem));
  background-color: currentcolor;
}

.p-contact__button::after {
  content: "";
  flex-shrink: 0;
  mask-image: url("../images/svg/icon-arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: calc(22 * var(--to-rem));
  height: calc(6 * var(--to-rem));
  margin-inline-start: calc(12 * var(--to-rem));
  background-color: currentcolor;
}

.p-cta {
  position: relative;
}

.p-cta__image {
  overflow: hidden;
  aspect-ratio: 1400/420;
}

.p-cta__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-faq {
  padding-block: calc(91 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-faq {
    padding-block: calc(74 * var(--to-rem));
  }
}

.p-faq__list {
  display: grid;
  gap: calc(31.5 * var(--to-rem));
  margin-block-start: calc(49 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-faq__list {
    gap: calc(20 * var(--to-rem));
  }
}

.p-faq__item {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16);
  background-color: var(--color-white);
}

.p-faq__summary {
  display: flex;
  align-items: center;
  padding-block: calc(1.0625 * var(--base-size));
  padding-inline: calc(24 * var(--to-rem)) calc(28 * var(--to-rem));
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .p-faq__summary {
    gap: calc(10 * var(--to-rem));
    padding-block: calc(18 * var(--to-rem));
    padding-inline: calc(12 * var(--to-rem));
  }
}

.p-faq__question {
  display: flex;
  flex-grow: 1;
  gap: calc(28 * var(--to-rem));
  align-items: center;
  min-width: 0;
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(1.5 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.4583333333;
}
@media screen and (max-width: 767px) {
  .p-faq__question {
    gap: calc(1 * var(--base-size));
    font-size: calc(1.125 * var(--base-size));
  }
}

.p-faq__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 100%;
  max-width: calc(30 * var(--to-rem));
  aspect-ratio: 1;
  margin-left: auto;
}

.p-faq__icon img {
  display: block;
  transform: rotate(90deg);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.p-faq__item[open] .p-faq__icon img {
  transform: rotate(-90deg);
}

.p-faq__summary::-webkit-details-marker {
  display: none;
}

.p-faq__label {
  color: var(--color-brown);
  font-family: var(--font-baskerville);
  font-size: calc(2 * var(--base-size));
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-faq__label {
    font-size: calc(1.5 * var(--base-size));
  }
}

.p-faq__answer-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.p-faq__item[open] .p-faq__answer-panel {
  grid-template-rows: 1fr;
}

.p-faq__item[open].is-opening .p-faq__answer-panel,
.p-faq__item[open].is-closing .p-faq__answer-panel {
  grid-template-rows: 0fr;
}

.p-faq__item[open].is-opening .p-faq__icon img,
.p-faq__item[open].is-closing .p-faq__icon img {
  transform: rotate(90deg);
}

.p-faq__answer-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.p-faq__answer {
  padding-block: calc(0.5 * var(--base-size)) calc(1.625 * var(--base-size));
  padding-inline: calc(78 * var(--to-rem));
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.5555555556;
}
@media screen and (max-width: 767px) {
  .p-faq__answer {
    padding-inline: calc(18 * var(--to-rem));
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-faq__answer a {
  color: var(--color-brown);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--duration);
}
@media (any-hover: hover) {
  .p-faq__answer a:hover {
    opacity: var(--opacity);
  }
}

.p-feature {
  position: relative;
  overflow: hidden;
  padding-block: calc(90 * var(--to-rem)) calc(98 * var(--to-rem));
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .p-feature {
    padding-block: calc(76 * var(--to-rem));
  }
}

.p-feature__video,
.p-feature__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-feature__video {
  object-fit: cover;
  object-position: center 83%;
}

.p-feature__overlay {
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.p-feature__inner {
  position: relative;
  z-index: 1;
}

.p-feature__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 0 calc(1.875 * var(--base-size));
  margin-block-start: calc(64 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-feature__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: calc(30 * var(--to-rem));
  }
}

.p-feature__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 3;
  overflow: hidden;
  padding-block: calc(33 * var(--to-rem)) calc(22 * var(--to-rem));
  background-color: var(--color-white);
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .p-feature__item {
    grid-template-columns: none;
    grid-template-rows: none;
    grid-row: auto;
  }
}

.p-feature__item::before {
  content: attr(data-number);
  position: absolute;
  inset-block-start: calc(-12 * var(--to-rem));
  inset-inline-start: calc(-6 * var(--to-rem));
  z-index: 0;
  color: var(--color-bg-light-beige);
  font-family: var(--font-baskerville);
  font-size: calc(7.5 * var(--base-size));
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .p-feature__item::before {
    inset-block-start: calc(-10 * var(--to-rem));
    font-size: calc(6.25 * var(--base-size));
  }
}

.p-feature__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: calc(0.625 * var(--base-size));
  text-align: center;
}

.p-feature__title {
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(2.375 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.2631578947;
}
@media screen and (max-width: 767px) {
  .p-feature__title {
    font-size: calc(1.875 * var(--base-size));
  }
}

.p-feature__subtitle {
  --min: 13;
  --max: 20;
  --min-vw: 800;
  --max-vw: 1400;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: clamp(var(--min) * 1px, var(--min) * 1px + (var(--max) - var(--min)) * (100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)), var(--max) * 1px);
  font-weight: var(--fw-bold);
  line-height: 1.45;
}
@media screen and (max-width: 767px) {
  .p-feature__subtitle {
    font-size: calc(1.125 * var(--base-size));
  }
}

.p-feature__image {
  overflow: hidden;
  margin-block-start: calc(18 * var(--to-rem));
}

.p-feature__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 380/230;
  object-fit: cover;
}

.p-feature__text-wrap {
  margin-block-start: calc(12 * var(--to-rem));
  padding-inline: calc(16 * var(--to-rem));
}

.p-feature__text {
  font-size: calc(1 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.6875;
}
@media screen and (max-width: 767px) {
  .p-feature__text {
    font-size: calc(1 * var(--base-size));
  }
}

.p-feature__text-highlight {
  padding-inline: calc(2 * var(--to-rem));
  background-image: linear-gradient(transparent 0 50%, rgb(from var(--color-cta-burgundy) r g b/30%) 50%);
  box-decoration-break: clone;
}

.p-flow {
  padding-block: calc(89 * var(--to-rem)) calc(60 * var(--to-rem));
  background-image: url("../images/bg-mesh.webp");
  background-position: left top;
  background-size: cover;
  background-repeat: repeat;
}
@media screen and (max-width: 767px) {
  .p-flow {
    padding-block: calc(74 * var(--to-rem));
  }
}

.p-flow__inner {
  container-type: inline-size;
}

.p-flow__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(16 * var(--to-rem));
  margin-block-start: calc(46 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-flow__list {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(14 * var(--to-rem));
  }
}

@container (width >= 700px) and (width <= 1100px) {
  .p-flow__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-flow__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(250 * var(--to-rem));
  padding-block: 0 calc(12 * var(--to-rem));
  padding-inline: calc(4 * var(--to-rem));
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16);
  background-color: var(--color-white);
}

.p-flow__item::after {
  content: "";
  order: 3;
  width: calc(130 * var(--to-rem));
  height: calc(100 * var(--to-rem));
  margin-block-start: calc(16 * var(--to-rem));
  margin-inline: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.p-flow__item[data-step="01"]::after {
  background-image: url("../images/svg/icon-step01.svg");
}

.p-flow__item[data-step="02"]::after {
  background-image: url("../images/svg/icon-step02.svg");
}

.p-flow__item[data-step="03"]::after {
  background-image: url("../images/svg/icon-step03.svg");
}

.p-flow__item[data-step="04"]::after {
  background-image: url("../images/svg/icon-step04.svg");
}

.p-flow__item[data-step="05"]::after {
  background-image: url("../images/svg/icon-step05.svg");
}

.p-flow__item[data-step="06"]::after {
  background-image: url("../images/svg/icon-step06.svg");
}

.p-flow__step {
  display: block;
  order: 1;
  align-content: center;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  min-height: calc(50 * var(--to-rem));
  margin-inline: calc(-4 * var(--to-rem)) calc(-20 * var(--to-rem));
  padding-block: calc(8 * var(--to-rem));
  padding-inline: calc(20 * var(--to-rem)) calc(34 * var(--to-rem));
  background-color: var(--color-brown);
  color: var(--color-white);
  font-family: var(--font-baskerville);
  font-size: calc(1.75 * var(--base-size));
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1.25;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-flow__step {
    min-height: calc(2.5 * var(--base-size));
    font-size: calc(1.25 * var(--base-size));
  }
}
.p-flow__step[data-step="06"] {
  clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%);
  margin-inline: calc(-4 * var(--to-rem));
}

.p-flow__item[data-step="06"] .p-flow__step {
  padding-inline: calc(20 * var(--to-rem));
  background-color: var(--color-cta-burgundy);
}

.p-flow__title {
  order: 2;
  margin-block-start: calc(19 * var(--to-rem));
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(1.5 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.0833333333;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-flow__title {
    font-size: calc(1.125 * var(--base-size));
  }
}
.p-flow__title[data-color=burgundy] {
  color: var(--color-cta-burgundy);
}

.p-flow__text {
  order: 4;
  margin-block-start: calc(18 * var(--to-rem));
  padding-inline: calc(8 * var(--to-rem));
  color: var(--color-text);
  font-size: calc(0.875 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.4285714286;
}
@media screen and (max-width: 767px) {
  .p-flow__text {
    font-size: calc(0.75 * var(--base-size));
  }
}

.p-footer {
  padding-block: calc(26 * var(--to-rem));
  background-color: var(--color-text);
  color: var(--color-white);
}

.p-footer__inner {
  text-align: center;
}

.p-footer__copy {
  font-family: var(--font-mincho);
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.p-header {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-header);
  height: var(--header-height);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
  background-color: var(--color-white);
}

.p-header:has(.p-header__hamburger.is-open) {
  box-shadow: none;
}

.p-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: inherit;
  max-width: calc(1240 * var(--to-rem));
  margin-inline: auto;
  padding-inline: calc(20 * var(--to-rem));
}

.p-header__logo {
  flex-shrink: 0;
  width: calc(52 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-header__logo {
    width: calc(46 * var(--to-rem));
  }
}

.p-header__logo a {
  display: block;
  text-decoration: none;
  transition: opacity var(--duration);
}

.p-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (any-hover: hover) {
  .p-header__logo a:hover {
    opacity: var(--opacity);
  }
}

.p-header__nav {
  display: block;
}
@media screen and (max-width: 767px) {
  .p-header__nav {
    display: none;
  }
}

.p-header__nav-list {
  display: flex;
  gap: calc(18 * var(--to-rem));
  align-items: center;
}

.p-header__nav-item {
  position: relative;
}

.p-header__nav-link {
  display: inline-flex;
  gap: calc(6 * var(--to-rem));
  align-items: center;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(1 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--duration);
}

@media (any-hover: hover) {
  .p-header__nav-link:hover {
    color: var(--color-brown);
    text-decoration: underline;
    text-underline-offset: calc(6 * var(--to-rem));
  }
}

.p-header__nav-item[data-has-child] > .p-header__nav-link::after {
  content: "";
  display: inline-block;
  width: calc(6 * var(--to-rem));
  height: calc(6 * var(--to-rem));
  border-right: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;
  transform: translateY(calc(0 * var(--to-rem))) rotate(45deg);
  transition: transform var(--duration);
}

.p-header__sub-nav {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 1;
  min-width: calc(220 * var(--to-rem));
  padding-block-start: calc(12 * var(--to-rem));
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(6 * var(--to-rem)));
  transition: opacity var(--duration), transform var(--duration);
}
@media screen and (max-width: 767px) {
  .p-header__sub-nav {
    display: none;
  }
}

@media (any-hover: hover) {
  .p-header__nav-item[data-has-child]:hover > .p-header__sub-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.p-header__nav-item[data-has-child]:focus-within > .p-header__sub-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (any-hover: hover) {
  .p-header__nav-item[data-has-child]:hover > .p-header__nav-link::after {
    transform: translateY(calc(3 * var(--to-rem))) rotate(225deg);
  }
}

.p-header__nav-item[data-has-child]:focus-within > .p-header__nav-link::after {
  transform: translateY(calc(3 * var(--to-rem))) rotate(225deg);
}

.p-header__sub-nav-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--to-rem));
  padding-block: calc(16 * var(--to-rem));
  padding-inline: calc(20 * var(--to-rem));
  border: 1px solid var(--color-border-light);
  border-radius: calc(10 * var(--to-rem));
  box-shadow: 0 calc(8 * var(--to-rem)) calc(24 * var(--to-rem)) oklch(from var(--color-black) l c h/12%);
  background-color: var(--color-white);
}

.p-header__sub-nav-list::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-7 * var(--to-rem));
  inset-inline-end: calc(24 * var(--to-rem));
  width: calc(12 * var(--to-rem));
  height: calc(12 * var(--to-rem));
  border-top: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  background-color: var(--color-white);
  transform: rotate(-45deg);
}

.p-header__sub-nav-link {
  display: block;
  padding-block: calc(8 * var(--to-rem));
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(1 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--duration);
}

@media (any-hover: hover) {
  .p-header__sub-nav-link:hover {
    color: var(--color-brown);
  }
}

.p-header__hamburger {
  position: fixed;
  inset-block-start: calc(30 * var(--to-rem));
  inset-inline-end: calc(28 * var(--to-rem));
  z-index: 5;
  display: none;
  gap: calc(6 * var(--to-rem));
  width: calc(34 * var(--to-rem));
  height: calc(24 * var(--to-rem));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
}
@media screen and (max-width: 767px) {
  .p-header__hamburger {
    inset-block-start: calc(22 * var(--to-rem));
    inset-inline-end: calc(20 * var(--to-rem));
    display: grid;
  }
}

.p-header__hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-text);
  transition: opacity var(--duration), transform var(--duration);
}

.p-header__hamburger.is-open span:nth-of-type(1) {
  transform: translateY(calc(10 * var(--to-rem))) rotate(35deg);
}

.p-header__hamburger.is-open span:nth-of-type(2) {
  opacity: 0;
}

.p-header__hamburger.is-open span:nth-of-type(3) {
  transform: translateY(calc(-10 * var(--to-rem))) rotate(-35deg);
}

.p-header__drawer {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: none;
  overflow-y: auto;
  padding-block: calc(104 * var(--to-rem)) calc(40 * var(--to-rem));
  background-color: var(--color-white);
}

.p-header__drawer-nav {
  width: min(520 * var(--to-rem), 100% - 40 * var(--to-rem));
  margin-inline: auto;
}

.p-header__drawer-item {
  border-block-end: 1px solid var(--color-border-light);
}

.p-header__drawer-list > .p-header__drawer-item:first-child {
  border-block-start: none;
}

.p-header__drawer-link {
  position: relative;
  display: block;
  padding-block: calc(18 * var(--to-rem));
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  text-decoration: none;
}

.p-header__drawer-trigger {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding-block: calc(18 * var(--to-rem));
  padding-inline: 0 calc(36 * var(--to-rem));
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  text-align: start;
  cursor: pointer;
  appearance: none;
}

.p-header__drawer-trigger::before,
.p-header__drawer-trigger::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(8 * var(--to-rem));
  width: calc(16 * var(--to-rem));
  height: 1px;
  background-color: var(--color-text);
  transition: transform var(--duration);
}

.p-header__drawer-trigger::after {
  transform: translateY(-50%) rotate(90deg);
}

.p-header__drawer-trigger::before {
  transform: translateY(-50%);
}

.p-header__drawer-trigger[aria-expanded=true]::after {
  transform: translateY(-50%) rotate(0);
}

.p-header__drawer-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration) ease-in-out;
}

.p-header__drawer-sub-list {
  padding-block: calc(4 * var(--to-rem)) calc(16 * var(--to-rem));
}

.p-header__drawer-sub-item + .p-header__drawer-sub-item {
  margin-block-start: calc(2 * var(--to-rem));
}

.p-header__drawer-sub-link {
  position: relative;
  display: block;
  padding-block: calc(10 * var(--to-rem));
  padding-inline-start: calc(16 * var(--to-rem));
  color: var(--color-text-sub);
  font-family: var(--font-mincho);
  font-size: calc(1 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-decoration: none;
}

.p-header__drawer-sub-link::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: calc(8 * var(--to-rem));
  height: 1px;
  background-color: var(--color-text-sub);
  transform: translateY(-50%);
}

.p-mv {
  position: relative;
}

.p-mv__image {
  overflow: hidden;
}

.p-mv__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1400/520;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .p-mv__image img {
    aspect-ratio: 375/573;
  }
}

.p-mv__cta-wrap {
  background-color: var(--color-bg-light-beige);
}

.p-mv__cta {
  display: flex;
  gap: calc(28 * var(--to-rem));
  justify-content: center;
  padding-block: calc(18 * var(--to-rem));
  padding-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-mv__cta {
    gap: calc(12 * var(--to-rem));
    align-items: center;
    max-inline-size: calc(480 * var(--to-rem));
    margin-inline: auto;
    padding-block: calc(12 * var(--to-rem));
    padding-inline: calc(10 * var(--to-rem));
  }
}

.p-mv__cta-button-wrap {
  width: 100%;
  max-width: calc(310 * var(--to-rem));
  border-radius: 5px;
}
.p-mv__cta-button-wrap[data-color=olive] {
  background-color: var(--color-cta-olive);
}
.p-mv__cta-button-wrap[data-color=red] {
  background-color: var(--color-cta-burgundy);
}

.p-mv__cta-button {
  display: flex;
  gap: calc(7 * var(--to-rem));
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: calc(66 * var(--to-rem));
  padding-block: calc(0.625 * var(--base-size));
  border-radius: 5px;
  text-decoration: none;
  transition: opacity var(--duration);
}
@media screen and (max-width: 767px) {
  .p-mv__cta-button {
    width: 100%;
    min-width: 0;
    min-height: calc(3.5 * var(--base-size));
    padding-block: calc(0.25 * var(--base-size));
    justify-content: space-between;
  }
}
@media (any-hover: hover) {
  .p-mv__cta-button:hover {
    opacity: var(--opacity);
  }
}

.p-mv__cta-icon-label {
  display: flex;
  gap: 6px;
  align-items: center;
}

.p-mv__cta-icon-label {
  display: flex;
  gap: calc(10 * var(--to-rem));
  align-items: center;
}

.p-mv__cta-icon {
  flex-shrink: 0;
  width: auto;
  height: auto;
}

.p-mv__cta-icon[data-variant=olive] {
  position: relative;
  left: calc(4 * var(--to-rem));
  width: calc(39 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-mv__cta-icon[data-variant=olive] {
    width: calc(2.25 * var(--base-size));
  }
}

.p-mv__cta-icon[data-variant=red] {
  width: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-mv__cta-icon[data-variant=red] {
    width: calc(1.75 * var(--base-size));
    margin-left: calc(10 * var(--to-rem));
  }
}

.p-mv__cta-label {
  color: var(--color-white);
  font-family: var(--font-mincho);
  font-size: calc(1.25 * var(--base-size));
  font-weight: var(--fw-bold);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-mv__cta-label {
    font-size: calc(0.8125 * var(--base-size));
    text-align: left;
  }
}

.p-mv__cta-arrow {
  flex-shrink: 0;
  width: calc(22 * var(--to-rem));
  height: auto;
}
@media screen and (max-width: 767px) {
  .p-mv__cta-arrow {
    width: calc(1 * var(--base-size));
    left: calc(-0.3 * var(--base-size));
    position: relative;
  }
}

.p-mv__cta-arrow[data-variant=olive] {
  position: relative;
  left: calc(0.6875 * var(--base-size));
}
@media screen and (max-width: 767px) {
  .p-mv__cta-arrow[data-variant=olive] {
    left: calc(-0.3 * var(--base-size));
  }
}

.p-policy {
  padding-block: calc(92 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-policy {
    padding-block: calc(74 * var(--to-rem));
  }
}

.p-policy__inner {
  container-type: inline-size;
}

.p-policy__list {
  display: grid;
  gap: calc(30 * var(--to-rem));
  margin-block-start: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-policy__list {
    gap: calc(3.75 * var(--base-size));
  }
}

.p-policy__item {
  display: grid;
  grid-template-columns: minmax(0, 572fr) minmax(0, 600fr);
  gap: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-policy__item {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--to-rem));
  }
}

@container (width >= 600px) and (width <= 900px) {
  .p-policy__list {
    max-inline-size: calc(625 * var(--to-rem));
    margin-inline: auto;
  }
  .p-policy__item {
    grid-template-columns: 1fr;
  }
}
.p-policy__image {
  overflow: hidden;
  aspect-ratio: 572/271;
}

.p-policy__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 572/271;
  object-fit: cover;
}

.p-policy__heading {
  display: flex;
  gap: calc(14 * var(--to-rem));
  align-items: center;
}
.p-policy__heading[data-align=top] {
  align-items: flex-start;
}

.p-policy__number {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding-block: calc(12 * var(--to-rem)) calc(8 * var(--to-rem));
  color: var(--color-brown);
  font-family: var(--font-baskerville);
  font-size: calc(1.75 * var(--base-size));
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-policy__number {
    font-size: calc(1.25 * var(--base-size));
  }
}

.p-policy__number::before,
.p-policy__number::after {
  content: "";
  position: absolute;
  left: 1px;
  box-sizing: content-box;
  width: 100%;
  height: calc(3 * var(--to-rem));
}

.p-policy__number::before {
  top: 0;
  border-top: calc(3 * var(--to-rem)) solid var(--color-brown);
  border-bottom: calc(1 * var(--to-rem)) solid var(--color-brown);
}

.p-policy__number::after {
  bottom: 0;
  border-top: calc(1 * var(--to-rem)) solid var(--color-brown);
  border-bottom: calc(3 * var(--to-rem)) solid var(--color-brown);
}

.p-policy__title {
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(1.875 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.4666666667;
}
@media screen and (max-width: 767px) {
  .p-policy__title {
    font-size: calc(1.375 * var(--base-size));
  }
}

.p-policy__text {
  margin-block-start: calc(10 * var(--to-rem));
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.5555555556;
}
@media screen and (max-width: 767px) {
  .p-policy__text {
    margin-block-start: calc(0.875 * var(--base-size));
    font-size: calc(1 * var(--base-size));
  }
}

.p-policy__note-wrap {
  margin-block-start: calc(12 * var(--to-rem));
  padding-block-end: calc(6 * var(--to-rem));
}

.p-policy__note-box {
  margin-block-start: calc(6 * var(--to-rem));
}

.p-policy__note {
  color: var(--color-text);
  font-size: calc(0.875 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.4285714286;
}
@media screen and (max-width: 767px) {
  .p-policy__note {
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-policy__cta {
  max-width: calc(310 * var(--to-rem));
  margin-block-start: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-policy__cta {
    max-width: calc(18.75 * var(--base-size));
  }
}
.p-policy__cta[data-size=lg] {
  width: max-content;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .p-policy__cta[data-size=lg] {
    width: 100%;
    max-width: calc(21.25 * var(--base-size));
  }
}

.p-price {
  padding-block: 0 calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-price {
    padding-block: calc(20 * var(--to-rem)) calc(60 * var(--to-rem));
  }
}

.p-price__body {
  max-width: calc(976 * var(--to-rem));
  margin-inline: auto;
  padding-block: calc(50 * var(--to-rem)) calc(60 * var(--to-rem));
  padding-inline: calc(60 * var(--to-rem));
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  background-image: url("../images/bg_grid.webp");
  background-repeat: repeat;
  background-color: var(--color-bg-brown);
  color: var(--color-text);
}
@media screen and (max-width: 767px) {
  .p-price__body {
    padding-block: calc(32 * var(--to-rem));
    padding-inline: calc(16 * var(--to-rem));
  }
}

.p-price__title {
  display: flex;
  gap: calc(46 * var(--to-rem));
  align-items: center;
  margin-block: 0;
  margin-inline: 0;
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(1.875 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-price__title {
    gap: calc(12 * var(--to-rem));
    font-size: calc(1.5 * var(--base-size));
  }
}
.p-price__title::before, .p-price__title::after {
  content: "";
  flex: 1 1 0;
  block-size: calc(3 * var(--to-rem));
  min-inline-size: 0;
  background-color: currentcolor;
}

.p-price__example {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.499fr);
  gap: calc(48 * var(--to-rem));
  margin-block-start: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-price__example {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--to-rem));
    margin-block-start: calc(32 * var(--to-rem));
  }
}

.p-price__example-head {
  display: flex;
  gap: calc(0.625 * var(--base-size));
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-price__example-head {
    align-items: flex-start;
  }
}

.p-price__example-label {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-block: calc(10 * var(--to-rem));
  padding-inline-end: calc(5 * var(--to-rem));
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1;
}

.p-price__example-label::before,
.p-price__example-label::after {
  content: "";
  position: absolute;
  left: 0;
  box-sizing: content-box;
  width: 100%;
  height: calc(2 * var(--to-rem));
}

.p-price__example-label::before {
  top: 0;
  border-top: calc(3 * var(--to-rem)) solid var(--color-brown);
  border-bottom: calc(1 * var(--to-rem)) solid var(--color-brown);
}

.p-price__example-label::after {
  bottom: 0;
  border-top: calc(1 * var(--to-rem)) solid var(--color-brown);
  border-bottom: calc(3 * var(--to-rem)) solid var(--color-brown);
}

.p-price__product {
  font-family: var(--font-mincho);
  font-size: calc(1.625 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .p-price__product {
    position: relative;
    top: -6px;
    font-size: calc(1.375 * var(--base-size));
  }
}

.p-price__product-code {
  font-size: calc(1 * var(--base-size));
}
@media screen and (max-width: 767px) {
  .p-price__product-code {
    display: block;
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-price__detail {
  display: flex;
  gap: calc(6 * var(--to-rem));
  align-items: center;
  margin-block-start: calc(21 * var(--to-rem));
}

.p-price__term {
  flex-shrink: 0;
  padding-block: calc(6 * var(--to-rem));
  padding-inline: calc(16 * var(--to-rem));
  background-color: var(--color-brown);
  color: var(--color-white);
  font-size: calc(0.875 * var(--base-size));
  font-weight: var(--fw-bold);
  text-align: center;
}

.p-price__amount {
  color: var(--color-text);
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .p-price__amount {
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-price__amount span {
  font-size: calc(1.625 * var(--base-size));
  font-weight: var(--fw-bold);
}

.p-price__spec {
  display: flex;
  gap: calc(1.625 * var(--base-size));
  margin-block-start: calc(14 * var(--to-rem));
  font-size: max(0.875 * var(--base-size), 12px);
  font-weight: var(--fw-medium);
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .p-price__spec {
    flex-direction: column;
    gap: calc(2 * var(--to-rem));
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-price__example-note {
  margin-block-start: calc(18 * var(--to-rem));
  font-size: max(0.75 * var(--base-size), 10px);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .p-price__example-note {
    margin-block-start: calc(6 * var(--to-rem));
  }
}

.p-price__example-note + .p-price__example-note {
  margin-block-start: calc(6 * var(--to-rem));
}

.p-price__example-image {
  overflow: hidden;
  padding-block-start: calc(12 * var(--to-rem));
}

.p-price__example-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 268/186;
  object-fit: cover;
}

.p-price__table-wrap {
  overflow-x: clip;
  margin-block-start: calc(28 * var(--to-rem));
}

.p-price__table {
  width: calc(100% + 6 * var(--to-rem));
  margin-inline: calc(-3 * var(--to-rem));
  border-collapse: separate;
  border-spacing: 3px;
}

.p-price__table-head,
.p-price__table td {
  padding-inline: calc(10 * var(--to-rem));
  vertical-align: middle;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-price__table-head,
  .p-price__table td {
    padding-inline: calc(4 * var(--to-rem));
  }
}

.p-price__table-cell {
  width: 33.7%;
  padding-block: calc(12 * var(--to-rem));
  background-color: var(--color-white);
  font-size: calc(1.5 * var(--base-size));
  font-weight: var(--fw-medium);
}
@media screen and (max-width: 767px) {
  .p-price__table-cell {
    width: 28%;
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-price__table-cell[data-variant=glass] {
  background-color: #f4dbd3;
}

.p-price__table-cell span {
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
}
@media screen and (max-width: 767px) {
  .p-price__table-cell span {
    font-size: calc(0.75 * var(--base-size));
  }
}

.p-price__table-head {
  padding-block: calc(10 * var(--to-rem));
  background-color: var(--color-brown);
  color: var(--color-white);
  font-family: var(--font-mincho);
  font-size: calc(1.5 * var(--base-size));
  font-weight: var(--fw-bold);
}
@media screen and (max-width: 767px) {
  .p-price__table-head {
    font-size: calc(1 * var(--base-size));
  }
}

.p-price__table-label {
  font-size: calc(1 * var(--base-size));
  font-weight: var(--fw-bold);
}
@media screen and (max-width: 767px) {
  .p-price__table-label {
    display: block;
    font-size: calc(0.75 * var(--base-size));
  }
}

.p-price__table strong {
  position: relative;
  top: -14px;
  left: 10px;
  display: inline-flex;
  gap: calc(2 * var(--to-rem));
  justify-content: center;
  align-items: baseline;
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(4.875 * var(--base-size));
  font-weight: var(--fw-black);
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-price__table strong {
    left: 4px;
    font-size: calc(2.875 * var(--base-size));
  }
}

.p-price__table strong em {
  font-size: calc(1.75 * var(--base-size));
  font-style: normal;
  font-weight: var(--fw-black);
}
@media screen and (max-width: 767px) {
  .p-price__table strong em {
    font-size: calc(1.375 * var(--base-size));
  }
}

span.p-price__table-text {
  position: relative;
  top: -3px;
  left: 2px;
  display: block;
  margin-block-start: calc(0 * var(--to-rem));
  color: var(--color-brown);
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  span.p-price__table-text {
    left: 1px;
    font-size: calc(0.625 * var(--base-size));
  }
}

.p-price__table-note-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(0.375 * var(--base-size));
  margin-block-start: calc(12 * var(--to-rem));
}

.p-price__table-note {
  display: block;
  font-size: max(0.75 * var(--base-size), 10px);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-price__table-note {
    font-size: calc(0.6875 * var(--base-size));
  }
}

.p-price__summary {
  margin-block-start: calc(1.75 * var(--base-size));
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: calc(1.625 * var(--base-size));
  font-weight: var(--fw-bold);
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-price__summary {
    font-size: calc(1.125 * var(--base-size));
    text-align: left;
  }
}

.p-spec {
  padding-block: calc(145 * var(--to-rem)) calc(65 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-spec {
    padding-block: calc(20 * var(--to-rem));
  }
}

.p-spec__body {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(min(380px, 48%), 0.88fr);
  gap: calc(3.375 * var(--base-size));
  margin-block-start: calc(3.625 * var(--base-size));
}
@media screen and (max-width: 767px) {
  .p-spec__body {
    grid-template-columns: 1fr;
    gap: calc(2 * var(--base-size));
    margin-block-start: calc(2.5 * var(--base-size));
  }
  .p-spec__body .p-spec__image {
    order: -1;
  }
}

.p-spec__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 504/290;
  object-fit: cover;
}

.p-spec__text {
  font-size: calc(1.125 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.5555555556;
}

.p-spec__note {
  margin-block-start: calc(12 * var(--to-rem));
  font-size: calc(0.875 * var(--base-size));
  font-weight: var(--fw-medium);
  line-height: 1.7;
}

.p-towel {
  padding-block-end: calc(30 * var(--to-rem));
  background: transparent linear-gradient(0deg, #fff 0%, #d5c06d 50%, #593e0a 100%) 0% 0% no-repeat padding-box;
}
@media screen and (max-width: 767px) {
  .p-towel {
    padding-block-end: calc(20 * var(--to-rem));
  }
}

.p-towel__image {
  overflow: hidden;
  max-width: calc(1180 * var(--to-rem));
  margin-inline: auto;
}

.p-towel__image img {
  display: block;
  width: 100%;
  min-height: calc(160 * var(--to-rem));
  object-fit: cover;
}

.p-works {
  position: relative;
  overflow: hidden;
  padding-block: calc(106 * var(--to-rem)) calc(90 * var(--to-rem));
  background-image: url("../images/bg-works.webp");
  background-position: left top;
  background-size: contain;
  background-repeat: repeat;
  background-color: var(--color-bg-light-beige);
}
@media screen and (max-width: 767px) {
  .p-works {
    padding-block: calc(74 * var(--to-rem));
  }
}

.p-works__motif {
  position: absolute;
  z-index: 0;
  width: calc(170 * var(--to-rem));
  height: auto;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .p-works__motif {
    width: calc(80 * var(--to-rem));
  }
}

.p-works__motif--top-left {
  top: calc(14 * var(--to-rem));
  left: calc(16 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-works__motif--top-left {
    top: calc(10 * var(--to-rem));
    left: calc(10 * var(--to-rem));
  }
}

.p-works__motif--top-right {
  top: calc(14 * var(--to-rem));
  right: calc(16 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-works__motif--top-right {
    top: calc(10 * var(--to-rem));
    right: calc(10 * var(--to-rem));
  }
}

.p-works__motif--bottom-left {
  bottom: calc(14 * var(--to-rem));
  left: calc(16 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-works__motif--bottom-left {
    bottom: calc(10 * var(--to-rem));
    left: calc(10 * var(--to-rem));
  }
}

.p-works__motif--bottom-right {
  right: calc(16 * var(--to-rem));
  bottom: calc(14 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-works__motif--bottom-right {
    right: calc(10 * var(--to-rem));
    bottom: calc(10 * var(--to-rem));
  }
}

.p-works__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.p-works__splide {
  margin-block-start: calc(58 * var(--to-rem));
}

.p-works__splide .splide__track {
  overflow: visible;
}

.p-works__splide.splide.is-initialized .splide__track {
  transform: translateX(calc((277.5 * var(--to-rem) + 14 * var(--to-rem)) * -0.5));
}
@media screen and (max-width: 767px) {
  .p-works__splide.splide.is-initialized .splide__track {
    transform: translateX(0);
  }
}

.p-works__splide .splide__slide {
  display: grid;
  width: 100%;
  max-width: calc(277.5 * var(--to-rem));
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16);
  background-color: var(--color-white);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media screen and (max-width: 767px) {
  .p-works__splide .splide__slide {
    max-width: calc(13.75 * var(--base-size));
  }
}

.p-works__splide .splide__list,
.p-works__splide .splide__track {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.p-works__splide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.p-works__slide-text {
  padding-block: calc(18 * var(--to-rem));
  padding-inline: calc(10 * var(--to-rem));
  color: var(--color-text);
  font-family: var(--font-mincho);
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-works__slide-text {
    font-size: calc(0.875 * var(--base-size));
  }
}

.p-works__button {
  display: flex;
  justify-content: center;
  max-width: calc(19.375 * var(--base-size));
  margin-block-start: calc(58 * var(--to-rem));
  margin-inline: auto;
}

:root {
  --clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
}

@media (width <= 767px) {
  [data-only-device=md] {
    display: none;
  }
}

@media (width >= 768px) {
  [data-only-device=sm] {
    display: none;
  }
}

.u-sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.u-text__marker {
  background: linear-gradient(transparent 75%, var(--color-orange) 75%);
}

.u-text__inline-block {
  display: inline-block;
}

.u-text__indent {
  padding-inline-start: 1em;
  text-indent: -1em;
}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}