/*====================================================================================================

  TOPPAGE

====================================================================================================*/

#toppage {
	margin: 0;
	padding: 0;
}
#toppage .box_main { max-width:1000px; margin:0 auto; }
#toppage h3 { position:relative; line-height:130%; }
#toppage h3::after {
	display:block;
	clear:both;
	content:"";
	position:absolute;
	top:11px;
	left:-51%;
	width:50%;
	height:2px;
	background:linear-gradient(to right, #59E7F1 0%, #625DEC 52%, #F357A4 100%);
}
#toppage h3 b {
	font-family:Barlow;
	font-size:187.8%;
	font-weight:600;
	font-style: italic;
	color: #23243E;
}
#toppage h3 small { display:block; font-size:76.7%; font-weight:300; color:#0B0205; }

#toppage .b_more { position:relative; border:1px solid #FFF; border-radius:30px; overflow:hidden; }
#toppage .b_more a {
	display:block;
	text-decoration:none;
	color: #FFF;
	font-family:Barlow;
	font-weight:500;
	font-style:italic;
	line-height:100%;
	text-align:center;
	position:absolute;
	z-index:1;
	width:100%;
}
#toppage .b_more a:before {
	content:"";
	position:absolute;
	left: -35%;
	top: 0;
	z-index:-1;
	transform: skew(45deg);
	transition-duration: 0.6s;
	transform-origin: top left;
	height: 100%;
	width: 0;
	background:linear-gradient(to right, #59E7F1 0%, #625DEC 52%, #F357A4 100%);
}
#toppage .b_more a:hover:before { width:135%; }
#toppage .b_more a:after {
	position: absolute;
	content: "\e315";
	font-family: "Material Icons";
	font-style: normal;
	font-size: 160%;
	font-weight: 100;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
}
#toppage .b_more:hover { border-color:transparent; }


/*** MAINIMG *******************************************************************/

#toppage .mainimg {
	padding:10% 0;
	color: #FFF;
	background: url("../../image/top/mainimg.jpg") no-repeat;
	background-size: cover;
}
#toppage .mainimg .photo { margin: auto; max-width: 1000px;}
#toppage .mainimg .photo h2 {
	margin: 0 auto 0 0;
	max-width: 600px;
	font-family:Barlow;
	font-weight:400;
	font-style:italic;
}
#toppage .mainimg .photo h2 b { margin: 0 0 0 auto; max-width:600px; font-weight:500; font-size:390%; line-height:100%;}
#toppage .mainimg .photo h2 small { font-size:137.8%; font-weight:300; display:block; }
#toppage .mainimg .photo .come { max-width: 600px; font-size:98.9%; font-weight:100; margin:45px auto 60px 0; }
#toppage .mainimg .photo .b_more { margin-top: 60px; width:240px; height:40px; }
#toppage .mainimg .photo .b_more a { padding:10px 0; font-size:130%; }
#toppage .mainimg .photo .b_more a i { padding-left:10px; }


/*** NEWS *******************************************************************/
#toppage .news {
	background:#444;
	color:#FFF;
	padding:25px 0;
	border-bottom: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
	border-image-source:linear-gradient(to right, #59E7F1 0%, #625DEC 52%, #F357A4 100%);
}
#toppage .news .box_main { overflow:hidden; clear:both; }
#toppage .news .tit { float:left; }
#toppage .news h3 b { color:#FFF; }
#toppage .news h3:after { display:none; }
#toppage .news .b_more { width:120px; height:27px; margin-top:8px; border-radius:0; }
#toppage .news .b_more a { padding:6px 0; font-size:88.2%; text-align:left; text-indent:10px; }
#toppage .news .b_more a:after { font-size:121.1%; right:6px; }
#toppage .news .news_list { clear:none; float:right; width: 80%; }
#toppage .news .news_list ul { overflow:hidden;  clear:both; display:none;}
#toppage .news .news_list ul:nth-child(1),
#toppage .news .news_list ul:nth-child(2),
#toppage .news .news_list ul:nth-child(3),
#toppage .news .news_list ul:nth-child(4),
#toppage .news .news_list ul:nth-child(5) { display:block;}
#toppage .news .news_list ul li { float:left; font-size:98.9%; font-weight:100; line-height:100%; margin:5px 0; }
#toppage .news .news_list ul li:nth-child(1) { width: 11%; float: left; margin-right: 2%; border-right:1px solid #FFF; }
#toppage .news .news_list ul li:nth-child(2) { float: right; width: 87%;}
#toppage .news .news_list ul li a { text-decoration:none; color: #FFF; }
#toppage .news .news_list ul li a:hover { opacity:0.7; }


/*** TITLE *******************************************************************/
#toppage .title { padding:75px 0 80px; }
#toppage .title h3 { font-size:110%; }
#toppage .title h3 b {}
#toppage .title h3 small { display:block; }
#toppage .title .title_list { overflow:hidden; clear:both; }
#toppage .title .title_list .box {
	position: relative;
	float:left;
	width:29.3%;
	height:293px;
	margin:2%;
}
#toppage .title .title_list .box a {
	position: relative;
	display: block; width: 100%; height:293px;
	color:#fff;
	text-decoration: none;
	background:#444 center 50px no-repeat; background-size:160px auto !important;
}
#toppage .title .title_list .box a::before {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	margin: auto; width: 95%; height: 95%; content: '';
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: top, right, bottom, left;
	transition-property: top, right, bottom, left;
	border: 1px solid #fff;
}
#toppage .title .title_list .box a span {
	display: block;
	position: relative; top:200px;
	font-family:Barlow;
	font-size:240%;
	font-weight:600;
	font-style:italic;
	
	text-align:center;
	line-height:100%;
}
#toppage .title .title_list .box a:hover { color: #444; background:#FFF center 50px no-repeat;}
#toppage .title .title_list .box:nth-child(1) a { background-image: url("../../image/top/cont_icon01.svg");}
#toppage .title .title_list .box:nth-child(2) a { background-image: url("../../image/top/cont_icon02.svg");}
#toppage .title .title_list .box:nth-child(3) a { background-image: url("../../image/top/cont_icon03.svg");}
#toppage .title .title_list .box:nth-child(1) a:hover { background-image: url("../../image/top/cont_icon01r.svg");}
#toppage .title .title_list .box:nth-child(2) a:hover { background-image: url("../../image/top/cont_icon02r.svg");}
#toppage .title .title_list .box:nth-child(3) a:hover { background-image: url("../../image/top/cont_icon03r.svg");}

/* HOVER ANIME */
#toppage .title .title_list .box {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}
#toppage .title .title_list .box:before {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	content: '';
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: top, right, bottom, left;
	transition-property: top, right, bottom, left;
}
#toppage .title .title_list .box:hover:before,
#toppage .title .title_list .box:focus:before,
#toppage .title .title_list .box:active:before {
	top: -12px; right: -12px; bottom: -12px; left: -12px;
	border: 10px solid;
	border-image-slice: 1;
	border-width: 5px;
	border-image-source:linear-gradient(to right, #59E7F1 0%, #625DEC 52%, #F357A4 100%);
}


/*** CATCHCOPY *******************************************************************/
#toppage .catchcopy {
	background: linear-gradient(45deg, #59e7f1 0%, #625dec 52%, #f357a4 100%);
	max-height: 575px;
	outline: 1px solid #fff;
	outline-offset: -30px;
	text-align: center;
	color: #fff;
	padding: 160px 0 100px;
}
#toppage .catchcopy h2 {
	font-family: "Barlow";
	font-style: italic;
	line-height: 370%;
	letter-spacing: 0.1em;
	font-size: 110%;
}
#toppage .catchcopy h2 b { font-size:390%; display: block; font-weight: 500; }
#toppage .catchcopy h2 small { font-size: 137.8%; font-weight: 300; }
#toppage .catchcopy .come { margin: 30px auto 60px; font-size:98.9%; font-weight: 100; }
#toppage .catchcopy .b_more { 
	width: 240px; 
	height: 40px; 
	margin: auto;
}
#toppage .catchcopy .b_more a { padding:10.5px 0; position: relative; }
#toppage .catchcopy .b_more a:before { background: #FFF; border: none; }
#toppage .catchcopy .b_more a:hover { color: #23243e; border: none; }

/*** CONTACT *******************************************************************/
#toppage .contact { 
	max-width: 1000px; 
	position: relative; 
	padding: 20px 0;
	min-height: 440px;
	margin: auto;
}
#toppage .contact h3 { margin-top: 80px; }

#toppage .contact a { display: block; text-decoration: none; }

#toppage .contact .tel { margin: 35px 0 15px; line-height: 250%; }
#toppage .contact .tel a { 
	color: #23243e; 
	font-size: 287.8%; 
	font-family: "Barlow";
	font-style: italic;
	font-weight: 600;
}

#toppage .contact .mail { border: 1px solid #23243e; width: 360px; height: 47px; }
#toppage .contact .mail a { 
	color: #0b0205; 
	text-align: center;
	padding:6px 0 7px 25px;
	position: relative;
	font-size:98.9%;
	font-weight: 300;
	overflow:hidden;
}
#toppage .contact .mail a:before {
	content:"";
	position:absolute;
	left: -35%;
	top: 0;
	z-index:-1;
	transform: skew(45deg);
	transition-duration: 0.6s;
	transform-origin: top left;
	height: 100%;
	width: 0;
	background:linear-gradient(to right, #59E7F1 0%, #625DEC 52%, #F357A4 100%);
}
#toppage .contact .mail a:hover:before { width:135%; }
#toppage .contact .mail a:after {
	position: absolute;
	content: "\e0be";
	font-family: "Material Icons";
	font-size: 160%;
	color: #000;
	top: 50%;
	left: 30px;
	transform: translateY(-50%);
}
#toppage .contact .mail:hover { border-color:transparent; }
#toppage .contact .mail a:hover { color:#FFF; }
#toppage .contact .mail a:hover:after { color:#FFF; }
#toppage .contact .map { position: absolute; width: 50%; top: 23px; right:23px; }
#toppage .contact .map iframe { width: 100%; }



/* GROUP COMPANY */
#toppage .group { 
	max-width: 1000px; 
	position: relative; 
	padding: 20px 0;
	/*min-height: 440px;*/
	margin: auto;
}
#toppage .group h3 { margin-top: 80px; }
#toppage .group ul { display:flex; gap:35px 50px; margin:50px 0;}
#toppage .group li { width:300px;}
#toppage .group li img { max-width:100%;}