@charset "UTF-8";
/*==============
    paage aboutus
================*/
@media screen and (min-width: 769px) {
	.pttlbox .txt{
		padding-top: 60px;
	}
}
@media screen and (max-width: 768px) {
}


/* ------------------------------
    aboutblk
------------------------------ */

.aboutblk + .aboutblk{
	margin-top: -18px;
}
.aboutblk3{
	margin-bottom: 220px;
}

.aboutblk .ttl1{
	margin-bottom: 100px;
}
.about_li{

}
.about_li li{
	position: relative;
	background: #fff;
	padding: 94px 3.4% 68px;
}
.about_li li .ttl{
	text-align: center;
	position: absolute;
	background: #000;
	left: 50%;
	top:0;
	color: #fff;
	transform: translate(-50%, -50%);
	line-height: 1;
	font-size: 1.8rem;
	padding: 18px 0 14px;
	white-space: nowrap;
}
.about_li li img{
	margin-bottom: 32px;
}
.about_li li p{

}

@media screen and (min-width: 769px) {
	.aboutblk{
		/*overflow: hidden;*/
		margin-top: -100px;
		padding-top: 100px;
	}
	.about_li li{
		width: 31.5%;
	}
	.about_li li .ttl{
		width: 90%;
		max-width: 264px;
	}
	.about_li li img{
		width: 306px;
	}
}
@media screen and (min-width: 769px) and (max-width: 999px) {
	.about_li{
		flex-wrap: wrap;
	}
	.about_li li{
		width: 48.5%;
	}
	.about_li li:nth-child(n+3) {
		margin-top: 60px;
	}
	.about_li li img{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

}
@media screen and (max-width: 768px) {
	.aboutblk{
	}
	.aboutblk + .aboutblk{
		margin-top: 23.1vw;
	}
	.aboutblk3{
		margin-bottom: 20vw;
	}
	.aboutblk .ttl1{
		margin-bottom: 23.5vw;
	}
	.about_li{

	}
	.about_li li{
		position: relative;
		background: #fff;
		padding: 9.6vw 6.8vw 10vw;
	}
	.about_li li+li{
		margin-top: 16vw;
	}
	.about_li li .ttl{
		width: 61vw;
		font-size: 4vw;
		padding: 3.1vw 0 2.1vw;
	}
	.about_li li img{
		margin-bottom: 3.2vw;
	}
	.about_li li p{

	}


}



/* ------------------------------
    about_company
------------------------------ */
.about_company{
}
.about_company1{
	margin-bottom: 100px;
}
.about_company .ttl{
	position: relative;
	font-size: 4.58rem;
}
.company_tbl th, .company_tbl td{
	border-bottom: 1px solid #C2C2C2;
	line-height: 1.4;
	padding: 11px 0;
}
.company_tbl tr:last-of-type th, .company_tbl tr:last-of-type td{
	border-bottom: none;
}
.about_company2{
	text-align: center;
	padding-bottom: 115px;
}
@media screen and (min-width: 769px) {
	.about_company{
		max-width: 1002px;
		padding: 0 40px;
	}
	.about_company .ttl{
		writing-mode: tb-rl;
		-webkit-writing-mode : vertical-rl;
		margin-top: 14px;
		position: relative;
		width: 94px;
	}
	.about_company .ttl .txt{
		display: block;
		padding-right: 0.2em;
		width: 100%;
	}
	.about_company .ttl .illust{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.company_tbl{
		max-width: 683px;
		margin-left: 7%;
	}
	.company_tbl th, .company_tbl td{
	}

	.company_tbl th{
		padding-left: 24px;

	}
	.company_tbl td{
		width: 420px;

	}
}
@media screen and (min-width: 769px) and (max-width: 1280px) {
}
@media screen and (max-width: 768px) {
	.about_company{
	}
	.about_company1{
		margin-bottom: 8vw;
	}
	.about_company .ttl{
		display: flex;
		align-items: center;
		position: relative;
		font-size: 6vw;
		justify-content: center;
		padding-left: 16vw;
		margin-bottom: 1.3vw;
	}
	.about_company .ttl{

	}
	.about_company .ttl .txt{
	}
	.about_company .ttl .illust{
		width: 12vw;
		margin-left: 4vw;
	}


	.company_tbl{

	}
	.company_tbl th, .company_tbl td{
		padding: 2.6vw 0;
	}
	.company_tbl th{
		width: 6.5em;

	}
	.company_tbl td{

	}

	.about_company2{
		text-align: center;
		padding-bottom: 15vw;
	}

}

/*--btn--*/
.arwbtn{
	background: #fff;
	display: block;
	margin: 50px auto 0;
	text-align: center;
	width: 227px;
	padding: 13px 24px 8px 0;
}
.arwbtn p{
	text-align: center;
	line-height: 1;
	position: relative;
	z-index: 1;
}
.arwbtn p.txt1{
	font-size: 1.9rem;
}
.arwbtn p.txt1:after{
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	right: 24px;
	border: 1px solid #000;
	border-left: none;
	border-bottom: none;
	top: 0.1em;
	transform: rotate(45deg);
	transition: .3s;
}

@media screen and (min-width: 769px) {
	.arwbtn{
		max-width: 446px;
	}
	.arwbtn:hover{
		opacity: 1;
		background: #000;
		color: #fff;
	}
	.arwbtn:hover p.txt1:after{
		border-color: #fff;
	}

}
@media screen and (max-width: 768px) {
	.arwbtn{
		margin: 6vw auto 0;
		padding: 3.3vw 0.8vw 1.7vw 0;
		width: 100%;
	}
	.arwbtn p.txt1{
		font-size: 3.7vw;
		display: inline-block;
	}
	.arwbtn p.txt1:after{
		width: 2.8vw;
		height: 2.8vw;
		right: -5vw;
	}
}