:root { --inner-value: 1090; --inner: 1090px; --padding-pc: 40px; --padding-sp: 20px; } :root { --rem: 1rem / 16; --em: 1em / 16; --vw: 375 * 100vw; --inner-percent: var(--inner-value) * 100%; } :root { --base-font: "MFW-PShinGoPr6N-Regular", sans-serif; --en-font: "MFW-PShinGoPr6N-Regular", sans-serif; --gazzetta-font: "gazzetta-variable", sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; } :root { --black: #000; --white: #fff; --light-blue: #47deef; --orange: #e8693f; --pink: #ff7bca; --green: #85ed36; --red: #b93e3e; --gray: #aeaeae; --bg-light-gray: #f1f1f1; --text-black: #191919; --text-black2: #1f1f1f; } :root { --z-index-loader: 200; --z-index-header: 100; } :root { --header-height: calc(54 / 16 * 1rem); --scrollbar-width: 0; } @property --scrollbar { syntax: ""; initial-value: 0; inherits: true; } :root:has(:modal[open], .is-scroll-lock, .loader) { overflow: hidden; } html { scroll-padding-top: var(--header-height); } body { container-type: inline-size; background-color: var(--white); font-family: var(--base-font); color: var(--text-black); font-weight: var(--fw-medium); } html { font-size: 16px; } /*! kiso.css v1.2.2 | 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%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; /* Prevents layout shift caused by the appearance or disappearance of the scrollbar. */ 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(h1, h2, h3, h4, h5, h6) { /* 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; 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;
}

/* ======================================================
//  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,
var):lang(ja)) { /* Italic style is not common in Japanese, so the `font-style` is reset. */
	font-style: unset;
}

: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;
	cursor: help;
}

:where(time) { /* Set to `no-autospace` because date notations in typography do not include spaces. */
	text-autospace: no-autospace;
}

/* ======================================================
//  MARK: Links
// ====================================================== */

:where(a:-moz-any-link) { /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
	color: unset; /*
  * 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;
}

:where(a:any-link) { /* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
	color: unset; /*
  * 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;
}

/* ======================================================
//  MARK: Embedded content
// ====================================================== */

:where(img,
svg,
picture,
video,
canvas,
model,
audio,
iframe,
embed,
object) { /* Automatically adjust block size based on content. */
	block-size: auto; /* Prevents overflow by setting the maximum width to `100%`. */
	max-inline-size: 100%;
	inline-size: 100%; /* Prevents extra space from appearing at the bottom of the element. */
	vertical-align: bottom;
}

:where(img) {
	display: block;
}

: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) { /* 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;
}

:where(input:is([type=tel i],
[type=url i],
[type=email i],
[type=number i]):not(:-moz-placeholder)) { /*
  * 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(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 `