@charset "UTF-8";

/* test環境目印用 background.css*/
@import url("/assets/background.css");


/* ====================================================
reset style
==================================================== */


@import url("/assets/vw/css/pc/lp/ress.css");

ol, ul, dl {
  list-style: none;
}


/* ====================================================
base style
==================================================== */
body {
  font-size: 62.5%;
  line-height:1.1;
  color:#333333;
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  "メイリオ", "Meiryo",
  sans-serif;
}

/* sp */
@media all and (max-width: 600px) {
  body{
    min-width: initial;
  }
}

/* tablet */
@media all and (min-width: 600px) and (max-width: 1024px) {
  body{
  }
}

/* pc */
@media all and (min-width: 1024px) {
  body{
    min-width: 1024px;
  }
}


img{
  width:100%;
}

@media all and (max-width: 600px) {
  br.brPC{
    display:none;
  }
}

/* ====================================================
lp
==================================================== */
.online .bounce .online-none{
  display: none;
}
.online .bounce .online-text::before{
  content: "オンラインセミナー";
}

.lp_container{
  display: block;
  margin: 0 auto;
}


@media all and (min-width: 1024px) {
  .pcWrapper{
    width:1024px;
    margin:0 auto;
    position: relative;
    z-index: 1;
  }
}

/* header */
header{
  background:#ffffff;
}
@media screen and (max-width:480px){
  .header-container{
    padding: 5px;
  }
}

.lp header{
  position: fixed;
  width: 100%;
  margin-bottom: 30px;
}
.lp main {
  padding-top: 58px;
}
main:has(.not-fix){
  padding-top: 54px !important;
}
.lp .header-container {
  box-shadow: 0px 4px 4px 0px #4d4d4d1c;
}

.header-container:not(.l-btnArea_float){
  justify-content: space-between;
}
@media screen and (max-width:600px){
  .lp_container:not(.l-btnArea_float) main{
    padding-top: 48px;
  }
  header:not(.l-btnArea_float) h1 img {
    width: 110px;
}
}

header {
  position: fixed;
  width: 100%;
  margin-bottom: 30px;
  z-index: 30000 !important;
  top: 0;
}


header h1{
  border-bottom: 2px solid #f55d90;
  padding:0.9rem 0 0.7rem 0.5rem;
}

.lp_other_container h1{
  padding: 0;

}

header {
  position: fixed;
  width: 100%;
  margin-bottom: 30px;
  z-index: 30000 !important;
  top: 0;
}
.lp_other_container header{
  z-index: 400000 !important;
}
main {
  padding-top: 50px;
}
.header-container {
  box-shadow: 0px 4px 4px 0px #4d4d4d1c;
}

header h1 img{
  width:40%;
}
.l-btnArea_float .fl-signin, .l-btnArea_float .fl-login{
  width: 130px !important;
  border: 1px solid #fff;
}

.l-btnArea_float {
  display:flex;
  align-items: center;
  justify-content:right;
  width:100%;
  text-align:center;
  padding:0;
  gap: 10px;
}
.l-btnArea_float button {
  display: flex
;
  align-items: center;
}
@media screen and (max-width:599px){
  .m-mainV {
    /* margin-top: 45px; */
  }
}  
@media screen and (max-width:600px){
  .baner-img{
    padding-top: 110px;
  }
  .l-btnArea_float button {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.l-btnArea_float .fl-signin, .l-btnArea_float .fl-login {
  width: 75px !important;
}
.l-btnArea_float{
  gap: 0;
}
}
@media screen and (max-width: 599px) {
  .top-contents__nav.pc {
      top: 110px !important;
  }
}
@media screen and (max-width: 420px) {
  .top-contents__nav.pc {
      top: 110px !important;
  }
}
.l-btnArea_float button{
  padding: 0.3rem 0.9rem;
  border-radius: 0rem;
  font-size:0.8rem;
  text-align:center;
  width:30%;
  font-weight: bold;
}
.l-btnArea_float img{
  width: 28px;
  margin-right: 5px;
}
@media screen and (max-width:600px){
  .l-btnArea_float img {
    width: 33px;
    margin-right: 0px;
  }
  .l-btnArea_float button{
    font-size: 10px;
  }
  .l-btnArea_float button p{
    margin-top: 2px;
  }
}
@media screen and (max-width:500px){
.l-btnArea_float button{
padding: 1.65rem 1rem;
}
}

.l-btnArea_float .fl-signin{
  background: #3281e8;
  color: #fff;
  border:none;
  text-align: center;
  padding: 5px 10px;
  height: 35px;
  justify-content: center;
  box-shadow: 0 3px 0 #132a7f;
  position: relative;
}
.l-btnArea_float .fl-signin::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  right: 13px;
  transform: rotate(-45deg);
}
.l-btnArea_float .fl-login{
  background:rgba(232, 50, 116, 1);
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  height: 35px;
  justify-content: center;
  box-shadow: 0 3px 0 #970404;
  border: none;
  position: relative;
}
.l-btnArea_float .fl-login::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  right: 13px;
  transform: rotate(-45deg);
}
.l-btnArea_float .fl-signin,.l-btnArea_float .fl-login{
  position: relative;
}


@media all and (max-width: 600px) {
  .l-btnArea_float {
    position:fixed;
    bottom:0;
    z-index:999;
    gap: 10px;
  }
  .lp .l-btnArea_float .fl-signin,.lp .l-btnArea_float .fl-login{
    width: 100px !important;
    font-size: 11px;
  }
  .monitorPoint .fl-signin{
    width: 100% !important;
  }
}
@media screen and (max-width: 550px) {
  .l-btnArea_float {
    gap: 5px;
  }
  .lp header h1 {
      padding: 0.5rem 1rem 0.5rem 0.3rem;
    }
    .lp .l-btnArea_float .fl-signin, .lp .l-btnArea_float .fl-login {
      width: 80px !important;
    }
    .l-btnArea_float .fl-signin::before {
      width: 6px;
      height: 6px;
      right: 9px;
      top: 15px;
    }
    .l-btnArea_float .fl-login::before {
      width: 6px;
      height: 6px;
      right: 9px;
      top: 15px;
    }
    .monitorPoint .l-btnArea_float .fl-signin{
      width: 100% !important;
      font-size: 13px;
    }
}
@media screen and (max-width:360px){
  .menu-toggle p{
    font-size: 8px !important;
    text-wrap: nowrap;
  }
}

@media all and (min-width: 600px) {

  .header-container{
    border-style:none;
    display:flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding:0;
  }

  header h1{
    width:20%;
    border-style:none;
  }

  header h1 img{
    width:200px;
  }

  .l-btnArea_float {
    width:40%;
    margin-left: auto;
  }

  .lp_other_container header h1 img{
    padding: 20px;
  }


}


/* main */
main{
}

/* m-mainV  */
.m-mainV {
  padding: 1rem;
  background-image: url(/assets/vw/img/pc/lp/headImg_210414.jpg);
  background-repeat: no-repeat;
  background-size: cover
}

.monitorPoint {
  background-color: rgba(255, 255, 255, 0.864);
  text-align: center;
  padding:1.5rem;
}
.monitorPoint .l-btnArea_float{
  justify-content: center;
  width: 100%;
}
.monitorPoint .l-btnArea_float button{
  background: #e83274;
  color: #fff;
  width: 100% !important;
  margin: 0 auto;
  border: none;
  font-size:14px;
  position: relative;
  box-shadow: 0 3px 0 #970404;;
}
.monitorPoint .l-btnArea_float button img{
  width: 50px;
  position: absolute;
  left: 10px;
}
.monitorPoint img{
  width:100%;
}

.subTit {
  font-size:0.9rem;
  margin: 0 auto;
  line-height:1.2;
}

.subTit span {
  color: #f6588c;
  font-weight:600;
  font-size:1rem;
}


@media all and (min-width: 600px) {
  .m-mainV {
    padding: 0;
    box-shadow:inherit;
  }
  .monitorPoint .mb10:last-child{
    margin-bottom:20px !important;
  }
  .monitorPoint {
    background-color: rgba(255, 255, 255);
    width:50%;
    padding:1.4rem 2rem;
  }

  .monitorPoint img{
    width:85%;
  }
}
@media screen and (max-width:599px){
.m-mainV {
  /* margin-top: 45px; */
}
}


.monitorPoint button{
  background: -webkit-linear-gradient(top, #fd8c8c, #f23232);
  border-bottom: 4px solid #b11f1f;
  font-size: 1.1rem;
  position: relative;
  padding: 20px 60px;
  color: #fff;
  width: 100%;
  max-width: 350px;
  border-radius: 5px;
  font-weight: 600;
  /* margin: 5px 0 15px; */
}
.monitorPoint button > span img{
  position: absolute;
  width: 150px !important;
  left: 50%;
  top: -10px;
  transform: translateX(-49%);
}
.monitorPoint .subTit:last-child{
  margin-top: 20px;
}
@media all and (max-width:600px){
  .monitorPoint button{
    margin-top: 15px;
    font-size: 20px;
    padding: 20px 30px;
  }
  .monitorPoint .subTit:last-child{
    font-size: 0.7rem;
  }
  .monitorPoint .subTit > span{
    font-size: 0.8rem;
  }
}


/* nav */
nav {

  background: -moz-linear-gradient(0, #f55e91, #f97ca6);
  background: -webkit-linear-gradient(0, #f55e91, #f97ca6);
  background: linear-gradient(0, #f55e91, #f97ca6);
}

nav ul {
  display:flex;
  list-style-type:none;
}

nav li{
  display: block;
  width:100%;
  font-size:0.6rem;
  text-align:center;
  border-right:1px solid #ffffff;
}

nav li:first-child{
  border-left:1px solid #ffffff;
}

nav li a{
  display: block;
  width:100%;
  text-decoration: none;
  padding:1rem 0.8rem;
  color:#ffffff;
  font-weight:600;
}

@media all and (min-width: 600px) {
  nav li {
    font-size:0.9rem;
  }
}
@media all and (max-width:480px){
  nav li{
    font-size: 0.8rem;
  }
}

/* intro */
.intro {
  background-color:#ffffff;
  background: url("/assets/vw/img/pc/lp/about-back.jpg");
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
}

.intro_img{
  z-index:1;
}

.intro h3 {
  font-size: 1.2rem;
  text-align:center;
  padding:1rem;
  text-shadow: 0px 0px 9px #ffffff;
  z-index:2;
  position: relative;
  color: #E83274;
}
.intro h3 img{
  width: 170px !important;
  margin-right: 10px;
  vertical-align: bottom;
}

.intro p {
  text-shadow: 0px 0px 9px #ffffff;
  padding:1rem;
  font-size: 1rem;
  color:#777777;
  line-height:1.6;
  z-index:2;
  position: relative;
}

.intro span {
  color: #f6588c;
}

@media all and (min-width: 600px) {
  .intro .pcWrapper {
    position:relative;
    height:auto;
    min-height:420px;
    padding:40px 0 20px 0;
  }

  .intro_img{
    position:absolute;
    right:0px;
    bottom:0px;
    text-align:right;
  }

  .intro_img img{
    width:80%;
  }

  .intro h3 {
    text-align:left;
    font-size:1.5rem;
  }

  .intro p {
    width:600px;
    text-shadow: 0 1px 0 #ffffff;
    padding:1rem;
    font-size: 1rem;
    color:#777777;
    margin-right: auto;
  }
  
}
@media screen and (max-width:600px){
  .intro{
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
  }
}

@media screen and (max-width:500px){
  .pcWrapper li{
  padding: 0.2rem 0rem 0.3rem !important;
  font-size: 14px !important;
  }
  .intro h3 img {
    width: 230px !important;
    text-align: center;
    display: block;
    margin: 0 auto 10px;
}
  }

.pcWrapper li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 20px 0 !important;
}
.pcWrapper li a img{
  width: 15px;
}

/* context */

.context {
  background: url(/assets/vw/img/pc/lp/context_back.gif);
  width:100%;
}

.context .context_h {
  text-align: center;
}

.context .context_h.sp {
  text-align: center;
  display:block;
}

.context .context_h.pc {
  text-align: center;
  display:none;
}

.fadein {
	opacity: 0;
	transform : translate(0, 50px);
	transition : all 1500ms;
  }
  
  .fadein.scrollin{
	opacity: 1;
	transform: translate(0, 0);
  }

@media all and (min-width: 600px) {
  .context .context_h img{
    width:80%;
  }

  .context .context_h.sp {
    text-align: center;
    display:none;
  }
  .context .context_h.pc {
    text-align: center;
    display:block;
  }
}


/* button_monitor */

.m-btnArea {
  margin:0 auto;
  text-align:center;
  padding:20px 0;
}

.m-btnArea button{
  border: 2px solid rgb(255, 77, 107);
  border-radius:26px;
  box-sizing:border-box;
  background:rgb(255, 77, 107);
  box-shadow: 4px 6px 8px -3px rgba(0,0,0,0.6);
  margin-bottom:20px;
}

.m-btnArea button p{
  font-weight:600;
  padding:0.6rem 2rem;
}

.m-btnArea button p.up{
  border-radius:26px 26px 0 0;
  color:#ffffff;
  font-size:1.1rem;
}
.up_text{
  font-size: 0.8rem;
  padding:5px 0 0 0 !important;
  color: #fff;
  margin-bottom: -5px;
}

.m-btnArea button p.bottom{
  border-radius:0 0 26px 26px;
  color:#3c3c3c;
  background:#ffffff;
  font-size:0.8rem;
}

.btnPara{
  color: #ff2323;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* animation*/
.bounce {
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.button-top{
  font-size: 16px;
  position: relative;
  padding-bottom: 6px;
  font-weight: bold;
  color: #F41444;
  text-shadow:
  1px 1px 1px #fff, -1px -1px 1px #fff,
  -1px 1px 1px #fff,  1px -1px 1px #fff,
  1px 0 1px #fff, -1px  0 1px #fff,
  0 1px 1px #fff,  0 -1px 1px #fff;
}
.button-top span{
  font-size: 20px;
  padding-left: 4px;
  margin-left: 3px;
  color: #F41444;
  background: linear-gradient(transparent 50%, #fffd93 50%);
}
.button-top img{
  width: 250px !important;
  position: absolute;
  bottom: 7px;
  left: 49.7%;
  transform: translate(-50%,0);
  z-index: 0;
}

.btn_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.bounce {
  position: relative;
  overflow: hidden;
}

.bounce::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fbfbfb;
    animation: btn_animation 3.5s ease-in-out infinite;
}

@-webkit-keyframes btn_animation {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    70% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    71% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0.9)
  }
  50% {
    -webkit-transform: scale(1.0)
  }
}
@keyframes bounce {
  0%, 100% {
    transform: scale(0.9)
  }
  50% {
    transform: scale(1.0)
  }
}


@media all and (min-width: 600px) {

  .m-btnArea button p{
    font-weight:600;
    padding:1rem 2.6rem;
  }
  
  .m-btnArea button p.up{
    border-radius:26px 26px 0 0;
    color:#ffffff;
    font-size:1.2rem;
    padding: 0 25px;
    width: 70%;
  }
  
  .m-btnArea button p.bottom{
    border-radius:0 50px 50px 0px;
    font-size:1rem;
    padding: 18px 15px;
  }

  .m-btnArea button:hover{
    border: 2px solid rgb(45, 255, 175);
    background:rgb(45, 255, 175);
  }
  
}



/* button_login */
.btnArea {
  transition: opacity 0.5s ease; /* フェード時間調整 */
}
.l-btnArea {
  padding:20px 0px 10px;
  background: url("/assets/vw/img/pc/lp/btn_backimg.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: self-start;
  gap: 20px;
  position: relative;
}
.btnArea.hidden {
  opacity: 0;
  pointer-events: none; /* 透明中はクリック不可 */
}
.l-btnArea_Tit{
  position: absolute;
  width: 250px;
  top: 40px;
}
.signin.mb20{
  margin-bottom: 0 !important;
}
.l-btnArea button > img {
width: 30px;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
.l-btnArea > div{
  width: 30%;
  min-width: 200px;
  margin: 0;
}
.l-btnArea > div > p{
  color: #fff;
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
}
.marker_subTit{
  font-size: 15px;
  font-weight: bold;
  background:linear-gradient(transparent 60%, rgba(255, 255, 102, 0.367) 60%);
  text-shadow:0px 2px 4px rgba(20, 20, 20, 0.397)0;
}
.l-btnArea .signin{
  width: 100%;
}
.l-btnArea .login{
  width: 30%;
  min-width: 200px;
  margin: 0;
  position: relative;
}
.l-btnArea button{
  display:block;
  padding:1.2rem;
  border-radius: 6px;
  font-size:1.1rem;
  width:80%;
  margin: 0 auto;
  text-align:center;
}

.signin{
  color:#F875A1;
  background:#fff;
  position: relative;
  font-weight: bold;
}
.signin_subTit{
  background: #63c8a8;
  border: 2px solid #fff;
  font-size: 14px;
  color: #fff;
  padding: 5px 15px;
  border-radius: 40px;
  white-space: nowrap;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.signin_subTit::before{
  position: absolute;
  content: "";
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #63c8a8;
  left: 50%;
  bottom: -4px;
  z-index: 2;
}

.login{
  color:#fff;
  border:2px solid #fff;
  font-weight: bold;
}



@media all and (min-width: 600px) {

  .l-btnArea {
    padding:100px 0px 40px;
  }

  .l-btnArea button{
    display:block;
    padding:1.6rem 1.1rem 1.3rem;
    border-radius: 6px;
    font-size:1.1Srem;
    width:50%;
    margin: 0 auto;
    text-align:center;
  }

  button.signin:hover{
    opacity:0.8;
    transition: 0.3s;
  }
  
  button.login:hover{
    opacity:0.8;
    transition: 0.3s;
  }

}

@media all and (max-width: 880px) {
  .l-btnArea > div , .l-btnArea .login{
    width: 40%;
  }
}

@media all and (max-width: 600px) {
  .l-btnArea{
    flex-direction: column;
    justify-content: center;
    padding: 120px 0 80px;
  }
  .l-btnArea > div , .l-btnArea .login{
    width: 90%;
    margin:0 auto;
  }
  .l-btnArea .l-btnArea_Tit {
    width: 240px;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
  }
}


/* m-monitorBriefing */

.m-monitorBriefing {
  background: url(/assets/vw/img/pc/lp/girl.jpg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: -20px 0;
  padding:2.8rem 1rem;
  position: relative;
}
.m-monitorBriefing::before{
content: "";
background-color: #65dbcb8e;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.briefingPara_posi {
  margin:0 auto;
  background-color: #fff;
  border-radius: 20px;
  padding:2rem 0.8rem;
  box-shadow: 4px 4px 0px #65DBCC;
  position: relative;
  z-index: 2;
}

.briefingPara_posi h2{
  font-size:1.2rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-align:center;
  font-weight:700;
  color: #65DBCC;
  position: relative;
}
.briefingPara_posi h2::before{
  content: "";
  width: 10px;
  height: 45px;
  display: block;
  position: absolute;
  top: -8px;
  left: 15%;
  border-top: 3px solid #65DBCC;
  border-left: 3px solid #65DBCC;
  border-bottom:3px solid #65DBCC;
}
.briefingPara_posi h2::after{
  content: "";
  width: 10px;
  height: 45px;
  display: block;
  position: absolute;
  top: -8px;
  right: 15%;
  border-top: 3px solid #65DBCC;
  border-right: 3px solid #65DBCC;
  border-bottom:3px solid #65DBCC;
}

.briefingPara_posi h2 strong {
  font-size:1.2rem;
  background: #65DBCC;
  color: #fff;
  padding: 2px 8px;
  margin-right: 5px;
}

.briefingPara_posi h2 span {
  font-size:1.2rem;
}


.briefingPara_posi p{
  font-size:1rem;
  margin:1.2rem 1rem 0rem 1rem;
  text-align:center;
  line-height:1.2;
}

.briefingPara_posi p span {
  color: #f6588c;
}
.round{
  position:relative;
  width: 100%;
}
.round::before{
  content: "";
  display: block;
  width: 8px;
  left: 10px;
  height: 8px;
  border-radius: 10px;
  background: #65DBCC;
  position: absolute;
}
.round::after{
  content: "";
  display: block;
  width: 8px;
  right: 10px;
  height: 8px;
  border-radius: 10px;
  background: #65DBCC;
  position: absolute;
}

.down_img{
width: 28px;
position: absolute;
left: 50%;
bottom: -40px;
z-index: 2;
transform: translate(-50%,0);
}

@media all and (min-width: 600px) {

  .briefingPara_posi {
    width:60%;
    text-align:left;
    margin:2rem auto;
    padding:1.8rem 1rem;
  }

  .briefingPara_posi h2{
    font-size:1.6rem;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    color: #65DBCC;
  }
  
  .briefingPara_posi h2 strong {
    font-size:1.6rem;
    background: #65DBCC;
    color: #fff;
  }

  .briefingPara_posi h2 span {
    font-size:1.6rem;
  }

  .briefingPara_posi p{
    font-size:1rem;
    margin:1.4rem 0.9rem 0rem 0.9rem;
    text-align:center;
    line-height:1.6;
  }

}

@media screen and (max-width:1025px){
  .briefingPara_posi {
    width: 70%;
  }
  .down_img {
    bottom: 40px;
  }
}
@media screen and (max-width:730px){
  .briefingPara_posi {
    width: 90%;
}
}
@media screen and (max-width:600px){
  .m-monitorBriefing {
    padding: 2.8rem 1rem 6rem;
  }
  .briefingPara_posi {
    padding: 4rem 0.8rem;
  }
  .briefingPara_posi p{
    line-height:1.6;
  }
  .briefingPara_posi h2 strong {
    font-size: 1.4rem;
  }
  .briefingPara_posi h2 {
    font-size: 1.4rem;
  }
  .briefingPara_posi h2 span {
    font-size: 1.5rem;
}
.briefingPara_posi .round:nth-child(1)::before {
  top: -40px;
}
.briefingPara_posi .round:last-child::before {
  bottom: -40px;
}
.briefingPara_posi .round:nth-child(1)::after {
  top: -40px;
}
.briefingPara_posi .round:last-child::after {
  bottom: -40px;
}
.briefingPara_posi h2::before{
  left:9%;
}
.briefingPara_posi h2::after{
  right:9%;
}
}
@media screen and (max-width:460px){
  .briefingPara_posi {
    width: 100%;
}
.briefingPara_posi h2::before{
  left:4%;
}
.briefingPara_posi h2::after {
  right: 4%;
}
.m-monitorBriefing .pcWrapper{
  width: 100%;
}
.down_img {
  bottom: 60px;
}
}

/* point */
.point{
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #fff;
}
.point_title{
  width: 90%;
  max-width: 600px;
  margin:0 auto;
}
.point_all{
  padding: 15px;
  border: 2px #e83274 solid;
  width: 90%;
  border-radius: 10px;
  margin: 0 auto 20px;
}
.point_all ul{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  align-items: center;
}
.point_all ul li{
  background-color: #ddd;
  font-size: 14px;
  padding:15px 10px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  width: 22%;
}
.point_all h3{
  font-size: 16px;
  text-align: center;
  margin-top: 15px;
}
.point_all h3 span{
  font-size: 18px;
  font-weight: bold;
  color: #e83274;
}
.point_cl1{
  background-color: #629dfe !important;
}
.point_cl2{
  background-color: #ff9221 !important;
}
.point_cl3{
  background-color: #e75959 !important;
}
.point_cl4{
  background-color: #305de7 !important;
}
.point_cl5{
  background-color: #ff8ab6 !important;
}
.point_cl6{
  background-color: #f6cf0e !important;
}
.point_cl7{
  background-color: #ae5de3 !important;
}
.point_cl8{
  background-color: #ef6969 !important;
}
.point_cl9{
  background-color: #86df51 !important;
}
.point_cl10{
  background-color: #65c717 !important;
}
.point_cl11{
  background-color: #82d3ff !important;
}
.point_cl12{
  background-color: #b2b2b2 !important;
}

.point_all p{
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  line-height: 1.5;
}
.point_all p span{
  font-size: 18px;
  font-weight: bold;
  color: #e83274;
}
.money_img{
  display: block;
  width: 90%;
  max-width: 500px;
  margin: 20px auto 10px;
}
.point_2{
  margin-top: 40px;
}
.point_2 small{
  display: block;
  font-size: 14px;
  color: #e83274;
  text-align: center;
  margin: -5px auto 0;
  width: 90%;
}
@media screen and (max-width:800px){
  .point_all ul li{
    width: 30%;
  }
  .point_all h3 {
    font-size: 14px;
  }

  .point_all h3 span {
  font-size: 16px;
  }
  .point_all p{
    font-size: 14px;
  }
  .point_all p span{
    font-size: 16px;
  }
}
@media screen and (max-width:500px){
  .point_all ul li{
    width: 45%;
  }
}

@media screen and (max-width:480px){
  .point_all {
    padding: 10px;
  }
  .point_all ul {
    gap: 6px;
  }
  .point_all ul li{
    width: 49%;
  }
  .money_img {
    display: block;
    width: 90%;
    max-width: 500px;
    margin: 15px auto 15px;
  }
  .point_2 small{
    text-align: left;
    font-size: 12px;
    line-height: 1.45;
  }
}
/* point animation*/
.point_title {
  position: relative;
  overflow: hidden;
  animation: floatUpDown 3s ease-in-out infinite;
}

/* 光の反射（既存） */
.point_title:after {
  content: "";
  height: 100%;
  width: 30px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflection 3s ease-in-out infinite;
}

/* 光のアニメーション */
@keyframes reflection {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/* .point_title を上下にゆっくり動かすアニメーション */
@keyframes floatUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


/* melit */
.melit {
  background: #e7fbf8;
  background: url("/assets/vw/img/pc/lp/melit-back.png");
  padding: 1rem;
  width:100%;
}
.melit_img{
  width: 450px;
}
.melit-opa{
  width: 450px;
  display: inline-block;
}
.melit_flex{
  display: flex;
  flex-wrap: wrap;
}
.melit_table{
  position: relative;
}
.melit-woman{
  position: absolute;
  width: 420px;
  left: 50px;
  bottom: 50px;
}

.melit .melit_ttl01 {
  margin: -30px auto 0;
  text-align: center;
}

.melit .melit_ttl02 {
  text-align: center;
}


.melit_table {
  padding:2.6rem;
}

.melit_table dl div{
  margin-bottom:1rem;
}

.melit_table dl div:last-child{
  margin-bottom:0;
}

.melit_att {
  font-size:0.8rem;
  padding:1rem;
}

/* animation */
.slide {
  animation-name: slide;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}
@keyframes slide {
  0% {
      transform: translate(0,0px);
  }

  100% {
      transform: translate(0,-15px)
  }
}


@media all and (min-width: 600px) {
  .melit_ttl01 img{
    width:55%;
  }

  .melit_ttl02 img{
    width:80%;
  }

  .melit_table dl{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .melit_table dl div{
    margin-bottom:1rem;
  }
  
  .melitafter{
    padding:0 2.6rem;
  }

  .melit_att {
    font-size:1rem;
    padding:2.6rem;
  }

}

/* flow */
.flow {
  background: linear-gradient(90deg, #fff 25%, #e0f4fd 25%, #e0f4fd 50%, #fff 50%, #fff 75%, #e0f4fd 75%, #e0f4fd);
  background-size: 50px 50px;
  background-attachment: fixed;
  padding:4rem 0.6rem 4rem 0.6rem;
  color:#444444;
}

.flow_inner {
  border: 1px solid #41c1fc;
  background: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 0 #72d3ff;
}

.flow_ttl01 {
  text-align: center;
  margin-top:-1.5rem;
}

.flow_table {
  margin:3.5rem 0 1.5rem;
  position: relative;
}
.flow_table > img {
  position: absolute;
  width: 70px;
  top: -10px;
  left: 25px;
}


.flow_table ul {
  padding:1rem;
}

.flow_table .flow_i {
  width:80%;
  margin:0 auto 1rem auto;
  text-align: center;
}

.flow_table .flow_i img{
  border: 1px solid #ccc;
}
.flow_te{
  position: relative;
}
.flow_te::before{
  content: "";
  border-bottom: 1px solid #41c1fc;
  width: 80%;
  top: 10px;
  right: 0;
  position: absolute;
}

.flow_te h3{
  font-size: 1.2rem;
  text-shadow: 2px 2px 0px #ebebeb; 
  color: #41c1fc;
  position: relative;
  background: #fff;
  display: inline-block !important;
  width: unset !important;
  padding-right: 10px;
  margin-bottom:1rem;
}

.flow_te p{
  font-size:1rem;
  line-height:1.6;
}

.flow_te div {
  font-weight: 600;
  /* border-bottom: 1px dotted #ccc; */
  font-size: 1rem;
  margin-bottom:0.2rem;
  line-height:1.5;
}

.flow_te i {
  color: #35aac9;
}

.flow_te span {
  background: #ffe899;
}



.flow_after {
  background: #41c1fc12;
  margin: 0 1rem;
  padding: 1rem;
  border-radius: 10px;
  border: 4px dotted #fff;
  margin-bottom:1rem;
}

.flow_after h3 {
  text-align: center;
  color: #35aac9;
  font-size: 1.1rem;
  font-weight: 600;
  margin:0.5rem 0 1rem 0 ;
}
.flow_after .flow_te::before{
  display: none;
}

.flow_after .flow_i {
  width:100%;
  margin:0 auto 1rem auto;
  text-align: center;
}


@media all and (min-width: 600px) {

  .flow {
    padding:100px 0;
  }

  .flow_ttl01 img{
    width:70%;
    margin-top:-1.5rem;
  }

  .flow_table {
    margin:3rem 0;
  }
  
  .flow_te h3{
    font-size: 1.6rem;
    text-shadow: 2px 2px 0px #ebebeb; 
    color: #41c1fc;
    position: relative;
    background: #fff;
    display: inline-block !important;
    width: unset !important;
    padding-right: 10px;
    margin-bottom:1rem;
  }
  
  .flow_table ul, .flow_after ul{
    display:flex;
    padding:0 70px;
    margin-bottom:20px;
  }

  .flow_table h3 {
    width:30%;
  }

  .flow_table > img {
    width:70px;
    margin-bottom:1rem;
    position: absolute;
    top: -30px;
    left: 30px;
  }
  
  .flow_table .flow_i{
    margin-right:50px;
    flex-basis: 40%;
  }

  .flow_table .flow_te{
    margin:0;
    text-align: left;
    flex-basis: 60%;
  }

  .flow_te div {
    margin-bottom:10px;
  }
  
  .flow_after {
    background: #41c1fc12;
    margin: 0 40px;
    padding: 20px;
    border-radius: 10px;
    border: 4px dotted #fff;
    margin-bottom:1rem;
  }
  
  .flow_after h3 {
    text-align: center;
    color: #35aac9;
    font-size: 1.7rem;
    margin:20px 0 25px 0 ;
  }

  .flow_after .flow_i{
    margin-right:40px;
    flex-basis: 50%;
  }

  .flow_after .flow_te {
    margin:0;
    text-align: left;
    flex-basis: 50%;
  }

}


/* m-monitorJob*/

.m-monitorJob {
  background: #fff;
  padding:1.5rem 1rem;
}

h2.sectionTit{
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.8rem;
}

.sectionTit p{
  color: #f6588c;
  font-size:1rem;
  font-weight: 500;
  margin-top:1rem;
}

ul.monitorJobList{
  width: 100%;
}

.monitorJobList li {
  margin: 0 auto;
  text-align:center;
  margin-top:2rem;
}

.monitorJobList>li h3 {
  border-radius: 20px;
  color: #fff;
  background-color: #f6588c;
  font-weight: 700;
  margin: 0 auto 20px;
  padding: 5px;
  text-align: center;
  width: 100%;
  font-size:1rem;
}

.monitorJobList li img {
  width:80%;
  margin:1rem 0;
}

.jobList_exa {
  text-align:left;
}

.jobList_exa p {
  color: #f6588c;
  font-weight: 700;
  font-size:1rem;
  line-height:1.2;
  margin-bottom:1rem;
}

.jobList_exa div {
  font-size:1rem;
  line-height:1.3;
}

.m-monitorJob .tip{
  font-size:0.8rem;
  margin:1rem 0;
}
.osusume-text{
  background: linear-gradient(transparent 70%, #ffed00 70%);
}
@media all and (min-width: 600px) {

  h2.sectionTit{
    font-size: 1.4rem;
  }
  
  .sectionTit p{
    font-size:1.5rem;
  }

  ul.monitorJobList{
    display:flex;
    flex-wrap: wrap;
  }

  .monitorJobList li {
    width: 33.3333%;
    padding:0px 10px;
    box-sizing:border-box;
  }

  .m-monitorJob .tip{
    text-align:center;
    font-size:0.9rem;
    margin:40px 0 20px 10px;
  }
}

.hamburger-menu__icon {
  display: none;
}

.top-contents__nav-items {
  display: flex;
  list-style: none;
  padding: 0;
}

.top-contens__nav--item {
  margin-right: 20px;
}

/* 画面幅が767px以下の場合のみ表示する */
@media screen and (max-width: 767px) {
  .hamburger-menu__icon {
      display: block;
      cursor: pointer;
  }

  .top-contents__nav.pc {
      display: none;
  }

  .top-contents__nav-items {
      flex-direction: column;
  }

  .top-contens__nav--item {
      margin: 10px 0;
  }
}


/* m-qa */

.m-qa {
  background-color: #f5f5f0;
  background-image: url("/assets/vw/img/pc/lp/qa_back.jpg");
  background-size: cover;
  padding:2rem 1rem 1rem 1rem;
}

.qa_list {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 6px;
  color: #35aac9;
  font-size: 1.1rem;
  line-height:1.2;
  font-weight: 700;
  padding: 1rem 2rem 1rem 1rem;
  position: relative;
  margin:1rem 0 0;
}

.qa_list:hover {
  cursor: pointer;
}

.qa_list:after, .qa_list:before {
  background-color: #223;
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0.8rem;
  width: 1rem;
  z-index: 1;
  transition: all .3s 0 ease;
}

.qa_list:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.is_active:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.is_active:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.qa_para {
  background-color: #fff;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-bottom: 1rem;
}

.qa_para div {
  padding:0.8rem 1rem;
  font-size:1rem;
  line-height:1.5;
}

.qa_para span {
  color: #f6588c;
  font-size: 18px;
  font-weight: 700;
}

.is_active {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0
}

@media all and (min-width: 600px) {
  .qa_list {
    padding: 1rem 2rem 1rem 1.5rem;
  }

  .qa_para div {
    padding:0.8rem 1.5rem;
  }
}
@media screen and (max-width:480px){
  .m-qa .pcWrapper {
    width: 100%;
  }
  .qa_list{
    font-size: 1rem;
  }
}



/* m-monitorReco */

.m-monitorReco {
  position: relative;
  background: linear-gradient(-45deg, #fff 25%, #e0f4fd 25%, #e0f4fd 50%, #fff 50%, #fff 75%, #e0f4fd 75%, #e0f4fd);
  background-size: 50px 50px;
  background-attachment: fixed;
  padding:2rem 0.8rem 6rem;
}

.recoWrap {
  background-color: #fff;
  border: 2px solid #35aac9;
  border-radius: 150px;
  padding:0.8rem;
  position: relative;
}
.recoWrap::before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 70px solid transparent;
  border-left: 0px solid transparent;
  border-top: 19px solid #fff;
  left: 20.2%;
  bottom: -17.5px;
  border-bottom: 0;
  position: absolute;
  z-index: 1;
}

.recoWrap::after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 75px solid transparent;
  border-left: 0px solid transparent;
  border-top: 20px solid #35aac9;
  left: 20%;
  bottom: -20px;
  border-bottom: 0;
  position: absolute;
}

.recoWrap li {
  display:flex;
  align-items: center;
  font-size: 1.2rem;
  line-height:1.4;
  font-weight: 700;
  margin:0;
}
.recoWrap li p{
  font-size: 14px;
}
.recoWrap li span {
  color: #35aac9;
}

.recoWrap li img {
  width:10%;
  margin-right:0.8rem;
}
img.osusume-img{
  position: absolute;
  display: block;
  width: 130px;
  bottom: -7px;
  left: 10%;
  z-index: 1;
}
@media all and (min-width: 600px) {

  .recoWrap {
    padding:40px;
  }

  .recoWrap ul {
    display:flex;
    flex-wrap: wrap;
  }

  .recoWrap li {
    width:33%;
  }

  .recoWrap li img {
    width:30px;
  }
}

@media screen and (max-width:600px){
  .recoWrap{
    border-radius: 10px;
  }
  .recoWrap li p {
    font-size:inherit;
}
.recoWrap li img {
  width: 7%;
}
img.osusume-img {
  position: absolute;
  display: block;
  width: 115px;
  bottom: -7px;
  left: 7%;
  z-index: 1;
}
}

@media screen and (max-width:480px){
  .recoWrap li img{
    width: 5%;
  }
  .recoWrap li {
    display: flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    margin: 0.4rem 0;
}
}
@media screen and (max-width:420px){
  .recoWrap::before {
    left: 31.2%;
  }
  .recoWrap::after {
    left: 30.5%;
  }
}


/* trend_graph */

.trend_graph {
  background-color: #f5f5f0;
  padding:2rem 0;
}

.trend_graph ul {
  padding: 2rem 1rem;
}

.trend_graph li{
  margin-bottom:1rem;
}

.ribbon1 {
  margin: 0 auto;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  height: 30px;
  /*リボンの高さ*/
  line-height: 30px;
  /*リボンの高さ*/
  text-align: center;
  padding: 0 30px;
  /*横の大きさ*/
  font-size: 18px;
  /*文字の大きさ*/
  background: #f6588c;
  /*塗りつぶし色*/
  color: #ffffff;
  /*文字色*/
  box-sizing: border-box;
}

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 15px 0px 15px 10px;
  border-color: transparent transparent transparent #f5f5f0;
  border-style: solid;
}

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 15px 10px 15px 0px;
  border-color: transparent #f5f5f0 transparent transparent;
  border-style: solid;
}

@media all and (min-width: 600px) {
  .trend_graph ul {
    display:flex;
    justify-content: center;
    text-align:center;
  }

  .trend_graph li{
    width:50%;
    padding:20px;
  }

  .trend_graph li img{
    width:80%;
  }
  
}

/* sns */
.sns{
  text-align: center;
}
.sns_Tit{
  font-size: 0.85rem;
  margin-bottom: 8px;
  color: #fff;
}

.sns img{
  width:10%;
}

@media all and (min-width: 600px) {
  .sns img{
    width:5%;
  }
  
}


/* footer */
.footer_gray{
  background: #191919;
  margin: 0;
  padding: 15px;
  width: 100%;
}
.top_button{
  background: #fff;
  padding: 15px;
}
.top_button a{
  position: relative;
  text-align: center;
   display: block;
  background: #e83274;
  color: #fff;
  padding: 15px 20px;
  width: 500px;
  margin: 0 auto;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 40px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 4px #d1d1d1;
  background-image: url("/assets/vw/img/pc/lp/top_button-back.png");
  background-position: left;
  background-repeat: no-repeat;
  background-size: 25%;
}
.top_button a::before{
  content: "";
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: #fff;
  right: 10px;
  top: 8px;
}
.top_button a::after{
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #e83274;
  border-right: 2px solid #e83274;
  right: 20px;
  top: 20px;
  transform: rotate(-45deg);
}
footer{
  color: #fff;
  background-color: #000;
  padding:0 0 1rem 0 !important;
  text-align:center;
  font-size:0.7rem;
  line-height:1.3;
}
@media screen and (max-width:600px){
  .top_button a{
    width: 90%;
    background-size: 28%;
  }
}

/* SP専用ポップアップボタン ヨケ用 padding*/
.footer_monitor{
  padding: 1rem 0 6rem 0;
}

footer a {
  color: #cccccc;
  text-decoration: none;
}

footer a:visit{
  color: #aaaaaa;
}

@media all and (min-width: 600px) {
  footer{
    padding: 2rem 0;
    text-align:center;
    font-size:0.9rem;
    line-height:1.2;
  }

  /* PCはポップアップボタン無しなのでヨケも無し*/
  .footer_monitor{
    padding: 2rem 0;
  }
  
}


/* button sticky */
.entryHere{
  z-index:1000;
  position: fixed;
  left: 0px;
  bottom: 4px;
  margin:0 auto;
  text-align:center;
  width:100%;
}

.entryHere button{
  display:inline-block;
  border: 2px solid #F41444;
  border-radius:26px;
  box-sizing:border-box;
  background:#F41444;
  box-shadow: 4px 6px 8px -3px rgba(0,0,0,0.6);
}
@media all and (min-width:600px){
  .entryHere button{
    width: 50%;
    border-radius: 9px;
  }
  .entryHere button p.up{
    font-size: 1.2rem !important;
    border-radius: 9px 9px 0 0;
  }
  .entryHere button p.bottom{
    font-size: 0.9rem !important;
    border-radius:0 0 9px 9px !important;
    padding: 0.7rem 2rem !important;
  } 
}
@media screen and (max-width:480px){
  .top_button a {
    width: 90%;
    background-size: 38%;
}
}

.entryHere button p{
  font-weight:600;
  padding:0.6rem 2rem;
}

.entryHere button p.up{
  border-radius:26px 26px 0 0;
  color:#ffffff;
  font-size:1.1rem;
}

.entryHere button p.bottom{
  border-radius:0 0 26px 26px;
  color:#3c3c3c;
  background:#ffffff;
  font-size:0.8rem;
}

@media all and (min-width: 600px) {
  .entryHere{
    display:block;
  }
}

.dispText {
  background: #fff;
  padding: 0px 10px 0px;
  position: relative;
}
img.btnPara_top{
  width: 70px;
  position: absolute;
  left: 5.5%;
  top: 18px;
}
@media screen and (max-width:600px){
  img.btnPara_top {
    width: 62px;
    position: absolute;
    left: 6.6%;
    top: 18px;
}
}
.dispText p:has(br){
  font-size: 16px;
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
margin: 0 auto !important;
width: 90%;
border:2px solid #ff0000;
padding: 10px;
border-radius: 5px;
box-shadow: 3px 3px 0px #ff0000;
text-align: center;
color: #ff0000;
font-weight: bold;
}
.dispText br:first-child{
  display: none;
}

@media all and (max-width:550px){
  .dispText p:has(br){
    font-size: 18px;
    padding: 15px 30px;
    width: 95%;
  }
  nav li a {
    font-size: 14px;
  }
  .monitorPoint .subTit:last-child {
    font-size: 1rem;
}
.monitorPoint .subTit > span {
  font-size: 1rem;
}
}
@media all and (max-width:450px){
  nav li a {
    font-size: 13px;
  }
  .monitorPoint .subTit:last-child {
    font-size: 0.8rem;
}
.monitorPoint .subTit > span {
  font-size: 0.9rem;
}
}

.fix-box{
  background: #303030;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 100;
  }
  .fix-box ul{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fix-box ul li a{
    color: #fff;
    font-size: 12px;
    padding:7px 15px;
    text-decoration: none;
    display: block;
    border-left: 1px solid #fff;
    width:130px;
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fix-box ul li:last-child a{
    border-right: 1px solid #fff;
  }
  
  .fix-box ul li a img{
    width: 50px;
    margin-bottom: 5px;
  }
  
  .lp .voice{
   background-color: #fff;
   background-image: url("/assets/vw/img/pc/lp/fix-back.jpg");
   padding: 0 0 50px;
  }
  .lp .voice h2{
    font-size: 20px;
    letter-spacing: 5px;
    text-align: center;
    background-color: #3A2735;
    color: #fff;
    width: 150px;
    margin: 0 auto 30px;
    padding: 20px 30px 10px;
    position: relative;
  }
  .lp .voice h2::before{
      content: "";
      clip-path: polygon(0% 0%, 100% 0%, 0% 70%);
      background-color: #3A2735;
      position: absolute;
      width: 50%;
      height: 20px;
      left: 0;
      bottom: -18px;
  }
  .lp .voice h2::after{
    content: "";
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%);
    background-color: #3A2735;
    position: absolute;
    width: 50%;
    height: 20px;
    right: 0;
    bottom: -18px;
  }
  .lp .voice h2 div{
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0 !important;
    margin-top: 3px;
  }
  .lp .voice-card{
    background-color: #fff;
    border-radius: 5px;
  }
  
  .lp .voice-top{
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 10px;
    font-weight: bold;
    padding: 10px 10px 0 10px !important;
  }
  .lp .voice-top img{
    width: 60px;
  }
  .lp .voice-center{
    background: #3A2735;
    color: #fff;
    text-align: center;
    font-size: 14px;
    margin: 10px;
    padding: 5px;
  }
  .lp .voice-bottom{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    padding: 0px 14px 14px 14px !important;
  }
  .good{
    position: relative;
  }
  .good::after{
    content: "GOOD";
    font-size: 26px;
    font-weight: bold;
    color: #f76f6f;
    position: absolute;
    right: 10px;
    opacity: 0.4;
    z-index: -1;
  }
  .bad{
    position: relative;
  }
  .bad::after{
    content: "BAD";
    font-size: 26px;
    font-weight: bold;
    color: #6f91f7;
    position: absolute;
    right: 10px;
    opacity: 0.4;
    z-index: -1;
  }
  @media screen and (max-width:700px){
    .good::after {
      opacity: 0.1;
      bottom: 0;
    }
    .bad::after{
      opacity: 0.1;
      bottom: 0;
    }
  }

  .box {
    position: relative;
    font-size: 15px;
    padding: 1rem 1rem 1rem 4rem;
    background-image: linear-gradient(-45deg, transparent 15px, #fff 10px);
    color: #212121;
    /* overflow: hidden; */
    margin-bottom: 20px;
  }
  
  .box::before {
    position: absolute;
    content: '';
    right: 0px;
    bottom: 0px;
    border-width: 0px 0px 20px 20px;
    border-style: solid;
    border-color: transparent transparent transparent #aeaeae;
  
  }
  
  .box p {
    color: #333;
    line-height: 1.5;
  }
  .line{
    border-bottom: 1px dashed #cccccc;
    display: block;
    padding: 5px;
    margin-bottom: 10px;
  }
  .qa_flex{
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .qa_font{
    font-size: 25px;
    font-family: serif;
    opacity: 0.8;
  }
  .qa_flex:has(.a) p{
    color: #5eb9ff;
    font-weight: bold;
    font-size: 16px;
  }
  .a{
    color: #5eb9ff;
  }
  .q{
    color: #ff5e5e;
  }
  
  
  .m-qa .list {
    flex-wrap: wrap;
    display: flex;
    position: relative;
  }
  .m-qa .list li {
    box-sizing: border-box;
    opacity: 1;
    height:auto;
    width: 100%;
    transition: all .4s ease 0s;
    /* overfllow:hidden; */
  }
  .m-qa .list li.is-hidden {
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0 10px;
    padding:0;
  }
  .m-qa .more {
    text-align: center;
    margin-bottom: 30px;
  }
  .m-qa button {
    background-color: #3A2735;
    border: none;
    cursor: pointer;
    outline: none;
    color:#fff;
    padding: 0;
    line-height: 40px;
    font-size: 14px;
    width: 250px;
    border-radius: 5px;
    border: 3px solid #fff;
    box-shadow: 0 0 5px #c1c1c1;
  }
  .list-item:first-child .number{
  background: #dcc13a;
  }
  .list-item:nth-child(2) .number{
    background: #acacac;
    }
    .list-item:nth-child(3) .number{
      background: #c18100;
      }
  .number{
    font-size: 20px;
    background: #3A2735;
    color: #fff;
    padding: 5px;
    border-radius: 30px;
    width: 60px;
    line-height: 40px;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translate(0,-50%);
    border: 6px solid #fff;
    text-align: center;
  }
  
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  
  .swiper-pagination {
    position: inherit !important;
    bottom: inherit !important;
    top: inherit !important;
    margin-top: 10px !important;
  }
  span.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: 0.8;
  }
  .swiper-pagination-bullet-active {
    background: #7d7d7d !important;
    opacity: 1 !important;
    padding: 3px;
  }
  .small {
    text-align: center;
    color: #fff;
    margin-top: 15px;
}
.lp .voice-comm{
  font-size: 10px !important;
}

.not-fix{
  position: inherit !important;
}

/* tiktokバナー */
.baner-img{
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 85px;
}
@media screen and (max-width:600px){

  .baner-img{
    padding-top: 55px;
  }
  header h1 {
    padding: 1rem;
    align-items: center;
    display: flex;
    border-bottom: 0;
}
.header-container{
  display: flex;
}
.l-btnArea_float {
  position: inherit;
  z-index: 0;
}
.fix-box ul li a{
  width: 100% !important;
}
header h1 img {
  width: 100%;
}
}
@media screen and (max-width:1020px){
  .melit_table{
    padding-top: 10px;
  }
  .melit-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}
  .melit_img {
    width: 400px;
}
.melit-woman {
  position: absolute;
  width: 370px;
  left: 80px;
  bottom: 50px;
}
}
@media screen and (max-width:935px){
  .melit_img {
    width: 48%;
}
.melit-opa {
  width: 47%;
}
.melit-woman {
  position: absolute;
  width: 40%;
  left: 10%;
  bottom: 10%;
}
}
@media screen and (max-width:490px){
  .pcWrapper .list li{
    padding:0 0 0 0 !important;
  }
  .lp .voice-top{
    font-size: 19px;
  }
}

@media screen and (max-width:460px){
  .melit_table{
    padding: inherit;
  }
  .pcWrapper{
    width: 90%;
    margin: 0 auto;
  }
  .page-top{
    bottom: 120px;
  }
  .fix-box ul{
    flex-wrap: wrap;
  }
  .fix-box ul li a {
    width: 100% !important;
    font-size: 9px !important;
}
.melit .pcWrapper{
  width: 100%;
}
.melit_img {
  width: 50%;
}
.melit-woman {
  position: absolute;
  width: 43%;
  left: 5%;
  bottom: 6%;
}
.page-top a {
  padding: 8px 20px 30px;
  font-size: 16px;
}
}

@media screen and (min-width:500px){
  .sp_block{
    display: none;
  }
}
@media screen and (max-width:500px){
  .pc_block{
    display: none;
  }
  img.sp_block {
    margin: 10px 0 20px;
}l;kkl
.page-top{
  bottom: 110px;
  left: -50px;
}
.page-top a{
  font-size: 14px !important;
}

.l-btnArea_float{
  position: inherit;
  gap: 10px;
}
.l-btnArea_float .fl-signin, .l-btnArea_float .fl-login {
  position: relative;
  font-size: 11px;
}
.l-btnArea_float button {
  padding: 10px;
}
header h1 img {
  width: 100px;
}
.fix-box li {
  width: 20%;
}
}
@media screen and (max-width:490px){
  .box {
    padding: 1rem 1rem 1rem 3.5rem;
  }
  .qa_flex {
    align-items: flex-start !important;
  }
}
@media screen and (max-width: 599px) {
  .top-contents__nav.pc {
      top: 110px !important;
  }
}
@media screen and (max-width: 420px) {
  .top-contents__nav.pc {
      top: 55px !important;
  }
}

  
/*このクラスが付与されると表示する*/
.page-top.active{
  opacity: 1;
  visibility: visible;
}

.fix-box{
background: #303030;
position: fixed;
width: 100%;
bottom: 0;
z-index: 100;
}
.fix-box ul{
  display: flex;
  align-items: center;
  justify-content: center;
}
.fix-box ul li a{
  color: #fff;
  font-size: 12px;
  padding:7px 15px;
  text-decoration: none;
  display: block;
  border-left: 1px solid #fff;
  width:130px;
  text-align: center;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fix-box ul li:last-child a{
  border-right: 1px solid #fff;
}

.fix-box ul li a img{
  width: 50px;
  margin-bottom: 5px;
}

.lp .voice{
 background-color: #fff;
 background-image: url("/assets/vw/img/pc/lp/fix-back.jpg");
 padding: 0 0 50px;
}
.lp .voice h2{
  font-size: 20px;
  letter-spacing: 5px;
  text-align: center;
  background-color: #3A2735;
  color: #fff;
  width: 150px;
  margin: 0 auto 30px;
  padding: 20px 30px 10px;
  position: relative;
}
.lp .voice h2::before{
    content: "";
    clip-path: polygon(0% 0%, 100% 0%, 0% 70%);
    background-color: #3A2735;
    position: absolute;
    width: 50%;
    height: 20px;
    left: 0;
    bottom: -18px;
}
.lp .voice h2::after{
  content: "";
  clip-path: polygon(0% 0%, 100% 0%, 100% 70%);
  background-color: #3A2735;
  position: absolute;
  width: 50%;
  height: 20px;
  right: 0;
  bottom: -18px;
}
.lp .voice h2 div{
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0 !important;
  margin-top: 3px;
}
.voice-card{
  background-color: #fff;
  border-radius: 5px;
}

.voice-top{
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 10px;
  font-weight: bold;
  padding: 10px 10px 0 10px !important;
}
.voice-top img{
  width: 60px;
}
.voice-center{
  background: #3A2735;
  color: #fff;
  text-align: center;
  font-size: 14px;
  margin: 10px;
  padding: 5px;
}
.voice-bottom{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  padding: 0px 14px 14px 14px !important;
}

.box {
  position: relative;
  font-size: 15px;
  padding: 1rem 1rem 1rem 4rem;
  background-image: linear-gradient(-45deg, transparent 15px, #fff 10px);
  color: #212121;
  /* overflow: hidden; */
  margin-bottom: 20px;
}

.box::before {
  position: absolute;
  content: '';
  right: 0px;
  bottom: 0px;
  border-width: 0px 0px 20px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #aeaeae;

}

.box p {
  color: #333;
  line-height: 1.5;
}
.line{
  border-bottom: 1px dashed #cccccc;
  display: block;
  padding: 5px;
  margin-bottom: 10px;
}
.qa_flex{
  display: flex;
  gap: 10px;
  align-items: center;
}
.qa_font{
  font-size: 25px;
  font-family: serif;
  opacity: 0.8;
}
.qa_flex:has(.a) p{
  color: #5eb9ff;
  font-weight: bold;
  font-size: 16px;
}
.a{
  color: #5eb9ff;
}
.q{
  color: #ff5e5e;
}


.m-qa .list {
  flex-wrap: wrap;
  display: flex;
  position: relative;
}
.m-qa .list li {
  box-sizing: border-box;
  opacity: 1;
  height:auto;
  width: 100%;
  transition: all .4s ease 0s;
  /* overfllow:hidden; */
}
.m-qa .list li.is-hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0 10px;
  padding:0;
}
.m-qa .more {
  text-align: center;
  margin-bottom: 30px;
}
.m-qa button {
  background-color: #3A2735;
  border: none;
  cursor: pointer;
  outline: none;
  color:#fff;
  padding: 0;
  line-height: 40px;
  font-size: 14px;
  width: 250px;
  border-radius: 5px;
  border: 3px solid #fff;
  box-shadow: 0 0 5px #c1c1c1;
}
.list-item:first-child .number{
background: #dcc13a;
}
.list-item:nth-child(2) .number{
background: #acacac;
}
.list-item:nth-child(3) .number{
background: #c18100;
}
.crown{
  width: 40px;
  text-align: center;
  display: block;
  margin: 10px auto -10px;
}
.first_qa{
  background: #cf9a01 !important;
  color: #fff;
  border: none;
}
.second_qa{
  background: #ababab !important;
  color: #fff;
  border: none;
}
.third_qa{
  background: #bc7d02 !important;
  color: #fff;
  border: none;
}

.lp .qa_list:after, .qa_list:before{
  background-color: #fff;
}
.lp .qa_list{
  background-color: #e83274;
  color: #fff;
  border: none;
  border-radius: 50px;
}
.lp .qa_para{
  border-radius: 30px;
}
.qa_list span{
  font-size: 18px;
  margin-right: 8px;
}
.number{
  font-size: 20px;
  background: #3A2735;
  color: #fff;
  padding: 5px;
  border-radius: 30px;
  width: 60px;
  line-height: 40px;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translate(0,-50%);
  border: 6px solid #fff;
  text-align: center;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.swiper-pagination {
  position: inherit !important;
  bottom: inherit !important;
  top: inherit !important;
  margin-top: 10px !important;
}
span.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: 0.8;
}
.swiper-pagination-bullet-active {
  background: #7d7d7d !important;
  opacity: 1 !important;
  padding: 3px;
}

/* tiktokバナー */
.baner-img{
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 490px) {
  .lp_other_container .header-container{
      display: flex;
      justify-content: center;
  }
  .lp_other{
    padding-top: 0 !important;
  }
  .m-mainV {
    margin-top: 0px;
}
main {
  padding-top: 50px;
}
.lp_main main{
  padding-top: 35px !important;
}
}

@media screen and (max-width:500px){
.lp  div.aid-badge {
    bottom: 90px !important;
    right: 20px !important;
	left:inherit !important;
}
.lp div.aid-badge__hint {
  right: 0 !important;
}
}

.page-top{
  background-color: #E83274;
  color: #fff;
  position: fixed;
  transform: rotate(90deg);
  left: -60px;
  z-index: 10000;
  border-radius: 8px 8px 0 0;
  border: 2px solid #fff;
  transition: 0.3s;
  bottom: 130px;
}
.page-top:hover{
left: -50px !important;
transition: 0.3s !important;
}

.page-top a {
  padding: 8px 20px 20px;
  color: #fff;
  display: block;
  font-size: 18px;
  text-decoration: none;
}
.page-top{
  bottom: 120px;
}
.page-top{
  bottom: 40px;
  left: -50px;
}
.page-top a{
  font-size: 14px !important;
}
.page-top{
  transition: .3s;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.page-top.active{
  opacity: 1;
  visibility: visible;
}

.lp_sub .dispText{
  display: none !important;
}


.flow_new{
  font-family:Futura, "Century Gothic","MS Gothic","Meiryo";
  padding: 2rem 0 5rem;
  background: #eefbff;
  position: relative;
}
.flow_number{
  font-size: 30px;
  margin: 0 3px;
}
.flow_new h2{
  color: #28a7e1;
  font-size: 24px;
  text-align: center;
  position:relative;
  z-index: 2;
}
.flow_step{
   font-family:Futura, "Century Gothic";
  font-style:oblique;
  font-weight: 600;
  letter-spacing: 0.1rem;
}
.flow_new h2 .flow_title_bottom{
  font-size: 34px;
}
.flow_new h2 .flow_title_bottom .flow_title_text{
  font-size: 38px;
  color: #fff !important;
  -webkit-text-stroke: 0.8px #28a7e1;/*ベンダープレフィックス*/
  text-stroke: 1px #28a7e1;/*1px赤色縁取り*/
  font-weight: 900;
  font-family: Meiryo;
}
.flow_box{
  background-color: #fff;
  padding: 15px;
  margin:-1.5rem 1.5rem 5rem;
  position: relative;
}
.flow_box::after {
  content: "";
  background-color: #fff;
  height: calc(60px / 2* tan(60deg));
  width: 100%;
  left: 50%;
  bottom: -50px;
  transform: rotate(180deg) translate(50%, 0px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: absolute;
}
.flow_box-flex{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 20px;
}
.flox_box-item{
  display: flex;
  align-items: flex-start;
  width: 85%;
  margin: 20px auto;
  position: relative;
}
.flox_box-item small{
  display: block;
  margin-top: 8px;
}
.flow_line{
  position: absolute;
  left: -6px;
  top: 55px;
}
img.flow_line{
  width: 7px !important;
}
.flox_box-item img{
  width: 120px;
  margin: 0 1rem;
}
.flow-box-text{
  font-family: Meiryo;
}
.flow_box-number{
  font-size: 45px;
  color: #28a7e1;
  font-weight: bold;
}
.flow-box-text h3{
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 8px;
  color: #28a7e1;
}
.flow-box-text h4{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.flow-box-text p{
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 8px;
  letter-spacing: 2px;
  line-height: 1.5rem;
}

.flow_end{
  text-align: center;
  background: #fff;
  font-family: Meiryo;
  width: 90%;
  margin:0 auto;
  border-radius: 500px;
  padding: 15px;
  max-width: 1000px;
}
.flow-red{
  font-size: 16px;
  font-weight: bold;
  color: red;
}
.flow_end h2{
  font-size: 26px;
  margin-top: -25px;
}
.flow_end h3{
  font-size: 16px;
  color: #28a7e1;
  margin-top: 5px;
}
.flow_end-white{
  font-size: 32px;
  color: #fff !important;
  -webkit-text-stroke: 0.8px #28a7e1;/*ベンダープレフィックス*/
  text-stroke: 1px #28a7e1;/*1px赤色縁取り*/
  font-weight: 900;
  font-family: Meiryo;
}
.flow_end p{
  font-size: 14px;
  line-height: 1.2rem;
  margin-top: 10px;
  letter-spacing: 3px;
}

@media screen and (max-width:630px){
  .flow_new h2{
    font-size: 20px;
  }
  .flow_new h2 .flow_title_bottom .flow_title_text {
    font-size: 30px;
  }
  .flow_new h2 .flow_title_bottom {
    font-size: 28px;
  }
  img.flow_line{
    width: 8px !important;
    left: -8px;
  }
  .flox_box-item{
    width: 100%;
  }
  .flow_box{
    margin: -1rem 0 5rem;
  }
}

@media screen and (max-width:500px){
  .flox_box-item img {
    width: 60px;
    position: absolute;
}
.flow-box-text h3 ,.flow-box-text h4{
  margin-left: 75px;
}
img.flow-icon {
  left: 15px;
  top: -5px;
}
.flow-box-text h3 {
  font-size: 20px;
}
.flow-box-text h4 {
  font-size: 14px;
  margin-bottom: 18px;
}
.flow-box-text p{
  font-size: 11px;
  margin: 8px 10px;
  line-height: 1.2rem;
}
.flox_box-item {
  margin: 20px auto -10px;
}
img.flow_line {
  width: 6px !important;
  left: -5px;
}
}
@media screen and (max-width:480px){
  .flow_box {
    padding: 15px 15px 30px 15px;
  }
  .flow_new{
    padding-bottom: 0;
  }
  .flow_end{
    border-radius: 0;
    width: 100%;
    padding:-15px 0 0 0;
  }
  .flow_new h2 {
    font-size: 18px;
}
.flow_end-white {
  font-size: 24px;
}
.flow-box-text p{
  font-weight: bold;
}
.flow_end p {
  font-size: 12px;
  text-align: left;
  padding: 0 15px 15px 15px;
}
.flow-red {
  font-size: 14px;
}
.flow-box-text p {
  letter-spacing: 0 !important;
}
}

.monitor-new{
  padding-top: 80px;
  background: #fff;
}
.top-text{
  position: relative;
}
.top-text img{
  width: 200px;
  position: absolute;
  top: -40px;
  right: 40%;
  transform: translate(40%,0);
}
.monitor-new h2{
  font-size: 28px;
  text-align: center;
  color: #f6588c;
}
.monitor-new h2 span{
  font-size: 34px;
}

.monitor-new .monitor-new-h2bottom{
  font-size: 18px;
  text-align: center;
  color: #f6588c;
}
.monitor-new-flex{
  padding: 25px 15px 35px;
  border-radius: 10px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 10px;
  max-width: 1200px;
  margin:0 auto;
}
.back-pink{
  margin-top: 20px;
  background-color: #ffe7ef;
}

.monitor-new-item{
  width: 48%;
  display: flex;
  align-items: flex-start;
  background-color: #fff;
}
.monitor-new-right{
  width: 100%;
  padding: 10px;
}
.monitor-new-item img{
  max-width: 170px;
  width: 100%;
}
.monitor-new-item h3{
width: 100%;
text-align: center;
padding: 5px;
color: #fff;
background-color: #e83274;
margin-bottom: 10px;
font-size: 14px;
}
.monitor-new-right p{
  font-size: 11px;
  line-height: 16px;
  margin-top: 8px;
}
.monitor-sanka{
  margin-bottom: 13px;
}
.monitor-sanka,.monitor-sharei{
  font-size: 12px;
  color: #e83274;
  font-weight: bold;
}
.monitor-sanka-title,.monitor-sharei-title{
  border:1px solid #e83274;
  padding:2px 10px;
  border-radius: 50px;
  margin-right: 5px;
  font-weight: bold;
  white-space: nowrap;
}
@media screen and (max-width:900px){
  .monitor-new-item{
    width: 100%;
    position: relative;
  }
  .monitor-new-item img{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.3;
  }
  .monitor-sanka {
    margin-bottom: 14px;
}
.monitor-new-right p {
  font-size: 12px;
  line-height: 20px;
}
.monitor-new-right{
  position: relative;
  z-index: 4;
}
.text-about{
  text-shadow: 2px 3px 15px rgba(255, 255, 255, 0.4), 2px 3px 15px rgba(255, 255, 255, 0.4), 2px 3px 15px rgba(255, 255, 255, 0.4), 2px 3px 15px rgba(255, 255, 255, 0.4), 2px 3px 15px rgba(255, 255, 255, 0.4), 2px 3px 15px rgba(255, 255, 255, 0.4);
}
.monitor-new-item h3{
  font-size: 16px;
}
}
@media screen and (max-width:700px){
  .monitor-new h2 {
    font-size: 20px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .monitor-new h2 span {
    font-size: 24px;
  }
  .monitor-new .monitor-new-h2bottom {
    font-size: 16px;
    margin-top: 8px;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media screen and (max-width:450px){
  .top-text img {
    right: 30%;
  }
}
@media screen and (max-width:330px){
  .flow_new h2 .flow_title_bottom {
    font-size: 25px;
}
.flow_new h2 .flow_title_bottom .flow_title_text {
  font-size: 28px;
}
}

.fade-in, .fade-in-text span {
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.fade-in {
  transform: translateY(20px); /* 下から上に動くための初期位置 */
}

.visible {
  opacity: 1;
  transform: translateY(0); /* 上に移動して位置を元に戻す */
}

.isVisible {
  /* 既に表示された要素に対して再度フェードインをさせないためのクラス */
}
.monitor-ot-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding:20px 30px 40px;
  gap: 30px;
}
.monitor-line{
  width: 12px;
  display:block;
  margin: 0 auto;
}
.monitor-ot-new{
  background: url("/assets/vw/img/pc/lp/monitor-back.jpg"),#f6588c;
  position: relative;
}

.monitor-ot-new .top-text{
  color: #fff;
  text-align: center;
  padding-top: 25px;
  margin-bottom: 20px;
}

.monitor-ot-new h2{
  font-size: 24px;
  margin-bottom: 10px;
}

.monitor-new-h2bottom{
  font-size: 14px;
}

.monitor-ot-new::before{
  content: "";
  background: #f6588c;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.motnior-ot-number{
  font-weight: bold;
  font-size: 35px;
  position: absolute;
  left: 30px;
  top: 10px;
}
.motnior-ot-number::before{
  content: "WORK";
  font-size: 12px;
  position: absolute;
  top: -10px;
}
.monitor-ot-item{
  text-align: center;
  color: #fff;
  width: 30%;
  position: relative;
}
.monitor-ot-item img{
  width: 100px;
}
.monitor-ot-item h3{
  font-size: 16px;
  margin: 5px auto;
}
.monitor-ot-item .monitor-center{
  margin: 3px auto 10px;
  text-align: left;
  display: inline-block;
  font-size: 13px;
}
.monitor-ot-item .monitor-center div{
  font-weight: bold;
}
.monitor-ot-item .monitor-center div:last-child {
  margin-top: 8px !important;
}
.monitor-ot-item .monitor-center div span{
background: #fff;
color: #f6588c;
border-radius: 40px;
padding: 2px 10px;
margin-right: 10px;
font-size: 11px;
font-weight: bold;
}
.monitor-ot-item p{
  font-size: 11px;
  text-align: left;
  display: inline-block;
  margin: 0 auto;
  line-height: 1.1rem;
  width: 80%;
}
@media screen and (max-width:870px){
  .motnior-ot-number {
    font-size: 30px;
    left: 15px;
    top: 10px;
}
.monitor-ot-item p{
  width: 100%;
}
.monitor-ot-item .monitor-center div {
  font-size: 12px;
}
.monitor-ot-item img {
  width: 90px;
  margin-bottom: 10px;
}
}
@media screen and (max-width:675px){
  .monitor-ot-item {
    width: 44%;
  }
}
@media screen and (max-width:455px){
  .monitor-ot-new .top-text {
    margin-bottom: 15px;
  }
  .monitor-ot-new h2 {
    font-size: 20px;
    margin-bottom: 5px;
  }
  .monitor-new-h2bottom {
    font-size: 13px;
    margin: 0 20px 0;
}
.monitor-line {
  width: 9px;
}
  .monitor-ot-item .monitor-center div{
    text-align: center;
    font-size: 14px;
  }
  .monitor-ot-item .monitor-center div span {
    display: block;
    text-align: center;
    margin-right: 0;
    margin-bottom: 5px;
  }
  .motnior-ot-number {
  left: 0;
  }
}
@media screen and (max-width:405px){
  .monitor-ot-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 10px 40px;
    gap: 20px;
}
.monitor-ot-item {
  width: 45%;
}
.motnior-ot-number {
  font-size: 25px;
}
.motnior-ot-number::before {
  top: -10px;
  left: -4px;
}
}

.none-content {
  display: none; /* none-content クラスが付いている要素は非表示 */
}

.one-content, .two-content {
  transition: opacity 0.5s ease-in-out; /* スムーズな切り替えのためのトランジション */
}

/* ドロワーメニュー */
.menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}
.hamburger {
  width: 30px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: #e83274!important;
  transition: transform 0.3s, opacity 0.3s;
}
.menu-toggle p {
  font-size: 8px;
  margin-top: 8px;
  color: #e83274;
  font-weight: bold;
}
.drawer-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  color: #fff;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.drawer-menu ul {
  list-style: none;
  padding: 20px;
  margin: 0;
  flex-direction: column;
}
.drawer-menu li {
  align-items: center;
  border-right: none;
  border-left: none !important;
  border-bottom: 1px solid #fff;
}
.drawer-menu li img{
  width: 34px;
  margin: 0;
}
.drawer-menu a {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
.drawer-menu.open {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.drawer-menu.open::before {
  content: "×";
  position: absolute;
  right: -35px;
  background-color: #f6588c;
  font-size: 30px;
  padding: 0 9px;
  pointer-events: none;
  height: 40px;
}
/* 背景オーバーレイのスタイル */
.drawer-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1;
}
/* メニューが開いた時に背景を表示 */
.drawer-menu.open ~ .drawer-back {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width:600px){
  .menu-toggle {
    width: 110px;
    max-width: 70px;
    margin: 0;
    border-radius: 0;
    padding-bottom:0 ;
    justify-content: center;
  }
  .menu-toggle p{
    font-size: 10px;
    margin-top: 6px;
  }
}