/*******************************************************************************
* ベース
*******************************************************************************/

:root {
  --font-family: "Helvetica Neue", "Helvetica", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  font-family: var(--font-family);
  background: #222324;
  font-weight: 400;
  font-style: normal;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*******************************************************************************
* 文字サイズと余白のレスポンシブ調整
*******************************************************************************/

/*
文字サイズのレスポンシブ調整

「Viewport Size」のminに375px、maxに560pxを指定
「Base font size」のminとmaxにそれぞれ設定したい文字サイズを指定
「Font-size clamp calculation」に生成されたコードを貼り付け

参考サイト
https://clampgenerator.com/tools/font-size-typescale/?utm_source=homepage&utm_medium=heroSection
*/

/*
余白のレスポンシブ調整

「Viewport Size」のminに375px、maxに560pxを指定
「Property Size」のminとmaxにそれぞれ設定したい余白サイズを指定
「CSS clamp Generated Code to copy!」に生成されたコードを貼り付け

参考サイト
https://clampgenerator.com/tools/layout-spacing-size/?utm_source=homepage&utm_medium=heroSection
*/

/*******************************************************************************
* コンテナ
*******************************************************************************/

.container {
  background: #222324;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 50px;
}

/*******************************************************************************
* オファー、CTAボタン
*******************************************************************************/

.offer {
  position: relative;
}

.cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 87.7%;
}

/* cta - FV下 */
.cta.--fv-after {
  bottom: 31.8%;
}

/* cta - クリスマスキャンペーン */
.cta.--camp {
  bottom: 22.1%;
}

/* cta - 北人と過ごす刺激的な日々 */
.cta.--day {
  position: static;
  display: block;
  margin: auto;
  transform: none;
}

/* 最下部にあるオファー調整 */
.offer-final {
  position: relative;
  background: #000;
  aspect-ratio: 877 / 217;
  height: auto;
  /* min（横375px）40px ~ max（横1000px）60px */
  padding-bottom: clamp(40px, calc(28px + 3.2vw), 60px);
}

/*******************************************************************************
* 規約
*******************************************************************************/

.terms {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  text-align: justify;
  color: #636363;
  overflow-y: scroll;
  line-height: 1.35;
  width: 70%;
  height: 688px;
  padding: 0 5%;
  font-size: 27px;
  /* min（横375px）20px ~ max（横1000px）53px */
  row-gap: clamp(20px, calc(0.2px + 5.28vw), 53px);
}

@media (max-width: 1000px) {
  .terms {
    height: 68vw;
    /* min（横375px）font-size: 10px */
    /* max（横1000px）font-size: 27px */
    font-size: clamp(0.63rem, calc(-0.012rem + 2.720vw), 1.69rem);
  }
}

.terms p a {
  text-decoration: underline;
  color: inherit;
}

/*******************************************************************************
* キャンセルポリシー
*******************************************************************************/

.refund {
  position: absolute;
  left: 23%;
  bottom: 4%;
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  color: #666;
  text-decoration: none;
  font-weight: 300;
  /* min（横375px）font-size: 9px */
  /* max（横1000px）font-size: 20px */
  font-size: clamp(0.56rem, calc(0.150rem + 1.760vw), 1.25rem);
}

/*******************************************************************************
* FV
*******************************************************************************/

.fv .swiper-wrapper {
  height: auto;
}

/*******************************************************************************
* 北人と過ごす刺激的な日々
*******************************************************************************/

.day {
  /* min（横375px）30px ~ max（横1000px）80px */
  padding-top: clamp(30px, calc(0px + 8vw), 80px);
  /* min（横375px）41px ~ max（横1000px）110px */
  padding-bottom: clamp(41px, calc(-0.4px + 11.04vw), 110px);
  background: #7F0504;
}

.day__title {
  color: #fff;
  width: fit-content;
  margin: auto;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  /* min（横375px）font-size: 23px */
  /* max（横1000px）font-size: 60px */
  font-size: clamp(1.44rem, calc(-0.025rem + 6.240vw), 3.88rem);
}

.day__swiper {
  /* min（横375px）28px ~ max（横1000px）75px */
  margin-top: clamp(28px, calc(-0.2px + 7.52vw), 75px);
}

.day-item__number {
  width: fit-content;
  height: 82px;
  margin: auto;
  /* min（横375px）9px ~ max（横1000px）24px */
  margin-bottom: clamp(9px, calc(0px + 2.4vw), 24px);
}

@media (max-width: 1000px) {
  .day-item__number {
    height: 8.3vw;
  }
}

.day-item__number img {
  width: inherit;
  height: inherit;
}

.day-item__img,
.day-item__movie-wrapper {
  border-radius: 20px;
  overflow: hidden;
}

.day-item__title,
.day-item__txt {
  color: #fff;
  /* min（横375px）9px ~ max（横1000px）24px */
  margin-top: clamp(9px, calc(0px + 2.4vw), 24px);
}

.day-item__title {
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  font-feature-settings: "palt";
  /* min（横375px）font-size: 19px */
  /* max（横1000px）font-size: 50px */
  font-size: clamp(1.19rem, calc(0.025rem + 4.960vw), 3.13rem);
}

.day-item__txt {
  line-height: 1.44;
  letter-spacing: 0.05em;
  /* min（横375px）font-size: 14px */
  /* max（横1000px）font-size: 38px */
  font-size: clamp(0.88rem, calc(-0.025rem + 3.840vw), 2.38rem);
}

.day__cta {
  /* min（横375px）28px ~ max（横1000px）74px */
  margin-top: clamp(28px, calc(0.4px + 7.36vw), 74px);
}


/*******************************************************************************
* 北人と過ごす刺激的な日々 - 動画
*******************************************************************************/

/* Swiperの高さ自動調整 */
.day__swiper .swiper-wrapper {
  height: auto;
}

.day__swiper .swiper-button-prev,
.day__swiper .swiper-button-next {
  top: 35.6%;
  margin: 0;
  width: 100px;
  height: 100px;
}

@media (max-width: 1000px) {

  .day__swiper .swiper-button-prev,
  .day__swiper .swiper-button-next {
    width: 10vw;
    height: 10vw;
  }
}

.day__swiper .swiper-button-prev {
  left: 2%;
}

.day__swiper .swiper-button-next {
  right: 2%;
}

.day__swiper .swiper-button-prev::before,
.day__swiper .swiper-button-next::before {
  content: "";
  width: 60%;
  height: 60%;
  border-top: 10px solid #dab778;
  border-right: 10px solid #dab778;
}

@media (max-width: 1000px) {

  .day__swiper .swiper-button-prev::before,
  .day__swiper .swiper-button-next::before {
    border-width: 1vw;
  }
}

/* クリックしやすいように、矢印部分のクリックエリアを拡大 */
.day__swiper .swiper-button-prev::after,
.day__swiper .swiper-button-next::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

.day__swiper .swiper-button-prev::before {
  transform: rotate(-135deg);
}

.day__swiper .swiper-button-next::before {
  transform: rotate(45deg);
}

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

/* 最初と最後のスライドボタンを非表示 */
.day__swiper .swiper-button-prev.swiper-button-disabled,
.day__swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0;
}

.day-item__movie-wrapper {
  position: relative;
  aspect-ratio: 1080 / 1920;
}

.day-item__movie {
  aspect-ratio: 1080 / 1920;
  height: auto;
  width: 100%;
}

/* 
iframeをスワイプできるように上下にオーバーレイを被せる
オーバーレイの箇所のみスワイプ可能
中央の再生ボタンエリアには被せない
*/
.day-item__movie-wrapper::before,
.day-item__movie-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  /* 下記デバッグ用 */
  /* background: rgb(255 255 255 / 0.6); */
}

.day-item__movie-wrapper::before {
  top: 0;
  height: 33%;
}

.day-item__movie-wrapper::after {
  bottom: 0;
  height: 33%;
}

/*******************************************************************************
* セクションの背景色
*******************************************************************************/

.bg03 {
  background: #292b2c;
}

/*******************************************************************************
* 機能動画
*******************************************************************************/

/* 動画の背景色を黒設定 */
.movie-wrapper.is-background-black {
  background: #000;
}

.movie-function {
  display: block;
  width: 85%;
  max-width: 850px;
  margin: 0 auto;
  aspect-ratio: 850 / 478;
  height: auto;
}

/*******************************************************************************
* ボタンアニメーション
*******************************************************************************/

.btn_bounce {
  animation: beat 1.5s infinite;
  max-width: 100% !important;
  display: block;
  margin: 0 auto;
  height: auto;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.05);
  }

  70% {
    transform: scale(1);
  }

  80% {
    transform: scale(1.05);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

/*******************************************************************************
フローティング バナー
*******************************************************************************/

.timer .timer-wrap .left-block {
  bottom: 8px;
  left: 1.5%;
}

.timer .timer-wrap .clock-block {
  top: 20%;
  font-family: var(--font-family);
}

#chatform-btn,
.chatform-btn,
.chatform-btn-n {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .4s ease-in-out,
    visibility .4s ease-in-out;
}

#chatform-btn.is-show,
.chatform-btn.is-show,
.chatform-btn-n.is-show {
  opacity: 1;
  visibility: visible;
}

.chatform-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  width: 100%;
  max-width: 850px;
}

.chatform-btn-img {
  display: block;
  max-width: 360px;
}

.chatform-btn-n {
  position: fixed;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  width: 100%;
  max-width: 850px;
}

.chatform-btn-img-n {
  display: block;
  width: 100%;
  max-width: 850px;
}