@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=M+PLUS+Rounded+1c&display=swap');

/*新しいボタンデザイン*/

.sign-link span{position: relative;font-size: 10px;display: inline-block;background: #FF7CB4;}
.sign-link span::before{content: '';position: absolute;background: #fff;height: 1px;width: 70%;margin-left: -40px;top: 50%;transform: translateX(-50%)translateY(-50%);}
.sign-link span::after{content: '';position: absolute;background: #fff;height: 1px;width: 70%;margin-left: 40px;top: 50%;transform: translateX(-50%)translateY(-50%);}
.sign-link:hover{opacity: 0.8;color: #fff;}
.sign-link{position: relative;width: 350px;max-width: 85%;background: #FF7CB4;color: #fff;padding: 1.5rem 0rem;font-size: 16px;border-radius: 60px;display: block;margin: 0 auto;text-align: center;margin-top: 20px;line-height: 1.2;font-weight: 700;box-shadow: 0px 0px 6px #f5c8db;}
.sign-link::before{content: '';position: absolute;background-size: contain;;width: 13px;height: 13px;background-image: url(https://vi-vo.link/lady/assets/images/right-icon-white.svg);left: 90%;top: 50%;transform: translateX(-50%)translateY(-50%);background-repeat: no-repeat;}
.sign-link::after{content: '登録\A無料';color: #FF7CB4;position: absolute;width: 50px;height: 50px;background: #FFF;border: solid 1px #FF7CB4;border-radius: 50%;font-size: 13px;display: flex;align-items: center;justify-content: center;white-space: pre;top: 50%;left: 10px;transform: translateX(-50%) translateY(-50%);}
.top-list a:hover{opacity: 0.8;color: #302E2E;}
.top-list ul,.top-list li {line-height: 1.5;padding: 0.5em 0;list-style-type: none!important;width: 85%;margin: 0 auto;}
.top-list li{position: relative;font-size: 13px;border-bottom: solid 1px #eee;}
.top-list li::before{content: '';position: absolute;width: 13px;height: 13px;background-size: contain;background-image: url(https://vi-vo.link/lady/assets/images/right-icon.svg);left: 95%;top: 50%;transform: translateX(-50%) translateY(-50%);background-repeat: no-repeat;}
.top-list-p {font-size: 20px;padding: 2rem;display: block;line-height: 1.6;width: 90%;margin: 0 auto;}
.top-list-p::before {content: attr(data-en);display: block;color: #FF7CB4;font-size: 16px;}
.top-list-p::after {content: '';display: block;height: 1px;background-color: #FF7CB4;margin-top: 5px;}
.vivo-front-h1{font-family: "M PLUS Rounded 1c", sans-serif;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), 
url('https://vi-vo.link/lady/assets/images/top-item03.webp') no-repeat center center;
background-size: cover;
background-color: #302E2E;

color: #ffffff; font-size: 16px;text-align: center;font-weight: 700;padding: 2rem;line-height: 1.5; margin: 2rem 0rem;}
.pr-banner{display: block;margin: 0 auto;margin: 3rem 1rem;position: relative;}
.pr-banner::before{content: 'PR';position: absolute;color: #302E2E;top: 0;left: 95%;transform: translateX(-50%)translateY(-50%);background: #ddd;border-radius: 50%;padding: 1rem;z-index: 3;opacity: 0.8;font-weight: 600;}
.yellow_line {background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fff200 0%) repeat scroll 0 0;font-weight: 500;text-shadow: 0px 0px 10px #fff;font-weight: 700;}

.cont-box{margin: 4rem 2rem;}
.cont-box h2 {position: relative;font-size: 20px;line-height: 2;font-weight: 700;}
.cont-box h2::before {content: attr(data-number);display: block;color: #FF7CB4;font-size: 16px;font-weight: 400;}
.cont-box h2::after {content: '';position: absolute;top: 0;left: 0;width: 100px;height: 1px;background-color: #FF7CB4;}
.cont-box p{font-size: 13px;line-height: 2;}
.cont-box2{margin: 4rem 2rem;}
.cont-box2 h2 {position: relative;font-size: 20px;line-height: 2;font-weight: 700;}
.cont-box2 h2::before {content: attr(data-number);display: block;color: #fff200;font-size: 16px;font-weight: 400;}
.cont-box2 h2::after {content: '';position: absolute;top: 0;left: 0;width: 100px;height: 1px;background-color: #fff200;}
.cont-box2 p{font-size: 13px;line-height: 2;}
.accent{position: relative;}
.accent-warp{
content: '';position: absolute;margin: auto;overflow: hidden;top: 95%;left: 40%;width: 233px;height: 222px;
background: linear-gradient(to bottom, rgba(255,202,225,0.6), rgba(255,202,225,0.6));
border-radius: 50%/65% 65% 45% 45%;transform: rotate(30deg) translateX(-50%)translateY(-50%);z-index: -1;opacity: 0.4;}
.accent2{position: relative;}
.accent2-warp{
content: '';position: absolute;margin: auto;overflow: hidden;top: 80%;left: 50%;width: 233px;height: 222px;
background: linear-gradient(to bottom, rgba(255,249,143,0.6), rgba(255,249,143,0.6));
border-radius: 50%/65% 65% 35% 35%;
transform: translateX(-50%)translateY(-50%);z-index: -1;opacity: 0.4;}

.cont-box table{margin: 0 auto;border-collapse: collapse;font-size: 13px;text-align: center;width: 100%;}
.cont-box th{background: #FFD8E9;color: #302E2E;}
.cont-box td{font-size: 10px;padding: 0.5rem 0rem;}

.btn{display: flex;justify-content: flex-end;margin: 2.5rem 2rem;}    
.btn a {display: flex;justify-content: center;align-items: center;position: relative;padding: 1rem;color: #FF7CB4;font-size: 10px;font-weight: 700;text-decoration: none;transition: 0.3s;width: 55%;    }
.btn a:hover {color: #f2f2f2;}
.btn-Inner a {border: 1px solid #FF7CB4;border-radius: 35px;}
.btn-Inner a:hover {background-color: #FF7CB4;border: 1px solid #FF7CB4;}
.btn-Inner a::before {content: '';position: absolute;top: calc(50% - 5px);right: -20px;transform: rotate(30deg);width: 12px;height: 1px;background-color: #FF7CB4;}
.btn-Inner a::after {content: '';position: absolute;top: 50%;right: -20px;transform: translateY(-50%);width: 40px;height: 1px;background-color: #FF7CB4;}

.flex-box{display: flex;justify-content: center;margin-top: 30px;}
.flex-box div{width: 50%;margin: 5px;font-size: 13px;line-height: 1.5;}
.h3_head {font-size: 14px;font-weight: 700;line-height: 1.8;text-align: center;}
.h3_head::before {content: attr(data-en);display: block;color: #FF7CB4;font-size: 10px;line-height: 1;}
.h3_head::after {content: '';display: block;width: 40px;height: 1px;background-color: #FF7CB4;margin: 0 auto;}
.flex-box div{border: solid 1px #FFD8E9;padding: 5px 10px;border-radius: 5px}
.mail-ic,.chat-ic,.post-ic,.mission-ic{position: relative;}
.mail-ic::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-mail-ic.svg);width: 25px;height: 25px;background-size: contain;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);z-index: 2;background-repeat: no-repeat;}
.mail-ic::after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);background: #fff;width: 30px;height: 30px;z-index: 1;}
.chat-ic::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-chat-ic.svg);width: 25px;height: 25px;background-size: contain;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);z-index: 2;background-repeat: no-repeat;}
.chat-ic::after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);background: #fff;width: 30px;height: 30px;z-index: 1;}
.post-ic::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-post-ic.svg);width: 25px;height: 25px;background-size: contain;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);z-index: 2;background-repeat: no-repeat;}
.post-ic::after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);background: #fff;width: 30px;height: 30px;z-index: 1;}
.mission-ic::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-mission-ic.svg);width: 25px;height: 25px;background-size: contain;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);z-index: 2;background-repeat: no-repeat;}
.mission-ic::after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);background: #fff;width: 30px;height: 30px;z-index: 1;}
.chak-point{position: relative;width: 60%;z-index: 2;margin-top: 30px;margin-left: 15px;}
.chak-point::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-item03-2.webp);background-size: contain;width: 100%;height: 100%;background-repeat: no-repeat;left: 90%;top: 0;z-index: -1;}

.flex-merit,.flex-demerit{display: flex;flex-wrap: wrap;justify-content: center;}
.flex-merit div,.flex-demerit div{width: calc(95%/2);margin: 3px;}
.flex-merit h4,.flex-demerit h4 {position: relative;font-size: 13px;font-weight: 700;}
.flex-merit h4::before {content: attr(data-number);display: inline-block;margin-right: 5px;font-size: 13px;color: #FF7CB4;border-bottom: 1px solid #FF7CB4;}
.flex-demerit h4::before{content: attr(data-number);display: inline-block;margin-right: 5px;font-size: 13px;color: #fff42a;border-bottom: 1px solid #fff42a;}
.merit-h3 {position: relative;padding-top: 50px;padding-bottom: 30px;font-size: 20px;text-align: center;font-weight: 700;}
.merit-h3::before {content: attr(data-en);position: absolute;top: 10px;left: 50%;transform: translateX(-50%);color: rgba(255,124,180);font-size: 30px;font-style: italic;font-weight: 400;}
.merit-h3::after {content: '';position: absolute;bottom: 0;left: 50%;transform: translate(-50%) rotate(30deg);width: 1px;height: 20px;background-color: rgba(255,124,180,1);}
.demerit-h3 {position: relative;padding-top: 50px;padding-bottom: 30px;font-size: 20px;text-align: center;font-weight: 700;margin-top: 40px;}
.demerit-h3::before {content: attr(data-en);position: absolute;top: 10px;left: 50%;transform: translateX(-50%);color: rgba(255,244,42,0.8);font-size: 30px;font-style: italic;font-weight: 400;}
.demerit-h3::after {content: '';position: absolute;bottom: 0;left: 50%;transform: translate(-50%) rotate(30deg);width: 1px;height: 20px;background-color: rgba(255,244,42,1);}
.flex-merit div{background: rgba(255, 124, 180, 0.1);padding:5px 15px;}
.flex-demerit div{background: rgba(255, 244, 42, 0.1);padding:5px 15px;}

.rank-top{margin: 0 auto;text-align: center;}
.rank-top h3{position: relative;font-size: 30px;margin-bottom: 15px;margin-top: 80px;}
.rank-top h3 span{display: block;font-size: 13px;}
.rank-top h3::before{
content: '';background-image: url(https://vi-vo.link/lady/assets/images/top-rank-ic.svg);
position: absolute;width: 60px;height: 60px;background-repeat: no-repeat;left: 50%;top: -20px;transform: translateX(-50%)translateY(-50%);}
.rank-top p span:nth-of-type(1){background: linear-gradient(to bottom, #E4BE44, #bb9a2f);}
.rank-top p span:nth-of-type(2){background: linear-gradient(to bottom, #A09A91, #857e75);}
.rank-top p span:nth-of-type(3){background: linear-gradient(to bottom, #967B48, rgb(112, 105, 95));}
.rank-top p span{font-size: 20px;line-height: 1;width: calc(90%/3);display: inline-block;padding: 30px 0px;color: #fff;border-radius: 5px;}
.rank-top p span small{font-size: 13px}
.rank-flex{display: flex;align-items: center;justify-content: center;}
.rank-flex div{width: calc(100%/3);text-align: center;margin: 10px;}
.rank-mail,.rank-video,.rank-stream{position: relative;display: inline-block;margin-top: 20px;}
.rank-mail::before{content: '';position: absolute;
background-image: url(https://vi-vo.link/lady/assets/images/top-mail-ic.svg);
width: 20px;height: 20px;background-size: contain;background-repeat: no-repeat;left:50%;top: 0;transform: translateX(-50%) translateY(-50%);}
.rank-video::before{content: '';position: absolute;
background-image: url(https://vi-vo.link/lady/assets/images/top-chat-ic.svg);
width: 20px;height: 20px;background-size: contain;background-repeat: no-repeat;left:50%;top: 0;transform: translateX(-50%) translateY(-50%);}
.rank-stream::before{content: '';position: absolute;
background-image: url(https://vi-vo.link/lady/assets/images/top-post-ic.svg);
width: 20px;height: 20px;background-size: contain;background-repeat: no-repeat;left:50%;top: 0;transform: translateX(-50%) translateY(-50%);}
.rank-mail h3,.rank-video h3,.rank-stream h3{font-size: 15px;margin-bottom: 10px;border-bottom: solid 1px #967B48;padding-bottom: 5px;}
.rank-mail p,.rank-video p,.rank-stream p{margin: 0;}
.rank-p{position: relative;;width: 60%;}
.rank-h4 {position: relative;padding: 2rem 1rem;color: #fff;border-radius: 10px;background: #302E2E;text-align: center;margin: 2rem 3rem;}
.rank-h4:after {position: absolute;bottom: -9px;left: 50%;width: 0;height: 0;content: '';border-width: 10px 10px 0 10px;border-style: solid;border-color: #302E2E transparent transparent transparent;}

.flow-flex{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;margin-top: 30px;margin-bottom: 60px;}
.flow-flex div{width: calc(100%/2);padding:0rem 1rem;}
.flow-flex div h3{position: relative;padding-top: 30px;font-size: 20px;padding-bottom: 0.5rem;}
.flow-flex div h3 span {position: relative;z-index: 2;}
.flow-flex div h3::before {content: attr(data-en);position: absolute;top: 0px;left: 0;color: rgba(255,86,157);font-size: 16px;text-transform: uppercase;z-index: 1;}
.flow-flex div p{line-height: 1.5;padding:0rem 0.5rem;}

.flow-flex div h3::after{
position: absolute;bottom: -10px;left: 0;width: 100%;height: 5px;content: '';background-image: -webkit-repeating-linear-gradient(135deg, #302E2E, #302E2E 1px, transparent 2px, transparent 5px);background-image: repeating-linear-gradient(-45deg, #FF569D, #FF569D 1px, transparent 2px, transparent 5px);background-size: 7px 7px;-webkit-backface-visibility: hidden;backface-visibility: hidden;
}

.exp-flex{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 10px;max-width: 480px;margin: 0 auto;}
.exp-flex span{display: inline-block;padding: 0.3rem 0rem 0.5rem 1rem;border-bottom: solid 1px #eee;font-size: 14px;}
.exp-flex div{width: calc(100%/2);}
.exp-bg-img{position: relative;}
.exp-bg-img::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-item07-1.webp);background-size: cover;width: 100%;height: 100%;top: 10px;left: 10px;opacity: 0.3;background-repeat: no-repeat;z-index: -1}
.exp-bg-img2{position: relative;}
.exp-bg-img2::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-item07-2.webp);background-size: cover;width: 100%;height: 100%;top: 10px;left: -10px;opacity: 0.3;background-repeat: no-repeat;z-index: -1}
.exp-bg-img3{position: relative;}
.exp-bg-img3::before{content: '';position: absolute;background-image: url(https://vi-vo.link/lady/assets/images/top-item07-3.webp);background-size: cover;width: 100%;height: 100%;top: 10px;left: 10px;opacity: 0.3;background-repeat: no-repeat;z-index: -1;}
.hr-text {line-height: 1em;position: relative;outline: 0;border: 0;color: black;text-align: center;height: 1.5em;opacity: .5;}
.hr-text:before {content: '';background: -webkit-linear-gradient(left, transparent, #818078, transparent);background: linear-gradient(to right, transparent, #818078, transparent);position: absolute;left: 0;top: 50%;width: 100%;height: 1px;}
.hr-text:after {content: attr(data-content);position: relative;display: inline-block;color: black;padding: 0 .5em;line-height: 1.5em;color: #818078;background-color: #fcfcfa;}
.exp-flex-ac{position: relative;}
.exp-flex-ac::before{content: '';display: flex;justify-content: center;align-items: center;color: #fff;position: absolute;width: 40px;height: 40px;background: #ffc8cd;top:-20px;left: -5px;z-index: -1;}
.exp-flex-ac2{position: relative;padding-left: 10%;justify-content: center;}
.exp-flex-ac2::before{content: '';display: flex;justify-content: center;align-items: center;color: #fff;position: absolute;width: 40px;height: 40px;background: #DAFAEE;top:-20px;left: 25%;transform: translateX(-50%);z-index: -1;}
.exp-flex-ac3{position: relative;}
.exp-flex-ac3::before{content: '';display: flex;justify-content: center;align-items: center;color: #fff;position: absolute;width: 40px;height: 40px;background: #D6E8FB;top:-20px;left: -5px;z-index: -1;}
.exp-h4 {position: relative;padding:1rem 1rem;margin-top: 0;}
.exp-h4:after {position: absolute;bottom: 0;left: 0;width: 100%;height: 5px;content: '';background-image: -webkit-repeating-linear-gradient(135deg, #302E2E, #302E2E 1px, transparent 2px, transparent 5px);background-image: repeating-linear-gradient(-45deg, #302E2E, #302E2E 1px, transparent 2px, transparent 5px);background-size: 7px 7px;-webkit-backface-visibility: hidden;backface-visibility: hidden;}

.pop h3 {position: relative;padding: 1rem .5rem;}
.pop h3:after {position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;content: '';border-radius: 3px;background-image: linear-gradient(to right, #FF7CB4 0%,#FF7CB4 50%,#eee 50%, #eee 100%);}
.pop-flex{display: flex;align-items: center;justify-content: center;}
.pop-flex div:nth-of-type(1){width: 30%;padding: 1rem;}
.pop-flex div:nth-of-type(1) img{border-radius: 50%;}
.pop-flex div:nth-of-type(2){width: 70%;padding: 1rem;}
.pop-flex div:nth-of-type(2) p{position: relative;padding: 1.5rem 2rem;color: #fff;border-radius: 10px;background: #FF7CB4;line-height: 1.5;}
.pop-flex div:nth-of-type(2) p:after {position: absolute;left:  -15px;width: 0;height: 0;content: '';border-width: 20px 0px 0px 20px;border-style: solid;border-color: #FF7CB4 transparent transparent transparent;}

.pop-flex-r{display: flex;align-items: center;justify-content: center;}
.pop-flex-r div:nth-of-type(1){width: 70%;padding: 1rem;}
.pop-flex-r div:nth-of-type(2) img{border-radius: 50%;}
.pop-flex-r div:nth-of-type(2){width: 30%;padding: 1rem;}
.pop-flex-r div:nth-of-type(1) p{position: relative;padding: 1.5rem 2rem;color: #fff;border-radius: 10px;background: #302E2E;line-height: 1.5;}
.pop-flex-r div:nth-of-type(1) p:after {position: absolute;right:-15px;width: 0;height: 0;content: '';border-width: 20px 20px 0px 0px;border-style: solid;border-color: #302E2E transparent transparent transparent;}

.qa dt {margin-bottom: 1em;color: #302E2E;font-weight: 600;}
.qa dt::before,
.qa dd::before {margin-right: .4em;}
.qa dt::before {content: "Q.";}
.qa dd {margin: 0 0 2.5em;padding: 1em 1.5em;background-color: #eee;color: #302E2E;}
.qa dd::before {content: "A.";}


.fade-body{animation: fade-body 0.5s ease-in-out;}@keyframes fade-body {0% {opacity: 0;}100% {opacity: 1;}}
.fadein { transition: all .6s ease-in-out } .fadein.toup { transform: translateY(10px); opacity: 0 }
.fadein.tor { transform: translateX(10px); opacity: 0 }
.fadein.tol { transform: translateX(-10px); opacity: 0 }
.fadein.show { transform: translate(0); opacity: 1 }