@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 994px) {  }

@media screen and (max-width: 767px) {  }

@media screen and (max-width: 579px) {}

@media screen and (max-width: 399px) {}


/*
=========================================================================================== */
.ButtonStyle1 a {
	min-width: 370px;
	font-size: 100%;
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}

@media screen and (max-width: 579px) {
	.JS .ButtonStyle1 a {
		display: block;
		min-width: 0;
	}
}

/*
=========================================================================================== */
#DXContents *,
#DXContents *:before,
#DXContents *:after {
	box-sizing: border-box;
}

#DXContents {
	width: 100%;
	overflow: hidden;
}

@media screen and (max-width: 994px) {
	#DXContents {
		width: calc(100% + 30px);
		margin-left: -15px;
	}
}

#DXContents .dispPc {
	display: block;
}

#DXContents .dispSp {
	display: none;
}

@media screen and (max-width: 767px) {
	#DXContents .dispPc {
		display: none;
	}

	#DXContents .dispSp {
		display: block;
	}
}

.dxInner {
	width: 965px;
	margin: 0 auto;
	position: relative;
}

@media screen and (max-width: 994px) {
	.dxInner {
		width: auto;
		max-width: 980px;
		padding: 0 15px;
	}
}

/* --- --- */
.dxTextA {
	color: #323232;
	font-size: 100%; /* 16px */
	line-height: 175%; /* 28px */
	text-align: justify;
}

/* --- --- */
.dxHeadlineA > span {
	line-height: 1;
	display: block;
	width: 150px;
	margin: 0 auto;
}

.dxHeadlineA > span img {
	width: 100%;
	height: auto;
}

.dxHeadlineA > h2 {
	font-weight: bold;
	color: #fff;
	font-size: 24px;
	text-align: center;
	padding: 0 0 0 0;
	background: transparent;
	margin: 15px 0 0 0;
}

.dxHeadlineA > h2 span {
	color: #fff;
	font-size: 70%;
	display: inline-block;
	padding: 0 0.2em;
	background: transparent;
}

/* --- --- */
.dxEffectFadeUp {
	opacity: 0;
	transform: translateY(20px);
	transition: all 300ms 100ms;
}

.dxEffectFadeUp.dxIsScroll {
	opacity: 1;
	transform: translateY(0);
}


/* BgA
=========================================================================================== */
.dxBgA {
	width: 100%;
	position: relative;
}

.dxBgA:before {
	content: '';
	display: block;
	width: 100%;
	height: 1140px;
	background: #f0eee8 url("/digital/collaboration/image/main-pc@1x.png") no-repeat center top / auto 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx){
	.dxBgA:before {
		background-image: url("/digital/collaboration/image/main-pc@2x.png");
	}
}

@media screen and (max-width: 994px) {
	.dxBgA:before {
		background-position: right -463px top;
	}
}

@media screen and (min-width: 768px) and (max-height: 720px){
	.dxBgA:before {
		height: 1200px;
		background-color: #f0eee8;
		background-image: url("/digital/collaboration/image/main-pc@1x.png");
		background-repeat: no-repeat;
		background-size: auto 900px;
		background-position: center top;
	}
}

@media screen and (max-width: 767px) {
	.dxBgA:before {
		height: 1385px;
		background: url("/digital/collaboration/image/main-sp.png") no-repeat center top / 600px auto;
	}
}

/* BlockTop
=========================================================================================== */
.dxBlockTop {
	width: 100%;
	height: 650px;
	position: relative;
}

.dxBlockTop .dxInner {
	height: 100%;
}

@media screen and (max-width: 767px) and (min-height: 1000px){
	.dxBgA:before {
		background: url("/digital/collaboration/image/main-sp.png") no-repeat center top -10vw / 100% auto;
	}
}

@media screen and (min-width: 768px) and (max-height: 720px){
	.dxBlockTop {
		height: 600px;
	}
}

@media screen and (max-width: 767px) {
	.dxBlockTop {
		height: 652px;
	}
}

/* --- --- */
.dxBoxTitle {
	text-align: left;
	/*! width: 400px; */
	position: absolute;
	top: 136px;
	right: 0;
}

.dxBoxTitle .dxText01 {
	font-weight: bold;
	color: #000;
	font-size: 28px;
	line-height: 1;
}

.dxBoxTitle .dxText02 {
	color: #323232;
	font-size: 15px;
	line-height: 1.53;
	margin: 25px 0 0 0;
}

.dxBoxTitle .dxText03 {
	font-weight: bold;
	color: #e6141e;
	font-size: 70px;
	line-height: 1;
	margin: 20px 0 0 0;
}

@media screen and (min-width: 768px) and (max-height: 720px){
	.dxBoxTitle {
		top: 100px;
		right: 30px;
	}
	.dxBoxTitle .dxText03 {
		text-shadow: -1px 1px 1px rgba(255,255,255,0.7);
	}
}

.dxBoxTitle .dxText03 span {
	font-size: 50%;
	display: block;
	margin: 0 0 10px 0;
}

@media screen and (max-width: 767px) {
	.dxBoxTitle {
		text-align: center;
		width: 100%;
		top: 50px;
	}

	.dxBoxTitle .dxText03 span {
		font-size: 45%;
	}
}

@media screen and (max-width: 399px) {
	.dxBoxTitle {
		top: 50px;
	}

	.dxBoxTitle .dxText01 {
		font-size: 22px;
	}

	.dxBoxTitle .dxText02 {
		font-size: 15px;
	}

	.dxBoxTitle .dxText03 {
		font-size: 62px;
	}
}

/* --- --- */
.dxNavA {
	width: 380px;
	height: 64px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, .15);
	position: absolute;
	top: 590px;
	left: 0;
}

.dxNavA:before {
	content: '';
	display: block;
	width: 9px;
	height: calc(100% - 24px);
	background: #e6141e;
	position: absolute;
	top: 12px;
	left: 20px;
}

.dxNavA .dxList01 {
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 0 60px;
}

.dxNavA .dxList01 > li:not(:last-child) {
	margin-right: 20px;
}

.dxNavA .dxList01 a {
	font-weight: bold;
	color: #5a5a5a;
	font-size: 90%; /* 12px */
	line-height: 1;
	padding: 4px 0;
	position: relative;
}

.dxNavA .dxList01 a:after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #5a5a5a;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transform: translateX(-10px);
	transition: all 200ms;
}

.dxNavA .dxList01 a:hover {
	text-decoration: none;
}

.dxNavA .dxList01 a:hover:after {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (max-width: 994px) {
	.dxNavA {
		left: 15px;
	}
}

@media screen and (max-width: 767px) {
	.dxNavA {
		width: calc(100% - 30px);
		max-width: 420px;
		height: auto;
		top: auto;
		bottom: 0;
		left: 15px;
	}

	.dxNavA:before {
		left: 18px;
	}

	.dxNavA .dxList01 {
		min-height: 64px;
		flex-flow: row wrap;
		margin: 0 0 0 45px;
		padding: 10px 0;
	}

	.dxNavA .dxList01 > li {
		padding: 6px 0;
	}

	.dxNavA .dxList01 > li:not(:last-child) {
		margin-right: 18px;
	}
}

/* SectionAbout
=========================================================================================== */
#dxAbout {
	padding: 105px 0 50px 0;
	position: relative;
}

#dxAbout .dxHeadline01 {
	font-weight: bold;
	font-size: 150%; /* 24px */
	margin: 0 0 20px 0;
}

#dxAbout .dxBox01 {
	width: 100%;
	display: flex;
	flex-flow:row nowrap;
	justify-content: space-between;
	margin-bottom: 3vw;
}

#dxAbout .dxBox01 .dxBox01_textbox{
	width: 45%;
}

#dxAbout .dxBox01 .dxBox01_linkbox{
	width: 49%;
	position: relative;
}

#dxAbout .dxBox01 .dxBox01_linkbox .collabo__anc {
	display: block;
	overflow: hidden;
	position: relative;
	border-radius: 10px;
	background: #fff;
}

#dxAbout .dxBox01 .dxBox01_linkbox .collabo__anc span {
	color: #333;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.02em;
	line-height: 1.58;
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	top: 50%;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

#dxAbout .dxBox01 .dxBox01_linkbox .collabo__anc img {
	transition: transform 300ms;
}
#dxAbout .dxBox01 .dxBox01_linkbox .collabo__anc:hover img {
	transform: scale(1.2, 1.2);
	opacity: .5;
}
@media screen and (max-width: 767px) {
	#dxAbout .dxBox01 .dxBox01_linkbox .collabo__anc:hover img {
		transform: none;
		opacity: 1;
	}
}
@media screen and (max-width: 767px) {
	#dxAbout .collabo__anc span {
		font-size: 3.2vw;
	}
}

#dxAbout .dxBox01 .dxBox01_linkbox a:after{
	content: "";
	position: absolute;
	background: url("/digital/collaboration/image/icon_more.png") no-repeat 0 0;
	background-size: contain;
	width:12vw;
	height:1vw;
	right:1vw;
	bottom:1.5vw;
}

#dxAbout .dxBox_mvbox{
}

#dxAbout .movie__title{
	width: 126px;
	margin: 0 auto 1vw auto;
	background: none;
}

#dxAbout .archive__list{
	display: flex;
	flex-flow:row nowrap;
	justify-content: space-between;
}

#dxAbout .archive__list li{
	width: 45%;
}

.collabo__anc {
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
}
@media screen and (max-width: 767px) {
	#dxAbout .dxBox01 .dxBox01_linkbox .collabo__anc span {
		font-size: 5vw;
	}
	
	#dxAbout .dxBox01 .dxBox01_linkbox a:after{
		width:30vw;
		height:3vw;
		right:2vw;
		bottom:3vw;
	}
	
	#dxAbout .dxBox01 .dxBox01_linkbox .collabo__anc {
		width: 90%;
		margin: 5vw auto 10vw auto;
	}
	
	#dxAbout .dxBox_mvbox{
		width: 100%;
		margin: 0 auto;
	}

	#dxAbout .movie__title{
		width: 24vw;
		margin: 0 auto 1vw auto;
	}
	
	#dxAbout .archive__list{
		display: flex;
		flex-flow:column;
	}

	#dxAbout .archive__list li{
		width: 100%;
	}
	
	#dxAbout .archive__list li:first-of-type{
		margin-bottom: 20px;
	}
}

.collabo__anc img {
	transition: transform 300ms;
}
.collabo__anc:hover .collabo__pic {
	transform: scale(1.2, 1.2);
}
@media screen and (max-width: 767px) {
	.collabo__anc:hover .collabo__pic {
		transform: none;
	}
}
.collabo__icon {
	width: 95px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
@media screen and (max-width: 767px) {
	.collabo__icon {
		width: 14vw;
	}
}

#dxAbout .dxText01{
	margin: 0 0 50px 0;
	font-size: 98%;
	line-height: 1.8;
}

#dxAbout .dxBox02 {
	margin: 75px 0 0 0;
}

@media screen and (max-width: 767px) {
	#dxAbout .dxHeadline01 {
		text-align: center;
		margin: 0 0 20px 0;
	}

	#dxAbout .dxTextA {
		/*! padding: 0 15px; */
		font-size:75%; /* 12px */
		margin: 0 0 40px 0;
	}

	#dxAbout .dxBox01 {
		flex-flow: column;
	}
	
	#dxAbout .dxBox01 .dxBox01_textbox{
		width: 100%;
	}

	#dxAbout .dxBox01 .dxBox01_linkbox{
		width: 98%;
		margin: 0 auto;
	}

	#dxAbout .dxBox02 {
		margin: 25vw 0 0 0;
	}
}

@media screen and (max-width: 399px) {
	#dxAbout {
		padding: 45px 0 40px 0;
	}

	#dxAbout .dxHeadline01 {
		font-size: 100%;
		margin: 0;
	}

	#dxAbout .dxBox02 {
		/*! margin: 100px 0 0 0; */
	}
}

/* --- --- */
.dxPanelAWrap {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.dxPanelAWrap > * {
	width: 23%;
	margin: 0 0 10px 0;
}

.dxPanelAWrap > li {
	border-radius: 16px;
	background: #f2f2f2;
	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .15);
	overflow: hidden;
}

.dxPanelA {
	width: 100%;
	padding: 0 0 20px 0;
}

.dxPanelA h3 {
	font-weight: bold;
	color: #323232;
	font-size: 110%; /* 18px */
	line-height: 1;
	margin: 20px 0 0 20px;
}

.dxPanelA p {
	color: #323232;
	font-size: 75%; /* 12px */
	line-height: 175%; /* 21px */
	margin: 7px 0 0 20px;
	padding-right: 20px;
}

.dxlinkbox{
	transition: all .3s ease;
}

.dxlinkbox:hover{
	opacity: .8;
	text-decoration: none;
}

.dxPanelB{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	background: #f2f2f2;
	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .15);
	overflow: hidden;
	margin: 30px 0 0 0;
	border-radius: 16px;
}

.dxPanelB img{
	width: 65%;
}

.dxPanelB .dxPanelB_textbox{
	width: 30%;
	margin-left: 40px;
	padding-top: 60px;
	position: relative;
}

.dxPanelB .dxPanelB_textbox:after{
	content: "";
	position: absolute;
	background: url("/digital/collaboration/image/icon_more.png") no-repeat 0 0;
	background-size: contain;
	width:12vw;
	height:1vw;
	right:0;
	bottom:1.5vw;
}

.dxPanelB h3 {
	font-weight: bold;
	color: #323232;
	font-size: 110%; /* 18px */
	line-height: 1;
}

.dxPanelB p {
	color: #323232;
	font-size: 75%; /* 12px */
	line-height: 175%; /* 21px */
	width: 81%;
}


/* Effect */
.dxPanelAWrap > * {
	opacity: 0;
	transform: translateY(15px);
	transition: all 400ms;
}

.dxPanelAWrap > *:nth-child(1) {
	transition-delay: 100ms;
}

.dxPanelAWrap > *:nth-child(2) {
	transition-delay: 300ms;
}

.dxPanelAWrap > *:nth-child(3) {
	transition-delay: 500ms;
}

.dxPanelAWrap > *:nth-child(4) {
	transition-delay: 700ms;
}

.dxIsScroll .dxPanelAWrap > * {
	opacity: 1;
	transform: translateY(0);
}

.dxPanelB {
	opacity: 0;
	transform: translateY(15px);
	transition: all 400ms;
}

.dxPanelB {
	transition-delay: 900ms;
}

.dxIsScroll .dxPanelB {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (max-width: 994px) {
	.dxPanelA h3 {
		font-size: 100%; /* 16px */
		margin: 20px 0 0 15px;
	}

	.dxPanelA p {
		color: #323232;
		margin: 7px 0 0 15px;
	}
}

@media screen and (max-width: 767px) {
	.dxPanelAWrap {
		flex-flow: row wrap;
		max-width: 450px;
		margin: 0 auto;
	}

	.dxPanelAWrap > * {
		width: 48.8%;
	}

	.dxPanelAWrap > li {
		border-radius: 16px;
		background: #f2f2f2;
		box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .15);
		overflow: hidden;
	}

	.dxPanelA {
		width: 100%;
		padding: 0 0 20px 0;
	}

	.dxPanelA h3 {
		font-weight: bold;
		color: #323232;
		font-size: 4vw;
		line-height: 1;
		margin: 20px 0 0 20px;
	}

	.dxPanelA p {
		color: #323232;
		font-size: 81.25%; /* 13px */
		line-height: 1.4375;
		margin: 7px 0 0 20px;
	}
	
	.dxPanelB{
		max-width: 450px;
		margin: 0 auto;
		display: flex;
		flex-flow: column;
	}

	.dxPanelB img{
		width: 100%;
	}

	.dxPanelB .dxPanelB_textbox{
		width: 100%;
		margin-left: 0;
		padding: 3vw 3vw 9vw 3vw;
	}
	
	.dxPanelB .dxPanelB_textbox:after {
    width: 30vw;
    height: 3vw;
    right: 2vw;
    bottom: 3vw;
  }

	.dxPanelB h3 {
		font-weight: bold;
		color: #323232;
		font-size: 4vw;
		line-height: 1;
	}

	.dxPanelB p {
		color: #323232;
		font-size: 81.25%; /* 13px */
		line-height: 1.4375;
		width: 100%;
	}
}

@media screen and (max-width: 399px) {
	.dxPanelA {
		width: 100%;
		min-height: 270px;
		padding: 0 0 15px 0;
	}

	.dxPanelA h3 {
		/*! font-size: 100%; */
		margin: 15px 0 0 10px;
	}

	.dxPanelA p {
		margin: 7px 0 0 10px;
		padding-right: 10px;
	}
}

/* SectionFuature
=========================================================================================== */
#dxFeature {
	padding: 0 0 60px 0;
	background: #f4f5f7;
}

#dxFeature .dxSectionHead {
	background: #e6141e;
	padding: 55px 0;
}

#dxFeature .dxSectionHead .dxColumnContainer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 35px 0 0 0;
}

#dxFeature .dxSectionHead .dxColumn01 {
	width: 50%;
	margin: 20px 0 0 0;
}

#dxFeature .dxSectionHead .dxText01 {
	font-weight: bold;
	color: #fff;
	font-size: 125%; /* 20px */
	line-height: 175%; /* 35px */
}

#dxFeature .dxSectionHead .dxText02 {
	color: #fff;
	font-size: 87.5%; /* 14px */
	line-height: 175%; /* 24px */
	margin: 20px 0 0 0;
}

@media screen and (max-width: 994px) {
	#dxFeature .dxSectionHead .dxColumn01 {
		width: 48%;
	}

	#dxFeature .dxSectionHead .dxText01 {
		font-size: 112%; /* 18px */
	}
}

@media screen and (max-width: 767px) {
	#dxFeature .dxSectionHead .dxColumnContainer {
		display: block;
		margin: 20px 0 0 0;
	}

	#dxFeature .dxSectionHead .dxColumn01 {
		width: 100%;
		margin: 50px 0 0 0;
		padding: 0 15px;
	}

	#dxFeature .dxSectionHead .dxText01 {
		font-size: 125%; /* 20px */
	}
}

@media screen and (max-width: 399px) {
	#dxFeature .dxSectionHead .dxColumnContainer {
		display: block;
		margin: 10px 0 0 0;
	}

	#dxFeature .dxSectionHead .dxText01 {
		font-size: 108%;
	}
}

/* --- --- */
.dxNavF {
	width: 400px;
}

.dxNavF a {
	font-weight: bold;
	color: #fff;
	font-size: 123%; /* 20px */
	line-height: 1;
	display: block;
	width: 100%;
	padding: 22px 0 20px 0;
	border-bottom: 1px solid #fff;
	position: relative;
	transition: all 300ms;
}

.dxNavF a:after {
	content: '';
	display: block;
	width: 13px;
	height: 13px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	bottom: 25px;
	right: 10px;
}

.dxNavF a > span:first-child {
	display: block;
	width: 33px;
	margin: 0 0 20px 0;
}

.dxNavF a > span:first-child img {
	width: 100%;
	height: auto;
}

.dxNavF a:hover {
	text-decoration: none;
	opacity: .6;
}

@media screen and (max-width: 994px) {
	.dxNavF {
		width: 41.6%;
		min-width: 350px;
	}

	.dxNavF a {
		font-size: 112%; /* 18px */
	}
}

@media screen and (max-width: 767px) {
	.dxNavF {
		width: 100%;
		min-width: 100%;
		padding: 0 15px;
	}

	.dxNavF a {
		font-size: 125%; /* 20px */
		padding-right: 30px;
	}
}

@media screen and (max-width: 399px) {
	.dxNavF a > span:first-child {
		width: 28px;
		margin: 0 0 20px 0;
	}

	.dxNavF a {
		font-size: calc(20/480 * 100vw);
		padding-right: calc(30/480 * 100vw);
	}
}

/* --- --- */
.dxBlockFeature .dxBlockHead {
	padding: 70px 0 50px 0;
}

.dxBlockFeature .dxBlockHead > span {
	display: block;
	width: 39px;
	margin: 0 auto;
	position: relative;
}

.dxBlockFeature .dxBlockHead > span img {
	width: 100%;
	height: auto;
}

.dxBlockFeature .dxBlockHead > span:after {
	content: '';
	display: block;
	width: 100vw;
	height: 1px;
	background: #e6141e;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.dxBlockFeature .dxBlockHead h3 {
	color: #323232;
	font-size: 150%; /* 24px */
	text-align: center;
	margin: 30px 0 0 0;
	padding: 0 0 0 0;
}

.dxBlockFeature .dxBlockBody {
	position: relative;
}

.dxBlockFeature .dxText01 {
	width: 430px;
	position: absolute;
	top: 20px;
	right: 0;
}

@media screen and (max-width: 994px) {
	.dxBlockFeature .dxText01 {
		right: 15px;
	}
}

@media screen and (max-width: 914px) {
	.dxBlockFeature .dxText01 {
		width: 80%;
		margin: 40px auto 0 auto;
		position: relative;
		top: 0;
		right: auto;
	}
}

@media screen and (max-width: 767px) {
	.dxBlockFeature .dxText01 {
		width: 100%;
		margin: 40px auto 0 auto;
		padding: 0 15px;
		position: relative;
		top: 0;
		right: auto;
	}
}

@media screen and (max-width: 399px) {
	.dxBlockFeature .dxBlockHead h3 {
		font-size: 130%;
	}
}

/* --- --- */
.dxCommentFWrap > * + * {
	margin: 12px 0 0 0;
}

.dxCommentF {
	padding: 60px 0 0 85px;
	position: relative;
}

.dxCommentF:before {
	content: '';
	width: 110px;
	height: 110px;
	background: url("/digital/collaboration/image/img_avatar_01.png") no-repeat center center / contain;
	position: absolute;
	top: 0;
	left: 0;
}

.dxCommentF01:before {
	background-image: url("/digital/collaboration/image/img_avatar_01.png");
}

.dxCommentF02:before {
	background-image: url("/digital/collaboration/image/img_avatar_02.png");
}

.dxCommentF03:before {
	background-image: url("/digital/collaboration/image/img_avatar_03.png");
}

.dxCommentF04:before {
	background-image: url("/digital/collaboration/image/img_avatar_04.png");
}

.dxCommentF05:before {
	background-image: url("/digital/collaboration/image/img_avatar_05.png");
}

.dxCommentF06:before {
	background-image: url("/digital/collaboration/image/img_avatar_06.png");
}

.dxCommentF p {
	font-weight: bold;
	color: #5a5a5a;
	font-size: 92%;
	line-height: 1.5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 370px;
	height: 60px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .15);
	position: relative;
}

@media screen and (max-width: 767px) {
	.dxCommentFWrap {
		padding: 0 15px;
	}

	.dxCommentF p {
		width: 92%; /* 15px */
		padding: 0 15px;
		text-align: center;
	}
}

@media screen and (max-width: 399px) {
	.dxCommentFWrap {
		padding: 0 0;
	}
}

/* --- --- */
.dxPanelFWrap {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 30px 60px;
	background: #dbdce3;
	border-radius: 24px;
	margin: 50px 0 0 0;
}

.dxPanelFWrap > * {
	width: 31%;
}
.dxPanelFWrap > li {
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .15);
	overflow: hidden;
}

.dxPanelF {
	display: block;
	width: 100%;
	position: relative;
	z-index: 0;
}

.dxPanelF .dxPanelText01 {
	color: #323232;
	display: block;
	padding: 20px 0;
}

.dxPanelF .dxPanelText01 .dxPanelText01No {
	display: block;
	width: 15px;
	margin: 0 auto 10px;
}
.dxPanelF .dxPanelText01 .dxPanelText01Title {
	display: table;
	width: 100%;
	height: 50px;
	margin: 0 auto 10px;
	font-size: 112.5%;
	font-weight: 700;
	line-height: 1.33;
}
.dxPanelF .dxPanelText01 .dxPanelText01Title span {
	display: table-cell;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}
.dxPanelF .dxPanelText01 .dxPanelText01Text {
	display: block;
	width: 100%;
	padding: 0 20px;
	font-size: 100%;
	font-weight: 400;
	text-align: justify;
	line-height: 1.75;
}

/* Effect */
.dxPanelFWrap > * {
	opacity: 0;
	transform: translateY(15px);
	transition: all 400ms;
}

.dxPanelFWrap > *:nth-child(1) {
	transition-delay: 0ms;
}

.dxPanelFWrap > *:nth-child(2) {
	transition-delay: 200ms;
}

.dxPanelFWrap > *:nth-child(3) {
	transition-delay: 400ms;
}

.dxPanelFWrap.dxIsScroll > * {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (max-width: 994px) {
	.dxPanelFWrap {
		padding: 30px 40px;
	}

	.dxPanelFWrap > * {
		width: 31%;
	}

	.dxPanelF .dxPanelText01 {
		font-size: 92%;
	}
}

@media screen and (max-width: 767px) {
	.dxPanelFWrap {
		display: block;
		padding: 30px 0;
		margin: 50px 15px 0 15px;
	}

	.dxPanelFWrap > * {
		width: 260px;
		margin: 0 auto;
	}

	.dxPanelFWrap > * + * {
		margin-top: 15px;
	}

	.dxPanelF .dxPanelText01 {
		font-size: 110%; /* 18px */
	}
	.dxPanelF .dxPanelText01 .dxPanelText01No {}
	.dxPanelF .dxPanelText01 .dxPanelText01Title {}
	.dxPanelF .dxPanelText01 .dxPanelText01Text {}
}

@media screen and (max-width: 399px) {
	.dxPanelF .dxPanelText01 {
		font-size: 100%;
	}
	.dxPanelF .dxPanelText01 .dxPanelText01No {}
	.dxPanelF .dxPanelText01 .dxPanelText01Title {}
	.dxPanelF .dxPanelText01 .dxPanelText01Text {}
}

/* --- --- */
.dxBoxF {
	max-width: 840px;
	padding: 60px 0 320px 0;
	background: #e6141e url("/digital/collaboration/image/img_01.png") no-repeat center bottom 30px /308px;
	border-radius: 24px;
	margin: 120px auto 0 auto;
}

.dxBoxF .dxBoxHeadline01 {
	font-weight: bold;
	color: #fff;
	font-size: 187%; /* 30px */
	text-align: center;
}

.dxBoxF .dxBoxText01 {
	color: #fff;
	width: 480px;
	margin: 40px auto 0 auto;
}

@media screen and (max-width: 767px) {
	.dxBoxF {
		width: calc(100% - 30px);
		padding: 60px 25px 220px 25px;
		background: #e6141e url("/digital/collaboration/image/img_01.png") no-repeat center bottom /308px auto;
		margin: 60px auto 0 auto;
	}

	.dxBoxF .dxBoxHeadline01 {
		font-size: 187%; /* 30px */
	}

	.dxBoxF .dxBoxText01 {
		width: 100%;
		font-size: 3vw;
		letter-spacing: 1px;
	}
}

@media screen and (max-width: 399px) {
	.dxBoxF {
    background: #e6141e url("/digital/collaboration/image/img_01.png") no-repeat center bottom 10vw /308px auto;
		padding: 60px 25px 70vw 25px;
		background-size: 234px auto;
	}

	.dxBoxF .dxBoxHeadline01 {
		font-size: 130%;
	}

	.dxBoxF .dxBoxText01 {
		/*! width: 100%; */
	}
}

/* SectionCustomer
=========================================================================================== */
#dxCustomer {
	padding: 0 0 60px 0;
	background: #f4f5f7;
	/*! margin: 0 0 60px 0; */
}

#dxCustomer .dxSectionHead {
	background: #e6141e;
	padding: 55px 0 35px 0;
}

#dxCustomer .dxSectionBody .dxText01 {
	width: 590px;
	margin: 30px auto 0 auto;
}

@media screen and (max-width: 767px) {
	#dxCustomer .dxSectionBody .dxText01 {
		width: 100%;
		padding: 0 15px;
	}
}

/* --- --- */
.dxTermC {
	color: #c86e6e;
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
	box-sizing: border-box;
	display: inline-block;
	height: 26px;
	background: #fff;
	padding: 4px 10px 0 10px;
	border-radius: 13px;
	border: 2px solid #f08485;
	margin: 0 0.3em;
}

.dxTermC01 {
	color: #c86e6e;
	border-color: #f08485;
}

.dxTermC02 {
	color: #6386a5;
	border-color: #a0d2d7;
}

/* --- --- */
.dxBoxCWrap {
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin: 20px 0 0 0;
}

.dxBoxCWrap > * {
	width: 400px;
	margin: 0 20px;
	padding: 340px 0 0 0;
	position: relative;
}

.dxBoxC {
	width: 100%;
	height: 100%;
	background: #eee9e9;
	padding: 40px 0 45px 0;
	border: 3px solid #fff;
	border-radius: 24px;
	position: relative;
}

.dxBoxC:before {
	content: '';
	display: block;
	width: 100%;
	height: 90px;
	background: url("/digital/collaboration/image/arrow_01.png") no-repeat center top / 55px auto;
	position: absolute;
	top: -90px;
	left: 0;
}

.dxBoxC .dxTermCL {
	color: #c86e6e;
	font-weight: bold;
	font-size: 18px;
	line-height: 1;
	text-align: center;
	box-sizing: border-box;
	display: block;
	width: 150px;
	height: 32px;
	background: #fff;
	padding: 7px 10px 0 10px;
	border-radius: 16px;
	border: 2px solid #f08485;
}

.dxBoxC .dxTermCL01 {
	color: #c86e6e;
	border-color: #f08485;
}

.dxBoxC .dxTermCL02 {
	color: #6386a5;
	border-color: #a0d2d7;
}

.dxBoxC .dxBoxHeadline01 {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
}

.dxBoxC .dxBoxText01 {
	display: block;
	width: 100%;
	min-height: 168px;
	color: #323232;
	font-size: 87.5%; /* 14px */
	line-height: 175%; /* 24px */
	text-align: justify;
	width: 280px;
	margin: 0 auto;
}

.dxBoxC .dxBoxText01 b {
	font-size: 120%;
}

.dxBoxC .dxBoxfigure01 {
	width: 310px;
	margin: 10px auto 0 auto;
	transform: translateX(-15px);
}

.dxBoxC .dxBoxText02 {
	color: #323232;
	font-size: 75%; /* 12px */
	line-height: 175%; /* 21px */
	width: 280px;
	margin: 10px auto 0 auto;
}

@media screen and (max-width: 767px) {
	.dxBoxCWrap {
		display: block;
		margin: 20px 0 0 0;
	}

	.dxBoxCWrap > * {
		width: calc(100% - 30px);
		margin: 0 auto;
		padding: 340px 0 0 0;
	}

	.dxBoxCWrap > * + * {
		margin-top: 30px;
	}

	.dxBoxC {
		width: 100%;
		max-width: 400px;
		height: auto;
		min-height: 520px;
		padding: 40px 0 20px 0;
		margin: 0 auto;
	}

	.dxBoxC .dxBoxText02 {
		color: #323232;
		font-size: 75%; /* 12px */
		line-height: 175%; /* 21px */
		width: 280px;
		margin: 10px auto 0 auto;
	}
}

@media screen and (max-width: 399px) {
	.dxBoxC .dxBoxText01 {
		width: 224px;
	}
	.dxBoxC .dxBoxfigure01 {
		width: 248px;
		transform: translateX(-12px);
	}

	.dxBoxC .dxBoxText02 {
		width: 224px;
	}
}

/* --- --- */
.dxCommentC {
	width: 100%;
	padding: 70px 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
}

.dxCommentC:before {
	content: '';
	width: 110px;
	height: 110px;
	background: url("/digital/collaboration/image/img_avatar_07.png") no-repeat center center / contain;
	position: absolute;
	top: 0;
	left: -30px;
}

.dxCommentC01:before {
	background-image: url("/digital/collaboration/image/img_avatar_07.png");
}

.dxCommentC02:before {
	background-image: url("/digital/collaboration/image/img_avatar_08.png");
	left: auto;
	right: -30px;
}

.dxCommentC p {
	font-weight: bold;
	color: #5a5a5a;
	font-size: 100%; /* 16px */
	line-height: 175%; /* 28px */
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: flex-start;
	width: calc(100% - 50px);
	height: 160px;
	padding: 5px 25px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .15);
	margin: 0 0 0 auto;
	position: relative;
}

.dxCommentC02 p {
	margin: 0 0 0 0;
}

.dxCommentC p > span {
	display: block;
	width: 100%;
}

.dxCommentC p > span + span {
	margin-top: 1em;
}

@media screen and (max-width: 994px) {
	.dxCommentC p {
		font-size: 92%; /* 15px */
		line-height: 175%; /* 28px */
		padding: 5px 15px;
	}
}

@media screen and (max-width: 767px) {
	.dxCommentC {
		max-width:  420px;
		left: 50%;
		transform: translateX(-50%);
	}

	.dxCommentC p {
		padding: 5px 25px;
	}
}

@media screen and (max-width: 399px) {
	.dxCommentC p {
		padding: 5px 20px;
	}
}

/* SectionHow
=========================================================================================== */
#dxHow{
	background: url("/digital/collaboration/image/how_bg-pc.jpg") no-repeat 0 0;
	background-size: cover;
  margin-bottom: 10vw;
	padding: 4vw 0;
}

#dxHow .dxBox01 {
	max-width: 834px;
	margin: 0 auto;
	display: flex;
	flex-flow:row nowrap;
	justify-content: space-between;
	align-items: center;
}

#dxHow .dxBox01 .dxBox01_textbox{
	width: 33%;
}

#dxHow .dxBox01 .dxBox01_textbox h2 {
	font-weight: bold;
	color: #323232;
	font-size: 140%; /* 18px */
	line-height: 1;
	background: none;
	letter-spacing: 1px;
	margin-bottom: 2vw;
}

#dxHow .dxBox01 .dxBox01_textbox p {
	color: #323232;
	font-size: 100%; /* 12px */
	line-height: 175%; /* 21px */
}

#dxHow .dxBox01 .dxBox01_linkbox{
	width: 58%;
	position: relative;
}

#dxHow .dxBox01 .dxBox01_linkbox a:after{
	content: "";
	position: absolute;
	background: url("/digital/collaboration/image/icon_more.png") no-repeat 0 0;
	background-size: contain;
	width:12vw;
	height:1vw;
	right:1vw;
	bottom:1.5vw;
}

#dxHow .dxBox01 .dxBox01_linkbox .collabo__anc {
	display: block;
	overflow: hidden;
	position: relative;
	border-radius: 10px;
	background: #fff;
	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, .15);
  overflow: hidden;
}

#dxHow .dxBox01 .dxBox01_linkbox .collabo__anc span {
	color: #333;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.02em;
	line-height: 1.58;
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	top: 50%;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

#dxHow .dxBox01 .dxBox01_linkbox .collabo__anc img {
	transition: transform 300ms;
}
#dxHow .dxBox01 .dxBox01_linkbox .collabo__anc:hover img {
	transform: scale(1.2, 1.2);
	opacity: .5;
}

@media screen and (max-width: 767px) {
	#dxHow{
		background: url("/digital/collaboration/image/how_bg-sp.jpg") no-repeat 0 0;
		background-size: cover;
		margin-bottom: 30vw;
		padding: 15vw 0 10vw 0;
	}

	#dxHow .dxBox01 {
		width: 90%;
		flex-flow:column;
	}

	#dxHow .dxBox01 .dxBox01_textbox{
		width: 85%;
		margin: 0 0 11vw 0;
	}

	#dxHow .dxBox01 .dxBox01_textbox h2 {
		font-size: 5vw;
		line-height: 1;
		letter-spacing: 1px;
		margin: 0 0 2vw 0;
	}

	#dxHow .dxBox01 .dxBox01_textbox p {
		color: #323232;
		font-size: 100%; /* 12px */
		line-height: 175%; /* 21px */
	}

	#dxHow .dxBox01 .dxBox01_linkbox{
		width: 100%;
	}
	
	#dxHow .dxBox01 .dxBox01_linkbox .collabo__anc span {
		font-size: 5vw;
	}
	
	#dxHow .dxBox01 .dxBox01_linkbox a:after{
		width:30vw;
		height:3vw;
		right:2vw;
		bottom:3vw;
	}

	#dxHow .dxBox01 .dxBox01_linkbox .collabo__anc:hover img {
		transform: none;
		opacity: 1;
	}

	#dxHow .collabo__anc span {
		font-size: 3.2vw;
	}
}

.dxCustomMt {
	margin-top: 10vw;
}

@media screen and (max-width: 767px) {
	.dxCustomMt {
		margin-top: 30vw;
	}
}