/* ----------------- company ------------------ */
#fv{
  background:url(../img/fv-company.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 230px;
  text-align: center;
  position: relative;
  overflow: visible;
  margin-bottom: 100px;
  margin-top: 68px;
}
#fv::before{
  content: "";
  background: #e6e8ec url(../img/bg-tri1.svg) bottom right no-repeat;
  background-size: auto;
  position: absolute;
  width: 100%;
  height: 230px;
  top: 46px;
  left: 0;
  z-index: -1;
}
#fv::after{
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  border-top: 0px solid transparent;
  border-left: 42px solid #fff;
  border-right: 0px solid transparent;
  border-bottom: 65px solid transparent;
}
#fv img{
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}
#fv h1::before,
#fv h1::after{
  content: "";
  width: 1px;
  left: 50vw;
  position: absolute;
}
#fv h1::before{
  background: #fff;
  height: 150px;
  top: 150px;
}
#fv h1::after{
  background: #002a66;
  height: 70px;
  top: 230px;
}
#message {
  background: url(../img/bg.svg);
  background-position: calc(100% - 2320px) top;
  background-repeat: no-repeat;
  background-size: auto 500px;
  width: 100%;
  margin: 40px 0 30px;
  position: relative;
}
@media screen and (min-width: 1366px){
  #message {
    max-width: 1230px;
    margin: 40px auto 30px;
  }
}
#message .txt{
  background: url(../img/bg.svg);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto 500px;
  width: 670px;
  position: relative;
  text-align: left;
  margin: 0 560px 0 auto;
  padding: 30px 0 30px 20px;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#message p{
  font-size: 1.4rem;
  line-height: 2.6rem;
}
#message .name{
  font-size: 1.8rem;
  font-family: ten-mincho-text,serif;
  margin: 40px 0 0;
}
#message .name span{
  font-size: 2.5rem;
  margin-left: 10px;
}
#message .ph{
  position: absolute;
  top: 30px;
  right: 0px;
  width: 880px;
  height: 505px;
  background: url(../img/ph-message.png) left top no-repeat;
  background-size: cover;
}

#outline{
  display: block;
  background-size: auto 300px;
  width: 90vw;
  max-width: 800px;
  margin: 0 auto 100px;
}
#outline h2{
  color: #333;
  background: url(../img/bg-outline.svg) center center no-repeat;
  background-size: contain;
  font-size: 2.4rem;
  font-family: ten-mincho-text,serif;
  text-align: center;
  margin: 70px auto 50px;
  padding: 18px 0;
}
#outline dl{
  border-bottom: 1px solid  #e6e8ec;
}
#outline dt,
#outline dd{
  display: inline-block;
  vertical-align: top;
  font-size: 1.4rem;
  line-height: 2.4rem;
  padding: 7px 0;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#outline dt{
  width: 140px;
}
#outline dd{
  width: calc(90vw - 160px);
  max-width: 640px;
}
#outline dd.pad{
  padding: 0 0 7px 10px;
}
#outline dd.pad h4{
  display: block;
  margin: 10px auto 0 -15px;
}


#access{
  text-align: center;
  margin: 0 auto 30px;
}
#access h2{
  background: url(../img/bg-map.svg) center center no-repeat;
  background-size: contain;
  font-size: 2.4rem;
  font-family: ten-mincho-text,serif;
  text-align: center;
  margin: 70px auto 50px;
  padding: 18px 0;
}
#access article{
  width: 96vw;
  max-width: 866px;
  margin: 0 auto;
}

#access section{
  text-align: left;
  width: 41vw;
  max-width: 430px;
  padding: 15px 15px 30px;
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#access section:last-child {
  display: block;
  margin-right: auto;
}
#access img{
  width: calc(41vw - 30px);
  max-width: 400px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 3px;
}
#access h3{
  color: #002a66;
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}
#access h3 span{
  font-size: 1.4rem;
}
#access h3 .br-sp{
  display: none;
}
#access p{
  font-size: 1.4rem;
  line-height: 2.4rem;
}
#access a {
  color: #4b93ce;
  text-decoration: underline;
  text-decoration-color: #4b93ce;
  opacity: 1;
}
#access #map{
  width: 100%;
  height: 450px;
  border: 0;
}
#access #map *{
  overflow:visible;
}


#history{
  display: block;
  background-size: auto 300px;
  width: 90vw;
  max-width: 800px;
  margin: 0 auto 100px;
}
#history h2{
  color: #333;
  background: url(../img/bg-history.svg) center center no-repeat;
  background-size: contain;
  font-size: 2.4rem;
  font-family: ten-mincho-text,serif;
  text-align: center;
  margin: 70px auto 50px;
  padding: 18px 0;
}
#history dl{
  border-bottom: 1px solid  #e6e8ec;
}
#history dt,
#history dd{
  display: inline-block;
  vertical-align: top;
  font-size: 1.4rem;
  line-height: 2.4rem;
  padding:  8px 0;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#history dt{
  width: 140px;
  padding-right: 30px;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#history dt span{
  float: right;
}
#history dd{
  width: calc(90vw - 160px);
  max-width: 640px;
}
#history dd h4{
  display: block;
  margin: 5px auto 0 -10px;
}

/* ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 1200px){
  #message {
    background: none;
  }
  #message .txt{
    width: 700px;
    margin: 0 auto 0 0;
    padding: 30px 0 30px 30px;
  }
  #message .ph{
    width: calc(100% - 400px);
    height: 501px;
    top: 0;
  }
}
/* ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 1000px){
  #fv{
    margin-top: 80px;
    margin-bottom: 140px;
  }
  .catch br{
    display: block;
  }
  #message {
    background: none;
    padding-top: 50vw;
  }
  #message .txt{
    background: #e7e8ec url(../img/bg-tri1.svg) right bottom no-repeat;
    background-size: auto 100px;
    width: 100%;
    margin: 0 auto;
    padding: 30px;
  }
  #message .txt br{
    display: none;
  }
  #message .ph{
    width: 100%;
    height: 50vw;
    background-position: -10vw top;
    background-size: 110vw auto;
    top: 0;
    left: 0;
  }

  #access section{
    width: 46vw;
  }
  #access section:last-child {
    margin-left: 15px;
  }
  #access img{
    width: calc(46vw - 30px);
  }
}
/* ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #message {
    padding-top: 60vw;
  }
  #message .ph{
    height: 60vw;
    background-position: -20vw top;
    background-size: 120vw auto;
  }

  #message p,
  #outline dt,
  #outline dd,
  #history dt,
  #history dd {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
  #access h3 span{
    font-size: 1.2rem;
  }
  #access h3 .br-sp{
    display: block;
  }
  #outline dt {
    width: 125px;
  }
  #outline dd {
    width: calc(90vw - 145px);
  }
  #access p {
    font-size: 1.6rem;
    line-height: 2.6rem;
  }
  #access article{
        width: 100vw;
        padding: 0 0 30px 10px;
        margin: 0;
  }
  #access section{
        text-align: left;
        width: 45vw;
        max-width: none;
        padding: 0 0 20px 0;
        display: inline-block;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-right: 10px;
  }
  #access section:last-child {
        display: inline-block;
        margin-right: 10px;
  }
  #access img{
        width: calc(50vw - 15px);
        max-width: auto;
        height: auto;
        border-radius: 3px;
  }


}


@media screen and (max-width: 640px){
  #access section {
    width: 90vw;
  }
  #access img {
    max-width: none;
  }
}