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

/* common */

a:hover{ opacity: .8;}
a{text-decoration:none;}

.inner{	margin-top:60px;}
	
/**************************
/* top
**************************/
/* top */
/*.main_visual{
	display:block;
	width:100%;
	height:400px;
	background:url(../img/top/main_img.png) no-repeat top center;
	background-size:cover;
}*/

.main_visual{
		margin:0 auto;
		position:relative;
		width:100%;
		height: auto;
		z-index:-999;
	}

.main_visual:before{
	content:"";
	display:block;
	padding-top:31.3%;
	}

.main_visual img{
		position:absolute;
		top:0;
		left: 0;
		width:100%;
	}

.main_visual img.main01{
   opacity: 0;
   animation-name: fade-in-bottom;
   animation-duration: 1.5s;
   animation-delay: 1s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
.main_visual img.main02{
   opacity: 0;
   animation-name: fade-in-bottom;
   animation-duration: 1.5s;
   animation-delay: 1.3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
.main_visual img.main03{
   opacity: 0;
   animation-name: fade-in-bottom;
   animation-duration: 1.5s;
   animation-delay: 1.8s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
.main_visual img.main04{
	display:none;
	}
@keyframes fade-in-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

@media only screen and (max-width:767px) {
.main_visual,
.main_visual img {
    position: static;
}
	
.main_visual:before{
	display:none !important;
	}

.main_visual img.main04{
	display:block;
	width:100%;
	position:static;
	}
.main_visual img.main01,
.main_visual img.main02,
.main_visual img.main03{
	display:none !important;
	}
}
	
/* 選ばれる理由 */

#support{
	background:url(../img/top/support_back.jpg) no-repeat top center;
	background-size: contain;}

.balue{
	display:flex;
	justify-content: space-between;}
	
.balue_each{
	width:30%;
	}


.balue_each .balue_icon{
	width:70%;
	margin:auto;}

.balue_each .balue_text{
	text-align:center;
}
.balue_each .balue_text h3{	
	color:#FC0;
	display: block;
	margin:	20px auto 15px;}

.balue_each .balue_text p{
	text-align:left;}
	
	
/* 事業領域 */

#top .support{
	padding-top:0;
	border-top:0;
	display:flex;
	justify-content: space-between;
}

#top .support .support_each{
	width:45%;
	overflow:hidden;
}
@media only screen and (max-width: 767px){
#top .support{
	display: block;
}
#top .support .support_each{
	width:100%;
}	
}
.support_each .link{
	width: 100%;
    max-width: 250px;
	margin: 30px auto 0 0;
}
@media only screen and (max-width: 767px){
.support_each .link {
    width: 70%;
    max-width: 300px;
	margin: 30px auto 0;
}
}
.support_each a .support_box{
	height:150px;
	background-color:#FFF;
	border-radius:5px;
	padding:0 10px;
	display:flex;
	justify-content: space-between;
	align-items: center;}

.support_each a .support_box .layRight{
	width:60%;
	height:110px;
	background-color:#FFC832;
	border-radius:5px;
	text-align:center;
	padding:10px;
	display:flex;
	justify-content: center;
	align-items: center;}

.support_each a .support_box .layRight .support_title h3{
	border-bottom:1px solid #333;
	margin:0 auto;
	color:#333333;}

.support_each a .support_box .layRight .support_title span{
	color:#333333;}

.support_each a .support_box .layRight .support_title p{
	color:#333333;}

.support_each a .support_box .layLeft{
	width:30%;}

.support_each a .support_box .layLeft img{
	max-width:80px;
	margin:0 auto;}

.support_each a:hover .support_box .layRight{
	background-color:rgba(255,200,50,0.5);
	-webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;}


/* 事業内容 */
		
.service{
	display:flex;
	justify-content: space-between;
	margin-top:60px;}

.service .service_box{
	width:50%;
	margin:0 auto;
	display:flex;
	justify-content: space-between;
}
.service .service_box .course{
	width:45%;
	margin:0 auto;
}

.course a .course_box{
	text-align:center;
	}
	
.course_box .figure{
	text-align:center;}
	
.course_box .figure a:hover img{
	opacity:0.8;}

.course_box .course_text{
	margin-top:10px;
	text-align:center;}
	
.course_box .course_text h3.title{
	font-weight:bold;
	color:#333;
	margin:0 auto;
	display:block;}
	
.course_box .course_text:after {
content: '';
width: 0;
transition: all 0.3s ease;
border-bottom: 2px solid #ED0707;
padding-top:5px;
display: block;
}

.course a:hover .course_box .figure img{
	opacity:0.8;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
	}
.course a:hover .course_box .course_text h3.title{
	color:#ED0707;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}


.course a:hover .course_box .course_text:after{
	width: 100%;
	border-bottom: 2px solid #ED0707;
}

.course_box .course_text p.position{
    color: #888;
    text-align: center;
    font-size: 12px;
    padding-top: 5px;
    letter-spacing: 1px;
}
/* トピックス */
	
.topics	{
	display:flex;
	justify-content: space-between;}

.topics .news{
	width:47.5%;
	overflow:hidden;
	border-bottom:1px solid #999;
	padding:10px 0;}

.topics_column	{}/* トピックスページ*/
.topics_column .news{
	width:100%;
	overflow:hidden;
	border-bottom:1px solid #999;
	padding:10px 0;}

.news .layRight{
	float:right;
	width:75%;
	text-align:left;
	position:relative;}

.news a:hover{	
-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
	
.news .layRight a h4{
	color:#333333;
	margin:0;
	font-size:14px;
	}
	
.news .layRight a .more{
	background-color:#FFF;
	color:#ED0707;
	width:20px;
	height:20px;
	border:1px solid #999;
	text-align:center;
	border-radius: 11px;
    -webkit-border-radius: 11px;
	float:right;
	clear:both;
}

.news .layRight a .more:before{
	content: ">";
	font-size: 10px;
	color: #ED0707;
	margin:1px 0 0 1px;
	display:flex;
	justify-content: center;
	align-items: center;
}
	
.news .layLeft{
	float:left;
	width:20%;
	margin-right:5%;}

.news .layLeft a:hover img{
	opacity:0.8;}

.news .layRight .category a:hover{
	opacity:0.8;}
	
.news .layRight a:hover h4{
	color:#ED0707;
}
	
.news .layRight a:hover .more{
	background-color:#ED0707;
	color:#FFF;
	border:1px solid #ED0707;
transition: 1.0s ;
}

.news .layRight a:hover .more:before{
	color: #FFF;
transition: 1.0s ;}

/* 代表挨拶 */
	
.greeting{
	overflow:hidden;}

.greeting .layLeft{
	float:left;
	width:65%;
	margin-right:5%;}

.greeting .layRight{
	float:right;
	width:30%;}

.greeting .layLeft p{
	margin:20px 0;}
	

/* 事例紹介 */
	
.case{
	display:flex;
	justify-content: space-between;}
	
.case_each{
	width:32%;
	background-color:#FFF;
	box-shadow: 1px 1px 3px rgba(153,153,153,0.5);
	position:relative;
}

.case_each a .case_text{
	padding:15px 5%;
}

.case_each a .case_text h3{
	color:#333;
	font-size:100%;
}

.case_each a .case_text .number{
	width:30%;
	background-color:#F6F6F6;
	color:#666;
	text-align:center;
	font-size:10px;
	padding:3px 10px;
	margin-bottom:10px;
	letter-spacing:1px;
}

.case_each a .more{
	background-color:#FFF;
	color:#ED0707;
	width:20px;
	height:20px;
	border:1px solid #999;
	text-align:center;
	border-radius: 11px;
    -webkit-border-radius: 11px;
	position:absolute;
	right:5%;
	bottom:15px;
}

.case_each a .more:before{
	content: ">";
	font-size: 10px;
	color: #ED0707;
	margin:1px 0 0 1px;
	display:flex;
	justify-content: center;
	align-items: center;
}
.case_each a:hover .more{
	background-color:#ED0707;
	color:#FFF;
	border:1px solid #ED0707;
	transition: 1.0s ;
}

.case_each a:hover .more:before{
	color: #FFF;
	ttransition: 1.0s ;}


.case_each a:hover img{
	opacity:0.8;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.case_each a:hover .case_text h3{
	color:#ED0707;
	transition: color 0.5s ease 0s;
}

/* アクセス */	

.map{
	margin-top:30px;}

.ggmap {
	position: relative;
	margin:0;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}
		
.map dl{
	}
	
.map dt.a_head{
	font-weight:bold;
	border-left:#FC0 solid 4px;
	padding-left:10px;
	margin-bottom:5px;
	position:relative;}
	
.map dd.a_line{
	padding-left:15px;}
	
.map .access{
	overflow:hidden;
	padding:20px 0;
	}

.map .access .layLeft{
	float:left;
	width:40%;
	text-align:left;
	margin-right:5%;}

.map .access .layRight{
	float:right;
	width:55%;
	}
	
	
.map .traffic{
	display: flex;
	justify-content: space-between;
	background-color:#FAFAEB;
	padding:20px 5%;}

.map .traffic dl{
	width:47.5%;}
	
.map .traffic dl#train dt.a_head,
.map .traffic dl#car dt.a_head{
	font-weight:bold;
	border-left:none;
	padding:0 30px 5px 40px;
	border-bottom:1px dotted #999;
	margin-bottom:15px;}

.map .traffic dl#train dt.a_head:before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 700;
	content: '\f239';
	font-size: 20px;
	color: #FC0;
	position: absolute;
	width: 20px;
	height: 20px;
	top: -10px;
	bottom: 0;
	left: 5px;
	margin: auto;
}
	
.map .traffic dl#car dt.a_head:before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 700;
	content: '\f1b9';
	font-size: 20px;
	color: #FC0;
	position: absolute;
	width: 20px;
	height: 20px;
	top: -10px;
	bottom: 0;
	left: 5px;
	margin: auto;
}
	
.map .visiting {
	text-align:center;
	}

.map .visiting p{
	margin:30px 0;
	font-size:125%;
	font-weight:bold;
	}
	
@media screen and (min-width:768px) and ( max-width:853px) {


}

@media only screen and (max-width:767px) {

.logo{
	width: 40%;
    margin-right:0;
	}

.inner,
.service{ margin-top:0;}
	
.balue,
.support,
.service,
.topics,
.case{
	display:block;}

.balue_each,
.support_each,
.service .service_box,
.topics .news,
.case_each{
	width:100%;}

.balue_each,
.support_each,
.service .service_box,
.greeting,
.case_each{
	margin-top:30px;}

.balue_each{
	display:flex;
	justify-content: space-between;
}

.balue_each .balue_icon{
	width:30%;
	padding-right:5%;
	margin:0;}
.balue_each .balue_text{
	width:65%;}

.course_box .figure{
	width:100%;
	margin:0 auto;}

.course_box .course_text h3.title{
	font-size:16px;
	line-height:1.2em;}

.greeting .layLeft{
	float:none;
	width:100%;
	margin-right:0;
}

.greeting .layRight{
	float:none;
	width:50%;
	margin:0 auto;
}

.greeting .layLeft h3{
	text-align:center;
}

}
	
@media only screen and (max-width:480px) {

.support_each .layLeft{
	float:none;
	width:40%;
	margin:0 auto;}

.support_each .layRight{
	float:none;
	width:100%;
	text-align:center;}

.support_each .layRight{}

.balue_each{
	display:block;
}

.balue_each .balue_icon{
	width:50%;
	padding-right:0;
	margin:0 auto;
}
.balue_each .balue_text{
	width:100%;}
}

@media only screen and (max-width:350px) {

	}