@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////


Compornent


//////////////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////


header


//////////////////////////////////////////////////////////////////////////*/

/*--------------Loading*/

#loading {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: center
}

#loading .loader {
  position: fixed;
  top: 40%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

#loading .loader img {
  display: block;
  margin: 0 auto 20px auto;
}

/*--------------header*/

.header-upper {
  overflow: hidden;
  margin-bottom: 15px;
  padding: 10px 0;
}

.header-upper__title {
  float: left;
  line-height: 1.4;
}

.header-upper__title .main-title {
  font-size: 32px;
  margin: 12px 0 7px 0;
  /*  font-family: "YakuHanJP";*/
  letter-spacing: 0.1em;
  font-weight: bold;
}

.header-upper__title .main-title a {
  color: #585549;
}

.header-upper__title .main-title span {
  color: #486582;
  font-weight: bold;
}

.header-upper__title .access {
  margin-left: 10px;
  font-size: 13px;
}

.header-upper__logo {
  width: 41%;
  height: auto;
}

.header-upper__tel,
.header-upper__form {
  float: right;
  margin-top: 15px;
  line-height: 1.4;
}

.header-upper__tel a {
  color: rgb(88, 85, 73);
}

.header-upper__tel {
  margin-right: 15px;
  margin-top: 23px;
}

.tel span,
.btn-form span {
  display: block;
}

.tel .message,
.tel .time {
  font-size: 12px;
  color: rgb(88, 85, 73);
  letter-spacing: 0.03em;
}

.tel .number {
  font-size: 27px;
  vertical-align: middle;
  color: #333;
  letter-spacing: 2px;
  line-height: 1.2;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  font-weight: bold;
}

.tel .number:before {
  width: 34px;
  height: 27px;
  background-size: cover;
  display: inline-block;
  content: "\f4b9";
  font-family: "ionicons";
  font-size: 28px;
  vertical-align: middle;
  color: #486582;
}

a.btn-form {
  text-align: center;
  background: #fff;
  padding: 5px 20px 8px 20px;
  color: #fff;
  background: #486582;
  /*  background: linear-gradient(#e5cc61, #BF9766);*/
  color: #fff;
  display: block;
  transition: .3s all ease;
  text-shadow: 0 0 1px rgba(0, 0, 0, .3);
  border-radius: .5em;
    box-shadow: 0 2px #152e54;
}

a.btn-form:hover {
  opacity: 0.7;
  color: #fff;
}

.btn-form:before {
  content: "\f423";
  font-family: "ionicons";
  display: block;
  font-size: 30px;
  line-height: 1;
}

.btn-form .time {
  font-size: 11px;
}

a.btn-form--footer {
  width: 80%;
  margin-left: 0;
  text-align: left;
  padding: 20px;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

a.btn-form--footer:before {
  margin: 0 10px 0 0;
}

.btn-form--footer .time {}

.global-nav {
  display: flex;
  justify-content: space-between;
  transition: .1s all ease;
}

.global-nav > li {
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: .3s all ease;
  flex-grow: 1;
}

.global-nav > li a {
  color: rgb(88, 85, 73);
}

.global-nav > li > a {
  display: block;
  text-align: center;
  padding: 10px;
  line-height: 1.4;
  font-size: 14px;
  transition: .3s all ease;
  color: #fff;
  /*/
  /*border-right: 1px dotted #999;*/
}

.global-nav > li:hover {
  background: rgba(255,255,255,.1);
}

.global-nav > li:hover > a {
  /*  color: #486582;*/
}

/*.global-nav > li > ul > li:hover >a{
  color:#486582;
}*/

.global-nav > li > a:before {
  content: "";
  width: 0;
  height: 0;
  transition: .3s all ease;
}

.global-nav > li:last-child {
  border: none;
}

.js-toggle {
  display: none;
}

.global-nav > li > ul {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  position: absolute;
  top: 90%;
  left: 0;
  background: #ebf6f9;
  width: 1040px;
  padding: 30px;
  z-index: 999;
  transition: .1s all ease;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.3);
  color: #486582;
}

.global-nav > li > ul > li {
  flex-basis: 33.33%;
  max-width: 33.33%;
  line-height: 1;
  box-sizing: border-box;
}

.global-nav > li > ul.col4 > li {
  flex-basis: 25%;
  max-width: 25%;
}

.global-nav > li > ul.col4 > li:nth-child(n+5) {
  margin-top: 30px;
}

.global-nav > li > ul > li a {
  display: flex;
  font-size: 13px;
  color: #333;
  /*  transition:.3s all ease;*/
  padding: 7px 10px 7px 0;
}

.global-nav > li > ul > li a:hover {
  /*  color: #486582;*/
}

.global-nav > li > ul > li a:hover::before {
  text-decoration: none!important;
}

.global-nav > li > ul > li a:before {
  content: "\f3d1";
  font-family: ionicons;
  font-size: 14px;
  vertical-align: middle;
  margin-right: 5px;
}


.global-nav li > ul:before {
  position: absolute;
  top: 60px;
  left: 0;
  background: #fff;
}

.global-nav li.title,
.global-nav p.title,
.global-nav ul.col4 li.title {
  display: block;
  flex-basis: 100%;
  max-width: 100%;
  margin: 0 0 15px 0;
  color: #486582;
}

.global-nav > li:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-container {
  border-top: 1px solid #e5e5e5;
  background: #486582;
}

.nav-container.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 11;
  box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.3);
}


/*####################################################################
mediaquery
######################################################################*/

@media screen and (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  .header-upper {
    margin-bottom: 0;
    padding: 0;
  }

  .header-upper__tel,
  .header-upper__form {
    display: none;
  }
  .header-upper__title {
    width: 80%;
    padding-bottom: 20px;
    margin-left: 4%;
  }
  .header-upper__title .main-title {
    font-size: 18px;
    margin: 15px 0 0 0;
    letter-spacing: 0;
  }
  .header-upper__title .access {
    font-size: 11px;
  }
  .header-upper__title .access span {
    display: none;
  }

  .header-upper__logo {
    width: 45%;
    height: auto;
  }

  .global-nav {
    display: block;
    width: 80%;
    height: 100vh;
    margin-right: -80vw;
    position: fixed;
    top: 0;
    left: 100%;
    transition: .3 all ease;
    -webkit-transition: .3 all ease;
    background: #486582;
    z-index: 99;
    margin-top: 0;
    box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, .1);
    overflow: auto;
    box-sizing: border-box;
    padding: 20px 20px 120px 20px;
    font-size: 14px;
    -webkit-overflow-scrolling: touch;
    color: #fff;
  }

  .global-nav br {
    display: none;
  }

  .fade-layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 98;
  }

  .global-nav > li {
    width: 100%;
    border-right: none;
    display: block;
    border-bottom: 1px dotted #eee;
    padding: 20px 0;
  }

  .global-nav li.title {
    font-size: 15px;
    margin: 20px 0 10px 0;
  }

  .global-nav > li > a {
    text-align: left;
    display: block;
    width: 100%;
    padding: 10px 0;
    border-right: none;
    font-size: 16px;
  }

  .global-nav > li > ul.col4 > li {
    max-width: 100%;
    margin-bottom: 8%;
  }


  .global-nav > li > ul > li > a {
    padding: 7px 7px 4px 7px;
  }


  .global-nav > li > ul {
    position: static;
    visibility: visible;
    opacity: 1;
  }

  .global-nav > li > ul {
    position: static;
    visibility: visible;
    opacity: 1;
    display: block;
    border: none;
    padding: 0;
    width: 100%;
    box-shadow: none;
  }

  .global-nav > li > ul > li {
    max-width: 100%;
    padding: 0;
  }

  .global-nav > li:hover > a:after {
    content: none;
  }

  .js-toggle {
    display: block;
    position: fixed;
    top: 15px;
    right: 5%;
    font-size: 11px;
    line-height: 1;
    z-index: 12;
    color: #486582;
  }

  .js-toggle:before {
    content: "\f394";
    font-family: ionicons;
    display: block;
    text-align: center;
    font-size: 36px;
    line-height: 1;
  }
}

@media screen and (max-width: 320px) {
  .header-upper__title .main-title {
    font-size: 16px;

  }
}



/*//////////////////////////////////////////////////////////////////////////


    footer


//////////////////////////////////////////////////////////////////////////*/

.footer-inner {
  padding: 0 0 40px 0;
}

.footer-inner iframe {
  width: 100%;
}


.footer-inner .form {
  background: #fff;
  border: 1px solid;
}

.footer-inner .tel {
  margin-bottom: 20px;
}

.footer-inner .form {
  text-align: left;
  overflow: hidden;
  font-size: 20px;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-inner .form:before {
  /*  float: left;*/
  margin-right: 10px;
  font-size: 42px;
}

.footer-inner .form a {
  padding-top: 5px;
}

.footer-inner .form span {
  display: inline;
}

.footer-inner__link {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}

.footer-inner__link a {
  color: rgb(88, 85, 73);

}

@media screen and (max-width: 767px) {

  .footer-inner {
    padding-bottom: 100px;
  }
}

/*//////////////////////////////////////////////////////////////////////////


   common


//////////////////////////////////////////////////////////////////////////*/

.note {
  background: #eee;
  border-radius: .5em;
  padding: 30px;
}

/*-------------------------------------

List

--------------------------------------*/

.list-circle > li {
  padding-left: 18px;
  position: relative;
  /*  margin-bottom:10px;*/
}

.list-circle > li:before {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #486582;
  margin-right: 10px;
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 7px;
}

.list-side {
  display: flex;
  flex-wrap: wrap;
}

.list-side > li {
  flex-basis: 23%;
  margin-right: 2%;
}

.list-side > li:nth-child(4n) {
  margin-right: 0;
}

.list-number {
  padding-left: 3em;
  list-style: none;
  counter-reset: ol_li;
}

.list-number > li {
  /*  margin-bottom:10px;*/
  list-style-type: none;
  position: relative;
}

.list-number > li::before {
  counter-increment: ol_li;
  content: "（"counter(ol_li)"）";
  color: #486582;
  display: block;
  position: absolute;
  left: -3em;
  top: 1px;
  letter-spacing: 0;
}

.list-number li ul,
.list-number li ol {
  margin-top: 5px;
}

.list-kana > li {
  padding-left: 30px;
  position: relative;
  /*  margin-bottom:10px;*/
}

.list-kana > li:before {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 7px;
  content: 'ア.';
  line-height: 1;
}

.list-kana > li:nth-child(2):before {
  content: 'イ.';
}

.list-kana > li:nth-child(3):before {
  content: 'ウ.';
}

.list-kana > li:nth-child(4):before {
  content: 'エ.';
}

.list-kana > li:nth-child(5):before {
  content: 'オ.';
}

.list-kana > li:nth-child(6):before {
  content: 'カ.';
}

.list-kana > li:nth-child(7):before {
  content: 'キ.';
}

.list-kana > li:nth-child(8):before {
  content: 'ク.';
}

.list-kana > li:nth-child(9):before {
  content: 'ケ.';
}

.list-kana > li:nth-child(10):before {
  content: 'コ.';
}

.list-alfa > li {
  padding-left: 30px;
  position: relative;
  /*  margin-bottom:10px;*/
}

.list-alfa > li:before {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 7px;
  content: 'a.';
  line-height: 1;
}

.list-alfa > li:nth-child(2):before {
  content: 'b.';
}

.list-alfa > li:nth-child(3):before {
  content: 'c.';
}

.list-alfa > li:nth-child(4):before {
  content: 'd.';
}

.list-alfa > li:nth-child(5):before {
  content: 'e.';
}

.list-alfa > li:nth-child(6):before {
  content: 'f.';
}

.list-alfa > li:nth-child(7):before {
  content: 'g.';
}

.list-checkbox > li {
  padding-left: 20px;
  position: relative;
}

.list-checkbox > li:before {
  color: #486582;
  content: "\f373";
  position: absolute;
  left: 0;
  top: 5px;
  font-family: "ionicons";
  line-height: 1;
  font-weight: bold;
  font-size: 17px;
}


.list-linkbox li a {
  padding: 12px 10px;
  border: #ccc 1px solid;
  display: block;
  color: #333;
  transition: .3s all ease;
  font-size: 13px;
  letter-spacing: 0;
}

.list-linkbox li a:hover {
  background: #486582;
}

.list-linkbox li a.current {
  background: #eee;
  border: none;
}

.list-linkbox li a.current:hover {
  color: #333;
}

.list-linkbox li a:before {
  content: "\f3d3";
  font-family: "ionicons";
  vertical-align: middle;
  margin-right: 10px;
}

.inner-menu-block {
  padding: 20px;
  background: #eee;
}

.inner-link-title {
  font-weight: bold;
  background: #eee;
  padding: 10px;
  display: inline-block;
}

.inner-link-title:before {
  content: "\f359";
  font-family: "ionicons";
  font-size: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

input[type="checkbox"].on-off {
  display: none;
}

input[type="checkbox"].on-off + ul {
  height: auto;
  overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul {
  height: 0;
  /*  margin-top: 20px;*/
}

.inner-menu {
  padding-left: 3em;
  line-height: 150%;
  list-style: none;
  counter-reset: inner_menu;
}

.inner-menu > li {
  margin-bottom: 10px;
  list-style-type: none;
  position: relative;
}

.inner-menu > li::before {
  counter-increment: inner_menu;
  content: ""counter(inner_menu)".";
  color: #486582;
  display: block;
  position: absolute;
  left: -2em;
  top: 1px;
}

.inner-menu li ul,
.inner-menu li ol {
  margin-top: 5px;
}

.inner-menu > li > ul > li:before {
  content: "- ";
}

@media screen and (max-width: 767px) {

  .list-side li,
  .list-side li:nth-child(4n) {
    flex-basis: 49%;
    margin-right: 2%;
  }

  .list-side li:nth-child(even) {
    margin-right: 0;
  }

}



/*-------------------------------------

Text テキスト

--------------------------------------*/

.l-content p {
  margin-bottom: 20px;
}


.l-content p a:hover {
  text-decoration: none;
  color: #D3B893;
}

.text-circle:before {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #486582;
  margin-right: 10px;
  content: '';
  display: inline-block;
}

/*参照*/

.reference {
  font-size: 13px;
  line-height: 1.4;
  color: #999;
}


/*※印の注釈*/

.annotation {
  padding: 0 0 0 30px;
  position: relative;
  font-size: 13px;
  line-height: 1.4;
  color: #999;
}

.annotation:before {
  content: "※";
  position: absolute;
  left: 0;
}

.annotation--1:before {
  content: "※1";
}

.annotation--2:before {
  content: "※2";
}

.annotation--3:before {
  content: "※3";
}


.annotation--4:before {
  content: "※4";
}


.annotation--5:before {
  content: "※5";
}


.talk dl {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
}

.talk dt {
  flex-basis: 15%;
  margin-right: 20px;
  font-weight: bold;
}

.talk dd {
  flex-basis: 85%;
}

@media screen and (max-width: 767px) {
  .talk dl {
    display: block;
  }

  .talk dt,
  .talk dd {
    width: 100%;
    margin-right: 0;
    display: block;
  }

  .l-content p img {
    width: 100%;
    height: auto;
  }

}

/*-------------------------------------

Text Link テキストリンク

--------------------------------------*/

.link-arrow:before {
  content: '\f3d1';
  font-family: 'ionicons';
  margin-right: 5px;
}

.link-arrow:hover {
  color: #D3B893;
}

/*-------------------------------------

Button ボタン

--------------------------------------*/

.button {
  background: #fff;
  border: 1px solid #486582;
  color: #486582;
  transition: .3s all ease;
  border-radius: .3em;
  display: table;
  padding: 10px 25px;
  min-width: 60%;
  width: auto;
  text-align: center;
  margin: auto;
}

.button::before {
  content: '\f3d1';
  font-family: ionicons;
  margin-right: 10px;
}

.button:hover,
.button.current {
  background: #486582;
  color: #fff;
}

.button--sm {
  font-size: 13px;
  width: auto;
}


@media screen and (max-width: 767px) {}


/*-------------------------------------

Crumb パンくず

--------------------------------------*/

.crumb {
  line-height: 1;
  padding: 10px 0;
  width: 100%;
  margin: 0 auto 0 auto;
  /*  background: #F4F3F0;*/
  position: relative;
}

.crumb__list {
  width: 1040px;
  margin: auto;
  overflow: hidden;
}

.crumb__list li {
  float: left;
  margin-bottom: 0;
  font-size: 11px;
  font-size: 1.1rem;
  color: #888;
}

.crumb li:before {
  content: "\f3d1";
  font-family: "ionicons";
  margin: 0 10px;
}

.crumb li:first-child:before {
  content: none;
  margin-left: 0;
}

.crumb li a {
  color: #666;
}

.crumb li a:link {
  text-decoration: none;
}

.crumb li a:visited {}

.crumb li a:hover {
  color: #F76344;
  text-decoration: underline;
}

.crumb li a:active {}


/*heading内のパンくず用modifier*/

.crumb--white,
.crumb--white li a,
.crumb--white li {
/*  color: #fff;*/
}

.crumb--oversky {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}

/*####################################################################mediaquery*/

/*##############################################################################*/

@media screen and (max-width: 767px) {
  .crumb {
    line-height: 1;
    width: 100%;
    margin: 0 auto;
  }
  .crumb__list {
    width: 88%;
    margin: auto;
  }
}


/*---------------------------------------------

テーブルスクロール

-------------------------------------------------*/

@media screen and (max-width: 767px) {
.scroll table{
width:770px!important;
}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}
    
    .scroll:before{
        content: '※スマホの場合は横にスクロールしてご覧いただけます';
        display: block;
        color: #666666;
    }

}
/*//////////////////////////////////////////////////////////////////////////


Title タイトル装飾


//////////////////////////////////////////////////////////////////////////*/

.title-page {
  font-size: 30px;
  margin-bottom: 40px;
  border-top: 3px solid #486582;
  border-bottom: 1px solid #486582;
  padding: 40px 0;
  line-height: 1.2;
  font-weight: bold;
}

.title-page__catch,
.title-page__date {
  font-size: 13px;
  display: block;
  color: #555;
  margin-top: 10px;
  letter-spacing: 3px;
}

.title-page__catch:before {
  content: '― '
}

.title-page__date {
  text-align: right;
}

.title-section {
  font-size: 24px;
  margin: 50px 0 30px 0;
  border-bottom: 2px solid #486582;
  padding: 0 0 20px 0;
  line-height: 1.4;
  font-weight: bold;
}

.title-section--center {
  border: none;
  text-align: center;
}


.title-segment {
  font-size: 20px;
  margin: 40px 0 30px 0;
  border-left: 2px solid #486582;
  padding: 15px 0 13px 15px;
  line-height: 1.4;
  font-weight: bold;
  background: #eee;
}

.title-paragraph {
  font-size:18px;
  margin: 40px 0 20px 0;
  color: #486582;
  line-height: 1.4;
  font-weight: bold;
}

.title-category {
  color: #486582;
  text-shadow: 0 0 5px #fff;
  font-size: 28px;
  line-height: 3;
}

.title-toriatsukai {
  text-align: center;
  padding: 5px;
  background: #EBF6F9;
  display: block;
  margin-bottom: 40px;
  font-weight: bold;
  letter-spacing: 6px;
}

.title-note {
  padding: 5px 15px;
  border-left: 2px solid #486582;
  font-size: 17px;
  font-weight: bold;
}


/*####################################################################mediaquery*/

/*##############################################################################*/

@media screen and (max-width: 767px) {

  .title-page {
    font-size: 24px;
  }

  .title-section {
    font-size: 20px;
  }

  .title-category {
    line-height: 1.5;
    font-size: 18px;
  }

}


/*//////////////////////////////////////////////////////////////////////////


Text テキスト装飾


//////////////////////////////////////////////////////////////////////////*/

.text-marker {
  background: linear-gradient(transparent 50%, #fffa84 50%);
  font-weight: bold;
}

/*//////////////////////////////////////////////////////////////////////////


Column


//////////////////////////////////////////////////////////////////////////*/

.col2-list {
  display: flex;
  flex-wrap: wrap;
}

.col2-list > li {
  flex-basis: 48.5%;
  max-width: 48.5%;
  margin-right: 3%;
  /*  background: #fff;*/
  box-sizing: border-box;
}

.col2-list > li:nth-child(even) {
  margin-right: 0;
}

.col2-list > li:nth-child(n+3) {
  margin-top: 2.3rem;
}

.col3-list {
  display: flex;
  flex-wrap: wrap;
}

.col3-list > li {
  flex-basis: 32%;
  max-width: 32%;
  margin-right: 2%;
  /*  background: #fff;*/
  box-sizing: border-box;
}

.col3-list > li:nth-child(3n) {
  margin-right: 0;
}

.col3-list > li:nth-child(n+4) {
  margin-top: 2rem;
}

/*####################################################################mediaquery*/

/*##############################################################################*/

@media screen and (max-width: 767px) {

  .col2-list > li,
  .col3-list > li,
  .col3-list > li:nth-child(odd) {
    flex-basis: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  /*
  .col3-list > li,
  .col3-list > li:nth-child(odd) {
    flex-basis: 48.5%;
    max-width: 48.5%;
    margin-right: 3%;
  }
*/
  .col3-list > li:nth-child(even) {
    margin-right: 0;
  }
  .col3-list > li:nth-child(n+2),
  .col2-list > li:nth-child(n+2) {
    margin-top: 2rem;
  }
  .sp-col1 > li:nth-child(odd),
  .sp-col1 > li:nth-child(even) {
    flex-basis: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  /*.footer-soudan{
    display: none;
  }*/
}


/*//////////////////////////////////////////////////////////////////////////


Contents コンテンツのコンポーネント


//////////////////////////////////////////////////////////////////////////*/

/*-------------------------------------------------------------------------

toppage

---------------------------------------------------------------------------*/

.keyvisual {
  width: 100%;
  min-height: 440px;
  /*  height: calc(100vh - 206px);*/
  height: calc(440px - 206px);
  background: url(/kigyouhoumu/img/index/kv-bg_pc.jpg) center center no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  margin: 0 0 40px 0;
  position: relative;
  /*  min-width: 320px;*/
}

.keyvisual-inner {
  /*  height: 450px;*/
  height: 100%;
  overflow: hidden;
}

/*
.keyvisual__lawyer {
  position: absolute;
  bottom: 0;
  right: -4%;
  width: 300px;
  height: auto;
}

.keyvisual__lawyer-name {
  position: absolute;
  right: 285px;
  bottom: 20px;
  font-size: 14px;
  text-align: center;
}

.keyvisual__lawyer-name span {
  font-size: 11px;
  display: block;
}

.keyvisual-copy {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 3px rgba(0, 0, 0, 1);
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  margin: auto;
}

.keyvisual-copy__1 {
  font-size: 17px;
  width: 530px;
  line-height: 1.5;
  margin-top: 30px;
}

.keyvisual-copy__1 span {
  font-size: 40px;
  color: #486582;
}

.keyvisual-copy__2 {
  font-size: 44px;
  line-height: 1.7;

  background: #486582;
}
*/

/*
  .keyvisual__circle{
    display: flex;
    position: absolute;
    top:270px;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
  }

  .keyvisual__circle li{
    flex-basis: 23.5%;
    max-width: 23.5%;
    height: 23.5%;
    margin-right: 2%;
    background: rgba(255,255,255,.95);
    color:#BF9766;
    font-size: 24px;
    text-align: center;
    line-height: 1.4;
    padding: 30px;
    text-shadow: 0 0 3px #fff,0 0 3px #fff;
  }

.keyvisual__circle li:last-child{
  margin-right: 0;
}
*/

.top-service-panel li {
  margin-right: 20px;
}

.top-service-panel li:nth-child(n+4) {
  margin-top: 20px;
}

.service-panel {
  padding: 30px 10px 35px 10px;
  background-image:linear-gradient(0deg, rgba(72, 101, 130, 1) 0%, rgb(71, 112, 152) 70%, rgb(84, 137, 191) 100%);
  color: #fff;
  text-align: center;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  border-bottom: solid 4px #273147;
  /*    border-radius: 5px;*/
  box-sizing: border-box;
  position: relative;
  transition: .3s all ease;
  top: 0;

}

.service-panel p {
  font-weight: bold;
  text-shadow: 0 -1px #33434c;
}

.service-panel i {
  font-size: 40px;
  flex-basis: 100%;
  line-height: 1;
  margin-bottom: 10px;
  height: 48px;
  text-shadow: 0 -1px #33434c;
}

.service-panel:after {
  background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 50.5%) no-repeat top left/100% 100%;
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  transition: .3s all ease;
}

.service-panel:hover {
  margin-top: 2px;
  border-bottom-width: 2px;
  transition: .3s all ease;
}

.service-panel:hover:after {
  width: 20px;
  height: 20px;
  background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, #D3B893 50.5%) no-repeat top left/100% 100%;
  box-shadow: 0 -1px #33434c;
}

.top-panel p {
  background: rgb(72, 101, 130, .7);
  border: none;
  border-bottom: 1px solid #486582;
}

.top-panel:hover p {
  background: rgb(72, 101, 130, 1);
  color: #fff;
  padding: 15px 15px;
}


.should-text {
  width: 800px;
  font-size: 14px;
  background: #486582;
  color: #fff;
  vertical-align: middle;
  padding: 5px 0;
  border-radius: 2em;
  margin-top: -18px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 0, 0, .5);
  letter-spacing: 5px;
}

.why-text {
  padding: 40px;
  background: #ebf6f9 url(/kigyouhoumu/img/index/lawyer-message-yamada.png) right bottom no-repeat;
  background-size: contain;
  /*  border:1px solid #486582;*/
  text-shadow: #fff 1px 1px 2px, #fff -1px 1px 2px,
  #fff 1px -1px 2px, #fff -1px -1px 2px;
  /*  border: 1px solid #486582;*/
}

.why-text__text {
  width: 65%;
}

.why-text__title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #486582;
}

.why-text__title span {
  font-size: 14px;
  margin-left: 10px;
}

.feature-block {
  display: flex;
}

.top-feature {
  flex-basis: 25%;
  max-width: 25%;
  padding: 40px;
  background: #fff;
  overflow: hidden;
  position: relative;
  background-size: cover;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  text-align: center;
}


.feature-block > li:last-child {
  border: none;
}

.top-feature__title {
  font-size: 17px;
  position: relative;
  z-index: 2;
  line-height: 1.5;
}

.top-feature__title span {
  /*  color: #486582;*/
  color: #486582;
}

.top-feature br {
  display: none;
}

.top-panel-container li {
  display: flex;
  margin-bottom: 20px;
}

.top-panel {
  transition: .2s all ease;
  /*  flex-direction: column;*/
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  z-index: 5;
  color: rgb(88, 85, 73);
  line-height: 1.4;
  align-items: center;
  -ms-flex: 0 1 auto;
  word-break: break-all;
  display: block\9;
  /*IE10*/
  height: 150px;
  overflow: hidden;
}

.top-panel img {
  width: 100%;
  height: auto;
  transition: .5s all ease;
  position: relative;
  border: 1px solid #486582;
  box-sizing: border-box
}

.top-panel p {
  /*  font-weight: bold;*/
  font-size: 14px;
  padding: 10px 15px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #486582;
  color: #fff;
  width: 100%;
  border: 1px solid #486582;
  transition: .5s all ease;
  box-sizing: border-box;
}

.top-panel p:after {
  content: "\f30f";
  font-family: ionicons;
  float: right;
}



.top-panel:hover p {
  background: #fff;
  color: #486582;
}

.top-lawyer {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4%;
  align-items: center;
  background: #ebf6f9;
  box-sizing: border-box;
  padding: 30px;
}

.top-lawyer > img {
  margin-right: 2%;

}

.top-lawyer__text {
  flex-basis: 75%;
  font-size: 13px;
}

.top-lawyer__text > .name {
  font-size: 20px;
  margin-bottom: 10px;
}

.case-list {
  margin-bottom: 80px;
}

.case-list li {
  border-bottom: 1px dotted #ccc;
}

.case-list li a {
  padding: 20px;
  width: 100%;
  color: rgb(88, 85, 73);
  transition: .3s all ease;
  display: block;
  box-sizing: border-box;
}

.case-list li a:hover {
  color: #486582;
  background: #fff;
}

.case-list__icon {
  margin-right: 20px;
}

.case-list__number {
  font-size: 13px;
  font-weight: bold;
  margin-right: 10px;
  line-height: 1;
}

.case-list__category span,
.category-tag span {
  font-size: 11px;
  background: #e5e5e5;
  padding: 5px 10px;
  line-height: 1;
  display: inline-block;
  margin-right: 10px;
}

.case-list__title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 5px;
  line-height: 1.4;
}

.case-list__number:before {
  content: '離婚解決事例';
  margin-right: 5px;
}

.case-list__text {
  -ms-flex: 0 1 auto;
}

.fix-contact {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 65px;
  z-index: 10;
}

.fix-contact__inner {
  display: flex;
  width: 400px;
  padding: 10px;
  height: 94px;
  box-sizing: border-box;
  justify-content: center;
  transition: .3s all ease;
}

.fix-contact__inner > .tel {
  background: #fff;
  padding: 10px 15px;
  line-height: 1;
  flex-basis: 60%;
  margin-right: 4%;
  display: block;
  border: 3px solid #486582;
}

.fix-contact__inner > .tel > .number {
  font-size: 22px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  font-weight: bold;
  letter-spacing: 0;
}

.fix-contact__inner > .btn-form {
  flex-basis: 24%;
  line-height: 1.6;
  font-size: 11px;
  padding: 15px 10px;
  cursor: pointer;
}

.fix-contact__inner > .btn-form:before {
  line-height: 0.8;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  box-sizing: border-box;
}

.pagetop a {
  color: #fff;
  padding: 30px 0;
  line-height: 1;
  width: 40px;
  height: 74px;
  background: #486582;
  box-sizing: border-box;
  font-size: 20px;
  text-align: center;
  transition: .3s all ease;
  display: block;
}

.pagetop a:before {
  content: '\f366';
  font-family: ionicons;
}

.pagetop a:hover {
  padding-top: 20px;
}

.info-list {
  /*
  display: flex;
  flex-wrap: wrap;
*/
  font-size: 13px;
}

.info-list dt {
  display: inline-block;
  width: 31%;
  box-sizing: border-box;
  vertical-align: top;
}

.info-list dd {
  display: inline-block;
  margin-bottom: 20px;
  width: 68%;
  box-sizing: border-box;
}

.news-item__news:after {
  content: 'お知らせ';
  background: #eee;
  padding: 2px 5px;
  font-size: 11px;
  margin-left: 10px;
  width: 100px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
}

.news-item__media:after {
  content: 'メディア情報';
  background: #eee;
  padding: 2px 5px;
  font-size: 11px;
  margin-left: 10px;
  width: 100px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
}

.kigyou-column {
  padding: 20px 20px 40px 20px;
  /*  border: 1px solid #bbd8e0;*/
  display: block;
  height: 100%;
  box-sizing: border-box;
  color: #333;
  transition: .3s all ease;
  background-color: #fcf6c2;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #fff), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #fff), color-stop(.75, #fff), color-stop(.75, transparent), to(transparent));
  -webkit-background-size: 7px 7px;
  position: relative;
  border-left: 10px solid #fff282;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .2)
}

/*
.kigyou-column:before{
  content: "\f3e8";
  font-family: ionicons;
  color: #486582;
  background: #EBF6F9;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 10px auto;
  font-size: 30px;
  border-radius: 100%;
  transition: .3s all ease;
}
*/

.kigyou-column:after {
  content: "詳しく見る \f30f";
  font-family: ionicons;
  position: absolute;
  bottom: 20px;
  right: 20px;
  line-height: 1;
  font-size: 12px;
  transition: .3s all ease;
}


a.kigyou-column:hover {
  box-shadow: 1px 3px 20px rgba(0, 0, 0, .2);
  color: #486582;
}

a.kigyou-column:hover:after {
  right: 15px;
}

/*-------------------------------------------------------------------------

Sidebar

---------------------------------------------------------------------------*/

.l-widget div {
  margin-bottom: 6.7%;
  background: #fff;
}

.l-widget a {
  color: rgb(88, 85, 73);
  font-size: 13px;
  vertical-align: middle;
  padding: 15px 10px;
  transition: .3s all ease;
  display: block;
  border: 1px solid #bbd8e0;
}

.l-widget a:hover {
  color: #486582;
  border-color: #486582;
  border-style: solid;
}

.l-widget i {
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  width: 22px;
  text-align: center;
  margin-right: 5px;
  color: #486582;
}

.side-menu {
  margin-bottom: 40px;
}

.side-menu li {
  font-size: 13px;
}

.side-menu li.title {
  padding: 30px 10px;
  color: #486582;
  font-size: 14px;
  border-top: 3px solid;
  border-bottom: 1px solid #ccc;
  line-height: 1.7;
}

.side-menu li.title--sub {
  /*background: #ecf1cd;*/
  color: rgb(88, 85, 73);
  padding: 10px;
  font-weight: normal;
  background: #eee;
  border-bottom: 1px solid #ccc;
  border-top: none;

}

.side-menu li.title + .title--sub {
  border-top: none;
}

.side-menu li.title--sub2 {
  font-weight: bold;
  background: #eee;
  padding: 5px 10px;
  color: rgb(88, 85, 73);
}

.side-menu li a {
  display: flex;
  padding: 15px 10px;
  color: rgb(88, 85, 73);
  background: #fff;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

.side-menu li a:hover,
.side-menu li a.current {
  background: #486582;
  color: #fff;
}

.side-menu li a:hover {
  color: #D3B893;
}

.side-menu li a:before {
  content: "\f3d3";
  font-family: "ionicons";
  font-size: 12px;
  vertical-align: middle;
  margin-right: 10px;
}

/*####################################################################
mediaquery
######################################################################*/

@media screen and (max-width: 767px) {

  .keyvisual {
    background: url(/kigyouhoumu/img/index/kv-bg_sp.jpg) center center no-repeat;
  }

  /*
  .keyvisual-copy {
        padding-top: 40px;
    text-align: left;
    top: 20%;
  }
  .keyvisual-copy__1 {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.4;
    width: 100%;
  }
  .keyvisual-copy__2 {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: 0;
    margin-bottom: 40px;
    display: block;
  }

  .keyvisual-copy__2 br{
    display: none;
  }
  .keyvisual-copy__3 {
    font-size: 12px;
    display: none;
  }
*/
  /*
  .keyvisual__lawyer{
  width: 200px;
  right: -10%;
  bottom: -20px;
}

   .keyvisual__circle{
    display: none;
*/
  /*
    position: absolute;
     top: auto;
     bottom: 40px;

  }*/
  /*
  .keyvisual__circle li{
    max-width: 100%;
    height: auto;
    margin-right: 0;
    margin-top: 2%;
    font-size: 18px;
    text-align: left;
    padding: 15px;
  }

  .keyvisual__circle li br{
    display: none;
  }

  .keyvisual__circle li:last-child{
    margin-right: 0;
  }
*/
  .keyvisual-inner {
    position: relative;
  }
  .keyvisual-inner img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .service-panel {
    padding: 25px 10px 30px 10px;
    font-size: 18px;
  }

  .service-panel i {
    margin-bottom: 0;
    font-size: 35px;
  }
  .top-panel p {
    padding: 5px 10px;
    background: rgb(72, 101, 130, 1);
  }

  .top-panel:hover p {
    padding: 5px 10px;
  }

  .keyvisual__lawyer-name {
    left: 0;
    right: auto;
  }

  .top-feature {
    background-size: cover;
    background-position: left;
    height: 80px;
    padding: 20px;
    line-height: 1.2;
  }

  .top-feature__number {
    top: -23px;
    left: -5px;
    font-size: 60px;
  }

  .top-feature br {
    display: block;
  }

  .should-text {
    padding: 20px 10px;
    margin-top: 0;
    border-radius: 0;
    letter-spacing: 0;
    width: auto;
  }

  .why-text {
    padding: 6%;
    background: #ebf6f9;
  }

  .why-text__text {
    width: 100%;
  }

  .case-list li a {
    padding-right: 0;
    padding-left: 0;
  }

  .case-list__day {
    flex-basis: 50%;
  }

  .case-list__category {
    flex-basis: 50%;
  }

  .case-list__title {
    flex-basis: 100%;
  }

  .case-list__number {
    margin: 0 10px 10px 0;
  }

  .top-panel {
    /*  padding: 15px;*/
    position: static;
    height: auto;
    display: flex;
  }

  .top-panel img {
    /*    width: 100%;*/
    border: none;
    flex-basis: 35%;
    max-width: 35%;
  }

  .top-panel p {
    font-size: 15px;
    position: static;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    height: 100%;
    align-items: center;

  }

  .top-panel p:after {
    display: none;

  }

  .top-lawyer {
    justify-content: center;
  }

  .top-lawyer > img {
    margin-right: 0;
    margin-bottom: 10px;

  }

  .top-lawyer__text {
    flex-basis: 100%;
  }
  .top-lawyer__text .name {
    text-align: center;
    font-size: 18px;
  }

  /*  .fix-contact{
    display: none;
  }*/
  .fix-contact__inner {
    display: flex;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    z-index: 10;
    box-shadow: -2px 0 5px 0 rgba(0, 0, 0, .1);
    height: 80px;
    box-sizing: border-box;
    overflow: hidden;
    justify-content: center;
    transition: .3s all ease;
  }

  .fix-contact__inner > .tel {
    background: #fff;
    padding: 10px 15px;
    line-height: 1;
    flex-basis: 68%;
    margin-right: 4%;
  }

  .fix-contact__inner > .btn-form {
    flex-basis: 28%;
    line-height: 1;
  }

  .fix-contact__inner > .btn-form:before {
    line-height: 0.8;
  }

  .fix-contact__inner > .tel .number {
    line-height: 1;
    letter-spacing: 0;
    font-size: 21px;
  }

  .fix-contact__inner > .tel .number:before {
    width: 28px;
    height: 22px;
  }

  .pagetop {
    bottom: 90px;
    right: 10px;
  }

  .pagetop a {
    padding: 15px 0;
    width: 50px;
    height: 50px;
  }

  .pagetop a:hover {
    padding-top: 15px;
  }

  .pagetop.bottom {
    transition: .3s all ease;
    bottom: 20px;
  }

  .search-box {
    display: none;
  }

  .info-list {
    display: block;
  }

  .info-list dt {
    width: 100%;
    display: block;
    margin-right: 0;
  }

  .info-list dd {
    width: 100%;
    margin-bottom: 20px;
    display: block;
  }

  /* 2019-02-04追加 */
  /* スマホ表示時に非表示にする */
  .sp-none {
    display: none;
  }

}

@media screen and (max-width: 320px) {

  .fix-contact__inner > .tel .message,
  .tel .time {
    font-size: 9px;
  }

  .fix-contact__inner > .tel {
    padding: 10px;
  }

  .fix-contact__inner > .tel > .number {
    font-size: 17px;
  }

  .keyvisual-copy {
    padding-top: 23%;
  }

  .keyvisual-copy__1 {
    font-size: 16px;
  }

  .keyvisual-copy__2 {
    font-size: 28px;
  }

}


/*-------------------------------------------------------------------------

Lower Page 下層ページ

---------------------------------------------------------------------------*/

.consult-block {
  display: flex;
  padding: 20px;
  text-align: center;
  margin: 0 0 80px 0;
  background: #fff;
  border: 1px solid #486582;
}

.consult-block__tel {
  flex-basis: 49%;
  max-width: 49%;
  background: url(/kigyouhoumu/img/common/tel_bg.png) #fff no-repeat;
  background-size: 70%;
  background-position: 130% 50%;
  margin-right: 2%;
  padding: 20px;
  text-align: center;
  background: #ebf6f9;
}

.consult-block__form {
  flex-basis: 49%;
  max-width: 49%;
  padding: 20px;
  background: url(/kigyouhoumu/img/common/form_bg.png) #486582 no-repeat;
  background-size: cover;
  background-position: 50% 80%;
  box-shadow: none;
}

.lower-keyvisual {
  height: 150px;
  background: url(/kigyouhoumu/img/common/second-kv.jpg) top left /cover no-repeat #fff;
  font-size: 30px;
  box-sizing: border-box;
  margin-bottom: 40px;
  position: relative;
}

.lower-keyvisual::before {
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0, 0, 0, .05);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/*####################################################################
mediaquery
######################################################################*/

@media screen and (max-width: 767px) {

  .consult-block {
    display: block;
  }

  .consult-block .consult-block__form,
  .consult-block .consult-block__tel {
    max-width: 100%;
    margin-right: 0;
    padding: 15px;
    justify-content: center;
  }

  .consult-block .consult-block__tel {
    margin-bottom: 20px;
  }

  .consult-block__tel .number {
    letter-spacing: 1px;
    font-size: 24px;
    justify-content: center;
  }

  .lower-keyvisual {
    font-size: 20px;
    height: auto;
    min-height: 120px;
  }
}


/*-------------------------------------------------------------------------

Case Page 解決事例ページ

---------------------------------------------------------------------------*/

.case-title {
  font-size: 30px;
  color: #486582;
  padding: 0 0 10px 0;
  letter-spacing: 0;
  line-height: 1.4;
}

.case-data {
  display: flex;
  margin: 0 0 40px 0;
}

.case-data__img {
  margin-right: 20px;
}

.category-tag {
  color: #999;
  font-size: 12px;
}

.case-data__data > .name {
  font-weight: bold;
}

.case-data__data > .marriage:before {
  content: "婚姻期間："
}

.case-data__data > .period:before {
  content: "解決までの期間："
}

.case-data__data > .procedure:before {
  content: "手続き："
}

.single-pagenation {
  display: flex;
  margin: 40px 0 40px 0;
}

.single-pagenation > div {
  flex-basis: 49%;
  max-width: 49%;
  margin-right: 2%;
}

.single-pagenation > div:last-child {
  margin: 0;
  text-align: right;
}

.screen-reader-text {
  display: none;
}

.nav-links {
  margin-top: 20px;
  display: flex;
}

.page-numbers {
  background: #fff;
  border: 2px solid #486582;
  color: #486582;
  box-sizing: border-box;
  transition: .3s all ease;
  border-radius: 0.3em;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.page-numbers.current,
.page-numbers:hover {
  background: #486582;
  color: #fff;
}

/*####################################################################
mediaquery
######################################################################*/

@media screen and (max-width: 767px) {

  .case-data__img {
    width: 30%;
    height: 30%;
  }


  .single-pagenation {
    display: block;
  }

  .single-pagenation > p {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    padding: 10px;
    background: #fff;
    text-align: center;
  }

  .single-pagenation > p:last-child {
    text-align: center;
  }
}



/*-------------------------------------------------------------------------

弁護士紹介

---------------------------------------------------------------------------*/

.lawyer-item {
  background: #e2eff3;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  align-items: center;
}

.lawyer-item__img {
  overflow: hidden;
  box-sizing: border-box;
  margin-right: 20px;

}

.lawyer-item__img > img {
  width: 100%;
  height: auto;
}

.lawyer-item__img--min {
  overflow: hidden;
  height: auto;
}

.lawyer-item__name {
  line-height: 1.2;
  font-size: 20px;
}


.lawyer-item__name > div:first-child {
  font-size: 13px;
}

.lawyer-item__name > div:nth-child(3) {
  font-size: 13px;
  color: #999;
  margin: 10px 0;
}

.lawyer-item__name > div.team {
  color: #486582;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
}

.icon-metro {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 6px solid;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  line-height: 1.05;
  padding-top: 5px;
  box-sizing: border-box;
  background: #fff;
}

.icon-metro.marunouchi {
  border-color: #e60012
}

.icon-metro.ginza {
  border-color: #f39700
}

.icon-metro.hibiya {
  border-color: #B5B5AD
}

.icon-metro.asakusa {
  border-color: #D04E3C
}

.icon-metro.yurakucho {
  border-color: #d7c447
}

.icon-metro.hanzo {
  border-color: #8B76D0
}

.icon-metro.jr {
  border-color: #9ACD32;
  border-radius: .5em;
  padding-top: 15px;
}

.ho-map {
  width: 100%;
  height: 600px;
}

.train-item {
  background: #e2eff3;
  padding: 40px;
  box-sizing: border-box;
}

.train-item__text,
.train-item p {
  text-align: center;
}

.train-item__text span {
  font-weight: bold;
  display: block;
}


.document-list {
  display: flex;
}

.document-list li {
  flex-basis: 49%;
  max-width: 49%;
}

.document-list li:first-child {
  margin-right: 2%;
}

.document-list li a {
  padding: 20px;
  display: block;
  border: 2px solid #486582;
  background: #486582;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  border-radius: .5em;
  transition: .3s all ease;
}

.document-list li a:hover {
  background: #fff;
  color: #486582;
}

.document-list li a i {
  font-size: 30px;
}

.document-list li a p {
  font-size: 13px;
  margin-bottom: 10px;
}

.lawyer-detail {
  display: flex;
  background: #e2eff3;
  padding: 20px;
}

.lawyer-detail__text {
  box-sizing: border-box;
  flex: auto;
  padding-left: 40px;
}

.lawyer-detail__name {
  font-size: 32px;
}

.lawyer-detail__assign {
  font-size: 13px;
  color: #999;
}

.lawyer-detail__career {
  font-size: 13px;
}

.lawyer-detail__img {
  margin: auto;
  border: 1px solid #fff;
}

@media screen and (max-width: 768px) {

  .lawyer-detail {
    display: block;
  }

  .lawyer-detail__name {
    font-size: 26px;
  }

  .lawyer-detail__img {
    width: 100%;
    height: auto;
  }

}


/*-------------------------------------------------------------------------

下層ページ

---------------------------------------------------------------------------*/


.kaisei-old,
    .kaisei-new{
        display: flex;
        width: 100%;
    }
    
    .kaisei-old{
        margin-bottom: 10px;
        position: relative;
    }
    
    .kaisei-old:after{
        content: '\f103';
    font-family: ionicons;
    font-size: 66px;
    position: absolute;
    bottom: -38px;
    left: 25px;
    display: block;
    color: darkgoldenrod;
    line-height: 1;
    }
    
    .kaisei-old:before,
    .kaisei-new:before{
       content: '';
        font-weight: bold;
        padding: 10px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        flex-basis: 15%;
    }
    
    .kaisei-old:before{
        content: '旧民法';
        background: #ddd;
        color: #666; 
    }
    
    .kaisei-new:before{
        content: '新民法';
        background: #dde5f0;
        color: #205296;
    }
    
    .kaisei-list{
        background: #eee;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
        
    }
    
    .kaisei-list__kisan,
    .kaisei-list__kikan,
    .kaisei-list__jobun{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        line-height: 1.4;
        margin-bottom: 5px;
    }
    
    .kaisei-list__kisan:before{
        content: '起算時';
    }
    
    .kaisei-list__kikan:before{
        content: '時効期間';
    }
    .kaisei-list__jobun:before{
        content: '根拠条文';
    }
    
    .kaisei-list__kisan:before,
    .kaisei-list__kikan:before,
    .kaisei-list__jobun:before{
            font-weight: bold;
            font-size: 12px;
            align-items: center;
            line-height: 1;
            background: #fff;
            color: #c3a768;
            padding: 4px;
            min-width: 54px;
            display: inline-block;
            margin-right: 10px;     
    }
    
    .kaisei-new > div,
    .kaisei-old > div{
        width: 100%;
    }
    
   @media screen and (max-width: 767px) { 
       
       .kaisei-old:after{
    font-size: 44px;
    position: absolute;
    bottom: -27px;
    left: 0;
    display: block;
    color: darkgoldenrod;
    line-height: 1;
    width: 100%;
    text-align: center;
           }
    }