@charset "utf-8";

.main_img{
	margin: 0 auto;
	text-align: center;
}

.swiper-container{
  max-width: 980px;
  margin: 0 auto;
}

.swiper-slide figure{
	display: flex;
	margin: 0;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.swiper-slide figure figcaption{
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	background: #d9d9d9;
	width: 50%;
	padding: 40px;
}

.swiper-slide figure figcaption *{
	width: 100%;
	display: block;
}

.swiper-slide figure figcaption p{
	line-height: 1.8;
	font-size: 1.5vw;
}

.swiper-slide figure figcaption em{
	font-size: 19px;
	margin-bottom: 20px;
	font-weight: bold;
}

.swiper-container{
	overflow: visible;
}

.swiper-pagination{
	bottom: -30px !important;
}

.clm2{
	max-width: 980px;
	margin: 100px auto 0 auto;
	display: flex;
	justify-content: space-between;
}

.clm2 div{
	width: 45%;
}

.clm2 div h2{
	font-size: 30px;
	font-weight: bold;
	padding: 0 0 25px 20px;
	background: url('../img/border.png') left bottom no-repeat;
}

.clm2 div h2 + p{
	text-align: right;
	color: #666;
	margin-top: 10px;
}

.clm2 div figure{
	text-align: center;
	height: 300px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.clm2 div figure figcaption{
	width: 100%;
	align-self: flex-end;
}

.clm2 div figure figcaption a{
	width: 80%;
	font-size: 20px;
	line-height: 1.3;
	display: block;
	color: #fff;
	text-align: center;
	border-radius: 40px;
	margin: 0 auto;
	padding: 10px 20px;
	background: rgba(0,160,233,1) ;
	background: linear-gradient(90deg, rgba(82,74,184,1) 0%, rgba(0,160,233,1) 100%);
}

.clm2 div figure figcaption a:hover{
	background: linear-gradient(90deg, rgba(82,74,184,0.5) 0%, rgba(0,160,233,0.5) 100%);
}

.examples{
	max-width: 980px;
	margin: 60px auto 0 auto;
}

.examples h2{
	font-size: 30px;
	font-weight: bold;
	padding: 0 0 25px 20px;
	background: url('../img/border.png') left bottom no-repeat;
}

.examples h2 + p{
	text-align: right;
	color: #666;
	margin-top: 10px;
}

.examples .wrap{
	display: flex;
	flex-wrap: wrap;
}

.examples .wrap div{
	width: 33%;
	position: relative;
}

.examples .wrap div.cntr:before{
  content: '';
  position: absolute;
  left: -35px;
  top: 50%;
  display: inline-block;
  width: 70px;
  height: 2px;
  transform: rotate(90deg);
  background-color: #666;
}

.examples .wrap div.cntr:after{
  content: '';
  position: absolute;
  right: -35px;
  top: 50%;
  display: inline-block;
  width: 70px;
  height: 2px;
  transform: rotate(90deg);
  background-color: #666;
}

.examples .wrap div a{
	display: block;
	text-align: center;
	padding: 20px 0;
}

.examples .wrap div a:hover{
	background: #f1f1f1;
}

.examples .wrap div a figure{
	margin: 0;
}

.examples .wrap div a figure figcaption{
	margin-top: 20px;
}

.examples .wrap div a h3{
	text-align: center;
	font-size: 23px;
	margin-top: 10px;
}

.news{
	max-width: 980px;
	margin: 100px auto 0 auto;
	padding-bottom: 60px;
}

.news h2{
	font-size: 30px;
	font-weight: 500;
	padding: 0 0 25px 20px;
	background: url('../img/border.png') left bottom no-repeat;
	margin-bottom: 20px;
}

.news h2 + p{
	text-align: right;
	color: #666;
	margin-top: 10px;
	margin-bottom: 20px;
}

.news ul li{
	border-bottom: solid 1px #ccc;
	padding: 10px;
}

.news ul li span{
	display: block;
	color: #999;
	font-size: 14px;
}

.news ul li p{
	margin: 0;
}

.media {
	max-width: 980px;
	margin: 60px auto 0 auto;
}

.media h2{
	margin-top: 40px;
	font-size: 30px;
	font-weight: 500;
	padding: 0 0 25px 20px;
	background: url('../img/border.png') left bottom no-repeat;
}

.media ul{
	margin-top: 20px;
	display: flex;
	justify-content: space-around;
}

.media ul li{
	cursor:pointer;
	width: 31%;
}

.media ul li figure{
	text-align: center;
}

.media ul li figure img{
	display: block;
	transition: .3s;
}

.media ul li:hover figure img{
	transform: scale(1.1);

}

.media ul li figure figcaption{
	margin-top: 10px;
	font-size: 16px;
}

/** twitter **/
.SandboxRoot.env-bp-660 .timeline-Tweet-actions, 
.SandboxRoot.env-bp-660 .timeline-Tweet-media,
.SandboxRoot.env-bp-660 .timeline-Tweet-text, 
.SandboxRoot.env-bp-820 .timeline-Tweet-actions, 
.SandboxRoot.env-bp-820 .timeline-Tweet-media, 
.SandboxRoot.env-bp-820 .timeline-Tweet-text,
.SandboxRoot.env-bp-970 .timeline-Tweet-text{
	font-size: 16px !important;
	line-height: 1.3 !important
}

.SandboxRoot.env-bp-660 .timeline-Tweet-actions, .SandboxRoot.env-bp-660 .timeline-Tweet-media, .SandboxRoot.env-bp-660 .timeline-Tweet-text, .SandboxRoot.env-bp-820 .timeline-Tweet-actions, .SandboxRoot.env-bp-820 .timeline-Tweet-media, .SandboxRoot.env-bp-820 .timeline-Tweet-text{
	margin-left: 0;
}

.SandboxRoot.env-bp-970 .TweetAuthor-avatar,
.TweetAuthor,
.Avatar,
.timeline-Tweet-brand,
.timeline-Tweet-actions,
.timeline-Footer,
.SandboxRoot.env-bp-660 .TweetAuthor-avatar, 
.SandboxRoot.env-bp-820 .TweetAuthor-avatar{
	display: none !important;
}

.timeline-Tweet-text{
	margin-bottom: 0 !important;
}

.SandboxRoot.env-bp-970 .timeline-Tweet-actions, .SandboxRoot.env-bp-970 .timeline-Tweet-media, .SandboxRoot.env-bp-970 .timeline-Tweet-text{
	margin-left: 0 !important;
	float: left;
    width: 90%;
}

.timeline-Tweet-timestamp{
	line-height: 1;
}
.timeline-Tweet-metadata{
	margin-top: 0;
}
.timeline-Tweet{
	padding-bottom: 0;
}



@media only screen and (min-width: 1245px){

.swiper-slide figure figcaption p{
	line-height: 1.8;
	font-size: 16px;
}

}

@media only screen and (max-width: 768px){
	.swiper-slide figure figcaption{
		padding: 10px;
		width: 50%;
	}
	.swiper-slide figure div{
		width: 50%;
	}
	.swiper-slide figure figcaption p br{
		display: none;
	}
	.swiper-slide figure figcaption em{
		font-size:11px;
		margin-bottom: 5px;
		font-weight: 900;
	}
	.swiper-slide figure figcaption p{
		font-size: 9px;
		line-height: 1.5;
	}
	.clm2 div h2,
	.examples h2,
	.news h2{
		font-size: 18px;
		padding-bottom: 15px;
	}
	.clm2 div h2 + p,
	.examples h2 + p,
	.news h2 + p{
		margin-top: 0;
		font-size: 10px;
	}
	.clm2{
		display: block;
		margin-top: 50px;
	}
	.clm2 div{
		width: 90%;
	    margin: 0 auto 60px auto;
	}
	.examples{
		width: 90%;
	}
	.examples .wrap div{
		width: 48%;
	}
	.examples .wrap div a{
		padding: 20px;
	}

	.examples .wrap div.cntr:before{
	display: none;
	}
	.examples .wrap div:nth-child(even):before{
	  content: '';
	  position: absolute;
	  left: -35px;
	  top: 50%;
	  display: inline-block;
	  width: 70px;
	  height: 2px;
	  transform: rotate(90deg);
	  background-color: #666;
	}
	.examples .wrap div.cntr:after{
		display: none;
	}
	.examples .wrap div a h3{
		font-size:16px;
		margin-top: 5px;
	}
	.examples .wrap div a figure figcaption{
		margin-top: 10px;
	}
	.examples .wrap div a figure figcaption span{
		font-size: 11px;
    	display: inline-block;
    	line-height: 1.2;
    	text-align: center;
	}

	.clm2 div figure figcaption a{
		font-size:16px;
	}

	.news{
		width: 90%;
		margin: 50px auto 0 auto;	
	}

	/** twitter **/
	.SandboxRoot.env-bp-550 .timeline-Tweet-actions, .SandboxRoot.env-bp-550 .timeline-Tweet-media, .SandboxRoot.env-bp-550 .timeline-Tweet-text{
		font-size: 14px !important;
		line-height: 1.3 !important
	}

	.Avatar,
	.TweetAuthor-avatar{
		display: none !important;
	}

	.timeline-Tweet-text{
		margin-bottom: 0 !important;
	}

	.timeline-Tweet-media,
	.timeline-Tweet-text{
		margin-left: 0 !important
	}

	.timeline-Tweet-timestamp{
		line-height: 2;
	}

.timeline-Tweet-metadata{
	margin-top: -20px;
}

.media h2{
	font-size: 18px;
	font-weight: 500;
	padding: 0 0 15px 20px;
	background: url('../img/border.png') left bottom no-repeat;
}

.media ul{
	margin-top: 40px;
	display: block;
	justify-content: space-between;
	padding: 0 20px;
}

.media ul li{
	margin-top: 40px;
	cursor:pointer;
	width: 100%;
}

}