/*-------------------------
基本設定
--------------------------*/
body{
  font-size: 4vw;
}
.pc{
  display: none;
}
.tab{
  display: none;
}
.mobi{
  display: block;
}
.tab.mobi{
  display: block;
}
.wrapper{
  padding: 0 2.5%;
}
/*-------------------------
header
--------------------------*/
header .wrapper{
  padding: 0 0 0 5px;
}

.header-top{
  column-gap: 10px;
  padding: 0;
}
.header-top .btn::after{
  right: 10px;
  width: 4px;
  height: 8px;
}
.header-top li:first-of-type{
  width: 40%;
  display: block;
  margin-left: 0;
}
.header-top .btn{
  font-size: 3vw;
  padding: 5px 20px 5px 30px;
}
.header-top .btn::before{
  width: 10px;
}
/*-------------------------
kv
--------------------------*/
.kv{
margin:50px 0 0;
}
.kv h1{
  font-size: 5vw;
}
.kv h1 span{
  font-size: 7vw;
}
.kv-txt{
  padding: 10% 0 0 1rem;
}
.kv-txt p{
  font-size: 3vw;
}
/*-------------------------
message
--------------------------*/
.message-ttl{
  flex-direction: column;
}
.message-ttl h2::before{
  width: 100%;
}
.message-ttl h2{
  font-size: 6.5vw;
}
.message-ttl h2 span{
  font-size: 5.5vw;
}
.message-ttl h2::before{
  top: calc(100% - 10px);
}
.message-ttl img{
  width: 100%;
  margin-top: 40px;
}
.message-txt{
  margin-top: 20px;
}
/*-------------------------
introduce
--------------------------*/
.introduce{
  padding: 30px 2.5%;
}
.introduce .btn{
  width: 100%;
  padding: 10px;
  font-size: 5vw;
}
.introduce-txt{
  flex-direction: column;
  align-items: center;
}
.introduce-txt img{
  margin: 0 0 20px;
  width: 70%;
}
.introduce-txt p:not(:last-of-type){
  margin-bottom: 20px;
}
.message{
  margin: 50px 0;
}
/*-------------------------
about
--------------------------*/
.ttl{
  font-size: 7vw;
}
.about{
  padding: 50px 0;
}
.about-txt{
  margin: 30px 0;
}
.about ul{
  width: 100%;
  padding: 30px 2.5%;
}
.about ul li{
  font-size: 4.5vw;
}
/*-------------------------
merit
--------------------------*/
.merit{
  padding: 50px 2.5%;
}
.merit-box-inner{
  width: 100%;
  flex-direction: column;
  padding: 30px 2.5%;
}
.merit-box:nth-of-type(2) .merit-box-inner{
  flex-direction: column-reverse;
}
.merit-box-inner dt{
  font-size: 5vw;
}
.merit-box-inner img{
  width: 100%;
  margin-top: 20px;
}
.merit-box-inner dd p:not(:last-of-type){
  margin-bottom: 20px;
}
/*-------------------------
price
--------------------------*/
.price{
  padding: 30px 2.5%;
}
.price-inner{
  padding: 20px 0;
  column-gap: 20px;
}
.price-inner .num{
  font-size: 7vw;
  width: 10vw;
}
.price-inner dt{
  font-size: 4.5vw;
}
.price-inner dd{
font-size:4.5vw;
}
.price .btn{
  font-size: 5vw;
  padding: 20px 50px 20px 70px;
  margin: 10px auto 0;
}
.price .btn::before{
  width: 30px;
}
.price .btn::after{
  width: 10px;
  height: 15px;
}
.price > p{
  font-size: 4.5vw;
  margin-top: 10px;
}
/*-------------------------
initiative
--------------------------*/
.initiative{
  background-size: cover;
  padding:50px 2.5%;
}
.initiative h2{
  font-size: 7vw;
}
.initiative-txt{
  font-size: 4.5vw;
  padding: 20px 2.5%;
  margin: 20px auto 0;
}
.initiative-txt p:not(:last-of-type){
  margin-bottom: 20px;
}
.initiative-txt > ul > li{
padding-left:25px;
}
/*-------------------------
lawyers
--------------------------*/
.lawyers h2{
  font-size: 5.5vw;
}
.lawyers-txt{
  justify-content: center;
  column-gap: 20px;
}
/*-------------------------
footer
--------------------------*/
footer{
  margin-top:50px;
  padding: 0;
}
footer .flex{
  flex-direction: column-reverse;
}
.footer-nav{
  width: 100%;
  flex-direction: column;
}
.footer-nav ul{
  width: 100%;
}
.footer-nav li{
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
  font-size: 4.5vw;
  margin-bottom: 0;
}
.footer-nav li:first-of-type{
  margin-bottom: 0;
}
.footer-nav li:not(:first-of-type){
  background: #fff;
  color: #111;
}
.footer-nav li a{
  width: 100%;
  display: block;
  position: relative;
}
.footer-nav li a::before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #111;
  border-right: 2px solid #111;
  transform: rotate(-45deg)translateY(-50%);
}
.footer-info{
  width: 100%;
  border-right: 0;
}
.footer-info a{
  width:70%;
  margin:0 auto;
  padding: 10px;
}
.footer-info a img{
  width: 100%;
  display: block;
}
.footer-info table{
  width: 100%;
  background: #fff;
  color: #111;
}
.footer-info tr:first-of-type th{
  padding-top: 20px;
}
.footer-info tr{
display:flex;
flex-direction:column;
}
.footer-info th,
.footer-info td{
  padding: 0 0 0 10px;
  text-align:left;
}
.footer-info td{
  padding: 0 0 20px 10px;
}
.footer-copy{
  margin-top: 0;
}