@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
:root {
  --sans-serif: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --serif: "Noto Serif JP", serif;
  --en-sans: "", sans-serif;
  --en-serif: "", serif;
  --base-width: 920;
  --base: #fff;
  --main: #000;
  --accent: #d81b60;
  --sp-base-fs: 4vw;
  --sp-pad: 6vw;
}

/*========================================
  ブラウザごとのデフォルトスタイルの初期化
========================================*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
figure {
  all: unset;
  display: revert;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  vertical-align: middle;
}

/*========================================
	要素の基本的なスタイル
========================================*/
html {
  font-size: 10px;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  text-size-adjust: 100%;
  font-family: var(--sans-serif);
  font-size: 1.6rem;
  line-height: 1.8;
  min-width: 320px;
  color: var(--main);
  background: var(--base);
}
@media screen and (max-width: 1200px) and (min-width: 767px) {
  body {
    font-size: 1.3265306122vw;
  }
  body img {
    font-size: 0.9795918367vw;
  }
}
@media screen and (max-width: 767px) {
  body {
    font-size: var(--sp-base-fs);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid blue;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
}

img,
svg,
iframe,
video,
picture {
  max-width: 100%;
}

img,
svg {
  vertical-align: top;
}

img {
  letter-spacing: 0;
  font-size: 12px;
  height: auto;
}
@media screen and (max-width: 1200px) and (min-width: 767px) {
  img {
    font-size: 1.2244897959vw;
  }
}

a {
  word-break: break-all;
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    display: inline-block;
    pointer-events: none;
  }
}

small {
  font-size: 80%;
}

button,
input[type=button],
input[type=submit] {
  cursor: pointer;
  font: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

label {
  cursor: pointer;
  display: inline-block;
}

/*========================================
  サイト共通のフッター
========================================*/
.l-footer {
  background: #010f1d;
  padding: 2.5em 0;
}
@media screen and (max-width: 767px) {
  .l-footer {
    padding: 13.3333333333vw 6vw 6vw 6vw;
  }
}
.l-footer__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 81.25%;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .l-footer__inner {
    font-size: 2.5333333333vw;
  }
}
.l-footer__copyright {
  font-size: 100%;
}

/*========================================
  サイト共通のヘッダー
========================================*/
.l-header {
  background: #010f1d;
  padding: 0.9375em 2.5em;
}
@media screen and (max-width: 767px) {
  .l-header {
    padding: 2.4vw;
  }
}
.l-header__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.l-header__logo {
  width: 17.1875em;
}
@media screen and (max-width: 767px) {
  .l-header__logo {
    display: flex;
    align-items: center;
    width: 43.2vw;
  }
}
/*========================================
  main
========================================*/
.l-main {
  position: relative;
}
@media screen and (max-width: 767px) {
  .l-main {
    overflow: hidden;
  }
}

/*========================================
  サイト共通のフッター
========================================*/
.l-footer {
  background: #010f1d;
  padding: 2.5em 0;
}
@media screen and (max-width: 767px) {
  .l-footer {
    padding: 10.6666666667vw 2.6666666667vw 5.3333333333vw;
  }
}

/*========================================
  カスタムヘッダー
========================================*/
.l-header {
  padding: 1.375em 2.5em;
}
@media screen and (max-width: 767px) {
  .l-header {
    padding: 3.4666666667vw 2.4vw;
  }
}

/*========================================
  ボタン
========================================*/
.c-btn {
  cursor: pointer;
  position: relative;
  display: inline-block;
  line-height: 1.1;
  text-decoration: none;
  user-select: none;
  border: 0;
}
.c-btn:hover {
  text-decoration: none;
}

/*========================================
  アイコン
========================================*/
.c-icon {
  position: relative;
  display: inline-block;
  background: 50% 50% no-repeat;
  background-size: contain;
  vertical-align: top;
  line-height: 1;
  font-style: normal;
}

/*========================================
  container
========================================*/
.c-container {
  width: calc(var(--base-width) * 1px);
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 1200px) and (min-width: 767px) {
  .c-container {
    width: calc(var(--base-width) / 1200 * 100%);
  }
}
@media screen and (max-width: 767px) {
  .c-container {
    --base-width: 660;
    width: calc(0.1333333333 * var(--base-width) * 1vw);
  }
}

/*========================================
  tran
========================================*/
.p-tran {
  transition-property: filter, opacity, margin, transform;
  transition-duration: 0.2s;
}

/*========================================
  ボタン
========================================*/
@media screen and (min-width: 768px) {
  .p-btn-closing {
    width: 31.75em;
  }
}
@media screen and (max-width: 767px) {
  .p-btn-closing {
    width: 67.7333333333vw;
  }
}
.p-btn-closing__click, .p-btn-closing__kick {
  position: absolute;
}
.p-btn-closing__img {
  transition: 0.4s filter;
}
.p-btn-closing__click {
  z-index: 2;
  transition: 0.4s rotate;
}
@media screen and (min-width: 768px) {
  .p-btn-closing__click {
    width: 10.5%;
    left: 60%;
    top: 41%;
  }
}
@media screen and (max-width: 767px) {
  .p-btn-closing__click {
    width: 7.6vw;
    top: 6.6666666667vw;
    left: 40.8vw;
  }
}
.p-btn-closing__kick {
  transition: 0.2s transform;
}
@media screen and (min-width: 768px) {
  .p-btn-closing__kick {
    width: 34%;
    left: 67.5%;
    top: -18%;
  }
}
@media screen and (max-width: 767px) {
  .p-btn-closing__kick {
    width: 24.4vw;
    top: -2.1333333333vw;
    right: -3.2vw;
  }
}
@media (hover: hover) {
  .p-btn-closing:hover .p-btn-closing__img {
    filter: hue-rotate(-200deg);
  }
  .p-btn-closing:hover .p-btn-closing__kick {
    transform: translateX(-10px);
  }
  .p-btn-closing:hover .p-btn-closing__click {
    rotate: 360deg;
  }
}

/*========================================
  hdr
========================================*/
/*========================================
  アイコン
========================================*/
.p-icon-arrow-btm {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5em 0.3125em 0 0.3125em;
  border-color: #ffffff transparent transparent transparent;
}

/*========================================
  copy
========================================*/
.p-copy {
  position: relative;
  z-index: 3;
  font-size: 62.5%;
}
@media screen and (max-width: 767px) {
  .p-copy {
    font-size: 1.8666666667vw;
  }
}

/*========================================
  fv
========================================*/
.p-fv {
  position: relative;
  z-index: 2;
  background: url("../img/fv_bg.png") 50% 50%/cover;
  overflow-y: clip;
}
@media screen and (max-width: 767px) {
  .p-fv {
    background: url("../img/fv_bg_sp.png") 50% 0%/auto 160.1333333333vw no-repeat;
    height: calc(160.1333333333vw + 1080px);
  }
}
@media (min-width: 425px) and (max-width: 499px) {
  .p-fv {
    height: calc(160.1333333333vw + 1025px);
  }
}
@media (min-width: 500px) and (max-width: 599px) {
  .p-fv {
    height: calc(160.1333333333vw + 985px);
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .p-fv {
    height: calc(160.1333333333vw + 970px);
  }
}
.p-fv__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-fv__inner {
    padding-block: 0 1.6875em;
  }
}
@media (min-width: 1201px) {
  .p-fv__inner {
    padding-block: 0 3.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .p-fv__inner {
    --base-width: 694;
  }
}
.p-fv__ttl {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-fv__ttl {
    padding-top: 0.3125em;
    margin-left: -6.25em;
    width: 49.6875em;
  }
}
@media screen and (max-width: 767px) {
  .p-fv__ttl {
    width: 100vw;
    height: 45.8666666667vw;
    margin-inline: -3.7333333333vw;
    padding-top: 3.2vw;
  }
}
.p-fv__rider {
  position: absolute;
  transform: translateX(-20%);
  filter: brightness(6000%);
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .p-fv__rider {
    top: 10em;
    left: 0;
    width: 51.4375em;
  }
}
@media screen and (max-width: 767px) {
  .p-fv__rider {
    top: 36vw;
    right: -4vw;
    width: 94.9333333333vw;
  }
}
.p-fv__intro {
  position: relative;
  border-radius: 1.25em;
  max-width: 19.0625em;
  margin-top: 11.5625em;
  padding: 1.0625em 1.5625em;
  overflow: hidden;
  z-index: 3;
  filter: brightness(6000%);
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .p-fv__intro {
    border-radius: 1.3333333333vw;
    max-width: 71.4666666667vw;
    margin-top: 43.2vw;
    padding: 5.0666666667vw 4.8vw;
  }
}
.p-fv__intro::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to top, #2d2dd2, #58a5fb);
  width: 100%;
  height: 100%;
  opacity: 0.9;
  z-index: -1;
}
.p-fv__intro-ttl {
  width: 12.9375em;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-fv__intro-ttl {
    width: 49.8666666667vw;
    margin-inline: auto 2.6666666667vw;
  }
}
.p-fv__intro-txt {
  margin-top: 0.8333333333em;
  padding-inline: 0.3333333333em;
  text-align: justify;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: -0.02em;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-fv__intro-txt {
    margin-top: 3.7333333333vw;
    padding-inline: 1.3333333333vw;
    font-size: 2.9333333333vw;
  }
}
.p-fv__copy {
  margin-top: 0.3125em;
}
@media screen and (max-width: 767px) {
  .p-fv__copy {
    margin-top: 1.3333333333vw;
  }
}
.p-fv__bg-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .p-fv__bg-sp {
    display: block;
    position: absolute;
    bottom: 0;
    background-color: #000;
    width: 100%;
    height: calc(100% - 153.4666666667vw);
    clip-path: polygon(0 6.6666666667vw, 100% 0%, 100% 100%, 0% 100%);
  }
}

/*========================================
  sec
========================================*/
.p-sec-a {
  position: relative;
  background: url("../img/sec_a_bg.png") 50% 0%/cover;
  margin-top: -5em;
  z-index: 2;
  overflow-y: clip;
}
@media (min-width: 1201px) {
  .p-sec-a {
    margin-top: -6.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-a {
    background-image: url("../img/sec_a_bg_sp.png");
    margin-top: -6.6666666667vw;
  }
}
.p-sec-a__inner {
  position: relative;
  padding-block: 7.625em 4.375em;
}
@media (min-width: 1201px) {
  .p-sec-a__inner {
    padding-block: 10.1666666667vw 5.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-a__inner {
    --base-width: 750;
    padding-block: 13.3333333333vw 8vw;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-a__ttl {
    width: 26.875em;
    margin-inline: auto 4.75em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-a__ttl {
    width: 91.7333333333vw;
    margin-inline: auto;
  }
}
.p-sec-a__villain {
  position: absolute;
  z-index: 2;
  transform: translateY(200px);
  opacity: 0;
}
.p-sec-a__villain.is-fire {
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .p-sec-a__villain {
    top: calc(50% - 14.6875em);
    left: 1.875em;
    width: 39.875em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-a__villain {
    top: 73.3333333333vw;
    left: -4vw;
    width: 113.6vw;
  }
  .p-sec-a__villain img {
    width: 100%;
  }
}
.p-sec-a__shocker {
  position: absolute;
}
.p-sec-a__shocker img {
  width: 100%;
}
.p-sec-a__shocker.is-1 {
  transform: translateX(-200px);
  opacity: 0;
}
.p-sec-a__shocker.is-1.is-fire {
  transform: translateX(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .p-sec-a__shocker.is-1 {
    left: -1.5625em;
    bottom: -4.6875em;
    width: 14.125em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-a__shocker.is-1 {
    top: 130.6666666667vw;
    left: -8vw;
    width: 46.4vw;
  }
}
.p-sec-a__shocker.is-2 {
  transform: translateX(200px);
  opacity: 0;
}
.p-sec-a__shocker.is-2.is-fire {
  transform: translateX(0);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .p-sec-a__shocker.is-2 {
    right: 8.125em;
    bottom: -1.875em;
    width: 9.75em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-a__shocker.is-2 {
    right: 0;
    top: 97.3333333333vw;
    width: 32vw;
  }
}
.p-sec-a__copy {
  padding-top: 17.5em;
  text-align: right;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-sec-a__copy {
    padding: 105.3333333333vw 2.6666666667vw 0 0;
  }
}

/*========================================
  sec
========================================*/
.p-sec-b {
  position: relative;
  margin-top: -4.875em;
  background: url("../img/sec_b_bg_gake.png") left 50% bottom -5.625em/137.5em no-repeat, url("../img/sec_b_img.png") left calc(50% + 13.125em) bottom -3.75em/24.3125em 37.25em no-repeat, url("../img/sec_b_bg.png") 50% 0%/cover;
  z-index: 2;
}
@media (min-width: 1201px) {
  .p-sec-b {
    margin-top: -6.5vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-b {
    background: url("../img/sec_b_bg_sp.png") 50% 0/cover;
    margin-top: -6.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-b__inner {
    --base-width: 800;
    padding-block: 7.1875em 5em;
  }
}
@media (min-width: 1201px) {
  .p-sec-b__inner {
    padding-block: 9.5833333333vw 6.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-b__inner {
    padding-block: 13.3333333333vw 8vw;
  }
}
.p-sec-b__ttl {
  width: 25.625em;
  margin-left: 0.3125em;
}
@media screen and (max-width: 767px) {
  .p-sec-b__ttl {
    width: 81.3333333333vw;
    margin-left: 2.6666666667vw;
  }
}
.p-sec-b__txt {
  width: 28.125em;
  margin-top: 2.8125em;
  margin-left: -0.625em;
}
@media screen and (max-width: 767px) {
  .p-sec-b__txt {
    width: 89.0666666667vw;
    margin-top: 82.1333333333vw;
    margin-left: 0;
  }
}
.p-sec-b__copy {
  margin-top: 1.5625em;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .p-sec-b__copy {
    margin-top: 2.1333333333vw;
    margin-right: -4vw;
  }
}

/*========================================
  sec
========================================*/
.p-sec-c {
  position: relative;
  background: url("../img/sec_c_bg_2.png") 50% calc(50% - 0.125em)/62.625em no-repeat, url("../img/sec_c_bg.png") 50% 0%/cover;
  z-index: 2;
  margin-top: -4.875em;
  overflow-y: clip;
}
@media (min-width: 1201px) {
  .p-sec-c {
    margin-top: -6.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-c {
    background-image: url("../img/sec_c_bg_sp.png");
    margin-top: -6.6666666667vw;
  }
}
.p-sec-c__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-sec-c__inner {
    --base-width: 800;
    padding-block: 10.3125em 5.625em;
  }
}
@media (min-width: 1201px) {
  .p-sec-c__inner {
    padding-block: 13.75vw 7.5vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-c__inner {
    padding-block: 10.6666666667vw 8vw;
  }
}
.p-sec-c__ttl {
  width: 27.125em;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .p-sec-c__ttl {
    width: 85.2vw;
    margin-left: 1.3333333333vw;
  }
}
.p-sec-c__rider {
  position: absolute;
  top: calc(50% - 19.375em);
  left: -6.25em;
  width: 32.0625em;
}
@media screen and (max-width: 767px) {
  .p-sec-c__rider {
    top: 69.3333333333vw;
    left: -5.8666666667vw;
    width: 78.1333333333vw;
  }
}
.p-sec-c__copy {
  margin-top: 9em;
}
@media screen and (min-width: 768px) {
  .p-sec-c__copy {
    margin-left: -10em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-c__copy {
    margin-top: 64.5333333333vw;
    margin-right: -4.5333333333vw;
    text-align: right;
  }
}

/*========================================
  sec
========================================*/
.p-sec-d {
  position: relative;
  background: url("../img/sec_d_bg_gake.png") left 50% bottom -3.75em/137.5em no-repeat, url("../img/sec_d_bg.png") 50% 0%/cover;
  z-index: 2;
  margin-top: -4.6875em;
  overflow: clip;
}
@media (min-width: 1201px) {
  .p-sec-d {
    margin-top: -6.25vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-d {
    background: url("../img/sec_d_bg_sp.png") 50% 0/cover;
    margin-top: -6.6666666667vw;
  }
}
.p-sec-d__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-sec-d__inner {
    padding-block: 6.875em 4.375em;
  }
}
@media (min-width: 1201px) {
  .p-sec-d__inner {
    padding-block: 9.1666666667vw 5.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-d__inner {
    padding-block: 12vw 2.6666666667vw;
  }
}
.p-sec-d__ttl {
  position: relative;
  width: 27.1875em;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-sec-d__ttl {
    width: 87.3333333333vw;
    margin-left: 1.3333333333vw;
  }
}
.p-sec-d__img {
  position: absolute;
  left: 0.625em;
  width: 22.5625em;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-sec-d__img {
    bottom: 4vw;
    left: 5.8666666667vw;
    width: 83.2vw;
  }
}
.p-sec-d__human {
  position: absolute;
  top: calc(50% - 10.625em);
  right: 17.625em;
  width: 10.4375em;
}
@media screen and (max-width: 767px) {
  .p-sec-d__human {
    top: 75.7333333333vw;
    right: initial;
    left: 17.0666666667vw;
    width: 30.5333333333vw;
  }
}
.p-sec-d__shocker-before {
  position: absolute;
  top: calc(50% - 7.1875em);
  right: 20em;
  width: 16.3125em;
}
@media screen and (max-width: 767px) {
  .p-sec-d__shocker-before {
    top: 90.6666666667vw;
    right: initial;
    left: -8vw;
    width: 52vw;
  }
}
.p-sec-d__shocker-after {
  position: absolute;
  top: calc(50% - 7.1875em);
  right: 16.875em;
  width: 18.5em;
}
@media screen and (max-width: 767px) {
  .p-sec-d__shocker-after {
    top: 82.6666666667vw;
    right: initial;
    left: -4vw;
    width: 55.4666666667vw;
  }
}
.p-sec-d__rider-wrap {
  position: absolute;
  top: calc(50% - 13.4375em);
  right: -3.4375em;
  width: 31.375em;
}
@media screen and (max-width: 767px) {
  .p-sec-d__rider-wrap {
    top: 70.6666666667vw;
    right: -5.8666666667vw;
    width: 80.5333333333vw;
  }
}
.p-sec-d__rider-bubble {
  display: block;
  position: absolute;
  top: -3.125em;
  left: 6.25em;
  width: 12.75em;
}
@media screen and (max-width: 767px) {
  .p-sec-d__rider-bubble {
    top: -10.6666666667vw;
    left: 23.4666666667vw;
    width: 38vw;
  }
}
.p-sec-d__rider {
  display: block;
}
.p-sec-d__copy {
  margin-top: 15.3em;
  padding-right: 0.3125em;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .p-sec-d__copy {
    margin-top: 116vw;
    margin-left: -4vw;
    text-align: left;
  }
}
.p-sec-d__ani .p-sec-d__rider-wrap {
  opacity: 0;
  transform: translate3d(15.625em, -6.25em, 0);
}
.p-sec-d__ani .p-sec-d__shocker-before {
  transition-delay: 0.21s;
  opacity: 1;
}
.p-sec-d__ani .p-sec-d__shocker-after {
  transition-delay: 0.21s;
  opacity: 0;
}
.p-sec-d__ani.is-fire .p-sec-d__rider-wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.p-sec-d__ani.is-fire .p-sec-d__shocker-before {
  opacity: 0;
}
.p-sec-d__ani.is-fire .p-sec-d__shocker-after {
  opacity: 1;
}

/*========================================
  sec
========================================*/
.p-sec-e {
  background: url("../img/sec_e_bg_1_arrow.png") 50% -3.75em/25.9375em no-repeat, url("../img/sec_e_bg_1_img.png") calc(50% + 6.25em) 6.875em/44.3125em no-repeat, url("../img/sec_e_bg_1_foot_arrow.png") 50% calc(53.875em - 7.5625em)/100% 7.5em no-repeat, linear-gradient(#000, #000) 50% 0/100% calc(53.875em - 7.5em) no-repeat, url("../img/sec_e_bg_2_arrow.png") 0 calc(53.875em + 21.875em)/100% no-repeat, url("../img/sec_e_bg_2_line.png") 0 calc(53.875em - 8.25em)/100% no-repeat;
  z-index: 2;
  margin-top: -4.75em;
  overflow-y: clip;
  clip-path: polygon(0 4.6875em, 100% 0, 100% 100%, 0% 100%);
}
@media (min-width: 1201px) {
  .p-sec-e {
    margin-top: -6.3333333333vw;
    clip-path: polygon(0 6.25vw, 100% 0, 100% 100%, 0% 100%);
  }
}
@media screen and (max-width: 767px) {
  .p-sec-e {
    background: url("../img/sec_e_bg_1_sp.png") top 0 left 0/100% no-repeat, url("../img/sec_e_bg_2_sp.png") top 125.3333333333vw left 0/100% no-repeat;
    margin-top: -14vw;
    clip-path: polygon(0 13.3333333333vw, 100% 0, 100% 100%, 0% 100%);
  }
}
.p-sec-e__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-sec-e__inner {
    --base-width: 800;
    padding-block: 21.25em 10.3125em;
  }
}
@media (min-width: 1201px) {
  .p-sec-e__inner {
    padding-block: 21.25em 13.75vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-e__inner {
    padding-block: 72vw 24vw;
  }
}
.p-sec-e__bubble {
  width: 20.3125em;
}
@media screen and (max-width: 767px) {
  .p-sec-e__bubble {
    width: 48.5333333333vw;
  }
}
.p-sec-e__ttl {
  width: 51.625em;
  margin-top: -0.3125em;
  margin-inline: -0.625em;
}
@media screen and (max-width: 767px) {
  .p-sec-e__ttl {
    width: 91.0666666667vw;
    margin-top: 0.8vw;
    margin-inline: -1.3333333333vw;
  }
}
.p-sec-e__img {
  width: 49.0625em;
  margin-top: 1.25em;
  margin-inline: auto 0.9375em;
}
@media screen and (max-width: 767px) {
  .p-sec-e__img {
    width: 76.2666666667vw;
    margin-top: 1.3333333333vw;
    margin-inline: auto;
  }
}
.p-sec-e__box {
  width: 51.625em;
  margin-top: 0.3125em;
  margin-inline: -0.625em;
}
@media screen and (max-width: 767px) {
  .p-sec-e__box {
    width: 90.9333333333vw;
    margin-top: 2.6666666667vw;
    margin-inline: -1.3333333333vw;
  }
}
.p-sec-e__copy-1 {
  margin-top: 0.3125em;
  text-align: right;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-sec-e__copy-1 {
    margin-top: -3.2vw;
    margin-right: -4.2666666667vw;
  }
}
.p-sec-e__copy-2 {
  padding-left: 6em;
}
@media screen and (max-width: 767px) {
  .p-sec-e__copy-2 {
    margin-top: 1.3333333333vw;
    padding-left: 18.6666666667vw;
  }
}

/*========================================
  sec
========================================*/
.p-sec-f {
  background: url("../img/sec_f_bg.png") 50% 0/cover no-repeat;
  z-index: 2;
  margin-top: -7.8125em;
  overflow-y: clip;
}
@media (min-width: 1201px) {
  .p-sec-f {
    margin-top: -10.4166666667vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f {
    background: url("../img/sec_f_bg_sp.png") 50% 8vw/100% no-repeat;
    margin-top: -17.6vw;
  }
}
.p-sec-f__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-sec-f__inner {
    padding-block: 0 7.8125em;
  }
}
@media (min-width: 1201px) {
  .p-sec-f__inner {
    padding-block: 0 10.4166666667vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f__inner {
    padding-block: 0 16vw;
  }
}
.p-sec-f__ttl {
  width: 44em;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-sec-f__ttl {
    width: 88vw;
  }
}
.p-sec-f__point-wrap {
  display: grid;
  gap: 5em;
  margin-top: 5.5em;
}
@media screen and (max-width: 767px) {
  .p-sec-f__point-wrap {
    gap: 10.6666666667vw;
    margin-top: 13.3333333333vw;
  }
}

.p-sec-f-point {
  position: relative;
}
.p-sec-f-point::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.875em;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/sec_f_obi.png) 0/contain no-repeat;
  width: 66.3125em;
  height: 19.625em;
  z-index: -1;
}
.p-sec-f-point__head {
  display: grid;
  position: relative;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__head {
    grid-template-columns: 1fr auto;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__head.p-sec-f-point__head--rev {
    grid-template-columns: auto 1fr;
    gap: 1.875em;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__head.p-sec-f-point__head--rev .p-sec-f-point__txt-area {
    grid-row: 1;
    grid-column: 2;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__head.p-sec-f-point__head--rev .p-sec-f-point__lead {
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__head.p-sec-f-point__head--rev .p-sec-f-point__ttl {
    margin-left: 1.25em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__head.p-sec-f-point__head--rev .p-sec-f-point__ttl {
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__head.p-sec-f-point__head--rev .p-sec-f-point__txt {
    margin-left: 0.8333333333em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__head.p-sec-f-point__head--rev .p-sec-f-point__txt {
    text-align: right;
  }
}
.p-sec-f-point__lead.p-sec-f-point__lead--1 {
  width: 26.5em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__lead.p-sec-f-point__lead--1 {
    width: 59.2vw;
  }
}
.p-sec-f-point__lead.p-sec-f-point__lead--2 {
  width: 26.5em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__lead.p-sec-f-point__lead--2 {
    width: 59.2vw;
  }
}
.p-sec-f-point__ttl {
  margin-top: 2.5em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__ttl {
    margin-top: 5.3333333333vw;
  }
}
.p-sec-f-point__ttl.p-sec-f-point__ttl--1 {
  width: 33.5em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__ttl.p-sec-f-point__ttl--1 {
    width: 42vw;
  }
}
.p-sec-f-point__ttl.p-sec-f-point__ttl--2 {
  width: 32.8125em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__ttl.p-sec-f-point__ttl--2 {
    width: 49.3333333333vw;
  }
}
.p-sec-f-point__txt {
  margin-top: 0.75em;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.55;
  font-feature-settings: "palt" 1;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__txt {
    margin-top: 5.3333333333vw;
    font-size: 3.2vw;
  }
}
.p-sec-f-point__img-1, .p-sec-f-point__img-2 {
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__img-1, .p-sec-f-point__img-2 {
    position: absolute;
    z-index: -1;
  }
}
.p-sec-f-point__img-1 {
  width: 21.25em;
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__img-1 {
    right: 0.9375em;
    margin-top: -0.625em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__img-1 {
    top: 14.9333333333vw;
    right: 0;
    width: 44.1333333333vw;
  }
}
.p-sec-f-point__img-2 {
  width: 21em;
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__img-2 {
    margin-top: -0.625em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__img-2 {
    top: 13.8666666667vw;
    left: -0.8vw;
    width: 43.6vw;
  }
}
.p-sec-f-point__img-2 .p-sec-f-point__copy {
  right: -2.3em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__img-2 .p-sec-f-point__copy {
    right: initial;
    bottom: -0.8vw;
    left: -3.2vw;
  }
}
.p-sec-f-point__content {
  position: relative;
  border-radius: 2.5em;
  background-color: #fff;
  margin-top: -0.625em;
  box-shadow: 1px 1px 12px 0px rgba(135, 135, 135, 0.5);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__content {
    border-radius: 5.3333333333vw;
    margin-top: 8vw;
  }
}
.p-sec-f-point__content.p-sec-f-point__content--1 {
  padding: 2.5em 5.4375em 0 3.75em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__content.p-sec-f-point__content--1 {
    padding: 7.2vw 7.4666666667vw 2.4vw;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__content.p-sec-f-point__content--1 .p-sec-f-point__list {
    padding-top: 0.625em;
  }
}
.p-sec-f-point__content.p-sec-f-point__content--2 {
  padding: 3.75em 3.75em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__content.p-sec-f-point__content--2 {
    padding: 7.2vw 4vw 10.6666666667vw 7.4666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__content.p-sec-f-point__content--2 .p-sec-f-point__list {
    gap: 2.3125em;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__content.p-sec-f-point__content--2 .p-sec-f-point__list > li {
    padding-left: 2.7272727273em;
    font-size: 1.375em;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__content.p-sec-f-point__content--2 .p-sec-f-point__list > li::before {
    width: 2.0909090909em;
    height: 2.0909090909em;
  }
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__content.p-sec-f-point__content--2 .p-sec-f-point__list > li .line:nth-of-type(2) {
    margin-left: -0.3125em;
    padding-left: 0;
  }
}
.p-sec-f-point__content.p-sec-f-point__content--2 .p-sec-f-point__list > li small {
  font-size: 0.7272727273em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__content.p-sec-f-point__content--2 .p-sec-f-point__list > li small {
    font-size: 2.9333333333vw;
  }
}
.p-sec-f-point__col {
  display: grid;
}
@media screen and (min-width: 768px) {
  .p-sec-f-point__col {
    grid-template-columns: 1fr auto;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__col {
    gap: 5.3333333333vw;
  }
}
.p-sec-f-point__list {
  display: grid;
  align-content: start;
  gap: 1.5625em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__list {
    gap: 3.2vw;
  }
}
.p-sec-f-point__list > li {
  position: relative;
  padding-left: 3.1578947368em;
  font-size: 1.1875em;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__list > li {
    padding-left: 13.3333333333vw;
    font-size: 3.7333333333vw;
    line-height: 1.7;
    font-feature-settings: "palt" 1;
  }
}
.p-sec-f-point__list > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url(../img//sec_f_icon.png) 0/contain no-repeat;
  width: 2.4210526316em;
  height: 2.4210526316em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__list > li::before {
    width: 9.8666666667vw;
    height: 9.8666666667vw;
  }
}
.p-sec-f-point__list > li .line {
  background-image: linear-gradient(transparent calc(100% - 0.7368421053em), #fcff00 calc(100% - 0.7368421053em));
  padding-inline: 0.3125em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__list > li .line {
    background-image: linear-gradient(transparent calc(100% - 2.8vw), #fcff00 calc(100% - 2.8vw));
    padding-inline: 0.6666666667vw;
  }
}
.p-sec-f-point__content-img-1 {
  width: 24.8125em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__content-img-1 {
    width: 59.3333333333vw;
    margin-inline: auto;
  }
}
.p-sec-f-point__content-img-2 {
  width: 49.125em;
  margin-top: 3em;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__content-img-2 {
    width: 78.9333333333vw;
    margin-top: 8vw;
    margin-inline: -4vw 0;
  }
}
.p-sec-f-point__copy {
  position: absolute;
  right: 0;
  bottom: 1.7em;
}
@media screen and (max-width: 767px) {
  .p-sec-f-point__copy {
    right: -4.5333333333vw;
    bottom: 0;
  }
}

/*========================================
  sec
========================================*/
.p-sec-g {
  background: url("../img/sec_g_bg.png") 50% 0.9375em/100% no-repeat;
  z-index: 2;
  margin-top: -6.875em;
  overflow-y: clip;
}
@media (min-width: 1201px) {
  .p-sec-g {
    margin-top: -9.1666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-g {
    background-image: url("../img/sec_g_bg_sp.png");
    margin-top: -12vw;
  }
}
.p-sec-g__inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-sec-g__inner {
    --base-width: 800;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-g__inner {
    padding-top: 2.6666666667vw;
  }
}
.p-sec-g__rider {
  width: 46.625em;
  margin-inline: 1.5625em auto;
}
@media screen and (max-width: 767px) {
  .p-sec-g__rider {
    position: relative;
    left: -8.5333333333vw;
    width: 92.5333333333vw;
  }
}
.p-sec-g__copy {
  position: absolute;
  top: 43em;
  left: 10em;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-sec-g__copy {
    top: 65.3333333333vw;
    left: -4.5333333333vw;
  }
}

/*========================================
  sec
========================================*/
.p-sec-h {
  background: url("../img/sec_h_bg_1.png") 50% 0/100% 31.125em no-repeat, url("../img/sec_h_bg_2.png") 50% 100%/100% no-repeat;
  z-index: 2;
  margin-top: -12.8125em;
}
@media (min-width: 1201px) {
  .p-sec-h {
    margin-top: -11.875em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-h {
    background-image: url("../img/sec_h_bg_1_sp.png"), url("../img/sec_h_bg_2_sp.png");
    margin-top: -26.6666666667vw;
  }
}
.p-sec-h__inner {
  position: relative;
  padding-block: 16.25em 4.375em;
}
@media screen and (max-width: 767px) {
  .p-sec-h__inner {
    --base-width: 750;
    padding-block: 67.4666666667vw 11.4666666667vw;
  }
}
.p-sec-h__ttl {
  position: relative;
  left: 18em;
  width: 29.875em;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .p-sec-h__ttl {
    left: 6.6666666667vw;
    width: 89.4666666667vw;
  }
}
.p-sec-h__bubble {
  position: absolute;
  top: -3.75em;
  inset-inline: 0.9375em 0;
  width: 19.1875em;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-sec-h__bubble {
    top: -6.6666666667vw;
    inset-inline: 0;
    width: 47.0666666667vw;
  }
}
.p-sec-h__rider-1, .p-sec-h__rider-2 {
  position: absolute;
  z-index: 2;
}
.p-sec-h__rider-1 {
  top: 4.75em;
  left: 7.375em;
  width: 24.9375em;
}
@media screen and (max-width: 767px) {
  .p-sec-h__rider-1 {
    top: 24vw;
    left: 0;
    width: 52.2666666667vw;
  }
}
.p-sec-h__rider-2 {
  top: 1.5625em;
  right: -1.5625em;
  width: 29.125em;
}
@media screen and (max-width: 767px) {
  .p-sec-h__rider-2 {
    top: 23.4666666667vw;
    right: 0;
    width: 54.2666666667vw;
  }
}
.p-sec-h__boy {
  position: absolute;
  top: 12.1875em;
  left: 0.3125em;
  width: 15em;
}
@media screen and (max-width: 767px) {
  .p-sec-h__boy {
    top: 6.6666666667vw;
    left: initial;
    right: 1.0666666667vw;
    width: 30.9333333333vw;
  }
}
.p-sec-h__villain {
  position: absolute;
  top: 34.0625em;
  right: 3.4375em;
  width: 50.3125em;
}
@media screen and (max-width: 767px) {
  .p-sec-h__villain {
    top: 129.6vw;
    right: 0;
    width: 99.7333333333vw;
  }
}
.p-sec-h__txt {
  position: relative;
  margin-top: 5.2272727273em;
  text-align: center;
  font-size: 1.375em;
  font-weight: 700;
  line-height: 2.35;
  letter-spacing: -0.02em;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-sec-h__txt {
    margin-top: 29.8666666667vw;
    padding-right: 5.3333333333vw;
    font-size: 3.6vw;
  }
}
.p-sec-h__txt .line {
  background-image: linear-gradient(#f6ff00, #f6ff00);
  padding: 0.1875em 0.75em;
}
.p-sec-h__copy {
  position: absolute;
  top: 49.5em;
  left: 0;
}
@media screen and (max-width: 767px) {
  .p-sec-h__copy {
    top: initial;
    bottom: 1.3333333333vw;
    left: 2.1333333333vw;
  }
}
.p-sec-h__ani .p-sec-h__bubble {
  transform: scale(0.6);
  opacity: 0;
  transition-duration: 0.1s;
}
.p-sec-h__ani .p-sec-h__rider-1,
.p-sec-h__ani .p-sec-h__rider-2 {
  transform: scale(0);
  transition-delay: 0.5s;
}
.p-sec-h__ani .p-sec-h__ttl {
  transform: scale(0);
  transition-delay: 0.8s;
  transition-duration: 0.3s;
}
.p-sec-h__ani .p-sec-h__villain {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition-delay: 1.4s;
  transition-duration: 0.3s;
}
.p-sec-h__ani.is-fire .p-sec-h__bubble {
  transform: scale(1);
  opacity: 1;
}
.p-sec-h__ani.is-fire .p-sec-h__rider-1,
.p-sec-h__ani.is-fire .p-sec-h__rider-2 {
  transform: scale(1);
}
.p-sec-h__ani.is-fire .p-sec-h__ttl {
  transform: scale(1);
}
.p-sec-h__ani.is-fire .p-sec-h__villain {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*========================================
  sec
========================================*/
.p-sec-i__inner {
  position: relative;
  padding-block: 0 3.4375em;
}
@media screen and (min-width: 768px) {
  .p-sec-i__inner {
    --base-width: 800;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-i__inner {
    padding-block: 0 8vw;
  }
}
.p-sec-i__hdr {
  position: relative;
}
@media (min-width: 1201px) {
  .p-sec-i__hdr {
    max-width: 75em;
    margin-inline: auto;
  }
}
.p-sec-i__hdr .p-sec-i__copy {
  position: absolute;
  right: 18em;
  bottom: 3em;
}
@media screen and (max-width: 767px) {
  .p-sec-i__hdr .p-sec-i__copy {
    right: 0.6666666667vw;
    bottom: 4vw;
  }
}
.p-sec-i__ttl {
  width: 100%;
}
.p-sec-i__sttl {
  width: 42.75em;
  margin: 2.5em auto 0;
}
@media screen and (max-width: 767px) {
  .p-sec-i__sttl {
    width: 86.6666666667vw;
    margin-top: 7.4666666667vw;
  }
}
.p-sec-i__box {
  border-radius: 1.875em;
  background: url(../img/sec_i_box_bg.png) 50% 0/cover no-repeat;
  margin-top: 2.5em;
  padding: 10em 8.75em 5.3125em;
  box-shadow: 1px 1px 12px 0px rgba(135, 135, 135, 0.5);
}
@media screen and (max-width: 767px) {
  .p-sec-i__box {
    border-radius: 4vw;
    background-image: url(../img/sec_i_box_bg_sp.png);
    padding: 28.5333333333vw 2.6666666667vw 13.3333333333vw;
    margin-top: 5.3333333333vw;
  }
}
.p-sec-i__box + .p-sec-i__copy {
  margin-top: 0.25em;
}
@media screen and (max-width: 767px) {
  .p-sec-i__box + .p-sec-i__copy {
    margin-top: 0.6666666667vw;
  }
}
.p-sec-i__head {
  position: relative;
}
.p-sec-i__head-txt {
  position: relative;
  width: 31.8125em;
  margin-inline: auto;
  z-index: 4;
}
@media screen and (max-width: 767px) {
  .p-sec-i__head-txt {
    width: 76.6666666667vw;
  }
}
.p-sec-i__boy, .p-sec-i__rider-1, .p-sec-i__rider-2 {
  position: absolute;
}
.p-sec-i__boy img, .p-sec-i__rider-1 img, .p-sec-i__rider-2 img {
  width: 100%;
}
.p-sec-i__boy {
  top: -14.0625em;
  inset-inline: 0;
  width: 19.75em;
  margin-inline: auto;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-sec-i__boy {
    top: -35.2vw;
    width: 49.8666666667vw;
  }
}
.p-sec-i__rider-1 {
  top: -13.75em;
  left: 0.625em;
  width: 20.0625em;
}
@media screen and (max-width: 767px) {
  .p-sec-i__rider-1 {
    top: -35.2vw;
    left: 1.6vw;
    width: 50.6666666667vw;
  }
}
.p-sec-i__rider-2 {
  top: -13.9375em;
  right: 0.625em;
  width: 25.875em;
}
@media screen and (max-width: 767px) {
  .p-sec-i__rider-2 {
    top: -36.2666666667vw;
    right: 0;
    width: 67.7333333333vw;
  }
}
.p-sec-i__logo {
  width: 31.875em;
  margin: 3.25em auto 0;
}
@media screen and (max-width: 767px) {
  .p-sec-i__logo {
    width: 74.1333333333vw;
    margin-top: 9.3333333333vw;
  }
}
.p-sec-i__ani .p-sec-i__boy,
.p-sec-i__ani .p-sec-i__rider-1,
.p-sec-i__ani .p-sec-i__rider-2 {
  filter: brightness(6000%);
  opacity: 0;
  transform: translateY(1.25em);
}
.p-sec-i__ani .p-sec-i__boy.is-fire,
.p-sec-i__ani .p-sec-i__rider-1.is-fire,
.p-sec-i__ani .p-sec-i__rider-2.is-fire {
  filter: brightness(100%);
  opacity: 1;
  transform: translateY(0);
}

/*========================================
  sec
========================================*/
@keyframes shiny {
  0% {
    left: -45%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
.p-sec-j {
  background: #d7e1e2 url("../img/sec_j_bg.png") calc(50% + 0.8125em) calc(50% + 7.8125em)/73.4375em 43.3125em no-repeat;
  padding-bottom: 0.625em;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-sec-j {
    background: #d7e1e2 url("../img/sec_j_bg_sp.png") left 50% bottom 39%/100% no-repeat;
    padding-bottom: 0.6666666667vw;
  }
}
.p-sec-j__inner {
  position: relative;
  padding-block: 5.3125em 2.1875em;
}
@media screen and (min-width: 768px) {
  .p-sec-j__inner {
    --base-width: 800;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-j__inner {
    padding-block: 12vw 5.3333333333vw;
  }
}
.p-sec-j__box {
  display: grid;
	align-items: center;
  grid-template-columns: 17.0625em 1fr;
  gap: 3.4375em;
  border-radius: 2.5em;
  background-color: #fff;
  box-shadow: 1px 1px 12px 0px rgba(135, 135, 135, 0.5);
  padding: 3.75em 4.0625em;
}
@media screen and (max-width: 767px) {
  .p-sec-j__box {
    grid-template-columns: 1fr;
    gap: 6vw;
    border-radius: 5.3333333333vw;
    padding: 12vw 10.6666666667vw 8vw;
  }
}
.p-sec-j__box-content {
  margin-top: -0.5em;
}
@media screen and (max-width: 767px) {
  .p-sec-j__box-content {
    margin-top: 0;
  }
}
.p-sec-j__box-img {
  width: 100%;
}
.p-sec-j__box-img img {
  width: 100%;
  object-fit: cover;
}
.p-sec-j__box-ttl {
  font-size: 1.5em;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .p-sec-j__box-ttl {
    font-size: 4vw;
  }
}
.p-sec-j__box-txt {
  margin-top: 1.25em;
  font-size: 1em;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .p-sec-j__box-txt {
    margin-top: 2.6666666667vw;
    font-size: 3.2vw;
  }
}
.p-sec-j__unit {
  margin-top: 7.8125em;
}
@media screen and (max-width: 767px) {
  .p-sec-j__unit {
    margin-top: 26.6666666667vw;
  }
}
.p-sec-j__unit + .p-sec-j__unit {
  margin-top: 4.6875em;
}
@media screen and (max-width: 767px) {
  .p-sec-j__unit + .p-sec-j__unit {
    margin-top: 10.6666666667vw;
  }
}
.p-sec-j__ttl {
  width: 33.625em;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-sec-j__ttl {
    width: 71.7333333333vw;
  }
}
.p-sec-j__movie {
  aspect-ratio: 560/315;
  margin-top: 1.5625em;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-sec-j__movie {
    width: 40em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-j__movie {
    margin: 4vw 5.3333333333vw 0;
  }
}
.p-sec-j__movie iframe {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.p-sec-j__wbtn {
  text-align: center;
  margin-top: 1.5625em;
}
@media screen and (max-width: 767px) {
  .p-sec-j__wbtn {
    margin-top: 4vw;
  }
}
.p-sec-j__wbtn a {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .p-sec-j__wbtn a {
    margin: 0 0.9em;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-j__wbtn a + a {
    margin-top: 1.3333333333vw;
  }
}
.p-sec-j__btn {
  overflow: hidden;
  box-shadow: 2.5px 4.33px 10px 0px rgba(91, 91, 91, 0.54);
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .p-sec-j__btn {
    border-radius: 1.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .p-sec-j__btn img {
    width: 53.3333333333vw;
  }
}
.p-sec-j__btn::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: -10%;
  left: -45%;
  width: 40px;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
}
@media (hover: hover) {
  .p-sec-j__btn:hover::after {
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
  }
}
.p-sec-j__copy {
  text-align: right;
  padding-right: 0.625em;
}

/*========================================
  sec
========================================*/
.p-sec {
  position: relative;
}

/*========================================
  form
========================================*/
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.p-form {
  position: absolute;
  top: -2.9375em;
  left: calc(50% + 12.5em);
  width: 23.875em;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .p-form {
    top: 147.4666666667vw;
    inset-inline: 0;
    width: 92vw;
    margin-inline: auto;
  }
}
.p-form__ttl-wrap {
  position: relative;
  width: 16.625em;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-form__ttl-wrap {
    width: 63.4666666667vw;
  }
}
.p-form__ttl-wrap::before, .p-form__ttl-wrap::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  background-color: #55534f;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  aspect-ratio: 24/52;
  width: 1.5em;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .p-form__ttl-wrap::before, .p-form__ttl-wrap::after {
    aspect-ratio: 45/95;
    width: 6vw;
  }
}
.p-form__ttl-wrap::before {
  left: 0;
}
@media screen and (max-width: 767px) {
  .p-form__ttl-wrap::before {
    left: -0.6666666667vw;
  }
}
.p-form__ttl-wrap::after {
  right: 0;
}
@media screen and (max-width: 767px) {
  .p-form__ttl-wrap::after {
    right: -0.6666666667vw;
  }
}
.p-form__ttl {
  display: grid;
  place-items: center;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  background-image: linear-gradient(to top, #4141cd, #4240d2);
  width: 15.25em;
  height: 3.25em;
  margin-inline: auto;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-form__ttl {
    width: 58.8vw;
    height: 12.6666666667vw;
    font-size: 3.8666666667vw;
  }
}
.p-form__content {
  border-radius: 2.5em;
  background-color: #fff;
  width: 100%;
  height: 40em;
  margin-top: -1.5625em;
  padding: 3em 2.3125em 1.5625em;
  padding: 30px 20px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-form__content {
    border-radius: 5.8666666667vw;
    height: 1015px;
    margin-top: -6.6666666667vw;
    padding: 0 5px;
  }
}
@media (min-width: 425px) and (max-width: 499px) {
  .p-form__content {
    height: 985px;
  }
}
@media (min-width: 500px) and (max-width: 599px) {
  .p-form__content {
    height: 940px;
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .p-form__content {
    height: 930px;
  }
}
.p-form__content iframe {
  border: none;
  width: 100%;
  height: 100%;
}
.p-form__group {
  display: grid;
  gap: 0.75em;
}
@media screen and (max-width: 767px) {
  .p-form__group {
    gap: 3.2vw;
  }
}
.p-form__item.p-form__item--adjust1 {
  margin-top: -0.25em;
}
.p-form__item.p-form__item--adjust2 {
  margin-top: -0.4375em;
}
.p-form__required {
  display: inline-grid;
  place-items: center;
  border-radius: 0.4444444444em;
  background-color: #ff0000;
  margin-left: 0.5555555556em;
  padding: 0.3333333333em 0.4444444444em;
  font-size: 0.5625em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .p-form__required {
    border-radius: 0.5333333333vw;
    font-size: 2.1333333333vw;
  }
}
.p-form__note {
  font-size: 0.625em;
}
@media screen and (max-width: 767px) {
  .p-form__note {
    font-size: 2.4vw;
  }
}
.p-form__note > *::before {
  content: "※";
}
.p-form__label {
  display: flex;
  align-items: center;
  position: relative;
}
.p-form__label .p-form__note {
  margin-left: 0.3125em;
  font-size: 0.75em;
}
@media screen and (max-width: 767px) {
  .p-form__label .p-form__note {
    font-size: 2.8vw;
  }
}
.p-form__label + .p-form__input {
  margin-top: 0.125em;
}
@media screen and (max-width: 767px) {
  .p-form__label + .p-form__input {
    margin-top: 0;
  }
}
.p-form__label-text {
  font-size: 0.8125em;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .p-form__label-text {
    font-size: 3.2vw;
  }
}
.p-form__label-checkbox .p-form__label-text {
  font-size: 0.75em;
}
@media screen and (max-width: 767px) {
  .p-form__label-checkbox .p-form__label-text {
    font-size: 2.8vw;
  }
}
.p-form__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625em;
}
@media screen and (max-width: 767px) {
  .p-form__checkbox-group {
    gap: 3.2vw;
  }
}
.p-form__agree {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3125em;
  margin-top: 0.625em;
}
@media screen and (max-width: 767px) {
  .p-form__agree {
    margin-top: 2.1333333333vw;
  }
}
.p-form__agree .p-form__label-checkbox {
  margin-top: -0.5em;
  letter-spacing: -0.02em;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-form__agree .p-form__label-checkbox {
    margin-top: -2.1333333333vw;
  }
}
.p-form__agree .p-form__label-text,
.p-form__agree .p-form__note {
  font-size: 0.625em;
}
@media screen and (max-width: 767px) {
  .p-form__agree .p-form__label-text,
  .p-form__agree .p-form__note {
    font-size: 2.4vw;
  }
}
.p-form__agree .p-form__note {
  display: block;
}
.p-form__input input[type=text],
.p-form__input input[type=email],
.p-form__input input[type=tel] {
  border-radius: 0.5em;
  border: 1px solid #666;
  width: 100%;
  height: 2.125em;
  font-size: 1em;
}
@media screen and (max-width: 767px) {
  .p-form__input input[type=text],
  .p-form__input input[type=email],
  .p-form__input input[type=tel] {
    border-radius: 1.0666666667vw;
    height: 8vw;
    font-size: 3.7333333333vw;
  }
}
.p-form__input input[type=checkbox],
.p-form__input input[type=radio] {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.p-form__input input[type=checkbox] + label,
.p-form__input input[type=radio] + label {
  cursor: pointer;
}
.p-form__input input[type=checkbox]:focus + label,
.p-form__input input[type=radio]:focus + label {
  text-decoration: underline;
}
.p-form__input input[type=checkbox]:disabled + label,
.p-form__input input[type=radio]:disabled + label {
  cursor: not-allowed;
  color: #ccc;
}
.p-form__input input[type=checkbox] {
  position: relative;
  border-radius: 0.25em;
  border: 1px solid #666;
  background-color: #fff;
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  vertical-align: -0.2em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 0.75em;
}
@media screen and (max-width: 767px) {
  .p-form__input input[type=checkbox] {
    border-radius: 0.5333333333vw;
    font-size: 3.2vw;
  }
}
.p-form__input input[type=checkbox]:checked {
  background-color: #2d2dd2;
}
.p-form__input input[type=checkbox]:checked::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.2em;
  left: 0.1em;
  width: 0.8em;
  height: 0.4em;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.p-form__btn {
  margin-top: 0.3125em;
  text-align: center;
}
.p-form__btn button {
  border: none;
  background-color: transparent;
  width: 13.625em;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .p-form__btn button {
    width: 53.0666666667vw;
  }
}
@media (hover: hover) {
  .p-form__btn button img {
    transition: 0.4s filter;
  }
  .p-form__btn button:hover img {
    filter: hue-rotate(-200deg);
  }
}

/*========================================
  floating
========================================*/
.p-floating {
  position: sticky;
  bottom: 0;
  display: grid;
  place-content: center;
  background-color: rgba(1, 15, 29, 0.6);
  padding-block: 1.25em;
  z-index: 100;
  opacity: 0;
  transition: 0.3s opacity;
}
@media screen and (max-width: 767px) {
  .p-floating {
    padding-block: 2.6666666667vw;
  }
}
.p-floating.is-scrolled {
  opacity: 1;
}

/*========================================
 * hidden
 *
 * クラス : u-hidden-{MQ}
========================================*/
@media screen and (max-width: 767px) {
  .u-hidden-ltSP {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .u-hidden-ltTAB {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .u-hidden-gtTAB {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .u-hidden-gtPC {
    display: none;
  }
}

/*========================================
 * padding
========================================*/
@media screen and (max-width: 1200px) and (min-width: 767px) {
  .u-PC-pad {
    padding-right: 4%;
    padding-left: 4%;
  }
}
@media screen and (max-width: 767px) {
  .u-SP-pad {
    padding-right: var(--sp-pad);
    padding-left: var(--sp-pad);
  }
}
/*========================================
 * スクリーンリーダーテキスト
========================================*/
.screen-reader-text,
.u-screen-reader {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/*========================================
 * text-align
========================================*/
.u-ta-left {
  text-align: left;
}
.u-ta-center {
  text-align: center;
}
.u-ta-right {
  text-align: right;
}

@media screen and (max-width: 767px) {
  .u-SP-ta-left {
    text-align: left;
  }
  .u-SP-ta-center {
    text-align: center;
  }
  .u-SP-ta-right {
    text-align: right;
  }
}