@charset "UTF-8";
/* CSS Document */

/* 終了告知文 */
.Post {
  font-size: 22px;
  font-weight: 600;
  color: #c00;
  text-align: center;
  margin-top: 10px;
}
/* contents */
.contents {
  font-family: "Noto Sans JP", sans-serif;
  --font-zen: "Zen Old Mincho", serif;
  --font-ibarra: "Ibarra Real Nova", serif;
  --domestic-main: #cf1f2e;
  --domestic-sub: #fae4e4;
  --oversea-main: #0e4eb5;
  --oversea-sub: #e0e4fc;
  --green: #007283;
}
/* H1 */
#PageName {
  width: 1024px;
  margin: 10px auto;
  font-weight: bold;
}
/* swiper */
.swiper-container-outer {
  position: relative;
}

.swiper-wrapper {
  margin-bottom: 30px;
}

.swiper-button-prev {
  top: calc(50% - 15px);
  left: -25px;
}

.swiper-button-next {
  top: calc(50% - 15px);
  right: -25px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: none;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  background:
    url(/attending/crystal/25anniversary/common/images/ico_swiper-arrow01.svg) no-repeat center left calc(50% + 2px) / 11px 17px,
    #333333cc;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
}

.swiper-button-prev {
  scale: -1 1;
}

.swiper-button-prev:active,
.swiper-button-next:active {
  transition: all 0.3s;
  opacity: 0.5;
}

.swiper-horizontal > .swiper-scrollbar {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
}

.swiper-outer__btn {
  display: block;
  max-width: 600px;
  margin-inline: auto;
  padding-block: 22px;
  border: 4px solid #fff;
  border-radius: 10vh;
  box-shadow: 0 2px 10px rgb(101 83 69/0.35);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  transition: opacity 0.3s;
}

.swiper-outer__btn:hover {
  opacity: 0.7;
}
/* swiper_end */

/* sec-ttl */
.sec-ttl-wrapper {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}

.sec-ttl-wrapper--tour {
  padding: 0;
  border: 0;
  margin-bottom: 12px;
}

.sec-ttl__ico {
  width: 82px;
  height: 65px;
  position: relative;
  padding-top: 13px;
  margin: 0 auto 12px;
}

.sec-ttl__ico__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sec-ttl__ico__txt {
  color: #ba9955;
  font-size: 2.4rem;
  font-weight: 700;
  font-style: italic;
  font-family: var(--font-ibarra);
  line-height: 1.3;
  letter-spacing: 0;
}

.contents--domestic .sec-ttl__ico__txt {
  color: var(--domestic-main);
}

.contents--oversea .sec-ttl__ico__txt {
  color: var(--oversea-main);
}

.sec-ttl {
  font-size: 3.6rem;
  font-weight: 700;
  font-family: var(--font-zen);
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: transparent;
  background: linear-gradient(to bottom, #000 0%, #000 40%, #767a7b 100%) repeat-y center top/100% 1lh;
  -webkit-background-clip: text;
  background-clip: text;
}

.sec-txt {
  color: transparent;
  background: linear-gradient(to bottom, #000 0%, #000 40%, #767a7b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: var(--font-zen);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}
/* sec-ttl_end */

/* MV */
.mv {
  position: relative;
  height: 375px;
  overflow: hidden;
}

.mv__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv__ttl {
  width: 609px;
  height: 609px;
  position: absolute;
  top: calc(50% - 295px);
  left: 50%;
  translate: -50% 0;
  z-index: 1;
}

.mv__img-wrapper {
  position: absolute;
  aspect-ratio: 1/1;
}

.mv__img-wrapper--01 {
  width: 393px;
  /* top: calc(50% - 238px); */
  top: calc(50% - 237px);
  /* left: calc(50% - 780px); */
  left: calc(50% - 750px);
}

.mv__img-wrapper--02 {
  width: 362px;
  top: calc(50% - 367px);
  left: calc(50% - 475px);
}

.mv__img-wrapper--03 {
  width: 426px;
  top: calc(50% - 26px);
  left: calc(50% - 558px);
}

.mv__img-wrapper--04 {
  width: 428px;
  top: calc(50% - 402px);
  /* left: calc(50% + 134px); */
  left: calc(50% + 114px);
}

.mv__img-wrapper--05 {
  width: 328px;
  top: calc(50% + 23px);
  /* left: calc(50%  + 141px); */
  left: calc(50% + 133px);
}

.mv__img-wrapper--06 {
  width: 386px;
  /* top: calc(50% - 149px); */
  top: calc(50% - 154px);
  /* left: calc(50%  + 381px); */
  left: calc(50% + 341px);
}

.mv__img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity var(--mv-fade-time, 1s) ease-in-out,
    filter var(--mv-fade-time, 1s) ease-in-out;
}

.mv__img.is-active,
.mv__img:last-child {
  opacity: 1;
  filter: blur(0);
}

.mv__img-wrapper.is-ready .mv__img:last-child:not(.is-active) {
  opacity: 0;
  filter: blur(4px);
}
/* MV_end */

/* lead */
.lead {
  background: linear-gradient(to right, #056574 0%, #1f7f8e 50%, #056574 100%);
  padding-block: 16px 15px;
  font-family: var(--font-zen);
  text-align: center;
}

.lead__ttl {
  max-width: 900px;
  margin: 0 auto 8px;
  color: #1f7f8e;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.05em;
  padding-block: 0.6rem;
  background: linear-gradient(to right, #ffffff00 0%, #fff 12%, #fff 88%, #ffffff00 100%);
}

.lead__txt {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.05em;
}
/* lead_end */

/* anchor-nav */
.anchor-nav {
  background: url(/attending/crystal/25anniversary/common/images/bg_anchor01.jpg) no-repeat center/cover;
  padding-block: 32px;
  margin-top: 40px;
}

.anchor-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.anchor-nav__list__item {
  width: calc(calc(100% - 32px) / 5);
}

.anchor-nav__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  border-radius: 8px;
  box-shadow: 0 6px 8px #0000001a;
  background-size: 100% 200%;
  padding: 14px 12px 14px 24px;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  font-family: var(--font-zen);
  line-height: 1.6;
  letter-spacing: 0.05em;
  transition: background-position 0.5s ease;

  &::after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background: url(/attending/crystal/25anniversary/common/images/ico_arrow02.svg) no-repeat center/12px;
    flex: 0 0 auto;
    transition: translate 0.5s ease;
  }

  &:hover {
    background-position: top 100% left 0;

    &::after {
      translate: 0 8px;
    }
  }
}

.contents--domestic .anchor-nav__btn {
  background-image: linear-gradient(to bottom, #d32130 0%, #d32130 25%, #c01c2a 25%, #c01c2a 75%, #d32130 75%, #d32130 100%);
}

.contents--oversea .anchor-nav__btn {
  background-image: linear-gradient(to bottom, #124eb0 0%, #124eb0 25%, #0b4199 25%, #0b4199 75%, #124eb0 75%, #124eb0 100%);
}
/* anchor-nav_end */

/* sec--tour */
.sec--tour {
  padding-block: 80px;
}

.contents--domestic .sec--tour:nth-of-type(even) {
  background: url(/attending/crystal/25anniversary/kokunai/images/bg_tour01.jpg) no-repeat center/cover;
}

.contents--oversea .sec--tour:nth-of-type(even) {
  background: url(/attending/crystal/25anniversary/kaigai/images/bg_tour01.jpg) no-repeat center/cover;
}

.sec-tour__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sec-tour__swiper-outer {
  .sec-tour__swiper {
    overflow: hidden;
  }

  .sec-tour__list {
    display: flex;
    gap: initial;

    .swiper-slide {
      height: auto;
    }
  }
}

.contents-bot .sec-tour__swiper-outer {
  .sec-tour__list {
    display: grid;
    gap: 16px;
    margin-bottom: 0;
  }

  .swiper-scrollbar,
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

.sec-tour__list__item {
  height: 100%;
}

.sec-tour__list__link {
  display: grid;
  height: 100%;
  grid-template-rows: auto auto auto auto auto 1fr;
  padding: 0 11px 11px;
  border: 1px solid #d8dadc;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.7;
  }
}

.sec-tour__list__img {
  width: calc(100% + 22px);
  margin: 0 -11px 12px;
  object-fit: cover;
}

.sec-tour__list__dest {
  padding: 5px 8px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-bottom: 4px;

  span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }
}

.sec-tour__list__tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.sec-tour__list__tag {
  display: grid;
  align-items: center;
  min-height: 100%;
  padding: 4px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-align: center;

  span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }
}

.sec-tour__list__ttl {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.sec-tour__list__txt {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.sec-tour__list__txt {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.sec-tour__list--domestic {
  .sec-tour__list__dest {
    background: var(--domestic-main);
  }

  .sec-tour__list__tag {
    background: var(--domestic-sub);
    color: var(--domestic-main);
  }
}

.sec-tour__list--oversea {
  .sec-tour__list__dest {
    background: var(--oversea-main);
  }

  .sec-tour__list__tag {
    background: var(--oversea-sub);
    color: var(--oversea-main);
  }
}

.sec-tour__list__price {
  color: #db2100;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: right;
  align-self: end;
}

.sec-tour-btn {
  display: flex;
  align-items: center;
  width: 600px;
  margin: 42px auto 0;
  padding: 16px 24px 16px 40px;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  font-family: var(--font-zen);
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 6px 8px #0000001a;
  transition: background-position 0.5s ease;

  &.sec-tour-btn--domestic {
    background: linear-gradient(to bottom, #d32130 0%, #d32130 25%, #c01c2a 25%, #c01c2a 75%, #d32130 75%, #d32130 100%) no-repeat top/100% 200%;
  }

  &.sec-tour-btn--oversea {
    background: linear-gradient(to bottom, #124eb0 0%, #124eb0 25%, #0b4199 25%, #0b4199 75%, #124eb0 75%, #124eb0 100%) no-repeat top/100% 200%;
  }

  &:hover {
    background-position: top 100% left 0;

    .sec-tour-btn__ico {
      translate: 8px 0;
    }
  }
}

.sec-tour-btn__txt {
  flex-grow: 1;
}

.sec-tour-btn__ico {
  display: block;
  width: 25px;
  height: 25px;
  background: url(/attending/crystal/25anniversary/common/images/ico_arrow01.svg) no-repeat center/10px;
  transition: translate 0.5s ease;
}

.sec--tour--oversea {
  position: relative;
}

.sec--tour--oversea__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* sec--tour_end */

/* sec--departure */
.sec--departure {
  padding-bottom: 80px;
}

.lead + .sec--departure {
  padding-top: 80px;
}

.sec--departure__box {
  border: 1px solid #000;
  padding: 40px;
}

.sec--departure__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 2.4rem;
  margin-bottom: 2.4rem;

  &::before,
  &::after {
    content: "";
    display: block;
    width: 22px;
    height: 32px;
    mask-image: url(/attending/crystal/25anniversary/common/images/img_departure01.png);
    mask-size: cover;
  }

  &::before {
    scale: -1 1;
  }
}

.contents--domestic {
  .sec--departure__ttl {
    &::before,
    &::after {
      background: var(--domestic-main);
    }
  }
}

.contents--oversea {
  .sec--departure__ttl {
    &::before,
    &::after {
      background: var(--oversea-main);
    }
  }
}

.sec--departure__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.sec--departure__list__link {
  display: flex;
  gap: 6px;
  align-items: center;
  transition: opacity 0.3s;

  &::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: url(/attending/crystal/25anniversary/common/images/ico_arrow01.svg) no-repeat center left 6px/5px;
    transition: translate 0.5s ease;
  }

  &:hover {
    opacity: 0.7;

    &::after {
      translate: 4px;
    }
  }
}

.contents--domestic .sec--departure__list__link::after {
  background-color: var(--domestic-main);
}

.contents--oversea .sec--departure__list__link::after {
  background-color: var(--oversea-main);
}
/* sec--departure_end */

/* sec--search */
.sec--search {
  position: relative;
  padding-block: 100px;
}

.sec--search__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
/* sec--search_end */

/* sec--links */
.sec--links {
  padding-block: 100px;
}

.sec--links__inner {
  max-width: 900px;
  margin-inline: auto;
}

.sec--links__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 66px;
}

.sec--links__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 16px 40px;
  border-radius: 8px;
  box-shadow: 0 6px 8px #0000001a;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  font-family: var(--font-zen);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  transition: background-position 0.5s ease;

  &.sec--links__btn--oversea {
    background: linear-gradient(to bottom, #124eb0 0%, #124eb0 25%, #0b4199 25%, #0b4199 75%, #124eb0 75%, #124eb0 100%) no-repeat top/100% 200%;
  }

  &.sec--links__btn--domestic {
    background: linear-gradient(to bottom, #d32130 0%, #d32130 25%, #c01c2a 25%, #c01c2a 75%, #d32130 75%, #d32130 100%) no-repeat top/100% 200%;
  }

  &.sec--links__btn--25th {
    background: linear-gradient(to bottom, #e0b24f 0%, #e0b24f 25%, #d4a251 25%, #d4a251 75%, #e0b24f 75%, #e0b24f 100%) no-repeat top/100% 200%;
  }

  &:hover {
    background-position: top 100% left 0;

    .sec--links__btn__ico {
      translate: 8px 0;
    }
  }
}

.sec--links__btn__txt {
  flex: 1 0 auto;
}

.sec--links__btn__ico {
  display: block;
  width: 25px;
  height: 25px;
  background: url(/attending/crystal/25anniversary/common/images/ico_arrow01.svg) no-repeat center/10px;
  transition: translate 0.5s ease;
}

.to-top-banner {
  display: grid;
  grid-template-columns: 547px 1fr;
  border: 1px solid var(--green);
  border-radius: 8px;
  box-shadow: 0 6px 12px rgb(0 0 0/0.08);
  transition: opacity 0.5s;
  overflow: hidden;

  &:hover {
    opacity: 0.7;
  }
}

.to-top-banner__content {
  padding: 31px 40px 0 32px;
  text-align: center;
  position: relative;

  &::after {
    content: "";
    display: block;
    width: 10px;
    height: 14px;
    background: var(--green);
    mask-image: url(/attending/crystal/25anniversary/common/images/ico_arrow01.svg);
    mask-size: cover;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: 21px;
  }
}

.to-top-banner__logo {
  width: 144px;
  margin-bottom: 8px;
}

.to-top-banner__content__txt {
  color: var(--green);
  font-size: 2.8rem;
  font-weight: 900;
  font-family: var(--font-zen);
  line-height: 1.3;
  letter-spacing: 0.05em;
}
/* sec--links_end */

/* sec--related */
.sec--related {
  padding-bottom: 100px;
}

.sec--related__swiper {
  overflow: visible;

  .swiper-container {
    overflow: hidden;
  }
}
/* sec--related_end */