/********************************************************************************
 page.css
********************************************************************************/

/*============================================================
 トップページ
*============================================================*/
/* fadeIn
---------------------------------------- */
.fadeIn:before,
.fadeIn:after {
	transition: .6s;
	transition-timing-function : ease-out;
	transform: translatey(120px);
	opacity: 0;
}
.fadeIn.active:before,
.fadeIn.active:after {
	transform: translatey(0);
	opacity: 1;
}
.fadeIn.active:before {
	transition-delay: .3s;
}

/* mv
---------------------------------------- */
.mv {
	position: relative;
	margin-bottom: 240px;
}
.mv:before {
	display: block;
	content: "";
	position: absolute;
	background: url(../images/mv/bg_img.png) no-repeat center center / contain;
	width: 1072px;
	height: 1008px;
	top: -82px;
	left: calc(50% - 212px);
}
.mv:after {
	display: block;
	content: "";
	position: absolute;
	background: url(../images/mv/scroll.png) no-repeat center center / contain;
	width: 28px;
	height: 94px;
	bottom: -140px;
	left: 50%;
	transform: translatex(-50%);
}
.mv__inner {
	position: relative;
	padding-top: 68px;
	max-width: 1140px;
}
.mv__inner:before,
.mv__inner:after {
	position: absolute;
	content: "";
	display: block;
}
.mv__inner:before {
	background: url(../images/mv/bg_circle1.png) no-repeat center center / contain;
	width: 435px;
	height: 435px;
	left: -264px;
	top: -144px;
}
.mv__inner:after {
	background: url(../images/mv/bg_circle2.png) no-repeat center center / contain;
	width: 1020px;	
	height: 275px;
	left: -122px;
	bottom: -130px;
	z-index: -1;
}

.mv__leading {
	width: 384px;
	margin-bottom: 20px;
}
.mv__logo {
	width: 358px;
	margin-bottom: 26px;
}
.mv__serviceDesc {
	width: 320px;
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 32px;
	text-align: center;
	line-height: 1.3;
	font-family: 'Roboto', sans-serif;
}
.mv__text {
	font-size: 1.4rem;
	font-weight: 500;
	margin-bottom: 36px;
}


/* message
---------------------------------------- */
.message {
	margin-bottom: 96px;
	position: relative;
}
.message:before,
.message:after {
	position: absolute;
	content: "";
	display: block;
	z-index: -1;
}
.message:before {
	background: url(../images/message/bg_deco1.png) no-repeat center center / contain;
	width: 836px;
	height: 800px;
	top: -100px;
	right: calc(50% + 150px);
}
.message:after {
	background: url(../images/message/bg_deco2.png) no-repeat center center / contain;
	width: 144px;
	height: 316px;
	top: 0;
	left: calc(50% + 455px);
}

.message__block {
	max-width: 754px;
	margin: 0 0 0 auto;
	text-align: center;
}
.message__title {
	font-weight: 700;
	font-size: 4rem;
	line-height: 1.2;
	font-family: 'Roboto', sans-serif;
	margin-bottom: 32px;
}
.message__title span {
	font-size: 5rem;
	color: #C975EB;
}
.message__text {
	line-height: 2.2;
	font-weight: 700;
	font-size: 1.8rem;
}

/* point
---------------------------------------- */
.point {
	margin-bottom: 300px;
	position: relative;
	z-index: 1;
}
.point:before,
.point:after {
	position: absolute;
	content: "";
	display: block;
	z-index: -1;
	transition-delay: .8s;
}
.point:before {
	background: url(../images/point/bg_deco1.png) no-repeat center center / contain;
	width: 270px;
	height: 330px;
	bottom: 0;
	right: calc(50% + 370px);
}
.point:after {
	background: url(../images/point/bg_deco2.png) no-repeat center center / contain;
	width: 760px;
	height: 752px;
	bottom: -240px;
	left: calc(50% + 90px);
}
.point__inner {
	padding: 0;
	position: relative;
	z-index: 2;
}
.pointList {
	justify-content: center;
	margin-bottom: 32px;
}
.pointItem {
	padding-top: 50px;
	width: 338px;
	height: 338px;
	position: relative;
	border-radius: 50%;
	background: #fff;
	margin: 16px 20px;
}
.pointItem:before {
	position: absolute;
	content: "";
	display: block;
	border-radius: 50%;
	background: linear-gradient(180deg, #2F59CA 0%, #CB75EB 100%);
	width: 103%;
	height:103%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.pointItem__img {
	text-align: center;
	margin-bottom: 6px;
}
.pointItem__title {
	text-align: center;
	font-size: 2.6rem;
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 14px;
}
.pointItem__text {
	width: 240px;
	margin: 0 auto;
}
.point__note {
	text-align: center;
	margin-bottom: 24px;
}
.point__btn {
	margin: 0 auto;
}

/* influencer
---------------------------------------- */
.influencer {
	height: 660px;
	margin-bottom: 188px;
	position: relative;
}
.influencer:before,
.influencer:after {
	position: absolute;
	content: "";
	display: block;
	z-index: -1;
}
.influencer:before {
	background: url(../images/influencer/bg_deco1.png) no-repeat center center / contain;
	width: 340px;
	height: 320px;
	bottom: 0;
	right: calc(50% + 300px);
}
.influencer:after {
	background: url(../images/influencer/bg_deco2.png) no-repeat center center / contain;
	width: 703px;
	height: 518px;
	top: -260px;
	left: calc(50% + 210px);
}
.influencer__title {
	position: relative;
	color: #fff;
	font-size: 6rem;
	font-weight: 400;
	line-height: 1;
	width: 264px;
	text-align: center;
}
.influencer__title span {
	font-size: 1.6rem;
	display: block;
	text-align: center;
	margin-top: 10px;
}
.influencer__title:before {
	position: absolute;
	content: "";
	width: 692px;
	height: 683px;
	background: url(../images/influencer/title_bg.png) no-repeat center center / contain;
	top: -242px;
	left: -188px;
	z-index: -1;
}
.js_slider_influencer {
	max-width: 980px;
	margin: -64px -166px 0 auto;
}
.influencer .slick-prev {
	display: none!important;
}
.influencer .slick-slide {
  transition: .3s ease;
  transform: scale(.7);
	opacity: .5;
	padding: 40px 20px 0;
}
.influencer .slick-slide a {
	cursor: unset;
}
.influencer .slick-current {
	transform: scale(1);
	opacity: 1;
	padding-top: 0;
}
.influencer .slick-current a {
	cursor: pointer;
	position: relative;
	display: block;
	transition: all .3s;
}
.influencer .slick-current a:hover {
	opacity: 0.7;
}
.influencerSlide__title,
.influencerSlide__person,
.influencerSlide__text{
	display: none;
}
.slick-current .influencerSlide__title,
.slick-current .influencerSlide__text{
	display: block;
}
.slick-current .influencerSlide__person {
	display: flex;
}
.influencerSlide__title {
	font-size: 2.2rem;
	margin-bottom: 4px;
}
.influencerSlide__person {
	font-weight: 700;
	position: relative;
	margin-bottom: 8px;
	align-items: center;
}
.influencerSlide__person .c_flex {
	align-items: center;
}
.influencerSlide__person span {
	display: inline-block;
	width: 30px;
	margin-right: 8px;
}
/*.influencerSlide__person:before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/common/instagram_icon.png) no-repeat center center / contain;
	width: 30px;
	height: 30px;
	left: 0;
	top: -2px;
}*/
.influencerSlide__text {
	font-size: 1.4rem;
}
.influencer .next-arrow {
	width: 108px;
	right: 250px;
	top: -218px;
	bottom: 0;
}
.influencer .slick_counter  {
	position: absolute;
	top: 42%;
	right: 290px;
	color: #389FE4;
	background: -webkit-linear-gradient(270deg, #389FE4 0%, #B35DE8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-size: 1.6rem;
}

/* feature
---------------------------------------- */
.feature {
	margin-bottom: 260px;
	position: relative;
	z-index: 1;
}
.feature:before,
.feature:after {
	position: absolute;
	content: "";
	display: block;
	z-index: -1;
}
.feature:before {
	background: url(../images/feature/bg_deco1.png) no-repeat center center / contain;
	width: 280px;
	height: 406px;
	bottom: -180px;
	right: calc(50% + 300px);
}
.feature:after {
	background: url(../images/feature/bg_deco2.png) no-repeat center center / contain;
	width: 316px;
	height: 310px;
	top: -200px;
	left: calc(50% + 260px);
}
.feature__inner {
	position: relative;
	z-index: 2;
}
.featureList {
	justify-content: center;
}
.featureItem {
	width: 313px;
	margin: 0 40px;
	position: relative;
	font-size: 1.6rem;
	text-align: center;
	line-height: 1.5;
}
.featureItem:before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/feature/item_bg_circle.png) no-repeat center center / contain;
	width: 360px;
	height: 360px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.featureItem span {
	font-size: 3.2rem;
	font-weight: 700;
}
.featureItem span .purple{
	font-size: 6rem;
	color: #CB75EB;
}

.cta {
	position: relative;
	margin-bottom: 200px;
}
.cta:before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/cta/bg.png) no-repeat center center / cover;
	width: 1920px;
	height: 774px;
	top: 50%;
	left: 0;
	transform: translatey(-50%);
	z-index: -1;
}
.cta__body {
	align-items: center;
}
.cta__content {
	width: 488px;
	color: #fff;
}
.cta__content h2 {
	font-size: 3.2rem;
	margin-bottom: 18px;
	text-align: center;
}
.cta__content p {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 86px;
	font-weight: 700;
}
.cta__content a {
	margin: 0 auto;
}
.cta__img {
	width: calc(100% - 488px);
}

.workflow {
	margin-bottom: 188px;
	position: relative;
}
.workflow:before {
	position: absolute;
	content: "";
	display: block;
	z-index: -1;
	background: url(../images/workflow/bg_deco.png) no-repeat center center / contain;
	width: 1265px;
	height: 690px;
	bottom: -90px;
	right: calc(50% - 520px);
}
.workflow__title {
	font-size: 6rem;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0.06em;
	width: 272px;
	text-align: center;
}
.workflow__title span {
	display: block;
	font-size: 1.6rem;
	letter-spacing: 0;
	margin-top: 12px;
}
.workflow__slider {
	position: relative;
	max-width: 940px;
	margin: -105px -34px 0 auto;
}
.workflow__slider:before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/workflow/item_bg.png) no-repeat center center / contain;
	width: 849px;
	height: 684px;
	z-index: -1;
	top: -52px;
	right: -124px;
}
.js_slider_workflow {
}
.workflowSlide {
	padding-top: 90px;
	display: flex!important;
}
.workflowSlide__content {
	width: 476px;
	margin-left: 20px;
}
.workflowSlide__img {
	width: calc(100% - 496px);
	max-width: 486px;
	margin-top: 230px;
}
.workflowSlide__no {
	font-size: 2.8rem;
	width: 80px;
	color: #fff;
	position: relative;
	z-index: 1;
	margin-bottom: 48px;
	text-align: center;
	/*font-family: 'Roboto', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
}
.workflowSlide__no:before {
	position: absolute;
	content: "";
	display: block;
	background: linear-gradient(77.03deg, rgba(196, 148, 236, 0.5) 0%, rgba(114, 134, 218, 0.5) 97.85%);
	width: 80px;
	height: 80px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	border-radius: 50%;
}
.workflowSlide__title {
	font-size: 3rem;
	margin-bottom: 4px;
}
.workflowSlide__text {
	font-size: 1.6rem;
	font-weight: 500;
	min-height: 150px;
}
.workflowSlide__btn {
	width: 300px;
}
.workflow .slide-arrow {
	width: 62px;
	bottom: 180px;
}
.workflow .prev-arrow {
	right: 408px;
}
.workflow .next-arrow {
	right: 272px;
}
.workflow .prev-arrow span {
	position: relative;
}
.workflow .prev-arrow span:before {
	display: block;
	position: absolute;
	content: "";
	width: 1px;
	height: 24px;
	background: #C4C4C4;
	top: -2px;
	right: -38px;
}
.workflow .slickDots {
	bottom: 128px;
	width: 120px;
	right: 312px;
}
.workflow .slickDots li button::before {
	background: linear-gradient(77.03deg, rgba(196, 148, 236, 0.5) 0%, rgba(114, 134, 218, 0.5) 97.85%);
}
.workflow .slickDots li.slick-active button::before {
	background: linear-gradient(180deg, #2F59CA 0%, #CB75EB 100%);
}
.workflowSlide__btnSP {
	display: none;
}


.action {
	margin-bottom: 160px;
	position: relative;
}
.action:before {
	position: absolute;
	content: "";
	display: block;
	z-index: -1;
	background: url(../images/action/bg_deco.png) no-repeat center center / contain;
	width: 430px;
	height: 490px;
	top: -160px;
	left: calc(50% + 180px);
}
.action__title {
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 100px;
}
.actionList {
	justify-content: center;
	margin-bottom: 132px;
}
.actionItem {
	width: 320px;
	height: 320px;
	border-radius: 50%;
	position: relative;
	color: #fff;
	text-align: center;
	padding-top: 44px;
	margin: 0 22px;
}
.actionItem__title {
	font-size: 2.2rem;
	margin-bottom: 16px;
}
.actionItem__img {
	margin-bottom: 6px;
}
.actionItem__text {
	font-size: 2.2rem;
	font-weight: 700;
}
.actionItem:before {
	position: absolute;
	content: "";
	display: block;
	width: 360px;
	height: 360px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/action/item_bg.png) no-repeat center center / contain;
	z-index: -1;
}
.action__btn {
	margin: 0 auto 72px;
}
.action__note {
	text-align: center;
	font-weight: 700;
	max-width: 730px;
	margin: 0 auto;
}


.qa {
	position: relative;
}
.qa:before,
.qa:after {
	position: absolute;
	content: "";
	display: block;
	z-index: -1;
}
.qa:before {
	background: url(../images/qa/bg_deco1.png) no-repeat center center / contain;
	width: 390px;
	height: 580px;
	top: -360px;
	right: calc(50% + 300px);
}
.qa:after {
	background: url(../images/qa/bg_deco2.png) no-repeat center center / contain;
	width: 180px;
	height: 220px;
	top: -200px;
	left: calc(50% + 440px);
}
.qa__title {
	position: relative;
	text-align: center;
	font-size: 3.6rem;
	margin-bottom: 64px;
}
.qa__title:before {
	position: absolute;
	content: "";
	display: block;
	background: url(../images/common/title_deco.png) no-repeat center center / contain;
	width: 66px;
	height: 8px;
	left: 50%;
	transform: translatex(-50%);
	bottom: -18px;
}
.qa__inner {
	max-width: 1020px;
}
.qa li {
  padding-bottom: 40px; 
}
.qa__q {
  cursor: pointer;
  position: relative;
	font-size: 2rem;
	font-weight: 700;
}
.qa__q .iconWrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
  background: linear-gradient(47.07deg, #FF74FF -20.78%, #ABD9F0 94.65%);
	filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
	border-radius: 50%;
	overflow: hidden;
}
.qa__q .icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.qa__q .icon:before,
.qa__q .icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #fff;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
.qa__q .icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.qa__q .icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.qa__a {
  display: none;
	font-size: 1.6rem;
}
.qa__a p {
	margin-top: 16px;
	margin-right: 80px;
}



@media screen and (min-width: 1500px) {
	.mv {
		margin-bottom: 300px;
	}
	.mv:before {
		width: 1186px;
		height: 1180px;
		top: -124px;
		left: calc(50% - 136px);
	}
}