@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap");
@import url("https://kantan-cpn.auone.jp/sp/campaign/kantan_all/common/css/common.css");
/* Reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

header {
  background: #FFF;
  padding: 10px 0 0;
}
header img {
  width: 150px;
  padding: 10px;
}
@media (max-width: 480px) {
  header img {
    width: 120px;
  }
}

ol, ul {
  list-style: none;
}

ul {
  margin: 0;
  padding: 0;
  border: 0;
}

li {
  padding-top: 0.4rem;
  list-style: none;
}

.list_num {
  background: #FFEFAA;
  padding: 1.0625rem 14px 0.9375rem;
  margin: 25px 0;
  border-radius: 10px;
}
@media (max-width: 480px) {
  .list_num {
    margin: 20px 0;
  }
}

.list_num li {
  font-size: 18px;
  line-height: 1.7777777778;
  padding-top: 0;
  transform: rotate(0.05deg);
}
@media (max-width: 480px) {
  .list_num li {
    font-size: 16px;
  }
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

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

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

p {
  /*margin-top: 1em;*/
  margin-bottom: 1em;
  line-height: 1.5em;
}

button {
  appearance: none;
  border-radius: 0;
  width: 100%;
  background: none;
  border: none;
  box-sizing: border-box;
  padding: 0;
  font-weight: 400;
  font-family: "M PLUS Rounded 1c", "メイリオ", "meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}

.indent {
  padding-left: 1em;
  text-indent: -1em;
}

body {
  line-height: 1;
  display: block;
  width: 100%;
  margin: auto;
  background: #fff;
  font-weight: 400;
  font-style: normal;
  font-family: "M PLUS Rounded 1c", "メイリオ", "meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}

a {
  text-decoration: none;
  color: #eb5505;
}

a:active {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:hover img {
  opacity: 0.95;
  filter: alpha(opacity=100);
}

a i {
  padding: 0 2px 0 18px;
}

.title {
  width: 100%;
  height: auto;
  background-image: url("../img/lp/bg-title.png");
  text-align: center;
  color: #fff;
  font-size: 3rem;
  line-height: 1.2083333333;
  font-weight: 800;
  font-family: "M PLUS Rounded 1c", "メイリオ", "meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
  text-shadow: 0.25rem 0.25rem 0 black;
  padding: 1.4375rem 0.625rem 1.6875rem;
  box-sizing: border-box;
}

@media (max-width: 750px) {
  .title {
    font-size: 6.4vw;
  }
}
.mv {
  background: #FFF;
}

.mv img {
  width: 100%;
  height: auto;
  min-height: 1px;
  margin: 0;
  vertical-align: bottom;
  line-height: 0;
}

h5 {
  margin: 30px auto 0;
  font-size: 1.2em;
  line-height: 1.6;
  padding: 0;
  font-family: "M PLUS Rounded 1c", "メイリオ", "meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}

@media screen and (max-width: 460px) {
  h5 {
    font-size: 1em;
  }
}
.txt_white {
  color: #fff;
}

.txt_r {
  text-align: right;
}

.f_b {
  font-weight: bold;
}

/* Google Play */
.f-rbt {
  font-family: "Roboto", sans-serif;
}

br.pc_none {
  display: none;
}

br.pc {
  display: block;
  width: 100%;
}

#wrap {
  width: 750px;
  max-width: 100%;
  color: #000;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 auto;
  overflow: hidden;
}

#wrap h1 {
  padding-top: 0;
  margin-bottom: 0;
}

/* firework */
@keyframes firework {
  0% {
    transform: translate(-50%, 60vh);
    width: 0.5vmin;
    opacity: 1;
  }
  50% {
    width: 0.5vmin;
    opacity: 1;
  }
  80% {
    width: 45vmin;
    opacity: 0;
  }
  /* ② 花火が開いた後にピカッと(再度開いて閉じる) */
  90% {
    width: 40vmin;
    opacity: 1;
  }
  100% {
    width: 45vmin;
    opacity: 0;
  }
}
.firework,
.firework::before,
.firework::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--dot-color) 0.2vmin, rgba(0, 0, 0, 0) 0) 50% 0%, radial-gradient(circle, var(--dot-color) 0.3vmin, rgba(0, 0, 0, 0) 0) 0% 50%, radial-gradient(circle, var(--dot-color) 0.5vmin, rgba(0, 0, 0, 0) 0) 50% 99%, radial-gradient(circle, var(--dot-color) 0.2vmin, rgba(0, 0, 0, 0) 0) 99% 50%, radial-gradient(circle, var(--dot-color) 0.3vmin, rgba(0, 0, 0, 0) 0) 75% 80%, radial-gradient(circle, var(--dot-color) 0.5vmin, rgba(0, 0, 0, 0) 0) 80% 90%, radial-gradient(circle, var(--dot-color) 0.5vmin, rgba(0, 0, 0, 0) 0) 10% 60%, radial-gradient(circle, var(--dot-color) 0.2vmin, rgba(0, 0, 0, 0) 0) 31% 80%, radial-gradient(circle, var(--dot-color) 0.3vmin, rgba(0, 0, 0, 0) 0) 80% 10%, radial-gradient(circle, var(--dot-color) 0.2vmin, rgba(0, 0, 0, 0) 0) 90% 23%, radial-gradient(circle, var(--dot-color) 0.3vmin, rgba(0, 0, 0, 0) 0) 45% 20%, radial-gradient(circle, var(--dot-color) 0.5vmin, rgba(0, 0, 0, 0) 0) 13% 24%, radial-gradient(circle, var(--dot-color) 0.3vmin, rgba(0, 0, 0, 0) 0) 40% 50%, radial-gradient(circle, var(--dot-color) 0.5vmin, rgba(0, 0, 0, 0) 0) 43% 32%, radial-gradient(circle, var(--dot-color) 0.2vmin, rgba(0, 0, 0, 0) 0) 65% 55%, radial-gradient(circle, var(--dot-color) 0.5vmin, rgba(0, 0, 0, 0) 0) 60% 75%, radial-gradient(circle, var(--dot-color) 0.3vmin, rgba(0, 0, 0, 0) 0) 30% 65%, radial-gradient(circle, var(--dot-color) 0.3vmin, rgba(0, 0, 0, 0) 0) 80% 35%;
  /* ④ 花火の粒子が丸くなるようにサイズ調整 */
  background-size: 1vmin 1vmin;
  background-repeat: no-repeat;
  animation: firework 3s infinite;
}

.firework::before {
  transform: translate(-50%, -50%) rotate(25deg) !important;
}

.firework::after {
  transform: translate(-50%, -50%) rotate(-37deg) !important;
}

.firework:nth-of-type(1),
.firework:nth-of-type(1)::before,
.firework:nth-of-type(1)::after {
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: yellow;
}

.firework:nth-of-type(2),
.firework:nth-of-type(2)::before,
.firework:nth-of-type(2)::after {
  top: 30%;
  left: 16%;
  animation-duration: 3.8s;
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: khaki;
}

.firework:nth-of-type(3),
.firework:nth-of-type(3)::before,
.firework:nth-of-type(3)::after {
  top: 30%;
  left: 72%;
  animation-duration: 4.2s;
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: white;
}

.firework:nth-of-type(4),
.firework:nth-of-type(4)::before,
.firework:nth-of-type(4)::after {
  top: 38%;
  left: 32%;
  animation-duration: 3.6s;
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: lime;
}

.firework:nth-of-type(5),
.firework:nth-of-type(5)::before,
.firework:nth-of-type(5)::after {
  top: 42%;
  left: 84%;
  animation-duration: 4.4s;
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: aqua;
}

.firework:nth-of-type(6),
.firework:nth-of-type(6)::before,
.firework:nth-of-type(6)::after {
  top: 48%;
  left: 40%;
  animation-duration: 4.1s;
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: purple;
}

.firework:nth-of-type(7),
.firework:nth-of-type(7)::before,
.firework:nth-of-type(7)::after {
  top: 38%;
  left: 64%;
  animation-duration: 3.9s;
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: pink;
}

.firework:nth-of-type(8),
.firework:nth-of-type(8)::before,
.firework:nth-of-type(8)::after {
  top: 40%;
  left: 56%;
  animation-duration: 3.9s;
  /* ⑤ それぞれの花火の粒子の色は全て同じに */
  --dot-color: red;
}

/* NAVI */
.p_cont {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 26px 44px 80px;
  background-color: #FFE07C;
  background-image: url("../img/lp/bg-navi.png");
  background-size: calc(100% - 16px) auto;
  position: relative;
}
@media (max-width: 750px) {
  .p_cont {
    gap: 4vw;
    padding: 3.47vw 5.87vw 10.67vw;
  }
}
.p_cont::after {
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 100%;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='14' viewBox='0 0 42 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_51_2)'%3E%3Cpath d='M21 14L0 0L42 0L21 14Z' fill='%23FFE07C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_51_2'%3E%3Crect width='42' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 42px 14px;
  background-repeat: repeat-x;
  z-index: 1;
  content: "";
}
@media (max-width: 750px) {
  .p_cont::after {
    bottom: -1.73vw;
    height: 1.87vw;
    background-size: 5.6vw 1.87vw;
  }
}

.p_cont .p_cont_box a:hover {
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

.title-a {
  text-align: center;
  position: relative;
}
.title-a::before {
  display: block;
  width: 160px;
  height: 43px;
  margin: 0 auto 12px;
  background-image: url("../img/lp/title-illust.png");
  background-size: contain;
  content: "";
}
@media (max-width: 750px) {
  .title-a::before {
    width: 21.33vw;
    height: 5.73vw;
    margin: 0 auto 1.6vw;
  }
}
@media (max-width: 750px) {
  .title-a img {
    height: 12.67vw;
  }
}

.btn-orange {
  display: block;
  width: 610px;
  margin: 40px auto;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border-radius: 50vh;
  background: #EA5505;
  text-align: center;
  padding: 18px 32px 18px 10px;
  letter-spacing: 0.04em;
  box-sizing: border-box;
  box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
  position: relative;
}
@media (max-width: 750px) {
  .btn-orange {
    width: 81.33vw;
    font-size: 2.93vw;
    padding: 2.4vw 4.27vw 2.4vw 1.33vw;
    margin: 5.33vw auto;
    box-shadow: 0 0.8vw 0 0 rgba(0, 0, 0, 0.2);
  }
}
.btn-orange:hover {
  opacity: 0.8;
  color: #fff;
}
.btn-orange::after {
  position: absolute;
  top: 50%;
  right: 32px;
  margin-top: -14px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_52_2)'%3E%3Cpath d='M14 -5.72205e-06C16.7689 -5.72205e-06 19.4757 0.821079 21.778 2.35942C24.0803 3.89776 25.8747 6.08426 26.9343 8.64243C27.9939 11.2006 28.2712 14.0155 27.731 16.7313C27.1908 19.447 25.8574 21.9416 23.8995 23.8995C21.9416 25.8574 19.447 27.1908 16.7313 27.731C14.0155 28.2712 11.2006 27.9939 8.64243 26.9343C6.08427 25.8747 3.89777 24.0803 2.35943 21.778C0.821086 19.4757 0 16.7689 0 14C0 10.287 1.475 6.72601 4.1005 4.1005C6.72601 1.47499 10.287 -5.72205e-06 14 -5.72205e-06Z' fill='white'/%3E%3Cpath d='M8.48682 14.054L13.9998 19.567L19.5128 14.054' stroke='%23EA5505' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 8.488V19.513' stroke='%23EA5505' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_52_2'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
@media (max-width: 750px) {
  .btn-orange::after {
    right: 4.27vw;
    margin-top: -1.87vw;
    width: 3.73vw;
    height: 3.73vw;
  }
}
.btn-orange.-w660 {
  width: 660px;
}
@media (max-width: 750px) {
  .btn-orange.-w660 {
    width: 88vw;
  }
}
.btn-orange.-w400 {
  width: 400px;
}
@media (max-width: 750px) {
  .btn-orange.-w400 {
    width: 53.33vw;
  }
}
.btn-orange.-link::after {
  transform: rotate(-90deg);
}
.btn-orange.-big {
  padding-top: 23px;
  padding-bottom: 23px;
}
@media (max-width: 750px) {
  .btn-orange.-big {
    padding-top: 3.07vw;
    padding-bottom: 3.07vw;
  }
}
.btn-orange.-noarrow {
  padding-right: 10px;
}
@media (max-width: 750px) {
  .btn-orange.-noarrow {
    padding-right: 1.33vw;
  }
}
.btn-orange.-noarrow::after {
  display: none;
}

/* STEP */
#n_step {
  padding: 63px 20px 104px;
  background-image: url("../img/lp/bg-step.png"), linear-gradient(to bottom, #fb3e0e 0%, #fbc60c 100%);
  background-size: 1281px 884px, auto auto;
  background-position: top center, top left;
  background-blend-mode: screen, normal;
}
@media (max-width: 750px) {
  #n_step {
    padding: 8.4vw 2.67vw 13.87vw;
    background-size: 170.8vw 117.87vw, auto auto;
  }
}

#n_step > .inner {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 0 0 #C79634;
  margin-top: 29px;
  padding: 42px 38px;
}
@media (max-width: 750px) {
  #n_step > .inner {
    border-radius: 2.67vw;
    padding: 5.6vw 5.07vw;
    box-shadow: 0 1.07vw 0 0 #C79634;
  }
}

#n_step .step span {
  display: block;
  padding: 0 8px 0 12px;
}
@media (max-width: 750px) {
  #n_step .step span {
    padding: 0 1.07vw 0 1.6vw;
  }
}

#n_step .note p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5555555556;
  font-weight: normal;
  transform: rotate(0.05deg);
}
@media (max-width: 600px) {
  #n_step .note p {
    font-size: 16px;
  }
}

/* special */
.special {
  padding: 100px 20px 52px;
  position: relative;
}
@media (max-width: 750px) {
  .special {
    padding: 13.333vw 2.667vw 6.933vw;
  }
}
.special::before {
  position: absolute;
  top: -86px;
  left: 0;
  width: 100%;
  height: 87px;
  clip-path: polygon(0% 2.479%, 0% 2.479%, 0.158% 2.328%, 0.627% 1.944%, 1.404% 1.425%, 2.484% 0.873%, 3.862% 0.387%, 5.533% 0.069%, 7.493% 0.019%, 9.738% 0.337%, 12.262% 1.124%, 15.062% 2.479%, 15.062% 2.479%, 18.351% 5.185%, 21.743% 9.318%, 25.291% 14.477%, 29.047% 20.256%, 33.062% 26.254%, 37.39% 32.066%, 42.08% 37.289%, 47.186% 41.519%, 52.76% 44.353%, 58.853% 45.387%, 58.853% 45.387%, 65.165% 44.186%, 71.287% 40.925%, 77.105% 36.119%, 82.51% 30.283%, 87.39% 23.933%, 91.632% 17.583%, 95.126% 11.747%, 97.759% 6.942%, 99.421% 3.68%, 100% 2.479%, 100% 100%, 0% 100%, 0% 2.479%);
  content: "";
}

.special .heading {
  text-align: center;
  padding: 30px 10px;
  position: relative;
  border-radius: 20px 20px 0 0;
}
@media (max-width: 750px) {
  .special .heading {
    padding: 4vw 1.33vw;
  }
}

.special .heading img {
  display: block;
  margin: 0 auto;
}
@media (max-width: 750px) {
  .special .heading img {
    height: 7.33vw;
  }
}

.special .special-chance {
  box-sizing: border-box;
  border-radius: 20px;
  background: #fff;
}

.special .txt-entry {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.5;
  color: #0042D6;
  margin: 38px 0 16px;
}
@media (max-width: 750px) {
  .special .txt-entry {
    font-size: 4.8vw;
    margin: 5.07vw 0 2.13vw;
  }
}

.special .img-chance {
  margin: 0 0 40px;
  padding-right: 19px;
}
@media (max-width: 750px) {
  .special .img-chance {
    margin: 0 0 5.33vw;
    padding-right: 2.53vw;
  }
}

.special .texture {
  background-size: 2.5rem 2.5rem;
  margin-top: -1.875rem;
  padding: 3.125rem 1.875rem 3.5625rem;
}

@media (max-width: 750px) {
  .special .texture {
    margin-top: -4vw;
    padding: 6.667vw 4vw 7.6vw;
  }
}
.special .arw-title {
  margin: 0 0 42px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #fff;
  font-family: "M PLUS Rounded 1c", "メイリオ", "meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}
@media (max-width: 750px) {
  .special .arw-title {
    margin: 0 0 5.6vw;
  }
}
.special .arw-title::before, .special .arw-title::after {
  background-image: url("data:image/svg+xml,%3Csvg width='29' height='48' viewBox='0 0 29 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.40186 13.8701L26.0019 44.801' stroke='white' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M3.5 0C4.19223 0 4.86892 0.205271 5.4445 0.589856C6.02007 0.974441 6.46867 1.52107 6.73358 2.16061C6.99848 2.80015 7.0678 3.50388 6.93275 4.18282C6.7977 4.86175 6.46436 5.48539 5.97487 5.97487C5.48539 6.46436 4.86175 6.7977 4.18282 6.93275C3.50388 7.0678 2.80015 6.99848 2.16061 6.73358C1.52107 6.46867 0.974441 6.02007 0.589856 5.4445C0.205271 4.86892 0 4.19223 0 3.5C0 2.57174 0.368749 1.6815 1.02513 1.02513C1.6815 0.368749 2.57174 0 3.5 0Z' fill='white'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  width: 29px;
  height: 48px;
  content: "";
}
@media (max-width: 750px) {
  .special .arw-title::before, .special .arw-title::after {
    width: 3.867vw;
    height: 5.333vw;
  }
}
.special .arw-title::after {
  transform: scaleX(-1);
}
.special .arw-title .wrapper {
  display: inline-block;
}

.special .txt-lead {
  text-align: center;
  font-size: 31px;
  font-weight: 800;
}
@media (max-width: 750px) {
  .special .txt-lead {
    font-size: 4.133vw;
  }
}
.special .txt-lead .wrapper {
  background-image: url("../img/lp/dot-blue.png");
  background-repeat: repeat-x;
  background-size: 22px 8px;
  background-position: bottom left;
  display: inline-block;
  padding: 0 6px 14px;
}
@media (max-width: 750px) {
  .special .txt-lead .wrapper {
    background-size: 2.933vw 1.067vw;
    padding: 0 0.8vw 1.867vw;
  }
}
.special .txt-lead .number {
  font-size: 60px;
  display: inline-block;
  vertical-align: -2px;
  margin: 0 8px;
}
@media (max-width: 750px) {
  .special .txt-lead .number {
    font-size: 8vw;
    vertical-align: -0.267vw;
    margin: 0 1.067vw;
  }
}
.special .txt-lead .unit {
  font-size: 38px;
}
@media (max-width: 750px) {
  .special .txt-lead .unit {
    font-size: 5.067vw;
  }
}

#special_01 {
  background-image: linear-gradient(to bottom, #69b7fb 3.9%, #55c4ff 46.8%, #77c0fd 100%);
  clip-path: polygon(0% 100%, 0% 0.075%, 0% 0.075%, 0.158% 0.07%, 0.627% 0.059%, 1.404% 0.043%, 2.484% 0.026%, 3.862% 0.012%, 5.533% 0.002%, 7.493% 0.001%, 9.738% 0.01%, 12.262% 0.034%, 15.062% 0.075%, 15.062% 0.075%, 18.351% 0.157%, 21.743% 0.282%, 25.291% 0.437%, 29.047% 0.612%, 33.062% 0.793%, 37.39% 0.969%, 42.08% 1.127%, 47.186% 1.255%, 52.76% 1.34%, 58.853% 1.372%, 58.853% 1.372%, 65.165% 1.335%, 71.287% 1.237%, 77.105% 1.092%, 82.51% 0.915%, 87.39% 0.723%, 91.632% 0.531%, 95.126% 0.355%, 97.759% 0.21%, 99.421% 0.111%, 100% 0.075%, 100% 100%);
  margin-top: -64px;
}
@media (max-width: 750px) {
  #special_01 {
    margin-top: -8.53vw;
  }
}
@media (max-width: 500px) {
  #special_01 {
    padding-bottom: 17vw;
  }
}
#special_01 .special-chance {
  position: relative;
  padding: 0 0 10px;
  box-shadow: 0 8px 0 0 #579BE0;
}
#special_01 .special-chance::before {
  position: absolute;
  top: -84px;
  left: 45px;
  width: 100px;
  height: 79px;
  background-image: url("../img/lp/bird.png");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
@media (max-width: 750px) {
  #special_01 .special-chance::before {
    top: -11.2vw;
    left: 6vw;
    width: 13.33vw;
    height: 10.53vw;
  }
}

#special_01 .heading {
  background-image: url("../img/lp/title-special01-bg.png"), repeating-linear-gradient(-45deg, #1251DD, #1251DD 32px, #0042D6 32px, #0042D6 58px);
  background-size: 638px auto, auto auto;
  background-position: top 22px center, top left;
  background-repeat: no-repeat, repeat;
}
@media (max-width: 750px) {
  #special_01 .heading {
    background-image: url("../img/lp/title-special01-bg.png"), repeating-linear-gradient(-45deg, #1251DD, #1251DD 4.267vw, #0042D6 4.267vw, #0042D6 7.733vw);
    background-size: 85.07vw auto, auto auto;
    background-position: top 2.93vw center, top left;
  }
}

#special_01 .arw-title {
  background-image: repeating-linear-gradient(-45deg, #1251DD, #1251DD 32px, #0042D6 32px, #0042D6 58px);
  font-size: 36px;
  line-height: 1.4444444444;
  padding: 29px 10px 21px;
  align-items: flex-end;
}
@media (max-width: 750px) {
  #special_01 .arw-title {
    font-size: 4.8vw;
    background-image: repeating-linear-gradient(-45deg, #1251DD, #1251DD 4.267vw, #0042D6 4.267vw, #0042D6 7.733vw);
    padding: 3.867vw 1.333vw 2.8vw;
  }
}
#special_01 .arw-title .yellow {
  color: #FFFF00;
}
#special_01 .arw-title::before, #special_01 .arw-title::after {
  margin-bottom: 8px;
}
@media (max-width: 750px) {
  #special_01 .arw-title::before, #special_01 .arw-title::after {
    margin-bottom: 1.067vw;
  }
}

#special_01 .txt-lead {
  color: #0042D6;
}

#special_01 .img-arw {
  width: 661px;
  margin: 0 auto;
}
@media (max-width: 750px) {
  #special_01 .img-arw {
    width: 88.133vw;
  }
}

#special_01 .balloon {
  text-align: center;
  width: calc(100% - 76px);
  margin: 46px auto 0;
  background: #CBE7FF;
  font-size: 22px;
  font-weight: bold;
  border-radius: 10px;
  position: relative;
  padding: 25px 10px 18px;
  line-height: 1.4;
  box-sizing: border-box;
}
@media (max-width: 750px) {
  #special_01 .balloon {
    width: calc(100% - 10.13vw);
    margin: 6.13vw auto 0;
    font-size: 2.93vw;
    padding: 3.33vw 1.33vw 2.4vw;
  }
}
#special_01 .balloon::before {
  position: absolute;
  bottom: calc(100% - 5px);
  left: 50%;
  margin-left: -21.5px;
  border-style: solid;
  border-width: 0 21.5px 23px 21.5px;
  border-color: transparent transparent #CBE7FF transparent;
  content: "";
}
#special_01 .balloon > span {
  color: #FB4D0D;
  font-size: 28px;
}
@media (max-width: 750px) {
  #special_01 .balloon > span {
    font-size: 3.73vw;
  }
}

.special .note {
  font-size: 18px;
  line-height: 1.5555555556;
  transform: rotate(0.05deg);
  padding: 0 38px;
  margin: 0;
}
@media (max-width: 600px) {
  .special .note {
    font-size: 14px;
  }
}
.special .note.-center {
  text-align: center;
}
.special .note.-bold {
  font-weight: bold;
}

.price-sec {
  width: calc(100% + 40px);
  margin: 35px -20px 20px;
}

#special_02 {
  background-image: url("../img/lp/firework1.png"), linear-gradient(to bottom, #FE6415 0%, #febf15 12.3%, #fead15 100%);
  clip-path: polygon(0% 100%, 0% 0.072%, 0% 0.072%, 0.158% 0.067%, 0.627% 0.056%, 1.404% 0.041%, 2.484% 0.025%, 3.862% 0.011%, 5.533% 0.002%, 7.493% 0.001%, 9.738% 0.01%, 12.262% 0.032%, 15.062% 0.072%, 15.062% 0.072%, 18.351% 0.15%, 21.743% 0.269%, 25.291% 0.419%, 29.047% 0.586%, 33.062% 0.759%, 37.39% 0.927%, 42.08% 1.078%, 47.186% 1.201%, 52.76% 1.283%, 58.853% 1.312%, 58.853% 1.312%, 65.165% 1.278%, 71.287% 1.183%, 77.105% 1.044%, 82.51% 0.876%, 87.39% 0.692%, 91.632% 0.508%, 95.126% 0.34%, 97.759% 0.201%, 99.421% 0.106%, 100% 0.072%, 100% 100%);
  margin-top: -70px;
  background-size: 710px auto, auto auto;
  background-repeat: no-repeat, repeat;
  background-position: top center, top left;
}
@media (max-width: 750px) {
  #special_02 {
    margin-top: -9.33vw;
    background-size: 94.67vw auto, auto auto;
  }
}
#special_02 .bubble {
  text-align: center;
  margin-bottom: 26px;
}
@media (max-width: 750px) {
  #special_02 .bubble {
    margin-bottom: 3.47vw;
  }
}
@media (max-width: 750px) {
  #special_02 .bubble img {
    width: 30.4vw;
  }
}
#special_02 .special-chance {
  padding-bottom: 10px;
  box-shadow: 0 8px 0 0 #E0B257;
}
#special_02 .img-chance {
  padding: 0 20px;
  margin: 40px 0;
}
@media (max-width: 750px) {
  #special_02 .img-chance {
    margin: 5.33vw 0;
    padding: 0 2.67vw;
  }
}
#special_02 .cnf_box .btn-orange {
  width: 660px;
  padding-right: 10px;
  margin-bottom: 20px;
}
@media (max-width: 750px) {
  #special_02 .cnf_box .btn-orange {
    width: 88vw;
  }
}
#special_02 .cnf_box .btn-orange::after {
  display: none;
}
#special_02 .cnf_box .note {
  margin-bottom: 50px;
}
@media (max-width: 550px) {
  #special_02 .cnf_box .note {
    margin-bottom: 40px;
  }
}
#special_02 .cnf_box .indent {
  border-top: 2px solid #C3C3C3;
  padding-top: 25px;
}

#special_02 .heading {
  background-image: repeating-linear-gradient(-45deg, #FA662E, #FA662E 32px, #FA4D0C 32px, #FA4D0C 58px);
}
@media (max-width: 750px) {
  #special_02 .heading {
    background-image: repeating-linear-gradient(-45deg, #FA662E, #FA662E 4.27vw, #FA4D0C 4.27vw, #FA4D0C 7.73vw);
  }
}
#special_02 .heading::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 626px;
  height: 138px;
  background-image: url("../img/lp/title-special02-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  content: "";
}
@media (max-width: 750px) {
  #special_02 .heading::before {
    width: 83.47vw;
    height: 18.4vw;
  }
}

#special_02 .texture {
  background-image: url("../img/lp/bg-arw_box-02.png");
}

#special_02 .txt-entry {
  color: #FB4D0D;
}

@media (max-width: 750px) {
  #special_02 .txt-entry {
    margin-bottom: 3.867vw;
  }
}
#special_02 .arw-title {
  background-image: repeating-linear-gradient(-45deg, #FA662E, #FA662E 32px, #F94D0C 32px, #F94D0C 58px);
  font-size: 40px;
  line-height: 1.3;
  padding: 29px 10px 21px;
  gap: 25px;
}
@media (max-width: 750px) {
  #special_02 .arw-title {
    font-size: 5.333vw;
    padding: 3.867vw 1.333vw 2.8vw;
    gap: 3.333vw;
    background-image: repeating-linear-gradient(-45deg, #FA662E, #FA662E 4.267vw, #F94D0C 4.267vw, #F94D0C 7.733vw);
  }
}
#special_02 .arw-title .yellow {
  color: #FFFF00;
}
#special_02 .arw-title::before, #special_02 .arw-title::after {
  margin-bottom: 8px;
}

#special_02 .img-arw {
  width: 672px;
  margin: 0 auto -50px;
}
@media (max-width: 750px) {
  #special_02 .img-arw {
    width: 89.6vw;
    margin-bottom: -6.667vw;
  }
}

#special_02 .txt-lead {
  color: #FB4D0D;
  margin: 0 0 18px;
}
#special_02 .txt-lead .wrapper {
  background-image: url("../img/lp/dot-orange.png");
}

/* au PAY Card */
.arw_box {
  text-align: center;
}

.arw_box .lead {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 800;
  margin: 0;
}

@media (max-width: 610px) {
  .arw_box .lead br {
    display: none;
  }
}
@media (max-width: 480px) {
  .arw_box .lead {
    font-size: 1.25rem;
  }
}
.arw_box > .text {
  font-size: 1rem;
  font-weight: 800;
  transform: rotate(0.05deg);
  color: #A37F41;
  line-height: 1.5;
  margin-bottom: 1.5em;
}

@media (max-width: 480px) {
  .arw_box > .text {
    font-size: 0.875rem;
  }
}
.arw_box.-special1 {
  width: 40.3125rem;
  margin: 0 auto;
  background-image: url("../img/lp/bg-present-top.png"), url("../img/lp/bg-present-bottom.png"), url("../img/lp/bg-present-middle-left.png"), url("../img/lp/bg-present-middle-right.png");
  background-size: 40.3125rem 7.8125rem, 40.3125rem 1.4375rem, 1.0625rem 1.0625rem, 1rem 1.0625rem;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
  background-position: top left, bottom left, top left, top right;
  padding: 0 0.9375rem 0.875rem;
  box-sizing: border-box;
}

@media (max-width: 750px) {
  .arw_box.-special1 {
    width: 86vw;
    background-size: 86vw 16.667vw, 86vw 3.067vw, 2.267vw 2.267vw, 2.133vw 2.267vw;
    padding: 0 2.133vw 1.867vw 2vw;
  }
}
.arw_box.-special1 > .head {
  padding: 1.25rem 0 1rem;
  width: 33.25rem;
  margin: 0 auto;
  transform: translateX(0.125rem);
}

@media (max-width: 750px) {
  .arw_box.-special1 > .head {
    padding: 2.667vw 0 2.133vw;
    width: 70.933vw;
  }
}
.arw_box.-special1 > .body {
  position: relative;
  z-index: 1;
  padding: 1.5625rem 0;
}

@media (max-width: 750px) {
  .arw_box.-special1 > .body {
    padding: 3.333vw 0;
  }
}
.arw_box.-special1 > .body::after {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.6;
  z-index: -1;
  content: "";
}

.arw_box.-special1 > .body .circle {
  margin: 0 auto 1.25rem;
  width: 34.9375rem;
  transform: translateX(0.4375rem);
}

@media (max-width: 750px) {
  .arw_box.-special1 > .body .circle {
    width: 74.533vw;
    transform: translateX(0.933vw);
  }
}
.arw_box.-special1 > .body .text {
  color: #fff;
  font-size: 0.875rem;
  margin: 0;
  padding: 0 1.25rem;
  transform: rotate(0.05deg);
}

@media (max-width: 750px) {
  .arw_box.-special1 > .body .text {
    font-size: 2.4vw;
  }
}
.arw_box.-special1 .btn_link {
  position: relative;
  display: block;
  margin: 0 auto 1.5625rem;
  z-index: 2;
  font-size: 1.5rem;
  font-weight: 800;
  width: 17.5rem;
  padding: 0.375rem;
}

@media (max-width: 750px) {
  .arw_box.-special1 .btn_link {
    padding: 0.8vw;
    font-size: 3.2vw;
    width: 37.333vw;
    margin: 0 auto 3.333vw;
  }
}
.arw_box.-special2 {
  background: #FFEFAA;
  margin: 32px auto 2.5rem;
  padding: 27px 10px;
  box-sizing: border-box;
  border-radius: 10px;
  width: calc(100% - 76px);
}
@media (max-width: 750px) {
  .arw_box.-special2 {
    width: calc(100% - 10.13vw);
  }
}

@media (max-width: 480px) {
  .arw_box.-special2 {
    margin-top: 24px;
    margin-bottom: 12px;
  }
}
.arw_box.-special2 a {
  color: #FB4D0D;
}

.arw_box.-special2 .text {
  margin: 0.5rem 0 0;
  color: #000;
}

.arw_box .balloon {
  position: relative;
  display: block;
  margin: 0 1.875rem 1.25rem;
  padding: 1.25rem 2rem 1rem;
  border: 1px solid #fff;
  background-color: #000;
  box-sizing: border-box;
  line-height: 1;
}

@media (max-width: 750px) {
  .arw_box .balloon {
    margin: 0 4vw 2.667vw;
    padding: 2.667vw 4.267vw 2.133vw;
  }
}
.arw_box .balloon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 13px 16px 13px;
  border-color: transparent transparent #fff;
  translate: -50% -100%;
}

.arw_box .balloon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 11.5px 14px 11.5px;
  border-color: transparent transparent #000;
  translate: -50% -100%;
}

.arw_box .balloon .-block {
  display: block;
  margin-bottom: 0.3125rem;
}

@media (max-width: 750px) {
  .arw_box .balloon .-block {
    width: 64.267vw;
    margin-bottom: 0.667vw;
  }
}
.arw_box .balloon .-inline {
  display: inline-block;
  margin-top: 0.375rem;
  margin-left: 0.1875rem;
}

@media (max-width: 750px) {
  .arw_box .balloon .-inline {
    width: 26vw;
    margin-top: 0.8vw;
    margin-left: 0.4vw;
  }
}
.arw_box .balloon .-link {
  display: inline-block;
}

@media (max-width: 750px) {
  .arw_box .balloon .-link {
    width: 25.467vw;
  }
}
.btn_link {
  border-radius: 50vh;
  background: #EA5504;
  color: #FFF;
  font-size: 1rem;
  font-weight: 700;
  transform: rotate(0.05deg);
  display: inline-block;
  width: 12.5rem;
  padding: 0.3125rem;
  box-sizing: border-box;
}

.btn_link:hover {
  color: #FFF;
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

.btn_link02 {
  position: relative;
  border-radius: 50px;
  margin: 5px 0 0;
  background: #EA5504;
  color: #FFF;
  font-size: 1rem;
  padding: 3px 40px 3px 20px;
  display: inline-block;
}

.btn_link02 a {
  color: #FFF;
}

.btn_link02::after {
  position: absolute;
  display: block;
  content: "\f35d";
  font-family: "Font Awesome 5 Free";
  top: 2px;
  right: 20px;
  font-weight: 800;
  color: #FFF;
}

/* QR box */
.qr_bx {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  background: #256037;
  color: #fff;
  font-weight: bold;
  padding: 40px 0.9375rem;
  background-image: url("../img/lp/bg-fish.png"), linear-gradient(to bottom, #0550fa 0%, #022bb2 100%);
  background-size: 712px auto, auto auto;
  background-position: top 20px left 20px, top left;
  background-repeat: no-repeat;
  background-blend-mode: multiply, normal;
}
.qr_bx.-top {
  padding-bottom: 109px;
}
.qr_bx.-bottom {
  padding-bottom: 54px;
  clip-path: polygon(95.262% 94.61%, 95.138% 94.61%, 92.4% 100%, 89.662% 94.61%, 89.538% 94.61%, 86.8% 100%, 84.062% 94.61%, 83.938% 94.61%, 81.2% 100%, 78.462% 94.61%, 78.338% 94.61%, 75.6% 100%, 72.862% 94.61%, 72.738% 94.61%, 70% 100%, 67.262% 94.61%, 67.138% 94.61%, 64.4% 100%, 61.662% 94.61%, 61.538% 94.61%, 58.8% 100%, 56.062% 94.61%, 55.938% 94.61%, 53.2% 100%, 50.462% 94.61%, 50.338% 94.61%, 47.6% 100%, 44.862% 94.61%, 44.738% 94.61%, 42% 100%, 39.262% 94.61%, 39.138% 94.61%, 36.4% 100%, 33.662% 94.61%, 33.538% 94.61%, 30.8% 100%, 28.062% 94.61%, 27.938% 94.61%, 25.2% 100%, 22.462% 94.61%, 22.338% 94.61%, 19.6% 100%, 16.862% 94.61%, 16.738% 94.61%, 14% 100%, 11.262% 94.61%, 11.138% 94.61%, 8.4% 100%, 5.662% 94.61%, 5.538% 94.61%, 2.8% 100%, 0.062% 94.61%, 0% 94.61%, 0% 0%, 100% 0%, 100% 96.063%, 98% 100%);
}
.qr_bx .code {
  flex-shrink: 0;
}

.qr_bx .body .lead {
  text-decoration: underline;
  color: #FFFF00;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4583333333;
  margin: 0 0 0.5rem;
}

@media (max-width: 600px) {
  .qr_bx .body .lead {
    font-size: 1.25rem;
  }
}
.qr_bx .body .text {
  margin: 0;
  font-size: 18px;
  line-height: 1.3333333333;
  transform: rotate(0.05deg);
}

@media (max-width: 600px) {
  .qr_bx .body .text br {
    display: none;
  }
}
/* Payment Method */
.cnf_box {
  background: #fff;
  box-sizing: border-box;
  padding: 0 2.5rem;
  margin: 0 auto 1.25rem;
}
@media (max-width: 750px) {
  .cnf_box {
    padding: 0 5.33vw;
  }
}

.cnf_box .shop_more {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 800;
}

@media (max-width: 550px) {
  .cnf_box .shop_more {
    font-size: 1rem;
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
.cnf_box .shop_more:hover {
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

.cnf_box .txt_c,
.cnf_box .indent li {
  font-size: 18px;
  line-height: 1.5555555556;
  transform: rotate(0.05deg);
}

.cnf_box .txt_c:first-child {
  margin-bottom: 1.125rem;
}

@media (max-width: 550px) {
  .cnf_box .txt_c,
  .cnf_box .indent li {
    font-size: 0.875rem;
  }
}
.cnf_box .txt_c strong,
.cnf_box .indent li strong {
  font-weight: 800;
}

/* SNS */
.sns {
  padding: 2.375rem 0.625rem 2.0625rem;
  background-color: #fff;
  color: #1F6231;
  text-align: center;
  font-weight: 800;
  transform: rotate(0.05deg);
}

@media (max-width: 480px) {
  .sns {
    padding: 1.5rem 0.625rem;
  }
}
.sns_t {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  color: #133C93;
}

.sns_box {
  display: flex;
  justify-content: center;
  margin-top: 0.3125rem;
}

.sns_box li {
  margin: 0 10px 0;
}

.sns_box li img {
  width: 50px;
  height: auto;
}

.sns_b {
  padding: 10px 0 10px 0;
  color: #ccc;
}

/* 固定ヘッダーSNS設定ここから  */
nav.dcb {
  margin: 0px auto 0px;
  z-index: 99;
  position: sticky;
  -webkit-position: sticky;
  -moz-position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.7);
  padding: 5px 10px 5px;
  width: 100%;
}

nav.dcb h1 {
  display: block;
}

nav.dcb h1 a {
  /*display:block;*/
  text-decoration: none;
  color: #eb5505;
  margin: 0;
  padding: 0;
  height: 10px;
}

/*auロゴ設定*/
nav.dcb h1 a img {
  width: 80px;
  margin: 0 10px 0 0;
  padding: 0;
  vertical-align: middle;
}

/*nav.dcb h1 img{
	width:80px;
	margin:0 0 0 0;
	padding:0;
}*/
nav.dcb ul.sns_btn {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin-right: 0px;
  padding: 0 0 10px 0;
  margin: 0;
}

nav.dcb ul.sns_btn li {
  background: none;
}

nav.dcb ul.sns_btn li a {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0px 15px;
  padding: 0;
  border-radius: 50%;
  text-decoration: none;
  z-index: 998;
  background-color: none !important;
  text-align: center;
}

nav.dcb ul.sns_btn li a img {
  width: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

nav.dcb ul.sns_btn li a:hover,
a:active,
a:visited {
  opacity: 0.8;
}

@media screen and (max-width: 460px) {
  nav.dcb {
    margin-top: 0;
    /*スマホSNSヘッダの上下位置（キャンペーン前）*/
    width: 100%;
    padding: 0;
  }
  nav.dcb h1 a {
    width: 80%;
    margin: 0px 10px 5px 0px;
    padding: 0;
  }
  nav.dcb h1 a img {
    width: 50px;
    margin: 0;
    padding: 0;
  }
  /*nav.dcb h1  img{
  	width:50px;
  	margin:0;
  	padding:0;
  }*/
  nav.dcb ul.sns_btn {
    display: flex;
    align-items: center;
    list-style-type: none;
    padding: 0 0 5px 0;
    margin: 0;
  }
  nav.dcb ul.sns_btn li {
    background: none;
  }
  nav.dcb ul.sns_btn li a {
    margin: 0 10px;
    width: 30px;
    height: 30px;
    display: block;
    padding: 0;
    border-radius: 50%;
    text-decoration: none;
    z-index: 998;
    background-color: none !important;
    text-align: center;
  }
  nav.dcb ul.sns_btn li a img {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  nav.dcb h1 a img {
    margin: 0;
    padding: 0;
  }
}
/* ▲固定ヘッダーSNS設定ここまで▲ */
#top_period {
  text-align: center;
  padding: 0 0 0;
  margin: -1 auto -1;
}

.top_periods {
  background-size: cover;
}

#top_period span {
  filter: drop-shadow(rgb(0, 92, 84) 0px 3px 0px);
  -webkit-filter: drop-shadow(rgb(0, 92, 84) 0px 3px 0px);
  -moz-filter: drop-shadow(rgb(0, 92, 84) 0px 3px 0px);
}

@media screen and (max-width: 460px) {
  .top_periods {
    font-size: 90%;
  }
  #top_period span {
    filter: drop-shadow(rgb(0, 92, 84) 0px 2px 0px);
    -webkit-filter: drop-shadow(rgb(0, 92, 84) 0px 2px 0px);
    -moz-filter: drop-shadow(rgb(0, 92, 84) 0px 2px 0px);
  }
}
.periods {
  display: block;
  position: relative;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
  font-size: 200%;
  border: 0px solid #FFF;
  color: #fff;
  box-sizing: border-box;
  margin: 0 auto 0;
}

@media screen and (max-width: 610px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 180%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 571px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 170%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 510px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 155%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 470px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 142%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 409px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 135%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 390px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 130%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 374px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 125%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 360px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 120%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 340px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 110%;
    box-sizing: border-box;
    width: 100%;
  }
}
@media screen and (max-width: 300px) {
  .periods {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
    font-size: 100%;
    box-sizing: border-box;
    width: 100%;
  }
}
#step {
  border-top: #b48132 0 solid;
  padding: 10px 0 60px;
  margin: -10px auto 0;
  text-align: center;
  color: #FFF;
}

#step img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

#step h4 {
  background: #fff;
  margin: 20px auto 20px;
}

.cprt {
  padding: 3% 2.5%;
  border-radius: 15px;
}

.cpn_box {
  background: linear-gradient(0deg, #fff 0%, #b48132 100%) 100%;
  padding: 0 2.5% 20px;
  border-radius: 0;
}

.l-bg-leaf {
  background-image: url("../img/lp/bg-recommend.png"), linear-gradient(to bottom, #fb3e0e 0%, #fbc60c 100%);
  background-size: 1281px auto, auto auto;
  background-position: top center, top left;
  background-repeat: repeat-y, repeat;
  background-blend-mode: screen, normal;
}
@media (max-width: 750px) {
  .l-bg-leaf {
    background-size: 170.8vw auto, auto auto;
  }
}

#recommend {
  margin-top: -15px;
  padding: 76px 0 10px;
}
@media (max-width: 750px) {
  #recommend {
    margin-top: -2vw;
    padding: 10.13vw 0 1.33vw;
  }
}

@media screen and (max-width: 460px) {
  .cprt ul {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
}
.ttl_shops {
  color: #fff;
  font-size: 1.4em;
  margin: 0;
  padding: 5px 8px 15px 8px;
}

.ttl_shops span {
  color: #eb5505;
  font-size: 0.8em;
  background: white;
  padding: 0 1em;
  border-radius: 20px 0;
  border: #eb5505 2px solid;
}

.sp {
  display: none;
}

.s_sp {
  display: none;
}

@media (max-width: 500px) {
  .pc {
    display: none;
  }
  #step .pc {
    display: none;
  }
  #step .pc02 {
    display: none;
  }
  .sp {
    display: block;
    width: 100%;
  }
  br.pc {
    display: none;
    width: 100%;
  }
  #config {
    margin: -2px auto -2px;
    width: 100%;
    max-width: 500px;
  }
  #config img {
    border-bottom: 2px dotted #eb5505;
    max-width: 90%;
  }
}
.f_box {
  display: flex;
  gap: 1.125rem;
  padding: 0 2.125rem;
  margin: 1.875rem auto;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 550px) {
  .f_box {
    padding: 0 1.25rem;
    gap: 0.875rem;
    margin-top: 0;
  }
}
.f_box .shop_more {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  margin-bottom: 0;
  position: relative;
}

@media (max-width: 680px) {
  .f_box .shop_more {
    font-size: 90%;
  }
}
@media (max-width: 625px) {
  .f_box .shop_more {
    font-size: 70%;
    padding-left: 1.25rem;
    padding-right: 2.5rem;
  }
}
@media (max-width: 425px) {
  .f_box .shop_more {
    font-size: 60%;
  }
}
.f_box .shop_more::after {
  position: absolute;
  top: 50%;
  right: 32px;
  margin-top: -14px;
  width: 28px;
  height: 28px;
  transform: rotate(-90deg);
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_52_2)'%3E%3Cpath d='M14 -5.72205e-06C16.7689 -5.72205e-06 19.4757 0.821079 21.778 2.35942C24.0803 3.89776 25.8747 6.08426 26.9343 8.64243C27.9939 11.2006 28.2712 14.0155 27.731 16.7313C27.1908 19.447 25.8574 21.9416 23.8995 23.8995C21.9416 25.8574 19.447 27.1908 16.7313 27.731C14.0155 28.2712 11.2006 27.9939 8.64243 26.9343C6.08427 25.8747 3.89777 24.0803 2.35943 21.778C0.821086 19.4757 0 16.7689 0 14C0 10.287 1.475 6.72601 4.1005 4.1005C6.72601 1.47499 10.287 -5.72205e-06 14 -5.72205e-06Z' fill='white'/%3E%3Cpath d='M8.48682 14.054L13.9998 19.567L19.5128 14.054' stroke='%23EA5505' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 8.488V19.513' stroke='%23EA5505' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_52_2'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
@media (max-width: 750px) {
  .f_box .shop_more::after {
    right: 4.27vw;
    margin-top: -1.87vw;
    width: 3.73vw;
    height: 3.73vw;
  }
}

.f_box_1 {
  width: calc(100% - 4rem);
  box-sizing: border-box;
}

.f_box_1 .shop_more {
  padding: 1.25rem 0;
}

.f_box_2 {
  width: 49%;
  box-sizing: border-box;
}

.shop_more {
  border-radius: 50vh;
  background: #EA5504;
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 700;
  transform: rotate(0.05deg);
  padding: 1.875rem 1.25rem;
  text-align: center;
  transition: all 0.3s ease;
  line-height: 1.4;
  display: block;
  box-sizing: border-box;
  margin-bottom: 1.6875rem;
}

.shop_more:hover {
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

@media screen and (max-width: 630px) {
  .shop_more {
    font-weight: bold;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 20px auto 20px;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
    position: relative;
    width: 100%;
  }
}
@media screen and (max-width: 370px) {
  .s_sp {
    display: block;
    width: 100%;
  }
  .shop_more {
    font-weight: bold;
    padding: 16px 10px 16px 5px;
    margin: 20px auto 20px;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
    position: relative;
    width: 100%;
  }
  .shop_more::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 10px;
    margin: -6px 1px 0 0;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
  }
}
@media screen and (max-width: 300px) {
  .shop_more {
    font-size: 68%;
    font-weight: bold;
    padding: 16px 10px 16px 5px;
    margin: 20px auto 20px;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
    position: relative;
    width: 100%;
  }
  .shop_more::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 10px;
    margin: -6px 1px 0 0;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
  }
}
/* details */
#details {
  padding: 64px 20px;
}
@media (max-width: 750px) {
  #details {
    padding: 8.53vw 2.67vw;
  }
}

#details .dtl_box {
  margin-top: 20px;
}

#details .sub {
  text-align: center;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  font-family: "M PLUS Rounded 1c", "メイリオ", "meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
  line-height: inherit;
  border-radius: 12px;
  position: relative;
  z-index: 1;
  padding: 5px;
  margin: 0 0 20px;
  overflow: hidden;
}
@media (max-width: 750px) {
  #details .sub {
    font-size: 20px;
  }
}
#details .sub::after {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% + 40px);
  background-image: linear-gradient(to top, #fb3e0e 0%, #fbc60c 100%);
  content: "";
}

#details .inner {
  border-radius: 20px;
  background: #fff;
  padding: 40px 38px;
}
@media (max-width: 750px) {
  #details .inner {
    border-radius: 2.67vw;
    padding: 5.33vw 5.07vw;
  }
}

#details .inner p {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.7777777778;
  letter-spacing: 0.04em;
  transform: rotate(0.05deg);
}
@media (max-width: 480px) {
  #details .inner p {
    font-size: 16px;
  }
  #details .inner p .txt_c {
    text-align: left;
  }
}
#details .inner p + .sub {
  margin-top: 40px;
}
@media (max-width: 480px) {
  #details .inner p + .sub {
    margin-top: 26px;
  }
}

#details .inner .period {
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  transform: rotate(0.05deg);
  margin-bottom: 1.875rem;
}

#details .inner .lead {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-family: "M PLUS Rounded 1c", "メイリオ", "meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
  transform: rotate(0.05deg);
}
@media (max-width: 480px) {
  #details .inner .lead {
    font-size: 18px;
  }
}

#details .inner .text {
  font-weight: 800;
  transform: rotate(0.05deg);
  margin-bottom: 1.875rem;
}

@media (max-width: 460px) {
  #details .inner .text {
    margin-bottom: 1.25rem;
  }
}
#details .inner > *:last-child {
  margin-bottom: 0;
}

#details ul {
  margin: 1.0625rem 0 40px;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 1.5555555556;
  transform: rotate(0.05deg);
}
@media (max-width: 480px) {
  #details ul {
    font-size: 16px;
  }
}

#details ul li .indent {
  margin-top: 0.25rem;
}
@media (max-width: 480px) {
  #details ul li .indent {
    font-size: 16px !important;
  }
}

#details ol {
  padding-inline-start: 10px;
  margin-block-end: 0;
  margin: 0 0 0 1.5em;
  line-height: 1.4;
  padding: 0 8px;
}

#details ol li {
  list-style-type: decimal !important;
}

/* Special Thanks */
#thanks {
  margin-top: -50px;
}
@media (max-width: 750px) {
  #thanks {
    margin-top: -6.67vw;
  }
}

#thanks .cp_box {
  padding: 0 3.75rem 2.5rem;
  background: #FFE07C;
  margin-top: -58px;
}

#thanks .cp_box p {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  transform: rotate(0.05deg);
}

@media (max-width: 480px) {
  #thanks .cp_box {
    padding: 2.5rem 1.875rem;
  }
}
#credits {
  font-size: 0.8125rem;
  text-align: center;
  font-weight: 800;
  padding: 1.75rem 1.5rem;
  background: #fff;
}

#credits p {
  margin: 0;
  transform: rotate(0.05deg);
}

#credits a {
  color: #7181C2;
  text-decoration: underline;
}

#credits a:hover {
  text-decoration: none;
}

#credits .links {
  margin-top: 0.75rem;
}

#credits .links li {
  padding-top: 0.25rem;
}

#credits .copyright {
  color: #7181C2;
  padding-top: 0.25rem;
}

.l-bg-bottom {
  position: relative;
  overflow: hidden;
}
.l-bg-bottom::after {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 1061px;
  top: 0;
  left: 0;
  background-image: url("../img/lp/bg-recommend.png"), linear-gradient(to bottom, #fb3e0e 0%, #fbc60c 100%);
  background-size: 1281px auto, auto auto;
  background-position: top 88% center, top left;
  background-repeat: repeat-y, repeat;
  background-blend-mode: screen, normal;
  content: "";
}

/* contact */
#contact {
  position: relative;
  padding-top: 90px;
  background-image: url("../img/lp/firework2.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
@media (max-width: 750px) {
  #contact {
    padding-top: 12vw;
  }
}

#contact .title {
  padding-top: 1.75rem;
  padding-bottom: 0;
}

#contact h4 {
  line-height: 1.8;
  white-space: nowrap;
  color: #000;
  font-size: 1rem;
  font-weight: bold;
}

#contact h4 a::after {
  content: "";
  display: inline-block;
  margin-left: 0.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12.001' viewBox='0 0 12 12.001'%3E%3Cg transform='translate(-302 -13655)'%3E%3Cpath d='M1.5,1.5v6h6v-6h-6M0,0H9V9H0Z' transform='translate(305 13655)' fill='%23eb5505'/%3E%3Cpath d='M0,7.5V0H1.5V6h6V7.5Z' transform='translate(302 13659.5)' fill='%23eb5505'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}

#contact .body {
  margin: 20px 20px 0;
  display: flex;
  padding: 50px;
  gap: 46px;
  justify-content: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 0 0 #E0B257;
}
@media (max-width: 750px) {
  #contact .body {
    margin: 2.67vw 2.67vw 0;
    box-shadow: 0 1.07vw 0 0 #E0B257;
    border-radius: 2.67vw;
  }
}

@media (max-width: 720px) {
  #contact .body {
    gap: 1.25rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 640px) {
  #contact .body {
    flex-direction: column;
    align-items: center;
    gap: 0.9375rem;
    padding: 2.5rem 1.25rem;
  }
}
#contact .button {
  display: block;
  width: 100%;
  font-size: 1.1875rem;
  font-weight: bold;
  transform: rotate(0.05deg);
  line-height: 1;
  border-radius: 50vh;
  background: #EB5505;
  color: #fff;
  text-align: center;
  padding: 1.3125rem 1.4375rem 1.3125rem 0.3125rem;
  text-decoration: none;
  position: relative;
  transition: opacity 0.3s;
  box-sizing: border-box;
  max-width: 17.625rem;
}

@media (max-width: 640px) {
  #contact .button {
    font-size: 1.125rem;
  }
}
#contact .button.-pink {
  background: #EA0183;
}

#contact .button::after {
  position: absolute;
  top: 50%;
  right: 1.625rem;
  margin-top: -0.5625rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.368' height='17.367' viewBox='0 0 17.368 17.367'%3E%3Cg transform='translate(1 1.414)'%3E%3Cpath d='M16.961,14.815V19.8A1.661,1.661,0,0,1,15.3,21.461H6.161A1.661,1.661,0,0,1,4.5,19.8V10.661A1.661,1.661,0,0,1,6.161,9h4.984' transform='translate(-4.5 -6.508)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M22.5,4.5h4.984V9.484' transform='translate(-12.531 -4.5)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M15,13.638,24.138,4.5' transform='translate(-9.185 -4.5)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  width: 1.125rem;
  height: 1.125rem;
  content: "";
}

#contact .button:hover {
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

#contact .f_box {
  display: flex;
  margin-top: 0;
  padding: 2.8125rem 0;
}

#contact .f_item {
  width: 50%;
  text-align: center;
}

#contact .f_item:nth-child(2) h4 a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12.001' viewBox='0 0 12 12.001'%3E%3Cg transform='translate(-302 -13655)'%3E%3Cpath d='M1.5,1.5v6h6v-6h-6M0,0H9V9H0Z' transform='translate(305 13655)' fill='%23F41885'/%3E%3Cpath d='M0,7.5V0H1.5V6h6V7.5Z' transform='translate(302 13659.5)' fill='%23F41885'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#contact dl {
  margin: 10px 0;
}

#contact dl dt {
  font-weight: bold;
}

#contact dl dt span {
  font-weight: bold;
  font-size: 1.1em;
}

#contact dl dd {
  font-weight: normal;
  margin-left: 0.5em;
  margin-bottom: 0.3rem;
}

#contact dl dd span {
  font-weight: bold;
}

@media screen and (max-width: 460px) {
  #contact .f_box {
    padding: 1.875rem 0;
  }
}
@media screen and (max-width: 410px) {
  #contact h4 {
    font-size: 12px;
  }
}
.b_dot li {
  font-size: 18px;
  line-height: 1.7777777778;
  list-style-type: none;
  position: relative;
  padding-left: 1rem;
  padding-top: 0;
}
@media (max-width: 480px) {
  .b_dot li {
    font-size: 16px;
  }
}
.b_dot li .indent {
  font-size: 18px !important;
  line-height: 1.5555555556 !important;
}

.b_dot li + li {
  margin-top: 0.25rem;
}

.b_dot li a {
  text-decoration: underline;
}

.b_dot li li {
  padding-left: 1.125rem;
}

.b_dot li li::before {
  position: absolute;
  top: 0.75rem;
  left: 0;
  width: 0.625rem;
  border-bottom: 2px solid #13A200;
  content: "";
}

.b_dot li .indent {
  margin-top: 0.25rem !important;
}

.b_dot > li::before {
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  left: 0;
  top: 13px;
  content: "";
  background-image: linear-gradient(to bottom right, #fe8900 0%, #f85203 45.3%, #e10010 100%);
}

.b_dot li ul {
  list-style-type: none;
}

.b_dot .none {
  list-style-type: none;
}

.b_dot .none:before {
  display: none;
}

/* other */
#other {
  text-align: center;
  box-sizing: border-box;
  padding: 64px 0 58px;
}

@media (max-width: 460px) {
  #other {
    padding: 42px 0 40px;
  }
}
#other .title {
  padding-top: 1.75rem;
  padding-bottom: 0;
}

#other p {
  margin: 10px auto 10px;
  padding: 0 2%;
  font-size: 1em;
}

/* banner box */
.bnr_box {
  background: #FFF;
  margin: 20px 20px 0;
  padding: 40px 38px;
  box-shadow: 0 8px 0 0 #E0B257;
  border-radius: 20px;
}
@media (max-width: 750px) {
  .bnr_box {
    margin: 2.67vw 2.67vw 0;
    padding: 5.33vw 5.07vw;
    border-radius: 2.67vw;
  }
}

.bnr_box img {
  width: 100%;
  height: auto;
}

.bnr_box div {
  margin: 0 auto;
}

.bnr_box div:nth-child(n+2) {
  margin-top: 20px;
}

.bnr_box div a:hover {
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

.d_link {
  margin-top: 1.875rem;
  padding: 0 2.5rem;
}

.d_link > a {
  display: block;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  transform: rotate(0.05deg);
  padding: 1.75rem 0;
  border-radius: 50vh;
  box-sizing: border-box;
  width: 100%;
  line-height: 1.5;
  background-color: #EA5504;
  color: #fff;
}

@media (max-width: 460px) {
  .d_link > a {
    padding: 1rem 0;
    font-size: 1rem;
  }
}
.d_link > a:hover {
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}

/* max-width:460px--------------------------------------------------------- */
@media (max-width: 460px) {
  h3 {
    font-size: 1.1em;
    background-size: auto;
  }
  br.pc_none {
    display: inline;
  }
  .ttl_shops {
    font-size: 1.1em;
    background-size: auto;
  }
  .ttl_details {
    font-size: 1.2em;
  }
  .top_period {
    font-size: calc(5.2vw + 0.15rem);
    padding: 12px;
    line-height: 1.4;
    letter-spacing: 0;
  }
  .annotation {
    font-size: calc(5.2vw + 0.12rem);
    margin-bottom: 10px;
  }
  .annotation:after {
    bottom: -10px;
    left: 50%;
    margin: 0 0 0 -12px;
    border-right: 10px solid transparent;
    border-top: 10px solid #f61a53;
    border-left: 10px solid transparent;
  }
  #details h4 img {
    width: 250px;
  }
  #details .inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
/* Policy */
/*.footerNav a {
  display: block;
  position: relative;
  cursor: pointer;
  color: #fff;
	font-size: .85em;
	line-height: 1;
	text-align: center;
  padding: 18px 0;
  background: #222C4A;
}
.footerNav a::after {
  position: absolute;
  top: 40%;
  margin-left: .5em;
  background-image: url(https://kantan-cpn.auone.jp/sp/campaign/kantan_all/common/img/icon_blank_g.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 8px;
  height: 8px;
  transition: transform 0.5s;
  content: "";
}*/
ul#footerNav {
  margin: 0 auto 5px;
  text-align: center;
  padding: 10px 0 10px;
  background: #222C4A;
}

ul#footerNav li {
  display: inline-block;
  padding: 0 1em 0 0;
  background: url(https://kantan-cpn.auone.jp/sp/campaign/kantan_all/common/img/icon_blank_g.png) no-repeat right 15%;
  font-size: 0.85em;
  line-height: 1;
}

ul#footerNav li a {
  color: #FFF;
}

/* 下書き時に出現する.fabを非表示にする */
.fab {
  display: none;
}

/* =================================
font size
================================= */
.fs-10 {
  font-size: 10px;
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}

.fs-24 {
  font-size: 24px;
}

.fs-26 {
  font-size: 26px;
}

.fs-28 {
  font-size: 28px;
}

.fs-30 {
  font-size: 30px;
}

.fs-32 {
  font-size: 32px;
}

.fs-34 {
  font-size: 34px;
}

.fs-36 {
  font-size: 36px;
}

.fs-38 {
  font-size: 38px;
}

/* =================================
margin
================================= */
.mt0 {
  margin-top: 0px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt16 {
  margin-top: 16px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mr8 {
  margin-right: 8px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr16 {
  margin-right: 16px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr24 {
  margin-right: 24px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb8 {
  margin-bottom: 8px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.ml8 {
  margin-left: 8px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml16 {
  margin-left: 16px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml24 {
  margin-left: 24px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.mv0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.mv5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.mv8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.mv10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.mv15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.mv16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.mv20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.mv24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.mv25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.mv30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.mv35 {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.mv40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.mv45 {
  margin-top: 45px !important;
  margin-bottom: 45px !important;
}

.mv50 {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}

/* padding */
.pt0 {
  padding-top: 0px !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pt8 {
  padding-top: 8px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pr0 {
  padding-right: 0px !important;
}

.pr5 {
  padding-right: 5px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr35 {
  padding-right: 35px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pr45 {
  padding-right: 45px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.pb8 {
  padding-bottom: 8px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pb35 {
  padding-bottom: 35px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pl0 {
  padding-left: 0px !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl35 {
  padding-left: 35px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pl45 {
  padding-left: 45px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pa0 {
  padding: 0px !important;
}

.pa5 {
  padding: 5px !important;
}

.pa8 {
  padding: 8px !important;
}

.pa10 {
  padding: 10px !important;
}

.txt_c {
  text-align: center;
}

.f_o {
  color: #eb5505;
}

.f_p {
  color: rgb(242, 9, 129);
}

.f_line {
  text-decoration: underline;
}

.f_app {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2727272727;
}

.f_app > p {
  padding: 0 2.125rem;
  font-weight: 800;
}

@media (max-width: 700px) {
  .f_app {
    font-size: 1.25rem;
  }
}
@media (max-width: 595px) {
  .f_app br {
    display: none;
  }
}
.bule_back {
  background: #000057;
}

.white_back {
  background: #FFF;
}

.blue_f {
  color: #2F678D;
}

.dis_box {
  text-align: center;
  background: #FFF;
  padding: 20px;
  margin: 0;
}

.footer {
  color: #6d80c7;
  padding: 30px 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
}
.footer p {
  margin: 0;
  font-weight: 800;
  transform: rotate(0.05deg);
}
.footer .text {
  color: #000;
  margin-bottom: 16px;
}
.footer .copyright {
  margin-top: 5px;
}

.optout + .optout {
  margin-top: 5px;
}

.optout a {
  color: #7181C2 !important;
  text-decoration: underline;
}

.bar {
  margin: 0;
  width: 100%;
  padding-bottom: 0;
  line-height: 0;
}

.bar img {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

@media (max-width: 460px) {
  .bar {
    margin: 0;
    width: 100%;
    padding-bottom: 0;
    line-height: 0;
  }
}
/* Slider */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px 4px !important;
}

.swiper-pagination-bullet {
  background-color: #fff !important;
  opacity: 1 !important;
  height: 8px !important;
  width: 8px !important;
}

.swiper-pagination-bullet-active {
  background-color: #FB4D0D !important;
}

.swiper-slide {
  width: 100%;
  height: auto;
  margin-bottom: 55px;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
}

#slider h4 {
  font-weight: bold;
}

#slider {
  padding: 0;
  margin: 0;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

#slider .title {
  padding-top: 1.75rem;
  padding-bottom: 0;
}

#sld {
  margin: 60px 0 0 auto;
  z-index: 999;
  width: 99.5%;
}
@media (max-width: 550px) {
  #sld {
    margin-top: 32px;
  }
}

#sld .swiper-pagination {
  box-sizing: border-box;
  bottom: 20px;
}

@media (max-width: 460px) {
  #sld .swiper-pagination {
    bottom: 10px;
  }
}
#slider .sld_item {
  margin: 0 0 60px 0;
  position: relative;
}

#slider .s_i_b {
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 0 5px 10px 5px;
  background: #fff;
  align-items: center;
}

#slider .s_i {
  width: 50%;
}

#slider .s_i img {
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
}

#slider .s_t {
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding: 0 5px 0 7px;
  text-align: left;
  font-size: 70%;
  font-weight: bold;
  transform: rotate(0.05deg);
  line-height: 1.3;
  margin: 0 0 0 0;
  color: #000;
  letter-spacing: 0.01em;
  word-wrap: break-word;
}

#slider .s_t span {
  font-size: 115%;
}

#slider .s_t p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 95%;
  text-align: center;
  box-sizing: border-box;
  background: rgb(0, 182, 227);
  color: #FFF !important;
  border-radius: 7px;
  padding: 2px 0;
  line-height: 1.8;
  margin: 0 5px 5px 0;
}

#slider .s_t p:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";
}

#slider .s_t p::before {
  content: "ストアで入手する";
}

@media (max-width: 570px) {
  #slider .s_i_b {
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 0 2px 3px 2px;
    align-items: center;
  }
}
@media (max-width: 460px) {
  #slider .sld_item {
    margin: 0 0 50px 0;
    position: relative;
  }
  #slider .s_i {
    width: 45%;
  }
  #slider .s_i img {
    border-radius: 13px;
  }
  #slider .s_t {
    position: relative;
    width: 55%;
    padding: 0 0 0 4px;
    text-align: left;
    font-size: 65%;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
    letter-spacing: 0.01em;
  }
  #slider .s_t span {
    font-size: 110%;
  }
  #slider .s_t p {
    position: absolute;
    width: 97%;
    bottom: 0;
    left: 0;
    text-align: center;
    font-size: 90%;
    box-sizing: border-box;
    display: block;
    border-radius: 5px;
    padding: 2px 0;
    margin: 0 0 0 0;
  }
}
@media (max-width: 400px) {
  #slider .s_i_b {
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 6px;
    margin: 0 2px 3px 1px;
    align-items: center;
  }
}
#slider .swiper-button-prev {
  left: 2.125rem;
}

#slider .swiper-button-next {
  right: 2.125rem;
}

#slider .swiper-button-prev,
#slider .swiper-button-next {
  width: 40px;
  height: 40px;
}

#slider .swiper-button-next::after,
.swiper-container-rtl .swiper-button-prev::after {
  outline: none;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_2)'%3E%3Cpath d='M20 0C23.9556 0 27.8224 1.17298 31.1114 3.37061C34.4004 5.56824 36.9638 8.69181 38.4776 12.3463C39.9913 16.0009 40.3874 20.0222 39.6157 23.9018C38.844 27.7814 36.9392 31.3451 34.1421 34.1421C31.3451 36.9392 27.7814 38.844 23.9018 39.6157C20.0222 40.3874 16.0009 39.9913 12.3463 38.4776C8.69181 36.9638 5.56824 34.4004 3.37061 31.1114C1.17298 27.8224 0 23.9556 0 20C0 14.6957 2.10714 9.60859 5.85786 5.85786C9.60859 2.10714 14.6957 0 20 0Z' fill='%23FB4D0D'/%3E%3Cpath d='M18.015 20L24.633 26.805C24.8687 27.0487 25.0004 27.3745 25.0004 27.7135C25.0004 28.0525 24.8687 28.3783 24.633 28.622C24.5182 28.7407 24.3807 28.8352 24.2287 28.8996C24.0766 28.9641 23.9132 28.9974 23.748 28.9974C23.5829 28.9974 23.4194 28.9641 23.2674 28.8996C23.1153 28.8352 22.9778 28.7407 22.863 28.622L15.364 20.913C15.1371 20.6757 15.0074 20.3618 15.0008 20.0335C14.9941 19.7052 15.1109 19.3863 15.328 19.14L22.857 11.375C22.9719 11.2564 23.1094 11.1621 23.2615 11.0977C23.4135 11.0333 23.5769 11.0001 23.742 11.0001C23.9071 11.0001 24.0706 11.0333 24.2226 11.0977C24.3746 11.1621 24.5122 11.2564 24.627 11.375C24.8627 11.6187 24.9944 11.9445 24.9944 12.2835C24.9944 12.6225 24.8627 12.9483 24.627 13.192L18.015 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_2'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(-1);
  content: "";
}

#slider .swiper-button-prev::after,
.swiper-container-rtl .swiper-button-next::after {
  outline: none;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_2)'%3E%3Cpath d='M20 0C23.9556 0 27.8224 1.17298 31.1114 3.37061C34.4004 5.56824 36.9638 8.69181 38.4776 12.3463C39.9913 16.0009 40.3874 20.0222 39.6157 23.9018C38.844 27.7814 36.9392 31.3451 34.1421 34.1421C31.3451 36.9392 27.7814 38.844 23.9018 39.6157C20.0222 40.3874 16.0009 39.9913 12.3463 38.4776C8.69181 36.9638 5.56824 34.4004 3.37061 31.1114C1.17298 27.8224 0 23.9556 0 20C0 14.6957 2.10714 9.60859 5.85786 5.85786C9.60859 2.10714 14.6957 0 20 0Z' fill='%23FB4D0D'/%3E%3Cpath d='M18.015 20L24.633 26.805C24.8687 27.0487 25.0004 27.3745 25.0004 27.7135C25.0004 28.0525 24.8687 28.3783 24.633 28.622C24.5182 28.7407 24.3807 28.8352 24.2287 28.8996C24.0766 28.9641 23.9132 28.9974 23.748 28.9974C23.5829 28.9974 23.4194 28.9641 23.2674 28.8996C23.1153 28.8352 22.9778 28.7407 22.863 28.622L15.364 20.913C15.1371 20.6757 15.0074 20.3618 15.0008 20.0335C14.9941 19.7052 15.1109 19.3863 15.328 19.14L22.857 11.375C22.9719 11.2564 23.1094 11.1621 23.2615 11.0977C23.4135 11.0333 23.5769 11.0001 23.742 11.0001C23.9071 11.0001 24.0706 11.0333 24.2226 11.0977C24.3746 11.1621 24.5122 11.2564 24.627 11.375C24.8627 11.6187 24.9944 11.9445 24.9944 12.2835C24.9944 12.6225 24.8627 12.9483 24.627 13.192L18.015 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_2'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

#slider .swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 0px;
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
  padding: 0 50px 0;
}

@media (max-width: 460px) {
  #slider .swiper-button-prev {
    left: 0.875rem;
  }
  #slider .swiper-button-next {
    right: 0.875rem;
  }
}
.peri {
  clip-path: polygon(0 15%, 100% 0, 100% 54%, 0 100%);
  background-color: rgb(0, 209, 199);
  color: #FFF;
  padding: 30px 0 0;
  height: 150px;
  margin-top: -160px;
}

.peri02 {
  clip-path: polygon(0 15%, 100% 0, 100% 54%, 0 100%);
  background: linear-gradient(90deg, transparent, #ff00ff 50%, #03e9f4 100%);
  margin-top: 0;
  padding: 30px 0 0;
  height: 157px;
  z-index: 0;
}

@media (max-width: 570px) {
  .peri {
    clip-path: polygon(0 15%, 100% 0, 100% 54%, 0 100%);
    color: #FFF;
    padding: 20px 0 0;
    height: 100px;
    margin-top: -110px;
  }
  .peri02 {
    clip-path: polygon(0 15%, 100% 0, 100% 54%, 0 100%);
    margin-top: 0;
    padding: 20px 0 0;
    height: 106px;
    z-index: 0;
  }
}
@media (max-width: 460px) {
  .peri {
    clip-path: polygon(0 15%, 100% 0, 100% 54%, 0 100%);
    color: #FFF;
    padding: 10px 0 0;
    height: 70px;
    margin-top: -80px;
  }
  .peri02 {
    clip-path: polygon(0 15%, 100% 0, 100% 54%, 0 100%);
    margin-top: 0;
    padding: 10px 0 0;
    height: 70px;
    z-index: 0;
  }
}
/* キャンペーン期間前 */
.btn-secondary {
  background-color: #eb5505;
  border: #ff9123 solid 4px;
  border-radius: 20px;
}

.campaign__container-floating-footer .campaign__entry-btn  {
  font-size: 20px;
  line-height: 1.8;
}

/* キャンペーン期間中 */
.btn-primary {
  background-color: #eb5505;
  border: #ff9123 solid 4px;
  border-radius: 20px 0;
}

.btn-primary:hover {
  background-color: #e35e51;
  border-color: #e35e51;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #d11300;
  border-color: #d11300;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: #e35e51;
  border-color: #e35e51;
}

.campaign__container-floating-footer .campaign__entry-btn {
  font-size: 20px;
  line-height: 1.8;
}

/* entry_btn
------------------------------------------------------------- */
.campaign__container-floating-footer {
  position: sticky;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0 0 0;
  z-index: 1;
  box-sizing: border-box;
}

.campaign__schedule {
  display: none;
}

.campaign__container-finish {
  background: rgba(0, 0, 0, 0.7);
  max-width: 750px;
  margin: 10px auto 0;
  position: fixed;
  bottom: 48px;
  padding: 10px 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
}

.campaign__container-finish .btn-primary {
  background-color: #ccc;
  color: #000;
  border: #000 solid 4px;
  border-radius: 15px;
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
}

.btn-primary {
  color: #FFF;
  border-radius: 50px;
  max-width: 750px;
  width: 90%;
  margin: 7px auto 15px;
  padding: 20px 0;
  box-sizing: border-box;
  font-size: 18px;
  border-bottom: 5px solid rgb(255, 255, 255);
  border-right: 4px solid rgb(255, 255, 255);
  border-top: none;
  border-left: none;
  background-color: #eb5505;
}

#ft_btn {
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  color: #fff;
  max-width: 750px;
  margin: 0 auto 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
  font-size: 12px;
}

#ft_btn p {
  font-size: 120%;
  margin: 7px 0 2px;
}

@media screen and (max-width: 460px) {
  .arw_box div {
    font-size: 80%;
  }
  .arw_box02 {
    font-size: 70%;
  }
  .btn_link {
    font-size: 0.8rem;
  }
  .btn_link::after {
    top: 2px;
    right: 35px;
  }
}
.js-time_limited {
  display: none;
}

.js-time_limited_fire {
  display: block;
}

.t_info {
  color: #FFF;
  font-weight: bold;
  background: #eb5505;
  text-align: center;
  padding: 10px 0;
  margin: 10px auto;
}