#header h1 { display: none;}


/*--------------------------------------------------------
  TOPPAGE
--------------------------------------------------------*/

#toppage { overflow: hidden;}
#toppage h2 {
	position: relative;
	padding:45px 0;
	font-family:'Barlow', sans-serif;
	font-size: 175%;
    font-weight: 500;
	text-align: center;
}
#toppage h2::after {
	display: block; clear: both; content:"";
	position: absolute; left:0; right: 0; bottom:0;
	margin: auto; width:130px; height:10px;
	background: url("../img/title_line.svg") no-repeat;
}
#toppage h3 { font-size: 150%;}
#toppage h4 {
	margin:0 0 20px;
	padding: 20px;
	color: #0064FF;
	font-size:100%;
	border: 1px solid #FFEAEA;
	background:#FFEAEA;
}
#toppage .cont { margin: auto; width: 90%; max-width:1000px;}


/* MAIN */
#toppage .main {
	position: relative;
	height: 80vh;
    min-height: 350px;
	max-height:450px;
}
#toppage .main .top_logo {
	position: absolute; top:55%; left: 0; right: 0;
	margin: auto;
	width:140px;
	text-align: center;
	z-index: 99999;
}
#toppage .main .top_logo p+p { margin-top: 5px;}
#logo_box { 
    position: absolute; left: 0; right: 0; top:0;
    margin:auto; width: 140px; height:119px;
    z-index: 9999;
}
#logo_box div { display: block; position: absolute; width: 140px; height:119px; top:0; left:0; text-indent: -9999px;}
#logo_box .parts1 { background: url("../../img/logo/01.png") no-repeat; animation: anim1 2s;}
#logo_box .parts2 { background: url("../../img/logo/02.png") no-repeat; animation: anim2 2s;}
#logo_box .parts3 { background: url("../../img/logo/03.png") no-repeat; animation: anim3 2s;}
#logo_box .parts4 { background: url("../../img/logo/04.png") no-repeat; animation: anim4 2s;}
#logo_box .parts5 { background: url("../../img/logo/05.png") no-repeat; animation: anim5 2s;}
#logo_box .parts6 {
    top:135px; left:-5px;
    padding-top:45px; width:150px; height: 55px; text-indent: 0;
    background: url("../../img/logo/06.png") no-repeat;
	animation: anim6 4.5s;
    background-size: 100% auto;
}
@keyframes anim1 {
    0% { transform: translateX(-200px); opacity: 0;}
    100% { transform: translateX(0px) rotate(360deg); opacity: 1; }
}
@keyframes anim2 {
    0% { transform: translateX(-200px) translateY(-200px); opacity: 0;}
    100% { transform: translateX(0px) translateY(0px) rotate(360deg); opacity: 1; }
}
@keyframes anim3 {
    0% { transform: translateX(100px) translateY(100px); opacity: 0;}
    100% { transform: translateX(0px) translateY(0px) rotate(360deg); opacity: 1; }
}
@keyframes anim4 {
    0% { transform: translateX(250px) translateY(-200px); opacity: 0;}
    100% { transform: translateX(0px) translateY(0px) rotate(360deg);  opacity: 1; }
}
@keyframes anim5 {
    0% { transform: translateX(100px) translateY(-200px); opacity: 0;}
    100% { transform: translateX(0px) translateY(0px) rotate(360deg); opacity: 1; }
}
@keyframes anim6 {
    0% { opacity: 0;}
    50% { opacity: 0;}
    100% { opacity: 1; }
}
canvas { 
	position: absolute; bottom:0; left:-50%; right:-50%;
	margin: auto; width:120%;
	transform: rotate(-11deg);
}


/* NEWS */
#toppage .news { position: relative; padding-top:135px;}
#toppage .news::before {
	display: block; content:""; clear: both;
	margin: auto; width: 120%; height:500px;
	position: absolute; top: 0; left:-50%; right:-50%;
	transform: rotate(-11deg);
	background: #fff;
	z-index:-1;
}
#toppage .news .news_list {
	position: relative; top:0; 
	margin: auto;
    padding:0;
	/*padding: 20px 0;*/
	max-width: 1000px;
	border-bottom: 1px solid #eee;
	overflow: hidden;
	z-index: 88888;
}
#toppage .news h2 { float: left; padding: 0; width:100px; text-align: left;  line-height: 45px;}
#toppage .news h2::after { display: none;}
#toppage .news .news_read { float:left; width:calc(100% - 280px);}
#toppage .news ul  { padding: 10px 0; overflow: hidden;}
#toppage .news ul li  { display: none;}
#toppage .news ul li:nth-child(1)  { display: block;}
#toppage .news ul li .tit .day { position: relative; display: block; float: left; margin-right: 20px; width: 100px; font-size: 100%;}
#toppage .news ul li .tit .day::before { 
	display: block; clear: both; content:"";
	position: absolute; top:3px; right:0px;
	width: 1px; height: 20px;
	background: #ccc;
}
#toppage .news ul li .tit a { color:#000; text-decoration: none; font-size: 105%;}
#toppage .news ul li .tit a:hover { text-decoration: underline;}
#toppage .news ul li .come { display: none;}
#toppage .news .btn { float: right; margin: 0;}
@media only screen and (max-width:800px){
	#toppage .news .btn { margin:20px auto 0;}
}


/* NEWS2 */
#toppage .news2 { padding: 50px 0 100px; background: #f9fcfd;}
#toppage .news2 .cont { max-width:920px;}
#toppage .news2 .news_read { padding:65px 0; }
#toppage .news2 ul  {}
#toppage .news2 ul li {
    display: none;
    margin: auto;
    padding:22px 20px;
    max-width: 650px;
    background: #fff;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.05);
    border-radius: 100px;
}
#toppage .news2 ul li+li { margin-top: 20px; }
#toppage .news2 ul li .tit .day { position: relative; display: block; float: left; width: 150px; text-align: center; font-size: 100%; font-weight: 600;}
#toppage .news2 ul li .tit a {
    color:#000; text-decoration: none; font-weight: 400;  font-size: 105%;
    display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
 }
#toppage .news2 ul li .tit a:hover { text-decoration: underline;}
#toppage .news2 ul li .come { display: none;}
#toppage .news2 ul li:nth-child(1),
#toppage .news2 ul li:nth-child(2),
#toppage .news2 ul li:nth-child(3){ display:block;}


/* SERVICE */
#toppage .service { padding:0  0 100px; background: #fff;}
#toppage .service .cont { margin: auto; padding-top: 0; max-width: 1000px;  overflow: hidden;}
#toppage .service h2#maincome {
    padding:45px 0 0 !important;
    margin: auto; width: 90%;
    color:#000; text-decoration: none; font-weight: 400;  font-size: 103%;
}
#toppage .service h2#maincome::after { display: none;}
#toppage .service ul { float: left; margin:20px 2% 50px ; padding:170px 0 2%; width:29.3%; text-align: center;}
#toppage .service ul li:nth-child(1) { position: relative; padding-bottom: 30px; margin-bottom: 20px; font-size:125%; font-weight: 600;}
#toppage .service ul li:nth-child(1)::after {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: block; content:""; clear: both;
    margin: auto; width: 85px; height: 2px;
    background: #222;
}
#toppage .service ul.se1 { background:url("../img/service_icon1.svg") no-repeat center 20px;}
#toppage .service ul.se2 { background:url("../img/service_icon2.svg") no-repeat center 20px;}
#toppage .service ul.se3 { background:url("../img/service_icon3.svg") no-repeat center 20px;}
#toppage .service ul { background-size:130px auto !important; }


/* MAP */
#toppage .map {background: #fff;}
#toppage .map iframe { width: 100%; height: 400px; border: none;}
#toppage .map .parking { margin:10px auto 0; width: 90%; max-width: 660px; text-align: right;}
#toppage .map .parking a  { 
	padding: 15px 45px 15px 0;
	color: #000;
	text-decoration: none;
	background: url("../img/arrow_b.svg") no-repeat 90% center;
	background-size: 20px auto;
	border-bottom: 1px solid #000;
	transition: all 0.5s ease;
}
#toppage .map .parking a:hover  { background-position: right center;}