/* CSS Document */

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

メインイメージ

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

.top-main{
	padding: 20px 3%;
	margin:120px 0 0 0;
	position: relative;
}
.top-main .main-maru{
	position: absolute;
	width: 40%;
	right: -20%;
	bottom: -20%;
	z-index: -1;
}
.top-main .top-slider{
	width: 90%;
	margin: auto;
	max-width: 1500px;
}
.top-main .catch{
	position: absolute;
	left: 8%;
	top: 3%;
	width: 25%;
	z-index: 1;
}

@media print , screen and (max-width: 960px) {

.top-main{
		margin: 100px auto 0;
	}
.top-main .news dt{
	width: 100%;
	margin-bottom: 0;
}
.top-main .news dd{
	width: 100%;
	margin-bottom: 10px;
}
	
}

@media print , screen and (max-width: 768px) {

.top-main{
		margin: 80px auto 0;
	}	
.top-main .catch{
	position: absolute;
	left: 5%;
	top: 3%;
	width: 35%;
	z-index: 1;
}
}

@media print , screen and (max-width: 480px) {

.top-main .top-slider{
	width: 100%;
	margin: auto;
	max-width: 1500px;
	padding-top: 55px;
}
.top-main .catch{
	position: absolute;
	left: 5%;
	top: 4%;
	width: 50%;
	z-index: 1;
}
}

.contenttop{
	position: relative;
}
.contenttop .marul{
	position: absolute;
	left: -20%;
	top: 20%;
	width: 50%;
	z-index: -1;
}
.contenttop .marur{
	position: absolute;
	right: -10%;
	top: 40%;
	width: 30%;
	z-index: -1;
}
.title{
	margin-bottom:3%;
}

.title h2{
	font-family: "Caveat", cursive;
	font-weight: 400;
	
	font-size: clamp(38px, 5vw, 50px);
	line-height: 1.5em;
}
.title p{
	text-align: center;
	margin: 0 auto;
	line-height: 1.5em;
	color: #247efb;
}


.top-news{
	margin: 5% auto 3%;	
}
.top-news .inner{
	background: rgba(255,255,255,0.8);
	border-radius: 20px;
	padding: 30px 5%;
}
.top-news table th{
	border-bottom: 1px solid #787877;
	color: #247efb;
}
.top-news table td{
	border-bottom: 1px solid #787877;
}

.top-concept{
	padding: 8% 0 5%;
	background: url("../img/toppage/concept_back.png") right top no-repeat;
	background-size: 50% auto;
}
.top-concept .photo{
	width: 50%;
	padding: 20px;
	position: relative;
	z-index: 1;
}
.top-concept .photo::before{
	content: "";
	position: absolute;
	left: -10%;
	bottom: -10%;
	width: 90%;
	height: 70%;
	border-radius:20px;
	background: #f3f2f0;
	z-index: -1;
}
.top-concept .txt{
	width: 50%;
	position: relative;
	z-index: 1;
}
.top-concept .photo .concept_p{
	width: 50%;
	padding: 10px;
}

.top-concept p{
	margin: auto;
	line-height: 2.5em;
}


.top-about{
	position: relative;
	z-index: 1;
	width: 85%;
	margin: 5% auto 6% 0;
	padding: 3% 0;
	overflow: hidden;
}
.top-about::before{
	content: "";
	z-index: -1;
	position: absolute;
	left: 0;
	top: 0;
	height: 80%;
	width: 100%;
	background: rgba(92,137,209,0.2);
	border-radius: 0 30px 30px 0;
}
.top-about .inner{
	width: 90%;
	margin: 0 5% 0 auto;
}

@media print , screen and (min-width:1px) and (max-width: 960px) {
	
.top-about{
	position: relative;
	z-index: 1;
	width: 95%;
	margin: 0 auto 6% 0;
	overflow: hidden;
}

.top-about .inner{
	width: 96%;
	margin: 0 auto;
}	
}
.top-about .title{
	position: absolute;
	left: 52%;
	top: 5%;
}
.top-about .company_btn{
	width: 50%;
	padding: 15px;
}
.top-about .thought_btn{
	width: 50%;
	padding: 15px;
	margin-top: 160px;
}
.top-about .thought_btn a,
.top-about .company_btn a{
	border-radius: 20px;
	background: #fff;
	padding: 20px 20px 25px 20px;
	display: block;
	font-size: clamp(18px, 1.8vw, 20px);
}
.top-about .thought_btn a img,
.top-about .company_btn a img{
	margin-bottom: 20px;
}
@media print , screen and (max-width: 960px) {
	
.top-about .company_btn{
	width: 50%;
	padding: 10px;
}
.top-about .thought_btn{
	width: 50%;
	padding: 10px;
	margin-top: 160px;
}
	
.top-about .thought_btn a,
.top-about .company_btn a{
	border-radius: 20px;
	background: #fff;
	padding: 15px 15px 15px 15px;
	display: block;
	font-size: clamp(18px, 1.8vw, 20px);
}
.top-about .thought_btn a img,
.top-about .company_btn a img{
	margin-bottom: 15px;
}
	
}
@media print , screen and (max-width: 768px) {

.top-about .title{
	position: relative;
	left: inherit;
	top: inherit;
}	
.top-about .company_btn{
	width: 80%;
	margin: 0 auto 0 0;
	padding: 10px;
}
.top-about .thought_btn{
	width: 80%;
	padding: 10px;
	margin: 0 0 0 auto;
}
	
.top-about .thought_btn a,
.top-about .company_btn a{
	border-radius: 20px;
	background: #fff;
	padding: 15px 15px 15px 15px;
	display: block;
	font-size: clamp(18px, 1.8vw, 20px);
}
.top-about .thought_btn a img,
.top-about .company_btn a img{
	margin-bottom: 15px;
}
	
}


.top-service{
	margin: 0 auto;
	padding: 0 0 5% 0;
	position: relative;
	background: url("../img/top/service_back.png") bottom left no-repeat;
	background-size: 100% auto;
}
.top-service .servicebtn{
	width: 23%;
	margin: 10px auto;
	background: #fff;
	border-radius: 10px;
	position: relative;
}
.top-service .servicebtn h4{
	padding: 15px 0;
	font-size: clamp(16px, 2vw, 20px);
}
.top-service .servicebtn p{
	line-height: 1.5em;
	padding: 10px 15px 50px;
	font-size: clamp(14px, 1.5vw, 15px);
}
.top-service .servicebtn .btn{
	width: 80%;
	position: absolute;
	bottom: -20px;
	left: 0;
	right: 0;
	margin: auto;
}

@media print , screen and (max-width: 768px) {
	
.top-service .servicebtn{
	width: 46%;
	margin: 10px auto 30px;
	background: #fff;
	border-radius: 10px;
	position: relative;
}
	
.top-service .btn{
	width: 60%;
	position: absolute;
	bottom: -20px;
	left: 0;
	right: 0;
	margin: auto;
}
}
@media print , screen and (max-width: 480px) {
	
.top-service .servicebtn{
	width: 96%;
	margin: 10px auto 30px;
	background: #fff;
	border-radius: 10px;
	position: relative;
}
	
.top-service .btn{
	width: 50%;
	max-width: 200px;
	position: absolute;
	bottom: -20px;
	left: 0;
	right: 0;
	margin: auto;
}
}

.top-recruit{
	background: rgba(253,107,22,0.3);
	padding: 3% 0 5%;
}
.top-recruit .title p{
	color: #fd6b16;
}

.top-recruit .btn a{
	text-align: center;
	margin: auto;
	display: block;
	padding: 20px 10px;
	border-radius: 20px;
	width: 90%;
	max-width: 400px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-recruit .btn a .ico{
	display: inline-block;
	width: 35px;
	margin-right: 10px;
}
.top-recruit .btn a:hover{
	color: #fd6b16;
}