@charset "UTF-8";
@import url(../../css/common.css);
/*==================================================================*/
/* contact style css　*/
/*==================================================================*/
/* Page Settings */
/*------------------------------------*/
/* titlearea
---------------------------------------- */
#title {
  background: url("../image/title_bg.jpg") center 100% no-repeat;
  background-size: cover;
}
#title h1 {
  width: 100%;
  white-space: nowrap;
}

/* message
---------------------------------------- */
.message {
  position: relative;
  width: 100%;
  padding: 2em 0 0 0;
  background: url("/common_img/base_blue.gif") repeat 0 0;
  margin-bottom: 2em;
}
.message .president {
  zoom: 1;
}
.message .president:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
}
.message .president .photo-area {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  max-width: 771px;
  height: 100%;
  padding-left: 80px;
}
.message .president .photo-area p {
  height: 100%;
  width: 100%;
}
.message .president .photo-area p.object-fit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;";
}
.message .president .txt-area {
  padding: 2em 0;
  /* width: 55%;
  float: left; */
}
.message .president .txt-area h3 {
  font-size: 3em;
  line-height: 1.4;
  color: #005bac;
  margin-bottom: .5em;
}
.message .president .txt-area p {
  margin-bottom: 1em;
  font-size: 1.2em;
}
.message .president .txt-area p.name {
  text-align: right;
}

/* philosophy
---------------------------------------- */
.philosophy {
  max-width: 1170px;
  margin: 0 auto 4em;
}
.philosophy .philosophy-area {
  padding: 2.5% 0;
  margin: 0 auto;
  background: url("../image/idea_bg.jpg") no-repeat 0 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.philosophy .philosophy-area h3 {
  font-size: 2em;
  line-height: 2em;
  text-align: center;
}
.philosophy .philosophy-area h3 span {
  font-size: 1.5em;
  color: #eb4800;
}

/* about
---------------------------------------- */
.about {
  margin-bottom: 4em;
  background: url("../image/compeny_bg.jpg") no-repeat 0 100%;
  background-size: cover;
}
.about .t-area {
  margin-bottom: 3em;
}
.about .detail {
  padding-bottom: 40%;
}
.about .detail dl {
  font-size: 1.1em;
  max-width: 840px;
  padding: 0.5% 2%;
  margin: 0 auto 0.5%;
  border-bottom: 1px solid #939393;
}

/* setsubi
---------------------------------------- */
.setsubi {
  margin-bottom: 4em;
}
.setsubi .detail {
  margin-right: 3%;
}
.setsubi .detail li {
  margin-right: 5%;
  padding: 1%;
  border-bottom: 1px solid #939393;
}
.setsubi .photo-area ul li {
  margin: 0 1%;
}
.setsubi .photo-area ul li:first-child {
  margin: 0;
}
.setsubi .photo-area ul li:last-child {
  margin: 0;
}

/* movie
---------------------------------------- */
.yt-wrapper {
  max-width: 640px;
  min-width: 280px;
  margin: 0 auto 4em;
}
.yt-wrapper .movie.sp {
  display: none;
}
.yt-wrapper .movie iframe {
  width: 100%;
}
.yt-wrapper .movie.pc p {
  text-align: center;
}

/* accessmap
---------------------------------------- */
#map {
  margin: 0 auto 5em;
}
#map iframe {
  width: 100%;
  margin: 0 auto 2em;
}
#map p {
  /* margin: 0 auto;
  width: 40%;
  text-align: center; */
}
#map .base-btn{
  text-align: center;  
}
#map .base-btn a{
  width: 100%;
  max-width: 600px;
  display: inline-block;
}

#map_canvas {
  margin: 0 auto 2em;
  width: 100%;
  position: relative;
  padding-bottom: 450px;
  height: 0;
  overflow: hidden;
}

/* 省エネ
---------------------------------------- */
.energy{
  margin-bottom: 7em;
  max-width: 1170px;
}
.energy dl dt{
  margin-bottom: 1.5em;
}
.energy .base-btn{
  text-align: center;  
}
.energy .base-btn a{
  width: 100%;
  max-width: 600px;
  display: inline-block;
  white-space: normal;
}

@media screen and (max-width: 1000px) {
    /* message
	---------------------------------------- */
  .message .president {
    zoom: 1;
  }
  .message .president:after {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    height: 0;
  }
  .message .president .photo-area {
    position: static;
    width: 100%;
    max-height: 500px;
    height: auto;
    padding-left: 0;
    margin: 0 auto 1em;
  }
  .message .president .photo-area p {
    height: auto;
    text-align: center;
  }
  .message .president .photo-area p img {
    height: auto;
    width: 100%;
  }
  .message .president .txt-area {
    width: 100%;
    float: none;
  }
  .message .president .txt-area p {
    font-size: 1em;
  }
  .message .president .txt-area p.name {
    width: 60%;
    margin: 0 0 0 auto;
  }
}
@media screen and (max-width: 767px) {
  /* titlearea
  ---------------------------------------- */
  #title h1 {
    width: 100%;
    white-space: nowrap;
  }
  .message{
    padding-top: 0;
  }
  .message .president .txt-area h3{
    margin-bottom: 1em;
    font-size: 1.8em;
  }

  /* philosophy
  ---------------------------------------- */
  .philosophy {
    width: 100%;
  }
  .philosophy .philosophy-area {
    margin: 0;
    padding: 5% 0;
  }
  .philosophy .philosophy-area h3 {
    font-size: 1.2em;
    line-height: 1.6em;
  }
  .philosophy .philosophy-area h3 span {
    font-size: 1.3em;
    color: #eb4800;
  }
  .philosophy p img {
    vertical-align: top;
  }

  /* about
  ---------------------------------------- */
  .about {
    background: none;
  }
  .about .t-area {
    margin-bottom: 1em;
  }
  .about .detail {
    padding-bottom: 0px;
  }
  .about .detail dl {
    width: 100%;
    padding: 0;
    border: none;
  }
  .about .detail dl dt {
    background: #e6e6e6;
    padding: 2% 2% 2% 3%;
  }
  .about .detail dl dd {
    padding: 4% 3%;
  }

  /* setsubi
  ---------------------------------------- */
  .setsubi .detail dl {
    width: 96%;
    padding: 0.5%;
    margin: 0 auto 1em;
  }
  .setsubi .photo-area ul {
    width: 80%;
    margin: 0 auto;
  }
  .setsubi .photo-area ul li {
    margin: 0 0 1em 0;
  }
  .setsubi .photo-area ul li:first-child {
    margin: 0 0 1em 0;
  }
  .setsubi .photo-area ul li img {
    width: 100%;
    margin: 0 auto;
  }

  /* movie
  ---------------------------------------- */
  .yt-wrapper .movie.sp {
    display: block;
  }
  .yt-wrapper .movie.pc {
    display: none;
  }

  /* acsess
  ---------------------------------------- */
  /* #map p {
    width: 80%;
  } */

  #map_canvas {
    margin-bottom: 3em;
    position: relative;
    width: 100%;
    height: 15% !important;
    padding: calc(500 / 560 * 100%) 0 0;
  }
}