@charset "UTF-8";
/*
Theme Name: 柴田・中川法律特許事務所
本部（豊橋）事務所　浜松事務所
*/


/******************
office
******************/
.office__inner{
  max-width: 1060px;
  margin: 0 auto;
}
.office__inner2{
  max-width: 980px;
  margin: 0 auto;

}
.office__tit{
  font-size: 28px;
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: bold;
  padding: 15px 22px;/*上下 左右の余白*/
  border-left: solid 15px ;/*左線*/
  border-image: linear-gradient(0deg, rgba(246, 242, 142, 1), rgba(203, 173, 0, 1));
  border-image-slice: 1;
  background: #eeeeee;
  position: relative;
  z-index: 10;
}
.tit__message::before{
content: "Message";
font-size: 100px;
color: #FFF;
padding: 0;
position: absolute;
bottom: -55px;
right: 0;
z-index: -1;

}
.tit__features::before{
content: "Features";
font-size: 100px;
color: #FFF;
padding: 0;
position: absolute;
bottom: -55px;
right: 0;
z-index: -1;
}
.tit__access::before{
content: "Access";
font-size: 100px;
color: #FFF;
padding: 0;
position: absolute;
bottom: -55px;
right: 0;
z-index: -1;

}
.tit__professionals::before{
content: "Professionals";
font-size: 100px;
color: #FFF;
padding: 0;
position: absolute;
bottom: -55px;
right: 0;
z-index: -1;

}
@media (max-width: 1060px) {
  .office__inner{
    width: 90.6%;
    margin: 0 auto;
  }
  .office__inner2{
    width: 89.6%;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .office__tit{
    font-size: 18px;
    padding: 15px;
  }
  .tit__message::before{
    font-size: 45px;
    bottom: -25px;
  }
  .tit__features::before{
    font-size: 45px;
    bottom: -25px;
  }
  .tit__access::before{
    font-size: 45px;
    bottom: -25px;
  }
  .tit__professionals::before{
    font-size: 35px;
    bottom: -20px;
  }
  .mv-sub .mv-sub-title h2 {
    font-size: 30px;
  }    
  .mv-sub .mv-sub-title p {
  font-size: 20px;
  letter-spacing: 2px;
  }
}


/******************
toyohashi
******************/

.mv-sub.toyohashi {
  background: url(../img/toyohashi/toyohashi_bg.jpg) top center no-repeat;
  background-size: cover;
}
@media (max-width: 767px) {
  .mv-sub.toyohashi {
    background: url(../img/toyohashi/toyohashi_bg_sp.jpg)  center center no-repeat;
    background-size: cover;

  }
}

/******************
hamamatsu
******************/
.mv-sub.hamamatsu {
  background: url(../img/hamamatsu/hamamatsu_bg.jpg) top center no-repeat;
  background-size: cover;

}
@media (max-width: 767px) {
  .mv-sub.hamamatsu {
    background: url(../img/hamamatsu/hamamatsu_bg_sp.jpg)  center center no-repeat;
    background-size: cover;
  }
}

/******************
message
******************/
.message{
  margin: 100px auto 0 auto ;
}
.message__wrap{
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 60px auto 0 auto;
  display: flex;
  justify-content: space-between;
}
.message__txtBox{
  width: 77.5%;
}
.message__txt{
    font-size: 16px;
    text-indent: 1em;
    margin-bottom: 1em;
}
.message__txt span{
  margin-left: 1em;
}
.message__name{
  font-size: 16px;
}
.message__name span{
  font-size: 24px;
  margin-left: 1em;
}
.message__pic{
  width: 18.3%;
}
@media (max-width: 767px) {
  .message{
    margin-top: 40px; 
  }
  .message__wrap{
    display: flex;
    flex-direction: column-reverse;
    margin: 30px auto 0 auto;

    }
    .message__txtBox{
      width: 100%;
    }
    .message__txt{
    font-size: 15px;
    line-height: 1.75;
    }
    .message__pic{
      width: 34.6%;
      margin: 0 auto 15px auto;

    }
    .message__name{
      font-size: 15px;
    }
    .message__name span{
      font-size: 20px;
    }
  }
/******************
features
******************/
.features{
  margin: 90px auto 0 auto;
}
.features__txtBox{
  margin: 60px auto;
}
.features__txt{
  font-size: 16px;
  text-indent: 1em;
  margin-bottom: 1em;
}
.features__txt span{
margin-left: 1em;
}
.features__PicBox{
  display: flex;
  justify-content: space-between;
}
.features__Pic{
  width: 32.5%;
}
.features__PicBox-sp{
  display: none;
}
.features__wrap{
  margin: 60px auto;
  font-size: 16px;
}
.features__def{
  margin-bottom:30px ;
}
.features__def:last-child{
  margin-bottom:0px ;
}
.features__def-date{
  text-indent: 1em;
}
.mv{
  display: none;
}
@media (max-width: 767px) {
  .features{
    margin: 50px auto 0 auto;
  }
  .features__txt{
    font-size: 14px;
  }  
  .features__txtBox{
    margin: 20px auto;
  }
  .features__PicBox{
  display: none;
  width: 100%;
  height: 565px;

  }
  .features__wrap{
    font-size: 14px;
  }
  .features__PicBox-sp{
    width: 100%;
    height: 565px;
    display: block;
  }
  
  .features-slide  {
    width: 100%;
    height: 350px;
  } 
  .mv{
    height: auto;
    display: block
  }


  
  /*ドットナビゲーションの設定*/

  .slick-dots {
    text-align:center;
  margin:20px 0 0 0;
  bottom: -30px;
  }

  .slick-dots li {
    display:inline-block;
  margin:0 5px;
  }

  .slick-dots li button {
    color: transparent;
    outline: none;
    border: none;
    width:10px;/*ドットボタンのサイズ*/
    height:10px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
  }
  .slick-dots li button:before{
    display: none;
  }
  
  .slick-dots .slick-active button{
    background:#AFAEAE;/*ドットボタンの現在地表示の色*/
  }
}
/******************
access
******************/
.officeAccess{
  margin: 100px auto 0 auto ;
}
.access__head{
  display: flex;
  justify-content: space-between;
  margin: 60px auto;
}
.access__info{
  width: 43.8%;
}
.info__def{
  display: flex;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: #000 solid 1px;
}
.info__def:first-child{
  margin-top: 0;
}

.info__def:last-child{
  border-bottom: none;
}
.info__def-tit{
  width: 25.8%;
}
.info__def-tit span{
  background: #EEE ;
  padding: 5px 10px;
  border-radius: 9999px;
}

.info__def-date{
  width: 68.8%;
}
.info__def-date span{
  margin-left: 0.5em;
}
.access__map{
  width: 47.1%;
}
.access__map iframe {
  width: 100%;
  height: 300px;
}
.access__body{
  display: flex;
  justify-content: space-between;

}
.access__bodyPic{
 width: 43.3%;
 filter:drop-shadow(-24px 24px 0px #eee);
 padding: 0 0 24px 24px;
}
.access__bodyList{
  width: 47.1%;
}
.bodyList-item{
  font-size: 16px;
  position: relative;
  padding-left: 60px;
  margin-bottom: 15px;
  min-height: 3em;
  display: flex;
  align-items: center;
}
.privacy::before{
  content: "";
  background: url(../img/toyohashi/access_ico_01.jpg) no-repeat 0 0 ;
    display: inline-block;
    background-size: cover;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
.barrierFree::before{
  content: "";
  background: url(../img/toyohashi/access_ico_02.jpg) no-repeat 0 0 ;
    display: inline-block;
    background-size: cover;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.child::before{
  content: "";
  background: url(../img/toyohashi/access_ico_03.jpg) no-repeat 0 0 ;
    display: inline-block;
    background-size: cover;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.parking::before{
  content: "";
  background: url(../img/toyohashi/access_ico_04.jpg) no-repeat 0 0 ;
  display: inline-block;
  background-size: cover;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.transport::before{
  content: "";
  background: url(../img/toyohashi/access_ico_05.jpg) no-repeat 0 0 ;
  display: inline-block;
  background-size: cover;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.elevator::before{
  content: "";
  background: url(../img/toyohashi/access_ico_06.jpg) no-repeat 0 0 ;
  display: inline-block;
  background-size: cover;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.access__foot{
  filter:drop-shadow(24px 24px 0px #eee);
  padding: 0 0 24px 24px;
  margin: 50px auto auto;
  max-width: 830px;

}


@media (max-width: 767px) {
  .info__def{
    display: block;
  }
  .info__def-tit,.info__def-date{
    width: 100%;
  }
  .info__def-date{
    font-size: 14px;
  }
  .info__def-tit{
    margin-bottom: 10px;
  }
  .officeAccess{
    font-size: 16px;
    margin: 80px auto 0 auto ;
  }
  .access__head{
    display: block;
    margin: 30px auto;
    width: 89.6%;
  }
  .access__info{
    width: 100%;
    margin-bottom: 30px;
  }
  .access__map{
    width: 100%;
  }
  .access__body{
    display: flex;
    flex-direction: column-reverse;
    width: 89.6%;
    margin: 0 auto;

  }
  .access__bodyPic{
    width: 100%;
  }
  .access__bodyList{
    width: 100%;
    margin-bottom: 40px; 
  }
  .access__foot{
    width: 89.6%;
    margin: 35px auto auto ;
  }
  .bodyList-item{
    font-size: 14px;
  }
}
/******************
professionals
******************/
.professionals{
  margin-top: 100px;
}
.professionals__wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 60px;

}
.professionals__lowyer{
  width: 20.4%;
  margin-bottom: 60px;
}
.lowyer__describe{
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  font-size: 24px;
}
.lowyer__describe span{
  display: block;
  font-size: 15px;
}
/*  cvbtn  */
.professionals__cvbtn{
  margin-bottom: 120px;
}
.professionals__cvbtn a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 1em 2em;
  width: 420px;
  height: 60px;
  color: #333;
  font-size: 18px;
  font-weight:normal ;
  background-image:linear-gradient(30deg, rgba(246, 242, 142, 1), rgba(203, 173, 0, 1));
  transition: 0.3s;
  border-radius: 9999px;
}

.professionals__cvbtn a::before {
  content: '';
  position: absolute;
/*  top: calc(50% - 2px);
  right: -3em;
  transform: translateY(calc(-50% - 4px)) rotate(45deg);
  width: 16px;
  height: 1px;*/
    top: calc(50% - 1px);
    right: -56px;
    transform: translateY(calc(-50% - 4px)) rotate(45deg);
    width: 15px;
    height: 1px;
  background-color: #333;
  transition: 0.3s;
}

.professionals__cvbtn a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -3em;
  transform: translateY(-50%);
  width: 100px;
  height: 1px;
  background-color: #333;
  transition: 0.3s;
}

.professionals__cvbtn a:hover {
  text-decoration: none;
  opacity: 0.6;
}

.professionals__cvbtn a:hover::before{
  right: -75px;  
}
.professionals__cvbtn a:hover::after {
  right: -4em;
}
@media (max-width: 767px) {
  .lowyer__describe{
  font-size: 18px;
  }
  .lowyer__describe span{
    font-size: 14px;
    line-height: 1.5;
  }
  .professionals{
    margin-top: 50px;
  }
  .professionals__wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
    width: 75%;
  }
  .professionals__lowyer{
    width: 43.4%;
    margin-bottom: 20px;
  }
  .professionals__cvbtn{
    margin-bottom: 60px;
  }
  .professionals__cvbtn a {
    font-size: 16px;
    width: 100%;
    max-width: 320px;
  }
  .professionals__cvbtn a::after{
    right: -1em;
    width: 50px;
  }
  .professionals__cvbtn a::before{
    right: -16px;
    width: 10px;
    top: 50%;
  }
  .professionals__cvbtn a:hover::before,
  .professionals__cvbtn a:hover::after {
    right: -1em;
  }
}