/* ==========================================================================
Foundation
========================================================================== */
/* Reset
----------------------------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, button, textarea, select {
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Base
	----------------------------------------------------------------- */
html {
  overflow-x: hidden;
  height: 100%;
  color: #ffffff;
  background: #424C51;
  overflow-y: scroll;
}

body {
  color: #ffffff;
  background: #424C51;
  -webkit-text-size-adjust: 100%;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: 0.9722222222vw;
  letter-spacing: 0.05em;
  line-height: calc(28 / 14);
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 767px) {
  body {
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
  }
  .is-sp body {
    min-height: 100dvh;
  }
}
body.is-transition {
  pointer-events: none;
}

img {
  vertical-align: bottom;
  backface-visibility: hidden;
}

a {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  a:hover {
    opacity: 0.7;
  }
}
a.is-disable {
  pointer-events: none;
}

strong, em {
  font-weight: 600;
}

/* ==========================================================================
	Layout
========================================================================== */
.navi {
  position: fixed;
  top: 0;
  height: 100vh;
  width: min(348px, 24.1666666667vw);
  background: #C1C5C6;
  right: 0;
  z-index: 100;
  transition: all 0.4s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .navi {
    width: 92.8vw;
  }
}
@media screen and (min-width: 768px) {
  .navi::before, .navi::after {
    content: "";
    width: min(16px, 1.1111111111vw);
    height: 1px;
    background: #818181;
    display: block;
    position: absolute;
    top: 50%;
    left: min(28px, 1.9444444444vw);
    transform: translate(-50%, -50%);
    transition: all 0.4s;
    opacity: 1;
  }
  .navi::before {
    margin-top: min(-3.5px, -0.2430555556vw);
  }
  .navi::after {
    margin-top: min(3.5px, 0.2430555556vw);
  }
}
.navi:not(.is-active) {
  transform: translate(min(292px, 20.2777777778vw), 0);
}
@media screen and (max-width: 767px) {
  .navi:not(.is-active) {
    transform: translate(100%, 0);
  }
}
@media screen and (min-width: 768px) {
  .navi:not(.is-active):hover {
    background: #8F999B;
  }
}
.navi:not(.is-active) .navi__list {
  transition-delay: 0;
}
@media screen and (min-width: 768px) {
  .navi.is-active::before, .navi.is-active::after {
    margin-left: min(16px, 1.1111111111vw);
    opacity: 0;
  }
}
.navi.is-active .navi__open {
  display: none;
}
.navi.is-active .navi__list li {
  opacity: 1;
  transform: none;
}
.navi.is-active .navi__list li:nth-child(1) {
  transition-delay: 0.05s;
}
.navi.is-active .navi__list li:nth-child(2) {
  transition-delay: 0.1s;
}
.navi.is-active .navi__list li:nth-child(3) {
  transition-delay: 0.15s;
}
.navi.is-active .navi__list li:nth-child(4) {
  transition-delay: 0.2s;
}
.navi.is-active .navi__list li:nth-child(5) {
  transition-delay: 0.25s;
}
.navi.is-active .navi__list li:nth-child(6) {
  transition-delay: 0.3s;
}
.navi__list {
  position: absolute;
  margin-left: min(44px, 3.0555555556vw);
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  font-size: min(15px, 1.0416666667vw);
  letter-spacing: 0.05em;
  line-height: calc(40 / 15);
}
@media screen and (max-width: 767px) {
  .navi__list {
    font-size: 4vw;
    letter-spacing: 0.05em;
    line-height: calc(80 / 30);
    margin-left: 11.7333333333vw;
  }
}
.navi__list li {
  opacity: 0;
  transition: all 0.4s;
  transform: translate(min(30px, 2.0833333333vw), 0);
}
@media screen and (max-width: 767px) {
  .navi__list li {
    transform: translate(8vw, 0);
  }
}
.navi__list a {
  color: #0c0c0c;
  transition: opacity 0.4s;
}
.navi__open {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.navi__close {
  width: min(42px, 2.9166666667vw);
  height: min(42px, 2.9166666667vw);
  position: absolute;
  right: min(6px, 0.4166666667vw);
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  .navi__close {
    width: 11.2vw;
    height: 10.6666666667vw;
    right: 1.6vw;
  }
}
.navi__close::before, .navi__close::after {
  content: "";
  width: min(17.46px, 1.2125vw);
  height: 1px;
  display: block;
  position: absolute;
  background: #818181;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}
@media screen and (max-width: 767px) {
  .navi__close::before, .navi__close::after {
    width: 4.656vw;
  }
}
.navi__close:before {
  transform: translate(-50%, -50%) rotate(-23.63deg);
}
.navi__close:after {
  transform: translate(-50%, -50%) rotate(23.63deg);
}
.navi__sp {
  position: fixed;
  width: 9.3333333333vw;
  height: 9.3333333333vw;
  top: 8.1333333333vw;
  right: 5.3333333333vw;
  z-index: 10;
  mix-blend-mode: difference;
}
@media screen and (min-width: 768px) {
  .navi__sp {
    display: none;
  }
}
.navi__sp::before, .navi__sp::after {
  content: "";
  height: 1px;
  width: 9.3333333333vw;
  background: #fff;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.navi__sp::before {
  margin-top: -0.9333333333vw;
}
.navi__sp::after {
  margin-top: 0.9333333333vw;
}

.footer {
  margin-top: min(337px, 23.4027777778vw);
  background: #242E33;
  padding-top: min(120px, 8.3333333333vw);
  padding-bottom: min(160px, 11.1111111111vw);
}
@media screen and (max-width: 767px) {
  .footer {
    margin-top: 32vw;
    padding-top: 20.1333333333vw;
    padding-bottom: 22.6666666667vw;
  }
}
.footer .section__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer .section__title {
  width: min(230px, 15.9722222222vw);
}
@media screen and (max-width: 767px) {
  .footer .section__title {
    width: 22.9333333333vw;
  }
}
.footer__image {
  width: min(360px, 25vw);
  height: auto;
}
@media screen and (max-width: 767px) {
  .footer__image {
    width: 56.8vw;
  }
}
.footer__text {
  width: min(425px, 29.5138888889vw);
  margin-left: min(36px, 2.5vw);
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(12px, 0.8333333333vw);
  letter-spacing: 0.05em;
  line-height: calc(26 / 12);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .footer__text {
    margin-top: 4.6666666667vw;
    width: 56.8vw;
    font-size: 2.4vw;
    letter-spacing: 0.05em;
    line-height: calc(38 / 18);
    margin-left: 22.9333333333vw;
  }
}
.footer__link {
  margin-top: min(48px, 3.3333333333vw);
  color: #71B3D7;
}
@media screen and (max-width: 767px) {
  .footer__link {
    margin-top: 7.0666666667vw;
  }
}
.footer__copy {
  margin-top: min(160px, 11.1111111111vw);
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: min(14px, 0.9722222222vw);
  letter-spacing: 0.05em;
  line-height: calc(0 / 14);
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .footer__copy {
    margin-top: 26.5333333333vw;
    font-size: 2.4vw;
    letter-spacing: 0.05em;
    line-height: calc(0 / 18);
  }
}

/* ==========================================================================
	Object
========================================================================== */
/* Component
----------------------------------------------------------------- */
.section {
  position: relative;
  z-index: 2;
}
.section__title {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 300;
  font-size: min(50px, 3.4722222222vw);
  letter-spacing: 0.02em;
  line-height: calc(50 / 50);
}
@media screen and (max-width: 767px) {
  .section__title {
    font-size: 6.6666666667vw;
    letter-spacing: 0.02em;
    line-height: calc(50 / 50);
  }
}
.section__inner {
  margin: 0 auto;
  padding: 0 min(66px, 4.5833333333vw);
  box-sizing: border-box;
  max-width: min(1280px, 88.8888888889vw);
}
@media screen and (max-width: 767px) {
  .section__inner {
    padding: 0 5.3333333333vw;
    max-width: 100%;
  }
}
.section__inner.has-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .section__inner.has-content {
    flex-direction: column;
  }
}
.section__content {
  max-width: min(852px, 59.1666666667vw);
}
@media screen and (max-width: 767px) {
  .section__content {
    max-width: 100%;
  }
}

/* Project
----------------------------------------------------------------- */
.keyvisual {
  position: relative;
}
.keyvisual img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.keyvisual__logo {
  position: absolute;
  top: 12.3611111111vw;
  left: 0.2777777778vw;
}
@media screen and (max-width: 767px) {
  .keyvisual__logo {
    top: 19.3333333333vw;
    left: 5.3333333333vw;
  }
}
.keyvisual__logo img {
  width: 10.5555555556vw;
  height: auto;
}
@media screen and (max-width: 767px) {
  .keyvisual__logo img {
    width: 27.7333333333vw;
  }
}
.keyvisual__artist {
  position: absolute;
  bottom: 10.3298611111vw;
  left: 10.2083333333vw;
}
@media screen and (max-width: 767px) {
  .keyvisual__artist {
    bottom: auto;
    top: 58.5333333333vw;
    left: 16.5333333333vw;
  }
}
.keyvisual__artist img {
  width: 1.1625vw;
  height: auto;
}
@media screen and (max-width: 767px) {
  .keyvisual__artist img {
    width: 5.2vw;
  }
}
.keyvisual__text {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8333333333vw;
  letter-spacing: 0.02em;
  line-height: calc(18 / 12);
}
@media screen and (max-width: 767px) {
  .keyvisual__text {
    font-size: 3.2vw;
    letter-spacing: 0.02em;
    line-height: calc(30 / 24);
  }
}
.keyvisual__text span {
  position: absolute;
  left: 21.5277777778vw;
}
@media screen and (max-width: 767px) {
  .keyvisual__text span {
    left: 28.2666666667vw;
  }
}
.keyvisual__text .ext-01 {
  bottom: 8.125vw;
}
@media screen and (max-width: 767px) {
  .keyvisual__text .ext-01 {
    top: 95.0666666667vw;
    bottom: auto;
  }
}
.keyvisual__text .ext-02 {
  bottom: 4.7916666667vw;
}
@media screen and (max-width: 767px) {
  .keyvisual__text .ext-02 {
    top: 109.2vw;
    bottom: auto;
  }
}
.keyvisual__text .ext-03 {
  bottom: -1.6666666667vw;
}
@media screen and (max-width: 767px) {
  .keyvisual__text .ext-03 {
    bottom: 4.6666666667vw;
  }
}
.keyvisual__date {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8333333333vw;
  letter-spacing: 0.02em;
  line-height: calc(18 / 12);
  position: absolute;
  right: 21.875vw;
  bottom: -2.9166666667vw;
}
@media screen and (max-width: 767px) {
  .keyvisual__date {
    font-size: 3.2vw;
    letter-spacing: 0.02em;
    line-height: calc(30 / 24);
    right: 18.2666666667vw;
    bottom: 26.4vw;
  }
}

.intro {
  padding-top: min(153px, 10.625vw);
}
@media screen and (max-width: 767px) {
  .intro {
    padding-top: 9.3333333333vw;
  }
}
.intro .section__inner {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .intro .section__inner {
    display: block;
  }
}
.intro__box {
  display: grid;
  margin-top: min(77px, 5.3472222222vw);
}
@media screen and (max-width: 767px) {
  .intro__box {
    margin-top: 13.0666666667vw;
    margin-left: 11.4666666667vw;
  }
}
.intro__lead {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(20px, 1.3888888889vw);
  letter-spacing: 0.05em;
  line-height: calc(44 / 20);
}
@media screen and (max-width: 767px) {
  .intro__lead {
    font-size: 4vw;
    letter-spacing: 0.05em;
    line-height: calc(60 / 30);
  }
}
.intro__column {
  width: min(820px, 56.9444444444vw);
  display: grid;
  grid-template-columns: min(394px, 27.3611111111vw) min(394px, 27.3611111111vw);
  grid-template-rows: auto 1fr;
  -moz-column-gap: min(34px, 2.3611111111vw);
       column-gap: min(34px, 2.3611111111vw);
  margin-top: min(120px, 8.3333333333vw);
  align-items: flex-start;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(15px, 1.0416666667vw);
  letter-spacing: 0.05em;
  line-height: calc(36 / 15);
}
@media screen and (max-width: 767px) {
  .intro__column {
    display: block;
    width: 100%;
    margin-top: 16vw;
    font-size: 2.9333333333vw;
    letter-spacing: 0.05em;
    line-height: calc(56 / 22);
  }
}
.intro__column .ext-01 {
  grid-column: 1;
  grid-row: 1;
}
.intro__column .ext-02 {
  margin-top: min(51px, 3.5416666667vw);
  grid-column: 1;
  grid-row: 2;
}
@media screen and (max-width: 767px) {
  .intro__column .ext-02 {
    margin-top: 11.4666666667vw;
  }
}
.intro__column .ext-03 {
  grid-column: 2;
  grid-row: 1/span 2;
}
@media screen and (max-width: 767px) {
  .intro__column .ext-03 {
    margin-top: 12.1333333333vw;
  }
}

.release {
  padding-top: min(253px, 17.5694444444vw);
}
@media screen and (max-width: 767px) {
  .release {
    padding-top: 32vw;
  }
}
.release__title.ext-album img {
  width: min(145.18px, 10.0819444444vw);
  height: auto;
}
@media screen and (max-width: 767px) {
  .release__title.ext-album img {
    width: 20vw;
  }
}
.release__title.ext-single {
  grid-column: 1/span 2;
  grid-row: 1;
  z-index: 2;
  height: min(28.2px, 1.9583333333vw);
}
@media screen and (max-width: 767px) {
  .release__title.ext-single {
    height: 3.8666666667vw;
  }
}
.release__title.ext-single img {
  width: min(100.7px, 6.9930555556vw);
  height: auto;
}
@media screen and (max-width: 767px) {
  .release__title.ext-single img {
    width: 14.1333333333vw;
  }
}
.release__album {
  display: grid;
  grid-template-columns: min(459px, 31.875vw) min(558px, 38.75vw);
  grid-template-rows: auto 1fr;
  -moz-column-gap: min(66px, 4.5833333333vw);
       column-gap: min(66px, 4.5833333333vw);
}
@media screen and (max-width: 767px) {
  .release__album {
    display: block;
    margin-left: 11.4666666667vw;
  }
}
.release__album .release__image {
  width: min(459px, 31.875vw);
  grid-column: 1;
  grid-row: 1;
  position: relative;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .release__album .release__image {
    width: 100%;
  }
}
.release__album .release__image img {
  width: min(459px, 31.875vw);
  height: auto;
}
@media screen and (max-width: 767px) {
  .release__album .release__image img {
    width: 100%;
  }
}
.release__album .release__detail {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(10px, 0.6944444444vw);
  letter-spacing: 0.05em;
  line-height: calc(20 / 10);
  grid-column: 1;
  grid-row: 2;
  margin-top: min(24px, 1.6666666667vw);
  color: #BBBBBB;
}
@media screen and (max-width: 767px) {
  .release__album .release__detail {
    font-size: 2.4vw;
    letter-spacing: 0.05em;
    line-height: calc(34 / 18);
    margin-top: 7.0666666667vw;
  }
}
.release__album .release__track {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(13px, 0.9027777778vw);
  letter-spacing: 0.05em;
  line-height: calc(20 / 13);
  grid-column: 2;
  grid-row: 1/span 2;
}
@media screen and (max-width: 767px) {
  .release__album .release__track {
    font-size: 2.9333333333vw;
    letter-spacing: 0.05em;
    line-height: calc(32 / 22);
    margin-top: 8.1333333333vw;
  }
}
.release__album .release__track span {
  font-size: min(10px, 0.6944444444vw);
  letter-spacing: 0.05em;
  line-height: calc(20 / 10);
}
@media screen and (max-width: 767px) {
  .release__album .release__track span {
    font-size: 2.1333333333vw;
    letter-spacing: 0.05em;
    line-height: calc(32 / 16);
  }
}
.release__single {
  margin-top: min(165px, 11.4583333333vw);
  width: min(852px, 59.1666666667vw);
  margin-right: 0;
  margin-left: auto;
  display: grid;
  grid-template-columns: min(359px, 24.9305555556vw) min(427px, 29.6527777778vw);
  grid-template-rows: auto 1fr;
  -moz-column-gap: min(66px, 4.5833333333vw);
       column-gap: min(66px, 4.5833333333vw);
}
@media screen and (max-width: 767px) {
  .release__single {
    width: auto;
    margin-top: 19.2vw;
    margin-left: 11.4666666667vw;
    display: block;
  }
}
.release__single .release__image {
  width: min(359px, 24.9305555556vw);
  grid-column: 1;
  grid-row: 2;
  position: relative;
  align-items: flex-start;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .release__single .release__image {
    width: 55.0666666667vw;
  }
}
.release__single .release__image img {
  width: min(359px, 24.9305555556vw);
  height: auto;
}
@media screen and (max-width: 767px) {
  .release__single .release__image img {
    width: 55.0666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .release__single .release__image .release__listen {
    bottom: 0;
    right: -22.8vw;
  }
}
.release__single .release__detail {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(10px, 0.6944444444vw);
  letter-spacing: 0.05em;
  line-height: calc(20 / 10);
  grid-column: 1;
  grid-row: 3;
  margin-top: min(24px, 1.6666666667vw);
  color: #BBBBBB;
}
@media screen and (max-width: 767px) {
  .release__single .release__detail {
    margin-top: 10.6666666667vw;
    font-size: 2.4vw;
    letter-spacing: 0.05em;
    line-height: calc(34 / 18);
  }
}
.release__single .release__track {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(13px, 0.9027777778vw);
  letter-spacing: 0.05em;
  line-height: calc(20 / 13);
  grid-column: 2;
  grid-row: 2/span 3;
}
@media screen and (max-width: 767px) {
  .release__single .release__track {
    margin-top: 6.2666666667vw;
    font-size: 2.9333333333vw;
    letter-spacing: 0.05em;
    line-height: calc(32 / 22);
  }
}
.release__single .release__track span {
  font-size: min(10px, 0.6944444444vw);
  letter-spacing: 0.05em;
  line-height: calc(20 / 10);
}
@media screen and (max-width: 767px) {
  .release__single .release__track span {
    font-size: 2.1333333333vw;
    letter-spacing: 0.05em;
    line-height: calc(32 / 16);
  }
}
.release__listen {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  font-size: min(14px, 0.9722222222vw);
  letter-spacing: 0.05em;
  line-height: calc(14 / 14);
  position: absolute;
  right: 0;
  bottom: min(-27px, -1.875vw);
  color: #71B3D7;
  display: inline-block;
  padding-left: min(42px, 2.9166666667vw);
  transition: color 0.4s;
}
@media screen and (max-width: 767px) {
  .release__listen {
    font-size: 4vw;
    letter-spacing: 0.05em;
    line-height: 1;
    bottom: -8.2666666667vw;
    padding-left: 5.6vw;
  }
}
.release__listen:before {
  content: "";
  display: inline-block;
  height: 1px;
  width: min(35px, 2.4305555556vw);
  margin-right: min(7px, 0.4861111111vw);
  background: #71B3D7;
  position: absolute;
  transition: background-color 0.2s, transform 0.2s;
  bottom: min(2px, 0.1388888889vw);
  left: 0;
}
@media screen and (max-width: 767px) {
  .release__listen:before {
    width: 4.6666666667vw;
    margin-right: 0.9333333333vw;
    margin-bottom: 0.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .release__listen:hover {
    color: #ffffff;
  }
  .release__listen:hover:before {
    background: #ffffff;
    transform: translate(min(3.5px, 0.2430555556vw), 0);
  }
}

.media {
  margin-top: min(256px, 17.7777777778vw);
}
@media screen and (max-width: 767px) {
  .media {
    margin-top: 32vw;
  }
}
.media__list {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-style: normal;
  font-weight: 400;
  font-size: min(13px, 0.9027777778vw);
  letter-spacing: 0.05em;
  line-height: calc(20 / 13);
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .media__list {
    flex-direction: column;
    margin-top: 13.8666666667vw;
    font-size: 2.4vw;
    letter-spacing: 0.05em;
    line-height: calc(28 / 18);
  }
}
.media__list dt {
  width: min(146px, 10.1388888889vw);
}
@media screen and (max-width: 767px) {
  .media__list dt {
    width: auto;
  }
}
@media screen and (max-width: 767px) {
  .media__list dd {
    margin-top: 8.6666666667vw;
  }
}
.media__list dd a {
  color: #71B3D7;
  text-decoration: underline;
}
.media__list dd + dt {
  margin-top: min(134px, 9.3055555556vw);
}
@media screen and (max-width: 767px) {
  .media__list dd + dt {
    margin-top: 20.2666666667vw;
  }
}
.media__list dd + dt + dd {
  margin-top: min(134px, 9.3055555556vw);
}
@media screen and (max-width: 767px) {
  .media__list dd + dt + dd {
    margin-top: 8.6666666667vw;
  }
}

.movie {
  margin-top: min(217px, 15.0694444444vw);
}
@media screen and (max-width: 767px) {
  .movie {
    margin-top: 32vw;
  }
}

.interview {
  margin-top: min(217px, 15.0694444444vw);
}
@media screen and (max-width: 767px) {
  .interview {
    margin-top: 30.9333333333vw;
  }
}

.comingsoon {
  margin-top: min(111px, 7.7083333333vw);
  padding-left: min(282px, 19.5833333333vw);
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 300;
  font-size: min(26px, 1.8055555556vw);
  letter-spacing: 0.02em;
  line-height: calc(50 / 26);
}
@media screen and (max-width: 767px) {
  .comingsoon {
    margin-top: 7.8666666667vw;
    padding-left: 11.4666666667vw;
    font-size: 3.4666666667vw;
    letter-spacing: 0.02em;
    line-height: calc(50 / 26);
  }
}

/* Utility
----------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .u-sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .u-pc_only {
    display: none !important;
  }
}
.is-disable {
  opacity: 0.3 !important;
  pointer-events: none !important;
}
.is-disable a {
  pointer-events: none !important;
}

.u-breakctrl {
  display: inline-block;
}

.js-lazy {
  opacity: 1;
  transition: opacity 0.4s;
}
.js-lazy[src^="/asset/img/dummy"] {
  opacity: 0;
}

.js-hoverimg {
  display: block;
}
.js-hoverimg img:not(.js-inview), .js-hoverimg img.js-inview.is-animated {
  transition: clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1), opacity 0.6s, transform 0.8s, filter 0.8s;
}
.js-hoverimg img.js-invew.ext-image {
  transition: clip-path 0.6s cubic-bezier(0.75, 0.01, 0.31, 1), opacity 0.6s, transform 0.8s, filter 0.8s;
}
.is-pc .js-hoverimg:hover {
  opacity: 1 !important;
}
.is-pc .js-hoverimg:hover img:not(.js-inview), .is-pc .js-hoverimg:hover img.js-inview.is-animated {
  transform: scale(1.1);
}
.is-pc .js-hoverimg.is-active img {
  transform: scale(1.2);
  filter: blur(10px);
  opacity: 0;
}

.js-inview.ext-float {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-inview.ext-float.is-animated {
  opacity: 1;
  transform: none;
}
.js-inview.ext-fade {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.33, 1, 0.68, 1);
}
.js-inview.ext-fade.is-animated {
  opacity: 1;
}
.js-inview.ext-bounce {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  transition: transform 0.4s cubic-bezier(0.12, 0.74, 0.61, 1.5) 0.1s, opacity 0.2s linear 0s;
}
.js-inview.ext-bounce.is-animated {
  opacity: 1;
  transform: none;
}

/* Animations */
@keyframes float {
  0% {
    transform: translate(0, 2.5%);
  }
  50% {
    transform: translate(0, -2.5%);
  }
  100% {
    transform: translate(0, 2.5%);
  }
}
@keyframes logoFloat {
  0% {
    transform: translate(0, 20%);
  }
  50% {
    transform: translate(0, -20%);
  }
  100% {
    transform: translate(0, 20%);
  }
}
@keyframes dateFloat {
  0% {
    transform: translate(0, 40%);
  }
  50% {
    transform: translate(0, -40%);
  }
  100% {
    transform: translate(0, 40%);
  }
}
@keyframes bgfloat {
  0% {
    background-position: left top;
  }
  50% {
    background-position: left -2%;
  }
  100% {
    background-position: left top;
  }
}
@keyframes bgfloatSp {
  0% {
    background-position: left top;
  }
  50% {
    background-position: left -1%;
  }
  100% {
    background-position: left top;
  }
}
@keyframes objFloat {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 20%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes objFloatSp {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 10%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes waveFloat {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 10%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes waveFloatSp {
  0% {
    transform: translate(0, -20%);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -20%);
  }
}