@charset "UTF-8";

/*コンテンツ背景色*/

a[id^="feature"]+section:before{
	position: absolute;
	display: block;
	content: "";
	top: 0;
	width: 85%;
	height: 100%;
	background: #f7f7f7;
	pointer-events: none;
}
#feature+section:before{
	right: 0;
}
#feature+section{
	margin-bottom: 150px;
}
@media screen and (max-width: 800px){
	#feature+section{
		margin-bottom: 100px;
	}
}

/*コンテンツ　丸デザイン背景*/

#feature1+section,
#feature+section{
	overflow: visible;
}
#feature+section:after,
#feature1+section:after{
	position: absolute;
	display: block;
	content: "";
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}
#feature+section:after{
	top: -40%;
	left: -5%;
	width: 400px;
	height: 400px;
	border: 150px solid #f6ba02;
	border-radius: 54% 46% 46% 54% / 43% 44% 56% 57%;
	animation: move11 5s linear infinite;
}
@keyframes move11 {
  50% {
	border-radius: 54% 46% 54% 46% / 38% 55% 45% 62%;
  }

  75% {
	border-radius: 54% 46% 46% 54% / 43% 44% 56% 57%;
  }
}

#feature1+section:after{
	top: -30%;
	right: -5%;
	width: 600px;
	height: 600px;
	background: #f6ba02;
	border-radius: 51% 40% 40% 52% / 35% 40% 59% 55%;
	animation: move012 6s linear infinite; 
}
@keyframes move012{
  50% {
	border-radius: 64% 89% 85% 52% / 70% 57% 88% 55%;
  }

  75% {
	border-radius: 73% 89% 100% 52% / 100% 99% 88% 63%;
  }
}
@media screen and (max-width: 1400px){
	#feature+section:after{
		width: 300px;
		height: 300px;
		border: 100px solid #f6ba02;
	}
	#feature1+section:after{
		width: 400px;
		height: 400px;
	}
}
@media screen and (max-width: 650px){
	#feature+section:after{
		width: 200px;
		height: 200px;
		border: 80px solid #f6ba02;
		left: -25%;
	}
	#feature1+section:after{
		width: 200px;
		height: 200px;
	}
}

/*画像の動き*/
a[id^="feature"]+section .inner_item_img{
	overflow: hidden;
}
a[id^="feature"]+section .inner_item_img img{
	transform: translateY(-10%) scale(1.1);
	transform-origin: 50% 0;
}
a[id^="feature"]+section.trigger .inner_item_img img{
	transition: 0.8s ease-in-out;
	transform: translateY(0) scale(1.1);
}

/*テキストコンテンツ デザイン*/
#sum+.contents_box01:before{
	position: absolute;
	display: block;
	bottom: -60px;
	pointer-events: none;
	content: "LOGO DESIGN Dezart";
	font-size: 12rem;
	font-weight: 600;
	right: -15px;
	color: #ffd700;
}
#sum+.contents_box01.trigger:before{
	animation: txt_slide 1s ease-in-out forwards;
}
@keyframes txt_slide{
	0% {
		transform: translateX(200px);
	}
	100% {
		transform: translateX(0px);
	}
}
@media screen and (max-width: 900px){
	#sum+.contents_box01:before{
		font-size: 9vw;
		right: -5px;
		bottom: -15px;
	}
}