/*---------------------
基本設定
----------------------*/
.pc{
  display: none;
}
.tab{
  display: block;
}
.mobi{
  display: none;
}
.tab.mobi{
  display: block;
}
/*---------------------
header
----------------------*/
header .wrapper{
  padding: 0;
}

.header-top{
  justify-content: flex-end;
  column-gap: 20px;
}
.header-top li:first-of-type{
  margin-right: auto;
  margin-left: 10px;
}
.header-nav{
  display: block;
  background: #1d69af;
  padding: 20px;
  position: fixed;
  left: 100%;
  width: 100%;
  transition: all ease .2s;
}
.header-nav.active{
  left: 0;
}
.header-nav li:not(:last-of-type){
  margin-bottom: 20px;
}
.header-nav li a{
  color: #fff;
}
.hamburger{
  width: 47px;
  height: 47px;
  background: #1d69af;
  position: relative;
}
.hamburger span{
  width: 30px;
  height: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  transition: all ease .2s;
  transform-origin: left top;
}
.hamburger span:first-of-type{
  top: 15px;
}
.hamburger span:nth-of-type(2){
  top: 50%;
  transform: translate(-50% , -50%);
}
.hamburger span:last-of-type{
  bottom: 15px;
}
.hamburger span:first-of-type.active{
  transform: rotate(45deg) translateX(-50%);
  top: 23px;
}
.hamburger span:nth-of-type(2).active{
  opacity: 0;
}
.hamburger span:last-of-type.active{
  transform: rotate(-45deg) translateX(-50%);
  bottom: 22px;
}

/*---------------------
kv
----------------------*/
.kv{
margin:67px 0 0;
}
.kv h1{
  font-size: 3vw;
}
.kv h1 span{
  font-size: 5vw;
}
.kv-txt p{
  font-size: 2vw;
}
/*---------------------
message
----------------------*/

.message-ttl img{
  width: 50%;
}
.introduce{
  padding:  50px 1rem 50px 0;
}
.introduce-txt{
  align-items: flex-start;
}
.introduce-txt img{
  margin-right: 20px;
  width: 40%;
}

/*---------------------
about
----------------------*/
.ttl{
  font-size: 5vw;
}
.about{
  background: url(images/about-bg.png) no-repeat right top / 80% auto, #eff1f6;
}
.about-txt{
  width: 100%;
}
.about ul{
  width: 80%;
  padding: 50px 1rem;
}
/*---------------------
merit
----------------------*/
.merit-box-inner{
  width: 95%;
}
.merit-box-inner dt{
  font-size: 3vw;
}
.merit-box-inner img{
  width: 40%;
}
/*---------------------
price
----------------------*/
.price{
  padding: 50px 1rem;
}
/*---------------------
initiative
----------------------*/
.initiative{
  padding: 50px 1rem;
}
.initiative h2{
  font-size: 5vw;
}
/*---------------------
lawyers
----------------------*/
.lawyers{
  margin-top: 50px;
  padding: 0 1rem;
}
.lawyers h2{
  font-size: 5vw;
}
.lawyers-txt{
  column-gap: 50px;
  width: 100%;
}