#mVs{position:relative}
#mVsTtl{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:1;
  width:100%;
  text-align:center;
  color:#fff;
  filter:drop-shadow(0 0 4px #000)
}
#mVsTtl>h1{font-weight:900}
#mVsTtl>h2{font-weight:100}
#mVsImg{background-color:#000}
#mVsImg>img{
  display:block;
  opacity:.9
}

.cnt{padding:40px 0}
.cnt:nth-child(2n+1){background-color:#f4f4f4}
.cnt a{text-decoration:none}

.cntTtl{
  text-align:center;
  letter-spacing:3px;
  padding-bottom:40px
}
.cntTtl>h3{
  font-size:24px;
  color:#333;
  font-weight:600
}
.cntTtl>p{color:#63b59b}

#ptInr{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between
}
#ptInr>a>h4{
  color:#333;
  padding:8px 0
}
#ptInr>a>p{
  padding:8px 0 16px;
  font-size:13px;
  color:#444
}

#case>a{color:#333}
#case>a>.caseImg{position:relative}

#case>a>.caseImg>cite{
  padding:4px;
  position:absolute;
  bottom:0;
  left:0;
  font-size:11px;
  font-style:normal;
  text-decoration:none;
  color:#fff
}
#case>a>.caseCnt>.caseTtl{
  font-size:20px;
  font-weight:600;
  padding-bottom:12px
}

#gll{
  display:flex;
  flex-wrap:wrap;
  padding-bottom:24px
}
#gll>a>img{
  object-fit:cover;
  outline:2px solid #f4f4f4;
  width:100%
}

#ab>p{
  margin:0 auto 24px;
  font-size:15px;
  line-height:32px;
  color:#444
}
#ab>dl{
  display:flex;
  flex-wrap:wrap;
}
#ab>dl>dt,#ab>dl>dd{
  padding-top:8px;
  padding-bottom:8px;
  border-bottom:1px solid #333;
  font-size:14px
}
#ab>dl>dt{
  margin-right:12px;
  padding-right:8px;
  width:108px;
  text-align:right
}
#ab>dl>dd{
  padding-left:8px;
  width:calc(100% - 120px)
}
#ab>dl>dd>ul{
  margin:0;
  padding-bottom:16px
}
#ab a{color:#4eb9ab}
#ab a:hover{text-decoration:underline}

@media screen and (min-width:768px){
  #mVsTtl>h1{font-size:32px}
  #mVsTtl>h2{font-size:16px}
  #mVsImg>img{
    width:100%;
    max-height:800px;
    object-fit:cover
  }

  #ptInr{
    margin:0 auto;
    width:96%;
    max-width:1200px
  }
  #ptInr>a{width:calc(100% / 3 - 8px)}
  #ptInr>a:hover{opacity:.6}

  #case>a{
    margin:0 auto 16px;
    width:100%;
    max-width:800px;
    display:flex
  }
  #case>a:hover{opacity:.8}
  #case>a>.caseImg{
    width:30%;
    height:180px
  }
  #case>a>.caseImg>img{
    width:100%;
    height:100%;
    object-fit:cover
  }
  #case>a>.caseCnt{
    padding-left:16px;
    width:70%
  }

  #gll{
    max-width:1200px;
    margin:0 auto
  }
  #gll>a{width:20%}
  #gll>a>img{height:160px}
  #gll>a>img:hover{opacity:.8}

  #ab>p{width:80%}
  #ab>dl{
    max-width:600px;
    margin:0 auto
  }
}

@media screen and (max-width:767px){
  #mVsTtl>h1{font-size:20px}
  #mVsTtl>h2{font-size:15px}

  #ptInr{padding:0 8px}
  #ptInr>a{width:calc(100% / 2 - 4px)}

  #case>a{margin-bottom:16px}
  #case>a>.caseCnt{padding:12px}

  #gll>a{width:calc(100% / 3)}
  #gll>a>img{height:100px}

  #ab{
    width:96%;
    margin:0 auto;
  }
  #ab>p{width:90%}
}