@charset "UTF-8";
@import url(./common.css);
/*==================================================================*/
/* style css　*/
/*==================================================================*/
h2.base-title {
  margin-bottom: 3em;
  text-align: center;
}
h2.base-title.w-text {
  color: #fff;
}
h2.base-title span {
  display: inline-block;
  margin: 0 auto 1em;
  line-height: 0;
}
h2.base-title span img {
  height: 55px;
}
h2.base-title em {
  display: block;
  font-size: 1.3rem;
  font-weight: bold;
}

section {
  margin-bottom: 4em;
}

#about #container {
  background: url("/about/image/bg_about_main.png") no-repeat 0 0;
  background-size: contain;
}
#about #container .page-title-area:before {
  background: url("/about/image/main_about_photo.jpg") no-repeat 50% 50%;
  background-size: cover;
}
#about #container #contents #greetings .f-block {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#about #container #contents #greetings .f-block .photo {
  width: 38%;
}
#about #container #contents #greetings .f-block .l-block {
  width: 58%;
  transform: translateX(-50px);
}
#about #container #contents #greetings .f-block .l-block h2.base-title {
  color: #fff;
  text-align: left;
}
#about #container #contents #greetings .f-block .l-block h2.base-title span {
  margin: 0 0 1em 0;
}
#about #container #contents #greetings .f-block .l-block h2.base-title span, #about #container #contents #greetings .f-block .l-block h2.base-title em {
  padding: .5em;
  background: #01326d;
}
#about #container #contents #greetings .f-block .l-block h2.base-title em {
  display: inline-block;
}
#about #container #contents #greetings .f-block .l-block .text-area {
  padding: 1.5em;
  background: #fff;
}
#about #container #contents #greetings .f-block .l-block .text-area .text {
  margin-bottom: 1.5em;
}
#about #container #contents #greetings .f-block .l-block .text-area .name {
  color: #01326d;
  text-align: right;
}
#about #container #contents #greetings .f-block .l-block .text-area .name em {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 1.5em;
}
#about #container #contents #philosophy {
  padding: 5em 0;
  background: url("/about/image/bg_philosophy.jpg") no-repeat 50% 50%;
  background-size: cover;
  text-align: center;
}
#about #container #contents #philosophy .philosophy-read {
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
}
#about #container #contents #philosophy .philosophy-read span {
  display: block;
}
#about #container #contents #company-detail .photo-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2em;
}
#about #container #contents #company-detail .photo-area .photo {
  width: 47%;
}
#about #container #contents #company-detail .table dl {
  display: flex;
  align-items: center;
  background: #01326d;
  border: 1px solid #cccccc;
  border-bottom: none;
}
#about #container #contents #company-detail .table dl:last-child {
  border-bottom: 1px solid #ccc;
}
#about #container #contents #company-detail .table dl dt {
  width: 200px;
  padding: .8em;
  font-weight: bold;
  color: #fff;
  background: #01326d;
}
#about #container #contents #company-detail .table dl dd {
  padding: .8em;
  background: #fff;
  width: calc(100% - 200px);
  border-left: 1px solid #cccccc;
}
#about #container #contents #company-detail .table dl dd .area .sub-title {
  margin-bottom: .3em;
  font-weight: bold;
}
#about #container #contents #company-detail .table dl dd .area .address em {
  display: inline-block;
}
#about #container #contents #company-detail .table dl dd .area:first-child {
  margin-bottom: 1.5em;
}
#about #container #contents #company-detail .table dl dd ol {
  padding-left: 1.5em;
  list-style: decimal;
}
#about #container #contents #company-detail .table dl dd ol li {
  margin-bottom: .5em;
}
#about #container #contents #access {
  padding-top: 3em;
  position: relative;
}
#about #container #contents #access:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 550px;
  background: #01326d;
  z-index: -1;
}
#about #container #contents #access .f-block {
  display: flex;
  justify-content: space-between;
}
#about #container #contents #access .f-block dl {
  width: 48%;
  background: #011b3c;
}
#about #container #contents #access .f-block dl dt {
  padding: 1em;
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
#about #container #contents #access .f-block dl .text {
  padding: 1em;
  color: #fff;
  text-align: center;
}
#about #container #contents #access .f-block dl .text span {
  display: inline-block;
}
#about #container #contents #history {
  margin-bottom: 0;
  padding: 4em 0;
  background: url("/about/image/bg_history.jpg") no-repeat 50% 50%;
  background-size: cover;
}
#about #container #contents #history .detail {
  position: relative;
  color: #fff;
  border-left: 4px dotted #fff;
}
#about #container #contents #history .detail dl {
  display: flex;
  padding-left: 2em;
  align-items: flex-start;
  margin-bottom: 1.5em;
}
#about #container #contents #history .detail dl dt {
  position: relative;
  width: 130px;
  font-weight: bold;
}
#about #container #contents #history .detail dl dt:before {
  content: "";
  position: absolute;
  left: -27px;
  top: 45%;
  transform: translateY(-50%);
  width: 25px;
  height: 2px;
  border-bottom: 4px dotted #fff;
}
#about #container #contents #history .detail dl dd {
  width: calc(100% - 130px);
}

#efforts #container {
  background: url("/about/image/bg_efforts_main.png") no-repeat 0 0;
  background-size: contain;
}
#efforts #container .page-title-area:before {
  background: url("/about/image/main_efforts_photo.jpg") no-repeat 50% 50%;
  background-size: cover;
}
#efforts #container #contents .efforts-read {
  padding: 1.5em;
  background: #eee;
  text-align: center;
}
#efforts #container #contents #safe .inblock {
  padding: 1.5em;
  background: #eeeeee;
}
#efforts #container #contents #safe .inblock .box {
  padding: 1.5em;
  color: #fff;
  background: #000;
}
#efforts #container #contents #safe .inblock .box .box-title {
  margin-bottom: 1em;
  font-size: 1.3em;
  font-weight: bold;
}
#efforts #container #contents #safe .inblock .f-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2em;
}
#efforts #container #contents #safe .inblock .f-box .photo {
  width: 40%;
}
#efforts #container #contents #safe .inblock .f-box .text-box {
  width: 55%;
}
#efforts #container #contents #safe .inblock .f-box .text-box .read {
  margin-bottom: 1em;
}
#efforts #container #contents #safe .inblock .f-box .text-box .btn {
  text-align: right;
}
#efforts #container #contents #safe .inblock .f-block {
  display: flex;
  justify-content: space-between;
}
#efforts #container #contents #safe .inblock .f-block .box {
  width: 48%;
}
#efforts #container #contents #safe .inblock .f-block .box .photo {
  margin-bottom: 1em;
  text-align: center;
}
#efforts #container #contents #safe .inblock .f-block .box .box-title {
  text-align: center;
}
#efforts #container #contents #follow {
  padding-top: 3em;
  position: relative;
}
#efforts #container #contents #follow:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 550px;
  background: #01326d;
  z-index: -1;
}
#efforts #container #contents #follow .f-block {
  display: flex;
  justify-content: space-between;
}
#efforts #container #contents #follow .f-block .box {
  width: 48%;
  padding: 1.5em;
  color: #fff;
  background: #001b3c;
}
#efforts #container #contents #follow .f-block .box .photo {
  margin-bottom: 1em;
  text-align: center;
}
#efforts #container #contents #follow .f-block .box .text-box .box-title {
  margin-bottom: 1em;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}
#efforts #container #contents #follow .f-block .box .text-box .btn {
  text-align: center;
}
#efforts #container #contents #follow .f-block .box:first-child .read {
  margin-bottom: 1em;
}
#efforts #container #contents #contribution {
  margin-bottom: 0;
  padding: 7em 0 8em;
  background: url("/about/image/bg_community.jpg") no-repeat 0 50%;
  background-size: cover;
}
#efforts #container #contents #contribution .base-title span img {
  height: 90px;
}
#efforts #container #contents #contribution .text-box {
  padding: 1.5em;
  color: #fff;
  background: rgba(1, 50, 109, 0.85);
}
#efforts #container #contents #contribution .text-box .box-title {
  margin-bottom: 1em;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
}
#efforts #container #contents #contribution .text-box .box-title span {
  position: relative;
}
#efforts #container #contents #contribution .text-box .box-title span:before, #efforts #container #contents #contribution .text-box .box-title span:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  bottom: 0;
  background: #fff;
}
#efforts #container #contents #contribution .text-box .box-title span:before {
  left: -20px;
  transform: rotate(-15deg);
}
#efforts #container #contents #contribution .text-box .box-title span:after {
  right: -20px;
  transform: rotate(15deg);
}
#efforts #container #contents #contribution .text-box .read {
  text-align: center;
}

@media all and (-ms-high-contrast: none) {
  #about #greetings h2.base-title img {
    width: 444px;
  }
  #about #philosophy h2.base-title img {
    width: 502px;
  }
  #about #company-detail h2.base-title img {
    width: 410px;
  }
  #about #access h2.base-title img {
    width: 317px;
  }
  #about #history h2.base-title img {
    width: 347px;
  }

  #efforts #safe h2.base-title img {
    width: 325px;
  }
  #efforts #follow h2.base-title img {
    width: 472px;
  }
  #efforts #contribution h2.base-title img {
    width: 506px;
  }
}
/*===========================================================================*/
/*  media quary:1200px  */
/*===========================================================================*/
/*===========================================================================*/
/*  media quary:1000px  */
/*===========================================================================*/
@media screen and (max-width: 1025px) {
  h2.base-title {
    margin-bottom: 3em;
  }
  h2.base-title span img {
    height: 45px;
  }
  h2.base-title em {
    font-size: 1.3rem;
  }

  #about #container:before {
    background: url("/about/image/bg_about_main.png") no-repeat 0 100%;
    background-size: cover;
  }
  #about #container #contents #greetings .f-block .photo {
    width: 45%;
  }
  #about #container #contents #greetings .f-block .l-block {
    width: 50%;
  }
  #about #container #contents #greetings .f-block .l-block h2.base-title {
    margin-bottom: 2em;
  }
  #about #container #contents #greetings .f-block .l-block .text-area {
    padding: .8em;
  }
  #about #container #contents #company-detail .table dl dt {
    width: 180px;
  }
  #about #container #contents #company-detail .table dl dd {
    width: calc(100% - 180px);
  }

  #efforts #container:before {
    background: url("/about/image/bg_efforts_main.png") no-repeat 0 0;
    background-size: cover;
  }
  #efforts #container #contents .efforts-read {
    padding: 1em;
  }
  #efforts #container #contents #safe .inblock {
    padding: 1em;
  }
  #efforts #container #contents #safe .inblock .box {
    padding: 1em;
  }
  #efforts #container #contents #safe .inblock .box .box-title {
    font-size: 1.2em;
  }
  #efforts #container #contents #follow .f-block .box .text-box .box-title {
    font-size: 1.2em;
  }
  #efforts #container #contents #contribution .base-title span img {
    height: 85px;
  }
  #efforts #container #contents #contribution .text-box .box-title {
    font-size: 1.5em;
  }
}
/*===========================================================================*/
/*  media quary:767px  */
/*===========================================================================*/
@media screen and (max-width: 769px) {
  h2.base-title {
    margin-bottom: 2em;
  }
  h2.base-title span img {
    height: 40px;
  }
  h2.base-title em {
    font-size: 1.3rem;
  }

  #about #container #contents #greetings .f-block {
    display: block;
  }
  #about #container #contents #greetings .f-block .photo {
    width: 100%;
    text-align: center;
  }
  #about #container #contents #greetings .f-block .photo img {
    height: 455px;
  }
  #about #container #contents #greetings .f-block .l-block {
    width: 100%;
    transform: translate(0, -20px);
  }
  #about #container #contents #greetings .f-block .l-block h2.base-title {
    margin-bottom: 1.5em;
  }
  #about #container #contents #greetings .f-block .l-block .text-area {
    background: none;
    padding: 0;
  }
  #about #container #contents #philosophy .philosophy-read {
    text-align: left;
  }
  #about #container #contents #philosophy .philosophy-read span {
    display: inline;
  }
  #about #container #contents #company-detail .table dl dt {
    width: 125px;
    padding: .5em;
  }
  #about #container #contents #company-detail .table dl dt em {
    display: inline-block;
  }
  #about #container #contents #company-detail .table dl dd {
    width: calc(100% - 125px);
    padding: .5em;
  }
  #about #container #contents #access .f-block {
    display: block;
  }
  #about #container #contents #access .f-block dl {
    width: 100%;
  }
  #about #container #contents #access .f-block dl:first-child {
    margin-bottom: 1.5em;
  }
  #about #container #contents #access .f-block dl dd.text span {
    display: inline-block;
  }
  #about #container #contents #history .detail dl {
    display: block;
  }
  #about #container #contents #history .detail dl dt {
    width: 100%;
  }
  #about #container #contents #history .detail dl dd {
    width: 100%;
  }

  #efforts #container #contents .efforts-read {
    text-align: left;
  }
  #efforts #container #contents #safe .inblock {
    padding: 1em;
  }
  #efforts #container #contents #safe .inblock .box {
    padding: 1em;
  }
  #efforts #container #contents #safe .inblock .box .box-title {
    font-size: 1.1em;
  }
  #efforts #container #contents #safe .inblock .f-box {
    display: block;
    margin-bottom: 1em;
  }
  #efforts #container #contents #safe .inblock .f-box .photo {
    width: 100%;
    text-align: center;
  }
  #efforts #container #contents #safe .inblock .f-box .text-box {
    width: 100%;
  }
  #efforts #container #contents #safe .inblock .f-box .text-box .btn {
    text-align: center;
  }
  #efforts #container #contents #safe .inblock .f-block {
    display: block;
  }
  #efforts #container #contents #safe .inblock .f-block .box {
    width: 100%;
  }
  #efforts #container #contents #safe .inblock .f-block .box:first-child {
    margin-bottom: 1em;
  }
  #efforts #container #contents #follow .f-block {
    display: block;
  }
  #efforts #container #contents #follow .f-block .box {
    width: 100%;
  }
  #efforts #container #contents #follow .f-block .box:first-child {
    margin-bottom: 1em;
  }
  #efforts #container #contents #follow .f-block .box .box-title {
    font-size: 1.1em;
  }
  #efforts #container #contents #follow .f-block .box .photo {
    text-align: center;
  }
  #efforts #container #contents #contribution {
    padding: 5em 0 6em;
  }
  #efforts #container #contents #contribution .base-title span img {
    height: 70px;
  }
  #efforts #container #contents #contribution .text-box {
    padding: 1em;
  }
  #efforts #container #contents #contribution .text-box .read {
    text-align: left;
  }
}
/*===========================================================================*/
/*  media quary:479px  */
/*===========================================================================*/
@media screen and (max-width: 500px) {
  h2.base-title span img {
    height: 35px;
  }
  h2.base-title em {
    font-size: 1.1rem;
  }

  #about #container #contents #greetings .f-block {
    display: block;
  }
  #about #container #contents #greetings .f-block .photo {
    width: 100%;
    text-align: center;
  }
  #about #container #contents #greetings .f-block .photo img {
    height: 455px;
  }
  #about #container #contents #greetings .f-block .l-block {
    width: 100%;
    transform: translate(0, -20px);
  }
  #about #container #contents #greetings .f-block .l-block h2.base-title {
    margin-bottom: 1em;
  }
  #about #container #contents #greetings .f-block .l-block h2.base-title span {
    margin-bottom: .2em;
  }
  #about #container #contents #greetings .f-block .l-block h2.base-title em {
    padding: .3em;
  }
  #about #container #contents #greetings .f-block .l-block .text-area {
    background: none;
    padding: 0;
  }
  #about #container #contents #philosophy .philosophy-read {
    font-size: 1em;
  }
  #about #container #contents #philosophy .philosophy-read span {
    display: inline;
  }
  #about #container #contents #company-detail .table dl {
    display: block;
    margin-bottom: 1em;
    border: 1px solid #cccccc;
  }
  #about #container #contents #company-detail .table dl dt {
    width: 100%;
  }
  #about #container #contents #company-detail .table dl dt em {
    display: inline-block;
  }
  #about #container #contents #company-detail .table dl dd {
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: none;
  }
  #about #container #contents #company-detail .table dl dd ol {
    padding-left: 1.5em;
  }
  #about #container #contents #access .f-block {
    display: block;
  }
  #about #container #contents #access .f-block dl {
    width: 100%;
  }
  #about #container #contents #access .f-block dl:first-child {
    margin-bottom: 1.5em;
  }
  #about #container #contents #access .f-block dl dd.text span {
    display: inline-block;
  }
  #about #container #contents #history .detail dl {
    display: block;
  }
  #about #container #contents #history .detail dl dt {
    width: 100%;
  }
  #about #container #contents #history .detail dl dd {
    width: 100%;
  }
  #about #container #contents #history .detail dl dd ul li {
    margin-bottom: .3em;
  }

  #efforts #container #contents .efforts-read {
    text-align: left;
  }
  #efforts #container #contents #safe .inblock {
    padding: .8em;
  }
  #efforts #container #contents #safe .inblock .box {
    padding: .8em;
  }
  #efforts #container #contents #follow .f-block {
    display: block;
  }
  #efforts #container #contents #follow .f-block .box .box-title {
    font-size: 1.1em;
  }
  #efforts #container #contents #contribution {
    padding: 3em 0 4em;
  }
  #efforts #container #contents #contribution .base-title span img {
    height: 60px;
  }
  #efforts #container #contents #contribution .text-box {
    padding: .8em;
  }
  #efforts #container #contents #contribution .text-box .box-title span:before, #efforts #container #contents #contribution .text-box .box-title span:after {
    content: none;
  }
  #efforts #container #contents #contribution .text-box .read {
    text-align: left;
  }
}