html {
  scroll-behavior: smooth;
}

main {
  color: #001533;
}

#CHRISTMAS, #COUNTDOWN {
  scroll-margin-top: 10rem;
}

@media print, screen and (max-width: 980px) {
  #CHRISTMAS, #COUNTDOWN {
    padding-top: 10rem;
  }
}
@media print, screen and (max-width: 550px) {
  #CHRISTMAS, #COUNTDOWN {
    padding-top: 8rem;
  }
}
.fm {
  font-family: "Noto Serif JP";
}

.f-wh {
  color: #fff;
}

.bg {
  background-color: #f3f0e9;
}

.l-pb {
  padding-bottom: 10rem;
}

@media print, screen and (max-width: 550px) {
  .l-pb {
    padding-bottom: 8rem;
  }
}
.mv {
  width: 100%;
  height: 900px;
  position: relative;
}

.mv-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.mv-ttl {
  position: absolute;
  left: 6%;
  top: 10%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.mv-ttl .-main {
  width: 44vw;
  max-width: 600px;
}
.mv-ttl .-main02 {
  width: 36vw;
  max-width: 480px;
  margin-top: 2.5rem;
}
.mv-ttl .-sub {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 500;
  position: absolute;
  bottom: -44%;
  white-space: nowrap;
}
.mv-ttl::before {
  position: absolute;
  content: "";
  width: 60vw;
  max-width: 700px;
  height: 18vw;
  max-height: 600px;
  border-radius: 50%;
  background: rgba(0, 16, 49, 0.4);
  filter: blur(60px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.-cruise {
  display: block;
  position: absolute;
  bottom: 5%;
  right: 12%;
  width: clamp(400px, 75vw, 850px) !important;
  z-index: 2;
}

.-firework {
  display: block;
  position: absolute;
  top: 2%;
  right: 0;
  width: clamp(180px, 30vw, 350px) !important;
  z-index: 2;
}

.mv-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0%;
  white-space: nowrap;
  display: flex;
  gap: 20px;
  z-index: 2;
}
.mv-link a {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1;
  font-weight: 400;
  text-shadow: 0 0 5px rgba(0, 5, 43, 0.2);
  border: 0.5px solid #fff;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  width: clamp(280px, 30vw, 320px);
  height: 56px;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.5s ease;
}
.mv-link a span {
  position: relative;
}
.mv-link a span::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #fff;
  border: 0.5px solid #d1953c;
  box-shadow: 0 0 2px rgb(209, 149, 60), 0 0 6px rgba(209, 149, 60, 0.9), 0 0 14px rgba(209, 149, 60, 0.8);
}
.mv-link a::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #fff;
}
.mv-link a:hover {
  transform: scale(1.03);
  background: rgba(255, 255, 255, 0.3);
}

.intro {
  position: relative;
  background: #011239;
  padding-block: 6rem 8rem;
}
.intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: -200px;
  width: 100%;
  height: 380px;
  background: linear-gradient(180deg, rgba(1, 18, 57, 0) 0%, rgba(8, 29, 69, 0.9) 40%, rgb(1, 18, 57) 100%);
}
.intro-lead-txt {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 2.3;
  text-align: center;
  position: relative;
  z-index: 2;
}

.box-1200-15 {
  width: 100%;
  max-width: 124rem;
  padding-inline: 2rem;
  margin-inline: auto;
}

@media print, screen and (max-width: 860px) {
  .mv-ttl .-main02 {
    margin-top: 2rem;
  }
  .-cruise {
    bottom: 13%;
  }
  .mv-link a {
    height: 48px;
    justify-content: flex-start;
    padding-left: 6rem;
  }
  .mv-link a::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
  }
  .intro {
    padding-block: 4rem 6rem;
  }
}
@media print, screen and (max-width: 700px) {
  .mv-ttl .-main {
    width: 50vw;
  }
  .mv-ttl .-main02 {
    width: 40vw;
  }
  .-cruise {
    bottom: 18%;
  }
  .-firework {
    top: 10%;
  }
  .mv-link a {
    padding-left: 5rem;
  }
  .intro {
    padding-block: 5rem;
  }
}
@media print, screen and (max-width: 600px) {
  .mv-ttl .-main {
    width: 60vw;
  }
  .mv-ttl .-main02 {
    width: 50vw;
  }
  .mv-ttl .-sub {
    font-size: clamp(18px, 4vw, 28px);
  }
  .mv-ttl::before {
    width: 70vw;
    height: 40vw;
  }
  .-cruise {
    right: 5%;
  }
  .-firework {
    top: 14%;
    right: -2%;
  }
  .mv-link {
    flex-direction: column;
  }
}
.plan {
  overflow: hidden;
  padding-top: 10rem;
  position: relative;
}
.plan .tx-bg {
  display: block;
  width: 80%;
  margin-left: auto;
}
.plan-overview {
  width: 90%;
  display: flex;
  align-items: stretch;
  box-shadow: 0 0 8px rgba(212, 212, 212, 0.5);
}
.plan-media {
  width: 55%;
}
.plan-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 5/3;
}
.plan-body {
  width: 45%;
  position: relative;
  z-index: 2;
  padding: 6rem 6rem 6rem 0rem;
}
.plan-body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -250px;
  background: linear-gradient(90deg, rgba(188, 24, 2, 0) 0%, rgba(188, 24, 2, 0.8) 18%, rgba(188, 24, 2, 0.95) 20%, rgb(188, 24, 2) 23%);
  z-index: -1;
}
.plan-body::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-image: url("/seabass/_assets/event/year-end-cruises/img/deco.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.plan-ttl .-jpn {
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 600;
}
.plan-ttl .-eng {
  font-size: clamp(15px, 1.5vw, 18px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(232, 222, 202, 0.5);
  margin-top: 1rem;
}
.plan .-lead {
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: 600;
  color: #ead9b2;
  margin-top: 3rem;
}
.plan .-text {
  margin-top: 1rem;
  line-height: 2;
  font-size: clamp(14px, 1.5vw, 16px);
}
.plan .-text span {
  display: block;
  margin-top: 1.5rem;
}

@media print, screen and (max-width: 1300px) {
  .plan-overview {
    width: 95%;
  }
  .plan-body {
    padding: 4rem 2rem 4rem 0;
  }
}
@media print, screen and (max-width: 1140px) {
  .plan-media {
    width: 45%;
  }
  .plan-body {
    width: 55%;
  }
}
@media print, screen and (max-width: 980px) {
  .plan {
    padding-top: 10rem;
  }
  .plan .tx-bg {
    margin-inline: auto;
    width: 100%;
  }
  .plan-overview {
    width: 100%;
    flex-direction: column;
    margin: 0 auto;
    max-width: 520px;
  }
  .plan-media {
    width: 100%;
  }
  .plan-media img {
    aspect-ratio: 4/3;
  }
  .plan-body {
    width: 100%;
    padding-inline: 4rem;
    padding-top: 0;
  }
  .plan-body::before {
    top: -100px;
    left: 0px;
    background: linear-gradient(180deg, rgba(188, 24, 2, 0) 0%, rgba(188, 24, 2, 0.9) 10%, rgba(188, 24, 2, 0.95) 12%, rgb(188, 24, 2) 14%);
  }
}
@media print, screen and (max-width: 550px) {
  .plan {
    padding-top: 8rem;
  }
  .plan-body {
    padding-inline: 2rem;
  }
}
.reverse .tx-bg {
  margin-right: auto;
  margin-left: 0;
}
.reverse .plan-overview {
  margin-left: 10%;
}
.reverse .plan-overview .plan-body {
  padding: 6rem 0rem 6rem 6rem;
}
.reverse .plan-overview .plan-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: -200px;
  background: linear-gradient(-90deg, rgba(10, 21, 52, 0) 0%, rgba(0, 21, 52, 0.8) 10%, rgba(0, 21, 52, 0.95) 14%, rgb(0, 21, 52) 20%);
  z-index: -1;
}

@media print, screen and (max-width: 980px) {
  .reverse .plan-overview {
    margin-inline: auto;
    flex-direction: column-reverse;
  }
  .reverse .plan-overview .plan-body {
    width: 100%;
    padding-inline: 4rem;
    padding-top: 0;
  }
  .reverse .plan-overview .plan-body::before {
    top: -100px;
    right: 0px;
    background: linear-gradient(180deg, rgba(0, 21, 52, 0) 0%, rgba(0, 21, 52, 0.9) 10%, rgba(0, 21, 52, 0.95) 12%, rgb(0, 21, 52) 14%);
  }
}
/*
.other{
    .plan-body{
        &::before{
            background: linear-gradient(
                90deg,
                rgba(41, 91, 22, 0) 0%,
                rgba(41, 91, 22, 0.8) 10%,
                rgba(41, 91, 22, 0.95) 14%,
                rgba(41, 91, 22, 1) 20%
            );
            z-index: -1;
        }
    }
}
@media print, screen and (max-width: 980px){
    .other{
        .plan-body{
            &::before{
                background: linear-gradient(
                    180deg,
                rgba(45, 107, 25, 0) 0%,
                rgba(45, 107, 25, 0.9) 10%,
                rgba(45, 107, 25, 0.95) 12%,
                rgba(45, 107, 25, 1) 14%
                );
                z-index: -1;
            }
        }
    }
}
*/
.plan-detail {
  margin-top: 3rem;
}

.detail-wrap {
  display: flex;
  gap: 3rem;
  justify-content: space-between;
}
.detail-wrap a {
  margin-top: 3rem;
}

.plan-card {
  flex: 1;
  background-color: #fff;
  padding: 4rem;
  box-shadow: 0 0 8px rgba(212, 212, 212, 0.5);
}
.plan-card a {
  display: block;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  padding: 1.5rem 4rem 1.5rem 2rem;
  text-align: center;
  background: linear-gradient(180deg, #CE8F35 0%, #DBAA57 30%, #C07312 58%, #CFB872 100%);
  font-weight: 500;
  font-size: clamp(15px, 1vw, 16px);
  position: relative;
  transition: 0.5s ease;
  box-shadow: 0 0 8px rgba(212, 212, 212, 0.3);
}
.plan-card a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("/seabass/_assets/event/year-end-cruises/img/btn.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.plan-card a:hover {
  transform: scale(1.03);
}

.card-ttl {
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 600;
  padding-left: 2.6rem;
  position: relative;
}
.card-ttl::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background: #fff;
  border: 0.5px solid #d1953c;
  box-shadow: 0 0 2px rgb(209, 149, 60), 0 0 6px rgba(209, 149, 60, 0.9), 0 0 14px rgba(209, 149, 60, 0.8);
}

.-content {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  gap: 3rem;
}

.detail-img {
  width: 100%;
  max-width: 200px;
}

.-info {
  display: flex;
  gap: 1rem;
}
.-info img {
  width: 18px;
}
.-info p {
  font-size: 15px;
  font-weight: 500;
  color: rgba(51, 51, 51, 0.8);
}

.-value {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
}
.-value span {
  font-size: 15px;
  font-weight: 500;
  position: relative;
  left: -6px;
}

.-price {
  font-size: 15px;
  font-weight: 500;
}
.-price span {
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 600;
}

.strech {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.only {
  justify-content: center;
}
.only .plan-card {
  flex: 0 0 calc((100% - 30px) / 2);
}
.only .plan-card .-content {
  justify-content: flex-start;
}

@media print, screen and (max-width: 960px) {
  .detail-wrap {
    flex-direction: column;
    align-items: center;
  }
  .plan-card {
    max-width: 520px;
    width: 100%;
  }
  .card-ttl {
    font-size: clamp(16px, 4vw, 18px);
  }
  .card-ttl::before {
    width: 24px;
    height: 24px;
  }
  .-info p {
    font-size: 14px;
  }
  .-value span {
    font-size: 14px;
  }
}
@media print, screen and (max-width: 740px) {
  .plan-card {
    padding: 3rem;
  }
}
@media print, screen and (min-width: 1220px) {
  .plan-card a br {
    display: none;
  }
}
@media print, screen and (max-width: 1219px) {
  .plan-card a br {
    display: block;
  }
}
@media print, screen and (min-width: 501px) {
  .plan-card br {
    display: none;
  }
}
@media print, screen and (max-width: 500px) {
  .card-ttl br {
    display: block;
  }
}/*# sourceMappingURL=index.css.map */