@charset "UTF-8";
/* Reset css */
/* ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
}
body::-webkit-scrollbar {
  display: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  list-style: none;
}

dt {
  font-weight: var(--font-bold);
}

b,
strong {
  font-weight: var(--font-bold);
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
}

th {
  text-align: left;
  font-weight: var(--font-bold);
}



/* Lenis */
/* ============================================ */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}



/* Style for JOJO */
/* ============================================ */
:root {
  --ease: cubic-bezier(.215,.61,.355,1);
  --white: #fff9dd;
  --light: #fdeb92;
  --middle: #b29867;
  --dark: #1a0519;
  --link: #fd4cff;
  --blur: 15px;
  --font-normal: 500;
  --font-bold: 700;
  --appear-move: opacity 1000ms var(--ease);
  --font-small: clamp(.6rem, 2.7vw, 1rem);
}
::selection {
  color: var(--light);
  background-color: var(--dark);
}
body {
  background:var(--light);
  margin:0;
  text-align:center;
  color: var(--dark);
  font-size: clamp(.8rem, 3.4vw, 1.2rem);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--font-normal);
  transition: background-color 1200ms var(--ease);
}
body.preload {
  background-color: var(--white);
}
body.preload_out {
  background-color: var(--middle);
}
body.dark_mode {
  background-color: var(--dark);
}
.visually-hidden {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#contents_wrapper {
  position: absolute;
  width: 100vw;
  background: url("./images/common/bg_sp.webp") repeat center top;
  background-size: 100vw;
}
#contents_wrapper.start {
}
#contents_wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("./images/common/bg_sp_dark.webp") repeat center top;
  background-size: 100vw;
  opacity: 0;
  transition: opacity 1200ms var(--ease);
}
body.dark_mode #contents_wrapper::before {
  opacity: 1;
}
main {
  position: relative;
  opacity: 0;
  filter: brightness(5);
  transition: var(--appear-move), filter 1000ms var(--ease);
  z-index: 1;
}
#contents_wrapper.start main {
  opacity: 1;
  filter: brightness(1);
}
br.pc {
  display: none;
}
@media print, screen and (min-width: 769px) {
  :root {
    --font-small: clamp(.6rem, .85vw, 1rem);
  }
  body {
    font-size: clamp(.9rem, 1vw, 1.2rem);
  }
  #contents_wrapper {
    background: url("./images/common/bg_pc.webp") repeat left top;
    background-size: 100vw;
  }
  #contents_wrapper::before {
    background-image: url("./images/common/bg_pc_dark.webp");
  }
  br.sp {
    display: none;
  }
  br.pc {
    display: inline;
  }
}



/* Font */
/* ============================================ */
.en {
  font-family: "jaf-mashine", serif;
  font-weight: var(--font-normal);
  font-style: normal;
}




/* Preload */
/* ============================================ */

#preloader {
  position: fixed;
  width: 100vw;
  height: 100svh;
  background: var(--white);
  z-index: 1000;
  overflow: hidden;
}
#preload_bg {
  position: absolute;
  inset: 0;
  background: url("images/index/preload_bg.webp") no-repeat center bottom / cover;
  clip-path: polygon(0 100%, 17% 101%, 27% 100%, 44% 100%, 61% 100%, 81% 104%, 91% 103%, 100% 100%, 100% 100%, 0 100%);
}
@keyframes preloadBg {
  0% {
    clip-path: polygon(0 89%, 17% 101%, 27% 93%, 44% 100%, 61% 96%, 81% 104%, 91% 103%, 100% 96%, 100% 100%, 0 100%);
  }
  88% {
    clip-path: polygon(0 15%, 17% 25%, 27% 19%, 44% 15%, 61% 22%, 81% 17%, 91% 22%, 100% 21%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 17% 0, 27% -5%, 44% -1%, 61% 0, 81% -4%, 91% 0, 100% 0, 100% 100%, 0 100%);
  }
}
#preloader_canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: 50% 50%;
}
#preloader.in #preloader_canvas {
  animation: preloaderIn 1000ms ease-out forwards;
}
@keyframes preloaderIn {
  from {
    opacity: 0.5;
    transform: scale(.85) translateY(35vw);
  }
  to {
    opacity: 1;
    transform: scale(1.0) translateY(0vw);
  }
}
#preloader.in #preloader_canvas::after {
  content: "loading";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 1.5vw;
  animation: p_dddAnimation2 500ms linear infinite, kvStars 500ms linear infinite;
}
body.preload_out #preloader.in #preloader_canvas::after {
  opacity: 0;
  animation: none;
}
@keyframes p_dddScale {
  from { transform: scale(1.0) translateY(0vw); }
  to { transform: scale(1.2) translateY(0vw); }
}
#p_ddd1{
  position: absolute;  top: 20%;  left: 46%;  width: 69.95vw;
  transform: translate(-50%, -50%);
  animation: p_dddAnimation 500ms linear infinite;
}
#p_ddd2{
  position: absolute;  top: 50%;  left: 51%; width: 93vw;
  transform: translate(-50%, -50%);
  animation: p_dddAnimation2 500ms linear infinite 50ms;
}
#p_ddd3{
  position: absolute;  top: 80%;  left: 64%;  width: 32.95vw;
  transform: translate(-50%, -50%);
  animation: p_dddAnimation2 500ms linear infinite 100ms;
}
#p_ddd{
  position: absolute;
  inset: 0;
  background: var(--dark);
  mask-image: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 654.21 2014.92">\
    <path fill="white" d="M424.88,5.82c.37,6.15,21.02,99.42,23.58,110.99-1.37,149.66-18.02,354.68-16.02,498.05.37,26.65,6.24,23.37-6.42,49.51-11.51,23.76-80.62,114.84-82.7,117.07-4.42,4.74-25.62.98-26.08,2.21-2.09,5.62,23.89,102.95,24.51,117.48l105.34-133.39,163.26-132.37c3.9-9.78,39.11,34.91,41.23,45.21,13.18,64-27.65,368.35-24.7,415.12,1.1,17.46-16.77,64.17-19.16,79.03-2.2,13.69-21.8,5.51-32.96,12.56-19.49,12.31-145.15,84.06-150.31,105.87-7.98,33.74,17.66,126.72,24.6,166.25,15.93,90.68,68.8,378.42,81.48,469.2,2.19,15.7,10.08,60,9.1,72.8-.49,6.49-4.02,13.53-11.56,13.5-7.41-.04-49.44-39.8-56.42-47.42-19.4-21.18-47.71-68.1-66.75-83.54-16.41-13.3-64.2-22.87-74.7-42.01-46.06-144.79-215.28-659.03-275.53-891.48C43.37,906.8-2.21,784.12.08,773.18c3.06-14.59,58.7-147.03,66.3-162.24,22.49-44.96,40.06-91.82,64.65-136.35,10.87-19.69,38.37-92.13,52.94-104.5,12.7-10.78,17.41-9.2,23.52,5.45,8.9,21.34,18.63,55.45,24.18,79.45,1.08,4.66,21.24,113.03,29.61,151.46,3.7,17.01,6.83-2.33,7.68-1.11-4.87-72.46-15.68-238.29-23.62-310.33-2.03-18.46-11.5-100.25-7.37-112.32,1.59-4.65,23.92-16.11,45.26-35.58,23.48-21.41,97.18-119.64,127.51-144.57,5.44-4.47,13.77-2.79,14.14,3.29Z"/>\
    <path fill="white" d="M481.64,653.47c-5.37-13.11-5.35-104.42-6.47-121.45-3.98-60.29,7.13-169.74,6.55-230.26,10.4-27.89,24.16-16.3,35.82-41.68,20.54-44.69,36.69-71.21,69-115.02,22.38-30.35,36.32-13.9,35.22,19.11-3.58,107.16,5.35,232.73,17.46,339.85-1.98,5.63-4.36,18.31-8.49,22.55-11.38,11.67-114.84,129.43-126.32,136.81-1.14.73-19.22-1.23-22.77-9.92Z"/>\
    </svg>');
  mask-size: 30%;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  animation: dddAnimation3 500ms linear infinite;
}
#p_ddd::after{
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--dark);
  mask-image: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 654.21 2014.92">\
    <path fill="none" stroke="white" stroke-width="40" d="M424.88,5.82c.37,6.15,21.02,99.42,23.58,110.99-1.37,149.66-18.02,354.68-16.02,498.05.37,26.65,6.24,23.37-6.42,49.51-11.51,23.76-80.62,114.84-82.7,117.07-4.42,4.74-25.62.98-26.08,2.21-2.09,5.62,23.89,102.95,24.51,117.48l105.34-133.39,163.26-132.37c3.9-9.78,39.11,34.91,41.23,45.21,13.18,64-27.65,368.35-24.7,415.12,1.1,17.46-16.77,64.17-19.16,79.03-2.2,13.69-21.8,5.51-32.96,12.56-19.49,12.31-145.15,84.06-150.31,105.87-7.98,33.74,17.66,126.72,24.6,166.25,15.93,90.68,68.8,378.42,81.48,469.2,2.19,15.7,10.08,60,9.1,72.8-.49,6.49-4.02,13.53-11.56,13.5-7.41-.04-49.44-39.8-56.42-47.42-19.4-21.18-47.71-68.1-66.75-83.54-16.41-13.3-64.2-22.87-74.7-42.01-46.06-144.79-215.28-659.03-275.53-891.48C43.37,906.8-2.21,784.12.08,773.18c3.06-14.59,58.7-147.03,66.3-162.24,22.49-44.96,40.06-91.82,64.65-136.35,10.87-19.69,38.37-92.13,52.94-104.5,12.7-10.78,17.41-9.2,23.52,5.45,8.9,21.34,18.63,55.45,24.18,79.45,1.08,4.66,21.24,113.03,29.61,151.46,3.7,17.01,6.83-2.33,7.68-1.11-4.87-72.46-15.68-238.29-23.62-310.33-2.03-18.46-11.5-100.25-7.37-112.32,1.59-4.65,23.92-16.11,45.26-35.58,23.48-21.41,97.18-119.64,127.51-144.57,5.44-4.47,13.77-2.79,14.14,3.29Z"/>\
    <path fill="none" stroke="white" stroke-width="40" d="M481.64,653.47c-5.37-13.11-5.35-104.42-6.47-121.45-3.98-60.29,7.13-169.74,6.55-230.26,10.4-27.89,24.16-16.3,35.82-41.68,20.54-44.69,36.69-71.21,69-115.02,22.38-30.35,36.32-13.9,35.22,19.11-3.58,107.16,5.35,232.73,17.46,339.85-1.98,5.63-4.36,18.31-8.49,22.55-11.38,11.67-114.84,129.43-126.32,136.81-1.14.73-19.22-1.23-22.77-9.92Z"/>\
    </svg>');
  mask-size: 30%;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
}
#p_ddd_scale {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
body.preload_out #p_ddd_scale {
  animation: p_dddScale 1500ms ease-in forwards;
}
body.preload_out #p_ddd, body.preload_out #p_ddd::after {
  animation: kvMask 1500ms ease-in forwards;
}
@keyframes p_dddAnimation {
  0%  { transform: scale(.99) rotate(.1deg) translate(calc(-50% + .8vw), calc(-50% - .9vw)); }
  50% { transform: scale(1) rotate(-.13deg) translate(-50%, -50%); }
  70% { transform: scale(1.015) translate(calc(-50% - .7vw), calc(-50% - .3vw)); }
  100%{ transform: scale(1) translate(calc(-50% - .2vw), calc(-50% - .5vw)); }
}
@keyframes p_dddAnimation2 {
  0%  { transform: scale(.99) rotate(.1deg) translate(calc(-50% + .5vw), calc(-50% + .6vw)); }
  50% { transform: scale(1) rotate(-.13deg) translate(-50%, -50%); }
  70% { transform: scale(1.015) translate(calc(-50% - .5vw), calc(-50% + .3vw)); }
  100%{ transform: scale(1) translate(calc(-50% - .1vw), calc(-50% - .2vw)); }
}
@keyframes dddAnimation3 {
  0%  { transform: scale(.99) rotate(.1deg) translate(.5vw, .6vw); }
  40% { transform: scale(1) rotate(-.13deg) translate(0, 0); }
  80% { transform: scale(1.02) translate(-.5vw, .3vw); }
  100%{ transform: scale(1) translate(-.1vw, -.2vw); }
}
@keyframes p_dddScale {
  from { transform: scale(1) }
  to   { transform: scale(5) }
}
@keyframes kvMask {
  from { mask-size: 30%; mask-position: 50% 50%; }
  to { mask-size: 700%; mask-position: 50% 88%; }
}
#p_kv {
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(3.2) translateZ(0) translate(-51.3%, -42.5%);
  transform-origin: 0% 0%;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 500ms var(--ease) 1000ms,
              filter 700ms var(--ease) 1000ms;
}
#p_kv img{
  width: 100vw;
}
#preloader.in #p_kv {
  opacity: 1;
  filter: blur(0);
}
body.preload_out #p_kv {
  animation: kvAppear 900ms linear forwards;
}
@keyframes kvAppear {
  0% {
    transform: scale(3.2) translate(-51.3%, -42.5%);
    transform-origin: 0% 0%;
    top: 50%;
  }
  90% { transform: scale(1.5) translate(-50%, -10%); }
  100% {
    transform: scale(1) translate(-50%, 0%);
    transform-origin: 0% 0%;
    top: 0%;
  }
}
#p_kv::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: url("./images/index/preload_bg.webp") no-repeat center top / cover;
  opacity: .5;
  mix-blend-mode: multiply;
}

@media print, screen and (min-width: 769px) {
  #preloader.in #preloader_canvas::after {
    left: 2vw; right: 0;
    bottom: 3vh;
    margin: 0 auto;
    animation: dddAnimation3 500ms linear infinite, kvStars 500ms linear infinite;
  }
  #preload_bg{
    background: url("images/index/preload_bg.webp") repeat-x center top / contain;
  }
  @keyframes preloaderIn {
    from {
      opacity: 0.5;
      transform: scale(.85) translateY(10vw);
    }
    to {
      opacity: 1;
      transform: scale(1.0) translateY(0vw);
    }
  }
  #p_ddd1{
    position: absolute;  top: 42%;  left: 48%;  width: 43.43vw;
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%;
    animation: p_dddAnimation 500ms linear infinite;
  }
  #p_ddd2{
    position: absolute;  top: 48%;  left: 51%; width: 58.06vw;
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%;
    animation: p_dddAnimation2 500ms linear infinite 50ms;
  }
  #p_ddd3{
    position: absolute;  top: 73%;  left: 61%;  width: 9.93vw;
    transform: translate(-50%, -50%);
    transform-origin: -100% -50%;
    animation: p_dddAnimation2 500ms linear infinite 100ms;
  }

  @keyframes p_dddAnimation {
    0%  { transform: scale(.95) translate(calc(-50% + .5vw), calc(-50% - .05vw)); }
    50% { transform: scale(1) translate(-50%, -50%); }
    70% { transform: scale(1.015) translate(calc(-50% - .2vw), calc(-50% - .3vw)); }
    100%{ transform: scale(1) translate(calc(-50% - .1vw), calc(-50% - .5vw)); }
  }
  @keyframes p_dddAnimation2 {
    0%  { transform: scale(.93) translate(calc(-50% + .5vw), calc(-50% + .6vw)); }
    50% { transform: scale(1) translate(-50%, -50%); }
    70% { transform: scale(1.015) translate(calc(-50% - .5vw), calc(-50% + .3vw)); }
    100%{ transform: scale(1) translate(calc(-50% - .1vw), calc(-50% - .1vw)); }
  }
  @keyframes dddAnimation3 {
    0%  { transform: scale(.95) translate(.1vw, .6vw); }
    40% { transform: scale(1) translate(0, 0); }
    80% { transform: scale(1.02) translate(-.3vw, .3vw); }
    100%{ transform: scale(1) translate(-.05vw, -.2vw); }
  }
  #p_ddd{
    mask-size: 15%;
    animation: dddAnimation3 500ms linear infinite;
  }
  #p_ddd::after{
    mask-size: 15%;
  }
  @keyframes kvMask {
    from { mask-size: 15%; mask-position: 50% 50%; }
    to { mask-size: 700%; mask-position: 50% 70%; }
  }
  #p_kv {
    transform: scale(3) translateZ(0) translate(-50.7%, -37.1%);
  }
  @keyframes kvAppear {
    0% {
      transform: scale(3) translate(-50.7%, -37.1%);
      transform-origin: 0% 0%;
      top: 50%;
    }
    90% { transform: scale(1.5) translate(-50%, -10%); }
    100% {
      transform: scale(1) translate(-50%, 0%);
      transform-origin: 0% 0%;
      top: 0%;
    }
  }
  #p_kv::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: url("./images/index/preload_bg.webp") repeat-x center top / 50%;
    opacity: .5;
    mix-blend-mode: multiply;
  }
}



/* Navigation */
/* ============================================ */
header nav > * {
  visibility: hidden;
  pointer-events: none;
}
.apple_store, .google_store {
  display: none;
}

#contents_wrapper header {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 10;
}
#header_bg {
  position: absolute;
  width: 100vw;
  height: 155.81vw;
  clip-path: polygon(73% 0, 85% 4%, 82% 4.8%, 100% 9%, 100% 0%);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
header.open #header_bg {
  height: 100dvh;
  clip-path: polygon(0 0, 0 100%, 0 100%, 100% 100%, 100% 0%);
  animation: navBgToggle 300ms var(--ease) forwards;
  cursor: pointer;
}
#header_wrapper {
  position: absolute;
  width: 100vw;
  clip-path: polygon(73% 0, 85% 4%, 82% 4.8%, 100% 9%, 100% 0%);
  overflow-x: hidden;
}
header.open #header_wrapper{
  clip-path: polygon(0 0, 0 100%, 0 100%, 100% 100%, 100% 0%);
}
#header_nav_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#header_nav {
  position: relative;
  width: 100vw;
  height: 155.81vw;
  background-color: rgba(26, 5, 25, .65);
  color: var(--light);
  clip-path: polygon(73% 0, 100% 9%, 82% 4.8%, 100% 0%);
}
header.open #header_nav {
  animation: navOpen 350ms var(--ease) forwards;
}
header.close #header_nav {
  animation: navClose 150ms var(--ease) forwards;
}
#nav_triangle {
  position: absolute;
  top:0;
  left: 0;
  width: 100vw;
  height: 155.81vw;
  background-color: rgba(249, 237, 149, .7);
  clip-path: polygon(85% 4%, 100% 9%, 100% 0);
}
header.open #nav_triangle {
  animation: navTriangleOpen 300ms var(--ease) forwards;
}
header.close #nav_triangle {
  animation: navTriangleClose 200ms var(--ease) forwards;
}
#nav_trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 13vw;
  height: 13vw;
  overflow: hidden;
  transform: scaleY(0.89);
  cursor: pointer;
}
#nav_trigger p {
  color: var(--dark);
  font-size: 2.3vw;
  transition: transform 550ms var(--ease);
}
header.open #nav_trigger p {
  transform: translateX(-20vw);
}
#nav_trigger::before {
  content: "";
  position: absolute;
  top: 4.5vw;
  width: 9vw;
  height: .4vw;
  background-color: var(--dark);
  transform-origin: left center;
  transition: transform 300ms var(--ease);
}
#nav_trigger::after {
  content: "";
  position: absolute;
  bottom: 4.5vw;
  width: 9vw;
  height: .4vw;
  background-color: var(--dark);
  transform-origin: left center;
  transition: transform 300ms var(--ease);
}
header.open #nav_trigger::before {
  transform: translate(1vw, -1.4vw) rotate(47.5deg);
}
header.open #nav_trigger::after {
  transform: translate(1vw, 1.4vw) rotate(-47.5deg);
}

@keyframes navBgToggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes navTriangleOpen {
  0% {
    clip-path: polygon(85% 4%, 100% 9%, 100% 0);
  }
  100% {
    clip-path: polygon( 77% 12%, 110% 3.2%, 88.5% 1%);
  }
}
@keyframes navTriangleClose {
  0% {
    clip-path: polygon( 77% 12%, 110% 3.2%, 88.5% 1%);
  }
  100% {
    clip-path: polygon(85% 4%, 100% 9%, 100% 0);
  }
}
@keyframes navOpen {
  0% {
    clip-path: polygon(73% 0, 100% 9%, 82% 4.8%, 100% 0%);
  }
  100% {
    clip-path: polygon(100% 0%, 82% 0, 115% 105%, -41% 30%);
  }
}
@keyframes navClose {
  0% {
    clip-path: polygon(100% 0%, 82% 0, 115% 105%, -41% 30%);
  }
  100% {
    clip-path: polygon(73% 0, 100% 9%, 82% 4.8%, 100% 0%);
  }
}

header.open nav > * {
  visibility: visible;
  pointer-events: auto;
}
#header_nav .logo {
  position: absolute;
  top: 27vw;
  left: 0;
  width: 52vw;
  height: calc(52vw * 0.5872);
  background: url("./images/common/titlelogo_0.5.webp") no-repeat center top / cover;
  opacity: 0;
  transform: translateX(-10vw);
  transition: opacity 500ms var(--ease) 420ms, transform 500ms var(--ease) 420ms;
}
#header_nav .logo a{
  display: block;
  width: 100%;
  height: 100%;
}
#header_nav .store_btn {
  position: absolute;
  top: 62.5vw;
  left: 8.5vw;
  width: 34vw;
  opacity: 0;
  transform: translateX(-10vw);
  transition: opacity 500ms var(--ease) 500ms, transform 500ms var(--ease) 500ms;
}
header.open #header_nav .logo, header.open #header_nav .store_btn {
  opacity: 1;
  transform: translateX(0);
}
header.close #header_nav .logo, header.close #header_nav .store_btn {
  opacity: 0;
  transition: opacity 10ms , transform 10ms;
}
#header_menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 30vw;
  right: 10.8vw;
  width: 45vw;
}
#header_menu li {
  display: flex;
  position: relative;
  width: 100%;
  font-size: 4vw;
  opacity: 0;
}
#header_menu li:nth-child(1) {
  transform: translate(0, -10vw);
  transition: opacity 400ms var(--ease), transform 300ms var(--ease);
}
header.open #header_menu li:nth-child(1) {
  opacity: 1;
  transform: translate(0, 0);
}
#header_menu li:nth-child(2) {
  transform: translate(5.5%, -10vw);
  transition: opacity 500ms var(--ease) 100ms, transform 400ms var(--ease) 100ms;
}
header.open #header_menu li:nth-child(2) {
  opacity: 1;
  transform: translate(5.5%, 0);
}
#header_menu li:nth-child(3) {
  transform: translate(11%, -10vw);
  transition: opacity 600ms var(--ease) 180ms, transform 400ms var(--ease) 180ms;
}
header.open #header_menu li:nth-child(3) {
  opacity: 1;
  transform: translate(11%, 0);
}
#header_menu li:nth-child(4) {
  transform: translate(16.5%, -10vw);
  transition: opacity 650ms var(--ease) 260ms, transform 400ms var(--ease) 260ms;
}
header.open #header_menu li:nth-child(4) {
  opacity: 1;
  transform: translate(16.5%, 0);
}
#header_menu li:nth-child(5) {
  transform: translate(22%, -10vw);
  transition: opacity 690ms var(--ease) 320ms, transform 400ms var(--ease) 320ms;
}
header.open #header_menu li:nth-child(5) {
  opacity: 1;
  transform: translate(22%, 0);
}
header.close #header_menu li {
  opacity: 0;
  transition: opacity 10ms;
}
#header_menu li a {
  display: flex;
  padding-right: 10vw;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 12.5vw;
  transform: scaleY(.89);
}
#header_menu li a:hover, #header_menu li a.active {
  color: var(--link);
}
#header_menu li a:hover::before, #header_menu li a.active::before {
  content: "";
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%) scaleX(-1.0);
  width: 10vw;
  height: 12.5vw;
  background: url(./images/common/icon_arrow.webp) no-repeat right center / contain;
}
#header_submenu {
  display: flex;
  align-items: center;
  position: absolute;
  top: 103.5vw;
  right: 0vw;
  width: 43vw;
  font-size: 2.7vw;
  opacity: 0;
  transform: translateY(-10vw);
  transition: opacity 750ms var(--ease) 380ms, transform 400ms var(--ease) 380ms;
}
#header_submenu li {
  display: flex;
  justify-content: center;
  position: relative;
  width: 15vw;
}
#header_submenu li:nth-child(1) {
  transform: scaleY(.89);
}
#header_submenu li:nth-child(3) {
  width: 7vw;
}
header.open #header_submenu {
  opacity: 1;
  transform: translateY(0);
}
header.close #header_submenu {
  opacity: 0;
  transition: opacity 10ms;
}
#header_submenu li a {
  display: block;
  width: 7vw;
  height: 5.5vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
}
#header_submenu li a.youtube {
  background-image: url(./images/common/icon_youtube.webp);
}
#header_submenu li a.x {
  background-image: url(./images/common/icon_x.webp);
}

@media print, screen and (min-width: 769px) {
  #header_bg,
  #header_nav_bg,
  #nav_triangle,
  #nav_trigger,
  #header_nav .logo,
  #header_nav .store_btn {
    display: none;
  }

  header nav > *,
  header.close nav > *  {
    visibility: visible;
    pointer-events: auto;
  }
  #contents_wrapper header {
    left: auto;
    right: 0;
    width: 58.56vw;
    min-width: 800px;
    height: calc(58.56vw * 0.0415);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 7.57% 100%, 0% 0%);
    background: url("./images/common/pc_menu.webp") no-repeat right top / cover;
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
  }
  #header_wrapper,
  header.open #header_wrapper {
    width: 100%;
    clip-path: none;
    overflow-x: auto;
  }
  #header_nav {
    width: 100%;
    height: calc(58.56vw * 0.0415);
    clip-path: none;
    background-color: transparent;
  }
  header.open #header_nav,
  header.close #header_nav {
    animation: none;
    clip-path: none;
  }
  header.close #header_menu li,
  header.close #header_submenu {
    opacity: 1;
  }
  #header_menu {
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 74.7%;
    padding-left: 7.2vw;
  }
  #header_menu li {
    display: block;
    width: auto;
    opacity: 1;
    font-size: clamp(15px, 1vw, 20px);
  }
  #header_nav #header_menu li {
    transform: translate(0);
  }
  #header_menu li a{
    padding: 0;
    justify-content: center;
    height: calc(58.56vw * 0.0415);
  }
  #header_submenu {
    flex-direction: row;
    justify-content: space-evenly;
    gap: .65vw;
    position: absolute;
    top: 0;
    right: 1.5vw;
    width: 19%;
    transform: translate(0);
    opacity: 1;
  }
  #header_submenu li {
    width: auto;
    font-size: clamp(10px, .7vw, 15px);
    line-height: 1;
  }
  #header_submenu li a{
    width: 1.5vw;
    height: calc(58.56vw * 0.0415);
  }
  #header_submenu li a.youtube {
    width: 2vw;
  }
  #header_submenu li:nth-child(3) {
    width: auto;
  }
  #header_menu li a:hover::before, #header_menu li a.active::before {
    display: none;
  }
}



/* Fixed banner */
/* ============================================ */
#fixed_banner {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 16.5vw;
  opacity: 0;
  transition: opacity 500ms var(--ease);
  z-index: 5;
  pointer-events: none;
}
#fixed_banner.active {
  opacity: 1;
}
#fixed_area {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("./images/common/fixed_bg_sp.webp") no-repeat bottom center / cover;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 63.98% 42.66%, 0% 0%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
}
#fixed_banner.active #fixed_area {
  animation: fixedBannerAppear 400ms var(--ease);
}
@keyframes fixedBannerAppear {
  from {
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0%, 0 0, 0% 0%);
  }
  to {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 63.98% 42.66%, 0% 0%);
  }
}
#fixed_banner #fixed_txt {
  position: absolute;
  left: 4vw;
  bottom: 2.9vw;
  width: 44.3vw;
  height: 9.53vw;
  text-indent: -999vw;
}
#fixed_banner #fixed_txt::before {
  content: "";
  display: block;
  top: 4.5vw;
  left: 4vw;
  width: 49.41vw;
  height: 6.16vw;
  position: absolute;
  background: url("./images/common/fixed_arrow_pc.webp") no-repeat center center / contain;
  animation: fixedTxtArrow 1200ms var(--ease) infinite;
  transform-origin: 0% 50%;
}
@keyframes fixedTxtArrow {
  0%   { transform: scaleX(.95) translate(-1vw, .1vw) }
  98%  { transform: scaleX(1) translate(0, 0); }
  100% { transform: scaleX(.97) translate(-1vw, .1vw) }
}
#fixed_banner #fixed_txt::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: url("./images/common/fixed_txt_sp.webp") no-repeat center center / contain;
}
#fixed_banner img {
  position: absolute;
  width: 34vw;
  right: 4vw;
  bottom: 2vw;
  opacity: 0;
  transform: translateX(-10vw);
  transition: opacity 500ms var(--ease), transform 720ms var(--ease);
}
#fixed_banner.active img {
  opacity: 1;
  transform: translateX(0);
}
#fixed_btn {
  pointer-events: auto;
}
@media print, screen and (min-width: 769px) {
  #fixed_banner {
    width: 87.36vw;
    height: calc(100vw * 0.0683);
  }
  #fixed_area {
    background: url("./images/common/fixed_bg_pc.webp") no-repeat right bottom / cover;
    clip-path: polygon(
      100% 0%,
      46.06% 32.37%,
      41.62% 28.29%,
      40.19% 35.88%,
      0% 60%,
      30.33% 87.9%,
      28.05% 100%,
      100% 100%
    );
  }
  @keyframes fixedBannerAppear {
    from {
      clip-path: polygon(
        46.06% 32.37%,
        46.06% 32.37%,
        41.62% 28.29%,
        40.19% 35.88%,
        0% 60%,
        30.33% 87.9%,
        28.05% 100%,
        28.05% 100%
      );
    }
    to {
      clip-path: polygon(
        100% 0%,
        46.06% 32.37%,
        41.62% 28.29%,
        40.19% 35.88%,
        0% 60%,
        30.33% 87.9%,
        28.05% 100%,
        100% 100%
      );
    }
  }
  #fixed_banner #fixed_txt {
    position: absolute;
    left: 35.5vw;
    bottom: 1.4vw;
    width: 16.33vw;
    height: calc(16.33vw * 0.1959);
    text-indent: -999vw;
  }
  #fixed_banner #fixed_txt::before {
    display: block;
    top: 1vw;
    left: -2.8vw;
    width: 25.43vw;
    height: calc(25.43vw * 0.0838);
    position: absolute;
    background: url("./images/common/fixed_arrow_pc.webp") no-repeat center center / contain;
    animation: fixedTxtArrow 1200ms var(--ease) infinite;
    transform-origin: 0% 50%;
  }
  @keyframes fixedTxtArrow {
    0%   { transform: scaleX(.95) translate(-1vw, .1vw) }
    98%  { transform: scaleX(1) translate(0, 0); }
    100% { transform: scaleX(.97) translate(-1vw, .1vw) }
  }
  #fixed_banner #fixed_txt::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: url("./images/common/fixed_txt_pc.webp") no-repeat center center / contain;
  }
  #fixed_btn {
    display: flex;
    align-items: center;
    gap: 1.3vw;
    position: absolute;
    right: 3vw;
    bottom: 1vw;
    width: 25.5vw;
  }
  #fixed_banner .apple_store,
  #fixed_banner .google_store {
    display: block;
  }
  #fixed_banner img {
    position: relative;
    width: auto;
    right: auto;
    bottom: auto;
  }
  #fixed_banner a {
    transform: scale(1.0);
    transition: transform 300ms var(--ease);
  }
  #fixed_banner a:hover {
    transform: scale(1.1);
  }
}



/* Home */
/* ============================================ */
#keyvisual {
  position: relative;
  width: 100vw;
  overflow-x: hidden;
}
#keyvisual::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 120.81vw;
  background: url("./images/index/kv_stars_sp_0.4.webp") no-repeat center top / contain;
  animation: kvStars 800ms linear infinite ;
}
@keyframes kvStars {
  0% { opacity: 0.75; }
  25% { opacity: 0.98; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}
#keyvisual #kv_img {
  display: block;
}
#keyvisual #kv_img::after {
  content: "";
  display: block;
  position: relative;
  width: 100vw;
  height: 116.97vw;
  background: url("./images/index/kv_bg_sp.webp") no-repeat center top / cover;
}
#keyvisual #kv_img img {
  width: 100vw;
}
#keyvisual a {
  transition: filter 300ms var(--ease);
}
#keyvisual a:hover {
  filter: brightness(2);
}
#title_logo {
  position: absolute;
  top: 89.2vw;
  left:0;
  right: 0;
  width: 80vw;
  margin: 0 auto;
  opacity: 0;
  z-index: 1;
}
#contents_wrapper.start #title_logo {
  animation: titleScaleAppear 420ms ease-in forwards 100ms;
}
@keyframes titleScaleAppear {
  from { opacity: 0; transform: scale(2); }
  to   { opacity: 1; transform: scale(1); }
}
#tagline {
  position: absolute;
  top: 142vw;
  left:0;
  right: 0;
  margin: 0 auto;
  width: 96.97vw;
  height: calc(96.97vw * 0.2314);
  background: url("./images/index/tagline_sp.webp") no-repeat center top / cover ;
  opacity: 0;
  transform-origin: 50% 25%;
}
#contents_wrapper.start #tagline {
  animation: scaleAppear 420ms ease-in forwards 230ms;
}
@keyframes scaleAppear {
  from { opacity: 0; transform: scale(1.23); }
  to   { opacity: 1; transform: scale(1); }
}
#main_pv {
  display: block;
  position: absolute;
  top: 158.4vw;
  left: .2vw;
  width: 64.53vw;
  height: calc(64.53vw * 0.61);
  opacity: 0;
}
#contents_wrapper.start #main_pv {
  animation: scaleAppear 420ms ease-in forwards 300ms;
}
#main_pv::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: url("./images/index/pv_frame.webp") no-repeat center center / contain;
  z-index: 0;
}
#main_pv::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: url("./images/index/pv_play_btn.webp") no-repeat center center / 18%;
  transition: transform 300ms var(--ease);
}
#main_pv:hover::after {
  transform: rotateX(180deg);
}
#main_pv img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90.5%;
  z-index: -1;
}
#preorder_txt {
  position: relative;
  margin-top: -37.3vw;
  height: 45vw;
  opacity: 0;
}
#preorder_txt.appear {
  animation: slideAppear 600ms var(--ease) forwards;
}
@keyframes slideAppear {
  from { opacity: 0; transform: translateY(3vw); }
  to   { opacity: 1; transform: translateY(0); }
}
#preorder_copy {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 85vw;
  height: calc(85vw * 0.443);
  background: url("./images/index/preorder_txt_sp.webp") no-repeat center top / cover;
}
#preorder_line1{
  position: absolute;
  top: 9.5vw;
  left: 39vw;
  width: 56vw;
  height: calc(56vw * 0.0767);
  background: url("./images/index/preorder_line1_sp.webp") no-repeat center top / cover;
}
#preorder_line2{
  position: absolute;
  top: 31.4vw;
  left: 4.8vw;
  width: 94.3vw;
  height: calc(94.3vw * 0.09);
  background: url("./images/index/preorder_line2_sp.webp") no-repeat center top / cover;
}
#preorder_btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4vw;
  margin: 0 auto;
  width: 85.23vw;
  opacity: 0;
}
#preorder_btn.appear {
  animation: slideAppear 600ms var(--ease) forwards;
}
@media print, screen and (min-width: 769px) {
  #keyvisual::after {
    height: 56vw;
    background: url("./images/index/kv_stars_pc_0.4.webp") no-repeat center top / contain;
  }
  #keyvisual #kv_img::after {
    content: "";
    display: block;
    position: relative;
    width: 100vw;
    height: 46.359vw;
    background: url("./images/index/kv_bg_pc.webp") no-repeat center top / cover;
  }
  #title_logo {
    top:37.5vw;
    width: 34.566vw;
  }
  #tagline {
    position: absolute;
    top: 62.25vw;
    width: 76.96vw;
    height: calc(76.96vw * 0.032);
    transform: translateX(-51.8%);
    background: url("./images/index/tagline_bg_line.webp") no-repeat center top / cover;
  }
  #tagline::before {
    content: "";
    display: block;
    position: absolute;
    top: -.7vw;
    left: 50%;
    transform: translateX(-49%);
    width: 75.33vw;
    height: calc(75.33vw * 0.0517);
    background: url("./images/index/tagline_bg_star.webp") no-repeat center top / cover;
    animation: taglineStar 2000ms linear infinite;
  }
  @keyframes taglineStar {
    0%  { opacity: 1; transform: translateX(-49%) scale(0.92);}
    25% { opacity: 0.8; }
    50% { opacity: 0.2; }
    70% { opacity: 0.4; }
    100%{ opacity: 0.05; transform: translateX(-49%) scale(1);}
  }
  #tagline::after {
    content: "";
    display: block;
    position: absolute;
    top: -3.1vw;
    left: 50%;
    transform: translateX(-47.2%);
    width: 54vw;
    height: calc(54vw * 0.1462);
    background: url("./images/index/tagline_pc.webp") no-repeat center top / cover;
  }
  #main_pv {
    top: 66.8vw;
    left: 9.15vw;
    width: 35.8vw;
  }
  #contents_wrapper.start #main_pv {
    animation: none;
  }
  #contents_wrapper.start #main_pv.appear {
    animation: slideAppear 600ms var(--ease) forwards;
  }
  #preorder_txt {
    margin: -21.8vw 0 0 47vw;
    height: 21.7vw;
  }
  #preorder_copy {
    width: 29.66vw;
    height: calc(29.66vw * 0.455);
    margin: 0;
    background: url("./images/index/preorder_txt_pc.webp") no-repeat center top / cover;
  }
  #preorder_line1 {
    top: 2.2vw;
    left: .5vw;
    width: 18.66vw;
    height: calc(18.66vw * 0.1);
    background: url("./images/index/preorder_line1_pc.webp") no-repeat center top / cover;
  }
  #preorder_line2 {
    top: 11.3vw;
    left: -.7vw;
    width: 33.16vw;
    height: calc(33.16vw * 0.084);
    background: url("./images/index/preorder_line2_pc.webp") no-repeat center top / cover;
  }
  #preorder_btn {
    left: 1vw;
    width: 35.4vw;
    margin-bottom: 4vw;
    gap: 2.8vw;
    z-index: 0;
  }
  #preorder_btn::before {
    content: "";
    display: block;
    position: absolute;
    top: -1.2vw;
    left: -17vw;
    width: 67vw;
    height: calc(67vw * 0.153);
    background: url("./images/index/preorder_bg_0.4.webp") no-repeat center top / cover;
    z-index: -1;
  }
  #preorder_btn a {
    display: block;
    transform: scale(1.0);
    transition: transform 300ms var(--ease), filter 300ms var(--ease);
  }
  #preorder_btn a:hover {
    transform: scale(1.06);
  }
}





/* Information */
/* ============================================ */
#information {
  position: relative;
  padding-bottom: 7vw;
}
#information::before {
  content: "";
  position: absolute;
  top: 53vw;
  left: 1.7vw;
  width: 40.69vw;
  height: calc(40.69vw * 1.06);
  background: url(./images/index/info_ddd_sp.webp) no-repeat left top / contain;
  animation: dddAnimation 500ms linear infinite;
}
@keyframes dddAnimation {
  0%  { transform: scale(.99) rotate(.1deg) translate(.8vw, -.9vw); }
  50% { transform: scale(1) rotate(-.13deg) translate(0, 0); }
  70% { transform: scale(1.015) translate(-.7vw, -.3vw); }
  100%{ transform: scale(1) translate(-.2vw, -.5vw); }
}
#bnr_wrapper{
  position: relative;
  width: 100vw;
  top: 5vw;
  height: 80vw;
  overflow: hidden;
  perspective: 120vw;
  opacity: 0;
  transition: var(--appear-move);
}
#bnr_wrapper.appear {
  opacity: 1;
}
#bnr_transform{
  position: relative;
  top:10vw;
  transform: rotateX(25deg) rotateY(9deg) rotateZ(341deg) scale(.74);
  transform-style: preserve-3d;
}
#bnr_bg {
  position: absolute;
  left: -50vw;
  width: 200vw;
  height: 55vw;
  background: var(--dark);
}
#bnr, #bnr_copy, #bnr_copy2 {
  display: flex;
  align-items: center;
  position: absolute;
  left: -20vw;
  gap: 6vw;
  width: 264vw;
  height: 55vw;
  padding-left: 3vw;
  padding-right: 3vw;
}
#bnr_copy2 {
  display: none;
}
#bnr_wrapper.start #bnr {
  animation: slideInitial 10s linear forwards, slideLoop 20s linear infinite 10s;
}
#bnr_wrapper.start #bnr_copy {
  animation: slideLoop 20s linear infinite;
}
#bnr_wrapper.paused #bnr,
#bnr_wrapper.paused #bnr_copy {
  animation-play-state: paused;
}
#bnr_wrapper li{
  width: 82vw;
  height: calc(82vw * 0.525);
}
#bnr_wrapper li a{
  display: block;
  border: .6vw var(--link) solid;
}
@keyframes slideInitial {
  from { transform: translateX(0); }
  to   { transform: translateX(-264vw); }
}
@keyframes slideLoop {
  from { transform: translateX(264vw); }
  to   { transform: translateX(-264vw); }
}
@media print, screen and (min-width: 769px) {
  #information::before {
    top: 45vw;
    left: auto;
    right: 2vw;
    width: 13.6vw;
    height: 13.8vw;
    background: url("./images/index/info_ddd_pc.webp") no-repeat right top / contain;
    animation: dddAnimationPc 500ms linear infinite;
  }
  @keyframes dddAnimationPc {
    0%  { transform: scale(.995) rotate(.05deg) translate(.4vw, .7vw); }
    50% { transform: scale(1) rotate(-.075deg) translate(0, 0); }
    70% { transform: scale(1.01) translate(.35vw, .2vw); }
    100%{ transform: scale(1) translate(.1vw, .4vw); }
  }
  #bnr_wrapper{
    top: -7vw;
    height: 51vw;
    perspective: 120vw;
    pointer-events: none;
  }
  #bnr_transform{
    transform: rotateX(17deg) rotateY(17deg) rotateZ(344deg);
  }
  #bnr_bg {
    left: -50vw;
    width: 200vw;
    height: 17vw;
    background: var(--dark);
  }
  #bnr, #bnr_copy, #bnr_copy2 {
    width: 81.2vw;
    height: 17vw;
    gap: 2vw;
    padding: 0;
    pointer-events: auto;
  }
  #bnr_copy2 {
    display: flex;
  }
  #bnr_copy {
    transform: translateX(86vw);
  }
  #bnr_wrapper li{
    width: 25vw;
    height: auto;
  }
  #bnr_wrapper li a{
    border-width: .25vw;
    transition: filter 300ms var(--ease);
  }
  #bnr_wrapper li a:hover{
    filter: brightness(2);
  }
  #bnr_wrapper.start #bnr {
    animation: slideInitial 10s linear forwards, slideLoop 30s linear infinite 10s;
  }
  #bnr_wrapper.start #bnr_copy {
    animation: slideInitial2 20s linear forwards, slideLoop 30s linear infinite 20s;
  }
  #bnr_wrapper.start #bnr_copy2 {
    animation: slideLoop 30s linear infinite;
  }
  #bnr_wrapper.paused #bnr,
  #bnr_wrapper.paused #bnr_copy,
  #bnr_wrapper.paused #bnr_copy2 {
    animation-play-state: paused;
  }
  @keyframes slideInitial {
    from { transform: translateX(0); }
    to   { transform: translateX(-81.1vw); }
  }
  @keyframes slideInitial2 {
    from { transform: translateX(81.1vw); }
    to   { transform: translateX(-81.1vw); }
  }
  @keyframes slideLoop {
    from { transform: translateX(calc(81.1vw * 2)); }
    to   { transform: translateX(-81.1vw); }
  }
}


#news {
  position: relative;
  margin-top: -26vw;
  padding-top: 18vw;
  pointer-events: none;
}
#news_contents {
  position: relative;
  width: 100vw;
  overflow-x: hidden;
  color: var(--dark);
  opacity: 0;
  transition: var(--appear-move);
}
#news_contents.appear {
  opacity: 1;
}
#news_contents h2.news_title {
  position: relative;
  width: 45vw;
  height: 29vw;
  margin: 0 7vw 0 auto;
  text-indent: -999vw;
}
#news_contents h2.news_title::before {
  content: "";
  display: block;
  position: absolute;
  right: -11vw;
  width: 59.5vw;
  height: 29vw;
  background: url("./images/news/news_arrow.webp") no-repeat center top / contain;
  transform: translate(20vw, -6.3vw);
  transition: transform 500ms var(--ease);
}
#news_contents.appear h2::before {
  transform: translate(0, 0);
}
#news_contents h2.news_title::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 45vw;
  height: 30vw;
  background: url("./images/index/news_title_sp.webp") no-repeat center top / contain;
  transform: translate(-7vw, 0);
  transition: transform 880ms var(--ease);
}
#news_contents.appear h2.news_title::after {
  transform: translate(0, 0);
}
#news_list {
  position: relative;
  text-align: left;
  pointer-events: auto;
}
#news_list dt {
  position: relative;
  width: 90.5vw;
  margin: 0 0 0 auto;
  color: #564016;
  font-family: "jaf-mashine";
  font-weight: var(--font-normal);
  font-size: var(--font-small);
  line-height: clamp(.6rem, 2.7vw, 1rem);
}
#news_list dd {
  position: relative;
  margin: 0 0 2vw auto;
  width: 92.5vw;
  background: var(--white) url("./images/news/p_bg_line.webp") no-repeat left bottom;
  background-size: 160vw auto;
  text-align: justify;
  line-height: 1.7;
}
#news_list dd a {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 100%;
  padding: 1.7vw 2.5vw 2.3vw 2vw;
}
@media print, screen and (min-width: 769px) {
  #news {
    margin-top: -34.2vw;
    margin-bottom: 9.5vw;
    padding-top: 8vw;
  }
  #news_contents h2.news_title {
    height: 15vw;
    margin-right: 4.7vw;
  }
  #news_contents h2.news_title::before{
    width: 27.8vw;
    height: 15vw;
    right: -5vw;
  }
  #news_contents h2.news_title::after {
    width: 22.36vw;
    height: 11vw;
    background: url("./images/index/news_title_pc.webp") no-repeat center top / contain;
  }
  #news_list {
    display: grid;
    grid-template-columns: 8vw 1fr;
    row-gap: 1vw;
    align-items: center;
    width: 59%;
    left: 11.7vw;
    margin-top: -8.5vw;
  }
  #news_list dt {
    font-size: .95vw;
  }
  #news_list dd {
    margin: 0;
    width: auto;
    background-size: 51vw auto;
  }
  #news_list dd a {
    padding: .6vw 3vw .7vw 1vw;
    transition: color 550ms var(--ease);
  }
  #news_list dd a:hover {
    color: var(--middle);
  }
  #news_list dd a::after {
    content: "";
    position: absolute;
    right: .5vw;
    width: 1.63vw;
    height: 2vw;
    background: url("./images/news/news_list_arrow.webp") no-repeat right center / contain;
    opacity: 0;
    transition: opacity 550ms var(--ease);
  }
  #news_list dd a:hover::after {
    opacity: 1;
    animation: newsArrow 2400ms var(--ease) infinite;
  }
  @keyframes newsArrow {
    0%  { transform: translateX(-.5vw);}
    7%  { transform: translateX(0);}
    50% { transform: translateX(-.5vw) rotateX(0deg);}
    67% { transform: translateX(0) rotateX(180deg);}
    100%{ transform: translateX(-.5vw);}
  }
}


#sns {
  position: relative;
}
#sns.appear #embed_bg, #sns.appear #sns_txt {
  opacity: 1;
}
#sns #embed_bg {
  position: relative;
  width: 88.13vw;
  height: calc(88.13vw * 0.6477);
  margin: 0 auto 4vw;
  background: url("./images/index/x_bg.webp") no-repeat center center / contain;
  opacity: 0;
  transition: var(--appear-move);
}
#sns #embed_timeline {
  position: absolute;
  top: 2.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 83.13vw;
  height: calc(83.13vw * 0.6265);
  background: #000 url("./images/index/x_initial_bg.webp") no-repeat center center;
  background-size: 77%;
  border: var(--dark) 2px solid;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  color: var(--middle);
}
#sns_txt {
  opacity: 0;
  transition: var(--appear-move);
  transition-delay: 350ms;
}
#sns_follow {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3vw;
  width: 79.76vw;
  color: var(--dark);
  text-align: left;
}
#sns_follow img {
  width: 22.44vw;
}
#sns_follow p {
  display: flex;
  align-items: flex-end;
  width: 54vw;
  height: 24vw;
  background: url("./images/index/x_txt.webp") no-repeat left top / contain;
}

a.info_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5vw auto 10vw;
  width: 57vw;
  height: 11vw;
  background-color: var(--dark);
  color: var(--light);
  font-size: 4vw;
  box-shadow: 2.4vw 2.4vw 0 0 rgba(195, 129, 4, .5);
  pointer-events: auto;
}
a.info_btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background:transparent url("./images/common/btn_line.webp") no-repeat left bottom;
  background-size: 73vw auto;
}
a.info_btn::before {
  content: "";
  position: absolute;
  right: 1.8vw;
  width: 9vw;
  height: 5vw;
  background: url("./images/common/icon_arrow.webp") no-repeat right center / contain;
  animation: btnArrow 2400ms var(--ease) infinite;
}
@keyframes btnArrow {
  0%  { transform: translateX(-1.5vw);}
  7%  { transform: translateX(0);}
  50% { transform: translateX(-1.5vw) rotateX(0deg);}
  67% { transform: translateX(0) rotateX(180deg);}
  100%{ transform: translateX(-1.5vw);}
}
a.info_btn:hover {
  background: url(./images/common/btn_action.webp) no-repeat;
  background-size: 120vw 30vw;
  animation: btnAction 1200ms var(--ease) forwards;
}
@keyframes btnAction {
  from {
    background-position: -45vw 0vw;
  }
  to {
    background-position: 0vw -10vw;
  }
}
@media print, screen and (min-width: 769px) {
  #sns {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 2.5vw;
    width: 80%;
    margin: 0 auto;
  }
  #sns #embed_bg {
    width: 39.26vw;
    height: calc(39.26vw * 0.5);
    margin: 0;
    background: url("./images/index/x_bg_pc.webp") no-repeat center top / contain;
  }
  #sns #embed_timeline {
    top: .75vw;
    width: 37.66vw;
    height: 18vw;
  }
  #sns_follow {
    gap: 1vw;
    width: 37vw;
  }
  #sns_follow p {
    height: 10vw;
  }
  #sns_txt {
    transition-delay: initial;
  }
  a.info_btn {
    margin: 2vw auto 1vw;
    width: 22vw;
    height: 4.2vw;
    font-size: 1.6vw;
    box-shadow: 1vw 1vw 0 0 rgba(195, 129, 4, .5);
  }
  a.info_btn::after {
    background-size: 30vw auto;
  }
  a.info_btn::before {
    right: .8vw;
    width: 3.6vw;
  }
  a.info_btn:hover {
    background-size: 70vw 20vw;
    animation: btnAction 1200ms var(--ease) forwards;
  }
  @keyframes btnArrow {
    0%  { transform: translateX(-.8vw);}
    7%  { transform: translateX(0);}
    50% { transform: translateX(-.8vw) rotateX(0deg);}
    67% { transform: translateX(0) rotateX(180deg);}
    100%{ transform: translateX(-.8vw);}
  }
}




/* Characters */
/* ============================================ */
#dark_view {
  position: relative;
}
#dark_view::before {
  content: "";
  position: absolute;
  top: 210vw;
  left: -3vw;
  width: 31.86vw;
  height: calc(31.86vw * 1.08);
  background: url("./images/index/gallery_ddd_sp.webp") no-repeat left top / contain;
  animation: dddAnimation 500ms linear infinite;
  opacity: 0;
}
body.dark_mode #dark_view::before {
  opacity: 1;
}
#characters {
  position: relative;
  transition: var(--appear-move);
  overflow-x: hidden;
}
#chara_title h2{
  position: relative;
  width: 75vw;
  height: 24vw;
  margin: 16vw auto 0 0;
  text-indent: -999vw;
  opacity: 0;
  transition: var(--appear-move);
}
#characters.appear #chara_title h2{
  opacity: 1;
}
#chara_title h2::before {
  content: "";
  display: block;
  position: absolute;
  top: -8vw;
  left: -13vw;
  width: 86vw;
  height: 34vw;
  background: url("./images/index/chara_arrow.webp") no-repeat center top / contain;
  transform: translate(-20vw, -8vw);
  transition: transform 700ms var(--ease);
}
#characters.appear h2::before {
  transform: translate(0, 0);
}
#chara_title h2::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 2vw;
  width: 84.76vw;
  height: 30vw;
  background: url("./images/index/chara_title_sp.webp") no-repeat center top / contain;
  transform: translate(7vw, 0);
  transition: transform 880ms var(--ease);
}
#characters.appear h2::after {
  transform: translate(0, 0);
}
#chara_canvas {
  position: relative;
  width: 100vw;
  height: 194vw;
}
#chara_canvas::before {
  content: "";
  position: absolute;
  top: 6vw;
  left: 0;
  width: 100vw;
  height: 50vw;
  background: url("./images/index/chara_circle_top.webp") no-repeat center top / contain;
  clip-path: polygon(90% 0, 100% 0%, 100% 100%, 97% 100%);
}
#characters.appear #chara_canvas::before {
  animation: bgCircleTop 400ms var(--ease) forwards 250ms;
}
@keyframes bgCircleTop {
  from {
    clip-path: polygon(90% 0, 100% 0%, 100% 100%, 97% 100%);
  }
  to {
    clip-path: polygon(-55% 0, 100% 0%, 100% 100%, 87% 100%);
  }
}

#chara_bg {
  position: absolute;
  top: 0;
  left: 7vw;
  width: 93vw;
  height: 154vw;
  background: url(./images/index/chara_bg.webp) no-repeat left top;
  background-size: 121vw;
}
#chara_contents {
  position: absolute;
  width: 100vw;
}
#chara_contents::before {
  content: "";
  position: absolute;
  top: 72vw;
  left: 0;
  width: 100vw;
  height: 100vw;
  background: url("./images/index/chara_circle_bottom.webp") no-repeat left bottom / contain;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
#characters.appear #chara_contents::before {
  animation: bgCircleBottom 400ms var(--ease) forwards 600ms;
}
@keyframes bgCircleBottom {
  from {
    clip-path: polygon(0 0, 0% 0, 0 100%, 0 100%);
  }
  to {
    clip-path: polygon(0 0, 78% 0, 150% 100%, 0 100%);
  }
}

#chara_contents li {
  position: absolute;
  width: 100vw;
  opacity: 0;
  visibility: hidden;
}
#chara_contents li > *{
  position: absolute;
}
#chara_contents li.active {
  opacity: 1;
  visibility: visible;
}

#chara_contents li h3::after {
  content: "";
  position: absolute;
}
#chara_contents .chara_art .spine-player {
  transform: scale(1.2);
}
/* ジョナサン・ジョースター */
#chara_contents li:nth-child(1) .chara_art {
  top: 10vw;  right: -10vw;  width: 81vw;  height: 155.25vw;
}
#chara_contents li:nth-child(1) .chara_name {
  top: 63vw;  right: 5.7vw;  width: 85.58vw;
  transform: translate(-10vw, -2vw);
}
#chara_contents li:nth-child(1) .cv_name {
  top: 80.5vw;  right: 50.6vw;  width: 31.51vw;
  transform: translate(-10vw, -1.5vw);
}
#chara_contents li:nth-child(1) .chara_profie {
  top: 85vw;  right: .5vw;  width: 82.55vw;
  transform: translate(-10vw, -1vw);
}
#chara_contents li:nth-child(1) h3::after {
  top: 20.3vw;  left: 2vw;  width: 38.02vw;  height: calc(38.02vw * 1.2935);
  background: url("./images/index/characters/label_en_jonathan.webp") no-repeat left top / cover;
}

/* ジョセフ・ジョースター */
#chara_contents li:nth-child(2) {
  width: 120vw;
}
#chara_contents li:nth-child(2) .chara_art {
  top: 10vw;  right: 10vw;  width: 120vw;  height: 143.85vw;
}
#chara_contents li:nth-child(2) .chara_name {
  top: 65vw;  left: 5vw;  width: 83.72vw;
  transform: translate(-10vw, 2vw);
}
#chara_contents li:nth-child(2) .cv_name {
  top: 74vw;  left: 36.5vw;  width: 31.27vw;
  transform: translate(-10vw, 2vw);
}
#chara_contents li:nth-child(2) .chara_profie {
  top: 73vw;  left: 15vw;  width: 83.72vw;
  transform: translate(-10vw, 2vw);
}
#chara_contents li:nth-child(2) h3::after {
  top: 28.2vw;  left: 2vw;  width: 31.51vw;  height: calc(31.51vw * 1.3099);
  background: url("./images/index/characters/label_en_joseph.webp") no-repeat left top / cover;
}

/* 空条承太郎 */
#chara_contents li:nth-child(3) .chara_art {
  top: -6.5vw;  right: -8vw;  width: 93vw;  height: 175.15vw;
}
#chara_contents li:nth-child(3) .chara_name {
  top: 58vw;  right: 64vw;  width: 24.41vw;
  transform: translate(-2vw, -10vw);
}
#chara_contents li:nth-child(3) .cv_name {
  top: 49vw;  right: 63.4vw;  width: 10.93vw;
  transform: translate(-2vw, -10vw);
}
#chara_contents li:nth-child(3) .chara_profie {
  top: 79vw;  right: 2vw;  width: 66.74vw;
  transform: translate(-10vw, -1vw);
}
#chara_contents li:nth-child(3) h3::after {
  top: 32.7vw;  left: 2vw;  width: 28.6vw;  height: calc(28.6vw * 1.2845);
  background: url("./images/index/characters/label_en_jotaro.webp") no-repeat left top / cover;
}

/* 東方仗助 */
#chara_contents li:nth-child(4) .chara_art {
  top: 0vw;  right: -8vw;  width: 97vw;  height: 165.54vw;
}
#chara_contents li:nth-child(4) .chara_name {
  top: 37vw;  right: .5vw;  width: 23.37vw;
  transform: translate(2.5vw, -10vw);
}
#chara_contents li:nth-child(4) .cv_name {
  top: 50vw;  right: 20.3vw;  width: 9.418vw;
  transform: translate(1.5vw, -10vw);
}
#chara_contents li:nth-child(4) .chara_profie {
  top: 80vw;  right: -.5vw;  width: 77.67vw;
  transform: translate(-10vw, -1vw);
}
#chara_contents li:nth-child(4) h3::after {
  top: 13.1vw;  left: 2vw;  width: 45.58vw;  height: calc(45.58vw * 1.2372);
  background: url("./images/index/characters/label_en_josuke.webp") no-repeat left top / cover;
}

/* ジョルノ・ジョバァーナ */
#chara_contents li:nth-child(5) .chara_art {
  top: 11vw;  right: 6vw;  width: 68vw;  height: 144.56vw
}
#chara_contents li:nth-child(5) .chara_name {
  top: 71vw;  right: 0;  width: 73.6vw;
}
#chara_contents li:nth-child(5) .cv_name {
  top: 83vw;  right: 7vw;  width: 32.55vw;
}
#chara_contents li:nth-child(5) .chara_profie {
  top: 80.5vw;  right: 0;  width: 83.83vw;
  transform: translate(-10vw, -1vw);
}
#chara_contents li:nth-child(5) h3::after {
  top: 19.9vw;  left: 2vw;  width: 39.88vw;  height: calc(39.88vw * 1.2478);
  background: url("./images/index/characters/label_en_giorno.webp") no-repeat left top / cover;
}

/* 空条徐倫 */
#chara_contents li:nth-child(6) .chara_art {
  top: -12vw;  right: -6vw;  width: 94vw;  height: 172.96vw;
}
#chara_contents li:nth-child(6) .chara_name {
  top: 57.5vw;  right: -3vw;  width: 23.72vw;
  transform: translate(2vw, -10vw);
}
#chara_contents li:nth-child(6) .cv_name {
  top: 71.5vw;  right: 16.4vw;  width: 11.97vw;
  transform: translate(2vw, -10vw);
}
#chara_contents li:nth-child(6) .chara_profie {
  top: 67.5vw;  left: 2.5vw;  width: 72.9vw;
  transform: translate(-10vw, -1vw);
}
#chara_contents li:nth-child(6) h3::after {
  top: 22.65vw;  left: 2vw;  width: 30.93vw;  height: calc(30.93vw * 1.5112);
  background: url("./images/index/characters/label_en_jolyne.webp") no-repeat left top / cover;
}
/* animation */
#chara_contents .chara_art {
  opacity: 0;  transform: translateY(5vw);
  transition: var(--appear-move), transform 1000ms var(--ease);
}
#characters.appear #chara_contents li.active .chara_art {
  opacity: 1;  transform: translateY(0) translateZ(0);
}
#chara_contents .chara_name {
  opacity: 0;  transform: translateX(-10vw);
  transition: opacity 600ms var(--ease) 200ms, transform 500ms var(--ease) 200ms;
}
#characters.appear #chara_contents li.active .chara_name {
  opacity: 1;  transform: translateX(0) translateZ(0);
}
#chara_contents .cv_name {
  opacity: 0;  transform: translateX(-10vw);
  transition: opacity 600ms var(--ease) 350ms, transform 300ms var(--ease) 350ms;
}
#characters.appear #chara_contents li.active .cv_name {
  opacity: 1;  transform: translateX(0) translateZ(0);
}
#chara_contents .chara_profie {
  opacity: 0;  transform: translateX(-10vw);
  transition: opacity 600ms var(--ease) 420ms, transform 300ms var(--ease) 420ms;
}
#characters.appear #chara_contents li.active .chara_profie {
  opacity: 1;  transform: translateX(0) translateZ(0);
}
#chara_contents li h3::after {
  opacity: 0;  transform: translate(8vw, -10vw);
  transition: var(--appear-move), transform 850ms var(--ease);
}
#characters.appear #chara_contents li.active h3::after {
  opacity: 1;  transform: translate(0, 0);
}
#chara_nav_wrapper {
  --top: -30vw;
  --left: 22.5vw;
  position: absolute;
  top:124vw;
  left: -5vw;
  width: 300vw;
  height: 117vw;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.88);
  transform-origin: left center;
  transition: var(--appear-move);
}
#chara_nav_wrapper.appear {
  opacity: 1;
}
#chara_nav, #chara_nav_copy {
  position: absolute;
  top: 9.5vw;
  left: 0;
  width: 130.58vw;
  height: calc(42.3vw + (13.3vw * 5));
  will-change: transform;
}
#chara_nav_wrapper.start #chara_nav {
  animation: charaSlideInitial 13.8s linear forwards, charaSlideLoop 27.6s linear infinite 13.8s;
}
#chara_nav_wrapper.start #chara_nav_copy {
  animation: charaSlideLoop 27.6s linear infinite;
}
@keyframes charaSlideInitial {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(calc(var(--left) * -6), calc(-1 * ((42.31vw + var(--top)) * 5 + 42.31vw + var(--top))));
  }
}
@keyframes charaSlideLoop {
  from {
    transform: translate(calc(var(--left) * 6), calc((42.31vw + var(--top)) * 5 + 42.31vw + var(--top)));
  }
  to {
    transform: translate(calc(var(--left) * -6), calc(-1 * ((42.31vw + var(--top)) * 5 + 42.31vw + var(--top))));
  }
}

#chara_nav li, #chara_nav_copy li {
  position: relative;
  width: 25.58vw;
  height: 42.31vw;
  z-index: 0;
}
#chara_nav li a, #chara_nav_copy li a{
  display: block;
  background-color: var(--dark);
  clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%);
}
#chara_nav li:nth-child(1), #chara_nav_copy li:nth-child(1) {
  top: 0;
  left: 0;
}
#chara_nav li:nth-child(2), #chara_nav_copy li:nth-child(2) {
  top: var(--top);
  left: var(--left);
}
#chara_nav li:nth-child(3), #chara_nav_copy li:nth-child(3) {
  top: calc(var(--top) * 2);
  left: calc(var(--left) * 2);
}
#chara_nav li:nth-child(4), #chara_nav_copy li:nth-child(4) {
  top: calc(var(--top) * 3);
  left: calc(var(--left) * 3);
}
#chara_nav li:nth-child(5), #chara_nav_copy li:nth-child(5) {
  top: calc(var(--top) * 4);
  left: calc(var(--left) * 4);
}
#chara_nav li:nth-child(6), #chara_nav_copy li:nth-child(6) {
  top: calc(var(--top) * 5);
  left: calc(var(--left) * 5);
}
#chara_nav li::before, #chara_nav_copy li::before {
  content: "";
  position: absolute;
  width: 25.58vw;
  height: 42.31vw;
  top: 4vw;
  left: 1.2vw;
  pointer-events: none;
  background: rgba(73, 48, 1, .7);
  mask-image: url("data:image/svg+xml,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220.98 366.04'>\
    <path fill='white' stroke='white' d='M110.49.97L.58,183.02l109.91,182.05,109.91-182.05L110.49.97Z'/>\
    </svg>");
  mask-size: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  z-index: -1;
}
#chara_nav li a::after, #chara_nav_copy li a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--dark);
  mask-image: url("data:image/svg+xml,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 165.4'>\
    <polygon fill='none' stroke='white' stroke-width='5' points='50,0 0,82.7 50,165.4 100,82.7'/>\
    </svg>");
  mask-size: 100%;
  mask-position: center;
}
#chara_nav li a.active::after, #chara_nav_copy li a.active::after {
  background: var(--link);
}
#chara_nav_wrapper li {
  transform: scale(1);
  transform-origin: center;
  transition: transform 500ms var(--ease);
}
#chara_nav_wrapper li:has(.active) {
  transform: scale(1.1);
  transition: transform 500ms var(--ease);
}
#chara_nav_wrapper img{
  transform: scale(1);
  transition: transform 500ms var(--ease);
}
#chara_nav_wrapper a:hover img{
  transform: scale(1.1);
}
#chara_nav_wrapper a.active:hover img{
  transform: scale(1);
}
#chara_nav li a.wait::before, #chara_nav_copy li a.wait::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: url("./images/index/chara_wait.webp") no-repeat center top / 100% auto;
  animation: charaWait 4000ms linear forwards;
  opacity: .35;
  z-index: 1;
  transform: translateY(25%);
}
@keyframes charaWait {
  from { transform: translateY(25%); }
  to   { transform: translateY(-25%); }
}

@media print, screen and (min-width: 769px) {
  #dark_view::before {
    top: 67vw;
    left: 6vw;
    width: 13.3vw;
    height: 16.46vw;
    background: url("./images/index/gallery_ddd_pc.webp") no-repeat left top / contain;
    animation: dddAnimationPc2 500ms linear infinite;
  }

  @keyframes dddAnimationPc2 {
    0%  { transform: scale(.995) rotate(.05deg) translate(-.4vw, .45vw); }
    50% { transform: scale(1) rotate(-.075deg) translate(0, 0); }
    70% { transform: scale(1.01) translate(-.35vw, -.2vw); }
    100%{ transform: scale(1) translate(.1vw, -.2vw); }
  }
  #characters {
    margin-top: -8vw;
    padding-top: 6vw;
    padding-bottom: 21vw;
  }
  #chara_title h2{
    width: 50vw;
    height: 3.2vw;
    margin: 7vw auto 0 0;
  }
  #chara_title h2::before {
    top: -3.1vw;
    left: 0;
    width: 35.9vw;
    height: 20vw;
    transform: translate(-10vw, -2vw);
  }
  #chara_title h2::after {
    left: 6.1vw;
    width: 42.46vw;
    height: 10.33vw;
    background: url("./images/index/chara_title_pc.webp") no-repeat left top / contain;
  }
  #chara_canvas {
    height: 50vw;
  }
  #chara_canvas::before {
    top: 8.3vw;
    left: 18vw;
    width: 51.7vw;
    height: 26.56vw;
    background: url("./images/index/chara_circle_top_pc.webp") no-repeat center top / contain;
  }
  #characters.appear #chara_canvas::before {
    animation: bgCircleTop 600ms var(--ease) forwards 250ms;
  }
  @keyframes bgCircleTop {
    from {
      clip-path: polygon(90% 0, 100% 0%, 100% 100%, 97% 100%);
    }
    to {
      clip-path: polygon(-55% 0, 100% 0%, 100% 100%, 0% 100%);
    }
  }
  #chara_bg {
    left: 39.8vw;
    width: 46.2vw;
    height: 57.7vw;
    background-size: contain;
  }
  #chara_contents::before {
    top: 35vw;
    left: 31.2vw;
    width: 67.13vw;
    height: 24.9vw;
    background: url("./images/index/chara_circle_bottom_pc.webp") no-repeat left bottom / contain;
  }
  /* ジョナサン・ジョースター */
  #chara_contents li:nth-child(1) .chara_art {
    top: 3vw;  right: calc(-10vw + 30vw);  width: calc(81vw * .38);  height: calc(155.25vw * .38);
  }
  #chara_contents li:nth-child(1) .chara_name {
    top: calc(63vw - 38.5vw);  right: calc(5.7vw + 20vw);  width: calc(85.58vw * .38);
    transform: translate(-10vw, -2vw);
  }
  #chara_contents li:nth-child(1) .cv_name {
    top: calc(80.5vw - 49.5vw);  right: 43vw;  width: calc(31.51vw * .38);
    transform: translate(-10vw, -1.5vw);
  }
  #chara_contents li:nth-child(1) .chara_profie {
    top: calc(85vw - 52vw);  right: calc(0.5vw + 21vw);  width: calc(82.55vw * .38);
    transform: translate(-10vw, -1vw);
  }
  #chara_contents li:nth-child(1) h3::after {
    top: 7.1vw;  left: 38.6vw;  width: calc(38.02vw * .38);  height: calc(38.02vw * 1.2935 * .38);
    background: url("./images/index/characters/label_en_jonathan.webp") no-repeat left top / cover;
  }

  /* ジョセフ・ジョースター */
  #chara_contents li:nth-child(2) {
    width: 100vw;
  }
  #chara_contents li:nth-child(2) .chara_art {
    top: 3vw;  right: calc(10vw + 10vw);  width: calc(120vw * .38);  height: calc(143.85vw * .38);
  }
  #chara_contents li:nth-child(2) .chara_name {
    top: calc(65vw - 36.4vw);  left: 41vw;  width: calc(83.72vw * .38);
    transform: translate(-10vw, 2vw);
  }
  #chara_contents li:nth-child(2) .cv_name {
    top: calc(74vw - 42.5vw);  left: 56vw;  width: calc(31.27vw * .38);
    transform: translate(-10vw, 2vw);
  }
  #chara_contents li:nth-child(2) .chara_profie {
    top: calc(73vw - 42vw);  left: 48vw;  width: calc(83.72vw * .38);
    transform: translate(-10vw, 2vw);
  }
  #chara_contents li:nth-child(2) h3::after {
    top: 10.2vw;  left: 38.6vw;  width: calc(31.51vw * .38);  height: calc(31.51vw * 1.3099 * .38);
    background: url("./images/index/characters/label_en_joseph.webp") no-repeat left top / cover;
  }

  /* 空条承太郎 */
  #chara_contents li:nth-child(3) .chara_art {
    top: -5.5vw;  right: calc(-8vw + 28vw);  width: calc(93vw * .38);  height: calc(175.15vw * .38);
  }
  #chara_contents li:nth-child(3) .chara_name {
    top: calc(58vw - 36.5vw);  right: calc(64vw + -15.7vw);  width: calc(24.41vw * .38);
    transform: translate(-2vw, -10vw);
  }
  #chara_contents li:nth-child(3) .cv_name {
    top: calc(49vw - 29.5vw);  right: calc(63.4vw + -15.3vw);  width: calc(10.93vw * .38);
    transform: translate(-2vw, -10vw);
  }
  #chara_contents li:nth-child(3) .chara_profie {
    top: calc(79vw - 48vw);  right: calc(2vw + 22vw);  width: calc(66.74vw * .38);
    transform: translate(-10vw, -1vw);
  }
  #chara_contents li:nth-child(3) h3::after {
    top: 12vw;  left: 38.6vw;  width: calc(28.6vw * .38);  height: calc(28.6vw * 1.2845 * .38);
    background: url("./images/index/characters/label_en_jotaro.webp") no-repeat left top / cover;
  }

  /* 東方仗助 */
  #chara_contents li:nth-child(4) .chara_art {
    top: -1vw;  right: calc(-8vw + 28vw);  width: calc(97vw * .38);  height: calc(165.54vw * .38);
  }
  #chara_contents li:nth-child(4) .chara_name {
    top: calc(37vw - 19vw);  right: calc(0.5vw + 19vw);  width: calc(23.37vw * .38);
    transform: translate(2.5vw, -10vw);
  }
  #chara_contents li:nth-child(4) .cv_name {
    top: 22.5vw;  right: 27vw;  width: calc(9.418vw * .38);
    transform: translate(1.5vw, -10vw);
  }
  #chara_contents li:nth-child(4) .chara_profie {
    top: calc(80vw - 49vw);  right: calc(-0.5vw + 27.5vw);  width: calc(77.67vw * .38);
    transform: translate(-10vw, -1vw);
  }
  #chara_contents li:nth-child(4) h3::after {
    top: 4.6vw;  left: 38.6vw;  width: calc(45.58vw * .38);  height: calc(45.58vw * 1.2372 * .38);
    background: url("./images/index/characters/label_en_josuke.webp") no-repeat left top / cover;
  }

  /* ジョルノ・ジョバァーナ */
  #chara_contents li:nth-child(5) .chara_art {
    top: 3vw;  right: 26.7vw;  width: calc(68vw * .38);  height: calc(144.56vw * .38);
  }
  #chara_contents li:nth-child(5) .chara_name {
    top: calc(71vw - 43vw);  right: calc(0vw + 31vw);  width: calc(73.6vw * .38);
  }
  #chara_contents li:nth-child(5) .cv_name {
    top: 32.5vw;  right: 21vw;  width: calc(32.55vw * .38);
  }
  #chara_contents li:nth-child(5) .chara_profie {
    top: calc(80.5vw - 49vw);  right: calc(0vw + 23vw);  width: calc(83.83vw * .38);
    transform: translate(-10vw, -1vw);
  }
  #chara_contents li:nth-child(5) h3::after {
    top: 6.9vw;  left: 38.6vw;  width: calc(39.88vw * .38);  height: calc(39.88vw * 1.2478 * .38);
    background: url("./images/index/characters/label_en_giorno.webp") no-repeat left top / cover;
  }

  /* 空条徐倫 */
  #chara_contents li:nth-child(6) .chara_art {
    top: -3vw;  right: calc(-6vw + 28vw);  width: calc(94vw * .38);  height: calc(172.96vw * .38);
  }
  #chara_contents li:nth-child(6) .chara_name {
    top: calc(57.5vw - 37vw);  right: calc(-3vw + 22.8vw);  width: calc(23.72vw * .36);
    transform: translate(2vw, -10vw);
  }
  #chara_contents li:nth-child(6) .cv_name {
    top: calc(71.5vw - 45vw);  right: calc(17vw + 10vw);  width: calc(11.97vw * .38);
    transform: translate(2vw, -10vw);
  }
  #chara_contents li:nth-child(6) .chara_profie {
    top: calc(67.5vw - 38vw);  left: 41.7vw;  width: calc(72.9vw * .38);
    transform: translate(-10vw, -1vw);
  }
  #chara_contents li:nth-child(6) h3::after {
    top: 8.3vw;  left: 38.6vw;  width: calc(30.93vw * .38);  height: calc(30.93vw * 1.5112 * .38);
    background: url("./images/index/characters/label_en_jolyne.webp") no-repeat left top / cover;
  }

  #chara_nav_wrapper {
    --top: -8.2vw;
    --left: 7.4vw;
    top: 22.3vw;
    left: 9.3vw;
    width: 48vw;
    height: 50vw;
    transform: scale(1);
  }
  #chara_nav {
    position: absolute;
    top: 2vw;
    left: 2vw;
    width: 30vw;
    height: 50vw;
    will-change: auto;
  }
  #chara_nav_copy {
    display: none;
  }
  #chara_nav_wrapper.start #chara_nav {
    animation: none;
  }
  #chara_nav_wrapper.start #chara_nav_copy {
    animation: none;
  }
  #chara_nav li {
    position: relative;
    width: 8.66vw;
    height: 14.33vw;
  }
  #chara_nav li:nth-child(4), #chara_nav_copy li:nth-child(4) {
    top: calc(var(--top) * 3 - 2vw);
    left: calc(var(--left) * 0 + 2vw);
  }
  #chara_nav li:nth-child(5), #chara_nav_copy li:nth-child(5) {
    top: calc(var(--top) * 4 - 2vw);
    left: calc(var(--left) * 1 + 2vw);
  }
  #chara_nav li:nth-child(6), #chara_nav_copy li:nth-child(6) {
    top: calc(var(--top) * 5 - 2vw);
    left: calc(var(--left) * 2 + 2vw);
  }
  #chara_nav li::before {
    top: 1.5vw;
    left: .45vw;
    width: 8.66vw;
    height: 14.33vw;
  }
}



/* Gallery */
/* ============================================ */
#gallery {
  position: relative;
  top: -22vw;
  padding-top: 15vw;
  pointer-events: none;
}
#gallery_title{
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  overflow-x: hidden;
  opacity: 0;
  transition: var(--appear-move);
}
#gallery_title.appear {
  opacity: 1;
}
#gallery_title h2 {
  position:relative;
  width: 60vw;
  height: 60vw;
  margin: 0 3vw 0 auto;
  text-indent: -999vw;
}
#gallery_title h2::before {
  content: "";
  display: block;
  position: absolute;
  top: 8vw;
  right: -23vw;
  width: 87.5vw;
  height: 40vw;
  background: url("./images/index/gallery_arrow.webp") no-repeat center top / contain;
  transform: translate(20vw, 10vw) rotate(15deg);
  transition: transform 500ms var(--ease);
}
#gallery_title.appear h2::before {
  transform: translate(0, 0) rotate(15deg);
}
#gallery_title h2::after {
  content: "";
  display: block;
  position: absolute;
  top: 3vw;
  right: 0;
  width: 60.93vw;
  height: 33.77vw;
  background: url("./images/index/gallery_title_sp.webp") no-repeat center top / contain;
  transform: translate(-7vw, 0);
  transition: transform 880ms var(--ease);
}
#gallery_title.appear h2::after {
  transform: translate(0, 0);
}
#gallery_wrapper{
  pointer-events: auto;
}
#gallery_image {
  position: relative;
  width: 98vw;
  height: calc(98.37vw * 0.5725);
  margin: -30vw auto 5.5vw;
}
#gallery_image::after {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: url("./images/index/gallery_frame.webp?v=an1") no-repeat center center / contain;
  opacity: 0;
  transition: var(--appear-move);
}
#gallery_image.appear::after {
  opacity: 1;
}
#gallery_image li{
  position: absolute;
  width: 95.5%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
#gallery_image li.active {
  z-index: 0;
}
#gallery_image img{
  position: relative;
  opacity: 0;
  filter: brightness(5);
  transform: scale(1.2);
  transition: opacity 700ms var(--ease),
              filter 1200ms var(--ease),
              transform 700ms var(--ease);
}
#gallery_image.appear li.active img {
  opacity: 1;
  filter: brightness(1);
  transform: scale(1);
}
#gallery nav {
  position: relative;
}
#gallery_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw;
  width: 96vw;
  margin: 0 auto 4vw;
}
#gallery_nav li {
  position: relative;
  flex: 0 0 calc(100% / 3 - 3vw);
  overflow: hidden;
  opacity: 0;
}
#gallery_nav_wrapper.appear li:nth-child(1) {
  animation: galleryNav 700ms var(--ease) forwards;
}
#gallery_nav_wrapper.appear li:nth-child(2) {
  animation: galleryNav 700ms var(--ease) forwards 100ms;
}
#gallery_nav_wrapper.appear li:nth-child(3) {
  animation: galleryNav 700ms var(--ease) forwards 200ms;
}
#gallery_nav_wrapper.appear li:nth-child(4) {
  animation: galleryNav 700ms var(--ease) forwards 280ms;
}
#gallery_nav_wrapper.appear li:nth-child(5) {
  animation: galleryNav 700ms var(--ease) forwards 340ms;
}
#gallery_nav_wrapper.appear li:nth-child(6) {
  animation: galleryNav 700ms var(--ease) forwards 400ms;
}
@keyframes galleryNav {
  from {
    opacity: 0;
    transform: translateY(5vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#gallery_nav li {
  display: block;
  background-color: #666dd0;
  border: .6vw solid var(--dark);
}
#gallery_nav li.active {
  box-sizing: border-box;
  border-color: var(--link);
}
#gallery_nav li.wait a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #666dd0;
  opacity: .65;
  filter: saturate(30%) brightness(1.2);
  animation: galleryWait 3s linear forwards;
}
@keyframes galleryWait {
  from { width: 0%; }
  to   { width: 100%; }
}
#gallery_nav img {
  opacity: 0.65;
  transform: scale(1);
  filter: saturate(30%) brightness(1.2);
  transition: transform 500ms var(--ease);
}
#gallery_nav img:hover {
  transform: scale(1.2);
}
#gallery_nav li.active img {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1) brightness(1);
}
#gallery_nav_wrapper aside {
  width: 93.2vw;
  margin: 0 auto 15vw;
  text-align: left;
  color: var(--white);
  font-size: var(--font-small);
  opacity: 0;
  transition: var(--appear-move) 550ms;
}
#gallery_nav_wrapper.appear aside {
  opacity: 1;
}
#gallery::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("./images/index/gallery_bg_sp_0.4.webp") no-repeat 0 52vw / contain;
  opacity: 0;
}
#gallery:has(.appear)::before {
  animation: galleryLine 700ms var(--ease) forwards 200ms;
}
@keyframes galleryLine {
  from {
    opacity: 0;
    clip-path: polygon(0 0, 100% 0%, -200% 3%, 0 3%);
  }
  to {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
  }
}
@media print, screen and (min-width: 769px) {
  #gallery {
    top: -11vw;
    padding-top: 6vw;
    padding-bottom: 10vw;
    overflow-x: hidden;
  }
  #gallery::before {
    width: 100vw;
    height: 59vw;
    background: url("./images/index/gallery_bg_pc.webp") no-repeat 0 -6.4vw / contain;
  }
  #gallery_title h2 {
    height: 23vw;
    margin: 0 0 0 auto;
  }
  #gallery_title h2::before {
    top: 4.2vw;
    right: 0;
    width: 38.93vw;
    height: 18vw;
    transform: translate(12vw, 4vw) rotate(0);
  }
  #gallery_title.appear h2::before {
    transform: translate(0, 0) rotate(0);
  }
  #gallery_title h2::after {
    right: 5vw;
    width: 30.53vw;
    height: 10.33vw;
    background: url("./images/index/gallery_title_pc.webp") no-repeat left top / contain;
  }
  #gallery_wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 2vw;
    width: 95%;
    margin: -19vw auto 0;
  }
  #gallery_image {
    flex: 1 1 62%;
    aspect-ratio: 5 / 3;
    width: auto;
    height: fit-content;
    margin: auto;
  }
  #gallery_image li.active {
  }
  #gallery_nav_wrapper {
    flex: 1 1 40%;
    width: auto;
  }
  #gallery_nav {
    gap: 1vw;
    position: relative;
    width: auto;
    margin: 0 auto 1vw;
  }
  #gallery_nav li {
    flex: 1 1 calc(100% / 3 - 3vw);
    border-width: .22vw;
  }
  #gallery_nav_wrapper aside {
    margin: 0 auto 2vw;
    color: var(--dark);
  }
}




/* App */
/* ============================================ */
#app {
  position: relative;
  margin-top: -15vw;
}
#app::before {
  content: "";
  position: absolute;
  top: 5vw;
  right: 6.5vw;
  width: 44.65vw;
  height: calc(44.65vw * 1.028);
  background: url("./images/index/app_ddd_sp.webp") no-repeat left top / contain;
  opacity: 0;
  transition: var(--appear-move);
}
body:not(.dark_mode) #app::before {
  opacity: 1;
  animation: dddAnimation2 500ms linear infinite;
}
@keyframes dddAnimation2 {
  0%  { transform: scale(.99) rotate(.1deg) translate(.5vw, .6vw); }
  50% { transform: scale(1) rotate(-.13deg) translate(0, 0); }
  70% { transform: scale(1.015) translate(-.5vw, .3vw); }
  100%{ transform: scale(1) translate(-.1vw, -.2vw); }
}
#app_title {
  padding-top: 15vw;
  opacity: 0;
  transition: var(--appear-move);
}
#app_title.appear {
  opacity: 1;
}
#app_title h2 {
  position: relative;
  width: 75vw;
  height: 24vw;
  margin: 0 auto 0 0;
  text-indent: -999vw;
}
#app_title h2::before {
  content: "";
  display: block;
  position: absolute;
  top: -14vw;
  left: -7.5vw;
  width: 40vw;
  height: 44vw;
  background: url("./images/index/app_arrow.webp") no-repeat center top / contain;
  transform: translate(-10vw, -13vw);
  transition: transform 700ms var(--ease);
}
#app_title.appear h2::before {
  transform: translate(0, 0);
}
#app_title h2::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0.7vw;
  width: 46.51vw;
  height: 30vw;
  background: url("./images/index/app_title_sp.webp") no-repeat center top / contain;
  transform: translate(7vw, 0);
  transition: transform 880ms var(--ease);
}
#app_title.appear h2::after {
  transform: translate(0, 0);
}
#app_contens_wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 83.72vw;
  margin: 8vw auto;
  padding: 5vw;
  background: url("./images/common/bg_sp_dark.webp") repeat center top / 100vw;
  background-position-y: 14.5vw;
  opacity: 0;
  transition: var(--appear-move);
}
#app_contens_wrapper.appear {
  opacity: 1;
}
#app_contens_wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: -3.4vw;
  width: 90.58vw;
  height: calc(90.58vw * 0.0552);
  background: url("./images/index/app_topline_sp.webp") no-repeat center top / contain;
}
#app_contens_wrapper::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -4vw;
  width: 90.58vw;
  height: calc(90.58vw * 0.0552);
  background: url("./images/index/app_bottomline_sp.webp") no-repeat center top / contain;
}

#app_contens_wrapper img {
  width: 27.32vw;
}

#app_contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  margin-top: 5vw;
  padding: 3.5vw;
  background-color: rgba(96, 79, 48, .7);
  font-size: var(--font-small);
}
#app_contents dt {
  color: var(--light);
}
#app_contents dd {
  color: var(--white);
}
#app_contents dd:not(:last-of-type) {
  margin-bottom: 3vw;
}
#app_contents > * {
  opacity: 0;
  transform: translateY(5vw);
}
#app_contens_wrapper.appear #app_contents > :nth-child(1) {
  animation: appContents 400ms var(--ease) forwards;
}
#app_contens_wrapper.appear #app_contents > :nth-child(2) {
  animation: appContents 400ms var(--ease) forwards 100ms;
}
#app_contens_wrapper.appear #app_contents > :nth-child(3) {
  animation: appContents 400ms var(--ease) forwards 200ms;
}
#app_contens_wrapper.appear #app_contents > :nth-child(4) {
  animation: appContents 400ms var(--ease) forwards 280ms;
}
#app_contens_wrapper.appear #app_contents > :nth-child(5) {
  animation: appContents 400ms var(--ease) forwards 340ms;
}
#app_contens_wrapper.appear #app_contents > :nth-child(6) {
  animation: appContents 400ms var(--ease) forwards 400ms;
}
#app_contens_wrapper.appear #app_contents > :nth-child(7) {
  animation: appContents 400ms var(--ease) forwards 450ms;
}
#app_contens_wrapper.appear #app_contents > :nth-child(8) {
  animation: appContents 400ms var(--ease) forwards 500ms;
}
@keyframes appContents {
  from {
    opacity: 0;
    transform: translateY(5vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media print, screen and (min-width: 769px) {
  #app {
    margin-top: -15vw;
  }
  #app::before {
    top: 3.4vw;
    right: 7.5vw;
    width: 14.3vw;
    height: 27.3vw;
    background: url("./images/index/app_ddd_pc.webp") no-repeat left top / contain;
  }
  body:not(.dark_mode) #app::before {
    opacity: 1;
    animation: dddAnimationPc 500ms linear infinite;
  }
  #app_title {
    padding-top: 5vw;
  }
  #app_title h2 {
    width: 30vw;
    height: 17vw;
  }
  #app_title h2::before {
    top: -3.8vw;
    left: 3vw;
    width: 14.63vw;
    height: 21.73vw;
    transform: translate(-10vw, -10vw);
  }
  #app_title h2::after {
    top: 3.3vw;
    left: 3.9vw;
    width: 18.8vw;
    height: 10.16vw;
    background: url("./images/index/app_title_pc.webp") no-repeat center top / contain;
  }
  #app_contens_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3vw;
    width: 53vw;
    margin: -9.3vw auto 0;
    padding: 2.5vw 4.5vw;
    background: url("./images/common/bg_pc_dark.webp") repeat center top / 100vw;
  }
  #app_contens_wrapper::before {
    top: -1.5vw;
    width: 56.13vw;
    height: 2vw;
    background: url("./images/index/app_topline_pc.webp") no-repeat center top / contain;
  }
  #app_contens_wrapper::after {
    bottom: -1.5vw;
    width: 56.13vw;
    height: 2vw;
    background: url("./images/index/app_bottomline_pc.webp") no-repeat center top / contain;
  }
  #app_contens_wrapper img {
    flex: 1 1 10%;
    width: auto;
  }
  #app_contents {
    flex: 1 1 55%;
    width: auto;
    margin: 0;
    padding: 1.6vw 3.1vw;
  }
  #app_contents dd:not(:last-of-type) {
    margin-bottom: 1.56vw;
  }
}


/* Footer */
/* ============================================ */
footer {
  position: relative;
  margin-top: -14vw;
  color: var(--middle);
  opacity: 0;
  transition: var(--appear-move) 500ms;
}
footer.appear {
  opacity: 1;
}
footer a {
  filter: brightness(1);
  transition: filter 300ms var(--ease);
}
footer a:hover {
  filter: brightness(1.5);
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #997737;
  opacity: .5;
}
footer.appear::before {
  animation: footerAppear 1000ms var(--ease) forwards;
}
@keyframes footerAppear {
  from {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  }
  to {
  clip-path: polygon(0 32%, 100% 0%, 100% 100%, 0% 100%);
  }
}
#share_x {
  position: absolute;
  top: 20vw;
  right: 10.9vw;
  width: 24vw;
  font-size: var(--font-small);
}
#share_x img {
  width: 15.69vw;
  margin: 0 auto 2vw;
}
#footer_bg {
  position: relative;
  width: 100vw;
  height: 153vw;
}
#footer_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark) url("./images/common/bg_footer_sp.webp") no-repeat right top / contain;
  clip-path: polygon(0 26.5%, 100% 11%, 100% 100%, 0% 100%);
}
footer.appear #footer_bg::before {
  animation: footerBgAppear 700ms var(--ease) 500ms forwards;
}
@keyframes footerBgAppear {
  from {
  clip-path: polygon(100% 11%, 100% 11%, 300% -15%, 150% -30%);
  }
  to {
  clip-path: polygon(0 26.5%, 100% 11%, 100% 100%, 0% 100%);
  }
}
#footer_nav {
  position: relative;
  width: 83.72vw;
  top: 49vw;
  margin: 0 auto 75.5vw;
}
#footer_nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5vw 5vw;
  flex: 1;
  margin-bottom: 7.5vw;
}
#footer_nav li {
  position: relative;
  width: fit-content;
  font-size: var(--font-small);
}
#footer_nav li a {
  padding-left: 5vw;
}
#footer_nav li a::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 3.48vw;
  height: calc(3.48vw * 0.6666);
  background: url("./images/common/icon_arrow_s.webp") no-repeat center / contain;
  transform: translateY(-50%);
  transition: transform 300ms var(--ease);
}
#footer_nav li a:hover::before {
  transform: translate(1vw, -50%) rotateX(180deg);
}
#footer_nav .company_logo {
  display: block;
  width: 27.67vw;
  margin-left: -3.5vw;
}
#footer_bg .copyright {
  position: relative;
  width: 83.72vw;
  margin: 0 auto;
  font-size: clamp(.5rem, 2.2vw, .8rem);
  text-align: left;
  line-height: 1.7;
  color: #736f67;
}
#share_x {
  transform: translateY(5vw);
  transition: transform 850ms var(--ease) 400ms;
}
footer.appear #share_x {
  transform: translateY(0);
}
#footer_bg > * {
  transform: translateY(5vw);
  transition: transform 850ms var(--ease) 400ms;
}
footer.appear #footer_bg > * {
  transform: translateY(0);
}

@media print, screen and (min-width: 769px) {
  footer {
    margin-top: -3vw;
  }
  footer.appear::before {
    animation: footerAppear 600ms var(--ease) forwards;
  }
  @keyframes footerAppear {
    from {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
    }
    to {
    clip-path: polygon(0 61.5%, 100% 0%, 100% 100%, 0% 100%);
    }
  }
  #share_x {
    top: 7vw;
    right: 9.2vw;
    width: 10vw;
  }
  #share_x img {
    width: 4.2vw;
    margin: 0 auto .4vw;
  }
  #footer_bg {
    height: 42vw;
  }
  #footer_bg::before {
  background: var(--dark) url("./images/common/bg_footer_pc.webp") no-repeat right bottom / contain;
  }
  footer.appear #footer_bg::before {
    animation: footerBgAppear 500ms var(--ease) 350ms forwards;
  }
  @keyframes footerBgAppear {
    from {
    clip-path: polygon(100% 15%, 100% 15%, 300% 15%, 450% -30%);
    }
    to {
    clip-path: polygon(0 44.5%, 100% 15%, 100% 100%, 0% 100%);
    }
  }
  #footer_nav {
    top: 20vw;
    width: 80%;
    margin: 0 auto 10vw;
  }
  #footer_nav ul{
    gap: 1.4vw 1.5vw;
    width: 50%;
  }
  #footer_nav li a {
    padding-left: 1.75vw;
  }
  #footer_nav li a::before {
    width: 1.2vw;
  }
  #footer_nav li a:hover::before {
    transform: translate(.5vw, -50%) rotateX(180deg);
  }
  #footer_nav .company_logo {
    position: absolute;
    top: 0;
    right: 0;
    width: 9.53vw;
  }
  #footer_bg .copyright {
    top: 17.5vw;
    width: 80%;
    font-size: clamp(.5rem, .7vw, .8rem);
  }
}






/* News page */
/* ============================================ */
#news_page {
  --title: 0.76;
}
#news_page #header {
  position: relative;
  width: 100vw;
  height: 46.86vw;
  background: url("./images/news/news_header_sp.webp") no-repeat center top / cover;
}
#news_page #header a {
  display: block;
  width: fit-content;
}
#news_page #title_logo {
  position: relative;
  top: 0;
  left: 1vw;
  right: auto;
  width: 55.23vw;
  margin: 0;
  transition: var(--appear-move);
  z-index: 1;
}
#news_page #contents_wrapper.start #title_logo {
  opacity: 1;
  animation: none;
}
#news_page #news {
  margin-top: -34vw;
  padding-top: 0;
  pointer-events: auto;
}
#news_page #news_contents {
  overflow: visible;
}
#news_page #news_contents h2.news_title {
  height: 27vw;
  margin: 0 0 0 auto;
  overflow: hidden;
}
#news_page #news_contents h2.news_title::before {
  right: calc(-11vw * var(--title) + 7vw);
  width: calc(59.5vw * var(--title));
  height: calc(29vw * var(--title));
}
#news_page #news_contents h2.news_title::after {
  width: 33.37vw;
  height: 14.3vw;
  margin-right: 7vw;
  background: url("./images/news/newspage_title_sp.webp") no-repeat center top / contain;
}
#news_page #category_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3vw 2vw;
  width: 87vw;
  margin: 0 auto 9vw;
  font-size: var(--font-small);
  font-weight: var(--font-bold);
  pointer-events: auto;
}
#news_page #category_list li {
  flex: 0 0 calc(100% / 3 - 2vw);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.5vw;
  box-shadow: 1.4vw 2vw 0 0 rgba(195, 129, 4, .5);
}
#news_page #category_list li a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--dark) url("./images/news/icon_category.webp") no-repeat .33vw .33vw / 2vw;
  color: var(--white);
  transition: color 350ms var(--ease),
              background-color 350ms var(--ease);
}
#news_page #category_list li a.current{
  background: var(--white) url("./images/news/icon_category.webp") no-repeat .33vw .33vw / 2vw;
  color: var(--dark);
  pointer-events: none;
}
#news_page #category_list li a:hover {
  background-color: var(--middle);
  background-image: url("./images/news/icon_category_active.webp");
  color: var(--dark);
}
#news_page #news_list {
  width: 92.5vw;
  margin: 0 0 0 auto;
}
#news_page #news_list dt{
  position: relative;
  width: 54vw;
  height: 4.7vw;
  margin: 0 auto 0 0;
  background: url("./images/news/bg_category.webp") no-repeat left top / contain;
  color: var(--white);
  font-family: inherit;
  line-height: 4.7vw;;
}
#news_page .label_cat {
  display: block;
  width: 28vw;
  padding-left: 3vw;
}
#news_page .label_date {
  display: block;
  position: absolute;
  top: 0;
  left: 28vw;
  color: var(--light);
}
#news_page #news_list dd{
  width: 100%;
  margin-bottom: 3vw;
}
#news_page .news_nav {
  position: relative;
  width: 90vw;
  margin: 7vw auto 0;
  font-size: clamp(.9rem, 3.7vw, 1.3rem);
  line-height: 1;
  pointer-events: auto;
}
#news_page .news_nav a:hover {
  color: var(--middle);
}
#news_page .previous_link {
  position: absolute;
  top: 50%;
  left: 0;
  padding-left: 8.37vw;
  transform: translateY(-50%);
}
#news_page .previous_link::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 7.325vw;
  height: 3vw;
  background: url("./images/news/icon_news_arrow.webp") no-repeat left top / contain;
  transform: translateY(-50%) scaleX(-1);
  transition: transform 350ms var(--ease);
}
#news_page .previous_link:hover::before {
  background-image: url("./images/news/icon_news_arrow_active.webp");
  transform: translate(-5%, -50%) rotateX(180deg) scaleX(-1);
}
#news_page .next_link {
  position: absolute;
  top: 50%;
  right: 0;
  padding-right: 8.37vw;
  transform: translateY(-50%);
}
#news_page .next_link::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 7.325vw;
  height: 3vw;
  background: url("./images/news/icon_news_arrow.webp") no-repeat left top / contain;
  transform: translateY(-50%);
  transition: transform 350ms var(--ease);
}
#news_page .next_link:hover::before {
  background-image: url("./images/news/icon_news_arrow_active.webp");
  transform: translate(5%, -50%) rotateX(180deg);
}
#news_page .news_nav .current {
  color: var(--middle);
}
#news_page .news_nav .current,
#news_page .news_nav .page {
  font-size: clamp(1.4rem, 6vw, 2.8rem);
}
#news_page .news_nav span + .page,
#news_page .news_nav .page + span,
#news_page .news_nav .page + .page {
  margin-left: 3.8vw;
}
#news_page footer {
  margin-top: -5vw;
}

@media print, screen and (min-width: 769px) {
  body#news_page {
    background-color: var(--dark);
  }
  #news_page #header {
    height: 23.7vw;
    max-height: 300px;
    background: url("./images/news/news_header_pc.webp") no-repeat left top / 100% 100%;
  }
  #news_page #title_logo {
    width: min(19.36vw, 340px);
    left: min(2.6vw, 40px);
    transition: filter 300ms var(--ease);
  }
  #news_page #title_logo:hover {
    filter: brightness(2);
  }
  #news_page #news {
    margin-top: max(-250px, -21vw);
    margin-bottom: 0;
  }
  #news_page #news_contents h2.news_title {
    height: 11vw;
    max-height: 160px;
    pointer-events: none;
  }
  #news_page #news_contents h2.news_title::before {
    right: 0;
    width: min(22.76vw, 341.5px);
    height: min(10.3vw, 157.5px);
    background: url("./images/news/newspage_arrow.webp") no-repeat right top / contain;
  }
  #news_page #news_contents h2.news_title::after {
    top: 1vw;
    width: min(16.76vw, 251.5px);
    height: min(7.166vw, 107.5px);
    margin-right: min(5.5vw, 70.4px);
    background: url("./images/news/newspage_title_pc.webp") no-repeat center top / contain;
  }
  #news_page #category_list {
    gap: 1vw;
    width: 53.33vw;
    margin-top: max(-3vw, -41px);
    margin-bottom: min(5vw, 80px);
    font-size: clamp(.6rem, 1vw, 1.2rem);
  }
  #news_page #category_list li {
    flex: 0 1 calc(100% / 5 - 2vw);
    height: min(3vw, 45px);
    background: var(--white) url("./images/news/icon_category.webp") no-repeat 2px 2px / min(1vw, 16px);
    box-shadow: .6vw .8vw 0 0 rgba(195, 129, 4, .5);
  }
  #news_page #category_list li a {
    background: var(--dark) url("./images/news/icon_category.webp") no-repeat 2px 2px / min(1vw, 16px);
  }
  #news_page #category_list li a.current {
    background: var(--white) url("./images/news/icon_category.webp") no-repeat 2px 2px / min(1vw, 16px);
  }
  #news_page #news_list_wrapper {
    min-height: min(30vw, 380px);
  }
  #news_page #news_list {
    grid-template-columns: clamp(175px, 18.5vw, 280px) 1fr;
    row-gap: min(1vw, 15px);
    grid-auto-flow: row;
    align-items: center;
    left: auto;
    width: 80vw;
    max-width: 1200px;
    margin: 0 auto;
  }
  #news_page #news_list dt{
    width: clamp(186px, 19.4vw, 292px);
    max-width: 292px;
    height: max(1.65vw, 16px);
    line-height: min(1.65vw, 25px);
    font-size: var(--font-small);
    z-index: 1;
  }
  #news_page .label_cat {
    width: 9.5vw;
    padding-left: min(1.5vw, 18px);
    color: var(--light);
  }
  #news_page .label_date {
    left: clamp(100px, 10.5vw, 154px);
  }
  #news_page #news_list dd {
    margin-bottom: 0;
    background-size: min(63vw, 920px) auto;
  }
  #news_page #news_list dd a{
    padding-left: 2vw;
  }
  #news_page .news_nav {
    width: 54vw;
    max-width: 800px;
    margin-top: min(5vw, 80px);
  }
  #news_page .previous_link {
    padding-left: 4.5vw;
  }
  #news_page .previous_link::before {
    width: 4vw;
    height: 1.5vw;
  }
  #news_page .next_link {
    padding-right: 4.5vw;
  }
  #news_page .next_link::before {
    width: 4vw;
    height: 1.5vw;
  }
  #news_page .news_nav .current,
  #news_page .news_nav .page {
    font-size: clamp(1rem, 3vw, 2rem);
  }
  #news_page .news_nav span + .page,
  #news_page .news_nav .page + span,
  #news_page .news_nav .page + .page {
    margin-left: 3.8vw;
  }
  #news_page footer {
    margin-top: -3vw;
  }
}

#news_page .news_body {
  position: relative;
  width: 95vw;
  min-height: 20vw;
  margin: -3vw auto 0;
  background-color: var(--white);
}
#news_page .news_headline {
  position: relative;
  padding: 5vw 5vw;
  text-align: left;
}
#news_page .news_headline::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: #fbeeaa;
  clip-path: polygon(0 0, 79% 0, 2% 55%, 30% 100%, 0 100%);
}
#news_page .news_headline::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  bottom: -2vw;
  background: url("./images/news/topimage_topline_sp.webp") no-repeat center bottom / 97%;
  z-index: 1;
}
#news_page .news_date {
  position: relative;
  width: 54vw;
  height: 4.7vw;
  margin: 0 auto 0 0;
  background: url("./images/news/bg_category.webp") no-repeat left top / contain;
  color: var(--white);
  font-size: var(--font-small);
  font-weight: var(--font-normal);
  line-height: 4.7vw;;
}
#news_page .news_date .label_cat {
  display: block;
  width: 28vw;
  padding-left: 3vw;
}
#news_page .news_date .label_date {
  display: block;
  position: absolute;
  top: 0;
  left: 28vw;
  color: var(--light);
}
#news_page .news_headline h2 {
  position: relative;
  margin-top: 1.5vw;
  font-size: clamp(.1rem, 4.3vw, 1.35rem);
  font-weight: var(--font-bold);
  line-height: 1.38;
  text-align: justify;
}
#news_page .topimage {
  display: block;
  position: relative;
  width:100%;
}
#news_page .topimage img{
  width: 100%;
}
#news_page .topimage::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  bottom: -1.5vw;
  background: url("./images/news/topimage_bottomline_sp.webp") no-repeat center bottom / 97%;
}
#news_page .article_body {
  padding: 5vw 5vw 10vw;
  text-align: left;
  text-align: justify;
  line-height: 1.8;
}
#news_page .article_body .headline{
  position: relative;
  margin: 9vw -5vw 3vw;
  padding: 1.5vw 5vw;
  background: url("./images/news/h2_bg.webp") repeat-y left center / contain;
  color: var(--white);
  font-weight: var(--font-bold);
  line-height: 1.5;
}
#news_page .article_body .headline::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 4.4vw;
  height: 100%;
  background: url("./images/news/icon_h2.webp") no-repeat right center / contain;
}
#news_page .article_body .headline-m{
  margin: 9vw -5vw 3vw;
  padding: .85vw 6vw 1.5vw;
  background: url("./images/news/bg_headline-m_sp.webp") no-repeat center top / contain;
  color: #816737;
  font-weight: var(--font-bold);
  line-height: 1.5;
}
#news_page .article_body .headline-s{
  position: relative;
  margin: 2vw 0 0vw;
  padding: 0 0 0 5vw;
  color: #816737;
  font-weight: var(--font-bold);
  line-height: 1.5;
}
#news_page .article_body .headline-s::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5vw;
  height: 100%;
  background: url("./images/news/icon_h2.webp") no-repeat left center / contain;
}
#news_page .news_nav .back {
  font-size: clamp(.95rem, 3.9vw, 1.35rem);
}

@media print, screen and (min-width: 769px) {
  #news_page .news_body {
    max-width: 1200px;
    margin-top: min(.5vw, 20px);
  }
  #news_page .news_headline {
    padding: min(3vw, 38.4px) 9% min(2vw, 30px);
  }
  #news_page .news_headline::before {
    clip-path: polygon(0 0, 55% 0, 3% 71%, 12% 100%, 0 100%);
  }
  #news_page .news_headline::after {
    bottom: max(-.9vw, -11px);
    background: url("./images/news/topimage_topline_pc.webp") no-repeat center bottom / contain;
  }
  #news_page .news_date {
    width: clamp(186px, 19.4vw, 292px);
    max-width: 292px;
    height: max(1.65vw, 25px);
    line-height: min(1.65vw, 25px);
    font-size: var(--font-small);
  }
  #news_page .news_date .label_cat {
    width: 9.5vw;
    padding-left: min(1.5vw, 18px);
    color: var(--light);
  }
  #news_page .news_date .label_date {
    left: clamp(100px, 10.5vw, 154px);
  }
  #news_page .news_headline h2{
    margin-top: min(.7vw, 11px);
    font-size: clamp(1rem, 2.3vw, 1.65rem);
    line-height: 1.5;
  }
  #news_page .topimage::after {
    bottom: max(-.7vw, -9px);
    background: url("./images/news/topimage_bottomline_pc.webp") no-repeat center bottom / contain;
  }
  #news_page .article_body {
    padding: min(2em, 38.4px) 9% min(4em, 80px);
    font-size: clamp(.9rem, 1.2vw, 1.2rem);
  }
  #news_page .article_body .headline{
    margin: 2em 0 1em;
    padding: .3em 4%;
    background: url("./images/news/h2_bg.webp") repeat-y left center / cover;
    font-size: clamp(.95rem, 1.65vw, 1.3rem);
    font-weight: var(--font-normal);
  }
  #news_page .article_body .headline::before{
    width: 3.5%;
  }
  #news_page .article_body .headline-m{
    margin: 2em 0 1em;
    padding: .85em min(4vw, 2.7em) min(.8vw, .7em);
    background: url("./images/news/bg_headline-m_pc.webp") no-repeat center bottom / contain;
    font-size: clamp(.9rem, 1.25vw, 1.25rem);
    line-height: 1.5;
  }
  #news_page .article_body .headline-s{
    margin: 1em 0 0em;
    padding-left: min(2em, 38.4px);
  }
  #news_page .article_body .headline-s::before{
    width:  min(1.8em, 34px);
  }

  #news_page .news_nav .back {
    font-size: clamp(.9rem, 3.7vw, 1.35rem);
    line-height: .7;
  }
}



.article_body p {
  margin-bottom: 3vw;
}
.article_body a {
  color: #e00fc0;
  text-decoration: underline;
}
.article_body img {
  display: inline-block;
}
.article_body hr {
  border: 1px solid var(--middle);
}
.article_body hr.line {
  width: 100%;
  height: 3.5vw;
  border: none;
  background: url("./images/news/hr_sp.webp") no-repeat center top / contain;
}
.article_body .frame {
  margin: 0 0vw 3vw;
  padding: 3vw 3vw 0;
  border: 1px solid var(--light);
  background-color: #fbeeaa;
}
.article_body li {
}
.article_body li:before {
  content: "●";
  font-size:var(--font-small);
  margin-right: 0.5em;
}
.txt-bold {
  font-weight: var(--font-bold);
}
.txt-italic {
  font-style: italic;
}
.txt-red {
  color: #d00808;
}
.align-left {
  display: block;
  text-align: left;
}
.align-center {
  display: block;
  text-align: center;
}
.align-right {
  display: block;
  text-align: right;
}
.txt-notice {
  color: #736f67;
  font-size:  clamp(.7rem, .95vw, 1rem);;
}
@media print, screen and (min-width: 769px) {
  .article_body p {
    margin-bottom: 1em;
  }
  .article_body hr.line {
    width: 100%;
    height: 1.5em;
    border: none;
    background: url("./images/news/hr_pc.webp") no-repeat center top / contain;
  }
  .article_body .frame {
    margin: 0 0 1em;
    padding: 1.5em 2em 0.5em;
  }
}



/* terms */
/* ============================================ */
#terms {
  margin-top: -6em;
}
#terms .article_body p {
  font-size: clamp(.85rem, .9vw, 1.1rem);
}


/* youtube modal */
/* ============================================ */
#youtube_modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  justify-content: center;
  align-items: center;
  background: rgba(59, 44, 16, 0.5);
  opacity: 0;
  z-index: 9999;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  pointer-events: none;
}
#youtube_modal.active {
  opacity: 1;
  pointer-events: auto;
  animation: modalAppear 500ms var(--ease);
}
@keyframes modalAppear {
  from { clip-path: polygon(0 0, 10% 0, -25% 80%, -35% 90%, -20% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 120% 0, 100% 30%, 120% 60%, 100% 100%, 0 100%); }
}
#youtube_frame {
  aspect-ratio: 16 / 9;
  width: 100vw;
  border: none;
}
@media print, screen and (min-width: 769px) {
  #youtube_frame {
    width: min(90vw, 1600px);
  }
}