/* home
----------------------- */

.home-catch{
	position: relative;
	color: #fff;
	text-align: center;
	margin-bottom: 17vw;
}
.home-catch .key-wrap{
	/*background: url("../img/home-visual.jpg") center center no-repeat;*/
	/*background: url("../img/69319255_350590869179010_4181685914365329408_n_1.jpg") center center no-repeat;*/
	background: url("../img/top01.jpg") center center no-repeat;
	background-size: cover;	
}

/*追加*/
.home-catch .key-wrap-servicedetails{
	background: url("../img/home-ec.key.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}

.home-catch .key-wrap-contentmarketing{
	background: url("../img/home-cm.key.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}

.home-catch .key-wrap-analysis{
	background: url("../img/home-an.key.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}
.home-catch .key-wrap-correlation{
	background: url("../img/home-cr.key.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}
.home-catch .key-wrap-operation{
	background: url("../img/home-op.key.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}
.home-catch .key-wrap-totalmarketing{
	background: url("../img/home-em.key.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}
.home-catch .key-wrap-totalmarketing_01{
	background: url("../img/home-em.key_01.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}
.home-catch .key-wrap-totalmarketing_02{
	background: url("../img/home-em.key_02.jpg") center center no-repeat;
	background-size: cover;
	color: #4e6b77;
}
/*追加おわり*/

.home-catch .name{
	position: absolute;
	opacity: 0;
}
.home-catch .key-wrap span{
	display: block;
	font-size: 13vw;
	height: 36vw;
	line-height: 36vw;
	font-weight: 900;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	letter-spacing: 0.1em;
	color: #fff;	
}

/*追加*/
.home-catch .key-wrap-servicedetails span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 20vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
.home-catch .key-wrap-contentmarketing span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 25vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
.home-catch .key-wrap-analysis span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 25vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
.home-catch .key-wrap-correlation span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 25vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
.home-catch .key-wrap-operation span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 25vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
.home-catch .key-wrap-totalmarketing span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 25vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
.home-catch .key-wrap-totalmarketing_01 span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 25vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
.home-catch .key-wrap-totalmarketing_02 span{
	display: block;
	font-size: 7vw;
	height: 25vw;
	line-height: 25vw;
	font-weight: 600;
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
	letter-spacing: 0.1em;
}
/*追加おわり*/

.home-catch .key-wrap  hr{
	position: relative;
	margin: 0;
	border:none;
	border-top: 1.8vw #fff solid;
}
.home-catch .key-wrap  hr::after{
	content: "";
	height: 6.4vw;
	border-left: 1.8vw #fff solid;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0%);
	margin-top: -4.1vw;
}
.home-catch .closer{
	display: block;
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 600;
	line-height: 14vw;
	color: #000;
	padding: 3vw 1vw 3vw 1vw;
}

/*追加*/
.home-catch .closer-servicedetails{
	display: block;
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 900;
	line-height: 10vw;
	color: #000;
	font-size: 1.3em;
	padding: 1em;
}

.home-catch .closer-servicedetails-endmessage{
	display: block;
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 100;
	line-height: 10vw;
	color: #4e6b77;
	font-size: 0.55em;
	padding: 1em;
}

/*追加おわり*/

.home-catch::after{
	display: block;
	content: "";
	width: 8vw;
	height: 8vw;
	
	position: absolute;
	bottom: -12vw;
	
	border-left: 1px solid #00a7e8;
	border-bottom: 1px  solid #00a7e8;
	transform: rotate(-45deg);
	left: 50%;
	margin-left: -4vw;
}
#home-news{
	margin-top: 12vw;
}
#home-about{
	margin-top: 20vw;
	margin-bottom: 20vw;
	text-align: center;
}

#home-about h3 img{
	width: 60%;
}
#home-about h3 span{
	display: block;
	color: #000;
	font-size: 3.6vw;
	font-weight: normal;
}
#sect-media,
#sect-consulting,
#sect-marketing{
	margin-top: 5vw;	
}

/* parts
----------------------- */
.temp-head{
	background: #0081cd;
	color: #fff;
	padding: 5vw;
}
.temp-head h1{
	color: #fff;
	margin: 0;
	font-size: 6vw;
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 800;
}
.content-body{
	padding: 7vw 7vw 11vw 7vw;
}
.content-body > section{
	margin-bottom: 20vw;
}
.content-body h2{
	text-align: left;
	background: url("../img/blet.cross.reverse.svg") left center no-repeat;
	background-size: 5vw;
	padding:4vw 0 4vw 8vw;
}
.content-body p{
	margin-bottom: 10vw;
}
.accordion{
	position: relative;
	border-bottom: 1px solid #ddd;
}
.accordion::after{
	display: block;
	content: "";
	width: 8vw;
	height: 8vw;
	background: url("../img/icon.cross.svg") center center no-repeat;
	background-size: 100%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}
.accordion-body{
	display: none;
}
.accordion.open{
	border: none;
}
.accordion.open::after{
	display: none;
}

.col-col{
	
}
.box-profile{
	position: relative;
	background: #f9f9f9;
	border-radius: 5px;
	padding: 5vw;
	margin-bottom: 5vw;
}
.box-profile figure{
	float: left;
	margin: 0 5vw 5vw 0;
}
.box-profile h4{
	font-size: 3.6vw;
	line-height: 1.2em;
	margin-bottom: 4vw;
	color: #4e6b77;
}
.box-profile h3{
	font-size: 7.6vw;
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 300;
	margin-bottom: 8vw;
}
.table-dl dl{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	border-top: 1px solid #ddd;
}
.table-dl dl dt{
	padding: 3vw 3vw 0 3vw;
	font-weight: bold;
}
.table-dl dl dd{
	padding: 3vw;
	border-bottom: 1px solid #ddd;
	font-size: 3.6vw;
	line-height: 1.4em;
}
.right{
	float: right;
}
.left{
	float: left;
}
.clear{
	display: block;
	content: "";
	clear: both;
	
}
.caption{
	font-size: 3.6vw;
}
.require{
	font-size: 3vw;
	font-weight: normal;
	margin-left: 2vw;
	color: #C08414;
}
.blet-list li{
	position: relative;
	padding-left:5vw;
	line-height: 1.4em;
	margin: 1vw 0;
}
.blet-list li .blet{
	position: absolute;
	left: 0;
}
.btn{
	display: block;
	background: #0081cd;
	color: #fff;
	line-height: 10vw;
	text-align: center;
}

/*追加*/
.btn-contact{
	display: block;
	background: #ffba00;
	color: #433000;
	line-height: 13vw;
	text-align: center;
	font-size: 1.3em;
	font-weight:900;
}
/*追加おわり*/

.forms .caution{
	text-align: center;
	padding: 2vw;
	font-size: 3vw;
	margin-bottom: 0;
}
.forms .action{
	display: flex;
	justify-content: center;
}
.forms .action li{
	margin: 0 2vw;
	min-width: 120px;
}
h2.ttl-plus{
	font-size: 8vw;
	text-align: center;
	margin: 15vw 0 15vw;
}
h2.ttl-plus span{
	display: inline-block;
	padding: 1vw 3vw 0 9vw;
	background: url("../img/element.svg") left bottom no-repeat;
	background-size: 6vw auto;
	letter-spacing: 0.08em;
}

figure.mock-up{
	background: url("../img/bg.shadow.jpg") center  bottom no-repeat;
	background-size: 100% auto;
	padding: 0 17.5vw;
}
figure.mock-up img{
	width: 150px;
}
figure.mock-up02 img{
	width: 250px;
}


.UI-mock-up {
	margin: 10vw 0;
}
.UI-mock-up h3{
	color: #4e6b77;
	position: relative;
	padding: 5vw 17.5vw;
	font-weight: normal;
}
.UI-mock-up h3 img{
	width: 100%;
}
.UI-mock-up.small{
	display: flex;
	align-items: center;
}
.UI-mock-up.small figure{
	width: 50%;
	padding: 0 14vw;
}
.UI-mock-up.small h3{
	padding: 0;
	color: #000;
	font-size: 3.6vw;
	width: 50%;
}
.UI-layered{
	position: relative;
	background-size: cover;
	background-position: center center;
	color: #fff;
	padding: 7vw 0 7vw 8.5vw;
	margin: 10vw 0;
}
.UI-layered::before{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100,000000+100&0.5+0,0.02+100 */
	background: -moz-linear-gradient(45deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#05000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.UI-layered > *{
	position: relative;
}
.UI-layered h3{
	color: #4e6b77;
	background: #fff;
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 300;
	font-style: normal;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeeef+0,ffffff+100 */
	background: rgb(234,238,239); /* Old browsers */
	background: -moz-linear-gradient(45deg, rgba(234,238,239,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(234,238,239,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(234,238,239,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeeef', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	padding: 3vw 5vw;
	text-shadow: 1px 1px 0 #fff;
}
.UI-layered p{
	padding: 5vw;
}
.UI-image-text{
	display: flex;
	justify-content: space-between;
	margin: 5vw 0;
}
.UI-image-text figure{
	width: 48%;
	padding: 0 0 0 3vw;
}
.UI-image-text figure img{
	width: 100%;
}
.UI-image-text .txt{
	width: 48%;
	color: #000;
}
.UI-image-text h3{
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 300;
	font-style: normal;
	padding-top: 5vw;
	padding-bottom: 5vw;
	font-size: 5.7vw;
	line-height: 1.6em;
	color: #4e6b77;
}
.UI-image-text h3::after{
	right: 2vw;
}
.UI-image-text p{
	padding-right: 5vw;
	line-height: 1.6em;
}
.UI-image-text.right{
	flex-direction: row-reverse;
	padding-right: 3vw;
}
.UI-image-text.right figure{
	padding: 0;
}
.UI-image-text.right figure::before{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100,000000+100&0.5+0,0.02+100 */
	background: -moz-linear-gradient(45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#05000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.UI-image-text.right figure::after{
	border-color: #fff;
}
.UI-image-text.right .txt{
	padding-left: 8vw;
}
.UI-image-text.right .txt p{
	padding-right: 0;
}
.article-list {
	border-top: 1px solid #ddd;	
}
.article-list li{
	border-bottom: 1px solid #ddd;
}
.article-list article{
	display: flex;
	padding: 3vw;
	align-items: center;
	flex-wrap: wrap;
}
.article-list article time{
	display: block;
	width: 100%;
	color: #777;
	padding-left: 2vw;
	font-size: 3.6vw;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 2vw;
}
.article-list article figure{
	width: 30%;
}
.article-list article figure img{
	width: 100%;
}
.article-list article h3{
	width: 70%;
	font-weight: normal;
	font-size: 3.6vw;
	color: #000;
	line-height: 1.5em;
	padding-left: 3vw;
	padding-right: 8vw;
}
.in-transition{
	opacity: 0;
	transition: all 1s ease 0s;
	position: relative;
	top: 5vw;
	transform: scale(0.8);
}
.in-ani{
	opacity: 1;
	top: 0;
	transform: scale(1);
}

.more{
	display: block;
	text-align: right;
	padding-right: 10vw;
	margin: 3vw 0;
}

/* 2019.08.23 拡張
------------------- */
.img-full-sp,
.img-full{
	width: 100%;
	height: auto;
}
.logolist{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.logolist li{
	width: 50%;
	padding: 1vw 2vw;
}
.logolist li img{
	width: 100%;
	height: auto;
}


.image-box-list{
}
.image-box-list .image-box{
	width: 100vw;
	left: -7vw;
	position: relative;
	background: #000;
	color: #fff;
	overflow: hidden;
	padding: 7vw;
	margin-bottom: 1vw;
}
.image-box-list .image-box > *{
	position: relative;
}
.image-box-list .image-box figure{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.image-box-list .image-box img.bg{
	position: absolute;
	opacity: 0.5;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.image-box-list .image-box h3{
	margin-bottom: 7vw;
	font-family: kozuka-gothic-pro, sans-serif;
	font-weight: 800;
	font-size: 6vw;
	line-height: 1.3em;
	border-bottom: 1px solid #fff;
	padding-bottom: 3vw;
}
.image-box-list .image-box  p{
	margin-bottom: 0;
}
h3.ttl-normal{
	font-size: 7vw;
	padding: 10vw 0;
	text-align: center;
}
.icon-box-list{
	
}
.icon-box-list .icon-box{
	border: 4px solid #ddd;
	margin-bottom: 5vw;
	padding: 7vw;
	text-align: center;
	background: #f9f9f9;
}
.icon-box-list .icon-box h3{
	margin-bottom: 4vw;
}
.icon-box-list .icon-box figure{
	display: inline-block;
	border-radius: 2vw;
	overflow: hidden;
	box-shadow: 0px 0px 5vw rgba(0,0,0,0.1);
	margin-bottom: 6vw;
}
.icon-box-list .icon-box ul{
	text-align: left;
}


ul.normal li{
	position: relative;
	padding-left: 4.5vw;
	line-height: 1.2em;
	margin: 2.4vw 0;
}
ul.normal li::before{
	content: "・";
	position: absolute;
	left: 0;
	
}