@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(:root) {
  scrollbar-gutter: stable;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

:where(body) {
  min-height: 100vh;
}

:where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style-type: "";
}

:where(a:not([class])) {
  color: currentColor;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

:where(a[class]) {
  display: block;
  text-decoration: none;
  color: inherit;
}

:where(img, picture) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

:where(svg) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  fill: currentColor;
}

:where(input, button, textarea, select) {
  font-family: inherit;
  font-size: inherit;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  color: inherit;
}

:where(button) {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

:where(address) {
  font-style: normal;
}

:where(dialog) {
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  position: static;
  background: transparent;
  font: inherit;
  color: inherit;
}

:where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:where(legend) {
  margin: 0;
  padding: 0;
}

:where(summary)::-webkit-details-marker {
  display: none;
}

:root {
  --duration: 0.3s;
  --beige: #dddbce;
  --black: #1a1a1a;
  --black-70: #1a1a1a70;
  --black-30: #1a1a1a30;
  --gray: #ccc;
  --red: #820000;
  --red2: #953e2e;
  --red3: #bb3321;
  --orange: #d3864e;
  --brown: #7f5c3c;
  --brown2: #ba9a65;
  --brown3: #cbaf49;
  --sand: #dfc174;
  --sand2: #d3bb7e;
  --gold: #a78a4a;
}

html:not([lang=ja]) {
  word-break: break-word;
}
html.is-scroll-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--black);
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 900px) {
  body {
    font-size: 0.8125rem;
  }
}

* {
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
  * {
    letter-spacing: 0.02em;
  }
}

/**
 * l-container
 */
.l-container {
  overflow-x: clip;
  position: relative;
}

/**
 * l-footer
 * カンプ：PC 高さ116（ロゴ上30）/ SP 高さ169（ロゴ上41）
 */
.l-footer {
  padding-top: 2.0833333333vw;
  padding-bottom: 1.875vw;
}
@media screen and (max-width: 900px) {
  .l-footer {
    padding-top: 5.4666666667vw;
    padding-bottom: 5.4666666667vw;
  }
}

.l-footer__logo {
  width: 10.4861111111vw;
  margin-inline: auto;
}
@media screen and (max-width: 900px) {
  .l-footer__logo {
    width: 29.8666666667vw;
  }
}

/**
 * l-header
 */
.l-nav-hamburger {
  width: 1.625rem;
  height: 0.8125rem;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 300;
  right: 1.25rem;
  margin: auto;
}
.l-nav-hamburger span {
  display: inline-block;
  position: absolute;
  left: 0;
  transition: all 0.2s ease-in-out;
}
.l-nav-hamburger span:nth-child(1) {
  background-color: var(--black);
  width: 100%;
  height: 0.0625rem;
  top: 0;
}
.l-nav-hamburger span:nth-child(2) {
  background-color: var(--black);
  width: 100%;
  height: 0.0625rem;
  top: 0.375rem;
}
.l-nav-hamburger span:nth-child(3) {
  background-color: var(--black);
  width: 100%;
  height: 0.0625rem;
  bottom: 0;
}
.l-nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.l-nav-hamburger.is-open span:nth-child(1) {
  rotate: 30deg;
  top: calc(50% - 0.03125rem);
}
.l-nav-hamburger.is-open span:nth-child(3) {
  rotate: -30deg;
  top: calc(50% - 0.03125rem);
}

/**
 * l-loading
 * オープニング①：グレーの背景に白ロゴ。読み込み後の流れは js/assets/loading.js
 */
.l-loading {
  display: grid;
  position: fixed;
  z-index: 9999;
  inset: 0;
  place-items: center;
  background-color: #a39f8c;
}

.l-loading__logo {
  width: min(16.25vw, 19.5rem);
  animation: loadingLogoIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@media screen and (max-width: 900px) {
  .l-loading__logo {
    width: 40vw;
  }
}

@keyframes loadingLogoIn {
  from {
    opacity: 0;
    scale: 0.86;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
/**
 * l-nav
 */
/**
 * l-nav-hamburger
 */
/**
 * l-nav-overlay
 */
.l-nav-overlay {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: opacity var(--duration), visibility var(--duration);
  background: var(--black-30);
  backdrop-filter: blur(5px);
}
.l-nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

/**
 * アニメーションのためのスタイル
 */
[data-anime=fadeIn] {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--duration);
}
[data-anime=fadeIn].is-found {
  opacity: 1;
}

[data-anime=fadeInUp] {
  opacity: 0;
  translate: 0 1.875rem;
  transition-property: opacity, translate;
  transition-duration: var(--duration);
}
[data-anime=fadeInUp].is-found {
  opacity: 1;
  translate: 0;
}

[data-anime=fadeInDown] {
  opacity: 0;
  translate: 0 -1.875rem;
  transition-property: opacity, translate;
  transition-duration: var(--duration);
}
[data-anime=fadeInDown].is-found {
  opacity: 1;
  translate: 0;
}

[data-anime=fadeInLeft] {
  opacity: 0;
  translate: -1.875rem 0;
  transition-property: opacity, translate;
  transition-duration: var(--duration);
}
[data-anime=fadeInLeft].is-found {
  opacity: 1;
  translate: 0;
}

[data-anime=fadeInRight] {
  opacity: 0;
  translate: -1.875rem 0;
  transition-property: opacity, translate;
  transition-duration: var(--duration);
}
[data-anime=fadeInRight].is-found {
  opacity: 1;
  translate: 0;
}

[data-anime][data-anime-duration="0.1"] {
  transition-duration: 0.1s;
}
[data-anime][data-anime-delay="0.1"] {
  transition-delay: 0.1s;
}
[data-anime][data-anime-duration="0.2"] {
  transition-duration: 0.2s;
}
[data-anime][data-anime-delay="0.2"] {
  transition-delay: 0.2s;
}
[data-anime][data-anime-duration="0.3"] {
  transition-duration: 0.3s;
}
[data-anime][data-anime-delay="0.3"] {
  transition-delay: 0.3s;
}
[data-anime][data-anime-duration="0.4"] {
  transition-duration: 0.4s;
}
[data-anime][data-anime-delay="0.4"] {
  transition-delay: 0.4s;
}
[data-anime][data-anime-duration="0.5"] {
  transition-duration: 0.5s;
}
[data-anime][data-anime-delay="0.5"] {
  transition-delay: 0.5s;
}
[data-anime][data-anime-duration="0.6"] {
  transition-duration: 0.6s;
}
[data-anime][data-anime-delay="0.6"] {
  transition-delay: 0.6s;
}
[data-anime][data-anime-duration="0.7"] {
  transition-duration: 0.7s;
}
[data-anime][data-anime-delay="0.7"] {
  transition-delay: 0.7s;
}
[data-anime][data-anime-duration="0.8"] {
  transition-duration: 0.8s;
}
[data-anime][data-anime-delay="0.8"] {
  transition-delay: 0.8s;
}
[data-anime][data-anime-duration="0.9"] {
  transition-duration: 0.9s;
}
[data-anime][data-anime-delay="0.9"] {
  transition-delay: 0.9s;
}
[data-anime][data-anime-duration="1"] {
  transition-duration: 1s;
}
[data-anime][data-anime-delay="1"] {
  transition-delay: 1s;
}
[data-anime][data-anime-duration="1.1"] {
  transition-duration: 1.1s;
}
[data-anime][data-anime-delay="1.1"] {
  transition-delay: 1.1s;
}
[data-anime][data-anime-duration="1.2"] {
  transition-duration: 1.2s;
}
[data-anime][data-anime-delay="1.2"] {
  transition-delay: 1.2s;
}
[data-anime][data-anime-duration="1.3"] {
  transition-duration: 1.3s;
}
[data-anime][data-anime-delay="1.3"] {
  transition-delay: 1.3s;
}
[data-anime][data-anime-duration="1.4"] {
  transition-duration: 1.4s;
}
[data-anime][data-anime-delay="1.4"] {
  transition-delay: 1.4s;
}
[data-anime][data-anime-duration="1.5"] {
  transition-duration: 1.5s;
}
[data-anime][data-anime-delay="1.5"] {
  transition-delay: 1.5s;
}
[data-anime][data-anime-duration="1.6"] {
  transition-duration: 1.6s;
}
[data-anime][data-anime-delay="1.6"] {
  transition-delay: 1.6s;
}
[data-anime][data-anime-duration="1.7"] {
  transition-duration: 1.7s;
}
[data-anime][data-anime-delay="1.7"] {
  transition-delay: 1.7s;
}
[data-anime][data-anime-duration="1.8"] {
  transition-duration: 1.8s;
}
[data-anime][data-anime-delay="1.8"] {
  transition-delay: 1.8s;
}
[data-anime][data-anime-duration="1.9"] {
  transition-duration: 1.9s;
}
[data-anime][data-anime-delay="1.9"] {
  transition-delay: 1.9s;
}
[data-anime][data-anime-duration="2"] {
  transition-duration: 2s;
}
[data-anime][data-anime-delay="2"] {
  transition-delay: 2s;
}
[data-anime][data-anime-duration="2.1"] {
  transition-duration: 2.1s;
}
[data-anime][data-anime-delay="2.1"] {
  transition-delay: 2.1s;
}
[data-anime][data-anime-duration="2.2"] {
  transition-duration: 2.2s;
}
[data-anime][data-anime-delay="2.2"] {
  transition-delay: 2.2s;
}
[data-anime][data-anime-duration="2.3"] {
  transition-duration: 2.3s;
}
[data-anime][data-anime-delay="2.3"] {
  transition-delay: 2.3s;
}
[data-anime][data-anime-duration="2.4"] {
  transition-duration: 2.4s;
}
[data-anime][data-anime-delay="2.4"] {
  transition-delay: 2.4s;
}
[data-anime][data-anime-duration="2.5"] {
  transition-duration: 2.5s;
}
[data-anime][data-anime-delay="2.5"] {
  transition-delay: 2.5s;
}
[data-anime][data-anime-duration="2.6"] {
  transition-duration: 2.6s;
}
[data-anime][data-anime-delay="2.6"] {
  transition-delay: 2.6s;
}
[data-anime][data-anime-duration="2.7"] {
  transition-duration: 2.7s;
}
[data-anime][data-anime-delay="2.7"] {
  transition-delay: 2.7s;
}
[data-anime][data-anime-duration="2.8"] {
  transition-duration: 2.8s;
}
[data-anime][data-anime-delay="2.8"] {
  transition-delay: 2.8s;
}
[data-anime][data-anime-duration="2.9"] {
  transition-duration: 2.9s;
}
[data-anime][data-anime-delay="2.9"] {
  transition-delay: 2.9s;
}
[data-anime][data-anime-duration="3"] {
  transition-duration: 3s;
}
[data-anime][data-anime-delay="3"] {
  transition-delay: 3s;
}

@media screen and (max-width: 900px) {
  [data-anime] {
    transition-delay: 0s;
  }
}
.in-view {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.4, 1), filter 0.6s cubic-bezier(0.4, 0, 0.4, 1);
}
.in-view.is-fadein {
  opacity: 1;
  filter: none;
}

.in-view--fade {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.4, 1);
}
.in-view--fade.is-fadein {
  opacity: 1;
}

/**
 * c-modal1
 * モーダル
 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.c-modal1 {
  border: none;
  position: relative;
  transition: opacity var(--duration);
  background: transparent;
  outline: none;
}
.c-modal1::backdrop {
  transition: opacity var(--duration, 0.3s);
}
.c-modal1.is-open, .c-modal1.is-close {
  opacity: 0;
}
.c-modal1.is-open::backdrop, .c-modal1.is-close::backdrop {
  opacity: 0;
}

.c-modal1__container {
  width: min(100% - 100px, 800px);
  height: -moz-fit-content;
  height: fit-content;
  inset: 0;
  margin: auto;
  position: fixed;
  background: white;
}

.c-modal1__inner {
  max-height: calc(100dvh - 100px);
  padding: 50px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.c-modal1--video .c-modal1__container {
  background: black;
  width: min((100dvh - 100px) * 9 / 16, 100% - 40px);
}

.c-modal1__close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}
.c-modal1__close::before, .c-modal1__close::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  top: 50%;
  left: 0;
}
.c-modal1__close::before {
  transform: rotate(45deg);
}
.c-modal1__close::after {
  transform: rotate(-45deg);
}

.c-modal1__video {
  position: relative;
  aspect-ratio: 9/16;
}
.c-modal1__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/**
 * c-float
 * 背景の図形のふわふわ（参考：umekita.com/ggo-special/midorifes2026）
 *
 * <img data-float="y" style="--float-d: 16; --float-duration: 2.2s; --float-delay: -0.8s;">
 * - data-float：y（縦）/ x（横）
 * - --float-d：振れ幅。カンプのpx（PC 1440幅 / SP 750幅基準）で指定し、画面幅に合わせて伸縮（PCは1920pxで止める）
 * - --float-duration：片道の時間 / --float-delay：開始のずらし（マイナスで途中から始まり、図形ごとに位相がずれる）
 * ※ 登場アニメーション用に、親の箱ではなく中の img に付ける
 */
[data-float] {
  --float-scale: 2.3;
  --float-distance: calc(var(--float-d, 15) * var(--float-scale) / 1440 * min(100vw, 1920px));
  animation-duration: var(--float-duration, 2s);
  animation-timing-function: cubic-bezier(0.42, 0, 0.22, 1);
  animation-delay: var(--float-delay, 0s);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  will-change: translate;
}
@media screen and (max-width: 900px) {
  [data-float] {
    --float-distance: calc(var(--float-d, 15) * 1.5 * var(--float-scale) / 750 * 100vw);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-float] {
    animation: none;
  }
}

.is-opening .p-mv__obj:not(.is-float-start) [data-float] {
  animation-name: none !important;
}

[data-float=y] {
  animation-name: floatY;
}

[data-float=x] {
  animation-name: floatX;
}

@keyframes floatY {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 calc(var(--float-distance) * -1);
  }
}
@keyframes floatX {
  from {
    translate: 0 0;
  }
  to {
    translate: var(--float-distance) 0;
  }
}
/**
 * Layout
 */
/**
 * Visibility
 */
.u-sr-only {
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

@media screen and (min-width: 901px) {
  .u-hidden-md {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) {
  .u-hidden-mlg {
    display: none !important;
  }
}

@media screen and (max-width: 900px) {
  .u-hidden-max-md {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
  .u-hidden-max-lg {
    display: none !important;
  }
}

/**
 * Typography
 */
.u-font-bold {
  font-weight: 700;
}

.u-font-black {
  font-weight: 900;
}

.u-text-black {
  color: var(--black);
}

.u-text-gray {
  color: var(--gray);
}

.u-leading-trim {
  margin-block: calc((1em - 1lh) / 2);
}
.u-leading-trim[lang=en] {
  margin-block: calc((1cap - 1lh) / 2);
}

/**
 * Other
 */
.u-alpha {
  transition: opacity var(--duration);
}
.u-alpha:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  .u-alpha:hover {
    opacity: 0.7;
  }
}

/**
 * p-mv
 * 横100% × 縦（100svh − マーキーの高さ）。マーキーは .p-mv の外（直前）に置き、合計で画面の高さになる
 * 座標はカンプ（PC 1440×900 / SP 750×1334）から算出
 * - ロゴ・図形（上側）は上基準、日程ロゴ・図形（下側）は下基準で配置
 */
.p-mv {
  position: relative;
  height: calc(100vh - min(4.1666666667vw, 3.75rem));
  height: calc(100svh - min(4.1666666667vw, 3.75rem));
  min-height: min(44.4444444444vw, 53.3333333333rem);
}
@media screen and (max-width: 900px) {
  .p-mv {
    height: calc(100vh - 10.6666666667vw);
    height: calc(100svh - 10.6666666667vw);
    min-height: 80vw;
  }
}
.p-mv::before {
  content: "";
  position: absolute;
  right: min(1.3888888889vw, 1.25rem);
  bottom: 100%;
  left: min(1.3888888889vw, 1.25rem);
  height: min(4.1666666667vw, 3.75rem);
  background-color: var(--beige);
}
@media screen and (max-width: 900px) {
  .p-mv::before {
    right: 4vw;
    left: 4vw;
    height: 10.6666666667vw;
  }
}

.p-marquee {
  display: flex;
  position: relative;
  z-index: 3;
  align-items: center;
  height: min(4.1666666667vw, 3.75rem);
  overflow: hidden;
  background-color: white;
}
@media screen and (max-width: 900px) {
  .p-marquee {
    height: 10.6666666667vw;
  }
}

.p-marquee__track {
  display: flex;
  flex-shrink: 0;
  width: -moz-max-content;
  width: max-content;
  animation: marquee 60s linear infinite;
}
@media screen and (max-width: 900px) {
  .p-marquee__track {
    animation-duration: 44s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-marquee__track {
    animation: none;
  }
}

.p-marquee__item {
  display: flex;
  flex-shrink: 0;
}
.p-marquee__item img {
  width: auto;
  max-width: none;
  height: min(1.4284722222vw, 1.285625rem);
  margin-right: min(1.25vw, 1.125rem);
  margin-left: min(1.5277777778vw, 1.375rem);
}
@media screen and (max-width: 900px) {
  .p-marquee__item img {
    height: 3.3333333333vw;
    margin-right: 2.6666666667vw;
    margin-left: 4vw;
  }
}

@keyframes marquee {
  from {
    translate: 0 0;
  }
  to {
    translate: -50% 0;
  }
}
.p-mv__frame {
  position: absolute;
  top: 0;
  right: min(1.3888888889vw, 1.25rem);
  bottom: 0;
  left: min(1.3888888889vw, 1.25rem);
  background-color: var(--beige);
  clip-path: inset(0 0 -100vh 0);
}
@media screen and (max-width: 900px) {
  .p-mv__frame {
    right: 4vw;
    left: 4vw;
  }
}

.p-mv__obj {
  position: absolute;
}
.p-mv__obj--1 {
  top: max(-4.1666666667vw, -5rem);
  left: calc(min(54.1666666667vw, 86.6666666667rem) - min(9.0277777778vw, 10.8333333333rem) - min(1.3888888889vw, 1.25rem));
  width: min(31.1527777778vw, 37.3833333333rem);
}
@media screen and (max-width: 900px) {
  .p-mv__obj--1 {
    top: 34vw;
    left: -20.4vw;
    width: 71.7733333333vw;
  }
}
.p-mv__obj--2 {
  top: min(3.6805555556vw, 4.4166666667rem);
  right: calc(min(9.7222222222vw, 11.6666666667rem) - min(1.3888888889vw, 1.25rem));
  width: min(5.9722222222vw, 7.1666666667rem);
}
@media screen and (max-width: 900px) {
  .p-mv__obj--2 {
    top: 42.0666666667vw;
    right: auto;
    left: 71.1333333333vw;
    width: 15.2vw;
  }
}
.p-mv__obj--3 {
  bottom: max(-10.0347222222vw, -12.0416666667rem);
  right: calc(max(-2.9166666667vw, -3.5rem) - min(1.3888888889vw, 1.25rem));
  width: min(30.4166666667vw, 36.5rem);
}
@media screen and (max-width: 900px) {
  .p-mv__obj--3 {
    bottom: -11vw;
    right: auto;
    left: 41.8666666667vw;
    width: 54.4vw;
  }
}
.p-mv__obj--4 {
  bottom: max(-10.4583333333vw, -12.55rem);
  left: calc(min(6.1805555556vw, 7.4166666667rem) - min(1.3888888889vw, 1.25rem));
  width: min(19.5555555556vw, 23.4666666667rem);
}
@media screen and (max-width: 900px) {
  .p-mv__obj--4 {
    bottom: -2.0666666667vw;
    left: -18.2vw;
    width: 41.4vw;
  }
}

.p-mv__logo {
  position: absolute;
  z-index: 2;
  top: max(-0.3472222222vw, -0.5555555556rem);
  left: min(0.2083333333vw, 0.3333333333rem);
  width: min(53.9583333333vw, 86.3333333333rem);
}
@media screen and (max-width: 900px) {
  .p-mv__logo {
    top: -0.9333333333vw;
    left: 1.6vw;
    width: 84vw;
  }
}

.p-mv__info {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: min(45.1388888889vw, 54.1666666667rem);
}
@media screen and (max-width: 900px) {
  .p-mv__info {
    bottom: 0;
    width: 100vw;
  }
}

/**
 * p-contents
 * MV以降（ナビ〜PROJECT 05）のコラージュ部分
 * - カンプ座標（PC 1440幅 / SP 750幅）で絶対配置。y はMV下端（$pc-top / $sp-top）からの距離
 * - 左右の白枠（PC 20 / SP 30）でクリップ。下端も枠で切る
 * - PC：ナビ・パネル・注記（.p-contents__body）は $pc-max 幅で大きさを止めて中央に置く
 * - 背景の図形は $obj-max 幅で大きさを止め、それ以上は左端／右端／パネルの箱のどれかを基準に位置を保つ
 */
.p-contents {
  position: relative;
  height: min(232.6388888889vw, 279.1666666667rem);
}
@media screen and (max-width: 900px) {
  .p-contents {
    height: 880.1333333333vw;
  }
}

.p-contents__bg {
  position: absolute;
  z-index: -1;
  inset: 0 min(1.3888888889vw, 1.25rem);
  background-color: var(--beige);
}
@media screen and (max-width: 900px) {
  .p-contents__bg {
    inset: 0 4vw;
  }
}

.p-contents__inner {
  position: absolute;
  inset: 0 min(1.3888888889vw, 1.25rem);
  overflow: clip;
}
@media screen and (max-width: 900px) {
  .p-contents__inner {
    inset: 0 4vw;
  }
}

.p-contents__body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - min(50vw, 60rem));
  width: min(100vw, 120rem);
}
@media screen and (max-width: 900px) {
  .p-contents__body {
    left: 0;
    width: 100%;
  }
}

.p-contents__obj {
  position: absolute;
  z-index: 1;
}
.p-contents__obj--01 {
  top: min(21.25vw, 25.5rem);
  left: calc(50% - min(50vw, 60rem) + min(51.0416666667vw, 61.25rem));
  width: min(26.4583333333vw, 31.75rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--01 {
    top: 118.6666666667vw;
    right: auto;
    left: 43.2vw;
    width: 61.4666666667vw;
  }
}
.p-contents__obj--02 {
  z-index: 1;
  top: min(54.5138888889vw, 65.4166666667rem);
  right: calc(max(-1.3194444444vw, -1.5833333333rem) - min(1.3888888889vw, 1.25rem));
  width: min(21.6666666667vw, 26rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--02 {
    top: 240.8vw;
    right: auto;
    left: 70.6666666667vw;
    width: 33.3333333333vw;
  }
}
@media screen and (max-width: 900px) {
  .p-contents__obj--02 {
    z-index: 1;
  }
}
.p-contents__obj--03 {
  top: min(71.9444444444vw, 86.3333333333rem);
  left: calc(50% - min(50vw, 60rem) + min(30.4861111111vw, 36.5833333333rem));
  width: min(7.4111111111vw, 8.8933333333rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--03 {
    top: 378.2666666667vw;
    right: auto;
    left: 71.4666666667vw;
    width: 10.5333333333vw;
  }
}
.p-contents__obj--04 {
  top: min(74.3055555556vw, 89.1666666667rem);
  left: calc(max(-1.1111111111vw, -1.3333333333rem) - min(1.3888888889vw, 1.25rem));
  width: min(37.48125vw, 44.9775rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--04 {
    top: 335.4666666667vw;
    right: auto;
    left: -14.6666666667vw;
    width: 71.964vw;
  }
}
.p-contents__obj--05 {
  top: min(113.75vw, 136.5rem);
  right: calc(max(-17.3777777778vw, -20.8533333333rem) - min(1.3888888889vw, 1.25rem));
  width: min(44.1138888889vw, 52.9366666667rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--05 {
    top: 632vw;
    right: auto;
    left: 45.3333333333vw;
    width: 72.8vw;
  }
}
.p-contents__obj--06 {
  top: min(150.2777777778vw, 180.3333333333rem);
  left: calc(min(0vw, 0rem) - min(1.3888888889vw, 1.25rem));
  width: min(14.2361111111vw, 17.0833333333rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--06 {
    top: 522.6666666667vw;
    right: auto;
    left: 57.8666666667vw;
    width: 27.3333333333vw;
  }
}
.p-contents__obj--07 {
  top: min(152.2222222222vw, 182.6666666667rem);
  left: calc(min(6.1111111111vw, 7.3333333333rem) - min(1.3888888889vw, 1.25rem));
  width: min(18.0222222222vw, 21.6266666667rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--07 {
    top: 526.4vw;
    right: auto;
    left: 69.7333333333vw;
    width: 34.6026666667vw;
  }
}
.p-contents__obj--08 {
  top: min(201.25vw, 241.5rem);
  left: calc(max(-3.9583333333vw, -4.75rem) - min(1.3888888889vw, 1.25rem));
  width: min(50.9208333333vw, 61.105rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--08 {
    top: 839.4666666667vw;
    right: auto;
    left: -22.6666666667vw;
    width: 74.2666666667vw;
  }
}
.p-contents__obj--09 {
  top: min(209.0972222222vw, 250.9166666667rem);
  right: calc(max(-6.9381944444vw, -8.3258333333rem) - min(1.3888888889vw, 1.25rem));
  width: min(46.7993055556vw, 56.1591666667rem);
}
@media screen and (max-width: 900px) {
  .p-contents__obj--09 {
    top: 779.4666666667vw;
    right: auto;
    left: 53.3333333333vw;
    width: 76.4vw;
  }
}

.p-nav {
  position: absolute;
  z-index: 5;
  top: min(8.2638888889vw, 9.9166666667rem);
  left: min(16.6666666667vw, 20rem);
  width: min(66.6666666667vw, 80rem);
}
@media screen and (max-width: 900px) {
  .p-nav {
    top: 16.8vw;
    right: auto;
    left: 19.3333333333vw;
    width: 53.3333333333vw;
  }
}

.p-nav__list {
  display: flex;
  gap: min(0.3472222222vw, 0.4166666667rem);
}
@media screen and (max-width: 900px) {
  .p-nav__list {
    flex-direction: column;
    gap: 0.6666666667vw;
  }
}

.p-nav__item {
  flex: 1;
  list-style-type: none;
}
@media screen and (max-width: 900px) {
  .p-nav__item {
    flex: none;
  }
}

.p-nav__link {
  transition: opacity var(--duration);
}
.p-nav__link:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  .p-nav__link:hover {
    opacity: 0.7;
  }
}

.p-project {
  position: absolute;
  z-index: 2;
}
.p-project--01 {
  top: min(23.4722222222vw, 28.1666666667rem);
  left: min(12.5vw, 15rem);
  width: min(41.9444444444vw, 50.3333333333rem);
}
@media screen and (max-width: 900px) {
  .p-project--01 {
    top: 131.4666666667vw;
    right: auto;
    left: -4vw;
    width: 85.0666666667vw;
  }
}
.p-project--02 {
  z-index: 3;
  top: min(58.8888888889vw, 70.6666666667rem);
  left: min(49.3055555556vw, 59.1666666667rem);
  width: min(64.1666666667vw, 77rem);
}
@media screen and (max-width: 900px) {
  .p-project--02 {
    top: 250.2666666667vw;
    right: auto;
    left: 10.6666666667vw;
    width: 198.4vw;
  }
}
.p-project--03 {
  z-index: 3;
  top: min(103.6111111111vw, 124.3333333333rem);
  left: max(-7.9166666667vw, -9.5rem);
  width: min(90.3472222222vw, 108.4166666667rem);
}
@media screen and (max-width: 900px) {
  .p-project--03 {
    top: 382.6666666667vw;
    right: auto;
    left: -4vw;
    width: 89.8666666667vw;
  }
}
.p-project--04 {
  top: min(140.8333333333vw, 169rem);
  left: min(6.6666666667vw, 8rem);
  width: min(112.0833333333vw, 134.5rem);
}
@media screen and (max-width: 900px) {
  .p-project--04 {
    top: 552.1333333333vw;
    right: auto;
    left: -21.7333333333vw;
    width: 122.2vw;
  }
}
.p-project--05 {
  z-index: 3;
  top: min(185.9722222222vw, 223.1666666667rem);
  left: min(50.6944444444vw, 60.8333333333rem);
  width: min(43.0555555556vw, 51.6666666667rem);
}
@media screen and (max-width: 900px) {
  .p-project--05 {
    top: 753.4666666667vw;
    right: auto;
    left: -14vw;
    width: 101.4vw;
  }
}

.p-project__btn {
  position: absolute;
  width: min(13.8888888889vw, 16.6666666667rem);
}
@media screen and (max-width: 900px) {
  .p-project__btn {
    width: 40vw;
  }
}
.p-project--01 .p-project__btn {
  top: min(35.8333333333vw, 43rem);
  left: min(20.1388888889vw, 24.1666666667rem);
}
@media screen and (max-width: 900px) {
  .p-project--01 .p-project__btn {
    top: 101.6vw;
    left: 9.6vw;
  }
}
.p-project--02 .p-project__btn {
  top: min(32.3611111111vw, 38.8333333333rem);
  left: min(3.4722222222vw, 4.1666666667rem);
}
@media screen and (max-width: 900px) {
  .p-project--02 .p-project__btn {
    top: 96.8vw;
    left: 7.4666666667vw;
  }
}
.p-project--05 .p-project__btn {
  top: min(32.9166666667vw, 39.5rem);
  left: min(7.7083333333vw, 9.25rem);
}
@media screen and (max-width: 900px) {
  .p-project--05 .p-project__btn {
    top: 77.0666666667vw;
    left: 19.8666666667vw;
  }
}

a.p-project__btn,
button.p-project__btn {
  transition: opacity var(--duration);
}
a.p-project__btn:focus-visible,
button.p-project__btn:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  a.p-project__btn:hover,
  button.p-project__btn:hover {
    opacity: 0.7;
  }
}

.p-contents__note {
  position: absolute;
  z-index: 5;
  right: min(2.7777777778vw, 3.3333333333rem);
  bottom: min(0.9722222222vw, 1.1666666667rem);
  font-size: max(min(0.9027777778vw, 1.0833333333rem), 10px);
  line-height: 1.6;
  color: #000;
  text-align: right;
}
@media screen and (max-width: 900px) {
  .p-contents__note {
    right: 2.6666666667vw;
    bottom: 2.9333333333vw;
    font-size: 2.6666666667vw;
  }
}

/**
 * p-works
 * PROJECT 02「全作品を見る」モーダル（c-modal1 の開閉を利用）
 * カンプ：PC 画像240×480・テキスト幅440（実装は560）/ SP 画像360×720・テキスト幅606（750幅、実装は540）
 * 閉じるボタン・矢印はスクロールしても動かないよう fixed で、スクロール前の画像の位置を基準に配置する
 */
.p-works {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 50px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
@media screen and (max-width: 900px) {
  .p-works {
    padding: 9.3333333333vw 0;
  }
}
.p-works::backdrop {
  background: rgba(0, 0, 0, 0.75);
}
.p-works[open] {
  display: flex;
  align-items: flex-start;
}

.p-works__container {
  --img-w: min(calc((100dvh - 260px) / 2), calc(100vw - 400px));
  --body-w: max(560px, var(--img-w));
  --text-h: 137px;
  --pad-y: 100px;
  position: relative;
  flex-shrink: 0;
  width: var(--img-w);
  --offset-y: max(0px, calc((100dvh - var(--pad-y) - var(--img-w) * 2 - var(--text-h)) / 2));
  --img-top: calc(var(--pad-y) / 2 + var(--offset-y));
  --img-edge: calc(50% + var(--img-w) / 2);
  margin: var(--offset-y) auto 0;
  color: white;
  outline: none;
}
@media screen and (max-width: 900px) {
  .p-works__container {
    --img-w: min(58.4vw, calc((100dvh - 64vw) / 2));
    --body-w: 72vw;
    --text-h: 39.0666666667vw;
    --pad-y: 18.6666666667vw;
  }
}

.p-works__img {
  aspect-ratio: 1/2;
  background-color: #b4b4b4;
}
.p-works__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-works__slider .splide__track {
  overflow-x: visible;
  overflow-y: clip;
}

.p-works__slider .splide__slide {
  width: 100%;
  transform: none !important;
}
.p-works__slider .splide__slide:not(.is-active) {
  position: absolute;
  top: 0;
  left: 0;
}

.p-works__body {
  width: var(--body-w);
  margin-top: 26px;
  margin-inline: calc((var(--img-w) - var(--body-w)) / 2);
}
@media screen and (max-width: 900px) {
  .p-works__body {
    margin-top: 4.5333333333vw;
  }
}

.p-works__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
@media screen and (max-width: 900px) {
  .p-works__title {
    font-size: 4.2666666667vw;
  }
}

.p-works__name {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 900px) {
  .p-works__name {
    margin-top: 2.6666666667vw;
    font-size: 3.4666666667vw;
  }
}

.p-works__text {
  font-size: 13px;
  line-height: 1.95;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 900px) {
  .p-works__text {
    font-size: 3.2vw;
    line-height: 2;
  }
}

.p-works__close {
  position: fixed;
  top: var(--img-top);
  left: calc(var(--img-edge) + 42px);
  z-index: 2;
  width: 22px;
  height: 22px;
}
@media screen and (max-width: 900px) {
  .p-works__close {
    right: 4.0666666667vw;
    left: auto;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
  }
}
.p-works__close::before, .p-works__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 1.5px;
  background: white;
}
.p-works__close::before {
  rotate: 45deg;
}
.p-works__close::after {
  rotate: -45deg;
}

.p-works__arrow {
  position: fixed;
  top: calc(var(--img-top) + var(--img-w));
  z-index: 2;
  width: 20px;
  height: 40px;
  translate: 0 -50%;
  color: white;
  transition: opacity var(--duration);
}
@media screen and (max-width: 900px) {
  .p-works__arrow {
    width: 3.6vw;
    height: 7.2vw;
  }
}
.p-works__arrow:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  .p-works__arrow:hover {
    opacity: 0.7;
  }
}
.p-works__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.p-works__arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.p-works__arrow--prev {
  right: calc(var(--img-edge) + 137px);
}
@media screen and (max-width: 900px) {
  .p-works__arrow--prev {
    right: auto;
    left: 5.2vw;
  }
}
.p-works__arrow--next {
  left: calc(var(--img-edge) + 137px);
}
@media screen and (max-width: 900px) {
  .p-works__arrow--next {
    right: 5.2vw;
    left: auto;
  }
}

.splide {
  position: relative;
  visibility: hidden;
}
.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__track {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.splide__list {
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  backface-visibility: hidden;
}

.splide__slide {
  flex-shrink: 0;
  position: relative;
  margin: 0;
  list-style-type: none !important;
  backface-visibility: hidden;
}

.splide__track--fade > .splide__list > .splide__slide {
  z-index: 0;
  margin: 0 !important;
  opacity: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
  z-index: 1;
  opacity: 1;
}

.splide__sr {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  position: absolute;
}