html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
}
@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
}
header {
  padding-bottom: 20px;
}
header .head {
  color: #fff;
  background-color: #02579E;
  padding-top: 2px;
  height: 18px;
  margin-bottom: 10px;
}
header .head h1 {
  margin: 0;
  line-height: 13px;
  font-size: 11px;
}
header .title {
  color: #02579E;
  font-size: 52px;
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -2px;
}
header .title small {
  font-size: 22px;
}
@media (max-width: 1400px) {
  header .title {
    font-size: 46px;
  }
  header .title small {
    font-size: 20px;
  }
}
@media (max-width: 1200px) {
  header .title {
    font-size: 38px;
  }
  header .title small {
    font-size: 18px;
  }
}
@media (max-width: 992px) {
  header .title {
    font-size: 42px;
  }
  header .title small {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  header .title {
    font-size: 32px;
    letter-spacing: -1px;
  }
  header .title small {
    font-size: 12px;
  }
}
@media (max-width: 576px) {
  header .title {
    font-size: 32px;
  }
  header .title small {
    font-size: 11px;
  }
}
@media (max-width: 500px) {
  header .title {
    font-size: 30px;
    letter-spacing: -2px;
  }
  header .title small {
    font-size: 11px;
  }
}
header .office {
  color: #02579E;
  font-size: 30px;
  font-family: zen-antique, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  line-height: 20px;
}
header .office small {
  font-size: 16px;
}
@media (max-width: 1200px) {
  header .office {
    padding-top: 10px;
  }
}
@media (max-width: 992px) {
  header .office {
    font-size: 26px;
    padding-top: 5px;
  }
  header .office small {
    font-size: 16px;
  }
}
@media (max-width: 576px) {
  header .office {
    font-size: 18px;
  }
  header .office small {
    font-size: 11px;
  }
}
@media (max-width: 500px) {
  header .office {
    font-size: 22px;
    padding-top: 10px;
  }
  header .office small {
    font-size: 15px;
  }
}
header .menu {
  margin-top: 30px;
}
footer {
  color: #fff;
  background-color: #249AE2;
  margin-top: 30px;
  padding: 20px 0;
}
footer a {
  color: #fff;
  display: block;
}
@media (max-width: 992px) {
  footer {
    padding-bottom: 100px !important;
  }
}
/* グローバルナビゲーション */
#navbuttons {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/* offcanvas */
.offcanvas-bottom {
  height: 98%;
}
/* 電話番号 */
a {
  text-decoration: none;
}
a .contact {
  padding-top: 10px;
  text-align: center;
}
a .contact .time {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  background-color: #ffaa00;
  height: 28px;
}
a .contact .time small {
  font-size: 13px;
}
a .contact .tel {
  color: #f66600;
  font-size: 28px;
  font-family: ruika, sans-serif;
  font-weight: 100;
  font-style: normal;
  line-height: 30px;
}
a .contact .form {
  color: #fff;
  font-size: 17px;
  padding-top: 1px;
  background-color: #ffaa00;
  height: 28px;
}
a .contact a {
  font-size: 17px;
}
/* 法律相談のご予約 */
.reserve .card-header {
  font-size: 22px;
}
.reserve .tel {
  color: #f66600;
  font-size: 26px;
  font-family: ruika, sans-serif;
  font-weight: 100;
  font-style: normal;
  line-height: 30px;
  text-align: center;
}
.reserve .time {
  text-align: center;
}
.reserve a {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1400px) {
  .reserve .tel {
    font-size: 21px;
  }
  .reserve .time {
    font-size: 16px;
  }
  .reserve a {
    font-size: 16px;
  }
}
@media (max-width: 1200px) {
  .reserve .h2 {
    font-size: 26px;
  }
  .reserve .tel {
    font-size: 18px;
  }
  .reserve .time {
    font-size: 15px;
  }
  .reserve a {
    font-size: 13px;
  }
}
@media (max-width: 992px) {
  .reserve .tel {
    font-size: 28px;
  }
  .reserve .time {
    font-size: 20px;
  }
  .reserve a {
    font-size: 20px;
  }
}
/* メインビジュアル */
.mv {
  background-image: url(/images/mv_back.png);
  background-size: cover;
}
.mv img.yoko {
  position: relative;
  left: 450px;
}
@media (max-width: 1400px) {
  .mv img.yoko {
    left: 300px;
  }
}
@media (max-width: 1200px) {
  .mv img.yoko {
    width: 600px;
    left: 320px;
  }
}
@media (max-width: 992px) {
  .mv img.yoko {
    width: 500px;
    left: 230px;
  }
}
@media (max-width: 768px) {
  .mv img.yoko {
    width: 400px;
    left: 160px;
  }
}
@media (max-width: 576px) {
  .mv img.yoko {
    width: 300px;
    left: 200px;
  }
}
@media (max-width: 500px) {
  .mv img.yoko {
    width: 280px;
    left: 80px;
  }
}
.mv .pr {
  z-index: 99;
  position: relative;
  left: 0;
  top: 20px;
  height: 0;
  font-size: 52px;
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 70px;
  color: #02579E;
  text-shadow: 3px 3px 4px #fff, -3px -3px 4px #fff, 3px -3px 4px #fff, -3px 3px 4px #fff;
}
@media (max-width: 1200px) {
  .mv .pr {
    font-size: 46px;
    line-height: 58px;
  }
}
@media (max-width: 992px) {
  .mv .pr {
    font-size: 36px;
    line-height: 50px;
  }
}
@media (max-width: 768px) {
  .mv .pr {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (max-width: 576px) {
  .mv .pr {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (max-width: 500px) {
  .mv .pr {
    top: 10px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -1px;
  }
}
.mv .profile {
  z-index: 99;
  position: relative;
  right: 20px;
  top: 470px;
  height: 0;
  text-align: right;
  font-size: 36px;
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 50px;
  text-shadow: 3px 3px 4px #fff, -3px -3px 4px #fff, 3px -3px 4px #fff, -3px 3px 4px #fff;
}
@media (max-width: 1200px) {
  .mv .profile {
    top: 320px;
    font-size: 32px;
    line-height: 48px;
  }
}
@media (max-width: 992px) {
  .mv .profile {
    top: 260px;
    font-size: 26px;
    line-height: 40px;
  }
}
@media (max-width: 768px) {
  .mv .profile {
    top: 210px;
    font-size: 22px;
    line-height: 32px;
  }
}
@media (max-width: 576px) {
  .mv .profile {
    top: 150px;
    font-size: 18px;
    line-height: 26px;
  }
}
@media (max-width: 500px) {
  .mv .profile {
    top: 165px;
    font-size: 15px;
    line-height: 20px;
  }
}
.mv .keiyaku1 {
  position: absolute;
  padding: 3px;
  top: 620px;
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 380px;
}
.mv .keiyaku1 small {
  display: block;
  color: #ff0;
  font-size: 24px;
  line-height: 26px;
  margin-top: 4px;
  margin-bottom: 6px;
}
.mv .keiyaku1 span {
  font-size: 30px;
  line-height: 15px;
}
@media (max-width: 1200px) {
  .mv .keiyaku1 {
    top: 540px;
  }
}
@media (max-width: 992px) {
  .mv .keiyaku1 {
    top: 470px;
    width: 300px;
  }
  .mv .keiyaku1 small {
    line-height: 20px;
    font-size: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .mv .keiyaku1 span {
    font-size: 26px;
  }
}
.keiyaku2 {
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.keiyaku2 small {
  display: block;
  color: #ff0;
  font-size: 20px;
  line-height: 26px;
  margin-top: 2px;
  margin-bottom: 6px;
}
.keiyaku2 span {
  font-size: 26px;
  line-height: 20px;
}
/* トップページ コンテンツリンク */
.contents a {
  font-size: 20px;
  font-family: zen-antique, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 10px;
  display: block;
  color: #02579E;
  text-decoration: none !important;
}
.contents a:hover {
  opacity: 0.7;
}
@media (max-width: 500px) {
  .contents .card-footer {
    padding: 5px 0;
    font-size: 17px !important;
  }
}
/* bootstrap color Override */
.btn-primary {
  background-color: #02579E;
  border-color: #02579E;
}
.btn-info {
  color: #fff;
  background-color: #249AE2;
  border-color: #249AE2;
}
.btn-warning {
  color: #fff;
  background-color: #f66600;
  border-color: #f66600;
}
.btn-warning:hover {
  background-color: #c00;
  border-color: #a00;
  color: #fff;
}
.text-primary {
  color: #02579E !important;
}
.text-info {
  color: #249AE2 !important;
}
.text-warning {
  color: #f66600 !important;
}
.text-yellow {
  color: #ffe300 !important;
}
.bg-primary {
  color: #fff;
  background-color: #02579E !important;
}
.bg-info {
  color: #fff;
  background-color: #249AE2 !important;
}
.border-primary {
  border-color: #02579E !important;
}
.border-info {
  border-color: #249AE2 !important;
}
small {
  font-size: 12px;
}
/* フォント */
.kakugo {
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.marugo {
  font-family: ta-marugo-gf-02, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.mincho {
  font-family: zen-antique, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.ruika {
  font-family: ruika, sans-serif;
  font-weight: 100;
  font-style: normal;
}
/* ヘッダ */
h2 {
  color: #02579E;
  font-size: 44px;
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  h2 {
    font-size: 24px;
  }
}
h3 {
  color: #fff;
  font-family: ta-kakugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #02579E;
  border-radius: 4px;
  padding: 8px 15px 7px 15px;
  margin-top: 25px;
  margin-bottom: 30px;
}
h4 {
  color: #02579E;
  font-family: ta-marugo-gf-03, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-left: 15px;
  padding-top: 2px;
  padding-bottom: 5px;
  border-left: solid 8px #02579E;
  border-bottom: solid 1px #02579E;
  margin-top: 25px;
  margin-bottom: 30px;
}
ol {
  color: #02579E;
  font-weight: bold;
}
ol li {
  line-height: 2rem;
}
.cp_list {
  position: relative;
  padding: 0.5em;
  border: solid 2px #02579E;
  list-style-type: none;
  margin-top: 20px;
}
.cp_list li {
  color: #02579E;
  padding: 0.5em 0 0.5em 1.6em;
  line-height: 1.5;
  border-bottom: 1px dashed #02579E;
}
.cp_list li::before {
  position: absolute;
  content: "\002713";
  color: #02579E;
  font-weight: bold;
  left: 0.8em;
}
.cp_list li:last-of-type {
  border-bottom: none;
}
#map {
  height: 500px;
  margin-bottom: 20px;
}
/* 法律顧問プラン表 */
.plan th {
  text-align: center;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
  background-color: #eed;
}
.plan td {
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}
.plan small {
  display: block;
}
@media (max-width: 500px) {
  .plan th,
  .plan td {
    font-size: 12px;
    line-height: 14px;
  }
  .plan small {
    font-size: 10px;
  }
}