@charset "utf-8";

/**********************************************************************/
/* 共通
/**********************************************************************/

:root{

	--c_se_navy_bg: #34394E;
	--c_se_blue_index: #2A43A2;
	--c_se_navy: #323D67;
	--c_se_navy_whynow: #323D67;
	--c_se_navy_support_icons: #323D67;

}
body.page{
	padding-top: 0;
}
#wrapper{
	position: relative;
	z-index: 2;
}
nav.breadcrumbs .icon_arrow::before{
	border-color: #fff;
}
section.whitepaper{
	display: none;
}
#wrapper > section.cta{
	display: none;
}
.common.index{
	font-size: 4.8rem;
	color: var(--c_se_blue_index);
}
.common.index.ja{
	font-size: 4rem;
	font-weight: 700;
}
@media screen and (max-width: 1330px){
	#contents{

  }
	.common.index{
		font-size: clamp(2rem, 2.5vw, 4.8rem);
	}
	.common.index.ja{
		font-size: clamp(2rem, 2vw, 4rem);
	}
}
@media screen and (max-width: 520px){
	#wrapper{
		overflow: hidden;
	}
	nav.breadcrumbs{
		max-width: 100%;
		box-sizing: border-box;
	}
	.common.index{
		font-size: clamp(2rem, 8vw, 4.8rem);
	}
	.common.index.ja {
		font-size: clamp(2rem, 6.8vw, 4rem);
	}
}

/**********************************************************************/
/*	メインビジュアル
/**********************************************************************/

#mainvisual{
	height: 100vh;
	min-height: 480px;
	background-color: var(--c_se_navy_bg);
	color: #fff;
	box-sizing: border-box;
	margin-bottom: 0;
}
#mainvisual .hero{
	padding-top: 87px;
	box-sizing: border-box;
	height: 100%;
}
#mainvisual .hero .bg{
	height: 100%;
}
#mainvisual .hero .bg::before{
	width: 40vw;
	height: 36vw;
	background-image: url("../img/salesenablement/hero_bg.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	left: 0;
	bottom: 0;
	transform: translate(-10%, 0);
	opacity: .04;
}
#mainvisual .hero .bg::after{
	width: 40vw;
	height: 100%;
	background-image: url("../img/salesenablement/hero_image_1.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	right: 0;
	top: 0;
}
#mainvisual .hero .bg .inner{
	flex-direction: column;
	align-items: flex-start;
	padding: 4em 0;
}
#mainvisual .hero .bg .inner .heading{
	margin-top: 7em;
}
#mainvisual .heading .title .ja{

}
#mainvisual .heading .title .ja{
	font-size: 3.4rem;
	margin-top: .5em;
	letter-spacing: .15em;
}
@media screen and (max-width: 1330px){
	#mainvisual .hero .bg{
		padding: 0 6vw;
	}
	#mainvisual .hero .bg .inner .heading{
		margin-top: 3em;
	}
	#mainvisual .heading .title .en{
		font-size: clamp(5rem, 5vw, 8rem);
	}
	#mainvisual .heading .title .ja{
		font-size: clamp(2rem, 2.2vw, 3.4rem);
	}
}
@media screen and (max-width: 520px){		
	#mainvisual{
		height: auto;
	}
	#mainvisual .hero{
		padding-top: 56px;
	}
	#mainvisual .hero .bg{
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 40vh;
	}
	#mainvisual .hero .bg::after{
		width: 40vw;
		height: 40vh;
		right: 0;
		top: auto;
		bottom: 0;
		background-size: 100vw auto;
	}
	#mainvisual .hero .bg .inner{
		padding: 0 0 4em 0;
	}
	#mainvisual .hero .bg .inner .heading{
		padding-left: 6vw;
		padding-right: 6vw;
		margin-top: 0;
	}
	#mainvisual .heading .title .en {
		font-size: clamp(2rem, 11.5vw, 8rem);
	}
}

/**********************************************************************/
/* ABOUT
/**********************************************************************/

body.page::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url("../img/salesenablement/about_bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: coever;
}
section.about{
	background-color: rgba(26,41,51,.43);
	backdrop-filter: blur(1em);
	color: #fff;
}
section.about .lead{
	padding: 120px 0 193px 0;
}
section.about .lead .index{
	margin-bottom: 2em;
	color: #fff;
}
section.about .lead .heading{
	margin-bottom: 5em;
}
section.about .lead .heading .main{
	font-size: 7rem;
	line-height: 1.5;
	font-weight: bold;
	letter-spacing: .04em;
	margin-bottom: .25em;
}
section.about .lead .heading .sub{
	font-size: 2.3rem;
	line-height: 1.5;
	font-weight: bold;
	letter-spacing: 0;
}
section.about .lead .bodying p{
	font-size: 1.8rem;
}
@media screen and (max-width: 1330px){
	section.about .lead{
		padding-right: 6vw;
		padding-left: 6vw;
	}
	section.about .lead .heading .main{
		font-size: clamp(5rem, 4vw, 7rem);
	}
	section.about .lead .heading .sub{
		font-size: clamp(1.8rem, 1.4vw, 2.3rem);
	}
}

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

section.about nav{
	border-top: 1px solid rgba(255,255,255,.25);
	padding: 1em 0 2em 0;
}
section.about nav .links{
	margin: 0 1.5em;
}
section.about nav a{
	padding: 1em 2em;
	line-height: 1.5;
	white-space: nowrap;
	position: relative;
	display: inline-block;
}
section.about nav a::after{
	content: "";
	display: block;
	width: 1px;
	height: 1em;
	background-color: rgba(255,255,255,.25);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0, -50%);
}
section.about nav .item.nosep a::after{
	display: none;
}
@media screen and (max-width: 520px){
	section.about .lead{
		padding: 15vw 5vw;
	}
	section.about .lead .heading .main {
		font-size: clamp(2rem, 8vw, 7rem);
	}
	section.about .lead .bodying p{
		font-size: 100%;
	}
	section.about nav .links{
		flex-direction: column;
		align-items: flex-start;
		justify-content: stretch;
		margin: 0;
	}
	section.about nav a::after{
		display: none;
	}
	section.about nav a{
		padding: .75em 6vw;
	}
}

/**********************************************************************/
/* WHY NOW
/**********************************************************************/

.bg_white{
	background-color: var(--bggray);
}

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

section.whynow{
	padding: 134px 0 0 0;
}
section.whynow .heading{
	margin-bottom: 5em;
}
section.whynow .heading .index{
	margin-bottom: 1em;
}
section.whynow .heading .message{
	font-size: 2.8rem;
	font-weight: bold;
	letter-spacing: .06em;
}
section.whynow .bodying{

}
section.whynow .bodying .item{
	font-weight: bold;
	align-items: stretch;
	margin-bottom: 2em;
}
section.whynow .bodying .item .tag{
	margin-bottom: 1em;
	opacity: .6;
}
section.whynow .bodying .item .tag .label{
	font-size: 1.4rem;
	padding-bottom: .15em;
	display: inline-block;
	border-bottom: 1px solid #979797;
}
section.whynow .bodying .item .title{
	font-size: 2.4rem;
	line-height: 1.5;
}
section.whynow .bodying .item .en{
	color: var(--c_se_blue_index);
	margin-top: .25em;
}
section.whynow .bodying .item .problem{
	flex: 1;
	background-color: var(--c_se_navy_whynow);
	padding: 3em 4em 4em 4em;
}
section.whynow .bodying .item .problem .tag .label{
	border-color: #fff;
}
section.whynow .bodying .item .problem *{
	color: #fff;
}
section.whynow .bodying .item .action{
	flex: 1.2;
	padding: 3em 4em 4em 4em;
	background-color: #fff;
	transform: translate(-1em, 1em);
	box-shadow: 0 3px 4em rgba(0,0,0,.05);
}
section.whynow .bodying .item .action::before{
	content: "";
	display: block;
	width: 2.5em;
	height: 2.6em;
	background-image: url("../img/salesenablement/icons/arrow_1.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	left: 0;
	top: calc(50% - 1em);
	transform: translate(-30%, -50%);
}
section.whynow .reel{
	margin-top: 10em;
	height: 7em;
	overflow: hidden;
}
section.whynow .reel .list{
	flex-wrap: nowrap;
	height: 100%;
}
section.whynow .reel .text{
	transform: translate(0, 0);
	height: 100%;
	animation: title_scroll 25s linear infinite;
}
section.whynow .reel .text img{
	height: 100%;
	max-width: none;
}
@media screen and (max-width: 1330px){
	section.whynow .heading{
		padding-left: 6vw;
		padding-right: 6vw;
	}
	section.whynow .bodying{
		padding-left: 6vw;
		padding-right: 6vw;
	}
	section.whynow .bodying .item .title{
		font-size: 2rem;
	}
}
@media screen and (max-width: 520px){
	section.whynow{
		padding: 15vw 0 0 0;
	}
	section.whynow .heading .message{
		font-size: clamp(1rem, 4.6vw, 2.8rem);
	}
	section.whynow .heading{
		margin-bottom: 3em;
	}
	section.whynow .bodying .item{
		flex-direction: column;
	}
	section.whynow .bodying .item .problem{
		padding: 8vw 8vw 10vw 8vw;
	}
	section.whynow .bodying .item .action{
		transform: translate(0, 0);
		padding: 8vw 8vw 10vw 8vw;
	}
	section.whynow .bodying .item .action::before{
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	section.whynow .reel{
		margin-top: 2em;
		height: 4rem;
	}
}
@keyframes title_scroll{
	0%{
	transform: translate(0, 0);
	}
	100%{
	transform: translate(-100%, 0);
	}
}

/**********************************************************************/
/*	フルファネル型支援領域
/**********************************************************************/

section.support{
	padding: 180px 0;
	background-color: #fff;
}
section.support .heading{
	margin-bottom: 3em;
}
section.support .heading .index{
	margin-bottom: .25em;
}
section.support .heading .description{
	font-size: 1.8rem;
}

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

section.support .bodying .panel{
	background-color: #F8F8F8;
	border: 1px solid #E9E9E9;
	padding: 4em 4em;
	border-radius: .5em;
}
section.support .bodying .list{
	gap: 10px;
}
section.support .bodying .item{	
	flex: 1;
}
section.support .bodying .item .upper{
	width: 100%;
	display: flex;
	justify-content: center;
}
section.support .bodying .item .upper::after{
	width: .9em;
	height: 1.8em;
	background-image: url("../img/salesenablement/icons/arrow_2.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	right: -10px;
	top: 50%;
	transform: translate(50%, -50%);
}
section.support .bodying .item .icon{	
	width: 7.8em;
	height: 7.8em;
	border-radius: 50%;
	overflow: hidden;
}
section.support .bodying .item .icon::before{	
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: var(--c_se_navy_support_icons);
}
section.support .bodying .item .icon img{
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
}
section.support .bodying .item .name{
	font-size: 131.25%;
}
section.support .bodying .item .info{
	padding: 1em 1em;
	background-color: #fff;
	margin-top: 2.5em;
	flex: 1;
}
section.support .bodying .item .info::before{
	width: 1px;
	height: 2.5em;
	background-color: #BEBDBD;
	left: 50%;
	top: 0;
	transform: translate(0, -100%);
}
section.support .bodying .item .info .tip{
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 1em;
	letter-spacing: 0;
	font-feature-settings: "palt";
}
section.support .bodying .item .info .value{
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: 0;
	font-feature-settings: "palt";
}
section.support .bodying .item .info .value li{
	margin-bottom: 1em;
}
section.support .bodying .item .info .value li strong{
	color: #330bcd;
}

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

section.support .bodying .item:nth-of-type(1) .icon::before,
section.support .bodying .item:nth-of-type(1) .upper::after{
	opacity: .5;
}
section.support .bodying .item:nth-of-type(2) .icon::before,
section.support .bodying .item:nth-of-type(2) .upper::after{
	opacity: .6;
}
section.support .bodying .item:nth-of-type(3) .icon::before,
section.support .bodying .item:nth-of-type(3) .upper::after{
	opacity: .7;
}
section.support .bodying .item:nth-of-type(4) .icon::before,
section.support .bodying .item:nth-of-type(4) .upper::after{
	opacity: .8;
}
section.support .bodying .item:nth-of-type(5) .icon::before,
section.support .bodying .item:nth-of-type(5) .upper::after{
	opacity: .9;
}

@media screen and (max-width: 520px){
	section.support{
		padding: 20vw 5vw 15vw 5vw;
	}
	section.support .heading .description{
		font-size: 1.7rem;
		margin-top: 1em;
	}
	section.support .bodying .panel{
		padding: 3vw;
	}
	section.support .bodying .list{
		flex-direction: column;
		gap: 3vw;
	}
	section.support .bodying .list .item{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 
		"upper name"
		"info info";
		background-color: #fff;
    padding: 4vw;
		position: relative;
		border-radius: .4em;
	}
	section.support .bodying .list .item::after{
		content: "";
		display: block;
		width: .9em;
		height: 1.8em;
		background-image: url("../img/salesenablement/icons/arrow_2.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		bottom: .5em;
		transform: translate(-50%, 100%) rotate(90deg);
		z-index: 3;
	}
	section.support .bodying .list .item:last-of-type:after{
		display: none;
	}
	section.support .bodying .list .item .upper{
		grid-area: upper;
		padding: .5em 0;
	}
	section.support .bodying .item .upper::after{
		display: none;
	}
	section.support .bodying .item .icon{
		width: 5em;
		height: 5em;
	}
	section.support .bodying .list .item .name{
		grid-area: name;
		text-align: left;
		padding-left: 1em;
	}
	section.support .bodying .list .item .info{
		grid-area: info;
		margin-top: .75em;
		margin-left: 0;
		border-top: 1px dotted #e1e1e1;
		padding-top: 1em;
	}
	section.support .bodying .list .item .info::before{
		display: none;
		width: 3em;
		height: 1px;
		top: 50%;
		left: 0;
		transform: translate(-100%, -50%);
	}
	section.support .bodying .item .info .tip{
		font-size: 1.8rem;
	}
	section.support .bodying .item .info .value{
		font-size: 1.5rem;
	}
	section.support .bodying .item .info .value li{
		margin-bottom: .75em;
	}
}

/**********************************************************************/
/* CLIENT STORIES
/**********************************************************************/

section.stories{
	padding: 150px 0;
}
section.stories .heading{
	gap: 4em;
	margin-bottom: 100px;
}

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

section.stories .bodying .wrapper{
	display: flex;
	flex-wrap: wrap;
	gap: 4em;
}
section.stories .bodying .wrapper .voice{
	padding: 3em 4em;
	background-color: #fff;
	box-sizing: border-box;
	border-radius: .4em;
	box-shadow: 0 1em 1.5em rgba(50, 61, 103, .05);
}
section.stories .bodying .wrapper .voice .text{
	padding-top: 2em;
	background-image: url("../img/salesenablement/icons/quote.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 1em;
}
section.stories .bodying .wrapper .voice .who{
	margin-top: 1em;
	font-size: 1.4rem;
	margin-left: -.75em;
}
section.stories .bodying .wrapper .voice.v1,
section.stories .bodying .wrapper .voice.v2{
	flex: .5;
	min-width: 40%;
}
section.stories .bodying .wrapper .voice.v3,
section.stories .bodying .wrapper .voice.v4{
	flex: 1;
	height: 20em;
	padding: 3em 3em;
}
section.stories .bodying .wrapper .logo{
	width: 18.333%;
}
section.stories .bodying .wrapper .logo .image{
	width: 100%;
	aspect-ratio: 1 /1;
	background-color: var(--c_se_navy);
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 520px){	
	section.stories{
		padding: 15vw 5vw;
	}
	section.stories .heading{
		gap: 1em;
		margin-bottom: 3em;
		flex-direction: column;
		align-items: flex-start;
	}
	section.stories .bodying .wrapper{
		flex-direction: column;
		gap: 1em;
	}
	section.stories .bodying .wrapper .voice{
		padding: 2em 8vw !important;
		font-size: 1.5rem;
	}
	section.stories .bodying .wrapper .logo{
		width: 100%;
		order: 999;
	}
	section.stories .bodying .wrapper .logo .image{
		aspect-ratio: auto;
		padding: 1.8em 0;
	}
	section.stories .bodying .wrapper .logo .image img{
		height: 18vw;
	}
}

/**********************************************************************/
/* クライアント
/**********************************************************************/

section.clients{
	padding: 150px 0;
	background-color: #fff;
}
section.clients .heading{
	font-size: 3.6rem;
	margin-bottom: 1.5em;
	font-weight: bold;
}
section.clients .bodying .wrapper{
	margin: 0 -.5em;
	padding-right: 0em;
}
section.clients .bodying .item{
	display: inline-block;
	margin: .5em;
}
@media screen and (max-width: 520px){
	section.clients{
		padding: 15vw 5vw;
	}
	section.clients .heading{
		font-size: clamp(1.8rem, 5.5vw, 3.4rem);
	}
	section.clients .bodying .wrapper{
		margin: 0 -.25em;
		padding-right: 0;
	}
	section.clients .bodying .item{
		height: 7.5vw;
		margin: .25em;
	}
	section.clients .bodying .item img{
		max-height: 100%;
	}
}

/**********************************************************************/
/*	プログラム導入の流れ
/**********************************************************************/

section.flow{
	padding: 150px 0;
	background-color: #fff;
	border-top: 1px solid #D5D5D5;
}
section.flow .heading{
	margin-bottom: 5em;
}
section.flow .heading .index{
	margin-bottom: 1em;
}
section.flow .heading .index .en{
	font-size: 2rem;
	color: var(--c_se_navy);
}
section.flow .heading .index .ja{
	font-size: 4rem;
}

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

section.flow .bodying .wrapper{

}
section.flow .bodying .wrapper .item{
	width: calc(100% / 3);
	display: flex;
	flex-direction: column;
}
section.flow .bodying .wrapper .item .upper{
	color: #fff;
	background-color: #2E3E7D;
	font-size: 2rem;
	padding: .75em 1em;
	mask-image: url("../img/salesenablement/flow_index_clip.svg");
  mask-position: right center;
  mask-repeat: no-repeat;
  mask-size: auto 100%;
}
section.flow .bodying .wrapper .item .cushion{
	display: flex;
	flex: 1;
	padding-right: 1.5em;
	flex-direction: column;
}
section.flow .bodying .wrapper .item .period{
	margin: .75em 0 .4em 0;
	background-color: #F9F9F9;
	color: var(--c_se_navy);
	padding: .75em 1em;
}
section.flow .bodying .wrapper .item .period .icon{
	padding-left: 1.5em;
	background-image: url("../img/salesenablement/icons/calendar.svg");
	background-repeat: no-repeat;
	background-position: left top .85em;
	background-size: auto 0.8125em;
	display: inline-block;
}
section.flow .bodying .wrapper .item .period sup{
	font-size: 10px;
}
section.flow .bodying .wrapper .item .contents{
	border-top: 1px dotted #B2B2B2;
	padding: 1.5em 0 2.5em 0;
}
section.flow .bodying .wrapper .item .contents li{
	line-height: 1.5;
	margin-bottom: .5em;
	font-feature-settings: "palt";
	padding-left: 1em;
	position: relative;
}
section.flow .bodying .wrapper .item .contents li::after{
	content: "";
	display: block;
	width: .3em;
	height: .3em;
	border: 1px solid var(--c_se_navy);
	position: absolute;
	left: 0;
	top: .6em;
	transform: rotate(45deg);
}
section.flow .bodying .wrapper .item .image{
	margin-top: auto;
	border: 1px solid #DCDCDC;
	border-radius: .25em;
	width: 375px;
}
section.flow .bodying .notation{
	margin-top: 2em;
	font-size: 1.4rem;
	color: var(--c_se_navy);
}

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

section.flow .bodying .wrapper .item.i2 .upper{
	background-color: #2E6D7D;
}
section.flow .bodying .wrapper .item.i3 .upper{
	background-color: #633E78;
}

@media screen and (max-width: 520px){
	section.flow{
		padding: 15vw 5vw;
	}
	section.flow .heading{
		margin-bottom: 3em;
	}
	section.flow .heading .index .en{
		font-size: 1.8rem;
	}
	section.flow .heading .index .ja{
		font-size: clamp(2rem, 7vw, 4rem);
	}
	section.flow .bodying .wrapper{
		flex-direction: column;
		gap: 4em;
	}
	section.flow .bodying .wrapper .item{
		width: 100%;
		box-sizing: border-box;
	}
	section.flow .bodying .wrapper .item .contents{
		padding-bottom: 1.52em;
	}
	section.flow .bodying .wrapper .item .image{
		width: 96%;
		margin: 0 auto;
	}
	section.flow .bodying .wrapper .item .cushion{
		padding-right: 0;
	}
}

/**********************************************************************/
/* CTA
/**********************************************************************/

aside.cta.se{
	background-color: #212430;
	background-image: url("../img/salesenablement/cta_bg.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 150%;
	padding: 100px 0;
}
aside.cta.se .wrapper{
	gap: 3em;
}
aside.cta.se .heading{
	color: #fff;
	padding: 4em 0;
}
aside.cta.se .heading .en{
	font-size: 2rem;
}
aside.cta.se .heading .title{
	font-size: 4rem;
}
aside.cta.se .heading .description{
	margin-top: 1.5em;
}

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

aside.cta.se .bodying{
	gap: 1.25em;
}
aside.cta.se .bodying .panel{
	background-color: #fff;
	padding: 4em 3em;
	width: 320px;
	max-width: 100%;
	border-radius: .5em;
	box-sizing: border-box;
}
aside.cta.se .bodying .panel .icon{
	width: 3.25em;
	height: 3.25em;
	margin: 0 auto;
	background-color: #28509F;
	border-radius: 50%;
	background-image: url("../img/salesenablement/icons/email.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-bottom: 1em;
}
aside.cta.se .bodying .panel .index{
	font-size: 2.4rem;
}
aside.cta.se .bodying .panel .text{
	font-size: 1.4rem;
	margin: 2em 0;
}
aside.cta.se .bodying .panel .link a{
	font-size: 1.4rem;
	border: 1px solid #D5D5D5;
	border-radius: 10em;
	padding: .75em 1em;
	width: 15em;
	max-width: 100%;
	box-sizing: border-box;
	white-space: nowrap;
}
@media screen and (max-width: 520px){
	aside.cta.se{
		background-position: center top;
    background-size: auto 100vw;
    padding: 25vw 5vw 10vw 5vw;
	}
	aside.cta.se .wrapper{
		flex-direction: column;
	}
	aside.cta.se .heading{
		padding: 0;
	}
	aside.cta.se .bodying{
		flex-direction: column;
		width: 100%;
	}	
	aside.cta.se .bodying .panel .text{
		margin: 1em 0;
	}
	aside.cta.se .bodying .panel{
		width: 100%;
		padding: 2em 6vw;
	}
}

/**********************************************************************/
/* アニメーション
/**********************************************************************/

/*--------------------------------------------------------------------*/
/*#mainvisual*/

#mainvisual .bg._animation::after{
	transform: translate(-20%, 0);
	opacity: 0;
	width: 15vw;
	transition: transform .8s cubic-bezier(0,.87,.52,.98) .3s, width 1.4s cubic-bezier(.51,.5,0,.98) .7s, opacity 2.4s ease-out .3s;
}
#mainvisual .bg._animation._anim_start::after{
	transform: translate(0%, 0);
	opacity: 1;
	width: 40vw;
}
@media screen and (max-width: 520px){
	#mainvisual .bg._animation::after{
		width: 60vw;
	}
	#mainvisual .bg._animation._anim_start::after{
		width: 100vw;
	}
}

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

#mainvisual .heading._animation .en,
#mainvisual .heading._animation .ja{
	opacity: 0;
	transform: translate(0, 6vw);
	transition: opacity .3s ease-out, transform 2s cubic-bezier(.02,.94,.83,1);
}
#mainvisual .heading._animation._anim_start .en,
#mainvisual .heading._animation._anim_start .ja{
	opacity: 1;
	transform: translate(0, 0);
}
#mainvisual .heading._animation._anim_start .ja{
	transition-delay: .1s;
}

/*--------------------------------------------------------------------*/
/* About */

section.about._animation .lead .index{
	opacity: 0;
	transform: translate(0, 10%);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
section.about._animation .lead .heading .main{
	opacity: 0;
	transform: translate(0, 10%);
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition-delay: .1s;
}
section.about._animation .lead .heading .sub{
	opacity: 0;
	transform: translate(0, 1em);
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition-delay: .2s;
}
section.about._animation .lead .bodying{
	opacity: 0;
	transform: translate(0, 1em);
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition-delay: .3s;
}

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

section.about._animation._anim_start .lead .index{
	opacity: 1;
	transform: translate(0, 0);
}
section.about._animation._anim_start .lead .heading .main{
	opacity: 1;
	transform: translate(0, 0);
}
section.about._animation._anim_start .lead .heading .sub{
	opacity: 1;
	transform: translate(0, 0);
}
section.about._animation._anim_start .lead .bodying{
	opacity: 1;
	transform: translate(0, 0);
}

/*--------------------------------------------------------------------*/
/* WHY NOW */

section.whynow._animation .heading .index{
	opacity: 0;
	transform: translate(0, 1em);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
section.whynow._animation .heading .message{
	opacity: 0;
	transform: translate(0, 10%);
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition-delay: .4s;
}
section.whynow._animation .bodying .list .item{
	opacity: 0;
	transform: translate(0, 10%);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
section.whynow._animation .bodying .list .item:nth-of-type(1){
	transition-delay: .5s;
}
section.whynow._animation .bodying .list .item:nth-of-type(2){
	transition-delay: .6s;
}
section.whynow._animation .bodying .list .item:nth-of-type(3){
	transition-delay: .7s;
}

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

section.whynow._animation._anim_start .heading .index{
	opacity: 1;
	transform: translate(0, 0);
}
section.whynow._animation._anim_start .heading .message{
	opacity: 1;
	transform: translate(0, 0);
}
section.whynow._animation._anim_start .bodying .list .item{
	opacity: 1;
	transform: translate(0, 0);
}


/*--------------------------------------------------------------------*/
/* フルファネル型支援領域 */

section.support._animation .heading .index{
	opacity: 0;
	transform: translate(0, 1em);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
section.support._animation .heading .description{
	opacity: 0;
	transform: translate(0, 2em);
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition-delay: .2s;
}
section.support._animation .bodying .panel{
	opacity: 0;
	transform: translate(-10%, 0);
	transition: opacity 1s ease-out, transform .5s ease-out;
	transition-delay: .5s;
}

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

section.support._animation._anim_start .heading .index{
	opacity: 1;
	transform: translate(0, 0);
}
section.support._animation._anim_start .heading .description{
	opacity: 1;
	transform: translate(0, 0);
}
section.support._animation._anim_start .bodying .panel{
	opacity: 1;
	transform: translate(0, 0);
}

/*--------------------------------------------------------------------*/
/* STORIES */

section.stories._animation .heading .first{
	opacity: 0;
	transform: translate(2em, 0);
	transition: opacity .6s ease-out, transform .5s ease-out;
}
section.stories._animation .heading .second{
	opacity: 0;
	transform: translate(2em, 0);
	transition: opacity .6s ease-out, transform .5s ease-out;
	transition-delay: .2s;
}
section.stories .bodying._animation .voice{
	opacity: 0;
	transform: translate(2em, 0);
	transition: opacity .6s ease-out, transform .5s ease-out;
}
section.stories .bodying._animation .voice.v1{
	transition-delay: .1s;
}
section.stories .bodying._animation .voice.v2{
	transition-delay: .3s;
}
section.stories .bodying._animation .voice.v3{
	transition-delay: .5s;
}
section.stories .bodying._animation .voice.v4{
	transition-delay: .7s;
}

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

section.stories._animation._anim_start .heading .first{
	opacity: 1;
	transform: translate(0, 0);
}
section.stories._animation._anim_start .heading .second{
	opacity: 1;
	transform: translate(0, 0);
}
section.stories .bodying._animation._anim_start .voice{
	opacity: 1;
	transform: translate(0, 0);
}

/*--------------------------------------------------------------------*/
/* クライアント */

/*--------------------------------------------------------------------*/
/* 流れ */

section.flow._animation .bodying .item{
	opacity: 0;
	transform: translate(-2em, 0);
	transition: opacity .6s ease-out, transform .5s ease-out;
}
section.flow._animation .bodying .item.i1{
	transition-delay: .1s;
}
section.flow._animation .bodying .item.i2{
	transition-delay: .2s;
}
section.flow._animation .bodying .item.i3{
	transition-delay: .3s;
}

section.flow._animation._anim_start .bodying .item{
	opacity: 1;
	transform: translate(0, 0);
}

/*--------------------------------------------------------------------*/
/* CTA */