@charset "UTF-8";
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;
}

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

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 {
  font-family: var(--en-font-family);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: #f7f7f7;
}

@keyframes fonts-reveal {
  to {
    visibility: visible;
  }
}
html:not(.is-fonts-ready) .p-about__lead,
html:not(.is-fonts-ready) .p-about__content,
html:not(.is-fonts-ready) .p-teaser__footer,
html:not(.is-fonts-ready) .p-altitude {
  visibility: hidden;
  animation: fonts-reveal 0s linear 4s forwards;
}
html:not(.is-fonts-ready) .p-about__title-inner span,
html:not(.is-fonts-ready) .p-about__logo img {
  transition: none;
}

html.is-fonts-ready .p-about__lead,
html.is-fonts-ready .p-about__content,
html.is-fonts-ready .p-teaser__footer,
html.is-fonts-ready .p-altitude {
  visibility: visible;
  animation: none;
}

@media (scripting: none) {
  html:not(.is-fonts-ready) .p-about__lead,
  html:not(.is-fonts-ready) .p-about__content,
  html:not(.is-fonts-ready) .p-teaser__footer,
  html:not(.is-fonts-ready) .p-altitude {
    visibility: visible;
    animation: none;
  }
}
/*! 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;
}

html {
  box-sizing: border-box;
  /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  tab-size: 4;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

*,
::before,
::after {
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
     # General elements
     # ================================================================= */
hr {
  /* Show the overflow in Edge and IE */
  height: 0;
  overflow: visible;
  /* Add the correct box sizing in Firefox */
  color: inherit;
  /* Correct border color in Firefox. */
}

details,
main {
  display: block;
  /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  border-bottom: none;
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

pre {
  font-size: 1em;
  /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder;
  /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0;
  border-color: inherit;
  /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
  border-style: none;
}

/* # =================================================================
     # Forms
     # ================================================================= */
input {
  border-radius: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
  /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type=search] {
  appearance: textfield;
  appearance: none;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}

[type=search]::-webkit-search-decoration {
  appearance: none;
  /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type=button],
[type=reset],
[type=submit],
[role=button] {
  cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

button,
input,
select,
textarea {
  appearance: none;
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

/* Style select like a standard input */
select {
  appearance: none;
}

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentcolor;
  /* Internet Explorer 11+ */
}

legend {
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  border: 0;
  /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  font: inherit;
  color: inherit;
  /* Correct the inability to style clickable types in iOS and Safari */
  appearance: button;
  /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

/* # =================================================================
     # Specify media element style
     # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
     # Accessibility
     # ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
  cursor: default;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
  list-style: "";
}

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

@property --root-font-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}
:root {
  /* inner */
  --inner: min(1080px, 100%);
  --inner-sp: min(500px, 100%);
  --padding-inner: 20px;
  /* z-index */
  --z-index-header: 900;
  /* color */
  --color-white: #fff;
  --color-text: #0d2936;
  --color-black: #000;
  --color-gray: #f0f0f0;
  --color-border-gray: #aaaaaf;
  --color-accent: #408f95;
  --color-primary: #234f5e;
  --color-secondary: #00f;
  --color-orange: #de8430;
  /* font-weight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  /* font-family */
  --en-font-family: helvetica-neue-lt-pro, sans-serif;
  --ja-font-family: dnp-shuei-gothic-kin-std, sans-serif;
  --root-font-size: 16px;
  --to-rem: 0.0625rem;
  /* transition duration */
  --duration: 0.3s;
  /* header height */
  --header-height: 64px;
}
@media screen and (min-width: 768px) {
  :root {
    --header-height: 80px;
  }
}

@supports (width: calc(tan(atan2(1px, 1px)) * 1rem)) {
  :root {
    --to-rem: calc(tan(atan2(1px, var(--root-font-size))) * 1rem);
  }
}
.l-parallax {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 200vh;
  height: 200lvh;
}

.l-top__about {
  margin-top: calc(40 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .l-top__about {
    margin-top: calc(124 * var(--to-rem));
  }
}

.p-about {
  padding-right: calc(15 * var(--to-rem));
  padding-left: calc(15 * var(--to-rem));
  color: var(--color-black);
}
@media screen and (min-width: 768px) {
  .p-about {
    padding-right: calc(25 * var(--to-rem));
    padding-left: calc(25 * var(--to-rem));
  }
}

.p-about__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  font-family: var(--en-font-family);
  font-size: calc(36 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  .p-about__title {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: calc(37 * var(--to-rem));
    line-height: 1.12;
  }
}
@media screen and (min-width: 1024px) {
  .p-about__title {
    font-size: calc(50 * var(--to-rem));
  }
}

.p-about__title-inner {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.p-about__title-inner > * + * {
  margin-left: calc(3 * var(--to-rem));
}

@media screen and (min-width: 768px) {
  .p-about__title > * + * {
    margin-left: calc(3 * var(--to-rem));
  }
}

.p-about__title-inner span {
  opacity: 0;
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transform: translateY(100%);
}

.p-about__title-inner.is-active span {
  opacity: 1;
  transform: translateY(0);
}

.p-about__multiply {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: calc(40 * var(--to-rem));
  height: calc(40 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-about__multiply {
    width: calc(50 * var(--to-rem));
    height: calc(50 * var(--to-rem));
  }
}
.p-about__multiply::before, .p-about__multiply::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(31 * var(--to-rem));
  height: calc(2 * var(--to-rem));
  margin: auto;
  content: "";
  background-color: currentcolor;
}
@media screen and (min-width: 768px) {
  .p-about__multiply::before, .p-about__multiply::after {
    width: calc(35 * var(--to-rem));
  }
}
.p-about__multiply::before {
  transform: rotate(45deg);
}
.p-about__multiply::after {
  transform: rotate(-45deg);
}

.p-about__logo {
  display: block;
  width: calc(105 * var(--to-rem));
  margin-top: calc(65 * var(--to-rem));
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-about__logo {
    width: calc(130 * var(--to-rem));
    margin-top: calc(70 * var(--to-rem));
  }
}
@media screen and (min-width: 1024px) {
  .p-about__logo {
    width: calc(146 * var(--to-rem));
    margin-top: calc(84 * var(--to-rem));
  }
}

.p-about__logo img {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: transform 0.6s, opacity 0.6s;
  transform: translateY(100%);
  object-fit: contain;
}

.p-about__logo.is-active img {
  opacity: 1;
  transform: translateY(0);
}

.p-about__lead {
  margin-top: calc(55 * var(--to-rem));
  font-family: var(--en-font-family);
  font-size: calc(24 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.125;
  text-align: center;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  .p-about__lead {
    margin-top: calc(70 * var(--to-rem));
    margin-right: auto;
    margin-left: auto;
    font-size: calc(37 * var(--to-rem));
    line-height: 1.2;
  }
}
@media screen and (min-width: 1024px) {
  .p-about__lead {
    max-width: calc(1372 * var(--to-rem));
    margin-top: calc(101 * var(--to-rem));
    font-size: calc(50 * var(--to-rem));
  }
}

.p-about__lead-inner {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

.p-about__lead-inner span {
  display: block;
  opacity: 0;
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transform: translateY(100%);
}

.p-about__lead-inner.is-active span {
  opacity: 1;
  transform: translateY(0);
}

.p-about__content {
  max-width: calc(550 * var(--to-rem));
  margin-top: calc(24 * var(--to-rem));
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .p-about__content {
    max-width: calc(745 * var(--to-rem));
    margin-top: calc(110 * var(--to-rem));
  }
}

.p-about__image,
.p-about__infomation {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.p-about__image.is-active,
.p-about__infomation.is-active {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .p-about__image,
  .p-about__infomation {
    visibility: visible;
    opacity: 1;
  }
}
.p-about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-about__text {
  margin-top: calc(18 * var(--to-rem));
  font-family: var(--ja-font-family);
  font-size: calc(12 * var(--to-rem));
  line-height: 1.8333333333;
}
@media screen and (min-width: 768px) {
  .p-about__text {
    margin-top: calc(51 * var(--to-rem));
    font-size: calc(14 * var(--to-rem));
    line-height: 1.7857142857;
  }
}

.p-about__text-release {
  margin-top: calc(22 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-about__text-release {
    margin-top: calc(25 * var(--to-rem));
  }
}

.p-about__lottery {
  margin-top: calc(40 * var(--to-rem));
  font-family: var(--ja-font-family);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.5384615385;
}
@media screen and (min-width: 768px) {
  .p-about__lottery {
    margin-top: calc(65 * var(--to-rem));
    font-size: calc(16 * var(--to-rem));
    line-height: 2;
  }
}

.p-about__lottery-item + .p-about__lottery-item {
  margin-top: calc(10 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-about__lottery-item + .p-about__lottery-item {
    margin-top: 0;
  }
}

.p-about__lottery-label,
.p-about__online-label {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-about__lottery-label,
  .p-about__online-label {
    display: inline;
  }
}

.p-about__note {
  margin-top: calc(10 * var(--to-rem));
  font-family: var(--ja-font-family);
  font-size: calc(10 * var(--to-rem));
  font-weight: var(--fw-light);
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .p-about__note {
    margin-top: calc(6 * var(--to-rem));
    font-size: calc(11 * var(--to-rem));
    line-height: normal;
  }
}

.p-about__note-em {
  text-decoration: underline;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.p-about__button {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(44 * var(--to-rem));
  margin-top: calc(20 * var(--to-rem));
  overflow: hidden;
  font-family: var(--ja-font-family);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-black);
  transition: none;
}
@media screen and (min-width: 768px) {
  .p-about__button {
    height: calc(53 * var(--to-rem));
    margin-top: calc(25 * var(--to-rem));
    font-size: calc(16 * var(--to-rem));
  }
}
.p-about__button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: "";
  background-color: #eaeded;
  transition: transform 0.4s ease;
  transform: scaleX(0);
  transform-origin: right center;
}

@media (any-hover: hover) {
  .p-about__button:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
.p-about__button.p-about__button--en {
  margin-top: calc(20 * var(--to-rem));
  font-family: var(--en-font-family);
  font-size: calc(14 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-about__button.p-about__button--en {
    margin-top: calc(33 * var(--to-rem));
    font-size: calc(17 * var(--to-rem));
  }
}

.p-about__stores {
  margin-top: calc(30 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-about__stores {
    margin-top: calc(40 * var(--to-rem));
  }
}

.p-about__stores-title {
  font-family: var(--ja-font-family);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.5384615385;
}
@media screen and (min-width: 768px) {
  .p-about__stores-title {
    font-size: calc(16 * var(--to-rem));
    line-height: 1.5625;
  }
}

.p-about__stores-note {
  margin-top: calc(5 * var(--to-rem));
  font-size: calc(11 * var(--to-rem));
}

.p-about__online {
  margin-top: calc(40 * var(--to-rem));
  font-family: var(--ja-font-family);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.5384615385;
}
@media screen and (min-width: 768px) {
  .p-about__online {
    margin-top: calc(60 * var(--to-rem));
    font-size: calc(16 * var(--to-rem));
    line-height: 1.5625;
  }
}

.p-about__store-list {
  display: flex;
  flex-direction: column;
  margin-top: calc(15 * var(--to-rem));
}

.p-about__store-list > * + * {
  margin-top: calc(7 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-about__store-list > * + * {
    margin-top: calc(12 * var(--to-rem));
  }
}

.p-about__store-link {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--ja-font-family);
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-light);
  line-height: 1.2;
  transition: none;
}
@media screen and (min-width: 768px) {
  .p-about__store-link {
    font-size: calc(14 * var(--to-rem));
  }
}

.p-about__store-name {
  position: relative;
  padding-bottom: calc(2 * var(--to-rem));
}
.p-about__store-name::before, .p-about__store-name::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  content: "";
}
.p-about__store-name::before {
  background-color: var(--color-black);
}
.p-about__store-name::after {
  background-color: #a7a7a7;
  transition: transform 0.4s ease;
  transform: scaleX(0);
  transform-origin: right center;
}

@media (any-hover: hover) {
  .p-about__store-link:hover .p-about__store-name::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
.p-about__store-icon {
  flex-shrink: 0;
  width: calc(15 * var(--to-rem));
  height: calc(15 * var(--to-rem));
  margin-left: calc(7 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-about__store-icon {
    width: calc(17 * var(--to-rem));
    height: calc(17 * var(--to-rem));
  }
}

.p-about__store-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-altitude {
  position: relative;
  padding-top: calc(300 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-altitude {
    padding: 0;
    margin-top: calc(0 * var(--to-rem));
  }
}
@media screen and (min-width: 1024px) {
  .p-altitude {
    margin-top: calc(125 * var(--to-rem));
  }
}

.p-altitude-intro,
.p-altitude-logo,
.p-altitude-catch {
  position: fixed;
  z-index: -10;
  color: var(--color-black);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.p-altitude-intro.is-ready,
.p-altitude-logo.is-ready,
.p-altitude-catch.is-ready {
  transition: opacity 0.4s ease, visibility 0s linear 0.4s, z-index 0s linear 0.4s;
}

.p-altitude-intro.is-active,
.p-altitude-logo.is-active,
.p-altitude-catch.is-active {
  z-index: 10;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.p-altitude-intro.is-ready.is-active,
.p-altitude-logo.is-ready.is-active,
.p-altitude-catch.is-ready.is-active {
  transition: opacity 0.2s ease, visibility 0s linear, z-index 0s linear;
}

.p-altitude-intro {
  top: calc(60 * var(--to-rem));
  left: calc(8 * var(--to-rem));
  max-width: calc(427 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-altitude-intro {
    top: calc(37 * var(--to-rem));
    left: calc(45 * var(--to-rem));
    max-width: calc(485 * var(--to-rem));
  }
}

.p-altitude-intro__brand {
  font-family: var(--en-font-family);
  font-size: calc(50 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 0.82;
  letter-spacing: -0.02em;
}

.p-altitude-intro__brand-face {
  display: flex;
  align-items: center;
}

.p-altitude-intro__brand-face > * + * {
  margin-left: calc(4 * var(--to-rem));
}

.p-altitude-intro__multiply {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: calc(50 * var(--to-rem));
  height: calc(50 * var(--to-rem));
}
.p-altitude-intro__multiply::before, .p-altitude-intro__multiply::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(35 * var(--to-rem));
  height: calc(2 * var(--to-rem));
  margin: auto;
  content: "";
  background-color: currentcolor;
}
.p-altitude-intro__multiply::before {
  transform: rotate(45deg);
}
.p-altitude-intro__multiply::after {
  transform: rotate(-45deg);
}

.p-altitude-intro__season {
  margin-top: calc(8 * var(--to-rem));
  font-family: var(--en-font-family);
  font-size: calc(17 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.p-altitude-intro__lead {
  margin-top: calc(13 * var(--to-rem));
  font-family: var(--en-font-family);
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.p-altitude-logo {
  top: calc(60 * var(--to-rem));
  right: calc(16 * var(--to-rem));
  display: block;
  width: calc(96 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-altitude-logo {
    top: calc(37 * var(--to-rem));
    right: calc(45 * var(--to-rem));
    width: calc(120 * var(--to-rem));
  }
}

.p-altitude-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.p-altitude-catch {
  bottom: calc(40 * var(--to-rem));
  left: 50%;
  width: 100%;
  font-family: var(--en-font-family);
  font-size: calc(55 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.0181818182;
  text-align: center;
  letter-spacing: -0.02em;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .p-altitude-catch {
    font-size: calc(89 * var(--to-rem));
  }
}
@media screen and (min-width: 1024px) {
  .p-altitude-catch {
    right: calc(45 * var(--to-rem));
    bottom: 0;
    left: calc(50 * var(--to-rem));
    width: fit-content;
    line-height: 1.2;
    text-align: left;
    transform: initial;
  }
}

@media screen and (max-width: 389px) {
  .p-altitude-catch {
    font-size: calc(50 * var(--to-rem));
  }
}
.p-altitude-catch.is-active {
  color: transparent;
  background-image: linear-gradient(90deg, var(--color-black) 0%, var(--color-black) 34%, #7a7a7a 42%, #fff 50%, #7a7a7a 58%, var(--color-black) 66%, var(--color-black) 100%);
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 300% 100%;
  animation: p-altitude-catch-shine 8s ease-in-out infinite;
  -webkit-text-fill-color: transparent;
}

@keyframes p-altitude-catch-shine {
  0% {
    background-position: 100% 0;
  }
  14% {
    background-position: 0 0;
  }
  14.01%, 100% {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-altitude-catch.is-active {
    color: var(--color-black);
    background-image: none;
    animation: none;
    -webkit-text-fill-color: var(--color-black);
  }
}
.p-altitude__gallery,
.p-altitude__contents,
.p-altitude__footer {
  position: relative;
  z-index: 1;
}

.p-altitude__contents {
  padding-bottom: 366.6666666667%;
  margin-top: calc(123 * var(--to-rem));
  background-color: #f7f7f7;
}
@media screen and (min-width: 768px) {
  .p-altitude__contents {
    padding-bottom: 166.6153846154%;
    margin-top: calc(500 * var(--to-rem));
    margin-right: calc(70 * var(--to-rem));
    margin-left: calc(70 * var(--to-rem));
  }
}

@supports (aspect-ratio: 1/1) {
  .p-altitude__contents {
    aspect-ratio: 375/1375;
    padding-bottom: 0;
  }
  @media screen and (min-width: 768px) {
    .p-altitude__contents {
      aspect-ratio: 1300/2166;
      padding-bottom: 0;
    }
  }
}
.p-altitude__figure {
  position: absolute;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.p-altitude__figure.is-active {
  visibility: visible;
  opacity: 1;
}

.p-altitude__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-altitude__figure.p-altitude__figure--01 {
  top: 0;
  left: 42.9333333333%;
  width: 57.0666666667%;
  height: 20.8%;
}
@media screen and (min-width: 768px) {
  .p-altitude__figure.p-altitude__figure--01 {
    left: 66.0769230769%;
    width: 33.9230769231%;
    height: 27.1468144044%;
  }
}

.p-altitude__figure.p-altitude__figure--02 {
  top: 31.4909090909%;
  left: 0;
  width: 46.1333333333%;
  height: 16.7272727273%;
}
@media screen and (min-width: 768px) {
  .p-altitude__figure.p-altitude__figure--02 {
    top: 16.6666666667%;
    left: 23.4615384615%;
    width: 27.3846153846%;
    height: 21.9298245614%;
  }
}

.p-altitude__figure.p-altitude__figure--03 {
  top: 46.3272727273%;
  left: 28.5333333333%;
  width: 68.2666666667%;
  height: 24.8727272727%;
}
@media screen and (min-width: 768px) {
  .p-altitude__figure.p-altitude__figure--03 {
    top: 36.9344413666%;
    left: 45.2307692308%;
    width: 40.6153846154%;
    height: 32.5023084026%;
  }
}

.p-altitude__figure.p-altitude__figure--04 {
  top: 81.8909090909%;
  left: 0;
  width: 49.8666666667%;
  height: 18.1090909091%;
}
@media screen and (min-width: 768px) {
  .p-altitude__figure.p-altitude__figure--04 {
    top: 76.3619575254%;
    left: 0;
    width: 29.5384615385%;
    height: 23.6380424746%;
  }
}

.p-altitude__figure.p-altitude__figure--05 {
  top: 81.8909090909%;
  left: 50.4%;
  width: 49.6%;
  height: 18.0363636364%;
}
@media screen and (min-width: 768px) {
  .p-altitude__figure.p-altitude__figure--05 {
    top: 76.3619575254%;
    left: 29.7692307692%;
    width: 29.5384615385%;
    height: 23.6380424746%;
  }
}

.p-altitude__gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(550 * var(--to-rem));
  padding-right: calc(16 * var(--to-rem));
  padding-left: calc(16 * var(--to-rem));
  margin-right: auto;
  margin-left: auto;
  background-color: #f7f7f7;
}
@media screen and (min-width: 768px) {
  .p-altitude__gallery {
    justify-content: flex-end;
    max-width: 100%;
    padding-top: calc(300 * var(--to-rem));
    padding-right: calc(100 * var(--to-rem));
    padding-left: calc(45 * var(--to-rem));
    margin-right: initial;
    margin-left: auto;
  }
}

.p-altitude__slider {
  display: grid;
  grid-template: "prev swiper next" auto ". pager ." auto/auto 1fr auto;
  column-gap: calc(16 * var(--to-rem));
  align-items: center;
  width: min(100%, 92vw);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
  .p-altitude__slider {
    column-gap: calc(22 * var(--to-rem));
    width: min(100%, 70.2083333333vw);
  }
}

.p-altitude__slider.is-active {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .p-altitude__slider,
  .p-altitude__figure,
  .p-altitude__footer-image {
    visibility: visible;
    opacity: 1;
  }
}
.p-altitude__swiper {
  grid-area: swiper;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.p-altitude__slide {
  height: auto;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.p-altitude__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.p-altitude__arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(22 * var(--to-rem));
  height: calc(22 * var(--to-rem));
  padding: 0;
  color: var(--color-black);
  background-color: transparent;
  border: none;
}
@media screen and (min-width: 768px) {
  .p-altitude__arrow {
    width: calc(37 * var(--to-rem));
    height: calc(37 * var(--to-rem));
  }
}
.p-altitude__arrow::before {
  width: calc(15 * var(--to-rem));
  height: calc(15 * var(--to-rem));
  pointer-events: none;
  content: "";
  border-top: 1px solid currentcolor;
  border-left: 1px solid currentcolor;
}
@media screen and (min-width: 768px) {
  .p-altitude__arrow::before {
    width: calc(26 * var(--to-rem));
    height: calc(26 * var(--to-rem));
  }
}

.p-altitude__arrow--prev {
  grid-area: prev;
}

.p-altitude__arrow--prev::before {
  transform: rotate(-45deg);
}

.p-altitude__arrow--next {
  grid-area: next;
}

.p-altitude__arrow--next::before {
  transform: rotate(135deg);
}

@media (any-hover: hover) {
  .p-altitude__arrow:hover {
    opacity: 0.7;
  }
}
.p-altitude__pager {
  display: flex;
  grid-area: pager;
  align-items: center;
  justify-self: end;
  margin-top: calc(8 * var(--to-rem));
  font-family: var(--en-font-family);
  font-size: calc(10 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.p-altitude__pager > * + * {
  margin-left: calc(6 * var(--to-rem));
}

.p-altitude__pager-pair {
  display: flex;
  align-items: center;
}

.p-altitude__pager-pair > * + * {
  margin-left: calc(6 * var(--to-rem));
}

.p-altitude__pager-dash {
  width: calc(12 * var(--to-rem));
  height: 1px;
  background-color: currentcolor;
}

.p-altitude__pager-bar {
  width: 1px;
  height: calc(7 * var(--to-rem));
  background-color: currentcolor;
}

.p-altitude__footer {
  display: grid;
  place-items: center;
  height: 100vh;
  padding-right: calc(16 * var(--to-rem));
  padding-left: calc(16 * var(--to-rem));
  background-color: #f7f7f7;
}
@media screen and (min-width: 768px) {
  .p-altitude__footer {
    padding-right: calc(45 * var(--to-rem));
    padding-left: calc(45 * var(--to-rem));
  }
}

.p-altitude__footer-image {
  width: min(68.2666666667vw, (100vh - 240 * var(--to-rem)) * 3 / 4);
  max-width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
  .p-altitude__footer-image {
    width: min(36.6666666667vw, (100vh - 250 * var(--to-rem)) * 528 / 704);
  }
}

.p-altitude__footer-image.is-active {
  visibility: visible;
  opacity: 1;
}

.p-altitude__footer-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-altitude__copyright {
  position: absolute;
  right: calc(16 * var(--to-rem));
  bottom: calc(16 * var(--to-rem));
  left: calc(16 * var(--to-rem));
  font-family: var(--en-font-family);
  font-size: calc(10 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 1024px) {
  .p-altitude__copyright {
    right: calc(45 * var(--to-rem));
    bottom: calc(18 * var(--to-rem));
    left: auto;
    font-size: calc(13 * var(--to-rem));
    text-align: right;
  }
}

.p-main {
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  padding-bottom: calc(83 * var(--to-rem));
  padding-bottom: calc(83 * var(--to-rem) + 100vh - var(--visual-height, 100vh));
  padding-bottom: calc(83 * var(--to-rem) + 100lvh - 100dvh);
  visibility: hidden;
  background-image: url("../images/mv_v01.Dog_hNAZ.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
@media screen and (min-width: 768px) {
  .p-main {
    background-image: url("../images/mv_v01.B-c3j6h1.webp");
  }
}

.p-main__logo {
  width: 21.8666666667%;
  min-width: calc(82 * var(--to-rem));
  max-width: calc(100 * var(--to-rem));
  margin-right: auto;
  margin-left: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .p-main,
  .p-main__logo {
    visibility: visible;
    opacity: 1;
  }
}
.p-movie {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

.p-movie__item {
  position: relative;
  width: 100%;
  height: inherit;
}

.p-movie__item iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
@media screen and (min-width: 768px) {
  .p-movie__item iframe {
    width: 270%;
  }
}

.p-movie__pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-movie__pc {
    display: block;
  }
}

.p-movie__sp {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-movie__sp {
    display: none;
  }
}

.p-teaser {
  padding-bottom: calc(20 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-teaser {
    padding-bottom: calc(44 * var(--to-rem));
  }
}

.p-teaser__hero {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding-top: calc(20 * var(--to-rem));
  padding-bottom: calc(20 * var(--to-rem));
}
@media screen and (min-width: 768px) {
  .p-teaser__hero {
    min-height: calc(700 * var(--to-rem));
  }
}

.p-teaser .p-about__lead {
  align-self: center;
  width: 100%;
  min-width: 0;
  margin-top: calc(55 * var(--to-rem));
}

.p-teaser__hero .p-about__title-inner span,
.p-teaser__hero .p-about__logo img,
.p-teaser__hero .p-about__lead-inner span {
  transition-duration: 1s;
}

.p-teaser__hero .p-about__title-inner span {
  transition-delay: 0.5s;
}

.p-teaser__hero .p-about__logo img {
  transition-delay: 0.75s;
}

.p-teaser .p-about__text {
  margin-top: 0;
}

.p-teaser .p-about__button--disabled {
  color: #909090;
  pointer-events: none;
  cursor: default;
  border-color: #909090;
}
.p-teaser .p-about__button--disabled::before {
  content: none;
}

.p-teaser__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: calc(1372 * var(--to-rem));
  padding-right: calc(24 * var(--to-rem));
  padding-left: calc(24 * var(--to-rem));
  margin-top: calc(101 * var(--to-rem));
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 1024px) {
  .p-teaser__footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-right: calc(45 * var(--to-rem));
    padding-left: calc(45 * var(--to-rem));
    margin-top: calc(151 * var(--to-rem));
  }
}

.p-teaser__coming {
  display: flex;
  gap: calc(3 * var(--to-rem));
  align-items: center;
  color: var(--color-black);
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-teaser__coming {
    gap: calc(7 * var(--to-rem));
  }
}

.p-teaser__coming-paren {
  font-family: var(--ja-font-family);
  font-size: calc(21 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  .p-teaser__coming-paren {
    font-size: calc(33 * var(--to-rem));
  }
}

.p-teaser__coming-text {
  font-family: var(--en-font-family);
  font-size: calc(20 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  .p-teaser__coming-text {
    font-size: calc(33 * var(--to-rem));
  }
}

.p-teaser__copyright {
  margin-top: calc(95 * var(--to-rem));
  font-family: var(--en-font-family);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.23;
  text-align: center;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 1024px) {
  .p-teaser__copyright {
    margin-top: 0;
  }
}

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

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