@charset "UTF-8";

/* 変数 */
:root {
  --inner: 1000px;
  --inner-gutter: 20px;
  --ff-body: "Zen Kaku Gothic New", sans-serif;
  --ff-en: "Lexend", serif;
  --c-font: #333;
  --space-xs: 24px;
  --space-sm: 46px;
  --space-md: 60px;
  --space-lg: 106px;
  --space-xl: 160px;
  --space-2xl: 200px;
}

/* ベースCSS */
html {
  font-size: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

a {
  display: inline-block;
  color: currentColor;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

body {
  font-family: var(--ff-body);
  font-weight: 500;
  color: var(--c-font);
  font-size: 16px;
  line-height: 1.6;
}

/* コンテンツ */
.c-inner {
  box-sizing: content-box;
  max-width: var(--inner);
  margin-left: auto;
  margin-right: auto;
  padding-right: var(--inner-gutter);
  padding-left: var(--inner-gutter);
}
/* ユーティリティ */
.u-md-over-only {
  display: none;
  @media (width > 767px) {
    display: block;
  }
}

.u-md-only {
  display: block;
  @media (width > 767px) {
    display: none;
  }
}

/* メインコンテンツ */
.newyear {
  padding-top: 100px;
  padding-bottom: var(--space-sm);
  background:
    url(../img/bg-details.png) repeat center center / cover,
    #f0e7d0;
  overflow: hidden;
  @media (width < 767px) {
    padding-top: 60px;
    padding-bottom: var(--space-xs);
  }
}

.newyear__inner {
  container-type: inline-size;
}

.newyear__title {
  position: relative;
  font-family: var(--ff-body);
  font-weight: bold;
  font-size: clamp(24px, 6vw, 40px);
  letter-spacing: 0.036em;
  line-height: 1.5;
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  padding-left: clamp(20px, 5vw, 44px); /* フォールバック */
  padding-left: 4.4cqw;
  padding-right: clamp(16px, 4vw, 34px); /* フォールバック */
  padding-right: 3.4cqw;
}

.newyear__title-year{
  color: #753d24;
  letter-spacing: -0.27em;
  font-size: clamp(35px, 8.75vw, 60px);
  line-height: 1.4;
}

.newyear__title::after,
.newyear__title::before {
  position: absolute;
  content: "";
  display: block;
  mask: url('data:image/svg+xml,<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.461 29.291L8.41314 3.26199C8.2438 3.0627 8.11576 2.83174 8.03643 2.58254C7.95711 2.33333 7.928 2.07085 7.95098 1.81034C7.97396 1.54983 8.0485 1.29648 8.17022 1.06501C8.29195 0.83354 8.45835 0.628566 8.65997 0.461995C9.06813 0.12325 9.59345 -0.0409917 10.1219 0.00486924C10.6503 0.0507302 11.1393 0.302998 11.483 0.706995L33.5311 26.735C33.7005 26.9342 33.8286 27.1651 33.908 27.4143C33.9874 27.6635 34.0166 27.9259 33.9937 28.1864C33.9708 28.4469 33.8964 28.7003 33.7747 28.9318C33.6531 29.1633 33.4865 29.3684 33.285 29.535C32.8767 29.8735 32.3516 30.0376 31.8233 29.9917C31.2949 29.9459 30.8058 29.6938 30.462 29.29L30.461 29.291ZM16.7972 28.697L0.909968 18.437C0.689914 18.296 0.500098 18.1128 0.351374 17.8979C0.20265 17.683 0.0981706 17.4408 0.0437572 17.1852C-0.0106561 16.9296 -0.0138252 16.6657 0.0344799 16.4089C0.082785 16.152 0.181448 15.9074 0.325007 15.689C0.617863 15.2468 1.0734 14.938 1.59259 14.8296C2.11177 14.7212 2.65287 14.8219 3.0982 15.11L18.9861 25.37C19.2062 25.511 19.396 25.6942 19.5447 25.9091C19.6935 26.124 19.7982 26.3662 19.8526 26.6218C19.907 26.8774 19.9099 27.1413 19.8616 27.3981C19.8133 27.6549 19.7147 27.8996 19.5711 28.118C19.2777 28.5598 18.822 28.8683 18.3028 28.9767C17.7836 29.0851 17.2428 28.9846 16.7972 28.697Z" fill="%23333333"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  width: clamp(16px, 4vw, 34px); /* フォールバック */
  width: 3.4cqw;
  aspect-ratio: 3.4 / 3;
  background: #333;
}
@media (width < 767px) {
  .newyear__title::after,
  .newyear__title::before {
    display: none;
  }
}

.newyear__title::after {
  right: 0;
  transform: scaleX(-1);
  bottom: 4px;
}

.newyear__title::before {
  left: 0;
  bottom: 4px;
}

.newyear__mv {
  position: relative;
}

@media (width < 767px) {
  .newyear__mv {
    transform: scale(1.4);
    margin-top: 20vw;
    margin-bottom: 23vw;
  }
}
.newyear__mv-ship {
  width: 1000px;
  max-width: 100%;
  aspect-ratio: 10/6.76;
  margin-inline: auto;
  animation: 3.5s ship-animation infinite alternate linear;
  margin-top: var(--space-sm);
  transform-origin: bottom;
}

@keyframes ship-animation {
  from {
    transform: rotate(-10deg);
  }

  to {
    transform: rotate(10deg);
  }
}

.newyear__mv-wave {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 745px;
  max-width: 72vw;
  aspect-ratio: 745/165;
  animation: 3.5s wave-animation infinite alternate linear;
  transform-origin: center;
}

@keyframes wave-animation {
  from {
    transform: scale(1) translateY(0) translateX(-50%);
  }

  to {
    transform: scale(1.1) translateY(-10%) translateX(-45%); /* スケールに応じて調整 */
  }
}

.newyear__text-wrap {
  position: relative;
  margin-top: var(--space-lg);
}
@media (width < 767px) {
  .newyear__text-wrap {
    margin-top: var(--space-md);
  }
}

.newyear__text-wrap::before {
  content: "";
  display: block;
  background: url(../img/cloud-left.svg) repeat center center / cover;
  width: 514px;
  aspect-ratio: 514 / 506;
  position: absolute;
  top: 40px;
  left: -360px;
  @media (width < 767px) {
    display: none;
  }
}

@media (width < 767px) {
  .newyear__text-wrap::before {
    display: none;
  }
}

.newyear__text-wrap::after {
  content: "";
  display: block;
  background: url(../img/cloud-right.svg) repeat center center / cover;
  width: 636px;
  aspect-ratio: 636 / 516;
  position: absolute;
  top: 10px;
  right: -450px;
}

@media (width < 767px) {
  .newyear__text-wrap::after {
    display: none;
  }
}

.newyear__text {
  font-size: clamp(16px, 4vw, 24px);
  line-height: 2;
  letter-spacing: 0.036em;
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (width < 767px) {
  .newyear__text {
    text-align: left;
    line-height: 1.8;
  }
}

.newyear__logo {
  width: 270px;
  max-width: 100%;
  aspect-ratio: 270/56;
  margin-inline: auto;
  margin-top: var(--space-md);
}

@media (width < 767px) {
  .newyear__logo {
    margin-top: var(--space-sm);
    width: 180px;
  }
}

.newyear__movie {
  width: 800px;
  max-width: 100%;
  aspect-ratio: 800/450;
  margin-inline: auto;
  margin-top: var(--space-2xl);
}

@media (width < 767px) {
  .newyear__movie {
    margin-top: var(--space-lg);
  }
}
.newyear__movie video {
  width: 100%;
}
.newyear__copyright {
  display: block;
  font-family: var(--ff-en);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: var(--space-xl);
  color: #898989;
}
@media (width < 767px) {
  .newyear__copyright {
    margin-top: var(--space-lg);
    font-size: 10px;
  }
}

/* 動画・ポップアップ */

.newyear__movie {
  position: relative;
}
.play-button {
  max-width: 100px;
  width: 12vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  cursor: pointer;
}
.popup_sp {
  display: none;
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
}

.popup.is-show {
  opacity: 1;
  visibility: visible;
}

.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: -1.2em;
  top: -1.2em;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(131, 131, 131, 0.8);
  z-index: 1;
  cursor: pointer;
}

/* 音量コントロール */
.volume-control {
  position: relative;
}

.volume-control-btn {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 27.5%;
}
.volume-control-btn .on,
.volume-control-btn .off {
  max-width: 80px;
}

@media (width < 767px) {
  .popup-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    z-index: 2;
  }

  .popup_pc {
    display: none;
  }
  .popup_sp {
    display: block;
  }
  .popup-inner img {
    width: 100%;
    height: 100%;
  }
  .volume-control-btn {
    justify-content: space-around;
    top: 55%;
    bottom: auto;
    max-width: 250px;
    width: 100%;
  }
}


/* ボタン */
.btnarea2 {
  display: flex;
  margin: 0 auto;
  width: 90%;
  max-width: 700px;
  margin-top: 80px;
}

@media (width < 767px) {
  .btnarea2 {
    margin-top: var(--space-md);
  }
}

.btnarea2 .btn a {
  display: block;
  padding: 1.25em 2em;
  border-radius: 100vh;
  font-size: clamp(1.125rem, 1.016rem + 0.31vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: 0.4s;
  transition-property: opacity;
}

.btn {
  position: relative;
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 13px;
  margin: 10px;
  font-size: 16px;
  width: 400px;
  margin-inline: auto;
}

@media (width < 767px) {
  .btnarea2 .btn a {
    padding: 1.05em 2em;
  }
  .btn {
    padding: 0;
  }
}

.btn::after {
  content: url(https://www.jam-design.jp/2024newyear/asset/img/btn2.svg);
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .btnarea2 .btn a:hover {
    opacity: 0.8;
  }
}

.btnarea2 .btn a:focus-visible {
  opacity: 0.8;
}

.btnarea2 .btn .red {
  background-color: #c83622;
}