@charset "utf-8";

.header {
	z-index:9999;
}

svg {
	max-width:100%;
	display:block;
}

img[src$=".svg"] {
    width: 100%;
}


/* vegas slider */


#slidebox {
	width:100%;
	height:650px;
	background:#CCC;
	position:relative;
	margin:0 0 100px;
}

@media screen and (min-width: 1600px){
	#slidebox {
		height:800px;
	}
}


#cleation2018 #slidebox #titlebg {
	position:absolute;
	top:0;
	left:0;
	background: linear-gradient(
		-45deg,
		rgba(255,255,255,0) 25%,
		rgba(102,102,102,0.3) 25%,
		rgba(102,102,102,0.3) 50%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0) 75%,
		rgba(102,102,102,0.3) 75%,
		rgba(102,102,102,0.3)
	);
	width:100%;
	height:100%;
	background-size: 5px 5px;
	background-attachment: fixed;
}

#cleation2018 #slidebox #titles {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:99;
}

#slidebox [data-ca3_iconfont="ETmodules"]::before {
    font-family: "ETmodules";
}
[data-ca3_icon]::before {
    font-weight: normal;
    content: attr(data-ca3_icon);
}

.ca3-scroll-down-arrow {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
    background-size: contain;
    background-repeat: no-repeat;
}

.ca3-scroll-down-link {
  cursor:pointer;
    height: 40px;
    width: 60px;
    margin:0 0 0 -20px;
    line-height: 60px;
    position: absolute;
    left: 50%;
    bottom: 0;
	transform:translateX(-50%);
    color: #FFF;
    text-align: center;
    font-size: 70px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);

    -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
    -moz-animation:    ca3_fade_move_down 2s ease-in-out infinite;
    animation:         ca3_fade_move_down 2s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes ca3_fade_move_down {
  0%   { -webkit-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px); opacity: 0; }
}
@-moz-keyframes ca3_fade_move_down {
  0%   { -moz-transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px); opacity: 0; }
}
@keyframes ca3_fade_move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}




/* clearfix
--------------------------------------------------------------------*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}/*IE7用*/

/* Hides from IE-mac \*/
* html .clearfix { height:1%;}
.clearfix { display:block;}
/* End hide from IE-mac */


/*-------------------------------------------------------------------
	クリエイション2018
-------------------------------------------------------------------*/

#cleation2018 {
	padding:0 0 150px;
}


/* メインスライダー */

#slider {
	overflow:hidden;
	zoom:1;
	position:relative;
	margin:0 0 100px;
}

#slider ul,
#slider ul li,
#slider ul li img {
	width:100%;
}

#slider .bx-wrapper .bx-viewport,
.slide .bx-wrapper .bx-viewport {
	border:none !important;
	left:0 !important;
	background:none !important;
}

#slider .bx-wrapper,
.slide .bx-wrapper {
	margin: 0 auto !important;
	padding:0 !important;
}


.slowimg {
	display:none;
}

#slider #titlebg {
	position:absolute;
	top:0;
	left:0;
	background: linear-gradient(
		-45deg,
		rgba(255,255,255,0) 25%,
		rgba(102,102,102,0.3) 25%,
		rgba(102,102,102,0.3) 50%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0) 75%,
		rgba(102,102,102,0.3) 75%,
		rgba(102,102,102,0.3)
	);
	width:100%;
	height:800px;
	background-size: 5px 5px;
	background-attachment: fixed;
}

#slider #titles {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:99999;
}

#cleation2018 .inner {
	width:1024px;
	margin:0 auto 150px;
}

#cleation2018 .inner .boxs {
	position:relative;
	margin:0 0 80px;
}

#cleation2018 .inner .boxs.special {
	position:relative;
	margin:0 0 80px;
	padding:40px 0 0;
}

#cleation2018 .inner .boxs .left {
	width:700px;
	float:left;
}

#cleation2018 .inner .boxs .right {
	width:700px;
	float:right;
}

#cleation2018 .inner .animate01 {
	text-align:right;
	padding:0 50px 0 0;
}

#cleation2018 .inner .animate02 {
	margin:20px 0 50px;
}

#cleation2018 .contimg01 {
	margin:0 0 100px;
}

#cleation2018 .contimg01 img,
#cleation2018 .contimg02 img {
	width:100%;
}

#cleation2018 .endlogo {
	max-width:90%;
	margin:150px auto 0;
	text-align:center;
}

#cleation2018 .endlogo img {
	max-width:350px;
}



#cleation2018 .inner .same .lefts {
	width:480px;
	float:left;
	position:relative;
	text-align:right;
}

#cleation2018 .inner .same .rights {
	width:480px;
	float:right;
	position:relative;
	padding-top:300px;
}


/* svg（大きさ） */

#cleation2018 .inner .boxs .svg01 {
	width:700px;
	/*height:500px;*/
	position:absolute;
	top:20px;
	right:20px;
	z-index:999;
}



#cleation2018 .inner .boxs .svg02 {
	width:700px;
	/*height:500px;*/
	position:absolute;
	top:-20px;
	left:20px;
	z-index:999;
}

#cleation2018 .inner .same .lefts .svg03 {
	width:400px;
	/*height:650px;*/
	position:absolute;
	top:20px;
	right:20px;
	z-index:99;
}


#cleation2018 .inner .same .rights .svg04 {
	width:400px;
	/*height:650px;*/
	position:absolute;
	top:270px;
	left:20px;
	z-index:99;
}


/* svg(動き) */

#cleation2018 .inner .boxs .cls-1{
	fill:none;
	stroke: #ffe3c1;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

#cleation2018 .inner .boxs .cls-2{
	fill:none;
	stroke: #b2eccd;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

#cleation2018 .inner .boxs .cls-3{
	fill:none;
	stroke: #ffddfd;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

#cleation2018 .inner .boxs .cls-4{
	fill:none;
	stroke: #a5dfff;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

#cleation2018 .inner .boxs .cls-5{
	fill:none;
	stroke: #ffe3c1;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

#cleation2018 .inner .boxs .cls-6{
	fill:none;
	stroke: #caa9ff;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

#cleation2018 .cls-7{
	fill:none;
	stroke: #b2eccd;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}

#cleation2018 .cls-8{
	fill:none;
	stroke: #ffe684;
	stroke-miterlimit: 10;
	stroke-width: 3px;
}


#cleation2018 .anime{
	stroke-dasharray:2400 2402;
	stroke-dashoffset:2401;
	animation:animeation_draw /*4000ms*/2000ms linear 0ms forwards;
}


@keyframes animeation_draw{
	100%{
		stroke-dashoffset:0;
		}
}
@keyframes animeation_fade{
	0%{
		stroke-opacity:1;
	}
	94.44444444444444%{
		stroke-opacity:1;
	}
	100%{
		stroke-opacity:0;
	}
}


/*-------------------------------------------------------------------
	fadeの設定
-------------------------------------------------------------------*/

.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:2s;
	-ms-animation-duration:2s;
	animation-duration:2s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(50px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 	0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fade2 {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}

@-webkit-keyframes fade2 {
	0% { opacity: 0; }
 	100% { opacity: 1; }
}
@keyframes fade2 {
 	0% { opacity: 0; }
 	100% { opacity: 1; }
}



/* -------------------------------- ここからレスポンシブ設定 -------------------------------- */

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	
	#cleation2018 {
		padding:0 0 100px;
	}

	#cleation2018 .inner {
		width:94%;
		margin:0 auto 100px;
	}	
	
	#cleation2018 .inner .boxs.special {
		margin:0 0 80px;
		padding:0;
	}
	
	#cleation2018 .inner .boxs .left {
		width:auto;
		float:none;
	}

	#cleation2018 .inner .boxs .right {
		width:auto;
		float:none;
	}

	#cleation2018 .inner .animate01 {
		padding:0;
	}

	#cleation2018 .contimg01 {
		margin:0 0 100px;
	}

	#cleation2018 .contimg01 img,
	#cleation2018 .contimg02 img {
		width:100%;
	}

	#cleation2018 .endlogo {
		max-width:70%;
		margin:100px auto 0;
		text-align:center;
	}

	#cleation2018 .inner .same .lefts {
		width:auto;
		float:none;
		text-align:center;
		margin:0 0 30px;
	}


	#cleation2018 .inner .same .rights {
		width:auto;
		float:none;
		text-align:center;
		padding-top:0;
	}
	
	
	/* svg（大きさ） */

	#cleation2018 .inner .boxs .svg01 {
		width:100%;
		height:auto;
		top:-2%;
		right:-2%;
	}

	#cleation2018 .inner .boxs .svg02 {
		width:100%;
		height:auto;
		top:auto;
		left:-2%;
		bottom:-2%;
	}

	#cleation2018 .inner .same .lefts .svg03 {
		width:100%;
		height:auto;
		top:-2%;
		right:-2%;
	}

	#cleation2018 .inner .same .rights .svg04 {
		width:100%;
		height:auto;
		top:-2%;
		left:-2%;
	}


}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	#slidebox {
		height:400px;
	}
	
	#cleation2018 #slidebox #titlebg {
		background-size: 3px 3px;
	}
	
	
	#cleation2018 #slidebox #titles {
		top:50%;
		left:0;
		transform:translate(0,-50%);
		z-index:99;
		padding:0 15%;
		text-align:center;
	}

	
	
	#cleation2018 .endlogo img {
		max-width:100%;
	}
}