@charset "UTF-8";

/*=============================================================
#mainimage
=============================================================*/
#page_mainimage {
width: 100%;
height: 300px;
background-image: url("../image/page_mainimage.jpg");
background-size: cover;
position: relative;
overflow: hidden;
margin-top: 70px;
display: flex;
align-items: center;
justify-content: center;
}
#page_mainimage .box{
position: relative;
width: 600px;
height: 200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#page_mainimage .box:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2E74B6;
mix-blend-mode: multiply;
z-index: 1;
}
#page_mainimage .box .box_text{
z-index: 100;
position: relative;
}
/*=============================================================
#page
=============================================================*/

#page .background-box1 p,
#page .background-box2 p,
#page .background-box3 p {
width: 580px;
margin: 30px auto;
}
#page .box_text {
width: 1200px;
margin: 0 auto;
}
#page .background-box1 {
margin: 100px auto 0;
padding: 50px 0 80px;
    text-align: center;
    background: linear-gradient(to right, #fff 0%, #fff 40%, #EAFFEF 40%,  #EAFFEF 60%, #fff 60%, #fff 100%);
}
#page .box1_img1 {
text-align: left;
}
#page .box1_img2 {
text-align: right;
margin-top: -126px;
}
#page .box1_img3 {
text-align: left;
margin-top: -115px;
padding-left: 115px;
}
#page .background-box2 {
margin: 0 auto;
padding: 50px 0 80px;
    text-align: center;
    background: linear-gradient(to right, #fff 0%, #fff 40%, #E7F7FF 40%,  #E7F7FF 60%, #fff 60%, #fff 100%);
}
#page .box2_img0 {
margin-bottom: 30px;
}
#page .box2_img1 {
text-align: right;
}
#page .box2_img2 {
text-align: left;
margin-top: -126px;
}
#page .box2_img3 {
text-align: right;
margin-top: -115px;
padding-right: 115px;
}
#page .box2_img4 {
text-align: left;
margin-top: -50px;
padding-left: 100px;
}
#page .background-box3 {
margin: 0 auto 100px;
padding: 50px 0 80px;
    text-align: center;
    background: linear-gradient(to right, #fff 0%, #fff 40%, #E7EBFF 40%,  #E7EBFF 60%, #fff 60%, #fff 100%);
}
#page .box3_img0 {
margin-bottom: 30px;
}
#page .box3_img1 {
text-align: left;
}
#page .box3_img2 {
text-align: right;
margin-top: -126px;
}
#page .box3_img3 {
text-align: left;
margin-top: -115px;
padding-left: 115px;
}

@media screen and (max-width: 960px) {
/*=============================================================
#mainimage
=============================================================*/
#page_mainimage {
width: 100%;
height: 200px;
background-image: url("../image/page_mainimage.jpg");
background-size: cover;
position: relative;
overflow: hidden;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#page_mainimage .box{
position: relative;
width: 80%;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#page_mainimage .box:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2E74B6;
mix-blend-mode: multiply;
z-index: 1;
}
#page_mainimage .box .box_text{
z-index: 100;
position: relative;
}
/*=============================================================
#page
=============================================================*/

#page .background-box1 p,
#page .background-box2 p,
#page .background-box3 p {
width: 100%;
margin: 30px auto;
}
#page .box_text {
width: 90%;
margin: 0 auto;
}
#page .background-box1 {
margin: 50px auto 0;
padding: 50px 0 50px;
    text-align: center;
    background: linear-gradient(to right, #fff 0%, #fff 40%, #EAFFEF 40%,  #EAFFEF 60%, #fff 60%, #fff 100%);
}
#page .box1_img1 {
text-align: left;
width: 80%;
}
#page .box1_img2 {
text-align: right;
width: 55%;
margin: -10% 0 0 auto; 
}
#page .box1_img3 {
text-align: left;
width: 40%;
margin: 0;
padding: 0;
}
#page .background-box2 {
margin: 0 auto;
padding: 50px 0 50px;
    text-align: center;
    background: linear-gradient(to right, #fff 0%, #fff 40%, #E7F7FF 40%,  #E7F7FF 60%, #fff 60%, #fff 100%);
}
#page .box2_img1 {
text-align: right;
width: 80%;
margin: 0 0 0 auto;
}
#page .box2_img2 {
text-align: left;
width: 55%;
margin: -10% auto 0 0; 
}
#page .box2_img3 {
text-align: right;
width: 40%;
padding: 0;
margin: 0 0 0 auto;
}
#page .box2_img4 {
text-align: left;
width: 40%;
padding: 0;
margin: -40px auto 0 0;
}
#page .background-box3 {
margin: 0 auto 60px;
padding: 50px 0 50px;
    text-align: center;
    background: linear-gradient(to right, #fff 0%, #fff 40%, #E7EBFF 40%,  #E7EBFF 60%, #fff 60%, #fff 100%);
}
#page .box3_img1 {
text-align: left;
width: 80%;
}
#page .box3_img2 {
text-align: right;
width: 55%;
margin: -10% 0 0 auto; 
}
#page .box3_img3 {
text-align: left;
width: 40%;
margin: 0;
padding: 0;
}
}