﻿@charset "utf-8";

@import url('layout.css');
@import url('customize.css');

/* common */
#cu-wrap.cu-main {
	width:100vw; height:100vh; min-height:700px; overflow-x:hidden !important; overflow-y:auto;
}

/* background */
#cu-bg-wrap {
	position:relative; width:100%; height:100%;
}
#cu-bg-wrap .cu-bg {
	position:relative; width:100%; height:100%; background:url("../images/main_visual_01.jpg") 50% 50% no-repeat; background-size:cover;
}
#cu-bg-wrap .cu-opacity-bgcolor {
	position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:rgba(0,0,0,0.4); z-index:3;
}
#cu-bg-wrap .cu-vline-wrap {
	position:absolute; width:100%; max-width:1600px; height:100%; top:50%; left:50%; transform:translate(-50%,-50%); padding:0px 160px; z-index:4;
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap {
	position:relative; width:100%; height:100%;
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap .cu-line {
	position:absolute; width:1px; top:0px; bottom:0px; background-color:rgba(255,255,255,0.2);
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap .cu-line:nth-child(1) {
	left:0%;
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap .cu-line:nth-child(2) {
	left:20%;
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap .cu-line:nth-child(3) {
	left:40%;
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap .cu-line:nth-child(4) {
	left:60%;
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap .cu-line:nth-child(5) {
	left:80%;
}
#cu-bg-wrap .cu-vline-wrap .cu-inner-wrap .cu-line:nth-child(6) {
	left:100%;
}

@media screen and (max-width:1280px) {
	#cu-bg-wrap .cu-vline-wrap {
		padding:0px 120px;
	}
}
@media screen and (max-width:1024px) {
	#cu-bg-wrap .cu-vline-wrap {
		padding:0px;
	}	
}
@media screen and (max-width:768px) {
	#cu-bg-wrap .cu-vline-wrap {
		display:none;
	}
}

/* header */
#cu-wrap.cu-main #cu-header-wrap {
	position:absolute;
}

/* content */
#cu-wrap.cu-main #cu-content {
	position:absolute; width:100%; max-width:1600px; top:50%; left:50%; transform:translate(-50%,-50%); padding:0px 160px; margin:auto; z-index:10;
}
#cu-wrap.cu-main #cu-content .cu-headline-wrap {
	position:relative; width:100%; text-align:center; color:#fff; padding:0px 10px; margin-bottom:120px;
}
#cu-wrap.cu-main #cu-content .cu-headline-wrap h2.cu-headline {
	font-size:46px; line-height:1.2em; font-weight:400; margin-bottom:10px;
}
#cu-wrap.cu-main #cu-content .cu-headline-wrap h2.cu-headline span {
	display:inline-block;
}
#cu-wrap.cu-main #cu-content .cu-headline-wrap h3.cu-subheadline {
	font-size:22px; line-height:1.4em; font-weight:300; 
}
#cu-wrap.cu-main #cu-content .cu-headline-wrap h3.cu-subheadline span {
	display:inline-block;
}

#cu-wrap.cu-main #cu-content ul.cu-link {
	position:relative; width:100%; list-style:none;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item  {
	position:relative; float:left; width:20%; text-align:center;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a {
	position:relative; display:inline-block; width:70%; height:190px; color:#fff;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-icon {
	position:relative; width:120px; height:120px; margin:auto;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-icon img {
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(1) a .cu-icon img {
	width:65%;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(2) a .cu-icon img {
	width:91%;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(3) a .cu-icon img {
	width:65%;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(4) a .cu-icon img {
	width:80%;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(5) a .cu-icon img {
	width:75%;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-description {
	position:absolute; font-size:14px; line-height:1.4em; font-weight:300; top:110px; left:50%; transform:translateX(-50%); opacity:0; white-space:nowrap;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-subtitle {
	position:absolute; font-size:12px; line-height:1.4em; font-weight:300; top:120px; left:50%; transform:translateX(-50%); opacity:1; white-space:nowrap;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-maintitle {
	position:absolute; font-size:24px; line-height:1em; font-weight:400; top:140px; left:50%; transform:translateX(-50%); white-space:nowrap;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-arrow {
	position:absolute; width:50px; height:12px; bottom:0px; left:50%; transform:translateX(-50%); border-bottom:1px solid #ffa200; opacity:0;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-arrow::after {
	content:""; position:absolute; width:20px; height:1px; top:11px; right:0px; transform:rotate(35deg); transform-origin:100% 100%; background-color:#ffa200;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(1) a:hover .cu-icon {
	width:80px; height:80px;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(2) a:hover .cu-icon {
	width:80px; height:80px;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(3) a:hover .cu-icon {
	width:80px; height:80px;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(4) a:hover .cu-icon {
	width:80px; height:80px;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(5) a:hover .cu-icon {
	width:80px; height:80px;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a:hover .cu-description {
	top:85px; opacity:1;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a:hover .cu-subtitle {
	opacity:0;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a:hover .cu-maintitle {
	color:#ffa200;
}
#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a:hover .cu-arrow {
	width:150px; opacity:1;
}

@media screen and (max-width:1280px) {
	#cu-wrap.cu-main #cu-content  {
		padding:0px 120px;
	}
	#cu-wrap.cu-main #cu-content .cu-headline-wrap h2.cu-headline {
		font-size:36px;
	}
	#cu-wrap.cu-main #cu-content .cu-headline-wrap h3.cu-subheadline {
		font-size:20px;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a {
		height:170px;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-icon {
		width:100px; height:100px;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-description {
		font-size:12px; top:100px;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-subtitle {
		top:100px;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-maintitle {
		font-size:20px; top:120px;
	}
}
@media screen and (max-width:1024px) {
	#cu-wrap.cu-main #cu-content  {
		padding:0px;
	}
	#cu-wrap.cu-main #cu-content .cu-headline-wrap h2.cu-headline {
		font-size:30px;
	}
	#cu-wrap.cu-main #cu-content .cu-headline-wrap h3.cu-subheadline {
		font-size:18px;
	}
}
@media screen and (max-width:768px) {
	#cu-wrap.cu-main #cu-content {
		padding:0px; padding-top:10px;
	}
	#cu-wrap.cu-main #cu-content .cu-headline-wrap {
		margin-bottom:20px;
	}
	#cu-wrap.cu-main #cu-content .cu-headline-wrap h2.cu-headline {
		font-size:24px;
	}
	#cu-wrap.cu-main #cu-content .cu-headline-wrap h2.cu-headline span {
		display:block;
	}	
	#cu-wrap.cu-main #cu-content .cu-headline-wrap h3.cu-subheadline {
		font-size:13px; line-height:1.6em;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item  {
		width:50%;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item:nth-child(3)  {
		width:100%;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a {
		height:140px;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-description {
		font-size:11px;
	}
	#cu-wrap.cu-main #cu-content ul.cu-link li.cu-item a .cu-arrow {
		display:none;
	}
}
@media screen and (max-height:768px) {
	#cu-wrap.cu-main #cu-content .cu-headline-wrap {
		margin-bottom:40px;
	}
}
@media screen and (max-height:600px) {
	#cu-wrap.cu-main #cu-content .cu-headline-wrap {
		margin-bottom:10px;
	}
}

/* footer */
#cu-wrap.cu-main #cu-footer {
	position:absolute; color:#ccc; bottom:0px; left:0px; z-index:10;
}