@charset "utf-8";
/* ==========================================================

title : 東建コーポレーションのCSRへの取り組み
scope : 東建コーポレーションのCSRへの取り組み

last modify : 2020/04/30 373_oowaki

========================================================== */

div.main_image {
  background: url("../image/bg_main_image.png") 0 0 / 100% auto no-repeat;
  box-sizing: border-box;
}
div.main_image h1 {
  font-size: 190%;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "Noto Serif JP", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  text-shadow: -1px 1px 3px rgba(0,0,0,0.3);
}
.vision {
  background: url("../image/bg_our_visiton.png") 50% 0 no-repeat;
  text-shadow: 0 0 0.8em #fff, 0 0 0.6em #fff, 0 0 0.5em #fff, 0 0 0.45em #fff, 0 0 0.4em #fff, 0 0 0.35em #fff, 0 0 0.3em #fff, 0 0 0.25em #fff, 0 0 0.2em #fff, 0 0 0.15em #fff, 0 0 0.1em #fff;
}
.vision h2 {
  font-size: 176.47%;
  font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "游明朝", YuMincho, "Noto Serif JP", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
  line-height: 1;
  color: #293f7e;
  text-align: center;
}
.vision div.eng {
  padding: 0.2em;
  color: #293f7e;
  text-align: center;
}
.vision .about h3 {
  font-weight: 400;
  line-height: 1.8;
}
ol.items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ol.items li {
}
ol.items li a {
  display: block;
  color: #000;
}
ol.items li a dl {
}
ol.items li a dl dt {
  display: flex;
  align-items: center;
  font-size: 129.41%;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 0 7px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.7);
}
ol.items li:nth-child(1) a dl dt {
  background: url("../image/bg_nav_01.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(2) a dl dt {
  background: url("../image/bg_nav_02.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(3) a dl dt {
  background: url("../image/bg_nav_03.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(4) a dl dt {
  background: url("../image/bg_nav_04.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(5) a dl dt {
  background: url("../image/bg_nav_05.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(6) a dl dt {
  background: url("../image/bg_nav_06.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(7) a dl dt {
  background: url("../image/bg_nav_07.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(8) a dl dt {
  background: url("../image/bg_nav_08.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li:nth-child(9) a dl dt {
  background: url("../image/bg_nav_09.jpg") 0 0 / 100% auto no-repeat;
}
ol.items li a dl dt span {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
}
ol.items li a dl dd {
  padding: 0.3em 1.5em 0.3em 0.5em;
  font-size: 82.35%;
  background: url("../image/bg_item_arrow.png") 100% 100%  no-repeat;
}

@media screen and (max-width: 812px) {
  div.main_image {
    height: 32vw;
    padding: 7.5vw 0 0 5vw;
  }
  .vision {
    padding: 6vw 4vw 0;
    margin: 0 auto 6vw;
    background-position: 50% 3vw;
    background-size: 85% auto;
  }
  .vision h2 {
    margin: 0 0 3vw;
    line-height: 1.15;
  }
  .vision div.eng {
    width: 9em;
    margin: 0 auto 3vw;
    border: 0.27vw solid #293f7e;
  }
  .vision .about {
    margin: 0 2vw;
    padding: 4vw 0 0;
  }
  .vision .about h3 {
    border-bottom: 0.27vw solid #7fc4c4;
  }
  .vision .about p {
    margin: 0.5em 0.5em 0;
  }
  ol.items {
    justify-content: center;
  }
  ol.items li {
    width: 47vw;
    margin: 0 1vw 4vw;
  }
  ol.items li a {
    border: 0.27vw solid #0874c0;
  }
  ol.items li a dl {
  }
  ol.items li a dl dt {
    height: 35.5vw;
    font-size: 115%;
  }
  ol.items li a dl dd {
    height: 29vw;
    background-size: 8vw auto;
    font-size: 90%;
  }
}

@media screen and (min-width: 813px) {
  div.main_image {
    width: 950px;
    height: 300px;
    padding: 96px 0 0 72px;
    margin: 0 auto;
  }
  div.main_image h1 {
    font-size: 50px;
  }
  .vision {
    width: 690px;
    padding: 40px 0 0;
    margin: 0 auto 40px;
    background-position: 50% 20px;
    background-size: 331px auto;
  }
  .vision h2 {
    margin: 0 0 18px;
  }
  .vision div.eng {
    width: 170px;
    margin: 0 auto 40px;
    border: 1px solid #293f7e;
  }
  .vision .about {
    width: 650px;
    margin: 0 auto;
    padding: 25px 0 0;
  }
  .vision .about h3 {
    border-bottom: 1px solid #7fc4c4;
  }
  .vision .about p {
    margin: 0.5em 0.5em 0;
  }
  ol.items {
    width: 860px;
    margin: 0 auto;
  }
  ol.items li {
    width: 268px;
    margin: 0 0 30px;
  }
  ol.items li a {
    border: 1px solid #0874c0;
  }
  ol.items li a dl dt {
    position: relative;
    width: 266px;
    height: 200px;
  }
  ol.items li a dl dt::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
  }
  ol.items li a:hover dl dt::after {
    opacity: 0.25;
  }
  ol.items li a dl dd {
    background-size: 30px auto;
  }
}