@charset "UTF-8";

.campaign__container-floating-footer {
  display: none !important;
}

.gampla-entry-btn-entered,
.gampla-entry-btn-inactive,
.gampla-entry-btn {
  display: block;
  text-indent: -9999px;
  aspect-ratio: 610 / 147;
  background-color: #FFF !important;
}

.gampla-entry-btn-entered {
  background-image: url("https://media.gampla.jp/image/visual/3649/5fa48c53-c8f7-463f-a02a-6d6a6acbb011.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}

.gampla-entry-btn {
  background-image: url("https://media.gampla.jp/image/visual/3650/f30b487c-3b2d-46c8-b234-6e651ef02ac4.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.gampla-entry-btn-inactive {
  background-image: url("https://media.gampla.jp/image/visual/3648/8e46bbd0-43a9-4e26-aa41-bec382a6b58f.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.f-menu .gampla-entry-btn-entered,
.gampla-entry-btn {
  max-width: 400px;
}


/* ------------------------------
Reset CSS
------------------------------ */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul {
  list-style-type: none;
}

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

a {
  outline: 0;
  color: #4e3f32;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: underline;
  box-sizing: border-box;
  outline: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

button::-moz-focus-inner {
  border: 0;
}

/* ------------------------------
Body
------------------------------ */
body {
  margin: 0 auto;
  color: #1c1c1c;
  background: #f2f2f2;
  font-family: 'Roboto', 'Noto Sans Japanese', 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  letter-spacing: 0.05rem;
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Roboto', 'Noto Sans Japanese', 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', sans-serif;
  color: #1c1c1c;
}

#lp-wrap {
  max-width: 760px;
  margin: auto;
  background: #fd9fc6
}

.sec-container {
  padding: 0 4%;
}

/* ------------------------------ */


.f-menu {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px 6.5% calc(10px + env(safe-area-inset-bottom));
  width: 100%;
  background: rgba(255, 255, 255, 1);
  transition: .3s
}

#lp-wrap .f-menu p {
  padding-top: 1%;
  padding-bottom: 0
}

#lp-wrap {
  padding-bottom: 140px
}

#lp-wrap p {
  width: 86%;
  margin: 0 auto;
  padding: 2% 0;
  font-size: 4.1vw;
  font-size: clamp(16px, 4.1vw, 19px);
  line-height: 1.6
}

#lp-wrap small.txt-s {
  display: block;
  font-size: 2.56vw;
  font-size: clamp(9px, 2.56vw, 11px);
  line-height: 1.4
}

#lp-wrap h4 {
  font-size: 4.1vw;
  font-size: clamp(16px, 4.1vw, 19px);
  font-weight: 700;
  line-height: 1.6
}

#lp-wrap li {
  font-size: 4.1vw;
  font-size: clamp(16px, 4.1vw, 19px);
  line-height: 1.6;
  word-wrap: break-word;
  word-break: break-all
}

#lp-wrap sup {
  vertical-align: super;
  line-height: 1;
}

a {
  color: #007fe8;
  text-decoration: underline
}

.btnCmn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 1.5% auto 3%;
  padding: 4% 4%;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 2px solid #e4141c;
  border-radius: 1.5vmin;
  color: #e4141c;
  font-size: 4.1vw;
  font-size: clamp(16px, 4.1vw, 19px);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  box-shadow: 0px 3px 0px 0px #d8d8d8;
}

.btnCmn+.btnCmn {
  margin-top: 5%
}

.btnCmn::after {
  content: "";
  display: block;
  position: absolute;
  width: min(2vw, 12px);
  height: min(2vw, 12px);
  right: min(5%, 30px);
  top: 50%;
  margin-top: -7px;
  border-right: min(.5vw, 3px) solid #e4141c;
  border-top: min(.5vw, 3px) solid #e4141c;
  transform: rotate(45deg);
  transition: .2s
}

.bg-blk {
  padding: 5% 0;
  background: #1a1a1a
}

.bg-wht {
  background: #fff
}

.bg-pnk {
  background: #fd9fc6
}

.box-inner {
  padding: 5% 4%
}

#lp-wrap .box-inner p {
  width: 100%;
}

.txt-c {
  text-align: center
}

.f-b {
  font-weight: 700
}

.inner {
  padding: 5% 3%
}

#lp-wrap .fs-s {
  font-size: 3.58vw;
  font-size: clamp(14px, 3.58vw, 17px)
}

#lp-wrap .fs-ss {
  font-size: 2.8vw;
  font-size: clamp(11px, 2.8vw, 14px)
}

.pdt00 {
  padding-top: 0 !important
}

.pdt07 {
  padding-top: 7% !important
}

.pdb05 {
  padding-bottom: 5% !important
}

.pdb10 {
  padding-bottom: 10% !important
}

.pdg05 {
  padding: 5% !important
}

.pdg01 {
  padding: 1% !important
}

.mgt02 {
  margin-top: 2% !important
}

.mgt05 {
  margin-top: 5% !important
}

.mgt07 {
  margin-top: 7% !important
}

.mgt10 {
  margin-top: 10% !important
}

.mgt15 {
  margin-top: 15% !important
}

.mgb03 {
  margin-bottom: 3% !important
}

.mgb05 {
  margin-bottom: 5% !important
}

.cmnBox {
  width: 96%;
  margin: 0 auto;
  padding: 5% 2.5%
}

.header {
  display: flex;
  align-items: center;
  justify-content: center
}

.header .logo {
  width: 13.8%;
  aspect-ratio: 1.35/1;
}

.red {
  color: #e4141c;
}

.cmnTtl {
  margin-bottom: 4px;
  padding: 2% 5% 1.5% 7%;
  background: #e4141c;
  background: linear-gradient(105deg, #e4141c 0, #e4141c 6%, #bc0029 6%);
  color: #fff;
  font-size: 5.12vw;
  font-size: clamp(16px, 5.12vw, 26px);
  font-weight: 700;
}

.cmnTtl a {
  color: #fff;
  text-decoration: none
}

.subTtl {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2%;
  font-size: 3.84vw;
  font-size: clamp(14px, 3.84vw, 18px);
  font-weight: 700;
  line-height: 1.4;
}

.subTtl::before {
  content: "■";
  margin-right: 5px;
  color: #e4141c;
  flex-shrink: 0;
}

#lp-wrap .accordion p {
  width: 100%
}

.accordion {
  margin: 5% auto;
  width: 100%;
  background: #f2f2f2;
  border: 2px solid #ccc;
  border-radius: 1.5vmin;
}

.a-title {
  position: relative;
  padding: min(5%, 24px) min(10%, 40px) min(5%, 24px) min(4%, 20px);
  color: #000;
  font-size: 3.58vw;
  font-size: clamp(16px, 4.1vw, 19px);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: all .2s;
}

.a-title::after {
  content: "";
  display: block;
  position: absolute;
  width: min(2vw, 12px);
  height: min(2vw, 12px);
  right: min(5%, 30px);
  top: 50%;
  margin-top: -7px;
  border-right: min(.5vw, 3px) solid #e4141c;
  border-bottom: min(.5vw, 3px) solid #e4141c;
  transform: rotate(45deg);
  transition: .2s
}

.a-title.open:after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.a-box {
  padding: 0 min(3.3%, 16px) 20px;
}

.a-box .arrow {
  padding-bottom: 10px
}

.a-box p {
  padding: 1% 0 !important
}

.a-box img {
  display: block;
  width: 56%;
  margin: 2% auto 0
}

.list-accordion {
  text-align: left;
  margin-top: 0;
  list-style: none;
  list-style-image: url(data:0);
}

.list-accordion li {
  position: relative;
  padding-left: 18px;
  word-wrap: break-word;
  word-break: break-all
}

.list-accordion .dot,
.list-accordion .marker,
.list-accordion .ccl {
  padding-left: 1.2em;
}

.list-accordion .bracket {
  padding-left: 2.2em;
}

.list-accordion .dot::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.list-accordion .ccl::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
}

.list-accordion .sq::before {
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
}

.list-accordion .star::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
}

.list-accordion .marker::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

.list-accordion .bracket::before {
  content: "ー";
  position: absolute;
  left: 1em;
  top: 0;
}

.list-accordion li+li {
  margin-top: .2em;
}

#lp-wrap .list-accordion.fs-s li {
  font-size: 3.84vw;
  font-size: clamp(14px, 3.84vw, 18px);
}

#lp-wrap .list-accordion.fs-ss li {
  font-size: 2.8vw;
  font-size: clamp(11px, 2.8vw, 14px)
}

#lp-wrap .list-accordion.pgno li {
  padding-left: 0
}

.lpbox {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: #fff
}

.lpbox+.lpbox {
  margin-top: 5%
}

#lp-wrap .lpbox p {
  width: 100%
}

.boxTtl {
  padding: 1% 5%;
  background: #9b9b9b;
  color: #fff;
  font-weight: 700;
  text-align: center
}

.box__inner {
  padding: min(2%, 10px)
}

.mvImg {
  display: block;
  width: 100%;
  aspect-ratio: 2/3
}

#lp-wrap p.date {
  padding: 4% !important;
  border: 1px solid #e4141c;
  color: #e4141c;
  font-size: 4.1vw;
  font-size: clamp(16px, 4.1vw, 22px);
  font-weight: 700;
  text-align: center
}

.menuNav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 2% 1.5%;
}

.menuNav li {
  width: 24.5%;
  border-top: 2px solid #fd9fc6
}

.menuNav li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: min(15vw, 90px);
  padding-bottom: 5%;
  background: #e24585;
  box-sizing: border-box;
  color: #fff;
  font-size: 2.8vw;
  font-size: clamp(11px, 2.8vw, 14px);
  text-align: center;
  text-decoration: none
}

.menuNav li a::after {
  content: "";
  position: absolute;
}

.menuNav li a::after {
  bottom: 6px;
  left: calc(50% - 4px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}

.stepTtl {
  display: flex;
  align-items: flex-start;
  font-size: 4.16vw;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 700
}

.stepTtl.bar {
  padding-left: .7rem;
  border-left: 5px solid #e4141c
}

.stepTtl span {
  margin-right: 10px;
  padding: 2px 8px;
  background: #e4141c;
  color: #fff;
  font-size: 3.58vw;
  font-size: clamp(14px, 3.58vw, 18px);
}

[class^="prImg"] {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.prImg1 {
  aspect-ratio: 690/390
}

.prImg2 {
  aspect-ratio: 690/460
}

.prImg3 {
  aspect-ratio: 690/700
}

.blkBox {
  margin: 5% auto;
  border: 1px solid #1a1a1a
}

.blkTtl {
  padding: 1% 4%;
  background: #1a1a1a;
  color: #fff;
  text-align: center
}

.cenTtl {
  margin-top: 7%;
  font-size: 4.1vw;
  font-size: clamp(16px, 4.1vw, 19px);
  font-weight: 700;
  text-align: center
}

@media (min-width: 768px) {
  .pcno {
    display: none !important
  }
}

.bnrImg {
  display: block
}

.recoBox {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap
}

.reco-inner {
  margin-bottom: 5%;
  flex-basis: 48%
}

.reco-inner iframe {
  width: 100%;
  aspect-ratio: 16/9
}

.reco-inner p {
  min-height: 60px;
  padding: 0 0 0 8px !important;
  border-left: min(.8vmin, 5px) solid #e4141c;
  font-size: 3.58vw;
  font-size: clamp(14px, 3.58vw, 18px);
}

/* add */
#lp-wrap {
  padding-bottom: 0;
}

#lp-wrap,
.bg-pnk {
  background: #010202;
}

.tab-group {
  display: flex;
  gap: 12px;
}

.tab-group button {
  background: #2cccd3;
  border-top: 2px solid #adf7fa;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: clamp(13px, 3vw, 16px);
  position: relative;
  text-decoration: none;
  height: min(15vw, 90px);
}

.tab-group button::after {
  border-style: solid;
  border-width: 4px 4px 0px;
  border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
  content: "";
  position: absolute;
  bottom: 6px;
  left: calc(50% - 4px);
  width: 0px;
  height: 0px;
}

.tab-group button.is-active {
  background: #010202;
  border-top: 2px solid #505c5c;
  font-size: clamp(16px, 3vw, 20px);
}

.tab-group button.is-active::after {
  display: none;
}

.cmnTtl {
  background: #2cccd3;
  background: linear-gradient(105deg, #adf7fa 0, #adf7fa 6%, #2cccd3 6%);
  color: #000;
}

.tab-btn {
  transition: all .3s ease;
}

.tab-item,
.tab-box {
  display: none;
  opacity: 0;
  transition: all .3s ease;
  visibility: hidden;
}

.tab-item.is-active,
.tab-box.is-active {
  display: block;
  opacity: 1;
  visibility: visible;
}

.fab {
  display: none;
}

.gampla-entry-btn {
  background-image: url(https://prcp.pass.auone.jp/gpl/202607_netflix/img/btn.png);
}

.footer.is-active {
  padding-bottom: 160px;
}

.footer>.optout,
.footer>.copyright {
  font-size: 10px;
}