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

html {scroll-behavior: smooth;}

* {	transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out;
	-moz-transition:all 0.25s ease-in-out;
	-ms-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
}

/* CTA BUTTON ##### ##### ----------------------------------------------------- ##### #####*/

.cta_button {
	width:auto;
	float:left;
	position:absolute;
	background-color:#b86c91;
	color:#ffffff;
	font-size:14px;
	padding:4px 12px;
	border-radius:10px;
	box-shadow:0px 0px 20px rgba(0,0,0,0.2);
}

.cta_button:hover {background-color:#8C5F7B;} 

/* SLIDE ##### ##### ----------------------------------------------------- ##### #####*/

.slide {
	width:100%;
	height:auto;
	min-height:80vh;
	float:left;
	margin:0;
	padding:20px 0;
	border-bottom:1px solid rgba(0,0,0,0.2);

}

.slide .inner {
	width:90%;
	margin:0px 5%;
}

.slide#sl02 {
  	height: calc(100vh * 10); /* The number of visual parts, plus one for the empty state at the beginning. */
  	position: relative;
}

.slide#sl02 .inner {
  	position:sticky;
 	  top:0;
  	min-height: 100vh;
  	overflow: hidden;
	background:radial-gradient(circle closest-side at 50% 50%, rgba(242,248,252,1) 0%, rgba(255,255,255,1) 100% );
}

.mobile {display:none;}
.desktop {display:block;}

/* VISUAL ##### ##### ----------------------------------------------------- ##### #####*/

.visual_wrap {
	width:100%;
	float:left;
	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:center;
}

.visual_content {
	width:960px;
	height:960px;
	position:relative;
	margin:100px 0 0 0; /* margin top should equal the height of the nav bar */
	
}

.visual_content > .visual {
	position:absolute;
	display:none;
}

.vis_bg,
.vis_grf,
.vis_tag,
.vis_tit,
.vis_arr {position:absolute;}

.visual span {
	text-align:center;
	color:#4F5A63;
	position:absolute;
	font-size:14px;
	line-height:1.15em;
}

.visual .cta_button {position:absolute;}

.visual.part01 {
	width:23%; margin:5% 0 0 29.2%;
}
.visual.part01 > .vis_bg { width:100%; margin:12.5% 0 0 0;}
.visual.part01 > .vis_tit { width:54.35%; margin:0 0 0 29.5%;}
.visual.part01 > .vis_grf { width:24.7%; margin:44% 0 0 10%;}
.visual.part01 > span { width:80%; margin:70% 0 0 10%;}
.visual.part01 .cta_button { margin:97% 0 0 26%;}


.visual.part02 {
	width:23.6%; margin:25.6% 0 0 14.7%;
}
.visual.part02 > .vis_bg { width:100%; margin:0 0 0 0;}
.visual.part02 > .vis_tit { width:59.75%; margin:10% 0 0 10%;}
.visual.part02 > .vis_arr { width:6.8%; margin:14% 0 0 61%; transform: rotate(-138deg);}
.visual.part02 > span { width:80%; margin:80% 0 0 14%;}
.visual.part02 .cta_button { margin: 115% 0 0 30%; }

.visual.part03 {
	width:25.8%; margin:43.5% 0 0 36.4%;
}
.visual.part03 > .vis_bg { width:100%; margin:11% 0 0 0;}
.visual.part03 > a > .vis_tit { width:54.65%; margin:0% 0 0 26%;}
.visual.part03 > .vis_grf { width:20.15%; margin:49% 0 0 70%;}
.visual.part03 > .vis_arr { width:6.3%; margin:26% 0 0 12%; transform:rotate(-247deg);}
.visual.part03 > span { width:80%; margin:66% 0 0 10%;}


.visual.part04 {
	width:33.9%; margin:0% 0 0 48.7%;
}
.visual.part04 > .vis_bg { width:100%; margin:0% 0 0 0;}
.visual.part04 > .vis_tit { width:41.6%; margin:81% 0 0 51%;}
.visual.part04 > .vis_arr { width:4.7%; margin:44% 0 0 61%; transform:rotate(0deg);}
	
.visual.part04 > span:nth-of-type(1) { width:80%; margin:133% 0 0 17%;}
.visual.part04 > span:nth-of-type(2) { width:47%; margin:59% 0 0 27%;}
.visual.part04 > span:nth-of-type(3) { width:70%; margin:20% 0 0 23%;}


.visual.part05 {
	width:50%; margin:0% 0 0 0%;
}
.visual.part05 > .vis_bg { width:100%; margin:0% 0 0 0;}
.visual.part05 > .vis_tit { width:28.2%; margin:5% 0 0 8%;}
.visual.part05 > .vis_grf { width:29%; margin:40% 0 0 8%;}
.visual.part05 > .vis_arr { width:3%; margin: 68% 0 0 15%; transform:rotate(200deg);}

.visual.part05 > span:nth-of-type(1) { width:50%; margin:4% 0 0 28%;}
.visual.part05 > span:nth-of-type(2) { width:20%; margin:80% 0 0 4%;}
.visual.part05 > span:nth-of-type(3) { width:28%; margin:105% 0 0 3%;}


.visual.part06 {
	width:51.4%; margin:61.5% 0 0 0;
}
.visual.part06 > .vis_bg { width:100%; margin:0% 0 0 0%;}
.visual.part06 > .vis_tit { width:27.4%; margin:10% 0 0 38%;}
.visual.part06 > .vis_grf { width:65.2%; margin:35% 0 0 22%;}
.visual.part06 > .vis_arr { width:3.5%;margin:15% 0 0 12%; transform: rotate(159deg);}
.visual.part06 > span { width:40%; margin:43% 0 0 47%;}


.visual.part07 {
	width:51.2%; margin:74% 0 0 46.2%;
}
.visual.part07 > .vis_bg { width:100%; margin:0% 0 0 0%;}
.visual.part07 > .vis_tit { width:27.5%; margin:-7% 0 0 38%;}
.visual.part07 > .vis_grf { width:27.7%; margin:26% 0 0 32%;}
.visual.part07 > .vis_arr { width:3.2%;margin:24.5% 0 0 18%; transform: rotate(70deg);}
.visual.part07 > span { width:40%; margin:32% 0 0 55%;}


.visual.part08 {
	width:32.1%; margin:52.5% 0 0 67.3%;
}
.visual.part08 > .vis_bg { width:100%; margin:0% 0 0 0%;}
.visual.part08 > .vis_tit { width:44%; margin:-13% 0 0px 45%;}
.visual.part08 > .vis_tag { width:27%; margin:43% 0 0 16%;}
.visual.part08 > span { width: 44%; margin: 35% 0 0 45%;}



.visual.part09 {
	width:17.5%; margin:3.2% 0 0 82%;
}
.visual.part09 > .vis_bg { width:100%; margin:32% 0 0 3%;}
.visual.part09 > .vis_tit { width:71.4%; margin:0% 0 0px 16%;}
.visual.part09 > .vis_grf { width:29.7%; margin:79% 0 0 54%;}
.visual.part09 > .vis_tag { width:49%; margin:160% 0 0 30%;}
.visual.part09 > span { width: 44%; margin: 35% 0 0 45%;}


input.hidden {display:none;}


input#v-01:checked ~ .visual_content > .visual.part01,
input#v-02:checked ~ .visual_content > .visual.part02,
input#v-03:checked ~ .visual_content > .visual.part03,
input#v-04:checked ~ .visual_content > .visual.part04,
input#v-05:checked ~ .visual_content > .visual.part05,
input#v-06:checked ~ .visual_content > .visual.part06,
input#v-07:checked ~ .visual_content > .visual.part07,
input#v-08:checked ~ .visual_content > .visual.part08,
input#v-09:checked ~ .visual_content > .visual.part09{display:block;}


input#v-01:checked ~ .visual_content > .visual.part01,
input#v-02:checked ~ .visual_content > .visual.part02,
input#v-03:checked ~ .visual_content > .visual.part03,
input#v-04:checked ~ .visual_content > .visual.part04,
input#v-05:checked ~ .visual_content > .visual.part05,
input#v-06:checked ~ .visual_content > .visual.part06,
input#v-07:checked ~ .visual_content > .visual.part07,
input#v-08:checked ~ .visual_content > .visual.part08,
input#v-09:checked ~ .visual_content > .visual.part09{
	animation:BlendInAnimation 0.5s linear 1;
	-webkit-animation:BlendInAnimation 0.5s linear 1;
	-moz-animation:BlendInAnimation 0.5s linear 1;
	-ms-animation:BlendInAnimation 0.5s linear 1;
	-o-animation:BlendInAnimation 0.5s linear 1;
}

input#v-01:checked ~ .visual_content > .visual.part01 > span,
input#v-02:checked ~ .visual_content > .visual.part02 > span,
input#v-03:checked ~ .visual_content > .visual.part03 > span,
input#v-04:checked ~ .visual_content > .visual.part04 > span,
input#v-05:checked ~ .visual_content > .visual.part05 > span,
input#v-06:checked ~ .visual_content > .visual.part06 > span,
input#v-07:checked ~ .visual_content > .visual.part07 > span,
input#v-08:checked ~ .visual_content > .visual.part08 > span,
input#v-09:checked ~ .visual_content > .visual.part09 > span{
	animation:BlendInAnimation2 1s linear 1;
	-webkit-animation:BlendInAnimation2 1s linear 1;
	-moz-animation:BlendInAnimation2 1s linear 1;
	-ms-animation:BlendInAnimation2 1s linear 1;
	-o-animation:BlendInAnimation2 1s linear 1;
}

@-webkit-keyframes BlendInAnimation {
	0% { filter:blur(100px); opacity:0;}
	100% { filter:blur(0px); opacity:1;}
}

@-webkit-keyframes BlendInAnimation2 {
	0% { filter:blur(100px); opacity:0;}
	100% { filter:blur(0px); opacity:1;}
}

.visual.part01:hover > .vis_tit,
.visual.part02:hover > .vis_tit,
.visual.part03:hover > a > .vis_tit,
.visual.part04:hover > .vis_tit,
.visual.part05:hover > .vis_tit,
.visual.part06:hover > .vis_tit,
.visual.part07:hover > .vis_tit,
.visual.part08:hover > .vis_tit,
.visual.part09:hover > .vis_tit {transform:scale(1.2); filter:drop-shadow(0px 0px 10px rgba(0,0,0,0.2)); z-index:20;}


@media screen and (max-width:1920px) {
	
	/* Resize the content and fonts for smaller desktop screens */
	.visual_content {
		width:750px;
		height:750px;
	}
  
	.visual span {
		font-size:12px;
		line-height:1.15em;
	}

}


@media screen and (max-width:1440px) {
	
	/* Resize the content and fonts for smaller desktop screens */
	.visual_content {
		width:640px;
		height:640px;
	}
	
	.visual span {
		font-size:10px;
		line-height:1.15em;
	}
	
	.cta_button {
		font-size:12px;
	}

}

@media screen and (max-width:720px) {
	
	/* Resizing and new placements for mobile devices */
	
	.mobile {display:block;}
	.desktop {display:none;}
  
  .slide {
    width:130%;
    margin:0 0 0 -15%;
  }
	
	.visual_content {
		width:98%;
		height:90vh;
		margin:100px 1% 5px;
	}
	
	.vis_tit,
	.vis_arr {z-index:2;}
	
	.visual.part01 {
		width:100%; margin:0 0 0 0;
	}
	.visual.part01 > .vis_bg { width:20.7%; margin:6% 0 0 12%;}
	.visual.part01 > .vis_tit { width:23.8%; margin:0 0 0 10%;}
	.visual.part01 > span { width:33%; margin:27% 0 0 6%;}
	.visual.part01 .cta_button { margin:40% 0 0 8%;}


	.visual.part02 {
		width:100%; margin:0 0 0 0;
	}
	.visual.part02 > .vis_bg { width:28.9%; margin:51% 0 0 3%;}
	.visual.part02 > .vis_tit { width:26.3%; margin:58% 0 0 4%;}
	.visual.part02 > .vis_arr { width:3.5%; margin:53% 0 0 19%; transform: rotate(-160deg);}
	.visual.part02 > span { display:none;}
  .visual.part02 .cta_button { margin: 94% 0 0 -1%; }


	.visual.part03 {
		width:100%; margin:0 0 0 0;
	}
	.visual.part03 > .vis_bg { width:26.8%; margin:110% 0 0 4.5%;}
	.visual.part03 > a >.vis_tit { width:26.3%; margin:115% 0 0 4%;}
	.visual.part03 > .vis_arr { width:3.5%; margin:106% 0 0 12%; transform:rotate(-180deg);}
	.visual.part03 > span { width:30%; margin:150% 0 0 1%;}


	.visual.part04 {
		width:100%; margin:0% 0 0 0%;
	}
	.visual.part04 > .vis_bg { width:72%; margin:163% 0 0 10%;}
	.visual.part04 > .vis_tit { width:26.3%; margin:168% 0 0 12%;}
	.visual.part04 > .vis_arr { width:3.5%; margin:182% 0 0 40%; transform:rotate(90deg);}

	.visual.part04 > span:nth-of-type(1) { width:36%; margin:173% 0 0 44%;}
	.visual.part04 > span:nth-of-type(2) { width:36%; margin:185% 0 0 44%;}
	.visual.part04 > span:nth-of-type(3) { display:none;}


	.visual.part05 {
		width:100%; margin:0% 0 0 0%;
	}
	.visual.part05 > .vis_bg { width:29.2%; margin:124% 0 0 56%;}
	.visual.part05 > .vis_tit { width:26.3%; margin:140% 0 0 61%;}
	.visual.part05 > .vis_arr { width:3.5%; margin:132% 0 0 73%; transform:rotate(0deg);}

	.visual.part05 > span:nth-of-type(1) { display:none;}
	.visual.part05 > span:nth-of-type(2) {display:none;}
	.visual.part05 > span:nth-of-type(3) { display:none;}


	.visual.part06 {
		width:100%; margin:0% 0 0 0%;
	}
	.visual.part06 > .vis_bg { width:35.5%; margin:68% 0 0 49.5%;}
	.visual.part06 > .vis_tit { width:26.3%; margin:100% 0 0 61%;}
	.visual.part06 > .vis_grf { display:none;}
	.visual.part06 > .vis_arr { width:3.5%;margin:95% 0 0 65%; transform: rotate(-30deg);}
	.visual.part06 > span { display:none;}


	.visual.part07 {
		width:100%; margin:0% 0 0 0%;
	}
	.visual.part07 > .vis_bg { width:42.5%; margin:25% 0 0 39.5%;}
	.visual.part07 > .vis_tit { width:26.3%; margin:66% 0 0 46%;}
	.visual.part07 > .vis_arr { width:3.5%;margin:57% 0 0 52%; transform: rotate(40deg);}
	.visual.part07 > span { width:26%; margin:57% 0 0 74%; text-align:left;}


	.visual.part08 {
		width:100%; margin:0% 0 0 0%;
	}
	.visual.part08 > .vis_bg { width:20%; margin:-11% 0 0 62%;}
	.visual.part08 > .vis_tit { width:26.3%; margin:29% 0 0 52%;}
	.visual.part08 > span {display:none;}



	.visual.part09 {
		width:100%; margin:0% 0 0 0%;
	}
	.visual.part09 > .vis_bg { display:none;}
	.visual.part09 > .vis_tit { width:23.8%; margin:0% 0 0px 60%;}
	.visual.part09 > span { width: 44%; margin: 35% 0 0 45%;}

}