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

	#company
	- mv
	- content

-----------------------------------------*/

/*----------------------------------------
	mv
-----------------------------------------*/
#mv {
	background: #62b1d9 url("../img/c_mv_bg01.jpg") no-repeat right top;
	background-size: 1320px auto;
}
@media screen and (max-width: 767px) {
	#mv {
		background-size: auto 100%;
	}
}

/*----------------------------------------
	content
-----------------------------------------*/
#content>div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
#content>div>section>a>div {
	position: relative;
}
#content>div>section>a>div>div {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	padding: 15px 0;
	text-align: right;
	background-color: rgba(51,51,51,0.85);
}
#content>div>section>a>div>div>h1 {
	position: relative;
	padding: 0 45px 0 20px;
	color: #fff;
	line-height: 1.5em;
}
#content>div>section>a>div>div>h1>span {
	-webkit-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.1s;
         -o-transition-duration: 0.1s;
            transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
#content>div>section>a>div>div>h1::after {
	content: "";
	position: absolute;
	top: calc(50% - 16px);
	right: 16px;
	width: 13px;
	height: 13px;
	border-right: 3px solid #00a0e9;
	border-bottom: 3px solid #00a0e9;
	-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	-webkit-transform-origin: right bottom;
	    -ms-transform-origin: right bottom;
	        transform-origin: right bottom;
}

#content>div>section>a figure {
	position: relative;
}
#content>div>section>a figure::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 0.1s;
         -o-transition-duration: 0.1s;
            transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
#content>div>section>a:hover figure::after {
	background-color: rgba(255,255,255,0.5);
}
#content>div>section>a:hover div>h1>span {
	color: #00a0e9;
}

#content>div:nth-child(1)>section {
	width: calc(49.9999% - 20px);
	max-width: calc(49.9999% - 20px);
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	margin-bottom: 40px;
}
#content>div:nth-child(1)>section:first-child {
	margin-right: 40px;
}
#content>div:nth-child(2)>section {
	width: calc((99.9999% - 80px) / 3);
	max-width: calc((99.9999% - 80px) / 3);
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	margin-right: 40px;
	margin-bottom: 40px;
}
#content>div:nth-child(2)>section:nth-child(3n){
	margin-right: 0;
}

@media screen and (max-width: 767px) {
#content>div>section>a>div>div {
	padding: 8px 0;
}
#content>div>section>a>div>div>h1 {
	padding: 0 25px 0 10px;
	line-height: 1.2;
}
#content>div>section>a>div>div>h1::after {
	top: calc(50% - 11px);
	right: 11px;
	width: 10px;
	height: 10px;
	border-width: 2px;
}

#content>div:nth-child(1)>section {
	width: 100%;
	max-width: 100%;
	margin-bottom: 30px;
}
#content>div:nth-child(1)>section:first-child {
	margin-right: 0;
}
#content>div:nth-child(1)>section>a>div>div>h1 {
	padding: 0 30px 0 10px;
}
#content>div:nth-child(2)>section {
	width: calc((100% - 20px) / 2);
	max-width: calc((100% - 20px) / 2);
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	margin-right: 20px;
	margin-bottom: 30px;
}
#content>div:nth-child(2)>section:nth-child(3n){
	margin-right: 20px;
}
#content>div:nth-child(2)>section:nth-child(2n){
	margin-right: 0;
}
#content>div:nth-child(2)>section>a>div>div>h1::after {
	right: 10px;
}
}