@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : トップ
===================================================================== */
/* =====================================================================
    mv
======================================================================*/
.mv-date, .mv-catch, .mv-venue, .mv h1 {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1s ease, filter 0.8s ease-in-out;
}

.is-appear {
  opacity: 1 !important;
  filter: blur(0) !important;
}

.mv {
  background-color: #0d0c08;
  z-index: 2;
}
.mv > .inner {
  padding: 16rem 0 7rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .mv > .inner {
    padding: 12rem 0;
    max-width: 1920px;
  }
}
.mv h1 {
  margin-left: calc(222 / 750 * 100%);
  width: calc(267 / 750 * 100%);
}
@media screen and (min-width: 768px) {
  .mv h1 {
    margin-left: calc(737 / 1920 * 100%);
    width: calc(297 / 1920 * 100%);
  }
}
.mv-venue {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(601 / 750 * 100%) 0 0 calc(122 / 750 * 100%);
  width: calc(160 / 750 * 100%);
}
@media screen and (min-width: 768px) {
  .mv-venue {
    margin: calc(646 / 1920 * 100%) 0 0 calc(621 / 1920 * 100%);
    width: calc(160 / 1920 * 100%);
  }
}
.mv-catch {
  position: absolute;
  top: 0;
  right: 0;
  margin: calc(70 / 750 * 100%) calc(42 / 750 * 100%) 0 0;
  width: calc(165 / 750 * 100%);
}
@media screen and (min-width: 768px) {
  .mv-catch {
    margin: calc(65 / 1920 * 100%) calc(557 / 1920 * 100%) 0 0;
    width: calc(193 / 1920 * 100%);
  }
}
.mv-date {
  margin-top: 9.2rem;
}
@media screen and (min-width: 768px) {
  .mv-date {
    position: absolute;
    bottom: 6.3rem;
    right: 0;
    width: 50%;
  }
}

/* =====================================================================
    news
======================================================================*/
.news {
  padding: 16rem 0 22rem;
  background: url(../images/common/bg_pattern01.jpg) repeat top center/12.8rem auto;
}
.news-list {
  border-top: 2px solid #dadada;
}
.news-list li {
  position: relative;
  padding: 3rem 0;
  border-bottom: 2px solid #dadada;
}
@media screen and (min-width: 768px) {
  .news-list li,
  .news-list li a {
    display: flex;
    align-items: center;
  }
}
.news-list li time {
  display: inline-block;
  padding: 0.05em 0.8em 0.15em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 93%;
  color: #ffffff;
  background-color: #c4a300;
}
@media screen and (min-width: 768px) {
  .news-list li time {
    flex-shrink: 0;
    margin-right: 2.5em;
  }
}
.news-list li h3 {
  margin-top: 0.5em;
  line-height: 1.785;
}
@media screen and (min-width: 768px) {
  .news-list li h3 {
    margin-top: 0;
  }
}
.news-list li a h3 {
  text-decoration: underline;
}

/* =====================================================================
    sns
======================================================================*/
.sns {
  padding: 10rem 0;
  background-color: #0d0c08;
  z-index: 1;
}
.sns::before, .sns::after {
  content: "";
  position: absolute;
  display: block;
  top: calc((12rem - 1px) * -1);
  left: 0;
  width: 100%;
  height: 12rem;
  background: url(../images/top/img_wave.png) no-repeat top center/170% 100%;
}
@media screen and (min-width: 768px) {
  .sns::before, .sns::after {
    top: calc((10.9rem - 1px) * -1);
    height: 10.9rem;
    background-size: 100% 100%;
  }
}
.sns::after {
  top: auto !important;
  bottom: calc((12rem - 1px) * -1);
  transform: scale(1, -1);
}
@media screen and (min-width: 768px) {
  .sns::after {
    bottom: calc((10.9rem - 1px) * -1);
  }
}
@media screen and (min-width: 768px) {
  .sns > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
  }
}
.sns-img {
  margin: 0 auto 8rem;
  width: calc(420 / 650 * 100%);
}
@media screen and (min-width: 768px) {
  .sns-img {
    margin: 0;
    width: calc(680 / 1400 * 100%);
  }
}
.sns-img p {
  text-align: right;
  margin: 0.3em 1.5rem 0 0;
  font-size: 1.4rem;
  color: #818181;
}
.sns-slider {
  position: relative;
}
.sns-slider::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 2px solid #0d0c08;
  outline-offset: -1px;
  z-index: 2;
}
.sns-slider::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/img_frame.png) no-repeat center/101% 101%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .sns-right {
    width: calc(600 / 1400 * 100%);
  }
}
.sns-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 6rem;
  width: 6.666em;
  height: 6.666em;
  font-family: "Yuji Syuku", serif;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background-color: #e50015;
  border-radius: 50%;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
@media screen and (min-width: 768px) {
  .sns-ttl {
    margin-bottom: 4.5rem;
    font-size: 144%;
  }
}
.sns-list {
  border-top: 2px solid #c4a300;
}
.sns-list li {
  border-bottom: 2px solid #c4a300;
}
.sns-list li a {
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  padding: 3rem 0;
  padding-right: 2em;
  font-size: 4rem;
}
@media screen and (min-width: 768px) {
  .sns-list li a {
    padding: 3rem 0;
    font-size: 3.2rem;
  }
  .sns-list li a:hover {
    opacity: 1;
  }
  .sns-list li a:hover::after {
    right: 0;
  }
}
.sns-list li a::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0.4em;
  margin: auto 0;
  width: 1.575em;
  height: 0.35em;
  background: url(../images/common/icon_arrow.svg) no-repeat center/contain;
  transition: right 0.3s ease;
}
.sns-list li a span {
  font-weight: 900;
  color: #c4a300;
}
.sns-list li a small {
  margin: 0.09em 0 0 1.1em;
  font-size: 60%;
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  .sns-list li a small {
    margin-left: 3em;
  }
}

/* =====================================================================
    outline
======================================================================*/
.outline {
  padding: 22rem 0 16rem;
}
.outline-list {
  padding: 6rem calc(30 / 650 * 100%);
  background: url(../images/common/bg_pattern01.jpg) repeat top center/12.8rem auto;
}
@media screen and (min-width: 768px) {
  .outline-list {
    padding: 4.5rem calc(30 / 1000 * 100%);
  }
}
.outline-list li {
  position: relative;
  padding-bottom: 4rem;
  line-height: 1.785;
}
@media screen and (min-width: 768px) {
  .outline-list li {
    display: flex;
    padding: 3rem 0;
    border-bottom: 2px solid #dadada;
  }
  .outline-list li:first-child {
    padding-top: 0;
  }
}
.outline-list li:last-child {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .outline-list li:last-child {
    border-bottom: 0;
  }
  .outline-list li:last-child h3::before {
    display: none;
  }
}
.outline-list li h3 {
  position: relative;
  margin-bottom: 0.3em;
  padding-bottom: 0.3em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: #c4a300;
  border-bottom: 2px solid #dadada;
}
@media screen and (min-width: 768px) {
  .outline-list li h3 {
    flex-shrink: 0;
    position: static;
    display: grid;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 12em;
    border-bottom: 0;
  }
}
.outline-list li h3::before {
  content: "";
  position: absolute;
  display: block;
  bottom: -2px;
  left: 0;
  width: 4.1em;
  border-bottom: 2px solid #232323;
}
@media screen and (min-width: 768px) {
  .outline-list li h3::before {
    width: 12em;
  }
}
@media screen and (min-width: 768px) {
  .outline-list li p {
    flex-grow: 1;
  }
}
.outline-list .btn-map {
  position: relative;
  display: inline-block;
  margin: 0.8em 0;
  padding: 0.3em 1.2em;
  padding-right: 2.8em;
  font-size: 80%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  border-radius: 2em;
  letter-spacing: 0.1em;
  color: #c4a300;
  background-color: #ffffff;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .outline-list .btn-map {
    float: right;
    clear: both;
    margin: 0;
  }
}
.outline-list .btn-map::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 1.1em;
  margin: auto 0;
  width: 0.4em;
  height: 0.7em;
  background-color: currentColor;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.outline-map {
  margin-top: 0.5em;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .outline-map {
    width: 367px;
  }
}/*# sourceMappingURL=top.css.map */