@charset "utf-8";

#fv { background: url(../images/company/fv.jpg) center center no-repeat; background-size: cover;}

#message { padding: 100px 0 120px;}
#message div div.left img { float: left; width: 50%;}
#message div div.right img { float: right; width: 50%;}
#message div div.left, 
#message div div.right { padding: 0 0 5%; }
#message div div.left div { float: right; width: 45%; padding: 0 0 0 5%; color: #2c2c2c;}
#message div div.right div { float: left; width: 45%; padding: 0 5% 0 0; color: #2c2c2c;}

#message h4 { font-size: 30px; text-align: center; font-weight: bold; line-height: 160%; padding: 0 0 50px;}
#message div div div p.text { }
#message p.ceo { text-align: right; font-size: 26px; color: #33366a; padding: 100px 0 0 0; }
#message p.ceo span { font-size: 16px; padding: 0 10px 0 0;}

#philosophy { background: url(../images/company/bg.gif) center top no-repeat #eeeeee; background-size: cover; padding: 115px 0; color: #33366a;}
#philosophy h4 { font-size: 30px; text-align: center; padding: 0 0 60px;}

#logo { background: url(../images/company/bg_01.gif); color: #fff; padding: 100px 0 135px;}
#logo h3.h3 span { color: #fff;}
#logo .box img { float: left;}
#logo .box ul { float: left; width: 700px; padding: 0 0 0 79px;}
#logo .box ul li:first-child { padding: 0 0 70px;}
#logo .box ul li h4 { font-size: 30px; padding: 0 0 35px;}

#profile { padding: 115px 0 120px;}
#profile div div { border: 5px solid #f6f6f6; font-size: 14px; color: #181818;}
#profile dl dd ul li { padding: 4px 0;}
#profile dl dt { font-weight: bold;}

#access { padding: 0 0 90px; }
#access p.map { text-align: center; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 14px;}
#access p.map a { text-decoration: underline; color: #231815;}
#access p.map img { padding: 0 5px 0 0;}
#access .gmap { position: relative; padding-bottom: 500px; padding-top: 30px; height: 0; overflow: hidden; }
.gmap iframe,
.gmap object,
.gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 500px; }

p.look { padding: 75px 0 110px;}

#actionplan { background: #efefef; padding: 80px 0; }
#actionplan .outer-box { background: #fff; padding: 80px 150px; box-sizing: border-box; }
#actionplan .outer-box p.text { font-size: 16px; line-height: 150%; }
#actionplan .outer-box h5 { padding: 30px 0 5px; font-size: 16px; border-bottom: 1px solid #132a88; margin: 0 0 15px; }
#actionplan .outer-box .box { border: 1px solid #132a88; padding: 15px; margin: 50px auto 0; }
#actionplan .outer-box .box .left { float: left; font-size: 16px; background: #132a88; color: #fff; text-align: center; vertical-align: middle; padding: 20px 13px; border-radius: 50%; -webkit-border-radius: 50%;  }
#actionplan .outer-box .box .right { float: left; font-size: 16px; padding: 5px 0 0 20px; }


@media only screen and (max-width:640px){

#fv { background-size: cover;}
#head .head-contact { display: none;}

#message { padding: 40px 0 40px;}
#message div div img { float: none; width: 100%; height: auto}
#message div div div { float: none; width: 100%; padding: 0;}
#message div div.left img { float: none; width: 100%; height: auto}
#message div div.right img { float: none; width: 100%; height: auto}
#message div div.left div { float: none; width: 100%; padding: 5% 0 0; color: #2c2c2c;}
#message div div.right div { float: none; width: 100%; padding: 5% 0 0; color: #2c2c2c;}
#message div h4 { font-size: 20px; padding: 15px 0 20px; text-align: center;}
#message div div div p.text { padding: 0 0 20px;}
#message p.ceo { font-size: 20px;}
#message p.ceo span { font-size: 14px;}

#philosophy { background-size: cover; padding: 40px 0;}
#philosophy h4 { font-size: 18px; padding: 0 0 20px; font-weight: bold;}

#logo { padding: 40px 0 50px;}
#logo .box { text-align: center;}
#logo .box p { text-align: left; }
#logo .box img { float: none; width: 160px; height: auto;}
#logo .box ul { float: none; width: 100%; padding: 35px 0 0;}
#logo .box ul li:first-child { padding: 0 0 25px;}
#logo .box ul li h4 { font-size: 18px; padding: 0 0 15px; font-weight: bold;}

#profile { padding: 40px 0 50px;　}
#profile dl dt { text-align: left; font-weight: bold;}
#profile dl dd { text-align: left; }

#access { padding: 0 0 40px; }
#access p.map { font-size: 12px;}
#access .gmap { position: relative; padding-bottom: 500px; padding-top: 30px; height: 0; overflow: hidden; }
.gmap iframe,
.gmap object,
.gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 500px; }

p.look { padding: 25px 0 30px;}

#actionplan { padding: 50px 0 25px; }
#actionplan h3.h3 img { margin: 0 auto; height: 60px; }
#actionplan .outer-box { padding: 30px 10px; margin: 0 10px; }
#actionplan .outer-box p.text { font-size: 14px; line-height: 150%; }
#actionplan .outer-box h5 { padding: 30px 0 5px; font-size: 16px; }
#actionplan .outer-box .box { padding: 15px; margin: 30px auto 0; text-align: center; }
#actionplan .outer-box .box .left { float: none; display: inline-block; font-size: 14px; padding: 20px 13px; border-radius: 50%; -webkit-border-radius: 50%;  }
#actionplan .outer-box .box .right { float: none; font-size: 14px; padding: 5px 0 0 0; }

}