/* ----------------- service ------------------ */
#fv{
  background:url(../img/fv-service.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;
}

.topFlex {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  max-width: 1290px;
  margin: 0 auto;
}
#firstFlex {
  margin-bottom: 5rem;
  max-height: 309px;
}
#firstFlex .flexGray {
  padding: 4.2rem 3.2rem 5.2rem;
}
#secondFlex {
  max-height: 326px
}
@media screen and (max-width: 1300px) {
  #secondFlex {
    max-height: none;
  }
}
#secondFlex .flexGray {
  padding: 3.3rem 3.2rem 2.1rem;
}
.flexImg {
  width: 45%;
}
.flexImg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.flexGray {
  background-color: #F8F8F8;
  width: 55%;
}
.flexTxt {text-align: left;}
.flexTxt h2 {
  color: #707070;
  font-family: ten-mincho-text,serif;
  font-size: 2rem;
  margin-bottom: 2.2rem;
}
.flexTxt p {
  color: #707070;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
.china::before {content: url('/img/flag-china.png')}
.cz::before {content: url('/img/flag-cz.png')}
.india::before {content: url('/img/flag-india.png')}
.japan::before {content: url('/img/flag-japan.png')}
.germany::before {content: url('/img/flag-germany.png')}
.sweden::before {content: url('/img/flag-sweden.png')}
.korea::before {content: url('/img/flag-korea.png')}
.USA::before {content: url('/img/flag-USA.png')}
.uk::before {content: url('/img/flag-uk.png')}

.flags::before {
  position: relative;
  display: inline-block;
  vertical-align: text-top;
  margin-right: 2px;
  transform: scale(.9);
}
.flagList li {
  display: inline-block;
  margin-left: 1.4rem;
  top: 3px;
}
@media screen and (max-width: 1100px) {
  .topFlex {
    flex-flow: row wrap;
    width: 90vw;
    margin: 0 auto 3rem;
  }
  .topFlex > div {
    width: 100%;
  }
  #firstFlex,
  #secondFlex {
    max-height: none;
  }
  #secondFlex .flexGray {
    order: 2;
  }
}
@media screen and (max-width: 768px) {
  .flexTxt h2 {
    font-size: 2.6rem;
  }
  .flexTxt p {
    font-size: 1.7rem;
  }
}
#mainp {
  background: #e6e8ec;
  position: relative;
  text-align: center;
  margin: 40px auto 30px;
  padding: 0 0 30px 10px;
}
#mainp::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;
}
#mainp h2{
  color: #333;
  font-size: 2.2rem;
  font-family:  ten-mincho-text,serif;
  margin: 50px auto 30px;
  padding-right: 20px;
}

#mainp section{
  text-align: left;
  width: 22vw;
  max-width: 250px;
  margin-right: 20px;
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
#mainp img{
  width: 22vw;
  max-width: 250px;
  height: auto;
  margin-bottom: 7px;
  border-radius: 3px;
}
#mainp h3{
  font-size: 1.6rem;
  text-align: center;
}
#mainp p{
  font-size: 1.4rem;
  text-align: center;
  margin-top: 20px;
}

#material{
  display: block;
  background: url(../img/bg-material.png) bottom center no-repeat;
  background-size: auto 300px;
  width: 90vw;
  max-width: 800px;
  padding-bottom: 330px;
  margin: 0 auto 100px;
}
#material h2{
  color: #333;
  font-size: 2.2rem;
  font-family:  ten-mincho-text,serif;
  text-align: center;
  margin: 70px auto 50px;
  padding-right: 20px;
}
#material dl{
  border-bottom: 1px solid  #e6e8ec;
}
#material dt,
#material dd{
  display: inline-block;
  vertical-align: top;
  font-size: 1.4rem;
  line-height: 2.8rem;
  padding: 7px 0;
}
#material dt{
  width: 140px;
}
#material dd{
  width: calc(90vw - 160px);
  max-width: 640px;
}
#material dd.pad{
  padding: 0 0 7px 10px;
}
#material dd.pad h4{
  display: block;
  margin: 5px auto 0 -15px;
}
#material dd small{
  display: block;
}

/* ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 1200px){
}
/* ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 1000px){
  #fv{
    margin-top: 80px;
    margin-bottom: 140px;
  }
  #mainp section{
    width: 46vw;
    padding-bottom: 20px;
    margin-right: 10px;
  }
  #mainp img{
    width: calc(50vw - 20px);
  }
  #material {
    background: url(../img/bg-material.png) bottom center no-repeat;
    background-size: 90vw auto;
    width: 94vw;
    padding-bottom: 250px;
  }
  #material dd{
    width: calc(94vw - 160px);
  }
}
/* ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 700px){
  #material dt,
  #material dd {
      font-size: 1.7rem;
      line-height: 2.8rem;
  }
  #material h2,
  #mainp h2{
    font-size: 2.6rem;
    padding-right: 0;
  }
  #material dt br{
    display: none;
  }
  #case .btn-next {
    margin: 20px auto;
    width: 50vw;
    padding: 18px 0;
  }
  #case .btn-next span{
    font-size: 1.8rem;
  }
  .flags::before {
    vertical-align: baseline;
  }
}