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

/*PC*/
@media print, screen and (min-width: 769px) {

.bg_img {
	background:url(../images/about/bg_img01.jpg) center center no-repeat;
	background-size:cover;
	position:relative;
	padding:10rem 4.5rem 6rem;
	margin:150px auto 100px;
}

.bg_img h3 {
	position:absolute;
	top:-10vh;
	left:0;
	background:#000000;
	padding:2%;
	font-size:30px;
	line-height:2;
	color:#FFFFFF;
	z-index:10;
}

.illust_img {
	width:66%;
	margin:0 auto 60px;
}

.illust_img img {
	width:100%;
	height:auto;
}

.bg_img .h4_box {
	text-align:center;
	margin:0 auto 60px;
}

.bg_img h4 {
	padding:1% 2%;
	background:#fff041;
	font-size:22px;
	text-align:center;
	display:inline-block;
}

.bg_img p {
	color:#FFFFFF;
	font-size:18px;
}


.about_block {
	width:100%;
	position:relative;
}

.about_block::before {
    background: #e4e4ea;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top:0;
	left:0;
    width: 68.75%;
	height:100rem;
	z-index:-1;
}


.about_bg {
	display: flex;
	justify-content:flex-end;
	position: relative;
	margin:0;
	padding:100px 0;
}

.com_contents_inner {
    width: 40%;
    padding: 0 10%;
}


.com_contents_inner_box01 {
	background:#000000;
	padding:4%;
	color:#FFFFFF;
	font-size:1.2em;
	margin:0 auto 40px;
}

.com_contents_inner_box02 {
	background:#1f7acc;
	padding:4%;
	color:#FFFFFF;
	font-size:1.2em;
	margin:0 auto 70px;
}

.com_contents_inner_box03 {
	background:#FFFFFF;
	padding:4%;
}

.com_contents_inner_box03 h4 {
	display:inline-block;
	background:#f7b52d;
	color:#000000;
	text-align:center;
	font-size:1.2em;
	padding:0 5px;
}

.com_contents_img {
	position: absolute;
	top: 100px;
	left: 0;
	width: 40%;
}

}


/*sp*/
@media only screen and (max-width: 768px) {

.bg_img {
	background:url(../images/about/bg_img01.jpg) center center no-repeat;
	background-size:cover;
	position:relative;
	padding:0 1rem 1rem;
	margin:60px auto;
}


.bg_img h3 {
	position: relative;
	top:0;
	left:0;
	background:#000000;
	padding:2%;
	font-size:14px;
	line-height:2;
	color:#FFFFFF;
	z-index:10;
	margin:0 auto 20px;
}

.illust_img {
	width:90%;
	margin:0 auto 60px;
}

.illust_img img {
	width:100%;
	height:auto;
}

.bg_img .h4_box {
	text-align:center;
	margin:0 auto 60px;
}

.bg_img h4 {
	padding:1% 2%;
	background:#fff041;
	font-size:12px;
	text-align:left;
	display:inline-block;
}

.bg_img p {
	color:#FFFFFF;
	font-size:14px;
}


.about_block {
	width:100%;
	position:relative;
}

.about_block::before {
    background: #e4e4ea;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top:0;
	left:0;
    width: 68.75%;
	height:100rem;
	z-index:-1;
}


.about_bg {
	display: block;
	justify-content:flex-end;
	position: relative;
	margin:0;
	padding:20px 0;
}

.com_contents_inner {
    width: 90%;
    padding: 0 5%;
}


.com_contents_inner_box01 {
	background:#000000;
	padding:4%;
	color:#FFFFFF;
	font-size:1.2em;
	margin:0 auto 40px;
}

.com_contents_inner_box02 {
	background:#1f7acc;
	padding:4%;
	color:#FFFFFF;
	font-size:1.2em;
	margin:0 auto 70px;
}

.com_contents_inner_box03 {
	background:#FFFFFF;
	padding:4%;
}

.com_contents_inner_box03 h4 {
	display:inline-block;
	background:#f7b52d;
	color:#000000;
	text-align:center;
	font-size:1.2em;
	padding:0 5px;
}

.com_contents_img {
	position: relative;
	top: 0;
	left: 0;
	width:90%;
	margin:0 auto 30px;
}


}