@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top_common.css
Description : 共通トップ
===================================================================== */
@keyframes mask-tl {
  from {
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
  }
  to {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
@keyframes mask-br {
  from {
    -webkit-mask-position: -100% 100%;
            mask-position: -100% 100%;
  }
  to {
    -webkit-mask-position: 100% 0%;
            mask-position: 100% 0%;
  }
}
@keyframes mask-none {
  to {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes huwahuwa {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
@keyframes kurukuru {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
body::after {
  content: "";
  position: absolute;
  display: block;
  top: 17rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 115.3rem;
  background: url(../images/common/bg_shosoin.png) no-repeat top center/cover;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  body::after {
    top: 22.3rem;
  }
}

/* =====================================================================
    follow-content
======================================================================*/
.follow-content {
  font-size: 2.8rem;
}
.follow-content a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  margin-bottom: 0.5em;
  padding: 1.2em 0;
  width: 2.5em;
  min-height: 5.71em;
  background: url(../images/common/bg_btn_venue.png) no-repeat center/100% 100%;
  filter: drop-shadow(0 2.2rem 4.5rem rgba(66, 23, 77, 0.3));
}
.follow-content a span {
  white-space: nowrap;
  writing-mode: vertical-lr;
  display: inline-block;
  font-weight: bold;
  background: linear-gradient(45deg, #b1fcf6 0%, #ffffff 50%, #f7c6d1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.follow-content a .en {
  margin-left: 0.2em;
  font-family: "Barlow", sans-serif;
  font-size: 57%;
}
@media screen and (min-width: 768px) {
  .follow-content a {
    transition-property: background-image;
  }
  .follow-content a:hover {
    opacity: 1;
    background-image: url(../images/common/bg_btn_venue_h.png);
  }
}
.follow-content a.nolink {
  filter: grayscale(1) brightness(300%);
  pointer-events: none;
}
.follow-content a.nolink span {
  filter: grayscale(1) opacity(0.2);
}

/* =====================================================================
    opening
======================================================================*/
.opening {
  position: relative;
  width: 100%;
  height: 200vh;
  overflow-x: hidden;
}
.opening-phase01 {
  position: absolute;
  width: 100%;
  height: 100vh;
}
.opening-phase01 > * {
  position: absolute;
  top: -24rem;
  transition: transform 1s cubic-bezier(0, 0, 0.2, 1);
}
@media screen and (min-width: 768px) {
  .opening-phase01 > * {
    top: -14rem;
  }
}
.opening-phase01.is-appear > * {
  transform: translate(0, 0);
}
.opening-phase01-l {
  width: 50rem;
  left: -20rem;
  transform: translate(-40rem, -30rem);
}
@media screen and (min-width: 768px) {
  .opening-phase01-l {
    width: 64.6rem;
    left: -5rem;
  }
}
.opening-phase01-r {
  width: 49rem;
  right: -20rem;
  transform: translate(40rem, -30rem);
}
@media screen and (min-width: 768px) {
  .opening-phase01-r {
    width: 59.9rem;
    right: -5rem;
  }
}
.opening-phase02 {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.opening-phase02.is-appear {
  animation: fadeIn 2s ease forwards;
}
.opening-phase02-biwa {
  position: relative;
  width: calc(400 / 750 * 100%);
}
.opening-phase02-biwa img {
  animation: huwahuwa 2s infinite alternate ease-in-out;
  will-change: transform;
}
.opening-phase02-biwa::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  margin-bottom: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  padding-top: 5%;
  background: rgba(88, 31, 102, 0.75);
  border-radius: 50%;
  filter: blur(3rem);
}
@media screen and (min-width: 768px) {
  .opening-phase02-biwa {
    margin-left: calc(-580 / 1920 * 100%);
    width: calc(320 / 1920 * 100%);
    transition: margin-left 1s ease;
  }
}
.opening-phase02-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 8rem auto 0;
  width: calc(450 / 750 * 100%);
  z-index: 1;
}
.opening-phase02-logo #logo_white_beta {
  fill: transparent;
}
.is-appear .opening-phase02-logo #logo_white_beta {
  animation: fill 2s ease-in-out 1s forwards;
}

@media screen and (min-width: 768px) {
  .opening-phase02-logo {
    left: auto;
    top: 50%;
    transform: translateY(-45%);
    margin: 0 calc(512 / 1920 * 100%) 0 0;
    width: calc(537 / 1920 * 100%);
  }
}
@media screen and (min-width: 768px) {
  .is-scroll .opening-phase02-biwa {
    margin-left: 0;
  }
}
.is-scroll .opening-phase02-biwa img {
  animation-play-state: paused;
}

@keyframes fill {
  0% {
    fill: transparent;
  }
  100% {
    fill: #000000;
  }
}
/* =====================================================================
    biwa
======================================================================*/
.biwa {
  position: relative;
  width: 100%;
  min-height: 100vh;
}
.biwa-wrap {
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
}
.biwa-wrap-inner, .biwa-wrap-fix {
  aspect-ratio: 1/2.271;
}
.biwa-wrap-inner > *, .biwa-wrap-fix > * {
  position: absolute;
}
.biwa-wrap-inner {
  position: relative;
  width: calc(400 / 750 * 100%);
}
.biwa-wrap-inner > * {
  transition: opacity 0.5s ease;
}
@media screen and (min-width: 768px) {
  .biwa-wrap-inner {
    width: calc(320 / 1920 * 100%);
  }
}
.biwa-wrap-fix {
  position: absolute;
  top: 35vh;
  width: 100%;
  height: 100%;
  transform: scale(0.5) translateY(-50%);
}
@media screen and (min-width: 768px) {
  .biwa-wrap-fix {
    top: 25vh;
  }
}
.biwa-wrap-fix > * {
  opacity: 0;
  top: 25%;
  transition-delay: 1s;
  transition: transform 1s ease;
}
.is-slide .biwa-wrap-fix > * {
  opacity: 1;
}

.biwa-parts01 {
  width: 100%;
}
.biwa-parts01 img {
  transition: transform 1s ease;
  transform-origin: center center;
}
.is-slide .biwa-parts01 {
  opacity: 0;
}
.is-slide .biwa-parts01 img {
  transform: scale(2);
}

.biwa-parts03 {
  width: calc(390 / 750 * 100%);
  transform: translateX(-100%);
}
.is-slide .biwa-parts03 {
  transform: translateX(-65%);
}
@media screen and (min-width: 768px) {
  .is-slide .biwa-parts03 {
    width: calc(488 / 1920 * 100%);
    transform: translateX(-50%);
  }
}

.biwa-parts04 {
  left: auto;
  right: 0;
  width: calc(379 / 750 * 100%);
  transform: translateX(100%);
}
.is-slide .biwa-parts04 {
  transform: translateX(68%);
}
@media screen and (min-width: 768px) {
  .is-slide .biwa-parts04 {
    width: calc(474 / 1920 * 100%);
    transform: translateX(50%);
  }
}

/* =====================================================================
    history
======================================================================*/
.history {
  padding: 10vh 0;
}
.history-wrap {
  position: relative;
}
.history-wrap::before {
  content: "";
  position: absolute;
  display: block;
  top: 25vh;
  right: -54.4rem;
  width: 140rem;
  height: 14rem;
  background: url(../images/common/img_cloud01.png) no-repeat center/contain;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .history-wrap::before {
    right: -23.5rem;
  }
}
.history-wrap::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 25vh;
  left: -28.9rem;
  width: 108.3rem;
  height: 15.6rem;
  background: url(../images/common/img_cloud02.png) no-repeat center/contain;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .history-wrap::after {
    left: -11.5rem;
  }
}
.history-list {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .history-list li:not(:last-child) {
    margin-bottom: 12vh;
  }
}
.history-list li:nth-child(1) {
  margin-left: calc(60 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .history-list li:nth-child(1) {
    margin-left: calc(100 / 1280 * 100%);
  }
}
.history-list li:nth-child(2) {
  margin-left: calc(380 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .history-list li:nth-child(2) {
    margin-left: calc(1000 / 1280 * 100%);
  }
}
.history-list li:nth-child(3) {
  margin-left: calc(100 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .history-list li:nth-child(3) {
    margin-left: calc(557 / 1280 * 100%);
  }
}
.history-list-inner {
  width: 100%;
  opacity: 0;
}
.history-list-inner h3 {
  font-size: 5.6rem;
  font-weight: bold;
  line-height: 1.4;
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
}
.history-list-inner h3 em {
  font-style: normal;
  font-size: 130%;
}
.history-exhibit {
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.history-exhibit [class^=exhibit] {
  position: absolute;
  display: flex;
  justify-content: center;
  font-size: 3.6rem;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .history-exhibit [class^=exhibit] {
    font-size: 4rem;
  }
}
.history-exhibit [class^=exhibit] img {
  height: 100%;
  filter: drop-shadow(0 0.3rem 0.6rem rgba(66, 23, 77, 0.3));
}
.history-exhibit [class^=exhibit] p {
  position: relative;
  margin: 0 0.8em;
  padding-top: 0.55em;
  flex-shrink: 0;
  color: #d7ced9;
  line-height: 1.25;
  writing-mode: vertical-rl;
  opacity: 0.7;
}
.history-exhibit [class^=exhibit] p span {
  position: absolute;
  display: block;
  top: 0;
  right: -0.6em;
  font-size: 33%;
  writing-mode: horizontal-tb;
  white-space: nowrap;
}
.history-exhibit .exhibit01,
.history-exhibit .exhibit04,
.history-exhibit .exhibit05 {
  flex-direction: row-reverse;
}
.history-exhibit .exhibit01 {
  top: -10%;
  right: 0;
  margin-right: calc(-140 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .history-exhibit .exhibit01 {
    margin-right: calc(300 / 1280 * 100%);
  }
}
.history-exhibit .exhibit01 img {
  width: 10em;
}
.history-exhibit .exhibit02 {
  top: 0;
  right: 0;
  margin-right: calc(-40 / 640 * 100%);
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .history-exhibit .exhibit02 {
    margin-right: 0;
  }
}
.history-exhibit .exhibit02 img {
  width: 10em;
}
.history-exhibit .exhibit03 {
  top: 30%;
  left: 0;
  margin-left: calc(40 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .history-exhibit .exhibit03 {
    margin-left: calc(320 / 1280 * 100%);
  }
}
.history-exhibit .exhibit03 img {
  width: 7em;
}
.history-exhibit .exhibit04 {
  top: 45%;
  left: 0;
}
.history-exhibit .exhibit04 img {
  width: 10em;
}
.history-exhibit .exhibit05 {
  top: 70%;
  right: 0;
  margin-right: calc(-40 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .history-exhibit .exhibit05 {
    margin-right: 0;
  }
}
.history-exhibit .exhibit05 img {
  width: 6.97em;
}
@media screen and (min-width: 768px) {
  .history .inner {
    padding: 0;
  }
}

/* =====================================================================
    catch
======================================================================*/
@keyframes gradient-animation {
  0% {
    stop-color: #d4c7b4;
  }
  20% {
    stop-color: #f7fffe;
  }
  50% {
    stop-color: #c0f0ec;
  }
  65% {
    stop-color: #ebd3d8;
  }
  90% {
    stop-color: #fcefca;
  }
  100% {
    stop-color: #d4c7b4;
  }
}
@keyframes gradient-animation-end {
  0% {
    filter: none;
  }
  100% {
    filter: invert(1) grayscale(1) contrast(1);
  }
}
.catch {
  display: grid;
  align-items: center;
  padding: 10vh 0 30vh;
  min-height: 100vh;
}
.catch-text {
  margin: -10vh auto 0;
  width: calc(540 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .catch-text {
    width: calc(846 / 1080 * 100%);
  }
}
.catch-text stop {
  animation: gradient-animation 4s ease-out infinite;
}
.catch-text.is-appear svg {
  animation: gradient-animation-end 1s ease 0.8s forwards;
}

/* =====================================================================
    comment
======================================================================*/
.comment {
  padding: 0 0 10vh;
}
@media screen and (max-width: 767px) {
  .comment-list {
    margin: 0 auto;
    width: calc(530 / 640 * 100%);
  }
}
.comment-list li {
  position: relative;
}
.comment-list li:not(:last-child) {
  margin-bottom: 8vh;
}
@media screen and (min-width: 768px) {
  .comment-list-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.comment-list-inner.is-appear .sec-ttl {
  animation: mask-tl 1s linear forwards alternate;
}
.comment-list-inner.is-appear .comment-list-content {
  animation: fadeIn 0.8s 1s ease forwards alternate;
}
.comment-list .sec-ttl {
  flex-direction: column-reverse;
  -webkit-mask-size: 350% 250%;
          mask-size: 350% 250%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(135deg, black 30%, rgba(0, 0, 0, 0.4) 45%, transparent 55%, transparent 100%);
          mask-image: linear-gradient(135deg, black 30%, rgba(0, 0, 0, 0.4) 45%, transparent 55%, transparent 100%);
  -webkit-mask-position: 100% 100%;
          mask-position: 100% 100%;
}
@media screen and (min-width: 768px) {
  .comment-list .sec-ttl {
    flex-direction: column;
    justify-content: space-between;
    width: 5em;
    margin-left: 0;
    writing-mode: vertical-lr;
  }
}
.comment-list-content {
  position: relative;
  font-size: 106%;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .comment-list-content {
    width: calc(770 / 1080 * 100%);
    font-size: 100%;
  }
}
.comment-list-content p .name {
  display: block;
  text-align: right;
  margin-top: 1.5em;
  line-height: 1.625;
}

/* =====================================================================
    venue
======================================================================*/
@keyframes bg-up {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@keyframes bg-slide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.venue {
  padding: 12rem 0;
  z-index: 1;
}
.venue::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(46, 230, 214, 0.5);
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0.4rem 0 0.4rem 0;
}
.venue.is-appear::before {
  animation: bg-up 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards alternate;
}
.venue-deco01, .venue-deco02 {
  position: absolute;
  filter: drop-shadow(0 2.2rem 4.5rem rgba(66, 23, 77, 0.3));
  transition: transform 2s ease;
  transition-delay: 0.5s;
  pointer-events: none;
}
.venue-deco01.is-appear, .venue-deco02.is-appear {
  transform: translate(0, 0);
}
.venue-deco01 img, .venue-deco02 img {
  animation: huwahuwa 1.5s infinite alternate ease-in-out;
}
.venue-deco01 {
  top: -12rem;
  left: -8rem;
  width: 30.5rem;
  transform: translate(-150%, -20%);
}
@media screen and (min-width: 768px) {
  .venue-deco01 {
    top: -5.8rem;
    left: auto;
    right: 9.5rem;
    transform: translate(150%, -30%);
  }
}
.venue-deco02 {
  bottom: -16rem;
  right: -8.3rem;
  width: 31.3rem;
  transform: translate(150%, 25%);
}
.venue-deco02 img {
  animation-delay: 0.5s;
}
@media screen and (min-width: 768px) {
  .venue-deco02 {
    bottom: -5.6rem;
    right: auto;
    left: 8.7rem;
    transform: translate(-150%, 30%);
  }
}
@media screen and (min-width: 768px) {
  .venue .inner {
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .venue-list {
    display: flex;
    justify-content: space-between;
    margin-left: calc(-40 / 1280 * 100%);
    width: calc(1360 / 1280 * 100%);
  }
}
.venue-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .venue-list li:not(:last-child) {
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .venue-list li {
    width: 47.4264705882%;
  }
}
.venue-list-ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 0;
  width: 12rem;
  font-size: 3.2rem;
  writing-mode: vertical-lr;
  gap: 0.3em 0;
  background: url(../images/top_common/bg_ttl_venue.png) no-repeat center/100% 100%;
}
.venue-list-ttl .ja {
  font-weight: bold;
}
.venue-list-ttl .en {
  font-family: "Barlow", sans-serif;
  font-size: 50%;
  letter-spacing: 0.3em;
  color: #ff3355;
}
.venue-list-desc {
  width: calc(490 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .venue-list-desc {
    width: 75.9689922481%;
    font-size: 2.8rem;
  }
}
.venue-list-desc .date {
  font-size: 80%;
  font-weight: bold;
}
.venue-list-desc .date em {
  font-style: normal;
  font-size: 175%;
  color: #ff3355;
  line-height: 1.2;
}
.venue-list-desc .name {
  font-weight: bold;
}
.venue-list .btn01 {
  margin-top: 2rem;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  opacity: 0;
}
.venue-list .btn01.is-appear {
  animation: fadeIn 1.2s 1s ease-in forwards alternate;
}

/* =====================================================================
    sns
======================================================================*/
.sns {
  padding-top: 16rem;
}
.sns::before {
  width: 0;
}
.sns.is-appear::before {
  animation: bg-slide 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards alternate;
}
.sns-ttl {
  opacity: 0;
}
.sns-ttl.is-appear {
  animation: fadeIn 1s 1s ease forwards;
}
.sns-widget {
  opacity: 0;
}
.sns-widget.is-appear {
  animation: fadeIn 1s ease forwards;
}
.sns-list-wrap {
  opacity: 0;
}
.sns-list-wrap.is-appear {
  animation: fadeIn 1s 0.5s ease forwards;
}/*# sourceMappingURL=top_common.css.map */