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

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

「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
*/

/*******************************************************************************
* 色設定
*******************************************************************************/

:root {
  --c-body-background: #F8F8F8;
  --c-background: #FCFAFA;
  --c-primary: #DB3D69;
  --c-text: #595959;
  --c-secondary: #2C8D9E;
  --c-accent: #FFF6A1;
  --c-white: #FFF;
  --c-link: #07F;
  --c-countdown: #fff729;
  --c-countdown-txt: #8c5917;
}

/*******************************************************************************
* リセット・基本設定
*******************************************************************************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--c-text);
  background: var(--c-body-background);
  -webkit-font-smoothing: antialiased;
}

.container {
  background: var(--c-background);
  width: min(100%, 560px);
  margin: auto;
  padding-bottom: 100px;
  overflow-x: hidden;
}

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

/*******************************************************************************
* タイトル・テキスト共通設定
*******************************************************************************/

.title,
p:not(.form_container_ec p) {
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: bold;

  /* min（横375px）font-size: 23px */
  /* max（横560px）font-size: 34px */
  font-size: clamp(1.44rem, calc(0.044rem + 5.946vw), 2.13rem);
}

.title {
  line-height: 1.38;
  padding: 12px 0;
}

p:not(.form_container_ec p) {
  line-height: 1.38;
  padding-top: 8px;
  padding-bottom: 8px;
}

/*******************************************************************************
* ボックス
*******************************************************************************/

.box {
  /* max（横375px）45px ~ min（横560px）31px */
  padding: clamp(31px, calc(2.622px + 7.568vw), 45px) 0;
}

/*******************************************************************************
* 文字サイズ
*******************************************************************************/

.text-xl {
  /* min（横375px）font-size: 25px */
  /* max（横560px）font-size: 38px */
  font-size: clamp(1.56rem, calc(-0.084rem + 7.027vw), 2.38rem) !important;
}

.text-lg {
  /* min（横375px）font-size: 23px */
  /* max（横560px）font-size: 34px */
  font-size: clamp(1.44rem, calc(0.044rem + 5.946vw), 2.13rem) !important;
}

.text-md {
  font-weight: 500;

  /* min（横375px）font-size: 18px */
  /* max（横560px）font-size: 27px */
  font-size: clamp(1.13rem, calc(-0.015rem + 4.865vw), 1.69rem) !important;
}

.text-sm {}

/* 注釈 */
.text-note {
  font-weight: 300 !important;

  /* min（横375px）font-size: 9px */
  /* max（横560px）font-size: 12px */
  font-size: clamp(0.56rem, calc(0.182rem + 1.622vw), 0.75rem) !important;
}

/*******************************************************************************
* 文字配置
*******************************************************************************/

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

@media (max-width: 560px) {
  .text-left-sp {
    text-align: left !important;
  }
}

/*******************************************************************************
* 文字太さ
*******************************************************************************/

.weight-medium {
  font-weight: 500 !important;
}

.weight-bold {
  font-weight: bold !important;
}

/*******************************************************************************
* 文字色
*******************************************************************************/

.color-primary {
  color: var(--c-primary);
}

.color-secondary {
  color: var(--c-secondary);
}

/*******************************************************************************
* 文字詰め
*******************************************************************************/

/* 役物なども一括で詰めたい場合に使用 */
.kerning {
  font-feature-settings: "palt";
}

/* ls(letter spacing) */
.ls-lg {
  letter-spacing: 0.075em !important;
}

.ls-md {
  letter-spacing: 0.05em !important;
}

.ls-sm {
  letter-spacing: 0.025em !important;
}

.ls-0 {
  letter-spacing: 0 !important;
}

/*******************************************************************************
* 表示、非表示切り替え
*******************************************************************************/

@media (max-width: 560px) {
  .hide-sp {
    display: none !important;
  }
}

/*******************************************************************************
* マーカー
*******************************************************************************/

.marker {
  background: linear-gradient(transparent 60%, var(--c-accent) 60%);
}

/*******************************************************************************
* 余白（margin）のユーティリティ
*******************************************************************************/

.mt-xl {
  margin-top: 48px;
}

.mt-lg {
  margin-top: 24px;
}

.mt-md {
  margin-top: 16px;
}

.mt-sm {
  margin-top: 8px;
}

/*******************************************************************************
* 余白（padding）のユーティリティ
*******************************************************************************/

/* padding-top */
.pt-xl {
  padding-top: 48px;
}

.pt-lg {
  padding-top: 24px;
}

.pt-md {
  padding-top: 16px;
}

.pt-sm {
  padding-top: 8px;
}

.pt-none {
  padding-top: 0;
}

/* padding-bottom */
.pb-xl {
  padding-bottom: 48px;
}

.pb-lg {
  padding-bottom: 24px;
}

.pb-md {
  padding-bottom: 16px;
}

.pb-sm {
  padding-bottom: 8px;
}

.pb-none {
  padding-bottom: 0;
}

/* 上下の余白 */
.py-xl {
  padding-top: 48px;
  padding-bottom: 48px;
}

.py-lg {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-md {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-sm {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

/* 左右の余白 */
.px-xl {
  padding-left: 48px;
  padding-right: 48px;
}

.px-lg {
  padding-left: 24px;
  padding-right: 24px;
}

.px-md {
  padding-left: 16px;
  padding-right: 16px;
}

.px-sm {
  padding-left: 8px;
  padding-right: 8px;
}

/*******************************************************************************
* 動画のアスペクト調整
*******************************************************************************/

video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  aspect-ratio: 1000 / 750;
}

.voice1-movie,
.voice2-movie,
.voice3-movie,
.voice4-movie {
  aspect-ratio: 480 / 240;
}

.rousoku-movie {
  aspect-ratio: 640 / 480;
}

.airvolume-movie {
  aspect-ratio: 640 / 306;
}

.bakufu-movie {
  aspect-ratio: 640 / 480;
}

.set1-movie,
.set2-movie,
.set3-movie {
  aspect-ratio: 640 / 320;
}

.movie-w560-h560 {
  aspect-ratio: 560 / 560;
}

.movie-w560-h280 {
  aspect-ratio: 560 / 280;
}

.movie-w560-h584 {
  aspect-ratio: 560 / 584;
}

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

.refund-link {
  font-size: initial;
  background: var(--c-white);
  text-align: right !important;

  /* min（横375px）11px ~ max（横560px）16px */
  padding-top: clamp(11px, calc(0.865px + 2.703vw), 16px);
  padding-bottom: clamp(11px, calc(0.865px + 2.703vw), 16px);

  /* min（横375px）21px ~ max（横560px）32px */
  padding-left: clamp(21px, calc(-1.297px + 5.946vw), 32px);
  padding-right: clamp(21px, calc(-1.297px + 5.946vw), 32px);
}

.refund-link a {
  color: var(--c-link);
  text-decoration: underline;
  font-weight: 500;

  /* min（横375px）font-size: 10px */
  /* max（横560px）font-size: 13px */
  font-size: clamp(0.63rem, calc(0.245rem + 1.622vw), 0.81rem);
}

/*******************************************************************************
* カウントダウン
*******************************************************************************/

.countdown {
  display: flex;
  justify-content: center;
  align-items: baseline;
  column-gap: 6px;
  background: var(--c-countdown);
  padding: 10px 0;
  color: var(--c-countdown-txt);
  font-weight: bold;
  line-height: 1;
  margin-left: 20px;
  margin-right: 20px;

  /* min（横375px）font-size: 13px */
  /* max（横560px）font-size: 15px */
  font-size: clamp(0.81rem, calc(0.559rem + 1.081vw), 0.94rem);
}

.countdown span {
  color: var(--c-primary);

  /* min（横375px）font-size: 23px */
  /* max（横560px）font-size: 34px */
  font-size: clamp(1.44rem, calc(0.044rem + 5.946vw), 2.13rem);
}

/*******************************************************************************
* ＼9/28(日)23:59で終了！急いで...／の警告スタイル
*******************************************************************************/

.alert {
  color: #ff0000;
  text-align: center;

  /* min（横375px）20px 〜 max（横560px）30px */
  margin: clamp(20px, calc(-0.27px + 5.405vw), 30px);

  /* min（横375px）font-size: 13px */
  /* max（横560px）font-size: 15px */
  font-size: clamp(0.81rem, calc(0.559rem + 1.081vw), 0.94rem) !important;
}

/*******************************************************************************
* このページ〜ご注意ください
*******************************************************************************/

.caution {
  width: calc(450 / 560 * 100%);
  margin: 30px auto 0;
}

/*******************************************************************************
* 特商法
*******************************************************************************/

.law {
  margin-top: 5px;
}

.law a {
  color: var(--c-text);
  text-decoration: none;
  font-weight: normal;
  display: block;
  margin-bottom: 20px;
  text-decoration: underline;

  /* min（横375px）font-size: 13px */
  /* max（横560px）font-size: 15px */
  font-size: clamp(0.81rem, calc(0.559rem + 1.081vw), 0.94rem);
}

/*******************************************************************************
* CTA
*******************************************************************************/

.cta {
  width: calc(889 / 1000 * 100%);
  margin: auto;
}

/*******************************************************************************
* アニメーション設定
*******************************************************************************/

@keyframes purupuru {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }

  20% {
    transform: scale(1, 1.06) translate(-5%, -4%) skew(6deg, 0deg);
  }

  50% {
    transform: scale(1, 0.94) translate(5%, 4%) skew(-6deg, 0deg);
  }

  65% {
    transform: scale(1, 1.03) translate(2%, -2%) skew(-3deg, 0deg);
  }

  80% {
    transform: scale(1, 0.97) translate(-2%, 2%) skew(3deg, 0deg);
  }

  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

.purupuruAnimation {
  animation: purupuru 0.8s linear 0s;
}

.js-toggle-by-date-default,
.js-toggle-by-date {
  display: none;
}