@charset "UTF-8";
:root {
  --rem: 1rem / 16;
  --em: 1em / 16;
  --vw: 1440 * 100vw;
  --inner-percent: 335 * 100%;
}

:root {
  --inner-value: 1100;
  --inner: 1100px;
  --padding-pc: max(20px, 20/var(--vw));
  --padding-sp: 16px;
}

:root {
  --base-font: "Shippori Mincho", serif;
  --gothic-font: "Noto Sans JP", sans-serif;
  --serif-font: "Noto Serif JP", serif;
  --en-font: "Cinzel", serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
}

:root {
  --white: #fff;
  --black: #150102;
  --off-white: #fffcf5;
  --red-dark: #580003;
  --red: #8b0005;
  --red-deepest: #0f0000;
  --gold: #d9ba60;
  --gold-medium: #c59d48;
  --gold-dark: #976e00;
  --gold-brown: #bb842a;
  --gold-yellow: #c99300;
  --cream: #fff4dd;
  --cream-light: #fff2d8;
  --cream-gold: #ffebc1;
  --cream-pale: #ffe9bc;
  --cream-beige: #e3d9c0;
  --cream-warm: #f6f3eb;
  --navy: #002e7d;
  --navy-dark: #071e47;
  --blue: #0046bf;
  --wine: #7f1142;
  --wine-dark: #460924;
  --magenta: #c81263;
  --prize-brown: #65472d;
  --prize-gold: #ceaa4f;
  --prize-silver: #989898;
  --prize-bronze: #ac735d;
  --prize-gradient-start: #18b7cd;
  --prize-gradient-end: #aa3e96;
  --prize-teal: #2d8786;
  --brown: #654101;
  --brown-dark: #503500;
  --brown-gold: #59330f;
  --brown-orange: #965803;
  --brown-text: #240e00;
  --brown-body: #321c0f;
  --brown-gray: #736357;
  --beige-light: #eee8d5;
  --beige-sand: #d7cbaa;
  --gold-border: #a47600;
  --gold-beige: #e5d2a4;
  --red-accent: #8d032b;
  --red-pale: #f4e6ea;
  --gray: #525252;
  --gray-mauve: #ae9080;
  --gray-light: #e3e0dd;
  --white-alpha50: rgba(255, 255, 255, 0.5);
}

:root {
  --z-index-loader: 200;
  --z-index-header: 100;
  --z-index-fixed-cta: 90;
}

:root {
  --scrollbar-width: 0;
}

@property --scrollbar {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}
body {
  color: var(--white);
  font-family: var(--base-font);
  font-weight: var(--fw-medium);
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

html {
  font-size: 16px;
}

main {
  overflow-x: clip;
}

/*! 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;
  /* 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;
  /* Improves readability by inserting a small space between Japanese and alphanumeric characters. */
  text-autospace: normal;
  /*
  * 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) {
  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
  /*
  * 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;
}

/* ======================================================
// 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) {
  font-size: 2em;
  /*
  * 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;
}

: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) {
  /*
  * 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: "";
  /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  padding-inline-start: unset;
}

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

/* ======================================================
//  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;
  /* 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;
  font-variation-settings: initial;
}

:where(abbr[title]) {
  cursor: help;
  /*
  * 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;
}

: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;
  inline-size: 100%;
  /* 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(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 styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
  border-color: unset;
  border-radius: unset;
  border-style: solid;
  /*
  * 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;
  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(:-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 `<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) {
  border: unset;
  /* The following default styles are often unnecessary, so they are reset. */
  margin-inline: unset;
  /*
  * 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;
  padding: 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;
}

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

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

/* ======================================================
//  MARK: Interactive elements
// ====================================================== */
:where(summary) {
  /* Changing the cursor to a pointer clarifies the clickability of the element. */
  cursor: pointer;
  /* The default triangle marker is often unnecessary, so it is disabled. */
  list-style-type: "";
}

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

: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) {
  max-block-size: unset;
  /*
  * 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;
}

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

: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. */
}

[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;
}

/* ======================================================
//  MARK: a[href^="tel:"]
// ====================================================== */
.l-inner {
  margin-inline: auto;
  max-width: calc(var(--inner) + var(--padding-pc) * 2);
  padding-inline: var(--padding-pc);
  width: 100%;
}

.about {
  background-image: url(../images/common/bg.avif);
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding-block: 3.125rem 5.625rem;
  position: relative;
  z-index: 1;
}

.about::before {
  background-image: url(../images/about/deco-pc.avif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  height: 9vw;
  left: 0;
  position: absolute;
  top: -8.9vw;
  width: 100%;
  z-index: -1;
}

.about__illustration {
  background-color: var(--brown-text);
  color: var(--white);
  display: inline-block;
  font-size: 1rem;
  padding: 0.0625rem 2.1875rem 0.1875rem;
  position: absolute;
  right: 0;
  top: -3.125rem;
}

.about__title-wrap {
  margin-inline: auto;
  max-width: 48.5rem;
  text-align: center;
  width: 100%;
}

.about__title {
  position: relative;
}

.about__title::before {
  background-image: url(../images/about/title.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 8.125rem;
  left: 50%;
  position: absolute;
  top: -6.625rem;
  transform: translateX(-50%);
  width: 20.75rem;
  z-index: -1;
}

.about__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 3.5625rem;
  width: 100%;
}

.about__lead {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.about__lead-highlight-text {
  background-color: var(--white);
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 2rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4688;
  padding-left: 0.9375rem;
  text-align: center;
  white-space: nowrap;
}

.about__lead-highlight-text--teal {
  color: var(--prize-gradient-start);
}

.about__lead-highlight-text--magenta {
  color: var(--prize-gradient-end);
}

.about__lead-text {
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  line-height: 2.5;
  text-align: center;
  white-space: nowrap;
}

.about__lead-text-sp {
  display: none;
}

.about__desc {
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 2;
  text-align: center;
}

.about__desc strong {
  font-weight: var(--fw-bold);
}

.about__img-wrap {
  margin-inline: auto;
  margin-top: 8.125rem;
  max-width: 54.375rem;
  width: 100%;
}

.about__heading {
  margin-inline: auto;
  width: 96%;
}

.about__img {
  display: block;
  margin-top: 2.5rem;
}

.about__message-heading {
  margin-inline: auto;
  margin-top: 7.375rem;
  width: 98.5%;
}

.about__message-box {
  background-color: var(--cream-warm);
  border: 0.1875rem solid var(--gold-border);
  margin-top: 3.75rem;
  max-width: 68.75rem;
  width: 100%;
}

.about__message-text {
  color: var(--brown-text);
  font-family: var(--gothic-font);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 2;
  margin-inline: auto;
  max-width: 56.25rem;
  padding: 2.0625rem 1.25rem 2.25rem;
  width: 100%;
}
.about__message-text p + p {
  margin-top: 2rem;
}

.about__label-heading {
  margin-inline: auto;
  margin-top: 9.0625rem;
  width: 82%;
}

.about__label-list {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.625rem;
  max-width: 68.75rem;
  width: 100%;
}

.about__label-item {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: calc((100% - 2.5rem) / 2);
}

.about__label-img {
  display: block;
  position: relative;
  transition: opacity 0.3s;
}

.about__label-img > img {
  aspect-ratio: 530/278;
  object-fit: cover;
  width: 100%;
}

.about__label-link {
  align-items: center;
  bottom: 0;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  position: absolute;
  right: 0;
  width: 2.5rem;
}

.about__label-link--magenta {
  background-color: var(--prize-gradient-end);
}

.about__label-link--pink {
  background-color: #ffa5ac;
}

.about__label-link-icon {
  display: block;
  height: 0.875rem;
  object-fit: contain;
  width: 0.875rem;
}

.about__label-text {
  color: var(--brown-text);
  font-family: var(--gothic-font);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 2;
}

.about__label-text strong {
  font-weight: var(--fw-bold);
}

.awards {
  background-image: url(../images/awards/bg-pc.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -3.125rem;
  padding-block: 19.625rem 5.625rem;
  position: relative;
  z-index: 5;
}

.awards::after {
  background-image: url(../images/awards/deco-pc.avif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: -6.354vw;
  content: "";
  height: calc(6.354vw + 1px);
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.awards__title-wrap {
  isolation: isolate;
}

.awards__title {
  position: relative;
}

.awards__title::before {
  background-image: url(../images/awards/title.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 8.125rem;
  left: 50%;
  position: absolute;
  top: -6.625rem;
  transform: translateX(-50%);
  width: 22.0625rem;
  z-index: -1;
}

.awards__title.section-title {
  padding-block: 0.5rem 0.75rem;
}

.awards__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.awards__lead {
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 2;
  text-align: center;
}

.awards__prize {
  max-width: 68.75rem;
  width: 100%;
}

.awards__prize img {
  height: auto;
  width: 100%;
}

.awards__extra {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 68.75rem;
  width: 100%;
}

.awards__extra-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.awards__extra-heading {
  align-items: center;
  align-self: flex-start;
  border-bottom: 0.125rem solid;
  display: inline-flex;
  gap: 0.5rem;
  padding-bottom: 0.3125rem;
}

.awards__extra-heading--gold {
  border-color: var(--gold-border);
}

.awards__extra-heading--teal {
  border-color: #2d8786;
}

.awards__extra-icon {
  display: block;
  flex-shrink: 0;
  height: auto;
  width: 1.25rem;
}

.awards__extra-name {
  color: var(--prize-brown);
  font-family: var(--serif-font);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.awards__extra-body {
  display: flex;
  flex-direction: column;
}

.awards__extra-list {
  list-style: none;
  padding-left: 1.5rem;
}

.awards__extra-text {
  color: var(--prize-brown);
  font-family: var(--serif-font);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  position: relative;
}
.awards__extra-text::before {
  background-color: currentColor;
  border-radius: 50%;
  content: "";
  height: 0.4375rem;
  left: -1rem;
  position: absolute;
  top: 1.25rem;
  transform: translateY(-50%);
  width: 0.4375rem;
}

.awards__extra-text--prize::before {
  top: 1.8125rem;
}

.awards__extra-text strong {
  font-size: 2rem;
  font-weight: var(--fw-black);
  margin-right: -0.25rem;
}

.awards__note-wrap {
  margin-top: 0.5625rem;
  padding-right: 1.375rem;
}

.awards__note {
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  max-width: 68.75rem;
  padding-left: 1.3125rem;
  text-indent: -1.3125rem;
  width: 100%;
}

.contact {
  background-image: url(../images/common/bg.avif);
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding-block: 16.5625rem 15vw;
}

.contact__title-wrap {
  isolation: isolate;
  margin-inline: auto;
  max-width: 21rem;
  width: 100%;
}

.contact__title {
  position: relative;
}

.contact__title::before {
  background-image: url(../images/contact/title.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 8.125rem;
  left: 50%;
  position: absolute;
  top: -6.625rem;
  transform: translateX(-50%);
  width: 20.75rem;
  z-index: -1;
}

.contact__title .section-title__text {
  letter-spacing: 0.6em;
}

.contact__box {
  align-items: center;
  background-color: var(--white);
  border: 0.1875rem solid var(--gold-border);
  display: flex;
  justify-content: center;
  margin-top: 3.3125rem;
  padding: 3.21875rem 1.5rem;
  position: relative;
  width: 100%;
}

.contact__box::after {
  border: 0.0625rem solid var(--gold-beige);
  content: "";
  height: 94%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 99%;
}

.contact__text {
  color: var(--black);
  font-family: var(--base-font);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.contact__link {
  color: var(--gold-border);
  font-weight: var(--fw-extrabold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact__pagetop {
  background-color: transparent;
  background-image: url(../images/footer/pagetop.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  height: 4.875rem;
  margin-inline: auto;
  margin-top: 5rem;
  padding: 0;
  text-align: center;
  width: 15rem;
}

.contact__pagetop-text {
  color: #f7f4ea;
  font-family: var(--base-font);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.2em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.faq-item {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  width: 100%;
}

.faq-item__header {
  align-items: center;
  background-color: var(--white);
  cursor: pointer;
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
}

.faq-item__badge {
  align-items: center;
  background-color: var(--gold-border);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  padding: 0.34375rem 0.6875rem 0.71875rem;
}

.faq-item__badge-text {
  color: var(--white);
  font-family: var(--base-font);
  font-size: 2rem;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  text-align: center;
}

.faq-item__question {
  color: var(--brown-text);
  font-family: var(--gothic-font);
  font-size: 1.25rem;
  font-weight: var(--fw-regular);
  line-height: 2;
}

.faq-item__toggle {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 1.25rem;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  position: relative;
  width: 1.25rem;
}

.faq-item__toggle::before {
  background-color: var(--gold-border);
  content: "";
  display: block;
  height: 0.125rem;
  transition: transform 0.3s ease;
  width: 100%;
}

.faq-item__toggle::after {
  background-color: var(--gold-border);
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  transition: transform 0.3s ease;
  width: 0.125rem;
}

.faq-item.is-open .faq-item__toggle::after {
  transform: translateX(-50%) rotate(90deg);
}

.faq-item__body {
  align-items: flex-start;
  background-color: var(--beige-sand);
  display: flex;
  gap: 1rem;
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
}

.faq-item__body-inner {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  width: 100%;
}

.faq-item__answer-wrap {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  min-height: 3.0625rem;
}

.faq-item__answer {
  color: var(--brown-text);
  font-family: var(--gothic-font);
  font-size: 1.25rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

.faq-item__answer strong {
  font-weight: var(--fw-black);
}

.faq-item__answer a {
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.faq-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.875rem;
  max-width: 68.75rem;
  width: 100%;
}

.faq-nav {
  align-items: center;
  background-color: var(--beige-light);
  border: 0.0625rem solid var(--gold-border);
  display: flex;
  gap: 0.6875rem;
  padding: 1rem 2rem;
  transition: opacity 0.3s;
  width: 100%;
}

.faq-nav__text {
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.faq-nav__icon {
  align-items: center;
  background-color: #a47600;
  display: flex;
  flex-shrink: 0;
  height: 1.5rem;
  justify-content: center;
  margin-left: auto;
  width: 1.5rem;
}

.faq-nav__icon-img {
  display: block;
  height: 1.0625rem;
  object-fit: contain;
  width: 0.6875rem;
}

.footer {
  background-image: url(../images/footer/bg-pc.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -0.3125rem;
  position: relative;
  width: 100%;
}

.footer::before {
  background-image: url(../images/footer/deco-pc.avif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  height: calc(8.958vw + 1px);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: -8.93vw;
  width: 100%;
}

.footer__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2.6875rem;
  margin-inline: auto;
  max-width: 66.25rem;
  padding: 3.75rem var(--padding-pc) 2rem;
  position: relative;
}

.footer__logos {
  align-items: center;
  display: flex;
  gap: 2.25rem;
  width: 100%;
}

.footer__logo {
  border-radius: 0.125rem;
  display: block;
  overflow: hidden;
  transition: opacity 0.3s;
}

.footer__logo img {
  display: block;
  height: auto;
  width: 100%;
}

.footer__note {
  color: var(--white);
  font-family: var(--gothic-font);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  text-align: center;
}

.footer__copyright {
  color: var(--white);
  font-family: var(--gothic-font);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  text-align: center;
  margin-top: -1rem;
}

.footer__privacy {
  color: var(--white);
  font-family: var(--gothic-font);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  text-align: center;
  margin-top: -1rem; /* 親要素のgapを相殺して余白を調整 */
}

.footer__privacy a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__pagetop {
  align-items: center;
  background-color: transparent;
  background-image: url(../images/footer/pagetop.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  bottom: 2rem;
  cursor: pointer;
  display: flex;
  height: 4.875rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 2rem;
  transition: opacity 0.3s;
  width: 15rem;
}

.footer__pagetop-text {
  color: #f7f4ea;
  font-family: var(--base-font);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.2em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.howtoapply {
  background-image: url(../images/common/bg.avif);
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding-top: 15.1875rem;
  position: relative;
}

.howtoapply::before {
  background-image: url(../images/howtoapply/deco-pc.avif);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  height: 22.125rem;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 124.5vw;
}

.howtoapply__title-wrap {
  isolation: isolate;
  margin-inline: auto;
  max-width: 21rem;
  width: 100%;
}

.howtoapply__title {
  position: relative;
}

.howtoapply__title::before {
  background-image: url(../images/howtoapply/title.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 10.125rem;
  left: 50%;
  position: absolute;
  top: -6.625rem;
  transform: translateX(-50%);
  width: 37.625rem;
  z-index: -1;
}

.howtoapply__title .section-title__text {
  letter-spacing: 0.6em;
}

.howtoapply__box {
  background-color: var(--white-alpha50);
  border: 0.1875rem solid var(--gold-border);
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.15);
  margin-top: 4.0625rem;
  padding: 3.125rem 0.25rem 4.1875rem;
  position: relative;
  width: 100%;
}

.howtoapply__box::after {
  border: 0.0625rem solid var(--gold-beige);
  content: "";
  display: block;
  height: calc(100% - 0.5rem);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0.25rem;
  transform: translateX(-50%);
  width: calc(100% - 1rem);
}

.howtoapply__section {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;
}

.howtoapply__section + .howtoapply__section {
  margin-top: 5rem;
}

.howtoapply__heading {
  border-bottom: 0.125rem solid var(--gold-border);
  padding: 0 3.3125rem 0.625rem;
  position: relative;
}

.howtoapply__heading::before,
.howtoapply__heading::after {
  background-color: var(--gold-border);
  bottom: -0.3125rem;
  content: "";
  height: 0.5rem;
  position: absolute;
  transform: rotate(45deg);
  width: 0.5rem;
}

.howtoapply__heading::before {
  left: 0;
}

.howtoapply__heading::after {
  right: 0;
}

.howtoapply__date {
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 2.5rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.howtoapply__date-narrow {
  letter-spacing: -0.4em;
}

.howtoapply__date-tight {
  letter-spacing: -0.08em;
}

.howtoapply__date-narrow2 {
  letter-spacing: -0.4em;
}

.howtoapply__text {
  color: var(--brown-text);
  font-family: var(--serif-font);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  margin-top: -0.25rem;
  max-width: 56.75rem;
  text-align: center;
}

.howtoapply__text.howtoapply__text--tight {
  letter-spacing: -0.04em;
}

.howtoapply__text strong {
  color: var(--gold-border);
  font-weight: var(--fw-black);
}

.howtoapply__note {
  display: flex;
  flex-direction: column;
  max-width: 57.1875rem;
  width: 100%;
}

.howtoapply__note-label {
  align-items: center;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  padding: 0.3125rem 1.0625rem 0.4375rem 1.5rem;
}

.howtoapply__note-label--gray {
  background-color: var(--brown-gray);
}

.howtoapply__note-label--red {
  background-color: var(--red-accent);
}

.howtoapply__note-label-text {
  color: var(--white);
  font-family: var(--serif-font);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.howtoapply__note-body {
  padding: 1.5rem 1.5rem 1.5rem 0.75rem;
}

.howtoapply__note-body--gray {
  background-color: var(--gray-light);
}

.howtoapply__note-body--red {
  background-color: var(--red-pale);
}

.howtoapply__note-list {
  color: var(--brown-text);
  font-family: var(--gothic-font);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 2;
  list-style: disc;
  padding-left: 1.5rem;
}

.howtoapply__link {
  color: var(--red-accent);
  font-weight: var(--fw-black);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.judge-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3.4375rem;
  max-width: 68.75rem;
  width: 100%;
}

.judge-item {
  display: grid;
  gap: 2rem;
  grid-template-areas: "name name" "img text";
  grid-template-columns: 18rem 1fr;
  width: 100%;
}

.judge-item__name {
  border-bottom: 0.125rem solid var(--cream-beige);
  grid-area: name;
  padding-bottom: 0.75rem;
  width: 100%;
}

.judge-item__name-text {
  color: var(--white);
  font-family: var(--base-font);
  font-size: 2.25rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.2em;
  text-align: center;
}

.judge-item__img {
  grid-area: img;
  width: 18rem;
}

.judge-item__img img {
  height: auto;
  width: 100%;
}

.judge-item__text-wrap {
  align-self: start;
  border-radius: 0.25rem;
  grid-area: text;
  overflow: hidden;
  padding: 1.625rem 2rem 1.875rem;
  position: relative;
}

.judge-item__text-wrap::after {
  background-image: url(../images/judge/item-bg-pc.avif);
  background-position: center;
  background-size: cover;
  border-radius: 0.25rem;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.judge-item__text {
  color: var(--brown-body);
  font-family: var(--gothic-font);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.judge-item__text p + p {
  margin-top: 0.625rem;
}

.judge {
  background-image: url(../images/judge/bg-pc.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: 14.5rem 7.5625rem;
  position: relative;
  z-index: 10;
}

.judge::before,
.judge::after {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.judge::before {
  background-image: url(../images/judge/deco-pc01.avif);
  background-position: center top;
  height: calc(min(4.375vw, 5.25rem) + 1px);
  top: calc(max(-4.271vw, -5.125rem) + 1px);
}

.judge::after {
  background-image: url(../images/judge/deco-pc02.avif);
  background-position: center bottom;
  bottom: calc(max(-4.063vw, -4.875rem) - 1px);
  height: calc(min(4.167vw, 5rem) + 2px);
}

.judge__title-wrap {
  isolation: isolate;
  margin-inline: auto;
  max-width: 16.0625rem;
  width: 100%;
}

.judge__title {
  position: relative;
}

.judge__title.section-title {
  background-color: var(--white);
}

.judge__title::before {
  background-image: url(../images/judge/title.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 10rem;
  left: 46%;
  position: absolute;
  top: -6.3125rem;
  transform: translateX(-50%);
  width: 22.625rem;
  z-index: -1;
}

.judge__title-wrap .section-title__text {
  color: var(--brown-body);
}

.judge__list {
  margin-top: 2.9375rem;
}

.mv {
  aspect-ratio: 1920/930;
  background-image: url(../images/mv/mv.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

.mv__title {
  left: calc(50% - 55rem);
  position: absolute;
  top: 23%;
  transform: translateY(-50%);
  width: min(45.833vw, 55rem);
}

.mv__title img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.mv__schedule {
  left: 50%;
  position: absolute;
  top: 70.5%;
  transform: translate(-50%, -50%);
  width: min(71.875vw, 86.25rem);
}

.questionsandanswers {
  background-image: url(../images/common/bg.avif);
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding-top: 16.4375rem;
}

.questionsandanswers__title-wrap {
  isolation: isolate;
  margin-inline: auto;
  max-width: 10.375rem;
  width: 100%;
}

.questionsandanswers__title {
  position: relative;
}

.questionsandanswers__title .section-title__text {
  letter-spacing: 0.6em;
}

.questionsandanswers__title::before {
  background-image: url(../images/questionsandanswers/title.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 8.125rem;
  left: 50%;
  position: absolute;
  top: -6.625rem;
  transform: translateX(-50%);
  width: 58.25rem;
  z-index: -1;
}

.questionsandanswers__nav {
  margin-top: 4.0625rem;
}

.questionsandanswers__nav-item {
  width: calc((100% - 1.875rem) / 2);
}

.questionsandanswers__box {
  background-color: var(--beige-light);
  border: 0.1875rem solid var(--gold-border);
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 3.75rem;
  max-width: 68.75rem;
  padding: 3.75rem 3.5rem;
  position: relative;
  width: 100%;
}

.questionsandanswers__box::after {
  border: 0.0625rem solid var(--gold-border);
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
}

.questionsandanswers__category {
  background-color: #f7f4ea;
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
  padding: 1.5625rem 2rem 1.875rem;
}

.questionsandanswers__category-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.questionsandanswers__category-heading .section-heading__text {
  font-size: 2rem;
}

.questionsandanswers__category-heading .section-heading__line {
  margin-top: 0.125rem;
}

.questionsandanswers__toggle {
  align-items: center;
  background-color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: 1.125rem 1rem;
  width: 11.125rem;
}

.questionsandanswers__toggle-icon {
  flex-shrink: 0;
  height: 1.25rem;
  position: relative;
  width: 1.25rem;
}

.questionsandanswers__toggle-icon::before {
  background-color: var(--gold-border);
  content: "";
  display: block;
  height: 0.125rem;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.questionsandanswers__toggle-icon::after {
  background-color: var(--gold-border);
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  transition: transform 0.3s ease;
  width: 0.125rem;
}

.questionsandanswers__category.is-all-open .questionsandanswers__toggle-icon::after {
  transform: translateX(-50%) rotate(90deg);
}

.questionsandanswers__toggle-text {
  color: var(--brown-text);
  font-family: var(--gothic-font);
  font-size: 1.25rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  white-space: nowrap;
}

.questionsandanswers__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-heading__text {
  color: var(--brown-text);
  font-family: var(--base-font);
  font-size: 2.25rem;
  font-weight: var(--fw-extrabold);
  text-align: center;
  white-space: nowrap;
}

.section-heading__line {
  align-items: center;
  display: flex;
  margin-top: 0.625rem;
}

.section-heading__line::before,
.section-heading__line::after {
  background-color: var(--gold-border);
  content: "";
  display: block;
  flex-shrink: 0;
  height: 0.5rem;
  transform: rotate(45deg);
  width: 0.5rem;
}

.section-heading__line span {
  background-color: var(--gold-border);
  display: block;
  height: 0.125rem;
  width: 100%;
}

.section-title {
  background-color: var(--brown-text);
  padding: 0.4375rem 1.5rem 0.75rem;
}

.section-title__text {
  color: var(--white);
  font-family: var(--base-font);
  font-size: 2rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  line-height: 1;
  position: relative;
  text-align: center;
  transform: scaleY(1.1);
  white-space: nowrap;
  z-index: 1;
}

.js-fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.js-fade-in.is-visible {
  opacity: 1;
}

.js-fade-load {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.js-fade-load.is-visible {
  opacity: 1;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (min-width: 768px){
  a[href^="tel:"] {
    pointer-events: none;
  }
}

@media (max-width: 1919px){
  .mv__title {
    left: 5rem;
  }
}

@media (max-width: 1200px){
  html {
    font-size: calc(16 / var(--inner-value) * 100vw);
  }
}

@media screen and (max-width: 767px){
  :root {
    --vw: 375 * 100vw;
  }
  html {
    font-size: 16px;
  }
  .l-inner {
    max-width: 500px;
    padding-inline: var(--padding-sp);
  }
  .about {
    margin-top: -0.625rem;
    padding-block: 5.375rem 5.1875rem;
  }
  .about::before {
    aspect-ratio: 375/200;
    background-image: url(../images/about/deco-sp.avif);
  }
  .about__inner.l-inner {
    padding-inline: 0;
  }
  .about__illustration {
    font-size: 0.875rem;
    padding: 0.0625rem 1.46875rem 0.1875rem;
    top: -3.75rem;
  }
  .about__title-wrap {
    max-width: 22.25rem;
  }
  .about__title::before {
    height: 5.5rem;
    top: -4.8125rem;
    width: 14.6875rem;
  }
  .about__content {
    margin-top: 2.0625rem;
  }
  .about__lead {
    flex-direction: column;
    gap: 0;
  }
  .about__lead-highlight-text {
    font-size: 0.875rem;
    line-height: 1.75;
    padding-left: 0.3125rem;
  }
  .about__lead-highlight-text--cross {
    font-size: 0.625rem;
  }
  .about__lead-text {
    font-size: 0.875rem;
  }
  .about__lead-text-sp {
    display: inline;
  }
  .about__desc {
    font-size: 0.875rem;
  }
  .about__img-wrap {
    margin-top: 3.9375rem;
    padding-inline: var(--padding-sp);
  }
  .about__heading {
    width: 100%;
  }
  .about__img {
    margin-inline: auto;
    margin-top: 1.75rem;
    max-width: 25rem;
    width: 100%;
  }
  .about__message-heading {
    margin-top: 3.125rem;
    padding-inline: var(--padding-sp);
    width: 100%;
  }
  .about__message-box-wrap {
    padding-inline: var(--padding-sp);
  }
  .about__message-box {
    border-width: 0.125rem;
    margin-top: 1.6875rem;
  }
  .about__message-text {
    font-size: 0.875rem;
    padding: 1.25rem 1rem;
  }
  .about__label-heading {
    margin-top: 4.3125rem;
    padding-inline: var(--padding-sp);
    width: 100%;
  }
  .about__label-list {
    flex-direction: column;
    gap: 1.5rem;
    margin-inline: auto;
    margin-top: 1.75rem;
    padding-inline: var(--padding-sp);
    width: 96%;
  }
  .about__label-item {
    gap: 0.875rem;
    width: 100%;
  }
  .about__label-text {
    font-size: 0.875rem;
  }
  .awards {
    background-image: url(../images/awards/bg-sp.avif);
    padding-block: 13.3125rem 3.4375rem;
  }
  .awards::after {
    background-image: url(../images/awards/deco-sp.avif);
    bottom: -9.662vw;
    height: 9.662vw;
  }
  .awards__title::before {
    height: 6.4375rem;
    top: -5rem;
    width: 15.625rem;
  }
  .awards__title.section-title {
    padding-block: 1.125rem;
  }
  .awards__inner {
    gap: 2rem;
  }
  .awards__lead {
    font-size: 0.875rem;
  }
  .awards__prize {
    max-width: 25rem;
  }
  .awards__extra {
    gap: 0.9375rem;
    margin-top: -0.5625rem;
  }
  .awards__extra-icon {
    width: 0.875rem;
  }
  .awards__extra-name {
    font-size: 0.875rem;
  }
  .awards__extra-list {
    padding-left: 1rem;
  }
  .awards__extra-text::before {
    height: 0.3125rem;
    left: -0.75rem;
    top: 0.75rem;
    width: 0.3125rem;
  }
  .awards__extra-text {
    font-size: 0.875rem;
  }
  .awards__extra-text--prize::before {
    top: 1.125rem;
  }
  .awards__extra-text strong {
    font-size: 1.25rem;
    margin-right: -0.0625rem;
  }
  .awards__note-wrap {
    margin-top: -0.25rem;
  }
  .awards__note {
    font-size: 0.875rem;
    padding-left: 0.8125rem;
    text-indent: -0.8125rem;
  }
  .contact {
    padding-block: 9.625rem 24vw;
  }
  .contact__title-wrap {
    max-width: 9rem;
  }
  .contact__title::before {
    height: 6.25rem;
    top: -5.125rem;
    width: 12.5rem;
  }
  .contact__title .section-title__text {
    letter-spacing: 0.2em;
  }
  .contact__box {
    border-width: 0.125rem;
    margin-top: 1.875rem;
    padding: 1.5rem 1.375rem;
  }
  .contact__box::after {
    height: 96%;
    width: 98%;
  }
  .contact__text {
    font-size: 1rem;
    white-space: normal;
  }
  .faq-item {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
  }
  .faq-item__header {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .faq-item__badge {
    height: 1.375rem;
    padding: 0 0 0.15625rem;
    width: 1.375rem;
  }
  .faq-item__badge-text {
    font-size: 1rem;
  }
  .faq-item__question {
    font-size: 1rem;
    line-height: 1.3;
  }
  .faq-item__toggle {
    height: 0.625rem;
    width: 0.625rem;
  }
  .faq-item__body-inner {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .faq-item__answer-wrap {
    min-height: 1.3125rem;
  }
  .faq-item__answer {
    font-size: 0.875rem;
  }
  .faq-nav-list {
    flex-direction: column;
    gap: 0.875rem;
  }
  .faq-nav {
    padding: 0.75rem 1rem;
    width: 100%;
  }
  .faq-nav__text {
    font-size: 1rem;
  }
  .faq-nav__icon {
    height: 1rem;
    width: 1rem;
  }
  .faq-nav__icon-img {
    height: 0.625rem;
    width: 0.625rem;
  }
  .footer {
    background-image: url(../images/footer/bg-sp.avif);
    background-position: top;
  }
  .footer::before {
    background-image: url(../images/footer/deco-sp.avif);
    height: calc(11.594vw + 1px);
    top: -11.59vw;
  }
  .footer__inner {
    gap: 2rem;
    padding: 1.5625rem 0;
  }
  .footer__logos {
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 14.0625rem;
  }
  .footer__note {
    font-size: 0.75rem;
  }
  .footer__copyright {
    font-size: 0.75rem;
    margin-top: -1rem;
  }
  .footer__privacy {
    font-size: 0.75rem;
    margin-top: -1rem; /* スマホ時の余白調整 */
  }
  .footer__pagetop {
    display: none;
  }
  .footer__pagetop-text {
    font-size: 0.75rem;
  }
  .howtoapply {
    padding-top: 9.25rem;
  }
  .howtoapply::before {
    background-image: url(../images/howtoapply/deco-sp.avif);
    height: 9.1875rem;
  }
  .howtoapply__title-wrap {
    max-width: 12.5rem;
  }
  .howtoapply__title::before {
    height: 9.5625rem;
    top: -6.125rem;
    width: 24.625rem;
  }
  .howtoapply__box {
    border: none;
    margin-inline: calc(50% - 50vw);
    margin-top: 2rem;
    padding: 1.5rem 1rem 2.125rem;
    width: 100vw;
  }
  .howtoapply__box::after {
    display: none;
  }
  .howtoapply__section {
    gap: 0.25rem;
    margin-inline: auto;
    max-width: 500px;
  }
  .howtoapply__section + .howtoapply__section {
    margin-top: 1.5rem;
  }
  .howtoapply__heading {
    padding: 0 1.875rem 0.25rem;
  }
  .howtoapply__date {
    font-size: 1.5rem;
    line-height: 1.5;
    white-space: normal;
  }
  .howtoapply__text {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.25rem;
  }
  .howtoapply__text strong:nth-of-type(2),
  .howtoapply__text strong:nth-of-type(3) {
    margin-inline: -0.125rem;
  }
  .howtoapply__note-label--gray {
    margin-top: 1.875rem;
  }
  .howtoapply__note-label--red {
    margin-top: 1.875rem;
  }
  .howtoapply__note-label-text {
    font-size: 1.25rem;
  }
  .howtoapply__note-body {
    padding: 1.0625rem 0.5rem 1.0625rem 0.25rem;
  }
  .howtoapply__note-list {
    font-size: 0.75rem;
    padding-left: 1.125rem;
  }
  .howtoapply__link {
    font-weight: var(--fw-bold);
  }
  .judge-list {
    gap: 3rem;
  }
  .judge-item {
    gap: 0.75rem;
    grid-template-areas: "img" "name" "text";
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .judge-item__name {
    padding-bottom: 0.5rem;
  }
  .judge-item__name-text {
    font-size: 1.5rem;
  }
  .judge-item__img {
    width: 75%;
  }
  .judge-item__text-wrap {
    margin-top: 0.625rem;
    padding: 1.25rem 1rem;
    width: 100%;
  }
  .judge-item__text-wrap::after {
    background-image: url(../images/judge/item-bg-sp.avif);
  }
  .judge-item__text {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .judge {
    background-image: url(../images/judge/bg-sp.avif);
    padding-block: 9rem 4.5625rem;
  }
  .judge::before {
    background-image: url(../images/judge/deco-sp01.avif);
  }
  .judge::after {
    background-image: url(../images/judge/deco-sp02.avif);
  }
  .judge__title-wrap {
    max-width: 7.8125rem;
  }
  .judge__title::before {
    height: 6.75rem;
    top: -4.6875rem;
    width: 15.9375rem;
  }
  .judge__list {
    margin-top: 2rem;
  }
  .mv {
    aspect-ratio: 414/679;
    background-position: 67% center;
  }
  .mv__title {
    left: 50%;
    max-width: 23.875rem;
    top: 11%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  .mv__schedule {
    top: 67%;
    width: 20.75rem;
  }
  .questionsandanswers {
    padding-top: 9.75rem;
  }
  .questionsandanswers__title-wrap {
    max-width: 4.9375rem;
  }
  .questionsandanswers__title .section-title__text {
    letter-spacing: 0.2em;
  }
  .questionsandanswers__title::before {
    height: 10rem;
    top: -7.0625rem;
    width: 36.5625rem;
  }
  .questionsandanswers__nav {
    margin-inline: auto;
    margin-top: 2rem;
    width: 93%;
  }
  .questionsandanswers__nav-item {
    width: 100%;
  }
  .questionsandanswers__box {
    border-left: none;
    border-right: none;
    border-width: 0.125rem;
    gap: 2.0625rem;
    margin-inline: calc(50% - 50vw);
    margin-top: 1.6875rem;
    padding: 2rem 1rem;
    width: 100vw;
  }
  .questionsandanswers__box::after {
    display: none;
  }
  .questionsandanswers__category {
    gap: 1.375rem;
    margin-inline: calc(50% - 50vw);
    padding: 0.75rem 1rem 0.9375rem;
    width: 100vw;
  }
  .questionsandanswers__category-header {
    gap: 1rem;
    margin-inline: auto;
    max-width: 500px;
    width: 100%;
  }
  .questionsandanswers__category-heading {
    width: 100%;
  }
  .questionsandanswers__category-heading .section-heading__text {
    font-size: 1rem;
    text-align: left;
    white-space: normal;
  }
  .questionsandanswers__category-heading .section-heading__line::before,
  .questionsandanswers__category-heading .section-heading__line::after {
    height: 0.3125rem;
    width: 0.3125rem;
  }
  .questionsandanswers__category-heading .section-heading__line span {
    height: 0.0625rem;
  }
  .questionsandanswers__toggle {
    padding: 0.5rem 0.625rem;
    width: 6.8125rem;
  }
  .questionsandanswers__toggle-icon {
    height: 0.625rem;
    width: 0.625rem;
  }
  .questionsandanswers__toggle-text {
    font-size: 0.75rem;
  }
  .questionsandanswers__list {
    gap: 0.75rem;
    margin-inline: auto;
    max-width: 500px;
    width: 100%;
  }
  .section-heading__text {
    font-size: 1.25rem;
  }
  .section-heading__line {
    margin-top: 0.375rem;
  }
  .section-title {
    padding: 1.125rem 1rem;
  }
  .section-title__text {
    font-size: 1rem;
  }
  .about .js-fade-in {
    opacity: 1;
    transition: none;
  }
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

@media (max-width: 400px){
  .about__lead-highlight-text {
    letter-spacing: -0.05em;
  }
}

@media (max-width: 375px){
  html {
    font-size: 4.2666666667vw;
  }
}

@media (any-hover: hover){
  a:hover {
    opacity: 0.7;
  }
  .about__label-img:hover {
    opacity: 0.7;
  }
  .faq-nav:hover {
    opacity: 0.7;
  }
  .footer__logo:hover {
    opacity: 0.7;
  }
  .footer__pagetop:hover {
    opacity: 0.7;
  }
  .footer__privacy a:hover {
    opacity: 0.7;
  }
}

@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) {
    border-style: dotted;
    /*
    * 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;
  }
}