@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;
}

/*=============================================================
#greeting
=============================================================*/
#greeting {
width: 1200px;
margin: 40px auto 100px;
}
#greeting .box{
display: flex;
align-items: center;
justify-content:space-between;
margin: 30px auto;
}
#greeting .box .left{
padding-right: 90px;
}
#greeting .box .right{
text-align: left;
}
#greeting .box .right p{
margin: 30px 0 0;
}
/*=============================================================
#company
=============================================================*/
#company {
width: 1200px;
margin: 40px auto 100px;
}
#company .box {
margin: 30px auto;
}
#company dl {
display: flex;
align-items: stretch;
text-align: left;
}
#company dl dt {
padding: 2em;
width: 252px;
border-bottom: solid 1px #2E74B4;
box-sizing: border-box;
display: flex;
align-items: center;
}
#company dl dd {
padding: 2em;
border-bottom: solid 1px #ccc;
width: 948px;
box-sizing: border-box;
display: flex;
align-items: center;
}
/*=============================================================
#map
=============================================================*/
#map {
width: 1200px;
margin: 40px auto 100px;
}
#map .box {
margin: 30px auto;
}

@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;
}
/*=============================================================
#greeting
=============================================================*/
#greeting {
width: 90%;
margin: 40px auto 60px;
text-align: center;
}
#greeting .box{
display: block;
margin: 30px auto;
}
#greeting .box .left{
padding-right: 0;
width: 50%;
margin: 0 auto 20px;
}
#greeting .box .right{
text-align: left;
}
#greeting .box .right p{
margin: 30px 0 0;
}
#greeting .box .right .name {
width: 30%;
}
/*=============================================================
#company
=============================================================*/
#company {
width: 90%;
margin: 40px auto 60px;
text-align: center;
}
#company .box {
margin: 30px auto;
}
#company dl {
display: block;
text-align: left;
}
#company dl dt {
padding: 1em 2em 0;
width: auto;
border-bottom: none;
box-sizing: border-box;
color: #2E74B4
}
#company dl dd {
padding: 1em 2em;
border-bottom: solid 1px #ccc;
width: auto;
box-sizing: border-box;
}
/*=============================================================
#map
=============================================================*/
#map {
width: 90%;
margin: 40px auto 60px;
text-align: center;
}
#map .box {
margin: 30px auto;
}

}