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

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



/* head
--------------------------------------------*/
.headArea .head_img {
background: url("../images/csr/hed_img.jpg") center bottom no-repeat;
background-size: cover;}



.box { position: relative; }
.box::before {
content: '';
position: absolute;
right: 0;
top: 3%;
width: 65%;
height: 45%;
background: #003082;
clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%);
z-index: -1;
}
.box::after {
content: '';
position: absolute;
left: 0;
bottom: 3%;
width: 65%;
height: 45%;
background: #003082;
clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%);
z-index: -1;
}

.box p.read { color: #fff; margin-bottom: 100px; }
.box .flex_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 100px; }
.box .flex_wrap .flex_box { width: 45%; }
.box .flex_wrap .flex_box p { color: #fff; margin-top: 30px; }

.box .bg_img { margin-bottom: 100px; }

.box h4 { font-size: 2.4em; border-bottom: 1px solid #FFFFFF; padding-bottom: 20px; margin-bottom: 100px; }

.box .boxflex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 100px; }
.box .boxflex .img { width: 48%; }
.box .boxflex .txt { width: 48%; color: #fff; }

.box .bgbox { background: #003082; padding: 30px; margin-bottom: 100px; }
.box .bgbox h5 { font-size: 1.1em; margin-bottom: 40px; }



}







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



/* head
--------------------------------------------*/
.headArea .head_img {
background: url("../images/csr/hed_img.jpg") right no-repeat;
background-size: cover;
}



.box { position: relative; }
.box::before {
content: '';
position: absolute;
right: 0;
top: 3%;
width: 65%;
height: 45%;
background: #003082;
clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%);
z-index: -1;
}
.box::after {
content: '';
position: absolute;
left: 0;
bottom: 3%;
width: 65%;
height: 45%;
background: #003082;
clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%);
z-index: -1;
}

.box p.read { color: #fff; margin-bottom: 50px; }
.box .flex_wrap { margin-bottom: 50px; }
.box .flex_wrap .flex_box { margin-bottom: 30px; }
.box .flex_wrap .flex_box p { color: #fff; margin-top: 20px; }

.box .bg_img { margin-bottom: 50px; }

.box h4 { font-size: 1.4em; border-bottom: 1px solid #FFFFFF; padding-bottom: 20px; margin-bottom: 50px; }

.box .boxflex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.box .boxflex .img { width: 48%; }
.box .boxflex .txt { width: 48%; color: #fff; }

.box .bgbox { background: #003082; padding: 20px; margin-bottom: 50px; }
.box .bgbox h5 { font-size: 1.1em; margin-bottom: 20px; }



}