@media screen and (max-width: 768px) {
  .only-pc {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .only-sp {
    display: none !important;
  }
}

body {
  color: #3E3A39;
  max-width: 1920px;
  margin: auto;
  font-size: 3.44827586rem;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 2.5rem;
  }
}

.container {
  background-image: url(../img/10th-menari/bg.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #C8EFFC;
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr minmax(auto, 86.20689655rem) 1fr;
}
@media screen and (max-width: 768px) {
  .container {
    display: block;
  }
}
@media screen and (min-width: 1920px) {
  .container {
    background-size: 100%;
  }
}

.sidebar {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
.sidebar-nav {
  margin-left: 6.09195402rem;
}
.sidebar .nav-item {
  background-color: #FFFFFF;
  width: 60%;
  display: flex;
  justify-content: end;
  border-radius: 100vh;
  padding: 1.72413793rem 0;
  margin-bottom: 4.13793103rem;
}
.sidebar .nav-item:last-child {
  margin-bottom: 0;
}
.sidebar .item-img {
  margin-right: 3.44827586rem;
}
.sidebar .item-img.--1 {
  width: 53.1%;
}
.sidebar .item-img.--2 {
  width: 77.9%;
}
.sidebar .item-img.--3 {
  width: 60.3%;
}
.sidebar .item-img.--4 {
  width: 64.9%;
}
.sidebar .item-img.--5 {
  width: 60.3%;
}
.sidebar .item-img.--6 {
  width: 77%;
}

.main-image {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .main-image {
    display: none;
  }
}
.main-content-wrapper {
  background-color: #FFFFFF;
}
.main-content-wrapper .header {
  background-color: #335B95;
  padding: 0 5.05747126rem;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .main-content-wrapper .header {
    padding: 1.1458333333rem 3.6666666667rem;
  }
}
.main-content-wrapper .header-logo {
  width: 27.81609195rem;
}
@media screen and (max-width: 768px) {
  .main-content-wrapper .header-logo {
    width: 20.1666666667rem;
  }
}
@media screen and (max-width: 768px) {
  .main-content-wrapper .header-menu {
    width: 8.2916666667rem;
  }
}

.modals {
  background-color: #335B95;
  display: none;
  position: fixed;
  z-index: 9999;
  top: 9.4375rem;
}
.modals.active {
  display: block;
}
.modals--wrapper {
  overflow: scroll;
}
.modals-list {
  font-size: 3.1666666667rem;
  text-align: center;
  line-height: 3.1833333333rem;
  letter-spacing: 0.4433333333rem;
}
.modals img {
  width: 43%;
  margin: auto;
}
.modals p {
  margin-top: 5.25rem;
  color: #FFF;
}

.fv .lead {
  text-align: center;
}
.fv .lead p {
  margin-top: 6rem;
  line-height: 6.89655172rem;
  letter-spacing: 0.17241379rem;
}
@media screen and (max-width: 768px) {
  .fv .lead p {
    margin-top: 4.35rem;
    line-height: 5rem;
    letter-spacing: 0.125rem;
  }
}
.fv .lead p:first-child {
  margin-top: 0;
}
.fv .lead img {
  margin-top: -5rem;
}
@media screen and (max-width: 768px) {
  .fv .lead img {
    margin-top: -3.625rem;
  }
}

.campaign {
  background-color: #FFF4E3;
  margin-top: 20.77011494rem;
  padding-bottom: 9.31034483rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .campaign {
    margin-top: 8.41666667rem;
    padding-bottom: 6.75rem;
  }
}
.campaign-title {
  width: 95.5%;
  margin: 0 1.95402299rem;
  position: absolute;
  top: -4.4%;
}
@media screen and (max-width: 768px) {
  .campaign-title {
    margin: 0 1.41666667rem;
  }
}
.campaign-lead {
  text-align: center;
  line-height: 6.43678161rem;
  padding-top: 12.29885057rem;
}
@media screen and (max-width: 768px) {
  .campaign-lead {
    line-height: 4.66666667rem;
    padding-top: 8.91666667rem;
  }
}
.campaign .content {
  margin: 5.51724138rem 5.05747126rem 0;
}
@media screen and (max-width: 768px) {
  .campaign .content {
    margin: 4rem 3.66666667rem 0;
  }
}
.campaign .content-wrapper {
  padding: 2.98850575rem;
  background-color: #FFF;
  border-right: solid 4px #335B95;
  border-left: solid 4px #335B95;
  border-bottom: solid 4px #335B95;
}
@media screen and (max-width: 768px) {
  .campaign .content-wrapper {
    padding: 2.16666667rem;
  }
}
.campaign .content .deadline {
  margin-top: 2.98850575rem;
}
@media screen and (max-width: 768px) {
  .campaign .content .deadline {
    margin-top: 2.16666667rem;
  }
}
.campaign .content .detail-link {
  width: 95.7%;
  margin: 2.98850575rem auto 2rem;
}
@media screen and (max-width: 768px) {
  .campaign .content .detail-link {
    margin: 2.16666667rem auto 1.45rem;
  }
}

.interview {
  margin: 14.48275862rem 5.05747126rem 0;
}
@media screen and (max-width: 768px) {
  .interview {
    margin: 10.5rem 3.6666666667rem 0;
  }
}
.interview-title {
  width: 92.6%;
  margin: auto;
}
.interview-img {
  margin-top: 2.29885057rem;
}
@media screen and (max-width: 768px) {
  .interview-img {
    margin-top: 1.6666666667rem;
  }
}
.interview-lead {
  margin: 3.7931034483rem 4.77011494rem 0;
  line-height: 5.86206897rem;
}
@media screen and (max-width: 768px) {
  .interview-lead {
    margin: 2.75rem 3.4583333333rem 0;
    line-height: 4.25rem;
  }
}
.interview-link {
  display: block;
  width: 87%;
  margin: 5.7471264368rem auto 0;
}
@media screen and (max-width: 768px) {
  .interview-link {
    margin: 4.1666666667rem auto 0;
  }
}

.special-title {
  margin-top: 14.94252874rem;
}
@media screen and (max-width: 768px) {
  .special-title {
    margin-top: 10.8333333333rem;
  }
}
.special-wrapper {
  background-color: #335B95;
  padding-bottom: 11.5rem;
}
@media screen and (max-width: 768px) {
  .special-wrapper {
    padding-bottom: 8.3375rem;
  }
}
.special-lead {
  line-height: 6.43678161rem;
  color: #FFF;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .special-lead {
    line-height: 4.6666666667rem;
  }
}
.special .cards {
  margin-top: 1.5rem;
}
@media screen and (max-width: 768px) {
  .special .cards {
    margin-top: 1.0875rem;
  }
}
.special .card {
  margin: 4rem 3rem;
  box-shadow: 0.68965517rem 0.68965517rem 0 0 #F90;
}
@media screen and (max-width: 768px) {
  .special .card {
    margin: 2.9rem 2.175rem;
    box-shadow: 0.5rem 0.5rem 0 0 #F90;
  }
}
.special .card-wrapper {
  border: solid thin;
  padding: 3.56321839rem;
  width: 62.3rem;
  height: 76.124137931rem;
  background-color: #FFF;
}
@media screen and (max-width: 768px) {
  .special .card-wrapper {
    width: 45.1675rem;
    height: 55.19rem;
    padding: 2.5833333333rem;
  }
}
.special .card-title {
  line-height: 4.59770115rem;
  letter-spacing: -0.02rem;
  margin-top: 3.44827586rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 26%;
}
@media screen and (max-width: 768px) {
  .special .card-title {
    margin-top: 2.5rem;
    line-height: 3.3333333333rem;
    letter-spacing: -0.0145rem;
  }
}
.special .card .date {
  text-align: end;
}

.event {
  padding: 9.54022989rem 5.05747126rem 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .event {
    padding: 6.9166666667rem 3.6666666667rem 0;
  }
}
.event-wrapper {
  background-color: #F7EEE0;
  padding: 43rem 0 7.24137931rem;
}
@media screen and (max-width: 768px) {
  .event-wrapper {
    padding: 31.175rem 0 5.25rem;
  }
}
.event-wrapper h2 {
  position: relative;
  font-size: 7.35632184rem;
  line-height: 7.12643678rem;
  letter-spacing: 0.51494253rem;
  color: #B08A38;
  text-align: center;
  padding-bottom: 3.67816092rem;
}
@media screen and (max-width: 768px) {
  .event-wrapper h2 {
    font-size: 5.3333333333rem;
    line-height: 5.1666666667rem;
    letter-spacing: 0.3733333333rem;
    padding-bottom: 2.6666666667rem;
  }
}
.event-wrapper h2:before {
  position: absolute;
  border-bottom: 2px solid #E2D0AE;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 13.79310345rem;
  content: "";
}
@media screen and (max-width: 768px) {
  .event-wrapper h2:before {
    width: 10rem;
  }
}
.event-head {
  position: absolute;
  top: 0;
  left: 0;
}
.event .label {
  width: 38.3%;
}
.event-body {
  background-color: #B08A38;
  color: #FFF;
  text-align: center;
  margin: 4.36781609rem 2.93103448rem 9.31034483rem;
  padding: 2.18390805rem 0 9.08045977rem;
}
@media screen and (max-width: 768px) {
  .event-body {
    margin: 3.1666666667rem 2.125rem 6.75rem;
    padding: 1.5833333333rem 0 6.5833333333rem;
  }
}
.event-body.--2 {
  background-color: #91712C;
}
.event-body:last-child {
  margin-bottom: 0;
}
.event-body .title {
  font-weight: 700;
  font-size: 5.8620689655rem;
  line-height: 6.09195402rem;
  margin-top: 5.40229885rem;
}
@media screen and (max-width: 768px) {
  .event-body .title {
    font-size: 4.25rem;
    line-height: 4.4166666667rem;
    margin-top: 3.9166666667rem;
  }
}
.event-body .lead {
  margin-top: 2.75862069rem;
}
@media screen and (max-width: 768px) {
  .event-body .lead {
    margin-top: 2rem;
  }
}

.history-container {
  position: relative;
}
.history-title {
  width: 78.8%;
  padding: 16.89655172rem 0 2.29885057rem 5.0862069rem;
}
@media screen and (max-width: 768px) {
  .history-title {
    padding: 12.25rem 0 1.6666666667rem 3.6875rem;
  }
}
.history-cta-btn {
  position: absolute;
  bottom: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 77.35%;
}
.history a:hover {
  opacity: 1;
}

.voice {
  margin-top: 9.88505747rem;
}
@media screen and (max-width: 768px) {
  .voice {
    margin-top: 7.1666666667rem;
  }
}
.voice-header {
  margin: 0 5.0574712644rem;
  padding: 1.3793103448rem 0 3.2183908046rem;
  background-color: #FF9900;
  color: #FFF;
  text-align: center;
  line-height: 8.275862069rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .voice-header {
    margin: 0 3.6666666667rem;
    padding: 1rem 0 2.3333333333rem;
    line-height: 6rem;
  }
}
.voice-header:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 3.4482758621rem 2.0114942529rem 0 2.0114942529rem;
  border-color: #FF9900 transparent transparent;
  translate: -50% 100%;
}
@media screen and (max-width: 768px) {
  .voice-header:after {
    border-width: 2.5rem 1.4583333333rem 0 1.4583333333rem;
  }
}
.voice-series {
  font-size: 4.7126436782rem;
}
@media screen and (max-width: 768px) {
  .voice-series {
    font-size: 3.4166666667rem;
  }
}
.voice-title {
  font-size: 6.4367816092rem;
}
@media screen and (max-width: 768px) {
  .voice-title {
    font-size: 4.6666666667rem;
  }
}
.voice-groups {
  margin-top: 7.1264367816rem;
}
@media screen and (max-width: 768px) {
  .voice-groups {
    margin-top: 5.1666666667rem;
  }
}
.voice-groups img {
  margin: 0 2rem;
}
@media screen and (max-width: 768px) {
  .voice-groups img {
    margin: 0 1.45rem;
  }
}

.partner {
  margin-top: 16.55172414rem;
}
@media screen and (max-width: 768px) {
  .partner {
    margin-top: 12rem;
  }
}
.partner-content {
  position: relative;
}
.partner .partner-img--4, .partner .partner-img--3, .partner .partner-img--2, .partner .partner-img--1 {
  position: absolute;
}
.partner-img--1 {
  width: 35%;
  top: 1.5%;
  right: 0;
}
.partner-img--2 {
  width: 32.8%;
  top: 11%;
  left: 0;
}
.partner-img--3 {
  width: 33.7%;
  top: 24%;
  right: 0;
}
.partner-img--4 {
  width: 43.1%;
  top: 28%;
  left: 0;
}
.partner-description {
  width: 100%;
  position: absolute;
  bottom: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 6.89655172rem;
  letter-spacing: 0.17241379rem;
}
@media screen and (max-width: 768px) {
  .partner-description {
    line-height: 5rem;
    letter-spacing: 0.125rem;
  }
}
.partner-description p {
  margin-bottom: 7.2rem;
}
@media screen and (max-width: 768px) {
  .partner-description p {
    margin-bottom: 5.22rem;
  }
}
.partner-description p:last-child {
  margin-bottom: 0;
}
.partner-staff {
  display: flex;
  align-items: center;
}
.partner-staff .staff-photo {
  width: 57.2%;
}
.partner-staff .staff-signature {
  flex: auto;
  text-align: center;
}

.info-container {
  padding: 0 6.95402299rem;
}
@media screen and (max-width: 768px) {
  .info-container {
    padding: 0 5.0416666667rem;
  }
}
.info-logo {
  width: 79.2%;
  margin: auto;
}
.info-message {
  font-size: 4.25287356rem;
  line-height: 7.24137931rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .info-message {
    font-size: 3.0833333333rem;
    line-height: 5.25rem;
  }
}
.info-box {
  background-color: #F8F1E8;
  margin-top: 6.09195402rem;
  padding: 6.20689655rem 6.20689655rem 7.70114943rem;
  border-radius: 4.82758621rem;
}
@media screen and (max-width: 768px) {
  .info-box {
    margin-top: 4.4166666667rem;
    padding: 4.5rem 4.5rem 5.5833333333rem;
  }
}
.info-box-title {
  font-size: 4.25287356rem;
  line-height: 7.24137931rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .info-box-title {
    font-size: 3.0833333333rem;
    line-height: 5.25rem;
  }
}
.info .email {
  margin-top: 7.01149425rem;
}
@media screen and (max-width: 768px) {
  .info .email {
    margin-top: 5.0833333333rem;
  }
}
.info .email-label {
  line-height: normal;
  letter-spacing: 0.34482759rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .info .email-label {
    letter-spacing: 0.25rem;
  }
}
.info .email-link {
  width: 96.2%;
  margin: 2.29885057rem auto 0;
}
@media screen and (max-width: 768px) {
  .info .email-link {
    margin: 1.6666666667rem auto 0;
  }
}
.info .line {
  margin-top: 6.66666667rem;
}
@media screen and (max-width: 768px) {
  .info .line {
    margin-top: 4.8333333333rem;
  }
}
.info .line-label {
  line-height: normal;
  letter-spacing: 0.34482759rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .info .line-label {
    letter-spacing: 0.25rem;
  }
}
.info .line-link {
  width: 96.2%;
  margin: 2.29885057rem auto 0;
}
@media screen and (max-width: 768px) {
  .info .line-link {
    margin: 1.6666666667rem auto 0;
  }
}
.info-footer {
  margin-top: 12.183908046rem;
  margin-top: 8.8333333333rem;
}
.arrow_box {
  position: relative;
}

.next-arrow, .prev-arrow {
  width: 11.83908046rem;
  height: 11.83908046rem;
  position: absolute;
  top: 32rem;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .next-arrow, .prev-arrow {
    width: 8.5833333333rem;
    height: 8.5833333333rem;
    top: 23.2rem;
  }
}

.prev-arrow {
  left: 4.5rem;
}
@media screen and (max-width: 768px) {
  .prev-arrow {
    left: 3.2625rem;
  }
}

.next-arrow {
  right: 4.5rem;
}
@media screen and (max-width: 768px) {
  .next-arrow {
    right: 3.2625rem;
  }
}